SlideShare une entreprise Scribd logo
1  sur  5
Télécharger pour lire hors ligne
Fabián Alvarez / Taller de Arquitectura Web 2009




                     TALLER de ARQUITECTURA WEB
                                          Por FABIAN ALVAREZ

             Sobre el oficio de definir estructuras, funcionalidad y contenido
                    en un sitio Web ANTES de diseñar o programar.

                                                •••<>•••

Introducción
Este taller busca darle valor profesional y marco académico a una zona incierta del trabajo de
desarrollo de ambientes virtuales (multimedia y Web) generalmente cubierto por el diseñador gráfico o
por el programador.


Usar un martillo no nos hace carpinteros.
A diferencia de otros cursos donde se enseñan programas de diseño o lenguajes de programación, este
taller se concentra en la actividad profesional PREVIA, la de definir y organizar estructuras,
funcionalidad y contenidos, "pensar una Web".


Objetivos del taller
• Adquirir los conocimientos teóricos y prácticos fundamentales para el diseño de arquitecturas de
información e interfases para la Web.

• Aplicar metodologías para abordar con el cliente el proceso de desarrollo de un sitio web.
Herramientas para ordenar el trabajo, anticipar problemas y controlar presupuestos.

• Definir los conceptos claves del diseño orientado al usuario.

• Incorporar criterios de "Buen Diseño". Conocer y aplicar fundamentos básicos y muchas veces no
considerados sobre estética, diseño, lógica visual y funcional.

El taller está destinado a estudiantes y profesionales en el área del diseño web, programación y gestión de
información electrónica.




Fabián Alvarez / Taller de Arquitectura Web / www.underbit.com.ar / underbit@gmail.com / 1998.2009
Fabián Alvarez / Taller de Arquitectura Web 2009

Programa general
Conceptos generales

- Arquitectura de información. Introducción.
- El Arquitecto Web: Pensamiento global y visión de la totalidad de un proyecto.
- Analogía con la arquitectura tradicional.
- Diseño de estructuras de información.
- Principios del diseño de interfaces Web.
- Presentando a los actores: Cliente - Desarrollador - Usuario
- El diseño centrado en el usuario.
- Card Sorting. Prototipos HTML.
- La percepción de la información.

El "Cuerpo" Web

- Anatomía de un sitio Web: Desarmando y volviendo a armar las partes.
- Contenedores - Contenido - Navegación - Identidad - Estilo
- La importancia del espacio en Blanco
- Cómo definir la Estructura, Funcionalidad y Contenido de un sitio.
- Uso de retículas. Distintos criterios.
- Definiendo Jerarquías. Categorías. Ubicación de los contenidos y funciones.
- Etiquetas / El Nombre de las Cosas / Terminología

Lógica visual.

- Percepción de la información.
- Estructuras visuales y retículas.
- Estilos. Convenciones.
- Proporciones y simetría. La regla áurea.
- La escala en el diseño.
- El texto: Tipografía.
- Elementos: Márgenes. Bordes. Espacio blanco.
- Balance y equilibrio compositivo.
- Izquierda y derecha de la pantalla. Simetría y asimetría.
- Contraste. Escala. Contornos.
- Encuadre de imágenes. Enfocando creativamente.

Usabilidad. Diseñando la experiencia interactiva.

- Interfases para usar sin pensar. El sentido común en el diseño interactivo.
- Lo que el usuario nunca debe pensar.
- Interfases que responden Cómo? – Dónde? – Qué? al usuario.
- Lo que No hay que hacer. Análisis, crítica y propuesta sobre casos reales.
- Diferencias entre diseño de uso pretendido y el uso real.
- Diagramas de recorridos. Navegar – Buscar / Encontrar - Enviar.
- Curva de aprendizaje de una interfase.
- Como “lee” el usuario?. Hojear la Web.




Fabián Alvarez / Taller de Arquitectura Web / www.underbit.com.ar / underbit@gmail.com / 1998.2009
Fabián Alvarez / Taller de Arquitectura Web 2009

Tríos conceptuales en interacción.

