Título
Palabras Clave	Proyecto, Diseño Gráfico, Casiopea, Wiki Semántica, Taller de Construcción, 2010
Período	2010-2010
Carreras	Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)	Sofía Savoy
Profesor	Herbert Spencer

Sitio Web de la Escuela

Estudio y Análisis del Sitio

El sitio web de la Escuela puede desglosarse y analisarse mediante muchas miradas, pero las que son relevantes para el desarrollo de un proyecto, son aquellas que se detienen en el aspecto del contenido, de la funcionalidad y de las audiencias, principalmente.

En un primer acercamiento al sitio web, nos encontramos con el home, o “inicio”, el cual contiene diversas secciones según sus contenidos temáticos, ofreciendo un orden al momento de la búsqueda y la navegación, y a su vez, algunas secciones son anexos a otros sitios pertenecientes al mismo dominio.

Mapa de Navegación

A continuación, se muestra el mapa de navegación del sitio web de la escuela:

Análisis Crítico del Mapa

Es importante que en un sitio web, exista un “esqueleto”, una estructura inicial que permita derivar a diversas páginas, y que permita una navegación consecuente y no engorrosa. Así, como estructura inicial del sitio, esta podría ser la base a partir de la cual se desglosan los contenidos de cada sección.

Al ingresar al sitio web de la Escuela, además de las secciones específicas, hay una cantidad de artículos que van cambiando cada cierto tiempo. Estos se encuentran visibles, con o sin imágenes, y también como enlaces. Su ubicación inicial proviene del año en que se publican, permitiendo acceder a otros anteriores.

Sección Escuela
Sección Amereida
Sección Alumnos
Sección Carreras
Sección Postgrado
Sección Mundo

Audiencias

Según la lectura hecha en Google Analytics, el sitio web de la Escuela es visitado constantemente por una cantidad considerable personas, y no sólo de habla hispana, sino que también de otros países, por lo que es importante que la opción de traducción existente, sea inmediata; hay muy pocas páginas en donde se encuentra esta (que afecta todo el sitio), lo que aporta a disminuir de cierta forma, el tiempo de estadía de quien navega por el sitio.

Las páginas más visitadas corresponden al “inicio”, a publicaciones acerca de temas recientes, a las carreras y al cuerpo docente. Esto permite observar que la audiencia del sitio es variada y apunta, según el contenido de las secciones, a diversos intereses, ya sea académico, poético o de docencia, entre otros.

Así, como se mencionó anteriormente, el sitio alberga contenido de interés (y en algunos casos de colaboración, para quienes publican) para profesores, alumnos de la universidad y de otras universidades y postulantes, principalmente.

Propuestas

Propuesta I

Dentro del sitio, hay ciertas secciones que podrían rediseñarse con el fin de optimizar la disposición de sus contenidos, y de reordenar algunos aspectos de la navegación (como por ejemplo, cuando se ingresar a “Escuela” y luego a “Historia”, el contenido es el mismo).

A pesar de haber oportunidades de diseño en estas áreas, sería interesante crear un espacio propio para mostrar los exámenes (títulos y cursos de pre-grado). En la actualidad, sólo existen publicaciones que forman parte de los archivos catalogados por año, dejando un leve vacío para una búsqueda más directa y detallada, que pretende dar a conocer a quienes visitan el sitio, los proyectos que hacemos en la Escuela.

La idea es que este espacio virtual, muestre en su “inicio” una breve reseña acerca de lo que tratan los exámenes y cómo son presentados en la Escuela. No se trata de un catálogo con toda la documentación detallada de cada proyecto (pues esto queda en un plano más concreto), sino que más bien, es para visualizar y conocer el pensamiento y las propuestas que diseñadores y arquitectos en formación, son capaces de desarrollar.

Ubicación de la propuesta en el menú

Propuesta II

La idea de proyecto descrita anteriormente, se enfocaba a mostrar, a través del sitio de la Escuela, qué es lo que hacen los alumnos, apuntando a exponer los exámenes. Pero esto puede quedar muy acotado de cierta forma, en el sentido de que la Escuela en sí, no son sólo los alumnos, sino que también los profesores, entre todos la conformamos y así debiera verse reflejado en el sitio web. En lugar de remitirse a la publicación organizada y concreta de los exámenes, se piensa en expandir lo que hacemos, creando esta sección llamada “Proyectos”. Dentro de esta, habrán tres distinciones:

Exámenes
Exposiciones
Portafolio

Las dos primeras subsecciones, mostraran los exámenes (e información acerca de estos) y exposiciones. En la segunda subsección, se piensa un espacio destinado a que los alumnos muestren sus proyectos y otros trabajos que han realizado, de manera que no sólo nosotros estemos al tanto de lo que hacen nuestros profesores y compañeros, sino que también se de la instancia para que otras audiencias, interesadas o curiosas por el diseño y la arquitectura, logren observar y conocer en qué trabajamos.

Ubicación y desgloce de la propuesta en el menú principal

Diagramación General

Espacios permanentes y variables
Subsección "Exámenes"
Detalle de subsección "Exámenes"
Subsección "Exposiciones"
Detalle de subsección "Exposiciones"
Subsección "Portafolio"
Detalle de subsección "Portafolio"

Propuesta III

La posibilidad de reorganizar y generar contenido, muestra una situación muy condensada en el sitio mismo de la Escuela, por lo que se pretende llevar fuera de este al espacio de los proyectos.

Dentro del mismo menú principal, se encontrará el enlace que llevará a este nuevo sitio, el que tendrá aspectos de diseño consecuentes con la línea del sitio principal(como se habría mencionado anteriormente), de manera que se mantenga en relación y dentro del sentido de “identidad” de la escuela.

Se les preguntó a cinco alumnos de cada carrera (de la Escuela) si ¿les gustaría que existiese un sitio en el cual se dieran a conocer sus trabajos personales, los exámenes y las exposiciones de la Escuela?, y todos respondieron afirmativamente, haciendo énfasis en el portafolio y en los exámenes, lo que se va inclinando a las audiencias del tipo de alumnado, relacionado con la arquitectura y el diseño, como también para profesionales (como en el caso de requerir personal de trabajo).

Con esto, se comienza a pensar en una estructuración más detallada, de manera de optiminzar la búsqueda y la disposición de los contenidos, agregando a este, un espacio de opinión pública.

Índice de Contenido

Inicio
1. Artículos publicados
Exámenes
1. Arquitectura
  1. Artículos publicados
2. Diseño Gráfico
  1. Artículos publicados
3. Diseño Industrial
  1. Artículos publicados
Portafolio
1. Alumnos
  1. Trabajos publicados
Exposiciones
1. Alumnos
  1. Artículos publicados
Escuela (link)

Mapa básico de navegación del sitio propuesto

Dentro de los espacios que da el sitio, existe un ámbito público y otro personal/privado, dentro de los cuales se manejan distintos permisos y atribuciones.

En el ámbito público, existe la posibilidad de comentar los artículos y trabajos publicados, dando un espacio de debate. Mientra que por la otra parte, el ámbito personal permite, además de comentar, publicar en la sección de portafolio, en el que podrá mostrar sus contactos.

Con esto, tenemos dos tipos de agentes que operan dentro del sitio, y que son claramente diferenciados por los permisos otorgados y las opciones que cada uno tiene.

Como usuario personal/privado, y en este caso un alumno de la Escuela, debemos determinar el grado de importancia de su espacio, esto es, definir qué es lo que primará en el contenido a mostrar, como por ejemplo, sus datos personales, sus proyectos en la escuela, sus aficiones, etc.

En el fondo, no se trata de una especie de blog, sino que de una sección perteneciente a un universo mayor de cosas, que filta y da a conocer un contenido específico, sin divagar en temas similares pero que terminan siendo anexos a lo inicial y fundamental.

Proyecto Final: Wiki Semántica

Con la visión de un espacio más colaborativo y de registro, se ha dado un vuelco en las propuestas para el proyecto, decidiendo abarcar la Wiki Semántica. En un principio se deben tener claros los objetos semánticos que participan en este universo virtual, y luego comenzar a construir sus relaciones, conformando una red lógica y consecuente.

Luego de esto, viene el diseño de cómo será exhibido el contenido, algo que es fundamental y de suma importancia para quienes utilizan diariamente la Wiki. Para esto es necesario filtrar los contenidos existentes para evitar la redundancia (generalmente hay más de una sección acerca de lo mismo, con y sin contenido) para no confundir a la persona.

Ámbito Semántico

Una wiki es un sitio web con páginas editables por varios colaboradores, permitiendo que estos puedan crear, editar y modificar textos. Y una wiki semántica, es una wiki que tiene un modelo de conocimiento más profundo, esto es, que permite definir información más específica en relación a algo, otorgándole propiedades para construir relaciones.

Objetos Semánticos

La definición de los objetos semánticos se hace a partir de los elementos que tenemos presentes participativamente, y que también tenemos pensados subir a la wiki:

Profesor
Alumno
Ex Alumno
Otro
Travesía
Obra
Proyecto
Proyecto de Investigación
Publicación Académica
Revista Indexada
Ediciones
Eventos

Lo siguiente, es categorizar estos objetos según su propiedad, su tipo y su extensión, para que puedan ser llevados en un lenguaje claro a la Wiki.

Objetos semánticos

Mapa de Clases

Luego de tener definidos los distintos objetos semánticos, damos el paso para crear el mapa de clases, para determinar las conexiones y relaciones entre los objetos, tejiendo una red lógica y estructurada.

Versión 1
Versión 2

Rediseño de la Wiki

Mapa de Navegación

El mapa de navegación de la Wiki, es algo muy complejo, y más bien, se representaría como un tejido, como un árbol de muchas ramas, las cuales corresponden a los diversos contenidos que se vinculan unos con otros. Pero para tener una idea simple e indicativa de los componentes escenciales, se crea este mapa de navegación, en donde se declaran secciones permanentes, y que permiten profundizar en los contenidos.

Archivo:Mapa navegación wiki.jpg

Índice de Contenido

El índice de contenidos en este caso, es lo esencial así como en el mapa de navegación. En este caso se especifican contenidos dentro de cada ítem:

Índice de Contenido Básico

Carreras
1. Arquitectura
  1. Talleres
  2. Cursos
  3. Título
2. Diseño
  1. Talleres
  2. Cursos
3. Diseño Gráfico
  1. Talleres
  2. Cursos
  3. Título
