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

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. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
@miquelcamps
betabeers.com
2

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. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
Programador != Diseñador
4

5. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
5

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. 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. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
WARNING
Para evitar la ceguera total se
recomienda cerrar un ojo
8

9. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
9

10. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
10

11. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
11

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. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
Por suerte existe bootstrap
13

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. 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. 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. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
Caso práctico
17

18. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
http://congreso.es
18

19. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
2007
200.000 €
19

20. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
2007
200.000 €
20

21. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
¿Versión móvil? Pues va a ser que no…
21

22. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
¿Errores? De eso sí tenemos
22

23. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
Bootstrap
extreme makeup
23

24. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
http://bit.ly/congresoweb
24

25. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
25

26. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
26

27. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
Manos a la obra
27

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. 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. 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. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
Estilos CSS usados
31

32. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
<div class="navbar navbar-­‐inverse">
32

33. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
<div class="container">
33

34. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
<div class="row">
34

35. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
<div class="col-­‐md-­‐4">
35

36. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
<div class="panel panel-­‐default">
36

37. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
<a class="btn btn-­‐default">
37

38. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
<span class="glyphicon glyphicon-­‐camera">
38

39. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
<span class="label label-­‐info">
39

40. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
<input class="form-­‐control">
40

41. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
<img class="img-­‐rounded">
41

42. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
<img class="img-­‐circle">
42

43. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
http://getbootstrap.com/css/
43

44. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
Componentes JS usados
44

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. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
<div class="carousel slide">
46

47. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
<a class="dropdown-­‐toggle">
47

48. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
Ventanas modales
http://getbootstrap.com/javascript
48

49. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
Pestañas
http://getbootstrap.com/javascript
49

50. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
Tooltips
http://getbootstrap.com/javascript
50

51. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
Tunear bootstrap
51

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. 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. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
Bootsnipp
http://bootsnipp.com/
54

55. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
PaintStrap
http://paintstrap.com/
55

56. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
56

57. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
57

58. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
Flat UI
http://designmodo.github.io/Flat-­‐UI/
58

59. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
Lavish
http://lavishbootstrap.com/
59

60. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
60

61. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
Templates
61

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. 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. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
Alternativas a bootstrap
64

65. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
Purecss.io by yahoo
65

66. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
Foundation by zurb
66

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. Leganés
6-7 Febrero 2013
Desarrollo Rápido con Bootstrap
¡Gracias!
!
@miquelcamps
68