Diseño Web

Diseño Web, Información Tecnica, Sistemas, Trucos

Crear un archivo phpinfo para ver módulos, parámetros y versión de php

/

Este es uno de esos artículos que deberíamos tener desde hace tiempo en el blog, porque es básico…pero uno siempre vuelve a buscar cómo hacerlo. Así que hoy corregimos esa falta. Si quieres ver toda la información sobre el php de tu servidor (dedicado o virtual), puedes hacerlo por línea de comando usando los siguientes comandos: php -i php -v Pero no siempre tienes acceso ssh, y la presentación de esta información no es ideal. Afortunadamente podemos crear un archivo phpinfo.php en nuestro servidor, y ejecutarlo desde el navegador, para tener toda la información: módulos, versiones, parámetros, límite de descargas, límites de memoria etc. Todo. Nota: no tiene que llamarse phpinfo.php. Muchas veces lo puedes querer crear con otro nombre, para que la gente no obtenga esa información fácilmente (cuanta más información, mejor atacan). Cómo crear el archivo phpinfo. Abre un editor de texto, o en tu ordenador, o por línea de comando en el servidor (nano, vim etc). Pon el siguiente código: <?php phpinfo(); ?> Guarda le fichero con el nombre que quieras acabado en php. Por ejemplo phpinfo.php, o info.php, o loquesea.php. Ahora accede por el navegador en http://www.tudominio.com/rutaquehaspuesto/phpinfo.php Debería abrirse una pantalla como esta  en el navegador con toda la información. Para más opciones de phpinfo mira este manual.  

Diseño Web, Gestores de contenidos

Limitar los intentos de inicio de sesión en WordPress: Login LockDown

/

No hemos hablado de este plugin antes porque la mayoría de los plugins de seguridad de los que hemos hablado traen esta funcionalidad. Pero si, por algún motivo, no queréis instalarlos, este cumple su función a la perfección. Y dicha función es básica para la seguridad: limitar los intentos de inicio de sesión. Login LockDown  es un plugin que restringe cuantas veces puede un usuario intentar iniciar sesión. Esto minimiza algo los ataques de fuerza bruta (cuando alguien intenta probar muchas contraseñas). ¿Lo voy a necesitar? Para el que no sepa, nada más tener un servidor o web online tienes gente (o robots) probando contraseñas. Cuanto más accesos tenga tu página, cuanto más famosa, más intentos. Esto limitará bastante este riesgo de seguridad. Por ejemplo, en una página que atacaban mucho, tenemos los intentos limitados a uno. Esto ha frenado mucho los ataques. El plugin por defecto bloquea la IP tras 3 intentos fallidos. Esto se puede cambiar desde las opciones del plugin. Y si, pueden cambiar fácilmente de IP, pero repetirá el proceso. Obviamente los administradores pueden desbloquear IPs desde la configuración. ¿Qué pasa si soy yo el que me equivoco? Pasa…os lo aseguro :-D. No pasa nada, esperad una hora (o lo que tengáis configurado) y se desbloquea.

Diseño Web, Gestores de contenidos, Prestashop

Prestashop: plugin de pestañas novedades, más vendidos,rebajas y destacados en la portada.

/

Todavía hay pocos módulos compatibles con la versión 1.7 de Prestashop, porque es otra versión que ha cambiado la cómo se hacen ciertas cosas y no todo es compatible con las anteriores. Hoy os dejamos uno gratuito para Prestashop 1.7 que te permite poner unas pestañas en la portada: la pestaña novedades, la pestaña más vendidos, la de rebajas (descuentos) y la pestaña destacados. Algo que necesitamos en casi todas las tiendas (al menos alguna de esas pestañas). Si, el propio Prestashop viene con esos módulos, pero muchas veces o no funcionan bien o no aparecen como queremos. Los módulos, son de MyPresta, los puedes descargarlos de: Novedades. Más vendidos. Destacados. Rebajas. Eso si, para que funcionen los módulos no basta con instalarlos, hay que hacer unos pasos de configuración que puedes comprobar en la siguiente guía (inglés). Si la quieres en español lo tienes en este artículo.    

Diseño Web, Gestores de contenidos

Plugin Loco Translate para traducir temas y plugins de WordPress desde el backend.

/

