Innehållshanteringssystem för webbsidor

Storlek: px
Starta visningen från sidan:

Download "Innehållshanteringssystem för webbsidor"

Transkript

1 Innehållshanteringssystem för webbsidor Joakim Bollström Högskolan på Åland serienummer 24/2014 Informationsteknik Mariehamn 2014 ISSN

2 Examensarbete Högskolan på Åland Utbildningsprogram: Författare: Arbetets namn: Handledare: Uppdragsgivare: Informationsteknik Joakim Bollström Innehållshanteringssystem för webbsidor Agneta Eriksson-Granskog Designr Jonas Öhblom Abstrakt: Mitt examensarbete handlar om att utveckla en webblösning med hjälp av Hypertext Markup Language, JavaScript, jquery, Cascading Style Sheets och Hypertext Preprocessor teknologier. Uppgiften utfördes på uppdrag av Designr och utgick från deras kravspecifikation av en webbplattform där deras kunder kan hanterar sina hemsidor från ett användarvänligt webbgränssnitt. Många liknande lösningar av denna typ finns, såsom Drupal, Joomla och WordPress webbpubliceringssystem. Nyckelord (sökord): jquery, JavaScript, HTML5, CSS, MySQL, PHP, AJAX, WYSIWYG Högskolans serienummer: ISSN: Språk: Sidantal: 2014: Svenska 25 Inlämningsdatum: Presentationsdatum: Datum för godkännande:

3 Degree Thesis Högskolan på Åland / Åland University of Applied Sciences Study program: Author: Title: Academic Supervisor: Technical Supervisor: Information Technology Joakim Bollström Content Management System for Webpages Agneta Eriksson-Granskog Designr Jonas Öhblom Abstract: My thesis is about developing a web solution using the Hypertext Markup Language, JavaScript, jquery, Cascading Style Sheets and Hypertext Preprocessor technologies. The task was carried out on behalf of Designr and was based on their requirements of a web platform where their customers can manage their websites from a user-friendly web interface. There are many similar solutions of this type Drupal, Joomla and WordPress publishing systems. Key words: jquery, JavaScript, HTML5, CSS, MySQL, PHP, AJAX, WYSIWYG Serial number: ISSN: Language: Number of pages: 2014: Swedish 25 Handed in: Date of presentation: Approved on:

4 INNEHÅLLSFÖRTECKNING 1 INLEDNING Syfte Backgrund Metod Avgränsningar BAKGRUND Uppdragsgivaren Designr Kravspecifikation Funktionella krav Icke-funktionella krav Användarfallsdiagram PROGRAMMERINGSSPRÅK OCH RAMVERK Hypertext Markup Language (HTML) Cascading Style Sheet (CSS) JavaScript (JS) Ckeditor Asynchronous JavaScript and JSON (AJAX) jquery jquery Validation jquery UI Hypertext Preprocessor (PHP) MySQL UTVECKLING Struktur Planering Ajax anrop ramverk Grafiska gränssnittets funktionaliteter... 15

5 4.5. WYSIWYG-redigering WYSIWYG-redigering sekvensdiagram Filöverföring Uppladdning av filer Resultat Resultat Förbättringar Grafiska Gränssnittet Optimera kodbas Användarguide SAMMANFATTNING... Error! Bookmark not defined. 7. KÄLLFÖRTECKNING... 21

6

7 1 INLEDNING 1.1. Syfte Syftet är att utveckla ett webbgränssnitt för att kunna editera hemsidor enligt principen What You See Is What You Get principen. Lösningen skall vara relativt enkel så att användaren inte behöver kännedom i webbutveckling eller programvara för att flytta filer till en server. Den färdiga produkten kommer att användas av Designrs (2.1) kunder med en godtycklig webbläsare som erbjuder ett gränssnitt för WYSIWYG-redigering och för att administrera dokument. Lösningen kommer också att underlätta Designr-administratörer att snabbt redigera kundernas hemsidor och ge support Backgrund Företag, organisationer och privatpersoner alla som behöver egna hemsidor för att representera sina företag online. Företag anlitar ofta en webbyrå som gör jobbet för dem medan ett en privatperson använder sig av ett innehållshanteringssystem i form av Wordpress till exempel. Ett innehållshanteringssystem eliminerar ofta kraven på att kunna programmera men det uppstår också ett annat hinder. Ett innehållshanteringssystem kan vara mycket komplicerat och kan ta tid att lära sig. Därför har Designr önskat om en lösning på som skulle kunna tillämpas till alla deras kunders hemsidor oberoende kodbas eller webhotelleverantör. Lösningen är planerad att vara modulär så att man kan avkoppla koppla funktioner som inte används eller sätta till nya när behoven ökar. Idén med att ha kunden att använda webbläsaren för att använda tjänsten var ett naturligt val på grund av antagandet att alla kunder har en webbläsare. 3

8 1.3. Metod Kraven på lösningen kommer Designrs kravspesification men också från beslut senare i utvecklingen. Information om teknologi som utnyttjas i lösningen är väl dokumenterat på internet. Applikationer som användas för att underlätta utvecklingen av lösningen är: - Adobe Dreamweaver, användarvänliga webbutvecklingsverktyg - SQLyog, modifiering av SQL-databaser från ett grafiskt gränssnitt - Filezila, FTP-klient för filöverföring - Google Chrome, Webbläsare för testning Avgränsningar Innehållshanteringssystemet kommer inte att vara optimerat för användning på mobilplattformer på grund av den begränsade skärmstorleken. Möjligheten är att man skulle kunna bygga ett skilt webbgränssnitt för stöd för mobil och läsplattor men för tillfället kommer det inte vara aktuellt. Det grafiska är lämnat till ett minimum för det krävs inte för att lösningen skall fungera som planerat. Det grafiska består av några ikoner samt ett simpelt färgschema för att underlätta under utvecklings skedes. 4

9 2. BAKGRUND 2.1. Uppdragsgivaren Designr Designr är ett företag med 6 anställda som skapar webb- och grafiska lösningar till små och medelstora företag. Designr befinner sig i Ekenäs i södra Finland. Mycket som man gör är specialtillverkat och använder sig inte av någon plattform så som Wordpress eller Drupal. Därför har det nu givit mig till updrag att skapa en lösning till detta behov Kravspecifikation En kravspecifikation har i uppgift att förse användaren och utvecklaren med ett gemensamt dokument på hur systemet skall fungera. Dessutom är kravspecifikationen mycket viktig under sluttesten, där systemets funktionalitet jämförs med de fördefinierade kraven. (Kravspecifkation, 2014) 2.3. Funktionella krav Dessa är funktioner som kommer att implementeras i lösningen: - Logga in / Logga ut: Användaren måste kunna logga in med ett eget lösenord. Lösenorden måste vara envägskrypterade med en slumpmässig text så att det är säkert att lagra dem i en databas. - Editera hemsidan: Användaren skall kunna modifiera innehåll på sin sida. - Ladda upp: Det skall vara möiligt för användaren att sätta egna bilder på hemsidan och då måste det först laddas till webbhotellet. - Radera filer: Användaren skall kunna radera gamla bilder. - Support: Användaren ska enkelt kunna få support via en e-postadress eller inbyggd chat i systemet Icke-funktionella krav Ett viktigt krav är att lösningen skall ha ett lätt användargränssnitt. Användaren förväntas inte kunna någonting om webbutveckling eller servrar det enda han/hon behöver känna till är hur man använder en webbläsare. 5

10 Andra viktiga punkter är att innehållshanteringssystemet skall var lösenords skyddat samt kunna bli kopplat till ett konto för att ah entydiga inlogningsuppgifätr för en större mängd användare. Och en modulärisk system design hjälper till för att möjliggöra att i fortsättningen kunna utveckla systemet vidare för kommande behov Användarfallsdiagram Diagrammet i figur 1 visar den huvudsakliga functionalitetn implementerat innehållshanteringssystemet. i Figure 1 - Use case diagram for the user 6

