Proyecto sitio web "Parques de Chile"

De Casiopea


TítuloProyecto sitio web "Parques de Chile"
Tipo de ProyectoProyecto de Taller, Proyecto de Curso
Palabras Clavesitio web, paques, chile, construcción, 4dg, diseño gráfico
Período2013-2013
AsignaturaConstrucción 4º DG 2013, 4º DG 2013,
Del CursoConstrucción 4º DG 2013, 4º DG 2013,
CarrerasDiseñ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)Karla Vargas, Celeste Mardones, María Ignacia Falcone
ProfesorKatherine Exss


Introducción

El taller centra su estudio en el concepto Meta-sitio. El término hace referencia a un sitio web que dentro de su estructura permite la coexistencia de grandes grupos de contenidos, muchas veces heterogéneos. En una fase previa cada alumno conduce un estudio personal el cual entrega nociones generales. Se plantean además preguntas sobre cuál es la medida en que se muestra la identidad propia de cada contenido versus la homologación que permite que el diseño global sea consistente.

El presente proyecto busca poner en ejecución lo observado. Se debe crear un meta-sitio que en su interior albergue la información de todos los parques de Chile.

Planteamientos Iniciales

Objetivos principales

Los objetivos principales del sitio son:

  • Dar a conocer los parques de Chile a los habitantes y turistas tanto nacionales como extranjeros.
  • Entregar información clave y clara sobre aquello que necesitan saber para visitar cada parque.
  • Incentivar a través de la información la participación y la convocatoria a este tipo de recintos.

Clasificación de parque

Para comenzar el estudio se indaga en el concepto de parque y sus variables. La RAE entrega una definición genérica de parque que dice: terreno destinado en el interior de una población a prados, jardines y arbolado para recreo y ornato. Terreno destinado en el interior de una población a prados, jardines y arbolado para recreo y ornato. Parque, como término, puede englobar muchas clases de lugares. Primeramente y a grandes rasgos el estudio identifica dos tipos de parques.

Parques Naturales

Espacio situado en un entorno agreste (no urbano) el cual demás de proporcionar alguna clase de servicio o actividad de carácter recreativo o educativo busca preservar la flora y fauna. Este tipo de parque se divide en tres tipologías.

  • Parque Nacional: Se define como Parque Nacional a un área generalmente extensa, donde existen diversos ambientes únicos o representativos de la diversidad biológica natural del país, no alterada significativamente por la acción humana, capaces de auto-perpetuarse y en que las especies de flora y fauna o las formaciones geológicas, son de especial interés educativo, científico o recreativo.
  • Reserva Nacional: Se llama Reserva Nacional al área cuyos recursos naturales es necesario conservar y utilizar con especial cuidado, por la susceptibilidad de éstos a sufrir degradación o por su importancia en el resguardo del bienestar de la comunidad. Tiene como objetivo la conservación y protección del recurso suelo y de aquellas especies amenazadas de flora y fauna silvestre, a la mantención de o mejoramiento de la producción hídrica y la aplicación de tecnologías de aprovechamiento racional de éstas.
  • Monumento Natural: Es un área generalmente reducida, caracterizada por la presencia de especies nativas de flora y fauna o por la existencia de sitios geológicos relevantes desde el punto de vista escénico, cultural o científicos. Su objetivo es preservar el ambiente natural, cultural y escénico, y en la medida que sea compatible con ello, desarrollar actividades educativas, recreacionales o de investigación.

(Las definiciones son proporcionadas por el sitio oficial de la CONAF. Cabe destacar que dentro de este sitio existe un catastro de todos aquellos parques naturales considerados por dicha organización como tales).

Parques Urbanos

Los parques urbanos en cambio se encuentran, como su nombre lo indica, en una región urbana. Este tipo de parques pueden incluir entre otras cosas, áreas verdes, instalaciones culturales y deportivas.

A diferencia de los parques naturales, los parques urbanos no tienen una clasificación oficial, por lo que se intentó definir un criterio de clasificaciones de los parques urbanos, de acuerdo a los diferentes objetivos y actividades principales ofrecidas en cada parque.

Al comenzar a clasificar los distintos parques, aparece el problema de que en la práctica las diferencias entre una clasificación y otra no están claras. Por ejemplo, algunos parques que son visitados principalmente para actividades deportivas poseen también algún centro cultural menor. Otros parques, no poseen un enfoque definido, siendo visitados mayormente por ser un lugar tranquilo; o poseen más de una actividad que se realiza frecuentemente.

Se determinó que las clasificaciones no serían incluidas dentro de los criterios de búsqueda o de navegación. Sin embargo, las distinciones realizadas a continuación sí son consideradas importantes para la realización del proyecto, pues tocan fuertemente el tema de las distintas identidades de cada parque. Se piensa que es necesario que estas diferencias sean visibles (a través de una sección de destacados, o un menú de navegación especial, por ejemplo) en el sitio web particular de los parques.


Criterio por Actividad:

  • Educativo: Fines didácticos, muestran fauna y flora (no necesariamente nativa). Colecciones o clasificaciones de especies. (Incluye jardines botánicos y zoológicos).
  • Jardín Botánico: Ej; Jardín botánico nacional (Viña del Mar, funcionando), Arboterum de la Universidad Austral de Chile (Valdivia, funcionando), Jardín botánico de la Universidad Austral de Chile (Valdivia, funcionando), Jardín botánico Chagual (Santiago, proyecto), Parque etnobotánico Omora (Puerto Williams, funcionando), Jardín botánico de la universidad de Talca.
  • Zoológicos
  • Culturales: Su principal objetivo es promover las artes, historia, literatura, música, teatro, etc. Posee museos, centros culturales, eventos, escultaras, arquitectura, etc. Ej: Parque Quinta Vergara (Valparaíso), Parque de las esculturas (Santiago), Parque Almagro (Santiago), Parque Forestal (Santiago).
  • Deportivo: Su principal objetivo es promover el deporte. Posee canchas, espacios para patinaje, centros deportivos. Ej: Parque Borde Costero (Valparaíso), Parque de los Reyes (Santiago)
  • Múltiple / Multiparque: En él se realizan distintas actividades, todas importantes para la identidad del parque. Puede existir subdivisiones o áreas dentro del mismo parque. Ej: Parque Quebrada Verde (Valparaíso), Parque metropolitano (Santiago)
  • No específico: El parque no posee otras atracciones además de sus áreas verdes. Principal ventaja es su tranquilidad, calma. Ej: Parque Juan XXIII (Santiago)

Benchmark

El estudio se divide en dos estudios comparativos diferentes para cada gran grupo de parque. Con ello se pretende identificar las necesidades de cada tipo en forma personalizada.

Parques Naturales

Revisión General

Para analizar el estado del arte con respecto a los sitios web dedicados a parques naturales en el mundo se revisa de manera general un total de 15 sitios.

Comparativa casos específicos

Objetivos

  • Conaf: El sitio está centrado en entregar información acerca de la corporación nacional forestal. Por ello contiene noticias y datos orientados a informar al público sobre la labor de la institución. Si bien el sitio entrega información catalogada sobre los parques que puede ayudar a un visitante, no se trata de su objetivo principal.