- Dato / Información / Conocimiento
- Texto / Contexto / Usuario
- Contenido / Estructura / Funcionalidad
- Qué hay? / Dónde estoy? / Cómo voy?
- Cliente / Desarrollador / Usuario
- Diseño / Tecnología / Comunicación

Clientes Vs. Desarrolladores.

- El primer contacto. Preguntas claves al cliente en una primera aproximación a un trabajo.
- Que nos "dice" una tarjeta personal?
- Ordenando el trabajo, anticipando problemas.
- Los Clientes que "quieren ver algo":
- Dando expectativas razonables de los clientes.
- Las consideraciones sobre los potenciales usuarios.

Prototipos Web.

- Uso de Prototipos HTML en el proceso de desarrollo Web. Simular toda instancia funcional del sitio, a
través de simples páginas HTML
- Cómo evitar que tiempos y presupuestos se disparen.
- Anticipar y minimizar errores y marchas atrás.
- Card Sorting: Organizar y ayudar a definir los contenidos a publicar.
- Agrupando funciones, jerarquías, categorías. Barras de navegación, estructura de secciones y
subsecciones.


Sobre el taller
- Cada encuentro se compone de una exposición teórica sobre la que se realizan actividades prácticas o
ejercicios, individuales y grupales.
- Se trabajará con casos de estudios, análisis de ejemplos, comparación, corrección, detección de aciertos y
errores. Propuestas. Rediseños.
- Juegos de rol entre Cliente / Desarrollador / Usuario sobre proyectos dados.
- Los prácticos se realizan en PC y con papel, lápiz y marcadores de color.
- El taller ofrece, de ser preciso, asistencia básica en manejo de programas de diseño (PhotoShop -
Dreamweaver) para realizar los ejercicios.
- El taller promueve una dinámica activa entre los participantes.


Requerimientos
- Manejo de sistema operativo Windows / Manejo de navegador web
- Conocimiento de herramientas de diseño (Dreamweaver – PhotoShop - no excluyente)
- Papel / Lápices / Marcadores de color


Background teórico
Steve Krug / Richard S. Wurman / Eric Holter / Ben Hunt / Jesse James Garrett / Jason Beaird / Donald
Norman / www.alistapart.com




Fabián Alvarez / Taller de Arquitectura Web / www.underbit.com.ar / underbit@gmail.com / 1998.2009
Fabián Alvarez / Taller de Arquitectura Web 2009

                                    Fabián Alvarez • Cv

               FORMACION                                     ACTIVIDAD PROFESIONAL

Formado en Facultad de Arquitectura y                   1983
Urbanismo (UBA - FAU - 1982/1987). Historia del         Inicia su actividad profesional en Artes
Arte con Arq. Julio Guerrero / Taller Oficio.           Gráficas (estudios de diseño y arquitectura,
Producción gráfica en la Fundacion Gutemberg.           imprentas).

Desde 1990 es autodidacta en diseño asistido            1990
por computadora.                                        Incorpora herramientas informáticas aplicadas
Idóneo en manejo de programas vectoriales,              a la producción gráfica. (El Naturalista - Estudio
fotográficos, editores web, sonido y video.             Arq. Laura Clot)

A partir de 1997 se capacita en procesos de             1996
interactividad y programación web. Nosis.com /          Presentaciones multimedia, video digital y
Gustavo Font / Darío Blanco.                            CdRoms. (Nosis SA)

En 2004 cursa el seminario "Negocios de                 1998
Diseño - Creacion, gestión y valuación de un            Comienza su actividad como diseñador web,
emprendimiento" Dra. Patricia Jablonka -                formando parte del equipo de desarrollo de
INCUBA - CMD - Centro Metropolitano de Diseño.          Nosis.com

BACKGROUND TEORICO                                      2009
                                                        Cumple 11 años como diseñador
Scott McCloud / Steve Krug / Richard S. Wurman /        independiente de sitios Web. Resumen de
Jakob Nielsen / Eric Holter / Ben Hunt / Jesse          trabajos hasta la fecha en http://underbit.com.ar
James Garrett / Jason Beaird / www.alistapart.com       Actualmente trabaja en colaboración con Darío
                                                        Blanco (programador).
