Bloque 1Bloque 2Bloque 3Bloque 4Bloque 5Bloque 6Referencias

Frameworks para el desarrollo web

1. Introducción de los frameworks

Un framework (marco de trabajo en español) es una estructura conceptual y

tecnológica de soporte definido, normalmente con artefactos o módulos de
software concretos que puede servir de base para la organización y desarrollo de
software. Generalmente, consiste en un conjunto de archivos, programas,
bibliotecas y un lenguaje interpretado, entre otras herramientas, para ayudar a
desarrollar y unir los diferentes componentes de un proyecto. Es un esquema (un
esqueleto, un patrón) para el desarrollo y/o la implementación de una aplicación.
Básicamente, nos brinda un conjunto de herramientas para comenzar a
desarrollar nuestra aplicación o sitio web, sin perder tiempo en construir por
nuestra cuenta bibliotecas para acceso a datos, formatos de presentación,
elementos de la interfaz de usuario, entre otros. 

Los frameworks no necesariamente están asociados a un lenguaje concreto,

aunque así se lo vea en numerosas ocasiones. Por ejemplo, Ruby on Rails, Ruby
es el lenguaje de programación y Rails es el framework. 

Entonces, ¿qué ventajas tiene utilizar un framework para el desarrollo?

El desarrollador no necesita plantearse una estructura global de la

aplicación, sino que el framework le proporciona un esqueleto que hay que
rellenar y no se pierde tiempo reinventando la rueda con código que ya
existe.
Facilita la colaboración. Cualquiera que haya tenido que “pelearse” con el
código fuente de otro programador (¡o incluso con el propio, pasado algún
tiempo!) sabrá lo difícil que es entenderlo y modificarlo; por tanto, todo lo que
sea definir y estandarizar va a ahorrar tiempo y trabajo a los desarrollos
colaborativos.
 Es más fácil encontrar herramientas (utilidades, librerías) adaptadas al
framework concreto para facilitar el desarrollo.

Ahora bien, numerosos clientes o programadores no quieren o aluden no

necesitar un framework para desarrollo. Está claro, que se puede programar toda
una aplicación sin utilizar ningún framework conocido; puede que la aplicación sea
tan pequeña que no lo considere necesario, que no conozca ninguno que se
adapte a sus necesidades, o simplemente no desee dedicar tiempo a seleccionar
y utilizar uno. 

Pero a medida que la aplicación crece en tamaño y complejidad, un desarrollador

competente procurará seguir unas determinadas pautas que le faciliten su trabajo
de desarrollo y mantenimiento: separación de presentación y lógica, una sintaxis
coherente, entre otros. En numerosas ocasiones esto lleva a que los
programadores construyan sus propios frameworks. Y la pregunta entonces sería:
en vez de definir un estándar, ¿por qué no utilizar uno ya definido y aprovechar el
trabajo ya realizado de desarrolladores? La curva de aprendizaje o el tiempo que
nos insume aprender a utilizar un framework no es comparable con el tiempo de
desarrollar un framework desde el inicio. Además, los frameworks populares que
existen en la red tienen un soporte de una gran comunidad de personas que
constantemente contribuyen y ayudan a resolver problemas, lo que difícilmente
sea posible si lo desarrollamos nosotros mismos. 

En lo que nos compete a esta materia, veremos que podríamos utilizar por un lado
frameworks para HTML5/CSS3 y por el otro para PHP y todo lo que representa la
conectividad con la base de datos. Ahora, la gran duda que se plantea es qué
framework elegir o cuál de ellos es el mejor. La respuesta es que no existe una
solución mágica aplicable a todos los proyectos, sino que la elección del
framework vendrá determinada por el tipo de aplicación a desarrollar, el lenguaje
de desarrollo, la tecnología y posibles requerimientos técnicos extras que se nos
presenten. 

En muchas ocasiones, entre marcos de trabajo similares puede que elijamos uno
u otro dependiendo también de lo fácil que es aprender a utilizarlo o
implementarlo. A modo de recomendación general, sólo en el caso de que
ninguno de los frameworks se adapte a las necesidades de desarrollo que
tenemos, conviene invertir tiempo en desarrollar y definir un marco de trabajo.

Tanto para PHP como para HTML5/CSS3 hay muchos frameworks disponibles y
recomendados en la web. Se puede descargar e implementar de manera gratuita.
Entre los más conocidos dentro de los frameworks HTML/CSS3 podemos
nombrar:
Figura 1: Bootstrap

