Seguir leyendo «3 Frameworks básicos para construir una buena página web»

">
logo carlos astudillo

3 Frameworks básicos para construir una buena página web

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

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.

¿Quieres aprender a crear un negocio online sin renunciar a tu empleo invirtiendo desde 60 minutos al día?


Envio correos cada semana para que lo consigas, aplicando ideas concretas con las que descrubrirás cosas como:

✅ Las bases para que tu negocio online se haga realidad sin descuidar a tu familia ni tu empleo.

✅ La mejor forma para organizar tu tiempo, para que empieces a dar forma a tu proyecto..

✅ Ideas para generar ingresos, que te permitan aumentar tu sueldo aunque tu jefe no quiera hacerlo.

✅ Estrategias para conseguir tus primeros clientes que paguen lo que realmente vale tu trabajo.


Mis correos incluyen historias curiosas y experiencias que llevan alguna lección practica en medio y por supuesto tambien mis productos y servicios (que de algo hay que vivir). Envio varios correos por semana, unas menos y otras más. No regalo nada por suscribirse, pero cada email es un regalo que puede ser la chispa que te faltaba para encender la llama. Te unes cuando quieres y te das de baja de la misma forma, y tan amigos. Si te suscribes recibirás un correo para que confirmes que realmente quieres apuntarte. Nunca esta demás mirar en la carpeta de spam que a veces puedo caer ahí.


Responsable: Carlos Astudillo; Finalidad: Para comunicarme contigo y hacerte llegar información de nuevos contenidos y productos que voy publicando; Legitimación: Tu consentimiento informado; Destinatario: Siteground, donde alojo este sitio web. Lo guardaré ademas en la base de datos de mi cuenta Mailerlite; Derechos: Acceso, rectificación, limitación y eliminación de tus datos si me lo pides; Plazo de conservación de los datos: Hasta que me pidas la eliminación de los datos entregados por ti en este formulario.