App GRATIS Lista de la compra compartida familiar

Reading Time: 2 minutes

Úsala en Android, iPhone, Windows o Mac

Hace unos años que en mis ratos libres desarrollo Apps «por amor al arte», o dicho de otra forma, cuando no encuentro una App que hace lo que quiero, el precio no me parece justo o está llena de publicidad… pues la desarrollo para mi.

Tengo muchas aplicaciones así, algunas las he publicado y otras no. Todas las que publico en forma de PWA las agrupo en una mini tienda aquí: www.gratiss.es

En esta ocasión te presento una que lleva un tiempo en la Play Store de Google, y como siempre en forma de PWA tanto en gratiss.es como también puedes acceder por su dominio propio que es:

www.lista-compra.com

También la tienes, como decía, en la tienda de Google para instalarla en cualquier Android, aquí:

https://play.google.com/store/apps/details?id=es.juanramonjimenez.listasdelacompra

La hice con las características que necesitaba y que seguramente encajarán con las tuyas o se acercarán mucho, por que al final todos buscamos lo mismo: facilidad de uso y rapidez. Si tiene otras características más complejas está bien, pero… «ya las usaré o no lo haré nunca, pero de partida quiero algo fácil, no quiero preocuparme».

Entras, añades un supermercado, y le añades los primeros productos que necesitas. Si la quieres compartir o usar en tu PC, vas al icono de arriba a la derecha y tienes el código para compartir, la otra persona pone el código y listo… compartida, ni mails, ni teléfonos ni chorradas.

Aquí el video presentación

La lista de la compra familiar, es eso, una lista de la compra agrupada por supermercados o conceptos, que puedes ir marcando según los vas comprando. Todo se sincroniza al instante en la nube, y esto es porque las listas son compartidas. Me explico, en mi caso quería que mi mujer o yo añadiéramos cosas que faltan en casa y cuando fuéramos a la compra, tener todo lo necesario añadido. Llevamos usándola más de un año y… ¡funciona! ☺👌🏼

Puedes usarla para el super, un arcón congelador de casa, la farmacia, ferretería… etc etc.

Adicionalmente puedes compartir las listas por WhatsApp o por cualquier otra vía, en formato de texto, para enviar a alguien con el que no quieres compartir tu lista de forma permanente.

Se me ocurren ideas como la posibilidad de hacer una lista única compartida para que los que reciban el enlace puedan editar la lista igualmente. Pero por el momento no lo voy a desarrollar. También la posibilidad de poner precios y fotos… Y a ti? se te ocurre algo chulo?

Espero que os sea tan útil como a mi. Si me dejáis un comentario en la tienda de Google genial.

Hashtags en Instagram y mi App gratis para obtenerlos «Hashtags bot brain»

Reading Time: 3 minutes

Para que no tengas que pensar al poner etiquetas a tus fotos

De vez en cuando publico fotos en mi Instagram y hace mucho me di cuenta la diferencia entre usar y no hashtags, etiquetas, es decir las palabras que van después del símbolo #.

Aquí mí Instagram: @juanram0n

Y la diferencia es que si no pones ningún hashtag, tu foto solo la verán tus contactos, o alguien que entre en tu perfil.

¿Y si alguien busca una de las palabras que pongo en el texto que acompaña mi foto?¿me encuentra? No. Instagram no busca en el texto del post, solo busca cuentas, lugares y …. etiquetas, exacto. Por esto es importante.

El que uses muchos hashtags no va a hacer que la foto tenga muchas interacciones, la imágen o el video de por sí debe ser bueno sino aunque tenga visibilidad nadie le va a dar a me gusta. También ocurre lo contrario, puedes subir una foto magnífica y si no la ve nadie, nadie le dará a me gusta.

Los hashtags correctos

Tampoco sirve de nada poner hashtags al azar, necesitas poner los que encajen con tu imagen, así los usuarios que sigan esos hashtags verán tu imagen que encaja con el concepto y si es buena, le darán a me gusta. Además el límite de etiquetas por publicación permitido por Instagram son 30.

Además de los hashtags que encajan conceptualmente con la foto, también se pueden añadir otros que siguen muchos usuarios, como por ejemplo #instagood (1.2 Millones de posts), #photooftheday (800 Millones de post)… etc etc.

