re.Viewer-prototype

Documentation version 1.0

Introducción

re.Viewer-prototype es un proyecto realizado con HTML5, CSS3 y vanilla JavaScript, el mismo es una página web para consulta de películas y series las cuales se obtienen desde una API externa (TMDB – The Movie Database)

Organización

La metodología usada en este proyecto es SCRUM.

Equipos SCRUM:

  1. Product Owner: Gabriel Augusto Rotger, José María Lanza.
  2. SCRUM Master: José María Lanza.
  3. Dev Team: Gabriel Augusto Rotger, José María Lanza.

Epicas

Requisitos

NAVBAR

En la barra de navegación va a ver un logo que al hacerle click nos redirigirá al HOME, a continuación, habrá un botón HOME con la misma funcionalidad, un botón PELÍCULAS, SERIES, un ABOUT y un botón CONTACT.

HOME

Un usuario (cualquiera) ingresa a la página y puede visualizar en el HOME un campo en el que puede escribir el nombre de una película y la web lo filtrará. Podrá también navegar en la página y consultar las películas y series más populares, en tendencia, por año de estreno, etc. Además, podrá consultar en la sección episodios los últimos capítulos disponibles.

Por último, el usuario podrá ingresar a los detalles de una película haciendo click en esta.

MOVIE/SERIE VIEW

El usuario al realizar click en PELÍCULAS/SERIES lo re direccionará a una VISTA en la que se puede visualizar todas las películas/series paginadas, pero con un máximo de 50 por página.

Click on pagination

Al hacer click el sistema deberá cargar las películas/series correspondientes, por ejemplo, en el caso en el que existan 500 películas/series las cuales sus ID vayan del 1 al 500, el usuario al hacer click en la página 5 se carguen las 50 películas/series cuyo ID vayan desde el 200 al 250. Las películas/series que ya se cargaron anteriormente, permanecerán en el LOCAL STORAGE para su rápida consulta.

MOVIE DETAILS VIEW

Tanto en la vista HOME como en PELÍCULAS, se puede ver una lista de éstas con las cuales se puede interactuar, al hacerlo se mostrarán sus detalles junto a un reproductor.

SERIE DETAILS VIEW

Al igual que la interacción con las películas, al ingresar a una serie se podrán ver sus detalles, pero estos serán significativamente diferentes, ya que, en lugar de encontrarse directamente con un reproductor, se podrá visualizar sus detalles junto a una lista de las temporadas, las cuales a su vez contendrán la lista de sus capítulos correspondientes. Al ingresar a un capítulo se mostrará el reproductor al igual que en las películas.

FOOTER

El footer solo será informativo.

Casos de Uso

Contact

Los datos enviados por el usuario en el formulario de contacto se procesan antes de ser redirigidos.

Home

Context

Diagrama de contexto de la aplicación web del lado del cliente (Home view).

Level 0

En el momento de ingresar a la vista HOME, se muestran datos de las películas y series provenientes de la API para que el usuario pueda navegar.

Level 1

Tanto como cuando el usuario ingresa en la vista HOME, DETAILS o específicamente realice un request, la aplicación procesará los datos obtenidos de la API.

Movie/Serie

Context

Se genera una petición y una respuesta de acuerdo a la interacción del usuario.

Level 0

Por cada click en un número de paginación nos retornara una nueva vista.

Level 1

El proceso de petición generado al realizar click en paginación (nombrado anteriormente) obtendrá un listado de 20 películas/series.

Details

Context

Se gestiona/desarrolla la solicitud que retornará los datos requeridos.

Level 0

Al momento de ingresar al detalle el usuario ya tiene a su disposición los datos proporcionada por la API y obtenidos a través del Manage request.

Backlog

A continuación se detallan las épicas obtenidas de realizar los diagramas de casos de uso junto con otras épicas las cuales no fue necesario un diseño previo.

  1. Redirects
      2. Redirect to HOME.
      Redirect to ABOUT.
      Redirect to CONTACT.
      Redirect to MOVIES.
  2. Creating informatives
      3. ABOUT view.
      FOOTER element.
  3. Frontend definition and rules
      4. Define Mockup.
      Define HTML tags.
      Define HTML structure (BEM).
  4. Contact view creation
      5. View design
      Form Creation
  5. Contact classes creation
      6. Fields Validations.
  6. Intermediaries classes
      7. Request Manager
  7. Identify System entities
  8. Entity Diagram Design
  9. Sequence Diagram Design
  10. Class Diagram Design
  11. Documentation

Sprint Backlogs

Épicas por orden de prioridad.

Sprint 0

  • Miembros: José María Lanza, Gabriel Augusto Rotger
  • Entregable: Documentación.
  • Fecha límite: 17/10/2020 05:00pm.
  • Observación: Cambiada fecha límite de 17/10/2020 10:00am a 21/10/2020 05:00pm
  • Backlog:
    1. Identify system entities.
    2. Entity diagram design.
    3. Make documentation.

