¿ QUE ES UN FRAMEWORK ?
Un Framework es un "entorno de trabajo" o "marco de trabajo", es un conjunto estandarizado de conceptos, practicas y criterios para enfocar un tipo de problematica particular.
Es un marco creado para facilitar el desarrollo de aplicaciones web, sitios web dinamicos y servicios web, es un conjunto de herramientas que facilitan y agilizan la creacion de sistemas web; permitiendo ademas crear diseños reutilizables.
En el desarrollo de Software, un entorno de trabajo es una estructura conceptual y tecnologica de asistencia definida, normalmente, con artefactos o modulos concreto de Software.
TIPOS DE FRAMEWORKS
Actualmente existen varios tipos de frameworks que se pueden emplear para el desarrollo de aplicaciones, así como de sitios web; entre ellos tenemos:
PARA APLICACIÓN WEB
Es un marco creado para facilitar el desarrollo de aplicaciones web, sitios web dinámicos y servicios web, un conjunto de herramientas que facilitan y agilizan la creación de sistemas web; permitiendo además crear diseños reutilizables.
PARA APLICACIONES
Se trata de un tipo de framework que facilita implementar la estructura estándar de cualquier aplicación para un determinado sistema operativo, Microsoft, por ejemplo, ha desarrollado el .NET Framework, un marco de trabajo que viene incluido en el sistema operativo Windows, ofreciendo a los programadores una extensa biblioteca de clases para los lenguajes de programación de Microsoft Visual Studio.
AJAX
Es un marco de referencia muy utilizado para la creación de páginas web dinámicas y aplicaciones web, ofrece diversos beneficios a los programadores tanto del lado del servidor como del lado del cliente, lo que facilita la programación y la reutilización del código.
DE GESTIÓN DE CONTENIDO
Conocido por sus siglas en inglés CMF, este tipo de framework brinda una interfaz de programación de aplicaciones que facilita y agiliza la creación de un sistema de gestión de contenidos personalizado; posibilitando una gestión muy eficiente del contenido web.
DE MULTIMEDIA
Se trata de un tipo de framework que permite manejar los medios electrónicos de un ordenador o computador, para ello ofrece una interfaz sumamente intuitiva para la creación de diversas aplicaciones multimedia.
¿ QUE ES RESPONSIVE DESING ?
Esta tecnica es una de las mas utilizadas en la actualidad, ya que nos permite hacer nuestros propios sitios web para que se puedan adaptar a cualquier dispositivo movil o desktop.
Responsive Web Desing o tambien conocido como Diseño Web Adaptable, es una tecnica de diseño y desarrollo web que nos permite el uso de estructuras flexibles ( contenedores flexibles, imagenes y videos flexibles ) y junto con Media Queries especificados es CSS, logran adaptar un sitio Web al entorno del dispositivo en el que se encuentre.
Con esta tecnica podemos conseguir que el contenido del diseño del sitio se vea bien y que pueda ser bastante legible para los usuarios sobre el dispositivo con el que interactuen.
Como implementarlo
Aquí tienes dos opciones, tener una web existente o crearla de cero, si tienes una web existente dependiendo de su complejidad puede ser cosa de coser y cantar o puede ser una tarea tediosa (sobre todo si es un CMS con una plantilla desastrosa, a nivel de estructura).
En cuanto avance un poco la guía veréis que crear el diseño sensible desde cero no conlleva mucha dificultad (siempre y cuando el Responsive Design sea la respuesta a la adaptación para móviles de la web que estás desarrollando, no siempre es la mejor opción, pero suele serla).
Tipos de Responsive Designs
Cuando creamos el diseño adaptativo podemos hacerlo de cualquier forma, como mejor se adapte a nuestra web o de la forma que nos mande nuestra imaginación, pero en términos generales hay varios tipos de responsive designs comunes.
Nota: pondré varios ejemplos según el tipo que se abrirán en una página a parte y no añadiré imágenes porque sería demasiado extenso el artículo, podéis probar como se adaptan haciendo más pequeña la ventana del navegador.
Adaptándose al ancho
Este tipo de diseño es uno de los más comunes, que se distingue por no mover en exceso los elementos de la web e intentar que se adapten al ancho de pantalla reduciendo el menú (a veces cambiando la disposición), redimensionado las imágenes y poco más, como ejemplos pongo los siguientes: Mejorando.la y Xitrus.
Cascada de columnas
En este caso tenemos una web con varias columnas, como podría ser Genbeta Dev(con la columna principal con el contenido y la lateral con la publicidad, editores y demás) que al visualizarse en pantallas estrechas se pondría una debajo de la otra seguidamente, por ejemplo: Modernizr y Wee Nudge.
Reestructuración
Como el propio título indica en esta variante cambiamos la estructura de los elementos disponiéndolos de una forma distinta según el tamaño de ventana y se puede hacer de muchas formas (hay solo depende del diseño que queramos) por ejemplo: CSS-Tricks y Food Sense.
Cambio del diseño visual
Esta se podría decir que no es una forma de estructurar el contenido para hacerlo más fácil de manejar fuera del navegador de escritorio, sino que según el tamaño de la ventana adapta el diseño de una forma u otra por motivos estéticos, y suele usarse en las típicas web que te dan la información sobre algo de forma rápida y concisa, como en las siguientes: Neovada y Design made in Germany.
Resumen
Podemos hacer muchos tipos de diseños adaptables, o incluso puede que sea mejor hacer una web dedicada a móviles, eso lo debemos de decidir a la hora de hacer nuestro proyecto, pero crear un Responsive Web Design es apostar sobre seguro.
Esto es solo la introducción, en la guía añadiré todo lo necesario para hacer un diseño adaptativo.
VENTAJAS Y DESVENTAJAS DE UN FRAMEWORK
Ventajas de utilizar una framework CSS
1. Agilización del proceso de desarrollo
Una framework CSS te permite desarrollar más rápido mediante el uso de código base y tareas comunes, de modo que no tienes que empezar desde cero. Si estás trabajando con un equipo, todos tendrán el mismo código, así que la colaboración en equipo también se beneficia de una framework CSS.
2. Facilita la funcionalidad en diversos navegadores
Una framework CSS ya viene programada para que el resultado (es decir, tu aplicación o sitio web) final luzca similar en todos los navegadores, de modo que puedes concentrarte en personalizar y crear contenido en vez de preocuparte en modificar la apariencia base.
3. Te permite trabajar con layout simétrica
Una framework CSS con sistemas de cuadrículas asigna columnas con anchos predefinidos, de modo que puedes concentrarte en la creación de contenido en vez de la alineación de bloques de texto.
4. Refuerza buenos hábitos de diseño
Una framework CSS te provee una serie de selectores que puedes utilizar para tus sitios web y aplicaciones, de este modo el diseño se hace congruente ya que no debes adivinar ni acordarte que hiciste en proyectos pasados.
5. Acelera el desarrollo de las páginas web, ya que conociendo un poco el framework CSS, se pueden desarrollar las páginas de una manera más rápida que si lo hacemos desde cero.
6. Facilita el trabajo en equipo, ya que si hemos desarrollado una página y sus estilos usando un framework, si posteriormente otra persona necesita modificarlos y conoce ese framework, puede mantener la misma línea de desarrollo de las hojas de estilo y esa página web.
7. Garantiza que todo lo que se desarrolle sea compatible con todos los navegadores, lo que si tuviéramos que hacer nosotros mismos supondría más tiempo y esfuerzo.
8. Los frameworks son mantenidos y evolucionados por la comunidad, por lo que los posibles errores son corregidos y sus funciones van ampliándose.
Desventajas de utilizar una framework CSS
1. Limita tu libertad
En general, sólo se utiliza una framework CSS para todos tus proyectos ya que aprender una tras otra realmente no es muy práctico. Ya que una framework CSS tiene una serie de retículas, selectores y otro tipo de código limita tu diseño en cuanto al tamaño de los elementos y el estilo.
2. Añade código extra
Es poco probable que emplees todas las características de una framework CSS por lo que definitivamente tus aplicaciones tendrán código que no necesitas. Esto podría ser un problema si deseas que tu aplicación sea súper ligera y cada byte cuenta.
3. Te fuerza a usar la semántica propia de la framework
Al usar una framework CSS tienes que acostumbrarte a trabajar con la semántica de ésta. En general, esto no suele ser un problema para muchos desarrolladores que trabajan solos. Sin embargo, si estás colaborando con varias personas deberás asegurarte que todos tengan el mismo nivel de conocimiento sobre la framework, lo que es un escenario ideal, por supuesto. Así que debes esperar que tus compañeros se familiaricen con la framework primero.
4. Podría ser una pérdida de tiempo
Si ya estás acostumbrado a trabajar y ordenar tu código de cierta manera y debido a una petición de cliente o a un proyecto en equipo te ves obligado a trabajar con cierta framework CSS, obviamente primero debes aprender cómo funciona. Esto podría ser tiempo valioso que podrías haber invertido en comenzar a codificar sin el uso de una framework CSS.
5. Al emplear un framework estamos utilizando muchos estilos y muchas librerías y no las estamos empleados todas. Este uso de una gran cantidad elementos hace que nuestra página web pese más y tarde más en descargarse.
6. Si utilizamos un framework CCS, salvo que lo personalicemos, lo que requiere más conocimientos, nuestra página web se va a parecer mucho a millones de páginas web diferentes que se han hecho con el mismo framework.
7. Un framework CSS tiene una curva de aprendizaje, por lo que si queremos utilizarlo primero tenemos que aprender a hacerlo.
8. Otra desventaja muy importante, aunque pueda no parecerlo, es que si utilizamos un framework sin haber aprendido CSS, no vamos a saber hacer cualquier modificación sin el framework, ya que vamos a desconocer la base sobre la que funciona.
¿ Cuales son los Framework CSS mas utilizados ?
| Framework | Descripcion | Ventajas | Desventajas |
| BOOTSTRAP | El framework de desarrollo más conocido y más utilizado en la actualidad, este framework proporciona una gran cantidad de componentes y estilos preestablecidos, un grid responsive de 12 columnas para que organices los componentes de tu sitio web, y una documentación extensa, clara y completa. |
|
|
| FOUNDATION | Foundation fue durante mucho tiempo, el rival directo de Bootstrap, actualmente la adopción de este framework no es tan alta como lo es la de Bootstrap, pero esto no significa que Foundation no sea un framework CSS a tener en cuenta. |
|
|
| BULMA | Bulma CSS es un framework de desarrollo relativamente nuevo, pero ya ha capturado la atención de una gran número de desarrolladores, Bulma CSS se centra en crear un framework CSS ligero y simple utilizando Flexbox para su sistema de rejilla. |
|
|
| MILLIGRAM | El framework CSS Milligram, con un estilo minimalista y limpio, dice tener un tamaño de solo 2kb, su objetivo es ofrecer un rendimiento alto debido a su tamaño, con una alta productividad, al no tener la necesidad de añadir muchas clases a los elementos HTML para aplicar los diferentes estilos disponibles. |
|
|
| ULKIT | El siguiente en la lista es UIKit, con un tamaño pequeño, modular, como lo es Bulma CSS y con un estilo minimalista y limpio. UIKit es una buena opción, a tener en cuenta cuando se trata de frameworks CSS en el 2018 para crear tus proyectos web. |
|
|
| SEMANTIC UI | Semantic UI como su propio nombre indica, está enfocado en un código de programación legible para el programador. En mi opinión Semantic UI es para los desarrolladores que deseen un diseño elegante por medio de un código de programación con un lenguaje natural. |
|
|
| MATERIALICE | Si el proyecto con el cual estás involucrado, desea un diseño al estilo material desing como el que tiene Android, no hay ninguna duda de que tu elección debe ser el framework CSS Materialize. |
|
|
| PURE | Para diseños web simples una de las opciones disponibles es Pure.css. Todos sus componentes tienen como denominador común la simplicidad, Lo que no es para todos los públicos, Pero no hay duda que si buscas una opción con un tamaño reducido y un estilo sencillo, Pure.css es un buen candidato. |
|
|
| KUBE | Kube no es un framework CSS muy usado, pero su estilo me parece muy refinado, por lo que decidí añadirlo a esta lista rodeado de los mejores, y de esta forma dispones de alguna opción más con un diseño diferente a los nombrados más arriba. |
|
|