O documento discute as tecnologias front-end do século 21, incluindo HTML5, CSS3 e JavaScript. Também discute o passado da web, como os navegadores e desenvolvedores estavam começando, e como a abordagem front-end melhorou ao longo do tempo com foco em semântica, multimídia, animações e compatibilidade entre navegadores.

1. Front-end do
século XXI.I
HTML5, CSS3, JS and more things...
LuizTiago.com

2. Luiz Tiago...
Front-end Manager @ MGR Tecnologia
iPhone Developer
jQuery Brasil Team
Especialista em “Mobile Development”
And more things...

3. Um pouco do passado...
ultrad.com.br

4. Um pouco do passado...
A web não tinha forma
A W3C estava começando
Os desenvolvedores estavam começando
Os browsers estavam começando

5. Um pouco do passado...
“Escolha o browser que você utiliza”
“Qual resolução você utiliza?”
( ) 640x480 ( ) 800x600

6. Estamos no passado?
“Este site só funciona no Internet Explorer”
“Resolução máxima recomendada”
Sites que não funcionam em dispositivos
móveis
Falta de mão-de-obra qualificada

7. Melhoria progressiva
O projeto é feito de baixo para cima
Em seguida o desenvolvedor adiciona
funcionalidades e melhorias para o
comportamento da página

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 do
browser em que estiver acessando

9. Timeline
2001 2011 2021
9,8 milhões 58 milhões ?????

10. Mercado

11. Mercado
Como ser procurado?
Como ser escolhido?
Como manter destaque?

12. Tríade Client-side
HTML
CSS
Javascript

13. Front-end
Designer x Engineer
HTML e CSS, hoje, é obrigação de todo o time
Javascript cresce cada dia mais
Por que ficar de fora?

14. Hands on...

15. CSS3

16. CSS3
Bordas arredondadas
Sombras e degradês
Animações / Transições
Fontes diferenciadas
Fácil criação de layout em colunas
Nem todo browser suporta...

17. CSS3

18. Não é CSS3,
mas vale à pena!

19. CSS3
Chrome / Firefox / Safari IE6 / IE7 / IE8

20. CSS3
http://www.css3files.com/
http://www.css3.info/
http://www.css3generator.com/

22. Anunciado no início de 2009
Conclusão (implementação 100%) prevista
para 2022
Esperar?

23. Navegadores antigos são
como TV’s preto e branco....

24. Navegadores modernos
são como TV’s Full HD....

25. A TV já resolveu esse
problema... (Zeno Rocha)
E você esperando?

26. Tags semânticas
<header> <footer>
<article> <section> <content>
<nav> <hgroup>
<data>
entre outras...

27. Elementos multimídia
audio
video

28. Desenhos
canvas
svg

29. 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;
Não faz quase nada sozinho

30. var comoFaz =
“JAVASCRIPT”;

31. JAVASCRIPT
Top Languages @ Github

32. JAVASCRIPT
Não tem nada haver com Java
jQuery
AJAX
JSON
Futuro!

33. jQuery
Há muito tempo é a biblioteca Javascript de
maior uso
Código-aberto
Cross-browser :)
Qualquer um pode contribuir

34. jQuery - quem usa?
Google, Amazon, IBM, Microsoft, Twitter, Dell,
Best Buy, NBC, EA, Match, ESPN, CBS News,
Bank of America
Eu...
Você!

35. jQuery - como contribuir?
Código
https://github.com/jquery/jquery
http://bugs.jquery.com/
Tradução (EN -> PT-BR)
http://www.jquerybrasil.org

36. More things...
NoSQL Performance
Node.JS Mobile
Testes Escalabilidade
Patterns Modularização
Git

37. Front-end do século
XXI.I
Um ninja não aparece muito...
mas deixa um resultado considerável
(Leo Balter)

38. Can I help you?
@ luiztiago
www.luiztiago.com
luiztiago@luiztiago.com