Arquitectura y diseño del sistema

La arquitectura usada en la aplicación web es MVC, para representarla se hace uso de diagramas de casos de uso (detallados en el apartado Épicas, a continuación de los requisitos del sistema), de entidades, de secuencia y de clases. A continuación, se detallan estos tres últimos:

Diagrama de entidades

La aplicación como ya se mencionó usa arquitectura MVC como se puede observar en la siguiente imagen.

Diagrama de secuencia

Diagrama de secuencia global para la comunicación entre las vistas y la API

Diagrama de clases

El siguiente diagrama de clases muestra la interacción entre los controladores y los modelos por medio de una clase intermedia la cual procesa peticiones.

Files & Sources

Included Stylesheets

These are the primary CSS files used for general front-end styling. Use these to customize your theme even further. All included JavaScript codes under yourthemename/css/

  • 1. style.css - Primary stylesheet
  • 2. bootstrap.css - Bootstrap stylesheet
  • 3. owl-carousel.css - OWL Carousel
  • 4. fontawesome.css - FontAwesome Font Icons stylesheet
  • 5. custom.css - Pathos Color Schemes stylesheet
  • 6. prettyPhoto.css - Lightbox effect css file
  • 7. flexslider.css - Flexslider css file
  • 8. et-line.css - Elegant icons css file
  • 9. carousel.css - OWL Carousel css file
  • 10. animate.css - CSS3 animations css file
Included JavaScript

These are the various attribution inks to the Javascript files included or modified to work with in this theme. All included JavaScript codes under yourthemename/js/

  • 1. bootstrap.js - Bootstrap JavaScript
  • 2. custom.js - All JavaScript Plugins
  • 3. retina.js - Retina JavaScript
  • 4. jquery.js - Base JavaScript
  • 5. prettyPhoto.js - Lightbox JavaScript
  • 6. owl-carousel.js - Lightbox JavaScript
  • 7. revslider.js - Revolution Slider JavaScript
  • 8. flexslider.js - Flexslider JavaScript
  • 9. awesome-grid.nin.js - Awesome grid portfolio JavaScript
  • 10. circle.js - Coming soon page JavaScript
  • 11. contact.js - Contact form validate JavaScript
  • 12. isotope.js - Masonry Portfolio JavaScript
  • 13. progress.js - Progress bar JavaScript
  • 14. rotate.js - Text rotate effect JavaScript
  • 15. wow.js - CSS3 animation JavaScript

Version History (Changelog)

You can find the version history (changelog.txt) file on yourthemename-full.zip folder or you can check changelog on theme sale page.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Changelog


                                        -----------------------------------------------------------------------------------------
                                        Version 3.8.4 - May 7th, 2015
                                        -----------------------------------------------------------------------------------------

                                        - new revolution slider plugin version
                                        - fixed security issue with xss vulnerability
                                        - improved demo importer for certain server environments
                                        - updated WooCommerce template files for the outdated message in system status
                                        - added suhosin check in system status 
                                        - added information that explains ZipArchive is required on your server for importing demos 
                                        - portfolio Grid template improvement
                                        - added more information to demo popup message for individual demo requirements
                                        - RTL style improvements
                                        - breadcrumb function improved for various areas

                                        -----------------------------------------------------------------------------------------
                                        Version 3.8.3 - May 7th, 2015
                                        -----------------------------------------------------------------------------------------
                                        - fixed responsive / retina issue for larger logos
                                        - fusion slider now uses responsive headings all the time
                                        - dropped custom Avada styles for select boxes in IE since it is not supported
                                        - fixed compatibility issue with Category Order and Taxonomy Terms Order plugin
                                        - fixed issue of full width background being affected by padding options
                                        - tested and fixed hellobar issue 
                                        - typography settings now apply to single post pages
                                        - improved smooth scroll in certain situations
                                        - youtube & vimeo videos will show at normal size in light box as long as video embed link is not used
                                        - fixed issue of “fixed” featured image mode not working for carousels / recent work
                                        - fixed issue of header tagline font not working with font options

                                        -----------------------------------------------------------------------------------------
                                        Version 3.8.2 - May 7th, 2015
                                        -----------------------------------------------------------------------------------------
                                        - fixed formatting issues with Turkish language files 
                                        - letter spacing menu option improvement
                                        - improved fusion slider max content width setting
                                        - removed the “disable first featured image on products” setting since it does not apply
                                        - improved portfolio featured image loading
                                        - removed encoding from tracking code, space before head, space before body, and custom CSS to stop it from parsing code within TO and removing special characters e.g. +
                                        - woo login box now shows login fields for logged out users
                                        - woo cart / my account links now show on mobile 
                                        - fixed button styling issue with gravity forms

Copyright and license

Code released under the Un License License.

For more information about copyright and license check choosealicense.com.