Formulari I: Javascript, CSS (maquetació i disseny). Pràctica

De wikijoan
Salta a la navegació Salta a la cerca

Introducció

A classe s'ha explicat la unitat didàctica:

Ara es tracta de posar-la en pràctica donant una solució pròpia per al nostre formulari.

Desenvolupament

No cal centrar-se en el codi exposat a classe. L'alumne pot utilitzar Bootstrap o d'altres llibreries per a la maquetació de la web i del formulari. De totes maneres, s'ha de pensar que el client imposarà restriccions a nivell d'imatge corporativa, que el programador/dissenyador haurà de satisfer. Per exemple, se us demana que canvien la imatge corporativa a nivell de colors i de fonts.

L'alumne pot partir del full d'estils proposat, però es valorarà molt positivament si s'utilitza un altre full d'estils diferent (ja sigui original o adaptat). L'alumne estudiarà el full d'estils i es localitzaran les línies del document CSS on es defineix el següent comportament:

  • colors (gradació de marrons). S'ha de canviar la gradació de colors (la teva pàgina serà verda, blava, groga, etc.)
  • Font. S'utilitzarà una font que no sigui la típica (tot i que ha de ser fàcil de llegir).
  • Labels del formulari. On està definida l'amplada? On està definit que els camps obligatoris estiguin en negreta, i els camps opcionals en font normal? Fés un alineament a l'esquerre.
  • caixes de text del formulari. On està definida la seva amplada? Canvia l'amplada i fica un color de fons per a les caixes de text (dins dels tons de colors que hagis escollit)
  • Fieldset dins d'un formulari. Per a què serveixen? On està definida la línia horitzontal que separa els fieldsets? Fés aquesta línia més gruixuda.
  • On està definida la fotografia del Jaume Balmes a la capçalera? Canvia la foto

A més:

  • validació del mail. Si et fixes, la validació del mail és molt bàsica, i nosaltres a classe hem fet validacions de mail més completes, per exemple utilitzant expressions regulars. Millora aquesta part.
  • La validació del CP està malament. Millorar.
  • La informació sobre una validació incorrecta d'un camp ha de ser molt clara. Defineix unes caixes de text (pots utilitzar span, label,...) al costat de cada camp, que ens donaran informació de quan un camp està mal validat (color vermell).

NOTA. Es pot utilitzar bootstrap, però l'alumne ha de ser capaç d'adaptar les plantilles de bootstrap als requeriments del client.

Entrega

Els alumnes entregaran al Schoology tots els fitxers generats. 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 Schoology: ASIX-M10-UF2#Normativa_d.27entrega_de_les_pr.C3.A0ctiques_al_Schoology


creat per Joan Quintana Compte, gener 2019