Full Stack Oeste - TPO - CaC 4.0 Q2 - Com 23542

A. Título y Descripción del Proyecto

B. Público Objetivo

C. Estructura del Sitio

D. Diseño y Estilo

E. Contenido y Funcionalidades

1. Vistas

2. Responsividad

3. CSS

4. Scripts

   • createIconList

   • loader

   • viewShow

   • submit

   • toggler

   • quotes

F. Integrantes del Equipo

G. Recursos Adicionales

H. Links

• Título: "Portal digital de Full Stack Oeste"
• Descripción: Creación de un portal web para "Full Stack Oeste", con el objetivo de ofrecer servicios de desarrollo web y marketing digital a potenciales clientes.

• Personas que están buscando establecer o mejorar su presencia en línea, y que necesitan servicios de desarrollo web y marketing digital, como ser: Emprendedores y dueños de negocios, PYMEs, profesionales independientes, etc. Aquellos que requieren orientación y asesoramiento profesional en el desarrollo de sus proyectos web.

• Home: Ofrece soluciones tecnológicas personalizadas para clientes.
• Servicios: Detalla los servicios de Full Stack Oeste.
• Nosotros: Integrantes y breve descripción de los valores y la visión del grupo.
• Contacto: Proporciona un formulario para enviar mensajes.

• Estilo visual: Relajado, moderno y tecnológico.
• Colores: Nuestra paleta se basa en colores claros acompañados de elementos blancos, para transmitir frescura y amabilidad. Adoptamos un tema alternativo oscuro con una combinación predominante de negro y grises, equilibrado con elementos llamativos y tonos claros.
• Tipografía: Fuente estilizada en titulares y cabeceras, Sans-serif para una legibilidad óptima en textos de cuerpo.

• Se optó por un sistema de vistas rudimentario, mostrando y ocultando el contenido HTML de cada vista por medio de un script propio.

• Se estudiaron metodos modernos con la simplicidad como requisito fundamental. Se utilizan unidades relativas y propiedades avanzadas de CSS.
• Las fuentes son reescaladas dinamicamente en proporcion al width del viewport por medio de la propiedad de calculo que ofrece CSS.
• Las secciones con grids se escalan y disponen automaticamente gracias a grid-template y la propiedad minmax

• Se utiliza ampliamente un sistema sencillo de variables para determinar la paleta de colores y las fuentes.

• createIconList:

  Simulamos el consumo de una API, primero componiendo un arreglo con rutas de iconos (tomando una ruta base y "mapeando" una lista) y luego renderizando una serie de iconos dispuestos en un grid responsivo.

• loader:

  Tomamos el CSS y el HTML de un loader que se muestra por sobre toda la pagina y se oculta cuando termina de cargar el DOM.

• viewShow:

  Es el script que muestra y oculta las vistas para lograr una aplicacion de una sola pagina (SPA).

• submit:

  Previene el comportamiento predefinido y verifica el campo de nombre y un patron en el campo de mail. Si obtiene true && true, dispara un alert y envia el formulario a UnStatic.

• toggler:

  Este script apendiza un archivo CSS en el head del documento. Incluye estilos que pisan los colores por defecto, logrando cambiar el tema. Se vale de local storage para persistir la eleccion del usuario a tra vez de las sesiones. Se activa por medio de un checkbox estilizado como slider.

• quotes:

  Tomamos una base de datos de citas relacionadas a la computacíon y la subimos a firebase para interactuar con ella por medio de el metodo GET de API REST para renderizar una marquesina que muestra las citas junto con su autor de forma alternativa y al azar.

• Integra UnStatic, un servicio controlador de correo que remite el formulario sin exponer la casilla.
• A pesar de que se cuenta con validacion incorporada, se opto por utilizar un script estandar para validar las casillas de nombre y de correo.

• Matias Martin Murad Pretz (representante)
• Ricardo Torales
• Eliana Balbuena

• prefixfree: Ofrece la mayor compatibilidad posible con el motor webkit.
• Favicon: Generador de favicon.
• FontAwesome: Resuelve los iconos utilizados en el footer.
• Dall-E: Generamos avatares para las tarjetas de los miembros.
• StorySet: Ilustraciones vectorizadas utilizadas en el home.
• Google Fonts: Importamos las familias Orbitron y Noto Sans Display.
• MetaTags.io: Genera meta-tags de forma automatica.
• SimpleIcons: Iconos vectorizados.
• javaScript-Minifier: Minificado de JS.
• PurifyCSS: Limpiador de CSS
• Tinypng: Compresor de imagenes.
• Firebase: Alojamiento de JSON.
• Adobe Express SVG

• Contacto
• Repositorio
• Sitio
• Paleta de colores