Diseño Web

Diseño Web, Gestores de contenidos, Trucos

Script para buscar y reemplazar en bases de datos

/

Esto no será útil para la mayoría de usuarios, pero los que gestionamos bases de datos (de programas, páginas web, CRMs etc) en muchas ocasiones tenemos que cambiar entradas. A veces nombres, otras URLs, directorios etc. El problema de las bases de datos (y lo que les hace tan rápidas y funcionales) es que muchas veces son tablas cruzadas. El mismo término puede estar decenas de veces en decenas de tablas. Cambia tu eso a mano si tienes… tiempo. Es verdad que puedes hacer búsquedas y reemplazos por comandos de MySql…pero seamos sinceros: si no los usas diariamente, ni te acuerdas ni te atreves. En estos casos encontramos este script, con frontend de web. Es sencillísimo de usar: pones los datos de tu base de datos, haces la búsqueda, esperas a ver los resultados (puedes ver muchos detalles sobre ellos) y luego elige lo que quieres cambiar. Una de las cosas que más me gustan es que puedes hacer una prueba con el cambio y ver cómo quedarían los registros ANTES de trabajar con la base de datos real. Muy útil cuando no estás seguro si tienes que añadir una o dos barras (/) o similar. ¿Cuando usamos esto nosotros? Normalmente cuando cambiamos un WordPress, Prestashop o similar de directorio y comprobamos que las URL puestas a mano, o las imágenes, siguen con la dirección antigua. Probadlo, a nosotros nos ha venido de miedo.  

Diseño Web, Gestores de contenidos

Contact Form DB: guarda los formularios de contacto de tu web.Consúltalos desde el backend

/

Hace unos días, un cliente nos pidió que los contacto que recibiera desde sus formulario de contacto (tenía 3) los pudiera consultar en la web. Es decir, no sólo recibirlos por correo, sino también comprobarlos desde el backend. Gracias a eso hemos encontrado, e implementado en alguna otra web, este plugin Contact Form DB, que guarda los contactos en la base de datos. Desde este apartado del backend, el usuario puede filtra por el formulario de contacto, consultar los datos, editar lo recibido y exportarlo a Excel. ¿De qué formularios? Este plugin es compatible directamente con estos plugins de formulario: Contact Form 7 (CF7) plugin Fast Secure Contact Form (FSCF) plugin JetPack Contact Form plugin Gravity Forms plugin WR ContactForm plugin Form Maker plugin Formidable Forms (BETA) Forms Management System (BETA) Quform plugin (BETA) Ninja Forms plugin (BETA) Caldera Forms plugin (BETA) CFormsII (BETA) FormCraft Premium (BETA) Enfold theme forms Pero además, puede funcionar en cualquier otro formulario poniendo el código [cfdb-save-form-post]. Los resultados no sólo pueden consultarse desde el backend, sino que, usando los shortcodes [cfdb-html], [cfdb-table], [cfdb-datatable], [cfdb-value] , [cfdb-json] o incluso creando shortcodes propios (el plugin te deja), puedes mostrar los resultados (parciales o totales) de los formularios recibidos en una web. Podéis ver el uso con Contact Form 7 (unos de los más usados): Más información aquí.

Diseño Web, Gestores de contenidos

Plugin SiteOrigin Css: cambia el estilo y colores de tu página aunque no sepas mucho CSS

/

