Mini-Curso sobre Bootstrap 3

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/