Los Frameworks llegaron para ser, una excelente alternativa para acceder a recursos poderosos de diferentes herramientas de programación y diseño web de una manera ordenada y simple. En este post voy a compartir 3 de ellos que considero elementales para cualquier proyecto de página web.
- Que son los Frameworks
- Bootstrap, CSS super poderoso
- Fontawesome, Íconos por doquier
- Jquery, Programación minima para máxima expresión
Que son los Frameworks
Los frameworks, son ecosistemas de programación y diseño, que toman ciertas tecnologías base y las agrupan bajo un estándar con métodos propios que permiten simplificar el uso de cada tecnología base de la que se desprenden.
Si tuviera que explicarte esto en términos menos técnicos, tomaría el ejemplo de un destornillador. Esta herramienta tiene claramente dos funciones, hacia un lado permite introducir un tornillo en una superficie y hacia el otro lado sacarlo. Además deberás usar diferentes tipos de ellos para trabajar con tornillos diferentes en tamaño y forma
Un Framework en este caso, podría ser un destornillador eléctrico, ya que mediante el uso de una sola herramienta, puedes intercambiar cabezales para trabajar con cualquier clase de tornillo y mediante un botón u otro producir las acciones de atornillar y destornillar.
Si aún no es del todo claro, calma. A medida que te presente estos 3 frameworks seguro aterrizas más el concepto.
Bootstrap, CSS super poderoso
El CSS es un poderoso lenguaje que permite dar formato al contenido y estructura de nuestra página web. Anteriormente hice un post de introducción a CSS para principiantes, por si ni tienes del todo claro de que estoy hablando.
Bootstrap es un Framework de CSS, que te permite acceder a todas las funciones de este lenguaje, pero mediante el uso de clases que ya agrupan buena parte de esas funciones, permitiendo de esta forma conseguir diseños de muy buen nivel, incluso sin ser diseñador.
Un ejemplo básico sería la construcción de un botón. Si yo quisiera hacer un botón verde con letras blancas, usando CSS tradicional, debería recurrir a varias lineas de código para las diferentes propiedades, pero con Bootstrap puedes hacerlo simplemente invocando la clase «btn-success»
Puedes aprender más sobre Bootstrap visitando su sitio web oficial
Fontawesome, Íconos por doquier
Fontawesone, es un Framework que vino a responder a una de las necesidades básicas de los programadores y diseñadores web, a saber tener acceso a una batería de iconos que mantengan cierto equilibrio y limpieza de implementación.
En el mismo ejemplo de crear un botón verde que te comenté en el apartado anterior, supongamos que ese botón está en el formulario de contacto de tu página web y quieres que incluya el icono de un sobre de carta.
Para hacerlo sin Fontawesome deberías encontrar una imagen como la que buscas(estandarizada con los demás iconos de tu web) y recurrir ademas a CSS para dejarla operativa. Sin embargo con Fontawesome, solo tendrías que invocar la etiqueta HTML <i> con la clase «far fa-envelope-open».
Para conocer más de este Framework puedes visitar https://fontawesome.com
Jquery, Programación minima para máxima expresión
Cuando hablamos de Jquery, se trata ya de programación directamente. A diferencia de CSS o HTML que son lenguajes de etiquetas, Jquery es un Framework de lenguaje Javascript y Ajax que nos permite acceder a todo ese poder de manera estándar y simple.
El objetivo de este Framework, ya no está relacionado con diseño, sino con crear funciones que permitan que el botón haga por ejemplo el envío de nuestro correo electrónico en el formulario de contacto. La buena noticia es que gracias a Jquery podrás ahorrar muchas lineas de código y además tener acceso a muchas librerías para funcionalidades como calendarios, carruseles, etc. De hecho Bootstrap tambien lo utiliza.
Para hacelo simple, si por ejemplo, yo quisiera que se muestre un mensaje en pantalla al momento de hacer click en el botón, en Javascript tradicional solo para poder referenciar al botón debería recurrir al método GetElementBYid(id), en Jquery en cambio bastaría con $(#id)
Puedes conocer más de este Framework en https://jquery.com/
Como vez, el poder de los Frameworks es bastante interesante y tambien puedes aplicarlo si creas una página web con wordpress, tal como te enseño en el curso de creación de página web presencial.