AdminWiki/Grafismo

De Experimenta_wiki

Esta página está pensada para orientar el trabajo en el aspecto visual de Experimenta_wiki.

Tabla de contenidos

Imágenes y elementos gráficos

Cualquier aportación profesional o voluntaria de elementos gráficos tendría que seguir la política de copyright respecto a las imágenes para no romper la dinámica del proyecto. Esto significa que el autor de los gráficos tiene que cederlos bajo una licencia libre (recomendadas: GFDL, CC-by, CC-by-sa). También que no pueden usarse gráficos ajenos que no tengan una licencia libre que permita crear obras derivadas.

Formatos

  • SVG: para elementos gráficos que haya que usar mucho y hacer variaciones o combinar mejor tenerlos en formato vectorial (SVG) para luego adaptar a bitmap con la resolución y formato que haga falta. Ahora no se pueden subir SVG al wiki pero vamos a intentar que se pueda (como en Wikicommons).
  • XCF: para archivos bitmap con capas para editar estaría bien disponer de ellos en formato XCF para que se puedan abrir en Gimp.
  • PNG: usarlo para gráficos de colores planos, gráficos con colores muy similares que se puedan indexar y gráficos que tengan que tener fondo transparente.
  • JPEG: usar para fotos y gráficos similares (de "tono contínuo").

Ilustraciones Vs Iconos

Se tratarán de forma distinta...

  1. las fotos, diagramas e ilustraciones...
  2. de lo que son iconos, gráficos que identifican secciones, "botones" y elementos gráficos vinculados al entorno de trabajo y navegación

En los primeros (Ilustraciones y afines) al clicar sobre ellos se abrirá su página de imagen (opción por defecto para las imágenes en Mediawiki).

En los segundos (Iconos y afines) al clicar no tiene que pasar nada. Para ello los iconos tienen que incluirse en la página como fondo de algún elemento a través de CSS. Hay también otras estrategias posibles a considerar: Convertir imágenes en enlaces, Mapa de imagen y [1], ...

Listado de gráficos usados

Las imágenes cargadas para uso en interfaces y similares se agrupan en la Categoría:Gráficos interfaz y ayuda.

Control gráfico por CSS

Principios a seguir:

  • en la medida de lo posible de dejará el control de la apariencia visual en manos de las 'hojas de estilo (CSS)
  • en la medida de lo posible se intentará que el usuario no se tenga que enfrentar a código HTML por lo que los identificadores y clases estarán dentro de plantillas o similares
  • en la medida de lo posible basarse en CSS-1. Para usar CSS-2 comprobar que las propiedades estén soportadas por la mayoría de navegadores. En caso de usar propiedades no soportadas (por ejemplo pseudoclases fuera de <a>) vigilar que no afecten a la accesibilidad. Garantizar que siempre haya la opción de tener un funcionamiento óptimo usando un navegador de software libre y multiplataforma (tomamos Firefox como referencia).

Tenemos varias posibilidades para definir CSS:

  1. MediaWiki:Common.css: una página del wiki que pueden editar los usuarios con privilegios de administrador en la que pueden definirse propiedades CSS comunes a todas las Skins. Se usará para controlar la apariencia de los contenidos DENTRO de las páginas.
  2. Skins: en la carpeta "skins" del servidor hay varios "temas gráficos" con sus hojas de estilo. La "skin" por defecto que usamos es "monobook". Se puede crear una nueva "skin" basada en "monobook" para hacer cambios en el aspecto del entorno de trabajo del wiki (menú lateral, pestañas, etc...). Dentro de "skins" está la carpeta "skins/common/images/" en la que hay los gráficos comunes a todas las "skins", incluido el logo y la imagen de fondo.
  3. CSS de las extensiones: algunas de las extensiones que hemos incorporado tienen sus propios archivos CSS. Todas las extensiones están dentro de la carpeta "extensions" en el servidor.
  4. Style: es un parámetro de los elementos de HTML que puede usarse para definir sus propiedades CSS. Por ejemplo: <div style="font-size:130%">Hola</div>. En la fase de pruebas se usa ámpliamente dentro de páginas y plantillas pero la idea es sustituirlo por el uso de Common.css.

