HTML5 & CSS3 - A Evolução da Web
•Transferir como PPTX, PDF•
1 gostou•2,019 visualizações
Palestra dada no evento The Developers Conference - TDC 2010 em Florianópolis.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a HTML5 & CSS3 - A Evolução da Web
Semelhante a HTML5 & CSS3 - A Evolução da Web (20)
Mais de Manoel dos Santos
Último
Último (20)
HTML5 & CSS3 - A Evolução da Web
- 1. Globalcode – Open4education HTML5 + CSS3 Manoel dos Santos @manoeldossantos manoeldossantos@gmail.com
- 3. Globalcode – Open4education Evolução Web 1.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 O Novo 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 Algumas melhorias 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 O Velho <div id=“header”> <div id=“nav”> <div id=“footer”> <div id=“sidebar”> <div class=“section”> <div class=“article”>
- 7. Globalcode – Open4education O Novo <header> <nav> <footer> <aside> <section> <article>
- 9. Globalcode – Open4education Bem vindos <canvas> <mark> <time> <video> <audio> <meter> … http://www.w3schools.com/html5/html5_reference.asp
- 10. Globalcode – Open4education Formulários Novos tipos 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
- 12. Globalcode – Open4education Mídia Áudio <audio id=“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
- 15. Globalcode – Open4education Novas APIs 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?!
- 22. Globalcode – Open4education O Novo 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 Opacidade e 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últiplas bordas 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ção 2D Transformação 3D Animação
- 32. Globalcode – Open4education Suporte - Seletores
- 33. Globalcode – Open4education Suporte - Propriedades
- 35. Globalcode – Open4education HTML5 + CSS3 - Cuidados Performance Muito ainda em rascunho Suporte de navegadores Funcionalidades proprietárias
- 36. Globalcode – Open4education HTML5 x 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…