Desarollo rápido con Bootstrap

2,572
-1

Published on

Charla de @miquelcamps sobre bootstrap en t3chfest 2014 en la uc3m Leganés.

Published in: Technology, Business

Desarollo rápido con Bootstrap

  1. 1. Leganés 6-7 Febrero 2013 Miquel Camps Orteza Desarrollo Rápido con Bootstrap Except where otherwise noted, this work is licensed under: http://creativecommons.org/licenses/by-nc-sa/3.0/ c_b_n_a  
  2. 2. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap @miquelcamps   betabeers.com 2
  3. 3. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Esto  es  lo  que  hay… -­‐  Una  verdad   -­‐  ¿Por  qué  usar  bootstrap?   -­‐  Caso  práctico   -­‐  Como  tunearlo   -­‐  Alternativas 3
  4. 4. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Programador    !=    Diseñador 4
  5. 5. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 5
  6. 6. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap está  1  píxel  más  abajo no  están  centrados  con  la  pantalla 6
  7. 7. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Esto  es  lo  que  pasa  cuando  un   programador  diseña  una  web 7
  8. 8. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap WARNING   Para  evitar  la  ceguera  total  se   recomienda  cerrar  un  ojo 8
  9. 9. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 9
  10. 10. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 10
  11. 11. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 11
  12. 12. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap El  objetivo  de  un  programador  no  es   hacer  interfaces  bonitas,  pero  por  lo   menos  deberían  poder  ser  usadas  por   “personas  normales”. 12
  13. 13. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Por  suerte  existe  bootstrap 13
  14. 14. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap ¿Qué  es  bootstrap? Una  colección  de  estilos  css  y   componentes  javascript  para   hacer  aplicaciones  web  más   bonitas  y  usables   14
  15. 15. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Origen 2011   @mdo  &  @fat   Twitter   
 “Para  fomentar  la  coherencia  entre   las  herramientas  internas” 15
  16. 16. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap ¿Para  qué  usar  bootstrap? 1-­‐  Seguir  una  guía  de  estilo  para  maquetar  más  rápido.   ! 2-­‐  Maquetar  sólo  una  vez  para  escritorio  y  móvil.   ! 3-­‐  Tener  compatibilidad  entre  distintos  navegadores.   16
  17. 17. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Caso  práctico 17
  18. 18. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap http://congreso.es 18
  19. 19. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 2007   200.000  € 19
  20. 20. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 2007   200.000  € 20
  21. 21. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap ¿Versión  móvil?  Pues  va  a  ser  que  no… 21
  22. 22. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap ¿Errores?  De  eso  sí  tenemos 22
  23. 23. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Bootstrap   extreme  makeup 23
  24. 24. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap http://bit.ly/congresoweb 24
  25. 25. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 25
  26. 26. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 26
  27. 27. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Manos  a  la  obra 27
  28. 28. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap ¿Cómo  empezar? <link  href="bootstrap.min.css"  rel="stylesheet">   <script  src="jquery.min.js"></script>   <script  src="bootstrap.min.js"></script>   ! http://www.bootstrapcdn.com/ 28
  29. 29. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Versión  móvil <meta  name="viewport"  content="width=device-­‐width,   initial-­‐scale=1.0"> 29
  30. 30. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Compatibilidad  <  IE9 <!-­‐-­‐[if  lt  IE  9]>              <script  src="html5shiv.js"></script>              <script  src="respond.min.js"></script>   <![endif]-­‐-­‐> 30
  31. 31. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Estilos  CSS  usados 31
  32. 32. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <div  class="navbar  navbar-­‐inverse"> 32
  33. 33. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <div  class="container"> 33
  34. 34. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <div  class="row"> 34
  35. 35. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <div  class="col-­‐md-­‐4"> 35
  36. 36. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <div  class="panel  panel-­‐default"> 36
  37. 37. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <a  class="btn  btn-­‐default"> 37
  38. 38. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <span  class="glyphicon  glyphicon-­‐camera"> 38
  39. 39. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <span  class="label  label-­‐info"> 39
  40. 40. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <input  class="form-­‐control"> 40
  41. 41. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <img  class="img-­‐rounded"> 41
  42. 42. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <img  class="img-­‐circle"> 42
  43. 43. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap http://getbootstrap.com/css/ 43
  44. 44. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Componentes  JS  usados 44
  45. 45. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <script>   $(function(){          //  no  hace  falta  si  usas  componentes  por  defecto
        //  y  no  quieres  cambiarle  el  comportamiento   })   </script> No  hace  falta  añadir  ningún  JS  al  final 45
  46. 46. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <div  class="carousel  slide"> 46
  47. 47. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <a  class="dropdown-­‐toggle"> 47
  48. 48. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Ventanas  modales http://getbootstrap.com/javascript 48
  49. 49. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Pestañas http://getbootstrap.com/javascript 49
  50. 50. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Tooltips http://getbootstrap.com/javascript 50
  51. 51. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Tunear  bootstrap 51
  52. 52. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Importante 1-­‐  No  modifiques  bootstrap.css  crea  otro  .css   ! 2-­‐  Si  vas  a  cambiar  un  estilo  por  defecto,  aplica   otra  clase  class=“btn  btn-­‐primary  myclass"   52
  53. 53. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Generador  de  bootstrap -­‐ Cambia  los  colores  por  defecto.   -­‐ Añade/quita  estilos  CSS  y  componentes  JS.   -­‐ Cambia  el  nombre  de  variables  LESS.   ! http://getbootstrap.com/customize/   53
  54. 54. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Bootsnipp http://bootsnipp.com/ 54
  55. 55. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap PaintStrap http://paintstrap.com/ 55
  56. 56. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 56
  57. 57. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 57
  58. 58. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Flat  UI http://designmodo.github.io/Flat-­‐UI/ 58
  59. 59. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Lavish http://lavishbootstrap.com/ 59
  60. 60. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 60
  61. 61. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Templates 61
  62. 62. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Templates http://getbootstrap.com/getting-­‐started/#examples   http://www.bootstrapzero.com/   http://bootswatch.com   http://bootstraptor.com/   http://bootstrapstyler.com/   https://wrapbootstrap.com/   http://startbootstrap.com/ 62
  63. 63. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Sitios  hechos  con  bootstrap http://expo.getbootstrap.com/   ! http://builtwithbootstrap.com/   ! http://www.lovebootstrap.com/ 63
  64. 64. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Alternativas  a  bootstrap 64
  65. 65. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Purecss.io  by  yahoo 65
  66. 66. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Foundation  by  zurb 66
  67. 67. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Diferencias     js     icons   size     ui  kit   cdn     bootstrap   sí       sí       209  KB     sí       sí                   pure   x     x     37  KB   sí     sí                 foundation   sí   sí   139  KB   sí   sí 67
  68. 68. Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap ¡Gracias!   ! @miquelcamps 68

×