Lo que necesitas saber de HTML para hablar con un diseñador

Un emprendedor me comentó que había contratado un diseñador para hacer su página web. La experiencia fué traumática por un montón de razones. Pero una cosa que le molestó mucho es que sentía que el diseñador le hablaba sobre algo que no entendía; se refería todo el tiempo al HTML y mi amigo no tenía ni idea de que estaba hablando.

Para ayudar a este amigo escribo este artículo con lo mínimo que debes conocer de HTML para hablar con un diseñador. No es un curso sobre HTML o una introducción para programadores. Es más como una hoja de referencia para que tus conversaciones sean más fluidas. En inglés lo llaman “cheat sheet” y en mi tierra lo llamamos “_chuleta_”.

Obviamente puedes usar Internet sin entender nada del HTML pero a mí me parece una buena idea tener unos conceptos básicos que te ayudan a entender mejor como funciona la Web. Y te facilitan la comunicación con cualquier persona técnica, sea un diseñador o un desarrollador de páginas web.

¿Qué rayos es el HTML?

El HTML es el código en que están hechas las páginas Web. Son las iniciales de Hyper Text Markup Language, algo así como Lenguaje de Marcado de Hiper Texto. Cada vez que ingresas a una página web tu navegador (chrome, firefox, explorer, etc) obtiene el código en html desde un servidor en Internet y lo convierte en la representación gráfica que vemos.

Aunque mucha gente lo llama lenguaje de programación en realidad es un lenguaje de marcado. Es decir, lo que hace es colocar etiquetas que definen qué hace y cómo se muestra cada parte del documento.

Fué creado en 1989 por Tim Berners-Lee como una forma simple de compartir documentos académicos que tuvieran enlaces, imágenes y algunos otros elementos. El amigo Tim trabajaba en el Centro de investigación Europea para la investigación nuclear (CERN) y se inventó el HTML por que era una pesadilla compartir los documentos con los resultados de la investigación.

