Bots y Comercio electrónico conversacional desde el punto de vista informático

Tiempo de lectura aproximado: 8 minutos

 

Todo el mundo habla de los bots, en twitter por ejemplo cada pocos segundos alguien comenta algo sobre los bots: https://twitter.com/search?f=tweets&vertical=default&q=bots&src=tyah , además se comenta en los más afamados sitios de tecnología. También se habla del comercio conversacional, en twitter: https://twitter.com/hashtag/convcomm?s=09

¿Qué es? ¿Cómo funciona? voy a hacer una breve introducción y a tratar de darle un enfoque desde el punto de vista informático, no solo hablar de las posibilidades de futuro y así tratar de hablar de cómo funcionan por dentro sin que des un cabezazo sobre el teclado del aburrimiento.

¿Qué es un bot?

La traducción literal de bot es “larva de moscardón” 🙂 pero evidentemente no es de lo que habla todo el mundo. Normalmente se habla de “bot” como aféresis de “robot” y no es más que un pequeño programa informático que intenta imitar el comportamiento humano.

Partiendo de esta base, bots hay de muchos tipos, creo que los dos más extendidos son los “asistentes virtuales” y los “conversacionales”, veamos un poco de historia y después veremos en que consiste cada uno y como funcionan.

Algo de historia

microsoft-word-paperclipLos bots han existido de siempre, no es cosa moderna. ¿Quién no recuerda el fastidioso clip de Word? No estaba muy conseguido pues era bastante molesto, aunque seguramente serviría a mucha gente, creo que salía cada vez que quería usar una característica que no habías usado antes, ¡eso es un bot!, un asistente virtual, programado para reproducir un tutorial cada vez que usas algo nuevo. El concepto en si es bueno, y además lo hacen de forma simpática, sin embargo no caló mucho en los usuarios de Microsoft.

¡Y tanto que han existido!, puedo remontarme mucho más atrás en el tiempo y ya recuerdo alguna especie de bot conversacional que se usaba en la linea de comandos… ¡si! en MSDOS, esa pantalla negra con letras blancas en la que todo se basa en escribir. De esto podría hacer unos 20 años o más. Así que el concepto de bot tal y como se habla hoy, es muy antiguo, entonces, ¿porque ahora se está haciendo famoso?

Si a alguien le interesa aquí: http://www.caad.es/jarel/aventuras.html se pueden descargar algunos “bots” para MSDOS, convertidos en juegos, “aventuras”. También aquí hay un juego online: http://iplayif.com/?story=http://caad.es/jarel/games2/domador.z5

¿Por qué ahora se están haciendo famosos?

Creo que los bots de siempre han tenido un potencial grandísimo que nadie ha sabido explotar (o mejor dicho, aún le queda mucho por explotar) y es ahora cuando se está tratando de conseguir.

Además “los grandes” ya llevan unos años popularizándolos:

siriSIRI

El bot de Apple, creo que su principal motivo de “éxito” (muy cuestionable) es que viene integrado en su sistema, en los iphones e ipad para “llamarla” basta con dejar pulsado el botón central y usando la voz le puedes preguntar lo que quieras en una especie de conversación, es decir, es un bot conversacional pensado como asistente virtual, luego está que te responda lo que quieres.

now-cardGoogle Now

Este es el bot de Google, aunque claro está Google no iba a hacer algo parecido y es un asistente virtual “proactivo”. Como SIRI, está integrado en el sistema (al menos en las versiones limpias de Android. Este bot tiene un apartado en el que van apareciendo cosas que considera interesantes para ti, algunas lo serán y otras no, te permite hacer que no te vuelva a ofrecer cierta información porque no te interesa. De las cosas más curiosas es que te avisa cuando tienes que salir para el aeropuerto porque tienes un vuelo, si este se ha retrasado y la puerta de embarque.

Por otro lado también puedes hablarle en cualquier momento y pedirle lo que quieras diciendo las palabras “Ok google” y a continuación lo que quieras saber. No es conversacional aunque tiene tintes de ello pues en algunas respuestas el bot responde con voz, en otras muchas simplemente te da los resultados de búsqueda.

Cortan+Android+fullbleed-jtCortana

El bot de Microsoft, intentando mejorar las virtudes de su “clip” :), este no lo he probado mucho, pero parece ser muy al estilo de SIRI. Algo que destacar es que viene preinstalado con Windows 10, lo cual puede hacer que se use bastante, no en mi caso desde luego :).

PD. Lo acabo de volver a activar para probarlo bien 🙂

Si todos esto tienen un éxito relativo, y ya existen desde hace tiempo, porque los últimos meses todo el mundo empieza a hablar de ellos como una revolución.

La revolución: Comercio electrónico conversacional

