Firefox 6, ya disponible (.´)
Aunque no se ha anunciado de forma oficial, Firefox 6 ya está disponible para descargar desde los servidores de Mozilla. Espero que esta versión corrija la velocidad y el consumo de recursos.
Desde que comencé a sufrir estos problemas utilizo Chrome, con el que estoy muy contento. Pero estoy deseando volver a Firefox con mis extensiones favoritas. Lo podéis descargar desde los servidores de Mozilla:
Cargar tipografías web en Internet Explorer
Por Fran - css, Diseño web - 22 junio, 2011
Internet Explorer continúa sin cumplir los estándares, y esto trae de cabeza a los diseñadores web. Cuando quieres cargar una de las tipografías de Google en tu web o cualquier otra fuente compatible, utilizas el código para insertarla que te facilita Google y descubres que el maldito Internet Explorer no la muestra. Arreglar esto supone un trabajo extra para el diseñador.
¿Qué debemos hacer para que Internet Explorer muestre una fuente?
1. Descargar la fuente
Tenemos que usar una parte del código que Google nos facilita para insertar una de sus fuentes en nuestra web cuando hacemos clic en “Use this font”. En el caso de la tipografía Lobster:
<link href='http://fonts.googleapis.com/css?family=Lobster+Two&v1' rel='stylesheet' type='text/css'>
Debemos copiar la dirección completa que hay entre comillas simples del atributo href y pegarla en nuestro navegador. Cuando cargue esta dirección veremos el siguiente código:
@font-face {
font-family: 'Lobster Two';
font-style: normal;
font-weight: 400;
src: local('Lobster Two'), local('LobsterTwo'), url('http://themes.googleusercontent.com/font?kit=Law3VVulBOoxyKPkrNsAaLrIa-7acMAeDBVuclsi6Gc') format('woff');
}
De aquí tendremos que repetir la misma operación. Copiamos la dirección que hay entre las comillas de url
http://themes.googleusercontent.com/font?kit=Law3VVulBOoxyKPkrNsAaLrIa-7acMAeDBVuclsi6Gc
De nuevo en nuestro navegador, pegamos la dirección, y podremos descargar la fuente (Lobster en el ejemplo). La guardamos en nuestro equipo.
2. Generar un kit en FontSquirrel
El siguiente paso es utilizar la fuente que hemos descargado para generar un kit en el generador de kit de FontSquirrel
Subimos la fuente que descargamos en el paso 1 (Add fonts). Marcamos el checkbox ‘Yes, the fonts……’ y hacemos clic en Download your kit. Obtendremos un archivo comprimido.
3. Modificar nuestra hoja de estilo CSS
Cuando descomprimimos el kit que acabamos de descargar, obtenemos una carpeta con varias tipografías (formatos: eot,svg,ttf,woff …) y una hoja de estilo stylesheet.css. El código de la hoja de estilo, tendremos que añadirlo a la nuestra:
@font-face {
font-family: 'Lobster';
src: url('lobster-webfont.eot');
src: url('lobster-webfont.eot?#iefix') format('embedded-opentype'),
url('lobster-webfont.woff') format('woff'),
url('lobster-webfont.ttf') format('truetype'),
url('lobster-webfont.svg#Lobster') format('svg');
font-weight: normal;
font-style: normal;
}
Y por último, debemos subir a nuestro servidor nuestra hoja de estilo modificada y los archivos de las tipografías. Es muy importante que prestemos atención a la ruta hacia los archivos de fuentes, si queremos guardarlos en una ubicación que no sea la misma carpeta en la que está nuestra hoja de estilo, deberemos modificar el código CSS para que las pueda localizar correctamente.
Esto es todo el trabajo extra que nos obliga a hacer Internet Explorer cuando queremos mostrar una tipografía especial en nuestras webs. ¡Con lo fácil que es usar el código que nos da Google!
¿A vosotros os da muchos quebraderos de cabeza Internet Explorer?
El mejor plugin cache para WordPress
Tenía dudas sobre cuál es el mejor plugin cache para WordPress, así que he indagado un poco y aquí os traigo mis conclusiones.
Un plugin cache, a grandes rasgos, ayuda a aligerar la carga del servidor y a mejorar la velocidad de carga de las páginas. Crea ligeras versiones html de los scripts php que generan cada una de las páginas del blog. De esta manera, mientras no haya cambios, no se tendrán que ejecutar todas las funciones php necesarias para montar la página. Se sirve una copia previamente “cacheada” de la misma.
En otros blogs he utilizado Wp-cache, pero ahora he llegado a la siguiente conclusión:
En general, la mejor combinación para gestionar la caché de WordPress, si quieres mantener cierto control manual sobre el blog, es Hyper Cache + DB Cache reloaded.
Si usas un servidor compartido, o si prefieres instalar el plugin y olvidarte, W3 total cache será la opción ideal.
He llegado a estas conclusiones leyendo un completo análisis comparativo con parámetros de carga reales (en inglés).
También ha corroborado la idoneidad del W3 total cache una encuesta sobre el mejor cache plugin de WordPress. Mientras estoy escribiendo esta entrada W3 Total Cache gana con un 49% de los votos frente al 31% del segundo.
Podéis leer un análisis detallado del W3 Total Cache con indicaciones para la instalación.
¿Qué plugin cache utilizas en tu blog? ¿Qué ventajas crees que tiene frente a W3 Total Cache?
Liberar espacio eliminando imagenes del nucleo antiguas
A veces es muy importante revisar el espacio que ocupa la instalación de nuestro Ubuntu. Sobre todo si la instalación está en una partición independiente de tamaño reducido. Hace muy pocos días he tenido un problema con esto. La carga de trabajo me hizo ignorar los avisos de poco espacio en la partición root que sabiamente me hizo Ubuntu. Pensé que ya tendría tiempo de solucionarlo más adelante. Pero llegó a un punto en el que no pude iniciar sesión en modo gráfico, la partición se llenó al 100%.
Hay varias formas de liberar memoria: limpiar la caché apt, borrar archivos de localización no utilizados con localepurge, desinstalar programas que no utilizamos y, en la que me voy a detener hoy, eliminar imágenes del núcleo antiguas..
Para eliminar imágenes del núcleo o kernel Linux antiguas, que ocupan espacio y no nos sirven debemos:
Listar las imágenes del núcleo
dpkg --get-selections | grep linux-image
Obtendremos un listado similar a este:
- linux-image-2.6.32-32-generic install
- linux-image-2.6.32-31-generic install
- linux-image-2.6.32-30-generic install
- linux-image-2.6.32-29-generic install
- linux-image-generic install
Son las imágenes del núcleo que almacenamos en nuestro equipo.
Eliminar las imágenes antiguas
Podremos borrar todas menos la actual y justo la anterior, por tener las espaldas cubiertas en caso de algún problema futuro. Tampoco hay que borrar linux-image-generic, ya que si no, no podremos recibir nuevas actualizaciones del kernel.
Para borrar las demás deberemos ejecutar:
sudo apt-get remove --purge linux-image-2.6.32-21-generic
Tendremos que cambiar el nombre de cada uno de los que queramos borrar.
Comprobar el espacio liberado
Después de cualquier operación de liberación de espacio, podéis usar el comando df para ver el porcentaje de ocupación de la partición. Y si queréis saber qué archivos son los que ocupan más espacio, podéis ejecutar:
sudo du -xha | sort -r | head -n 10
Os devolverá los diez archivos más pesados.
jQuery dentro de entradas y páginas de WordPress
Por Fran - Diseño web, jquery, Tips, Wordpress - 4 junio, 2011
Desde que empecé a trabajar con WordPress eché de menos poder usar jQuery en las entradas y las páginas del blog. A nivel de tema está muy bien, pero hay ciertas operaciones que sólo son necesarias en un determinado lugar del blog, por lo que no es conveniente que el script esté en funcionamiento a nivel de tema, sino a nivel de la entrada o página donde queremos usarlo.
Para poder usar jQuery dentro de los post y páginas de WordPress necesitamos:
- Plugin Raw HTML
- Enlazar jQuery a nuestro blog (obvio)
- Usar jQuery en modo seguro junto con el plugin RAW HTML
1. El plugin RAW HTML nos permitirá ejecutar código directamente en nuestros post y páginas de WordPress saltándodes las restricciones por defecto que impiden cierto código HTML, javascript y CSS. Para utilizarlo tan sólo tendremos que marcar nuestro código entre los comentarios del plugin:
<!--start_raw--> /* mi codigo */ <!--end_raw-->
2. Usaremos cualquiera de las formas de inserción de la librería jQuery en nuestro blog WordPress
3. Usaremos jQuery en modo seguro para evitar conflictos, dentro de los comentarios de RAW HTML. El modo seguro implica cambiar el símbolo del dólar $() por jQuery()
Podemos ejecutar el script directamente en cualquier punto de la entrada o página:
<!--start_raw-->
<script type="text/javascript">
jQuery('p').click(function(){slideUp('fast');});
</script>
<!--end_raw-->
O enlazar hacia un script (donde también tendremos que usar jQuery en modo seguro):
<!--start_raw--> <script type="text/javascript" src="url_hacia_script.js"></script> <!--end_raw-->
Si queremos usar el dólar $(), podemos hacerlo así, de forma segura:
jQuery(function($){
/* nuestro código usando $() */
});
Bibliografía
30 trucos, funciones y tips para WordPress
Por Fran - Diseño web, Tips, Wordpress - 23 enero, 2011
Gracias a @PRQuevedo he dado con una interesante entrada del blog Trazos Web en la que enseñan una serie de trucos y funciones para WordPress. Algunas ya las conocía, pero otras muchas me serán de gran ayuda en el futuro.
Algunos de estos interesantes trucos:
- personalizar formulario de login
- mostrar fechas legibles
- destacar comentarios del autor con un estilo diferente
- mostrar los fans de tu página de Facebook
- añadir fondos personalizados
- …
y así hasta 30 útiles consejos y trucos
Espero que a todos los que, como yo, estéis empezando a trabajar con WordPress y a desarrollar themes os sean tan útiles como a mí. Aquí os dejo el enlace al artículo completo: 30 trucos, funciones y tips para WordPress
Plugin AlphaNumeric de jQuery. Controlar caracteres en campos de formulario
Hoy os presento AlphaNumeric, un útil plugin de jQuery para el control de los caracteres permitidos en nuestros campos de formulario. Ha sido desarrollado por Paulo P. Marinas con el patrocinio de IT Group, Inc.Con este plugin podremos controlar fácilmente los caracteres que un usuario puede introducir en inputs y textareas de formularios. Descargar plugin AlphaNumeric
Aquí vemos unos ejemplos de uso:
1. Sólo caracteres alfanuméricos:
$('.campo1').alphanumeric();
2. Sólo caracteres alfanuméricos, coma (,) punto (.) y espacio ( ):
$('.campo2').alphanumeric({allow:"., "});
3. Sólo aceptará letras minúsculas:
$('.campo3').alpha({nocaps:true});
4. Sólo números:
$('.campo4').numeric();
5. Sólo números y punto (.):
$('.campo5').numeric({allow:"."});
6. Regla personalizada que evita caractreres como punto (.), uno (1) y a (a)
$('.campo6').alphanumeric({ichars:'.1a'});
Funciones API
- alphanumeric() – permite caracteres de tipo letra y numéricos
- alpha() – permite sólo caracteres de tipo letra.
- numeric() – permite sólo caracteres numéricos
Propiedades API
- allow – añade caracteres excluidos de la regla de prohibición
- ichars – define una serie de caracteres no permitidos
- allcaps – permite sólo letras mayúsculas
- nocaps – permite sólo letras minúsculas
Descargar plugin AlphaNumeric
Lucha por tus sueños
Por Fran - motivación - 12 enero, 2011
No he encontrado mejor post para empezar el año que este video motivacional. La perseverancia y la fe en uno mismo son las claves para el éxito. Aquí va otra cápsula de motivación:
Trojan.osx.boonana: virus troyano que afecta a sistemas Mac
Descarga la herramienta gratuita de desinfección ofrecida por SecureMac (Sólo para Mac)
El 26 de octubre Securemac informó de un nuevo troyano que afecta a sistemas Mac, incluida la última versión de Snow Leopard (OSX 10.6).
El 4 de noviembre ha informado de la existencia de una variante del virus, que se comporta de manera similar y se está propagando a través de múltiples webs.
Este troyano se propaga a través de las redes sociales, en mensajes con título “Is this you in this video?” (“¿Sales tú en este video?”).
Cuando el usuario hace clic en el enlace se ejecuta un applet Java que se descarga otros archivos y se autoinstala. Cuando se ejecuta, el instalador modifica archivos del sistema para saltarse passwords, permitiendo acceso a todos los archivos del sistema.
Mientras esté funcionando, secuestra las cuentas del usuario para propagarse a través de mensajes spam.
Este virus es multiplataforma, por lo que también afecta a los usuarios de Windows.
¿Cómo se pueden proteger los usuarios?
Deshabilitando la ejecución de Java en su navegador.
Securemac nos ofrece los siguientes consejos:
- Vigila por dónde navegas. Si lo haces por sitios conocidos y seguros tendrás menos posibilidades de ser infectado. Ten especial cuidado con los mensajes de las redes sociales, incluso si vienen de un amigo.
- Cuidado con lo que descargas. Descarga sólo de sitios seguros y fiables.
- Usa las propiedades de seguridad del OS X. Activa el Firewall y plnateate usar software adicional [Léase: "compra nuestros productos", jeje], especialmente en equipos usados por varios usuarios.
Fuente: http://www.securemac.com/boonana-bulletin.php (en inglés)
Tip iPod: desbloquear iPod bloqueado
Hoy, al intentar actualizar los podcast del iPod, se me ha quedado totalmente colgado. No había manera de apagarlo o de hacer nada con él.
Al final dí con la solución para reiniciarlo:
1. En caso de que esté bloqueado, hay desbloquearlo (la pestañita de abajo)
2. Pulsar al mismo tiempo durante 10 segundos la tecla MENU y la CENTRAL
A mí de primeras no me funcionó, pero le bloqueé la pestaña, la volví a desbloquear, repetí los 10 segundos con las teclas pulsadas, y funcionó.
Fuente: iPodTotal
Tip jQuery: obtener valor de checkbox sólo si ha sido seleccionado
Por Fran - Diseño web, jquery - 17 octubre, 2010
Cuando trabajamos con formularios y jQuery nos resulta muy útil el método .val(). Con él podemos recuperar el valor de cualquier campo de nuestro formulario.
Por ejemplo, si tenemos este input:
< input type="text" name="nombre" id="nombre" />
Podremos obtener su valor así:
$(‘#nombre’).val();
Pero, ¿cómo podemos obtener el valor de un checkbox SÓLO cuando haya sido seleccionado? Si tenemos este checkbox:
< input type="checkbox" name="condiciones" id="condiciones" value="acepto" />
$('#condiciones').val();//SIEMPRE devolverá 'acepto', haya sido o no seleccionado
Si vamos a enviar el formulario a través de jQuery, debemos tener cuidado al aplicar .val() a nuestro checkbox, ya que siempre enviaríamos su value, independientemente de que haya sido seleccionado o no. Para evitar este problema debemos usar el filtro :checked. Con este filtro sólo recogeremos el valor del checkbox si ha sido seleccionado:
$('#condiciones:checked').val();
Tú puedes
Por Fran - motivación - 2 octubre, 2010
Descubrí a este padre y su hijo gracias a mi amigo Pedro. Lo publico en el blog como una joya de motivación personal, como ejemplo de superación, de lucha ante la adversidad y de amor a la vida:
Quitar “server (Samba – Ubuntu)” en redes Windows
A Ubuntu le gusta llamar la atención de los usuarios de Windows. Por eso, cuando un equipo con Ubuntu entra en una red Windows, se hace notar.
Añade una coletilla a su nombre en el listado de equipos de la red. Aparece con un nombre con el siguiente formato: “nombre_del_equipo server (Samba – Ubuntu)”.
Puede que esto resulte llamativo a los que disfruten presumiendo de superioridad (indiscutible en cuando a sistemas operativos, pero no por ello extensible a la persona en sí), pero para otros no. Puede haber multitud de razones por la que no queramos que Ubuntu llame tanto la atención, y para evitar esta coletilla deberemos editar el archivo smb.conf:
sudo gedit /etc/samba/smb.conf
Tenemos que buscar esta línea:
server string = %h server (Samba, Ubuntu)
y dejarla así:
server string = %h
Una vez guardados los cambios reiniciamos samba, y listo:
sudo smbd restart
NOTA: si reinicias desde una versión de Ubuntu inferior a la 10.04 deberás reiniciar así:
sudo /etc/init.d samba restart
Congreso de Internet 2010
Por Fran - Diseño web - 6 septiembre, 2010
Un año más, en el mes de octubre se celebra el Congreso de Internet (anteriormente conocido como Congreso de Webmasters). Los días 22, 23 y 24 de octubre tendrá lugar el IV Congreso en Madrid. Yo acudí por primera vez al del año pasado, y este año pienso repetir. En esta edición se hablará de social media, conceptos de actualización para la era de dispositivos móviles que se nos viene encima, posicionamiento, conversiones, coaching, neuromarketing aplicado a la web, seguridad web y muchos más temas. Aquí puedes ver el programa completo.
Si te interesa el mundo de la web no puedes perderte este evento. Además habrá sesión de networking para charlar con profesionales del sector y cambiar impresiones con personas de este mundo.
Si quieres venir date prisa en inscribirte, las plazas están volando.
Solución al problema de recorte o redimensión de png y gif transparentes en CodeIgniter
Por Fran - CodeIGniter, Tutoriales - 5 julio, 2010
Si trabajas con CodeIgniter y has intentado recortar o redimensionar una imagen png o gif con transparencia, te habrás llevado una desagradable sorpresa: en la imagen resultante, la parte transparente aparece en color negro.
Busqué cómo solucionarlo y San Google me dirigió al blog Códigos Útiles, donde, haciendo honor a su nombre, me brindaron un código útil para resolver el problema.
Éste es el código en sí:
//Obtenemos la extension
$ext = end(explode(".",$this->full_dst_path));
if($ext == "png" || $ext == "gif"){
$trnprt_indx = imagecolortransparent($src_img);
// If we have a specific transparent color
if ($trnprt_indx >= 0) {
// Get the original image's transparent color's RGB values
$trnprt_color = imagecolorsforindex($src_img, $trnprt_indx);
// Allocate the same color in the new image resource
$trnprt_indx = imagecolorallocate($dst_img, $trnprt_color['red'], $trnprt_color['green'], $trnprt_color['blue']);
// Completely fill the background of the new image with allocated color.
imagefill($dst_img, 0, 0, $trnprt_indx);
// Set the background color for new image to transparent
imagecolortransparent($dst_img, $trnprt_indx);
}
// Always make a transparent background color for PNGs that don't have one allocated already
elseif ($ext == "png") {
// Turn off transparency blending (temporarily)
imagealphablending($dst_img, false);
// Create a new transparent color for image
$color = imagecolorallocatealpha($dst_img, 0, 0, 0, 127);
// Completely fill the background of the new image with allocated color.
imagefill($dst_img, 0, 0, $color);
// Restore transparency blending
imagesavealpha($dst_img, true);
}
}
Podéis añadirlo a la librería Image_lib. Aquí tenéis la librería Image lib modificada con el parche desde Códigos Útiles.
50 paquetes de pinceles para Photoshop
Hoy os traigo una gran colección de pinceles para Photoshop. Todos gratuitos.
Ver colección de pinceles Photoshop
Todavía no sé cómo…
Por Fran - motivación - 30 mayo, 2010
A partir de ahora intenta eliminar de tu vocabulario la frase “no puedo…”. Sustitúyela por “todavía no sé cómo…”. Mejorará tu motivación, tu predisposición a solucionar problemas y tu forma de afrontar situaciones difíciles.
No te limites a tí mismo.
Un torrente de optimismo
Por Fran - motivación - 24 mayo, 2010
Conferencia Emilio Duró parte 1
Conferencia Emilio Duró parte 2
Si después de ver el vídeo de Emilio Duró no tienes ganas de seguir tu propio camino, comerte el mundo y afrontar el nuevo día con una sonrisa de oreja a oreja, no me gustaría estar en tu pellejo.
Emilio dio una conferencia en el marco del VI Congreso de comercio gallego, con el objetivo de cambiar la vida de los asistentes. No sé si lo consiguió, pero al menos a mí me ha parecido una charla genial, electrizante y motivadora.
Debéis buscaros un buen rato libre para ver el vídeo. La conferencia completa está dividida en dos partes. Yo os presento primero la segunda parte, que es la que más me ha gustado.
Que lo disfrutéis
Algo más de información sobre Emilio Duró. ¿quieres más?
Google Font: tipografías libres para la web
Por Fran - css, Diseño web, Recursos - 20 mayo, 2010
Vía Twitter he conocido GoogleFont, con el que podemos usar en nuestras webs tipografías de gran calidad con licencia open source.
El principal problema de los diseñadores web a la hora de trabajar con tipografías es que si se utilizan fuentes poco comunes muy pocos usuarios verán la página tal y como se diseñó. Una solución a este problema es utilizar sistemas de reemplazo como SIFR, basado en Flash. Otra solución es embeber la propia fuente en la página para que el usuario la descargue como un elmento más junto a imágenes y resto de recursos web.
[ACTUALIZACIÓN] Un día después de publicar este post conozco Fonts-Live de Ascender. ¿Estaremos ante la guerra de las tipografías web?
Los diferentes navegadores no tratan de forma homogénea las tipografías embebidas. Con la librería de javascript WebFont Loader podremos cargar tipografías (de Google o de cualquier proveedor, como Typekit), controlar cuándo se ha completado la carga para hacer un callback o incluso mostrar tipografías comunes mientras se realiza la descarga de la fuente.
De momento éstas son las que hay disponibles a través de licencia open source de Google, aunque se prevé que el catálogo aumente:
Cómo insertar una tipografía.
Es realmente sencillo insertar una tipografía desde Google Font en nuestra web:
1. Enlazamos con la tipografía alojada en los servidores de Google:
<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css' />
En el Directorio de fuentes tenemos toda la información necesaria sobre cada una de las fuentes disponibles, incluído el código de ejemplo para insertarlas en nuestra página.
2. La llamamos desde el estilo CSS
h1 { font-family: 'Cantarell', arial, serif; }
Y listo, ya la tenemos funcionando.
Variantes de una tipografía.
Para conseguir variantes de una fuente, como cursiva, negrita, etc. debemos añadir los parámetros de la API a la url:
<link href='http://fonts.googleapis.com/css?family=Cantarell:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
Habría que verificar en el Google Font Directory las variantes disponibles para cada tipografía.
Cargar desde CSS con @import
Existe la posibilidad de cargar la tipografía desde el propio código CSS:
@import url(http://fonts.googleapis.com/css?family=Cantarell);
WebFont loader
Ésta es la librería con la que tendremos mayor control del proceso de carga de las tipografías.
Con el siguiente ejemplo, conseguimos que primero se muestre el texto en la fuente serif por defecto, y cuando las fuentes han sido descargadas, se muestra el texto en la fuente especificada:
This is using Cantarell
This is using Tangerine!
Google´s AJAX APIs
Si usas alguna de estas apis Ajax, puedes cargar el WebFont Loader así:
Especificando proveedores y fuentes
Este ejemplo carga la Tangerine y Cantarell desde la API de Google Font
WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
}
});
También podemos cargar de Typekit:
WebFont.load({
typekit: 'myKitId'
});
O de ambos:
WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
},
typekit: 'myKitId'
});
Además disponemos de un módulo personalizable (custom) que puede cargar una hoja de estilo desde cualquier proveedor de fuentes:
WebFont.load({
custom: { families: ['OneFont', 'AnotherFont'],
urls: [ 'http://myotherwebfontprovider.com/stylesheet1.css',
'http://yetanotherwebfontprovider.com/stylesheet2.css' ] }
});
Para más completa información sobre el Google WebFont Loader puedes visitar la página oficial.
Recuerda que eres mortal
Por Fran - motivación - 19 mayo, 2010
Memento mori – Decía un esclavo sosteniendo una corona de laurel sobre la cabeza del general romano que entraba triunfante en la ciudad para recibir los honores tras una victoria militar. Recueda que eres mortal. El esclavo repetía esta frase durante todo el desfile para que los honores recibidos del pueblo y el Senado no hicieran pensar al general que se había convertido en un dios.
En el siglo XXI, Steve Jobs le dio una finalidad muy diferente a la conciencia de la muerte: La Muerte es posiblemente el mejor invento de la Vida
De su discurso de Stanford en 2005 me quedo con unas palabras que me inspiran profundamente (de hecho han estado en la entrada del blog de forma permanente):
Durante los últimos 33 años, me miro al espejo todas las mañanas y me pregunto: “Si hoy fuera en último día de mi vida, ¿querría hacer lo que estoy a punto de hacer hoy?” Y cada vez que la respuesta ha sido “No” por varios días seguidos, sé que necesito cambiar algo.
Recordar que moriré pronto constituye la herramienta más importante que he encontrado para ayudarme a decidir las grandes elecciones de mi vida. Porque casi todo – todas las expectativas externas, todo el orgullo, todo el temor a la vergüenza o al fracaso – todo eso desaparece a las puertas de la muerte, quedando solamente aquello que es realmente importante.
Recordar que vamos a morir es la mejor manera que conozco para evitar la trampa de pensar que tenemos algo que perder. Ya estamos desnudos. No hay ninguna razón para no seguir a nuestro corazón.
Aquí os dejo este extracto del discurso. Pero os recomiendo el discurso de Jobs completo, no tiene desperdicio.
Ver archivos ocultos en Snow Leopard
Si necesitas ver los archivos ocultos en Mac OS X puedes hacerlo con el widget show/hide.
Haciendo clic en el botón que te crea en el Dashboard, los visualizas. Y volviendo a hacer clic vuelves a ocultarlos. Muy útil en situaciones puntuales que necesitemos trabajar con archivos ocultos, por ejemplo con los .htaccess
Otra forma de verlos es en la ventana de abrir o guardar archivo. Si pulsas Comando + Mayúsculas + tecla de punto (.) activarás la visualización de archivos ocultos. Pero sólo en esa ventana, y sólo en Snow Leopard
Nunca, nunca te rindas. Nick Vujicic
Por Fran - motivación - 9 mayo, 2010
Muchas veces sentimos que las dificultades nos superan, que somos incapaces de seguir adelante, que el problema que tenemos es el más grande al que un ser humano se ha enfrentado jamás. Muchas veces ante el primer fracaso, ante la primera dificultad nos rendimos y renunciamos a seguir luchando por nuestras metas.
Escucha: nunca, nunca te rindas. Tu límite no lo fijan las personas que te desmotivan, que te quitan las ganas de seguir adelante. Tu límite no lo fija el miedo al fracaso, no importa que te equivoques 50 veces antes de conseguir lo que quieres, lo que importa es que finalmente lo consigas. Tu límite lo fijas tú. No te limites a tí mismo.
Hoy te presento a una persona que me inspira profundamente, que hace que algo se remueva dentro de mí, que me da fuerzas para seguir adelante y no abandonar la persecución de mis objetivos. Cada vez que tengas ganas de rendirte, te aconsejo que veas alguno de los videos de Nick Vujicic. El tío es orador motivacional profesional y director de Life Without Limbs.
2 trucos para hacer Photoshop más rápido
En Make Photoshop Faster nos dan dos trucos para hacer nuestro Photoshop más rápido, tanto en Mac como en Windows. La clave está en cambiar algunas preferencias que trae configuradas el programa por defecto.
1. Vamos a Preferencias > Rendimiento
Cambiamos los niveles de caché a 1.
Son el número de niveles de caché de datos de la imagen. Se utiliza para reducir el tiempo que se tarda en redibujar la pantalla y crear el historiograma. Para documentos más grandes con menos capas se aconseja aumentar el número de niveles. Para documentos más pequeños con numerosas capas se acoseja reducir el número de niveles.
2. Vamos a Preferencias > Administración de archivos
Fijamos el parámetro Previsualización de imagen en no guardar
Leer PDF con Firefox en Mac OS X
Desde que uso Firefox en mi iMac ha sido un engorro no poder leer los archivos PDF en el navegador, teniendo que descargarlos en el equipo para poder verlos.
Gracias a este plugin de Sam Gross he resuelto el problema:
Hoy es el día más hermoso de nuestras vidas
Por Fran - motivación - 18 abril, 2010
“Hoy es el día más hermoso de nuestra vida, querido Sancho…
Los obstáculos más grandes, nuestras propias indecisiones…
Nuestros enemigos más fuertes, el miedo al poderoso y a nosotros mismos…
La cosa más fácil, equivocarnos…
La más destructiva, la mentira y el egoísmo…
La peor derrota, el desaliento…
Los defectos más peligrosos, la soberbia y el rencor…
Las sensaciones más gratas, la buena conciencia,
el esfuerzo para ser mejores sin ser perfectos,
y sobre todo, la disposición para hacer el bien
y combatir la injusticia donde quiera que estén…“
5 técnicas avanzadas de Photoshop para diseñadores web
Por Fran - Photoshop, Tutoriales - 18 abril, 2010
Conocimientos básicos de Photoshop bien combinados nos permiten controlar técnicas con las que realizar diseños realmente impactantes. Estas 5 técnicas son un ejemplo de ello.
Ver técnicas (en inglés)
50 tutoriales sobre creación de menús de navegación
Por Fran - Photoshop, Tutoriales - 18 abril, 2010
50 tutoriales que nos ayudarán a crear menús de navegación y botones web de alta calidad con los que mejorar la apariencia de nuestros proyectos.
Ver tutoriales (en inglés).
Introducción a SEO
Congreso de Webmasters 2009. Foto: javiermcallan
Este post fue originalmente publicado en octubre de 2009. Ha sido el único artículo que he podido recuperar después de la pérdida del blog anterior.
Fue publicado en La Webera.
La intervención de Enrique Aguilera en el III Congreso de Webmasters me ha servido para aclarar algunos conceptos, y tener una base sobre la que apoyarme para profundizar en el tema.
Ya había leído antes sobre SEO, Search Engine Optimization = Optimización de búsqueda en buscadores = técnicas para que una página web aparezca de las primeras en los resultados de Google. También había aplicado algunas técnicas SEO a mis páginas. Pero he de reconocer que la ponencia de Enrique fue muy útil para asimilar conceptos y saber qué estamos haciendo realmente y para qué.
El objetivo del SEO está claro, y lo acabo de especificar arriba: queremos que nuestras páginas aparezcan de las primeras cuando alguien busca en Google servicios o contenidos que ofrecemos en ellas. Para conseguir esto es muy importante tener claro un concepto: cada una de nuestras páginas, de nuestros archivos .html, .asp, .php o lo que sea, son documentos independientes. Google no trata el conjunto de archivos HTML de un dominio como un todo, sino que los indexa de forma independiente. Esta idea es clave. Google busca los documentos (páginas) publicados en la red que mejor satisfagan los criterios de búsqueda del usuario, por lo tanto en teoría y dejando de lado otros factores, ante una búsqueda de “Diseño de logotipo” aparecerá mejor posicionada la página del Estudio de Diseño A que ha diferenciado las clave SEO de cada una de las secciones de su web adaptándolas a su contenido, que la del Estudio de Diseño B que ha utilizado las mismas claves SEO (carteles, flyers, logotipos, webs…) en todas sus páginas. Es como si buscamos un determinado CD en una estantería repleta de CDs y todos están nombrados igual: “rock, jazz, soul, etc.”. Vale, ya sé que en esta estantería hay música y que es de los estilos que me gustan, pero ¿cómo carajo encuentro el que busco si todos tienen el mismo nombre en la caja?.
Si hemos comprendido esto nos habremos dado cuenta de que una práctica tan habitual como es la de utilizar el mismo título, palabras clave y descripción en cada uno de los documentos de una web es un error garrafal de cara al posicionamiento de nuestra página. Como afirma Enrique, lo más importante de cara al posicionamiento, tan importante que si sólo pudieramos hacer una cosa para mejorar el posicionamiento de nuestra página tendríamos que hacer ésa, es utilizar correctamente la etiqueta <title></title> de nuestras páginas. Es la clave. Si Google abre el cajón de nuestra web para indexarnos, y encuentra 20 páginas con títulos específicos que identifican claramente el contenido de los documentos, nos indexará mejor que si abre el cajón y se encuentra 20 páginas con el mismo título. No volvamos a caer en el error de usar el nombre de la empresa de nuestro cliente como título de todas las páginas. A no ser que sea una marca mundialmente conocida con un claro objetivo de branding nos dará mucho mejor resultado usar títulos diferentes según el contenido de cada sección que el mismo en todas las páginas. Esto mismo lo deberíamos aplicar también a las meta keywords y meta descriptions.
El segundo elemento en grado de importancia es la etiquera <h1></h1>. Se le puede aplicar todo lo explicado en la etiqueta <title></title>. No lo usemos para repetir el nombre de nuestro cliente, nos será mucho más util para posicionarnos si adaptamos su contenido a los objetivos de posicionamiento que queremos conseguir en el documento determinado que estamos creando.
Junto al <title> y <h1>, la frecuencia de actualización de los contenidos de nuestra página es muy importante para el posicionamiento. Google valora mucho una página “viva”, cuyos contenidos son dinámicos y no guardan los mismos contenidos durante años.
Los enlaces también son muy importantes, tanto internos como externos. Debemos delimitar la relevancia de nuestros enlaces internos ayudándonos de la semántica HTML. Debemos usar apropiadamente los anchor text de los enlaces, el texto sobre el que se hace clic para abrir un enlace. Deben ser textos específicos, ovidémosnos del famoso “pinche aquí”. También es bueno que sitios externos al nuestro nos enlancen y de esto nacen los famosos intercambios de enlaces entre páginas. Pero hay que tener en cuenta el anchor text con que lo hacen, y no llamar la atención ‘antifraude’ de Google. Es decir, hacer un crecimiento sostenible. No pasar de cero a 5.000 enlaces desde otras páginas de la noche a la mañana. En este aspecto también influye la distancia de las páginas entrelazadas . A mayor distancia entre ellas mejor valorará Google los enlaces.
Si trabajamos correctamente estos elementos habremos ganado mucho, pero hay otros aspectos técnicos que pueden ayudarnos:
- separación de diseño y contenido: usar CSS
- cumplir con los estándares de la W3C y realizar páginas que validen
- Seleccionar un buen servidor donde alojarnos: un servidor lento y con caídas influirá negativamente en nuestro posicionamiento.
- La geolocalización de nuestra página está adquiriendo cada vez más importancia: dónde está nuestro servidor (IP), dominio, DNS. Si quieres posicionarte en el mercado español, lo más lógico es que te alojes en servidores españoles.
Además de esto existen lo que Enrique llamó extra points, detalles que pueden hacernos ganar puntos extra a los ojos de Google:
- Ofrecer contenidos multimedia que favorezcan la universal search.
- Social Media Optimization (SMO): Optimización de la página para su integración en las redes sociales.
- User Generated Content (UGC): Contenido generado por los usuarios, por ejemplo los comentarios en un blog.
- Feeds: son muy buenos para Google.
Con estas bases SEO se aclaran conceptos y se puede empezar a profundizar en este mundo. Espero que os sirvan, pero os aconsejo no obsesionaros con aparecer el primero de la lista. En el mundo SEO hay mucha competencia y mucho oscurantismo. Muy pocos saben a ciencia cierta cómo funciona Google, y éste cambia continuamente sus algoritmos de indexación. Por lo que obsesionarnos con aparecer los primeros puede hacernos perder tiempo y recursos que podríamos emplear a otras tareas. Como dice Pere Rovira se pueden obtener muy buenos resultados sin aparecer el primero. Cuando te digan “Si no sales el primero eres un fracasado”, responde: “fracasado tú”. El posicionamiento es un medio, no un fin en sí mismo.
Haz copia de seguridad
Por Fran - motivación - 26 marzo, 2010
Hoy renazco de mis cenizas con este consejo: haz siempre copia de seguridad. Literalmente me refiero al supuesto de que tengas un blog y vayas a realizar una actualización automática del sistema WordPress. Si generalizo un poco, este consejo es aplicable a todo el mundo de la informática. Y si traspaso la barrera que separa el mundo virtual del real, creo que sigue siendo un buen consejo a tener en cuenta.
En WordPress una copia de seguridad me hubiera permitido recuperar la miríada de pulsaciones de teclas con las que esculpí mi blog durante meses. En el mundo de la informática una copia de seguridad es un ángel de la guarda que nos sonríe indulgente mientras jugamos a ser dioses.
En el mundo real no debemos tomar este consejo como un lastre que nos retenga frente a cualquier riesgo, sino como la asunción responsable de los riesgos que nos veamos obligados a afrontar para conseguir nuestras metas. No podremos tener las espaladas cubiertas en todo momento, pero siempre en nuestro interior debemos estar preparados para que no nos hunda un fracaso, un traspié o un mal resultado. Tener la certeza de que es posible errar y estar prestos a recoger las enseñanzas de los yerros nos hará inmunes al desaliento y la frustración. Ésta es la copia de seguridad que aconsejo aplicada a la vida real.