Tecnologías Web 104

Multiplataformas

Pues ya ha llegado el nuevo post de Tecnologías Web, espero que os estén gustando y hayáis visto como han ido evolucionando y apareciendo tecnologías para facilitar el desarrollo de la web. ¿Cómo, que no habéis leido los anteriores? Pues podéis empezar por el principio leyendo Tecnologías Web 101, o si sois de los que empezáis la casa por el tejado empezad por el anterior, Tecnologías Web 103.

Durante este cuarto post, contaremos como con la llegada de los smartphones empiezan a surgir aquellos frameworks que permiten desarrollar para múltiples plataformas y dispositivos, además de comentar cual es la librería JavaScript más usada hoy en día para el desarrollo frontend.

Aplicaciones híbridas

Desde la llegada del iPhone en 2007, como hemos comentado en anteriores posts, los dispositivos móviles pasan a ser un medio a través del que consumir información de internet, usar aplicaciones... Y este año, varias de las tecnologías que aparecen van enfocadas a estos dispositivos.

Para empezar, se empieza a hablar del Reponsive Web Design, una técnica por la que vamos a hacer que las aplicaciones web se puedan adaptar a los distintos dispositivos independientemente de su tamaño, es decir, podremos hacer que nuestra aplicación se vea bien en un móvil, una tablet, un portátil... Esto lo vamos a conseguir usando las media queries de CSS para aplicar unas propiedades u otras dependiendo de los distintos tamaños de pantallas, y aplicando otras tecnologías como Flexbox.

También surgen Ionic y PhoneGap (más tarde se le cambió el nombre a Apache Cordova) que nos permiten desarrollar aplicaciones móviles (híbridas) usando los tres principales lenguajes de la web (HTML, CSS y JS).

PhoneGap nos proporciona acceso al hardware de los dispositivos como a la cámara, el acelerómetro, la ubicación, y coge todo nuestro código y lo embebe dentro de un WebView.

Por su parte, Ionic se construye sobre PhoneGap y AngularJS, permitiendo construir las aplicaciones de la misma forma que con PhoneGap, pero cambiando la forma de desarrollar, por aquella que se sigue con AngularJS.

Por otro lado, de la misma forma que podemos desarrollar aplicaciones móviles usando los lenguajes de la web, aparece Electron, de la mano de Github, que nos proporciona un entorno para crear aplicaciones de escritorio multiplataforma. Al igual que las dos herramientas comentadas antes, lo que Electron va a hacer, es encapsular una aplicación web dentro de un contenedor, haciendo que esta tenga un aspecto nativo. Abrir una aplicación hecha con Electron, sería como abrir la aplicación en un navegador Chrome, ya que esta herramienta usa como motor, Chromium.

Todas estas tecnologías suponen una gran ventaja frente a las nativas, ya que no es necesario tener distintos equipos para desarrollar estas aplicaciones, uno que se encargue de desarrollar para los dispositivos de Apple, otro para los dispositivos de Android... sino que con un solo equipo que conozca alguna de las herramientas que acabamos de comentar podría hacer una única aplicación que funcione en todos estos dispositivos (pero cuidado que no todo son ventajas). Entre las desventajas tenemos el rendimiento de las aplicaciones, pues el de las nativas superan al de las híbridas.

En cuanto al tema de estilos en la web, este año se crea PostCSS, una herramienta de JavaScript que se encarga de modificar nuestro código CSS aplicando plugins sobre él. Usando estos plugins podremos empezar a usar funcionalidades como las que ya nos proporcionaban los preprocesadores (funciones, mixins...), podremos aplicar los prefijos automáticamente a aquellas propiedades que los necesiten, se puede eliminar el código que no se usa para dejar los archivos con un menor tamaño...

Hay muchos plugins para PostCSS y los han separado en distintas secciones en función de las modificaciones que van a realizar sobre nuestro código.

Una nueva forma de pensar

Por último, este año, Facebook publica la librería de React. Una librería encargada de la parte de las interfaces de usuario (desarrollando componentes) y con la que podemos crear SPAs. Esta librería surge básicamente porque en Facebook necesitaban una herramienta que ofreciera un mejor rendimiento que las que había en esta época. Para ellos el Two Way Binding que se venía usando en algunas librerías que hemos comentado anteriormente no era lo suficientemente óptimo, por lo que se ha apostado por un flujo de datos unidireccional.

