1. RMLL 2010 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. RMLL 2010 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. RMLL 2010 HTML 5 and CSS 3 insights 3 HTML's evolution HTML 4 XHTML 1 then 1.1 HTML 5 / XHTML 5 XHTML 2 whatwg.org Web Hypertext Appplication Technology Working Group problem of back- compatibility

4. RMLL 2010 HTML 5 and CSS 3 insights 4 Back to HTML ? In spite of its name, HTML 5 keeps the essential principles of XHTML Separate content (HTML 5 code) and format (style sheet CSS) Use tags which give sense to the text

5. RMLL 2010 HTML 5 and CSS 3 insights 5 Separate content and format Title First subtitle Some text... some text... some text... some text... Second subtitle Some text... some text... some text... some text... h1 { titles format... } h2 { subtitles format... } p { paragraphs format... }

6. RMLL 2010 HTML 5 and CSS 3 insights 6 HTML 5 or XHTML 5 ? These two languages are very similar They use the same tags  web sites : HTML 5  XHTML 5 : for connexion with XML The most important : Use tags with rational method

7. RMLL 2010 HTML 5 and CSS 3 insights 7 Principles for HTML 5 More signification for the tags Delimit the parts of the page with sections (which replace some ) Simplification for media contents (audio, video, animations)

8. RMLL 2010 HTML 5 and CSS 3 insights 8 HTML 5 sections  delimite a block into the page (  )  independant text into the page or a section  other content (advertising, slogan, news,...)  navigation links

9. RMLL 2010 HTML 5 and CSS 3 insights 9 HTML 5 sub-sections They delimit the parts from a page or of from a section into the page  header part  group of titles and subtitles,,...  footer for the page or the section

10. RMLL 2010 HTML 5 and CSS 3 insights 10 Sections example HTML 5 translation for a part of the site www.framasoft.net

11. RMLL 2010 HTML 5 and CSS 3 insights 11 Medias contents, audio and video Player software include in the browser - no need plugins - simplificated tags et alternate text Simplification for Flash content tag

12. RMLL 2010 HTML 5 and CSS 3 insights 12 Videos specifications Theora : libre and open format H264 : private format, with an expensive license WebM : libre et open format (codec VP8)  recent and efficient format, more better in future  project supported by Mozilla, Google, Opera,...  www.webmproject.org

13. RMLL 2010 HTML 5 and CSS 3 insights 13 Application Audio and video tags With the browser Chrome 5 Do not abuse drink wine, even you get it through your USB key ! It would cause damage for your health and for understanding HTML5 !

14. RMLL 2010 HTML 5 and CSS 3 insights 14 When use HTML 5 ? Added to XHTML, waiting new versions of navigateurs will be currently used Now, if the users have modern browsers on their equipment  for tablets PC et smartphones  to use into an enterprise...

15. RMLL 2010 CSS 3's essentials Libre Software Meeting Bordeaux - wednesday 7th july 2010 Francis Draillard "Premiers pas en CSS et XHTML" - Eyrolles publishing

16. RMLL 2010 HTML 5 and CSS 3 insights 16 New CSS3 selectors More possibilities for selectors tags having the same parent n th child of a block empty tags selection with attribute content :  beginning with..., terminate with..., containing..., different of...

17. RMLL 2010 HTML 5 and CSS 3 insights 17 Transparency Specification for transparency level of a colour  text colour or background colour  colour with opacity level rgba(...,...,...,...)  the "a" means alpha level (transparency) Transparency for a block and its content  opacity property

18. RMLL 2010 HTML 5 and CSS 3 insights 18 Transparency with CSS 3 background opacity : 40 % background-color: rgba(...); block opacity : 40 % background-color: rgb(...); opacity: 0.4;

19. RMLL 2010 HTML 5 and CSS 3 insights 19 Font transfer No more limitation to some usual character fonts Font file transfer with @font-face You can use this font in all the page

20. RMLL 2010 HTML 5 and CSS 3 insights 20 Shadows effects Text shadow  text-shadow property Blocks shadow  box-shadow property Specifications : offset and colour for the shadow, fuzziness width

21. RMLL 2010 HTML 5 and CSS 3 insights 21 Round corners for blocks Rounded pour all of the corners Specified rounded for each corner Rounded radius  border-radius property, exists also for each corner (with top, right, left, bottom)

22. RMLL 2010 HTML 5 and CSS 3 insights 22 Automatic columns Columns number et width Separate line for the columns  type of line, widht, colour Space between columns Columns balance

23. RMLL 2010 HTML 5 and CSS 3 insights 23 Application with automatic columns From site http://2010.rmll.info, modified for a three columns presentation

24. RMLL 2010 HTML 5 and CSS 3 insights 24 2D and 3D geometric transformations transform property used with geometric functions  translation  scale modification  rotation  distortion Images : Wikipedia

25. RMLL 2010 HTML 5 and CSS 3 insights 25 Spécifications for mobile devices Adaptat your pages to devices like smartphones, tablet PC, PDA,... Apply specific style sheet, according to specified parameters  screen width  portrait or landscape mode ... Image : Wikipedia

26. RMLL 2010 HTML 5 and CSS 3 insights 26 When use CSS 3 ? Immediatly  for secondary effects  shadows, rounded corners,...  for recent devices :  style sheet according to mobile devices With prefixes for some properties  for browsers versions which don't integrate completely CSS 3  prefix -moz-, -webkit- or -o- for the differents browsers

27. RMLL 2010 HTML 5 and CSS 3 insights 27 For more informations... Official specifications of W3C at www.w3.org Premiers pas en CSS et XHTML - 3 e edition First steps in CSS and XHTML - 3 th edition author Francis Draillard, Eyrolles publishing presents HTML 5 and CSS 3 norms, and take into account new browsers working These slides : at www.antevox.fr/livre