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

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

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

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

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

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

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 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Utredning: Responsiv webbdesign (RWD)

Utredning: Responsiv webbdesign (RWD) Utredning: Responsiv webbdesign Sida 1 (8) Utredning: Responsiv webbdesign (RWD) Förbehåll Denna utredning fokuserar på det som är närmast relaterat till responsiv webbdesign. Med andra ord kommer inte

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

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

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

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

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

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

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

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

Ö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

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

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

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

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

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

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

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

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

4 Kolumn Kalkylbladet är uppdelat i rader (horisontellt) och kolumner (vertikalt). Där dessa möts finns alltid en cell.

4 Kolumn Kalkylbladet är uppdelat i rader (horisontellt) och kolumner (vertikalt). Där dessa möts finns alltid en cell. Lathund för Microsoft Excel 1 2 9 4 Kolumn Kalkylbladet är uppdelat i rader (horisontellt) och kolumner (vertikalt). Där dessa möts finns alltid en cell. Innehåll Autofyll Celler Diagram Ändra diagramtyp

Läs mer

Responsive Web Design

Responsive Web Design Uppsala universitet Institutionen för informatik och media Responsive Web Design Ett fullvärdigt alternativ till plattformspecifik utveckling? Michelle Davis och Stefan Karlsson Kurs: Examensarbete 15

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

Mamut Open Services. Mamut Kunskapsserie. Kom i gång med Mamut Online Survey

Mamut Open Services. Mamut Kunskapsserie. Kom i gång med Mamut Online Survey Mamut Open Services Mamut Kunskapsserie Kom i gång med Mamut Online Survey Kom i gång med Mamut Online Survey Innehåll MAMUT ONLINE SURVEY... 1 KOM I GÅNG MED MAMUT ONLINE SURVEY... 3 MAMUT-ANVÄNDARE:

Läs mer

De största just nu är Facebook och Twitter. Även Google har lanserat ett, Google Plus.

De största just nu är Facebook och Twitter. Även Google har lanserat ett, Google Plus. Sociala medier De största just nu är Facebook och Twitter. Även Google har lanserat ett, Google Plus. Dessutom finns Linkedin, där man kan återknyta kontakten med gamla vänner och kollegor och StayFriends,

Läs mer

Portfolio. Mathias Andelin 2014

Portfolio. Mathias Andelin 2014 Portfolio Mathias Andelin 2014 1 Innehåll Responsiv design.............................................................. 3 Sektionsdata webb................................................................

Läs mer

Ramverk för responsiv design

Ramverk för responsiv design Ramverk för responsiv design En jämförelse mellan Bootstrap och Foundation Martin Stigzelius Examensarbete Förnamn Efternamn Mediekultur 2014 EXAMENSARBETE Arcada Utbildningsprogram: Mediekultur Identifikationsnummer:

Läs mer

Callisma (2 mån) Adam levererade en modern och plattformsoberoende webbplats som även är integrerad till en E-handelsplattform.

Callisma (2 mån) Adam levererade en modern och plattformsoberoende webbplats som även är integrerad till en E-handelsplattform. KONSULTPROFIL Adam Frontend-utvecklare Sammanfattning Adam är en senior frontend-utvecklare med tyngd på HTML, CSS och JavaScript. Han fungerar väldigt bra både i team och individuellt. Han drivs av att

Läs mer

ATT GÖRA WEBBSIDOR. Frivillig labb

ATT GÖRA WEBBSIDOR. Frivillig labb Numerisk analys och datalogi KTH 100 44 Stockholm Kerstin Frenckner, tel 790 7143, e-post kfrenck@nada.kth.se 2D1339 Programkonstruktion Hösten 2001 Datorintroduktion Frivillig labb ATT GÖRA WEBBSIDOR

Läs mer

Användning av pdf Vägledningen 24-timmarswebben

Användning av pdf Vägledningen 24-timmarswebben 1 (7) Användning av pdf Version 1.1 Uppdaterad: 2007-07-03 Användning av pdf I den här checklistan får du veta hur du skapar tillgängliga pdf-dokument. Checklistan är ett extramaterial till 1. Använd gärna

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

Frågor och funderingar? Hör av dig till: Britt Tågmark 019-58 82 13 eller 070-55 88 260 britt.tagmark@kumla.se. Senast ändrad 2009-12-14