¿Pensar Hashtags para cada publicación? Más fácil con mi App gratis.

La App que desarrollé para Android y Facebook Messenger, «Hashtags bot brain» hace precisamente esto: Escribes algunos conceptos relacionados con tu publicación, o directamente pegas el texto de tu publicación y directamente te da los 30 tags que más visualizaciones van a tener con tu publicación, puedes revisarlos y si alguno no te parece bien, pues lo quitas y añades otro de los que te propone, todo con un click. Las búsquedas quedan guardadas para que las puedas usar más adelante.

Aquí tienes mi App gratis: https://play.google.com/store/apps/details?id=es.juanramonjimenez.hashtagsbotbrain

También se puede usar como un bot de Facebook Messenger, hablas con el chat, le dices que quieres hashtags, escribes el texto y te lo devuelve, así de fácil.

Así es como se usa en Facebook Messenger.

Aquí puedes probarlo en Facebook Messenger: https://www.facebook.com/Instagram-Hashtag-bot-brain-104859884279244/

También hice un pequeño de video de la forma de uso, aunque no está público porque tiene el diseño antiguo y además a Facebook no le gusta que salga su App en el vídeo:

Y ¿Cómo funciona Hashtags bot brain internamente?

Para empezar localicé una base de datos con los 10.000 hashtags más usados, ordenados por popularidad. Cruzando esta base de datos con otras de sinónimos generé otra base de datos con más de 100.000 tags relacionados según sea un nombre, verbo o adjetivo, le asigné un peso según la fuerza que obtiene dentro de la relación con su hashtag principal.

El sistema «limpia» el texto que introducimos los usuarios (yo soy el primero que lo uso) para quitar palabras «inservibles»: preposiciones, conjunciones, etc. En el texto resultante buscará los hashtags que más encajan con ellos y le asigna una puntuación. De estos hashtags busca los relacionados. Los ordena según la puntuación y lo devuelve al usuario preseleccionando los 30 primeros.

Te invito a que lo pruebes y ojalá te sirva como a mi.

¿Por qué son mejores las App PWA sobre una App nativa, especialmente para usuarios de Apple?

Reading Time: 4 minutes

Siempre he sido usuario de Android y de hecho lo soy, pero desde hace un tiempo llevo un iPhone en el bolsillo. Ya «me tocaba» ser el sufridor de Apple dentro de la empresa…

Después del párrafo anterior probablemente ya no caigo bien ni a los fieles a Apple ni a los defensores de Android. A los de Android por «haberme pasado al lado oscuro» tan fácilmente, pero de hecho no lo ha sido por muchas razones, pero me voy a centrar en el concepto del que quiero dar mi opinión: las apps de apple, si si el AppStore.

Tienda de Apps de Apple

Siempre he criticado a Apple por su tienda de Apps y ahora como he dicho puedo hacerlo desde la experiencia porque tengo un iPhone XR.

Apple «vende» que su tienda es fantástica porque solo encontrarás aplicaciones de calidad, sin porno, símbolos nácis, temas de drogas, etc etc. Y es cierto que no encuentras esas cosas, pero la calidad de las Apps es la misma que encuentras en Android y en ocasiones incluso peor.

Para colmo como está el tópico de que «los usuarios de Apple están acostumbrados a pagar» pues la mayoría de Apps son de pago. Realmente esto no me parece mal, teniendo en cuenta además que soy desarrollador je je. Pero no es por este motivo, es porque si pago una cantidad justa y no tengo publicidad, sería fantástico. Desde mi punto de vista, pagar Apps estaría mejor si te dan un período de prueba, algo razonable, una hora o dos. Teóricamente esto es posible en Apple pero no en todas las Apps, con lo cual el sistema no sirve. En Android por cierto, esto se puede hacer con todas las Apps.

Apps de Apple desde el punto de vista de un desarrollador

Está claro que esto al usuario (no desarrollador) de Apps no le importa nada. Él quiere descargar su App y listo. Es normal.

Sin embargo esto tiene un aspecto muy importante que le afecta de lleno, aunque no lo crea.

¿Cuántas Apps fantásticas se estarán perdiendo los usuarios de Apple debido a la política de desarrolladores?

Este tema no lo conoce mucha gente, como digo, ni les importa, pero el sometimiento que tiene Apple con los desarrolladores es algo exagerado.

