Editar Nuevo Proyecto: Eleonora Aldea: Sub-sección Alumnos Primer Año

Texto libre:

=Documentación= ==Primera Parte: Análisis comunidad de sitios de la escuela== Para comenzar el estudio realizamos un análisis de los sitios que se agrupan dentro del servidor de la escuela. Buscamos encontrar los distintos tipos de contenidos ofrecidos a distintos tipos de audiencias. Identificar estas audiencias y contenidos nos ayudará a encontrar un área en la cual desarrollar nuestro proyecto. El primer paso para encontrar estas audiencias y contenidos, es realizar mapas de navegación de los 4 sitios principales en la comunidad : <gallery> Image:Pantallazo ead.png|http://ead.pucv.cl Sitio principal de la escuela, sirve como un portal de noticias y de información, tanto histórica como reciente. Image:Pantallazo travesias.png|http://travesias.ead.pucv.cl Sitio colaborativo en el cual se busca tener un registro audiovisual de las travesías realizadas por todos sus participantes. Image:Pantallazo casiopea.png|http://wiki.ead.pucv.cl Casiopea es la wiki de la escuela en la cual profesores y alumnos van registrando su quehacer académico. Image:Pantallazo amereida.png|http://amereida.cl Sitio de la Corporación Cultural Amereida, donde se explica su origen y su constitución actual. </gallery> ===Mapa de navegación y análisis: http://ead.pucv.cl=== [[Archivo:Mapa navegacion eleonora.png|670px|thumb|left|Mapa de navegación]] <gallery> Image:analisis eadpucvcl uno.png|Al clickear en las categorías se despliega un menú en el cual muchas veces el primer link corresponde a la misma página a la cual se llega si se apreta en la categoría.. Image:Analisis eadpucvcl dos.png|Utilización de un calendario de Google Docs en la sección “Calendario” dentro de la categoría “Alumnos” Image:Analisis eadpucvcl tres.png|Sección del programa de Diseño Gráfico, bajo la categoría “Carreras”, se mezclan contenidos en la barra lateral, ya que ofrece vínculos sobre el Archivo Histórico. </gallery> El sitio está estructurado en base a categorías madre, dentro de las cuales se encuentran las distintas páginas y artículos. Estas categorías son Escuela, Amereida, Alumnos, Carreras, Postgrado y Mundo. Uno de los primeros problemas con los que nos encontramos navegando el sitio es que estas categorías muchas veces conducen a una especie de contenedor de los artículos que se encuentran bajo esa categoría o a una página hija, en vez de poseer algún índice o introducción al tema. A pesar de ser un problema que tiene que ver con el CMS del sitio, puede generar confusión en la audiencia que se repitan contenidos. A través de los sitios de la escuela existe una implementación de los distintos servicios ofrecidos por otros sitios, como por ejemplo Google Maps, Google docs, Flickr, etc. A pesar de ser algo que puede ser visto como ventaja, ya que significa que como servicio moderno la escuela saca provecho de los distintos servicios gratuitos disponibles, ésto puede producir una incoherencia visual entre el diseño de estos servicios, y el diseño del sitio, ya que pueden ser personalizados, pero hay detalles (por ejemplo, la utilización de distintas tipografías) que no se pueden cambiar. Otro problema relevante es la mezcla de contenidos en la barra lateral del sitio. A pesar de ser útil para ciertos casos en los que se requiere conocer más sobre un tema, su jerarquía visual está muy disminuida y rara vez uno presta real atención al contenido ahí presentado, ya que se pierde entre las imágenes que rotan, y los enlaces que se presentan sin un orden claro en cómo deben visitarse. En el caso de la imagen, se mezclan contenidos, ya que a pesar de encontrarnos en un sitio sobre Diseño, la alternativa que presenta el sidebar tiene que ver con el Archivo Histórico, y no con Diseño. ===Mapa de navegación y análisis: http://travesias.ead.pucv.cl=== [[Archivo:Mapatravesias.png|300px|thumb|left|Mapa de navegación]] <gallery> Image:analisis travesias uno.png|El sitio se estructura en las distintas travesías que se han realizado, organizadas por año, ése es el núcleo del sitio, las otras páginas son informativas y breves. Image:Analisis travesias dos.png|El fondo del sitio es un Google Map en el cual se encuentran todas las travesías expuestas, lo que genera una distracción en cuanto a la navegación y un agotamiento visual. </gallery> El sitio de las travesías es el más “pequeño” dentro de los sitios de la escuela, en el sentido de que es el que menos categorías posee, sin embargo llega a ser uno de los más complejos debido a la gran cantidad de información disponible en ella, y también ya que corresponde a un sitio en el cual se promueve la participación de distintos agentes. Aparte se debe considerar que son muchas las travesías que se busca exponer, por lo que el tiempo de navegación puede llegar a ser muy largo, y es ahí donde encuentro el principal problema ya que al tener de fondo la aplicación Google Maps, el sitio se hace lento de cargar y visualmente agotador. ===Mapa de navegación y análisis: http://amereida.cl=== [[Archivo:Mapa-travesias-amereida.png|400px|thumb|left|Mapa de navegación]] <gallery> Image:Analisis amereidacl.png|Sección principal en el home del sitio, no existe un diseño realmente identificatorio con la institución o lo que promueve, diseño muy simple, que raya en lo básico. </gallery> El sitio de la corporación cultural Amereida se relaciona con los otros tres sitios de la escuela mediante enlaces o mediante contenidos, por lo que debe ser considerado parte del estudio. En este caso el sitio de la corporación es el más distinto en cuanto a diseño, ya que su simpleza es extrema. La navegación se basa absolutamente en la utilización de las noticias, ya que éstas aparecen en distintas partes del sitio, y las otras páginas son muy estáticas, se presenta información sin capacidad de retroalimentación por parte del lector, lo que lo vuelve tedioso e incluso aburrido en partes. ===Mapa de navegación y análisis: http://wiki.ead.pucv.cl=== [[Archivo:Mapacasiopeaentero.png|670px|thumb|left|Mapa de navegación]] <gallery> Image:Analisis casiopea 1.png|Sección “Escuela” dentro de Casiopea, en las distintas páginas de las secciones encontramos los artículos bajo esa categoría, en algunos casos introducidas, en otros no. Image:Analisis casiopea 2.png|En el sitio de Casiopea se introduce una nueva paleta de colores, y a pesar de que los enlaces siguen siendo rojos, es un diseño distinto al que poseen los otros sitios, más sobrios. </gallery> Casiopea es la wiki de la escuela, y es el sitio más complejo ya que al ser generado por los mismos alumnos requiere una serie de normas para que se vea y funcione correctamente, lo que no siempre es cumplido, perdiéndose páginas dentro de las categorías, resultando en nombres duplicados dentro de las páginas, etc. El principal problema en la navegación del sitio es que muchos artículos están perdidos y es muy difícil encontrarlos, hay mucha información, pero es engorroso encontrarla y quizá por eso mucha gente se pierde del rico material que la wiki ofrece. ===Análisis: Contenido y Audiencias=== Luego de haber analizado y construido los mapas de navegación de los contenidos de los sitios, podemos concluir que hay dos tipos de contenidos principales: '''> CONTENIDO ESTÁTICO''' '''> CONTENIDO DINÁMICO''' Por contenido estático, nos referimos básicamente al contenido que informa sobre la escuela, sobre sus orígenes, sobre sus fundamentos, principalmente encontrados en las secciones “Escuela” y “Amereida” del sitio ead.pucv.cl, así como la mayoría del contenido encontrado en el sitio de amereida.cl El contenido dinámico sería básicamente el que está en constante renovación, refiriéndonos principalmente a los artículos y noticias que son los que aparecen en el home del sitio, y también los contenidos que encontramos en Casiopea, y en el sitio de Travesías, ya que buscan informar sobre asuntos que están siempre ocurriendo, Podemos comenzar el análisis de las audiencias considerando que el contenido estático busca informar a un lector más ajeno a la escuela, mientras que el contenido dinámico informa sobre el quehacer de la escuela a un lector más conocedor. <gallery> Image:Contenido estatico.png|Las secciones más informativas del sitio están claramente dirigidas a personas extranjeras a la escuela, o postulantes que buscan saber sobre los fundamentos de la escuela. Image:Contenido dinamico.png|El contenido dinámico busca llamar más al lector interno de la escuela, al alumno o al profesor que busca enterarse de lo que está ocurriendo en el quehacer del ambiente en el que se mueve Image:Contenido principal.png|Sección de Google Analytics sobre el sitio ead.pucv.cl que nos deja ver las páginas más visitadas dentro del sitio, claramente hay una tendencia hacia el contenido estático. Image:Referentes sitio.png|En esta sección de el análisis de Google Analytics podemos ver que un gran porcentaje de las visitas llega a través de buscador por Google, lo que nos indica que hay un gran porcentaje de lector externo. </gallery> [[Archivo:Audienciascontenidos.jpg |660px]] A partir del análisis podemos identificar dos audiencias base: '''> LECTOR EXTERNO''' '''> LECTOR INTERNO''' Dentro del lector externo encontramos a aquellas personas que visitan los sitios de la escuela y no son parte de ella, dentro de esta categoría distingo principalmente a POSTULANTES, y EXTRANJEROS. Refiiéndonos a aquellos lectores que buscan información sobre la escuela considerando ingresar a ella, y todos aquellos otros que quieren informarse. Y al hablar de lector interno me refiero a todas aquellas personas que visitan los sitios de la escurla y sí son parte de ella, dentro de esta categoría distingo principalmente a ALUMNOS, y PROFESORES, como los principales representantes del lector interno (entendiéndose también que podrían encontrarse ex-alumnos, ayudantes, administrativos, etc) Siendo estas categorías bastante amplias, funcionan para realizar la propuesta de diseño y desarrollo que a mí parecer mejoraría la experiencia de navegación y haría del sitio un portal más completo. ==Segunda Parte: Propuesta de proyecto== Luego del análisis de la comunidad de sitios de la escuela, principalmente luego de analizar las audiencias a las cuales están dirigidos los contenidos, me quedé con la impresión de que hay una audiencia importante que visita los sitios de la escuela y que no está siendo considerada como debe ser: el alumno de primer año. Todos los años aproximadamente 100 alumnos (o más)entran a primer año sabiendo poco, o nada, sobre la escuela, y el sitio de la escuela no facilita un conocimiento amigable y práctico. Como punto de partida planteo el nombrar a este alumno, ya que muchas veces nos hemos hecho llamar como comunidad de distintas formas, sin embargo, para facilitar su reconocimiento en los distintos servicios de internet de la escuela, podrían ser llamados de una forma específica los alumnos de primer año que representan una especie de iniciante, o híbrido entre postulante y alumno, ya que están en un limbo entre afuera y dentro de la escuela. Nombrarlos haría más fácil su reconocimiento e identificación como alumnos de la escuela. Propongo: * Bisoño '' sinónimo de novato'' *Grumete '' aprendiz de marinero'' *Príncipes ''el que principia'' *Pipiolo ''sinónimo de novato'' *Volandón ''cría de pájaro'' ===Audiencia: Primera Aproximación=== Al hablar del alumno de primer año hay que considerar muchos factores distintos, primero que pueden provenir directo del colegio, como pueden venir de otra carrera universitaria, sin embargo, debido a que la gran mayoría proviene del colegio nos vamos a basar en esa suposición. Sin embargo, muchas veces se supone cierta base cultural que los colegios estarían obligados a entregar, y muchas veces en la escuela esa base cultural está asumida, sin embargo muchas veces el alumno de primer año no conoce términos y/o conceptos sofisticados que pueden ser utilizados en las clases a las que acude. Existe una desorientación e intimidación natural que viene con ingresar a un ambiente totalmente nuevo, incluso muchas veces los alumnos en primer año provienen de otras ciudades, por lo que el desconocimiento sobre facetas prácticas de la experiencia universitaria también deben ser consideradas. El lenguaje debe ser amistoso y servir como un anfitrión/guía. Muchas veces los alumnos en primer año se sienten desilusionados ya que la escuela aparece como algo muy abstracto y difícil de comprender, por lo que ven a las personas de los cursos superiores como lejanos y “superiores” de cierta forma. '''CÓMO ES?''' * Tiene entre 17 y 20 años * Proviene de distintas partes del país * Egresado de 4º medio * Estrato social medio o alto. * Interés por el ambiente artístico/creativo * Sensación de miedo o inseguridad * Desorientado * Acostumbrado a un sistema educativo distinto * No conocen a más gente en la escuela * Se siente aparte del quehacer de la escuela * Posee disponibilidad a aprender * Posee un nivel tecnológico alto * Posee un nivel intelectual básico ===Contenido: La Propuesta Inicial=== Básicamente, propongo una sección, bajo la categoría “ALUMNOS” del sitio ead.pucv.cl, en la cual se agrupen los distintos artículos (actualmente esparcidos en los distintos sitios) que considero pertinentes para un alumno de primer año que desee informarse sobre el ambiente en el cual está inserto, entiéndase: la página con las fotos del cuerpo docente, los programas de los ramos, la página de la biblioteca constel con los textos fundamentales, la página de las travesías, etc. Estas páginas serían agrupadas bajo este portal, con su debida introducción en un lenguaje apropiado. Además de esta “recopilación” de artículos necesarios y ya existentes, propongo la creación de nuevas páginas con información relevante para alumnos de primer año, como un mapa de la escuela con los nombres de las salas, o un mapa de cómo llegar a la escuela con la respectiva locomoción desde distintas comunas periféricas, descripciones y fotografías no sólo de los profesores sino que de los funcionarios (Mario en la cafetería, Elsa en la librería, Helga en secretaría, etc), y una página especial con enlaces a los referentes con los que se verán enfrentados en las clases (por ejemplo Rimbaud, Moby Dick, el Futurismo, etc), y un espacio donde poder plantear preguntas. '''QUÉ NECESITA''' * Ubicarse dentro de la escuela * Sentirse integrado * Conocer el programa de su carrera * Conocer a los profesores * Conocer a los funcionarios * Saber cómo llegar a la escuela * Poder hacer preguntas * Que alguien responda esas preguntas * Conocer los temas a los cuales será expuesto * Conocer a sus compañeros de escuela * Datos prácticos sobre materiales * Datos prácticos de supervivencia * Conocer el modo de la escuela ===Propuesta mapa de navegación 1=== [[Archivo:Mapapropuesta.png]] ===Propuesta Mapa de Navegación=== [[Archivo:Mapapropuesta sitio primer anho2.png]] Finalmente se define el sitio como un "recolectador" de una serie de artículos que serán integrados a las secciones ya existentes del sitio de la escuela. Al añadir este nuevo contenido, se creará esta sub-sección para alumnos de primer año que presentará introducciones a las páginas, y un lenguaje de bienvenida, y enlaces a las páginas. El contenido nuevo que se creará para la sección "Escuela", serán una página de '''Funcionarios''', con fotografías y descripciones de auxiliares, secretarias, etc, una página de '''Servicios''' que explicará los que atienden y los horarios de la cafetería, librería, sala de computación, etc, y una página de '''Campus''' que contendrá planos de la Escuela, y la Ciudad Abierta con sus salas y mapas de cómo llegar a estos dos lugares. Y también se creará en Casiopea, una página especial para que los alumnos de primer año publiquen una lista de preguntas que podrían ser respondidas por alumnos de cursos superiores, y que estaría en el Home de Casiopea, junto a las Preguntas Frecuentes. ==wireframes== <gallery> Image:Maquetagf1.jpg| Maqueta Inicial 1 Image:Maquetagf2.jpg| Maqueta Inicial 2 Image:Maquetagf3.jpg| Maqueta Inicial 3 Image:Maquetagf4.jpg| Maqueta Inicial 4 </gallery> <gallery> Image:Mockup1.png| wireframe home + enlaces Image:Mockup2.png| wireframe primera pantalla sección (1) Image:Mockup3.png| wireframe primera pantalla sección (2) Image:Mockup4.png| wireframe primera pantalla sección (3) Image:Mockup5.png| wireframe conoce tu escuela Image:Mockup6.png| wireframe plano </gallery> Se observa primero el wireframe del Home de la escuela, con las dos formas de llegar a la sección. Una a través del menú de la sección "Alumnos", y la segunda mediante una imagen dinámica que daría la bienvenida a los alumnos de primer año desde el sidebar, y los llevaría a la sección. En los dos siguientes wireframes, están las dos propuestas de segunda pantalla de la sección, en la primera existiría un slideshow de imágenes referentes al quehacer de la escuela, y abajo los enlaces a las 4 categorías: Conoce tu escuela, La poesía, Aprendiendo el Oficio, y Saber más Allá, que son las páginas contenedoras de los enlaces a las otras páginas. En el segundo caso en vez de un slideshow de imágenes es un texto introductorio el que recibe al alumno. ==Tercera Parte: Propuesta Final== Se trabaja sobre lo aprendido y lo corregido a partir de las primeras dos fases del proyecto, para avanzar hacia la propuesta final del Proyecto, la cual llevaremos a cabo hasta su implementación en línea. Los pasos de esta tercera parte (y final) serán los siguientes: * Índice de Contenidos * Mapa de Navegación * Maquetas de baja intensidad (Wireframes) * Maquetas de alta intensidad (Diseño de pantallas) * Mapa de Divs * Programación del diseño * Pruebas de usuario * Correcciones finales * Implementación ===Índice de Contenidos=== #Inicio (Bienvenida) #Conoce tu Escuela ##Historia ##Campus (*) ###Matta ####Plano #####Salas ####Cómo llegar ###Ciudad Abierta ####Plano #####Obras ####Cómo llegar ##Autoridades ##Profesores (#) ##Funcionarios (*) ##Servicios (#) #Dimensión Poética ##Biblioteca Constel ##Travesías ##Ciudad Abierta #Aprendiendo el oficio ##Programa Arquitectura ###Ramos ##Programa Diseño Gráfico ###Ramos ##Programa Diseño Industrial ###Ramos #Más allá ##Lecturas perpendiculares ##Dudas y preguntas (*) (*) Contenido no existente en el sitio actual de la escuela, que deberá ser generado antes del proceso de pruebas con los usuarios. (#) Contenido existente en el sitio actual de la escuela, pero que deberá ser modificado, o mejorado antes del proceso de pruebas con los usuarios. En el caso del contenido que habrá que generar, la parte principal sería el plano de ubicación de la escuela, ya que es un aporte real a los alumnos que no conocen bien la ubicación de los servicios y del totalidad de las salas. Además de la creación de una sección en la cual los alumnos de primer año podrán postear preguntas para ser respondidas por alumnos de cursos superiores utilizando un plugin de Wordpress. En el caso del contenido que habrá que modificar, se propone la modificación de la página del Cuerpo Docente, renombrándola por Profesores, y añadiendo a los profesores de los ramos electivos y de Cultura del Cuerpo, además de la adición de los ramos que imparten a la totalidad de profesores. ===Mapa de navegación final=== [[Archivo:Mapa propuesta final principes.png|800px]] ===Wireframes=== [[Archivo:Wireframe 1 principes.png|500px|thumb|none|Wireframe inicio sección]] # Título, se hará hincapié en un lenguaje receptivo y amigable. # Menú en barra lateral, se despliegan las 4 secciones principales # Imagen que cambiará cuando el mouse se pose encima de los links de una de las 4 secciones en la barra laterial, las imágenes corresponderán a la temática que se está presentando. Ejemplo: cuando el mouse se pose sobre "Conoce tu Escuela", la imagen será una fotografía del campus de la Escuela. De la navegación del resto del sitio de la escuela se mantendrá intacto el menú principal, el footer, y la información de contacto de la escuela. [[Archivo:Wifreframe conocetuescuela.png|500px|thumb|none|Wireframe "Conoce tu Escuela"]] # Título, será el mismo que el título de la sección. # Cuando se encuentre en la página de "portada" de la sección el link se desactivará. # Slideshow de imágenes correspondientes a la temática de la sección. # Enlaces a las páginas de la sección, utilizando una pequeña descripción introductoria. De la navegación del resto del sitio de la escuela se mantendrá intacto el menú principal, el footer, y la información de contacto de la escuela [[Archivo:Wifreframe matta.png|500px|thumb|none|Wireframe "Campus:Matta" ]] # Plano, en el cual se encontrarán las salas y lugares importantes utilizando números # Mapa de Google Maps en el cual se mostrará cómo llegar a la Escuela, dónde tomar las micros, etc. # Especificaciones para distintos transportes y distintas procedencias. (nota: en las páginas dentro de las secciones, se activará nuevamente en enlace a la "portada" de la sección) [[Archivo:Wifreframe popup sala.png|500px|thumb|none|Wireframe "Campus:Matta:Sala" ]] # Al apretar uno de los números que muestran dónde están las salas se abrirá un popup que contendrá imágenes y la información relevante de esa sala, como el profesor a cargo, la función que cumple, los ramos que ahí se imparten, etc. [[Archivo:Wifreframe funcionarios.png|500px|thumb|none|Wireframe "Funcionarios" ]] # La página de funcionarios mantendrá la misma estructura que la página de profesores, sin embargo tendrá dos columnas, en las cuales se mostrará la fotografía del funcionario, el lugar donde trabaja, y el horario en el que pueden ser encontrados. [[Archivo:Wifreframe servicios.png|500px|thumb|none|Wireframe "Servicios" ]] # En vez de la rotación de imágenes que tiene hoy la sección "Servicios", se utilizará el plano que se usó para demostrar la ubicación de las salas, con la ubicación de los Servicios #Luego, en una lista se describirá brevemente el servicio, añadiendo el horario, y si es pertinente, precios de referencia. [[Archivo:Wireframe preguntas.png|500px|thumb|none|Wireframe "Preguntas" ]] # Ésta sección será posible gracias a la utilización de un plugin de Wordpress llamado FAQ-Tastic, en la primera parte se presentarán las últimas preguntas realizadas. #Abajo se pueden ingresar preguntas, enviando simplemente la consulta. ===Pantallas=== [[Archivo:Pantalla 1 principes.png|500px|thumb|none|Pantalla inicio sección]] ''Fotografía de Jaime Reyes, uso temporal por mientras se registra en forma propia el campus y las actividades'' En la primera pantalla se hará hincapié en la imagen. Las fotos se irán desvaneciendo una en otra a medida el mouse se pose sobre los enlaces a las secciones. El diseño de la interfaz respeta el diseño del sitio principal, simplemente elimina el sidebar. [[Archivo:Pantalla conocetuescuela.png|500px|thumb|none|Pantalla "Conoce tu Escuela"]] Arriba de la pantalla se presenta un slide de fotos controlable por el usuario, con imágenes pertinentes al tema que se está tratando. [[Archivo:Pantalla funcionarios.png|500px|thumb|none|Pantalla "Funcionarios" ]] La pantalla de funcionarios tendría fotografías y descripciones de los funcionarios, al estilo de la página de profesores pero con dos columnas. Nota Personal: * Quedaría pendiente idear una forma de plano que pudiera desplegar la totalidad de las salas de forma clara y simple, abarcando la totalidad de pisos y extensión. Ésta parte del trabajo se me adivina, quizás, el punto más importante del proyecto. * Existe un trabajo fotográfico importante por realizar que consistiría en registrar a los funcionarios, las secretarias, las salas y el campus. ===Mapa de Divs=== [[Archivo:Mapa de divs principes.png|500px]] ==Personas y Escenarios== ===Caso 1=== [[Archivo:Escenariosypersonas1 principes.png|thumb|150px|right]] *'''Nombre:''' Cristóbal Vallejos *'''Edad:''' 18 años *'''Ocupación:''' Estudiante de primer año *'''Nivel del usuario:''' Avanzado '''Descripción:''' Tiene 18 años, pertenece a un estrato socioeconómico medio, ha tenido computador desde pequeño, por lo que sabe manejarse en Internet y en distintas aplicaciones. No tiene muchos amigos, ha sido siempre más bien tímido, por lo que se refugia en la música y en la literatura. Llega a estudiar Diseño a la Escuela de Diseño y Arquitectura de la Católica de Valparaíso, luego de haber vivido toda su vida en Villarrica. Vive en Valparaíso con 3 estudiantes más, con los cuales comparte computador por mientras le envían el suyo desde Villarrica. '''Escenario de uso:''' Cristóbal acaba de llegar a Valparaíso a su nueva casa, no conoce a las personas con las que vive, y no conoce a nadie en la Quinta Región por lo que decide buscar en el sitio de la escuela información sobre cómo llegar a la Ciudad Abierta, lugar donde se realizará la bienvenida a Primer Año. Para hacerlo debe pedir prestado el computador que se encuentra en el departamento que comparte, el cual es más bien antiguo y se conecta a Internet usando una conexión inalámbrica de un café cercano. '''¿Qué necesita?''' * Encontrar rápidamente la información que busca * Que la información, una vez encontrada, sea expresada en forma clara y directa * Que las páginas se carguen rápidamente '''¿Cómo lo ayudaría el sitio?''' * Una forma llamativa de dirigirlo hacia donde debe ir (botón en la página principal) * Utilizando una forma liviana y limpia de demostrarle el camino que debe seguir * Lenguaje simple y directo '''¿Con qué posibles frustraciones podría encontrarse considerando el actual estado del proyecto?''' * Poca visibilidad del enlace más directo a la sección * Muchas distracciones en la portada de la sección (slide de imágenes, otros enlaces, etc) * Imágenes grandes que tardan en cargarse. * Limitaciones tecnológicas que pueden traducirse a que el contenido no se despliegue de la mejor manera ===Caso 2=== [[Archivo:Escenariosypersonas2 principes.png|thumb|150px|right]] *'''Nombre:''' Javiera Silva *'''Edad:''' 16 años *'''Ocupación:''' Estudiante de cuarto medio *'''Nivel del usuario:''' Avanzado '''Descripción:''' Tiene 16 años, se encuentra cursando Cuarto Medio en el Santiago College de Santiago. Tiene un macbook con el que navega frecuentemente. Siempre ha mostrado interés por la creatividad, el arte y la poesía. Es la menor de sus hermanos y es la regalona de la casa, sin embargo está investigando posibilidades para estudiar fuera de la ciudad lo que siempre ha querido estudiar: Arquitectura. Sabe que convencer a sus padres no será fácil. En su búsqueda de universidades que impartan el ramo en ciudades cercanas, se encuentra con el sitio de la Escuela, y le llama la atención en forma particular. '''Escenario de uso:''' Javiera decide imprimir la malla curricular de la carrera de Arquitectura, para mostrársela a sus padres, ya que al navegar un poco el sitio reconoce que la Escuela parece ser distinta al resto que ha visitado en su investigación, y cree que imprimiendo la malla curricular y mostrándoselas podría ayudar en su decisión. También decide mostrarles el sitio de la Escuela. '''¿Qué necesita?''' * Encontrar la malla curricular en forma descargable o imprimible. * Convencer a sus padres que la Escuela representa una buena opción. * Reunir información básica sobre cómo funciona la escuela, ver fotografías que ilustren esos procesos. '''¿Cómo lo ayudaría el sitio?''' * Haciendo el programa accesible y fácilmente ubicable * Ofreciendo descarga de imágenes e ilustrando con esas imágenes los procesos que se describen * Reuniendo en un mismo lugar información básica sobre los pilares de la escuela. * Ofreciendo un lenguaje cálido y que acoge. ==Protocolo para Pruebas de Usuario== [http://afoto.jistark.net/pruebas-de-usuario Sitio de Pruebas de Usuario] El próximo paso en la investigación es realizar pruebas con usuarios reales, pidiéndose que se pongan en la situación de las personas y escenarios construidos anteriormente. Para ésto, construimos un sitio el cual puede visitarse en la dirección: Las pruebas fueron realizadas en 3 personas, de distintas características: *Una joven de 16 años, con un nivel avanzado de uso de Internet, estudiante de 3º medio de un colegio subvencionado *Un hombre de 38 años, trabajador del área de desarrollo de Sitios web. *Una mujer de 54 años, con un nivel bajo de uso de Internet y aplicaciones, dueña de casa. En general, no hubo mayor dificultad en realizar las teras seleccionadas. Las pruebas se realizaron en un Macbook Pro, en una habitación sin más personas, y se registraron tomando nota del proceso, y tomando fotografías. Se acompañó a los usuarios durante las pruebas, como una especie de guía y se iba resolviendo las dudas a medida la prueba avanzaba. Las principales preguntas, problemas y sugerencias encontradas durante las pruebas fueron las siguientes: *Existe un camino muy largo entre la página principal y llegar al contenido necesario *Hay que apretar muchos links para poder llegar al destino que uno desea, quizás sería más cómodo para el usuario desplegar listas dinámicas desde los enlaces, en forma inmediata luego de apretar el link, en vez de llegar a “sitios portales” de la información *Es muy difícil imaginar bien la experiencia del usuario utilizando wireframes de baja densidad ya que en muchas ocasiones los usuarios sentían que era necesario marcar los enlaces con un color identificatorio o de alguna manera visualmente clara, ya que se confundían entre lo que era texto y lo que era enlace. *Existió la pregunta sobre la necesidad real de la sub-sección.¿Es necesaria? Quizás el contenido se encontraría directamente navegando dentro de las secciones ya existentes en el sitio. *Se necesita un mayor énfasis en cómo lograr que el alumno de primer año que requiere de información, acuda a esa sección, aprete ese link, y no piense primero en ir a alguna de las otras opciones. *Mayor visibilidad al enlace desde la página principal se hace necesaria =Implementación= ==Trabajo en HTML== [http://afoto.jistark.net Sitio de la propuesta final] Luego de las pruebas de usuario comenzamos la construcción del sitio. Para llevar a cabo esta construcción se clonó el sitio actual de la escuela, ubicado en alfa.ead.pucv.cl (un sitio de pruebas) y se instaló en un servidor aparte para poder modificar libremente el sitio. En esta parte de la documentación explicaremos cómo se realizó ese proceso. === Traspaso del tema y el contenido === <gallery> Imagen: Pantalla principes.png|Pantalla del Home en el servidor externo Imagen:Banner principes.png|Botón utilizado en el sidebar para enlazar a la sección Imagen:Link principes menu.png|Enlace desde el menu </gallery> Lo primero que se realiza es la instalación de wordpress en el servidor nuevo, y la instalación del tema de wordpress que ocupa el sitio de la escuela, el cual se llama MImbe[ad]. Está basado en un tema existente que se llama Mimbo, y ha sido modificado por la Escuela para que se ajuste más a las necesidades que se tienen. Sin embargo, se presenta un problema ya que en la versión más avanzada de wordpress, el tema se rompe, dejando al sitio sin el sidebar, elemento fundamental en la navegación que queremos proponer. Para solucionar este problema, se instaló una versión anterior de wordpress (2.9.2) , que al parecer solucionaba el tema del sidebar, ya que era posible poner contenido en él, pero el problema ahora era que las funciones propias del tema, no estaban funcionando adecuadamente en el traspaso, por lo cual el contenido no estaba siendo desplegado visiblemente. Solucionamos temporalmente el problema, añadiendo contenido al sidebar en modo de imágenes copiadas desde ead.pucv.cl, y agregando el botón/enlace de nuestra sección en la barra lateral, y creando la página dentro de la categoría “Alumnos”. Asimismo, exportamos el contenido desde alfa.ead.pucv.cl, usando la herramienta "Exportar" dentro de wordpress, y el archivo xml lo importamos al wordpress instalado en el servidor externo. === Creando un Template para la sección=== [[Archivo:Home seccion principes.png|600px]] Para generar la sección, se debió crear un template nuevo para páginas en el tema, ya que se debía lograr que el sidebar que ocupamos en la página principal desapareciera y fuera reemplazado por un sidebar nuevo con el contenido específico de la sección. Para ésto se generó el template principes.php, y una nueva div llamada sidebar2, la cual se declaró en el style.css y se llamó desde el template de la página. '''Template principes.php''' <pre> <?php /* Template Name: Principes */ ?> <?php get_header(); ?> <div id="content"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="post" id="post-<?php the_ID(); ?>"> <h2><?php the_title(); ?></h2> <div id="edit"><?php edit_post_link('editar', '<p>', '</p>'); ?></div> <div class="entry"> <?php the_content('<p class="serif">Lea el resto del art&iacute;culo &raquo;</p>'); ?> <?php wp_link_pages(array('before' => '<p><strong>P&aacute;ginas:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?> </div> </div> <?php endwhile; endif; ?> </div> <div id="sidebar2"> <p> <h3><a href='http://afoto.jistark.net/alumnos/principes/conoce-tu-escuela'>CONOCE TU ESCUELA</a></h3><br> Aprende sobre la historia y el funcionamiento de la Escuela y aspectos prácticos que te ayudarán a moverte mejor en sus sedes. <p> <h3><a href='http://afoto.jistark.net/alumnos/principes/dimension-poetica'>DIMENSIÓN POÉTICA</a></h3><br> Descubre Amereida, la Ciudad Abierta, y aspectos fundamentales que hacen tu escuela distinta a las otras. <p> <h3><a href='http://afoto.jistark.net/alumnos/principes/aprendiendo-el-oficio'>APRENDIENDO EL OFICIO</a></h3><br> Conoce lo que aprenderás en los próximos años en los que te desarrollarás como un oficiante de la arquitectura o el diseño. <p> <h3><a href='http://afoto.jistark.net/alumnos/principes/saber-mas-alla'>SABER MÁS ALLÁ</a></h3><br> Infórmate sobre conceptos y autores con los que te encontrarás durante tu estadía, y pregunta por todo lo que quede por saber. <p> <div id="escuela"> <strong>e[ad]</strong><br /> Escuela de Arquitectura y Dise&ntilde;o<br /> <span class="ucv"><a href="http://www.pucv.cl/" title="Sitio Web PUCV">Pontificia Universidad Cat&oacute;lica de Valpara&iacute;so </a></span><br /> <a href="http://www.ead.pucv.cl/contacto" title="Escribe un mensaje">Contacto</a><br /> <!--The following is optional address and contact information using Microformats: http://microformats.org/wiki/adr#Examples--> <div class="adr"> <span class="street-address"> Av. Matta 12, Recreo</span>, <span class="locality">Viña del Mar</span>, <span class="region">Chile</span>.<br /><small> Cód. Postal: <span class="postal-code">2580129</span>, Casilla 4170 V2 Valparaíso</small><br /><br /> <span class="telefono">Teléfono </span><span class="value">+56 32 2274401</span><br /> <span class="fax">Fax </span><span class="value">+56 32 2274421</span> </div> </div> </div <?php get_footer(); ?> </pre> Código para #sidebar2 <pre> #sidebar2 { width: 260px; float:right; padding-top:50px; } </pre> === Páginas Interiores=== [[Archivo:Paginas interiores.png|600px]] Para las páginas interiores se usó el template descrito anteriormente, y también se añadieron clases para un nuevo títulobásicamente para disminuir el margen entre el enlace/cabecera y el texto explicativo. Asimismo, se utilizaron tablas para organizar el contenido en dos columnas. <pre> h6 { font: 1.1em Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing:0.1em; line-height:0em; margin-bottom: -10px; font-weight: bold; color:#333333; } </pre> ===Sección "Pregunta lo que quieras" === [[Archivo:Seccion preguntas.png|600px]] Para la sección de preguntas se instaló finalmente el plugin, [http://plugins.trendwerk.nl/documentation/faq-you/ FAQ You], el cual permite aparte de que los usuarios hagan preguntas, que éstas sean organizadas por categorías y ordenadas directamente desde el dashboard de wordpress. Para añadirlo a la página se utiliza el siguiente código: <pre> [faq-ask-questions] [faq-search] </pre> [[Categoría: Diseño Gráfico]] [[Categoría: Construcción]] [[Categoría: Proyectos]] [[Categoría: 2010]] [[Categoría: Internet]]

Guardar la página Mostrar previsualización Mostrar los cambios Cancelar