Cuando tienes que cambiar los colores de tu página, incluso cosas más avanzadas, más allá de lo que te deja tu plantilla, tienes que cambiar CSS. O sea, algo como “programar”. Esto puede conllevar una tarea ardua de aprender las instrucciones de CSS, sus delimitadores y opciones y cómo manejarlo. No es difícil, es tiempo, pero para algunos puede ser algo complicadísimo. Afortunádamente cada día salen plugins para WordPress que facilitan más las cosas y hoy os dejamos SiteOrigin CSS. No te quita el tener que saber algo de CSS, o al menos algo de algún lenguaje de programación, pero si que facilita mucho el tema. Porque tiene un editor visual que muestra la página y te permite pinchar en la parte que quieres cambiar. Así elige rápidamente la etiqueta (clase o id) y te da, de manera visual, algunas cosas que puedes cambiar como colores, tamaño de letra, fondo etc. Yo no lo uso, porque no me deja todas las opciones, porque voy más rápido con lo que se de CSS etc. PERO aquellos que no manejen CSS a diario lo encontrarán muy útil. Aquí podéis ver en un vídeo cómo se usa:  

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

Moodle: hacer que las categorías no muestren cursos a los que no se tiene acceso

/

A mi me gusta poner en la página de Moodle, un listado de categorías incluso si el usuario no se ha registrado. Así la gente externa puede ver las categorías que hay. Pero, por defecto, si haces eso, cualquier usuario puede VER (no acceder) los cursos que hay en esas categorías. Y puede que no te interese (a mi no). Os explicamos cómo evitarlo. Hay que modificar el fichero courses/renderer.php.  Como es un fichero del core, habrá que estar atento a las actualizaciones (cambiará el fichero). No nos gusta cambiar el core, pero ahora mismo no hemos visto otra manera de hacerlo. Abre el fichero y ve a la función  coursecat_courses. Justo encima de la línea: $content .= $this->coursecat_coursebox($chelper, $course, $classes); pon:  if($course->can_access()) Salva el fichero y recarga la página. Ya tendría que estar resuelto. A partir de ahora los usuarios pueden entrar en las categorías, pero no verán los cursos a los que no tienen acceso. Nota: Esto también elimina de la página de Inicio los cursos incluso cuando estás registrado y el pie. Seguramente se puede evitar esto con alguna modificación del fichero renderer. Nosotros tuvimos que desactivar esta opción. Parece ser que por grupos puedes conseguir algo parecido.

Diseño Web, Gestores de contenidos, Internet, Noticias Informáticas, Webs

Chrome presenta una exclamación si tu web no está por https

/

Google ya avisó, iba a apostar por una web cifrada, con todas las webs por https. El primer paso fue puntuar positivamente, a nivel SEO a las web que tengan cifrado. Ahora lo hace con el navegador. El otro día nos sorprendimos al ver que, al actualizar a la última versión de Chrome, todas las webs que no tenían https por defecto salían con una exclamación al lado. Así: El aviso dice lo siguiente: “Tu conexión a este sitio no es privada“. ¿Que se puede hacer? NADA. Bueno, si, instalar un certificado. Al final van a ser lentejas y vas a tener que hacerlo. Ahora hay dos opciones para hacer esto: Comprar un certificado de una entidad clásica. Te costará una cierta cantidad cada año. Usar un certificado gratuito como Let’s Encrypt. Muchos proveedores de hosting ya están ofreciendo certificados gratuitos (supongo que de Let’s Encrypt). El problema es que para la instalación del certificado en el servidor, y la configuración de tu web con certificado, hace falta una persona con conocimientos. No es algo trivial en la mayoría de los casos. Así que ese coste no te lo puedes ahorrar. Nosotros ya estamos ofreciendo ese servicio a los clientes, para que sus páginas dejen de tener ese aviso que afea tanto (lo que quiera Google).  

Diseño Web, Gestores de contenidos

Plugins Livemesh SiteOrigin Widgets. Una colección de widgets para SiteOrigin