Muchas veces, cuando adquieres un tema, te encuentras que alguno (o todos) los términos no están traducidos a tu idioma. No es difícil traducir un tema de WordPress porque los ficheros del idioma están en formato .mo y .po y sólo tienes que copiarlos con el nombre de tu idioma y, hasta ahora, editarlos con un programa tipo Poedit. Después lo subes a la web. Pero es un proceso algo tedioso: mira el término que falla, baja el fichero, edítalo, súbelo, comprueba que está bien, si no repite. Para eso han sacado este plugin Loco Translate para WordPress, que te crea un editor MUY similar a Poedit pero en el backend de tu web. De esta manera, sólo tienes que entrar en tu backend, en la opción del menú que pone Loco y ponerte a traducir en el idioma que quieras. Además, esto te permite crear un usuario y darle acceso a manejar este plugin. Así, puedes poner a gente a traducir (colaboradores, traductores) tu plantilla desde sus oficinas o casa. Poco más que decir, sencillo , simple y cómodo. ¡ A traducir!

Diseño Web, Gestores de contenidos, Prestashop, Trucos

Cómo crear un tema hijo en Prestashop

/

Hace un tiempo hablamos sobre cómo crear temas hijo en WordPress, hoy os lo dejamos para Prestashop. Los temas hijo se crean para poder hacer modificaciones sobre el tema principal, sin correr el riesgo que una actualización del mismo borre todas las modificaciones. El tema hijo hereda todas las opciones y funcionalidades del padre, incluso las que aparecen cuando actualizamos este, pero siempre prevalecen las modificaciones realizadas en el hijo.  Es decir, podemos actualizar sin miedo a Por ejemplo es muy habitual crear temas hijo para modificar el css. El tema hijo será igual que el tema padre, pero con las modificaciones del CSS realizadas. Además, estas modificaciones son las que se cargarán, no funciona como los plugins de modificación de CSS que insertan nuevas reglas (lo que al final carga la web al tener un CSS con reglas doble). Prestashop, a partir de la versión 1.7, permite crear estos temas de manera sencilla y aquí os explicamos cómo. Pongo como ejemplo crear un tema hijo del classic que viene con prestashop. Pero puedes elegir otro tema. Ve a la carpeta /themes y crea una carpeta con el nombre del tema hijo. Por ejemplo /classichijo. Entonces deberías tener en /themes la carpeta /classic y la carpeta /classichijo. En esta carpeta /classichijo tienes que tener los siguientes ficheros o carpetas: – preview.png     (es lo que aparecerá en el apartado temas del backend como previsualización de tu tema). – config                 (directorio) –/config/theme.yml   (fichero de configuración dentro de la carpeta anterior). Lo mejor es que los copias del tema padre. Ahora edita el ficher theme.yml del tema hijo. En la cabecera tienes que poner al menos (pon las líneas que no aparezcan, y cambia los nombres de los temas para tu caso) parent: classic name: classichijo display_name: Mi Tema Hijo version: 1.0.0 assets: use_parent_assets: true Esto le dice el nombre de tu tema (puedes poner lo que quieras en name, display name y versión). Ve al backend y elige el tema hijo como el activo. A partir cualquier fichero que quieres modificar lo puedes poner en el hijo. Por ejemplo si quieres cambiar el css puedes copiar la carpeta /assets/css y editar el fichero theme.css en el hijo. Una gran mejora en Prestashop 1.7 que nos hará la vida más sencilla a todos. Más información aquí.

Diseño Web, Gestores de contenidos, Soporte, Trucos

Cómo arreglar plantillas de Woocommerce desactualizadas

/