OTROS ESTUDIOS
                                                        Algunos clientes
Dibujo e Historieta con Cristian Mallea y Angel         Nosis SA / Complot / Catevi (Soc.Central
Mosquito. Música, teoría, armonía con Fernando          Arquitectos) / "Guri Guazu" Banda de sonido
Tavolaro. Audio y Sonido con Jorge Haro y Hugo          (Malabar - TV Canal 7) / Cybrel / Vicentico
Foigelman.                                              (Estudio Roxanova) / ArteIt / Parakultural

                                                        Algunos rubros
                                                        Información financiera, industrias, servicios, pago
                                                        por descargas, catálogos, proyectos inmobiliarios,
                                                        moda, arte, cultura, tango, asociaciones, etc.




En 2009 comienza su trabajo de investigación sobre lo que considera aspectos fundamentales y muchas
veces no considerados sobre la actividad de "pensar una web" y el rol del "Arquitecto Web".

Escribe el programa del "Taller de Arquitectura Web” Actualmente se dicta en el Instituto ArteIt, Lavalle
3910 PB "B". Buenos Aires. El taller brinda un soporte teórico / práctico para ordenar los diferentes
ángulos de nuestra compleja actividad.




Fabián Alvarez / Taller de Arquitectura Web / www.underbit.com.ar / underbit@gmail.com / 1998.2009
Fabián Alvarez / Taller de Arquitectura Web 2009



OTRAS ACTIVIDADES

1987/1991 Trabaja como técnico audiovisual y diseñador gráfico en el Centro Parakultural
1998/2002 Proyecto y realización de stands comerciales (Nosis SA / SilenPro) Hotel Sheraton - Palacio San
Miguel - Hotel Panamericano - Centro Mun. de Exposiciones.
2002/2004 Revista Parakultural Posta. Guía de actividad cultural tanguera. - Producción gráfica / Producción
editorial / Web
2007/2009 - Autor de la banda de sonido y música incidental para el programa "Gurí Guazu" - Canal 7 /
Producción: Malabar. Rubro: TV. Juego interactivo en 3D.
2009 - Ilustraciones aplicadas a objetos. Feria de diseño.


                                                •••<>•••
                                             Fabián Alvarez
                                             estudio underBit
                                           www.underbit.com.ar
                                           underbit@gmail.com
                                             15-5-805-8870


                                                   2009




Fabián Alvarez / Taller de Arquitectura Web / www.underbit.com.ar / underbit@gmail.com / 1998.2009

Contenu connexe

En vedette

Model Tiang Lampu Proyek Pelelangan di Siak-Riau
Model Tiang Lampu Proyek Pelelangan di Siak-RiauModel Tiang Lampu Proyek Pelelangan di Siak-Riau
Model Tiang Lampu Proyek Pelelangan di Siak-RiauHastana Raja Group
 
Executive Assistant Job Description Template by Bayt.com
Executive Assistant Job Description Template by Bayt.comExecutive Assistant Job Description Template by Bayt.com
Executive Assistant Job Description Template by Bayt.comBayt.com
 
ITFT - Human Resource Mgt. 5
ITFT - Human Resource Mgt. 5ITFT - Human Resource Mgt. 5
ITFT - Human Resource Mgt. 5Amit Arora
 
Lantegi Batuak-en 2010ko dosierra
Lantegi Batuak-en 2010ko dosierraLantegi Batuak-en 2010ko dosierra
Lantegi Batuak-en 2010ko dosierraLantegi Batuak
 
History of CALL
History of CALLHistory of CALL
History of CALLAlfred85
 
คะแนนเวียดนามUpdate20/10/57
คะแนนเวียดนามUpdate20/10/57คะแนนเวียดนามUpdate20/10/57
คะแนนเวียดนามUpdate20/10/57Ae Tiparpa
 
