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.