ACTIVIDAD EXTRACLASE No2

ACTIVIDAD 02 FECHA: 18/04/2024
EXTRACLASE
No.
SEMESTRE: Cuarto
PARALELO: A
ASIGNATURA: TECNOLOGIAS WEB
UNIDAD: I Tecnologías y estándares web
TEMA: Nuevos estándares en el desarrollo de sitios web
PROBLEMA: ¿Cómo resolver operaciones sobre resta de números BCD?
Comprender los fundamentos de estas tecnologías para utilizar

HTML5 y CSS3 en el desarrollo web actual a través de
OBJETIVO:
explicaciones teóricas, ejemplos prácticos y actividades de
codificación.
TIPO DE ACTIVIDAD
LUGAR ALCANCE FORMA
Intraclase Individual
Extraclase Grupal Taller Práctica de laboratorio
Síntesis, esquemas Práctica de clase
Caso de estudio Resolución de problemas,
CALIFICACIÓN ejercicios
Investigativa
Vinculación con la colectividad Ensayo, artículo
Informe
e exposición
ROLES Y RESPONSABILIDADES DE LOS PARTICIPANTES EN LA TAREA:
NOMBRE ESTUDIANTE ROL DESCRIPCIÓN
Josue Alberto Barba Estudiante Relizador de la actividad

Zambrano
Elaborar e identificar los controles y componentes que hacen que un sitio web
sea responsivo.
Primeramente, hay que entender que es un sitio web responsivo:
El diseño responsivo es un enfoque del diseño web que hace que el contenido de la
web se adapte a los diferentes tamaños de pantalla y ventana de una variedad de
dispositivos [1] .
El diseño responsivo permite ofrecer múltiples diseños separados de tu contenido y

diseño a diferentes dispositivos dependiendo del tamaño de la pantalla [1].
Ahora ya podemos identificar los componentes, los cuales son:
 Media Queries
El diseño web responsive depende de las media queries. Estas son reglas de CSS que
permiten aplicar estilos particulares a una página web según las características del
dispositivo, como el ancho de la pantalla. Por ejemplo, se pueden establecer estilos
específicos para pantallas grandes y pequeñas, lo que garantiza que el diseño se
adapte a cada situación [2].
Ejemplo:
Codigo en html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="Tarea1.2Styles.css">
</head>
<body>
<h1>Ejemplo de media Query</h1>
</body>
</html>
Codigo en css
body {
text-align: center;
}
h1 {
font-size: 1.5rem;
}
@media (max-width: 600px) {
body {
background-color: #87ceeb;
}
}
En este ejemplo se establece que cuando el ancho del navegador sea de 600px o
menos cambie el fondo al color azul.
Demostracion
Cuando el navegador tiene 601px de ancho
Cuando el navegador tiene 600px de ancho

 Fluid Grids y Flexbox
Las técnicas de diseño fluidos y flexbox permiten que los elementos de la página se
adapten de manera dinámica al espacio disponible en la pantalla. Los rieles fluidos
dividen el diseño en columnas flexibles, lo que facilita la adaptación a varios tamaños
de pantalla. Por el contrario, Flexbox es un modelo de diseño que simplifica la
disposición de componentes, lo que es particularmente útil para dispositivos móviles
[2].
Ejemplo con FLEX
Codigo HTML:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="wrapper" >
<div class="border">One</div>
<div class="border">Two</div>
<div class="border">Three</div>
<div class="border">Four</div>
<div class="border">Five</div>
</div>
</body>
</html>
Codigo CSS:
h1 {
font-size: 1.5rem;
}
.wrapper {
display: flex;
flex-wrap: wrap;
}
.wrapper > div {
flex: 1 1 200px;
}
.border{
border: 2px solid black
}
En la imagen se puede ver que dos elementos se han ajustado en una nueva línea.
Estos ítems comparten el espacio disponible y no están alineados debajo de los ítems
de arriba. Esto es porque cuando envuelves (wrap) flex-ítems, cada nueva fila (o
columna si se trabaja por columna) se convierte en un nuevo flex-container. La
distribución del espacio ocurre a lo largo de la fila.
Ejemplo con GRID LAYOUT
Codigo HTML:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="wrapper" >
<div class="border">One</div>
<div class="border">Two</div>
<div class="border">Three</div>
<div class="border">Four</div>
<div class="border">Five</div>
</div>
</body>
</html>
Codigo CSS:
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {

border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
En el siguiente ejemplo construyo el mismo diseño usando Grid. Esta vez tenemos tres
pistas de columna de 1fr. No necesitamos establecer nada sobre los ítems mismos,
ellos se colocarán uno dentro de cada celda de la cuadrícula creada. Como se puede
ver, se mantienen en una cuadrícula estricta, alineados en filas y columnas. Con cinco
ítems, tenemos un hueco al final de la fila dos.
 Imágenes Responsivas
Las imágenes que se ajustan automáticamente al tamaño de la pantalla del dispositivo

se conocen como imágenes responsivas. Esto se logra utilizando características
específicas de HTML y CSS que indican qué imagen debe cargarse según el tamaño
de la pantalla. Las imágenes responsivas garantizan que las imágenes se vean bien en
todos los dispositivos, grandes o pequeños [2].
Codigo HTML:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<img src="Resources/josue.jpg" alt="Josue">
</div>
</body>
</html>
Codigo CSS:
.container{
width: 75vw;
max-width: 600px;
min-width: 300px;
margin: auto;
}
img{
width: 100%;
}
A continuación, mostrare como se adapta una imagen a distintos tipos de
dispositivos y sus resoluciones:
 Tipografía Adaptable
La tipografía es fundamental para el diseño web responsive. El texto debe ser legible
en cualquier dispositivo, y la tipografía adaptable requiere fuentes que se adapten a
diferentes tamaños de pantalla. Esto garantiza que el texto sea legible en cualquier
dispositivo y en cualquier situación [2].
Codigo HMTL:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>ESTE TEXTO ES RESPONSIVO</h1>
</body>
</html>
CODIGO CSS:
h1{
text-align: center;
font-weight: 800;
font-size: clamp(50px,8vw,100px);
}
A continuación, mostrare como el texto responde a distintas resoluciones de

pantalla:
 Menús de Navegación Móvil
Los menús de navegación móvil son esenciales para el diseño web responsive. Los
menús desplegables o los iconos de hamburguesa pueden reemplazar los menús
tradicionales de barras horizontales en dispositivos móviles, lo que reduce el tamaño de
la pantalla y facilita la navegación táctil. Los menús de navegación móvil deben ser
fáciles de entender y de usar [2].
Codigo HTML:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<body>
<header>
<div class="barras">
<button onclick="abrir_cerrar_menu()" class='boton_menu'
id='x'></button>
</div>
<nav id="menu" class="desplegable">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Galeria</a></li>
<li><a href="#">Proyectos</a></li>
<li> <a href="#">Contactanos</a></li>
</ul>
</nav>
</header>
<script src="main.js"></script>
</body>
</body>
</html>
Codigo CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-repeat: no-repeat;
background-position:center;
background-size: cover;
height: 100vh;
}
/*aca configuro como se veria en computadora*/
.barras{
display: none;
}
.desplegable{
background: #1e1e1e;
}
ul{
display: flex;
flex-direction: row;
}
ul li{
padding: 10px;
list-style: none;
}
ul li a{
color: white;
text-decoration: none;
text-align: center;
font-size: 1.1rem;
}
nav ul li:hover{
background: #ff5722;
}
/*aca configuro como se veria en tablet*/

