MÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 2 HELENE BROGELAND

Storlek: px
Starta visningen från sidan:

Download "MÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 2 HELENE BROGELAND"

Transkript

1 MÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 2 HELENE BROGELAND 1

2 Innehåll Inledning... 3 Framework... 3 Val av ramverk... 3 Arbetet med Bootstrap... 4 Preprocessorer... 5 Val av preprocessor... 5 Arbetet med LESS... 5 Fortsatt arbete med ramverk och prekompilatorer... 5 Referenser

3 Inledning I beskrivningen för den här examinationsuppgiften föreslogs att vi skulle kunna använda oss av den portfolio som skapats tidigare och arbeta om denna i valt ramverk. Jag valde en mycket enkel layout med lite innehåll på varje sida i min portfolio och därför anser jag det inte vara lämpligt att arbeta om portfolion i den här uppgiften eftersom detta inte skulle vara särskilt utmanande. Jag har dock utgått från de menyalternativ/filnamn som användes i porfolion med tillägg av undersidor för två huvudsidor. För var och en av HTML-sidorna har jag skapat lite olika layout med i huvudsak större textblock och bilder. Detta för att visa på lite olika sätt att bygga upp layouten i aktuellt ramverk. Framework För att inte behöva börja om från början varje gång man skall arbeta fram en webbplats kan man utnyttja något av de mer eller mindre innehållsrika ramverk (frameworks) som finns att tillgå. Detta kan bidra till att man lättare kan hålla sig till nuvarande webbstandarder, förkorta ledtiden vid framtagande av en ny webbplats och bygga in mobilitet i webbplatsen (medium: online, tillgänglig: hämtad: ). Val av ramverk I föreläsningen om ramverk (medium: online, tillgänglig: marksprak-och-stilmallar-ii/ramverk-i-html5/, hämtad: ) nämns fyra olika typer av ramverk nämligen Skeleton, Bootstrap, Foundation och Boilerplate. Dessa kan man säga representerar ramverk på lite olika nivåer. Vad jag förstår så stöder alla aktuella ramverk mobilitet och responsiv design vilket är en mycket viktig aspekt i dagsläget. Enligt en rapport från KPBC (medium: online, tillgänglig: slide 32, hämtad: ) så ökar andelen mobilt användande av internet med en rasande fart. För att tillmötesgå detta krävs att man kontinuerligt tänker responsivt vid framtagande av webbplatser. Vid val av ramverk för aktuell examinationsuppgift går jag främst på de rekommendationer som Christian Ohlsson ger i sin föreläsning om ramverk (medium: online, tillgänglig: ei.hv.se/~imcoh/kurser/marksprak-och-stilmallar-ii/ramverk-i-html5/, hämtad: ), dvs Bootstrap och Foundation. Dessa känns som mer kompletta ramverk jämfört med övriga (Skeleton och Boilerplate). Båda ramverken har en väl utbyggd hjälpfunktion där Foundation även har en fungerande community. En fördel jag kan se med Bootstrap är att detta ramverk erbjuder ett relativt stort urval 3

