DAW-M06-WEC

De wikijoan
Salta a la navegació Salta a la cerca

M06. Desenvolupament Web en Entorn de Client

Contingut

Presentació de l'assignatura

Materials a l'IOC:

Curriculum oficial:

Les entregues de les pràctiques es realitzaran en la plataforma Google Classroom. (Veure en cadascuna de les UF l'enllaç directe al Google Classroom, i el codi per inscriure't al crèdit.).

Recorda la pàgina web de la del INS Jaume Balmes.

Recursos interessants de Javascript:

Programació

Mòdul 6: Desenvolupament web en entorn client
Durada: 165 hores.
Hores de lliure disposició: 33 hores
Unitats formatives que el componen:
UF1. Sintaxi del llenguatge. Objectes predefinits del llenguatge. 30 hores
UF2. Estructures definides pel programador. Objectes. 30 hores
UF3. Esdeveniments. Manegament de formularis. Model d'objectes del document. 42 hores
UF4. Comunicació asíncrona client-servidor.  30 hores

Distribució horària

NOTA: Bona part dels continguts de la UF2 s'integren a la UF1. Això comporta que la UF2 es passa a fer a final de curs i serà calaix de sastre d'altres conceptes i procediments que el professor considera que s'haurien de veure, com ara tècniques avançades o frameworks (jQuery).

Hi ha 33 hores de lliure disposició. Es fa la següent proposta:

  • UF1. Sintaxi del llenguatge. Objectes predefinits del llenguatge. 41 hores
  • UF3. Esdeveniments. Manegament de formularis. Model d'objectes del document. 53 hores
  • UF4. Comunicació asíncrona client-servidor. 41 hores
  • UF2. Estructures definides pel programador. Objectes. (veure NOTA) 30 hores

Temari:

UF1. Sintaxi del llenguatge. Objectes predefinits del llenguatge. 41 hores

Resultats d’aprenentatge i criteris d’avaluació

1. Selecciona les arquitectures i tecnologies de programació sobre clients web, identificant i analitzant les capacitats i característiques de cadascuna. 
1.1  S'han caracteritzat i diferenciat els models d'execució de codi al servidor i al client web. 
1.2  S'han identificat les capacitats i mecanismes d'execució de codi dels navegadors web. 
1.3  S'han identificat i caracteritzat els principals llenguatges relacionats amb la programació de clients web. 
1.4  S'han reconegut les particularitats de la programació de guions i els seus avantatges i desavantatges sobre la programació tradicional. 
1.5  S'han verificat els mecanismes d'integració dels llenguatges de marques amb els llenguatges de programació de clients web. 
1.6  S'han reconegut i avaluat les eines de programació sobre clients web. 

2. Escriu sentències simples, aplicant la sintaxi del llenguatge i verificant la seva execució sobre navegadors web. 
2.1	S'ha seleccionat un llenguatge de programació de clients web en funció de les seves possibilitats. 
2.2  S'han utilitzat els diferents tipus de variables i operadors disponibles en el llenguatge. 
2.3	S'han identificat els àmbits d'utilització de les variables. 
2.4	S'han reconegut i comprovat les peculiaritats del llenguatge que fa a les conversions entre diferents tipus de dades. 
2.5	S'han utilitzat mecanismes de decisió en la creació de blocs de sentències. 
2.6	S'han utilitzat bucles i s'ha verificat el seu funcionament. 

3. Escriu codi, identificant i aplicant les funcionalitats aportades pels objectes predefinits del llenguatge. 
3.1 S'han identificat els objectes predefinits del llenguatge. 
3.2 S'han analitzat els objectes referents a les finestres del navegador i els documents web que contenen. 
3.3 S'han escrit sentències que utilitzin els objectes predefinits del llenguatge per canviar l'aspecte del navegador i el document que conté. 
3.4  S'han generat textos i etiquetes com a resultat de l'execució de codi al navegador. 
3.5  S'han escrit sentències que utilitzin els objectes predefinits del llenguatge per interactuar amb l'usuari. 
3.6  S'han utilitzat les característiques pròpies del llenguatge en documents compostos per diverses finestres i marcs. 
3.7  S'han utilitzat galetes per emmagatzemar informació i recuperar el seu contingut. 
3.8  S'ha depurat i documentat el codi.

