6 SEM

ACADEMIA:
TIC



GUIA DE DISEO EN 2D PARA WEB





CLAVE:
186




COLEGIO DE BACHILLERES
PLANTEL No 3 IZTACALCO

6 SEM

REQUISITOS PARA PRESENTAR EXAMEN
ESTA GUIA DEBERAS ENTREGARLA RESUELTA, COMPLETA E IMPRESA EL DIA
DEL EXAMEN, SIN ELLA NO SE TE DARA DERECHO A PRESENTARLO
DEBERAS ACUDIR A LA CONSULTORIA A INSCRIBIRTE Y DARTE LAS DEMAS
BASES PARA PODER PRESENTAR TU ASIGNATURA.
DEBES LLEVAR UNA FOTO INFANTIL TUYA A LA CONSULTORIA PARA TU
INSCRIPCIN.
PRESENTAR CREDENCIAL O TIRA DE MATERIA CON FOTOGRAFIA
CHECAR SI NO SE ABRE CIRCULO DE ESTUDIO.
RECUERDA QUE SI PAGAS EL EXAMEN Y NO TE PRESENTAS SE TE ASIGNARA DE
CALIFICACIN w.



6 SEM

SALIDA OCUPACIONAL: AUXILIAR ANIMADOR DE 2D
MDULO: DISEO EN 2D PARA WEB
PRESENTACIN
El Plan de estudios del Colegio de Bachilleres se estructura en tres reas de formacin:
1. El rea de Formacin Bsica, considera las competencias disciplinares bsicas y su
interrelacin con las genricas que corresponden al Marco Curricular Comn de la Educacin
Media Superior.
2. El rea de Formacin Especfica, se estructura en cuatro dominios que recogen las
competencias disciplinares extendidas, en un conjunto de asignaturas que constituyen la
plataforma para realizar estudios superiores.
3. El rea de Formacin Laboral, le permite al estudiante adquirir las competencias profesionales
para desempearse en el mbito laboral.
De acuerdo con el Modelo Acadmico del Colegio de Bachilleres, el rea de Formacin Laboral:
contribuye en el proyecto de construccin de vida del estudiante en el mbito de lo laboral, a travs
de situaciones que le permitan adquirir conocimientos, habilidades, actitudes y destrezas para
producir algn bien o servicio, satisfaciendo sus necesidades materiales y existenciales, que
posibiliten su transformacin como sujeto individual y social, en el momento histrico y cultural en
el que vive; fortaleciendo la capacidad de ingresar, mantenerse y progresar exitosamente en el
mundo laboral. Dicha rea se organiza en grupos ocupacionales, que dan cuenta de diversas
salidas ocupacionales, las que se logran a travs de mdulos de aprendizaje.
De esta forma, la salida ocupacional Auxiliar Animador 2D se ubica en el Grupo Ocupacional de
Informtica, tiene como Estndar de Referencia a las Normas: NTC: IMS076_3 Animacin 2D y 3D,
NTC: IMS295_3 Desarrollo de Productos Audiovisuales Multimedia Interactivos y NTC: IFC154_3
Desarrollo de Aplicaciones con Tecnologas Web (Normas Tcnicas de Espaa).
Al elegir la salida ocupacional de Auxiliar Animador 2D, el mdulo de aprendizaje que le
corresponde, despus de haber cursado en el quinto semestre Programacin en 2D para Web, es
Diseo en 2D para Web, que se imparte a la par del mdulo comn de Introduccin al trabajo.
El mdulo de Diseo en 2D para Web desarrolla los procesos relacionados con elaborar pginas
Web publicitarias mediante el diseo de su interfaz, la elaboracin de los componentes interactivos
y animados que la integran, as como su publicacin en un servidor Web pblico o privado.










6 SEM

COMPETENCIAS GENRICAS
En el Colegio de Bachilleres las competencias se definen como esquemas integrados de
saberes o atributos (informaciones, habilidades, formas de pensamiento, estrategias cognitivas y
metacognitivas, valores y actitudes) para el logro de desempeos relevantes, para la realizacin
exitosa de tareas o la resolucin de problemas especficos en situaciones comunes de la vida
diaria, de manera racional, informada y estratgica. (Colegio de Bachilleres, 2009, p. 31). Al rea
de Formacin Laboral, le corresponde desarrollar las llamadas competencias profesionales, las
cuales entendemos como aquellas que permiten el desempeo satisfactorio en el ejercicio de
un proceso de trabajo especfico y se movilizan en funcin de las necesidades individuales y
sociales. (Colegio de Bachilleres, 2009, p. 37). Se refieren a actividades que se realizan en un
campo especfico del quehacer laboral, y al igual que las disciplinares, contribuyen al desarrollo de
las competencias genricas y aportan a los estudiantes los elementos para desplegarlas.

