Gestores de contenidos

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

Tests de compresión Gzip

Ya mencionamos el otro día que compartiríamos estas páginas cuando hablamos de cómo habilitar la compresión Gzip tanto en Prestashop como en WordPress (y válido para cualquier página web). ¿Qué es la compresión Gzip? Sencillo, comprime mucho del contenido que te da una página web cuando entras a leerla consiguiendo así varias cosas: rapidez para verla, disminución del uso del ancho de banda y de la transferencia. Esto también afecta al SEO porque cuanto mejor esté tu página y mejor rendimiento, más puntúa. ¿Cómo saber si mi web usa esta compresión? Desde estas páginas: http://www.whatsmyip.org/http-compression-test/ http://www.gidnetwork.com/tools/gzip-test.php    

Diseño Web, Gestores de contenidos, Trucos

Activar compresión Gzip en WordPress

Ayer estábamos probando esto en un cliente, que tiene una tasa de transferencia demasiado grande para lo que su proveedor le alquila. Buscando en Google, vimos que hay muchas opciones: plugins de caché, cambiar el htaccess, cambiar la opción en la página options.php etc etc. NINGUNA nos funcionó y muchas, por configuración del proveedor, hacían que la página se cayera. Y digo que no funcionaron porque los detectores online de páginas con Gzip, mañana pondremos algun0, no lo detectaban. ¿Cual funcionó al final? Me alegra decir que una de nuestro blog. Usamos este código sacado de este artículo que hicimos un día para prestashop. Al hacerlo genérico nos valió para WordPress también. <?php     if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’))         ob_start(“ob_gzhandler”);     else         ob_start(); ?> El problema principal fue ponerlo en un sitio que nos lo aceptara. Por alguna razón nuestro primer intento (el header.php) no lo asimilaba bien wordpress. Al final la solución fue ponerlo (a través de Apariencia, Editor) en el index,php, al principio, y en cada plantilla de página que se usa. De esta manera se carga con cada página que se carga.

Diseño Web, Gestores de contenidos, Trucos

Evitar que los textos se salgan de elementos con ancho fijo. CSS3

Cuando hemos diseñado una plantilla html con elementos de ancho fijo (por ejemplo con tablas), al introducir un texto largo este se puede salir del contenedor. Sobre todo en pantallas más pequeñas (móviles, tablets etc).   Obviamente una solución es intentar usar ancho variable, no fijo lo que hace las páginas más “responsive”. Pero si no queda más remedio o te empeñas en ancho fijo CSS3 nos da varias soluciones . word-break: break-all rompe (salta de línea) una palabra pero ignora los espacios. Pueden quedar letras sueltas word-wrap:break-word   intenta “romper” la palabra en comas, espacios y guiones. Si no puede corta la palabra. Por lo tanto a mi me suele gustar más usar word-wrap que no deja una letra suelta si puede evitarlo. A esto le podemos añadir el uso de guiones. Os lo pongo ya para cualquier navegador: -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; Así que con word break quedaría: -ms-word-break: break-all; word-break: break-all; /* Non standard for webkit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; Y con word wrap: word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; Con word-wrap en Firefox y Opera a veces hay que usar overflow: hidden;  

Diseño Web, Gestores de contenidos

Insertar paginación en tu plantilla de WordPress

Ayer tuvimos que lidiar con una plantilla de WordPress que no paginaba. Aquí fue cómo lo arreglamos. La página que más te puede ayudar es esta, aunque hay otras maneras de hacerlo como esta, o con un plugin. A nosotros nos gusta controlar más las cosas. Vete al editor y edita la página personalizada que has creado. Ahí tendrás una parte superior con un header (optativo):   <?php get_header(); ?>. Justo después el título de la página. Después un código que busca las entradas. Esto hay dos maneras, con wp_query() y query_posts(), os aconsejo el segundo. Si no has puesto un filtro estará en blanco, os pongo el nuestro. <?php $args = array( ‘posts_per_page’ => 5, ‘category_name’ => ‘blog’, ‘paged’ => $paged, ); query_posts($args); ?> Esto lo que hace es “muestra 5 posts por página, de la categoría blog y los paginas. Esta última opción es importante. Después le dices que haga una búsqueda con esos argumentos (args). Evidentemente todo eso es modificable. A continuación viene el LOOP que se llama en WordPress, es decir mostrar los artículos. Esto se puede hacer con varias modificaciones, ved el nuestro como ejemplo al final. Justo detrás del Loop ponemos los enlaces de paginación: <?php previous_posts_link(); ?> <?php next_posts_link(); ?> Cuidado que esto puede ser así de simple (página anterior y página siguiente) o con números (algo más complicado) Y por último el sidebar y el footer. Aquí está el código de ejemplo: <?php /* Template Name: Blog */;?> <?php get_header(); ?> <!– Begin #colleft –> <div id=”colLeft”> <h1><?php the_title(); ?></h1> <?php $args = array( ‘posts_per_page’ => 5, ‘category_name’ => ‘blog’, ‘paged’ => $paged, ); query_posts($args); ?> <?php if (have_posts()): while (have_posts()) : the_post(); ?> <h1><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h1> <?php global $more; $more = false; ?> <?php the_content(‘Continue Reading’); ?> <?php $more = true; ?> <?php endwhile; else: ?> <p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p> <?php endif; ?> <!– pagination –> <?php previous_posts_link(); ?> &nbsp; &nbsp; <?php next_posts_link(); ?> <?php comments_template(); ?> </div> <!– End #colLeft –> <?php get_sidebar(); ?> <?php get_footer(); ?>