4 av exempellayouter som man kan ladda hem och utgå ifrån. Jag ser även en fördel med Bootstrap eftersom ramverket fungerar tillsammans med prekompilatorn LESS (som jag valt att använda mig av). Om jag förstått det hela rätt så använder sig Foundation av SASS istället. Utifrån dessa punkter så väljer jag att arbeta vidare med Bootstrap för den här uppgiften. Arbetet med Bootstrap Det första jag gör är att ladda hem Bootstrap via getbootstrap.com. Jag väljer sedan att spara ner HTML-koden för en av de exempellayouter som finns att tillgå i Bootstrap. Jag har länge varit nyfiken på att arbeta med en layout som har en fixerad horisontell meny med möjlighet till drop-downfunktionalitet. Som tur är finns denna typ av layout som exempellayout ( medium: online, tillgänglig: hämtad: ) så jag väljer att spara ner HTML-koden för denna layout. Det första jag gör är att anpassa exempellayouten och skapa en HTML-mall som jag kan använda mig av när jag skapar mina sidor. Anpassningen görs genom att jag ser till att menyn läggs inne i container istället för att sträcka sig över hela skärmbredden. Dessutom tar jag bort avsnittet jumbotron och lägger till en enkel footer på sidan. I början av mitt arbete blir jag lite fundersam över en formulering i beskrivningen av aktuell uppgift, nämligen att två av sidorna skall ha undersidor. Jag tolkar det som om man först skall komma in på en sida för att sedan kunna gå vidare till dess undersida. Så som drop-down-menyn är utformad i mitt sparade exempel så fungerar inte detta utan man kommer enbart in på undersidan i drop-downmeny. På grund av detta får jag manipulera menyn så att den fungerar som jag tänkt. I Bootstraps gridsystem finns 12 kolumner. Dessa har lite olika bredd beroende på vilken skärmbredd man vill koncentrera sig på. Jag väljer att arbeta med den som är anpassad för skärm med max 768 pixels bredd och där varje kolumn har en bredd på 60 pixlar (klasserna som börjar på col-sm- ). Jag anser detta ger en tilltalande responsiv design och sidorna ser bra ut både på stor skärm (jag arbetar med 1600*900 pixlar) och på de olika storlekar som visas i Firefox-verktyget Visa layouter för anpassningsbar webbdesign (chrome://web-developer/content/generated/view-responsivelayouts.html) Jag bygger upp lite olika layouter med rader och olika bredd på kolumnerna på sidorna och utnyttjar bland annat möjligheten att nästla rader/kolumner för att erhålla önskad layout. Jag väljer att fylla kolumnerna främst med text-block och bilder för att ge en uppfattning om aktuell layout. Genomgående använder jag mig av att hämta bilderna från Lorem Pixel (lorempixel.com). På en av sidorna utnyttjar jag en inbyggd javascript-komponent nämligen carousel för bildvisning. att få en 4

5 Preprocessorer Ett sätt att få mer flexibilitet i sin CSS-kod är att gå vägen via en preprocessor (LESS eller SASS). Då kan man jobba med variabler, argument ( inparametrar ) etc. Val av preprocessor Som det sägs i föreläsningen om preprocessorer (medium:online, tillgänglig: cumulus. ei.hv.se/~pb/kurser/webbdesign/lesssass/, hämtad: ) så är LESS och SASS väldigt lika varandra. Det verkar dock som om LESS har några användningsområden som saknas hos SASS (enligt föreläsningsfilmerna), nämligen mixin guards och pattern match. Jag uppfattar att dessa områden gör att LESS känns ännu mer användbart och flexibelt jämfört med SASS. Eftersom jag arbetar i PC-miljö upplever jag det mycket smidigare att installera och använda LESS än vad som är fallet med SASS eftersom jag behöver installera två komponenter i det senare fallet (Ruby och Scout). Jag väljer därför att arbeta med LESS och att installera SimpLESS från Arbetet med LESS Eftersom det finns mycket CSS-funktionalitet inbyggt i Bootstrap så utnyttjar jag detta till stora delar vid skapandet av examinationsuppgiftens webbsidor. Arbetet med LESS koncentrerar jag främst till att på ett smidigt sätt kunna skapa ett flexibelt färgschema för sidorna. Jag definierar upp ett antal färg-variabler som tilldelas olika färgvärden. Sedan skapar jag en som sätts till någon av färg-variablerna. Efter det skapar jag mixins som innehåller olika funktioner för bearbetning av färgen som satts De olika komponenterna på sidorna tilldelas sedan någon av dessa mixins. Jag skapar även en mixin för rundade hörn och en för kantlinje. Båda dessa görs flexibla då jag väljer att anropa dem med argument. Dessutom gör jag några media queries för att hantera de olika utseenden som menyn får beroende på skärmbredd. Fortsatt arbete med ramverk och prekompilatorer Som det känns efter arbetet med den här uppgiften så kommer jag säkerligen arbeta vidare med och fördjupa mig i både ramverk (troligen Bootstrap) och LESS. Jag ser en stor nytta i att arbeta med den funktionalitet/flexibilitet som finns inbyggd i LESS för att göra arbetet med framtagandet av CSS så smidigt som möjligt även i mindre utvecklingsprojekt. Självklart är det smidigt att även arbeta utifrån ett ramverk men jag kan känna att nyttan till viss del är beroende på projektets storlek och om det kanske är fler inblandade i arbetet. 5

6 Referenser chrome://web-developer/content/generated/view-responsive-layouts.html 6

MÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 1 HELENE BROGELAND

MÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 1 HELENE BROGELAND MÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 1 HELENE BROGELAND 1 Innehåll Inledning... 3 Optimering av min webbportfolio... 4 Analys och dokumentation av utgångsläget... 4 Optimeringsaktiviteter...

Läs mer

ATT ARBETA MED VEKTORGRAFIK

ATT ARBETA MED VEKTORGRAFIK ATT ARBETA MED VEKTORGRAFIK Helene Brogeland Vektorgrafik och animation VT 2014 2014-04-29 Inledning Före aktuell kurs hade jag bara en vag uppfattning av innebörden av vektorgrafik och hade aldrig jobbat

Läs mer

On-line produktion TDDC61

On-line produktion TDDC61 On-line produktion TDDC61 Förra veckan Kursupplägg HTML FTP Validering Laboration 1. Deadlines Laborationer: 12/10, kl 08 Lämna in efterhand ni blir färdiga Vi rättar inom 4 arbetsdagar Portfolio, tillfälle

Läs mer

Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011)

Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011) Laboration 1: Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011) Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet

Läs mer

Laboration 2. Webbproduktion En stiligare webbsida HT2015

Laboration 2. Webbproduktion En stiligare webbsida HT2015 Laboration 2 Webbproduktion Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt sätt som möjligt. Nu är det dags att ge ögat något vackert att vila på.

Läs mer

Tabeller. Lektion 7. en tabellrubrikcell som centrerad och i fetstil.

Tabeller. Lektion 7. en tabellrubrikcell som centrerad och i fetstil. Lektion 7 Tabeller Under denna lektion kommer du att få lära dig hur man bygger upp tabeller med HTML och hur man styr layout och utseende på en webbsida som innehåller tabeller. Enkla tabeller Av tradition

Läs mer

Webbteknik för ingenjörer

Webbteknik för ingenjörer Institutionen för 2015-01-22 Tillämpad fysik och elektronik Karin Fahlquist Webbteknik för ingenjörer HTML5 & CSS laboration Målsättning Att skapa en webbplats utifrån en Lo-fi prototyp och implementera

Läs mer

Tillämpad fysik och elektronik Per Kvarnbrink m.fl. Laboration 2: HTML och CSS.

Tillämpad fysik och elektronik Per Kvarnbrink m.fl. Laboration 2: HTML och CSS. Laboration 2: HTML och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en enkel webbplats med layout, bakgrundsbilder, minst en meny

Läs mer

Responsiv webbplats. Tips på hur innehållet ska ses över för en bra användarupplevelse på alla skärmstorlekar 2014-02-17 1

Responsiv webbplats. Tips på hur innehållet ska ses över för en bra användarupplevelse på alla skärmstorlekar 2014-02-17 1 Responsiv webbplats Tips på hur innehållet ska ses över för en bra användarupplevelse på alla skärmstorlekar 1 Vad är responsivt? Det betyder att webbplatsen känner av vilken skärmstorlek användaren surfar

Läs mer

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt. Kom igång Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.se/login Nu dyker en ruta upp på skärmen. Fyll i ditt användarnamn och lösenord och klicka på "logga in". Nu

Läs mer

Manual för. 2.4 KALAS Sitemanager

Manual för. 2.4 KALAS Sitemanager Manual för 2.4 KALAS Sitemanager 1. Introduktion Den här manualen skall hjälpa dig att komma igång så att du själv på ett enkelt sätt kan lägga till, redigera eller ta bort webbsidor på din webbplats.

Läs mer