Ambil yang baik dan tinggalkan yang buruk
Ambil yang baik dan tinggalkan yang burukAmbil yang baik dan tinggalkan yang buruk
Ambil yang baik dan tinggalkan yang burukKetut Darmanto Saputro
 
An Evaluation of the Teaching/Research Nexus at Ulster: A Cross-Faculty Study
An Evaluation of the Teaching/Research Nexus at Ulster:  A Cross-Faculty Study An Evaluation of the Teaching/Research Nexus at Ulster:  A Cross-Faculty Study
An Evaluation of the Teaching/Research Nexus at Ulster: A Cross-Faculty Study campone
 
Diario Histórico
Diario HistóricoDiario Histórico
Diario Históricoirmarisrn
 
Bicycle tireroadcontact
Bicycle tireroadcontactBicycle tireroadcontact
Bicycle tireroadcontactVera Bulsink
 
Acta Microforo 23 De Noviembre de 2008
Acta Microforo 23 De Noviembre de 2008Acta Microforo 23 De Noviembre de 2008
Acta Microforo 23 De Noviembre de 2008Rosa Melo
 

En vedette (20)

Model Tiang Lampu Proyek Pelelangan di Siak-Riau
Model Tiang Lampu Proyek Pelelangan di Siak-RiauModel Tiang Lampu Proyek Pelelangan di Siak-Riau
Model Tiang Lampu Proyek Pelelangan di Siak-Riau
 
Escanear0004
Escanear0004Escanear0004
Escanear0004
 
Executive Assistant Job Description Template by Bayt.com
Executive Assistant Job Description Template by Bayt.comExecutive Assistant Job Description Template by Bayt.com
Executive Assistant Job Description Template by Bayt.com
 
ITFT - Human Resource Mgt. 5
ITFT - Human Resource Mgt. 5ITFT - Human Resource Mgt. 5
ITFT - Human Resource Mgt. 5
 
Presentación
PresentaciónPresentación
Presentación
 
Lesly Molina
Lesly MolinaLesly Molina
Lesly Molina
 
Lantegi Batuak-en 2010ko dosierra
Lantegi Batuak-en 2010ko dosierraLantegi Batuak-en 2010ko dosierra
Lantegi Batuak-en 2010ko dosierra
 
History of CALL
History of CALLHistory of CALL
History of CALL
 
คะแนนเวียดนามUpdate20/10/57
คะแนนเวียดนามUpdate20/10/57คะแนนเวียดนามUpdate20/10/57
คะแนนเวียดนามUpdate20/10/57
 
PresentacióN
PresentacióNPresentacióN
PresentacióN
 
Ambil yang baik dan tinggalkan yang buruk
Ambil yang baik dan tinggalkan yang burukAmbil yang baik dan tinggalkan yang buruk
Ambil yang baik dan tinggalkan yang buruk
 
An Evaluation of the Teaching/Research Nexus at Ulster: A Cross-Faculty Study
An Evaluation of the Teaching/Research Nexus at Ulster:  A Cross-Faculty Study An Evaluation of the Teaching/Research Nexus at Ulster:  A Cross-Faculty Study
An Evaluation of the Teaching/Research Nexus at Ulster: A Cross-Faculty Study
 
Cine este handicapat
Cine este handicapatCine este handicapat
Cine este handicapat
 
2009 46 pengadilan tipikor
2009 46 pengadilan tipikor2009 46 pengadilan tipikor
2009 46 pengadilan tipikor
 
TPS 19 Kadia
TPS 19 KadiaTPS 19 Kadia
TPS 19 Kadia
 
El concepto de pena, ¿Un aspecto incontrovertido en su teoría?/The concept of...
El concepto de pena, ¿Un aspecto incontrovertido en su teoría?/The concept of...El concepto de pena, ¿Un aspecto incontrovertido en su teoría?/The concept of...
El concepto de pena, ¿Un aspecto incontrovertido en su teoría?/The concept of...
 
Diario Histórico
Diario HistóricoDiario Histórico
Diario Histórico
 
Bicycle tireroadcontact
Bicycle tireroadcontactBicycle tireroadcontact
Bicycle tireroadcontact
 
