Blog - El TallerWeb » diseño http://blog.eltallerweb.com Blog para apasionados al diseño y desarrollo Web Tue, 16 Jun 2015 20:26:30 +0000 es-ES hourly 1 http://wordpress.org/?v=4.2.2 La importancia de usar etiquetas h1, h2, h3 … http://blog.eltallerweb.com/la-importancia-de-usar-etiquetas-h1-h2-h3/ http://blog.eltallerweb.com/la-importancia-de-usar-etiquetas-h1-h2-h3/#comments Mon, 31 Dec 2012 15:54:00 +0000 http://blog.eltallerweb.com/?p=473 Por Marina Chávez, @ravsyn

Si alguna vez te has preguntado qué es una etiqueta h1, podrás encontrar la respuesta en miles de blogs especializados en SEO. Sin embargo aquí lo explicaremos brevemente, no sólo desde el punto de vista de posicionamiento web sino también desde la visión de diseño web.

¿Qué es una etiqueta h1?

Esta etiqueta está asociada al cuerpo -o body- de nuestra página web, y nos permite definir el título de una página. Después de la etiqueta <title></title>, h1 le dice, no sólo al usuario, sino también a las motores de búsqueda (como Google, Yahoo, etc.) de qué se trata nuestra página, desde el título genérico y universal hasta los subtítulos precisos o h2, h3, etc.

*Dato importante: Los encabezados h* empiezan desde h1 (siendo el más importante en jerarquía) y únicamente llegan a h6. Más encabezados como h7, h8 … sólo harían que los buscadores se volvieran locos intentando leer nuestro código y terminarían ignorando nuestro contenido.

Ésta o estas etiquetas deberían escribirse justo debajo de <body>. Teniendo así, como ejemplo:

<body>

<header>

<nav>

<li>Inicio</li>

<li>Servicios</li>

<li>Contáctanos</li>

</nav>

</header>

<h1>Ensayos de HTML en Diseño Web</h1>

<h2>La importancia de usar etiquetas h1, h2, h3 …</h2>

….

</body>

Podemos ver que h1 menciona el tema general de nuestro sitio, mientras que h2 define precisamente de qué estamos hablando en esta página individual. Es decir, véamoslo como un blog en el que podemos ver un título general, un título de sección o categoría y luego tenemos un título para cada entrada o post.

En una página principal o portada de sitio encontramos regularmente un h1 (a lo máximo dos h1) y de uno hasta diez h2. Un ejemplo de esto lo podemos ver usando la herramienta “SEO Site Chechup” http://www.seositecheckup.com/h1_h2_heading_status.php y analizando el sitio de Time.com:

En el portal de Time podemos ver dos etiquetas h1, una que describe el título general y otro que describe la noticia titular más importante del día, y a continuación encontramos alrededor de 10 etiquetas h2 que describen los titulares más importantes después del h1.

Como resumen, hasta este punto, tenemos a h1 que no necesariamente define el nombre de la página sino también el título principal de ésta. Luego sigue h2 definiendo exactamente de qué hablamos en una página, y luego h3, h4, h5 y h6 mostrando subtítulos y titulares de menor jerarquía que aportan palabras clave (keywords) muy valiosas para los motores de búsqueda. Es decir, hasta este punto hemos definido un título en metatags gracias a <title></title>, después hemos dejado claro cuál es el tema general con h1, para después ahondar con algunos h2 y demás “h’s”. Hasta este punto, Google habrá leído lo suficiente para entender de qué hablamos y mostrar nuestra página en un mayor ranking.

En cuanto a diseño, los encabezados tienen mucha lógica. Los titulares dan jerarquía al contenido y sitúan el ojo del visitante exactamente donde queremos. Tomemos como ejemplo Yahoo.com:

Tiene imágenes alusivas al texto, íconos como apoyo visual para elementos del menú que van colocados en el sidebar (o columna lateral), pero lo destacable es que las imágenes principales: la imagen de logo de la marca y la fotografía principal de la noticia titular están colocadas dentro de las etiquetas h*:

