Diseno.avanzado.de.Un.blog.Para.dummies

7/31/2019 Diseno.avanzado.de.Un.blog.Para.dummies

1/13

Diseo avanzado de un Blog para Dummies liver Al-NabhanyHerramientas 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 usaDreamweaber, 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.


2/13

Diseo avanzado de un Blog para Dummies liver Al-NabhanyInstalacin 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 caseun 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 algunacomplicacin que podemos evitar, pues repito no tenemos por qu saber nada.

Una vez hemos entrado en el Tablero (o Dashboard) vamos aPresentacin/Plantillas y seleccionamos la que nos convenga (Kubrick ennuestro caso). Podemos instalar unos widgets (lo que aparece a los lados:bsqueda, comentarios recientes), para ello vamos a Presentacin/Widgetsde la barra lateral.

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

queda e imaginamos como queremos que quede.


3/13

Diseo avanzado de un Blog para Dummies liver Al-NabhanyBoceto.

Esta parte es importantsima, puede agilizar o hacer terriblemente lento elproceso. La idea es hacer un dibujo de la esttica del blog del que luegosacars las imgenes para que sea justo como quieres.

Yo para esto personalmente uso Photoshop, bsicamente porque me heacostumbrado a l. Para mi dibujar en Photoshop es tan cmodo como hacerloen un folio. Si prefieres otro programa, no hay problema, la idea es la misma.

La idea es dibujar algo as (obviamente con tu diseo):


4/13

Diseo avanzado de un Blog para Dummies liver Al-NabhanyNo te compliques en exceso. Haz algo que te guste y que no sea muyfarragoso. Cambiarlo una vez terminado ser ms fcil que basarte en undiseo 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 800pxeles de ancho por 1500 de alto. Hazle todas las virgueras que quieras.Coloca una cabecera y un pie de pgina (si quieres). Recuerda usar estostamaos, pues recortars de esta imagen para crear tu diseo.

No quiero ser pesado, pero dedcale algn tiempo a este paso. En los blogs lasimplicidad 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 enlos 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:


5/13

Diseo avanzado de un Blog para Dummies liver Al-NabhanyCuando realices el dibujo, ve anotando en un papel los colores que usas enhexadecimal. Para ello selecciona el cuentagotas, y en la pantalla que aparece,abajo habr un nmero del tipo #XXXXXX. Apunta esos colores porque losnecesitars para los fondos, tipografas


6/13

Diseo avanzado de un Blog para Dummies liver Al-NabhanyEntendiendo la estructura.

Esta parte sin ayuda puede hacerse muy, muy pesada, ya que la docmentacinen 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 generarWordpress.

En principio no vamos a tocar el HTML, solo vamos a entender lo bsico parasaber cmo son las entraas de nuestro blog. Para ello vamos a ver de que secompone un blog:


7/13

Diseo avanzado de un Blog para Dummies liver Al-NabhanySi te metes en cualquier blog vers que tiene una estructura muy similar asta. En cualquier caso seguro que puedes descomponerlo de una formasimilar.

Hay que decir que esto no es as siempre. En segn que temas llaman a pagewrapper, a content container o a sidebar primary. No te preocupes voya explicarte como saber como se llama cada parte en tu tema.

Para empezar abre tu web desde Firefox. Una vez cargada ve a Ver/Cdigofuente de la pgina. Te aparecer el cdigo. En principio supongo que no loentiendes, as que vamos a ver que descubrimos.

Busca:

Una vez localizado vamos a fijarnos en lo que viene a continuacin. Gracias ala tabulacin podremos ver qu est dentro de que.

Vers que hay como un empiece que se repite algo as como


8/13

Diseo avanzado de un Blog para Dummies liver Al-NabhanyEntendiendo CSS

Las CSS bsicamente es lo que le dice al navegador las caractersticas fsicasde cada parte. Por ejemplo puede decirle que el header lleva una germinadaimagen de fondo, o que la Sidebar tiene un ancho determinado, o que elContent lleve un tipo de letra determinado.

Lo primero que vamos a hacer es ver la CSS de nuestra web. Para ello en elcdigo de la pgina que estbamos usando antes buscamos algo as:

rel="stylesheet" href=http://loquesea.com/wp-

content/themes/default/style.css