Todo lo que se está hablando sobre la nueva revolución es por mezclar los bots, con algo que si que está revolucionando nuestras vidas en los últimos años… EL CHAT.

Así pues están surgiendo todo tipo de ideas y apps ya funcionando con millones de fans haciendo uso de esta mezcla CHAT + BOT … Los Chat bot. Como hablar por chat es algo que ya tenemos asumido y todos sabemos como usar, podríamos conversar con un bot para obtener lo que queremos, algo así como SIRI mezclado con Google Now.

Por ejemplo en el futuro podríamos tener en nuestro listado de chat un bot que nos devuelva noticias y podamos preguntarle sobre algo que queremos saber, esto ya lo hace la app Quartz. Como decía Eduardo Manchón en su post, ¿Por qué no usar un bot para rellenar formularios?… bien pensado puede ser muy natural el responder preguntas en una línea de chat en lugar de rellenar una serie de casillas. Podría ser algo así:

li67l

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.

Aquí te pongo un ejemplo de como podría pedirse comida a burger king en un bot de Facebook:

Ahora vamos con el apartado principal que motivó la escritura de este post, ¿Cómo funciona?

¿Cómo funciona un bot?

Como hemos dicho antes tenemos dos tipos principalmente, los que te ofrecen información proactivamente y los conversacionales.

Los que ofrecen informaciòn y resultados de búsqueda como Google Now son bastante “simples”. Tiene parametrizados una serie de servicios que ofrecen a sus usuarios en el horario que el bot considera que les es de más utilidad. Por ejemplo, Google Now te dice cuanto vas a tardar en llegar al trabajo con el tráfico actual, y te lo “dice” pocos minutos antes de que salgas para el trabajo, el como sabe google cuando vas y donde a tu trabajo es otro tema, pero el bot se ocupa de mostrártelo. Igual con el resto de servicios que disponen (que irán aumentando se supone): resultados deportivos, meteorología, acciones y últimamente las últimas entradas de las páginas que más visitas.

Solo hablo de Google now porque es el que más conozco pero el 99% se basan en la misma filosofía informática.

Por otro lado Google Now también tiene un micrófono que al pulsarlo escucha lo que dices, y lo transcribe, SIRI y Cortana igual.

Una vez tienen la frase de voz en texto (no siempre aciertan :)) buscan en la frase “keywords”, es decir, palabras clave que le hagan saber al bot que servicio estamos pidiendo, si no encuentra ninguna, Google simplemente da los resultados de búsqueda, igual que si buscásemos la frase en Google, casi siempre poco relevante.

Me gustaría hacer entender lo complicado que resulta esto en cuanto a programación, porque cada uno dice (o escribe) las cosas a su manera y el bot debe tratar de entender lo mismo dicho de una forma o de otra, por ejemplo:

Queremos saber la predicción meteorológica en nuestra localidad. Podemos decir o escribir todas estas opciones que el bot debería tratar igual:

“predicción meteorológica para málaga” “temperatura en málaga” “meteorología para hoy en málaga”

Lo que los bots tratarán de hacer es identificar palabras clave en la frase enviada, por ejemplo en el segundo ejemplo:

temperatura en málaga

La palabra clave principal es temperatura, lo cual le dice al bot que estás pidiéndole la predicción de temperatura. A continuación ha identificado el keyword málaga que es una población, por lo que el bot une los dos conceptos y entiende que quieres la predicción en málaga.

Todo esto para este caso concreto, imagina tener en cuenta la forma de escribir de cada uno, con sus errores o sus expresiones y el bot debería tratar de identificarlo, y estamos hablando solo de España, temperatura, Español… imaginaros todo esto en el mundo, lenguajes, dialectos y 100 o 1000 servicios. En definitiva requiere de una base de datos gigantesca que agrupe conceptos y los asigne a servicios. En esto se podría programar al bot para que esté preparado para responder a cualquier cosa. Por ejemplo SIRI responde de formas “casi humana” cuando se le pregunta por temas “humanos” como por ejemplo “de que color son tus ojos” responde “se ve que no tengo ojos” el bot está preparado para responder a estas preguntas explícitamente, con estos fríos datos espero no romper las ilusiones de nadie 🙂 pero todo… cada respuesta “original” está programada de antemano.

Así pues, este tipo sería una interface con un cuadro donde el usuario pueda escribir lo que quiera. Una base de datos enorme con todas las keywords que sean necesarias y una inteligencia que sea capaz de buscar estas keys en la base de datos y obtener el servicio al cual están relacionadas estas keywords.

Conversación con opciones

Otra opción de “conversar” es simplemente que el sistema solo te deje escribir cuando debas hacerlo y que te pregunte solo keywords, por ejemplo te pegunta “¿Eres hombre o mujer?”, en lugar de dejarte escribir lo que quieras, solo te aparecen dos botones: uno hombre y otro mujer, sino podrías escribir “libélula” y el bot tendría que estar preparado para responder a eso…

