…..
…..
…..
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 algunas 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 cómo funciona todo a través del CSS. 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/wpcontent/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}
Diseño avanzado de un Blog para Dummies – Óliver Al-Nabhany
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 pondré body {un montón de cosas}. También se modifican así los textos. #algo: modifican cosas que están dentro de
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 algunas 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 cómo funciona todo a través del CSS. 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/wpcontent/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}
Diseño avanzado de un Blog para Dummies – Óliver Al-Nabhany
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 pondré body {un montón de cosas}. También se modifican así los textos. #algo: modifican cosas que están dentro de
. Ejemplo para modificar
pondremos #header{un montón de cosas} .algo: modifican cosas que están dentro de
. Ejemplo para modificar
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. Bueno pues lo que vamos a hacer ahora es aprovechar lo poco que sabemos de CSS para saber cómo 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: bodybackground:#color1; color:#color2; #header background:#color2; color:#color3; …
En nuestro folio apuntamos donde hemos puesto cada color:
Diseño 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 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 las opciones disponibles. Te garantizo que no te llevará más de 10 minutos ver todo lo que se puede hacer. 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: #pagewidth:750px; backgrund:red; backgrundimage: 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.
Diseño avanzado de un Blog para Dummies – Óliver Al-Nabhany
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. 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. 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).
Una vez creada tú pagina, visita www.dineroen123.com Allí encontraras excelentes métodos para: Recibir visitas Monetizar tu web Optimizar tu página Herramientas Gratuitas Como dar de alta tu page en los buscadores Y mucho, mucho más.
Descarga Gratis para ti Optimiza tu Web Nueva Tecnología Pop-in incrementa el ratio de suscripción en 400% en sólo 24 horas...
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 cómo 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: bodybackground:#color1; color:#color2; #header background:#color2; color:#color3; …
En nuestro folio apuntamos donde hemos puesto cada color:
Diseño 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 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 las opciones disponibles. Te garantizo que no te llevará más de 10 minutos ver todo lo que se puede hacer. 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: #pagewidth:750px; backgrund:red; backgrundimage: 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.
Diseño avanzado de un Blog para Dummies – Óliver Al-Nabhany
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. 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. 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).
Una vez creada tú pagina, visita www.dineroen123.com Allí encontraras excelentes métodos para: Recibir visitas Monetizar tu web Optimizar tu página Herramientas Gratuitas Como dar de alta tu page en los buscadores Y mucho, mucho más.
Descarga Gratis para ti Optimiza tu Web Nueva Tecnología Pop-in incrementa el ratio de suscripción en 400% en sólo 24 horas...