Pulido en las botoneras, textos e imágenes

JottaHeisenberg commented 12 years ago

Hola,

he estado estudiando la web con AdobeBrowserLab para ver como queda en todos los navegadores y he visto algunas cosas que se podrían pulir, corregir el alineado en algunos textos y botones y mejorar algun pequeño gráfico. Os pido permiso para poder intervenir de forma general en estas cosas sin necesidad de una aprovación por cada cosa que vaya a hacer, porque esperar una semana por algo que puedo hacer en 5 min., al final se vuelve un poco desesperante. Es evidente que estamos aqui para mejorar la plataforma, asi que todo cambio creo que es para ir a mejor.

Los cambios más destacados serían estos:

Mejora global en los botones de la web. He visto que algunos botones no tienen el texto debidamente centrado en el botón, y algunos me parecen excesivamente grandes. Me gustan mucho los botones de esta web 'GITHUB', me parece que tienen un acabado bastate limpio y podría hacerlos igual para VP, evidentemente respetando nuestro color, que es el azul.
Iconos de los coordinadores, moderadores, etc. Me refiero a los iconos que aparecen al lado de los ciudadanos que tienen un cargo. Son muy 'Windows 98' :-). Que no digo que estén mal, pero se podría usar algo más 2.0.
Tamaño de la fuente. El tamaño es irregular dependiendo de la página, en alguna el cuerpo del texto está a 14px, en otras a 16px. Me gustaría ir corriegiendo esto y dejar 14px como tamaño estándar de la web, que creo que es lo suficientemente grande como para que lo lea una persona mayor. Para mi gusto incluso hasta demasiado.
Pestañas de la parte superior derecha. A mi ya me pasó, y por lo que me ha contado varias personas también. Pasan un poco desapercibidas. En mi caso me ocurrió cuando entré en 'Mensajes privados' y por defecto te muestra bandeja de entrada. Para ir a mensajes enviados debes acudir a dichas pestañas, y como no las veía pensaba que no había forma de ver los mensajes enviados. La única opción si no se quisieran cambiar de lugar seria destacarlas en azul por ejemplo. Aunque esto de momento no corre prisa.

Lo comentado anteriormente sería lo más vistoso, lo demás serían cambios mínimos e inapreciables, seguramente de alineación. Lo siento, pero es que para mí, 1 pixel movido a la izquierda es una noche sin dormir :-) .

JottaHeisenberg commented 12 years ago

Perdón por el texto gigante. He usado almohadillas para definir cada punto y no sabía que eran para eso :-/

EDITO: Vale ya lo he editado. Tampoco sabia que se podia editar el texto.

JavierGonzalez commented 12 years ago

Hola Jotta. Buen trabajo. Te respondo por puntos

Los botones son nuevos desde hace 2 semanas, vinieron el nuevo diseño. Es el sistema de botones de la libreria kickstart, el cual es genial. Permite configurar 3 tamaños muy facilmente, y unos 8 estilos de diseño, a parte de un monton de colores con un acabado perfecto. Si se ve mal con algun navegador, la cosa es arreglarlo. Y quiza se puede mejorar un poco mas alguna cosa de diseño.
Los iconos de los cargos son 16x16, y tienen que verse bien a este tamaño porque van en el chat. En cada linea. Esto es muy importante, esta caracteristica del chat es crucial. Luego sobre su forma... tambien es la adecuada. Estrella: Poder Ejecutivo, Circulos poder Legislativo y triangulo poder Judicial. Esto tambien es importante, en 15M no se usa asi... pero en el resto de plataformas si, y es importante esta organizacion. Me preocupa mucho más todos estos aspectos prácticos la belleza de los iconos.
La irregularidad del tamaño de la fuente en algunas paginas... no es intencionado. Es un error, bien visto. Cuando podamos hay que arreglarlo. Sobre el tamaño estandar... habrá que probarlo antes a ver como queda y consultarlo con los usuarios para asegurarnos de elegir el tamaño adecuado. La web en general está diseñada para poder contener tamaños grandes, asi que creo que tenemos margen para elegir.
Sobre las pestañas... si te fijas todas las pestañas son opciones secundarias. No llevan a paginas prioritarias ni habituales. Su uso es muy marginal. Creo que tienen la visibilidad exacta. Esto si es intencionado. Quiza podriamos destacar alguna... aunque no se si estas de acuerdo conmigo en que ninguna pestaña es vital para la mayoria de usuarios. Básicamente es "crear examen, crear docuement" cosas que no solo son secundarias... si no que interesa que no resalten demasiado. No queremos que cualquier despistado crée un documento (hemos comprobado que si se pone muy facil la gente crea y toca cosas sin saber). Lo de crear votacion es un buen ejemplo, esta en una pestaña. Si se le diese más visibilidad... aumentaria el numero de votaciones absurdas/poco reflexionadas/impulsivas. :D

