dweb2025

Clase 11

Formulario para inscripción Diseño Web II.

__________________________________________

Media Queries:
Los media queries (o consultas de medios) permiten evaluar condiciones relacionadas con el entorno del dispositivo, como el ancho o el alto de la pantalla (width, height), y en base a esta información aplicar estilos específicos que permiten adaptar el diseño a diferentes tamaños de pantalla y dispositivos.

Ejemplo de la sintaxis:

@media (min-width: 600px){

}

min-width significa, a partir de esta medida o con este ancho como mínimo, aplicar estas propiedades.

Pensamos en hacer una estrategia como la de "Mobile First", es decir, primero para pantallas pequeñas como las de los teléfonos celulares, y luego ir adaptando a pantallas de mayor tamaño.

¿Cuáles son los Breakpoints?

Los Breakpoints o Puntos de Quiebre indican en qué tamaños de pantalla debe cambiar el diseño para adaptarse mejor al dispositivo del usuario (móvil, tablet, escritorio, etc.).

¿Quién decide esos puntos?

Nosotros elegimos en que puntos cambiar el diseño, por ejemplo:

/* De 0 a 480 el diseño sin media queries
 con las propiedades como veníamos trabajando anteriormente */

@media (min-width: 481px) {
  /* desde 481px (tablet y celulares) */
}

@media (min-width: 769px) {
  /* desde 769px (notebooks medianas) */
}

@media (min-width: 1280px) {
  /* desde 1280px (Pantallas más grandes)

  En este media queries podremos también limitar cuanto 
  crecerá como máximo de ancho nuestro diseño,
  para evitar deformaciones.
  
  aplicamos un selector (clase, id, etiqueta u otro)
  a ese elemento le aplicamos un max-width, por ejemplo de 1400px
    max-width: 1400px; */
}

Tendremos que ir probando los puntos en nuestro sitio y comprobando como se ve en los diferentes tamaños de pantalla, para esto podremos utilizar las herramientas para desarrolladores de Chrome.

___________________________________

TP:

Código fuente

___________________________________

Layout con Grid por Áreas:

Por un lado:

Al contenedor en el css además de las propiedades que ya tenga, le asignamos display grid, cantidad de columnas y filas, y luego organizamos las áreas.

(El contenedor puede ser body o un div)

display: grid;

grid-template-columns: 1fr;

grid-template-rows: 50px 50px 100px 30px;

grid-template-areas:

"header"

"aside"

"main"

"footer";

Por otro lado:

Cada área debe tener asignado su nombre dentro de su selector.

Por ejemplo para el pie, asignarle grid-area: footer;

¡Todo esto es muy útil cuando queremos lograr aplicar un media query o varios, para que el layout se reorganice en función al ancho del dispositivo en el que se vea nuestra página!

Tp:

Código fuente

Clase 10

Display Flex en Css:

¿De qué se trata?
Flexbox sirve para organizar y alinear elementos dentro de un contenedor de forma flexible y eficiente, especialmente cuando el diseño debe adaptarse a distintos tamaños de pantalla (diseño responsive).

______________________________________________

Descarga el código fuente base que he creado para esta clase.

Explicación del código fuente base:
Consiste en un html y un css, en donde en el html se presenta un div contenedor (caja), y dentro del mismo varios div hijos.
El div contenedor tiene un ancho máximo de 800px pero se irá ajustando al 90% del viewport; también un alto mínimo de 600px, margen que lo centra y borde.

Los div hijos tienen color de letra, interlineado que ayuda al centrado vertical del texto, alineación horizontal centrada, color de fondo azul versoso, ancho y alto definido de 100px y borde,
Luego se aplica estilo específico a hijo3 e hijo4, esto modifica lo anterior para esos divs específicos.

Próximo paso: aplicar display: flex; al div contendero según el tp, e ir realizando las pruebas correspondientes.

La naturaleza del div es display: block; y ocupa un 100% de ancho de su contenedor, salvo en este caso que definimos un ancho de 100px, cada div inicia en una nueva línea; por lo tanto, se mostrarán naturalmente unos debajo de otros, hasta el momento de aplicar display: flex;

1) Display: block;

2) Display: flex;

Práctica:

____________________

flex-direction: se aplica al contenedor y permite los siguientes valores.

row (fila, por defecto)

row-reverse (fila con orden inverso de los elementos)

column (columna)

column-reverse (columnas con orden inverso de los elementos)

____________________

flex-wrap: wrap; permite que las cajas "hijos" se dispongan en más líneas, cuando no entran en una sola línea.

