Preprocesador CSS
[mod] Un procesador CSS es un software que permite generar CSS a partir de la sintaxis del preoprocesador. La mayoría de preprocesadores que existen añaden características que el CSS puro no tiene, como las variables, mixins, selectores anidados, … estas características hacen la estructura de CSS más legible y fácil de mantener.
Para usar un preprocesadro CSS se debe instalar un compilador en el servidor web que utilicemos. [/mod]
SASS
| sitio web | instalación | guía básica sobre Sass | documentación |
SASS es el preprocesador CSS más popular que existe.
Framework CSS
Twiter Bootstrap
Twitter Bootstrap o simplemente Bootstrap, es el framework front-end HTML, CSS y JavaScript más popular que existe actualmente. Aunque posee extensiones para JavaScript como se ha señalado, Bootstrap suele catalogarse como “framework para CSS”. Contiene plantillas de diseño con formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS.
Fue creado por un empleado de Twitter, que lo lanzó bajo licencia de software libre. A diferencia de muchos otros frameworks web, Bootstrap solo gestiona el desarrollo frontend.
[txt] Su popularidad se le debe a la facilidad de maquetación que supone usar sus clases CSS, así como el diseño visual de los principales elementos HTML de cualquier página web. [/]
- Hace el desarrollo web más fácil y rápido.
- Incluye plantillas HTML y CSS para tipografía, formularios, botones, tablas, navegación, carruseles de imágenes, plugins JavaScript y más.
- Te facilita la creación de diseños responsive (sitios adaptados a cualquier tamaño de pantalla).
Uso de Bootstrap
Las alternativas para utilizar Bootstrap en nuestro sitio Web:
- Descargar desde getbootstrap.com uno de los siguientes:
- Descargar el código CSS y JavaScript compilado, la forma más fácil de empezar.
- Descargar el código fuente. contiene todos los archivos Less, y JavaScript originales de Bootstrap. Requiere una mayor coinfiguración.
- Descargar el código fuente en formato Sass, una variante de la versión anterior. Permite fácil inclusión de Rails, Compass, o para proyectos de solo Sass.
- Instalar Bootstrap con el gestor de dependencias Bower.
- Inicluir Bootstrap desde un CDN. La empresa NetDNA aloja de forma gratuita en su CDN una copia de los archivos CSS y JavaScript de Bootstrap.
Framework Django + Paquetes y herramientas
Sobre Django
Sitio web del proyecto Django | Guía de aprendizaje de Django de la MDN |
Django es el framework para desarrollo web más popular para programadores Python. Es libre y gratuito bajo licencia BSD.
Django es de alto nivel, permite el desarrollo de sitios web rápidos, escalables y seguros, posee una gran documentación y muchas opciones de soporte gratuito y de pago.
Preparado para crear prácticamente cualquier tipo de sitio. Con Django han sido creadas wikis, redes sociales, …
Algunas de las principales características de Django.
- Protege el sitio web automáticamente, impidiendo la inyección SQL, scripts entre sitios, falsificación de solicitudes entre sitios, el clickjacking, …
- Mucho más potente que cualquier plataforma de creación web de tipo CMS (WordPress, Joomla, Drupal, …), aunque obviamente la dificultad en su aprendizaje es mayor.
- Portable. Al estar escrito en Python, no está sujeto a ninguna plataforma.
- Trabaja con PostgreSQL, MySQL, SQLite y Oracle, y se pueden utilizar otras bases de datos con controladores de terceros.
Django en sí mismo no es el límite de Python. Exiten plataformas escritas sobre Django (el cual está a su vez escrito en Python), como Pinax para crear redes sociales, o Satchmo para crear e-commerces.
Django vs otras alternativas
En esta página se ofrece una comparativa entre los frameworks escritos en Python Zope y Django, y el framework Rails, escrito en lenguaje Ruby. La comparativa se decanta por Django, aunque como siempre, existen discrepancias, las 3 plataformas son de altísima calidad, y en la elección de la herramienta adecuada juegan muchos factores.
En comparación con Zope, a favor de Django juegan la facilidad de aprendizaje y la amplia comunidad y documentación existente (razones muy convincentes para mí).
Pinax
Pinax es una plataforma libre escrita sobre el framework web Django. Proporciona numerosas apps y herramientas Django. Una de las características de Pinax es la de permitirnos construir una red social.
Satchmo eCommerce
| Sitio web del proyecto Satchmo | Documentación |
Satchmo es un framework de comercio electrónico escrito sobre Django, libre bajo licencia BSD. Nos permitirá crear tiendas online completas y seguras.
Gestores de mapas
- GeoDjango. [DjangoDocs] Un módulo de contribución incluido para Django. Simplifica la creación de aplicaciones web geográgficas, como p.ej. los servicios basados en la ubicación.
- Django-easy-maps. [pypi.org] Esta aplicación facilita la visualización de un mapa para cualquier dirección entregada en las plantillas Django. No son necesarias claves API, geocodificación manual, html, JS o cambios en los modelos Django.
- Kartograph. [kartograph.org] Es un framework simple y ligero para crear aplicaciones interactivassin necesidad de Google Maps o cualquier otro sistema de mapas. Kartograph.py, más concretamente, es la biblioteca Python para crear excelentes mapas SVG. Bajo lincencia AGPL.
Otros frameworks Python
Zope
Zope es un software de entorno de desarrollo para la creación de sitios web dinámicos y aplicaciones web usando un servidor de aplicaciones web orientado al objeto, escrito en el lenguaje de programación Python (con algunos componentes escritos en lenguaje C para optimizar su rendimiento) de código abierto publicado bajo la licencia Zope Public License.
Es una seria y buena alternativa a Django para la creación y programación web en el lado servidor.
Ver comparativa Zope vs Django.
Otro frameworks para desarrollo web en el lado servidor
Los frameworks web del lado servidor (es decir, “los frameworks de aplicaciones web”) son software que hacen más fácil escribir, mantener y escalar aplicaciones web. Proporcionan herramientas y bibliotecas para simplificar operaciones comunes de desarrollo web.
Express (Node/JavaScript)
Framework para Node.js. Minimalista, fácil de usar, rápido, amplia documentación, …
Facilita la migración de programadores web de JavaScript de lado cliente a desarrollo de lado servidor, y es eficiente con los recursos.
Ruby on Rails (Ruby)
Rails, o Ruby on Rails, es un framework web escrito para el lenguaje de programación Ruby. Sigue una filosofía de diseño muy similar a Django. Es MVC (modelo vista controlador).
Meteor
Libre y de código abierto, escrito usando Node.js, Meteor intenta solventar la brecha backend/frontend, proporcionando un framework único para los dos.
Permite la creación tanto de aplicaciones web como apps móviles en puro JavaScript.
Meteor se complementa con Apache Cordoba, integrándose con este para construir aplicaciones móviles desde una única base de código.
Gestores de dependencias para desarrollo web
Los gestores de dependencias, si bien no imprescindibles, se han convertido en un elemento importante en el desarrollo web moderno.
Existen la necesidad de mantener todas las dependencias organizadas y actualizadas para desarrollar aplicaciones web de alto nivel., debido a la jungla de herramientas, plugins, librerías y frameworks que podemos necesitar.
[programacion.net] Gestores de dependencias, breve descripción y comparativa
NPM
| Sitio oficial |
Node Package Manager. Desarrollado sobre Node.js, este potente gestor posee un enorme repositorio de 100.000 paquetes y módulos.
NPM descarga repositorios a nuestro entorno de desarrollo local y nos permite cargarlos de forma modular en nuestro js. Solo hay dos cosas que debe hacer, en el terminal npm instale –save module-name y en su js var module = require (‘module-name’)
Bower
| Sitio oficial |
El gestor de paquetes Bower corre en NPM. Esto sumado al hecho de que NPM puede hacer prácticamente todo lo que hace Bower, hace pensar a muchos que no tiene sentido usar Bower. Sin embargo, existen algunas diferencias entre ambos.
JavaScript + frameworks, bibliotecas y otras herramientas
Webpack
Webpack es una herramienta de agregación de recursos para aplicaciones web que permite generar una distribución única a partir de un conjunto de assets.
A medida que las dependencias de nuestro proyecto web crecen el desarrollo se complica y aumenta el número de assets a ser incluidos en el HTML y con ello el número de peticiones que el navegador debe realizar al servidor para cargar la página. Esto perjudica el rendimiento.
Con Webpack obtendremos un único fichero empaquetado, optimizado y listo para el desarrollo.
Webpack utiliza NodeJS, por lo que debemos tener instalado este último en nuestro equipo. Por otra parte, si vamos a instalar webpack mediante NPM, también habremos de tenerlo operativo.
Más sobre Webpack en el manual QE2C JavaScript.
Ajax
En muy pocas palabras, Ajax (Asynchronous JavaScript And XML) permite acceder a datos existentes en el servidor sin necesidad de recargar la página completamente.
Ajax es una técnica de desarrollo web para crear aplicaciones interactivas. Es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones. Por tanto Ajax NO es un lenguaje de programación, sino una técnica o capa superpuesta a JavaScript para acceder a servidores web.
Ajax entre otras funciones, permite la recarga de parte o toda una página web, lo cual forma parte de una de las mejoras de Web 2.0. La recarga o actualización de solo parte de una página web en vez de entera conlleva el ahorro de tiempo característico de las consultas al servidor.
React
| Sitio web oficial en español |
React (también llamado ReactJS) es una magnífica biblioteca de JavaScript de código abierto para construir interfaces de usuario. Sencillo, declarativo y basado en componentes.
Programado en: JavaScript. React es la Vista en un contexto en el que se use el patrón MVC (Modelo-Vista-Controlador) o MVVM (Modelo-vista-modelo de vista).
jQuery
jQuery es la biblioteca más popular y antigua de JavaScript.
Una biblioteca de JavaScript es un complejo programa que simplifica tareas complicadas y resuelve problemas entre navegadores. La sintaxis de jQuery es más sencilla de recordar que la de JavaScript “puro”, o Vanilla javaScript, que es como se conoce a la programación solo con JavaScript, sin ningún Framework ni librería.
MooTools
MooTools (My object oriented tools) es un potente y eficiente Framework web orientado a objetos para JavaScript, de código abierto. Es modular y extensible. el desarrollador elige que componentes usar y cuales no.
Como otras tantas bibliotecas JavaScript, MooTools aporta al usuario muchas ventajas.
Generadores de sitios estáticos
Los sitios web dinámicos, desde que existen, permiten la creación de páginas web de forma dinámica, que posibilitan cosas como que el sistema usado consulte una base de datos y reorganice los artículos, atendiendo a un filtro u ordenación. Así, el usuario puede ordenar por posts más recientes, una fecha concreta, más populares, ver solo la categoría Medicina, Economía, Política, …).
En un sitio estático el programador haría una página para cada tipo de filtro, lo cual sería un trabajo gigantesco, si no directamente imposible.
¿Por qué alguien querría entonces volver a los sitios estáticos, algo que parecía superado y obsoleto? y ¿Como lo haría sin tener que crear una página para cada posible consulta? la respuesta a la segunda, los softwares generadores de sitios estáticos.
Los motivos:
- Velocidad de carga de las páginas, ya que se suprimen las consultas a las bases de datos, costosas en recursos.
- Seguridad y rendimiento. Disminuye la probabilidad de que ocurran accesos no deseados, ya que no hay accesos a bases de datos.
- Control de versiones para los contenidos. Se puede gestionar la estructura de código de un blog en un repositorio de GitHub, y en cada entrada del blog.
Sin embargo, también hay desventajas. Las posibilidades de estos generadores de sitios estáticos tiene un límite, y no son adecuados para proyectos de gran envergadura.
En este artículo, se describe la migración de WordPress y Django a sitio web estático usando Hugo junto con Webpack, los motivos que les impulsan, y el análisis de varias herramientas.
Otra descripción bastante completa sobre los generadores de sitios estáticos.