Home del sitio de CONAF
  • National Parks UK: Esta íntegramente dedicado a los parques nacionales. Si bien entrega ciertos datos de carácter administrativo la configuración del sitio deja ver que no se trata de lo fundamental.
Home del sitio de Parques Nacionales del Reino Unido
  • National Parks Australia: La estructura del Home deja de manifiesto que el sitio posee un objetivo turístico; la intención es atraer visitantes más que informar o educar. Elementos como la estadía en este sitio se sitúan dentro de la navegación principal. Los rótulos con verbos tales como stay, explore, check comunican dicha intención.
Home del Sitio de Parques Nacionales de Australia
  • Sanparks: El sitio plantea ser una plataforma de asesoría de viajes o visitas. Para ello propone un proceso de exploración de parques, tarifas y reservaciones, cotización y datos para el turista. Su diagramación no obstante no es clara a propósito de reflejar una intención.
Home del sitio de Parques Nacionales de Sudáfrica
  • NPS: Se centra en los parques nacionales sin dar especial énfasis a un tema en concreto. Aunque al igual que en el caso de Australia, lo administrativo se encuentra en un plano inferior.
Home del Sitio de Parques Nacionales de Estados Unidos

Encontrabilidad de la Información del Parque y Motores de Búsqueda

  • CONAF: La CONAF posee una barra de navegación principal mediante la cual se puede llegar a los sub-sitios de parques de dos formas. Primero, dentro de este sub-sitio denominado Parques Nacionales se halla un buscador. Dependiendo de los filtros aplicados al buscador arroja los vínculos que llevan finamente al sub-sitio del parque propiamente tal. El filtro de búsqueda es poco accesible ya que se encuentra en un sub-sitio. Para que el filtro de búsqueda cumpla realmente su objetivo debe ubicarse en el Home. Otra manera es mediante el botón CONAF en regiones donde se despliega un mapa que permite acceder a una región en concreto. Al escoger una región surge un sub-sitio que la presenta en el cual hay un listado de los parques existentes. Seleccionando uno de los parques del listado se llega al sub-sitio dedicado al parque en específico. Existe una falta de coherencia con la etiqueta. CONAF en Regiones no sugiere una exploración de los parques. A grandes rasgos hace lo mismo que parques nacionales pero a través de otra mecánica de búsqueda. En general es difícil encontrar el parque buscado. En primer lugar porque no existe una búsqueda evidente en el Home y en segundo por la poca elocuencia de las etiquetas. Con respecto a la búsqueda se puede escoger entre una básica y una avanzada. La búsqueda básica comprende región y modalidad de parque (ya sea reserva, monumento o parque nacional). La búsqueda avanzada posee los mismos criterios aumentando las modalidades a unas más específicas y además propone escoger una especialidad (por ejemplo pesca, camping, etc.) Contiene también un filtro de disponibilidad, abierta al público o solo para visitantes previamente coordinados.
Archivo:CONAF SECCIÓN BUSQUEDA DE PARQUES.png
Partes navegables mas relevantes dentro del sub-sitio Parques Nacionales
Detalle de las modalidades de búsqueda y sus filtros
Modo de búsqueda a través de mapa que surge de CONAF en Regiones
Sub sitio de la Región de la Araucanía. Se aprecia el menú de parques.
  • National Parks UK: El listado geográfico acompañado de un mapa se ubica en una parte visible del Home. A través de ambos recursos se puede acceder a una url externa del sitio escogido. Se trata de una solución efectiva en términos de encontrabilidad.
Mapa y menú lateral National Parks UK. Mediante anbos se puede llegar a los parques.
  • National Parks Australia: Entrando mediante el Home a la sección Our Parks. Se accede a un sitio dotado de variadas opciones para encontrar el parque deseado según varios criterios. Dos secciones dedicadas a elementos populares; una sección de parques populares y una lista menos evidente de actividades populares. Al costado hay tres buscadores cada uno con criterios distintos. El primero filtra actividades, el segundo es un mapa que filtra espacio geográfico y el tercero es un listado alfabético. Todos estos apartados dirigen a los sub-sitios de cada parque. En resumen el sitio destaca en herramientas de búsqueda y encontrabilidad.
Punto del home desde el cual se accede a la sección parques
Sección parques con todos sus espacios de navegación
Detalle de los principales elementos de navegación y búsqueda
  • Sanparks: En una de las barras de navegación se despliega un listado de parques nacionales de la a la z. Lo acompaña un mapa interactivo. No es especialmente memorable la ubicación de este botón debido a la saturación del resto del sitio. En otro botón del home también se accede a una búsqueda según el mismo criterio. No se evidencian mas clases de búsquedas que la alfabética.
Archivo:Navegación AZ sanparks.jpg
Navegación del Sitio Sanparks por alfabeto
Otra manera de acceder a la búsqueda alfabética.
  • NPS: Posse una búsqueda visible en el header que filtra los parques según ubicación (estado). Cuando se selecciona un estado, del home se direcciona al sub-sitio del estado seleccionado, caso similar al de CONAF. En el sitio del estado hay un mapa, un poco difícil de comprender en un principio pues presenta unos filtros según tipología que se van visualizando en el mapa de forma un tanto saturada. Al cliquear uno de los puntos sobre el mapa surge un pequeño recuadro con una descripción. A modo de punteo, debajo del la descripción o como título de esta van los links a sub-sitios. El sistema es en general, críptico, dificultoso y engorroso. Existe además una búsqueda avanzada tipo formulario que resulta más sencilla. Las modalidades de búsqueda que propone son; por nombre (lista alfabética) por lugar, por actividad y por tópico.
Búsqueda principal presente en el home.
Sub-sitio correspondiente al Estado de Florida
Comportamientos del mapa interactivo.
Búsqueda con filtros avanzados.

Calidad de la información en los sub-sitios

Centrándose ya en el sub-sitio del parque propiamente tal se observa la cantidad, la clasificación y la presentación lógica de la información.

  • CONAF: Lo primero que resalta es un mapa. Debajo hay una ficha que expone un abstract (ambiguo en su temática), luego se detallan brevemente las tarifas, los servicios, accesos e información de contacto. Todo esto salvo el mapa se expone solo de forma escrita. Las descripciones de los servicios son vagas y poco específicas. Se acompaña además con una galería de imágenes. No existe un trato personalizado con respecto a la información punteada entre modalidades de parques.
Estructura estándar del Sub-sitio del parque
  • National Parks UK: Como se trata de url distintas para cada parque no existe una estructura de información inidentificable como común. Cada sitio posee sus propias barras de navegación y sus propias secciones de datos.
Dos sitios de parques nacionales de Inglaterra. No comparten leyes
  • National Parks Australia: Todos los sub-sitios contienen la misma estructura de información. Se diferencia no obstante del caso de la CONAF porque cuenta con mucha más información. Es exhaustivo y complejo sin saturar el espacio. Posee muchas secciones inexistentes en otros casos vistos.

Como el caso es destacado y de especial complejidad se expone a continuación una tabla de contenidos de lo que el sub-sitio parque expone genéricamente.

