Diseño web Félix Blanco

Cómo añadir tu página web o blog a WordPress Showcase

felixblanco — Thu, 28 Feb 2013 17:10:59 +0000

Una de las “patas” del SEO que debes tener en cuenta (si o si) es el linkbuilding, es decir, conseguir que otras páginas enlacen a la tuya por el motivo que sea. El enlace óptimo para una campaña de linkbuilding es aquel que repercuta lo máximo posible en el posicionamiento de tu página, ya sea por que la otra página es de la misma temática que la tuya o que ésta es muy relevante en internet.

Si tienes una página web (o blog) corriendo sobre WordPress es posible que puedas obtener un enlace de calidad desde wordpress.org, añadiendo tu página a su “showcase”. Para ello debes irte al formulario de sitios para su showcase e introducir los datos de tu sitio.

Ojo! Hay veces que deniegan tu solicitud diciendo que no es una página wordpress, cuando en realidad sí lo es, esto es debido a que has modificado un poco tu template para ocultar la versión de wordpress que tienes (y bien que has hecho), así que hay que solucionarlo para enviar la solicitud y luego dejarlo como estaba

Etiqueta Generator

Añadimos otra vez la información meta sobre wordpress de tu head

Ficheros de licencia y ayuda

Nos descargamos de nuevo wordpress y copiamos a la raíz de nuestro sitio los siguientes archivos:

licencia.txt
license.txt
readme.html

Y ya está… ya estamos listos para enviar nuestro sitio wordpress al showcase, ¡esperemos que nos lo aprueben!

jsFiddle: Editor online html, css y javascript

felixblanco — Sat, 13 Aug 2011 14:17:20 +0000

jsFiddle es un genial editor online de código html, css y javascript (diseño web frontend). Si bien no vas a poder realizar tu página web entera, si puedes probar pequeños trozos de código y depurarlo de forma muy sencilla. Puedes añadir multitud de librerías javascript: jQuery, jQuery UI, MooTools, Prototype, etc… incluso enlazar tus propias css e imágenes.

Además de probar tu código puedes compartirlo con quien quieras, pulsando Save generas una url que puedes compartir con quien quieras y así que alguien te ayude a mejorar tu código. Incluso puedes añadirlo a una página web con este aspecto:

En definitiva, una herramienta online muy potente que hará las delicias de cualquier diseñador web o programador front-end.

Bamboo dock: Juguetes para tu tableta

felixblanco — Sun, 24 Apr 2011 14:24:02 +0000

Buscando los últimos drivers para una wacom pen&touch he tropezado con esta maravilla, una especie de app store pero de aplicaciones pensadas y optimizadas para usarlas con una tableta, incluso el propio dock funciona a base de “trazados” para ir descargando y seleccionando las aplicaciones: ¡me ha encantado!

Basado en Adobe AIR, está disponible tanto en Windows como Mac y dispone de SDK para que desarrolladores puedan incluir sus aplicaciones aunque me imagino que de una forma parecida a la de Apple: moderadas, ya que una de las características que más me han llamado la atención es el cuidado diseño e impecable funcionalidad de todas las aplicaciones que he probado (y no son pocas)

Si es cierto, que algunas pueden resultar simples, únicamente más allá de servir como demo para probar la tableta.

10 consejos sobre usabilidad web

felixblanco — Wed, 30 Mar 2011 19:36:23 +0000

En internet el usuario es el que manda, ya tengas una página web personal o un portal enorme, tienes que pensar que las personas que entran a tu página web lo hacen buscando algo: hay que ponerles el camino más fácil posible a la información que aquello que estan buscando.

Estas son unas pequeñas pautas a seguir para conseguir un sitio web usable:

1. El logotipo arriba a la izquierda y el menú muy cerca de él

Se sabe que los humanos empezamos a centrar nuestra atención en la parte superior izquierda de las páginas web y es ahí dónde el usuario va a esperar que aparezca el logotipo, lo siguiente que necesitará será el menú para poder navegar, así que déjalo cerca del logotipo para que del primer vistazo sepa dónde esta.

Ah! y pon un enlace en el logotipo a tu portada, los usuarios esperan pulsar en el logo para volver a la portada.

2. Añade imágenes acompañando el texto

Cuida que no haya gran cantidad de texto sin una cerca, ya sean complementarias a lo que quieres contar o simplemente que acompañen, pero los textos largos se leen mejor si de vez en cuando hay algo más que texto.

3. Haz que tu web parezca lo que es

Si tienes una página con contenido que no va a ser actualizado durante mucho tiempo puedes tener un poco más de libertad, pero si tu página web es un blog o una tienda virtual, por favor, que lo parezca.

