Diseño Web

Diseño Web, Gestores de contenidos

Custom Sidebars: plugin para WordPress para crear tus propias barras laterales

/

No se por qué pero nunca tengo las barras que quiero en las plantillas de WordPress. Siempre me falta o una barra específica o quiero una barra lateral con un contenido especial sólo para ciertas páginas. Por ejemplo una barra lateral para la página de blog y otra para la página de contacto, o para una página en concreto. Todo esto puede hacerse con Custom Sidebars.  Instalas el plugin y te permite, en widgets, crear las barras que quieras. Luego puedes especificar cuando quieres que aparezcan (lo que también se puede hacer en las entradas o en las páginas). Esas barras puedes hacer que sustituyan a barras normales en páginas concretas, puedes poner barras para entradas de una cierta categoría, para archivos o para búsquedas. Por ejemplo me suele gustar tener barras específicas para la portada o para la página de contacto con contenido específico para cada página.

Diseño Web, Gestores de contenidos

Plugins qTranslate X para webs con contenido multilingüe

/

Hace tiempo recomendamos qtranslate para webs con contenido en varios idiomas. El desarrollador abandonó el desarrollo del proyecto, pero siguió en un “fork”, mqtranslate. Ahora este plugin ha evolucionado a qTranslate, que no sólo tiene todas las ventajas de los anteriores, sino que incluye funcionalidades que me han hecho recomendarlo de nuevo. Ahora mismo es el plugin que recomendaría para webs con contenido multilingüe. La instalación de qTranslate X es sencilla, como cualquier plugin de WordPress. Al ser compatible con los anteriores no hay que hacer nada porque importa los datos y las configuraciones. Veréis que la interfaz cambia algo, desaparecen las pestañas de idiomas en el backend para volverse unos botones de idiomas. Por lo demás es igual, simplificando también el código (ahora se admite [es]…..[:] para líneas de idioma). Pero lo que más me ha gustado de qTranslate es su compatibilidad con otros plugins, que podéis ver aquí. En especial destaco su compatibilidad con los plugins de SEO más conocidos. Tiene un plugin para WordPress SEO by Yoast, y para All in One SEO Pack. Esta es una funcionalidad que muchos buscábamos ya que te permite algo ESENCIAL, optimizar tu SEO dependiendo del idioma. Es decir puedes cambiar el título del post, las palabras claves y el extracto dependiendo del idioma, lo que va a facilitarte el poder posicionarte mejor en diferentes idiomas.  Nosotros lo hemos probado con el primero (el plugin de Yoast) y es sencillísimo de usar. Además, tiene un plugin de sitemap especializado para poder usar estas funcionalidades anteriores mejor.  Añade a eso plugins para WooCommerce, para ACF….(y los que están por venir) y se convierte en una fantástica herramienta que además promete mucho en lo que está por venir.  

Diseño Web, Gestores de contenidos

Duplicator: mueve una web de WordPress de un hosting a otro

/

Duplicator es un plugin excelente para los creadores de Webs en WordPress, o para aquellas personas con web que necesiten moverla a otro proveedor. Normalmente trasladar una web de un hosting (o de local) a otro es un proceso no demasiado complicado pero manual. Traslado de ficheros, cambio de base de datos, cambio en el fichero de configuración, cambio del site URL etc. Con este plugin sin embargo es tan fácil como hacer el paquete desde la web inicial, instalar WordPress desde creo en el nuevo sitio, meter el plugin y volver a subirlo. Un gran descubrimiento jeejejjeje  

Diseño Web, Trucos

Cómo identificar móviles y tablets por CSS

/