Esta librería introduce conceptos nuevos como el Virtual DOM, una representación del DOM en memoria sobre el que se van a aplicar los cambios para ver a que componentes afectan y renderizar solo aquellos componentes afectados, en lugar de tener que volver a renderizar toda la aplicación cada vez que cambia algo.

Otra de las novedades es la sintaxis que hay que usar para crear los componentes. Esta sintaxis también fue creada por Facebook y es JSX, en la que vamos a definir la estructura de los componentes usando código HTML dentro del JavaScript, algo que parece no gustar a los desarrolladores la primera vez que lo ven, pero que acaban cogiéndole cariño en cuanto le dan una oportunidad.

A día de hoy, esta librería es la más usada en el desarrollo web, habiendo superado a Angular que era la que tenía el primer puesto no hace tanto. Además, si ya teníamos el MEAN Stack, con React aparece el MERN Stack donde se sustituye Angular como framework para las vistas por React.

Y hasta aquí este post. No olvidéis pasaros por el siguiente, Tecnologías Web 105, en el que veremos las herramientas presentadas en los últimos seis años y alguna que está por salir.

Inteligencia Articial con Azure Cognitive Services

Estamos viviendo una época de continuos cambios y transformaciones en el mundo de las tecnologías de la información.

En los tiempos que nos ha tocado vivir, tenemos que dedicar una especial atención al ámbito de la inteligencia artificial, I.A, ya que estamos en los albores de una gran revolución tecnológica que cambiará el mundo.

Hoy vamos a hablar sobre los servicios que el gigante Microsoft nos ofrece en su nube de servicios, la sección denominada como Azure Cognitive Services.

¿Qué base necesito para poder adentrarme en el mundillo de la I.A?

Azure Cognitive Services, trata de hacer accesible la inteligencia artificial, de forma que esté al alcance de todos los desarrolladores, sin que se requiera un gran bagaje en el ámbito del aprendizaje automático.

Muchas veces nos ocurre que cuando queremos adentrarnos en el mundo de la I.A, nos echa atrás la gran cantidad de buenas bases de conocimiento que debemos de tener, en áreas como matemáticas, física, cálculo, etc.

Mediante el uso de estos servicios de Azure, bastará con hacer una llamada API para incorporar capacidades en nuestras aplicaciones como:

• Ver
• Escuchar
• Hablar
• Buscar
• Comprender

En definitiva, se trata de acelerar la toma de decisiones en nuestros sistemas con potentes características que el servicio nos ofrece.

Dependiendo de las características con las que queramos dotar a nuestras aplicaciones, el servicio de Azure Cognitive Services ha agrupado las diferentes API's que se encuentran disponibles en diferentes temáticas. Para dar de alta cualquier API que nos interese, lo podemos hacer directamente desde el propio portal de Microsoft Azure

Podemos contratar cualquier servicio de una API cognitiva específica como cualquier otro servicio de Azure.

¿Cuáles son las API's que Azure Cognitive Services nos proporciona?

Vamos a citar las diferentes temáticas de las que disponemos así como citar algunas de las características de las mismas, para que nos hagamos una idea de lo potente que puede llegar a ser incorporar en nuestras aplicaciones estas funcionalidades.

• API de visión



• Creación de clasificadores personalizados de imágenes.
• Algoritmos faciales avanzados, lo que permite la detección y el reconocimiento de atributos faciales.
• Acceso a algoritmos avanzados para procesar imágenes y devolver información de un vídeo.
• Extracción de información de un vídeo.

• API de Voz

• Agrega a las aplicaciones características habilitadas por voz.
• Proporciona algoritmos para la identificación y verificación del hablante
• Detección en tiempo real del idioma del hablante, y traducción simultánea al idioma que deseemos 
  (Traducción en streaming)
  
  