Gestores de contenidos, Trucos

Añadir Leer Más (Read more) a una plantillas de WordPress

WordPress tiene dos maneras de “reducir” los artículos: los extractos (excerpts) y el leer más (read more). Si creas una plantilla personalizada para poner tus artículos de una categoría especial, o más modificada, tienes dos opciones. Puedes poner en el código de la plantilla el comando de wordpress the_excerpt(),eso hace que TODOS los posts se muestren con un extracto de una cantidad de palabras (que puedes personalizar debajo de cada artículo) con la opción de leer más para seguir leyendo. Por otro lado, como a nosotros en este caso, puede interesarte controlar tu la extensión de los artículos que se muestran. Es decir que los cortos no se trunquen, y si escribes alguno largo puedas poner un leer más. Este es el caso del que trata este artículo. El código que se pone en la plantilla es the_content(), pero hay que modificarlo un poco. Nosotros teníamos the_content() pero no funcionaban los leer más. Lo arreglamos con esta modificación en el código: Donde tenías: <?php the_content(); ?> Ahora hay que poner: <?php global $more; $more = false; ?> <?php the_content(‘Continue Reading’); ?> <?php $more = true; ?> Prueba ahora y verás que funcionan los leer más. Más info aquí.

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

Usar compresión GZip en tus páginas web, por ejemplo en Prestashop

