Estudis d'Informàtica, Multimèdia i Telecomunicacions

Grau en Multimèdia

Programació Web – PRÀCTICA Obligatòria

Per a dubtes i aclariments sobre l’enunciat, adreceu-vos al consultorresponsable de la vostra aula.

Cal lliurar la solució en un fitxer 7z, zip o rar on estiguen inclosos tots elfitxers que has fet servir en la pràctica. Adjunteu el fitxer a un missatgeadreçat a la bústia Lliurament i registre d’AC.

El nom del fitxer ha de ser CognomsNom_POamb l’extensió triada.

Cal comentar adequadament el codi, formarà part de l’avaluació de lapràctica.

La nota final dependrà de la claredat del codi, del disseny implementat i de la participació al'aula. Amb tot, aclarir que implementar un codi que funcioni no serà suficient per aconseguirla màxima nota.

Propietat intel·lectual

Sovint és inevitable, en produir una obra multimèdia, fer ús de recursos creats per tercerespersones. És per tant comprensible fer-ho en el marc d'una pràctica dels estudis del Graduaten Multimèdia, sempre que això es documenti clarament i no suposi plagi en la pràctica.

Per tant, en presentar una pràctica que faci ús de recursos aliens, s'ha de presentar juntamentamb ella un document en què es detallen tots ells, especificant el nom de cada recurs, el seuautor, el lloc on es va obtenir, la data i el seu estatus legal: si l'obra està protegida pelcopyright o s'acull a alguna altra llicència d'ús (Creative Commons, llicència GNU GPL ...).L'estudiant s'ha d'assegurar que la llicència que no impedeix específicament el seu ús en elmarc de la pràctica. En cas de no trobar la informació corresponent ha d'assumir que l'obraestà protegida pel copyright.

S'haurà, a més, adjuntar els arxius originals quan les obres utilitzades siguin digitals, i el seucodi font si correspon.

Un altre punt a considerar és que qualsevol pràctica que faci ús de recursos protegits pelcopyright no podrà en cap cas publicar-se a Mosaic, la revista del Graduat en Multimèdia, llevatque els propietaris dels drets intel·lectuals donin la seva autorització explícita .

EnunciatL’objectiu d’aquesta pràctica es la creació d’un espai web (on s’utilitzarà HTML i JavaScript). Estarà compost per tantes pàgines web com sigui necessari.

S’ha de crear una pàgina inicial, on es trobarà el menú principal que permetrà la navegació per cadascuna de les pàgines o apartats que s’indiquen a continuació.

Si ho desitgeu podeu utilitzar jQuery per a la realització dels exercicis tot i que la seva utilització nosuposarà cap increment en la puntuació. Queda totalment prohibit utilitzar llibreries de tercers per resoldre els exercicis.

IMPORTANT: Llegiu tot l’enunciat al menys un cop, abans de començar a treballar. Hi ha exercicis que es poden fer de dues maneres diferents que es valoraran de manera diferent depenent de la seva dificultat.

Exercicis:

Exercici 1 (0, 5 punts)

L'espai web ha de tenir aplicat cert estil CSS, de manera que hi haurà un fitxer .css que s'aplicarà a totes les pàgines i que tindrà un mínim de 10 selectors diferents. La pàgina principal de cada exercici també disposarà d'un menú similar o igual al de la pàgina principal.

Exercici 2 (4 punts)

Per a la primera pàgina a la que accedirem des d’una de les opcions del menú tindrem que crear un senzill gestor de pestanyes (tabs) que ens permeti crear, editar i eliminar pestanyes de manera que quan cliquem a qualsevol d’aquestes pestanyes se’ns mostri el seu contingut.

Podeu consultar la pàgina http://css-tricks.com/css3-tabs/ per veure com crear l’estructura i el CSS de les pestanyes, al final de l’explicació hi trobareu un enllaç amb diferents exemples. No dubteu en

consultar-nos qualsevol dubte que tingueu referent al funcionament de les pestanyes.

Exercici 2.1 (0,25 punts)Crearem un formulari que contindrà dos camps visibles, el primer serà per a la introducció del nom de la pestanya i el segon pel contingut d’aquesta (tingues en compte que el contingut de la pestanya pot contenir tanta informació com desitgem) i un botó “Crear”. En el moment que premem aquest botó haurem de validar que els dos camps contenen informació, en cas contrari marcarem aquests camps de color vermell, es pot avisar mitjançant un missatge al costat del cada camp.

Exercici 2.2 (0.75 punts)Un cop realitzada la validació si tot és correcte procedirem a la creació de la nova pestanya i del seucontingut. Per defecte farem que aquesta nova pestanya sigui la seleccionada i en conseqüència queel contingut que es visualitzi sigui el seu.

Exercici 2.3 (0,5 punts)Quan es faci clic sobre el nom de la pestanya aquesta haurà d’aparèixer com a seleccionada (hauremde fer que destaqui vers la resta de pestanyes) i es mostrarà el seu contingut ocultant el contingut dela pestanya seleccionada anteriorment.

