Joomla para todo aquel que no lo pudiera conocer es un Sistema de Gestión de Contenidos CMD de sus siglas en inglés, que permite crear sitios WEB dinámicos. Es un software de código abierto creado en PHP liberado bajo licencia pública GNU. Necesita para su funcionamiento de una base de datos creada sobre MySQL y ser instalado en un servidor HTTP Apache, con lo cual aparte de las vulnerabilidades que pudieran tener esos sistemas que lo complementan, también hay que prestar especial atención en la configuración de seguridad en Joomla.

La seguridad de todos los servicios expuestos en internet siempre debe de ser revisada y comprobada a la vez que actualizada, ya que hay complementos que se pueden volver obsoletos, aunque eso sí los consejos generales que a la vez son comunes a todas las tecnologías siempre se deben de tener en cuenta, por ello vamos a hacer un breve repaso de ellos:

1. Realizar copias de seguridad.

2. Elegir un hosting seguro y de confianza, lo más barato suele salir caro.

3. Mantener las actualizaciones al dia.
4. Tener precaución con los Plugins, Extensiones y Módulos que instalamos puesto que pueden ser maliciosos.
5. Utilizar el principio de mínimo privilegio, dando los permisos de acceso escritura y lectura estrictamente necesarios.
6. Mantener el tanto el equipo de trabajo en local o en remoto debidamente actualizado y protegido.
7. Protegerse con contraseñas fuertes y seguras ( recordad nunca admin, admin).

En Joomla una cosa en particular a tener en cuenta a la hora de establecer la seguridad es cambiar el prefijo de la tabla, puesto que no solo contiene la información de nuestros usuarios sino que también nuestra información, como todos los usuarios de Joomla saben, este es “jos_” algo muy jugoso para un atacante a nuestra WEB. Esta operación se debe llevar a cabo durante la instalación aunque se podrá realizar después pero es importantísimo, hacerlo después de una copia de seguridad, no sea que pudiéramos perder nuestro proyecto completamente.

Además de todo lo anterior existen Plugin de seguridad muy buenos y eficientes como los que se van a mostrar en las siguientes líneas:

Es un servicio de seguridad creado específicamente para este CMD el cual protege al sitio Joomla de intrusiones:

1.Analiza tus archivos en busca de malware

2.Protege tu carpeta / administrador con una contraseña extra

3.Comprobar la integridad de los archivos principales.

4. Protege las cuentas de administrador

5.Encuentra y corrige permisos de archivos y carpetas inseguros.

6. Bloquear el acceso a países específicos.

7.Bloquea automáticamente las direcciones IP que atacan tu sitio web.

Eso sí esta extensión tiene un módico precio que para la seguridad que aporta a nuestros sitio pudiera ser muy bajo, 49 euros puesto que es muy completo e intuitivo aparte está disponible para la mayoría de los idiomas.

ste plug-in monitorea continuamente tu Joomla, analiza si se han cambiado los detalles críticos de la cuenta de usuario o si los directorios y archivos se han modificado. Por lo tanto, proporciona una línea de defensa adicional contra los intentos de piratería de sitios web. El complemento ralentiza los intentos de inicio de sesión de back-end repetidos para realizar ataques de fuerza bruta. Opcionalmente también incluye un servicio de monitoreo en remoto.

Como todo no es perfecto y no bloquea todos los intentos ni garantiza que nuestro sitio nunca sea vulnerado, pero sí que es un buen complemento ya que comunica a los administradores estos intentos fallidos de ataque para que no pasen desapercibidos. Este plug-in tiene una versión de prueba y otra standard más completa lo que dependería de nuestras necesidades y de nuestro presupuesto.

JhackGuard está diseñado para proteger nuestro sitio Joomla de ataques SQL de los que hablamos en mi anterior post ademas de ejecución de código remoto XSS, lo cual es muy interesante puesto que son los dos tipos de ataques más ejecutados. Una gran ventaja frente a otros productos es que tan solo necesitamos descargarlo, instalarlo y habilitarlo sin ninguna otra configuración. Además algo a tener muy encuenta es que es de software libre al menos para los apasionados de este tipo de software.

Conclusión.

Desde el punto de vista de la seguridad solo hay una cosa más importante implementarla cuanto antes, por supuesto mucho antes de poner en producción nuestro producto. Todas estas medidas i plug-in tan solo seria a mi parecer lo mínimo que se debería implementar en nuestro sitio siempre pensando desde el punto de vista de la funcionalidad claro esta, por que si nuestro sitio es muy seguro pero no es funcional nadie lo utilizara.

Para más información.

https://www.extensions.joomla.org/extension/

Una vez has visto qué es MotionLayout y qué puedes hacer con él, seguirás avanzando en la personalización de las animaciones. Para ello, vas a ver la última interacción de usuario que puede comenzar una animación de este tipo y terminarás conociendo tres elementos que otorgan un toque de UX (Experiencia de Usuario) que puede destacar tu app sobre el resto. Sin más, ¡a por ello!

Elemento OnClick

En el post anterior ya viste el elemento OnSwipe (dentro de Transition), en este caso, vas a ver la interacción más común e intuitiva de una vista, el click. Este elemento sólo tiene dos atributos posibles:

• target. Indica la vista que se tomará para capturar el evento de pulsado.
• mode. Indica qué hará la animación una vez se ha producido el evento. Tiene los siguientes valores: “transitionToEnd”, “toggle”, “transitionToStart”, “jumpToEnd”, “jumpToStart”. En el caso de “toggle” lo que hará será pasar a la animación de fin si se está en el estado de inicio y viceversa. Para los dos últimos, se pasará directamente a las constraints que indiquen cada uno pero sin realizar animación alguna.

La animación que harás durante el post será lanzada por un evento de pulsado en vez del desplazamiento. En cuanto al código, seguimos sin ver ni una línea en Java o Kotlin, sólo harás uso de código XML.

KeyFrameSet

Otro de los elementos que nos aporta Transition es “KeyFrameSet”, éste es capaz de añadir puntos intermedios que modifican el path (ruta) de la animación que se establece entre dos ConstraintSets. Éste tiene además los siguientes componentes:

KeyPosition.

Controla la posición del layout durante la animación. Sus atributos son:

• target. Id de la vista.
• framePosition. Define el punto a lo largo de la interpolación 0 = inicio, 100 = final.
• transitionEasing. Establece una curva de suavizado que se usará al llegar a este punto (por ejemplo, curve(1.0, 0, 0 ,1.0))
• type. Indica cómo se calculará la desviación para el trayecto lineal. Dos valores: “deltaRelative” y “pathRelative”.
• percentX. (float) Distancia porcentual del principio al fin a lo largo del eje X (deltaRelative) o a lo largo de la ruta (path) de la animación (pathRelative).
• percentY. (float) Lo mismo que el anterior pero con el eje Y.
• curveFit. La ruta de la animación será trazada.
• drawPath. Dibuja la ruta de los objetos.
• sizePercent. Si la vista cambia de tamaño, este atributo controla cómo crece el tamaño. (para objetos de tamaño fijo usa KeyAttributes scaleX / Y)
• curveFit. Selecciona una ruta basada en líneas rectas o una curva. Dos valores: “linear” ó “spline”.

KeyAttribute.

Puede cambiar los valores de un atributo del layout mientras es animado. Además de tener los atributos ya definidos (“target”, “framePosition”, “curveFit”, “transitionEasing” y “drawPath”), nos encontramos con los siguientes:

• transitionPathRotate. (float) Indica la rotación del objeto durante la animación.
• progress. Llama al método “setProgress(float)” para esta vista.
• <CustomAttribute>. Llamará al método “setNombreDelAtributo” mediante reflexión.

Tiene además todos los atributos definidos en: https://developer.android.com/reference/android/support/constraint/motion/MotionLayout

CustomAttribute

Es similar a usar el método “setMyAttr(tipo)”. Para este elemento tenemos:

• attributeName. Nombre del atributo, es importante saber que es sensible a mayúsculas y minúsculas.
• customColorValue.
• customIntegerValue.
• customFloatValue.
• customStringValue.
• customDimension.
• customBoolean.

Una vez tienes definidos todos los componentes y atributos, vas a realizar una animación haciendo uso de ellos. ¡a por ella!

Definición del nuevo MotionScene

Usarás las vistas definidas en el post anterior y sólo cambiarás la animación mediante su nuevo MotionScene. La animación que vas a realizar la puedes ver en el siguiente gif.

Define el comienzo de la animación mediante un OnClick

Simplemente tienes que usar el elemento “OnClick” y especificarle el target al que se le aplicará y el modo. En este caso será de tipo “toggle”.

Cambia el path de las vistas con KeyFrameSet y KeyPosition

Para la vista C, tienes que definir dos KeyPosition, los cuales harán:

• En el momento 20 (recuerda que es como el 20% de la animación ya que va de 0 a 100) la vista vaya al 65% del eje X de la pantalla. Nos referimos al porcentaje del eje X al definir el tipo como “parentRelative”.
• En el momento 80 (80% de la animación), la vista llegará hasta el 90% del eje X y lo hará de forma relativa tal y como se ha definido.

El código sería el siguiente:

Cambia varios atributos mientras se realiza la animación

Para la vista C también debes establecer que su atributo “backgroundColor” cambie desde la animación de inicio a la de fin. Para ello usa el elemento “CustomAttribute” con sus propiedades “attributeName”, con valor “backgroundColor” y “customColorValue” pasándole el color que quieras desde el inicio (transparente en este caso) al fin (azúl).

El siguiente código estará en el ConstraintSet de inicio:

Éste estará en el ConstraintSet de fin:

El código del MotionScene puedes verlo en el siguiente enlace.

Finalmente, sigues viendo que las animaciones con MotionLayout son realmente sencillas y no necesitamos conocer grandes cosas para realizar animaciones con una complejidad media. Te animo a seguir indagando y espero que te haya gustado.

El objetivo principal del proyecto Gutenberg es aportar a la comunidad de usuarios de WordPress una forma de publicar contenido más sencilla, intuitiva y con más posibilidades de maquetación de las que teníamos hasta el momento.

El editor por defecto en WordPress era el afamado TinyMCE, un editor HTML del tipo WYSIWYG, que deja paso a una nueva era con el fin de adaptarse a las necesidades de gran parte de los editores de contenido, y también, por qué no decirlo, ponerse a la altura de otros sistemas de publicación web existentes en el mercado que ofrecen mejores posibilidades en este área.

Durante el último año se ha estado trabajando en varios frentes para que el proceso de adaptación al editor de bloques de Gutenberg sea lo más fluido posible.

Gutenberg nos ofrece bastantes ventajas a tener en cuenta.

Ventajas de Gutenberg para desarrolladores

Fin de la dependencia con TinyMCE

Gutenberg rompe con la dependencia de WordPress con TinyMCE y abre una nueva era para los desarrolladores que podrán implementar sus propios bloques personalizados para el editor.

Esta situación abre posibilidades de mejora en la edición y creatividad en un entorno donde todo parecía estar ya inventado.

Incorporación de JavaScript en fases de desarrollo para WordPress

Tras diferentes divergencias en el proceso inicial de desarrollo de Gutenberg, ha sido React quien ha ganado la partida, si bien, la creación de bloques personalizados podrá generarse mediante el uso de diferentes frameworks JavaScript como Vue.js o el propio React.

Este cambio en la composición, puede relegar a PHP a medio plazo como pieza clave en la creación de plugins, extensiones y temas para WordPress. Con el lanzamiento de WP REST API ya pudimos ver avances en este sentido, pero cada vez se nos hace más presente que JavaScript tendrá mucho que ver en el mundo del desarrollo para WordPress.

Adaptación de plugins y temas premium

Todos los desarrolladores de temas y plugins ha tenido que estar al tanto de todo lo que sucedía en torno al lanzamiento de WordPress 5.0 y la incorporación del nuevo editor de bloques con el fin de adaptar sus productos a esta nueva situación.

Es tiempo también para aprovechar la ola y readaptar nuestros temas y plugins, o crear sustitutos de otros, con el fin de poder emparejarse a la perfección con Gutenberg. Todo aquel que no haya estado lo suficientemente preparado se quedará fuera, y ese espacio será aprovechado por desarrolladores que consigan suplir carencias del editor o aportarle nuevas características, tanto si se trata de funcionalidades de un plugin como de añadidos para un tema.

Recomendaciones para prepararnos ante la llegada de Gutenberg

Desde hace meses disponemos del plugin Gutenberg en el repositorio de WordPress para poder probarlo en nuestras instalaciones. Esto ha permitido que de manera independiente al core de WordPress, los miembros de la comunidad de WordPress hayan podido participar en el testing de la herramienta antes de que vaya a ser incorporada en el núcleo.

