Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Presentation html5 css3 by thibaut

2,294 views

Published on

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

Published in: Technology, Design
  • Be the first to comment

Presentation html5 css3 by thibaut

  1. 1. HTML5PAR THIBAUT BAILLET HTML5 HTML5 ▲ ◄ ► ▼
  2. 2. FRONT-END DEVELOPER HETIC thibaut-baillet.com @bailletthibaut
  3. 3. OBJECTIFSStructurer et donner du sens Créer des applications
  4. 4. SÉMANTIQUE ET BALISES
  5. 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 limage</figcaption> </figure> </article></section><footer>Copyright...</footer>
  6. 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. 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 cant 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> Rich snippets :
  8. 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. 9. 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
  10. 10. MULTIMÉDIA
  11. 11. AUDIO ET VIDÉO 00:00 -00:36
  12. 12. WEBGLGoogle+ globeNouvelle vague
  13. 13. CSS3
  14. 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. 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. 16. DÉGRADÉ.gradient{ background: -webkit-gradient(linear, left top, left bottom, from(#F00), to(#000));}
  17. 17. PRÉFIXES PROPRIÉTAIRES -webkit -moz -o La solution : -prefix-free
  18. 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. 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. 20. API HTML5

×