Entorno Experimenta_wiki

El aspecto actual está definido por la Skin por defecto "Monobook".

  • Yo (--Dvdgmz 19:33 15 abr 2008 (CEST)) no usaría otra skin como base porqué esta es la más depurada de errores. En caso de crear una nueva basarse en esta. Una referencia útil puede ser: MW gallery user styles
  • En caso de crear una nueva Skin combiene no modificar mucho el entorno de trabajo. Queremos que Experimenta_wiki sea un peldaño hacia Wikipedia y otros proyectos similares y también a la inversa (de estos proyectos a Experimenta_wiki). Combiene que aunque haya cambios gráficos los usuarios (algunos estudiantes menores de edad) reconozcan el entorno de trabajo. Cualquier cambio significativo en elementos de navegación y edición implica también cambiar la información de Ayuda. No cambiaría por ejemplo la ubicación del menú lateral y de las pestañas de edición, historial,etc...
    • Las características básicas del entorno Monobook en MW son:
      • gráfico/logo en la esquina superior-izquierda
      • botones/pestaña sobre el contenido
      • menú lateral izquierdo
      • gran área para el contenido
  • En caso de crear una nueva Skin aplicarla primero en una versión testing del wiki y comprobarla a fondo. Muchas nuevas skins tienen fallos o problemas de visualización porqué no se han previsto todas las opciones.

Qué se puede hacer

  • Decidir una línea gráfica general del wiki a aplicar en el entorno de trabajo y dentro de las páginas (portada, fichas, formularios, etc...)
  • Cambiar el logo y/o imagen de fondo
  • Cambiar iconos
  • Cambiar colores
  • Cambiar grueso de líneas
  • Cambiar aspecto/tamaño de texto
  • ¿...?

Portada

Estructura

