palais des congrès Paris
7, 8 et 9 février 2012
Mardi 7 février Vincent PETETINConsultant .NETBewise
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