FRAMEWORK

• Un framework orientado a aplicaciones web es un abanico de utilidades css para poder ahorrar tiempo, al darnos una base sobre la que empezar, y facilitar la construcción de las páginas, resolviendo problemas comunes y repetitivos. Normalmente encontramos varios tipos de ellos:

1. 960 grid es un estándar que permite tener un ancho común en los navegadores web. El 960 px de ancho, utilizando columnas para repartir el contenido de la página . Para desarrollar esta página de ejemplo, he ido añadiendo a un código predefinido una serie de objetos que quiero que aparezcan, como imágenes y algo de texto. Simplemente hemos ido indicando el tipo de grid que queríamos y dentro vamos construyendo. Dependiendo del número de grid, la hoja de estilo referente a él va colocando los objetos como los hubiéramos definido. Cada columna tiene un margen derecho de 10px y un margen izquierdo de otros 10 px, creando 20 px de separación entre columnas. En esta página web se puede apreciar mejor el formato: http://960.gs/demo.html.
2. Responsive: se trata de una técnica de estructuras de imágenes fluidas que, mediante las hojas de estilos (css), se puede adaptar la misma página para cualquier dispositivo. Está recomendada por W3C. Con está técnica se intenta que independientemente del dispositivo a navegar, ya sea, por ejemplo, un linux o un windows, se trate de la misma URL para los dos, así los enlaces copiados de uno a otro puedan valer.

Skeleton: El sistema Skeleton se basa en un conjunto de CSS y javascrip que nos permitirá la visualización del contenido web desde la mayoría de los dispositivos conectados a Internet, desde ordenadores corrientes a tabletas y móviles. En concreto se estructura dividiendo la página en varias columnas, las cuales se adecuarán al tamaño de pantalla que le pidamos.  Está basado en el módulo de CSS3 llamado Media Queries para detectar el tipo de dispositivo que está pidiendo la visualización de la página.entender mejor el comportamiento de las columnas en Skeleton, tomemos en ejemplo una pequeña página web hecha por mí:

• En un principio todo el documento va encapsulado en un «div» con clase «container», que será el contenedor de todo el contenido. A medida que vamos rellenando la página, le vamos otorgando a cada parte el número de columnas que queramos. Es muy importante no pasarse del número de columnas que una pantalla de ordenador medio puede, ya que entonces Skeleton pierde su función. Si, por ejemplo, para el texto de la introducción necesitamos 6 columnas, debemos de jugar con el número de columnas de la imagen (el tamaño de las columnas en píxeles bien definido en skeleton.css), y no pasarnos. Pero sería una pena tener que cortar la imagen por falta de resolución, por ello la mejor opción sería adaptar la imagen a la pantalla, con al etiqueta «class=»ten-din-img» » dentro de «img src» y en el css llamado skeleton para los demás dispositivos.

• ¿Como quedaría? Así de ordenado y siempre mostrando todo el contenido independientemente de la pantalla. Eso sí, ajustándolo a escala.