Rmll2010 html5-css3-english

1,014 views

Published on

HTML 5 and CSS 3 insights

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
1,014
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
12
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Rmll2010 html5-css3-english

  1. 1. HTML 5 and CSS 3 insights Libre Software Meeting Bordeaux - wednesday 7th july 2010 Francis Draillard, "Premiers pas en CSS et XHTML" - Eyrolles publishing
  2. 2. From XHTML to HTML 5 Libre Software Meeting Bordeaux - wednesday 7th july 2010 Francis Draillard author of "Premiers pas en CSS et XHTML" - Eyrolles publishing
  3. 3. HTML's evolution <ul><li>HTML 4 </li></ul>whatwg.org Web Hypertext Appplication Technology Working Group problem of back-compatibility XHTML 1 then 1.1 HTML 5 / XHTML 5 XHTML 2
  4. 4. Back to HTML ? <ul><li>In spite of its name, HTML 5 keeps the essential principles of XHTML </li></ul><ul><ul><li>Separate content (HTML 5 code) and format (style sheet CSS)
  5. 5. Use tags which give sense to the text </li></ul></ul>
  6. 6. Separate content and format <h1> Title </h1> <h2> First subtitle </h2> <p> Some text... some text... some text... some text... </p> <h2> Second subtitle </h2> <p> Some text... some text... some text... some text... </p> <style type=&quot;text/css&quot;> h1 { titles format ... } h2 { subtitles format ... } p { paragraphs format ... } </style>
  7. 7. HTML 5 or XHTML 5 ? <ul><li>These two languages are very similar
  8. 8. They use the same tags </li></ul><ul><ul><ul><li>web sites : HTML 5
  9. 9. XHTML 5 : for connexion with XML </li></ul></ul></ul><ul><li>The most important : Use tags with rational method </li></ul>
  10. 10. Principles for HTML 5 <ul><li>More signification for the tags
  11. 11. Delimit the parts of the page with sections (which replace some <div>)
  12. 12. Simplification for media contents (audio, video, animations) </li></ul>
  13. 13. HTML 5 sections <ul><li><section> </li></ul><ul><ul><ul><li>delimite a block into the page (  <div>) </li></ul></ul></ul><ul><li><article> </li></ul><ul><ul><ul><li>independant text into the page or a section </li></ul></ul></ul><ul><li><aside> </li></ul><ul><ul><ul><li>other content (advertising, slogan, news, ...) </li></ul></ul></ul><ul><li><nav> </li></ul><ul><ul><ul><li>navigation links </li></ul></ul></ul>
  14. 14. HTML 5 sub-sections <ul><li>They delimit the parts from a page or of from a section into the page </li></ul><ul><li><header> </li></ul><ul><ul><ul><li>header part </li></ul></ul></ul><ul><li><hgroup> </li></ul><ul><ul><ul><li>group of titles and subtitles <h1>, <h2>, ... </li></ul></ul></ul><ul><li><footer> </li></ul><ul><ul><ul><li>footer for the page or the section </li></ul></ul></ul>
  15. 15. Sections example HTML 5 translation for a part of the site www.framasoft.net <header> <footer> <header> <header> <footer> <footer> <article> <article> <article>
  16. 16. Medias contents, audio and video <ul><li>Player software include in the browser </li></ul>- no need plugins - simplificated tags <audio> et <video> <ul><ul><li><audio src=&quot;piano-bar.mp3&quot;> alternate text </audio>
  17. 17. <video src=&quot;myclip.webm&quot;> alternate text </video> </li></ul></ul><ul><li>Simplification for Flash content tag </li></ul><ul><ul><li><embed src=&quot;pub.swf&quot; /> </li></ul></ul>
  18. 18. Videos specifications <ul><li>Theora : libre and open format
  19. 19. H264 : private format, with an expensive license
  20. 20. WebM : libre et open format (codec VP8 ) </li></ul><ul><ul><ul><li>recent and efficient format, more better in future
  21. 21. project supported by Mozilla, Google, Opera, ...
  22. 22. www.webmproject.org </li></ul></ul></ul>
  23. 23. Application Audio and video tags Do not abuse drink wine, even you get it through your USB key ! It would cause damage for your health and for understanding HTML5 ! With the browser Chrome 5
  24. 24. When use HTML 5 ? <ul><li>Added to XHTML, waiting new versions of navigateurs will be currently used
  25. 25. Now, if the users have modern browsers on their equipment </li></ul> for tablets PC et smartphones  to use into an enterprise ...
  26. 26. CSS 3's essentials Libre Software Meeting Bordeaux - wednesday 7th july 2010 Francis Draillard &quot;Premiers pas en CSS et XHTML&quot; - Eyrolles publishing
  27. 27. New CSS3 selectors <ul><li>More possibilities for selectors </li></ul><ul><ul><li>tags having the same parent
  28. 28. n th child of a block
  29. 29. empty tags
  30. 30. selection with attribute content : </li><ul><li>beginning with ..., terminate with ..., containing ..., different of ... </li></ul></ul></ul>
  31. 31. Transparency <ul><li>Specification for transparency level of a colour </li></ul><ul><ul><ul><li>text colour or background colour
  32. 32. colour with opacity level rgba(..., ..., ..., ...)
  33. 33. the &quot;a&quot; means alpha level (transparency) </li></ul></ul></ul><ul><li>Transparency for a block and its content </li></ul><ul><ul><ul><li>opacity property </li></ul></ul></ul>
  34. 34. Transparency with CSS 3 background opacity : 40 % background-color: rgba(...); block opacity : 40 % background-color: rgb(...); opacity: 0.4;
  35. 35. Font transfer <ul><li>No more limitation to some usual character fonts
  36. 36. Font file transfer with @font-face </li></ul><ul><li>You can use this font in all the page </li></ul>
  37. 37. Shadows effects <ul><li>Text shadow </li></ul><ul><ul><ul><li>text-shadow property </li></ul></ul></ul><ul><li>Blocks shadow </li></ul><ul><ul><ul><li>box-shadow property </li></ul></ul></ul><ul><li>Specifications : offset and colour for the shadow, fuzziness width </li></ul>
  38. 38. Round corners for blocks <ul><li>Rounded pour all of the corners
  39. 39. Specified rounded for each corner
  40. 40. Rounded radius </li></ul> border-radius property, exists also for each corner (with top, right, left, bottom)
  41. 41. Automatic columns <ul><li>Columns number et width
  42. 42. Separate line for the columns </li></ul><ul><ul><ul><li>type of line, widht, colour </li></ul></ul></ul><ul><li>Space between columns
  43. 43. Columns balance </li></ul>
  44. 44. Application with automatic columns From site http://2010.rmll.info, modified for a three columns presentation
  45. 45. 2D and 3D geometric transformations <ul><li>transform property used with geometric functions </li></ul><ul><ul><ul><li>translation
  46. 46. scale modification
  47. 47. rotation
  48. 48. distortion </li></ul></ul></ul>Images : Wikipedia
  49. 49. Spécifications for mobile devices <ul><li>Adaptat your pages to devices like smartphones, tablet PC, PDA, ...
  50. 50. Apply specific style sheet, according to specified parameters </li></ul><ul><ul><ul><li>screen width
  51. 51. portrait or landscape mode
  52. 52. ... </li></ul></ul></ul>Image : Wikipedia
  53. 53. When use CSS 3 ? <ul><li>Immediatly </li></ul><ul><ul><ul><li>for secondary effects  shadows, rounded corners, ...
  54. 54. for recent devices :  style sheet according to mobile devices </li></ul></ul></ul><ul><li>With prefixes for some properties </li></ul><ul><ul><ul><li>for browsers versions which don't integrate completely CSS 3
  55. 55. prefix -moz- , -webkit- or -o- for the differents browsers </li></ul></ul></ul>
  56. 56. For more informations... <ul><li>Official specifications of W3C at www.w3.org </li></ul><ul><li>Premiers pas en CSS et XHTML - 3 e edition First steps in CSS and XHTML - 3 th edition </li></ul><ul><ul><li>author Francis Draillard, Eyrolles publishing
  57. 57. presents HTML 5 and CSS 3 norms, and take into account new browsers working </li></ul></ul><ul><li>These slides : at www.antevox.fr/livre </li></ul>

×