Examen Redovisningsdag!

jooo Såhär blev mitt slutresultat, Screen Eyes. Klicka på bilden. Mer info finns i Lektion 10.

Idag hade alla i klassen sina presentationer, väldigt kul och få höra allas idéer och vad alla har lärt sig. Jätte duktiga allihop!

Fix; Jag har fixat till lite i min blogg idag, osynligt för er kanske. På detta temat som jag har så är det en hel del begränsningar därför jag har bråkat lite med wordpress och widgets men har lagt till länkar till alla i klassen som också gjort bloggar, Om mig, taggar finns om man går in på inläggen, försökt rättstavat inlägg och letat efter särskrivningar och mycket sånt smått. Scrolla gärna ned och tar dig en titt .

taggcloud

Nu har jag mycket mer kunskaper att fylla i ett taggcloud efter kursen, ser väldigt mycket annorlunda ut än vad det gjorde i början av kursen. Kul har det varit!

Prova och gör ett taggcloud här du också för att se vad du har fått för nya kunskaper av att följa min kunskapsblogg.

Lektion 10, E-handelslösning

screen eyes

App logga

Gör en egen e-butik 

Kursen närmar sig slutet och jag har lärt mig massor på bara dessa veckorna, hoppas ni har gjort det också? Som sista inlämningsuppgifter skall vi skicka in vår hemsida byggd i Css & Html, enskild e-handelslösning plus presentation på 3 min utav den, bloggen och ett sammanfattnings brev.

Inläggstips!

Snabbast och enklast för att få en e-butik på webben. Så här gör du på Wix;

  1. Du blir skapar ett konto.
  2. Välj mall.
  3. Såklart om du vill kan du enkelt byta färg och typsnitt osv.
  4. Alla funktioner är enkla och på svenska med tips rutor (dra och släpp funktion). Finns även appar att lätt ladda ner på Wix med olika special funktioner.
  5. Byt ut bilderna och text till dina bilder och textstycken.
  6. Det finns redan ifyllt på vad rutorna kan innehålla.
  7. Lägg till betalningslösningar som du önskar.
  8. Förhandsvisa och se om allt funkar, vill du ändra något gå tillbaka och jobba i redigeraren igen.
  9. Nöjd? klicka på publicera.
  10. Grattis!

tvappEtt smakprov från Screen Eyes nyhet.

Mitt arbete: På grund av sjukdom i x antal dagar så blev det intensivt plugg dessa två dagarna med att göra min E-handel. Mitt koncept är kanon bra som jag har uppfunnit och ligger före vår tid och sidan är nästan klar för imorgon (man kan alltid finputsa) . Kortfattat gick uppgiften ut på att designa en e-handelslösning efter målgruppen. Jag har valt att arbeta i WIX och göra en multi e-butik, både för privat personer och till företag. Jag hade velat göra sidan annorlunda men eftersom uppgiften var att göra en e-butik med varukorg och så vidare så fick jag ändra och anpassa min ide.

Kom på iden på tåget när en kvinna satt med glasögon och läste på sin iPad med 5 cm avstånd. Jag skalade ner min målgrupp för människor i Sverige, alla åldrar, båda könen, människor med synfel, människor med behov av glasögon/linser vid ansträngning och framför skärmar. Syftet är att underlätta livet för människor med en fin gåva att se utan krångel till en mindre peng. Vidare utveckling av företaget kan bli att sedan eventuellt sälja in tekniken som en produkt till ex. Apple, Samsung m.m. Mitt företag fick tillslut heta Screen Eyes som är taget från just symtomen av trötta ögon framför en skärm på engelska, Iscreen eller Eyescreen var också alternativ men allt för lik Apple. Våra forskare, optiker och tekniker, sökes! Har tagit fram och testat vår unika produkt. En app som gör att din skärm anpassar sig efter ditt synfel. Mer om affärs iden håller jag för mig själv och till mina klasskamrater och lärare så länge. Denna marknaden är ännu inte fullt utforskad men det finns forskade som har tagit fram själva skärmarna som produkter istället för min app då, läs mer här. Jag tror dock att detta kommer bli populärt och en mängd olika varianter på inom dom närmsta åren.

Namnlös