Continguts

1  Selecció d'arquitectures i eines de programació.
1.1   Models d'execució de codi 
1.2   Mecanismes d'execució de codi en un navegador web. 
1.3   Capacitats i limitacions d'execució. 
1.4   Llenguatges de programació en entorn client.
1.5   Programació de guions  
1.6  Integració del codi amb les etiquetes HTML. 
1.7  Eines de programació sobre clients web. Tecnologies i llenguatges associats 

2  Aplicació i verificació de la sintaxi del llenguatge.
2.1   Selecció de llenguatge de programació de clients web.  
2.2   Variables. 
2.3   Tipus de dades. 
2.4   Assignacions. 
2.5   Operadors. 
2.6   Sentències. 
2.7   Decisions. 
2.8   Bucles. 
2.9   Comentaris al codi. 
2.10 Eines per programar, provar i depurar el codi   


3  Identificació i aplicació  dels objectes predefinits del llenguatge.
3.1   Utilització d'objectes. Objectes nadius del llenguatge.  
3.2   Objectes predefinits associats al navegador. 
3.3   Gestió de l'aparença de la finestra. 
3.4   Generació de text i elements HTML des de codi. 
3.5   Interacció amb el navegador. 
3.6   Aplicacions pràctiques dels marcs. 
3.7   Creació de noves finestres. 
3.8   Comunicació entre finestres 
3.9   Galetes.   
3.10  Documentació del codi.

UF3. Esdeveniments. Manegament de formularis. Model d'objectes del document. 53 hores

Resultats d’aprenentatge i criteris d’avaluació

1. Desenvolupa aplicacions web interactives integrant mecanismes de maneig d'esdeveniments. 
1.1  S'han reconegut les possibilitats del llenguatge de marques relatives a la captura dels esdeveniments produïts. 
1.2  S'han identificat les característiques del llenguatge de programació relatives a la gestió dels esdeveniments. 
1.3  S'han diferenciat els tipus d'esdeveniments que es poden manejar. 
1.4  S'ha creat un codi que capturi i utilitzi esdeveniments. 
1.5  S'han reconegut les capacitats del llenguatge relatives a la gestió de formularis web. 
1.6  S'han validat formularis web utilitzant esdeveniments. 
1.7  S'han utilitzat expressions regulars per facilitar els procediments de validació. 
1.8  S'ha provat i documentat el codi. 


2. Desenvolupa aplicacions web analitzant i aplicant les característiques del model d'objectes del document. 
2.1  S'ha reconegut el model d'objectes del document d'una pàgina web. 
2.2  S'han identificat els objectes del model, les seves propietats i mètodes. 
2.3  S'ha creat i verificat un codi que accedeixi a l'estructura del document. 
2.4  S'han creat nous elements de l'estructura i modificat elements ja existents. 
2.5  S'han associat accions als esdeveniments del model. 
2.6  S'han identificat les diferències que presenta el model en diferents navegadors. 
2.7  S'han programat aplicacions web de manera que funcionin en navegadors amb diferents implementacions del model. 
2.8  S'han independitzat les tres facetes (contingut, aspecte i comportament), en aplicacions web.

Continguts

1  Integració al codi de la gestió d'esdeveniments i formularis 
1.1 Model de gestió d'esdeveniments. 
1.2 Captura i ús d'esdeveniments  
1.3 Utilització de formularis des de codi. 
1.4  Modificació d'aparença i comportament. Utilització de "cookies".
1.5 Validació i enviament. 
1.6 Expressions regulars. 
1.7 Prova i documentació del codi.


2  Anàlisi i aplicació del model d'objectes del document (DOM)
2.1 El model d'objectes del document (DOM). 
2.1 Objectes del model. Propietats i mètodes dels objectes. 
2.1 Accés al document des de codi. 
2.3 Programació d'esdeveniments. 
2.4 Diferències en les implementacions del model. 
2.5 Diferenciació entre contingut, aspecte i comportament en les aplicacions web.

UF4. Comunicació asíncrona client-servidor. 41 hores

Resultats d’aprenentatge i criteris d’avaluació