4. Diseño Gráfico
  1. Talleres
  2. Cursos
  3. Título
Ayuda
1. La Wiki
  1. ¿Qué es una wiki?
  2. Wiki semántica
2. Crear una página
  1. Espacio de nombres
  2. Uso de categorías
3. Editar una página
  1. Títulos o encabezados
  2. Listas
  3. Estilos
  4. Links
  5. Imágenes
  6. Extensiones
  7. Referencias
4. Utilizar Aplicaciones
  1. Mapas conceptuales
  2. Configuración de la red
  3. Google apps
De interés
1. Objetos semánticos
2. Escuela
3. Travesías
4. Carreras (a inicio)
5. Proyectos
6. Sitio web escuela
7. Revista web alumnos
Herramientas
1. Subir un archivo
2. Páginas especiales
  1. Reportes de mantenimiento
  2. Listas de páginas
  3. Registrarse/Entrar
  4. Usuarios y permisos
  5. Cambios recientes y registros
  6. Páginas sobre archivos
  7. Datos sobre la wiki y herramientas
  8. Búsqueda y redirecciones
  9. Páginas sobre usos
  10. Herramientas de páginas
  11. Semantic MediaWiki
  12. Formularios semánticos
  13. Otras páginas especiales

Wireframes

El diseño de la visualización directa comienza con los wireframes, para determinar la organización y ubicación del contenido. Si bien, comienzan con algo my similar estructuralmente, la reorganización es mucho mas detallada y precisa para llegar directo al contenido, sin que tener que hacer muchos clics para buscar.

Primera Versión

Inicio sin sesión
Inicio con sesión
Visualización de página con sesión

Segunda Versión

Sección de Carreras
Sección de Ayuda
Visualización de una página

Tercera Versión

Sección de Carreras
Visualización de una página
Visualización de versión para imprimir
Visualización de listado de categorías

Cuarta Versión

Propuesta inicio 1
Propuesta inicio 2
Visualización página talleres

Diseño de Interfaz

En esta etapa, el diseño de la interfaz mantiene aspectos existentes de la wiki pero los dispone de diferente manera, intentando mantener los contenidos de manera más accesible y organizada, agilizando la navegación misma.

La grilla utilizada se remite a la de la segunda y tercera versión de los wireframes; en una dimensión de 1000x700 píxeles, se tienen cinco columnas de 200 píxeles cada una, mientras que las siete filas son de 100 píxeles cada una, y cada sección se subdivide por la mitad, para guiarse en las proporciones.

Grilla base para la diagramación web

Página inicial (correspondiente a carreras)

Página con contenidos

Versión para imprimir

Listado de categorías

Programación del sitio

Al comenzar el diseño de interfaz, se hacen algunos cambios en los wireframes, determinando de mejor manera la estructura base para el producto final.

Mapas de divs

Inicio

Página talleres

Organización y Construcción de Contenido

Construcción del Sidebar

El diseño de la Wiki no sólo está enfocado a replantear su imagen, sino que también, busca plantear algo mucho más importante, que corresponde al diseño de interacción. Existen diferentes tipos de páginas, de información y modos de llegar a esta, por lo que se debe organizar el contenido básico de manera que el usuario comprenda los pasos a seguir en el uso y navegación de la Wiki.

Para esto, es importante tener clara la distribución y agrupación de la información, y para esto, se utilizará el sidebar. A través de este elemento, se estructurarán los contenidos básicos nombrados a continuación:

Secciones editables del Sidebar

Contenidos
1. Talleres
2. Proyectos
3. Escuela
4. Travesías
5. Sitio Web Escuela
6. Revista Web Alumnos
7. Ayuda
Wiki Semántica
1. ¿Cómo se utiliza?
2. Nuevo Objeto
3. Formularios
4. Plantillas
5. Propiedades
6. Categorías
7. Nueva Página

La sección de Contenidos corresponde a un desgloce del home actual, en donde se ordenan de manera más específica, los talles y sus cursos, las travesías y lo referente a la escuela (como ámbito, investigación, etc.). La subsección de ayuda también se mantiene visible, pero se edita su contenido, limpiando la información, filtrando la necesaria para quien requiere de ella.

Por otro lado, la sección Wiki Semántica, intenta “orientar” al usuario en relación al significado de esta, para que tenga conocimiento de lo que trata, de cual es la idea de crear objetos semánticos y de cuales son los otros elementos que hay en juego.

Edición de Páginas

En la Wiki existen una serie de páginas editables, correspondientes a mensajes de la Wiki, que pueden ser de mucha utilidad si se las trabaja para optimizar la interacción entre el sistema y la persona que lo navega.

Alguna de las páginas que pueden ser utilizadas, son: action-createpage (crear páginas), action-createaccount (crear una cuenta de usuario) y printableversion (versión para imprimir). La primera pretende utilizarse para definir inmediatamente cómo crear una página, sin la necesidad de utilizar el espacio de nombres; la segunda iría definida para saber cómo crearse una cuenta de usuario; la tercera sería para determinar la versión imprimible de un archivo, con la opción de imprimir directamente.

Extensiones Aplicables

Las extensiones o plugins para la Wiki, son variadas y específicas para algunas funciones. Dentro de las que se vieron, hay seis que podrían ayudar y optimizar la navegación:

ContactPage: Implementa un formulario de contacto para los visitantes. Crea una página especial “Special:Contact”, que es similar a “Special:EmailUser”, pero tiene un destinatario fijo, y puede ser usado anónimamente.

CSS MenuSidebar: Hace posible crear elementos adicionales del sidebar, como menús con ítems desplegables.

MetadataEdit: Coloca categorías, lenguaje de lins y plantillas permitidas en una caja de texto a parte, mientras se editan páginas.

MultiUpload: Permite a los usuarios subir más de un archivo a la vez.

Pdf Export: Convierte la página actual en un archivo PDF y lo envía la navegador.

Section link to top: Permite agregar un enlace al lado de la sección editar, para volver a la parte superior de la página.

Fuente: Extensiones MediaWiki

Trabajo con Usuarios

Creación de Personas y Escenarios

La creación de personas y escenarios, corresponde a una metodología clave para el desarrollo web, para ver las funcionalidades que este presentará. Se definen los usuarios, las personas que participarán en la interacción con el sitio web. Estas personas son ficticiamente expuestas ante situaciones para uso del sitio.

1º Caso

Datos Personales

Nombre: María Paz Zett
Edad: 19 años
Ocupación: Estudiante de Arquitectura, PUCV

Descripción María es estudiante de primer año de Arquitectura, le apasiona la fotografía, el arte, la música y la poesía. En su tiempo libre le gusta compartir con su familia y amigos, viajar y leer. Por los estudios está viviendo en la ciudad de Valparaíso y cuenta con un notebook personal, en el cual trabaja y se comunica por redes sociales.

Escenario En una clase de María, el profesor les ha pedido que suban el desarrollo de sus trabajos en la “wiki”. Ella no sabe muy bien acerca de esto, pero se encuentra con un sitio que le deja muy en claro para qué sirve y cómo poder ingresar al sitio. Además, se encuentra con el paso a paso para la creación de una nueva página y de cómo integrarse a los cursos que le corresponden, en los que se encuentran escritas las clases, las materias, información acerca de cada curso.

2º Caso

Datos Personales

Nombre: Jaime Canet
Edad: 22 años
Ocupación: Estudiante de Diseño Gráfico, PUCV

Descripción Jaime cursa la primera etapa de titulación de Diseño Gráfico. Siente gran aficción por la música, toca saxo y tiene su propia banda. En su tiempo libre le gusta fotografiar, salir con amigos e ir al cine. Cuenta con un notebook personal con el cual trabaja, por el que se comunica por redes sociales y chatea.

Escenario Jaime pronto pasará a la segunda etapa de titulación, y quiere dejar la documentación de su proyecto y su memoria de título, en un respaldo digital. Le han dicho que en la “wiki” ahora hay diversas opciones para subir cosas, por lo que entra al sitio, se informa en la sección de “ayuda”, y crea el objeto de proyecto con la especificación “de título”.

3º Caso

Datos Personales

Nombre: Heredi Hervia
Edad: 21 años
Ocupación: Estudiante de Diseño Industrial, PUCV

Descripción Heredi es estudiante de cuarto año de Diseño Industrial, muy religiosa y apegada a su familia. Disfruta de esta última y también de compartir con sus amigos. Es una joven que gusta ayudar a los demás trabajando en construcciones para los afectados por desastres, jugando con niños en visitas a escuelas de escasos recursos. Tiene su propio notebook en el cual trabaja, chatea y se comunica por redes sociales.

Escenario Heredi está ayudando a uno de los profesores de la Escuela a organizar un evento en la ciudad abierta para recibir a un renombrado Arquitecto del extranjero, quien dará una charla. Para esta ocasión, se han construido unas estructuras de madera en las que se montarán las maquetas del Arquitecto. Estas estructuras son parte de su proyecto trimestral el que ya ha ido documentando en la “wiki”, y su idea es crear un nuevo objeto en la “wiki”, un nuevo “evento” en el cual se documenten los proceso previos al evento, el evento mismo y dar una referencia de su proyecto, para así poder vincularlo directamente a la página correspondiente, quedando respaldado lo que ocurrió en ese momento, y las procesos que se dieron para construirlo.

4º Caso

Datos Personales

Nombre: Harol Bustos
Edad: 24 años
Ocupación: Diseñador Gráfico

Descripción Harol vive actualmente en la ciudad de Santiago, donde ha encontrado un trabajo. Le apasiona su profesión y además la música, pues tiene una banda en la que toca bajo. Tiene su propio notebook en el que se comunica por redes sociales compartiendo enlaces de su interés, y además hace xilografías y serigrafías.

Escenario Harol tiene una amiga que estudia en la Escuela de Arquitectura y Diseño de la PUCV, y siente curiosidad acerca de los proyectos que ella ha realizado, y -por indicación de ella- ingresa a la “wiki”, escribe su nombre en el buscador y se encuentra con una página en la que aparecen los cursos en los que ella está y los proyectos y trabajos que ha realizado. Esto lo incita a querer mostrar su trabajo, como ve que es posible publicar sin ser estrictamente alumno de la Escuela, decide subir sus próximos trabajos de serigrafía y xilografía, detallando el proceso constructivo de ellos.

Protocolo para Pruebas con Usuarios