Frågor och funderingar? Hör av dig till: Britt Tågmark 019-58 82 13 eller 070-55 88 260 britt.tagmark@kumla.se. Senast ändrad 2009-12-14 Frågor och funderingar? Hör av dig till: Britt Tågmark 019-58 82 13 eller 070-55 88 260 britt.tagmark@kumla.se Senast ändrad 2009-12-14 Innehåll BLANDADE LEXIATIPS...1 ÅTERSTÄLLNING AV LEXIA TILL URSPRUNGSLÄGET...1

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

Responsiv webbutveckling med Joomla

Responsiv webbutveckling med Joomla Responsiv webbutveckling med Joomla Pyry Strandén Examensarbete Informations- och medieteknik 2013 Pyry Strandén EXAMENSARBETE Arcada Utbildningsprogram: Informations- och medieteknik Identifikationsnummer:

Läs mer

Administrationsmanual för SCMS

Administrationsmanual för SCMS Administrationsmanual för SCMS Merea AB Box 69, 311 21 Falkenberg Tel: 0346-450 400 E-post: info@merea.se www.merea.se 1 Innehållsförteckning Inledning... 3 Skapa ny sida... 3 Skapa Nyheter...4 Redigera

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

Open24 Webtool. Inofficiell komplettering till manual

Open24 Webtool. Inofficiell komplettering till manual Open24 Webtool Inofficiell komplettering till manual Förord När detta skrivs är den officiella manualen knapphändig, speciellt beträffande bilder och tabeller. Jag har provat mig fram och hittat några

Läs mer

PRO Järbo Navigeringsguide

PRO Järbo Navigeringsguide PRO Järbo Navigeringsguide Startsida PRO Järbo Fliken Start i HUVUDMENYN är markerat. Vi befinner oss på webbplatsens STARTSIDA. Nyhetskarusellen - webbplatsens löpsedlar. Växla genom att klicka på vänstra

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

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

Manual HSB Webb brf 2004 03 23

Manual HSB Webb brf 2004 03 23 NYHETER Manual HSB Webb brf 2004 03 23 Nu kan man sätta en hemavdelning på ett arbetsflöde, så att det bara blir synligt från den avdelningen och nedåt i strukturen under en förening. Ett arbetsflöde blir

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

INSTALLATIONS MANUAL

INSTALLATIONS MANUAL INSTALLATIONS MANUAL www.caddirekt.se 2013-03-01 1 Innehåll CADdirekt VVS Installation... 3 CADdirekt VVS Registrering... 5 CADdirekt VVS Reparera installation... 7 CADdirekt VVS Flytta licens... 7 CADdirekt

Läs mer

URVAL AV UTFÖRDA FRILANSJOBB

URVAL AV UTFÖRDA FRILANSJOBB URVAL AV UTFÖRDA FRILANSJOBB Här följer information om ett urval av utförda frilansjobb. CONTENT MANAGEMENT- OCH GROUPWARE RAMVERK Kund: Sundance MD&M En modulär flashapplikation med en PHP och MySQL backend

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

MA NU AL. www.ftf.se. Mitt lokala FTF UPPDATERAD 2012-05-22

MA NU AL. www.ftf.se. Mitt lokala FTF UPPDATERAD 2012-05-22 MA NU AL www.ftf.se Mitt lokala FTF UPPDATERAD 2012-05-22 INNEHÅLL 1. Riktlinjer för Mitt lokala FTF 4 1.1. Inledning 4 1.2. Riktlinjernas syfte 4 1.3. Syftet med lokala sidor på FTFs webb 4 1.4. Sidor

Läs mer

Hemsideutveckling för Anjool AB

Hemsideutveckling för Anjool AB Beteckning: Akademin för teknik och miljö Hemsideutveckling för Anjool AB Christopher Gidlöf Maj 2012 Examensarbete 15hp B nivå Datavetenskap Internetteknologi Examinator: Carina Petterson Handledare:

Läs mer

Ehandelslösningars komma igång tips!

