Jerarquías en los encabezados en HTML

Escrito por Henry El August - 23 - 20101 COMMENT

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

Escrito por Henry El June - 11 - 2010ADD COMMENTS

Conferencia HTML5 y CSS3 por Alexandra García Milan

    Fuente: Slideshare

    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

    Gracias a  Techtastico nos enteramos que en el sitio de descarga de extensiones para el navegador Chrome han hecho un listado de extensiones para desarroladores web, y me ha sorprendido la cantidad de herramientas que se pueden agregar al Chrome para diseñar mejores sitios web, las extensiones son las siguientes.

    • SpeedTracer
      Mide el rendimiento y velocidad de una página web.
    • Pendule
      Herramientas de desarrollo web para Chrome.
    • Resolution Test
      Una extensión para los desarrolladores que deseen probar las páginas web en diferentes resoluciones de pantalla, con la opción de definir sus propias resoluciones.
    • Measureit!
      Saca una regla que te ayudará a obtener el ancho y alto en píxeles de cualquier elemento en una página web.
    • Chrome Sniffer
      Detecta Frameworks y librerías que usan los sitios web.
    • XML Tree
      Muestra los datos XML en un modo fácil de entender.
    • BuiltWith Technology Profiler
      Detecta con que tecnologías están construidos los sitios web que estás visitando.
    • View Selection Source
      Puedes ver el código fuente de la sección de la página que tienes seleccionada.
    • JavaScript Tester
      Extensión para todos los desarrolladores de JavaScript que deseen ejecutar y probar el rendimiento del código JavaScript.
    • CSS Reloader
      Te permite recargar todos los CSS de cualquier sitio sin que haya que volver a cargar la página en sí.
    • Web developer
      Agrega un botón de barra de herramientas con diferentes herramientas para programadores web.
    • CSS Viewer
      Un simple visor de las propiedades CSS.
    • JSonView
      Puedes ver los documentos JSON en el navegador.
    • CSS Scan
      Ofrece una visión general rápida de las propiedades CSS al pasar el cursor del Mouse sobre el elemento.
    • Chrome Editor
      Edición de HTML fácilmente, justo dentro de su navegador.
    • Multiswitch
      Cambiar entre el desarrollo, prueba y aplicación productiva.
    • Regular Expression Checker
      Simple probador de expresiones regulares.
    • PHP Documentation
      Documentación PHP, la documentación oficial para programadores de PHP.
    • jsshel
      Interactúa con Javascript, jQuery y jLinq
    • Window Resizer
      Redimensiona la ventana del navegador para emular varias resoluciones de pantalla.
    • Aviary Screen Capture
      Toma una captura de pantalla de cualquier página web y editar directamente en el navegador con aplicaciones Aviary.com.
    • Eye Dropper
      Gotero selector de color que te permite elegir el color de cualquier página web o del selector de color avanzado.
    • Instant Image Editor
      Modificar cualquier imagen o imagen de fondo al instante.
    • Lorem Ipsum Generator
      Crea texto de relleno al azar.
    • Plain Clothes
      Quita los estilos de las páginas.
    • Validity
      Haz clic en el icono en la barra de direcciones o presione Ctrl + Alt + V para validar la página actual.
    • Inline Code Finder
      Encuentra los elementos HTML con eventos JavaScript en línea, en línea y estilo javascript: enlaces
    • Picnik
      Toma capturas de páginas web y edita las imágenes directamente en tu navegador con Picnik

    Ver más en Web Dev Extensions.

    Fuente: Techtastico

    HTML 5 – Las nuevas etiquetas

    Escrito por Henry El June - 2 - 20101 COMMENT

    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

    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