Las diferentes etapas de producción multimedia aplicadas al producto ALIVE!, desarrollado como parte de proyecto final en las unidades de aprendizaje impartidas en UPIICSA-IPN, de la Lic. en Ciencias de la Informática.

1. DESARROLLO DE
APLICACIONES
MULTIMEDIA.
Instituto Politécnico Nacional
Unidad Profesional Interdisciplinaria de Ingeniería y Ciencias Sociales y
Administrativas (UPIICSA)
Lic. En Ciencias de la Informática
Etapas de
desarrollo.

2. INSTITUTO POLITÉCNICO NACIONAL
Unidad Profesional Interdisciplinaria de Ingeniería y Ciencias Sociales y
Administrativas
Alumno: Castañeda Mendoza Sabaoth Emmanuel.
Profesora: Gómez Miranda Pilar.
Unidad de Aprendizaje: Herramientas multimedia.
Secuencia: 2CM20.
“Etapas de Producción del desarrollo de proyectos
multimedia”.
ALIVE!

3. Etapa de Pre-producción.
Objetivo de la aplicación:
El producto multimedia ALIVE!, es una aplicación de escritorio que tiene el
objetivo de reforzar los valores de respeto hacia el planeta y el medio que nos
rodea, además de dotar al usuario de cultura ambiental y proporcionarle
material multimedia para su mejor aprendizaje.
Definición de la tematica:
La aplicación se relaciona directamente con la temática espacial, es decir,
fondos e imágenes del espacio exterior, planetas, destacando el planeta tierra,
y tomando como color clave, principal que identifica al producto, como el color
“purpura”.
Definición de estrutura de la aplicación:
La aplicación de escritorio, cuenta con diferentes secciones multimedia que el
usuario podrá consultar simultaneamente, y a continuación se mencionan.
1. Tienda: El usuario podrá descargar contenido como sonidos, imágenes,
temas para personalizar su computadora, y accesar a sitios
recomendados para la creación manual de contenidos.
2. Consejos: Sección que contiene tips para el usuario, conteniendo tips
locales y tips online, para el cuidado del ambiente, y ahorro de recursos.
3. Video: Apartado con videos y documentales de reflexión, videos
musicales, y videos que muestran y describen las maravillas de nuestro
planeta.

4. 4. Juegos: Contiene divertidos juegos, para el entretenimiento, y para un
mayor aprendizaje a partir de la diversión.
5. Ayúdame: Sección en la cual se promocionan campañas e ideas para
reciclar y/o reutilizar algunas cosas viejas.
6. Enlaces: Enlaces al sitio web de la aplicación, redes sociales e
información general de producto.
Definición del desarrollo:
El diseño del contenido multimedia se realiza en la aplicación PowerPoint de la
suite ofimática Microsoft Office, y el desarrollo de la aplicación se elabora en
Microsoft Visual Studio, en el lenguaje C#, y teniendo una interfaz tipo Windows
Forms.
+ + + =
Definición de tipografía e infografía:
El producto multimedia ALIVE! Contiene una tipografía fina, basada e inspirada
en el estilo de ciertos productos como Windows Phone o Windows 8, que utilizan
la tipografía “Segoe UI” por defecto.
Segoe UI
Así mismo, las diferentes cajas de texto tienen un color grisáceo claro, que
contrasta perfectamente con el fondo semi-obscuro de las diferentes áreas de
la aplicación multimedia.

5. La tipografía utilizada para el diseño del logotipo del producto es del tipo
“Century Gothic”.
Century Gothic
Etapa de Producción.
Creación de boceto visual (interfaz):
El diseño fue especialmente diseñado para llamar la atención del usuario, un
diseño pulcro y en pocas palabras “agradable” al usuario, ya que uno de los
principales objetivos es que el usuario final interactúe con una interfaz agradable.
Las secciones de la aplicación contienen iconos en forma de cuadros o
rectángulos llamados “tiles”, y cada uno identificado con un color en específico
y una imagen (icono) representativa a la sección, y debajo el nombre de la
aplicación con un tamaño sumamente discreto.
Forma y tamaño
del tile.
Color del tile. Imagen y
nombre del tile.
Interfaz propuesta
completa de la
aplicación.

6. Definición de gama de colores:
La aplicación ALIVE! Contiene una infinidad de colores empleados, ya que
para ser una aplicación visualmente atractiva, los colores de texto, fondos e
imágenes empleadas son la principal razón de esta característica.
Principalmente, y debido a su estilo, que fue inspirado en fotos del espacio
exterior y paisajes diversos, principalmente nocturnos, el color del texto está
obligado a ser de una tonalidad clara para contrastar de una manera
correcta las diferentes imágenes de fondo.
Para algunos anuncios, botones y secciones de la aplicación, fueron utilizados
los colores blanco, negro, verde, azul, naranja, purpura, amarillo, y casi nula
la utilización del color negro.
Aproximadamente el 95% del texto en la
aplicación es de color blanco en su tonalidad
pura, ya que se quiere resaltar el texto que está
presente en una aplicación con un fondo
obscuro, ya que de lo contrario, el texto se
perdería.
El resto del texto es de color son colores grisáceos,
es decir, colores claros. En su totalidad, todo
aquel contenido de texto es de color claro.
El color púrpura define por
completo la identidad de la
aplicación.

