UF1842

UF1842: Desenvolupament i reutilització de components software i multimèdia mitjançant llenguatges de guió (90 h):

Docent: Dr. Javier López

Descripció del producte/projecte de la unitat UF1842:

L'activitat avaluativa referida a aquesta unitat formativa tracta sobre els continguts relatius a un dels llenguatges de guió més importants utilitzats actualment: javaScript, que a més està designat per la W3C com un dels estàndards que s'agrupen sota la denominació "HTML5".

Així, els continguts d'aquesta unitat formativa s'aplicaran sobre la base ja realitzada a la fase de desenvolupament anterior (sobre HTML5 i CSS3), dotant-la d' interactivitat i de connectivitat amb bases de dades (a través d'AJAX i PHP). Per això, en alguns apartats (com el referit als mapes de googleMaps, parts del formulari o l'apartat dedicat al vídeo i àudio) seran substituïts i/o millorats significativament afegint codi i funcionalitats de javaScript i jQuery, que aporta més potència, més control i sobretot més solidesa per assegurar la compatibilitat entre navegadors. Al mateix temps, en la majoria dels casos s'ampliaran seccions i s'afegiran noves pàgines per incorporar les funcionalitats que es detallaran a la taula següent.

És important remarcar que gran part dels continguts d'aquesta unitat formativa (variables, condicionals, bucles, funcions, arrays, events, objectes) s'utilitzaran a la gran majoria de les activitats que es desenvoluparan, però no es plantegen en cap exercici específic de manera individual, ja que la potència de qualsevol llenguatge de programació resideix en la seva utilització conjunta de la manera més efectiva possible.

En les activitats d'aquesta segona fase de desenvolupament s'hauran de tractar una sèrie de tècniques i/o funcionalitats que s'enumeren a continuació:

Característiques bàsiques incloses a les activitats:	Contingut relacionat:
17- Qualsevol acció o comportament s'ha d'indicar quan o com s'inicia (al fer clic, doble clic, col•locar el cursor a sobre, prémer una tecla…)	events (onclick, onload, onmouseover, onkeyup)
18- Canvi de les propietats dels elements (color, posició, mida, display, opacitat, color, marges, padding entre d'altres amb javaScript).	.style .css
19- Animació de propietats (canvi de les propietats amb animació).	animation
20- Gestió de l'atzar (per aconseguir que l'ordre dels elements, la seva aparença o qualsevol comportament no sigui sempre el mateix).	Math.random Math.ceil / Math.floor
21- Gestió d'imatges (canviar una imatge per una altra o afegir imatges dinàmicament –sense que estiguin incloses inicialment al document-).	attr .html
22- Gestió del temps (accions que s'executen automàticament cada x segons de manera contínua).	setInterval / clearInterval
23- Càrrega de dades des d'una base de dades o des de fitxers XML. El contingut (text, imatges, vídeos…) es recull d'una base de dades. Si prové d'una base de dades MySQL, es realitza a través de PHP, si és un fitxer XML la lectura és gairebé directa).	$.ajax Tipus de dades (xml, json, string…) / Success
24- Intercanvi de dades amb JSON (en javaScript i PHP).	json_decode/json_encode
25- Gestió de dades a través d'arrays (llistes o matrius). Habitualment s'utilitzen per introduir les dades llegides en el pas anterior i posteriorment poder manipular-les ràpidament.	Estructura de dades [a,b] push / pop / join / indexOf length i bucles
26- Creació de contingut dinàmic. Tant el contingut, com l'estructura (llegida externament en els passos anteriors) es visualitzen a través de JavaScript. Així, inicialment el document html és buit.	html empty prepend / append before / after
27- Anàlisi de les dades introduïdes als formularis i el seu posterior procés d'enviament pel seu enregistrament dins d'una base de dades.	Comunicació de dades des de javaScript a PHP
28- Enregistrament i recuperació de dades utilitzant 'localStorage'.	localStorage
29- Personalització total de mapes de Google utilitzant l'API (v3) de Google (canvi d'aspecte, dels controls, addicció de marcadors, control d'events, propietats i mètodes existents).	Inicialització de l'API / Variables (propietats) / Funcionalitats (mètodes)
30- Utilització de l'element CANVAS (opcional).	canvas / getContext
31- Gestió i control d'elements de vídeo i àudio vinculant dinàmicament elements de vídeo no existents inicialment, modificar les seves funcions i creació personalitzada de barra de control (play, stop, pause, volum, barra).	play / pause vinculació amb src currentTime / duration
32- Control del teclat (detecció de tecles i tecles especials).	keydown / keyCode
33- Seria positiu incloure el desenvolupament d'una galeria de recursos (imatges, vídeos i/ àudio) realitzada íntegrament des de zero amb javaScript.	Diversos temes del contingut
34- Gestió de dates (càlcul de dates, temps entre dates, calendaris).	objecte date

La majoria d'apartats (excepte en aquells que s'indiqui el contrari) van ser creats amb HTML5 i CSS3 en la fase de desenvolupament anterior, corresponents a la unitat formativa (UF1841). Així, en aquesta unitat formativa s'ampliaran, modificaran o substituiran funcions de manera total o parcial utilitzant codi del llenguatge de programació javaScript.

A causa de la naturalesa del contingut de la unitat formativa dedicada a javaScript (UF1842), cadascun dels ítems d'informació del contingut no es plantegen individualment en una activitat de manera aïllada, ja que realment en la combinació de les funcionalitats i components de javaScript és on resideix la potència de qualsevol llenguatge de programació. Així mateix, també és on sorgeixen tots els dubtes i problemes dels alumnes i és on podem trobar el punt central on s'ha de centrar l'aprenentatge.

Client:

En aquesta segona fase de desenvolupament el client desitja afegir apartats nous i redissenyar el funcionament dels ja existents amb l'objectiu d'ampliar la interactivitat i el feedback entre el contingut i l'usuari. També desitja la possibilitat que una gran part del contingut de la web tingui un caràcter dinàmic (que vagui canviant segons la informació extreta d'una base de dades). D'aquesta manera el client pot canviar la informació en qualsevol moment, de la mateixa forma que qualsevol canvi d'estat o disponibilitat actual de qualsevol apartament es pot mostrar a la web de manera immediata.

