INSTITUTO TECNOLÓGICO SUPERIOR
QUITO METROPOLITANO
PROYECTO FINAL DE LA ASIGNATURA
APLICACIONES MOVILES I
DOCENTE
ALUMNO:
CRISTHIAM ANTONIO SABANDO PALMA
ABRIL – SEPTIEMBRE 2024
OBJETIVO DE LA ASIGNATURA
Evaluaciones sobre proyectos de aplicación practica
PLANTEAMIENTO DEL PROBLEMA
En el mercado actual de componentes para PC gamer, los consumidores enfrentan dificultades para encontrar
productos adecuados debido a la saturación de opciones y la falta de información clara en las plataformas de
venta online. Esto genera frustración y decisiones de compra poco informadas. Existe la necesidad de una
página web que ofrezca no solo una amplia selección de productos de calidad, sino también guías de compra,
reseñas de expertos y recomendaciones personalizadas para facilitar la experiencia del usuario y optimizar
sus configuraciones de PC.
OBJETIVOS GENERALES
• Desarrollar y Distribuir Videojuegos de Alta Calidad:
• Crear videojuegos innovadores que atraigan a una amplia audiencia.
• Asegurar que cada videojuego tenga múltiples copias disponibles para satisfacer la demanda
del mercado.
• Planificación del Diseño de la Página Web:
• Identificar Necesidades del Usuario: Comprender las necesidades y preferencias de los
usuarios para diseñar una experiencia de usuario intuitiva y atractiva.
• Definir la Estructura del Sitio: Establecer una estructura clara y lógica para la página web
que facilite la navegación y el acceso a la información.
• Seleccionar Herramientas y Tecnologías: Elegir las herramientas de desarrollo web y
tecnologías adecuadas para crear una página web eficiente y escalable.
• Desarrollar Contenido Atractivo: Crear contenido relevante y atractivo que destaque los
videojuegos de la empresa y fomente el interés de los visitantes.
• Implementar Estrategias de SEO: Optimizar la página web para mejorar su visibilidad en
los motores de búsqueda y atraer más tráfico.
OBJETIVOS ESPECÍFICOS
• Mejorar la Estructura de la Información:
• Diseñar una arquitectura de la información clara y organizada que facilite a los usuarios
encontrar rápidamente lo que buscan en la página web.
2
• Implementar sistemas de categorización y etiquetado para optimizar la navegación y el acceso
a contenidos relevantes.
• Optimizar el Rendimiento de la Página Web:
• Reducir los tiempos de carga mediante la optimización de imágenes, scripts, y el uso de
tecnologías de caché.
• Utilizar redes de entrega de contenido (CDN) para mejorar la velocidad de acceso a la página
desde diferentes ubicaciones geográficas.
• Integrar Soluciones de Análisis de Datos:
• Incorporar herramientas de análisis web para monitorizar el comportamiento del usuario y
obtener insights sobre el tráfico y las interacciones en el sitio.
• Utilizar estos datos para ajustar y personalizar el contenido, mejorando así la experiencia del
usuario.
• Garantizar la Seguridad y Privacidad de los Datos:
• Implementar protocolos de seguridad como HTTPS, firewalls, y sistemas de detección de
intrusiones para proteger la página web contra amenazas.
• Asegurar el cumplimiento con regulaciones de privacidad de datos, como el GDPR, para
proteger la información del usuario.
• Facilitar la Actualización y Mantenimiento del Contenido:
• Desarrollar un sistema de gestión de contenido (CMS) que permita a los administradores
actualizar y modificar el contenido fácilmente sin necesidad de conocimientos técnicos
avanzados.
• Automatizar procesos de copia de seguridad y recuperación de datos para mantener la
integridad del contenido.
• Promover la Accesibilidad y Usabilidad:
• Diseñar la página web para que sea accesible a personas con discapacidades, cumpliendo con
los estándares de accesibilidad web (WCAG).
• Realizar pruebas de usabilidad para identificar y corregir posibles obstáculos en la
experiencia del usuario.
3
¿Qué es una página web?
Una página web es un documento digital que se presenta en un navegador web y
que forma parte de un sitio web. Está escrita en lenguajes de marcado como HTML,
CSS, y JavaScript, y puede contener texto, imágenes, videos, enlaces, y otros
elementos multimedia. Las páginas web están diseñadas para ser visualizadas en
Internet y son accesibles a través de una URL única. Cada página web puede ser
parte de un sitio web más grande, conectado por enlaces para facilitar la navegación
entre las distintas páginas del sitio.
¿Qué es HTML?
HTML, que significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el
lenguaje estándar utilizado para crear y estructurar el contenido en la web. Es un lenguaje de
marcado que utiliza etiquetas para organizar y dar formato a texto, imágenes, enlaces, y otros
elementos en una página web. Estas etiquetas indican a los navegadores cómo mostrar y estructurar
el contenido para los usuarios.
Características Principales de HTML:
1. Estructura de Documento:
o HTML define la estructura de una página web utilizando una serie de etiquetas anidadas
dentro de una estructura básica que incluye <html>, <head>, y <body>.
2. Etiquetas y Atributos:
o Las etiquetas son comandos que definen elementos en la página. Ejemplos comunes incluyen
<p> para párrafos, <h1> para encabezados, <a> para enlaces, y <img> para imágenes.
o Los atributos son propiedades adicionales que proporcionan información sobre las etiquetas,
como href para especificar la URL de un enlace o src para la fuente de una imagen.
3. Hipertexto:
o HTML permite crear enlaces entre páginas web, formando una red de documentos
interconectados que los usuarios pueden navegar.
4. Semántica:
o HTML5 introdujo etiquetas semánticas como <header>, <footer>, <article>, y
<section>, que ayudan a describir el propósito del contenido, mejorando la accesibilidad y
SEO.
5. Compatibilidad:
o HTML es compatible con todos los navegadores web, lo que permite que las páginas creadas
sean accesibles en cualquier dispositivo con acceso a Internet.
¿Qué es CSS?
4
CSS, que significa Cascading Style Sheets (Hojas de Estilo en Cascada), es un lenguaje de estilo
utilizado para describir la presentación visual de documentos HTML. Mientras que HTML
proporciona la estructura de una página web, CSS se encarga de su apariencia, permitiendo separar el
contenido de su diseño visual.
Características Principales de CSS:
1. Estilización de Elementos:
o CSS permite aplicar estilos como colores, fuentes, márgenes, y bordes a los elementos HTML
para mejorar la apariencia visual de una página web.
2. Diseño y Distribución:
o Facilita el control del diseño de una página mediante propiedades de diseño como flexbox,
grid, float, y position, permitiendo la creación de diseños complejos y responsivos.
3. Responsividad:
o CSS es esencial para crear sitios web responsivos que se adapten a diferentes tamaños de
pantalla, utilizando media queries para aplicar diferentes estilos según el dispositivo.
4. Selectores y Cascada:
o Utiliza selectores para aplicar estilos a elementos específicos o grupos de elementos. La
"cascada" se refiere al método por el cual se aplican múltiples reglas de estilo, determinando
qué estilo prevalece cuando hay conflictos.
5. Reusabilidad y Mantenimiento:
o CSS permite separar el diseño del contenido, lo que facilita la reutilización de estilos y el
mantenimiento del código, especialmente en sitios web grandes.
6. Animaciones y Transiciones:
o CSS permite crear animaciones y transiciones suaves que mejoran la experiencia del usuario
al interactuar con una página web.
¿Qué es DOM?
El DOM (Document Object Model), o Modelo de Objetos del Documento, es una interfaz de
programación para documentos web. Proporciona una representación estructurada del documento
(como una página HTML o XML) y define cómo los programas pueden acceder y manipular su
estructura, estilo, y contenido.
Características Principales del DOM:
1. Estructura en Árbol:
o El DOM representa el documento como un árbol de nodos, donde cada nodo corresponde a
una parte del documento, como un elemento, atributo, o texto.
2. Acceso Programático:
o Permite a los lenguajes de programación, como JavaScript, acceder y modificar
dinámicamente el contenido, estructura, y estilo de una página web.
3. Manipulación Dinámica:
o Los desarrolladores pueden agregar, eliminar o cambiar elementos y contenido en la página
sin necesidad de recargar la página completa, lo que permite crear experiencias interactivas y
dinámicas.
4. Eventos y Reacciones:
5
o El DOM permite gestionar eventos (como clics, desplazamientos, o cambios de entrada) y
definir reacciones a esos eventos mediante el uso de controladores de eventos.
5. Compatibilidad con Estándares:
o Es un estándar definido por el W3C que asegura la interoperabilidad entre diferentes
navegadores web.
6. Interactividad:
o Gracias al DOM, los desarrolladores pueden crear aplicaciones web interactivas que
responden a las acciones del usuario, mejorando la experiencia general del usuario.
¿Qué es json y para que se usa?
JSON (JavaScript Object Notation) es un formato de intercambio de datos ligero y fácil de leer y
escribir para los humanos, y fácil de analizar y generar para las máquinas. JSON es ampliamente
utilizado para transmitir datos entre un servidor y un cliente en aplicaciones web, y es compatible
con muchos lenguajes de programación.
Características Principales de JSON:
1. Formato de Texto:
o JSON es un formato de texto que representa datos estructurados en pares clave-valor.
2. Estructura Simple:
o JSON utiliza una sintaxis clara y sencilla basada en pares de nombres y valores, y soporta
estructuras como objetos ({}), arreglos ([]), cadenas de texto, números, valores booleanos
(true/false), y null.
3. Compatibilidad con JavaScript:
o JSON se basa en la notación de objetos de JavaScript, lo que facilita su uso en aplicaciones
web donde JavaScript es el lenguaje principal para la manipulación del DOM.
4. Legibilidad:
o La sintaxis de JSON es compacta y fácil de leer, lo que lo hace accesible tanto para humanos
como para máquinas.
5. Intercambio de Datos:
o JSON es comúnmente usado para intercambiar datos entre el servidor y el cliente en
aplicaciones web, y para almacenar datos de configuración en archivos.
{ "nombre": "Juan", "edad": 30, "casado": true, "hijos": [ { "nombre": "Ana", "edad": 10 }, { "nombre":
"Luis", "edad": 8 } ] }
Usos Comunes de JSON:
1. Comunicación entre Servidores y Clientes:
o JSON se usa para enviar datos desde un servidor web a una aplicación cliente (por ejemplo,
en una solicitud AJAX) y viceversa.
2. Configuración de Aplicaciones:
o JSON se utiliza para almacenar configuraciones y preferencias de aplicaciones en archivos de
configuración.
3. Intercambio de Datos entre Aplicaciones:
6
o JSON es un formato común para intercambiar datos entre diferentes sistemas y plataformas
debido a su simplicidad y legibilidad.
4. Almacenamiento en Bases de Datos NoSQL:
o Algunos sistemas de bases de datos NoSQL, como MongoDB, utilizan JSON (o formatos
almacenar datos
7
8
5.1. MODELO HTML
MODELO CSS
9
CONCLUSIONES
Gracias a este análisis de datos nos permitió el análisis total de los datos que hemos
puesto como ejemplo por nosotros. Es necesario hacer mas ejercicios para poder
entender de manera correcta de que manera se relacionan cada ID de los objetos.
RECOMENDACIONES
1. HTML (HyperText Markup Language):
o Fundamental para la Web: HTML es el lenguaje de marcado estándar para crear y
estructurar contenido en la web. Proporciona la base sobre la cual se construyen todas las
páginas web.
o Estructura en Árbol: Organiza el contenido en una estructura jerárquica mediante etiquetas
que definen elementos como párrafos, encabezados y enlaces.
o Compatibilidad: HTML es universalmente compatible con todos los navegadores web,
asegurando que las páginas sean accesibles en cualquier dispositivo.
2. CSS (Cascading Style Sheets):
o Diseño y Estilo: CSS se utiliza para aplicar estilos y formatos a los elementos HTML,
mejorando la apariencia visual de una página web.
o Responsividad y Diseño: Permite crear diseños responsivos que se adaptan a diferentes
tamaños de pantalla y dispositivos.
o Separación de Contenido y Estilo: Facilita la separación del contenido (HTML) del diseño
(CSS), lo que mejora la organización y el mantenimiento del código.
3. DOM (Document Object Model):
o Representación del Documento: El DOM proporciona una representación estructural del
documento web, permitiendo a los lenguajes de programación acceder y manipular su
contenido y estructura.
o Interactividad: Permite la creación de aplicaciones web interactivas mediante la gestión de
eventos y la manipulación dinámica del contenido.
4. JSON (JavaScript Object Notation):
o Intercambio de Datos: JSON es un formato ligero y fácil de leer para el intercambio de datos
entre servidores y clientes, y es compatible con numerosos lenguajes de programación.
o Estructura Simple: Utiliza una estructura basada en pares clave-valor y arrays, lo que facilita
su comprensión y manipulación.
o Versatilidad: JSON se usa comúnmente para almacenar configuraciones, intercambiar datos
entre aplicaciones y en bases de datos NoSQL.
Resumen General:
• HTML proporciona la estructura básica de las páginas web, CSS define su apariencia, y el DOM
permite la manipulación dinámica del contenido.
• JSON facilita la comunicación de datos entre servidores y clientes, así como el almacenamiento de
configuraciones y datos en aplicaciones y bases de datos.
10
BIBLIOGRAFÍA
Coronel, C. &. (2014). Salvaguarda y seguridad de los datos: administración de bases de datos
(UF1473). Cengage Learning. Obtenido de
https://elibro.net/en/lc/itsqmet/titulos/113642
• Agut, R. M. (2001). Especificación de Requisitos Software
según el estandar IEEE 830. Janume: Departament
d’Informàtica Universitat Jaume I.
• Center, P. (10 de Diciembre de 2021). PTV Center.
Obtenido de PTV Center:
https://www.tpvcenter.com/como-funciona-caja-
registradora/
• GCFGlobal. (s.f.). GCFGlobal. Obtenido de
GCFGlobal: https://edu.gcfglobal.org/es/educacion-
virtual/crear-material-de-clase- interactivo/1/
• Know, K. (18 de 1 de 2023). Digital Guide IONOS. Obtenido
de Digital Guide IONOS:
https://www.ionos.mx/digitalguide/servidores/know-
how/que-es-
mysql/#:~:text=MySQL%20es%20un%20sistema%20de,por%
20ejemplo%2C% 20WordPress%20y%20TYPO3.
• ORACLE. (s.f.). Oracle Cloud Infrastructure (OCI).
Obtenido de Oracle Cloud Infrastructure (OCI):
https://www.oracle.com/mx/cloud/
• VAzquez, J. (2020). Instituto Nacional de Tecnologias
educativas y de formacion del profesorado. Madrid:
MINISTERIO DE EDUCACIÓN Y FORMACIÓN
PROFESIONAL. Obtenido de Instituto Nacional de
TAcnologias educativas y de formacion del profesorado.
11
