I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok.

Save this PDF as:
 WORD  PNG  TXT  JPG

Storlek: px
Starta visningen från sidan:

Download "I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok."

Transkript

1 Lokal Gästbok I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok. Gästboken ska fungera som så att man har ett fält där man kan skriva in sitt namn, och ett fält där man kan skriva in ett meddelande. När man trycker på skicka, ska sedan då namnet och meddelandet visas på webbsidan (dvs. ni skapar nya noder i DOM-trädet, på samma sätt som i L2-Miniräknaren). Dessa namn och meddelanden ska sparas i Local Storage, och därmed ska de alltså överleva att man stänger ner sidan och öppnar den igen. När sidan laddas ska alltså eventuella tidigare inlägg (namn+meddelande) visas. För att säkerställa att ni sparar dessa inlägg på ett rimligt sätt, så ska er webbsida även stödja att namnen i de visade inläggen visas på olika sätt: normalt, fetstil, understruket. (Tips och demonstrationsvideo bör förtydliga vad detta innebär och hur ni ska kunna lösa det). Man ska även kunna rensa gästboken, detta ska då ta bort sparade inlägg från både webbsidan (från DOM) samt Local Storage, så om man laddar om sidan ska dessa borttagna inlägg alltså inte visas längre. Ni ska även få testa hur man skriver stilmallar som riktar sig mot specifika typer av enheter, genom att er gästbok ska visas annorlunda om man besöker den från en handhållen enhet. (Återigen, tips och demonstrationsvideo bör förtydliga vad och hur ni ska göra) Om webbläsaren inte stödjer localstorage ska ett meddelande som varnar om detta visas när man laddar sidan, webbsidan ska dock fortfarande gå att använda som en gästbok, men inläggen kommer naturligtvis inte kunna sparas så att de överlever en omladdning av sidan. Local Storage Som ni vet används Local Storage som en associativ array (array med namngivna fält), i stil med: localstorage[ myvalue ]=5; Men ni kan inte använda localstorage som en flerdimensionell array, i stil med: localstorage[ message ][0]= the first message ; 1 (6)

2 localstorage[ message ][1]= the second message ; Istället får ni lagra all relevant information i namnet för fältet, i stil med: localstorage[ message.0 ]= the first message ; localstorage[ message.1 ]= the second message ; Detta kan förstås bli ganska rörigt om man inte använder ett genomtänkt namnschema, ex. så ger ovanstående ingen information om hur många meddelanden som finns lagrade. Så för att lätt kunna loopa igenom alla meddelanden bör vi även ha någon typ av räknare lagrad i localstorage som talar om hur många meddelanden som finns, i stil med: localstorage[ message.length ]=2; localstorage[ message.0 ]= the first message ; localstorage[ message.1 ]= the second message ; Så länge vi ser till att öka message.length när vi lägger till ett meddelande, och minska den när vi tar bort ett inlägg, så kan vi alltså alltid veta hur många meddelanden som finns lagrade. Ni får dock tänka på att om vi inte skapat message.length tidigare så finns den inte, så vid ett första besök till gästboken är alltså message.length inte 0, utan null (ej tilldelad). Ni bör dock även prefix:a era fältnamn med något som säger att de hör till gästboken eftersom ni då minskar risken för en namnkrock om ni skulle använda er kod tillsammans med någon annan kod som också använder localstorage, ex. så att ovanstående skulle bli: localstorage[ guestbook.message.length ]=2; localstorage[ guestbook.message.0 ]= the first message ; localstorage[ guestbook.message.1 ]= the second message ; Möjligt namnschema guestbook.entry.length Antalet inlägg N i localstorage guestbook.entry.x.name Namnet för inlägg X, där X<N guestbook.entry.x.text Meddelandetexten för inlägg X, där X<N guestbook.setting.highlight Gästboksinställning för hur namn ska visas Genom att man separerar ut namn från meddelandetext i inlägg så kan man alltså med enkelhet hantera dessa olika i webbsidan, ex. att namnen läggs i en span med en klass som bestämmer om namnen ska visas normalt, i fetstil 2 (6)

3 eller understrukna. CSS Media Använd CSS media-attributet för att skriva en stilmall som endast gäller för handhållna (handheld) enheter. I denna stilmall skulle ni kunna ge webbsidan en annan layout som bättre passar sig för de oftast lägre upplösningar som handhållna enheter har, det skulle även kunna vara en bra ide att byta ut ev. bakgrundsbilder mot versioner i lägre kvalitet i stilmallen då detta skulle spara bandbredd och möjligen inte ens märkas pga. lägre upplösning på den handhållna enhetens skärm. I den här labben har vi dock inte använt oss av så mycket layout eller bakgrundsbilder, så här räcker det att ni visar att ni kunnat skapa en sådan stilmall i huvudtaget genom att ni ger webbsidan en annan bakgrundsfärg för handhållna enheter. Tips Det kan vara lämpligt att ha en hel del olika funktioner för denna labb, exempelvis en funktion för att: Lägga in ett inlägg i DOM-trädet Lägga in ett inlägg i LocalStorage Läsa ut namn och text från webbsidans formulär, och lägga in i både DOM och LocalStorage Läsa ut ev. inlägg från LocalStorage och lägga in dem i DOM-trädet med lämpliga klasser som märker upp namnen enligt inställning från LocalStorage. Rensa bort alla inlägg från DOM-trädet Rensa bort alla inlägg från LocalStorage Den fjärde funktionen skulle ex. kunna vara lämplig att köras när webbsidan laddats första gången, och om man ser till att den börjar med att ta bort tidigare inlägg från DOM så blir den väldigt användbar, ex. för att byta hur namn ska visas. Återanvänd era mindre funktioner i era större, den tredje funktionen kan ex. med fördel använda sig av de två första. 3 (6)

4 För att hålla reda på antalet inlägg i localstorage så behövde ni som sagt använda någon form av räknare, tänk på att säkerställa att denna räknare har fått ett värde innan ni försöker öka/minska den. Ni kan exempelvis göra detta genom att sätta räknaren till 0 om den är null innan ni ändrar på dess värde. Ni kan fixa så att er lista av uppmärkningssätt av namn visar det aktuella uppmärkningssättet vid ny sidladdning genom att ni använder javascript attributet selectedindex på ert select-element: HTML: <select id="guestbookcontrolhighlight" onchange="## nån lämplig funktion här ##"> <option value="normal">normal</option> <option value="bold">bold</option> <option value="underline">underline</option> </select> Javascript: var sel = document.getelementbyid("guestbookcontrolhighlight"); sel.selectedindex=0; //Normal är förvald sel.selectedindex=1; //Bold är förvald sel.selectedindex=2; //Underline är förvald Ramarna med textbeskrivning som ni kan se i demonstrationsvideon får man genom att man använder ett fieldset-element, enligt: <fieldset> <legend>guestbook Entries</legend>... övrigt innehåll innanför ramen.. </fieldset> Det är förstås inget krav att ni använder dessa dock, utseendet på webbsidan bestämmer ni över själva. Att rensa i localstorage för gästboken bör ju normalt sett bara ta bort de fält som ni skapat själva för gästboken (ex. om webbsidan också skulle haft en inbyggd miniräknare med historik i localstorage, så bör ju en rensning av 4 (6)

5 gästboken inte även rensa miniräknaren), men det viktiga här är att vi lätt kan nollställa gästboken, så localstorage.clear() kan användas. Uppmärkningen av namn går att lösa på ett flertal olika sätt, exempelvis skulle ni kunna lägga namnen i span-element med en klass som bestämmer vilket uppmärkningssätt som ska användas: HTML: <span class="guestbookentrynamebold">test name</span><span>message</span> CSS:.guestbookEntryNameBold { font-weight: bolder; } Eller så skulle ni kunna bestämma uppmärkningen genom att sätta en sådan klass på ett omslutande element, och ha generiska klassnamn för spanelementet med namnet, och sedan utnyttja CSS Selectors. Då alla namn kommer stylas på samma sätt så kan detta kännas som en lämpligare metod (och som bonus så behöver man ju bara ändra klass för ett enda element när man ändrar uppmärkning, istället för att behöva loopa igenom alla spanelement innehållandes namn): HTML: <div class="guestbookentriesunderline">... <span class="guestbookentryname">test name</span><span>message</span>... </div> CSS:.guestbookEntriesUnderline.guestbookEntryName { text-decoration: underline; }.guestbookentriesbold.guestbookentryname { font-weight: bolder; } 5 (6)

6 Ett exempel på hur er sida skulle kunna se ut och fungera: (Mpeg4-video, testad och fungerar med QuickTime, inget ljud, ca 1.3MB) Märk dock att detta bara är ett exempel, ni får gärna göra snyggare/mer avancerade lösningar, så länge som ni fortfarande uppfyller den funktionalitet som krävs i det här dokumentet. Givna filer Inga filer är givna för den här labben. Inlämning Döp er webbsida till index.html, övriga filer (stilmallar och javascript) ger ni lämpliga namn (använd dock inte åäö, kan strula med teckenkodningar). Packa alla era filer i en zipfil, som ska heta lab5.zip, denna zipfil lämnas in via kurssidan på Cambro, senast Fredag 12 augusti :00. Notera att filerna inte ska ligga i någon mapp i zipfilen, utan zipfilen ska endast innehålla filerna själva. Observera också att det är viktigt att filerna har exakt det namn som specificerats i det här dokumentet och att filnamnen bara ska anges med små bokstäver. Eftersom detta möjliggör att vi använder oss av automatiska skript när vi rättar. All HTML/CSS/Javascript ni skriver ska vara korrekt och validerande. 6 (6)

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

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

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

Utseende. Lauri Watts Översättare: Stefan Asserhäll

Utseende. Lauri Watts Översättare: Stefan Asserhäll Lauri Watts Översättare: Stefan Asserhäll 2 Innehåll 1 Utseende 4 1.1 Allmänt............................................ 4 1.2 Teckensnitt.......................................... 4 1.3 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

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

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

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

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

Kom i gång med PING PONG

Kom i gång med PING PONG Kom i gång med PING PONG Studentmanual Version 4 Kom igång med PING PONG Studentmanual. Version 4 Producerad av Linda Borglund, Anita Eklöf vid Centrum för Lärande och Undervisning, Högskolan i Borås.

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

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

Kom i gång med PING PONG

Kom i gång med PING PONG Kom i gång med PING PONG Studentmanual Version 5 Kom igång med PING PONG Studentmanual. Version 5 Anita Eklöf, Rune Fjelldal vid Centrum för Lärande och Undervisning, Bibliotek & lärande resurser, Högskolan

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

Zimplit CMS Manual. Introduktion. Generell Information

Zimplit CMS Manual. Introduktion. Generell Information Zimplit CMS Manual Introduktion Detta dokument ger en överblick av Zimplit CMS (Content Management System) användargränssnitt och dess funktioner. (För mer information och hjälp-forum, se zimplit.org.)

Läs mer

Laboration 2. Webbproduktion En stiligare webbsida HT2015

Laboration 2. Webbproduktion En stiligare webbsida HT2015 Laboration 2 Webbproduktion Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt sätt som möjligt. Nu är det dags att ge ögat något vackert att vila på.

Läs mer

RemoteX Applications Manual för Resurs Login

RemoteX Applications Manual för Resurs Login RemoteX Applications Manual för Resurs Login RemoteX Technologies Innehållsförteckning Introduktion... 3 Resurs Login... 4 Förberedelser i RemoteX Applications... 5 Registrera användare för Resurs Login...

Läs mer

L04.1 Marodören. Inledning. Mål. Genomförande. Uppgift 1 Hello World. Moment I

L04.1 Marodören. Inledning. Mål. Genomförande. Uppgift 1 Hello World. Moment I L04.1 Marodören Inledning Genom att öva sig på de grundläggande koncepten i JavaScript öppnas vägen allteftersom till de mer avancerade funktionerna. Man måste lära sig krypa innan man kan gå, även i JavaScript!

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

24-timmarswebben. Riktlinje Förklaring Så uppfyller vi den

24-timmarswebben. Riktlinje Förklaring Så uppfyller vi den 24-timmarswebben WebPublish gör det möjligt att skapa läsvänliga sidor. Vi tycker att det är en självklarthet att informationen på en webbplats ska vara tillgänglig för och kunna läsas av så många som

Läs mer

Carl-Oscar Hermansson WEBB DESIGN

Carl-Oscar Hermansson WEBB DESIGN Carl-Oscar Hermansson WEBB DESIGN Del SKAPA DIN WEBBPLATS MED HTML. Öppna ett HTML-dokument... 8 6. HTML grundkod... 9 7. Färger... 0 8. Textformatering... 9. Listor... 0 0. Bilder.... Bakgrundsbilder...

Läs mer

RemoteX Applications Manual för Partner Login

RemoteX Applications Manual för Partner Login RemoteX Applications Manual för Partner Login RemoteX Technologies Innehållsförteckning Introduktion... 3 Partner Login... 4 Förberedelser i RemoteX Applications... 5 Registrera användare för Partner Login...

Läs mer

Spara filer eller mappar från ett kursrums filhanterare i Blackboard 9.1

Spara filer eller mappar från ett kursrums filhanterare i Blackboard 9.1 Sida 1 (19) Lärplattformsprojektet Stödmaterial Författare: Pehr-Henric Danielsson Innehållsförteckning Innehållsförteckning... 1 Spara filer eller mappar från ett kursrums filhanterare i Blackboard 9.1...

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

07/12/2015. Stilmallar. - styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. iecept.html frukt.html grönsaker.html

07/12/2015. Stilmallar. - styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. iecept.html frukt.html grönsaker.html Stilmallar - styra utseendet av webbplatsen DEL 1 Karin Fahlquist index.html iecept.html frukt.html grönsaker.html 1 Samma kod olika utseende Olika exempel om layout: http://www.csszengarden.com/ Utseende

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

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

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

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

Nyhetsbrev Exder 000419

Nyhetsbrev Exder 000419 Sida 1 av 5 Nyhetsbrev Exder 000419 Det är inte mer än ca sex veckor sedan vi installerade den förra releasen av Exder. Men nu är det dags igen. Som vanligt behöver du som användare inte göra någonting

Läs mer

Avancerade Webbteknologier

Avancerade Webbteknologier Projektledning, Business Knowledge Användbarhet & Layout Avancerade Webbteknologier Lkti Lektion 1 Kommunikation Tobias Landén tobias.landen@chas.se Avancerade webbteknologier del 1 (4 KY poäng) Syfte

Läs mer

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum!

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Hur du implementerar ditt Hosted Newsroom I den här guiden kan du läsa hur du skapar ert Hosted Newsroom ert pressrum på er egna

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

ÖrebroCupen. Institutionen för Ekonomi, Statistik och Informatik, ESI Informatik, Klientprogrammering för webbsystem, 5 poäng

ÖrebroCupen. Institutionen för Ekonomi, Statistik och Informatik, ESI Informatik, Klientprogrammering för webbsystem, 5 poäng Institutionen för Ekonomi, Statistik och Informatik, ESI Informatik, Klientprogrammering för webbsystem, 5 poäng Examinationsuppgift VT 2005 Ver 1.2 ÖrebroCupen Mathias Borg, mathias.borg@esi.oru.se Benny

Läs mer

Guide. Webbsidor i Studentportalen. Innehåll. Uppdaterad: 2014-10-07

Guide. Webbsidor i Studentportalen. Innehåll. Uppdaterad: 2014-10-07 Guide Eva Pärt-Enander, 2012-12-14 Webbsidor i Studentportalen Uppdaterad: 2014-10-07 Innehåll Webbsidor i Studentportalen... 1 Om webbsidor... 2 Lägg till en webbsida... 2 Lägg till samma webbsida på

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

Innehåll. Förändringar i v5.3

Innehåll. Förändringar i v5.3 Innehåll Innehåll... 2 Allmän information... 3 DuoSTATION Manager... 3 Allmänt... 3 Ärenden... 3 Information... 3 Organisationer... 3 Debitering... 3 Utrustningar... 4 Inventering... 4 Metering... 4 IT

Läs mer

Manual för kursspecifika ansökningsformulär Folkhögskola.nu

Manual för kursspecifika ansökningsformulär Folkhögskola.nu Manual för kursspecifika ansökningsformulär Folkhögskola.nu 2013-12-03 Bakgrund Folkhögskola.nu har utvecklat en funktion som gör det möjligt för skoladministratörer att skapa kursspecifika digitala ansökningsformulär

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

Omsorgen Användarhandledning

Omsorgen Användarhandledning Omsorgen Användarhandledning 2012-12-13 Steg 1: Logga in Om ditt boende/kommun är ansluten till Omsorgen har du troligtvis fått inloggningsuppgifter. Om inte, skicka ett mail till info@omsorgen.se så kontaktar

Läs mer

Programmeringteknik. Planering 2014-05-12 MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen

Programmeringteknik. Planering 2014-05-12 MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen MÅL Programmeringteknik Webbdelen Efter webbmomentet ska du: kunna använda ett tiotal kommandon i: HTML (göra webbsidor) CSS (webbsidans utseende) Javascript (programmering - klienten) PHP (programmering

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

JAVASCRIPT. Beteende

JAVASCRIPT. Beteende JAVASCRIPT Beteende OVERVIEW HTML Formulär JavaScript Syntax Events DOM Validering av fomulär WEBBPROGRAMMERING PÅ KLIENTSIDAN Skriptspråk som körs på klientsidan (klientskript) Koden exekveras i webbläsaren

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

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

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll FrontPage Express I programpaketet Internet Explorer 4.0 och 5.0 ingår också FrontPage Express som installeras vid en fullständig installation. Det är ett program som man kan använda för att skapa egna

Läs mer

Kom i gång med PING PONG

Kom i gång med PING PONG Kom i gång med PING PONG Studentmanual Version 6 Kom igång med PING PONG Studentmanual. Version 6 Anita Eklöf, Sektionen för pedagogiskt arbete, Högskolan i Borås. 2015-02-16 1 ATT LOGGA IN... 1 2 STARTSIDAN...

Läs mer

Webbprogrammering 725G54

Webbprogrammering 725G54 Webbprogrammering 725G54 Hej! Jakob Bandelin, gästadjunkt jakob.bandelin@liu.se Interaktionsdesign, webbdesign, apputveckling Agenda Kursmål och -upplägg HTML Teckenkodning Validering Lab 1. Kursmål exemplifiera

Läs mer

Manual för din hemsida

Manual för din hemsida Manual för din hemsida Dynamiska hemsidor är en lösning för att man på ett enkelt sätt skall kunna lägga till, ändra och ta bort sidor på sin hemsida. För att detta skall vara möjligt bygger lösningen

Läs mer

Nya webbservern Dvwebb.mah.se

Nya webbservern Dvwebb.mah.se Nya webbservern Dvwebb.mah.se Bakgrund: BIT (Bibliotek och IT) beslutar att ta ner Novell systemet 28/3 som är en katalogtjänst som styr bland annat alla studenter s.k. hemkataloger på Malmö högskola såväl

Läs mer

F06 A table form Dagens agenda

F06 A table form Dagens agenda F06 A table form Dagens agenda Länkar Tabeller Formulär Hyperlänkar index.html feed/news.html klickbar text hippo.png about.html Relativ länk till webbsida via klickbar länk: klickbar

Läs mer

Steg 5 Webbsidor One.com och OpenOffice Writer Mac OS X

Steg 5 Webbsidor One.com och OpenOffice Writer Mac OS X Steg 5 Webbsidor One.com och OpenOffice Writer Mac OS X Nov 13 Liljedalsdata.se Liljedalsdata Steg 5 Mac Sida 1 Inledning Förkunskaper Steg 1, 2, 3 och 4. Innan du är mogen för att lägga ut en sida på

Läs mer

3. Hämta och infoga bilder

3. Hämta och infoga bilder Sida 1 av 8 Lektion 1: sida 4 av 4 «Sida 3 av 4 Till kursens framsida 3. Hämta och infoga bilder Nu vet vi ju hur man sätter in text i sin sida. Men hur gör man med bilder? Det är inte svårt alls! Det

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

Installationsguide för FAR Komplett Offline 2.1.2

Installationsguide för FAR Komplett Offline 2.1.2 Installationsguide för FAR Komplett Offline 2.1.2 Denna guide gäller för installation av FAR Komplett Offline 2.1.2 på Windows XP, Windows Vista respektive Windows 7. Dialogrutorna kan skilja sig åt beroende

Läs mer

WEBBUTVECKLING Kursplanering

WEBBUTVECKLING Kursplanering Kursplanering v 35-37: Struktur, mappar, google-skills, planering, html-grunder, bra/dåliga exempel, webbläsare, editorer v 38-43: HTML - länkar, färger, text, listor, bilder. v 44: Höstlov v 45: Repetition,

Läs mer

Laboration 1 XML, XPath, XSLT och JSON

Laboration 1 XML, XPath, XSLT och JSON Webbteknik II, 1DV449 Laboration 1 XML, XPath, XSLT och JSON Author: John Häggerud & Johan Leitet Semester: HT 2011 Course code: 1DV449 Inledning I denna första laboration är det tanken att Du ska bekanta

Läs mer

Användarmanual för Hemsida

Användarmanual för Hemsida Användarmanual för Hemsida Sida 1 av 44 Inledning Detta dokument är en användarmanual för redigerbara hemsidor utvecklade av. Du kan själv, i ett wordliknande gränssnitt, enkelt uppdatera din egen hemsida

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

Det här dokumentet går kortfattat igenom registrerings- och ansökningsprocessen.

Det här dokumentet går kortfattat igenom registrerings- och ansökningsprocessen. Det här dokumentet går kortfattat igenom registrerings- och ansökningsprocessen. 1. Webbläsare Följande versioner av webbläsare stöds: Netscape från version 7.x Firefox från version 1.x Internet Explorer

Läs mer

ÖvningsProv Internet att skapa hemsidor vt-2006 Webbsideskapande

ÖvningsProv Internet att skapa hemsidor vt-2006 Webbsideskapande ÖvningsProv Internet att skapa hemsidor vt-2006 Webbsideskapande Hjälpmedel: Kurslitteratur, utdelade papper, webbdesignskolan, samt World Wide Web. Tillåtna program att skriva kod i är Anteckningar eller

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

Innehållsförteckning. Adobe GoLive CS

Innehållsförteckning. Adobe GoLive CS Innehållsförteckning 1 Om GoLive CS... 1 Mappar och filstruktur...1 Vad är en webbsida?...1 Vad är speciellt för en webbsida?...2 Vad är en webbplats?...3 Vanliga fallgropar med webbdesign...3 Överföra

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

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

Labora&on 7 Syfte med laborationen:

Labora&on 7 Syfte med laborationen: Labora&on 7 Syfte med laborationen: - att förstå enkel 7ilhantering i PHP - att repetera grundläggande PHP- begrepp såsom loopar, arrayer, stränghantering och formulär. VIKTIGT: uppgift 3-5 är repetitionsuppgifter

Läs mer

Lägga in ett protokoll i en Dokumentlista i SharePoint

Lägga in ett protokoll i en Dokumentlista i SharePoint Lägga in ett protokoll i en Dokumentlista i SharePoint Så här loggar du in protokoll i SharePoint dokumenthanteringssystem Den röda texten tillsammans med de röda pilarna på bilderna visar vad du ska fylla

Läs mer

Att arbeta med. Müfit Kiper

Att arbeta med. Müfit Kiper Att arbeta med Müfit Kiper Att skriva nya inlägg Alla inlägg som är postade visas i kronologisk ordning, det vill säga det senast postade inlägget kommer visas först om inget annat angetts i temafilerna.

Läs mer

Inlämningsuppgift 2. DA156A - Introduktion till webbutveckling Teknik och samhälle, Malmö högskola Oktober 2012

Inlämningsuppgift 2. DA156A - Introduktion till webbutveckling Teknik och samhälle, Malmö högskola Oktober 2012 Oktober 2012 Uppgiften går ut på att redovisa dina kunskaper kring JavaScript, liksom din förmåga att skapa en CSS-baserad layout. Detta gör du genom att lämna in ett resultat som följer specifikationerna

Läs mer

Det här dokumentet är till för att ge en översikt över ASP.NET MVC samt hur WCF Services används från.net applikationer.

Det här dokumentet är till för att ge en översikt över ASP.NET MVC samt hur WCF Services används från.net applikationer. Informationsinfrastruktur 7.5 hp Mattias Nordlindh Inledning Det här dokumentet är till för att ge en översikt över ASP.NET MVC samt hur WCF Services används från.net applikationer. Dokumentet består av

Läs mer

Internet & WWW Laboration 2 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 2 CSS del 1. 1 av 8

Internet & WWW Laboration 2 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 2 CSS del 1. 1 av 8 Laboration 2 CSS del 1 1 av 8 Vad kommer jag att lära mig på laboration 2? Skriva en stilmall: o Skriva extern CSS-mall och länka den till XHTML-dokument o Skriva inbäddad CSS-mall i XHTML-dokument o Skriva

Läs mer

Användarmanual för Content tool version 7.5

Användarmanual för Content tool version 7.5 Användarmanual för Content tool version 7.5 TM WEB Express AB Manual Content tool 7.5 Sid 2 INNEHÅLLSFÖRTECKNING 1 OM PUBLICERINGSVERKTYGET... 3 1.1 ALLMÄNT... 3 2 ÖVERSIKT... 3 3 ALLMÄNT OM WEBBSIDAN

Läs mer

ActiveBuilder Användarmanual

ActiveBuilder Användarmanual ActiveBuilder Användarmanual Forfatter: TalkActive I/S Dato: Juli 2004 Version: R. 1.01 Sprog: Svensk Copyright 2004 - Talk Active - all rights reserved. Innehåll: 1. INLEDNING...2 2. SNABBSTART...3 3.

Läs mer

Medieteknologi Webbprogrammering och databaser MEB725, 5p (7,5 ECTS) Klientprogrammering JavaScript Program på flera sidor

Medieteknologi Webbprogrammering och databaser MEB725, 5p (7,5 ECTS) Klientprogrammering JavaScript Program på flera sidor http://w3.msi.vxu.se/multimedia Medieteknologi Webbprogrammering och databaser MEB725, 5p (7,5 ECTS) Klientprogrammering JavaScript Program på flera sidor Rune Körnefors Innehåll Variabler i JavaScript

Läs mer

Databasbaserad publicering ME105A Laboration 8 1 (6) I förra labben gjorde vi en webbsida med produkterna i tabellen products:

Databasbaserad publicering ME105A Laboration 8 1 (6) I förra labben gjorde vi en webbsida med produkterna i tabellen products: Databasbaserad publicering ME105A Laboration 8 1 (6) Laboration 8 I förra labben gjorde vi en webbsida med produkterna i tabellen products: I denna labb ska vi göra ett liknande dokument med InDesign.

Läs mer

Kapitel 13. om den överges och lämnas åt sitt öde på Internet.

Kapitel 13. om den överges och lämnas åt sitt öde på Internet. Kapitel 13 kapitel 13 Inte många skulle tacka nej till att få köra omkring i en ny Porsche. Men även en dyr sportbil förlorar sin status om den aldrig servas eller om den tillåts samla damm, rost och spindelväv.

Läs mer

lokalnytt.se Manual kundadministration

lokalnytt.se Manual kundadministration lokalnytt.se Manual kundadministration version 2.0 2012-08-23 Innehåll Inledning... sidan 2 Rekommendationer... sidan 2 Gemensamma funktioner... sidan 3 Inloggning... sidan 4 Startsida... sidan 5 Objekt...

Läs mer

Ändringar i CSS-filer i e-line 3.42A

Ändringar i CSS-filer i e-line 3.42A Ändringar i CSS-filer i e-line 3.42A Gäller Pyramidversion 3.42A till och med 3.42Asp06 (2015-12-16) Förändringar och nyheter i standard CSS-filer I det här dokumentet förklaras de uppdateringar som gjorts

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

Redigera bilder snabbt och enkelt!

Redigera bilder snabbt och enkelt! Redigera bilder snabbt och enkelt! När du ska ladda upp bilder till din hemsida så är det klokt att anpassa bilderna så att dom får rätt storlek och att dom blir så lätta som möjligt i filstorlek. Detta

Läs mer

Word Online Version 1.0 Skolkontoret

Word Online Version 1.0 Skolkontoret Word Online Version 1.0 Skolkontoret 1 Innehåll Vad är Word Online?... 3 Arbeta i Word Online... 4 Logga in... 4 Skapa ett Worddokument via OneDrive... 4 Öppna ett redan skapat Worddokument i Word Online...

Läs mer

Användarhantering Windows 7 I denna laboration kommer vi att skapa nya användare och grupper och titta på hur man hantera dessa.

Användarhantering Windows 7 I denna laboration kommer vi att skapa nya användare och grupper och titta på hur man hantera dessa. Användarhantering Windows 7 I denna laboration kommer vi att skapa nya användare och grupper och titta på hur man hantera dessa. Antal: Enskilt Material: En dator med Windows 7 (Vista, Windows 8 eller

Läs mer

Sandsbro AIK - Manual till redaktörer - IdrottOnline Klubb

Sandsbro AIK - Manual till redaktörer - IdrottOnline Klubb Sandsbro AIK - Manual till redaktörer - IdrottOnline Klubb Redigeraläge Startsidan Beskrivning av flikarna Öppna hemsidan: http://www2.idrottonline.se/default.aspx?id=196012 Öppna ditt arbetsrum. Klicka

Läs mer

Att bygga enkla webbsidor

Att bygga enkla webbsidor Nivå 1 Att bygga enkla 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/18cplpy to find out what

Läs mer

WEBDESIGN A - DTR 1210

WEBDESIGN A - DTR 1210 Lektion 9: Tips tricks och diverse Bakgrundsbilder Bakgrundsfärg och textfärg är några sätt att ge sin hemsida ett visst utseende. Ett annat sätt är att använda bakgrundsbilder. Man behöver en bild: HTML-koden

Läs mer

Materialspecifikationer

Materialspecifikationer HD SYDSVENSKAN CITY NÄRA H I T TA H E M. S E MERAJOBB.SE Materialspecifikationer webb 2015 www.hdsydsvenskan.se Standardformat Panoramabanner Storlek: 980x240 px Enhet: Dator / Läsplatta Video / ljud:

Läs mer

Laborationer i kursmomentet Datoranvändning E1. Laboration nr 5: Mer om FrameMaker

Laborationer i kursmomentet Datoranvändning E1. Laboration nr 5: Mer om FrameMaker Sid 1 Laborationer i kursmomentet Datoranvändning E1 http://www.etek.chalmers.se/~hallgren/eda/ : Mer om FrameMaker 1996, 1997 Magnus Bondesson 1998 och 99-09-22 Thomas Hallgren 1 Introduktion I Laboration

Läs mer

Skärmbilden i Netscape Navigator

Skärmbilden i Netscape Navigator Extratexter till kapitel Internet Skärmbilden i Netscape Navigator Netscape är uppbyggt på liknande sätt som i de flesta program. Under menyraden, tillsammans med verktygsfältet finns ett adressfält. I

Läs mer

MANUAL WEBBADMINISTRATION. Webbadministration. Webbserver FTP. Datalagring & backup

MANUAL WEBBADMINISTRATION. Webbadministration. Webbserver FTP. Datalagring & backup Webbadministration QR-DOCS MANUAL WEBBADMINISTRATION Datalagring & backup Webbserver FTP Innehållsförteckning Inledning...2 Mappstruktur & namngivning av filer...3 Inloggning...5 Hem...6 Ny Produkt...7

Läs mer

Handledning för Installation av etikettskrivare

Handledning för Installation av etikettskrivare Handledning för Installation av etikettskrivare Windows 7 Expert Systems 2011 Expert Systems kundtjänst: Senast Uppdaterad: 15-02-23 Exder Etikettskrivare Windows 7 Sida 2 av 23 Innehållsförteckning 1.

Läs mer

UPPFÖLJNING AV- OCH SÄKERHETSINSTÄLLNINGAR FÖR WEBBSIDOR 1 (8)

UPPFÖLJNING AV- OCH SÄKERHETSINSTÄLLNINGAR FÖR WEBBSIDOR 1 (8) UPPFÖLJNING AV- OCH SÄKERHETSINSTÄLLNINGAR FÖR WEBBSIDOR 1 (8) Utöver dessa anvisningar är det viktigt att föräldrarna diskuterar internettryggheten och strävar att tillsammans skapa egna spelregler för

Läs mer

Moodle2 STUDENTMANUAL

Moodle2 STUDENTMANUAL Moodle2 STUDENTMANUAL Moodle är en lärplattform med hjälp av vilket du kan kommunicera, dela med dig av information och upprätthålla kontakten med lärarna, handledarna och de andra kursdeltagarna. För

Läs mer

Telenor Serviceweb Lathund för Borås Stad 2015-04-10

Telenor Serviceweb Lathund för Borås Stad 2015-04-10 Telenor Serviceweb Lathund för Borås Stad 2015-04-10 Inloggningslänk för Borås Stad http://net2.emrox.net/stable/net2/order_registration?command=init&ss2_xid=f568bf09 534552170AA101121779A10F Länken tar

Läs mer

Alla filer som bearbetar PHP script ska avslutas med ändelsen.php, exempelvis ska en indexsida till en hemsida heta index.php

Alla filer som bearbetar PHP script ska avslutas med ändelsen.php, exempelvis ska en indexsida till en hemsida heta index.php Introlektion PHP är ett av de enklare språken att lära sig just pga. dess dynamiska struktur. Det används för att bygga upp båda stora och mindre system. Några vanliga system som använder sig av PHP är

Läs mer

Spara filer eller mappar från ett kursrums filhanterare i Blackboard 9.1

Spara filer eller mappar från ett kursrums filhanterare i Blackboard 9.1 Sida 1 (19) Lärplattformsprojektet Stödmaterial Författare: Pehr-Henric Danielsson Innehållsförteckning Innehållsförteckning... 1 Spara filer eller mappar från ett kursrums filhanterare i Blackboard 9.1...

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

Kursplanering Utveckling av webbapplikationer

Kursplanering Utveckling av webbapplikationer Kursplanering Utveckling av webbapplikationer Fakta Ämne Programmering Poäng 40 Yh-poäng Kurskod YSYS-WEB Klass Systemutvecklare.NET Syfte och koppling till yrkesrollen För att kunna arbeta som systemutvecklare

Läs mer

Mappar och filer för webbsidor

Mappar och filer för webbsidor Mappar och filer för webbsidor I de4a dokument illustreras det hur du kan arbeta med mappar och filer, då du skapar webbsidor och ska publicera dem för uppgi=erna. Det visas också hur du skickar in redovisningar

Läs mer