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

HTML5 para vagos

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Betabeers Betabeers
October 19, 2011
490
2

HTML5 para vagos

Avatar for Betabeers

Betabeers

October 19, 2011

More Decks by Betabeers

See All by Betabeers
Cómo diagnosticar problemas de rendimiento en entornos LAMP @crononito
Avatar for Betabeers betabeers
1
140
karmacracy
Avatar for Betabeers betabeers
0
130
dogfight
Avatar for Betabeers betabeers
0
200
Patrones de diseño y ejemplos prácticos en JAVA @47deg_es
Avatar for Betabeers betabeers
0
8.4k
Introducción a REST y ejemplos prácticos con JAVA @47deg_es
Avatar for Betabeers betabeers
0
250
Apps móviles, ampliando horizontes
Avatar for Betabeers betabeers
0
300
topigames nscoder madrid
Avatar for Betabeers betabeers
0
620
AffinityRadar
Avatar for Betabeers betabeers
0
190
backbeam
Avatar for Betabeers betabeers
0
200

Featured

See All Featured
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.7k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.3k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
190
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
800
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
63
55k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.5k

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