Así que tenemos un par de recomendaciones: si no estamos interesados en que Google -por no mencionar otras search engines– toma en cuenta nuestra página, ignoremos toda esta información que pudiera venirnos como aburrida y repetitiva, bla, bla, bla. Si en cambio, estamos interesados en figurar en el mapa y subir nuestro ranking, empecemos a tratar a las etiquetas -en principio las h*, pero deberíamos interesarnos por todas- como valiosos elementos en el desarrollo, diseño y publicación de nuestros contenidos web.

 

]]> http://blog.eltallerweb.com/la-importancia-de-usar-etiquetas-h1-h2-h3/feed/ 1 LA IMPORTANCIA DE LA TIPOGRAFÍA … “también en la web” – Parte II http://blog.eltallerweb.com/la-importancia-de-la-tipografia-tambien-en-la-web-parte-ii/ http://blog.eltallerweb.com/la-importancia-de-la-tipografia-tambien-en-la-web-parte-ii/#comments Wed, 14 Nov 2012 23:13:13 +0000 http://blog.eltallerweb.com/?p=333 Por Marina Chávez, @ravsyn

Partiendo un poco del artículo pasado, y sólo con el propósito de resumir lo que expuse hace unos días, la tipografía en web es muy importante ya que suele jugar un papel relevante en el éxito de un diseño web; puede ayudar a generar jerarquía visual, puede facilitar la lectura de un texto, y aunque pensemos que sólo está porque tiene que estar y no importa si al final se decide entre Arial y Helvetica, es mucho más importante que eso. Recordemos que Steve Jobs tomó un curso de caligrafía donde aprendió acerca de las tipografías serif y sans serif, y después de 10 años diseñó la primera computadora con una tipografía decente; es decir: la tipografía sí importa.

A continuación daré algunos tips particularmente útiles a la hora de seleccionar tipografías para un diseño web:

  1. ¿Serif o Sans Serif?

Serif (De tacón, romanas, o con patines)

Las tipografías Serif se usan para guiar el flujo horizontal de lectura, y no se recomienda alterar el espaciado ya que pierden forma. Son muy útiles para párrafos <p></p> o textos largos. Este tipo de tipografía se considera más formal que una Sans Serif ya que es más prolija, y usualmente es utilizada en sitios de gobierno, periódicos, sitios de noticias, etc. Sin embargo, estudios y percepciones prueban que su formalidad ha perdido fuerza en web, y sólo se mantiene intacta en otros medios impresos. Ejemplos de Serif en web podemos verlos en www.bbc.co.uk, http://www.whitehouse.gov/, http://www.nytimes.com/.

Sans Serif (De palo seco o góticas)

Por otro lado, las tipografías Sans Serif son las preferidas en la web. Siendo de líneas sencillas, con un buen rendimiento de pixelaje; frescas y modificables en cuanto a separación y tamaño, se han convertido en la primera opción de muchos diseñadores.

2. ¿Cuántos tipos de tipografía se deben usar en un diseño?

Muchos piensan que debes usar las menos posibles y aunque a veces es cierto, no siempre aplica a todos los proyectos. Si tenemos un sitio con tema serio, podríamos usar tres tipografías: una para los títulos, una para los párrafos, y otra para los resaltes (blockquotes, span, etc.). Si se trata de un sitio de temática dinámica, fresca y moderna, debería usarse igualmente una mezcla de diferentes tipografías para títulos, textos y detalles en texto, pero se podría añadir diferencias entre títulos, es decir, una tipografía para h1, otra para h2, y otra para h5. Sin embargo, se puede usar un solo tipo de tipografía con variantes en tamaño como el caso de: www.surround.sg/.

3.  Espaciado

Se aconseja usar un espaciado de 0.3em a 0.5em mayor que el tamaño de la fuente en textos como párrafos, mientras que en headlines, slogans o frases cortas se puede jugar con éste.

