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="[email protected]"/> [email protected]
<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