Webbutveckling Laboration 1: HTML5 och CSS3.

Webbutveckling Laboration 1: HTML5 och CSS3. Institutionen för 2015-11-30 Tillämpad fysik och elektronik Karin Fahlquist Webbutveckling Laboration 1: HTML5 och CSS3. Målsättning Att skapa en webbplats genom att först skapa en Lo-fi prototyp och sedan

Läs mer

Manual till publiceringsverktyg

Manual till publiceringsverktyg Manual till publiceringsverktyg Allmänt När man har loggat in hamnar man direkt på översikten över hela webbplatsen. Överst hittar man en meny som alltid ligger med i verktyget. Denna meny innehåller översikten

Läs mer

Dokumentation för användning av administrationspanelen på Xtractor.se

Dokumentation för användning av administrationspanelen på Xtractor.se Dokumentation för användning av administrationspanelen på Xtractor.se Kontrollpanelen når man på: http://xtractor.se/admin Xtractors webbplats är uppbyggt på en skräddarsydd variant av publiceringssystemet

Läs mer

Bloggdesign { ALEXANDRA 299:- 359:- Lilla Designpaketet. Designpaketet Mellan. Prislista: Designpaket

Bloggdesign { ALEXANDRA 299:- 359:- Lilla Designpaketet. Designpaketet Mellan. Prislista: Designpaket Bloggdesign Dessa designpaket är utformade för dig som bloggar och vill ha en ny, proffsigare och mer personlig design. Jag gör designer för blogg.se/webblogg.se/blo.gg. När du har bestämt dig för vilket

Läs mer

Vilken version av Dreamweaver använder du?

Vilken version av Dreamweaver använder du? Sida 1 av 7 Lektion 1: sida 1 av 4 Till kursens framsida Sida 2 av 4» Lektion 1 Då ska vi sätta igång med den här kursens första lektion! Här kommer du att få lära dig hur man skapar och förbereder webbplatser

Läs mer

Föreningarnas nya sidmall. Version 4, 12.4.2016

Föreningarnas nya sidmall. Version 4, 12.4.2016 Föreningarnas nya sidmall Version 4, 12.4.2016 Innehållsförteckning Föreningarnas nya sidmall... 1 Introduktion... 3 Sammanfattning... 3 Sidmallar och sidornas uppbyggnad... 4 Gamla sidmallen... 4 Nya

Läs mer

Konverteringsskola Del 3: Vad är användbarhet?

Konverteringsskola Del 3: Vad är användbarhet? Konverteringsskolans andra del behandlade vikten av att lära känna sina besökare. Vi kommer nu att arbeta vidare med besökarna i åtanke och fokusera på hur pass väl de kan använda webbplatsen. Om webbplatsen

Läs mer

Projektrapport. Projekt - Anna Broström Keramik

Projektrapport. Projekt - Anna Broström Keramik Projektrapport Projekt - Anna Broström Keramik Kurs: Medieteknik A, VT 2013 Delkurs: Interaktiva medier och Publicering via Internet Inlämningsdatum: 2013-06-04 FIMS: Freja Krogh-Andersen, Ida Josefsson,

Läs mer

För att skriva CSS-kod använder man sig av olika kommandon. Ett exempel på hur man kan skriva kod för att ändra textfärg kan vara:

För att skriva CSS-kod använder man sig av olika kommandon. Ett exempel på hur man kan skriva kod för att ändra textfärg kan vara: Hemsida CSS Introduktion till Cascading Style Sheets (CSS) Detta är en mycket kort genomgång av CSS med exempel på hur sådan kod ska läsas och hur den kan användas på IdrottOnline-sidor. Är man ute efter

Läs mer

INDIVIDUELL INLÄMNINGSUPPGIFT

INDIVIDUELL INLÄMNINGSUPPGIFT INDIVIDUELL INLÄMNINGSUPPGIFT Sofia Aronsson ANVÄNDBARHET OCH GRAFISK DESIGN MIS 13, Nackademin Yrkeshögskola Lärare: Ellinor Ihlström Inledning... 3! Analys... 3! Hitta... 3! Förstå... 5! Använda... 6!

Läs mer

Struktur & Layout med CSS

Struktur & Layout med CSS 1ME321 Webbteknik 1 Lek0on 5 Struktur & Layout med CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 40 Läsanvisningar Exemplet Gretas Blommor GarreKs

Läs mer

nollning.nu - en liten handbok

nollning.nu - en liten handbok nollning.nu - en liten handbok 2015 Litet förord Så är det nu dags att få tillgång till era webbplatser. Vi i KAOS har jobbat på för att göra allt så smidigt som möjligt för er men självklart finns det

Läs mer

Att arbeta med. Müfit Kiper

Att arbeta med. Müfit Kiper Att arbeta med Müfit Kiper Att skriva nya inlägg Alla inlägg som är postade visas i kronologisk ordning, det vill säga det senast postade inlägget kommer visas först om inget annat angetts i temafilerna.

Läs mer

Prislista. Information. Se detaljerad info i dokumentet. Se detaljerad info i dokumentet. Se detaljerad info i dokumentet

Prislista. Information. Se detaljerad info i dokumentet. Se detaljerad info i dokumentet. Se detaljerad info i dokumentet Prislista Prislista Produkt Information Pris, SEK Kampanjsida 8.500 Nyhetsbrev 3.500 Banners 900-1200 Mobilwebapp 12.000 Logotyper 8.000-14.000 Informationswebbplats 13.500 Offertbaserade webbplatser Offertbaserade

Läs mer

Nyheter i PowerPoint 2010

Nyheter i PowerPoint 2010 Nyheter i PowerPoint 2010 Nytt utseende Programfönstret i Office 2010 har ett nytt utseende. Likt Office 2003 är Arkiv tillbaka. Som i Office 2007 finns det flikar och grupper i det övre verktygsfältet.

Läs mer

WordPress fortsättning Anpassa teman, bildgalleri, fleranvändare, webshop, CSS mm

WordPress fortsättning Anpassa teman, bildgalleri, fleranvändare, webshop, CSS mm WordPress fortsättning Anpassa teman, bildgalleri, fleranvändare, webshop, CSS mm WordPress är ett kraftfullt publiceringsverktyg för webben som trots sin flexibilitet och styrka är lätt att komma igång

Läs mer

Ikon Menyalternativ Funktion och beskrivning Sök och ersätt text i arbetsfältet. Ramformatering

Ikon Menyalternativ Funktion och beskrivning Sök och ersätt text i arbetsfältet. Ramformatering Innehåll Redigeringsverktyget... 3 Hantera bilder... 5 Infoga pdf-fil... 5 Lägg till mall... 6 Infoga YouTube-klipp... 6 Infoga länk... 7 Infoga tabell... 8 Kodupprensning... 10 CSS-klass... 10 Egna anteckningar:...

Läs mer

Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1

Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Bilder och optimering --- Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi

Läs mer

Webbdesign Process till produkt

Webbdesign Process till produkt Webbdesign Process till produkt Umeå Universitet Mediaproduktion för www II 7,5hp Isak Madoun Introduktion; VÅR-KOKBOK Är en kokbok som i sin första upplgaga kom ut på 50-talet. Boken innehåller mer av

Läs mer

Widgetguiden Vad är Publits widgetshop?

Widgetguiden Vad är Publits widgetshop? Widgetguiden Den här guiden är till för dig som vill använda Publits widgetshop för att enkelt sälja böcker direkt på din egen hemsida, blog eller Facebook. Här går vi steg för steg igenom processen för

Läs mer

Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR

Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR Del 4 BILDER OCH TABELLER 0. Arbeta med bilder... 9. Redigera bilder... 96. Klickbara bilder/imagemaps... 0. Tabeller... 04 4. Skapa

Läs mer

1. Uppdateringsmodul (CMS)

1. Uppdateringsmodul (CMS) Innehåll 1. Uppdateringsmodul (CMS)... 2 2. Artiklar... 3 2.1 Upprätta din första artikel... 4 2.2 Skapa innehåll i artikeln... 5 2.2.1 RUBRIK I ARTIKELN:... 5 2.2.3 INFOGA BILDER:... 7 2.2.4 CELLER...

Läs mer

DOME. storyteller DOME STORYTELLER

DOME. storyteller DOME STORYTELLER STORYTELLER Domteatern på Visualiseringscenter C är ett fantastiskt presentationsverktyg med en yta på nästan 300 kvadratmeter som är helt anpassningsbar efter kundens önskemål. Dome Storyteller är utvecklat

Läs mer

Mamut Enterprise Kund- och Partner Web

Mamut Enterprise Kund- och Partner Web Mamut Enterprise Kund- och Partner Web Detta är en introduktion till hur du använder tilläggsprodukten Mamut Enterprise Kund och Partner Web. Först får du en genomgång av vad Mamut Enterprise Kund och

Läs mer

Projektanvisning. Webbsideprojekt. Författare: Johan Leitet Version: 2 Datum: 2012-10-09

Projektanvisning. Webbsideprojekt. Författare: Johan Leitet Version: 2 Datum: 2012-10-09 Projektanvisning Webbsideprojekt Författare: Johan Leitet Version: 2 Datum: 2012-10-09 Inledning Du har nu under ett antal laborationer i webbteknik fått relativt styrda uppgifter där du ensam fått lösa

Läs mer

Portfolio Mathias Andelin www.webbformgivare.se mathias.andelin@gmail.com

Portfolio Mathias Andelin www.webbformgivare.se mathias.andelin@gmail.com Portfolio Mathias Andelin www.webbformgivare.se mathias.andelin@gmail.com 1 Innehåll Redesign.......................................................................3 Värvet........................................................................

Läs mer

Manual för. 2.5 KALAS Sitemanager

Manual för. 2.5 KALAS Sitemanager Manual för 2.5 KALAS Sitemanager 1. INTRODUKTION...1 1.1 SYSTEMKRAV...1 1.1.1 Visning av sidor...1 1.1.2 Produktion av sidor...1 1.1.3 Inloggning...1 2. KALAS SITEMANAGER...3 2.1 LÄGGA TILL EN WEBBSIDA...4

Läs mer

Adobe. Dreamweaver CS3. Grundkurs. www.databok.se

Adobe. Dreamweaver CS3. Grundkurs. www.databok.se Adobe Dreamweaver CS3 Grundkurs www.databok.se Innehållsförteckning 1 Arbetsmiljön... 1 Användningsområde... 1 Starta Dreamweaver... 2 Arbeta i Dreamweaver... 2 Fönster... 3 Statusfältet... 4 Menyer...

Läs mer

A" utveckla kartor med responsiv design. Johan Lah8 Geografisk IT- utvecklare Stadsbyggnadskontoret, Malmö stad

A utveckla kartor med responsiv design. Johan Lah8 Geografisk IT- utvecklare Stadsbyggnadskontoret, Malmö stad A" utveckla kartor med responsiv design Johan Lah8 Geografisk IT- utvecklare Stadsbyggnadskontoret, Malmö stad Innehåll 1. Vad och varför responsiv design? 2. Hur kan det genomföras? 3. Exempel (smap)

Läs mer

Manual Introduktionskurs SiteVision

Manual Introduktionskurs SiteVision Manual Introduktionskurs SiteVision sidan 1 Manual Introduktionskurs SiteVision 20141125 Version 3 Innehållsförteckning Logga in 2 Redigera text 3 Om bilder på ale.se 6 Lägga till en bild 7 Lägga till

Läs mer

On-line produktion TDDC61

On-line produktion TDDC61 On-line produktion TDDC61 Förra veckan Kursupplägg HTML FTP Validering Laboration 1. Deadlines Laborationer: 14/10 Lämna in efterhand ni blir färdiga Vi rättar inom 5 arbetsdagar Portfolio, tillfälle 1:

Läs mer

TRAINING DAY SASS AND COMPASS FOR RWD RWD

TRAINING DAY SASS AND COMPASS FOR RWD RWD 23-27 september anordnades europeiska DrupalCon, för åttonde året, och denna gång med 1840 deltagare från hela världen. Från Sverige var vi ett tappert gäng på lite drygt 40 deltagare, från olika företag

Läs mer

Symmetry: Bortsett från menyn har innehållet av sidan viss symmetri när det kommer till videoklippen som är upplagda på sidan.

Symmetry: Bortsett från menyn har innehållet av sidan viss symmetri när det kommer till videoklippen som är upplagda på sidan. WorkShop II Checklistor 1.2 Överordnad Struktur Balance: Gränssnittet har just nu viss balans i innehållet, men menyn behöver justeras i förhållande med innehållet samt en fast container för innehållet

Läs mer

SiteVision - manual för administratörer

SiteVision - manual för administratörer SiteVision - manual för administratörer Senselogic AB Version R1A Innehållsförteckning 1 Om SiteVision...1 2 Om mallar...1 2.1 Dynamiska mallar... 3 2.1.1 Skapa en mall med ett sidhuvud... 4 2.2 Inställningar

Läs mer

SVENSK FILMINDUSTRIS WEBBPLATS

SVENSK FILMINDUSTRIS WEBBPLATS EXPERTANALYS AV SVENSK FILMINDUSTRIS WEBBPLATS JENNY DAFGÅRD MDI.INTERAKTIONSDESIGN GRAFISKA GRÄNSSNITT 23 OKTOBER 2003 INNEHÅLLSFÖRTECKNING INLEDNING...4 SVENSK FILMINDUSTRIS WEBBPLATS...6 ÖVERGRIPANDE

Läs mer

Webbkurs för distriktsansvariga. Stockholm den 7 och 13 september 2011

Webbkurs för distriktsansvariga. Stockholm den 7 och 13 september 2011 Webbkurs för distriktsansvariga Stockholm den 7 och 13 september 2011 Klistra in text från Word Klistra in: all formateringskod från Word kommer med och är den som styr det webbläsaren visar, även om man

Läs mer

Att använda laget.se

Att använda laget.se 2012 Att använda laget.se för ungdomsledare i MSSK Dokumentet är framtaget för att hjälpa till att förenkla användningen av lagens webbsidor. Har du förslag på ändringar eller ser felaktigheter kan du

Läs mer

Manual för webbpublicering. Enköpings kommun

Manual för webbpublicering. Enköpings kommun Manual för webbpublicering Enköpings kommun Innehåll ATT LOGGA IN I SWWWING 3 Inloggningsrutan 3 GRÄNSSNITTET 4 Filhanteraren 4 Content Management 4 Verktyget Notify - Dags att uppdatera 4 SKAPA OCH REDIGERA

Läs mer

Uppdaterad: 2014-03-18. Lathund. Arbetsrum

Uppdaterad: 2014-03-18. Lathund. Arbetsrum Uppdaterad: 2014-03-18 Lathund Arbetsrum 1 1 Innehållsförteckning Inledning 3 Arbetsrum 4 Skapa arbetsrum, steg 1 4 Skapa arbetsrumslista 4 Olika typer av arbetsrum 6 Skapa arbetsrum, steg 2 6 Lägg in

Läs mer

Daniel Persson. Födelsedatum: 1986-02- 08 Vindragaregatan 3B, 417 03 Göteborg Telefon: 070 839 51 88 Email: info@danielp.se Portfolio: www.danielp.

Daniel Persson. Födelsedatum: 1986-02- 08 Vindragaregatan 3B, 417 03 Göteborg Telefon: 070 839 51 88 Email: info@danielp.se Portfolio: www.danielp. 1 Daniel Persson Front end utvecklare Födelsedatum: 1986-02- 08 Vindragaregatan 3B, 417 03 Göteborg Telefon: 070 839 51 88 Email: info@danielp.se Portfolio: www.danielp.se CURRICULUM VITAE Yrkesmässiga

Läs mer

Laboration Fuzzy Logic

Laboration Fuzzy Logic BILAGA B Laboration Fuzzy Logic Lär dig simulera ett program! ABB INDUSTRIGYMNASIUM Fuzzy Logic Wikingsons Wåghalsiga Wargar Projekt ABB VT 2006 Västerås Innehåll 1 Introduktion... 3 2 Uppgiften... 3 2.1

Läs mer

Quick Start CABAS. Generella systemkrav CABAS / CAB Plan. Kommunikation. Säkerhet

Quick Start CABAS. Generella systemkrav CABAS / CAB Plan. Kommunikation. Säkerhet Gunnel Frogedal 2014-07-17 6 32753 1 of 5 Quick Start CABAS Generella systemkrav CABAS / CAB Plan Applikationen stöds av följande operativsystem: Windows Vista SP2 Windows 7 SP1 Windows 8 (inte RT) Windows

Läs mer

Inlämningsuppgift 2. DA156A - Introduktion till webbutveckling Teknik och samhälle, Malmö högskola Oktober 2012

Inlämningsuppgift 2. DA156A - Introduktion till webbutveckling Teknik och samhälle, Malmö högskola Oktober 2012 Oktober 2012 Uppgiften går ut på att redovisa dina kunskaper kring JavaScript, liksom din förmåga att skapa en CSS-baserad layout. Detta gör du genom att lämna in ett resultat som följer specifikationerna

Läs mer

Kravspecifika.on, pappersprototyp & CSS

Kravspecifika.on, pappersprototyp & CSS 1ME321 Webbteknik 1 Lek0on 4 Kravspecifika.on, pappersprototyp & CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 39 UppgiI U2 = L4+L5+L6 UppgiI U3 Allmänna

Läs mer

Manual för visionutv.net Redigera

Manual för visionutv.net Redigera Manual för visionutv.net Redigera Version 2.0 Visionutveckling 2004 Innehåll: 1 Om Redigera 3 1.1 Bakgrund 3 1.2 Hur Redigera är uppbyggt 3 1.3 Vad är? 4 2 Inloggning 6 3 Nyheter i Redigera 2.0 7 3.1 Funktionsknappar

Läs mer

Övningar i CSS för anpassning till olika enheter

Övningar i CSS för anpassning till olika enheter Övningar i CSS för anpassning till lika enheter Hittills har vi i föregående labratiner tittat på hur man med CSS utfrmar en presentatin för bildskärm på en vanlig datr. Men det finns fler presentatiner

Läs mer

WORDPRESSGUIDE 2013. Uppdaterad 20131029. WORDPRESSGUIDE 2013 Sida 1

WORDPRESSGUIDE 2013. Uppdaterad 20131029. WORDPRESSGUIDE 2013 Sida 1 Uppdaterad 20131029 WORDPRESSGUIDE 2013 Sida 1 WordPress är ett modernt publiceringsverktyg med fokus på utseende, webbstandard och användarvänlighet. Det perfekta verktyget för både privatpersoner och

Läs mer

Välkommen till Studiekanalen.se

Välkommen till Studiekanalen.se Välkommen till Studiekanalen.se Det här produktbladet beskriver besökarens (elevens) väg till utbildningen, hur de matchas mot rätt skola och utbildning. Det beskriver även hur utbildningsanordnaren kan

Läs mer

Lathund Blogg hos moobis.se (skapad av Marie Linder marielinder.se)

Lathund Blogg hos moobis.se (skapad av Marie Linder marielinder.se) Lathund Blogg hos moobis.se (skapad av Marie Linder marielinder.se) 1) Gå till moobis.se 2) Klicka på skapa blogg i menyn längst upp och sedan på 4) Välj användarnamn och fylla i din epostadress. Du kan

