Rediseñando Barrapunto: Parte 2

Estuve trabajando en el sitio de barrapunto que estoy rediseñando, para que puedan apreciar más de lo que han visto online, en base a la primera página hice 2 páginas más con algunos detalles que también se encuentran en la página de inicio.

Antes de comentar algo, les quería contar que el ejemplo anterior tenía 2 columnas, y ese es un problema gigante para barrapunto ya que posee una cantidad de módulos increíble, en mi ejemplo he distribuído unos cuantos módulos a cada lado de modo que todo queda ahora en 3 columnas, esto hace que el método utilizado me oblique a poner en orden líneal todos los módulos que van a los lados y a lo último quede el módulo de notas, de forma que la página no quede tan blanca y sea tan larga, es solo una consideración.

En este post me quiero focalizar en las nuevas páginas: Cuerpo de nota y Comentar un comentario, ambas tienen un par de clases más y estructuralmente está optimizado, utiliza tablas únicamente para las zonas indicadas, como formularios, también los comentarios van ajustados y en forma con la barra de la derecha, de modo que con unas simples divs se pudieron estructurar todos los comentarios. He cambiado las listas ul por listas ol, son mejores para enumerar y diferenciar entre los hilos de mensajes.

También aprovechando la estructura de listas numeradas dentro de una lista, puede haber una estructura con mensaje completo, y todo esto sin tener que hacer virguerías con las tablas y las celdas, todo esto es puro código y semántica.

Cáda página pesa “nada” comparada con las páginas actuales en barrapunto, por ejemplo la página de inicio pesa 34 Kb, la del cuerpo de nota con comentarios ha pesado 24 Kb y la de comentar un comentario solo 13 KB, para que puedan tener una idea… sumen un 120% más para equiparar a una de barrapunto, aparte de ahorrar tiempo cuando tengan que recargar módulos, plantillas de CSS, imágenes (solo 5 imágenes se han utilizado), sin dudas mejoras por todos lados.

Con estas tres plantillas termino mi trabajo, así de esta forma queda aplicar lo hecho al resto del sitio y hacer re-ajustes menores.

13 Respuestas a la entrada “Rediseñando Barrapunto: Parte 2”

Ya puestos, un cambio de colores(a la original de barrapunto) no le iría mal así como los iconos de las categorías.

Eso que lo decidan ellos. Yo me limito a ayudarles a la nueva estructura.

Con respecto a lo que decis sobre las tres columnas (teniendo en cuenta que todavia no vi el codigo) no podias usar el template de 3 columnas de ¿Blue Robot? que usa position para ubicar las columnas dejando el contenido primero.

Escrito por Rigolox
enero 7th, 2004 at 12:27 pm

Hola, buenos días!!

Los ejemplos de cuerpo de nota y comentar un comentario, funciona bien en Mozilla, Netscape y Konqueror, sin embargo en IE y Opera, se le va la olla, sobre todo en IE.

