Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Rmll2010 html5-css3-english

HTML 5 and CSS 3 insights

  • Login to see the comments

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>

×