4. Las cosas importantes siempre a mano

Si la finalidad de tu página web es que el usuario llegue una determinada parte de ella, enlázala!! Crea botones de llamada a la acción y plántalos en lugares bien visibles para “guiar” al usuario hacia dónde tu le quieres llevar y es al fin y al cabo hacia dónde el usuario quiere ir. Si la finalidad de tu página es que los visitantes contacten contigo, pónselo fácil a los usuarios y pon un formulario de contacto en todas las páginas.

5. Los usuarios no siempre entran por la portada

Sobre todo si tu página web está bien indexada o tienes un blog, es algo muy habitual que tus visitas entren directamente desde el buscador a ese contenido que estaban buscando o que por ejemplo un amigo les pase el enlace. Para esas visitas hay que diseñar también las páginas interiores, obviamente no puedes poner la misma información que en la portada, pero haz todo lo posible para que una visita que no ha pasado por la portada “entienda de que va” tu página web.

6. Añade un buscador

Si un usuario de un primer repaso no encuentra lo que busca en tu página web, pónselo fácil, dale un buscador con el que pueda localizar aquello que está buscando. Además, cuida que los resultados de ese buscador sean relevantes.

7. Efecto hover en aquello que el usuario puede pulsar

Simple y llanamente, haz que en aquello dónde el usuario puede pulsar, cambie de alguna forma (poniendo un subrayado, cambiando de color, girándolo… lo que sea) al situar el ratón encima, simplemente el usuario espera que sea así.

8. NO a la música y los vídeos que se reproducen automáticamente

Es tremendamente molesto entrar en una página web y que suene una canción de fondo o un vídeo empiece a reproducirse. Está muy bien añadir este tipo de contenidos, pero ten cuidado en que el usuario sea el que controla cuando empiezan a reproducirse.

9. Direcciones cortas y autoexplicativas

Al ver un enlace en el navegador o en una red social por ejemplo, siempre es agradable hacerte una idea de lo que vas a ver dentro de ese enlace, aún sin pulsarlo, por ejemplo: http://www.felixblanco.net/10-consejos-sobre-usabilidad-web/ es mejor que http://www.felixblanco.net/?p=293

10. Mantén una coherencia en el diseño de toda la página

Haz que elementos básicos (y no tan básicos) de tu diseño se repitan en todas las páginas evitando sorpresas al usuario. Esto incluye enlaces, layouts de las páginas (con o sin sidebar), elementos de navegación como pestañas, scrollbars, etc..

Adobe Wallaby para convertir flash a HTML5

felixblanco — Tue, 08 Mar 2011 16:31:01 +0000

Que flash para web esté muerto no es ninguna novedad, la falta de accesibilidad de las web en flash, la nula indexación por parte de los motores de búsqueda y el tener que depender de un plugin para funcionar han hecho que flash pase a la historia del diseño de páginas web, al igual que lo hicieron los gifs de sitios en construcción.

Lo que si es novedad es que Adobe lance una aplicación con la que flash se puede convertir en un programa totalmente prescindible:

Adobe Wallaby es capaz de convertir las animaciones en archivos html entendibles por cualquer navegador sin depender de plugins y perfectamente modificables por cualquier editor. Funciona sobre Adobe AIR por lo que es multiplataforma aunque de momento está en fase beta.

Cambiando la fuente de tu página web: Cufón, Google Font API y @font-face

felixblanco — Sat, 19 Feb 2011 13:04:17 +0000

Actualmente en el diseño web, ya nadie quiere usar las fuentes “seguras”, aquellas que se incluyen en el 95% (o más) de los dispositivos que pueden acceder a la web: Arial, Helvetica, Courier, Times New Roman, Verdana, etc… están ya “muy vistas” o simplemente no son atractivas para títulos ni acordes a nuestro diseño. Por no hablar de que ni siquiera se ven igual en todos los dispositivos.

Utilizar imágenes para títulos no es una opción, ya sería demasiado costoso para la usabilidad y el posicionamiento de nuestra página.

Existen técnicas para poder añadir más fuentes a parte de las “seguras” a nuestras páginas, mis favoritas son las siguientes:

Cufón

Basado en javascript, nos permite transformar cualquier fuente que tengamos en nuestro disco duro a un archivo .js para posteriormente incluirlo en nuestra página. Funciona en todos los navegadores convirtiendo “al vuelo” el texto que seleccionemos en imágenes por lo que puede ralentizar si se usa de forma excesiva.

Usando cufón

Descarga cufón y convierte tus fuentes NOTA: cuando conviertas tus fuentes añade ÁáÉéÍíÓóÚúÑñ¿¡ a los caracteres porque no se incluirán de forma automática.

