Ariadna 0.9

AriadnaAlgunos se habrán dado cuenta de que en lo que va del mes sólo escribí cuatro entradas, dos son de links y las otras dos son videos. Si fuera una persona normal, supondrían que estoy enfermo, con mucho trabajo, que tuve familia o algo por el estilo. Pero no fue nada de eso lo que me detuvo. De hecho, en todos esos casos podría seguir escribiendo. Lo que me tuvo encerrado cinco semanas y tres días, fue un cambio estético (los animales hacen lo mismo, la oruga que se convierte en mariposa y bla bla bla). Después de ocho meses usando este theme (Ariadna 0.1), decidí mejorarlo en varios aspectos que fueron surgiendo en función del uso. Espero que les guste, y les pido que -por una vez en sus vidas- comenten en esta entrada qué les parece el nuevo diseño. Si están leyendo vía feed, entren al sitio!
Antes de que lo pregunten: Elegí llamar Ariadna a este diseño porque es un nombre que me encanta, y va perfecto con el theme. Y la versión es 0.9 y no uno o dos porque todavía está en fase experimental, “en beta” dirían los Googlers. No es una 0.2 tampoco porque es un salto grande. Cada uno tiene sus vueltas para versionar. En fin. El próximo gran cambio tendrá el primer número fuera de la serie de los ceros (por eso también le puse 0.9, no pienso usar números secundarios o de revisión a nivel oficial!).
Paso a comentarles todos los cambios que hubo, a vuelo de corvus corax (cuervo):

  • equilibrioPara empezar, se ve mucho mejor: la estructura está más cuidada. Revisé cada linea de código y lo ordené un poco. Básicamente, empecé de cero, y fui agregando todas las partes. La versión anterior fue basada en el theme Kubrick y, aunque se veía bien, manteniendo elementos de ese diseño quedaban cosas desequilibradas.
  • Uno de mis objetivos fue optimizar y reducir lo más posible el contenido (técnicamente hablando). El theme usa sprites y jQuery. Tanto los archivos de JavaScript como las hojas de estilo son comprimidas con ayuda de WP-Minify.
  • IE OUT!Decidí sacarle partido a la tecnología. Ariadna 0.1 se podía ver sin problemas en Internet Explorer, y no tenía animaciones complejas. Actualmente la mayoría puede ver páginas con contenido más enriquecido, así que decidí dar un paso adelante. Lo lamento por los que siguen navegando con una Pentium II; pero para ver bien la nueva versión de Ariadna van a necesitar navegadores compatibles con CSS 3. Eso significa, Firefox 3.5 o superior, Chrome (con algunos detalles mínimos), Safari (bleh, todos los que usen WebKit). Con Opera, por ahora, tampoco hay compatibilidad. Usuarios de Internet Explorer, no se cómo están leyendo esto si usan IE8 van a ver el sitio bastante bien. Pero usen Firefox que es mejor.
    También hago uso de archivos PNG con transparencia. No voy a llorar más por los necios que usan Internet Explorer 6.
  • iconitosUse íconos del pack Silk, otros de Fugue e hice algunos yo (yay!). También tomé sin permiso (pero de buena fe) los favicons de algunas redes sociales.
  • Arreglé el problema con el script que detecta los browsers. Ahora deberían verse correctamente Chrome y todos los navegadores. Todo gracias al plugin WP-UserAgent.
  • like itAgregué un sistema de votación para que los vagos usuarios ocupados que no quieren pueden comentar al menos me digan que apreciaron el artículo con un click.
  • Tomé algunas sugerencias que me hicieron Horacio Bella y Pablo Rigazzi en el WordCamp Argentina del año pasado que no apliqué en el diseño anterior.
  • wp-clockInspirado por una presentación de Matt, les comento que si una persona tardaba 12 segundos en cargar la página y ahora tarda sólo 8 segundos, está ahorrando 4 segundos. Eso totaliza más de 380 minutos (seis horas y media) humanos que se ahorran al mes! (todo suma — la cuenta está basada en datos reales de antes y después)
  • Renové el blagroll. Ya se estaba llenando de links, así que hice algunas cosas al respecto: borré links viejos y cambié los links de texto por íconos (mucho mejor! -si alguno quiere cambiar su ícono lo hacemos, no hay problema-).
    Aprovecho la ocasión para recordarles a todos que no me enojo si me linkean desde sus blogs!
  • bsidesIncorporé los B-sides en la barra lateral. Son links a cosas que me parecen interesantes, y que no llegan a tener extensión o importancia como para que haga una entrada en el blog. Esta idea la tomé del blog de Bernie Zimmermann.
    Para los curiosos que se preguntan por qué B-sides, les cuento de dónde surge este término: hace tiempo, en la época de los vinilos, los artistas grababan el single más popular en el lado A del vinilo, y en el lado B (B-side) ponían algún otro tema “menos importante”. Actualmente, los músicos suelen hacer B-sides con algunos temas especiales o que no van con el estilo de su disco. Para los frikis curiosos, los links son un conjunto de feeds de mi actividad en un par de lugares filtrados y agrupados gracias a Yahoo! Pipes.
  • La imagen de cabecera iba a cambiar. La isla flotante es casi un ícono de Go mobile!, y aunque intenté hacer una imagen mejor, no me sentí “inspirado” como para hacer algo que supere la imagen actual, que sola tiene más de una semana de trabajo invertido. Para los curiosos, la nueva cabecera se veía algo así:
    new-header
  • Parte del contenido carga desde un dominio estático, es algo así como tener mi propio CDN (ya se que ni se le acerca; no empiecen con los comentarios de troll al respecto). Sirve para acelerar un poco más el acceso. Van a notar que parte del contenido sale de gostatic.com.ar.
  • Inspirado por lo que ví en Uberbin, ahora se pueden dejar comentarios de forma rápida desde la página principal. Va perfecto para entradas cortas en las que no hay discusión.
  • Todo el código lo escribí usando Notepad++, un editor de texto que uso por recomendación de Valenzine. Me resultó muy útil (usuarios de Windows, lo recomiendo).

