Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
HTML 5  new generation  of  WEB  applications<br />Gustavo Delgado R.<br />gustavo.delgado@onecore.cl<br />
HTML4 and CSS2, the old couple<br /><ul><li>The websites of today are built with languages largely conceived during the mi...
Work on HTML 4 started in early 1997CSS 2 was published in 1998.
20 yearsforlearning.</li></li></ul><li>The websites of the 90<br /><ul><li>Simple layout
Text, text and more text
Hey!, try to use CSS!
Lot of tables
IEit’stheking</li></li></ul><li>The current websites<br /><ul><li>Complex layout
Eye-catching designs
Lots of user-interactivity
‘Website’ = essential hub for our digital lifestyles</li></li></ul><li>HTML 5<br />Thecurrentwaytomake a website<br /><ul>...
Itsallabout ‘divitis’ and ‘classitis’.
Semantic value of <div>  and ‘class’ = 0 </li></li></ul><li>HTML 5<br />HTML5 totherescue<br /><ul><li> Specifically desig...
Próxima SlideShare
Cargando en…5
×

HTML5 the new applications

1.269 visualizaciones

Publicado el

Publicado en: Tecnología, Diseño
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

HTML5 the new applications

  1. 1. HTML 5 new generation of WEB applications<br />Gustavo Delgado R.<br />gustavo.delgado@onecore.cl<br />
  2. 2. HTML4 and CSS2, the old couple<br /><ul><li>The websites of today are built with languages largely conceived during the mid to late 1990’s, when the web was still in its infancy.
  3. 3. Work on HTML 4 started in early 1997CSS 2 was published in 1998.
  4. 4. 20 yearsforlearning.</li></li></ul><li>The websites of the 90<br /><ul><li>Simple layout
  5. 5. Text, text and more text
  6. 6. Hey!, try to use CSS!
  7. 7. Lot of tables
  8. 8. IEit’stheking</li></li></ul><li>The current websites<br /><ul><li>Complex layout
  9. 9. Eye-catching designs
  10. 10. Lots of user-interactivity
  11. 11. ‘Website’ = essential hub for our digital lifestyles</li></li></ul><li>HTML 5<br />Thecurrentwaytomake a website<br /><ul><li> A lot of structured content with the same tag.
  12. 12. Itsallabout ‘divitis’ and ‘classitis’.
  13. 13. Semantic value of <div> and ‘class’ = 0 </li></li></ul><li>HTML 5<br />HTML5 totherescue<br /><ul><li> Specifically designed for web applications
  14. 14. Nice to search engines and screen readers
  15. 15. HTML 5 will update HTML 4.01, DOM Level 2
  16. 16. Hello ,<header>, <nav>, <article>, <section>, and other new tags.</li></li></ul><li>HTML 5<br />Themostimportantchanges<br /><ul><li>hgroup represents the header of a section.
  17. 17. figure can be used to associate a caption together with some embedded content, such as a graphic or video:
  18. 18. video and audio for multimedia content.
  19. 19. time represents a date and/or time.
  20. 20. canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
  21. 21. datalist together with the a new list attribute for input can be used to make comboboxes:
  22. 22. datagrid, for manipulation of tables with dataproviders.
  23. 23. The input element's type attribute now has the following new values: url, datetime, email, date, month, number, range, color.
  24. 24. dialogrepresentsconversations.</li></li></ul><li>HTML 5 Structure<br />
  25. 25. HTML 5 Support<br />
  26. 26. CSS 3.0<br />RoundedCorners<br />Forpersonswhoalwaysfightwiththislike me…<br />border-radius (or variant depending on browser) is used to make rounded corners<br />Example: border-radius: 3px<br />The bigger the value or the radius, the more curvy and larger are the rounded corners<br />Much simpler than using CSS 2 (no background images etc. needed)<br />
  27. 27. CSS 3.0<br />Box- and text-shadow<br />box-shadow creates a drop shadow effect (3 lengths and a colour)<br />Code example:box-shadow: 10px 6px 5px #888;<br />10px is horizontal offset, 6px is vertical offset, 5px is ‘blur radius’<br />To put the shadow on the left and top, use negative values for the first two offsets<br />Higher blur radius = more blurred<br />text-shadow is similar but applied to text<br />
  28. 28. Should I be using them?<br />Keep an eye on browser version statistics (buggy browsers should be more short-lived than before)<br />Experiment on intranet(s) and/or personal sites<br />Overall, many features of CSS 3 probably ripe to implement as of now<br />HTML 5 less compelling to implement today but that could change soon<br />
  29. 29. References<br />W3C http://dev.w3.org/html5/spec/Overview.html<br />Video examplehttp://www.csslab.cl/ejemplos/html5/html5_3.html<br />Databaseexamplehttp://webkit.org/demos/sticky-notes/<br />Canvasexamplehttps://bespin.mozillalabs.com/<br />

×