Lo que se quiere medir a través de las siguientes tareas, es la capacidad de entendimiento que el usuario tiene con el sistema (en este caso, la Wiki), si la interacción y la presentación de contenidos son lo suficientemente claros y completos para que la persona logre utilizar la Wiki correctamente.

Si bien la creación de personas y escenarios perfila un comportamiento ideal en el uso del sistema, las tareas variarán dentro de estas capacidades, para diversificar el modo en que se encuentra y genera contenido en la Wiki.

Descripción de Tareas

Estas pruebas evaluarán la validación del proyecto de Diseño de la Wiki Semántica, a traves del desarrollo de las tareas enunciadas a continuación. Cada tarea define a una persona en una situación distinta, por lo que debes ponerte en el caso de cada una para llevar a cabo las tareas.

Ya que las pruebas son maquetas impresas en papel, debes marcar con un lápiz lo que vayas selecccionando, y en el caso que debas escribir (como por ejemplo en el buscador) debes hacerlo con el lápiz.

Tarea 1: Crear una nueva página
Tarea 2: Crear un nuevo proyecto (como objeto semántico)
Tarea 3: Crearse como persona (semántica)
Tarea 4: Ingresarse como alumno(a) en un curso

Desarrollo de las pruebas

TAREA 1: Crear una nueva página

Debes ponerte en el siguiente caso para realizar la tarea:

Nombre: Paulina Jaramillo
Edad: 18 años
Ocupación: Estudiante de primer año de Arquitectura
Nivel de Usuario: Medio

Escenario: Paulina ha ingresado este año a la carrera de Arquitectura en la Escuela de Arquitectura y Diseño de la PUCV. Su profesor de taller pide a los alumnos que vayan registrando sus trabajos en la red, para lo que existe un sitio llamado Wiki. Paulina ya se ha creado un usuario, el cual es p_jaramillo.

Tarea: Entrar a la página de tu usuario y luego, dentro de esta, crear una página para cada trabajo que has hecho (mínimo una página). (Puedes consultar la sección de ayuda)

Puede consultar la sección de "ayuda"
Seleccionar el link a la página de usuario
Escribir la forma de una nueva página

TAREA 2: Crear un nuevo proyecto (como objeto semántico)

Debes ponerte en el siguiente caso para realizar la tarea:

Nombre: Andrés Rodriguez
Edad: 24 años
Ocupación: Titulante de Diseño Gráfico
Nivel de Usuario: Avanzado

Escenario: Andrés se encuentra en su última etapa de titulación en la Escuela de Arquitectura y Diseño de la PUCV, y desea tener un respaldo web para la documentación de su proyecto, además de exponerlo públicamente. Él sabe que la Wiki es el sitio en el que puede hacer esto.

Tarea: Crear una página para el proyecto, utilizando los objetos semánticos.

Seleccionar el link de "crear nuevo objeto"
Seleccionar "nuevo proyecto" y ecribir el nombre o título
Llegar al formulario

TAREA 3: Crearse como persona (semántica)

Debes ponerte en el siguiente caso para luego realizar la tarea:

Nombre: Daniela Gómez
Edad: 42 años
Ocupación: Diseñadora Gráfica y Profesora
Nivel de Usuario: Medio

Escenario: Daniela es profesora de Diseño Gráfico en la Escuela de Arquitectura y Diseño de la PUCV, desde aproximadamente un año. Los demás profesores, a diferencia de Daniela, están ingresados (dentro de la Wiki) en las páginas de travesías a las que han ido, y en los cursos en los que ellos hacen clases. Esto es posible gracias a que en la Wiki están creados como "personas semánticas".

Tarea: Crearse como "persona" mediante el uso de los objetos semánticos.

Puede consultar la sección de "¿cómo se utiliza?"
Seleccionar el link de "crear nuevo objeto"
Seleccionar "nueva persona" y escribir el nombre o título
Llegar al formulario

TAREA 4: Ingresarse como alumno en un curso

Debes ponerte en el siguiente caso para realizar la tarea:

Nombre: Esteban Orellana
Edad: 22 años
Ocupación: Estudiante de tercer año de Diseño Industrial
Nivel de Usuario: Avanzado

Escenario: Esteban es alumno de la Escuela de Arquitectura y Diseño de la PUCV. El profesor de su Taller de Construcción, les ha exigido a sus alumnos que se anoten en el curso que aparece en la Wiki, aprovechando que todos ya se han creado en ella como "personas semánticas".

