Lisa Nerheims Kunskapsblogg

torsdag 8 oktober 2015

Examinations uppgift Skapa en E-handel

Skapa en E-handel med 30 redigerade bilder och en tydlig målgruppsbild. Jag valde att göra en webbutik med inredning. Då jag valde produkter som är väldigt på tapeten just nu så är min målgrupp är den trendinriktade. Kvinnor mellan 20-35 som håller koll på de senaste modet inom inredning.

Är tydlig med vem e-butiken är anpassad för och känner att mitt budskap har gått fram. Sidan är genomgående ganska svart och vitt med detaljer som gör att den är lättmanövrerad och tydlig.

Använde mig av plattformen hemsida24 som är väldigt enkel att förstå sig på och kan ändå bestämma väldigt mycket över layouten. De använder sig av den enkla tekniken drag and drop vilket fungerar väldigt smidigt. Klart man har stött på olika problem under uppgiftens gång med det är sånt som här till när man för första gången gör en egen hemsida. Rekommenderar varmt hemsida24 för en person som skall öppna en egen webbutik.

Sista dagen på kursen imorgon och det betyder redovisning av e-handelslösningen, bloggen skall vara färdig och html och css mappen skall skickas till vår lärare i en zip-fil.

Med detta sagt, TACK för denna erfarenhet!

//Lisa

måndag 5 oktober 2015

Html & Css del 2

Fredagen började med Html och Css del 2.

Tanken med uppgiften var att skapa:

4 html filer 1 ska heta index
4 bilder, 1-2 i varje html fil.
1 Css fil, motsvarande 4st rubriker, brödtext, färg osv.
Bilder i filformat jpg eller png

Använda sig av relativa sökvägar. Gör en mapp på skrivbordet där du lägger alla filer. Så det är lätt att hitta när du behöver använda de.

FTP- program(ladda ner gratis)
- Använder för att ladda upp filerna på en bestämd webbsida. (webbhotel)

Server- Hosting en plats du hyr på en server.

När du skall lägga länkar i i dina html filer lägg de under <head>

<Head> syns inte.

<Body> syns.

Blogga med Kvalite:

Vem är målgruppen? Ha någon i huvudet du skriver till.

Ex Stegvis, punktform.

Photoshop del 2, Gränssnitt och E-handelssystem

Torsdag börjades med att gå igenom Photoshop, markeringar, gränssnittsdesign och produktfoto.

Gränssnittsdesign & Interaktionsdesign:

Tips:

kolla in Pinterest för ett hemmagjort fotolabb. Gå in på DIY-PRODUCT-PHOTOGROPHY för att få lite tips på hur du med enkla hjälpmedel kan skapa ett litet fotolabb hemma.
Ett annat tips för att få kameran att stå helt still är att köpa en gorilla hand som håller i kameran.
Bygga en ljuslåda för ljussättning
Ställa in vitbalansen, Ställ in mot ett vitt papper tills det blir vitt.
Ställ in låg iso(ca 100) iso= ljuskänsligheten för ljussättning

Photoshop del 2. Vi testade olika markeringar. Att klippa ut bilder klistra in det i ett nytt lager. Såhär såg det ut för mig.

Vi skulle klistra in det så nästa lager blev ett png format(transparent). Vi använde oss av lasso och trollspöt i photoshop för att klipp ut och klistra in i nästa lager.

Spara i photoshop:

Spara i psp så alla dina lager finns kvar.
Spara i png för att kunna läsa dem transparenta filerna.
Spara för att kunna länka vidare till t.ex bloggen. Spara för webb.

På min dator så fick man gå in på exportera för att hitta spara för webben annars kan du trycka
alt+shift+cmd+S(save) för att spara.

Sen skulle vi klippa ut olika skor.

Företaget: Systembygge/E-handelssystem

Gamla Företag

Bi=Business intelligence/tittar inåt på de egna siffrorna. Samlingsbegrepp för färdigheter, tekniker, applikationer, processer och metoder för organisationer att förstå sin omvärld och verksamhet.

Ci=Competitive intelligence/vad som händer på marknaden. Kollar omvärldsanalys och konkurrentanalys

