Mi nombre es Fernando Briano y soy programador.

Cambio de imagen en Picando Código

Hola soy Fernando el pseudo diseñador gráfico / programador:

Después de más de dos años con el mismo tema de WordPress, decidí renovar un poco el blog. Este tema fue comenzado desde cero, sin basarme en otros temas de WordPress, como había hecho anteriormente. Empecé con un directorio vacío, y fui agregando archivos y escribiéndolos en el editor de texto Kate: style.css, index.php, etc.

El CSS, XHTML y los colores fueron decididos a medias con Rosina, también responsable del diseño del nuevo logo 😀
El resto del arte fue diseñado con GIMP con una onda “Pixel art” que traté de imitar 😛

Debo agregar que todo el código del tema validaba como XHTML 1.0 Transitional y CSS 2.1, pero al subirlo se rompió la validación debido a algunos plugins que agregan su propio CSS y XHTML inválido. Voy a ir corrigiendo esto, así como otros detalles que fueron surgiendo al tenerlo “en producción”.

Dos sitios que me fueron de mucha ayuda durante el proceso:

W3c Schools – Referencia de CSS, donde todavía tengo poca práctica, pero aprendí varias cosas al haber hecho el tema de cero.

WordPress Template Tags – Las funciones PHP de WordPress que fui usando.

Espero comentarios de todos, si les gusta, si no, si le cambiarían algo. Como siempre, el tema está sujeto a modificaciones que iré haciendo en el camino. Se puede decir que todavía no está completo, pero la nueva imagen de Picando Código ya está definida 🙂

Espero comentarios de todos, si les gusta, si no, si le cambiarían algo. Como siempre, el tema está sujeto a modificaciones que iré haciendo en el camino. Se puede decir que todavía no está completo, pero la nueva imagen de Picando Código ya está definida 🙂

Feed de comentarios | Url para Trackbacks | Suscribirse a los posts por correo electrónico

