digital design: foundations of web design · en el primer semestre, los estudiantes utilizan adobe...

33
Diseño digital Fundamentos de diseño web

Upload: vanhanh

Post on 26-Jan-2019

215 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

Diseño digitalFundamentos de diseño web

Page 2: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

© 2012 Adobe Systems Incorporated Índice 1

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:

http://creativecommons.org/licenses/by-nc-sa/3.0/

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),

[email protected], www.iste.org. All rights reserved.

AGRADECIMIENTOS

Autores Anuja Dharkar, Dale Underwood, Kirsti Aho y Ellen Flaherty

Gerente de programas Matt Niemitz

Revisión de CS6 Scott Tapley, Jay Heins, Dale Underwood, Ellen Flaherty y Matt Niemitz

Diseño de tapa Scott Design

Editores Dale Underwood y Matt Niemitz

Editor de texto Malinda McCain

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

Page 3: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

2 Índice © 2012 Adobe Systems Incorporated

Í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 ........................................................................................................ 14

Enriquecimiento del aula ...................................................................................................................... 19

Indicación de información general de habilidades ............................................................................... 23

Normas NETS*S de ISTE para estudiantes............................................................................................. 27

Objetivos de Adobe Certified Associate ................................................................................................. 29

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

Page 4: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

© 2012 Adobe Systems Incorporated Información general e instalación del curso 3

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:

Page 5: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

4 Información general e instalación del curso © 2012 Adobe Systems Incorporated

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.

Page 6: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

© 2012 Adobe Systems Incorporated Información general e instalación del curso 5

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

Pasos 5 al 8 Pasos 25 al 40

Proyecto 3: Desarrollo e

implementación web

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 (http://edexchange.adobe.com), donde también puede

buscar recursos adicionales útiles para la enseñanza con la herramienta Adobe Creative Suite 6.

Page 7: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

6 Información general e instalación del curso © 2012 Adobe Systems Incorporated

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

Page 8: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

© 2012 Adobe Systems Incorporated Información general e instalación del curso 7

Gestión de proyectos

Diseño Investigación y comunicación

Conocimiento técnico

Proyecto 2: Diseño y planificación web

Enfoque:

Proceso de diseño

web profesional

Diseño para un

cliente

Proceso de diseño

en equipo para el

desarrollo de sitios

web

Interacción y

comunicación entre

el equipo y el cliente

Tiempo: 12 a 18 horas

(3 a 4 semanas)

Desarrollo de un

plan de proyecto

Desarrollo de un

documento de

solución de diseño

Análisis para la

selección de

ejemplos óptimos

Síntesis de

contenido en

función del

análisis y la

reflexión

Gestión y

organización de las

diversas tareas

involucradas en el

diseño frente a la

producción

Comprensión de

funciones y

responsabilidades

Cumplimiento de

entregas

Comunicación de

ideas e

información a

través de

estructuras

metálicas

sencillas

Presentación de

ideas de varios

diseños

Síntesis de

información de

las reuniones de

revisión de

diseño

Creación de

estructuras

metálicas

Creación de

componentes de

diseño

Creación de

relatos

Creación de

prototipos

Aplicación de

principios del

diseño

Aplicación de

arquitectura de

información

Diseño para

facilidad de uso y

acceso

Diseño de

páginas

coherentes en el

sitio web

Comprensión y

aplicación de

aspectos del

diseño, como

teoría del color,

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

satisfaciendo sus

requisitos

Evaluación y

análisis de

validez de

contenidos

Edición de

contenido de

sitios web

Evaluación y

análisis de

navegación en

sitios web

Comprensión y

práctica del uso

legítimo de

imágenes

Comprensión de

herramientas

para la creación

de animaciones y

contenido

interactivo

Crítica de

diseños

Comunicación de

propósito y

objetivo

Comunicación y

presentación de

las decisiones de

diseño

Comentarios

acerca de un

proyecto

Preguntas para

focalizar y

aclarar

Recepción e

interpretación de

comentarios

Comprensión y

abordaje de

problemas de

diseño del cliente

Dreamweaver

Comprensión de

facilidad de

acceso

Fireworks

Comprensión del

área de trabajo de

Fireworks

Creación de una

estructura

metálica

Creación de

componentes de

diseño

Creación de un

prototipo

Exportación de un

prototipo a

Dreamweaver

Page 9: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

8 Información general e instalación del curso © 2012 Adobe Systems Incorporated

Gestión de proyectos

Diseño Investigación y comunicación

Conocimiento técnico

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)

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

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

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

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

de imágenes

Page 10: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

© 2012 Adobe Systems Incorporated Información general e instalación del curso 9

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

Page 11: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

10 Información general e instalación del curso © 2012 Adobe Systems Incorporated

Gestión de proyectos

Diseño Investigación y comunicación

Conocimiento técnico

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

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

Page 12: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

© 2012 Adobe Systems Incorporated Información general e instalación del curso 11

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

Page 13: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

12 Información general e instalación del curso © 2012 Adobe Systems Incorporated

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

Page 14: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

