• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Desarollo rápido con Bootstrap
 

Desarollo rápido con Bootstrap

on

  • 1,402 views

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

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

Statistics

Views

Total Views
1,402
Views on SlideShare
1,158
Embed Views
244

Actions

Likes
8
Downloads
31
Comments
2

7 Embeds 244

http://betabeers.com 102
http://miquelcamps.tumblr.com 99
https://twitter.com 33
http://feedly.com 4
http://www.slideee.com 4
http://www.linkedin.com 1
http://www.tumblr.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Desarollo rápido con Bootstrap Desarollo rápido con Bootstrap Presentation Transcript

    • 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  
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap @miquelcamps   betabeers.com 2
    • 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
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Programador    !=    Diseñador 4
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 5
    • 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
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Esto  es  lo  que  pasa  cuando  un   programador  diseña  una  web 7
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap WARNING   Para  evitar  la  ceguera  total  se   recomienda  cerrar  un  ojo 8
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 9
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 10
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 11
    • 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
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Por  suerte  existe  bootstrap 13
    • 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
    • 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
    • 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
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Caso  práctico 17
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap http://congreso.es 18
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 2007   200.000  € 19
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 2007   200.000  € 20
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap ¿Versión  móvil?  Pues  va  a  ser  que  no… 21
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap ¿Errores?  De  eso  sí  tenemos 22
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Bootstrap   extreme  makeup 23
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap http://bit.ly/congresoweb 24
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 25
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 26
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Manos  a  la  obra 27
    • 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
    • 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
    • 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
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Estilos  CSS  usados 31
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <div  class="navbar  navbar-­‐inverse"> 32
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <div  class="container"> 33
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <div  class="row"> 34
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <div  class="col-­‐md-­‐4"> 35
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <div  class="panel  panel-­‐default"> 36
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <a  class="btn  btn-­‐default"> 37
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <span  class="glyphicon  glyphicon-­‐camera"> 38
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <span  class="label  label-­‐info"> 39
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <input  class="form-­‐control"> 40
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <img  class="img-­‐rounded"> 41
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <img  class="img-­‐circle"> 42
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap http://getbootstrap.com/css/ 43
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Componentes  JS  usados 44
    • 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
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <div  class="carousel  slide"> 46
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap <a  class="dropdown-­‐toggle"> 47
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Ventanas  modales http://getbootstrap.com/javascript 48
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Pestañas http://getbootstrap.com/javascript 49
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Tooltips http://getbootstrap.com/javascript 50
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Tunear  bootstrap 51
    • 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
    • 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
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Bootsnipp http://bootsnipp.com/ 54
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap PaintStrap http://paintstrap.com/ 55
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 56
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 57
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Flat  UI http://designmodo.github.io/Flat-­‐UI/ 58
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Lavish http://lavishbootstrap.com/ 59
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap 60
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Templates 61
    • 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
    • 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
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Alternativas  a  bootstrap 64
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Purecss.io  by  yahoo 65
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap Foundation  by  zurb 66
    • 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
    • Leganés 6-7 Febrero 2013 Desarrollo  Rápido  con  Bootstrap ¡Gracias!   ! @miquelcamps 68