/

  Hace unos días os hablamos de Page Builder de SiteOrigin, un builder para páginas webs en WordPress que te permite diseñar las páginas a tu gusto, de manera visual y responsive. Hoy os dejamos un complemento, que son en verdad dos, para darle MUCHÍSIMA más versatilidad a ese builder. Livemesh SiteOrigin Widgets, junto con su requisito el plugin SiteOrigin Widgets Bundle  son unas colecciones de Widgets gratuitos (hay versión pro con más en el primero) que te permitirán hacer casi cualquier cosa en la página. Con el builder, los podrás poner en cualquier parte de tu web. SiteOrigin Widgest Bundle se puede instalar en solitario, y es plenamente funcional. Pero además es requisito para Livemesh. Este añade unos 18 widgets. Con LiveMess SiteOrigins Widgets puedes añadir aproximadamente el doble, Estos son los que hay ahora. Services that capture what you can offer for your clients/customers. Responsive Tabs that function seamlessly across all devices and resolutions. Accordion/Toggle that capture collapsible content panels when space is limited. Heading styles to capture effective headings for your page sections. Team Profiles widgets to display all the team members. Odometer to show impressive numbers pertaining to your work or company. Bar charts widget to capture skills or any type of percentage stats. Animated Pie charts for visual depiction of percentage stats. Testimonials to tell everyone the good things you often hear from your clients/customers. Testimonials slider is a responsive touch enabled slider that cycles through testimonials. Post Carousel Widget that displays your posts or custom post types as a highly responsive carousel. Generic Carousel Widget that displays lets you present a list of HTML content in a carousel. Hero Header Widget that lets you display any type of header content with option to set Parallax, YouTube or HTML5 video background. Grid widget that displays portfolio or blog entries in a nice responsive grid. Masonry and packed options are supported. Client List widget to showcase the clients that you have handled. Pricing Plans. Flat style buttons . Icon list widget. Probadlo, os gustará.

Diseño Web, Gestores de contenidos

Plugin Page Builder para Wordress. Diseña tu página fácilmente con este editor

/

La tendencia desde hace unos años en las plantillas de WordPress es usar editores para las páginas. Dichos editores te permiten añadir y quitar filas, añadir y quitar columnas, modificar los años y altos de las mismas, insertar plugins y widgets en filas o columnas, cambiar colores etc. Todo de un modo muy visual y con un drag and drop. Esto hace que no tengas que saber mucho de CSS o html5 (al final hay que saber para poner las cosas a tu gusto), y hace mucho más sencillo crear las páginas responsive y a tu gusto. Uno de los editores más conocidos es el Visual Composer, de pago pero que viene con la plantilla. El problema de este plugin, además de que mete mucho código excesivo para algunos, y ralentiza la página, es que, como es de pago, es fácil tenerlo desactualizado, lo que lo convierte en una puerta de entrada para hackers. Además, al ser de pago, no está disponible para temas que vengan sin editor, o para temas gratuitos. Para estos casos recomendamos este plugin Page Builder por SiteOrigin. No es tan completo como el Visual Composer, pero tampoco añade tanto código ni hace que la página vaya tan lenta. Además vale para cualquier plantilla. Con este editor, y algún conocimiento de CSS, casi cualquiera puede hacer su página como quiera. Es más, dentro de unos días compartiremos otro plugin con el que casi no hará falta saber de CSS. Probadlo, más de 1 millón de descargas y 4.8 de 5 lo avala. Nosotros lo usamos en páginas básicas. Esperemos que os sea útil.    

Diseño Web, Gestores de contenidos, Seguridad

Wangguard: protege tu página de WordPress de usuarios no deseados (sploggers)

/

