UNIVERSIDAD ABIERTA INTERAMERICANA

FACULTAD DE TECNOLOGÍA INFORMÁTICA

MATERIA: 18 INTRODUCCIÓN A LA PROGRAMACIÓN WEB
1er Parcial
Teórico y Práctico

Alumno……..: Fecha: Tema 1

Comisión…..:
Localización: Práctica: Teoría: Nota..:

Notas: Las preguntas en las que se seleccionen opciones se deberá optar solo por una de las posibilidades. La indicación se efectuará con
una X sobre su lateral izquierdo, será considerada nula si presenta tachaduras o enmiendas. Las respuestas deberán estar escritas con
tinta.
Las preguntas que solicitan justificación serán consideradas válidas si poseen la misma correctamente.
Cada pregunta vale 1/10.
Una vez aprobada la teoría se procederá a analizar la parte práctica realizada. En caso de que la teoría sea insuficiente no se revisará la
teoría.
Temas a evaluar: Teoría de HTML5, CSS3. Práctica de programación HTML5 y CSS3.
Requisitos para aprobar: Para que el parcial esté aprobado el alumno deberá tener correctamente desarrolladas el 60% de la teoría y el
60% del ejercicio práctico.
Tiempo: Teoría 45 minutos. Práctica 90 minutos.
Recomendaciones:
a) Lea todo el parcial antes de comenzar a responder.
b) Desarrolle una redacción clara y precisa contestando lo que la pregunta requiere.
c) Observe la ortografía ya que la misma es parte del parcial.
d) Si considera que no comprende alguna consigna antes de comenzar a contestar consulte a su profesor.

TEORIA DE HTML + CSS

1. ¿Cuándo utilizaria GET y POST?. De un ejemplo.

¿Cuándo usar GET?

El método predeterminado al enviar datos de formulario es GET.
Sin embargo, cuando se utiliza GET, los datos del formulario enviado serán visibles en el campo de dirección de la página:
 Añade datos de formulario en la URL en pares nombre / valor
 La longitud de una URL es limitada (alrededor de 3000 caracteres)
 ¡Nunca use GET para enviar datos confidenciales! (será visible en la URL)
 Útil para envíos de formularios en los que un usuario desea marcar el resultado
 GET es mejor para datos no seguros, como cadenas de consulta en Google

¿Cuándo usar POST?

Utilice siempre POST si los datos del formulario contienen información sensible o personal. El método POST no muestra los datos del formulario enviado
en el campo de dirección de la página
 POST no tiene limitaciones de tamaño y se puede usar para enviar grandes cantidades de datos.
 Los envíos de formularios con POST no se pueden marcar como favoritos

2. ¿Porqué se uitiliza VW al especificar un tamaño de letra en lugar de PX?.

Se utiliza VW para especificar un texto responsive

3. ¿Qué són y porque utilizamos los elementos semanticos?.

HTML5: la web semántica

“La semántica es un estudio del significado de palabras y frases en un idioma.”
Los elementos semánticos que ofrece html5, se caracterizan por representar un “significado”
¿Para quién?
Un elemento semántico describe claramente su significado tanto para el navegador como para el desarrollador
Ejemplos de elementos no semánticos: <div> y <span>: no dice nada sobre su contenido.
Ejemplos de elementos semánticos: <header>, <nav>, <section>, <article> etc. - Define claramente su contenido

Ejemplo de la web semántica

<article>, <aside>, <details>
<figure>, <footer>, <header>
<main>, <mark>, <nav>
<section>, <summary>, <time>

4. ¿Qué tipos de selectores conoce?

Selectores para dar estilo

Para que los estilos que creamos sean aplicados a los elementos del documento html existen varios “selectores” que veremos a continuación:
Selectores de tipo: Los utilizamos para dar estilo a todos los elementos del documento de un determinado tipo.
Un ejemplo para dar un color rojo a todos los encabezados de nivel 1 del documento html:
h1 { color: red; }
 UNIVERSIDAD ABIERTA INTERAMERICANA
FACULTAD DE TECNOLOGÍA INFORMÁTICA
MATERIA: 18 INTRODUCCIÓN A LA PROGRAMACIÓN WEB
1er Parcial
Teórico y Práctico

Los selectores universales

En lugar de seleccionar elementos de un tipo específico, el selector universal simplemente coincide con cualquier tipo de elemento:
Un ejemplo para seleccionar todos los elementos y establecer su color de fondo en amarillo.
* {background-color: yellow; }

Los selectores descendientes:

Supongamos que desea aplicar una regla de estilo a un elemento en particular solo cuando se encuentra dentro de un elemento en particular:
El siguiente ejemplo, la regla de estilo se aplicará al elemento <em> solo cuando se encuentre dentro de la etiqueta <ul>
ul em { color: yellow; }