11 3. PROGRAMMERINGSSPRÅK OCH RAMVERK Kapitlet kommer att kort presentera de programmeringsspråk och ramverk som används för programmet. Modern webbutveckling går ofta ut på att använda sig av många programmeringsspråk Hypertext Markup Language (HTML) HyperText Markup Language eller html, skapades för forskare att kunna dela filer. Det har sedan blivit en standard för World Wide Web och att använda html för en form att representera document på internet i form av hemsidor, bloggar och annan data. HyperText Markup Language används för att ange dokumentets struktur i en sådan form att en webläsare kan represetera html-sidan i ett läsbart tillstånd till användaren. Detta gör man med hjälp av element-taggar eller tags, de har i regel alltid en starttag och en sluttag. (W3C, 2014) (W3C, 2014) I Figur 2 ser vi ett html-dokument som bestäms av <html>, detta är ett minimerat upplägg för att kunna visa webbsidan korrekt. Taggen <!> kan användas till utvecklaren för att lämna kommentarer i kodbasen. Figur 2 har dock en sådan tagg längst upp i dokumentet som inte är en kommentar utan ett doctype-definition, W3C (World <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>title of the document</title> </head> <body> <h1>a Minimum HTML5 Document</h1> <p> This is a paragraph </p> </body> </html> Figur 2- Ett minimalt html5 dokument Wide Web Consortium) har godkänt taggen <!> att också användas för dokumenttyps-definition. (W3C, 1999) Just denna <!DOCTYPE html>-tagg är den senaste standarden i webbutveckling HTML5. Doctype-taggen hjälper webbläsaren att tolka sidan i rätt version för äldre standarder har kanske inte stöd för nya taggar så som <audio>-och <video>-taggar. Ett html-tagg ska alltid innehålla en <head> för allt som inte har en visuell betydelse så som JavaScript-kod och CSS-taggar och en <body> för det visuella delan av sidan så som text, bilder och videotaggar. Med 7