4. Jerarquía

Tal vez este sea uno de los puntos más importantes ya que la tipografía en web debe ser usada con el propósito de establecer jerarquías entre títulos, subtítulos, notas, párrafos, cortes de línea, etc., y esto se logra a través del uso de diferentes tipos de tipografía, colores, tamaños, espaciados, márgenes y demás características que definen el título de la página del título de los posts, o de el contenido principal. Un ejemplo de una buena jerarquización podemos verla en los siguientes sitios: www.licenselab.com, www.goslingo.com, www.boarshead.com, www.elysiumburns.com, www.newyorker.com.

5. Tipografías Web Seguras

A la hora de seleccionar las fuentes tipográficas que usaremos en nuestro diseño web nos enfrentamos a dos opciones: fuentes convencionales seguras y fuentes con CSS3. En el caso de las tipografías seguras, éstas se refieren a aquellas fuentes que la gente tiene instaladas por defecto en su sistema. Es decir, cuando diseñas una página web y colocas una fuente tipográfica que sólo está en tu computadora (en la del diseñador) y no en las computadoras de los 10,000 visitantes a tu página, los visitantes verán una tipografía por default sustituída que cambia totalmente el diseño. Para que esto no pase, existe una lista de tipografías seguras, que todo mundo tendrá instaladas en sus computadoras:

            Serif:

  • Georgia (font-family:”Georgia”, serif; )
  • Palatino Linotype ( font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif; )
  • Times New Roman ( font-family: ‘Times New Roman’, Times, serif; )
  • MS Serif ( font-family: ‘MS Serif’, ‘New York’, sans-serif; )
  • Garamond ( font-family: Garamond, serif; )
  • Bookman Old Style ( font-family: ‘Bookman Old Style’, serif; )

            Sans-Serif:

  • Verdana ( font-family: Verdana, Geneva, sans-serif; )
  • Arial ( font-family: Arial, Helvetica, sans-serif; )
  • Arial Black ( font-family: ‘Arial Black’, Gadget, sans-serif; )
  • Arial Narrow ( font-family: ‘Arial Narrow’, sans-serif; )
  • Symbol ( font-family: Symbol, sans-serif; )
  • Impact ( font-family: Impact, Charcoal, sans-serif; )
  • Tahoma ( font-family: Tahoma, Geneva, sans-serif; )
  • Century Gothic ( font-family: Century Gothic, sans-serif; )
  • Lucida Sans Unicode ( font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif; )
  • Trebuchet MS ( font-family: ‘Trebuchet MS’, Helvetica, sans-serif; )
  • MS Sans Serif ( font-family: ‘MS Sans Serif’, Geneva, sans-serif; )

            Monospace:

            Las tipografías monospace son aquellas que ocupan el mismo espacio horizontal, cada caracter tiene un ancho fijo.

  • Courier New ( font-family: ‘Courier New’, Courier, monospace; )
  • Courier ( font-family: Courier, monospace;  )
  • Lucida Console ( font-family: ‘Lucida Console’, Monaco, monospace; )

Cursivas:

  • Comic Sans MS ( font-family: ‘Comic Sans MS’, cursive; )

6. Tipografías Web o Web Fonts

Hoy en día existe una creciente tendencia (la cual agradecemos mucho) por usar tipografías web. Ya sea que las bajemos de sitios como www.fontsquirrel.com y las hospedemos en nuestro servicio de hosting para después llamarlas en css:

@font-face{

font-family: “Journal; src: url(fuentes/journal.ttf) format(“truetype”);

}

O que utilicemos los servicios gratuitos de www.google.com/webfonts, www.typekit.com, y www.webink.com/fonts.

