Diseño digital. Fundamentos de diseño web

Transcripción

1 Diseño digital Fundamentos de diseño web

2 AVISO LEGAL Copyright 2012 Adobe Systems Incorporated. All rights reserved. La presente obra posee una licencia Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Para obtener más información acerca de los derechos otorgados en virtud de esta licencia, visite: Adobe Systems lo autoriza a realizar la cantidad de copias parciales o totales que necesite, exclusivamente para fines pedagógicos, del currículo de Diseño digital: fundamentos de diseño web, ya sea mediante el fotocopiado o la impresión de archivos del documento PDF, siempre y cuando incluya siempre las páginas que contienen la información de copyright y la distribución de dichas copias sea sin fines de lucro. Es responsabilidad de su organización supervisar la realización de copias y el uso de este currículo, así como respetar los términos del presente aviso. Reconoce que Adobe Systems se reserva el derecho de auditar su organización para corroborar el cumplimiento de estos términos, previo aviso. Queda prohibido realizar copias, reproducir y transmitir el presente material con otros fines. El presente aviso no incluye el uso del software de Adobe Systems. Debe cumplir los términos del Contrato de licencia de usuario proporcionado con el software. MARCAS REGISTRADAS Adobe Systems Inc, el logotipo Adobe Systems, el logotipo Adobe Certified Associate, Adobe Dreamweaver CS6, Adobe Fireworks CS6, Adobe Flash CS6, Adobe BrowserLab, Adobe Photoshop CS6 Extended, Adobe Illustrator CS6, y Adobe Acrobat X Pro son marcas comerciales o marcas comerciales registradas de Adobe Systems, Inc., en los Estados Unidos y/u otros países. Los productos, servicios, nombres de compañías, logotipos, diseño, títulos, palabras o frases de terceros dentro de este material pueden ser marcas comerciales de sus respectivos propietarios. AVISO DE RESPONSABILIDAD La información de estos materiales de capacitación se distribuye «tal y como está», sin garantía alguna. Si bien estos materiales se han preparado cautelosamente, ni Adobe, Inc. ni sus licenciantes asumirán ningún tipo de responsabilidad frente a ninguna persona o entidad en relación a la responsabilidad, pérdida o daño que alegaren como consecuencia directa o indirecta de las instrucciones incluidas en estos materiales o del software de computación y los productos de hardware aquí descritos. Estos materiales contienen vínculos a sitios web de terceros que Adobe no controla, y Adobe no es responsable del contenido de ninguno de los sitios vinculados. Adobe ofrece estos vínculos exclusivamente para su comodidad, y la inclusión del vínculo no implica que Adobe apruebe el contenido de esos sitios de terceros. Reimpreso conforme ISTE NETS*S con autorización de las National Education Technology Standards for Students (Normas nacionales de tecnología en la educación para estudiantes), 2007, ISTE (International Society for Technology in Education), iste@iste.org, All rights reserved. AGRADECIMIENTOS Autores Anuja Dharkar, Dale Underwood, Kirsti Aho y Ellen Flaherty Revisión de CS6 Scott Tapley, Jay Heins, Dale Underwood, Ellen Flaherty y Matt Niemitz Editores Dale Underwood y Matt Niemitz Editor de texto Malinda McCain Gerente de programas Matt Niemitz Diseño de tapa Scott Design Fotografía y video Matthew Aho y Dan Cowles Docentes colaboradores Cindy Agnew, Joanne Fevergeon, Brian Martin, Shannon Thissen, Mary Ann Campo, Dave Farnell, Leanne Fike, Will Fry, Lance Groesbeck, Nancy Jensen, Shane Loucks, Sara McReynolds, Doug Reppe, Ralph Rise, Chris Sande, Peggy J. Soong- Yaplee, Loretta Speed, Anne Taylor, Bre Urness-Straight, Kim Cavanaugh, Mark DuBois, Sheri German, Colin Maxwell, Kristine Kopelke 2012 Adobe Systems Incorporated Índice 1

3 Índice Información general e instalación del curso... 3 Proyectos del primer semestre... 4 Proyectos del segundo semestre... 4 Métodos alternativos para el uso de Diseño digital... 5 Matriz de habilidades de Diseño digital... 6 Configuración del equipo del aula Enriquecimiento del aula Indicación de información general de habilidades Normas NETS*S de ISTE para estudiantes Objetivos de Adobe Certified Associate Proyecto 1: Widgets Pautas del proyecto para el instructor Presentaciones Guías para los estudiantes Proyecto 2: Diseño y planificación web Pautas del proyecto para el instructor Presentaciones Guías para los estudiantes Proyecto 3: Desarrollo e implementación web Pautas del proyecto para el instructor Presentaciones Guías para los estudiantes Proyecto 4: Cartera web Pautas del proyecto para el instructor Presentaciones Guías para los estudiantes Proyecto 5: Juego interactivo Pautas del proyecto para el instructor Presentaciones Guías para los estudiantes Proyecto 6: Relato digital Pautas del proyecto para el instructor Presentaciones Guías para los estudiantes Proyecto 7: Aplicación móvil Pautas del proyecto para el instructor Presentaciones Guías para los estudiantes Proyecto 8: Cartera web final Pautas de proyectos para el instructor Guías para los estudiantes 2 Índice 2012 Adobe Systems Incorporated

