Internet Applications

CILO and Outline

Course Intended Learning Outcome (CILO)

 Describe major trends (WWW) in IT, and explain how they bring new
opportunities and challenges to our society.
Outline
 World Wide Web
- What is World Wide Web? How does it work?
- Search Engine
 Web 2.0
- What is Web 2.0? Examples?
- Typical Features, Web Applications
 Other Internet Activities
- Email, Instant Messaging
- Large File Transfer
- VoIP and Video Conferencing
 Web accessibility

Internet Activities Page 2

 The World Wide Web (WWW)

 The Internet and the

World Wide Web are
not one and the same

- The Internet is a
collection of
interconnected
computer networks,
linked by copper wires,
fibre-optic cables,
wireless connections

- The Web is a
collection of
interconnected Web
pages and other
resources, linked by
hyperlinks and URLs
Graphical Representation of a Small Portion of the World Wide Web

Internet Activities Page 3

World Wide Web

 Web Pages
- documents typically written in HTML
- include text, pictures, sounds, and videos

 Website
- a collection of Web Pages that is hosted on one or more web servers
- accessible via the Internet

 Home Page
- the main entry point for the website
- often contains links to other pages on the website

Internet Activities Page 4

What are the differences?
Browser
URL
Address of a Web Page

Website
Contains a number of
Web Pages

Links to other Web Pages

Home Page
The first page of a
Website

Internet Activities Page 5

HTML and Browsers

 HTML (HyperText Markup Language)

- the language used in writing web pages
- many tools for editing web pages
- e.g. Microsoft Word, Microsoft
FrontPage, Dreamweaver, …
- hypertext links connect one web page
to another

 Browsers
- a computer program used to view Web
pages
- e.g. Internet Explorer, Mozilla Firefox,
Google Chrome, Opera, Safari …

Internet Activities Page 6

Search Engines

 Organizations, like Google and Yahoo, that maintain databases

accessible through websites to help you find information on the Internet.

 Visual Search Technology that searches through the input of an image.

http://www.youtube.com/watch?v=6fD2t4d2Ln4

Internet Activities Page 7

Visual Search Technology

 Google Goggles

http://www.youtube.com/watch?v=Hhgfz0zPmH4&fmt=18

Internet Activities Page 8

Web 2.0

Internet Activities Page 9

Participation

 Web 1.0 - One-way published media

 Web 2.0 - Encourage users to
contribute website contents
 Blogs
- Compose web articles via browser.
- No file transfer techniques required.
- Blog in Big IT company
- e.g. Blogger.com, wordpress.com
 Photo Sharing
- Share and Host Photos and Images
- e.g. Blogger.com, wordpress.com
 Wikipedia
- About 22.3 millions users and 115,000
active editors
(Source: http://expandedramblings.com/index.php/wikipedia-
statistics/)

Internet Activities Page 10

Social Software

 Software which let you interact

with people around the world:

 Second Life
- It is an online 3-D virtual world
- It has 5 million regular users
Second Life Screen Capture
 Facebook
- It allows users to share photos and
have discussion with friends
- It has more than 901 million active
users

 Twitter
- Social Network for sharing short Facebook Inventor
messages Mark Zuckerberg

Internet Activities Page 11

Folksonomy

 From folk + taxonomy, is a user-

