HTML5 y el presente de

la Web

Acerca de mi
Jos Pedro Rodrguez Galarreta
Web developer en
Instructor en

@JPedroScript

HTML + CSS + JS

Tres capas de una pgina Web

http://dev.w3.org/html5/spec/

http://flashvhtml.com/

 Firefox 3.5+
Chrome 3.0+
Safari 3.1+

Opera 10.5+
IE 9.0
iPhone

iPod Touch
iPad
Android OS

HTML

CSS

Web Apps

SVG

Geolocation
ECMA

Last Update: 13th June 2011

Estructura HTML4

Estructura HTML5

Sintaxis HTML4

Sintaxis HTML5

Nuevos controles de formularios

Telephone

Url

Email

Password

Datetime

Date

Month

Week

Number

Range

Color

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.

Frameworks de video HTML5

http://www.videojs.com/
http://www.html5video.org/kaltura-html5/
http://sublimevideo.net/

http://www.apple.com/html5/

http://www.html5rocks.com/

http://www.beautyoftheweb.com/

http://mediaqueri.es/

http://flashvhtml.com/

Enlaces de inters

http://blog.templatemonster.com/2013/10/04/html5-websites-that-would-curlhair-on-your-toes-sequel/

http://blog.templatemonster.com/2013/10/04/html5-websites-that-would-curlhair-on-your-toes-sequel/

http://jaymorrow.github.io/validatr/

http://groundwork.sidereel.com/

www.soundcloud.com

http://www.thejohnnycashproject.com/

https://www.google.com/webdesigner/

http://www.ebizmba.com/articles/best-html5-websites

Herramientas de Desarrollo

Visual Studio 2010 / 2012

Microsoft Expression Web 4 SP1
Microsoft WebMatrix
Adobe Dreamweaver
Herramientas de desarrollador de los browser
Texto plano:
Sublime Text
Notepad++

Testeadores online
HTML5Test
http://html5test.com/

CSS3Test
http://css3test.com/

Comparaciones
Soporte HTML5 y CSS3

http://www.findmebyip.com/litmus/

MobileHTML5

http://mobilehtml5.org/

Tablas de compatibilidad
http://caniuse.com/

Readlines

http://html5readiness.com/

Validadores
W3C Markup Validation Service
http://validator.w3.org/

Validadores
W3C CSS Validation Service
http://jigsaw.w3.org/css-validator/

Recursos
Started with IE9 and HTML5
http://bit.ly/hpbwhv
Whitepaper focused for developers
http://msdn.microsoft.com/en-us/ie/ff468705.aspx
A good technical overviews
http://live.visitmix.com/MIX11/Sessions/
Feature-specific demos
http://www.beautyoftheweb.com/
Blogs
http://blogs.msdn.com/b/ie/
Canvas demo by Community
http://www.canvasdemos.com/

Preguntas?

Gracias!