GCIT315A: Produce An Interactive Website To Meet User Requirements (Part 1)

GCIT315A :
PRODUCE AN INTERACTIVE
WEBSITE TO MEET USER
REQUIREMENTS (PART 1)
ITE3001 IT Essentials - Services

ITE3001 IT Essentials - Services Hidden slide for instructors’ reference
TEACHING SEQUENCE (OPTIONAL)

1. Demonstrate knowledge and skills in planning an interactive website
2. Produce an interactive website according to the user requirements
3. Manipulate audio in enhancing web pages effectively
4. Manipulate video in enhancing web pages effectively
5. Manipulate animation and graphics in enhancing web pages effectively
6. Test and maintain the website
GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 2

MODULE INTENDED LEARNING

OUTCOME
On completion of the module, students are expected to be
able to:
 (#4) Produce an interactive website to meet user
requirements

1. Demonstrate knowledge and skills

in planning an interactive website
4
GCIT315A : Produce an interactive website to meet user requirements ©VTC2012
OVERVIEW
1. Purpose of the website
 Website planning
 Web Pages Vs Web Applications
2. Method to produce an interactive website

 website management/editing tool
 WYSIWYG
3. Produce sitemap draft

Website planning
An ongoing activity!
 Audience  Purpose
 What the website will
 Audience Characteristics
accomplish ?
 Information Preferences
 What the users will get
 Computer Specifications
from it?
 Web Experience
Content

SAMPLE HTML CODE

WEBSITE MANAGEMENT/EDITING
TOOLS
 WYSIWYG editors
 What You See Is What You Get
 Like using Microsoft Word to produce web page!
 Most popular tools nowadays
 But
 different browsers may render the same page differently
 Browsers allow users more control on page appearance
 Dreamweaver may be the most popular editor, but it is not

free
 Many free WYSIWYG editors available, but may have less
features
 http://webdesign.about.com/od/freewebeditors/Free_Web_Editors.htm

SITEMAP
 A visual document in any form used as a planning tool
 lists the pages on a web site
 organized in hierarchical fashion
Site map of Wikipedia Site map of Google

SITEMAP
 Some common sitemap in web sites

2. Produce an interactive website

according to the user requirements
11
WHAT IS HTML?
 HTML stands for Hyper Text Markup Language
 Markup language??
 Uses markup tags to describe web pages
 Web browser uses the tags to interpret the content of the
page and display them as web pages
 HTML tags??
 Keywords surrounded by angle brackets like <html>
 Normally come in pairs like <body> and </body>

HTML TAGS
 Here shows a auto-generated, simplest HTML file
 (it is of XMTML standard, if you are interested in what
XHTML standards is, please visit
http://www.w3schools.com/xhtml/default.asp)

HTML TAGS
 Keywords surrounded by angle brackets like <html>
 Normally come in pairs like <body> and </body>
 Web browser uses the tags to interpret the content of the

page and display them as web pages

HTML TAGS
 Everything is inside <html> tag
 <head> tag
 define the style, programmes and other heading information
 <body> tag
 define the main content

HTML HEADINGS
<html>
<head>
This is heading 1
<title>Untitled</title>
</head>
<body>
This is heading 2
<h1>This is heading 1</h1>
<h2>This is heading 2</h2> This is heading 3
This is heading 4
This is heading 5
</body>
</html>
This is heading 6
HTML PARAGRAPHS
<html> This is a paragraph.
<head>
</head> This is a paragraph.
<body>
<p>This is paragraph 1.</p> This is a paragraph.
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
</body>
</html>

HTML LINKS
This is a link
<html>
<head>
 Content inside <a> would
<title>Untitled</title> be displayed
</head>  “href ” attribute define the
<body>
<a href="http://www.gov.hk "> URL linked
This is a link
 attribute names must be
</a>
</body> in lower case
</html>
 attribute values must
be quoted
HTML IMAGES
 <img /> is a kind of empty elements

 “src” attribute define the relative path of the image
 “width” & “height” attribute define the demension
 “alt” attribute provides alternative information, in case user
cannot view the image.
<html>
<head>
</head>
<body>
<img src="brandhk.gif"
width="270" height="80"
alt=“HONG KONG BRAND”/>
</body>
</html>

HTML LINE BREAK
 Breaking a line inside HTML code does not help

 <br /> should be used to go to the next line
<html>
<head> line 1 line2
</head>
<body> line 3
<p> line 1 line 4
line 2</p>
<p> line 3 <br/>

line 4<p>
</body>
</html>

HTML TABLES
 <table> defines a table

 <tr> defines a table row
 <td> defines a table data cells
<html>
<head../head>
<body>
<table border="1">
<tr>
<td>row 1, cell 1</td> row 1, cell 1 row 1, cell 2
<td>row 1, cell 2</td> row 2, cell 1 row 2, cell 2
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
</html>

HTML UNORDERED LISTS
 Unordered list starts <ul>

 Each list item starts with the <li>
 List items are marked with bullets
<html>
<head../head>
<body>
 Presentation
<ul>
<li>Presentation</li>  Spreadsheet
<li>Spreadsheet</li>
</ul>
</body>
</html>

HTML ORDERED LISTS
 Ordered list starts <ol>

 Each list item starts with the <li>
 List items are marked with numbers
<html>
<head../head>
<body>
1. Presentation
<ol>
<li>Presentation</li> 2. Spreadsheet
<li>Spreadsheet</li>
</ol>
</body>
</html>

BACKGROUND MUSICS
 “src” defines the path of the <html>

music file <head../head>
<body>
 “loop” defines whether the music
repeat itself after being played <embed
src="Fairy's%20Tale.mid"
once loop="false"
autostart="true“
 “height” and “width” defines the height="10pxs"
dimension of the player width="100pxs“>
</embed>
 “autostart” defines whether
</body>
the music start when the page </html>
is loaded
3. Manipulate audio in enhancing

web pages effectively
25
25
CODEC FOR AUDIOS

 Codec = Coding +Decoding
 A codec is a device or computer program capable of
encoding or decoding a digital data stream or signal
 Types of audio file formats :
 Uncompressed audio formats (e.g. .wav on Windows)
 encode both sound and silence with the same number of bits per unit
of time
 Lossless compressed audio formats (e.g. ALAC)
 the music would occupy a smaller portion of the file and the silence
would take up almost no space at all.
 Lossy compressed audio formats
 to remove the data that has least effect on perceived quality
 Example audio file formats : .mp3, .midi, .ogg
SOUND CARD
 A sound card functions by controlling the output of
sound as well as the processing of digital sound and the
input of sound from external sources.
 Sound cards translate digital data into analog sounds by
one of the following methods :
1. FM Synthesis mimics different musical instruments
according to built-in formulas.
2. Wavetable Synthesis relies on recordings of actual
instruments to produce sound. Wavetable synthesis
produces more accurate sound, but is also more expensive.

CONTROL SOUND QUALITY

 Resolution or Bit Depth
 bit depth describes the number of
bits of information recorded for each sample
 Channels
 the number of audio outputs, which may correspond to a speaker
configuration such as 2.0 (stereo), 2.1 (stereo and sub woofer),
5.1 (surround)
 Sampling Rate
 defines the number of samples per
unit of time (usually seconds) taken
from a continuous signal to make a discrete signal.
 Bit rate = sampling rate × bit depth × number of channels

SELECT AUDIO FILES

 Royalty free sound clips/bites
 http://www.freesound.org/ (register to download files)
 http://soundbible.com/

PRODUCE DIGITIZED AUDIO FILES

1. Get a computer microphone
2. Plug the microphone into the jack of
your computer
3. Start the Sound Recorder application in
Microsoft Windows
 In Windows XP, click Start, point to All
Programs, point to Accessories, point to
Entertainment, and then click Sound
Recorder; for Windows 7 watch demo
4. Position your mouth about 3 or 4 inches
away from the receiver of your
microphone
5. Click the [Record] (big red button)
button on Sound Recorder, and talk

USING ONLINE EDITORS

Free Online
Editors:
E.g.
 aviary.com
 Easy to use
 Many
exceptional
features!!
 Video demo
here

EDITING WITH AVIARY AUDIO EDITOR

 Start Google Chrome web browser
 Go to Google Web Store :
 https://chrome.google.com/webstore/category/home
 Search web app "aviary audio editor"
 Click [LAUNCH APP] or

[SIGN IN TO ADD] (you must have a Google account ready)

SUPPORTED FUNCTIONS
 Trim
 Stretch
 Loop
 Fade-ins / Fade-outs
 Pan from left to right
 Pitch Change
 Import audio files
 Export to your computer or internet account

LEARN TO EDIT AUDIO DATA

 Watch the demo videos at Youtube
 Myna Demo (time 4:36)
 Aviary's Myna Tutorial

(Creating a Podcast with Ease) (time 13:30)

CONVERT AUDIO FILE FORMATS

 Go to Google Web Store :
 https://chrome.google.com/webstore/category/home
 Search web app "Audio Converter"
 Click [LAUNCH APP] or

[SIGN IN TO ADD] (you must have a Google account ready)

USING AUDIO CONVERTER

4. Manipulate video in enhancing

web pages effectively
37
37
DEVICE TO CAPTUER VIDEO
 Digital video recorder (DVR)
 Webcam
 Smart phones (e.g. iPhone, Android phones)
 Tablet PCs with built-in camera (e.g. iPad, Galaxy Tab)

CALCULATE THE SIZE OF A VIDEO FILE

 Digital video comprises a series of digital images (called
frames) displayed in rapid succession at a constant rate.
 An example video can have a duration (T) of 1 hour
(3600sec), a frame size of 640x480 (WxH) at a color
depth of 24bits and a frame rate of 25fps.
 This example video has the following properties:
 pixels per frame = 640 * 480 = 307,200
 bits per frame = 307,200 * 24 = 7,372,800 = 7.37Mbits
 bit rate (BR) = 7.37 * 25 = 184.25Mbits/sec
 video size (VS) = 184Mbits/sec * 3600sec = 662,400Mbits =
82,800Mbytes = 82.8Gbytes

SOME COMMON VIDEO ENCODING

FORMATS
 MPEG-4 good for online distribution of large videos
and video recorded to flash memory
 MPEG-2 used for DVDs, and many broadcast television
formats
 MPEG-1 used for video CDs
 H.264 also known as AVC, used for Blu-ray Discs and

some broadcast television formats

TOOLS FOR VIDEO EDITING

 Windows Movie Maker (click here for XP Windows )
 Import and edit slide shows and videos
 Edit the soundtrack and add a theme
 Share your movie online

TOOLS FOR VIDEO EDITING

 WeVideo for Google Drive
 Available in Google Web Store

SUPPORTED FUNCTIONS IN WEVIDEO

 Trimming
 Transition effects (e.g. fade in/out)
 Add text
 Add sound track / narrative

LEARN TO EDIT VIDEO WITH WEVIDEO

 WeVideo for Google Drive (time 2:58)
 WeVideo Tutorial: Basic Editing (** time 4:42)
 WeVideo Editing Overview (time 1:22)
 WeVideo Tutorial: Exporting (time 2:15)
 WeVideo Help Page

 http://www.wevideo.com/support

ONLINE VIDEOS
 Streaming
 A multimedia delivery method
 User start to view/listen to the media before finish
downloading
 Video hosting services

 refersto websites or software where users can distribute their
video clips, e.g.
 www.youtube.com (now acquired by Google)
 www.tudou.com ( 土豆网 )
 www.youku.com ( 优酷 - 中国第一视频网站 )
 and many others……

HOW TO CREATE A YOUTUBE ACCOUNT

AND UPLOAD A VIDEO
 Watch the Youtube demo video :
 http://www.youtube.com/watch?v=wLDjiFSCSVE
 Youtube Help Page :

 http://support.google.com/youtube/?hl=en
5. Manipulate animation and

graphics in enhancing web pages
effectively
47
47
WEB SITE ICON IN BROWSERS

 A favicon (short for favorite icon), also known as Web
site icon, is a file containing a small icon, associated
with a particular Web site
 Nowadays web pages have their own icons
 In favourite links
 In tab pages
 Put file "favicon.ico" in the web site's root directory

(same location as file index.html)

MICROSOFT OFFICE PICTURE

MANAGER
 Nowadays web pages have their own icons
 In favourite links
 In tab pages
 Use Microsoft Office Picture Manager:

IMAGE EDITING TOOL

 Aviary for Google Drive
1. Edit any photo in Google Drive with Aviary's powerful yet simple
photo editor!
2. Just right click on any photo in your Google Drive and select Open
With > Aviary for Google Drive.
3. When you're done, just click save and your photo will be updated in
Google Drive!
4. Google Drive also saves previous versions of your photos, so you
can always revert or compare your newest version with the original
photo. Just right click and select Manage Revisions.


IMAGE EDITING TOOL

 Aviary Image Editor

LEARN TO USE AVIARY IMAGE EDITOR

 Fix your photo in one click with auto enhance
 Apply a variety of gorgeous photo effects
 Lots of fun and useful stickers
 Orientation: flip and rotate
 Resize and crop
 Adjust brightness, contrast, saturation, and sharpness
 Draw and add text
 Fix redeye, whiten teeth, and erase blemishes

LEARN TO USE AVIARY IMAGE EDITOR

 (time 2:58)
 67 tutorials with detail step-by-step instructions
 http://advanced.aviary.com/tutorials?tool=phoenix
&sort=difficulty&showing=all

FREE ANIMATION TOOLS

 Sketch Star
 http://www.miniclip.com/sketch-star/en/create/
Demo

6. Test and maintain the website
56
WEB HOSTING
 Finally you have to put all the files of your web site to a
public server
 Many possible ways:
 Setup your own server
 Web hosting company
 Free web hosting space!
 There are many different space with different offer
 Factors to consider:
 Storage size
 Bandwidth
 Max file size
 Advertisement

FREE WEB HOSTING

 We have chosen www.host1free.com as an example
Choose free
web hosting

FREE WEB HOSTING

 Your web host is now ready!
 Confirmation email
received!
 Important notes:
1. Domain name:
 The public address of your web site
 The URL that your should tell your
friends!!
2. Server Control Panel:
 The place your are going to spend a
bit of time to upload all your files
 Like a file manager

SERVER CONTROL PANEL

 When arrive at the Server
Control Panel, enter your
username and password
 You are in!

SERVER CONTROL PANEL

 To upload your files:
1. Choose “Files” or “File manager”
2. Here you have your web site file

manager!

GCIT315A: Produce An Interactive Website To Meet User Requirements (Part 1)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

GCIT315A: Produce An Interactive Website To Meet User Requirements (Part 1)

Uploaded by

Copyright:

Available Formats

GCIT315A :

ITE3001 IT Essentials - Services

TEACHING SEQUENCE (OPTIONAL)

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 2

MODULE INTENDED LEARNING

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 3

1. Demonstrate knowledge and skills

2. Method to produce an interactive website

3. Produce sitemap draft

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 5

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 6

SAMPLE HTML CODE

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 7

 Dreamweaver may be the most popular editor, but it is not

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 8

 organized in hierarchical fashion

Site map of Wikipedia Site map of Google

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 9

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 10

2. Produce an interactive website

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 12

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 13

 Web browser uses the tags to interpret the content of the

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 14

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 15

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 17

 <img /> is a kind of empty elements

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 19

HTML LINE BREAK

 Breaking a line inside HTML code does not help

<p> line 3 <br/>

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 20

 <table> defines a table

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 21

HTML UNORDERED LISTS

 Unordered list starts <ul>

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 22

HTML ORDERED LISTS

 Ordered list starts <ol>

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 23

 “src” defines the path of the <html>

3. Manipulate audio in enhancing

CODEC FOR AUDIOS

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 27

CONTROL SOUND QUALITY

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 28

SELECT AUDIO FILES

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 29

PRODUCE DIGITIZED AUDIO FILES

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 30

USING ONLINE EDITORS

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 31

EDITING WITH AVIARY AUDIO EDITOR

 Search web app "aviary audio editor"

 Click [LAUNCH APP] or

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 32

 Pan from left to right

 Import audio files

 Export to your computer or internet account

GCIT315A : Produce an interactive website to meet user requirements ©VTC2012 33

LEARN TO EDIT AUDIO DATA

 Myna Demo (time 4:36)

 Aviary's Myna Tutorial