PENDIENTES 2021/2022

Este práctico es nuestro comodín 2021!

Vamos a trabajar directamente sobre el final de la materia, la idea es seguir practicando lo visto durante la cursada regular e incorporar todo el funcionamiento responsivo de un sitio.

METODOLOGÍA:​

PRIMER ETAPA:

Selección de tema y bocetos

  • Elegimos el profesional sobre el cual vamos a realizar el sitio web, evaluamos la comunicación y recopilamos toda la información posible.
  • Realizamos el wireframe para tener clara nuestra estructura y como esta se comportara de manera responsiva.
  • Bocetamos el diseño del sitio lo más acabado posible.

SEGUNDA ETAPA:

Comenzamos el armado del sitio en html

  • Una vez que tenemos todo planificado, comenzamos a generar la estructura en HTML y aplicamos los estilos mediante CSS.
  • Incorporamos todos los recursos requeridos, como slides, lightbox, embebidos, animaciones, hovers, etc.

TERCERA ETAPA:

Correcta visualización en múltiples dispositivos

Haremos las modificaremos y ajustes necesarias a nuestro sitio para que funcione de manera responsiva y nuestra estructura se adapte a diferentes resoluciones de pantalla.

  • Escritorio
  • Tablet
  • Celular

CUARTA ETAPA:

Puesta en marcha!

Subimos el sitio al servidor y realizar un control general, verificar la correcta visualización del favicon, imágenes, titulo del documento.

Chequeamos el correcto funcionamiento de los vínculos.

Revisamos la correcta visualización del sitio en diferentes resoluciones de pantalla, recuerden que pueden utilizar el Inspector del navegador para probar el funcionamiento responsivo.

No olviden vincular desde la portada y cambiar el estado del botón indicando la entrega del trabajo práctico.

RESPONSIVE:

Para poder lograr que nuestro sitio se adapte a diferentes resoluciones debemos comprender ciertos conceptos básicos:

Viewport:

Es una etiqueta para configurar el espacio que utilizara tu sitio web:
width=device-width define el ancho del sitio web en el dispositivo.
Las otras dos que dicen: initial-scale=1, maximum-scale=1 sirven para definir la escala del sitio web, ¿Te haz dado cuenta que puedes hacer zoom? a esto se refiere con la escala al definir una escala inicial y una maxima iguales te aseguras de que no se pueda hacer zoom, esto es util en sitios web móviles ya que el zoom en estos generalmente estropean la visibilidad del sitio.

 

Media Queries:

Utiliza la regla @media para incluir un bloque de propiedades de CSS sólo si una determinada condición es verdadera.

 

Grilla de columnas:

Una cuadrícula de vista sensible a menudo tiene 12 columnas, y tiene una anchura total de 100%, y se encogerá y expandirse a medida que cambia el tamaño de la ventana del navegador.
No olvidar insertar el estilo: * {box-sizing: border-box;} Esto asegura que el relleno y el borde están incluidas en el ancho total y la altura de los elementos.

Ancho máximo:

No olviden indicar un ancho máximo a determinados elementos para que no crezcan mas de lo necesario, como así mismo podemos indicar medidas mínimas. max- min-

Criterios de evaluación y contenido obligatorio:

  • Fecha de puesta en linea del trabajo práctico.
  • Nombre correcto de archivos y carpetas en el servidor.
  • Optimización de imágenes.
  • Correcto uso del titulo del documento y favicon.
  • Correcta utilización de estilos CSS3.
  • Tratamiento de textos, jerarquía, legibilidad, redacción, etc.
  • Correcta visualización en diferentes resoluciones escritorio/tablet/celular.
  • Maquetación semántica.
  • Uso de Google Fonts.
  • Utilización de recursos embebidos.
  • Aplicación de animaciones CSS y efectos Hover.
  • Uso de recursos de terceros Lightbox y Slideshow
  • Organización y estructura responsiva.
  • Creatividad y esfuerzo.
  • Vinculaciones relativas y absolutas con su correcto destino.
  • Diseño en general: jerarquización de la información, manejo texto, legibilidad, composición, manejo del espacio,  uso del color, contraste, etc.

Fecha de entrega de boceto y trabajo final en la lista general de cada curso, posicionarse sobre las fechas!