SlideShare uma empresa Scribd logo
1 de 31
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” problemas
Frameworks 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/in
dex.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...
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 CSS
Soluções vem de discussões...
Frameworks de CSS
USAR 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
Bootstrap
Framework 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!
Bootstrap
Temas customizados!
 https://wrapbootstrap.com/
Conclusão
Aprendizado fácil
Boa documentação
Suporte aos navegadores recentes
Mais 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/cs
shtml.htm
 http://sites.jmu.edu/wrtcworkshop/evolution-of-communication/

Mais conteúdo relacionado

Mais procurados

Apresentacao FISL14 - Entendendo o Twitter bootstrap
Apresentacao FISL14 - Entendendo o Twitter  bootstrapApresentacao FISL14 - Entendendo o Twitter  bootstrap
Apresentacao FISL14 - Entendendo o Twitter bootstrap
Alexandre Magno Teles Zimerer
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
Sérgio Vilar
 
Construindo um framework CSS
Construindo um framework CSSConstruindo um framework CSS
Construindo um framework CSS
Diego Eis
 

Mais procurados (20)

Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
 
Formulários Responsivos com Bootstrap
Formulários Responsivos com BootstrapFormulários Responsivos com Bootstrap
Formulários Responsivos com Bootstrap
 
Aplicacoes responsivas
Aplicacoes responsivasAplicacoes responsivas
Aplicacoes responsivas
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX Design
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
Apresentacao FISL14 - Entendendo o Twitter bootstrap
Apresentacao FISL14 - Entendendo o Twitter  bootstrapApresentacao FISL14 - Entendendo o Twitter  bootstrap
Apresentacao FISL14 - Entendendo o Twitter bootstrap
 
Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das Galáxias
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
 
Bootstrap 4
Bootstrap 4Bootstrap 4
Bootstrap 4
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
 
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignOs cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
 
O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-end
 
Como criar seu próprio Framework
Como criar seu próprio FrameworkComo criar seu próprio Framework
Como criar seu próprio Framework
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
 
Construindo um framework CSS
Construindo um framework CSSConstruindo um framework CSS
Construindo um framework CSS
 
A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web Design
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 

Destaque

Projeto oratória oficial
Projeto oratória oficialProjeto oratória oficial
Projeto oratória oficial
escolatunas
 
Java Web - MVC básico com JSP e Servlets
Java Web - MVC básico com JSP e ServletsJava Web - MVC básico com JSP e Servlets
Java Web - MVC básico com JSP e Servlets
Eduardo Mendes
 

Destaque (17)

229707509 bootstrap-3-el-manual-oficial
229707509 bootstrap-3-el-manual-oficial229707509 bootstrap-3-el-manual-oficial
229707509 bootstrap-3-el-manual-oficial
 
Entendendo os microframeworks em PHP
Entendendo os microframeworks em PHPEntendendo os microframeworks em PHP
Entendendo os microframeworks em PHP
 
Desenvolvendo aplicações Web escaláveis com PHP
Desenvolvendo aplicações Web escaláveis com PHPDesenvolvendo aplicações Web escaláveis com PHP
Desenvolvendo aplicações Web escaláveis com PHP
 
Bootstrap: a bias minimization technique of an estimator
Bootstrap: a bias minimization technique of an estimatorBootstrap: a bias minimization technique of an estimator
Bootstrap: a bias minimization technique of an estimator
 
Oratoria nas escolas 2012
Oratoria nas escolas 2012Oratoria nas escolas 2012
Oratoria nas escolas 2012
 
Aplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiênciaAplicações web multiplataforma - único código, múltiplas experiência
Aplicações web multiplataforma - único código, múltiplas experiência
 
Projeto oratória oficial
Projeto oratória oficialProjeto oratória oficial
Projeto oratória oficial
 
MVC Frameworks for building PHP Web Applications
MVC Frameworks for building PHP Web ApplicationsMVC Frameworks for building PHP Web Applications
MVC Frameworks for building PHP Web Applications
 
Arquitetura MVC, JavaBeans e DAO
Arquitetura MVC, JavaBeans e DAOArquitetura MVC, JavaBeans e DAO
Arquitetura MVC, JavaBeans e DAO
 
Java web
Java webJava web
Java web
 
PHP MVC
PHP MVCPHP MVC
PHP MVC
 
Java Web - MVC básico com JSP e Servlets
Java Web - MVC básico com JSP e ServletsJava Web - MVC básico com JSP e Servlets
Java Web - MVC básico com JSP e Servlets
 
