Diseño Web

Diseño Web, Redes Sociales, Trucos

Vaciar cache que tiene Facebook de tu página web

El otro día estábamos con la web de un cliente, y cada vez que compartíamos en Facebook la página, una vez subida, daba un “página alojada con el proveedor”. No había manera de cambiarlo. Supusimos que era cosa de un caché de Facebook, esperamos unos días y nada. Si te pasa lo mismo, que al compartir contenido de tu página no aparece como quieres, esta es la solución. Te enseñamos a vaciar el la caché que tiene Facebook de tu página. Para ello debemos ir a la herramienta Debugger de Facebook: https://developers.facebook.com/tools/debug/ Ahí tenéis un hueco en blanco para poder poner la dirección de tu web. Ponla y pincha en el botón de Depuración. Esto forzará a Facebook a “releer” tu web y se limpiará la caché. Además te de mucha información que puede ser de utilidad. No hace falta que hagas nada más, cierra eso, vete a Facebook y pon tu página. Ahora verás que ya debería estar solucionado.    

Diseño Web, Webs

Dos generadores de CSS más online

Ya hemos puesto varios generadores de CSS online, como el de gradientes o el de bordes redondeados. La verdad es que para los que hacemos web son muy útiles porque te deja no recordar de memoria los códigos, ver los cambios en tiempo real e incluso la compatibilidad con cada navegador. Hoy os dejo dos más: Box Shadow Generator:  Para conseguir el código para crear sombras en divs. Muy fácil de usar y muy intuitivo. http://css3generator.com/  tiene varios generadores, desde el de sombra de texto, sombra de cajas, bordes redondeados y muchos más. Un todo en uno. CUIDADO con la compatibilidad. Alguno de sus efectos, aunque chulos, no son compatibles con todos los navegadores, algunos sólo lo son con Opera.  

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(); ?>

Diseño Web, Webs

WhatFontis : encuentra el nombre de una fuente

  Gran página para los diseñadores en la que puedes mandar una imagen o una página web y te identifica (o intenta identificar) el tipo de fuente que está usando. Estupendo cuando el cliente te dice “quiero esta fuente”, o “quiero la fuente que usamos”. ¿Y cual es? . “No se”. ¿¿¿??? Pues pasa y mucho. Así que gran página para ello: http://www.whatfontis.com/ Poco más que decir salvo que existen extensiones para Chrome y Firefox.  

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í.    

Android, Diseño Web, Mac, Móviles, Smartphones, Tablets

Apache Cordova: crea aplicaciones para smartphones y tablets

Hoy en día si quieres crear aplicaciones para tablets o para teléfonos tienes dos opciones. Muchos programas/webs lo que hacen es crearte una aplicación que simplemente tiene el logo de tu marca y luego te lleva a tu web. Este enfoque es, en mi opinión, una chorrada. Primero porque la gente no usa esas aplicaciones, segundo porque no se pueden meter bien en lo market de las marcas, por lo que hay que descargarlos de las webs (feo, poco práctico y poco fiable). La otra opción es crear una aplicación que permita hacer más cosas (acceso a los contactos, cámara, geolicalización, acelerómetro etc). Es decir una aplicación bien hecha que de contenido extra, valor añadido. Para algo así existe Apache Cordova (antes PhoneGap) y algún otro que comentaremos. Te permite crear aplicaciones nativas para cualquier marca de teléfono usando html5, javascript y CSS3. Por lo tanto si quieres pasar al mundo de las aplicaciones móviles, esto te permite hacerlo de manera más sencilla, pudiendo usar APIs o incluso usar frameworks como Sencha o programación adicional en otros idiomas y acceder a funciones del teléfono. Tiene además emuladores gráficos. Aquí por ejemplo tenéis un ejemplo sencillo para Android. Y aquí otra para Windows Mobile. Os dejo dos vídeos sobre el tema:  

Diseño Web, SEO, Trucos, Webs

Compresores online de CSS y JavaScript

