Alúmno: Cesar Enrique Flores Sandoval

Matricula: 31120482

Carrera: Ing. En Computación

Ciclo: ENE-JUNIO 2019

Docente: M.I.T.C. Alejandro Ulises López Orozco

PROYECTO FINAL

SISTEMAS MULTIMEDIA

PAGINA WEB HTML5, CSS, JS

Descripción breve Se realizo una página web en base a los conocimientos adquiridos durante el semestre, la cual

consta de una web para orientación a realidad aumentada con toda su información más relevante para su introducción.

Índice

1. Introduccion……………………………………………

2. Requisitos de Desarrollo……………………………….

3. Requisitos No funcionales…………………………….

4. Requisitos funcionales………………………………….

5. Requisitos del usuario………………………………….

6. Requisitos de datos……………………………………..

7. Requisitos del entorno…………………………………

8. Requisitos de Usabilidad……………………………..

9. Diseño conceptual……………………………………….

10. Implementación……………………………………

Introducción

Aquí se presenta la experiencia, interacción y desarrollo de la

realidad aumentada, mediante una pagina web orientada a la

introducción e inclusión a la realidad aumentada, esto con la

finalidad de enseñar e informar a todo aquel que le interese la

tecnología y quiera desarrollar por su cuenta, este campo que esta

en constante crecimiento en conjunto con la realidad virtual.

Esta web se pretende llegar a personas de bachillerato o superior

dado que si tiene algo de complejidad y aun no se desarrolla una

forma de explicar a personas de secundaria o primaria dado que lo

que se les enseña en las instituciones aun es muy distinto para que

comprendan la programación y mas datos relacionados a

computación y desarrollo.

El usuario podrá desarrollar muchos proyectos a futuro con

respecto a nuestra región o estado ya que esta creciendo el uso de

esta tecnología en muchos lados y buscan gente que apoye y

desarrolle realidad aumentada por el lado educativo, cultural e

informativo.

A continuación, se muestra su desarrollo.

www.teslacesar.com

Requisitos de Desarrollo

La pagina se inició con la intención de informar y adentrar a la

gente a este ambiente nuevo e interesante, se identificaron ciertos

detalles al desarrollar la pagina web orientada a esto, entre ellos los

requisitos funcionales y los no funcionales que claramente son

esenciales para que sea valida de presentarse e implementarse.

A continuación, se presentan los puntos referentes a los requisitos

que se tomaron en cuenta.

Requisitos no funcionales

Alguna información o direccionamiento de videos o páginas web no

están de forma correcta, debido a la poca experiencia y no

profunda sobre hmtl5, css y javascript impidieron darle una mejor

forma entendible amigable y mas congruente a la hora de mostrar y

desplegar la información.

La barra de navegación presenta pequeños detalles con respecto a

la letra, tamaño y colores que también pueden confundir al usuario.

Requisitos funcionales

Se mostro una estética poco saturada, entendible y fácil de usar

para personas que tienen un poco de experiencia usando

navegadores, internet y páginas web.

La forma de presentar videos, imágenes y la estructura del texto la

información bien formateada permite aclarar dudas y que el lector,

usuario o entusiasta entienda no solo que es sino historia y

aplicaciones.

La pagina usa colores poco llamativos en los fondos y el uso de

texto, márgenes, y orientación da una experiencia multiplataforma

casi perfecta.

Requisitos del usuario

Las personas a las que esta orientado este tema, videos e

información son casi globales dejando fuera a las personas mayores

de edad y niños de primaria debido a que no se tiene una

estructura que pueda ser entendida y comprendida por toda esta

amplia cantidad de personas.

La interfaz es muy amigable haciendo que los estudiantes

principalmente quieran seguir indagando en la web e inclusive

instruyéndose mas y mas de lo que se pueda ofrecer en esta web.

Requisitos de datos

Se requirieron imágenes, videos, animaciones y scripts para dar una

experiencia de usabilidad muy buena con poca carga cognitiva para

el usuario y sin aburrirlo o que se desinterese. Se implemento una

ventana modal para que recurran a ver los datos del que desarrollo

la web y la intención de esta.