Desenvolvimento em Três Camadas com PHP, MVC e Ajax
Desenvolvimento em Três Camadas com PHP, MVC e AjaxDesenvolvimento em Três Camadas com PHP, MVC e Ajax
Desenvolvimento em Três Camadas com PHP, MVC e Ajax
 
PHP Jedi - Boas Práticas e Alta Performance
PHP Jedi - Boas Práticas e Alta PerformancePHP Jedi - Boas Práticas e Alta Performance
PHP Jedi - Boas Práticas e Alta Performance
 
Como falar em público - Dicas para fazer bons slides e falar bem
Como falar em público - Dicas para fazer bons slides e falar bemComo falar em público - Dicas para fazer bons slides e falar bem
Como falar em público - Dicas para fazer bons slides e falar bem
 
Palestra Oratória
Palestra Oratória Palestra Oratória
Palestra Oratória
 
Desenvolvendo para WEB com JAVA
Desenvolvendo para WEB com JAVADesenvolvendo para WEB com JAVA
Desenvolvendo para WEB com JAVA
 

Semelhante a Mini-Curso sobre Bootstrap 3

Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução css
Jolvani Morgan
 
Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução css
Jolvani Morgan
 
InterAct 2010 - Acessibilidade e Inovação
InterAct 2010 - Acessibilidade e InovaçãoInterAct 2010 - Acessibilidade e Inovação
InterAct 2010 - Acessibilidade e Inovação
Horácio Soares
 

Semelhante a Mini-Curso sobre Bootstrap 3 (20)

CSS: pare de usar frameworks e atualize-se
CSS: pare de usar frameworks e atualize-seCSS: pare de usar frameworks e atualize-se
CSS: pare de usar frameworks e atualize-se
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento web
 
Oficina de Planejamento Corte: Seu layout virando código - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTEDOficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código - 15 EDTED
 
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
 
Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução css
 
A Web para todos - Acessibilidade na web
A Web para todos  - Acessibilidade na webA Web para todos  - Acessibilidade na web
A Web para todos - Acessibilidade na web
 
Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução css
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Material Design - do smartphone ao desktop
Material Design - do smartphone ao desktopMaterial Design - do smartphone ao desktop
Material Design - do smartphone ao desktop
 
Arquitetura de Informação - Rogério Pereira
Arquitetura de Informação - Rogério Pereira Arquitetura de Informação - Rogério Pereira
Arquitetura de Informação - Rogério Pereira
 
Currículo Lattes como credencial do pesquisador no sistema nacional de inovação
Currículo Lattes como credencial do pesquisador no sistema nacional de inovaçãoCurrículo Lattes como credencial do pesquisador no sistema nacional de inovação
Currículo Lattes como credencial do pesquisador no sistema nacional de inovação
 
PHPZEIRO: Adote um framework
PHPZEIRO: Adote um frameworkPHPZEIRO: Adote um framework
PHPZEIRO: Adote um framework
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
 
Front-end: do básico ao layout responsivo
Front-end: do básico ao layout responsivoFront-end: do básico ao layout responsivo
Front-end: do básico ao layout responsivo
 
Acessibilidade Toolkit: Entendendo de uma vez por todas a WCAG!
Acessibilidade Toolkit: Entendendo de uma vez por todas a WCAG!Acessibilidade Toolkit: Entendendo de uma vez por todas a WCAG!
Acessibilidade Toolkit: Entendendo de uma vez por todas a WCAG!
 
Front-end: O que é necessário saber ?
Front-end: O que é necessário saber ?Front-end: O que é necessário saber ?
Front-end: O que é necessário saber ?
 
InterAct 2010 - Acessibilidade e Inovação
InterAct 2010 - Acessibilidade e InovaçãoInterAct 2010 - Acessibilidade e Inovação
InterAct 2010 - Acessibilidade e Inovação
 
Html5
Html5Html5
Html5
 
{Palestra} Criação Web com Frameworks Front-end
{Palestra} Criação Web com Frameworks Front-end{Palestra} Criação Web com Frameworks Front-end
{Palestra} Criação Web com Frameworks Front-end
 
Web Standards
Web StandardsWeb Standards
Web Standards
 

Último

Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Dirceu Resende
 

Último (6)

Concurso Caixa TI - Imersão Final - Rogério Araújo.pdf
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdfConcurso Caixa TI - Imersão Final - Rogério Araújo.pdf
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdf
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 
Certificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfCertificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdf
 
Apresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfApresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdf
 
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
 

Mini-Curso sobre Bootstrap 3