Desarrollo Web

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

| Sitio web de 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

| Documentación del proyecto Satchmo |

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)

| Sitio web de Express |

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

| Introducción a JavaScript QE2c | QE2c Sobre frameworks, bibliotecas y otras herramientas JS |

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.