Embed Size (px)
DESCRIPTION
HTML5 WarmUp!
Citation preview
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?
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/