Muchas veces haciendo webs tienes que poner configuraciones especiales para tablets o smartphones, o incluso para ipad, iphone o móviles diferentes. Porque quieras poner un vídeo de una resolución diferente,  o una imagen más pequeña, o deshabilitar ciertos módulos o divs para móviles o tablets que no sean realmente responsive. Os decimos como en resumen: Para ello vamos a usar el comando de CSS media, que nos permite apuntar a varias características del dispositivo (por ejemplo máxima o mínima anchura,max-device-width,aunque también se puede identificar por orientación o por resolución, min-device-pixel-ratio). Vamos a ver como ejemplo los iPad y los iPhone para entender el código. De ahí se puede extrapolar a todos los dispositivos. IPAD: Afortunádamente Apple nos ha dejado identificar los iPad (1-5 y los mini) con el mismo comando. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* aquí los estilos */} Si queremos diferenciar entre el iPad en vertical u horizontal podemos poner la siguiente línea: and (orientation : landscape) o and (orientation : portrait) antes de la parte de estilos ({/*…..*/} Esto se puede hacer en todos los apartados y modelos en este artículo. También puedes identificar modelos específicos de iPad con otros and. Más información aquí. iPhone:  El iPhone 6 se puede identificar con este código: @media only screen and (min-device-width : 375px) and (max-device-width : 667px) { /* estilos */} El iPhone 6 plus: @media only screen and (min-device-width : 414px) and (max-device-width : 736px) El iPhone 5 y 5s: @media only screen and (min-device-width : 320px) and (max-device-width : 568px) El iPhone 2G y 4G: @media only screen and (min-device-width : 320px) and (max-device-width : 480px) Al final para el resto de dispositivos puedes optimizar estas reglas. Por ejemplo yo suelo poner reglas para mmax-device-width: xxxpx  y otras para mayor. Así puedo identificar móviles, tablets etc. Al final, como quieres poder identificar un móvil, ya sabes que no va a tener mayor resolución que, en el momento actual, 700-800px. Con el tiempo este número puedes ir variándolo. Con cosas como: @media (max-width: 600px) puedes identificar sólo dispositivos pequeños tipo móviles.

Diseño Web, Gestores de contenidos, Trucos

La manera correcta de editar el CSS de tu plantilla de WordPress

/

Nosotros trabajamos mucho con WordPress para hacer páginas webs. Y, aunque usamos plantillas probadas y muy bien hechas, cada cliente requiere su personalización y esto implica editar, entre otras cosas, el CSS. Si tu te has puesto a trabajar con WordPress tendrás que hacerlo pronto. Eso si, hay maneras mejores que otras, y os diremos cuales hoy. 1. Editor de la WordPress. En el apartado Apariencia>Editor tienes una opción para editar tus ficheros de esctilo y también las hojas de estilo (están debajo). Eso si si el autor de la plantilla ha usado sub-hojas de estilo (unas que dependan de otras) puede que WordPress no te muestre todas. No recomiendo este método aunque sea cómodo por dos razones: a) estás modificando la plantilla, si tienes un desastre (virus etc) vas a tener la plantilla original en tu ordenador pero no las modificaciones. b) La razón más importante, si el autor decide actualizar la plantilla (mejoras, motivos de seguridad etc), y le das a actualizar pierdes todas tus modificaciones. 2. Editar los ficheros por FTP. Obviamente siempre tienes esta opción, pero tienes los inconvenientes del apartado anterior, además de ser más engorroso porque tienes que andar subiendo y bajando ficheros. Esto durante la creación de una web (donde los cambios son constantes) es una lata. 3. Usar  CSS personalizado de la plantilla o de un plugin.  Para mi una de las opciones más cómodas y mejores. Mi manera de trabajar es que pruebo los cambios de CSS en Chrome con “Inspeccionar Elemento” y luego, cuando me gustan, los voy poniendo en el apartado de CSS personalizado. Cuando he acabado el proyecto guardo un fichero con este apartado junto a la plantilla. La gran ventaja de este método es que el autor puede actualizar la plantilla o alguien sobreescribir los ficheros y no pasa nada, esto no se modifica. Además si es un plugin tu puedes, en caso de catástrofe, subir la plantilla original que te descargaste, y los cambios están ahí, porque están separados. La mayoría de las plantillas profesionales incluyen un apartado de CSS personalizado, recomiendo que lo uses. Si no la tienes puedes instalarte Jetpack, que ahora (entre otras cosas interesantes) incluye un módulo de este tipo. Si no puedes descargarte Simple Custom CSS que, como indica, es muy simple y cumple la labor perfectamente. 4. Usar “Child Themes” (temas hijos): Este es otro método muy recomendable y es hacer lo mismo que hacen los creadores de las plantillas. Aunque hablaremos del método otro día, consiste en poner una línea en tu plantilla que llame a tu hoja de estilos personificada. Así la plantilla original sigue intacta y tu puedes modificar la otro como quieras. Espero os sirva para personalizar vuestros temas de WordPress.  

Diseño Web, Trucos

Device Mode en Chrome. Emular diferentes dispositivos para ver si una web es responsive

/

Hace tiempo os dejamos varias páginas para comprobar cómo de “responsive” es una página web. Es decir emular cómo responde una web a los cambios de dispositivo, si se adapta bien, si hay errores etc. Esto es ahora muy importante porque cada día se accede más a las páginas web desde dispositivos móviles como teléfonos, tablets e incluso e-books. Chrome nos facilita mucho este trabajo desde el modo dispositivo o device mode que os enseñamos a usar en este vídeo.

Diseño Web, Gestores de contenidos, Seguridad

