Ver el código de «Caso de Estudio: Tyler School of Art»

{{Caso de Estudio
|Nombre=Tyler School of Art
|Autor=Carlos Chávez,
|Desde=2013
|Hasta=2013
|Palabras Clave=responsive design
|Cursos Relacionados=Gráfica Digital 2013
|Alumnos=Carlos Chávez,
|URL=http://tyler.temple.edu
}}
Estudio visual de diseño responsive de sitio web: http://tyler.temple.edu/#/prospective

==Diagramaciones según Sección==

La grilla varía dependiendo de la categoría. Éstas se dividen en :

* Home
* Categoría (escuela)
* Subcategoría (Carrera específica)
* Contacto



<gallery>
Image:Tyler home-01.jpg|Diagramación Home
Image:Tyler academic partners-01.jpg|Academic Programs
Image:Graphic and Interactive Design-01-01.jpg|Academic Programs
Image:Contact2.jpg|Academic Programs
</gallery>

==Grilla Responsiva==

La grilla cambia dependiendo del ancho de la pantalla. A medida que ésta se estrecha los elementos se van ubicando en las linea siguiente (float). Ésto se observa en elementos como el calendario o la sección "Learn More".

Por otro lado, el estrechamiento de la grilla genera un aumento considerablemente en la extensión vertical de la grilla, siendo ésto una dificultad en la lectura.

[[Archivo:Comparaciones grilla-01.jpg|600px]]



La grilla experimenta variaciones a medida que el ancho de pantalla se reduce. Se comienza con la utilización de 5 columnas para luego pasar a sólo 3. Sin embargo al reducirse la cantidad de columnas, éstas comienzan a aumentar de ancho, llegando progresivamente a 1 columna que cubre el ancho total de la pantalla. El último ejemplo expuesto en el extremo derecho, evidencia la "ruptura" de la grilla, haciéndose imposible la navegación.

[[Archivo:Cambios escala grilla-01.jpg|800px]]

===Header===

Los márgenes aumentan permittiendo la aparición del blanco. En el formato de IPAD, título y subtítulo se disponen horizontalmente, haciendo uso del espacio conseguido. Sin embargo en el formato Máximo, éstos se alinean verticalmente tal como en el formato más pequeño.

[[Archivo:Titulos-01.jpg|700px]]

===Menú de Navegación===

Se observan los cambios que experimenta el menú de navegación, siendo éstos caracterizados por la división de horizontes, donde las opciones referentes al tipo de alumno se ubican por debajo del menú principal (a partir del ancho de pantalla de 773px). Finalmente, a partir del ancho de 747px, se incorpora una opción de menú en el ángulo superior derecho de la p{agina.

[[Archivo:Header tyler university.jpg|800px]]


Bajo estas dimensiones, el sitio genera una viñeta en la esquina superior derecha de la pantalla, donde por medio de un ícono de "opciones" se ofrece al usuario la alternativa de desplegar el nuevo menú.

[[Archivo:Comparaciones MENU-03.jpg|800px]]

===Cambios de Imagen===

La imagen experimenta cambios de escala, sin embargo la imagen aparece enmascarada, ocultando partes de la imagen según las proporciones requeridas para la grilla.

[[Archivo:Imagen home-01.jpg|700px]]

[[Archivo:Imagenes seccion art-01.jpg|700px]]

===Desaparición de Contenidos===

En el cambio de una resolución a otra, se observa la desaparición de algunos elementos. Es el caso de la caja de texto con las palabras "PERSPECTIVE", la sección "LEARN MORE" y el "CALENDARIO" (todas destacadas en la imagen inferior mediante un cuadrado rojo.) 

[[Archivo:Desaparicion texto-01.jpg|700px]]

===Boton de Búsqueda===

En los dos primeros mayores formatos (máximo y ipad), la barra de búsqueda se ubica en la esquina superior derecha y de muy menor tamaño. En los dos formatos restantes, la barra de búsqueda aumenta de tamaño y se hace mucho más visible. Se convierte en un protagonista en su ubicación en el espacio gráfico.

[[Archivo:Search botom-01.jpg|700px]]

===Controles===

En los dos primeros mayores formatos (máximo y ipad), las imágenes contienen flechas para obtener más información. A medida que se reduce la pantalla, las flechas se convierten en puntos, para así utilizar la menor cantidad de espacio posible. 

Por otro lado es interesante la comparación entre los tamaños de imagen, ya que entre el formato 1 y el formato 2 la imagen se achica a medida que el formato de pantalla se reduce, sin embargo una vez que la imagen pasa a la línea inferior ésta vuelve a su tamaño original.

[[Archivo:CONTROLES-01.jpg|700px]]

==Texto==

A meida que se reduce la pantalla, los márgenes izquierdos se reducen al mínimo para luego comenzar a reducir las cajas de textos sin alterar los tamaños tipográficos.

[[Archivo:Textos tyler-01.jpg|700px]]

===Variaciones Tipográficas===

====Header====

El estudio tipográfico realizado en el Header evidenció los cambios de tamaño presentados por los títulos de menú. Éstos aumentan de 11pt a 12pt a medida que se reduce el ancho de pantalla. Sin embargo al llegar a un ancho mínimo, la tipografía vuelve a su tamaño original.

[[Archivo:Tamaños tipografia-01.jpg|700px]]

====Caja de Texto====


El estudio de las cajas de texto en las páginas de contenidos demuestra los pocos cambios que éstas experimentan en formatos de ancho distintos. El título principal decrece progresivamente de tamaño (de 65px a 36px).

El subtítulo disminuye su tamaño de 24px a 21px. Loes estilos de la caja de texto permanecen constantes sin alterar sus tamaños.

[[Archivo:Comparaciones tipograficas2-02.jpg|800px]]

En el Home, por otro lado, los estilos tipográficos de los contenidos no experimentan cambios. Los tamaños y grosores son constantes en los distintos anchos de pantalla.

[[Archivo:Tipografia home-02.jpg|800px]]

====Footer====

El footer experimenta cambios de diagramación sin variaciones en la escala de los elementos. A medida que se reduce la pantalla, los elementos comienza a alinearse verticalmente.

[[Archivo:Foother tyler-01.jpg|700px]]

[[Archivo:Footercolores-02.jpg|700px]]

==Conclusiones==

Principalmente, el sitio cumple eficientemente con los requerimientos de un sitio responsivo. Existen variados estados de la grilla, generando suaves transiciones entre una diagramación y otra. Por otro lado se identifican diferentes modos de "acomodación" de los elementos en el espacio provocados por los cambios en los anchos de pantalla. Estas acomodaciones pueden ser provocadas por ''desplazamientos'' o bien ''cambios de escala''. En primera instancia, los elementos comienzas a hacer uso de los margenes e intersticios propios de las grilla iniciales (reducción de márgenes). Sin embargo, a medida que se comienzan a reducir aún más los espacios, los elementos comienzas a experimentar cambios de tamaño, lo que permite acomodar de mejor manera los distintos objetos de la página. 

En cuanto a las debilidades, podemos identificar la pérdida de control por las longitudes de la página al reducir los anchos de la pantalla. En ocasiones, el sitio requiere de demasiado "scroll down" para poder conocer los contenidos totales de una página específica. Ésto dificulta la navegación haciendo de muy difícil acceso los elementos que se encuentran en la parte inferior de la página.