Los valores para flex-wrap son:

nowrap; Los elementos permanecen en una sola línea, sin envolver.

wrap; Los elementos se envuelven a la siguiente línea cuando no hay suficiente espacio.

wrap-reverse; Los elementos se envuelven, pero en orden inverso (de abajo hacia arriba).

____________________

flex-flow:

Propiedad que integra las anteriores:

flex-flow permite aplicar flex-direction más flex-wrap.

Ejemplo:

En vez de estas dos líneas:

flex-direction: row;

flex-wrap: wrap;

Escribir solo esta:

flex-flow: row wrap;

____________________

justify-content:

center; centrado

flex-end; al final

flex-start; (por defecto) desde el inicio.

space-between; sin espacio antes del primero ni después del último.

space-around; distribuye los elementos con un espacio igual antes y después de cada uno, pero los elementos en los extremos tendrán la mitad de espacio comparado con los elementos internos.

space-evenly; espacios iguales en todos los casos.

____________________

align-content:

Por defecto:

* Stretch funciona solo cuando los "hijos" no tienen un valor de alto definido.

También:

____________________

align-items:

flex-start; Alinea al principio del eje transversal.

flex-end; Alinea al final del eje transversal.

center; Alinea al centro del eje transversal.

baseline; Alinea según las líneas base de los elementos.

stretch; Estira los elementos para que ocupen todo el espacio disponible (valor por defecto).

______

align-self:

Para un elemento hijo en particular aplicariamos align-self con los valores anteriores.

Es decir, align-self para un elemento en particular (hijo), y align-items para el contendor y se lo aplica a todos los hijos.

____________________

order:

Para ordenar los elementos, se aplica individualmente.

Por defecto, order: 0; para todos los elementos.

Acepta números enteros, positivos o negativos, sin decimales (es decir, sin coma ni punto decimal). Puedes usar valores como: -2, -1, 0, 1, 2, etc.

Clase 9

Devoluciones de TP 1 entregado.

(Clic aquí)

____________________________________

Trabajo Práctico Final (Obligatorio para Aprobar)

(Clic para accedrer al cuestionario)

____________________________________

_______________________________________

Generando material multimedia para nuestro sitio web.
En html tenemos etiquetas para la inserción de audio y video, pero podemos evaluar la posibilidad de llevar nuestro material a youtube y tomarlo para nuestro sitio web de ese servidor, sin afectar el rendimiento del servidor que aloja nuestro sitio web. Especilamente los videos son archivos muy pesados que consumen ancho de banda y almacenamiento en nuestro servidor, pero youtube brinda ese servicio de manera gratuita.

¿Cómo vinculamos un video de youtube para nuestro sitio?
Existe una etiqueta llamada <iframe> (inline frame) que permite incorporar otro html dentro del nuestro. Ese código del iframe lo genera youtube mismo, por lo que, nosotros solo debemos copiarlo en youtube y pegarlo en nuestro html.

Ejemplo:

* El <iframe> no es solo para YouTube. Es una etiqueta general de HTML que sirve para incrustar cualquier página web o contenido externo dentro de otra página web.

Ejemplo:
<iframe src="https://www.wikipedia.org" width="600" height="400"></iframe>

Sobre ancho y alto:

Deberan ser proporcionales, podremos modificarlo en el codigo funete con la siguiente fórmula:

Por ejemplo si reducimos el ancho a 400, el alto deberá ser de 225, ¿cómo llegamos a este dato? sencillo, con la siguiente fórmula. nuevo_alto = (alto_original / ancho_original) × nuevo_ancho

______________________

¿Cómo generar un video sin usar un editor de video?
Power Point puede ser la solución a esta pregunta para por ejemplo simplemente mostar fotos.

- Descargar y descomprimir el material.

- Cargar fotos en cada página de la presentación.

- Agregar transiciones. (opcional)

- Ensayar intervalos.

- Genera video.

- Publicarlo en un canal de youtube.

- Obtener el iframe y llevarlo a nuestro html.

Procedimientos en Power Point

Relación de aspecto:

- Diseño, Tamaño de la diapositiva, Estándar 4:3 o Panorámica 16:9.

Carga de imágenes:

- Insertar, Imágenes, Este dispositivo.

Aplicar animaciones:

Animaciones, seleccionar efectos (de entrada, enfasis o salida) de la sección Animación.

Insertar nuevo slide (página):

Inicio, Nueva diapositiva, Elegir plantilla en blanco.

Ver presentación en pantalla completa:

- Tecla F5, más clic o flechas de dirección.

