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

HTML

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
Railsのためのパスキー実践入門 〜マルチテナントSaaSでの意思決定〜
Avatar for utakaha utakaha
2
550
すこし踏み込む CancellationToken
Avatar for tkym htkym
2
1.7k
[ハンズオン]AIへの指示だけで「五目並べ」を作ってみよう
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
380
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Rails World 2026, Austin, Texas
Avatar for Marco Roth marcoroth
0
220
[Dev Group Paris Octobre 26] Agentforce, SIforce, Claudeforce, Slackbot… on s'y retrouve ?
Avatar for Nathan Abondance nabondance
0
110
Unity6 URPによる海底をテーマにしたVJシステムの解説 | Unity Shader 完全に理解した 勉強会
Avatar for がむ gam0022
0
370
AWSに止められる覚悟してますか？
Avatar for モリゾー morizo_1984
2
530
設計次第でAIコードの読む量は減らせる / designing-for-code-reading
Avatar for MinoDriven minodriven
35
17k
Web Framework Benchmark Battle 2026, Any%
Avatar for Akira Matsuda a_matsuda
2
2k
IBM Bob でAI駆動開発『QC-Playbook』
Avatar for 1kano ichirokano2
0
110
AmebaブログはKMPから卒業します
Avatar for 伊藤光次郎 kmars0605
0
190
npm との違いを手がかりにGo の依存管理を理解したい
Avatar for OPTiM optim
0
310

Featured

See All Featured
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
460
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
570
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
63
46k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
590
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
460
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
1.1k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
540
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
4
1.2k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.8k

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