Smakprov från under processen.. EJ KLAR. Version 1. Klicka på bilden  för mer färdigt resultat.

Designtänk och skapande; Jag har satt ihop och gjort en logga, redigerat bilder i PS bland annat produktbilder och även 24 stycken glada ansikten som skall vara recensioner som förut hade glasögon men nu skänkt bort dom och glatt använder Screen Eyes istället. Det bildspelet  längre ned på sidan är mer riktade mot hela min målgrupp och är från nöjda kunder, skapar två vägs kommunikation, trygghet och seriositet. Vi samarbetar med ex. Optiker Utan Gränser och hjälper till att samla in kundernas skänkta glasögon. Jag valde att fokusera på förstasidan och inte så mycket på text överallt. Bakgrunden är modern och rörlig och liknar min loggsymbol som flyger som kring som lyckliga bublor. Jag valde blåa piggare toner för att det ger min breda målgrupp att känna av trygghet, forskning, ögonläkare i alla åldrar, hel vit och fräsch sida känns bara opersonligt. Eftersom min målgrupp är bred så valde jag att överst ha en större banner med 3 bilder i, nyhet är tv app, kommunikation som vi erbjuder tjänster för företag och att vi hjälper till och skänker dina gamla glasögon.  På mina produkter kan man klicka på och lägga i varukorgen direkt från startsidan för få, få klick till köp. Enkelhet. Det är lätt att kommunicera med oss via sociala medier och även bra kundservice alternativ för min målgrupp som email, live chat, telefon just för att det skall finnas ett bekvämt sätt för den breda målgruppen att använda sig av med det hen känner sig bekväm med. Företag och privatperson har varsina produktsidor eftersom det är en multikanal men dom båda målgrupperna skiljer sig åt. Jag har ändå försökt få ihop dom båda grupperna B2b och B2C på en sida och kommunicera till dom båda bra tycker jag.

Under denna kursen har jag lärt mig massvis och några utav punkterna kommer här;

  • Mitt lexikon har fått massor utav nya ord och nya begrepp inom ämnet.
  • Att arbeta i grupp.
  • Lärt mig och arbetat i många olika program.
  • Grunderna och förståelse i Photoshop, bäst på vissa saker nu efter gjort x antal bilder.
  • Grunderna och förståelse i Css och HTML, hur det är uppbyggt och fungerar med relativa sökvägar. Ett eget språk.
  • Olika vettiga appar som jag inte visste om.
  • Bildhantering i andra program än PS.
  • Grunder i hur man tar foto på människor, produktbilder.
  • Lärt mig mer om hur en kamera funkar.
  • Hur man gör och skriver en blogg.
  • Taggcloud och dess mening.
  • Taggar, länkar, SEO och dess betydelse.
  • Gör en E-handelslösning.
  • Hålla presentationer i grupp och väldigt korta sådana.
  • Tänka efter och designa för din målgrupp.

Lektion 9. Del 2 HTML CSS

Inläggstips!
Notepad++ eller Textwrangler gör en inställning på fliken Encoding. Välj UFT-8-BOM och ha som standard för att få ÅÄÖ att fungera. Eller koppla in denna koden från HTML del 1 här.
css-html
HTML & CSS
Nu till PS del två på min skola, här kommer en snabb vägledning till hur du fyller dina sidor och kopplar dom mellan varandra och sparar på rätt sätt.
1.
Gör en mapp på ditt skrivbord, här samlar du alla .css , .html , .jpg och png filer .
2.
Sno alltså koder från w3school, kopiera och klistra in i ditt dokument i tex. Notepad++.
3.
Kopiera och klistra in css koder. Spara som stilen.css – save as.. Andra gånger om du ändra
koden i css, spara bara som save.
4.
Din FÖRSTA HTML skall sparas i din mapp och döpas till INDEX.HTML – ett måste.
5.
Sök på w3schools – html link css. Kopiera denna länk och klistra in på index.html under <head>
6.
Nu har vi en koppling mellan html och css. gå in i din mapp efter och klicka på din index.html och se den på webben om det funkar.
7.
I mappen, gör en kopia av din fil index.html , backup.
8.
Sök länk på w3schools för att koppla sida1.html till index.html under <body>
9.
Gör detta med alla övriga sidor.
10.
Även från index.html till sida.html
11.
Grattis, nu är alla sidor länkade.
12.
Börja leka, byt design i css filen och innehållet i Html filerna. Sedan går man vidare till nästa etapp för att ladda upp denna på webben på riktigt, är alla relativa sökvägar fungerade live osv. med ett FTP program laddar du upp på ett webbhotel / web hosting, dessa kan man köpa, hyra eller söka på gratis varianter för detta där det kan finnas FTP program till.
Inläggstips!
Simpelmind app på mobilen för att enkelhet när man jobbar i projekt – samla dina mindmapps.