1. Desenvolupa aplicacions web dinàmiques, reconeixent i aplicant mecanismes de comunicació asíncrona entre client i servidor. 
1.1 S'han avaluat els avantatges i inconvenients d'utilitzar mecanismes de comunicació asíncrona entre client i servidor web. 
1.2 S'han analitzat els mecanismes disponibles per a l'establiment de la comunicació asíncrona. 
1.3 S'han utilitzat els objectes relacionats. 
1.4 S'han identificat les seves propietats i els seus mètodes. 
e1.5 S'ha utilitzat comunicació asíncrona en l'actualització dinàmica del document web. 
1.6 S'han utilitzat diferents formats en l'enviament i recepció d'informació. 
1.7 S'han programat aplicacions web asíncrones de manera que funcionin en diferents navegadors. 
1.8 S'han classificat i analitzat llibreries que facilitin la incorporació de les tecnologies d'actualització dinàmica a la programació de pàgines web. 
1.9 S'han creat i depurat programes que utilitzin aquestes llibreries.

Continguts

1  Reconeixement i aplicació de mecanismes de comunicació asíncrona
1.1 Mecanismes de comunicació asíncrona. 
1.2 Objectes relacionats. Propietats i mètodes dels objectes.
1.3 Modificació dinàmica del document utilitzant comunicació asíncrona. 
1.4 Formats per a l'enviament i recepció d'informació.
1.5 Programació en diferents navegadors 
1.6 Llibreries d'actualització dinàmica.

UF2. Estructures definides pel programador. Objectes. 30 hores

Resultats d’aprenentatge i criteris d’avaluació

1. Programa codi per a clients web analitzant i utilitzant estructures definides per l'usuari. 
1.1  S'han classificat i utilitzat les funcions predefinides del llenguatge. 
1.2  S'han creat i utilitzat funcions definides per l'usuari. 
1.3  S'han reconegut les característiques del llenguatge relatives a la creació i ús d'arrays. 
1.4  S'han creat i utilitzat arrays. 
1.5  S'han reconegut les característiques d'orientació a objectes del llenguatge. 
1.6  S'ha creat codi per definir l'estructura d'objectes. 
1.6  S'han creat mètodes i propietats. 
1.7  S'ha creat codi que faci ús d'objectes definits per l'usuari. 
1.8  S'ha depurat i documentat el codi.

Continguts

1  Programació amb "arrays", funcions i objectes definits per l'usuari
1.1  Funcions predefinides del llenguatge. 
1.2  Crides a funcions. Definició de funcions. 
1.3   "Arrays"
1.4 Creació d'objectes. 
1.5  Definició de mètodes i propietats
1.6  Ús d'objectes.
1.7  Documentació del codi

Unitats Didàctiques (TEORIA)

UF1. Sintaxi del llenguatge. Objectes predefinits del llenguatge

Enunciat de l'examen d'un any anterior:

NOTA. En l'exercici 6, per a l'expressió regular de les dates, el correcte és: 

temp.match(/^[0-9]{2}[-\/][0-9]{2}[-\/][0-9]{2}$/)

per al número de mòbil: 

temp.match(/^6[0-9]{2}[. -][0-9]{2}[. -][0-9]{2}[. -][0-9]{2}$/)
o bé:
temp.match(/^6[0-9]{2}[.\s-][0-9]{2}[.\s-][0-9]{2}[.\s-][0-9]{2}$/)
millor: (admet que no hi hagi separador, els 9 dígits junts):
temp.match(/^6[0-9]{2}[. -]?[0-9]{2}[. -]?[0-9]{2}[. -]?[0-9]{2}$/)

UF3. Esdeveniments. Manegament de formularis. Model d'objectes del document

UF4. Comunicació asíncrona client-servidor

Examen de mostra: Fitxer:Ex js 180416.zip

UF2. Estructures definides pel programador. Objectes (Calaix de sastre)

Curs Angular de Openwebinars

Llistat de pràctiques (PRÀCTIQUES)

UF1. Sintaxi del llenguatge. Objectes predefinits del llenguatge

