Propuesta de portada para el sitio ead

De Casiopea
Revisión del 23:31 1 jul 2013 de Caterinadasilva (discusión | contribuciones)
(dif) ← Revisión anterior | Revisión actual (dif) | Revisión siguiente → (dif)


Título[[Título::Propuesta de portada para el sitio e[ad]]]
Tipo de ProyectoProyecto de Taller
Palabras Claveframework, diseño de interfaz
Período2012-2012
AsignaturaConstrucción de Diseño Gráfico 4
Del CursoTaller de Construcción DG 4 - 2012
CarrerasDiseño Gráfico
Alumno(s)Caterina Da Silva
ProfesorHerbert Spencer
URLhttps://github.com/caterinadasilva/EGGL-Caterina-Da-Silva/

Resumen

Durante el Taller de de Construcción 4, se propuso la idea de crea un nuevo framework para el sitio de la Escuela. Para ello, se dispuso para el taller un código base el cual tenía que ser editado por cada uno.

La propuesta está alojada en GitHub, en donde puede verse el código usado directamente desde la página.

Importante: El sitio está optimizado para navegador Firefox.

Diseño de interfaz gráfica para el usuario del sitio e[ad]

Para tener una idea de lo que queríamos comenzar a hacer, se nos encargó que creáramos una interfaz de usuario para la Escuela. Esta fue mi propuesta:

CDS-UI-1.png


Propuesta

Grilla

CDS-PF-Grid-0 to 1279.png

La grilla se hizo en base a bloques, no columnas como comúnmente. La principal diferencia entre ambas es que los bloques no tienen un espacio entre ellos, al contrario de las columnas. Estos bloques miden 80px de ancho y los espacios entre ellos (o interColumna, como lo llamo en el código) se los voy dando según el padding (relleno, en español). Esta intercolumna, es un octavo de l bloque, es decir 10px.

En esta imagen se explica de manera clara cómo funciona el sistema de paddings, margins y borders, según el contenido.

CDS-PF-margin-padding-border.gif

Como podemos ver, el padding agranda el ancho del contenido, por lo que tuve que recortar los anchos del bloque restándole la intercolumna, para sumársela en padding, y para los últimos de la fila, les di una clase especial para que no tuviesen padding.


¿Por qué 80px?

Me basé en la pantalla de un iPhone para hacer el cálculo. Éstas miden 320×480 píxeles, si dividimos el ancho en 4 partes, nos da 80px. Si a estos mismos 80px los multiplicamos por 6, nos da el alto del teléfono. Por 8, 640, que calza con el ancho de un iPad (768 píxeles); por 12, 960, que nos funciona para el alto del iPad (1024px) y también, de manera cómoda, para un MacBook. Y, finalmente, por 16, 1280, quedando justo en la pantalla del MacBook y holgadamente en la de un iMac.

CDS-PF-Pantallas.png

A partir de este bloque de 80px, se generan particiones para paddings, bordes y márgenes, ya sea en 2, 4 y 8.

Wireframes

Como guía, creo estos wireframes muy básicos de cómo quiero que se vea la página, siguiendo aproximadamente los anchos que quiero que se repitan dentro del sitio.


CDS-PF-4bloques.png

Para móviles (cuatro bloques)


CDS-PF-8bloques.png

Para móviles apaisados / iPad (ocho bloques)


CDS-PF-12bloques.png

Para iPad apaisado / notebook (doce bloques)


CDS-PF-16bloques.png

Para pantallas grandes (iMac) (dieciséis bloques)

Mapa de divs

CDS-PF-TC4-MAPAS DE DIVS.png

Capturas de Pantalla

Pantalla de 4 bloques:

CDS-PF-Pantalla4bloques.png


Pantalla de 8 bloques:

CDS-PF-Pantalla8bloques.png


Pantalla de 12 bloques:

CDS-PF-Pantalla12bloques.png


Pantalla de 16 bloques:

CDS-PF-Pantalla16bloques.png

Programas usados

Edición de textos

Coda 2 + LESS plugin

Coda 2 es la última versión de una de las herramientas para la edición de código más completa que integra un editor de texto y CSS, SVN, un terminal y la posibilidad de trabajar con archivos alojados en un FTP. Se le pueden instalar plugins que facilitan el trabajo con ciertos documentos, en este caso, el de LESS, el cual permite crear directamente hojas de estilo LESS en el Coda y pintar el código para su mejor lectura y comprensión. Aquí el listado de Plugins para Coda 2. Luego, Coda fue dejado sólo para editar HTML, después de que fuese recomendado Crunch para trabajar en LESS.

Crunch

Crunch es un sencillo editor que permite editar archivos CSS y LESS y compilarlos sin necesidad de usar línea de comandos. Es una aplicación gratuita y hecha con Adobe AIR, soporta resaltado de sintaxis y tiene soporte para multiples pestañas. Una vez guardes un archivo LESS, la versión en CSS se creará de forma automática.

Compilador de LESS a CSS

LESS App

LESS App es una aplicación para Mac que permite monitorear una hoja de estilos .less y cada vez que se realice un cambio en la hoja de estilos, o en alguna de las hojas externas que utilice, compilará una nueva versión CSS de la misma.

Repositorio en línea

GitHub for Mac

GitHub tiene una aplicación especial para Mac, la cual permite clonar repositorios a nuestro computador, mantener nuestro historial de cambios en nuestro repositorio, compartir cambios personalizados de un código, hacer una rama de alguno y compartir códigos de programación en la página de GitHub. La ocupamos para alojar nuestras propuestas en la web.

Estudios previos

Caso de Estudio | GEL: Global Experience Language

Se crea un caso de estudio para uno de los frameworks y sistemas de grillas que se presentaron en clases: Golden Grid System ,BBC GEL, Gridpak, Frameless, Goldilocks Approach, entre otros.

Me decido por GEL: Global Experience Language

Rediseño de widget

Se debe rediseñar un widget de un sistema de la casa. Algo sencillo que requiera una mejora.

Tomo la aspiradora de mi casa, que es un objeto sencillo que se ocupa diaria y profusamente para la limpieza, pero tiene muchos puntos que pueden ser mejorados, como son el ruido excesivo, el sistema de cables, y su poca movilidad.

[Rediseño de aspiradora]