https://cdn.v1v2.io/_next/static/chunks/pages/blog/logo-html5-d03e75bb275eaa5d.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1265],{46440:(e,t,i)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/logo-html5",function(){return i(29275)}])},34897:(e,t,i)=>{"use strict";i.d(t,{A:()=>s});let s={src:"https://cdn.v1v2.io/_next/static/media/logo-html5-officiel-w3c.41c0ef9b.png",height:512,width:512,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAY1BMVEX6wqnoopDjQBbjNxbrXzTkSB7uUSW5OS7kSCHnUyrmRRvmPhPmTifkPhfoShblRhTjPxTorp3lbU3ps6Xzhlrp3tv4qIb1Yz7pysLqlX7+eUP3VCb93c7scVH/6d3pqJb1bjzqveS8AAAAFnRSTlP+/v0X/pfmBUT1Z1N7K/3g4P3+/v7+Hh2/LQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAERJREFUeJwFwYUBwDAMAzAXk+K4NPz/ykmIp5Q5nxG+ihcYHuE+eilfAOu2AZqRnFj3Ryco1xZcToFs7WVYArGZJ8P0A32HA05qrfIZAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:8}},46833:(e,t,i)=>{"use strict";i.d(t,{A:()=>l});var s=i(74848),r=i(21055),n=i(53924);let l=e=>{let{src:t,alt:i,...l}=e;return(0,s.jsx)(r.E9,{src:t,alt:i,center:!0,my:n.vU,...l})}},77083:(e,t,i)=>{"use strict";i.d(t,{A:()=>M});var s=i(74848),r=i(45703),n=i.n(r),l=i(79237),a=i(96540),o=i(62539),c=i(93809),d=i(41662),h=i(89260),A=i(95643),u=i(48996),x=i(48706),p=i(11692),m=i(50303),g=i(14320),j=i(74892),b=i(56972),f=i(20053),v=i(86715),w=i(96452),E=i(39605),z=i(73374),C=i(49752),y=i(91588),S=i(15741),L=i(79167),U=i(67764);let P=[{path:S.gs,matchRule:e=>e.startsWith("/blog"),label:"Blog & Projects",icon:w.EmU,iconColor:L.K2},{path:S.qu,label:"Resume",icon:z.bGE,iconColor:L.RP}],k=e=>{let{path:t,label:i,icon:r,iconColor:n,closeModal:l,matchRule:a=null}=e,{pathname:d}=(0,v.useRouter)(),h=a?a(d):d.startsWith(t);return(0,s.jsx)(o.az,{_hover:{"& svg":{color:n}},children:(0,s.jsx)(b.z9,{pl:5,className:(0,f.A)(h&&"active-nav"),justifyContent:"left",variant:"ghost",href:t,onClick:l,size:"lg",w:"full",leftIcon:(0,s.jsx)(c.I,{as:r,boxSize:4,mr:1,color:h&&n,transitionProperty:"color",transitionDuration:"var(--chakra-transition-duration-normal)"}),children:i},t)},t)},T=e=>{let{closeModal:t}=e;return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(d.c,{px:2,children:(0,s.jsx)(j.YC,{spacing:0,children:P.map(e=>(0,s.jsx)(k,{closeModal:t,...e},e.path))})}),(0,s.jsx)(h.j,{pt:0,justifyContent:"center",children:(0,s.jsx)(A.$,{onClick:t,children:"Close"})})]})},H=e=>{let{toggleColorMode:t}=(0,u.G6)(),i=(0,u.dU)(C.vVA,C.q9U),r=(0,u.dU)("Dark mode","Light mode");return(0,s.jsx)(x.K,{variant:"ghost","aria-label":r,icon:(0,s.jsx)(c.I,{as:i,boxSize:5}),onClick:t,...e})},I=e=>{let{path:t,label:i,icon:r,iconColor:n,matchRule:l=null}=e,{pathname:a}=(0,v.useRouter)(),d=l?l(a):a.startsWith(t);return(0,s.jsx)(o.az,{_hover:{"& svg":{color:n}},children:(0,s.jsxs)(b.z9,{className:(0,f.A)(d&&"active-nav"),variant:"ghost",href:t,children:[(0,s.jsx)(c.I,{sx:(0,U.x)("".concat(830,"px")),as:r,boxSize:3.5,mr:2,color:d&&n,transitionProperty:"color",transitionDuration:"var(--chakra-transition-duration-normal)"}),i]})})},R=(0,a.memo)(e=>(0,s.jsxs)(s.Fragment,{children:[(0,s.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,s.jsx)(l.m,{maxW:"container.lg",children:(0,s.jsxs)(p.s,{align:"center",justify:"space-between",children:[(0,s.jsx)(b.N_,{href:S.Pm,mr:2,children:(0,s.jsx)(o.az,{sx:{"@media screen and (max-width: 310px)":{width:"26px",overflowX:"hidden"}},children:(0,s.jsx)(E.A,{className:"body-color",width:"110px",title:"V1V2"})})}),(0,s.jsx)(m.z,{sx:(0,U.x)("".concat(730,"px")),spacing:.5,children:P.map(e=>(0,s.jsx)(I,{...e},e.path))}),(0,s.jsxs)(m.z,{children:[(0,s.jsx)(g.N,{href:"https://x.com/verekia",isExternal:!0,sx:(0,U.x)("230px"),children:(0,s.jsx)(x.K,{tabIndex:-1,icon:(0,s.jsx)(c.I,{as:w.feZ,boxSize:6,fillOpacity:.9}),variant:"ghost","aria-label":"GitHub logo"})}),(0,s.jsx)(g.N,{href:S.xD,isExternal:!0,sx:(0,U.x)("356px"),children:(0,s.jsx)(x.K,{tabIndex:-1,icon:(0,s.jsx)(c.I,{as:w.hL4,boxSize:6,fillOpacity:.9}),variant:"ghost","aria-label":"GitHub logo"})}),(0,s.jsx)(H,{}),(0,s.jsx)(j.g6,{modalProps:{preserveScrollBarGap:!0,isCentered:!0},contentProps:{width:"auto"},trigger:e=>(0,s.jsx)(x.K,{"aria-label":"Menu",variant:"ghost",icon:(0,s.jsx)(c.I,{as:y.vIB,boxSize:6}),onClick:e,sx:(0,U.u)("".concat(731,"px"))}),children:e=>(0,s.jsx)(T,{closeModal:e})})]})]})})}),(0,s.jsx)(o.az,{h:14,sx:{"@media print":{display:"none"}}})]})),_={a:{textDecor:"underline"}},q=e=>{let{children:t,maxW:i,...r}=e;return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n(),{id:"75b87823bb2211a2",children:"html{overflow-y:scroll}"}),(0,s.jsx)(R,{mb:5}),(0,s.jsx)(l.m,{maxW:null!=i?i:"container.lg",pb:"200px",sx:_,...r,children:t})]})};var G=i(53924);let M=e=>{let{children:t}=e;return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n(),{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,s.jsx)(q,{as:"article",maxW:"730px",sx:{fontSize:G.fQ,lineHeight:G.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:G.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:G.Im},"b, strong":{fontWeight:G.uf},".chakra-wrap__list":{m:0},".chakra-wrap__listitem":{pl:0},"> header":{mb:G.rf},"> footer":{mt:G.rf},"> section":{my:G.rf},"> section > section":{my:G.vU},"> section > section > section":{my:G.vU}