En algunos casos, las páginas de WordPress se llenan de registros de usuarios “falsos”, los llamados sploggers. Sobre todo aquellas que permitan a los usuarios registrarse sin ningún otro requisito. Evidentemente estas cuentas, además de llenar de “spam” nuestra lista de usuario, y agrandar la base de datos, puede ser un fallo de seguridad.  La mayoría de estos son intentos de acceder a nuestra página con permisos más elevados, o para poder postear links a otras webs. Normalmente yo sugiero establecer un requisito o control previo para registrarse, pero en ciertos proyectos esto no es posible. Así que si tu página requiere el registro público, y se te está llenando de sploggers, usuarios spam o no deseados, sugerimos este plugin, Wangguard. Wangguard no es del todo gratuito, pero lo es para páginas de menos de 5,000 usuarios al día mientras sea para uso personal (un blog por ejemplo): “WangGuard Always will be free for personal use, this means that whenever you have less than 5,000 daily registrations or you make less than $200/month, you never have to pay anything for WangGuard.” Puedes usarlo sin problemas, y si tienes una página con más de 5000 registros, o es profesional, paga la opción siguiente. Para poder activar el plugin, necesitas una clave API desde la página de WangGuard (registrándote), y con ella pegarla en la configuración del plugin. Tiene muchas opciones, y no sólo se puede instalar en WordPress, también en otros CMS. Es importante saber que el plugin APRENDE con el tiempo, y los creadores sugieren una semana para que el plugin coja algo de experiencia y empiece a reconocer bien a los sploggers.    

Diseño Web, Gestores de contenidos, Seguridad

Como activar SSL para Wordress cuando tienes un certificado, por ejemplo de Let’s Encrypt

/

Creo que casi todos habéis oído que Google premia, y lo hará más, a las webs que tienen certificado, es decir que funcionan con SSL. Las que puedes entrar con https://.. Y como antes eran caros, se abrió un proyecto (una apuesta de varias empresas) para obtener certificados gratuitos: Let’s Encrypt. Muchos proveedores de hosting, como nosotros, estamos presentando esta opción a los clientes. Así que ahora los clientes pueden tener certificado de manera asequible. Pero recordad que la primera parte, la activación, debe hacerse a nivel del servidor, o sea el proveedor (a menos que tengáis un servidor dedicado). Vamos a hablar del tema en el que ya tenemos un certificado…¿cómo hacemos que mi web en WordPress funcione con SSL? Hoy os contamos dos maneras: Por plugin (más sencillo): Hay un plugin excelente, que nos facilita la activación de https en WordPress. No activa lo necesario y pone los códigos que necesitamos. Really Simple SSL es perfecto para eso. Las estadísticas lo avalan: 4,9/5 de puntuación, y más de 40.000 instalaciones activas. Esto es lo que hace: El plugin soluciona la mayoría de los problemas de WordPress con ssl, como el tan discutido problema de balanceo de carga, o cuando no se ha definido ninguna variable del servidor. Todas las peticiones entrantes se redirigen a https. Si es posible con .htaccess, en caso contrario mediante javascript. La url del sitio y la url de portada se cambian a https. Tu contenido inseguro se repara reemplazando todas las urls http:// por https://, excepto enlaces a otros dominios. Se hace de manera dinámica, así que no se hacen cambios en la base de datos (excepto en el siteurl y homeurl). Por lo tanto te lo recomendamos. Olvídate de problemas. Manualmente. Tienes que añadir en httaccess para hacer las redirecciones que llegan:   RewriteEngine On RewriteCond %{SERVER_PORT} 80 RewriteRule ^(.*)$ https://tudominio.com/$1 [R,L] Y luego fuerza SSL en WordPress:   define(‘FORCE_SSL_LOGIN’, true); define(‘FORCE_SSL_ADMIN’, true);

Diseño Web, Gestores de contenidos, Trucos

Hacer una copia local de tu Prestashop para poder trabajar con él sin estar en producción

/

