Blogger, Herramientas

Pure CSS Menu: Generador de menús desplegables sin javascript

Publicado por Claudia en enero 27, 2010

Jebú me comentaba sobre Pure CSS Menu, un sitio para crear menús desplegables (drop down) únicamente con CSS, y con la misma técnica usada por Janko Jovanovic.

Aunque el sitio está en inglés, es intuitivo y simple de usar, especialmente para quienes tienen pocos conocimientos de CSS y HTML. Puedes elegir una plantilla, cambiar los bordes, colores, estilo de fuente, configurar enlaces con pocos clicks y descargar luego el paquete zip hacia tu computador.

Cómo instalar un menú (en Blogger)

El fichero “purecssmenu-com.zip” contiene un archivo HTML y una carpeta con imágenes. Su intalación no es complicada:

1. Abrir el archivo purecssmenu.html. Éste se abre en una nueva pestaña de tu navegador.

2. Una vez abierta la pestaña, hacer click sobre ella con el botón derecho de tu mouse, y seleccionar la opción “Ver código fuente de la página“. Esos son los correspondientes códigos a ser pegados en la plantilla.


3. El código CSS comprendido entre las etiquetas <style> y </style> (excluidas éstas), debe ser pegado en la Edición de HTML de la plantilla, justo antes de ]]></b:skin>. Guardar los cambios.

4. El código HTML comprendido entre los comentarios <!– Start PureCSSMenu.com MENU –> y <!– End PureCSSMenu.com MENU –> debe ser copiado antes o después del cierre del div ‘header-wrapper‘ (en la plantilla Mínima de Blogger), reemplazando las dobles comillas por comillas simples (). Una manera más simple de hacerlo, es creando un nuevo gadget de HTML/Javascript desde Diseño /Elementos de la página, en la sección llamada “crosscol-wrapper” que está justo bajo la cabecera y copypasteando el código allí. Esto último facilita su edición en cualquier momento.

5. Como últimos pasos, queda hospedar en tu hosting las imágenes contenidas en la carpeta images y reemplazar los enlaces en el CSS, justo donde se indica; y estilizar un poco el menú para integrarlo a la plantilla. Para ello, puedes modificar totalmente el CSS. En mi plantilla de pruebas, le di al contenedor #crosscol-wrapper un ancho de 100%, usando el mismo color del fondo que tenía originalmente mi menú:

#crosscol-wrapper { background:#E62E6B; width: 100%;}
Tags: ,
Blogger

Si usas Blogger, también tienes que hacer backup

Publicado por Claudia en enero 18, 2010

Me atrevería a decir que una de las palabras que más nombramos los usuarios de WordPress self-hosted es backup: “Antes de instalar la nueva versión de WP, haz un backup”, “haz backup de tanto en tanto”, “por las dudas, backup”.

El backup es una tarea no necesaria, sino imprescindible cuando el hosting corre por tu cuenta. Pero, ¿por qué deberías obviarlo al decidir crear un blog de subdominio .blogspot.com?

Blogger es la plataforma preferida por millones de usarios alrededor del mundo no sólo porque es gratis, sino también porque es relativamente “segura”, fácil de usar, y maneja políticas poco restrictivas. En un par de minutos ya puedes tener un blog funcionando, con subdominio propio y plantilla estándar. Lo básico que aparenta ser, hace pasar por alto el tener que hacer un respaldo completo de tu blog, cosa que por las dudas (o para evitar futuros problemas) debieras hacer sí o sí.

Entonces, ¿cómo hacer Backup en Blogger?

1. Backup de posts y comentarios.

Puedes hacerlo directamente desde el panel, en Configuración/Básico/Exportar blog, descargando el correspondiente archivo .xml a tu escritorio.

Desde que Blogger habilitara la función para importar/exportar entradas, no se hace necesario utilizar programas como Blogger Backup Utility; sin embargo, es recomendable hacer uso de DownThemAll, una extensión para Mozilla Firefox que te permite descargar todos los links de las imágenes contenidos en un sitio web. Puede ser especialmente útil si alojas tus imágenes en hostings gratuitos, dado que en lgún momento tu cuenta podría sobrepasar el ancho de banda ofrecido.

2. Backup de plantilla y widgets

Antes de instalar una nueva plantilla o de hacer grandes cambios en el código, lo mejor es respaldar tu vieja plantilla. La práctica dice que no todo siempre resulta como estaba planeado, o que quizás te aburras del diseño actual y quieras volver al anterior.