Elementos navegables dentro del home del sub-sitio del parque
Ejemplo de despliegue de contenidos en la sección travel info
Comportamiento del mapa
  1. Nav bar principal
    1. About
      1. Why you should visit
      2. Share with friends
      3. Links and downloads
    2. Travel info
      1. Getting there
        1. Opening times
        2. Fees
        3. Close to
        4. Car
        5. Public transport
        6. Bike
      2. Weather and climate
        1. Visiting through the seasons
        2. Temperature
        3. Rainfall
      3. Safety
      4. Contacts
    3. Map
    4. Visual tour
    5. Alerts
  2. Footer
    1. See and do
    2. Stay
    3. Highlights

En resumen destaca enormemente en términos de exhaustividad de datos y organización de los mismos.

  • Sanparks: También posee una estructura de contenidos compleja que se replica en cada sub-sitio de parque. Tiene menos capacidad de síntesis que el caso australiano. A continuación se detalla.
Sub-sitio de parque. Barra de navegación lateral.
  1. Park Home
  2. About the Park
    1. Management Plans
  3. Travel
    1. Accommodation
    2. Activities & Facilities
    3. Availability
  4. Reservations
    1. Park Rules
    2. Climate
    3. History
    4. How to get there
    5. Maps
    6. Tariffs
    7. Vital Information
    8. Weather
  5. Conservation
    1. Research Projects
  6. Fauna and Flora
    1. Birding
    2. Mammals
  7. Information for
    1. People with disabilities
  8. Contact us
    1. Contact details
    2. Feedback
  9. All-In-One
  10. Promotions
  • NPS El NPS posee no solo parques en el sentido estricto sino que también sitios de valor histórico y cultural. Es por ello que la plantilla del sub-sitio ofrece ciertos espacios de navegación que no siempre tienen la totalidad de los temas posibles. Por ejemplo la isla Saint Croix posee en la barra de navegación lateral el ítem bookstore, la casa donde nació el presidente William Jefferson (sitio histórico) no la tiene. El Parque Nacional Katmai posee dentro de la barra de navegación de la derecha el ítem Camping no así el parque nacional Arcadia. Al margen de eso el sitio presenta información suficiente encontrándose al nivel de los sitios como Sanparks y el de Australia. Cabe destacas las secciones For Teachers y For Kids.
Elementos de navegación en el sub-sitio del parque

Lay-out e identidad

  • CONAF: Se mantiene con una estructura y un estilo uniforme a lo largo de todos los niveles del sitio. Se mantiene el header y el fondo. El contenido se organiza en una grilla de tres columnas. Los sitios de parques no difieren casi en nada unos de otros. Falta identidad para cada parque.
Home del sitio de CONAF
Sub-sitio Parques Nacionales
Sección superior del sub-sitio CONAF en Regiones
  • National Parks UK: No existe regulación entre el estilo del sitio matriz y los de los parques. No se identifican como parte de un todo a través del diseño.
Vista del home
  • National Parks Australia: Existe coherencia de diseño entre todas las partes del sitio. Sin embargo no cae en la uniformidad porque se aprovecha de distinta manera la proporción y la métrica de las cajas de contenido para cada sección (Home, Our Parks, sub-sitio de cada parque). A pesar de que la estructura de los sub-sitios es idéntica en todos los casos, el uso de la fotografía como fondo permite imprimir identidad a cada parque.
  • Sanparks: El diseño del sub-sitio no favorece la exhibición del parque. Se abusa del texto. La fotografía del header se vuelve insuficiente para plasmar una identidad de parque sea memorable y llamativa. En términos de consistencia en la identidad a lo largo del sitio se desempeña en forma correcta.
  • NPS: El diseño de cada parte del sitio es coherente. Se nota que respeta una cieta métrica y además posee un estilo marcado que unifica el sitio. Al igual que en la mayoría de los casos, el recurso primordial para dar identidad al sub-sitio parque es la fotografía del header.

Conclusiones

Criterios de Clasificación

La gran mayoría de los sitios plantean principalmente criterios de organización de tipo geográfico. Esto se considera necesario en especial cuando se trata de un sitio que engloba información de lugares repartidos a lo largo y ancho de un país. Esto obedece al hecho de que cuando un usuario busca un parque con mucha probabilidad le interesa, en primera instancia, que dicho sitio se encuentre cercano.

Criterios tales como Parque, Reserva o Monumento no son muy atingentes al usuario común.

Otro criterio importante presente, principalmente en las búsquedas avanzadas, es el de las actividades o servicios posibles. A continuación un catastro de todas las actividades propuestas por los sitios de parques:

Actividades
  • Buceo
  • Camping
  • Camping Rústico
  • Esquí
  • Excursión
  • Caminata
  • Natación
  • Surf
  • Buseo
  • Pesca
  • Picnic
  • Ciclismo
  • Paseos en bote
  • Canoeing
  • Escalada
  • Paseos a caballo
  • Fotografía
  • Observación de la vida salvaje
  • Turismo aventura
Tópicos
  • Cascadas
  • Centro de información
  • Cerro
  • Glaciar
  • Refugio
  • Senderos
  • Termas
  • Volcán
  • Cueva
  • Arrecife
  • Programas Educativos
  • Especies en Peligro de Extinción
  • Area de Interés Arqueológico
  • Géyser
  • Río
  • Laguna
  • Playa
  • Punto Histórico
  • Monumento
  • Flores
Elementos Transversales a Cada Parque

Cada sitio propone también, dependiendo de su enfoque y objetivos, otras secciones. Estas corresponden a datos relativos al meta-sitio que no son propios de un parque en especial. Comunes son las Secciones:

  • Nosotros.
  • Misión y Visión
  • Recursos de educación ambiental
  • FAQ
  • Noticias de la Entidad.
  • Eventos destacados (dentro de la totalidad de los parques)
  • Redes Sociales
  • Filtro de Idiomas
  • Feedback
  • Contacto
Elementos Propios de un Sub-Sitio

Se identifican también patrones comunes dentro de la clase de información que cada parque posee. Desde luego que cada caso, en sus particularidades, posee datos que aplican y otros que no. Algunos datos frecuentes a considerar son:

  • Descripción del parque
  • Historia
  • Servicios (baños, restaurantes, gasolineras, accesos para discapacitados, estacionamientos)
  • Actividades
  • Eventos
  • Noticias
  • Logotipo o Escudo
  • Cómo llegar
  • Mapa (detallado por zonas, servicios y actividades)
  • Vías de acceso
  • Transporte
  • Alojamiento
  • Contacto
  • Administración
  • Horarios
  • Tarifas
  • Flora y Fauna
  • Normas (consejos,seguridad)
  • Geografía (Clima, geografía e hidrografía.)
  • Galería
  • Tour Virtual
  • Descargas

Parques Urbanos

Revisión General

Se revisaron de forma rápida los siguientes sitios:


Comparativa casos específicos

Objetivos

  • Royal Parks: El sitio pertenece a una corporación encargada de administrar y conservar los distintos parques de Londres. Busca incentivar las visitas a los parques tanto de ciudadanos como turistas. El tono del sitio sugiere que lo que se quiere entregar es información necesaria para poder elegir entre los distintos parques y planificar una visita, como los horarios de apertura de todos los parques y un mapa titulado Encuentra tu parque más cercano.
Home del sitio Royal Parks


  • NYC Parks: El sitio pertenece al gobierno de Nueva York. Parece estar dirigido principalmente a los residentes de la ciudad. Se destacan en el inicio las Noticias, Calendario y Eventos.