TPS 7 Anaiwoi
TPS 7 AnaiwoiTPS 7 Anaiwoi
TPS 7 Anaiwoi
 
Acta Microforo 23 De Noviembre de 2008
Acta Microforo 23 De Noviembre de 2008Acta Microforo 23 De Noviembre de 2008
Acta Microforo 23 De Noviembre de 2008
 

Similaire à Fabian Alvarez Arq Web

Ixda ba 230309 640x480 v112
Ixda ba 230309 640x480 v112Ixda ba 230309 640x480 v112
Ixda ba 230309 640x480 v112Santiago Bustelo
 
Cómo prototipar exitosamente tu proyecto
Cómo prototipar exitosamente tu proyectoCómo prototipar exitosamente tu proyecto
Cómo prototipar exitosamente tu proyectoIxDA Mendoza
 
Guia-de_recursos_digitales_fabian_vasquez_2_c1
  Guia-de_recursos_digitales_fabian_vasquez_2_c1  Guia-de_recursos_digitales_fabian_vasquez_2_c1
Guia-de_recursos_digitales_fabian_vasquez_2_c1FabianVasquez32
 
Comunicacion corporativa medios on line
 Comunicacion corporativa medios on line Comunicacion corporativa medios on line
Comunicacion corporativa medios on lineMacu del Rosal
 
Remodelación del sitio Web de Canaima GNU/Linux
Remodelación del sitio Web de Canaima GNU/LinuxRemodelación del sitio Web de Canaima GNU/Linux
Remodelación del sitio Web de Canaima GNU/LinuxLeonardo J. Caballero G.
 
Modelo Guión Conceptual
Modelo Guión Conceptual Modelo Guión Conceptual
Modelo Guión Conceptual Alberto Rojas
 
Seminario: Prototipado y Wireframes
Seminario: Prototipado y WireframesSeminario: Prototipado y Wireframes
Seminario: Prototipado y WireframesMiguel Gea
 
El Diseño Web en Tucumán
El Diseño Web en TucumánEl Diseño Web en Tucumán
El Diseño Web en TucumánAlejandro Grosse
 

Similaire à Fabian Alvarez Arq Web (20)

Prototipado
PrototipadoPrototipado
Prototipado
 
Presentación web cifo_juvenal
Presentación web cifo_juvenalPresentación web cifo_juvenal
Presentación web cifo_juvenal
 
Juvenal web cifo_presentación2
Juvenal web cifo_presentación2Juvenal web cifo_presentación2
Juvenal web cifo_presentación2
 
Juvenal web cifo_presentación2
Juvenal web cifo_presentación2Juvenal web cifo_presentación2
Juvenal web cifo_presentación2
 
Ixda ba 230309 640x480 v112
Ixda ba 230309 640x480 v112Ixda ba 230309 640x480 v112
Ixda ba 230309 640x480 v112
 
Cómo prototipar exitosamente tu proyecto
Cómo prototipar exitosamente tu proyectoCómo prototipar exitosamente tu proyecto
Cómo prototipar exitosamente tu proyecto
 
Curriculum vitae, Fabián Pérez
Curriculum vitae, Fabián PérezCurriculum vitae, Fabián Pérez
Curriculum vitae, Fabián Pérez
 
Reel gusoto 3D/Arte
Reel gusoto 3D/ArteReel gusoto 3D/Arte
Reel gusoto 3D/Arte
 
Guia-de_recursos_digitales_fabian_vasquez_2_c1
  Guia-de_recursos_digitales_fabian_vasquez_2_c1  Guia-de_recursos_digitales_fabian_vasquez_2_c1
Guia-de_recursos_digitales_fabian_vasquez_2_c1
 
Power point, prezi y web node
Power point, prezi y web nodePower point, prezi y web node
Power point, prezi y web node
 
Práctica 2
Práctica 2Práctica 2
Práctica 2
 
Comunicacion corporativa medios on line
 Comunicacion corporativa medios on line Comunicacion corporativa medios on line
Comunicacion corporativa medios on line
 