De esta forma, informáticamente solo tienes que tener un “hilo” lógico de proceso, por ejemplo, “hilo de registro”: el bot comienza a explicarte que te vas a registrar y en el código pasamos por una serie de puntos en los que espera la respuesta del usuario la almacena y pasa al siguiente punto. El usuario podría terminar el proceso en cualquier momento porque no le apetece registrarse, en el código tendríamos que salir de estos pasos. Se me ocurre que si el usuario no quiere continuar, el bot podría recordarle al usuario que si le escribe “quiero registrarme” puede volver a hacerlo.

Así que este sería un nuevo servicio “registro”. En el código en primer lugar el bot tiene que estar preparado para recibir esta keyword: “registro”, “registrarme” …. Cuando la captura comprueba si el usuario ya está registrado, si lo está podría sacar un mensaje gracioso como … “Pero si ya te tengo localizado! no tienes que volver a hacerlo”, si no lo está puede volver a entrar en la serie de puntos que comentábamos antes para que el usuario quede registrado. Repito… posibilidades infinitas.

En Shopping Leeks no nos quedamos fuera

En Shopping Leeks ya estoy haciendo pruebas con respecto a esto como ves en esta demo:

 

En una interface de Chat el bot va describiendo al usuario lo que tiene que ir rellenando en cada momento. Con lo que no nos perdemos en una página con varios campos a rellenar que ya nos aburren, simplemente nos dejamos llevar por lo que estamos acostumbrados a hacer: Conversar.

Por ahora no lo vamos a integrar pero quizás si en un futuro próximo.

El proceso es tan fácil que es casi imposible que el usuario se pierda, aun así… si lo hace, nosotros manualmente podemos “parar el bot”, tomar el control y terminar el registro del usuario.

Conclusión

Como ves pinta bien todo lo que se puede pensar sobre los bots, a veces tengo un brain storming personal 😛 pensando en las posibilidades. Pienso que habrá que ir viendo como actúan los usuarios para saber si esto va a funcionar de verdad… como siempre algo puede ser fantástico, pero si no se usa no sirve para nada.

Comparte!

¿Qué ordenador me compro y dónde?

Tiempo de lectura aproximado: 8 minutos

 

Esta pregunta me la hacen cada cierto tiempo mis colegas y familiares y mi respuesta es siempre la misma: depende del uso que me vayas a dar y evidentemente también del presupuesto.

En base a esta reflexión podemos definir cuatro tipos de usuarios según su uso:

  • Sólo navegar, correo y poco más (el más común)
  • Trabajo: excel, photoshop básico o similar.
  • Trabajo intensivo desarrollo de apps, photoshop avanzado ó gamer light
  • Hard gamer, diseñador gráfico, editor de vídeo.

Vamos a ver que PC le va bien a cada uno, voy a enfocarlo de forma práctica teniendo en cuenta un presupuesto ajustado y otro más amplio, dejando de lado los llamados “PCs de sobremesa”, iMacs e Macs mini, para centrarme en los portátiles que agrupa el 90% de las preferencias.

Primero una introducción sobre marcas.

Las marcas en Windows, Mac, Linux, Chrome…

Hablando sobre marcas como siempre hay de todo, pero esto sirve para aclarar a los que menos saben.

mountain-portatil-slim-14-03Windows hay de todos los precios, modelos y marcas, más bonitos y más feos, además ahora los hay táctiles, 2 en uno que son tablet y pc, etc, aquí la verdad es lo que te quieras gastar y según el uso que le des, al haber tantos tipos tienes donde elegir. Las marcas que más recomiendo son Mountain, Lenovo, Asus, Toshiba, PackardBell, Acer, Samsung, Sony, MSI, HP… más o menos en orden, de mejores a peores (a mi juicio, según mi experiencia).

650_1000_dell-xps-13Aunque venden linux pcs directamente, lo habitual es convertir cualquier PC en un linux, porque es un sistema operativo que se instala en casi cualquier máquina, además el sistema operativo es gratuito. Este es un sistema para… digamos… muy fiebres de los sistemas operativos, para sacarle el máximo partido requiere algo de conocimientos. Pero aunque podría ser válido para cualquier área de las que vamos a tratar, tampoco es específica de ninguna, sin embargo es una alternativa gratis de renovar tu PC.

MacBookProMacOS, el sistema operativo de Apple, y solo se puede instalar en sus PCs. Por lo tanto tienes que tener un Mac para usarlo, son PCs bonitos aunque bastante caros, dependiendo para lo que lo necesites es recomendable o no… lo vemos en los siguientes apartados.