© 2012 Adobe Systems Incorporated Información general e instalación del curso 13

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

Page 15: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

14 Información general e instalación del curso © 2012 Adobe Systems Incorporated

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: www.adobe.com/go/fireworks_systemreqs

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 v10.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 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:

www.adobe.com/go/photoshop_systemreqs

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)

Page 16: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

© 2012 Adobe Systems Incorporated Información general e instalación del curso 15

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 v10.6.8 o v10.7

1 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:

www.adobe.com/go/illustrator_systemreqs

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 v10.6.8 o v10.7

Page 17: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

16 Información general e instalación del curso © 2012 Adobe Systems Incorporated

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: www.adobe.com/go/dreamweaver_systemreqs

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 7

512 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 7.6.6 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 v10.7

512 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 7.6.6 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.

Page 18: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

© 2012 Adobe Systems Incorporated Información general e instalación del curso 17

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: www.adobe.com/go/flash_systemreqs

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 7.6.6 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 v10.7

2 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 7.6.6 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 11

128 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

Page 19: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

18 Información general e instalación del curso © 2012 Adobe Systems Incorporated

Mac OS X v10.6 o v10.7

Safari 5.0 y superior, Mozilla Firefox 4.0 y superior, Google Chrome, Opera 11

256 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 10.04 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

Page 20: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

© 2012 Adobe Systems Incorporated Información general e instalación del curso 19

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:

Page 21: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

20 Información general e instalación del curso © 2012 Adobe Systems Incorporated

Pósteres con buenos diseños: Como el curso se concentra en técnicas para un buen diseño, le sugerimos

que imprima y lamine ejemplos de sitios web bien diseñados y los coloque en toda el aula. Otra

alternativa podría ser colocar ejemplos de diseños de sitios «buenos» y «malos» en paredes

enfrentadas del aula. Los ejemplos de diseños buenos y malos deben incluir tanto sitios HTML como

de Adobe Flash. También puede pedir a los estudiantes que compilen una lista de criterios del buen

diseño a lo largo del curso y la coloquen en el aula.

Centro de ayuda: Cree una biblioteca de materiales impresos sobre software y técnicas de diseño en una

esquina del aula, donde los estudiantes puedan buscar respuestas a preguntas difíciles.

Realización de una lista de preguntas: Haga una lista con preguntas técnicas para que los estudiantes

investiguen en una hoja grande o escríbala en el pizarrón del aula. A medida que se respondan las

preguntas, escriba las respuestas debajo.

Estudiantes líderes: Designe estudiantes líderes con habilidades técnicas sólidas, a fin de que sean las

primeras personas a las que acudan los estudiantes que tengan dudas o problemas de hardware o

software. De este modo, los estudiantes no interrumpirán la clase para realizar preguntas sobre

tecnología. Puede rotar esta función entre diferentes grupos de estudiantes, a fin de alentarlos a tomar

más iniciativa en su aprendizaje.

Proceso de preguntas: Es posible que los estudiantes comiencen a desplazarse por el aula cuando tienen

tiempo libre para trabajar en los proyectos. Para evitarlo, pídales que primero intenten encontrar la

respuesta por sí solos, que acudan al docente en segunda instancia y que continúen trabajando

mientras esperan la respuesta. Por ejemplo, puede pedir a los estudiantes que primero busquen en el

sistema de ayuda y le pregunten a su compañero de al lado antes de dirigirse al docente. También

puede proporcionarles accesorios para que coloquen en sus monitores, como una señal silenciosa de

que necesitan ayuda.

Extensión tecnológica: Mientras los estudiantes trabajan en sus proyectos, algunos descubrirán técnicas

que no se han demostrado a la clase. Cuando los grupos de estudiantes aprendan una nueva técnica

por sí solos, pídales que la presenten a la clase. El grupo deberá mostrar el producto resultante,

compartir cómo lo lograron paso a paso y pedir a la clase que realice los mismos pasos mientras los

miembros del grupo se desplazan por el aula para ayudar al resto a aprender la técnica.

Uso de comentarios constructivos: Trabajar en equipo exige que los estudiantes se comuniquen mejor.

Durante el proceso de diseño web, en ocasiones, los estudiantes deberán criticar el trabajo de sus

compañeros. Para realizar comentarios, los estudiantes deben ser conscientes de los sentimientos del

prójimo. Para ayudar a los estudiantes a comunicarse mejor, dedique tiempo a que los estudiantes

participen en la identificación de palabras y comentarios constructivos. Puede colocar esta lista

generada por la clase como un recordatorio para todos al momento de criticar el trabajo de un

compañero.

Uso y producción de contenido ético

En muchos proyectos, los estudiantes deberán reunir, manipular y crear imágenes y sitios web. Enfatice la

responsabilidad social que tienen los estudiantes entre sí y respecto de su audiencia, a fin de ayudarlos a

forjar procedimientos adecuados al aplicar estas habilidades en futuros programas y trabajos. Algunas

áreas en las que debe centrarse:

Validez de contenidos: Mientras los estudiantes investigan contenido online, pídales que consideren y