7. Diseño gráfico en la aplicación y en la web:
Como se ha mencionado anteriormente, la aplicación se encuentra en medio
de una temática espacial, por lo que los colores deben ser obscuros, con fondos
iluminados por estrellas, galaxias, planetas, etc.
Así mismo se busca la simplicidad del contenido a través de las diferentes fuentes
utilizadas, tamaños, y colores de las mismas.
ALIVE! cuenta con un sitio en internet, creada y adaptada a través de una
plantilla creada en WIX, un servicio para la creación de sitios web o blogs, de
manera gratuita. A pesar de que se desarrolló a partir de una plantilla, que
contiene desde imágenes, botones, fuentes, etc., el sitio fue adaptado y
reinventado con un aspecto acorde a lo establecido inicialmente.
Página inicial promocional, donde muestra una campaña en contra del uso
de animales en los circos. El sitio web ha sido también optimizado para
dispositivos móviles como tabletas y smartphones.

8. Tipografía:
La tipografía de la
aplicación se realizó bajo la
fuente de letras “Segoe UI”, y
está presente en todas y
cada una de las secciones
de la aplicación con fines de
estandarización de diseño.
Los colores son blancos y
claros, los títulos tienen un
tamaño aproximado de 24,
mientras el texto para contenidos es de tamaño 12.
La aplicación contiene imágenes completamente relacionadas con el
contenido, para ayudar al usuario a retener más rápido la información
mostrada.
Infografía y lenguaje visual:
La infografía está presente en la aplicación, en secciones como Consejos e
Ideas, así como en la mini sección de ¿Sabías que?
Las imágenes resaltan un poco más ante el texto, ya que se quiere destacar
lo que el texto quiere dar a entender, así mismo, dentro del sitio oficial en
internet de ALIVE!, se encuentra
numerosa información
acompañada de imágenes, como
consejos, curiosidades, información
general de la aplicación, y anuncios
que promueven campañas a través
de internet.

9. Iconografía:
La mayoría del contenido introducido a la aplicación fue elaborado
especialmente y posteriormente plasmado y recortado para su uso. También
se utilizó la iconografía principal como los botones atrás, adelante, descargar,
reproducir, etc., con el estilo conocido como metro.
Este diseño está implementado en productos como Windows Phone, Zune,
Windows 8, etc.
Organización y herramientas tecnológicas:
ALIVE! Ha sido desarrollada con la ayuda de herramientas tecnológicas como
son los equipos de cómputo, servidores gratuitos para crear su sitio oficial,
programas y suites de diseño como PowerPoint, programas para descargar
múltiples videos, sonidos, imágenes, para incluirlos posteriormente en la
aplicación, cuidando de no
infringir con los derechos de
autor.
En el desarrollo de la página
web, se ha implementado la
herramienta WIX, un sitio de
internet para la creación de
blogs y sitios de carácter
gratuito.
El desarrollo de la aplicación de
escritorio se realizó en Microsoft
Visual Studio.
4 iconos que representan el
estilo metro, e implementados
en la aplicación.

10. Etapa de Post-producción.
En la aplicación multimedia:
ALIVE! Está pensada como una aplicación que se distribuirá a través de una
licencia gratuita por internet, es decir, no existirá un formato físico, donde incluya
una caja con un cd. Las razones principales es el cuidado del medio ambiente,
portabilidad, economía, etc.
La aplicación final podrá ejecutarse en la mayoría de los ordenadores, con las
diferentes versiones y ediciones de Windows, pero algunos materiales solo
estarán disponibles para las versiones más recientes de Windows, como los temas
para PC, que solo son compatibles con Windows 8.
En el sitio web:
El sitio web de la aplicación está
completamente finalizado, y está
planeado que en un futuro próximo, el
sitio se convierta en un blog que
fungiría a su vez como una aplicación
online, con un periodo continuo de
actualización aproximado de 5 días
como máximo.
Una de las razones principales, es la
actualización continua en una
aplicación de escritorio.
El sitio web podrá visualizarse de la
mejor manera en el explorador Google Chrome, ya que con este, se podrán
apreciar efectos en los textos, botones, etc.
El sitio web también esta optimizado para su vista en dispositivos móviles como
tabletas y smartphones.

11. Más información:
Para más información, consulte el sitio oficial de la aplicación.
http://aliveupiicsa.wix.com/aliveupiicsa
Para información exclusiva para desarrolladores, contáctese en la sección de
“Contacto” del sitio web, o a través de la siguiente dirección.
aliveupiicsa@outlook.com
Encuéntranos en Facebook.
http://facebook.com/aliveupiicsa
Instituto Politécnico Nacional
Unidad Profesional Interdisciplinaria de Ingeniería y Ciencias Sociales y
Administrativas (UPIICSA)
Lic. En Ciencias de la Informática.
Herramientas Multimedia.
Si utilizas o distribuyes este material, no olvides dar crédito a la siguiente persona:
Castañeda Mendoza S. Emmanuel, UPIICSA-IPN.