Una de las cosas que más cuentan los buscadores es la rapidez de tu página. Y esta puede verse afectada o por mal código, o por mucho acceso.  Los hosting compartidos tienen un ancho de banda limitado (y unos recursos de servidor).Evidentemente cuanto más gente acceda más afecta al rendimiento. Por lo tanto es buena idea que el servidor comprima el contenido de la página web, lo que hace que no afecte tanto al ancho de banda y el lector reciba antes la información. En WordPress por ejemplo hay módulos que dan el contenido de páginas dinámicas a las que se accedan mucho en modo estático, optimizando bastante la velocidad de acceso. Pero es que aunque no contara para el SEO, evidentemente una persona que note que la web vaya lenta…acabará hartándose y marchándose. Por lo tanto es buena idea activar la compresión GZip en el servidor, a veces reduce hasta un 80% el tamaño de las páginas. Aquí te decimos cómo: Apache consigue la compresión a través de los módulos mod_gzip y mod_deflate. Para ello primero tendrás que ver si están activados en tu proveedor. Puedes usar un fichero php_info(). SI están cargados pero no está haciendo la compresión puedes activarlos a través de .htaccess (pequeño fichero que se añade en la raíz para modificar parámetros de Apache y php).  SI ESTÁN ACTIVADOS LOS MÓDULOS: Para activarlo para html y texto: # compress all text and html: AddOutputFilterByType DEFLATE text/html text/plain text/xml # Or, compress certain file types by extension: <Files *.html> SetOutputFilter DEFLATE </Files> Con mod_deflate puedes elegir los ficheros a comprimir (gif,jpeg, png: <Location />     SetOutputFilter DEFLATE       SetEnvIfNoCase Request_URI          .(?:gif|jpeg|png)$ no-gzip dont-vary     SetEnvIfNoCase Request_URI          .(?:exe|t?gz|zip|gz2|sit|rar)$ no-gzip dont-vary </Location> Así lo puedes hacer con mod_gzip: <IfModule mod_gzip.c>     mod_gzip_on       Yes     mod_gzip_dechunk  Yes     mod_gzip_item_include file      .(html?|txt|css|js|php|pl)$     mod_gzip_item_include handler   ^cgi-script$     mod_gzip_item_include mime      ^text/.*     mod_gzip_item_include mime      ^application/x-javascript.*     mod_gzip_item_exclude mime      ^image/.*     mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </IfModule>  En nuestro caso los módulos estaban pero desactivados. Prestashop metía el código correcto pero Apache ni caso. Así que SI NO ESTAN ACTIVOS LOS MÓDULOS: Usando PHP: Puedes meter este código en cada página de PHP que quieras que se comprima. O, como en nuestro caso, en una que se cargue siempre (en Prestashop usamos config/config.inc.php). <?php     if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’))         ob_start(“ob_gzhandler”);     else         ob_start(); ?> ¿Quieres probar a ponerlo en .htaccess en vez de en cada fichero? A nosotros no nos funcionó pero como depende de cada servidor puedes probarlo. Para sólo los php: <FilesMatch “.(txt|html|htm|php)”>     ForceType application/x-httpd-php     php_value auto_prepend_file /the/full/path/gzip-enable.php </FilesMatch> Para hacerlo para todos los ficheros. Primero: php_value output_handler ob_gzhandler Luego por ejemplo para los CSS crea este fichero gzip-css.php y pon: <?php    // initialize ob_gzhandler function to send and compress data    ob_start (“ob_gzhandler”);    // send the requisite header information and character set    header (“content-type: text/css; charset: UTF-8”);    // check cached credentials and reprocess accordingly    header (“cache-control: must-revalidate”);    // set variable for duration of cached content    $offset = 60 * 60;    // set variable specifying format of expiration header    $expire = “expires: ” . gmdate (“D, d M Y H:i:s”, time() + $offset) . ” GMT”;    // send cache expiration header to the client broswer    header ($expire); ?> Después en el .htaccess: <FilesMatch “.(css)”>     ForceType application/x-httpd-php     php_value auto_prepend_file “/the/full/path/of/this/file/gzip-css.php” </FilesMatch> Para los JavaScrip crea el fichero gzip-js.php: <?php    // initialize ob_gzhandler function to send and compress data    ob_start (“ob_gzhandler”);    // send the requisite header information and character set    header (“content-type: text/javascript; charset: UTF-8”);    // check cached credentials and reprocess accordingly    header (“cache-control: must-revalidate”);    // set variable for duration of cached content    $offset = 60 * 60;    // set variable specifying format of expiration header    $expire = “expires: ” . gmdate (“D, d M Y H:i:s”, time() + $offset) . ” GMT”;    // send cache expiration header to the client broswer    header ($expire); ?>  y pon esto en el .htaccess: <FilesMatch “.(js)”>     ForceType application/x-httpd-php     php_value auto_prepend_file “/the/full/path/of/this/file/gzip-js.php” </FilesMatch> Para ver cómo hacerlo en un servidor Tomcat pincha aquí.    