Ehandelslösningars komma igång tips! Ehandelslösningars komma igång tips! Här kan du få reda på allt du behöver för att komma igång och sälja dina produkter! Om du behöver redigera bilder kan du göra det gratis på www.pixlr.com (exempelvis

Läs mer

PLANERING MULTIMEDIAPROJEKTET FAMILJEN GURKA

PLANERING MULTIMEDIAPROJEKTET FAMILJEN GURKA PLANERING MULTIMEDIAPROJEKTET FAMILJEN GURKA Helene Brogeland Multimediaproduktion VT 2014 2014-05-15 1 Innehåll Inledning... 3 Designbeskrivning... 3 Syfte... 3 Målgrupp... 3 Beskrivning... 3 Ingående

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

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

Montania WebbPublicering administrerar din hemsida

Montania WebbPublicering administrerar din hemsida S O F T W A R E & S O L U T I O N Montania WebbPublicering administrerar din hemsida Nu kan vi på Montania erbjuda dig ett enkelt webbverktyg för att underhålla din webbplats. Många webbsidor är idag svåra

Läs mer

Gör en modern släktbok för CD eller webben

Gör en modern släktbok för CD eller webben Gör en modern släktbok för CD eller webben 21 Den traditionella släktboken består av ett antal tabeller och i bästa fall en grafisk stam- eller antavla, och man kan med ett register eller hänvisningar

Läs mer

Joomla CMS Del 2 av 2

Joomla CMS Del 2 av 2 JOOMLA 3 CMS GRUNDKURS DEL 2 AV 2 Innehåll Extern Struktur Menyer och Sidor Användare och Åtkomstnivåer Skapa en sida som kräver inloggning Moduler och Positioner Sökmotor och undermenyer Copyright Mahmud

Läs mer

Microsoft Office Excel, Grundkurs 1. Introduktion

Microsoft Office Excel, Grundkurs 1. Introduktion Dokumentation - Kursmaterial Innehåll 1. Introduktion 1.1. Programfönster 1.2. Inskrift och redigering 1.3. Cellformat 1.4. Arbeta med formler Kursövning E1.xlsx Egna Övningar E1E.xlsx - OnePRO IT, Bengt

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

Måldriven, informationscentrerad webbdesign

Måldriven, informationscentrerad webbdesign Måldriven, informationscentrerad webbdesign Linus Forsell Digitala Distributionsformer vid Högskolan Väst, Trollhättan, Sverige linus.forsell@student.hv.se 1 Abstrakt I den här essän kommer måldriven och

Läs mer

Mobile-first eller Desktop-first, en studie av utvecklingslösningar för responsiv web design

Mobile-first eller Desktop-first, en studie av utvecklingslösningar för responsiv web design UPTEC IT 13 012 Examensarbete 30 hp Augusti 2013 Mobile-first eller Desktop-first, en studie av utvecklingslösningar för responsiv web design Eduardo Castaneda Abstract Mobile-first or Desktop-first,

Läs mer

Responsiv webbutveckling med Drupal

Responsiv webbutveckling med Drupal Responsiv webbutveckling med Drupal Examensarbete Medieteknik 2012 Patrik Storm EXAMENSARBETE Arcada Utbildningsprogram: Medieteknik Identifikationsnummer: 3240 Författare: Patrik Storm Arbetets namn:

Läs mer

Uppdateramera. Tio tips för en bättre webbplats. PRODUKTIONSBYRÅ AB. 1 Krokedil Produktionsbyrå AB www.krokedil.se

Uppdateramera. Tio tips för en bättre webbplats. PRODUKTIONSBYRÅ AB. 1 Krokedil Produktionsbyrå AB www.krokedil.se Uppdateramera Tio tips för en bättre webbplats. PRODUKTIONSBYRÅ AB 1 Krokedil Produktionsbyrå AB www.krokedil.se Välkommen Här har vi samlat tio grundläggande tips som hjälper dig att skapa en effektivare,

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

Enkel Digital Skyltning

Enkel Digital Skyltning Enkel Digital Skyltning på några minuter... färdiga, enkla och stabila system från Enkel Digital Skyltning 105mm i litet format... Det finns enkel digital skyltning, med enkla genomtänkta system... Paketen

Läs mer

3.5 Visuell programmering

3.5 Visuell programmering 3.5 Visuell programmering Alla våra program hittills har varit C# Console Applications (sid 41) inkl. programmet MessageBox fast det genererade en grafisk meddelanderuta. Nu vill vi utnyttja grafikens

Läs mer

Kom igång med Web Editor

Kom igång med Web Editor Kom igång med Web Editor Index 1. Logga in på Web Editor 2. Välj en mall 3. Skapa din första sida 4. Lägg till fler sidor 5. Redigera en sida eller mall 6. Spara dina ändringar 7. Förhandsgranska och Publicera

Läs mer