Fast 1213-3-practica

Click here to load reader

  • date post

    13-Jun-2015
  • Category

    Documents

  • view

    63
  • download

    0

Embed Size (px)

Transcript of Fast 1213-3-practica

  • 1. Fundamentos de Aplicaciones y Servicios TelemticosExamen Parte Prctica. 3 ConvocatoriaFUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS 2 Curso Grado en Ingeniera de las Tecnologas de TelecomunicacinCurso 2012/2013 - 3 Convocatoria (Parte Prctica) TIEMPO: 180 MINNORMAS E INSTRUCCIONES *** Las instrucciones para la realizacin de este examen se encuentran publicadas en la Web de la Asignatura, en el enlace "Instrucciones Examen 3 Convocatoria 2012/2013- Parte Prctica", ubicado dentro de la carpeta "Examen 3 Convocatoria 2012/2013" (dentro de la seccin "Contenido del curso"). Antes de comenzar a realizar este examen, debe leer detenidamente dichas instrucciones.Curso 2012/2013-1-DIT (Departamento de Ingeniera Telemtica)

2. Fundamentos de Aplicaciones y Servicios TelemticosExamen Parte Prctica. 3 ConvocatoriaEJERCICIO 1: Programacin HTML/CSS (5 Puntos)Ficheros a entregary ademse1-index.html e1-estilo.css e1-script.js e1-jquery.js Todos los ficheros y directorios proporcionados para el ejercicioFuncionalidad: Deber codificar una aplicacin web que estar compuesta de varios ficheros: cdigo HTML, cdigo JavaScript y hoja de estilo CSS. Todos los ficheros estarn 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 pgina 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 aadir etiquetas o atributos a la pgina e1-index.html, pero no puede borrar los ya existentes.Ilustracin 1: e1-figura01.pngCurso 2012/2013-2-DIT (Departamento de Ingeniera Telemtica) 3. Fundamentos de Aplicaciones y Servicios TelemticosExamen Parte Prctica. 3 ConvocatoriaObserve 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 lnea. [T1-20%] Maquetacin de la pgina: layout, borders, etc. [T2-20%] Estilos aplicados: colores, fondos, selectores, texto oculto..2. [T3-15%] Aadir a la aplicacin cdigo JavaScript de forma que al pulsar el botn 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 cdigo 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 botn y pulsar Aceptar. A la derecha, una vez mostrado el texto oculto, el resultado de hacer clic sobre el botn y pulsar Cancelar.Ilustracin 2: tarea3.png3. [T4-15%]: Aadir un nuevo fichero e1-jquery.js (en la carpeta js) a la aplicacin 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-DIT (Departamento de Ingeniera Telemtica) 4. Fundamentos de Aplicaciones y Servicios TelemticosExamen Parte Prctica. 3 ConvocatoriaObserve 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 pgina volver al texto original).Ilustracin 3: tarea4.png4. [T5-20%]: Mediante jQuery permitir que al pasar el ratn sobre cualquier prrafo este cambie su fondo a verde. Al salir el ratn del prrafo debe volver al color original. Para ello deber utilizar el evento hover de jQuery que se explica posteriormente. Aadir el cdigo necesario en el fichero e1-jquery.js Observe la secuencia, con el cursor en grande: cursor en primer prrafo, cursor en prrafo de la derecha, en prrafo central y cursor en lista ordenada.Ilustracin 4: tares5.pngCurso 2012/2013-4-DIT (Departamento de Ingeniera Telemtica) 5. Fundamentos de Aplicaciones y Servicios TelemticosExamen Parte Prctica. 3 Convocatoria5. [T6-10%]: Mediante jQuery permitir que al hacer clic sobre una imagen se pueda modificar su tamao, alterando la altura de la imagen. Observe que al solicitar la nueva altura mostrar por defecto el valor actual. Aadir el cdigo necesario en el fichero e1-jquery.js.Ilustracin 5: tarea6.pngNOTAS: 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 aadir etiquetas o atributos a la pgina 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 lnea de cada fichero. Recuerde que el fichero de estilo debe ir en el directorio css y los ficheros de cdigo en el directorio js. Todas las figuras de este enunciado estn en la carpeta figuras. Los colores aplicados son silver, cyan, green y yellow.Curso 2012/2013-5-DIT (Departamento de Ingeniera Telemtica) 6. Fundamentos de Aplicaciones y Servicios Telemticos Examen Parte Prctica. 3 ConvocatoriaFuentes: courier para zona oculta, fuente por defecto para el resto. Tamao de fuente al 80%. Valores de la propiedad display: none | block | inline El fichero con la librera jQuery est en el directorio principal e1, con nombre lib-jquery.js. Las capturas estn realizadas con la mquina virtual de la asignatura, resolucin 800x600, y navegador iceweasel.Documentacin adicional: funciones y eventos en jQuery Funcin attr de jQuery Obtiene o modifica el valor del atributo pasado como parmetro. Sintaxis .attr(atributo) .attr(atributo,valor_para_el_atributo) Evento hover, que tiene dos parmetros: $( elemento ). hover ( function(){ // se ejecuta al entrar el ratn .. },function(){ // se ejecuta al salir el ratn ... }); La forma de utilizar este evento prcticas.Curso 2012/2013-6-es similar a .toggle estudiado enDIT (Departamento de Ingeniera Telemtica) 7. Fundamentos de Aplicaciones y Servicios TelemticosExamen Parte Prctica. 3 ConvocatoriaEJERCICIO 2: Programacin PHP/Javascript (5 Puntos)Ficheros a entregare2-calc1.php e2-calc2.phpFuncionalidad: El ejercicio consiste en la creacin de dos pginas, con ayuda de los lenguajes PHP y Javascript. La primera pgina, e2-calc1.php, consiste en presentar un formulario de inicio de sesin, donde el usuario ha de introducir un usuario y contrasea vlidos, y un cdigo de validacin (captcha), el cual ha de coincidir con el presentado en pantalla. Este cdigo ser aleatorio cada vez, y puede emplear la funcin de biblioteca de PHP rand(), cuyo prototipo es: int rand ( int $min , int $max ) Puede utilizarla de la siguiente forma: El nico usuario / contrasea vlido para iniciar sesin es: fast / fastfast. Esta validacin se realizar en el mismo cdigo PHP (no es necesario acceder a fichero de usuarios). En el caso de que se introduzca un usuario o contrasea invlido, no se permitir el acceso a la siguiente pgina.Una vez que el usuario ha accedido correctamente, se le mostrar la siguiente pgina: e2-calc2.php. Esta pgina presentar una calculadora que se ha de implementar en Javascript. Tambin se le da la opcin al usuario de salir de la sesin actual.Se han de emplear sesiones de PHP para controlar al usuario registrado. A continuacin, se desglosan las tareas a realizar, junto con el pseudocdigo de las pginas.Curso 2012/2013-7-DIT (Departamento de Ingeniera Telemtica) 8. Fundamentos de Aplicaciones y Servicios TelemticosExamen Parte Prctica. 3 ConvocatoriaTareas: Tareas comunes a los dos ficheros: [T1-5%] Mostrar apellidos y nombre en el cuerpo de sendas pginas.[T2-10%] Utilizar sesiones de PHP (session_start) en los dos ficheros.Pseudocdigo de e2-calc1.php: e2-calc1.php si (formulario ha sido enviado): procesar formulario si usuario / contrasea == fast / fastfast inicio de sesin: ajustar variable de sesin con el nombre del usuario mostrar enlace de acceso a la pgina de Calculadora: "calc2.php" si no acceso denegado mostrar enlace a la pgina de inicio: "calc1.php" fsisi no mostrar formulario: usuario, contrasea y cdigo captcha aleatorio Validacin de campos rellenos y cdigo captcha mediante Javascript fsi Tareas a realizar mediante e2-calc1.php: [T3-15%]Curso 2012/2013Presentar formulario con captcha aleatorio: funcin rand() de PHP.-8-DIT (Departamento de Ingeniera Telemtica) 9. Fundamentos de Aplicaciones y Servicios TelemticosExamen Parte Prctica. 3 Convocatoria[T4-15%]Validacin del formulario: usuario/contrasea rellenos y cdigo captcha correcto.[T5-10%]Comprobar si usuario == fast y contrasea == fastfast (no es necesario acceso a fichero).[T6-5%]Ajustar variable de sesin con el nombre del usuario.Pseudocdigo de e2-calc2.php: e2-calc2.php si (no se ha pulsado botn 'salir'): mostrar formulario: botones que realizan operaciones mediante Javascript si no eliminar variable de sesin destruir sesin mostrar enlace a la pgina de inicio: "calc1.php" fsi Tareas a realizar mediante e2-calc2.php: [T7-10%]Presentar formulario con calculadora.[T8-25%]Calculadora Javascript: suma, resta, multiplicacin, divisin y borrado del resultado.[T9-5%]Eliminar variable de sesin (nombre usuario) y destruir sesin.A continuacin, se muestran algunas capturas de pantalla con el funcionamiento esperado.Curso 2012/2013-9-DIT (Departamento de Ingeniera Telemtica) 10. Fundamentos de Aplicaciones y Servicios TelemticosExamen Parte Prctica. 3 ConvocatoriaFigura 1. Pantalla de inicio de sesin: e2-calc1.phpFigura 2. Inicio de sesin: error por campo vaco.Curso 2012/2013-10-DIT (Departamento de Ingeniera Telemtica) 11. Fundamentos de Aplicaciones y Servicios TelemticosExamen Parte Prctica. 3 ConvocatoriaFigura 3. Inicio de sesin: error por cdigo invlido.Figura 4. Inicio de sesin: usuario y/o contrasea invlido.Curso 2012/2013-11-DIT (Departamento de Ingeniera Telemtica) 12. Fundamentos de Aplicac