Debajo de:
Y no hay version para C++(Puntos:3, Interesante

En IE, aparece bastante blanco y en Opera aparece bastante gris, que es el color de fondo de ese trozo.

Voy a mirar el código haber porque puede ser, y si lo encuentro de lo digo.

SALU2

Si en IE se despitas totalmente, creo que eso lo ocasiona un clear: lo estoy puliendo poco a poco.

Para probar otras tendría que hacer un duplicado, luego cambiar el XHTML al modelo que se adapta de Blue Robot que no me gustan nada, tanto como los de Glish.

no me cabe duda que haras grandes mejoras, de hecho cuando lei la noticia la primera vez me alegre mucho, a ese sitio le hace falta una mano como la tuya

Genial, minid! Esta misma noche me pongo a integrar ese código en las plantillas de la versión en desarrollo. En cuanto tenga máquina donde poner la maqueta, lo muestro para que todo el mundo pueda verlo y comentarlo.

Bueno, pues he estado estudiando el asunto y, pese al magnífico trabajo de mini-d, la verdad es que se requiere un approach diferente a la cuestión. Veamos, no conviene partir del output final, es decir, de la página html tal y como se recibe en el navegador y entonces depurarla, que es como lo ha hecho mini-d y como también lo hicieron en a list apart. Este método sirve de poco por la particular arquitectura de slash y no es un trabajo que sea luego reutilizable para incorporarlo a cualquier sitio que use slashcode, que yo creo que sería lo interesante.

Para que sea útil ese trabajo, hay que tener en cuenta la arquitectura de slash, dado que los “servlets” y módulos de slash llaman a las plantillas con el html de una forma determinada, y meter ese código a partir del html es algo así como hacer “ingeniería inversa”. Por lo tanto, hay que reestructurar el código y hacer todos los cambios en las propias plantillas de slash (¡hay más de 300!). Y el método correcto para ello es crear un nuevo “theme”. El “theme” no solo incluirá las plantillas modificadas (también las de los plugins), sino algunos parches que hay que aplicar sobre los módulos perl de slash y sobre los “servlets” (los ficheros “.pl”). Todo ello hará que sea (relativamente) fácil de incorporar no solo a barrapunto sino a cualquier otro slashsite, y que incluso lo acaben incorporando en la rama oficial de slash.

La tarea es delicada y bastante compleja, por eso nadie la ha completado hasta ahora, que yo sepa solo ha habido un acercamiento correcto a la cuestión y por suerte ya muy avanzado: es el tema que hizo Peter Winnberg hace unos meses para openflows.

En resumen y para no enrollarme más de la cuenta: quien quiera colaborar en esto y que su trabajo sea realmente aprovechable, debe bajarse el tema de Peter del CVS de openflows (instrucciones para hacerlo) y trabajar sobre las plantillas (están todas en el directorio “strict/strict/templates”). Si alguien tiene problemas para descargárselo del CVS, que me lo diga (yonderboy at barrapunto dot com) y le envío el tarball.

Yo lo he probado en mi maqueta, he actualizado los parches en las librerías de la última R_ (pues los que incluye peter son para una versión algo más antigua) y funciona bastante bien. Hay algunos bugs pero no parecen demasiado complicados de resolver. Es un muy buen punto de partida.

Por desgracia, no dispongo ahora de una máquina conectada a Internet donde todos podamos ver la maqueta (las de barrapunto están todas ocupadas con otros proyectos, e interferirían entre sí las distintas versiones de slash), testearla y trabajar sobre ella. Si alguien dispone de un servidor con IP pública donde alojar una maqueta de barrapunto y donde implementar todas estas pruebas, nos ayudaría mucho :-) No requiere que sea muy potente, ni mucho ancho de banda, dado que es solo para hacer las pruebas.

Yonder, la estructura está preparada para “modularizar” creo que muchos ejemplos encajarían perfectamente en cada servlet.

Este fin de semana, quiero ver como puedo ver el tema de comenzar a aplicar las cosas, aprender a bajar el código con el CVS y dejarlo funcional.

Buenas…

Tengo un dominio con espacio web que actualmente está más o menos desocupado. (www.pandoramusic.info) Tiene soporte para PHP, ASP, etc… lo único que no tengo es MySQL (sólo Access)… Pero si tenéis un servidor aparte que os pueda proveer el MySQL para las pruebas, perfecto.

Así que si queréis, poneos en contacto conmigo, me pasáis los archivos y los subo al servidor.

Enga, un saludo.

– Wayfarer

Gracias Wayfarer, pero hace falta algo más que copiar los scripts: se necesita una muy particular configuración de Apache –hace un uso intensivo de perl– y también modperl. Además, son necesarios un montón de modulos perl de CPAN. Y, sobre todo, se necesita un sistema operativo GNU/Linux (deduzco de lo que tienes que tu sistema operativo es propietario).

No es nada trivial instalar slash (no es el típico phpnuke, slash tiene una impresionante API con muchas librerías propias), a no ser que lo tengas todo debidamente empaquetado (como es mi caso). Por eso, lo mejor sería una máquina Linux con Debian, donde no se interfiera con ninguna otra cosa y donde sea posible instalar rápidamente los paquetes necesarios, con dependencias resueltas.

De todos modos, reitero mi agradecimiento por el ofrecimiento :)

Yonderboy, cheka el email, tengo lo que te hace falta, y capas te sirve, root access y todo eso mano, saludos.