Para empezar el mínimo a pagar para tener una cuenta de desarrollador con derecho a subir Apps es de 99€ al año. En Android pagas 20€ como único pago y listo. Ya esto supone una barrera importante. Desarrolladores independientes como yo por ahora sin ánimo de lucro (mis apps personales son gratis y sin anuncios) podría tener Apps en ios, pero «da coraje» tener que pagarle a Apple por tener un escaparate de artículos gratis. ¿Cuantos habrá como yo?…

Por otro lado los permisos que se necesitan para poner en una App… realmente es increíble pero los pasos a seguir en una app con notificaciones serán unos 20, creando unos 10 certificados, y no te equivoques en ninguno, sino vuelta a empezar.

Hay muchos más temas (que ya hablaré en otro post) pero para finalizar el tema de la «review». Cuando un desarrollador envía una app lista para la tienda pasa por un proceso de revisión. Alguien de Apple necesita identificarse en tu App (debes darle usuario y contraseña) y estudiarla para ver si encuentra alguna esvástica o alguna teta…

¿Hay solución para usuarios y desarrolladores? Si.

La solución se llama PWA. Resumiendo son Apps que se instalan en tu dispositivo, se hace entrando en una web. El sistema de instalación aun no está muy fino en iOS, pero seguro que es por motivos estratégicos. Hice un pequeño video para mostrar como se hace en un iPhone:

La App queda igual que si la hubieras instalado del Apple store, pero con muchas ventajas, como por ejemplo que pesan mil veces menos… en serio señores de Apple esto tenéis que mirároslo no puede ser que una mini App ocupe 100 Megas… tendremos que ser bien pensados y no pensar que intentáis ocuparnos así porque si nuestro iPhone para llenarlo y tener que pensar en que necesito uno nuevo más grande…

¿Qué es lo malo de una PWA?

Realmente lo peor es el «escaparate», eso se pierde. Es decir, la tienda de apps. Cuando alguien piensa en buscar una herramienta o juego, piensa en ir a la tienda y buscarla. Otra gente puede ir a buscar en google pero hay que ser más específico en los términos de búsqueda o saldrán webs informativas en lugar de Apps o PWAs que realmente es lo que estás buscando. En la tienda de Apps, con términos más simples solo aparecen apps. Esta es la diferencia.

Con respecto a las tiendas Google ya ha avanzado en este aspecto pues se pueden subir PWAs a la tienda, sin embargo la forma de hacerlo a mi personalmente no me gusta. Supongo que no habrá otra manera más sencilla, por seguridad y organización, pero no me gusta. Hay que generar un APK con android studio y unas características especiales… Solo hay que subirlo una vez, será el «ancla» de la PWA en la store. Para subir actualizaciones solo hay que subir los archivos de la PWA a la web y no hay que subir nada más en el APK.

Lo bueno de este método es que las PWA no son un tipo raro de Apps en la store, simplemente se mezclan con el resto de apps.

En Apple por supuesto no se ha hecho nada de esto, al menos de forma pública.

Yo tengo un pequeño escaparate de PWAs: gratiss.es

gratiss.es

Futuro

El futuro pinta espectacular para los que desarrollamos PWAs. Se están integrando todo tipo de servicios y APIs, sobre todo por parte de Google en Chome y de Mozilla. Lento por ahora por parte de Apple.

Además cada vez más webs ofrecen la instalación, esto es … se transforman en PWA y puedes instalarlo en casi cualquier dispositivo móvil o PC.

¿Como instalar una PWA en un iPhone o un iPad?

Reading Time: < 1 minute

Para ir al grano aquí está el vídeo, después dejo algo de verborrea:

Instalar una PWA en un iPhone

Este es uno de los escollos que le faltan a las PWA para triunfar más aun. La instalación no es lo más fácil del mundo y no lo es especialmente en iPhone.

Hay que pulsar en compartir y después añadir a la pantalla de inicio. Está algo oculto.

Es algo raro teniendo en cuenta que Apple fue uno de los precursores de esta tecnología. Pero en este aspecto no han avanzado mucho.

No es así en los casos de Android, Windows e incluso en Mac, donde la instalación es mucho más sencilla y desde el primer momento se ofrece la posibilidad de instalar.

