Archive for the ‘Destacados’ Category

Jerarquías en los encabezados en HTML

Posted by Henry On August - 23 - 2010

Los encabezados pueden ser un tema difícil. En el artículo de hoy vamos a ver el uso efectivo de las etiquetas que designan los titulares.

Con una revisión rápida de la jerarquía de los encabezados de nuestro sitio conseguiremos una mejora tanto en usabilidad como en el ranking de los motores de búsqueda.

El tamaño no importa

Cuando primero comencé a aprender HTML, parecía lógico utilizar las etiquetas de título cuando deseaba fuentes grandes. Esto es un error común de novato. Para un diseñador de páginas web que acaba de empezar, los usos adecuados de las etiquetas H1- H6 pueden no ser tan obvios.

Estas etiquetas no deben utilizarse simplemente porque ofrecen variantes rápidas en los tamaños de fuente, este es un trabajo que vamos a dejarle al CSS. Esto permite al diseñador centrarse en hacer que el código sea relevante a los contenidos que debe mostrar.

Los encabezados tienen una misión mucho más importante en la semántica de un sitio web. Ellos ayudan a destacar la jerarquía de los contenidos. Vamos a aplicar esta idea de la jerarquía a este sitio de muestra:

¿Cómo organizar los titulares en el sitio de arriba? ¿Cuál es el elemento más importante para una página? ¿Cuáles son secundarios a otras piezas?

Aquí hay una interpretación de los encabezados de acuerdo con el contenido de la lista de arriba.

No siempre existe una solución general a la organización de los encabezados del sitio. En realidad, se reduce a cuál es el contenido en el que deseas poner el foco, y cuál puede caer en el fondo.

Hacer un Esquema

Cuando se utiliza lógicamente, la jerarquía de cabecera debería formar un esquema.

¿Necesitas ayuda para visualizarlo? El validador HTML del W3C tiene una característica muy útil que arma un esquema basado en la jerarquía de etiquetas de cabecera. He aquí un ejemplo usando la página principal de Smashing Magazine.

Los títulos deben reflejar la estructura lógica del documento, no deben utilizarse simplemente para dar énfasis, o para cambiar el tamaño de la fuente.

Un inconveniente del servicio de esquema del W3C es que sólo funciona en documentos HTML válidos.

Afortunadamente, existe una alternativa para todos aquellos que no viven o mueren por la validación de la página con la barra de herramientas Web Developer para Firefox. En la barra de herramientas, vayan a Información> Ver Esquema del documento para obtener un esquema al que no le importa si has incluido una etiqueta ALT o no.

Diggea esa jerarquía

Digg es un ejemplo excelente de jerarquía de titulares bien arreglada, mientras se mantiene una página simple; sin necesidad de sobrecargarla. Incluso con grandes cantidades de contenido, la página principal de Digg sólo mantiene 3 niveles de profundidad.

Cosechar los frutos

El arreglo adecuado de los titulares no es sólo una buena práctica idealista. Tiene algunas ventajas muy reales, especialmente cuando se trata de la optimización del motor de búsqueda.

Los motores de búsqueda serán capaces de rastrear e indexar tus páginas con mucha más eficacia si las etiquetas están ayudando a indicar las partes importantes. Con un arreglo inteligente de palabras clave, puedes aumentar los resultados de búsqueda para cualquier cantidad de temas.

Fuente: Build Internet elwebmaster

¿Qué es HTML5 y porqué nos debería importar?

Posted by Henry On June - 9 - 2010

Muchas cosas se han dicho desde la primera vez que se nombro el lenguaje HTML5, incluso dos de las más grandes compañias a nivel mundial: Apple y Adobe han entrado a un juego interminable de ataques basados en este nuevo formato, lo cierto es que aún hay muchas personas que no entienden a fondo de que se trata todo esto.

Focus nos brinda una excelente infografía que nos puede ayudar a entender mejor este nuevo lenguaje que apunta a ser el nuevo estandar del desarrollo web.

Mira la infografía completa en Focus

HTML 5 – Las nuevas etiquetas

Posted by Henry On June - 2 - 2010

Poco a poco mas diseñadores y desarrolladores web estamos entrando, unos con más convicción que otros, al uso de etiquetas HTML 5 y CSS3, aquí tenemos una lista de las nuevas etiquetas de HTML 5, enlazándonos a sus respectivas descripciones y ejemplos de uso.

Fuente: W3Schools y Quacki

14 Galerías de imágenes con Javascript y CSS

Posted by Henry On May - 24 - 2010

Una presentación de diapositivas es una muestra de una serie de fotografías escogidas, que se hace con fines artísticos o de instrucción. Y si la presentación es fresca y sexy, sin duda aumentaría el glamour y la sensación de grandiosidad. Esta es la lista de 14 galerías de imágenes desarrolladas con Javascript que puede agregar en sus proyectos web.

Mira las 14 galerías en Web developer juice

Elementos y Principios del Diseño

Posted by Henry On May - 19 - 2010
Excelente presentación sobre los Elementos y Principios del Diseño.

Fuente: Slideshare

VIDEO

Enter the video embed code here. Remember to change the size to 320 x 270 in the embed code.

TAG CLOUD

Sponsors

Mas comentados

      
        

About Me

Soy Henry Quevedo, Diseñador Web en Crea-T y en la Agencia Ingenia, Administrador de Cuentas de Hosting en Lemongeek y Blogger en Crea-T Blog.

Twitter

    Photos

    barcamplima1 - estacionamiento de laptopsbarcamplima1 - aficheHenry

    Switch to our mobile site