Bootstrap - Amor e ódio

1.120 visualizações

Publicada em

Palestra na WebBR 2013 pela W3C Brasil

Publicada em: Tecnologia
2 comentários
8 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
1.120
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
28
Comentários
2
Gostaram
8
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Bootstrap - Amor e ódio

  1. 1. BOOTSTRAP - AMOR E ÓDIO 0
  2. 2. OI Hanneli(Hmudo) Codeminer 42 -HIRING! Café, Pokémon, Lego, bichos, ciência
  3. 3. O QUE NÃO VAMOS VER AQUI
  4. 4. O QUE VAMOS VER AQUI Por que se falatanto em Bootstrap Coisas legais no Bootstrap Coisas não tão legais no Bootstrap Neate outras alternativas GIFs e imagens legais <3
  5. 5. POR QUE AMOR E ÓDIO?
  6. 6. DEVS DE BACKEND
  7. 7. "Dev de backend é aquele caraque vai fazer uma páginamuito feia, mas cujo servidor permanece empé quase sempre." FRONT, Desenvolvedor, 2014
  8. 8. Ê LINDEZA
  9. 9. "QUE LINDO, GENTE, DESSA VEZ NÃO DEIXEI O FUNDO BRANCO!"
  10. 10. "Se você não fizer algo decente, vou droppar seu banco"
  11. 11. Vem então o Bootstrap!
  12. 12. "QUE LINDO!!!111!111!"
  13. 13. Fonte: http://www.sitepoint.com/11-reasons-to-use-twitter- bootstrap/
  14. 14. #1 - É MUITO RÁPIDO FAZER O LAYOUT PADRÃO
  15. 15. #2 - LESS E MUITO JAVASCRIPT DE BRINDE
  16. 16. #3 - RESPONSIVO
  17. 17. #4 - DOCUMENTAÇÃO BEM ESTRUTURADA E INTUITIVA
  18. 18. VOU USAR ISSO <3
  19. 19. EEEEEEEEEEPPPAAAAAAAAAAAA CCCCCCALLLLLLLMMMAAAAAAAAAAAIIIIIIIIIIII COM ESSE BOOTSTRAP!!!!!!!!!111111111!!!!!!
  20. 20. Vairolar um fight...
  21. 21. Sabe onde eu vou enfiar esse seu Bootstrap?
  22. 22. CALMA MIIKA S2
  23. 23. PROBLEMAS DO BOOTSTRAP
  24. 24. #1 - A SEPARAÇÃO ENTRE CONTEÚDO E APRESENTAÇÃO NÃO É MUITO BOA
  25. 25. #1 - A SEPARAÇÃO ENTRE CONTEÚDO E APRESENTAÇÃO NÃO É MUITO BOA <divclass="row"> <divid="article"class="span8">...</div> <divid="aside"class="span4">...</div> </div> /*LESS*/ article{.column(8);} aside{.column(4);}
  26. 26. #2 - MUITOS NOMES DE CLASSES POUCO INTUITIVOS
  27. 27. #2 - MUITOS NOMES (POUCO INTUITIVOS) DE CLASSES
  28. 28. #3 - REDESIGN É CUSTOSO
  29. 29. #3 - REDESIGN É CUSTOSO ORIGINAL COM ALGUNS DETALHES ALTERADOS
  30. 30. #3 - REDESIGN É CUSTOSO .paginationul{ border-radius:0px; box-shadow:none; } .paginationul>li>a, .paginationul>li>span{ padding:8px16px; line-height:1em; text-decoration:underline; background-color:none; border-top:none; border-bottom:none; } .paginationul>li>a:hover, .paginationul>.active>a, .paginationul>.active>span{ background-color:transparent; color:black; } .paginationul>li:first-child>a, .paginationul>li:first-child>span{ border-top-left-radius:0; border-bottom-left-radius:0; } .paginationul>li:last-child>a, .paginationul>li:last-child>span{ border-top-right-radius:0; border-bottom-right-radius:0; } SÓ isso
  31. 31. #4 - PROBLEMAS SEMÂNTICOS
  32. 32. #4 - PROBLEMAS SEMÂNTICOS <iclass="icon-search"></i>
  33. 33. #4 - PROBLEMAS SEMÂNTICOS WTFO QUE item aver com icon??????
  34. 34. #5 - MUITOS SITES TERÃO A MESMA IDENTIDADE VISUAL QUE O SEU
  35. 35. E AGORA? O QUE POSSO UTILIZAR?
  36. 36. MOTIVOS PARA UTILIZAR O BOURBON/NEAT
  37. 37. (MEUS GIFS BONS ESTÃO ACABANDO)
  38. 38. #1 - COMPASS TYPE MIXINS
  39. 39. #2 - MUITO MAIS SEMÂNTICO - VOCÊ DETERMINA OS NOMES aside {@includespan-columns(3);} section{@includespan-columns(6);} Livre de rows e cols!
  40. 40. #3 - DOCUMENTAÇÃO MUITO BOA
  41. 41. NEM TUDO É PERFEITO
  42. 42. MOTIVOS PELOS QUAIS VOCÊ PODE NÃO CURTIR O BOURBON / NEAT
  43. 43. #1 - É PRECISO CONHECER MAIS SOBRE CSS
  44. 44. #2 - ESCREVE-SE MAIS CÓDIGO
  45. 45. #3 - É PRECISO TER CAUTELA COM OS MIXINS.
  46. 46. AINDA HÁ MAIS OPÇÕES - FOUNDATION
  47. 47. CONCLUSÕES Nem tudo é perfeito Escolhao caso mais adequado paravocê
  48. 48. CONCLUSÕES Seique ninguém perguntou, mas minhaopinião é
  49. 49. CONCLUSÕES Usar o que form melhor paravocê. Considero semânticamuito importante então tendo apriorizá-la.
  50. 50. OBRIGADA!! PERGUNTAS? @hannelita-hannelita@gmail.com
  51. 51. REFERÊNCIAS http://www.zingdesign.com/5-reasons-not-to-use-twitter- bootstrap/ http://halanstevens.com/blog/bootstrap-youre-doing-it- wrong/ http://fourword.fourkitchens.com/article/you-dont-need- bootstrap http://blog.teamtreehouse.com/use-bootstrap-or-foundation https://www.liquidlight.co.uk/blog/article/twitter-bootstrap- 3-the-good-the-bad-the-ugly/ http://lucisferre.net/2013/06/14/bootstrap-foundation- bourbon-neat/

×