Moderna Jfokus, Stockholm Monday, February 4, 13

Storlek: px
Starta visningen från sidan:

Download "Moderna webbappar. @joakimkemeny och @johnwilander Jfokus, Stockholm 2013. Monday, February 4, 13"

Transkript

1 Moderna Jfokus, Stockholm 2013

2 Repo

3 Repo Bygge war/ear/klump Applikationsserver

4 Repo 1 Repo 2 Bygge 1 zip/klump Webbserver Bygge 2 war/ear/klump Applikationsserver

5 Kund Statiska filer, cache:ade Webbserver Applikationsserver

6 Kund Data, typiskt JSON (ingen jsp/aspx/html) Webbserver Applikationsserver

7 Repo 1 Repo 2 Utmaning: Hålla klient och server i synk. Taggning, bygge, driftsättning, rollback Webbserver Applikationsserver

8 DEMO Vårt lilla REST-api

9 DEMO Skapa ett webbprojekt

10 Repo 1 Webbserver Konkatenerade, minifierade skript i rätt ordning Genererad, minifierad css Ikoner i sprite map Gzip:at och klart Versionerat med fileller katalognamn

11 Konkatenering och minifiering

12 Konkatenering och minifiering Man kan vilja skilja på egna skript och tredjepartsskript, inte minst för att kunna cache:a tredjepartsskript hårdare.

13 Konkatenering och minifiering Målet är att minimera antalet HTTP-anrop och storleken på data som transporteras.

14 Verktyg för konkatenering och minifiering Google Closure Compiler UglifyJS require.js Utför konkatenering och minifiering med Closure Compiler eller UglifyJS

15 require.js import och namnrymd i JavaScript

16 require([ "backbone", "underscore", "models/cartmodel", "text!templates/cartitem.html"], function (Backbone, _, CartModel, cartitemtemplate) { // Kod som är beroende av Backbone etc });

17 require([ }); paths : { jquery : "vendor/jquery.min", backbone : "../components/backbone/backbone-min", underscore : "../components/underscore/underscore" } "backbone", "underscore", "models/cartmodel", "text!templates/cartitem.html"], function (Backbone, _, CartModel, cartitemtemplate) { main.js // Kod som är beroende av Backbone etc

18 Filsystemet, ungefär som Javapaket require([ "backbone", "underscore", "models/cartmodel", "text!templates/cartitem.html"], function (Backbone, _, CartModel, cartitemtemplate) { // Kod som är beroende av Backbone etc });

19 require([ "backbone", Lokalt namn, ungefär som "underscore", dependency injection "models/cartmodel", "text!templates/cartitem.html"], function (Backbone, _, CartModel, cartitemtemplate) { var model = new CartModel(); });

20 Definiera nya moduler som blir tillgängliga define([ "backbone", "underscore", "models/cartmodel", "text!templates/cartitem.html"], function (Backbone, _, CartModel, cartitemtemplate) { var CartItemView = ; }); return CartItemView;

21 CartItemView.js

22 index.html utan något som require.js <head> <script src="js/lib/jquery min.js"></script> <script src="js/lib/jquery-encoder js"></script> <script src="js/base.js"></script> <script src="js/jw/util/util.js"></script> <script src="js/jw/personnummer/personnummer.js"></script> <script src="js/jw/patient/patient.js"></script> <script src="js/jw/cache/cache.js"></script> <script src="js/jw/proxy/proxy.js"></script> <script src="js/jw/gui/gui.js"></script> </head> manuellt, i rätt ordning.

23 index.html med require.js <head> <script data-main="scripts/main" src="scripts/require.js" > </script> </head>

24 index.html med require.js <head> <script data-main="scripts/main" src="scripts/require.js" > </script> </head> require.config({ paths : { jquery : "vendor/jquery.min", backbone : "../components/backbone/backbone-min", underscore : "../components/underscore/underscore" } }); require(["app"], function (App) { App.start(); }); main.js

25 DEMO require.js + underscore templates

26 JavaScript

27 Model View Controller JavaScript

28 Model View Controller JavaScript DOM $().html()???

29 JavaScript MV*

30 JavaScript MV*

31 Backbone.js Ember.js JavaScript MV* AngularJS KnockoutJS

32 Backbone.js

33 Backbone.js Models / Collections - Triggers events when changed

34 Backbone.js Models / Collections - Triggers events when changed Views - Listen to events

35 Backbone.js Models / Collections - Triggers events when changed Views - Listen to events Routers

36 Models var ProductModel = Backbone.Model.extend({ urlroot : "/api/product", defaults : { name : null, price : null } });

37 Models var product = new ProductModel({ name : "Green apples", price : 12, }); product.save();

38 Models var product = new ProductModel({ name : "Green apples", price : 12, }); product.save(); product.set("name", "Red apples"); product.save({"name"}, {patch:true});

39 Models var product = new ProductModel({ name : "Green apples", price : 12, }); product.save(); product.set("name", "Red apples"); product.save({"name"}, {patch:true}); product.destroy();

40 Collections var ProductCollection = Backbone.Collection.extend({ url : "/api/product", }); model : ProductModel

41 Collections

42 Collections var products = new ProductCollection(); products.fetch();

43 Collections var products = new ProductCollection(); products.fetch(); var product = products.get(1);

44 Views var ProductsView = Backbone.View.extend({ el : "#products", initialize : function () { }, this.render(); render : function () { this.$el.html(" "); } });

45 Views var ProductsView = Backbone.View.extend({ el : "#products", initialize : function () { this.render(); this.listento(this.collection, "add change remove", this.render); },

46 Views var productsview = new ProductsView({ }); collection : new ProductCollection()

47 Router var Router = Backbone.Router.extend({ routes : { "product" : "listproducts", "product/:id" : "showproduct" },

48 Router listproducts : function () { var products = new ProductCollection(); products.fetch({ success : function(products) { new ProductsView({ collection : products; } } }); },

49 Router showproduct : function (id) { var product = new ProductModel({ id : id }); model.fetch({ success: function(product) { new ProductView({ model : product } } }); } });

50 DEMO Backbone.js

51 CORS var req = new XMLHttpRequest(); req.open(method, crossdomainurl); req.send(); Sandboxed iframes <iframe src=" sandbox="allow-scripts"></iframe> postmessage API otherframeorwindow.postmessage( {"action": "purchase", "item": 34443}, "

52 Cross-Origin Resource Sharing, CORS Visst stöd i IE8 och IE9

53 CORS är i princip cross-origin-ajax

54 CORS Servern måste ge behörighet i svarsheaders: Access-Control-Allow-Origin allowed.domain.com HTTP GET/POST funkar som normal Ajax Andra HTTP-metoder eller GET/POST med egna headers kräver en s.k. preflight Variabel för att klienten ska skicka cookies: xhr.withcredentials = true;

55 Låt oss se vad 2013 innebär om vi fortfarande kör en CORS-omedveten server

56 CORS-omedveten server Klient Server Ajax GET Inga cookies Ser ut som en normal GET. Har en pålitlig Origin-header. Om behörighetsheader saknas så får klienten inget svar. Om det inte finns logik för behörighet så svarar den bara.

57 CORS-omedveten server Klient Server Ajax POST Inga cookies Ser ut som en normal POST. Har en pålitlig Origin-header. Om behörighetsheader saknas så får klienten inget svar. Om det inte finns logik för behörighet så svarar den bara.

58 CORS-omedveten server Klient Server Ajax + withcredentials = true; Cookies Ser ut som ett normalt anrop. Har en pålitlig Origin-header. Om behörighetsheader saknas så får klienten inget svar. Om det inte finns logik för behörighet så svarar den bara.

59 CORS-omedveten server Klient Server Ajax + setrequestheader( 'X-Requested-With', 'XMLHttpRequest'); Preflight-anrop OPTIONS- anrop med Access-Control- Request-Method: GET/POST Om behörighetsheader saknas så anropar klienten aldrig. Om det inte finns logik för behörighet så svarar den bara.

60 2013 borde vi istället köra en CORS-medveten server

61 CORS-medveten server Klient Server Ajax + withcredentials = true; Cookies Ser ut som ett normalt anrop. Har en pålitlig Origin-header. Om behörighetsheader finns så får klienten svaret. Behörighetskollar origin och lägger till Access-Control- Allow-Origin

62 Det här betyder att Servrar som inte kollar origin-headern har ingen aning om att det är cross-origin Ajax. Egna headers såsom Ajax-headern är i praktiken döda vid CORS eftersom utvecklare vill undvika preflight-anrop. Attackerare kan nu utföra CSRF utan imgelement eller formulärpostning.

63 postmessage Visst stöd i IE8 IE

64 postmessage Möjliggör strängbaserad kommunikation mellan frames och fönster Man behöver en handle till mottagaren för att kunna skicka ett meddelande Mottagaren vitlistar vilka källor den accepterar meddelanden från

65 postmessage // Sending messages requires a handle to the receiving end var popup = window.open(" "_blank"); popup.postmessage("luke, I am your father.", " // Receiving messages requires an event listener receivemessage = function(event) { if (event.origin!== " { return; } console.log(event.data); } window.addeventlistener("message", receivemessage, false);

66 postmessage // Sending messages requires a handle to the receiving end var popup = window.open(" "_blank"); popup.postmessage("luke, I am your father.", " // Receiving messages requires an event listener receivemessage Handle till = function(event) Man { specificerar if (event.origin!== " { mottagande return; även domän så } fönster console.log(event.data); eller att fönstret eller } frame frame:en inte window.addeventlistener("message", receivemessage, false); har laddats om

67 postmessage // Sending messages requires a handle to the receiving end var popup = window.open(" "_blank"); popup.postmessage("luke, I am your father.", " // Receiving messages requires an event listener receivemessage = function(event) { if (event.origin!== " { return; } console.log(event.data); Event-lyssnaren för } window.addeventlistener("message", receivemessage, false); att ta emot meddelanden måste kolla att meddelandet kommer från en betrodd källa

68 Först, sluta använda Jsonp document.domain-tricket img-tricket

69 Implementera CORS server-side nu Ajax + withcredentials = true; Klient Cookies Server Kolla alltid origin header Om behörighetsheader finns så får klienten svaret. Tillåt anropande domän utifrån en vitlista.

70 DEMO CORS

71 WebSockets HTML5 Dubbelriktad kommunikation - Full duplex Liten overhead Brandväggsvänlig

72 Klient Server

73 Klient Server GET ws://local.communityhack.org/ws Origin: Connection: Upgrade Host: local.communityhack.org Sec-WebSocket-Key: urovsczjnol/umbtt5ukmw== Sec-WebSocket-Protocol: modernweb Sec-WebSocket-Version: 13 Upgrade: websocket

74 Klient Server GET ws://local.communityhack.org/ws Origin: Connection: Upgrade Host: local.communityhack.org Sec-WebSocket-Key: urovsczjnol/umbtt5ukmw== Sec-WebSocket-Protocol: modernweb Sec-WebSocket-Version: 13 Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: rlhckw/skso9gah/zsfhbatdkru= Sec-WebSocket-Protocol: modernweb Upgrade: WebSocket

75 Text message

76 0x00 Text message 0xFF

77 0x00 Text message 0xFF var ws = new WebSocket( "ws://local.communityhack.org"); ws.onopen = function (e) { }; ws.onclose = function (e) { }; ws.onmessage = function (e) { console.log(e.data); }; ws.send("websocket"); ws.close();

78 WebSockets IE No!

79 Stora ramverk vs mikroramverk

80 dojo-release zip 11 Mb ext-4.1.1a-gpl.zip 45,7 Mb ext-all.js 1 Mb yui_3.8.1.zip 28,1 Mb

81 Förenklat DOM-api Templates & shims Widgets MVC

82 underscore Modernizr jquery Förenklat DOM-api Templates & shims Widgets MVC

83 Handlebars Förenklat Mustach DOM-api Templates & shims Widgets MVC

84 Förenklat DOM-api Templates & shims Ember Backbone Angular Widgets MVC

85 Förenklat DOM-api Templates & shims Widgets MVC Spine

86 Förenklat DOM-api Templates & shims Widgets MVC Bootstrap jquery UI

87 Förenklat DOM-api Templates & shims Ext JS Dojo YUI Widgets MVC

88 Ramverk som gör anspråk på alltihop lämpar sig bäst för nyskrivna, sammanhållna applikationer utan mashup-beteende.

89 Om ni ska integrera legacykod, någon halvhemlig CMS-produkt eller har funktion/innehåll från tredjepart så är mikroramverk bättre. Mikroramverk tar inte över hela applikationen.

90 LinkedIn utvärderade template-ramverk

91 Vi utvärderade grid:ar 2012 <demo />

92 När formgivningen och interaktionsmönstren blir tuffa så skadas ofta den underliggande semantiken. <div>-soppa är inte bra. Granska den genererade markup:en.

93 <div class="app-module-body"> <table aria-hidden="true" class="app-grid-table-fixed"> <thead class="app-grid-thead"> <tr class="app-grid-thead-tr"> <th class="app-grid-thead-th">namn</th> <th class="app-grid-thead-th app-money">saldo</th> <th class="app-grid-thead-th app-money">disponibelt belopp</th> </tr> </thead> <tbody> </tbody> </table> <div class="app-grid-container app-grid-400"> <table class="app-grid"> <thead class="app-grid-thead"> <tr class="app-grid-thead-tr"> <th class="app-grid-thead-th">namn</th> <th class="app-grid-thead-th app-money">saldo</th> <th class="app-grid-thead-th app-money">disponibelt belopp</th> </tr> </thead> <tbody id="test-table"> <tr class="app-grid-tr"> <th class="app-grid-tr-th"> <a class="app-a" href="#">massa pengar kontot</a> <span class="app-grid-comment">- <span> </span></span> </th> <td class="app-money">2,50</td> <td class="app-money"> ,50</td> </tr> </tbody> </table> </div> <p class="app-p"> <a href="#" class="app-a">visa alla konton</a> </p> </div>

94 <div class="app-module-body"> <table aria-hidden="true" class="app-grid-table-fixed"> <thead class="app-grid-thead"> <tr class="app-grid-thead-tr"> <th class="app-grid-thead-th">namn</th> <th class="app-grid-thead-th app-money">saldo</th> <th class="app-grid-thead-th app-money">disponibelt belopp</th> </tr> </thead> Fasta tabellhuvuden är <div class="app-grid-container app-grid-400"> <tbody> </tbody> </table> <table class="app-grid"> en klassisk <thead class="app-grid-thead"> <tr class="app-grid-thead-tr"> <th class="app-grid-thead-th">namn</th> utmaning. <th class="app-grid-thead-th app-money">saldo</th> <th class="app-grid-thead-th app-money">disponibelt belopp</th> Förstör </tr> </thead> <tbody id="test-table"> semantiken. <tr class="app-grid-tr"> <th class="app-grid-tr-th"> <a class="app-a" href="#">massa pengar kontot</a> <span class="app-grid-comment">- <span> </span></span> </th> <td class="app-money">2,50</td> <td class="app-money"> ,50</td> </tr> </tbody> </table> </div> <p class="app-p"> <a href="#" class="app-a">visa alla konton</a> </p> </div>

95 <div class="app-module-body"> <table aria-hidden="true" class="app-grid-table-fixed"> <thead class="app-grid-thead"> <tr class="app-grid-thead-tr"> <th class="app-grid-thead-th">namn</th> <th class="app-grid-thead-th app-money">saldo</th> <th class="app-grid-thead-th app-money">disponibelt belopp</th> </tr> Göm det </thead> <tbody> </tbody> fasta tabellhuvudet för <table class="app-grid"> </table> <div class="app-grid-container app-grid-400"> <thead class="app-grid-thead"> <tr class="app-grid-thead-tr"> synskadade. <th class="app-grid-thead-th">namn</th> <th class="app-grid-thead-th app-money">saldo</th> <th class="app-grid-thead-th app-money">disponibelt belopp</th> </tr> </thead> <tbody id="test-table"> <tr class="app-grid-tr"> <th class="app-grid-tr-th"> <a class="app-a" href="#">massa pengar kontot</a> <span class="app-grid-comment">- <span> </span></span> </th> <td class="app-money">2,50</td> <td class="app-money"> ,50</td> </tr> </tbody> </table> </div> <p class="app-p"> <a href="#" class="app-a">visa alla konton</a> </p> </div>

96 <div class="app-module-body"> <table aria-hidden="true" class="app-grid-table-fixed"> Duplicera <thead class="app-grid-thead"> <tr class="app-grid-thead-tr"> tabellhuvudet </tr> <th class="app-grid-thead-th">namn</th> <th class="app-grid-thead-th app-money">saldo</th> <th class="app-grid-thead-th app-money">disponibelt belopp</th> </thead> semantiskt <tbody> </tbody> </table> korrekt <div class="app-grid-container app-grid-400"> <table class="app-grid"> men style:a <thead class="app-grid-thead"> <tr class="app-grid-thead-tr"> <th class="app-grid-thead-th">namn</th> bort det <th class="app-grid-thead-th app-money">saldo</th> <th class="app-grid-thead-th app-money">disponibelt belopp</th> grafiskt </tr> </thead> <tbody id="test-table"> <tr class="app-grid-tr"> <th class="app-grid-tr-th"> <a class="app-a" href="#">massa pengar kontot</a> <span class="app-grid-comment">- <span> </span></span> </th> <td class="app-money">2,50</td> <td class="app-money"> ,50</td> </tr> </tbody> </table> </div> <p class="app-p"> <a href="#" class="app-a">visa alla konton</a> </p> </div>

97 <div class="app-module-body"> <table aria-hidden="true" class="app-grid-table-fixed"> Ge alla cssregler en <th class="app-grid-thead-th">namn</th> <thead class="app-grid-thead"> <tr class="app-grid-thead-tr"> <th class="app-grid-thead-th app-money">saldo</th> <th class="app-grid-thead-th app-money">disponibelt belopp</th> namnrymd </tr> </thead> för att <tbody> </tbody> </table> unvika <div class="app-grid-container app-grid-400"> <table class="app-grid"> konflikter <thead class="app-grid-thead"> <tr class="app-grid-thead-tr"> <th class="app-grid-thead-th">namn</th> och överskrivning </tr> <th class="app-grid-thead-th app-money">saldo</th> <th class="app-grid-thead-th app-money">disponibelt belopp</th> </thead> <tbody id="test-table"> <tr class="app-grid-tr"> <th class="app-grid-tr-th"> <a class="app-a" href="#">massa pengar kontot</a> <span class="app-grid-comment">- <span> </span></span> </th> <td class="app-money">2,50</td> <td class="app-money"> ,50</td> </tr> </tbody> </table> </div> <p class="app-p"> <a href="#" class="app-a">visa alla konton</a> </p> </div>

98 Dålig webbarkitektur CSS JavaScript HTML CSS HTML JavaScript JavaScript HTML CSS

99 Bra webbarkitektur CSS på fil Import CSS HTML JavaScript på fil JavaScript

100 Komplett separation av innehåll, kod och formgivning möjliggör CSP.

101 Men våra legacywebbar är en gröt.

102 iframe JavaScript CSS HTML Hantera legacywebb och tredjepartswebb i iframes. Då kan ny kod köra med CSP. CSS HTML JavaScript JavaScript HTML CSS

103 main.1-liner.org Sandboxed iframe main.1-liner.org CSS eller 3rdparty.net JavaScript HTML Sätt sen sandboxdirektivet utan allow-sameorigin och låt same-origin policy CSS HTML JavaScript skydda er nya kod JavaScript HTML CSS från gröt och sårbarheter.

104 main.1-liner.org Ett alternativ som iframe legacy.1-liner.org CSS är bakåtkompatibelt är att flytta legacy-kod JavaScript HTML till en annan CSS HTML JavaScript subdomän vilket också ger JavaScript HTML CSS separation mha same-origin policy.

105 new.1-liner.org iframe main.1-liner.org CSS JavaScript HTML CSS HTML JavaScript HTML JavaScript CSS En varning dock. Legacy-kod klarar oftast inte domänändringar. Så ni kan få lov att ändra subdomän för er nya kod.

106 postmessage main.1-liner.org Använd postmessage- API:et för att Sandboxed iframe main.1-liner.org CSS or 3rdparty.net JavaScript HTML kommunicera mellan iframes och huvidfönstret. CSS HTML JavaScript JavaScript HTML CSS

107 postmessage main.1-liner.org Sandboxed iframe main.1-liner.org CSS or 3rdparty.net JavaScript HTML CSS HTML JavaScript CORS from/ to 3rdparty.net Slutligen, använd CORS när JavaScript ni hämtar innehåll från HTML CSS tredje part och se till att teckenkoda det innan ni lägger till det i DOM:en.

108 Sandboxed iframes No 2.2+ Rykten om att det support trots allt saknas

109 Sandboxed iframe main.1-liner.org <iframe src= main.1-liner.org sandbox> <script></script> <form></form> </iframe>

110 Sandboxed iframe main.1-liner.org <iframe src= main.1-liner.org sandbox= allow-sameorigin > <script></script> <form></form> </iframe>

111 Sandboxed iframe main.1-liner.org <iframe src= main.1-liner.org sandbox= allow-sameorigin allow-scripts > <script></script> <form></form> </iframe>

112 Sandboxed iframe main.1-liner.org <iframe src= main.1-liner.org sandbox= allow-sameorigin allow-scripts allow-forms > <script></script> <form></form> </iframe>

113 DEMO Sandboxed iframe

114 Länkar

Appar med ryggrad. Introduktion till JavaScriptramverket Backbone

Appar med ryggrad. Introduktion till JavaScriptramverket Backbone Appar med ryggrad Introduktion till JavaScriptramverket Backbone Vanlig webbsida Databas MVC - Model View Controller MVC - Model View Controller MVC Backbone.js Ger struktur Bygger på MVC konceptet Tvingar

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

TDP013. Webbprogrammering och interaktivitet. AJAX, CORS & jquery. Marcus Bendtsen Institutionen för Datavetenskap (IDA)

TDP013. Webbprogrammering och interaktivitet. AJAX, CORS & jquery. Marcus Bendtsen Institutionen för Datavetenskap (IDA) TDP013 Webbprogrammering och interaktivitet AJAX, CORS & jquery Marcus Bendtsen Institutionen för Datavetenskap (IDA) Innan AJAX Ett synkront webb 1. Användaren klickar länk, formulär, bild etc 2. Anrop

Läs mer

Webbutveckling med AngularJS

Webbutveckling med AngularJS Webbutveckling med AngularJS Kommunikation och Användargränssnitt HT 2016 Per Lind Upplägg Laboration 1 - Skapa en SPA (single-page application) med AngularJS Laboration 2 - Responsiv design, mobile-first

Läs mer

MVC med Javascript och Ajax. Filip Ekberg

MVC med Javascript och Ajax. Filip Ekberg MVC med Javascript och Ajax Filip Ekberg MVC med Javascript och Ajax Lektion 7 ASP.NET MVC mail@filipekberg.se Veckans mål ASP.NET MVC Repetition & Diskussion Vad är MVC? Vad är ASP.NET MVC? Hur skapar

Läs mer

Säkerhet i applikationslagret och slaget om webben. John Wilander, Omegapoint, Rätt säkerhet, maj 2010

Säkerhet i applikationslagret och slaget om webben. John Wilander, Omegapoint, Rätt säkerhet, maj 2010 Säkerhet i applikationslagret och slaget om webben John Wilander, Omegapoint, Rätt säkerhet, maj 2010 John Wilander, konsult Omegapoint Forskar inom mjukvarusäkerhet Leder svenska OWASP Certifierad inom

Läs mer

JavaScript in SharePoint and not just for Apps. Wictor Wilén

JavaScript in SharePoint and not just for Apps. Wictor Wilén JavaScript in SharePoint and not just for Apps Wictor Wilén Wictor Wilén Agenda Varför JavaScript? JavaScript bibliotek SharePoint JS bibliotek JavaScript Client Side Object Model (JSOM/CSOM) REST Client

Läs mer

<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<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

Modern webbutveckling. av Robert Welin-Berger

Modern webbutveckling. av Robert Welin-Berger Modern webbutveckling av Robert Welin-Berger robertwb@kth.se Modern webbutveckling 1. Projektstorlek och Arkitektur 2. Callbacks 3. Event driven arkitektur 4. MEAN stack 5. ODM/ORM 1. Projektstorlek och

Läs mer

Säkra webbapplikationer. John Wilander, Omegapoint, KTH maj 2010

Säkra webbapplikationer. John Wilander, Omegapoint, KTH maj 2010 Säkra webbapplikationer John Wilander, Omegapoint, KTH maj 2010 John Wilander, konsult Omegapoint Forskar inom mjukvarusäkerhet Leder svenska OWASP Certifierad inom Javautveckling och Security Development

Läs mer

E11 "Protection" Föreläsning 11, HT2014 Säkerhet, tillgänglighet. Johan Leitet. Kurs: 1dv403 Webbteknik I

E11 Protection Föreläsning 11, HT2014 Säkerhet, tillgänglighet. Johan Leitet. Kurs: 1dv403 Webbteknik I Föreläsning 11, HT2014 Säkerhet, tillgänglighet E11 "Protection" Kurs: 1dv403 Webbteknik I Johan Leitet E11 Protection Dagens agenda Tillgänglighet Säkerhet Webbsajt vs. Webbapp Webbsida/webbsajt Webbapplikation

Läs mer

ASP.NET MVC. Copyright Mahmud Al Hakim mahmud@dynamicos.se http://www.webbacademy.se. Innehåll

ASP.NET MVC. Copyright Mahmud Al Hakim mahmud@dynamicos.se http://www.webbacademy.se. Innehåll ASP.NET MVC Copyright Mahmud Al Hakim mahmud@dynamicos.se http://www.webbacademy.se Innehåll Introduktion till MVC Controller Action-metoder Views Arbeta med Layout-sidor och sektioner Route konfiguration

Läs mer

MVC med Javascript och Ajax. Filip Ekberg

MVC med Javascript och Ajax. Filip Ekberg MVC med Javascript och Ajax Filip Ekberg Filip Ekberg Microsoft & Xamarin MVP mail@filipekberg.se Vad ska vi lära oss? I denna kurs lär sig den studerande hur man jobbar med den naturliga uppdelningen

Läs mer

TDP013. Innan AJAX Ett synkront webb. Med AJAX Ett Asynkront webb

TDP013. Innan AJAX Ett synkront webb. Med AJAX Ett Asynkront webb Tenta TDP013 Webbprogrammering och interaktivitet AJAX, CORS,jQuery, PaaS, Projektet Anders Fröberg Institutionen för Datavetenskap (IDA) Efter UKÄs utvärdering: För lite böcker för mycket URL:er För lite

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

INTRODUKTION TILL ANGULAR JS

INTRODUKTION TILL ANGULAR JS INTRODUKTION TILL ANGULAR JS DEL 1 Mahmud Al Hakim www.alhakim.se mahmud@alhakim.se VAD ÄR ANGULAR? Angular är ett JavaScript ramverk. Angular används för utveckling av frontendwebbapplikationer. Angular

Läs mer

JAVASCRIPT-POWERED LOADRUNNER CHRISTIAN GERDES PERFORMANCE ENGINEER LIGHTS IN LINE AB

JAVASCRIPT-POWERED LOADRUNNER CHRISTIAN GERDES PERFORMANCE ENGINEER LIGHTS IN LINE AB JAVASCRIPT-POWERED LOADRUNNER CHRISTIAN GERDES PERFORMANCE ENGINEER LIGHTS IN LINE AB PRESENTATIONSRUNDA VILKA ÄR VI? HUR JOBBAR NI MED LOADRUNNER IDAG? ANVÄNDER NI JAVASCRIPT/DFE/JSON? AGENDA LoadRunner

Läs mer

E13 "Behind the Wild"

E13 Behind the Wild E13 "Behind the Wild" Föreläsning 13, HT2014 Det vi missat och lite till Kurs: 1dv403 Webbteknik I Johan Leitet E13 Behind the Wild Dagens agenda Cookies Web storage Context/ändra context Augmentation

Läs mer

Hybridappar. Utveckla mobilappar i HTML, Javascript och CSS

Hybridappar. Utveckla mobilappar i HTML, Javascript och CSS Hybridappar Utveckla mobilappar i HTML, Javascript och CSS Presenterat av Erik Tufvesson, Presis i Lund AB Kort om mig Erik Tufvesson Systemarkitekt och utvecklare på Presis! Brinner för utveckling av

Läs mer

Asp.net mvc intro PER KVARNBRINK, 2015-01-27

Asp.net mvc intro PER KVARNBRINK, 2015-01-27 Asp.net mvc intro PER KVARNBRINK, 2015-01-27 Byggstenarna i ett mvc-projekt 1. Databasen 2. Datamodellen (M:et) 3. Entity framwork 4. Routing 5. Kontroller (C:et) 6. Vy (V:et) 7. Vymodeller 8. Troligen

Läs mer

E12 "Evil is going on"

E12 Evil is going on E12 "Evil is going on" Föreläsning 12, HT2012 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

HTML. Introduktion till HyperText Markup Language

HTML. Introduktion till HyperText Markup Language HTML Introduktion till HyperText Markup Language 1 Frågor innan vi börjar? 2 Dagens föreläsning Snabb introduktion till webben Varför använder vi HTML? Ett första HTML-dokument Metadata Teckenkodning Validera

Läs mer

TDP013 Node.js, JSCoverage, Mocha. Marcus Bendtsen Institutionen för Datavetenskap

TDP013 Node.js, JSCoverage, Mocha. Marcus Bendtsen Institutionen för Datavetenskap TDP013 Node.js, JSCoverage, Mocha Marcus Bendtsen Institutionen för Datavetenskap Återblick - Progressive Enhancement HTML, CSS, JavaScript - Klienten Den statiska webben... Vi känner till HTML, CSS och

Läs mer

Server-kod. TDDD80 Mobila och sociala applikationer

Server-kod. TDDD80 Mobila och sociala applikationer Server-kod 2017-01-16 2 Översikt Flask HTTP och REST Requests-biblioteket JSON PyCharm Git Informationssökningstips 2017-01-15 3 Klient Klient Klient Labb 4-8 (Android) Server Databas Labb 1-4 (server)

Läs mer

Webbteknik II. Föreläsning 5. Restless farewell. John Häggerud, 2011

Webbteknik II. Föreläsning 5. Restless farewell. John Häggerud, 2011 Webbteknik II Föreläsning 5 Restless farewell HTTP Request HTTP verbs (methods): GET, POST, HEAD, DELETE, PUT, OPTIONS, TRACE, CONNECT http://www.w3.org/protocols/rfc2616/rfc2616-sec9.html variable=value&variable2=value2

Läs mer

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

Fortsättningskurs Webbklientprogrammering

Fortsättningskurs Webbklientprogrammering Tentamen, Fortsättningskurs Webbklientprogrammering (40 YH-poäng) Plats: Övningstenta Tid: Övningstenta Tillåtna hjälpmedel: Papper, penna, suddgummi, linjal. Ej tillåtna hjälpmedel: Datorer, mobiltelefoner,

Läs mer

Översikt. Installation av EasyPHP 1. Ladda ner från http://www.easyphp.org/ Jag använder Release 5.3.4.0 2. Installera EasyPHP.

Översikt. Installation av EasyPHP 1. Ladda ner från http://www.easyphp.org/ Jag använder Release 5.3.4.0 2. Installera EasyPHP. Laboration 1 Översikt 1. Att komma igång med laborationsmiljön a. installera Aptana Studio 3 b. Installera EasyPHP 2. Testa lite programmering a. Testa enkla uppgifter b. Testa automatiskt 3. Skapa inloggningsformulär

Läs mer

Ajax TruClient. Erfarenheter, tips och trix från Swedbank IT. Christian Gerdes Performance Engineer, LIGHTS IN LINE AB

Ajax TruClient. Erfarenheter, tips och trix från Swedbank IT. Christian Gerdes Performance Engineer, LIGHTS IN LINE AB Ajax TruClient Erfarenheter, tips och trix från Swedbank IT Christian Gerdes Performance Engineer, LIGHTS IN LINE AB Intro Lite om Swedbanks Teknik Test Varför TruClient En ny teknik kräver ett nytt tänk

Läs mer

JavaScript. JavaScript Ramverk (Bibliotek) jquery + jquery UI

JavaScript. JavaScript Ramverk (Bibliotek) jquery + jquery UI JavaScript JavaScript Ramverk (Bibliotek) jquery + jquery UI Allmänt ramverk/bibliotek Importera JavaScript-kod Plattformsoberoende JavaScript Prototype + script.aculo.us jquery + jquery UI Återanvända

Läs mer

Webbplats analys sarajacob3216.wordpress.com

Webbplats analys sarajacob3216.wordpress.com Webbplats analys sarajacob3216.wordpress.com Genereras på Juli 22 2019 17:37 PM Ställningen är 50/100 SEO Innehåll Titel Längd : 28 Perfekt, din titel innehåller mellan 10 och 70 tecken. Beskrivning Welcome

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

TDP013. Innan AJAX Ett synkront webb. Med AJAX Ett Asynkront webb AJAX. Webbprogrammering och interaktivitet. AJAX, CORS,jQuery, PaaS, Projektet

TDP013. Innan AJAX Ett synkront webb. Med AJAX Ett Asynkront webb AJAX. Webbprogrammering och interaktivitet. AJAX, CORS,jQuery, PaaS, Projektet Innan AJAX Ett synkront webb TDP013 Webbprogrammering och interaktivitet AJAX, CORS,jQuery, PaaS, Projektet 1. Användaren klickar länk, formulär, bild etc 2. Anrop till servern sker 3. Servern agerar på

Läs mer

TDP013. Webbprogrammering och interaktivitet. AJAX, CORS,jQuery, PaaS, Projektet. Anders Fröberg Institutionen för Datavetenskap (IDA)

TDP013. Webbprogrammering och interaktivitet. AJAX, CORS,jQuery, PaaS, Projektet. Anders Fröberg Institutionen för Datavetenskap (IDA) TDP013 Webbprogrammering och interaktivitet AJAX, CORS,jQuery, PaaS, Projektet Anders Fröberg Institutionen för Datavetenskap (IDA) Innan AJAX Ett synkront webb 1. Användaren klickar länk, formulär, bild

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

JavaScript. Innehåll. Historia. Document object model DHTML. Varför Javascript?

JavaScript. Innehåll. Historia. Document object model DHTML. Varför Javascript? Innehåll JavaScript En introduktion till skriptspråket JavaScript och till DOM Scripting Introduktion till JavaScript och DOM JavaScript Syntax DOM och DOM Scripting Händelsehantering och CSS Historia

Läs mer

PHP. Dynamiska webbsidor

PHP. Dynamiska webbsidor PHP Dynamiska webbsidor WEBBPROGRAMMERING PÅ SERVERSIDAN DB server web browser client client script HTTP Request (get, post) HTTP Response (HTML, CSS, JS) web server server script JS PHP file (txt, xml,

Läs mer

Webbprogrammering. Sahand Sadjadee

Webbprogrammering. Sahand Sadjadee Webbprogrammering Sahand Sadjadee Agenda Webb The World Wide Web (WWW) is a network of online content that is formatted in HTML and accessed via HTTP. The term refers to all the interlinked HTML pages

Läs mer

Riktiga Vykort Partner webb Teknisk beskrivning

Riktiga Vykort Partner webb Teknisk beskrivning Riktiga Vykort Partner webb Teknisk beskrivning I denna tekniska beskrivning finns instruktioner om hur du skall konfigurerar din webb för att kunna skicka bilder som Riktiga Vykort. Har du frågor kontaktar

Läs mer

1ME323 Webbteknik 3 Lektion 6 API. Rune Körnefors. Medieteknik Rune Körnefors

1ME323 Webbteknik 3 Lektion 6 API. Rune Körnefors. Medieteknik Rune Körnefors 1ME323 Webbteknik 3 Lektion 6 API Rune Körnefors Medieteknik 1 2019 Rune Körnefors rune.kornefors@lnu.se Agenda API (Application Programming Interface) Mashup Flickr API Google Maps API Labb 6 2 API (Application

Läs mer

"HTML5 och relaterade API:er"

HTML5 och relaterade API:er "HTML5 och relaterade API:er" Föreläsning 7 HTML5 och relaterade API:er Webbteknik II, 1DV449 http://coursepress.lnu.se/kurs/webbteknik-ii/ Johan Leitet johan.leitet@lnu.se twitter.com/leitet facebook.com/leitet

Läs mer

Introduk+on +ll programmering i JavaScript

Introduk+on +ll programmering i JavaScript Föreläsning i webbdesign Introduk+on +ll programmering i JavaScript Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Språk Naturliga språk Mänsklig kommunika+on T.ex. Svenska, engelska,

Läs mer

Services + REST och OAuth

Services + REST och OAuth Services + REST och OAuth Syftet med Services Skapa ett Drupal API för att exponera webb- API:er. Officiella versionen - Create a unified Drupal API for web services to be exposed in a variety of different

Läs mer

TDP013. Node.js, Mocha, Istanbul. Anders Fröberg Institutionen för Datavetenskap

TDP013. Node.js, Mocha, Istanbul. Anders Fröberg Institutionen för Datavetenskap TDP013 Node.js, Mocha, Istanbul Anders Fröberg Institutionen för Datavetenskap Load up your guns, and bring your friends This is the end the only end my Friend Äntligen stod prästen i predikstolen I ll

Läs mer

Swedbank Mobile Loadtesting. LoadRunner 11.04 Mobile App protocol

Swedbank Mobile Loadtesting. LoadRunner 11.04 Mobile App protocol Swedbank Mobile Loadtesting LoadRunner 11.04 Mobile App protocol Bakgrund Mission: Prestandatesta mobilt backend Typ: RESTful tjänst Underlag: Dokumenterat URI och API (Uniform Resource Identifier, Application

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

Klient/server. Översikt. Lektion 1: Webbtekniker från Microsoft. Webbteknik från Microsoft. Klient/server. Designmönster. Utrullning.

Klient/server. Översikt. Lektion 1: Webbtekniker från Microsoft. Webbteknik från Microsoft. Klient/server. Designmönster. Utrullning. Klient/server Översikt Webbteknik från Microsoft. Klient/server. Designmönster. Utrullning. Lektion 1: Webbtekniker från Microsoft Microsoft webbtekniker. ASP.NET. Klientsidan. Internet Information Server.

Läs mer

Lektion 5 HTML, CSS, PHP och MySQL

Lektion 5 HTML, CSS, PHP och MySQL Lektion 5 HTML, CSS, PHP och MySQL I den här lektionen behandlas i huvudsak PHP för att läsa information från en databas, MySQL. Det förutsätts att tidigare lektioner är gjorda, eller att du har tillräckliga

Läs mer

Webbteknik II. Föreläsning 4. Watching the river flow. John Häggerud, 2011

Webbteknik II. Föreläsning 4. Watching the river flow. John Häggerud, 2011 Webbteknik II Föreläsning 4 Watching the river flow Web Service XML-RPC, SOAP, WSDL, UDDI HTTP Request, Response, Headers, Cache, Persistant Connection REST Hype or the golden way? Web Service / Webbtjänst

Läs mer

Android översikt. TDDD80 Mobila och sociala applikationer

Android översikt. TDDD80 Mobila och sociala applikationer Android översikt TDDD80 Mobila och sociala applikationer Översikt Köra app på mobil / emulator Android Studio introduktion Android kodning Android labb 1 Köra på mobil / emulator Developer mode på mobilen

Läs mer

On-line produktion TDDC61

On-line produktion TDDC61 On-line produktion TDDC61 Sök till Legionen! Förra gången MuddyCards PHP Lab 4. Agenda Webbtermer och annat som är bra att veta Bildoptimering Javascript jquery Portfolio Avstämning kurs. Webbsida Webbsida

Läs mer

Vis it. jquery jquery används lite överallt i appen på olika sätt. Det främsta användningsområdet är vid selektering och manipulering av HTML element.

Vis it. jquery jquery används lite överallt i appen på olika sätt. Det främsta användningsområdet är vid selektering och manipulering av HTML element. Vis it Introduktion Vi har skapat den webbaserade appen Vis it som bygger på att användare kan ta bilder på och lägga upp sevärdheter via sin mobiltelefon. Dessa sevärdheter är positionsbaserade vilket

Läs mer

PageSpeed Insights. Det finns 2 omdirigeringar. Omdirigeringar gör att det tar längre tid innan sidan kan läsas in.

PageSpeed Insights. Det finns 2 omdirigeringar. Omdirigeringar gör att det tar längre tid innan sidan kan läsas in. PageSpeed Insights 50 / 100 Hastighet Bör Fixas: Undvik omdirigeringar från målsidan Det finns 2 omdirigeringar. Omdirigeringar gör att det tar längre tid innan sidan kan läsas in. Undvik omdirigeringar

Läs mer

Webbteknik. Innehåll. Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender. En kort introduktion

Webbteknik. Innehåll. Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender. En kort introduktion Webbteknik En kort introduktion Innehåll Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender 1 Historisk återblick 89 CERN Tim Berners Lee Ett plattformsoberoende sätt att sprida

Läs mer

Webbplats analys playhousenightclub.com

Webbplats analys playhousenightclub.com Webbplats analys playhousenightclub.com Genereras på April 27 2019 09:54 AM Ställningen är 44/100 SEO Innehåll Titel Playhouse Nightclub Längd : 19 Perfekt, din titel innehåller mellan 10 och 70 tecken.

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

Webbplats analys akcpdistributor.de.ipaddress.com

Webbplats analys akcpdistributor.de.ipaddress.com Webbplats analys akcpdistributor.de.ipaddress.com Genereras på Juli 19 2019 10:29 AM Ställningen är 52/100 SEO Innehåll Titel Akcp Distributor - Akcp-Distributor.de Website Analysis and Traffic Statistics

Läs mer

Övning MS SQL och MVC del 2

Övning MS SQL och MVC del 2 1 Övning MS SQL och MVC del 2 Denna övning, som är uppdelad i två delar, kommer att visa hur du kan arbeta med MS SQL och MVC. Applikationen är ett inloggningssystem som innehåller de flesta saker som

Läs mer

DI Studio 4.3 - nyheter

DI Studio 4.3 - nyheter DI Studio 4.3 - nyheter Sofie Eidensten och Patric Hamilton Copyright 2010 SAS Institute Inc. All rights reserved. 2 Varför DI Studio Snabbare utveckling Enklare underhåll Gör det överskådligt 3 Nyheter

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

Webbplats analys akcpsensor.de.ipaddress.com

Webbplats analys akcpsensor.de.ipaddress.com Webbplats analys akcpsensor.de.ipaddress.com Genereras på Juli 19 2019 10:29 AM Ställningen är 52/100 SEO Innehåll Titel Akcp Sensor - AKCess Pro IP-basierte Messtechnik für die Sicherheitsüberwachung

Läs mer

PAINTFEUD. Erfarenheter

PAINTFEUD. Erfarenheter PAINTFEUD Erfarenheter OM OSS Tobias Hill, Citerus! Jesper Hammarbäck, Citerus KLIENT SERVER AGENDA VAD? Paintfeud, Spelet VARFÖR? HUR? Arkitektur klient & server, CQRS ERFARENHETER VAD? PAINTFEUD Pictionary:ish

Läs mer

Webbplats analys facebook.com

Webbplats analys facebook.com Webbplats analys facebook.com Genereras på Januari 14 2019 10:26 AM Ställningen är 44/100 SEO Innehåll Titel Facebook - Log In or Sign Up Längd : 28 Perfekt, din titel innehåller mellan 10 och 70 tecken.

Läs mer

JS & beteende. TNMK30 - Elektronisk publicering

JS & beteende. TNMK30 - Elektronisk publicering JS & beteende TNMK30 - Elektronisk publicering Dagens föreläsning HTML Formulär JavaScript Syntax Events DOM Validering av fomulär JavaScript Skriptspråk som körs på klientsidan (klientskript). Koden exekveras

Läs mer

Next -> Next -> Finish

Next -> Next -> Finish Next -> Next -> Finish eller? Vad bör man tänka på i samband med uppgradering till eller nyutveckling i EPiServer CMS 7? Oscar Larsson Oscar Larsson Agenda Det Leverantören här är Sogeti lovar Är det verkligen

Läs mer

Räkna med ASP.NET MVC 3

Räkna med ASP.NET MVC 3 Instruktion Räkna med ASP.NET MVC 3 Introduktionsuppgift Författare: Mats Loock Kurs: ASP.NET MVC Kurskod:1DV409 Innehåll Du ska följa steg-för-steg -instruktionen i denna introduktionsuppgift och skapa

Läs mer

Webbplats analys akcpshop.de.websiteoutlook.com

Webbplats analys akcpshop.de.websiteoutlook.com Webbplats analys akcpshop.de.websiteoutlook.com Genereras på Juli 19 2019 10:32 AM Ställningen är 67/100 SEO Innehåll Titel Akcp-shop : AKCP SHOP Online Shop für sensorprobe, securityprobe und AKCP Sensoren

Läs mer

Webbplats analys google.com

Webbplats analys google.com Webbplats analys google.com Genereras på Januari 14 2019 10:26 AM Ställningen är 37/100 SEO Innehåll Titel Google Längd : 6 Idealisk, din titel bör innehålla mellan 10 och 70 tecken (mellanslag räknas

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

DT069G - Multimedia för webben - VT16_P4

DT069G - Multimedia för webben - VT16_P4 DT069G - Multimedia för webben - VT16_P4 Lärmodul 5 CMS MaSv1219 Malin Svensson Kravspecifikation - Uppgiften för den här lärmodulen är att: 1. Skapa en webbplats med valfritt CMS. Webbplatsen ska uppfylla

Läs mer

729G28. Webbprogrammering och databaser. Introduktion till webbutveckling med PHP. Jakob Pogulis Institutionen för Datavetenskap (IDA)

729G28. Webbprogrammering och databaser. Introduktion till webbutveckling med PHP. Jakob Pogulis Institutionen för Datavetenskap (IDA) 729G28 Webbprogrammering och databaser Introduktion till webbutveckling med PHP Jakob Pogulis Institutionen för Datavetenskap (IDA) 729G28 Webbprogrammering och databaser Introduktion till webbutveckling

Läs mer

E09 - Totally Tool Time

E09 - Totally Tool Time E09 - Totally Tool Time Dagens agenda Fönster Systemdialoger Location History DOM och BOM DOM Document Object Model BOM Browser Object Model BOM hanterar Insorterat under denna rubrik hittar vi: Timers

Läs mer

Integrerad i egen cup-portal Sid 1

Integrerad i egen cup-portal Sid 1 Integrerad i egen cup-portal Sid 1 Skillnader mellan fristående och integrerad cup-portal En liten viktig synpunkt innan ni går vidare: Det går snabbt och enkelt att växla mellan den fristående och integrerade

Läs mer

! HTML Formulär! JavaScript! Syntax! Events! DOM. ! URL variabler i en query string (get) ! HTTP post request (post)

! HTML Formulär! JavaScript! Syntax! Events! DOM. ! URL variabler i en query string (get) ! HTTP post request (post) OVERVIEW JAVASCRIPT Beteende! HTML Formulär! JavaScript! Syntax! Events! DOM! Validering av fomulär WEBBPROGRAMMERING PÅ KLIENTSIDAN HTML FORMULÄR! Skriptspråk som körs på klientsidan (klientskript)! Koden

Läs mer

Statistik från webbplatser

Statistik från webbplatser Statistik från webbplatser virtuella besök eller levererade sidor? Ulf Kronman Karolinska Institutet Universitetsbiblioteket Föredragets huvuddelar Frågorna och motfrågorna Vilka frågor ställer chefen,

Läs mer

PHP. TNMK30 - Elektronisk publicering

PHP. TNMK30 - Elektronisk publicering PHP TNMK30 - Elektronisk publicering HTML, index, W; W: http://www.student.itn.liu.se/~liuid### index.html 15php_test_server Dagens föreläsning Statisk webbsida -> HTML, CSS Interaktion -> JS (klientscript)

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

Webbplats analys akcpdistributor.de.cutestatvalue.com

Webbplats analys akcpdistributor.de.cutestatvalue.com Webbplats analys akcpdistributor.de.cutestatvalue.com Genereras på Juli 19 2019 10:28 AM Ställningen är 47/100 SEO Innehåll Titel akcp-distributor.de is worth $ 8.95 - Website Worth, Calculator Längd :

Läs mer

Modul 8 Hantering av indata

Modul 8 Hantering av indata Modul 8 Hantering av indata Indata De flesta webbplatser idag tillåter användare att mata in data Utan denna möjlighet hade inte webben varit vad den är idag Tyvärr innebär detta stora säkerhetsrisker

Läs mer

Webbutveckling spelterminal för Svenska spel AB

Webbutveckling spelterminal för Svenska spel AB Webbutveckling spelterminal för Svenska spel AB Web Development - Gaming Terminal for Svenska Spel AB Rasmus Spiegelberg Examensarbete inom information- och programvarusystem, grundnivå Högskoleingenjör

Läs mer

Elektronisk publicering TNMK30

Elektronisk publicering TNMK30 Elektronisk publicering TNMK30 Förra gången Usability & interaktionsdesign Projektintroduktion Bildbehandling. Byte av handledare Istället för Martin Johansson Annsofi Pettersson, annpe655@student.liu.se

Läs mer

Webbplats analys ipchecker.us

Webbplats analys ipchecker.us Webbplats analys ipchecker.us Genereras på Juni 22 2016 19:19 PM Ställningen är 39/100 SEO Innehåll Titel IPChecker.us - Display Your IP - Whois IP - IP Lookup - What Is My IP? Längd : 70 Perfekt, din

Läs mer

IT för personligt arbete F2

IT för personligt arbete F2 IT för personligt arbete F2 Nätverk och Kommunikation DSV Peter Mozelius Kommunikation i nätverk The Network is the Computer Allt fler datorer är sammankopplade i olika typer av nätverk En dators funktionalitet

Läs mer

EDA095 HTML. Per Andersson. April 26, Lund University Innehåll: HTML, CSS, DOM, JavaScript

EDA095 HTML. Per Andersson. April 26, Lund University   Innehåll: HTML, CSS, DOM, JavaScript EDA095 HTML Per Andersson Lund University http://cs.lth.se/pierre_nugues/ April 26, 2017 Innehåll: HTML, CSS, DOM, JavaScript Per Andersson EDA095 HTML April 26, 2017 1 / 23 Webben Webben byggs upp av

Läs mer

Exemple på Tentauppgifter Webbprogrammering

Exemple på Tentauppgifter Webbprogrammering LUNDS TEKNISKA HÖGSKOLA 1(6) Institutionen för datavetenskap Exemple på Tentauppgifter Webbprogrammering 2019 02 28 version 2019-03-20 15:36:14+01:00 Tillåtna hjälpmedel: inga. Detta är ett exempel på

Läs mer

DB, DATA, LOGIC, EXPOSURE (WEB)

DB, DATA, LOGIC, EXPOSURE (WEB) Backend DB, DATA, LOGIC, EXPOSURE (WEB) MySQL. MongoDB, LDAP, etc DB DATA LOGIC SOA TJänster EXPOSURE (WEB) Klienter kan vara webbsidor, desktop/mobil applikationer, andra SOA tjänster, ATM, parkeringsautomater

Läs mer

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.

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. 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

Läs mer

Modul 6 Webbsäkerhet

Modul 6 Webbsäkerhet Modul 6 Webbsäkerhet Serverskript & Säkerhet Webbservrar & serverskript exponerar möjlighet för fjärranvändare att skicka data och köra kod vilket medför risker. Man ska aldrig lita på att alla vill göra

Läs mer

Webbplats analys villagetalkies.com

Webbplats analys villagetalkies.com Webbplats analys villagetalkies.com Genereras på Februari 18 2019 10:42 AM Ställningen är 57/100 SEO Innehåll Titel Corporate Video Production Company in Bangalore Video Making Agency Längd : 69 Perfekt,

Läs mer

Webbplats analys bestsiteanalysis.eu

Webbplats analys bestsiteanalysis.eu Webbplats analys bestsiteanalysis.eu Genereras på Mars 24 2019 10:21 AM Ställningen är 43/100 SEO Innehåll Titel SiteDoctor SiteSpy Utility Webmaster Review Tools Längd : 55 Perfekt, din titel innehåller

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

Webbplats analys saleoff.store

Webbplats analys saleoff.store Webbplats analys saleoff.store Genereras på Juni 15 2019 15:56 PM Ställningen är 60/100 SEO Innehåll Titel SaleOFF Store Everything Is On Sale Best Price Online Längd : 63 Perfekt, din titel innehåller

Läs mer

Olika slags datornätverk. Föreläsning 5 Internet ARPANET, 1971. Internet började med ARPANET

Olika slags datornätverk. Föreläsning 5 Internet ARPANET, 1971. Internet började med ARPANET Olika slags datornätverk Förberedelse inför laboration 4. Historik Protokoll, / Adressering, namnservrar WWW, HTML Föreläsning 5 Internet LAN Local Area Network student.lth.se (ganska stort LAN) MAN Metropolitan

Läs mer

Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät

Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät Repetition Internet Hypertext Server och klient Föreläsning 2 HTTP HTML Internet Hypertext Många sammankopplade nät Text försedd med länkar till andra texter Gemensamma adresser T ex 10.10.0.1 Gemensamma

Läs mer

Repetition. Hypertext. Internet HTTP. Server och klient Föreläsning 2. Text försedd med länkar till andra texter. Många sammankopplade nät

Repetition. Hypertext. Internet HTTP. Server och klient Föreläsning 2. Text försedd med länkar till andra texter. Många sammankopplade nät Repetition Föreläsning 2 Internet Hypertext Server och klient HTTP HTML Internet Många sammankopplade nät Gemensamma adresser T ex 10.10.0.1 Gemensamma protokoll Protokoll = regler och algoritmer för kommunikation

Läs mer

MVC med Javascript och Ajax. Filip Ekberg

MVC med Javascript och Ajax. Filip Ekberg MVC med Javascript och Ajax Filip Ekberg Hur går det? Föreläsningstempo Går det för fort? Labbar & Övningar Är de otydliga? Behövs mer hjälp? Upplägg Mindre föreläsning? Mer labbar? Läser ni boken? Läsanvisningar

Läs mer

On-line produktion TDDC61

On-line produktion TDDC61 On-line produktion TDDC61 Förra gången MuddyCards Animation Portfolio Lab 3. Muddycards - resultat Positiva kommentarer Tempo föreläsningar Labbhandledning, pedagogik Mer labbhandledning Instruktioner

Läs mer

HejKalmar app. Projektrapport. Webbprojekt I

HejKalmar app. Projektrapport. Webbprojekt I Projektrapport HejKalmar app Webbprojekt I Författare: Cecilia Lindqvist, Linus Lundevall, Christofer Olaison, Andreas Söderström och Isak Utegård Handledare: Tobias Ohlsson Examinator: Tobias Ohlsson

Läs mer

Webbtjänster med API er

Webbtjänster med API er Webbtjänster med API er Mål med lektionen! En lite djupare inblick i RESTfulla tjänster Vad lektionen omfattar RESTful Services Överblick SOAP kan vara lite overkill för vissa specifika web service scenarion.

Läs mer

Du skall naturligtvis visa körexempel med output där det behövs i din rapport!

Du skall naturligtvis visa körexempel med output där det behövs i din rapport! och databprogrammering Christilinda Göstson - PL/SQL, paket och ref cursor Du skall naturligtvis visa körexempel med output där det behövs i din rapport! OBS! Denna labb redovis i labbrapport via mail

Läs mer