En la sesión anterior registramos una cuenta en un proveedor de espacio web, creamos un espacio de alojamiento (con un subdominio para acceder a él) e instalamos WordPress en él. Además, configuramos sus aspectos básicos y publicamos alguna entrada de prueba. Recuerda que hiciste el blog privado para evitar que pudiese ser accesible por el público en general antes de que estuviese «presentable».

En esta sesión veremos como mejorar el aspecto visual de un blog para hacerlo más presentable y adaptarlo a las necesidades de la temática de nuestro sitio.

En esta sesión vamos a seguir explorando las opciones de administración de WordPress, centrándonos en el aspecto gráfico, es decir, los temas.

Pero antes…

Recuerda que para sacar el máximo partido a este taller es necesario que pienses un proyecto que puedas llevar a cabo mediante la creación de un blog, web o similar. Puede ser algo personal, profesional o empresarial. Si te decantas por la parte profesional (docencia), pero no tienes muy claro como enfocarlo, en esta entrada de mi otro blog te propongo algunas ideas de cosas que puedes hacer.

Ahora sí: los temas.

Temas

En la sesión anterior vimos que hay dos maneras de acceder al área de administración, mediante un enlace en la web, como ocurre en este blog (Barra lateral – Administración del sitio) y poniendo en la barra de direcciones «/wp-admin». ¿Por qué no es igual en todos los blogs? Porque depende de cómo sea el aspecto gráfico, y, como puedes ver, el aspecto gráfico de este blog no es el mismo que el del blog que acabas de crear.

WordPress, como muchas otras aplicaciones web en la actualidad, está diseñado en capas. Esto implica que los aspectos como la presentación de los contenidos son independientes a la configuración y lógica interna del blog. Recuerda, los contenidos se guardan en una base de datos y se obtienen en «tiempo real» para generar la página cada vez que la solicita un usuario.

Esto implica que podemos hacer completamente independiente el aspecto de un sitio de los datos que contiene. Dicho de otra forma: modificar el aspecto gráfico del blog no ha de afectar a los contenidos

El aspecto gráfico de un blog en WordPress viene determinado por los temas, que representan los diferentes diseños en los que se puede mostrar la información. Existen una serie de temas oficiales y una gran variedad en Internet de temas realizados por terceras personas. Algunos gratuitos y otros de pago.

Como ves, existen grandes posibilidades a la hora de darle aspecto a nuestro blog. Además, por norma general, todos los temas incluyen opciones de personalización adicional en su configuración (y como son de código abierto, si se tiene un poco de idea sobre HTML y CSS, pueden ser modificados a mano).

No obstante, hay que tener en cuenta que WordPress nos lo quiere poner todo fácil, por lo que para instalar un tema nuevo a nuestro blog, basta con seleccionarlo del buscador integrado en el área de administración.

Para hacerlo hay que acceder a Administrador del sitio – Apariencia – Temas.

Para empezar, vamos a seleccionar un tema que encaje bien con la temática de nuestro blog. Fíjate sólo en los colores empleados y en la distribución de los contenidos, ya que las imágenes las personalizaremos a continuación.

Puedes ir probando varios. WordPress ofrece la posibilidad de previsualizarlo con nuestros contenidos (opción «Ver»). Como puedes ver algunos tienen acabados muy profesionales. Pese a eso, hay una gran cantidad de diseñadores en Internet que se dedican a la venta temas.

Personalizar un tema

Una vez seleccionado un tema que nos guste, podemos seleccionar la siguiente opción de Apariencia que es Personalizar. Esto abrirá una sección en la que aparecerá la visualización del tema junto a una serie de opciones que se pueden configurar sobre el mismo (esquemas de colores alternativos, fuentes, imágenes de cabecera…). Las opciones dependerán del tema elegido y es algo que depende de su diseñador.

No obstante, resulta muy interesante explorar las opciones que nos ofrece el tema para conocer qué podemos hacer con él ya que determinará nuestras posibilidades de presentación.

Como puedes ver, a medida que se van cambiando las opciones, la visualización del tema se actualiza. Este modo de trabajo se denomina WYSIWYG (What You See Is What You Get) y resulta realmente cómodo para ver el aspecto que tendrá nuestro blog sin tener que estar contínuamente recargando.

Dedica unos momentos a explorar y probar las opciones que te ofrece el tema. Si no te convencen, ¡siempre estás a tiempo de cambiar de tema!

Imágenes

Un aspecto muy importante a la hora de diseñar un blog es la selección de imágenes. Las imágenes constituyen un elemento fundamental en todos los temas y no es casualidad, ya que tienen un gran impacto en la primera impresión que un usuario se lleva de una web.

