Göm menyn

TDP013 Webbprogrammering och interaktivitet

XHTML, CSS, JavaScript & Selenium


Lärandemål

Från kursplanen: Länk till kursplan

  • Använda programmeringsspråk som JavaScript för att skapa interaktivt webbinnehåll.
  • Tillämpa regler för god interaktionsdesign för webbsidor och webbplatser.

Programmål - Innovativ Programmering

Från programplanen: Länk till programplanen

  • 1. hantverk: den (ofta tysta) kunskap och individuell förmåga som studenten bygger upp genom att arbeta praktiskt med programmering, själv, i projekt och i community. Här betonas både att arbeta innovativt och mot beställare.
  • 3. teknik: kunnande om den teknik som finns för programmering och datorer, med fokus på programmeringsspråk och plattformar.

Examensmål - Kandidatexamen

Från Högskoleförordningen (1993:100): Länk till förordningen

  • visa kunskap och förståelse inom huvudområdet för utbildningen, inbegripet kunskap om områdets vetenskapliga grund, kunskap om tillämpliga metoder inom området, fördjupning inom någon del av området samt orientering om aktuella forskningsfrågor.
  • visa förmåga att självständigt identifiera, formulera och lösa problem samt att genomföra uppgifter inom givna tidsramar

Syfte

Den första laborationen avser ge studenterna grundläggande förståelse för HTML, CSS samt JavaScript och hur dessa kompletterar varandra. Studenterna skapar en förenklad version av Twitter och skapar automatiserade tester med verktyget Selenium.

Genomförande

Laborationen genomförs i par enligt webreg. Studenterna väljer fritt verktyg för kodning, men inga WYSIWYG verktyg skall användas. Selenium-testningen (WebDriver) får ske i valfritt programmeringsspråk. Testningen är klar när alla kraven har testats och en motivering finns till varför det inte är nödvändigt att testa mer. Motiveringen framförs till assistenten vid redovisning.

Krav

  • En användare skall kunna skriva in ett meddelande i ett fält, meddelandet får max ha 140 tecken.
  • En användare skall kunna, genom att klicka på en knapp, publicera sitt meddelande. Innan meddelandet publiceras skall det valideras med JavaScript. Om meddelandet är tomt eller mer än 140 tecken skall det inte publiceras och ett felmeddelande skall visas för användare (obs, använd inte "alert" för felmeddelande).
  • Ett meddelande som är publicerat skall visas i kronologiskt fallande (senast först) ordning nedanför textfältet.
  • Alla meddelanden som visas skall ha en knapp som när man klickar markerar meddelandet som läst.
  • Det skall vara tydlig skillnad mellan lästa och olästa meddelanden.
  • Alla meddelanden skall försvinna när man laddar om sidan.
  • Alla krav skall testas med Selenium.
  • Layouten skall likna schema 1.
  • Att själv lära sig den HTML, CSS, JavaScript och Selenium kunskap som behövs för att genomföra laborationen.
  • Det är valfritt om man vill använda ren JavaScript eller jQuery
  • När man validerar sin hemsida kan man ibland stöta på problem där webbläsaren tolkar om XHTML till HTML5, om så är fallet är det ok med vissa "röda" fel i validatorn, tala gärna om detta i det mejl ni skickar till assistenten för redovisning.

Reflektionsfrågor

Dessa reflektionsfrågor skall ni tillsammans reflektera över och muntligt presentera för er assistent.

  • Är det bra eller dåligt att webbläsaren automatiskt förändrar utseende och beteende på vissa HTML-element?
  • Vad kan enligt er förbättras i HTML, JavaScript eller CSS syntax?
  • Finns det något värde i att skriva testfall för HTML när man ändå kan testa det genom att öppna webbläsaren?
  • Eftersom det inte finns code-coverage i selenium, när har man skrivit tillräckligt många testfall för att vara säker på att allt fungerar?

Redovisning

  1. Logga in på gitlab.ida.liu.se
  2. Skapa ett nytt projekt (som ska innehålla labbar och projekt)
  3. Ladda upp din kod (alla relevanta filer för labben) (gärna konternueligt) till ditt gitlab-projekt
  4. Lägg till er assistent till ert projekt
  5. Medela er assistent att nilagt upp koden och var
Vid nästa laborationstillfälle kan ni då muntligt redovisa er laboration.

Deadline: Fredag 19:e September 2014 - 17:00 CEST

Schema 1

Schema 1

Sidansvarig: infomaster
Senast uppdaterad: 2014-09-05