Desde los tiempos de la pandemia nos vimos obligados a cambiar las fechas previstas para las dos reuniones presenciales que celebrábamos cada año con todos los empleados. La reuniones pasaron de verano y Navidad a otoño y primavera para poder plantearnos siempre una reunión al aire libre.
El pasado viernes 27 de mayo nos volvimos a juntar en Madrid empleados de diferentes localizaciones de España con el fin de celebrar la Reunión General de Primavera. El lugar elegido en esta ocasión fue el Restaurante Habanera situado en la calle Génova 28 de Madrid.
En la misma, el CEO de la compañía Ricardo Romero pudo avanzar los números del primer semestre de 2022, repasar los últimos proyectos ganados, dar la bienvenida a los compañeros incorporados en los últimos meses y apuntar algunas novedades importantes que se producirán a partir del mes de septiembre.
Una fiesta donde prácticamente no hubo ausencias y que se prolongó hasta altas horas de la noche.
En consecuencia con la política corporativa de ITERIAM de ir mejorando la formación que reciben nuestros empleados, vamos a empezar a ofrecer la posibilidad de recibir clases de inglés de forma individual y online.
Para esta formación vamos a contar con la plataforma Iboux Education, una escuela de idiomas en línea con la misión de ayudar a cada empleado-estudiante a alcanzar su máximo potencial en sus objetivos de aprendizaje del idioma inglés, mediante una experiencia de aprendizaje personal, asequible y de alta calidad.
A parte de completar tu perfil profesional, la impartición de esta formación apuntala la estrategia de internacionalizar nuestros clientes, siendo el inglés el idioma que se utilizará en algunos de los proyectos que estamos abordando o que nos gustaría ejecutar en el futuro.
Las características de este programa de formación de idiomas para empresas son:
Profesores calificados y certificados.
Plan de Estudios Personal basado en las necesidades de estudio y los objetivos personales de cada estudiante.
Disponibilidad de profesores 24/7 para que los alumnos programen sus clases (sujeto a demanda)
Cuestionario de autoevaluación.
Evaluación de nivel y de las necesidades específicas de cada alumno durante su primera clase.
Programa educativo de Iboux basado en competencias.
Asesor académico disponible para apoyar y ayudar a cada estudiante a alcanzar sus objetivos de aprendizaje y actuar como único punto de contacto ante cualquier inconveniente o asunto, ya sean pedagógicos, administrativos o técnicos.
Reporte de clases adquiridas, clases asignadas y clases tomadas.
Aula virtual de vanguardia que facilita y optimiza la experiencia de aprendizaje.
Iremos publicando diferentes ediciones del programa de formación en inglés para ir dando cobertura a todos los empleados interesados. La primera edición de este programa se lanzará el 1 de junio de 2022. Posteriormente iremos lanzando nuevas convocatorias.
A pesar del enfoque en la tecnología y la innovación, el factor humano es clave para aumentar la ciberseguridad de las organizaciones. Las herramientas son importantes, pero los atacantes son maestros en sortearlas.
Para ser eficaz, la ciberseguridad requiere de una combinación de personas, procesos y tecnología. En el apartado de personas, el empleado se ha convertido en un objetivo claro de los ciberdelincuentes, aprovechando sus vulnerabilidades. Actualmente el 90% de los incidentes de seguridad involucran al personal interno de la organización, siendo resultado directo de negligencias o fraudes de ingeniería social.
ITERIAM ha firmado un acuerdo de colaboración con Kymatio para aumentar nuestro porfolio de soluciones y servicios que prestamos en ciberseguridad en un ámbito que nos parece muy relevante en los tiempos actuales.
Kymatio es un SaaS de gestión integral de ciberriesgo de empleados que fomenta la formación continua en seguridad de la siguiente manera:
Mediante sesiones de chatbots evalúa periódicamente el estado de alerta y el nivel de concienciación de los empleados (quincenal, mensual o bimensual, a tu elección).
Con los resultados lanza un programa de concienciación en seguridad de la información automático (nano-micro learning) personalizado para cada empleado, poniendo foco en las temáticas que no dominan (desde puesto de trabajo hasta malware, pasando por ingeniería social).
Comprueba en la práctica cómo se desenvuelven con los ataques, lanzando simulaciones de phishing de nueva generación (NeuroPhishing).
Analiza periódicamente si las credenciales han sido expuestas (correo y contraseña) en alguna brecha de servicios de tercero y están disponibles online, y lo utiliza para mitigar el riesgo y concienciar al empleado.
También incorpora un potente dashboard que aporta métricas de todos estos aspectos para ver el estado actual de la compañía y su evolución a lo largo del tiempo.
Por último, comentar que todo lo que se hace es completamente automatizado de forma que no consuma más tiempo del necesario, ni al empleado ni a la persona que se encargue de gestionarlo y hacer seguimiento (Seguridad, RRHH etc).
Si quieres más información sobre esta solución, no dudes en escribirnos a info@iteriam.com.
Corría el año 1895 cuando unos hermanos apellidados Lumiere desataron un fenómeno mundial que revolucionó la forma de ver la vida y de llevar mensajes a cualquier parte. Cuando hablamos de “video” englobamos todas las artes en que se transforma (cine, televisión, series, etc.) y una enorme lista de recursos en las que por medio de imágenes a gran velocidad conseguimos transmitir un mensaje.
En los últimos años el video ha evolucionado de tal forma que actualmente. Según el CISCO el 80% del trafico de la red es video. Puede resultar un dato impresionante pero si te digo nombro a Netflix, Zoom, Youtube, Tiktok, Facebook, PrimeVideo… ya entiendes que el video es el recurso preferido para comunicarse en el medio preferido por los usuarios: internet.
En este artículo vamos a hablar del video y de la importancia de saber configurarlo correctamente en tu proyecto web. Verás que hay muchas cosas que no sabías y estabas pasándolas por alto. Conocer bien el producto te hará tratarlo con más confianza.
Primeros pasos, lo más importantes
Como no podía ser de otra manera el primer paso es que pienses detenidamente en el destino del video que vas a usar. Es evidente que cada video es un mundo y por tanto cada video, o listado de videos tienes que estudiarlos. El resultado es que en producción ver estos vídeos sea un paseo en barca donde disfrutas de su contenido. Pero sabemos que en ocasiones no es así y esta mala planificación provoca que el usuario no obtenga una buena experiencia en tu sitio web.
A continuación veremos los aspectos más importantes a tener en cuenta a la hora de planificar un proyecto web que incluya vídeos.
Poster
Cuando ponemos un vídeo en una web no siempre queremos que se reproduzca.
Hay videos cortos que se reproducen en bucle y asumen un papel de background, pero si se trata de un video que quieres que se vea porque su contenido es importante has de configurarle un poster . Se trata de esta etiqueta:
Obtenemos dos ventajas al establecerse como un poster:
La pantalla de portada será más atractiva. Probablemente tu video tenga el primer frame en negro, así que si no configuras un poster, tu cuadro de video será una pantalla negra vacía.
Este poster carga al instante y puede que el vídeo, si es muy pesado, tarde un poco en cargar. Conseguimos enmascarar esa carga en segundo plano. Si tienes muchos vídeos en una misma URL que cargan a la vez es un proceso lento así que puedes hacer que cargue al reproducirlo. Esto lo conseguimos con la etiqueta preload:
Está de más decir que el poster ha de tener las mismas dimensiones en px que el video y una resolución de 72ppx. Y por supuesto ha de ser atractivo si quieres que vean el video.
Resoluciones
La palabra resolución, cuando hablamos de video, sufre un mal uso constante. La resolución de un video no es mas que la cantidad de píxeles de alto por ancho. No podemos llamar resolución a .H264 o a 16:9. Por tanto, aclarado lo que es la resolución, veamos cuales son los estándares más usados:
FHD, 1920x1080px. La más usada, aunque el 4k empieza a comer terreno.
HD, 1280x720px. Era la más usada pero la desbancó en poco tiempo FHD.
4k, 3840 x 2160px. Aún en crecimiento porque precisa una gran tasa de datos y una pantalla con mucha densidad de pixeles.
La resolución es junto con el formato quien marcará el peso del vídeo por segundo.
Aquí es donde hemos de tener un gran tacto pues un video muy pesado puede afectar gravemente la usabilidad de la web. En este caso y al igual que pasará con la relación de aspecto, necesitamos una resolución diferente para cada dispositivo. Pero cuidado en este tema porque las pantallas están cambiando y cada vez tienen mayor densidad de píxeles. Por ejemplo, una pantalla de un desktop estándar podríamos decir que está en FHD. ¿Y una pantalla mobile? Pues aquí se ha desatado la locura y por ejemplo IPhone12 tiene 2340×1080 así que menos de FHD sería un error.
Lo aconsejable es hacer un desarrollo donde detectemos la resolución en ancho de la pantalla y en función de eso carguemos los vídeos con las resoluciones óptimas a ese dispositivo. Un código similar a este sería lo aconsejable:
Este código detecta el ancho de la pantalla del dispositivo, no la ventana del navegador. Para que funcione el código simplemente has de tener tu video en diferentes resoluciones y con un nombre igual para todos pero con la matiz de la resolución: _HD, _FHD o _4K.
Formatos
Este es uno de los temas más conflictivos a la hora de cargar un vídeo. Con el resto de ajustes el video se verá mejor o peor, tardará más en cargar o menos, pero por el formato del vídeo puede pasar que se vea o no el video dependiendo del dispositivo o navegador que uses. El formato hace referencia únicamente al tipo de archivo que exportamos.
Del formato podemos diferenciar la extensión y el códec. La extensión es el paquete que engloba ese formato (.mov, .mp4, .avi, etc.) y el códec es el leguaje de compresión que se usa para hacer que el video pese menos (MPEG2, H264, WebM, etc.).
En este caso la etiqueta video cuenta con una sub-etiqueta source y en su atributo src se puede colocar el formato de video. Así para una etiqueta de video, tenemos varios src y cada uno aporta el video en diferente formato.
<video>
<source src="movie.webm" type="video/webm;"/>
<source src="movie.mp4" type="video/mp4;" />
<source src="movie.ogv" type="video/ogg; " />
<video>
Relaciones de aspecto
La relación de aspecto es la relación proporcional entre el ancho y el alto del frame. En esencia, es la forma del video. Hay multitud de estándares para configurar esta relación de aspecto entre los que vamos a destacar los más usados:
16:9. Se trata del estándar más usado actualmente tanto en web como en dispositivos. Su resolución más usada sería FHD 1920x1080px.
4:3. Es una relación que está perdiendo popularidad pues nos ofrece un frame muy cuadrado y el vídeo se aprecia más atractivo en formatos panorámicos. Su resolución mas usada sería 1280x960px, aunque el origen de esta relación proviene del sistema PAL que todos hemos tenido en casa, 720x576px.
Aunque lo normal es usar un estándar hay ocasiones en que el proyecto precisa unas relaciones de aspecto diferentes en cada dispositivo. Por ejemplo un banner en desktop con un video de fondo puede tener una relación de aspecto muy panorámica. Sin embargo en mobile su relación de aspecto será cuadrada o vertical. Aquí es donde entra en juego CSS y sus ajustes para background.
Veamos el siguiente ejemplo:
En este caso el video de fondo lo hemos configurado con la posición absoluta y en cada dispositivo jugamos con top, bottom, right, left y márgenes automáticos. En ocasiones hay que tener videos demasiado versátiles para que la perdida de información que se da de un dispositivo a otro sea asumible.
Reproductor
Por último veamos el modo en que queremos que el usuario interactúe con el video que le presentamos. Como hemos hablado anteriormente, si el video es un background, no tiene sentido que tenga botones, y si no quieres que salgan corriendo de tu página, tampoco debería tener sonido. Por eso vamos a hablar de los vídeos con los que el usuario debe interactuar. La etiqueta video nos ofrece estos atributos:
Autoplay: Booleano para que el video se reproduzca automáticamente tras cargarse.
Controls: Booleano para mostrar o no el panel de control del video de tu explorador.
Muted: Booleano para iniciar el vídeo sin sonido.
Loop: Booleano para indicar la reproducción en bucle del vídeo.
Hay casos en los que hay que desarrollar un estilo personalizado de reproductor. Para ello basta con no poner el atributo controls y configurarlos tu mismo con js y css. Os muestro un pequeño ejemplo:
El vídeo es un elemento complejo al que prestar mucha atención porque configurarlo bien nos devolverá una experiencia positiva de nuestro desarrollo.
Por supuesto hay muchos temas que no hemos hablado en este video relativos al video como los fps (fotogramas por segundo), la tasa de bits de video o los campos (i o p), pero quizás esos temas sean parte del diseño del propio video y no de la implementación.
Para terminar me gustaría dejar ese fragmento del que empecé hablando porque como dicen es importante saber de dónde vienes para saber quién eres:
Svelte (o SvelteJS) es un framework para desarrollar aplicaciones JavaScript por Rich Harris y basado en componentes para crear aplicaciones reactivas.
A diferencia de otros frameworks como Angular, Vue o React, el código es compilado previamente para que el navegador pueda entenderlo.
Si visitamos la web principal de Svelte podemos desatacar sus tres características principales:
Write Less Code. Una de las principales características es que podemos crear componentes con menos líneas de código, que por ejemplo React, donde su creador asegura que si comparamos componentes iguales, estamos ahorrando hasta un 40% de código. Svelte utiliza el principio de Single File Component en el cual, en un mismo archivo tendremos el HTML, Javascript y Css. Esto te puede resultar familiar si has utilizado Vue.
No virtual DOM. Lo más interesante de Svelte es, que como hemos comentado, es precompilado. No hace uso del Virtual DOM para realizar cambios en nuestra aplicación, sino que se aprovecha de la previa compilación para realizar los cambios de estados y propiedades.
Truly reactive. La programación reactiva es la base de cualquier framework de javascript, donde simplemente es que la interfaz del usuario va cambiando según se vayan modificando los datos de éste.
Vamos a ver paso a paso cómo empezar con un proyecto utilizando Svelte 3.
Instalación
Vamos a ver como crear un proyecto sencillo en Svelte y para ello, seguiremos los pasos que nos indican en la web oficial.
Arrancamos una terminal y ejecutamos el siguiente comando:
npx degit sveltejs/template proyecto-svelte
Con este comando lo que estamos haciendo es hacer una copia del repositorio de Github de sveltejs, pero sin la carpeta .git.
El siguiente paso será situarnos dentro de nuestro proyecto: cd proyecto-svelte y hacer un: npm install para instalar las dependencias del proyecto.
Una vez instaladas todas las dependencias podemos ver los distintos ficheros que nos ha creado.
Estructura del proyecto
Si abrimos nuestro proyecto con un editor, nos encontraremos con la siguiente estructura:
Uno de los ficheros a destacar es rollup.config.js, el cual es una herramienta que lo que hace es compilar todo nuestro código en un solo fichero, más grande y complejo (lo que se llama Bundle) como puede ser Webpack o Parcel.
Seguimos analizando nuestro proyecto y vemos el fichero package.json. Como podemos ver, tiene una configuración bastante sencilla con pocas dependencias y los diferentes scripts que podemos ejecutar:
Creación de una sencilla aplicación:
Vamos a crear una pequeña aplicación para ver alguna de las características más importantes de este framework:
Empezamos analizando el fichero main.js, el cual es el fichero de entrada de nuestra aplicación. En él, estamos creado una prop que pasaremos a nuestro componente App.svelte.
En el siguiente ejemplo crearemos un pequeño componente donde habrá un contador y en el que veremos algunas de las características de este framework:
Lo primero que haremos es exportar la prop ‘name’, donde estamos indicando que es un parámetro del componente. Después crearemos una propiedad llamada contador, y un botón el cual llamará a una función para que cada vez que se haga click en él, el contador se incremente. En este botón hemos añadido la directiva on:click, que será el evento que se lance cada vez que pulsemos sobre él.
Aquí lo interesante que tiene Svelte, es que como tiene un paso previo de compilación, está deduciendo que la variable ‘contador’ es un estado, y cada vez que el valor cambie, vuelve a renderizar el componente.
En la siguiente imagen vemos como traduce Svelte nuestro código:
Arrancar el proyecto
Arrancaremos nuestro proyecto y lo ejecutaremos en modo ‘dev’. Para ello ejecutamos el comando: npm run dev y se nos indicará una dirección localhost con el puerto 5000, el cual no llevará a nuestro entorno de desarrollo.
Así se vería nuestro proyecto en el navegador:
Conclusión
Hasta aquí hemos podido ver como configurar nuestro entorno para trabajar con Svelte y algunas de las ventajas que tiene como son la simplicidad de su código, reactividad y que tiene una curva de aprendizaje muy baja.
Podemos ver ejemplos concretos en su misma página, analizarlos y comprobar la potencia que puede llegar a darnos este framework en el desarrollo de nuevas aplicaciones.
El pasado viernes 22 de octubre volvimos celebrar de nuevo un evento presencial con todos los empleados de ITERIAM.
Con cambio de fecha provocado por la pandemia, la Reunión General de Otoño junto a compañeros de diferentes localizaciones en el Club Las Encinas de Boadilla después de prácticamente 2 años de la última ocasión.
Un momento ideal para compartir de nuevo un rato juntos después de un tiempo complicado.
Actualmente todos los clientes valoran de forma muy positiva disponer de servicios sin necesidad de desplazarse a oficinas físicas.
Hace unos años esto era complicado, la legislación no lo permitía y la tecnología no estaba lo suficientemente madura, pero hoy en día procesos como el alta de clientes o la contratación de productos son servicios que se ofrecen de forma digital por algunas compañías.
ITERIAM plantea en muchos de los proyectos de transformación digital a nuestros clientes cambiar procesos de contratación tradicionales a lo que es un onboarding digital para lo que hemos desarrollado una plataforma base específica.
Como pieza fundamental de esa plataforma, firmamos un acuerdo de colaboración con Mobbeel para utilizar sus soluciones para ofrecer una experiencia 100% digital en todos los procesos antes mencionados:
MobbScan. Permite la verificación de identidad a través del escaneo de documentos de identidad, tanto desde dispositivos móviles como en un entorno web, extraer información de ellos así como validar su autenticidad e incluso la identidad de la persona que lo presenta si fuese necesario.
MobbSign. Permite a los usuarios firmar legalmente y con sencillez cualquier documento y en cualquier dispositivo digital con su firma manuscrita y sin necesidad de ningún tipo de certificado.
MobbID. Permite la autenticación multibiométrica en entornos digitales, que de forma cómoda y segura verifica la identidad de los usuarios de smartphones usando una o varias de sus sus características únicas combinadas sin necesidad de sensores externos. MobbID tiene la flexibilidad de utilizar todos los métodos de reconocimiento biométrico: reconocimiento de cara, voz, firma y huella.
Con estas soluciones de Mobbeel que se suman a otros acuerdos firmados anteriormente, ponemos a disposición de nuestros clientes una solución de onboarding con unos tiempos de lanzamiento muy rápidos, posibilidades de integración ilimitadas, una experiencia de usuario óptima y adaptable en cuanto a legalidad y confirmación de la identidad digital en cada caso práctico.
Si quieres más información sobre esta solución, no dudes en escribirnos a info@iteriam.com.
Me encanta que los planes (de usabilidad) salgan bien
Cuando nos enfrentamos a cualquier proyecto podemos hacerlo de muchas formas, pero el resultado siempre queremos que sea satisfactorio.
Muchas generaciones recordamos la famosa frase de John Hannibal Smith de la serie “El equipo A” que titula este artículo. Podría haber usado otras series míticas como MacGyver como hilo conductor, pero necesitaba algo más potente. Me tentó también Michael Knight que encajaba bien como ejemplo de tecnología, pero improvisaba mucho.
Por eso el equipo A para lo que os quiero contar me pareció perfecto. ¿Os imagináis a Hannibal sin pensar una forma imaginativa para resolver las aventuras de cada episodio? ¿Sin definir un plan con sus compañeros de equipo? ¿Sin apoyarse en su experiencia previa como miembro de los cuerpos de élite del ejército?
Cuando abordamos un proyecto de usabilidad y experiencia de usuario cometemos errores básicos y simples, producto casi siempre de una insuficiente planificación y de repetir lo que vemos en otros proyectos. Planear bien las cosas tiene un montón de ventajas como evitar el retrabajo, acortar los tiempos de ejecución, asegurar la calidad del resultado, etc.
Os facilito en este artículo algunos ejemplos de buenas prácticas y recomendaciones, para que veáis que con poco que le deis al coco… ¡los planes siempre salen bien!
Mobile First, tatúatelo
Mobile First ha dejado de ser una tendencia y actualmente es un patrón obligatorio para diseñar un proyecto web.
Haz como MA Barracus y tatúatelo. El modo en que los usuarios actuales asumen ver los contenidos está basado en experiencias móviles. Estas experiencias se basan en pantallas sencillas con scroll vertical.
La mayoría de los proyectos ya son responsive, pero no podemos confundir ese término con Mobile First.
Hay un gran error de usabilidad que se sigue cometiendo y es el contenido en las pantallas. Se sigue haciendo contenido para pantalla de escritorio y se desarrollan responsive. El resultado será un sitio web que se verá bien en otros dispositivos, pero tendrá un exceso de contenido en una única pantalla y elementos poco accesibles para operar con una mano.
Por ello hay que recalcar que Mobile First denota también que las pantallas han de ser sencillas, concisas y fáciles de usar desde cualquier dispositivo.
El Header, nuestro vehículo en una web
¿Qué pensaríais si la furgoneta del equipo A se pareciese a ésta?
Es importante hacer un buen estudio del Header ya que es el primer elemento que tocar y se repite en todo el sitio web que estéis diseñando.
Hay varios errores que se repiten y son tan fáciles de corregir con el objetivo de simplificar tus propuestas y centrarte en lo esencial. Estos son algunos de los consejos para crear un Header que funcione:
Entre 5 y 10 items en el header. Muchos botones restan.
Que su altura no sea mayor de 150px. El header es importante, pero se va a repetir en toda la website y por lo tanto ha de ser ligero.
Que contrasten el fondo con las letras y si tu menú permanecerá fijado en la parte superior de la ventana, que contraste muy bien en todo el scroll vertical.
Ordenar por importancia los ítems en el header. No sigas tendencias, si lo importante son tus productos, no pongas en primer lugar “Mi compañía”. O si prevés que la búsqueda será el fuerte del sitio, no la dejes escondida al final con un icono de lupa.
El uso excesivo de iconos en el Nav resta. Más de 4 items con iconos es uso excesivo que despista al usuario.
La distribución más usada y que me mejor funciona es logo izquierda y Nav derecha. Centrar el logo y poner el nav partido o en una segunda fila hace que el header sea excesivamente alto.
Cuidado con los navs desplegables que no dejan de desplegar. Trabaja mucho las categorías que mostrar ya que en mobile es incómodo un Nav que sobrepasa en largo la pantalla.
Espacio libre, ¿un lujo?
Sigo utilizando ejemplos gráficos para avanzar en mis recomendaciones. ¿Te imaginas al Equipo A con un R5 en vez de la furgoneta molona que usaban?
¿Como viajar con todo el equipo a las diferentes misiones? ¿Como disparar esas metralletas?
El espacio, ya sea en un sitio web, en una misión del equipo A o en tu vida, es muy importante. El espacio libre es eso que una persona usa, sin ser consciente, para sentirse a gusto en dicho espacio.
Para que una web sea cómoda y se use a gusto ha de tener mucho espacio libre y estas son algunas de las pautas a seguir:
Planifica muy muy, pero que muy bien tus secciones y el contenido de cada una. Lo adecuado es que una sección no supere el tamaño de una pantalla (excluimos los listados de este consejo).
Si usas fondos o imágenes a sangre, es decir, full-width, no uses el texto en esa configuración.
Deja márgenes amplios entre secciones o contenido. Si lo empastas todo te pasa como con la plastilina, el resultado es una masa marrón.
No abuses del color, el video o la imagen. El blanco da paz y nunca falla.
Anuncios, banners, ventanas modales, políticas de cookies… ¡Que locuraaaa!
Se ha podido demostrar que el “Loco Murdock” no era un personaje ficticio si no que sus trastornos estaban causados por consumir sitios web como el que veis en la siguiente imagen:
Cuando hablamos de obtener una buena experiencia en el uso de una plataforma el tema de las promociones y publicidad pueden tirar por tierra todo lo que hayas trabajado en el Header, en el contenido o en la navegación.
El uso muy moderado de estos recursos de publicidad – bien propia o ajena – resta a tu diseño, pero si te dejan llegar a tu destino debes pensar en si te interesa el impacto que provocan. El uso desmesurado de dichos recursos no es que resten, te anulan. Hacen inservible tu sitio web.
Otros dos factores para destacar que salen de esa publicidad son los logins o suscripciones y las políticas de cookies. El login siempre ha de estar accesible pero no debes atosigar al usuario para que se registre: deja que te conozca y sugiérelo sutilmente. Haz lo mismo con la newsletter.
En cuanto a las políticas de cookies, todos nos hemos subido a ese tren, pero que esa legislación no nos impida ver tu página. No llenes toda la página con ese mensaje porque puedes conseguir que ya no la quieran ver. Un mensaje discreto es lo que mejor funciona.
Botones de redes sociales
Un error muy simple se da cuando alguien decide presumir de sus redes en su página web. Los hay que te las ponen en el Nav y que merecen ser castigados. Otros en el Footer, tienen mi clemencia. Y otros, almas cándidas, por todas partes. Pues compañeros, mal plan.
El sentido de esos botones es que conozcas esas redes, pero vamos a poner a funcionar nuestra materia gris: ¿dónde está expuesto el grueso de nuestro negocio? ¿en las redes sociales? ¿en el sitio web? Debería estar en el sitio web mientras que las redes sociales son canales que usas para que la gente llegue a dicho sitio web.
Os voy a poner un ejemplo. Entráis a una tienda a comprar y delante de cada producto hay otras tres puertas: una puerta que te lleva a la empresa que hace la publicidad de la tienda, otra que te remite a un cartel de la carretera y la otra de nuevo te lleva al escaparate. ¿No tiene sentido verdad? Lo suyo es que ese escaparate, esa publicidad y ese cartel sean los que te llevan a la tienda a consumir tus productos.
Pues en muchos sitios web se ha instaurado esa tendencia y es un gran error. Si al entrar lo primero que ves son las redes sociales estás invitando al usuario a que lo primero que haga es salir de tu página e irse a una red social, donde sí, estás tú, pero también otros cuantos millones de empresas como tú.
Cabe destacar que no podemos confundir el botón de redes sociales del Nav o Footer con los botones en blogs que sirven para compartir dicho post dentro de una red social. Estos si tienen un gran sentido ayudando al SEO de dicha empresa.
El mal uso de los botones que te llevan a redes sociales es algo muy instaurado y es un mal hábito para la usabilidad de cualquier proyecto. Si te hago salir justo cuando entras… ¡no creo que los planes salgan bien!
Hoy en día todo es digital y los dispositivos móviles son una herramienta siempre presente.
Por eso, ¿por qué no utilizar la tecnología en nuestro beneficio y comenzar a digitalizar un proceso tan simple y rutinario como firmar un documento?
Esta necesidad se planteaba en muchos de los proyectos de transformación digital que planteamos a nuestros clientes y por ello hemos firmado un acuerdo de colaboración con Signaturit, empresa líder dedicada a las soluciones de firma digital.
Con esta alianza queremos complementar los servicios que damos a nuestros clientes ofreciendo la mejor solución en el ámbito de la firma electrónica. Además de la digitalización de la firma, también resultan otras soluciones como el email certificado.
Gracias a esta colaboración estratégica podemos seguir personalizando nuestros servicios y creando desarrollos a medida que impulsen la digitalización de los procesos y la transformación de las empresas.
Estas soluciones relacionadas con la digitalización de firmas, al igual que nuestras aplicaciones móviles, se adaptan a cada cliente y sus necesidades.
Partimos de un problema real al que trataremos de dar solución con nuestra Skill:
«Carmen es una joven emprendedora que dirige una pequeña tienda de decoración y coleccionismo en Toledo (España). El Baúl del Abuelo vende desde artículos originales para dotar a tu casa de una personalidad única a artículos para coleccionistas tales como vajillas o documentos antiguos. En un afán por ofrecer un mejor servicio a sus clientes, Carmen ha pensado en desarrollar una Skill de Alexa con la que sus clientes puedan comprobar el horario de apertura de su establecimiento”.
Una vez planteado el problema, explicaremos detenidamente los pasos que Carmen tendría que llevar a cabo para desarrollar su propia Skill con esta funcionalidad.
Paso 1. Creación de la Skill de Alexa en la consola de desarrollo de Amazon
En este primer paso deberemos crear nuestra nueva Skill en la consola de desarrollo de Amazon y configurar el modelo de interacción para la interfaz de voz.
Para esto en primer lugar lo que tenemos que hacer es iniciar sesión en Amazon Developer (si aún no tienes cuenta puedes crearte una gratuita que te dará acceso a multitud de herramientas para desarrollar tus propias aplicaciones) y hacer uso de Alexa Developer Console, una interfaz gráfica de desarrollo que forma parte de la consola de desarrollo de Amazon.
Imagen 1: Dashboard general de Amazon Developer Console
Una vez dentro de la Alexa Developer Console, podemos ver la lista de Skills desarrolladas (en caso de no haber desarrollado ninguna la lista estará vacía). Para crear una nueva Skill hacemos clic en “Create Skill”:
Imagen 2: Con la consola de desarrollo de Alexa puedes controlar tus Skills y su estado
Pon nombre a tu Skill, selecciona el idioma deseado y elige uno de los cuatro tipos de modelo interacción disponibles:
Custom (modelo de interacción definido por el usuario)
Flash Briefing (modelo de interacción predefinido para feeds de noticias)
Smart Home (modelo de interacción predefinido para aplicaciones Smart Home)
Vídeo (modelo de interacción predefinido para aplicaciones de vídeo)
En este caso usaremos el de modelo de interacción personalizado (Custom Skill Model).
Imagen 3: Seleccionamos los parámetros que deseamos y hacemos click en “Create skill”
Paso 2. Definiendo el modelo de interacción de la Skill
El siguiente paso es configurar el modelo de interacción de nuestra Skill. Para ello, la Alexa Developer Console nos muestra cinco secciones:
Test
Distribution (Publicación)
Certification (Certificación)
Analytics (Análisis)
Utilizaremos cada una de estas pestañas de la barra de navegación para desplazarnos de un área a otra.
Imagen 4: El menú de navegación de la consola de desarrollo de Alexa
Empezaremos en la sección “Build” para diseñar un custom skill model para la Skill. La página de resumen del área de desarrollo se divide en tres secciones o columnas claramente diferenciadas. La Skill se crea utilizando la lista de comprobación del skill builder en la columna de la derecha y consta de cuatro pasos de configuración:
Seleccionar el nombre de la Invocación
Definir intenciones y ejemplos de sentencias
Crear un modelo
Seleccionar el endpoint del servicio web
Inicia uno de los pasos de la configuración haciendo clic en el botón correspondiente de la lista de comprobación de Skill Builder. De manera alternativa, puedes seleccionar áreas de configuración determinadas mediante la barra del menú situada en la columna de la izquierda.
En la columna central de la página encontrarás material informativo sobre Alexa Skill Development, así como un vídeo sobre el área seleccionada de la consola de Alexa Developer.
Imagen 5: La creación de Skills se lleva a cabo en el área “Build” utilizando la lista de verificación de Skill Builder
1. Seleccionamos el Invocation Name
Primero definiremos el nombre de invocación de la Skill de Alexa. El nombre de invocación es la expresión que utilizarán los usuarios para activar/comunicarse con tu Skill. El nombre de invocación puede ser el mismo que el nombre de la Skill, pero puede diferir si es necesario.
A la hora de definir el nombre de invocación debemos tener en cuenta los siguientes aspectos:
Utiliza un nombre de invocación con dos o más palabras.
Separa las palabras con espacios.
Utiliza sólo letras minúsculas.
Pon el nombre de invocación entre comillas si estás usando un apóstrofe o una abreviatura con un punto.
El nombre de invocación de la Skill no debe contener ninguna de las frases de inicio o palabras reservadas de Alexa, tales como launch(empezar), ask (preguntar), open(abrir), etc.
Para la Skill que estamos desarrollando, usaremos el siguiente Invocation Name: el Baul del Abuelo. Guardamos el nombre de la invocación haciendo clic en “Save Model” y hacemos click en “Customs” para volver a la vista general.
2. Definición de propósitos o intents
Con los intents definimos lo que un usuario de tu Skill puede decir, cuál es el propósito de su manifestación y cómo reacciona tu Skill ante ella. Cada Skill personalizada contiene cinco propósitos (intents) preestablecidos que deben implementarse más tarde, a los que, además, podemos añadir más según sea necesario. A continuación, explicamos cómo crear un custom intent:
● Pon un nombre a la nueva acción y haz clic en “Create custom intent”:
Imagen 6: En el caso de ejemplo que estamos siguiendo, definimos el nuevo intent GetOpeningTimetable
Seguidamente debemos definir las posibles formas con las que los usuarios pueden pedirle a la Skill que ejecute la acción vinculada a la intent. Introduce la frase en el campo de texto y haz clic en el signo más (+).
Imagen 7: En el ejemplo que estamos desarrollando, definimos las expresiones que los usuarios pueden decirle a la Skill para pedir la información sobre el horario de apertura y cierre de la tienda
De esta manera, la Amazon Developer Console aumentará a través de su IA los patrones de reconocimiento de habla que has definido. Sin embargo, esto solo es así si el sistema dispone de una base de datos suficientemente amplia, por lo que debes introducir al menos 8 ejemplos de expresiones con cada intent que elijas.
A continuación, pulsamos “Save Model” para crear el modelo y entrenarlo por aprendizaje automático.
3. Creación del modelo
Para crear el modelo debemos hacer click en “Build Model” y esperar a que la consola de desarrollo nos notifique que el modelo de interacción se ha creado con éxito.
Si después de crear el modelo queremos volver a hacer cambios en el nombre de invocación o los intents, solo tendríamos que reiniciar el proceso de compilación pulsando de nuevo “Build Model”.
4. Seleccionando el endpoint del servicio web
El paso 4 de la lista de comprobación de Skill Builder incluye la selección del endpoint del servicio web. Aquí hay dos opciones:
La lógica del programa de tu Skill de Alexa puede ser ejecutada como una función Lambda en la plataforma de computación en la nube de AWS
A través de tu propio servidor web.
Para simplificar el tutorial, dejaremos de lado la opción de alojar la lógica en nuestro propio servidor web, y explicaremos cómo hacerlo haciendo uso de las funciones Lambda de AWS.
Para ello activaremos la casilla de verificación de AWS Lambda ARN. ARN significa “Amazon Resource Name” (nombre del recurso de Amazon). Es un nombre único para un recurso AWS, como una función Lambda, por ejemplo.
Antes de poder enlazar con ARN a una función Lambda que contiene la lógica del programa de tu Skill, primero debes crearla en la consola AWS. En el siguiente punto del tutorial veremos cómo hacerlo.
Paso 3. Creación de la función Lambda de AWS
Basándonos en el modelo de interacción definido en el paso anterior, procedemos a crear una función Lambda AWS, que se ejecuta en la plataforma de Cloud Computing de Amazon y la cual incluirá la lógica de negocio de tu Skill.
Accede a tu cuenta AWS (Si no estás registrado, regístrate primero para obtener una cuenta de AWS gratuita) y selecciona “AWS Management Console” en “Mi cuenta”.
La consola de administración de AWS permite acceder y administrar los servicios web y recursos de computación de Amazon. Primero, asegúrate de que tu consola está configurada en la región donde quieres ofrecer tu Skill. (“EU (Ireland)” si deseas que tu funcionalidad esté disponible para los usuarios europeos). Para encontrar el producto AWS deseado, utiliza la función de búsqueda “Find services” y busca y selecciona el servicio lambda.
Una vez en la página principal del servicio, podemos ver un resumen de todas las funciones Lambda creadas. (Si todavía no has creado ninguna la lista estará vacía). Hacemos click en “Create function” para iniciar el proceso de configuración de una nueva función Lambda.
Las funciones AWS Lambda pueden crearse desde cero, utilizando un proyecto o partiendo de una aplicación proporcionada por AWS o por socios colaboradores en el repositorio AWS de aplicaciones serverless. Puesto que tenemos que recurrir a varias librerías de Alexa para la lógica del programa de nuestra Skill, es mejor partir de una plantilla que obtenemos de al seleccionar la opción “Examinar el repositorio de aplicaciones sin servidor”. Para el tutorial elegimos la plantilla “alexa-skill-kit-nodejs-factskill”.
Imagen 8: Seleccionamos la opción correspondiente para generar una función lambda usando la plantilla indicada.
Indicamos el nombre para nuestra aplicación y hacemos clic en “Deploy” para desplegar la aplicación serverless generada automáticamente en Cloud Formation.
En la nueva página a la que nos redirige, debajo de la sección de recursos, hacemos click al enlace para acceder a la función lambda vinculada a la aplicación automáticamente generada:
Imagen 9: En recursos de la aplicación se nos muestra la función automáticamente generada, al que podemos acceder haciendo click para amoldar el código a las necesidades de nuestra aplicación.
La máscara de configuración para la función se abre en una nueva pestaña, ya con valores establecidos por defecto (Permisos, roles, recursos, etc.)
Importante: En la ventana del código de la función lambda (que nos viene desarrollada por defecto al haber utilizado la plantilla), contiene la lógica de negocio específica para la acción que estamos desarrollando. Para personalizarla con el ejemplo que estamos siguiendo, eliminamos el código presente y lo sustituimos por el de nuestra aplicación pegando en su lugar el siguiente fragmento de código: https://jsfiddle.net/8tkz6dc5/
Conocer en detalle los conceptos de programación de Skills y el porqué de cada línea de código requeriría de un tutorial mucho más tiempo y lo dejamos para en otro tutorial, ya que no es el objetivo de este que estamos abordando. En caso de que queráis generar el código scaffolding para alguna Skill de Alexa de vuestro interés podéis hacer uso del Alexa Skills Code Generator para generar el nuevo código de nuestra Skill
Imagen 10: El Alexa Skill Code Generator es una herramienta que nos genera un código básico para nuestra Skill partiendo del Language Model JSON de nuestra Skill que podemos copiar/obtener en la Alexa Developer Console.
Paso 4. Conectar la función Lambda de AWS a la Skill
Para que los usuarios puedan dirigirse a nuestra Skill utilizando un altavoz inteligente, se requiere un enlace en los dos sentidos:
1. Definir el modelo de interacción de la Skill como disparador de la función Lambda
Para ello accedemos a la configuración de nuestra función Lambda en la consola de gestión AWS y selecciona la opción “Alexa Skills Kit” como desencadenador (Es probable que aparezca seleccionada si has seguido las indicaciones del tutorial y has utilizado la plantilla alexa-skill-kit-nodejs-factskill para el desarrollo de la función). Una vez seleccionado, el kit de funcionalidades de Alexa aparece ahora como un disparador en la representación gráfica de la función Lambda, pero requiere una configuración adicional.
Para ello necesitamos el ID de la Skill del modelo de interacción disponible en la sección de Endpoints de la Alexa Developer Console:
Copia la cadena de caracteres que aparece en “Your Skill ID” en el portapapeles y, a continuación, introdúcelo como el ID de cualificación de tu función Lambda:
Confirma la configuración haciendo clic en “Add” (Agregar) y guarda los cambios (“Save”).
2. Registrar la función Lambda como endpoint de la Skill
Para enlazar la función Lambda creada y desplegada, copiamos el ARN de la función (en la parte superior del panel de administración de nuestra función lambda):
Imagen 11: Seleccionamos y copiamos el ARN de la función Lambda
y lo pegamos en la configuración de endpoints de nuestra Skill Alexa, concretamente en el campo “Default Region”. Debes definir, al menos, un endpoint predeterminado para tu Skill. También puedes especificar endpoints alternativos para Norteamérica, Europa e India, así como para Oriente Próximo y Lejano. Guarda los ajustes con un clic en “Save Endpoints”
De esta manera, si un usuario interactúa con la Skill de Alexa que hemos desarrollado, se envía una petición POST al endpoint del servicio web predeterminado, en este caso, a la función Lambda vía ARN.
Paso 5. Probar la Skill
Dentro de la Alexa Developer Console tenemos la sección “Test”, que ofrece un entorno de pruebas completo para Skills, incluyendo un simulador de Alexa con salida de voz. De forma predeterminada, el entorno de pruebas está desactivado para las Skills de Alexa recién creadas. Actívalo cambiando el menú desplegable de “Off” (desactivado) a “Development” (desarrollo).
Para probar la Skill, llama a tu nueva Skill Alexa usando la invocación y prueba un comando de voz/texto que corresponda un intent contemplado previamente.
La Skill que estamos desarrollando como ejemplo puede iniciarse con la invocación “Alexa, abre el Baúl del Abuelo”. Alexa responde con el welcomeOutput definido en la lógica del programa:
“Bienvenido a el Baul del Abuelo, ¿en qué le puedo ayudar?”
Si hacemos una pregunta que corresponda a la intención definida en el modelo de interacción, siguiendo nuestro ejemplo, obtendremos la siguiente respuesta:
"¿A qué hora abre la tienda? -> El horario de apertura de la tienda es de 10 de la mañana a 8 de la tarde”
Como puede observarse, el acceso a la lógica del programa ha funcionado y Alexa entiende nuestra pregunta y nos da la información que necesitamos. La entrada y salida que ha procesado el servicio de habla de Amazon en la consulta se muestra en la ventana Skill I/O en formato JSON:
Alternativamente, es recomendable probar la Skills en los dispositivos conectados a tu cuenta antes de publicarlas y lanzarlas al market.
Paso 6. Validación y publicación de la Skill
Una vez probada la Skill, puedes ponerla a disposición de otros usuarios si la encuentras satisfactoria y útil. Para ello debes ir a la sección “Distribution” y proporcionar toda la información necesaria para su publicación. Rellena todos los campos obligatorios bajo “Skill Preview” (vista previa de habilidades), “Privacy & Compliance” (Privacidad y cumplimiento) y “Availability” (disponibilidad).
En “Privacidad y cumplimiento”, especificaremos si los usuarios pueden utilizar funciones de pago dentro de tu Skill, si recopilas datos personales de los usuarios, si tu Skill está dirigida a usuarios menores de 13 años o si incluye publicidad.
En “Disponibilidad”, define las restricciones para la disponibilidad de tu Skill. ¿Debería estar disponible para todos los usuarios o solo para determinadas organizaciones? ¿Deben realizar las pruebas beta determinadas personas?, y ¿En qué países y regiones te gustaría publicarla?
En último lugar, guarda tus datos haciendo clic en “Save and continue” (guardar y continuar).
Después de haber guardado tus datos de publicación”, serás redirigido automáticamente al área “Certification” (certificación). La consola Alexa Developer comprueba tus datos y te pide, si es necesario, que revises la información incorrecta o que proporciones los datos que faltan.
Si la información introducida es correcta, puedes continuar con una prueba de funcionamiento haciendo clic en “Run” (ejecutar). Dependiendo del alcance de tu proyecto, el texto de la función puede tardar unos minutos en completarse. Si el informe de prueba muestra errores, tienes la opción de volver al área determinada, corregir el error y realizar una nueva prueba de funcionamiento.
Una vez completado con éxito la prueba funcional, estará lista para que Amazon valide y revise la Skill. Haz clic en “Submit for Review” (enviar para revisión) para certificar tu Skill. Una vez completada la revisión, recibirás un correo electrónico en la cuenta asociada a tu cuenta de desarrollador de Amazon. Existen básicamente dos escenarios posibles:
Tu Skill se ha certificado con éxito: En este caso, se te comunicará por correo electrónico cuándo se espera que tu Skill se publique en la Alexa Skills Store.
Tu Skill no ha sido certificada: En este caso, tu Skill no ha sido certificada: en este caso, Amazon ha identificado problemas durante el proceso de certificación, adjuntando un informe detallado de los cambios que se requieren. Una vez hechos los ajustes, puedes volver a presentar tu Skill.
En la vista general de Skills de la Alexa Developer Console puedes ver el estado de todas tus Skills:
In development (Skill en desarrollo)
Certification (Skill en proceso de certificación)
Live (Skill disponible para los usuarios a través de la Alexa Skills Store). Cuando tu Skill está en el estado “Live”, no podrás ajustar su configuración posteriormente. Además de la versión en producción, en la consola de desarrolladores está disponible una versión para desarrolladores de la Skill publicada, que puede ser revisada, actualizada y mejorada independientemente de la original. Una vez que Amazon valide y certifique la nueva versión de tu Skill, esta reemplazará a la versión anterior en producción y creará automáticamente una nueva versión de desarrollo
