HTML KickStart, framework responsive
[frame]
[/frame]
Hoy día, al comenzar a implementar cualquier proyecto web, ya sea un sitio propiamente dicho o una aplicación de las llamadas WebApps, es imprescindible hacerlo teniendo en mente la mayor diversidad de dispositivos posibles.
La ubicuidad de los navegadores en ordenadores de sobremesa, tablets, móviles e incluso televisores, provoca la necesidad de que nuestro proyecto web se pueda visualizar correctamente en todos ellos.
Existen así una gran diversidad de resoluciones de pantalla y navegadores. Éstos, a su vez, muestran las páginas mediante diferentes motores de renderizado, cada uno interpretando de manera ligeramente distinta la información que reciben para mostrar en pantalla.
Todo esto no hace más que dificultar a diseñadores y programadores su trabajo, ya que deben tener en consideración una gran cantidad de variables para garantizar una experiencia óptima al usuario final.
Para ayudarnos en esta dificil tarea, existen una serie de “frameworks” que traen resuelta buena parte de las dificultades iniciales y que permiten un ahorro de tiempo y esfuerzo considerable.
Entre los mayores inconvenientes de estos frameworks es que pueden llegar a ser muy sofisticados y complejos, de modo que añaden una gran cantidad de código innecesario que en la mayoría de ocasiones no utilizaremos en nuestros proyectos y, lo que es peor, pueden llevarse una buena cantidad de tiempo mientras aprendemos a utilizarlos.
Algunos de los frameworks más conocidos para desarrollo web del lado del cliente (HTML5, CSS3 y JavaScript) son: HTML5 Boilerplate, Twitter Bootstrap, Zurb Foundation, o Skeleton.
De todo ellos, seguramente sea Twitter Bootstrap el más popular y versatil actualmente. Es verdaderamente potente y viene con una gran cantidad de funcionalidades.
Pero si tuviera que recomendar un framework por su sencillez, flexibilidad, facilidad de uso y elegancia, sin duda me quedo con HTML KickStart.
Si estás mínimamente familiarizado con HTML y CSS, aprender a utilizarlo es tan sencillo como navegar por su página de ejemplo, donde cada funcionalidad viene acompañada del código necesario para su implementación. Además se distribuye bajo licencia MIT, lo que significa que es gratuito y está disponible para la mayoría de aplicaciones que quieras darle.
No obstante, antes de lanzarse conviene conocer algunos detalles básicos sobre como funciona y se utiliza un framework de estas características:
[dropcap type=”square”]1[/dropcap] Un framework se compone e una colección de archivos (generalmente CSS y JavaScript) que deben ser cargados desde la cabecera de nuestros docmentos HTML . Esto se hace, en el caso de HTML KickStart, con un código como este situado entre las etiquetas <head> y </head>:
<script src="js/kickstart.js"></script>
<link rel="stylesheet" href="css/kickstart.css" media="all" />
Recuerda que para que esto funcione debes haber descargado y descomprimido previamente el framework en la misma carpeta en que tengas tu código fuente HTML
[dropcap type=”square”]2[/dropcap] HTML KickStart utiliza jQuery, una conocida librería JavaScript que permite simplificar la manera de interactuar de este lenguaje con el documento HTML. Por lo que esta librería debe cargarse también en la cabecera de nuestras páginas mediante el código:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
En este caso, la librería se descargará directamente desde los servidores de Google, por lo que no es necesario mantener una copia en nuestro ordenador o servidor web. ¡Ah!, y no te preocupes, no necesitas saber jQuery para utilizar el framework aunque, si lo conoces, mucho mejor.
[dropcap type=”square”]3[/dropcap] Los sistemas de tipo responsive como este, se basan en distribuir la información en columnas o en rejilla (grid). Para ello dividen el ancho de la página, en este caso, en 12 columnas que nosotros podemos agrupar como queramos siempre y cuando tengamos en cuenta que deben, al final, sumar 12. Asi por ejemplo si queremos dividir el ancho en dos partes, una que ocupe dos terceras partes y la otra un tercio, escribiríamos, ya en el BODY del documento, un código como este:
<div class="col_8">Columna con dos tercios del ancho disponible</div>
<div class="col_4">Columna con un tercio del ancho disponible</div>
Es importante entender que la división horizontal del espacio se respetará siempre y cuando haya suficiente resolución. De lo contrario, el comportamiento responsive o adaptativo, provocará la reubicación de los bloques o columnas uno debajo del otro, para seguir permitiendo su legibilidad.
Una vez entendidos los tres puntos anteriores estamos listos para utilizar la amplia gama de funcionalidades que HTML KickStart pone a nuestra disposición, entre las que caben destacar:
Tablas con diferentes formatos e incluso la funcionalidad incorporada de ordenar los datos pulsando en la celda de cabecera con el nombre del campo:
[frame]
[/frame]
Botones con diferentes estilos, tamaños y colores a los que se puede acompañar de un icono si así lo deseamos:
[frame]
[/frame]
Slider, que a modo de presentación de diapositivas permite mostrar varias imágenes con una transición entre ellas. Además está preparado para pantallas táctiles de modo que puedan pasarse con el dedo:
[frame]
[/frame]
Iconos. Una enorme colección de casi 250 iconos vectoriales que pueden utilizarse en cualquier tamaño sin miedo a que queden pixelados:
[frame]
[/frame]
Menús tanto verticales como horizontales con toda la funcionalidad preprogramada, para que no tengamos que preocuparnos tampoco de esta eventualidad:
[frame]
[/frame]
En definitiva un framework bueno, bonito y barato que cumple en funcionalidad y facilidad de uso.
Y tu, ¿tienes experiencia con este u otros frameworks para web?. ¿Te gustaría dejarnos tu opinión?. El hilo de comentarios está a tu entera disposición. ¡Muchas gracias!
Hubert
Hola. I’m a french self apprentice developer, and obviously a beginner. You have problems with the french translate. May be i could help you, and learn spanish at same time to develop my own site.
I’ve got a project that goes beyond a simple site, but i have to begin with a simple community e-trade. Only for people around me, localy.
I would apply a simple principle to humans relationship and others ones: atomics and locals interactions in global human environment. The human being in center of everything.