De todos modos, si estamos aún en fase de pruebas en nuestros desarrollos o sitios web en producción, es conveniente tener en cuenta algunas medidas que deberíamos empezar a tomar ya mismo para que podamos evitar cualquier tipo de error que se pueda producir en nuestro proceso de publicación.

Prueba el plugin Gutenberg

En estos momentos nos encontramos en la versión 4.2 del plugin Gutenberg incorpora la práctica totalidad de elementos que tendrá la versión final. Podemos adelantarnos a la incorporación en el núcleo de WordPress.

Incluso podríamos plantearnos la posibilidad de probar directamente la versión RC de WordPress 5.0 con el fin de testear todas las nuevas funcionalidades en un entorno de pruebas.

Prueba la compatibilidad con tus plugins y temas

Una vez que hayamos probado el propio comportamiento de Gutenberg es momento de ponerlo en acción con otros plugins fundamentales que estén en funcionamiento en nuestros sitios web para poder buscar soluciones o alternativas de manera anticipada.

Instala el plugin Classic Editor

Como la comunidad de WordPress es tan grande y participativa, siempre aparecen soluciones intermedias para casos concretos, como puede ser la posibilidad de tener que volver atrás a nuestro antiguo editor por incompatibilidades no detectadas a tiempo.

Para este caso, disponemos de Classic Editor, un plugin que tras su activación elimina cualquier rastro del nuevo editor de bloques, y permite recuperar la versión anterior de la edición de páginas y entradas en WordPress.

Crea un proceso de testing personalizado para tus proyectos

Cuando trabajas con multitud de proyectos web, y ofrece mantenimiento y soporte a muchos de ellos, es importante que establezcas una hoja de ruta a seguir para poder realizar una revisión de cada uno de los sitios web sin dejar cabos sueltos.

Este es el procedimiento que estoy siguiendo actualmente y que te recomiendo, aunque puedes completarlo tú mismo con tus propios aportes y experiencia.

• Instala el plugin Classic Press de manera anticipada para poder conservar un escenario con las opciones del nuevo editor de bloques de Gutenberg, pero con las posibilidades de recuperar las opciones anteriores.
• Crea un entorno de pruebas o staging donde poder actualizar a la versión de WordPress 5.0 en fase beta con la incorporación de Gutenberg.
• Activa y actualiza cada uno de los plugins en funcionamiento en el entorno de pruebas comprobando su correcto funcionamiento y compatibilidad.
• Crea una lista de plugins y temas en funcionamiento en tus proyectos y revisa su estado de compatibilidad con el editor de bloques según las pruebas anteriores. De este modo podrás ahorrar el proceso en sitios web que utilicen las mismas herramientas ya probadas.

Si quieres estar al tanto de cualquier novedad relacionada con la llegada de Gutenberg y su implementación en el core de WordPress te recomiendo algunas fuentes adicionales como Gutenberg News o la newsletter semanal de Aprende Gutenberg.

Actualización

La última fecha confirmada acerca de la publicación de la versión 5.0 de WordPress incorporando es el martes 27 de noviembre según el propio blog de Make WordPress.

¿Conoces todas las alternativas de notificaciones PUSH existentes hoy en día y cómo funcionan?

Porque supongo que a estas alturas sabrás lo que es una notificación PUSH, ¿verdad? Esos mensajes que recibimos aunque la aplicación esté cerrada, y que nos permiten informar al usuario de eventos importantes (o al menos debería usarse para eso) de una manera mucho menos costosa para el móvil que tener la app levantada y estar preguntando constantemente si ha ocurrido algo (a este otro sistema se le conoce como PULL).

Pero lo que a lo mejor aún no sabes si no te ha tocado trabajar con ello es cómo se implementa esta parte, o lo que es peor, puedes perderte en largas páginas de documentación, diferentes alternativas, liarte y no saber por donde empezar, cuando el esquema general es bastante sencillo y la mayoría de alternativas actuales siguen el mismo patrón. Lo que pretende este post es darte una idea general (con links que contendrán la información detallada para cada una de las plataformas) de qué patrón utilizar para implementar notificaciones PUSH dependiendo de tus necesidades.

Notificaciones PUSH iOS - APNs

Empezaremos hablando por el sistema posiblemente más cerrado y por ello uno de los más sencillos de entender de notificaciones PUSH. APNs es la plataforma principal mantenida por Apple para la gestión de envío de notificaciones a sus dispositivos iOS. Como todos los sistemas de notificaciones van a requerir tanto configuración en la parte del cliente móvil como configuración en la parte servidora de nuestro sistema, como adelantan en el que esquema de su plataforma:

El primer paso es crear un provisioning profile para tu app iOS, la parte más complicada del proceso de notificaciones Apple. Podrás ver información más detallada de como se hace aquí. Pero no quiero que nos liemos con demasiado detalle, nos vamos a quedar con el concepto de que ese provisioning profile crea una asociación entre tu dispositivo (identificado por el UDID) y tu aplicación (con un App ID que la identifica de manera única para Apple)

Una vez tengas ese provisioning profile, vas a poder registrar tu dispositivo + aplicación en la plataforma APNs. (Info detallada aquí). Lo cual te va a devolver un token de notificación que identifica tu móvil y aplicación en concreto. Una vez tengamos ese token, habrá que guardarlo en nuestro server de alguna manera, probablemente a través de un API Rest. Con ese token (o toda la colección de tokens que haya recibido el server), ya seremos capaces de, en el momento que queramos, contactar con la plataforma APNs para que envíe una notificación.

Dependiendo la tecnología / framework de servidor que utilicemos, probablemente haya librerías creadas que nos faciliten mucho la labor, pero el concepto por debajo es tan sencillo como hacer una petición POST al servidor de APNs (api.push.apple.com:443) que contiene tu id de aplicación, la lista de tokens y un payload con el contenido de la notificación y unos cuantos parámetros adicionales que puedes ver aquí.

Seguimos?

Notificaciones PUSH Android - FCM

El segundo sistema del que vamos a tratar es Firebase Cloud Messaging, el sistema por defecto para Android. Atrás quedaron ya los antiguos sistemas GCM o el anterior C2DM. Igual que con APNs, el primer paso es registrar registrar nuestro proyecto en la plataforma, en este caso Firebase. (Info detallada aquí)

Una vez registrado, instalamos el sdk en la app, que al iniciarse generará un token de registro para mandar notificaciones a ese dispositivo y aplicación (os suena el proceso? exactamente igual que en APNs!)

