Diseño Web

Diseño Web, Prestashop, Sistemas, Trucos

Mostrar los valores en pantalla de un array en un tpl (smarty)

Si manejáis gestores de contenido como Prestashop u otros que usen Smarty, tendréis que modificar algún fichero tpl. Y a veces necesitaréis que se os muestre en pantalla el valor de algún array, aunque sea para ver qué almacena la variable. El equivalente a print_r() en php. Bueno en un tpl es parecido, lo que tienes que poner es {$variable|print_r}  si no queréis ver las etiquetas, o {$variable|@print_r} para ver las etiquetas. Pero esto lo muestra de manera “muy fea” y, al igual que php tiene la función print_pre() para mejorar la presentación de la print_r(), tenéis algo parecido en los tpl. Para mostrarlo de manera más “elegante“, y en un cuadro de pre (código) podéis hacer: <pre> {$variable|print_r()} </pre> Y veréis como se muestran los resultados en pantalla con un cuadro de código y ordenado. Sin en ve

Diseño Web, Trucos

Triggers y Eventos en Mysql a través de phpMyAdmin. Caso Prestashop

Cuando empiezas a profundizar trabajando con gestores de contenidos, hay ocasiones en que el gestor no tiene todas las funcionalidades que necesitas. Necesitas que se ejecuten tareas cuando pase algo o cuando se modifique alguna tabla de la base de datos. O que cada cierto tiempo se ejecute algún script o función. Eso lo puedes hacer desde scripts en el servidor y cronjobs (si tienes acceso al servidor), pero para aquellos que tienen el hosting en servidores compartidos (la mayoría), una opción es usar Eventos y Triggers (disparadores) directamente en la base de datos. Todo esto se puede hacer desde comandos de mysql…pero siempre as más agradable usar una GUI, y phpMyAdmin (disponible en la mayoría de los hostings y si no puedes instalarlo) te deja gestionarlo. Si no tienes la pestaña Eventos o la de Disparadores (triggers) puede ser o porque tienes una versión antigua de phpMyAdmin, o porque no está activado (en el caso de los Eventos) en el servidor. ¿Que son? Un Evento es un script o función que se ejecuta cada cierto tiempo.  Para poder ejecutar Eventos tiene que estar activada la funcionalidad lo cual se puede hacer entrando en phpMyAdmin desde root (no desde otro usuario) en la pestaña Eventos y activando el gestor. O desde Mysql por comando. Si no lo tienes puedes pedirlo a tu proveedor. Un Trigger (Disparador) es un script o función que se ejecuta siempre que se haga una modificación en la tabla que escojamos (antes o después). Ambas funcionalidades son muy útiles porque podemos, por ejemplo, con Disparadores,hacer que cada vez que se cambie el stock de un producto se guarde en otra tabla, o actualice otro dato, o ejecute alguna funcionalidad. O con Eventos hacer comprobaciones todas las noches, o guardar en otra tabla todos los datos importante cada hora, o comprobar y actualizar cosas cada hora. En ambos casos podemos poner la serie de comandos a ejecutar directamente en el Trigger o Evento, o crear funciones en la GUI y llamar a esas funciones (si queremos tenerlo todo más ordenado). Obviamente ambas funcionalidades quitan recursos del servidor, pero no demasiado. Hay que manejarlas con cuidado porque si modificamos las tablas sin saber podemos causar problemas graves y dañar nuestro gestor. Y hay que entender cómo funciona, muchas veces con Prestashop no hay que cambiar sólo un campo. Y nosotros hemos visto casos en los que si ejecutábamos triggers que llevaran mucho tiempo Prestashop no ejecutaba tareas habituales (por time out). ¿Ejemplos de lo que podéis hacer con Triggers? Muchos pero os dejo uno típico en Prestashop, deshabilitar productos con stock cero (que también podéis hacer con un módulo). Viendo eso, y cómo funciona, las posibilidades son infinitas. Nosotros hemos creado un Evento que cada cierto tiempo comprueba la combinación más barata de los productos y la pone como por defecto porque hemos descubierto que eso no funciona bien en Prestashop. Pero puedes hacer copias de seguridad, borrado de tablas…lo que quieras.  

Diseño Web, Gestores de contenidos, Trucos

Antispam Bee: plugin contra el spam para WordPress

Cuando la gente instala un Worpdress, y la página empieza a funcionar, enseguida llega el spam. Como Askimet viene instalado se piensan que es la única solución y que tienen que resignarse y borrar el spam diario. No hace falta. Primero puedes reducir mucho el spam diario con las listas negras. A mi me ha rebajado el spam en un 90%. Pero además existen plugins muy buenos gratuitos. Por ejemplo el de hoy Antispam Bee. Con muchísimas opciones para reconocer spam (por tiempo, ip, listas, bases de datos públicas y privadas), con la opción de aprobar comentaristas y denegar otros, deja borrar automáticamente el spam, te estadísiticas avisos….. Si lo que necesitas es algo fuerte contra el spam…este es tu plugin.

