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

  • 1,901 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
1,901
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
81
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
    • 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