Ayer nos hizo una petición un amigo, cómo hacer una copia de un Prestashop activo para poder trabajar con él. Porque si, lo puedes poner en mantenimiento, pero entonces los clientes dejan de verlo y, si va a tardar (por ejemplo un cambio de plantilla) o no estás seguro si lo que vas a hacer funcionará, no es buena idea. Consejo: No hagáis cambios en producción (y menos en viernes). Nosotros solemos trabajar sobre copias de las webs, en nuestros servidores o en otros directorios del hosting del cliente. Este método sirve para ambos casos.  También para mover tu web a otro hosting. Si no tenéis otro servidor, y vuestro hosting está limitado de espacio u otros recursos (los Prestashop “tiran” mucho de recursos) podéis instalar un WAMP en vuestro ordenador y seguir estos pasos. Eso si, entonces no podréis trabajar desde varios ordenadores o mostrarlo fácilmente al cliente al ser una instalación local. Pasos: Haz una copia de los ficheros (por FTP) y de la base de datos (por phpMyAdmin o lo que te deje el hosting). No sólo porque vas a necesitarla, sino que siempre es una buena costumbre antes de modificar nada. Nosotros SIEMPRE hacemos una copia de seguridad antes. Así puedes volver atrás sin problemas. Si gestionas otro servidor puedes crear otro hosting con un subdominio (por ejemplo prueba.tudominio.com) y subir ahí los ficheros. Si quieres hacerlo en tu hosting actual, crea otro subdirectorio en la raíz y llámalo, por ejemplo DesarrolloX8rTL. Los dígitos del final son una manía de informáticos por hacer un poco más difícil que entre “gente no deseada”. Sube los ficheros a ese directorio o al nuevo hosting. Crear en el hosting que estés usando (el nuevo o el actual) una nueva base de datos. Llámala como quieras desarrollo_web por ejemplo. Importa la base de datos que salvaste, la copia de seguridad, a esta nueva base de datos. Ya tienes una copia de la información de la web en otra base de datos. Ahora CUIDADO. Si entras en la web de desarrollo (tudominio.com/desarrollo_web) está apuntando a la base de datos antigua. Esto es un fallo que hemos cometido todos. Te pones a trabajar haciendo cambios y se hacen en la web original, porque la copia está apuntando a la base de datos original. Repito CUIDADO. Para solucionar esto tienes que ir al directorio config de la copia y editar el fichero settings.inc.php. Ahí verás un campo que pone define(‘_DB_NAME_’, ‘XXX’) . Cambia ese XXX por el nombre de tu nueva base de datos, la de desarrollo. Si has creado la base de datos en otro servidor tendrás que modificar el Server también…pero eso depende de cada caso. En principio sólo el DB_NAME. Guarda los cambios. Ahora si intentas entrar en la web no funcionará, pero si podrás (seguramente) entrar en el backend (tudominio.com/adminXXXX donde XXXX son unos caracteres que cambian en cada instalación). Esto es porque hay que decirle a Prestashop que tiene otro directorio. Entra en el backend con el usuario y contraseña originales (ten en cuenta que todo eso es igual al ser una copia). Ve a Preferencias>Seo+URLs y baja hasta el apartado donde pone Dominio de la tienda y Directorio raíz. Ahora los cambios dependen del procedimiento usado para hacer la copia: -Cambia Dominio de la tienda si has creado otro hosting, por ejemplo el prueba.tudominio.com de antes. Si estás en el mismo hosting (en un subdirectorio) no lo toques. -En Directorio raíz tienes que poner el directorio de la copia. Si  lo has puesto en el raíz de otro dominio no lo cambies. Si lo has creado en el mismo hosting pero en un subdirectorio, pon el subdirectorio (por ejemplo /desarrollo_web/). Guarda los cambios (pero no salgas del backend). Prueba a entrar en el frontend de la copia. Por ejemplo http://prueba.tudominio.com o http://tudominio.com/desarrollo_web). Debería entrar. Si no entra vuelve al backend y limpia caché. Ahora para verificarlo, pon la copia en mantenimiento y vete a la original. Si la original no ha cambiado está todo bien, estás en una copia y puedes actualizar, modificar o hacer lo que quieras. Si no revisa los pasos. Con esto ya debería estar. Si no puedes hacer el paso 7 porque no entras en el backend, tendrás que cambiar las url en la base de datos. Eso lo explicaremos en otro artículo. Esperamos que os sea útil.    

Scroll al inicio