Läs mer

Utseende. Lauri Watts Översättare: Stefan Asserhäll

Utseende. Lauri Watts Översättare: Stefan Asserhäll Lauri Watts Översättare: Stefan Asserhäll 2 Innehåll 1 Utseende 4 1.1 Allmänt............................................ 4 1.2 Teckensnitt.......................................... 4 1.3 Stilmallar...........................................

Läs mer

IT och informationsteknik

IT och informationsteknik IT och informationsteknik 206 Produktion av webbsidor Kuva: Skills Finland / Markku Heikkilä Grenansvarig 1 / 12 Miikka Merikanto Suomen Liikemiesten Kauppaopisto miikka.merikanto(at)businesscollege.fi

Läs mer

Administrera behörighet IdrottOnline Klubb Administrera behörighet

Administrera behörighet IdrottOnline Klubb Administrera behörighet Uppdaterad 2011-03-09 Administrera behörighet IdrottOnline Klubb Administrera behörighet Inledning IdrottOnline är idrottens verktyg för kommunikation och administration. IdrottOnline ägs och utvecklas

Läs mer

Gör en egen webbplats

Gör en egen webbplats I det här avsnittet får du lära dig att bygga en egen minsida lägga till text och bilder skapa en egen design lägga till en bakgrund på webbplatsen I nästa nummer får du hjälp att bygga en större webbplats

