Html5 hoy? Presente y Futuro de la web

Transcripción

1 Html5 hoy? Presente y Futuro de la web

2 < qué es HTML?> HyperText Markup Language (Lenguaje de Marcado de Hipertexto) lenguaje predominante para la elaboración de páginas web. contiene información acerca de la estructura del texto o su presentación. lenguaje de marcado lenguaje de programación. no tiene funciones aritméticas o variables.

3 <evolución del HTML> 1991: Primera descripción de HTML publicado por Tim Berners-Lee

4 <evolución del HTML> 1993: formalmente reconocido por la IETF (Internet Engineering Task Force). 1995: Se formaliza el HTML 2.0 y con ello la sintaxis y la mayoría de las reglas que se encuentran actualmente implementadas. 1997: HTML 3.2 durante mucho tiempo ignorado por las empresas que proveen navegadores, las cuales implementan sus propias etiquetas. 1998: Presionadas por la adopción de los estándares web, se otorga peso a las recomendaciones del W3C y se promocionan navegadores basados en dichos estándares 1999: Se estabiliza la sintaxis y la estructura del HTML 4.0, convirtiéndose en el estándar para la web. 2000: Nace el XHTML 1.0 diseñado para adaptar el HTML a XML.

5 <evolución del HTML> : El incremento de las conexiones en el ancho de banda es alto, produciéndose una demanda en el campo del desarrollo de las aplicaciones y la multimedia, donde tecnologías como Flash y Ajax hacen que se trabaje en la especificación XHTML : No satisfechos con la dirección de XHTML, Apple, Mozilla y Opera proponen evolucionar el estándar HTML 4.0. Aunque son rechazados, forman el WHATWG (Web Hypertext Application Technology Working Group). 2005: Se publica el borrador de trabajo Web Applications 1.0

6 <evolución del HTML> 2008: El W3C adopta el trabajo de WHATWG en un nuevo capítulo, publicando lo que sería el borrador de trabajo de HTML : «Última llamada» del W3C para el proyecto de trabajo de HTML 5. El proyecto XHTML 2.0 no es renovado. 2012: Borrador del W3C para HTML5 y pasa a convertirse en candidato a recomendación. 2014: Se proyecta que HTML5 se convierta en una recomendación estable.

7 El HTML se escribe en forma de «etiquetas», rodeadas por los signos menor y mayor (< >) para describir y traducir la estructura y la información en forma de texto.

8 < cómo es HTML?> El marcado estructural describe el propósito del texto. Ej: <h1>texto</h1> establece un encabezamiento de primer nivel. El marcado presentacional describe la apariencia del texto, sin importar su función. Ej: <b>texto</b> presenta el texto en «negritas». El marcado semántico se centra en el significado de la información mas que en su presentación. Ej: <strong>texto</strong> refuerza la importancia del texto. El marcado hipertextual enlaza partes del documento con otros documentos o con otras partes del mismo. Ej : <a href= >Enlace</a>

9 <principales elementos HTML> definición del tipo de documento: <!DOCTYPE html> Asocia una definición del tipo de documento para ser correctamente interpretado por los navegadores. elemento raíz: <html></html> define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML. cabecera: <head></head> contiene datos propios del documento que no se muestran directamente al usuario.

10 <principales elementos HTML> cuerpo del documento: <body></body> define el contenido principal del documento html que se muestra en el navegador. división: <div></div> contenedor genérico para bloque de contenido. tramo: <span></span> permite agrupar varios elementos en línea seguidos dentro de un mismo bloque.

11 < qué es HTML5?>

12 <HTML5> HTML5 es el presente de la web y si no estás asimilando lo que está pasando ya eres parte de la vieja generación de desarrolladores. Es la unión de tecnologías, agrupadas en un solo término. No es nada nuevo, sino unir esfuerzos que por primera vez tienen a toda la industria empujando hacia una dirección y que identifican un cambio que ya sucedió en como debemos hacer la web hoy mismo. Entender HTML5 es entender que hoy nos conectamos desde teléfonos móviles, tabletas, ebooks, netbooks, computadores y otra gama de dispositivos.

13 < qué es HTML5?> Nuevas etiquetas de presentación.

14 < Qué es HTML5?> video geolocalización canvas audio drag & drop

15 < Qué es HTML5?> video geolocalización canvas audio drag & drop

16 < Qué es HTML5?>

17 < Qué es HTML5?> Historia de HTML 5