Mindre företag hyr oftas in folk, men större företag har oftas egna.
Affärsystem- Kundregister
Produktion- Import
Logistik- Lager- Distribution

Nya Företag

Digital närvaro- Olika tänk

Reklam
Webbshop
Webb
Blogg
Pop up butik
PR
App
Sociala medier

PR- strategi, det handlar om att andra skall prata om dig.

Presentationer av E-handelslösningar och Interaktionsdesign

Onsdag på vecka tre av kursen började med att vi skulle redovisa våra E-handelslösningar. Vi grupp hade målgrupp veganer. Såhär såg vår hemsida ut:

Så det vi gjorde var ju att vi skapade olika matkassar för veganer. Vi använde oss av plattformen hemsida24. Den var väldigt lätt att navigera sig runt på, konceptet var lite drag and drop i layouten och det gjorde att man kunde bestämma ganska mycket själv hur man ville att hemsidan skulle se ut.

De va kul och se klassens olika hemsidor, förvånad över hur duktiga alla i klassen är. Inte nog att det var grymma layouter även de dem "sålde" på sina sidor kändes nästan som det bara var att publicera och sätta igång. En grupp fick målgrupp män med skägg och dem hade gjort en jättebra sida som kändes färdigt för att strandsätta. Även gruppen med den gröna bilen var en fantastisk idé. Deras affärsidé var att hämta människor sopor som skulle återvinnas. Så man som privatperson skulle slippa åka och lämna. Väldigt kul och se klassens olika e-handelslösningar.

INTERAKTIONSDESIGN:

Om klick, attraktion och gamification:

Inter/aktions/design betyder med andra ord:

Mellan/handling/ge mening

Interaktionserbjudande:

T.ex köpknapp - knapp som gör att det händer något.

Anomali= Det som är annorlunda/skiljer sig.

Vi går alltid till skillnaden. Det är mest tilldragande för ögat och gör att det är de vi ser först.

GAMIFICATION:

Spelifiering inom verksamheter som inte traditionellt hör hemma med spelande.

Gamification av gränssnitt:

Olika typsnitt.

STEG 2/4 ÄR ETT ANNAT ALTERNATIV TILL GAMIFICATION.

T.EX Linkedin när du fyller i dina personliga uppgifter. Nu har du fyllt i 70% och har 30 % kvar är också ett exempel på enkel gamification.

Gazehawk Eye Tracking:

Företag som tittar på vad personen tittar på på skärmen. För att veta var saker och ting skall placeras på skärmen. Vilka färger som tilltalar osv.

Semiotik:
(Semeion=tecken,grekiska)
Samlingsnamn för teorier om och studier av tecken.

Vi fick en uppgift att leta fram hur olika bilder såg ut för oss:
Hur ser tillit ut?
Hur ser lycka ut?
Hur ser kvalité ut?

Intressant och se att det ser så olika ut för alla.

söndag 13 september 2015

Att jobba i Projekt

Fredagens lektion gick vi igenom hur det är att arbeta i projekt. Det finns olika organisationsformer såsom:

-Linjeorganisation
-Matrisorganisation

Linjeorganisation är man har en mer hierarkisk organisation med olika led i strukturen på företaget med chef som högst upp. Matrisorganisation är mer en platt organisation där man mer arbetar i olika projekt än i ett led. Alla arbetar på samma premisser, man kan ju ha en VD som bestämmer om projekten.

Ett sätt att att förbereda sig innan ett projekt är att utgå från modellen FIBA.

Formulera
Idégenerera
Bygga
Agera

Det har våran lärare tagit fram för att förbereda inför kommande projekt. Men ett bra sätt att förbereda sig innan.

Vi brainstormade fram olika målgrupper som vi sedan skulle välja ifrån.

Sedan blev vi mer eller mindre tilldelade målgrupper. Vår grupp kommer att rikta sig mot veganer. Sälja matkassar till veganer och även ha ett slags "skafferi" med andra varor som man kan handla med. Kommer att berätta mer när det är klart.

På eftermiddagen gick vi igenom vårt kommande projekt. Där vi skall starta (med modifikation) upp en e-handels sida. Använda oss av html och css. Photoshopa bilder och komma på ett företagsnamn.