• API de Idioma
• Servicio LUIS (Language Understanding), que permite que la aplicación entienda lo que una persona quiere decir en sus propias palabras.
• Herramienta QnA Maker, que nos va a permitir generar un servicio de preguntas y respuestas a partir de contenido semiestructurado.
• Base de datos de conocimiento inteligente.
• Procesamiento de lenguaje natural en texto sin formato para el análisis de opiniones, la extracción de frases clave y la detección de idiomas.

• API de Búsqueda

• Servicios de búsqueda de temática basada en el buscador Bing.
• Bing News Search, devuelve una lista de artículos de noticias cuya relevancia se ha determinado para la consulta del usuario.
• Bing Video Search devuelve una lista de vídeos cuya relevancia se ha determinado para la consulta del usuario.
• Bing Spell Check permite realizar correcciones de gramática y ortografía en contexto.

• API de Decisión

• Nos permite supervisar y detectar anomalías en datos de series temporales. 
• Supervisión de posibles contenidos ofensivos, indeseables y peligrosos.
• Posibilidad de elegir la mejor experiencia para mostrar a los usuarios y aprender de su comportamiento en tiempo real.

Podemos encontrar documentación detallada de cada API en la documentación oficial de Microsoft

¿Qué podríamos realizar con aplicaciones que utilizaran dichos servicios?

El abanico de posibilidades que se nos abre de una forma relativamente fácil y accesible es inmensa:

• Realización de un bot que gestione en tiempo real pedidos de comida de un restaurante, que se encargue de anotar el pedido, la dirección y la cantidad de productos.

• Servicios de gestión de reservas en todo tipo de servicios, como vuelos, hoteles, etc.

• En el ámbito de la robótica, robots que sean capaces de recolectar frutos, analizando el punto óptimo de maduración de la fruta, en base al análisis de imágenes en tiempo real.

• Sistemas de seguridad en aeropuertos y aduanas, de forma que sean capaces de identificar a personas mediante el uso de técnicas de reconocimiento facial.

• También relacionado con el ámbito de la seguridad, el análisis de carreteras/vehículos, tanto para la detección de un robo, como para predicciones de colapso de las vías y llevar a cabo toma de decisiones de forma temprana.

Sin duda, vivimos momentos apasionantes, momentos de cambio, donde el poder de la imaginación será algo  fundamental que nos hará reinventarnos y cambiar la forma en la que nos desenvolvemos en nuestro entorno.

Desaparecerán profesiones y se crearán otras nuevas, sustituiremos las labores repetitivas y aburridas por tareas que de verdad nos aporten crecimiento personal y productividad.

Si te atreves a imaginar una idea... ¡Puedes Hacerla Realidad!

Tecnologías web 103

Más frameworks, ahora para CSS también

Llegamos al ecuador de nuestra serie de posts sobre las tecnologías web, ya hemos visto en el primer post Tecnologías Web 101 los inicios de la web, y en el segundo, Tecnologías Web 102, vimos como empiezan a aparecer los primeros frameworks tanto del backend como del frontend.

Pues como no hay dos sin tres, aquí está el tercer post donde veremos como aparecen los primeros frameworks del CSS, la llegada de los componentes web, hasta llegar a la estandarización de un formato que ya se venía usando.

Diseños flexibles

El año 2011 fue el año del CSS. En este año salió CSS3 que traía novedades en el sistema de layout de las páginas. Aparecen Flexbox y Grid Layout que nos permiten crear plantillas flexibles y definir filas y columnas de una forma sencilla reduciendo el uso de la propiedad float que tanta guerra ha dado, y favoreciendo el diseño responsive de las aplicaciones.

A parte de CSS3, también empiezan a salir los frameworks de estilos como Bootstrap (de Twitter) y Foundation (de Zurb) que nos proporcionan una cantidad muy grande de estilos asociados a unas clases predefinidas y que nos hará muy fácil cambiar la apariencia de nuestras aplicaciones. También definen un sistema de columnas que van a facilitar hacer que las aplicaciones se adapten a los distintos tipos de dispositivos.

Uno para todos y todos para uno

Este mismo año Alex Russell introduce los Web Components en la comunidad, una idea influenciada por las directivas de AngularJS que va a permitir la creación de nuevas etiquetas HTML con una estructura y funcionalidad definida y que se pueden reutilizar entre distintas aplicaciones de una forma sencilla.