Home del sitio NYC Parks
  • Parks.com: Busca ofrecer información sobre cualquier tipo de parque dentro de los Estados Unidos.
Home del sitio Parks.com
  • Parque Metropolitano: Este sitio pertenece al ministerio de vivienda y urbanismo, sobre el Parque Metropolitano en Santiago. Es el encargado de administrar, mantener y conservar la Red de 16 Parques Urbanos, ubicados en 12 comunas de la Región Metropolitana. En su sitio se describe su organización y su historia; y en sus sub sitios las actividades que se realizan en cada parque. Una de sus peculiaridades es que este parque está subdividido en otros parques urbanos o áreas verdes. El sitio sigue esta división, por lo que es más complejo que otros sitios de parques.
Error al crear miniatura: Archivo más grande que 25 MP
Home del sitio Parque Metropolitano de Santiago

Encontrabilidad de la información del parque y motores de búsqueda

  • Royal Parks: El sitio web posee cuatro formas de encontrar los sitios de los parques desde su Home. La primera es a través de un buscador sin filtro, en el que se puede escribir el nombre del parque. La segunda es a través del menú principal, cuyo primer link está etiquetado como Parks. Al hacer click en él, aparece un mapa que contiene la ubicación de los parques en Londres, titulado Find Your Nearest Park. Bajo el mapa aparecen listados los 8 parques. Para entrar al sitio de un parque es necesario hacer click sobre éste en el mapa, o sobre su nombre en el índice. Una tercera opción para entrar a los sitios es hacer click sobre el nombre de un parque bajo el título Explore the Royal Parks que aparece en el home bajo el slider con los destacados. Por último, otra opción es hacer click en la lista de parques que se encuentran en el footer, donde aparecen listados junto a sus horarios de apertura y teléfonos.
Formas de acceder a sub-sitios
Mapa interactivo y lista de parques
  • NYC Parks: Posee tres formas distintas de encontrar un parque. La primera es acceder a través de un buscador ubicado en la home del sitio, escribiendo su nombre. La segunda es haciendo click en el link Parks que se encuentra primero a la izquierda del menú de navegación. Al hacer esto se despliega una búsqueda avanzada, donde se puede filtrar escribiendo un nombre, escribiendo un código zip o seleccionando una de las opciones de acuerdo a las facilidades con las que cuenta el parque. En la esquina de abajo a la derecha de la ventana desplegada aparecen listados algunos parques bajo el título Featured Parks. Para entrar a los sitios del parque se puede hacer click en uno de los nombres. Junto a esta lista hay otro link nombrado como More Parks, a través del cual se puede llegar a un índice que contiene aún más links a los parques, esta vez ordenados por orden alfabético.
Formas de acceder a sub-sitios
Búsqueda avanzada
Archivo:NYCalfabético.jpg
Índice de parques en orden alfabético


  • Parks.com: En la home aparecen links a algunos parques, bajo el título Featured Parks. Para llegar al resto de los parques, es necesario hacer click seleccionando un link del menú de navegación. Cada etiqueta en el menú es un tipo distinto de parque. Al hacer click en uno de ellos, aparece un mapa de los Estados Unidos, dividido en sus distintos estados, cada uno clickeable. Al hacer click en un estado, este lleva a un índice en el que aparecen listados los parques de ese estado que son del tipo de parque seleccionado en el menú. Este sistema de búsqueda tiene el problema de que muchos estados no poseen todos los tipos de parque, y el mapa no avisa de ninguna forma cuáles índices están vacíos y cuáles no. Muchas veces, al hacer click en un estado este muestra un índice vacío.
Formas de acceder a sub-sitios
Mapa clickeable
Índice de parques
Archivo:Pvacío.jpg
Índice Vacío
  • Parque Metropolitano: En el home existen dos formas de acceder a los parques; la primera es a través del buscador sin filtro al escribir el nombre del parque. La segunda forma es a través de la barra de navegación lateral al hacer click en Parques Urbanos. Al hacer click en el, aparece un listado de los 16 parques pertenecientes al Programa Parques Urbanos (los que se encuentran ordenados de acuerdo al número dado en el mapa); además un mapa de ubicación de los parques dentro de Santiago y a continuación un nuevo listado con los nombres de cada parque y su ubicación. Es posible ingresar a un mismo parque desde ambos listados. Al ingresar a cualquiera de estos parques, aparece su descripción e imágenes y a continuación un link Para información sobre las actividades del parque aquí el que redirecciona a un sitio común con las actividades de todos los parques.
Error al crear miniatura: Archivo más grande que 25 MP
Formas de acceder a sub-sitios
Error al crear miniatura: Archivo más grande que 25 MP
Listados de Parques

Calidad de la Información en los Sub-Sitios

  • Royal Parks: Dentro del sitio web de cada parque aparecen más o menos los mismos tipos de contenidos. En primer lugar, una foto del parque encabeza la diagramación; a su izquierda aparece un menú de navegación propio del parque, que es similar para cada uno, pero posee unas pequeñas variaciones en los links de más abajo. Bajo la foto, en la columna principal, aparecen tres recuadros About, Map, News y links a las Redes Sociales del parque. El sitio conserva el mismo menú superior del home, y el logo de la institución en el lado izquierdo del heder. Al hacer click en alguno de ellos, es posible volver al sitio principal.
Home del sub-sitio del parque

Una de las secciones que se repiten en todos los sub-sitios es el mapa interactivo, que muestra los sectores dentro del parque en el que se realizan algunas actividades o donde se ofrecen ciertos servicios, de manera filtrada (solo se muestran al hacer click en algún servicio o actividad).

Mapa interactivo

Los sitios web también poseen secciones dedicadas a noticias, que se mantienen bien actualizadas. En comparación, las secciones de fauna y flora se encuentran con poca información.

Ejemplo de tabla de contenidos:

  1. Visiting Green Park
    1. Opening times and getting here
    2. Accesibility information
      1. Disabled Go (link externo)
      2. Inclusive London (link externo)
    3. Road Closures
    4. Cycling in the Royal Parks
    5. Dogs in the Royal Parks
    6. Picnics in the Royal Parks
    7. Green Park Office contact details
  2. Map of Green Park
  3. Green park News
    1. Noticia 1
    2. Noticia 2
    3. ...
  4. Facilities in Green Park
    1. Refreshment points in Green Park
    2. Park Deck Chairs
  5. Green Park Attractions
    1. Canada Memorial
    2. Canada Gate
    3. Contitution Hill
    4. Memorial Gates
    5. Royal Gun Salutes
    6. Bomber Command Memorial
  6. Flora and Fauna
    1. Flowers and beddings
    2. Trees
  7. The 2012 Games at St James's Park and green Park
  8. About Green Park
  9. History and Architecture
    1. Landscape History
    2. Green park in film


  • NYC Parks: Cada sub-sitio posee información sobre el parque en específico. Arriba a la izquierda, aparece una descripción del parque, su dirección un link a googlemaps. Abajo, aparece un link a la historia del parque, otro a sus eventos y un menú en el que se listan las distintas facilidades que posee el parque. Además hay una encuesta referente al parque específico. A la derecha, hay una columna que contiene un menú con links a distintas páginas con más información del parque, una casilla de ayuda para encontrar las direcciones para llegar al parque (se debe escribir la dirección de partida y seleccionar un medio de transporte), links a Galería del Parque, a Noticias,Contacto, Clima actual del parque y otros. Cada sub-sitio sigue una misma estructura de contenidos y diagramación, pero poseen una navegación dentro de sí mismos. El problema de este sitio web es que la diagramación expone todos sus contenidos en el home, saturándolo.
