https://cdn.v1v2.io/_next/static/chunks/pages/blog/livre-html5-54b74b3a289c6127.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4240],{34652:(e,s,r)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/livre-html5",function(){return r(16876)}])},46833:(e,s,r)=>{"use strict";r.d(s,{A:()=>l});var t=r(74848),n=r(21055),i=r(53924);let l=e=>{let{src:s,alt:r,...l}=e;return(0,t.jsx)(n.E9,{src:s,alt:r,center:!0,my:i.vU,...l})}},77083:(e,s,r)=>{"use strict";r.d(s,{A:()=>B});var t=r(74848),n=r(45703),i=r.n(n),l=r(79237),a=r(96540),o=r(62539),c=r(93809),d=r(41662),u=r(89260),h=r(95643),p=r(48996),x=r(48706),A=r(11692),m=r(50303),g=r(14320),j=r(74892),v=r(56972),b=r(20053),f=r(86715),w=r(96452),C=r(39605),I=r(73374),z=r(49752),y=r(91588),E=r(15741),q=r(79167),L=r(67764);let P=[{path:E.gs,matchRule:e=>e.startsWith("/blog"),label:"Blog & Projects",icon:w.EmU,iconColor:q.K2},{path:E.qu,label:"Resume",icon:I.bGE,iconColor:q.RP}],D=e=>{let{path:s,label:r,icon:n,iconColor:i,closeModal:l,matchRule:a=null}=e,{pathname:d}=(0,f.useRouter)(),u=a?a(d):d.startsWith(s);return(0,t.jsx)(o.az,{_hover:{"& svg":{color:i}},children:(0,t.jsx)(v.z9,{pl:5,className:(0,b.A)(u&&"active-nav"),justifyContent:"left",variant:"ghost",href:s,onClick:l,size:"lg",w:"full",leftIcon:(0,t.jsx)(c.I,{as:n,boxSize:4,mr:1,color:u&&i,transitionProperty:"color",transitionDuration:"var(--chakra-transition-duration-normal)"}),children:r},s)},s)},M=e=>{let{closeModal:s}=e;return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(d.c,{px:2,children:(0,t.jsx)(j.YC,{spacing:0,children:P.map(e=>(0,t.jsx)(D,{closeModal:s,...e},e.path))})}),(0,t.jsx)(u.j,{pt:0,justifyContent:"center",children:(0,t.jsx)(h.$,{onClick:s,children:"Close"})})]})},k=e=>{let{toggleColorMode:s}=(0,p.G6)(),r=(0,p.dU)(z.vVA,z.q9U),n=(0,p.dU)("Dark mode","Light mode");return(0,t.jsx)(x.K,{variant:"ghost","aria-label":n,icon:(0,t.jsx)(c.I,{as:r,boxSize:5}),onClick:s,...e})},Q=e=>{let{path:s,label:r,icon:n,iconColor:i,matchRule:l=null}=e,{pathname:a}=(0,f.useRouter)(),d=l?l(a):a.startsWith(s);return(0,t.jsx)(o.az,{_hover:{"& svg":{color:i}},children:(0,t.jsxs)(v.z9,{className:(0,b.A)(d&&"active-nav"),variant:"ghost",href:s,children:[(0,t.jsx)(c.I,{sx:(0,L.x)("".concat(830,"px")),as:n,boxSize:3.5,mr:2,color:d&&i,transitionProperty:"color",transitionDuration:"var(--chakra-transition-duration-normal)"}),r]})})},S=(0,a.memo)(e=>(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(o.az,{className:"header",shadow:"md",py:2,pos:"fixed",top:0,w:"full",zIndex:10,sx:{"@media print":{display:"none"}},...e,children:(0,t.jsx)(l.m,{maxW:"container.lg",children:(0,t.jsxs)(A.s,{align:"center",justify:"space-between",children:[(0,t.jsx)(v.N_,{href:E.Pm,mr:2,children:(0,t.jsx)(o.az,{sx:{"@media screen and (max-width: 310px)":{width:"26px",overflowX:"hidden"}},children:(0,t.jsx)(C.A,{className:"body-color",width:"110px",title:"V1V2"})})}),(0,t.jsx)(m.z,{sx:(0,L.x)("".concat(730,"px")),spacing:.5,children:P.map(e=>(0,t.jsx)(Q,{...e},e.path))}),(0,t.jsxs)(m.z,{children:[(0,t.jsx)(g.N,{href:"https://x.com/verekia",isExternal:!0,sx:(0,L.x)("230px"),children:(0,t.jsx)(x.K,{tabIndex:-1,icon:(0,t.jsx)(c.I,{as:w.feZ,boxSize:6,fillOpacity:.9}),variant:"ghost","aria-label":"GitHub logo"})}),(0,t.jsx)(g.N,{href:E.xD,isExternal:!0,sx:(0,L.x)("356px"),children:(0,t.jsx)(x.K,{tabIndex:-1,icon:(0,t.jsx)(c.I,{as:w.hL4,boxSize:6,fillOpacity:.9}),variant:"ghost","aria-label":"GitHub logo"})}),(0,t.jsx)(k,{}),(0,t.jsx)(j.g6,{modalProps:{preserveScrollBarGap:!0,isCentered:!0},contentProps:{width:"auto"},trigger:e=>(0,t.jsx)(x.K,{"aria-label":"Menu",variant:"ghost",icon:(0,t.jsx)(c.I,{as:y.vIB,boxSize:6}),onClick:e,sx:(0,L.u)("".concat(731,"px"))}),children:e=>(0,t.jsx)(M,{closeModal:e})})]})]})})}),(0,t.jsx)(o.az,{h:14,sx:{"@media print":{display:"none"}}})]})),H={a:{textDecor:"underline"}},U=e=>{let{children:s,maxW:r,...n}=e;return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(i(),{id:"75b87823bb2211a2",children:"html{overflow-y:scroll}"}),(0,t.jsx)(S,{mb:5}),(0,t.jsx)(l.m,{maxW:null!=r?r:"container.lg",pb:"200px",sx:H,...n,children:s})]})};var _=r(53924);let B=e=>{let{children:s}=e;return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(i(),{id:"e3d2254df3ae0ad9",children:"article header>:last-child{margin-bottom:0}article footer>:first-child{margin-top:0}article section>:first-child{margin-top:0}article section>:last-child{margin-bottom:0}"}),(0,t.jsx)(U,{as:"article",maxW:"730px",sx:{fontSize:_.fQ,lineHeight:_.UH,h1:{fontWeight:600},h2:{textAlign:"center",fontSize:24,mt:12,mb:6,fontWeight:600},h3:{fontSize:18,mt:10,mb:4,fontWeight:600},h4:{fontSize:16,my:6,mb:4},"ul, ol":{my:_.vU,ml:7},"ul > ul, ol > ol":{my:1,ml:5},"ul li, ol li":{pl:1},"p + ul":{mt:3},"ul + p":{mt:3},"p, ul":{fontWeight:_.Im},"b, strong":{fontWeight:_.uf},".chakra-wrap__list":{m:0},".chakra-wrap__listitem":{pl:0},"> header":{mb:_.rf},"> footer":{mt:_.rf},"> section":{my:_.rf},"> section > section":{my:_.vU},"> section > section > section":{my:_.vU}