Projektet skulle innehålla:

Värdegrundsdrivet (En speciell värdegrund på arbetsplatsen/företaget)
Cirkulärt (ansvarar för resurser, andra leden innan de kom hit, belastning för samhället)
E-handelsplattform

E-handelssplattformar och CSS

Torsdagen börjades med att vi blev uppdelade i grupper om ca fem personer i varje, där vi skulle kolla upp olika e-handelsplattformar som finns på marknaden. Hur många kunde vi hitta? Vår grupp hittade t.ex.:

Det fanns ju väldigt många olika, men det flesta är snarlika varandra. En dem open source alternativ, några grattis plattformar men när man väljer leverantör så tillkommer kostnader och den del som har färdiga paketlösningar där man betalar en månadsavgift på allt mellan 199-4195 kr så det finns massa olika paket att välja mellan. Vissa erbjuder också att man får välja fram sin egen design såsom layout mm.

Vi skulle leta efter stora/små och billig/dyr plattform. Hur ser spektrumet ut mellan dessa?

På eftermiddagen gick vi igenom CSS och det betyder Cascading, Style, Sheets. Och det är stilen och färgvalet på sidan man gör. Istället för att man använder "klammer" som man gjorde i html så använder man något som kallas för "måsvinge" och det ser ut såhär { } för att få fram dem på din dator så använder du shift+alt+8 och 9 på tangentbordet. Passa samma sätt så låser man koderna med dem eller avslutar något i kodningen.

Kolla in hemsidan http://www.w3schools.com/css/default.asp står massa koder du bara kan kopiera och klistra in istället för att skriva koder själv där du lätt glömmer något i kodningen.

De kan t.ex se ut såhär:

lördag 12 september 2015

Bloggenomgång och HTML

Onsdagen började med att gå igenom hela klassen bloggar. Det var väldigt kul och se hur alla andra hade gjort med sina bloggar, olika bloggportaler och utseeden.

Min tanke med bloggen är ju att kommande elever som kommer läsa Webb & Interaktionsdesign ska kunna lära sig något på min blogg. Så ska försöka skriva ännu mer ur lärande syfte, inte helt vad jag tycker. Utgå från vem är det som ska läsa min blogg och tänka på språket.

T.ex Photoshop är uppbyggt på det här sättet. Mer sakligt och konkret.

Vi gick igenom Feedbackmodellen PPPL och det står för:

-Positivt

-Potential

-Problemet

-Lösningen

Tänk på hur du framför feedback, detta är ett sätt du kan tänka på innan du ger feedback.

Vi gick också igenom SEO som står för Search Engine Optimazation om hur man skall synas på nätet. Ju fler etiketter och kategorier du använder dig av ju längre upp hamnar du vid sökning. Försök att tänka på vilken etikett skulle jag använda här.

HTML:

(Språk-webbprogramering)

På eftermiddagen började vi med html som står för Hyper Text Markup Language. Det var något helt nytt för mig och det är lite svårt att förstå sig på men det finns väldigt många bra hjälp program du kan kolla på.

Använde vi oss av när vi skulle testa olika html koder som redan var klara istället för att skriva dem olika koderna där det är väldigt lätt att glömma någon"klammer"(> eller<) Har nästan alla olika koder du kan tänkas behöva, bättre att kopiera ut därifrån.

http://www.w3schools.com

En bra sida som jag precis börjat kolla lite på men bra att veta om när du skall använda dig av html.

http://webdesignskolan.se/webdesign/index.php

Html språket skrivs med olika taggar, kan se ut såhär

Start <HTML>

Slut </HTML>

När HTML startar och när det slutar.

Det är viktigt att tänka på vart man vill ha taggarna.

Hedern är ju högst upp, bodyn i mitter och foten längst ner. Sen höger och vänsternav.

Header

Leftnav Body Rightnav

Foter

Om du skall skriva html och css (som jag kommer berätta mer om i nästa inlägg) så behöver du ladda ner olika program. Använder du dig av Mac så använder du TextWrangler och PC så använder man Notepad ++.