¿Html5 hoy? Presente y Futuro de la web



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.

1991: Primera descripción de HTML publicado por Tim Berners-Lee

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.

2000-2004: 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 2.0 2004: 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

2008: El W3C adopta el trabajo de WHATWG en un nuevo capítulo, publicando lo que sería el borrador de trabajo de HTML 5. 2011: «Ú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.

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.



• • • •

El marcado estructural describe el propósito del texto. Ej: 

Texto

 establece un encabezamiento de primer nivel. El marcado presentacional describe la apariencia del texto, sin importar su función. Ej: texto 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: texto refuerza la importancia del texto. El marcado hipertextual enlaza partes del documento con otros documentos o con otras partes del mismo. Ej : Enlace

definición del tipo de documento:  Asocia una definición del tipo de documento para ser correctamente interpretado por los navegadores. elemento raíz:  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:  contiene datos propios del documento que no se muestran directamente al usuario.



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



“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.

Nuevas etiquetas de presentación.



video

canvas

geolocalización

audio

drag & drop



video

canvas

geolocalización

audio

drag & drop





Historia de HTML 5

2004

Apple, Mozilla & Opera no consiguieron crear un estándar HTML4. En consecuencia forman la WHATWG

2005

Se publica el borrador Web Applications 1.0

2007

W3C “adopta” a WHATGW y publica el borrador HTML5

2009

Finalización del borrador Gracias a Google, Apple y los dispositivos móviles HTML5 surge con fuerza

2012

Primer Release Candidate de HTML5

2020

Finalización de test [previsión W3C]

2022

Creación del estándar HTML5 [previsión W3C]

¿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

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)

www.caniuse.com http://html5readiness.com/ www.findmebyip.com/litmus/#target-selector



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.



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.



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.



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.



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.



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.



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.

• HTML5 = Evolución • Mayor estandarización • Código más semántico • Más accesible • Soporte multimedia

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



• 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.

DOCTYPE XHTML 1.0

Descargar canción

http://www.w3schools.com/html/html5_audio.asp

formularios placeholder

required

autofocus

pattern

autocomplete

on off

Expresiones regulares

http://www.findmebyip.com/litmus/#html5-forms-inputs

formularios

min (*)

max (*)

type

search email url tel range (*) number (*) date datetime datetime-local month color

http://www.findmebyip.com/litmus/#html5-forms-inputs



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.

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)

CSS3 Presentación

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 ●

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.

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.

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.

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.

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.

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.

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.

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.

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.

Propiedades nuevas Bordes: ➔ ➔ ➔ ➔

border-color border-image border-radius box-shadow

Propiedades nuevas

Propiedades nuevas Fondos: ➔ ➔ ➔ ➔

background-origin background-clip background-size hacer capas con múltiples imágenes de fondo

http://www.csslab.cl/2012/06/27/backgrounds-multiples-en-css3-y-un-truco-gradual/

Propiedades nuevas

http://lea.verou.me/css3patterns/

Propiedades nuevas

Propiedades nuevas Color: ➔ ➔ ➔ ➔

colores HSL colores HSLA colores RGBA Opacidad http://www.css3maker.com/css-3-rgba.html

Propiedades nuevas Modelo de caja básico: ➔

overflow-x, overflow-y

Propiedades nuevas Texto: ➔ ➔ ➔ ➔

text-shadow text-overflow Rotura de palabras largas Web Fonts http://www.google.com/fonts/ http://www.fontsquirrel.com/

Propiedades nuevas

Propiedades nuevas

Propiedades nuevas Degradados CSS3: ➔ ➔ ➔ ➔

Degradados lineales Degradados radiales Degradados lineales de repetición Degradados radiales de repetición http://gradients.glrzad.com/

Propiedades nuevas Transformaciones: ➔ ➔ ➔ ➔

Escalar Sesgar Mover Rotar en 2D o 3D

http://www.csslab.cl/2011/01/31/animaciones-y-transformaciones-con-css3/

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

Propiedades nuevas http://www.antonionavajas.com/curso_css3/tema10_anim/ejemplo1.html

http://www.csslab.cl/2011/01/31/animaciones-y-transformaciones-con-css3/

Propiedades nuevas

¡Gracias! Lic. Lorena Bernis Lic. Mariano Ingerto (@marianoingerto)