Att göra en egen e-handelslösning Vi fick i uppgift att göra en egen e-handelslösning och själva välja en målgrupp.
Jag började att komma på massor av olika målgrupper och idéer som t.ex. hippies, båtfolk, partyfolk och hundägare mm.
Efter att ha trattat ner kom jag fram till att jag ville vända mig mot unga kvinnliga hundägare. Jag har använt mig utav e-handelsplattformen Wix.com igen då jag tyckte att den var väldigt smidig att jobba med. (Vi använde oss utav denna plattform i vårt förra e-handelsprojekt när vi gjorde ”Gammeldags”).
Målgruppsanpassning
Jag har anpassat min sida till min målgrupp genom att använda mycket småhundar i mina inspirationsbilder och i loggan osv. Jag har även använt mig av färgen rosa på knappar och även i loggan.
Jag har gjort dessa valen för att unga kvinnor gillar generellt sätt rosa väldigt mycket samt att de tycker om mindre hundar.
Jag har samtidigt försökt att ha en ganska ”clean” sida för övrigt.
Bildredigering
Jag har valt att redigera mina bilder i Photoshop. Jag har tagit bilder från nätet då jag inte har haft möjlighet att ta egna bilder. Detta på grund av att jag inte har någon tillgång till en hund samt tidsbrist.
Jag har redigerat samtliga produktbilder genom att frilägga dem och göra dem transparenta. Jag har även lagt till min logga nere i högra hörnet.
Jag har även gjort så att alla mina produktbilder är 400 x 400 pixlar stora. Detta för att skapa en enhetlighet tillsammans.
De är enhetliga för de har samma storlek, samtliga bilderna är transparenta och de har alla loggan ”Hundra Saker” nere i högra hörnet.
Övriga bilder har jag också frilagt. De tre bilderna i mitt bildspel på framsidan har jag frilagt och sedan lagt på samma gråa bakgrund för att få en enhetlighet.
Hunden på loggan har jag också frilagt och sedan lagt till texten.
Hundbilderna inne på ”om oss” och ”kontakta oss” har jag också frilagt. Förutom bilden på de fyra hundarna, den har jag snott rakt av.
På förmiddagen idag så körde vi repetition av html och css. Mer om detta kan du läsa om i mina tidigare inlägg, se Html-kodning och E-handelsplattformar och CSS.
De filer du har skapat måste upp till en webbserver och då måste du ha ett FTP-program (File transport protocol), det ingår oftast i webbhotellet, men finns även gratis program. se t.ex. Filezilla Detta gör du för att få upp din sida på webben. Där kan man hyra en serverplats och det kallas hosting/webbhotell.
Tips! Ett tips är att man ska hålla sig till relativa sökvägar.
Samla alla html-filer, bilder och CSS-filen i samma mapp. Detta gör man för att de lätt ska hitta varandra. Bra att ha bilderna sparade i mappen så är det mycket säkrare. För skulle du t.ex. ta bilder från nätet så äger du inte bilden. Skulle den webbplatsen få för sig att ta bort bilden så åker den bort även på din sida.
Tänk också på att den första html-filen ska heta index.html.
Vi fick sedan en uppgift där vi skulle göra fyra html-sidor, en CSS-fil, minst fyra bilder och en länk. Vi skulle även länka mellan html-filerna på något sätt. Jag valde att länka alla till varandra samt att du kunde klicka dig tillbaka till sida 1. Se mitt resultat nedan.
Bloggande – Tips på saker att tänka på i en blogg som denna
Ha någon att skriva till i sitt huvud.
Av-/sändare – mottagare.
Sätt in dig i mottagarens sits (kallas för designtänkande) och vad vill hen höra? Sen hoppa tillbaka till dig själv och skriv ner.
Man är inte en ”privatperson”, undvik detta!
Tips för att undvika detta, skriv stegvis.
Tipsa om vart man kan lära sig mer.
Tips är att man kan läsa på andras bloggar för att få inspiration.
Tips! på inställningar i kameran – Låg iso, typ iso 100. – Kort slutartid – Högre bländare, t.ex. 8 = längre tid. – Använd gärna stativ eftersom du har låg iso. – Fixa till vitbalansen/vitbalansjustering.
Tips! när du ska fotografera produkter: Bygg en egen fotolåda med vita tunna väggar(t.ex. smörpapper) och lampor. Detta för att få ett snyggare ljus på produkten som du fotograferar.
Photoshop del 2 – Friläggning av bilder Idag startade vi dagen med att lära oss lite mer i photoshop.
Ett bra verktyg i photoshop är trollspöt. Detta kan du använda när du ska klippa bort t.ex. en bakgrund.
Tolerance ska vara hög så man kan få med mer bakgrund. Men då krävs det att det är bra kontrast, t.ex. ett grönt löv mot en vit bakgrund. Men är det en rörigare bakgrund som kan ha lite samma färg som objektet på sina håll så kan det vara bra att ha lägre tolerance. Får du inte med hela bakgrunden direkt så håller du inne shift och trycker ”runt” med musen så du får markerat allt du önskar.
Ta kopia på bakgrunden genom att dra din bild till ett nytt lager. Detta gör du i fall att det blir fel någonstans så har du alltid en kopia att luta dig tillbaka på.
Dölj sedan orginalet genom att trycka bort ögat på lagret.
Ta sedan delete på kopian så är du av med bakgrunden.
Bilden till vänster är orginalbilden och bilden till höger är efterbilden där jag har raderat bakgrunden efter att ha använt trollspöt.
Du kan även använda lasso-verktyget (Du väljer antingen magnetlassot eller vanligt lasso beroende på hur objektet ser ut) (Tips! Använd alt-knappen vid vanlig lasso så får du raka kanter). Du kan då ”fånga in” objektet och sedan gå in på select och välja ”inverse” så har du markerat bakgrunden. Sedan gör du på samma sätt som ovan (som vid Trollspöt) för att bli av med bakgrunden.
Missar du lite bakgrund så kan du sedan sudda ut detta med hjälp av suddgummit.
Utgå alltid med så stor suddgummi som du kan till en början, sedan när det blir pilligare så kan du minimera. Du kan sedan göra mjukare kanter på suddgummit, funktionen heter ”hardness”.
Detta gör vi för att kunna byta bakgrund/bli av med bakgrund för att alla våra produktbilder ska bli enhetliga.
Tips!på lite kommandon du kan ha nytta av när du gör dessa moment: Mellanslag så kommer handen upp Cmd/ctrl och +/- = zoom
När du ska spara filen och vill fortsätta med bilden senare så ta och spara i .psg så lagrena sparas.
Du kan, när du ska spara bilden, gå in på file – > Save for Web & Devices så kan du göra bilden bl.a. transparant. Välj då png-8.
Har du en nyare version av Photoshop så finns Save for Web & Devices under file -> Export.
Bildens storlek: 1280 pixlar är standard på skärmbredden.
De bilder vi kommer att jobba med kommer att vara max 1000 pixlar i bredden, oftast mindre.
Bra att tänka på är att alla dina produktbilder ska vara lika stora för att det ska se snyggt och enhetliga ut.
Image -> image size
Där kan du ändra bildens storlek.
Ha ”Constrain proportions” iklickad så att bredd och höjd anpassar sig efter varandra.
Tänk på att! Skala ner går alltid bra, men skala uppåt blir inte bilden lika bra. Den blir inte lika skarp.
Här var uppgiften att klippa bort bakgrunden och göra bilden transparant. Detta gjorde jag när jag gick in och Save for Web & Devices och valde png-8 och klickade i att den skulle vara transparant.
Vi fick även uppgift att klippa bort en himmel. Se före/efter ovan.
Här var uppgiften att ändra storleken till den samma och skala av bilderna så de såg enhetliga ut.
De är 400 x 400 pixlar stora.
System Hur systemen ser ut i de stora företagen.
Så här ser det ut i företagsvärlden:
BI/CI
Säljstödssytem
– Där finns det oftare gamifiction nu för tiden
Olika system:
BI (Business inteligence)= Hur ser det ut i mina egna siffror? Du kan använda den för att hitta rätt bland fakturor. Du kan titta innåt i siffrorna. Bra redskap för att leta bland siffror/fakturor mm.
CI (Competitive inteligence)= Hur ser det ut därute? Hur ser det ut på marknaden? Omvärldsanalys. Man kollar bland konkurrenterna.
Affärssystem – kundregister
– Information om kunderna
Logistik, lager och distribution
Produktion/Import
Digitala närvaron: Webshop
Web
Blogg
Sociala medier (Facebook, snapchat, Linkedin, Instagram, Twitter)
Nyhetsbrev
App
Reklam (Lite magrare)(även IRL)
PR (Public relations= Det handlar om att få andra att prata om dig) -gammal press
(Pop-up-butik) = IRL
Dessa kan vara bra att hålla koll på.
En bra ”uppgift” är att tänka ut hur man skulle kunna lansera sina egna produkter/tjänster utifrån dessa ”block”.
PR -> Bloggvärlden/Bloggsfären Ge en stor bloggare en gåva för att de ska skriva lite om mitt företag/länka till mitt företag. Samma gäller vloggarna.
Vloggarna = Videobloggarna
Vi fick i uppgift att tänka på hur vi skulle lansera våran produkt från vår e-handelsuppgift. Vi hade målgruppen pensionärer och vi valde att marknadsföra oss på det traditionella sättet via annonser i tidningar och tv-reklam. Detta på grund av att vi tror att det är det som fungerar bäst för vår målgrupp. För att göra billigare pr så tänkte vi att vi kunde ha ett event i t.ex. Nordstan där några pensionärer får testa på vårt koncept. Förhoppningsvis kan vi få någon journalist att skriva om oss så vi kommer i tidningen.
Vi kom även på i efterhand att vi hade kunnat göra våran e-handel som en gammal dagstidning. Hade dock varit svårt att lösa tekniskt på den korta tid och budget vi hade.
Redovisningar utav e-handel
På förmiddagen idag så fick alla grupper redovisa sina e-handelssidor.
Min grupp hade som sagt fått målgruppen ”pensionärer” och när vi startade detta projekt så började vi med att brainstorma idéer. Detta gjorde vi för att få ett stort urval och därefter komma fram till en bra idé efter att ha trattat ner idéerna.
Vi kom fram till att köra ett slags ”halv åtta hos mig”-koncept. Vi riktar oss till unga pensionärer. Fyra pensionärer som inte känner varandra sedan innan, ses under fyra dagar. Alla får vara värd en varsin kväll. Den kvällen som är deras värdkväll så får de hem en kock som hjälper och stöttar dem i matlagningen. Kocken tar även med sig maten så det enda de behöver tänka på är matlagningen och att ha trevligt.
När vi riktade oss till vår målgrupp på vår sida så tänkte vi på att minimera antal menyval, ha stora menyer samt ha stora och lättlästa texter.
För att underlätta ännu mer för dem så ville vi presentera våran affärsidé genom en film, se nedan.
Denna filmen gjorde vi för att äldre vill ha det lättare och tydligare. Och vad är tydligare än en film som visar hur det går till?
Sidan ser lite annorlunda ut på en PC än på en mac. Fliken ”more” finns inte utan det är fyra huvudkategorier; Hem, Bilder, Om Oss och Kontakta Oss.
Min del i detta projekt
I detta projekt så försökte vi att alla skulle vara med på det mesta. Vi hjälpte varandra och bollade idéer samt försökte att alla skulle få känna på det mesta.
Men det jag gjorde var att tillsammans med de andra bestämma layout, färg och typsnitt mm.
Sedan gjorde jag loggan i photoshop. Jag klippte ut en klocka med hjälp av magnetlassot och sedan skrev jag in vårt namn.
Sedan har jag även filmat filmen och klippt ihop den i Imovie. Jag la sedan på ett lager som gjorde att man fick ett intryck att filmen var äldre. Jag gjorde den lite snabbare än vad den ursprungligen var för att få en liten touch av hur en äldre film är. Jag la även på en låt i bakgrunden som var i det äldre stuket.
Jag har även skrivit texten ”Om oss”.
Alternativ till Photoshop
Efter redovisningarna så presenterade Johan lite alternativ för oss till Photoshop.
Det finns då Pixlr som är ett bra gratisprogram som är liknande photoshop. Du hittar det här.
Det finns även en hemsida som heter pixelmator.com som är ett bra alternativ och det hittar du här.
Den kostar dock 289 kr, men har du väl betalat summan så har du tillgång till det sen. Det är alltså ingen månadskostnad.
Tips! Ett bra tips är att även lära sig Indesign. Det är bra att kunna ute på arbetsmarknaden. Det är många som har det som krav nu för tiden.
Interaktionsdesign
Om klick, attraktion och gamification
En förklaring utav interaktionsdesign:
Inter (mellan) aktion (handling) design (ge mening)
Det handlar om att få besökaren att se det vi vill och klicka där vi vill.
Interaktionserbjudande: En köpknapp, en knapp man trycker på som gör att det händer något.
Animali: Det som är annorlunda
Man går alltid till skillnaden. Gör kontraster så attraherar knappen personen bakom datorn mer, och de vill då förmodligen klicka på knappen.
– fyra gråa fyrkanter, en är röd, vilken skulle du klicka på?
Förmodligen den röda, just för att den sticker ut.
Det som gör att en knapp kan sticka ut kan t.ex. vara:
Färg
Text
Bild
Form
Man behöver inte ha färg när man jobbar i form (stor – liten).
Gamification – Man använder element från spelens värld i en värld som inte är spelrelaterad.
Denna typ av gamification är trygghetsskapande.
Den kan man använda i alla processer som går i steg. T.ex. när man ska gå igenom steg i t.ex. köpprocess, steg 3 av 4.
.
Ett annat exempel av gamification är:
Coca cola har en kod som är på insidan av korken, denna kod krävs för att kunna delta i en tävling. De får därmed fler kunder att köpa en flaska.
Gränssnitt
Placering av länkar och vad det är du placerar.
Övre vänstra hörnet på en datorskärm tittar man generellt först. Det har lite att göra med att man läser från vänster till höger.
– Det är inte exakt likadant vid olika målgrupper.
Dinkare till exempel tittar förmodligen i vänstra hörnet.
Beror på vanor och platser du brukar vara inne på.
Den frågan vi behöver ställa oss när vi ska börja tänka på gränssnitt är:
Hur kommer min målgrupp att göra? Vad tittar hen på?
– Detta måste vi tänka på när vi designar sidor. Så man vet vart man ska placera olika saker som länkar och bilder mm.
.
För att klicka på en länk så är det bra att göra kontraster, t.ex;
-svart/vitt
-stora/små bokstäver
-kantig/rund
-rörlig/stilla
-högt/lågt
-vertikal/horintsiell
-randigt/rutigt
-kort/långt
-ny/gammal
-nära/långt bort
.
Detta kan Attrahera oss att klicka på knappen.
Placering på Interface
En ”Okej-knapp” måste inte sitta längst ner till höger. bara man gör samma hela tiden.
Då kan man lägga en ”Back”-knapp till vänster. Placeringarna på sådana sorters knappar är nästan alltid på samma ställe och då kan det vara bra att efterleva det så kunden känner sig trygg.
Vi fick i slutet av dagen en uppgift där vi skulle ta en bild som var sportig och placera en ”start”- och ”pause”-knapp samt en tillbaka- och fram-knapp.
Detta gjorde vi för att man ska få tänka på vart man placerar de olika knapparna och på så sätt visa att man har förstått det vi har gått igenom och pratat om.
Andra exempel på saker som får oss att reagera:
Rörelse/stilla (tio saker som står stilla utan en grej)
Stor/liten
Era exempel! (fet stil)
Anomalier = Det som skiljer ut sig
Vi fick sedan som uppgift att leta fram lite bilder som vi förknippar med vissa ord:
Hur ser tillit ut på en bild?
Hur ser ”lycka” ut på bild?
Hur ser ”kvalitét” ut på bild?
Vi började dagen med att gå igenom hur man ska jobba i projekt.
Vi gick även igenom olika organisationsformer;
– Linjeorganisation (uppbyggt som en triangel, hierkisk. många chefer på ”höjden”), ofta större företag.
– Matrisorganisationer, oftast mindre företag. mycket plattare organisation. Mindre chefer på ”höjden”, utan mer på ”bredden”.
Vår lärare och hans kollegoe har utvecklat ett bra tillvägagångssätt att jobba utefter i projekt. Det kallas för FIBA – Formulera Idégenerera Bygga Agera.
Formulera – varför ska vi göra detta? osv (För vem? -målgrupp) (vad?) (Vilken effekt ska uppnås?)(Vad är nyttan?)(Namn?)
Idégenerera – komma med massa idéer för att sedan ”tratta ner” (=konvergera>) (motsatsen är Divergera<; du kommer med fler idéer/bredda/göra det större)
Bygga – Bygga på deras andra idéerna, så idéen blir större/tydligare.
Agera – Vad ska göras ? dela upp ansvar och vem ska göra vad.
Du kommer inte hitta detta ute i arbetslivet men däremot varianter av detta tillvägagångssätt.
Vi använde oss av FIBA när vi gjorde följande;
Vi skulle sedan komma på massa olika målgrupper. Alla fick först skriva ner fem målgrupper var på en lapp och allt redovisades på tavlan. Nedan kan du se de olika målgrupperna som uppkom genom ett Tag cloud;
Vi trattade ner alla dessa målgrupper till några få;
Bridezilla, Stressade, Stadsbor, Dinkare(double income, no kids), Vegeterianer, Veganer, Miljöfolk, Specialkost, Gravida, Män med skägg, Rika, Pensionärer, HBTQ, Lowcarb
Vi valde sedan ut sju av dessa;
Män med skägg
Dinkare
Bridezilla
Specialkost
Pensionärer
Miljöfolk
Veganer
Vi delades in i sju olika grupper. Varje grupp fick en varsin av de ovan nämna målgrupperna. Uppgiften går ut på att varje grupp ska ha en affärsidé och göra en e-handel till sin målgrupp tills onsdag 30 september då detta ska redovisas.
Idag började vi lektionen med att göra en marknadsöversikt. Vi delades in i sex grupper där vi först fick ta ut ca 25 olika e-handelsplattformar i en bruttolista.
Sedan skulle vi ta ut 10 utav dessa för att därefter göra proetconta och välja ut fem stycken. Proetconta innebär att man ska ställa de olika alternativen mot varandra och väga styrkor- och svagheter, för- och nackdelar o.s.v.
Vi skulle även dela in dem i billiga/dyra, stora/små och utefter affärsmodeller.
Vi fick sedan gå upp grupp för grupp och redovisa de fem olika e-handelsplattformarna för resten av klassen.
Här är några av de e-handelsplattformar man kan använda sig av; Wikinggruppen Textalk Ticktail Prestaworks
På eftermiddagen fortsatte vi med CSS(Cascadins Style Sheets). Även här kan man jobba i Notepad++ precis som när man jobbade med html.
CSS berättar för html hur dokumentet ska se ut. T.ex. om du har 42 HTML-sidor så kan du ha ett css-dokument som styr alla dessa HTML-sidorna. t.ex. om du vill ändra färgen på rubrikerna i alla HTML-sidorna.
Du ser skillnad på html och css så här;
<html> – har ”<”
{css} – har ”{”
<style> = Betyder att det är CSS (<html> betyder html)
För att få CSS dokumentet att prata med html dokumentet så måste följande stå inom <head> och </head> i html-dokumentet;
<link rel=”stylesheet” type=”text/css” href=”test.css”>
Där ”test.css” står ska man skriva in vad ens CSS-fil heter.
Detta ska stå med i varje html-fil för att de ska följa CSS-filen.
Så här blev det för mig när jag skapade en CSS-fil som pratade med ett html-dokument;
Idag började vi med att redovisa våra bloggar för klassen. De flesta har valt att jobba i Blogspot och WordPress. Jag valde själv WordPress just för att man har många möjligheter att utöka bloggen och man kan koda med html.
På eftermiddagen började vi med att gå igenom bl.a. html.
Vi gick även igenom vad SEO innebar. Det är en förkortning för Search Enginge Optimazation. Detta använder man sig av för att folk ska hitta till just min sida. För att få folk att hitta till min sida så gäller det att ha bra rubriker och tagga inläggen samt länka till andra sidor. När andra börjar länka till min sida så ökar min ”synlighet”. Allt handlar om att få Google att ”gilla mig”.
Olika kanaler att nå ut till kunden:
PR Sociala medier Reklam
E-handel Web Blogg
Nyhetsbrev
Html = Hyper Text Markup Language = Språk som hanterar länkar
Med bl.a. html-koder så bygger du upp en hemsida. Den är ofta uppbyggd med;
Header
Leftnav Body Rightnav
Footer
Beronde på om du använder PC eller Mac så finns det olika program som är mer fördelaktiga att använda sig utav;
PC= Notepad++
Mac= Textwrangler
Start: <HTML> <h1> <p> <h3>
Slut: </HTML> </h1></p></h3>
När du ska koda i html så måste du skriva med start och slut enligt ovan. Man måste ha med ett slut för annars fortsätter det kommandot hela texten ut. Om jag t.ex. vill ha ett ord i fet stil så måste det ha ett stopp annars fortsätter den feta texten sidan ut.
Det är alltså det som befinner sig inom taggarna som påverkas av koden.
Tips! Om du ska ha med ”åäö” i din text så måste du skriva <meta charset=”utf-8″> inom <head> och </head>, annars blir det bara konstiga tecken istället för ”åäö”.
Tips! Ett annat tips är att lära sig kortkommandon för att kunna jobba snabbare. Finns några exempel; * ctrl + A = Markera allt * Alt + tab = Skifta mellan fönster * ctrl + Z = Ångra
När du sedan ska spara din html-kodning så är det viktigt att du sparar filen i html-format. När du ska lägga upp kodningen på en hemsida så är det viktigt att du sparar första html-filen med namnet ”index”, detta för att browsern ska hitta filen. Har du bilder mm i kodningen så är det bra om du sparar filerna i samma mapp. Spara ner bilderna istället för att länka från webben. Detta är bra att göra för om ”ägaren” till bilden tar bort bilden på sin sida så åker bilden bort från din sida också.
Vi tränade mycket på att göra olika funktioner genom att kolla på w3schools
Här kommer bilder på resultatet från dagens kodning:
Vi lärde oss göra länkar och lägga in bilder. Jag googlade sedan själv fram olika koder. bl.a. så kan ni se ovan det svarta fältet med vit text ”Linn Finnstam”. Denna text rörde på sig fram och tillbaka.
Jag valde även en rosa bakgrund, ändrade färg på texterna, centrerade texten, gjorde fet text och la även in linjer.
Jag la även in en musikvideo.
Jag la in en nedräkning till 2020.
”Nu var det slut” rör på sig zick zack upp och ner från vänster till höger.
Så här såg min kodning ut:
<!DOCTYPE html> Denna kod krävs för att html-kodningen ska fungera <html> Detta betyder att här börjar html <head> Det som skrivs inom <head> syns inte direkt utan där finns t.ex. script och titel. <meta charset=”utf-8″> Detta krävs för att du ska kunna skriva ”åäö” <title>Hello World</title> Titel </head> <body> Här börjar själva sidan som syns <body style=”background-color:pink”> Ändra bakgrundsfärg
<head> alert(”Välkommen till Linns sida!”)</head> Här är en kod jag hittade på nätet. När du kommer in på min sida kommer det upp ett slags pop up-fönster som säger ”Välkommen till Linns Sida!”. <font face=”TimesNewRoman”><span style=”font-size: 10pt; text-decoration: none”></span></a></font> Ändring av typsnitt och storlek på text
<h1>Hello World</h1> Head 1
<center> Centrering <table style=”background-color:white;”> <tr style=”background-color:pink;color:#DC143C;”> <th>Linn</th><th>Finnstam</th></tr><tr><td>Handelsakademin</td><td style=”background-color:pink;”>EB15GB</td></tr></table> </center> Kodningen ovan var också en kod jag hittade på nätet. Du hittar den på bild 1 ovan under ”Hello World”
<center><marquee behavior=alternate width=”202″ scrollamount=”8″ scrolldelay=”95″ height=”37″ bgcolor=”#purple”><font color=”white”><b>Linn Finnstam</b></font></marquee></center> Texten rullar <h3><center><I><font color=”#DC143C”>Välkommen</font></i></center></h3> <p><b><center><font color=”purple”>Jag har skrivit mitt första Html.</font></center></b></p>
Två olika sätt att lägga in en musikvideo, antingen länka eller lägga in hela videon på sidan.
<hr> <center> today = new Date(); BigDay = new Date(”December 25, 2020”);
msPerDay = 24 * 60 * 60 * 1000 ; timeLeft = (BigDay.getTime() – today.getTime()); e_daysLeft = timeLeft / msPerDay; daysLeft = Math.floor(e_daysLeft); e_hrsLeft = (e_daysLeft – daysLeft)*24; hrsLeft = Math.floor(e_hrsLeft); minsLeft = Math.floor((e_hrsLeft – hrsLeft)*60); document.write(”There are only ” + daysLeft + ” days ” + hrsLeft +” hours and ” + minsLeft + ” minutes left Until December 25th 2020 ”); </center> Här är nedräkningen som jag hittade på nätet
<marquee behavior=”alternate” direction=”up” width=”80%”><marquee direction=”right”><B>Då var det slut</B></marquee></marquee> Även denna kodning hittade jag på nätet och den får texten att gå upp och ner.
Bilden ovan gjorde jag genom att ta en bild på en strand. Jag la sedan till en bild på en drink som jag klippte ut genom att använda mig utav magnetlassot. jag la ihop de två lagerna och skrev till en text.
Om Photoshop Photoshop är ett professionellt bildbehandlingsprofram som är framtaget av Adobe.
En stor fördel med Photoshop är att du kan använda dig av lager. Det är bra att få in vanan att skapa ett nytt lager när du ska göra en förändring.
Lager är bra att använda sig av på grund av att du kan ha olika delar av en bild på separata lager så man på så vis kan redigera delar av bilden utan att övriga delar av bilden berörs. På så sätt är det lätt att korrigera eventuella misstag.
Tips! Tips på bra kortkommandon du kan ha bra användning av; ctrl/cmd + (+/-) = Zooma in och ut ctrl/cmd + mellanslag + klick med musen= Du får fram en hand och kan klicka dig runt på bilden ctrl/cmd + Z = Ångra den senaste ändringen (Vill du ändra mer än ett steg så får du backa bak i historiken alternativt ctrl/cmd + Alt + Z) ctrl/cmd + C = Kopiera ctrl/cmd + V = Klistra in
Ett bra ställe att lära sig mer om vad du kan göra i Photoshop är på Moderskeppet.se.
Denna bild har jag lagt på två färgfilter och en linjeram. Så här gjorde jag;
Färgfilter
Jag började med att markera hela bilden som jag ville ha ett färglager på.
Jag skapar sedan ett nytt lager och går därefter in på Edit -> Fill.
Jag tar sedan ”Use” och väljer ”Color”, där kan jag välja vilken färg jag vill ha, i detta fall lila.
Då blir hela bilden lila, för att få den genomskynlig så gick jag till lagret nere i högra hörnet. Där finns det i en liten rullgardinsmeny ”normal”, ändra detta till ”multiply”.
Linjeram
Sedan gjorde jag linjeramen och då markerade jag bilden och skapade ett nytt lager.
Sedan gick jag in på Edit -> Stroke. Där kan jag ändra tjocklek på linjen, här ändrade jag till 10 px på ”width”.
Under så kan jag ändra färg också och sedan ”OK”.
Sedan tar jag ”free transform” och håller inne ”shift” och drar in linjeramen så den är något innanför bilden.
Snapseed & fotor.com Snapseed & fotor.com är två bildredigeringsprogram som jag verkligen kan rekommendera. Båda är dessutom kostnadsfria. Snapseed hittar du bland appar i App Store och fotor.com finns på nätet.
Snapseed
Du kan finjustera dina bilder genom att ändra ljusstyrka, kontrast, mättnad m.m. Du kan även använda dig av de färdiga filter som du kan lägga på bilderna. En annan bra funktion är punktredigering. Du kan välja ut specifika delar som ska förändras i din bild utan att hela bilden påverkas.
Att tänka på när du redigerar;
1. Ljus
2. Gör bilden rak
3. Beskär
4. Skärpa
5. Ljusa upp specifik del om detta behövs
6. Vinjettering
Fotor.com Du kan göra ungefär samma redigeringar som i Snapseed.
Dag 2 börjades med datorfix. Vi hämtade datorer och fick installera Chrome och Firefox, därefter fick vi även ordna med en ”moln-tjänst”. Jag valde då att använda mig av Dropbox.
Vi fick sedan en uppgift, vi fick tre post-it-lappar var där vi skulle skriva ner tre olika färdigheter vi hade. Detta redovisades sedan utav Johan framme på tavlan.
Med klassens alla färdigheter skulle vi sedan göra tre olika digitala tag clouds. En billig, en dyr och en färgstark.
För att göra ett tag cloud så fick vi googla fram olika tag clouds creators som vi kunde använda oss av. När jag skulle skapa ett tagcloud så skrev jag in varje färdighet, fanns det flera av en färdighet så skrev jag in den flera gånger. Om det t.ex. var fem personer som var duktiga på att sälja så skrev jag: sälj sälj sälj sälj sälj.
Tips!En bra sida att göra tag clouds är Tagel.com. För att hitta mer tag clouds så kan du googla ”tag cloud creator”.
Tag clouds kan vara fördelaktigt att använda sig utav när du t.ex. gör en marknadsundersökning. Du ser lätt vilka svar som flest svarat samma på när de t.ex. fått en fråga om vad förknippar ni vårt företag med?
Detta blir tydligt genom att det svar som fått mest klick blir störst i tag cloudet.
Den billiga:
Den dyra:
Den färgstarka:
På eftermiddagen så gick vi igenom olika bloggsidor som var okej för oss att använda oss av. Vi ville åt de bloggsidor som hade så lite reklam som möjligt. Det var här jag tog beslutet att använda mig utav WordPress.com. En annan fördel var att man kunde använda sig av html-kodning i WordPress.
Vi gick sedan igenom hur en kamera fungerar och vad vi kunde använda för funktioner på kameran för att ta bilder. Vi gick även igenom vad gyllene snittet var för något.
Gyllene snittet går ut på att en bild ska vara uppbyggd av tredjedelar. Ska du t.ex. ta kort på en blomma så ska man inte ha blomman i mitten av kortet. Det kan vara mycket snyggare om man har blomman en tredjedel in i bilden.
Sedan var det dags att fotografera. Två och två så fotade vi varandra och vi hade tidigare gått igenom vad man skulle tänka på när man själv blev fotograferad. Du ska inte ha huvudet på sne utan rakt. Du ska även tänka på att sträcka på dig som att du hade något på huvudet som drar dig uppåt.
Vi la sedan in bilderna i våra molntjänster så vi lätt kunde ta upp bilderna dagen efter för redigering.
Välkomma till min blogg!
Här kommer jag att blogga om vad vi gör på kursen Webb och Interaktionsdesign.
Denna kurs kommer att vara först i två veckor. Därefter kommer vi att ha en ”paus” i några veckor för att sedan ha ytterligare två veckor.
Dag 1 så började vi presentera oss inför vår nya lärare Johan och för klassen. Vi hade 30 sekunder på oss att göra denna presentation och då skulle man hinna få med det viktigaste om sig själv.
Resten av dagen spenderade vi genom att gå igenom hur kursen är uppbyggd och vad som är planerat för varje dag.
Vi fick även en uppgift till denna dag där vi skulle presentera tre appar. Jag valde att presentera följande appar;
En app jag tycker om: Runkeeper
I denna app kan du ställa in om du t.ex. ska springa eller gå en runda så kan du se i efterhand hur bl.a. lång sträckan blev.
Jag valde denna app då jag tycker det är bra att hålla koll på hur långt jag har sprungit/gått, hur snabbt det gick, samt hur många kalorier man har bränt.
En app jag använder mycket: Sonos
Jag valde denna app på grund av att det är en app jag båda använder mycket och tycker väldigt mycket om.
Här måste du ha köpt högtalare som du synkroniserar ihop med appen. Därefter kan du styra musiken från appen samt i vilket rum du vill spela musik (om du har flera hötalare). Du kan t.ex. spela en låt i ett rum och en helt annan låt i ett annat rum, samtidigt. Allt detta styr du enkelt från appen.
Denna app använder jag dagligen, så fort jag är hemma så åker musiken på. Jag kan varmt rekomendera denna app!
En app jag inte tror mina klasskamrater känner till; SmartHalo
Denna app finns ännu inte på marknaden utan förväntas komma våren 2016.
Den går ut på att du installerar en ”puck” på styret. Därefter skriver du in vart du ska i appen, sedan visar ”pucken” dig vart du ska genom ljussignaler. Det är alltså en slags cykel-gps. Den har även en del andra funktioner som t.ex. inbyggt inbrottslarm om någon försöker sno ”pucken”, du kan se hur många kalorier du bränt samt att den ger ifrån sig en signal om din mobil ringer.
Linn Finnstam 
