DLBCSWAD01_Session1 Web Development .pdf

Web Development

1. WEB APPLICATIONDEVELOPMENT
LECTURER JOHN DOE

2. INTRODUCTORY ROUND
Who are you?
-Name
-Emplyer
-Position/responsibilities
-Fun Fact
-Previousknowledge? Expectations?

3. TOPIC OUTLINE
ArchitecturalFoundations 1
2
3
4
5
6
Tools of Web Development
Static Web Page Development
Advanced Design Techniques
Web Page Development with JavaScript
Web Application Testing and Security

4. ARCHITECTURAL FOUNDATIONS
UNIT 1

5. STUDY GOALS
-Describe how and why the internet was created.
-Explain the architectural concepts behind web
applications.
-Define what is meant by internet protocols and URLs.
-Assess the quality of web applications.
-Describe important architecture trends and analyze
the advantages and the drawbacks of these
architectural patterns.

6. EXPLAIN SIMPLY
1.What is the internet composed of?
2.What does a URL represent?
3.What is the difference between MPA and SPA
applications?

7. The Internet is the largest global network making all continents
and places connected.
-Advantages
-Connects people
-Makes information readily available
-Disadvantages
-Reduced personal contact between people
-Created new ways of criminal structures
INTRODUCTION
Source of the text: Course Book DLBCSWAD01, p.6.

8. STRUCTURE AND HISTORY OF THE INTERNET
The Internet connects
many computers and
comprises several devices.
-Switches
-Routers
-Repeaters
-Servers
-…
Source of the text: Course Book DLBCSWAD01, p.6.
Source of the image: The author.

9. STRUCTURE AND HISTORY OF THE INTERNET
Source of the text: Course Book DLBCSWAD01, p.8.
ARPAnet
(late
1950s)
-Interconnect
mainframe
computers-Enable them to
establish data
communication
over long
distances.
ARPAnet
presented
to the public
(1971)
-Not for private
use
-Military and
scientific
applications à
MILnet
NSFnet
replaced
ARPAnet
(1989)
-100K connected
host computers
WWW
service
based on the HTML
was
published
(1993)
-The first browser
to display HTML
pages was Mosaic

10. -Exchanging data requires establishing a common procedure
(PROTOCOL) between peers.
-Commonly used protocols on the Internet are:
-Internet Protocol (IP)
-Transmission Control Protocol (TCP)
-Data packets are created as TCP/IP segments
-Have a maximum size of 1500 bytes
-TCP header (20 bytes)
-IP header (20 bytes)
INTERNET PROTOCOLS AND URI(S)
Source of the text: Course Book DLBCSWAD01, p.10.

11. -A packets traveling the Internet carry its destination addresses
-Destination address is called IP address
-IP addresses have two versions: IPv4 and IPv6
-IPv4
-Length: 32 bits
-Format: A.B.C.D (A,B,C,D are decimal values between 0 and 255)
-IPv6
-Length: 128 bits
-Format: A:B:C:D:E:F:G:H (A-H are hexadecimal values between 0 and
FFFF)
INTERNET PROTOCOLS AND URI(S)
Source of the text: Course Book DLBCSWAD01, p.10-15.

12. -A packet originated in
Hamburg and destined at Los
Angeles travels through the
Internet nodes until it
reaches its goal.
-The forwarding of packets in
the intermediate nodes is
called "routing"
INTERNET PROTOCOLS AND URI(S)
Source of the text: Course Book DLBCSWAD01, p.11.
Source of the image: Bühler et al., 2019, p. 5.

13. -A Domain Name Service (DNS) assigns a
domain to an IP address.
-www.iubh-online.org→ IPv4: A.B.C.D
-The DNS is a hierarchical structure with
multiple levels
-Top-Level Domain (TLD) → org
-Second-Level Domain (SLD)→ iubh-online
-Host-Level→ www
-Dynamic DNS (DDNS) update the
assignment when the IP address
changes.
INTERNET PROTOCOLS AND URI(S)
Source of the text: Course Book DLBCSWAD01, p.12-14.
Source of the image: The author.

