Guía de Estudio Nro. VIII
Guías de estudio / Curso WebApp
Seminario / Módulo I
Propósito.
El presente proyecto busca promover en el estudiante el carácter investigativo y la habilidad de analizar metodologías de uso habitual para el desarrollo de sistemas informáticos.
Esquema de estudio.
A continuación se detallan los temas que se deben desarrollar, una descripción general del mismo, y un conjunto de actividades que se recomienda sean desarrolladas para una mejor asimilación de los conceptos.
Lectura previa.
Se aconseja la lectura de los capítulos I, II, III, IV, XVI, XVII, XVIII, XIX y XX del libro “Ingeniería del Software: Un enfoque práctico”, de Roger Pressman, editorial Mc Graw Hill.
Actividad Práctica
1. Ejecute a página de Inicio de la WebApp construida.
Describa casos de prueba que controlen su correcto funcionamiento.
Por ejemplo:
Caso de prueba: Control de enlaces absolutos a recursos externos.
- Permitir localizar de forma eficiente un recurso externo.
- Verificar si cada enlace direcciona el foco al sitio indicado.
Objeto de prueba name: ubicación.
Leyenda del link "Ver mapa + grande".
Situación
|
Resultado
|
Modificación
|
Fallas posibles
|
Solución
|
Cargar el objeto incrustado en la página de inicio |
Correcto |
Validar disponibilidad. |
Enlace al recurso interrumpido.
Indisponibilidad del recurso llamado.
|
Reprogramar.
Establecer retroalimentación en caso de falla por
conexión o indisponibilidad y redirigir
el enfoque a la página de Inicio.
Cargar una imagen de reemplazo temporario por defecto. Reintentar re conexión intermitente. Dar aviso de la disponibilidad en caso de obtener el vínculo. |
Ejecutar evento click sobre el enlace |
Incorrecto. Se abre la aplicación Google Maps sobre la ventana principal TSL |
Abrir una nueva ventana. |
Enlace al recurso interrumpido. |
Reprogramar.
Establecer retroalimentación en caso de falla por
conexión y dirigir el enfoque a la
página de Inicio.
|
…
|
…
|
…
|
…
|
…
|
Enumere las pruebas que se realizaron sobre este componente.
Ejecute casos de prueba que induzcan al error.
Por ejemplo: "Oprimir el botón enviar sin cargar los datos solicitados por el formulario".
Describir la retro alimentación del proceso (para el ejemplo: "Completa este campo ").
Sugerir cambios de ser necesarios (para el ejemplo: "Ninguno").
Si lo desea puede usar un cuadro similar al del ejercicio anterior.
3. Retorne a la página de Inicio. Realice pruebas de facilidad de uso en la zona 4.
¿Cómo podría dinamizarse esta zona? ¿Por qué no supera las pruebas de interactividad?
¿Qué categoría de usuarios podría estar interesado en leer la información desplegada? ¿Cómo podría un visitante conocer + acerca de las compra y el uso de tiempos compartidos Interval International?
¿A qué requerimiento de análisis responde este diseño?
4. El siguiente guión está enlazado a la página de Inicio. Explique su funcionamiento. Depure el código:
// JavaScript Document
function efectotitulo() {
window.document.getElementById("imagenreserva").addEventListener('mouseover', function(){
window.document.getElementById("leyenda").style.color = "rgba(51,51,51,1)"; /* Resaltar la leyenda en color negro */
window.document.getElementById("leyenda").style.fontSize = "13px";
window.document.getElementById("tituloreserva").style.top = "130px";
}
,false);
window.document.getElementById("cuerpo").addEventListener('mouseout', function(){
window.document.getElementById("leyenda").style.color = "rgba(51,51,51,0.7)"; /* Resaltar la leyenda en color negro */
window.document.getElementById("leyenda").style.fontSize = "12px";
window.document.getElementById("tituloreserva").style.top = "140px";
}
,false);
} // Fin función evento título
// Asociar el evento según el navegador
if (document.addEventListener){
window.addEventListener('load',efectotitulo,false); // Chrome
} else {
window.attachEvent('onload',efectotitulo);
}
5. Ejemplifique cómo podría re utilizarse el sig. código y con qué objetivos:
<script type="text/javascript" src="file:///C|/Escuela2013/Jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="file:///C|/Escuela2013/Jquery/coin-slider.js"></script>
<script type="text/javascript"> <!--Activar el plug in -->
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
});
</script>
Explique cómo hacer uso de la biblioteca de códigos JavaScript / JQuery.
6. Regrese a la página de Inicio ¿Cómo solucionó el problema de solapamiento entre el menú de navegación superior y el visor Jquery incrustado?
Identifique el código desarrollado en clase para solucionar este problema.
Los alumnos pertenecientes al grupo 2013 deberán subir la documentación del proyecto al blog para su corrección. Fecha de presentación: 20/04/2014.
La bibliografía sugerida es optativa. Cada grupo deberá revisar la bibliografía utilizada en las materias Procesamiento de datos I, II y III y sus correspondientes Prácticas, según el año en que las mismas fueron cursadas.
Adaptación 2012
1. Objeto de prueba name: "patrocinadores".
2. Active la página de contacto de la aplicación web construida.
Enumere las pruebas que se realizaron sobre el formulario diseñado.
Ejecute casos de prueba que induzcan al error.
Por ejemplo: "Oprimir el botón enviar sin cargar los datos solicitados por el formulario".
Describir la retro alimentación del proceso (para el ejemplo: "Completa este campo ").
Sugerir cambios de ser necesarios (para el ejemplo: "Ninguno").
Si lo desea puede usar un cuadro similar al del ejercicio anterior.
3. Retorne a la página de Inicio. Realice pruebas de facilidad de uso.
¿Supera las pruebas de interactividad?
¿Qué categoría de usuarios podría estar interesado en leer la información desplegada?
¿A qué requerimiento de análisis responde este diseño?
4. El siguiente guión está enlazado a la página de Disfraces. Explique su funcionamiento. Depure el código:
<script language="JavaScript" type="text/javascript">
var i = 0;
function md(){
if (i > -250){
window.i = window.i - 25;
document.getElementById("imagentiraI").style.left = String(i) + "px";
document.getElementById("imagentiraII").style.left = String(i) + "px";
document.getElementById("imagentiraIII").style.left = String(i) + "px";
document.getElementById("imagentiraIV").style.left = String(i) + "px";
document.getElementById("imagentiraV").style.left = String(i) + "px";
document.getElementById("imagentiraVI").style.left = String(i) + "px";
document.getElementById("imagentiraVII").style.left = String(i) + "px";
document.getElementById("imagentiraVIII").style.left = String(i) + "px";
document.getElementById("imagentiraIX").style.left = String(i) + "px";
} /* fin if */
}/* fin función md */
</script>
5. Ejemplifique cómo podría re utilizarse el sig. código y con qué objetivo:
<script language="JavaScript" type="text/javascript">
function ampliar(objeto, j){window.document.getElementById("imagenampliada").src= objeto;
j= parseInt(j);
window.document.getElementById("descripcionimagen").value = descripcion[j];
window.document.getElementById("modeloelegido").value = codigo[j];
}
</script>
6. Regrese a la página Disfraces ¿Cómo solucionó el desplazamiento de la tira de imágenes con los diseños?