Sobre el pixel descuadrado... para mi tambien lo es. Espero que lo hayas notado. Aunque habrás visto algunos descuadres y cosas raras... es que el sistema web es realmente extenso. Es extensisimo.

Un saludo!

JottaHeisenberg commented 12 years ago

Cuando digo pulir me refiero exactamente a eso, mejorar el codigo css del botón que ya existe.
Por supuesto, lo primero es que se vean bien, y para ello hay que cuidar cada pixel. Déjame que haga 3 iconos y vemos como quedan. Si molan seguimos adelante con el resto.
Básicamente me refería a guardar una relación y estética global en cuanto a los tamaños y colores del texto. Por ejemplo, los títulos siempre a 18px, el cuerpo estandar de la web a 14px, los botones a 12px... y que así sea en toda la web. Normalmente cuando los textos son mas grandes de 14px tambien se hace muy pesada la lectura. Este texto que esta leyendo esta a 13px, asi que un punto más creo que es suficiente para el cuerpo. Lo demás se calcula a partir de éste.
Vale, en esto estoy de acuerdo.

Si quisiera hacer alguna corrección en cuanto a CSS tendría que pasarte los cambios para que los pruebes primero en local? O como hacemos.

JottaHeisenberg commented 12 years ago

Este sería un ejemplo de los iconos en los que habia pensado. De momento me he centrado solo en los de 15M que no son muchos. http://jotta.es/tmp/vp-icons.png

En ese ejemplo podemos destacar los cargos de moderador, difusión, redactor y supervisor.

Siguiendo la linea de la web que es muy minimalista, creo que lo que más le pega son iconos a un solo color, en este caso el azul corporativo, y de paso evitamos que ningun cargo resalte sobre otro, al fin y al cabo, en VirtualPol todos somos iguales :-)

carlosmelga commented 12 years ago

Todos somos iguales, pero en las plataformas de "País", hay muchos cargos que se necesitan diferenciar, como diputado y presidente del parlamento, ahora están el primero una medalla dorada con ribete verde y el segundo medalla dorada con ribete rojo, denotando el rojo superioridad sobre el verde, y este sobre el azul en algunos casos. A no ser que se le ponga algo para diferenciarlos en el nuevo diseño, creo que sería mejor dejarlos ahora como están, los de la librería FamFamFam

Kronossf commented 12 years ago

Están bien los iconos, también se puede considerar el color azul ese que sea un rango y otros colores que sean de cargos especializados o específicos. Vamos a proponerlos a votación si no hay inconveniente...

Hay inconveniente? lo digo porque en coordinación hemos quedado que sería bueno votarlos.

JavierGonzalez commented 12 years ago

Tecnicamente no hay problema en añadir más iconos.... siempre que no se nos vaya la olla :) Digamos que añadir unos 20 nuevos iconos... pues es viable.

La gama de iconos actual se puede ver "como quedaría" aqui: http://15m.virtualpol.com/cargos/editar (abajo)

Pero los iconos actuales deben persistir. Si o si. Son bonitos y vistosos. Coloridos. Y sobre todo la gente se los conoce y los usa por sus distintivos (circulos = legislativo, estrellas = ejecutivo, triangulos = judicial). Esto es un exito organizativo que no podemos perder.

Y luego me preocupa lo pobres que quedan los iconos en monocromo. Sinceramente. Pero esto es algo subjetivo y tiene sentido someterlo a votación, si realmente lo considerais relevante.

Pero si esto sucede, debe quedar claro que es una excepcion. De hecho no lo recomiendo. La separación Desarrollo | Gestión no es por capricho. Es porque a lo largo de 3 años y medio experimentando en la practica... ha habido conflicto tras conflicto. Y si el proyecto hoy dia existe, es solo porque he dirigido el desarrollo con mano de hierro, sin inmiscuirme en gestión. De lo contrario se habria destruido por completo a todos los niveles. Es una cuestion esencial. De vida o muerte comprender y respetar la importancia de la separación Desarrollo | Gestion. No en vano, está inscrito y aceptado por todos en el TOS, y es uno de los principios.

El desarrollo no es ni puede ser democrático.

Un saludo.

Kronossf commented 12 years ago

Hey, que a mi me gustan los iconos actuales... yo me conformaba con cambiar la chapa de coordinación... a mi me mola que se vea colorido :D

JottaHeisenberg commented 12 years ago

Yo solo lo decía por darle un toque más serio y profesional al asunto, pero tambien se puede hacer en colores.

No sometais nada a votación por el momento. Voy a probar otra cosa.

JavierGonzalez / POL

Pulido en las botoneras, textos e imágenes #38