Fast 1213-3-practica

Fundamentos de Aplicaciones y Servicios Telemáticos

Examen Parte Práctica. 3ª Convocatoria

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.

Curso 2012/2013

-1-

DIT (Departamento de Ingeniería Telemática)



EJERCICIO 1: Programación HTML/CSS (5 Puntos)

Ficheros a entregar

y además

e1-index.html
e1-estilo.css
e1-script.js
e1-jquery.js
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

Curso 2012/2013

-2-






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

Curso 2012/2013

-3-






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

Curso 2012/2013

-4-




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

Curso 2012/2013

-5-









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
prácticas.

Curso 2012/2013

-6-

es similar a .toggle estudiado en




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.

Curso 2012/2013

-7-




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%]

Curso 2012/2013

Presentar formulario con captcha aleatorio: función rand() de PHP.

-8-






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

Curso 2012/2013

-9-




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

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

Curso 2012/2013

-10-




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.

Curso 2012/2013

-11-




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

Curso 2012/2013

-12-




Figura 7. Calculadora Javascript.

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

Curso 2012/2013

-13-




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

Curso 2012/2013

-14-


Fast 1213-3-practica

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (8)

Destacado

Destacado (20)

Similar a Fast 1213-3-practica

Similar a Fast 1213-3-practica (20)

Fast 1213-3-practica