Guia del curs

	L'objectiu és conèixer els llenguatges de la web - HTML, css i JavaScript -, que ens han de permetre fer o adaptar pàgines per tal que siguin més interactives i dinàmiques. El curs s'organitza en 8 mòduls, de 6 hores cadascun, més 12 hores addicionals per acabar el projecte, en total, 60 hores. Cada mòdul consta d'una presentació, quatre pràctiques i exercicis. A cada pràctica hi ha, a més dels conceptes, diversos exemples amb solucions.
	1.- Coneixements previs
	Per seguir aquest curs s'han de tenir unes destreses avançades en l'entorn Windows, sobretot, amb l'explorador: crear, esborrar i moure carpetes i fitxers; retallar i enganxar, instal·lar i configurar programes, ... Convé haver fet el curs sobre Windows i, encara millor, el de xarxes. És interessant, tenir pàgina web pròpia i/o mantenir la pàgina del centre. També hem de dominar l'editor de pàgines Dreamweaver i tenir coneixements suficients sobre HTML. Si no els tenim, abans de continuar hauríem de fer una bona repassada dels cursos D72 i D98 sobre Disseny i Creació de Pàgines Web. Si es coneixen altres llenguatges de programació, millor. Naturalment, també hem de saber navegar per Internet, enviar correu electrònic i trametre fitxers al servidor. El curs ens resultarà més fàcil si tenim, a més, algunes habilitats. La capacitat d'estructurar i organitzar dades i materials resulta imprescindible. També, una bona lògica i un xic de meticulositat.
	2.- Requeriments tècnics
	L'ordinador ha de tenir instal·lat i ser capaç d'executar l'editor Dreamweaver i, com a mínim, un parell dels navegadors més populars: Microsoft Internet Explorer, Netscape Navigator o Mozilla. Tots han de poder executar JavaScript i tenir les cookies activades. Tot i que DHTML no està lligat a cap plataforma, el curs planteja els exemples basant-se en el sistema operatiu Windows, que hi ha a la majoria de centres, i dóna per suposat que tenim connexió a Internet i un espai al servidor de la XTEC.

3.- Interfície del curs

Sistema de navegació:

Doble, a l'inici i a la fi de cada pàgina. Quan el cursor se situa sobre una opció de menú, es mostra un missatge amb el títol

de la pàgina. A la zona superior, el logotip del curs és un vincle amb la portada. Al peu de la pàgina hi ha un botó per tornar al principi.

Totes les opcions es mostren sobre la mateixa finestra del navegador, excepte la pàgina d'eines, que s'obre en una finestra nova, i l'índex-cercador, que crea una finestra al marge dret de la pantalla. Els resultats dels exemples s'activen amb un botó i es mostren en una finestra tipus "pop-up", superposada a la pàgina.

Índex i cercador:

El curs disposa d'un índex amb cercador intern que permet localitzar ràpidament qualsevol concepte. S'activa des del botó Índex del menú de cada pàgina. Si no hi ha cap condició de cerca establerta, es mostra tot el temari. Quan es fa clic sobre un vincle, la pàgina destí substitueix la que teníem a la finestra principal del curs.

Per localitzar una paraula, l'escrivim al quadre de text i fem clic en el botó "Cerca" o premem Intro. El sistema només localitza paraules: si n'escrivim més d'una, mostrarà les pàgines que en continguin alguna. Si no troba res, es fa una segona cerca, més imprecisa.

Eines:

Hi ha algunes eines, fetes específicament per a aquest curs, que podem carregar fent clic sobre el botó Eines de la barra de menús. El seu objectiu és doble: per una banda, tenen una utilitat pràctica que veurem al llarg del curs. Per l'altra, s'han dissenyat utilitzant només DHTML i JavaScript, raó per la qual poden ser objecte d'estudi.

Versió per imprimir:

La interfície detecta automàticament quan s'envia algun document a la impressora, de manera que adapta les fonts i elimina els elements de navegació. Cada pàgina té un botó d'impressió.

