Change search
CiteExportLink to record
Permanent link

Direct link
Cite
Citation style
  • apa
  • harvard1
  • ieee
  • modern-language-association-8th-edition
  • vancouver
  • Other style
More styles
Language
  • de-DE
  • en-GB
  • en-US
  • fi-FI
  • nn-NO
  • nn-NB
  • sv-SE
  • Other locale
More languages
Output format
  • html
  • text
  • asciidoc
  • rtf
Ombyggnad av en statisk webbsida till en responsiv
KTH, School of Technology and Health (STH), Medical Engineering, Computer and Electronic Engineering.
KTH, School of Technology and Health (STH), Medical Engineering, Computer and Electronic Engineering.
2016 (Swedish)Independent thesis Basic level (professional degree), 10 credits / 15 HE creditsStudent thesisAlternative title
Reconstruction of a static website to a responsive design (English)
Abstract [sv]

Idag utförs arbete ofta på resande fot och då används smarta telefoner och surfplat- tor istället för datorer. Dessa skärmar är oftast mindre än vad en datorskärm är. Där- för efterfrågas en mer dynamisk design av webbsidor som anpassar sig till storleken på skärmen. Webbsidans statiska design var 1000 pixlar bred och innehöll många tabeller vilket skulle få plats i den dynamiska designen med en minsta bredd på 320 pixlar. En del viktig information behövde även lyftas fram och göras tydligare. Det implementerades en ny CSS-mall samt flera nya JavaScript. En del HTML justerades för att passa den nya CSS-mallen. Eftersom en del viktig information behövdes pre- senteras tydligare skapades en helt ny flik. Innehållet blev driftinformation relaterat till den inloggade kunden. Efter simuleringarna i Chrome verifierades responsivite- ten av sidorna på alla skärmstorlekar. Implementeringen av AJAX gjorde att de lång- samma sidorna svarade direkt, men förbättrade inte den totala laddtiden. För att förbättra den skulle en back-end optimering behöva utföras. Projektets webbsida fu- gerade enligt önskemål. 

Abstract [en]

In today ́s society people are working more and more while travelling, which makes them use smartphones and tablets instead of laptops. These screens are usually smaller than a laptop screen. That is why a more dynamic web design has been re- quested in order to fit the screen on the device being used. The static webpage’s width was 1000 pixels and the goal was to fit all the tables and information in the respon- sive version with a width of 320 pixels. Important information also had to be moved to a different page in order to make it more visible. A new CSS-template was imple- mented and several new Java Scripts followed by finer adjustments to the HTML code. Since some information had to be more visible to the user, a new tab was cre- ated in order to fulfill this demand. The new tab contained information about “Net- work Status” only related to the signed in user. After simulating the webpage in Chrome the responsiveness of the page was confirmed on all screen sizes. Sending the webpage asynchronously made the slow pages respond instantly but the total loading time was still slow. To fix this, back-end programming would have been re- quired. The project’s webpage fulfilled all the requirements. 

Place, publisher, year, edition, pages
2016. , 60 p.
Series
TRITA-STH, 2016:45
Keyword [en]
Responsive, Dynamic, Webpage, CSS, JavaScript, JQuery, Razor, AJAX
Keyword [sv]
Responsiv, Dynamisk, webbsida, CSS, JavaScript, JQuery, Razor, AJAX
National Category
Computer Systems
Identifiers
URN: urn:nbn:se:kth:diva-188218OAI: oai:DiVA.org:kth-188218DiVA: diva2:934565
External cooperation
DGC
Subject / course
Power Electronics
Educational program
Bachelor of Science in Engineering - Electrical Engineering
Supervisors
Examiners
Available from: 2016-09-29 Created: 2016-06-09 Last updated: 2016-09-29Bibliographically approved

Open Access in DiVA

fulltext(2386 kB)76 downloads
File information
File name FULLTEXT01.pdfFile size 2386 kBChecksum SHA-512
8c2b2ea7d2f5f4509dd90b7f7fa300f63733d3ba22d96f39c25e026fbb74d0c80765a5cb769ded2cec5bb52bfb88c9bdcf97ca5f6bafcd413b848107f0253662
Type fulltextMimetype application/pdf

By organisation
Computer and Electronic Engineering
Computer Systems

Search outside of DiVA

GoogleGoogle Scholar
Total: 76 downloads
The number of downloads is the sum of all downloads of full texts. It may include eg previous versions that are now no longer available

urn-nbn

Altmetric score

urn-nbn
Total: 588 hits
CiteExportLink to record
Permanent link

Direct link
Cite
Citation style
  • apa
  • harvard1
  • ieee
  • modern-language-association-8th-edition
  • vancouver
  • Other style
More styles
Language
  • de-DE
  • en-GB
  • en-US
  • fi-FI
  • nn-NO
  • nn-NB
  • sv-SE
  • Other locale
More languages
Output format
  • html
  • text
  • asciidoc
  • rtf