Ver el código de «Web Bitácora Alberto Cruz Grupo I»

{{Proyecto
|Título=Plataforma web Bitábora Alberto Cruz
|Palabras Clave=Alberto Cruz, Bitácora, Primera travesía Amereida, 1965
|Año de Inicio=2013
|Carreras Relacionadas=Diseño Gráfico
|Cursos Relacionados=3º DG 2013,
|Profesor=Sylvia Arriagada, Jaime Pérez Moena,
|Alumnos=Karol Barrera, Franco Baldassare, Melany Marin,
}}
Primera etapa de versión digital para la bitácora de Alberto Cruz, en la primera travesía de Amereida. En esta etapa se muestran los procesos de evolución de mapas de navegación, los contenidos que tendrá esta página, los wareframes y todo el proceso previo a la edición de una plataforma web.

==Primera Etapa==
===Jerarquía de contenidos===

{{#widget:SlideShare
|doc=tabladecontenidosbitacoraweb-130507134752-phpapp01
|width=425
|height=348
}}
===Wireframe página Alberto===
{{#widget:SlideShare
|doc=wareframesedicindigitalbitcoraalbertocruz-130508150417-phpapp01
|width=425
|height=348
}}
===Wireframe Interactivo===
{{#widget:Vimeo|id=65763054|width=480|height=360}}

===Mapa de Contenidos===
[[Archivo:Bitacora ac IMAGEN.jpg|thumb|400px|left|Mapa recorrido]]





















==Segunda Etapa==
===Wireframe segunda versión===
{{#widget:SlideShare
|doc=wareframe2bitalberto-130509211153-phpapp01
|width=425
|height=348
}}
===Presentación Recorrido de Travesía Amereida===
{{#widget:Vimeo|id=65870795|width=480|height=360}}

===Partitura de Interacción===

<gallery>
Image:Partitura de navegación inicio.jpg|partitura de interacción de Inicio

Image:Partitura de interaccion BITACORA.jpg|partitura de interacción de Bitácora

Image:Partitura de interaccion material adjunto.jpg|partitura de interacción de descargas
</gallery>



==Tercera Etapa==
===Grillas en Fireworks===
<gallery>
Image:Grilla base 1280x768px.png|grilla
</gallery>

===Elección de Color y Tipografía===
La elección del color la hicimos a partir del tono de la Bitácora original de Alberto Cruz, quisimos darle el contraste del color cálido del papel envejecido con la tinta negra con la que escribía. Por esta razón utilizamos tres variables de tonos anaranjados para darle distintas jerarquías a los elementos de la página.

La elección de la tipografía fue '''Palatino Linotype''' para textos de lectura continua, que son la transcripción de la bitácora de Alberto Cruz, las notas poéticas de Godofredo Iommi, y la crónica de Claudio Girola. Para contrastar el carácter renacentista utilizamos para los títulos y encabezados la tipografía '''Futura Lt''' con características geométricas y un carácter moderno, de esta manera cada una tiene su propia voz para diferenciar la esencia de los textos.

[[Archivo:Color y tipografias.jpg|400px]]

===Propuesta de Inicio===

El inicio está pensado a modo de contextualizar al usuario y que éste se familiarice con el tema, para ello, se le muestra un contenido previo que debería saber el visitante para poder entender el sentido de la bitácora y el trabajo en sí mismo. Estos temas se presentan de la siguiente manera:

*'''El recorrido''' Muestra de manera territorial los lugares por los cuales ocurrió la travesía, y la posición del mapa en la página conecta los contenidos del inicio, que va desde lo general a lo particular.

*'''Títulos''' Dan a entender que la página está dividida por dos temáticas; el viaje y la bitácora de uno de sus integrantes.

*'''Viajeros''' Integrantes de la travesía: muestra los 10 participantes y destaca a los 3 en los cuales estamos enfocados. Dando la opción de conocer el nombre de todos.

**Alberto Cruz: Autor Bitácora  
**Claudio Girola: Autor de la Crónica 
**Godofredo Iommi: Notas poéticas

*'''Ver Bitácora''' Es un link que da inicio al estudio de la Bitácora a partir de los puntos anteriormente presentados 

{{#widget:SlideShare
|doc=web3albcruzgrupo1menuinicio3-130513140737-phpapp01
|width=425
|height=348
}}

===Propuesta de Galería de Fotografías===

La galería de imágenes es una propuesta de rápido acceso que se encuentra en el inicio de la página, de esta manera el usuario elige si verlas o no, y si es así va dentro de una temática en el inicio de contextualización, que aporta información para poder comprender a que hace referencia la página web.
Al entrar a este ítem aparecen la mitad de la totalidad de las fotos en miniaturas, por lo tanto también es de fácil acceso y el usuario escoge en cual detenerse a través de una previsualización

{{#widget:SlideShare
|doc=galera-130513125925-phpapp01
|width=425
|height=348
}}

===Propuesta de Navegación por Bitácora===
<gallery>
Image:Hoja 3-1 versión gris Terminada.png|Propuesta de navegación por bitácora

</gallery>


==Etapa Final==

Se cambió completamente el diseño de la página web, no así su contenido ni el foco que le estábamos dando. Se navega de la misma manera, dándole protagonismo a la bitácora original de Alberto, y siempre teniéndola presente para poder ver en relación.

===Elección de Color===

El color naranjo con el gris no se complementaban bien, ya que había una vibración muy fuerte entre ellos que impedía al ususario leer de una manera eficaz, y producía un cansancio visual, es por esta razón que decidimos atenuar la fuerza de los colores, dejando una imagen sacada de la primera travesía de amereida como fondo, en donde resaltan colores azules y grisáceos.

===Vínculo===

https://dl.dropboxusercontent.com/u/51167710/Grupo%201/menu%20inicio.htm