12 denna information kan man skapa en mycket enkel hemsida men inte så dynamisk och skalbar Cascading Style Sheet (CSS) Cascading Style Sheet eller CSS har en stor betydelse i dagens webbutveckling, när det gäller färg, teckensnitt, justering av text och objekt m.m. En enda CSS-mall kan hantera flera htmldokument och det är då enkelt att modifiera stilarna genom att ändra reglerna i CSS-mallen, se figur 3. HTML5 och CSS3 har tagit ett steg längre och Figure 3 - CSS struktur möjliggjort formateringar och effekter som inte tidigare fanns i HTML standarden. (W3C, 2011) All formatering bör finnas i externa mallar vilket gör att mängden grafisk specifik kod i själva dokumentet minskar och gör att sidorna laddas snabbare i webbläsaren. Då samma mall används för varje dokument behöver inte webbläsaren läsa in CSSinstruktionerna på nytt varje gång en ny sida anropas. Figur 4 visar ett exempel på fyra CSS instruktioner i en extern mallfil. CSS så kallade selectors används för att välja vilken del av html-trädet en stil skall gälla. body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 18px; } h1 { font-size: 24px; font-weight: normal; letter-spacing: 2px; }.textformat1 { color: #336699; } body p.textformat2 { color: #990000; } Figure 4 - CSS regler En selector kan välja alla element av en viss typ, från element med vissa attribut bland annat id, class, etc. till delar beroende på hur de är placerade i förhållande till, eller inkapslade i, andra i dokumentträdet JavaScript (JS) JavaScript ger oss saker som animering, dynamiska förändringar och mer. JavaScript kan också läsa input från våra I / O-enheter (t.ex. mus och tangentbord) för att göra sidan mer interaktiv för användaren. Det är möjligt att konstruera 8

13 JavaScript-bibliotek som underlättar användningen av språket och snabbar upp utvecklingen. (Mozilla Developer Network, 2014) (Web Developers Notes, 2014) Ckeditor Ckeditor är ett javascript-bibliotek som erbjuder WYSIWYG-support som utnyttjas i Text editor modulen. Ckeditor fungerar som en översättare från formaterad text till html. Bibliotek stöder enkla funktioner så som fet, kursiv och understryk, men också punktlistor, typsnitt och tabeller. Det går att läga till bilder men det krävs att bilden redan är på internet, hos ett webbhotell eller filserver. (CKSource, 2014) Figure 5 - Ckeditor GUI (CKSource, 2014) Något som kommer att underlätta användningen för många är funktionen Paste from Word och som möjliggör att kopiera in ett Word-dokument och så omformas det till html och publiceras sedan med hjälp av AJAX Asynchronous JavaScript and JSON (AJAX) Asynchronous JavaScript eller AJAX är ett sätt att utföra ett anrop till en server i bakgrunden. Som namnet säger görs anropet asynkront, i form av XMLHttpRequest. Data objektet innehåller är godtycklig men måste vara ett xml eller json formaterat som. Returndatat läses in från ett respons på ett XMLHttpRequest. Denna teknologi stöder också returnvärden från servern i format på html-, xml-, json- och textformaterade strängar. (Garrett, 2005) Innehållshanteringssystemet kommer att använda sig av AJAX för all server kommunikation och modifiera sidans innehåll med det data som servern erbjuder. Detta gör att laddning av sidor är minimal eftersom bara en del av sidans innehåll behövs uppdateras. stora mängder data kan nu laddas upp i bakgrunden och inte störa användaren. 9

14 3.4. jquery jquery är ett cross-browser JavaScript-bibliotek som har funktioner för att förenkla utveckling i javascript. Bibliotek erbjuder funktioner som lätt kan påverka sidan dynamiskt eller implementera lätta funktioner för användare. jquery-bibliotek stöder också möiligheten att utvidga standard funktionaliteten med hjälp av plugins så som grafiska eller funktionella tillägg. (jquery, 2014) jquery använder sig av en speciell syntax, i figur 6 till exempel har jquery ett grundobjekt som är ett $-tecken. Från det objektet kan man anropa funktioner precis som klasser i java. Ett ( ) används $(function() { för att indikera en selector. De $("body").on("submit", function(event){ används för att kunna modifiera en var user = $('input[name="username"]').val(); del av html-koden med hjälp av var pass = $('input[name="password"]').val(); $.getjson( index.php,{user: +user+, javascript. T.ex. $("body") är en pass: +pass+ }); selector för en body-tagg. Nu kan }); man ansluta en annan jquery - Figure 6 - jquery kod exempel funktion till body-taggen, figur 6 On är en funktion som väntar på att en viss händelse har inträffat t.ex. submit och sedan kör funktionen som har givits. Som andra parameter i detta fall är det en anonym funktion som skrivs rakt in i den existerande funktionen. Allt detta är tillåtet för funktioner kan tilldelas variabler eller skickas till andra funktioner som argument. Passning av funktioner som argument är extremt vanligt i jquery. I figur 6, efter att en förväntad händelse har inträffat kommer koden att köras och använda sig av $.getjson som skickar ett XMLHttpRequest med data i form av ett json-objekt. Servern tar sedan och hanterar anropet och returnerar passande respons. Responsen kan vara allt från text till filer eller bilder. I detta fall kommer det att returneras ett statusvärde om inloggningen har lyckats och ett meddelande som skrivs ut på sidan. Det två viktigaste plugins som är implementerade i denna lösning är jquery Validation och jquery UI plugins. 10

15 jquery Validation jquery Validation är ett jquery-tillägg med möjlighet att granska formulärvärden och sätta krav på vad skall gå att skriva i ett textfelt. Tillägget erbjuder också mölighet att dynamiskt visa respons till användaren om textfält som inte uppfyller ett specifikt krav så att det går att korrigera. (jquery Validation Plugin, 2014) Innehållshanteringssystemet kommer att innehålla flera textfält för att kunna konfigurera olika värden så det är naturligt att använda sig av ett sådant tillägg för att det stöder jquery-biblioteket för motiverat genomförande jquery UI jquery UI är ett jquery-tillägg som ger abstraktioner för lågaktiv interaktion som kan användas för att bygga interaktiva webbapplikationer. (jquery, 2014) jquery UI kommer att vara tidsbesparande att använda för att slippa skapa egna teman för innehållshanteringssystemet. Vissa komponenter som jquery UI erbjuder, är t.ex. knappar, listor, drop down-menyer, navigeringsfält, galler, skjutreglage, sidövergångar och mycket mer Hypertext Preprocessor (PHP) Hypertext Preprocessor eller PHP är ett server-side-skriptspråk som oftast används till webbutveckling men också som ett programmeringsspråk för allmänt ändamål. PHP används som en modul till webbserver t.ex för Apache Webserver, och som tar hand om alla php script i ett *.php-dokument. (PHP, 2014) PHP har ett brett utbud på funktionalitet i sig själv och mycket mer via olika tillägg, som erbjuder både högnivådatabasanrop eller lågnivåsockethandtag. I innehållshanteringssystem kommer många högnivåfunktioner användas, t.ex databasanslutning och autentisering av användare samt ftp-anslutning för fil - överföringar mellan server 2 server, och vissa lågnivåfunktioner så som filmanipulering. 11

16 Skriptspråket är inte komplicerat, fast för en som är ovan eller kommer från traditionell programering kan det vara konstigt att det inte behövs datatyper eller minnes-hantering. PHP hanterar och väljer själv sina datatyper och ofta är det inte nödvändigt att spesifiera en. det är motiverat att inte göra det då att php kan optimera vid runtime i stället. För att använda sig av PHP i ett webb dokument krävs det att man börjar med ett <?php?> tagg så som i figur 7. Där görs ett echo-anrop som är en typ av utskriftsfunktion. Resultatet blir en paragraf- <!DOCTYPE html> tagg med Hello World som värde. <html> <head> PHP taggar kan läggas vart som helst <title>php Test</title> </head> i ett html-träd, till och med utanför <body> html-taggen. Beroende på vad man <?php echo '<p>hello World</p>';?> </body> vill göra så kan det vara bra att skilja </html> html och PHP åt för att skilja business Figure 7 - PHP Hellow world program logic ifrån grafiska gränssnittet, speciellt när det handlar om databasanslutningar och lösenord. Då vill man inte ta risken att något läcker ut via ett falskt http-anrop eller vid ett oförväntat beteende MySQL MySQL är en databas som är ett av Structured Query Language som används för att upprätthålla data i en relationsdatabas. SQL går ut på att organisera information i tabeller som lagras i en relationsdatabas, så som MySQL. För att hantera data används Query-kommandon för att läsa, skriva och radea information. Kommandona är strukturerade i fem delar: Vad skall göras? Vilka kolumner berörs av detta kommando? Var i databasen och hur bestämma förändringen? Genom att på detta sätt hantera data kan man distribuera information mycket lättare över olika medier, så som web, mobil och applikationer. (Welling & Thomson, 2003) MySQL är strukturerat på ett sådant vis att det innehåller databaser, som innehåller allt från tabeller och lagrade funktioner för just denna databas. olika SQL databaser kan skilja lite på strukturen men i stort sett har de alla samma grundfunktionalitet. 12

17 4. UTVECKLING Detta kapitel beskriver hur och vad som används i utvecklingens olika skeden, allt från planering till implementation. Kapitlet klargör också värför vissa beslut favoriserades mer än andra Struktur För att innehållshanteringssystemet skall kunna funktionera krävs det en databas och en webbserver med någon form av CGI-integrering. Microsoft Internet Information Services (IIS) valdes som webbserver eftersom Designrs web hosting är baserat på Microsoft Widows Server 2008-teknologi, som erbjuder enkla administrationers verktyg och ett grafiskt gränsnitt. Internet Information Services är också modulärt vilket betyder att skala av det som inte behövs eller lägga till extra funktionalitet. I detta fall lägger vi till php som en CGI-integrering. Som databas valdes MySQL över Microsoft SQL Server. Detta beror på att php har klasser för MySQL-databaslösningar som har mera funktionalitet än php-standard SQL-implementation Planering Efter att valet av php-integrering gjordes ett diagram på hur innehållshanteringssystemet tänkte fungera. Fokus på resurshantering och att avgränsa kunddata från innehållshanteringssystemets server. Tanken var att erbjuda lösningen som en extra tjänst åt kunder som inte kände till webbutveckling och möjligen minska på behovet på support. Ett problem uppstod dok när kundens web host server inte är på rätt plattform eller updaterad till det nyaste. Tanken att distribuera innehållshanteringssystemet som en utvecklingsplattform skulle motverka idén för modularitet och bugghantering skulle bli en mycket krävande operation. Problemet löstes med att använda ftp-moduler i php för att kommunicera med externa webservrar, fördelen med ftp är att kompabilitetsproblem mellan en webbserver och dess mjukvara minskar för att innehållshanteringssystemet inte behöver installeras på end extern server utan man kan manipulera data från en 13

18 centraliserad server, där en utvecklare har lättare att implementera ny funktionalitet och test för buggar i existerande kodbas. Figur 8 visar strukturen på innehållshanteringssystemets moduler och hur de kommunicerar med varandra. Figure 8 - Innehållshanteringssystemets struktur diagram 4.3. Ajax anropsramverk Innehållshanteringssystemet har två delar, ett grafiskt gränssnitt och ett PHP backens. Därför är det viktigt att få dessa delar att kommunicera på ett entydigt sätt med varandra. Lösningen är AJAX som snabbt och plattformsoberoende klarar av skicka data med osynlig koppling mellan server och grafiskt gränssnittet. AJAXramverket har planerats att använda ett fast satt schema på hur kommunikationen till PHP-servern skall utföras. Figur 9 visar hur ett typiskt AJAX-anrop, json, används för att formatera data till en hanterbar struktur som formas om på server sidan. PostTypeID bestämmer vilken modul och PostTypeAction vilken funktion i modulen som önskas. PostNodeData används då modulen 14 { } "PostTypeID": "files", "PostTypeAction": "main", "PostNodeData": {} Figure 9 AJAX-anrop

19 kräver någon indata för att hantera anropet, t.ex uppdatera text, upp- och nedladdning av filer, m.m. Returndatan på AJAX-anropet är strukturerat på likadant sätt i ett json-objekt, kommunikationen är en tydlig och möjliggör utveckling på andra plattformer Grafiska gränssnittets funktionaliteter Grafiska gränssnittet är planerat att visualisera PHP backend-moduler så att en användare kan hantera sina resurser. Funktionaliteten kan baseras på vilka moduler som just denna användare behöver och som kan ändras vid behov. Detta upplägg möjliggör för implementation av ny funktionalitet till det grafiska gränssnittet oberoende om det är ett mobilt gränssnitt eller som i detta fall webbgränssnittet WYSIWYG-redigering Ckeditor möjliggjorde Microsoft Word-liknande funktionalitet i webbläsaren. Grafiska gränssnittet är enkelt att implementera till en webbsida fast scriptet inte är på samma server som själva html-dokumenten. Ckeditor javascript-biblioteket importeras genom en enkel scripttag som placeras i headtaggen. Även om biblioteket har stöd för jquery kan implementaionen tillsammans upplevas som besvärlig. Problem kan då uppstå som får editorn att inte fungera som förväntat. Om jquery tillåts att skapa och kontrollera Ckeditor-objekten så fungerar det bättre än att upprätthålla två bibliotek parallelt. Risken är att det blir konflikter och funktionaliteten kraschar. Konfiguering av biblioteket görs från en extern fil så det kan modifieras med php för att byta språk på verktyg och verktygstips etc. En av inställningarna möjliggör uppdatering av textdata att göras via AJAX-anrop till PHP-servern. Kraven är att PHP-servern klarar av att hantera sådan data och därför utnyttjas jquerys AJAX-objekt för att kunna skicka extra parameter till server, för kontroll av vilka filer på en extern server som skall modifieras. 15

20 WYSIWYG-redigering sekvensdiagram Ett sekvensdiagram är ett bra sätt att visa hur en viss funktionalitet är förväntad att fungera. Figur 10 är ett sekvensdiagram över editering av ett html-document över server 2 server -uppkopplingen. Figure 10 - WYSIWYG sekvensdiagram Logiken kommer att hanteras av php på Entry Point för att minska på stress för remote server. Beroende på modul så kan det bli mycket trafik eller högt prosessorbehov. Ny funktionalitet kan implementeras utan att behöva modifiera existerande kodbas och därmed vara säker på att äldre webbsidors moduler fortsätter att fungera. Detta är ytterst viktigt för att olika sidor har olika behov och strukturer som det kan bli invecklat att inkluderar i ett dynamiskt innehållshanteringssystem Filöverföring För att användaren skall kunna ladda upp eget material krävs det en filhanterare som är som en ftp client doc inbyggd i webbgränssnittet. Användaren har förmodligen ett webbhotell med inloggningsuppgifter till ett ftp-konto. Genom ftp-modulen kan php kommunisera med denna server och hämta en lista på filer som existerar på en extern ftp server. Denna information representeras för användaren i form av en lista 16

21 med filer och mappar, som kan navigeras med hjälp av länkar med spesifik data för att begära en viss resurs. Figur 11 visar ett exempel på en raderingshändelse som användaren har begärt och fått en bekräftelse om att anropet slutfördes korrekt. Med implementaion av jquery UI har det skapats en interaktiv lista på filer och mappar. Valda filer kan sedan tas bort eller flyttats till mappar för att organisera om filstrukturen efter användarens behov. Figure 11 - File module GUI Filöverföringmodulen har AJAX-anrop som hämtar information för fillistan och söker ikoner för bilder för navigering. Detta är implementerat som en liten javascriptloop som itererar igenom listan och försöker hitta fil-format som är av typen bild (t.ex png, jpg och gif). Scriptet skapar en lista på bilder som söks från extern ftp-server med hjäpl av en php- ftp- modul. Fördelen med att ladda in data asynkront minskar sidans belastning och körtid, iställer kan man göra flera anrop med mindre payload Uppladdning av filer Uppladdning av filer är automatisk men i figur 12 erbjuds också en manuell lösning för speciella plattformer som inte stöder drag and drop -teknologi. Add files öppnar webbläsarens inbyggda filhanterare, som kan användas för att Figure 12 - fil modul kontroller välja filer för uppladding. Start upload startar manuella uppladdningssättet. Med Cancel upload kan användaren tömma upp laddning kön som Add files skapat. 17

22 5. RESULTAT Innehållshanteringssystemet fyller kravspecifikationen som skapades tillsammans med Designr. Vissa friheter har tagits med implementationssätt och gränsitet men vi skulle ändå godkänna denna lösning som färdig för att ta i bruk. Följande punkter är uppnådda resultat: Innehållshanteringssystemet är enkelt att använda Modularitet, möjliggör för nya moduler att läggas till vid behov och tas bort Enkel WYSIWYG-redigering lösning Möjlighet att ladda upp filer via webbläsaren Flytande server 2 server kommunikation Lösenordskyddad arkitektur 5.1. Resultat Designr har visat stort intresse och kan tänkas erbjuda denna lösning som en tjänst för deras kunder. Speciellt kunder som har behovet att uppdatera deras hemsidan ofta, behöver nu inte vänta på att Designr utvecklare gör det utan klarar av uppdateringen själv. Innehållshanteringssystemet i sig är inte komplext så en stor del av information kan hittas från internet och andra medier. det är den enorma kodbasen som kan ställa till med problem speciellt när en ändring söndrar något annat i kedjan. Därför var det bra att avgränsa alla grafiska krav för det är något som också tar tid och erbjuder mycket lite till lösningens syfte Förbättringar Innan innehållshanteringssystemet kan publiceras till användare är det några punkter som ännu skall fortsättas på. Det handlar om att göra det enklare för användaren och administratorn att kunna använda lösingen Grafiska Gränssnittet Några förbättringar till lösningen skulle vara det grafiska, färgval och gemensam design på moduler. För detta behöver man en grafiker som skulle kunna rita upp 18

23 en skiss på menyer och knappar. En sådan ändring skulle inte påverka funktionaliteten och därmed vara ganska problem fritt att Implementera Optimera kodbas För innehållshanteringssystemet existerar det inte mycket dokumentation och själva kodbasen är svårläslig. Vissa biggar existerar också bara för att det finns gammal kod som inte fungerar som tänkt men som inte har modifierats, p.g.a. risk för att det söndrar äldre functionalitet. En metod för att lösa detta är testdriven utveckling för att garantera att enskilda funktioner kommer att fortsätter fungera Användarguide Användarguide ska utvecklas för både en användare och för administratorn. För en användare borde det inte krävas så mycket, bara enkla instruktioner för användning. För administration kräver det mera detaljer av systemet och dess underliggande funktionalitet. Det ska också finnas info tillgängligt för kommande utvecklare för att kunna skapa egna moduler och hur man implementerar dem. 19

24 6. SLUTSATS Att utveckla en sådant här webbtjänst där man berör många olika programmeringsspråk så som JavaScript, AJAX, HTML5 och PHP är mera krävande. Det finns alltid mycket att tänka på om det är sen grafiskt eller backend, vissa programmeringsspråk är bäst lämpade för en viss uppgift. Man kan argumentera att den nuvarande kodbasen kan förbättras, men i slutändan gör applikationen vad den var gjord för, ett användarvänligt innehållshanteringssystem med möjlighet att utvidga funktionaliteten vid behov. 20

25 7. KÄLLFÖRTECKNING CKSource. (2014). ckeditor.com. Hämtat från Ckeditor: den Garrett, J. J. (den ). Ajax: A New Approach to Web Applications. Hämtat från Wikipedia: https://web.archive.org/web/ /http://www.adaptivepath.com/ide as/essays/archives/ php den jquery. (den ). jquery. Hämtat från jquery: den jquery. (den ). jquery UI. Hämtat från jquery UI: den jquery Validation Plugin. (den ). jquery Validation Plugin. Hämtat från jquery Validation: den Kravspecifkation. (den ). Vad är en kravspecifikation? Hämtat från Kravspecifikation: den Mozilla Developer Network. (den ). JavaScript. Hämtat från Mozilla Developer Network: https://developer.mozilla.org/en/docs/web/javascript den PHP. (den ). PHP. Hämtat från PHP: Hypertext Preprocessor: den W3C. (den ). SGML document introducing you to SGML. Hämtat från den W3C. (den ). Cascading Style Sheets (CSS) Snapshot Hämtat från W3C: den W3C. (den ). HTML & CSS. Hämtat från W3C: den W3C. (den ). The global structure of an HTML document. Hämtat från W3C: den Web Developers Notes. (den ). Programming languages on the internet. Hämtat från Web Developers Notes: den Welling, L., & Thomson, L. (2003). PHP and MySQL Web Development. i L. Welling, & L. Thomson, PHP and MySQL Web Development (s. 871). sams. 21

Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka

Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka Webben som verktyg Idag: Hur hänger det ihop? Viktiga tekniker Stegen i ett webbprojekt Verktyg Dreamweaver Photoshop Joomla CMS Storyboard och flödesschema Fixa webbhotell Hur hänger det ihop? För att

Läs mer

Hemsideutveckling för Anjool AB

Hemsideutveckling för Anjool AB Beteckning: Akademin för teknik och miljö Hemsideutveckling för Anjool AB Christopher Gidlöf Maj 2012 Examensarbete 15hp B nivå Datavetenskap Internetteknologi Examinator: Carina Petterson Handledare:

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

WP-Edit. Robin Larsson Martin Davik. Examensarbete, grundnivå, 15 hp Datavetenskap Internetteknologprogrammet

WP-Edit. Robin Larsson Martin Davik. Examensarbete, grundnivå, 15 hp Datavetenskap Internetteknologprogrammet WP-Edit Robin Larsson Martin Davik 2014 Examensarbete, grundnivå, 15 hp Datavetenskap Internetteknologprogrammet Handledare: Anders Jackson Examinator: Carina Pettersson WP-Edit av Robin Larsson Martin

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

CMS. - Content management system

CMS. - Content management system CMS - Content management system Agenda CMS Server, webbhotell och FTP Wordpress, ställ mycket frågor Om vi hinner - Snabb genomgång av CMS - uppgiften Nu & Då Sidor med bara HTML och CSS kräver manuell

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

E12 "Evil is going on"

E12 Evil is going on E12 "Evil is going on" Föreläsning 12, HT2014 AJAX Kurs: 1dv403 Webbteknik I Johan Leitet E12 Evil is going on Dagens agenda AJAX XMLHttpRequest-objektet JSON Vad är AJAX? Asynchronous JavaScript and XML

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

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

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

ITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML

ITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML ITK:P2 F1 FTP, HTTP, HTML, XML och XHTML DSV Peter Mozelius 1 Hemsidor med HTML Hur många av er har provat på att bygga en egen hemsida med HTML eller XHTML? För hand eller med hjälpverktyg? Har ni lagt

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

Varför ska man använda ett CMS? Vilka är fördelarna och är det alltid bra? Kattis Lodén 2010-03-18

Varför ska man använda ett CMS? Vilka är fördelarna och är det alltid bra? Kattis Lodén 2010-03-18 Varför ska man använda ett CMS? Vilka är fördelarna och är det alltid bra? Kattis Lodén 2010-03-18 Innehåll Inledning... 3 Fakta... 4 Innehåll... 4 Texthantering... 4 Granskning och versionshantering...

Läs mer

ATT GÖRA WEBBSIDOR. Frivillig labb

ATT GÖRA WEBBSIDOR. Frivillig labb Numerisk analys och datalogi KTH 100 44 Stockholm Kerstin Frenckner, tel 790 7143, e-post kfrenck@nada.kth.se 2D1339 Programkonstruktion Hösten 2001 Datorintroduktion Frivillig labb ATT GÖRA WEBBSIDOR

Läs mer

Webbservrar, severskript & webbproduktion

Webbservrar, severskript & webbproduktion Webbprogrammering Webbservrar, severskript & webbproduktion 1 Vad är en webbserver En webbserver är en tjänst som lyssnar på port 80. Den hanterar tillgång till filer och kataloger genom att kommunicera

Läs mer

Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1

Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Bilder och optimering --- Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi

Läs mer

Instruktioner. Innehåll: 1. Vad är Kimsoft Control (SIDA 2) 3. Hem (SIDA 2)

Instruktioner. Innehåll: 1. Vad är Kimsoft Control (SIDA 2) 3. Hem (SIDA 2) 1 Instruktioner Innehåll: 1. Vad är Kimsoft Control (SIDA 2) 2. Logga in (SIDA 2) 3. Hem (SIDA 2) 4. Skapa/redigera sidor (SIDA 3) 41. Lägg till ny sida (SIDA 3) 42. Avancerat (SIDA 4) 5. Texteditor (SIDA

Läs mer

DOTNETNUKE SKOLNING Skapat: den 20 november 2012

DOTNETNUKE SKOLNING Skapat: den 20 november 2012 DOTNETNUKE SKOLNING Skapat: den 20 november 2012 CONTENTS WebbSidans Layout... 3 Inloggning... 3 Kontroller för administrering... 4 Växla visnings läge... 4 View Läge... 4 Edit Läge... 4 Layout Läge...

Läs mer

Jesper Holmstedt STARTPAKET FÖR CMS-VERKTYG. MED INRIKTNING PÅ JOOMLA!

Jesper Holmstedt STARTPAKET FÖR CMS-VERKTYG. MED INRIKTNING PÅ JOOMLA! Jesper Holmstedt STARTPAKET FÖR CMS-VERKTYG. MED INRIKTNING PÅ JOOMLA! Enheten för företags ekonomi och turism. 2014 FÖRORD Mitt lärdomsprovs teoretiska del handlar om grunderna i olika sorters CMSverktyg,

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

Introduktion till MySQL

Introduktion till MySQL Introduktion till MySQL Vad är MySQL? MySQL är ett programmerings- och frågespråk för databaser. Med programmeringsspråk menas att du kan skapa och administrera databaser med hjälp av MySQL, och med frågespråk

Läs mer

<script src= http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js></script> AngularJS Skriven av: Isak Glans. Datum: 2015-04-29. Kurs: Webbutveckling. Lärare: Per Sahlin. Utbildning: Systemutvecklare i.net, Newtons Yrkeshögskola. 1 Sammanfattning Syftet med denna uppsats är att

Läs mer

Webbpublicering. Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se)

Webbpublicering. Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se) Webbpublicering Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se) Föreläsningsöversikt Föreläsning 1 Vad är webbpublicering? Lite historia - Internet och webben Statiska webbplatser Grundkoncept: webbläsare,

Läs mer

Användarhandledning Version 1.2

Användarhandledning Version 1.2 Användarhandledning Version 1.2 Innehåll Bakgrund... 2 Börja programmera i Xtat... 3 Allmänna tips... 3 Grunderna... 3 Kommentarer i språket... 4 Variabler... 4 Matematik... 5 Arrayer... 5 på skärmen...

Läs mer

Webbprogrammering, grundkurs 725G54

Webbprogrammering, grundkurs 725G54 Webbprogrammering, grundkurs 725G54 Lab 4, 5 ERD PHP + MySQL Återblick Idag Sessions PHP och MySQL för samband Lab 6 725G54: Genomgång projektuppgift Avstämning av kursmål Om sessions På IDA måste ni göra

Läs mer

Välkommen! SA S PSA S Im I puls s Mobilite t t e 8 1

Välkommen! SA S PSA S Im I puls s Mobilite t t e 8 1 Välkommen! SAPSA Impuls Mobilitet 81 Impuls sponsorer 2012 Guldsponsorer SAPSA Impuls Mobilitet 81 Mobilitet 81: Mobil reseräkningsapp med möjlighet att fotografera kvittona Christer Ingemarsson Lena Kågedal

Läs mer

Programbeskrivning. Chaos på Web. Version 1.0 2005-09-21

Programbeskrivning. Chaos på Web. Version 1.0 2005-09-21 2005-09-21 Programbeskrivning Chaos på Web Version 1.0 Chaos systems AB Tel. 08-410 415 00 e-post: info@chaos.se Solna strandväg 18, 6tr Fax. 08-29 06 66 http://www.chaos.se 171 54 SOLNA Reg. nr: 556476-6813

Läs mer

Hemsideprojekt för Kulas Ponnystuteri

Hemsideprojekt för Kulas Ponnystuteri Beteckning: Institutionen för matematik, natur- och datavetenskap Hemsideprojekt för Kulas Ponnystuteri Ida Svedlund-Ståhl 06-2007 Examensarbete, 10 poäng, B Datavetenskap Internetteknologi Examinator:

Läs mer

Innehåll. Webbproduktion. Prototyputveckling. Arbetsgång (R)

Innehåll. Webbproduktion. Prototyputveckling. Arbetsgång (R) Innehåll Webbproduktion Produktion och publicering av större webbplatser Produktion Användbarhet/Användbarhetstest Publicering Underhåll Arbetsgång (R) 1) Utred mål och syfte (verksamhets- och målgruppsanalyser)

Läs mer

Undervisningen ska ge eleverna tillfälle att arbeta i projekt samt möjlighet att utveckla kunskaper om projektarbete och dess olika faser.

Undervisningen ska ge eleverna tillfälle att arbeta i projekt samt möjlighet att utveckla kunskaper om projektarbete och dess olika faser. WEBBTEKNIK Webbteknik används för att utveckla och vidareutveckla statiska och dynamiska webbsidor, webbplatser, webbapplikationer eller andra applikationer där webbtekniker används, till exempel applikationer

Läs mer

Webbsida och ett bokningssystem

Webbsida och ett bokningssystem Beteckning: Institutionen för matematik, natur- och datavetenskap Webbsida och ett bokningssystem Admir Grabovac juni 2008 Examensarbete, 15 högskolepoäng, B Datavetenskap Internetteknologi Handledare:

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

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

Mobila tjänster för lojalitets system. Mobila tjänster för lojalitetssystem Mobile services for loyalty network

Mobila tjänster för lojalitets system. Mobila tjänster för lojalitetssystem Mobile services for loyalty network Mobila tjänster för lojalitets system Mobila tjänster för lojalitetssystem Mobile services for loyalty network Andreas Björklund EXAMENSARBETE 2012 Datateknik Postadress: Besöksadress: Telefon: Box 1026

