Keynote por dentro do bootstrap

62
Entendendo o Alexandre Magno http://alexandremagno.net Wednesday, July 10, 2013

description

O Bootstrap se tornou um Framework de Front-end muito utilizado nas aplicações atualmente. Não é a toa que ele é um dos projetos com mais forks no Github. Nesta palestra você vai entender a fundo sua estrutura, construída com o Node.js e o projeto que serve os downloads personalizados, o Bootstrap server, de modo que você será capaz de entender a fundo como ele foi estruturado, além de ficar sabendo o que vem aí com o Bootstrap 3.

Transcript of Keynote por dentro do bootstrap

Page 1: Keynote   por dentro do bootstrap

Entendendo o

Alexandre Magno

http://alexandremagno.net

Wednesday, July 10, 2013

Page 2: Keynote   por dentro do bootstrap

Quem sou eu?

Wednesday, July 10, 2013

Page 3: Keynote   por dentro do bootstrap

Apaixonado por música

Wednesday, July 10, 2013

Page 4: Keynote   por dentro do bootstrap

tenho uma banda

Wednesday, July 10, 2013

Page 5: Keynote   por dentro do bootstrap

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

Page 6: Keynote   por dentro do bootstrap

Style guide é onde tudo começa...

Definições dos elementos que compõe uma página, de forma independente

Wednesday, July 10, 2013

Page 7: Keynote   por dentro do bootstrap

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

Page 8: Keynote   por dentro do bootstrap

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

Page 9: Keynote   por dentro do bootstrap

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

Page 10: Keynote   por dentro do bootstrap

Bootstrap em fases

Criado em 2011

v1 - Desktop

v2 - Responsive

v3 - Mobile First!

Wednesday, July 10, 2013

Page 11: Keynote   por dentro do bootstrap

Popularidade em 26 de Junho de 2013

52.115

16.802

fonte:Github

Wednesday, July 10, 2013

Page 12: Keynote   por dentro do bootstrap

Popularidade Integração com outros frameworks

Wednesday, July 10, 2013

Page 13: Keynote   por dentro do bootstrap

Popularidade Integração com outros frameworks

Wednesday, July 10, 2013

Page 16: Keynote   por dentro do bootstrap

Frameworks similares ao Bootstrap

“Mark Otto”

Wednesday, July 10, 2013

Page 17: Keynote   por dentro do bootstrap

Tecnologias que compõe o Bootstrap

Wednesday, July 10, 2013

Page 18: Keynote   por dentro do bootstrap

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

Page 19: Keynote   por dentro do bootstrap

Customizando turbinando o Bootstrap

Wednesday, July 10, 2013

Page 20: Keynote   por dentro do bootstrap

Prototipar websites e apps com o jestrap

Wednesday, July 10, 2013

Page 21: Keynote   por dentro do bootstrap

Bootstrapers sites que usam o Bootstrap

Grid formatado

Design limpo

Botões definidos

Formulário padrão

Wednesday, July 10, 2013

Page 22: Keynote   por dentro do bootstrap

Bootstrepes sites que não usam o Bootstrap

Grid formatado

Design limpo

Botões definidos

Responsive!

Wednesday, July 10, 2013

Page 23: Keynote   por dentro do bootstrap

Bootstrepes sites que “ousam” com o Bootstrap

Modificação mais intensaWednesday, July 10, 2013

Page 24: Keynote   por dentro do bootstrap

Bootstrapers ferramentas para o Bootstrap

Wednesday, July 10, 2013

Page 25: Keynote   por dentro do bootstrap

Bootstrap agora é responsive

Criado em 2011

v1 - Desktop

v2 - Responsive

v3 - Mobile First!

Wednesday, July 10, 2013

Page 26: Keynote   por dentro do bootstrap

Não se esqueça da metatag

SERÁ

Wednesday, July 10, 2013

Page 27: Keynote   por dentro do bootstrap

Será só imaginação

Wednesday, July 10, 2013

Page 28: Keynote   por dentro do bootstrap

a metatag viewport é realmente necessária?

Wednesday, July 10, 2013

Page 29: Keynote   por dentro do bootstrap

Responsive no Bootstrap

Wednesday, July 10, 2013

Page 30: Keynote   por dentro do bootstrap

Responsive no Bootstrap com Formulários

As classes do grid podem ser aplicadas para diferentes layouts de formulários

Wednesday, July 10, 2013

Page 31: Keynote   por dentro do bootstrap

Responsive no Bootstrap com Formulários

As classes do grid podem ser aplicadas para diferentes layouts de formulários

Wednesday, July 10, 2013

Page 32: Keynote   por dentro do bootstrap

Responsive no Bootstrap com Formulários

As classes do grid podem ser aplicadas para diferentes layouts de formulários

Wednesday, July 10, 2013