En el siguiente código añadimos la librería, una fuente y reemplazamos los títulos h1.

@font-face

Basado en CSS, nos permite transformar nuestras fuentes en archivos compatibles para enlazarlos desde un archivo CSS y usar el tipo de fuente con la etiqueta font-family. Podemos estar seguros de que todos los navegadores la muestren igual.

Además de convertir tus fuentes puedes enlazar las ya creadas desde repositorios de fuentes (gratuitas o de pago) como:

Usando @font-face

Convertimos la fuente que queremos utilizar, definimos la nueva familia de fuentes y la utilizamos donde queramos como una fuente más:

@font-face{font-family: Quicksand; src: url('Quicksand.otf');}
h3{font-family: "Quicksand", Gil Sans, arial, sans-serif;}

Google Font API

De forma similar al @font-face, Google nos ofrece también poder cambiar las fuentes de nuestras páginas web de forma muy sencilla. No hace falta ni convertir ni alojar nada, simplemente seleccionamos la fuente que nos guste de la lista que nos propone Google: No podremos utilizar la que nosotros queramos.

Usando Google Font API

Seleccionamos la fuente que nos guste y Google nos proporciona el código para utilizarla:

h1 { font-family: 'Ubuntu', arial, serif; }

Añadir tu web a galerías CSS

felixblanco — Fri, 04 Feb 2011 20:41:33 +0000

Conseguir enlaces entrantes es uno de los pilares del posicionamiento de páginas web, pero no siempre es fácil. Páginas como los directorios te pueden ayudar a ello, pero corres el riesgo de que tu enlace se pierda entre toneladas de enlaces esto te ayude poco en el posicionamiento. Las galerías css por el contrario, suele estar más reguladas, mejor posicionadas y es una buena forma de publicitarte, ganar visitas y por el camino ganar enlaces entrantes

Funcionan como un lugar de inspiración para diseñadores, por lo que si tienes un buen diseño web, basado en estándares y atractivo no tendrás problemas en que las galerías de css te añadan. La labor de ir buscando una a una galerías y añadiendo tu página a ellas puede ser tediosa, para solucionarlo, existen listas de galerías css con un el enlace directamente al formulario para rellenar con datos de tu página web.

Debes tener en cuenta:

1. Paciencia, vas a abrir muchas pestañas, por lo que es recomendable que cierres todas las que puedas de tu navegador.
2. Prepara tu dirección de correo, descripción (en inglés), título, url, etc…
3. Abre el photoshop con una captura de pantalla de tu página web entera. Te pedirán capturas de pantalla de todos los tamaños que te puedas imaginar (acorde con la galería a la que estés añadiendo tu página web).

Listas de galerías css:

Convertir error 404 en búsqueda WordPress

felixblanco — Fri, 21 Jan 2011 14:13:09 +0000

Una de mis funcionalidades favoritas de wordpress es la gestión “out the box” de elementos importantes como la gestión de errores 404. Y es que a medida que una página web crece, crecen las url que se manejan y (el pilar del SEO) las páginas que a su vez enlazan a esas url que no siempre podemos controlar.

Quizá en algún momento borramos un contenido y la url se borra de nuestra página pero está enlazada desde otro sitio, produciéndose un error 404.

Con el fin de tratar de corregir esos errores y al fin y al cabo no perder esa visita podemos convertir un feo error del navegador:

En algo un poco más agradable, símplemente añadiendo el archivo 404.php a nuestro template de WordPress.

Además de no perder la visita podemos aprovechar y mostrar contenido relacionado con lo que se espera encontrar y quizá encontrar el contenido cuya url no corresponde. Para conseguirlo símplemente añadimos al archivo 404.php de nuestro template wordpress el siguiente código:

$search_term = substr($_SERVER['REQUEST_URI'],1);
$search_term = urldecode(stripslashes($search_term));
$search_url = 'http://davidblog.ws/blog/index.php?s=';
$full_search_url = $search_url . $search_term;
$full_search_url = preg_replace('/ /', '%20', $full_search_url);
$full_page = implode("", file($full_search_url));
print_r($full_page); die();

Cambiando http://davidblog.ws/blog/index.php?s= por la ruta de nuestro sitio que realice las búsquedas.

Cambiar toolbar al vuelo en CKEditor 3.x

felixblanco — Wed, 19 Jan 2011 19:31:41 +0000

CKEditor es un potente editor WYSIWYG, que añade una barra de herramientas a una caja de texto para que cualquier usuario pueda incluir etiquetas html, imágenes, etc.