Home del sub-sitio del parque
  • Parks.com: Hay poca información sobre cada parque. El sub-sitio presenta una descripción corta del parque, acompañada de una foto pequeña. Otros datos entregados son la dirección (nombre de la calle y número), número de teléfono, sitio web y un enlace a googlemaps.
Ficha del parque
  • Parque Metropolitano: Existe muy poca información de cada parque; cada uno de ellos se presenta con una misma estructura. Primero una pequeña reseña descriptiva que indica datos de infraestructura del parque seguido del número de beneficiarios de la comuna, acompañado de una pequeña imagen. Mas abajo cuenta con una lista tipo ficha donde se muestran datos mas técnicos, como la comuna donde se encuentra, el tipo (clásico, tradicional, etc), dirección y empresa mantenedora. Acompaña la ficha el mapa de ubicación dentro de Santiago, el cual no es interactivo, es sólo una imagen. Luego se muestran 3 imágenes de cada parque.
Error al crear miniatura: Archivo más grande que 25 MP
Sub-sitio Parque Bernardo Leighton

En la barra lateral luego del listado de parques existe un link Actividades Parques Urbanos donde se muestra una ficha (imagen) que entrega datos del tipo de actividad, horarios, comuna y nombre parque donde se realiza.

Ficha informativa actividades parques

Lay-out e identidad

  • Royal Parks: Los estilos, colores e identidad del parque se mantienen uniformes a lo largo de la navegación, siendo la diagramación y los contenidos lo único que cambia. Esto puede llegar a limitar como cada parque expresa su identidad, se ven todos muy parecidos, lo que no ayuda mucho a que el usuario haga una elección. La excepción es en el caso de los parques en los que se realizaron eventos relacionados a los Juegos Olímpicos, en esos casos el menú de navegación contiene un link a una página en la que se cambia el color y las figuras del fondo. Es un cambio efectivo, en el que se creo una identidad propia de los parques en torno al evento.
Juegos Olímpicos 2012
  • NYC Parks: La diagramación se mantiene, al igual que los estilos, colores, etc. No existen diferencias que permitan distinguir entre la identidad de un parque y otro.
  • Parks.com: Se mantiene la diagramación. Este es el caso en el que menos se nota la identidad del parque, puesto que además de que no hay cambios en los estilos ni la diagramación, los contenidos son tan escasos que ni ellos alcanzan a mostrarla.
  • Parque Metropolitano: La estructura y diagramación se mantiene a través de los sub-sitios, sólo cambian los contenidos dentro de cada parque. La grilla cambia sólo en el paso del home a los sub-sitios, donde el primero presenta una una columna lateral (derecha) correspondiente a Noticias que no se muestra al ingresar a los sub-sitios de los parques. Los estilos y colores se mantienen tanto en el home como en los sub-sitios, lo que no permite distinguir la identidad propia de cada parque. El header se mantiene igual sin cambiar la imagen, indicando que los parques pertenecen a la red de Parque Metropolitano.

Conclusiones

Criterios de Clasificación

El más utilizado es el criterio geográfico (Royal Parks, City Parks y algunos sitios más sencillos, como el de European City Parks). Otros menos utilizados son el alfabético (NYC Parks) y por facilidades (NYC Parks).

De los tres nombrados, el más útil parece ser el geográfico y el menos útil el alfabético.

Actividades
  • Ciclismo
  • Paseo de perros
  • Picnics
  • Permiso para conducir autos en su interior
  • Deportes
  • Bote
  • Cabalgatas
  • Juegos infantiles
  • Zona Wi-fi
  • Spray Showers
  • Piscina
  • Zoológico
Elementos Transversales a Cada Parque
  • Nosotros
  • Parques
  • Proyectos
Elementos Propios de un Sub-Sitio
  • Horarios
  • Cómo llegar
  • Vías de acceso (Accesos para discapacitados, estacionamientos)
  • Servicios (bar, cocina, cafe, canchas deportivas, juegos, etc)
  • Contacto
  • Mapa (interactivo, muestra actividades y servicios)
  • Noticias
  • Flora y fauna
  • Destacados (culturales, deportivos, etc)(*)
  • Restauración (*)
  • Historia y arquitectura
  • Arriendos (filmaciones, matrimonios, catering, licencias, etc)
  • Galería
  • Pronóstico del Tiempo
  • Parques Cercanos
  • Descargas
  • Actividades y eventos

Mapa de navegación

Primera propuesta

(*) El buscador posee tres filtros: uno para escribir el nombre (en caso de que la persona ya sepa a dónde quiere ir), un filtro por región y otro por actividad.


(El asterisco significa que la secciónn es opcional, dependiendo de los contenidos que el parque tenga o no tenga)

Segunda propuesta

Wireframes

Introducción

El diseño de los wireframes se basa principalmente en tres aspectos.

  • Objetivos propuestos al inicio del proyecto. Se ha determinado que el objetivo del sitio a crear es atraer a turistas y visitantes. Por ello tanto los mapas de navegación en su temática como las wireframes ,buscan potenciar e incluir aquellos elementos que propician la búsqueda del parque y sus servicios por sobre una realidad administrativa o educativa.
  • Benchmark. Siguiendo el planteamiento anterior, en el benchmark se identifican elementos que pueden ayudar a construir un relato en torno al encuentro con el parque. Importante es el análisis de cómo ciertos elementos determinan la intención del sitio. Lógicamente se cae además en la cuenta de aquello que funciona mejor para que el usuario encuentre la información que busca.
  • Card sorting con personas planteando escenarios. A través de ejercicios con etiquetas y escenarios se le pide a un grupo de personas que determinen qué información les interesa tener de forma más inmediata. Los resultados sirven para definir el orden de las etiquetas en las barras de navegación. Así mismo se define qué debe ir en el home , en qué segmento del sitio y de qué tamaño o forma.

Criterios Generales

Para dar consistencia al sitio se establecen ciertos elementos de carácter permanente. Dichos elementos constituyen las leyes de la navegación a lo largo del sitio. A través de ellos el usuario va y vuelve e identifica cada uno de los segmentos como parte de un todo. El header y el footer son las estructuras de carácter permanente más notorias. Aunque como se ha de ver más adelante sufren ligeras variaciones en función del sub-sitio aunque sin alterar sus leyes fundamentales.

Sin embargo se rescata del estudio anterior del meta-sitio que es necesario lo variable. Aquello que otorga distinción a cada parte del sitio no solo desde un punto de vista estético sino que desde un punto de vista estructural. En un sitio donde se concretan diversas acciones la estructura ha de adaptar sus leyes.

Grilla

La grilla es una herramienta que permite estructurar estas distintas variaciones. Para el diseño del sitio se emplea una grilla de doce columnas con medianiles de 20px. Vale decir que si bien se emplea esta grilla existen excepciones en beneficio del objetivo.

Ejemplos de uso de la grilla.

Estructura