Por otro lado Google presenta un nuevo lenguaje para la web como alternativa a JavaScript que se viene usando desde los inicios, este lenguaje es Dart, y está pensado para solucionar algunos de los problemas que nos podemos encontrar con JS. Pero no tuvo una fuerte acogida por parte de los desarrolladores que preferían seguir usando JavaScript, y por ello se desecharon los planes que tenía Google para integrar de forma nativa en su navegador una máquina virtual para ejecutar el código y los cambiaron por crear una herramienta para compilar Dart a JavaScript.

Además surgen otros dos framework.

EmberJS para el frontend, permitiéndonos hacer SPAs, donde dos de sus principales características son las que se siguen con Ruby on Rails, COC y DRY. También incorpora un cli que va a hacer que la productividad aumente proporcionando una forma sencilla y rápida para generar servicios, instalar plugins... Y con el podíamos usar las últimas novedades de JavaScript haciendo uso de Babel para transpilar el código. De este framework se ha llegado incluso a grabar un documental.

En cuanto al otro framework, es Laravel, un framework de PHP. En la actualidad es uno de los frameworks de PHP más usados, junto a Symfony mencionado anteriormente. Viene a proporcionarnos un método sencillo y rápido de construir aplicaciones web, en el que la curva de aprendizaje es muy cómoda.

Durante el siguiente año, Microsoft presenta un nuevo lenguaje de programación basado construido sobre JavaScript, el cual nos va a permitir usar características comunes en otros lenguajes y que JavaScript no permite, como el tipado estático o las interfaces. Este nuevo lenguaje es TypeScript, y vamos a poder usarlo tanto para el cliente como para el servidor, aunque en realidad el código final que se va a ejecutar en estos entornos será JavaScript. Por tanto, necesitamos transpilar el código de TS para obtener el código equivalente en JS.

La ventaja de usar TypeScript frente a JavaScript es que a la hora de transpilar el código se nos van a mostrar errores, sobre todo errores de tipado, de tal forma que nuestro código final será más robusto.

Este mismo año, surge un framework web fullstack llamado Meteor que permite crear aplicaciones web, móviles y de escritorio, de una forma muy rápida. Por defecto, como BBDD usa MongoDB, el servidor está montado con Node y para el frontend al principio usaba Blaze como motor de plantillas, pero según han ido apareciendo nuevas librerías han ido añadiendo más opciones como React o Vue. Pero una de las novedades más importantes que trae este framework es la actualización de los datos en tiempo real, es decir, que si abres la misma página desde distintos dispositivos y se añade algún dato nuevo, este aparecerá en todos los dispositivos automáticamente sin necesidad de refrescar la página.

Tras la aparición de frameworks como AngularJS o Backbone que nos permiten crear SPAs y el uso de los dispositivos móviles para entrar en las aplicaciones web, nos encontramos con que tenemos la aplicación dividida en varios archivos que se tienen que descargar, y cuantos más archivos que descargar haya, más peticiones hay que hacer, con lo que ello conlleva.

Aquí es donde entra Webpack, un module bundler que nos permite gestionar todos los recursos que se van a usar en la aplicación. Webpack va a ir aplicando unos loaders a nuestro código que lo va a ir transformando y uniendo hasta generar los archivos finales (un bundle.js). Por ejemplo, si estamos usando Sass, tendremos que transformar el código a CSS y para ello tendremos que aplicar el loader que se encarga de ello. También se encarga de minimizar el código, haciendo que los archivos que genera ocupen el menor espacio posible.

Para el año 2013 se estandariza el formato JSON que Douglas Crockford había especificado anteriormente. Este formato va a empezar a usarse junto a AJAX por sus ventajas, haciendo que los datos que se van a transferir pesen menos, por lo tanto tarden menos en comunicarse el servidor y el cliente, haciendo que la experiencia del usuario mejore. Los desarrolladores terminarán sustituyendo al XML por JSON en las peticiones AJAX.

Aquí terminamos por hoy. En el siguiente post, Tecnologías Web 104,  veremos como la llegada del iPhone hace que se empiece a pensar en el desarrollo responsive, y el desarrollo multiplataforma.