Proyect o f inal

Proyect o int egrador

Llegamos al final de este primer tramo de desarrollo

w eb.

A partir de ahora se espera que puedan poner en

práctica todo lo visto hasta el día de la fecha.

Para este proyecto de carácter integrador, vamos a

estar trabajando en una w eb institucional.
 Proyect o int egrador

Imaginen que reciben a su primer cliente.

El cliente les cuenta que tiene un instituto de educación primaria.

No sabe cómo se desarrolla un sitio w eb, así que les deja plena
libertad en cuanto a su diseño.

Lo único que pide el cliente es que sea solamente una página w eb

donde tenga toda la información. Y otra donde solamente se
encuentre un formulario de contacto.

Los datos suministrados son:

-Nombre del instituto: Unt ref School

- Paleta de colores: #FC7300 , #1F8A70 , #00425A , #181823,

#EFF5F5

Tipografias: https://fonts.google.com/specimen/Poppins ,
https://fonts.google.com/specimen/Belanosima
 Proyect o int egrador

De la lluvia de ideas se genero el siguiente SKETCH:

- Una barra de navegación que me redirija a cada sección del HTML y al formulario *

- Las secciones obligatorias son:

● Quienes somos
● ¿Por qué elegirnos?
● Propuesta educativa
● Últimas noticias.

En ellas tienes la libertad de posicionar la información como más te parezca, la imagen dio una
idea nada más de lo que se pensó con el cliente.

En el pie de página, quiere que aparezcan las redes sociales del lado izquierdo, el nombre del
instituto centrado y contactos del lado derecho.

(*) Recuerda agregar hipervínculos internos en la barra de navegación hacia cada sección del documento HTML.
 Proyect o int egrador

Trabaja la estética del proyecto utilizando CSS puro, o complementa el mismo con un
framew ork CSS como Bootstrap. Aquí hay libertad de elección.
 Proyect o int egrador

Todo buen sitio w eb, debe adaptarse a diferentes t amaños de pant all a. Acuérdate del
paradigma Mobile First (más del 60% de los sitios w eb a nivel mundial, se navegan desde
dispositivos móviles).

El sitio debe adaptarse a una vista de tablet (768px) y una vista mobile (320px). (Recuerda que
puedes mostrar u ocultar información, dependiendo cada pantalla).

Debe incorporar SEO

(t it l e met a “ descript ion y aut hor” , header, main, f oot er, nav)

En cuanto a la página de formulario, no dejó muchas especificaciones el cliente sobre el diseño,

simplemente quiere que sea funcional. Como recomendación: no hagas un formulario
sobrecargado de campos. Sé conciso e integra los campos más importantes en éste.
 Proyect o int egrador

Recuerda que el profesor mostró algunos servicios al cual podemos

conectarnos para hacer funcional el formulario de contacto:

● f ormsubmit .co
● mailt his.t o

(analiza bien los temas que deben integrarse cuando sumas los servicios
de estos formularios (agregar campos ocultos, validar el Email de registro,
etc.)

(si no manejas el idioma inglés, apóyate en un traductor como Google

Translate para poder traducir la documentación técnica del correcto
funcionamiento).
 Proyect o int egrador

Por último, el proyecto debe ser presentado en un repositorio en GITHUB, con el nombre PROYECTO-
INTEGRADOR- W EB- UNTREFSCHOOL.

Y generado su respectivo Git Hub- Pages.

Integra imágenes acordes al tipo de proyecto. Utiliza recursos como unsplash.com para obtener imágenes
de la temática propuesta.

Trabaja las imágenes: no agregues imágenes .PNG. Utiliza formatos como JPG o W EBP, que son livianos.
Renombra las imágenes acorde a su temática. No dejes un nombre de imagen como imagen1 (2).png , ni
espacios en los nombres, ni mayúsculas y minúsculas.
Normaliza la información del proyecto en cuanto a nombre de archivos refiere.

Utiliza f lat icon.com para buscar un favicon y agregarlo a los archivos del proyecto. No utilices archivos con
extensión .ico para un favicon. Elige archivos .png para los favicon dado que poseen soporte para
transparencias, ideal para las pestañas de los navegadores w eb.
M uchas gracias.