El uso y combinación de esto y algo de diseño web dieron lugar a

esto en un lapso pequeño lo cual se considera factible hasta cierto

punto por los usuarios que la probaron y dieron su comentario o

experiencia.

Requisitos del entorno

Se requiere acceder a la web claramente mediante un navegador,

pero también se tiene un Webview en Android para los que tengan

navegadores obsoletos en dispositivos un tanto viejos o con poca

memoria.

Se configuro de tal manera que funcione y sea presentable en

cualquier dispositivo, pero como siempre se pueden presentar

excepciones o casos aislados.

Requisitos de usabilidad

La web se hizo de tal manera que cumpla con las reglas mínimas de

UX y UI para el correcto uso y evite que el usuario la deje o se

sature, minimalista pero notoria en ciertos lugares para llamar la

atención también se manejo colores amigables que inciten al

usuario a seguir leyendo sin que se canse o pierda la atención.

Diseño

Cuenta con 8 secciones o divisiones donde se maneja información,

historia, tutoriales, hacer de la web y sobre el desarrollador que la

hizo, definiciones y un Quiz o encuesta.

Inicio.- Muestra que herramientas se usan generalmente algo de

información y enlaces a su web de cada una de estas.

Demos.- Se muestras algunas imágenes de algunos demos que

están teniendo mucho impacto en el mundo.

Definición.- Que es RA? Muestra información general básica que se

debe saber y entender para después profundizar en este tema a

futuro.

Quiz Acerca de…

Historia.- Se muestra la historia y no solo de hace

aproximadamente 50 años, nos vamos mas atrás sus inicios, se

incluyen imágenes de hace mas de un siglo.

Sobre Mi.- Aquí se muestra información del desarrollador y creador

de la pagina web orientada a la introducción y educación sobre esta

tecnología.

VideoTutoriales.- Aquí se ven videos dirigidos al inicio, desarrollo y

diseño básico es aprendizaje desde cero, para gente que quiera

aprender y tenga las ganas de aparte ser autodidacto(Algunos

videos no son de mi autoría pero considere que son bastante

perfectos para entender y hacer.).

Quiz.- Aquí se pone a prueba el usuario si aprendió algo en el texto

que se presentó en las diferentes pestañas también sirve para ver si

hay que mejorar el diseño y la forma como presentamos la

información ya que si no es interesante o llamativa no leerá ni se

quedara en la web.

Acerca de… .- Aquí se abre una ventana modal donde muestra

información acerca de la web, el desarrollador, y el motivo de

porque se hizo.

Realidad Aumentada

Inicio Demos Definicion Historia Sobre mi.. Videos

Implementación

Inicio.-

Se muestra un inicio limpio y sencillo pero moderno que

atrae y no confunde ni es difícil de procesar para el

usuario.

Demos.-

Aquí se ven imágenes de prototipos hechos en realidad aumentada

que han destacado o innovando y siguen desarrollo esto y mas se

puede lograr si se enfoca el usuario y sigue aprendiendo.

Que es RA?.-

Aquí se ve una definición sencilla y rápida de entender con

imágenes y sus características, son mas esenciales, fácil de

entender, sencillo y no tan cargado de información o colores.

Historia.- Aquí se muestra la sencilla forma de mostrar y formatear

informacion rápida y sin tantos temas que no son necesarios aun,

se muestran unas imágenes referentes a sus inicios de la realidad

virtual que después nace la aumentada, ambas vienen juntas.

Sobre mi.- Aquí se muestra la info del que diseñó e hizo la web para

poder dejar más sencilla la información relacionada a la

introducción y desarrollo de realidad aumentada todo en un mismo

sitio, historia, información y videotutoriales.

También se incluyo información académica y vínculos de redes

sociales y youtube.

VideoTutoriales.- Aqui es la seccion de Video donde se

direcciona al usuario a empezar las practicas básicas para desarrollo

de realidad aumentada algunos son mas avanzados pero todos son

faciules de entender siempre y cuando primero veamos los

básicos.

Acerca de…-

Aquí esta la información destacada como una imagen una

animación y algo de información del desarrollador y el motivo del

proyecto.