The document provides an introduction to a course on web development. It includes the following key points: - An overview of the course content which will cover HTML, CSS, JavaScript, and related frameworks. - Information on the evaluation process which will include exams and lab tests. - A discussion of important concepts like the difference between the Internet and the World Wide Web, how URLs work, common protocols like HTTP and HTTPS, and networking equipment.

2. COURSE 01
INTRODUCTION
lect. eng. Rajmond JÁNÓ, PhD
rajmond.jano@ael.utcl
uj.ro
fb.com/janorajmond

4. WELCOME, MY LITTLE GUINEA
PIGS!

5. TIMETABLE – 3EA RO

6. TIMETABLE – 3EA EN

7. TIMETABLE
• Have your Office365 account (users and
passwords) available for the very first
laboratory!
(http://o365.utcluj.didatec.ro/)

8. C01 – INTRODUCTION
• Course content
• Bibliography
• Evaluation methodology
• The Internet vs. a network vs. the WWW
• URLs, URIs, URNs
• Protocols: HTTP
• ISPs and DNSs
• Communication speeds, media and equipment

9. COURSE CONTENT

10. COURSE CONTENT

11. COURSE CONTENT
• C01: Introduction
• C02: HTML
• C03: CSS
• C04: CSS
• C05: SCSS, LESS, SASS
• C06: CSS Frameworks
• C07: JavaScript
• C08: JavaScript
• C09: JavaScript
• C10: JavaScript
• C11: jQuery
• C12: Angular
Partial exam Final exam

12. BIBLIOGRAPHY
• Courses
• Laboratory activities
• Bibliographical references will be given at the
end of each lecture

13. POSSIBLE HIRING
OPPORTUNITIES

14. EVALUATION PROCESS
• The evaluation process will consist of
• 1 x Partial Exam (PE) – theory and problems (15 pts.)
• 1 x Final Exam (FE) – theory and problems (20 pts.)
• 2 x Laboratory tests (LT1, LT2) – practical exercises (25
pts., 30 pts.)
• Final mark (FM) will be calculated as:
FM* = round((PE + FE + LT1 + LT2 + 10)/10)
* both LT1 and LT2 must be greater than 10 pts., otherwise you will have to
recontract the class

15. IN TODAY’S COURSE
1. The Internet
2. The World Wide Web
3. How does it all work?
4. Identifying resources
5. Protocols
6. Equipment used

16. WHAT IS “THE INTERNET”?
The Internet ≠ The World Wide
Web
but related

17. WHAT IS “THE INTERNET”?
• 1960s – U.S. Department of Defense:
development of ARPANET (research and
academic)
• 1969 – First message over ARPANET from
UCLA1 to SRI2
• 1970s – Several packet switching networks:
NPL, ARPANET, Merit, CYCLADES, Telenet, etc.
1 University of California, Los Angeles
2 Stanford Research Institute, Los Angeles
NPL
ARPANE
Telen
et
I’m
sorry?
What?
I don’t
understa
nd

18. WHAT IS “THE INTERNET”?
• 1970s – Common protocol: TCP/IP1
1 Transmission Control Protocol/Internet Protocol
TCP/I
P
TCP/IP
TCP/I
P
Oh,
now I
get it!
I
understa
nd now!

19. WHAT IS “THE INTERNET”?
• Internet = Inter + Network
• Global network of networks

20. WHAT IS “A NETWORK” THEN?
• A group of interconnected computer systems
(nodes) with the scope of communicating and
exchanging data

21. WHAT IS “A NETWORK” THEN?
• A group of interconnected computer systems
(nodes) with the scope of communicating and
exchanging data
• Nodes use the same protocol to communicate
• Communication media can be wired or wireless

22. WHAT IS “THE INTERNET”?
• Internet = Inter + Network
• Global network of networks
ISP #1
ISP #2
www.facebook.com
3
Home network
Office network
School network

23. WHAT IS “THE WORLD WIDE
WEB”?
• An information-sharing model that is built on
top of the Internet
• Get, share and search data
• Interconnects resource on the internet
• Via hyperlinks referenced with URIs1
• Accessed via web browsers
• Firefox, Chrome, Internet Explorer2, Safari, etc.
• Resources are presented via web pages
(websites)
1 Uniform Resource Identifier
2 https://www.dailymail.co.uk/sciencetech/article-6684697/Microsoft-cyber-security-
chief-tells-users-stop-using-Internet-Explorer.html

24. WEB BROWSERS
59.31
14.49
6.45 5.17 3.48 2.98 2.84 1.97 1.46
0
10
20
30
40
50
60
70
Market Share Perc. (Jan 2018 - Jan 2019)

25. HOW DOES IT ALL WORK?
1 Internet Service Provider (UPC, RDS/RCS, Telekom, Orange, etc.)
2 Domain Name System
Your local network
Your public IP
address
Your ISP1
The Internet
(Servers)
www.facebook.com
Your ex-GF/BF’s
profile
DNS2 server 185.60.216.35
Your ex-GF/BF’
profile

26. HOW DOES IT ALL WORK?
Your local network
Your public IP
address
Your ISP
The Internet
(Servers)
Your ISP
Your ex-
GF/BF’s
profile info
Your IP
address
Your ex-
GF/BF’s
profile info
1
1 Your ex is in a relationship…
Request
–
Respon
se
Cycle

27. URI, URL, URN
• URI – Uniform Resource Identifier
• A string of characters used to identify a resource on
the internet either by location or by name, or both
Name: Rajmond Jánó
or
Address: room E05, str. George Baritiu,
nr. 26-28, Cluj-Napoca, Romania

28. URI, URL, URN
• URL – Uniform Resource Locator
• A string of characters used to identify a resource on
the internet by location (address)
Address: room E05, str. George Baritiu,
nr. 26-28, Cluj-Napoca, Romania

29. URI, URL, URN
• URN – Uniform Resource Name
• A string of characters used to identify a resource on
the internet by name
• Since two or more resources can have the same
name, it is ineffective to use URNs
Name: Rajmond Jánó

30. URLS
• A URL consists of two required components:
• Protocol
• Domain
• Optional components
• Subdomain
• Path
• Port

31. URLS
http://www.gmail.com/registe
r.html
Protoc
ol Domai
n

32. URLS
http://www.gmail.com:80/registe
r.html
Protoc
ol Domai
n
Port
Port – a software connection point used by the TCP/IP
protocol and the connecting equipment (default if not
specified)

33. URLS
http://www.gmail.com/subdir/regist
er.html
Protoc
ol Domai
n
Path

34. URLS
http://www.ael.utcluj.ro
Protoc
ol
Subdomai
n
Domai
n

35. URLS
• Beware of scams!
com-promo.ro
Subdomai
n
Domai
n
wizzair.
www.

36. URLS
• Other components of URLS
• Query strings
https://www.imdb.com/find?q=Titanic&s=all
• Fragments
https://en.wikipedia.org/wiki/Boeing_737#Accidents_an
d_incidents

37. PROTOCOLS
• The WWW uses protocols as a way of accessing
information:
• HTTP, HTTPS
• FTP, WebDAV
• IMAP, POP3, SMTP
… and many more

38. HTTP
• Hypertext Transfer Protocol
• An application layer protocol that allows web-
based applications to communicate and
exchange data
• The messenger of the web
• TCP/IP based protocol used to deliver content
(text, images, videos, audio, etc.)

39. HTTP
• Connectionless
• After making the request, the client disconnects from
the server, then when the response is ready, the server
reestablishes the connection to deliver the response
• Can deliver any data as long as both parties can
understand it
• Stateless
• The client and server know about each other just
during the current request and, if it closes, and the two
parties want to connect again, they need to provide
information to each other anew and the connection is
handled as it would be the very first one

40. HTTP MESSAGES
Start Line
Headers
Body

41. HTTP MESSAGES
• The information in the three sections varies depending
on the HTTP message and whether it is a request or a
response
Method path/to/file.ext HTTP/version
Name1: value1
Name2: value2
Name 3: value3
…
Some content
HTTP/version Status code
Name1: value1
Name2: value2
Name 3: value3
…
Some content (e.g.: File requested)
HTTP request
message
HTTP response
message

42. HTTP REQUEST MESSAGE
GET /logins/mylogin.html
HTTP/1.0
Host: www.mywebsite.com
Accept: text/html
Accept-language: en-us
Start
line
Header
s
Method
A command that
tells the server
what to do
e.g.: GET, POST
URI HTTP version

43. HTTP RESPONSE MESSAGE
HTTP/1.0 200: OK
Host: www.mywebsite.com
Accept: text/html
Accept-language: en-us
/logins/mylogin.html
(actual file content)
HTTP version
HTTP
status
message
Start
line
Headers
Body

44. HTTP STATUS MESSAGES &
CODES
• 1xx (Informational): The request was received,
continuing process
• 2xx (Successful): The request was successfully received,
understood, and accepted
• 3xx (Redirection): Further action needs to be taken in
order to complete the request
• 4xx (Client Error): The request contains bad syntax or
cannot be fulfilled
• 5xx (Server Error): The server failed to fulfill an
apparently valid request

45. HTTP STATUS MESSAGES &
CODES
Cod
e
Message Meaning
200 OK Standard response for successful HTTP requests. The actual
response will depend on the request method used. In a GET
request, the response will contain an entity corresponding to the
requested resource. In a POST request, the response will contain
an entity describing or containing the result of the action.
301 Moved
Permanently
This and all future requests should be directed to the given URI.
401 Unauthorized Similar to 403 Forbidden, but specifically for use when
authentication is required and has failed or has not yet been
provided.
403 Forbidden The request was valid, but the server is refusing action. The user
might not have the necessary permissions for a resource or may
need an account of some sort.
404 Not found The requested resource could not be found but may be available in
the future. Subsequent requests by the client are permissible.
500 Internal Server
Error
A generic error message, given when an unexpected condition was
encountered, and no more specific message is suitable.
503 Service The server is currently unavailable (because it is overloaded or
… and many more!

46. HTTPS
• Hypertext Transfer Protocol Secure
• Used for secure communication over a
computer network, and is widely used on the
Internet
• The communication protocol is encrypted
using Transport Layer Security (TLS)
• Signals the browser to use an added
encryption layer of SSL/TLS to protect the
traffic

47. FILE TRANSFER PROTOCOLS
• FTP
• File Transfer Protocol is a standard network protocol
used for the transfer of computer files between a client
and server on a computer network
• WebDAV
• Web Distributed Authoring and Versioning (WebDAV) is
an extension of the Hypertext Transfer Protocol (HTTP)
that allows clients to perform remote Web content
authoring operations
• The WebDAV protocol provides a framework for users
to create, change and move documents on a server.

48. E-MAIL PROTOCOLS
• POP3
• Post Office Protocol (POP version 3) is an application-layer
Internet standard protocol used by e-mail clients to retrieve
e-mail from a mail server.
• IMAP
• Internet Message Access Protocol (IMAP) is an Internet
standard protocol used by email clients to retrieve email
messages from a mail server over a TCP/IP connection
• SMTP
• Simple Mail Transfer Protocol (SMTP) is an Internet standard
for email transmission

49. IP ADDRESSES
• Internet Protocol addresses
• Numerical labels assigned to each device on a
network
• IPv4 (32-bit): 0.0.0.0 – 255.255.255.255
• IPv6 (128-bit): 0:0:0:0:0:0:0:0 -
ffff:ffff:ffff:ffff:ffff:ffff:ffff:ffff
• 172.16.254.1IPv4 = 2001:db8:0:1234:0:567:8:1IPv6
• Used for identification and addressing
• Private or public
• Can be assigned dynamically or statically

50. PRIVATE IP ADDRESSES
Name Address range Number of
addresses
24-bit block 10.0.0.0 – 10.255.255.255 16.777.216
20-bit block 172.16.0.0 –
172.31.255.255
1.048.576
16-bit block 192.168.0.0 –
192.168.255.255
65.536
127.0.0.0 – loopback (localhost) address
• Used primarily in local networks
• Usually allocated by a local DHCP1 server
(router)
1 Dynamic Host Configuration Protocol

51. LOCALHOST

52. DOMAIN NAME SYSTEM (DNS)
• A hierarchical and decentralized naming
system for computers, services, or other
resources connected to the Internet or a
private network
• Associates various information with domain
names assigned to each of the participating
entities
• It translates more readily memorized domain
names to the numerical IP addresses needed
for locating and identifying computer services

53. DNS SERVER
• Recommended configuration: primary &
secondary
• Automatically provided by your ISP
• Can be also configured manually
Provider DNS Server Addresses
Google 8.8.8.8 / 8.8.8.44
CloudFlare 1.1.1.1 / 1.0.0.1
Quad9 9.9.9.9 / 149.112.112.112
OpenDNS 208.67.222.222 /
208.67.220.220
+ many more

54. INTERNET SERVICE PROVIDERS
(ISP)
• An organization that provides services for
accessing, using, or participating in the
Internet
• May be organized in various forms, such as
commercial, community-owned, non-profit, or
otherwise privately owned
• Provide infrastructure, logistics, equipment
and support
• Discussion: net neutrality1
1 https://en.wikipedia.org/wiki/Net_neutrality

55. THE INTERNET
ISP #1
ISP #2
Servers
3
Home network
Office network
School network
Nodes

56. NODES
• Computer systems (desktops, laptops)
• Portable devices (tables, phones)
• Embedded devices (GPS, smartwatch, etc.)
• Internet of Things – IoT devices (smart TV, smart
fridge, etc.)
• Servers (print server, file server – NAS, web
servers, etc.)
• Other network equipment (routers)

57. THE INTERNET
ISP #1
ISP #2
Servers
3
Home network
Office network
School network
Communication
media

58. COMMUNICATION MEDIA
• Wired (Ethernet)
• UTP1 or S/FTP2 cable (patch cord, patch cable, Ethernet
cable)
1 Unshielded Twisted Pair
2 (Foil) Shielded Twisted Pair
RS45
connector
(plastic/met
al)
Ethernet
cable/ patch
cable/
patch cord

59. COMMUNICATION MEDIA
• Wired (Ethernet)
• UTP1 or S/FTP2 cable (patch cord, patch cable, Ethernet
cable)
1 Unshielded Twisted Pair
2 (Foil) Shielded Twisted Pair
Name Typical
construction
Data rate
Cat 5 UTP 1 Gigabit/s (not
recommended)
Cat 5e UTP, STP 1 Gigabit/s
Cat 6 UTP, S/FTP 10 Gigabit/s
Cat 7 S/FTP 10 Gigabit/s
Cat 8 S/FTP 40 Gigabit/s

60. COMMUNICATION MEDIA
• Wired (Ethernet)
• UTP1 or S/FTP2 cable (patch cord, patch cable, Ethernet
cable)
• Fiber optic cable (up to Tb/s data rates)

61. COMMUNICATION MEDIA
• Wireless
• WiFi: IEEE 802.11 standard
Protocol Release
year
Frequency Data rate
802.11a Sep. 1999 5 GHz 6, 9, 12, 18, 24, 36,
48, 54 Mbit/s
802.11b Sep. 1999 2.4 GHz 1, 2, 5.5, 11 Mbit/s
802.11g Jun. 2003 2.4 GHz 6, 9, 12, 18, 24, 36,
48, 54 Mbit/s
802.11n Oct. 2009 2.4/5 GHz Up to 288.8 Mbit/s
802.11a
c
Dec. 2013 5 GHz Up to 3466.8 Mbit/s
802.11a Dec. 2019 2.4/5/6 Up to 10530 Mbit/s
Data rate is in
megabits/s not
megabytes/s!

62. COMMUNICATION SPEED
• Communication speed (data transfer rate) is
measured for both directions:
• Download – the speed at which you are able to get
data from the network
• Upload – the speed at which you are able to send
data to the network
• There are several online sites which can
measure your internet speed:
• fast.com
• speedtest.net

63. COMMUNICATION SPEED
• Provided the speed measurements below,
calculate how fast would you be able to send
someone 5 GB of data (assuming they use the
same Internet connection as you)
Upload: 100
Mbps
Download: 79
Mbps

64. COMMUNICATION SPEED
100 Mbps = 100 Mbps / 8 (bits) = 12.5 MB/s
79 Mbps = 79 Mbps / 8 (bits) = 9.875 MB/s
5 GB = 5 x 1024 MB = 5120 MB
Upload time
5 GB / 79 Mbps = 5120 MB / 9.875 MB/s = 518
s
Download time
5 GB / 100 Mbps = 5120 MB / 12.5 MB/s = 410
+
928 s
(15.5

65. LOCAL NETWORKING
EQUIPMENT
ISP
F/O cable from
ISP
UTP cable
UTP cable
Router
F/O decoder
(Modem)
Wi-Fi range
extender

66. F/O DECODER
• Codes/Decodes signal (light) from fiber-optic
cable to standard digital (electrical) signals
transmissible over cable or Wi-Fi
• Often (incorrectly) referred to as a modem
• Most can also act as a local wired and/or
wireless router
UPC Connect Box

67. ROUTER
• Used to create a private local network (wired and
wireless)
• As a DHCP server it will allocate private IP
addresses to local devices
• It will communicate with the ISP directly or the F/O
decoder
• It is an optional part of the network
• Only needed to share a single connection between
multiple devices
• To transform a wired network to a wireless one

68. ROUTER
• Needs to be configured to create a local
network
• DHCP server – allocate private IP addresses to local
equipment
• Starting address, number of maximum simultaneous
connections
• Wi-Fi – broadcast parameters
• Protocol: ensure compatibility with all local devices
• Frequency: 2.4 GHz/5 GHz
• SSID1, authentication method and password
• WEP2 – weak, not recommended
1 Service Set ID (your Wi-Fi’s “name”)
2 Wired Equivalent Privacy
3 Wi-Fi Protected Access

69. ROUTER
• Needs to be configured to connect to the ISP
• DHCP – ISP dynamically allocate the IP to the router
(will change over time – expires, router reboots)
• Static IP – ISP allocated a single IP to the router (does
not change over time)
• PPPoE1 – ISP will allocate a user and password to
connect
• PPTP2, L2TP3 – rarely used
1 Point-to-Point Protocol over Ethernet 3 Layer 2 Tunneling Protocol
2 Point-to-Point Tunneling Protocol
Linksys WRT32X

70. RANGE EXTENDER
• Range extender (Wi-Fi to Wi-Fi) or Access
point (LAN to Wi-Fi) – optional
• Used to extend the coverage of an existing
LAN of Wi-Fi network – signal repeater (used in
large areas)
MySSI
D

71. RANGE EXTENDER
• Range extender (Wi-Fi to Wi-Fi) or Access
point (LAN to Wi-Fi) – optional
• Used to extend the coverage of an existing
LAN of Wi-Fi network – signal repeater (used in
large areas)
MySSI
D
Wi-Fi range
extender
MySSID_e
xt

72. RANGE EXTENDER
• Range extender (Wi-Fi to Wi-Fi) or Access
point (LAN to Wi-Fi) – optional
• Used to extend the coverage of an existing
LAN of Wi-Fi network – signal repeater (used in
large areas)
TP-Link RE650

73. SWITCH/HUB/PATCH PANEL
• A computer networking device that connects
devices on a computer network by using
packet switching to receive, process, and
forward data to the destination device
• Used to split a single incoming connection
amongst multiple devices or to connect
multiple devices amongst each other
• It does not operate as a DHCP server
Avaya ERS 2550T-PWR, a 50-port Ethernet

74. FOR THE LOVE OF GOD…

75. AND FINALLY… THIS!

76. COURSES
Available online at:
http://www.ael.utcluj.ro/
Information for Students -> Courses -> Web
Technologies

77. DOAR PENTRU SECȚIA EA
ROMÂNĂ
• Consilier de studii
• ș.l. dr. ing. Rajmond JÁNÓ
• Rajmond.Jano@ael.utcluj.ro
• Str. George Barițiu, nr. 26 – 28, sala E05 (oricând)
• Contractul disciplinelor
• Când e disponibil
• Șef de an?