Así que ya sabéis la parte que queda, guardar esos tokens en servidor y mandar un POST a la url de FCM (https://fcm.googleapis.com/fcm/send) con los tokens a incluir y el contenido de tu notificación. Y si, seguro que hay ya librerías que te facilitan mucho la vida al respecto.

FCM - ¡Y tenemos la Firebase console!

Que no necesitáis server en vuestro sistema, queréis hacer una prueba de concepto, etc. Nos podemos saltar la última parte, pasarle los tokens a la consola de firebase y empezar a enviar notificaciones desde ahí. Una manera muy rápida y sencilla de empezar a probar nuestras notificaciones.

FCM - ¡Y es multiplataforma!

Si, si, que queréis enviar notificaciones a ambas plataformas, firebase se puede encargar por nosotros de hablar con APNs. Porque las notificaciones iOS tienen que pasar por APNs si o si. Pero centralizamos nuestra comunicación con firebase y él gestiona la comunicación necesaria con APNs.

Para ello tendremos que:

• Agregar el proyecto iOS a Firebase (Info detallada aquí)
• Agregar el sdk de Firebase a la app (en vez del de APNs)
• Generar el perfil de aprovisionamiento igualmente en tu centro de programadores de Apple. (Info detallada aquí)

Y con eso, podemos enviar las notificaciones a ambas plataformas de la misma manera que lo haríamos para dispositivos Android.

Notificaciones PUSH en Web

Porque nuestro paradigma favorito de notificaciones para usuarios ya no es exclusivo de aplicaciones móviles, ¡sino que se puede usar para aplicaciones web! Que no tienen nada que ver. ¿O sí? (no adelantemos acontecimientos, ya que de eso hablaremos en el último punto)

Algunos navegadores ya soportan la especificación del API Push W3C, aún en estado borrador y que viene muy de la mano del API de service workers. Posiblemente exista ya una librería que te facilite las cosas en el framework de desarrollo web que utilices, pero voy a intentar esquematizar el flujo que hay detrás. Flujo que posiblemente te suena porque es muy similar al que ya hemos tratado en las aplicaciones móviles.

Tu aplicación web deberá tener un service worker asociado (de ahí la conexión obvia entre las push web y los service worker). Este service worker será el que tendrás que utilizar para suscribirte al al servicio de notificaciones (Into detallada aquí) y obtener tu subscriptionId (si, lo mismito que el token de APNs y de FCM) y un endpoint al que llamar para enviar la notificación (menos mal! porque aquí todavía no sabíamos si había que llamar a la url de apns, fcm o a quién)

Y haciendo un POST a ese endpoint, con esos tokens y la info de la notificación... voilá! tenemos notificación en nuestra aplicación web

Notificaciones PUSH en apps híbridas

¿A estas alturas no sabes lo que es una app híbrida? Pues te dejo unos links para que te pongas al día rápido:

Apps híbridas con Ionic

Desarrollo multiplataforma con Xamarin

Si ya sabes de lo que te hablamos, posiblemente sepas que el mundo de aplicaciones híbridas es un terreno con múltiples alternativas. Existen tecnologías que nos proporcionan aplicaciones nativo-híbridas como Xamarin o React Nativa. Apps híbridas basadas en tecnología web como Ionic. PWAs que posiblemente puedas crear ya con tu tecnología web favorita..

Una vez que ya conocemos las alternativas anteriores, integrar notificaciones PUSH en nuestra app híbrida va a ser muy sencillo. Si se trata de una app nativa híbrida, buscaremos librerías que nos permitan utilizar APNs o FCM y seguiremos los pasos descritos anteriormente. ¿Que está basada en web? Repasemos la compatibilidad de navegadores e integremos una web push! (Importante repasar esta compatibilidad, ya que a fecha de creación de este post no hay compatibilidad con ninguna versión de Safari y por lo tanto no se pueden integrar web PUSH para apps iOS)

Espero que con todo esto te queden mucho más claras las alternativas y esquema general a la hora de integrar notificaciones PUSH en tu app!

En todas las aplicaciones sean del tipo que sea tenemos bases de datos en las que poder guardar información necesaria para su funcionamiento o modelo de negocio, esa información no solo puede ser muy valiosa para la aplicación o la empresa, además puede contener datos de carácter confidencial los cuales en caso de una fuga de información podría acarrear a la empresa responsable una multa de gran cuantía señaladas dentro del RGPD (Reglamento General de protección de Datos). En esta entrada vamos a ver de qué trata un ataque que podrían realizar contra nuestra base de datos, para ex filtrar información llamado SQL Injections y como intentar mitigar los errores de código para intentar protegernos de este tipo de ataques.

Comillas con los codos ¿Que es SQL Injections?

Toda aplicación que interactúa con datos de usuarios o de la empresa, además de un sitio donde guardarlos (llámese Base de datos) va tener también un método de introducción de dichos datos, ahí es donde se puede producir lo que en seguridad informática llamamos “introducir comillas con los codos”, refiriéndonos a introducir código propio de consultas SQL los cuales contienen comillas, y se dice con los codos porque un atacante ni tan siquiera tiene por qué saber que consulta debe realizar para extraer la información.

En definitiva una inyección SQL es una debilidad en los sistemas de bases de datos relacionales, accediendo a sus datos mediante Lenguaje SQL. El uso de los caracteres pertenecientes al lenguaje pueden permitir a usuarios no autorizados manipular, borrar o leer entradas en la base de datos.

Este método se a convertido en uno de los preferidos por los cibercriminales ya que los servidores de bases de datos son muy fáciles de encontrar y fácil de probar si son vulnerables al ataque, por que utilizan unos determinados patrones de ataque bien definidos.

¿Cómo identificar si somos vulnerables?

Las aplicaciones que se comunican mediante bases de datos normalmente no ofrecen el nivel de seguridad más indicado principalmente las que utilizan

SQL. Son altamente conocidas la vulnerabilidades de este lenguaje y para conocer si una aplicación es vulnerable un atacante lo que suele utilizar son los mensajes de error, tan solo con introducir una comilla en la URL podemos saber que lenguaje de base de datos utiliza la aplicación.

[Nombre].es /script.php?id = 10’

Esta manipulación podría darnos como error lo siguiente:

Lo que nos dejaría al descubierto el tipo de base de datos que utiliza la aplicación.

¿Cómo sería un ataque?

El ataque más simple que se puede realizar es en la pantalla de inicio de una aplicación donde se nos pide que nos autentiquemos podemos intentar introducir password’ OR 1= ‘1 lo que podría dar lugar a la siguiente consulta:

Como la anterior sentencia es siempre verdadera nos daría acceso a los datos de usuario de la aplicación, después de dicho acceso el atacante se registraría como administrador pudiendo realizar cualquier tipo de operación en la base de datos.

Otra forma de ataque sería aprovechándose de las consultas que se realizan utilizando el ID de usuario, el cual es un método habitual en las aplicaciones WEB pero no a salvo de debilidades, un ID transmitido en una URL permite a un servidor saber la información que tiene que enviar pero también permite a un atacante utilizarlo en su beneficio, por ejemplo una URL que contenga un script en PHP como el siguiente:

<? php

$ id = $_REQUEST[ ‘id’];

$ resultado = mysql_query(“SELECT * from tabla WHERE id = $id”);

?>

Una URL esperada podría ser …../script.php?id = 45 la cual se podría manipular cambiando el id y de esa manera poder acceder a otros datos de los diferentes usuarios contenidos en la tabla, o en el caso más grave realizar una consulta falsa del siguiente tipo:

….../script.php? Id = 45+or+1 = 1

Lo cual resultaría verdadera en todos los casos devolviendo como resultado todas las entradas de la base de datos.

¿Cómo protegernos de la inyección?

Existen múltiples formas de proteger las aplicaciones de estas vulnerabilidades, pero debemos de tener en cuenta todos los componentes entran en juego para el funcionamiento de las mismas, como son configuración de servidores y otras partes de código de la aplicación. Sin entrar en detalle puesto que sería muy extenso el explicar cada una de ellas vamos a enumerar las más importantes:

-Controlar las enumeraciones automáticas de las aplicaciones.

-Bastionado completo del servidor.

Pero lo más importante es asegurar la base de datos utilizando código seguro como por ejemplo el siguiente código:

$query = “SELECT * FROM usuarios

WHERE nombreUsuario= ‘” . $_POST[‘nombreUsuario’] . “’”

AND contraseña = ‘” . $_POST[‘contraseña’] . “’”;

Lo implementamos añadiéndole una función quedando el código como sigue:

$query = “SELECT * FROM usuarios

WHERE nombreUsuario=‘”.mysql_real_escape_string($_POST[‘nombreUsuario’]) .”

AND contraseña=’” . mysql_real_escape_string($_POST[‘contraseña’]). “’”;

De esta manera se cambian los caracteres vulnerables por una variante SQL más segura. Espero que todas estas recomendaciones te sean de utilidad.

En el anterior post hiciste uso de ConstraintLayout, ConstraintSet y TransitionManager para hacer animaciones con cierta complejidad en poco tiempo y muy importante, con muy poco código. En esta ocasión vas a tratar con un nuevo componente de Google con el que podrás hacer animaciones con la misma complejidad o más pero sólo con XML. Este componente se llama MotionLayout, ¡vamos allá!.

¿Qué es MotionLayout?

Como su nombre indica, se trata de un layout que posiciona sus elementos de UI y permite que se “muevan”. Si ves la implementación de su clase, puedes observar que extiende de ConstraintLayout y por tanto, se nutre de todas sus propiedades.

Ha sido creado con el fin de acabar con el código de las animaciones (sólo utiliza XML) y el costoso (y feísimo) control de animaciones, en cierto modo, es una unión entre el framework de animaciones, TransitionManager y CoordinatorLayout. Lo primero que se te puede venir a la cabeza es, ¿CoordinatorLayout?, pues sí, este componente tiene una capa de animaciones por defecto basadas en la interacción del usuario (por ejemplo, un scroll).

Como se ha comentado anteriormente, sólo precisa de XML por lo que tiene un carácter completamente declarativo. El objetivo final de este componente será la creación de las animaciones usando una herramienta integrada en Android Studio (vas a llorar de felicidad, y lo sabes), de este modo reduces en gran medida la complejidad a la hora de crearlas y mantenerlas.

¡¡Limitación importante!!

Las animaciones sólo serán aplicables a sus hijos directos y no a otros niveles de jerarquía.

¿Cuándo debo usarlo?

Se debe usar cuando necesites animaciones ante interacciones de los usuarios con los componentes de UI, por ejemplo, un swipe en cualquier dirección.

Dependencia

Necesitas añadir la dependencia de ConstraintLayout en su versión 2 alpha

¿Cómo lo añado al XML?

Simplemente usas:

Es importante saber que MotionLayout se nutre de uno o varios MotionScene para realizar las animaciones. Además, puesto que extiende ConstraintLayout, puedes hacer uso de todas sus propiedades y potencial.

¿Qué es un MotionScene?

Se trata del componente donde configuras tu animación. Puede tener a su vez otros componentes como Transition, ConstraintSet, etc. Estarán alojados en la carpeta “res/xml”.

¿Necesitas saber algo nuevo de ConstraintSet?

No, se tratan de las mismas que usas con ConstraintLayout y sirven para encapsular todas las restricciones necesarias para posicionar un elemento respecto a otro. Puedes crear tantos ConstraintSet como necesites y luego cambiarlas por código, esto provocará animaciones y transiciones al actualizarse sus nuevas restricciones.

Sin más, ¡al turrón!

Ya conoces el escenario y tienes unas ideas básicas para poder crear tu primera animación, para ello vas a implementar la siguiente.

Define tu primer layout usando MotionLayout.

Según has podido ver a lo largo del post, este layout es exactamente igual que ConstraintLayout pero con varias propiedades más, en este caso usarás:

• applyMotionScene. Por defecto está a true, indicará si tienes o no que hacer la escena especificada.
• layoutDescription. Establece la escena para tu animación desde el recurso XML. (@xml/animation_motion_scene)
• showPaths. Muestra la ruta que seguirá la animación. Como es lógico, sólo debes establecerlo a true en debug.

En este caso no necesitas definir ninguna constraint en este layout puesto que irán definidas por completo en la escena que configurará la animación.

El código XML lo encuentras aquí.

Crea tu primer MotionScene

Tendrás 3 grandes componentes:

Transition.

Definirá la animación y bajo qué acción se activará. Las propiedades que vas a usar en este post son:

• constraintSetEnd. Define las constraints para el final de la animación (@+id/motion_constraintset__end).
• constraintSetStart. Define las constraints para el inicio de la animación (@+id/motion_constraintset__start).
• duration. Establece la duración máxima de la animación (700 milisegundos en tu caso).

Además de las propiedades, debes crear tres componentes “onSwipe” (uno por cada vista a animar). Éste será el encargado de configurar cómo se animarán nuestras vistas. En este ejemplo basta con que lo definas con las siguientes propiedades:

• dragDirection. Establece desde qué lado se hace el desplazamiento. Para tu ejemplo será "dragUp". Los valores posibles son: dragUp | dragDown | dragLeft | dragRight.
• touchAnchorId. Establece el id del objeto al que se le aplicará la propiedad “touchAnchorSide”.
• touchAnchorSide. Establece el lado del objeto a mover. Para tu ejemplo será "top". Valores permitidos: top | left | right | bottom.

ConstraintSet de comienzo.

Define las constraints iniciales a las vistas, en tu caso las constraints de inicio harán que las tres imágenes estén en la parte superior.

ConstraintSet de fin.

Define las constraints finales a los mismos componentes, para este ejemplo, las tres imágenes se situarán verticalmente y en el centro.

El código de la escena sería el siguiente.

Vincula el layout con nuestra escena.

Haciendo uso de la propiedad “layoutDescription” podrás establecer la escena a tu layout, después de esto, no tienes que hacer nada más.

Ejecuta el código y verás la siguiente animación (con el path visible).

Pero… ¿No hay código en la vista o en la Activity / Fragment?

No, esta es la magia de MotionLayout, no necesitas nada de código Java o Kotlin para realizar tus animaciones.

Conclusión.

Este nuevo componente te proporciona una nueva forma de enfocar nuestras animaciones donde sólo importa las definiciones por XML. El único problema es que todavía está en alpha y tendrás que esperar un poco más para que finalmente saquen la primera release. Espero que te haya gustado.

¡El podcast de Betabeers ha vuelto después de una larga espera! Como antesala de una nueva tercera temporada con varios cambios, hemos grabado un pequeño resumen de las noticias más relevantes de los últimos meses a modo de debate, además de un nuevo espacio en el podcast: la ruleta de las noticias.

Por no entrar en profundidad en todas las noticias desde la publicación del último programa, en este primer programa de la temporada hicimos una selección las noticias más destacables, como han sido la compra de Github por parte de Microsoft, el cambio de licencia de Java 11, la liberación de múltiples patentes de Microsoft a la Open Invention Network o el abandono de React Native por parte de Airbnb.

Después de este repaso introducimos una nueva sección, en la cual seleccionamos aleatoriamente noticias del subreddit de programming y las comentamos, debatimos y, en varias ocasiones, nos vamos por las ramas. Las noticias seleccionadas para este primer programa han tocado temas cómo el ya mencionado cambio de licencia de Java, cuál es la característica más destacable de Lisp, las diferencias entre el cifrado de GMail y Whatsapp, una herramienta para optimizar el consumo de batería de las aplicaciones y tratando temás tan aleatorios cómo un Code School celebrado en Frisco.

Agenda y otras noticias Betabeers

Y con un breve resumen de los próximos eventos del sector, con un fin de año trepidante entre Codemotion, Commit Conf y LambdaWorld entre otros muchos, cerramos el primer programa invitandoos a visitar la web y conocer estos y otros eventos a los que asistir por toda España y parte del mundo, así como a proponer temas y darnos tu opinión y sugerencias para hacer que esta temporada sea la mejor realizada hasta el momento. ¡Nos escuchamos en el próximo programa!

La API de Shortcodes para WordPress nos permite crear de una manera sencilla este tipo de atajos de código. A nivel de desarrollo, podemos construir instrucciones sencillas para el usuario en el caso de que tenga que introducir determinados valores en el sitio web, que de otro modo sería más complejo, o en ocasiones, demasiado repetitivo.

En este artículo hablaremos un poco más del funcionamiento en sí mismo y podremos comprobar cómo podemos crear nuestros propios shortcodes a través de una serie de pasos muy sencillos.

API de Shortcodes para WordPress

La API de Shortcodes para WordPress es una herramienta para desarrolladores que nos permite generar, mediante fragmentos de texto entre corchetes, un código completo que se imprimirá en consecuencia. El propio WordPress dispone de algunos shortcodes creados por defecto que a buen seguro te van a sonar.

[audio] [caption] [embed] [gallery] [playlist] [video]

Cuando introducimos alguno de estos shortcodes en nuestro editor de texto y añadimos los correspondientes parámetros podremos mostrar cualquier tipo de información sin necesidad de depender de la actualización de código HTML o PHP para tal fin.

Esta funcionalidad añadida supone una mejora en el mantenimiento de contenidos de un sitio web y una mayor facilidad de uso para un cliente final encargado de gestionar publicaciones.

Cómo crear un Shortcode para WordPress

Después de tener una visión general de la herramienta y haber entendido su funcionamiento, vamos a proceder a crear un ejemplo sencillo pero que nos dará una buena aproximación y nos permitirá poner en práctica esta funcionalidad para WordPress.

En este ejemplo crearemos un shortcode que nos permitirá añadir una imagen por defecto a modo de placeholder en cualquier post en tan solo unos segundos. Es un proceso sencillo, pero que si lo complementamos con cierta creatividad nos podrá dar juego para nuestros desarrollos permitiendo añadir contenido de manera sencilla a través del editor de texto de WordPress.

Los pasos que deberemos llevar a cabo son los que exponemos a continuación.

Crear la función del shortcode

Tendremos que crear la función para el shortcode, y en este caso, WordPress nos da los parámetros necesarios para utilizar el hook add_shortcode.

add_shortcode( 'dummyimage', 'dummyimage_shortcode_function' );

Enlace a gist

En este caso, dummyimage es el valor que deberemos utilizar para para llamar al shortcode desde el editor, y la función que nos permitirá definir el contenido que debemos imprimir.

Añadir los atributos variables

Añadiremos a nuestra función los elementos necesarios para definir valores como el ancho de la imagen, la altura, el color de fondo y el color del texto incluido. También podemos añadir unos valores por defecto, que se utilizarán en el caso de utilizar el shortcode sin indicar ningún tipo de parámetro.

function dummyimage_shortcode_function( $atts ) {

  // Attributes
$atts = shortcode_atts(
array(
'width' => '600',
'height' => '300',
'background' => 'eeeeee',
'text' => 'ffffff',
),
$atts
);

Enlace a gist

Código a implementar

Por último deberemos añadir el código que se va a imprimir, siendo este caso la inserción de una imagen. En el caso que nos ocupa utilizaremos el servicio gratuito para generar imágenes de dummyimage.com.

return '';

Enlace a gist

Función completa

Si recopilamos las instrucciones dadas tendremos el siguiente código que podremos añadir a nuestro archivo de funciones, functions.php, o en nuestro tema en desarrollo o plugin instalado.

// Añadir Shortcode
function dummyimage_shortcode_function( $atts ) {

// Atributos
$atts = shortcode_atts(
array(
'width' => '600',
'height' => '300',
'background' => 'eeeeee',
'text' => 'ffffff',
),
$atts
);

return '

';

}

add_shortcode( 'dummyimage', 'dummyimage_shortcode_function' );

Enlace a gist

Si en este caso usamos la llamada al shortcode tal cual, lo que conseguiremos es imprimir la imagen por defecto que necesitamos tomando los valores que hayamos indicado en la creación del shortcode. Tendríamos que utilizar el shortcode sin ningún tipo de parámetro.

[dummyimage]

Si lo que buscamos es personalizar los parámetros de salida de nuestra imagen a modo de placeholder, es necesario que indiquemos esas variables del siguiente modo.

[dummyimage width="300" height="200" background="000000" text="ffffff"]

Conclusiones

Si realizar mejoras en nuestros desarrollos, uno de los objetivos que debemos tener en cuenta es el uso que van a dar a la herramienta nuestros clientes o encargados de la edición de contenidos.

Todo aquello que nos permita mejorar su flujo de trabajo podrá considerarse un éxito en el remate de un proyecto y tendrá consecuencias en una mejor adaptación a la publicación de contenidos en WordPress.

Este artículo ha sido escrito por David Toledo y publicado originalmente en el blog de Solid GEAR.

¿Que es Portainer.io?

Portainer es una herramienta web open-source la cual se ejecuta ella misma como un container, por tanto deberemos tener Docker instalado. Esta aplicación nos va a permitir gestionar de forma muy fácil e intuitiva nuestros contenedores Docker a través de una interfaz gráfica.

¿Por qué usar Portainer.io?

Para las tareas de administración de contenedores Docker, a veces la línea de comandos puede hacerse algo dura para realizar ciertas acciones. A través de una interfaz web, un administrador puede tener una visión global más clara de los contenedores que está ejecutando y facilitar su gestión.

Kitematic es la GUI por defecto que viene con la versión de Docker para Windows y Mac. Seguramente muchos de vosotros ya la conocéis y habéis tenido contacto con ella, pero en algunas circunstancias puede quedar algo corta. Portainer.io va un paso más allá a la hora de darnos funcionalidad para gestionar nuestro Docker a través de una interfaz.

¡Vamos a instalarlo!

Portainer está disponible para los sistemas operativos Windows, Linux y Mac. Yo lo he probado con Mac solamente.

La instalación es bastante sencilla,

docker volume create portainer_data

docker run -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer

Lo que hace es escuchar en el puerto 9000. Allí es donde lo tendremos arrancado. Por tanto para acceder a él, simplemente debemos ir a http://localhost:9000 en nuestro navegador. portainer/portainer, es el repositorio de DockerHub de donde descargamos la imagen de Portainer.

Os preguntará que pongáis un usuario y una contraseña

Un vez creado el usuario administrador con una contraseña válida para la política de password, pasaréis a la siguiente ventana donde nos preguntará si queremos levantarlo en local o en remoto, en mi caso he seleccionado en local para así manejar los containers que tengo ejecutando en mi propio ordenador.

Interfaz

La primera sección, llamada Dashboard, es la página principal de nuestra instancia de Portainer. En ella se muestra un resumen de manera visual de nuestro sistema de Docker: número total de contenedores, de imágenes, redes o volúmenes. Esta sección es de gran utilidad para mostrarnos de manera global cual es el estado actual de Docker en nuestra máquina.

El menú de Containers, nos mostrará la lista de todos nuestros contenedores, y podremos ejecutar a golpe de click varias de las típicas instrucciones que solemos ejecutar a través de la línea de comandos, como arrancarlos, pararlos o eliminarlos. También podemos ver detalles del propio contenedor. Si hacemos click en el nombre de un contenedor, entonces podemos conocer la información del mismo

Esa pantalla llamada Container details nos permite:

– Todas las operaciones mas habituales como parar, pausar, matar o borrar el contenedor
– Ver informaciones del contenedor (docker inspect)
– Crear una imagen nueva desde el mismo contenedor y añadirla a un registro (docker commit)
– Ver los logs del contenedor (docker logs)
– Ver las estadísticas del contenedor (docker stats)
– Entrar en el contenedor pudiendo elegir el shell o el usuario (docker exec)
– Conectar/Desconectar el contenedor con una red (docker network connect)

La sección de Images correspondería, si estuviesemos trabajando con el terminal, al comando docker images .

La interfaz web de Portainer para la seccion de imágenes nos ofrece una serie de ventajas frente a la línea de comandos como ejemplo

• Ordenar la lista por tags
• Ordenar la lista por tamaño
• Selección de una / varias imágenes a través de checkboxes
• Tag unused para mostrarnos aquellas imágenes que actualmente no estamos usando.

En la pantalla de Networks, tenemos la posibilidad de ver las redes que ya tenemos creadas. También podemos eliminarlas o añadir a través de la interfaz una nueva red.

En Volumes veremos los directorios del sistema que usa docker (docker volume ls)

Y para terminar, existe una sección llamada App Templates, la cual no he usado aún en profundidad pero me ha parecido muy interesante. Hay gran cantidad de plantillas disponibles para descargar e instalar. En mi caso por ejemplo necesitaba para unas pruebas un contenedor de Scality S3 y me resultó muy útil dicha plantilla para conseguir montarlo.

Espero que tras leer este artículo te animes a instalar y probar Portainer. Si quieres más información sobre esta herramienta y ampliar tus conocimientos, puedes consultar aquí su documentación.

La tecnología está en constante evolución. Las comunidades se adaptan rápidamente a los cambios. Y la web de Betabeers ha ido evolucionando para ajustar a estos cambios y demandas del sector.

Seguimos siendo una comunidad tecnológica. Los encuentros mensuales se mantienen como nuestra referencia, punto de encuentro de los desarrolladores, emprendedores e interesados en la tecnología. Y la web sigue siendo nuestro epicentro. Al calor de los encuentros, han surgido diferentes áreas complementarias, como el foro, empleo o los cursos.

Ofertas de empleo mejoradas

Los profesionales del desarrollo nos movemos en un entorno altamente demandante y requerimos ofertas con ventajas competitivas, transparentes y realistas. En nuestro objetivo por contribuir a facilitar la búsqueda de la mejor oferta, la sección de empleo ha evolucionado para los profesionales podamos conocer mejor cada oferta que se publica y la empresa que la respalda. Toda la información que podamos proporcionarte será de valor para tomar una decisión sobre tu futuro.

Una newsletter con la información que más te interesa

La newsletter de Betabeers tiene ya 8 años de vida. Resumimos la agenda de próximos eventos a tu alrededor, últimas noticias del blog, así como ofertas de empleo que se adaptan a tu perfil. Ahora la hemos personalizado aún más para cada perfil. Por cierto, ¿hace tiempo que no actualizas tu perfil de Betabeers? ¡Actualízalo cuanto antes!

Y si aún no eres parte de la comunidad de suscriptores, éste es el momento para que no pierdas detalle de todo lo que ocurre en el sector digital. ¡Suscríbete a la newsletter de Betabeers!

Se avecinan más cambios en la web, para hacerla más responsive y adaptarla a las demandas del sector tecnológico. Si tienes alguna sugerencia que crees que podemos implementar, algún error que no hemos detectado o alguna idea disruptiva, será más que bienvenida en los comentarios.

Las animaciones siempre nos ha traído de cabeza a prácticamente la mayoría de desarrolladores en Android. Cada vez son más las facilidades que nos proporciona el SDK para conseguir que nuestras animaciones no acaben en un código ilegible o demasiado tedioso.

En este caso, ConstrantLayout junto con ConstraintSet y TransitionManager nos proporcionan una herramienta con la que podremos crear animaciones sin mucha complicación y realmente fluidas.

ConstraintSet

Permite definir programáticamente un conjunto de restricciones aplicables a nuestras vistas. Podemos crear, guardar o clonar restricciones y luego aplicarlas a un ConstraintLayout. Existen distintas formas de crear/inicializar esta clase:

• Manualmente:
  
• Desde un layout:
  
• Desde un ConstraintLayout ya existente:
  

TransitionManager

Esta clase fue añadida en la API 19, su objetivo principal es la ejecución de animaciones basadas en cambios de escena. En este caso, los cambios de escena se deben a cambios en las constraints de los elementos. En post posteriores veremos más características de este manager y su gran capacidad.

¡Empezamos!

Una vez que ya tenemos los conceptos teóricos claros, vamos a ir paso a paso detallando su implementación. Es importante señalar que crearemos una vista propia donde realizaremos la animación, esta vista se llamará “ExpandableCard.kt”.

La animación que vamos a realizar es la siguiente.

1.- Creamos el layout inicial.

Este layout tendrá las constraints o restricciones iniciales para el comienzo de la animación.

Para comenzar vamos a definir una serie de guidelines que nos ayudarán a delimitar hasta dónde se moverán nuestras vistas en la animación. Las guidelines son:

• card__guideline__left. Tipo porcentaje y vertical, valor 0.1 (10%).
• card__guideline__right. Tipo porcentaje y vertical, valor 0.9 (90%).
• card__guideline__bottom. Tipo porcentaje y horizontal, valor 0.7 (70%).
• card__guideline__top. Tipo porcentaje y horizontal, valor 0.2 (20%).

Las vistas principales con sus constraints son:

• card__container__image. CardView con la imagen, la cuál al inicio debe ocupar toda la vista por eso definiremos sus 4 constraints como “parent”.
• card__container__info. CardView con el texto de información. Al igual que el contenedor de la imagen, ocupará también todo el ancho y alto ya que estará por debajo de la imagen.
• card__label__title. Título de la vista, estará centrado y ocupará desde la guideline con id “card__guideline__left” hasta “card__guideline__right”.

La imagen inicial que tenemos es:

¡IMPORTANTE! Todos los hijos (que no nietos) que tenga el ConstraintLayout deben tener un id especificado, ya que el layout que contiene la animación final debe conocer la posición de todos sus elementos.

El código del layout “card_collapsed.xml” podemos encontrarlo en el siguiente enlace.

2.- Creamos el layout con la animación final.

En este caso NO es necesario especificar atributos referidos a establecer colores, tamaño de textos, etc. Sólo necesitaremos definir las constraints para cada elemento del layout inicial. De esta forma se podrán desplazar todas las vistas desde su punto inicial hasta el final.

En este caso tendremos las siguientes constraints:

• card__container__image. Cambiaremos todas sus constraints exceptio la superior, la constraint inicial (“layout_constraintStart_toEndOf”) la estableceremos al final de la guideline con id “card__guideline__left”. La final (“layout_constraintEnd_toStartOf”) pasará a ser la guideline con id “card__guideline__right”. Finalmente, la inferior (“layout_constraintBottom_toTopOf”) pasará a ser la guideline con id “card__guideline__bottom”.
• card__container__info. Mantendrá todas sus constraints excepto la superior (“layout_constraintTop_toBottomOf”) ya que le indicaremos que esté justo debajo de la guideline con id “card__guideline__top”.
• card__label__title. Mantiene todas sus constraints.

La imagen final que tenemos gracias a estas constraints es:

El código del layout “card_expanded.xml” podemos encontrarlo en el siguiente enlace.

3.- Creamos la vista personalizada.

Ahora pasamos a implementar nuestra clase “ExpandableCard.kt” que extenderá de ConstraintLayout. Cada vez que creamos una vista personalizada debemos indicar todos sus constructores, en Kotlin podemos utilizar la anotación “@JvmOverloads” que nos ayudará a unificar todos los constructores en uno. Después, simplemente estableceremos el layout inicial a nuestra vista.

El código podemos encontrarlo en el siguiente enlace.

4.- Configuramos la animación.

Antes de nada, definimos una variable “applyInitAnimation” la cual nos ayudará a saber el estado (inicial o final) de nuestra animación.

Después, sacamos las constraints de los layouts inicial y finales, de esta forma aplicaremos uno u otro en función del estado de la misma. Para ello, hacemos uso del método “clone” de ConstraintSet, el cuál clonará las constraints del layout indicado y las establecerá en las distintas variables:

• Variable “constraintsFinal” de tipo ConstraintSet. Sacaremos las constraints del layout “card_expanded”.
• Variable “constraintsInitial” de tipo ConstraintSet. Sacaremos las constraints del layout “card_collapsed”.

Una vez que ya las tenemos, aplicamos los distintos ConstraintSet en función del estado de la misma (controlado por la variable “applyInitAnimation”) a la vista principal.

El método “beginDelayedTransition” es el encargado de hacer la animación cuando establezcamos las constraints al layout haciendo uso del método “applyTo” de ConstraintSet.

El código será el siguiente:

Sin más, ya tenemos implementados todos los elementos para nuestra animación. Podréis encontrar todo el código del proyecto en Github. Espero que te haya gustado.

Se ha realizado una estimación de que tan solo el 45% del tráfico de una página WEB es lícito, el resto es debido a bots, herramientas de piratería y spam. También se calcula que uno 30.000 sitios son vulnerados diariamente lo que se traduce en la importancia de implementar nuestro sitio de la manera lo más segura posible. De cómo poder realizarlo en WordPress vamos a tratar en este artículo.

Que existan mucho sitios WordPress vulnerados no es debido a la creencia de que esta tecnología sea insegura, es debida a fallos en la configuración por parte de los administradores.

Lo primero que se debería tener en cuenta es elegir bien los complementos a utilizar en nuestro proyecto, ya que de no hacerlo de su sitio oficial (WordPress.org), podríamos estar utilizando un plugin vulnerable con código malicioso, creado por un ciberdelincuente para realizar sus actividades malintencionadas. Esta sería una de las vulnerabilidades más presentes, pero también lo son nombres de usuario y contraseñas deducibles además de no mantener nuestro software debidamente actualizado.

Medidas a seguir para que nuestro sitio WordPress sea más seguro:

Realiza una copia de seguridad. Lo primero que tenemos que tener en cuenta es tener un respaldo, de esta manera tendríamos los archivos necesarios para poder replicar nuestro sitio nuevamente. Existen multitud de herramientas para poder realizar nuestra copia de seguridad de forma sencilla, simplemente haciendo una búsqueda en internet. Hay que tener muy en cuenta no hacer una copia de segurida parcial (solo de la base de datos), esta copia debe de ser completa para evitarnos importantes sustos.

Tener una contraseña segura. Teniendo una contraseña robusta tenemos una gran base para empezar a implementar las demás medidas de seguridad. Hay multitud de recomendaciones para tener una contraseña segura, como son incluir número y signos especiales, alternar mayusculas con minusculas pero la mas importante de todas es que sea lo más larga posible como por ejemplo una frase pero sin palabras clave (nombre, edad, años etc). WordPress contiene una herramienta que genera contraseñas seguras si se necesita que se puede encontrar dentro del perfil de usuario.

Nombres de usuario. La otra parte de la ecuación a la hora de autenticarse para acceder a nuestro sitio y así evitar que los ciberdelincuentes puedan acceder de manera maliciosa, es elegir bien el nombre de usuario, puesto que se deben de conocer ambos si se quiere acceder al panel de administración. Cuando se instala WordPress el nombre de usuario por defecto es admin algo que es sobradamente conocido por todo el mundo y que no se suele cambiar por comodidad, pero que estamos ofreciendo a alguien malicioso la mitad del acceso a nuestro sitio. Con lo cual es necesario cambiarlo, para ello se debe de elegir uno siguiendo los mismo criterios que para las contraseñas.

Controlar el contenido publicado. Es muy importante conocer el contenido de lo que publicamos en nuestra página, es de lógica no publicar código del que no se confíe plenamente en la fuente del mismo, puede contener código malicioso. Si permitimos a otros usuarios publicar en nuestro sitio se debe verificar el contenido de la publicación. Si se permiten comentarios no validarlos inmediatamente, puesto que pueden contener código incrustado que podría ser malicioso.

Roles de usuario. Hay que tener especial cuidado con los permisos que se le dan a los usuarios registrados, para que en caso de registrarse un alguien con malas intenciones no pueda hacer mucho daño. Las opciones son dentro del menú ajustes generales:

• -Suscriptor, tan solo administrar su perfil.

• -Colaborador, puede escribir publicaciones pero no publicarlas.
• Editor, puede escribir, publicar y administrar cuentas.
• Administrador, acceso completo al sitio.

De entre todas las posibilidades siempre se debe escoger la del mínimo privilegio posible con el que se pueda realizar las funciones que necesita cada usuario.

Comentarios spam. Es una práctica habitual y además buena práctica permitir comentarios, puesto que a los buscadores les gusta y nos será de gran utilidad a la hora de elevar puestos en ellos, pero hay que tener especial cuidado porque un ciberdelincuente los puede aprovechar para realizar acciones delictivas. Por lo que no se debe configurar nuestro sitio para que acepte comentarios de forma automatizada, siempre se debe de hacer de forma manual.

Limitar intentos de logging. Debe de limitarse la cantidad de veces que puede un usuario introducir usuario y contraseña con la intención de acceder al sistema, puesto que una práctica habitual de los delincuentes es realizar ataques de fuerza bruta. Este tipo de ataques tratan de conseguir acceso a base de probar de una forma extremadamente rápida multitud de contraseñas hasta que dan con la válida, todo realizado con un software programado a tal efecto. Si nosotros limitamos por ejemplo a 3 veces y un determinado tiempo esos intentos de accesos evitaremos esa práctica. Para realizarlo podemos utilizar los plugins Limit Login Attempts y Login LockDown.

Segundo factor de autenticación. El tener un segundo requisito para poder acceder al sistema, es una buena medida de seguridad, puesto que dificultan de manera exponencial

el que alguien pueda acceder o elevar privilegios sin que deba de tener dicho acceso. Una manera de hacerlo sería que una vez introducimos usuario y contraseña válido, se nos envía a nuestro teléfono móvil un mensaje con un código el cual tengamos que introducir para autenticarnos. Una forma de poder implementar este sistema en WordPress es con el repositorio de plugins para Google Authenticator que se puede descargar desde la siguiente URL.

Proteger pagina de inicio de sesión. Esta página es la puerta de entrada principal a nuestro sitio, con lo cual es lógico que le pongamos una protección extra. Esta protección se puede realizar implementando multitud de medidas, como pueden ser cambiarle el nombre, introducir un captcha o bloquear ciertas direcciones IP que pudieran intentar comprometerla, como se explica en el siguiente tutorial.

Utilizar métodos de cifrado. La información importante como puede ser toda la relacionada con los usuarios debe de estar debidamente cifrada, para que el caso de que un pirata informático tuviera acceso al sistema, no pueda leer la información en ella contenida. Dependiendo del tipo de base de datos que utilicemos tendría una forma u otra en este tutorial se propone un método en el caso de que nuestra base de datos sea MySQL.

Alojamiento WEB. No se suele pensar que uno de los mayores peligros de nuestro sitio pueda ser la empresa de hosting que elegimos. Por ejemplo si eligiéramos un alojamiento barato puede conllevar a que la tecnología utilizada en los servidores sea antigua u obsoleta lo cual perjudica seriamente la seguridad. La seguridad en definitiva cuesta dinero si nuestro alojamiento es demasiado barato seguramente sea en detrimento de la misma. A la hora de elegir el hosting debemos de informarnos de las medidas de seguridad y la tecnología que se utiliza antes de contratar el servicio.

Permisos en los archivos. Los archivos en los servidores al igual que los PC contienen un serie de permisos (acceder, leer y escribir), para dar estos permisos debemos seguir el principio de mínimo privilegio, para que en caso de que un usuario indebido acceda al sistema no pueda acceder a los archivos y comprometer la información.

Configurando la seguridad:

Menú cuentas de usuario:

En la pestaña nombre de usuario de WP hay que asegurarse de no configurar usuarios con el nombre de admin.

Menú de acceso de usuario:

1. En la pestaña Bloqueo de inicio de sesión, habilite el Bloqueo de inicio de sesión.
2. En la pestaña Forzar sesión, active Force WP User Logout.

Menú de registro de usuario:

1. En la pestaña Aprobación manual, habilite la aprobación manual de nuevos registros.

2.En la pestaña Captcha de registro, habilite Captcha en la página de registro.

Seguridad de la base de datos:

1.En la pestaña Prefijo de DB, asegúrese de no estar usando el wp_ predeterminado como prefijo de su tabla.

2.En la pestaña Copia de respaldo de BD, habilite copias de seguridad automáticas.

Seguridad del sistema de archivos:

1.En la pestaña Permisos de archivos realice las acciones recomendadas.

2.En la pestaña Edición de archivos PHP, deshabilite la capacidad de editar archivos PHP.

3.En la pestaña Acceso a archivos WP, evite el acceso a los archivos de instalación predeterminados de WP.

Firewall:

1.En la pestaña Reglas básicas del firewall, habilite la protección básica del firewall.

2.Habilite el acceso de bloque al archivo debug.log.

3.En la pestaña Reglas adicionales del firewall, habilitar Deshabilitar vistas de índice.

4.Habilite el Deshabilitar rastreo y seguimiento.

5.Habilitar la publicación de comentarios de proxies prohibidos.

6.Habilite el Habilitar filtro de cadena de caracteres avanzado.

7.En la pestaña 6G Blackwall Firewall Rules, marque la opción Habilitar protección Firewall 6G.

8.En la pestaña Bots de Internet, habilite la opción Bloquear Googlebots falsos.

9.En la pestaña Evitar enlaces activos, habilite la opción Prevenir interconexión de imágenes.

10.En la pestaña Detección 404, marque la opción Habilitar Detección y Bloqueo de IP 404.

Protección Contra fuerza bruta:

1.En la Prevención de fuerza bruta basada en cookies, realice la prueba de cookies para asegurarse de que su sitio pueda usar este método de protección. Si puede, ingrese una Palabra secreta y luego active Prevención de ataque de fuerza bruta en esta pestaña. Si no puede, vaya a la página Cambiar nombre de inicio de sesión.

2.En la pestaña Login Captcha, habilite cualquiera de los captchas que quiera usar.

3.En la pestaña Honeypot, marque la opción Habilitar Honeypot en la página de inicio de sesión.

Prevención contra SPAM:

1.En la pestaña Comment Spam, marque la opción para habilitar Captcha On Comment Forms. Marque la opción Bloquear Spambots para no publicar comentarios.

2.En la pestaña de Supervisión de IP de SPAM de correo electrónico, marque la opción para habilitar Bloqueo automático de IP de comentario de SPAM. Te recomiendo que ingreses un número bajo en el cuadro Número mínimo de comentarios SPAM.

Conclusiones.

Actualmente una gran cantidad de sitios están creados con WordPress, eso puede ser malo desde el punto de vista de seguridad, puesto que los piratas informáticos estarán más interesados en romperla, pero como en las demás tecnologías si cuidamos su configuración conseguiremos ponérselo mucho más difícil, ya que como se suele decir la seguridad absoluta no existe pero si unos valores de la misma bastante razonables, espero que estas recomendaciones os sean de gran utilidad.

Referencia.

WordPress Security 2017 for Webmasters. Dr Andy Williams. https://www.amazon.it/Wordpress-Beginners-2017-Step-Step-ebook/dp/B01M7YERUP

En efecto, gracias a la documentación, foros de soporte, y recursos formativos, no necesitamos más que un editor de código y una selección adecuada de elementos gráficos para poner a punto nuestro proyecto creado con WordPress y scorrespondiente tema de diseño y funcionalidades básicas.

De todos modos, en el mundo del desarrollo frontend nos encontramos con posibilidades importantes de automatización para el despliegue de acciones durante el proceso de desarrollo que nos permitirán agilizar el trabajo ahorando tiempo en diferentes tareas, y evitar realizar trabajos repetitivos y que aportan poco valor al propio desarrollo.

Una de esas herramientas es Gulp, y es la que centrará el proceso que vamos a explicar en el siguiente artículo.

¿Qué es Gulp?

Gulp es un sistema construído en JavaScript que permite tomar archivos de origen con instrucciones y transformarlos en versiones optimizadas a nuestro antojo, todo ello en cuestión de segundos.

No no extenderemos aquí en el proceso de instalación de Gulp.js y nos remitiremos a la documentación oficial de la herramienta donde podremos conocer todos los detalles.

Tan solo apuntar que para que podamos ejecutar Gulp.js, necesitaremos previamente haber completado la instalación de Node.js si no lo hubiéramos hecho antes en nuestro equipo.

En el caso que nos ocupa podremos automatizar gracias a Gulp algunas tareas como las siguientes:

• Crear y actualizar nuevos ficheros de plantilla PHP para nuestro tema
• Optimizar las imágenes del diseño
• Compilar ficheros SCSS mediante preprocesadores en un nuevo fichero CSS
• Compilar ficheros JavaScript depurándolos y minificándolos
• Actualizar el navegador en el que estamos trabajando para visualizar los cambios en tiempo real

Configurando el entorno de desarrollo

Necesitaremos disponer de los ficheros de origen para nuestro tema que nos permitirán disponer de los fichero e imágenes sin modificar, para después ser entregados en una suerte de construcción final con los archivos definitivos de nuestro tema.

En este caso, nos resultará interesante trabajar con dos directorios diferenciados. Uno para los ficheros de origen y configuración, y otro para el resultado final, con el fin de que podamos desplegar los cambios realizados utilizando como fuente solamente ese directorio final de archivos definitivos.

Todo ello podría estar englobado dentro de un directorio /themefiles donde podremos añadir toda la información de origen y un directorio /themebuild donde podremos añadir los archivos resultantes del proceso.

Una estructura de directorios interesante para los archivos de origen que podemos utilizar es la siguiente:

• template - para los ficheros PHP originales del tema
• images - para los archivos de imagen
• scss - para los archivos SCSS originales
• js - para los ficheros JS necesarios

Entre esta misma información de origen como también pueden ser las dependencias de Gulp que necesitaremos instalar para arrancar los correspondientes procesos.

Instalando dependencias

Para instalar las dependencias necesarias podemos navegar hasta el directorio /themefiles y ejecutar la siguiente concatenación de órdenes desde la terminal.

npm install --save-dev autoprefixer browser-sync css-mqpacker cssnano gulp gulp-concat gulp-deporder gulp-imagemin gulp-newer gulp-postcss gulp-sass gulp-strip-debug gulp-uglify gulp-util postcss-assets

Enlace a Gist

A continuación veremos con más detalle cada una de las dependencias y su objetivo.

Configuración de Gulp

Uno de los pasos más importantes del proceso de preparación es la configuración de Gulp. Tendremos que crear dentro del directorio de origen un archivo gulpfile.js con las variables deseadas.

Este puede ser un buen ejemplo para arrancar:

// Configurar Gulp.js
'use strict';

const

// directorios origen y finales
dir = {
src : 'src/',
build : '/themebuild/'
},

// Gulp plugins
gulp = require('gulp'),
gutil = require('gulp-util'),
newer = require('gulp-newer'),
imagemin = require('gulp-imagemin'),
sass = require('gulp-sass'),
postcss = require('gulp-postcss'),
deporder = require('gulp-deporder'),
concat = require('gulp-concat'),
stripdebug = require('gulp-strip-debug'),
uglify = require('gulp-uglify')
;

// Browsersync
var browsersync = false;

// PHP ajustes
const php = {
src : dir.src + 'template/**/*.php',
build : dir.build
};

// archivos PHP
gulp.task('php', () => {
return gulp.src(php.src)
.pipe(newer(php.build))
.pipe(gulp.dest(php.build));
});

Enlace a Gist

En este archivo de configuración estamos definiendo las carpetas por defecto, los módulos que deben cargarse y una tarea de actualización de los ficheros PHP del directorio final de construcción del theme.

Si creamos nuevos archivos PHP en el directorio de origen y hacemos correr el siguiente comando, veremos cómo los ficheros de origen se copian el directorio final.

gulp php

Optimización de imágenes

Añadiendo las siguientes órdenes en nuestro fichero gistfile.js podremos añadir un trabajo de optimización de imágenes.

// imagen ajustes
const images = {
src : dir.src + 'images/**/*',
build : dir.build + 'images/'
};

// imagen procesado
gulp.task('images', () => {
return gulp.src(images.src)
.pipe(newer(images.build))
.pipe(imagemin())
.pipe(gulp.dest(images.build));
});

Enlace a Gist

La orden que debemos utilizar desde la terminal para ejecutar este proceso es la siguiente, actualizando así las imágene en el directorio de construcción final:

gulp images

Compilar SCSS

Si trabajamos con SCSS, y concretamente con Sass para procesar nuestras hojas de estilos, podremos automatizar esta tarea, y no depender más de cualquier otro software. En efecto, no podemos procesar directamente este tipo de preprocesadores directamente desde WordPress, motivo por el cual, tendremos que preparar con antelación al fichero style.css para su inclusión entre los archivos finales.

// CSS ajustes
var css = {
src : dir.src + 'scss/style.scss',
watch : dir.src + 'scss/**/*',
build : dir.build,
sassOpts: {
outputStyle : 'nested',
imagePath : images.build,
precision : 3,
errLogToConsole : true
},
processors: [
require('postcss-assets')({
loadPaths: ['images/'],
basePath: dir.build,
baseUrl: '/wp-content/themes/wptheme/'
}),
require('autoprefixer')({
browsers: ['last 2 versions', '> 2%']
}),
require('css-mqpacker'),
require('cssnano')
]
};

// CSS procesado
gulp.task('css', ['images'], () => {
return gulp.src(css.src)
.pipe(sass(css.sassOpts))
.pipe(postcss(css.processors))
.pipe(gulp.dest(css.build))
.pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop());
});

Enlace a Gist

Con esta tarea automatizada de Gulp, podremos gestionar directamente en una sola orden las siguientes tareas automatizadas:

• Preparar las imágenes en primer lugar
• Compilar el código Sass en el archivo de origen
• Generar el archivo style.css en el directorio final
• Preparar la ejecución del refresco automático en LiveReload

Para ello tendremos simplemente que ejecutar la siguiente orden desde la terminal:

gulp css

Compilación de JavaScript

Siguiendo los mismos pasos del proceso anterior podremos lanzar tareas automatizadas para procesar los ficheros JS que necesitemos en el tema WordPress con el que estamos trabajando.

Conseguiremos con el siguiente ejemplo procesar todos los archivos JS incluídos, concatenar los archivos en uno solo y minificar el resultado exportándolo en el directorio de construcción final.

Las líneas que deberemos añadir al archivo de configuración son las siguientes:

// JavaScript ajustes
const js = {
src : dir.src + 'js/**/*',
build : dir.build + 'js/',
filename : 'scripts.js'
};

// JavaScript procesado
gulp.task('js', () => {

return gulp.src(js.src)
.pipe(deporder())
.pipe(concat(js.filename))
.pipe(stripdebug())
.pipe(uglify())
.pipe(gulp.dest(js.build))
.pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop());

});

