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

HTML

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Ricardo Alfaro Ricardo Alfaro
January 01, 2013
Programming
0
55

 HTML

Presentación sobre HTML para mincharla

Avatar for Ricardo Alfaro

Ricardo Alfaro

January 01, 2013
Tweet

More Decks by Ricardo Alfaro

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

Other Decks in Programming

See All in Programming
CSC307 Lecture 01
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
690
Oxlintはいいぞ
Avatar for Yuji Yamaguchi yug1224
5
1.3k
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
Avatar for Kaito Minatoya kamina_zzz
0
400
KIKI_MBSD Cybersecurity Challenges 2025
Avatar for ikema ikema
0
1.3k
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
1
230
登壇資料を作る時に意識していること #登壇資料_findy
Avatar for konifar konifar
4
960
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
Avatar for tasshi tasshi
0
200
Architectural Extensions
Avatar for Denys Poltorak denyspoltorak
0
270
2026年 エンジニアリング自己学習法
Avatar for yumechi(Motoki Hirao) yumechi
0
130
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2k
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
Avatar for ahu ahuglajbclajep
5
990
なぜSQLはAIぽく見えるのか/why does SQL look AI like
Avatar for florets1 florets1
0
450

Featured

See All Featured
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
100
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
170
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
2
2.3k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.1k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
170
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
230
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
7.9k

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