Plan for dag 5/6

Diskuter i grupper hvad arbejdede vi med sidst?

Løsningsforslag til øvelserne fra dag 4.

1. Eksempler fra kapitel 7:
2. Fejlsøgning
3. Navigation (menuer m.m.)
4. Forms og validering

Uddeling af kopier fra Jesse James Garretts "The Elements of User Experience", The Scope Plan

Øvelser til dag 5

Læsestof til disse lektioner

Med udgangspunkt i de i øvelsen valgte tutorials:

The Missing Manual: Chapter 7, Improving your Images.

The Missing Manual: Chapter 9, Form validation Tutorials.

 Eksempler fra Kapitel 7 Improving Your Images

JQuery effekter på tekst og billeder i div tags

Reference til JQuery basic effekter

Tutorial i kapitel 7.

• Image Rollovers (7.1.html) p.238
• Photo Gallery (7.2.html) p.248
• Lightbox gallery (7.3.html) p.254
• Cycle slideshow (7.4.html) p.290

Fejlsøgning/Debugging

Tomands gruppeøvelse:

1.Den ene person (The bugmaster) laver 2 fejl i en fungerende javascript, og den anden (The debugger) skal så bagefter finde fejlene.

Debuggeren må meget gerne tænke højt i forbindelse med fejlsøgningen.

The bugmaster må hjælpe med mere generelle løsningsstrategier.

Skift roller!

2. Prøv sammen at lave en liste over løsningsstrategier, som man kan bruge, hvis man sidder fast med en eller flere bugs ?

3. evt. Diskutere hvilke fejl af de 'Top ten JavaScript Mistakes' der nævnes i kap. 13, som I oftest selv har lavet  i forbindelse med diverse øvelser.

Navigation

• Links   mulighed for at åbne indhold via target attribute  ( _blank , _parent) , åbne i frame set og i iframe. ( Problemer med validering af target attribute !)
  •  Iframe eksempel
  
  
• window.Open( )   -   (problemer med popup blokkere )  - se window_open_example.html   i venstremenuen. 
  • Flot alternative Greybox window via JQuery.  (p. 290 ) Greybox2 (8.1.html) vha. iframes, Jquery og css.
• Menuer
  • Tilpasning af eksisterende standard menu ( menu  )
  • Spry menu i Dreamweaver
  • Menu JS-biblioteker (ekstra muligheder  for tilpasning )
  •  

Form og validering

Test af om brugerne indtaster den rigtige type data i en bestillingsformular.

Traditionel validering fra dag 4 øvelsen med if/else betingelser og alerts

Form's hvor brugeren ikke kan taste forkert. kan f.eks. også udbygges med en datovælger fra Jquery.

Via JQuery

$("#commentForm").validate();  

Husk også at de enkelte input felter skal have rigtige id.

Form Validation (9.2.html) p.343

Opgaver/Øvelser

Gå sammen i en 2-3 mands gruppe og lave en af følgende tutorial fra bogen.

- Ændre lidt på indholdet og kommenter koden, sådan at I kan præsentere hovedelementerne i koden for klassen næste gang.

1. Image Rollovers (7.1.html) p.238
2. Photo Gallery (7.2.html) p.248
3. Lightbox gallery (7.3.html) p.254
4. Cycle slideshow (7.4.html) p.268
5. Greybox2 (8.1.html) p.290
6. Drop down menu (8.3.html) p.304
7. Form Validation (9.2.html) p.343