Kravspecifika.on, pappersprototyp & CSS

Save this PDF as:
 WORD  PNG  TXT  JPG

Storlek: px
Starta visningen från sidan:

Download "Kravspecifika.on, pappersprototyp & CSS"

Transkript

1 1ME321 Webbteknik 1 Lek0on 4 Kravspecifika.on, pappersprototyp & CSS Rune Körnefors Medieteknik Rune Körnefors

2 Agenda Veckoplanen Vecka 39 UppgiI U2 = L4+L5+L6 UppgiI U3 Allmänna kraven om CSS Läsanvisningar CSS Selektorer Enheter Centrering Visuella effekter Exemplet Gretas Blommor GarreVs modell Scope plane Kravspecifika.on Pappersprototyp för layout 2

3 Exemplet Gretas Blommor Från lek0on 3 Mål och målgrupp Intervju med beställaren - Främst inriktade på bukever och blomsteruppsävningar. - Vill behålla den gamla trogna kundkretsen på personer i årsåldern. - Vill nå nya yngre kunder. - Har många kunder som besöker den in.lliggande kyrkogården. - Erbjuda leverans av blommor via beställning på webbplatsen. - Webbplatsen ska vara klatschig, välkomnande och omfamna besökaren samt ha många bilder. Business goals E2er analys och avstämning med beställaren Mål för webbplatsen - Visa vilka produkter och tjänster som erbjuds. - Locka nya kunder.ll bu.ken. - Erbjuda online- beställning av blommor för leverans. - Tydlig informa.on med lävläst text och mycket bilder. - En webbplats som användarna oia återkommer.ll. Målgrupp - Tidigare kunder - Nya kunder - Online- kunder 3

4 Från lek0on 3 Mål och målgrupp Intervjuer Personas Fråga intervju 1 intervju 2 intervju 3 intervju 4 intervju 5 intervju 6 Var brukar du hemma hemma på jobbet hemma & på hemma hemma & på använda dator och jobbet jobbet Internet? Hur oia är du på webben? Vad gör du på webben? 1.mme om dan Betalar räkningar,.va på sidor om trädgård 2.mmar om dan Betala räkningar, spela spel 2.mmar om dan mer än 8.mmar om dan TiVa på personalinfo, uppdatera företagets webb ev par gånger per vecka Sköta bokningar, Betala arrangera möten, räkningar, skicka fakturor, chava med handlar kläder barnbarnen Brukar du gå in på Ibland Nej Vet inte Ja för av sidor för någon beställa.ll blomsterbu.k? konferenser på jobbet Ja då jag ska köpa blommor för något speciellt.llfälle 4.mmar om dan Spela spel, handla på auk.on Nej Användarnas behov - Se vad som finns i bu.ken. - Se var bu.ken finns och öppelder. - Se vad man kan beställa online. - Se priser, även alla.llägg som t.ex. leveransavgii. - Kunna beställa blommor online. - Kunna använda webbplatsen både på dator och mobila enheter. - Få erbjudanden, t.ex. vid helger. 4

5 Baserad på personas, intervju med beställaren samt analys av liknande webbplatser Innehåll Produkter ska visas med bild, namn och pris. Produkterna är kategoriserade i bukever, kransar och övrigt. Erbjudanden vid helger. Kravspecifika0on för Gretas Blommor Ingångssidan ska ha foto som visar bu.ken och öppelder ska anges. En sida som visar interiörbilder från bu.ken. En sida med presenta.on av personalen. Nyhetsflöde med nya produkter eller kampanjer. Webbsidorna ska ha företagets färger i nyanser av grönt och gult. Beställningsformulär där totalpriset hela.den visas. EV första utkast FunkIonellt Webbplatsen ska fungera både på vanlig dator och mobila enheter med en skärmstorlek ner.ll 320 pixels bredd. Bilder på produkter ska kunna förstoras. Man ska kunna sortera inom kategorierna på pris eller i bokstavsordning. Man ska kunna beställa bukever och kransar för leverans. Man ska kunna göra en fritextsökning på webbplatsen. 5