evalúen continuamente la parcialidad y la difusión del contenido y que corroboren la fuente. Puede

abarcar algunas técnicas de búsqueda, como las presentadas en el Aprendizaje de noviembre:

http://novemberlearning.com/resources/information-literacy-resources/.

Copyright: Enfatice la necesidad de obtener autorización para utilizar gráficos, imágenes, videos y audio

producidos por terceros y de obtener el copyright de sus propios trabajos.

Recursos limitados (cámaras digitales, cámaras de video, etc.):

Considere pedir a los estudiantes que trabajen en grupo, en lugar de hacerlo individualmente.

Page 22: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

© 2012 Adobe Systems Incorporated Información general e instalación del curso 21

Considere conectar todos los equipos en una red local, a fin de alentar el aprendizaje colaborativo.

Puede dividir los equipos en estaciones de aprendizaje, agrupadas, por ejemplo, por materias o actividades

(centro de medios digitales, centro de investigación web, etc.).

Puede considerar separar las actividades relacionadas con el proyecto. Pídales a algunos estudiantes que

utilicen el equipamiento para reunir sus datos mientras otro grupo investiga el tema manualmente y

planifica su tiempo con el equipamiento para lo que puede capturar o construye un aspecto del

proyecto. Rote los grupos, a fin de que todos los estudiantes estén ocupados todo el tiempo.

Habilidades profesionales

Este curso está diseñado para introducir a los estudiantes a experiencias profesionales. Existen algunos

medios para reafirmar las ideas en torno al comportamiento profesional y al trabajo.

Habilidades sociales: Al comunicarse con los clientes, los estudiantes necesitan habilidades sociales

que los ayuden durante las entrevistas y en la revisión de su trabajo con los clientes. Puede pedir a los

estudiantes que practiquen entrevistarse entre sí o que realicen entrevistas de práctica con usted a

medida que desarrollan sus habilidades para hablar con los clientes.

Seguimiento del proyecto: Reafirme la necesidad de planificar programas adecuados y gestionar el

tiempo. Puede considerar pedir a los estudiantes que realicen breves informes de estado diarios acerca

de si están siendo puntuales con cada una de las tareas. Oriente a los estudiantes acerca de cómo

replantear el orden de prioridades y actualizar los planes del proyecto cuando sea necesario.

Trabajo en equipo: Ayudar a los estudiantes a desarrollarse individualmente y como miembros de un

equipo productivo es una tarea difícil. Debe reafirmar la importancia de ambos tipos de desarrollo

evaluando tanto su rendimiento individual como la forma en que contribuyen a los objetivos del

equipo, trabajan para resolver los conflictos del equipo y colaboran con otros equipos para adoptar

procedimientos exitosos.

Entorno profesional: Para preparar a los estudiantes para trabajar con clientes y ayudarlos a desarrollar

actitudes profesionales, debe darles puntos semanales para demostrar actitudes y habilidades

profesionales, como por ejemplo:

Puntualidad

Vestimenta adecuada para entrevistas con pares y clientes

Respuesta inmediata a pares y clientes

Recepción de sugerencias y buen trabajo en grupo

Diseñadores profesionales: Puede ser muy beneficioso para los estudiantes hablar con un desarrollador o

diseñador web profesional. Puede organizar un viaje de estudios a un estudio de diseño o solicitarle a

un diseñador que visite su clase. Temas claves que deben abordarse con el diseñador:

Trabajo en equipo y colaboración

Diseño eficaz

Muestras de trabajos del diseñador y los desafíos que presentaron

Uso de software profesional, como productos de Adobe, en el campo web y de medios

enriquecidos

Crítica del trabajo de los estudiantes

Enseñar a través de otras disciplinas

Puede enseñar algunos proyectos en equipo con docentes de otros departamentos, a fin de ayudar a los

docentes de áreas de contenido tradicional a integrar la tecnología en sus cursos, mientras ayuda a los

estudiantes a desarrollar habilidades en áreas académicas, como escritura, lectura, matemática y ciencias.

Page 23: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

22 Información general e instalación del curso © 2012 Adobe Systems Incorporated

Puede llevar a los estudiantes al aula del otro docente para que cambien de ambiente o puede llevar al otro

docente a su aula. Resulta especialmente útil con los siguientes temas:

Diseño gráfico: Un docente de arte puede abordar temas como líneas, la regla de los tercios y tipografía.

Diseño de páginas web: Un docente de arte puede abordar temas como composición, color y forma.

Diseño y producción de páginas web: Un docente de economía u orientación vocacional puede analizar

las aptitudes, el salario y las habilidades necesarias para trabajar en el campo del diseño web. Un

docente de marketing puede optimizar el debate en torno de la audiencia y el propósito.

Contenido de páginas web: Un docente de literatura podría enfatizar la redacción para diferentes

audiencias cuando los estudiantes se involucran en los proyectos web que incluyen diferentes clientes.

Page 24: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

© 2012 Adobe Systems Incorporated Información general e instalación del curso 23

Indicación de información general de habilidades

Esta indicación de habilidades generales es una herramienta para evaluar los diversos aspectos de los

