Scribd Logo
Importer

Bienvenue sur Scribd !

  • Exposicion HTML5

    Transféré par

    Joseph Purificación
    201 vues21 pages

    Titre original

    EXPOSICION HTML5

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PPT, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PPT, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    201 vues21 pages

    Exposicion HTML5

    Transféré par

    Joseph Purificación

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PPT, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 21

    HTML5 y el Futuro de la Web

    Rodrguez Huerta Alex


    rodriguez24@ieee.org a_rodriguez24_07@hotmail.com arodriguez2407@gmail.com

    Qu es HTML5?

    Estndar abierto y accesible Elementos nuevos Web Semntica APIs de desarrollo Retrocompatible

    Nueva filosofa de trabajo


    Impulsado por los grandes y pequeos

    Qu es HTML5?

    Trabaja sobre

    Firefox 3.5+ Chrome 3.0+ Safari 3.1+ Opera 10.5+ IE 9.0+ dicen http://html5readiness.com/ http://www.ie6countdown. com/

    iPhone
    iPod Touch iPad

    Android OS

    Tipo de Documento

    Tipo de Documento <!DOCTYPE html>

    Lenguaje del Documento <html lang="ES">

    Codificacin del Documento

    <meta charset="UTF-8">

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

    Estructura Mnima de un Documento

    <!DOCTYPE html> <html lang="ES"> <head> <title>Este es un ejemplo de HTML5</title> <meta charset="UTF-8"> <link rel="stylesheet" href="estilo.css"> </head> <body> Este es el cuerpo de la pgina, donde ir todo el contenido. </body> </html>

    Estructura Semntica

    Antes

    Ahora

    Elementos Semnticos
    <header> El elemento header debe utilizarse para marcar la cabecera
    de una pgina (contiene el logotipo del sitio, una imagen, un cuadro de bsqueda etc).

    El elemento header puede estar anidado en otras secciones de la pgina (es decir que no solo se utiliza para la cabecera de la pgina).

    <nav> El elemento nav representa una parte de una pgina que enlaza
    a otras pginas o partes dentro de la pgina. Es una seccin con enlaces de navegacin. No todos los grupos de enlaces en una pgina deben ser agrupados en un elemento nav. nicamente las secciones que consisten en bloques de navegacin ms importantes son adecuados para el elemento de navegacin.

    Elementos Semnticos
    <section> El elemento section representa un documento genrico o de
    la seccin de aplicacin. Una seccin, en este contexto, es una agrupacin temtica de los contenidos. Puede ser un captulo, una seccin de un captulo o bsicamente cualquier cosa que incluya su propio encabezado. Una pgina de inicio de un sitio Web puede ser dividida en secciones para una introduccin, noticias, informacin de contacto etc.

    <footer> El elemento footer se utiliza para indicar el pi de la pgina o


    de una seccin. Un pie de pgina contiene informacin general acerca de su seccin el autor, enlaces a documentos relacionados, datos de derechos de autor etc.

    Elementos Semnticos
    <aside> El elemento aside representa una nota, un consejo, una
    explicacin. Esta rea son representados a menudo como barras laterales en la revistas impresa.

    El elemento puede ser utilizado para efectos de atraccin, como las comillas tipogrficas o barras laterales, para la publicidad, por grupos de elementos de navegacin, y por otro contenido que se considera por separado del contenido principal de la pgina.

    <article> El elemento article representa una entrada independiente en


    un blog, revista, peridico etc. Cuando se anidan los elementos article, los artculos internos estn relacionados con el contenido del artculo exterior. Por ejemplo, una entrada de blog en un sitio que acepta comentarios, el elemento article principal agrupa el artculo propiamente dicho y otro bloque article anidado con los comentarios de los usuario.

    Distribucin Semntica
    SECTION HEADER NAV

    NAV FIGURE

    ARTICLE

    ARTICLE FIGURE

    VIDEO

    HEADER

    ASIDE FOOTER

    SECTION

    Audio y Video

    Atributos de <video>

    autoplay Para que el video se reproduzca automticamente. Puede


    tener valor TRUE o FALSE.

    controls Para que se muestre barra de control debajo del video. height Altura del video. width Ancho del video. loop El video se reproduce de manera repetitiva. poster Imagen si el video no est disponible. preload Controla si el video es precargado. Puede tener 3 valores:
    none, metadata auto.

    src Indica la url del video.

    Formato de <video>

    IMPORTANTE A la fecha los navegadores comerciales slo


    soportan el formato de video Vorbis OGG y MP4.

    Formato de <video> - Antes


    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.c ab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwaveflash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>

    Formato de <video> - Ahora


    CON HTML5 <video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer> </video>

    Que ms puedes hacer con HTML5


    http://www.thewildernessdowntown.com/ http://www.jolicloud.com/product http://wordmark.it/ http://www.phoboslab.org/ztype/ http://www.nikebetterworld.com/ http://www.klowdz.com/ http://www.effectgames.com/demos/canvascycle/ Y muchas cosas ms..te animas???

    Algunos editores HTML5


    ALOHA DREAMWEAVER CS5.5 MAQETTA MACFLUX BLUEGRIFFON ZEN .y otros ms

    HTML5 y el Futuro de la Web

    Rodrguez Huerta Alex


    rodriguez24@ieee.org a_rodriguez24_07@hotmail.com arodriguez2407@gmail.com

    Vous aimerez peut-être aussi