Presentation de HTML5 et CSS3 à EFFICOM http://thibaut-baillet.com

1. HTML5
PAR THIBAUT BAILLET
HTML5
HTML5
▲
◄ ►
▼

2. FRONT-END DEVELOPER
HETIC
thibaut-baillet.com
@bailletthibaut

3. OBJECTIFS
Structurer et donner du sens
Créer des applications

4. SÉMANTIQUE ET BALISES

5. 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>

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

7. MICRODATA
<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 ca
n'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 fr
om
<span itemprop="ratingCount">457038</span> users.
</div>
</article>
Rich snippets :

8. NOUVEAUX FORMULAIRES
<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" />
Avantage pour les claviers mobiles :

9. AUTRES BALISES
<meter min="0" max="100" low="40" high="90" optimum="100" value="9
1">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

10. MULTIMÉDIA

11. AUDIO ET VIDÉO
00:00 -00:36

12. WEBGL
Google+ globe
Nouvelle vague

13. CSS3

14. WEB FONTS
@font-face {
font-family: 'LeagueGothic';
src: url(LeagueGothic.otf);
}
Font Squirrel
Google Web fonts
<link href='http://fonts.googleapis.com/css?family=SpicyRice' rel='stylesheet' type='text/css'
>
h1{ font-family: 'SpicyRice'; }

15. OPACITÉ
.code{
background: rgba(255, 0, 0, 0.57);
}
ANGLE ARRONDI
.radius{
border-radius : 30px;
border-top-right-radius : 100px;
}
OMBRE PORTÉE
.shadow{
box-shadow : rgba(0, 255, 0, 0.846094) 7px 3px 0px;
}

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

17. PRÉFIXES PROPRIÉTAIRES
-webkit
-moz
-o
La solution : -prefix-free

18. TRANSITION CSS3
.transition{
-webkit-transition: width 1s ease-in-out;
}
.transition:hover{
width: 50%;
}
TRANSFORMATION CSS3
.transform{
-webkit-transition: -webkit-transform 1s ease-in-out;
}
.transform:hover{
-webkit-transform: rotateZ(-180deg);
}

19. 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;
}
Animation !!

20. API HTML5