principales proyectos web y de medios enriquecidos. Si bien cada actividad posee su propia indicación,

puede utilizar la siguiente para evaluar mejor los aspectos particulares de los proyectos. Seleccione los

elementos que se aplican a un determinado proyecto.

Habilidades de diseño

Categoría No cumple con las expectativas

Cumple con las expectativas

Supera las expectativas

Composición No se utilizan espacios en

blanco, simetría ni punto

focal. Las páginas del

sitio (y los elementos de

las páginas) están mal

recortadas en los bordes o

están rodeadas por

demasiado espacio en

blanco.

Poco uso de espacios en

blanco, simetría y punto

focal. Por lo general, las

páginas del sitio (y los

elementos de las páginas)

encajan adecuadamente

en los bordes.

Uso eficaz de espacios en

blanco, simetría y punto

focal. Las páginas del sitio

(y los elementos de las

páginas) encajan

perfectamente en los bordes.

Color Los colores desentonan y

tienen poca relación con

el tema del diseño. El

color de fondo interfiere

con el texto y las

imágenes. Los colores

dificultan la lectura del

texto.

Los colores son un tanto

complementarios. El

color de fondo combina

con las imágenes y el

diseño del texto. Los

colores no dificultan la

lectura.

Los colores combinan y

reafirman el tema del

diseño. El color de fondo

optimiza las imágenes y el

diseño del texto. Los colores

favorecen mucho la lectura.

Tipografía El texto no puede leerse

fácilmente. No se usa con

eficacia el espacio en

blanco. Las fuentes y los

efectos del texto

interfieren en el diseño y

dificultan la lectura.

El texto es legible. El

tamaño de las tipografías

comunica información y

es compatible con el

diseño general del sitio.

El espacio en blanco

alrededor del texto

facilita la lectura y

respalda el diseño. Las

fuentes y los efectos del

texto son compatibles con

el diseño y facilitan la

lectura.

El texto es legible y las

fuentes seleccionadas

respaldan los objetivos del

diseño. El tamaño de las

tipografías refleja el énfasis

deseado. El espacio en

blanco alrededor del texto

facilita la lectura y respalda

el diseño en gran medida.

Las fuentes y los efectos del

texto contribuyen al estilo y

al tono. Las fuentes facilitan

la lectura gracias a su color,

tamaño y contraste.

Facilidad de uso Aparece navegación en el

sitio en algunas páginas,

y no todos los vínculos

funcionan correctamente.

La navegación no permite

a los usuarios acceder a

todas las páginas

principales del sitio y su

uso no es intuitivo.

Algunas páginas del sitio

tardan bastante en cargar,

y las demoras se deben a

elementos irrelevantes.

Aparece navegación en el

sitio en todas las páginas,

y todos los vínculos

funcionan correctamente.

La navegación permite a

los usuarios acceder a la

mayoría de las páginas

principales del sitio y su

uso es intuitivo. Algunas

páginas del sitio tardan

bastante en cargar, pero la

mayoría de las demoras

valen la pena.

Aparece navegación

coherente en el sitio en todas

las páginas, y todos los

vínculos funcionan

correctamente. La

navegación permite a los

usuarios acceder a todas las

páginas principales del sitio

y su uso es intuitivo. Las

páginas del sitio cargan en

un tiempo razonable y las

demoras que se observan

valen la pena.

Page 25: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

24 Información general e instalación del curso © 2012 Adobe Systems Incorporated

Categoría No cumple con las expectativas

Cumple con las expectativas

Supera las expectativas

Uso de

elementos

técnicos

(Dreamweaver,

Fireworks,

Photoshop,

Illustrator o

Flash)

El uso de elementos

técnicos y efectos no

optimiza la experiencia

de usuario ni respalda

coherentemente los

objetivos generales y el

mensaje del sitio.

El uso de elementos

técnicos y efectos

respalda coherentemente

los objetivos generales y

el mensaje del sitio, pero

no optimiza la

experiencia del usuario.

El uso de dichos

elementos o efectos no es

excesivo ni genera

distracción.

El uso de elementos técnicos

y efectos contribuye al

diseño general del sitio, ya

que optimiza la experiencia

del usuario y respalda los

objetivos y el mensaje del

sitio. El uso de dichos

elementos o efectos no es

excesivo ni genera

distracción.

Guión gráfico El guión gráfico ofrece

información de

producción incompleta o

contradictoria.

El guión gráfico está

completo, pero su

interpretación resulta algo

difícil.

El guión gráfico es

exhaustivo, completo y muy

claro.

Habilidades técnicas

Categoría No cumple con las expectativas

Cumple con las expectativas

Supera las expectativas

Facilidad de

acceso

Muy pocos elementos

gráficos del sitio, como

imágenes y botones,

poseen etiquetas de texto

alternativas.

Algunos elementos

gráficos del sitio, como

imágenes y botones,

poseen etiquetas de texto

alternativas.

Todos los elementos

gráficos del sitio, como

imágenes y botones,

poseen etiquetas de texto

alternativas.

Dibujos Las ilustraciones y los

