Para empezar… definamos ese «nuevo mundo»
¿Has pensado alguna vez que las Apps de las tiendas de Google y Apple son un paso atrás?. A mi como desarrollador se me pasa siempre por la cabeza, el atraso que es que los usuarios tenga que hacer «algo» para tener todas las novedades. Las PWA podrían ser el futuro.
Una PWA o Progressive Web App, según la wikipedia es:
Progressive web applications (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native applications. PWAs combine the flexibility of the web with the experience of a native application.
Traduciendo y yendo al grano son webs que al entrar te ofrecen al usuario instalación, especialmente en Android pero también en iPhone, Windows y Mac. Además una vez instalada funcionan muy similar a como lo haría una App nativa: funcionamiento offline, notificaciones push, acceso a hardware y más.
Si, con el mismo código generas una App para el 95% de los usuarios y contextos, llama la atención ¿verdad?
Por mi parte, para aprender lo máximo posible sobre PWAs lo he llevado a la práctica publicando un pequeño juego que desarrollé, el típico juego de memoria SIMON, si te interesa puedes probarlo e instalarlo (por supuesto) aquí: http://gratiss.es/juego-simonjr/
¿Y para que quiero una web offline?
Muchos ya conocéis la respuesta, pero otros seguramente no lo sabréis y la respuesta es muy fácil: Evidentemente una web de noticias, por ejemplo, no tiene demasiado sentido tenerla offline (aunque también), pero una herramienta web sería muy útil tenerla siempre a mano con un icono en el escritorio y notificaciones push.
Esa es la respuesta, sirve especialmente para herramientas o juegos, imaginemos por ejemplo una App simple de lista de tareas. Es muy fácil hacer una web app que gestione una lista pero si el usuario no la tiene siempre a mano y sincronizada no es útil (ni contemporánea). Pues esto lo solucionan las PWA.
El desarrollo web está de moda
Muchos se echarán las manos a la cabeza al leer esto, pero yo tengo la absoluta convicción de que el futuro de las apps es híbrido o incluso web 100%, tengo pendiente escribir algo específicamente sobre esto.
Actualmente empresas grandísimas con muchos recursos económicos hacen webs híbridas. Es una web embebida dentro de un código nativo (android e iphone). Evidentemente empresas pequeñas también lo hacen. ¿Cómo no va a ser beneficioso desarrollar una única App (con un único código) y poder publicarlo tanto en android como en iphone? ¡Ah si!, perdón, no es beneficioso para los desarrolladores puros nativos, un abrazo para todos ellos por cierto 🙂
Las PWA son un paso previo. Un gran paso previo. No es necesario subir una app a ninguna tienda, es simplemente eso: una web que se puede instalar. Teóricamente son un primer paso para que posteriormente el usuario, contento con el funcionamiento que le aporta el servicio que le da la PWA, acabe por instalarse la app de la tienda (probablemente híbrida también, de hecho, el mismo código). Pero el funcionamiento es tan parecido o tan potente que probablemente no haya necesidad de instalarse una app con lo que para muchos usuarios conlleva: buscar la app en la tienda, saber la clave de descarga, tener espacio en el móvil, etc, etc.
¡Parece que todo son ventajas! pero… no es oro todo lo que reluce.
¿Por que no triunfan las PWAs de forma masiva?
Evidentemente no todo son ventajas, el principal problema es que son muy muy nuevas y se va asumiendo poco a poco. Chrome (como no podía ser de otra forma) ha sido la primera en incorporarlas sobre todo en Android, al entrar en una PWA desde Android en chrome te ofrece la posibilidad de instalarla. Y digo bien con «instalar» ya que no es solo un acceso directo a una web, sino un espacio para los archivos y recursos necesarios, igual que una Aplicación nativa.
En Windows y Mac también se pueden instalar, pero el navegador no te ofrece la posibilidad nada mas entrar (no tardará mucho en hacerlo), hay que hacerlo a través del menú de tres puntos del navegador, ahí está la posibilidad de instalar.
En iOS sorprendentemente también es posible pero usando Safari (tiene sentido que sea en safari porque es algo muy íntimo con el sistema operativo) evidentemente no ofrece la instalación pero pulsando en «compartir» se puede añadir a la pantalla de inicio y queda prácticamente como una app.
Tiene por tanto el handicap de que no es tan fácil instalar como podría ser, algo que contra resta lo fácil que es tenerla instalada y desarrollar una PWA, nada que ver con una App de la store. De todas formas, no creo que tarden mucho en estandarizar todo el sistema.
¿Que características tiene que tener una web para ser una PWA instalable?
Son solo cuatro puntos a tener en cuenta pero se deben cumplir de manera exhaustiva:
- Incluir un manifest.json (imprescindible que incluya un short_name)
- Icono png de 192×192 píxeles
- Service workers activado
- El dominio donde está la PWA debe ser https
Vamos punto por punto:
manifest.json e icono
Es un archivo JSON que describe las características de nuestra PWA. Yo lo he resumido al mínimo. Leerás en otros sitios la cantidad de iconos que puedes poner… si, tantos como te alcance la paciencia, pero realmente solo necesitarás el de 192px cuadrado en PNG, puede llevar transparencia.
Otros valores importantes son el short_name, que es el que se mostrará en el escritorio tras instalar (debajo del icono); Y la start_url que es el punto de inicio de la PWA.
Así tu manifest puede tener esta pinta:
{
"short_name": "MyApp",
"name": "This is my cool App",
"icons": [
{
"src": "icon_192x192.png",
"type": "image/png",
"sizes": "96x96"
}
],
"start_url": "index.html"
}
Y hay que enlazarlo en la cabecera del html así:
<link rel="manifest" href="/manifest.json">
Serviceworkers
No lo conozco con detalle pero es una especie de proxy para el manejo de urls dentro de la PWA y también hace de caché de archivos. Así la PWA podrá funcionar sin internet mostrando las imágenes que tenga cacheadas y navegando por las distintas páginas que esté compuesta.
También es un servicio que se queda funcionando en segundo plano y sirve por ejemplo de listener para mostrar notificaciones push.
No pongo el código porque es demasiado largo, si alguien está interesado puedo enviárselo sin problema. Os dejo un enlace donde Google lo explica con pelos y señales y deja código para que utilicéis: https://developers.google.com/web/fundamentals/codelabs/offline/?hl=es
HTTPS
Esto es un requisito pero debería ser obligatorio en todas tus webs puesto que la tendencia actual es hacerlo todo con el protocolo seguro. Servicios como este y muchos otros «obligan» a usar https para que funcionen, de hecho para instalar el service workers es necesario hacerlo por protocolo seguro.
Tengo pendiente otro post a cerca de «securizar» tu dominio pero se resume en instalar un certificado en tu servidor. Se puede adquirir pero hay un servicio gratuito que lo hace todo, es Let’s Encrypt.
Conclusión
Así que como verás no es tan complicado hacer una PWA y tiene multitud de ventajas. Como he dicho antes simplemente son webs que se instalan pero para que sean todo un éxito pasa por que estandaricen la forma de ofrecer la instalación y porque no… tiendas de PWAs que ya hay algunas, por ejemplo esta que he montado yo 🙂 https://gratiss.es
Los bots han existido de siempre, no es cosa moderna. ¿Quién no recuerda el 
SIRI
Google Now
Cortana
Las posibilidades son infinitas, aunque podría pasar como pasa con muchas cosas en tecnología, que acaba por quedarse en nada o en poco, o por el contrario que todo sea vía Chat.Por lo pronto los principales chats (menos Whatsapp por ahora) incorporan bots en sus apps: Slack (fué de los primeros), Facebook, Telegram, Line, Kik, etc… Otros como WeChat intentan ya hacer que sirva para todo.
Si lo que quieres es un PC lo que deberías buscar es algo no demasiado grande y que pese poco, para que lo puedas usar tanto en una mesa como cómodamente en el sofá sobre las rodillas. Si bien comentábamos que el teclado es importante, tampoco es necesario que sea especialmente grande y pesado.Para este tipo podría ser recomendable un ChromeBook.
Este tipo como el anterior es muy extendido, mucha gente quiere un portátil para trabajar y este trabajo requiere de poca potencia, por ejemplo para usar excel, Word o parecido.Para este tipo de uso recomendaría optimizar la transportabilidad, es decir que no pese mucho y sea pequeño aunque no demasiado para poder trabajar cómodamente y que a la vez puedas usarlo en el sofá, en el tren, bus, etc…Para este perfil también podría usarse un ChromeBook sin embargo, podría quedarse justo usar las Apps de Google para trabajar, aunque bien es cierto que cada vez son más completas y funcionan mejor.
En este apartado ya vamos hablando de palabras mayores, y además el pc pasa a ser una herramienta casi imprescindible por lo que habría que intentar gastarse un buen dinero para tener una buena herramienta… esto nos hará ganar en tiempo y sabemos que el tiempo es oro.
Aquí si que ya hablamos de todo lo mejor que puede llevar un portátil, por lo tanto hasta el presupuesto reducido va a ser un poco elevado, pero hay que ser realistas si vamos a usarlo para alguno de estos desempeños necesitamos mucha potencia si no queremos estar esperando contínuamente la respuesta de la máquina… es más, no solo la respuesta, sino que realmente funcione el software que necesitamos para ello, hay que gastar dinero.Con Hard gamer me refiero a querer usar los últimos juegos y hacerlo a tope de gráficos, esto requiere mucha potencia y velocidad. Y por otro lado los portátiles se calientan muchísimo con los juegos potentes, porque mantiene mucho tiempo al máximo al procesador (el cerebro) y la tarjeta gráfica (se ocupa de que todo se vea bonito y rápido en pantalla) con lo que todo se calienta mucho, además al ser portátiles interiormente todo es muy pequeño y difícil que corra el aire. Sería interesante que para los gamers tuviera una refrigeración muy buena, tan crítico es el tema que muchos gamers optan por pcs de sobremesa. Hay marcas especializadas para los Gamers, tanto Mountain que tiene máquinas potentísimas y las marcas especializadas son MSI y Alienware. También están Acer y Asus, pero a mi juicio no tan especializadas.Diseñador gráfico sería el uso intensivo de Photoshop, inDesign, Lightroom etc etc… y requiere sobre todo muchísima memoria. Para haceros una idea hay ciertos objetos en photoshop que a poco que usemos empieza a bajar el rendimiento si no tienes muchos megas de RAM, y los diseñadores tienen archivos Photoshop que fácilmente llegan a los 100 MB, esto descomprimido en memoria que es como va rápido pueden ser gigas, y solo el archivo, después también está el software. Aquí también englobaría los fotógrafos profesionales, con un uso intensivo de Lighroom, Aperture, etcEl editor de vídeo es otro desempeño que necesita mucha potencia para trabajar de forma profesional y que al terminar un proyecto (renderizar) no tarde varios días, sino que quede listo en horas. También que la edición sea muy fluida, el rendimiento de la máquina baja mucho a medida que usemos varios efectos, transiciones, chroma… etc. Además los tiempos van avanzando y cada vez más calidad y características, por ejemplo el video 4K, el 3D, Realidad Virtual… etc etc.Y por último “la multa”:
Esto también depende de los apartados anteriores, digamos que para los dos primeros tipos:Navegar y Trabajo light. Puedes comprarlo “en cualquier sitio”, tanto supermercados, como tiendas de barrio o tiendas online, al no ser muy especializado hay mucho y a buen precio.Para Trabajo intensivo los centros comerciales empiezan a subir mucho el precio, sus “tope gama” que sería para este perfil, tienen el precio por encima del que le corresponde simplemente por ser su máximo. Recomendaría ir a una tienda de barrio o internet.Para el último tipo “gamer, imagen, video“… Si que buscaría un sitio especializado, en el caso de Apple en sus tiendas, en el caso de Mountain en su tienda en internet (el único sitio donde se pueden comprar los mountain) Y para el resto de alternativas tiendas en internet.
Un gran desconocidoa mi juicio. Me he dedicado durante muchos años a programar en PHP (un gran maltratado) y este editor es de lo que más me ha gustado hasta que conocí Sublime Text del que hablo más adelante.Tiene muy bien integrada la ayuda, y el autocompletado es bastante bueno.
Me cuesta hablar de este editor porque lo tengo en muy mala estima. Nunca he podido usarlo más allá de una hora puesto que siempre me encontraba con sorpresas conforme iba desarrollando código. Es un multi editor, tiene multitud de lenguajes: PHP, java, javascript, coldfusion, etc.Una característica que posee es la inserción de trozos de código, en ocasiones los introduce a conveniencia del editor lo cual resulta muy molesto.Además no es un editor liviano precisamente y resulta lento en la carga y en el debugado.Por decir algo bueno es que tiene una forma de desarrollo en la cual ves “al vuelo” como va quedando el código que vas desarrollando.Es de la empresa Adobe (antes de Macromedia) que como se sabe están enfocados en temas multimedia (photoshop, after effects, prelude, acrobat…) a mi entender no le pega mucho este producto.
Dicen ser un editor de lenguajes de programación hecho por programadores, y la verdad que se nota porque vas encontrando multitud de cosas que en otros editores siempre dices “ojalá pudiera hacer esto” pues con sublime seguro que se puede hacer, de hecho tiene infinitos plugins.Al principio cuando lo instalas no parece gran cosa porque está muy “vacío” sin embargo descubres el importador de paquetesintegrado que hace posible instalarle los plugins que quieras, hasta ahora me ha ocurrido algo que me gustaría, buscarlo en la biblioteca de plugins y encontrarlo.El autocompletado merece de especial atención porque al crear un archivo te va generando una biblioteca de palabras y después cada vez que las repites te las recuerda, al principio parece una tontería y es algo impresionante. Además instalando una pequeña extensión, esta biblioteca de palabras puede ser de todos los archivos abiertos.No todo es bueno (o no he encontrado plugins adecuados), por ejemplo me parece que no sirve para aprender un lenguaje pues la ayuda no está integrada, a mi por ejemplo me costó un poco encontrar un buen debugger de PHP. Tampoco me gusta la gestión de proyectos, se me hace confuso que abra ventanas separadas, y el navegador de archivos tampoco es muy bueno.Con este ya dejamos los “multi editores” y os presento a dos editores especializados.
No quiero que se me note demasiado mi predilección por android, pero creo que va a ser imposible.Google empezó hace unos años usando Eclipse como plataforma para desarrollar Apps, después se dieron cuenta de las limitaciones y ahora su plataforma está basada en Intellij IDEA.Un poco lenta en la carga y por supuesto la siempre lentísima compilación y emulador, quitando esto el editor es muy rápido, incluso en grandes proyectos con complejos diseños. El resaltado de código es muy agradable y la búsqueda está muy accesible.Especialmente destacable la función “find usages” que encuentra en todo el proyecto donde se usa cualquier cosa: función, variable, recurso, color, imagen, etc. La refactorización de nombres también es muy útil para cambiar nombres en todo el proyecto. Impresionante es la visualización de una vista en tantas pantallas como quieras, a la vez y en apaisado o vertical.Como era evidente, Android Studio se puede usar en Windows, Mac y Linux, porque así lo permite IntelliJ.
Más curioso aun es el dominio .tk … imagino que será porque se pueden registrar gratuitamente estas extensiones