Tarea: Entrar a la página del curso (Taller de Construcción) e ingresar su nombre (correspondiente a la "persona semántica) en la sección de "Alumnos".

Puede consultar la sección de "¿cómo se utiliza?"
Seleccionar el curso (de Diseño Industrial) "Construcción"
Seleccionar el curso correspondiente
Seleccionar "editar con formulario"
Llegar al formulario y anotarse

Resultados de las pruebas

Al realizar las pruebas con distintas personas, los resultados no fueron muy favorables. Existía un claro desconocimiento de las temáticas, y la sección de ayuda practicamente no era consultada.

El agregar información a la página de usuario no mostró mayores complicaciones, el crear un objeto específico tampoco fue gran problema (pues está indicado directamente en el menú lateral), pero no se comprendía el uso que podía dársele ni la manera de editar y vincular estos.

Los cambios más significativos en el diseño, serán el modo de mostrar el contenido, partiendo por mostrar inmediatamente las dos formas de trabajar en la wiki y un menú de ayuda específico:

Páginas creadas con espacio de nombres
Páginas creadas con formularios

Con esto, se lleva a la versión definitiva de mapa de wireframes, mapa de divs e interfaz.

Diseño Final

Sidebar

Se ha vuelto a diseñar el sidebar en cuanto a sus contenidos, para que exista un acercamiento directo a la búsqueda de información para el buen y correcto uso de la Wiki

Contenido del sidebar:

Buscar
Wiki
- Talleres y Proyectos
- Escuela y Travesías
- Crear un Objeto
Ayuda
- Editar una página
- Objetos semánticos
- Uso de categorías
- Configuración de aplicaciones
Herramientas

Wireframes

Visualización home. 1.Header 2.Menú usuario 3.Logo 4.Menú superior 5.Contenido 6.Nombre página 7.Introducción 8.Imagen estorninos 9.Objetos semánticos 10.Páginas 11.Categorías 12.Menú lateral 13.Buscador 14.Contenido wiki 15.Ayuda 16.Herramientas 17.Footer 18.Imagen MediaWiki 19.Imagen Creative Commons
Visualización página para crear objeto. 1.Header 2.Menú usuario 3.Logo 4.Menú superior 5.Contenido 6.Nombre página 7.Pasos a seguir 8.Elementos de cuidado 9.Criterios para nombrar cursos 10.Selector de objeto 11.Menú lateral 12.Buscador 13.Contenido wiki 14.Ayuda 15.Herramientas 16.Footer 17.Imagen MediaWiki 18.Imagen Creative Commons
Visualización página "Talleres y Proyectos." 1.Header 2.Menú usuario 3.Logo 4.Menú superior 5.Contenido 6.Nombre página 7.Proyectos 8.Cursos 9.Talleres 10.Categorías 11.Menú lateral 12.Buscador 13.Contenido wiki 14.Ayuda 15.Herramientas 16.Footer 17.Imagen MediaWiki 18.Imagen Creative Commons

Interfaz

Home

Ayuda para objetos semánticos

Ayuda para uso de categorías

Crear nuevo objeto

Talleres y proyectos

Escuela y travesías

Códigos de Programación

Códigos php y css modificados, para el desarrollo del skin "sofia".

Código estructura


<?php
/**
 * Sofia nouveau
 *
 * Translated from gwicke's previous TAL template version to remove
 * dependency on PHPTAL.
 *
 * @todo document
 * @package MediaWiki
 * @subpackage Skins
 */

if( !defined( 'MEDIAWIKI' ) )
	die( -1 );

/** */
require_once('includes/SkinTemplate.php');

/**
 * Inherit main code from SkinTemplate, set the CSS and template filter.
 * @todo document
 * @package MediaWiki
 * @subpackage Skins
 */
class SkinSofia extends SkinTemplate {
	/** Using Sofia. */
	function initPage( &$out ) {
		SkinTemplate::initPage( $out );
		$this->skinname  = 'sofia';
		$this->stylename = 'sofia';
		$this->template  = 'sofiaTemplate';
	}
}

/**
 * @todo document
 * @package MediaWiki
 * @subpackage Skins
 */
class sofiaTemplate extends QuickTemplate {
	/**
	 * Template filter callback for Sofia skin.
	 * Takes an associative array of data set from a SkinTemplate-based
	 * class, and a wrapper for MediaWiki's localization database, and
	 * outputs a formatted page.
	 *
	 * @access private
	 */
	function execute() {
		// Suppress warnings to prevent notices about missing indexes in $this->data
		wfSuppressWarnings();

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="<?php $this->text('xhtmldefaultnamespace') ?>" <?php 
	foreach($this->data['xhtmlnamespaces'] as $tag => $ns) {
		?>xmlns:<?php echo "{$tag}=\"{$ns}\" ";
	} ?>xml:lang="<?php $this->text('lang') ?>" lang="<?php $this->text('lang') ?>" dir="<?php $this->text('dir') ?>">
	<head>
		<meta http-equiv="Content-Type" content="<?php $this->text('mimetype') ?>; charset=<?php $this->text('charset') ?>" />
		<?php $this->html('headlinks') ?>
<!-- HOLA QUETAL -->
		<title><?php $this->text('pagetitle') ?></title>
		<style type="text/css" media="screen,projection">/*<![CDATA[*/ @import "<?php $this->text('stylepath') ?>/sofia/main.css?<?php echo $GLOBALS['wgStyleVersion'] ?>"; /*]]>*/</style>
		<link rel="stylesheet" type="text/css" <?php if(empty($this->data['printable']) ) { ?>media="print"<?php } ?> href="/skins/common/commonPrint.css?<?php echo $GLOBALS['wgStyleVersion'] ?>" />
		<link rel="stylesheet" type="text/css" media="handheld" href="<?php $this->text('stylepath') ?>/<?php $this->text('stylename') ?>/handheld.css?<?php echo $GLOBALS['wgStyleVersion'] ?>" />
		
		<!--[if lt IE 7]><script type="<?php $this->text('jsmimetype') ?>" src="<?php $this->text('stylepath') ?>/common/IEFixes.js?<?php echo $GLOBALS['wgStyleVersion'] ?>"></script>
		<meta http-equiv="imagetoolbar" content="no" /><![endif]-->
		
		<?php print Skin::makeGlobalVariablesScript( $this->data ); ?>
                
		<script type="<?php $this->text('jsmimetype') ?>" src="<?php $this->text('stylepath' ) ?>/common/wikibits.js?<?php echo $GLOBALS['wgStyleVersion'] ?>"><!-- wikibits js --></script>
<?php	if($this->data['jsvarurl'  ]) { ?>
		<script type="<?php $this->text('jsmimetype') ?>" src="<?php $this->text('jsvarurl'  ) ?>"><!-- site js --></script>
<?php	} ?>
<?php	if($this->data['pagecss'   ]) { ?>
		<style type="text/css"><?php $this->html('pagecss'   ) ?></style>
<?php	}
		if($this->data['usercss'   ]) { ?>
		<style type="text/css"><?php $this->html('usercss'   ) ?></style>
<?php	}
		if($this->data['userjs'    ]) { ?>
		<script type="<?php $this->text('jsmimetype') ?>" src="<?php $this->text('userjs' ) ?>"></script>
<?php	}
		if($this->data['userjsprev']) { ?>
		<script type="<?php $this->text('jsmimetype') ?>"><?php $this->html('userjsprev') ?></script>
<?php	}
		if($this->data['trackbackhtml']) print $this->data['trackbackhtml']; ?>
		<!-- Head Scripts -->
		<?php $this->html('headscripts') ?>
	</head>
<body <?php if($this->data['body_ondblclick']) { ?>ondblclick="<?php $this->text('body_ondblclick') ?>"<?php } ?>
<?php if($this->data['body_onload'    ]) { ?>onload="<?php     $this->text('body_onload')     ?>"<?php } ?>
 class="mediawiki <?php $this->text('nsclass') ?> <?php $this->text('dir') ?> <?php $this->text('pageclass') ?>">
	
	<div id="header">
	<div id="logo">
		<a href="<?php echo htmlspecialchars($this->data['nav_urls']['mainpage']['href'])?>" <?php
		?>title="<?php $this->msg('mainpage') ?>" /><img src="../casiopea_logo02.png" <?php
		?>/></a>
	</div>
	
     <div class="right">
			<ul class="meta">
<?php 			foreach($this->data['personal_urls'] as $key => $item) { ?>
				<li id="pt-<?php echo Sanitizer::escapeId($key) ?>"<?php
					if ($item['active']) { ?> class="active"<?php } ?>><a href="<?php
				echo htmlspecialchars($item['href']) ?>"<?php
				if(!empty($item['class'])) { ?> class="<?php
				echo htmlspecialchars($item['class']) ?>"<?php } ?>><?php
				echo htmlspecialchars($item['text']) ?></a></li>
<?php			} ?>
			</ul>
	</div>
	</div>
	
	<div id="globalWrapper">
    
    
    <div id="column-one">
	
	<script type="<?php $this->text('jsmimetype') ?>"> if (window.isMSIE55) fixalpha(); </script>
	<div id="p-search" class="portlet">
		<h5><label for="searchInput"><?php $this->msg('search') ?></label></h5>
		<div id="searchBody" class="pBody">
			<form action="<?php $this->text('searchaction') ?>" id="searchform"><div>
				<input id="searchInput" name="search" type="text" <?php
					if($this->haveMsg('accesskey-search')) {
						?>accesskey="<?php $this->msg('accesskey-search') ?>"<?php }
					if( isset( $this->data['search'] ) ) {
						?> value="<?php $this->text('search') ?>"<?php } ?> />
				<input type='submit' name="go" class="searchButton" id="searchGoButton"	value="<?php $this->msg('searcharticle') ?>" /> 
				<input type='submit' name="fulltext" class="searchButton" id="mw-searchButton" value="<?php $this->msg('searchbutton') ?>" />
			</div></form>
		</div>
	</div>	
	<?php foreach ($this->data['sidebar'] as $bar => $cont) { ?>
	
	
	
	<div class='portlet' id='p-<?php echo Sanitizer::escapeId($bar) ?>'>
		<h5><?php $out = wfMsg( $bar ); if (wfEmptyMsg($bar, $out)) echo $bar; else echo $out; ?></h5>
		<div class='pBody'>
			<ul>
<?php 			foreach($cont as $key => $val) { ?>
				<li id="<?php echo Sanitizer::escapeId($val['id']) ?>"<?php
					if ( $val['active'] ) { ?> class="active" <?php }
				?>><a href="<?php echo htmlspecialchars($val['href']) ?>"><?php echo htmlspecialchars($val['text']) ?></a></li>
<?php			} ?>
			</ul>
		</div>
	</div>
	<?php } ?>

	<div class="portlet" id="p-tb">
		<h5><?php $this->msg('toolbox') ?></h5>
		<div class="pBody">
			<ul>
<?php
		if($this->data['notspecialpage']) { ?>
				<li id="t-whatlinkshere"><a href="<?php
				echo htmlspecialchars($this->data['nav_urls']['whatlinkshere']['href'])
				?>"><?php $this->msg('whatlinkshere') ?></a></li>
<?php
			if( $this->data['nav_urls']['recentchangeslinked'] ) { ?>
				<li id="t-recentchangeslinked"><a href="<?php
				echo htmlspecialchars($this->data['nav_urls']['recentchangeslinked']['href'])
				?>"><?php $this->msg('recentchangeslinked') ?></a></li>
<?php 		}
		}
		if(isset($this->data['nav_urls']['trackbacklink'])) { ?>
			<li id="t-trackbacklink"><a href="<?php
				echo htmlspecialchars($this->data['nav_urls']['trackbacklink']['href'])
				?>"><?php $this->msg('trackbacklink') ?></a></li>
<?php 	}
		if($this->data['feeds']) { ?>
			<li id="feedlinks"><?php foreach($this->data['feeds'] as $key => $feed) {
					?><span id="feed-<?php echo Sanitizer::escapeId($key) ?>"><a href="<?php
					echo htmlspecialchars($feed['href']) ?>"><?php echo htmlspecialchars($feed['text'])?></a> </span>
					<?php } ?></li><?php
		}

		foreach( array('contributions', 'blockip', 'emailuser', 'upload', 'specialpages') as $special ) {

			if($this->data['nav_urls'][$special]) {
				?><li id="t-<?php echo $special ?>"><a href="<?php echo htmlspecialchars($this->data['nav_urls'][$special]['href'])
				?>"><?php $this->msg($special) ?></a></li>
<?php		}
		}

		if(!empty($this->data['nav_urls']['print']['href'])) { ?>
				<li id="t-print"><a href="<?php echo htmlspecialchars($this->data['nav_urls']['print']['href'])
				?>"><?php $this->msg('printableversion') ?></a></li><?php
		}

		if(!empty($this->data['nav_urls']['permalink']['href'])) { ?>
				<li id="t-permalink"><a href="<?php echo htmlspecialchars($this->data['nav_urls']['permalink']['href'])
				?>"><?php $this->msg('permalink') ?></a></li><?php
		} elseif ($this->data['nav_urls']['permalink']['href'] === '') { ?>
				<li id="t-ispermalink"><?php $this->msg('permalink') ?></li><?php
		}

		wfRunHooks( 'sofiaTemplateToolboxEnd', array( &$this ) );
?>
			</ul>
		</div>
	</div>
<?php
		if( $this->data['language_urls'] ) { ?>
	<div id="p-lang" class="portlet">
		<h5><?php $this->msg('otherlanguages') ?></h5>
		<div class="pBody">
			<ul>
<?php		foreach($this->data['language_urls'] as $langlink) { ?>
				<li class="<?php echo htmlspecialchars($langlink['class'])?>"><?php
				?><a href="<?php echo htmlspecialchars($langlink['href']) ?>"><?php echo $langlink['text'] ?></a></li>
<?php		} ?>
			</ul>
		</div>
	</div>
<?php	} ?>


        
		</div><!-- end of the left (by default at least) column -->
		<div id="column-content">
	<div id="content">
		<div id="menu">
    	<ul id="nav" class="left">
	<?php			foreach($this->data['content_actions'] as $key => $tab) { ?>
					 <li id="ca-<?php echo Sanitizer::escapeId($key) ?>"<?php
					 	if($tab['class']) { ?> class="<?php echo htmlspecialchars($tab['class']) ?>"<?php }
					 ?>><a href="<?php echo htmlspecialchars($tab['href']) ?>"><?php
					 echo htmlspecialchars($tab['text']) ?></a></li>
	<?php			 } ?>
			</ul>
			
	</div>
		<a name="top" id="top"></a>
		<?php if($this->data['sitenotice']) { ?><div id="siteNotice"><?php $this->html('sitenotice') ?></div><?php } ?>
		<h1 class="firstHeading"><?php $this->data['displaytitle']!=""?$this->html('title'):$this->text('title') ?></h1>
		<div id="bodyContent">
			<h3 id="siteSub"><?php $this->msg('tagline') ?></h3>
			<div id="contentSub"><?php $this->html('subtitle') ?></div>
			<?php if($this->data['undelete']) { ?><div id="contentSub2"><?php     $this->html('undelete') ?></div><?php } ?>
			<?php if($this->data['newtalk'] ) { ?><div class="usermessage"><?php $this->html('newtalk')  ?></div><?php } ?>
			<?php if($this->data['showjumplinks']) { ?><div id="jump-to-nav"><?php $this->msg('jumpto') ?> <a href="#column-one"><?php $this->msg('jumptonavigation') ?></a>, <a href="#searchInput"><?php $this->msg('jumptosearch') ?></a></div><?php } ?>
			<!-- start content -->
			<?php $this->html('bodytext') ?>
			<?php if($this->data['catlinks']) { ?><div id="catlinks"><?php       $this->html('catlinks') ?></div><?php } ?>
			<!-- end content -->
			<div class="visualClear"></div>
		</div>
	</div>
		</div>
		
			<div class="visualClear"></div>
            <div id="footer">
<?php
		if($this->data['poweredbyico']) { ?>
				<div id="f-poweredbyico"><?php $this->html('poweredbyico') ?></div>
<?php 	}
		if($this->data['copyrightico']) { ?>
				<div id="f-copyrightico"><?php $this->html('copyrightico') ?></div>
<?php	}

		// Generate additional footer links
?>
			<ul id="f-list">
<?php
		$footerlinks = array(
			'lastmod', 'viewcount', 'numberofwatchingusers', 'credits', 'copyright',
			'privacy', 'about', 'disclaimer', 'tagline',
		);
		foreach( $footerlinks as $aLink ) {
			if( isset( $this->data[$aLink] ) && $this->data[$aLink] ) {
?>				<li id="<?php echo$aLink?>"><?php $this->html($aLink) ?></li>
<?php 		}
		}
?>
			</ul>
		</div>
			
		
	<?php $this->html('bottomscripts'); /* JS call to runBodyOnloadHook */ ?>
</div>
<?php $this->html('reporttime') ?>
<?php if ( $this->data['debug'] ): ?>
<!-- Debug output:
<?php $this->text( 'debug' ); ?>

-->
<?php endif; ?>
</body></html>
<?php
	wfRestoreWarnings();
	} // end of execute() method
} // end of class
?>

CSS



/*
** MediaWiki 'Mimbead' style sheet for CSS2-capable browsers.
** Copyright Gabriel Wicke - http://wikidev.net/
** License: GPL (http://www.gnu.org/copyleft/gpl.html)
**
** Loosely based on http://www.positioniseverything.net/ordered-floats.html by Big John
** and the Plone 2.0 styles, see http://plone.org/ (Alexander Limi,Joe Geldart & Tom Croucher,
** Michael Zeltner and Geir Bækholt)
** All you guys rock :)
*/

/**
 * Stylesheet for screen/projection.  All rules not marked media-specific are
 * shared with handheld.css and should be updated in tandem.  The rules can't
 * be in the same file because old browsers like IE5 won't obey @media rules.
 *
 * Rules that are screen/projection-specific are marked with commented-out
 * @media rules and indentation.
 */

/* @media screen, projection { */
	#column-content {
		/* width:750px; */
		margin:0;
		padding:68px 0 0 0;
	}
	#content {
		margin:0 0 0 1em;
		position:relative;
		z-index: 2;
		float: left;
		width: 740px;
	}
	#column-one {
		width:180px;
		float:left;
		padding:40px 20px 0 0;
	}
	
	#header {
		height:30px;
