• Author / Uploaded
• Saulo J. Puma Lima

Citation preview

Introducción En el diseño web responsive, adaptable o adaptativo, conocido por las siglas RWD (del inglés, Responsive Web Design) es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla. Hoy día las páginas web se visualizan en multitud de tipos de dispositivos como tabletas, smartphones, libros electrónicos, portátiles, PCs, etc. Esta tecnología pretende que con un solo diseño web tengamos una visualización adecuada en cualquier dispositivo. El diseño responsive se basa en proporcionar a todos los usuarios de una web los mismos contenidos y una experiencia de usuario lo más similar posible, frente a otras aproximaciones al desarrollo web móvil como la creación de apps, el cambio de dominio o webs servidas dinámicamente en función del dispositivo. Empezar un proyecto web desde cero puede ser laborioso y puede llevar bastante tiempo mientras se va construyendo los diferentes componentes y testándolos en los diversos navegadores. Bootstrap te provee de una biblioteca de componentes reusables que puedes usar en cada proyecto, desde un sistema de rejilla o “grid”, una barra de navegación, botones o estilos tipográficos, todos ellos preparados para funcionar en todos los navegadores y adaptarse a todos los tipos de pantalla, tanto de móvil, como tablet o escritorio. Con Bootstrap te ahorras todo el trabajo inicial y además tienes un código revisado y testado que además es mantenible y escalable, una sólida estructura sobre la cual construir un proyecto web.

Historia Bootstrap fue creado por Mark Otto y Jacbod Thornton ambos desarrolladores de Twitter, ellos buscaban un marco de trabajo para fomentar la consistencia entre las herramientas internas, las cuales llevaban a inconsistencias y a una gran carga de trabajo en su mantenimiento. El primer desarrollo en condiciones reales ocurrió durante la primera “Semana de Hackeo” (Hackweek) de Twitter. Mark Otto mostró a algunos colegas como acelerar el desarrollo de sus proyectos con la ayuda de la herramienta de trabajo. Como resultado, decenas de temas se han introducido en el marco de trabajo. En agosto del 2011, Twitter liberó a Bootstrap como código abierto. En febrero del 2012, se convirtió en el proyecto de desarrollo más popular de GitHub.

Que es bootstrap? Bootstrap es una colección de varios elementos web personalizables y funciones completamente empaquetado en una sola herramienta. Cuando se diseña una web con Bootstrap, los desarrolladores pueden elegir qué elementos utilizar. Aún más importante, tienen la certeza de saber que los elementos que elijan no generarán conflictos entre ellos. Como si se tratase de un puzle, exceptuando que cada pieza del puzle encaja perfectamente con las otras, sin importar la pieza que elija.

Estructura de bootstrap Estructura compilada Después de descomprimir el archivo que te has descargado con la versión compilada de Bootstrap, verás la siguiente estructura de archivos y directorios: bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2