4 Información general e instalación del curso Diseño digital: fundamentos de diseño web es un currículo de dos semestres basado en proyectos, que enseña las habilidades de comunicación digital en el contexto del diseño web profesional y el proceso de desarrollo, mediante el uso de herramientas web de Adobe. Diseño digital desarrolla cuatro áreas de habilidades claves: Gestión de proyectos y colaboración; diseño; investigación y comunicación; herramientas de creación en Web profesional. Los estudiantes desarrollan estas habilidades claves en forma de espiral: cada proyecto agrega nuevas habilidades con mayor dificultad a las destrezas de los fundamentos. Diseño digital aborda cada una de estas áreas mediante un enfoque basado en proyectos. Todos los proyectos poseen fases que se rigen por un proceso de diseño y desarrollo, desde la planificación del proyecto hasta la evaluación y el lanzamiento. A fin de estimular un entorno laboral profesional, los estudiantes migran gradualmente su trabajo de diseño de un proceso individual a un proceso grupal. La labor de diseño y técnica es iterativa por naturaleza. Es por eso que los proyectos contienen actividades que exigen que los estudiantes evalúen y, luego, vuelvan a diseñar y procesar sus comunicaciones. Se ha prestado especial atención a los conceptos y principios en desarrollo, en pos del diseño exhaustivo y eficaz. El siguiente diagrama ilustra la secuencia y el flujo de los proyectos: 2012 Adobe Systems Incorporated Información general e instalación del curso 3

5 Proyectos del primer semestre El primer semestre de Diseño digital (Proyectos 1 al 4) desarrolla habilidades que sientan la base para la producción de comunicaciones listas para usar en la Web: principios de diseño, documentos de diseño, guiones gráficos, desarrollo web, habilidades de gestión de proyectos compartidos, como entrevistas y planificación de proyectos, evaluación de pares y rediseño. Las actividades de los proyectos se centran en el desarrollo de comunicaciones eficaces que pueden implementarse en la Web. Los estudiantes desarrollan un widget, diversas imágenes gráficas, el sitio web de un cliente y una cartera web. El currículo implica mucha flexibilidad. Las habilidades claves en las que se hace hincapié en este semestre son: Habilidades sociales, como la realización de entrevistas y la respuesta de comentarios; diseño de un sitio web para clientes; resolución de problemas, que ayuda a respaldar varias perspectivas; reflexión acerca del proceso de diseño y la comunicación eficaz; enseñanza de pares y evaluación en un entorno de colaboración; publicación técnica en la Web. En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos. Utilizan Adobe Dreamweaver CS6 para diseñar y construir sitios web. Este contenido prepara a los estudiantes para Adobe Certified Associate, comunicación web, mediante la evaluación de Adobe Dreamweaver CS6. Proyectos del segundo semestre El segundo semestre de Diseño digital (Proyectos 5 al 8) amplía las habilidades de diseño y desarrollo de los estudiantes, concentrándose en el desarrollo de medios enriquecidos. Los estudiantes continúan trabajando individual o grupalmente en la producción de comunicaciones de medios enriquecidos, como juegos interactivos, relatos digitales y aplicaciones móviles. Se concentran en el diseño eficaz de medios enriquecidos, en los relatos multimedia, en las especificaciones de diseño y en el desarrollo iterativo con los clientes. Producen documentos de diseño y componentes visuales que los clientes revisan. Desarrollan diseños de medios enriquecidos que resuelven desafíos de comunicación específicos. Forjan habilidades técnicas para abordar las necesidades de los clientes. Las habilidades claves en las que se hace hincapié en este semestre son: Habilidades sociales, como la realización de entrevistas y la respuesta de comentarios; comunicación con los clientes, mediante el uso de especificaciones o documentos de diseño; diseño y rediseño en función de las especificaciones del cliente; habilidades multimedia técnicas, como transiciones y efectos fílmicos; soluciones de diseño, que incluyen relatos digitales y sistemas de navegación eficaces. En el segundo semestre, los estudiantes aprenden a utilizar Adobe Flash Professional CS6 para aplicar soluciones de diseño que requieren medios enriquecidos e interacción. Este contenido prepara a los estudiantes para Adobe Certified Associate, comunicación de medios enriquecidos, mediante la evaluación de Adobe Flash Professional CS6. 4 Información general e instalación del curso 2012 Adobe Systems Incorporated

