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