Estructura Original Después de descomprimir el archivo que te has descargado con la versión original de Bootstrap, verás la siguiente estructura de archivos y directorios: bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/ Instalación Precondición para funcionamiento Se debe tener instalado el framework de javascript JQuery. Proyecto personalizado Para obtener este framework solo tienes que acceder a la web oficial (http://getbootstrap.com/docs/3.3/getting-started/#download). Desde aquí te dan la opción de descargar tres versiones. 





CSS y JavaScript compilado. Quizás sea la forma más rápida y usual de utilizar Bootstrap. Es un paquete listo para usar, te lo descargas y listo. Esta versión contiene todo lo que necesitas para poder incorporar a tu proyecto este framework, no contiene ni documentación ni el código fuente. Código fuente (Less). Con esta versión te descargas los archivos originales Less y JavaScript. Es necesario tener un compilador de Less para poder compilar y utilizar Bootstrap en tu web. Es una versión para usuarios algo más avanzados pero da mucha flexibilidad gracias al precomilador de CSS Less. Código fuente (Sass). Se trata de un clon de la versión Less pero con el código fuente escrito en Sass. Está orientado a aplicaciones programadas con Ruby On Rails, Compass o cualquier otro proyecto basado en Sass.

Luego se debe incluir los archivos descargados en la estructura del proyecto web a realizar. Proyecto Bower

Para la instalación de bootstrap en un proyecto Bower se debe ejecutar el siguiente comando: $ bower install bootstrap. Este comando debe ejecutarse desde la consola del sistema operativo ubicado en la carpeta del proyecto. Proyecto Node(npm) Para la instalación de bootstrap en un proyecto Node se debe ejecutar el siguiente comando: $ npm install bootstrap@3. Este comando debe ejecutarse desde la consola del sistema operativo ubicado en la carpeta del proyecto. Proyecto Composer Para la instalación de bootstrap en un proyecto Composer se debe ejecutar el siguiente comando: $ composer require twbs/bootstrap. Este comando debe ejecutarse desde la consola del sistema operativo ubicado en la carpeta del proyecto. Lenguajes utilizados por bootstrap

Html: es un lenguaje de programación que se utiliza para el desarrollo de páginas de Internet. Se trata de las siglas que corresponden a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto CSS: es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas. Javascript: JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas. Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario. Características

Uniformidad Bootstrap proporciona un conjunto de hojas de estilo que proveen definiciones básicas de estilo para todos los componentes de HTML. Esto otorga una uniformidad al navegador y al sistema de anchura, da una apariencia moderna para el formateo de los elementos de texto, tablas y formularios. Sistema de cuadrilla Bootstrap viene con una disposición de cuadrilla estándar de 940 píxeles de ancho. Alternativamente, el desarrollador puede usar un diseño de ancho-variable. Para ambos casos, la herramienta tiene cuatro variaciones para hacer uso de distintas resoluciones y tipos de dispositivos: teléfonos móviles, formato de retrato y paisaje, tabletas y computadoras con baja y alta resolución (pantalla ancha). Esto ajusta el ancho de las columnas automáticamente. Componentes En adición a los elementos estándares de HTML, Bootstrap contiene otra interfaz de elementos comúnmente usados. Ésta incluye botones con características avanzadas, como grupo de botones o botones con opción de menú desplegable, listas de navegación, etiquetas horizontales y verticales, ruta de navegación y paginación, así como etiquetas, capacidades avanzadas de miniaturas tipográficas, formatos para mensajes de alerta y barras de progreso. Plug-ins Los componentes de JavaScript para Bootstrap están basados en la librería jQuery de JavaScript. Proveen elementos adicionales de interfaz de usuario como diálogos, tooltips y carruseles. También extienden la funcionalidad de algunos elementos de interfaz existentes, incluyendo por ejemplo una función de autocompletar para campos de entrada. Compatibilidad Bootstrap ha sido pensado para utilizarse en las versiones más recientes de los navegadores de escritorio y navegadores móviles. Aunque también funciona con los navegadores más antiguos, en estos casos es posible que algunos componentes se vean peor de lo esperado. Navegadores soportados Concretamente, Bootstrap soporta las versiones más recientes de los siguientes navegadores y plataformas:

Chrom e

Firefox

Internet Explorer

Opera

Safari

Android

✔

✘

-

✘

-

iOS

✔

-

-

✘

✔

Mac OS X

✔

✔

-

✔

✔

Windows

✔

✔

✔

✔

✘

Bootstrap también debería funcionar bien en Chromium (Linux) y Internet Explorer 7 (Windows), aunque no están soportados oficialmente. Los navegadores Internet Explorer 8 y 9 también están soportados, pero debes tener en cuenta que muchas propiedades de CSS3 y elementos de HTML5 no funcionan en estos navegadores. Además, Internet Explorer 8 requiere el uso de la librería respond.js para que el diseño web responsive funcione bien.

Funcionalida d

Internet Explorer 8

Internet Explorer 9

border-radius

✘ No soportado

✔ Soportado

box-shadow

✘ No soportado

✔ Soportado

transform

✘ No soportado

✔ Soportado con el prefijo -ms

transition

✘ No soportado

✘ No soportado

placeholder

✘ No soportado

✘ No soportado

Elementos de Bootstrap Componentes css básicos 

Grid system



Typography



Code



Tables



Forms



Buttons



Images



Helper classes



Responsive utilities

Componentes css avanzados 

Glyphicons



Dropdowns



Button groups



Button dropdowns



Input groups



Navs



Navbar



Breadcrumbs



Pagination



Labels



Badges



Jumbotron



Page header



Thumbnails



Alerts



Progress bars



Media object



List group



Panels



Responsive embed



Wells

Componentes javascript 

Transitions



Modal



Dropdown



Scrollspy



Tab



Tooltip



Popover



Alert



Button



Collapse



Carousel



Affix

Glosario de términos