Diseo avanzado de un Blog para Dummies

Por: Oliver Al-Nabhany

Herramientas necesarias (o aconsejadas) Photoshop (o Gimp, o PaintShop Pro, o Paint si eres muy hbil) 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: Instalacin de Tema. Boceto. Entendiendo la estructura. Entendiendo el CSS. De boceto a realidad. Tipografas. 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 podra complicarse mucho desde Dreamweaber.

Una vez creada t pagina, visita www.dineroen123.com

All encontraras excelentes mtodos para:

Recibir visitas GRATIS Monetizar tu web Optimizar tu pgina Herramientas Gratuitas Como dar de alta tu page en los buscadores Y mucho, mucho ms.

xito.

Diseo avanzado de un Blog para Dummies liver Al-Nabhany

Diseo avanzado de un Blog para Dummies liver Al-Nabhany

Instalacin de Tema.
Como queremos un buen acabado y en principio no somos ni programadores, ni diseadores, 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 estndar. Puedes basarte en Sandbox, ms apto para diseadores, pero implica alguna complicacin que podemos evitar, pues repito no tenemos por qu saber nada. Una vez hemos entrado en el Tablero (o Dashboard) vamos a Presentacin/Plantillas y seleccionamos la que nos convenga (Kubrick en nuestro caso). Podemos instalar unos widgets (lo que aparece a los lados: bsqueda, comentarios recientes), para ello vamos a Presentacin/Widgets de la barra lateral. Ya tenemos la base terminada. Ahora echamos un vistazo para ver cmo queda e imaginamos como queremos que quede.

Boceto.
Esta parte es importantsima, puede agilizar o hacer terriblemente lento el proceso. La idea es hacer un dibujo de la esttica del blog del que luego sacars las imgenes para que sea justo como quieres. Yo para esto personalmente uso Photoshop, bsicamente porque me he acostumbrado a l. Para mi dibujar en Photoshop es tan cmodo 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 diseo):

Diseo 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 ms fcil que basarte en un diseo muy enrevesado. Como hacer este boceto: Crate una imagen de unos 1000px de ancho por unos 2000px de alto. (Archivo/nuevo) Crate en su interior un rectngulo ms o menos centrado de unos 750 a 800 pxeles de ancho por 1500 de alto. Hazle todas las virgueras que quieras. Coloca una cabecera y un pie de pgina (si quieres). Recuerda usar estos tamaos, pues recortars de esta imagen para crear tu diseo. No quiero ser pesado, pero dedcale algn tiempo a este paso. En los blogs la simplicidad juega dos papeles: la facilidad de lectura y la facilidad de edicin. 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 muchsimo (razn por la que casi nadie lo hace). Yo en mi caso us esta imagen:

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 nmero del tipo #XXXXXX. Apunta esos colores porque los necesitars para los fondos, tipografas

Diseo avanzado de un Blog para Dummies liver Al-Nabhany

