Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Bootstrap e Designe Responsivo

No description
by

Léo WG

on 20 May 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Bootstrap e Designe Responsivo

Quem sou eu?
O que é esse tal de Bootstrap?
Bootstrap e Designe Responsivo

Porque ele é Rápido?
Porque ele é intuitivo?
História
Guias de Estilo
Tecnologias
É onde tudo
começa
Popular framework
front-end para
desenvolvimento
ágil e fácil.
bootstrap?
framework?
front-end?
Mark Otto
Jacob Thorton
2011
Características
Customização
Responsivo
Documentação




83kb
js
98kb
css
144kb
webfont
Carregar só o que precisa
Escrever menos código
Utilização de Less
Fases do Bootstrap
V1
V2
V3
Popularidade
Ferramentas que usam bootstrap
Ferramentas que estendem suas funcionalidades
Bootstrap Hero
Jestrap
Bootsnipp
Frameworks Similares
Designe Responsivo
960px não são
mais suficientes
Como
assim?
960
Experiência do Usuário
Múltiplos Dispositivos
Usabilidade
Designe Responsivo
Ethan Marcotte
a. 2010
2010
2011
2012 e 2013
domínio/index.php
domínio/tablet/index.php
domínio/smart/index.php
Web Designe responsivo
tty
screen
print
handheld
Condicional
Layouts Fluidos
É
px
ou
%
objeto / contexto =
resultado
layout fixo
layout fluido
Facilitando
Grid System
Como funciona na prática?
Opções de Grid
Mobile first
Etapas para um bom designe responsivo
Bom Planejamento
Uso de media-queries adequadamente
Utilizar um bom sistema de grade
Muito Teste
Case na Eagle Tecnologia
Interface Falcon FV Web
Sites
Dúvidas
@leowg
leowgweb.com.br
www.eagletecnologia.com
O bootstrap é um conjunto de componentes correlacionados para nos ajudar a desenvolver a interface com o usuário de forma ágil e fácil.
Agosto
data-api
Guia de estilo
Elementos Prontos
Plugins
Somente o
que precisar
CDN
Estrutura de arquivos
Template Básico
leowgweb@gmail.com
http://getbootstrap.com/
É um designe que responda de maneira diferente de acordo com o dispositivo

<meta

name=
"viewport"

content=
"width=device-width,initial-scale=1
"
>
A tag mágica
http://www.tinyfluidgrid.com/
http://goldengridsystem.com/
http://960.gs/
Full transcript