ionic-framework-workshop visual engineering

WORKSHOP: APLICACIONES HÍBRIDAS CON IONIC

Ionic es un framework open source gratuito que permite crear aplicaciones híbridas basadas en HTML5 optimizado para móvil, CSS3, y JavaScript. Para instalar ionic necesitamos tener instalado nodejs.

Las aplicaciones híbridas son aplicaciones multiplataforma, es decir, aplicaciones que se pueden ejecutar en Android, iOS, Windows Phone,... sin la necesidad de desarrollarla 2 o 3 veces como te tocaría hacer si tuvieras que hacerlo con el correspondiente lenguaje nativo de cada plataforma.

El framework esta construido con Angular y SASS básicamente, que permite trabajar con elementos CSS de una forma muy cómoda y de ese modo permite asegurar aplicaciones altamente interactivas, robustas, rápidas y escalables.

Ionic trabaja con cordova y en conjunto nos proporcionan herramientas realmente potentes y sencillas de utilizar para crear aplicaciones impresionantes en un período relativamente corto si lo comparamos a realizar la aplicación con cualquiera de los lenguajes nativos.

Dado que Ionic 2 esta cerca de salir de la clase beta, nuestro ingeniero Enrique Oriol nos impartió un workshop de "Aplicaciones híbridas con Ionic" para refrescar conceptos de cara a trabajar con la nueva versión.

Presentación para descargar: Aplicaciones híbridas con IONIC 


angularjs workshop 3 visual engineering

WORKSHOP: ANGULARJS PARTE III

Si la semana pasada hablamos de las nuevas funcionalidades custom y la anterior de sus funcionalidades de fábrica, en esta hablaremos de AngularJS y su testing.

Angular está diseñado pensando también en cómo testear nuestras aplicaciones. La opción de testing puede ser un factor crítico a la hora de elegir un framework y en este caso, angular cuenta con un buen soporte.

Con Angular podemos escribir fácilmente tests unitarios y tests extremo a extremo. Los unitarios nos permiten definir y comprobar el funcionamiento de los componentes de la aplicación por separado y los de extremo a extremo, usando Karma, podemos ejecutarlos levantando un servidor web e interactuar con nuestra aplicación desde un browser como si fuéramos un usuario.

Estos últimos son más lentos de ejecutar que los unitarios y más costosos de implementar, así que normalmente se crean muchos menos.  Aun así, los tests de extremo a extremo son indispensables para garantizar el buen comportamiento del sistema.

Como habéis visto, el testing es tan indispensable que quisimos que nuestros ingenieros Héctor Canto, Juan Luís Marí y Pablo Balduz nos impartieran un workshop de "AngularJS Parte III", dedicada especialmente a los tests.

Presentación para descargar: AngularJS - Parte III


angularjs workshop 2 visual engineering

WORKSHOP: ANGULARJS PARTE II

Cuando hablamos de AngularJS, muchos hemos oído hablar de Angular2, su nueva versión. De esta versión se destacada sus dos características más relevantes:

  • Simplicidad: lo que se ha perseguido en esta nueva versión es simplificar el framework, quedándose solo con lo bueno y mejorando o eliminando lo malo de la primera versión. Angular2 permite usar ECMAScript 6 y TypeScript, con lo que tenemos una sintaxis mucha más entendible y cercana a lenguajes de programación orientados a objetos como Java o C# y los templates definen claramente las características de la vista de un componente y sus relaciones con otros componentes. Esto hace que la curva de aprendizaje sea mucho más pequeña que hace que la productividad de los equipos aumente, permitiendo que se focalicen en la lógica de negocio y la presentación; el framework ya se encarga del resto.
  • Rendimiento: Se han detectado cambios en la vista que antes se hacía con un digest cycle que consumía muchos ciclos de CPU y ahora se implementa con un sistema reactivo que supone una muy importante mejora de rendimiento. Ahora el databinding es unidireccional. Está optimizado para móviles donde los ciclos de CPU y memoria son parámetros críticos para el correcto funcionamiento.

Ahora que Angular2 ya ha salido de la fase beta, es un buen momento para repasar los fundamentos de AngularJS, ya que aunque a nivel de sintaxis se han producido cambios importantes, algunos conceptos fundamentales como los servicios o los providers, mantienen la esencia de AngularJS.