Woocommerce es un plugin para WordPress que permite convertirlo en tienda. Un plugin MUY usado. Muchas plantillas la traen ya dentro de las mismas para ofrecerlas como compatibles con Woocommerce.  Y en muchos casos añaden modificaciones (de aspecto para adaptar el plugin a la plantilla). El problema surge cuando Woocommerce se actualiza (por seguridad o nuevas funcionalidades), algo que es imprescindible, y no lo hace la plantilla. Entonces podemos tener problemas de seguridad, o incluso que no sea compatible y se “rompa” la funcionalidad de tienda en nuestra web. ¿Qué solución tenemos? Lo explicamos en el artículo. Solución. Lo primero que debemos hacer es ir siempre a la web del desarrollador de la plantilla, o donde la descargamos o compramos para ver si el creador la ha actualizado. Él es quien sabe mejor que nadie cómo hacerlo (sabe qué modificaciones ha hecho) y muchos actualizan sus plantillas. Entonces sólo tengo que descargarme la nueva versión y actualizar. Pero algunos desarrolladores  no son tan activos, o en ciertas ocasiones hemos instalado (o más bien el cliente) una plantilla obsoleta o abandonada que ya no se actualiza. ¿Qué hacemos entonces? Tenemos que realizar la actualización de los ficheros modificados de Woocommerce a mano. Os indicamos cómo: Suponemos que has actualizado Woocommerce a la última versión. Primero tenemos que descubrir que ficheros modificó el desarrollador y están desactualizados respecto a la nueva versión de Woocommerce. Para ello vamos, en el backend, a Woocommerce > Estado del Sistema Bajamos hasta la sección del final que pone Plantillas. Estos son los ficheros modificados y algunos deberían estar marcados con un mensaje que indica que está desactualizado. Estos son los que hay que arreglar, apúntalos. Haz una copia de seguridad de dichos ficheros (haz una copia en otro lado). Copia los ficheros originales actualizados que puedes encontrar en  wp-content/plugins/woocommerce/templates/ en la ruta de los ficheros cambiados de tu plantilla. Abre ambos ficheros (nuevos y viejos) con un editor tipo Notepad++ y observa los cambios que haya hecho el desarrollador.  Puedes compararlos con una funcionalidad de Notepad++ de la que hablaremos mañana, o con otro programas como Meld. Pon esos cambios en el fichero nuevo. Comprueba que todo funciona y se ve como debería verse. Esperemos que te sea de ayuda.

Diseño Web, Webs

Cómo saber qué gestor de contenidos tiene una web

/

Alguna vez nos lo preguntan los clientes…¿oye con qué gestor de contenidos está hecha esta web que me gusta? Hoy, os dejamos varios recursos que os dicen eso y, en algún caso, mucho más. Páginas web para detectar CMS. Netcraft: de las más veteranas y con información más clara y detallada. Builtwith. De mis preferidas para esta función. Además de decirte el gestor de contenidos te dice sobre qué tipo de servidor web funciona, en qué está programado, los certificados que tiene, códigos y plugins adicionales….mucha información. Probaría esta o la anterior primero. W3Techs. Poco visual, pero es otra que da mucha información además del CMS. Sin duda otra a probar. Allora. No da tanta información como las anteriores, pero si da el CMS y algún contenido más. Online Web Tool: Indica sólamente el CMS que usa la web. WhatCMS.org. Poca información. Sólo da el CMS (y no en todos los casos). Guess. Otra que sólo dirá el CMS, si lo detecta. Extensiones para navegadores. Además de hacerlo online, puedes instalar extensiones en el navegador. Te dejamos el más usado. Wappalyzer: Hemos dejado el enlace para Chrome pero también está para Firefox. De da información sobre la tecnología que usa una web. Desde servidor web, plugins, cms, programación etc.

Diseño Web, Internet

Pasarelas de pago con plugins gratis para Woocommerce: Redsys y CECA

/