18 <Historia de HTML5> Apple, Mozilla & Opera no consiguieron crear un estándar HTML4. En consecuencia forman la WHATWG Se publica el borrador Web Applications 1.0 W3C adopta a WHATGW y publica el borrador HTML5 Finalización del borrador Gracias a Google, Apple y los dispositivos móviles HTML5 surge con fuerza Primer Release Candidate de HTML5 Finalización de test [previsión W3C] Creación del estándar HTML5 [previsión W3C]

19 <estado actual> Está HTML 5 preparado ya? Faltan casi 10 años para ello Soporte actual limitado Partes controvertidas (audio, video, tipografías) Navegadores obsoletos Alto número de usuarios usa versiones viejas de IE

20 < no hay que esperar hasta 2022!!!> Actualmente (2013) Terminado el borrador Partes ya disponibles Adaptación rápida en navegadores Mayor número de dispositivos soportados Google y Apple lo apoyan Microsoft adopta estándares (IE 10 mejoró considerablemente)

21

22 <funciones de HTML5> semántica La semántica es una de las funciones en las que más se diferencia la plataforma web de otras plataformas de aplicaciones. Le da sentido a la estructura con un amplio conjunto de etiquetas, junto a microformatos y microdatos, logrando mayores beneficios para los programas, desarrolladores y usuarios.

23 <funciones de HTML5> almacenamiento offline Las especificaciones de HTML5 y otras especificaciones relacionadas presentan una serie de funciones que permiten que las aplicaciones web sin conexión sean una realidad. Estas funciones también se pueden utilizar para mejorar el rendimiento de una aplicación almacenando datos en la memoria caché o para conservar los datos en diferentes sesiones del usuario y al volver a cargar y restablecer páginas.

24 <funciones de HTML5> acceso al dispositivo A partir de las APIs, las aplicaciones Web pueden generar experiencias siendo consientes de los dispositivos desde donde se ejecutan. Acceso de entrada de audio y vídeo, a micrófonos y cámaras, a los datos locales, a los contactos y eventos, utilización de geolocalización, y la orientación o la inclinación del dispositivo.

25 <funciones de HTML5> conectividad Una conectividad más eficaz se traduce en una comunicación mejor, con chats en tiempo real y una mayor velocidad en los juegos. Los Web Sockets y los eventos enviados por servidores están permitiendo que la eficacia en la transmisión de datos entre clientes y servidores alcance unos niveles sin precedentes.

26 <funciones de HTML5> multimedia El audio y el vídeo se han convertido en uno de los componentes más importantes de la Web, tal como ocurrió en el pasado con las imágenes. El nuevo etiquetado y las APIs permiten manipular los estados de red y los datos cronológicos de los archivos, controlarlos y acceder a ellos.

27 <funciones de HTML5> gráficos La incorporación de tecnologías como el elemento Canvas, la especificación WebGL, las imágenes SVG y CSS3, permiten crear impresionantes efectos visuales renderizados de forma nativa en el navegador.

28 <funciones de HTML5> rendimiento Las aplicaciones web pueden competir ahora en rendimiento con las aplicaciones nativas y de escritorio. Es posible utilizar una serie de tecnologías y técnicas para ofrecer más facilidades a los usuarios y para que las aplicaciones y sitios tengan una mayor capacidad de respuesta.

29 <beneficios> HTML5 = Evolución Mayor estandarización Código más semántico Más accesible Soporte multimedia

30 <beneficios> Acceso a recursos como webcams o micrófonos Almacenamiento Local Webworkers Geolocalización Gestión de formularios Menor dependencia de plugins y Javascript

31 <filosofía html5> El principal criterio de diseño de HTML 5 ha sido el de resolver problemas prácticos, lo que hace que se hayan adoptado soluciones orientadas a facilitar el trabajo en situaciones reales.

32 <ejemplos> DOCTYPE XHTML 1.0 HTML5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN " ml1/dtd/xhtml1-strict.dtd"> <!DOCTYPE html>

33 <ejemplos> META HTML 4.01 HTML5 <meta httpequiv= Content-Type content= text/html; charset=utf-8 > <meta charset= UTF-8 >

34 <ejemplos> SCRIPT HTML 4.01 HTML5 <script type= text/javascript src= file.js > </script> <script type= text/javascript > </script> <script src= file.js ></script> <script> </script>

35 <ejemplos> HOJAS DE ESTILO HTML 4.01 HTML5 <link rel= stylesheet type= text/css href= estilos.css > <link rel= stylesheet href= estilos.css >

36 <ejemplos> ETIQUETA A HTML 4.01 <h2> <a href= acercade.htm >Acer ca de</a> </h2> <p> <a href= acercade.htm >Con oce quiénes somos</a> </p> HTML5 <a href= acercade.htm > <h2>acerca de</h2> <p>conoce quiénes somos</p> </a>

