Webb och Interaktionsdesign: september 2015

Vecka 39 - tisdag

Starta en webbshop

Under vår första träff med vår grupp som skulle starta upp en egen webbshop så startade vi med att "brainstorma" idéer som vi sedan "trattade" ner för att sedan på ett enklare sätt kunna välja ut de bästa idéerna.

E-handelplattform: wix.com

Företagsnamn; Gammel dags

Målgrupp; Pensionärer i åldern 63-75

Affärsidé; Vi erbjuder unga pensionärer att skapa nya bekantskaper och tillsammans

med dem avnjuta god mat.

Sedan lade vi upp vårat arbete på så vis att några skrev den informativa texten som skulle finnas på sidan och övriga jobbade med layout.

All layout och text skulle naturligtvis vara målgruppsanpassad så det var bara att se till att göra tydlig och läsvänlig text och layout.

Det som vi dock särskilde oss ifrån de övriga grupperna var att vi satte ihop en film som vi själva deltog i för att demonstrera vårt koncept!

Vecka 37 - fredag

Projekt - starta en webbshop
Dagen startade med att vi blev indelade i grupper, sedan blev vi tilldelade en uppgift som var att sammanställa en topp 25 - lista över de mest populära e-handelsplattformar som finns på marknaden just nu. Därefter skulle vi välja ut 5 - 10 stycken plattformar av de 25 och presentera för- och nackdelar med dessa inför klassen.

När presentationen var klar så skulle skriva ner så många målgrupper vi kunde komma på och sedan skulle varje grupp välja ut en av målgrupperna som vi rikta oss till i den sista uppgift vi fick den här dagen och det var att starta upp en kostnadsfri webbshop.

Målgruppen vår grupp valde var pensionärer 70+

Uppgiften skall presenteras om ca. 2 veckor så vår grupp bestämde oss för att träffas under kommande vecka och fram tills dess skulle alla ta fram olika förslag på vilken vara/tjänst som vi tycker att vår webbshop skall erbjuda.

Utgångspunkter i projektet är;

Cirkulärt - Komma fram till en lösningar/idéer som kan konkurrera på e-handelsmarknaden. En "Game changer".

Värdegrundsdrivet - Företaget skall vara värdegrundsdrivet

FIBA - projektmodell

För att kunna strukturera och planera arbetet av vårt projekt att starta en webbshop så gick vår lärare igenom en modell som kallas FIBA som just är ett hjälpmedel då man arbetar i projekt. Se beskrivning av FIBA som projektmodell nedan;

Formulera - Varför skall vi genomföra detta?

Sedan skall man;
Konvergera; Tratta ner
Divergera; Bredda
Idégenerera - Brainstorming.
Bygga - Här bygger man på varandras idéer.
Agera - Vad skall genomföras? Vem gör och ansvarar för vad?

Vecka 37 - torsdag

CSS - kod
Efter gårdagens genomgång av HTML-kod var det nu dags att gå igenom CCS-kod, Cascading Style Sheets. Skillnaden mellan HTML och CSS är att HTML-koden styr innehållet på en webbsida och CSS-koden är stilmallen av själva innehållet (HTML-koden). All CSS-kod kännetecknas med tecknena { runt om respektive CSS-tagg }.

Dagens uppgift var att var att nu skapa en ny fil med CSS-kod i programmet Notepad++ som vi använde oss av under gårdagens lektion då vi skapade en HTML-fil och sedan skulle vi länka in vår CSS-kod i vår HTML-kod.

Här ser du hur en typisk CSS-kod ser ut i Notepad++

Så här går man tillväga;
1. Skapa ett nytt blad i Notepad
2. Skriv in CSS-taggarna som ville användas som stilmall.
3. Döp CSS-filen och spara den på skrivbordet.
4. Sök efter den länk som behövs för att länka CSS till HTML online och ändra filnamnet till det filnamn som sparats ner på skrivbordet. (<link rel="stylesheet" type="text/css" href="filnamnet.css">)
5. Klistra in CSS-länken på den placeringen i HTML-koden som nedan.

