Como cambiar la imagen de cabecera
Como puedes ver este blog tiene una imagen en su cabecera distinta a los demás blogs, y en este post te vamos a enseñar como hacerlo. Si sigues los pasos poco a poco no deberías tener problemas para cambiar tu imagen de cabecera.
Antes de nada vamos a hablar de dos componentes muy importantes que vamos a tener que retocar: la hoja de estilo y la plantilla XHTML.
En el post “Como extraer y editar la hoja de estilos CSS” ya os explicamos como extraerla y retocarla, os vendía bien echarle un vistazo para poder realizar este truco.
Y por otro lado tenemos la plantilla xhtml que es, por decirlo de alguna manera, el esqueleto del blog. En “ayuda” 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, 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, echa un vistazo a “Como extraer y editar la hoja de estilos CSS”
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:
< header {
BACKGROUND: url (http://admin.blogs.ya.com/img/imgtemplates/blog23_img1.gif) #a00022 no-repeat; height: 97px
} >
Sustituimos este código por algo similar a esto:
< header {
BACKGROUND: url (http://admin.blogs.ya.com/tublog/files/tucabecera.jpg) #a00022 no-repeat; height: 97px
} >
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 nos 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 que vamos a tener que retocar: la hoja de estilo y la plantilla XHTML.
En el post “Como extraer y editar la hoja de estilos CSS” ya os explicamos como extraerla y retocarla, os vendía bien echarle un vistazo para poder realizar este truco.
Y por otro lado tenemos la plantilla xhtml que es, por decirlo de alguna manera, el esqueleto del blog. En “ayuda” 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, 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, echa un vistazo a “Como extraer y editar la hoja de estilos CSS”
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:
< header {
BACKGROUND: url (http://admin.blogs.ya.com/img/imgtemplates/blog23_img1.gif) #a00022 no-repeat; height: 97px
} >
Sustituimos este código por algo similar a esto:
< header {
BACKGROUND: url (http://admin.blogs.ya.com/tublog/files/tucabecera.jpg) #a00022 no-repeat; height: 97px
} >
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 nos 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.
Como extraer y editar la hoja de estilos CSS
Como puedes ver, el estilo de este blog -colores y tipos de letra-- no es ninguno de los de las plantillas de blogs.ya.com, aunque está basado en uno de ellos y tiene los mismos elementos. ¿Cómo se pueden editar fácilmente los estilos del blog? Sólo tienes que editar los estilos CSS.
Cada página de blogs.ya.com tiene asociado un archivo de estilos CSS que es donde se encuentran los atributos sobre colores, tipos de letra, etc. separando el diseño de lo que es el contenido. 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.
Pero no se puede editar directamente ese archivo desde el editor de blogs.ya.com -- sólo se puede editar la plantilla HTML.
1. Lo primero que tienes que hacer es extraer la hoja de estilos CSS.
Si usas internet explorer es muy fácil, solo tienes que ir a tu blog http://blogs.ya.com/tublog haces click en "guardar como" y en tu disco duro se grabará una carpeta «Blogs Ya_com tublog_archivos», en la que hay un archivo que se llama blog.css, esa es tu hoja de estilos, cambiale el nombre (por ejemplo, estilos.css) y preparate para editarla
2. Edita tu hoja de estilos localmente con un editor de textos o un editor HTML tipo Dreamweaver para cambiar colores y tamaños, y vuélvela a guardar. Consejo: modifica lo mínimo posible y prueba un cambio cada vez. ¡Es fácil estropearlo todo o que las cosas dejen de verse correctamente! Recuerda que algunos estilos tienen variantes, por ejemplo a puede tener variantes cuando se pone el cursor sobre el enlace (a.hover), cuando se visita (a.visited) etc.
3. Sube la nueva hoja de estilos a tu blog con la opción 3. Publicación / Administrador de Ficheros. Indica en "Examinar..." el fichero que has guardado en tu ordenador y pulsa Subir. La nueva URL de ese fichero será la de tu blog seguida de /files/estilos.css
4. Abre el editor HTML de la plantilla de tu blog en 2. Configuración Avanzada / Editar HTML Plantilla
5. Al principio verás la referencia a la hoja de estilos original... Cámbiala por la nueva, en este ejemplo:
6. Pulsa Validar y luego Guardar.
7. ¡Listo!
Al visualizar el blog aparecerá ya con los nuevos estilos (pulsa Recargar si no se ven a la primera). Si necesitas hacer modificaciones, vuelve a subir el fichero tantas veces como necesites. Si "rompes algo" no te preocupes: en el editor HTML pulsa "Reestablecer el formato original" y volverás a la plantilla por defecto para empezar de nuevo
De todas formas si no os atreveis con esto, pero aún así quereis poner a vuestro blog guapo, Azulica os ofrece un montón de plantillas y de muy fácil instalación, echadlas un vistazo en http://blogs.ya.com/design.
Si quieres ver como quedan las plantillas de Azulica elige alguna del menú desplegable:
Y a blogear!!!
Cada página de blogs.ya.com tiene asociado un archivo de estilos CSS que es donde se encuentran los atributos sobre colores, tipos de letra, etc. separando el diseño de lo que es el contenido. 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.
Pero no se puede editar directamente ese archivo desde el editor de blogs.ya.com -- sólo se puede editar la plantilla HTML.
1. Lo primero que tienes que hacer es extraer la hoja de estilos CSS.
Si usas internet explorer es muy fácil, solo tienes que ir a tu blog http://blogs.ya.com/tublog haces click en "guardar como" y en tu disco duro se grabará una carpeta «Blogs Ya_com tublog_archivos», en la que hay un archivo que se llama blog.css, esa es tu hoja de estilos, cambiale el nombre (por ejemplo, estilos.css) y preparate para editarla
2. Edita tu hoja de estilos localmente con un editor de textos o un editor HTML tipo Dreamweaver para cambiar colores y tamaños, y vuélvela a guardar. Consejo: modifica lo mínimo posible y prueba un cambio cada vez. ¡Es fácil estropearlo todo o que las cosas dejen de verse correctamente! Recuerda que algunos estilos tienen variantes, por ejemplo a puede tener variantes cuando se pone el cursor sobre el enlace (a.hover), cuando se visita (a.visited) etc.
3. Sube la nueva hoja de estilos a tu blog con la opción 3. Publicación / Administrador de Ficheros. Indica en "Examinar..." el fichero que has guardado en tu ordenador y pulsa Subir. La nueva URL de ese fichero será la de tu blog seguida de /files/estilos.css
4. Abre el editor HTML de la plantilla de tu blog en 2. Configuración Avanzada / Editar HTML Plantilla
5. Al principio verás la referencia a la hoja de estilos original... Cámbiala por la nueva, en este ejemplo:
6. Pulsa Validar y luego Guardar.
7. ¡Listo!
Al visualizar el blog aparecerá ya con los nuevos estilos (pulsa Recargar si no se ven a la primera). Si necesitas hacer modificaciones, vuelve a subir el fichero tantas veces como necesites. Si "rompes algo" no te preocupes: en el editor HTML pulsa "Reestablecer el formato original" y volverás a la plantilla por defecto para empezar de nuevo
De todas formas si no os atreveis con esto, pero aún así quereis poner a vuestro blog guapo, Azulica os ofrece un montón de plantillas y de muy fácil instalación, echadlas un vistazo en http://blogs.ya.com/design.
Si quieres ver como quedan las plantillas de Azulica elige alguna del menú desplegable:
Y a blogear!!!
Como optimizar imágenes para tu blog.
Muchas veces sin darnos cuenta desperdiciamos mucho espacio en nuestros blogs o páginas web porque las imágenes que utilizamos ocupan mucha memoria, pero tranquilos queridos blogeros, siguiendo estos simples consejos conseguiréis que vuestras imágenes no ocupen más de lo estrictamente necesario. Podeis conseguir que imágenes de más de 1 MB ocupen menos de 50kb y se vean perfectamente.
¿Por qué ocupan tanto las imágenes?
Siempre que sacamos una foto con nuestra cámara digital o escaneamos una imagen suele ser por defecto bastante grande, esto tiene una fácil explicación. En el mundo de la edición de imagen digital existe una máxima “Siempre puedes disminuir pero nunca aumentar el tamaño de una imagen” así que por defecto (a no ser que te atrevas con la configuración de tu escáner o máquina de fotos) las imágenes van a ser demasiado grandes para la web y con una resolución demasiado alta.
¿Cómo arreglo eso?
Muy fácil solo necesitas un programa de edición de imagen, en este truco vamos a comentar tres de ellos Photoshop, Fireworks y Microsoft Photo Editor. Pero básicamente lo que tienes que hacer es: 1- Reducir el tamaño físico de la imagen, cuanto más pequeña sea, menos espacio ocupará. 2- Ajustar la calidad para web.
Si no tienes ninguno de estos editores, el resto funcionan de una manera muy similar.
Microsoft Photo editor.
Si tienes Windows XP como sistema operativo, este es el editor de imagen que viene por defecto. La gran ventaja que tiene es que lo tiene casi todo el mundo, la gran desventaja que nos ofrece muchas menos opciones que otros editores.
1-Ajustar tamaño: Sólo tienes que ir al menú superior, selecciona imagen y luego cambiar tamaño. Elige que tamaño quieres que tenga la foto en centímetros o en porcentaje.
2-Resolución para web: Menú superior, archivo, propiedades y asegúrate de que la foto esté a una resolución 28 pixeles/cm o 72 pixeles/pda
Photoshop
Es probablemente el mejor editor del mercado, aunque quizás no sea demasiado recomendable para usuarios no avanzados, de todas formas para nuestros propósitos es bien sencillito.
1-Ajustar tamaño: Sólo tienes que ir al menú superior, selecciona “imagen”, luego “tamaño de imagen” y después selecciona el tamaño que más te interese.
2-Resolución web: Tienes que hacer clic en “archivo” y luego “guardar para web” se abrirá una ventana con varias opciones, elige la que mejor te convenga, elige la calidad (observa la imagen) Luego eliges donde guardarla, y ya está.
Fireworks
Como todo software de macromedia es muy sencillo de utilizar y nos ofrece muchísimas posibilidades. El favorito de los diseñadores web.
1- Ajustar tamaño: Sigue esta ruta Modificar> Lienzo> Tamaño de la imagen. Te permite cambiar las medidas (porcentajes, pixels)y también permite restringir las proporciones.
2- Resolución web: Fireworks MX
Este programa tiene un asistente muy completo e intuitivo que te ayudará a optimizar las imágenes para tu blog o tu web sin mayores dificultades.
El primer paso es seleccionar la opción “Asistente de exportación…” que se encuentra en el menú Archivo.
Conviene seguir detalladamente todas las instrucciones que presenta el asistente, ya que este hace prácticamente todo el trabajo.
En el caso que de que sea necesario fijar un límite determinado de KB (Kilo Bytes) para una imagen concreta es preciso activar la casilla “Tamaño de archivo de exportación objetivo” y luego introducir el número máximo de KB que tendrá finalmente la imagen.
Existe la posibilidad de elegir distintos destinos para las imágenes (la web, otra aplicación, etc.) Esta herramienta te ayudará a sacar el máximo partido de una imagen para una aplicación concreta, en este caso la web.
Una vez hecho el análisis el asistente te dará las últimas recomendaciones…
El siguiente paso te permitirá elegir entre los distintos formatos, además de te ofrecerá la posibilidad de afinar aún más los parámetros de calidad de la imagen, efectos de suavizado, transparencias, eliminar colores no utilizados, etc.
Las siguientes imágenes muestran algunos parámetros disponibles para los formatos de imagen GIF y JPEG
Pues aquí teneis todo lo necesario para optimizar las imágenes y aprovechar al máximo el espacio de tu blog o página web…y ahora ¡A bloguear!
¿Por qué ocupan tanto las imágenes?
Siempre que sacamos una foto con nuestra cámara digital o escaneamos una imagen suele ser por defecto bastante grande, esto tiene una fácil explicación. En el mundo de la edición de imagen digital existe una máxima “Siempre puedes disminuir pero nunca aumentar el tamaño de una imagen” así que por defecto (a no ser que te atrevas con la configuración de tu escáner o máquina de fotos) las imágenes van a ser demasiado grandes para la web y con una resolución demasiado alta.
¿Cómo arreglo eso?
Muy fácil solo necesitas un programa de edición de imagen, en este truco vamos a comentar tres de ellos Photoshop, Fireworks y Microsoft Photo Editor. Pero básicamente lo que tienes que hacer es: 1- Reducir el tamaño físico de la imagen, cuanto más pequeña sea, menos espacio ocupará. 2- Ajustar la calidad para web.
Si no tienes ninguno de estos editores, el resto funcionan de una manera muy similar.
Microsoft Photo editor.
Si tienes Windows XP como sistema operativo, este es el editor de imagen que viene por defecto. La gran ventaja que tiene es que lo tiene casi todo el mundo, la gran desventaja que nos ofrece muchas menos opciones que otros editores.
1-Ajustar tamaño: Sólo tienes que ir al menú superior, selecciona imagen y luego cambiar tamaño. Elige que tamaño quieres que tenga la foto en centímetros o en porcentaje.
2-Resolución para web: Menú superior, archivo, propiedades y asegúrate de que la foto esté a una resolución 28 pixeles/cm o 72 pixeles/pda
Photoshop
Es probablemente el mejor editor del mercado, aunque quizás no sea demasiado recomendable para usuarios no avanzados, de todas formas para nuestros propósitos es bien sencillito.
1-Ajustar tamaño: Sólo tienes que ir al menú superior, selecciona “imagen”, luego “tamaño de imagen” y después selecciona el tamaño que más te interese.
2-Resolución web: Tienes que hacer clic en “archivo” y luego “guardar para web” se abrirá una ventana con varias opciones, elige la que mejor te convenga, elige la calidad (observa la imagen) Luego eliges donde guardarla, y ya está.
Fireworks
Como todo software de macromedia es muy sencillo de utilizar y nos ofrece muchísimas posibilidades. El favorito de los diseñadores web.
1- Ajustar tamaño: Sigue esta ruta Modificar> Lienzo> Tamaño de la imagen. Te permite cambiar las medidas (porcentajes, pixels)y también permite restringir las proporciones.
2- Resolución web: Fireworks MX
Este programa tiene un asistente muy completo e intuitivo que te ayudará a optimizar las imágenes para tu blog o tu web sin mayores dificultades.
El primer paso es seleccionar la opción “Asistente de exportación…” que se encuentra en el menú Archivo.
Conviene seguir detalladamente todas las instrucciones que presenta el asistente, ya que este hace prácticamente todo el trabajo.
En el caso que de que sea necesario fijar un límite determinado de KB (Kilo Bytes) para una imagen concreta es preciso activar la casilla “Tamaño de archivo de exportación objetivo” y luego introducir el número máximo de KB que tendrá finalmente la imagen.
Existe la posibilidad de elegir distintos destinos para las imágenes (la web, otra aplicación, etc.) Esta herramienta te ayudará a sacar el máximo partido de una imagen para una aplicación concreta, en este caso la web.
Una vez hecho el análisis el asistente te dará las últimas recomendaciones…
El siguiente paso te permitirá elegir entre los distintos formatos, además de te ofrecerá la posibilidad de afinar aún más los parámetros de calidad de la imagen, efectos de suavizado, transparencias, eliminar colores no utilizados, etc.
Las siguientes imágenes muestran algunos parámetros disponibles para los formatos de imagen GIF y JPEG
Pues aquí teneis todo lo necesario para optimizar las imágenes y aprovechar al máximo el espacio de tu blog o página web…y ahora ¡A bloguear!
¡Bienvenidos a Blogsejos!
Os presentamos el blog que os ayudará a sumergiros en el emocionante mundo de las bitácoras online.
Aquí encontrareís consejos de todo tipo, diseño, trucos, redacción y demás cuestiones que intrigan a los blogeros de todo el planeta.
Proximamente abriremos nuestras puertas para responder a todas vuestras preguntas.
Saludos
Aquí encontrareís consejos de todo tipo, diseño, trucos, redacción y demás cuestiones que intrigan a los blogeros de todo el planeta.
Proximamente abriremos nuestras puertas para responder a todas vuestras preguntas.
Saludos