@media (max-width: 850px){
.barras{
background-color: #1e1e1e;
display: block;
}
.desplegable{
background: none;
transform: translate(-100%);
transition: 0.5s;
font-size: 1.5rem;
width: 50%;
}
ul{
display: flex;
flex-direction: column;
height: 100vh;
}
ul li{
padding: 0;
}
ul li a{
font-size: 1.5rem;
padding: 20px 0px 20px 20px;
display: block;
text-align: left;
}
.boton_menu{
background-image: url('Resources/icono_menu.png');
height: 30px;
width: 30px;
background-size: 30px 30px;
}
button{
margin: 5px;
border: none;
margin: 10px 10px 10px 20px;
}
/*con esta clase abro y cierro el menu con toggle*/
.abrir_menu{
background: rgba(30, 30, 30, 0.6);
backdrop-filter: blur(2px);
transform: translate(0%);
width: 50%;
transition: 0.5s;
}
/*con esta clase cambio las barras por una x*/
.colocar_x{
background-image: url('Resources/icono_x.png');
height: 30px;
width: 30px;
background-size: 30px 30px;
}
}
/*aca configuro como se veria en celular*/
@media (max-width: 500px){
.desplegable{
width: 100%;
height: 100vh;
font-size: 1.6rem;
}
}
Codigo JAVASCRIPT:
let menu_desplegable = document.getElementById('menu');
let boton_cerrar = document.getElementById('x');
function abrir_cerrar_menu(){
menu_desplegable.classList.toggle('abrir_menu');
boton_cerrar.classList.toggle('colocar_x');
}
A continuación, mostrare imágenes en donde se puede observar como el menú

responde a distintas resoluciones de pantalla:
Como se puede observar, cuando la pantalla es de móvil aparece una barra
desplegable en donde con ayuda de javascript haremos que aparezca el menú:
Bibliografía
[1] M. Duò, «Kinsta,» 13 julio 2022. [En línea]. Available: https://kinsta.com/es/blog/diseno-de-paginas-
web-sensibles/.
[2] D. Ospina, «marketerosagencia,» 26 octubre 2023. [En línea]. Available:

https://www.marketerosagencia.com/blog/diseno-web/caracteristicas-diseno-web-responsive/.
[Último acceso: 18 abril 2024].

ACTIVIDAD EXTRACLASE No2

Cargado por

Copyright:

Formatos disponibles

ACTIVIDAD EXTRACLASE No2

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

ACTIVIDAD EXTRACLASE No2

Cargado por

Copyright:

Formatos disponibles

ACTIVIDAD 02 FECHA: 18/04/2024

PROBLEMA: ¿Cómo resolver operaciones sobre resta de números BCD?

Comprender los fundamentos de estas tecnologías para utilizar

Josue Alberto Barba Estudiante Relizador de la actividad

Primeramente, hay que entender que es un sitio web responsivo:

El diseño responsivo permite ofrecer múltiples diseños separados de tu contenido y

Ahora ya podemos identificar los componentes, los cuales son:

Cuando el navegador tiene 601px de ancho

Cuando el navegador tiene 600px de ancho

Ejemplo con FLEX

Ejemplo con GRID LAYOUT

.wrapper > div {

Las imágenes que se ajustan automáticamente al tamaño de la pantalla del dispositivo

A continuación, mostrare como el texto responde a distintas resoluciones de

/aca configuro como se veria en tablet/

A continuación, mostrare imágenes en donde se puede observar como el menú

[2] D. Ospina, «marketerosagencia,» 26 octubre 2023. [En línea]. Available:

También podría gustarte