Uppgifter

Den första uppgiften

1. Logga in på servern

Du ansluter till servern via kommunikationsprotokollet SFTP (FTP över SSH). På Windows, MacOS eller Chrome OS behöver du installera någon form av klientprogram (det finns en massor). För Windows är det antagligen enklast att använda WinSCP eller Filezilla. Dessa beter sig ungefär likadant, men WinSCP är mer modernt och har högre säkerhet (krypterade lösenord, t.ex.), Filezilla har dessutom börjat skicka med en massa irriterande tredjepartsprogram i sina installationsfiler. Utöver dessa finns vill jag också nämna Cyberduck, som vissa tycks föredra. Kanske för att det stöder väldigt många kommunikationsprotokoll, kanske för att det har en anka som symbol. Av dessa finns Cyberduck och Filezilla till MacOS också. WinSCP är bara för Windows. Till Chrome OS finns det ett par olika instick som fungerar.

Om du kör någon av de vanligare Linuxdistributionerna (som inte är Chrome OS) behöver du inte installera någonting, du kan ansluta SFTP-platser som nätverksenheter direkt i filhanteraren.

2. Ändra ditt lösenord

Om du klickar på "Administrera ditt konto" i menyraden kan du logga in till ett administrationsgränssnitt (Usermin) där du kan ändra ditt lösenord och andra uppgifter.

3. Skapa ditt första HTML-dokument

  • Öppna ett program som kan skriva ren text (.txt-filer). I Windows kan du använda "Anteckningar". Om du redan är van vid någon mer avancerad kodeditor kan du öppna den. Men det spelar egentligen ingen roll just nu.
  • Skapa ett dokument som heter "index.html"
    • Använd den här mallen (om du inte orkar kopiera kan du ladda ned den):
<!DOCTYPE html>
<html>
  <head>
    <title><!--Sidtitel här--></title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
  </head>
  <body>
    <h1><!--huvudrubrik här--></h1>
    <h2><!--underrubrik här--></h2>
    <p><!--Ett stycke text, kopiera gärna för fler stycken--></p>
  </body>
</html>

Ladda upp dokumentet i mappen som heter "www" på ditt konto på webbservern. Kolla så att det fungerar.

Uppgift två

Lägg i din index.html till en presentationsbild på dig själv och en eller flera relevanta länkar som har med dig att göra. Du får gärna lägga till mer saker du tycker passar, tänk bara på att det du gör syns offentligt i hela världen...

Uppgift tre

Snygga till din sida med CSS. Testa olika saker. Fundera över eventuella fel som uppstår (anteckna gärna). Minimum är att byta bakgrundsfärg.

Uppgift fyra

Nu börjar arbetet med att få en ordnad och strukturerad sajt att arbeta i. Vi börjar med att styra upp förstasidan, "the landing page".

  • Skapa en ny mapp (katalog) med namnet forsta_sidan
  • Kopiera din nuvarande index.html till mappen (katalogen) forsta_sidan
  • Gör om rotmappens index.html (förstasidan) till en menysida att klicka sig vidare på
  • Låt <title> på den nya förstasidan vara ditt namn
  • Gör en lämplig <h1>-rubrik på den nya förstasidan
  • Lägg till en punktlista med länkar på sidan. Denna kommer vara din huvudmeny
    • En av länkarna ska gå till forsta_sidan
    • Gör minst tre länkade listpunkter (gärna flera). Detta är för att det ska bli lättare att se resultatet när du kompletterar med css. Länkar som inte går någonstans kan du skapa genom att skriva <a href="#"> i stället for en riktig URL. Länken kommer i detta fall gå till sig själv, men kommer vara enkel att uppdatera med en riktig adress (URL) när det behövs.
  • Välj färger och typsnitt med CSS
  • Kolla runt på Listamatic och kolla om du kan hitta något intressant sätt att jobba med listor. Skriv gärna ned saker som verkar underliga eller svårbegripliga så att vi kan diskutera dem i klassrummet

Uppgift fem

  • Skapa en mapp (katalog) med namnet ovningar (inga ö i fil eller katalognamn!)
  • Skapa i denna en mapp som heter ovning_1
  • Skapa i ovning_1 ett nytt HTML-dokument, med namnet index.html. Dokumentet ska innehålla en <h1>-rubrik, Tre stycken med vanlig text (<p>) och minst en länk.
  • Skapa en extern stilmall med namnet ovning_1.css och länka till denna från index.html

