Reporte de página html5 Tecnologías de la Información y...

11

Transcript of Reporte de página html5 Tecnologías de la Información y...

Page 1: Reporte de página html5 Tecnologías de la Información y ...tutorias.utpuebla.edu.mx/tics/planeacion_2017/examenes/... · Para los controles de interacción se agregó la parte
Page 2: Reporte de página html5 Tecnologías de la Información y ...tutorias.utpuebla.edu.mx/tics/planeacion_2017/examenes/... · Para los controles de interacción se agregó la parte

Reporte de página html5

Tecnologías de la Información y Comunicación

Desarrollo de aplicaciones III

Alumno: Jorge Placeres García

5° “G”

Cuatrimestre Enero – Abril 2017

Page 3: Reporte de página html5 Tecnologías de la Información y ...tutorias.utpuebla.edu.mx/tics/planeacion_2017/examenes/... · Para los controles de interacción se agregó la parte

Introducción

Se desea crear una página web que brinde el servicio de

entretenimiento ya sea viendo tráiler de películas, viendo películas o el

obtener datos interesantes como lo son las principales productoras de

las películas en la actualidad.

Estructura

Page 4: Reporte de página html5 Tecnologías de la Información y ...tutorias.utpuebla.edu.mx/tics/planeacion_2017/examenes/... · Para los controles de interacción se agregó la parte

Para el desarrollo de esta página web usaremos la estructura básica

de HTML5 como se muestra en la siguiente imagen:

Así lucirá esta estructura en la página

Page 5: Reporte de página html5 Tecnologías de la Información y ...tutorias.utpuebla.edu.mx/tics/planeacion_2017/examenes/... · Para los controles de interacción se agregó la parte

Elementos de navegación

Etiqueta <nav> o menú de navegación

La etiquta nav se uso con el fin de tener un menu vertical para facilitar la nevagacion de las

multiples paguinas del sitio de una forma facil y sencilla de hubicar como se muestra a

continuacion.

Controles HTML para la interacción

Para los controles de interacción se agregó la parte de logueo o registro en la página

agregando dos formularios

Page 6: Reporte de página html5 Tecnologías de la Información y ...tutorias.utpuebla.edu.mx/tics/planeacion_2017/examenes/... · Para los controles de interacción se agregó la parte

Código

Página donde se registra

Edición de elementos multimedia

Video

Para tener una página más llamativa y con la finalidad de que resalte el contenido se

agregaron videos como en el caso de la página trailers y películas ya hechos por las

productoras así como un video propio para la sección Nosotros

Page 7: Reporte de página html5 Tecnologías de la Información y ...tutorias.utpuebla.edu.mx/tics/planeacion_2017/examenes/... · Para los controles de interacción se agregó la parte

Manejo de información dinámica

Base de datos

Para la página se requirió una base de datos para agregar las películas junto con parte de

su información como lo es su género y su nacionalidad

Y se uso es siguiente script para crear la base de datos

Page 8: Reporte de página html5 Tecnologías de la Información y ...tutorias.utpuebla.edu.mx/tics/planeacion_2017/examenes/... · Para los controles de interacción se agregó la parte

Hojas de estilo

Las hojas de estilo se usaron principalmente para que toda la página tenga un mismo

formato en cuanto a la estructura, la barra de navegación tipo de fuente etc.

Como se observa se utilizaron 2 hojas de estilo cada una con un fin diferente

Estilo

Page 9: Reporte de página html5 Tecnologías de la Información y ...tutorias.utpuebla.edu.mx/tics/planeacion_2017/examenes/... · Para los controles de interacción se agregó la parte

Estilo 1

El estilo uno es el que da formato de letra, comportamiento del ratón, así como color y fondo

de la página.

Código JavaScript

El código JavaScript que se uso fue utilizado para hacer una galería de imágenes móvil con

el fin de mostrar algunas de las películas más esperadas en la página.

Page 10: Reporte de página html5 Tecnologías de la Información y ...tutorias.utpuebla.edu.mx/tics/planeacion_2017/examenes/... · Para los controles de interacción se agregó la parte

El código anterior se utiliza para una galería de imágenes

Y se utiliza

Page 11: Reporte de página html5 Tecnologías de la Información y ...tutorias.utpuebla.edu.mx/tics/planeacion_2017/examenes/... · Para los controles de interacción se agregó la parte

Publicación del sitio

Par la publicación del sitio se usó la página hostinger para tener un dominio en la web y

subir todos los archivos y crear las bases de datos de nuevo pero en hostinger