generated taxonomy
(e.g. http://www.flickr.com/photos/tags/)

 Also known as collaborative tagging

or social tagging
- Collaboratively creating and managing
tags to annotate and categorize content.

 In contrast to traditional subject

indexing, metadata is generated not
only by experts but also by creators
and consumers of the content.
- Usually, freely chosen keywords are
used instead of a controlled vocabulary.

Internet Activities Page 12

Web Applications

 Run software-applications
through a browser

 Google Docs
- Allow collaboration,
- share change in real time

 Multimedia
- PhotoShop Express
- FotoFlexer

Internet Activities Page 13

Other Internet
Applications

Internet Activities Page 14

Email

 Cc and Bcc?
- A copy of the mail is sent to all recipients
in the cc: and bcc: fields

 Cc: Carbon Copy

- All the recipients of the mail can see the
email addresses listed in To: and Cc:
field.
- Under some circumstances, recipients
may not want their email addresses to be
exposed to others

 Bcc: Blind Carbon Copy

- Recipients cannot see the email
addresses listed in the Bcc: field.

Internet Activities Page 15

Email

 Reply
- Reply to sender only

 Reply All
- Reply to sender, as well as all recipients listed in the To: and Cc: fields

 Maximum email size limit (Don’t attach a large file)

- Gmail – 25MB
- life.hkbu.edu.hk – 25MB
- Notice that only 75% of the size is effective. Ref: http://en.wikipedia.org/wiki/Base64

 Filtering in email servers

- EXE and Zip files may be removed.

Internet Activities Page 16

 Email

Suppose the sender of the above email is Joyce.

 Who will receive this email?
 Whose email address(es) will John see?
 Whose email address(es) will Mary see?
 Whose email address(es) will David see?
 If John use the “Reply all” function to reply the email, who will receive his email?
 If Mary use the “Reply” function to reply the email, who will receive her email?

Internet Activities Page 17

Instant Messaging

 Sender sends a message and

receiver has the message pop up
instantly on the screen

 e.g. MSN, QQ, GTalk, …

 Used in radio live phone-in show

 Next generation Apps

- Whatsapps

- Lines

Internet Activities Page 18

FTP (File Transfer Protocol)

 A pair of server and client

FTP server
software for transferring large
files between computers

 Password is usually required

 Security problems
- user names, passwords,
upload download
transferred files, … can be
"sniffed"
client
 More secure choice
- SFTP (Secure FTP)
client

Internet Activities Page 19

Peer to Peer File Sharing

 BitTorrent
- a file sharing communication protocol
- distributing large amounts of data widely
- each recipient supplies pieces of the data to newer recipients

A machine in a peer to peer

network can have multiple
connections to multiple peer
machines.

Much faster than a single

connection (ftp) in file
download

Internet Activities Page 20

VoIP (Voice over IP) and
VoLTE (Voice over LTE)

 In VoIP, phone calls are packetized and sent

through the Internet, instead of regular phone
lines.
- International calls become much cheaper (free)

 Viber
- Apps on Smart Phones for VoIP and more

Skype Phone
 VoLTE
- Use 4G data to transmit voice message
- Only on latest mobile phone
- E.g. Samsung Galaxy
- Also need mobile service provider (e.g. 3,
smartone, CSL) support

Internet Activities Page 21

Video Conferencing

Popular examples: Skype, Microsoft Messenger, iChat

http://www.powwownow.co.uk/Video-Conferencing
It is commonly used in business meeting, training and distant learning.

Internet Activities Page 22

 Synchronous and Asynchronous Tools

 Synchronous
- Communicate instantly and at the same point in time (telephone mode)
- Example of Synchronous Tools
- Videos Conferencing
- Chat
- VoIP, VoLTE Which tool(s) do you use to communicate with your
- Skype classmates in your group project?
- Whatsapp Phone
 Asynchronous
- Communicate at different time schedule of the communicators (mail mode)
- Example of Asynchronous Tools
- Web pages
- E-mail
- Blogs
- Whatsapp (surprise! Whatsapp is asynchronous if only sending messages)
- Are Twitter and Facebook Synchronous or Asynchronous?

Internet Activities Page 23

Web accessibility

 Everybody can find information from the Internet

- and live happily ever after!
- Or is it?
 What about people with disabilities?
 Disabilities fall into four major categories:

Internet Activities Page 24

Four Principles of Accessibility (POUR)

 Perceivable
- Information and user interface components must be presentable to
users in ways they can perceive.

 Operable
- User interface components and navigation must be operable.

 Understandable
- Information and the operation of user interface must be
understandable.

 Robust
- Content must be robust enough that it can be interpreted reliably by a
wide variety of user agents, including assistive technologies.
Internet Activities Page 25
Web accessibility Example

Small Font Sizes or Insufficient Colour Contrast

Affected Group: All Persons with Disabilities
Change
Font Size
Before

After Rectification

Internet Activities Page 26

Web accessibility Example

Time Allowed is Too Short

Affected Group: Persons with Restricted Movement

Before
After Rectification

Internet Activities Page 27

Web accessibility Example

Audio-only
Affected Group: Persons with Hearing Impairments

Before

After Rectification

Read the audio

captions instead of
listen

Internet Activities Page 28

Handbook from Hong Kong OGCIO

 Read the Handbook from

the Office of Government Chief Information Officer http
://www.ogcio.gov.hk/en/community/web_accessibility/handbook/

Internet Activities Page 29

Top 10 Concerns from Persons with Disabilities
(Optional)

1. Unable to Skip Adobe Flash and Moving Objects

2. Small Font Sizes or Insufficient Colour Contrast
3. No Alternatives for Non-text Information
4. Website Structure is Too Complicated to Understand and/or
Navigate Using Assistive Tools
5. Difficulties in Browsing Websites with Background Audio
6. Websites with Outdated Text Versions
7. For Time-limited Functions, the Time Allowed is Too Short
8. Volume Bars are Difficult to Control
9. Ambiguous Links for Screen Readers
10. Difficulties in Accessing Portable Document Format (PDF)

Internet Activities Page 30

Perceivable Guidelines (Optional)

1.1 Text Alternatives

- Provide text alternatives for any non-text content so that it can be changed into
other forms people need, such as large print, braille, speech, symbols or
simpler language.

1.2 Time-based Media

- Provide alternatives for time-based media. (Video Audio)

1.3 Adaptable
- Create content that can be presented in different ways (for example simpler
layout) without losing information or structure.

1.4 Distinguishable
- Make it easier for users to see and hear content including separating
foreground from background.

Internet Activities Page 31

Operable Guidelines (Optional)

2.1 Keyboard Accessible

- Make all functionality available from a keyboard.

2.2 Enough Time

- Provide users enough time to read and use content

2.3 Seizures
- Do not design content in a way that is known to cause seizures.

2.4 Navigable
- Provide ways to help users navigate, find content, and determine where they
are.

Internet Activities Page 32

Understandable/Robust Guideline (Optional)

3.1 Readable
- Make text content readable and understandable.

3.2 Predictable
- Make Webpages appear and operate in predictable ways.

3.3 Input Assistance

- Help users avoid and correct mistakes.

4.1 Compatible
- Maximize compatibility with current and future user agents, including assistive
technologies.

Internet Activities Page 33

What you have learnt?

 World Wide Web

- Web page, Homepage and Website
- HTML and Browsers
- Search Engines
 Web 2.0
- Wikipedia, Blogs, Photo Sharing
- Social Software – Facebook and Second Life
- Web Applications
 Other Internet Activities
- Email, Instant Messaging
- FTP, Peer to Peer File Transfer
- Packet, VoIP and Video Conferencing
 Web accessibility

Internet Activities Page 34

Credits

 Page 3:
- WordWideWeb: http://zh.wikipedia.org/wiki/File:WorldWideWebAroundWikipedia.png
 Page 4:
- HTML HEAD earrings: http://www.flickr.com/photos/taopaic/2180932252/
 Page 5:
- Amazon: http://www.amazon.com/
 Page 6:
- Internet Explorer: http://www.didasca.it/Use/Images/InternetExplorerLogo.png
- FireFox: http://hardgeek.org/wp-content/uploads/2010/07/firefox-logo-1024x969.jpg
- Chrome: http://cdn.pcm-web.nl/thumbnails/980/d90fc/chrome-logo-chrome_1.jpg
- Opera: http://cdn.pcm-web.nl/thumbnails/980/488b6/579815_0.jpg
 Page 9:
- Web2.0: http://upload.wikimedia.org/wikipedia/commons/a/a7/Web_2.0_Map.svg

Internet Activities
Credits

 Page 10:
- Flickr logo: http://schoolmediaclub.org/wp-content/uploads/2012/03/flickr-logo1.png
- Flickr screenshot: http://www.flickr.com/explore/interesting/7days/
- Yahoo GEOCITIES screenshot:
http://laughingsquid.com/wp-content/uploads/xkcd-geocities-20091026-085826.jpg
- Yahoo GEOCITIES logo: http://www.anexom.es/wp-content/uploads/2011/05/geocities.jpg
- Wikipedia Web2.0: http://en.wikipedia.org/wiki/Web_2.0
 Page 11:
- Facebook: http://www.flickr.com/photos/pixelfrenzy/2345376145/
- Second life: http://www.flickr.com/photos/funksoup/2436121339/in/photostream/
- Mark Elliot Zuckerberg: http://nbtimes.it/wp-content/uploads/cache/4161_thumbzoom.jpg?9d7bd4
- twitter: http://www.ofono.gr/content/data/multimedia/images/OTHER/twittervolgernl.jpg
 Page 12:
- Flickr photo tages: http://www.flickr.com/photos/jstar/259210989/
- Flickr most popular tags: http://www.flickr.com/photos/tags/
 Page 13:
- Google Docs: http://www.productivitybits.com/wp-content/uploads/2011/08/GoogleDocs.jpg
- PhotoShop Express: http://www.flickr.com/photos/youngblog/2367739873/

Internet Activities
Credits

 Page 15:
- iCloud mail: https://www.icloud.com/#mail
 Page 16:
- iCloud mail: https://www.icloud.com/#mail
- Zip file: http://allvilla.ru/wp-content/zip.png
- EXE file: http://cdn-img.easyicon.cn/png/116/11699.gif
 Page 18:
- QQ: http://static.imqq.com/publish/help/5.6.2.jpg
- MSN: http://screenshots.en.sftcdn.net/en/scrn/28000/28067/msn-messenger-2.jpg
- GTalk: http://mac.travel-lab.info/travellers/blog/C1152805016/E433983168/Media/Gtalk-Jabber.png
- Whatapps: http://www.whatsapp.com
- Lines: http://line.naver.jp/en/
 Page 19:
- FTP server: http://myarcade.me/ad_1GB.png
- UploadClient: http://www.santa-land.co.jp/images/img_rec_web.gif
- DownloadClient: http://ayudatec.files.wordpress.com/2011/07/256computadores.jpg
 Page 20:
- BitTorrent: http://www.tech.sc/wp-content/uploads/2010/03/BitTorrent.jpg

Internet Activities
Credits

 Page 21:
- Skype Phone: http://www.segye.com/photo/2006/11/22/0022.jpg
 Page 22:
- Cloud Computing: https://openclipart.org/image/2400px/svg_to_png/170263/Cloud-computing.png
 Page 24-33
- Web accessibility : http://www.ogcio.gov.hk/en/community/web_accessibility/handbook/
- Web Content Accessibility Guidelines (WCAG): http://www.w3.org/TR/2008/REC-WCAG20-20081211
/

Internet Activities