HTML5 Warm up!

Warm Up!

@tessekkur@HTML5MeetSpain

Hoy tocan estiramientos!

¿En qué condiciones estás tú?

Image source: http://awfulsports.files.wordpress.com/2010/10/sports-geek.jpg

¿Quién decide que #HTML5 sea la tecnología adecuada para la Web?

Image source: http://mafiatoday.com/wp-content/uploads/2013/01/Cosa-Nostra-300x240.jpg

¿La Mafia?

Cuando programas hay que seguir unas normas. Hay estándares! Ya había estándares

y habrá nuevos estándares.

Logo W3C: http://www.w3.org/Icons/w3c_home - Logo WhatWG: www.whatwg.org/

Organización dónde grandes/pequeñas compañías, personal y personas independientes trabajan juntos para

desarrollar los estándares Web.

Tim Berners-Lee, inventor de la Web

What Working Group.Los promotores de #HTML5

Developers!

¿Qué es #HTML5?

Es la palabra de moda (buzzword!) para referirse a las nuevas versiones de HTML y CSS, y las nuevas API’s de

Javascript.

HTML4, XHTML1 por HMTL5CSS2 por CSS3

Javascript evoluciona a un ritmo increíble!Las JS API’s no existían! ¿Sabes qué es una API?

¿Qué es #HTML5?

Image source: Wikipedia – http://en.wikipedia.org/wiki/HTML5

HTML

Image source: Wikipedia – http://en.wikipedia.org/wiki/HTML5

Los cambios son relativamente pocos. Nuevas etiquetas, nuevos atributos, Lo más representativo es el carácter semántico de este

lenguaje de programación.

La Web es texto. Y el texto tiene que tener sentido.

WEB SEMÁNTICA (3,0)

Etiquetas que describen el tipo de contenido que contienen:header, section, article, footer, video, audio ... pero hay más!

Web SemánticaLas etiquetas semánticas, se refieren a la estructura. Son bloques de contenido que empleamos para mostrar la

información de nuestras páginas html.

Pero podemos especificar aún más que tipo de datos contiene la información. Con estructuras de datos.

¿Cómo?Con Microdatos.

¿Cómo?

¿Cómo?

HTML Microdata

Los microdatos consisten en un grupo de datos nombre-valor.

Los grupos son identificados cómo items, y cada par nombre-valor es una propiedad.

Para crear un item empleamos el atributo itemscope.

Para añadir una propiedad al item usamos el atributo itemprop.

Image source: http://www.techwhatnext.com/wp-content/uploads/2011/06/top-3-search-engines.jpg

Sin Microdata

Con Microdata

http://schema.org/Person

La clave está aquí !

HTML DOCTYPE. ¿Y tú cuál usas?

#HTML5

Ya está!

o_0

HTML5 Multimedia

Video&Audio

- No Flash, no Silverlight, no plug-in!

- Estilos con CSS

- Integrar con SVG y Canvas

- Control mediante Javascript

HTML5 Multimedia

Video&Audio

Aporta una solución en la línea 16 a los usuarios que no visualizan tu contenido HTML5.

El audio se incluye igual.

HTML5 Multimedia

Ejemplos

Crear experiencias!Páginas con Vídeos de fondo

Video ‘Responsive’

http://popcornjs.org/http://dfcb.github.com/BigVideo.js/

http://code.google.com/p/jquery-tubular/

http://mediaelementjs.com/

CSS3 Bordes redondeados

#Example_A {height: 65px;width:160px;-moz-border-radius-bottomright: 50px;border-bottom-right-radius: 50px;}

#Example_B {height: 65px;width:160px;-moz-border-radius-bottomright: 50px 25px;border-bottom-right-radius: 50px 25px;}#Example_C {height: 65px;width:160px;-moz-border-radius-bottomright: 25px 50px;border-bottom-right-radius: 25px 50px;}

#Example_D {height: 5em;width: 12em;-moz-border-radius: 1em 4em 1em 4em;border-radius: 1em 4em 1em 4em;}

#Example_E {height: 65px;width:160px;-moz-border-radius: 25px 10px / 10px 25px;border-radius: 25px 10px / 10px 25px;}

#Example_F {height: 70px;width: 70px;-moz-border-radius: 35px;border-radius: 35px;}

CSS3 Degradados

http://www.colorzilla.com/gradient-editor/

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

Patrones!

CSS3 Transiciones

Las Transiciones nos dan la habilidad de animar suavemente del estado anterior al nuevo.

Los cambios de valor en las propiedades se producirán suavemente durante un determinado tiempo.

El siguiente código provocará que la propiedad opacity haga una transición de 3 segundos y la propiedad left realice una transición de 5 segundos.

CSS3 AnimacionesEl ejemplo produce una una animación de #warning horizontalmente desde la posición 0 hasta los 100px durante cinco segundos y se repite nueve veces para un total de diez iteraciones.

La clave se encuentra, en que las Transiciones se realizan implícitamente cuando se produce el cambio del valor de la propiedad, las Animaciones son explícitamente ejecutadas cuando las propiedades de animación son empleadas.

La clave se encuentra, en que las Transiciones se realizan implícitamente cuando se produce el cambio del valor de la propiedad, las Animaciones son explícitamente ejecutadas cuando las propiedades de animación son empleadas.

CSS3 Transformaciones

http://www.the-art-of-web.com/css/css-animation/

box 1Movido hacia la derecha: -webkit-transform: translate(3em,0);

box 2Rota 30 grados(mov. reloj): -webkit-transform: rotate(30deg);

box 3Movido hacia la izqda y abajo: -webkit-transform: translate(-3em,1em);

box 4Escala 2 veces su tamaño: -webkit-transform: scale(2);

http://www.paulrhayes.com/experiments/cube/multiCubes.html

3D cubes built and animated with CSS

http://www.optimum7.com/css3-man/animation.html

CSS3-Man

Anthony Calzadilla

http://stuffandnonsense.co.uk/content/demo/madmanimation/

MADMANIMATION

http://www.anthonycalzadilla.com/i-twitty-the-fool/

I Twitty the Fool!

http://hakim.se/experiments/css/domtree/

DOM Tree

CSS3 Media Queries

Las media queries ya existían!

Responsive Web Design

Responsive Web Design

Media Queries

Media featuresLas características del medio que podemos consultar pueden ser:

• width y device-width• height y device-height• orientation• aspect-ratio y device-aspect-ratio• color y color-index• monochrome• resolution• Además: scan, grid...

Responsive Web Design

¿Ejemplos?

Responsive Web Design

http://mediaqueri.es/

Javascript

Alucinas!

Videogames, 3D, SmartTV, Geolocalización, Web Storage,

WebRTC

Javascript

Alucinas!

http://html.adobe.com/edge/animate/showcase/bubbles/bubbles.html

http://florian-rappl.de/Articles/Page/116/super-mario5-article

Canela fina!

Javascript

3D / WebGL

http://mrdoob.com/131/clouds

http://www.findyourwaytooz.com/

http://madebyevan.com/webgl-water/

@tessekkur@HTML5MeetSpain

Gracias!html5spain@gmail.com