1,".deprecation-warning":{bg:"orange.100",[(0,_.XT)()]:{bg:"#735016"}},"@media print":{mb:0}},children:s})]})}},21055:(e,s,r)=>{"use strict";r.d(s,{A:()=>c.N_,Cy:()=>a.C,E9:()=>g,H2:()=>x,H3:()=>A,H4:()=>m,L9:()=>h,Li:()=>o.ck,P:()=>l.E,Ul:()=>o.Xy,nC:()=>p,nz:()=>j,uQ:()=>v});var t=r(74848),n=r(62539),i=r(91311),l=r(27821),a=r(29818),o=r(55462),c=r(56972),d=r(29965),u=r.n(d);let h=e=>(0,t.jsx)(n.az,{as:"span",...e}),p=e=>(0,t.jsx)(n.az,{as:"aside",...e}),x=e=>(0,t.jsx)(i.D,{as:"h2",...e}),A=e=>(0,t.jsx)(i.D,{as:"h3",...e}),m=e=>(0,t.jsx)(i.D,{as:"h4",...e}),g=e=>{let{alt:s,src:r,borderRadius:i=5,style:l,center:a,imageProps:o,...c}=e;return(0,t.jsx)(n.az,{...a?{display:"flex",justifyContent:"center",w:"full"}:{},...c,children:(0,t.jsx)(u(),{alt:s,style:{borderRadius:i,...l},src:r,quality:100,...o})})},j=e=>{let{children:s,...r}=e;return(0,t.jsx)(l.E,{mb:3,...r,children:s})},v=e=>{let{children:s,...r}=e;return(0,t.jsx)(n.az,{as:"ul",mb:"var(--chakra-space-3) !important",...r,children:s})}},85044:(e,s,r)=>{"use strict";r.d(s,{A:()=>o});var t=r(74848),n=r(91311),i=r(49497),l=r(21055),a=r(67764);let o=e=>{let{children:s,headTitle:r,icon:o,...c}=e;return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(i.A,{title:null!=r?r:String(s)}),(0,t.jsxs)(n.D,{as:"h1",textAlign:"center",fontSize:"3xl",my:8,...c,children:[o&&(0,t.jsx)(l.L9,{sx:(0,a.u)("".concat(830,"px")),children:o}),s]})]})}},16876:(e,s,r)=>{"use strict";r.r(s),r.d(s,{default:()=>u});var t=r(74848),n=r(46833),i=r(77083),l=r(21055),a=r(85044);let o={src:"https://cdn.v1v2.io/_next/static/media/livre-html5.cbf0d8c4.jpg",height:857,width:600,blurDataURL:"data:image/jpeg;base64,/9j/2wBDAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/v/2wBDAQoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/v/wgARCAAIAAYDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAX/xAAVAQEBAAAAAAAAAAAAAAAAAAAEBf/aAAwDAQACEAMQAAAApimP/8QAGxAAAwACAwAAAAAAAAAAAAAAAgMEAAEGIjL/2gAIAQEAAT8Ao5I0JJqVCBMb6Vphdc//xAAbEQACAgMBAAAAAAAAAAAAAAABAgMRAAQSQf/aAAgBAgEBPwDWjQo/S9VI4sk+HP/EABsRAAICAwEAAAAAAAAAAAAAAAECERIAAwRB/9oACAEDAQE/AOpmDpU1nWhgAejP/9k=",blurWidth:6,blurHeight:8};var c=r(53924);let d=()=>(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(a.A,{mb:c.vU,children:"HTML5 : De la page web \xe0 l'application web, livre \xe0 para\xeetre chez Dunod"}),(0,t.jsx)(n.A,{src:o,alt:"Livre sur HTML5",mb:c.rf,sx:{"& > span ":{bgColor:"white !important",border:"1px solid #ccc !important"}},imageProps:{priority:!0,width:300,height:428}}),(0,t.jsx)("p",{children:"Bonjour \xe0 tous chers lecteurs,"}),(0,t.jsxs)("p",{children:["Ces 3 derniers mois ont \xe9t\xe9 particuli\xe8rement intensifs, puisque j'ai co-\xe9crit un livre nomm\xe9 \"HTML5 : De la page web \xe0 l'application web\" avec mon confr\xe8re blogueur de l'HTML5"," ",(0,t.jsx)(l.A,{isExternal:!0,href:"http://twitter.com/theystolemynick",children:"Jean-Pierre Vincent"}),", cr\xe9ateur et animateur de"," ",(0,t.jsx)(l.A,{isExternal:!0,href:"http://braincracking.org",children:"braincracking.org"}),". Ce livre est \xe9dit\xe9 par"," ",(0,t.jsx)(l.A,{isExternal:!0,href:"http://www.dunod.com/",children:"Dunod"})," ","et devrait \xeatre commercialis\xe9 courant juillet."]}),(0,t.jsxs)("p",{children:["Notre livre est pr\xe9fac\xe9 par"," ",(0,t.jsx)(l.A,{isExternal:!0,href:"http://twitter.com/paul_irish",children:"Paul Irish"})," ","de Google, travaillant sur Chrome, \xe9galement cr\xe9ateur de Modernizr, d'HTML5 Boilerplate et membre de l'\xe9quipe jQuery (c'est la grande classe donc !). Voici le programme d\xe9taill\xe9 de ce qui vous attend dans ce livre tr\xe8s complet de 250 pages riches en contenu (et en humour) :"]}),(0,t.jsxs)("p",{children:["L'introduction r\xe9sume le cadre dans lequel \xe9volue HTML5 et retrace son"," ",(0,t.jsx)("strong",{children:"contexte historique"}),". Nous abordons \xe9galement les concepts d'",(0,t.jsx)("strong",{children:"am\xe9lioration progressive"})," appliqu\xe9e \xe0 HTML5 et d\xe9battons au sujet des"," ",(0,t.jsx)("strong",{children:"interfaces natives"}),"."]}),(0,t.jsx)("p",{children:"La premi\xe8re partie couvre \xe0 peu pr\xe8s toutes les n

1ouveaut\xe9s qui se passent du c\xf4t\xe9 du code HTML :"}),(0,t.jsxs)("ul",{children:[(0,t.jsxs)("li",{children:["Le second chapitre vous fera donc d\xe9couvrir la ",(0,t.jsx)("strong",{children:"nouvelle syntaxe"})," ultra all\xe9g\xe9e et laxiste d'HTML5, ainsi que les nombreux ajouts, suppressions et changements des"," ",(0,t.jsx)("strong",{children:"balises"})," HTML. Vous d\xe9couvrirez \xe9galement la notion de"," ",(0,t.jsx)("strong",{children:"plan de page"}),"."]}),(0,t.jsxs)("li",{children:["Le chapitre 3 va d\xe9poussi\xe9rer nos vieux ",(0,t.jsx)("strong",{children:"formulaires"})," et leur rajouter une couche de modernit\xe9 avec la ",(0,t.jsx)("strong",{children:"validation natives"})," des donn\xe9es, des nouvelles interfaces, et de tr\xe8s nombreuses autres nouveaut\xe9s qui vont rendre vos formulaires plus interactifs et intuitifs."]}),(0,t.jsxs)("li",{children:["Le chapitre 4 aborde ",(0,t.jsx)("strong",{children:"Microdata"}),", qui va vous permettre d'enrichir la"," ",(0,t.jsx)("strong",{children:"s\xe9mantique "}),"de vos pages et de faire appara\xeetre plein de belles choses aux c\xf4t\xe9s du titre de votre site lors d'une recherche Google."]}),(0,t.jsxs)("li",{children:["Le chapitre 5 vous transformera en expert en ",(0,t.jsx)("strong",{children:"accessibilit\xe9 "}),"gr\xe2ce \xe0"," ",(0,t.jsx)("strong",{children:"ARIA"}),". Vous y verrez qu'en tr\xe8s peu d'efforts vous pourrez rendre votre site bien plus accessible."]})]}),(0,t.jsx)("p",{children:"La seconde partie se focalise sur les nouvelles APIs JavaScript :"}),(0,t.jsxs)("ul",{children:[(0,t.jsxs)("li",{children:["Le chapitre 6 vous plongera dans le monde impitoyable des APIs ",(0,t.jsx)("strong",{children:"audio"})," et"," ",(0,t.jsx)("strong",{children:"vid\xe9o"}),". Des explications claires vous feront enfin comprendre les probl\xe9matiques de ",(0,t.jsx)("strong",{children:"codecs "}),"et de ",(0,t.jsx)("strong",{children:"formats"}),". Une fois cette barri\xe8re franchie vous verrez que ces nouvelles APIs sont extr\xeamement prometteuses."]}),(0,t.jsxs)("li",{children:["Le chapitre 7 sera l'occasion de dessiner tout un tas de choses en 2D dans une balise"," ",(0,t.jsx)("strong",{children:"canvas"}),". Vous r\xe9aliserez des filtres Photoshop-like, et serez sensibilis\xe9s aux probl\xe9matiques du monde du jeu vid\xe9o et des animations."]}),(0,t.jsxs)("li",{children:["Le chapitre 8 est un m\xe9lange d'API ",(0,t.jsx)("strong",{children:"Drag and Drop"}),", de"," ",(0,t.jsx)("strong",{children:"File API"})," et d'",(0,t.jsx)("strong",{children:"AJAX2"}),". Il s'agit d'un ensemble d'APIs particuli\xe8rement adapt\xe9es \xe0 l'enrichissement d'un formulaire d'upload de fichiers tel que celui que nous avons avons r\xe9alis\xe9 en d\xe9monstration."]}),(0,t.jsxs)("li",{children:["Le chapitre 9 vous permettra de mettre en place la ",(0,t.jsx)("strong",{children:"g\xe9olocalisation "}),"HTML5 ainsi que l'",(0,t.jsx)("strong",{children:"API Google Maps "}),"pour r\xe9aliser une application absolument vitale en randonn\xe9e !"]}),(0,t.jsxs)("li",{children:["Le chapitre 10 permettra \xe0 votre application de fonctionner",(0,t.jsx)("strong",{children:" hors-ligne"}),", en exploitant les capacit\xe9s de ",(0,t.jsx)("strong",{children:"l'AppCache "}),"ainsi que de l'API"," ",(0,t.jsx)("strong",{children:"Web Storage"}),". Cette probl\xe9matique est particuli\xe8rement pr\xe9sente dans le domaine de la mobilit\xe9 \xe0 cause des d\xe9connexions fr\xe9quentes."]}),(0,t.jsxs)("li",{children:["Le chapitre 11 mettra en place la v\xe9ritable r\xe9volution que sont les"," ",(0,t.jsx)("strong",{children:"Web Sockets"})," ainsi que les ",(0,t.jsx)("strong",{children:"Server Sent Events"})," pour construire des applications ultra r\xe9actives."]})]}),(0,t.jsxs)("p",{children:["Enfin, la conclusion vous pr\xe9sentera toutes les autres APIs que vous pourrez encore explorer si vous souhaitez aller plus loin, abordera le CSS3, et les diff\xe9rents outils \xe0 utiliser pour mettre en production un projet HTML5 d\xe8s maintenant. Nous vous fournissons \xe9galement un ensemble de ",(0,t.jsx)("strong",{children:"fiches pratiques"})," contenant de nombreux extraits de code pertinents qui vous feront gagner un temps pr\xe9cieux en cas d'oubli de telle ou telle m\xe9thode."]}),(0,t.jsx)("p",{children:"Cet ouvrage s'efforce de couvrir, en plus du domaine technique, des probl\xe9matiques importantes telles que le r\xe9f\xe9rencement, la maintenabilit\xe9, l'accessibilit\xe9, la mobilit\xe9, le support des navigateurs ainsi que les diff\xe9rentes m\xe9thodes de contournement pour faire fonctionner tout \xe7a sous IE6, 7, 8 lorsque c'est possible."}),(0,t.jsx)("p",{children:"Nous y avons mis notre coeur et notre passion pour l'HTML5, et esp\xe9rons qu'en plus d'apprendre plein de choses, vous passerez de tr\xe8s bons moments en lisant notre ouvrage."}),(0,t.jsxs)("p",{children:["On se retrouve donc chez votre libraire en ",(0,t.jsx)("strong",{children:"juillet"})," pour partir ensemble \xe0 la conqu\xeate des applications web de demain."]})]});d.wrappers=e=>(0,t.jsx)(i.A,{children:e});let u=d},67764:(e,s,r)=>{"use strict";r.d(s,{u:()=>n,x:()=>t});let t=e=>

1({["@media screen and (max-width: ".concat(e,")")]:{display:"none"}}),n=e=>({["@media screen and (min-width: ".concat(e,")")]:{display:"none"}})}},e=>{var s=s=>e(e.s=s);e.O(0,[8916,5422,6379,7351,8593,1940,2503,636,6593,8792],()=>s(34652)),_N_E=e.O()}]);