HTML 5 – nav

Al igual que nuestro anterior post donde vimos el tag section en esta ocasión nos centraremos en el tag nav. El objetivo de este elemento al igual que section es describir de forma más semántica la página, con esto se logra una estructura más ordenada y quizás en el futuro los buscadores puedan tomarlos en cuenta para la Web semántica.
Este tag se utiliza para introducir los menús de navegación del sitio, esto generalmente se hacía con:

HTML:

Ahora al introducir este elemento como dijimos anteriormente mejora la forma semántica del sitio, como se ve en este ejemplo.

HTML:
  1. <nav>
  2. <li><a href="#l">Inicio</a></li>
  3. <li><a href="#">Acerca de</a></li>
  4. <li><a href="#">Contacto</a></li>
  5. </ul>
  6. </nav>

Creo que no hay mucho que hablar sobre este tag ya que es simple su objetivo

Espero les sirva

saludos tuto

HTML 5 – section

Hoy comenzamos con la revisión de la especificación html 5 y en esta ocasión nos centraremos en el tag section.

Este elemento se utiliza para darle una nueva estructura al código, por ejemplo en este código se ve una estructura de html 5 con varios nuevos elementos

HTML:
  1. <header>
  2.   <p>Cabecera</p>
  3. </header>
  4. <nav>
  5.   <p>Menu de navegacion</p>
  6. </nav>
  7. <section>
  8.   <p>Seccion</p>
  9.     <article>Articulo</article>
  10. </section>
  11. <footer>
  12.   <p>Pie de pagina</p>
  13. </footer>

Si nos damos cuenta la estructura es más fácil de entender ya que los nuevos elementos le dan una estructura definida y una forma que al solo leer los elementos involucrados se saben las partes que están dentro del sitio.
En cuanto al tag section viene unido a acción de ordenar semánticamente el código, ojo que no viene a sustituir los div, ya que si lo que se busca es dar estilos al código para por ejemplo utilizar efectos javascript conviene tener divs y no section o articles.
En esta página encontré un resumen super bueno de lo que no se debe hacer al usar el tag section y la voy a traducir.

  • No use section cuando quieras utilizarlo para dar estilos o ejecutar scripting
  • No lo use si los tag nav, articles o aside es más apropiado
  • No lo uses si a continuación de abrir la etiqueta no viene un título

En resumen un interesantenuevo tag con el que se pueden construir sitios más semanticamente correctos.

Espero les sirva

saludos tuto

Encontrar ids repetidos en html

En muchas oportunidades al escribir html nisiquiera podemos ver el resultado final de nuestros trabajos, por ejemplo si trabajas con trozos de html que al final se unen con códigos de otros desarrolladores y muchas veces no tenemos idea de los nombres que les pusieron a los tag html. Esto se complica más aún cuando tenemos que realizar algo con javascript sobre estos elementos que se han creado, por lo tanto, nuestros scripts no funcionarán.
A mí en mi trabajo me ocurre con mucha frecuencia así que escribí un pequeño script en js que te dá un alert con un resumen del estado de ids de tu html, para esto solo linkea esta dirección en tu html y al recargar la página te dará el resultado del análisis.

JavaScript:
  1. <script src="http://www.dakoo.cl/archivos/utilidades/verificador.js" type="text/javascript"></script>

En los próximos días linkearé el source por si quieren verlo

Espero les sirva

saludos tuto

Primeros pasos con WebGl

¿Web..Como?

Webgl viene a proponer una nueva revolución en gráficos 3d en la web. Desde hace mucho tiempo que la idea estaba en el aire y faltaba alguien que la llevara a cabo, es ahi donde aparece el grupo Kronos, un conjunto de empresas relacionadas con aplicaciones basadas en graficos 3d, en donde por ejemplo está incluidas AMD, Nvidia, Intel, ARM, etc. Este grupo hace muy poco que está empezando a mostrar los resultados en torno al proyecto Webgl y los resultados que están empezando a verse dan realmente para pensar.

Existen muchos ejemplos que se están empezando a ver en la Web sobre webgl, eso que aún no muchos navegadores soportan esta tecnología, es más, solo Webkit en sus ultimas versiones y Gekko en firefox 3.7( si lo se recien están en la version 3.5.x estable) lo están implementando. Si quieres ver estos ejemplos que andan pululando por ahí te conviene instalar firefox minifield, el cuál puedes bajar de esta dirección:

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

Existen varias páginas que hablan sobre esto pero sin dudas la mejor y en la que voy a basarme para hacer los demos y esas cosas( si leiste bien, este no va a ser el primer post sobre esto :D ) es

http://learningwebgl.com/blog/

Tengo el Firefox Minifield, ¿ahora que?

Bueno ahora debes activarlo, esto se realiza:

  • Ejecuta Minifield
  • Escribe en la barra de direcciones about:config
  • Filtra por Webgl
  • Busca el comando "webgl.enabled_for_all_sites" y hazle doble click para que cambie a "true"
  • Ves que no era dificl :D

    Ahora si quieres ver algunos ejemplos mira estos:
    http://learningwebgl.com/blog/?p=11#examples

    Eso por ahora, prometo muy pronto poner un ejemplo para empezar a entender de que se trata todo esto

    Saludos tuto