Google Classroom: UF1 (codi d'inscripció: in66ekq)

Més exercicis (no cal entregar)

Sintaxi del llenguatge. Exercicis de consola

UF3. Esdeveniments. Manegament de formularis. Model d'objectes del document

Google Classroom: UF3 (codi d'inscripció: xoax3dy)

Examen Star Wars:

Examen del restaurant:

Repte Barcelona Dades Obertes Segona edició_2019

Portal de Barcelona Dades Obertes

Repte Barcelona Dades Obertes Segona edició_2019

Llibreries a mirar:

Us heu de mirar aquests enllaços durant les Festes de Nadal, i en parlem arribant de Festes.

UF4. Comunicació asíncrona client-servidor

Google Classroom: UF4 (codi d'inscripció: eygdyep)

Base de dades de codis postals: Fitxer:Codis postals.dmp.zip

Consultes SQL d'aquesta base de dades de codis postals: 

codis postals que només són d'un municipi:
select CodPostal, count(*) as num_mun_per_cp from t_municipios group by CodPostal having num_mun_per_cp=1; 
per ex, 50500 o 08012

select * from t_municipios where CodPostal='50500';
mysql> select * from t_municipios where CodPostal='50500';
+-------------+---------+-----------+-----------+
| idMunicipio | CodProv | CodPostal | Municipio |
+-------------+---------+-----------+-----------+
|       56761 | 50      | 50500     | TARAZONA  |
+-------------+---------+-----------+------

select * from t_municipios where CodPostal='08012';
+-------------+---------+-----------+-----------+
| idMunicipio | CodProv | CodPostal | Municipio |
+-------------+---------+-----------+-----------+
|       11173 | 08      | 08012     | Barcelona |
+-------------+---------+-----------+-----------+

select Calle from t_calles c, t_municipios m where c.CodPostal=m.CodPostal and c.CodPostal=50500;
Empty set (0,07 sec)
Que no hi hagi resultats significa que Tarazona només té un codi postal.


select Calle from t_calles c, t_municipios m where c.CodPostal=m.CodPostal and c.CodPostal=08012;
...
| TRILLA,Plaça                                                              |
| VALLFOGONA                                                                |
| VENUS                                                                     |
| VERDI   (Impares del 1 al 195)  (Pares del 2 al 174)                      |
| VIRTUT                                                                    |
| XIQUETS DE VALLS 
...
Aquests són els carrers de Barcelona amb cp='08012'

codis postals que comparteixen molts municipis:
select CodPostal, count(*) as num_mun_per_cp from t_municipios group by CodPostal having num_mun_per_cp>1; 
per ex
50830  el comparteixen dos municipis:
select * from t_municipios where CodPostal='50830';
+-------------+---------+-----------+-----------------------+
| idMunicipio | CodProv | CodPostal | Municipio             |
+-------------+---------+-----------+-----------------------+
|       56910 | 50      | 50830     | LOMAS DEL GALLEGO     |
|       56911 | 50      | 50830     | VILLANUEVA DE GALLEGO |
+-------------+---------+-----------+-----------------------+

UF2. Estructures definides pel programador. Objectes

Google Classroom: UF2 (codi d'inscripció: gf7hakd)

Reserva:

Reserva:

Píndoles de codi:

Avaluació

Els instruments d'avaluació són:

  • Assistència. L'assistència és obligatòria. Les faltes s'han de justificar.
  • Actitud i participació a classe, implicació en el treball de cada dia.
  • Lliurament i exposició de les pràctiques encomanades. Entrega puntual dels exercicis.
  • Proves escrites que es realitzaran per comprovar l’assoliment per part de l’alumne dels conceptes explicats a classe.
  • La disposició de l'estudiant a ampliar i aprofundir en el coneixement de les tècniques i conceptes del crèdit i d'assolir la excel•lència
  • L'observació de la capacitat de l'estudiant de treballar en equip.

Els cicles formatius són presencials. Per això es dóna importància a l’avaluació formativa del dia a dia. Aquesta avaluació serà contínua i es concretarà en el treball diari dels alumnes. La forma d’avaluar aquests aspectes serà mitjançant exercicis de classe, preguntes a l’aula, i observació de l’actitud de l’alumne.

Si un alumne falta més d’un 20%, perdrà el dret a convocatòria ordinària i el professor podrà decidir que hagi d'anar a convocatòria extraordinària.

La nota final del crèdit serà la mitja ponderada de tots els nuclis d’activitats. El sistema de ponderació intenta premiar la millora dels alumnes al final del curs i no castigar-los per males notes obtingudes al principi del mateix. Cal considerar que els cicles són estudis professionalitzadors i per tant l’autèntic èxit del procés d’aprenentatge de l’estudiant ve donat per l’acceptació d’aquest nou professional per part del mercat laboral. El professor s’ha de posar en certa mesura en la pell de l’empresa i preguntar-se si l’alumne està preparat per assolir la responsabilitat que li serà exigida. Necessàriament s’ha de fer una avaluació de l'estudiant tot considerant les seves circumstàncies individuals tant pel que fa al grau de domini dels conceptes i procediments del crèdit com, sobre tot, a les seves actituds i valors.

Com a norma general, per aprovar una UF s'han de complir aquests requisits:

  • que la nota de l'examen sigui superior a 3,5
  • que s'hagi entregat com a mínim el 70% de les pràctiques
  • que com a mínim el 50% de les pràctiques estiguin entregades dins del termini.
  • que la mitjana entre pràctiques, notes de classe i examen sigui superior a un 5.

Normativa d'entrega de les pràctiques al Google Classroom

  • Les entregues han de contenir informació sobre els èxits, problemes, dificultats, proves i descobertes que ha tingut l'alumne en el seu procés d'aprenentatge. Ho pots fer a través d'un document que es digui LLEGEIXME.txt, tot i que no és obligatori. Al professor li agrada la verbositat en els comentaris, no tinguis pena d'escriure.
  • Si el resultat de la pràctica és un sol document (pdf, document .txt, document de Google Docs), n'hi ha prou que el pugis. Aquest document ha de contenir text, i potser captures de pantalla.
  • si el resultat de les pràctiques és de varis fitxers (fitxers de text, caputres de pantalla,...), s'hauran de comprimir tots els documents generats en un fitxer que contingui el nom, que descomprimeixi en una carpeta, i entregar-lo al Google Classroom.
  • Si m'entregues captures de pantalla, hauràs de reduir les imatges a un tamany suficient de manera que es puguin veure bé, però que ocupin el mínim d'espai.
  • No hi ha cap motiu perquè les entregues superin 1MB de capacitat (captures de pantalla incloses).
  • Les pràctiques s'han d'entregar en el termini establert. Si s'entreguen fora de plaç (perquè així ho autoritza el professor) quedarà reflexat d'alguna manera en la nota de la pràctica.
  • Si la pràctica es fa entre dues persones, cada persona ha de pujar la pràctica al Google Classroom.

Bibliografia / referències / companys

Programació Continguts i Notes

UF1. Sintaxi del llenguatge. Objectes predefinits del llenguatge. 41 hores

1  Selecció d'arquitectures i eines de programació.
1.1   Models d'execució de codi 
1.2   Mecanismes d'execució de codi en un navegador web. 
1.3   Capacitats i limitacions d'execució. 
1.4   Llenguatges de programació en entorn client.
1.5   Programació de guions  
1.6  Integració del codi amb les etiquetes HTML. 
1.7  Eines de programació sobre clients web. Tecnologies i llenguatges associats 

2  Aplicació i verificació de la sintaxi del llenguatge.
2.1   Selecció de llenguatge de programació de clients web.  
2.2   Variables. 
2.3   Tipus de dades. 
2.4   Assignacions. 
2.5   Operadors. 
2.6   Sentències. 
2.7   Decisions. 
2.8   Bucles. 
2.9   Comentaris al codi. 
2.10 Eines per programar, provar i depurar el codi   

3  Identificació i aplicació  dels objectes predefinits del llenguatge.
3.1   Utilització d'objectes. Objectes nadius del llenguatge.  
3.2   Objectes predefinits associats al navegador. 
3.3   Gestió de l'aparença de la finestra. 
3.4   Generació de text i elements HTML des de codi. 
3.5   Interacció amb el navegador. 
3.6   Aplicacions pràctiques dels marcs. 
3.7   Creació de noves finestres. 
3.8   Comunicació entre finestres 
3.9   Galetes.   
3.10  Documentació del codi.

Notes

UF3. Esdeveniments. Manegament de formularis. Model d'objectes del document. 53 hores

1  Integració al codi del a gestió d'esdeveniments i formularis 
1.1 Model de gestió d'esdeveniments. 
1.2 Captura i ús d'esdeveniments  
1.3 Utilització de formularis des de codi. 
1.4  Modificació d'aparença i comportament. Utilització de "cookies".
1.5 Validació i enviament. 
1.6 Expressions regulars. 
1.7 Prova i documentació del codi.

2  Anàlisi i aplicació del model d'objectes del document (DOM)
2.1 El model d'objectes del document (DOM). 
2.1 Objectes del model. Propietats i mètodes dels objectes. 
2.1 Accés al document des de codi. 
2.3 Programació d'esdeveniments. 
2.4 Diferències en les implementacions del model. 
2.5Diferenciació entre contingut, aspecte i comportament en les aplicacions web.

Notes

  • formulari: control de camps obligatoris i opcionals. Lligar-ho amb CSS
  • formulari: mirar Socrathos i la gestió d'associar diferents events a un element.

UF4. Comunicació asíncrona client-servidor. 41 hores

1  Reconeixement i aplicació de mecanismes de comunicació asíncrona
1.1 Mecanismes de comunicació asíncrona. 
1.2 Objectes relacionats. Propietats i mètodes dels objectes.
1.3 Modificació dinàmica del document utilitzant comunicació asíncrona. 
1.4 Formats per a l'enviament i recepció d'informació.
1.5 Programació en diferents navegadors 
1.6 Llibreries d'actualització dinàmica.

Notes

UF2. Estructures definides pel programador. Objectes. 30 hores

1  Programació amb "arrays", funcions i objectes definits per l'usuari
1.1  Funcions predefinides del llenguatge. 
1.2  Crides a funcions. Definició de funcions. 
1.3   "Arrays"
1.4 Creació d'objectes. 
1.5  Definició de mètodes i propietats
1.6  Ús d'objectes.
1.7  Documentació del codi

Notes

Concurs de Javascript i demos divertides/interessants:

distribució

Curs 2021-2022
UF1: 21 set-2 nov (41h)
UF3: 4 nov - 18 gen (53h)
UF4: 20 gen - 3 mar (41h)
UF2: 8 mar - 5 mai (30h)

Mòdul 6: Desenvolupament web en entorn client (M06 DAW)
Setmana	dia 	hores   acum   UF
0	16set	3	3 Comença la UF1	
0	20set	3	6
1	26set	3	9	
1	27set	3	12	
2	2oct	3	15	
2	3oct	3	18	
3	9oct		21	
3	10oct	3	24	
4	16oct	3	27	
4	17oct	3	30	
5	23oct	3	33	
5	24oct	3	36	
6	30oct	3	39	
6	31oct	3	42	Acaba la UF1
7	4nov	3	45	Comença la UF3	
7	7nov	3	48	
8	13nov	3	51	
8	14nov	3	54	
9	20nov	3	57	
9	21nov	3	60	
10	27nov	3	63	
10	28nov	3	66	
11	4des	3	69
11	5des	3	72	
12	11des	3	75	
12	12des	3	78	
13	18des	3	81	
13	19gen	3	84	
14	8gen	3	87	
14	9gen	3	90	
15	16gen	3	93	Acaba la UF3	
15	20gen	3	96	Comença la UF4	
16	22gen	3	99	
16	23gen	3	102	
17	29gen	3	105	
17	30gen	3	108	
18	5feb	3	111	
18	6feb	3	114	
19	12feb	3	117	
19	13feb	3	120	
20	19feb	3	123	
20	20feb	3	126
els dilluns passen a dues hores	(setmana 21, 22 de febrer, curs 20-21)
21	26feb	3	129	
21	27feb	2	131	
22	5mar	3	134 Acaba la UF4	
22	9mar	2	136 Comença la UF2
23	12mar	3	139 
23	13mar	2	141 	
24	19mar	3	144
24	20mar	2	146
25	26mar	3	149
25	27mar	2	151
Setmana Santa (28 mar-5 abril)	
26	2abr	3	154	
26	3abr	2	156	
27	9abr	3	159
27	10abr	2	161
28	23abr	3	164
28	24abr	2	166
29	30abr	3	169
29	4mai	2	171 Acaba la UF2

creat per Joan Quintana Compte, setembre 2021

Obtingut de «http://wiki.joanillo.org/index.php?title=DAW-M06-WEC&oldid=297545»