Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 para vagos

Betabeers
October 19, 2011
2
480

HTML5 para vagos

Betabeers

October 19, 2011
Tweet

More Decks by Betabeers

See All by Betabeers
Cómo diagnosticar problemas de rendimiento en entornos LAMP @crononito
betabeers
1
110
karmacracy
betabeers
0
89
dogfight
betabeers
0
130
Patrones de diseño y ejemplos prácticos en JAVA @47deg_es
betabeers
0
8.3k
Introducción a REST y ejemplos prácticos con JAVA @47deg_es
betabeers
0
230
Apps móviles, ampliando horizontes
betabeers
0
200
topigames nscoder madrid
betabeers
0
520
AffinityRadar
betabeers
0
130
backbeam
betabeers
0
120

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
A better future with KSS
kneath
238
17k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Facilitating Awesome Meetings
lara
50
6.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Site-Speed That Sticks
csswizardry
0
33
Side Projects
sachag
452
42k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Statistics for Hackers
jakevdp
796
220k
Mobile First: as difficult as doing things right
swwweet
222
8.9k

Transcript

  1. HTML5 para vagos 31.01.2011 Miquel Camps Orteza @miquelcamps

  2. Recordar menos etiquetas <acronym> <applet> <basefont> <big> <center> <dir> <font>

    <frame> <frameset> <noframes> <strike> <tt> <u> <xmp> Chuleta HTML5 http://woorkup.com/wp-content/uploads/2009/12/HTML5- Visual-Cheat-Sheet1.pdf

  3. Escribir menos código <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="js/script.js" type="text/javascript"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF- 8" /> <meta charset="utf-8" /> * la parte roja se elimina en HTML5

  4. Buscar menos javascripts en google Nuevos inputs: <input type="text" required

    /> <input type="email" /> <input type="range" /> <input type="date" /> <input type="color" /> ¡Incluso una barra de progreso! <progress value="50" max="100"></progress>

  5. Buscar menos javascripts en google Nuevos atributos: <input type="text" required

    /> <input type="search" autofocus /> <input type="text" name="name" placeholder="Pepe" /> <input type="file multiple" name="uploads[]" /> <input type="text" pattern="[0-9]{8}[A-Z]" /> <input type="number" min="1900" max="2010" />

  6. Menos copiar y pegar <object width="464" height="376" id="1994321" type="application/x- shockwave-flash"

    classid="clsid:D27CDB6E-AE6D-11cf-96B8- 444553540000" alt="Russian Grandfather Cracks Up At Grandson's Haircut Funny Videos"><param name="movie" value="http://embed.break.com/MTk5NDMyMQ=="></param><param name="allowScriptAccess" value="always"></param><embed src="http://embed.break.com/MTk5NDMyMQ==" type="application/x- shockwave-flash" allowScriptAccess=always width="464" height="376"></embed></object> <audio id="audio" src="sound.mp3" controls></audio> <video id="video" src="movie.webm" autoplay controls></video>

  7. Web semantica El consorcio WC3 dice... La Web Semántica es

    una Web extendida, dotada de mayor significado en la que cualquier usuario en Internet podrá encontrar respuestas a sus preguntas de forma más rápida y sencilla gracias a una información mejor definida. Resumen para vagos ;) La web semantica es una forma de estructurar mejor la información para que el usuario pueda encontrar mejores respuestas.

  8. Estructura mashable.com - Diseño <header> <hgroup> <nav> <aside> <footer>

  9. Estructura mashable.com - Noticias <section> <article> <time>

  10. Nuevas APIs javascript websockets ¿bye bye ajax? geolocalización drag &

    drop offline canvas Demos http://slides.html5rocks.com/

  11. Navegadores compatibles chrome firefox opera internet explorer 9

  12. Navegadores más usados Internet Explorer Firefox Chrome Safari Opera Otros

    61.58% 24.23% 5.61% 4.45% 2.35% 1.77% usuarios ie nvivo.es 8.0 69% 7.0 21% 6.0 8% 9.0 0.47% vía netmarketshare.com http://www.netmarketshare.com/browser-market-share.aspx?qprid=1&qpct=4

  13. ¿Cuando pasarse a HTML5? Ya puedes pasarte a HTML5 Utilizar

    la nueva estructura <section><article><time> va a ser la forma de posicionarse mejor en buscadores. Pero no podrás aprovechar todas las bondades de HTML5 como por ejemplo las validaciones de inputs Hay un tanto por ciento demasiado alto de gente usando internet explorer, las versiones inferiores de la 9 no soportan HTML5 y lo peor aún IE9 todavía no ha salido oficialmente.

  14. Implementación en IE < 9 Esto es para que la

    maquetación se vea igual: 1. Existe un script javascript para que internet explorer reconozca las nuevas etiquetas: http://html5shiv.googlecode.com 2. Poner las nuevas etiquetas dentro de div's y asociarles un class: <div class="header"><header>

  15. Recursos para vagos Sitios en HTML5 html5gallery.com Web semantica http://www.w3c.es/divulgacion/guiasbreves/websemantica

    Canvas http://devfiles.myopera.com/articles/418/canvasExample.html HTML5 empieza hoy http://www.slideshare.net/Martulina/html5-empieza-hoy