14. -Domain name only points to the server, but multiple resources can exist
on it! A Uniform Resource Locator (URL) is used to specify the location of
each resource
-A URL is similar to protocol://server.domain-name/folder/file-https://www.iu-university.org/bachelor/computer-science/-https→ identifies the communication protocol (commonly HTTP/HTTPS)-www.iu-university.org→ used by the DNS to lookup the server’s IP address-bachelor/computer-science → is the path to the resource on the server
-A Uniform Resource Name (URN) identifies a resource with a freely
assigned name.
-A Uniform Resource Identifier (URI) is any URL or URN
INTERNET PROTOCOLS AND URI(S)
Source of the text: Course Book DLBCSWAD01, p.12-14.

15. -A web application contains
the pages of a website.
-Hosted on a server
-The pages are displayed in web
browsers
-Web application quality
-Functional
-Fulfillment of functions
-Non-functional
-Performance metrics
WEB APPLICATION ARCHITECTURE
Source of the text: Course Book DLBCSWAD01, p.15-19.
website
Static pages
-HTML-CSS
Dynamics
-Client-side-JavaScript-Server-side-PHP
-...

16. ISO 25010 in particular defines standardized criteria that can be
used to assess the quality of a web application
-Effectiveness
-Efficiency
-Satisfaction
-Freedom from risk
-Context coverage
World Wide Web Consortium (W3C)
-Standard programming concepts that are important for the internet
-W3 Validator
WEB APPLICATION QUALITY
Source of the text: Course Book DLBCSWAD01, p.17-19.

17. -Design and architecture choices are key success factors.
-Customer have different requirements and demands
-Increased availability
-Flexibility
-Fault-tolerance
-Reliability
-Traditional architectures
-Multi-Page Application (MPA) and Single-Page Application (SPA)
-Modern architectures
-Service-Oriented Architecture (SOA), microservice, serverless, etc.
CURRENT TRENDS
Source of the text: Course Book, DLBCSWAD01, p.19-31.

18. -In MPAs, each time the browser
requests data from the server,
it renders a new page and
sends it back to the browser.
-Advantages
-Fast loading of the initial page
-Drawbacks
-We only need the initial page once
-Browser-server round trips are
expensive in terms of bandwidth.
MULTI-PAGE APPLICATIONS (MPA)
Source of the text: Course Book DLBCSWAD01, p.21.
Source of the image: The author.

19. -In SPAs, pages are rendered on
the client side. The web
browser fetches only updates
from the server.
-Advantages
-Less frequent full-page requests
-Quick after the initial load
-Drawbacks
-The initial load is expensive
SINGLE-PAGE APPLICATIONS (SPA)
Source of the text: Course Book DLBCSWAD01, p.21.
Source of the image: The author.

20. -The application is designed
to as a single piece of code
on a single machine.
-The components of a
monolithic architecture are
-Interconnected
-Interdependent
MONOLITHIC ARCHITECTURE
Source of the text: Course Book DLBCSWAD01, p.22-23.
User
Interface
Business
Logic
Data
Access

21. Small sizeapplications
-Usuallyperformsbetter
-Easy todeploy
-Easy totestanddebug
-Easy toscale
-Byduplicatingtheapplication
MONOLITHIC ARCHITECTURE
Relativelylarge applications
-Sufferin termsof
maintainability
-Difficulttochange
-Difficulttointroduce
different technologies
-Centralizedfunctionality
-Maintenance
Source of the text: Course Book DLBCSWAD01, p.22-23.

22. -The application consists of a
number of services
-Services communicate with
each other
-Services communicate with
the end user
SERVICE-ORIENTED ARCHITECTURE
Source of the text: Course Book DLBCSWAD01, p.24-25.
User
Interface
Service-1
Service-2
Service-3

23. Advantages
-Flexibility
-Loose couplingofcomponents
-Independent servicescanbeupdated
independently
-Services canbeimplementedin
different languagesandframeworks
-Easy totest
SERVICE-ORIENTED ARCHITECTURE
Drawbacks
-Large numberofservices
-Deploymentcomplexity
-Scalability
-Scalingindividual servicesisdifficult
Source of the text: Course Book DLBCSWAD01, p.22-23.

24. Microservicesrefertothe
granularityofSOA internal
components
-Eachmicroservicedoesonetask
optimally
-A microserviceshouldbe
developed, tested, deployed, and
managedasa completesub-
application.
UNDERSTANDING MICROSERVICES
Pros
-Scalability
-Easeofdeployment
-Continuousdelivery
-Testability
Source of the text: Course Book DLBCSWAD01, p.22-23.
Drawbacks
-Balancingthemicroservicesize
-Error traceability
-Complexity
-Dependenceon DevOps

