Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Novedades HTML5

    Cargado por

    Dragonauta Nose
    30 vistas8 páginas

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    30 vistas8 páginas

    Novedades HTML5

    Cargado por

    Dragonauta Nose

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 8

    19/07/13

    Novedades HTML5 - Aprender HTML - Yo No Programo

    Inicio Sobre Nosotros Aydanos a mejorar Contacto


    Buscar

    General Herramientas Aprender HTML Aprender CSS Aprender PHP Aprender SQL Aprender JavaScript

    Novedades del HTML5

    27 de febrero de 2013 YoNoProgramo 1 En este artculo voy a hablar de las novedades, mejoras y cambios que trajo HTML en su ltima versin, HTML5. Cambios muy importantes a tener en cuenta a la hora de aprender a programar. Ha pasado tiempo desde que se empez a trabajar con ella, pero no est de ms recordarlo para aquellos que an tengan pendientes cambios en su pgina web, as como para que aquellos que ahora mismo estn aprendiendo sepan identificar un cdigo obsoleto al verlo. Fueron muchos los cambios y muchas las etiquetas que sufrieron cambios, ya sea modificndose para hacerlas ms sencillas al uso o bien eliminndolas o cambindolas por otras; adems se han crearon de otras muchas nuevas.

    www.yonoprogramo.com/novedades-de-html5/

    1/8

    19/07/13

    Novedades HTML5 - Aprender HTML - Yo No Programo

    HTML5 A continuacin veremos una lista con los cambios ms importantes :


    Novedades HTML5
    1.- Nuevo Doctype 2.- Cambios en la llamada de elementos Script y Link 3.- Uso de comillas 4.- Nuevas etiquetas para la estructura 5.- Etiquetas de vdeo y audio 6.- Autofocus en formularios 7.- Placeholder en formularios 8.- strong>Validacin de campos en formulario 9.- Contenido editable en formularios 10.- Ms tipos de campos en formularios 11.- Canvas

    Haz clic en Leer ms para conocer detalladamente y con ejemplos dichos cambios.

    1. Nuevo Doctype

    Ir arriba

    Antes de la aparicin del HTML, el funcionamiento del Doctype era muy complejo, veamos como era su declaracin:
    1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Con HTML5 la declaracin de este Doctype se ha simplificado muchsimo, hacindonos posible memorizarla:
    1 <!DOCTYPE html>

    2. Cambios en la llamada de elementos Script y Link


    En las etiquetas link y script ya no es necesario hacer uso del atributo type, haciendo ms sencilla la llamada a archivos .css y .js; s que es necesario el atributo rel en el caso de los archivos .css:
    1 2 <link rel="stylesheet" href="estilo.css" /> <script src="funciones.js"></script>

    3. Uso de comillas
    Con la aparicin del HTML5 no ser necesario poner comillas dobles en el valor de los atributos:
    www.yonoprogramo.com/novedades-de-html5/ 2/8

    19/07/13

    Novedades HTML5 - Aprender HTML - Yo No Programo

    <p id=id_parrafo</p>

    El omitir las comillas no es una norma, si no una posibilidad.

    4. Nuevas etiquetas para la estructura


    Hasta la aparicin del HTML5 la estructura de nuestra pgina web era diseada haciendo uso de capas o DIVs, al menos por norma general, de la siguiente manera:
    1 2 3 4 <div <div <div <div id="cabecera"></div > id="menu"></div > id="contenido"></div > id="pie"></div >

    Ahora nos es posible hacer uso de etiquetas estndar para montar la estructura de nuestra pgina web, hacindonos el trabajo ms fcil; an y as navegadores anteriores a los actuales, como Internet Explorer 6, 7 y 8 no lo soportan:
    1 2 3 4 5 6 7 <header ></header > <nav ></nav > <article > <section ></section > </article > <aside ></aside > <footer ></footer >

    5. Etiquetas de vdeo y audio


    En HTML5 encontramos estandarizado el uso de audio y vdeo, con 2 nuevas etiquetas. Funcionamiento de la etiqueta vdeo:
    1 2 3 4 5 <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.mp4" type="video/ogg"> Tu navegador no soporta la etiqueta video. </video >

    Puedes encontrar ms informacin en W3Schools.


    www.yonoprogramo.com/novedades-de-html5/ 3/8

    19/07/13

    Novedades HTML5 - Aprender HTML - Yo No Programo

    Funcionamiento de la etiqueta audio:


    1 2 3 4 5 <audio controls> <source src="rabbit.mp4" type="audio/ogg"> <source src="rabbit.mp4" type="audio/mpeg"> Tu navegador no soporta la etiqueta audio. </audio >

    Puedes encontrar ms informacin en W3Schools.

    6. Autofocus en formularios
    Otra caracterstica importante es la creacin del atributo autofocus para los formularios. Muy til para nuestra pgina de contacto, por ejemplo. Veamos como funciona, muy sencilla:
    1 <input name="campo-texto" type="text" autofocus />

    7. Placeholder en formularios
    Este atributo nos permitir que, por defecto, aparezca un texto en nuestro campo de formulario, de modo que cuando nos hagamos clic sobre l y empecemos a escribir, ste desaparecer sin necesidad de borrarlo previamente:
    1 <input name="campo-nombre" type="text" placeholder="Introduce tu nombre" />

    8. Validacin de campos en formulario


    Una gran mejora por parte de HTML en esta nueva versin, que nos permite validar el campo, de modo que ser obligatorio introducir un valor en l. Nos facilita mucho las cosas haciendo que no sea necesario el uso de PHP para esta comprobacin:
    1 <input name="campo-texto" type="text" required />

    9. Contenido editable en formularios


    Cualquier contenido puede ser ahora editable, vemos el ejemplo de un prrafo, pero es tambin aplicable a ttulos o listas, por ejemplo:
    1 <p contenteditable="true">Prrafo con contenido editable</p >

    10. Ms tipos de campos en formularios


    HTML5 nos ofrece nuevos campos para nuestros formularios, como son number, date, url, tel o email:
    1 2 3 4 5 6 7 <form> <input <input <input <input <input </form> type="number" /> type="date" /> type="url" /> type="tel" /> type="email" />

    11. Canvas
    www.yonoprogramo.com/novedades-de-html5/ 4/8

    19/07/13

    Novedades HTML5 - Aprender HTML - Yo No Programo

    ste es posiblemente el cambio ms importante respecto a HTML4/xHTML. Nos permite dibujar grficos sobre un texto plano haciendo uso de JavaScript. Puesto que su informacin y uso es muy extenso podemos conocer ms informacin al respecto en W3Schools.
    2
    Me gusta

    Categora: HTML Etiquetas: aprender a programar, html, html5, novedades

    0 comentarios Deja un mensaje...


    El mejor Comunidad Compartir

    An no ha comentado nadie.

    Fe e d d e co m e n ta ri o s

    Su s cri b i rs e va co rre o

    Sguenos en

    Seguir a @YoNoProgram o Me gusta A 12 personas les gusta esto. S el primero de tus amigos.

    Estamos en

    Seguir a

    Categoras
    www.yonoprogramo.com/novedades-de-html5/ 5/8

    19/07/13

    Novedades HTML5 - Aprender HTML - Yo No Programo

    PHP Curso (5) General (3) HTML (2) HTML Curso (20) CSS (2) Herramientas (1) Herramientas Curso (6)

    Publicidad

    Enlaces de inters
    > Guarida Friki

    ltimas entradas
    Variables PHP Introduccin al PHP Captulo 1 Introduccin al CSS Qu necesitamos? Introduccin al PHP Sintaxis PHP Introduccin al PHP Prctica HTML (III) Crea tu propio sitio web CSSmatic Herramientas CSS para diseadores web Qu es PHP? Introduccin al PHP Captulo 1 Introduccin al PHP Captulo 8 Formularios Xampp Servidor Web Local

    ltimos comentarios

    Arturo
    www.yonoprogramo.com/novedades-de-html5/ 6/8

    19/07/13

    Novedades HTML5 - Aprender HTML - Yo No Programo

    Muy didctico, excelente... Cmo funciona? Introduccin al HTML 1 day ago

    Anonimo Hola, a mi me gustara saber si... Aprender HTML 2 days ago

    Jan Solo tienes enlazados DOCTYPE... Captulo 2 Estructura del HTML 4 days ago

    Fernando Falta mucho? :-) Aprender JavaScript 1 month ago

    Josue Gonzalez Gracias por la info... voy... DOCTYPE Estructura del HTML 2 months ago

    Ivn Delgado Garca Os sigo en G+ que seguramente...

    www.yonoprogramo.com/novedades-de-html5/

    7/8

    19/07/13

    Novedades HTML5 - Aprender HTML - Yo No Programo

    Bienvenidos a Yo No Programo 3 months ago

    Archivo
    abril 2013 (8) marzo 2013 (14) febrero 2013 (17)

    Tecnologas

    2013 Yo No Programo. Todos los derechos reservados.

    www.yonoprogramo.com/novedades-de-html5/

    8/8

    También podría gustarte