Entendiendo la estructura.
Esta parte sin ayuda puede hacerse muy, muy pesada, ya que la docmentacin en Internet es demasiado tcnica y en la mayora de los casos est en Ingls. A partir de ahora vamos a considerar que el blog tiene tres partes: Esqueleto (el cdigo 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 bsico para saber cmo son las entraas de nuestro blog. Para ello vamos a ver de que se compone un blog:

Si te metes en cualquier blog vers 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 segn que temas llaman a page wrapper, a content container o a sidebar primary. No te preocupes voy

Diseo avanzado de un Blog para Dummies liver Al-Nabhany

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/Cdigo fuente de la pgina. Te aparecer el cdigo. 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 continuacin. Gracias a la tabulacin podremos ver qu est dentro de que. Vers que hay como un empiece que se repite algo as como <div con algo que sigue. Si te fijas suelen acompaarle o id=algo o class=algo, bueno pues esas son las partes de nuestro blog. Vamos a ver aproximadamente como sera 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 fcil relacionar esta estructura con la imagen de antes. Es muy probable que tardes un rato en entenderla y organizarla, pero vers que es fcil. Adems puede que se te escape alguna parte o aadas algunas que no es. No te preocupes ms adelante lo depuraremos. De momento interesa que tengas una idea general. Yo me he dejado partes porque de momento no me aportan una visin clara. Una vez realizado este paso vamos a empezar a ver cmo funciona todo a travs del CSS.

Entendiendo CSS
Las CSS bsicamente es lo que le dice al navegador las caractersticas fsicas 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 cdigo de la pgina que estbamos usando antes buscamos algo as: rel="stylesheet" href=http://loquesea.com/wpcontent/themes/default/style.css Ponemos la direccin en Firefox, y nos aparecer en cdigo CSS. Ya estamos otra vez sin entender nada. No hay problema. Hay cosas que llaman la atencin. Por ejemplo, que esta todo de forma: algo {un montn de cosas}

Diseo avanzado de un Blog para Dummies liver Al-Nabhany

algo {otro montn de cosas} o #algo {un montn de cosas} o .algo {un montn de cosas} Bueno pues esos algos son las partes del blog, desde zonas a tipos de letra, y los montones de cosas son las caractersticas de esas cosas. Adems 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 montn de cosas}. Tambin se modifican as los textos. #algo: modifican cosas que estn dentro de <div id=algo>. Ejemplo para modificar <div id=header> pondremos #header{un montn de cosas} .algo: modifican cosas que estn dentro de <div class=algo>. Ejemplo para modificar <div class=post> pondremos #post{un montn 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. Bueno pues lo que vamos a hacer ahora es aprovechar lo poco que sabemos de CSS para saber cmo 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 aydate 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 (invntate nombres si quieres), vas a tu Wordpress: Apariencia/Editar CSS. Y a cada algo le pones o le modificas el background y el color, colocndole dos colores de tu lista (si hay algn modificador que contenga la palabra background crgatelo de momento). Es decir: bodybackground:#color1; color:#color2; #headerbackground:#color2; color:#color3; En nuestro folio apuntamos donde hemos puesto cada color:

Diseo avanzado de un Blog para Dummies liver Al-Nabhany

#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 sabrs como se llama cada parte a partir de los colores. Coge tu segundo folio y a partir de las relaciones de los colores sabrs como se llama cada parte. Ahora tendrs clarsima la estructura del blog, as que empezaremos a modificarlo de verdad. Lo primero necesitas conocer cules son los modificadores que puedes usar. Abre en segundo plano la siguiente web:

http://www.w3schools.com/css/css_background.asp
Ah encontrars todas las opciones disponibles. Te garantizo que no te llevar ms de 10 minutos ver todo lo que se puede hacer.

Del boceto a la realidad

Ya sabes lo bsico de la estructura de nuestra web, ahora vamos a transformar la idea en una realidad. Primero vamos a definir el tamao que va a tener todo, y a rellenar todos los espacios. Ms adelante nos centraremos en las tipografas. Para que te hagas a una idea un blog de tamao normal, tiene unos 750pxels de ancho. Generalmente se distribuyen en 450 a 500 pxeles el Post y el resto (250 a 300 pxeles) la Sidebar. La altura normal del Header son unos 200 pxeles, 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 imgenes o colores para cada zona. Por lo general recomiendo que aunque quieras dejar una zona de un color slido, adems de colocar el color en cuestin, tambin colocar una imagen de 1px x 1px de ese color de fondo. Parece una tontera, pero a veces para IE6 es til. Ejemplo: #pagewidth:750px; backgrund:red; backgrundimage: url(http://); Y as en todas. De momento te recomiendo que vayas subiendo las imgenes a un sitio tipo Flickr o por el estilo, as sabrs su url sin complicaciones. Para el caso del Header o del Footer, lo que hacemos es algo distinto. Como hemos fijado ya el tamao, recortamos en Photoshop una imagen de nuestro boceto.

Diseo avanzado de un Blog para Dummies liver Al-Nabhany

Para ello: Seleccin rectangular. Arriba marcamos Estilo y lo colocamos en Tamao fijo. Colocamos nuestros 750 x 200. Seleccionamos lo que queremos recortar. Imagen/recortar(crop) Y con esto tendremos la imagen del tamao que queramos. Trasteando un poco, no nos costar mucho hacer el diseo que queramos.

Tipografas
Ya tenemos nuestro diseo casi finalizado. Ahora queda un punto importante, los tipos de letra. Si recuerdas cuando vimos el esqueleto de la pgina haba unas cuantas cosas a las que se hacan referencia muy a menudo. Eran a, p, li, h1, h2, h3 stos no eran ni espacios, ni clases ni nada, eran caractersticas de letras. Para modificarlas a tu gusto, mira los modificadores que hay en la pgina a la que te mand antes sobre CSS. El cdigo en CSS sera algo as: h1 modificadores li:hover modificadores Como ves no se han colocado delante ni # ni .. Las tipografas van solas. Lo de :hover detrs del nombre es para indicar que vamos a editar la letra cuando ponemos el ratn encima.

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 increble pero est horroroso. El tema es que no hay una forma clara de hacer que se vea bie en IE, la mejor solucin, instalar Vista CSS y trastear. Vista CSS es un software gratuito que te permite ver de forma simultnea cmo se ve tu blog desde Firefox y desde IE, y editar el CSS. As con pequeas modificaciones, podremos hacer que se vean igual. En la barra que aparece arriba, metes la direccin del blog, y el programa localizar las CSS y te mostrar el contenido. Arriba a la izquierda hay unas pestaas. Una de ellas contiene el cdigo CSS, edtalo ah y se ir actualizando automticamente. Un fallo muy comn 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).

Una vez creada t pagina, visita www.dineroen123.com All encontraras excelentes mtodos para: Recibir visitas Monetizar tu web Optimizar tu pgina Herramientas Gratuitas Como dar de alta tu page en los buscadores Y mucho, mucho ms. Descarga Gratis para ti
Optimiza tu Web Nueva Tecnologa Pop-in incrementa el ratio de suscripcin en 400% en slo 24 horas...