El desarrollo de proyectos para Internet desde cero o “from scratch” puede ser algo muy, pero que muy tedioso, lento y complejo.<\/p>\n
En la actualidad es necesario intentar acelerar los trabajos para obtener proyectos rentables. Es por ello que los dise\u00f1adores de frontends trabajan con herramientas que permiten construir r\u00e1pidamente sites.<\/p>\n
El\u00a0bootstrapping\u00a0<\/strong>puede referirse al proceso mediante el cual se han desarrollado entornos de\u00a0programaci\u00f3n\u00a0cada vez m\u00e1s complejos a partir de otros m\u00e1s simples.<\/p>\n De aqu\u00ed viene BootStrap o Twitter Bootstrap<\/strong>.<\/p>\n Es un framework frontend<\/strong> que nos ayuda a ganar velocidad, evitar errores comunes \u00a0y aumentar la compatibilidad<\/strong> en nuestros proyectos en Internet. Es software libre para dise\u00f1ar sitios y crear aplicaciones web. Ganaremos tiempo al trabajar con tecnolog\u00edas del lado del cliente como son CSS, HTML y Javascript (JQuery)<\/strong>.<\/p>\n Gracias a este framework realizaremos tareas de forma m\u00e1s sencilla al apoyarnos en t\u00e9cnicas, m\u00e9todos, responsive<\/strong> y APIs que de otra forma tendr\u00edamos que realizarlas a mano.<\/p>\n <\/p>\n Bootstrap fue desarrollado por Mark Otto y Jacbod Thornton<\/strong> de Twitter. En agosto del 2011, Twitter liber\u00f3 a Bootstrap como c\u00f3digo abierto. En febrero del 2012, se convirti\u00f3 en el proyecto de desarrollo m\u00e1s popular de GitHub<\/strong>.<\/p>\n Para descargar bootStrap 3.3.0 (a d\u00eda del art\u00edculo\/entrada) \u00a0tendremos que visitar:<\/p>\n http:\/\/getbootstrap.com<\/a><\/p>\n El eslogan principal de la web:<\/p>\n \u201cBootstrap es el framework HTML, CSS y JS m\u00e1s popular para el desarrollo responsive o adaptativo y proyectos mobile first en la web.\u201d<\/strong><\/p>\n \u00bfQu\u00e9 es el responsive?:<\/strong> es una t\u00e9cnica de dise\u00f1o web que prioriza la correcta visualizaci\u00f3n de una misma p\u00e1gina en distintos dispositivos: Ordenadores,\u00a0 tablets , m\u00f3viles.<\/p>\n \u00bfQu\u00e9 es Mobile first?:<\/strong> Debido a que \u00a0m\u00e1s de la mitad de los accesos a Internet se realizan a trav\u00e9s de los m\u00f3viles una t\u00e9cnica es desarrollar el website para los terminales m\u00f3viles y luego optimizarlo para que sea eficiente en las pantallas de los ordenadores.<\/p>\n Para usar BootStrap en una p\u00e1gina\u00a0HTML, el desarrollador solo debe descargar la hoja de estilo BootStrap\u00a0CSS\u00a0y enlazarla en el archivo\u00a0HTML<\/strong>.<\/p>\n Si el desarrollador tambi\u00e9n quiere usar los componentes de JavaScript, \u00e9stos deben estar referenciados junto con la librer\u00eda\u00a0jQuery\u00a0en el documento HTML<\/strong>.<\/p>\n BootStrap al ser muy extendido a nivel mundial, permite un di\u00e1logo de empresas en proyectos que requieran colaboraci\u00f3n al ser un marco com\u00fan de desarrollo. Esto es un aspecto muy interesante en proyectos en los que participen diversos desarrolladores-empresas frontend.<\/p>\n Bootstrap se puede definir como un framework bastante completo, porque abarca desde el sistema de rejilla o grid para (como otros), CSS, componentes y un layer de javascript para trabajar la interactividad. Ojo, no todo tiene que ser responsive usando bootstrap, pero permite los mecanismos para ll\u00e9valo a cabo.<\/p>\n En la web mediaqueri.es<\/a> podremos ver ejemplos (showcases<\/strong>) de contextos web (dimensiones) para el trabajo en responsive mediante el uso de mediaqueris.<\/p>\n Para trabajar con los archivos lo \u00fanico que necesitamos es un editor de texto. Los profesionales de la web suelen trabajar con editores HTML y CSS como pueden ser Sublime text o Dreamweaver, entre otros<\/strong>. El funcionamiento del mismo se puede comprobar con cualquier browser que dispongamos.<\/p>\n Adem\u00e1s de Vanilla CSS, Bootstrap incluye soporte para los 2 m\u00e1s populares preprocesadores existentes como son Less y Sass.<\/strong> \u00a0Si descargamos el c\u00f3digo fuente, podremos usar less. Tambi\u00e9n ofrece la posibilidad de Sass (para modificar el core si deseamos). He creado una entrada donde muestro como trabajar con sublime con los preprocesadores.<\/p>\n Es un \u00fanico framework para cada dispositivo puesto que es capaz de escalar tu proyecto desde tel\u00e9fonos o tablets hasta ordenadores (desktops).<\/p>\n Para usarlo o lo descargamos \u00a0en zip o lo usamos a trav\u00e9s de una CDN<\/strong> (sin necesidad de descargarlo). Aunque recomiendo las dos cosas porque la CDN puede fallar.<\/p>\n \u00bfQu\u00e9 es una CDN?<\/strong><\/p>\n Una CDN (Content Delivery Network<\/a>) es un conjunto de ubicaciones en el que redistribuyen localmente el contenido de los servidores y guardan en cach\u00e9 los archivos que no necesitan actualizaci\u00f3n permanente, seg\u00fan unas reglas personalizables.<\/p>\n \u00bfQu\u00e9 encontramos dentro del ZIP?<\/strong><\/p>\n Los CSS, Javascript y fuentes.<\/p>\n CSS: existen 7 archivos, 4 de ellos css. bootstrap.css, bootstrap.min.css, bootstrap-theme.css, bootstrap-theme-min.css. Las versiones min sin minimizadas para ocupar menos espacio y consumir menos ancho de banda.<\/p>\n Javascript: 2 ficheros. Bootstrap.js y bootstrap.min.js (minimizado m\u00e1s recomendable para producci\u00f3n).<\/p>\n Fonts: Contiene 1 fuente en 4 versiones. Denominada iconfont al ser de iconos. Sus extensiones son .eot, .svg, .ttf, .woff. En otra entrada del blog hablo sobre los formatos existentes de fuentes para la web, que permite entender estas variantes.<\/p>\n Por lo tanto para usar el framework BootStrap en un proyecto web, es necesario incorporar estas carpetas en el proyecto. Crear un HTML y vincular la CSS, el Javascript y la fuente.<\/p>\n El responsive web design se soluciona mediante el empleo de media Queris.<\/p>\n Media Queries\u00a0es un m\u00f3dulo\u00a0CSS3\u00a0que permite adaptar la representaci\u00f3n del contenido y convirti\u00f3 en un est\u00e1ndar recomendado por la W3C<\/a>\u00a0en\u00a0Junio del 2012.<\/p>\n Un ejemplo simple de un Media Query puede ser:<\/p>\n En este ejemplo, el Media Query, ha sido agregado a la etiqueta. El atributo media es d\u00f3nde reside el Query. Este otro dice:<\/p>\n only screen and (max-width: 480px)<\/p>\n El significado puede ser obvio: aplica esta hoja de estilo s\u00f3lo a un dispositivo con una ventana de navegador no mayor a 480 pixeles.<\/p>\n Puedes observar por el nombre del archivo telefono.css que este Query en particular, est\u00e1 hecho para estilos de un dispositivo m\u00f3vil.<\/p>\n La compatibilidad entre navegadores con bootstrap es brutal. Esto es un punto fuerte, puesto que no tendremos que pegarnos con diversos browser. Navegadores como Chrome, Firefox, IE, Opera, Safari en sistemas Android, iOs, Windows, Mac OS, un soporte bastante extenso y correcto.<\/p>\n http:\/\/getbootstrap.com\/getting-started\/#support<\/a><\/p>\n En caso de no ofrecer soporte en alg\u00fan navegador determinado existen Polyfill que es un trozo de c\u00f3digo \u00a0un plugin que permite tener las nuevas funcionalidades de HTML5 en aquellos navegadores que nativamente no lo soportan. En definitiva se trata de hacer que aquellos navegadores que no son compatibles con una caracter\u00edstica nueva, la incorporen a trav\u00e9s de fallbacks, es decir de c\u00f3digo, en su mayor medida javascript, que se encargue de realizar dicha funcionalidad.<\/p>\n Elementos principales de Bootstrap.<\/p>\n Adem\u00e1s de trabajar con un sistema GRID, ofrece un conjunto de estilos CSS, componentes prefabricados e interactividad en javascript mediante plugins.<\/p>\n El Grid system o sistema de rejilla es un sistema pr\u00e1cticamente que emplean todos los frontend para organizar contenido en columnas en funci\u00f3n de anchos o media queris.<\/p>\n El n\u00famero de columnas que disponemos en este Grid es de 12. El comportamiento y columnas cambian en funci\u00f3n de las media queris. Una de las cosas interesantes de los componentes es que nos ofrece una librer\u00eda de iconos que podemos incorporar f\u00e1cilmente.<\/p>\n Ejemplo: Los componentes pueden ser varios, botones, barras de navegaci\u00f3n, alertas, listas desplegables, paneles, barras de progreso, ruedas, paginaci\u00f3n, etc \u2026<\/p>\n Mediante plugins en javascript basados en Jquery estamos unificando el framework m\u00e1s usado con la librer\u00eda m\u00e1s extendida.<\/p>\n \u00bfCu\u00e1les son las ventajas de usar bootstrap?<\/p>\n Herramientas para facilitar al dise\u00f1ador trabajar con bootstrap.<\/strong><\/p>\n PSD Wrangler Guideguide.me Es una extensi\u00f3n para Photoshop adaptable para Bootstrap. V\u00e1lido para versiones CS5, CS6 y CC (cloud). Recuerda, una vez instalado, la configuraci\u00f3n por defecto de Bootstrap 3, 15px para los m\u00e1rgenes, 12 columnas, 30px de margen entre columnas. El ancho del contenedor es decir la imagen que tenemos que crear para dispositivos mayores o iguales a 1200px es de 1170px tal y como dice la ayuda de bootstrap Layoutil.com Hola mundo desde BootStrap<\/strong><\/p>\n Copiar las 3 carpetas y pegarlas en la carpeta donde tengo la p\u00e1gina holamundo.html. Recuerda que los ficheros descargados pueden ser reducidos incorporando las versiones s\u00f3lo minimizadas.<\/p>\n Pueden quedarse\u00a0 s\u00f3lo, de CSS: Bootstrap.min.css, de js: bootstrap.min.js<\/p>\n Desde un editor de texto, modificar el holamundo.html:<\/p>\n Desde la web http:\/\/getbootstrap.com\/getting-started\/<\/a><\/p>\n Copiar la plantilla de ejemplo b\u00e1sica, en el apartado Basic Template y pegarla<\/p>\n Os dejo\u00a0de regalo\u00a0la versi\u00f3n b\u00e1sica explicada y en castellano (es) \ud83d\ude42<\/p>\n No necesariamente es necesario ce\u00f1irnos a los estilos de Bootstrap, pudiendo usar nuestros dise\u00f1os personalizados, sobrescribiendo clases que Bootstrap nos impone. Si bien es cierto aquellos principales pueden afectar a la rejilla y hay que tener cuidado con ello.<\/p>\n De hecho, si cargamos una css con stylesheet despu\u00e9s de cargar la minimizada de bootstrap, al ser en cascada, tendr\u00e1 preferencia sobre los estilos bootstrap y podremos adecuar los nuestros sin problemas.<\/p>\n Si creo un estilo h2<\/strong> en mi-estilo.css<\/strong>, modificar\u00e1 el h2 de bootstrap, por el orden de carga de los ficheros css<\/p>\n Bootstrap 3 est\u00e1 enfocado a un dise\u00f1o Mobile First con 12 columnas.<\/p>\n Basado en un sistema de rejillas, consigue adecuar sus dise\u00f1os mediante las media queries anteriormente mencionadas.<\/p>\n Para ello: No emplea media queris para dispositivos menores de 768px, porque es el valor por defecto, por eso no tiene @media<\/p>\n Para el resto de dispositivos las siguientes mediaqueries en funci\u00f3n de su resoluci\u00f3n.<\/p>\n Los estilos son diferentes entre rangos de resoluci\u00f3n mediante CSS.<\/p>\n Las 3 media queries + la de los tel\u00e9fonos nos permiten gestionar el responsive (por defecto).<\/p>\n Mediante unos prefijos nos permiten marcar que determinadas columnas<\/strong> se muestren de determinada forma en cada uno de los escenarios.<\/p>\n .col-xs-<\/strong> \/\/ Para m\u00f3viles <\/p>\n En breve, parte dos y mas detalle sobre el trabajo con bootStrap …<\/span><\/p>\n Es necesario mencionar que existen otras alternativas a Bootstrap.<\/strong><\/p>\n Fundation Pure Ink<\/strong> HTML KickStart<\/strong> Metro UI CSS<\/strong> Semantic UI<\/strong> Skeleton Gumby<\/strong> Para finalizar los frameworks, el \u00faltimo open source espa\u00f1ol<\/p>\n Zimit \u00a0Framework<link href=\"css\/telefono.css\" rel=\"stylesheet\" type=\"text\/css\" media=\"only screen and (max-width: 480px)\" ><\/pre>\n
\n<span class=\u201dglyphicon glyphin-search> <\/span><\/strong><\/p>\n\n
\nDisponibles para Photoshop o Ilustrator. Son plantillas de ayuda o gu\u00eda.
\nhttp:\/\/psdwrangler.tumblr.com\/post\/24530125241\/bootstrap-grid-templates<\/a><\/p>\n
\nhttp:\/\/guideguide.me<\/a><\/p>\n
\nhttp:\/\/getbootstrap.com\/css\/#grid<\/a><\/p>\n
\nwww.layoutit.com
\n<\/a>Asistente online \u00a0DIY que permite crear nuestra web de forma visual. Se puede descargar el c\u00f3digo del dise\u00f1o del prototipo creado.<\/p>\n<!DOCTYPE html>\r\n<html lang=\"es\">\r\n <head>\r\n <meta charset=\"utf-8\">\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n <!-- Esta etiqueta inferior habilita el mobile first y el responsive desactivando el pitch to zoom-->\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n <title>Plantilla Bootstrap de www.palentino.es<\/title>\r\n\r\n <!-- Bootstrap con enlace minimizado -->\r\n <link href=\"css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n\r\n <!-- HTML5 y Respond.js para dar soporte a IE8 de elementos HTML5 y media queries -->\r\n <!-- AVISO: Respond.js no funciona so ves la pagina v\u00eda protocolo file:\/\/ -->\r\n <!--[if lt IE 9]>\r\n <script src=\"https:\/\/oss.maxcdn.com\/html5shiv\/3.7.2\/html5shiv.min.js\"><\/script>\r\n <script src=\"https:\/\/oss.maxcdn.com\/respond\/1.4.2\/respond.min.js\"><\/script>\r\n <![endif]-->\r\n <\/head>\r\n <body>\r\n <h1>Hola Mundo desde Palencia. ;-)<\/h1>\r\n\r\n <!-- jQuery (necesario para plugins Bootstrap's JavaScript), descargado desde una CDN (anteriormente comentado) -->\r\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.1\/jquery.min.js\"><\/script>\r\n <!-- Incluye todos los plugins compilados o los ficheros individuales que necesites -->\r\n <script src=\"js\/bootstrap.min.js\"><\/script>\r\n <\/body>\r\n<\/html><\/pre>\n
<link href=\u201dcss\/bootstrap.min.css rel=\u201dstylesheet\u201d>\r\n<link rel=\u201dcss\/mi-estilo.css\u201d><\/pre>\n
\/* Extra small devices (phones, less than 768px) *\/\r\n\/* No media query since this is the default in Bootstrap *\/\r\n\/* Small devices (tablets, 768px and up) *\/\r\n\r\n@media (min-width: @screen-sm-min) { ... }\r\n\/* Medium devices (desktops, 992px and up) *\/\r\n@media (min-width: @screen-md-min) { ... }\r\n\/* Large devices (large desktops, 1200px and up) *\/\r\n@media (min-width: @screen-lg-min) { ... }\r\n\r\n<\/pre>\n
\n.col-sm-<\/strong> \/\/ Para tablets, >750px contenedor
\n.col-md-<\/strong> \/\/ Escritorios, >970px contenedor
\n.col-lg-<\/strong> \/\/ Desktop superiores, > 1170px contenedor<\/p>\n<\/h2>\n
ALTERNATIVAS – ANEXO<\/strong><\/h2>\n
\n<\/strong>Enfocado desde sus or\u00edgenes al dise\u00f1o responsive design y orientaci\u00f3n para el soporte m\u00f3vil First.
\nhttp:\/\/foundation.zurb.com\/<\/a><\/p>\n
\n<\/strong>Es un framework del 2013. La caracter\u00edstica m\u00e1s relevante es que solo utiliza CSS. Basado en normalize.css, soporta dise\u00f1o responsive, orientado a dispositivos m\u00f3viles, con un tama\u00f1o de la biblioteca muy reducido. No posee herramientas Javascript.
\nhttp:\/\/purecss.io\/<\/a><\/p>\n
\nProyecto del 2012. Posee escasa documentaci\u00f3n, pero con buenos elementos visuales. Basado en Normalize.css y compass para extender las capacidades del CSS est\u00e1ndar.
\nhttp:\/\/ink.sapo.pt\/<\/a><\/p>\n
\nMuy similar a Bootstrap. Documentaci\u00f3n sencilla. Es de los m\u00e1s recientes. Creado por 99Lime.
\nhttp:\/\/www.99lime.com\/elements\/<\/a><\/p>\n
\nDisponible desde el 2012. Framework de 5 pasos, permite tener tu website al estilo Microsoft Windows 8.
\nhttp:\/\/metroui.org.ua\/<\/a><\/p>\n
\nEs un buen framework, aunque en fase de alpha.
\nhttp:\/\/semantic-ui.com<\/a><\/p>\n
\n<\/strong>Skeleton es uno de los frameworks responsive m\u00e1s ligeros, basado en un sistema de grid (cuadr\u00edcula) simple. Skeleton scala desde 960px el tama\u00f1o del dise\u00f1o, para que pueda verse en tablets y smartphones en modo normal y panor\u00e1mico.
\nhttp:\/\/www.getskeleton.com\/<\/a><\/p>\n
\nGumby Framework es un framework simple y ligero, que viene, a diferencia de algunos frameworks, con un kit PSD y UI que hace m\u00e1s f\u00e1cil maquetar el dise\u00f1o de la manera m\u00e1s tradicional.
\nhttp:\/\/gumbyframework.com\/<\/a><\/p>\n
\n<\/strong>Es un proyecto de c\u00f3digo abierto creado originalmente por Jorge Garrido Oval, tambi\u00e9n conocido como FireZenk, con la intenci\u00f3n de proporcionar una base s\u00f3lida y completa para creaci\u00f3n r\u00e1pida de prototipos de p\u00e1ginas web adaptables basadas en HTML5 con un uso intensivo de CSS mediante el uso del lenguaje de precompilador LESS, relegando a un segundo plano el uso de javascript.<\/p>\n