Upload
microsoft-developpeurs
View
644
Download
0
Embed Size (px)
DESCRIPTION
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.
Citation preview
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