A la hora de hacer el respaldo de la plantilla, lo mejor es hacerlo desde la opción “Descargar plantilla completa” de Diseño/Edición de HTML. Si haces copy/paste en un archivo de texto, podrías no estar copiando todo el código, o tener graves desajustes en el diseño.

No existe manera de respaldar los artilugios o widgets de HTML o texto que no se agregan desde Blogger mismo, pero es práctico hacer un copy/paste de su contenido en uno o varios blocks de notas.

3. Backup de imágenes y archivos contenidos en plantillas

Cuando comienzas a usar Blogger, no sueles preguntarte dónde están hospedadas las imágenes que aparecen en la plantilla XML. Se da por sentado que se almacenan en los servidores de Blogger.com, porque las imágenes sencillamente “están ahí”. En las plantillas que vienen por defecto en Blogger, no es necesario relojar ninguna imagen; pero, en las plantillas diseñadas o adaptadas por terceros, hacerlo es un deber, especialmente si ves que el hosting de imágenes usado es PhotoBucket, Imageshack u otro que sea gratis y tenga un ancho de banda limitado.

Debo reconocer que siempre fui un poco porfiada al respeto, pero Francisco me enseñó que no existe un lugar más seguro para alojar imágenes que Blogger mismo, con ayuda del menú Herramientas/Información de la página/Medios de Firefox para descargar todas las imágenes de una sola vez y la extensión DragDropUpload para subirlas de un viaje. Si quien distribuye la plantilla que usas alojó las imágenes en Imageshack o Photobucket (en especial este último), su uso masivo hará que en cosa de semanas o un par de meses parte importante del diseño se pierda.

Pasa exactamente lo mismo con los archivos javascript de plantillas tipo magazine o con bonitos slideshows, que dejan de funcionar de la noche a la mañana, para muchos “inexplicablemente”. Para prevenir imprevistos, es recomendable descargar todos los archivos javascript de tu plantilla (buscando “.js” con ayuda del buscador de tu navegador y copypasteando la URL en la barra de direcciones) al menos para mantenerlos a mano por si el hosting original dejase de funcionar, cosa que siempre ocurre en algún momento. Si no tienes una cuenta para alojar archivos javascript, siempre existe la opción segura de pegar el contenido en la plantilla misma, bajo ]]></b:skin>, de la siguiente manera:

<script type='text/javascript'>
//<![CDATA[
contenido del archivo
//]]>
</script>

El seguimiento de pasos simples (que a veces no se realizan por pereza) puede ahorrarte futuros dolores de cabeza.

* Imagen de Sⓘndy, vía Flickr, bajo licencia Creative Commons Attribution-ShareAlike.

Tags: ,
Wordpress

Contactable: Un atractivo plugin jQuery para formularios de contacto

Publicado por Claudia en enero 18, 2010

Contactable es un sencillo plugin (jQuery + PHP) desarrollado por Philip Beel (vía devSnippets) que permite habilitar formularios de contacto o feedback en cualquier página, al estilo UserVoice.
Es una práctica opción (con parámetros configurables) si estás buscando instalar un formulario de contacto en WordPress, recomendable para todo aquel que quiera mejorar la usabilidad de su sitio web.

Más:
Documentación | Instalación en WordPress

Tags: , ,
Wordpress

WordPress para principiantes

Publicado por Claudia en enero 4, 2010

Ayer una amiga me decía: “Qué lindo tu blog personal, ¿cómo lo hiciste?”. Le respondí: “Lo diseñé yo, bajo un gestor de contenidos que se llama WordPress. Compré un dominio y pago un hosting“. Parece una respuesta básica para todo aquel familiarizado con el mundo de los blogs, pero deja casi en el mismo lugar a quien pregunta.

Pero, ¿qué es realmente un blog? ¿cómo puedes tener uno? ¿para qué crear un blog? Sergio, en Foro WordPress (vía Ayuda WordPress) avisa de la publicación de un e-book que responde todos los porqués, paraqués y cómos que dan vueltas en tu cabeza a la hora de iniciar un blog.

El e-book de 56 páginas, tiene el “malvado” fin de atraer visitas hacia el blog de su autor (si es útil, no creo que sea malo), y está enfocado en WordPress con hosting propio (recomendable si quieres crear un blog bajo este CMS, o si quieres saber cómo funciona), pero también repasa lecciones básicas del blogging explicadas de la manera más sencilla posible, para hacerlas comprensibles incluso para quienes no saben nada de nada.

*Representin‘ por ryancboren vía Flickr. Bajo Licencia Creative Commons.

Tags: