Rediseño 2018 del blog

Escrito el , visto 3111 veces Ver usuariopor



Rediseñar el blog es algo que no hago muy seguido, tuve que buscar cual había sido el último posteo sobre el tema y me remití a 2013 ¡Cinco años!

Claro, dice la regla universal que no hay que cambiar algo que funciona, pero dicha regla utilitaria no contempla el aburrimiento ni el agotamiento que provoca una interfaz sin cambios en tanto tiempo y estoy necesitando hacer algo ya, casi urgente.

El año pasado intenté buscar alguna ayudita por ahí pero o me ofrecieron que les pague un diseño con dinero que no tengo o deliraron con ideas fantásticas que ninguno iba a llevar a cabo ni se molestaba en explicarme un poco. Ayuda a los demás creo que ya no debo pedir :P

Otra cosa que noté es que no hay buenos diseños para blogs, los diseñadores no creen que los blogs puedan seguir existiendo, para ellos son un tema menor dentro de un sitio web comercial. Así que obviamente tuve que optar por hacerme cargo yo mismo de todo (as usual).

Aquí les voy a contar (y mostrar) en qué ando para cambiar cómo se ve, y también cómo funciona, el sitio.



Primero que nada quiero aclarar que no es tan sólo un cambio de template y listo, también que esto no es Wordpress, no es que compro un template ya armado por otro en ThemeForest y lo instalo, aquí tengo que hacer muchas cosas "a mano".

Cada una de las funcionalidades las programé yo y por ende hay que tener mucho cuidado al cambiar algo, no son dos clicks y ya está, lo bueno es que poseo el control total sobre lo que aquí sucede y el blog se ha transformado en un banco de pruebas personal. 14 años llevo con el "Postrev" que si bien es de código abierto hace como también cinco años que no publico una versión usable porque... mucha vagancia hacerlo, hay que despegarlo tanto de código propio para este blog que me da fiaca hacerlo.


así se vería una nota


Pero eso también trajo algunos problemas por los que los quiero corregir y que el update sea un refresco no sólo visual sino interno. ¡Y lo estoy haciendo!

Como base estoy usando Bootstrap 4 (lo vengo usando en varios proyectos, nunca algo así), no porque me guste demasiado (muchas restricciones) sino porque su uso es más bien rápido y no tengo que escribir una interminable sábana de CSS cuando no soy diseñador ni nada por el estilo. No puedo lidiar con SASS, LASS, GARCHASS y todas esas cosas que se pusieron de moda en los últimos años y nadie se dignó a explicar para los mortales.


login form


Por otra parte hay muchas cosas que quiero conservar, no puedo reeditar 7000 notas que no respeten del todo los "novedosos estándares que en un año todos se pasarán por el orto", así que hay mucho contenido "legacy", en este sentido Bootstrap no me jode tanto lo que hay.

Otras cosas que quiero conservar son las que me hacen cómodo bloguear y administrar el blog hoy en día. Muchas de esas cosas tienen que ver con información en pantalla que provoca úlceras en el ojo del diseñador minimalista que jamás de los jamases se preocupa por la usabilidad ni el usuario. Esas cosas que requieren un click extra para verlas y que las suelen sacar porque "no se ven bien", bueno, yo las dejo.

Jamás un diseñador te va a preguntar cómo usás vos tu propio sitio, bueno, algunos sí, pero son pocos los interesados en UI/UX, la mayoría se queda en la superficie. Lo bueno es que son muy buenos viendo eso y seguro el día que publico el nuevo theme me van a criticar pixel por pixel cada cosa que ponga :D pero bueno, el que hace oídos sordos es el que pierde, al final yo siempre los escucho un poquito.


Encuestas


Un problema que tuve, obvio a esta altura, fue encontrar un buen template para usar de base. Encontré uno más o menos consistente y empecé desde allí, obviamente era como el 1% de lo que necesitaba, ni comentarios tenía, era una cáscara básica pero que me dio ideas para empezar.

Otra cosa que quería conservar era el toque personal, estúpido y grasa que tiene mi blog en algunas partes (usualmente imagenes, gifs, etc.) y lo quiero ampliar (porque siempre se puede hacer algo peor :D ) así que desde el gif de Putin en el pie hasta el header usual harán su aparición.

Pero quiero mejorar cosas, como las encuestas que no tocaba desde hace una década (posta) en lo visual, ahora uso componentes que ya vienen hecho y chau.


encabezado, gravatar redondito porque sí


El trabajo está en un 30% más o menos, ya "funciona", lo estoy armando con una base de datos más o menos actualizada del blog así que estoy viendo todo como se ve ultimanente. Decidí hacer un trabajo doble: diseño + código. Actualizar todo, desde cómo se carga una nota hasta cómo se la muestra, el proceso siempre incluye retocar las funciones existentes para arreglar bugs viejísimos.

Lo peor? Todo, porque tengo que tocar TODO el código, sacar partes que ya no uso ni usaré (chau sección de enlaces y descargas), simplificar código, sacar las cosas que son particulares del blog y meterlo como plugin o como función del theme y así. Me está llevando laburo pero es un laburo agradable, cabe decir, porque es para mi sitio.


Datos del autor, notas relacionadas, tags


Lo difícil es que todo se vea óptimo para, por ejemplo, móviles. Esta vez no quiero dos diseños al mismo tiempo, quiero uno solo y listo, más simple para mi laburo. No se si lo voy a sostener así, pero por el momento es la idea, lo hice en Tecnogeek, quiero hacerlo acá.

Todo esto que ven es un trabajo en progreso! aclaro de nuevo porque seguro estan tentados a criticar como si fuese definitivo y, la verdad, no tengo idea cómo quedará el diseño final. Se aceptan sugerencias y pedidos, obviamente, aunque la implementación depende de qué entienda y qué pueda hacer con mis escasos recursos.


Comentarios


Tengan en cuenta otros detalles, debo conservar no sólo lo que escribí sino los más de 160k comentarios que ustedes han dejado por lo que el formato debe respetar todo aquello. Estuve pensando también en actualizar los "emoticonos" por algún set de emojis más moderno pero resulta que es MUY pesado a nivel tipografía, así que de alguna forma debo actualizarlo pero no se si tan sólo reemplazar las imagenes actuales y listo.

¿Qué funciones extra sumarle? Ya que estoy renovando la casa quiero mejorar notablemente los perfiles de los usuarios que quedaron anticuados, que tengan un espacio más "propio" y desde allí puedo agregar mucho, también acepto ideas al respecto.

Se que varios querían que agregue suscripciones para los posteos, que les lleguen emails por cada comentario agregado a una discusión, es algo que ahora puedo hacer mejor ya que me puse a usar Mailgun para el blog (también voy a agregar uso de API de Sendgrid para ampliar las posibilidades) en la parte de registro y ¿Por qué no? usarlo para una suscripción o algo así.

Otros querían un mailing semanal con las notas que fueron saliendo, no quiero hacerlo EN el blog, eso es más para alguien en Mailchimp lo que me dice que no estaría mal agregar un form o algo para que se suscriban y dejar en automático un mailing de Mailchimp tomado del RSS ¿Lo usarían?

Así es la situación del blog que irá cambiando poco a poco porque lo hago en mis ratos libres (que son pocos) pero también porque para mi esto es como un gustito, un pequeño placer que me doy, un momento de relax y programación que me gusta y que, además, es algo que está totalmente expuesto a un uso real no teórico, sino bien práctico: ustedes.


Comentarios

  1. Ojalá te diviertas! La verdad hace rato que ni noto el diseño del blog. Las notas cortas las leo por RSS en Inoreader, y a las largas vengo al blog pero el diseño creo que ya ni lo noto. Con el tiempo me vuelvo un conservador en cuestiones de diseño, para mí con que sea legible, no muy recargado de porquerías, y mas o menos agradable a la vista, soy feliz.

    Citar »
  2. Para mi, como dice Coski, el minimalismo gana! Fijate de dejar todo a la mínima expresión (un cuadrado blanco con texto y listo!) :D

    Saludos

    Citar »
  3. Alejandro dijo:
    Para mi, como dice Coski, el minimalismo gana! Fijate de dejar todo a la mínima expresión (un cuadrado blanco con texto y listo!) :D

    Saludos


    y fijate que va un poco por ahí, igual hay ayudas visuales que me voy a dejar.

    lo que creo que vuelo son casi todos los botones de redes sociales, como que cada día me importan menos :P

    Citar »
  4. Hagas lo que hagas, conserva al Putin de la suerte :D

    Citar »
  5. No te atrevas a tocar el putin que es de "TODES"....

    Citar »
  6. Hay un framework css que se llama CHOTA que es muy a prueba de boludos y liviano, generalmente me mando con eso antes que bootstrap, me resulta más intuitivo. Quizá te interese darle una mirada

    Citar »
  7. Me gustó lo de suscripción a comentarios en un post. Pero podria ser que elijas un email cada vez que hay un comentario o (mejor) un resumen por DIA o por SEMANA si hay nuevos comentarios, sino es muy pesado.

    Yo, como te dije por Twitter, me hice una suscripcion por FeedBurner asi automaticamente recibo emails 1 vez por dia si subís algo, jeje!

    Citar »
  8. si lo tocan a putin...
    me gustaria que los comentarios citados tengan un color diferente, como ahora.
    esto ayudaria mucho en los celulares (varias veces vi citas tuyas de comentarios que citaban otros comentarios, era ilegible).
    ¿lo de la ip lo vas a ver vos no?

    Citar »
  9. matias herrero dijo:
    si lo tocan a putin...
    me gustaria que los comentarios citados tengan un color diferente, como ahora.
    esto ayudaria mucho en los celulares (varias veces vi citas tuyas de comentarios que citaban otros comentarios, era ilegible).
    ¿lo de la ip lo vas a ver vos no?


    si, lo de la ip es para admin solamente para cuando llegan spammers. los citados aparecen con un padding a la izquierda y rodeados como en el ejemplo, además de las comillas.



    Francisco Mosse dijo:
    Me gustó lo de suscripción a comentarios en un post. Pero podria ser que elijas un email cada vez que hay un comentario o (mejor) un resumen por DIA o por SEMANA si hay nuevos comentarios, sino es muy pesado.

    Yo, como te dije por Twitter, me hice una suscripcion por FeedBurner asi automaticamente recibo emails 1 vez por dia si subís algo, jeje!


    el tema con que te haga un resumen es que eso implica un sistema que no existe que entienda y guarde qué te envió antes y qué cambios hubo en todo un día, un cron revisando cada post de los 7500 por cada usuario. Un embole con poco retorno

    enviar un mail cada vez que dejan un comentario es un acto inmediato y fácil de hacer. Por eso sospecho que no sería muy útil.


    Arturo dijo:
    Hay un framework css que se llama CHOTA que es muy a prueba de boludos y liviano, generalmente me mando con eso antes que bootstrap, me resulta más intuitivo. Quizá te interese darle una mirada

    jajajajaja es un framework muy corto :P

    Citar »
  10. Si sirve de algo:
    * (casi) Todo el panel de la derecha me resulta innecesario. De ahí dejaría la publicidad que supongo no podemos evitar, los últimos comentarios y el dancing putin.
    * estaría bueno, no sé cómo, tener una alerta cuando un comentario responde sobre algo que dijimos. Eso hasta daría más vida a posts viejos.
    * Hay algúna razón de ser de que linksdv sea un sitio aparte?

    Citar »
  11. Dos cuestiones importantes: agregar el smiley del soretito! (???), y por sobre todo, Putín no se toca!

    Bue, y un poco mas en serio, yo sugeriría poner las encuestas en un lateral del blog, porque como que a no ser que entres directamente a esa sección, no te enterás que existe una encuesta (de paso, actualícela mas seguido, vió :P ).
    Lo de las notificaciones por las respuestas a un comentario me parece muy útil, porai alguien comenta un comentario de un post medianamente viejo, y andá a enterarte para responderle!
    La parte visual, a mi por lo menos, no me influye mucho. Yo considero que la gracia de un blog es el contenido, no que se vea lindo (no es que se vea feo, eh! ... ) ( ). Mientras que Putín siga ahí abajo (?), la estética es lo de menos.

    Pd. quedé escrachado en el screen de los comentarios, aawwww! ahora parece que fuera alguien importante!

    Citar »
  12. Cuando hiciste la consulta previa, que al final no sirvió de nada, recomendé que fueras más minimalista, me sacaste cagando al grito de YO NO SOY MINIMALISTA. Y ahora resulta que el señor esta minimalizando todo. GRRRRRRR

    Citar »
  13. Galmor dijo:
    Si sirve de algo:
    * (casi) Todo el panel de la derecha me resulta innecesario. De ahí dejaría la publicidad que supongo no podemos evitar, los últimos comentarios y el dancing putin.
    * estaría bueno, no sé cómo, tener una alerta cuando un comentario responde sobre algo que dijimos. Eso hasta daría más vida a posts viejos.
    * Hay algúna razón de ser de que linksdv sea un sitio aparte?


    Lo de la derecha se queda poque lo uso YO para administrar el sitio más rápido :P ver quién comentó, y todo eso
    Las alertas seguro las termino implementando de la forma más sencilla posible
    Y si, LinksDV es un sitio aparte porque no quiero que sea parte de mi blog, por ahí algún día lo cierro, pero no quiero mezclar dos proyectos separados que deberían vivir separados. Este es mi blog y no quiero las restricciones que te impone un link sharing, por eso lo separé

    Citar »
  14. Lo primero que mejoraría sería el sistema de comentarios. En esta época de feedback instantáneo, esto de que te citen o comenten "a lazo abierto" ya fue. También permitiría anidar comentarios más que solo citar. Disqus?

    Después, ya sabiendo que no querés, yo usaría un WP, que te soluciona un montón de temas. La falta de flexibilidad en el caso de tu blog no creo que sea un tema, además hoy WP tiene plugins para todo, y no es difícil hacer el que te venga bien. También soluciona la compatibilidad con celulares. Pero como los comentarios a cargo de FB, sé que no te gusta. (Y sería un parto hacer la conversión de notas y comentarios. Seguro se puede, pero no tengo dudas que sería un parto)

    Putin se tiene que quedar, ya es una marca registrada.

    En el cuerpo central a mi me gusta el font y el tamaño. Es bien legible y tiene ancho suficiente para las imágenes. Por ahi algo del CSS para los datos (fecha, visto, etc), pero está bien.

    En la columna derecha hay que dejar la publicidad para que puedas viajar Guiño, el buscador es funcional, el tag board y "otras secciones" no tienen uso, al igual que los enlazados, y para mi lo más leído y lo más comentado solo ocupa espacio. La encuesta podría mostrarte los resultados en la misma página, sin sacarte. Los temas los pondría en un dropdown para que no sean un chorizo enorme.

    El bootstrap te soluciona el diseño responsive, es bastante intuitivo para maquetarlo.

    De cualquier forma, los que estamos acá no venimos por el diseño sino por el contenido.

    Citar »
  15. En hora buena!

    Si necesitás manos, por poco tiempo, te puedo ayudar. No dudes en mandarme un email.

    Yo también no soy muy adepto al diseño gráfico, y si bien dos monos no hacen a un neandertal, capaz que algo sacamo´

    Citar »
  16. No entiendo la teoría, pero en las capturas se ve bien la cosa.

    Citar »
  17. Hugo dijo:
    Lo primero que mejoraría sería el sistema de comentarios. En esta época de feedback instantáneo, esto de que te citen o comenten "a lazo abierto" ya fue. También permitiría anidar comentarios más que solo citar. Disqus?


    Mencionar Disqus está a la altura de mencionar FB para los comentarios, es un no universal, eterno, inconmensurable, jamás le daré el control de los comentarios del blog a ninguna plataforma, jamás.

    Analicé el tema de citar suelto o encadenar como en otros sitios más "foro" pero como en los últimos años ya no se dan esos posteos tipo thread de 200 comentarios ¿Vale la pena? A esta altura no creo que se justifique el desarrollo pero por eso, no porque no sea útil. No se, pensemos eso mejor si tiene sentido.


    Después, ya sabiendo que no querés, yo usaría un WP, que te soluciona un montón de temas. La falta de flexibilidad en el caso de tu blog no creo que sea un tema, además hoy WP tiene plugins para todo, y no es difícil hacer el que te venga bien. También soluciona la compatibilidad con celulares. Pero como los comentarios a cargo de FB, sé que no te gusta. (Y sería un parto hacer la conversión de notas y comentarios. Seguro se puede, pero no tengo dudas que sería un parto)


    El tema es que no pienso migrar NADA a WP, lo uso para mis clientes y para sitios nuevos que hago pero considerando la enorme cantidad de contenido que tengo aquí con el plus de que haber programado esto me enseñó muchísimo ¿Por el bién de qué o quién habría de cambiarlo? No me satisface para nada cómo está hecho WP y los recursos que requiere (mi blog se banca entre 5 y 6 veces más tráfico que el de WP, tiene un peso en CPU y memoria muy inferior, aunque parezca loco está mejor optimizado)

    No tengo problema de compatiblidad con celulares, menos si estoy armando un theme responsive, así que en ese sentido me la soba WP :P lo de FB ya te dije... ni lo menciones, jejej, menos FB! por dió! justo FB!


    Putin se tiene que quedar, ya es una marca registrada.


    Obvvvveo


    En el cuerpo central a mi me gusta el font y el tamaño. Es bien legible y tiene ancho suficiente para las imágenes. Por ahi algo del CSS para los datos (fecha, visto, etc), pero está bien.


    Eso, como se ve en el ejemplo, está más o menos claro y bien diferenciado, sí se aumenta un poco el ancho porque este ya quedó "angosto", pero no es una exageración tampoco.


    En la columna derecha hay que dejar la publicidad para que puedas viajar Guiño, el buscador es funcional, el tag board y "otras secciones" no tienen uso, al igual que los enlazados, y para mi lo más leído y lo más comentado solo ocupa espacio. La encuesta podría mostrarte los resultados en la misma página, sin sacarte. Los temas los pondría en un dropdown para que no sean un chorizo enorme.


    Casi todo lo que son otras secciones fue a parar al menú con dropdown en el header, yo mismo fui sacando sección por sección y varias van a desaparecer por obsoletas. El Tag Board vuela porque ya nadie lo usa, los enlazados son capricho mío y lo incluiré, al igual que los más leídos/comentados porque, como dije antes, lo uso yo para administrar (me da paja entrar a otro lado para ver cosas así :P) pero sí, se simplifica bastante el menú hasta lo voy a angostar mucho.


    El bootstrap te soluciona el diseño responsive, es bastante intuitivo para maquetarlo.


    Y si, por eso lo estoy usando, aunque no sea del todo de mi agrado (tiene muchas cosas que no voy a usar y pesan en la descarga de la página)


    De cualquier forma, los que estamos acá no venimos por el diseño sino por el contenido.


    Si, bueno, eso supongo, si se bancaron el mismo diseño durante diez años o más... :D



    Lelale dijo:
    En hora buena!

    Si necesitás manos, por poco tiempo, te puedo ayudar. No dudes en mandarme un email.

    Yo también no soy muy adepto al diseño gráfico, y si bien dos monos no hacen a un neandertal, capaz que algo sacamo´


    nah, creo que voy a hacerlo todo yo salvo que alguna cosa explote :D gracias!

    Citar »
  18. A mi no me gustan los títulos en mayúsculas, como en Tecnogeek.
    Es una boludez, pero bueno... ya que preguntaste...

    Citar »
  19. Estaba pensando lo mismo, sin el Putin de la suerte, el blog morira por tristeza! :D, exitos con lo que hagas, si te lleva mucho tiempo, no me cambies la rula de los jueves (y menos la de las minitas en bolas) saludos cordiales!
    Mariano Rodriguez dijo:
    Hagas lo que hagas, conserva al Putin de la suerte :D

    Citar »
  20. El Polaco dijo:
    Estaba pensando lo mismo, sin el Putin de la suerte, el blog morira por tristeza! :D, exitos con lo que hagas, si te lleva mucho tiempo, no me cambies la rula de los jueves (y menos la de las minitas en bolas) saludos cordiales!
    Mariano Rodriguez dijo:
    Hagas lo que hagas, conserva al Putin de la suerte :D


    la rula sigue ahí, es un cambio de diseño, no de contenido :P


    Pablo Ariel Vicente dijo:
    A mi no me gustan los títulos en mayúsculas, como en Tecnogeek.
    Es una boludez, pero bueno... ya que preguntaste...


    esos creo que yo mismo los voy a cambiar, nunca me cerró del todo, venía con el diseño que usé, pero meh

    Citar »
  21. Ya lo dije y lo vuelvo a hacer, las "notas relacionadas", el div tiene que ser un solo botón imagen y texto.
    Lo cuadrado, ponelo redondo y listo.

    Citar »
  22. Hormiga dijo:
    Ya lo dije y lo vuelvo a hacer, las "notas relacionadas", el div tiene que ser un solo botón imagen y texto.
    Lo cuadrado, ponelo redondo y listo.


    y dónde querés el texto? por encima de la imagen? dame el CSS y listo, cuando esté publicada la V1 de este diseño podrán aportar el CSS que arregle todo lo que no quede perfecto. así dejan de quejarse por esas nimiedades :P

    Citar »
  23. Mariano Rodriguez dijo:
    Hagas lo que hagas, conserva al Putin de la suerte :D

    Por favor!!

    Citar »
  24. Sumo un pedido:
    En los posts tipo Chinada o Bad Tatoo estaría bueno poder comentar sobre una imagen en particular.
    Yo cavernícola lo haría con tablas, pero bueno, seguro que hay algo más light y reutilizable con feeling new age.

    Fabio Baccaglioni dijo:
    jamás le daré el control de los comentarios del blog a ninguna plataforma, jamás.
    Gracias. En serio, gracias.

    Citar »
  25. Fabio Baccaglioni dijo:
    Analicé el tema de citar suelto o encadenar como en otros sitios más "foro" pero como en los últimos años ya no se dan esos posteos tipo thread de 200 comentarios ¿Vale la pena? A esta altura no creo que se justifique el desarrollo pero por eso, no porque no sea útil. No se, pensemos eso mejor si tiene sentido.
    En Enlace parece que el anidamiento de citas no ha muerto.

    Citar »
  26. Galmor dijo:
    Sumo un pedido:
    En los posts tipo Chinada o Bad Tatoo estaría bueno poder comentar sobre una imagen en particular.
    Yo cavernícola lo haría con tablas, pero bueno, seguro que hay algo más light y reutilizable con feeling new age.

    Fabio Baccaglioni dijo:
    jamás le daré el control de los comentarios del blog a ninguna plataforma, jamás.
    Gracias. En serio, gracias.


    ni en pedo! demasiado laburo para algo tan simple, podés copypastear la url de la que te gustó, Danbat hace eso, considerando que el promedio de comentarios bajó tanto es demasiado esfuerzo. Vi varias implementaciones copadas que permitían dejar comentarios en medio del texto, pero son ilegibles.

    Igualmente siempre podés incrustar la foto en el comentario (eso ya se puede hacer) lo que no es difícil usando el fucking click derecho "copiar dirección de imagen" y listo, ya tenés la url, usás el tag de imagen en el form y sale como piña Guiño

    Galmor dijo:
    Fabio Baccaglioni dijo:
    Analicé el tema de citar suelto o encadenar como en otros sitios más "foro" pero como en los últimos años ya no se dan esos posteos tipo thread de 200 comentarios ¿Vale la pena? A esta altura no creo que se justifique el desarrollo pero por eso, no porque no sea útil. No se, pensemos eso mejor si tiene sentido.
    En Enlace parece que el anidamiento de citas no ha muerto.


    si, uno de cada cien posteos, pero lo bueno es que el sistema actual permite que en un sólo comentario se atiendan mil temas, en uno de respuesta por comentario sería interminable. Lo tengo que analizar, para mi no vale la pena el esfuerzo pero... quien sabe...

    Citar »

Deje su comentario:

(comentarios ofensivos o que no hagan al enriquecimiento del post serán borrados/editados por el administrador sin previo aviso)

Security Image

Negrita Cursiva Imagen Enlace

Guardar los datos: Si / No