Archive for the ‘Diseño Web’ 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

Conferencia HTML5 y CSS3

Posted by Henry On June - 11 - 2010

Conferencia HTML5 y CSS3 por Alexandra García Milan

    Fuente: Slideshare

    ¿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

    Recursos y herramientas para diseñadores web

    Posted by Henry On May - 18 - 2010

    La mayoría de los diseñadores web inician sus nuevos proyectos directamente en su pc utilizando cientos de herramientas para la creación de wireframes, maquetas, prototipos, y haciendo otras actividades de planificación en el equipo o en línea. Pero también existen toneladas de herramientas en papel que pueden acelerar el proceso de desarrollo y diseño. Muchos diseñadores comienzan la planificación a menudo sólo utilizando un papel en blanco o gráfico sobre el cual inician el desarrollo de nuevo proyecto web.

    Hongkiat nos presenta una colección de estas herramientas de uso offline para el desarrollo de wireframes, maquetas y nuevos prototipos.

    Puedes ver toda la colección en Hongkiat.

    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