COMPETENCIAS PROFESIONALES
Las competencias profesionales se llevan a cabo a travs de las Salidas ocupacionales,
entendidas como el rea laboral referida a un grupo de competencias que son relevantes para el
desempeo de diversos puestos de trabajo en diferentes compaas, sitios o industrias. Las
Salidas ocupacionales que se desarrollarn desde el grupo ocupacional de Informtica son:
Programador de Sistemas de Cmputo, Auxiliar Administrador de Base de Datos, Programador de
Pginas Web, Auxiliar de Diseo Publicitario, Animador 2D, Editor de Imgenes y Diseador de
Pginas Web.
CONTENIDO DE LOS DIFERENTES BLOQUES TEMTICOS
Bloque I. Disear la interfaz de la pgina Web publicitaria
Propsito: Que el estudiante defina la interfaz de la pgina Web publicitaria utilizando elementos
de diseo para realizar la maquetacin considerando la solicitud del cliente
Ncleo Temtico
a. Planeacin de soluciones
b. Bocetaje
c. StoryBoard.
d. Maquetacin

Fase 1. Planear la elaboracin de una pgina Web publicitaria a partir de los requerimientos del
cliente.
Fase 2. Disear la pgina Web publicitaria mediante la elaboracin de una maqueta que cumpla
con los requerimientos del cliente.

PARA EL BLOQUE No. 1
Problemtica situada
Trabajas en una empresa de diseo y publicidad para Internet llamada Digital Web donde se
realizan soluciones grficas a la medida de cada cliente, utilizando las ltimas tecnologas para el
desarrollo de pginas Web animadas e interactivas que son perfectamente visibles en cualquier
navegador de Internet.
En este momento se les ha contratado para realizar la pgina Web de una cadena de hoteles
llamada Playa Inn, donde una empresa publicitaria les elabor toda su imagen corporativa,
papelera y publicidad fsica para darse a conocer en el mercado. La intencin de contratar a la
empresa donde trabajas es elaborar una pgina Web, para que los posibles clientes consulten los

6 SEM

datos generales de la cadena as como los servicios que ofrecen (gimnasio, SPA, centro de
negocios con infraestructura de la ms alta calidad, etc.) con una interfaz intuitiva y muy llamativa
.
Es importante precisar que esta pgina es meramente informativa por lo cual no se tendrn
opciones para registrar apartados de habitaciones o enviar y recibir informacin de la cadena.


ACTIVIDADES A DESARROLLAR:

Identifica las ideas clave en un texto o discurso oral e infiere conclusiones a partir
de ellas.
Maneja las tecnologas de la informacin y la comunicacin para obtener
informacin y expresar ideas.
Sigue instrucciones y procedimientos de manera reflexiva, comprendiendo como
cada uno de sus pasos contribuye al alcance de un objetivo.
Utiliza las tecnologas de la informacin y comunicacin para procesar e interpretar
la informacin.

Para disear la interfaz de la pgina Web publicitaria debes responder a los siguientes
cuestionamientos:
Qu es una pgina Web? Qu es una pgina Web publicitaria? Cul es la diferencia entre
ellas? Cmo analizas la problemtica del cliente? Cmo planeas la solucin informtica del
cliente para la realizacin de su pgina Web publicitaria? Qu es una consultora? Qu es un
boceto? Para qu sirve? Cmo se elabora? Qu es una maqueta? Cul es su utilidad? Qu
es una tcnica para maquetar?

Bloque II. Elaborar la pgina Web en un programa de animacin en 2D.
Propsito: Que el estudiante construya una pgina Web publicitaria animada en un programa de
animacin en 2D que cumpla con los requerimientos del diseo
Ncleo Temtico
a. Modelado en 2D
b. Animacin en 2D
c. ActionScripts
d. Elementos multimedia
e. HTML

Fase 3. Disear los componentes grficos interactivos y animados de acuerdo a la maqueta
elaborada.
Fase 4. Integrar los componentes grficos mediante la programacin de actionscript.

PARA EL BLOQUE NO. 2
PROBLEMTICA:

Trabajas en una empresa de diseo y publicidad para Internet llamada Digital Web donde se
realizan soluciones grficas a la medida de cada cliente, utilizando las ltimas tecnologas para el
desarrollo de pginas Web animadas e interactivas que son perfectamente visibles en cualquier
navegador de Internet.
En este momento se les ha contratado para realizar la pgina Web de una cadena de hoteles
llamada Playa Inn, donde una empresa publicitaria les elabor toda su imagen corporativa,
papelera y publicidad fsica para darse a conocer en el mercado. La intencin de contratar a la

6 SEM

empresa en donde trabajas es para elaborar una pgina Web, para que los posibles clientes
consulten los datos generales de la cadena as como los servicios que ofrecen (gimnasio, SPA,
centro de negocios con infraestructura de la ms alta calidad, etc.) con una interfaz intuitiva y muy
llamativa.
Es importante precisar que esta pgina es meramente informativa por lo cual no se tendrn opciones para
registrar apartados de habitaciones o enviar y recibir informacin de la cadena

ACTIVIDADES A DESARROLLAR