Lektion 8. Produkt fotografering och Photoshop del 2

Vid produkt fotografering behöver man en studio med rätt bakgrund och rätt ljus gärna tagen med en systemkameran. DIY = Do It Yourself varianter för dig med litet företag med ingen foto budget ännu.

Inläggstips!

033390ce64d33835d7236f1ba9d21e5e          54e7ea4f027673c6169912b318332d3c

Idag jobbade vi mer i ps – photoshop med att ta fram produktbilder. Välj en bild från tex. google och klipper ut bakgrunden för att få en transparent bakgrund.

Så här gör du:

  1. Klistra in en valfri bild i ps.
  2. Är bilden stor och rörig? – Beskär bilden så du får så lite bakgrundsyta som möjligt. Du får en mindre bild än originalet.
  3. Använd verktyget till vänster i verktygsmenyn som heter Magic Wand Tool (W)
  4. Markera nu bakgrunden på din nya mindre bild, klicka runt tills markering lägger sig nära kanter runt objektet.
  5. När du har markerat bakgrunden med Magic Wand Tool så trycker du på backspace eller delete på tangentbordet.
  6. Nu ser du endast objektet och bakgrunden är nu bort klippt.
  7. Känner du att du inte fick bort allt tex. runt kanterna eller delar av bakgrunden.  Använd verktyget Eraser Tool (E). Vänsterklicka på verktyget och välj Magic Eraser Tool. Zooma bilden med ctrl+ . Zooma in på bilden ser du tydligare vad som behövas suddas.
  8. När du är klar och vill ändra storleken på bilden/antal pixlar beroende på vart bilden ska användas till. gå du till – Image, – Imagesize. Ställ in önskad storlek.
  9. När du är klar och vill spara din bild, gå in på – File, – Save for web and divises, – presetPNG24.
  10. ALLT finns också att lära sig enkelt med bilder och videos osv. Lär dig mer PS här.

Mina Ps bilder.

orginal

Original produkt bild

trans jpg

Frilagd sko med transparent bakgrund

nya nike air jpg

Transparent bild lagd på ny egenskapad bakgrund med text.

Inläggstips!

Handlar nu om företags områden och uppbyggnad.

BI- Business Intelligent=system  inom tekniker, applikationer, processer och metoder för organisationer att bättre förstå sin egen verksamhet och sin omvärld.

CI- Competitive Intelligens = Handlar om att förstå och lära sig vad som händer utanför sitt företag.

30-09-2015, Lektion 7. Interaktionsdesign

Interaktionsdesign betydelse:

Inter = Mellan

Aktion = Handling

Design = Förmedla budskapet/ ge mening

Interaktionserbjudande kan vara tex. en köpknapp. (En knapp att trycka på och det händer något)

Gamification gick vi genom. Det kan betyda att man får någon sorts ”spel känsla” på olika webbsidor, man ger info om vart du är eller hur långt du har kvar. Vilket skapar trygghet hos kunder och i gamification visar man detta i grafisk eller numerisk form, av gränssnitt. Tex. ” Du har nu 70% klar, bara 30% kvar att fylla i”, ” Steg 3 av 5 (3/5)” i en kassa lösning på nätet. Ett annat kanon exempel på detta är Coca Colas kampanj då de satte en kod under korken på colaflaskorna. Vilket ledde till att kunderna fick ett behov av att köpa en cola för att få vara med i tävlingen.

Gränssnitt: alltså layout, att du kan klicka på en knapp och det händer något. I verkligenheten tex. Ett handtag på en dörr. En symbol på en dörr som man kan ta/klicka på och det händer något och man kommer till ett nytt rum/sida.

