IS1811 Multimedia Development for Internet Applications Lecture 3: Introduction to basic Web and Internet Technologies

1
IS1811 Multimedia Development for Internet
ApplicationsLecture 3 Introduction to basic Web
and Internet Technologies

• Rob Gleasure
• R.Gleasure_at_ucc.ie
• http//girtab.ucc.ie/rgleasure/index.html

2
IS1811

• Todays class
• TCP/IP and OSI models
• Http and file transfer protocols
• Common browsers
• Internet demographics
• Introduction to HTML

3
TCP/IP

• Transmission Control Protocol / Internet Protocol
  (TCP/IP) is the communication protocol for the
  Internet.
• Your browser uses TCP/IP to access Internet
  servers, and servers use TCP/IP to send HTML back
  to your browser.
• An Internet address or IP address
  "193.120.116.180" is a part of the standard
  TCP/IP protocol, as is the domain name
  www.website.com
• The IP part encompasses the connectionless
  packet-switching discussed in lecture 2

4
OSI Model

• Open Systems Interconnection (OSI) Basic
  Reference Model
• Developed by International Organisation for
  Standardization (ISO) in 1984 to provide a
  reference model for the complex aspects related
  to network communication

5
OSI and TCP/IP Models
6
OSI and TCP/IP Models

• Both models divide the different functions and
  services provided by network hardware and
  software into discrete and separate layers.
• The benefits of this?
• Modular engineering (may be built in chunks)
• More simple to teach and learn network
  technologies
• Easier to isolate problems
• Allows vendors to focus on just the layer(s) in
  which their hardware or software is implemented
  and be able to create products that are
  compatible, standardized and interoperable.

7
Universal Resource Locators (URL)

• URLs
• Used to identify resources on the Internet
• Are also called Uniform Resource Locators
• Have the following general format
• network-protocolresource-location/file
• Networking protocols can be
• http, ftp, gopher, telnet, file, mailto, news
• Resource location
• //domain_name/directory/file
• E.g. http//www.site.ie/en/index.html

8
HTTP

• Hypertext Transfer Protocol (HTTP)
• Designed within the application layer of the
  TCP/IP architecture to distribute hypertext
  documents
• Works on the client-server principle and is the
  foundation of data communication on the Web
• Files are sent with accompanying meta-data
  headers describing details such as the content
  type, last modified date, etc
• Composed of standards supported by W3C
• Currently, version 1.1 is most commonly used

9
HTTP (continued)

• Hypertext Transfer Protocol (HTTP)
• HTTP has 2 important features
• As well as basic web files such as html
  documents, a server can also return other
  miscellaneous data from applications running on a
  server to a client, e.g. database records
• It can also pass data sent from a client to
  various server-side CGI programs for additional
  processing via the HTTP URL

10
FTP

• File Transfer Protocol (FTP)
• Used to copy a file from one machine to another
• Also works within the application layer of the
  TCP/IP architecture and also client-server based
• Unlike HTTP, FTP transfers include no meta-data
• Uses two connections one to establish
  communication/exchange commands and one to stream
  data
• ? Less secure
• ? Tends to be blocked by firewalls

11
Other Protocols

• Telnet
• Allows you to use the resources of a distant
  computer somewhere else in the world
• ? often used to share the power of a large
  single machine amongst many remote users using
  less advanced terminals
• Mailto
• Allows emails to be send directly from an email
  interface within the browser, e.g.
  mailtoperson_at_mail.com

12
Common File Types

• Types of webpage
• .html
• .xhtml
• .mhtml
• .xml
• Often academic sites or sites where large volumes
  of information is managed and shared.
• .asp/aspx
• Created using Microsoft Visual Studio
• Often used for elaborate or high-processing
  sites, or those where large amounts of user input
  is received.
• .php
• Similar suitability as .aspx

13
Common File Types

• Types of image
• .gif
• Graphics Interchange Format
• Traditionally the Darling of the web
• Largely used for icons or simple images.
• Lessening of importance as bandwidth increases in
  Internet users. Still very common though.

14
Common File Types

• Types of image
• .jpeg
• Joint Photographic Experts Group
• Still the most common format used for photographs
  
• Same format as digital cameras use
• Issues with lossy compression

15
Common File Types

• Types of image
• .png
• Portable Network Graphic
• Put forward by w3c as an alternative format
• Lossless compression
• Variable quality/file-size
• Gaining popularity all the time

16
What browsers are out there?

• The Web consortium generally consider Internet
  Explorer (IE), Firefox, Chrome, Opera and Safari
  to the main families of browsers
• Statistics from http//www.w3schools.com/browsers/
  browsers_stats.asp

IE Firefox Chrome Safari Opera
July 2014 8.5 24.9 59.8 3.5 1.7
July 2012 16.3 33.7 42.9 3.9 2.1
July 2010 30.4 46.4 16.7 3.4 2.3
July 2008 52.8 41.0 - 2.5 1.9
17
What Are Mobile Applications?

• Mobile applications are applications and/or
  services that are used on a mobile device
• Mobile applications can be developed to be
• Mobile Web (viewed on browsers within mobile
  devices)
• Native (Installed as programs on mobile devices)

18
Growth of Mobile Applications
19
Mobile Applications Internationally
20
Internet UsageTaken from http//www.internetworld
stats.com/stats.htm
21
Internet UsageTaken from http//www.internetworld
stats.com/stats.htm
22
Internet UsageTaken from http//www.internetworld
stats.com/stats.htm
23
Hypertext Markup Language (HTML)

• What is HTML?
• HTML stands for Hyper Text Markup Language
• An HTML file is a text file containing simple
  markup tags
• These tags tell the Web browser how to display
  the page
• An HTML file must have an .htm or .html file
  extension
• An HTML file can be created using a simple text
  editor
• Well be using Notepad or Notepad

24
HTML (continued)

• How does HTML work?
• The basic principle is to wrap everything in
  tags.
• These tags are organised in a concentric manner.

25
A simple web page

• Open up either Internet Explorer or Firefox
  (double-click on either
• OR on your desktop)
• Open up Notepad
• ? go to start menu ? all programs ? accessories ?
  notepad
• Save the file to the desktop with the name
  hello.html
• Make sure you save it as All Files.

26
A simple web page

• Type or copy-and-paste in the following
• lthtmlgt
• ltheadgt
• lttitlegtHellolt/titlegt
• lt/headgt
• ltbodygt This is my first homepage.
• ltbgtHello World!lt/bgt
• lt/bodygt
• lt/htmlgt
• Click on save in the file menu

27
A simple web page

• In Firefox
• ? file ? open file and navigate to desktop ?
  select your page
• Or else in Internet Explorer
• ? file ? open file ? browse and navigate to
  desktop ? select your page

28
A simple web page

• You should see something like this

29
IS1811

• Next week
• Working with HTML

30
Want to read more?

• Links and references
• http//www.w3schools.com/
• http//www.internetworldstats.com/stats.htm
• http//www.isoc.org/internet/stats/
• http//www.internettrafficreport.com/
• http//www.w3schools.com/tcpip/default.asp
• http//www.yale.edu/pclt/COMM/TCPIP.HTM
• http//cybernetnews.com/