Diseño Web

Diseño Web, Gestores de contenidos, Trucos

Cómo activar los Webservices en Prestashop y para qué sirven

El Webservice es un servicio poco conocido de Prestashop (y muy poco documentado) pero muy potente. ¿Qué es? Es una API , una CRUD  (Create, Read, Update, and Delete) API, que puedes usar para que otras aplicaciones o programas intereactúen, en las dos direcciones, con tu tienda online. Nos permite gestionar el catálogo, los pedidos, los clientes, consultar productos ….y descargar esa información a otras aplicaciones, o enviar esa información de otras aplicaciones a nuestro Prestashop. Cuando alguien se plantea hacer esto en Prestashop, algo que ocurre más a menudo de lo que pensáis porque muchos quieren conectar su tienda con su aplicación de gestión en el local o con otras tiendas (tipo Dropshipping), se plantean otras opciones como descargar el catálogo y enviarlo, realizar importaciones por csv o atacar directamente a la base de datos. La ventaja de los webservices es que se puede hacer todo eso de manera automática y programarlo. Es robusto, fiable y fácil de usar. Además, como veréis, se crean usuarios con accesos específicos así que es fácil controlar los permisos. Y lo que se produce es un xml (REST), algo fácilmente exportable a y entre otras aplicaciones. Las desventajas principales son la poca documentación que hay (toca prueba y error) y que  la arquitectura XML REST hace que cada actualización (de catálogo o de cantidades por ejemplo) deba hacerse una por una.  Esto hace que sea muy lento para ciertas cosas como actualizar un catálogo entero o una actualización completa de stock. Para muchos cambios quizás es mejor atacar directamente a la base de datos, hacerlo en partes o usar el importador del backend. Sería mejor usar JSON (más versátil con PHP) para esto último, que parece estar implementado pero todavía no para usarse en producción. Y no parece que lo estén moviendo mucho, tendremos que esperar. Pero para descargarse el catálogo, , producir informes, envíos de productos o de pedidos ocasionales es muy útil por la posibilidad de automatizar los procesos. ¿Cómo se activa? Tenéis que ir al backend a la opción de Parámetros Avanzados > Webservice. Ahí tenéis que poner en Sí la opción Activar el servicio Web. La de Activar modo CGI para PHP depende mucho del servidor donde tengas la web…prueba activarlo o desactivarlo cuando lo tengas funcionando y ver que pasa. Nota: Hay unos requisitos que debe cumplir tu servidor como tener curl activado y el mod_rewrite activo también. Una vez activado, puedes crear un acceso con sus permisos. Para eso, en el mismo apartado, en Webservice, pinch en el símbolo + (Añadir Nuevo) y después: Tienes que poner una Clave o pinchar en Generar (aconsejado). Si la pones tu ponla muy complicada. Lo curioso es que esta clave es la que luego tendrá que introducir la persona que acceda al webservice como nombre de usuario, dejando la clave en blanco (raro si). En la descripción identifica bien para qué es este servicio web. Debajo tienes que marcar los permisos que tendrá el usuario que entre con esa clave. Aconsejo hacerlos restrictivos y luego ir habilitando más según se vaya necesitando. Verás que puede hacer Get, Put, Post, Delete y Head. ¿Cómo se usa?  Entra desde un navegador a la dirección www.tudominio.xxx/dondeestétutienda/api Te pedirá un usuario y contraseña, recuerda usuario es la clave, contraseña en blanco. En la página que te aparece verás los servicios a los que tienes acceso en un xml. Cada uno tendrá una url a la que puedes acceder. Por ejenplo si te han activado los productos puedes verlos desde www.tudominio.xxx/dondeestétutienda/api/products Para el uso pronto haremos algún artículo. Pero os dejo los ejemplos sencillos de Prestashop aquí , aquí  y en su github. Puedes ver cómo para acceder a los clientes, pedidos, imágenes de manera básica y alguna implementación real que te puede servir para realizar tu programación. En este artículo podéis ver cómo acceder al web service desde PHP. Y para empezar con vuestra aplicación os dejo un vídeo de un usuario que crea una manera de listar los productos. Con eso ya tenéis para empezar.      