Diseño Web, Gestores de contenidos, Webs

Chamilo: un LCMS muy prometedor

Cuando hablamos de Dokeos nos comentó un lector que el prefería Chamilo. Chamilo es un fork (una variante) del proyecto Dokeos. Por lo que he leído una gran parte de los desarrolladores del segundo se fueron a Chamilo. Esto puede ser cierto porque veo más actualizaciones en Chamilo que en Dokeos. Al ser tan parecido tienen las mismas ventajas, sencillez, visualmente atractivos y una comunidad de soporte detrás. Pero la primera ventaja que ves en Chamilo es que al instalar no te da errores de “Deprecated” que dan muy mala imagen. Aquí tenéis la demo online: http://www.chamilo.org/es/sitios_demo  os gustará. Por lo tanto, si queréis instalar aulas virtuales o cursos online en vuestros servidores, probad Chamilo.    

Diseño Web, Gestores de contenidos, Webs

OpenX el servidor de anuncios Open Source

Si tienes varias páginas web que están empezando a tener accesos, puede que te interese tener ingresos por anunciantes. Esto se puede hacer de muchas maneras, pero OpenX es un gestor Open Source, gratuito (a menos que queramos que lo tengan ellos en sus servidores), que te permite gestionar campañas de anuncios en una o varias páginas web. El comentario de todos los que lo usan es que es muy sencillo, permite dar a los anunciantes acceso a paneles para que gestionen sus anuncios, puedes ver un seguimiento de tus anuncios. Para los usuarios de WordPress también tiene un plugin: http://www.openx.com/community/openx-plugin-for-wordpress Aquí podéis ver un vídeo sobre este gestor: Podéis ver más vídeos en su canal.

Diseño Web, Gestores de contenidos, Trucos

Evitar que la plantilla de WordPress se actualice

A veces hacemos alguna página web para clientes, y muchas en WordPress. Y nos ha pasado que después de semanas de trabajo y de personificación de la plantilla para el cliente, después de entregada, al cabo del tiempo nos encontramos con que el cliente ha actualizado la plantilla y los cambios se han ido al traste. A ver, no es culpa del cliente, este actualiza con toda la buena voluntad del mundo, y mantener todas las partes del wordpress es importantísimo para la seguridad de tu web. Pero claro, si esta va a cambiar de aspecto radicalmente no es muy buena idea. Así que aquí os dejo dos maneras de evitar que el WordPress diga que tienes que actualizar tu plantilla: Cambiar el directorio de nombre: Con que cambies por FTP el nombre del directorio de la plantilla, WordPress ya no detecta que es esa para actualizar. Sin embargo verás como si la reconoce como plantilla y la llama igual. Esto está bien para afectar sólo a una plantilla, y es un método muy fácil. Plugin: El plugin Disable WordPress Themes Updates hace esto mismo pero es para todas las plantillas. Es algo más radical por lo tanto y puede crear más puntos con poca seguridad (plantillas no actualizadas), pero es que hay plantillas que dan error si están en otro directorio. En estos casos por ejemplo nosotros lo instalamos y quitamos el resto de plantillas.  

Diseño Web, Gestores de contenidos, Seguridad

Website Defender: Plugin para analizar y mantener seguridad en WordPress

Cada día hay más webs en WordPress y más complejas. Obviamente esto hace que sea un objetivo para malware, hackers etc. Website Defender te ayuda a mantener la seguridad de tu sitio con WordPress. Analiza tu sitio, te da un reporte sobre seguridad de las contraseñas, posibles virus o malware en tu sitio web, comprueba la base de datos para ver fallos de seguridad, posibles cuentas sospechosas y mucho más. Obviamente no es una seguridad total, eso no existe, pero te permite cerrar más tu web y tener un mecanismo de verificación periódico, para estar más tranquilo.  Y en teoría sin impactar al rendimiento.

Scroll al inicio