Presentation HTML5 and CSS3 at EFFICOM

Introduction semantic
api html5
css3
web font

Transcript

1. HTML5 HTML5 HTML5 HTML5 HTML5 HTML5 HTML5 HTML5 HTML5 HTML5 HTML5 HTML5 HTML5 HTML5 HTML5 HTML5 PAR THIBAUT BAILLET ◄ ► ▲ ▼
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 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 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>
8. 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" />
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É 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; }
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 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); }
19. 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; }
20. API HTML5