Dynamic and interactive web pages

Dynamic and interactive web pages

Learning Outcomes:

• Understand the difference between server-side and client-side technologies.
• Describe the characteristics of client-side scripting.
• Create interactive menus upon user selection.
• Students should be able to create interactive user selection, such as the 2-level interdependent select list, pull down menu and click-to-expand menu.
• Validate and manipulate input data.
• Students should be able to check text data, numeric data, required input, length of input, manipulate radio buttons and check boxes and valid values for all input data. They should also be able to perform simple computations to create quizzes and simple mathematics games.
• Retrieve and save client information.
• For example, the use of Cookies for collection of user information.

Server-side scripting

• Server-side scripting is essentially programs that run on the server. In the context of dynamic web pages, the server receives data from the client and process the data with the programs on the server.
• Example of server-side scripting: PHP
• Example of its use: 
• Validate the password provided by client
• Counter (number of visitors - use server-side scripting or external service provider)
• Features (compared with client-side scripting):
• codes hidden from client (program security)
• increase loading to server (potentially slower server response)

Client-side scripting

• Client-side scripting means the client runs the scripts provided by the server. The browser is responsible for running the scripts.
• Example of client-side scripting: JavaScript
• Example of its use: check whether the inputted data is number
• Features (compared with server-side scripting):
• Codes is visble to client
• Reduced loading to server (the loading is shifted to client)

Further reading:

https://www.ionos.com/digitalguide/websites/web-development/server-side-and-client-side-scripting-the-differences/

Interactive menus – JavaScript required

• 2-level interdependent select list as an example.
• When the first list is selected, the corresponding second list will be shown. The data in the corresponding second list could already by stored in the html document or retrieved from the server, as stated in the html document. This could potentially reduce server loading as only partial list is downloaded from the server.

Retrieve and save client information - cookies

• Cookies is a text file stored on the computer when you visit some websites.
• Examples of its uses:
• Identify users
• Personalize the web site with your preference
• Shopping cart function – save your selected item so that you can pay for all the items once you completed your shopping, or to pay it next time.

Further reading:

https://www.allaboutcookies.org/cookies/

https://www.scientificamerican.com/page/use-of-cookies/

Presenting information on the Internet

Presenting information on the Internet

Learning Outcomes:

• Outline and discuss the various factors to be considered in the construction of web pages.
• By demonstrating some web sites, students should discuss successful design factors such as the web site structure, audience awareness, content purpose, site map, use of the workspace available on each page, arrangement of elements on screen, appropriateness of embedded graphics/sound/animations, use of frames and meaningful contextual links, grouping related information into tables/lists, providing channels for feedback, providing details in downloadable files, and structuring contents for easy printing.
• Students should also discuss the hardware constraint and platform compatibility factors such as computer processing power, bandwidth limitation, browser and plug-in compatibility, viewing environment, and language and colour compatibility.
• They should analyse and judge the use of the right resolution and file format for images and photos in order to keep download time low.
• Know that there are guidelines to cater for web accessibility by people with special needs.
• For example, providing an additional text only version, and including brief descriptions and text links in existing websites to make the web pages more accessible to the visually impaired.

Construction of web pages

Successful design factors

Content related:

• audience awareness
• content purpose
• web site structure
• site map
• Advantages of site map:
• Help developer to understand the web site structure
• Help user to navigate
• Help search engine to index the web site
• grouping related information into tables/lists
• providing details in downloadable files
• structuring contents for easy printing
• Create printable version using CSS
• Avoid page break for certain contents

Layout related:

• use of the workspace available on each page
• arrangement of elements on screen
• appropriateness of embedded graphics/sound/animations
• use of frames and meaningful contextual links  
• Advantages of frames (Disadvantages without frames):
• Some contents remain visible all the time e.g. navigation menu
• Advantages without frames (Disadvantages of frames):
• Suitable for small screen size
• printer friendly
• more easy to be indexed

Providing channels for feedback

Hardware constraint and platform compatibility factors

Hardware constraint:

• computer processing power
• bandwidth limitation

Platform compatibility:

• browser and plug-in compatibility
• viewing environment
• Mobile platform characteristics:
• Smaller screen display
• Limited data transfer rate
• For mobile platform:     
• Simplify layout
• Reduce file size: compress audio, reduce image resolution, remove unnecessary multimedia elements
• Build text only version
• Make font adjustable        
• language and colour compatibility.

Use of the right resolution and file format for images and photos in order to keep download time low.

Further reading:

https://feedbackguru.com/articles/design-principles-for-web/

https://theblog.adobe.com/a-comprehensive-guide-to-web-design/

Web Accessibility

• Websites are designed in the way that people with disabilities can use them.
• Different types of disabilities require different web designs to facilitate web accessibility