iThemes Security y BulletProof Security. Dos plugins de seguridad para WordPress

/

Hace unos días os hablamos de WordFence, un fantástico plugin para mantener la seguridad en WordPress (algo cada día más importante). Hoy os dejamos dos más muy recomendables. No podemos insistir suficientemente en la importancia de estos programas para que vuestras páginas estén limpias, os refuercen la seguridad y os avisen de ataques e infecciones. Cuidado al usarlos y configurarlos, eso si, porque como son potentes un fallo puede ocasionar la caída de la web (hacer copia de seguridad antes de cada cambio).  iThemes Security es un plugin muy completo y muy descargado. Sigue cuatro pasos “Obscure, Protect, Detect, Recover”, es decir oculta, protege, detecta y recupera. Lo primero te permite analizar tu instalación y ver fallos de seguridad, reforzarla ocultando el backend, cambiando el sufijo de las tablas de la base de datos, mira la fortaleza de las contraseñas, banea usuarios y hosts que intentan entrar con contraseñas equivocadas, monitoriza tu web para detectar cambios y modificaciones maliciosas y además te permite hacer copias de seguridad periódicas para poder restaurarlas en caso de problemas. Es compatible con el plugin de copia de seguridad BackupBuddy  de iThemes. Muy directo y sencillo de usar para el que no tiene ni idea. Bulletproof Security:  Otro plugin de seguridad que, en este caso, toma el enfoque de proteger tu instalación de WordPress con configuraciones (tipo firewall) del fichero .htaccess con la idea que, como es lo primero que se lee, cuando alguien intenta inyectar código o cambiar configuración, si se le para a nivel de htaccess no llega ni a tocar tus ficheros. Parte de lo que te permite en modo gratuito es tener un firewall a nivel htaccess, monitorización y control de quien entra y quien sale (login) de tu web y copia de seguridad de la base de datos. En modo Pro tiene muchas otras funciones. Al final es que probéis y veáis cual os gusta más personalmente. Si estas no os gustan también existen y tienen buena fama Quttera Web Malware Scanner y Sucuri Security aunque creo que en estos hay que registrarse o incluso pagar tras un primer periodo gratuito.  

Antivirus, Diseño Web, Gestores de contenidos, Seguridad, Soporte, Spyware/Spam, Trucos

Escanners online de Malware gratuitos para páginas web

/

¿Os preguntáis cómo se os infectan los ordenadores? Muchas veces por navegar en páginas infectadas. Por lo tanto los que tenemos o administramos páginas web tenemos que ser doblemente cuidadosos con su seguridad. No sólo nos pueden entrar para conseguir datos (usuarios/claves etc) sino para poner código que infecte ordenadores. Además los ataques a las web no paran, si tienes un firewall podrás ver como están todo el rato intentado atacar tu web (hay gente que se aburre). El día 24 sin ir más lejos, por la tarde, estuvimos parando unos intentos de atacar una página de WordPress desde Rusia. ¿Qué puede hacer si tienes una página web? Sobre todo analizarla cada cierto tiempo y mantenerla actualizada (código y plugins). Es una de las razones por las que ahora recomiendo dinámicas sobre estáticas, porque podemos hacer que se actualicen solas, instalar firewall, programas de seguridad (alguno más pondremos pronto) etc etc. Como curiosidad os dejo algunos consejos para mantener WordPress seguro (muchas de estas cosas las hacen los plugins de seguridad, dentro de unos días os daremos alguno más). Eso si, si una persona con conocimientos se pone cabezota, al final entra. Por esta razón Google está ahora muy serio y en seguida saca el aviso de “página infectada” si detecta algo. Y hace bien, es bueno tanto para usuarios como para administradores. ¿Qué puedo hacer si se ha infectado la página? Limpiarlo obviamente. Lo primero es ver qué se ha infectado. La herramienta para Webmasters de Google da alguna indicación, pero para hacer un mantenimiento preventivo o comprobarlo también están estos analizadores o escanners online gratuitos que os dejo. Nota: no detectan todo…pero por ejemplo si lo que Google detecta.  Eso si recomiendo siempre luego seguir analizando tanto con un antivirus en el servidor, como descargando la web y analizándola con un antivirus o con VirusTotal, o con plugins de seguridad. Estas herramientas las podéis usar tanto en webs estáticas como dinámicas.  No limpian pero te dicen dónde está el error. Sucuri: de los más famosos, fiables y recomendado incluso por Google. Pon tu web en la casilla, dale a analizar y te dice si tienes enlaces no fiables, código insertado, ficheros etc.  Gracias a ella pudimos encontrar ficheros de malware y código insertado en el header. Tiene plugins para WordPress interesantes de los que hablaremos. VirusTotal: el gran analizador online de ficheros con muchos motores también analiza webs. Lo va haciendo cada cierto tiempo y si quieres puedes ver el último análisis o forzarle a que haga uno. Te da los resultados de unos 50 motores distintos. Quttera: Otro analizador que también tiene plugins para WordPress y es sencillo de usar. Así que si tenéis páginas web recomiendo analizarlas cada cierto tiempo con estas herramientas. Sólo detectan malware de clientes, no backdoors etc. Por eso si está infectada es un primer paso, después de limpiar lo que estas detecten recomiendo analizar la web con un antivirus fichero por fichero, borrar caches, usar una copia de seguridad o instalar plugins de seguridad que analicen bien la web. Por cierto…cada día es más importante tener un firewall en las webs para evitar estas cosas.

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

