palais des congrès Paris

7, 8 et 9 février 2012

Mardi 7 février Vincent PETETINConsultant .NETBewise

vincent.petetin@bewise.fr

HTML 5 et CSS3, créez, animez et enrichissez vos sites Web

Présentation de BEWISE

« Pure Player » Microsoft depuis 1999Diffuse une expertise novatriceContribue à l’émergence de logiciels performants et ergonomiques

Ouverture d’une agence sur Paris

Retrouvez-nous sur le stand 47

HTML 5 ?Trop vague pour avoir une définition précise

HTML 5 ≈ HTML + CSS3 + JavaScript

Les auteursW3C formalise et valideWHATWG implémente et propose

Les acteursMicrosoft, Apple, Mozilla, Google… mais surtout Nous !

Le butUnifier le comportement des navigateursEvolution du langage qui facilite le développement d’application Web

Etat des lieuxSpécifications finalisées en 2014L’implémentation à déjà commencé !

Définition

Anatomie / Agenda

CSS@font-face Web fonts, calc() as CSS unit value, Generated content, Gradients, Grid Layout , Hyphenation , inline-block, min/max-width/height, position:fixed, Regions, Table display, 3D Transforms, Animation, Background-image options, Border images, Border-radius (rounded corners), Box-shadow, Box-sizing, Colors, Media Queries, Multiple backgrounds, Multiple column layout, object-fit/object-position, Opacity, selectors, Text-overflow, Text-shadow, Transforms, Transitions, Word-wrap, Flexible Box Layout Module, Font feature settings, rem (root em) units, TTF/OTF - TrueType and OpenType font support, ...

CSS@font-face Web fonts, calc() as CSS unit value, Generated content, Gradients, Grid Layout , Hyphenation , inline-block, min/max-width/height, position:fixed, Regions, Table display, 3D Transforms, Animation, Background-image options, Border images, Border-radius (rounded corners), Box-shadow, Box-sizing, Colors, Media Queries, Multiple backgrounds, Multiple column layout, object-fit/object-position, Opacity, selectors, Text-overflow, Text-shadow, Transforms, Transitions, Word-wrap, Flexible Box Layout Module, Font feature settings, rem (root em) units, TTF/OTF - TrueType and OpenType font support, …

HTMLAudio element, Canvas, contenteditable attribute, Datalist element, dataset & data-* attributes, Details & Summary elements, Drag and Drop, Form validation, HTML5 form features, New semantic elements, Offline web applications, Progress & Meter, Ruby annotation, Session history management, Text API for Canvas, Toolbar/context menu, Video element, WebGL - 3D Canvas graphics, …

HTMLAudio element, Canvas, contenteditable attribute, Datalist element, dataset & data-* attributes, Details & Summary elements, Drag and Drop, Form validation, HTML5 form features, New semantic elements, Offline web applications, Progress & Meter, Ruby annotation, Session history management, Text API for Canvas, Toolbar/context menu, Video element, WebGL - 3D Canvas graphics, ...

JavascriptAudio API, Blob URLs, Cross-document messaging, Cross-Origin Resource Sharing, Device Orientation events, File API, FileReader API, Filesystem & FileWriter API, Geolocation, Hashchange event, IndexedDB, JSON parsing, matchesSelector, matchMedia, Navigation Timing API, requestAnimationFrame, Server-sent DOM vents, Shared Web Workers, Typed Arrays, Web Notifications, Web Sockets, Web Storage - name/value pairs, Web Workers, Full Screen API, Stream API, Web SQL Database, …

JavascriptAudio API, Blob URLs, Cross-document messaging, Cross-Origin Resource Sharing, Device Orientation events, File API, FileReader API, Filesystem & FileWriter API, Geolocation, Hashchange event, IndexedDB, JSON parsing, matchesSelector, matchMedia, Navigation Timing API, requestAnimationFrame, Server-sent DOM vents, Shared Web Workers, Typed Arrays, Web Notifications, Web Sockets, Web Storage - name/value pairs, Web Workers, Full Screen API, Stream API, Web SQL Database, …

Les autresSVG, async attribute for external scripts, classList (DOMTokenList ), Data URLs, defer attribute for external scripts, ECMAScript 5 Strict Mode, MathML, PNG alpha transparency, Touch events, WAI-ARIA Accessibility features, XHTML served as application/xhtml+xml, XMLHttpRequest 2, …

Les autresSVG, async attribute for external scripts, classList (DOMTokenList ), Data URLs, defer attribute for external scripts, ECMAScript 5 Strict Mode, MathML, PNG alpha transparency, Touch events, WAI-ARIA Accessibility features, XHTML served as application/xhtml+xml, XMLHttpRequest 2, …

DEMO

Un peu de cosmétique !

Transformations

Scale(0.5, 0.5)

Rotate(45deg)

Translate(-300px, -300px)

skew(-10deg, 0deg)

Matrix(…)

Transitions & animations

Transition Délai DuréePropriétésTiming function (easing function)

Animation Etat de départ Etat d’arrivé Etats intermédiaires Délai Durée Timing function Nombre d’itérations Auto-reverse

DEMO

Une interface en mouvement

Formulaire

Nouveau type d’élémentsValidation

Automatique suivant le type (email, url, etc.) Par expression régulière (pattern property)required property

AutofocusPlacehoder (filigrane)

css :invalid[Required]

JavascriptDataForm

Requêtes asynchrones

XMLHttpRequest2Cross-domain supporté ! (CORS)Uploading/extraction de données binairesEvènement de la progression de l’envois de donnéesType de réponses possible : text, tableau, blob ou document.

Drag’n drop

A travers le document

draggable="true" evènementsDataTransfer object

Hors navigateurDrag-inDrag-out

Canvas

Zone de dessinpath, boxes, circles, fillStyle, lineTo, bezierCurveTo…getContext("2D") Accélération graphique

Transformation possibleAnimations :

EffacerEnregistrer l’étatDessinerRestaurer l’état

Stockage

Web StoragePersistant entre les pages pour le domainelocalStorage ou sessionStorage

Web SQL DatabaseBasé autour de SQLiteopenDatabase transaction executeSql

Medias

AcviveX nécéssaire en HTML4Silverlight/Flash

AudioAAC, MP3, Ogg Vorbis

VidéoOgg Theora, WebM and MPEG-4

DEMO

Un formulaire comme on les aime

Les outils

Button MakerCSS Border RadiusCSS3 Gradient GeneratorCSS3, please!CSSDeskFont-face GeneratorCSS3 Selectors TestFont-face GeneratorThe Matrix Construction Set…

When can I useModernizrHTML5 Revision Tracker