Enlace a Gist

Para poder lanzar las tareas tendremos que ejecutar el siguiente comando:

gulp js

Si queremos agilizar los procesos anteriormente mencionados y hacer correr cada una de las secciones, podemos definir un nuevo comando que incluya todas las órdenes.

Debemos añadir estas órdenes al final del fichero gulpfile.js

// recopilar acciones
gulp.task('build', ['php', 'css', 'js']);

Enlace a Gist

De este modo podremos añadir un solo comando para hacer correr las tareas relacionadas con ficheros CSS, JS e imágenes.

gulp build

Visualización y refresco automático

Uno de los pasos finales y posiblemente más significativos de todo el proceso, es poder observar los resultados del trabajo directamente en el navegador.

En este primer proceso de configuración podremos lanzar la visualización de los cambios en el navegador cuando realmente se hayan producido, sin tener que salir del editor de código, hacer click en el navegador o accionar el teclado.

// Browsersync ajustes
const syncOpts = {
proxy : 'localhost',
files : dir.build + '**/*',
open : false,
notify : false,
ghostMode : false,
ui: {
port: 8001
}
};

// browser-sync
gulp.task('browsersync', () => {
if (browsersync === false) {
browsersync = require('browser-sync').create();
browsersync.init(syncOpts);
}
});