/*		background-color:#000000;*/
		width:100%;
	}
	
	#menu {
		margin-top:-5px;
		margin-bottom:60px;
		margin-left:-20px;
	}
/* } */
#content {
	line-height:1.5em;
	padding-bottom: 2em;
}
/* the left column width is specified in class .portlet */

/* Font size:
** We take advantage of keyword scaling- browsers won't go below 9px
** More at http://www.w3.org/2003/07/30-font-size
** http://style.cleverchimp.com/font_size_intervals/altintervals.html
*/

body {
	font: x-small sans-serif;
	margin:0;
	padding:0;
	background-image:url(fn_hd.gif);
	background-repeat:repeat-x;
	background-color:white;
	background-position:top center;
	color: #545454;
}

/* scale back up to a sane default */
#globalWrapper {
	font-size:127%;
	width: 1000px;
	margin-left:auto;
	margin-right:auto;
	padding: 0;
}
.visualClear {
	clear:both;
}

/* general styles */

table {
	font-size:100%;
	color:black;
	/* we don't want the bottom borders of <h2>s to be visible through
	   floated tables */
	background-color:white;
}
a {
	text-decoration: none;
	color: #0F8596;
	background: none;
}
a:visited {
	color: #0F8596;
}
a:active {
	color: #0F8596;
}
a:hover {
	text-decoration: underline;
}
a.stub {
	color: #772233;
}
a.new:link, #p-personal a.new:link {
	color: #A8A669;
	background: url(new-page.png) center right no-repeat;
	padding-right: 13px;
	
}
a.new:visited, #p-personal a.new:visited {
	color:#cba48a;
	background: url(new-page.png) center right no-repeat;
	padding-right: 13px;
	}

#column-one li a {
	color:#555555;
	font-size: 13px;
	font-family: Helvetica, Arial, sans-serif;
	}
	
#column-one li a:hover {
	color:#0F8596;
	text-decoration: none;
	}

img {
	border: none;
	vertical-align: middle;
}

/* Semantic Tables - Tablas Semánticas */


table.plantilla{
	font-size: 95%;
	padding-bottom: 18px;
	margin: 1em 0;
	background-color: transparent;
	line-height: 120%;
}

table.investigacion {
	background-color: #e8e7fc;
	width: 100%;
	padding: 1em;
}

table.investigacion tbody tr{
	margin-bottom: 5em;
}


div.publicaciones{
	background-color:#fffeda; 
	padding: 2em 1em;
	margin: 0 0 3em 0;
	border: 1px solid white;
}

table.plantilla tbody tr{
	margin-bottom: 5em;
	vertical-align: text-top;
}

table.plantilla tbody tr th{
	text-align: right;
	padding: 0 1.5ex 0 0;
	color: #555;
	font-weight: normal;
	text-transform: uppercase;
	font-size: 83%;
	letter-spacing: .1ex;
	width: 180px;
	
}

table.plantilla tbody tr td{
	
}

/* @media screen, projection { */
	p {
/*		margin: 2.5em 0 .5em 0;*/
		line-height: 1.5em;
	}
/* } */
p img {
	margin: 0;
}

hr {
	height: 1px;
	color: #aaa;
	background-color: #aaa;
	border: 0;
	margin: .2em 0 .2em 0;
}

h1 {
	font-size: 2.5em;
	font-family: Bodoni,Georgia,serif;
	font-weight: normal;
	letter-spacing: -.12ex;
	line-height: 90%;
	*margin: 1em 0 0 0;
	color: #E01A27;
	}
	
h1 span.mw-headline{
	/* font-size: 1em; */
	padding: 0;
}

h3, h4, h5, h6 {
	color: black;
	background: none;
	font-weight: normal;
	margin: 0;
	padding-top: .5em;
	padding-bottom: .17em;
	border-bottom: 1px solid #aaa;
}


h2 { 
	font: 1.4em "Helvetica Neue", Helvetica, sans-serif;
	margin: 1em 0 0 0;
	font-weight: lighter;
	text-transform: uppercase;
	color:#333333;
	}
	
	
h3, h4, h5, h6 {
	border-bottom: none;
	font-weight: bold;
}

h3 { 
	font: 1em Arial, Helvetica, sans-serif;
	font-weight: bold;
	padding: 0;
	text-transform:uppercase;
	letter-spacing:0.1em;
	color:#333;
	margin: 2em 0 0 0;
	padding: 0;
	}
	
	
h4 { 
	font: 1em Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing:0.1em;
	font-weight: bold;
	color:#333;
	margin: 2em 0 0 0;
	padding: 0;
    font-weight: normal;
	}
	
	
h5 { 
	font-size: 100%; 
	}
	

h6 { font-size: 80%;  }


.editsection {
	font-size: 8px; 
	font-family: Helvetica;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 0.1ex;
	float: right;
	display: block;
	text-align: left;
}

ul {
	line-height: 1.5em;
	list-style-type: square;
	margin: .3em 0 0 1.5em;
	padding: 0;
	list-style-image: url(bullet2.gif);
}
ol {
	line-height: 1.5em;
	margin: .3em 0 0 3.2em;
	padding: 0;
	list-style-image: none;
}
li {
	margin-bottom: .1em;
}
dt {
	font-weight: bold;
	margin-bottom: .1em;
}
dl {
	margin-top: .2em;
	margin-bottom: .5em;
}
dd {
	line-height: 1.5em;
	margin-left: 2em;
	margin-bottom: .1em;
}

fieldset {
	border: 1px solid #2f6fab;
	margin: 1em 0 1em 0;
	padding: 0 1em 1em;
	line-height: 1.5em;
}
legend {
	padding: .5em;
	font-size: 95%;
}
form {
	border: none;
	margin: 0;
}

textarea {
	width: auto;
	padding: 0;
}

input.historysubmit {
	padding: 0 .3em .3em .3em !important;
	font-size: 94%;
	cursor: pointer;
	height: 1.7em !important;
	margin-left: 1.6em;
}
select {
	vertical-align: top;
}
abbr, acronym, .explain {
	border-bottom: 1px dotted black;
	color: black;
	background: none;
	cursor: help;
}

q {
	font-family: Georgia, Times, "Times New Roman", serif;
	font-style: italic;
}

/* disabled for now
blockquote {
	font-family: Times, "Times New Roman", serif;
	font-style: italic;
}*/

code {
	background-color: #f9f9f9;
}

pre {
	padding: 1em;
	border: 1px dotted #cccccc;
	color: black;
	background-color: #f9f9f9;
	line-height: 0.9em;
}

/*
** the main content area
*/

#content b, #content strong{
	color: #000;
}

/* @media screen, projection { */
	#siteSub {
		display: none;
	}
	#jump-to-nav {
		display: none;
	}
/* } */

#contentSub, #contentSub2 {
	font-size: 84%;
	line-height: 1.2em;
	margin: 0 0 1.4em 1em;
	color: #7d7d7d;
	width: auto;
}
span.subpages {
	display: block;
}

/* Some space under the headers in the content area */
#bodyContent h1, #bodyContent h2 {
	margin-bottom: .6em;
}
#bodyContent h3, #bodyContent h4, #bodyContent h5 {
	margin-bottom: .3em;
}
.firstHeading {
	margin-bottom: .1em;
}

/* user notification thing */
.usermessage {
	background-color: #ffce7b;
	border: 1px solid #ffa500;
	color: black;
	font-weight: bold;
	margin: 2em 0 1em;
	padding: .5em 1em;
	vertical-align: middle;
}
#siteNotice {
	text-align: center;
	font-size: 95%;
	padding: 0 .9em;
}
#siteNotice p {
	margin: 0;
	padding: 0;
}
.error {
	color: red;
	font-size: larger;
}
.errorbox, .successbox {
	font-size: larger;
	border: 2px solid;
	padding: .5em 1em;
	margin-bottom: 2em;
	color: #000;
}
.errorbox {
	border-color: red;
	background-color: #fff2f2;
}
.successbox {
	border-color: green;
	background-color: #dfd;
}
.errorbox h2, .successbox h2 {
	font-size: 1em;
	font-weight: bold;
	display: inline;
	margin: 0 .5em 0 0;
	border: none;
}

#mw-normal-catlinks {
	background-color: #f1f8f8;
	padding: 5px 8px;
	margin-top: 2em;
	clear: both;
	width: 725px;
}
/* currently unused, intended to be used by a metadata box
in the bottom-right corner of the content area */
.documentDescription {
	/* The summary text describing the document */
	font-weight: bold;
	display: block;
	margin: 1em 0;
	line-height: 1.5em;
}
.documentByLine {
	text-align: right;
	font-size: 90%;
	clear: both;
	font-weight: normal;
	color: #76797c;
}