Para seleccionar las imágenes de nuestro tema (de como insertar imágenes en las entradas ya hablaremos más adelante) hay que tener en cuenta dos aspectos:

La resolución

Es decir, anchura por altura de la imagen expresada en píxels. Hay que emplear imágenes que no se tengan que deformar o escalar excesivamente para aparecer en pantalla. Hay que tener en cuenta que no todas las pantallas tienen la misma resolución, y esto puede provocar que una misma imagen se vea diferente en diferentes pantallas (si es más grande que la resolución de la pantalla, se cortará, si es más pequeña se escalará perdiendo calidad).Aquí tienes un enlace en el que se comparan las resoluciones más empleadas en Internet.

Algunas ideas para elegir la resolución correcta de una imagen:

• Normalmente el propio tema nos recomendará las medidas en píxels que ha de tener la imagen.
• Si no sabemos las medidas en píxeles de un espacio donde queremos meter una imagen, podemos usar una regla. Existen plugins para los navegadores que incorporan esa función. Por ejemplo, este.
• Si tenemos una imagen con una resolución diferente, podemos usar un editor de imágenes online para recortarla a la que nos interese.

Os pongo un par de enlaces con información detallada sobre cómo instalar la extensión en Chrome para medir imágenes en píxels:

• Instrucciones para añadir extensiones a Google Chrome
• Tutorial de Page Ruler, una extensión para medir en el navegador

El tamaño

El tamaño de una imagen (lo que ocupa en disco y por tanto, lo que tiene que descargar el navegador) vuelve a ser importante, sobre todo a partir de la aparición de las tarifas 3G y 4G con límites de descarga. Normalmente es un aspecto relacionado con la resolución; a mayor resolución, mayor tamaño.

Basta con adaptar la resolución como se ha visto en el punto anterior para evitar tamaños excesivos.

La licencia

Existe el mito de que todo lo que está disponible en Internet se puede usar libremente, pero no es así. De hecho todas las imágenes, vídeos, textos, etc. son propiedad de su respectivo autor (que no tiene por qué ser quien los ha subido) que puede no estar de acuerdo con el uso de esos recursos en determinados contextos.

Por eso, hemos de evitar «tomar prestado» contenidos ajenos para ilustrar nuestro blog, ya que puede dar muy mala imagen de nuestro proyecto.

Existen infinidad de webs que venden imágenes para uso personal y profesional. También hay webs con colecciones de imágenes libres.

Otra opción es usar imágenes con licencia Creative Commons, es decir, imagenes para las que sus autores han dado permiso de utilización, como explica el siguiente vídeo:

Puedes encontrar imágenes Creative Commons usando el buscador CCSearch.

Con esta información, dedica unos instantes a localizar imágenes en Internet relacionadas con la temática de tu blog para incorporarlas a tu sitio.

Logotipo

Otra opción de personalización muy interesante para un blog comercial es la incorporación del logotipo corporativo. Generalmente, el logotipo es una imagen de dimensiones reducidas que suele situarse en los temas junto al título del blog.

Se puede añadir un logotipo desde la personalización del tema, en los temas en los que esté esta opción.

También se puede usar para blogs de otra temática. Yo he creado el siguiente logotipo para el curso:

Puedes crear un logotipo para tu proyecto de forma rápida y online usando los recursos listados en esta web. Una vez diseñado, descárgalo y agrégalo a tu blog.

Si quieres más detalle sóbre cómo hacerlo, puedes seguir este tutorial.

ICONO del sitio

El icono del sitio es el simbolito que aparecerá en la pestaña del navegdor cuando se visite el sitio. Fíjate en la pestaña que contiene este blog. Si tuvieras varias pestañas abiertas te seria fácil localizar las pestañas en las que tienes abierto este blog, ¿verdad? Yo he puesto como icono el mismo logotipo, aunque podría haber elegido cualquier otra imagen. Ahora bien, interesa que el logotipo tenga que ver con la imagen corporativa de la web, para no confundir a nuestros visitantes.

Puedes buscar un icono para tu blog en esta web que contiene cientos de miles iconos gratuitos para descarga. Intenta que tenga que ver con la temática del blog.

Tareas

A estas alturas ya todos los blogs del curso tendrán un aspecto diferente y los proyectos, pese a estar aún sin contenidos, ya van tomando forma. Es el momento de compartirlo con los compañeros.

Una vez tengas el aspecto de tu blog claro, pon un enlace al mismo como comentario a esta entrada del blog. Crearé una sección en la barra lateral con enlaces a todos los blogs de los compañeros (empezando por el mío).

Foto: The art of wordpress por mkhmarketing