Joan: /* Tasques */

2018-10-03T17:35:01Z

Tasques

Pàgina nova

=Introducció=
En aquesta pràctica reflexionarem sobre l'ús del IDE. S'espera que l'alumne practiqui els procediments que encaminen a desenvolupar amb rapidesa i sense errors. Farem servir les eines de desenvolupament integrades dins del navegador (consola, inspector). Pots fer servir tan el Google Chrome com el Mozilla Firefox.

Per això partim d'un exemple que busca la simplicitat i la completitud (incloent conceptes que encara no hem vist a classe, i d'altres que no pertanyen estrictament a l'assignatura). És una pàgina web completa perquè inclou html, javascript i css. Es tracta de validar un NIF (o CIF o NIE).

=Desenvolupament=

Disposem d'un codi Javascript que conté les funcions per validar el NIF. En el codi s'ha introduït expressament una sèrie d'errors que hauràs de corregir.

Pots descarregar els fitxers per fer la pràctica:
*[[Fitxer:Fitxers canviats.zip]]
Consta del fitxer html, el fitxer .js i el fitxer .css. Fixa't dins el codi ''validacio.html'' com fem referència als fitxers externs ''script.js'' i ''estil.css''.

==Tasques==
'''1.''' En el codi s'han introduït errors de sintaxi en els fitxers javascript i css. Fins a 7 errors en el codi Javascript. En el cas del javascript els errors no permeten l'execució correcta del codi. Hauràs de llistar els errors i corregir-los. L'objectiu és poder validar el nif/cif/nie correctament, ja sigui obtenint un valor ''CORRECTE'' (en verd) o ''INCORRECTE'' (en vermell). Recorda que un dels objectius de l'assignatura no és només programar bé, sinó també programar ràpid introduïnt uns procediments encaminats a programar sense errors i a localitzar ràpidament les falles.

'''2.''' Visualitza en la consola del navegador el valor del NIF que estem passant a la funció (no facis un alert)
<pre>
console.log(a);
</pre>

'''3.''' Visualitza en la consola el resultat de la validació: correcte o incorrecte

'''4. ''' Des del ''inspector'' de les eines de desenvolupador del navegador, canviar el color de la caixa de text (que originalment té un color rosat). Canviar també el color i el tamany de la lletra de la capçalera h3.

'''NOTA''':
Compte amb les cometes dobles i senzilles! No és el mateix (incorrecte)
<pre>
<input type="button" onclick="valida_nif_cif_nie(document.getElementById("nif").value)" name="validar" value="Validar"><br />
</pre>
que (correcte)
<pre>
<input type="button" onclick="valida_nif_cif_nie(document.getElementById('nif').value)" name="validar" value="Validar"><br />
</pre>
Vam veure que en Javascript podem utilitzar tan cometes dobles com senzilles. Ara bé, quan integrem el codi Javascript amb el HTML, això cobra molta importància.

'''NOTA''': la validació del NIF està malament (sempre dóna 1). En la línia 58 trobem:
<pre>
if( letra = letradni )
</pre>
No és un error de sintaxi... és un error de concepte. Evidentment, ha de ser:
<pre>
if( letra == letradni )
</pre>
Així doncs, aquest error era més difícil de trobar.
==Ús del IDE==
Per a l'assignatura no hi ha un IDE de preferència. Cada alumne ha de buscar, experimentar i discutir amb els companys, amb l'objectiu de tenir unes eines de treball que li permetin treballar amb rapidesa i comoditat.

Els alumnes treballen amb: Visual Studio Code (VS Code), Sublime Text, Brackets, Atom, NetBeans,...

Un bon IDE haurà de tenir un bon sistema de plugins i/o extensions que afegeixin funcionalitat.

Instal·lació del VS Code a Ubuntu:
*http://ubuntuhandbook.org/index.php/2018/05/vs-code-1-23-released-install-ubuntu-18-04/
Getting started:
*https://code.visualstudio.com/docs?start=true
===Cas d'ús: VS Code i el plugin Live Server===
Per exemple, una funcionalitat interessant que augmenta la productivitat és utilitzar dues pantalles, en una pantalla tenim el navegador i el layout de la nostra web, en l'altre pantalla tenim el VS Code (IDE). Volem que quan fem canvis en el IDE, aquests es propaguin automàticament (o ràpidamet) a la web.

Instal·lem el plugin '''Live Server''' (de Ritwick Dey). Això és fàcil doncs la gestió dels plugins es fa des del mateix IDE.

Més informació del plugin:
*https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
El funcionament és molt senzill: en la barra de tasques hem de clicar: ''Go Live''. Per veure els canvis que estem editant en el IDE, el més ràpid és Ctrl-S (guardar), i els canvis es propaguen automàticament. En el IDE (File > Preferències) també hi ha la possibilitat de fer un ''autosave'' (però un Ctrl-S és ben senzill i ràpid).

=Entrega=
Els alumnes entregaran al Schoology tots els fitxers generats (fitxers html). S'empaquetaran tots aquests fitxers i es pujaran al Moodle dins del termini d'entrega de la pràctica.

Recorda la '''normativa''' per entregar les pràctiques al Google Classroom: [[ASIX-M10-UF2#Normativa_d.27entrega_de_les_pr.C3.A0ctiques_al_Google_Classroom]]

{{Autor}}, Octubre 2018
[[Categoria: Institut Jaume Balmes]]
[[Categoria: Assignatura DAW-M06-WEC]]

Pràctica de detecció d'errors i ús del IDE - Historial de revisió

Joan: /* Tasques */