Enlace a Gist

Ahora podemos añadir una tarea de observación o vigilancia para lanzar Browserwync cuando sea necesario, es decir, cuando se hayan observado cambios en alguno de los ficheros.

Esta información deberá incluirse en el archivo de configuración gulpfile.js en el que venimos trabajando desde el inicio del artículo.

// vigilar archivo
gulp.task('watch', ['browsersync'], () => {

// cambios en archivos
gulp.watch(php.src, ['php'], browsersync ? browsersync.reload : {});

// cambios en imagen
gulp.watch(images.src, ['images']);

// cambios CSS
gulp.watch(css.watch, ['css']);

// cambios JavaScript 
gulp.watch(js.src, ['js']);

});

Enlace a Gist

Finalmente podemos añadir una tarea completa que nos complete las acciones anteriores con la observación de los cambios realizados de manera constante para ejecutar nuevas tareas.

// tareas Gulp por defecto
gulp.task('default', ['build', 'watch']);

Enlace a Gist

Simplemente deberemos ejecutar la tarea gulp en la terminal para accionar el resultado final del proceso que nos permita concatenar las tareas automatizadas, más la vigilancia mientras haya cambios y el lanzamiento en el navegador del resultado final.

gulp

Conclusiones

Hemos tratado de dar algunos ejemplos interesantes para poder iniciarnos en las tareas de automatización de tareas en el desarrollo de temas para WordPress.

