Scribd Logo
Upload

Welcome to Scribd!

  • Novedades en HTML5

    Uploaded by

    Joshua Hoomtr
    13 views5 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    13 views5 pages

    Novedades en HTML5

    Uploaded by

    Joshua Hoomtr

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    DIRECCION GENERAL DE EDUCACIN SUPERIOR TECNOLGICA

    Instituto Tecnolgico del Valle de Oaxaca

    NOVEDADES DE HTML5

    DOCUMENTO QUE PRESENTA:

    Jorge Ivan Lpez Morales

    M. T. I Ambrosio Cardoso Jimnez

    Ing. Tecnologas de la Informacin y las Comunicaciones

    Ex-Hacienda de Nazareno, Xoxocotln, Oaxaca. Marzo de 2014.

    NOVEDADES DE HTML5
    Novedades y mejoras que ofrece HTML 5 La nueva versin del lenguaje HTML (Hypertext Markup Language), va a traer consigo una serie de mejoras importantes, as como nuevas etiquetas de marcado y otras etiquetas que por el contrario van a desaparecer. Una de los puntos a destacar del lenguaje HTML 5, es que nos ofrece ms potencia a la hora del desarrollo web, sin tener que pasar a utilizar otras tecnologas. As mismo con las nuevas etiquetas del lenguaje vamos a simplificar y ahorrar a la hora de escribir cdigo. Desde la web del w3C, nos encontramos una introduccin a las novedades del HTML5: Algunos de las nuevas caractersticas ms interesantes para los autores son APIs para dibujar grficos en dos dimensiones, incorporar y controlar contenido de audio y vdeo, mantener persistente en la parte del cliente el almacenamiento de datos y para ofrecer a los usuarios la edicin de documentos, o partes de stos, de forma interactiva. Otras caractersticas facilitan la representacin de elementos familiares de las pginas, incluyendo <section> (seccin) <footer> (pie); <nav> (para navegacin) y <figure> (para asignacin de un ttulo a una foto u otro contenido incluido en la pgina). Los autores escriben el HTML 5 usando una sintaxis HTML "clsica" o una sintaxis XML, de acuerdo con las necesidades de la aplicacin. Aqu ya nos estn hablando de algunas de las nuevas etiquetas que va a traer consigo el lenguaje.

    1. Nuevo Doctype
    Lo primero que est en toda pgina web, el doctype, es hora ya de cambiar ese antiguo, largo e inmemorizable doctype:
    <!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">

    Por el nuevo corto y simple doctype de HTML5:


    <!DOCTYPE html>

    2. Elementos <script> y <link> ms simples


    En HTML5 ya no es necesario usar el atributo type cuando llamamos archivos .css o .js:
    <link <script rel="stylesheet" href="estilos.css" type="text/css" /> type="text/javascript" src="funciones.js"></script>

    Sin embargo an es necesario declarar un rel en el caso de los estilos :


    <link rel="stylesheet" <script src="funciones.js"></script> href="estilos.css" />

    3. Las comillas en HTML5


    En HTML5 ya no es necesario que los atributos de los elementos estn envueltos entre comillas, ahora podemos declararlos as:
    <p class=parrafo id=contenido>Lorem ipsum dolor sit amet</p>

    4. Elementos ms semnticos
    <div class="header"> </div> <div class="nav"> </div> <div class="content"> </div> <div class="sidebar"> </div> <div class="footer"> </div>

    El cdigo anterior puede ser reemplazado por los nuevos elementos header y footer de HTML5:
    <header> </header> <nav> </nav> <section> </section> <aside> </aside> <footer> </footer>

    Hay que notar que una pgina web puede tener mltiples de estos elementos, por ejemplo puede haber un header para la pgina entera y un header para cada artculo en el caso de un blog y lo mismo con el footer. Nota: estos elementos no son soportados nativamente en navegadores antiguos como IE 6, 7 y 8, para hacer que sean compatibles puedes usar HTML5 Shiv, un

    minsculo archivo JS que se encarga de crear estos elementos que no existen en navegadores antiguos:
    <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

    5. Contenido editable
    Ahora con HTML5 podemos hacer que cualquier elemento que contenga textos (prrafos, listas, ttulos, etc.) sea editable en el mismo navegador, por ejemplo un prrafo:
    <p contenteditable="true"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum se d pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Ali quam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetr a posuere sapien. </p>

    6. Placeholders en campos de textos.


    Placeholders se les conoce al texto que se est en los campos de textos cuando estos no estn activos, antes de HTML5 haba que usar algo de Javascript para lograr este efecto, pero ahora ya casi todos los navegadores soportan esta nueva facultad:
    <input name="username" type="text" placeholder="Ingrese su username" />

    7. Validacin nativa en HTML5


    En HTML5 podemos declarar el atributo requiere en los campos de un formulario que queremos que sean obligatorios de rellenar:
    <form method="post" action=""> <input type="text" required> <button>Enviar</button> </form>

    8. Autofocus
    HTML5 introduce tambin el atributo autofocus para campos de formulario, esta facultad hace que al cargar la pgina el foco del usuario se concentre en el campo de texto deseado, ideal para el campo de bsqueda de una pgina web:
    <input type="text" autofocus> <button>Buscar</button>

    9. Tipos especficos de campos de formulario.

    Si declaramos type=number a un campo de texto, este solo permitir que se ingresen nmeros:
    <form> <input type="number" /> <button type="submit">Enviar</button> </form>

    Lo mismo para fechas:


    <form> <input type="date" /> <button type="submit">Enviar</button> </form>

    Y para URLs y emails:


    <form> <input type="url" /> <input type="email" /> <button type="submit">Enviar</button> </form>

    10.

    Canvas

    Canvas, es sin duda alguna uno de los elementos ms interesantes que introduce HTML5, el canvas es un plano vaco en el cual podemos dibujar grficos con la ayuda de Javascript: Ejemplo:
    <!DOCTYPE html> <html> <body> <canvas id="micanvas">Tu navegador no soporta canvas</canvas> <script type="text/javascript"> var canvas=document.getElementById('micanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#b8dc69'; ctx.fillRect(0,0,200,200); </script> </body> </html>

    FUENTES DE INFORMACIN:
    http://www.albasuardiaz.com/html5-novedades/ http://www.angelvicen.com/blog/html5-novedades-html5.html http://webintenta.com/novedades-de-html5.html

    You might also like