/* emulate center */
.center {
	width: 100%;
	text-align: center;
}
*.center * {
	margin-left: auto;
	margin-right: auto;
}
/* small for tables and similar */
.small, .small * {
	font-size: 94%;
}
table.small {
	font-size: 100%;
}

/*
** content styles
*/

#toc,
.toc,
.mw-warning {
	width: 100%;
    color: #58532f;
    background-color: #f7f7f7;
    font-family: Georgia;
	padding: 5px;
	font-size: 95%;
}
#toc h2,
.toc h2 {
	display: inline;
	border: none;
	padding: 0;
	font-size: 100%;
	font-weight: bold;
}
#toc #toctitle,
.toc #toctitle,
#toc .toctitle,
.toc .toctitle {
	text-align: left;
	margin-left: 10px;
}
#toc ul,
.toc ul {
	list-style-type: none;
	list-style-image: none;
	margin-left: 10px;
	padding-left: 0;
	text-align: left;
}
#toc ul ul,
.toc ul ul {
	margin: 0 0 0 2em;
}
#toc .toctoggle,
.toc .toctoggle {
	font-size: 94%;
}

.mw-warning {
	margin-left: 50px;
	margin-right: 50px;
	text-align: center;
}

/* images */
div.floatright, table.floatright {
	clear: right;
	float: right;
	position: relative;
	margin: 0 0 .5em .5em;
	border: 0;
/*
	border: .5em solid white;
	border-width: .5em 0 .8em 1.4em;
*/
}
div.floatright p { font-style: italic; }
div.floatleft, table.floatleft {
	float: left;
	clear: left;
	position: relative;
	margin: 0 .5em .5em 0;
	border: 0;
/*
	margin: .3em .5em .5em 0;
	border: .5em solid white;
	border-width: .5em 1.4em .8em 0;
*/
}
div.floatleft p { font-style: italic; }
/* thumbnails */
div.thumb {
	margin-bottom: .5em;
	border-style: solid;
	border-color: white;
	width: auto;
}
div.thumbinner {
	border: 1px solid #ccc;
	padding: 3px !important;
	background-color: #f9f9f9;
	font-size: 94%;
	text-align: center;
	overflow: hidden;
}
html .thumbimage {
	border: 1px solid #ccc;
}
html .thumbcaption {
	border: none;
	text-align: left;
	line-height: 1.4em;
	padding: 3px !important;
	font-size: 94%;
}
div.magnify {
	float: right;
	border: none !important;
	background: none !important;
}
div.magnify a, div.magnify img {
	display: block;
	border: none !important;
	background: none !important;
}
div.tright {
	clear: right;
	float: right;
	border-width: .5em 0 .8em 1.4em;
}
div.tleft {
	float: left;
	clear: left;
	margin-right: .5em;
	border-width: .5em 1.4em .8em 0;
}

.hiddenStructure {
	display: none;
	speak: none;
}
img.tex {
	vertical-align: middle;
}
span.texhtml {
	font-family: serif;
}

/*
** classes for special content elements like town boxes
** intended to be referenced directly from the wiki src
*/

/*
** User styles
*/
/* table standards */
table.rimage {
	float: right;
	position: relative;
	margin-left: 1em;
	margin-bottom: 1em;
	text-align: center;
}
.toccolours {
	border: 1px solid #aaa;
	background-color: #f9f9f9;
	padding: 5px;
	font-size: 95%;
}
div.townBox {
	position: relative;
	float: right;
	background: white;
	margin-left: 1em;
	border: 1px solid gray;
	padding: .3em;
	width: 200px;
	overflow: hidden;
	clear: right;
}
div.townBox dl {
	padding: 0;
	margin: 0 0 .3em;
	font-size: 96%;
}
div.townBox dl dt {
	background: none;
	margin: .4em 0 0;
}
div.townBox dl dd {
	margin: .1em 0 0 1.1em;
	background-color: #f3f3f3;
}

/*
** edit views etc
*/
.special li {
	line-height: 1.4em;
	margin: 0;
	padding: 0;
}

/* Page history styling */
/* the auto-generated edit comments */
.autocomment {
	color: gray;
}
#pagehistory span.user {
	margin-left: 1.4em;
	margin-right: .4em;
}
#pagehistory span.minor {
	font-weight: bold;
}
#pagehistory li {
	border: 1px solid white;
}
#pagehistory li.selected {
	background-color: #f9f9f9;
	border: 1px dashed #aaa;
}

/*
** Diff rendering
*/
table.diff, td.diff-otitle, td.diff-ntitle {
	background-color: white;
}
td.diff-addedline {
	background: #cfc;
	font-size: smaller;
}
td.diff-deletedline {
	background: #ffa;
	font-size: smaller;
}
td.diff-context {
	background: #eee;
	font-size: smaller;
}
span.diffchange {
	color: red;
	font-weight: bold;
}

/*
** keep the whitespace in front of the ^=, hides rule from konqueror
** this is css3, the validator doesn't like it when validating as css2
*/
#bodyContent a.external,
#bodyContent a[href ^="gopher://"] {
	background: url(external.png) center right no-repeat;
	padding-right: 13px;
}
#bodyContent a[href ^="https://"],
.link-https {
	background: url(lock_icon.gif) center right no-repeat;
	padding-right: 16px;
}
#bodyContent a[href ^="mailto:"],
.link-mailto {
	background: url(mail_icon.gif) center right no-repeat;
	padding-right: 18px;
}
#bodyContent a[href ^="news://"] {
	background: url(news_icon.png) center right no-repeat;
	padding-right: 18px;
}
#bodyContent a[href ^="ftp://"],
.link-ftp {
	background: url(file_icon.gif) center right no-repeat;
	padding-right: 18px;
}
#bodyContent a[href ^="irc://"],
.link-irc {
	background: url(discussionitem_icon.gif) center right no-repeat;
	padding-right: 18px;
}
#bodyContent a.external[href $=".ogg"], #bodyContent a.external[href $=".OGG"],
#bodyContent a.external[href $=".mid"], #bodyContent a.external[href $=".MID"],
#bodyContent a.external[href $=".midi"], #bodyContent a.external[href $=".MIDI"],
#bodyContent a.external[href $=".mp3"], #bodyContent a.external[href $=".MP3"],
#bodyContent a.external[href $=".wav"], #bodyContent a.external[href $=".WAV"],
#bodyContent a.external[href $=".wma"], #bodyContent a.external[href $=".WMA"],
.link-audio {
	background: url("audio.png") center right no-repeat;
	padding-right: 13px;
}
#bodyContent a.external[href $=".ogm"], #bodyContent a.external[href $=".OGM"],
#bodyContent a.external[href $=".avi"], #bodyContent a.external[href $=".AVI"],
#bodyContent a.external[href $=".mpeg"], #bodyContent a.external[href $=".MPEG"],
#bodyContent a.external[href $=".mpg"], #bodyContent a.external[href $=".MPG"],
.link-video {
	background: url("video.png") center right no-repeat;
	padding-right: 13px;
}
#bodyContent a.external[href $=".pdf"], #bodyContent a.external[href $=".PDF"],
#bodyContent a.external[href *=".pdf#"], #bodyContent a.external[href *=".PDF#"],
#bodyContent a.external[href *=".pdf?"], #bodyContent a.external[href *=".PDF?"],
.link-document {
	background: url("document.png") center right no-repeat;
	padding-right: 12px;
}

/* disable interwiki styling */
#bodyContent a.extiw,
#bodyContent a.extiw:active {
	color: #36b;
	background: none;
	padding: 0;
}
#bodyContent a.external {
	color: #0F8596;
}
/* this can be used in the content area to switch off
special external link styling */
#bodyContent .plainlinks a {
	background: none !important;
	padding: 0 !important;
}
/*
** Structural Elements
*/

/*
** general portlet styles (elements in the quickbar)
*/
.portlet {
	border: none;
	margin: 0 0 0 0;
	padding: 0;
	float: none;
	width: 13em;
	overflow: hidden;
}
.portlet h4 {
	font-size: 95%;
	font-weight: normal;
	white-space: nowrap;
}
.portlet h5 {
	font: 1em Helvetica, Arial, sans-serif;
	text-transform: uppercase;
/*	letter-spacing:0.1em;*/
    font-weight: normal;
	color:#525252;
    border-bottom:1px solid #CCCCCC;
	padding:7px 0 4px 11px;
	margin:22px 0 15px 0;
}
.portlet h6 {
	background: #ffae2e;
	border: 1px solid #2f6fab;
	border-style: solid solid none solid;
	padding: 0 1em 0 1em;
	text-transform: lowercase;
	display: block;
	font-size: 1em;
	height: 1.2em;
	font-weight: normal;
	white-space: nowrap;
}
.pBody {
	font-size: 95%;
	color: black;
	border-collapse: collapse;
	border: none;
	padding: 0 .8em .3em .5em;
}

.portlet h1,
.portlet h2,
.portlet h3,
.portlet h4 {
	margin: 0;
	padding: 0;
}
.portlet ul {
	line-height: 1.5em;
	list-style-type: square;
	list-style-image: url(bullet2.gif);
	font-size: 95%;
}
.portlet li {
	padding: 0;
	margin: 0;
}

/*
** Logo properties
*/

/* @media screen, projection { */
	#p-logo {
		top: 0;
		left: 0;
		position: absolute; /*needed to use z-index */
		z-index: 3;
		height: 155px;
		width: 12em;
		overflow: visible;
	}
	#p-logo h5 {
		display: none;
	}
	#p-logo a,
	#p-logo a:hover {
		display: block;
		height: 155px;
		width: 12.2em;
		background-repeat: no-repeat;
		background-position: 35% 50% !important;
		text-decoration: none;
	}
/* } */
/*
** the navigation portlet
*/

/* @media screen, projection { */
	#p-navigation {
		position: relative;
		z-index: 3;
	}
	#p-navigation a {
		display: block;
	}
	#p-navigation li.active a, #p-navigation li.active a:hover {
		display: inline;
	}
/* } */

#p-navigation .pBody {
	padding-right: 0;
}

#p-navigation li.active a, #p-navigation li.active a:hover {
	text-decoration: none;
	font-weight: bold;
}