Es importante en este caso destacar que no sólo nos podemos quedar aquí, existen numerosos repositorios que nos permitirán introducir nuevas tareas o crear acciones más complejas si las necesitamos.

Además, a medida que nos vayamos familiarizando con esta metodología podremos ir creando nuestros propios archivos de configuración de automatizaciones y personalizar al completo el flujo de trabajo.

Este artículo ha sido escrito por Javier Rodríguez y publicado originalmente en el blog de Solid GEAR.

Cuando realizamos una página web o una aplicación híbrida, una de las primeras cosas que notamos es que nuestro código CSS suele complicarse y desorganizarse con facilidad a medida que el diseño se complica. CSS, sobre todo en sus primeras versiones, carece de herramientas propias para facilitar la organización y reutilización de propiedades. Es ahí donde surgen los preprocesadores CSS para ayudarnos con esa tarea. En esta entrada en concreto, hablaremos de Sass y mostraremos algunas de sus principales funcionalidades.

¿Qué es un preprocesador CSS?

Un preprocesador CSS es simplemente una herramienta que nos permitirá escribir nuestros estilos en un lenguaje específico y que luego, tras un proceso de compilación, generará unos ficheros CSS con los estilos equivalentes escritos en CSS. Este lenguaje inicial, el cual será diferente según el preprocesador elegido, suele disponer de útiles para facilitar la reutilización y modularización del código.

Así, el uso de un preprocesador es transparente a la página, ya que simplemente escribiremos nuestro código usando el lenguaje del procesador, pero luego en nuestro código HTML enlazaremos la hoja de estilos como siempre.

Existen multitud de procesadores diferentes, aunque probablemente los más conocidos sean Sass y Less. Ambos disponen de funcionalidades parecidas y, aunque en esta entrada hablaremos de Sass, Less (y probablemente muchos otros preprocesadores) son también una buena opción.

Sass

Sass es un preprocesador CSS escrito originalmente en Ruby, aunque actualmente existen otras implementaciones disponibles, como por ejemplo en JavaScript, como se puede ver en su página oficial. Existen dos sintaxis disponibles. Nosotros nos centraremos en la sintaxis SCSS (Sassy CSS) que emplearemos en ficheros .scss.

SCSS es un lenguaje montado sobre el estándar CSS. Eso significa que un fichero SCSS que contenga sólo CSS compilaría sin problemas. Esto facilita enormentente la transición de aplicaciones existentes en CSS a SCSS, ya que inicialmente simplemente tendríamos que compilar los ficheros SCSS con el mismo contenido que los CSSs y usar el CSS generado como hasta entonces.

¿Cómo instalar Sass?

En nuestro caso instalaremos la distribución de JavaScript ya que solemos disponer de Node instalado en nuestros equipos y aprovecharemos npm para ello. Simplemente este comando instalará la última versión disponible.

npm install -g sass

Para compilar todos nuestros ficheros .scss a CSS podremos usar el siguiente comando en el que pondremos la ruta hasta la carpeta en la que están los SCSS y la ruta en la que queremos generar la misma estructura pero en ficheros CSS.

sass ruta/hasta/carpeta/scss:ruta/hasta/carpeta/css

Veamos ahora algunas de las principales ventajas que obtendremos con Sass.

Mejor organizació

Sass permite la anidación de unos selectores dentro de otros. Por ejemplo, si en CSS tenemos unos estilos para el selector nav y otros para nav .active podemos meter .active entro del bloque de nav (a la vez que por ejemplo añadimos estilos a nav). Queda más claro viendo el siguiente ejemplo en el que podemos ver cómo sería el fichero CSS tras compilar ese SCSS.

nav {
 font-size: 2em;

.active {
font-weight: bold;
}
}

