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

Like this? Share it with your network

Share

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

  • 3,638 views
Uploaded 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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,638
On Slideshare
3,592
From Embeds
46
Number of Embeds
6

Actions

Shares
Downloads
81
Comments
0
Likes
2

Embeds 46

http://www.slideshare.net 33
http://coderwall.com 9
http://webcache.googleusercontent.com 1
http://twitter.com 1
http://a0.twimg.com 1
http://us-w1.rockmelt.com 1

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