A partir de la complejidad con la cual se hace uso de las columnas se pueden identificar ciertos patrones de estructura que se repiten en varios casos.

Estructura de tercios con elemento de navegación en la columna izquierda

Se repite particularmente en las noticias y en aquellos sitios donde la cantidad de información es extensa y se presenta a manera de listado.

Estructura 1.jpg

Estructura de doble columna centrada

En sitios donde la información es regular, poco variable en el tiempo y se designa espacio para posibles imágenes. Se presente por ejemplo en el sitio de “historia y arquitectura”.

Estructura 2.jpg

Estructura de caja de texto única centrada

Formularios, solicitudes y elementos corporativos carentes de imágenes pertenecen a este grupo que constituye el contenido más estático y breve en extensión.

Estructura 3.jpg

Estructura tipo galería

Se utiliza en sitios donde el contenido es extenso pero de carácter más visual que escrito. La estructura se basa en dos espacios horizontales donde uno de ellos es un vista previa y el otro una vista mayor. Flora y fauna y galería pertenecen a este grupo.

Estructura 4.jpg

Estructura compleja o híbrida

Se le da dicho nombre a la estructura presente en el home del sub-sitio de parque. Por la heterogeneidad de contenidos, tanto visuales como escritos, se adopta una mezcla. La estructura del sitio sufre cambios en función de lo que capa parque posee.

Estructura 5.jpg

Ejemplos Particulares

Meta Sitio

Inicio (Home)

Wireframes agrupados-1.jpg


El home del Meta Sitio se divide en 3 secciones:

  • Header: De izquierda a derecha se presenta el logo de Parques de Chile; en la barra superior idiomas (español/inglés), redes sociales y el link de suscripción; la barra de navegación superior contiene los links de Noticias, Proyectos y Contáctenos
Detalle header.jpg
  • Body: Se divide en 2 partes; primero se muestra el mapa interactivo de Chile donde es posible clickear en una región, acción seguida del despliegue de los Parques que se encuentran dentro de ella dividido por Provincias ordenadas alfabéticamente y su listado de parques de igual forma. (Cada uno de estos redirige al Sub-Sitio de un Parque).
Detalle body.jpg

Regiones con menos de 12 parques: Se muestra el listado de una sola vez, sin scroll.

Regiones con mas de 12 parques: Se muestra el listado con scroll.

Bajo el mapa se encuentra la búsqueda avanzada, donde se suman 3 opciones de búsqueda; Por Nombre: ingresando el nombre del Parque; Por Actividad: seleccionando dentro de un listado de actividades dadas; y Alfabéticamente: donde aparece el listado de parques de la A a la Z.

La segunda parte del body se presenta a la derecha del mapa interactivo donde se muestran los parques destacados en una gran imagen panorámica acompañados de un cuadro de texto que describe brevemente el porqué visitar ese parque en particular. Más abajo se muestra un cuadro de texto indicando porque visitar los parques de Chile, invitando a la ciudadanía a través de la descripción de las bondades naturales y de recreación que estos poseen.

  • Footer: De izquierda a derecha presenta los datos de contacto de la CONAF y del Parques de Chile, posteriormente un link a Contacta a Parques de Chile y los links que dan la posibilidad de seguir en las distintas redes sociales.
Detalle footer.jpg

Barra de Navegación

La barra de navegación presenta 3 tópicos:

  • Noticias: Agrupa las noticias mas importantes de los parques, de contingencia nacional.
  • Proyectos: Muestra los proyectos que se están implementando en los parques
  • Contáctanos: Otorga la posibilidad de que el usuario se comunique con Parques de Chile para dar sugerencias o hacer preguntas.

Footer

El footer presenta 3 tópicos:

  • Datos de CONAF y Parques de Chile: Tales como dirección, número telefónico y casilla de correo electrónico.
  • Contacta a Parques de Chile: Donde es posible escribir a través de formulario sugerencias o comentarios directamente a la mesa central de Parques de Chile en 3 pasos.
  • Redes sociales: Posibilidad de seguir a Parques de Chile en facebook, twitter y flickr

Noticias

Las noticias del metasitio comprenden dentro de sus contenidos eventos o actualizaciones de gran magnitud de los distintos Parques de Chile, (a diferencia de las noticias propias de cada parque -subsitio- que son mucho más íntimas).

Al ingresar, se muestran brevemente las noticias al lado izquierdo de la pantalla en un listado vertical, en primer lugar las noticias ‘destacadas’ que se presentan cada una con una imagen representativa acompañada de su titular (en un máximo de 3 líneas). Más abajo la siguen las noticias de menor relevancia que sólo son mostradas por su titular y poseen un menor tamaño. Bajo estas hay un menú llamado ‘mas noticias’ donde es posible ordenar las noticias según preferencia del usuario (por fecha, nombre, etc)

A la derecha de este listado aparece la noticia más reciente dentro de las ‘destacadas’ con una imagen de mayor proporción (que es contextualizada con día y fecha en su esquina superior izquierda, y bajo ella el pie de imagen) seguida hacia abajo con dos jerarquías; primero el titular y su bajada de título (un texto breve general de la noticia), y en segundo lugar el desarrollo de la noticia descrito en cuerpo de texto acompañado de imágenes a su derecha (también con pie de imagen).

Al terminar el texto de la noticia aparece un cuadro dando la posibilidad al usuario de escribir un comentario.

Wireframes agrupados-3.jpg

Al clickear otra de las noticias estas se despliegan en la pantalla de la misma forma.

Proyectos

La sección de ‘proyectos’ posee una estructura muy similar a la de ‘noticias’. Mostrando en la barra lateral izquierda en primer lugar los proyectos destacados y a continuación los de menor relevancia.

La diferencia esta en que el menú de selección de orden esta vez no es por fecha si no por región, dando al usuario la posibilidad de encontrar precisamente la información sobre proyectos que se estén realizando en un parque de la región seleccionada.

A su vez, por el orden que esta sección tiene, los proyectos de menor relevancia se muestran también ordenados por el nombre del parque, ya que es una búsqueda más particular.

Wireframes agrupados-5.jpg

Suscríbete

Al clickear el botón ‘Suscríbete’ aparece un cuadro en el centro de la pantalla, en el es posible identificarse (nombre, e-mail, región) y en el último paso seleccionar si se requiere recibir información de una región en específico o de todos los parques de Chile.

Wireframes agrupados-6.jpg

Sub Sitio

Inicio (Home)

El home del subsitio también se divide en header, body y footer.

Wireframes agrupados-2.jpg
Header

El header contiene la barra de navegación del subsitio. Ésta posee una estructura similar a la del metasitio, con la diferencia de que los contenidos de las celdas del menú cambia para ocuparse del contenido propio del subsitio. El logotipo de la izquierda es el mismo logotipo del metasitio, que funciona como link al home de éste. Esta barra se mantiene en todo el subsitio.

Detalle header subsitio.jpg

Bajo la barra de navegación, se deja un espacio para que se aprecie la fotografía del fondo (que sería una expresión de la identidad del parque) y a la derecha sobre el resto del contenido se encuentra el logotipo del parque específico. En las otras páginas del sitio el espacio dedicado a la fotografía varía disminuyendo en ½ de su tamaño en algunos casos (los que poseen contenidos más densos, con sus propias imágenes) y se mantiene en otros. El logotipo del parque se mantiene en el mismo lugar en todas las páginas, y funciona como link al home del subsitio.