Como ya dijimos la semana pasada quisimos repasar todo lo de AngularJS y esta semana hicimos el workshop de "AngularJS Parte II" en el que nuestros ingenieros Enrique Oriol y Héctor Canto nos enseñaron la creación de nuevas funcionalidades custom.

Presentación para descargar: AngularJS - Parte II

Y lo mejor de todo es que si tienes experiencia en AngularJS y quieres pasar a Angular2, no tienes que empezar de cero, puedes utilizar la guía de migración para actualizar tu código.


angularjs workshop introduccion visual engineering

WORKSHOP: ANGULARJS PARTE I

AngularJS es un framework MVC de JavaScript para el Desarrollo Web FrontEnd que permite crear aplicaciones SPA (Single Page Applications). Pertenece a la familia de frameworks como BackboneJSEmberJS.

Angular es una solución completa que incluye prácticamente todos los aspectos que puedes necesitar para crear una aplicación cliente en JavaScript. Esto incluye la generación de vistas, el uso de data binding, las rutas, la organización de componentes en módulos, la comunicación con el servidor…

Debemos apostar por AngularJS porque no solo podemos crear SPA, sino que también nos permite desarrollar gran variedad de aplicaciones, aprovechando herramientas como el templating, el two-way data binding, uso de módulos, dependency injection, etc. Las últimas revisiones inician el camino hacia la versión 2, que incorpora TypeScript.

Dado que es uno de los frameworks más utilizados, y que su desarrollador es Google, decidimos refrescar y profundizar bien todos los conocimientos de AngularJS. Para eso hicimos 3 workshops, siendo el primero "AngularJS Parte I" en el que nuestros ingenieros Cristina Hernández y Roger Vilà nos enseñaron todas sus funcionalidades de fábrica.

Presentación para descargar: AngularJS - Parte I

Si quieres profundizar tus conocimientos en este framework, te recomendamos visitar el enlace de su web oficial, donde tienes un portal de aprendizaje y ayuda.


tendencias diseño web y prototipado blog visual engineering

WORKSHOP: TENDENCIAS EN DISEÑO WEB Y PROTOTIPADO

Para cualquier empresa tecnológica y/o de diseño, es muy importante estar al corriente de las últimas tendencias visuales, tanto en el online como el offline.

En cada proyecto, debemos preocuparnos mucho de la estética y de que no parezca anticuada. Es más, nuestro diseño tendrá mucho peso en la primera impresión que la gente se forme de nosotros.

Por ese motivo, tenemos que encontrar un diseño que destaque de los demás y que impacte positivamente a nuestros usuarios.

Es muy importante estudiar y estar al día en las últimas tendencias en usabilidad, diseño web y de aplicaciones, tipografía, tecnología...

Dada esa gran importancia del diseño web, decidimos realizar un workshop de "Tendencias en diseño web y prototipado" que nuestros diseñadores Laura Martínez, Jorge López y Toni Camí nos impartieron.

Presentación para descargar: Workshop Trendy Web Designs & Prototyping

Y si queréis más información sobre diseño web, nuestros diseñadores también nos hicieron un previo workshop de "Herramientas de Diseño" muy interesante.


ecmascript6 workshop visual engineering

WORKSHOP: ECMASCRIPT6

ECMAScript v6 (abreviado como ES6 o ES2015) es el estándar que siguió JavaScript a partir de Junio del año 2015.

Se trata de una evolución del lenguaje JavaScript para dotarlo de características avanzadas que requería y que otros lenguajes populares sí las tenían. Características como:

  • Mejoras de sintaxis: parámetros por defecto, let, plantillas...
  • Módulos para organización de código
  • Promesas, para programación asíncrona
  • Mejoras en programación funcional: expresiones de flecha, iteradores, generadores...

ECMAScript, que también viene a ser conocido como JavaScript, está regulado por la Asociación Europea de Fabricantes de Computadoras (ECMA) quien es la encargada de regular multitud de estándares de ámbito mundial en la industria de la computación.

Los frameworks de FrontEnd más utilizados o modernos, como AngularJS y EmberJS, ya utilizan EcmaScript.

Así como éstos apostaron por él, nosotros también hemos decidido apostar y conocerlo y por ello decidimos realizar un workshop de "ECMAScript6" que nuestros ingenieros Mario García y Alex Adrià nos impartieron.

Presentación para descargar: ECMAScript 6.


BackboneJS patrones mvc visual engineering

WORKSHOP: BACKBONEJS Y PATRONES MVC