Inläggstips! 

Nobel pristagaren, Thomas Shellings föreläsningar om – Game Theory.

Vart tittar användare på en skärm?

-Vad/vilket attrahera att klicka på knappen? Väst folk läser från vänster till höger mest och först tittar man uppe till vänster på en skärm. Dock olika för olika målgrupper även. vilket beror på olika vanor man har och vilka platser man brukar vara på. Tex. Äldre som har läst/läser mycket tidningar, läser böcker, korsord osv. Dom tittar oftast alltid direkt uppe till vänster av varna.

Så, hur kommer min målgrupp att se först på min hemsida?? – här kan man göra tester med hjälp av dagens teknik, finns även företag som gör detta åt dig för din hemsida. Så att du kan veta vart du vill placera vart på din hemsida.

Placering på Interface

  • Etablera dina val, var konsekvent.
  • Hitta ett mönster/behov för tex. knappar
  • Animalier = det som skiljer sig

Inläggstips!

Anomali kan vara bra att tänka på. Animala betyder att något är annorlunda , alltså det som sticker ut dra sig ögat åt. Man kan använda sig av tex. text, färg, bild, form, storlekar m.m. Tex. Allt är stilla saker. En sak rör sig. Vilket talar direkt till vår uråldriga rovdjurs hjärna – att fånga det som rör sig / klicka på den knapp som rör sig = enkel väg att få kunden dit vi vill.

Semiotik: Beroende på målgrupp och sammanhang, teckentolkning i bild.

Projektgrupp – starta en e-handel.

Uppgift: För två veckor sedan fick varje grupp en målgrupp tilldelad att göra från en tanke till ide, koncept, sälja en produkt eller tjänst och till en prototyp till en e-handels butik färdig med presentation.

gammeldagsdump

Gammeldags.se riktat till målgruppen, pensionärerna. 

( I projekt gruppen; Andreas, Emma, Sanna, Linn, Patrik och mig själv, Sofie )

Målgrupp: Vi blev tilldelade målgruppen Pensionärerna, vilket var en bred och svår målgrupp  till en början. Då dom flesta i den åldern inte är så vana med att handla på nätet. Vi fokuserade oss på åldern 63-75 och valde att göra tjänster. Vi ville göra något för pensionärer helt enkelt. Det diskuterades och brainstormade en hel del men blev ned trattat till att vi tog ett känt koncept från tv ”halv åtta hos mig”.

Vår affärsmodel: Som singelindivid, par eller som grupp kan köpa in sig i en fyradagars period under en vecka. En eftermiddag kommer en kock kommer hem till dig med mat och meny på ett tema, man står själv som värd för en eftermiddag, man får ny lärdom av nya maträtter som lagas tillsammans med en kock under dessa fyra dagar och får nya bekantskaper.

Tanken bakom är att när man har nått den åldern skall kunna känna att det finns ett forum för människor i samma ålder, livstil med ett matintresse att utveckla tillsammans och skaffa nya vänner. Knyta ihop fyra pensionärer med lärdom av ny mat.

Upplägg av sidan: Vi samlades vid 2 tillfällen och kom fram till att vår målgrupp inte är allt för erfarna vid dator användning. Vi valde att göra sidan på e-handelsplattformen Wix, med stor textgränssnitt, stora bilder och video som talar för sig självt, få tydliga knappar, enkla funktioner, kunden behöver göra så lite som möjligt, hemma känsla från tillbaka i tiden, enkel design.

Vad är lättare och tydligare förklaring än ett videoklipp?? 🙂 

Plattformen: www.Wix.com som var en hyfsat enkel e-handels system att arbeta i, det fanns även tilläggs tjänster att köpa till av olika slag som var enkelt och enkelt att installera tex. varukorg, widgets m.m.

Arbetandet i gruppen: Här ville vi alla lära oss lite av allt men samtidigt vara effektiva. Efter Fiba metoden, koncept, infovideo och upplägg var klart  som vi alla gjorde gemensamt . Så delade vi upp oss på hälften och skapade utseende och anda innehållet, då ena gruppen satt bildredigering, skapandet av hemsidans design medans andra halvan tog fram och skapade rubriker, säljande produkter/tjänst texter m.m. Efter en stund så bytte vi alla så att alla fick känna på hur det var att skapa olika delar när man bygger en e-handel. Vi publicerade aldrig sidan offentligt utan gjorde det som ett utkast/klar prototyp och inför presentationen loggade vi bara in på Wix och visade upp förhandsvisning av sidan.

