Elementos y Recomendaciones Generales

HTML

Sobre lo anteriorPrimero escribimos la dirección o URL del sitio Web en nuestro navegador. A continuación y sin que nosotros nos demos cuenta, nuestro navegador solicita la pagina web al servidor que alberga el sitio (Eje. elsalvador.com). Acto seguido, el servidor envía de vuelta los datos a nuestro ordenador a través de Internet. Finalmente, nuestro navegador interpretará los datos, mostrando el resultado en la pantalla de nuestro ordenador.

Navegadores mas usados.

Muchas veces dependerá de

estos la visualización

de una pagina web y

también influye la

resolución que se este utilizando.

Que es y para que sirve HTML?

Algo de historia sobre el lenguaje mas importante de Internet

Pero entonces HTML es un lenguaje de programación?

Veamos el siguiente ejemplo de comparación utilizando para ello un algoritmo en el lenguaje JAVA y a la vez veamos como lo resuelve el HTML

Y que se necesita para escribir código HTML y crear paginas web?

• Los requisitos principales y fundamentales, para escribir código HTML y crear páginas web, son básicamente dos: saber HTML (lo cual de alguna manera implica conocer las viñetas y su función y practicarlas) y un editor de texto (nosotros utilizaremos el Notepad, aunque se pueden usar otros editores o programas). Hay muchos profesionales que crean sus páginas en Dreamweaver, usando Flash u otros programas o tecnologías.

• Esta forma de crear páginas web tiene a favor la fácil creación de éstas pero, si se quiere hacer páginas web de calidad y tener un control total sobre el código generado, lo primero y fundamental es saber HTML.

Elementos adicionales:• Se necesita una computadora y un navegador?Si• Se necesita conexión a Internet para crearla?No• Y entonces para que estén accesibles a todos?Posteriori subirlas a un servidor remoto• Se puede hacerla directamente en un servidor?Si, pero es preferible iniciar localmenteA CONTINUACIÓN UN PAR DE CONSEJOS QUE

TAMBIÉN PUEDEN AYUDAR

Tomar ideas

• Ojo, tomar ideas no es copiar contenidos con derechos de propiedad intelectual, no se debe reproducir textualmente el trabajo de otros sin valorar si se está vulnerando el derecho de propiedad intelectual. Sin embargo, es importante inspirarse en otros sitios, buscar contenidos que puedan servir, combinaciones de colores que se vean bien, y diseños organizados que puedan ser útiles.

No usar toda la gama de colores en su pagina web

• No cree una página web que parezca un arcoiris: inicialmente le puede parecer curiosa, pero un usuario que visite su página web, se sentirá molesto con demasiados colores.

• Por ejemplo, es preferible utilizar el clásico fondo blanco y texto negro o azul(muy de moda en la actualidad), que el fondo rosa con puntos morados y el texto verde fosforescente. Cuide que los colores de su página tengan una buena combinación, y que hagan fácil la lectura.

• Observen y opinen de la siguiente pagina

Se ve mejor si cabe en la pantalla

• Procure que su diseño esté basado en el tamaño de la pantalla, no busque escribir una novela completa en la página inicial de su web. Es preferible que las páginas no tengan scroll, o que si lo tienen éste no sea demasiado largo.

• En tanto mas largo el contenido de la pagina inicial hace que el usuario se desubique y pierda el sentido de lo que esta consultando. Es mejor utilizar una buena estructura de menú y enlaces

Administre sus imágenes

• Su página se verá más atractiva si usa imágenes. No obstante, debe usarlas de una forma moderada porque un excesivo número de imágenes puede ser también perjudicial si no permite una buena lectura del contenido.

• O sea que en lugar de enfocar distraen al que la esta consultando

Haga que su sitio sea fácil de navegar• Por muy obvia que parezca esta recomendación, debes dividir la

información en diferentes secciones y ubicar los enlaces a las mismas donde la gente espere encontrarlos.

• Hay algunos sitios donde sólo es posible desplazarse hacia adelante o hacia atrás. En realidad, eso no es "navegar". Es necesario que el visitante pueda elegir en todo momento qué sección quiere visitar y en qué orden: por ejemplo tener un menú es algo generalmente aconsejable. No se olvide de incluir en todas las páginas un enlace a la página de inicio (la primera página) para facilitar la navegación.

• También es interesante incluir el logotipo de su sitio en todas las páginas, porque no siempre el visitante ingresa al sitio por la página de inicio; si proviene del enlace de un buscador, es probable que ingrese por cualquier sección, en ese caso, el logotipo en todas las páginas ayuda a ubicar al posible visitante donde está.

• Un ejemplo de menú sería:

Mantenga su sitio actualizado• Nada es más desagradable que volver a un sitio tiempo después

de una visita y no encontrar ningún cambio. Realizar cambios frecuentes crea en los visitantes la idea de que el contenido es valioso y vale la pena darse una vueltecita a menudo.

• Para ello hay que programarse un esquema de actualización y hay que cumplirlo.

• Renueve sus promociones, agregue más información sobre nuevos productos, servicios o artículos, incluya testimonios de clientes o usuarios satisfechos, hay que usar la imaginación.

• También se puede incluir la fecha de la última actualización en un lugar visible de tu página de inicio, o bien mantener un apartado donde se vea que los contenidos están actualizados.

Promocione su web: on line y off line‐ ‐• Envíe su sitio a los principales motores de búsqueda y directorios

(google, yahoo, etc.). Dedique tiempo a realizar un trabajo a conciencia, el mismo se justificará plenamente con un mejor posicionamiento en los buscadores.