37 <ejemplos> <header> <hgroup> <nav> <article> <section> <aside> <footer>

38 <ejemplos> <article> <section> <header> <hgroup> <nav> <footer> <aside> <header> representa la cabecera de un documento o sección <hgroup> representa el título de una sección. Se usa para agrupar conjuntos de elementos h1-h6 (títulos y subtítulos) <header> <hgroup> <h1>mi Blog</h1> <h2>esforzándome para trabajar menos</h2> </hgroup> </header>

39 <ejemplos> <header> <hgroup> <nav> representa una sección del documento que contiene navegación (menú) <nav> <article> <section> <footer> <aside> <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">galería</a></li> <li><a href="#">contacto</a></li> </ul> </nav>

40 <ejemplos> <aticle> <section> <header> <hgroup> <nav> <aside> <article> representa una pieza de contenido independiente dentro de un documento <footer> <section> representa una sección del documento (un capítulo, un apartado, etc) agrupa una serie de contenidos con una temática común

41 <ejemplos> <article> <section> <header> <hgroup> <nav> <footer> <aside> <article> <hgroup> <h1>título del artículo</h1> <h2>subtítulo del artículo</h2> </hgroup> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <section> <h1>capítulo 1</h1> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum scelerisque neque, ac facilisis neque</p> </section> <section> <h1>capítulo 2</h1> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum scelerisque neque, ac facilisis neque</p> </section> </article>

42 <ejemplos> <header> <hgroup> <nav> <dialog> representa una transcripción de una conversación, o los subtítulos de algún elemento embebido (audio o video) <article> <section> <footer> <aside> <dialog> <dt>pedro:</dt> <dd>toc, toc.</dd> <dt>jaime</dt> <dd Sí?</dd> <dt>pedro:</dt> <dd> Es aquí el Seminario de HTML5 y CSS3?</dd> <dt>jaime</dt> <dd>pasa, pasa</dd> </dialog>

43 <ejemplos> <header> <hgroup> < f i g u r e > representa un diagrama, una ilustración, una fotografía, etc <article> <section> <nav> <aside> <figcaption> representa la nota al pie del elemento incluido en <figure> <footer> <figure> <img src= fede.jpg" alt= Federico Caro"> <figcaption>federico Caro impartiendo seminarios sobre tecnologías web</figcaption> </figure>

44 <ejemplos> <article> <header> <hgroup> <nav> <aside> representa contenidos que no están directamente relacionados con el resto de contenido de la página o que aporta información adicional <section> <footer> <aside> <article> <header><h1>tecnologías web</h1></header> <p>bla bla bla</p> <aside> <ul> <li><a href= # >Links sobre HTML5</a></li> <li><a href= # >Links sobre CSS3</a></li> </ul> </aside> </article>

45 <ejemplos> <article> <header> <hgroup> <nav> <footer> representa el pie de una sección o página. Suele contener información sobre el autor, copyright, etc. <section> <aside> <footer> <footer> <p> 2010 Bla bla bla bla</p> </footer>

46 <ejemplos> Lienzo utilizado para representar imágenes, gráficos, dibujos y/o elementos visuales con Javascript No requiere plugins, ni codecs Mapa de bits (no hay reescalado) El contenido no se añade al DOM Puede ser exportado <canvas id="milienzo" width="360" height="240"> <p>tu navegador no soporta canvas</p> </canvas> <script> var lienzo = document.getelementbyid( mil ienzo ) var context = lienzo.getcontext('2d'); </script

47 <ejemplos> width & height poster autoplay controls loop Autobuffer preload source

48 <ejemplos> <video controls width="360" height="240"> <source src="movie.mp4"> <source src="movie.ogv" type="video/ogg codecs='theora, vorbis'"> <source src="movie.webm" type="video/webm codecs='vp8, vorbis'"> <object type="application/x-shockwave-flash" width="360" height="240" data="player.swf? file=movie.mp4"> <param name="movie" value="player.swf? file=movie.mp4"> <a href="movie.mp4">descargar vídeo</a> </object> </video>

49 <ejemplos> Autoplay source loop autobuffer controls preload

50 <ejemplos> <audio controls> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> <object type="application/x-shockwave-flash data="player.swf?soundfile=song.mp3"> <param name="movie" value="player.swf? soundfile=song.mp3"> <a href="song.mp3">descargar canción</a> </object> </audio>

51 <ejemplos> formularios placeholder autofocus required < i n p u t > autocomplete on off pattern Expresiones regulares

