HTML5HTML5HTML5HTML5HTML5HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5

HTML5HTML5PAR THIBAUT BAILLET

◄ ►▲

▼

FRONT-END DEVELOPERHETICthibaut-baillet.com@bailletthibaut

OBJECTIFSStructurer et donner du sens

Créer des applications

SÉMANTIQUE ET BALISES

NOUVELLES BALISES<header> <hgroup> <h1>Titre</h1> <h2>Sous titre</h2> </hgroup></header><nav> <ul> <li><a href="http://">Link Text</a></li> <li><a href="http://">Link Text</a></li> <li><a href="http://">Link Text</a></li> </ul></nav><section> <article> <header> <h3>Titre article</h3> <time datetime="2011-15-12">15 décembre 2011</time> </header> Contenu... <figure> <img src="#" alt="" /> <figcaption>Description de l'image</figcaption> </figure> </article></section><footer>Copyright...</footer>

NOUVEAUX ATTRIBUTS<tag role=""><tag data-xxx=""><tag aria-xxx=""><tag draggable=""><tag itemscope="" itemtype="" itemprop="" ><input type="email" placeholder="Votre email" required />

MICRODATA

Rich snippets :

<article itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Inception (2010) - IMDb</h1> <span itemprop="description">The excerpt from the page will show up here. The reason we can't show text from your webpage is because the text depends on the query the user types.</span> Director: <div itemprop="director" itemscope itemtype="http://schema.org/People"> <span itemprop="name">Christopher Nolan</span> </div> Writers: <div itemprop="author" itemscope itemtype="http://schema.org/People"> <span itemprop="name">Christopher Nolan</span> </div> <div itemprop="actors" itemscope itemtype="http://schema.org/People"> <span itemprop="name">Leonardo DiCaprio</span>, </div> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <span itemprop="ratingValue">8,9</span>/<span itemprop="bestRating">10</span> stars from <span itemprop="ratingCount">457038</span> users. </div></article>

NOUVEAUX FORMULAIRES

Avantage pour les claviers mobiles :

<input type="email" placeholder="mail@mail.com"/> mail@mail.com

<input type="number" min="13" max="110" value="20"/> 20

<input type="range" min="0" max="50" step="10"/>

<input type="search" results="10" placeholder="Search..." /> Search...

<input type="tel" pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" /> (555) 555-5555

<input type="color" placeholder="e.g. #bbbbbb" />

AUTRES BALISES <meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>Your score is: A+

<progress>working...</progress>Download is: working...

<progress value="75" max="100">3/4 complete</progress>Goal is: 3/4 complete

MULTIMÉDIA

AUDIO ET VIDÉO

00:00 -00:36

WEBGLGoogle+ globeNouvelle vague

CSS3

WEB FONTS @font-face { font-family: 'LeagueGothic'; src: url(LeagueGothic.otf); }

Font SquirrelGoogle Web fonts

<link href='http://fonts.googleapis.com/css?family=SpicyRice' rel='stylesheet' type='text/css'>

h1{ font-family: 'SpicyRice'; }

OPACITÉ

ANGLE ARRONDI

OMBRE PORTÉE

.code{ background: rgba(255, 0, 0, 0.57); }

.radius{ border-radius : 30px; border-top-right-radius : 100px; }

.shadow{ box-shadow : rgba(0, 255, 0, 0.846094) 7px 3px 0px; }

DÉGRADÉ .gradient{ background: -webkit-gradient(linear, left top, left bottom, from(#F00), to(#000)); }

PRÉFIXES PROPRIÉTAIRES-webkit-moz-o

La solution : -prefix-free

TRANSITION CSS3

TRANSFORMATION CSS3

.transition{ -webkit-transition: width 1s ease-in-out; } .transition:hover{ width: 50%; }

.transform{ -webkit-transition: -webkit-transform 1s ease-in-out; } .transform:hover{ -webkit-transform: rotateZ(-180deg); }

ANIMATION

Animation !!

@-webkit-keyframes pulse { from { opacity: 0.0; font-size: 100%; } to { opacity: 1.0; font-size: 200%; } } .annim { display: block; background-color: #FF0; height: 100px; line-height: 100px; -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-direction: alternate; }

API HTML5