MacOS teóricamente solo se puede instalar en Macs, pero hay muchas alternativas para tenerlo instalado junto con un windows o un linux, por ejemplo usando “virtualizadores” como VMWare o VirtualBox, de los que escribiré un post. Otra opción es haciendo un “Hackintosh” que es tener un PC “normal” con MacOS instalado como sistema único.

-15827ChromeOS es el sistema operativo de Google para sus PCs, no es más que una
distribución personalizada de Linux que solo ejecuta el navegador de Google, es decir Chrome, y en el que se pueden ejecutar Apps de Chrome, de las que ya hablé en este post. Son PCs bonitos, ligeros y de precio muy asequible, los más famosos son los que hace Samsung, solo tienes que pensar si tu necesidad de PC se resume solo a lo que te puede dar el navegador, que la verdad, con Chrome es mucho.

Ahora dividamos por la necesidad de comprar un PC:

Sólo navegar, correo y poco más

Si solo lo vas a usar para esto quizás deberías plantearte si realmente lo que necesitas es una tablet, las tienes desde 300€ hasta 1000€ (los ipads pro), pero claro, está el handicap de escribir todo en la pantalla, que no es cómodo. También están proliferando las opciones híbridas de dos tipos: Comprarle un teclado a la tablet, que la mayoría de veces no es cómodo porque el teclado no se ajusta de forma robusta a la tablet y la otra opción serían los mini PCs táctiles, con un robusto teclado unido a la pantalla que incluso se oculta, este último es el caso del Lenovo Yoga por ejemplo, está desde 400€, los teclados para las tablets, incluso para los ipads están desde 20€ los más baratos hasta 120€ los realmente buenos.

54900-img_5608Si 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.

Ojo con los pcs muy baratos, nos asombra lo baratos que son y después al tiempo nos asombra lo lentos que van y nos quejamos de que los Macs son mucho mejores… ¿porque cuestan 5 veces más? 🙂

Así pues centrándonos en pcs y dividiendo por presupuestos:

Solo navegar
Presupuesto reducido Amplio presupuesto
120€~200€ 250€~500€
RAM 4gb 8gb
HDD (Disco Duro) 500GB 1TB
Pantalla entre 7 y 10 pulgadas entre 7 y 10 pulgadas

El resto de características nos deben dar un poco igual si encajas en este perfil. Se que muchas personas se agobian con todos los datos que dan pero hay que ser realistas, ni nos van a dar una super característica por un precio bajo, ni nos van a intentar timar pagando demasiado (siempre y cuando compremos en un sitio de confianza… último apartado).

Trabajo “light”

laptop_park-18973Este 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.

Trabajo light
Presupuesto reducido Amplio presupuesto
250€~400€ 400€~700
RAM 4gb 8gb
Disco Duro HDD 500GB SSD 128GB
Pantalla unas 10 pulgadas entre 10 y 13 pulgadas

Trabajo intensivo

stressed businessman sleeping on a laptop. Studio shot

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.

En mi caso decidí cambiar de PC cuando me di cuenta de que me quedaba más tiempo esperando la respuesta del pc que el a mi… algo no me cuadraba, perdía el tiempo y tenía que invertir en una nueva máquina.

Una de las características que mejora la máquina de forma bastante económica es la RAM. Muchos pcs vienen con 4GB y nosotros mismos podemos duplicarla de forma muy fácil y por unos 50€ más, también podemos buscar el mismo modelo pero con 8GB. Algunas marcas como Mountain montan los portátiles al gusto del cliente y puedes pedir la RAM que quieras y por el precio que cuesta la RAM, sin ningún plus absurdo.

Este suele ser un apartado también para los desarrolladores de Apps (tan de moda ahora :P) y para eso conviene una pantalla grande, sobre todo si vas a desarrollar Apps para iOS porque Xcode requiere de mucho espacio en pantalla. Tanto la pantalla como la RAM son buenos compañeros para los editores y fotógrafos de Photoshop y fotógrafos con Lightroom, además en cuanto a la pantalla comienza a ser aconsejable que sea IPS (los colores son mucho más realistas, además de otras características). También por supuesto la pantalla debería ser FullHD, para poder verlo todo con calidad y en el caso de la programación verlo nítido. Otra alternativa que muchos usamos para la pantalla es tener un monitor bien grande al que enchufamos el portátil, de esta forma la pantalla del portátil pierde protagonismo.

Y ahora características principales vs presupuesto.

Trabajo intensivo
Presupuesto reducido Amplio presupuesto
500€~600€ 800€~1000
RAM 8gb 16gb
Disco Duro HDD 1TB SSD 128GB + 1TB
Pantalla 15 pulgadas 15/17 pulgadas IPS mate

Hard gamer, diseñador gráfico, editor de vídeo.

video-editing-bayAquí 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, etc

El 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”:

Tope
Presupuesto reducido Amplio presupuesto
1.000€~1.200€ 1.800€~3.000
RAM 8gb 32gb
Disco Duro SSD 128GB + 1TB SSD 512GB + 4TB
Pantalla 15 pulgadas 15/17 pulgadas IPS mate

¿Dónde comprar?

where-to-buy-Balla-PowderEsto 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.

¿Y en internet donde concretamente?

De supermercados no me gustaría hablar… todos los conocemos todos, pero las tiendas en internet son una jungla (os lo dice alguien que hace un montón de años tuvo una tienda en internet) y os puedo dar algunas referencias concretas. No quiero decir que el resto estén mal, simplemente de las que hablo son por que las he probado y tengo buenas experiencias.

PCComponentes: Me encanta esta tienda, son rapidísimos y no tienen mal servicio de atención al cliente. Si algo lo tienen en existencia y lo pides antes de las 18:00, si vives en una ciudad más o menos grande al día siguiente lo tienes en casa… muy bien y mucha variedad, precios ajustadísimos.

Mountain: Aquí solo puedes comprar PCs de su marca, como es normal. Son muy profesionales y puedes configurártelos a tu gusto, siempre que puedas pagarlos porque sus modelos empiezan en los 800€, aunque los valen porque son buenísimos.

Coolmod: Hace mucho que no compro en esta tienda pero las veces que lo he hecho no ha estado mal.

Apple: Funcionan bastante bien y tienen los mismos precios en las tiendas.

RedCoon: Aquí tienen electrónica de todo tipo, no muy especializados, por lo que encajaría con los dos primeros perfiles. Como tienda funciona muy bien, incluso las devoluciones muy ágiles.

Amazon: Evidentemente un sitio de referencia para todo tipo de electrónica, el único problema es que es tan enorme que es fácil perderse, hay que tener muy en cuenta los comentarios. Tanto que hay de todo… hay un portatil MSI por 4.400€ Y a simple vista no es para tanto 🙂

En cualquier caso si queréis preguntarme cualquier cosa… sin problema.

Comparte!

Editores de código

Nuevo post tras mucho tiempo… es lo que tiene ser padre por duplicado… ya escribiré un post sobre esto… cuando tenga más experiencia.

Algo que tenía apuntado para comentar solo interesa a programadores y también a aquellos que los tienen a su cargo para poder alabarles o rebatirles algo en algún momento. También sirve como cultura general sobre programación.

La mayoría de estos están en Windows, Mac y Linux, si solo está en un sistema lo aclararé.

Eclipse

install-eclipse-ide-for-java-developers-03

https://eclipse.org/

Un editor de código generalista, que mediante paquetes puede editar multitud de lenguajes, a destacar: Java, PHP y Android. Además también al ser de código abierto hay multitud de editores que claramente están basados en Eclipse, como por ejemplo el primer editor de Android que sacó Google, o también la primera plataforma de desarrollo de Apps Titanium.

El diseño es agradable y viene con muchos atajos que ayudan al programador, sin embargo, puede parecer muy “recargado” y lento para pequeños desarrollos, además soy de los que piensa que “el que mucho abarca poco aprieta”, y cada lenguaje tiene un editor estrella.

Aunque hay editores que es muy válido editando varios lenguajes y los hay que no es bueno para ninguno… más adelante.

Tiene muy buena gestión de proyectos, como he dicho antes dispone de multitud de plugins.

phpDesigner

http://www.mpsoftware.dk/phpdesigner.php

syntaxhighlightingUn gran desconocido a 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.

Otro posterior que tengo pensado es sobre lenguajes de programación.

Algo que sucede con normalidad en el desarrollo web avanzado (por ejemplo) es la mezcla de distintos lenguajes. Es habitual encontrar PHP, javascript y HMTL juntos, pues este editor detecta el lenguaje sobre el que está el cursor, lo colorea con su formato y el resto de código distinto lo pinta en gris, con lo cual puedes ver muy rápido donde tienes el PHP o donde el HTML. Además posee un robusto y rapidísimo debugger “al vuelo”.

Tiene un gestor de proyectos decente y viene preinstalado con muchos plugins como cliente FTP, browser, etc.

Evidentemente está especialmente indicado para editar código PHP.

Dreamweaver

http://www.adobe.com/es/products/dreamweaver.html

dw-wt-3Me 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.

Sublime Text

B7cXd

https://www.sublimetext.com/

Este es uno de esos casos que ves que se habla mucho de el y tu te preguntas “¿por que será?”, y cuando lo pruebas te das cuenta le lo mucho que has tardado en probarlo 🙂

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 paquetes integrado 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.

Xcode

1411058188-xcode-6-header

https://developer.apple.com/xcode/

No me gustaría hablar demasiado mal de este editor puesto que… se me echaría mucha gente encima, pero realmente lo que peor me parece es la arquitectura general (y sobre todo de diseño) de Ios, y no su editor.