Examples of disabilities	Solutions
Visual impairment	Screen reader software Refreshable Braille display
Hearing impairment	Text-only version Transcript of videos/audios Videos with sign language
Upper limb disability	Allow sufficient time for filling in interactive forms

Further reading:

https://www.ogcio.gov.hk/en/our_work/community/web_mobileapp_accessibility/promulgating_resources/handbook/

https://www.web-accessibility.hk/en/

https://www.w3.org/WAI/fundamentals/accessibility-intro/#:~:text=Web%20accessibility%20means%20that%20websites,contribute%20to%20the%20Web

HTML 4

Hypertext Markup Language (HTML) 4

Learning Outcomes:

Elective C. b. Web Site Development

• Create and manipulate browser windows.
• Students should be able to create pop-up windows, manipulate window location, and window size, and allow scrollbars to appear when necessary. They should also be able to embed messages in browser window’s status bar such as displaying the current date, time, URL and its description.
• Perform special effects.
• Students should be able to create special effects such as scrolling messages, rotating image banners, mouse over effect, blinking text and changing colours.
• Publish web site.
• Students should know the basics of getting a domain name and web hosting. They should also be able to transfer web pages onto web sites on the Internet.

Scrolling messages <marquee>

The <marquee> tag is removed in HTML5. Using CSS to create scrolling message is recommended.

Old method:

<marquee direction=”right’> your scrolling message </marquee>

Blinking text <blink>

The <blink> tag is removed in HTML5. Using CSS to create blinking effect is recommended.

Old method:

<blink> your blinking text </blink>

These functions require JavaScript

• Create pop-up windows
• Manipulate window location, window size
• Allow scrollbars to appear
• Embed messages in browser window’s status bar
• Rotating image banners
• Mouse over effect
• Changing colours

Considerations in publishing a web site

• Web hosting – server containing the web site
• Having your own server
• Server of a web hosting service provider (free or commercial)
• Advantages of using their service: low starting cost, additional services e.g. back up, hardware maintenance
• Having a domain name – so that people can link to your web site
• Obtain one from domain name registrar
• Use the subdomain of the web hosting service provider
• Uploading the web site to the server
• Web browsers
• FTP program – upload multiple files at the same time
• Tools provided by web hosting service provider

               

Reference:

https://websitesetup.org/register-domain-name/

HTML3

Hypertext Markup Language (HTML) 3

Learning Outcomes:

Elective C. b. Web Site Development

• Construct simple web pages.
• Students should be able to use different features (e.g. links, anchors, lists, tables, frames, Mailto and Fill-out Forms) in constructing the web page. They should also be able to embed multimedia elements in the web page and apply a consistent look and style across a set of web pages.

Lists <ol> <ul> <li>

Ordered list:

<ol>

<li>first item</li>

<li>second item</li>

</ol>

• Attribute: type (e.g. 1, a), start (starting number), reversed (reverse the order)

Unordered list:

<ul>

<li>first item</li>

<li>second item</li>

</ul>

Fill-out forms <form> <input> <textarea> <select> <option>

<form>

Single line text input <input type=”text” name=”…”>

Checkbox <input type=”checkbox” value=”…”>

Radio button <input type=”radio” name=”…” value=”…”>

Multi-line text input <textarea name=”…” cols=”40” rows=”2”></textarea>

List

<select name=”…” size=”3” multiple>

                <option value=”first”> first value </option>

                <option value=”second”> second value </option>

                <option value=”third”> third value </option>

</select>

Drop down list/menu (no multiple attribute used)

<select name=”…”>

                <option value=”first”> first value </option>

                <option value=”second”> second value </option>

</select>

Submit button <input type=”submit” value=”Submit”>

Reset button <input type=”reset” value=”reset”>

Advantage of using reset button: reduce time for reloading

</form>

Mailto

There are numerous ways to submit the inputted data in the form.

One of these is to send the data via email.

<form action=”mailto:abc@abc.com” method=”post” enctype=”text/plain”>

• The use of mailto will launch the user’s email client.
• method=”get”: the data will be incorporated into the end of a URL. Good for simple form and data security is not a concern.
• method=”post”: the data included in the HTTP request body.
• enctype=”text/plain”: organize the data in a more readable format.

Cascading Style Sheets (CSS)

3 ways to use CSS.

Inline: use style attribute in <body> section – apply to certain part or sentence

                <p style=”color:red;”> Hello World! </p>

Internal: use <style> within <head> section – apply to whole web page

                <head>

                <style>

                p

                {

    color: red;

    }

    </style>

                </head>

External: use <link> to link to external CSS file (.css)  – apply to multiple web pages of the website

Advantages of using CSS: 

• consistency in web pages design/formatting
• reusable (.css)
• easy maintenance
• follow current standards