Los selectores de clase:

Puede definir reglas de estilo basadas en el atributo de clase de los elementos. Todos los elementos que tienen esa clase serán formateados de acuerdo
con la regla definida:
.yellow { color: yellow;}
El siguiente ejemplo, la regla de estilo se aplicará a cada elemento que tenga el valor yellow en su atributo class. Ejemplo: <p class=“yellow”>hola</p>

Otra característica importante y muy utilizada en los selectores de clase es que se pueden utilizar mas de una clase por atributo, supongamos las
siguientes clases definidas.
.rojo { color: red; }
.grande {font-size: 60px;}
El siguiente ejemplo, la regla de estilo se aplicará a cada elemento que tenga el valor rojo grande en su atributo class. Ejemplo: <p class=“rojo
grande”>hola</p>

Los selectores de ID:

Puede definir reglas de estilo basadas en el atributo id de los elementos.
#granletraroja { color: red;
font-size: 60px;}
En el siguiente ejemplo, se aplicarán todas las reglas definidas en los elementos que contengan el id granletraroja: <p id=“granletraroja”>hola</p>
Recuerde que no deberá tener mas de un elemento html con el mismo id, el valor del atributo id debe ser ÚNICO.
Otra diferencia es que con selectores de id solo puede asignar un estilo definido, a diferencia de las clases que puede asignarle varias clases a un
elemento

Otra gran ventaja de los selectores de ID, es que se pueden especificar:

#granletraroja h1{ color: red;
font-size: 60px;}
En el siguiente ejemplo, se aplicarán todas las reglas definidas en los elementos h1, pero solo en aquellos que contengan id=granletraroja:
<h1 id=“granletraroja”>hola</h1> (éste aplica)
<h1 id=“granletraverde”>hola</h1> (éste no aplica)

También puede combinar los distintos selectores de id como se muestra a continuación:

#content, #footer, #supplement {left: 510px; width: 200px;}
En este caso se aplicará el mismo estilo a todos los elementos que contengan los id’s listados en la definición de estilos.

Los selectores de atributos:

También puede aplicar estilos a elementos HTML con atributos particulares. La regla de estilo a continuación coincidirá con todos los elementos
<input> que tengan un atributo type con un valor de texto:
input[type = "text"]{
color: #000000;
}
Una ventaja de este método es que el elemento <input type = "submit" /> no se ve afectado, y el color se aplica solo a los campos de texto deseados

5. Los atributos width y height:

o Pueden especificarse dentro del atributo style.

o Pueden especificarse dentro del atributo.
o Todas son correctas.
o Ninguna es correcta.

6. ¿Qué implica la subcontratación para la comunicación de API’s?

A.P.I.: Application programming Interface.

Representa un conjunto de reglas (código) y especificaciones que las aplicaciones (web) pueden seguir para comunicarse entre ellas.
Permiten la reutilización de funciones ya existentes en otros software de una manera estandarizada. Podemos considerar a las APIs como una
“subcontratación” de funciones.
Subcontratación -> Imponen condiciones (datos entradas / datos salidas / credenciales)

Código en HTML + Código en JS.

 UNIVERSIDAD ABIERTA INTERAMERICANA
FACULTAD DE TECNOLOGÍA INFORMÁTICA
MATERIA: 18 INTRODUCCIÓN A LA PROGRAMACIÓN WEB
1er Parcial
Teórico y Práctico

Elementos con ID y estilos predefinidos

<a class="weatherwidget-io" href="https://forecast7.com/es/n34d60n58d38/buenos- aires/" data-label_1="BUENOS AIRES" data- label_2="WEATHER"

Script genérico en base al elemento