Fuente: Bootstrap, (s.f.), http://getbootstrap.com/

Figura 2: Foundation

Fuente: Foundation, (s.f.), http://foundation.zurb.com/

Figura 3: Kube Framework

Fuente: Kube, (s.f.), https://imperavi.com/kube/

Si bien la elección del framework es personal y depende del proyecto, hemos

elegido uno en particular y es el que veremos en el apartado siguiente: Bootstrap.
2. Bootstrap

Bootstrap es un framework o conjunto de herramientas de software libre para

diseño de sitios web y aplicaciones web. Contiene plantillas de diseño con
tipografía, formularios, botones, cuadros, menús de navegación y otros elementos
de diseño basado en HTML y CSS, así como, extensiones de JavaScript
opcionales adicionales para realizar las acciones más comunes en un sitio web de
manera sencilla.

Figura 4: Página maquetada con Bootstrap

Fuente: Bootstrap, (s.f.), https://themes.getbootstrap.com/

Bootstrap fue desarrollado por Mark Otto y Jacbod Thornton (de Twitter) como un
framework para fomentar la consistencia a través de herramientas internas. Antes
de Bootstrap, se usaban numerosas librerías para el desarrollo de interfaces de
usuario, las cuales guiaban a inconsistencias y a una carga de trabajo alta en su
mantenimiento. Actualmente transita por la versión 3.0 y desde la versión 2.0
también soporta diseños responsivos, lo que significa que el diseño gráfico de la
página se ajusta dinámicamente, tomando en cuenta las características del
dispositivo utilizado (computadoras, tablets o teléfonos móviles).

Bootstrap es modular y consiste esencialmente en una serie de hojas de estilo

LESS que implementan la variedad de componentes de la herramienta. Una hoja
de estilo llamada bootstrap.less incluye los componentes de las hojas de estilo.
Los desarrolladores pueden adaptar el mismo archivo de Bootstrap seleccionando
los componentes que deseen usar en su proyecto. Los ajustes son posibles en
una medida limitada a través de una hoja de estilo de configuración central,
mientras que los cambios más profundos son viables mediante las declaraciones
LESS. Desde la versión 2.0, la configuración de Bootstrap también tiene una
opción especial de personalizar en la documentación. Por otra parte, los
desarrolladores eligen en un formulario los componentes y ajustes deseados y, de
ser necesario, los valores de varias opciones a sus necesidades. El paquete
consecuentemente generado ya incluye la hoja de estilo CSS pre-compilada.
Entre sus principales características, encontramos:

Sistema de cuadrilla y diseño sensible: 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. 
Hoja de estilo CSS: Bootstrap proporciona un conjunto de hojas de estilo
que proveen definiciones básicas de estilo para todos los componentes de
HTML. Esto otorga uniformidad al navegador y al sistema de anchura y da
una apariencia moderna para el formateo de los elementos de texto, tablas y
formularios.
Componentes reusables: en agregado a los elementos regulares de HTML,
Bootstrap contiene otra interfaz de elementos comúnmente utilizados. Ésta
incluye botones con características avanzadas (como por ejemplo, un grupo
de botones o botones con opción de menú desplegable, listas de
navegación, etiquetas horizontales y verticales, ruta de navegación,
paginación, entre otros), etiquetas, capacidades avanzadas de miniaturas
tipográficas, formatos para mensajes de alerta y barras de progreso.
Plug in de JavaScript: los componentes de JavaScript para Bootstrap están
basados en la librería jQuery de JavaScript (nombrada anteriormente en el
apartado de JavaScript). Los plugin se encuentran en la herramienta de
plugin de jQuery. 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 (input). La versión 2.0
 soporta los siguientes plugin de JavaScript: Modal, Dropdown, Scrollspy,
Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel y Typeahead.

3. Primeros pasos

Existen varias formas diferentes de comenzar con Bootstrap, cada una orientada a
un tipo de público en función de su nivel técnico. 

1. Como primera opción podemos descargar el código CSS y JavaScript

compilado , que es la forma más sencilla de empezar a utilizar Bootstrap. La
desventaja que supone consiste en que esta versión no incluye ni los
archivos originales, ni la documentación. Para descargar esta versión,
accede a getbootstrap.com y pulsa el botón Download Bootstrap.
2. Descargar el código fuente , contiene todos los archivos Less, y JavaScript
originales de Bootstrap. La desventaja es que requiere un compilador de
archivos Less y cierto trabajo de configuración.
3. Descargar el código fuente en formato Sass : se trata de una variante de la
versión anterior y que se ha creado para facilitar la integración de Bootstrap
en las aplicaciones Ruby On Rails, Compass o cualquier otro proyecto
basado en Sass.