Dejando un lado mis diferencias con ios, el editor es bastante completo aunque a mi juicio en ocasiones es muy complicado saber donde está cada cosa y hay que estar continuamente usando buscadores en cada apartado para encontrar aquello que quieres modificar.

Las “batallas” andoid/ios ya las comentaré en otro post.

En proyectos grandes se hace pesadísimo sobre todo el apartado del storyboard, porque lo han hecho todo tan visual que a mi juicio contrarresta en agilidad para el desarrollador. Tanto es así que en ocasiones hay que reiniciar el programa porque se queda congelado.

Evidentemente Xcode solo está para Mac porque solo se pueden desarrollar Apps para Ios utilizando sus máquinas.

Algo que me parece especialmente molesto es que está pensado para pantallas muy grandes sino te obliga a estar ocultando barras laterales e inferior para tener un espacio de trabajo decente, y en ocasiones esto es un problema cuando, por ejemplo, quieres arrastrar el vículo de un botón desde el story board al código.

Me parece agradable a la vista con lo cual está bien para pasar muchas horas delante.

Antes decía que pasamos al apartado de especialistas en cuanto a lenguajes se refiere pero realmente hace un año aproximadamente con Xcode se pueden desarrollar Apps con dos lenguajes: Objetive-C y Swift.

Android Studio

http://developer.android.com/intl/es/tools/studio/index.html

How-To-Make-Android-Apps-With-Android-StudioNo 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.

 

Comparte!

Cómo hacer una extensión para Google Chrome parte 2 – creando una extensión desde cero

Después del post introducción a las extensiones de Chrome tenía bastantes ganas de hacer la segunda parte. En esta vamos ha hacer una extensión desde cero.

Como os comenté en el otro  post, en lugar de hacer un “hola mundo” típico, prefería hacer algo más útil y a la vez encontré algo que me servía a mi para promocionar el blog. Es una extensión en la que se podrá acceder a los últimos posts de mi blog y que además cuando haya uno nuevo avise (sin molestar 🙂 ).

Pulsa en la logo para instalarlo y ver como funciona:

Instalar la extensión en Chrome

Si además quieres saber como lo e implementado, sigue leyendo:

¿Por donde empezamos?

En general la extensión tiene 2 códigos separados: Uno que se ejecuta cuando se pulsa en el icono para abrir la extensión y otro que se ejecuta cuando se abre chrome y comprueba cada cierto tiempo si hay un nuevo post.

Para que la extensión lea cómodamente el contenido de mi blog, he instalado este plugin que permite leer el contenido en JSON:

JSON API

Como ya dije en la primera parte, una extensión no es más que una web un poco especial. Así creamos una carpeta en vuestro PC con el nombre de la extensión, en mi caso la voy a llamar (en principio) “Juan Ramón Jiménez Quick WordPress reader”, dentro de esta carpeta tengo los siguientes archivos:

listado de archivos

Ahora expliquemos cada archivo por separado.

manifest.json

Este es el archivo de descripción de la extensión, contiene los permisos que necesita y los archivos que ejecuta y tiene la siguiente pinta:

 

No quiero explicar todo punto por punto ni todas las posibilidades porque extendería demasiado el post, pero si lo más importante que he hecho.

Todo el contenido de este archivo es muy importante, cualquier cosa que no definamos bien aquí puede provocar que nuestra extensión no funcione correctamente.

El “content_security_policy“, le dice a Chrome cual es la “política de seguridad”, en este caso está puesta la política por defecto y además ‘unsafe-eval‘ que le permite a la extensión ejecutar el comando “eval” y todos sus derivados.

El name, version y description sirven para entre otras cosas mostrarlo en la lista de extensiones en Chrome.

Debemos crear 4 iconos, iguales pero de distinto tamaño. Como ves hay definidos tres: 16px, 48px y 128px ancho por alto, y además, más abajo hay otro “icon.png“, este debe tener 19px. Este último es el icono que se mostrará en Chrome y será el que pulsen los usuario para abrir la extensión.

El “browser_action” es el que define las acciones que realiza nuestra extensión, en este caso definimos que tiene un icono, que cuando el ratón está encima muestra el texto “default_title“, y que al pulsarlo mostrará un popup contenido en el index.html que tenemos en nuestra estructura de archivos.

He definido dos permisos “alarms“, que es lo que permite a la extensión crear una alarma (luego explicaré para que) y permiso para “juanramonjimenez.es” que es el que permite a la extesión leer datos de esta url, aquí podríamos usar el permiso http://*/* que hace que la extensión pueda leer datos de cualquier url que se visite.

Por último definimos el que será nuestro proceso en segundo plano en “background” que es el archivo alarms.js, esto hará que cuando el usuario abra Chrome, ejecutará este archivo y lo dejará cargado en segundo plano mientras navegamos.