Läs mer

Ni administrerar er hemsida genom att logga in på en uppdateringsmodul (även benämnd administrationsgränssnitt eller administration).

Ni administrerar er hemsida genom att logga in på en uppdateringsmodul (även benämnd administrationsgränssnitt eller administration). Joomla Guide 2.5.11 TILLVÄGAGÅNGSÄTT Sida 1 av 9 TILLVÄGAGÅNGSÄTT Att använda uppdateringsmodulen kräver att man vet vilka innehållsdelar man kan ändra på sin hemsida. De delar man kan ändra är oftast

Läs mer

Allmänt beteende hos Konqueror. Burkhard Lück Översättare: Stefan Asserhäll

Allmänt beteende hos Konqueror. Burkhard Lück Översättare: Stefan Asserhäll Burkhard Lück Översättare: Stefan Asserhäll 2 Innehåll 3 På den här sidan hittar du inställningar av hemsida och startsida, och beteende vid användning av flikar både för Konquerors filhanteringsläge och

Läs mer

ASTRAKAN COURSEPLAN. Programmet som sparar tid... ... och förenklar kursadministrationen! ASTRAKAN COURSEPLAN BESTÅR AV TVÅ DELAR:

ASTRAKAN COURSEPLAN. Programmet som sparar tid... ... och förenklar kursadministrationen! ASTRAKAN COURSEPLAN BESTÅR AV TVÅ DELAR: ASTRAKAN COURSEPLAN Programmet som sparar tid...... och förenklar kursadministrationen! Med webbaserade Astrakan CoursePlan kan onödig administration undvikas samtidigt som kursdeltagarna erbjuds en förstklassig