- Para salir de pantalla completa, tecla ESC (escape)

Aplicar transiciones entre slides:

Primero marcar el slide (página).

Clic en Transiciones, aplicar cualquiera que te guste en la sección "transición de diapositiva".

Ensayar tiempos: (Paso necesario antes de crear el video)

- Presentación con diapositiva, ensayar intervalos.

Generar archivo final de video:

- Archivo, Exportar, Crear video, HD o mejor calidad Full HD.

Adicionales:

Si quisiera cargar una audio en la presentación y que se reproduzca al pasar cada slide.

- Insertar, Audio en PC.

- Reproducción, Tildar en "Reproducir en todas las diapositivas".

Animación de logos:

Si el logo es sencillo, podremos reconstruirlo con las formas de Power Point, separando las partes que lo componen, y así lograr aplicar un efecto de animación de entrada a cada una.

Ejemplo:

(Bajar archivo de ejemplo, clic aquí)

Algunos procedimientos:

Inserción de formas:

- Insertar, Formas, trazar en el área del slide.

Rellenar forma (color):

- Clic en la forma, clic en Formato, Relleno de Forma

Agregar animación de entrada:

- Clic en Animaciones, Agregar animación, Efectos de Entrada.

Cambiar tiempos y retrasos:

- Clic en animaciones, en la sección intervalos:

Inicio: Indica si inicia al hacer un clic, o con el anterior efecto.

Duración: tiempo que durará el efecto.

Retraso: por ejemplo si algo inicia con el efecto anterior pero no queremos que sea exactamente al mismo tiempo, aplicamos un pequeño retraso.

- Clic en animaciones, clic en Panel de animaciones para ver los tiempos de cada efecto para cada elementos.

______________________

Video Público, Privado u Oculto:

1. Público

Significado: Cualquier persona puede ver tu video. Aparece en búsquedas, recomendaciones, y en tu canal.

Ideal para: Contenido que quieres compartir con todo el mundo, como tutoriales, vlogs, música, etc.

2. Oculto (No Listado)

Significado: Solo las personas que tienen el enlace pueden verlo. No aparece en tu canal, búsquedas ni recomendaciones.

Ideal para: Compartir videos con grupos específicos sin hacerlo completamente privado, como presentaciones, clases o videos familiares.

3. Privado

Significado: Solo tú (y las personas específicas que invites con su correo de Google) pueden ver el video.

Ideal para: Videos personales o en desarrollo, o contenido confidencial.

__________________________________
😀 En nuestro caso, la mejor opción es Oculto, para que solo se muestre en nuestro sitio web. (considerando que puede ser un video que necesita ir acompañado de un texto u otros elementos).
__________________________________________

¿Qué más se puede insertar con etiqueta iframe?

Se puede crear una presentación en Genially con Interactividad y Navegación

___________________________________

Sitio:

https://genially.com/es/

Ejemplo 1:

IFRAME: es el código fuente de inserción que genera el propio sitio de genially.

Ejemplo 2:

Al compartir desde la presentación misma, aparece el código fuente en dos formatos como iframe o como script de javascript, así en nuestro caso será más acorde a los contenidos del curso elegir iframe.

¿Cómo lo llevamos a nuestro html?

Pulsamos en copiar, vamos a nuestro html, buscamos el body y lo pegamos dentro de esa etiqueta.

¿Qué se puede hacer en Genially?

La presentación abre un montón de posibilides para crear contenido, destaco Interactividad con los elementos, navegación entre slides y la aplicación de efectos.

Interactividad:

- Ventanas Emergentes: con descripción de información. Ejemplo sobre la bandera de Argentina.

- Etiquetas: Pequeño texto. Ejemplo sobre un punto situado sobre cada provincia.

Navegación:

- Ir a una determinada página. Ejemplo, para el ícono animado que está próximo a la provincia de Entre Ríos.

- Abrir enlace externo. A un recurso externo.

_______________________

Se aplican a:

Texto, Recursos, Elementos Interactivos, Imágenes cargadas.

_______________________

¿Cómo?:

Al seleccionar el elemento, y pulsar en el icono emergente (mano interactiva) y luego elegir un elemento de interactividad.

_______________________

Adicionales:

Widgets de carrusel para las imágenes interactivas.

_______________________________________

Práctica:

Nota:

Aplicar 2 con superíndice (²)

Teclas Alt + 253 o bien copiar de un texto de google.

Clase 8

Zoom en Visual Studio Code:
  ctrl +
   ctrl -

Zoom en el navegador:
   ctrl y girar la rueda.
_________________________________________________
Ventanas emergentes con div

