Diferencia entre revisiones de «Propuesta de portada para el sitio ead»
Línea 46: | Línea 46: | ||
==Proyecto en GitHub== | ==Proyecto en GitHub== | ||
La propuesta está alojada en [https://github.com/caterinadasilva/EGGL-Caterina-Da-Silva/ GitHub], en donde puede verse el código usado directamente desde la página. | |||
==Grilla== | ==Grilla== | ||
[[Archivo:CDS-PF-Grid-0_to_1279.png]] | |||
===Bloques=== | ===Bloques=== |
Revisión del 12:36 2 sep 2012
Título | [[Título::Propuesta de portada para el sitio e[ad]]] |
---|---|
Tipo de Proyecto | Proyecto de Taller |
Palabras Clave | framework, diseño de interfaz |
Período | 2012-2012 |
Asignatura | Construcción de Diseño Gráfico 4, |
Del Curso | Taller de Construcción DG 4 - 2012, |
Carreras | Diseñ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) | Caterina Da Silva |
Profesor | Helbert Spencer |
URL | https://github.com/caterinadasilva/EGGL-Caterina-Da-Silva/ |
Resumen
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:
Idea del sitio | 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.
Para móviles (cuatro bloques)
Para móviles apaisados / iPad (ocho bloques)
Para iPad apaisado / notebook (doce bloques)
Para pantallas grandes (iMac) (dieciséis bloques)
Resultado | Propuesta
Proyecto en GitHub
La propuesta está alojada en GitHub, en donde puede verse el código usado directamente desde la página.
Grilla
Bloques
Responsividad para cuatro tamaños
Mapas de divs
Pantallas
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
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
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 busca crear 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.