46 comentarios en este post

  1. Avatar Eduardo N. Fortes 26 abril. 2010 - 3:20 am Debian IceWeasel 3.5.8 GNU/Linux

    ¡Enhorabuena por el cambio!

    Me gusta mucho como quedó todo, aunque le habia tomado cierto aprecio al theme anterior 🙂

    Un excelente trabajo para acompañar la calidad de los posts!

  2. Avatar Dark Musician 26 abril. 2010 - 3:27 am Safari 531.22.7 Windows 7

    Uff, lástima que aquí no puedo decir malas palabras; pero sin lugar a dudas, quedó la v****, ¡excelente!

  3. Avatar Dark Musician 26 abril. 2010 - 3:36 am Safari 531.22.7 Windows 7

    Aún no tienes favicon ni página de error 404, y si validas el CSS o XHTML da algunos errorcillos :S pero como te digo, va muy bien.

    • Avatar fernando 26 abril. 2010 - 10:24 am Mozilla Compatible 5.0 Debian GNU/Linux

      Todavía faltan varios detalles. Ya agregué página 404, y todavía tengo que trabajar en el CSS y XHTML para que quede 100% válido.

      Irá mejorando, gracias por comentar!

      Saludos

  4. Avatar juan fuenz | One Frag Left! 26 abril. 2010 - 3:40 am Firefox 3.6.3 Windows Vista

    Superb!!!

  5. Avatar juan fuenz | One Frag Left! 26 abril. 2010 - 3:48 am Firefox 3.6.3 Windows Vista

    gran diseño gran!
    los engranajes del fondo, son geniales.
    un detalle:
    al final de la columna de catergorias, se muestra “Sidebar4”

    • Avatar fernando 26 abril. 2010 - 10:27 am Mozilla Compatible 5.0 Debian GNU/Linux

      El fondo sufrió varios cambios durante el proceso, eligiendo al final el que me resultó más simple 🙂

      El sidebar es de lo que menos he personalizado por el momento, pero ya saqué ese texto de sobra.

      Gracias por comentar, saludos!

  6. Avatar David 26 abril. 2010 - 5:41 am Google Chrome 4.1.249.1059 Windows XP

    Buenas,

    La verdad es que no recuerdo como era antes, es lo que tienen los RSSs 🙂
    El nuevo tema está muy chulo, quizás, lo único que podría objetar es el color de los hipervínculos en el cuerpo de los post, ese verde es muy tenue y cuesta un poco leer. También estoy viendo una especie de preview del comentario mientras lo escribo con texto blanco sobre fondo crudo y no se ve nada.
    Lo mejor, sin duda, el contenido del blog. Sigue así! 🙂

    • Avatar fernando 26 abril. 2010 - 10:31 am Mozilla Compatible 5.0 Debian GNU/Linux

      Debí haber puesto una foto de como estaba antes… De todas formas el tema anterior sigue archivado, a lo mejor lo pongo para descargar por si a alguien le interesa.

      Ya quité el preview de los comentarios, hasta que le cambie el estilo para hacer juego con el resto del sitio. En cuanto a los colores, tomo en cuenta el comentario.

      ¡Saludos y gracias!

  7. Avatar Mente Beta 26 abril. 2010 - 6:03 am Firefox 3.5.9 Linux Mint 64 bits

    mucho más prolijo que el tema anterior !, mis felicidades a ambos por el diseño, luego te paso a comentar los detalles, saludos vecino!.

  8. Avatar Palmax 26 abril. 2010 - 6:57 am GNU IceCat 3.6.3 Gentoo 64 bits

    Me parece muy chulo el nuevo diseño.

    Lo que no sé es si pega mucho el verde con el blanco: No se lee mucho el mensaje que viene en la caja de “Dejar un comentario”.

    Quizás si cambiaras el color de las letras verdes por un color que contrastase con el blanco y con el negro…

  9. Avatar SunlightRider 26 abril. 2010 - 7:00 am Firefox 3.6.3 Mac OS

    Man, era hora, ya olía mal el tema anterior, parece que te pegaste una ducha y además te pusiste perfume.

    Felicitaciones!(a los dos) que laburo hacerlo de 0, yo puteo cuando tengo que cambiar un minimo de código, aprendiendo CSS me voleria putazo.

    Saludos, y mirate mi post titulado

    Información capturada por extraterretres

    a ver si anda html

    • Avatar fernando 26 abril. 2010 - 12:19 pm GNU IceCat 3.6 Debian GNU/Linux

      Jeje, ya estaba viejo sí el otro.

      Me costó más intentar adaptar un tema hecho a lo que quería que hacerlo de cero. Llevó un tiempo, pero mas o menos quedó bien 🙂

      CSS al principio es medio frustrante, pero hay que agarrarle la mano.

      Ahí voy por tu blog…

  10. Avatar juanpex 26 abril. 2010 - 8:44 am Google Chrome 5.0.342.9 GNU/Linux

    Juas, soy de los que siempre le encuentran la 5ta pata al gato, el pelo al huevo y cualquier cosa para criticar.
    Soy casi que un “troll con argumento” (?)

    En fin, este no es el caso, me encanto el nuevo estilo y
    me alegra que lo hicieras de cero 🙂

    Igual, como troll veterano Oo no me voy con las manos vacias. La verdad quedo desconforme con no poder decir
    nada del malo sitio 🙁 …arregla eso ¬¬ porque asi no se puede entrar sino u.u

    saludos 🙂

    • Avatar fernando 26 abril. 2010 - 12:26 pm GNU IceCat 3.6 Debian GNU/Linux

      Jaja. No sé qué responder a este comentario.

      Me alegro mucho que haya gustado. Costó un tiempo llegar a algo así, pero parece que a todos les ha gustado bastante el cambio.

      Gracias por comentar, a ver si agrego algunos defectos más 😛

  11. Avatar Francisco Villegas 26 abril. 2010 - 10:18 am Firefox 3.6.3 Ubuntu

    Bien encarado el cambio, ahora puedo leer sin quedarme ciego en el proceso :P!!!!!
    Siga así!!!!

    Saludos,

  12. Avatar hdrom 26 abril. 2010 - 11:00 am Firefox 3.6.3 Windows XP

    Muy bueno!!!..la cabecera anterior con las el tipo de letra quedaba ilegible un poco. Esta bueno porque lo desarrollaste vos y de esa manera es mas original.

    • Avatar fernando 26 abril. 2010 - 2:10 pm GNU IceCat 3.6 Debian GNU/Linux

      Jeje, la cabecera anterior me parece un desastre ahora.

      La idea fue esa, empezar en papel, y plasmarlo desde cero en XHTML y CSS. Así que el resultado final, aunque hay cosas que se ven siempre en los blogs, es un diseño original 🙂

  13. Avatar maxxximo 26 abril. 2010 - 11:17 am Firefox 3.6.3 Windows Vista

    muy buena la nueva inetrfaz, amigable y sobretodo màs fàcil de leer que la anterior, me gusta el logo, y la combinación de colores, mis felicitaciones a Rosina y a vos Fernando por el tema hecho de cero. un saludo grande.

  14. Avatar nacho 26 abril. 2010 - 11:31 am Firefox 3.6.3 Windows XP

    Muy bueno!
    El logo también me gustó. Simple y efectivo.
    Saludo

  15. Avatar Gastón 26 abril. 2010 - 5:41 pm Firefox 3.6.4 Windows 7

    Si, está bueno… parece “De la web 2.0” pero con un estilo “Retro”.

  16. Avatar Eduardo 26 abril. 2010 - 6:09 pm Firefox 3.6.3 Windows 7

    Por fin quitaste el fondo negro con letras blancas 😀 mi vista te lo agradece.

  17. Avatar hugo_dc 27 abril. 2010 - 2:44 am Epiphany 2.22 GNU/Linux

    Pues a mi no me gustó el nuevo Tema 🙁

    Claro que me gustó, pero no quise comenzar el comment como todos los demás… xD..

    Muy buen Tema, y muy buenos temas los que se comentan en tu blog.

    Saludos.

  18. Avatar Esteban 27 abril. 2010 - 11:49 am Firefox 3.5.9 Fedora 64 bits

    Excelente Fernando! También la inclusión de adsense a efectos de ganar algún mango es la mejor que pudiste poner en los single posts =)

    Saludos,
    Esteban.-

  19. Avatar martintab 28 abril. 2010 - 10:22 am Google Chrome 4.1.249.1059 Windows Vista

    Felicitaciones a ambos por el nuevo diseño! Quedó muy amigable a la vista. Muy bueno el logo también!

    Me copó también el muñequito fernando picando código, me recordó al Nintendo World Cup, jaja.

  20. Avatar nicoman 28 abril. 2010 - 11:22 am Debian IceWeasel 3.5.9 GNU/Linux 64 bits

    Muy… pero muy bueno el cambio :), quedo excelente, auque soy mas de leer por RSS, no esta nada mal pasar de vez en cuando a ver algo agradable a la vista.

    Lograste lo que aun a mi me da pereza… crear tu propio theme desde 0 😀

    • Avatar fernando 28 abril. 2010 - 1:34 pm GNU IceCat 3.6 Debian GNU/Linux

      Jeje, yo tampoco me entero si alguien cambia el diseño, todo RSS. Igual está bueno ver qué hace cada uno en los diseños.

      Fue todo una hazaña ponerme a hacer de 0 el tema, ¡pero pude!

      Gracias por pasar a mirar!

      Saludos

  21. Avatar sharysce 28 abril. 2010 - 2:00 pm Firefox 3.5 Windows XP

    me agrada, me agrada 😀

  22. Avatar nacho 30 abril. 2010 - 12:55 pm Firefox 3.6.3 Windows XP

    Te tiro una recomendación, me di cuenta cuando entré para ver un post y navegué un poquito.

    Linkeá la imágen del header al home. No es una gran mejora, pero es como una costumbre ya para el usuario, creo, que el logo del sitio redirija al inicio.
    Agregalo al largo TODO si querés! 😀

    • Avatar fernando 30 abril. 2010 - 1:16 pm GNU IceCat 3.6 Debian GNU/Linux

      Es buena la recomendación. Si bien está el botón de “Inicio”, la gente está acostumbrada a hacer clic en el logo para ir a la página inicial. Lo cambio en cualquier momento…

  23. Avatar Dark Musician 30 abril. 2010 - 8:08 pm Google Chrome 4.1.249.1064 Windows Vista

    Fernando, en monitores con resolución 1024 * 768 no se ve la ‘pestañita’ de la fecha de cada post, hasta ahora me doy cuenta porque estoy visualizando la web en una pantalla pequeña.

  24. Avatar gabyrico83 2 mayo. 2010 - 6:03 pm Google Chrome 5.0.342.9 GNU/Linux

    Me gusta! aunque no recuerdo el ultimo diseño 😛 te leo por rss…

    😀

  1. WordPress Abrir archivos PSD CMYK con GIMP | Picando Código | 13 mayo. 2010 - 7:03 am

    […] me he estado involucrando un poco en el mundo del diseño gráfico. Tanto en el cambio de imagen de Picando Código como en algunos trabajos por mi […]

Dejar un comentario

Toasty!