Diseño Web, Internet, Trucos

Wow.js : crea animaciones con CSS que se animan al hacer scroll

Últimamente estamos haciendo muchas animaciones para páginas web con CSS.  Como todo abusar de las animaciones no es bueno, pero CSS permite ya crear unos efectos “muy chulos” . Todos los elementos de una web, textos, div, imágenes etc, se pueden animar haciendo que aparezcan y desaparezcan, que reboten, giren, se deformen etc etc. Todo esto se puede hacer programando desde cero, pero la utilidad de la librería de Wow.js es que tiene los efectos ya creados, y sólo tienes que añadir la clase correspondiente al elemento que quieras animar. Cada animación permite también modificar tiempos, velocidad y algún otro parámetro. Además lo han hecho para que aparezcan al bajar el scroll, y no (como pasaría si lo programas de cero) al cargar la página (con lo que se pierden animaciones que están en la parte inferior). ¿Para qué inventar la rueda si ya está inventada? Lo mejor es usar la mentalidad modular y usar estas librerías ya probadas. Podéis ver ejemplos de WOW en su página y aquí podéis ver cómo usarlo. WOW además puede integrarse fácilmente en un gestor de contenidos tipo Wordress, Joomla o Prestashop ya que sólo tienes que hacer referencias a algunas librerías, nombrar los elementos con las clases correspondientes y poner el css adecuado.    

Diseño Web, Gestores de contenidos, Seguridad

Bloquear países por IP en WordPress.

Llevamos unos días con ataques en uno de nuestros servidores. Y aunque Wordfence lo bloqueaba, es una lata recibir emails de intentos de ataques continuos. Los ataques venían siempre del mismo país, República de Moldavia…pero cambiaban de IP y Wordfence permite bloquear por IP pero la opción del país es de pago. Así que, como hemos hecho con en otros servidores, decidimos bloquear el país. Hay webs en España que quitando países de Europa del Este se quitan un 60-70% de los ataques. Y si no tienes o sirves a clientes de esa zona es una buena idea. Os dejamos dos plugins para hacer esto de manera gratuita. IQ Block Country. Un buen módulo, con muchas descargas y buena puntuación. Puedes bloquear usuarios en el front-end y en el back-end, y por páginas o categorías. Además puedes personalizar el mensaje. Puedes usar un localizador de pago o usar la gratuita en http://geoip.webence.nl/. IP Geo Block: Al final usamos esta opción porque también tiene una buena puntuación y además los desarrolladores comentaban que estaba probado con Wordfence. Permite gestionar listas blancas (decir a quien permites y excluir al resto) o listas negras (las que usamos nosotros, elegir a quien bloquear). Cuidado, configuradlo bien al principio u os podéis bloquear a vosotros mismos.    

Diseño Web, Gestores de contenidos

El módulo Photon de JetPack cachea las imágenes y las enlaza desde i0.wp.com

El otro día estábamos intentando modificar una imagen en el WordPress de un cliente, desde un editor, y no cambiaba. La sustituíamos por FTP y nada, la imagen seguía ahí. Nos estaba volviendo locos…no tenía sentido. De repente vimos que la ruta de las imágenes no era la del servidor, sino que las cogía desde el dominio http://i0.wp.com/…..   lo que en un principio nos alarmó. No os preocupéis, es el módulo Photon de Jetpack, que si lo tenéis habilitado cachea las imágenes. Esto es fantástico para acelerar las páginas y mostrar el contenido lo más rápido posible. Pero a los que desarrollamos las páginas nos puede volver locos porque no hay manera de modificar esas imágenes. Si quieres modificar una imagen y tienes este módulo instalado cambia la imagen de nombre. O si no…deshabilita el módulo mientras estés en desarrollo.

Diseño Web, Gestores de contenidos, Trucos

No puedo elegir una plantilla para mi página de Blog o Entradas

Ayer tuvimos este problema en WordPress. Es una tontería, pero pongo la solución para que nadie más se rompa la cabeza con esta tontería. Si tu tema permite varias plantillas, y puedes cambiarlas en otras páginas (si no puedes es que no tienes plantillas bien definidas en tu tema), pero no puedes cambiarla en  tu página de Blog o de Entradas, esto es porque has seleccionado en Ajustes>Lectura que esa página sea la de entradas (una estática en la portada y la de, por ejemplo, Blog en entradas). Cuando haces esto, como dice en esta página de WordPress: Do not use a custom Page template for this page. The template files home.php or index.php will be used to generate this page in the Theme. Es decir, WordPress escoge automáticamente la plantilla home o index para tu página de entradas sin dejarte elegir otra. Por lo tanto la solución, si quieres crear una página de Blog con una plantilla personalizada, es que vayas a Ajustes>Lectura y deja la sección de Página de Entradas  en “-Elegir-“. Así verás que te deja escoger un tema. Sólo tienes que poner tu entrada de Blog en el menú y ya tendrás lo que querías.