<script>
!function(d,s,id){var
js,fjs=d.getElementsName(s)[0];if(!d.getElementById(i d)){js=d.create (s);js.id=id;js.src='https://weatherwidget.io/js/widget.
min.js';fjs.parent.insertBefore(js,fjs);}}(document,'script ','weatherwidget-io-js');
</script>

API’s: Mercado Pago, Weather widget, API Key (geolocalización)

7. ¿Bajo que situación utilizaría XHTML por sobre HTML?

Las diferencias entre esas dos variantes son básicamente sintácticas: la sintaxisHTML está inspirada en la norma SGML (aunque no la cumple
estrictamente), mientras que la sintaxis XHTML está basada en la recomendación XML (aunque tampoco la cumple estrictamente). ... En XHTML los
documentos tienen que ser "bien formados".

mi opinión es... si no vas a servir el documento como application/xml+xhtml, entonces no veo por que complicarse con xhtml, simplemente utiliza html.
en teoría, las diferencia entre xhtml y html es que en xhtml te permite hacer cosas que puedes hacer en xml. en cuanto a javascript en xhtml y html,
básicamente sigue siendo igual. donde hay gran diferencia es en la representación del DOM. por ejemplo, en xhtml no existe document.write. en adición,
creo que los elementos en DOM tiene un namespace, cosa que no existe en html.

https://www.w3c.es/Traducciones/es/Markup/2004/xhtml-faq.htm
http://www.mclibre.org/consultar/htmlcss/html/html-xhtml-diferencias.html
https://definicion.de/xhtml/
https://www.w3.org/International/articles/serving-xhtml/index.es
https://desarrolloweb.com/articulos/diferencias-html-xhtml.html

8. Que color obtiene el elemento H1

o Obtiene color Azul.

o Obtiene color Aqua.
o Obtiene color Green.
o Obtiene color Pink.

Archivo HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Estilos/estilo1.css">
</head>
<body>
<style>
h1
{
color:blue
}
</style>
<div id="divTitulo">
<h1 id="PrimerParcial" class="Colorh1" style="background-color:aqua;">Primer parcial IPW</h1>
</div>
</body>
</html>

Archivo CSS
#PrimerParcial {
color:green;
}

.Colorh1{
color:pink;
}
 UNIVERSIDAD ABIERTA INTERAMERICANA
FACULTAD DE TECNOLOGÍA INFORMÁTICA
MATERIA: 18 INTRODUCCIÓN A LA PROGRAMACIÓN WEB
1er Parcial
Teórico y Práctico

Ejercicio_Codigo_Te
oria.rar

9. La utilización de Responsive permite modificar el contenido acorde a la capacidad del dispositivo. Permite especificar el ancho y alto de la ventana
gráfica y cambiar propiedades del css.

10. La propiedad display dependiendo su valor permite:

 Block level: Los elementos con la propiedad block siempre comienzan en una nueva línea y toma todo el ancho
disponible.

 None: Es usado para esconder elementos sin eliminarlos, y mediante JavaScript se pueden mostrar (Menu
escondido)

 Inline level: Los elementos con la propiedad inline, no empiezan en una nueva línea y toma el ancho que
necesiten los elementos (ej: texto, el recuadro termina en la o de textO).

__________________________
Firma del Alumno
 UNIVERSIDAD ABIERTA INTERAMERICANA
FACULTAD DE TECNOLOGÍA INFORMÁTICA
MATERIA: 18 INTRODUCCIÓN A LA PROGRAMACIÓN WEB
1er Parcial
Teórico y Práctico
Parte de programación HTML + CSS3.

A. 60% de la práctica: Se desea que el alumno complete en la siguiente grilla con los errores identificados y remediados dentro del código de la
página HTML. Asimismo, el alumno deberá agregar los siguientes elementos y estilos según se especifica en la grilla. Es requisito que el
alumno cumpla con el punto A para poder avanzar con los puntos B, C y D.

Descripción Detalle Realizado

Error HTML/CSS
Error HTML/CSS
Error HTML/CSS
Error HTML/CSS
Error HTML/CSS
Error HTML/CSS
Agregar elemento Agregar un formulario con dos input text y darles estilo a través del elemento input text.
Agregar elemento Agregar un botón que con el click direccione a la siguiente página.
Agregar elemento Agregar una imagen en la pantalla de login que ocupe el espacio gris y no se repita.
Agregar elemento Agregar la habilidad de cuando se realiza un click en el menú se desplace hacia la sección de interés.
Agregar elemento Agregar una tabla de precios del servicio que se encuentre centrada y cuente con al menos 3 columnas.
Agregar elemento Agregar dos columnas dentro de la sección “Nosotros” con nombres, foto y formación académica.

B. 10% de la práctica: Se desea que el alumno convierta ambas páginas en Responsive.

C. 20% de la práctica: Se desea que el alumno mediante la utilización de elementos HTML avanzado genere un web storage y persista los datos

del usuario que ingresó en el login y lo muestre en la pantalla de home.

D. 10% de la práctica: Libre del alumno para que agregue elementos o estilos por fuera de los solicitados en el punto A, B y C.

Grilla de evaluación final parte práctica:

Sección práctica Puntaje objetivo Puntaje alcanzado

A – HTML + CSS 60%
B - Responsive 10%
C - WebStorage 20%
D – Libre alumno 10%

Al finalizar el examen debe generar un archivo .rar con una carpeta con el sitio web, colocarle contraseña [su apellido + ], y depositarla en la carpeta

G:/ParcialIPW/Apellido. Notificar al profesor una vez depositado el archivo para confirmar que este correctamente guardado.

____________________
Firma del Alumno