Page 33: Keynote   por dentro do bootstrap

Responsive no Bootstrap com Formulários

As classes do grid podem ser aplicadas para diferentes layouts de formulários

Wednesday, July 10, 2013

Page 34: Keynote   por dentro do bootstrap

Responsive no Bootstrap com Formulários

As classes do grid podem ser aplicadas para diferentes layouts de formulários

Wednesday, July 10, 2013

Page 35: Keynote   por dentro do bootstrap

Responsive no Bootstrap com Media Queries

Wednesday, July 10, 2013

Page 36: Keynote   por dentro do bootstrap

Responsive no Bootstrap

Classes utilitárias

Wednesday, July 10, 2013

Page 37: Keynote   por dentro do bootstrap

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

Page 38: Keynote   por dentro do bootstrap

desenvolvimento para o Bootstrap

Plugin Javascript

Tirando vantagem do Data api

Wednesday, July 10, 2013

Page 39: Keynote   por dentro do bootstrap

desenvolvimento para o Bootstrap

Plugin Javascript

Animações por CSS3Wednesday, July 10, 2013

Page 40: Keynote   por dentro do bootstrap

desenvolvimento para o Bootstrap

Less

Use variáveis para gerar CSS customizados

controlede z-index

por variáveis

Wednesday, July 10, 2013

Page 41: Keynote   por dentro do bootstrap

desenvolvimento para o Bootstrap

Less

Variação de cores através de funções

controlede z-index

por variáveis

Wednesday, July 10, 2013

Page 42: Keynote   por dentro do bootstrap

Bootstrap de agora em diante

Criado em 2011

v1 - Desktop

v2 - Responsive

v3 - Mobile First!

Wednesday, July 10, 2013

Page 43: Keynote   por dentro do bootstrap

Bootstrap 3.0 construído com Mobile First

Wednesday, July 10, 2013

Page 44: Keynote   por dentro do bootstrap

Bootstrap 3.0 construído com Mobile First

Wednesday, July 10, 2013

Page 45: Keynote   por dentro do bootstrap

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

Page 46: Keynote   por dentro do bootstrap

Estrutura dos arquivos

Wednesday, July 10, 2013

Page 47: Keynote   por dentro do bootstrap

Building checando se está tudo nos conformes

Rodando o JSHINT, compilando LESS e compilando e minificando o Javascript

Wednesday, July 10, 2013

Page 48: Keynote   por dentro do bootstrap

Bootstrap na globo.com

Os desenvolvedores se reuniram

Precisamospadronizar

os produtos!Vamos construir

um framework!

Enquanto isto na Globo.com

Wednesday, July 10, 2013

Page 49: Keynote   por dentro do bootstrap

Bootstrap na globo.com

Várias tecnologias -> n front-ends?Wednesday, July 10, 2013

Page 50: Keynote   por dentro do bootstrap

Bootstrap na globo.com

Várias tecnologias -> 1 front-end?Wednesday, July 10, 2013

Page 51: Keynote   por dentro do bootstrap

Bootstrap na globo.com

Que joguem a primeira pedra

Usar o Bootstrap?

Wednesday, July 10, 2013

Page 52: Keynote   por dentro do bootstrap

Bootstrap na globo.com

Nos grupos de discussão

Enquanto isso...

Wednesday, July 10, 2013

Page 53: Keynote   por dentro do bootstrap

Bootstrap na globo.com

Somentetraduzirame trocaramo nome!

Wednesday, July 10, 2013

Page 54: Keynote   por dentro do bootstrap

Bootstrap na globo.com

E Outros...Wednesday, July 10, 2013

Page 55: Keynote   por dentro do bootstrap

Bootstrap na globo.com

Opinião do @fatWednesday, July 10, 2013

Page 56: Keynote   por dentro do bootstrap

Tradução primeira não-oficial recomendada pelo Bootstrap

Wednesday, July 10, 2013

Page 57: Keynote   por dentro do bootstrap

Bootstrap na globo.com

Wednesday, July 10, 2013

Page 58: Keynote   por dentro do bootstrap

Bootstrap na globo.com

Wednesday, July 10, 2013

Page 59: Keynote   por dentro do bootstrap

Bootstrap na globo.com

Pull Requests aceitos no BootstrapWednesday, July 10, 2013

Page 60: Keynote   por dentro do bootstrap

Bootstrap na globo.com

Mande um pull-requestpara gente ;-)

Wednesday, July 10, 2013

Page 61: Keynote   por dentro do bootstrap

E vem aí

Bootstrap Mobile First

Wednesday, July 10, 2013

Page 62: Keynote   por dentro do bootstrap

Perguntas?

Blog: blog.alexandremagno.net

Twitter: alexanmtz

github: github.com/alexanmtz

Wednesday, July 10, 2013