6 EHer avstämning med bu0kens ägare KravspecifikaIon Ändringar i blåv Innehåll - Produkter ska visas med bild, namn och pris. - Produkterna är kategoriserade i bukever, kransar och övrigt. - Erbjudanden vid helger. Veckans erbjudanden ska visas på ingångssidan. - Ingångssidan ska ha foto som visar bu.ken och öppelder ska anges. - En sida som visar interiörbilder från bu.ken samt kort presenta.on av personalen (namn och bild). - En sida med presenta.on av personalen. - Kontakpormulär. - Nyhetsflöde med nya produkter eller kampanjer. - Förslag på blommor eier vad de ska användas.ll, t.ex. födelsedag, begravning, etc. - Webbsidorna ska ha företagets färger i nyanser av grönt och gult. - Beställningsformulär där.lläggsavgiier och totalpriset hela.den visas. Vad ska finnas Vad ska man kunna göra FunkIonellt - Webbplatsen ska fungera både på vanlig dator och mobila enheter med en skärmstorlek ner.ll 320 pixels bredd. - Bilder på produkter ska kunna förstoras. - Man ska kunna sortera inom kategorierna på pris eller i bokstavsordning. - Man ska kunna beställa bukever och kransar för leverans. - Man ska kunna göra en fritextsökning på webbplatsen. Hur ska det se ut Grafisk profil - Webbsidorna ska ha företagets färger i nyanser av grönt och gult. - TypsniV Verdana (sans- serif), 12 punkter, svart färg för löpande text. - Verdana, kursiv s.l, mörkgrön färg för rubriker. Teknisk specifikaion - Ska fungera både på vanlig dator och mobila enheter med en skärmstorlek ner.ll 320 pixels bredd. - Ska fungera i webbläsarna Chrome, Firefox, Internet Explorer, Opera och Safari (även 5 år gamla versioner). 6

7 Resultat på plan 1 SammanfaKning Mål för webbplatsen - Visa vilka produkter och tjänster som erbjuds. - Locka nya kunder.ll bu.ken. - Erbjuda online- beställning av blommor för leverans. - Tydlig informa.on med lävläst text och mycket bilder. - En webbplats som användarna oia återkommer.ll. Resultat på plan 2 KravspecifikaIon Innehåll - Produkter ska visas med bild, namn och pris. - Produkterna är kategoriserade i bukever, kransar och övrigt. - Veckans erbjudanden ska visas på ingångssidan. - Ingångssidan ska ha foto som visar bu.ken och öppelder ska anges. - Interiörbilder från bu.ken samt kort presenta.on av personalen (namn och bild). - Kontakpormulär. - Förslag på blommor eier vad de ska användas.ll, t.ex. födelsedag, begravning, etc. - Beställningsformulär där.lläggsavgiier och totalpriset hela.den visas. FunkIonellt - Bilder på produkter ska kunna förstoras. - Man ska kunna sortera inom kategorierna på pris eller i bokstavsordning. - Man ska kunna beställa bukever och kransar för leverans. - Man ska kunna göra en fritextsökning på webbplatsen. Användarnas behov - Se vad som finns i bu.ken. - Se var bu.ken finns och öppelder. - Se vad man kan beställa online. - Se priser, även alla.llägg som t.ex. leveransavgii. - Kunna beställa blommor online. - Kunna använda webbplatsen både på dator och mobila enheter. - Få erbjudanden, t.ex. vid helger. Grafisk profil - Webbsidorna ska ha företagets färger i nyanser av grönt och gult. - TypsniV Verdana (sans- serif), 12 punkter, svart färg för löpande text. - Verdana, kursiv s.l, mörkgrön färg för rubriker. Teknisk specifikaion - Ska fungera både på vanlig dator och mobila enheter med en skärmstorlek ner.ll 320 pixels bredd. - Ska fungera i webbläsarna Chrome, Firefox, Internet Explorer, Opera och Safari (även 5 år gamla versioner). 7

8 DeVa hör inte.ll scope plane i GarreVs modell, men tas med nu, för av vi ska komma in på webbplatsens layout och CSS Första förslag på struktur och namn på sidor/länkar Webbplatsens struktur Förändrad struktur och namn, eier analys av andra webbplatser och koll mot personas 8

9 Olika delar av layouten Sidornas struktur och layout Sidhuvud Logo och bu.kens namn Sökfält Ruta för fritextsökning på webbplatsen Navigering Global navigering Lokal navigering Innehåll Huvudinnehåll Sidofält med t.ex. erbjudanden (endast ingångssidan) Sidfot Adress och öppelder En pappersprototyp kan an.ngen skapas i ev program (t.ex. PowerPoint), där man läv kan ändra storlek och placering på rutorna Logo Nav Footer Rubrik Main eller med papperslappar, som man kan flyva runt, för av testa olika layouter. 9

