Translate

lunes, 2 de noviembre de 2015

Diseño de páginas web con Angularjs




   En colaboración con unos compañeros de un curso para administrar servidores, hemos realizado una página web, basada en angularjs y couchdb, a modo de demostración, de lo fácil y potente que es es un nuevo framework llamado #angularjs, que está basado en #javascript, y al que pueden cargársele funciones con #jquery, y otras librerías css como #bootstrap y #awesome.

   En esta página alojada en el servidor de marsupi.org, que nos han cedido gratuitamente para probar nuevas tecnologías como angularjs y #couchdb, iremos realizando pruebas en nuestro tiempo libre para ver el funcionamiento y desarrollo de estos nuevos productos de software libre se van desarrollando.

   De momento deciros que como bootstrap es una librería #css, que de por sí es responsive, es decir, que se adapta a cualquier tamaño de pantalla, y que como angularjs está basado en javacsript, y hoy en día este lenguaje lo soportan todos los navegadores, las páginas que realicéis con este framework serán soportadas por todos los navegadores y podrán ser vistas en todos los dispositivos, ya sean móviles, phablets, tablets, pc, o smart tv.

   AngularJS, como ya e dicho, es un framework #MVC,  modelo vista controlador,  de JavaScript para el Desarrollo Web Front End que permite crear aplicaciones SPA (Single-Page Applications), aplicaciones en una sola página. Entra dentro de la familia de frameworks como BackboneJS o EmberJS.

   Ha sido desarrollado y mantenido por #Google, que ha puesto a disposición de nosotros en la página oficial del proyecto un tutorial paso a paso a través de una sencilla aplicación web (Un catálogo de Smartphones) que nos sirve para entender lo básico y el vocabulario. La única contra de este material es que utiliza como plantilla el proyecto angular-seed que aunque es bueno para aprender, no es recomendable para un proyecto real que necesite escalar. Aun así, empezar por aquí es un buen paso. También tenéis mucho más tutoriales y videotutoriales por internet.

    Ya que Angularjs está basado en javascript y los navegadores soportan #HTML5, y también #CSS3, no tendréis ningún problema para desarrollar cualquier tipo de página.

    Para realizar esta página y si os decidís a probar a crear web con Angularjs, nosotros hemos utilizado también #Yeoman, que es un generador, básicamente, un plugin que se puede ejecutar con el comando `yo` para realizar toda la estructura de proyectos completos o partes útiles. Proporcionando todo lo necesario para empezar a trabajar sin ningún tipo de dolor de cabeza asociados con una configuración manual.

El flujo de trabajo Yeoman comprende tres tipos de herramientas para mejorar la productividad y la satisfacción en la construcción de una aplicación web: la herramienta de andamios (yo), la herramienta de construcción (Grunt, Gulp, etc) y el gestor de paquetes (como Bower y NPM).
YO
yo andamios fuera una nueva aplicación, escribir la configuración de acabado (por ejemplo Gruntfile, Gulpfile) y tirando en las tareas de construcción pertinentes y dependencias gestor de paquetes (Bower, MNP) que pueda necesitar para su construcción.

Grunt, Gulp, etc.
El sistema de construcción se utiliza para construir, previsualizar y probar el proyecto. Ronco y Gulp dos opciones populares.

Bower, la NGP, etc.
El Administrador de paquetes se utiliza para la gestión de la dependencia, por lo que ya no tiene que descargar y administrar sus scripts manualmente. Bower y NGP son dos opciones populares.