Por último, cuando le comenté a Valenzine que quería poner imágenes en este post, me dijo que ponga una carita bien grande. Así que … no se para qué, pero acá tienen! :P
Agradezco también la colaboración de mis beta-testers Martina y Ereth (que ya es beta-tester oficial de todos mis desarrollos en la web jajaja).

Están invitados a opinar y dejar sus críticas (todas serán consideradas, aunque sea para la próxima versión!).
Es probable que haga algunos cambios más en función de lo que digan en los próximos días

  • Esta re bueno, es mucho mas comodo de leer… es genial para las personas como yo, a quienes no les gusta leer, pero si me permitis la critica, no me gusta la barrita marron de arriba, o sea, individualmente no es mala, pero creo que no combina totalmente con el estilo nuevo,

    pero aprobaste, jajajajja

  • Martina

    al fin!=)los cambios esteticos me gustan mucho :D
    ya te hice los comentarios personalmente
    asi que solo,

    felicitaciones!

  • y mi Gir Asesino?? pucha :P -. coincido con el primer post sobre la barrita marron ( que casualmente ahora no la veo por que la maq del lauro tiene IE6 – si uso el mostro, se cuelga jejeje) que no luce lo que deberia.
    respecto al resto esta barbaro . la cantidad de objetos es agradable . mi icono emmm .. bleh! ya vere que le hago por que la araña mecanica en ese tamaño no se distingue un chot….. .
    un abrazo y buen laburo .

    gir te manda saludos y una sugerencia ” no vaya ser que te conunda con pikachu…”

  • Felicitaciones .. tienen mucha onda los cambios.

  • efectivamente, concuerdo con aquello de la barra marrón, no sé… me causa un poco de ruido.

    Fuera de ello, te quedó sumamente excelente y me cargó en menos de 8 segs.

    Felicidades :D

  • V

    Me gusta el uso excesivo de tooltips… No, de verdad, le da cierto nosequé de profesionalidad.

    Estoy aquí esperando un Public Release de tu theme ;)

    Como siempre, disponible estoy a lo que sea: anoche me perdí el minuto-a-minuto por dormir… ¡¿Quién podría ser tan idiota de dormir en una situación así?!

    ¡Felicitaciones Zimi!

    Estoy muy orgulloso de todo tu trabajo ;)

    .-

  • Te pasaste loco, quedó muy bueno. Todavía no encontré nada para criticarte, ya le dare un vistazo más crítico. Eso sí, te voy a “pedir prestadas” algunas ideas probablemente para mi blog. ;)

    Saludos.

  • ¡Zim!, ¡Te quedó genial!

    Estoy escribiendo esto desde el comentario rápido para testearlo de paso ;)

    Saludos.

  • Me gustó el theme! esta muy bueno!

    Coincido con los de arriba sobre la barrita marron del header, me parece que quedaria mejor si la estiraces hasta el cuadro de busqueda y mas “pegado” a la izq, donde empieza el content (a la derecha de la casita de inicio de la izq ^-^) ;)

  • Me gustó, me gustó. Quedó muy lindo.
    Eso sí, estoy en Chrome y quise “likear” el artículo y no me dejó :( Sigue en cero. El mouse pasa a “link cursor”, hago click y nada, y desde ese momento ya se transforma en cursor común :p.

    No sé si es Chrome o qué, después lo pruebo en FF&Win y si me acuerdo en FF&Linux

    Ah, y me encantó la forma del blagroll, yo había pensado hacer algo así pero ninguna me convencía, pero a vos te quedó muy lindo :). En cuanto a mi ícono, dentro de poco te pasaré otro que será el definitivo de mi blog :D

    ¡Abrazo Zim!

  • Me encanta cómo te quedó!! La onda del blogroll te quedó buenísima, y en cuanto al blog en general resulta todo muy cómodo. Te felicito!

    (Genial el zim en los artículos relacionados :P)

  • ChS

    Geniaal, esta como mucho mas simple y eso me gusto…lo del blog scroll quedo muy original, al menos no me habia topado con algo asi hasta ahora..

    A mi tampoco me anda el boton para “likear” con FF 3.5.1

    en sintensis, felicidades! quedo muy bueno! :)

    PD: Quise abrir la pagina con el IE7 (tengo ietab en FF y todavia no me pase al IE8 ya que nunca uso eso xD) y se ve para el ojete jaja

  • MUY BUENO! Me gustó mucho en serio!

    Al “Like” yo tampoco pude darle (Firefox 3.5 – Mac)! Pero me gustó mucho! :P

    Felicitaciones, señor!

  • Esta muy bueno el diseño, parece mas futuristico o tecnologico, o que se yo. No se me ocurren los adjetivos apropiados para describirlo.

    Me gusta mas…

  • V

    Es cierto, está buggeado tu “Like” :(

    Ay me encanta saber detalles técnicos de tu sitio (¡Y podría robarte todos los detalles muajajaja!)

    .-

  • Me encanto!!!!!

    No se que decir que no hayan dicho ya, apenas entre lo primero que noté fue la reducción del tamaño del header y la barra marron incluida en la tierra, y esto ultimo me choco un poco, pero la verdad tampoco se me ocurriria un lugar mejor para poner esas cosas. Para los que no sabemos un choto de PHP; jQuery, javascript, etc, lo que mas nos gusto fue eso de el blogroll con iconitos, habra sido un trabajo de locos, pero me encanto, me hace acordar a cosas parecidas de Tumblr, “seguidores” en Blogger y etc. Te pregunto desde la ignorancia, no podrías hacer que se pueda hacer eso desde un WP plugin?

    Por mi lado te cuento que mi iconito proximamente deberá cambiar, tengo pensado mudar el blog a WP, y modificar algun theme de modo que quede algo original (ya uqe no me da ni la cabeza ni el tiempo para hacer algo desde 0, jaja) Ya te vas a enterar igual. Felicitaciones!

  • Ka

    Zim! Me encantó, quedó BÁRBARO!
    Cuando sea grande quiero ser como vos :)
    Congrats!

  • Gas

    Hey! Te quedó copado, felicitaciones! Me gusta :D

    Venía a comentar lo del ‘Like’ en Chrome, pero veo que ya te lo dijeron :)

    Felicitacion de nuevo, Zim!

  • Lo malo de llegar tarde -aparte de llegra tarde- es que todos ya dijeron lo bueno ! A mi me encantó lo de arriba, lo de películas, música, tag, etc. Y el blogroll. Y lo de que ABOUT esté oculto.

    En fin, un trabajo de puta madre Sfroid :P

  • @cbadj

    mis felicitaciones n*2 amigo…la verdad que esta muy bueno :)

  • Aylups

    Te quedó re copado! Congrats! :)

  • ChS

    Ehh ahora funciona, pero deberia tener alguna restriccion de ip o algo xD

  • Ras

    Que tal, Zim, es la primera vez que te subo un comentario.
    El tema te quedó mil veces mejor que antes (y eso que ya estaba bueno). Sólo opinaría que a la barrita marrón, como dicen muchos, le falta un toque de gracia. Si yo fuera vos la pondría de color “semitransparente”, igual que la barrita de búsqueda de la derecha. Y tal vez un pelito más grande.
    En cuanto a la imagen de la isla… es genial… en qué programa la hiciste? Me da un poco de cosa criticarla… porque está muy buena… pero bueno, sólo un detallito: de la mitad para la derecha está como medio “vacía”. De la mitad para la izquierda está bárbaro. Está como desbalanceada. Tal vez si le agregaras a la derecha algún animalito (no sé si específicamente la ardilla, u otra cosa, que se yo), o arbolito, u otro edificio… Pero son sólo sugerencias de un loco, no me tomes tan en serio. Y lo que más, más me gusta es el blogroll. Prolijo, elegante, eficiente… sin palabras. Felicitaciones!

  • Zim

    @Todos: Gracias por sus comentarios!

    Voy a trabajar en la barra de links! Agradzco las sugerencias que hicieron al respecto :)

    Ya está arreglado el botón de “Like it!”. Era un problema con la base de datos, básicamente.

    @Abby: Lo del blogroll es una modificación específica que hice de un widget; si fuera algo fácil de “sacar” del sitio lo convertiría en un plug-in encantado. Desafortunadamente, lo encaré apuntando a usar sprites y CSS “locales”. Si lo saco de mi blog, sólo se ven espacios en blanco en donde irían los íconos.

    @ChS: El plug-in usa cookies e IPs para regular los votos!

    @Ras: Gracias por tu sugerencia; la imagen de la cabecera está hecha con Photoshop, es un conjunto de fotos. Es cierto lo que decís! Antes de ese lado había un avión, que lo saqué para poner el cuadro de búsqueda. Voy a ver qué hago con eso :)

  • Tomas Francisco Lemos

    Esta genial como te quedo, me gusto mucho ^_^
    Creo que ya todos han opinado lo mismo que yo, jeje.
    En fin, ahora que me pongo a pensar deberia “intentar” darle vida a mi blog, va empezarlo, jajaja

  • vaL

    Me gusta me gusta :)
    A mi también me agrada el nombre Ariadna, muy buena la idea de los B-Sydes tmb.
    Quedó muy prolijo y ordenado, me gusta mucho la barra con los íconos ahí arriba.
    Y POR FAVOR, no cambies la imagen! o si la cambiás que sea como esa que pusiste de muestra, que no se altere demasiado porque ésta es hermosa!
    Un abrazo Zimm

    tengo fiebre :( bu!

  • ErethAkbe

    “Blag/Wobsite”
    Finalmente lo escribis como decis! un + de personalidad :)

    Muy bueno el wall, buen truco el de que haga notifs en el wall de FB, podes pescar a algunos lectores por ahi! ;D

  • Witty

    Mejoro bastante, la verdad me gusta como quedo.

  • Zim

    @Ereth: Lo de blag y wobsite figura desde el diseño anterior! :P

    @Witty: Me alegro! Ahora que está funcionando el nuevo plugin para mostrar los navegadores te debería aparecer bien eso.

  • Maai

    enrri!!! te quedó re lindoooo!!! cuando entré quedé O_O OMG! jaja

    ah y ahora hay encuestas !! que diver!! voy a seguir chusmeando ..

    felicitaciones por el cambio!

  • Hey, esperen! No cierren la puerta todavía cheeee

    Seriously, te quedo muy bien! Todo muy lindo, invita mucho más a la lectura este nuevo diseño pero como es que aún no agregaste un padding/margin-bottom a cada párrafo?

  • El nene esta creciendo, ya va cortando lazos con Micro$oft. Vos despreocupate, ya va a llegar el momento donde todos odiemos a Firefox por no tener un soporte integro de CSS7 y HTML6. Lo que importa es que todos los usuarios del IE >8 deben ser castigados, ya sea directamente (yo nunca hice eso) o con la privacion de contenidos.

  • pablo

    esta muy bueno che, congratuleishons

    pd: estaba interesante la cabecera con la ardilla ja