52 <ejemplos> formularios < i n p u t > type min (*) max (*) search url tel range (*) number (*) date datetime datetime-local month color

53 <funciones de HTML5> presentación Con la introducción de CSS3, es mas fácil crear aplicaciones y sitios atractivos y completos en HTML. Hay una gran cantidad de extensiones y tecnologías nuevas para CSS3, entre las que se incluyen las transformaciones en 2D, transiciones, transformaciones en 3D y fuentes web.

54 CSS3 Presentación CSS3 es la nueva versión del CSS (Cascading Style Sheets o Hojas de Estilo en Cascada). CSS es simplemente el lenguaje con la cual le damos diseño y apariencia a las paginas HTML. Es desarrollado y distribuido por la W3C (World Wide Web Consortium)

55 CSS3 Presentación

56 CSS3 Presentación CSS3 se presenta como una versión con mayor control sobre el estilo de los elementos de nuestra página web. Las ventajas de usar CSS3 son: Código más simple para muchas tareas Mayores opciones de utilización

57 CSS3 Presentación CSS3 trae una nueva actualización de viejos atributos como también nuevos. Estos permitirán hacer sitios webs mejor elaboradas. Da soporte a muchas necesidades de las webs actuales, sin tener que recurrir a trucos de diseñadores o lenguajes de programación. Hace más simple el desarrollo y el diseño de los sitios.

58 CSS3 Presentación Como desventaja, CSS3 no tiene compatibilidad 100% con ningún navegador. No nos responsabilizamos por los traumas o frustraciones creados a usuarios de Internet Explorer. Consejo: Probar siempre las páginas en varios navegadores. Cada uno puede interpretar de forma ligeramente diferente nuestro CSS.

59 CSS3 Presentación El objetivo inicial de CSS, separar el contenido de la forma, se cumplió ya con las primeras especificaciones del lenguaje. Sin embargo, el objetivo de ofrecer un control total a los diseñadores sobre los elementos de la página ha sido más difícil de cubrir.

60 CSS3 Presentación Las especificaciones anteriores del lenguaje tenían muchas utilidades para aplicar estilos a las webs, pero los desarrolladores aun continuaban usando trucos diversos para conseguir efectos tan comunes o tan deseados como los bordes redondeados o el sombreado de elementos en la página.

61 CSS3 Presentación CSS 1 ya significó un avance considerable a la hora de diseñar páginas web, aportando mucho mayor control de los elementos de la página. Pero como todavía quedaron muchas otras cosas que los diseñadores deseaban hacer, pero que CSS no permitía especificar, éstos debían hacer uso de trucos para el diseño.

62 CSS3 Presentación Lo peor de esos trucos es que muchas veces implica alterar el contenido de la página para incorporar nuevas etiquetas HTML que permitan aplicar estilos de una manera más elaborada.

63 CSS3 Presentación Dada la necesidad de cambiar el contenido, para alterar el diseño y hacer cosas que CSS no permitía, se estaban dejando de lado algunos de los objetivos para los que CSS fue creado, como por ejemplo, el separar por completo el contenido de la forma.

64 CSS3 Presentación CSS 2 incorporó algunas novedades interesantes, que hoy ya utilizamos habitualmente, pero CSS 3 todavía avanza un poco más en la dirección de aportar más control sobre los elementos de la página.

65 CSS3 Presentación La novedad más importante que aporta CSS 3, de cara a los desarrolladores web, consiste en la incorporación de nuevos mecanismos para mantener un mayor control sobre el estilo con el que se muestran los elementos de las páginas, sin tener que recurrir a trucos o hacks, que a menudo complicaban el código de las páginas.

66 Propiedades nuevas Bordes: border-color border-image border-radius box-shadow

67 Propiedades nuevas

68 Propiedades nuevas Fondos: background-origin background-clip background-size hacer capas con múltiples imágenes de fondo

71 Propiedades nuevas Color: colores HSL colores HSLA colores RGBA Opacidad

72 Propiedades nuevas Modelo de caja básico: overflow-x, overflow-y

73 Propiedades nuevas Texto: text-shadow text-overflow Rotura de palabras largas Web Fonts

76 Propiedades nuevas Degradados CSS3: Degradados lineales Degradados radiales Degradados lineales de repetición Degradados radiales de repetición

77 Propiedades nuevas Transformaciones: Escalar Sesgar Mover Rotar en 2D o 3D

78 Propiedades nuevas Otros: media queries creación de múltiples columnas de texto propiedades orientadas a discurso o lectura automática de páginas web animaciones CSS3

81 Gracias! Lic. Lorena Bernis Lic. Mariano Ingerto