Diseño Web

Buscadores, Diseño Web, SEO

Dos guías de SEO (posicionamiento) gratuitas y para “tontos”.

Nos tenemos que pasar mucho tiempo explicando conceptos básicos de SEO (posicionamiento) a muchos clientes. Como dice una de estas guías hay poca cultura SEO, y mucho anuncio imposible de “te coloco el primero por 60€”. Bueno, si tienes una tienda web, una página o quieres informarte respecto a esto, os dejamos dos lecturas recomendables: dos manuales SEO “para que nos entendamos todos”. Primero el ebook “SEO para los que no son SEO”, elaborado por Websa100. Y luego un manual de una empresa que se está moviendo mucho por las redes sociales, puede que hayáis visto sus anuncios en Facebook: Rebeldes Marketing Online. En esta última podréis descargaros de aquí la “Guía Rebeldes del Seo”, una guía que recomiendo leer. Ambos, junto con los vídeos de Marketing Activo del otro día, son aportes de empresas que podemos usar para mejorar nuestros conocimientos básicos de posicionamiento en buscadores. Para ver que no son fórmulas mágicas, sino indicaciones muy lógicas y que requiere esfuerzo y trabajo constante (para una recompensa muy golosa…que nos vean en Internet rápido). Cuando me preguntan: ¿cómo puedo aparecer en la primer página de Google?, siempre digo ¿qué aportas tu para merecértelo? Recordad no preguntéis que puede hacer mi país por mi sino qué puedo hacer yo por mi país. 😀 Las palabras son: Generar contenido y Relevancia.    

Diseño Web, Redes Sociales, Trucos

WordPress: añadir el muro de una página de Facebook de manera sencilla

Últimamente añadir a tu página web un muro de una red social está volviéndose complicado, ¡con lo sencillo que era antes! Ahora que si vete al sitio de desarrolladores, consigue la ID de la API, blablalbla. Imagínate un particular llevando su web. Después de la solución para Twitter, os dejamos la de Facebook que también es sencilla. Vete al like box de desarrolladores de Facebook: https://developers.facebook.com/docs/reference/plugins/like-box/ Elige entre las, pocas, opciones que tienes para personalizar cómo se muestra. Asegúrate marcar la de Show Posts. Pincha en Get Code para que te de el código. Hay varias opciones y te dice cómo hacerlo para cada una, la más sencilla es el iframe. Vete a Apariencia, Widgets y pon un widget de texto donde quieres que aparezca el muro de Facebook. Pega el código y ya está. También puedes poner este código en una página o en una entrada pegándolo en la pestaña texto de la misma.

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.

Scroll al inicio