HTML5 & CSS3 - A Evolução da Web

3,004 views
2,841 views

Published on

Palestra dada no evento The Developers Conference - TDC 2010 em Florianópolis.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,004
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
148
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5 & CSS3 - A Evolução da Web

  1. 1. Globalcode – Open4education HTML5 + CSS3 Manoel dos Santos @manoeldossantos manoeldossantos@gmail.com
  2. 2. Globalcode – Open4education História
  3. 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. 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. 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. 6. Globalcode – Open4education O Velho <div id=“header”> <div id=“nav”> <div id=“footer”> <div id=“sidebar”> <div class=“section”> <div class=“article”>
  7. 7. Globalcode – Open4education O Novo <header> <nav> <footer> <aside> <section> <article>
  8. 8. Globalcode – Open4education Adeus <acronym> <basefont> <center> <font> <strike> <frame> … http://www.w3schools.com/html5/html5_reference.asp
  9. 9. Globalcode – Open4education Bem vindos <canvas> <mark> <time> <video> <audio> <meter> … http://www.w3schools.com/html5/html5_reference.asp
  10. 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
  11. 11. Globalcode – Open4education Formulários DEMO
  12. 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
  13. 13. Globalcode – Open4education Vídeo DEMO
  14. 14. Globalcode – Open4education Canvas http://www.benjoffe.com/code/games/torus/
  15. 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. 16. Globalcode – Open4education Mas, porém, entretanto… 2012?!
  17. 17. Globalcode – Open4education Suporte
  18. 18. Globalcode – Open4education Suporte
  19. 19. Globalcode – Open4education Suporte
  20. 20. Globalcode – Open4education Suporte
  21. 21. Globalcode – Open4education Links http://slides.html5rocks.com/ http://html5demos.com/ http://html5doctor.com/ http://www.apple.com/html5/ http://www.nevermindthebullets.com/strip.html#1-1 http://diveintohtml5.org/ http://www.edesignerz.net/html/2913-html-5-and- css-3-the-techniques-youll-soon-be-using
  22. 22. Globalcode – Open4education O Novo CSS 3 Modular Mais controle Menos imagens http://www.w3.org/Style/CSS/current-work
  23. 23. Globalcode – Open4education Seletores :nth-child(n) :only-child :checked :not … http://www.w3.org/TR/css3-selectors/
  24. 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. 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. 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. 27. Globalcode – Open4education Sombra Caixa box-shadow: 10px 10px 10px #000; Texto text-shadow: 10px 10px 10px #000;
  28. 28. Globalcode – Open4education Texto Overflow text-overflow: ellipsis; Colunas -*-column-count: 3; -*-column-width: 10em; -*-column-gap: 2em; -*-column-rule: 1px solid #000;
  29. 29. Globalcode – Open4education Fonte @font-face { font-family: Helvetica; src: url(HelveticaNeue.ttf); local(“Arial”); }
  30. 30. Globalcode – Open4education Movimento Transição Transformação 2D Transformação 3D Animação
  31. 31. Globalcode – Open4education Demo http://slides.html5rocks.com/#slide29
  32. 32. Globalcode – Open4education Suporte - Seletores
  33. 33. Globalcode – Open4education Suporte - Propriedades
  34. 34. Globalcode – Open4education Links http://www.456bereastreet.com/ http://www.css3.info/ http://www.findmebyip.com/litmus/# http://www.smashingmagazine.com/2009/07/13/cs s-3-cheat-sheet-pdf/
  35. 35. Globalcode – Open4education HTML5 + CSS3 - Cuidados Performance Muito ainda em rascunho Suporte de navegadores Funcionalidades proprietárias
  36. 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…
  37. 37. Globalcode – Open4education Obrigado Perguntas? @manoeldossantos manoeldossantos@gmail.com

×