Lektion 6. Jobba i projekt, Business innovation

Jobba i projekt, business innovation 

Man kan jobba i linjära organisationer med projekt ledare och i matris organisationer. I dom båda blir man oftast anställ och få en roll/beskrivning i ett projekt som kallas funktions beskrivning som det står fint i kontraktet. I samtal med chefen handlar det om roll och ansvar.

Inläggstips!  

Innan du startar ett projekt, tänk på fiba. 

F.I.B.A – formulera, idegenerera, bygga, agera. Detta kan vara en bra tanke mall att tänka på innan man startar ett projekt.

Formulera- för vem? Vad? Vilken effekt skall uppnås?

Idegenerera- brainstorma, alla galna idéer är välkomna, hitta en utveckling på en galen idé – vidar utvecklar den till något relativt. Bolla med varandra.

Bygga- bygg på varandras idéer, stick inte iväg. Gotta ner er i en relativ idé och utvecklar den.

Agera- vad skall göras? Vad behövs? Hur får vi detta gjort?

Uppgift 

Vi har fått i projekt att i grupp starta en e-Handels butik som skall vara värdegrunds drivet, cirkulärt, cirkulärt ekonomi med fokus på blue water.

Min förklaring. 

Red och blue water pratar man mycket om, här tänkte jag förklara detta. Red Waters då gör man något som redan finns tex.  men man kanske har bättre priser eller bättre leveranser osv. Man kopierar lite på en tjänst/produkt och gör sin versionen det. Red water då är man och fajtas i smeten bland andra hajar!

Blue Waters då är man på öppet okänt hav. Då letar man efter nya havsdjur och oupptäckta öar. Man letar alltså efter nya möjligheter, något som inte finns ännu, det finns massvis med saker som ingen har tänk på ännu ( speciellt i den relativt nya e-Handels branschen ).

Vi jobbade på vårt projekt hemma hos klasskamrat (team work) som var väldigt kul och givande. Vi satte verkligen in oss i vår målgrupp och bjuder på något extra ;D

Detta är vad dom två första veckorna hade att bjuda på, detta är skrivet samma dag som lektionen men är upplagt i efterhand så jag är tillbaka nästa vecka igen med resultatet på vårt projekt och med massa mer lektioner från webb & interaktiodesign. Missa inte det!

Lektion 5. E-handels verktyg & CSS

Vi pratade om olika e-handels verktyg;

Olika e-handels verktyg pratade vi om och vi i grupper gick in och letade upp 25 olika varianter för att sedan välja ut 10 att grotta ner oss i för att där efter ta fram dom 5 bästa alternativen och presentera muntligt. Det skulle vara allt till det lilla företaget med billiga lösningar till det stora med en dyra lösningar och affärsmodel.


Här kommer en mer uppdaterad lista ( du kan också läsa mer här);

Till WordPress finns pluginen Woo-commerce som gör att du kan koppla en e-handel till din WordPress-sida.

www.askas.se,www.ebutik.se,www.jetshopfree.se,www.nordiskehandel.se,www.litium.se,www.starweb.se,

www.sitedirect.se,www.textalk.se,www.tictail.com,www.argonova.se,www.c4media.se ,www.danaweb.se,

www.dynamicweb.se,www.e37.se,www.enferno.se,www.my123eshop.se,www.panagora.se,www.preemtech.se,

www.starrepublic.com,www.talex.se,www.startabutik.se,www.webcore.se,www.wikinggruppen.com.

Jag pratade om textalk i skolan.

Inläggs tips!

Det finns massa hemsidor som testar och jämför just e-handels lösningar. En som är super bra är www.jajja.se där hittar du all info.

CSS

CSS står för = stilen/designen medans html står för innehållet.

Min förklaring;

