Diferència entre revisions de la pàgina «DAW-M06-WEC»

De wikijoan
Salta a la navegació Salta a la cerca
 
(Hi ha 162 revisions intermèdies del mateix usuari que no es mostren)
Línia 1: Línia 1:
−
'''M06. Desenvolupament Web en Entorn de Client'''
 
 
=Presentació de l'assignatura=
 
=Presentació de l'assignatura=
−
*https://twitter.com/BibmatUB/status/1040140524638883841?s=03
 
−
 
 
Materials a l'IOC:
 
Materials a l'IOC:
 
*DAW: https://ioc.xtec.cat/educacio/recursos-materials-aprenentatge?id=627
 
*DAW: https://ioc.xtec.cat/educacio/recursos-materials-aprenentatge?id=627
Línia 12: Línia 9:
 
*http://www.aapri.es/curriculo/fp/daw/desarrollo-web-en-entorno-cliente
 
*http://www.aapri.es/curriculo/fp/daw/desarrollo-web-en-entorno-cliente
 
*[[Fitxer:DAW WEC.pdf]]
 
*[[Fitxer:DAW WEC.pdf]]
−
L'assignatura està disponible en aquesta wiki de l'assignatura:
 
−
*http://wiki.joanillo.org/index.php/DAW-M06-WEC (wiki externa)
 
  
 
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.).
 
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 [http://fpjaumebalmes.blogspot.com.es/ FP del IES Jaume Balmes].
+
Recorda la pàgina web de la [http://www.jaumebalmes.net/ del INS Jaume Balmes].
 +
 
 +
Recursos interessants de Javascript:
 +
*https://twitter.com/Prathkum/status/1389502813605023752
  
−
=Programació=
+
=Distribució horària dels mòduls=
−
*http://www.apimadrid.org/wp-content/uploads/2009/02/borrador-de-asir.pdf
 
−
<pre>
 
 
Mòdul 6: Desenvolupament web en entorn client
 
Mòdul 6: Desenvolupament web en entorn client
 +
 
Durada: 165 hores.
 
Durada: 165 hores.
 +
 
Hores de lliure disposició: 33 hores
 
Hores de lliure disposició: 33 hores
 +
 
Unitats formatives que el componen:
 
Unitats formatives que el componen:
−
UF1. Sintaxi del llenguatge. Objectes predefinits del llenguatge. 30 hores
+
*UF1. Sintaxi del llenguatge. Objectes predefinits del llenguatge. 30 hores
−
UF2. Estructures definides pel programador. Objectes. 30 hores
+
*UF2. Estructures definides pel programador. Objectes. 30 hores
−
UF3. Esdeveniments. Manegament de formularis. Model d'objectes del document. 42 hores
+
*UF3. Esdeveniments. Manegament de formularis. Model d'objectes del document. 42 hores
−
UF4. Comunicació asíncrona client-servidor.  30 hores
+
*UF4. Comunicació asíncrona client-servidor.  30 hores
−
</pre>
 
  
−
===Distribució horària===
+
=Resutats d'Aprenentatge (RA)=
−
'''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).
+
==UF1. Sintaxi del llenguatge. Objectes predefinits del llenguatge==
−
 
 
−
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ó===
 
 
<pre>
 
<pre>
 
1. Selecciona les arquitectures i tecnologies de programació sobre clients web, identificant i analitzant les capacitats i característiques de cadascuna.  
 
1. Selecciona les arquitectures i tecnologies de programació sobre clients web, identificant i analitzant les capacitats i característiques de cadascuna.  
Línia 72: Línia 59:
 
3.8  S'ha depurat i documentat el codi.
 
3.8  S'ha depurat i documentat el codi.
 
</pre>
 
</pre>
−
===Continguts===
 
−
<pre>
 
−
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.
+
==UF3. Esdeveniments. Manegament de formularis. Model d'objectes del document==
−
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.
 
−
</pre>
 
−
 
 
−
==UF3. Esdeveniments. Manegament de formularis. Model d'objectes del document. 53 hores==
 
−
===Resultats d’aprenentatge i criteris d’avaluació===
 
 
<pre>
 
<pre>
 
1. Desenvolupa aplicacions web interactives integrant mecanismes de maneig d'esdeveniments.  
 
1. Desenvolupa aplicacions web interactives integrant mecanismes de maneig d'esdeveniments.  
Línia 133: Línia 83:
 
2.8  S'han independitzat les tres facetes (contingut, aspecte i comportament), en aplicacions web.  
 
2.8  S'han independitzat les tres facetes (contingut, aspecte i comportament), en aplicacions web.  
 
</pre>
 
</pre>
−
===Continguts===
+
==UF4. Comunicació asíncrona client-servidor==
−
<pre>
 
−
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.
 
−
</pre>
 
−
 
 
−
==UF4. Comunicació asíncrona client-servidor. 41 hores==
 
−
===Resultats d’aprenentatge i criteris d’avaluació===
 
 
<pre>
 
<pre>
 
1. Desenvolupa aplicacions web dinàmiques, reconeixent i aplicant mecanismes de comunicació asíncrona entre client i servidor.  
 
1. Desenvolupa aplicacions web dinàmiques, reconeixent i aplicant mecanismes de comunicació asíncrona entre client i servidor.  
Línia 168: Línia 96:
 
1.9 S'han creat i depurat programes que utilitzin aquestes llibreries.  
 
1.9 S'han creat i depurat programes que utilitzin aquestes llibreries.  
 
</pre>
 
</pre>
−
===Continguts===
+
==UF2. Estructures definides pel programador. Objectes.==
−
<pre>
 
−
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.
 
−
</pre>
 
−
 
 
−
==UF2. Estructures definides pel programador. Objectes. 30 hores==
 
−
===Resultats d’aprenentatge i criteris d’avaluació===
 
 
<pre>
 
<pre>
 
1. Programa codi per a clients web analitzant i utilitzant estructures definides per l'usuari.  
 
1. Programa codi per a clients web analitzant i utilitzant estructures definides per l'usuari.  
Línia 193: Línia 109:
 
1.8  S'ha depurat i documentat el codi.  
 
1.8  S'ha depurat i documentat el codi.  
 
</pre>
 
</pre>
−
===Continguts===
+
=Bibliografia=
−
<pre>
+
Materials de la IOC:
−
1  Programació amb "arrays", funcions i objectes definits per l'usuari
+
*https://ioc.xtec.cat/materials/FP/Recursos/fp_daw_m06_/web/fp_daw_m06_htmlindex/
−
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
 
−
</pre>
 
  
−
=Unitats Didàctiques ('''TEORIA''')=
+
=Programació=
−
==UF1. Sintaxi del llenguatge. Objectes predefinits del llenguatge==
+
'''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.
−
*UF1_1: [[Introducció al llenguatge Javascript]]. Selecció d'arquitectures i eines de programació.
 
−
*UF1_2: [[Tutorial de Javascript: http://www.w3schools.com/js/]]
 
−
*UF1_3: [[Comparativa de llenguatges de script. Llegir un fitxer]]
 
−
*UF1_4: [[Elecció d'un IDE per a programació web/javascript]]
 
−
*UF1_5: [[Entorns online per executar codi Javascript]]
 
−
*UF1_6: [[Firebug. Execució en línia de comandes i execució en el navegador]]
 
−
*UF1_7: [[Validació de documents XHTML]]
 
−
*UF1_8: [[Aclaracions Javascript UF1]]
 
−
Enunciat de l'examen d'un any anterior:
 
−
*[[Fitxer:Examen antic uf1.pdf]]
 
−
*Solució: [[Fitxer:Solucio ex uf1.zip]]
 
−
'''NOTA'''. En l'exercici 6, per a l'expressió regular de les dates, el correcte és:
 
−
<pre>
 
−
temp.match(/^[0-9]{2}[-\/][0-9]{2}[-\/][0-9]{2}$/)
 
−
</pre>
 
−
per al número de mòbil:
 
−
<pre>
 
−
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}$/)
 
−
</pre>
 
−
*Enunciat i solució d'un altre examen UF1: [[Fitxer:UF1 Ex1 1314.zip]]
 
  
−
*Examen UF1 curs 20-21: [[Fitxer:Solucio UF1 2021.zip]]
+
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. 30 hores
  
−
==UF3. Esdeveniments. Manegament de formularis. Model d'objectes del document==
+
==UF1. Sintaxi del llenguatge. Objectes predefinits del llenguatge.==
−
*UF3_1: [[Teoria de DOM]]
+
===Continguts===
−
*UF3_2: [[Exemples del DOM]]
 
−
*UF3_3: [[Map Area]]
 
−
*UF3_4: [[Formulari I: Javascript, CSS (maquetació i disseny)]]
 
−
*UF3_5: [[Formulari II: PHP + MySQL. Cookies i variables de sessió]]
 
−
*UF3_6: [[Formulari i events. Tècniques avançades]]
 
−
 
 
−
==UF4. Comunicació asíncrona client-servidor==
 
−
*UF4_1: [[Ajax. Introducció]]
 
−
*UF4_2: [[Ajax. PHP i BD]]
 
−
*UF4_3: [[Introducció_a_Node.js]]
 
−
*UF4_4: [[Parsejar XML en el cantó del servidor (PHP)]]
 
−
*UF4_5: [[Formats d'intercanvi d'informació. JSON]]
 
−
*UF4_6: [[Overpass API calls (OpenStreetMap)]]
 
−
*UF4_7: [[CORS (Cross-Origin Resource Sharing) i Access-Control-Allow-Origin]]
 
−
*UF4_8: [[JSONP: JSON with Padding]]
 
−
*UF4_9: [[Fetch API]]
 
−
*UF4_10: [[Minesweeper - Pescamines - Buscaminas]]
 
−
 
 
−
Examen de mostra: [[Fitxer:Ex js 180416.zip]]
 
−
 
 
−
==UF2. Estructures definides pel programador. Objectes (Calaix de sastre)==
 
−
*UF2_1: [[JQuery Framework. Teoria]]
 
−
*UF2_2: [[jQuery AJAX]]
 
−
*UF2_3: [[TypeScript]]
 
−
*UF2_4: [[Introducció als frameworks de Javascript]] (abril 2020)
 
−
 
 
−
Curs Angular de Openwebinars
 
−
*UF2_3: [[I. Angular 4 Openwebinars]] Introducció
 
−
*UF2_3: [[II. Angular 4 Openwebinars]] Typescript
 
−
*UF2_3: [[IIIa. Angular 4 Openwebinars]] Angular
 
−
*UF2_3: [[IIIb. Angular 4 Openwebinars]] Angular
 
−
 
 
−
*UF2_3: [[Angular I. Setting Up Your Angular App]]
 
−
*UF2_4: [[Angular II. Modules and Services]]
 
−
*UF2_3: [[impress.js. Presentacions amb HTML5]]
 
−
*UF2_4: [[Google Maps JavaScript API v3 (assignatura WEC)]]
 
−
*UF2_5: [[Angular framework]]
 
−
 
 
−
*NO: [[Frameworks de Javascript. Angular]]
 
−
 
 
−
=Llistat de pràctiques ('''PRÀCTIQUES''')=
 
−
==UF1. Sintaxi del llenguatge. Objectes predefinits del llenguatge==
 
−
Google Classroom: [https://classroom.google.com/c/MTYwMDgyMjcyNTA1 UF1] (codi d'inscripció: in66ekq)
 
−
*UF1_1: [[Sintaxi del llenguatge I]]. Introducció, sentències, comentaris, variables
 
−
*UF1_2: [[Sintaxi del llenguatge II]]. Data Types, Objects, Functions, Operators, Comparisons, If...Else, Switch, Popup Boxes, For Loop, While Loop
 
−
*UF1_3: [[Pràctica de detecció d'errors i ús del IDE]]
 
−
*UF1_4: [[Sintaxi del llenguatge III]]. Object, Number, String, Date, Array
 
−
*UF1_5: [[Sintaxi del llenguatge IV]]. Boolean, Math, RegExp, Object
 
−
 
 
−
===Més exercicis (no cal entregar)===
 
−
[[Sintaxi del llenguatge. Exercicis de consola]]
 
−
 
 
−
==UF3. Esdeveniments. Manegament de formularis. Model d'objectes del document==
 
−
Google Classroom: [https://classroom.google.com/c/MTYwMDgyMjcyNTMy UF3] (codi d'inscripció: xoax3dy)
 
−
*UF3_1: [[Exercicis DOM I]]
 
−
*UF3_2: [[Recórrer el DOM. Formulari Google Account]]
 
−
*[[M06-UF3, Exercicis de classe]] (rellotge analògic 9/12/2019, flocs de neus/copos 19/12/2019, Bon Nadal!)
 
−
*UF3_3: [[Formulari III: createElement i addEventListener]] (pràctica de contacte i mails)
 
−
*UF3_4: [[Aplicació de facturació trimestral]]
 
−
*UF3_5: [[Validació de formularis. Llibreria validate.js]] (Carta als Reis d'Orient)
 
−
*UF3_6: [[Test de les capitals europees]]
 
−
*UF3_7: [[Buscamines/Minesweeper amb Javascript]] (pràctica opcional)
 
−
*UF3_8: [[Projecte: BOM - Llista de Materials]]
 
−
*UF3_9: [[Sudoku]] (opcional)
 
−
*'''NO''': UF3_4: [[Formulari I: Javascript, CSS (maquetació i disseny). Pràctica]]
 
−
*'''NO''': UF3_5: [[Formulari II: PHP + MySQL. Cookies i variables de sessió. Pràctica]]
 
−
 
 
−
Examen Star Wars:
 
−
*Enunciat: [[Fitxer:Examen WEC 1718 UF3.pdf]]
 
−
*Solució: [[Fitxer:Solucio ex star wars.zip]]
 
−
Examen del restaurant:
 
−
*Enunciat: [[Fitxer:WEC UF3 Ex2 1516.pdf]]
 
−
*Solució: [[Fitxer:Examen mostra.zip]]
 
−
 
 
−
===Repte Barcelona Dades Obertes Segona edició_2019===
 
−
Portal de Barcelona Dades Obertes
 
−
*http://opendata-ajuntament.barcelona.cat/
 
−
Repte Barcelona Dades Obertes Segona edició_2019
 
−
*http://opendata-ajuntament.barcelona.cat/ca/repte-barcelona-dades-obertes
 
−
Llibreries a mirar:
 
−
*https://www.openstreetmap.org/
 
−
*https://d3js.org/
 
−
*https://www.highcharts.com/demo/
 
−
Us heu de mirar aquests enllaços durant les Festes de Nadal, i en parlem arribant de Festes.
 
−
*[[Repte Barcelona Dades Obertes Segona edició_2019]]
 
−
 
 
−
==UF4. Comunicació asíncrona client-servidor==
 
−
Google Classroom: [https://classroom.google.com/c/MTYwMDgyMjcyNTQ2 UF4] (codi d'inscripció: eygdyep)
 
−
*UF4_1: [[Receptes de cuina amb Recipe XML]] (receptes en local)
 
−
*UF4_2: [[Receptes de cuina en repositori remot. JSONP i CORS]] (receptes en remot)
 
−
*UF4_3: [[Comunitats, províncies, municipis. AJAX i bases de dades]] (PHP)
 
−
*UF4_4: [[Comunitats, províncies, municipis. Migració a Node.js]] (NodeJS, Fetch API, JSON, codi orientat a POO)
 
−
*UF4_5: [[Artròpodes: classes, ordres, famílies. Pràctica AJAX]] ('''NO''', es comenta a classe)
 
−
*UF4_6: [[Examen de mostra. Cotxes i vocabulari d'anglès]]
 
−
*UF4_7: [[Aplicació web amb motor Python]] (nou curs 19-20)
 
−
*UF4_8 ('''NO''', però llegir): [[Artròpodes: AJAX i JSON]]
 
−
*UF4_9: [[Exercicis JSONP]] ('''NO''')
 
−
 
 
−
Base de dades de codis postals: [[Fitxer:Codis postals.dmp.zip]]
 
−
 
 
−
Consultes SQL d'aquesta base de dades de codis postals:
 
−
<pre>
 
−
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 |
 
−
+-------------+---------+-----------+-----------------------+
 
−
 
 
−
</pre>
 
−
 
 
−
==UF2. Estructures definides pel programador. Objectes==
 
−
Google Classroom: [https://classroom.google.com/c/MTYwMDgyMjcyNTE3 UF2] (codi d'inscripció: gf7hakd)
 
−
*UF2_1: [[jQuery: Tablesorter]]
 
−
*'''OPCIONAL''': [[Desplegar_un_projecte_web_amb_Express_i_Heroku]]
 
−
*UF2_2: [[React: A JavaScript library for building user interfaces]]
 
−
*UF2_3: [[TypeScript: Classe Figura. Dibuix 2D]]
 
−
*UF2_4: [[Angular. Tutorial Tour of Heroes]]
 
−
*UF2_5: [[Angular. Building CRUD Web Application]]
 
−
 
 
−
Reserva:
 
−
*UF: [[Pràctica OSM (Open Street Maps)]]
 
−
*UF: [[Mapes coroplètics]]
 
−
*UF: [[Openlayers: ol package. Exemple Casa de Papel]] (OpenLayers amb Node)
 
−
*UF: [[Pràctica Google Maps]]
 
−
*UF: [[Framework Angular]]
 
−
*UF: [[Visualització de dades i Open Data amb la llibreria Highcharts]]
 
−
 
 
−
Reserva:
 
−
*https://www.npmjs.com/npm/state-of-javascript-frameworks-2017-part-1
 
−
*[[JS1K: Concurs Javascript 1K]]
 
−
*llibreria flipclockjs (http://flipclockjs.com/)
 
−
*https://d3js.org/ -> Data Driven Documents
 
−
*https://vuejs.org/
 
−
*[[Carrets de compra amb Javascript]]
 
−
*jQuery: Teoria. Exercicis de classe
 
−
*[[Menú desplegable. Diferents solucions]]
 
−
*[[Collapsable list/tree: sense i amb jQuery]]
 
−
*[[Node JS]] (TBD)
 
−
*Xerrada Francesc Dalmau (abril 2013). Materials: [[Fitxer:Francesc dalmau.zip]]
 
−
*[[Xerrada Francesc Dalmau (abril 2014)]]
 
−
*[[Gràfiques amb Javascript: http://www.highcharts.com/]]
 
−
*Llibreria Impress
 
−
*UF2_4: [[Framework Angular JS]] I
 
−
*UF2_5: [[Framework Angular]] II
 
−
 
 
−
Píndoles de codi:
 
−
*[[Google sign-in and OAuth 2.0. Exemple mínim]]
 
−
 
 
−
=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.
 
−
==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=
 
−
*Standard ECMA-262. Especificació del llenguatge ECMAScript (Juny 2017): http://www.ecma-international.org/ecma-262/
 
−
*Javascrit para desarrolladores web. Ed Anaya. Nicholas C. Zakas
 
−
*JavaScript Bible. 4th Edition. Danny Goodman
 
−
*Manual de Javascript. José Antonio Rodríguez (pdf)
 
−
*http://www.w3schools.com/js/default.asp
 
−
*http://eloquentjavascript.net/
 
−
*curs de Javascript de Codeacademy (http://www.codecademy.com)
 
−
 
 
−
=Programació Continguts i Notes=
 
−
==UF1. Sintaxi del llenguatge. Objectes predefinits del llenguatge. 41 hores==
 
 
<pre>
 
<pre>
 
1  Selecció d'arquitectures i eines de programació.
 
1  Selecció d'arquitectures i eines de programació.
Línia 494: Línia 158:
 
3.10  Documentació del codi.
 
3.10  Documentació del codi.
 
</pre>
 
</pre>
−
===Notes===
+
 
−
==UF3. Esdeveniments. Manegament de formularis. Model d'objectes del document. 53 hores==
+
==UF2. Estructures definides pel programador. Objectes.==
 +
===Continguts===
 
<pre>
 
<pre>
−
1  Integració al codi del a gestió d'esdeveniments i formularis  
+
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
 +
</pre>
 +
 
 +
==UF3. Esdeveniments. Manegament de formularis. Model d'objectes del document.==
 +
===Continguts===
 +
<pre>
 +
1  Integració al codi de la gestió d'esdeveniments i formularis  
 
1.1 Model de gestió d'esdeveniments.  
 
1.1 Model de gestió d'esdeveniments.  
 
1.2 Captura i ús d'esdeveniments   
 
1.2 Captura i ús d'esdeveniments   
Línia 505: Línia 183:
 
1.6 Expressions regulars.  
 
1.6 Expressions regulars.  
 
1.7 Prova i documentació del codi.
 
1.7 Prova i documentació del codi.
 +
  
 
2  Anàlisi i aplicació del model d'objectes del document (DOM)
 
2  Anàlisi i aplicació del model d'objectes del document (DOM)
Línia 512: Línia 191:
 
2.3 Programació d'esdeveniments.  
 
2.3 Programació d'esdeveniments.  
 
2.4 Diferències en les implementacions del model.  
 
2.4 Diferències en les implementacions del model.  
−
2.5Diferenciació entre contingut, aspecte i comportament en les aplicacions web.
+
2.5 Diferenciació entre contingut, aspecte i comportament en les aplicacions web.
 
</pre>
 
</pre>
−
===Notes===
+
==UF4. Comunicació asíncrona client-servidor.==
−
*formulari: control de camps obligatoris i opcionals. Lligar-ho amb CSS
+
===Continguts===
−
*formulari: mirar Socrathos i la gestió d'associar diferents events a un element.
 
−
 
 
−
==UF4. Comunicació asíncrona client-servidor. 41 hores==
 
 
<pre>
 
<pre>
 
1  Reconeixement i aplicació de mecanismes de comunicació asíncrona
 
1  Reconeixement i aplicació de mecanismes de comunicació asíncrona
Línia 528: Línia 204:
 
1.6 Llibreries d'actualització dinàmica.
 
1.6 Llibreries d'actualització dinàmica.
 
</pre>
 
</pre>
−
===Notes===
+
==Distribució horària==
−
*http://api.jquery.com/jQuery.ajax/
+
*UF1:‌ ‌Sintaxi del llenguatge. Objectes predefinits del llenguatge. 41 hores
−
*http://www.w3schools.com/jquery/jquery_ajax_intro.asp
+
*UF3:‌‌ Esdeveniments. Manegament de formularis. Model d'objectes del document. 42 hores
 +
*UF4:‌ Comunicació asíncrona client-servidor. 30 hores
 +
*UF2:‌ ‌Estructures definides pel programador. Objectes. 30 hores
 +
===Curs 2021-2022===
 +
Curs 2021-2022
 +
*UF1: 21 set-4 nov (41h)
 +
*UF3: 9 nov - 18 gen (53h)
 +
*UF4: 20 gen - 10 mar (41h)
 +
*UF2: 15 mar - 5 mai (30h)
 +
Les classes són dimarts i dijous, en blocs de tres hores. A partir de la setmana 21 (21 de febrer), el bloc del dijous passa a ser de dues hores.
 +
 
 +
=Avaluació=
 +
L'alumne coneixerà, des del principi de la UF, els criteris d'avaluació de les Unitats Formatives (UF) i de les activitats d'ensenyament (AEA) de què consten les UFs.
 +
==Avaluació de les AEA==
 +
Una activitat d'ensenyament-aprenentatge està formada per Teoria (T), pràctiques (Pt), qüestionaris (Q) i altres activitats com poden ser notes de classe i activitats voluntàries (Gr).
 +
 
 +
*'''T''': Píndoles de teoria
 +
*'''Q''': Qüestionaris. Són exercicis que obligatòriament es fan a classe, i s'han d'entregar en el Classroom al final de la classe
 +
*'''Pt''': Pràctiques. Són més llargues, es comencen a classe, i si no dóna temps es poden acabar a casa. El termini per entregar en el Classroom és més llarg.
 +
*'''Gr''': rúbriques de classe i tasques voluntàries/complementàries/d'aprofundiment.
 +
 
 +
Les tasques voluntàries permeten la modificació (a l'alça) de la nota final de cada activitat d'E-A. La manera com modifica la nota és la següent:
 +
Si les tasques voluntàries superen la nota de l'AEA, la nota calculada de l'AEA representa el 85% de la nota final, i les tasques voluntàries el 15% (la qual cosa farà augmentar la nota final de l'AEA).
 +
==Avaluació de les UFs==
 +
La UF consta de diverses AEA i d'una prova final (Ex). L'alumne coneixerà els pesos de cada AEA i de la prova/examen final amb què es calcularà la nota final de la UF.
 +
 
 +
=AEA: Activitats d'Ensenyament-Aprenentatge=
 +
==UF1. Sintaxi del llenguatge. Objectes predefinits del llenguatge (Classroom: kkn6pnq)==
 +
===UF1A1. Javascript. Sintaxi I===
 +
*[[M06 UF1A1. Teoria]]
 +
*Q1: [[M06 UF1Q1. ECMAScript]]
 +
*Pr1: [[M06 UF1Pr1. Llegir fitxer amb llenguatges interpretats]]
 +
*Q2: [[M06 UF1Q2. Funcions. Expressions i operadors]]
 +
*Q3: [[M06 UF1Q3. Objectes Number, Date, String]]
 +
 
 +
===UF1A2. Javascript. Sintaxi II===
 +
*[[M06 UF1A2. Teoria]]
 +
*[[M06 UF1A2. Tests unitaris (teoria)]]
 +
*Q4: [[M06 UF1Q4. Expressions regulars]]
 +
*Pr2: [[M06 UF1Pr2. Tests unitaris per practicar la sintaxi de Javascript]]
 +
 
 +
===UF1A3. Javascript. Sintaxi III. Objectes===
 +
*[[M06 UF1A3. Teoria]]
 +
*Q5: [[M06 UF1Q5. Exercicis per practicar objectes]]
 +
*Pr3: [[M06 UF1Pr3. Objecte Clock]]
 +
 
 +
===Avaluació UF1===
 +
<pre>
 +
Activitats:
 +
Q_UF1A1 = 0.25*Q1 + 0.25*Pr1 + 0.25*Q2 + 0.25*Q3
 +
Q_UF1A2 = 0.4*Q4 + 0.6*Pr2
 +
Q_UF1A3 = 0.4*Q5 + 0.6*Pr3
 +
 
 +
Q_UF1‌ ‌= 0.2*Q_UF1A1 + 0.2*Q_UF1A2 + 0.2*Q_UF1A3 + 0.4*Q_EXUF1
 +
</pre>
 +
Es penalitzen les entregues fora de termini. Es premia la participació a classe.
 +
 
 +
==UF3. Esdeveniments. Manegament de formularis. Model d'objectes del document (Classroom: 5rmdnxk)==
 +
 
 +
===UF3A1. DOM: Document Object Model===
 +
*[[M06 UF3A1. Teoria]]
 +
*[[M06 UF3A1. Teoria II]]
 +
*Q1: [[M06UF3Q1. Exercicis de classe: segons, password]]
 +
*Q2: [[M06UF3Q2. Exercicis de classe]] (separació de codi, Apollo 11, drag and drop)
 +
*Pr1: [[M06UF3Pr1: joc del Pong]]
 +
*Q3: [[M06UF3Q3: Google Images i taula dinàmica]]
 +
 
 +
===UF3A2. Formularis i events===
 +
*[[M06 UF3A2. Teoria]]
 +
*Q4: [[M06UF3Q4. Introducció al pescamines]]
 +
*Pr2: [[Formulari. Rectes que es creuen]]
 +
*Pr3. [[Validació de formularis. Llibreria validate.js]]
 +
 
 +
===UF3A3. createElement, addEventListener===
 +
*Pr4: [[Aplicació de facturació trimestral]]
 +
*Pr5: [[Projecte: BOM - Llista de Materials]]
 +
*Examen de mostra d'un any anterior: [[Fitxer:Mostra Ex UF3.zip]]
 +
 
 +
===Avaluació UF3===
 +
<pre>
 +
Activitats:
 +
Q_UF3A1 = 0.20*Q1 + 0.20*Q2 + 0.40*Pr1 + 0.20*Q3
 +
Q_UF3A2 = 0.20*Q4 + 0.40*Pr2 + 0.40*Pr3
 +
Q_UF3A3 = 0.50*Pr4 + 0.50*Pr5
 +
 
 +
Q_UF3 ‌= 0.22*Q_UF3A1 + 0.22*Q_UF3A2 + 0.16*Q_UF3A3 + 0.4*Q_EXUF3
 +
</pre>
 +
Es penalitzen les entregues fora de termini. Es premia la participació a classe.
 +
 
 +
==UF4. Comunicació asíncrona client-servidor. (Classroom: '''2oaog4f''')==
 +
===UF4A1. AJAX: Introducció===
 +
*M06 UF4T1: [[Ajax._Introducció]]
 +
*M06 UF4T2: [[JSONP: JSON with Padding]]
 +
*M06 UF4T3: [[AJAX PHP i BD]]
 +
*M06 UF4T4: [[Formats d'intercanvi d'informació. JSON]]
 +
*Q1: [[M06UF4Q1. cd_catalog.xml]]
 +
*Q2: [[M06UF4Q2. Fes dues receptes de cuina]]
 +
*Pr1: [[M06UF4Pr1: Receptes de cuina]]
 +
*Q3: [[M06UF4Q3. JSONP: Parcs de Barcelona]]
 +
*Pr2: [[M06UF4Pr2: JSONP: Receptes de cuina]] (encara no, he de canviar coses)
 +
*Q4: M06UF4Q4. [[Bàsic AJAX-PHP-BD (customers)]]
 +
*Q5: [[M06UF4Q5. JSON i Javascript. Exemples incrementals]]
 +
*Pr3: [[Comunitats, províncies, municipis. AJAX i bases_de_dades]]
  
−
==UF2. Estructures definides pel programador. Objectes. 30 hores==
+
===UF4A2. AJAX: Avançat===
 +
*M06 UF4T5: [[Introducció a Node.js]]
 +
*M06 UF4T7: [[Fetch API]]
 +
*Pr4: [[Comunitats, províncies, municipis. Migració a Node.js]]
 +
*M06 UF4T6 - Q1: [[Promises. Async-Await]]
 +
*Q2: Exercicis de classe Fetch API: Kobe Bryan i dòlments: [[Fetch API]]
 +
*Pr5: [[Aplicació web amb motor Python]]
 +
 
 +
===Avaluació UF4===
 
<pre>
 
<pre>
−
1  Programació amb "arrays", funcions i objectes definits per l'usuari
+
Activitats:
−
1.1 Funcions predefinides del llenguatge.  
+
Q_UF4A1 = 0.1*Q1 + 0.1*Q2 + 0.2*Pr1 + 0.1*Q3 + 0.2*Pr2 + 0.1*Q4 + 0.1*Q5 + 0.1*Pr3
−
1.2 Crides a funcions. Definició de funcions.  
+
Q_UF4A2 = 0.2*Q1 + 0.3*Pr4 + 0.2*Q2 + 0.3*Pr5
−
1.3   "Arrays"
+
 
−
1.4 Creació d'objectes.  
+
Q_UF4 ‌= 0.4*Q_UF4A1 + 0.2*Q_UF4A2 + 0.4*Q_EXUF4
−
1.5  Definició de mètodes i propietats
+
</pre>
−
1.6  Ús d'objectes.
+
Es penalitzen les entregues fora de termini. Es premia la participació a classe.
−
1.7  Documentació del codi
+
 
 +
==UF2. Estructures definides pel programador. Objectes. (Classroom: '''bxcupxr''')==
 +
===UF2A1: Mòduls i llibreries===
 +
*T1: [[TypeScript]]
 +
*Q1: [[Mòduls amb Javascript]]
 +
*Pr1: [[Mòduls amb Javascript. Mapes amb OpenLayers]] (dòlmens)
 +
*Pr2: [[Visualització de dades i Open Data amb la llibreria Highcharts]] (arbrat de Barcelona)
 +
*Pr3: [[TypeScript: Classe Figura. Dibuix 2D]]
 +
 
 +
===UF2A2: Frameworks===
 +
*T1: [[Introducció als frameworks de Javascript]]
 +
*T2: [[Tutorial ReactJS 21-22]]
 +
*Pr1: [[Tutorial ReactJS 21-22. Tasques]]
 +
(abril 2022)
 +
 
 +
===Avaluació UF2===
 +
<pre>
 +
Activitats:
 +
Q_UF2A1 = 0.25*Q1 + 0.25*Pr1 + 0.25*Pr2 + 0.25*Pr3
 +
Q_UF2A2 = 1.00*Pr1
 +
 
 +
Q_UF2 ‌= 0.75*Q_UF2A1 + 0.25*Q_UF2A2
 
</pre>
 
</pre>
−
===Notes===
+
Es penalitzen les entregues fora de termini. Es premia la participació a classe.
−
*JSON? Jacascript-Core.pptx
 
−
*validació NIF, CIF i NIE amb jQuery: http://sourcecookbook.com/en/recipes/36/validacion-automatica-de-cif-nif-y-nie-segun-la-ultima-legislacion-j-query
 
−
*jQuery. tablesorter. Què passa quan volem que les nostres taules es puguin ordenar per columnes? http://tablesorter.com/docs/
 
−
*menús desplegables
 
−
*llistes col·lapsables. http://code.stephenmorley.org/javascript/collapsible-lists/
 
−
*galeria de fotos com arthropoda.joanillo.org
 
−
*Google Maps JavaScript API v3: https://developers.google.com/maps/documentation/javascript/tutorial
 
−
*aplicació GPS
 
−
*gràfiques: http://www.highcharts.com (es pot aplicar a les rutes GPS)
 
−
*http://jqueryui.com/demos/
 
  
−
Concurs de Javascript i demos divertides/interessants:
+
=Desplegament d'Aplicacions Web=
−
*http://js1k.com/2013-spring/demos
+
==UF3. Aplicacions web i serveis==
 +
(3 de febrer al 17 de març)
 +
*T1: [[Què és Docker (contenidors)]]
 +
*T2: [[Docker al mòdul DAM-M02]]
 +
*T3: [[LDAP: Lightweight Directory Access Protocol]]
 +
*Q1: [[Q. Instal·lació de Docker]]
 +
*Q2: [[Q. Instal·lació i configuració del docker del curs GDS]]
 +
*Pr1: [[Pr. Creació i desplegament d'un contenidor amb Docker]]
 +
*Q3: [[Servidors Privats Virtuals: VPS]]
 +
*Pr2: [[Vagrant Boxes. Caixa Linux-Oracle]]
 +
*Pr3: [[Vagrant Boxes. Base de dades Oracle]]
 +
*Pr4: [[Autenticació LDAP]]
 +
*Pr5: [[Autenticació OAuth 2.0]]
  
−
==distribució==
+
===Avaluació UF3===
 
<pre>
 
<pre>
−
Curs 2019-2020
+
Activitats:
−
UF1: 16 set-31 oct (41h)
+
Q_UF4 = 0.1*Q1 + 0.1*Q2 + 0.15*Pr1 + 0.1*Q3 + 0.15*Pr2 + 0.15*Pr3 + 0.15*Pr4 + 0.1*Pr5
−
UF3: 4 nov - 16 gen (53h)
 
−
UF4: 20 gen - 5 mar (41h)
 
−
UF2: 9 mar - 4 mai (30h)
 
 
</pre>
 
</pre>
 +
Es penalitzen les entregues fora de termini. Es premia la participació a classe.
 +
 +
==UF4. Control de versions i documentació==
 +
(23 de març al 1 de maig)
 +
 +
*T. [[OVH. VPS Essential jaumebalmes.net]]
 +
*T. [[Desplegar aplicació a VPS]]
 +
*Q1. [[Sessió inicial al VPS del jaumebalmes]]
 +
*Q2: [[JSDoc: documentació amb Javascript]]
 +
*Pr1: [[Despleguem tres aplicacions]]
 +
*Pr2: [[Projecte full-stack: React + Node Express + MySQL. Desplegament]]
 +
*Pr3. [[Github tutorial]]
 +
 +
===Avaluació UF4===
 
<pre>
 
<pre>
−
Mòdul 6: Desenvolupament web en entorn client (M06 DAW)
+
Activitats:
−
Setmana dia hores  acum  UF
+
Q_UF4 = 0.15*Q1 + 0.15*Q2 + 0.25*Pr1 + 0.25*Pr2 + 0.20*Pr3
−
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
 
−
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
 
−
26 2abr 3 154
 
−
26 3abr 2 156
 
−
Setmana Santa (5-12 abril)
 
−
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
 
 
</pre>
 
</pre>
−
{{Autor}}, setembre 2019
+
Es penalitzen les entregues fora de termini. Es premia la participació a classe.
−
[[Categoria: Institut Jaume Balmes]]
+
 
−
[[Categoria: Assignatura DAW-M06-WEC]]
+
(TBD)
 +
*[[Desplegament d'una aplicació web des de Sublime Text 3]] (integrar)
 +
*Pr. [[Desplegar una aplicació a Github Pages]] (TBD)
 +
*Q. [[Github pràctic: correcció d'errors en script de Javascript]]
 +
*Pr. [[Github: workflow dos programadors]]
 +
 
 +
 
 +
 
 +
{{Autor}}, agost 2021, abril 2022

Revisió de 15:46, 27 abr 2022

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:

Distribució horària dels mòduls

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

Resutats d'Aprenentatge (RA)

UF1. Sintaxi del llenguatge. Objectes predefinits del llenguatge

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.

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

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.

UF4. Comunicació asíncrona client-servidor

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.

UF2. Estructures definides pel programador. Objectes.

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.

Bibliografia

Materials de la IOC:

Programació

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.

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. 30 hores

UF1. Sintaxi del llenguatge. Objectes predefinits del llenguatge.

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.

UF2. Estructures definides pel programador. Objectes.

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

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

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.

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.

Distribució horària

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

Curs 2021-2022

Curs 2021-2022

  • UF1: 21 set-4 nov (41h)
  • UF3: 9 nov - 18 gen (53h)
  • UF4: 20 gen - 10 mar (41h)
  • UF2: 15 mar - 5 mai (30h)

Les classes són dimarts i dijous, en blocs de tres hores. A partir de la setmana 21 (21 de febrer), el bloc del dijous passa a ser de dues hores.

Avaluació

L'alumne coneixerà, des del principi de la UF, els criteris d'avaluació de les Unitats Formatives (UF) i de les activitats d'ensenyament (AEA) de què consten les UFs.

Avaluació de les AEA

Una activitat d'ensenyament-aprenentatge està formada per Teoria (T), pràctiques (Pt), qüestionaris (Q) i altres activitats com poden ser notes de classe i activitats voluntàries (Gr).

  • T: Píndoles de teoria
  • Q: Qüestionaris. Són exercicis que obligatòriament es fan a classe, i s'han d'entregar en el Classroom al final de la classe
  • Pt: Pràctiques. Són més llargues, es comencen a classe, i si no dóna temps es poden acabar a casa. El termini per entregar en el Classroom és més llarg.
  • Gr: rúbriques de classe i tasques voluntàries/complementàries/d'aprofundiment.

Les tasques voluntàries permeten la modificació (a l'alça) de la nota final de cada activitat d'E-A. La manera com modifica la nota és la següent: Si les tasques voluntàries superen la nota de l'AEA, la nota calculada de l'AEA representa el 85% de la nota final, i les tasques voluntàries el 15% (la qual cosa farà augmentar la nota final de l'AEA).

Avaluació de les UFs

La UF consta de diverses AEA i d'una prova final (Ex). L'alumne coneixerà els pesos de cada AEA i de la prova/examen final amb què es calcularà la nota final de la UF.

AEA: Activitats d'Ensenyament-Aprenentatge

UF1. Sintaxi del llenguatge. Objectes predefinits del llenguatge (Classroom: kkn6pnq)

UF1A1. Javascript. Sintaxi I

UF1A2. Javascript. Sintaxi II

UF1A3. Javascript. Sintaxi III. Objectes

Avaluació UF1

Activitats:
Q_UF1A1 = 0.25*Q1 + 0.25*Pr1 + 0.25*Q2 + 0.25*Q3
Q_UF1A2 = 0.4*Q4 + 0.6*Pr2
Q_UF1A3 = 0.4*Q5 + 0.6*Pr3

Q_UF1‌ ‌= 0.2*Q_UF1A1 + 0.2*Q_UF1A2 + 0.2*Q_UF1A3 + 0.4*Q_EXUF1

Es penalitzen les entregues fora de termini. Es premia la participació a classe.

UF3. Esdeveniments. Manegament de formularis. Model d'objectes del document (Classroom: 5rmdnxk)

UF3A1. DOM: Document Object Model

UF3A2. Formularis i events

UF3A3. createElement, addEventListener

Avaluació UF3

Activitats:
Q_UF3A1 = 0.20*Q1 + 0.20*Q2 + 0.40*Pr1 + 0.20*Q3
Q_UF3A2 = 0.20*Q4 + 0.40*Pr2 + 0.40*Pr3
Q_UF3A3 = 0.50*Pr4 + 0.50*Pr5

Q_UF3 ‌= 0.22*Q_UF3A1 + 0.22*Q_UF3A2 + 0.16*Q_UF3A3 + 0.4*Q_EXUF3

Es penalitzen les entregues fora de termini. Es premia la participació a classe.

UF4. Comunicació asíncrona client-servidor. (Classroom: 2oaog4f)

UF4A1. AJAX: Introducció

UF4A2. AJAX: Avançat

Avaluació UF4

Activitats:
Q_UF4A1 = 0.1*Q1 + 0.1*Q2 + 0.2*Pr1 + 0.1*Q3 + 0.2*Pr2 + 0.1*Q4 + 0.1*Q5 + 0.1*Pr3
Q_UF4A2 = 0.2*Q1 + 0.3*Pr4 + 0.2*Q2 + 0.3*Pr5

Q_UF4 ‌= 0.4*Q_UF4A1 + 0.2*Q_UF4A2 + 0.4*Q_EXUF4

Es penalitzen les entregues fora de termini. Es premia la participació a classe.

UF2. Estructures definides pel programador. Objectes. (Classroom: bxcupxr)

UF2A1: Mòduls i llibreries

UF2A2: Frameworks

(abril 2022)

Avaluació UF2

Activitats:
Q_UF2A1 = 0.25*Q1 + 0.25*Pr1 + 0.25*Pr2 + 0.25*Pr3
Q_UF2A2 = 1.00*Pr1

Q_UF2 ‌= 0.75*Q_UF2A1 + 0.25*Q_UF2A2

Es penalitzen les entregues fora de termini. Es premia la participació a classe.

Desplegament d'Aplicacions Web

UF3. Aplicacions web i serveis

(3 de febrer al 17 de març)

Avaluació UF3

Activitats:
Q_UF4 = 0.1*Q1 + 0.1*Q2 + 0.15*Pr1 + 0.1*Q3 + 0.15*Pr2 + 0.15*Pr3 + 0.15*Pr4 + 0.1*Pr5

Es penalitzen les entregues fora de termini. Es premia la participació a classe.

UF4. Control de versions i documentació

(23 de març al 1 de maig)

Avaluació UF4

Activitats:
Q_UF4 = 0.15*Q1 + 0.15*Q2 + 0.25*Pr1 + 0.25*Pr2 + 0.20*Pr3

Es penalitzen les entregues fora de termini. Es premia la participació a classe.

(TBD)


creat per Joan Quintana Compte, agost 2021, abril 2022

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