Dokumentet ska vara utformat efter följande

  • Överst ska det vara en ruta som motsvarar bannern som brukar ligga överst på webbsidor.
  • Nedanför denna ska det finnas ett block för huvudinnehållet på sidan
  • Till vänster om huvudinnehållet ska det finnas en mindre ruta som motsvarar vänstermenyn som ofta förekommer på webbsajter
  • Nedanför huvudinnehållet ska det finnas en ruta som motsvarar sidfoten
  • Huvudinnehållet och vänstermenyn tillsammans får inte vara bredare än 950 pixlar
  • Alla delar ovan ska ha någon bakgrundsfärg
  • Alla delar ovan ska ha någon typ av kantlinje
  • Mellan alla delar ska det vara ett avstånd på 20 pixlar
  • Du behöver inte fylla delarna med något textinnehåll om du inte har lust eller hinner
  • Du kan behöva innesluta vissa <div>-ar i andra <div>-ar för att underlätta arbetet, men det beror på hur du väljer att lösa uppgiften

Dokumentet ska vara korrekt. Det ska innehålla korrekt DTD, teckenuppsättning och ha en <title>.

Du får använda webben som resurs och surfa efter lösningar. Huvuddelen av det du behöver kunna finns dock här på sajten.

Uppgift sex

Z-index, pseudoklasser och synlighet

Skapa en ny mapp (katalog), med namnet ovning_2.

Skapa i denna en ny index.html och en tillhörande stilmall (css).

Dokumentet ska vara utformat efter följande:

  • Skapa tre delvis överlappande lådor med olika bakgrundsfärg. Skriv minst ett skrivtecken, gärna mer, i varje låda (för att vara säker på att de renderas)
  • Låt den låda som ligger i mitten i HTML-koden ligga överst av de tre
  • Låt den låda som ligger först i HTML-koden byta färg och hamna överst när muspekaren befinner sig över den
  • Försök få en av lådorna att försvinna när muspekaren befinner sig över den.
  • Skriv i din HTML, en kommentar där du förklarar din lösning
  • OM din lösning inte fungerar förklarar du i kommentaren varför den inte fungerar Ladda upp mappen ovning_2 i mappen (katalogen)ovningar. Länka till denna från din startsida.

Dokumentet ska vara korrekt. Det ska innehålla korrekt DTD, teckenuppsättning och ha en <title>.

Du får använda webben som resurs och surfa efter lösningar. Huvuddelen av det du behöver kunna finns dock här på sajten.

När du är klar, ber du en kamrat att kolla igenom din kod och komma med förslag på ändringar och korrigeringar.

Skriv en kommentar i koden där du talar om vem som har kollat din kod (code review).

Uppgift sju

Kopiera en komplex tabell

Kopiera en tabellstruktur efter en bild

Skapa en ny mapp (katalog), med namnet ovning_3. Skapa i denna en ny index.html och en tillhörande stilmall (css).

Återskapa i ovningar/ovning_3/index.html tabellen nedan.

Tabellen och cellerna ska ha kantlinjer, så att den blir tydlig och lättolkad.

Bilden finns på http://webbem.se/_img/spiderman-11.gif

färgerna är red, green och blue, men du kan välja andra om du vill.

  • Utgå från tabellen på bilden och gör en likadan.
  • Tabellen ska ha en <caption>
  • Tabellen ska ha <thead>, <tfoot> och <tbody>
Tabellexempel

Du får gärna duplicera tabellen exakt, men det som är viktigt är att du löser själva tabellkonstruktionen, hur tabellen är uppbyggd och indelad. Exakt vilka färger du väljer, eller hur kantlinjerna är utformade, typsnitt, vilka ord som står i cellerna och så vidare är mindre viktigt. Dock ska det vara en bild där det är en bild, och text där det är text.

Dokumentet ska vara komplett och korrekt. Det ska innehålla korrekt DTD, teckenuppsättning och ha en <title>.

Om du har glömt någonting finns all nödvändig information för att du ska klara uppgiften här på kurssajten.

Uppgift åtta

Mobilanpassa en webbsida med CSS

  • Gör en ny sida, om du vill kan du kopiera din indexsida (för att spara tid).
  • Gär så att den ändrar utseende på små skärmar (mobiltelefoner)
    • Versionen för stora skärmar ska ha en annan bakgrundsfärg än den för små skärmar
    • Lägg, någonstans på sidan, till texten "Mobilversion" på ett sådant sätt att den inte visas på större skärmar än mobiler
    • Du kan göra andra ändringar om du vill, det är fritt fram så länge färgen ändras och specialtexten finns
  • Länka till den nya sidan från din indexsida