Wordfence: un plugin de seguridad para WordPress muy recomendable

/

Como WordPress es uno de los sistemas más usados, y por lo tanto más atacado, en las páginas web, cada vez son más los clientes que se preocupan por la seguridad.  Hoy os recomendamos un gran plugin para cerrar vuestro WordPress y evitar “sorpresas”. Wordfence es un plugin de seguridad con un montón de funciones. Veamos algunas. Lo primero que hace al instalarlo es pedirte un correo de administrador. Lo recomiendo porque te avisará ahí si ha intentado entrar alguien y cualquier otro evento en tu web. Después analiza tu página (como un antivirus) para detectar Malware en el código y posibles cambios en plugins, código de wordpress y temas (comparándoles con una base de datos que tiene). Puede analizar también partes del servidor que no son tu web, como otros directorios, imágenes, código tuyo etc). Cuidado aquí, usad la cabeza, porque si habéis cambiado vosotros el tema o algún plugin puede detectarlo. Este escaneo está programado y es periódico. En el panel de Wordfence te avisa enseguidad de fallos de seguridad como lo que no está actualizado (plugins y temas) o contraseñas débiles de usuarios. También tiene funciones de firewall, bloqueando amenazas tanto de usuarios como de ataques externos con reglas que tiene y que va cambiando en las actualizaciones según salen nuevas amenazas.  A mi me avisó hace poco de una IP que intentaba entrar como administrador. Si yo no acepto, le rechaza.En este firewall también tienes informes de quien entra en tu web, quien son humanos y quien bots, los crawlers de los buscadores, quién y cuando te ataca y mucho más. Ips bloqueadas para acceder a la web, Ips bloqueadas para logarse como usuario…. y mucho más. Además también sirve para mejorar el rendimiento, con una función de caché con un motor propio (con dos opciones por si alguna no funciona bien) que puede mejorar hasta 50 veces la velocidad (dicen). Como bien dicen, en seguridad, “lo que no sabes SI que puede hacerte daño“, es muy recomendable instalar algo como esto en cuanto la web tiene un buen número de accesos. Podéis ver un gráfico de ataques diarios en la portada de su web. Better safe than sorry. Y todo esto es GRATIS. http://vimeo.com/70908504

Diseño Web, Gestores de contenidos

Activar un modo de mantenimiento en WordPress

/

Esto es algo que no se por qué WordPress no tiene por defecto. Si tienes una página online activa, pero quieres hacer modificaciones que puedan llevar algo de tiempo, los clientes pueden seguir viendo esas modificaciones porque no se puede poner en modo mantenimiento. Hoy os dejamos un plugin para hacer justo esto: activas un modo en el que el usuario normal vea un mensaje del estilo “Estamos haciendo unas mejoras, pronto volveremos online” pero los administradores podrán “logarse”, hacer y ver todos los cambios necesarios. El plugin es WP Maintenance Mode (sorpresa), y la instalación es sencilla. Instala el plugin desde el repositorio de plugins o subiéndo la descarga del mismo a tu web. Después actívalo y vete a la configuración. Ahí podrás activar el modo mantenimiento y varias otras opciones muy útiles como el tiempo que va a estar activo, un contador, un formulario de contacto, una página de landing para llevarles a otro lado etc etc. Puedes poner iconos de redes sociales, cambiar los colores y el fondo y casi cualquier cosa que puedas imaginar. Además en la parte de administración tienes un mensaje constante recordándote que está activado el modo mantenimiento. MUY completo aunque nosotros usamos sólo las opciones básicas. Os lo recomiendo para vuestras páginas de wordpress, instaladlo, dejadlo desactivado y activadlo cuando lo necesitéis. Una manera muy útil de decir al cliente “déjame un rato que tengo que trabajar” jejejeje.  

Scroll al inicio