Fast 1213-3-practica
-
Upload
juanantejero -
Category
Documents
-
view
74 -
download
0
Transcript of Fast 1213-3-practica
Fundamentos de Aplicaciones y Servicios Telemáticos Examen Parte Práctica. 3ª Convocatoria
Curso 2012/2013 -1- DIT (Departamento de Ingeniería Telemática)
FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMÁTICOS
2º Curso Grado en Ingeniería de las Tecnologías de Telecomunicación
Curso 2012/2013 - 3ª Convocatoria (Parte Práctica) TIEMPO: 180 MIN
NORMAS E INSTRUCCIONES *** Las instrucciones para la realización de este examen se encuentran publicadas en la Web de la Asignatura, en el enlace "Instrucciones Examen 3ª Convocatoria 2012/2013- Parte Práctica", ubicado dentro de la carpeta "Examen 3ª Convocatoria 2012/2013" (dentro de la sección "Contenido del curso"). Antes de comenzar a realizar este examen, debe leer detenidamente dichas instrucciones.
Fundamentos de Aplicaciones y Servicios Telemáticos Examen Parte Práctica. 3ª Convocatoria
Curso 2012/2013 -2- DIT (Departamento de Ingeniería Telemática)
EJERCICIO 1: Programación HTML/CSS (5 Puntos)
Ficheros a entregar
e1-index.html
e1-estilo.css
e1-script.js
e1-jquery.js
y además
Todos los ficheros y
directorios proporcionados
para el ejercicio
Funcionalidad:
Deberá codificar una aplicación web que estará compuesta de varios ficheros: código
HTML, código JavaScript y hoja de estilo CSS. Todos los ficheros estarán incluidos en
un directorio de nombre e1, y en el mismo existirá un subdirectorio css para la hoja
de estilo y un subdirectorio js para los ficheros JavaScript.
1. Deberá aplicar una hoja de estilos (el fichero se llamará e1-estilo.css. y estará
incluido en la carpeta css ) a la página e1-index.html que se le proporciona
para que tenga el aspecto que aparece en la figura e1-figura01.png. Tenga en
cuenta que puede añadir etiquetas o atributos a la página e1-index.html,
pero no puede borrar los ya existentes.
Ilustración 1: e1-figura01.png
Fundamentos de Aplicaciones y Servicios Telemáticos Examen Parte Práctica. 3ª Convocatoria
Curso 2012/2013 -3- DIT (Departamento de Ingeniería Telemática)
Observe que hay texto en la pagina HTML que NO se muestra. Una de las
posibles propiedades que hace que un elemento sea visible o no es la
propiedad “display”. Si toma el valor “none” el elemento no se muestra. Si
toma el valor “block” o “inline” el elemento se muestra como de bloque
o en línea.
[T1-20%] Maquetación de la página: layout, borders, etc.
[T2-20%] Estilos aplicados: colores, fondos, selectores, texto oculto..
2. [T3-15%] Añadir a la aplicación código JavaScript de forma que al pulsar el botón
se solicite al usuario si desea ver o no la zona oculta. Si la respuesta es positiva
se muestra, si es negativa se oculta. El código estará en un fichero de nombre e1-
script.js, incluido en la carpeta js. No puede usar jQuery en este apartado.
Observe las secuencias. A la izquierda, el resultado de hacer clic sobre el
botón y pulsar “Aceptar”. A la derecha, una vez mostrado el texto oculto, el
resultado de hacer clic sobre el botón y pulsar “Cancelar”.
Ilustración 2: tarea3.png
3. [T4-15%]: Añadir un nuevo fichero e1-jquery.js (en la carpeta js) a la
aplicación que permita mediante jQuery que al pulsar sobre cualquier ítem de una
lista ordenada se pueda modificar el contenido de dicho elemento, como se observa
en las siguientes figuras.
Fundamentos de Aplicaciones y Servicios Telemáticos Examen Parte Práctica. 3ª Convocatoria
Curso 2012/2013 -4- DIT (Departamento de Ingeniería Telemática)
Observe la secuencia: clic sobre el texto del primer elemento de la lista,
tecleamos un texto, pulsamos “Aceptar” y observe que el texto del primer
elemento queda modificado (si recarga la página volverá al texto original).
Ilustración 3: tarea4.png
4. [T5-20%]: Mediante jQuery permitir que al pasar el ratón sobre cualquier párrafo
este cambie su fondo a verde. Al salir el ratón del párrafo debe volver al color
original. Para ello deberá utilizar el evento hover de jQuery que se explica
posteriormente. Añadir el código necesario en el fichero e1-jquery.js
Observe la secuencia, con el cursor en grande: cursor en primer párrafo,
cursor en párrafo de la derecha, en párrafo central y cursor en lista ordenada.
Ilustración 4: tares5.png
Fundamentos de Aplicaciones y Servicios Telemáticos Examen Parte Práctica. 3ª Convocatoria
Curso 2012/2013 -5- DIT (Departamento de Ingeniería Telemática)
5. [T6-10%]: Mediante jQuery permitir que al hacer clic sobre una imagen se pueda
modificar su tamaño, alterando la altura de la imagen. Observe que al solicitar la
nueva altura mostrará por defecto el valor actual. Añadir el código necesario en el
fichero e1-jquery.js.
Ilustración 5: tarea6.png
NOTAS:
Descargue de WebCT (de la misma carpeta del examen en la que se
encuentra este documento PDF) el archivo "P_Codigo.tar.gz".
Recuerde que puede añadir etiquetas o atributos a la página e1-
index.html, pero no puede borrar las etiquetas o atributos ya
existentes.
Debe colocar sus apellidos y nombre en los ficheros e1-javascript.js,
e1-jquery.js y e1-estilo.css como comentarios en la primera línea
de cada fichero.
Recuerde que el fichero de estilo debe ir en el directorio css y los ficheros de
código en el directorio js.
Todas las figuras de este enunciado están en la carpeta figuras.
Los colores aplicados son “silver”, “cyan”, “green” y “yellow”.
Fundamentos de Aplicaciones y Servicios Telemáticos Examen Parte Práctica. 3ª Convocatoria
Curso 2012/2013 -6- DIT (Departamento de Ingeniería Telemática)
Fuentes: courier para zona oculta, fuente por defecto para el resto.
Tamaño de fuente al 80%.
Valores de la propiedad display: none | block | inline
El fichero con la librería jQuery está en el directorio principal e1, con nombre
lib-jquery.js.
Las capturas están realizadas con la máquina virtual de la asignatura,
resolución 800x600, y navegador iceweasel.
Documentación adicional: funciones y eventos en jQuery
Función attr de jQuery
Obtiene o modifica el valor del atributo pasado como parámetro.
Sintaxis
.attr(atributo)
.attr(atributo,valor_para_el_atributo)
Evento hover, que tiene dos parámetros:
$( elemento ). hover (
function(){ // se ejecuta al “entrar” el ratón
…..
},function(){ // se ejecuta al “salir” el ratón
…...
});
La forma de utilizar este evento es similar a .toggle estudiado en
prácticas.
Fundamentos de Aplicaciones y Servicios Telemáticos Examen Parte Práctica. 3ª Convocatoria
Curso 2012/2013 -7- DIT (Departamento de Ingeniería Telemática)
EJERCICIO 2: Programación PHP/Javascript (5 Puntos)
Ficheros a entregar e2-calc1.php
e2-calc2.php
Funcionalidad:
El ejercicio consiste en la creación de dos páginas, con ayuda de los lenguajes PHP y
Javascript.
La primera página, e2-calc1.php, consiste en presentar un formulario de inicio de
sesión, donde el usuario ha de introducir un usuario y contraseña válidos, y un código
de validación (captcha), el cual ha de coincidir con el presentado en pantalla. Este
código será aleatorio cada vez, y puede emplear la función de biblioteca de PHP
rand(), cuyo prototipo es:
int rand ( int $min , int $max )
Puede utilizarla de la siguiente forma:
<?php $num = rand(0,9999); echo $num; ?>
El único usuario / contraseña válido para iniciar sesión es: fast / fastfast. Esta
validación se realizará en el mismo código PHP (no es necesario acceder a fichero de
usuarios). En el caso de que se introduzca un usuario o contraseña inválido, no se
permitirá el acceso a la siguiente página.
Una vez que el usuario ha accedido correctamente, se le mostrará la siguiente página:
e2-calc2.php. Esta página presentará una calculadora que se ha de implementar en
Javascript. También se le da la opción al usuario de salir de la sesión actual.
Se han de emplear sesiones de PHP para controlar al usuario registrado.
A continuación, se desglosan las tareas a realizar, junto con el pseudocódigo de las
páginas.
Fundamentos de Aplicaciones y Servicios Telemáticos Examen Parte Práctica. 3ª Convocatoria
Curso 2012/2013 -8- DIT (Departamento de Ingeniería Telemática)
Tareas:
Tareas comunes a los dos ficheros:
[T1-5%] Mostrar apellidos y nombre en el cuerpo de sendas páginas.
[T2-10%] Utilizar sesiones de PHP (session_start) en los dos ficheros.
Pseudocódigo de e2-calc1.php:
e2-calc1.php
si (formulario ha sido enviado): procesar formulario
si usuario / contraseña == fast / fastfast
inicio de sesión: ajustar variable de sesión con el nombre del usuario
mostrar enlace de acceso a la página de Calculadora: "calc2.php"
si no
acceso denegado
mostrar enlace a la página de inicio: "calc1.php"
fsi
si no
mostrar formulario: usuario, contraseña y código captcha aleatorio
Validación de campos rellenos y código captcha mediante Javascript
fsi
Tareas a realizar mediante e2-calc1.php:
[T3-15%] Presentar formulario con captcha aleatorio: función rand() de PHP.
Fundamentos de Aplicaciones y Servicios Telemáticos Examen Parte Práctica. 3ª Convocatoria
Curso 2012/2013 -9- DIT (Departamento de Ingeniería Telemática)
[T4-15%] Validación del formulario: usuario/contraseña rellenos y código
captcha correcto.
[T5-10%] Comprobar si “usuario == fast” y “contraseña == fastfast” (no es
necesario acceso a fichero).
[T6-5%] Ajustar variable de sesión con el nombre del usuario.
Pseudocódigo de e2-calc2.php:
e2-calc2.php
si (no se ha pulsado botón 'salir'):
mostrar formulario: botones que realizan operaciones mediante Javascript
si no
eliminar variable de sesión
destruir sesión
mostrar enlace a la página de inicio: "calc1.php"
fsi
Tareas a realizar mediante e2-calc2.php:
[T7-10%] Presentar formulario con calculadora.
[T8-25%] Calculadora Javascript: suma, resta, multiplicación, división y
borrado del resultado.
[T9-5%] Eliminar variable de sesión (nombre usuario) y destruir sesión.
A continuación, se muestran algunas capturas de pantalla con el funcionamiento
esperado.
Fundamentos de Aplicaciones y Servicios Telemáticos Examen Parte Práctica. 3ª Convocatoria
Curso 2012/2013 -10- DIT (Departamento de Ingeniería Telemática)
Figura 1. Pantalla de inicio de sesión: e2-calc1.php
Figura 2. Inicio de sesión: error por campo vacío.
Fundamentos de Aplicaciones y Servicios Telemáticos Examen Parte Práctica. 3ª Convocatoria
Curso 2012/2013 -11- DIT (Departamento de Ingeniería Telemática)
Figura 3. Inicio de sesión: error por código inválido.
Figura 4. Inicio de sesión: usuario y/o contraseña inválido.
Fundamentos de Aplicaciones y Servicios Telemáticos Examen Parte Práctica. 3ª Convocatoria
Curso 2012/2013 -12- DIT (Departamento de Ingeniería Telemática)
Figura 5. Inicio de sesión: datos de acceso válidos.
Figura 6. Inicio de sesión correcto: enlace a página de calculadora (e2-calc2.php).
Fundamentos de Aplicaciones y Servicios Telemáticos Examen Parte Práctica. 3ª Convocatoria
Curso 2012/2013 -13- DIT (Departamento de Ingeniería Telemática)
Figura 7. Calculadora Javascript.
Figura 8. Cierre de sesión (“Salir”): enlace a página de inicio (e2-calc1.php).
Fundamentos de Aplicaciones y Servicios Telemáticos Examen Parte Práctica. 3ª Convocatoria
Curso 2012/2013 -14- DIT (Departamento de Ingeniería Telemática)
NOTAS:
Se han de entregar los 2 ficheros siguientes: e2-calc1.php y e2-calc2.php
(nombres exactos).
Debe emplear XHTML para codificar las páginas.
Puede valerse de la solución a los ejercicios de las prácticas de la asignatura.
Cada fichero entregado, ha de contener dos líneas tras la etiqueta body del
cuerpo, especificando el nombre y apellidos del alumno, tal y como se muestra
en las capturas de pantalla anteriores.
Recuerde utilizar las sesiones de PHP.
Puede emplear el fichero de estilos siguiente (es opcional):
estilo.css
/* General */
body {font-family: verdana,arial, sans-serif; font-size: 10pt;}
/* Contenido */
h1 {font-size: 16pt; font-weight: bold; color: #0066CC;}
h2 {font-size: 14pt; font-weight: bold; font-style: italic; color: black;}
h3 {font-size: 12pt; font-weight: bold; color: black;}
h4 {font-size: 12pt; font-weight: bold; color: red;}
/* Formulario y errores */
form.borde {border: 1px dotted #0066CC; padding: 0.5em 0.2em; width: 80%;}
form p {clear: left; margin: 0.2em; padding: 0.1em;}
form p label {float: left; width: 25%; font-weight: bold;}
/* Enlaces */
a {font-size: 10pt; font-weight: bold; color: #006600;}