Antes de elaborar la pgina Web publicitaria animada contesta las siguientes preguntas: Cul es
la diferencia entre pgina web esttica y dinmica? Cul es la diferencia entre ruta absoluta y ruta
relativa en los enlaces de HTML? Qu es el modelado en 2D? Qu es una animacin en 2D?
Qu programas informticos existen para elaborar una pgina Web con animacin en 2D?
Cmo controlas la interactividad de los elementos animados? Qu es un elemento multimedia?
Cmo se integran los elementos multimedia en un programa de animacin en 2D? Cmo haces
que una animacin en 2D sea publicada para Web? Qu es HTML? Qu son los scripts?


Bloque III. Realizar el montaje de la pgina en un servidor pblico o privado.
Propsito: Que el estudiante suba una pgina Web publicitaria con elementos animados e
interactivos en un servidor Web pblico o privado mediante el protocolo de transferencia de
archivos FTP.
Ncleo Temtico
a. Servidor Web.
b. Protocolos de comunicacin.
c. Proveedor de servicios Web.
d. Hosting.
e. Dominio.
f. Protocolo de transferencia de archivos
(FTP).

Fase 5. Seleccionar el proveedor de servicios de alojamiento Web.
Fase 6. Realizar el proceso de montaje de la pgina Web en un servidor pblico o privado.
Competencia: Elaborar pginas Web publicitarias en un programa de animacin en 2D.

Problemtica situada
Trabajas en una empresa de diseo y publicidad para Internet llamada Digital Web donde se
realizan soluciones grficas a la medida de cada cliente, utilizando las ltimas tecnologas para el
desarrollo de pginas Web animadas e interactivas que son perfectamente visibles en cualquier
navegador de Internet.
En este momento se les ha contratado para realizar la pgina Web de una cadena de hoteles
llamada Playa Inn, donde una empresa publicitaria les elabor toda su imagen corporativa,
papelera y publicidad fsica para darse a conocer en el mercado. La intencin de contratar a la
empresa en donde trabajas es para elaborar una pgina Web, para que los posibles clientes
consulten los datos generales de la cadena as como los servicios que ofrecen (gimnasio, SPA,
centro de negocios con infraestructura de la ms alta calidad, etc.) con una interfaz intuitiva y muy
llamativa.




6 SEM

ACTIVIDAD A DESARROLLAR
Elaborar pginas Web publicitarias en un programa de animacin en 2D, considera las
caractersticas

Para montar la pgina Web publicitaria elaborada considera los siguientes cuestionamientos. Qu
es un servidor Web? Cmo funciona? Quin ofrece este servicio? Qu es un proveedor de
servicios de Internet? Qu tipo de proveedores existen? Qu es un servidor Web pblico? Qu
es un servidor Web privado? Cul es la diferencia entre ellos? Qu es un protocolo de
comunicacin? Qu es un servicio de hosting? Qu es un dominio? Para qu se usan los
dominios? Cmo se sube una pgina Web a Internet? A qu se le dice montar una pgina?
Qu es el protocolo de transferencia de archivos o FTP?


FUENTES (BIBLIOGRFICAS Y SITIOS)

Creativetrick.blogspot.com. Consultado el 11 de marzo de 2011, en
http://menju.wordpress.com/2007/05/07/proceso-del-diseno-grafico/

Desarrolloweb.com. Consultado el 11 de marzo de 2011, en
http://www.desarrolloweb.com/articulos/1277.php

Oros, J (2004). Diseo de pginas Web interactivas con JavaScript. Espaa: Alfa Omega
Scribd. Consultado el 11 de marzo de 2011, en http://es.scribd.com/doc/13651548/LIBRO-
COMUNICACION-GRAFICA

Timothy, S. (2004). Disear con y sin Retcula. Espaa: Gustavo Gili.
Vlez, M. y Gonzlez, A. El diseo grfico. Universidad de Granada, Espaa. Obtenido el 23 de
febrero de 2011, en http://www.aipo.es/libro/pdf/11DisGra.pdf.

Software de animacin en 2D propuesto: Adobe Flash CS5.

Anbarro, C. E. (2001). Manual Bsico de HTML. Creacin y Estructura de Pginas WEB. Versin 1.3
Recuperado el 4 de noviembre de 2011, de la pgina http://www.bolivia-internet.com/html/manualhtml.pdf
Ferrer, J., Garca, V. y Garca, R. Curso completo de HTML. Recuperado el 4 de noviembre de 2011, de la
pgina http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html.pdf
Manual de HTML. Recuperado el 4 de noviembre de 2011, de la pgina
http://profesores.fi-b.unam.mx/cintia/Manualhtml.pdf
Martnez, . (1995). MANUAL PRCTICO DE HTML. Escuela Tcnica Superior de Ingenieros de
Telecomunicacin Universidad Politcnica de Madrid, Espaa. Recuperado el 4 de noviembre de 2011,
de la pgina http://bioinf.ibun.unal.edu.co/servicios/electiva/manhtlm/HTML.pdf
Sanchez, R. Curso Diseo Web con Software libre, VNU Referencia HTML. Recuperado el
4 de noviembre de 2011, de la pgina
http://usuarios.multimania.es/cursonvu/descargas/Etiquetas%20HTML.pdf