Upload
diego-dona
View
549
Download
3
Embed Size (px)
DESCRIPTION
Slides de apoio para um mini-curso de Twitter Bootstrap 3 realizado em 10/5/2014 na DevRioClaro!
Citation preview
Mini Curso
Bootstrap#DEVRIOCLARO – 10/05/2014
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)
Planejamento!Nas eras mitológicas...A chegada do CSS!CSS e “seus” problemasFrameworks de CSS
Bootstrap
Nas eras mitológicas...
H.T.M.L.Texto.Texto.Bastante texto.
Tinha link, mas era texto.
Nas eras mitológicas... http://info.cern.ch/hypertext/WWW/TheProject.html
Nas eras mitológicas... Recomendo:
http://broadcast.rackspace.com/blog/HTMLtimeline/index.html
Nas eras mitológicas...
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...
Nas eras mitológicas...
O ADVENTO DOS WEB DESIGNERS
A chegada do CSS!Proposta de melhorar a
aparência, usabilidade e
manutenibilidade dos sites
A chegada do CSS!Em teoria...
Menos stress! Mais produtividade
e qualidade!Mais liberdade!Tudo de bom!
A chegada do CSS!
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!
CSS e “seus” problemas
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...”
CSS e “seus” problemas
http://www.w3counter.com/globalstats.php - Acesso em: 07/05/2014
CSS e “seus” problemas
Pequena demonstração...
Vários problemas em manter os sites funcionando em todos os browsers
Logo as pessoas resolveram criar algumas ferramentas...
Frameworks de CSS
Frameworks de CSSSoluções vem de discussões...
Frameworks de CSSUSAR OU NÃO USAR, EIS A
QUESTÃO...
...QUE NÃO DEVE SER GENERALIZADA.
Frameworks de CSS Vantagens
Facilidade Padrões robustos Comunidade
Muitas ferramentas
Desvantagens
Restrições Semântica alheia Curva de aprendizado
Muitas ferramentas
Bootstrap
BootstrapFramework de CSS...
... Front End...... Responsivo...... Mobile First...
... Só não faz café. Ainda.
Bootstrap Originalmente, ferramenta interna do Twitter
“Twitter Blueprint”
Meros mortais ganharam acesso em 2011
Mais de 20 releases
Atualmente na versão 3.x
Bootstrap Vamos ver ao vivo!
BootstrapTemas customizados!
https://wrapbootstrap.com/
ConclusãoAprendizado fácilBoa documentaçãoSuporte aos navegadores
recentesMais que CSS, Front End!
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/
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/csshtml.htm
http://sites.jmu.edu/wrtcworkshop/evolution-of-communication/