Desarrollo Web

Preprocesadores 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 (SSG)

Los sitios web dinámicos han mejorado enormemente la experiencia de usuario desde su aparición. La inclusión de las bases de datos y los lenguajes del lado del servidor (PHP, Python, Node) Han permitido implementar, entre otras funcionalidades:

• La reordenaciones de las páginas: el usuario puede solicitar los posts más recientes, de una fecha concreta, más populares, de la temática que le interesa (P. ej. Medicina, Economía, Política, …).
• Realizar consultas sobre datos que por su naturaleza deben estar en una base de datos: P. ej. el horario de un transporte público a partir de una consulta con fecha y con ubicación origen-destino.
• Interactuar con la base de datos, como p. ej. para reservar una pista de pádel para una fecha y hora concretas, etc.

Es difícil imaginar el poder ofrecer una experiencia adecuada sin la parte del lado del servido, en ocasiones imposible.

¿Por qué alguien querría entonces volver a los sitios estáticos, algo que parecía superado y obsoleto? Sin embargo, algunos generadores de sitios estáticos han proliferado y se han convertido en serias alternativas para muchos. El principal motivo es la mejora en la velocidad de carga de las páginas.

Ventajas:

• 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.

Desventajas:

• No hay posible consulta ni escritura en base de datos, ni el uso de otro elemento que requiera el lado del servidor, como formularios.
• 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.

---

Jekyll

Jekyll genera sitios web estáticos completos, ligeros y rápidos, a partir de archivos Markdown. Tiene con soporte integrado para GitHub Pages.

Con una visión más simple que otros CMS como WordPress, Jekyll se ha convertido en una seria alternativa para la creación de sitios web. En este contexto, resulta ideal la combinación de Jekyll y Github Pages, debido a que este último compila automáticamente los sitios estáticos de Jekyll.

El uso de un sitio estático implica la ausencia de bases de datos. Aparte de las ya mencionadas ventajas y desventajas de cualquier otro generador estático, cabría destacar en cuanto a Jekyll:

Ventajas

• Fácil para para desarrolladores, por su simplicidad en el código.
• Buena estabilidad y seguridad, debido a que el servidor web solo entrega archivos de texto.
• Posibilidad de instalarlo autoalojado, o en los servidores de GitHub, de forma grautita.

Desventajas

• No dispone de interfaz gráfica, ni para instalación ni para uso. Se instala y controla desde línea de comandos. Por ello puede ser más difícil para desarrolladores menos habituados al código.

Sitios de interés

• Crea tu propia página o blog gratis con Jekyll y Github
• [docs.github.com] Acerca de las Páginas de GitHub y Jekyll