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

[ w w w . i n t e r c a m b i o s v i r t u a l e s . o r g ]

jimmy_criptoy

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.