• Después de todo ¿de qué le sirve tener un sitio en Internet si nadie lo encuentra?

• Mas adelante se mencionara la forma de utilizar palabras claves (keywords) que describen tu negocio lo mejor posible. Aquí conviene situarse del lado de quien busca, ¿qué keywords utilizará su posible cliente para buscar un sitio de sus características? Hay que hacer una pequeña encuesta, pregunte a amigos/as y conocidos.

• No se olvide de incluir su dirección (http://www.susitio.com) en toda papelería y comunicación que emita: tarjeta comercial, papelería, facturas, memorandums, recibos, folletos, faxes, bolsas, publicidad, etc.

Información para sus clientes• Incluya un enlace al pié de cada página para que puedan

comunicarse con usted. El agregar información con la dirección física, teléfono completo (con el código del país), fax, etc, ayuda a crear confianza. Después de todo usted y su web existen en el "mundo real" no son un ente imaginario perdidos en el ciberespacio.

• Cuando le sea posible, incluya un campo donde sus usuarios puedan ingresar el email para recibir un boletín o newsletter con novedades sobre sus productos, esto ayuda a crear confianza y lealtad a su página. Otra opción es la suscripción mediante RSS ó Atom, que son servicios para poder recibir las novedades que se van publicando en su página.

• Recuerde que ahora puede utilizar las redes sociales para promocionar su web o empresa online: Facebook, YouTube, Slideshare, Linkedin, etc.

Finalmente

• Todas estas ideas pueden ayudarle a tener un sitio web de calidad y bien posicionado en los buscadores.

• No tiene por qué cumplirlos todos, ni son todos los puntos a tener en cuenta para que su sitio esté el primero en los buscadores, pero pueden resultar útiles.

• No se preocupe si ahora algunos conceptos no le quedan claros porque a medida que trabajes en desarrollos web irás adquiriendo una visión más completa.

Interrogantes o investigaciones?• En primer lugar, observaron que las líneas de los párrafos no se partían

por donde terminaban• Recuerden siempre que un párrafo es un párrafo. Comienza con <p> y

termina con </p>. Todo lo que haya entre esas dos etiquetas es un único párrafo. Aunque insertes cien líneas en blanco entre cada dos palabras, seguirán formando un único párrafo. El navegador lo representará como tal.

• En el archivo fuente del ejemplo, se había añadido una línea así al principio: <title>Primer ejemplo en HTML</title>

• En efecto. En HTML cada documento debe tener un título, que viene especificado por el elemento TITLE. Se añade porque es obligatorio.

• Pero el documento ya tenía un título?, El que decia así: <h1>Mi colección de discos</h1>. ¿Es diferente?

• Si, es diferente. TITLE se refiere al título del recurso, del archivo .html si se entiende mejor así. H1 es el título de una sección de los contenidos del cuerpo del documento. Puede haber más de un H1 en un mismo documento.

Y en que ambiente se programa HTML?

• Existe algún programa especial?• Nada que no tengas ya: un navegador para ver la

página y el editor de textos más sencillo que haya en tu sistema operativo. Si estás en Windows, el Bloc de Notas será perfecto para empezar

• Hay otros elementos por supuesto que ustedes deberían de investigar y conocer como funcionan.

Aspectos iniciales• Un documento HTML está formado por elementos. Ya se han mencionado

algunos elementos. Por ejemplo, un elemento P representa un párrafo, un elemento OL representa una lista, un elemento TITLE representa el título del documento...

• Bien. En general, cada elemento se divide en tres partes: una etiqueta inicial, el contenido del elemento, y una etiqueta final.

• Nunca se debe confundir etiqueta con elemento. Un elemento no es una etiqueta. Una etiqueta es una parte de un elemento.

• Unos elementos pueden contener a otros elementos. Por ejemplo, en el caso del ejemplo, el elemento OL contenía elementos LI. El elemento OL representa una lista, y cada elemento LI representa uno de los elementos de la lista.

• Existen reglas que definen qué tipos de elementos puede contener cada tipo de elemento. Por ejemplo, un elemento P no puede contener a otros elementos P.

• Otro ejemplo, un elemento OL sólo puede contener elementos LI. Así es como está definido. Cada tipo de elemento tiene sus reglas.

• Un documento HTML sólo puede contener un tipo de elemento: el elemento HTML. Lógico!!!

• Es como si el documento fuera un gran elemento. A su vez, el tipo de elemento HTML puede contener dos tipos de elemento: un elemento HEAD y un elemento BODY, y sólo uno de cada. El elemento HEAD define la cabecera del documento, que contiene información sobre el documento, y el elemento BODY contiene el cuerpo del documento, lo que será representado por el navegador. Lo vieron en el ejemplo?

• Ahí estaba, pero no se veía. Para algunos tipos de elementos, las etiquetas son opcionales. Para otros tipos, sólo la etiqueta final es opcional. Pero eso no quiere decir que el elemento no empiece y no termine. Lo primero que hace el analizador del código es buscar dónde empieza el elemento HTML. Si no encuentra la etiqueta inicial, supone dónde está.

• En principio esto se puede complicar bastante. Por eso se recomienda incluir siempre todas las etiquetas aunque sean opcionales. Además, si en el futuro se usa XHTML se tendrá que incluir todas las etiquetas, porque allí no hay etiquetas opcionales.

• Bueno, el documento del ejemplo es perfectamente válido, es decir, sigue todas las reglas sintácticas de HTML, pero normalmente los documentos son más complejos, y es fácil equivocarse. Por eso hay servicios que nos permiten validar los documentos.