botones están mal

dibujados, sin utilizar

siempre las herramientas

adecuadas de dibujo y

efectos.

La calidad de dibujo de

las ilustraciones y los

botones no es suficiente;

se utiliza un rango de

herramientas de dibujo y

efectos.

Las ilustraciones y los

botones están bien

dibujados y con claridad,

se utilizan todas las

herramientas de dibujo y

efectos.

Paneles de color El color no se aplica con

coherencia, y los paneles

no están configurados

para la web en la mayoría

de los casos.

El color se aplica con

coherencia casi siempre,

y los paneles están

configurados para la web

en la mayoría de los

casos.

El color se aplica con

coherencia, y los paneles

están configurados para la

web.

Optimización La calidad de las

imágenes no es suficiente

o el tamaño de archivo es

demasiado grande.

Las imágenes presentan

un buen equilibrio de

calidad y tamaño de

archivo.

Las imágenes presentan

un excelente equilibrio de

calidad y tamaño de

archivo.

Uso de la

herramienta

El estudiante tiene que

preguntar con frecuencia

qué herramienta debe

utilizar para crear los

elementos y efectos

deseados. No utiliza con

independencia la

información disponible

sobre las herramientas.

No utiliza las

herramientas con

eficiencia.

El estudiante

generalmente sabe qué

herramienta debe utilizar

para crear los elementos y

efectos deseados, pero, en

ocasiones, necesita que le

recuerden que debe

utilizar la información

disponible sobre las

herramientas. Utiliza la

mayoría de las

herramientas con

eficiencia.

El estudiante sabe qué

herramienta debe utilizar

para crear los elementos y

efectos deseados o utiliza

los recursos con

eficiencia y los descubre

solo. Utiliza las

herramientas con

eficiencia.

Page 26: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

© 2012 Adobe Systems Incorporated Información general e instalación del curso 25

Habilidades de investigación y comunicación

Categoría No cumple con las expectativas

Cumple con las expectativas

Supera las expectativas

Proceso de

diseño

El proceso de diseño no

incluye todos los

elementos adecuados,

como bocetos, mapa del

sitio, guión gráfico y

comentarios de revisión.

El producto final no

refleja totalmente el

guión gráfico y los

comentarios.

El proceso de diseño

incluye elementos como

bocetos, mapa del sitio,

guión gráfico y

comentarios de revisión.

El producto final refleja

el guión gráfico, con

algunas revisiones

basadas en los

comentarios.

El proceso de diseño

incluye todos los

elementos adecuados,

como bocetos, mapa del

sitio, guión gráfico y

comentarios de revisión.

El producto final refleja

con precisión el guión

gráfico, incluye las

revisiones del guión

gráfico en base a los

comentarios y las

decisiones de diseño

meditadas realizadas

durante la producción.

Comentarios Las revisiones de los

diseños de otros

estudiantes no abordan

correctamente el

contenido y el diseño.

Los comentarios no

incluyen vocabulario

informativo y no suelen

ser constructivos.

Las revisiones de los

diseños de otros

estudiantes ofrecen algún

análisis de contenido y

diseño. Los comentarios

utilizan algo de

vocabulario informativo y

están conectados con el

diseño y el contenido.

Los comentarios no

siempre son

constructivos.

Las revisiones de los

diseños de otros

estudiantes ofrecen un

análisis exhaustivo y

perspicaz de contenido y

diseño. Los comentarios

utilizan vocabulario

informativo y claro, y

están conectados con el

diseño y el contenido.

Los comentarios son

siempre constructivos.

Presentación Las presentaciones de

diseño ofrecen poca

información acerca de los

objetivos, conceptos de

diseño y requisitos de un

proyecto.

Las presentaciones de

diseño abarcan los

objetivos, conceptos de

diseño y requisitos de un

proyecto.

Las presentaciones de

diseño establecen todos

los objetivos, conceptos

de diseño y requisitos de

un proyecto con claridad.

Colaboración en

equipo

El estudiante no colabora

con los demás estudiantes

ofreciendo comentarios o

ayuda. Cumple con las

funciones de equipo

asignadas, pero no

contribuye

equitativamente en el

trabajo del proyecto. No

consulta con los demás

miembros del equipo

antes de tomar decisiones

importantes para el

proyecto. No ayuda a los

demás a desarrollar

habilidades.

El estudiante colabora

con los demás estudiantes

como se le indica,

ofreciendo comentarios y

ayuda. Cumple con las

funciones de equipo

asignadas y contribuye

equitativamente en el

trabajo del proyecto. En

ocasiones, consulta con

los demás miembros del

equipo las decisiones

importantes para el

proyecto, pero hace un

esfuerzo ínfimo para

ayudar a los demás a

desarrollar habilidades.

El estudiante colabora

libremente con los demás

estudiantes ofreciendo

comentarios o ayuda.

Cumple con las funciones

de equipo asignadas y

contribuye

equitativamente en el

trabajo del proyecto.

Consulta con los demás

miembros del equipo las

decisiones importantes

para el proyecto y ayuda

voluntariamente a los

demás a desarrollar