/*
** Search portlet
*/
/* @media screen, projection { */
	#p-search {
		position: relative;
		z-index: 3;
	
	}
/* } */
input.searchButton {
	margin-top: 2ex;
	font-size: 95%;
}
#searchGoButton {

	padding-left: .5em;
	padding-right: .5em;
	font-weight: bold;
}
#searchInput {
	width: 12.3em;
	margin: 0;
	font-size: 100%;
}
#p-search .pBody {
	padding: .5em .4em .4em .4em;
	text-align: right;
}

/*
** the personal toolbar
*/
/* @media screen, projection { */
	#p-personal {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
	}
	#p-personal {
		width: 100%;
		white-space: nowrap;
		padding: 0;
		margin: 0;
		border: none;
		background: none;
		overflow: visible;
		line-height: 1.2em;
	}
	#p-personal h5 {
		display: none;
	}
	#p-personal .portlet,
	#p-personal .pBody {
		z-index: 0;
		padding: 0;
		margin: 0;
		border: none;
		overflow: visible;
		background: none;
	}
/* this is the ul contained in the portlet */
	#p-personal ul {
		border: none;
		line-height: 1.4em;
		color: #2f6fab;
		padding: 0 2em 0 3em;
		margin: 0;
		text-align: right;
		list-style: none;
		z-index: 0;
		background: none;
		cursor: default;
	}
	#p-personal li {
		z-index: 0;
		border: none;
		padding: 0;
		display: inline;
		color: #2f6fab;
		margin-left: 1em;
		line-height: 1.2em;
		background: none;
	}
	#p-personal li a {
		text-decoration: none;
		color: #005896;
		padding-bottom: .2em;
		background: none;
	}
	#p-personal li a:hover {
		background-color: white;
		padding-bottom: .2em;
		text-decoration: none;
	}
	#p-personal li.active a:hover {
		background-color: transparent;
	}
	/* the icon in front of the user name, single quotes
	in bg url to hide it from iemac */
	li#pt-userpage,
	li#pt-anonuserpage,
	li#pt-login {
		background: url(user.png) top left no-repeat;
		padding-left: 20px;
		text-transform: uppercase;
	}
/* } */
#p-personal ul {
	text-transform: lowercase;
}
#p-personal li.active {
	font-weight: bold;
}
/*
** the page-related actions- page/talk, edit etc
*/
/* @media screen, projection { */
	#p-cactions {
		font-size:1.3em;
		float: left;
	}
	#menu #p-cactions .pBody ul li{
		list-style: none;
		float: left;
	}
	#menu #p-cactions .pBody li {
		float: left;
		list-style:none;
		border-right:1px solid #ddd;
	}
	#p-cactions li.selected {
		border-color: #fabd23;
		padding: 0 0 .2em 0;
		font-weight: bold;
	}
	#p-cactions li a {
		background-color: #fbfbfb;
		color: #002bb8;
		border: none;
		padding: 0 .8em .3em;
		position: relative;
		z-index: 0;
		margin: 0;
		text-decoration: none;
	}
	#p-cactions li.selected a {
		z-index: 3;
		padding: 0 1em .2em!important;
		background-color: white;
	}
	#p-cactions .new a {
		color: #CBBE8A;
		background: url(new-page.png) center right no-repeat;
		padding-right: 13px;
	}
	#p-cactions li a:hover {
		z-index: 3;
		text-decoration: none;
		background-color: white;
	}
	#p-cactions h5 {
		display: none;
	}
	#p-cactions li.istalk {
		margin-right: 0;
	}
	#p-cactions li.istalk a {
		padding-right: .5em;
	}
	#p-cactions #ca-addsection a {
		padding-left: .4em;
		padding-right: .4em;
	}
	/* offsets to distinguish the tab groups */
	li#ca-talk {
		margin-right: 1.6em;
	}
	li#ca-watch, li#ca-unwatch, li#ca-varlang-0, li#ca-print {
		margin-left: 1.6em;
	}
	#p-cactions .pBody {
		font-size: 1em;
		background-color: transparent;
		color: inherit;
		border-collapse: inherit;
		border: 0;
		padding: 0;
	}
	
#p-cactions .pBody {
	float: left;
	}

/* } */
#p-cactions .hiddenStructure {
	display: none;
}
#p-cactions li a {
	text-transform: lowercase;
}

/*
** the remaining portlets
*/
/* @media screen, projection { */
	#p-tb,
	#p-lang {
		position: relative;
		z-index: 3;
}
/* } */

/* TODO: #t-iscite is only used by the Cite extension, come up with some
 * system which allows extensions to add to this file on the fly
 */
#t-ispermalink, #t-iscite {
	color: #999;
}
/*
** footer
*/
#footer {
	background-color: white;
	border-top: 1px dotted #cccccc;
	margin: 20px 0 1em 0;
	padding: .4em 0 1.2em 0;
	text-align: left;
	font-size: 90%;
}
#footer li {
	display: inline;
	margin: 0 0.32em;
}
/* hide from incapable browsers */
head:first-child+body #footer li { white-space: nowrap; }
#f-poweredbyico, #f-copyrightico {
	margin: 0 8px;
	position: relative;
	top: -2px; /* Bump it up just a tad */
}
#f-poweredbyico {
	float: left;
	height: 1%;
	margin-top:13px;
}
#f-copyrightico {
	float: left;
	height: 1%;
	margin-top:13px;
}

/* js pref toc */
#preftoc {
	margin: 0;
	padding: 0;
}

#preftoc li {
	background-color: #f0f0f0;
	color: #000;
	font-size: 11px;
	margin-left:5px;
}
/* @media screen, projection { */
	#preftoc li {
		margin: 1px -2px 1px 2px;
		float: left;
		padding: 2px 0 3px 0;
		border: 1px solid #fff;
		border-right-color: #716f64;
		border-bottom: 0;
		position: relative;
		white-space: nowrap;
		list-style-type: none;
		list-style-image: none;
		z-index: 3;
	}
/* } */
#preftoc li.selected {
	font-weight: bold;
	background-color: #f9f9f9;
	border: 1px solid #aaa;
	border-bottom: none;
	cursor: default;
	top: 1px;
	padding-top: 2px;
	margin-right: -3px;
}
#preftoc > li.selected {
	top: 2px;
}
#preftoc a,
#preftoc a:active {
	display: block;
	color: #000;
	padding: 0 .7em;
	position: relative;
	text-decoration: none;
}
#preftoc li.selected a {
	cursor: default;
	text-decoration: none;
}
#prefcontrol {
	padding-top: 2em;
	clear: both;
}
#preferences {
	margin: 0;
	border: 1px solid #aaa;
	padding: 1.5em;
	background-color: #F9F9F9;
}

.prefsection, .preftoc{
	border: none;
	padding: 0;
	margin: 0;
	clear: left;
}

.prefsection fieldset {
	border: 1px solid #aaa;
	float: left;
	margin-right: 2em;
}
.prefsection legend {
	font-weight: bold;   
}
.prefsection table, .prefsection legend {
	background-color: #F9F9F9;
}
/* @media screen, projection { */
	.mainLegend {
		display: none;
	}
/* } */
div.prefsectiontip {
	font-size: 95%;
	margin-top: 0;
	background-color: #FFC1C1;
	padding: .2em .7em;
	clear: both;
}
.btnSavePrefs {
	font-weight: bold;
	padding-left: .3em;
	padding-right: .3em;
}

.preferences-login {
	clear: both;
	margin-bottom: 1.5em;
}

.prefcache {
	font-size: 90%;
	margin-top: 2em;
}

div#userloginForm form,
div#userlogin form#userlogin2 {
	margin: 0 3em 1em 0;
	border: 1px solid #aaa;
	clear: both;
	padding: 1.5em 2em;
	background-color: #f9f9f9;
	float: left;
}

div#userloginForm table,
div#userlogin form#userlogin2 table {
	background-color: #f9f9f9;
}

div#userloginForm h2,
div#userlogin form#userlogin2 h2 {
	padding-top: 0;
}

div#userlogin .captcha {
	border: 1px solid #bbb;
	padding: 1.5em 2em;
	width: 400px;
	background-color: white;
}


#userloginprompt, #languagelinks {
	font-size: 85%;
}

#login-sectiontip {
	font-size: 85%;
	line-height: 1.2;
	padding-top: 2em;
}

#userlogin .loginText, #userlogin .loginPassword {
	width: 12em;
}

#userloginlink a, #wpLoginattempt, #wpCreateaccount {
	font-weight: bold;
}

/* @media screen, projection { */
	/*
	** IE/Mac fixes, hope to find a validating way to move this
	** to a separate stylesheet. This would work but doesn't validate:
	** @import("IEMacFixes.css");
	*/
	/* tabs: border on the a, not the div */
	* > html #p-cactions li { border: none; }
	* > html #p-cactions li a {
		border: 1px solid #aaa;
		border-bottom: none;
	}
	* > html #p-cactions li.selected a { border-color: #fabd23; }
	/* footer icons need a fixed width */
	* > html #f-poweredbyico,
	* > html #f-copyrightico { width: 88px; }
	* > html #bodyContent,
	* > html #bodyContent pre {
		overflow-x: auto;
		width: 100%;
		padding-bottom: 25px;
	}
/* } */

/* more IE fixes */
/* float/negative margin brokenness */
* html #footer {margin-top: 0;}
* html #column-content {
	display: inline;
	margin-bottom: 0;
}
* html div.editsection { font-size: smaller; }
#pagehistory li.selected { position: relative; }

/* Mac IE 5.0 fix; floated content turns invisible */
* > html #column-content {
	float: none;
}
* > html #column-one {
	float: left;
	z-index: 100;
	position: relative;
	left: 0;
	top: 0;
}
* > html #footer {
	margin-left: 13.2em;
}
.redirectText {
	font-size: 150%;
	margin: 5px;
}

.printfooter {
	display: none;
}

.not-patrolled {
	background-color: #ffa;
}
div.patrollink {
	font-size: 75%;
	text-align: right;
}
span.newpage, span.minor, span.searchmatch, span.bot {
	font-weight: bold;
}
span.unpatrolled {
	font-weight: bold;
	color: red;
}

span.searchmatch {
	color: red;
}
.sharedUploadNotice {
	font-style: italic;
}

span.updatedmarker {
	color: black;
	background-color: #0f0;
}
span.newpageletter {
	font-weight: bold;
	color: black;
	background-color: yellow;
}
span.minoreditletter {
	color: black;
	background-color: #c5ffe6;
}