Dani Plana CV
Dani Plana CVDani Plana CV
Dani Plana CV
 
Remodelación del sitio Web de Canaima GNU/Linux
Remodelación del sitio Web de Canaima GNU/LinuxRemodelación del sitio Web de Canaima GNU/Linux
Remodelación del sitio Web de Canaima GNU/Linux
 
Modelo Guión Conceptual
Modelo Guión Conceptual Modelo Guión Conceptual
Modelo Guión Conceptual
 
Portafolio intro
Portafolio introPortafolio intro
Portafolio intro
 
CV - Ester Pillado
CV  - Ester PilladoCV  - Ester Pillado
CV - Ester Pillado
 
cv_gerard_manyosa
cv_gerard_manyosacv_gerard_manyosa
cv_gerard_manyosa
 
Seminario: Prototipado y Wireframes
Seminario: Prototipado y WireframesSeminario: Prototipado y Wireframes
Seminario: Prototipado y Wireframes
 
El Diseño Web en Tucumán
El Diseño Web en TucumánEl Diseño Web en Tucumán
El Diseño Web en Tucumán
 

Dernier

Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio2021ArqROLDANBERNALD
 
Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....estefaniaortizsalina
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfLeonardoDantasRivas
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEhayax3
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfcucciolosfabrica
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxLeo Florez
 
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfDanielaPrezMartnez3
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.docilvrosiebp
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYkarendaza9506
 
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxSESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxJustoAlbertoBaltaSmi
 
cabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanacabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanaMarsielMendoza1
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGersonManuelRodrigue1
 
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGODIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGOyordanespinozanina
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezPaola575380
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroJuan Carlos Fonseca Mata
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfBrbara57940
 
Introduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxIntroduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxcalc5597
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALEvaMaraMorenoLago1
 
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxDISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxNorberto Chacon
 

Dernier (20)

Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio
 
Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
 
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
 
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxSESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
 
cabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanacabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadana
 
1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
 
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGODIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
Introduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxIntroduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptx
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
 
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxDISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
 

