ESCUELA SUPERIOR POLITÉCNICA DEL LITORAL
FACULTAD DE INGENIERÍA EN ELECTRICIDAD Y COMPUTACIÓN
DESARROLLO DE APLICACIONES WEB
PRIMERA EVALUACIÓN - I TÉRMINO 2016
Nombre: ______________________________________ Matrícula:
____________________
TEMA 1 (20 PUNTOS)
Seleccione la respuesta correcta:
1. Un HTTP status con código 3XX (por ejemplo 301) se refiere a:
a. Éxito
b. Error en el Servidor
c. Redirección
2. El grid system de bootstrap esta basado en:
a. 8 columnas
b. 12 columnas
c. 24 columnas
3. Un programador desarrolla un sitio que consume el API de flickr por medio de AJAX y en la
consola se le muestra el siguiente error: “XMLHttpRequest
cannot
load
http://api.flickr.com/….”. Cúal puede ser la posible causa?
a. El navegador no soporta AJAX
b. AJAX no puede hacer llamadas directamente a un servicio externo
c. Los parametros enviados están incompletos
4. Cúal es la primera línea de un HTML5?
a. <!DOCTYPE html>
b. <!DOCTYPE html5>
c. <DOCTYPE html5>
5. Cómo se puede quitar el subrayado a un link?
a. a {underline:none;}
b. a {text-decoration:none;}
c. a {decoration:no-underline;}
6. Cúal es la opción para aplicar el siguiente color a todos los elementos h1?
a. h1.all {background-color:#FFFFFF;}
b. h1 {background-color:#FFFFFF;}
c. all.h1 {background-color:#FFFFFF;}
7. Cómo puedo agregar mas de un selector para aplicar un estilo CSS?
a. Separando cada selector por un espacio en blanco
b. Separando cada selector por el simbolo ‘+’
c. Separando cada selector por una coma
8. Cómo se puede agregar negritas a un texto?
a. font:bold;
b. style:bold;
c. font-weight:bold;
9. Como puedo eliminar las viñetas de una lista?
a. list-style-type: none;
b. list-type: none;
c. list-item: none;
10. Identifique las partes del siguiente estilo CSS:
p .card { line-height: 1.5em; }
selector: __________p .card________________
propiedad: ________ line-height___________
valor: ___________1.5em; ________________
TEMA 2 (25 PUNTOS)
1. Grafique y explique el Box Model en CSS
2. Por qué es necesario incluir el atributo alt en un tag img? Mencione al menos dos razones.
-Por si alguna razón la imagen falla al cargar o si una persona no vidente se encuentra en la página
con un lector y llega a la imagen, el atributo alt le dará un contexto de qué hay en la imagen.
-Útil para el SEO para cuando los motores de búsqueda empiecen a realizar una búsuqeda sea más
fácil para ellos saber qué hay en una imagen.
3. Cúal es la diferencia entre cargar un archivo javascript en el body en vez de cargarlo en el
head?
Debes evitar poner los scripts en el header. El renderizado e interpretacion del HTML se
realiza a medida que el navegador encuentra los elementos en tu documento HTML. Por lo
tanto si encuentra en la cabecera una etiqueta script, pues tendrá que esperar a que el
navegador cargue el script para continuar con el renderizado de la pagina por lo que
verías el navegador con la pantalla en blanco, comportamiento que uno desea evitar.
4. Explique cómo funciona un requerimiento AJAX en un sitio?
1. El navegador crea una llamada de JavaScript que luego activará XMLHttpRequest.
2. En segundo plano, el navegador web crea una solicitud HTTP al servidor.
3. El servidor recibe, recupera y envía los datos al navegador web. (XML)
4. El navegador web recibe los datos solicitados que aparecerán directamente en la página.
No se necesita recargar.
5. Explique al menos 3 tecnicas de Responsive Web Design para el diseño de sitios
Viewport.- Define la zona visible/disponible del navegador
Media Queries.- Inspeccionan las características físicas de los dispositivos y navegadores que
renderizan el contenido.
Multimedios.- Todas las imágenes deben redimensionarse
TEMA 1 (10 PUNTOS)
1. Seleccione la o las opciones con los selectores para aplicar a la etiqueta con el texto
“Recursos”
<body>
<nav class="nav-bar" id="navigator">
<ul>
<li><a id='id1' class="enlace">Principal</a></li>
<li><a id='id2' class="enlace">Recursos</a></li>
<li><a id='id3' class="enlace">Contacto</a></li>
</ul>
</nav>
</body>
a.
b.
c.
d.
*[class~=“enlace”]
nav.navigator ul > li > a[2]
body li:nth-child(2)
[id^="id2"]
2. Escoja la opción que contenga la forma correcta para cargar una hoja de JavaScript externa
a. <script type="text/javascript" src="code.css">
b. <script type="text/javascript" src="code.js">
c. <link type="text/javascript" src="code.js">
d. <script type="text/stylesheet" src="code.js">
3. Escoja la opción con la propiedad para cambiar la fuente de un elemento
a. text-font:
b. font-family:
c. family-font:
d. text-fontfamily:
4. Seleccione la o las opciones con el o los atributos de la etiqueta img
a. action
b. url
c. src
d. link
5. Seleccione el término que defina módulo de css que utiliza filas y columnas para maquetar
elementos de HTML.
a. flexbox
b. grid
c. float
d. media queries
TEMA 2 (15 PUNTOS)
1. [4 puntos] Explique 2 ventajas y 2 desventajas de utilizar JSON versus XML.
Ventajas:
-JSON es menos estricto en su formato, es más simple.
-JSON tiene una velocidad de procesamiento alta.
Desventajas:
-No es extensible como XML.
-No soporta grandes cargas.
2.- [4 puntos] Explique qué es web responsive y 3 técnicas para aplicar web responsive a un sitio
web.
Es una técnica de diseño web que busca la correcta visualización de una misma página en distintos
dispositivos. Desde ordenadores de escritorio a tablets y móviles. Entre algunas técnicas tenemos:
Viewport, GridView, Media Queries, entre otras.
3.- [2 puntos] Explique la diferencia entre framework y librería.
Framework. (Infraestructura o armazón)
Arquitectura del software
• Determina el desarrollo
• Usan librerías
• Aplicaciones nuevas e independientes
• PEjemplo:
• Angular JS (Google)
• Ember.js
• Meteor.js
Librería.(Biblioteca)
• Funciones de ayuda
• Que interactúan entre ellas
• P.E.:
• JQuery
• JQuery UI
• Dojo Toolkit
• React (Facebook)
• Moment.js
0