1,".deprecation-warning":{bg:"orange.100",[(0,G.XT)()]:{bg:"#735016"}},"@media print":{mb:0}},children:t})]})}},21055:(e,t,i)=>{"use strict";i.d(t,{A:()=>c.N_,Cy:()=>a.C,E9:()=>g,H2:()=>x,H3:()=>p,H4:()=>m,L9:()=>A,Li:()=>o.ck,P:()=>l.E,Ul:()=>o.Xy,nC:()=>u,nz:()=>j,uQ:()=>b});var s=i(74848),r=i(62539),n=i(91311),l=i(27821),a=i(29818),o=i(55462),c=i(56972),d=i(29965),h=i.n(d);let A=e=>(0,s.jsx)(r.az,{as:"span",...e}),u=e=>(0,s.jsx)(r.az,{as:"aside",...e}),x=e=>(0,s.jsx)(n.D,{as:"h2",...e}),p=e=>(0,s.jsx)(n.D,{as:"h3",...e}),m=e=>(0,s.jsx)(n.D,{as:"h4",...e}),g=e=>{let{alt:t,src:i,borderRadius:n=5,style:l,center:a,imageProps:o,...c}=e;return(0,s.jsx)(r.az,{...a?{display:"flex",justifyContent:"center",w:"full"}:{},...c,children:(0,s.jsx)(h(),{alt:t,style:{borderRadius:n,...l},src:i,quality:100,...o})})},j=e=>{let{children:t,...i}=e;return(0,s.jsx)(l.E,{mb:3,...i,children:t})},b=e=>{let{children:t,...i}=e;return(0,s.jsx)(r.az,{as:"ul",mb:"var(--chakra-space-3) !important",...i,children:t})}},85044:(e,t,i)=>{"use strict";i.d(t,{A:()=>o});var s=i(74848),r=i(91311),n=i(49497),l=i(21055),a=i(67764);let o=e=>{let{children:t,headTitle:i,icon:o,...c}=e;return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.A,{title:null!=i?i:String(t)}),(0,s.jsxs)(r.D,{as:"h1",textAlign:"center",fontSize:"3xl",my:8,...c,children:[o&&(0,s.jsx)(l.L9,{sx:(0,a.u)("".concat(830,"px")),children:o}),t]})]})}},29275:(e,t,i)=>{"use strict";i.r(t),i.d(t,{default:()=>u});var s=i(74848),r=i(46833),n=i(77083),l=i(21055),a=i(85044);let o={src:"https://cdn.v1v2.io/_next/static/media/icones-html5.55a3c729.png",height:261,width:514,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAMAAACEE47CAAAABlBMVEXt7e3y8vI4lZypAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGElEQVR4nGNggANGEGIEMRjBTAhmYGQAAACoAApKTrOFAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:4},c={src:"https://cdn.v1v2.io/_next/static/media/logo-html5-icones-badge-horizontal.1100350b.png",height:64,width:357,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAABCAMAAADU3h9xAAAADFBMVEXR0tPqhGbbsqPU1NQioFjmAAAABHRSTlOo5b1OVGr5WQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAA5JREFUeJxjYGRiAAFmAAAiAAegP1GyAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:1};var d=i(34897),h=i(53924);let A=()=>(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a.A,{children:"Le logo HTML5 officiel du W3C"}),(0,s.jsxs)(l.P,{mb:h.rf,children:["Le W3C vient de publier le logo officiel d'HTML5. Il a \xe9t\xe9 r\xe9alis\xe9 par les designers d'",(0,s.jsx)(l.A,{isExternal:!0,href:"http://ocupop.com/",children:"Ocupop"}),", qui doivent probablement \xeatre de grands fans de Superman ou des combats de chevaliers aux boucliers \xe9tincelants :"]}),(0,s.jsx)(r.A,{src:d.A,alt:"Logo HTML5",mb:h.rf,imageProps:{width:200,height:200,priority:!0}}),(0,s.jsx)("p",{children:"Surprenant non ? La description qu'en fait le W3C est toute aussi \xe9pique que le logo :"}),(0,s.jsx)("blockquote",{children:"It stands strong and true, resilient and universal as the markup you write. It shines as bright and as bold as the forward-thinking, dedicated web developers you are. It's the standard's standard, a pennant for progress. And it certainly doesn't use tables for layout. We present an HTML5 logo."}),(0,s.jsx)("p",{children:"Certains trouveront l'approche pr\xe9tentieuse ou trop d\xe9cal\xe9e, ou le logo laid et inutilisable. Pour ma part, je m'y suis rapidement habitu\xe9, et bien que ma premi\xe8re impression ait \xe9t\xe9 assez n\xe9gative, je trouve ce logo plut\xf4t attachant et original. Les couleurs vivent et unies ont le m\xe9rite d'\xeatre marquantes, et d'avoir un rendu particuli\xe8rement bon dans le cas d'images de petites tailles. Un design plus complexe incluant des d\xe9grad\xe9s aurait un rendu de qualit\xe9 moindre sur une icone de 16px de hauteur par exemple."}),(0,s.jsxs)("p",{children:["La"," ",(0,s.jsx)(l.A,{isExternal:!0,href:"http://www.w3.org/html/logo/",children:"page officielle du logo sur le site du W3C"})," ","a le m\xe9rite d'avoir un design soign\xe9 et moderne, ce qui nous change de la documentation aust\xe8re habituelle."]}),(0,s.jsx)("p",{children:"Il existe \xe9galement un ensemble d'icones correspondant aux fonctionnalit\xe9s HTML5 utilis\xe9es par votre site ou application web :"}),(0,s.jsx)(r.A,{src:o,alt:"Ic\xf4nes HTML5"}),(0,s.jsx)("p",{children:"Ces icones peuvent \xeatre combin\xe9es au logo gr\xe2ce au g\xe9n\xe9rateur de badges HTML5 officiel afin d'obtenir ce genre de badge pour votre site :"}),(0,s.jsx)(r.A,{src:c,alt:"Badges horizontaux HTML5"}),(0,s.jsxs)("p",{children:["Le logo est sous licence"," ",(0,s.jsx)(l.A,{isExternal:!0,href:"http://creativecommons.org/licenses/by/3.0/",children:"Creative 

1Commons Attribution 3.0 Unported"}),", et vous \xeates donc libre de le modifier et l'utiliser autant que vous le souhaitez."]}),(0,s.jsxs)("p",{children:["Le logo et les icones sont disponibles en SVG et en PNG sous diff\xe9rentes d\xe9clinaisons sur le site officiel, et le site Espreson.net propose une"," ",(0,s.jsx)(l.A,{isExternal:!0,href:"http://espreson.net/file/HTML5_Logo_PSD.zip",children:"version PSD du logo"}),". Le designer Peter Viszt a \xe9galement r\xe9alis\xe9 une version du"," ",(0,s.jsx)(l.A,{isExternal:!0,href:"http://visztpeter.me/html5logo/",children:"logo int\xe9gralement en CSS3"}),", et il existe d\xe9j\xe0 une"," ",(0,s.jsx)(l.A,{isExternal:!0,href:"http://graphism.fr/dj-les-parodies-du-logo-pour-le-html5",children:"s\xe9rie de parodies"})," ","disponible sur Graphism.fr."]})]});A.wrappers=e=>(0,s.jsx)(n.A,{children:e});let u=A},67764:(e,t,i)=>{"use strict";i.d(t,{u:()=>r,x:()=>s});let s=e=>({["@media screen and (max-width: ".concat(e,")")]:{display:"none"}}),r=e=>({["@media screen and (min-width: ".concat(e,")")]:{dis

1play:"none"}})}},e=>{var t=t=>e(e.s=t);e.O(0,[8916,5422,6379,7351,8593,1940,2503,636,6593,8792],()=>t(46440)),_N_E=e.O()}]);