habilidades para

completar el proyecto.

Page 27: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

26 Información general e instalación del curso © 2012 Adobe Systems Incorporated

Habilidades de gestión de proyectos

Categoría No cumple con las expectativas

Cumple con las expectativas

Supera las expectativas

Diseño

progresivo

El estudiante no utiliza un

documento de diseño ni

los comentarios de sus

pares.

El estudiante utiliza

documentos de diseño

como guía durante el

proceso de diseño. Utiliza

incoherentemente los

comentarios de sus pares

como guía durante el

proceso de rediseño.

El estudiante utiliza

coherentemente

documentos de diseño

como guía durante el

proceso de diseño y

desarrollo. Utiliza

exhaustivamente los

comentarios de sus pares

como guía durante el

proceso de rediseño.

Gestión de

archivos

Los archivos y carpetas

del estudiante no poseen

nombres coherentes ni

están organizados

lógicamente. No

considera la organización

de los archivos como una

tarea importante.

La mayoría de los

archivos y carpetas del

estudiante poseen

nombres coherentes y

están organizados

lógicamente tanto en

unidades locales como

remotas. La organización

de los archivos

evoluciona a medida que

progresa el trabajo.

Los archivos y carpetas

del estudiante poseen

nombres coherentes y

están organizados

lógicamente tanto en

unidades locales como

remotas. La organización

de archivos se crea al

comienzo de un proyecto.

Revisión de la

tarea

El estudiante no responde

a los comentarios o

rediseña sin determinar si

los comentarios mejoran

el contenido y el diseño

del proyecto.

El estudiante responde a

los comentarios y

determina qué

comentarios mejoran el

contenido y el diseño del

proyecto. Incorpora parte

de estos comentarios en

el rediseño.

El estudiante responde de

forma meditada y

completa a los

comentarios y determina

qué comentarios mejoran

con mayor eficacia el

contenido y el diseño del

proyecto. Incorpora estos

comentarios en el

rediseño de un proyecto.

Gestión de

tiempo

El estudiante no destina

con eficiencia el tiempo

para las fases del proceso

de diseño y desarrollo.

Termina pocas fases en el

tiempo estipulado.

El estudiante destina

tiempo a cada fase del

proceso de diseño y

desarrollo a lo largo del

plan de un proyecto.

Termina la mayoría de las

fases en el tiempo

estipulado.

El estudiante destina

tiempo de forma

meditada y eficaz a cada

fase del proceso de

diseño y desarrollo a lo

largo del plan de un

proyecto. Termina todas

las fases en el tiempo

estipulado.

Page 28: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

© 2008 Adobe Systems Incorporated Normas NETS*S de ISTE para estudiantes 27

Normas NETS*S de ISTE para estudiantes La Sociedad Internacional de Tecnología en Educación (ISTE, International Society for Technology in

Education) es la fuente de confianza para el desarrollo profesional, la generación de conocimiento, la

defensa y el liderazgo de innovación. Estas normas, identificadas a lo largo del currículo de Diseño

digital, están integradas en las diversas actividades que realizan los estudiantes durante cada uno de los

proyectos.

I. Creatividad e innovación

Los estudiantes demuestran un pensamiento creativo, forjan conocimiento y desarrollan productos y

procesos innovadores mediante la tecnología. Los estudiantes:

A. aplican el conocimiento anterior para generar nuevas ideas, productos o procesos;

B. crean trabajos originales como medios de expresión personal o grupal:

C. utilizan modelos y simulacros para explorar sistemas y asuntos complejos;

D. identifican tendencias y prevén posibilidades.

II. Comunicación y colaboración

Los estudiantes utilizan medios y entornos digitales para comunicarse y trabajar de manera

colaborativa, incluso a distancia, a fin de respaldar el aprendizaje individual y contribuir al

aprendizaje de los demás. Los estudiantes:

A. interactúan, colaboran y publican con pares, expertos y otras personas, empleando diversos

entornos y medios digitales;

B. comunican con eficiencia información e ideas a diversas audiencias mediante numerosos medios

y formatos;

C. desarrollan comprensión cultural y conciencia global, ya que se involucran con estudiantes de

otras culturas;

D. colaboran en equipos de proyecto en la producción de trabajos originales y la resolución de

problemas.

III. Fluidez de investigación e información

Los estudiantes utilizan las herramientas digitales para reunir, evaluar y utilizar información. Los

estudiantes:

A. planifican estrategias para orientar la averiguación;

B. localizan, organizan, analizan, evalúan, sintetizan y utilizan de manera ética información de

diversas fuentes y medios;

C. evalúan y seleccionan fuentes de información y herramientas digitales en función de la

adecuación a las tareas específicas;

D. procesan datos e informan resultados.

IV. Pensamiento crítico, solución de problemas y toma de decisiones

Los estudiantes utilizan las habilidades de pensamiento crítico para planificar y llevar a cabo

investigaciones, gestionar proyectos, resolver problemas y tomar decisiones informadas utilizando las

herramientas digitales y los recursos adecuados. Los estudiantes:

Page 29: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