Diseño Web, Redes Sociales, Soporte

Conseguir un UserID, ClientID y AccesToken para Instagram. Crear una Aplicación

La semana pasada dijimos que os enseñaríamos a conseguir un ClientID y un AccessToken de Instagram. Esto lo necesitas si estás creando una aplicación de Instagram, entre otras cosas para poner en una web el contenido de tu perfil de Instagram. Primero tienes que crear una aplicación. Para ello ve a: https://instagram.com/developer/authentication/ , Manage Clients y Register a New Client. Ahí tendrás que rellenar los datos hasta crear la aplicación. Una vez creada conseguiréis unos datos el CliendID ,el Client Secret, o el redirectulr. Lo curioso es que esto NO es lo que necesitas para las aplicaciones. Lo siguiente que tienes que conseguir es el UserID (te lo pedirán para poner el feed en tu web y no coincide con el ClientID). Puedes ir a esta web, o en tu perfil de Instagram puedes obtenerlo también. Luego tienes que obtener el AccessToken. Para ello necesitas dar permiso a tu aplicación. Una manera sencilla de hacerlo es poniendo esto en tu navegador cambiando los datos por los que has obtenido antes: https://instagram.com/oauth/authorize/?client_id=tuiddeclienteaquí&redirect_uri=HTTP://turedirecURLaquí.com&response_type=token Esto te llevará a una web donde podrás dar permiso a tu aplicación y te llevará a tu redirecturl pero verás que al final de la ur, tendrá el access token. Del tipo: http://turedirecturl/#access_token=856946666.7338417.ffefasgtasg805784be6ab4f24965e79 Ese número largo después del igual es el que tienes que copiar. Al final la aplicación o el plugin para poner el feed te pedirá el UserID y el AccessToken. Todo esto se puede hacer también dando acceso a Instagram a aplicaciones externas como esta, pero yo personalmente no me fío y prefiero hacerlo a mano.      

Diseño Web, Gestores de contenidos

Módulo gratuito de Instagram para Prestashop y otros métodos de poner un feed de Instagram..

Como lo hemos usado para un cliente, hoy os dejamos un módulo gratuito para Prestashop que os permite mostrar las últimas fotos de Instagram en varios lugares de la plantilla Podéis ver una demo aquí. El módulo puedes conseguirlo en este enlace. Eso si, recuerda que tienes que darte de alta en la comunidad de Prestashop para poder descargarte los ficheros. Después colocarlo es muy sencillo, sólo instálalo, consigue el ID de cliente de Instagram y el un token de aplicación y colócalo donde quieras (que te permita la plantilla). Como lo de conseguir el ID puede ser algo complicado el lunes explicamos varias maneras. Otra manera de poner el feed de instagram es con estas soluciones online: http://snapwidget.com/#getstarted  o http://websta.me/tools . A mi no me gusta mucho porque tengo que fiarme de este servicio y, si se da de baja, nos quedamos sin feed. También mi web va a al servicio externo, luego a Instagram…lo que la ralentiza. Por último también podríamos hacerlo con este javascript: http://instafeedjs.com/. Pero Tendríamos que retocar Prestashop para que nos deje usar JS, cosa que no hace normalmente. Entonces tocamos código del gestor y lo hacemos menos seguro. No me gusta tanto…pero si no hay otra manera se puede hacer. Sería una solución para webs html puras. Podéis ver cómo en este vídeo, o explicado aquí:        

Diseño Web, Gestores de contenidos

Buenas plantillas gratuitas de Moodle

Escribo este artículo para que la gente no pierda el tiempo que he perdido yo probando plantillas. Y consciente que algunas de estas que pongo dentro de poco dejarán de usarse o que pueden salir mejores. Recordad que muchas veces es buena idea comprar plantillas, para lo cual recomiendo Themeforest. Obviamente son mucho mejores. Estas son las plantillas gratuitas que, a fecha del artículo, más me han gustado. BCU: gran plantilla creada para la universidad Birmingham City University que se mantiene actualizada. Tiene una portada muy configurable con espacios para poner banners, información etc. Basada de bootstrap y responsive (se adapta a los dispositivos). Tiene una apartado de configuración con muchas opciones de colores, tamaños etc y además una sección para el CSS y Javasript personalizados. Essential: otra de las clásicas, lleva bastante tiempo y está muy probada y desarrollada. Con actualizaciones frecuentes. Totalmente resposive. Tienes una demo aquí. Rocket: Una plantilla con muchísimas descargas que también lleva tiempo actualizándose. Muy popular. Evolve-D: una plantilla muy visual, con un slider de fondo en la pantalla de login, personalización de iconos y efectos visuales muy logrados. El único problema que veo es que inicie con la pantalla de login y no con una página de Inicio. Klass: Otra plantilla responsive y gratuita. Podéis ver la demo aquí.

Scroll al inicio