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

HTML

Ricardo Alfaro
January 01, 2013
Programming
0
49

 HTML

Presentación sobre HTML para mincharla

Ricardo Alfaro

January 01, 2013
Tweet

More Decks by Ricardo Alfaro

See All by Ricardo Alfaro
Design Sprint en el mundo enterprise
ricardoalfaro
0
500
Remote Design & Dev Sprints
ricardoalfaro
1
45

Other Decks in Programming

See All in Programming
AppRouter Panel Talk
yosuke_furukawa
PRO
1
450
Git Lint
bkuhlmann
4
760
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
900
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
110
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.2k
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
560
Domain-Driven Transformation
hschwentner
2
1.5k
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
Sheets API使ってみた
toshi0383
2
160
Milestoner
bkuhlmann
1
410
Node.js v22 で変わること
yosuke_furukawa
PRO
11
3.9k
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
980

Featured

See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
How GitHub (no longer) Works
holman
305
140k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
21
6.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
GitHub's CSS Performance
jonrohan
1025
450k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
14
1.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k

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