Twitter Bootstrap

696 views

Published on

Conheça o framework de front-end intuitivo para um desenvolvimento web fácil e rápido

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
696
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Meu nome é Raphael França, eu sou Analista de Sistemas e estou aqui para apresentar uma introdução ao Bootstrap do Twitter.
  • Bootstrap é o que chamamos Framework UI (front-end). Ele contém um conjunto de JavaScript, CSS e imagens que ajuda você a criar aplicações rápidas, limpas e altamente usável.
  • Bootstrap tem como base um sistema de grid em 12 colunas.O que é um grid? Um sistema de grid é uma forma de criar uma base sólida para construir o seu projecto por diante.Se você quer que sua aplicação web tenha uma navegação à esquerda você pode criar seu HTML usando o número de linha 3Se você não quiser alguma navegação e você quer que seu conteúdo seja o mais amplo possível, então você pode usar o número de linha 5Esta concepção de grid foi popularizado por 960 http://960.gs sistema de gridBluePrinthttp://www.blueprintcss.org
  • Se você quiser implementar sua aplicação com uma navegação à esquerda como eu falei, este é o HTML necessário.Você também pode aninhar suas colunas com outras colunas.
  • Bootstrap oferece um personalizador baseado na Web que permitem a geração de um arquivo CSS com base em suas necessidades específicas.
  • Aqui está uma lista de alguns dos componentes CSS disponível. Há dezenas deles disponíveis com no bootstrap.
  • Bootstrap dá vida à sua interface do usuário usando pluginsjQuery. Aqui estão alguns exemplos de grandes Elementos. Mais uma vez, você tem acesso a dezenas deles gratuitamente.
  • Bootstrap dá vida à sua interface do usuário usando pluginsjQuery. Aqui estão alguns exemplos de grandes Elementos. Mais uma vez, você tem acesso a dezenas deles gratuitamente.
  • Bootstrap oferece um personalizador baseado na Web que permitem a geração de um arquivo CSS com base em suas necessidades específicas.
  • O mesmo vale para os plugins de JavaScript. Para os fãs de Mootools que você pode encontrar uma versão Mootools aqui: http://anutron.github.com/mootools-bootstrap
  • Bootstrap também fornece uma maneira para gerar uma versão completamente original do CSS usando LESS.Eu não vou falar sobre LESS, tudo que você precisa saber agora é que ele compila uma versão LESS do seu CSS, onde você pode definir variáveis ​​e ninho seletores CSS.Se você quiser mais informações, por favor verifique http://lesscss.org/.
  • Agora que você sabe sobre LESS, é facilmente compreensível que podemos criar totalmente diferentes visuais baseados no mesmo HTML. Aqui estão algumas bom exemplo
  • Agora que você sabe sobre LESS, é facilmente compreensível que podemos criar totalmente diferentes visuais baseados no mesmo HTML. Aqui estão algumas bom exemplo
  • http://bootswatch.com
  • http://bootswatch.com
  • Agora vou explicar o porquê usar Bootstrap é uma boa escolha.
  • Bootstrap tem ótimas funcionalidades. Acabamos de ver algumas e tenho certeza que você já sente o potencial que o projeto tem.Vamos resumi-lo.Bootstrap:- Tem GridSystem => permitem que você crie você fundação da aplicação web- Contém dezenas de componentes CSS => Permite você criar uma grande UI- É alimentado por pluginsJavaScript => dá vida ao UI CSS- Pode ser personalizado usando um personalizador baseado na web
  • Bootstrap é bom para criar live mockups (protótipos). Tenho certeza de que alguns de vocês aqui ainda estão usando Balsamiqmockups, é uma ótima ferramenta, mas não pode fazer muita coisa com ele. http://www.balsamiq.com/products/mockups
  • Aqui está um protótipo usando Bootstrap.
  • Fácil criação de prova de conceito => Para responder à pergunta é factível?Reúna primeiros Comentários => Para responder às perguntas: É bom? É viável? Em seu projeto, você quer saber o mais cedo possível, se a idéia é ou não viável. Se não for bom você quer falhar rápido (tipo de abordagem Agile)Uma que você fez todas as pesquisas e os testes para se orientar você pode se dedicar a execução de projetos mais sofisticados e se preocupar com a engenharia.
  • É a capacidade de redimensionar o conteúdo da sua página web para qualquer dispositivo e tamanho da tela.
  • Design Responsivo do Bootstrap é muito bom e é um recurso muito legal de ter hoje em dia com todos os celulares, tablets, laptops e telas grandes que temos disponíveis.Algo que também é bom observar é que este Design Responsivo através do CSS. Que costumava ser tratado com JavaScript há algum tempo atrás.
  • Ótimos recursos => Dezenas de estado dos recursos da arteProjeto Responsive => funciona todas as telasProtótipo Vivo => GoAgile? Comunidade grande => É muito importante para um projeto open source. Bootstrap tem futuro brilhante pela frente.
  • Bootstrap é hoje amplamente utilizado na web. Existe centenas de templates para famosos CMS como Joomla, WordPress e Drupal.Pouco tempo atrás Joomla surpreendeu a todos usando Bootstrap para a sua mais recente versão 3.0.Para aqueles que estão interessados ​​em Joomla, você também vai notar essa mudança é uma pequena revolução em si. Joomla não somente mudar para o Bootstrap, mas também mudar a Jquery ... Como Jquery é mais popular e amplamente utilizado em toda a web, eu acho que como um fã Joomla que esta mudança era necessária para atrair uma nova comunidade de desenvolvedores Joomla que vai dar um futuro melhor .
  • Viadeo (o maior concorrente LinkedIn) que pode nunca chegar perto de ser um linkedin, mas eles são baseados em Bootstrap.
  • Twitter Bootstrap

    1. 1. FLISOL-DF 2013Por: Raphael França
    2. 2.  Números (Abril 2013) GitHub 49,107 star 14,924 fork
    3. 3.  960 Grid System http://960.gs/ Blue Print CSShttp://www.blueprintcss.org/ Golden Grid Systemhttp://goldengridsystem.com/
    4. 4.  Exemplos
    5. 5.  Tabs: Breadcrumb: Paginação: Alertas: Barra de progresso: Botões:
    6. 6.  JavaScript (Mootools)http://anutron.github.com/mootools-bootstrap
    7. 7.  http://lesscss.org
    8. 8.  http://www.slideshare.net/raphaelfranca
    9. 9. http://twitter.github.io/bootstrap/

    ×