Tip:
Highlight text to annotate it
X
Hola, soy Alejandro Jover Morales, alumno de Ingeniería Multimedia de la Universidad
de Alicante, y en este vídeo que forma parte del curso "Introducción al desarrollo web",
te voy a presentar las novedades de la versión 3 del framework Bootstrap.
Podéis contactar conmigo a partir de mi web www.codigoalternativo.com, de mi correo alexjovermorales@gmail.com
o seguirme en mi cuenta de twitter @alexjoverm
Antes de empezar, recordar que este video habla sobre la actualización de la versión
3 de Bootstrap, por lo que en este video asumimos que ya sabes que es Bootstrap. Si no, puedes
encontrar el video que habla sobre él en cualquiera de estos enlaces del curso iDesWeb.
Si quieres visitar la web de Bootstrap, puedes seguir el siguiente enlace que te llevará
a la web oficial. Dicho esto, empezamos con el contenido de este video de Bootstrap3.
Las principales novedades que podemos encontrar en la versión 3 de este framework, son la
filosofía de trabajo, el grid o parrilla, el nombre de las clases, y otros cambios más
pequeños que comentaremos más adelante.
Cuando hablamos de filosofía de trabajo, nos referimos a la forma en que Bootstrap
está construido y cómo está enfocado. Esta versión de Bootstrap se ha reformado para
seguir esta filosofía llamada "Mobile First", implantada por Luke Wroblewskiy inspirada
en tendencias de Jeffrey Zeldman, un reconocido diseñador web y emprendedor. Podrás encontrar
más información sobre estos autores en cualquiera de estos enlaces.
Esta filosofía describe una nueva manera de plantear el diseño de una página web,dando
prioridad a los dispositivos móviles.
Según Luke Wroblewski, el diseño de una web debe empezarse por construir primero para
las pantallas pequeñas, y posteriormente ir diseñando las demás, en orden creciente
de tamaño. Esto es debido a que cuando se hace al contrario, es decir, empezando por
las pantallas grandes, puede suceder que luego no quepa todo en la pantalla pequeña si se
tiene mucho contenido.
El cambio más destacable en la versión 3 de Bootstrap lo encontramos en el Grid o Parrilla.
Este sistema de cuadrículas ha sido remodelado y ampliado para ofrecer mayor flexibilidad
y eficiencia.
El Nuevo Grid está dividido en 4 tamaños: XS,S,M,L. Con ellos podemos dar fácilmente
distintos diseños para los diferentes tamaños de pantallas de una manera muy cómoda.
Aquí vemos a qué tamaños de pantalla afecta cada clase, así como los prefijos que se
deben utilizar para su uso.
Es importante saber, que Boostrap3, al seguir la filosofía "Mobile First", toma como tamaño
por defecto el XS
Por supuesto, estos4 tamaños son combinables entre ellos.
Por ejemplo, si quisiéramos que un cierto bloque se viera de modo diferente en pantallas
pequeñas y pantallas grandes, podríamos hacer mediante este código que el diseño
en pantallas móviles se viera a2 columnas y que para pantallas mayores que 768px se
viera a 3.
Si a pantalla móvil se quisiera a 1 columna, no sería necesario poner la clase col-xs-12,
ya que, como hemos comentado, Bootstrap toma como tamaño por defecto el tamaño XS y mostraría
todo a 1 columna.
Otro aspecto importante a considerar sobre el Grid, es que se ha eliminado la opción
de hacer un contenedor fijo con la clase container o uno fluido con container-fluid.
En lugar de esto, ahora la clase container pasa a ser el contenedor fluido, mientras
que el contenedor fijo se ha eliminado.
Como podemos comprobar, la versión 3 de Bootstrap empuja a todo el que la utiliza a realizar
un diseño puramente responsive.
Aunque no es una buena práctica cambiar el orden natural de la colocación de los bloques
en las diferentes pantallas, a veces nos puede venir bien hacerlo.
Bootstrap3 nos provee de dos clases con las que podremos realizar esto, estas son las
clases Pushy Pull, que se utilizan como sufijos de las clases de columnas mencionadas anteriormente.
Por ejemplo podemos colocar un bloque de tamaño 9 columnas, en la columna 3, simplemente con
el siguiente código y la clase Push. Aunque también se podría haber hecho con Pull.
También podemos hacer lo contrario, con el siguiente código y la clase Pull.
La diferencia entre estas dos clases, como podemos observar, es que Push cuenta de izquierda
a derecha, y Pull de derecha a izquierda.
Podemos encontrar más información y ejemplos sobre el grid en este enlace perteneciente
a la documentación oficial de Bootstrap 3.
Otro de los grandes cambios que han aparecido, ha sido las modificaciones en los nombres
de las clases. Para los que estamos acostumbrados a la versión 2 de este framework, y tenemos
casi memorizados los nombres de las clases, ¡hay que tener cuidado!
Tienes que saber que los nombres de las clases han cambiado, de forma que unos se han visto
modificados, otros se han añadido nuevos, y otros han pasado a ser deprecados y por
tanto se han eliminado.
Aquí podemos ver algún ejemplo de clases que se han modificado. De esto, no deberías
preocuparte mucho, ya que lo único que cambia es el nombre de las clases, pero la funcionalidad
sigue siendo exactamente la misma.
Es importante que consultes este enlace, donde podrás ver la tabla completa de las 28 clases
que se han modificado hasta la fecha.
Algunos ejemplos de elementos que se han añadido en la versión 3, son los paneles, diseños
de grupos de listas y muchos otros más.
Entre ellos, podemos encontrar el pack de iconos Glyphicons, que a diferencia de la
versión 2, esta vez aparece todo el pack al completo y ahora están basados en fuentes,
por lo que se pueden escalar sin ninguna perdida en la calidad de ellos.
Nuevamente, para ver toda la lista de los 24 nuevos elementos, sugiero visitar este
enlace que os lleva a la tabla donde podrás acceder a ellos.
Estas son el total de las 7 clases eliminadas, y la prueba que delata que Bootstrap3 es más
funcional. Si recordamos bien, se han agregado un total de 24 elementos nuevos, en comparación
con solo 7 que se han eliminado.
Existen 9 pequeñas consideraciones que debemos tener en cuenta antes de comenzar a desarrollar.
Por ejemplo, el tamaño de un input type"text" por defecto es el 100% del ancho, o las imágenes
deben llevar la clase .img-responsive para que se acoplen a los diferentes tamaños de
pantalla.
Si te das cuenta, estas consideraciones se deben a la filosofía de "Mobile First" que
se sigue en esta versión de bootstrap.
En este enlace, podrás encontrar el resto de ellas.
Hasta aquí llega este vídeo sobre "Novedades de Bootstrap3" en las que hemos explicado
las principales diferencias entre las versiones 2 y 3 de este framework.
Recuerda que este video forma parte del curso "Introducción al Desarrollo Web" disponible
en la dirección idesweb.es. Gracias por tu atención. Un saludo.