HTML-koden;
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="filnamnet.css">
</head>
<body>
<h1>This is a Heading</h1>

Så här blev resultatet online av min kombinerade HTML - och CSS-fil.

Vecka 37 - onsdag

HTML - kod
Under dagens lektion fick vi grotta ner oss i hur en HTML - kod fungerar och HTML står för; HyperText Markup Language. Utan HTML kan inte en webbsida existera.
Koden består av taggar och element som har olika funktioner. All HTML-kod kännetecknas med <runt om respektive HTML-tagg>.

Uppgiften vi fick idag var att gå in och ladda ner Notepad++ som är ett program där man kan skriva in och öva på just HTML-kod och sedan skapa en fil med denna HTML-kod.

Här ser du hur en typisk HTML-kod ser ut i Notepad++

Funktioner olika taggar och element har i HTML - koden;
<!DOCTYPE html> = För att html - koden överhuvudtaget skall fungera.
<html> = Här börjar html - koden
<head> = Elementet <head> är huvudelementet där t.ex. titel, skript etc. kan innefattas.
<title>Sanna<title> = Titeln på sidan.
<body> = Innehåller headings (h) + paragrafer (p) (beskrivning finns nedan)<h1>Sanna</h6> = Textens storlek. (h1 är störst textstorlek och h6 är minst
<p>Sanna</p> = Paragrafer/stycken.
<a href="http://www.w3schools.com">Mer om HTML och CSS</a> = Länkning in till sajt.
<img src="bildnamn.jpg" alt="Berg" style="width:304px;height:228px;"> = Taggar för att kunna ladda upp och visa en bild.
</body> = Så här avslutar man body:n.
</html> = Så här avslutar man HTML - koden.

ÅÄÖ kan inte skrivas in direkt in i en HTML - kod utan man behöver använda följande skript nedan;
Å - Å
Ä - Ä
Ö - Ö
å - å
ä - ä
ö - ö

Vecka 36 - fredag

Bildredigering
Efter torsdagens fotografering så var det dags att börja med redigering av bilderna.

Den första redigeringen som gjordes var i appen "Snapspeed" och nedan ser ni både originalbilden och den redigerade bilden.

Original.

Redigerad bild.

Tips på hur man redigerar i "Snapspeed"- app
1. Ljusa upp bilden något.
2. Räta upp bilden.
3. Beskär bilden.
4. Skärpan bör kollas av.
5. Kolla av ljuset i bilden igen.
6. Vinjettering.

Photoshop
Under eftermiddagen i fredags så var det genomgång av Photoshop. Vi lärde oss att all bildredigering i Photoshop består av att man skapar olika lager. Se exempel nedan;

Allting i Photoshop handlar om att man skapar nya lager som placerar över orginalbilden.

I bilden till vänster så har jag skapat en ram runt om och skapat fält med annan färg som jag multiplicerat (gjort "genomskinliga) på orginalbilden.

Jag har även lagt på en text i ett nytt lager på orginalbilden.

I bilden till vänster så har jag frilagt en bild och det gör man genom att antingen använda sig av ett "trollspö" eller ett "lasso" i Photoshop.

Klicka här och läs mer hur man gör för att frilägga en bild.

Vecka 36 - torsdag

Blogg + fotografering

Under torsdagens lektion var det fotografering som gällde och till dagens aktivitet skulle alla som ägde en systemkamera i klassen ta med dem till lektionen.

Vår lärare Johan hade en kortare genomgång av vad man bör tänka på när man skall fotografera och en viktig sak som man skulle tänka på var "Tredjedels regeln" som handlar om vart man skall placera motivet som man skall fotografera. Se exempel på bild som jag tog nedan:

På eftermiddagen startade vi upp varsin blogg.