10 Prototypen med papperslappar, som kan flyvas runt. Förslag 1 Pappersprototyp för sidornas layout Förslag 2 Global navigering i en menyrad och dropdown- menyer för lokal navigering Förslag 3 Global navigering i en kolumn och popup- menyer för lokal navigering Global navigering i en kolumn och lokal navigering i expanderade undermenyer 10

11 ing n m r upo Olika lika sidor på o Pappersprototyp för sidornas layout Ingångssidan Vanligt ak sökrutan är i det övre högra hörnet Två kolumner för innehållet Övriga sidor Sidfot längst ner under innehållet Endast en kolumn för innehållet 11

12 Inrutning av layouten! "Grid Layout" Rutorna b strukturele lir sedan olika ment i HTM L- koden header search nav main content footer 12 sidebar

13 HTML- och CSS- kod Strukturen kodas i HTML blockelement (header, nav, main, footer och div) för de olika rutorna id- avribut i div, för av kunna referera.ll dem från CSS Första steget av s.lmallen S.l för varje block Börjar med olika bakgrundsfärger för av iden.fiera rutorna gretas-blommor4" index.htm" style.css" FortsäVning följer nästa vecka 13

14 Selektorer Lista på selektorer W3C: hvp:// css3- selectors / W3Schools: hvp:// Selektorer består av referenser.ll element avribut id pseudo- class pseudo- element kombina.on av ovanstående lekt4-ex1" 14

15 Enheter Lista på enheter W3Schools: hvp:// Vanliga anheter: px em % lekt4-ex2" 15

16 Centrering Begränsa bredden på elementet med width. SäV margin- lei och margin- right.ll auto. element {width:500px; margin- lei:auto; margin- right:auto;} element {width:500px; margin:0 auto;} 16

17 Visuella effekter Rundade hörn Skugga Opacitet lekt4-ex3" 17

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

Skeleton plane & Responsiv webbdesign med CSS

Skeleton plane & Responsiv webbdesign med CSS 1ME321 Webbteknik 1 Lek0on 6 Skeleton plane & Responsiv webbdesign med CSS Rune Körnefors Medieteknik 1 2016 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen U2 deadline Exemplet Gretas Blommor

Läs mer

HTML & Projektstrategi

HTML & Projektstrategi 1ME321 Webbteknik 1 Lek0on 3 HTML & Projektstrategi Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 38 HTML UppgiG U1 U1=L1+L2+L3 UppgiG U3 Läsanvisningar

Läs mer

Visuell design Bilder & färger

Visuell design Bilder & färger 1ME321 Webbteknik 1 Lek0on 8 Visuell design Bilder & färger Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 43 Läsanvisningar UpphovsräPslagen Kort sammanfapning

Läs mer

HTML & Projektstrategi

HTML & Projektstrategi 1ME321 Webbteknik 1 Lek0on 3 HTML & Projektstrategi Rune Körnefors Medieteknik 1 2017 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen UppgiE U1 = L1+L2+L3 UppgiE U3 Läsanvisningar Exempel Påbörja

Läs mer

Labora&on 3 HTML och struktur övningar/uppgi:er

Labora&on 3 HTML och struktur övningar/uppgi:er Labora&on 3 HTML och struktur övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Skapa em nym HTML-dokument I denna labora&on ska du skapa tre sidor, som

Läs mer

Labora&on 8 Formulär övningar/uppgi6er

Labora&on 8 Formulär övningar/uppgi6er Labora&on 8 Formulär övningar/uppgi6er 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1a. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en par dokument

Läs mer

Labora&on 4 CSS och validering övningar/uppgi9er

Labora&on 4 CSS och validering övningar/uppgi9er Labora&on 4 CSS och validering övningar/uppgi9er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument och skapa en mapp för U2 Till övningarna i denna

Läs mer

Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er

Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on

Läs mer

HTML5 Semantic. Informationen kommer från w3schools.com. En semantisk elementet beskriver tydligt dess betydelse för både webbläsaren och utvecklaren.

HTML5 Semantic. Informationen kommer från w3schools.com. En semantisk elementet beskriver tydligt dess betydelse för både webbläsaren och utvecklaren. Vad är Semantic Elements? HTML5 Semantic Informationen kommer från w3schools.com Semantik (av grekiska sema, "tecken") avser det vetenskapliga studiet av teckensystems innebörd och tolkning. Semantic elements

Läs mer

Laboration 2: Xhtml och CSS.

Laboration 2: Xhtml och CSS. Laboration 2: Xhtml och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en webbplats med layout, bakgrundsbilder, minst en meny och

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

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

