1

CREAR EL DISEÑO DEL SITIO WEB Y/O MÓVILES UTILIZANDO SUS COMPONENTES
Y TECNOLOGÍAS RESPECTIVAS

APRENDIZ

JHON ALEJANDRO SALAZAR RESTREPO

INSTRUCTOR
INGENIERO, ALEJANDRO ZABALA DIAZ

SENA
CENTRO DE COMERCIO – REGIONAL ANTIOQUIA
TECNOLOGIA EN ANALISIS Y DESARROLLO DE SOFTWARE – FICHA 26758.4

BOGOTA, COLOMBIA 2023

 2

Abstract

Today, thanks to the advancement of technologies such as wireless networks, devices

Mobile phones are used with increasing frequency by the general public, in various

activities, the benefit of access to the web being of great importance. However, in

In relation to this, there is a great contradiction: the vertiginous growth of the use of

mobile devices and, on the other hand, minimal access to the Web by mobile devices.

Currently, the graphic designer is helping to define the visual environment of the 21st
century, where specific topics like this are not left out; Because of this, the professional
must be capable of creating a web page with the necessary arguments to identify and
redirect the user to an adapted version of the content, both for a desktop computer

as for a mobile, managing the concept of a single website

 3

TABLA DE CONTENIDOS pág.

Capítulo 1. Introducción…………………………………….....……….…………............4

Referencias………………………………………………………………………………..8
 4

Capítulo 1.
Introducción al tema

Mockflow es un software wireframe online en donde los diseñadores web planea,

construyen y comparten tu trabajo, para aplicaciones web o móvil.

Herramienta o IDE a utilizar:

Visual Studio donde desarrollaremos nuestra maquetación de la aplicación APEX sobre

logística/mensajería, donde utilizaremos HTML y CSS para todo el diseño.
 5

CSS

REQUERIMIENTOS NO FUNCIONALES

•Realizar una base de datos que contenga toda la información del sistema.

•Realizar actualizaciones donde se hagan reparaciones y mejores del sistema.

•Protección y seguridad para los datos personales.

•Guía y pasos para las personas que desconocen nuestra plataforma

•Los colores de la interfaz deberán ir acorde para la comprensión y facilidad de uso mientras el
usuario este en la APP
 6

VISTA DEL PROTOTIPO WEB DE INICIAR SESIÓN:

VISTA DEL PROTOTIPO WEB DE INICIAR SESIÓN: VISTA DEL PROTOTIPO WEB
DE REGISTRARSE:
 7

VISTA DEL PROTOTIPO WEB DE ERROR:

Descripción de los elementos de navegación y la funcionalidad que se puede inferir del código:

1. Encabezado (<header>):
•El encabezado muestra el nombre de la aplicación "Apex" en un elemento<h1>. Este
elemento puede servir como un enlace de inicio o redirigir a lapágina principal de la
aplicación.
2. Sección de error (<div class="error">):
•Esta sección muestra un mensaje de error que indica que la contraseña ingresada para el
usuario es incorrecta. Es posible que esta sección se muestre después de que se intente
iniciar sesión con credenciales incorrectas.
 8

REFERENCIAS
https://www.studocu.com/co/document/sena-sofiaplus/tecnologias-de-la-informacion-y-la-
comunicacion/ga6-220501096-aa3-ev02-crear-el-diseno-del-sitio-web-yo-moviles-utilizando-sus-
componentes-y-tecnologias/65121482

https://www.palermo.edu/dyc/maestria_diseno/pdf/tesis.completas/43.luzardo.pdf