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: [Link] ,
[Link]
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 [Link] 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 [Link] 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.