Tot el moviment de dades i usuaris s'emmagatzemarà en una base de dades de tipus MySQL (UF1845) gestionada amb PHP (UF1844) i comunicada amb javaScript a través d'AJAX i el format de dades JSON.

Així, tots els ítems de contingut del curs enumerats a la pàgina anterior estan agrupats en una sèrie d'activitats interactives. En cadascuna d'aquestes activitats s'haurà d'integrar l'estructura i codi javaScript dintre de l'estructura HTML5 existent, creada a la fase de desenvolupament anterior, o bé crear-la des de zero en el cas que es tracti d'un nou apartat (com és el cas dels dos darrers "Cercador" i "Ubicacions").

Arbre de navegació:

En tots els apartats existeixen continguts del curs que s'hauran d'aplicar a la gran majoria de les ocasions, ja que representen la base de javaScript:

- Variables, arrays, condicionals, bucles, funciones i estructuració del codi.
17- (Events) qualsevol acció o comportament s'ha d'indicar quan o com s'inicia.
- Text amb estils CSS (en fitxers CSS extern i interns).
18- Canvi de les propietats dels elements (objectes) que es compon cada pàgina web.

Apartats:

Home

A la "home" (index.html), substituirem el "slider" inserit a la fase anterior a partir d'un plugin prefabricat per un que l'alumne haurà de crear des de zero i de manera íntegra utilitzant javaScript.

En aquest "slider" s'hauran de contemplar els següents requeriments fitxats pel client:

Les imatges no estaran integrades dintre de la pàgina, sinó que seran ubicades en una carpeta del servidor (perquè el client pugui canviar-les sempre que vulgui).
L'ordre de presentació de les imatges serà sempre aleatori.
El canvi d'una imatge per una altra es realitzarà a través d'un petit fos o moviment de les mateixes imatges ('animate').
Aquest canvi es realitza cada 3 o 4 segons de manera automàtica sense la intervenció de l'usuari.

Així, per a la realització d'aquest exercici s'utilitzaran els següents continguts del curs:

19- Animació de propietats "animate" (així el canvi d'imatges es realitzarà a través de petites animacions de tipus "animate").
20- Gestió de l'atzar (perquè l'ordre de les imatges sigui aleatori).
21- Gestió de les imatges (perquè les imatges es recuperin d'una carpeta del servidor).
22- Gestió del temps (perquè que les imatges vagui canviant de manera automàtica cada 3 o 4 segons).

Qui som?

En aquest apartat les millores se centren en la utilització d'events de tipus "click", la utilització d'animacions (amb la funció "animate" de javaScript) per mostrar informació i la creació de codi HTML amb javaScript per la creació de contingut de forma dinàmica a través de les peticions de l'usuari.

En aquest apartat es tractaran els següents continguts de la unitat formativa:

19- Animació de propietats "animate" (perquè el canvi d'imatges es realitzi a través de petites animacions de tipus "animate").
26- Creació de contingut dinàmic.

Serveis

En aquest apartat substituirem tots els events d'HTML5 pels propis de javaScript per mostrar la presentació de la informació d'una manera interactiva, ja sigui a través d'events de ratolí de tipus "click" o "rollover" (passar per sobre), al mateix temps que es tracten les funcionalitats de canvi de propietats dels objectes presentats en pantalla, escriptura dinàmica a través de la informació recollida d'un fitxer extern XML i la modificació de propietats utilitzant petites animacions interactives.

Contingut relacionat:

17- (Events) qualsevol acció o comportament s'ha d'indicar quan o com s'inicia.
18- Canvi de les propietats dels elements (objectes) que formin cada pàgina web.
19- Animació de propietats "animate" amb control sobre la mateixa (callback / acceleracions).
21- Gestió dinàmica d'imatges.
23- Carrega de dades des d'un fitxer XML (les dades de l'apartat es troben en un fitxer extern XML)
- Escriptura de text en àrees de la pàgina.
- Utilització d'elements de tipus <input> de formulari (checkbox, radiobutton, select...) per presentar informació.

Els nostres apartaments

L'apartat que a la fase de desenvolupament anterior s'anomenava "Ofertes" es modifica pel nom "Els nostres apartaments". El nou contingut serà molt semblant a l'anterior respecte a la seva naturalesa (ja que estarà format per vídeos i àudios), però serà molt diferent en referència a la seva organització i funcionament intern, ja que els recursos no estaran ubicats al document web, sinó que seran recollits d'una carpeta del servidor quan l'usuari ho requereixi.

Així, en aquest apartat es tractaran tots aquells continguts relacionats amb la gestió interactiva dels elements de vídeo i àudio, del seu control de reproducció, de la personalització íntegra de la barra de control, de la seva càrrega i de la vinculació dinàmica amb javaScript (els elements de vídeo i àudio no estaran carregats al html, sinó que quan siguin demandats per l'usuari serà quan es gestionarà la seva càrrega i la seva posterior reproducció amb javaScript).

Continguts del curs relacionats:

33- Desenvolupament d'una galeria de recursos.
31- Gestió i control d'elements de vídeo i àudio amb vinculació dinàmica.

Al mateix temps, serà imprescindible el control de múltiples elements de vídeo (perquè en cap moment es reprodueixen dos vídeos al mateix temps. Així, si l'usuari prem "Play" en un vídeo, qualsevol altre element de vídeo o àudio que s'estigués reproduint-se en aquest moment s'hauria d'aturar).

Des de l'apartat "Els nostres apartaments" es pot accedir o bé al "Cercador d'apartaments" o bé al cercador manual d'"Ubicacions" a través del mapa de la teva ciutat.

Cercador (d'apartaments)

Aquest apartat és nou (no existia a l'anterior fase de desenvolupament) i se centra en els continguts relacionats amb la creació de contingut dinàmic, en la connexió amb la base de dades (on es troba tota la llista d'apartaments disponibles), en la lectura d'aquestes dades a través de la combinació javaScript/PHP/MySQL, en l'intercanvi d'informació a través del format JSON i en la utilització, gestió i control dels elements de tipus <input> amb javaScript.

Així, en aquest html no existirà cap tipus d'informació estàtica, sinó que aquesta es recollirà de la base de dades, es gestionarà a través d'arrays interns i es visualitzarà únicament la informació que l'usuari demandi a través de diferents sistemes de cerca (per ciutat, per dates, per preu...)

Al mateix temps, quan l'usuari trobi un apartament que l'interessi, si accedeix a un altre apartat (i per tant tanca l'actual html de cerca) o inclús si tanca l'ordinador, quan torni a accedir a aquest apartat, inicialment apareixerà el resultat de la darrera cerca realitzada (utilitzant la possibilitat de guardar informació persistent dintre de la pròpia màquina de l'usuari, utilitzant la funcionalitat "localStorage" de javaScript).

Perquè l'usuari pugui definir els paràmetres de cerca s'utilitzaran diferents elements de tipus <input> (com checkbox, select, radiobutton, etc..) Aquests elements s'ompliran d'informació, seran controlats i respondran als events de javaScript.

Posterior a la cerca, l'apartat oferirà una llista dels apartaments que compleixin els requisits indicats. En seleccionar un d'ells, s'ofereix informació més detallada, així com la possibilitat d'ubicar-lo en el mapa (redirigint a l'usuari al fitxer html d'"Ubicacions"), o bé permet que l'usuari enviï un mail de petició d'informació (redirigint l'usuari al formulari de "Contacta" ja amb les dades corresponents omplertes).

Continguts de la unitat formativa relacionats:

- Control d'elements de formulari de tipus <input> per introduir els paràmetres de cerca.
- Enllaços (redireccionament) de fitxers html amb enviament de dades (format GET) amb javaScript.
23- Càrrega de dades des d'una base de dades.
24- Intercanvi de dades amb JSON (en javaScript i PHP).
25- Gestió de dades a través d'arrays.
26- Creació de contingut dinàmic.
34- Gestió de dates (càlcul de dates, temps entre dates, calendaris).
28- Emmagatzemant i recuperació de dades utilitzant "localStorage".

Ubicacions

Aquest apartat, molt estretament relacionat amb l'anterior, també és nou. Inicialment apareixerà un mapa de la darrera localitat seleccionada o bé de la zona on es trobi l'usuari. No obstant això, l'usuari podrà seleccionar una localitat (només apareixeran les que tinguin apartaments disponibles) a través d'un <select>. D'aquesta manera es mostrarà en un mapa de googleMaps la ubicació de tots els apartaments disponibles en la localitat seleccionada.

Per personalitzar totalment aquest tipus de mapes s'utilitzarà la versió 3 de l'API de Google (que funciona sota javaScript), afegint marcadors, informació suplementària dintre de la interfície del mapa, així com el control d'accions (events) de l'usuari i aprofitament dels seus mètodes.

Al mateix temps, si s'accedeix des de l'apartat de cerca, al tenir seleccionat un apartament (amb un redireccionament de javaScript), únicament apareixerà l'apartament seleccionat amb el mapa de la localitat que correspongui. Si després es torna a la pantalla de cerca, la darrera cerca realitzada es manté.

Contingut relacionat:

29- Personalització total de mapes de Google utilitzant l'API (v3) de Google.
- Enllaços (redireccionament) de fitxers html amb enviament de dades (format GET) amb javaScript.
28- Recuperació de dades utilitzant "localStorage".

Contacta

En aquest apartat, a partir dels formularis creats amb els nous <input> d'HTML5 en la fase anterior de desenvolupament, s'ha d'utilitzar javaScript per controlar íntegrament el funcionament del formulari, assistir en la introducció d'informació, analitzar la informació introduïda, processar-la, validar-la i enviar-la a una base de dades MySQL a través de PHP en un format determinat i apropiat.

Contingut relacionat:

27- Anàlisi de les dades introduïdes als formularis i el seu posterior procés i enviament.
32- Control del teclat (detecció de tecles i tecles especials).

El control de la validació de la informació dels elements del formulari emplenat per l'usuari l'ha de portar totalment javaScript, eliminant en tot moment les acciones prefixades d'HTML5 de botons (submit) o d'altres elements, actualitzant els camps a mesura que l'usuari va introduint dades, anul•lant la autovalidació automàtica de la informació d'HTML5/CSS3 i reprenent el control del teclat (per evitar que l'usuari pugui introduir lletres/números o símbols incorrectes o no admesos en els camps del formulari).

Quan tota la informació obligatòria ha sigut introduïda i tota la informació respon a les característiques de dades requerides, javaScript recopila la informació i la traspassa a PHP, perquè aquest la registri a la base de dades corresponent sota les característiques i el format de dades necessàries.

La comunicació entre javaScript i PHP es realitzarà amb AJAX perquè aquesta sigui bidireccional (quan la informació s'ha guardat satisfactòriament, PHP avisa a javaScript perquè aquest pugui mostrar l'avís a l'usuari que el procés d'enviament de la informació s'ha completat de manera correcta), al mateix temps que tota aquesta interacció amb l'usuari es realitza sense necessitat que la pàgina s'hagi de tornar carregar.

Relació HTML5, javaScript / PHP:

Aquesta segona fase de desenvolupament relativa als continguts de la unitat formativa (UF1842) sobre javaScript té una gran i estreta relació amb l'anterior (UF1841), basada en HTML5 i CSS3, ja que es construeix sobre la seva base. No obstant això, la gran importància de javaScript es fonamenta en la possibilitat que té per relacionar-se amb altres llenguatges de servidor perquè realitzi accions que no pot realitzar per si mateix, com guardar i recuperar informació a través de l'accés a bases de dades.

Així, si bé la connexió amb la base de dades i la recollida de la informació recau de manera íntegra en PHP, la interacció amb l'usuari perquè aquest estableixi els paràmetres de cerca (filtres) d'aquesta informació i la posterior visualització de la informació pot recaure tant sobre javaScript com sobre PHP.

Dintre del present curs de Certificació de Professionalitat es tractaran aquestes dues possibilitats. D'aquesta manera, les activitats de la unitat formativa (UF1844) es basaran en un entorn basat en tots els processos a través de PHP, tant en la comunicació amb l'usuari, la connexió, la recollida de dades i la posterior visualització al navegador, sense la intervenció de javaScript.

Per practicar l'altra possibilitat, s'han introduït algunes activitats a la unitat formativa sobre javaScript (com és el cas de l'apartat "Cerca"), basada en la recollida de dades des de javaScript a través de PHP, perquè posteriorment sigui javaScript qui s'encarregui de gestionar la informació rebuda de PHP i mostrar-la en pantalla de la manera que correspongui. Dintre d'aquesta fase de desenvolupament de javaScript, en cap cas es contempla l'escriptura de dades des de javaScript a través de PHP degut a la seva dificultat i la necessitat de coneixements sobre PHP.

Per això, serà amb posterioritat a la realització de les activitats de la unitat formativa referida a PHP, que es realitzarà una ampliació d'aquesta comunicació javaScript/PHP sobre la possibilitat d'escriptura de dades des de javaScript a través de PHP, que contemplarà els següents passos:

javaScript recull i agrupa la informació que s'ha de guardar (a la base de dades).
Envia la petició amb totes les dades necessàries a PHP.
javaScript queda a l'espera de la resposta de PHP (sense necessitat de recarregar la pàgina).
PHP es connecta a la base de dades, busca la taula necessària i registra les dades (enviades per javaScript).
PHP envia a javaScript l'avís que l'operació s'ha realitzat amb èxit o bé un número d'error en el cas que l'operació no s'hagi pogut realitzar correctament.
javaScript rep les dades i realitza les accions necessàries segons el resultat de l'acció.

Criteris d'avaluació:

Producte final:	Conjunt de set pàgines web relacionades amb base HTML5/CSS3 i funcionalitats millorades de javaScript.
Durada:	Del 4 de juliol fins al 29 de juliol.
Objectius:	Comprendre el funcionament i la composició de qualsevol llenguatge de programació. Conèixer la utilitat i les característiques dels elements bàsics de javaScript (variables, events, funcions, condicionals, bucles, arrays...) Construir una nova manera de pensar (com podem aconseguir funcionalitats utilitzant les característiques i la combinació dels elements del llenguatge de programació javaScript). Dominar la sintaxi i les possibilitats (atributs i paràmetres) de les diferents ordres, mètodes, propietats i funcions de javaScript.
Contingut relacionat:	Presentat a la Taula d'aquest document.
Presentació:	El producte final és deriva de la modificació, ampliació i millora dels cinc apartats creats a l'anterior unitat formativa (amb HTML5 i CSS3) incorporant funcionalitats del llenguatge de programació javaScript i creació de dos apartats nous creats amb una base mínima d'HTML5 i CSS3, però preparats per una integració de funcionalitats amb javaScript. Es poden trobar totes les característiques, així com una informació molt més detallada (funcionalitats a avaluar, arbre de navegació, apartats i definició de cadascun dels indicadors d'avaluació relacionats sobre apartats concrets) sobre aquest tema en pàgines anteriors. Totes les activitats d'avaluació d'aquesta unitat formativa demanades als alumnes pels docents vénen precedides d'exercicis d'apropament parcialment guiades a classe que tracten els continguts d'una manera directa i aïllada, en un document nou i per tant sense relació amb altres codis de javaScript. L'aprenentatge es fonamenta en la posterior relació i combinació d'aquest codi amb altres funcions, variables, arrays, events, condicionals, bucles, mètodes i sentències de javaScript referents a altres funcionalitats de la pàgina. Per informació més detallada es possible accedir a l'apartat "Descripció del producte/projecte".
Material necessari:	Tot el programari proposat és de llicència oberta i per tant gratuït. Editor web senzill (notePad++ o Sublime Text2). Navegadors actualitzats (Chrome, Firefox, Explorer). Qualsevol programa de FTP per pujar fitxers a un servidor web (Filezilla o similars). Un ordinador per alumne amb connexió a Internet.
Organització:	Tots els treballs són de caràcter individual encara que tots els alumnes tenen les mateixes activitats i requeriments per realitzar. A classe es realitzen activitats que tracten orientacions i funcionalitats similars a les característiques de les activitats que es demanen. El projecte es comença a classe individualment i en funció del ritme d'aprenentatge de cada alumne es finalitza fora del període lectiu durant un temps que pot ser molt diferent per cada persona.
Avaluació:	Al tractar-se d'un contingut basat gairebé de manera exclusiva en un llenguatge de programació, adquireix una important rellevància la comprensió del funcionament intern i el raonament de qualsevol llenguatge de programació per part de l'alumne, ¬¬per la qual cosa la pràctica individual és totalment imprescindible per poder assolir uns mínims de coneixements sòlids amb javaScript. Per això, en tots els processos d'avaluació es valorarà d'una manera molt important i significativa totes aquelles funcionalitats 'extra' de producció i desenvolupament propi que impliquin una capacitat de risc/innovació i investigació més enllà de les característiques demandades pels docents en cadascuna de les activitats. L'avaluació es realitza a través dels indicadors. La majoria d'indicadors fan referència a funcionalitats presents en apartats concrets de la web.