Parcial Web Tres Arroyos

Descargar como pdf o txt
Descargar como pdf o txt
Está en la página 1de 6

TUDAI

Parcial - WEB 1
15 JUNIO 2023 : Sede Tres Arroyos

Alumno DNI Firma #hojas Comisión

Teoría General
1. Describa brevemente para qué sirve la Web. ¿Cuál es el rol de cada tecnología web que conoce?
(HTML, CSS y JS). Especificar para cada tecnología cual se ejecuta del lado del cliente y cual del
lado del servidor.
La Web sirve para publicar información de manera distribuida tanto estática como
generada dinámicamente, ofrecer una interfaz para otros sistemas, y
funcionar como plataforma estandarizada para desarrollar aplicaciones.
Las tecnologias web HTML, CSS y JS se ejecutan del lado del cliente. HTML sirve para dar estructura y
contenido, CSS para aplicar estilos visuales y JS para asignar comportamiento.

2. Seleccione la respuesta correcta. No es necesario justificar. Marcar sobre la misma hoja.


NOTA: Respuesta mal contestada resta -0.25, sin contestar 0.00 y bien contestada +1.00.

A. Cual de las siguientes afirmaciones NO aplica para JS


1. Es un lenguaje de marcado de hipertexto.
2. Se pueden manipular elementos del DOM.
3. Se pueden asignar valores de distinto tipo a una misma variable.

B. Seleccione la opción correcta que aplica AJAX


1. Mejora la velocidad porque es un lenguaje que se ejecuta completamente del lado del servidor.
2. Es un lenguaje que permite cargar contenido de modo dinámico.
3. Mejora la experiencia de usuario haciendo cargas dinámicos del lado del cliente

C. Indique cuál afirmación se refiere a CSS


1. Es utilizado para dar estructura y contenido a una página.
2. Usar un archivo css por cada archivo html de nuestro sitio.
3. Su nombre hace referencia a hojas de estilos en cascada.

D. Indique la afirmación correcta para HTML


1. Un archivo html es visible si falta su CSS.
2. Las etiquetas <head y <header> son lo mismo.
3. Es un lenguaje que se ejecuta del lado del servidor.

E. El DOM es:
1. Una interfaz para determinar las dimensiones del modelo de cajas.
2. Un modelo de documento que permite comprender la estructura de un HTML mediante un árbol.
3. Un lenguaje para localizar elementos en una estructura HTML

1
3. HTML y CSS : Analice el siguiente código HTML + CSS
<body> body {
<header> font-family: Times;
<h1>Magazine Tres Arroyos</h1>
color: white;
font-style: normal;
</header>
background-color: black;
<main> }
<aside> h1, p.resaltado {
<h2 class="destacado">Farmacias de Turno</h2> color: blue;
}
<p class="resaltado"><span>Farmacias abiertas hoy</p>
h2.destacado, ul li {
<ul> color: green;
<li>Mendoza 534</li> font-family: Verdana;
<li>San Lorenzo 1034</li> }
</ul> span {
font-style: italic;
</aside>
}
<article> span.destacado {
<h2>Noticias Locales</h2> color: yellow;
<p>Elecciones Municipales: }
<span class="destacado">15 de Julio</span>
footer p {
font-family: Verdana;
</p>
color: red;
</article> }
<article> aside {
<h2>Noticias Deportivas</h2> width: 480px;
height: 380px;
<p><span>Se terminarán las refacciones del estadio</span></p>
border: 2px solid orange;
</article> padding: 5px;
</main> margin-top: 15px;
<footer> margin-bottom: 5px;
<p>Magazine Tres Arroyos - 2023</p> margin-left: 5px;
margin-right: 5px;
</footer>
}
</body> @media only screen and (min-width:
1200px){
main {
display: flex;
flex-direction: row;
}
aside {
width: 530px;
height: 430px;
}
}

a. Indique a continuación con qué fuente, color y estilo de letra se verá cada parte del texto:

TEXTO font-family font-style color


Magazine Tres Arroyos Times normal blue
Farmacias de Turno Verdana normal green
Farmacias abiertas hoy Times italic blue
Mendoza 534 Verdana normal green
San Lorenzo 1034

Noticias Locales Times normal white


Elecciones Municipales: Times normal white
15 de Julio Times italic yellow
Noticias Deportivas Times normal white
Se terminarán las refacciones del Times normal white
estadio

Magazine Tres Arroyos - 2023 Verdana normal red

2
b. Empleando el concepto de Box-Model determine el tamaño de la caja <aside> en mobile y en
desktop