alarms.js

Primero explico lo que hace y después pongo el código completo comentado. Como ya dije será un proceso en segundo plano. Crea una referencia a la base de datos local y crea una alarma que se ejecutará cada 60 minutos. El resto son las funciones que llaman al plugin de JSON del WordPress para leer los posts y la lógica que comprueba si hay entradas nuevas y ponen el icono rojo en el logo de la extensión para advertir al usuario.

index.html

Esta es la “web” que se mostrará cuando se pulse en el icono de la extensión, es muy simple solo carga la hoja de estilos, los scripts loadDB.js y app.js y pone la estructura html para que se listen las entradas.

loadDB.js

Este archivo tiene la lógica necesaria para crear la base de datos y la variable de la instacia a esta para poder leerla o insertar nuevos archivos. Realmente no es necesario porque solo se una en el index.html pero si decido ampliar mi extensión y ponerle otros apartados en los que se accede a la base de datos local.

Veréis que el archivo alarms.js empieza exactamente igual, y esto es porque JavaScript no provee de ningún método estandar para hacer “includes” de archivos (de los pocos fallos de javascript 🙂 )

app.js

El archivo es bastante simple, únicamente lee las entradas existentes en la base de datos local y los inyecta en el html de la extensión.

 

estilos.css

Finalmente la hoja de estilos que le da el diseño a la extensión.

Ya con todos los archivos lo único que falta es instalarla en nuestro Chrome.

Instalar la extensión en nuestro Chrome

mantenimiento

Tienes que pulsar en menú, dentro configuración, ahí en el menú de la izquierda tenemos el menú de extensiones. Como ya expliqué hay que activar el modo desarrollador. Pulsamos en “Cargar extensión desempaquetada” y seleccionamos la carpeta en el disco duro que contiene todos los archivos anterior. Si lo has hecho bien verás el icono nuevo en la barra de extensiones, al pulsarlo ejecutará la extensión y verás las entradas del blog.

Ya con todo hecho…

¿Y que más?

Dejamos para futuros posts dos apartados muy importantes: Uno de depuración de la extesión, mediante la cual podemos comprobar internamente como funciona, los fallos que salgan, como guarda los datos en la base de datos local… etc. Y lo otro que dejamos es subir la extensión a la tienda.

Conclusiónwrench-fig11_x002

Como ves si sabes hacer una web y sabes un poco de javascript puedes hacer una extensión de Chrome. En mi caso me ocurre mucho que estoy navegando y se me ocurren cosas que desarrollar, porque me sirven a mi, y probablemente le resulte interesante a más personas, porque aunque ya haya otra extensión que haga lo que se te ha ocurrido tu siempre lo puedes hacer mejor o darle tu estilo.

¡A programar!.

 

Comparte!

Cómo hacer una exetensión para Google Chrome parte 1 Introducción

Este post va a ser una simple introducción a las extensiones. Mi conocimiento no es de experto aunque es cierto que ya tengo una extensión publicada, otras en desarrollo e ideas que haré algún día, pero prefiero indicar que este post es solo para quien no tiene ni idea de por donde empezar.

Esta es la Parte 1 donde voy a describir de forma general las extensiones. En la parte 2 quiero hacer una extensión desde cero que avise cuando haya un nuevo post de este blog 🙂

Para empezar, diferencias entre App y Extension

Veamos algunos conceptos porque se puede confundir:

¿Qué es una Chrome App?

Es una aplicación de chrome, las encontramos en la tienda de extesiones de Chrome, aquí.

aplicaciones chrome extensions

Cuando te la instalas estas aparecen en el menú de aplicaciones chrome:

Pantalla_completa_092015_104016_AM

Como se puede ver en la captura algunas apps tienen una flecha y otros no, sin entrar en detalle es porque hay dos tipos de apps: Las que tienen flecha son solo enlaces a una webapp (en una ventana separada) y las otras son más apps autocontenidas pero igualmente webapps.

¿Que es una extensión de Chrome?

Las extensiones de chrome son pequeñas utilidades que se usan mientras navegas… imagina… cualquier cosa, desde guardar la página para más tarde, tomar una captura de pantalla, publicar en tus redes sociales, formatear el código JSON… y cualquier cosa que hayan desarrollado ¡o lo hagas tu mismo!.

Al principio parecía que en el futuro sería posible usar las extensiones de Chrome en Android, pero parece ser que por ahora no lo van a implementar. Esto habría sido interesante.

Captura_de_pantalla_092015_014540_PM

Al igual que las aplicaciones, las extensiones las podemos encontrar en la tienda de extensiones de Google, como verás hay miles (no he llegado a encontrar una estadística) pero siempre hay cosas por inventar/mejorar o simplemente hacer algo a tu medida que te ayude en tu trabajo solo para ti, yo lo hice.

