Download - 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.



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



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.



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).


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



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.


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”.



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.



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.



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.



[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.



Figura 1. Pantalla de inicio de sesión: e2-calc1.php

Figura 2. Inicio de sesión: error por campo vacío.



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.



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).



Figura 7. Calculadora Javascript.

Figura 8. Cierre de sesión (“Salir”): enlace a página de inicio (e2-calc1.php).



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;}