Fabian Alvarez Arq Web

  • 1. Fabián Alvarez / Taller de Arquitectura Web 2009 TALLER de ARQUITECTURA WEB Por FABIAN ALVAREZ Sobre el oficio de definir estructuras, funcionalidad y contenido en un sitio Web ANTES de diseñar o programar. •••<>••• Introducción Este taller busca darle valor profesional y marco académico a una zona incierta del trabajo de desarrollo de ambientes virtuales (multimedia y Web) generalmente cubierto por el diseñador gráfico o por el programador. Usar un martillo no nos hace carpinteros. A diferencia de otros cursos donde se enseñan programas de diseño o lenguajes de programación, este taller se concentra en la actividad profesional PREVIA, la de definir y organizar estructuras, funcionalidad y contenidos, "pensar una Web". Objetivos del taller • Adquirir los conocimientos teóricos y prácticos fundamentales para el diseño de arquitecturas de información e interfases para la Web. • Aplicar metodologías para abordar con el cliente el proceso de desarrollo de un sitio web. Herramientas para ordenar el trabajo, anticipar problemas y controlar presupuestos. • Definir los conceptos claves del diseño orientado al usuario. • Incorporar criterios de "Buen Diseño". Conocer y aplicar fundamentos básicos y muchas veces no considerados sobre estética, diseño, lógica visual y funcional. El taller está destinado a estudiantes y profesionales en el área del diseño web, programación y gestión de información electrónica. Fabián Alvarez / Taller de Arquitectura Web / www.underbit.com.ar / underbit@gmail.com / 1998.2009
  • 2. Fabián Alvarez / Taller de Arquitectura Web 2009 Programa general Conceptos generales - Arquitectura de información. Introducción. - El Arquitecto Web: Pensamiento global y visión de la totalidad de un proyecto. - Analogía con la arquitectura tradicional. - Diseño de estructuras de información. - Principios del diseño de interfaces Web. - Presentando a los actores: Cliente - Desarrollador - Usuario - El diseño centrado en el usuario. - Card Sorting. Prototipos HTML. - La percepción de la información. El "Cuerpo" Web - Anatomía de un sitio Web: Desarmando y volviendo a armar las partes. - Contenedores - Contenido - Navegación - Identidad - Estilo - La importancia del espacio en Blanco - Cómo definir la Estructura, Funcionalidad y Contenido de un sitio. - Uso de retículas. Distintos criterios. - Definiendo Jerarquías. Categorías. Ubicación de los contenidos y funciones. - Etiquetas / El Nombre de las Cosas / Terminología Lógica visual. - Percepción de la información. - Estructuras visuales y retículas. - Estilos. Convenciones. - Proporciones y simetría. La regla áurea. - La escala en el diseño. - El texto: Tipografía. - Elementos: Márgenes. Bordes. Espacio blanco. - Balance y equilibrio compositivo. - Izquierda y derecha de la pantalla. Simetría y asimetría. - Contraste. Escala. Contornos. - Encuadre de imágenes. Enfocando creativamente. Usabilidad. Diseñando la experiencia interactiva. - Interfases para usar sin pensar. El sentido común en el diseño interactivo. - Lo que el usuario nunca debe pensar. - Interfases que responden Cómo? – Dónde? – Qué? al usuario. - Lo que No hay que hacer. Análisis, crítica y propuesta sobre casos reales. - Diferencias entre diseño de uso pretendido y el uso real. - Diagramas de recorridos. Navegar – Buscar / Encontrar - Enviar. - Curva de aprendizaje de una interfase. - Como “lee” el usuario?. Hojear la Web. Fabián Alvarez / Taller de Arquitectura Web / www.underbit.com.ar / underbit@gmail.com / 1998.2009
  • 3. Fabián Alvarez / Taller de Arquitectura Web 2009 Tríos conceptuales en interacción. - Dato / Información / Conocimiento - Texto / Contexto / Usuario - Contenido / Estructura / Funcionalidad - Qué hay? / Dónde estoy? / Cómo voy? - Cliente / Desarrollador / Usuario - Diseño / Tecnología / Comunicación Clientes Vs. Desarrolladores. - El primer contacto. Preguntas claves al cliente en una primera aproximación a un trabajo. - Que nos "dice" una tarjeta personal? - Ordenando el trabajo, anticipando problemas. - Los Clientes que "quieren ver algo": - Dando expectativas razonables de los clientes. - Las consideraciones sobre los potenciales usuarios. Prototipos Web. - Uso de Prototipos HTML en el proceso de desarrollo Web. Simular toda instancia funcional del sitio, a través de simples páginas HTML - Cómo evitar que tiempos y presupuestos se disparen. - Anticipar y minimizar errores y marchas atrás. - Card Sorting: Organizar y ayudar a definir los contenidos a publicar. - Agrupando funciones, jerarquías, categorías. Barras de navegación, estructura de secciones y subsecciones. Sobre el taller - Cada encuentro se compone de una exposición teórica sobre la que se realizan actividades prácticas o ejercicios, individuales y grupales. - Se trabajará con casos de estudios, análisis de ejemplos, comparación, corrección, detección de aciertos y errores. Propuestas. Rediseños. - Juegos de rol entre Cliente / Desarrollador / Usuario sobre proyectos dados. - Los prácticos se realizan en PC y con papel, lápiz y marcadores de color. - El taller ofrece, de ser preciso, asistencia básica en manejo de programas de diseño (PhotoShop - Dreamweaver) para realizar los ejercicios. - El taller promueve una dinámica activa entre los participantes. Requerimientos - Manejo de sistema operativo Windows / Manejo de navegador web - Conocimiento de herramientas de diseño (Dreamweaver – PhotoShop - no excluyente) - Papel / Lápices / Marcadores de color Background teórico Steve Krug / Richard S. Wurman / Eric Holter / Ben Hunt / Jesse James Garrett / Jason Beaird / Donald Norman / www.alistapart.com Fabián Alvarez / Taller de Arquitectura Web / www.underbit.com.ar / underbit@gmail.com / 1998.2009
  • 4. Fabián Alvarez / Taller de Arquitectura Web 2009 Fabián Alvarez • Cv FORMACION ACTIVIDAD PROFESIONAL Formado en Facultad de Arquitectura y 1983 Urbanismo (UBA - FAU - 1982/1987). Historia del Inicia su actividad profesional en Artes Arte con Arq. Julio Guerrero / Taller Oficio. Gráficas (estudios de diseño y arquitectura, Producción gráfica en la Fundacion Gutemberg. imprentas). Desde 1990 es autodidacta en diseño asistido 1990 por computadora. Incorpora herramientas informáticas aplicadas Idóneo en manejo de programas vectoriales, a la producción gráfica. (El Naturalista - Estudio fotográficos, editores web, sonido y video. Arq. Laura Clot) A partir de 1997 se capacita en procesos de 1996 interactividad y programación web. Nosis.com / Presentaciones multimedia, video digital y Gustavo Font / Darío Blanco. CdRoms. (Nosis SA) En 2004 cursa el seminario "Negocios de 1998 Diseño - Creacion, gestión y valuación de un Comienza su actividad como diseñador web, emprendimiento" Dra. Patricia Jablonka - formando parte del equipo de desarrollo de INCUBA - CMD - Centro Metropolitano de Diseño. Nosis.com BACKGROUND TEORICO 2009 Cumple 11 años como diseñador Scott McCloud / Steve Krug / Richard S. Wurman / independiente de sitios Web. Resumen de Jakob Nielsen / Eric Holter / Ben Hunt / Jesse trabajos hasta la fecha en http://underbit.com.ar James Garrett / Jason Beaird / www.alistapart.com Actualmente trabaja en colaboración con Darío Blanco (programador). OTROS ESTUDIOS Algunos clientes Dibujo e Historieta con Cristian Mallea y Angel Nosis SA / Complot / Catevi (Soc.Central Mosquito. Música, teoría, armonía con Fernando Arquitectos) / "Guri Guazu" Banda de sonido Tavolaro. Audio y Sonido con Jorge Haro y Hugo (Malabar - TV Canal 7) / Cybrel / Vicentico Foigelman. (Estudio Roxanova) / ArteIt / Parakultural Algunos rubros Información financiera, industrias, servicios, pago por descargas, catálogos, proyectos inmobiliarios, moda, arte, cultura, tango, asociaciones, etc. En 2009 comienza su trabajo de investigación sobre lo que considera aspectos fundamentales y muchas veces no considerados sobre la actividad de "pensar una web" y el rol del "Arquitecto Web". Escribe el programa del "Taller de Arquitectura Web” Actualmente se dicta en el Instituto ArteIt, Lavalle 3910 PB "B". Buenos Aires. El taller brinda un soporte teórico / práctico para ordenar los diferentes ángulos de nuestra compleja actividad. Fabián Alvarez / Taller de Arquitectura Web / www.underbit.com.ar / underbit@gmail.com / 1998.2009
  • 5. Fabián Alvarez / Taller de Arquitectura Web 2009 OTRAS ACTIVIDADES 1987/1991 Trabaja como técnico audiovisual y diseñador gráfico en el Centro Parakultural 1998/2002 Proyecto y realización de stands comerciales (Nosis SA / SilenPro) Hotel Sheraton - Palacio San Miguel - Hotel Panamericano - Centro Mun. de Exposiciones. 2002/2004 Revista Parakultural Posta. Guía de actividad cultural tanguera. - Producción gráfica / Producción editorial / Web 2007/2009 - Autor de la banda de sonido y música incidental para el programa "Gurí Guazu" - Canal 7 / Producción: Malabar. Rubro: TV. Juego interactivo en 3D. 2009 - Ilustraciones aplicadas a objetos. Feria de diseño. •••<>••• Fabián Alvarez estudio underBit www.underbit.com.ar underbit@gmail.com 15-5-805-8870 2009 Fabián Alvarez / Taller de Arquitectura Web / www.underbit.com.ar / underbit@gmail.com / 1998.2009