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.
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í.
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:
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/
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.
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”.
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.
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.
Bueno, evidentemente están los métodos de usar lectores de revistas etc, y podemos poner un icono con un pdf para que se descarge, pero en este caso queremos incrustarlo (embed) en la página para que se lea. El código es sencillo en html: Donde ruta es la ruta del fichero (donde esté en Internet) y evidentemente los parámetros de anchura y altura pueden cambiarse, así como el aviso de “It appears…”. Esto es con código html, también puedes hacerlo con Javascript, para lo que necesitas descargar un fichero java como http://pdfobject.com/ (descargar el js aquí). Esto es lo que básicamente funciona. En pdfobject tenéis un generador de código: http://pdfobject.com/generator.php que os puede ayudar con muchas opciones sobre cómo abrir el pdf y demás. Nota: No perdáis el tiempo en intentar ajustar el pdf al contenedor (div, iframe etc). Parece ser que las instrucciones que están ahí (Fit, FitB etc), funcionaban antes en IE pero los navegadores actuales no les hacen ni caso. Otra opción interesante es pasar todo el pdf a imágenes y usar un slideshow para pasarlas.
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.
