Los Widgets

Mi primera idea para el nuevo diseño del blog era tener dos sidebars, llenarlas de widgets con las etiquetas, el archivo, mis tweets, comentarios, blogs favoritos, paginas interesantes, en fin después de elegir lo que sería la plantilla para el nuevo diseño el número máximo de widgets para agregar se redujo.

Primero tenía que escoger los básicos: "About me", "Etiquetas", "Archivo", "... en gReader". La configuración de estos no fue nada del otro mundo, los tres primeros ya se encontraban en la plantilla y mostrar los posts compartidos en google reader, fue cuestión de elegir el diseño e insertarlo. Después de esto me di cuenta que tenia espacio disponible, el sidebar todavía se veía vacía.

Empecé viendo la galería de widgets que ofrece blogger, ahí encontré la manera de mostrar las imagenes que tengo en Flickr(myFlickr). La configuración: Titulo, Ancho, User Name(nombre en pantalla), número de fotos a mostrar, mostrar liga all photostream. Para que el widget y demás servicios que desplieguen imagenes de filckr unicamente con el nombre de usuario se debe configurar la cuenta en Privacidad y Permisos para que no oculte el perfil de las búsquedas públicas.


Finalmente decidí agregar un widget para mostrar mis actualizaciones de twitter(@d_mar), los que están en la galería de widgets funcionan, pero visualmente arruinan el diseño, por lo que busque otra manera de integrar Twitter en Blogger, la cual se adapta con lal plantilla CSS, combinando perfectamente en el blog. Básicamente crea una lista de los últimos tweets del usuario especificado, en el blog usé la modificación a blogger.js hecha por init7 la cual despliega los enlaces en vez de texto como enlaces reales.

Cuando termine de agregar los widgets no tenian el orden que esperaba.
Defalut        Final
"@d_mar" "About me"
"myFlickr" "@d_mar"
"... en gReader" "Labels"
"Archivo" "Archivo"
"Etiquetas" "... en gReader"
"About me" "myFlickr"
Para reacomodar los widgets el simple arrastrar y soltar no funcionaba, por lo que en editar html busqué:  
 <b:section class='sidebar1' id='sidebar1'...
Esta sección se encarga de indicar donde aparecen los widgets (<b:widget ... ), lo único que se debe hacer es cambiar el orden de los widgets para que queden como se espera.

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='HTML2' locked='false' title='@d_mar' type='HTML'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='HTML1' locked='false' title='... en gReader' type='HTML'/>
<b:widget id='Gadget1' locked='false' title='myFlickr' type='Gadget'/>
</b:section>
Por el momento es lo que tendra el sidebar, aunque estoy considerando poner un footer mas elaborado...

Read Users' Comments (0)

Nuevo diseño

  
                                                    Antes                     Después

Para retomar el blog lo primero que necesitaba era un nuevo diseño, la plantilla es mas elaborada que la anterior esta vez solo modifique algunas imágenes, texto y links. El resultado me gusto aunque en el momento todavía faltan algunos elementos de lo que plantee sería la vista del blog, de momento explicare lo que hice, son elementos "técnicos" sencillos, por lo que si saben sintaxis html y css no será difícil entenderlos.

La plantilla esta basada en Tech Dream, adaptada de Wordpress

live demo


Lo primero fue crear el nuevo header,la imagen original me agrada, el concepto del cuadro principal junto a la lap, la imagen del cuadro, la pantalla de la lap y el rango de colores era algo que sin duda cambiaria. Encontrar una imagen dentro de la plantilla no es tan díficil, simplemente se busca la extensión de la imagen en mi caso (.jpg).

La edición de las imagenes fue en photoshop, lo cual simplifico mucho el proceso. El cuadro se compone de dos imagenes: Camera by ~MathewJ91, Music with wings by ~GaZm85, el titulo del blog y efectos de relleno. Mientras la computadora despliega el "nuevo" logo de Dmar. Y el rango de colores lo deje de verde a amarillo.

Teniendo la parte visual, era hora de configurar las páginas, algo que desde el principio quería incluir en el blog, pero que nunca implemente, buscando las opciones para hacerlo encontré que blogger implemento la creación de páginas en draft.blogger.com, con la creación de páginas habilitada, escribí el about, contact y un pequeño faq(en parte como broma, y otras cosas "seriamente").

Termine agregando los links de las paginas, y del rss (la plantilla ya lo tenia, pero según lo mejore), solo quedaba un pequeño detalle, el titulo y descripción del blog quedaban encima del header, haciendolo ver horrible, la solución un cambio en el CSS. Lo primero que se me ocurrió: display: none, primero en #header pero eso quito el titulo, descripción e imagen, después lo inserte en #header h1 el resultado se veía como quería pero después me di cuenta que el botón del RSS y el link estaban desfasados, entonces cambie el atributo a visibility: hidden, el resultado se veia y funcionaba como queria, el titulo no se despliega pero se mantiene su espacio. La razón por que funciono visibility: hidden es por la forma en que actua:

display: none; // Elimina el elemento de la pagina
visibility: hidden; // Esconde el elemento, reserva el espacio en el que se despliega.


La plantilla le faltan elementos que me parecen importantes, enviar a twitter, post relacionados, gadgets en el sidebar, con los cuales trabajare el resto de la semana. Ahora que termine examenes e inevitablemente tendre internet empezare con posts normales el 15/02.

Read Users' Comments (0)

Reinicio

La existencia de este blog empezó el 21 de junio de 2008, tenía algunas cosas que decir por lo tanto decidi abrirlo, si lo visitaron alguna vez sabran un poco de su historia, si no tuvieron esa suerte, no se perdieron de la gran cosa, simplemente decidi borrar lo pasado, esta vez mantendre el blog vivo, no como los últimos meses que lo descuide tanto.

Read Users' Comments (0)