Läs mer

dit06omr@cs.umu.se 12 juni 2009 Projektplan Webb-baserat bokningssystem för flyg Kurs: Applikationsutveckling för internet, TFE

dit06omr@cs.umu.se 12 juni 2009 Projektplan Webb-baserat bokningssystem för flyg Kurs: Applikationsutveckling för internet, TFE Projektplan Webb-baserat bokningssystem för flyg Kurs: Applikationsutveckling för internet, TFE VT-09 Innehållsförteckning Inledning & problembeskrivning...1 Systembeskrivning...2 Affärsobjekt...2 Databasen...4

Läs mer

Kort om World Wide Web (webben)

Kort om World Wide Web (webben) KAPITEL 1 Grunder I det här kapitlet ska jag gå igenom allmänt om vad Internet är och vad som krävs för att skapa en hemsida. Plus lite annat smått och gott som är bra att känna till innan vi kör igång.

Läs mer

Nya www.lu.se liten manual i Drupal 2012-03-07 Version 1.1

Nya www.lu.se liten manual i Drupal 2012-03-07 Version 1.1 Nya www.lu.se liten manual i Drupal 2012-03-07 Version 1.1 Innehåll Inloggning... 3 Beskrivning av översta menyn... 3 Förklaring av Workbench... 3 My content:... 3 Skapa innehåll... 3 My sections... 3

Läs mer

Användarmanual för Publish 3.5 Sida 1(1) Användarmanual för Mios Publish 3.5

Användarmanual för Publish 3.5 Sida 1(1) Användarmanual för Mios Publish 3.5 Användarmanual för Publish 3.5 Sida 1(1) Användarmanual för Mios Publish 3.5 Användarmanual för Publish 3.5 Sida 2(2) INNEHÅLL 1 Allmän information...3 2 Hur komma igång?...4 3 Uppdatering av befintliga

Läs mer

Blogga med Wordpress

Blogga med Wordpress Blogga med Wordpress Introduktion En blogg kan användas på en lång rad olika sätt, även om det vanligaste kanske är att se den som en mer eller mindre publik yta på nätet att dela med sig av tankar och

Läs mer

URVAL AV UTFÖRDA FRILANSJOBB

URVAL AV UTFÖRDA FRILANSJOBB URVAL AV UTFÖRDA FRILANSJOBB Här följer information om ett urval av utförda frilansjobb. CONTENT MANAGEMENT- OCH GROUPWARE RAMVERK Kund: Sundance MD&M En modulär flashapplikation med en PHP och MySQL backend

Läs mer

Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5

Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5 Introduktion till programmering Föreläsning 5 Programmering av webbsidor. Webbens grundbegrepp HTML HTML (HyperText Markup Language) är det språk som används för att skriva webbsidor. HyperText: text med

Läs mer

Installera din WordPress med 9 enkla steg

Installera din WordPress med 9 enkla steg Installera din WordPress med 9 enkla steg Den här artikeln förutsätter att du har satt upp en webbserver eller har köpt ett webbhotell där du kan placera din nya WordPress hemsida. Om du inte har det,

Läs mer

Databaser på webben. Revision 5 2000-12-04. Johan Näsholm, johan@nasholm.com

Databaser på webben. Revision 5 2000-12-04. Johan Näsholm, johan@nasholm.com 1 (8) Databaser på webben Revision 5 2000-12-04 Johan Näsholm, johan@nasholm.com Den senaste versionen av detta dokumentet finns på www.nasholm.com/docs/dbweb.pdf Syftet med denna skrift och den därtill

Läs mer

Manual till DIKO 2012-10-19

Manual till DIKO 2012-10-19 Manual till DIKO 2012-10-19 Innehåll Manual till DIKO 2012-10-19... 1 1 Använda DIKO med en dator... 2 1.1 För att logga in i DIKO... 2 1.2 Dag... 3 1.3 Importera bilder... 4 1.4 Redigera bilder i samband

Läs mer

KTH Programutvecklingsprojekt med mjukvarukonstruktion 2D1362. Projektpresentation

KTH Programutvecklingsprojekt med mjukvarukonstruktion 2D1362. Projektpresentation KTH Programutvecklingsprojekt med mjukvarukonstruktion 2D1362 Projektpresentation Fakturasystem Total Office Mobile Systems http://www.nada.kth.se/projects/prom04/fakturasystem/ Uppdragsgivare: Örjan Melin

Läs mer

NU! NU! Bygg en webbplats NU! Bygg en webbplats. Swedish Language Edition published by Docendo Sverige AB. Bygg en webbplats.

NU! NU! Bygg en webbplats NU! Bygg en webbplats. Swedish Language Edition published by Docendo Sverige AB. Bygg en webbplats. web_omslag.qxp 2006-03-20 17:06 Sida 1 NU! CDn innehåller: Upptäck hur du: Använder "dra och släpp-metoden" för att lägga till text, bilder och andra objekt till en webbsida Skapar listrutor och dynamiska

Läs mer

Saftfabrikens hemsida

Saftfabrikens hemsida Beteckning: Akademin för teknik och miljö Saftfabrikens hemsida Anna Elofsson Anna Edlund juni 2012 Examensarbete, 15 högskolepoäng, B Datavetenskap Internetteknologi Examinator: Ann-Sofie Östberg Handledare:

Läs mer

DOM (Document Object Model) är modellen efter vilken en webbläsaren är uppbyggd. Alla objekt/element i webbläsaren finns hierarkiskt ordnade i DOM.

DOM (Document Object Model) är modellen efter vilken en webbläsaren är uppbyggd. Alla objekt/element i webbläsaren finns hierarkiskt ordnade i DOM. JavaScript del1 Syftet med detta häfte är att sammanfatta det viktigaste i JavaScript så kort och koncist som möjligt men ändå tillräckligt omfattande för att ge god kännedom om en av de vanligaste teknikerna

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

Skapa din egen MediaWiki

Skapa din egen MediaWiki Skapa din egen MediaWiki Inledning och syfte I detta moment skall du installera en egen wiki (Mediawiki), som du skall konfigurera. Du har möjligheten att använda en egen wiki på din dator eller webbhotell

Läs mer

12 Webb och kurshemsidor

12 Webb och kurshemsidor 12 Webb och kurshemsidor Många lärare använder sig av kurswebbsidor eller egna personliga webbsidor som ett ställe att samla information och dokumentation kring sitt arbete. Om du ska skapa en webbsida,

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

VAD GÖR DU / VEM ÄR DU?

VAD GÖR DU / VEM ÄR DU? INNEHÅLL Vad blir din roll Databaser vad är och varför Terminologi Datamodellering vad är och varför Utvecklingsprocessen SQL vad är det Data / Information / Kunskap Kapitel 1 delar av. Praktisk Datamodellering

Läs mer

TMP Consulting - tjänster för företag

TMP Consulting - tjänster för företag TMP Consulting - tjänster för företag Adress: http://tmpc.se Kontakta: info@tmpc.se TMP Consulting är ett bolag som utvecklar tekniska lösningar och arbetar med effektivisering och problemslösning i organisationer.

Läs mer

Manual till publiceringsverktyg

Manual till publiceringsverktyg Manual till publiceringsverktyg Allmänt När man har loggat in hamnar man direkt på översikten över hela webbplatsen. Överst hittar man en meny som alltid ligger med i verktyget. Denna meny innehåller översikten

Läs mer

Innehåll. MySQL Grundkurs

Innehåll. MySQL Grundkurs MySQL Grundkurs Copyright 2014 Mahmud Al Hakim mahmud@dynamicos.se www.webbacademy.se Innehåll Introduktion till databaser Installera MySQL lokalt Webbserverprogrampaket (XAMPP) Introduktion till phpmyadmin

Läs mer

IT och informationsteknik

IT och informationsteknik IT och informationsteknik 206 Produktion av webbsidor Kuva: Skills Finland / Markku Heikkilä Grenansvarig 1 / 12 Miikka Merikanto Suomen Liikemiesten Kauppaopisto miikka.merikanto(at)businesscollege.fi

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

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

Hi-Fi Prototyping + laborationsgenomgång & verktyg

Hi-Fi Prototyping + laborationsgenomgång & verktyg Hi-Fi Prototyping + laborationsgenomgång & verktyg Karin Fahlquist 2015 Frågor att besvara Vad innebär prototyping? Vad är speciellt med hi-fi prototyping? Hur kan man använda dem? Hur väljer man nivå

Läs mer

KOM-IGÅNG-GUIDE. Kom igång och redigera din hemsida! SmelinkWeb4 editor 2

KOM-IGÅNG-GUIDE. Kom igång och redigera din hemsida! SmelinkWeb4 editor 2 KOM-IGÅNG-GUIDE Kom igång och redigera din hemsida! SmelinkWeb4 editor 2 Smelink.se l Storgatan 14 l 352 31 Växjö l support@smelink.se l www.smelink.se Uppdaterad: 121019 Del 1 Logga in Välkommen att ta

Läs mer

Spelprogrammering med JavaScript och HTML5

Spelprogrammering med JavaScript och HTML5 Spelprogrammering med JavaScript och HTML5 Vad är vårt syfte? Eleverna ska komma igång fort med programmering. Det ska vara roligt från början. Resultatet ska vara enkelt att visa för kompisar och familj.

Läs mer

Statistik från webbplatser

Statistik från webbplatser Statistik från webbplatser problem och möjligheter Ulf Kronman Föredragets huvuddelar Frågorna och motfrågorna Vilka frågor ställer chefen, BIBSAM och ISO? Varför ställer webmastern krångliga motfrågor?

Läs mer

RTMP. online. Desktop. web-tv API. personal support. Codec. iphone. Windows Media MP4. Design. Creo Video Manager. Encoding.

RTMP. online. Desktop. web-tv API. personal support. Codec. iphone. Windows Media MP4. Design. Creo Video Manager. Encoding. Version 3.0.20130219 Codec HTTP Encoding Windows Media Video iphone Desktop API Design Multimedia MP4 Streaming online RTMP Mobile content distribution personal support Flash Social media web-tv Communication

Läs mer

Guide för Innehållsleverantörer

Guide för Innehållsleverantörer Library of Labs Content Provider s Guide Guide för Innehållsleverantörer Inom LiLa ramverket är innehållsleverantörer ansvariga för att skapa experiment som "LiLa Learning Objects", att ladda upp dessa

Läs mer

Vidareutveckling av lokalbokningssystem

Vidareutveckling av lokalbokningssystem Beteckning: Institutionen för matematik, natur- och datavetenskap Vidareutveckling av lokalbokningssystem Mikael Eriksson juni 2007 Examensarbetete, 10 poäng, B Datavetenskap Internetteknologi Examinator:

Läs mer

e-line Kort- och Bankbetalning

e-line Kort- och Bankbetalning 2007-04-04 e-line Kort- och Bankbetalning Upplägg av Pageset och rapporter i e-line 3.40A (2007-04-04) Upplägg Vid Internetbetalning i PBS e-line sker all hantering av kreditkortsdata på DebiTechs server.

Läs mer

Bilaga 1. Teknisk kravspecifikation

Bilaga 1. Teknisk kravspecifikation Bilaga 1 Teknisk kravspecifikation 5.5.2014 Webbplatsen 1. Allmänt Korsholms kommun arbetar aktivt för att vara en ledande tvåspråkig landskommun i Österbotten och har drygt 19 100 invånare varav 68,9

Läs mer

Creo Customization. Lars Björs 2014-10-16

Creo Customization. Lars Björs 2014-10-16 Creo Customization Lars Björs 2014-10-16 Norra Europas största partner och återförsäljare av PTC relaterad programvara (Windchill, Creo, Arbortext, MathCad, Relex) 70 anställda Egen utvecklingsavdelning

Läs mer

Macromedia. Dreamweaver 8. Grundkurs. www.databok.se

Macromedia. Dreamweaver 8. Grundkurs. www.databok.se Macromedia Dreamweaver 8 Grundkurs www.databok.se Innehållsförteckning 1 Arbetsmiljön... 1 Användningsområde... 1 Starta Dreamweaver... 1 Arbeta i Dreamweaver... 3 Fönster... 4 Statusfältet... 4 Menyer...

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

Adobe Fireworks CS6. Följande text kan användas på webbplatser, i kataloger, annonser och annat marknadsföringsmaterial för Adobe Fireworks CS6.

Adobe Fireworks CS6. Följande text kan användas på webbplatser, i kataloger, annonser och annat marknadsföringsmaterial för Adobe Fireworks CS6. Adobe Fireworks CS6 Marketing Copy för Channel Partners Adobe Fireworks CS6 Följande text kan användas på webbplatser, i kataloger, annonser och annat marknadsföringsmaterial för Adobe Fireworks CS6. HUR

Läs mer

Användargränssittet (Front-end) i mobilversionen bygger i stor utsträckning på jquery Mobile-ramverket.

Användargränssittet (Front-end) i mobilversionen bygger i stor utsträckning på jquery Mobile-ramverket. e-line mobilversion Pyramid Business Studio 3.42A servicepack 05 (2015-07-13) Mobilversionen av e-line är i grunden samma applikation som fullversionen av e-line. Skillnaden är att endast valda delar av

Läs mer

Snabbstartsguide. Få hjälp Klicka på frågetecknet om du vill söka efter hjälpinnehåll.

Snabbstartsguide. Få hjälp Klicka på frågetecknet om du vill söka efter hjälpinnehåll. Snabbstartsguide Microsoft Access 2013 ser annorlunda ut jämfört med tidigare versioner, så vi har skapat den här guiden som hjälper dig att minimera inlärningskurvan. Ändra skärmstorleken eller stäng

Läs mer

Konsult: Mats Lindblad; Kontaktperson: Mats Lindblad; Tel: 070 249 11 24; E-post: mats.lindblad@gmail.com;

Konsult: Mats Lindblad; Kontaktperson: Mats Lindblad; Tel: 070 249 11 24; E-post: mats.lindblad@gmail.com; Webbutvecklare med 14 år bakom tangentbordet Konsult: Mats Lindblad; Kontaktperson: Mats Lindblad; Tel: 070 249 11 24; E-post: mats.lindblad@gmail.com; Expertisområde: Webbutveckling, HTML5, CSS3, JavaScript,

