Embed Size (px)
Citation preview
MEMORIA DE PROYECTOCURSO HTML5, CSS3 Y JAVASCRIPT
-
JORGE ANDRES TAMAYO RODRIGUEZ2017
INTRODUCCIÓN
A través del tiempo las comunicaciónes han evolucionado a la par con la tecnolo-gía. La infomación ha pasado de atravesar canales que se dilataban en el tiempo a compartir una noticia en menos de un minuto.
Publicamos la información que nos parece relevante en multitud de formatos y sopor-tes digitales que se mantienen a la vista del mundo online por tiempo indefinido, al alcance de todo aquel que tenga acceso a conexión a internet.
Esta facilidad para acceder a la informa-cón a nivel mundial genera la necesidad de encontrar espacios en común, de fácil acceso, intuitivos y de cómoda actualiza-ción tanto para el usuario como para el generador de contenido. Dentro del univer-so online, es inevitable formar parte de la vertiginosa corriente que nos mantiene al dia con los sucesos mundiales.
MOTIVACIÓN
Generar un sitio de fácil navegacion, el cual pueda adaptarse a varios própositos y te-niendo en mente la experiencia de usuario.
ESTUDIO DE MERCADO
El mundo de los comics es un universo donde todos los días personajes se en-cuentran con nuevos desafíos entre las pá-ginas de un nuevo ejemplar, causando furor entre los aficionados, llevandonos a salas de cine a ver sus aventuras y mantenernos a la expectativa de nuevas actualizaciones. Son centeneares de historias que todas las semanas se actualizan, haciendo dificil el seguimiento de las mismas.
Encontrando una falta notable de un espa-cio que las grandes lineas de comics com-partieran y donde los aficionados pudieran encontrar de forma fácil toda la informa-ción relevante, se crea un ámbito de na-vegación intuitiva, donde se destacan las publicaciones más relevantes y se facilita el acceso las mismas.
La mayoría de los sitios existentes que hablan de los personajes del mundo de los comics, suelen derivarse en opiniones acerca de juegos, peliculas y tecnología. El sitio que se desarrolla en este trabajo es especificamente de comics y publicaciones editoriales (digitales o en papel) lo cual permite generar un sitio especializado en el
ARQUITECTURA DE LA APLICACIÓN
Explicación y finalidad del proyecto
El objetivo es brindar una página web para contenidos sencillos en formato galería y con una página de detalle para las publicaciones. Se toman los destacados de las tres compañías editoriales más grandes de comics, exponiendolos en formato de galería con un detal-le donde se explica un resumen del contenido, datos de la publicación, una puntuación y un botón para visitar la página de la editorial.
Tecnología Usada: HTML5 CSS3 javascript jquery Procesador SASSEstructuración y navegación del Site
Home Slide 1 BienvenidaMenú Navegación con formulario de contacto (presente en todo el site) Slide 2 Sección 1 MARVEL Galería inicialmente de 6 objetos Detalle Objeto Link fuera del Site (Editorial) Slide 3 Sección 2 DC Galería inicialmente de 6 objetos Detalle Objeto Link fuera del Site (Editorial)
Slide 4 Sección 3 IMAGE Galería inicialmente de 6 objetos Detalle Objeto Link fuera del Site (Editorial)
Diagrama de Flujo
Wireframe - Home
La web se divide en tres niveles: Home, Galerías y Detalle. En cada una de las páginas de cada nivel existe un menú de
navegación a las 4 secciones principales y un formulario de contacto.
En el Home se encuentran las 4 secciones principales que para el ejemplo actual se dividen en Bienvenida, Sección 1 MARVEL
WEEK, Sección 2 DC Week y Sección 3 IMAGE WEEK.
La presentación divide la página de index en cuatro slides con un logotipo represen-tativo y un cubo contenedor para la infor-mación de cada sección.
Wireframe - Galeria
Dentro del contenido de información se encuentran los accesos a la galería y a las difer-entes redes sociales de la sección.
Una vez dentro de la galería esta se muestra en un módulo contenedor de 6 “productos” con su respectivo título e imagen de pre visualización. Este módulo puede repetirse las vec-es que sea necesario de acuerdo a la cantidad de contenido.
Wireframe - Producto
Cada producto es un hipervínculo que nos lleva al detalle del mismo.
En el detalle encontramos el título del producto, la imagen principal, resumen del conteni-do, valoración y un hipervínculo que en este caso nos lleva a la página de la editorial de la publicación.
PROBLEMAS Y SOLUCIONES
Diseño del cubo
Problema: Conseguir las posiciones en tercera dimensión del cubo y los elementos contenidos en las caras del mismo.
Solución: Utilizar la propiedad de perspecti-va para el contenedor del cubo, simulando la forma en tres dimensiones.
Animación del cubo
Problema: Integrar el movimiento del cubo con el slide de fondo
Solución: Código de Javascript que ata los eventos de scroll y las flechas de teclado en forma independiente entre el slide y el cubo
MEJORAS A FUTURO
Aplicación de funciones de php con el obje-tivo de dinamizar la actualización de con-tenidos en formá rapida, intuitiva y funcion-al, integrando bases de datos para tal fin.
Responsive Home
Problema: Necesidad de separar y reubicar los elementos de la estructura tridimen-sional.
Solución: Modificación del HTML a través del CSS, en conjunto con una función de Javascript que detiene la animación del cubo en un ancho determinado del navegador.
Conflicto entre funciones de Javascript
Problema: Al tener un Javascript con varias funciones que apuntan al mismo objeto en distintas oportunidades, se generan con-flictos entre si.
Solución: Revisar el encadenado de las funciones de javascript, buscando las variables o funciones que generaban con-flictos, editandolas para hacer la aplicación estable.
BIBLIOGRAFÍA
https://www.w3schools.com/http://stackoverflow.com/https://codepen.io/https://jquery.com
