Taller de herramientas online
Enviado por Catalina Véliz • 2 de Diciembre de 2022 • Trabajos • 1.142 Palabras (5 Páginas) • 185 Visitas
[pic 1]
[pic 2]
[pic 3]
Introducción
En el trabajo de esta semana nos vemos en la tarea de realizar un wireframe o dicho de otro modo, en la tarea de crear una maqueta para la empresa “Te lo envío” el cual ha tomado la decisión de crear un sitio web mucho más actualizado que el anterior, para eso nos solicitan crear una maqueta en donde debe poseer las siguientes cosas: un header, un banner, un footer, la información de contacto y el video de presentación. Para poder lograr ello vamos a trabajar en el software gratis de esta semana, el cual es llamado pencil. Vamos a ir detallando paso a paso la creación del nuevo sitio web, tanto con los elementos que vamos a ir agregando a nuestra maqueta como el tamaño de la letra que va a poseer nuestro sitio web, todo esto va a ser acompañado con las imágenes del procedimiento desde el inicio hasta llegar a la maqueta que más se va a parecer al proyecto final.
Desarrollo
Es momento de crear la base de nuestro wireframe y como primer paso debemos acomodar las piezas claves para saber organizar nuestro sitio web, estas piezas son la jerarquía de la información de nuestro sitio web, las cuales se componen del <header> el cual es la introducción de nuestro sitio web, el <body> que se compone del cuerpo de nuestro sitio web y el <footer> el cual es el pie de página de todo sitio web. Lo hicimos de forma lo más parecido a una página web al agregar el scrollbar, la barra de navegación y los botones de minimizar, minimizar tamaño y cerrar.
Estos quedarían acomodados de la siguiente forma:
[pic 4]
Una vez ya lista la organización básica de nuestro sitio web viene la parte más entretenida en lo personal, la cual consiste en agregar cada sección que va a poseer nuestro sitio web, en este caso el cliente desea tener un banner y un video de presentación como base, por lo que decidimos colocar el video de presentación junto a un banner el cual puede ser animado o estático, eso ya va a depender de lo que desee el cliente, pero en este caso lo vamos a dejar como uno estático para que de esa forma el público objetivo no se distraiga con el banner mientras ve el video de presentación, además decidimos agregar en la sección de abajo un banner el cual si puede contar con movimiento para darle más dinamismo y que sea más llamativo visualmente, adicionalmente se ha agregado un apartado llamado <section> el cual cumple la función de poder agregar una o más secciones principales, en este caso como es una empresa que cumple la función de enviar paquetes y cartas va a necesitar un apartado en dónde su público objetivo pueda dar seguimiento de su producto y en este apartado es el lugar que vamos a ubicar todo lo necesario para que el cliente tenga la mejor usabilidad posible.
Agregando todo lo mencionado anteriormente nuestro wireframe va quedando de esta forma:
[pic 5]
Ya va agarrando forma, pero aún le faltan varias cosas que lo harán diferenciarse de las demás páginas web, por lo que es momento de hablar sobre el <header> el cual va a poseer la marca de la empresa que nos contrató, en este caso puede ser la marca o el isotipo, ya eso dependerá de las exigencias del cliente, pero en este caso lo dejaremos como “marca”, conjuntamente vamos a agregar el menú en donde van a estar los apartados que sean más relevantes e importantes para el futuro usuario que va a ocupar el sitio web, como lo son los centros de ayuda, los servicios, el envío y compras internacionales y los emprendedores, asimismo añadiremos el <H1> el cual va a ser el logo de la compañía y por último tendremos un apartado en donde los usuarios van a poder iniciar sesión. Todos estos elementos van a quedar ordenados de esta forma:
...