Nous découvrirons ensemble ce que HTML 5 et CSS3 nous apportent dans la dynamique d’un site Web. Que ce soit via des transitions, des animations ou encore des canvas et du média, la plateforme Web devient dynamique et créative. Nous vous invitons donc dans cette session à faire un tour d’horizon sur les apports de ces nouveautés dans nos sites Web.

1. palais des
congrès
Paris
7, 8 et 9
février 2012

2. HTML 5 et CSS3, créez,
animez et enrichissez vos
sites Web
Mardi 7 février
Vincent PETETIN
Consultant .NET
Bewise
vincent.petetin@bewise.fr

3. Présentation de BEWISE
« Pure Player »
Microsoft depuis 1999
Diffuse une expertise
Ouverture d’une
novatrice
agence sur Paris
Contribue à l’émergence
de logiciels performants
et ergonomiques
Retrouvez-nous sur le stand 47

4. Définition
HTML 5 ?
Trop vague pour avoir une définition précise
HTML 5 ≈ HTML + CSS3 + JavaScript
Les auteurs
W3C formalise et valide
WHATWG implémente et propose
Les acteurs
Microsoft, Apple, Mozilla, Google… mais surtout Nous !
Le but
Unifier le comportement des navigateurs
Evolution du langage qui facilite le développement d’application Web
Etat des lieux
Spécifications finalisées en 2014
L’implémentation à déjà commencé !

5. Anatomie / Agenda
Javascript
HTML
CSSautres
Les
Audio API, Blob URLs, for contenteditable classList
Audio async attribute Cross-document
@font-face Web fonts, calc() external scripts, attribute,
SVG, element, Canvas, as CSS unit value, Generated
content, Gradients, Grid Layoutdatasetattributes, Details
messaging, Cross-Origin Resource Sharing,inline-block,
Datalist element, element, Hyphenation , Device
attribute, Datalist dataset & ,data-* &attribute for
(DOMTokenList ), File API, FileReader data-* display,
Orientation Details & Summary defer API,Drag and
events, DataDrag and Drop, Form
URLs,
min/max-width/height, position:fixed, Regions, Table
& Summary Animation, elements, Filesystem
attributes, elements, Background-image options,
external scripts, ECMAScript 5 Strict Mode,
3D Transforms, Geolocation, Hashchange
& FileWriterHTML5 form features, New semantic
Drop, FormAPI,
validation, validation, HTML5 form features, New
Border IndexedDB, JSON (rounded corners),events,
Mode, images, Border-radius web
event, MathML, PNGtransparency, Touch Box-
MathML, PNG alphaOffline transparency, Touch
alpha
elements, Offline web Media Queries, Multiple
semantic elements, applications, Progress &
shadow, Box-sizing, Colors, matchMedia, Navigation
parsing, WAI-ARIA Accessibility features, XHTML as
matchesSelector,
WAI-ARIA Accessibility& Sessionobject-fit/object-
events,RubyMultiple column layout,Ruby
applications, Progress features, history
backgrounds, annotation, Meter, XHTML served
Meter, API, requestAnimationFrame, Server-sent DOM
Timing as application/xhtml+xml, XMLHttpRequest
served Opacity,Text API XMLHttpRequest 2, … API
application/xhtml+xml, for Canvas, Toolbar/context
position, selectors, Text-overflow, Text-shadow,
management,Web Workers, management, Text
annotation, Session history Typed Arrays, Web
vents, Shared
2, Canvas, Toolbar/context menu, Canvas
for… VideoWeb Sockets, Web - 3DVideo
Transforms, Transitions, Word-wrap, Flexible Box Layout
menu, element, WebGL Storage - name/value
Notifications,feature settings, rem (root em) units, TTF/OTF
Module, Font
pairs, Web...
- TrueType Workers, Full Screen
graphics, …API, Web
graphics, and OpenType font support, …
element, WebGL - 3D Canvas API,... Stream
SQL Database, …

6. DEMO
Un peu de cosmétique !

7. Transformations
Scale(0.5, 0.5)
skew(-
10deg, 0deg)
Translate(-300px, -300px)

8. Transitions & animations
Transition Animation
Délai Etat de départ
Etat d’arrivé
Durée Etats intermédiaires
Propriétés Délai
Timing function (easing Durée
function) Timing function
Nombre d’itérations
Auto-reverse

9. DEMO
Une interface en mouvement

10. Formulaire
Nouveau type d’éléments css
Validation
:invalid
Automatique suivant le type
(email, url, etc.) [Required]
Par expression régulière
(pattern property) Javascript
required property
DataForm
Autofocus
Placehoder (filigrane)

11. Requêtes asynchrones
XMLHttpRequest2
Cross-domain supporté ! (CORS)
Uploading/extraction de données binaires
Evènement de la progression de l’envois de données
Type de réponses possible : text, tableau, blob ou
document.

12. Drag’n drop
A travers le document Hors navigateur
draggable="true" Drag-in
evènements Drag-out
DataTransfer object

13. Canvas
Zone de dessin Transformation
path, boxes, circles, fill possible
Style, lineTo, bezierCu Animations :
rveTo… Effacer
getContext("2D") Enregistrer l’état
Accélération Dessiner
graphique Restaurer l’état

14. Stockage
Web Storage Web SQL Database
Persistant entre les Basé autour de SQLite
pages pour le domaine openDatabase
localStorage ou transaction
sessionStorage executeSql

15. Medias
AcviveX nécéssaire en Audio
HTML4 AAC, MP3, Ogg Vorbis
Silverlight/Flash Vidéo
Ogg Theora, WebM and
MPEG-4

16. DEMO
Un formulaire comme on les aime

17. Les outils
Button Maker When can I use
CSS Border Radius
CSS3 Gradient Generator Modernizr
CSS3, please! HTML5 Revision
CSSDesk Tracker
Font-face Generator
CSS3 Selectors Test
Font-face Generator
The Matrix Construction
Set
…