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

HTML

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
副作用をどこに置くか問題：オブジェクト指向で整理する設計判断ツリー
Avatar for Koya Masuda koxya
1
590
インターン生でもAuth0で 認証基盤刷新が出来るのか
Avatar for takumi taku271
0
190
疑似コードによるプロンプト記述、どのくらい正確に実行される？
Avatar for kokuyouwind kokuyouwind
0
380
例外処理とどう使い分ける？Result型を使ったエラー設計 #burikaigi
Avatar for Takuma Kajikawa kajitack
16
6k
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
0
910
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
Avatar for Hiroyuki Moriya gekko0114
2
420
コマンドとリード間の連携に対する脅威分析フレームワーク
Avatar for Aja9tochin pandayumi
1
450
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
Avatar for Hiroshi Morishige himorishige
11
5.9k
IFSによる形状設計／デモシーンの魅力 @ 慶應大学SFC
Avatar for がむ gam0022
1
300
CSC307 Lecture 07
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
550
Apache Iceberg V3 and migration to V3
Avatar for Tomohiro Tanaka tomtanaka
0
150
Smart Handoff/Pickup ガイド - Claude Code セッション管理
Avatar for rasshii yukiigarashi
0
130

Featured

See All Featured
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
50
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
820
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
320
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
640
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
170
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
0
77
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.3k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.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