Exercici 2.4 (0,75 punts)Dins del contingut de la pestanya afegirem una opció que sigui “Editar”. Al clicar sobre aquestaopció s’actualitzaran els camps del formulari amb el nom i el contingut corresponent a aquestapestanya i modificarem el text del botó “Crear“ per “Actualitzar”. Si ho creus oportú pots afegir elscamps que creguis necessaris al formulari.

Exercici 2.5 (0,75 punts)Fes que quan es cliqui sobre el botó “Actualitzar” s’actualitzi el nom de la pestanya i el seucontingut pels valors que hem indicat en el formulari.

Exercici 2.6 (0,50 punts)Assegura’t que tan si es clica el botó “Crear” com si es clica el botó “Actualitzar”, un cop escompleixin les validacions, el formulari torni al seu estat original, és a dir, tots els camps hand’estar buits i el text del botó per realitzar les accions ha de ser “Crear”.

Exercici 2.7 (0,50 punts)Afegeix en el contingut de cada pestanya la opció “Eliminar” de manera que quan es faci clic sobreella elimini la pestanya y el seu contingut.

Exercici 3 (5,5 punts)

La primera pàgina que s’accedirà des de una de les opcions del menú de la pàgina inicial ens permetrà simular la creació d’una carta. Aquesta pàgina estarà formada per un formulari que ens demanarà la introducció de les dades i un apartat que simularà la carta amb un contingut d’exemple.En el moment que s’enviï el formulari s’actualitzarà el contingut de l’apartat de la carta amb les dades introduïdes. Aquest formulari ha de contenir els següents camps (els camps marcats en asterisc són obligatoris):

Sobre aquests camps s’ha de realitzar les següents validacions:

Exercici 3.1 (0,50 punts)S’ha de verificar, fent servir expressions regulars, que els e-mails introduïts tenen un formatcorrecte, si no és així, cal marcar en vermell el camp. Es valorarà l’explicació del que fa l’expressió.

Exercici 3.2 (0,40 punts)S’ha de verificar que el camp de Mostrar remitent te un valor seleccionat, si no és així, cal marcaren vermell el camp (Inicialment no tindrà cap valor seleccionat).

Exercici 3.3 (0,60 punts)S’han de revisar que tots els camps requerits tenen algun valor introduït. Quan es detecti un error, espot avisar, mitjançant un missatge al costat del camp, de l’error trobat (0,07 punts per cada missatgefet, 0,60 si es fan tots 8)

Exercici 3.4 (1,25 punt)Si en el camp “Mostrar remitent” s’ha triat que no, a les hores amagarem la introducció dels camps “Nom remitent” i “E-mail Remitent” i ja no serà necessària la seva validació. En el cas que es seleccioni la opció “sí” els tornarem a mostrar i serà obligatòria la seva validació.

Exercici 3.6 (0,50 punts)Totes les validacions anteriors s’han de realitzar en el moment que l’usuari premi un botó “Enviar”,de forma que es realitzi la validació de forma seqüencial a partir del mateix ordre indicat al’enunciat. Si una d’aquestes no es compleix, ha d’avisar a l’usuari, mostrant tots els errors existentsi aplicarem el focus al primer camp del formulari que contingui un error.

Exercici 3.7 (1 punts)Si els valors introduïts en el formulari anterior compleixen totes les condicions, es realitzarà lasubstitució dels valors de l’apartat carta pels valors introduïts en el formulari. Al igual que en lesvalidacions, si el valor del camp “Mostar remitent” és no, es tindran que amagar els campsreferents al remitent de la carta.

Exercici 3.5 (1,25 punt)Defineix una classe on les propietats d’aquesta són els valors del formulari anterior.

Per un altre costat, s’han de crear tots els mètodes que s’encarregaran d’actualitzar el valor de lespropietats anteriors i que a l’hora implementaran les validacions explicades en els apartats anteriors.D’aquesta forma al cridar a un mètode per guardar el valor de la propietat corresponent, a l’interiord’aquest es validarà el paràmetre passat de forma que si és correcte actualitzarà el valor de lapropietat i retornarà el valor X, en cas contrari retornarà un valor Y que defineix el tipus deproblema.

Si tots els valors introduïts son correctes s’actualitzarà contingut de la carta a partir dels valors deles propietats de la classe creada.

Compte!: Tot i que és perfectament possible fer primer totes les funcions de validació i desprèsconvertir-ho tot a mètodes de la classe, si vols fer aquest exercici, potser et sigui més fàcil fer-hodirectament d’aquesta manera. Tot i això, si tens dubtes amb l’orientació a objectes, pots fer primertots els exercicis anteriors i desprès mirar de fer la conversió.

Criteris de correcció:

Els exercicis 2 i 3 s'avaluaran tenint en compte els següents punts:o La resolució utilitza adequadament els conceptes explicats en l'assignatura.o L'exercici fa el que es demana.o El codi és clar i ordenat.o Hi ha comentaris concisos i que expliquen clarament el que s'està fent.o Bona presentació visual.