Slides de apoio para um mini-curso de Twitter Bootstrap 3 realizado em 10/5/2014 na DevRioClaro!

1. Mini Curso
Bootstrap
#DEVRIOCLARO – 10/05/2014

2. Oi (^.^)/
 “Palestrante”
 Diego Doná
 Desenvolvedor Web @ Sismat Consultoria
& TI
 Bacharel em Sistemas de Informação pela
Faculdade Salesiana Dom Bosco de
Piracicaba
 Likes: C#, Entity Framework,
Desenvolvimento Web, Tênis de mesa (não
é ping pong!!!)
 Dislikes: Bugs, Bugs Intermitentes, Bugs
zombies (enterra-se um, surgem 3)

3. Planejamento!
Nas eras mitológicas...
A chegada do CSS!
CSS e “seus” problemas
Frameworks de CSS
Bootstrap

4. Nas eras mitológicas...
H.T.M.L.
Texto.
Texto.
Bastante texto.
 Tinha link, mas era texto.

5. Nas eras mitológicas...
 http://info.cern.ch/hypertext/WWW/TheProject.html

6. Nas eras mitológicas...
 Recomendo:
 http://broadcast.rackspace
.com/blog/HTMLtimeline/in
dex.html

7. Nas eras mitológicas...

8. Nas eras mitológicas...
 O HTML evoluiu...
 Vieram as imagens...
 Tabelas...
 ... o deturpo semântico das tabelas :(
 Tabelas são para dados tabulares, não para
separar imagem de texto!
 Vieram os web designers...

9. Nas eras mitológicas...

10. A chegada do CSS!
 Proposta de melhorar a
aparência,
usabilidade e
manutenibilidade
dos sites

11. A chegada do CSS!
 Em teoria...
Menos stress!
Mais produtividade
e qualidade!
Mais liberdade!
Tudo de bom!

12. A chegada do CSS!

13. A chegada do CSS!
 Cascading Style Sheet (CSS1) é
aprovado pela W3C em 1996
 Browsers iniciam a implementação
 CSS2 vem em 1998
 Revisão em 2011 (CSS2.1)
 Maior parte implementado pelos
navegadores atuais
 CSS3 vem em 1999 (WTF!)
 Em 2014, ainda estamos na fase de
implementação!

14. CSS e “seus” problemas

15. CSS e “seus” problemas
 A implementação dos navegadores podem diferir
 Layouts vão podem parecer “quebrados” em testes
 “Funciona no IE, mas no FireFox o menu desapareceu...”

16. CSS e “seus” problemas
http://www.w3counter.com/globalstats.php - Acesso em: 07/05/2014

17. CSS e “seus” problemas
Pequena
demonstração...

18. Vários problemas em manter os sites funcionando em todos os browsers

19. Logo as pessoas resolveram criar algumas ferramentas...

20. Frameworks de CSS

21. Frameworks de CSS
Soluções vem de discussões...

22. Frameworks de CSS
USAR OU NÃO USAR, EIS A QUESTÃO...
...QUE NÃO DEVE SER GENERALIZADA.

23. Frameworks de CSS
 Vantagens
 Facilidade
 Padrões robustos
 Comunidade
 Muitas ferramentas
 Desvantagens
 Restrições
 Semântica alheia
 Curva de aprendizado
 Muitas ferramentas

24. Bootstrap

25. Bootstrap
Framework de CSS...
... Front End...
... Responsivo...
... Mobile First...
 ... Só não faz café. Ainda.

26. Bootstrap
 Originalmente, ferramenta interna do Twitter
 “Twitter Blueprint”
 Meros mortais ganharam acesso em 2011
 Mais de 20 releases
 Atualmente na versão 3.x

27. Bootstrap
 Vamos ver ao vivo!

28. Bootstrap
Temas customizados!
 https://wrapbootstrap.com/

29. Conclusão
Aprendizado fácil
Boa documentação
Suporte aos navegadores recentes
Mais que CSS, Front End!

30. Referências e Reverências
 http://getbootstrap.com
 http://css-tricks.com/what-are-the-benefits-of-using-a-css-
framework/
 http://speckyboy.com/2011/03/14/discussing-the-pros-and-cons-of-
using-a-css-framework/

31. Referências e Reverências
 http://blog.artversion.com/web-design-company/the-importance-of-
web-user-interface-design/
 http://www.cssneuse.net/the-history-of-css.php
 http://www.design-laorosa.com/2012/01/history-websites-at-their-
infancy-10.html
 http://www.wdtonline.com/wdtMagazine/MemberWorks/WiserWays/cs
shtml.htm
 http://sites.jmu.edu/wrtcworkshop/evolution-of-communication/