25. -Serverless architectures
refers to building and
running applications and
services without needing to
manage infrastructure.
-The web application still runs
-on a serve managed by cloud
service providers.
SERVERLESS ARCHITECTURE
Source of the text: Course Book DLBCSWAD01, p.21.
Source of the image: The author.

26. Serverlessarchitectures
guaranties
-Freedom frominfrastructure
matters
-Focus on codebuilding
-Costeffective
-Scalabilityandflexibility
-Experiment withdevelopment
technologies
SERVERLESS ARCHITECTURE
Serverlessarchitectures
drawbacks
-Vendor-basedlimitations
-Vendor-lock in
-Difficultieswithdebuggingand
monitoring
-Multitenancyissues
-Immature
Source of the text: Course Book DLBCSWAD01, p.21.

27. REVIEW STUDY GOALS
-Describehowandwhytheinternetwas created.
-Explainthearchitecturalconceptsbehindweb
applications.
-DefinewhatismeantbyinternetprotocolsandURLs.
-Assessthequalityofweb applications.
-Describeimportantarchitecturetrendsandanalyze
theadvantagesandthedrawbacksofthese
architecturalpatterns.

28. TRANSFER TASK
SESSION1

29. -Find out how you connect to the Internet in your house, school,
or any place where you browse online websites.
-Check the Internet connection settings on your device and list
your IP address and the DNS server.
-Try validating a web page in W3C validator and show the
validation results.
-You can obtain a sample web page from
https://www.w3schools.com/html/html_examples.asp
TRANSFER TASK

30. Please present your
results.
The results will be
discussed in plenary.
TRANSFER TASK
PRESENTATION OF THE RESULTS

31. LEARNING CONTROL QUESTIONS
1.The word “internet” is a portmanteau of…
a)“internal network.”
b)“international network.”
c)“implicit network.”
d)“interconnected network.”

32. LEARNING CONTROL QUESTIONS
2.What is meant by ‘core network’?
a)A particularly fast network structure of an intranet
b)The heart of the Internet, which is not accessible to the user.
c)The entire provider-side internet structure
d)A specially secured intranet

33. LEARNING CONTROL QUESTIONS
3.What does the functionality of a domain name system (DNS)
involve?
a)the assignment of numeric IP addresses to classic alphabetic
internet addresses
b)An allocation platform for domains
c)A public credit agency for web addresses
d)A provider system that assigns private IPv4 addresses

34. LIST OF SOURCES
Böhringer, J. et al. (2014). Kompendium der Mediengestaltung Digital und Print: Konzeption und Gestaltung [Compendiumofmediadesign digital andprint: Conceptionanddesign] (6th ed.). Springer.
Bühler, P., Schlaich, P., & Sinner, D. (2019). Internet: Technology, usage, socialmedia. Springer.
ISO 25010 -International OrganizationforStandardization. (2011). ISO/IEC 25010: Systems andsoftwareengineering-Systems andsoftwareQuality RequirementsandEvaluation (SQuaRE) -System andsoftware
qualitymodels.Geneva. https://www.iso.org/obp/ui/#iso:std:iso-iec:25022:ed-1:v1:en
Pomaska, G. (2005). Grundkurs Web-Programmierung: Interaktion, Grafik und Dynamik -Mit XHTML und CSS, XML, JavaScript, Applets, SVG, PHP [Introductorycourseweb programming: Interaction, graphicsand
dynamics—WithXHTML andCSS, XML, JavaScript, Applets, SVG, andPHP] (5th ed.). Vieweg+Teubner.
W3.org. (n.d.). The WorldWideWebbrowser.https://www.w3.org/People/Berners-Lee/WorldWideWeb.html[last accessed: 28.10.2020]).
Wendzel, S. (2018). IT securityforTCP/IP andIoTnetworks. Springer.

35. © 2021 IU Internationale Hochschule GmbH
This contentisprotectedbycopyright. All rightsreserved.
This contentmaynot bereproducedand/orelectronicallyedited, duplicated, ordistributedin anykindof
form withoutwrittenpermissionbytheIU Internationale Hochschule GmbH.