Alejandra Salinas: Rediseño Taller de Ediciones Gráficas
Desarrollo Proyecto
Este proyecto tiene como fin mejorar el sitio web que posee actualmente la escuela de Diseño y Arquitectura de la universidad católica de Valparaíso http://www.ead.pucv.cl/. Para ello el taller se divide para enfocarse en diferentes temas y cubrir varias secciones. Este proyecto en particular se ocupa de la sección del Taller de Ediciones e Investigaciones Gráficas, entidad que actualmente no proyecta una definición clara hacia un publico tanto de la escuela como de fuera de ella.
Entonces la finalidad de este proyecto es que que el Taller de Ediciones se muestre como el cuerpo importante que es dentro y fuera de la escuela, que proyecte una imagen clara, comunicar qué es esta entidad, cual es su historia, sus fundamentos, exponer sus trabajos y dar a conocer sus servicios.
Propuesta
Se propone un rediseño enfocado principalmente en la exposición de los proyectos editoriales que se llevan a cabo en el taller y en dar a conocer la entidad de Taller de Ediciones, exponiendo parte de su historia y situación actual, tanto a alumnos como a personas interesadas en la escuela.
Benchmark
Galería de libros revista ARQ
Galería de libros editorial Contrapunto
Galería de libros editorial Taschen
Detalle de Libro Editorial ARQ
Detalle de Libro Editorial Contrapunto
Detalle de Libro Editorial Taschen
(Es importante señalar que éstos sitios intentan ser atractivos para poder vender sus productos, fin que el espacio que queremos crear no comparte. Ver estos sitios es sólo para saber como resuelven el exponer sus libros.)
Una galería de libros como la de Editorial ARQ permite exponer las ediciones sacando provecho a la gráfica existente en las portadas para crear una composición estética que expone todos los ejemplares.
Taschen se preocupa mas de entrar en detalle con el libro, expone ilustraciones, y fotos de dobles paginas
su forma de exponer el libro en detalle, en donde selecciona algunas páginas para mostrarlas y también elige una serie de fotos, con esto el libro queda expuesto, no en su totalidad pero lo suficiente para que la persona interesada pueda enterarse de que esta pasando en la edición.
Para este proyecto es importante que el libro no pierda las características que posee que lo hacen ser lo que es, es decir la capacidad de ser "ojeado", el hecho de ir página por página. Pero también no olvidar que los medios digitales nos permiten hacer cosas extraordinarias y usar esta característica a nuestro favor. Es por eso que estos últimos ejemplos muestran una forma diferente de resolver una galería, exponen su contenido dinámicamente. El primer ejemplo corresponde a una visualización de imágenes interactiva que reacciona con el movimiento del mouse, generando una ilusión en 3 dimensiones. El segundo ejemplo corresponde a Cover flow de Apple, donde se muestran las ilustraciones de manera horizontal y se disponen en el espacio de manera lineal de forma que muestra claramente en que imagen estas y ademas la pasada y la siguiente.
Estado actual del Sitio
Taller de Ediciones
El Taller de Ediciones reune los quehaceres de registro, edición y publicaciones de objetos legibles que dentro del ámbito de la Universidad y de Valparaíso dicen y tienen que ver con la historia y el presente de nuestra escuela.
Actualmente la sección “Taller de Ediciones” del sitio web, de las 26 ediciones hay solo 3 que no perdieron su presentación ya que cuentan con una foto de la portada, las cuales además se pueden ver en detalle (zoom portada), y un solo libro que esta disponible para verlo digitalmente, el único que no perdió la capacidad de ser “ojeado”. Todas las demás ediciones son solamente nombradas en una lista larga y tediosa.
Biblioteca Constel
En esta sección se reúnen los documentos publicados desde el año 1952 que se consideran constituyentes del pensamiento de la Escuela y de Amereida.
Algunos textos corresponden a papeles, apuntes, recortes de prensa, etc. Otros fueron impresos en tirajes cortos para ediciones internas. Los que han sido transcritos (solo algunos de ellos) se pueden leer en la Biblioteca con§tel donde además se encuentra una ficha bibliográfica de cada documento.
En el orden de cuatro colecciones se enlistan 50 documentos donde se dice su nombre, la fecha y las entradas correspondientes.
En la Wiki también se enlistan 62 ediciones correspondientes a la biblioteca Constel (que forma parte de Archivo). Estas no se encuentran dividas por colecciones y sí presentan su portada. ambas contienen una versión descargable en pdf.
Aparte de lo dicho anteriormente se detectaron los siguientes problemas:
- No se entiende porqué la sección "Taller de Ediciones" se encuentra en el menú "Mundo".
- El Taller de Investigaciones Gráficas no se encuentra en el menú, se accede a su página por medio del "más de" de Investigación (en la sección Mundo).
- No existe un espacio para exponer los proyectos de la escuela ya sean de diseño o arquitectura.
- El Taller de Ediciones no expone su trabajo en el sitio, sino que simplemente lo nombra.
Estos problemas provocan que la comunidad de la escuela quede casi por completo fuera de las actividades y los proyectos de una entidad importante dentro y fuera de la escuela.
Objetivos:
- Definir bien el Taller, sus funciones y sus partes, exponer su historia y plantear el TIG como los fundamentos del Taller de Ediciones. De esta forma poder entregar una imagen clara del taller
- Trabajar la imagen que proyecta el taller en un nivel gráfico
- Proporcionar un espacio para exponer los proyectos que se llevan a cabo en las distintas áreas que posee
- Exponer y presentar las ediciones que se han llevado a cabo en el taller
- Tomar el trabajo que se ha estado haciendo con los manuscritos de Constel y trabajarlos bajo la misma ley de manera que queden expuestos
Wireframes
Los wireframes muestran el orden del contenido de la pagina que luego se construirá. Hasta el momento, llevo 3 juegos de wireframes, los últimos son la actual propuesta, los otros están expuestos con el fin de documentar.
Wireframes 1
Wireframe Colecciones
Wireframe Galería
Wireframe rollover Galería
Wireframe Detalle Edición 1 (libro digitalizado)
Wireframe Detalle Edición 2 (galería de imágenes)
Wireframe zoom imagen detalle
Obedecen a esta estructura las secciones tanto de Taller de Ediciones como de Biblioteca Constel
Wireframes 2
Hechos a partir de una grilla de 100 x 100 pixeles
Wireframe Galería
Wireframe rollover Galería
Wireframe rollover Galería
Wireframes 3
Ya que esta es una parte del sitio de la escuela la tipografía y los tamaños se mantienen. El primero (paso 1), es la manera en que se ubican las colecciones, luego hay dos versiones que le siguen, que son diferentes propuestas de diagramación.
Galería colecciones
(paso 1)
Detalle colección versión 1 (paso 2)
Despliegue versión 1 (paso 3)
Detalle libro versión 1 (paso 4)
Detalle colección versión 2 (paso 2)
Despliegue versión 1 (paso 3)
Detalle libro versión 1 (paso 4)
Wireframes 4
Estos wireframes están hechos en 960px bajo un sistema de 12 columnas de 60px cada una e intervalo entre ellas de 20px
Columnas
(paso 1)
(paso 2)
(paso 3)
(paso 4)
(paso 5)
Diseño Visual
Propuesta 1
- Diseño visual1 ale.png
Diseño Visual
- Diseño visual2 ale.png
Diseño Visual 2
- Diseño visual3 ale.png
Diseño Visual 3
Propuesta 2
Diseño Visual
Diseño Visual 2
Mapas de Divs
Mapa de Divs 1 de la galería de colecciones (paso 1)
Mapa de Divs 2 de una colección (paso3)
Mapa de Divs 2 del detalle de cada libro y su ficha (paso 5)
Personas y Escenarios
Se presentan diferentes casos de usuarios del sitio y nos ponemos en los casos hipotéticos para encontrar falencias en el sistema y saber si es real una navegación clara. En las interfaces, encontramos una serie de símbolos, los cuales marcan el recorrido que la persona hace en el sitio para cumplir la tarea. Los círculos naranja muestran el recorrido probable que la persona realizaría mientras que el magenta muestra "el camino corto", que podría seguir. Cumplida la tarea ambos se representan con una estrella del color correspondiente.
Caso 1
Alumno Nombre: Javiera Ibáñez, edad: 19
Javiera es alumna de arquitectura de la Escuela de diseño y arquitectura de la pucv, en clases le han dado una referencia que deberá buscar en el sitio de la escuela. Una vez que da con el libro Javiera desea saber donde encontrarlo para sacar algunas fotocopias.
- Javiera debe encontrar el libro “Ópera Lúcida II” de Godofredo Iommi.
- Javiera debe encontrar la ficha del libro y su código.
paso 1
paso 2
paso 3
paso 4
Caso 2
Extranjero Nombre: Carlos Zamorano, edad: 20
Carlos es estudiante de tercer año de Diseño en Argentina, quiere enterarse sobre otras escuelas de diseño, llega al sitio de la escuela e[ad] por medio de google y desea ver sus publicaciones para saber más sobre ésta. Una vez interesado en un libro, Carlos desea leerlo mas tranquilo, desearía tenerlo en su computador. Cuando encuentra la posibilidad de descarga, prefiere enviarlo por e-mail así podrá acceder desde otros computadores en caso que lo necesitara.
- Carlos debe llegar a ver un libro en detalle y encontrar opciones de descarga
- Carlos debe mandar la edición por email.
- (los pasos anteriores siguen la línea de los vistos en el caso 1)
paso 3
paso 4
Caso 3
Posible cliente Nombre: Camila Buneder, edad: 37
Camila es una profesional que desea editar un libro, para esto quiere saber si la escuela de diseño presta servicios editoriales, por lo que entra al sitio web para encontrar respuesta a esta interrogante. En el caso que se así, quiere saber además cómo contactarse y realizar un pedido.
- Camila debe encontrar si la escuela presta servicios editoriales, si fuera así, cómo realizar un pedido.
paso 1
paso 2
Protocolo de usuarios
Presentación de las tareas
Pantallas que serán usadas para las pruebas de usuario
Avance de Código
Galería Colecciones
HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="estilo.css" />
<title>Documento sin título</title>
</head>
<body>
<div id="contenedor">
<div id="taller" class="mitad">
<div id="texto" class="vertical"><h1>El Taller de Ediciones</h1>
<p>El Taller de Ediciones reune los quehaceres de registro, edición y publicaciones de objetos
legibles que dentro del ámbito de la Universidad y de Valparaíso dicen y tienen que ver con la historia
y el presente de nuestra escuela. Proponemos 4 colecciones para orientar el trabajo El Taller de
Ediciones reune los quehaceres de registro, edición y icen y tienen tra escuela. Proponemos 4
colecciones para orientar el trabajo El Taller de Ediciones reune los quehaceres de registro, edición y
publicaciones de objetos legibles que dentro del ámbito de la Universidad y der con la historia y el
presente de nuestra escuela. Proponemos 4 colecciones para orientar el trabajo:</p></div>
<div id="imagenes" class="vertical" id="nomargen1">
<img src="../para html/img1.png" class="foto"/>
<img src="../para html/img1.png" class="foto" id="estafoto1"/>
</div>
</div>
<div id="colecciones" class="mitad">
<div id="parentesis" class="vertical">
<div id="texto_parentesis"></div>
</div>
<div id="libros" class="vertical">
<div class="cuarto" id="l1"> </div>
<div class="cuarto" id="l2"> </div>
<div class="cuarto" id="l3"> </div>
<div class="cuarto" id="l4"> </div>
</div>
<div class="libro"></div>
</div>
</div>
</body>
</html>
CSS
body {
background: #FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#contenedor{
margin-left:auto;
margin-right:auto;
width:640px;
background-color:#606;
}
.mitad {
float:left;
width:50%;
height:415px;
}
#taller{
text-align:justify;
}
#libros{
height:175px;
}
.vertical {
clear:both;
height:50%;
padding:10px;
}
#texto {
height:240px;
}
#imagenes{
height:175px;
}
#parentesis{
height:240px;
background: url(../para%20html/corchetes.png) no-repeat center bottom;
}
.foto{
margin:auto;
}
#estafoto1{
margin-top:10px;
}
#nomargen1{
padding-left:none;
}
#texto_parentesis{
margin-top:128px;
padding:10px;
}
.cuarto{
float:left;
width:50%;
height:50%;
background-position:bottom center;
background-repeat:no-repeat;
}
#l1{
background-image:url(../para%20html/turrolibros1.jpg)
}
#l2{
background-image:url(../para%20html/turrolibros2.jpg)
}
#l3{
background-image:url(../para%20html/turrolibros1.jpg)
}
#l4{
background-image:url(../para%20html/turrolibros2.jpg)
}
#l1:hover{
background-image:url(../para%20html/turrolibros1oscuro.jpg)
}
#l2:hover{
background-image:url(../para%20html/turrolibros2oscuro.jpg)
}
#l3:hover{
background-image:url(../para%20html/turrolibros1oscuro.jpg)
}
#l4:hover{
background-image:url(../para%20html/turrolibros2oscuro.jpg)
}
h1{
font-size:20px;
font-family:Georgia, "Times New Roman", Times, serif;
}
Detalle Colección
HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="estilo2.css" />
<title>Documento sin título</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$("#libro1").mouseover(function(){
$("#libro2,#libro3,#libro4,#libro5,#libro6,#libro7").each(function(index){
$(this).css({'top':50+(index*20)});
});
});
$("#libro1").mouseout(function(){
$("#libro2,#libro3,#libro4,#libro5,#libro6,#libro7").css('top','');
});
$("#libro2").mouseover(function(){
$("#libro3,#libro4,#libro5,#libro6,#libro7").each(function(index){
$(this).css({'top':70+(index*20)});
});
$("#libro1").each(function(index){
$(this).css({'top':'-20px'});
});
});
$("#libro2").mouseout(function(){
$("#libro1,#libro3,#libro4,#libro5,#libro6,#libro7").css('top','');
});
$("#libro3").mouseover(function(){
$("#libro4,#libro5,#libro6,#libro7").each(function(index){
$(this).css({'top':70+(index*20)});
});
$("#libro2,#libro1").each(function(index){
$(this).css({'top':-20-index*20});
});
});
$("#libro3").mouseout(function(){
$("#libro1,#libro2,#libro4,#libro5,#libro6,#libro7").css('top','');
});
$("#libro4").mouseover(function(){
$("#libro5,#libro6,#libro7").each(function(index){
$(this).css({'top':70+(index*20)});
});
$("#libro4,#libro2,#libro1").each(function(index){
$(this).css({'top':-20-index*20});
});
});
$("#libro4").mouseout(function(){
$("#libro1,#libro2,#libro3,#libro5,#libro6,#libro7").css('top','');
});
});
</script>
</head>
<body>
<div id="contenedor2">
<div id="texto"><h1>Colección Universitaria</h1>Concurso Académico de la Dirección de
Comunicación, el trabajo de selección corresponde a la PUCV, el Taller de Ediciones diseña el libro y
Ediciones Universitarias de Valparaíso hace de casa editorial y distribuye. Concurso Académico de la
Dirección de Comunicación, el trabajo de selección corresponde a la PUCV, el Taller de Ediciones
diseña el libro y Ediciones Universitarias de Valparaíso hace de casa editorial y distribuye. Concurso
Académico de la Dirección de Comunicación, el trabajo de selección corresponde a la PUCV, el Taller de
Ediciones diseña el libro y Ediciones Universitarias de Valparaíso hace de casa editorial y distribuye.
Pedidos:
Fono +56 32 2273087 | e-mail: euvsa[arroba]ucv[punto]cl
</div>
<div id="pila_libros">
<img src="../para html/unlibro.png" width="220px" id="libro1" />
<img src="../para html/unlibro.png" width="220px" id="libro2"/>
<img src="../para html/unlibro.png" width="220px" id="libro3"/>
<img src="../para html/unlibro.png" width="220px" id="libro4"/>
<img src="../para html/unlibro.png" width="220px" id="libro5"/>
<img src="../para html/unlibro.png" width="220px" id="libro6"/>
<img src="../para html/unlibro.png" width="220px" id="libro7"/>
<div class="1libro"></div>
</div>
</div>
</body>
</html>
CSS
@charset "UTF-8";
/* CSS Document */
body{
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#contenedor2{
margin-top:37px;
margin-left:auto;
margin-right:auto;
width:620px;
height:inherit;
}
#texto{
width:300px;
height:inherit;
margin-right:100px;
float:left;
text-align:justify;
}
#pila_libros{
width:220px;
background-color:#3C9;
float:left;
}
#libro1{
position:absolute;
z-index:8;top:0px
}
#libro2{
position:absolute;
z-index:7;top:25px
}
#libro3{
position:absolute;
z-index:6;top:50px
}
#libro4{
position:absolute;
z-index:5;top:75px
}
#libro5{
position:absolute;
z-index:4;top:100px
}
#libro6{
position:absolute;
z-index:3;top:125px
}
#libro7{
position:absolute;
z-index:2;top:150px
}
Pruebas de Usuario
Luego de hacer unas pruebas con usuarios para determinar si el sitio en desarrollo es usable, revelaron una serie de problemas en la claridad de la navegación, por lo que se modificó el sitio casi en su totalidad.
Nueva Propuesta
Colecciones
Página principal
colecciones
libro desplegado
enviar por mail
- 6 información ale.png
información
pantalla completa
pantalla completa-ver todos
Regalos
paso 1
paso 2
paso 3
paso 4
Avance Código
HTML
<body>
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 300;
minWidth = 25;
$("ul li a").click(
function(){
if(lastBlock != this){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}else{
ancho = $(lastBlock).css('width');
if(ancho== "300px"){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
}else
$(lastBlock).animate({width: maxWidth+"px"}, { queue:false, duration:400 });
}
}
);
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#mostrar-panel-libro1").click(function(){
$("#libro1").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
$("#mostrar-panel-libro2").click(function(){
$("#libro2").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
</head>
<body>
<div class="panel" id="libro1">
Hola =)
</div>
<div class="panel" id="libro2">
Info 2
</div>
<div id="contenedor">
<div id="texto-superior">
<div id="texto-superior-izquierda">
</div>
<div id="texto-superior-derecha">
</div>
</div>
<div id="imagenes-inferior">
<div style="padding:10px; width:100%; height:100%;">
<ul>
<li>
<a>
<div class="divNegro"></div>
<div style="width: 270px; height: 280px; background-color: #0F0; display: block; margin-left: 25px;">
<object style="width:270px;height:250px" ><param name="movie"
value="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf?
mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&showFlipBt
n=true&documentId=100825233106-
03970262904a4798b63c9802f9574150&docName=edicionmatriz&username=algirasol&
loadingInfoText=Edici%C3%B3n%20Matriz&et=1282782697920&er=97" /><param
name="allowfullscreen" value="true"/><param name="menu" value="false"/><embed
src="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" type="application/x-
shockwave-flash" allowfullscreen="true" menu="false" style="width:270px;height:250px"
flashvars="mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&
showFlipBtn=true&documentId=100825233106-
03970262904a4798b63c9802f9574150&docName=edicionmatriz&username=algirasol&
loadingInfoText=Edici%C3%B3n%20Matriz&et=1282782697920&er=97" /></object>
</div>
</a>
</li>
<li>
<a>
<div class="divNegro"></div>
<div style="width: 270px; height: 250px; background-color: #0F0; display: block;
margin-left: 25px;">
<object style="width:270px;height:250px" ><param name="movie"
value="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf?
mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&showFlipBt
n=true&documentId=100826051947-
ef49d57c0cc5439fbf0615416f4c6404&docName=edicion_oficios&username=algirasol&l
oadingInfoText=Edicion%20Oficios&et=1282811822257&er=68" /><param
name="allowfullscreen" value="true"/><param name="menu" value="false"/><embed
src="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" type="application/x-
shockwave-flash" allowfullscreen="true" menu="false" style="width:270px;height:250px"
flashvars="mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&
showFlipBtn=true&documentId=100826051947-
ef49d57c0cc5439fbf0615416f4c6404&docName=edicion_oficios&username=algirasol&l
oadingInfoText=Edicion%20Oficios&et=1282811822257&er=68" /></object>
</div>
</a>
</li>
<li>
<a>
<div class="divNegro"></div>
<div style="width: 270px; height: 280px; background-color: #0F0; display: block; margin-
left: 25px;">
<object style="width:270px;height:250px" ><param name="movie"
value="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf?
mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&showFlipBt
n=true&documentId=100825233106-
03970262904a4798b63c9802f9574150&docName=edicionmatriz&username=algirasol&
loadingInfoText=Edici%C3%B3n%20Matriz&et=1282782697920&er=97" /><param
name="allowfullscreen" value="true"/><param name="menu" value="false"/><embed
src="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" type="application/x-
shockwave-flash" allowfullscreen="true" menu="false" style="width:270px;height:250px"
flashvars="mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&
showFlipBtn=true&documentId=100825233106-
03970262904a4798b63c9802f9574150&docName=edicionmatriz&username=algirasol&
loadingInfoText=Edici%C3%B3n%20Matriz&et=1282782697920&er=97" /></object>
</div>
</a>
</li>
</ul>
</div>
</div> <!-- Fin div imagenes-inferior -->
</div>
</body>
CSS
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
padding: 0px;
display: block;
margin-right: 10px;
}
ul li a{
display: block;
overflow: hidden;
height: 250px;
width: 25px;
}
#a1{
width: 210px;
}
.divNegro{
position: absolute;
border: 3px solid #881212;
background-color:#333;
width:10px;
height:250px;
}
ul li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 25px;
}
#contenedor{
width: 730px;
height: 460px;
background-color: red;
padding: 20px 55px
}
#texto-superior{
width: 100%;
height: 40%;
clear:both;
}
#texto-superior-izquierda{
width: 50%;
height: 100%;
background-color: blue;
float: left;
}
#texto-superior-derecha{
width: 50%;
height: 100%;
background-color: yellow;
float: left;
}
#imagenes-inferior{
width: 100%;
height: 60%;
background-color: green;
clear:both;
}
#libro1 {
background: #754c24;
height: 200px;
display: none;
position: fixed;
width: 730px;
}
#libro2 {
background: #754c24;
height: 200px;
display: none;
position: fixed;
width: 730px;
}
Los libros serán publicados en Issuu (http://issuu.com) sistema que vuelve navegable el pdf un libro, lo vuelve "ojeable" y serán integrados en el sitio del Taller de Ediciones de la e[ad] de la misma manera que se encuentra actualmente el libro "Diseño, acto y celebración. La diversión del hábito" de Ricardo Lang
Propuesta Final de Interfaces
Estas propuestas finales fueron insertadas en otro de los proyectos que fueron desarrollados por el taller, específicamente el de Identidad Digital, de manera que se viera en un entorno mas real de interfaz y además como se vería en un supuesto en el que el proyecto fuera realizado.
Código hasta ahora
HTML
<body>
<div class="panel" id="libro1">
Hola =)
</div>
<div class="panel" id="libro2">
Info 2
</div>
<div id="contenedor">
<div id="texto-superior">
<div id="texto-superior-izquierda"> <h2>Taller de Ediciones</h2>
<p> El Taller de Ediciones reune los quehaceres de registro, edición y
publicaciones de objetos legibles que dentro del ámbito de la Universidad y de Valparaíso dicen y tienen
que ver con la historia y el presente de nuestra escuela. Proponemos 4 colecciones para orientar el
trabajo:
</p>
</div>
<div id="texto-superior-derecha">
<p>Se reúnen aquí los documentos publicados desde el año de 1952 y que consideramos
constituyentes del pensamiento de la Escuela y de Amereida. Algunos de estos textos no han sido
publicados –se indica cuándo– o corresponden a papeles, apuntes, recortes de prensa, etc. Los más
fueron impresos en tirajes cortos para ediciones internas. Nunca se han publicado fuera de su contexto
(regio). Se han transcrito algunos de ellos y se pueden leer en la Biblioteca con§tel donde encontrará
una ficha bibliográfica de cada documento. Para el caso del Taller de Ediciones, se listan aquí las
ediciones nuevas de dichos textos y las originales de hoy:</p>
</div>
</div>
<div id="imagenes-inferior">
<div style="padding:10px; width:100%; height:100%;">
<ul>
<li>
<a id="1">
<div class="lomo_libro" parent="1"> <img src="images/lomo_libro1.png" /></div>
<div style="width: 270px; height: 280px; background-color: #0F0; display: block; margin-
left: 25px;"><!-- codigo libro desde Issuu -->
<object style="width:270px;height:250px" ><param name="movie"
value="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf?
mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&showFlipBt
n=true&documentId=100825233106-
03970262904a4798b63c9802f9574150&docName=edicionmatriz&username=algirasol&
loadingInfoText=Edici%C3%B3n%20Matriz&et=1282782697920&er=97" /><param
name="allowfullscreen" value="true"/><param name="menu" value="false"/><embed
src="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" type="application/x-
shockwave-flash" allowfullscreen="true" menu="false" style="width:270px;height:250px"
flashvars="mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&
showFlipBtn=true&documentId=100825233106-
03970262904a4798b63c9802f9574150&docName=edicionmatriz&username=algirasol&
loadingInfoText=Edici%C3%B3n%20Matriz&et=1282782697920&er=97" /></object>
</div>
</a>
</li>
<li>
<a id="2">
<div class="lomo_libro" parent="1"><img src="images/lomo_libro2.png" /></div>
<div style="width: 270px; height: 250px; background-color: #0F0; display: block;
margin-left: 25px;"><!-- codigo libro desde Issuu -->
<object style="width:270px;height:250px" ><param name="movie"
value="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf?
mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&showFlipBt
n=true&documentId=100826051947-ef49d57c0cc5439fbf0615416f4c6404&docName=edicion_oficios&username=algirasol&l
oadingInfoText=Edicion%20Oficios&et=1282811822257&er=68" /><param
name="allowfullscreen" value="true"/><param name="menu" value="false"/><embed
src="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" type="application/x-
shockwave-flash" allowfullscreen="true" menu="false" style="width:270px;height:250px"
flashvars="mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&
showFlipBtn=true&documentId=100826051947-
ef49d57c0cc5439fbf0615416f4c6404&docName=edicion_oficios&username=algirasol&l
oadingInfoText=Edicion%20Oficios&et=1282811822257&er=68" /></object>
</div>
</a>
</li>
<li>
<a id="3">
<div class="lomo_libro" parent="1"><img src="images/lomo_libro3.png" /></div>
<div style="width: 270px; height: 280px; background-color: #0F0; display: block; margin-
left: 25px;"><!-- codigo libro desde Issuu -->
<object style="width:270px;height:250px" ><param name="movie"
value="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf?
mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&showFlipBt
n=true&documentId=100825233106-
03970262904a4798b63c9802f9574150&docName=edicionmatriz&username=algirasol&
loadingInfoText=Edici%C3%B3n%20Matriz&et=1282782697920&er=97" /><param
name="allowfullscreen" value="true"/><param name="menu" value="false"/><embed
src="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" type="application/x-
shockwave-flash" allowfullscreen="true" menu="false" style="width:270px;height:250px"
flashvars="mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&
showFlipBtn=true&documentId=100825233106-
03970262904a4798b63c9802f9574150&docName=edicionmatriz&username=algirasol&
loadingInfoText=Edici%C3%B3n%20Matriz&et=1282782697920&er=97" /></object>
</div>
</a>
</li>
<li>
<a id="4">
<div class="lomo_libro" parent="1"> <img src="images/lomo_libro4.png" /></div>
<div style="width: 270px; height: 280px; background-color: #0F0; display: block; margin-
left: 25px;"><!-- codigo libro desde Issuu -->
<object style="width:270px;height:250px" ><param name="movie"
value="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf?
mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&showFlipBt
n=true&documentId=100825233106-
03970262904a4798b63c9802f9574150&docName=edicionmatriz&username=algirasol&
loadingInfoText=Edici%C3%B3n%20Matriz&et=1282782697920&er=97" /><param
name="allowfullscreen" value="true"/><param name="menu" value="false"/><embed
src="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" type="application/x-
shockwave-flash" allowfullscreen="true" menu="false" style="width:270px;height:250px"
flashvars="mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&
showFlipBtn=true&documentId=100825233106-
03970262904a4798b63c9802f9574150&docName=edicionmatriz&username=algirasol&
loadingInfoText=Edici%C3%B3n%20Matriz&et=1282782697920&er=97" /></object>
</div>
</a>
</li>
<li>
<a>
<div class="lomo_libro" parent="1"> <img src="images/lomo_libro5.png" /></div>
<div style="width: 270px; height: 280px; background-color: #0F0; display: block; margin-
left: 25px;"><!-- codigo libro desde Issuu -->
<object style="width:270px;height:250px" ><param name="movie"
value="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf?
mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&showFlipBt
n=true&documentId=100825233106-03970262904a4798b63c9802f9574150&docName=edicionmatriz&username=algirasol&
loadingInfoText=Edici%C3%B3n%20Matriz&et=1282782697920&er=97" /><param
name="allowfullscreen" value="true"/><param name="menu" value="false"/><embed
src="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" type="application/x-
shockwave-flash" allowfullscreen="true" menu="false" style="width:270px;height:250px"
flashvars="mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&
showFlipBtn=true&documentId=100825233106-
03970262904a4798b63c9802f9574150&docName=edicionmatriz&username=algirasol&
loadingInfoText=Edici%C3%B3n%20Matriz&et=1282782697920&er=97" /></object>
</div>
</a>
</li>
<li>
<a>
<div class="lomo_libro" parent="1"> <img src="images/lomo_libro1.png" /></div>
<div style="width: 270px; height: 280px; background-color: #0F0; display: block; margin-
left: 25px;"><!-- codigo libro desde Issuu -->
<object style="width:270px;height:250px" ><param name="movie"
value="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf?
mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&showFlipBt
n=true&documentId=100825233106-
03970262904a4798b63c9802f9574150&docName=edicionmatriz&username=algirasol&
loadingInfoText=Edici%C3%B3n%20Matriz&et=1282782697920&er=97" /><param
name="allowfullscreen" value="true"/><param name="menu" value="false"/><embed
src="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" type="application/x-
shockwave-flash" allowfullscreen="true" menu="false" style="width:270px;height:250px"
flashvars="mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&
showFlipBtn=true&documentId=100825233106-
03970262904a4798b63c9802f9574150&docName=edicionmatriz&username=algirasol&
loadingInfoText=Edici%C3%B3n%20Matriz&et=1282782697920&er=97" /></object>
</div>
</a>
</li>
<li>
<a>
<div class="lomo_libro" parent="1"><img src="images/lomo_libro2.png" /></div>
<div style="width: 270px; height: 250px; background-color: #0F0; display: block;
margin-left: 25px;"><!-- codigo libro desde Issuu -->
<object style="width:270px;height:250px" ><param name="movie"
value="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf?
mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&showFlipBt
n=true&documentId=100826051947-
ef49d57c0cc5439fbf0615416f4c6404&docName=edicion_oficios&username=algirasol&l
oadingInfoText=Edicion%20Oficios&et=1282811822257&er=68" /><param
name="allowfullscreen" value="true"/><param name="menu" value="false"/><embed
src="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" type="application/x-
shockwave-flash" allowfullscreen="true" menu="false" style="width:270px;height:250px"
flashvars="mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&
showFlipBtn=true&documentId=100826051947-ef49d57c0cc5439fbf0615416f4c6404&docName=edicion_oficios&username=algirasol&l
oadingInfoText=Edicion%20Oficios&et=1282811822257&er=68" /></object>
</div>
</a>
</li>
</ul>
</div>
</div> <!-- Fin div imagenes-inferior -->
</div>
</body>
Código animación
<nowiki>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 300;
minWidth = 25;
$("ul li a").click(
function(){
if(lastBlock != this){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}else{
ancho = $(lastBlock).css('width');
if(ancho== "300px"){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
}else
$(lastBlock).animate({width: maxWidth+"px"}, { queue:false, duration:400 });
}
}
);
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#mostrar-panel-libro1").click(function(){
$("#libro1").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
$("#mostrar-panel-libro2").click(function(){
$("#libro2").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
</nowiki>
CSS
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
padding: 0px;
display: block;
margin-right: 10px;
}
ul li a{
display: block;
overflow: hidden;
height: 250px;
width: 25px;
}
#a1{
width: 210px;
}
.lomo_libro img{
position: absolute;
width:inherit;
height:250px;
}
ul li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 25px;
}
#contenedor{
width: 730px;
height: 460px;
background-color:#FFF;
padding: 20px 55px
}
#texto-superior{
width: 100%;
height: 40%;
clear:both;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#texto-superior-izquierda{
width: 50%;
height: 100%;
background-color:#FFF;
float: left;
}
#texto-superior-derecha{
width: 50%;
height: 100%;
background-color:#FFF;
float: left;
}
#imagenes-inferior{
width: 100%;
height: 60%;
background-color:#FFF;
clear:both;
}
#libro1 {
background: #754c24;
height: 200px;
display: none;
position: fixed;
width: 730px;
}
#libro2 {
background: #754c24;
height: 200px;
display: none;
position: fixed;
width: 730px;
}
![Sección Constel, sitio e[ad]](/index.php?title=Especial:SubirArchivo&wpDestFile=Mapa_de_navegaci%C3%B3n_ale.png){kind=link}