Diseño avanzado de un Blog para Dummies – Óliver Al-Nabhany

por Óliver Al-Nabhany

 Diseño avanzado de un Blog para Dummies – Óliver Al-Nabhany

Herramientas necesarias (o aconsejadas)

• Photoshop (o Gimp, o PaintShop Pro, o Paint si eres muy hábil…)

• Firefox e Internet Explorer.
• Un editor Web. Aquí para mí hay dos opciones interesantes:
Dreamweaber y CSS Vista. Si sabes algo de Html y CSS usa
Dreamweaber, si no, usa CSS Vista, será suficiente.

Proceso:

• Instalación de Tema.
• Boceto.
• Entendiendo la estructura.
• Entendiendo el CSS.
• De boceto a realidad.
• Tipografías.
• Depurando.

Recomendaciones

• Para ir previsualizando el blog usa Firefox. IE puede volverte loco.

• En principio edita desde el propio Wordpress. Si no sabes nada de html
y CSS podría complicarse mucho desde Dreamweaber.
 Diseño avanzado de un Blog para Dummies – Óliver Al-Nabhany

Instalación de Tema.

Como queremos un buen acabado y en principio no somos ni programadores,

ni diseñadores, ni nada por el estilo, lo primero será buscar un tema que case
un poco con la idea que tenemos.

En este tutorial me voy a basar en Kubrick, un tema simplista, muy estándar.

Puedes basarte en Sandbox, más apto para diseñadores, pero implica alguna
complicación que podemos evitar, pues repito no tenemos por qué saber nada.

Una vez hemos entrado en el Tablero (o Dashboard) vamos a

Presentación/Plantillas y seleccionamos la que nos convenga (Kubrick en
nuestro caso). Podemos instalar unos widgets (lo que aparece a los lados:
búsqueda, comentarios recientes…), para ello vamos a Presentación/Widgets
de la barra lateral.

Ya tenemos la base terminada. Ahora echamos un vistazo para ver como

queda e imaginamos como queremos que quede.
 Diseño avanzado de un Blog para Dummies – Óliver Al-Nabhany

Boceto.

Esta parte es importantísima, puede agilizar o hacer terriblemente lento el

proceso. La idea es hacer un dibujo de la estética del blog del que luego
sacarás las imágenes para que sea justo como quieres.

Yo para esto personalmente uso Photoshop, básicamente porque me he

acostumbrado a él. Para mi dibujar en Photoshop es tan cómodo como hacerlo
en un folio. Si prefieres otro programa, no hay problema, la idea es la misma.

La idea es dibujar algo así (obviamente con tu diseño):

 Diseño avanzado de un Blog para Dummies – Óliver Al-Nabhany

No te compliques en exceso. Haz algo que te guste y que no sea muy

farragoso. Cambiarlo una vez terminado será más fácil que basarte en un
diseño muy enrevesado.

Como hacer este boceto:

Créate una imagen de unos 1000px de ancho por unos 2000px de alto.
(Archivo/nuevo…)

Créate en su interior un rectángulo más o menos centrado de unos 750 a 800

píxeles de ancho por 1500 de alto. Hazle todas las virguerías que quieras.
Coloca una cabecera y un pie de página (si quieres). Recuerda usar estos
tamaños, pues recortarás de esta imagen para crear tu diseño.

No quiero ser pesado, pero dedícale algún tiempo a este paso. En los blogs la
simplicidad juega dos papeles: la facilidad de lectura y la facilidad de edición.

Si quieres colocar una foto o una imagen, procura que esté en la cabecera o en
los pies del blog, si lo colocas a los lados se puede complicar muchísimo
(razón por la que casi nadie lo hace).

Yo en mi caso usé esta imagen:

 Diseño avanzado de un Blog para Dummies – Óliver Al-Nabhany

Cuando realices el dibujo, ve anotando en un papel los colores que usas en

hexadecimal. Para ello selecciona el cuentagotas, y en la pantalla que aparece,
abajo habrá un número del tipo #XXXXXX. Apunta esos colores porque los
necesitarás para los fondos, tipografías…
 Diseño avanzado de un Blog para Dummies – Óliver Al-Nabhany

Entendiendo la estructura.

Esta parte sin ayuda puede hacerse muy, muy pesada, ya que la docmentación
en Internet es demasiado técnica y en la mayoría de los casos está en Inglés.

A partir de ahora vamos a considerar que el blog tiene tres partes:

• Esqueleto (el código HTML)

• Piel (el estilo CSS)
• Contenido

Del contenido de momento no nos preocupamos, pues nos lo generará

Wordpress.

En principio no vamos a tocar el HTML, solo vamos a entender lo básico para

saber cómo son las entrañas de nuestro blog. Para ello vamos a ver de que se
compone un blog:
 Diseño avanzado de un Blog para Dummies – Óliver Al-Nabhany

Si te metes en cualquier blog verás que tiene una estructura muy similar a
ésta. En cualquier caso seguro que puedes descomponerlo de una forma
similar.