nav {
 font-size: 2em;
}
nav .active {
 font-weight: bold;
}

Existe otra forma de anidar nuestros estilos también cuando se usa en el selector > para buscar un elemento directamente bajo otro. Por ejemplo para el selector nav > .active lo pondríamos de esta manera:

nav {
 font-size: 2em;
 > active {
 font-weight: bold;
 }
}

nav {
 font-size: 2em;
}
nav > active {
 font-weight: bold;
}

También podemos anidar el uso de un selector y del mismo aplicando algún modificador adicional. Por ejemplo podríamos anidar a:hover dentro de a, ya que & tiene el significado del selector del bloque actual.

a {
 cursor: pointer;
 &:hover {
 color: blue;
 }
}

a {
 cursor: pointer;
}
a:hover {
 color: blue;
}

Un caso particular en cuanto a cómo anidar nuestros selectores es el de las media queries. En este caso, en lugar de envolver con @media al selector al que aplica, se introduce dentro de él. Este cambio hace que sea más legible ver cómo cambian las propiedades en función de las restricciones indicadas en la media query.

.card {
 width: 50%;
 @media only screen and (max-width: 768px) {
 width: 100%;
 }
}

.card {
 width: 50%;
}
@media only screen and (max-width: 768px) {
 .card {
 width: 100%;
 }
}

Por último, también podemos agrupar propiedades de la misma familia (como ocurre por ejemplo con margin, padding, font...) en el que todas tienen una raíz común. En este caso al anidar, para indicar que es una propiedad, usaremos : al final del prefijo común.

p {

 font: {
 size: 2em;
 weight: bold;
 }
}

p {
 font-size: 2em;
 font-weight: bold;
}

Haciendo uso de todos estos tipos de anidación reforzamos que el equipo agrupe los selectores y propiedades haciendo un código más legible y más organizado.

Reutilización de código

Seguramente la funcionalidades que más nos ayudarán para mejorar la mantenibilidad de nuestro código son aquellas que nos permitan la reutilización de partes del mismo. Sass dispone de diferentes elementos para ello comos por ejemplo variables, mixins o la herencia.

Variables

Al igual que en otros lenguajes una variable simplemente almacenará un valor que podremos usar en otras partes de nuestro SCSS. La variable puede almacenar diferentes tipos de valores, que se corresponden con los que usaríamos en CSS: números, colores, dimensiones... La definición de una variable comienza con $ y su uso es tan sencillo como en el siguiente ejemplo.

$primary-color:black;
$base-font-size: 1em;

body {
background-color: $primary-color;
font-size: $base-font-size;
}

.card {
color: $primary-color;
background-color: invert($primary-color);
font-size: $base-font-size * 1.2;
}

body {
 background-color: black;
 font-size: 1em;
}

.card {
color: black;
background-color: white;
font-size: 1.2em;
}

Si nos fijamos en el ejemplo hemos definido un par de variables para definir un tamaño de fuente y color base para nuestra web y a partir de ellos vamos generando los estilos. De esta forma si modificamos por ejemplo el color base, este se actualiza acordemente en todos los estilos asociados. En el ejemplo se puede ver también como podemos hacer uso de operadores matemáticos e incluso de funciones (en ese caso invert que calcula el color opuesto). Si nos hace falta podremos incluso implementar nuestras propias funciones.

Es importante tener en cuenta que, aunque CSS ya dispone de variables, e incluso puede realizar cálculos sencillos, al hacer uso de ellos necesitamos que el navegador empleado tenga una versión en la que ya se soporte dichas funcionalidades. Este problema no ocurre en SCSS ya que la compilación se realiza antes de desplegar nuestra web, por lo que el CSS generado ya no incluirá las variables o funciones, y por ello será transparente al navegador.

Mixins

Un mixin es simplemente un conjunto de propiedades que podremos aplicar en diferentes lugares de nuestro SCSS. Con ellos podremos centralizar nuestra lógica y que nuestro evitar código duplicado en distintos selectores. Además, los mixins admiten parámetros de entrada, por lo que podremos hacer uso de ellos para crear mixins genéricos y personalizar cada estilo cuando hagamos uso de ellos.

El mixin simplemente se define con la palabra clave @mixin tras la cual definiremos el nombre del mixin y sus variables de entrada si es que tiene. A la hora de usarlo, emplearemos @include con los parámetros a usar, como se hace en el siguiente ejemplo.

@mixin custom-bar ($background-color, $font-color, $bar-height){
 background-color: $background-color;
 color: $font-color;
 height: $bar-height;
 width: 100%;
}

nav {
@include custom-bar(black, white, 2em);
margin-bottom: 1em;
}

footer {
@include custom-bar(black, lightgray, 1.5em);
font-size: 0.8em;
}

nav {
 background-color: black;
 color: white;
 height: 2em;
 width: 100%;
 margin-bottom: 1em;
}

footer {
background-color: black;
color: lightgray;
height: 1.5em;
width: 100%;
font-size: 0.8em;
}

Herencia

Existe otra forma similar a los mixins para aplicar grupo de propiedades a diferentes selectores, que es la herencia. En la herencia simplemente definiremos las propiedades a heredar dentro de un bloque precedido con %, y a la hora de usarlo emplearemos la palabra clave @extend.

%custom-bar {
 background-color: black;
 color: white;
 height: 2em;
 width: 100%;
}

nav {
@extend %custom-bar;
margin-bottom: 1em;
}

footer {
@extend %custom-bar;
font-size: 0.8em;
}

footer, nav {
 background-color: black;
 color: white;
 height: 2em;
 width: 100%;
}

nav {
margin-bottom: 1em;
}

footer {
font-size: 0.8em;
}

Si comparamos la salida generada con un mixin a la generada con el uso de la herencia, podemos ver cómo el código generado con la herencia parece más compacto y menos repetido. Sin embargo, la herencia tiene la limitación de que no admite variables de entrada.

Modularización

A medida que se complica nuestro diseño podremos dividir nuestros estilos en diferentes ficheros y cargarlos en otros ficheros si así lo necesitamos. Simplemente poniendo @import 'ruta-hasta-el-fichero.css', cargaremos toda la información de ese SCSS y sería lo mismo que si tuviéramos el contenido de ese fichero pegado en ese punto.

Eso nos ayuda no sólo para una mejor organización modularizando nuestros estilos, sino que también podremos reusar un mismo módulo en diferentes ficheros. Un caso típico es tener un fichero con las configuración base de nuestra web (con los colores, tamaños...) y cargarlos en todos los ficheros para aplicar los estilos en base a ello.

Este es el caso del popular framework de frontend Bootstrap. Este producto está escrito en SASS y dispone de un fichero SCSS de variables, con el que configura diferentes aspectos claves de la visualización de cada uno de los elementos. Gracias a ello, podremos cargar el fichero principal de Bootstrap en nuestro SCSS (tras habernos descargado los fuentes SCSS de bootstrap) y hacer una sobrecarga de alguna de las propiedades que queramos antes de cargar el fichero SCSS principal. Así dispondremos de un Bootstrap completamente personalizado.

// Sobreescribir variables de Bootrap para personalizarlo
$body-bg: lightgray;
$body-color: brown;
$font-family-base: "Times New Roman", Times, serif;
$headings-line-height: 1.8;

// Importar Bootstrap
@import "path-to-bootstrap-folder/scss/bootstrap";

Conclusiones