Una característica interesante es la posibilidad de definir diferentes barras de herramientas (una básica y otra avanzada) cuando creamos una instancia del editor. El problema viene cuando una vez creada la instancia (cuando se ha cargado la página por ejemplo) queremos cambiar, por ejemplo, de la barra de herramientas básica a la avanzada para que los usuarios avanzados puedan disponer de más botones y más funcionalidades.

Definiendo las barras de herramientas

Dentro del fichero ckeditor.config.js buscamos dónde se definen las barras de herramientas y añadimos:

config.toolbar_Basic = [
['Bold','Italic'],['Format'],['Cut','Copy','Paste'],['SpellChecker', 'Scayt'],
['Undo','Redo'],['Image','Table'],['NumberedList','BulletedList'],
['Link','Unlink'],['Find','Replace','-','SelectAll','RemoveFormat'],['Maximize'],['SwitchBar']
];
config.toolbar_Full = [
['Bold','Italic','Underline','Strike','-',],
['Format','FontSize'],
['Cut','Copy','Paste','PasteText','PasteFromWord'],['Subscript','Superscript'],
['SpellChecker', 'Scayt'],
['Undo','Redo'],
['Image','Table','Smiley','SpecialChar'],
['NumberedList','BulletedList'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink'],
'/',
['Find','Replace','-','SelectAll','RemoveFormat'],
['Outdent','Indent','Blockquote'],['Source'],['Maximize', 'ShowBlocks'],['SwitchBar']
];

Pudiendo añadir o quitar elementos de ambas barras de herramientas para poder configurarlas a las necesidades de tu sitio. El botón: ['SwitchBar'] será el que cambie de una toolbar a otra.

Instalando el plugin para CKEditor

Switchbar ckeditor plugin

Copiamos el contenido del archivo comprimido a /plugins/ en la raíz de nuestra carpeta de CKEditor y añadimos las siguientes líneas a ckeditor.config.js para instalar el plugin:

config.extraPlugins += (config.extraPlugins ? ',switchbar' : 'switchbar' );
CKEDITOR.plugins.addExternal('switchbar', '/plugins/switchbar/');

Ya está!

Puedes revisar la configuración del plugin o curiosear cómo funciona desde el archivo plugin.js dentro de la carpeta del plugin.

Post thumbnail: Añadiendo miniaturas a las entradas en WordPress

felixblanco — Mon, 03 Jan 2011 22:12:01 +0000

Cuando escribimos entradas en un blog, habitualmente añadimos imágenes para complementar lo que queremos contar, ya sea un pantallazo explicando cierta característica o simplemente añadiendo el logotipo de la tecnología de la que estamos hablando para hacer más amena la lectura.

Además de las herramientas habituales de WordPress para introducir imágenes dentro del contenido, desde WordPress 2.9 existe la posibilidad de añadir una imagen vinculada a un post para mostrarla por ejemplo en listados de post, dentro del post al lado del título, etc… Lo bueno de éste sistema es que no nos preocupamos por las medidas, simplemente subimos la foto y se adaptará dentro del diseño según lo definamos:

Haciendo que tu tema lo soporte:

Dentro del fichero functions.php de nuestro tema añadimos:

add_theme_support( 'post-thumbnails' );

Lo que hará aparecer el siguiente recuadro en el listado de características de un post,gracias al cual podremos añadir una imagen relacionada a nuestra entrada.

Mostrando la imagen

Podremos mostrar la imagen en cualquier lugar de nuestro tema, siempre que tengamos la referencia del post (como dentro del Loop por ejemplo)

the_post_thumbnail('thumbnail'); // 150px x 150px
the_post_thumbnail('medium'); // 300px x 300px
the_post_thumbnail('large'); // 640px x 640px

the_post_thumbnail( array(100,100) ); // Resolución a medida

Además de las resoluciones de wordpress (thumbnail,medium,large) podemos declarar las nuestras propias de la siguiente forma:

En functions.php:

add_image_size('portada-thumb', 150, 90, true);

Para luego mostrarla de la siguiente forma:

the_post_thumbnail('portada-thumb');

Más opciones

La función the_post_thumbnail también acepta argumentos como añadir la etiqueta alt, en el siguiente ejemplo se muestra una miniatura del tamaño que hemos predefinido y como alt le añadimos el título del post:

the_post_thumbnail('portada-thumb', array( 'alt' => get_the_title() ) );

Fallo típico

Subes una imagen destacada a un post y modificas el tamaño de la miniatura, wordpress no regenera el thumbnail creado y tu crees que estás haciendo algo mal porque los thumbs se muestran con el ratio definido antes. Solución: Regenerate Thumbnails