Css är ett annat språk/variant som underlättar för dig att designa stilen på dina html filer. Istället för att gå in på vart ända html sida du har i din mapp för att ända färg, text, typsnitt, utseende m.m så gå du bara in i css filen ( 1fil för stil/design ) och ändrar tex. Bakgrunds färgen. Och då ändras det i ALLA html filer för dig. Css är kopplat till alla dina html sidor, spara dom i samma mapp. Du ser skillnad på {css} och <html> och i filformat .css eller .html .

Inläggstips!

Glöm inte att spara css filen även i Notepad++ för PC eller i Textwrangler för Mac dator. Spara filen i filändelsen/filformat .css . För att det skall bli kopplat mellan css och html filer så lägger du in denna länk högt upp i början på varje html sida. Dock BYT UT filnamnet till din.css fil. Så datorn blir länkad till din css fil. Även här använd dig av w3schools!

Min Css sida försvann också tillsammans med min HTML sida på skoldatorn. Av enkelt dummt sparnings fel. Jag tyckte Css var lite svårare att förstå till en början men är ett enklare verktyg till HTML helt enkelt. Jag kunde lösa alla uppgifter som vi fick efter att har provat sig fram en stund. NÖJD TJEJ! 😀

Lektion 4. HTML

Dagen började med att presentera våra bloggar inför klassen. Där jag förklarade varför jag valt wordpress, vem jag skriver till, hur jag har skivigt, när jag tänker skriva, syftet, designen, smarta funktioner, bra och dåligt med bloggen, kommande förbättringar osv. Vill ni veta mer djupgående om min presentation så får ni gärna kontakta mig så kan jag svara på dom frågorna!

Idag pratade vi också om;

PPPL=Positiv, Potentialer, Problemet, Lösning som är en Feedbacks metod/feedback modell.

Är en metod för hur man ger feedback/kritik på ett vettigt sätt utan att låta för negativ eller på hoppande. Så börja med att säga det positiva, sedan vad som det finns potentialer för att bygga vidare på, fortsätt med vad DU TROR problemet är och sedan avsluta med en hjälpande tanke och ge en lösning på problemet.

URL-Uniqe Resource Location pratade vi också om som betyder mer PLATSEN på webben.

SEO – Search Enginge Optimazation pratade vi också om. Som man använder sig av för att HITTA MIG. För att webben och folket på webben skall kunna hitta mig så krävs det att jag har bra rubriker och taggar mina inlägg och även länkar till andra sidor som är ett vinnande systemtänk + ökad trafik koncept för att bli sedd och komma upp på tex. Googles sökmotor. Alltså nyckeln till SEO är Rubriker/taggar/kategorier/etiketter och sedan länkar till andra och så dom till slut börja länkar tillbaka till dig. DÅ börjar Google gillar dig riktigt bra!

Olika former/kanaler för information

       PR           Sociala Medier        Reklam

E-handel       webb             blogg

   Nyhetsbrev

 

HTML

Html = Hyper Text Markup Language = Språk som hanterar länkar
Med tex. html-koder så bygger du upp en hemsida. Såhär är ofta en hemsida och HTML uppbyggt med dessa fält;

                                                                                   Header

                                                                Leftnav       Body          Rightnav

                                                                                    Footer

Inläggettips!

Det är väldigt smidigt att använda sig av ett enkelt text program ( som inte redigerar din text automatiskt ) att samla/spara dina koder i. Ladda ner dessa först innan du börja koda i HTML.

PC; Notepad++

Mac; Textwrangler

Min förklaring.

HTML finns det massvis med info och hjälp om på webben redan, det är färdig kodat. Att sno någon annans kod får man tydligen göra eller det ÄR det folk gör. Man hittar alltså inte på koderna helt själv utan man kan bara Kopiera koden till den funktionen man vill ha och Klistra in det i sin egen html fil.

Inläggstips 2! Jag är generös idag.

Allt du letar efter eller lär dig i HTML och CSS koder finns samlat på www.w3school.com . In och sno alla koder därifrån. Sök tex. Html backgound color, så kommer koden upp och du kopiera den.

Kortkommandon; Några som funkar i ALLA program som du bör lära dig för att kunna arbeta mer effektivt mellan fler olika program samtidigt är;

CTRL+Tab=Byt program/fönster