table.gallery {
	border: 1px solid #ccc;
	margin: 2px;
	padding: 2px;
	background-color: white;
}

table.gallery tr {
	vertical-align: top;
}

table.gallery td {
	vertical-align: top;
	background-color: #f9f9f9;
	border: solid 2px white;
}

table.gallery td.galleryheader {
	text-align: center;
	font-weight: bold;
}

div.gallerybox {
	margin: 2px;
	width:  150px;
}

div.gallerybox div.thumb {
	text-align: center;
	border: 1px solid #ccc;
	margin: 2px;
}

div.gallerytext {
	font-size: 94%;
	padding: 2px 4px;
}

span.comment {
	font-style: italic;
}

span.changedby {
	font-size: 95%;
}

.previewnote {
	text-indent: 3em;
	color: #c00;
	border-bottom: 1px solid #aaa;
	padding-bottom: 1em;
	margin-bottom: 1em;
}

.previewnote p {
	margin: 0;
	padding: 0;
}

.editExternally {
	border: 1px solid gray;
	background-color: #ffffff;
	padding: 3px;
	margin-top: 0.5em;
	float: left;
	font-size: small;
	text-align: center;
}
.editExternallyHelp {
	font-style: italic;
	color: gray;
}

li span.deleted, span.history-deleted {
	text-decoration: line-through;
	color: #888;
	font-style: italic;
}

.toggle {
	margin-left: 2em;
	text-indent: -2em;
}

/* Classes for EXIF data display */
table.mw_metadata {
	font-size: 0.8em;
	margin-left: 0.5em;
	margin-bottom: 0.5em;
	width: 300px;
}

table.mw_metadata caption {
	font-weight: bold;
}

table.mw_metadata th {
	font-weight: normal;
}

table.mw_metadata td {
	padding: 0.1em;
}

table.mw_metadata {
	border: none;
	border-collapse: collapse;
}

table.mw_metadata td, table.mw_metadata th {
	text-align: center;
	border: 1px solid #aaaaaa;
	padding-left: 0.1em;
	padding-right: 0.1em;
}

table.mw_metadata th {
	background-color: #f9f9f9;
}

table.mw_metadata td {
	background-color: #fcfcfc;
}

table.collapsed tr.collapsable {
	display: none;
}


/* filetoc */
ul#filetoc {
	text-align: center;
	border: 1px solid #aaaaaa;
	background-color: #f9f9f9;
	padding: 5px;
	font-size: 95%;
	margin-bottom: 0.5em;
	margin-left: 0;
	margin-right: 0;
}

#filetoc li {
	display: inline;
	list-style-type: none;
	padding-right: 2em;
}

input#wpSummary {
	width: 80%;
}

/* @bug 1714 */
input#wpSave, input#wpDiff {
	margin-right: 0.33em;
}

#editform .editOptions {
	display: inline;
}

#wpSave {
	font-weight: bold;
}

/* Classes for article validation */

table.revisionform_default {
	border: 1px solid #000000;
}

table.revisionform_focus {
	border: 1px solid #000000;
	background-color:#00BBFF;
}

tr.revision_tr_default {
	background-color:#EEEEEE;
}

tr.revision_tr_first {
	background-color:#DDDDDD;
}

p.revision_saved {
	color: green;
	font-weight:bold;
}

#mw_trackbacks {
	border: solid 1px #bbbbff;
	background-color: #eeeeff;
	padding: 0.2em;
}


/* Allmessages table */

#allmessagestable th {
	background-color: #b2b2ff;
}

#allmessagestable tr.orig {
	background-color: #ffe2e2;
}

#allmessagestable tr.new {
	background-color: #e2ffe2;
}

#allmessagestable tr.def {
	background-color: #f0f0ff;
}


/* noarticletext */
div.noarticletext {
	border: 1px solid #ccc;
	background: #fff;
	padding: .2em 1em;
	color: #000;
}

div#searchTargetContainer {
	left:       10px;
	top:        10px;
	width:      90%;
	background: white;
}

div#searchTarget {
	padding:    3px;
	margin:     5px;
	background: #F0F0F0;
	border:     solid 1px blue;
}

div#searchTarget ul li {
	list-style: none;
}

div#searchTarget ul li:before {
	color: orange;
	content: "\00BB \0020";
}

div.multipageimagenavbox {
   border: solid 1px silver;
   padding: 4px;
   margin: 1em;
   -moz-border-radius: 6px;
   background: #f0f0f0;
}

div.multipageimagenavbox div.thumb {
   border: none;
   margin-left: 2em;
   margin-right: 2em;
}

div.multipageimagenavbox hr {
   margin: 6px;
}

table.multipageimage td {
   text-align: center;
}

/** Special:Version */

table#sv-ext, table#sv-hooks {
	margin: 1em;
	padding:0em;
}

#sv-ext td, #sv-hooks td,
#sv-ext th, #sv-hooks th {
	border: 1px solid #A0A0A0;
	padding: 0 0.15em 0 0.15em;
}
#sv-ext th, #sv-hooks th {
	background-color: #F0F0F0;
	color: black;
	padding: 0 0.15em 0 0.15em;
}
tr.sv-space{
	height: 0.8em;
	border:none;
}
tr.sv-space td { display: none; }

/*
  Table pager (e.g. Special:Imagelist)
  - remove underlines from the navigation link
  - collapse borders
  - set the borders to outsets (similar to Special:Allmessages)
  - remove line wrapping for all td and th, set background color
  - restore line wrapping for the last two table cells (description and size)
*/
.TablePager_nav a { text-decoration: none; }
.TablePager { border-collapse: collapse; }
.TablePager, .TablePager td, .TablePager th { 
	border: 0.15em solid #777777;
	padding: 0 0.15em 0 0.15em;
}
.TablePager th { background-color: #eeeeff }
.TablePager td { background-color: #ffffff }
.TablePager tr:hover td { background-color: #eeeeff }

.imagelist td, .imagelist th { white-space: nowrap }
.imagelist .TablePager_col_links { background-color: #eeeeff }
.imagelist .TablePager_col_img_description { white-space: normal }
.imagelist th.TablePager_sort { background-color: #ccccff }

.templatesUsed { margin-top: 1.5em; }

.mw-summary-preview {
	margin: 0.1em 0;
}
#toolbar { 
	
	margin:0 0 0 0;
	padding:0 0 0 0;
	}

.mw-plusminus-null { color: #aaa; }


/*Main Navbar */

#nav {
	font-size:1em;
	width: 100%;
	}
	
#nav, #nav ul {
	list-style: none;
	line-height: 1;
	}

#nav a {
	display: block;
	text-decoration: none;
	border:none;
	color:#666666;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: lighter;
 	text-transform: uppercase;
	}
	
#nav a:hover {
	display: block;
	text-decoration: none;
	border:none;
	color:#333333;
	}
	
#nav a:visited {
	display: block;
	text-decoration: none;
	border:none;
	color:#666666;
	}

#nav li {
	float: left;
	list-style:none;
	margin:0 1em 0 0;
	}
	
#nav li.selected a{
	float: left;
	list-style:none;
	color:#1C2326;
	text-decoration: underline;
	}
	
#nav li.new a{
	float: left;
	list-style:none;
	color:#a8a669;
	}

#nav .current_page_item {
	text-decoration:underline;
	color:#333333;
	}	
	
	
/* Dropdown Menus */		
#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 174px;
	border-bottom: 1px solid #ccc;
	}

#nav li li {
	width: 172px;
	border-top: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-left: 1px solid #ddd;
	background: #f2f2f2;
	}

#nav li li a, #nav li li a:visited {
	font-weight:normal;
	font-size:0.8em;
	color:#333;
	}

#nav li li a:hover, #nav li li a:active {
	background:#ccc;
	}	
		
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
	}

a.main:hover
{	background:none;
	}
	
* #nav, #nav ul {
    float:left;
    clear:both;
	list-style: none;
	line-height: 18px;
	}
	
/* Meta */

.right {
	float: right;
	margin-right: 15px;
	}
	
.left {
	float: left;
	}

.meta ul {
	margin-top:0px;
	float: left;
	width: auto;
}

.meta li {
	list-style:none;
	display:inline;
	margin-top:5px;
	margin-left:5px;
	text-align:right;
	line-height:25px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 102%;
	}

.meta li a:link, .subnav li a:visited {
	color:#CC0000;
	padding:4px 4px 4px 8px;
	}
		
.meta li a:hover, .subnav li a:active {
	text-decoration:none;
	color: #FF0000;
	}

.meta li li a:link, .subnav li li a:visited {
	border-left:none
	}
	
.meta li a.new {
	color:#a8a669;
	background: none;
	}
	
.meta li a:visited {
	color:#CC0000;
	background: none;
	}
	
/* Logo */
	
#logo {

	float:left;
	}
	
#wikiPreview {
	margin:0 0 0 0;
	padding:0 0 0 0;
	}
	
/* Referencias, del plugin 'cite.php' */

ol.references{
	font-family: Georgia;
	font-size: 0.9em;
	margin-left: 100px;
}

ol.references li{
	text-indent: 0;
	margin-bottom: 1em;
}

Diseño Wiki Semántica

Sitio Web de la Escuela

Estudio y Análisis del Sitio

Mapa de Navegación

Análisis Crítico del Mapa

Audiencias

Propuestas

Propuesta I

Propuesta II

Diagramación General

Propuesta III

Índice de Contenido

Proyecto Final: Wiki Semántica

Ámbito Semántico

Objetos Semánticos

Mapa de Clases

Rediseño de la Wiki

Mapa de Navegación

Índice de Contenido

Wireframes

Primera Versión

Segunda Versión

Tercera Versión

Cuarta Versión

Diseño de Interfaz

Programación del sitio

Mapas de divs

Organización y Construcción de Contenido

Construcción del Sidebar

Edición de Páginas

Extensiones Aplicables

Trabajo con Usuarios

Creación de Personas y Escenarios

1º Caso

2º Caso

3º Caso

4º Caso

Protocolo para Pruebas con Usuarios

Descripción de Tareas

Desarrollo de las pruebas

TAREA 1: Crear una nueva página

TAREA 2: Crear un nuevo proyecto (como objeto semántico)

TAREA 3: Crearse como persona (semántica)

TAREA 4: Ingresarse como alumno en un curso

Resultados de las pruebas

Diseño Final

Sidebar

Wireframes

Interfaz

Códigos de Programación

Código estructura

CSS