Y por último, les dejo algunos links de sitios que han aprovechado al máximo el bueno uso de tipografías web:

 

]]> http://blog.eltallerweb.com/la-importancia-de-la-tipografia-tambien-en-la-web-parte-ii/feed/ 0 LA IMPORTANCIA DE LA TIPOGRAFÍA … “también en la web” http://blog.eltallerweb.com/la-importancia-de-la-tipografia-tambien-en-la-web/ http://blog.eltallerweb.com/la-importancia-de-la-tipografia-tambien-en-la-web/#comments Wed, 31 Oct 2012 20:57:48 +0000 http://blog.eltallerweb.com/?p=306 Por Marina Chávez, @ravsyn

La palabra tipografía viene del griego tipos que significa marca o huella, y de grafo, escribir. Y de acuerdo con el tipógrafo Stanley Morison, es el arte de disponer correctamente el material de imprimir, de acuerdo con un propósito específico: el de colocar las letras, repartir el espacio y organizar los tipos con vistas a prestar al lector la máxima ayuda para la comprensión del texto escrito verbalmente.

La tipografía es el arte de tratar letras, números y símbolos de acuerdo al diseño, color, tamaño, forma, acabados, posición y demás relaciones visuales que comunican un mensaje, que sirven como apoyo o como punto focal de metáforas, que conviven con la creatividad, que son serias, que son puntuales, a colores o a veces, sólo a blanco y negro. A veces personificará un papel de reparto, en otras ocasiones será el personaje principal.

Sin embargo, cuando pensamos en tipografía nos remitimos a algo artístico, sin reglas ni paradigmas, siendo esto todo lo contrario. Como casi todas las artes existen reglas que se tienen que aplicar para mantener un orden, una conjunción gráfica que sea agradable a la vista, que tenga coherencia, que comunique el mensaje y resalte aquello que se quiere puntualizar. Imagina que, de repente, decides manejar tu auto sin seguir las reglas de tránsito, ahora imagina que todo mundo empieza a manejar sin esas reglas. Las calles se convertirían en caos, ocurrirían muchos accidentes y el sistema se colapsaría en cuestión de horas. Lo mismo aplica a la representación de los textos con el uso de la tipografía: tienes que seguir algunas reglas que están basadas en la percepción visual del ser humano.

Tipografía en la Web

El mundo está en una constante evolución, y hoy más que nunca. Desde los códices mayas hasta los romanos que imprimían inscripciones sobre objetos de arcilla y luego la imprenta moderna en 1440. Por lo que la necesidad de comunicarse a través de lo escrito ha sido importante en la sociedad humana. Ahora tenemos una nueva técnica llamada HTML que de la mano del CSS, se convirtieron, y cobrarán cada vez mayor fuerza, en la manera de imprimir del siglo XXI.

Antes de 1995, todo lo publicado en Internet tenía un estilo monótono, es más, ni siquiera tenía estilo hasta el surgimiento del CSS (Cascading Style Sheets) cuando la W3C lo añadió al equipo de trabajo de HTML.

Mientras que los textos impresos se conforman por capítulos, párrafos inmensos y una estructura editorial; los textos en la web nunca deben paginarse o estructurarse de la misma manera. En mi particular manera de sentir y visualizar, la tipografía en web se parece más a la tipografía de apoyo publicitario, debido a que los lectores de la web no leen sino escanean decenas de páginas a diario, y escanearán, tal vez, millones de páginas a lo largo de algunos años.

Por esto la estructura de un texto en web debe romper esos grandes textos en piezas que ofrezcan la información precisa, y aquí es cuando entra CSS para poder formar jerarquías de títulos, subtítulos, párrafos, links, menús, alineación (no todos los textos justificados son “bonitos”), color, tamaño, ubicación, etc.

Reglas de convivencia de la tipografía en la web:

Links: siempre debe quedar claro que un link es un vínculo hacia a otro lugar en la web; ya sea decorando el texto con una línea al roce de éste o con un color diferente al resto del texto, siempre debes dejar claro que este pedazo de texto te lleva a otro lugar.

