Bienvenidos a CódiGeek

Donde el Desarrollo y las buenas practicas son nuestra razón de ser.

Todo sobre Desarrollo

Tips, consejos, experiencias y más.

El futuro esta en tus manos

Aprende tecnicas, trucos para sacarle provecho a tu trabajo.

Pages

sábado, 2 de febrero de 2013

Primera entrega: Introducción a HTML5


Cuando nos referimos a HTML (HyperText Markup Language) pensamos en el lenguaje de maquetación que da forma a sitios web desde 1991, y que da forma a la información ofrecida en la red de forma sencilla para la fácil interpretación tanto de navegadores como buscadores, gracias a las diferentes etiquetas existentes. HTML con su nuevo proyecto, la versión 5 de este lenguaje espera revolucionar la experiencia multimedia de los usuarios de forma directa, sin necesidad de mezclar jQuery, JavaScript u otros complementos para lograr introducir video, sonido o efectos en su estructura. Aunque aún no es un estandar y parece estar lejos de serlo, ya muchos portales en la web empiezan a mudarse a HTML5 (con la limitante, de que muchos de sus visitantes deberán tener las mas nuevas versiones de los respectivos navegadores para disfrutar de la riqueza de HTML5) sin embargo sus creadores trabajan en la inclusión de compatibilidad con la mayoría de los navegadores que aun no son considerados obsoletos.

Lo primero que podemos apreciar de HTML5, es el mayor significado semántico que se le da a su estructura con las inclusión de nuevas etiquetas como <header>, <nan>, <hgroup>, <section>, <footer>  entre muchas otras. Estas etiquetas en comparación a lo que podiamos hacer con un div, dan mayor significado al contenido y facilita a los buscadores indexar las información en la web. Además de permitir nuevas funcionalidades, como crear reproductores de audio y video, o poder dibujar 2D o 3D en nuestro sitio.

En el siguiente enlace puedes encontrar las nuevas etiquetas: w3schools

Ejemplo de una estructura HTML5:



<!doctype html> <!-- primera clara diferencia entre HTML 3,4 y HTML5 una web mas semántica, mas extendible -->
<html lang="es"> 
    <head>
        <meta charset=utf-8>
        <title>Ejemplo de Maquetado HTML5 en sublime text</title>
    </head>
    <body>
        <hgroup> <!--dentro de esto van las h1,h2,h3 relacionándolas -->
        <h1>Ejemplo de Maquetado HTML5 en sublime text</h1>
        <h2> Por codigeek.blogspot.com</h2>
        </hgroup>

        <nav> <!-- botones de navegación o menu -->

        <li><a href="inicio.html"></a>Inicio</li>
        <li><a href="contacto.html"></a>Contacto</li>
        <li><a href="Nosotros.html"></a>Nosotros</li>
        </nav>
    
            <<article> <!-- articulo principal, texto, o sona principal TEXTO PRINCIPAL -->

            <section> <!--  sirve para definir secciones dentro de nuestra web, no debe llevar style (mas que nada es una estructura semántica) -->

            <p> Texto principal</p>
            </section>

            <aside> <p>Texto sin relevancia</p></aside> <!-- el texto o cosas no tan relevantes -->

            </article>

        <footer> &copy; codigeek.blogspot.com</footer> <!-- pie de pagina -->
    </body>
</html>
En las siguientes entregas explicare más a detalle las etiquetas a través de ejemplos simples.

Licencia Creative Commons