Instalarlas es tan fácil como elegir una en la tienda y pulsar en instalar, la gradísima mayoría (yo diría que el 99%) son gratis. Dependiendo del tipo de extensión se mostrará de una forma u otra, lo normal es que tengas un icono como la captura de arriba, y de esta forma “abres”(ejecutas) la extensión (también pueden tener un proceso en segundo plano).

Explicada la diferencia veamos en las extensiones algo más en detalle.

Extensiones de Chrome

Internamente ¿Qué son las extensiones?, básicamente son pequeñas páginas web con unas características especiales:

  1. Un archivo manifest.json donde se describen las características de la extensión, archivos que contiene, permisos, etc.
  2. Iconos de unos tamaños concretos (si se va a publicar, que no es necesario, hay que hacer unos diseños especiales).
  3. Una página principal en HTML.
  4. Archivo(s) CSS para darle diseños a las web de la extensión.
  5. Archivo(s) Javascript para darle funcionalidad, uno de ellos puede ser un proceso en segundo plano que se definirá en archivo json, otro puede ser un archivo de instalación que solo se ejecuta cuando instalas la extensión.

Definamos por cada característica especial, lo que las hace especiales:

Archivo manifest.json

Un archivo básico, sin entrar en detalles, podría ser:

Archivos HTML

En las páginas HTML no puede ir integrado código javascript, ni en los tags <script> ni por ejemplo, en los atributos “onload”, “onclick”, etc. Todo debe ir en los archivos JS. Si podemos, por ejemplo, llamar a una función JS desde un tag anchor:

[javascript]
&lt;a href=”javascript:pulsa();”&gt;Pulsa aquí&lt;/a&gt;
[/javascript]

Puedes tener tantas páginas html como necesite tu extensión, sin embargo hoy en día se tiende a hacer webapps en una sola página, para no notar recargas entre páginas por ejemplo.

Las WebApps en una sola página se las conoce como SPA: Single Page Application (aplicaciones de una sola página)

Archivos CSS

No son imprescindibles, siempre puedes integrarla en el tag head dentro del tag style, no es lo más elegante, pero hay que tener en cuenta que son mini páginas y no van a tener unos diseños muy complejos por lo que los estilos serán más minimalistas, si que son más importantes por ejemplo si usas varios html para no tener que replicar los estilos en cada página.

También podemos integrar algún diseño bootstrap pero… hay que tener en cuenta el peso.

Archivos Javascript

Realmente aquí es donde estará el grueso de la extensión pues es donde residirá toda la lógica, todo lo demás es descripción y diseño.

En principio no hay restricciones… una característica bastante potente pues se podrían integrar gestores de Base de datos como TaffyDB (me encanta), librerías como jQuery (para quien las use… yo no), etcétera.

Ya he instalado/creado muchas extensiones y quiero hacer una limpieza, donde las encuentro en chrome.

Administración de extensiones

La forma más rápida es pulsando con el botón derecho sobre el propio icono de la extensión y en el menú que parece pulsar en Administrar extensiones. Que tenga icono es lo más habitual pero como he dicho antes podría no tenerlo. Se pueden administrar las extensiones pulsando en el menú de chrome (las tres barras horizontales debajo de la X para cerrar la ventana en windows), en el menú que se abre pulsar en Configuración. En el menú de la izquierda pulsar en extensiones.

Y es en este apartado donde puedes probar las extensiones que crees sin tener que subirla a la tienda.

Cargar una extensión propia

En la administración de extensiones hay un checkbox para “modo desarrollador” debes tenerlo marcado, así aparecen 3 botones:Captura_sin_título_092215_061410_PM

  • Cargar extensión descomprimida sirve para integrar tu extensión en tu Chrome.
  • Empaquetar extensión sirve para generar un archivo para poder subir la extensión a la tienda.
  • Actualizar extensiones es bastante descriptivo 🙂

Una vez cargada ¿como puedo testearla y ver los fallos internos?

Es fácil, al ser una extensión propia, cuando pulsas con el botón derecho sobre su icono, en el menú aparece la opción de “Inspeccionar popup”, lo que produce que aparezca el mismo panel de inspeccionar del chrome para webs, pero en este caso solo para la extensión, una maravilla.

Conclusión

Cuando descubrí el desarrollo de extesiones, la potencia que tienen y las de posibilidades me pareció un campo interesantísimo para explorar y de hecho siempre me van surgiendo ideas incluso que no quiero ni publicar, sino que simplemente me ayudan en mi trabajo.

También es interesante hacer extensiones de servicios de terceros, como quiero hacer en la segunda parte: crear una extensión que avise cuando haya nuevos posts. Espero tenerla en una semana o dos.

Comparte!