Läs mer

Skapa webbplats med WordPress En guide hur man använder publiceringsverktyget WordPress

Skapa webbplats med WordPress En guide hur man använder publiceringsverktyget WordPress Skapa webbplats med WordPress En guide hur man använder publiceringsverktyget WordPress WordPress är ett kraftfullt publiceringsverktyg för webben som trots sin flexibilitet och styrka är lätt att komma

Läs mer

FileMaker Pro 10 och FileMaker Pro 10 Advanced

FileMaker Pro 10 och FileMaker Pro 10 Advanced FileMaker Pro 10 och FileMaker Pro 10 Advanced Detta dokument tillhandahåller information om senaste nytt och problem med FileMaker Pro 10 och FileMaker Pro 10 Advanced. Allmän information finns i hjälpen

Läs mer

30 år av erfarenhet och branschexperts

30 år av erfarenhet och branschexperts 30 år av erfarenhet och branschexperts Integrerad Säkerhet Integrerad Säkerhet Varför överordnat system Användarvänlighet Kvalitet Trygghet Kostnadseffektivitet Varför ett överordnat system? Med stora

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

Lathund - webbsidor och filer

Lathund - webbsidor och filer Lathund - webbsidor och filer 2005-09-07 Manualen nås via denna webbadress: http://www.med.lu.se/support Lathund - webbsidor och filer... 1 1. Inloggning... 2 Efter inloggningen... 2 2 Översikt över gränssnittet...

Läs mer

Grundläggande EndNote

Grundläggande EndNote Grundläggande EndNote Stephen Naron, februari, 2011 Uppdatering och översättning till svenska: Taeda Tomić, 2012, 2014 Korrekturläsning: Martina Andersson Löfqvist, september 2012 1. Lite information om

Läs mer

Inlämningsarbete Case. Innehåll Bakgrund bedömning inlämningsarbete... 2 Inlämnade arbeten... 4

Inlämningsarbete Case. Innehåll Bakgrund bedömning inlämningsarbete... 2 Inlämnade arbeten... 4 Inlämningsarbete Case Innehåll Bakgrund bedömning inlämningsarbete... 2 Inlämnade arbeten... 4 1 Bakgrund bedömning inlämningsarbete Syfte: Eftersom det står i betygskriterierna att för VG skall deltagaren

Läs mer

Installationsanvisning. Dokumenttyp Installationsanvisning Område Boss med delad databas

Installationsanvisning. Dokumenttyp Installationsanvisning Område Boss med delad databas Ort och datum Ort och datum Namn Namn Magnus Einarsson/+46 (0)+46 54 291742 2010-06-29 1.0 1 (5) Innehållsförteckning 3 1 Inledning 3 1.1 Introduktion... 3 1.2 Revisionshistoria... 3 1.3 Referenser...

Läs mer

Montania WebbPublicering administrerar din hemsida

Montania WebbPublicering administrerar din hemsida S O F T W A R E & S O L U T I O N Montania WebbPublicering administrerar din hemsida Nu kan vi på Montania erbjuda dig ett enkelt webbverktyg för att underhålla din webbplats. Många webbsidor är idag svåra

Läs mer

Mamut Open Services. Mamut Kunskapsserie. Kom i gång med Mamut Online Survey

Mamut Open Services. Mamut Kunskapsserie. Kom i gång med Mamut Online Survey Mamut Open Services Mamut Kunskapsserie Kom i gång med Mamut Online Survey Kom i gång med Mamut Online Survey Innehåll MAMUT ONLINE SURVEY... 1 KOM I GÅNG MED MAMUT ONLINE SURVEY... 3 MAMUT-ANVÄNDARE:

Läs mer

Snabbguide webbhotellstjänster v 1.0

Snabbguide webbhotellstjänster v 1.0 Snabbguide webbhotellstjänster v 1.0 Innehållsförteckning 1.0 Allmänt...3 2.0 Översikt kontrollpanel...4 2.1 Desktop...5 2.2 Home...6 3.0 Domäninställningar...7 3.1 Ladda upp dina filer information om

Läs mer

Lab 5: ASP.NET 4.5 Site Navigation

Lab 5: ASP.NET 4.5 Site Navigation Lab 5: ASP.NET 4.5 Site Navigation Enkel navigering är en viktig del av en modern webbapplikation. Eftersom en stor del av utvecklingstiden för en site används för att bygga menyer, trädstrukturer och

Läs mer

Ellibot 1.0. Interaktivmedia Content Management System. Publicera för webben

Ellibot 1.0. Interaktivmedia Content Management System. Publicera för webben Ellibot 1.0 Interaktivmedia Content Management System Publicera för webben Innehåll Logga in 3 Skapa en ny webbsida 4 o Publicering 5 o Information 5 o Standardfiler 6 o Innehåll 7 Hur man skapar en länk

Läs mer

FIRSTCLASS. Innehåll:

FIRSTCLASS. Innehåll: FIRSTCLASS Innehåll: Hämta klient...2 Installera klient...2 Konfigurera klient...2 Koppla upp...3 Skrivbordet...3 Mailbox...3 Presentation...3 Skapa ett nytt meddelande...4 Söka mottagare för nytt meddelande...4

Läs mer

Insamlingsverktyg - teknisk beskrivning av metadataformuläret

Insamlingsverktyg - teknisk beskrivning av metadataformuläret Digitala leveranser Insamlingsverktyg - teknisk beskrivning av metadataformuläret Innehåll: Allmänt Layout och uppbyggnad Hur man använder programmet Starta Fylla i metadata Skapa metadatafiler och leverera

Läs mer

Widgetguiden Vad är Publits widgetshop?

Widgetguiden Vad är Publits widgetshop? Widgetguiden Den här guiden är till för dig som vill använda Publits widgetshop för att enkelt sälja böcker direkt på din egen hemsida, blog eller Facebook. Här går vi steg för steg igenom processen för

Läs mer

BLOGG PETER WALTONEN @ DPI.FI

BLOGG PETER WALTONEN @ DPI.FI BLOGG PETER WALTONEN @ DPI.FI WordPress är en väldigt användbar nätportal, som kan användas både som blogg men även för att bygga upp din hemsida på nätet. Verktygen är lätta att använda och det erbjuds

Läs mer

Federerad Roll Administration ÄR GROUPER EN MEDSPELARE? OVE OLANDER MITTUNIVERSITETET

Federerad Roll Administration ÄR GROUPER EN MEDSPELARE? OVE OLANDER MITTUNIVERSITETET Federerad Roll Administration ÄR GROUPER EN MEDSPELARE? OVE OLANDER MITTUNIVERSITETET Vad är/var problemet? NyA webben har behörigheter/roller via federerade attribut edupersonentitlement/gmai Studentcentrum

Läs mer

WORDPRESSGUIDE 2013. Uppdaterad 20131029. WORDPRESSGUIDE 2013 Sida 1

WORDPRESSGUIDE 2013. Uppdaterad 20131029. WORDPRESSGUIDE 2013 Sida 1 Uppdaterad 20131029 WORDPRESSGUIDE 2013 Sida 1 WordPress är ett modernt publiceringsverktyg med fokus på utseende, webbstandard och användarvänlighet. Det perfekta verktyget för både privatpersoner och

Läs mer

KONSULTPROFIL Juan. Systemutvecklare.NET/EPiServer/Commerce. Sammanfattning. Kompetens. Uppdrag

KONSULTPROFIL Juan. Systemutvecklare.NET/EPiServer/Commerce. Sammanfattning. Kompetens. Uppdrag KONSULTPROFIL Juan Systemutvecklare.NET/EPiServer/Commerce Sammanfattning Mångsidig IT-arkitekt med mer än 14 års erfarenhet av IT-branschen. Erfarenhet av att leverera och implementera avancerade IT-lösningar

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