Body

Tomando en cuenta la información recopilada gracias al card sorting, el body presenta una arquitectura y orden jerárquico que se ajusta a las necesidades de los futuros usuarios, además de algunos destacados como accesos directos.

En primer lugar se muestra cómo llegar al parque. Para esto se piensa en un mapa interactivo que contenga filtros para mostrar vías de acceso, rutas, servicios, algunos puntos turísticos del parque, etc. La barra arriba del mapa contiene los botones para estos filtros, mientras que el rectángulo bajo ellos sería el espacio donde se mostraría el dibujo del mapa. Además se piensa dejar una columna destinada a complementar con texto lo que se muestra en el mapa, para que quede aún más claro.

Bajo el mapa, aparece una descripción corta del parque (la misma de la vista previa que se muestra en el metasitio), junto a datos puntuales como el valor de la entrada y los horarios. En el caso de los parque urbanos se ha agregado un recuadro para el pronóstico del tiempo y un link “Organiza tu evento”.

En la mitad inferior del sitio se deja espacio para agregar destacados. Estos serían accesos directos a actividades y eventos realizados en el parque.

Detalle body sitio parque.jpg
Footer

Se mantiene el mismo footer del metasitio, siendo la única diferencia que se agrega un botón de contacto para el parque específico (, además del que ya estaba para contactar a los administradores del metasitio.

Detalle footer sitio parque.jpg
¿Qué Hacer?

La diagramación se divide en dos áreas. La parte de arriba está destinada a los eventos. A la izquierda se encuentra un calendario, en el que se pueden seleccionar algún evento para que este aparezca en la vista previa, haciendo click sobre uno de los días del calendario. Si hay más de un evento en un mismo día, aparecen unos botones con números en la esquina superior derecha de la vista previa.

La vista previa del evento cuenta con una fotografía, nombre del evento y descripción, además de un link que redirige a otra plantilla para leer una descripción más profunda del evento, con más texto y la posibilidad de agregar más fotos. Esta otra plantilla se basa un poco en la estructura que tienen las noticias y proyectos, pero sin la barra lateral.

La mitad inferior de la plantilla "qué hacer" está dedicada a las actividades. Se pueden seleccionar las actividades en una lista que se encuentra en la izquierda, y estás se muestran en un recuadro a la derecha. Se decidió que no habrían plantillas individuales para las actividades, ya que estas suelen tener contenidos fijos y en menor volumen.

Wireframes agrupados-10.jpg
Galería

Para la galería se ha dividido la página en dos. Arriba está el visor que permite ver la imagen. Este posee la posibilidad en un botón "me gusta", y de dejar algún comentario que luego aparecería en una barra a la derecha.

Abajo se encuentran vistas previas de las fotografía (una especie de índice) donde se puede hacer click sobre una imagen para que esta aparezca en el visor. Este índice además tendría la posibilidad de filtrar las imágenes.

Wireframes agrupados-7.jpg
Sobre el Parque
Flora y Fauna

La idea es mostrar el contenido como si fuera una especie de galería. La especie de animal o planta aparece en un recuadro que se divide en dos. A la izquierda se encuentra una fotografía de la especie, mientras que a la derecha está una ficha con los datos y una descripción.

En la barra de abajo es posible seleccionar la ficha de la especie que se quiere ver, haciendo click sobre la foto de ésta. El nombre de la especie aparece sobre la fotografía de la galería al poner el cursor sobre ella.

Wireframes agrupados-8.jpg
Historia y Arquitectura/ Datos Medioambientales

Las siguientes páginas tipo están pensadas para contenidos que poseen abundante texto y algunas fotografías. Se utiliza una diagramación similar a la de fauna y flora, pero sin la barra de selección y con las columnas de fotografía y texto invertidas.

Wireframes agrupados-9.jpg
Normas/Nosotros

Esta diagramación está pensada para contenidos que sólo poseen texto, y en poca cantidad. Se permite que la fotografía del fondo se vea más, dejando más margen tanto arriba como a los lados. Dentro del recuadro sólo hay una columna de texto y el título.

Wireframes agrupados-11.jpg
Organiza tu evento

“Organiza tu evento” abre un formulario que cuenta con distintos pasos. Este es distinto a los formularios de contacto. No redirige a una página distinta, sino que se abre ahí mismo, oscureciendo el resto de la pantalla.

Wireframes agrupados-4.jpg
Escribe al parque

El formulario de contacto se encuentra en un recuadro centrado en la pantalla. Posee una frase escrita que explica con un lenguaje cercano el propósito del formulario (comentarios y sugerencias) y abajo aparecen casillas para rellenar con el nombre y el e-mail. Se señala con un asterisco para qué se piden los datos. Bajo esto hay una casilla en la que se puede escribir el mensaje, y en la esquina inferior izquierda el botón para enviarlo.

La diagramación utilizada dentro del recuadro es la misma diagramación utilizada en el formulario de contacto del metasitio, lo que cambia es el exterior, la estructura en la que se encuentra inserto.

Wireframes agrupados-12.jpg

Medidas Principales

Correcciones poteriores

Luego de presentar los wireframes en clases y revisarlos en conjunto se realizan una serie de correcciones de carácter menor a tener en consideración en las siguientes etapas del desarrollo. Como se trata de correcciones leves no se reelaboran los wireframes.

  • Se incluye una sección ayuda en el Footer
  • Se incluye un botón Sitemap en el footer
  • En el mapa interactivo se icluye el botón de filtro “camping” dentro de la sección “Donde Alojar”
  • Se incluyen las “Políticas de privacidad” en el Footer.
  • Se arregla la lógica de los filtros para secciones tipo noticias. Se dejan las opciones “más recientes”, “filtrar por región”.
  • Se incluye el botón suscríbete en la sección suscríbete, en estado hover.
  • Se establece una ley fija de colocación el botón de redes sociales. (Siempre en el mimo lugar con respecto a la caja o al título.
  • Se da coherencia a las etiquetas de los filtros y búsquedas. Por ejemplo no puede una decir ordenar por fecha y la otra más recientes.
  • El sub-sitio de eventos necesita decir en algún lado. Qué hacer/Evento tanto. Evento
  • El sub-sitio de eventos necesita una manera de navegar directamente desde un evento y otro. Evento. (Incluye una navegación con los eventos próximos dentro del a sección)
  • Los otros formularios como contacto y suscríbete deben tener información pertinente que permita al usuario saber que se hace con sus datos.
  • Se considera incluir en los formularios aviso de los requisitos obligatorios y opcionales.
  • Muestra de formulario en caso de error por ejemplo no completar un campo obligatorio se marca en rojo.

Interfaz

Criterios Generales

Paletas

Estilo2-7.jpg

La paleta se basa en tonos verdes y neutros. Estos son los que se encuentran presentes en todo el sitio y el subsitio, como fondos, en el header y el footer, además de otros detalles más pequeños. Le otorgan identidad al sitio completo. Se decidió que los acentos del sitio fueran verdes, pues este color se relaciona con los parques y la naturaleza.

Los demás colores se suman a la paleta, para otorgar identidad propia al subsitio o a la región / zona.

En el mapa interactivo se muestra una paleta que varía por la ubicación geográfica de las regiones. Se diferencian por zona Norte, Centro y Sur, aprovechando las asociaciones con los colores fríos y cálidos (al norte más cálidos, al sur más fríos). Para los home de los subsitios, cada una de estas una paleta que contiene dos tonos.


Zona Norte

Para los parques de la zona norte se escogen tonos anaranjados y azules cálidos. Ambos colores se acercan a ser complementarios entre sí, por lo que hay un buen contraste entre ellos. En algún momento se pensó en la posibilidad de usar tonos amarillos; para enfatizar los tonos cálidos, y continuar con los contrastes análogos de las demás paletas, pero la idea fue descartada pues el amarillo dificulta la lectura.

Zona Centro

Para la zona se centro se escogieron tonos verdes, uno con una mayor cantidad de amarillo y otro con más azul.

Zona Sur

La paleta de la zona sur contiene dos tonos de azul, fríos. Uno de ellos es más claro y más cercano al cyan, mientras que el otro es ligeramente violáceo.

Dentro del sitio hay ciertos elementos que se ajustan a la paleta de la región y otro que mantienen fijos. Se modifican los colores de los botones y el fondo en la sección “Mapa”. También se modifican los colores de los títulos de sección y el recuadro de clima.

Mapas.jpg
Climas.jpg

Estilos de Caracter y Párrafo

Se utilizó la tipografía Lato de google fonts.

La lato.jpg

  • Nombre del parque. Título. Color blanco, con sombra exterior, 23pt.

Texto1.jpg

  • Subtítulo. Colores verde, blanco o de un tono propio del subsitio, 13pt.

Texto2.jpg

  • Etiquetas para botón barra principal. Color blanco, bold, 11pt.

Texto5.jpg

  • Párrafo de cuerpo de texto. Color negro o blanco dependiendo del fondo, 10pt.

Texto3.jpg

  • Párrafo de comentario o nota. Color negro o blanco dependiendo del fondo, 8,5pt.

Texto4.jpg

  • Navegación segundaria (botónes de idiomas, sitemap, políticas de privacidad, ayuda),9pt, light

Idiomaparques.jpg

Estilos de Caja

Fondo opaco, color neutro.

Caja 4.jpg

Fondo transparente, color neutro.

Caja 3.jpg

Fondo opaco de color.

Caja 1.jpg


Íconos

Listado de íconos a realizar:

  1. Redes Sociales
    1. Facebook
    2. Twitter
    3. Flickr
  2. Idiomas
    1. Español
    2. Inglés
  3. Galeria de Imágenes
    1. Imagen
    2. Flechas
  4. Calendario
    1. Cuadro Fecha Seleccionada
  5. Eventos
    1. Número selección evento
  6. Listas
    1. Lista desplegable
    2. scroll
  7. Formulario
    1. Cuadros de Formulario
    2. Escape Formulario (x)
  8. Mapa Interactivo
    1. Región seleccionada
    2. Flecha despliegue región
  9. Búsqueda
    1. Buscar

La familia de íconos presenta características comunes dentro de las cuales se distinguen 3: los cuadros de fondo poseen bordes redondeados de 2,5 pixeles (cuadro fecha, cuadro clima, listas desplegables, formulario, mapa interactivo); barras de menor altura bordes redondeados de 8 pixeles (barras de búsqueda, scroll, parque seleccionado). A su vez, íconos conformados sólo por líneas estos presentan remate curvo para mantener la identidad (escape formulario, lupa de búsqueda, flechas izquierda y derecha).

Logo del Meta-Sitio

El logo de parques de chile.jpg

Mapa Interactivo

Se utiliza una paleta que va desde el anaranjado al azul, de las zonas cálidas a las frías. En la imagen que se muestra a la izquierda, el mapa aparece como se visualizaría si tuviera activado el hover de todas las regiones a la vez.

Parquesmapaintera.jpg Mapa detalle.jpg


Botones

  • Idiomas. El botón de la izquierda está con el hover activado.

Idiomaparques.jpg


  • Barra de navegación. El primero a la izquierda tiene activado el hover.

Navbarparques.jpg


  • Botón de seguir leyendo. Ambos botones son transparentes, lo que les da un aspecto un poco diferente dependiendo del color del fondo donde se encuentran.

Leerparque1.jpg Leerparque2.jpg


  • Botón de filtro. El fondo del botón es blanco neutral, las letras son de color dependiendo de la zona geográfica del subsitio del parque. Cuendo el botón está en estado de hover, el color de las letras y el fondo se invierte.

Filtroparque.jpg


  • Organiza tu evento, enviar (formulario), suscríbete y contacto. Estos botones están pintados de uno de los verdes de la paleta general del sitio. Los tamaños varían: organiza tu evento es el más grande, mientras que el de contacto es el más pequeño. Los botones con el hover activado se encuentran a la derecha.

Eventoparque.jpg Evento2parque.jpg

Enviar2parque.jpg Enviarparque.jpg

Suscriveparques.jpg Suscribe2parque.jpg

Contactoparques.jpg Contacto2parque.jpg

Fotografías de fondo

El criterio para las imágenes de fondo se dividen en Parques Naturales y Parques Urbanos; para los primeros las imágenes son panorámicas, mostrando la generalidad y paisajismo del parque. En cambio, en el caso de los Parques Urbanos se muestra una mirada mas particular. Esta está centrada en la persona y sus acciones dentro del parque, la relación de los visitantes con las instalaciones.

Primeros Ejemplos

Vista del Home
Vista del Sub.sitio Zona Norte
Vista del Sub.sitio Zona Centro
Vista del Sub.sitio Zona Sur
Vista de sección tipo formulario
Vista de sección tipo galería
Vista de sección tipo Noticias
Vista de sección tipo formulario de suscripción
Vista de sección tipo formulario de suscripción

CORRECCIONES

Segunda Versión de los headers. El primero corresponde al Meta-sitio y el segundo a el sub-sitio.

Se busca dar a la barra principal del Meta-Sitio más particularidad con respecto a su pares del sub-sitio. Se hace mas visible la identidad del parque (logo) lo cual permite que se aprecie más el logotipo creado.

Galería versión 2.

En la galería se cambia el fondo a uno plano para no saturar la visualización. El título del parque se desplaza a la izquierda como nueva ley para facilitar la visión.

Detalle del título del parque en el aso de no tener logo.

Lo mismo se corrige en la sección home del sub-sitio de parque. El tpitulo se desplaza al costado izquierdo y más arriba.

Detalle del formulario de contacto. La redondez de las cajas donde se introduce la información está regulada en sus vértices.

Segunda versión de la sección de noticias.


Diseño de front

  • Home Meta-Sitio

https://dl.dropboxusercontent.com/u/18853960/index.html

  • Home Sub-Sitio

https://dl.dropboxusercontent.com/u/18853960/homeparque.html

  • Galería

https://dl.dropboxusercontent.com/u/51133079/galer%C3%ADaparques/galer%C3%ADaparques.html

  • Flora y fauna

https://dl.dropboxusercontent.com/u/51133079/galer%C3%ADaparques/florayfaunaparques.html

Emtrega Final

https://dl.dropboxusercontent.com/u/24463702/Parques%20de%20Chile.html