Significat de les icones:

	Informació. Documentació sobre el contingut que s'està tractant a les pàgines.
	Mans al teclat. Treball que l'alumnat ha de realitzar seguint les propostes guiades.
	Qüestions. Problemes plantejats i resolts a les pràctiques.
	Exercicis. Problemes plantejats que ha de resoldre l'alumnat.
	Atenció. Trucs i suggeriments complementaris a la documentació i a les pràctiques.
	Dreamweaver. Informació o pràctiques sobre l'editor.
	Imprimir. Enviar a la impressora la versió imprimible de la pàgina actual.

4.- Sintaxi dels llenguatges

Tot i que utilitzarem l'editor Dreamweaver, aquest curs ensenya a programar. Per començar, el nostre nivell en HTML ha de ser bo, és a dir, que coneixem la majoria de les etiquetes, sabem el que fan i com s'utilitzen.

Es dóna per suposat que hem utilitzat estils amb el Dreamweaver i també algunes de les funcions JavaScript que incorpora, de manera que estem familiaritzats amb els signes que utilitzen. A continuació en fem un resum.

4.1.- HTML

És un llenguatge de marques, basat en etiquetes, que crea contenidors per situar-hi bocins d'informació. La mateixa paraula serveix per indicar que comença un contenidor i, amb una barra al davant, que s'acaba: <body> ... contingut del cos ... </body>.

Un contenidor pot tenir, al seu torn, altres contenidors i, aquests, uns altres. L'única condició és que l'últim en obrir-se sigui el primer en tancar-se. Les etiquetes poden tenir modificadors que especifiquen algunes característiques.

HTML és insensible a l'ús de majúscules i minúscules. Dreamweaver codifica sempre en minúscules, que són més fàcils de llegir. Aquest curs segueix el mateix criteri.

4.2.- CSS

Els fulls d'estils css són un afegit que permet manipular els elements d'una pàgina de forma més acurada que HTML. Es basen en la definició de característiques d'aquests elements. Podem redefinir contenidors propis de HTML (body, a, td, img, ... ) o crear estil nous. S'utilitzen sempre lletres minúscules, excepte en els codis de colors.

Cada estil comença i acaba amb unes claus { }. A dins, les diverses propietats s'escriuen separades per punt i coma ( ; ) amb el format: estil { prop1 : valor1 ; prop2 : valor2 ; ... }

Els estils personalitzats comencen per un punt ( . ) quan són genèrics (s'apliquen als contenidors d'una classe), o per un coixinet ( # ) si es refereixen a una etiqueta individual.

4.3.- JavaScript

JavaScript és sensible a l'ús de majúscules i minúscules, de manera que Nom i nom són dues variables diferents. Com a llenguatge de programació té moltes més funcionalitats que els altres dos i, en conseqüència, una sintaxi més complexa.

On posem els scripts?

1.- En línia: <a href="javascript: alert( 'Hola!' )"> ... Si les instruccions són prou curtes es poden associar a elements HTML, escrivint la paraula "javascript" seguida dels dos punts.

2.- A la pròpia pàgina, entre les etiquetes <script language="JavaScript"> i </script>. Aquí, com en el cas següent, al lloc concret on s'hagin d'executar o, si no, al <head>.

3.- En un arxiu extern: en aquest cas, l'arxiu no ha d'incloure les etiquetes anteriors. Des de la pàgina s'enllaça escrivint: <script language="JavaScript" src="arxiu.js"></script>.

Comentaris:

Un comentari és un text que escrivim per clarificar el codi i que el navegador no executarà. Així quan el tornem a mirar, l'entendrem millor. Els podem fer de dues maneres:

1.- // (doble barra) comentari que ocupa només una línia, o un bocí.

2.- ./* aquesta combinació indica que comença un comentari, que pot ocupar més d'una línia i, en conseqüència, hem d'indicat quan s'acaba */

Delimitadors:

1.- Delimitació de sentències: Per separar unes instruccions de les altres, tots els navegadors entenen el salt de línia (Intro) com a delimitador. Ara bé, el signe punt i coma ( ; ) és el delimitador predeterminat en molts altres llenguatges, i JavaScript l'ha adoptat. Podem usar qualsevol dels dos per separar instruccions, o tots dos alhora.

2.- Delimitació de blocs: S'utilitzen les claus { } per indicar els límits un bloc d'instruccions, que es tracta com una unitat. Una funció comença i acaba amb aquestes claus. També un bucle o un condicional. Si un bloc de codi té només una instrucció no cal posar les claus:
if ( i == 0 ) document.writeln( 'No hi ha res per mostrar' ). Els blocs es poden enniuar, de manera que dins d'un bloc n'hi pot haver un altre.

3.- Delimitació de literals: Es tracta de valors constants o variables. No cal delimitar els números i valors lògics: 125, 3.1416, false. En canvi, sí que s'han de delimitar les cadenes de text: 'Hola, dia', "Adéu, nit". Podem usar cometes simples (apòstrof) o dobles, tot i que és un bon costum usar les simples per al JavaScript i les dobles per al codi HTML: document.write( '<a href="arxiu.htm">Carregar un arxiu</a>' );

Si, en algun moment, la cadena que ja va entre cometes n'ha d'incloure unes altres o un apòstrof, podem usar l'antibarra \ per indicar que el que escrivim a continuació forma part del literal i no pas de la instrucció: document.write( 'Cadena que inclou l\'apòstrof' );

