Downloaded 170 times
Uploaded byManoel dos Santos
HTML5 & CSS3 - A Evolução da Web
The document discusses the evolution of HTML and CSS standards. It covers new semantic elements in HTML5 like <header>, <nav>, <section>, and <article>. HTML5 also introduces new form input types, multimedia elements <video> and <audio>, and the <canvas> element. CSS3 adds new selectors, properties for opacity, backgrounds, borders, shadows, text effects and 3D transforms. The document emphasizes that HTML5 and CSS3 are still works in progress with evolving browser support, and other technologies still have roles to play for applications needing advanced features.
More Related Content
![Getting Started with Apache Spark: Big Data Made Simple [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/apachesparkgettingstarted-260203175547-8361bcc3-thumbnail.jpg?width=640&height=640&fit=bounds)
HTML5 & CSS3 - A Evolução da Web
- 1. Globalcode – Open4education HTML5+ CSS3 Manoel dos Santos @manoeldossantos manoeldossantos@gmail.com
- 2.
- 3. Globalcode – Open4education Evolução Web1.0 Linkar/encontrar documentos Arquivos estruturados Web 2.0 Interatividade Usuários e autores se misturam Web 3.0 Ubiquidade Semântica
- 4. Globalcode – Open4education ONovo HTML 5 Mais Semântico Menor dependência dos plugins Foco em Web Apps http://dev.w3.org/html5/spec-author-view/
- 5. Globalcode – Open4education Algumasmelhorias Mais simples <!DOCTYPE html> Mais clemente <img src=“imagem.jpg” /> <img src=“imagem.jpg”> <img src=imagem.jpg> <IMG SRC=imagem.jpg>
- 6. Globalcode – Open4education OVelho <div id=“header”> <div id=“nav”> <div id=“footer”> <div id=“sidebar”> <div class=“section”> <div class=“article”>
- 7. Globalcode – Open4education ONovo <header> <nav> <footer> <aside> <section> <article>
- 8.
- 9. Globalcode – Open4education Bemvindos <canvas> <mark> <time> <video> <audio> <meter> … http://www.w3schools.com/html5/html5_reference.asp
- 10. Globalcode – Open4education Formulários Novostipos de input Email, date, range, search, tel, number, color Novos atributos Required, min, max, placeholder, pattern Novos componentes Meter, progress, output http://www.w3.org/TR/html5/forms.html http://diveintohtml5.org/forms.html
- 11.
- 12. Globalcode – Open4education Mídia Áudio <audioid=“audio” src=“musica.mp3” controls></audio> Vídeo <video id=“video” src=“filme.mp4” controls></video> http://www.w3.org/TR/html5/video.html http://diveintohtml5.org/video.html
- 13.
- 14.
- 15. Globalcode – Open4education NovasAPIs Geolocalização http://htmlfive.appspot.com/static/whereami.html Drag and Drop http://html5demos.com/drag Web Workers Javascript em background Offline Storage / Web SQL Database
- 16. Globalcode – Open4education Mas,porém, entretanto… 2012?!
- 17.
- 18.
- 19.
- 20.
- 21.
- 22. Globalcode – Open4education ONovo CSS 3 Modular Mais controle Menos imagens http://www.w3.org/Style/CSS/current-work
- 23. Globalcode – Open4education Seletores :nth-child(n) :only-child :checked :not …http://www.w3.org/TR/css3-selectors/
- 24. Globalcode – Open4education Opacidadee Alpha Opacidade opacity: 0.5; RGBA color: rgba(255,255,255,0.5); HSL/A color: hsla(360,50%,50%,0.5);
- 25. Globalcode – Open4education Background Tamanho background-size:100px 50px; Múltiplas imagens background: url(imagem1.png) top left no-repeat, url(imagem2.png) bottom left no-repeat, url(imagem3.png) left repeat-y;
- 26. Globalcode – Open4education Bordas Múltiplasbordas border-color: #000 transparent transparent #000; Borda arredondada border-radius: 10px; border-top-right-radius: 10px; -moz-border-radius: 10px; Imagem: border-image: url(borda.png) 27 27 27 27 stretch stretch;
- 27. Globalcode – Open4education Sombra Caixa box-shadow:10px 10px 10px #000; Texto text-shadow: 10px 10px 10px #000;
- 28. Globalcode – Open4education Texto Overflow text-overflow:ellipsis; Colunas -*-column-count: 3; -*-column-width: 10em; -*-column-gap: 2em; -*-column-rule: 1px solid #000;
- 29. Globalcode – Open4education Fonte @font-face{ font-family: Helvetica; src: url(HelveticaNeue.ttf); local(“Arial”); }
- 30. Globalcode – Open4education Movimento Transição Transformação2D Transformação 3D Animação
- 31.
- 32. Globalcode – Open4education Suporte- Seletores
- 33. Globalcode – Open4education Suporte- Propriedades
- 34.
- 35. Globalcode – Open4education HTML5+ CSS3 - Cuidados Performance Muito ainda em rascunho Suporte de navegadores Funcionalidades proprietárias
- 36. Globalcode – Open4education HTML5x Silverlight x Flash Tem lugar pra todo mundo Público-alvo e projeto Web = HTML Crossbrowser, crossplatform Plugins (SL, Flash/Air, JavaFX…) Aplicações de nicho e de negócios Recursos avançados Webcam, microfone, webconference, fullscreen, etc…
- 37.