Keynote por dentro do bootstrap
description
Transcript of Keynote por dentro do bootstrap
Entendendo o
Alexandre Magno
http://alexandremagno.net
Wednesday, July 10, 2013
Quem sou eu?
Wednesday, July 10, 2013
Apaixonado por música
Wednesday, July 10, 2013
tenho uma banda
Wednesday, July 10, 2013
também sou apaixonado por Open Source...
Twitter Bootstrap em portuguêsjQuery sliding
jQuery DestaqueWP-Agenda
https://github.com/alexanmtz/bootstrap
http://www.github.com/alexanmtz
Wednesday, July 10, 2013
Style guide é onde tudo começa...
Definições dos elementos que compõe uma página, de forma independente
Wednesday, July 10, 2013
Entendendo oFramework de front-end rápido e intuitivo para um desenvolvimento web rápido e fácil
2
tags: Bootstrap, jQuery, HTML5, Less, Node.js, CSS3, Responsive, Styleguide
Docs
HTML5
CSS3
4 Node.js
3
6
7
8
Style Guide
5 Jquery
Responsive
Customização
Wednesday, July 10, 2013
Por que rápido?Framework de front-end rápido e intuitivo para um desenvolvimento web rápido e fácil
bootstrap-server
bootstrap-min.cssbootstrap-min.js
26KB css8.9KB js
Wednesday, July 10, 2013
Por que intuitivo?Framework de front-end rápido e intuitivo para um desenvolvimento web rápido e fácil
O HTML do Bootstrap é padronizado e bastante declarativo
Wednesday, July 10, 2013
Bootstrap em fases
Criado em 2011
v1 - Desktop
v2 - Responsive
v3 - Mobile First!
Wednesday, July 10, 2013
Popularidade em 26 de Junho de 2013
52.115
16.802
fonte:Github
Wednesday, July 10, 2013
Popularidade Integração com outros frameworks
Wednesday, July 10, 2013
Popularidade Integração com outros frameworks
Wednesday, July 10, 2013
Frameworks similares ao Bootstrap
http://foundation.com
Wednesday, July 10, 2013
Frameworks similares ao Bootstrap
http://skeleton.com
Wednesday, July 10, 2013
Frameworks similares ao Bootstrap
“Mark Otto”
Wednesday, July 10, 2013
Tecnologias que compõe o Bootstrap
Wednesday, July 10, 2013
Bootstrap inspirando novos templates
http://expo.getbootstrap.com
Com o mesmo HTML e CSS você tem vários templates para websites e apps
Wednesday, July 10, 2013
Customizando turbinando o Bootstrap
Wednesday, July 10, 2013
Prototipar websites e apps com o jestrap
Wednesday, July 10, 2013
Bootstrapers sites que usam o Bootstrap
Grid formatado
Design limpo
Botões definidos
Formulário padrão
Wednesday, July 10, 2013
Bootstrepes sites que não usam o Bootstrap
Grid formatado
Design limpo
Botões definidos
Responsive!
Wednesday, July 10, 2013
Bootstrepes sites que “ousam” com o Bootstrap
Modificação mais intensaWednesday, July 10, 2013
Bootstrapers ferramentas para o Bootstrap
Wednesday, July 10, 2013
Bootstrap agora é responsive
Criado em 2011
v1 - Desktop
v2 - Responsive
v3 - Mobile First!
Wednesday, July 10, 2013
Não se esqueça da metatag
SERÁ
Wednesday, July 10, 2013
Será só imaginação
Wednesday, July 10, 2013
a metatag viewport é realmente necessária?
Wednesday, July 10, 2013
Responsive no Bootstrap
Wednesday, July 10, 2013
Responsive no Bootstrap com Formulários
As classes do grid podem ser aplicadas para diferentes layouts de formulários
Wednesday, July 10, 2013
Responsive no Bootstrap com Formulários
As classes do grid podem ser aplicadas para diferentes layouts de formulários
Wednesday, July 10, 2013
Responsive no Bootstrap com Formulários
As classes do grid podem ser aplicadas para diferentes layouts de formulários
Wednesday, July 10, 2013
Responsive no Bootstrap com Formulários
As classes do grid podem ser aplicadas para diferentes layouts de formulários
Wednesday, July 10, 2013
Responsive no Bootstrap com Formulários
As classes do grid podem ser aplicadas para diferentes layouts de formulários
Wednesday, July 10, 2013
Responsive no Bootstrap com Media Queries
Wednesday, July 10, 2013
Responsive no Bootstrap
Classes utilitárias
Wednesday, July 10, 2013
Vantagens filosofia Bootstrap
Atributos Data ao invés de Javascript declarativo
Extensões naturais do HTML e CSS
O Front-end é um produto
Animações por CSS3
ex: atributo placeholder introduzido no HTML5
ex: <body data-spy=”scroll” data-target=”.bs-docs-sidebar”>
1
2
3
4
Wednesday, July 10, 2013
desenvolvimento para o Bootstrap
Plugin Javascript
Tirando vantagem do Data api
Wednesday, July 10, 2013
desenvolvimento para o Bootstrap
Plugin Javascript
Animações por CSS3Wednesday, July 10, 2013
desenvolvimento para o Bootstrap
Less
Use variáveis para gerar CSS customizados
controlede z-index
por variáveis
Wednesday, July 10, 2013
desenvolvimento para o Bootstrap
Less
Variação de cores através de funções
controlede z-index
por variáveis
Wednesday, July 10, 2013
Bootstrap de agora em diante
Criado em 2011
v1 - Desktop
v2 - Responsive
v3 - Mobile First!
Wednesday, July 10, 2013
Bootstrap 3.0 construído com Mobile First
Wednesday, July 10, 2013
Bootstrap 3.0 construído com Mobile First
Wednesday, July 10, 2013
Bootstrap 3.0 mas por que Mobile First?
A ergonomia do de um dispositivo móvel nos leva a diferentes considerações sobre usabilidade
Wednesday, July 10, 2013
Estrutura dos arquivos
Wednesday, July 10, 2013
Building checando se está tudo nos conformes
Rodando o JSHINT, compilando LESS e compilando e minificando o Javascript
Wednesday, July 10, 2013
Bootstrap na globo.com
Os desenvolvedores se reuniram
Precisamospadronizar
os produtos!Vamos construir
um framework!
Enquanto isto na Globo.com
Wednesday, July 10, 2013
Bootstrap na globo.com
Várias tecnologias -> n front-ends?Wednesday, July 10, 2013
Bootstrap na globo.com
Várias tecnologias -> 1 front-end?Wednesday, July 10, 2013
Bootstrap na globo.com
Que joguem a primeira pedra
Usar o Bootstrap?
Wednesday, July 10, 2013
Bootstrap na globo.com
Nos grupos de discussão
Enquanto isso...
Wednesday, July 10, 2013
Bootstrap na globo.com
Somentetraduzirame trocaramo nome!
Wednesday, July 10, 2013
Bootstrap na globo.com
E Outros...Wednesday, July 10, 2013
Bootstrap na globo.com
Opinião do @fatWednesday, July 10, 2013
Tradução primeira não-oficial recomendada pelo Bootstrap
Wednesday, July 10, 2013
Bootstrap na globo.com
Wednesday, July 10, 2013
Bootstrap na globo.com
Wednesday, July 10, 2013
Bootstrap na globo.com
Pull Requests aceitos no BootstrapWednesday, July 10, 2013
Bootstrap na globo.com
Mande um pull-requestpara gente ;-)
Wednesday, July 10, 2013
E vem aí
Bootstrap Mobile First
Wednesday, July 10, 2013
Perguntas?
Blog: blog.alexandremagno.net
Twitter: alexanmtz
github: github.com/alexanmtz
Wednesday, July 10, 2013