28 Normas NETS*S de ISTE para estudiantes © 2012 Adobe Systems Incorporated

A. identifican y definen los verdaderos problemas y las preguntas significativas para su

investigación;

B. planifican y gestionan actividades para desarrollar una solución o finalizar un proyecto;

C. reúnen y analizan datos para identificar soluciones y/o tomar decisiones informadas;

D. utilizan múltiples procesos y diversas perspectivas para explorar soluciones alternativas.

V. Convivencia digital

Los estudiantes comprenden las cuestiones humanas, culturales y sociales relacionadas con la

tecnología y tienen un comportamiento lícito y ético. Los estudiantes:

A. protegen y practican un uso seguro, lícito y responsable de la información y la tecnología;

B. exhiben una actitud positiva respecto del uso de tecnología que respalde la colaboración, el

aprendizaje y la productividad;

C. demuestran responsabilidad personal para un aprendizaje para toda la vida;

D. exhiben el liderazgo para la convivencia digital.

VI. Operaciones y conceptos tecnológicos

Los estudiantes demuestran una profunda comprensión de las operaciones, conceptos y sistemas

tecnológicos. Los estudiantes:

A. comprenden y utilizan sistemas tecnológicos;

B. seleccionan y utilizan aplicaciones con eficacia y productividad;

C. resuelven problemas de sistemas y aplicaciones;

D. transfieren el conocimiento actual al aprendizaje de nuevas tecnologías.

Page 30: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

© 2008 Adobe Systems Incorporated Objetivos de Adobe Certified Associate 29

Objetivos de Adobe Certified Associate Durante los últimos años, Adobe ha realizado investigaciones para identificar las habilidades básicas que

necesitan los estudiantes para crear comunicaciones eficaces mediante el uso de diferentes herramientas

de medios digitales. Adobe se reunió con educadores y diseñadores profesionales y realizó encuestas en

empresas e instituciones educativas de todo el mundo. La investigación arrojó objetivos que abarcan

diseño, planificación de proyectos, comunicación y tecnología. El siguiente grupo de objetivos esenciales

de aprendizaje forma parte de los exámenes de Adobe Certified Associate de Comunicación web y

Comunicación de medios enriquecidos, y está integrado a la largo de Diseño digital.

Comunicación web mediante el uso de los objetivos de Dreamweaver CS6

Determinación de los requisitos del proyecto

1.1 Identificar el propósito, la audiencia y las necesidades de la audiencia de un sitio web.

1.2 Identificar el contenido de la página web que es relevante para el propósito del sitio web y adecuado

para la audiencia a la que está destinado.

1.3 Demostrar el conocimiento de las normas de copyright estándar (términos relacionados, obtención

de autorización y citas de material con copyright).

1.4 Demostrar el conocimiento de las normas de facilidad de acceso a sitios web que abordan las

necesidades de las personas con problemas motrices y de visión.

1.5 Tomar decisiones de desarrollo del sitio web basadas en su análisis e interpretación de las

especificaciones de diseño.

1.6 Comprender las tareas y responsabilidades de gestión de proyectos.

Planificación del diseño del sitio y la disposición de la página

2.1 Demostrar el conocimiento de procedimientos recomendados generales y específicos de

Dreamweaver para el diseño de un sitio web, como mantener la coherencia, separar el contenido del

diseño, utilizar fuentes estándar y jerarquía visual.

2.2 Producir diseños de sitios web que funcionen bien en diversos sistemas operativos,

versiones/configuraciones de navegadores y dispositivos.

2.3 Demostrar el conocimiento de conceptos y principios de diseño de disposición de página.

2.4 Identificar los principios básicos de facilidad de uso, de lectura y de acceso de un sitio web.

2.5 Demostrar el conocimiento de diagramas de flujo, guiones gráficos y estructuras metálicas, para

crear páginas web y un mapa del sitio (índice del sitio) que respeten la jerarquía planificada del sitio.

2.6 Comunicar a otras personas (como pares y clientes) los planes de diseño.

Comprensión de la interfaz de Adobe Dreamweaver CS6

3.1 Identificar los elementos de la interfaz de Dreamweaver.

3.2 Utilizar la barra Insertar.

3.3 Utilizar el Inspector de propiedades.

3.4 Utilizar el panel Activos.

Page 31: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

30 Objetivos de Adobe Certified Associate © 2012 Adobe Systems Incorporated

3.5 Utilizar el panel Archivos.

3.6 Personalizar el espacio de trabajo.

Agregado de contenido mediante Dreamweaver CS6

4.1 Demostrar el conocimiento del Lenguaje de marcado de hipertexto.

4.2 Definir un sitio de Dreamweaver.

4.3 Crear una página web, asignarle un título y un nombre y guardarla.

4.4 Agregar texto a una página web.

4.5 Insertar imágenes y aplicar texto alternativo en una página web.

4.6 Vincular contenido web, mediante el uso de hipervínculos, vínculos de correo electrónico y

delimitadores con nombre.

4.7 Incluir video y sonido en una página web.

4.8 Agregar animaciones e interacción al contenido.