4. Utilizando la CDN de Bootstrap

La empresa NetDNA aloja de forma gratuita en su CDN una copia de los archivos
CSS y JavaScript de Bootstrap. Para utilizar estos archivos, tienes que modificar
los siguientes dos enlaces en tus páginas (cambia el valor 3.3.7 por la versión
específica de Bootstrap que quieras):
<!-- Latest compiled and minified CSS -->
<linkrel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">

<!-- Optional theme -->

<linkrel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-
theme.min.css" integrity="sha384-
rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->

<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>

Puedes encontrar las descargas disponibles en el siguiente link:

http://getbootstrap.com/ ingresando a “Download Bootstrap”.

5. Contenidos de la versión compilada de Bootstrap

Después de descomprimir el archivo que previamente descargado con la versión

compilada de Bootstrap, podrás observar 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

​
Estos archivos consisten en la forma más sencilla de utilizar Bootstrap en
cualquier proyecto web. Para cada archivo se ofrecen dos variantes: los archivos
compilados (cuyo nombre es bootstrap.*) y los archivos compilados + comprimidos
(cuyo nombre es bootstrap.min.*). También se incluyen las fuentes de los iconos
del proyecto Glyphicons y el tema opcional de Bootstrap.
6. Contenidos de la versión original de Bootstrap

La versión original de Bootstrap incluye, además de las versiones compiladas de

los archivos CSS y JavaScript, las versiones originales de esos mismos archivos y
toda la documentación. Tras descomprimir el archivo 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/

​
Los directorios less/, js/ y fonts/ contienen el código fuente utilizado para generar
los archivos CSS, JavaScript y las fuentes. El directorio dist/ contiene los mismos
archivos que se han mostrado en la sección anterior para la versión compilada de
Bootstrap. El directorio docs/ incluye el código fuente de la documentación de
Bootstrap y un directorio llamado examples/ con varios ejemplos de uso. El resto
de archivos están relacionados con otros temas secundarios, como por ejemplo,
las licencias del código.

Creando la primera plantilla con Bootstrap

El siguiente código HTML muestra una plantilla muy sencilla creada con
Bootstrap:
<!DOCTYPE html>

<html lang="en">
 <head>

 <meta charset="utf-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="viewport" content="width=device-width, initial-scale=1">

 <title>Plantilla ejemplo de Bootstrap</title>

 <!-- CSS de Bootstrap -->

 <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

 

 <!--librerías opcionales que activan el soporte de HTML5 para IE8 -->

 <!--[if lt IE 9]>

  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
</script>
 
<script
src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js">
</script>
 <![endif]-->
 </head>
 <body>
 <h1>¡Hola mundo!</h1>
 
 <!-- Librería jQuery requerida por los plugins de JavaScript -->
 <script src="http://code.jquery.com/jquery.js"></script>
 
  <!-- Todos los plugins JavaScript de Bootstrap (también puedes  incluir
archivos JavaScript individuales de los únicos plugins que utilices) -->
 <script src="js/bootstrap.min.js"></script>
 </body>
</html>
Partiendo de la primera plantilla básica mostrada en el apartado anterior, se
pueden crear otros numerosos diseños de página. Para estar atentos a las
novedades de la comunidad que utiliza y desarrolla este framework, puedes
utilizar alguno de los canales disponibles: 

Blog oficial: http://blog.getbootstrap.com/

Chatear con otros miembros de la comunidad a través del canal ##bootstrap
o ##twitter-bootstrap en el servidor irc.freenode.net.
O ver más ejemplos de sitios basados en este framework, accediendo a
http://expo.getbootstrap.com/

En resumen, todo lo que necesitas para utilizar Bootstrap es descargar el archivo

.zip con las librerías desde http://getbootstrap.com y referenciar en tu página web
las referencias CSS y Javascript de este framework.

Referencias

Gauchat, J. D. (2013). El gran libro de HTML5 CSS3 y Javascript. Barcelona:

Marcombo.

Bootstrap (s.f.). Bootstrap - The world's most popular mobile-first and responsive
front-end framework. Recuperado Mayo 2017 de http://getbootstrap.com/