Webbteknik 3

Förberedelser

För att kunna arbeta effektivt med XML och DTD i Visual Studio Code och samtidigt också få ett verktyg för validering av XML mot DTD, börjar du med att installera två tillägg till Visual Studio Code. Klicka på nedanstående rubriker, för mer info.

XML Language Support by Red Hat

Med tillägget XML från Red Hat får du stöd i Visual Studio Code för att skriva DTD- och XML-kod. Bl.a. kontrolleras att koden är "well-formed", dvs att syntaxen följer grundreglerna för XML. Om XML-dokumentet har en referens till ett DTD-dokumnet, görs också en validering av XML-koden mot DTD:n.

Installation

Ta fram VSC:s lista över tillägg och sök efter "XML". Välj tillägget från Red Hat. Klicka sedan på Install-knappen.

Användning

I VSC tar du fram konsolen med kommandot Problems i View-menyn.

Fel visas dels med röd understrykning i koden och dels med ett meddelande i konsolen. Det kan visas flera felmeddelanden samtidigt, men ibland kan det finnas en del fel, som inte upptäcks förrän föregående fel är rättade. Då du rättar ett fel, kan det alltså sedan dyka upp nya fel.

Tillägget hjälper dig också med att lägga till sluttagg. Finns det en referens till en DTD, ges det också förslag på taggar, då du skriver början på en tagg.

Du kan testa det i de följande exemplen och övningarna.

Open in Browser by TechER

Med tillägget Open in browser kan du öppna XML-filer (och även andra filer) i webbläsaren med ett enkelt kommando i Visual Studio Code.

Installation

Ta fram VSC:s lista över tillägg och sök efter "open in browser". Välj tillägget från TechER. Klicka sedan på Install-knappen.

Inställning

För att det ska fungera att öppna en fil med default-webbläsaren, måste den anges i inställningarna i VSC. Ta fram Settings genom "kugghjulet" längst ner till vänster. Gå till Extensions och plugin open-in-browser. I rutan för Default skriver du Firefox.

Användning

Öppna önskad fil i VSC och använd sedan någon av följande kombination av tangenter, för att öppna filen i webbläsaren:

• alt B
  • öppnar filen i standardwebbläsaren.
• shift alt B
  • du får en lista på webbläsare och kan välja i vilken du vill öppna filen.

Alla filer kan inte visas i webbläsaren. Öppnar du en DTD-fil, får du endast ett tomt fönster i webbläsaren. Öppnar du en XML-fil med korrekt kod, visas koden. Innehåller koden något syntaktiskt fel, visas ett felmeddelande.

Beskrivning och uppgifter

Skapa en struktur för filmer, böcker, spel eller annat valfritt innehåll (dock inte de områden som förekommer i exemplen i föreläsningen). Det ska vara något som upprepas, så att du har flera förekomster av det du valt, t.ex. flera filmer. Det måste också gå att kategorisera informationen. Du ska skapa ett par XML-dokument med varsin kategori. Väljer du filmer kan de kategoriseras som thriller, drama, komedi, etc. eller så väljer du en indelning i svenska filmer, engelska filmer, etc. eller något annat. Du väljer själv innehåll och kategorisering.

Genomför uppgiften i följande ordning:

a. Innehållsanalys och DTD-dokument

• Analysera vilket innehåll du har, vilka delar det består av och hur dessa hänger ihop. Beskriv en struktur, där du namnger de delar som finns i informationen. Beskriv också om och i så fall hur de olika delarna kan upprepas.
  • Se kravlistan längre ner, så att du får med alla detaljer som krävs.
• Översätt strukturen till en DTD-kod.
• Definiera alltså alla element med ELEMENT-taggar och, om du har attribut, alla attribut med ATTLIST-taggar. Skriv in dessa i en DTD-fil.

b. XML-dokument

• Skapa en XML-fil och skriv en XML-kod där du strukturerar något innehåll enligt den struktur du skapat.
  • Lägg redan från början in en DOCTYPE-tagg med en referens till DTD-filen, så får du stöd och validering direkt medan du skriver XML-koden (under förutsättning att du installerat tillägget i VSC för detta).
  • Tillägget i VSC gör ju kontroll av koden och ger felmeddelanden, om koden har fel. Som ett ytterligare test bör du även kontrollera strukturen i webbläsaren. Öppna XML-filen i webbläsaren Firefox, för att kontrollera att koden är "well-formed", dvs att den följer XML:s grundläggande syntaxregler. Gör den det visas XML-koden i webbläsaren, annars visas ett felmeddelande.

c. Validera

• Validera din fil, dvs kontrollera om XML-koden stämmer med din DTD.
  • Har du installerat XML-tillägget i VSC, görs valideringen samtidigt som du skriver koden. Men gör också en kontroll med en extern validator, då du skrivit klart din XML-kod, se nästa punkt.
• Som en extra kontroll ska du också validera din kod med en extern validator. Länkar till validatorer finns i rutan för XML och DTD på Länksidan. Använd den andra validatorn, där du kan ha XML- och DTD-koden i separata filer.

d. Ännu ett XML-dokument

• Skapa ett XML-dokument till med samma struktur, fast annat innehåll. I de båda XML-dokumenten ska du ha var sin "kategori" av din valda information. Strukturen ska vara densamma, så samma DTD ska användas i båda fallen.
• Validera även detta nya XML-dokument.

Publicera dina filer

• Publicera dina filer på Netlify enligt den struktur som finns på sidan med allmän information om uppgifterna.
• På den gemensamma ingångssidan ska du ha länkar till de båda XML-filerna samt DTD-filen. Alltså totalt tre länkar.
• Testa att länkarna fungerar på den publicerade sidan samt att XML-filerna visas med sin kod i webbläsaren. DTD-filen visas dock inte, utan där ger webbläsaren ett fönster för nedladdning av filen.

Krav

Kraven på det du skapar i denna uppgift är följande.

Godkänt

Följande krav måste vara uppfyllda, för att du ska bli godkänd.

• Informationen ska ges en innehållsmässig struktur.
  • Namn på element och attribut ska beskriva deras innehåll och vara på engelska.
    • För G krävs endast användning av element, men för extrameriten måste du också ha attribut.
  • Ingen onödig information ska förekomma, utan endast informationens "väsentliga innehåll" ska finnas med.
  • Det ska finnas med "länkar", dvs referenser med en url i informationen.
  • Strukturen ska vara minst tre nivåer djup (inklusive rotelementet, som är första nivån).
    • Se beskrivning i rutan om djup i sidospalten.
• DTD-koden
  • DTD-koden ska beskriva elementen och attributen (om du har sådana) som används i XML-strukturen.
  • DTD-koden ska ligga i en separat fil.
  • Det ska endast vara en DTD-fil som används till samtliga XML-filer.
• XML-koden
  • XML-koden ska vara validerad med DTD-koden.
  • Det ska vara minst två XML-filer. En fil för varsin kategori av informationen.
  • I varje XML-fil ska det finnas med flera olika förekomster av det du strukturerar.
    • Om du t.ex. strukturerar filmer räcker det alltså inte med endast en film, utan ta med några olika filmer.

Extramerit

Följande är inte obligatoriskt för att bli godkänd, men kan ge en extra förtjänst som tas med i bedömning av kursens slutbetyg. En del av det har du kanske redan fått med, då du utvecklat din struktur och kod.

• Se till att du har med följande i din DTD- och XML-kod:
  • Både element och attribut.
  • Tomt element, dvs element som ej har någon sluttagg.
  • Attribut där innehållet definieras med en lista av möjliga värden.