4.9 Insertar barras de navegación, imágenes de sustitución incremental y botones creados en un

programa de dibujo en una página web.

4.10 Construir mapas de imágenes.

4.11 Importar datos tabulares a una página web.

4.12 Importar y visualizar un documento de Microsoft Word o Microsoft Excel desde una página web.

4.13 Crear formularios.

Organización de contenido mediante Dreamweaver CS6

5.1 Establecer y modificar propiedades del documento.

5.2 Organizar la disposición de la página web con etiquetas divisorias relativas y absolutamente

posicionadas y estilos CSS.

5.3 Modificar texto y propiedades del texto.

5.4 Modificar imágenes y propiedades de las imágenes.

5.5 Crear plantillas de páginas web.

5.6 Utilizar etiquetas HTML básicas para configurar un documento HTML, dar formato al texto, agregar

vínculos, crear tablas y construir listas ordenadas y desordenadas.

5.7 Agregar contenido al encabezado, a fin de que una página web pueda verse en los motores de

búsqueda.

5.8 Utilizar CSS para implementar un diseño reutilizable.

Evaluación y mantenimiento de un sitio mediante Dreamweaver CS6

6.1 Realizar pruebas técnicas.

6.2 Identificar técnicas para la realización de pruebas de facilidad de uso básicas.

6.3 Identificar métodos para obtener comentarios del sitio.

6.4 Gestionar activos, vínculos y archivos de un sitio.

6.5 Publicar y actualizar los archivos del sitio en un servidor remoto.

Page 32: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

© 2008 Adobe Systems Incorporated Objetivos de Adobe Certified Associate 31

Comunicación de medios enriquecidos mediante el uso de los objetivos de Flash Professional CS6

Determinación de los requisitos del proyecto

1.1 Identificar el propósito, la audiencia y las necesidades de la audiencia del contenido de medios

enriquecidos.

1.2 Identificar el contenido de medios enriquecidos que es relevante para el propósito de los medios en

los que se utilizará (sitios web, dispositivos móviles, etc.).

1.3 Comprender las opciones para la producción de contenido de medios enriquecidos accesible.

1.4 Demostrar el conocimiento de las normas de copyright estándar (términos relacionados, obtención

de autorización y citas de material con copyright).

1.5 Comprender las tareas y responsabilidades de gestión de proyectos.

1.6. Comunicar a otras personas (como pares y clientes) los planes de diseño y contenido.

Identificación de los elementos de diseño de medios enriquecidos

2.1 Identificar los procedimientos recomendados generales y específicos de Flash para el diseño de

contenido de medios enriquecidos para la Web, aplicaciones móviles y aplicaciones de AIR.

2.2 Demostrar el conocimiento de elementos y principios de diseño.

2.3 Identificar las técnicas generales y específicas de Flash para la creación de elementos de medios

enriquecidos accesibles y legibles.

2.4 Utilizar un guión gráfico para diseñar elementos de medios enriquecidos.

2.5 Organizar un documento de Flash.

Comprensión de la interfaz de Adobe Flash Professional CS6

3.1 Identificar los elementos de la interfaz de Flash.

3.2 Utilizar el Inspector de propiedades.

3.3 Utilizar la Escala de tiempo.

3.4 Ajustar las propiedades del documento.

3.5 Utilizar las guías y reglas de Flash.

3.6 Utilizar el editor de movimiento.

3.7 Comprender los tipos de archivos de Flash.

3.8 Identificar los procedimientos recomendados para gestionar el tamaño de archivo de un documento

de Flash publicado.

Construcción de elementos de medios enriquecidos mediante Flash Professional CS6

4.1 Tomar decisiones de desarrollo de contenido de medios enriquecidos basadas en su análisis e

interpretación de las especificaciones de diseño.

4.2 Utilizar las herramientas del panel Herramientas para seleccionar, crear y manipular gráficos y texto.

4.3 Importar y modificar gráficos.

4.4 Crear texto.

4.5 Ajustar las propiedades del texto.

4.6 Crear objetos y convertirlos en símbolos, incluidos gráficos, clips de películas y botones.

4.7 Comprender los símbolos y la biblioteca.

Page 33: Digital Design: Foundations of Web Design · En el primer semestre, los estudiantes utilizan Adobe Photoshop CS6 y Adobe Fireworks CS6 para desarrollar gráficos estáticos e interactivos

32 Objetivos de Adobe Certified Associate © 2012 Adobe Systems Incorporated

4.8 Editar símbolos e instancias.

4.9 Crear máscaras.

4.10 Crear animaciones (cambios de forma, posición, tamaño, color y transparencia).

4.11 Agregar controles sencillos mediante ActionScript 3.0.

4.12 Importar y utilizar sonido.

4.13 Agregar y exportar video.

4.14 Publicar y exportar documentos de Flash.

4.15 Permitir el acceso a un documento de Flash.

Evaluación de elementos de medios enriquecidos mediante Flash Professional CS6

5.1 Realizar pruebas técnicas básicas.

5.2 Identificar técnicas para la realización de pruebas de facilidad de uso básicas.