Hay que decir que esto no es así siempre. En según que temas llaman a page
“wrapper”, a content “container” o a sidebar “primary”. No te preocupes voy
a explicarte como saber como se llama cada parte en tu tema.

Para empezar abre tu web desde Firefox. Una vez cargada ve a Ver/Código
fuente de la página. Te aparecerá el código. En principio supongo que no lo
entiendes, así que vamos a ver que descubrimos.

Busca: <body>

Una vez localizado vamos a fijarnos en lo que viene a continuación. Gracias a

la tabulación podremos ver qué está dentro de que.

Verás que hay como un empiece que se repite algo así como <div con algo
que sigue. Si te fijas suelen acompañarle o id=algo o class=algo, bueno
pues esas son las partes de nuestro blog. Vamos a ver aproximadamente como
sería en mi caso:

<body>
<div id=page> bla bla bla
<div id=header> bla bla bla
<div id=content> …..
<div class=post> …..
<div id=sidebar> …..
<div id=widget>…..
<div id=footer>…..

Como veis es fácil relacionar esta estructura con la imagen de antes. Es muy
probable que tardes un rato en entenderla y organizarla, pero verás que es
fácil. Además puede que se te escape alguna parte o añadas alguna que no es.
No te preocupes más adelante lo depuraremos. De momento interesa que
tengas una idea general. Yo me he dejado partes porque de momento no me
aportan una visión clara.

Una vez realizado este paso vamos a empezar a ver como funciona todo a
través del CSS.
 Diseño avanzado de un Blog para Dummies – Óliver Al-Nabhany

Entendiendo CSS

Las CSS básicamente es lo que le dice al navegador las características físicas

de cada parte. Por ejemplo puede decirle que el header lleva una germinada
imagen de fondo, o que la Sidebar tiene un ancho determinado, o que el
Content lleve un tipo de letra determinado.

Lo primero que vamos a hacer es ver la CSS de nuestra web. Para ello en el
código de la página que estábamos usando antes buscamos algo así:

rel="stylesheet" href=http://loquesea.com/wp-
content/themes/default/style.css

Ponemos la dirección en Firefox, y nos aparecerá en código CSS. Ya estamos

otra vez sin entender nada. No hay problema. Hay cosas que llaman la
atención.

Por ejemplo, que esta todo de forma:

algo {un montón de cosas}

algo {otro montón de cosas} o
#algo {un montón de cosas} o
.algo {un montón de cosas}

Bueno pues esos “algos” son las partes del blog, desde zonas a tipos de letra,
y los montones de cosas son las características de esas cosas.

Además veremos que esos “algos” nos suenan, y es que son los nombres de la
estructura que hemos visto antes (header, sidebar…).

Los distintos “algos”:

Algo: modifican cosas que en el Html de antes estaban directamente

entre <>. Ejemplo si quiero modificar lo que está dentro de <body> pondré
body {un montón de cosas}. También se modifican así los textos.

#algo: modifican cosas que están dentro de <div id=algo>. Ejemplo

para modificar <div id=header> pondremos #header{un montón de
cosas}

.algo: modifican cosas que están dentro de <div class=algo>. Ejemplo

para modificar <div class=post> pondremos #post{un montón de cosas}

Los modificadores:

Dentro de las llaves se colocan los modificadores. Son del tipo:

Nombremodificador=valor; Ejemplo:

#header{Background=red;}

Nos colocara la cabecera de color rojo.

 Diseño avanzado de un Blog para Dummies – Óliver Al-Nabhany

Bueno pues lo que vamos a hacer ahora es aprovechar lo poco que sabemos de
CSS para saber como se llama exactamente cada cosa en nuestro blog.

Lo que vamos a hacer es lo siguiente:

Coges dos folios. En uno apuntas 30 0 40 colores en hexadecimal (#XXXXXX) y

apuntas el color. Ejemplo: #FF000 Rojo. Para ello ayúdate de Photoshop, o
alguna herramienta de dibujo. Si usas Mac lo puedes hacer con la herramienta
Aplicaciones/Utilidades/Gestor de color digital. Hay mil programas que
hacen esto.

Una vez lo has hecho con los 40 (invéntate nombres si quieres), vas a tu
Wordpress: Apariencia/Editar CSS. Y a cada “algo” le pones o le modificas el
background y el color, colocándole dos colores de tu lista (si hay algún
modificador que contenga la palabra background cárgatelo de momento). Es
decir:

body{background:#color1; color:#color2;}
#header{background:#color2; color:#color3;}
…

En nuestro folio apuntamos donde hemos puesto cada color:

#color1 Violeta body

#color2 Rosa body
…

Una vez echo en todos, pulsamos en Vista Previa (No Guardar)

¿Qué conseguimos con esto a parte de tener un blog de colores? Que sabrás
como se llama cada parte a partir de los colores. Coge tu segundo folio y a
partir de las relaciones de los colores sabrás como se llama cada parte.

Ahora tendrás clarísima la estructura del blog, así que empezaremos a

modificarlo de verdad.

Lo primero necesitas conocer cuáles son los modificadores que puedes usar.

Abre en segundo plano la siguiente web:

http://www.w3schools.com/css/css_background.asp

Ahí encontrarás todas la opciones disponibles. Te garantizo que no te llevará

más de 10 minutos ver todo lo que se puede hacer.
 Diseño avanzado de un Blog para Dummies – Óliver Al-Nabhany

Del boceto a la realidad

Ya sabes lo básico de la estructura de nuestra web, ahora vamos a transformar

la idea en una realidad.

Primero vamos a definir el tamaño que va a tener todo, y a rellenar todos los
espacios. Más adelante nos centraremos en las tipografías.

Para que te hagas a una idea un blog de tamaño normal, tiene unos 750píxels
de ancho. Generalmente se distribuyen en 450 a 500 píxeles el Post y el resto
(250 a 300 píxeles) la Sidebar. La altura normal del Header son unos 200
píxeles, al igual que el Footer. Pues bien definimos el ancho de las partes:

#page {width:750px;}
#header {width: 750px; heigth:200px}
…

Lo siguiente será ir colocando las imágenes o colores para cada zona. Por lo
general recomiendo que aunque quieras dejar una zona de un color sólido,
además de colocar el color en cuestión, también colocar una imagen de 1px x
1px de ese color de fondo. Parece una tontería, pero a veces para IE6 es útil.
Ejemplo:

#page{width:750px; backgrund:red; backgrund-

image:url(‘http://…’);}
…

Y así en todas.

De momento te recomiendo que vayas subiendo las imágenes a un sitio tipo

Flickr o por el estilo, así sabrás su url sin complicaciones.

Para el caso del Header o del Footer, lo que hacemos es algo distinto. Como
hemos fijado ya el tamaño, recortamos en Photoshop una imagen de nuestro
boceto. Para ello:

• Selección rectangular.
• Arriba marcamos Estilo y lo colocamos en Tamaño fijo.
• Colocamos nuestros 750 x 200.
• Seleccionamos lo que queremos recortar.
• Imagen/recortar(crop)

Y con esto tendremos la imagen del tamaño que queramos.

Trasteando un poco, no nos costará mucho hacer el diseño que queríamos.

 Diseño avanzado de un Blog para Dummies – Óliver Al-Nabhany

Tipografías

Ya tenemos nuestro diseño casi finalizado. Ahora queda un punto importante,

los tipos de letra.

Si recuerdas cuando vimos el esqueleto de la página había unas cuantas cosas

a las que se hacían referencia muy a menudo. Eran a, p, li, h1, h2, h3…
Éstos no eran ni espacios, ni clases ni nada, eran características de letras.

Para modificarlas a tu gusto, mira los modificadores que hay en la página a la

que te mandé antes sobre CSS.

El código en CSS sería algo así:

h1 {modificadores}
li:hover {modificadores}
…

Como ves no se han colocado delante ni ‘#’ ni ‘.’. Las tipografías van solas.
Lo de ‘:hover’ detrás del nombre es para indicar que vamos a editar la letra
cuando ponemos el ratón encima.
 Diseño avanzado de un Blog para Dummies – Óliver Al-Nabhany

Depurando

Bueno pues a estas alturas tu blog se verá de maravilla desde Firefox.

El problema viene cuando lo abrimos desde IE6 o IE7… sí, es increíble pero
está horroroso. El tema es que no hay una forma clara de hacer que se vea bie
en IE, la mejor solución, instalar Vista CSS y trastear.

Vista CSS es un software gratuito que te permite ver de forma simultánea

cómo se ve tu blog desde Firefox y desde IE, y editar el CSS. Así con pequeñas
modificaciones, podremos hacer que se vean igual.

En la barra que aparece arriba, metes la dirección del blog, y el programa

localizará las CSS y te mostrará el contenido.

Arriba a la izquierda hay unas pestañas. Una de ellas contiene el código CSS,
edítalo ahí y se irá actualizando automáticamente.

Un fallo muy común es que IE7 coloque la Sidebar abajo en lugar de a uno de
los lados. Por lo general se soluciona reduciendo el ancho del post y
jugueteando con los modificadores ‘overflow’ (mirar en la web de CSS).
[www.intercambiosvirtuales.org] 2008

Este libro sea compartido en intercambiosvirtuales.org, si buscas

más descargas con material educativo lo pueden hacer
simplemente copiando el siguiente enlace y pegándolo en la
barra de direcciones de tu navegador favorito:
http://www.intercambiosvirtuales.org/search/label/Libros - Manuales

Dudas, aportes y/o comentarios solo contactar en la siguiente

dirección de correo electrónico:
jimmy_criptoy@intercambiosvirtuales.org

Saludos a toda la comunidad hispana.

[ ww w .i n te rcam bi o sv i rtu ale s .o rg ] jimmy_criptoy