Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

HTML

Avatar for Ricardo Alfaro Ricardo Alfaro
January 01, 2013
Programming
63
0

 HTML

Presentación sobre HTML para mincharla

Avatar for Ricardo Alfaro

Ricardo Alfaro

January 01, 2013

More Decks by Ricardo Alfaro

See All by Ricardo Alfaro
Design Sprint en el mundo enterprise
Avatar for Ricardo Alfaro ricardoalfaro
0
760
Remote Design & Dev Sprints
Avatar for Ricardo Alfaro ricardoalfaro
1
60

Other Decks in Programming

See All in Programming
IBM Bob Dojo #1 仕様駆動開発入門
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
0
390
phperだってパンチカードでコーディングしたい
Avatar for hideki kinjyo o0h
PRO
0
340
Agents on Rails - Rails at Scale 2026
Avatar for Irina Nazarova irinanazarova
0
560
AWSに止められる覚悟してますか？
Avatar for モリゾー morizo_1984
2
540
コーディング自動化の次へ。人の介入をゼロにするファクトリーとサポートAIによる実践
Avatar for Seiji Takahashi timakin
5
3.6k
KiroのSpecで「五目並べ」を作ってみる
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
380
Event is what happens
Avatar for MOROHASHI Kyosuke moro
2
780
Vue Fes Japan の “作る側”に関わってみて
Avatar for Naoki Haba naokihaba
0
160
GemmaをJevのように使ってみる / Use Gemma like Jev
Avatar for Naoki Kishida kishida
5
790
Verilogで学ぶCPU自作入門
Avatar for uyuki uyuki234
8
4.1k
AmebaブログはKMPから卒業します
Avatar for 伊藤光次郎 kmars0605
0
190
カツオ、ご期待ください
Avatar for saku_totomi suneo3476
0
190

Featured

See All Featured
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
640
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
350
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.5k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
2.1k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
1.1k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.8k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
400
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
1.2k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
1k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
850

Transcript

  1. None

  2. DISEÑADOR INTERFAZ FRONT-END RICARDO ALFARO

  3. + Elementos semánticos Retrocompatibilidad Filosofía de la simpleza ¿QUE ES?

    + Acceso & Performance

  4. SEMÁNTICA Nuevas etiquetas más representativas y semánticas

  5. OFFLINE & STORAGE Almacenamiento local (DB), incluso trabajando sin conexión

  6. DEVICE ACCESS Apps más innovadoras, utilizando el acceso a los

    dispositivos del equipo

  7. CONECTIVIDAD Eficiencia en la comunicación cliente-servidor a través de Web

    Socket

  8. MULTIMEDIA <audio> & <video> son componentes nativos en el browser

  9. 3D & EFECTOS SVG, Canvas, WebGL y CSS3

  10. PERFORMANCE & INTEGRACIÓN Mejorar la performance a través de Web

    Workers y XMLHttpRequest2

  11. CSS3 STYLESHEET Amplia gama de estilización, efectos y la mejora

    enriquecida de la interfaz

  12. GEO LOCALIZACIÓN WEB STORAGE WEB SOCKETS WEB FORMS WEB GL/3D/CANVAS

    AUDIO/VIDEO DRAG AND DROP SEMANTIC LABELS NUEVOS ESTILOS

  13. <!DOCTYPE html> DOCTYPE

  14. <meta charset=utf-8> ENCODING

  15. <link rel=stylesheet href=styles.css> LINKS <script src=jquery.js></script>

  16. <header></header> <footer></footer> <nav></nav> <article> </article> <section></section> <aside> </aside> <article> </article>

    <figure> </figure>

  17. <figure> <img src=foto.png alt=foto> <figcaption> Detalle de foto </figcaption> </figure>

  18. <audio src=sonido.mp3></audio> AUDIO

  19. <video src=video.mp4></video> VIDEO

  20. <video controls> <source src=”video.mp4” type=”video/mp4”> <source src=”video.ogv” type=”video/ogg”> <object type=”application/x-shocwave-flash”

    data=”player.swf?file=video.mp4”> <param name=”video” value=” player.swf? file=video.mp4”> <a href=”video.mp4”>Descargar</a> </object> </video>

  21. LABELS

  22. SOPORTE

  23. SOPORTE ¿ ?

  24. HTML5 para navegadores antiguos HTML5 SHIV <!--[If lt IE 9]>

    <script src=http://html5shim.googlecode.com/ svn/trunk/html5.js> </script> <![endif]-->

  25. HTML5 SHIV http://code.google.com/p/html5shim/

  26. Can I use? http://caniuse.com

  27. None

  28. MODERNIZR

  29. librería Javascript que detecta las características HTML5 y CSS3 en

    el navegador del usuario ? MODERNIZR

  30. <script src="modernizr-latest.js"></script> ¿CÓMO SE USA?

  31. None

  32. POLYFILLS CODIGO QUE AYUDA A REPRESENTAR FUNCIONALIDADES HTML5 QUE NO

    SOPORTA EL NAVEGADOR

  33. POLYFILLS CODIGO QUE AYUDA A REPRESENTAR FUNCIONALIDADES HTML5 QUE NO

    SOPORTA EL NAVEGADOR

  34. https://github.com/Modernizr/Modernizr/ wiki/HTML5-Cross-Browser-Polyfills

  35. http://html5doctor.com

  36. None

  37. HTML5 Boilerplate http://html5boilerplate.com

  38. None

  39. Bootstrap http://twitter.github.com/bootstrap/index.html

  40. None

  41. ALGUNOS EJEMPLOS

  42. ¡GRACIAS! ¿Preguntas?

  43. None