Por cierto, la PWA que aparece en el video es una de las mías y la podéis probar en www.lista-compra.com (también la tengo en la Play store pero no viene a cuento 🙂

El «nuevo mundo» de las PWA

Reading Time: 5 minutes

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.

https://en.wikipedia.org/wiki/Progressive_web_applications

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.

Así se ve al abrir la PWA instalada en un Mac.

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:

  1. Incluir un manifest.json (imprescindible que incluya un short_name)
  2. Icono png de 192×192 píxeles
  3. Service workers activado
  4. 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

Desarrollo de juegos con Unity

Reading Time: 8 minutes

Vocación

Desarrollar juegos y en general programar es algo que tengo interiorizado desde muy pequeño cuando leía una y otra vez revistas como Micromanía, Hobbi consolas y similares.

¡¡Micromanía 225 pesetas!! recuerdo que eso suponía un esfuerzo en mi economía pero que no me dolía cuando era la fuente más increíble de información en Español sobre el mundo de los juegos. No hablaba mucho sobre programación pero en aquella época era algo bastante «culto» sobre el mundillo.

Después de las lecturas y cargado de ideas uno volvía a la realidad con su Spectrum y a pesar de todo el empeño que se le ponía, basic era… demasiado básico para poder hacer algo decente más allá de un juego de preguntas y respuestas sin gráficos de por medio. Por no hablar de lo difícil que por aquella época resultaba aprender algo, no como ahora con Google y YouTube.

La verdad es que no hice ningún juego o al menos no lo recuerdo, pero siempre me quedó esa espina clavada…. y yo me decía «¡por ideas no es!» pero había un escalón técnico importante.

Empezando

Hace algún tiempo que empecé a hacer mis pinitos en los juegos. Esto coincidió con que fui padre y cuando menos tiempo tenía, pero al final se encuentra hueco.

¿Como empecé? con una de los lenguaje que domino: jQuery, que al final no es más que un «manejador» super ágil del DOM pero de propósito general, para nada pensado específicamente para juegos. Aun así he desarrollado un par de juegos que ya están publicados y varios que me quedaron sin publicar. Ambos publicados son clones pero cada uno con su propia «alma». Están pensados para niños de 2 años en adelante pero sirve para cualquiera que quiera entrenar/calentar su mente. Son juegos tan simples como «buscar parejas» añadiendo varios pros, como poder jugar en Español o Inglés y con algunos niveles algo complejos.

 

El de animales llega casi a los 300 usuarios activos… algo que me enorgullece. La segunda hoy en día no tiene muchos usuarios, seguramente los animales tienen más «tirón» que los colores. Los juegos son gratis y para colmo no tienen publicidad.

Técnicamente no están mal aunque estén desarrollados únicamente con jQuery. Vistosos para los niños y además, se de buena tinta por amigos y por mis propios niños que gusta y entretiene.

Encaminarme a algo más profesional

Y cuando digo profesional no me refiero a vivir de ello, me refiero a usar una plataforma (llámese framework) destinado a hacer video juegos para «matar dos pájaros de un tiro», conocer una plataforma que me permita hacer casi de todo en el futuro y aprender algo nuevo (lenguaje o lo que sea).

Lo primero que se me ocurrió fue buscar frameworks basados en javascript y la verdad que hay muchísimos, tantos que uno acaba un poco perdido porque al final cada framework está especializado en una cosa concreta con lo cual es difícil decidirse.

Por algún motivo empecé por 3D, y es impresionante lo bien que los navegadores modernos mueven gráficos 3D con físicas complejas, librerías como three.js que usando el canvas pintan directamente usando la GPU, lo que les da mucha agilidad.

Aquí os dejo  la página de ejemplos de la propia three:

https://threejs.org/examples/#webgl_animation_cloth

Esta librería tiene sus propias físicas pero se queda corta en cuanto a componentes destinados a desarrollar un juego por ejemplo, es por ello que existen otras librerías como ammo, bullet, cannon, todas basadas en three.js pero centradas en la física y en los controles, todas son impresionantes.

Después de esta investigación, testeo y jugueteo con estas librerías me di cuenta de que quizás para empezar el 3D parecía un poco pretencioso por no hablar de que requiere muchísimo más trabajo hacer cualquier pequeño juego. Decidí que debía volver al 2D.

Profesional y en 2D

Vuelta a la carga de la investigación… cuando buscas estas keywords en google: framework, game, 2d. Uno se sorprende de la cantidad que hay… al final es difícil probarlas todas y empecé a leer reviews de gente que si lo había hecho y me decidí a probar pixi, un framework impresionante con mil ejemplos que mucha gente habla bien de el además con una comunidad muy amplia.

http://www.pixijs.com/

Estuve haciendo bastantes pruebas y me resultó muy fácil empezar a hacer las primeras cosas, un juego de burbujas… muy simple.

Según avanza uno se va dando cuenta de que faltan algunas cosas, o requieren de un trabajo extra. Haciendo memoria la falta más importante es un sistema de escenas, me explico. Casi todos los juegos tienen un menú principal, al pulsar en una de las opciones va al juego por ejemplo. Pues el menú sería una escena y el juego sería otra escena. En pixi hay que hacerlo manualmente ocultando y descubriendo objetos, sin embargo suena simple pero a la hora de hacerlo  no resulta cómodo tener que estar parando animaciones, sonidos, etc etc… Cae uno en la cuenta que al final pixi es un «renderizador» de gráficos, pensé que debía haber otra cosa.

http://phaser.io/

Las escenas también son «fases» del juego y así encontré Phaser otra librería basada en Pixi. Es una capa por encima de Pixi (ya que este al fin y al cabo solo «pinta» gráficos en pantalla) que añade principalmente el control de escenas (y otras muchas más cosas que no llegué a controlar).

¡Ahora si! me dije cuando podía hacer distintos scripts para cada sección de juego. LLegué a avanzar bastante y a tener una primerísima versión del juego de burbujas:

Llegado a este punto pensé que sería buena idea pasar el desarrollo al equipo de beta testing, es decir, mis hijos. Para ello lo mejor sería embutir el juego en una app android. Justo cuando pensé en esto tenía la mosca detrás de la oreja de que podría encontrarme con algunos problemas por que no sabía como se iba a comportar la librería dentro de una app. Pues efectivamente al compilar e instalar me di cuenta del grandísimo problema de phaser, al menos problema para mis intenciones:

Todo funcionaba a excepción de los sprites y esto tras investigar se debe a su sistema de cacheo de assets, deben ser urls para no chocar con ciertas políticas de seguridad de los navegadores, incluso cuando lo estamos ejecutando en local en una app. Al estar metido en un webview no encuentra las urls locales (y el sistema de cache no sabe enrutarlo)

Por más que investigué la única solución parecía ser usar algún framework de javascript para móviles, tipo phonegap. Parece ser que al instalarlo conjuntamente pueden servir a phaser las urls como un servidor local.

Pero eso si que no me gusta, «demasiadas capas» pienso yo, y demasiadas dependencias: javascript, navegador, pixi, phaser, phonegap, android e ios y finalmente play store y appstore. Dejé pasar un tiempo tras la frustración y decidí buscar algo totalmente distinto.

¿Plataforma profesional de desarrollo de video juegos? Unity

Un día recordé que mis colegas de Radical Graphics me comentaron hace tiempo que usaban Unity para desarrollar sus juegos. También uno tiene el logo en el subconsciente cuando empieza algún que otro juego. Es fácil encontrar ejemplos de juegos hecho con unity, pero lo más importante es: que sea potente con una comunidad amplia. Versátil, para poder hacer distintos tipos de desarrollo y si es grátis (al menos para comenzar) pues mejor que mejor.

Lo que más me sorprendió desde el primer momento es la cantidad de plugins y assets gratis que hay para comenzar, la propia plataforma ofrece mini juegos gratis de ejemplo para aprender de ellos.

Algo que no me gustó al principio es que parece estar muy destinado a la parte visual, pero esto es por mi carácter background… pronto me di cuenta que ¿»que es un juego si no es visual»? y no está nada mal este apartado, muy fácil de manejar.

En cuanto a la programación, en versiones anteriores se podía desarrollar con javascript, pero por algún motivo lo quitaron y ahora solo se puede desarrollar con C# (C Sharp), así que era otra ventaja más, aprender un nuevo lenguaje.

Curiosidad para el que no lo sepa C# viene de C «doblemente sumado». Empezó con el lenguaje C allá por 1969, posteriormente con la programación orientada a objetos y un poco más de alto nivel salió C++ que es como C=C+1 es decir sumarle uno, este vio la luz en 1979. Y ya por 1999 salió en escena C#, la almohadilla es como cuatro sumas puestas en un cuadrado, y sería como C++++, es decir C+2. La diferencia de este con el resto es brutal, siendo un leguaje de super alto nivel, muy fácil de aprender.

Actualmente tengo casi lista la primera versión de mi juego «simplón» de explotar burbujas. Se me ha ocurrido que voy a ir haciendo juegos adaptado a la edad de mis niños, ahora tienen 3 años así que lo de explotar cosas tocando en la pantalla les chifla, cuando sepan apuntar, lanzar, etc etc, habré aprendido a hacerlo.

¿Cómo es programar en Unity? a muy grandes rasgos, tienes una escena que puede ser 2D o 3D y una cámara, es esta escena puedes crear objetos llamados game objects, y a estos se les asignan unos componentes configurables que dependiendo de estos se comportarán de una forma u otra. Por ejemplo podemos poner un game object en una posición concreta de pantalla, asignarle un componente sprite renderer y configurarlo con una imagen de una pelota. Con esto se verá un pelota en pantalla inmóvil. Si le asignamos un componente rigid body tendrá un cuerpo y le afectarán las físicas, como por ejemplo la gravedad. Si le asignamos un componente collider, podrá detectar que se choca con otros colliders. Le podemos asignar un componente script y asignarle un archivo C#, este inicialmente (aunque no obligatoriamente) tiene dos métodos básicos que son Start() y Update(). En el gameobject Start se llamará la primera vez que el objeto está en escena y podremos retocar parámetros de los componentes del propio objeto o también de los demás de la escena. Update se llamará una vez cada frame. Y así se hace todo.

Como con todo… en youtube hay mil videos para aprender, un canal que me gusta especialmente es este: https://www.youtube.com/user/Brackeys

Tiene un potente sistema de partículas, un animador, sistema de esqueleto… y más que me quedará por descubrir. Algo también muy interesante es una tienda de objetos ya predefinidos que pueden subir los mismos usuarios, hay objetos y paquetes tanto de pago como gratuitos. Como es evidente los más famosos son los gratuitos y hay más de pago que gratis. De cualquier forma podemos importar cualquier imagen (sprite) que obtengamos de internet o que diseñemos nosotros. También objetos 3d. Unity tiene una especial conexión con modeladores 3D como por ejemplo Malla o el tan de moda blender. Pudiendo tener un objeto importado, hacer correcciones en blender y ver el resultado en unity ya integrado en la escena.

Blender que por cierto es una maravilla 100% gratuita y completísima: https://www.blender.org/

Cuando tenga terminado mi juego de Burbujas con Unity lo añadiré a este artículo.

Ya está listo hace un tiempo, aquí puedes instalarlo en un móvil Android: http://bit.ly/2EXzDH9

Tiene esta pinta:

Conclusión

Si quieres iniciarte en el mundo de desarrollo de video juegos… no es fácil, pero es mucho menos difícil de lo que cabría imaginar, sobre todo si sabes programar. Pero incluso si no sabes programar Unity no es mala opción puesto que tiene una grandísima parte visual que solo hay que saber tocar parámetros y en cuanto a la parte de programación, C Sharp es facilísimo de aprender.

¡Anímate!

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

Reading Time: 8 minutesTodo 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í: https://www.caad.es/jarel/aventuras.html se pueden descargar algunos “bots” para MSDOS, convertidos en juegos, “aventuras”. También aquí hay un juego online: https://iplayif.com/?story=https://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í:li67lLas 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.

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álagaLa 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.

¿Qué ordenador me compro y donde?

Reading Time: 8 minutesEsta 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 unadistribució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 shotEn 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, 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”:

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.

Editores de código

Reading Time: 5 minutesNuevo 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-03https://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

https://www.mpsoftware.dk/phpdesigner.phpsyntaxhighlightingUn 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.

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

https://www.adobe.com/es/products/dreamweaver.htmldw-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

B7cXdhttps://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 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.

Xcode

1411058188-xcode-6-headerhttps://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

https://developer.android.com/intl/es/tools/studio/index.htmlHow-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.

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

Reading Time: 7 minutesDespué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 APIComo 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 archivosAhora 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 nameversion 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 https://*/* 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

mantenimientoTienes 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!.