Läs mer

Remiss- Webbriktlinjer för Huddinge kommun 2014

Remiss- Webbriktlinjer för Huddinge kommun 2014 BARN- OCH UTBILDNINGSFÖRVALTNINGEN TJÄNSTEUTLÅTANDE DIARIENR 2014-04-17 GN-2014/113.119 1 (3) HANDLÄGGARE Hyensjö, Anna 08-535 360 85 Anna.Hyensjo@huddinge.se Gymnasienämnden Remiss- Webbriktlinjer för

Läs mer

APA för nybörjare. Innan du börjar. Översikt

APA för nybörjare. Innan du börjar. Översikt APA för nybörjare Den här texten är tänkt som en snabb introduktion hur du kan använda publiceringssystemet APA (Advanced Publication Application) för att redigera webbplatser. Texten kräver inga förkunskaper

Läs mer

Kom i gång med PING PONG

Kom i gång med PING PONG Kom i gång med PING PONG Studentmanual Version 6 Kom igång med PING PONG Studentmanual. Version 6 Anita Eklöf, Sektionen för pedagogiskt arbete, Högskolan i Borås. 2015-02-16 1 ATT LOGGA IN... 1 2 STARTSIDAN...

Läs mer

Prototyper och användartest

Prototyper och användartest Föreläsning i webbdesign Prototyper och användartest Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Prototyp för en webbplats! Utkast eller enkel variant av webbplatsen" Syfte"

Läs mer