När du lyckats med uppgiften och känner att du börjar få kläm på hur det fungerar kan du börja fundera på vilka anpassningar resten av din sajt kan behöva för att fungera bra på olika stora skärmar. Du kan fundera på om allt syns, om det ser rörigt eller tomt ut, om det går att klicka på saker med fingrarna när sajten är liten, osv…

Du har den här lektionen på dig…

Uppgift nio

Uppgift: Mobilanpassning med Media Queries och Flexbox

Uppdatera och anpassa din förstasida ("landing page") så att den anpassas till åtminstone mobiltelefon och datorskärmar.

Vill du anpassa till fler storlekar, om användaren vänder på mobiltelefonen eller någonting annat, lägg gärna till anpassningar för detta. Du kanske vill ha varianter för både datorskärm, padda, mobil på olika ledd, tv och utskrift? Kanske extrafunktioner för användare med löjligt stora gamingskärmar?

Skriv vad du gjort i din changelog.md. Idéer för fler anpassningar som inte hinns med vid första lektionen skriver du upp i din todo.md för att göra senare.

Uppgift tio

Uppgift

Skapa ett enkelt mailto-formulär

Uppgiften går ut på att skapa ett formulär som skriver ett e-postmeddelande. Just det här exemplet använder sig av användarens dators mailprogram för att skicka mailet. I de flesta verkliga fall används dock serverscript för att skicka brev från webbsidor, kolla gärna exempel. Det som skulle ändras i ett sådant fall är framför allt värdena till attributen action och method i <form>-taggen.

Du kan utgå från exemplet nedan, men anpassa och ändra det efter eget huvud. Mailen som skickas från formuläret ska ha en förinställd ämnesrad (för att det enkelt ska kunna skiljas från annan mail):

<form action="mailto:you@yourdomain" method="post" enctype="text/plain">
   <p>Name: <input type="text" name="name" /></p>
   <p>Email: <input type="text" name="email" /></p>
   <p>Comments:<br />
   <textarea cols="30" rows="20" name="comments"></textarea></p>
   <p><input type="submit" name="submit" value="Send" />
   <input type="reset" name="reset" value="Clear Form" /></p>
</form>

Du kommer upptäcka att du kan få konstiga tecken i mailet, det beror på att get innebär att innehållet i formuläret skickas som en URL. I en URL kodas "konstiga" tecken annorlunda än i vanlig HTML.

Det går också att bygga ut mailto: på massor av sätt. Testa!

Skapa formuläret i ett dokument i en ny mapp med namnet "mailtoformular" och länka till den från din förstasida

Uppgift elva

Gör ett enkelt bildspel med färdig Javascript

Det finns många olika script för att skapa bildspel på webbsidor. Väldigt många utgår från "lightbox" (länk till projektets hemsida). Det är väldokumenterat, lätt att använda och modifiera. "Lightbox" (Lightbox 2) använder sig av funktioner från JQuery, som är ett Javascript-framework med ett stort antal färdigskrivna Javascriptfunktioner. Bland filerna du laddar ned finns det flera alternativa .js-filer.

  • lightbox.js
    • Skriptet, utan JQuery
  • lightbox.min.js
    • Skriptet i minifierad form, det vill säga utan kommentarer, radbrytningar eller extra mellanslag. Detta för att minska mängden data som skickas mellan server och klient.
  • lightbox-plus-jquery.js
    • Skriptet, med nödvändiga funktioner från JQuery tillagda.
  • lightbox-plus-jquery.min.js
    • samma som ovan fast minifierad.

Ladda ned materialet, läs instruktionerna och tillämpa på en uppsättning om minst tre bilder.

När du fått det att fungera kan det vara intressant att modifiera, bilderna som används för navigation (pilar, kryss och "throbber") kan bytas ut, timing och övergångar mellan bilder kan modifieras, m.m. Flexibiliteten och det faktum att skriptet är så väldokumenterat och -kommenterat skulle jag tro är anledningen att så många JS-bildspel utgår från Lokesh Dhakars "Lightbox"

Uppgift

  • Skapa minst ett bildspel (om minst tre bilder) som en separat uppgift med namnet "bildspel"
  • Använd egna bilder, inte de som finns på projekets hemsida. Jag vill se att du kan använda skriptet.
  • Bildtext ska finnas
  • Byt ut knapparna mot andra