CTRL+A= markera Allt.

CTRL+C=Copy

CTRL+V=Visa, Klistra in

CTRL+Z= Ångra

I HTML så använder man sig av olika html taggar/länkar/kod folk säger olika ord i detta språk. På en html kod finns det; en start vart koden skall börja gälla-ett innehåll tex. Fet stil på texten, En bild-ett slut för när innehållet ska sluta gälla.

Tex;

Starter <html> <h1> <p> <h3>

Slut </html> </h1> </p> </h3>

Exempel att kopiera; 

Html länk att ha på din svenska sida för ÅÄÖ skall funka är;

<meta charset=”UTF-8”/>

Denna koden lägger du alltså mellan <html> och <head> eller efter <head> i början högst upp på filen.

När du sparar din fil i tex. Notepad++ eller Textwrangler så är det viktigt att första sidan heter INDEX och filändelser är .html = index.html . Dessa html filer skall sparas i en egen mapp på tex. Skrivbordet. För att lätt kunna justeras med CSS senare. (mer info om CSS kommer nästa lektion)

Min HTML sida råkade tyvärr har försvunnit pgv. enkelt fel där jag sparade på fel dator (skoldatorn). Men jag lärde mig väldigt mycket. Jag tyckte HTML var ganska enkelt ändå, känner att jag förstår språket och upplägget. Gjorde mycket HTML på Lunarstorm när man gick i klass HTMLfem. Jag gjorde olika funktioner och effekter som byta bakgrundsfärg, textfärg, ÅÄÖ, typsnitt, centrerad, fetstil, länka, bilder, videos, text som rörde sig i sidled m.m

Lektion 3, bildhantering

På fredagen kollade vi in i 3 olika bildhanterings program. Vi började med snapseed ( bäst som app på mobilen eller platta) där vi fick igenom olika inställningar och hur appen fungerar. Riktigt bra app jag rekommendera till verkligen ALLA, super enkel och roligt som tusan! Därefter gick vi över till fotor (alltså bäst på datorn) och såg på grunderna där på hur man kan göra för att få fram en bild bättre. Efter lunch började vi äntligen i PS – adobe photoshop och vi använder version PS CS3. Finns att ladda ner gratis i 1 månad på prov. Annars är det ganska dyrt att köpa. Vi gick genom rullgardinsmenyer alltså dom översta flikarna men tydligen bara det nödvändigaste ;P fanns hur många knappar som helst att lära sig! Gjorde bild övningar, klippa och klistra och i sådär 2 olika lager till en början. Jag blev tvungen att gå efter genomgången men har gjort lite i photoshop hemma, se nedanför…

bj8kjsoqkq80iGglFxcmh5g0le4kqUlT_WyOgUQz4E0

MeJIUTUJlV_QA0Z6CEN_atAUvC2WCCCw8rTgGkUp8YY Sånna här bilder tog jag i våras med min Canon 100D system kamera (kan inget om foto). I PS klippte jag ut blommorna..

GvZco7enSkfeKZtMkTwN0Ey7IIxeX3qdi8yy_E94d6U

Dom utklippta blommorna, drog jag in i en nya bild ( gardinerna), lade varje blomma i ett lager, så jag hade alltså 8 lager och en bild. ( lager är ofta genomskinliga, ett verktyg som fungerar som olika filter som ligger uppe på varandra, varje filter lägger du till något tex. en blomma. lager=filter= en blomma ) .

När jag var nöjd med min produkt lade jag ihop alla lager och bild till en gemensam vanlig bild, komprimerade ihop och valde vanligt bild format. jpg.

Inläggstips!

Som inrednings intresserad kan jag tipsa om en grymt kul app som heter Neybers där jag brukar leka/spela och inreda miljöer eller magasin. Ni kan följa mig på Neybers och lika mina designs.. följ; sofie_johansson_2

ymYtYZUtzqN4G03kl36GcH9gsXJhSI0a_4EKJ3l58Y4

Jag ville inte bara göra en produkt utan också sätta in den i en miljö som är mer säljande.. jag gick in i min app, designade rummet.. tryckte på printscreen och la upp rummet bilden i PS. Jag la nu även in mina gardiner på rummet bilden.. voila! 😀