Si quieres configurar una pasarela de pago lo más seguro es que sea del sistema Redsys o CECA. En general la más probable es Redsys porque cada día más bancos se adhieren a ese sistema. Puedes ver en estos enlaces los bancos de Redsys y de CECA. ¿Cómo los configuro en una tienda de WordPress con Woocommerce? Obviamente usando un plugin pero depende del sistema. Lo primero es solicitar el TPV virtual en el banco. Dependiendo del banco y del tipo de cliente que seas te pondrán unas condiciones más o menos complicadas. En algunos casos necesitan ver la tienda, las condiciones de pago, transporte etc. En otros te dan la información (sistema, usuario, url, contrasea, identificador del tpv etc) directamente. Una vez sabes el sistema que es, tienes que descargarte el plugin. Si es Redsys es fácil, el propio Redsys (GRACIAS) tiene un plugin en la sección de descargas para casi cualquier sistema de tienda online, Woocommerce incluido. Ahí puedes ver también la guía de integración. En general es sencillo, instala el módulo, actívalo, rellena los datos y haz las pruebas en el entorno de prueba y con las tarjetas de prueba. Una vez todo está ok pasa a producción. Si es CECA el problema es que no tienen opción de descargar los módulos y tenemos que usar módulos de terceros (menos fiables, con más opciones de fallos). Hay muchos de pago, desde 30-40€ en adelante. Podéis usar uno de esos. Pero os vamos a dejar un módulo de un usuario, juanmirod, que ha desarrollado un plugin, lo mantienen y lo ha compartido en Github (gracias también a él). De nuevo el proceso es similar, instalarlo, probarlo en el entorno de pruebas con las tarjetas de prueba, y luego pasar a producción. Os recomiendo ver los datos de este post donde explica cómo configurar CECA, y cómo quitar un mensaje innecesario sobre los datos de la tarjeta. En este otro post del mismo autor, explica como solucionar un posible error en el que no se informa a la tienda cuando el pedido está pagado. Esto puede pasar en ambos sistemas. Con esto, tenéis la información necesaria para configurar vuestro TPV virtual en una tienda de Woocommerce.

Diseño Web, Noticias SmythSys, Trabajos, Webs

Grupo Dasana: nueva web. Servicios inmobiliarios y de oficina virtual en Madrid

/

Os dejamos una nueva web que sacamos hoy. La del Grupo Dasana, unos clientes desde hace tiempo y amigos. Este empresa es ofrece servicios inmobiliario con experiencia de varios años, y además también gestionan oficinas virtuales. La página web es una página empresarial sencilla, en tonos corporativos, explicando las funciones de la empresa, sus servicios y modo de contacto, además de dónde se les puede encontrar (Redes Sociales, portales inmobiliarios como Fotocasa etc). Además, nos pidieron incluir un apartado para poder subir algunos de los muchos inmuebles que gestionan, y se lo activamos en la portada. Esta web sale ha en https, como demandan las tendencias del mercado, es ligera y adaptada a cualquier dispositivo. Esperamos os guste.

Diseño Web, Información Tecnica

Qué es SASS y cómo se pueden editar las hojas creadas en este lenguaje

/

Desde la última actualización de Prestashop (1.7) alguna gente nos ha preguntado sobre SASS, porque la plantilla por defecto viene con las hojas de estilo en este lenguaje. Os explicamos qué es y cómo editarlo. SASS (Syntactically Awesome Stylesheets), es un metalenguaje de hojas de estilos en cascada (como Less o Stylus), diseñado por Hampton Catlin y desarrollado por Nathan Weizenbaum. Después de crearse las hojas de estilo CSS, la tendencia fue ir creando pequeñas hojas de estilo para cada cosa (en vez de una grande). Una llamaba a otra y así todo estaba más ordenado. Pero claro, es difícil saber dónde está cada hoja. SASS está diseñado para poder editar estas hojas en cascada. Pero además el lenguaje que usa SassScript puede usar variables, expresiones matemáticas y funciones. La implementación original está escrita en Ruby y por eso en Mac y Linux SASS es fácil de instalar (como un paquete), pero en Windows hay que instalar Ruby (por ejemplo con Rubyinstaller). ¿Cómo manejo SASS?  Eso depende mucho de si lo que quieres es crear hojas de estilo para tu web o editar unas creadas. También si quieres instalarlo o usar algo online. Pero disponemos ya de unas herramientas que nos permiten editar hojas en SASS. Os dejamos algunas, si orden de ningún tipo. Koala: Una GUI para compilar SASS que además es opensource y multiplataforma (Windows, Mac, y Linux) Compass: Un framework en código abierto hecho con SASS para crear en SASS. Digamos que es una extensión de SASS con funciones y utilidades. Tiene una app a modo de GUI. Scout: Scout te evita el “rollo” de tener que instalar Ruby. Viene como paquete con Ruby instalado y está pensado para pasar de .scss a css y editar y trabajar directamente, sin tener que configurar nada. Sassmister: un entorno web para jugar en SASS. Te permite crear y editar online, y trabajar con SASS sin tener que instalar nada. Bourbon: Es una librería para SASS, pero tiene un grid framework como Neat. Susy: otro Grid Framework que usa SASS.  

Scroll al inicio