6 Métodos alternativos para el uso de Diseño digital Si su situación le impide utilizar Diseño digital como un currículo anual, existen otras formas de estructurar el contenido para adaptarlo a una determinada cantidad de tiempo, habilidad y limitaciones de estructura del curso. Instrucción basada en el producto Puede utilizar un enfoque basado en el producto que se concentre principalmente en la enseñanza de cómo utilizar Adobe Fireworks CS6, Adobe Dreamweaver CS6 o Adobe Flash CS6. Las guías técnicas incluidas en los proyectos de Diseño digital también pueden agruparse por producto. Por ejemplo, puede descargar la cartera en PDF de todas las guías de Dreamweaver CS6 si solo planea enseñar las habilidades de Dreamweaver a sus estudiantes. Lo alentamos a que sea creativo con un enfoque basado en el producto, mientras intenta incorporar un método pedagógico basado en las actividades. Siguiendo la misma línea, puede utilizar todos los proyectos individuales o partes de estos para la enseñanza de productos específicos. La siguiente tabla enumera los pasos específicos de cada proyecto que corresponden a cada uno de los productos. Dreamweaver Fireworks Flash Proyecto 1: Widgets Pasos 10 al 36 Pasos 17 al 26 Proyecto 2: Diseño y planificación web Proyecto 3: Desarrollo e implementación web Pasos 5 al 8 Pasos 25 al 40 Pasos 3 al 14, 21 al 37 y 47 al 50 Pasos 16 al 22 Proyecto 4: Cartera web Pasos 14 al 21 Pasos 11 al 13 Proyecto 5: Juego interactivo Pasos 4 al 6 y 12 al 30 Proyecto 6: Relatos digitales Paso 18 Pasos 6 al 8 y 14 al 34 Proyecto 7: Aplicación móvil Paso 9 Pasos 10 al 20 Proyecto 8: Cartera web final Proyectos individuales Puede utilizar proyectos individuales del currículo de Diseño digital según el nivel de habilidades de los estudiantes, sin necesidad de completar los demás proyectos de la secuencia del currículo. Por ejemplo, es posible que un educador que dicta un curso de creación de juegos solo desee enseñar el proyecto de juego interactivo. Además, puede adaptar la instrucción y utilizar las guías técnicas de los proyectos anteriores para enseñar un proyecto individual. Sea creativo! Lo alentamos a que utilice el currículo de Diseño digital como un punto de partida para desarrollar sus propios proyectos y un currículo personalizado para su clase. Mediante el uso de las guías técnicas de productos anteriores, puede formular proyectos educativos completos basados en determinadas áreas de interés. Si crea sus propios proyectos o su propio currículo, compártalos con la comunidad en Adobe Education Exchange ( donde también puede buscar recursos adicionales útiles para la enseñanza con la herramienta Adobe Creative Suite Adobe Systems Incorporated Información general e instalación del curso 5

7 Matriz de habilidades de Diseño digital Gestión de proyectos Diseño Investigación y comunicación Conocimiento técnico Proyecto 1: Widgets Enfoque: Comprensión del uso de CSS para crear coherencia Principios del buen diseño Estructura metálica de una página web Personalización de un widget Evaluación y comparación de sitios web Tiempo: 8 a 12 horas (2 a 3 semanas) Diseños para una audiencia y un objetivo específicos Comprensión de las fases del desarrollo web Diseños para sus audiencias Aplicación de principios del diseño Creación de estructuras metálicas Creación de componentes de diseño Aprendizaje de HTML y HTML5 básicos Comprensión de CSS Aplicación de aspectos del diseño, como color, diseño, disposición, contraste y composición Integración de imágenes y texto Planificación de gráficos en función de las necesidades y la audiencia Comprensión de la función y el objetivo de los widgets Análisis y crítica de widgets y sitios web Evaluación y análisis de validez de contenidos Evaluación y análisis de navegación en sitios web Comprensión de asuntos de copyright y pautas para un uso razonable Protección y práctica del uso legítimo de imágenes Recopilación y análisis de las necesidades y el propósito de la audiencia para informar el diseño Participación en la evaluación de pares Comunicación y presentación de las decisiones de diseño Comentarios acerca de un proyecto Fireworks Comprensión del área de trabajo de Fireworks Creación de una estructura metálica Creación de componentes de diseño Preparación de imágenes Photoshop Comprensión del área de trabajo de Photoshop Cambio de tamaño, rotación y recorte de imágenes Corrección de color Retoque de imágenes Generación de varios formatos de archivos Dreamweaver Comprensión del área de trabajo de Dreamweaver Configuración de un proyecto web Uso del panel Insertar Inserción de imágenes Inserción de texto Uso del navegador de widgets Inserción de un widget en una página web HTML Edición y personalización de reglas de CSS Uso del panel Estilos de CSS Publicación de archivos web 6 Información general e instalación del curso 2012 Adobe Systems Incorporated

8 Gestión de proyectos Diseño Investigación y comunicación Conocimiento técnico Proyecto 2: Diseño Desarrollo de un Comunicación de Evaluación y Dreamweaver y planificación web plan de proyecto ideas e análisis de Comprensión de Enfoque: Desarrollo de un información a validez de facilidad de documento de través de contenidos acceso Proceso de diseño solución de diseño estructuras Edición de web profesional metálicas Fireworks Análisis para la contenido de Diseño para un sencillas selección de sitios web Comprensión del cliente ejemplos óptimos Presentación de área de trabajo de Evaluación y Proceso de diseño ideas de varios Fireworks Síntesis de análisis de en equipo para el diseños contenido en navegación en Creación de una desarrollo de sitios función del Síntesis de sitios web estructura web análisis y la información de metálica Comprensión y Interacción y reflexión las reuniones de práctica del uso Creación de comunicación entre revisión de Gestión y legítimo de componentes de el equipo y el cliente diseño organización de las imágenes diseño Tiempo: 12 a 18 horas diversas tareas Creación de Comprensión de Creación de un (3 a 4 semanas) involucradas en el estructuras herramientas prototipo diseño frente a la metálicas para la creación Exportación de un producción Creación de de animaciones y prototipo a Comprensión de componentes de contenido Dreamweaver funciones y diseño interactivo responsabilidades Creación de Crítica de Cumplimiento de relatos diseños entregas Creación de Comunicación de prototipos propósito y Aplicación de objetivo principios del Comunicación y diseño presentación de Aplicación de las decisiones de arquitectura de diseño información Comentarios Diseño para acerca de un facilidad de uso y proyecto acceso Preguntas para Diseño de focalizar y páginas aclarar coherentes en el Recepción e sitio web interpretación de Comprensión y comentarios aplicación de Comprensión y aspectos del abordaje de diseño, como problemas de teoría del color, diseño del cliente disposición, contraste y composición Diseño para facilidad de uso y acceso Diseños para una audiencia y un propósito específicos Planificación de gráficos y contenido de medios enriquecidos en función de las necesidades y la audiencia Diseño para un cliente 2012 Adobe Systems Incorporated satisfaciendo sus requisitos Información general e instalación del curso 7

9 Proyecto 3: Desarrollo e implementación de un sitio web Enfoque: Colaboración en equipo eficaz Diseño para un cliente Desarrollo de contenido reutilizable Uso de estándares web Proceso de revisión y rediseño Contenido web accesible Tiempo: 20 a 35 horas (5 a 7 semanas) Gestión de proyectos Cumplimiento y ejecución de un plan de proyecto Cumplimiento y ejecución de una estructura metálica y un prototipo Seguimiento y respeto de funciones y responsabilidades Definición y priorización de tareas Producción de entregas y cumplimiento de plazos Gestión de archivos y uso de convenciones de nomenclatura de archivos Ejecución de un ciclo de revisión y rediseño Ejecución de pruebas de control de calidad Diseño Suministro de coherencia y facilidad de acceso Suministro de navegación universal Integración de imágenes, texto y elementos multimedia Planificación de gráficos y elementos multimedia en función de las necesidades y la audiencia Creación de páginas web utilizando estándares web Diseño con CSS Organización de páginas con CSS Comprensión de HTML Uso de HTML básico Creación de plantillas y diseños reutilizables Adaptación de contenido para facilidad de lectura y énfasis Diseño para múltiples pantallas Consideración del tamaño de la pantalla y los requisitos del dispositivo Incorporación de la coherencia de diseño y color Diseño de una prueba de control de calidad Investigación y comunicación Comunicación clara de ideas Presentación de un sitio web a un grupo Toma de notas sobre la crítica Realización de comentarios significativos, pero no demasiado críticos Recepción e interpretación de información y comentarios Demostración de la comprensión de los objetivos de rediseño Realización de análisis de facilidad de uso Creación de pruebas de control de calidad Conocimiento técnico Dreamweaver Comprensión del área de trabajo de Dreamweaver Configuración de un proyecto web Establecimiento de las propiedades de un documento Uso del panel Insertar, Archivos y Activos Inserción de imágenes Inserción de texto Creación de listas Creación de tablas de datos Creación de mapas de imágenes Uso de diseños de páginas de inicio de CSS Uso de estilos de texto de CSS Creación, modificación y resolución de problemas de CSS Creación de plantillas Desarrollo de un sitio web para varias pantallas Verificación de la entrada y salida de archivos Inserción de un video HTML5 Verificación de vínculos Realización de pruebas en Adobe BrowserLab Publicación de archivos web Fireworks Optimización de imágenes Creación de botones Creación de barras de navegación Creación de menús emergentes Cambio de tamaño y recorte 8 Información general e instalación del curso de imágenes 2012 Adobe Systems Incorporated

10 Gestión de proyectos Diseño Investigación y comunicación Conocimiento técnico Proyecto 4: Cartera web Enfoque: Diseño de cartera electrónica Planificación, implementación y evaluación de diseños de sitios web Desarrollo de contenido Coherencia en el diseño del sitio web Crítica de pares y presentación Tiempo: 5 a 10 horas (1 a 2 semanas) Planificación y creación de una cartera web Organización y gestión de contenido Creación de diagramas de flujo Diseño de páginas coherentes Diseños para una audiencia y un propósito específicos Suministro de coherencia y facilidad de acceso Suministro de navegación universal Adaptación de contenido para facilidad de lectura y énfasis Investigación de áreas profesionales dentro del diseño y el desarrollo web Comunicación de información a audiencias específicas Definición de los objetivos y usos de una cartera Solicitud y realización de comentarios Escritura y edición de contenido de sitios web Fireworks Optimización de imágenes Creación de botones Creación de barras de navegación Creación de menús emergentes Exportación a Dreamweaver Photoshop Cambio de tamaño y rotación de imágenes Dreamweaver Establecimiento de las propiedades de un documento Uso del panel Activos Uso de diseños de páginas de inicio de CSS Uso de estilos de texto de CSS Creación, modificación y resolución de problemas de hoja de estilos en cascada Creación de plantillas Creación de formularios Publicación de archivos web 2012 Adobe Systems Incorporated Información general e instalación del curso 9

11 Gestión de proyectos Diseño Investigación y comunicación Conocimiento técnico Flash Comprensión del área de trabajo de Flash Uso de herramientas de dibujo Trabajo con capas Organización de capas y bibliotecas Uso de métodos de animación Creación de botones interactivos Trabajos con mapas de bits Uso de ActionScript básico Uso de métodos de animación Creación y modificación de texto Creación de efectos de Escala de tiempo Creación de botones transparentes Almacenamiento y uso de valores de movimiento preestablecidos Publicación de documentos de Flash Proyecto 5: Juego interactivo Enfoque: Animación y medios enriquecidos para interacción Desarrollo de habilidades de Flash Optimización de la experiencia del usuario Evaluación de medios enriquecidos Tiempo: 23 a 30 horas (5 a 6 semanas) Evaluación de la experiencia del usuario en la Web para las diversas técnicas que se utilizan en los medios enriquecidos Determinación del propósito, la audiencia y el objetivo del juego Determinación de los recursos disponibles y del nivel de habilidades para el desarrollo de juegos Escritura de una propuesta para el juego, prestando atención a los escenarios y la caracterización de la audiencia Diseño de un experiencia personalizada Realización de bocetos de pantalla para experiencias interactivas Investigación, evaluación y análisis del uso de Flash en juegos online Evaluación y análisis de diversos tipos de juegos Investigación de la audiencia y el panorama general del juego Investigación de los juegos disponibles en la actualidad Investigación de usos adecuados de elementos multimedia en juegos Evaluación del nivel de habilidades del desarrollador tecnológico del equipo Conexión de los objetivos del juego con la interacción y la experiencia del usuario Comunicación y presentación de las decisiones de diseño Crítica de diseños Comunicación de propósito y objetivos Escritura de guiones para el relato de un juego 10 Información general e instalación del curso 2012 Adobe Systems Incorporated

12 Gestión de proyectos Diseño Investigación y comunicación Conocimiento técnico Proyecto 6: Relatos digitales Enfoque: Animación y medios enriquecidos para comunicación Mirada más profunda de la audiencia y sus necesidades Optimización de la experiencia del visitante mediante el uso de relatos Contenido de medios enriquecidos accesible Tiempo: 20 a 28 horas (4 a 5 semanas) Definición de propósito, objetivo y audiencia Asignación de funciones y tareas en equipo Definición y priorización de tareas Cumplimiento de un plan de proyecto Comprensión de funciones y asignación de funciones y tareas Determinación de los requisitos funcionales de la aplicación Diseño para un cliente Seguimiento y respeto de funciones Diseño de una experiencia personalizada Diseños para audiencias Presentación de ideas de varios diseños Aplicación de principios de diseño gráfico Desarrollo de guiones gráficos exhaustivos y precisos Diseño para facilidad de acceso Creación de diseños que satisfagan los requisitos del cliente Síntesis y presentación de información compleja Realización de bocetos para experiencias interactivas Investigación de ejemplos de medios enriquecidos Comprensión de la función y el propósito de los relatos digitales Análisis del uso eficaz de relatos digitales Creación de un plan de proyecto Escritura de guiones para un relato digital Realización de un ciclo de revisión y rediseño Comunicación con pares Investigación de la audiencia y los sitios adecuados Uso eficaz de Flash Conexión de objetivos con interacción del usuario Flash Importación y compresión de audio Optimización del tamaño de archivos Producción de video de Flash Trabajos con texto y efectos de texto Uso de herramientas de dibujo Organización de capas y bibliotecas Trabajo con capas Optimización del tamaño de archivos Trabajo con mapas de bits Publicación y evaluación de películas Uso de métodos de animación Creación de contenido accesible de Flash Almacenamiento y uso de valores de movimiento preestablecidos Fireworks Creación de una estructura metálica Creación de componentes de diseño 2012 Adobe Systems Incorporated Información general e instalación del curso 11

13 Gestión de proyectos Diseño Investigación y comunicación Conocimiento técnico Proyecto 7: Aplicación móvil Enfoque: Facilidad de uso y coherencia Desarrollo de aplicación móvil Revisión individual y de pares Tiempo: 15 a 21 horas (3 a 4 semanas) Definición de propósito, objetivo y usuarios Síntesis y cambios de recomendación durante el proceso de diseño Conexión del contenido y del estilo con las necesidades del usuario Realización de estructuras metálicas Realización de componentes de diseño Consideración de tamaños de pantalla Diseño para diversos dispositivos y salidas Diseño para facilidad de uso Investigación de mercados existentes de la aplicación Análisis de aplicaciones similares Creación de escenarios de usuario Selección de información relevante Realización de revisión de pares Crítica de diseños Realización de comentarios significativos, pero no demasiado críticos Conexión de los objetivos de la aplicación con la interacción y la experiencia del usuario Escritura y edición de contenido para la aplicación Realización de análisis de facilidad de uso Flash Optimización del tamaño de archivos Creación y modificación de texto Trabajos con texto y efectos de texto Creación de botones interactivos Uso de herramientas de dibujo Organización de capas y bibliotecas Trabajo con capas Creación de botones transparentes Escritura de ActionScript Uso del simulador de dispositivos Publicación de aplicaciones móviles Fireworks Creación de una estructura metálica Creación de componentes de diseño 12 Información general e instalación del curso 2012 Adobe Systems Incorporated

14 Gestión de proyectos Diseño Investigación y comunicación Conocimiento técnico Proyecto 8: Cartera web final Enfoque: Diseño de cartera electrónica Sitios web utilizables y eficaces Coherencia en el diseño del sitio web Crítica de pares y presentación Tiempo: 2 a 3 horas (3 a 4 días) Realización de un taller de revisión Presentación de críticas constructivas Planificación y actualización de una cartera web existente Organización y gestión de contenido Creación de diagramas de flujo Creación de un plan de lanzamiento Diseño de páginas coherentes Diseños para una audiencia y un propósito específicos Suministro de navegación universal Suministro de coherencia y facilidad de acceso Adaptación de contenido para facilidad de lectura y énfasis Evaluación y calificación de habilidades Evaluación y calificación de una cartera existente Escritura y edición de contenido de carteras Presentación de una cartera web a un grupo Solicitud y realización de comentarios Toma de notas sobre la crítica Investigación de áreas profesionales dentro del diseño y el desarrollo web Planificación de futuras carreras Comprensión y práctica de habilidades profesionales para toda la vida: Habilidades de investigación laboral Habilidades de presentación Dreamweaver Actualización de una cartera web Agregado de medios enriquecidos a una cartera web 2012 Adobe Systems Incorporated Información general e instalación del curso 13

15 Configuración del equipo del aula Hemos incluido la información técnica que necesitará a fin de preparar su laboratorio o aula digital para la implementación del currículo de Diseño digital. Adobe Fireworks CS6 Instale Fireworks en todas las estaciones de trabajo. A continuación se indican los requisitos del sistema, y los procedimientos de instalación se incluyen en el software. Para consultar las actualizaciones de requisitos del sistema, visite: Windows Procesador Intel Pentium 4 o AMD Athlon 64 Microsoft Windows XP con Service Pack 2 (se recomienda Service Pack 3) o Windows 7 1 GB de RAM (se recomiendan 2 GB) 1 GB de espacio disponible en el disco rígido para la instalación. Se requiere espacio libre adicional durante la instalación (no puede instalarse en dispositivos de almacenamiento extraíbles flash) Pantalla de 1280 x 1024 con tarjeta de video de 16 bits Unidad de DVD-ROM Este software no funciona si no se activa. Se requiere una conexión a Internet de banda ancha y registro para la activación del software, la validación de suscripciones y el acceso a servicios online.* No es posible activarlo telefónicamente. Macintosh Procesador Multicore Intel Mac OS X v.10.6 o v GB de RAM (se recomiendan 2 GB) 1 GB de espacio disponible en el disco rígido para la instalación. Se requiere espacio libre adicional durante la instalación (no puede instalarse en un volumen que utilice un sistema de archivos que distinga mayúsculas de minúsculas ni en dispositivos de almacenamiento extraíbles flash) Pantalla de 1280 x 1024 con tarjeta de video de 16 bits Unidad de DVD-ROM Este software no funciona si no se activa. Se requiere una conexión a Internet de banda ancha y registro para la activación del software, la validación de suscripciones y el acceso a servicios online.* No es posible activarlo telefónicamente. Adobe Photoshop CS6 Instale Photoshop CS6 en todas las estaciones de trabajo. Los requisitos del sistema y el procedimiento de instalación se incluyen en el software. Para consultar las actualizaciones de requisitos del sistema, visite: Windows Procesador Intel Pentium 4 o AMD Athlon 64 Microsoft Windows XP con Service Pack 3 o Windows 7 con Service Pack 1 1 GB de RAM 1 GB de espacio disponible en el disco rígido para la instalación. Se requiere espacio libre adicional durante la instalación (no puede instalarse en dispositivos de almacenamiento extraíbles basados en flash) 14 Información general e instalación del curso 2012 Adobe Systems Incorporated

16 Pantalla con resolución 1024 x 768 (se recomienda 1280 x 800), con 16 bits de color y 256 MB (se recomienda 512 MB) de VRAM Sistema compatible con OpenGL 2.0 Unidad de DVD-ROM Este software no funciona si no se activa. Se requiere una conexión a Internet de banda ancha y registro para la activación del software, la validación de suscripciones y el acceso a servicios online. No es posible activarlo telefónicamente. *Windows XP no admite algunas características habilitadas para GPU. Macintosh Procesador Multicore Intel compatible con 64 bits Mac OS X v o v GB de RAM 2 GB de espacio disponible en el disco rígido para la instalación. Se requiere espacio libre adicional durante la instalación (no puede instalarse en un volumen que utilice un sistema de archivos que distinga mayúsculas de minúsculas ni en dispositivos de almacenamiento extraíbles basados en flash) Pantalla con resolución 1024 x 768 (se recomienda 1280 x 800), con 16 bits de color y 256 MB (se recomienda 512 MB) de VRAM Sistema compatible con OpenGL 2.0 Unidad de DVD-ROM Este software no funciona si no se activa. Se requiere una conexión a Internet de banda ancha y registro para la activación del software, la validación de suscripciones y el acceso a servicios online. No es posible activarlo telefónicamente. Adobe Illustrator CS6 Instale Illustrator CS6 en todas las estaciones de trabajo. Los requisitos del sistema y el procedimiento de instalación se incluyen en el software. Para consultar las actualizaciones de requisitos del sistema, visite: Windows Procesador Intel Pentium 4 o AMD Athlon 64 Microsoft Windows XP con Service Pack 3 o Windows 7 con Service Pack 1 1 GB de RAM (se recomiendan 3 GB) para 32 bits; 2 GB de RAM (se recomiendan 8 GB) para 64 bits. 2 GB de espacio disponible en el disco rígido para la instalación. Se requiere espacio libre adicional durante la instalación (no puede instalarse en dispositivos de almacenamiento extraíbles basados en flash) Pantalla de 1024 x 768 (se recomienda 1280 x 800) con tarjeta de video de 16 bits Unidad de DVD-ROM* Algunas características de Adobe Bridge requieren una tarjeta de gráficos compatible con DirectX 9 con 64 MB de VRAM, como mínimo Este software no funciona si no se activa. Se requiere una conexión a Internet de banda ancha y registro para la activación del software, la validación de suscripciones y el acceso a servicios online. No es posible activarlo telefónicamente. Macintosh Procesador Multicore Intel compatible con 64 bits Mac OS X v o v Adobe Systems Incorporated Información general e instalación del curso 15

17 2 GB de RAM (se recomiendan 8 GB) 2 GB de espacio disponible en el disco rígido para la instalación. Se requiere espacio libre adicional durante la instalación (no puede instalarse en un volumen que utilice un sistema de archivos que distinga mayúsculas de minúsculas ni en dispositivos de almacenamiento extraíbles basados en flash) Pantalla de 1024 x 768 (se recomienda 1280 x 800) con tarjeta de video de 16 bits Unidad de DVD-ROM* Este software no funciona si no se activa. Se requiere una conexión a Internet de banda ancha y registro para la activación del software, la validación de suscripciones y el acceso a servicios online. No es posible activarlo telefónicamente. *Las versiones de Illustrator que se comercializan en Europa Continental requieren una unidad de DVD- ROM compatible con DVD de doble capa Adobe Dreamweaver CS6 Instale Dreamweaver en todas las estaciones de trabajo. A continuación se indican los requisitos del sistema, y el procedimiento de instalación se incluye en el software. Para consultar las actualizaciones de requisitos del sistema, visite: Windows Procesador Intel Pentium 4 o AMD Athlon 64 Microsoft Windows XP con Service Pack 2 (se recomienda Service Pack 3); Windows Vista Home Premium, Business, Ultimate o Enterprise con Service Pack 1 o Windows MB de RAM 1 GB de espacio disponible en el disco rígido para la instalación. Se requiere espacio libre adicional durante la instalación (no puede instalarse en dispositivos de almacenamiento extraíbles flash) Pantalla de 1280 x 1024 con tarjeta de video de 16 bits Java Runtime Environment 1.6 (incluido) Unidad de DVD-ROM Se necesita software QuickTime para reproducir medios HTML5 Este software no funciona si no se activa. Se requiere una conexión a Internet de banda ancha y registro para la activación del software, la validación de suscripciones y el acceso a servicios online. No es posible activarlo telefónicamente. Macintosh Procesador Multicore Intel Mac OS X v.10.6 o v MB de RAM 1.8 GB de espacio disponible en el disco rígido para la instalación. Se requiere espacio libre adicional durante la instalación (no puede instalarse en un volumen que utilice un sistema de archivos que distinga mayúsculas de minúsculas ni en dispositivos de almacenamiento extraíbles flash) Pantalla de 1280 x 1024 con tarjeta de video de 16 bits Java Runtime Environment 1.6 (incluido) Unidad de DVD-ROM Se necesita software QuickTime para reproducir medios HTML5 Este software no funciona si no se activa. Se requiere una conexión a Internet de banda ancha y registro para la activación del software, la validación de suscripciones y el acceso a servicios online. No es posible activarlo telefónicamente. 16 Información general e instalación del curso 2012 Adobe Systems Incorporated

18 Adobe Flash Professional CS6 Instale Flash en todas las estaciones de trabajo. A continuación se indican los requisitos del sistema, y los procedimientos de instalación se incluyen en el software. Para consultar las actualizaciones de requisitos del sistema, visite: Windows Procesador Intel Pentium 4 o AMD Athlon 64 Microsoft Windows XP con Service Pack 3 o Windows 7 2 GB de RAM (se recomiendan 3 GB) 3.5 GB de espacio disponible en el disco rígido. Se requiere espacio libre adicional durante la instalación (no puede instalarse en dispositivos de almacenamiento extraíbles flash) Pantalla de 1024 x 768 (se recomienda 1280 x 800) Java Runtime Environment 1.6 (incluido) Unidad de DVD-ROM Se necesita el software QuickTime para las características multimedia Algunas características de Adobe Bridge requieren una tarjeta de gráficos compatible con DirectX 9 con 64 MB de VRAM, como mínimo Este software no funciona si no se activa. Se requiere una conexión a Internet de banda ancha y registro para la activación del software, la validación de suscripciones y el acceso a servicios online. No es posible activarlo telefónicamente. Macintosh Procesador Multicore Intel Mac OS X v.10.6 o v GB de RAM (se recomiendan 3 GB) 4 GB de espacio disponible en el disco rígido para la instalación. Se requiere espacio libre adicional durante la instalación (no puede instalarse en un volumen que utilice un sistema de archivos que distinga mayúsculas de minúsculas ni en dispositivos de almacenamiento extraíbles flash) Pantalla de 1024 x 768 (se recomienda 1280 x 800) Java Runtime Environment 1.6 (incluido) Unidad de DVD-ROM Se necesita el software QuickTime para las características multimedia Este software no funciona si no se activa. Se requiere una conexión a Internet de banda ancha y registro para la activación del software, la validación de suscripciones y el acceso a servicios online. No es posible activarlo telefónicamente. Adobe Flash Player 11 Windows Procesador de 2.33 GHz o más veloz, compatible con x86, o procesador Intel Atom 1.6 GHz o más veloz para netbooks Microsoft Windows XP (32 bits), Windows Server 2003 (32 bits), Windows Server 2008 (32 bits), Windows Vista (32 bits), Windows 7 (32 bits y 64 bits) Internet Explorer 7.0 y superior, Mozilla Firefox 4.0 y superior, Google Chrome, Safari 5.0 y superior, Opera MB de RAM (se recomienda 1 GB de RAM para netbooks); 128 MB de memoria de gráficos Macintosh Procesador Intel Core Duo de 1.33 GHz o más veloz 2012 Adobe Systems Incorporated Información general e instalación del curso 17

19 Mac OS X v10.6 o v10.7 Safari 5.0 y superior, Mozilla Firefox 4.0 y superior, Google Chrome, Opera MB de RAM; 128 MB de memoria de gráficos Linux Procesador de 2.33 GHz o más veloz, compatible con x86, o procesador Intel Atom 1.6 GHz o más veloz para netbooks Red Hat Enterprise Linux (RHEL) 5.6 o posterior (32 bits y 64 bits), opensuse 11.3 o posterior (32 bits y 64 bits), Ubuntu o posterior (32 bits y 64 bits) Mozilla Firefox 4.0 o Google Chrome 512 MB de RAM; 128 MB de memoria de gráficos 18 Información general e instalación del curso 2012 Adobe Systems Incorporated

20 Enriquecimiento del aula Existen muchas técnicas que pueden mejorar la experiencia de los estudiantes a medida que se involucran en estos proyectos, así como también ayudarlo a gestionar el contenido y la tecnología. Al configurar su laboratorio o aula digital para trabajar con proyectos basados en tecnología, las siguientes sugerencias pueden ayudarlo a crear una experiencia pedagógica exitosa para sus estudiantes de Diseño digital. Políticas de uso admisible A fin de promover la buena convivencia digital y ayudar a los estudiantes a sentirse dueños de la tecnología y las herramientas que utilizan, hábleles acerca de las políticas de uso aceptable. Si bien es posible que su institución ya posea una política, hable con los estudiantes acerca del uso adecuado de Internet y de las herramientas tecnológicas y pídales que apliquen lo que comprendieron a los diversos escenarios de uso incorrecto, a fin de determinar las consecuencias. Trabaje con los estudiantes para crear una política para la clase, con el objetivo de proteger los derechos y privilegios de los demás estudiantes y el hardware/software de la clase. Proponga reglas para una dinámica de equipo óptima y para las críticas entre pares. Gestión de archivos Para ahorrar tiempo al evaluar el trabajo de los estudiantes, asegúrese de que todo el material del aula y los trabajos de los estudiantes se guarden y se registren correctamente (preferentemente en un servidor escolar). Las siguientes pautas serán útiles: Carpetas de estudiantes: Todos los estudiantes deben tener una carpeta para todos sus trabajos. Los nombres de las carpetas pueden incluir el apellido del estudiante, la primera letra de su nombre y el período de clase (por ejemplo, «per7_m_smith»). Backups: Es recomendable que los estudiantes guarden en unidades flash, en el disco local o en el servidor de backup escolar copias de sus carpetas. Trabajo desde el hogar: Si bien los estudiantes pueden trabajar desde sus hogares, debe asegurarse de que encuentren un medio para transferir su trabajo a los equipos de la escuela (mediante FTP, correo electrónico, unidad flash o servidor escolar, por ejemplo). Entrega de trabajos: Si los estudiantes trabajan desde sus hogares mediante correo electrónico, asegúrese de poseer una protección antivirus eficaz, así como de que todos los trabajos tengan un nombre claro, a fin de facilitar su identificación y organización (per7_logo_m_smith, por ejemplo). Asuntos legales: Si planea publicar el trabajo de sus estudiantes en la web, revise las reglas de su escuela respecto de la publicación de fotos o nombres de estudiantes en la web. Es conveniente que los estudiantes no incluyan sus nombres completos ni sus direcciones de correo electrónico. Entorno del aula El uso de la tecnología como parte de cualquier lección en el aula puede provocar problemas de gestión no relacionados con el contenido que se está abarcando. A continuación se presentan algunos consejos y técnicas que pueden ayudarlo a gestionar la tecnología mientras reafirma los conceptos claves: 2012 Adobe Systems Incorporated Información general e instalación del curso 19