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

738 views
651 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
738
On SlideShare
0
From Embeds
0
Number of Embeds
52
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Tout dépend de votre interlocuteurentre développeurs : canvas, File API, async, geolocation, …pour les designers : animation, transition, gradient, …W3C: World Wide WebWHAT WG: Web Hypertext Application TechnologyWorking Group
  • Cross Origin Resource Sharing (CORS) Access-Control-Allow-Origin: *Access-Control-Allow-Origin: http://example.com
  • Exemple : Eye-candycanvasButton Maker : http://css-tricks.com/examples/ButtonMaker/CSS Border Radius : http://border-radius.com/CSS3 Gradient Generator: http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.htmlCSS3, please! (générateur en direct)CSSDesk : http://cssdesk.com/font-face Generator : http://www.fontsquirrel.com/fontface/generatorCSS3 Selectors Test : http://tools.css3.info/selectors-test/test.htmlThe Matrix Construction Set : http://www.useragentman.com/matrix/Whencan I use… : http://caniuse.com/Modernizr : http://www.modernizr.com/HTML5 RevisionTracker : http://html5.org/tools/web-apps-tracker
  • HTML 5 et CSS3, créez, animez et enrichissez vos sites Web

    1. 1. palais descongrèsParis7, 8 et 9février 2012
    2. 2. HTML 5 et CSS3, créez,animez et enrichissez vossites WebMardi 7 févrierVincent PETETINConsultant .NETBewisevincent.petetin@bewise.fr
    3. 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. 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. 5. Anatomie / Agenda Javascript HTML CSSautres LesAudio API, Blob URLs, for contenteditable classListAudio async attribute Cross-document@font-face Web fonts, calc() external scripts, attribute,SVG, element, Canvas, as CSS unit value, Generatedcontent, Gradients, Grid Layoutdatasetattributes, Detailsmessaging, Cross-Origin Resource Sharing,inline-block,Datalist element, element, Hyphenation , Deviceattribute, 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, Filesystemattributes, elements, Background-image options,external scripts, ECMAScript 5 Strict Mode,3D Transforms, Geolocation, Hashchange& FileWriterHTML5 form features, New semanticDrop, FormAPI,validation, validation, HTML5 form features, NewBorder IndexedDB, JSON (rounded corners),events,Mode, images, Border-radius webevent, MathML, PNGtransparency, Touch Box-MathML, PNG alphaOffline transparency, Touch alphaelements, Offline web Media Queries, Multiplesemantic elements, applications, Progress &shadow, Box-sizing, Colors, matchMedia, Navigationparsing, WAI-ARIA Accessibility features, XHTML as matchesSelector,WAI-ARIA Accessibility& Sessionobject-fit/object-events,RubyMultiple column layout,Rubyapplications, Progress features, historybackgrounds, annotation, Meter, XHTML servedMeter, API, requestAnimationFrame, Server-sent DOMTiming as application/xhtml+xml, XMLHttpRequestserved Opacity,Text API XMLHttpRequest 2, … APIapplication/xhtml+xml, for Canvas, Toolbar/contextposition, selectors, Text-overflow, Text-shadow,management,Web Workers, management, Textannotation, Session history Typed Arrays, Webvents, Shared2, Canvas, Toolbar/context menu, Canvasfor… VideoWeb Sockets, Web - 3DVideoTransforms, Transitions, Word-wrap, Flexible Box Layoutmenu, element, WebGL Storage - name/valueNotifications,feature settings, rem (root em) units, TTF/OTFModule, Fontpairs, Web...- TrueType Workers, Full Screen graphics, …API, Webgraphics, and OpenType font support, …element, WebGL - 3D Canvas API,... StreamSQL Database, …
    6. 6. DEMOUn peu de cosmétique !
    7. 7. Transformations Scale(0.5, 0.5) skew(- 10deg, 0deg)Translate(-300px, -300px)
    8. 8. Transitions & animationsTransition 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. 9. DEMOUne interface en mouvement
    10. 10. FormulaireNouveau type d’éléments cssValidation :invalid Automatique suivant le type (email, url, etc.) [Required] Par expression régulière (pattern property) Javascript required property DataFormAutofocusPlacehoder (filigrane)
    11. 11. Requêtes asynchronesXMLHttpRequest2 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. 12. Drag’n dropA travers le document Hors navigateur draggable="true" Drag-in evènements Drag-out DataTransfer object
    13. 13. CanvasZone de dessin Transformationpath, boxes, circles, fill possibleStyle, lineTo, bezierCu Animations :rveTo… EffacergetContext("2D") Enregistrer l’étatAccélération Dessinergraphique Restaurer l’état
    14. 14. StockageWeb Storage Web SQL Database Persistant entre les Basé autour de SQLite pages pour le domaine openDatabase localStorage ou transaction sessionStorage executeSql
    15. 15. MediasAcviveX nécéssaire en AudioHTML4 AAC, MP3, Ogg VorbisSilverlight/Flash Vidéo Ogg Theora, WebM and MPEG-4
    16. 16. DEMOUn formulaire comme on les aime
    17. 17. Les outilsButton Maker When can I useCSS Border RadiusCSS3 Gradient Generator ModernizrCSS3, please! HTML5 RevisionCSSDesk TrackerFont-face GeneratorCSS3 Selectors TestFont-face GeneratorThe Matrix ConstructionSet…

    ×