Ahora mismo tiene 3 partes:

  • Cabecera de bienvenida con un texto explicativo
  • Columna izquierda (principal) con información de los experimentos y sobre contenidos libres
    • Hay un experimento destacado y después una lista de otros experimentos, acaba en un enlace para consultar todos los experimentos
  • Columna derecha (más estrecha) con orientaciones e información sobre como colaborar.
    • Se da acceso al formulario para añadir un experimento, se muestran peticiones de colaboración y experimentos por validar
    • "Añadir_experimento" se ha destacado (ahora directamente con style
    • Para la lista de peticiones se usa la petición #ask de SMW y se controla el aspecto a través de Plantilla:Lista Peticiones. Para que no salga una lista enorme en esta columna la lista está dentro de un "div" con "overflow: auto" (de momento mediante style.
    • Para la lista de experimentos no validados aún no se ha creado una plantilla para el aspecto visual. PENDIENTE.

Qué se puede hacer

  • Revisar "editorialmente" el conjunto de la estructura de la portada y hacer cambios si cabe.
  • Cabecera:
    • Revisar aspecto visual, líneas, textos, etc...
    • Igual se puede introducir algún elemento gráfico; podría estar a la derecha, junto al texto
  • Columna derecha
    • Revisar el conjunto de la columna, aspecto visual general, textos, jerarquía de contenidos
    • Revisar experimento destacado (posibles cambios en plantilla) y lista experimentos (lo mismo)
  • Columna izquierda
    • ¿Incluir ahí un pequeño destacado anunciando esta edicón de la Feria?
    • Revisar el conjunto de la columna, aspecto visual general, textos, jerarquía de contenidos
    • Hay un gráfico con una encajada de manos para "representar" la "colaboración". Revisar si se quiere mantener o sustituir. Si mantener esta metáfora u otra. El gráfico debería ser el mismo en los Formularios y las Fichas.

Formularios

Los principales formularios que usarán los usuarios de Experimenta_wiki son:

Buena parte del aspecto de las fichas se controla desde MediaWiki:Common.css en su sección /* **** ESTILOS PARA LOS FORMULARIOS DE ENTRADA DE DATOS **** */.

Aún hay cosas que se controlan mediante "style" que deberían pasar a controlarse desde MediaWiki:Common.css.

¿Cómo funcionan los formularios?

Usamos la extensión Semantic Forms.

Los formularios toman los "campos" de una o varias plantillas de Mediawiki. Una vez guardado el formulario lo que aparecerá en la nueva página es la plantilla rellenada.

Control visual:

  • El control visual del formulario se hace en la propia página del formulario
  • El control visual de la página creada o editada mediante el formulario se hace a través de las plantillas.

Formularios de Experimento

En las fichas usamos varias plantillas y el formulario para editarlas las llama a todas. Lo hacemos porqué algunas plantillas (como los "pasos de desarrollo" o las "referencias") tienen que ser llamadas recursivamente por el usuario. La consecuencia es que:

  • La ficha no puede ser controlada en su conjunto, es un "collage" de plantillas
  • Necesitamos plantillas que no tienen campos para rellenar pero que actúan como titulares o elementos de maquetación

Tenemos 3 formularios para experimentos porqué es algo distinto crear uno nuevo, crear una variante de uno existente o editar uno existente. Aprovechamos que tenemos 3 formularios distintos para diferenciarlos visualmente para que el usuario no tenga dudas.

Qué se puede hacer

Formularios de experimento

  • Revisar y si cabe modificar su maquetación y estructura
  • Revisar la diferenciación entre los 3 formularios, mantenerla pero igual cambiando el aspecto gráfico y colores actuales en función de la línea gráfica general
  • Intentar compactar al máximo los formularios. Ahora son formularios muy largos, igual hay soluciones mejores de maquetación. Otra opción sería usar pestañas (DATOS INFORMATIVOS, DESARROLLO, REFERENCIAS, ANTES DE GUARDAR) pero para ello sería necesaria una extensión extra que deberíamos probar antes en testing (Header Tabs o bien metacaixa).
  • Buscar la forma de identificar claramente cada campo y diferenciarlo de los demás. Esto puede hacerse a través de la disposición y del color. También con elementos gráficos. Ahora mismo se hace con unos iconos (tomados de la colección Nuvola) en el fondo del campo de texto. Pero estos iconos son metáforas algo burdas del contenido a insertar, mejor buscar otras opciones.
  • Diferenciar bien las partes del formulario. Básicamente hay unas partes de CONTENIDOS (que se puede diferenciar en "Datos informativos", "Desarrollo" y "Referencias") y unas partes relacionadas con la COLABORACIÓN y la dinámica de trabajo en el wiki (Peticiones colaboración, Resumen edición, Vigilancia de páginas, etc...). Ahora se está diferenciando por los colores de los títulos que en la parte de COLABORACIÓN son verdes y en la otra depende del Formulario. Se usa también la encajada de manos (Imagen:Handshake drv Liel Bomberg2007 CCby20 114px.png) como gráfico id de colaboración, como en la Portada.
  • Revisar la forma de presentar la Ayuda en línea y las advertencias.
  • El formulario Formulario:Experimento-variente usa un icono identificativo para las variantes (Imagen:COffdrv varianteXp.png) que también se usa en las fichas. Lo he creado (--Dvdgmz 09:27 16 abr 2008 (CEST)) a partir de la modificación de un icono de Nuvola. Creo que debería haber algún elemento gráfico que identificara rápidamente que se trata de una variante pero no tiene porqué ser este. Repensarlo y si cabe sustituirlo.

Otros formularios:

  • Revisar el aspecto y maquetación actual para los otros formularios respecto a la línea gráfica general. Aunque no es algo prioritario.

Fichas experimento

Las fichas de experimento son generadas por uno de los formularios siguientes:

Una vez creadas se pueden editar a través de la pestaña "Editar con formulario" que llama al Formulario:Experimento-editar.

Cada ficha está compuesta de varias plantillas:

En principio tiene que ser así y no hay otras solución ya que algunas de estas plantillas, las marcadas con (R), tienen que ser llamadas recursivamente por los formularios y no se pueden integrar en una sola. Estas plantillas que son llamadas varias veces no pueden tener un título general (porqué se repetiría); por lo que son necesarias plantillas de título que no contienen ningún campo a rellenar.

El problema para la maquetación es que no tenemos una sola plantilla dónde organizarla. La ficha es el resultado de un collage de plantillas separadas. Yo (--Dvdgmz 09:21 16 abr 2008 (CEST)) no veo por el momento otra forma de afrontar la composición de las fichas.

A nivel de concepto de maquetación las partes de la ficha serían:

  • Información experimento
    • Cabecera: título y resumen
    • Infocaja lateral: datos informativos básicos
    • Otros datos informativos (conceptos y requerimientos): Fundamento científico, Conceptos relacionados, Materiales necesarios.
    • Desarrollo y montaje
  • Metainformación sobre la ficha:
    • Colaboración (peticiones)
    • Comentarios

Buena parte del aspecto de las fichas se controla desde MediaWiki:Common.css en su sección /* **** ESTILOS PARA LAS FICHAS DE EXPERIMENTOS **** */.

Aún hay cosas que se controlan mediante "style" que deberían pasar a controlarse desde MediaWiki:Common.css.

Qué se puede hacer

  • Plantearse el conjunto de la maquetación de la ficha teniendo en cuenta la limitación que nos impone el hecho de estar compuesta por plantillas distintas. Se pueden usar <div> y otros elementos para controlar la disposición por bloques pero teniendo en cuenta que las plantillas llamadas recursivamente son un bloque separado cada vez que son llamadas.
  • Repensar la ficha buscando jerarquizar la información y diferenciar al máximo secciones según su función y contenido. Buscar al máximo la claridad para quien consulta la ficha, que rápidamente encuentre lo que busca.
  • Replantearse los iconos de fondo (colección Nuvola) que ahora sirven para identificar visualmente las secciones (de forma coherente con lo que se haga en los formularios). Replantearse en icono para Variantes del experimento, de Colaboración y de Comentarios (también de forma coherente con las otras partes del wiki dónde aparecen).
  • Plantearse si se mantiene el efecto que cuando sitúas el cursor sobre una sección esta se resalta con un cambio de color de fondo (esto puede ser útil para explicaciones en clase).
  • ¿...?

Páginas Usuario e Imagen

Cada usuario del wiki tiene una página de usuario. Cada imagen cargada en el wiki tiene una página de imagen. Estos dos tipos de página tienen una plantilla y un formulario asociados.

Los espacios de nombre (namespaces) "Imagen:" y "Usuario:" estan vinculados a un formulario cada uno (esto se determina en las páginas: Experimenta_wiki:Imagen y Experimenta_wiki:Usuario). Esto significa que aparece una pestaña extra "editar con formulario". Esos formularios usan una plantilla para rellenar los datos básicos de una imagen o de un usuario, respectivamente.

La Plantilla:Usuario wiki tiene ahora un aspecto aceptable. Igual habría que ajustarla si se define una línea gráfica general para el wiki.

La Plantilla:Datos imagen es muy pobre y se puede mejorar mucho. Estaría bien que mostrara gráficamente la licencia (como se hace en el formulario o en Copyrights).

Páginas de Ayuda

En principio para las páginas de Ayuda se sigue una presentación basada en la de MediaWiki PD Help. Sólo se ha cambiado el color del azul al granate. Esto puede revisarse y cambiar si se considera necesario.

Esto se controla desde MediaWiki:Common.css con las clases .ns-12 #content y .ns-12 #bodyContent.

Tipografía

En la medida de lo posible basarse en Fuentes tipográficas libres. Tanto para el texto (si es necesario hacer alguna indicación por CSS) como para los gráficos que contengan texto.

Quizás la fuente libre más extendida es: Bitstream Vera.

Otras fuentes libres relavantes son: Gentium, Nimbus, DejaVu.

+ info:

Obtenido de "http://www.madrimasd.org/feria/AdminWiki/Grafismo"
seguimiento