Apresentação sobre HTML5 e CSS3 realizada em 29/05 na XVII SACOMP. Por: William Dias @diaswrd Davi Reinke @davireinke

1. A NOVA ONDA DA
SKYNET

2. Quem somos?
Davi Reinke William Dias
@davireinke @diaswrd
fb.me/davireinke fb.me/diaswrd
Alunos de BCC pela UFPel
Desenvolvedores JavaScript na Conrad Caine
2

3. • Serviços em comunicação digital;
• Sede em Munique, Alemanha;
• Escritório de desenvolvimento em Pelotas, Brasil;
• Escritório de criação e arte em Buenos Aires,
Argentina;
• Clientes de todo o mundo;
• Atualmente com mais de 100 funcionários;
• Serviços nas áreas de consultoria, front-end,
back-end, mobile, flash, design e muito mais.
www.conrad-caine.com 3

4. Por que não dormir nesta palestra
Cut the Rope
Parcycle
WebGL Formula 1
Indeed – JavaScript Developer
4

5. O que é “Web”?
“Rede Mundial de Computadores”
SÉRGIO CHAPELIN
WEB: O que é? Como funciona? 5

6. Web
“A Internet é apenas uma
moda passageira.”
BILL GATES, agosto 1994
Fonte: Wikiquotes
WEB: O que é? Como funciona? 6

7. Web
“Erramos. A partir de hoje a Microsoft é
dedicada à internet.”
BILL GATES, agosto 1995
Fonte: Wikiquotes
WEB: O que é? Como funciona? 7

8. Como funciona?
WEB: O que é? Como funciona? 8

9. Áreas de Desenvolvimento
Front-End:
HTML, CSS, JavaScript, Flash (que Deus o tenha)…
Back-End:
PHP, Ruby, Java, ASP, C#...
WEB: O que é? Como funciona? 9

10. Como era antes?
• Sobrinhos codando!!!
• <table> (PRA TUDO)
• <br> (PRA TUDO)
• Gifs (MEU DEUS)
Como era antes?

11. Evolução dos navegadores
http://evolutionofweb.appspot.com/
Como era antes? 11

12. HTML5
• Primeiras especificações surgiram em 2006.
• Forte impulso na mídia em Abril de 2010, após Steve Jobs
publicar “Thoughts on Flash”. Defendendo que o HTML5 se
encaixaria melhor no desenvolvimento web e móvel daquele
momento em diante. Tornando a utilização do Adobe Flash
desnecessária.
• Já é algo completamente estável e final? Meus projetos
em HTML5 terão total compatibilidade com a especificação
daqui a alguns anos?
HTML5 12

13. Como funciona?
HTML5 13

14. Algumas novidades
• Offline / Storage
• Realtime / Communication
• File / Hardware Access
• Semantics & Markup
• Graphics / Multimedia
HTML5 14

15. Para facilitar sua vida
Frameworks, bibliotecas e muito mais:
• oCanvas – object based canvas drawing
• processing.js – canvas framework
• popcorn.js - event system for HTML5 media developers.
• seriously.js - real-time video compositor for the web.
• sparks.js – simple 3D JS Particles Engine
• phoneGap – HTML5 platform for mobile development
• three.js – JavaScript 3D WebGL library
• Standards – HTML5 Draft Standard
• Slides – HTML5 Rocks Slides
HTML5 15

16. CSS3
• Transitions
• Transforms
• Animate
• Gradients
• Shadow
CSS3 16

17. O que esperar do futuro?
O que esperar do futuro? 17

18. Datas
2014
HTML5 pronto
O que esperar do futuro? 18

19. Datas
2022
HTML5 implementado em todos os
navegadores
O que esperar do futuro? 19

20. Datas
5042
Fim do Internet Explorer 6
O que esperar do futuro? 20

21. Previsões
• Engine JavaScript ainda mais robusta
• Plugin-Free
• Presença mais significativa dos dispositivos
móveis
• Menos problemas com Cross-Browser
• Fim do IE6 (se Deus assim permitir)
O que esperar do futuro? 21

22. Perguntas
?
22

23. Perguntas
NÃO!
JavaScript não é Java!
23

24. Perguntas
?
24

25. Obrigado!
Davi Reinke | @davireinke | fb.me/davireinke
William Dias | @diaswrd | fb.me/diaswrd
25