Your SlideShare is downloading. ×
0
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira

1,993

Published on

Local: EDTED Recife …

Local: EDTED Recife
Data: 14/11/2009
Palestrante: Luiz Tiago Oliveira
Descrição: Palestra sobre HTML 5 e CSS 3. Explicação de ambos os conceitos, diferenciais e inovações além da defesa dos pontos para saber se vale à pena desenvolver ou não.

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

No Downloads
Views
Total Views
1,993
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
88
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1.  
  • 2. Luiz Tiago Oliveira <ul><li>http://www.luiztiago.com </li></ul><ul><li>Instrutor WebStandards @ iMedia Brasil </li></ul><ul><li>Front-End Engineer / Gerente de Projetos @ Agitz Web </li></ul>
  • 3. O passado da Web... <ul><li>A Web não tinha forma... </li></ul><ul><li>A W3C estava começando... </li></ul><ul><li>Os desenvolvedores estavam começando... </li></ul><ul><li>Os browsers estavam começando... </li></ul>
  • 4. O passado da Web... <ul><li>Era comum frases como: </li></ul><ul><li>“ Escolha o browser que você utiliza” </li></ul><ul><li>“ Qual resolução você utiliza?” </li></ul>
  • 5. O crescimento... <ul><li>Quantidade e qualidade dos browsers; </li></ul><ul><li>Qualidade e conhecimento dos desenvolvedores; </li></ul><ul><li>Reconhecimento da área no mercado. </li></ul>
  • 6. O crescimento... <ul><li>Falando mal do passado e com as limitações, todos voltaram a fazer o mesmo: </li></ul><ul><ul><li>“ Este site só funciona no Internet Explorer” </li></ul></ul><ul><ul><li>“ É necessário utilizar a versão 3.0 do Firefox para melhor navegabilidade” </li></ul></ul>
  • 7. Melhoria Progressiva <ul><li>O projeto é feito de baixo para cima </li></ul><ul><li>Em seguida o desenvolvedor adiciona funcionalidades e melhorias para o comportamento da página. </li></ul>( Progressive Enhancement )
  • 8. Melhoria Progressiva <ul><li>As funcionalidades não são afetadas </li></ul><ul><li>A navegabilidade não é afetada </li></ul><ul><li>Apenas o layout e efeitos avançados podem sofrer pequenas alterações dependendo dos browsers </li></ul>( Progressive Enhancement )
  • 9. Navegadores ( Crescimento em % )
  • 10. HTML 5 <ul><li>Anunciado no início de 2009 </li></ul><ul><li>Versão final prometida para 2012 </li></ul>
  • 11. HTML 5 - Principais Novidades <ul><li>Elementos que valorizam a semântica; </li></ul><ul><li>Elementos multimídia; </li></ul><ul><li>Facilidade para desenhos dinâmicos (canvas); </li></ul><ul><li>Drag and Drop de elementos; </li></ul><ul><li>Geolocation API; </li></ul><ul><li>Armazenamento de dados no cliente; </li></ul>
  • 12. HTML 5 - Algumas novas tags <ul><li><article> <aside> <audio> <canvas> <command> <details> <dialog> <footer> <header> <hgroup> <nav> <section> <source> <video> </li></ul>
  • 13. HTML 5 - Algumas tags removidas <ul><li><acronym> <applet> <basefont> </li></ul><ul><li><big> <font> <frame> <frameset> </li></ul><ul><li><noframes> <s> <tt> <u> </li></ul>
  • 14. <div id=&quot;header&quot;> <h1>Meu blog</h1> <p class=&quot;tagline&quot;>Várias informações sobre Web</p> <div id=“nav”> <ul> <li><a href=“home.html&quot;>home</a></li> <li><a href=“blog.html&quot;>blog</a></li> </ul> </div> </div> <div class=&quot;entry&quot;> <p class=&quot;post-date“>22 de Outubro de 2009</p> <h2>Como ficar rico...</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit felis accumsan Aliq</p> </div> <header> <hgroup> <h1>Meu blog</h1> <h2>Várias informações sobre Web</h2> </hgroup> <nav> <ul> <li><a href=“home.html&quot;>home</a></li> <li><a href=“blog.html&quot;>blog</a></li> </ul> </nav> </header> <article> <header> <time datetime=&quot;2009-10-22”>22 de Outubro de 2009</time> <h2>Como ficar rico...</h2> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit felis accumsan Aliq</p> </article>
  • 15. HTML 5 - Exemplos <ul><li>http://bit.ly/1Hw1ED (photos) </li></ul><ul><li>http://bit.ly/2F3i1K (tiger) </li></ul><ul><li>http://bit.ly/fPMxn (videos) </li></ul><ul><li>http://bit.ly/HkYnp (sticky) </li></ul><ul><li>http://www.html5gallery.com </li></ul><ul><li>http:// www.apple.com/br/safari </li></ul><ul><li>http:// www.tableless.com.br </li></ul>
  • 16. HTML 5 <ul><li>Todos os browsers já possuem suporte? </li></ul>
  • 17. HTML 5 - Está na hora de mudar? <ul><li>Se existe solução cabível para o suporte dos navegadores desatualizados, por que não? </li></ul><ul><li>Se a especificação ainda é instável e sujeita a mudanças, por que começar ? </li></ul>
  • 18. HTML 5 - Desenvolver ou não? <ul><li>Análise do público-alvo; </li></ul><ul><li>Flexibilidade de manutenção conforme mudanças; </li></ul><ul><li>Orçamento flexível; </li></ul><ul><li>Interesse; </li></ul>
  • 19. CSS 3 - Introdução <ul><li>O CSS 3 está atualmente em desenvolvimento. </li></ul><ul><li>É modular e será composto de várias recomendações distintas. </li></ul><ul><li>É mais compacta e mais rica em semântica. </li></ul>
  • 20. CSS 3 - Pontos Positivos <ul><li>Novas funcionalidades podem ser adicionadas sem precisar criar uma nova versão completa. </li></ul><ul><li>Facilita o início do suporte de alguns browsers </li></ul>
  • 21. CSS 3 - Alguns diferenciais <ul><li>Layout multi-colunas mais práticos; </li></ul><ul><li>Suporte a WebFonts; </li></ul><ul><li>Bordas arredondadas sem usar imagens; </li></ul><ul><li>Possibilidade de vários backgrounds; </li></ul>
  • 22. CSS 3 - Suporte Safari 4 (Win) Firefox 3.5 (Win) Google Chrome (Win) Internet Explorer 6, 7 & 8
  • 23. DESAFIO <ul><li>Sem scripts </li></ul><ul><li>Sem imagens </li></ul><ul><li>Sem tabelas (claro!) </li></ul>
  • 24. Dúvidas ? @luiztiago [email_address] www.imediabrasil.com.br www.luiztiago.com www.agitz.com.br

×