HTML 5 and CSS 3 insights

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. 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

5. Use tags which give sense to the text

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>

11. Delimit the parts of the page with sections (which replace some <div>)

12. Simplification for media contents (audio, video, animations)

15. Sections example HTML 5 translation for a part of the site www.framasoft.net <header> <footer> <header> <header> <footer> <footer> <article> <article> <article>

19. H264 : private format, with an expensive license

21. project supported by Mozilla, Google, Opera, ...

22. www.webmproject.org

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

25. Now, if the users have modern browsers on their equipment  for tablets PC et smartphones  to use into an enterprise ...

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

28. n th child of a block

29. empty tags

32. colour with opacity level rgba(..., ..., ..., ...)

34. Transparency with CSS 3 background opacity : 40 % background-color: rgba(...); block opacity : 40 % background-color: rgb(...); opacity: 0.4;

39. Specified rounded for each corner

40. Rounded radius  border-radius property, exists also for each corner (with top, right, left, bottom)

43. Columns balance

44. Application with automatic columns From site http://2010.rmll.info, modified for a three columns presentation

46. scale modification

47. rotation

48. distortion Images : Wikipedia

51. portrait or landscape mode

52. ... Image : Wikipedia

55. prefix -moz- , -webkit- or -o- for the differents browsers