Hemos visto como el uso de un preprocesador CSS nos ayuda a organizar mejor nuestro código CSS. Al estar menos duplicado, cumpliremos mejor el principio DRY (Don't Repeat Yourself) y seremos más rápidos tanto al escribirlo por primera vez cómo al realizar futuras modificaciones. Aunque en esta entrada nos hemos centrado en Sass, podemos obtener resultados similares con otras herramientas parecidas, así que os animamos a emplear esta u otra para disfrutar de todas sus ventajas.

En el presente artículo vamos a tratar el estándar de verificación de seguridad en aplicaciones (ASVS de sus siglas en inglés) creado por OWASP. Este estándar reúne unos controles de seguridad funcionales necesarios para diseñar, desarrollar y testear aplicaciones WEB.

ASVS tiene como objetivo ayudar a los desarrolladores a crear aplicaciones más seguras y a su mantenimiento y crear un consenso entre proveedores de productos de seguridad y consumidores.

Define tres niveles de verificación de seguridad:

-Nivel 1 dirigido a todo tipo de software.

-Nivel 2 para aplicaciones que manejan datos sensibles.

-Nivel 3 a utilizar en aplicaciones críticas como las que manejan datos médicos o transacciones bancarias.

Dependiendo de la industria o el sector al que se vaya a dedicar la aplicación se debe de aplicar un nivel u otro como por ejemplo, una WEB de venta al por menor contiene una amenaza específica puesto que tiene información de pagos ya que realizaría transacciones financieras por lo tanto habría que aplicar el nivel 1 puesto que es aplicable a todas las aplicaciones, nivel 2 reservado a aplicaciones con cantidades pequeñas o moderadas de funcionalidad de datos y nivel 3 por contener sistema de pagos de punto de venta.

Los controles que tendríamos que realizar a nuestras aplicaciones serían:

1. Arquitectura y diseño:

1. Comprobar que todos los componentes de la aplicación se definen en función de las funciones de negocio.

2. Comprobar que todos los controles de seguridad tienen una implementación centralizada.

3. Comprobar que los componentes están separados unos de otros mediante controles de seguridad.

4. Comprobar que todos los componentes de la aplicación están libres de vulnerabilidades conocidas.

2. Verificación de autenticación:

5. Comprobar que todas las páginas y recursos requieren autenticación menos las que deban de estar públicas.

6. Comprobar que los campos de credenciales no reflejen las contraseñas de usuario.

7. Comprobar que los campos de contraseña fomentan utilizar frases como autenticación.

8. Comprobar que la funcionalidad de cambio de contraseña requiere de la contraseña anterior y contiene un campo de confirmación.

9. Comprobar que las contraseñas almacenadas se a utilizado un mecanismo de hashing esto es que no están almacenadas en texto plano.

10. Comprobar que las credenciales viajan cifradas.

11. Comprobar que no se utilizan contraseñas por defectos en la aplicación.

12. Comprobar que existen medidas para bloquear el uso de contraseñas débiles.

13. Comprobar que se utiliza doble factor de autenticación.

14. Comprobar que las interfaces de administración no son accesibles a cualquier usuario.

3. Verificación de gestión de sesiones:

1. Comprobar que las sesiones se invalidan cuando el usuario cierra la sesión.

2. Comprobar que se invalidan las sesiones después de un periodo de inactividad.

3. Comprobar que el identificador de sesión no se muestra en la URL.

4. Comprobar que la aplicación limita el número de sesiones concurrentes.

4. Verificación del control de acceso:

1. Comprobar que existe el principio de mínimo privilegio.

2. Comprobar que el acceso a registros sensibles está protegido.

3. Comprobar que los atributos de usuario no pueden ser manipulados por usuarios finales.

4. Comprobar que las acciones de control de acceso son registradas.

5. Verificación para manejo de entrada de datos maliciosa:

1. Comprobar que el entorno de ejecución no es susceptible a desbordamiento de buffer.

2. Comprobar que se aplican rutinas de entradas del lado del servidor.

3. Comprobar que todas as consultas a bases de datos están parametrizadas y no son susceptibles de SQL injection.

4. Comprobar que la aplicación no es susceptible de inyección LDAP.

5. Comprobar que la aplicación contenga defensas contra ataques de contaminación de parámetros HTTP.

6. Verificación para la criptografía en el almacenamiento:

1. Comprobar que el generador de números aleatorios es fiable.

2. Comprobar que los módulos criptográficos operen según políticas de seguridad publicadas.

3. Comprobar que existe una política explícita para el manejo de claves criptográficas.

7. Verificación de gestión y registro de errores.

1. Comprobar que no se registra información confidencial si no es necesaria.

2. Comprobar que toda la información registrada se gestiona de forma segura.

3. Comprobar que los registros de bitácoras poseen un ciclo de vida útil lo más corta posible.

4. Comprobar que los registros de seguridad no puedan ser manipulados con acceso no autorizado.

8. Verificación de protección de datos:

1. Comprobar que los formularios de datos sensibles tengan desactivada la función de autocompletar.

2. Comprobar que en la aplicación existe un mecanismo de borrado de datos sensibles transcurrido el tiempo definido por la política de retención.

3. Comprobar que los datos almacenados en el cliente no contengan información personal identificable.

9. Verificación de seguridad en las comunicaciones:

1. Comprobar que puede construirse la cadena de confianza desde una Autoridad de Certificación para un certificado TLS del servidor.

2. Comprobar que se utiliza TLS para todas las comunicaciones.

3. Comprobar que existe una única implementación estándar de TLS.

4. Comprobar que se utilizan únicamente algoritmos y protocolos de seguridad en comunicaciones fuertes.

5. Comprobar que la configuración de TLS está en línea con las mejores prácticas actuales.

10. Verificación de configuración de seguridad HTTP:

1. Comprobar que el servidor de aplicaciones está convenientemente endurecido en la configuración preestablecida.

2. Comprobar que en toda respuesta HTTP contiene un conjunto de caracteres seguros.

3. Comprobar que la aplicación tan solo acepta métodos de solicitud HTTP necesarios como GET y POST.

11. Verificación para la lógica de negocio:

1. Comprobar que el flujo de la lógica de negocio es secuencial y en orden.

2. Comprobar que la lógica de negocio incluye límites para detectar y evitar ataques automatizados.

Conclusión.

No solo se hace necesario a la hora de crear nuestras aplicaciones tener especial cuidado hablando desde el punto de vista de la seguridad de la misma, en sus fases de diseño y codificación, sino que también es muy importante tener un método de testeo de la misma metódico y fuerte, para minimizar en la manera de lo posible una vulnerabilidad que pueda ser utilizada por un cibercriminal, ya que la seguridad total no existe, al menos debemos de testear nuestra aplicaciones con el fin de que se produzcan el menor número de fallos desde el punto de vista de la seguridad.

Piensa mal y acertarás codificando de una manera más segura, aunque la seguridad completa no existe.

Referencia.

Estándar de Verificación de Seguridad en aplicaciones 3.0.1

Versión Abril de 2017

En el anterior post ya vimos cómo pasar nuestro modelo al XML con el fin de eliminar la lógica de pintado / seteo de variables en las clases. En esta ocasión vamos a profundizar un poco más y veremos las demás ventajas y potencial que nos ofrece esta librería. Sin más, !vamos a ello!

Vinculando eventos de UI

Tenemos dos formas de manejar eventos:

Referencias a métodos

Los eventos pueden vincularse directamente con los métodos del manejador o controlador que los tenga, similar a la forma en que android:onClick asigna un método en una actividad pero aportando una ventaja: los fallos se verán en tiempo de compilación. Si definimos interfaces que no coinciden, el fallo lo veremos al compilar y no posteriormente (no funcione el click, crashes, etc). Los pasos que tenemos que seguir son:

• Definimos nuestro método en la propia Activity o en una clase Handler aparte. Dicha definición será básica, por lo que sólo recibirá un parámetro de tipo View (ya que haremos el onClick).

• Definimos la variable en el XML.

• Establecemos el onClick siguiendo la siguiente nomenclatura: android:onClick=”@{NombreVariable::nombreMetodo}”

• Establecemos valor en la variable “detailActivityHandler”.

Vinculando receptores

Mediante el uso de lambdas podemos establecer métodos que reciban parámetros más complejos y posteriormente capturar los eventos desde el XML. Los pasos a seguir son:

• Definimos el método.

• Definimos la variable en XML (como en el caso anterior de “Referencias a métodos”).
• Hacemos uso de la expresión lambda para enviar el evento desde XML.

• Establecemos valor en la variable “detailActivityHandler”. (Igual que en “Referencias a métodos” ).

Ya sea usando uno u otro, DataBinding proporciona un nexo de enlace entre nuestros eventos de UI y los métodos en las clases por lo que es una fuerte herramienta para ahorrar código de las vistas.

!Cuidado con lo que hacemos!

Sin embargo, esta forma de referenciar métodos debe usarse con cabeza y no incluir métodos muy complejos o con muchos parámetros ya que conseguiremos empeorar la lectura y comprensión de nuestro código de forma muy notable.

Comprobaciones con los nulos

Si queremos establecer un valor u otro en función de si nuestro objeto es nulo o no, podemos usar el operador “??”

Si “androidVersion.description” es null pintará lo que tenga definido en strings.xml en “detail__empty_description”.

Esta expresión es equivalente a:

Includes

Para poder pasar variables desde un XML a otro que tiene la etiqueta <include> es necesario hacer uso de la propiedad “bind:nombreDeLaVariable=@{nombreDeLaVariable}” y además, tienen que tener el mismo nombre en ambos XML.

Por ejemplo, tenemos la variable definida como “androidVersion” en nuestro XML llamado “activity_detail.xml” y en nuestro XML “view_description.xml” de tal forma:

Además, tenemos en “activity_detail.xml” también una etiqueta <include> incluyendo el layout “include_description.xml” que contiene un layout con un TextView donde pintaremos una propiedad de dicha variable.

Para que nos funcione, debemos hacer los siguientes pasos:

• Dar un id a nuestra etiqueta include.
• Establecer una propiedad llamada bind:androidVersion=@{androidVersion}
• Ya podemos establecer en el TextView la propiedad que necesitemos de nuestra variable.

De tal forma nuestro include quedaría:

En cuanto a nuestro código en DetailActivity.kt

Y en nuestro XML include_description.xml:

Ejemplo con cambios de modelo (Observable)

Como ya comentamos en el post anterior, existe la posibilidad de vincular nuestro modelo a nuestra vista con la opción de que se actualice la UI automáticamente ante cambios en el mismo. Los pasos que hay que seguir para implementarlo son:

Importante: Nuestro código XML no sufrirá ningún cambio si nuestro modelo es Observable o no.

• Nuestro modelo tiene que extender de Observable.

• Para establecer los parámetros que tendrán la posibilidad de actualizarse automáticamente, los marcaremos con la anotación @Bindable. De esta forma estarán disponibles en nuestra clase autogenerada BR.
• Para los parámetros que tengan dicha anotación, estableceremos un set y después de establecer el valor, llamaremos al método notifyPropertyChanged() y le pasaremos el id de la clase BR. De esta forma informaremos a la UI para que se actualice automáticamente sin que tengamos que ponerlo en nuestra Activity o Fragment repetitivamente.

• Ahora simplemente estableceremos el valor de nuestro modelo y la UI se actualizará automáticamente.

Para el caso de que tengamos una lista observable simplemente debemos establecer el tipo a ObservableArrayList<AndroidVersionModel> y añadir o eliminar elementos a la misma.

No lo tiene todo… :,(

Existen una serie de propiedades que no podemos usar en nuestro XML con DataBinding, estas propiedades son:

• this
• super
• new

En resumidas cuentas, DataBinding nos aporta otra herramienta para evitar mucho código repetitivo en las clases y que meramente es usado para actualizar valores, establecerlos, etc en la UI. Como siempre mantengo, se debe usar con cabeza y no abusar de esta potente librería que nos puede simplificar el desarrollo de UI de forma considerable. Espero que os haya gustado.

Cada vez utilizamos más WooCommerce como núcleo en el desarrollo de nuestros proyectos con WordPress.

Atrás quedaron los tiempos en los que crear una web corporativa con una sección de noticias y un formulario de contacto era todo un reto. Cada vez más, los requerimientos de los proyectos web que encargan nuestros clientes son mayores, se solicitan más funcionalidades y la compra online de productos y servicios es un elemento a tener en cuenta.

Por este motivo, WooCommerce como sistema de venta online con WordPress, está convirtiéndose en la base que sostiene multitud de proyectos.

Vamos a intentar ofrecer algunas herramientas y consejos que nos servirán para poder trabajar de manera más eficaz con WooCommerce y automatizar muchos de los procesos que en un primer momento podrían parecernos tediosos.

Trabajando desde la terminal con WooCommerce

Hemos tratado en alguna ocasión la herramienta WP-CLIque nos permite manejar de manera ágil muchos de los procedimientos de instalación de WordPress. En este caso nos encontramos con WC CLI, que bajo el mismo fundamento permite incluir procesos relacionados con WooCoommerce.

Disponemos de más de una veintena de órdenes con multitud de variables a tener en cuenta, que nos permiten gestionar gran parte de nuestros desarrollos con WooCommerce desde la consola de comandos e incluso crear tareas automatizadas combinando esos comandos. Algunas de las órdenes que podemos realizar desde la terminal son las siguientes:

wc customer

Muestra información de un usuario grupos de usuarios dentro de una instalación de WooCoommerce. Además permite gestionar acciones contra usuarios creados en la base de datos, o actualizar datos de manera ágil

wc customer_download

Nos permite gestionar la descarga de listados de clientes utilizando diferentes parámetros de selección

wc product_cat

Principalmente útil para obtener listados de productos en función de una categoría que hayamos facilitado previamente con la orden. También permite crear y actualizar categorías de productos existentes.

wc product

Permite listar productos, crearlos o incluso actualizar sus características con tan solo una orden desde la terminal

Para poder tener una referencia más exacta de las posibilidades os dejo algunos ejemplos que nos pueden hacer una idea de las posibilidades de interacción que nos ofrece WC CLI.

Generar un listado de pedidos

wp wc order list

Crear un nuevo cliente

wp wc customer create --email='woo@woo.local' --user=1 --billing='{"first_name":"Bob","last_name":"Tester","company":"Woo", "address_1": "123 Main St.", "city":"New York", "state:": "NY", "country":"USA"}' --shipping='{"first_name":"Bob","last_name":"Tester","company":"Woo", "address_1": "123 Main St.", "city":"New York", "state:": "NY", "country":"USA"}' --password='hunter2' --username='mrbob' --first_name='Bob' --last_name='Tester'

Listar los datos de un cliente en formato CSV

wp wc customer get 17 --user=1 --format=csv

Añadir una nota para un cliente

wp wc order_note create 355 --note="Great repeat customer" --customer_note=true --user=1

Actualizar un cupón previamente creado

wp wc shop_coupon update 45 --amount='10' --discount_type='percent' --free_shipping=true --user=1

Eliminar la caché de WooCommerce

wp wc tool run clear_transients --user=1

Si necesitas echar mano de la documentación en este enlace podrás conocer cuales son todas las órdenes disponibles para WC CLI.

Algunos plugins esenciales para agilizar WooCommerce

WP All Import

Uno de los mayores quebraderos de cabeza para tiendas online con grandes catálogos de productos es la dificultad con la que nos podríamos encontrar a la hora de actualizar el contenido.

Existen herramientas gratuitas como WP All Import que nos ayudarán a importar productos en nuestro ecommerce mediante la simple subida de un fichero CSV o XML. Vamos, de este modo, a poder mantener actualizado nuestro stock de productos y últimas referencias con tan solo unos sencillos pasos.

Además, si requerimos un uso exhaustivo de la herramienta, también podremos utilizar la versión premium de WP All Import que permite automatizar el proceso de subida de nuevos productos o actualización de los mismos. También podremos crear tareas recurrentes, incluir imágenes en las subidas o importar productos desde el archivo contenido en una dirección URL:

AutomateWoo

Una vez que hemos podido automatizar de manera sencilla la importación de productos y actualización del stock de nuestro WooCommerce podemos pensar en otro tipo de automatizaciones posibles.

Cualquier proceso que podamos imaginar puede llegar a ser automatizado, y a veces, la solución pasa por ahorrar tiempo y gestionar eficazmente pequeñas tareas.

Con AutomateWoo tenemos un interesante compendio de automatizaciones que ayudarán a potenciar nuestro sitio web. Algunas de las características son las siguientes:

• Emails de seguimiento para fidelizar a los clientes o incentivar futuras compras.
• Recuperación de carritos abandonados con el fin de cerrar ventas que fueron iniciadas.
• Cupones personalizados para cada cliente con ofertas exclusivas orientadas a sus intereses.
• Recomendaciones de productos similares o relacionados con aquellos que ya se han adquirido previamente o por los que el usuario ha mostrado interés.
• Recompensas por la valoración de productos aportando contenidos e incentivando la participación en el sitio web.
• Recordatorio de fechas de caducidad de tarjetas de crédito para evitar que una futura compra pueda llegar a ser infructuosa.

Conclusiones finales

Cuando trabajamos con WooCommerce tenemos a nuestro alcance multitud de herramientas que nos permiten vender online cualquier tipo de servicio que podamos imaginar. Reservas de alojamientos, contenidos bajo suscripción o, simplemente, tiendas online de productos físicos.

La complejidad del proyecto puede hacer que muchas de las horas de las que disponemos las tengamos que utilizar en desarrollar el propio proyecto, dejando de lado otras tareas que pueden derivar en el éxito o fracaso del propio ecommerce. Por ese motivo es vital aprender a ser eficaces y ahorrar tiempo en tareas que son repetitivas o pueden ser optimizadas.

Pensemos en todo aquello que es un lastre en nuestros desarrollos y dejemos que pueda ser optimizado para que los desarrollos trabajen por nosotros y nos dediquemos a lo que de verdad importa.