Diseño Web, Trucos

Cómo añadir texto a imágenes por CSS y que se lea bien

Hace unos días os explicamos cómo poner texto en una imagen con GIMP, para que se pueda leer correctamente. Hoy hacemos lo mismo con CSS, para hacerlo en una web. Por ejemplo en un Slider. Suponemos que el texto no se ve bien en toda o en parte de la imagen. La idea es la misma, podemos: Poner un color de fondo con transparencia en el div de texto. Para que quede como esto: La idea es sencilla. Identifica el div del texto o dale un id. Luego en ese id en la página de estilos pon: background-color {rgba(0, 0, 0, 0.25)} Recordad que tenéis que poner el color en formato rgba para usar transparencia. En este comando los 3 primeros números son el color (como veis yo suelo usar el negro), y el último es el grado de transparencia (aquí 0.25). Con ese último es con el que tenéis que jugar. Recomiendo usar Inspeccionar de Chrome o Inspeccionar elemento de Firefox. Ahí podrás ver los cambios en tiempo real antes de ponerlos en el código. Puedes hacer un blur en la capa de texto. Es decir, difuminar la de debajo donde esté la capa de texto. Para eso poner este comando en esa capa de texto: {-webkit-filter: blur(12px); filter: blur(12px);} Poner una capa intermedia (div) de color con transparente entre el texto y la imagen. Como en la imagen por GIMP, si no queréis que quede el recuadro anterior, podéis hacer lo mismo pero cubriendo toda la imagen. Sólo tenéis que poner un div entre el texto y la imagen, del mismo tamaño (y posición) que esta última. En ese div intermedio poner : background-image: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));} Este comando es parecido al anterior, pero crea un gradiente de color. En este caso hemos dejado todo el fondo igual. Para ayudarte puedes usar un generador online de gradiente lineal como este o este. Obviamente podéis cambiar los colores tanto de principio como de final. Quedaría algo así: Y como en el caso de las imágenes, también podéis poner una sombra en el texto. Para ello en la clase del texto poner: { text-shadow: 0 1px 0 black; }

Diseño Web, Gestores de contenidos, Trucos

Autoptimize: plugin de wordpress para cachear y minimizar CSS,JS y HTML. Acelera tu web.

Una de las cosas que más puntúan los buscadores es la velocidad de respuesta de una página. Esta depende de muchos factores, y puedes analizar tu página con PageSpeed de Google u otras web para que te den consejos sobre cómo reducir el tiempo de respuesta. Obviamente aquí entra el hardware del servidor, las conexiones etc. Eso poco puedes hacer. Pero si que puedes minimizar las imágenes, usar plugins de caché como W3 Total Caché o similares….y reducir y cachear el código CSS, html y javascript. Para esto último uno de los mejores plugins es Autoptimize. Para ver la importancia de este plugin sólo tenéis que ver el número de descargas y el número de puntuaciones máximas (muchísimas). Es una manera sencilla y rápida de acelerar tu web. Ante todo destacar que lo que puedas hacer y los resultados dependen del tema de tu página. En algunos temas (aquellos con Sliders), cachear el Javascript puede ocasionar problemas. En otros como aquellos con Visual Composer algunas opciones de CSS pueden dar resultados extraños. La única opción que tienes es ir activando las opciones y ver tu página. Si alguna le cambia el aspecto o la tira, desactívalo y pasa a la siguiente. Cuantos más tengas activados mejor…pero es raro poder tenerlos todos. Cuando lo instales y lo actives, te recomiendo pinchar en Show Advanced Settings para ver todas las opciones del plugin. Siempre puedes elegir Autoptimize…y si funciona fenómeno. A mi me gusta más controlar lo que está pasando.   Si unes este plugin, a uno de optimizar imágenes y a uno de caché…aumentarás rápidamente la velocidad de tu web sin demasiado esfuerzo. Obviamente casos complejos y mejores optimizaciones requieren un estudio más detallado, pero esa combinación anterior  es suficiente para la mayoría de las webs sencillas.

Diseño Web, Gestores de contenidos

Cómo crear Anchor Links para crear saltos de página internos en tu web

Con los Anchor Links podemos crear fácilmente saltos de página dentro de nuestra página Web. Al estilo de los índices de Wikipedia. Estos enlaces son muy útiles en varios casos: Para crear un pequeño índice o introducción al comienzo de la página que nos lleve a cada apartado al pinchar. Para referenciar a secciones de la misma u otra página en el texto y que nos lleve ahí al pinchar en una palabra. Para crear webs de una sola página (muy de moda hoy en día) y que los menús nos lleven directamente a cada sección (y no a otras páginas). Por ejemplo si elegimos el apartado Contacto del menú, nos llevará a la sección Contacto de la misma página (por ejemplo al final). Por ejemplo esto te llevará al final de la página. También podemos usarlo para crear botones de “subir” y que nos devuelva al principio de la página. Os explicamos cómo crear estos enlaces ancla: Tienes que poner una etiqueta al destino con el atributo id de CSS. El destino ser una palabra, un div, una imagen…cualquier elemento al que puedas asignar un id de css. Por ejemplo (sólo algunos de los posibles: <p id=”etiqueta”>Soy el destino</p> <div id=”etiqueta”></div> <h1 id=”etiqueta”>Título destino</h1> En el destino pon un enlace que simplemente contenga #etiqueta .  Se puede, de nuevo poner en cualquier elemento que admita un enlace (palabra, frase, imagen, apartado de un menú). Esta es la versión simple. Si lo que quieres es crear un menú, es mejor que antes de la etiqueta pongas la url completa. Si, por ejemplo tu índice es www.tudominio.es  y quieres llevar a el apartado contacto de la misma página (al que previamente has puesto una etiqueta) pon www.tudominio.es/#contacto Si no pones la url completa, en una subpágina no sabrá llegar a ese apartado. Recuerda que si lo que quieres es poner enlaces de “ir al principio” o “ir al final”  podéis poner divs vaciós con etiquetas como en el ejemplo del apartado 1 o el ejemplo de esta página. Ahora probad y jugad. Permite crear páginas muy interactivas y de mucha facilidad de uso para los clientes. Nota: No uséis espacios en las etiquetas. Mejor con guiones. Final Esto te llevará al principio

Compartir, Diseño Web, Gestores de contenidos, Redes Sociales

Activar los artículos instantáneos de Facebook en WordPress

Hace un tiempo escribimos un artículo introductorio sobre lo que eran los Instant Articles. Recordad que sobre todo son un formato de Html5 específico de Facebook y pensado para móviles, para que los artículos de tu web se carguen de manera más rápida y estética. Hoy os contamos cómo configurarlos y activarlos en un WordPress. Se puede hacer a mano (puedes ir a tu página de FB, pestaña Herramientas de Publicación, apartado Artículos instantáneos para ver los pasos), pero recomiendo usar un plugin porque el plugin se mantiene al día de los cambios en formato, novedades y demás. Además te guía durante todo el proceso. Podéis usar Instant Articles for WP. Una vez activado el plugin, espera unos días porque tienes que escribir algunos artículos que luego te pedirá revisar. Así que escribe por lo menos 5. Luego puedes ir al apartado Instant Articles del Backend. Ahí empezará el asistente: Primero te llevará a crear una APP para Facebook en https://developers.facebook.com/apps/. Te hará elegir la página donde se van a publicar y podrás obtener ID y la clave secreta. Con eso abrirá sesión. También habrá elegido tu página de Facebook donde publicar. Después tienes que elegir la plantilla que quieres para tus artículos. Te llevará a la página de Facebook para personalizar tu plantilla. Puedes dejar el nombre por defecto o cambiarlo, y te permite cambiar muchísimas opciones del diseño de tus artículos. Una vez creada la plantilla te pedirá que envíes 5 artículos para revisión.  Si detecta algún error te pedirá arreglarlo en cada artículo. Recomiendo, sobre todo si has cambiado el nombre de la plantilla, pinchar en Open Advanced Settings Now y modificar ahí los parámetros que necesites. Errores. A nosotros nos dio 2: No rules defined for <img class=……> in the context of Anchor La solución la encontramos aquí. Tienes que irte al asistente y en Advanced Settings marcar la casilla: Enable custom transformer rules. Después en el cuadrado de reglas pegar: { “rules”: [ { “class”: “PassThroughRule”, “selector”: “//a[descendant::img]” } ] } Nos dio un error parecido: No rules defined for <img class=……> in the context of Bold Pero era porque la imagen venía marcada como negrita. Con pinchar en la imagen y desactivar el botón, solucionado. Una vez arreglado los errores pinchas en enviar. A nosotros, desde el plugin, nos dió Permission Error. Pero puedes ir a tu página de Facebook, pestaña Herramientas de Publicación > Artículos Instantáneos> Configuración, y en el Paso 2 pinchar en Envía la solicitud de Revisión. Desde ahí deja, y luego , al refrescar la página en el plugin de WordPress aparece como enviado. Ahora a esperar dos días, y se publicarán. ¡Ya os diremos que tal!  

Diseño Web, e-Learning, Gestores de contenidos

Traducir el foro Site News en la portada de Moodle

Cuando estamos gestionando un Moodle y queremos poner noticias en la página de inicio, un buen método es el foro. Pero cuando lo haces por defecto ves que pone el título Site News. Y puede que no te guste o quieras traducirlo. Ya puedes buscar en la opción de traducciones de Moodle (muchas webs en Internet dicen que está ahí). Al buscar Site News aparece un término pero veréis que está bien traducido. Lo podéis cambiar a lo que queráis que seguirá diciendo Site News. Ni caso a lo que pongas. Aquí os decimos cómo cambiarlo: Supongo que has publicad algo en el foro, si no es así hazlo para ver Site News. Activa la Edición de la página principal en Administración > Ajustes de la página principal > Activar Edición. En el foro Site News pincha en publicar un tema o hacer un comentario en este tema. Ahora, una vez dentro del foro, en el menú veréis un Administración del  foro > Editar Ajustes. Pinchad en eso. Ahí veréis que aparece el nombre del foro y lo podéis cambiar. Recuerda desactivar la edición cuando acabes. Está escondido…pero una vez lo sabes, cambiarlo es muy rápido.    

Diseño Web, Gestores de contenidos

Plugin Regenerate Thumbnails en WordPress

Otro plugin que viene muy bien para los que diseñamos páginas web: Regenerate Thumbnails. Si has cambiado de tema, y el nuevo tiene diferente tamaño de imágenes (destacadas, miniaturas …), o si has decidido cambiar tu el tamaño de las mismas en tu tema, este plugin te permite regenerar todas. Esta funcionalidad viene ya por defecto en otros gestores como Prestashop. WordPress no lo tiene, quizás porque la mayoría de los usuarios no tienen por qué usarlo. Pero para diseñadores es útil para que las miniaturas encajen con el tema. El plugin revisa y ajusta todas las imágenes que ya tienes subidas al nuevo tamaño, regenera las miniaturas a los nuevos tamaños. Tarda, no te preocupes si cuando lo ejecutas se queda un rato pensando. Pero te ahorra mucho trabajo. Y poco más…es simple pero efectivo.

Diseño Web, Gestores de contenidos, Trucos

Crea Child Themes ( plantillas hijas) de tu tema de WordPress si quieres personalizarlos

Cuando vas a diseñar una página web, y has elegido tu tema, lo más seguro es que necesites modificar al menos el CSS (colores etc). Ya os indicamos hace tiempo cómo hacerlo correctamente y existen muchos plugins para modificar el css. Pero mencionamos al final del artículo que la manera más correcta de hacerlo es con lo que se llama un Child Theme, un tema hijo. Un tema hijo es un tema que “cuelga del tema principal”, que comparte todas sus características, pero al que si hacemos alguna modificación estas se usarán en vez del principal. Realmente el tema hijo es otro tema para WordPress, pero usa los ficheros del principal. En la carpeta del hijo sólo están los ficheros que se modifican. ¿Qué ventajas tiene? Varias. La principal es que puedes actualizar el tema padre sin problemas. Cuando modificabas un tema tenías siempre el miedo que una actualización te borrara los cambios. O que lo hiciera el cliente. En esta configuración, el tema padre se actualiza y lo tienes siempre al día. Y el hijo también porque sólo se cargan las modificaciones. También te permite añadir funciones en el fichero funtions.php sin temor. Con esto puedes realizar muchas funcionalidades extra. Por ejemplo el truco de usar Shortcodes Ultimate con Contact Form 7 que os dejamos hace unos días. Desde el punto de vista de código, limpieza y velocidad es más correcto. Un plugin de CSS carga el CSS del padre, y luego el CSS modificado por tí en el plugin. Un tema hijo carga el CSS del padre, y las modificaciones del hijo…pero no ambas para una misma etiqueta. Mucho más limpio, sencillo y rápido. No es difícil crear un tema hijo manualmente. Podéis seguir los pasos en este manual de Child Theme de WordPress. Realmente sólo es crear una carpeta con la etiqueta child y mover ahí el functions.php y la hoja de estilos que quieres modificar. Sin embargo, para que todo funcione correctamente, y no perder tiempo, os aconsejo un plugin como Child Theme Configurator, que, de manera muy sencilla, te permite crear y configurar tu tema personalizado rápidamente. Instálalo, activalo y ve a Herramientas> Child Theme Configurator. Una vez creado, si no queréis tener demasiados plugins activos, podéis desactivar este. Sólo es para la configuración. Nosotros, desde hace un tiempo, siempre que modificamos un tema lo hacemos así. Os lo aconsejamos.  

Diseño Web, Gestores de contenidos, Webs

Cómo mostrar posts en una página de WordPress sin código

Hace tiempo explicamos cómo crear una plantilla usando el loop para mostrar posts en una página. Pero implicaba modificación de ficheros por FTP y cambio de código. Ese artículo sigue vigente, pero dependiendo de tu plantilla, el loop será diferente y  también el código a poner. Así que fácil no es. Como es una pregunta recurrente en el blog, hoy os dejamos una solución más sencilla usando un plugin: Content Views. Con más de 40.000 descargas, y 4.8 de 5 de puntuación, se puede ver que es algo que los usuarios requieren. Content Views te permite crear diferentes Loops o Vistas personalidas. Tras instalar el plugin, te crea un menú en el backend desde donde poder gestionar los Views. Estos views son loops personalizados donde puedes elegir desde las categorías a mostrar, si quieres posts o páginas, el número de posts a incluir, si excluir alguno, si mostrar autor, fecha o no… También tienes una segunda pestaña donde definir el estilo del View y ahí puedes elegir el número de columnas, si es en Grid o lista, si mostrar imagen destacada, si quieres una paginación por Ajax (muy útil en ciertas plantillas)…y mucho más. Una vez creado tu View te da un código que puedes copiar y pegar en una página para mostrar el contenido, así de fácil.  Y luego puedes crear más, por ejemplo una página con noticias, otra de Blog, otra de proyectos de clientes…. Un plugin muy simple, con muchas opciones, potente en su versión gratuita (cómo debe ser la pro). Recomendado.  

Diseño Web, e-Learning, Gestores de contenidos, Trucos

Poner la Alerta de Cookies en un Moodle

La alerta sobre el uso de cookies en una web es una directiva europea, y como tal todas las webs deben tenerla. Pero Moodle no tiene esta opción ni hay plugins para activarla (que hayamos encontrado). Aún así, se puede activar de manera sencilla con un poco de código. Para el código usaremos una página web que ya nos lo proporciona y nos deja personalizarlo un poco:  https://silktide.com/tools/cookie-consent/download/ Sigue los pasos de la web, personaliza tu aviso y copia el código que te dan. Ve a Moodle como administrador y ve a Administración del Sitio > Aparinecia >  HTML Adicional Donde pone Dentro del encabezado copia el código del aviso de cookies. Pincha en Aceptar. Ahora la primera vez que entres en tu página de Moodle deberás aceptar el aviso. Las siguientes veces no aparecerá el aviso, pero siempre podrás comprobarlo desde modo incógnito. Y ya tenemos a Moodle cumpliendo la normativa.

Scroll al inicio