El mundo de los ecommerce ha evolucionado mucho en la última década junto con el crecimiento del mundo tecnológico. Por ello, se ha de estar en continua evolución en todos los ámbitos y es de vital importancia escoger correctamente un producto que nos permita extender las funcionalidades de nuestra tienda mucho mas allá de cualquier caso estándar que se pueda presentar.
En esta ocasión vamos a crear un sencillo módulo el cual eliminará del dashboard del backoffice el botón tan molesto de «demo», que siempre vamos a querer quitar cuando se trata de una tienda que se encuentra en funcionamiento. Esto nos permitirá explorar el mundo de los módulos en PrestaShop, para aumentar las funcionalidades que nos brinda, así como resolver problemas no existentes hasta la fecha. A través de este sencillo caso, vamos a exponer como se crea un módulo y como podemos hacer un override de un controlador del backoffice. Del mismo modo, podremos hacer un override de un controlador del frontoffice o de cualquier clase de PrestaShop.
El correcto desarrollo de módulos en prestashop nos puede ayudar a paliar o desarrollar módulos completamente personalizados bien para nuestra tienda o bien para clientes que necesitan una solución concreta a un problema o que necesitan una funcionalidad específica. Esto nos permite personalizar de mejor medida la solución de Prestashop a las diferentes necesidades de los clientes.
¿Cuál es el primer paso para crear un módulo?
En primer lugar lo que haremos será crear una carpeta con el nombre del módulo, en este caso «disabledemo». Lo siguiente que vamos a hacer es añadir un logo como indican en esta página de configuración de PrestaShop:
El siguiente paso será añadir este archivo index.php a todos y cada uno de los directorios de nuestro módulo. PrestaShop lo tiene en todos los subdirectorios, para evitar que queden al descubierto y que puedan ser listados. El archivo quedaría tal que así:
Lo siguiente que vamos a hacer es crear el archivo propio del módulo que será el encargado de manejar la lógica, instalar y desinstalar entre otros. Para ello haremos una sobreescritura del método __construct del padre, así como el método install. En este primero, como se aprecia en el código, solo le hemos añadido las propiedades de name, version y author (posteriormente aparecerá toda esta información en el listado de módulos), pero PrestaShop nos brinda una gran cantidad de opciones de configuración para modificar el comportamiento del módulo. Invocamos al constructor del padre, y acto seguido, modificaremos las propiedades de displayName, description y ps_versions_compliancy. Sin entrar en mucho detalle, para las dos primeras (nombre y descripción), estamos usando el traductor, para que las muestre traducidas en función del idioma del backoffice, y para la tercera (versión), le estamos indicando que versión de PrestaShop se requiere para poder instalar nuestro módulo. Por último, usaremos la función install para actualizar el valor de la configuración de PrestaShop PS_DASHBOARD_SIMULATION, que se encarga de decidir si debe mostrar o no datos de una simulación en las gráficas y bloques del dashboard.
Ahora, vamos a hacer un override del controlador que muestra el botón de demo, para evitar que el administrador pueda activar la funcionalidad. Para hacer un override en PrestaShop, todo debe residir en la carpeta override dentro del módulo que queramos crear. Hay limitaciones con esta versión 1.7, puesto que todas las clases que posean namespace no son objeto de override a través del mecanismo común propio de PrestaShop. Esto es porque están cargadas a través del autoloading de composer. Hay que tener en cuenta, que este mecanismo no permite hacer dos o mas overrides del mismo método de un objeto, desde PrestaShop nos instan a realizarlo de forma manual. En este caso, vamos a hacer un override del controlador AdminDashboardController, que podrás encontrar en al ruta /controllers/admin. Esto es así también para las clases. Un aspecto importante a tener en cuenta es que la clase se ha de llamar como se llama el archivo de PrestaShop, pero tiene que heredar de la clase con terminación «Core». Si abres el controlador de PrestaShop, verás que el nombre del archivo no coincide con el nombre de la clase. A continuación mostramos como queda el override:
A continuación se muestra, como quedaría la estructura de ficheros tras haber creado el fichero del módulo(disabledemo.php), el override del controlador del backoffice(AdminDashboardController.php) y el logo junto con los archivos index.php en cada uno de los directorios.
Ahora solo nos queda ir a módulos > catálogo de módulos > buscar nuestro módulo e instalarlo.
Si todo ha ido bien, verás un aviso en la parte superior derecha en color verde, confirmando que el módulo está activo y funcionando. Para comprobarlo iremos al dashboard del backoffice para asegurarnos que ha desaparecido el botón y la tienda no tiene activado el modo demo.
Conclusión
Con este artículo hemos comentado muy brevemente de que forma podemos crear un módulo. Aunque breve se han dado algunas pinceladas del flujo de PrestaShop en algunos temas muy importantes relacionados con el override, así como, su estructura de archivos por lo que a clases y controladores respecta. A partir de aquí se puede seguir investigando para desarrollar módulos que sean capaces de suplir carencias por lo que a requisitos de negocio se refiere. Quedan otros tantos temas como, override de plantillas, o la forma de crear un child theme.
Ahora queda en el campo de desarrollador, seguir investigando. Pero, sobretodo, lo mas importante, sin dejar atrás la documentación, es muy aconsejable, siempre que usamos un framework, leer su código y también sus test. Esto último nos ayudará a comprender en profundidad los casos de uso de cada una de las partes de la aplicación.
En los últimos años estamos observando un gran auge en la inteligencia artificial. Debido al boom del deep learning disponemos hoy en día de modelos predictivos más robustos y más generalistas pudiendo afrontar a día de hoy problemas que antes eran impensables. Los coches autónomos, los asistentes virtuales o los nuevos traductores de texto son sólo algunos de los ejemplos de las aplicaciones que tiene la inteligencia artificial hoy en día. No obstante, la inteligencia artificial puede ser aplicada para resolver prácticamente cualquier problema que se nos plantee. De esta manera, podemos aprovechar algunas de las ventajas que nos pueda aportar aplicándolas a nuestra web para potenciarla de alguna manera. Aquí os dejamos algunos ejemplos de todo lo que se puede hacer mediante la inteligencia artificial y aplicarlo en el diseño web.
Chatbots
Ya hace unos años que los chatbots están presentes en muchas webs. No obstante, la mayoría de estos chatbots solo son capaces de entender cosas muy concretas como podrían ser preguntas preestablecidas o respuestas de “sí” o “no”. Hoy en día, con el desarrollo del procesamiento del lenguaje natural en el campo de la inteligencia artificial esto cambia por completo.
Con el paso del tiempo se pueden desarrollar sistemas más capaces de entender una conversación con lenguaje natural. Gracias a ello, tenemos a día de hoy asistentes virtuales como Google Home o Amazon Alexa a los que podemos hacer preguntas sin tener que cuidar la forma de formularlas para que nos puedan entender. Mediante estas técnicas de inteligencia artificial se pueden implementar bots para nuestras webs que puedan realizar tareas bastante diversas aportando valor a la organización. Por ejemplo, se podrían realizar gran parte de las tareas del servicio de atención al cliente ofreciendo soluciones al cliente mediante el bot de manera totalmente automatizada y cómoda para el cliente.
Búsquedas inteligentes
También podemos observar de manera clara cómo la manera en que se realizan las búsquedas en internet está cambiando poco a poco. Ya no es necesario hacer búsquedas en google mediante palabras clave ya que, a día de hoy, su sistema de búsqueda es capaz de entender lo que le decimos de manera que podemos incluso directamente preguntar con lenguaje natural aquello que queremos saber o describir lo que queremos buscar. Esto ha sido posible gracias al desarrollo del procesamiento del lenguaje natural que proveen al software de búsqueda la capacidad de entendernos.
Estos sistemas de búsqueda pueden ser aplicados a nuestras webs para dotar a los usuarios de una mejor experiencia a la hora de encontrar lo que deseen. Además, de esta manera se podrían integrar los sistemas de búsqueda en chatbots basados en la inteligencia artificial para conseguir una interactuación con el usuario más personalizada o incluso realizar búsqueda por imágenes dónde los usuarios podrían buscar en una tienda online objetos que aparezcan en fotografías.
Análisis más completos
A menudo es difícil obtener datos de los usuarios acerca de la satisfacción sobre algunos productos o servicios. Por otra parte, se pueden desarrollar sistemas de inteligencia artificial que a partir de los comportamientos los usuarios en las webs sea capaz de determinar el grado de satisfacción de estos con la web o con sus contenidos. Se pueden recopilar multitud de datos como las páginas visitadas, el tiempo que le dedica el usuario a cada una, los comentarios que realiza… que analizándolos de manera convencional puede llevar mucho tiempo o incluso que no podamos obtener nada en claro. Mediante estos sistemas de inteligencia artificial podemos obtener análisis más completos de forma automática y ver los resultados de manera muy sencilla.
Accesibilidad
A día de hoy es también posible el desarrollo de páginas web más accesibles mediante la inteligencia artificial. Mediante técnicas como el reconocimiento del habla o el procesamiento del lenguaje natural, podemos dotar a nuestra web de una inteligencia extra y así interactuar con ella mediante nuestra voz, pudiendo de esta manera navegar por una web sin necesidad de utilizar nuestro ratón o teclado. Por otra parte, mediante el reconocimiento de gestos podríamos conseguir que personas con dificultades a la hora de usar los periféricos convencionales pueda navegar a través de nuestra web mediante gestos con las manos, la cabeza o incluso con la mirada, dotando a nuestra web de gran accesibilidad.
Llevar la experiencia de compra a otro nivel
Está claro que las tiendas online están ganándole terreno a las físicas a pasos agigantados. No obstante, las tiendas físicas siguen ofreciendo algunas cosas a los clientes que los eCommerces no son capaces de ofrecer. Por ello, hay muchos usuarios que son reacios a las compras online y prefieren ir a las tiendas físicas para ver mejor el producto y probárselo. La inteligencia artificial nos está poniendo cada vez mas cerca superar esta barrera. Algunas empresas como Zalando están apostando por el desarrollo de sistemas de inteligencia artificial que sean capaces de mostrarnos cómo nos veríamos con sus productos. Así podemos comparar de forma sencilla unos productos con otros y valorar mejor la opción de comprar el producto.
Muestra de cómo el software de Zalando aplica a una imagen una prenda de manera realista.
Recomendaciones personalizadas
Una de las aplicaciones de la inteligencia artificial mas extendida son las recomendaciones personalizadas. Mediante la inteligencia artificial podemos llegar a conocer al usuario que hay detrás de la pantalla para poder ofrecerle directamente lo que él quiere. De esta manera, en un eCommerce podríamos realizar recomendaciones a los usuarios completamente personalizadas basadas en multitud de factores como sus gustos, páginas visitadas, edad, localización, artículos ya comprados… Pudiendo de esta manera evitar recomendar a clientes productos que no le interesen y consiguiendo hacer recomendaciones mas eficientes. De una manera similar lo hace Amazon, recomendándonos de entre todos sus productos solamente aquellos que puedan ser de nuestro interés de manera bastante precisa.
UX más avanzado
De la misma manera que podemos recomendar productos a clientes de manera personalizada. Podemos extrapolar estas recomendaciones a cualquier tipo de contenido de una web. Conociendo los intereses de los usuarios podemos mostrar el contenido de nuestras webs de la manera que más le convenga a cada usuario sin necesidad de que nos lo digan, consiguiendo una experiencia de usuario más fluida y cómoda de manera sencilla.
En definitiva, aquí vemos una pequeña muestra de todo lo que la inteligencia artificial está aportando a día de hoy no sólo al mundo de la tecnología sino a nuestro día a día en general. Estamos empezando a convivir con la inteligencia artificial de una manera que nunca imaginamos y está cada vez más presente en todos los ámbitos. ¿Pensabas qué llegaríamos tan lejos?
En esta segunda entrada que realizo, os voy a escribir sobre algo un poco menos técnico, pero que no deja de ser importante a la hora de plantear y desarrollar un sitio, ya sea tienda online, web, etc.
La tan malograda UX o experiencia de usuario, la fea de la película. Pero me enfocaré en la parte de diseño y el apartado técnico, ya que la experiencia de usuario en sí es un ente bastante complicado de resumir y que engloba muchos otros aspectos a la hora de presentar un proyecto a un cliente.
Vale, no corras ¿podrías explicar un poco que es eso de la UX?
Una de las definiciones globales que más me gusta podría ser que “la experiencia de usuario es lo que siente una persona cuando está interactuando con un producto, ya sea digital o físico y que se ve afectado por elementos y factores ambientales”.
Me he quedado a gusto, ¿eh? Enfocándolo más todavía al aspecto digital, la UX sería el cómo se siente esa persona, pero interactuando con un sistema. Que web más fácil, no sé dónde comprar, esta app es más lenta que «el caballo del malo», esto no funciona (no viene mucho al caso, pero viene implícito en el 90 y pico por ciento de quejas de un sitio cuando no te gusta). Este resumen incluye una página web, una aplicación web, una aplicación móvil o de escritorio…, básicamente cualquier tipo de interacción humano/dispositivo.
Ojo, que no hay que confundir la experiencia de usuario con la usabilidad …
Porque, aunque estén relacionados, no es lo mismo. UX es la experiencia, emoción, intuición y conexión que un usuario siente al usar un sitio o un producto, el feel. Mientras que la usabilidad es más acerca de la efectividad del diseño de un sitio y cómo usarlo de manera amigable. Podemos decir que la usabilidad es un componente clave de la experiencia general del usuario.
¿Existe la fórmula mágica para hacer una fantástica UX?
Pues no. No existe la piedra filosofal de la UX, a cada uno nos satisfacen cosas diferentes y que un producto puede tener a la mayoría contentos es bastante difícil.
Lo más importante que hay que recordar a la hora de diseñar e implementar tu sitio web o app, es que tú no eres tus usuarios. No asumas nunca que conoces lo que quieren o necesitan.
Entonces, ¿cómo se puede definir una gran experiencia? Intenta acércate a ellos, observa, escucha y pregunta.
¿Y por qué crees que es tan importante?
La experiencia de usuario es tan importante porque trata de satisfacer las necesidades del usuario, y un usuario satisfecho es la clave del éxito. Con la UX se intenta proporcionar experiencias positivas que mantengan a los usuarios atentos y que se vuelvan leales al producto o marca. Además, es más propicio para el éxito empresarial … y el tuyo propio.
¿Conoces métodos para dar un poco de caña a esto del proceso de UX?
Digamos que hay unos 8 pasos básicos para lidiar con la experiencia de usuario. Arremangaos que vamos al tajo:
Perfiles de usuario y personas
El primer paso en todo este proceso es conocer a tu audiencia. Esto te permite desarrollar experiencias que se relacionan con la voz y las emociones de tus usuarios. Para comenzar, querrás crear lo que se conoce como “una persona”: una representación semi-ficticia de tu cliente ideal basado en la audiencia que has investigado. No es el Tinder, tranquilo.
Cuando termines de trabajar con tu persona (o personas), tendrás el perfil de la (s) persona (s) con la que está hablando tu aplicación. Crear una persona consiste en sumergirse en el análisis de tu sitio y en otros datos de clientes mientras realizas entrevistas y encuestas tanto internas como externas (o como hacer que te odien tus compañeros de trabajo).
Incluso puedes hablar con audiencias «parecidas» que reflejen los mismos rasgos que tus usuarios actuales. Algunos de los rasgos comunes que deberías considerar al desarrollar tu persona incluyen:
Demografía (edad, ubicación, estado familiar, carrera, etc.)
Y cualquier tipo de información que te ayude a conocer a tus usuarios.
Estas entidades de personas te tomarán (y deberían tomarte) un tiempo para desarrollarse. Hay muchos pasos que se deben seguir para asegurarse de que tienes una mejor comprensión de ese ente. Y ten en cuenta que pueden cambiar a lo largo del tiempo y que las base de clientes evolucionan (hoy tu cliente trabaja para X y mañana le entran Y clientes diferentes, por ejemplo).
Testeo de la interfaz
Cuando creas una interfaz de usuario, cuantos más datos puedas recopilar, mejor. Lleva a cabo un estudio para comparar la efectividad y la calidad de la experiencia entre diferentes interfaces de usuario, incluido tu sitio actual tal y como se ve.
Algo tan pequeño como cambiar una sola palabra, o el color de una fuente, podría afectar a la efectividad de tu página. Una poderosa herramienta para probar la interfaz es la plataforma “Optimize” de Google.
Con Optimize, puede dividir las impresiones de tu sitio web en dos grupos y mostrar a cada uno de estos grupos una versión diferente de las páginas de tu sitio (A/B Testings). Una vez que tengas un tamaño de muestra estadísticamente significativo, puedes ver qué versión está superando a la otra y hacer los ajustes correspondientes.
Encuestas de usuario
Va, que ya va quedando poco …. Ahora, entrevista a los usuarios existentes y potenciales del sistema para obtener una idea de cuál sería el diseño más efectivo. Debido a que la experiencia del usuario es subjetiva, la mejor manera de obtener información directamente es estudiar e interactuar con los usuarios. Un elemento de la página que pensabas que estaba funcionando muy bien, el botón de la app que pensabas que era superefectivo, podría parecerle completamente invisible a tu usuario final, por lo que una vista de primera mano de la forma en que interactúan con el sitio web puede proporcionar información valiosa.
Analiza a las personas de tu público objetivo cuando realices estas encuestas, ya que su propio grupo puede interactuar con el sitio web de manera diferente a las personas a las que deseas llegar. Haz preguntas como: ¿Cómo te hace sentir el sitio web? ¿Dónde te confundiste? ¿Cómo harías una compra? ¿El idioma te dice algo? Es posible que te sorprenda con la cantidad de comentarios constructivos que vas recibir.
Utiliza diagramas de flujo
Haz un diagrama de flujo que muestre cómo deben moverse los usuarios a través del sistema. Comienza por decidir cómo esperas que se muevan a través del sitio, luego compáralo con la forma en que realmente interactúan con él. Las personas de usuario de antes te ayudarán aquí: cuando entienda el perfil del usuario en el sitio web, podrás planificar mejor la experiencia óptima para ellos.
Además, una serie de herramientas analíticas pueden permitirte ver cómo los usuarios se relacionan con tu página en tiempo real. Plataformas como Mouseflow pueden incluso rastrear dónde se encuentra el mouse de un visitante en la página en un momento dado. También puedes ver mapas de calor de las áreas en la página que atraen la mayor atención.
Cuando hayas aprendido cómo las personas usan el sitio, entonces ponte a cambiar las cosas. Las aplicaciones más efectivas son aquellas que hacen que la experiencia del usuario sea una prioridad máxima.
Mapas del sitio o aplicación
Una vez que hayas estudiado el flujo de usuarios que esperas, es esencial realizar una planificación exhaustiva. Comienza por construir un mapa del sitio para las páginas que deseas crear. Un mapa del sitio es una jerarquía claramente organizada de todas las páginas, subpáginas y apartados del sitio o aplicación.
La creación de un mapa hace que sea más fácil imaginar cómo un usuario podrá ir desde el punto A al punto B, y cuántos clics realizará. En lugar de implementar cambios estructurales una vez que se construye el sitio, un mapa ayuda a tu equipo a eliminar las malas ideas rápidamente y, al mismo tiempo, te muestra toda la estructura que eventualmente necesitarás para diseñar y escribir contenido. Es una buena herramienta para agregar eficiencia al proceso de creación de sitios web.
Prototipos y wireframes
Los elementos visuales de cada página son tan importantes como la estructura del sitio, así que invierte tiempo en crear wireframes, que son guías visuales que representan el marco esquelético y brindan una vista previa de la apariencia del proyecto. Con un marco visual, puedes eliminar los problemas de usabilidad antes de que cualquier página llegue a la pantalla. Esto puede ahorrarte tiempo de desarrollo para realizar los ajustes necesarios en el futuro.
Una herramienta que ayuda es Adobe XD (no, no me pagan por anunciarlo, lástima). Seguro que hay muchas otras, pero por experiencia te diré que solo necesitarás un lienzo, un marcador y muchas ideas de diseño y contenido para comenzar. Una vez que el diseño se ve bien en tinta, te montará un enlace con un prototipo interactivo que muestre cómo se verá en vivo. La mayoría de las veces, lo que faltará será que el equipo haga pocos ajustes durante el siguiente paso creativo.
Patrones de diseño
Los patrones brindan consistencia y una forma de encontrar el diseño más efectivo para el trabajo. Con los patrones de diseño de la interfaz de usuario, por ejemplo, seleccionar los elementos correctos de la interfaz de usuario (por ejemplo, pestañas de módulos, rutas de exploración, presentaciones de diapositivas) para ciertas tareas basadas en su efectividad conduce a experiencias mejores y más familiares.
Una herramienta que te brindará una valiosa ayuda para mantener la consistencia de la interfaz de usuario, son los mosaicos de estilo. Los mosaicos de estilo son entregables que muestran el diseño de todos los módulos en un sitio, hasta los tamaños y colores de fuente. Este documento incluye cosas como botones, diseño de tipos e incluso interactividad. Los mosaicos de estilo aseguran que el usuario tendrá una experiencia fluida en todo el sitio para poder reconocer mejor cómo interactuar con los elementos del sitio.
Seguir unas guias de estilo
La consistencia es fundamental para diseñar una experiencia de usuario buenísima a través de una marca. Las guías de estilo brindan a los escritores y diseñadores un marco en el cual trabajar al crear contenido y desarrollar un diseño, y también aseguran que la marca y los elementos de diseño se alineen con los objetivos del propietario.
Haz que esa guía de estilo sea fácilmente accesible para cualquier persona que trabaje en un nuevo sitio web. Un elemento en una página que no coincide con la imagen o la voz de tu marca puede ser una espina clavada en todo el trabajo realizado. Si no tienes una guía de estilo, considera en crear una, en serio. ¡Te sorprenderás de lo útil que será, incluso más allá del diseño de UX de la aplicación!
Zzz… Vale, y después de este rollo, ¿cómo me va a ayudar a cumplir mis objetivos?
Te ayuda a averiguar cómo es tu audiencia
Una vez que descubras tus metas, puedes enfocarte en tu audiencia. La mejor manera de hacer esto es investigar tu base de clientes y crear personas.
Un sitio web puede tener múltiples personas y cada persona puede tener diferentes antecedentes, personalidades, necesidades y objetivos finales.
Éstos son el público objetivo, y hay que descubrir lo que necesita para lograr la mejor experiencia posible que les permita cumplir sus objetivos, comprometerse con el sitio y, finalmente, convertirse en un cliente potencial. El verdadero éxito de tu aplicación se produce cuando descubres cómo hacer felices a los usuarios y a las partes interesadas.
Te ayuda con la organización y la creación de contenido
Conocer tus objetivos y tu público objetivo te ayudará a imaginarte qué será exactamente lo que las personas están buscando cuando te visitan. Esta información influirá tanto en el mapa del sitio como en la estructura de la página.
Debes de saber lo que la gente está buscando, no puedes simplemente dejar un diseño curioso y bonito y ya está, sitio hecho. La verdadera razón por la que las personas van a visitar tu página web es porqué están buscando cierto tipo de información que les puedes dar, y tiene que ser de interés para ellos.
Por eso el contenido es tan importante. Si tu audiencia no obtiene algo útil de tu sitio, lo encontrarán en otra parte. Que crudo, pero que simple. Que esta afirmación se te quede.
El contenido de tu sitio web implica esencialmente dos cosas: primero está la voz y segundo el tono. Esto es esencialmente cómo vas a hablar con la gente. ¿Eres divertido y juguetón, inteligente e informativo, charlatán o directo al grano? Se trata de la marca de tu cliente y cómo la gente ve la empresa. El contenido también implica lo que dices. Esto puede parecer fácil, pero es arte en estado puro. Las personas tienen períodos de atención cada vez más cortos, y más y más opciones. Tienes que ser único y hacerte oír.
Con esto en mente, debes involucrar a las personas rápidamente y darles la información que necesitan sin dudarlo. Esto es más que solo el texto del párrafo. Se trata de titulares, botones, iconos e incluso metadatos intuitivos (las cosas ocultas en el código que ponemos los frikis de esto de la informática).
Te ayuda a ahorrar dinero
Toda esta planificación que estás realizando te aseguro que no quedará en saco roto. Si se hace bien, tu sitio puede tener un impacto duradero. Tomando decisiones inteligentes basadas en la investigación realizada en la aplicación que estás realizando, harás que esta tenga una “vida” más larga: más que si dejaras caer algo y lo presentaras.
Si deseas realizar un diseño iterativo (repetitivo), puedes aprender de tus decisiones anteriores y del rendimiento del sitio, realizar mejoras continuas, en lugar de centrarte en un rediseño tras otro que solo te hará gastar más dinero.
Y cómo no … ayuda a ganar dinero
No dejemos de lado lo obvio, queremos que se gane dinero con el producto del cliente y que esté contento, si no nos esforzamos tanto. Al realizar una investigación y planificación, puedes crear un sitio web que funcione tanto para sus potenciales clientes como para la organización.
Si conoces a tu cliente, necesitas llegar al lugar correcto. Cuando esto suceda, obtendrás un gran retorno de todo el tiempo y el esfuerzo invertidos en la construcción de la aplicación.
Y para despedirme de vosotros, una pequeña conclusión
Como ya he dicho antes de tanto parrafazo, UX es un arte en sí mismo. Inicialmente no podrás predecir a ciencia cierta cómo será percibida la aplicación o página web que desarrolles. Lo que si puedes hacer es utilizar herramientas para tomar las buenas decisiones durante el proceso de diseño. No pares de hacer / rehacer / deshacer / destruir / maldecir… wireframes, mock ups, prototipos y testearlos.
No hay nada más importante que dar con la tecla que haga que el usuario encuentre ideal el hecho de utilizar la aplicación, y que la encuentre cómoda, fácil y amigable.
Si deseas garantizar una gran UX, debes de aprender a cumplir los deseos de tus usuarios, con el mínimo esfuerzo.
En artículos anteriores hemos hablado de las aplicaciones de realidad virtual que existen en el mercado, pero ¿Qué sucede si lo que queremos es crear una que se adapte a nuestras necesidades? A-Frame puede ser la herramienta que necesitamos y vamos a explicaros cómo crear aplicaciones de realidad virtual más allá del hello world con muy poco código.
¿Qué es A-Frame?
A-Frame es un framework web de código abierto para desarrollar aplicaciones de realidad virtual creado por Mozilla. El objetivo del proyecto es facilitar una herramienta con la que los desarrolladores podamos crear experiencias de realidad virtual complejas de manera sencilla.
Para conseguir este objetivo utiliza tecnologías muy sencillas y potentes como HTML y custom elements de forma que nos presenta un sistema basado en el DOM que nos permite crear los entornos 3D de manera declarativa que funcionan en un amplio abanico de dispositivos. Desde headsets como HTC Vive u Oculus Rift, a los más modestos Daydream, GearVR o Cardboard, incluso podemos utilizar la aplicación desde el navegador de cualquier ordenador y utilizar los controles con teclado y ratón que sustituirían al seguimiento de posición y los controladores.
No obstante A-Frame no es un lenguaje de marcado con un motor 3D incorporado sino un potente framework basado en el patrón Entity Component System utilizado comúnmente en el mundo de los motores de videojuegos (por ejemplo lo implementan Unity, Unreal Engine, etc).
En A-Frame las entidades se representan mediante elementos HTML como <a-entity>. Se trata de objetos en la escena como nuestro personaje o el cielo. Estos componentes tienen atributos inherentes referentes a la escena de la que forman parte como la posición, rotación y escalado.
Los componentes se representan como atributos de los elementos HTML y son los que definen el comportamiento concreto o la apariencia de la entidad, por ejemplo shadow=»receive: true; cast: true;». El sistema nos permite crear componentes reusables personalizados como veremos más adelante para dotar de características especiales a ciertas entidades.
Al estar basado en el DOM y utilizar internamente threejs existe una gran cantidad de componentes creados por la comunidad específicamente para A-Frame pero también podemos utilizar casi cualquier librería de manipulación de DOM que conozcamos para interactuar con el sistema.
Además A-Frame es un proyecto creado específicamente para WebVR y por tanto el rendimiento es una pieza clave para que el usuario pueda disfrutar de una experiencia igual de satisfactoria que la que se puede experimentar usando aplicaciones nativas (que suelen funcionar a 90+ FPS). Para ello, y a pesar de utilizar el DOM, A-Frame recurre a varias optimizaciones y es por esto que los cambios en el DOM no se ven reflejados en las herramientas de inspección que incluyen los navegadores, por tanto no podremos hacer debug a nuestras aplicaciones utilizando el inspector. Para suplir esta carencia el propio A-Frame incluye un kit de herramientas de desarrollo que incluye un inspector visual 3D que podemos activar con ctrl + alt + i y que nos permitirá movernos libremente por la escena, consultar y modificar las propiedades y componentes de cada entidad y una herramienta de captura de acciones que nos permitirá recrear las acciones realizadas sin tener que ponernos el equipo cada vez que deseamos realizar pruebas sobre una modificación del código.
Introducción
Vamos a crear una aplicación sencilla para hacer una demostración técnica básica de las cualidades del framework, en nuestro caso utilizaremos un headset similar a Daydream con un Iphone X en su interior, aunque se puede ver el resultado en el navegador recomendamos experimentarlo utilizando un headset. En cuanto al software vamos a utilizar glitch.com que nos permite desarrollar, probar y compartir de forma sencilla este tipo de pequeñas aplicaciones o demos, por tanto no necesitamos instalar absolutamente nada en nuestros dispositivos.
El hello world que nos propone A-Frame es el siguiente:
Se trata de una aplicación con varias formas geométricas simples pero que ya nos permite utilizarla en modo VR. Para obtener este resultado en el que ya podemos interactuar con el mundo solo necesitamos el siguiente código:
Se trata de una página web con el HTML mínimo, importamos la librería como haríamos con cualquier otra y añadimos los tags necesarios en el body. En este caso tenemos lo justo para representar la escena que vemos:
a-scene: Todo lo relativo a A-Frame debe suceder dentro de la escena, por tanto hace de wrapper del resto de elementos.
a-box, a-sphere y a-cylinder: Se encargan de generar las 3 formas que vemos en el resultado, cada una con sus características geométricas, un color definido y el atributo shadow que permite que el objeto proyecte sombras y que se puedan proyectar sobre el mismo.
a-plane: Define el plano que estamos utilizando como superficie sobre la que reposan los objetos, de manera similar a las entidades anteriores cuenta con atributos básicos como la posición, el tamaño o el color.
a-sky: Es una primitiva algo especial ya que en lugar de representar un objeto genera un fondo para la escena en 360º con un color o una imagen. Esto lo logra renderizando una gran esfera dentro de la cual se encuentra toda la escena y de la que se utiliza el interior para mapear la imagen o color que configuremos.
Como hemos visto 7 lineas son suficientes para representar una escena simple pero completa, la propia librería se encarga de facilitarnos iluminación, cámara, y controles aunque no especifiquemos de forma explícita estos elementos que más tarde pueden ser configurados para cumplir con nuestros requisitos.
Nuestra primera aplicación VR
El anterior ejemplo nos permitiría crear cualquier escena que se nos ocurra pero para simplificar el proceso de desarrollo podemos utilizar recursos de terceros e ir aumentando la complejidad de la aplicación resultante sin aumentar exponencialmente la dificultad del desarrollo.
Primero vamos a personalizar la cámara. Por defecto ésta se sitúa en la posición 0 1.6 0. Las unidades en A-Frame guardan una relación 1-1 con los metros que representan, por tanto esa posición equivaldría a situarnos en los ojos de una persona que mide 1.6 metros y está en la posición 0, 0. Si queremos ver la escena anterior desde el punto de vista de un niño de 1 metro de altura tendremos que añadir dentro de a-scene el siguiente código:
Como podemos ver en el resultado el punto de vista inicial de la aplicación ha cambiado.
Para seguir construyendo nuestra aplicación seguramente querremos incluir modelos 3D más complejos, para ello podemos crear nuestros modelos utilizando software como Blender o Maya o recurrir a los que la comunidad ha creado y que se pueden descargar desde varias páginas web como Sketchfab, Clara.io o la que vamos a utilizar para el artículo: Poly de Google.
En nuestro caso hemos descargado el modelo Space Cowboy de Kell Condon y lo hemos subido a la carpeta de assets de glitch para que nos genere una url que utilizaremos para enlazar en nuestro HTML.
Para hacer uso de recursos en A-Frame tendremos que incluir la sección a-assets y dentro un a-asset-item para cada recurso que queramos utilizar. En el caso del modelo que hemos seleccionado tendremos 2 ficheros, un .obj y un .mtl que tendremos que importar para después poder crear una entidad que haga uso de ellos de la siguiente manera:
En este caso hemos visto como utilizar modelos 3D pero el sistema de componentes también nos permite crear y utilizar componentes de terceros. El proceso para utilizar un componente externo es muy similar al del resto de elementos. Importaremos el fichero js correspondiente y la utilizaremos siguiendo la documentación del autor. En nuestro caso vamos a crear un cielo estrellado con aframe-star-system-component, tendremos que importar el componente en el head y lo utilizaremos añadiendo una entidad con el atributo star-system a nuestra escena.
Por último vamos a mostrar la creación de un pequeño componente personalizado. En nuestro caso vamos a mover la cámara acercándola y alejándola del modelo de manera automática. Los componentes deben ser registrados antes de la escena y para simplificar el ejemplo únicamente vamos a implementar la función tick que se ejecuta continuamente. En la función obtendremos la posición de la entidad y la la modificaremos. Para utilizarlo simplemente añadiremos el atributo auto-camera a la entidad que contiene la cámara de la siguiente manera:
Resultado final y conclusiones
Podéis consultar el código en el siguiente enlace y ejecutar la aplicación en cualquier dispositivo desde aquí.
Definitivamente A-Frame es una herramienta muy potente en el mundo de la realidad virtual, nos permite crear escenas de manera declarativa y cuenta con un buen ecosistema de componentes que podremos utilizar para simplificar nuestro trabajo y conseguir grandes resultados. En menos de 50 líneas hemos escrito el boilerplate necesario para una aplicación A-Frame, importado un modelo, un componente, y hemos creado nuestro propio componente que hemos usado en nuestra escena.
El diseño web es mucho más que darle un aspecto bonito a una web. Se encarga de la planificación y la distribución de diferentes elementos, basándose en unos principios básicos, donde el objetivo es conseguir una buena experiencia por parte del usuario, que es el verdadero protagonista, no siéndolo el propietario.
Debemos centrarnos en esto, en darle el total protagonismo a los usuarios, ya que serán los auténticos jueces. Una web sencilla, fácil de usar, intuitiva, atractiva y agradable será clave para el éxito de la misma.
El primer paso en el diseño y desarrollo de una web es tener claro el propósito u objetivo de la misma, debe estar bien definido. Debemos saber y tener claro cuál es el fin de nuestra página web: venta de un producto, dar visibilidad o reforzar a una marca, realizar presupuesto de un servicio, darse de alta en newsletter y conseguir contactos, etc. Tras esto, se debe elaborar la correcta comunicación para conseguir ese objetivo, y ahí es donde entra el diseño web.
Empecemos por el principio.
¿Qué es el diseño web? Principios fundamentales
El diseño web viene estrechamente relacionado y derivado del diseño gráfico. A finales de los 90 habían muchos profesionales del diseño gráfico pero no del diseño web, por lo que es una profesión que se ha ido desarrollando “sobre la marcha” y se ha ido definiendo y puliendo a base de experiencia.
El campo del diseño web se resume en tres áreas: creatividad y gusto estético, conocimientos técnicos, y constante actualización.
El punto clave para que todo esto funcione es entender cómo los usuarios interactúan en los sitios web, conocer los patrones básicos de comportamiento mientras navegan, y sobre esto establecer una reglas básicas de comportamiento y usabilidad. Esto es algo que también está en continuo movimiento, por lo que es importante estar siempre actualizado.
Diferencias entre diseño web y desarrollo web.
Cabe mencionar y saber diferenciar entre la fase de diseño web y la fase de desarrollo web, aunque, bien es cierto, que forman parte del mismo pack, ya que el término Diseño Web abarca diseño y desarrollo.
El diseño web se encarga más de la parte visual, la navegación y demás elementos que hacen que la experiencia de usuario sea agradable, y que cumpla el fin con el que se creó la web.
Por otro lado el desarrollo web se encarga de la parte interna, la que no se ve, la que hace posible que todo funcione. Es el encargado de que las acciones que plantea el diseño web se puedan llevar a cabo técnicamente. Engloba sistema de gestión de contenidos, funciones de registro, ecommerce, y cualquier aplicación de base de datos. Debe tener en cuenta aspecto esenciales y de vital importancia, que son de un carácter algo más técnico, como son los tiempos de carga por ejemplo, ya que suele penalizar la conversión, y por ende, el posicionamiento, ya que los buscadores se ponen en la piel de los usuarios, y si una web tarda mucho en cargar suele ser penalizada.
El perfecto equilibrio entre estos dos subcampos es imprescindible para el éxito del sitio web.
Elementos que forman parte del diseño web
Tipografías
Una tipografía adecuada es fundamental para un correcto diseño web. Tener en cuenta la jerarquía tipográfica, el tamaño de texto adecuado, no demasiado pequeño, el interlineado y la alineación correcta, elección de una tipografía legible y acorde con el proyecto, y no utilizar demasiadas tipografías en un mismo proyecto, son algunas pinceladas clave para la correcta utilización de la tipografía.
Colores
El color tiene mucho poder, influencia desde sentimientos hasta acciones de los usuarios. Puede ayudar a fortalecer tu marca, conseguir ventas y ser determinante a la hora de tomar decisiones. Según estudios, las personas se deciden por un producto en menos de 90 segundos, y el 90% de esa decisión está basada en el color.
Imágenes
Las imágenes tienen mucho poder de persuasión y seducción, por lo que es una forma muy eficaz de centrar y captar la atención del usuario. El dicho “vale más una imagen que mil palabras” se confirma, ya que el usuario no quiere grandes parrafadas de texto, por lo que debemos aprovechar el potencial informativo de la imágenes. Cabe destacar que el uso y elección de las imágenes adecuadas es importantísimo, no vale todo en este campo.
Todo lo que nos rodea está realizado con formas, por lo que es un elemento visual imprescindible en el diseño web. Puede servir como método para agregar interés al diseño, con la forma como elemento decorativo, por ejemplo. Desde separar secciones hasta darle cierto atractivo a listados, la formas deben estar presentes como un recurso casi natural.
Algunos aspectos a tener en cuenta en el diseño web
Tamaños
Jugar con los tamaños de diferentes elementos sirve para centrar la atención hacia donde nosotros queramos. El tamaño es la forma más rápida y efectiva de captar la atención del usuario hacia un determinado elemento o sección de la web. Los elementos más grandes llaman más la atención, mientras los más pequeño suelen ser menos relevantes.
Espacios
Los espacios en blanco son elementos importantes para organizar contenidos y asignarles importancia. Un espacio en blanco no es un espacio vacío. Da sensación de orden y organización, es importante dar esos espacio de respiro, siempre bien realizados. Lo usuarios escanean la página y la dividen el área de contenido en secciones de información más digeribles, por lo que estos espacios son de gran ayuda.
Contrastes
El contraste es otro elemento que sirve para destacar zonas o elementos de nuestra web. Pueden ser contrastes de colores, tamaños, tipográficos, etc. Cuanto más drástico es el contraste más nos llamará la atención.
Interacciones
Se centra en la relación entre el usuario y la web. Lo podríamos definir como la conversación entre la web y el usuario: efectos de transición, transformaciones de botones, respuesta del formulario de contacto, etc. Esos detalles que hagan que una conversación sea fluida e interesante, o costosa e incómoda. Hay que buscar siempre que sea sencilla y clara.
Usabilidad y navegación: Principios básicos UX / UI
Diseño de Interfaz (UI – User Interface)
Se encarga de la selección y distribución de los diferentes elementos que componen la interfaz (ej. textos y campos de formulario). Es la parte más visual y gráfica del proceso, donde entra directamente el apartado gráfico. Lo que el usuario ve al entrar al sitio web.
Experiencia de Usuario (UX – User Experience)
Se encarga de estudiar y mejorar la experiencia del usuario, por lo que se podría decir que UI es parte del UX, es una de tantos campos que abarca este estudio y desarrollo de experiencias. Otros campos que abarca son: velocidad y tiempos de carga, procesos de compra, programación interna de la web, atención al cliente, etc.
Resumiendo, la relación y la experiencia entre la web y el usuario debe ser buena, por lo que debemos tener claro todos estos puntos.
Claves para un buen diseño web y sus beneficios
Tener en cuenta la navegación por parte de los usuarios, y trabajar este aspecto para que sea lo más amigable para éstos, utilizando, por ejemplo, mapas de calor.
Que los usuarios no tengan que pensar, una página web debe ser obvia y explicarse por sí misma. Reducir la carga cognitiva hace que el diseño de una web sea más eficaz.
No hacer esperar a los usuarios. Suelen ser impacientes, por lo que todo debe ser fluido e intuitivo, sin que deban realizar pasos innecesarios, ni esperar tiempos largos de carga para realizar algún paso o proceso. Todo debe estar a mano y funcionar correctamente.
Jugar con los diferentes elementos para centrar la atención del usuario en lo que queremos. Estos es fundamental para conseguir los objetivos y propósitos de nuestra web. Una buena conversión será el que nos diga si se ha realizado un buen trabajo de diseño web o no.
Disponer los diferentes espacios o secciones de una forma clara, para que el usuario pueda fácilmente reconocer y establecer una estructura general de la web y de la información que hay en ella.
Utilizar textos claros, breves y concisos, es clave para transmitir el usuario un mensaje directo. El usuario no quiere ver grande y largos texto muy técnicos, si no textos amigables, breves y objetivos.
Apostar por la simplicidad, es algo básico. No hacer webs demasiado recargadas a nivel diseño, ya que el usuario al final quiere obtener información. Es importante conseguir un equilibro entre contenido y diseño.
Sin miedo a los espacios en blanco, ya que reduce la carga cognitiva, de forma indirecta. Estructuras limpias y con espacios serán más fáciles de asimilar para el usuarios, por lo que captará mejor la información de la web.
No podemos olvidar un diseño web amigable y adaptativo: responsive web design
Cada vez más tiene más peso el diseño web responsive, el ejemplo es un titular que veíamos hace poco: “si no tienes una web responsive Google te penalizará”.
La tendencia actual nos dice que móviles y tablets se están convirtiendo en el medio preferido por los usuarios para navegar y realizar sus comprar por internet.
Lo que se quiere conseguir con todo esto es mejorar la experiencia del usuario en los nuevos dispositivos.
En resumen
Hay que estudiar bien los diferentes aspectos que forman el diseño web. Es un sector relativamente nuevo, pero en pleno auge y sin vistas a que deje de crecer, ya que el diseño aplicado a tecnologías y aplicaciones web solo acaba de empezar.
Apostar por diseño web te asegura un estudio personalizado de tu proyecto, y utilizar las herramientas que más se ajusten a él. Esa personalización conlleva distinguirnos de nuestros competidores, y ajustarnos más a los objetivos y propósitos de nuestra web.
Desde acceseo ponemos a vuestra disposición un equipo especializado para asesorar y estudiar tus proyectos, y conseguir llevarlos a cabo de la forma más adecuada.
WordPress es el gestor de contenido web por excelencia, día tras día el número de sites creados con este CMS aumenta, y no es de extrañar, su facilidad de uso y la posibilidad de hacer casi cualquier cosa a través de sencillos plugins, lo hacen perfecto para poner en marcha un portal online con una inversión reducida y una imagen muy profesional .
Hablamos de millones de sites online creados con esta plataforma por su profesionalidad y posibilidades infinitas por lo que, al igual que es atractiva para empresarios, emprendedores, diseñadores, etc., también lo es para todos aquellos que buscan hacer daño en el mundo virtual.
Es mucho más fácil localizar “puertas traseras” o vulnerabilidades en plataformas usadas por miles de usuarios que trabajar de forma individual webs creadas a medida, de la primera forma te aseguras poder hackear múltiples sites en un tiempo muy reducido.
Pero que no cunda el pánico, al igual que los hackers conocen los puntos frágiles de un site para acceder y campar a sus anchas, nosotros sabemos cómo evitar dichos accesos y os vamos a contar los trucos más usados por nuestros diseñadores web además de las acciones necesarias que deberéis realizar a vuestro WordPress para mantenerlo seguro con el paso del tiempo.
Trucos para evitar hackeos en tu web WordPress
Durante la fase de diseño:
La fase de diseño de la web es uno de los momentos más decisivos. Hay aspectos a tener en cuenta de los que dependerá que el site sea más o menos seguro y todo se resume en los siguientes 10 puntos:
#1. Base de datos
Normalmente se crean con el prefijo wp_ y esto, por supuesto, es algo que todo hacker conoce por lo que, a partir de ahora, cambia el prefijo y personalízalo de forma distinta en cada uno de tus proyectos sino tendrán demasiada facilidad de localizar las tablas de tu base de datos.
#2. Nombre usuario
Al igual que el anterior punto, existen una serie de nombres que se suelen usar y debéis por tanto evitarlos, se trata de los siguientes: admin, Admin, root, etc. Serán los primeros nombres que pongan los hackers a la hora de probar el acceso a una web.
#3. Contraseña
WordPress te facilita esta tarea generando passwords muy seguras de forma automática. Úsalo, aprovéchate de ello y por supuesto nunca uses contraseñas del tipo: 12345678, 00000000, etc.
#4. Autenticación en 2 pasos
Esta opción incrementará la seguridad de la web ya que implica la realización de un paso algo más complicado, por ejemplo, el envío de un código a un móvil que forme parte de su base de datos.
Es muy útil y, además, muy fácil de activar a través de plugins. Pero mucho cuidado, utiliza siempre plugins fiables de desarrolladores certificados, evita abrir tú mismo la puerta a posibles intrusos con plugins que no sean de fiar…
#5. Versión WordPress
Utiliza siempre la última versión en tu instalación así como mantén tus sitios web actualizados (incluido en la fase de mantenimiento). WordPress trabaja continuamente para evitar verse afectado por este tipo de problemas e incrementa la seguridad de su plataforma con cada actualización.
#6. Plugins
Utiliza siempre plugins de sitios verificados y de confianza, que además sean compatibles con tu versión de Wp. Por otro lado, elimina aquellos que no vayas a utilizar, de este modo además, reducirás el peso de la web y mejorarás su rendimiento.
#7. wp-config.php
Este archivo es la moneda de oro de cualquier wordpress y es que incluye todos los datos de acceso a la base de datos. Pero, ¿qué puedes hacer para protegerlo? Cualquiera de las siguientes acciones:
Moverlo a la carpeta superior del servidor
Cambiar los permisos a 444 para evitar que cualquier usuario pueda reescribirlo
Incluir la siguiente línea en el htaccess que evitará accesos no deseados:
<Files wp-config.php> order allow,deny deny from all </Files>
#8. Wp-admin con password
Desde el c-panel o plesk e incluyendo varias configuraciones en el htaccess se consigue que, antes de aparecer el típico acceso de un wordpress aparezca otra ventana solicitando primero dicha contraseña que hemos incluido en nuestro servidor. Es una forma más técnica y compleja de llevar a cabo el punto 4 del que hemos hablado anteriormente.
#9. Plugins Seguridad
Personalmente, tras haber sufrido ataques en varias webs que tenían instalados plugins de seguridad como el famoso Wordfence, no soy muy partidaria de dejar la suerte en manos de alguien o algo externo. En cualquier caso, si hemos realizado todas las acciones anteriores, podemos instalar algúno que nos informe de si algún archivo ha sido modificado, de este modo podemos detectar un ataque a tiempo, cargar una copia de seguridad y solucionar el problema de la forma más fácil y rápida posible.
No voy a recomendar ningún plugin en concreto pero próximamente prepararemos un listado de los que debes evitar a toda costa si no quieres sufrir un ataque con mayor facilidad. Suscríbete para estar al tanto de todas nuestras actualizaciones.
#10. htaccess
Este archivo es uno de los más importantes por lo que podemos protegerlo de forma muy sencilla incluyendo en el mismo la siguiente línea:
<files .htaccess> order allow,deny deny from all </files>
Además, en él se pueden incluir diferentes directivas que impidan el acceso a la web desde países o IP’s que forman parte de una base de datos de sitios maliciosos.
Durante la fase de mantenimiento:
Las acciones necesarias para proteger tu web no terminan en la fase de desarrollo sino suponen un trabajo continuo y conocimientos avanzados de desarrollo web
#1. Copias de Seguridad
Una vez tengas tu web en el aire deberás programar una tarea que genere copias de seguridad cada cierto tiempo. El periodo dependerá de las veces que actualices tu web, por ejemplo, si se trata de una web conectada a una base de datos de productos o en la que se realicen pedidos, necesitarás una copia diaria que te asegure disponer de todos los datos lo más recientes posibles.
#2. Actualizaciones
Todos los aspectos actualizables de los que hemos hablado antes, no deben estar al día sólamente la fase de desarrollo e instalación, sino que debe ser un trabajo de mantenimiento continuo.
Aconsejamos hacer una copia de seguridad previa ya que se pueden producir incompatibilidades y que la web no se vea correctamente. Lo mejor es contar con expertos de wordpress que se encarguen de su mantenimiento anualmente.
#3. Search Console
Conectar tu web a la Search Console de Google (la herramienta para webmasters del buscador) no sirve sólo para trabajar el SEO de tu web sino que te servirá para estar al tanto de todo aquello anómalo que ocurra.
Esta herramienta es capaz de localizar sitios comprometidos y que además te avisará a tu correo si tienes los avisos activados (muy recomendable). Además te servirá también para localizar archivos infectados y de comprobar si se encuentran limpios, tras realizar las acciones requeridas en caso de verse afectados.
#4. Comentarios con captcha
Localizar spam en los comentarios es la primera advertencia de que nuestro sitio está en el punto de mira de los hackers y de que es susceptible de sufrir un ataque de fuerza bruta.
Para evitarlo lo mejor es incluir un sistema que nos asegure que el comentario está siendo incluido por un humano y no por un robot como un captcha, y configurar el wp de modo que requiera ser aprobado en la sección de ajustes del escritorio.
Puedes aprender a instalar el invisible reCAPTCHA de Google en este post.
En definitiva todo se resume a dificultar el acceso y a mantener el backoffice de tu web lo más actualizado posible así que, todas las vulnerabilidades encontradas por los hackers en los sites web atacados, se vayan solucionando gracias a las nuevas versiones.
En el siguiente artículo, vamos a describir, cómo usar flexbox para realizar nuestros diseños con CSS.
En el layout flex, los hijos de un contenedor definido cómo FLEX, sé comportarán de manera flexible. Estos, podrán entre otras cosas, ajustar al ancho del contenedor para ocupar todo el espacio, ajustarse para quedarse centrado, variar su ancho e incluso, ordenarse de manera inversa al definido.
Esto nos permitirá realizar maquetaciones flexibles, y será una gran ayuda para realizar nuestras versiones responsive, ya que todo el contenido se reajustará acorde al espacio que haya.
¿Podemos usar Flex con todos los navegadores?
Sí, podéis visitar este enlace, Can I use, donde veréis que navegadores soportan ahora mismo flexbox. Cómo podréis ver, a fecha de hoy, todos los navegadores con soporte, tienen un verde, por lo tanto se puede usar sin problemas.
¿Cómo empezamos con FLEXBOX?
Propiedades que afectan al contenedor (parent)
Bien, cómo todo, vamos a empezar con ejemplos:
En primer lugar, imaginemos que queremos tener 6 bloques de contenido, uno al lado de otro:
flex-direction
Por defecto, tenemos los elementos todos alineados a la izquierda, y en la parte superior. Vamos a empezar a hacer uso de flex. Imaginemos que ahora, queremos que en lugar de estar en la misma línea, estos elementos formen una sóla columna. Para ello haremos uso de flex-direction, que se aplica al contenedor.
Más opciones para flex-direction:
flex-direction: row para mostrarlos en una misma fila en orden normal. (opción por defecto)
flex-direction: column para mostrarlos en una misma columna en orden normal.
flex-direction: row-reverse para mostrarlos en una misma fila en orden inverso.
flex-direction: column-reverse para mostrarlos en una misma columna en orden inverso.
flex-wrap
Ahora vamos a intentar ahora, hacer que el contenido siempre se mantenga en la misma línea, tanto si es columna cómo si es fila, es decir, que aunque no quepan los elementos dentro del contendor que las contiene, que estás se ajusten al espacio que hay. Hay que tener en cuenta que es el comportamiento por defecto, aunque en este caso lo vamos a indicar.
¿Y si tiene más espacio el contenedor? Veamoslo:
Vaya, se queda igual. Ni se han movido… ¿no habíamos dicho antes, que el contenido se «ajustaba»?
Hagamos una pequeña presentación de justify-content: space-around (más adelante entraremos con más detalle)
Ahora, si queremos que las cajas tengan un tamaño mínimo, ¿cómo podemos forzar a que cuando no quepan, bajen de línea y el contenido se ajuste?
Más opciones para flex-wrap:
flex-wrap: wrap para mostrarlos en una misma fila en orden normal.
flex-wrap: nowrap para mostrarlos en una misma columna en orden normal. (por defecto )
flex-wrap: wrap-reverse la línea se rompe por arriba
Bien, hasta ahora, ya hemos visto cómo podemos poner el contenido en filas, columnas, darle la vuelta, y luego podemos hacer que siempre esté en una misma línea o en varias.
Ahora vamos a poner ese contenido, en relación al contenedor, donde queramos.
justify-content
Vamos ahora, a centrar nuestro contenido, sin tener en cuenta lo que haya a los lados
¿Y si queremos ponerlo a la izquierda?
usemos justify-content: flex-start
Vale, de acuerdo, flex-start, ¿eso es correcto, por qué no se usa «left»?. Bien, esto es por el siguiente motivo. Cuando el contenido está con columna (visto hace unas líneas), flex-start es sinónimo de «lo más arriba posible» y ya no es igual que left. Lo mismo pasa con row-reverse, y column-reverse. En cada contexto significa una cosa diferente.
justify-content con direction: column
justify-content con direction: row-reverse
justify-content con direction: column-reverse
En cada contexto, flex-start significa algo diferente
justify-content: flex-start | flex-end | center | space-between | space-around;
Más opciones para justify-content:
justify-content: flex-start para poner el contenido al principio.
justify-content: flex-end para poner el contenido al final
justify-content: center para centrar
justify-content: space-between deja el mayor espacio posible entre los elementos
justify-content: space-around deja el mayor espacio posible entre elementos además de añadirlo a los lados
align-items
Una vez hemos visto el concepto de justify-content, align-items es lo mismo pero en la otra dirección. Es decir, cuando usamos una dirección row, con los elementos en la misma fila, justify-content, nos ajusta el contenido de forma horizontal. align-items, lo hace de forma vertical.
Sí, con una sola línea, hemos conseguido que el contenido, se centrara verticalmente.
Y con ayuda del justify-content… podemos centrar todo el contenido, tanto horizontal cómo verticalmente
Pero esto no es todo!! Hay varias opciones, que pueden ser más que interesantes, ¿quieres columnas con mismo alto?
Otra propiedad es, baseline, con el que se consigue que estén todos los textos a la misma altura, si usamos de referencia la base de la línea.
Más opciones para align-items:
align-items: flex-start para poner el contenido al principio.
align-items: flex-end para poner el contenido al final
align-items: center para centrar
align-items: stretch deja el mayor espacio posible entre los elementos
align-items: baseline deja el mayor espacio posible entre elementos además de añadirlo a los lados
align-content
Esta propiedad nos sirve para definir cómo queremos el contenido cuando hay más de una línea. Es parecido a justify-content, pero con más líneas. Es más, si sólo hay una línea, esta propiedad no afecta.
Más opciones para align-content:
align-content: flex-start los elementos, se ajustan a la arriba
align-content: flex-end los elementos se ajustan abajo
align-content: center para centrar, dejando espacio arriba y abajo
align-content: space-between distribuye el espacio entre los elementos, sin contar los bordes del contenedor
align-content: space-around distribuye el espacio entre los elementos
align-content: stretch aprovecha el espacio entre líneas
Propiedades que afectan a los hijos (children)
order
Order, nos permite ordenar los items de la manera que nosotros queramos. Por defecto, el contenido se muestra, conforme está puesto en el código de la web, pero con flexbox podemos cambiarlo, y por ejemplo destacar un elemento siempre en primer lugar. (admite también número negativos)
se usa de la siguiente manera: order: número
flex-grow
Supongamos que no queremos poner un tamañó de ancho fijo, pero sí que queremos que uno de los elementos ocupe el triple que el resto. Con flex-grow, podemos definir esta relación
Hay que definirles a todos los elementos un valor
se usa así: flex-grow: número
flex-shrink
Ahora, en lugar de hacerlos más grande, queremos hacerlos más pequeños
se usa así: flex-shrink: número
flex-basis
Con esta propiedad, podemos definir un tamaño por defecto, antes de que el espacio se reparta entre los elementos. Se puede usar porcentaje, px o cualquier otra unidad.
Destacar, si el valor que se pone a flex-basis es 0, el espacio que haya interno a cada elemento no se respeta, sin embargo cuando es auto, sí y se distribuye.
align-self
Por último, la propiedad que vamos a ver ahora, es la que nos permite crear niños rebeldes. Es decir, si uno de los elementos, no queremos que se comporte cómo el resto, podemos con esta propiedad, sobreescribir su comportamiento respecto a los demás.
Si por ejemplo, tenemos que poner un elemento abajo del todo del contenedor, podemos indicarle que vaya abajo.
Veamos un ejemplo:
Hasta aquí, hemos visto cómo usar flex para crear un contenedor padre con diferentes elementos. Imaginemos ahora que nos plantean un diseño responsive, con 3 columnas, con texto en cada uno de ellos donde, en movil queremos que se cambie a una sola columna
Veamos, cómo realizar esto con flexbox
Además hemos puesto que a partir de 600px, el contenido salga cómo una columna.
Ahora imaginemos que sólo hay una columna, y queremos que nuestro texto salga completamente centrado.
En resumen, trabajar con flexbox, nos facilita el trabajo, trabajando más rápido y con la certeza de tener un responsive adecuado a todos los dispositivos.
Los empaquetadores, comúnmente llamados en términos anglosajones, bundlers, son ya una herramienta imprescindible en cualquier entorno web moderno que se precie. Con la reciente ganancia de popularidad de Javascript, gracias a Nodejs, estas herramientas han proliferado en forma de utilidad de consola. Nodejs permite crear con gran agilidad este tipo de herramientas, e incluso escribir los propios módulos. Grunt y Gulp, fueron los que sentaron las bases de lo que son actualmente herramientas como webpack. Tenían por función la ejecución tareas de cualquier tipo, con plugins para ampliar la funcionalidad. Actualmente, están proliferando diferentes soluciones al problema mas específico de agrupar recursos, como puede ser rollup o jspm entre otros. Todos ellos están escritos en Nodejs.
Nodejs, de ahora en adelante, node, ha supuesto un cambio en la forma de desarrollo de la web por lo que el lado del servidor corresponde. De la propia de definición de su página oficial: usa un node ha supuesto un cambio en la forma de desarrollo de la web por lo que el lado del servidor corresponde. De la propia de definición de su página oficial: usa un modelo de operaciones Entrada/Salida sin bloqueo y orientado a eventos, que lo hace liviano y eficiente y programación funcional. Cuenta con una comunidad muy activa que desarrolla todo tipo de funcionalidades en forma de paquetes que reside en npm. La equivalencia podría ser packagist, en este caso, respecto de paquetes de php. La proliferación de páginas SPA, con el uso intensivo de red o RTA combinado ha propiciado la amplia expansión y evolución. Además de poder unificar la lógica en cliente y servidor, y usar el mismo lenguaje de programación para ambos.
¿Qué es Webpack?
Webpack como se define en web oficial: is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a Webpack como se define en web oficial: is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles – often only one – to be loaded by the browser. O lo que es lo mismo, se encarga de generar gráficos de dependencias y empaquetarlos para que la aplicación sea capaz de funcionar correctamente.
La herramienta, nos permite ampliar su funcionalidad a través de una amplia lista de loaders que nos permiten aplicar transformaciones a los archivos que le pasemos. Entre sus categorías, cuenta con funcionalidades básicas(xml, script, raw), empaquetadores(minificar, modernizr, web-components), específicos(imágenes, svg, base64, etc), transpilers(coffescript, es6, typescript), plantillas(handlebars, jade, mustache), estilos(less, sass, stylus), traducciones(po, po2mo) o auxiliares(documentación, tests). También cuenta con una sección de plugins, mas limitada, que nos permite extender la funcionalidad mas allá de una simple transformación, pudiendo ejecutar lógica adicional, como es el caso de HotModuleReplacementPlugin, el cual nos permite regenerar los assets generados en función de cambios en los archivos originales.
Beneficios
Es una herramienta que nos permite automatizar tareas repetitivas.
Modularizar las diferentes secciones de nuestro proyecto.
Posibilidad de elección en función del tipo de asset(minificación de imágenes, etc).
Tiene una comunidad muy activa, y cuenta con un gran apoyo por parte de empresas como egghead.io, rollbar, etc.
Aunque en su primera versión era uno de los principales inconvenientes, en su segunda versión cuenta con una documentación de calidad.
Optimiza la velocidad de carga de la web.
Desventajas
En proyectos en los que la gestión de los assets no represente un problema, o el proyecto sea pequeño.
La separación entre las secciones sea difusa o difícilmente modularizable.
La curva de aprendizaje es elevada, necesita mucha configuración y es compleja al principio.
Objetivos del artículo
Usar código en ES2015 y transcribirlo a javascript legible para el navegador.
Loaders de css.
Extraer el css en archivos css.
Servidor de webpack Hot-Reloading.
Instalación de la herramienta
Para instalar webpack, debemos tener primero node instalado en el equipo. Puedes encontrar la información sobre cómo instalarlo en el enlace de la página oficial. Ahora que ya tenemos lo tenemos instalado, podemos continuar con la instalación de Webpack desde el terminal. A través del siguiente comando, le indicamos a npm, el gestor de paquetes de node, que queremos instalar en la carpeta actual, y guardarlo como dependencia del entorno de desarrollo:
Con la ejecución de este comando, ya tenemos el entorno preparado para proceder con Webpack.
Utilización
Javascript con ES2015
En primer lugar, vamos a instalar un transpiler para ES2015, aprovechando la implementación de babel, un loader capaz de llevar a cabo tal tarea con la ayuda de webpack.
Esto nos instalará en la carpeta donde lo ejecutemos babel-loader. Ahora creamos un archivo javascript con un ejemplo sencillo de un fragmento de código escrito en ES2015:
Este código javascript, ahora mismo no es funcional en el navegador, porque no entiende las nuevas características que hemos utilizado. Para que webpack empaquete nuestro código y lo reescriba en un estándar compatible con los navegadores, vamos a usar una configuración específica para que antes ejecute el loader de babel con el siguiente archivo de configuración:
En el siguiente enlace, está explicada toda la configuración usada aquí, pero explicaremos brevemente cada apartado. Entry, es el archivo de entrada, output, son todas las opciones referentes a la salida de los recursos, en este caso, usamos el sistema umd, con el nombre bundle.js y lo escribiremos en el directorio /web/js/dist. Por último, le damos la configuración necesaria para que use el loader de babel y nos escriba javascript válido en el navegador. Si abrimos el archivo(en función de la versión de webpack y de sus loaders puede cambiar el contenido), podemos ver como las primeras lineas, son las que nos introduce la lógica de webpack. A partir de la línea 86, podemos ver nuestro código, con las porciones de ES2015 reescrito:
Ahora, ya tenemos todos los elementos necesarios para ejecutar webpack, para que genere la salida que estamos buscando, nuestro archivo app.js compilado, con el nombre de bundle.js:
El ejecutable, se encargará de buscar el archivo de configuración(que debe estar donde lo ejecutamos),e interpretarlo para realizar las tareas convenientes.
CSS en javascript
El siguiente paso será usar un loader para parsear el css. Webpack hace uso del concepto de Web Components. Es por ello que su fin es el de empaquetar todos los recursos necesarios para el correcto funcionamiento en un archivo javascript, para su posterior reutilización. Sin entrar en detalles del porque, en el siguiente enlace, se exponen algunos de los motivos por los cuales, existe el concepto de CSS en javascript.
Para poder usar el loader de css, necesitamos instalarlo de la siguiente forma, como hemos hecho anteriormente con el loader de babel:
Acto seguido, cambiamos la configuración de webpack, para que quede así:
Con esta nueva regla, y el nuevo archivo de entrada, le estamos diciendo a webpack que queremos que lea y parsee el css que contiene el archivo style.css. Ahora, si abres el fuente generado, podrás ver como ha incluido mucha mas lógica encargada de hacer la integración entre el fuente generado y el proyecto, además de los estilos css que contenía el archivo que creamos anteriormente. Podemos seguir ampliando nuestro set de herramientas para ser integradas con webpack, con sass, compresores de imágenes y un largo etcétera. Te aconsejamos que mires la documentación de webpack, para tener una visión mas profunda de el ecosistema.
Extracción del css
Para finalizar, con la sección de loaders y plugins, vamos a explicar como se pueden extraer los archivos css. Puesto que ya hemos visto como incluir el css en el archivo final bundle.js, haremos uso de un plugin que nos permite extraerlo y exportarlo a un archivo css común. Esta vez, lo que haremos no es instalar un loader, como lo hicimos previamente, puesto que necesitamos algo más que transformar las líneas. Ahora vamos a necesitar lógica para evaluar que hacer con los estilos que le indicamos a webpack que cargue, instalando un plugin. En primer lugar, instalaremos el plugin:
Cambiando la configuración, de la siguiente forma, ya podremos incluir el archivo como app.bundle.css, tras la ejecución de webpack, como habíamos hecho anteriormente. Ahora podrás ver como en la carpeta /dist, se ha generado un nuevo archivo de css.
Servidor Web de recursos
Como no podía ser menos, el uso de estas herramientas, se vuelve lento y pesado. Cuando estamos trabajando contínuamente en los mismo recursos, vas a tener que ejecutar en el terminal la herramienta debido a los cambios efectuados y la necesidad de volver a generar el compilado. Antes este problema, con webpack, podemos usar un pequeño servidor que viene integrado, el cual nos compilará los nuevos cambios a través de watchers.
Con el siguiente comando, arrancaremos el servidor local de assets de webpack, que podremos incluir en nuestro proyecto.
En la configuración, añadiremos las siguientes líneas. Por una parte, el path público al que acceda el navegador para solicitar el bundle.js, nombre descrito en el archivo de configuración. Por otra parte, añadiremos en el array de plugins el encargado de comunicar los cambios al navegador. Con la última opción, –hot, le estamos indicando a webpack que queremos que haga uso del hot reloading, el cual, nos refrescará la web automáticamente, cada vez que se lleve a cabo un cambio.
Por último, este pequeño fragmento de código a nuestro app.js para que acepte las conexiones entrantes de hot reloading:
Conclusiones
Webpack es una herramienta muy potente que nos permite empaquetar todo tipo de recursos ya sean estáticos o dinámicos de una forma eficiente a través de sus gráficos de dependencias. Tener todos los recursos en un mismo archivo de javascript, permite disminuir los tiempos de carga de la web, evitando peticiones innecesarias. Es cierto que al tratarse de javascript, tendremos un retardo en la carga de toda la lógica, pero si gestionamos de forma óptima los recursos, podemos evitar que los tiempos sea superiores respecto a las múltiples peticiones que puede realizar una página hacia el servidor. Así mismo, nos permite regenerar todos los recursos a través de su funcionalidad nombrada anteriormente, para evitar el paso por la consola en tiempo de desarrollo. En este artículo se ha intentado dar una visión básica y funcional de como usar esta herramienta. Asimismo, si estás interesado en la web oficial de webpack, tienes una sección completa de guías.
¿Tienes alguna incidencia?
Cuéntanos qué ocurre y nos pondremos con ello lo antes posible.