/*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height: 100%; }

/*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height: 100%; } /*CSS document*/ /* nollställer margin för alla element*/ * { margin: 0; /*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height:

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

HTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015

HTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015 . HTML och CSS Eric Elfving Institutionen för datavetenskap 18 augusti 2015 Översikt 2/17 Introduktion HTML Syntax Vanliga element CSS Syntax Selektorer Kombinera HTML och CSS Webserver Introduktion 3/17

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

Ö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

Labbrapport: HTML och CSS

Labbrapport: HTML och CSS Labbrapport: HTML och CSS Utförd av: Natalie Olmosse Mailadress: natalie.olmosse@gmail.com Datum: 2015 12 18 Kursansvarig: Karin Fahlquist Övriga lärare: Ulrik Söderström Första inlämningen Resultat (Godkänd/Retur):

Läs mer

Labora&on 2 HTML och validering övningar/uppgi:er

Labora&on 2 HTML och validering övningar/uppgi:er Labora&on 2 HTML och validering övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det

Läs mer

21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html

21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html Stilmallar styra utseendet av webbplatsen DEL 1 Karin Fahlquist index.html recept.html frukt.html grönsaker.html 1 Samma kod olika utseende Olika exempel om layout: http://www.csszengarden.com/ Stilmallar

Läs mer

Föreläsning 4. CSS Stilmallar för webben

Föreläsning 4. CSS Stilmallar för webben Föreläsning 4 CSS Stilmallar för webben Innehåll 1. CSS, vad är det? 2. Repetition av HTML-element 3. CSS, hur, var, när? 4. CSS & arv? CSS Cascading Style Sheet Same, same, but different Samma innehåll

Läs mer

Visa och dölja element med JavaScript

Visa och dölja element med JavaScript Föreläsning i webbdesign Visa och dölja element med JavaScript Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Visa och dölja element Förändra elementets sdl för display eller visibility

Läs mer

Bilaga 1. Teknisk kravspecifikation

Bilaga 1. Teknisk kravspecifikation Bilaga 1 Teknisk kravspecifikation 5.5.2014 Webbplatsen 1. Allmänt Korsholms kommun arbetar aktivt för att vara en ledande tvåspråkig landskommun i Österbotten och har drygt 19 100 invånare varav 68,9

Läs mer

ORDLISTA WEBBDESIGN 100P

ORDLISTA WEBBDESIGN 100P ORDLISTA WEBBDESIGN 100P HTML- TAGGAR M.M. (DE BLÅFÄRGADE ORDEN ÄR OLIKA ATTRIBUT SOM HÖR TILL DE OLIKA TAGGARNA.) HTML Står för Hyper Text Markup Language och är en uppsättning markeringskoder.

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

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

Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg <h1> layout-tagg <font size="6">

Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg <h1> layout-tagg <font size=6> CSS { } Anne Diedrichs Medieteknik Södertörns Högskola Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg layout-tagg Kurslitteratur: Niederst Robbins, Learning

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

behövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare.

behövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare. 1 2 3 Grafisk profil reglerar grunddragen i utseendet (logga, färger, typsnitt) en helhet skapas Vi ska känna igen oss, vi ska förstå vad som avsändaren vill kommunicera. Kan vara svårt att direkt applicera

Läs mer

Användarmanual för webbapplikationen Fejjan för alla. Manualens version:1.0. Datum: 5 februari 2014

Användarmanual för webbapplikationen Fejjan för alla. Manualens version:1.0. Datum: 5 februari 2014 Fejjan för alla 1.0 Användarmanual för webbapplikationen Fejjan för alla. Manualens version:1.0. Datum: 5 februari 2014 Fejjan för alla gör det lättare för personer med olika typer av funktionsnedsättningar

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

Länkar och navigering

Länkar och navigering Föreläsning i webbdesign Länkar och navigering Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Hypertext Hyper [grekiska] över Hypertext Går över textens sekvengella flöde Referens

Läs mer

Kommunikation. Dator med webbläsare Förfrågan: Webserver. Returnerar HTML-kod

Kommunikation. Dator med webbläsare Förfrågan:  Webserver. Returnerar HTML-kod html och css Kommunikation Dator med webbläsare Förfrågan: http://www.umu.se Webserver Returnerar HTML-kod Webbläsare Chrome Firefox Internet Explorer Safari Opera Källa : http://www.w3schools.com/browsers/

Läs mer

Övning 1 Vi börjar med en vanlig html-fil där html används för både innehåll och utseende:

Övning 1 Vi börjar med en vanlig html-fil där html används för både innehåll och utseende: Uppsala universitet Institutionen för utbildning, kultur och medier IKT A HT 2009 Monica Langerth Zetterman 2009-09-23 Testa stilmallar Övning 1 Vi börjar med en vanlig html-fil där html används för både

Läs mer

Labora&on 1 Variabler och beräkningar övningar/uppgi9er

Labora&on 1 Variabler och beräkningar övningar/uppgi9er Labora&on 1 Variabler och beräkningar övningar/uppgi9er 1M322 Webbteknik 2, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns

Läs mer

Frågor och svar Gränssnittsdesign/Webbutveckling

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

Läs mer

Handledning till FC 12 på webben

Handledning till FC 12 på webben Handledning till FC 12 på webben Detta är en kortfattad handledning där vi går igenom de viktigaste funktionerna i nya FirstClass. Förändringen av FirstClass är kanske den största under de snart 25 år

Läs mer

F07 Stilmallar Dagens agenda

F07 Stilmallar Dagens agenda F07 Stilmallar Dagens agenda CSS, Stilmallar Lokala, interna, externa Selektorer - Taggselektorer - Klasselektorer - ID-selektorer Egenskapsarv Pseudo-klasser och element Kombinatorer Specificitet Stilmallar

Läs mer

Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt 850906-8550

Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt 850906-8550 Del 1 och 2 HTML/CSS Vi har fått i uppgift att göra en hemsida av eget val! Jag har bestämt mig för att skapa en hemsida åt en påhittad restaurang här i Umeå som inriktar sig på exklusiv nyttig mat och

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

Användbarhet. Bryt rätt regler. Nils Ehrenberg nils.ehrenberg@mah.se

Användbarhet. Bryt rätt regler. Nils Ehrenberg nils.ehrenberg@mah.se Användbarhet Bryt rätt regler Nils Ehrenberg nils.ehrenberg@mah.se Agenda Intro till Användbarhet Användbarhet på nätet Exempel Fyra dörrar Inlämningsuppgift Viktigt En skala Subjektivt Användbarhet /

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

Laborationsanvisning. HTML5 Laboration 6. Författare: Johan Leitet Version: 1 Datum: 2011-10-03

Laborationsanvisning. HTML5 Laboration 6. Författare: Johan Leitet Version: 1 Datum: 2011-10-03 Laborationsanvisning HTML5 Laboration 6 Författare: Johan Leitet Version: 1 Datum: 2011-10-03 Inledning I denna avslutande laboration ska du testa att märka upp en sida med de nya taggarna i HTML5. Mikroformat

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

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

Labora&on 7 Färger och bilder för webben övningar i Pixlr Editor

Labora&on 7 Färger och bilder för webben övningar i Pixlr Editor Labora&on 7 Färger och bilder för webben övningar i Pixlr Editor 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on

Läs mer

Inför prov 1 i webbdesign

Inför prov 1 i webbdesign Inför prov 1 i webbdesign Skapa ett grundläggande HTML-dokument sidtitel övriga instruktioner Grundläggande märken, samt hur de används startmärke

Läs mer

Användarhandledning. edwise Webbläsarinställningar 2012-10-24

Användarhandledning. edwise Webbläsarinställningar 2012-10-24 Användarhandledning edwise Webbläsarinställningar 2012-10-24 Sida 2/11 Innehållsförteckning 1 Webbläsarinställningar... 3 1.1 Internet Explorer Kompatibilitetsläge... 3 1.1.1 Inställningar för kompatibilitetsvyn...

Läs mer

Lektion 2 - CSS. CSS - Fortsätt så här

Lektion 2 - CSS. CSS - Fortsätt så här Lektion 2 - CSS I den här lektionen behandlas HTML och CSS. Det förutsätts att lektion 1 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML för att klara den här lektionen. CSS - Fortsätt

Läs mer

Övningar i bilder och färger

Övningar i bilder och färger Övningar i bilder och färger I dessa övningar ska du öva på att redigera några bilder för att anpassa dem till en webbplats. Bilderna kommer att beskäras på olika sätt, förändras i färguppsättning och

Läs mer

Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er

Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi

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

Content Management System. Publiceringssystem

Content Management System. Publiceringssystem Content Management System Publiceringssystem Vad är ett Content Management System (CMS)? Ett verktyg för att separera innehåll från presentation Skapa webbsidor utan att kunna html Låt många skapa sidor

Läs mer

Bildstorlekar i olika sidlayouter.

Bildstorlekar i olika sidlayouter. 2014-04-01 Sida 1 av 9 Bildstorlekar i olika sidlayouter. Innehåll Inledning... 2 Startsida... 3 Vanlig sida för förening... 4 Formulärsida... 5 Block i Karusell... 6 Block i Högerkolumn... 7 Nyhetsarkivet...

Läs mer

En stiligare portal Laboration 3

En stiligare portal Laboration 3 Laborationsanvisning En stiligare portal Laboration 3 Författare: Johan Leitet Version: 1 Datum: 2011-09-09 Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt

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

12 Webb och kurshemsidor

12 Webb och kurshemsidor 12 Webb och kurshemsidor Många lärare använder sig av kurswebbsidor eller egna personliga webbsidor som ett ställe att samla information och dokumentation kring sitt arbete. Om du ska skapa en webbsida,

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

Användarhandbok Mealman

Användarhandbok Mealman Användarhandbok Mealman Mars 2015 Innehåll 1 Idén bakom Mealman... 2 2 Varför och hur ska Mealman användas?... 3 3 Installation... 4 3.1 Spara Mealman som en app-ikon.... 4 3.1.1 Jag använder Internet

Läs mer

Grafisk Webbprofil. Skrivregler och grafiska riktlinjer för utformning och publicering av Sjökrogen bojens hemsida.

Grafisk Webbprofil. Skrivregler och grafiska riktlinjer för utformning och publicering av Sjökrogen bojens hemsida. 1 Grafisk Webbprofil http://users.du.se/~v10evawa/inlamningsuppgift_3/valkommen.html Skrivregler och grafiska riktlinjer för utformning och publicering av Sjökrogen bojens hemsida. Författare: Eva Wallin

Läs mer

Grafiska riktlinjer för e-tjänster. Enligt stadens nya grafiska profil - 2013

Grafiska riktlinjer för e-tjänster. Enligt stadens nya grafiska profil - 2013 Grafiska riktlinjer för e-tjänster Enligt stadens nya grafiska profil - 2013 Form Typsni!, färger och layout skapar igenkänning mellan stockholm.se och e-tjänster. Typsni! och färg Typsni! Stockholm

Läs mer

http://office.microsoft.com/sv-se/word/ha100444731053.aspx

http://office.microsoft.com/sv-se/word/ha100444731053.aspx 1. Öppna Word 2007 i 97-2003 2. Vilken Explorer har jag 3. Inloggning med Explorer 8 4. Sökväg till sidan 5. Ha två fönster öppna 6. Stilar 7. Storleksändra 8. Inklistring av text 9. Bilder till startsidan

Läs mer

Rensa cache-minnet hos din webbläsare

Rensa cache-minnet hos din webbläsare Rensa din dators cache-minne Helst ett par tre gånger i veckan. Annars är risken stor att informationen du får är inaktuell eller att du missar ny och väsentlig information. På de följande fyra sidorna

Läs mer

TDDD52 CSS. Färger. Färger 1/3/13

TDDD52 CSS. Färger. Färger 1/3/13 Jag önskar göra det lä0are för användarna genom a0 markera vissa delar med en annan färg? HTML är bra, men det är inte så snyggt? TDDD52 - CSS CSS regler och selectors gör a0 jag kan styla min HTML precis

Läs mer

Hja lp till Mina sidor

Hja lp till Mina sidor Hja lp till Mina sidor Vanliga Frågor Varför godkänner inte Mina sidor mitt personnummer trots att jag har prövat flera gånger och är säker på att jag skrivit rätt? Du behöver använda ett 12 siffrigt personnummer

Läs mer

03/12/2015. Logga in på: b.socrative.com eller ladda ner appen

03/12/2015. Logga in på: b.socrative.com eller ladda ner appen Logga in på: b.socrative.com eller ladda ner appen Använder Har skapat använt skrivit internet i webbsidor. CSS html. (stilmall). (nästan ) dagligen. 1 Dator med webbläsare Interne t Webserver Smartphon

Läs mer

Användarhandledning. edwise Webbläsarinställningar 2013-01-11

Användarhandledning. edwise Webbläsarinställningar 2013-01-11 Användarhandledning edwise Webbläsarinställningar 2013-01-11 Sida 2/14 Innehållsförteckning 1 Webbläsarinställningar... 3 1.1 Internet Explorer Kompatibilitetsläge... 3 1.1.1 Inställningar för kompatibilitetsvyn...

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

Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät

Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät Repetition Internet Hypertext Server och klient Föreläsning 2 HTTP HTML Internet Hypertext Många sammankopplade nät Text försedd med länkar till andra texter Gemensamma adresser T ex 10.10.0.1 Gemensamma

Läs mer

Content Management System. Publiceringssystem

Content Management System. Publiceringssystem Content Management System Publiceringssystem Vad är ett Content Management System (CMS)? Ett verktyg för att separera innehåll från presentation Skapa webbsidor utan att kunna html Låt många skapa sidor

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

Användarhandledning. edwise Webbläsarinställningar 2013-10-24

Användarhandledning. edwise Webbläsarinställningar 2013-10-24 Användarhandledning edwise Webbläsarinställningar 2013-10-24 Sida 2/22 Innehållsförteckning 1 Webbläsarinställningar... 3 1.1 Internet Explorer Kompabilitetsläge... 3 1.1.1 Inställningar för kompabilitetsvyn...

Läs mer

Manual Anvisningar vid annonsering på startsida i Ratsit 3.0.

Manual Anvisningar vid annonsering på startsida i Ratsit 3.0. Version 2.0 onsdag 12 oktober 2016 1 av 8 Manual Anvisningar vid annonsering på startsida i Ratsit 3.0. Kort beskrivning Instruktioner: Nedan finner du instruktioner kring hur du skapar wallpaper för ratsit.se.

Läs mer

En grundkurs i hemsidor och hur de är uppbyggda

En grundkurs i hemsidor och hur de är uppbyggda En grundkurs i hemsidor och hur de är uppbyggda Den här artikeln tänkte väldigt grundligt gå igenom koncepten kring en hemsida och hur den är uppbyggt, för att ge dig grundkunskap att bygga vidare på och

Läs mer

WinTid. Nyheter version

WinTid. Nyheter version 11.2.0 WinTid Nyheter version 11.2.0 Innehåll 1. OM DOKUMENTET... 3 1.1 DOKUMENTETS MÅL... 3 1.2 VEM ÄR DOKUMENTET SKRIVET FÖR?... 3 1.3 UPPBYGGNAD OCH FÖRVARING... 3 1.4 ANSVARIG FÖR UNDERHÅLL AV DOKUMENTET...

Läs mer

www.grade.com LUVIT LMS Quick Guide LUVIT Composer

www.grade.com LUVIT LMS Quick Guide LUVIT Composer www.grade.com LUVIT LMS Quick Guide LUVIT Composer LUVIT Composer LUVIT Composer är ett verktyg för att enkelt skapa snyggt innehåll direkt i LUVITs kurser. Verktyget innehåller designade mallar som du

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

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

Anvä ndärguide Nyä Expeditionsresor

Anvä ndärguide Nyä Expeditionsresor Anvä ndärguide Nyä Expeditionsresor Hjälpguide för att använda Wordpress och Nya Expeditionsresor.se 2014-08-10 Innehållsförteckning Logga in till Wordpress-panelen... 3 Skapa bildspel... 4 Färgkoder...

Läs mer

Att styla webbsidor. Nivå. Uppgiften

Att styla webbsidor. Nivå. Uppgiften Nivå 2 Att styla webbsidor All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club.

Läs mer

Skapa epublikationer för Webben & Mobila Enheter

Skapa epublikationer för Webben & Mobila Enheter emag PRODUKTION Skapa epublikationer för Webben & Mobila Enheter Med emag kan du omvandla statiska PDF-dokument till interaktiva on-linepublikationer för vanliga webbläsare och mobila enheter, och detta

Läs mer

Projektplan Magasinet

Projektplan Magasinet Magasinet agnes.walmstedt@gmail.com juliask_y@hotmail.com ludvig93@live.se Bakgrund Projektets förutsättningar Detta projektarbete görs inom Medieteknik A på Södertörns högskola. Projektets syfte är att

Läs mer

[Plats för ev. illustration] Projektrapport inom Datateknik, Webbanvändbarhet, 7,5 poäng. Webbplats. Bergsåkers Pensionärers Biljardklubb

[Plats för ev. illustration] Projektrapport inom Datateknik, Webbanvändbarhet, 7,5 poäng. Webbplats. Bergsåkers Pensionärers Biljardklubb MITTUNIVERSITETET Institutionen för informationsteknologi och medier (ITM) Lärare: Mikael Hasselmalm, Mattias Dahlgren Författarens e-postadress: mawe0507@student.miun.se Utbildningsprogram: Webbutveckling,

Läs mer

2011 Prislista. Din resa börjar här! www.escape360.com

2011 Prislista. Din resa börjar här! www.escape360.com 0 Prislista www.escape0.com Din resa börjar här! När det gäller resor är webben en överlägsen källatill information och inspiration. På ESCAPE 0º samlar vi de hetaste nyheterna och de bästa tipsen för

Läs mer

Labora&on 5 Dynamisk HTML och &mers övningar/uppgi=er

Labora&on 5 Dynamisk HTML och &mers övningar/uppgi=er Labora&on 5 Dynamisk HTML och &mers övningar/uppgi=er 1M322 Webbteknik 2, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns

Läs mer

Guide e-lista för ledare

Guide e-lista för ledare Innehåll E-lista på webben... 2 E-lista i mobil... 7 1 E-lista på webben Elektroniska Närvarolistan fungerar i följande webbläsare: Internet Explorer, Firefox, Chrome, Safari och Opera. 1. Länk och lösenord

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

CSS-övningar. 1. Grunder

CSS-övningar. 1. Grunder CSS-övningar 1. Grunder CSS Testa stilmallar Klasser Elementen div och span Ärvda egenskaper Mer om typsnitt, marginaler och mått Textdekor Fristående CSS -fil Attributet style Prioritetsordning hos stilelement

Läs mer

LISAM. Linköpings Universitet. Logga in. Du loggar in på Använd ditt LiU-id, användarnamn och lösenord.

LISAM. Linköpings Universitet. Logga in. Du loggar in på  Använd ditt LiU-id, användarnamn och lösenord. LISAM Logga in Du loggar in på http://lisam.liu.se Använd ditt LiU-id, användarnamn och lösenord. Din personliga sida (Min Sida) skapas första gången du loggar in så det kan ta en liten stund innan den

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

[Innehåll] Sida 2, Sida 3 - Persona Sida 4, Sida 5 - Persona Walk-Through Sida 6 - Reflektioner

[Innehåll] Sida 2, Sida 3 - Persona Sida 4, Sida 5 - Persona Walk-Through Sida 6 - Reflektioner [Innehåll] Sida 2, Sida 3 - Persona Sida 4, Sida 5 - Persona Walk-Through Sida 6 - Reflektioner [Rune Tennesmed] [Göran Hultgren] Profil Kön Ålder Arbete/roll [Kund] [Man] [46 år] [Sågverksoperatör] Personlighet

Läs mer

Manual för utskrift av pris och produktskyltar

Manual för utskrift av pris och produktskyltar Manual för utskrift av pris och produktskyltar Med Skyltdirekt.nu skapar du på ett användarvänligt sätt pris och produktskyltar. Alla i butiken kan skapa prisskyltar. Ingen datavana eller installation

Läs mer

Grafisk manual Version 1.0

Grafisk manual Version 1.0 Grafisk manual 2 0 / Innehåll 1 / Introduktion 1.1 / Syfte 2 / Grafisk manual 2.1 / Logotyp 2.1.1 Logotypens sammansättning 2.1.2 Storlekar & friyta 2.1.3 Användning 2.1.4 Strapline 2.1.5 Operatörslogotyper

Läs mer

Kom igång med FrontPage 2003

Kom igång med FrontPage 2003 Kom igång med FrontPage 2003 Skolorna i Kristianstads kommun har inte gemensam licens som med vissa övriga Microsoft-program utan licens måste köpas för varje dator som det ska installeras på. Din tekniker

Läs mer

Användarcentrerad design Structure plane (tredje nivån)

Användarcentrerad design Structure plane (tredje nivån) Webbteknik Användarcentrerad design Structure plane (tredje nivån) Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se " our concerns shi? from more abstract issues of strategy and scope

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

Skyltdirekt 08-550 029 79 www2.skyltdirekt.nu support@skyltdirekt.nu

Skyltdirekt 08-550 029 79 www2.skyltdirekt.nu support@skyltdirekt.nu Med Skyltdirekt.nu skapar du på ett användarvänligt sätt pris och produktskyltar. Alla i butiken kan skapa prisskyltar. Ingen datavana eller installation krävs. Skyltdirekt 08-550 029 79 www2.skyltdirekt.nu

Läs mer

Introducerande övningar i HTML

Introducerande övningar i HTML Introducerande övningar i HTML En webbsida består av en textfil som innehåller sidans text och koder i språket HTML, för att formatera innehållet. Har man bilder på sidan, så finns de som separata filer

Läs mer

Innehållsförteckning

Innehållsförteckning Innehållsförteckning Inloggning...3 Navigering... 4 Navigering 1. Globala menyn...5 Navigering 2. Verktygsfältet...5 Navigering 3. Navigeringsfönster...6 Navigering 4. Innehållsområdet...6 Navigering 5.

Läs mer