Cómo nota curiosa, El CERN es el mismo centro dónde comienza la novela (y película) llamada “De ángeles y demonios” [http://es.wikipedia.org/wiki/%C3%81ngeles_y_demonios_(novela)], la segunda parte de “el Código Da Vinci”.

¿Cómo se ve el código HTML?

El HTML viaja por Internet en forma de texto. Es decir, que cada página es un conjunto de texto que puede ser leído por cualquier persona sin un navegador.

Para ver el código html de cualquier página web sigue estos pasos:

• Abrir la página web de la que queremos ver el código
• Hacer click con el botón derecho en cualquier de la página
• Hacer click en “Ver código fuente” o “View page source”

Eso que se muestra es el código en HTML. Aunque al principio se ve complicado si lo detallas un poco te darás cuenta de cada uno de los elementos básicos del HTML.

¿Cuáles son los componentes básicos del HTML?

El HTML utiliza como componentes básicos los elementos, atributos y contenidos. Cada etiqueta se define colocando los símbolos <>. Por ejemplo, si queremos definir una etiqueta para el título quedaría así:

<strong><title>Yo soy el título</title></strong>

En este caso el elemento o etiqueta es “title” y el contenido es “Yo soy el título”.

Los atributos permiten colocarle características a un elemento. Por ejemplo, para agregarle una imagen a una página se coloca:

<strong><img src=“http://miempresa.com/imagen.jpg” alt=“Imagen dentro del documento"/></strong>

En este caso el elemento o etiqueta se llama “”, y los atributos son el “src” (que corresponde al source o fuente) y el “alt” (que corresponde a un texto alternativo que se muestra cuándo la imagen no se ha cargado.

Si sabes cómo reconocer los elementos, atributos y contenidos es bastante fácil entender una página web.

Lo otro importante que debes conocer es que cada documento tiene dos grandes áreas. El encabezado o y el Cuerpo o . En el encabezado se coloca información para identificar la página, y lo que está en el cuerpo es el contenido de esa página.

Haz el ejercicio, y mira el código fuente de esta página. Vas a ver que es bastante sencillo de entender.

¿Qué es eso de Javascript?

El HTML está hecho para que cada cambio se realice redibujando la página completa. Es lo que sucede cuándo navegas entre sitios distintos. Por ejemplo cuándo vas de Facebook a Youtube, pasan unos segundos y la página se vuelve a redibujar.

Pero hay muchas situaciones dónde quieres simplemente actualizar una parte de los datos. Piensa por ejemplo en actualizar las noticias de Facebook o mostrarte los resultados de una búsqueda de forma inmediata. En estos casos es necesario ejecutar algunas instrucciones directamente en el navegador.

Para hacer este tipo de cosas se utiliza un lenguaje de programación llamado Javascript. A diferencia del HTML que es sólo para marcar texto, el javascript se utiliza para hacer programas de computación. De hecho, casi cualquier página moderna utiliza javascript para ofrecer una experiencia más atractiva al usuario.

¿Cómo hacer que mis páginas se compartan bien en Facebook o Twitter?

Las redes sociales son una parte muy importante de tu presencia en Internet. Y es muy importante que puedas compartir fácilmente las páginas en tu sitio web con redes como Facebook o Twitter.

Cuándo se comparte una dirección de una pagina web o URL la red social trata de mostrar un pequeño avance del sitio.

En este caso se muestra una foto del artículo, el título y el sitio de origen.

Para lograr esto es necesario que tu página web utilice unas etiquetas especiales para decirle a Facebook (o a cualquier otro) qué debe mostrar. Este formato es llama “Open Graph XML“. Afortunadamente implementarlo es mucho más sencillo que el nombre 😄

En cada página se debe incluir una etiqueta como esta en el encabezado:

<strong><meta property="og:image" content=“tu_imagen_principal"/></strong>

Además de la imagen, puedes indicarle a Facebook:

• Título de la página
• Nombre de tu Sitio Web
• Dirección de la página web (url)
• Descripción

Según mi experiencia, esto ayuda bastante a que se compartan mejor tus contenidos en Facebook y Twitter. Si tu página web está hecha en alguna plataforma moderna de contenido (como WordPress, [Zenkiu](), Joomla, Wix) es muy probable que se pueda manejar fácilmente.

Mantener separados forma y contenido

El HTML fue hecho inicialmente para mostrar cómo está estructurado el documento. No está hecho para definir cómo se muestra el documento. Es decir, está pensado para separar el formato y el contenido.

Para definir cómo se muestra un contenido (colores, ubicaciones, fondos, etc) se debe utilizar una tecnología llamada “Hojas de Estilo”, también conocidas como CSS (Cascade Style Sheets). Esto permite definir un elemento de estructura como párrafo y definir que todos los párrafos se de color rojo y fondo amarillo, por ejemplo.

Cualquier inversión que hagas en tu página web se protege más si desde el principio separas el formato del contenido. Si no lo haces, cuándo quieras cambiar alguna parte del diseño, vas a tener que modificar todos los artículos y contenidos que hayas creado.

Imagina este escenario: tienes dos años publicando un artículo todas las semanas. Ya tienes 104 artículos publicados, y te das cuenta que sería bueno hacer un cambio en el diseño de tu página (“extreme makeover”!!). Quieres cambiar los colores, la disposición y el formato en que se muestra tu página web.

Si el formato está separado del contenido, hacer el cambio es tan sencillo como definir el diseño y aplicarlo a todas tus páginas.

Si por el contrario, el formato y el formato estan unidos, para hacer el cambio necesitas modificar las 104 páginas que haz publicado. Además del trabajo, corres el riesgo que no quede bien en todas las páginas. Ya que va a ser un trabajo manual en cada una de las páginas.

Por eso, si estás hablando con un diseñador es muy importante que le pidas que siempre separe el formato del contenido. Para probar si lo está haciendo, puedes pedirle que te muestre el mismo contenido con distintos diseños.

Técnicamente para mantener esta independencia, lo que debe hacer es crear un archivo con los estilos y colocarle a cada elemento un estilo. Algo como:

<strong><p class=“CuerpoPrincipal”><br /> </strong>

Todos los párrafos tendrían este clase, y los atributos gráficos de la clase estarían definidos en otra parte:

<br /> <strong><br /> .CuerpoPrincipal {<br /> <style><br /> color: red<br /> font-face:arial<br /> ….<br /> </style><br /> }<br /> </strong><br />

Si quieres que sea exitoso le vas a invertir mucho tiempo y energía a tu Página Web. Separando el diseño del contenido garantizas que esa inversión se mantendrá a salvo y siempre podrás actualizarla.

¿Cómo puedo cambiar el contenido de mi página?

Tu página web debe ser muy fácil de administrar. Agregar, editar o eliminar contenido tienes que poder hacerlo directamente sin depender de nadie.

La página web debe actualizarse constantemente, mientras más personas se involucren con cada publicación, más lento y costoso es el proceso. Por eso es importante que cuándo te relaciones con un diseñador o programador web quede claro que debes tener la capacidad para hacer tus propias ediciones.

Afortunadamente hoy es muy sencillo contar con una plataforma sencilla para que puedas administrar tu página web. Muchos diseñadores trabajan hoy en día con aplicaciones como WordPress, Joomla o [Zenkiu](). Estas aplicaciones permiten que puedas editar el contenido sin tener que conocer sobre HTML.

¿Qué hace falta para que el HTML se vea bien en el celular?

Hoy en día muchísima gente está navegando desde su celular o tableta. Existen muchos modelos y tamaños de pantallas dónde tu página web debe verse bien. Probar tu página en cada aparato posible es realmente muy difícil de hacer.

Existe un truco muy sencillo para tener una idea de cómo se adapta el diseño a cada tamaño de pantalla; en tu navegador puedes disminuir el tamaño de la ventana y verificar cómo se ve tu página web.

En el caso del navegador Firefox tienen una herramienta sencilla en la que te muestra cómo se ve la página para varios tamaños preestablecidos. Para usarla simplemente vas a “Tools / Web Developer / Responsive Design View”.

Cuándo la página web responde bien a los distintos tamaños se dice que tiene un diseño “Responsivo”. Con esta técnica ahorras tener varias versiones de tu página web para distintas pantallas ya que un sólo diseño se adapta para mostrarse adecuadamente.

Espero que esto te sirva para comunicarte mejor con cualquier diseñador o desarrollador web. Si tienes problemas con tu página web, en Imolko podemos ayudarte. Sólo escríbenos para ponernos en contacto.

Cada 15 dias estamos enviando un boletín gratuito full de información valiosa para tu negocio. Suscríbete colocando tu correo en esta cajita y presionando “Go”.