Mostrar una ventana emergente al hacer clic en una imagen de la galería de Colibrí Café & Repostería.

Para lograr esto, lo ideal es seguir profundizando y llegar a aprender javascript, pero por cuestión de tiempo llegaremos a ver html y css. Entonces vamos a resolverlo con las herramientas que tenemos a mano. Los labels, los checkboxs, los div con class y el correspondiente código para css.

Descripción:

Al hacer clic en una imagen, aparece la ventana emergente; un clic en la imagen en realidad está haciendo clic en un label (el label contiene en su interior la imagen). Un label en html es una etiqueta de texto que se asocia a un input type:checkbox (caja de verificación); el label tiene un atributo for="id_del_checkbox" y el input checkbox tiene ese mismo id, de ese modo se asocian y al hacer clic en la etiqueta (label) activa o desactiva el tilde del checkbox asociado.

¿Qué es un checkbox y qué es un label?

El label es la caja de texto y el checkbox es el cuadrado que muestra el efecto de tilde.

Codigo básico del ejemplo: simpre dentro del body

<label for="idcheckbox">Soy el Label</label>
<input type="checkbox" id="idcheckbox">

En donde dice Soy el label irá la etiqueta img para cargar nuestra imagen.

______________________________________________

Pueba aquí hacer clic en el label (etiqueta): se marca o quita el tilde del checkbox:

Películas
Series
Cortos

Luego en nuestro css deberemos definir que si checkbox está en modo checked (tildado) sea visible la ventana emergente, y que cuando quitemos el tilde, se oculte la ventana.

______________________________________________

Para este caso, necesitamos que el checkbox esté oculto y sin tilde. Por otro lado, el label no contendrá texto sino la imagen como aclaré anteriormente.

En la siguente imágen se muestran los checkboxs para explicar que es lo en realidad estamos haciendo.

Si bien en la imagen se hace clic en el checkbox directamente, funcionará igualmente si hacemos clic en la imagen ya que la misma está dentro del label (sin texto).

______________________________________________

código fuente completo.

Aquí está el código fuente completo, con todos los detalles en comentarios en el mismo código.

______________________________________________

En html un comentario se escribe de la siguiente forma:

<!-- Esto es un comentario para html -->

En css el comentario es diferente y hasta más simple:

/* Esto es un comentario en css */

______________________________________________

Detalles del CSS:

- Agregamos position fixed (fijo) para el div oscuro que cubre el fondo (se extiende al 100% en ancho y alto), esto significa que no se mueve al scrollear (mover rueda del mouse para el desplazamiento vertical).

Ejemplos de position fixed:

- Un botón emergente con un ícono de whatsapp o ícono de chat.

______________________

Diferencias entre Position y Display:

position:

Indica cómo se comporta el elemento en su posicionamiento respecto al flujo natural del HTML.

Puede cambiar la ubicación del elemento en la página, sacándolo del flujo normal y poniéndolo en coordenadas específicas o fijo en pantalla.

📌 ¿Dónde y cómo se ubica el elemento en la página?

- ¿Sigue el orden normal?

- ¿Se saca del flujo?

- ¿Se fija a la pantalla o a otro elemento?

display:

Define cómo se presenta el elemento y cómo se organizan sus contenidos internos (hijos).

No mueve al elemento dentro de la página, pero si a su contenido.

📌 ¿Cómo se comporta el elemento y su contenido visualmente?

¿Es una caja de bloque (que abarca todo el ancho), en línea (solo ocupa el lugar de su contenido), flexible, una grilla...?

¿Sus hijos se alinean en fila o en columna?

¿Se muestra o no?

¿Cuál es su ajuste?

Si fluye junto al contenido (inline) o si rompe línea y se apila (block).

Si se comporta como un contenedor especial (flex, grid) que organiza sus hijos de forma distinta.

Si aparece o no (display: none → no ocupa lugar en la página).

Aparte de los anteriores, hay algo más que es si el elemento está o no visible, pero sin dejar de ocupar el lugar que tiene:

visibility: hidden; para ocultarlo.

visibility: visible; para mostrarlo.

______________________

- El color del div oscuro tiene transparencia con el RGBA, siendo la A (alpha) el valor de transparencia.

RGB significa Red, Green y Blue o en español Rojo, Verde y Azul.

.clase_del_div{
    background-color: rgba(rojo, verde, azul, alfa);
}

Para el ejemplo, reemplazaríamos rojo, verde y azul por un valor para cada uno que va entre 0 y 255. (esto lo hacemos automáticamente con la paleta de colores)