Dentro de nuestros esfuerzos por mejorar la velocidad de carga de las páginas de nuestros clientes, hemos estado probando con mucho éxito estos compresores de páginas de estilo CSS y de  JavaScript. Lo que hacen es quitar espacios, comentarios y código innecesario para reducir el tamaño de estos ficheros, con lo que se  consigue una velocidad de carga mayor y páginas más rápidas. Que una página sea más rápida no sólo afecta a la sensación del cliente y su usabilidad, sino que también afecta a la posición en los buscadores. Aquí os dejamos algunos de estos compresores: http://www.csscompressor.com/ http://www.minifycss.com/css-compressor/ http://refresh-sf.com/yui/ http://javascriptcompressor.com/ http://jscompress.com/ Este es muy bueno porque analiza tu página y directamente te da todo comprimido: http://www.zbugs.com/  

Diseño Web, Trucos

WordPress: los widgets de Twitter han dejado de funcionar

Recientemente Twitter ha decidido retirar el soporte  a su API anterior la 1.0 (ahora con la 1.1), como veis en este calendario. Esto, para los usuarios de WordPress ha resultado en que la mayoría de los widgets que mostraban un streaming de la cuenta de Twitter en una web han dejado de funcionar. Como os podéis imaginar “una gracia”. Además, no es que lo hayan puesto sencillo para solucionarlo. Aquí os dejamos cómo: Solución 1:  La más sencilla es entrar en tu cuenta de Twitter, en su página oficial, pinchar en la rueda dentada, configuración, Widgets y añadir un widget nuevo. Ahí podéis elegir unos cuantos parámetros (no muchos la verdad), y os genera el código. Ese código lo podéis copiar y pegar, por ejemplo, en un widget de texto en la web. Es decir con tu cuenta de twitter es sencillo (más info aquí). Solución 2:  La nueva API requiere  OAuth keys. Puedes instalar plugins de Twitter que vengan actualizados para esta API (por ejemplo esta  o  esta). Una vez instalado te va a pedir autentificar el widget.  Date de alta en https://dev.twitter.com/apps con tu cuenta de Twitter y crear una aplicación para esa web.  Creando la aplicación Twitter te da el Consumer Key y el Consumer Secret.  Después necesitas conseguir un Token siguiendo esta guía. Este es el código que necesita la aplicación para general la petición de acceso (información técnica aquí). Al autorizarla te da el Authorization string que necesitas para los widgets. “Fácil ??¿no?” (el proceso puede variar algo dependiendo de la programación del plugin. Puedes ver los pasos en inglés aquí. Así que toca cambiar los widgets :-D. Esto es lo divertido de las empresas grandes, que cambian todo de un plumazo, y los pobres dueños de las webs a volverse locos o contratar a alguien que lo cambie.

Diseño Web, Trucos, Webs

Análisis SEO de tu web: Woorank y MetricSpot

Una vez tienes una página web, el siguiente paso es optimizarla para el SEO (posicionamiento en buscadores). Esto es un mundillo totalmente aparte de la construcción de la misma, y de hecho suele facturarse aparte.  No tiene que ver (aunque está relacionado) con la programación. Nosotros por ejemplo podemos facturar un mínimo para cambios tipo alta en Google con sitemap, urls “bonitas”, plugins de SEO etc. Pero luego esto se puede hacer a mucha más profundidad. Como hemos dicho esto es un trabajo separado, y exhaustivo (optimización de web, redes sociales, campañas, enlaces etc), que debe hacerse con idea de resultados a medio y largo plazo. Y cualquier ayuda es buena.Hoy os dejo dos herramientas web para eso: analizan tu web  y te dan consejos. Woorank:  Durante mucho tiempo un “must” en esto del análisis SEO y los consejos. Hace un tiempo se hizo de pago y ahora sólo permite un análisis a la semana en modo gratuito. Pero merece la pena. Y si vas a hacerlo mucho, puede que te interese pagar la cuota. Después que Woorank se hiciera de pago surgieron otros gratuitos (por ahora). Uno de ello, de los que más me gustan es http://www.metricspot.com/ . Proporciona un análisis casi igual de detallado sin coste y sin límite. Sin duda ambas son herramientas que debemos mirar si queremos “dar una vuelta de tuerca más” a nuestra web y sacar un rendimiento a nuestros “amigos,clicks etc”.

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.    

Scroll al inicio