Lions Clubs Internationals användarhandbok för e-klubbhuset

Lions Clubs Internationals användarhandbok för e-klubbhuset Lions Clubs Internationals användarhandbok för e-klubbhuset OCEC4.SW V02.2014 1 Du kan enkelt redigera klubbens webbplats med e-klubbhussystemet genom att följa instruktionerna i den här användarhandboken.

Läs mer

Ellibot 1.0. Interaktivmedia Content Management System. Publicera för webben

Ellibot 1.0. Interaktivmedia Content Management System. Publicera för webben Ellibot 1.0 Interaktivmedia Content Management System Publicera för webben Innehåll Logga in 3 Skapa en ny webbsida 4 o Publicering 5 o Information 5 o Standardfiler 6 o Innehåll 7 Hur man skapar en länk

Läs mer

Grafisk manual. Innehåll. Kontakt: max@desmond.com

Grafisk manual. Innehåll. Kontakt: max@desmond.com Grafisk manual Innehåll Kontakt: max@desmond.com Förutsättningar Hoop skall ha en modern och sportig profil som skall vara denna manual trogen i allt formellt material som: Brev, Mejl, Instruktionsböcker

Läs mer

CMS. - Content management system

CMS. - Content management system CMS - Content management system Agenda CMS Server, webbhotell och FTP Wordpress, ställ mycket frågor Om vi hinner - Snabb genomgång av CMS - uppgiften Nu & Då Sidor med bara HTML och CSS kräver manuell

Läs mer

Lathund Bygga mallar. Senselogic AB Version 2.3

Lathund Bygga mallar. Senselogic AB Version 2.3 Lathund Bygga mallar Senselogic AB Version 2.3 Innehållsförteckning 1 Begrepp... 1 1.1 Innehållsyta... 1 1.2 Mallyta... 2 1.3 Layouter... 3 1.3.1 Fliken marginaler... 1.3.2 Fliken Inställningar... 1.3.3

Läs mer

Dokumentation. Joomla - Administrationsguide 1. Logga in i administrations-gränssnittet 2. Ändra globala inställningar 2.

Dokumentation. Joomla - Administrationsguide 1. Logga in i administrations-gränssnittet 2. Ändra globala inställningar 2. Joomla - Administrationsguide Joomla - Administrationsguide 1 Logga in i administrations-gränssnittet 2 Ändra globala inställningar 2 Ändra titel 3 Artiklar, kategorier och sektioner 4 Skapa sektioner

Läs mer

Wordpress handledning för distrikt, lokalavdelningar och personsidor

Wordpress handledning för distrikt, lokalavdelningar och personsidor Wordpresshandledning fördistrikt,lokalavdelningaroch personsidor 1 Index Adminpanel... 5 Användare... 21 BWS Plugins... 15 inlägg... 6 Inlägg skapa och hantera... 7 Kategorier... 7 Inställningar... 14

Läs mer

Sidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle.

Sidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle. Lab1 - CV-sidan Du ska bygga en variant av en CV-sida i HTML och CSS. Sidan ska åtminstone innehålla en bild på dig, en klassisk tabell med utbildningar/erfarenheter, ditt favoritcitat, en eller flera

Läs mer

Webbsida i Wordpress. Existens på webben och bli sökbar

Webbsida i Wordpress. Existens på webben och bli sökbar Webbsida i Wordpress Existens på webben och bli sökbar Om Susann Rickan Susann Rickan bor i Nora Byggt webbsidor i 16 år Eget företag sedan 2009. Hjälper företag med webb och foto. Tycker om att bygga

Läs mer

Objektorienterad programmering Föreläsning 2

Objektorienterad programmering Föreläsning 2 Objektorienterad programmering Föreläsning 2 Copyright Mahmud Al Hakim mahmud@webacademy.se www.webacademy.se Agenda Inläsning av data via dialogrutor Repetitioner (While-satsen och For-satsen) Nästlade

Läs mer

KREATIV OCH LJUDABSORBERANDE

KREATIV OCH LJUDABSORBERANDE PRIM 2 Prim Prim 3 PRIM Prim är ett musikintervall mellan två toner där Prim är den första rena tonen. Ordet kommer från latinets primus som betyder första. Vår Prim är en kreativ rumsavdelare som har

Läs mer

IdrottOnline Förbund Administrera behörighet. Administrera behörighet

IdrottOnline Förbund Administrera behörighet. Administrera behörighet IdrottOnline Förbund Administrera behörighet Administrera behörighet Inledning IdrottOnline är idrottens verktyg för kommunikation och administration. IdrottOnline ägs och utvecklas av Riksidrottsförbundet,

Läs mer

Lathund för webbpublicering på Vi Ungas distriktswebbplatser

Lathund för webbpublicering på Vi Ungas distriktswebbplatser Lathund för webbpublicering på Vi Ungas distriktswebbplatser 1 1. Introduktion 3 2. Inloggning 3 3. Publicering av nyheter 4 4. Hantera nyheter 7 5. Snabblänkar 7 6. Sidor 8 7. Händelser 8 8. Distriktets

Läs mer

Introduktion Till WordPress

Introduktion Till WordPress Introduktion Till WordPress Vad är WordPress? ett blogg- och innehållshanteringssystem skrivet i PHP och som använder databasen MySQL för datalagringen Wordpress har under åren utvecklats från ett bloggsystem

Läs mer

Adobe Fireworks CS6. Följande text kan användas på webbplatser, i kataloger, annonser och annat marknadsföringsmaterial för Adobe Fireworks CS6.

Adobe Fireworks CS6. Följande text kan användas på webbplatser, i kataloger, annonser och annat marknadsföringsmaterial för Adobe Fireworks CS6. Adobe Fireworks CS6 Marketing Copy för Channel Partners Adobe Fireworks CS6 Följande text kan användas på webbplatser, i kataloger, annonser och annat marknadsföringsmaterial för Adobe Fireworks CS6. HUR

Läs mer

Stilbyggar-manual. Logga in. Vad betyder knapparna? Välj stil & Duplicera

