Cambiar la imagen de la cabecera de tu blog.
En este truco-blog vamos a modificar la imagen de cabecera de nuestro blog. No es muy sencillo pero los resultados son muy atractivos.
Antes de nada vamos a hablar de dos componentes muy importantes: la hoja de estilo y la plantilla XHTML.
La hoja de estilo es un pequeño fichero con extensión css que contiene toda la información referente al formato de cada hoja html. Si en alguna ocasión has desarrollado una página web, seguro que has manejado etiquetas para dar formato a los textos, poner de un color determinado el fondo, etc… Cada uno de los blogs de ya.com tiene una determinada hoja de estilo asociada. Entonces, para modificar el tipo de letra, tamaño, color de fondo, imagen de cabecera y todo lo que se te ocurra, es necesario retocar esta hoja de estilo. La principal ventaja que tienen estas hojas de estilo, es que una vez que defines las propiedades de cada etiqueta, ya no necesitas modificar las etiquetas en el código. Es una importantísima herramienta que todo webmaster debe dominar. En este link tienes una breve introducción a las hojas de estilo.
Y por otro lado tenemos la plantilla xhtml que es, por decirlo de alguna manera, el esqueleto del blog. En la sección de trucos tienes una pequeña descripción de las etiquetas xhtml que se utilizan. Te recomiendo que leas la documentación correspondiente porque es importante y en este pequeño manual las utilizaremos. También te recomiendo que mires un post de cómo manipular la plantilla.
Bueno amigos brico-blogers, comenzamos…
Primero, en una ventana del navegador de Internet (supongo que será el Internet Explorer de Microsoft) ponemos nuestro panel de control del blog, en concreto vamos a la configuración avanzada y editamos la platilla XHTML.
"Configuración Avanzada"
En otra ventana del navegador abrimos nuestro blog. Ahora guardamos todo nuestro blog en el disco duro. Para hacer esto: vamos a Archivo -> Guardar Como. En nuestro disco duro aparecerán un documento htm precedido del nombre de nuestro blog y una carpeta con el nombre del blog. Dentro de esta carpeta está el valioso fichero que contiene nuestra hoja de estilo. En concreto el fichero es blog.css. Abrimos el fichero y lo editamos. Se puede hacer con el bloc de notas o mejor con alguna herramienta más profesional como Dreamweaver o el Front Page de Microsoft. Por si no te queda claro, te adjunto un link en el cual se explica este proceso de extraer la hoja de estilo de manera muy detenida y fácil. Pincha aquí.
De nuevo en la portada de nuestro blog, nos descargamos la imagen de la cabecera. ¿Cómo? Clic con el botón derecho sobre la imagen de cabecera y Guardar fondo como. Ahora vamos a la fase de diseño. En este punto es cuando nos tenemos que plantear el diseño de la imagen de portada. El diseño lo dejo en tus manos y el software que utilices para hacerlo también. Lo único que has de tener en cuenta es el tamaño de la imagen sea de 775x90px y que se llame igual que la imagen que te acabas de bajar.
Volvemos a la hoja de estilo e intentamos localizar la etiqueta siguiente:
Sustituimos este código por algo similar a esto:
Hasta aquí el trabajo con la hoja de estilo. Vas a archivo y guardas.
Ahora nos vamos a la platilla XHTML y realizamos los siguientes cambios.
Buscamos esto:
Y sustituimos por esto otro:
Dentro de body buscamos esto:
Y sustituimos por esto otro:
La etiqueta blog:titulo/ contiene el título de tu blog que ves en la cabecera. Si añades en la imagen de cabecera el título de tu blog (suele ser lo normal) esta etiqueta no sobra. Por lo tanto la quitamos. Y lo mismo ocurre con la etiqueta de la descripción del blog blog:descripción/.
Validamos el código y guardamos.
Ahora ya solo queda subir los nuevos ficheros. Vamos a Publicación (dentro de blogs) y Administrador de ficheros.
"Publicación"
Subimos la hoja de estilo que anteriormente hemos modificado, te recuerdo que se llama blog.css, y subimos la imagen de cabecera que hemos creado. Del mismo modo que cuando subes una imagen.
Si hemos hecho todo correctamente, en cuanto entres a tu blog y actualices, verás la imagen en la cabecera del blog.
Antes de nada vamos a hablar de dos componentes muy importantes: la hoja de estilo y la plantilla XHTML.
La hoja de estilo es un pequeño fichero con extensión css que contiene toda la información referente al formato de cada hoja html. Si en alguna ocasión has desarrollado una página web, seguro que has manejado etiquetas para dar formato a los textos, poner de un color determinado el fondo, etc… Cada uno de los blogs de ya.com tiene una determinada hoja de estilo asociada. Entonces, para modificar el tipo de letra, tamaño, color de fondo, imagen de cabecera y todo lo que se te ocurra, es necesario retocar esta hoja de estilo. La principal ventaja que tienen estas hojas de estilo, es que una vez que defines las propiedades de cada etiqueta, ya no necesitas modificar las etiquetas en el código. Es una importantísima herramienta que todo webmaster debe dominar. En este link tienes una breve introducción a las hojas de estilo.
Y por otro lado tenemos la plantilla xhtml que es, por decirlo de alguna manera, el esqueleto del blog. En la sección de trucos tienes una pequeña descripción de las etiquetas xhtml que se utilizan. Te recomiendo que leas la documentación correspondiente porque es importante y en este pequeño manual las utilizaremos. También te recomiendo que mires un post de cómo manipular la plantilla.
Bueno amigos brico-blogers, comenzamos…
Primero, en una ventana del navegador de Internet (supongo que será el Internet Explorer de Microsoft) ponemos nuestro panel de control del blog, en concreto vamos a la configuración avanzada y editamos la platilla XHTML.
"Configuración Avanzada"
En otra ventana del navegador abrimos nuestro blog. Ahora guardamos todo nuestro blog en el disco duro. Para hacer esto: vamos a Archivo -> Guardar Como. En nuestro disco duro aparecerán un documento htm precedido del nombre de nuestro blog y una carpeta con el nombre del blog. Dentro de esta carpeta está el valioso fichero que contiene nuestra hoja de estilo. En concreto el fichero es blog.css. Abrimos el fichero y lo editamos. Se puede hacer con el bloc de notas o mejor con alguna herramienta más profesional como Dreamweaver o el Front Page de Microsoft. Por si no te queda claro, te adjunto un link en el cual se explica este proceso de extraer la hoja de estilo de manera muy detenida y fácil. Pincha aquí.
De nuevo en la portada de nuestro blog, nos descargamos la imagen de la cabecera. ¿Cómo? Clic con el botón derecho sobre la imagen de cabecera y Guardar fondo como. Ahora vamos a la fase de diseño. En este punto es cuando nos tenemos que plantear el diseño de la imagen de portada. El diseño lo dejo en tus manos y el software que utilices para hacerlo también. Lo único que has de tener en cuenta es el tamaño de la imagen sea de 775x90px y que se llame igual que la imagen que te acabas de bajar.
Volvemos a la hoja de estilo e intentamos localizar la etiqueta siguiente:
Sustituimos este código por algo similar a esto:
Hasta aquí el trabajo con la hoja de estilo. Vas a archivo y guardas.
Ahora nos vamos a la platilla XHTML y realizamos los siguientes cambios.
Buscamos esto:
Y sustituimos por esto otro:
Dentro de body buscamos esto:
Y sustituimos por esto otro:
La etiqueta blog:titulo/ contiene el título de tu blog que ves en la cabecera. Si añades en la imagen de cabecera el título de tu blog (suele ser lo normal) esta etiqueta no sobra. Por lo tanto la quitamos. Y lo mismo ocurre con la etiqueta de la descripción del blog blog:descripción/.
Validamos el código y guardamos.
Ahora ya solo queda subir los nuevos ficheros. Vamos a Publicación (dentro de blogs) y Administrador de ficheros.
"Publicación"
Subimos la hoja de estilo que anteriormente hemos modificado, te recuerdo que se llama blog.css, y subimos la imagen de cabecera que hemos creado. Del mismo modo que cuando subes una imagen.
Si hemos hecho todo correctamente, en cuanto entres a tu blog y actualices, verás la imagen en la cabecera del blog.
¿Qué es un blog?
A estas alturas todos, o casi todos, deberíamos de saber lo que es un blog. Pero si aún no nos queda claro o simplemente somos nuevos en el fascinante mundo de los blogs, nuestro amigo Manuti, ha recopilado definiciones e información sobre la breve pero intensa historia de los blogs.
Si estás interesado en conocer el pasado, presente y futuro de los blogs… pincha aquí.
Un saludo.
Si estás interesado en conocer el pasado, presente y futuro de los blogs… pincha aquí.
Un saludo.
Preparar imágenes con Photoshop para usarlas en tu blog
Estoy seguro de que en más de una ocasión has necesitado incluir una imagen en tu blog pero esta era demasiado grande y no encajaba bien en el diseño; o bien, necesitas una imagen de un tamaño determinado que no encuentras por ninguna parte. Pues hoy te vamos a enseñar a preparar una imagen para que la uses en tu blog. ¿Cómo? Muy fácil, usaremos un programa de retoque fotográfico llamado Photoshop*.
*Versión 6.0
El primer paso es escoger la imagen que deseamos utilizar.
Esta va a ser nuestra imagen "base"
Por necesidades de la web, necesitamos una imagen grande de unos 320x150px y cuatro imágenes pequeñas de 50x50px.
Suponiendo que tenemos instalado en nuestro ordenador el Photoshop, vamos y lo abrimos. Si es la primera vez que utilizas el Photoshop puede que te asustes, pero hoy solo vamos a utilizar un par de herramientas.
Como todos programas de Windows en la parte superior tienes una barra de menú. Hoy solo vamos a utilizar Archivo (1), Imagen (2), de la barra de menús, y unas pocas herramientas de la barra de herramientas (3). "Ver ejemplo"
Pues manos a la obra. Vamos a Archivo > Abrir. Buscamos la imagen que queremos utilizar y aceptamos.
En el espacio de trabajo puedes ver la imagen que vas a utilizar. Ahora vamos a ver el tamaño de la imagen. Vete a Imagen (en la barra de menú) y selecciona tamaño de Imagen. Aparece una ventana como esta (4).
Con las propiedades Anchura y Altura podemos hacer una primera aproximación del tamaño de la imagen. Si uniendo las propiedades (anchura-altura) hay una especie de cadena, eso quiere decir que va a mantener una relación optima de calidad y no permitirá desproporcionar la imagen. Fijamos la Anchura de la imagen a 400px (tamaño bastante bueno para trabajar) y automáticamente la altura de pondrá a 271px. Aceptamos y seguimos con más cositas. Siempre cuando te equivoques y quieras rectificar puedes ir a Edición > Deshacer.
Ahora usamos la herramienta Sector de la barra de herramientas (5). Date cuenta que tienes dos modos: Herramienta Sector y Herramienta seleccionar sector (presiona con el ratón un instante sobre el icono de la herramienta para cambiar).
Ya estamos preparados para realizar nuestro primer sector. Con el sector seleccionado dibuja un rectángulo sobre el dibujo (6).
Ahora haz clic con el botón derecho de tu ratón y selecciona Modificar opciones del sector. Aparece la siguiente ventana (7).
Abajo pone Dimensiones del sector y dos opciones An, Al. En ancho (An) ponemos el tamaño deseado, en nuestro ejemplo, la imagen grande del vehículo ha de ser de 320px y el alto (Al) 150px. Aceptamos y vemos como ha cambiado el tamaño de nuestro sector.
Ahora cambiamos a Seleccionar Sector y podemos mover el sector a lo largo y ancho de nuestra imagen. Hazte a la idea de que el sector es una ventana y lo vas a colocar enmarcando lo que tú quieras que el usuario vea de la imagen (8).
Ahora volvemos a la barra de herramientas y escogemos el Marco rectangular de selección (9).
Usamos como regla el borde del sector y seleccionamos el trozo de la imagen. De este modo nos aseguramos que la selección es del tamaño deseado. Ahora copiamos el trozo seleccionado (Edición > Copiar) y vamos a Archivo > Nuevo. Si te das cuenta el tamaño del lienzo nuevo es el tamaño del trozo que acabamos de recortar. Acepta y pega la imagen (Edición > Pegar).
"Ejemplo"
Ya tenemos la primera imagen ajustada a las dimensiones apropiadas. Ahora volvemos a trabajar sobre el primer lienzo, escogemos nuevamente la Herramienta Sector y hacemos un nuevo rectángulo sobre el dibujo. Nuevamente botón derecho y fijamos las Dimensiones de An y Al. En esta ocasión a 50px y 50px. Cambiamos a Seleccionar Sector y repetimos lo de antes. Pinchamos sobre el Marco rectangular y seleccionamos, usando como regla el borde del Sector, un trozo de la imagen. Vamos a Archivo Nuevo y pegamos. Repite esto tantas veces como imágenes necesites.
Ahora hay que guardar las imágenes. Vamos una por una seleccionándolas (simplemente pincha sobre ella) y a pinchamos sobre Archivo > Guardar para la web. Aparece la pantalla (10) elige la pestaña de 4 copias y selecciona la que mejor se adapte.
La primera (arriba - izquierda) es la original. Esta no la elijas. Quédate con cualquiera de las tres restantes que están optimizadas. Presiona Ok, selecciona dónde guardarla y le pones un nombre. Repite esto con el resto de imágenes.
El resultado será algo como esto:
Dudas y sugerencias trucosblogs@mixmail.com
*Versión 6.0
El primer paso es escoger la imagen que deseamos utilizar.
Esta va a ser nuestra imagen "base"
Por necesidades de la web, necesitamos una imagen grande de unos 320x150px y cuatro imágenes pequeñas de 50x50px.
Suponiendo que tenemos instalado en nuestro ordenador el Photoshop, vamos y lo abrimos. Si es la primera vez que utilizas el Photoshop puede que te asustes, pero hoy solo vamos a utilizar un par de herramientas.
Como todos programas de Windows en la parte superior tienes una barra de menú. Hoy solo vamos a utilizar Archivo (1), Imagen (2), de la barra de menús, y unas pocas herramientas de la barra de herramientas (3). "Ver ejemplo"
Pues manos a la obra. Vamos a Archivo > Abrir. Buscamos la imagen que queremos utilizar y aceptamos.
En el espacio de trabajo puedes ver la imagen que vas a utilizar. Ahora vamos a ver el tamaño de la imagen. Vete a Imagen (en la barra de menú) y selecciona tamaño de Imagen. Aparece una ventana como esta (4).
Con las propiedades Anchura y Altura podemos hacer una primera aproximación del tamaño de la imagen. Si uniendo las propiedades (anchura-altura) hay una especie de cadena, eso quiere decir que va a mantener una relación optima de calidad y no permitirá desproporcionar la imagen. Fijamos la Anchura de la imagen a 400px (tamaño bastante bueno para trabajar) y automáticamente la altura de pondrá a 271px. Aceptamos y seguimos con más cositas. Siempre cuando te equivoques y quieras rectificar puedes ir a Edición > Deshacer.
Ahora usamos la herramienta Sector de la barra de herramientas (5). Date cuenta que tienes dos modos: Herramienta Sector y Herramienta seleccionar sector (presiona con el ratón un instante sobre el icono de la herramienta para cambiar).
Ya estamos preparados para realizar nuestro primer sector. Con el sector seleccionado dibuja un rectángulo sobre el dibujo (6).
Ahora haz clic con el botón derecho de tu ratón y selecciona Modificar opciones del sector. Aparece la siguiente ventana (7).
Abajo pone Dimensiones del sector y dos opciones An, Al. En ancho (An) ponemos el tamaño deseado, en nuestro ejemplo, la imagen grande del vehículo ha de ser de 320px y el alto (Al) 150px. Aceptamos y vemos como ha cambiado el tamaño de nuestro sector.
Ahora cambiamos a Seleccionar Sector y podemos mover el sector a lo largo y ancho de nuestra imagen. Hazte a la idea de que el sector es una ventana y lo vas a colocar enmarcando lo que tú quieras que el usuario vea de la imagen (8).
Ahora volvemos a la barra de herramientas y escogemos el Marco rectangular de selección (9).
Usamos como regla el borde del sector y seleccionamos el trozo de la imagen. De este modo nos aseguramos que la selección es del tamaño deseado. Ahora copiamos el trozo seleccionado (Edición > Copiar) y vamos a Archivo > Nuevo. Si te das cuenta el tamaño del lienzo nuevo es el tamaño del trozo que acabamos de recortar. Acepta y pega la imagen (Edición > Pegar).
"Ejemplo"
Ya tenemos la primera imagen ajustada a las dimensiones apropiadas. Ahora volvemos a trabajar sobre el primer lienzo, escogemos nuevamente la Herramienta Sector y hacemos un nuevo rectángulo sobre el dibujo. Nuevamente botón derecho y fijamos las Dimensiones de An y Al. En esta ocasión a 50px y 50px. Cambiamos a Seleccionar Sector y repetimos lo de antes. Pinchamos sobre el Marco rectangular y seleccionamos, usando como regla el borde del Sector, un trozo de la imagen. Vamos a Archivo Nuevo y pegamos. Repite esto tantas veces como imágenes necesites.
Ahora hay que guardar las imágenes. Vamos una por una seleccionándolas (simplemente pincha sobre ella) y a pinchamos sobre Archivo > Guardar para la web. Aparece la pantalla (10) elige la pestaña de 4 copias y selecciona la que mejor se adapte.
La primera (arriba - izquierda) es la original. Esta no la elijas. Quédate con cualquiera de las tres restantes que están optimizadas. Presiona Ok, selecciona dónde guardarla y le pones un nombre. Repite esto con el resto de imágenes.
El resultado será algo como esto:
Dudas y sugerencias trucosblogs@mixmail.com