4.- Ús de parèntesis ( ): Tenen dues utilitats: Primer, com en el llenguatge habitual i matemàtic, indicar en quin ordre s'han d'executar les operacions: ( ( 6 + 4 ) / 2 ) - 3 ) dóna 2. També serveixen per indicar els paràmetres d'una funció: alert( 'Hola món' ).

5.- Llistes d'elements: Podem utilitzar la coma ( , ) per separar llistes d'elements, per exemple, en la declaració de variables: var n = 0, i = 0, x = 99;. També per separar elements d'un vector (Array): var aLaboral = new Array( 'dilluns', 'dimarts', 'dimecres', 'dijous', 'divendres' );

6.- Índex d'un element: Els claudàtors [ ] s'utilitzen per identificar un element d'una col·lecció, objecte o Array. El primer element és el zero [0]. En el cas anterior, aLaboral[3] és 'dijous' i document.images[0], la primera imatge d'una pàgina. L'índex no ha de ser forçosament un número. Com veurem al llarg del curs, els identificadors poden fer la mateixa feina:
document.images[ 'primera' ] també val, si havíem escrit <img name="primera" ... >.

7.- Delimitació d'objectes: El punt ( . ) s'utilitza per indicar jerarquia, és a dir, que un objecte, propietat o mètode forma part d'un altre que té un status superior o fa de contenidor (llegit de dreta a esquerra): document.forms[0].nom.value indica el valor del camp nom del primer formulari contingut al document.

5.- Tutoria

Cada participant tindrà un tutor o tutora que l'orientarà en el seu treball. Podem formular les consultes i preguntes que calgui per correu electrònic. D'aquesta manera també podrà demanar orientacions, suggeriments o recomanacions per desenvolupar el projecte.

La persona responsable de la tutoria farà un seguiment personal del procés de cada participant en base als exercicis. Les pràctiques es poden trametre a la carpeta del servidor, tot i que no és imprescindible, excepte quan s'especifica expressament.

6.- Projecte

A partir del mòdul 7 haurem de començar a treballar en un projecte final, l'elaboració d'una web, on posarem en pràctica els coneixements del curs. Aquest és l'element avaluador definitiu per obtenir el certificat.

La web del projecte ha de ser d'interès educatiu, lliure de motivacions comercials. El contingut es regeix per la mateixa normativa que les pàgines personals i les webs de centres hostatjades en el servidor de la XTEC. El contingut de les pàgines ha de ser original. Si s'utilitzen imatges o textos aliens, cal citar la font. Les imatges o textos citats no poden superar mai el 10% de l'obra. El projecte és un treball personal i no es pot fer en equip.

El calendari estableix una data per al lliurament del projecte i una altra per al lliurament d'una versió revisada. Cal entendre que el projecte ha d'estar enllestit a la primera data. Només si el tutor considera que s'han d'efectuar modificacions perquè no es compleixen els requisits, el podrem corregir i lliurar-lo la data termini de la versió revisada.

7.- Calendari

Vegeu calendari de l'activitat.