Ponemos la direccin en Firefox, y nos aparecer en cdigo CSS. Ya estamosotra vez sin entender nada. No hay problema. Hay cosas que llaman laatencin.

Por ejemplo, que esta todo de forma:

algo {un montn de cosas}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 directamenteentre . Ejemplo si quiero modificar lo que est dentro de pondrbody {un montn de cosas}. Tambin se modifican as los textos.

#algo: modifican cosas que estn dentro de . Ejemplopara modificar pondremos #header{un montn decosas}

.algo: modifican cosas que estn dentro de . Ejemplopara modificar 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.


9/13

Diseo avanzado de un Blog para Dummies liver Al-NabhanyBueno pues lo que vamos a hacer ahora es aprovechar lo poco que sabemos deCSS 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) yapuntas el color. Ejemplo: #FF000 Rojo. Para ello aydate de Photoshop, oalguna herramienta de dibujo. Si usas Mac lo puedes hacer con la herramientaAplicaciones/Utilidades/Gestor de color digital. Hay mil programas quehacen esto.

Una vez lo has hecho con los 40 (invntate nombres si quieres), vas a tuWordpress: Apariencia/Editar CSS. Y a cada algo le pones o le modificas elbackground y el color, colocndole dos colores de tu lista (si hay algnmodificador que contenga la palabra backgroundcrgatelo de momento). Esdecir:

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 sabrscomo se llama cada parte a partir de los colores. Coge tu segundo folio y apartir de las relaciones de los colores sabrs como se llama cada parte.

Ahora tendrs clarsima la estructura del blog, as que empezaremos amodificarlo 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 la opciones disponibles. Te garantizo que no te llevarms de 10 minutos ver todo lo que se puede hacer.


10/13

Diseo avanzado de un Blog para Dummies liver Al-NabhanyDel boceto a la realidad

Ya sabes lo bsico de la estructura de nuestra web, ahora vamos a transformarla idea en una realidad.

Primero vamos a definir el tamao que va a tener todo, y a rellenar todos losespacios. Ms adelante nos centraremos en las tipografas.

Para que te hagas a una idea un blog de tamao normal, tiene unos 750pxelsde 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 200pxeles, 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 logeneral recomiendo que aunque quieras dejar una zona de un color slido,adems de colocar el color en cuestin, tambin colocar una imagen de 1px x1px de ese color de fondo. Parece una tontera, 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 imgenes a un sitio tipoFlickr o por el estilo, as sabrs su url sin complicaciones.

Para el caso del Header o del Footer, lo que hacemos es algo distinto. Comohemos fijado ya el tamao, recortamos en Photoshop una imagen de nuestroboceto. 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.


11/13

Diseo avanzado de un Blog para Dummies liver Al-NabhanyTipografas

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 cosasa las que se hacan referencia muy a menudo. Eran a, p, li, h1, h2, h3stos 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 laque 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 letracuando ponemos el ratn encima.


12/13

Diseo avanzado de un Blog para Dummies liver Al-NabhanyDepurando

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 peroest horroroso. El tema es que no hay una forma clara de hacer que se vea bieen IE, la mejor solucin, instalar Vista CSS y trastear.

Vista CSS es un software gratuito que te permite ver de forma simultneacmo se ve tu blog desde Firefox y desde IE, y editar el CSS. As con pequeasmodificaciones, podremos hacer que se vean igual.

En la barra que aparece arriba, metes la direccin del blog, y el programalocalizar 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 delos lados. Por lo general se soluciona reduciendo el ancho del post yjugueteando con los modificadores overflow (mirar en la web de CSS).


13/13

[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

ms descargas con material educativo lo pueden hacer

simplemente copiando el siguiente enlace y pegndolo 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

direccin de correo electrnico:

[email protected]

Saludos a toda la comunidad hispana.
http://www.intercambiosvirtuales.org/search/label/Libros%20-%20Manualeshttp://www.intercambiosvirtuales.org/search/label/Libros%20-%20Manualesmailto:[email protected]:[email protected]:[email protected]://www.intercambiosvirtuales.org/search/label/Libros%20-%20Manuales

Date post:	05-Apr-2018
Category:	Documents
Upload:	rodolfo-molina
View:	215 times
Download:	0 times

Diseno.avanzado.de.Un.blog.Para.dummies

Documents