Alineación: un texto nunca debe quedar al roce del margen. El texto justificado ayuda a ahorrar espacio, a convertir una plasta de texto en una línea recta homogénea, sin embargo, modifica la tipografía al sumar espacios y agregar espacios entre letras. El texto alineado a la izquierda o a la derecha se usa cuando quieres mantener la forma y el espaciado entre letras o palabras unificado, sin cambio. Estos textos se usan en descripciones cortas, para sumar o restas espacios negativos o positivos, no satura, se ve natural (nadie escribe naturalmente con alineación justificada sino con alineación izquierda -o derecha en caso de algunas culturas-).

Pesos o formas: la tipografía itálica o italic se usa para enfatizar algo en el texto. La bold se usa para resaltar palabras clave que el lector o visitante pudiera estar buscando. Small capitals (o mayúsculas pequeñas) es un peso adecuado para subtítulos, y los pesos regulares o estándar de cada tipografía sirven para hacer ligero un texto extenso.

Tamaños: hoy en día existen tres principales unidades para medir el tamaño de la tipografía en la web: points, pixels y ems. Sólo voy a hablar de pixeles. El tamaño estándar para un párrafo es de 14px. Fuera de esto, puedes jugar con todos los tamaños mantiendo siempre una relación de aspecto en base al estándar de 14px. Es decir, puedes usar un tamaño de hasta 32 pixeles para un título en web, incluso un tamaño de 60 pixeles, pero todo irá siempre plasmado en cuanto al aspecto. Los textos también pueden convertirse en monstruos de 8 patas que no quieres ver.

Familias Tipográficas: existen cinco grupos de familias dentro de los cuales se incluyen todas las tipografías del mundo: de tacón o romanas (serif), de palo seco o góticas (san serif), caligráficas, germánicas y de fantasía.

Espera la segunda parte de este artículo …

]]> http://blog.eltallerweb.com/la-importancia-de-la-tipografia-tambien-en-la-web/feed/ 0 ¿Ocupar o no ocupar toda la pantalla? Esa es la cuestión http://blog.eltallerweb.com/ocupar-o-no-ocupar-toda-la-pantalla-esa-es-la-cuestion/ http://blog.eltallerweb.com/ocupar-o-no-ocupar-toda-la-pantalla-esa-es-la-cuestion/#comments Mon, 15 Oct 2012 16:08:01 +0000 http://blog.eltallerweb.com/?p=231 Por Marina Chávez, @ravsyn

Desde el año 2004 ya se veía venir la tendencia a ocupar toda la pantalla dejando atrás los márgenes laterales, del bottom y del top, sin embargo, a veces parecía ser un estilo de diseño que iba de la mano con páginas diseñadas en Flash. Desde hace aproximadamente un par de años regresó la fiebre por las pantallas completas, y esto tal vez coincida con los alcances de Html5 y CSS3 -que llendo de la mano de un buen diseño- pueden resultar refrescantes, alternativas y muy dinámicas.

Este estilo definitivamente no le va a todos los clientes, marcas y/o productos; pero si se trata de una marca con una imagen gráfica fuerte, con un adecuado stock de fotos “de calidad y en alta resolución”, o una página que puedes prácticamente relatar con ilustración, esta es la mejor opción.

A continuación les muestro un ejemplo del top 10 de las páginas Full Screen:

Diesel Color Exposure: http://www.diesel.com/colorexposure/

EDF – LightGames: http://edf.resn.co.nz/

Milwaukee Police News: http://www.milwaukeepolicenews.com/#menu=stats-page

Hybrid 4 Peugeot: http://graphicnovel-hybrid4.peugeot.com/start.html

Food Studio: http://foodstudio.no/

 

LOfavør Budsjettesten: http://budsjettesten.lofavor.no

Londong Calling: http://www.bbcnordic.com/london-calling/


Tinke: http://www.zensorium.com/tinke/
Roger Dubuis: http://www.rogerdubuis.com/

Decerteau-Avocats: http://www.decerteau-avocats.eu/

]]> http://blog.eltallerweb.com/ocupar-o-no-ocupar-toda-la-pantalla-esa-es-la-cuestion/feed/ 0