Laborationer

Dag Almerheim´s lab-resultat

Klientbaserad Webutveckling

Laboration Uppgift Status Redovisad
Senast uppdaterad 2011-11-08
1 Uppgift 1 Skapa kataloger på servern Godkänd 2011-09-01
Uppgift 2 Skapa en presentationssida Godkänd 2011-09-01
Uppgift 3 Skapa en startsida för kursen Godkänd 2011-09-01
2 Uppgift 1 Relativa och absoluta sökvägar Godkänd 2011-09-15
Uppgift 2 Länkar och listor Godkänd 2011-09-15
Uppgift 3 Hantera Bilder och olika filformat Godkänd 2011-09-15
Uppgift 4 Länka in olika videoformat Godkänd 2011-09-15
Uppgift 5 Skapa en kontaktsida med formulär Godkänd 2011-09-15
3 Uppgift 1 Skapa en css fil Godkänd 2011-09-30
Uppgift 2 Skapa div-taggar Godkänd 2011-09-30
Uppgift 3 Jobba med färger Godkändd 2011-09-30
Uppgift 4 Skapa menyn Godkänd 2011-09-30
Uppgift 5 Typografin Godkänd 2011-09-30
Uppgift 6 Lite finlir... med bl a bilder Godkänd 2011-09-30
Uppgift 7 Ny bloggpost Godkänd 2011-09-30
Uppgift 8 Fixa denna sida Godkänd 2011-09-30
4 Uppgift 1 Stila om formuläret med CSS Godkänd 2011-10-13
Uppgift 2 Skapa utskriftsvänliga versioner Godkänd 2011-10-13
Uppgift 3 Copycat Godkänd 2011-10-13
Uppgift 4 Jobba med sprites Godkänd 2011-10-13
5 Uppgift 1 Anpassa pluggsiten till mobil enhet Godkänd 2011-10-21
6 Uppgift 1 Ny sidstruktur med HTML 5 Godkänd 2011-11-03
Uppgift 2 Microformat och hCard Godkänd 2011-11-03
Uppgift 3 Fotogalleri med CSS3 Godkänd 2011-11-03
Slutuppgift En webbsida för tankesmedjan Ellips Redovisad 2011-11-08

Laboration 1

Uppgifter

  1. Skapa mappstruktur på servern
  2. Skapa ett första dokument

Laboration 2

Uppgifter

  1. Relativa och absoluta sökvägar
    Svar på fråga 1
    http://www.server.se/html/pages/bottom.html
    Svar på fråga 2
    pages/top.html
    Svar på fråga 3
    ../../index.html
    Svar på fråga 4
    http://www.server.se/index.html
    Svar på fråga 5
    bottom.html
    Svar på fråga 6
    html/pages/top.html
  2. Länkar och listor
    Länkar i listor är överskådligt och tydligt.
    Externa länkar som jag har bidragit med material till.
  3. Hantera Bilder och olika filformat
    Jag har god koll på olika filformat.
    Här kan du se en jpg bild på mig!
    Här kan du se en png bild som är mitt gamla företags logga!
    Se en vektorgrafisk bild - gjord i en svg-editor.
  4. Video
    Jag har nu lagt ut en egen film på nätet!
    Här kan du se min film som jag har gjort i en flashkurs på Linnéuniversitetet nu i år!
  5. Formulär
    På min kontaktsida ska du nu kunna skicka lite uppgifter.

Laboration 3

Uppgifter

  1. Skapa en css-fil
    Jag har skrivit en css-fil som länkas in till de övriga html-dokumenten.
  2. Organisera html-dokumenten med div-taggar.
    Sidorna har fått en samlad behållare där ett huvud och menyn flankerar varandra.
    Längst ner finns en divtagg med uppgifter om sidansvarig.
  3. Jag har jobbat med en återhållsam färgskala.
    Med få färger vill jag försöka göra en tydlig lay-out.
  4. Menyn
    Med hjälp av demovideon kunde jag få till menyn.
    Jag länkade in en "plopp" som markerar vilken sida jag är på.
  5. Typsnitt
    Än så länge väljer jag ett vanligt typsnitt som fungerar bra på skärm.
    Typsnitt utan serifer passar bra på skärm.
  6. Bilder
    Jag har fixat med några bilder som ska passa in som ikoner och i övrigt stärka innehållet.
  7. Jag har sammanfattat laboration tre i en ny bloggpost på startsidan.
    Jag har lagt in en jpg-bild som skall illustrera innehållet i bloggpost tre..
  8. Den här sidan har nu fått sin slutgiltiga design inför redovisningen av denna labb.
    Det sista jag gjorde var att städa i CCS-filen så att den blev överskådlig.

Laboration 4

Uppgifter

  1. Stila till kontaktformuläret
    Lite pyssel med att göra om knappen.
  2. Skapa utskriftsvänliga versioner
    Skapa en print CSS för att ta bort olika delar.
    Menyn togs bort. Knappen likaså på kontaktsidan.
    Alla fonter ändrade jag till Times New Roman.
    Som sista fix använde jag mediadirektivet till att skriva ut alla externa länkar som förkommer på sidorna.
  3. Copycat
    Hmm. Slet ganska hårt med denna uppgift. Se den här!
    Svårast var att få bort den vita borden på den aktiva fliken.
    Färgerna hittade jag med pipetten i photoshop.
    Den lilla streckade avskiljaren vållade en del bekymmer.
  4. Jobba med sprites för att skapa ikoner i menyn
    I photoshop skapade jag egna ikoner.
    Startikonen är ett fotografi på ett utedass som jag byggt.

Laboration 5

Uppgifter

  1. Anpassa till mobil enhet.
    Det var hysat lätt att göra, men lite svårt att testa detta på riktigt.
    Jag har gjort alla momenten, och gjort en anpassning till skärmar som är max 480px.
    Det var kul att lära sig hur man gör ikoner som visas i url-adressen.
    Det var lite pyssligt att kolla i androidemulatorerna, men jag fick en hyfsad idé om hur det kunde se ut! Du kan se en skärmbild på startsidan

Laboration 6

Uppgifter

  1. Nya taggar i HTML5 och experiment med CSS3.
    Det var hyfsat lätt att använda de nya taggarna HEADER FOOTER ARTICLE mm. Försökte med anpassningar på alla mina sidor.
    Jag har gjort ett hCard, men inte stylat det något. Den finns på kontaktsidan för att kunna testas som sökbar.
    Att jobba med fotogalleriet var det allra svåraste. Här kan du se den! Jag har hackat en hel del och den fungerar, men bara i Firefox...
    Det har var den sista av grundlabbarna, nu ska jag försöka göra ett eget webb-projekt som slutarbete.
    Jag vet inte riktigt vad det kommer att handla om!

Slutuppgift

Uppgift

  1. En webbsida för tankesmedjan Ellips.
    Jag har gjort mycket av designen i HTML5 och CSS3.
    För att tillgodse sändarens syn på animationer, så finns även några Flashfiler med på sidorna.
    Gå direkt till sidan och titta! Den fungerar, men bara i Firefox!