Stilbyggar-manual. Logga in. Vad betyder knapparna? Välj stil & Duplicera Stilbyggar-manual Logga in Börja med att logga in på Digistoff. Skriv in adressen för föreningens hemsida, och lägg till /loggain på slutet av adressen. Exempel: trevapplingen.nsu.webbhuset.fi/loggain

Läs mer

Responsiv Webbdesign är det framtiden?

Responsiv Webbdesign är det framtiden? Beteckning: Akademin för teknik och miljö Responsiv Webbdesign är det framtiden? Daniel Karlsson juni 2011 Examensarbete, 15 högskolepoäng, C Datavetenskap Datavetenskapliga programmet Examinator: Ann-Sofie

Läs mer

Högskolan i Borås HT10 Webbredaktörsprogrammet distans Formgivning av webbsidor. Projektarbete Solveig Betnér

Högskolan i Borås HT10 Webbredaktörsprogrammet distans Formgivning av webbsidor. Projektarbete Solveig Betnér Högskolan i Borås HT10 Webbredaktörsprogrammet distans Formgivning av webbsidor Projektarbete Solveig Betnér Innehållsförteckning Syfte s. 3 Målgrupp s. 3 Genre s. 3 Funktionalitet s. 4 Prototyper s. 5

Läs mer

Skapa cupsida i CuMap. Steg-för-steg manual

Skapa cupsida i CuMap. Steg-för-steg manual Skapa cupsida i CuMap Steg-för-steg manual Starta Cumap och Egen Cup-fliken, dubbelklicka på Webcumap: Lägg upp ny cup på webben Fyll i uppgifter om Cupens namn, första speldatumet, användarnamn/lösenords

Läs mer

Zimplit CMS Manual. Introduktion. Generell Information

Zimplit CMS Manual. Introduktion. Generell Information Zimplit CMS Manual Introduktion Detta dokument ger en överblick av Zimplit CMS (Content Management System) användargränssnitt och dess funktioner. (För mer information och hjälp-forum, se zimplit.org.)

Läs mer

Övning (X)HTML 2. Sidan 1 av 7 2010-11-11

Övning (X)HTML 2. Sidan 1 av 7 2010-11-11 Sidan 1 av 7 2010-11-11 Övning (X)HTML 2 Innan du börjar med laborationen ska du se till så att du har öppnat din editor (till exempel Notepad++). I denna editor ska du skriva (X)HTML-kod som du sedan

Läs mer

PROJEKTRAPPORT GRUPP 10

PROJEKTRAPPORT GRUPP 10 PROJEKTRAPPORT GRUPP 10 AD/ID: Oskar Kiviniemi oskarkiviniemi@gmail.com Projektledare: Mikaela Olsson mikaela-olsson@live.se Teknik-/ljud-/bild-ansvarig: Filip Edde Martinsson filipeddemartinsson@gmail.com

Läs mer

Designspecifikation BMK BOSTON. Rebecka Törngren Webbdesign med HTML och CSS 7,5hp (2IS202-Sommar14) Informatik och Media, Campus Gotland

Designspecifikation BMK BOSTON. Rebecka Törngren Webbdesign med HTML och CSS 7,5hp (2IS202-Sommar14) Informatik och Media, Campus Gotland Designspecifikation BMK BOSTON Rebecka Törngren Webbdesign med HTML och CSS 7,5hp (2IS202-Sommar14) Informatik och Media, Innehållsförteckning 1. Övergripande information 3 1.1. Arbetstitel för sajten

Läs mer

Introduktionsmanual till Design- / Utvecklarmodulen

Introduktionsmanual till Design- / Utvecklarmodulen Introduktionsmanual till Design- / Utvecklarmodulen Redigera utskriftslayouter och fönsterdesignen I den senaste versionen av System Bokhållaren (från ver 4.6 och senare), finns en helt ny avancerad funktion,

Läs mer

Grundläggande funktioner i CMS ifrån Argonova Systems, 2011.

Grundläggande funktioner i CMS ifrån Argonova Systems, 2011. Grundläggande funktioner i CMS ifrån Argonova Systems, 2011. Syfte Detta dokument tar upp grundläggande funktioner i Argonova Systems CMS i syfte att förbereda och stödja användaren, vid sidan av och inför

Läs mer

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum!

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Hur du implementerar ditt Hosted Newsroom I den här guiden kan du läsa hur du skapar ert Hosted Newsroom ert pressrum på er egna

Läs mer

En dansk version av detta dokument kan laddas ned här: http://itu.dk/ people/hagerman/retningslinjer.pdf (pdf, 500 kb)

En dansk version av detta dokument kan laddas ned här: http://itu.dk/ people/hagerman/retningslinjer.pdf (pdf, 500 kb) Denna guide är till för folk som gör hemsidor med Öresundsregionen som målgrupp. Vilket språk är bäst att använda sig av - danska, svenska eller eventuellt bägge? - eller kanske engelska? Hur riktar man

Läs mer

1 Allmänt. 2 Hur gör man. 2.1 Gå till lagets sida, Logga in genom att trycka på hänglåset

1 Allmänt. 2 Hur gör man. 2.1 Gå till lagets sida, Logga in genom att trycka på hänglåset 1 Allmänt Detta är den lilla instruktionen för att redigera innehållet för laget. För att få en lagsida skicka ett mail till webmaster, webmaster@vikingstad.nu Ange namn, epostadress och lag 1 ALLMÄNT...1

Läs mer

F1/S1 är en ny generation IT-skåp. En ny plattform för modulbyggda skåp. Snyggare, mer flexibelt och väldigt mycket stabilare.

F1/S1 är en ny generation IT-skåp. En ny plattform för modulbyggda skåp. Snyggare, mer flexibelt och väldigt mycket stabilare. F1/S1 är en ny generation IT-skåp. En ny plattform för modulbyggda skåp. Snyggare, mer flexibelt och väldigt mycket stabilare. 2 NYHET Våren 2014 lanserar Enoc System ett helt nytt IT-skåp en kapsling

Läs mer