PowerPoint Presentation

HTML 5 and CSS 3
insights

Libre Software MeetingBordeaux - wednesday 7th july 2010

Francis Draillard,
"Premiers pas en CSS et XHTML" - Eyrolles publishing

From XHTML

to HTML 5

Libre Software MeetingBordeaux - wednesday 7th july 2010

Francis Draillard
author of "Premiers pas en CSS et XHTML" - Eyrolles publishing

HTML's evolution

HTML 4

XHTML 1 then 1.1

HTML 5 / XHTML 5

XHTML 2

whatwg.orgWeb Hypertext Appplication Technology
Working Group

problem of back-compatibility

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

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

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

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)

HTML 5 sections

delimite a block into the page ( )

independant text into the page or a section

other content (advertising, slogan, news, ...)

navigation links

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

Sections example

HTML 5 translation for a part of the site www.framasoft.net

Medias contents,
audio and video

Player software include in the browser

- no need plugins- simplificated tags et

alternate text

alternate text

Simplification for Flash content tag

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

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 !

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

CSS 3's essentials

Libre Software MeetingBordeaux - wednesday 7th july 2010

Francis Draillard
"Premiers pas en CSS et XHTML" - Eyrolles publishing

New CSS3 selectors

More possibilities for selectors

tags having the same parent

nth child of a block

empty tags

selection with attribute content :beginning with ..., terminate with ...,
containing ..., different of ...

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

Transparency
with CSS 3

background opacity : 40 %
background-color: rgba(...);

block opacity : 40 %
background-color: rgb(...);
opacity: 0.4;

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

Shadows effects

Text shadow

text-shadow property

Blocks shadow

box-shadow property

Specifications : offset and colour for the shadow, fuzziness width

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)

Automatic columns

Columns number et width

Separate line for the columns

type of line, widht, colour

Space between columns

Columns balance

Application with automatic columns

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

2D and 3D geometric transformations

transform property used with geometric functions

translation

scale modification

rotation

distortion

Images : Wikipedia

Spcifications 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

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

For more informations...

Official specifications of W3C
at www.w3.org

Premiers pas en CSS et XHTML - 3e edition
First steps in CSS and XHTML - 3th 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

RMLL 2010HTML 5 and CSS 3 insights

RMLL 2010