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.

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!

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

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.

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.

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.

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.

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.

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.

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.