Cada vez más, la interfaz de la web está adquiriendo más importancia en el desarrollo de la web. El dinamismo, la usabilidad, la velocidad, entre otros factores, son cada vez más importantes para atraer a los usuarios y lograr objetivos de negocio.

De ese modo, herramientas como jQuery están adquiriendo gran importancia ya que para lograr esa interfaz, no sólo agregan dinamismo, sino que también aceleran la interactividad entre usuarios y navegadores.

Sin embargo, esa herramienta lleva una enorme cantidad de trabajo y el código resultante puede ser muy difícil de mantener. Y es por ello, que han salido herramientas como BackboneJS, AngularJS y EmberJS para proveer una organización de código más conveniente y mantenibleLogran mayor productividad a la hora de construir la interfaz de una web, por medio de la implementación del conocido patrón MVC, aunque en este caso, del lado del cliente.

En definitiva, BackboneJS es una herramienta de desarrollo de JavaScript que está diseñada para desarrollar aplicaciones de una única página y para mantener las diferentes partes de las aplicaciones web sincronizadas.

En vista de todas esas ventajas, quisimos primero hacer un workshop de "BackboneJS y patrones MVC" que nuestro ingeniero Andrés Lamilla nos impartió. Más adelante explicaremos las siguientes herramientas.

 

Presentación para descargar: BACKBONEJS Y PATRONES MVC


SINGLE PAGE APPLICATIONS workshop visual engineering

WORKSHOP: SINGLE PAGE APPLICATIONS (SPA)

Las Single Page Applications, o SPA, son aplicaciones web que se ejecutan en una única página, logrando que el usuario tenga una experiencia parecida a la que tuviese al interactuar con una aplicación de escritorio. Para crear una SPA se utiliza JavaScript, Ajax, HTML5 o una combinación de las anteriores.

Las SPA surgieron de la necesidad de mejorar la experiencia de usuario y el flujo de trabajo. Con las aplicaciones tradicionales, cada vez que el usuario ejecutaba alguna operación, la página web se debía recargar de nuevo y eso suponía un tiempo de espera que, no sólo dependía de la calidad de la web y de los servidores, sino que también de la conexión disponible a Internet y de las características técnicas de su propio ordenador. Todos estos problemas se resuelven con la SPA, porque ésta no requiere recargar la web cada vez que se ejecute una interacción.

Además, una SPA bien programada y que cumpla con los estándares de calidad y con la normativa de accesibilidad, por mucho que se escuche lo contrario, no perjudica en absoluto el SEO. 

Dadas todas esas ventajas, decidimos realizar un workshop de "Single Page Applications" que nuestro ingeniero Marc Torrent nos impartió y el workshop de "Templating: Handlebars y DustJS" de nuestro ingeniero Alex Adrià.

Presentaciones disponibles para descargar:


herramientas de diseño blog visual engineering

WORKSHOP: HERRAMIENTAS DE DISEÑO

Uno de los aspectos fundamentales al crear una web o una app es el diseño. Sin duda es una de las partes más creativas del proyecto, la parte responsable de crear una web con un aspecto externo atractivo, capaz de suscitar el interés y de llamar la atención del público objetivo.

Además de los anteriores requisitos, la web debe tener en cuenta los gustos, el concepto y preferencias del cliente. Son tan importantes estas condiciones, que nosotros quisimos crear este workshop para refrescar el conocimiento de todas las herramientas de diseño posibles para conseguir, e incluso superar, las expectativas de nuestros clientes.

Por ese motivo, nuestros diseñadores Toni Camí y Jorge López nos hicieron el siguiente workshop de "Herramientas de diseño".

Presentación para descargar: Workshop Designer Tools 


testing en javascript visual engineering

WORKSHOP: TESTING EN JAVASCRIPT

Siempre que se programe código, ya sea JavaScript u otro, se debe testear todo antes de presentar la solución al cliente.

Además, éstas pruebas proporcionan ventajas como: facilitan cambios en la aplicación, simplifican la integración, documentan el código, ayudan a tener un código desacoplado, los errores están más acotados y aceleran el desarrollo. 

Como nosotros le damos mucha importancia al test, dado que queremos ofrecer lo mejor a nuestros clientes, nuestros ingenieros Mario García y Raúl Delgado nos hicieron un workshop de "JavaScript Testing".

Presentación disponible para descargar: JavaScript Testing