Dispositivo Ancho caja [px] - <aside> Alto caja [px] - <aside>

Mobile 480 width + 2 border_r + 2 380 width + 2 border_t + 2


border_l + 5 padding_r + 5 border_b + 5 padding_t + 5
padding_l + 5 margin_l + 5 padding_b + 15 margin_t + 5
margin_r = 504 px margin_b = 414 px

Desktop 554 px (+50 mobile) 564 px (+50 mobile)

Referencia - Box Model


Filmina 14 Layout
https://docs.google.com/presentation/d/1tnM0IZNBsITilqWsIhBx9b4NX1ST3mATXCyCy3HHd
s4/edit#slide=id.g7353d6fec6_0_57

c. Dibuje con un diagrama de cajas simple como se vería la estructura interna del elemento
<main> en mobile y desktop

Mobile

<aside>

<article>

<article>

Desktop

<aside> <article> <aside>

3
4. JS y JSON
Analice el siguiente código HTML + JS
HTML let btn = document.querySelector("#btn");
<input type="text" id="cant"> btn.addEventListener("click", visualizar);
<button id="btn">Enviar</button>
function visualizar(){
let c = 0;
JS
let arreglo = [ let g = parseInt(document.querySelector("#cant").value);
{ for(let i = 0; i<arreglo.length; i++){
"alumno" : "Perez Pedro", if(arreglo[i].calificacion >= g){
"calificacion" : 10, console.log(arreglo[i].alumno);
"legajo" : 456 console.log(arreglo[i].calificacion);
}, c = c + 1;
}
{
"alumno" : "Garcia Juana", }
"calificacion" : 8, console.log(c);
"legajo" : 412 }
},

{
" "alumno" : "Gomez Camila",
"calificacion" : 5,
"legajo" : 645

},

{
"alumno" : "Martinez Tomás",
"calificacion" : 2,
"legajo" : 459
},

{
"alumno" : "Juarez Gabriela",
"calificacion" : 9,
"legajo" : 556
}

a. Indique qué se verá por consola al enviar por el form el número 11.
Respuesta: 0
b. Indique qué se verá por consola al enviar por el form el número 7.
Respuesta:

4
5. HTML, CSS, JS, JSON
Se desea implementar una página que permita ir ingresando alumnos solo con sus nombres y
calificaciones a través de un formulario. Los alumnos se deben ir agregando uno por uno mediante un
botón “Agregar” y mediante un segundo botón “Ver” se deberá mostrar el listado de alumnos donde
aquellos que tengan calificación menor a 3 se muestran en color rojo.
a. Donde y como vincula los archivos css y js. Especifique las rutas pensando en un proyecto con la siguiente
estructura:

CSS
<head>
<link rel="stylesheet" href="css/style.css">
</head>

JS
<script src="js/js.js"></script>
</body>

b. Escriba el código HTML, CSS y JS para lograr la funcionalidad descrita de la página.


IMPORTANTE:
- Los datos se deben manejar con un arreglo de objetos JSON

HTML: index.html (solo escriba el cuerpo <body>)

<input type="text" id="alumno" placeholder="Ingresar alumno">


<input type="text" id="calificacion" placeholder="Ingresar calificacion">
<button id="btn_agregar">Agregar</button>
<button id="btn_ver">Ver</button>
<ul id="lista">

</ul>

JS: js.js

5
let arreglo = []; Ayuda JS:
document.querySelectorAll
let btn_agregar = document.querySelector("#btn_agregar"); document.querySelector
let btn_mostrar = document.querySelector("#btn_ver"); document.getElementsByClassName
let lista = document.querySelector("#lista"); document.getElementsByTagName
document.getElementById
btn_agregar.addEventListener("click", agregar); innerHTML
btn_mostrar.addEventListener("click", mostrar); classList.toggle
classList.add
classList.remove
function agregar(){ pop
let alumno = document.querySelector("#alumno").value; push
let calificacion = parseInt(document.querySelector("#calificacion").value);
let objeto = {
"alumno": alumno,
"calificacion" : calificacion
}
arreglo.push(objeto);
}

function mostrar(){
lista.innerHTML = "";
for(let i = 0; i<arreglo.length; i++){
if(arreglo[i].calificacion < 3 ){
lista.innerHTML += "<li class='destacado'>"+ arreglo[i].alumno + "</li>";
}
else {
lista.innerHTML += "<li>"+ arreglo[i].alumno + "</li>";
}
}
}

CSS: style.css

.destacado {
color: red;
}

También podría gustarte