Download - Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1
Dynamic Web Authoring
Mark Beattie
Huiru ( Jane ) Zheng
19/04/23 COM311, H ZHENG, C&M, UUJ 1
Teaching Plan
Module contents Teaching format Assessments Suggested reading Introduction and Revision
19/04/23 COM311, H ZHENG, C&M, UUJ 2
Module Contents
Client-side web design• Standard
• Browser object model
• (X)HTML, HTML(5), CSS
• Scripting language – Javascript, jQuery
• Dynamic web design
• Cookies and security
• Advance web design
19/04/23 COM311, H ZHENG, C&M, UUJ 3COM427J2, 2009
Teaching format
two semesters – long thin module Lecturing: theory and tutorial
• first semester: 1 hours
Practical: exercises and assignments• 2 hours
• Individual practical (semester 1&2)
• Group work (semester 2)
19/04/23 COM311, H ZHENG, C&M, UUJ 4
Assessment ( 1) 100% coursework
• Individual learning log, practicals, class test, engagements
• Individual contribution to the group work: Marks gained from group work (report and implementation) will be justified according to individual’s contribution.
• Group work: documentation report and website implemented
• Group allocation: self selected + allocated by lecturer, maximum size: 4, minimum size: 319/04/23 COM311, H ZHENG, C&M, UUJ 5
Assessment ( 2)
learning log requirements• summary of weekly learning activity ,
reflection of taught and independent of learning
• Links to weekly practical pages
• group activity (sem2) submission: via Blackboard (log in via IMD
website or Portal)
feedback: during class + blackboard
19/04/23 COM311, H ZHENG, C&M, UUJ 6
Example of learning log
19/04/23 COM311, H ZHENG, C&M, UUJ 7
Example of learning log
19/04/23 COM311, H ZHENG, C&M, UUJ 8
Blackboard System
http://portal.ulster.ac.uk/ https://learning.ulster.ac.uk/ https://scm.ulster.ac.uk/imd/ All material will be available there Communication – using blackboard
message function, email blog, wiki, discussion function submission (via blackboard)
19/04/23 COM311, H ZHENG, C&M, UUJ 9
Textbook and references Reading list
• Terry Felke – Morris, Web development & design foundations with XHTML, 4th Ed.
• The Web Wizard’s Guide to JavaScripthttp://wps.aw.com/aw_webwizard/
• JavaScript and Ajax for the Web: Visual QuickStart Guide (7th Edition)
http://www.javascriptworld.com/
• jQuery:Visual QuickStart Guide, Steven Holzner, Safari book
• Smashing jQuery, Jake Rutter, Wiley• Beginning JavaScript and CSS development with
jQuery, Richard York, Wiley19/04/23 COM311, H ZHENG, C&M, UUJ 10
1119/04/23 COM311, H ZHENG, C&M, UUJ 11
Using on-line material
Access the web wizard’s web: • http://wps.aw.com/aw_webwizard/
• http://www.javascriptworld.com World Wide Web Consortium. Website. Available from
www.w3.org/ , http://www.w3schools.com/ Other online tutorials How to use online information?
• Understand
• Refine or correct
• Reference
Information and contact
Contact:
room: 16E05email: [email protected]
Email may NOT be replied at night or weekend!
19/04/23 COM311, H ZHENG, C&M, UUJ 12
Attendance Monitoring General attendance obligations How attendance records for the module will be
assembled:• Lab • Lecture
Additional module-specific attendance may be required (e.g. attendance at specific seminars)
The resources available for informing the University of non-attendance or other related issues (NA1 and EC1 forms)
19/04/23 COM311, H ZHENG, C&M, UUJ 13
Dynamic Web Authoring
Overview of World Wide Web
19/04/23 COM311, H ZHENG, C&M, UUJ 14
What is the world wide web?
The World Wide Web (WWW) (the web) is a large collection of documents and files that are accessible via the Internet
Web information is stored in documents called Web pages.
A Web site is a collection of Web pages written by one Web page author or a team of Web page authors.
A Web master is someone who maintains a Web site.
19/04/23 COM311, H ZHENG, C&M, UUJ 15
How does the WWW work The Internet consists of many applications, not just the
web:• Email• Telnet • FTP• News/blog/…
Protocol: TCP/IP networks (Transmission Control Protocol/Internet Protocol)
Web protocols are created by the World Wide Web Consortium (W3C) – www.w3.org
19/04/23COM311, H ZHENG, C&M, UUJ Slide 16
Client, Sever and Browser
Computers reading the Web pages are called Web clients.
Web pages are files stored on computers called Web servers.
Web clients view the pages with a program called a Web browser.
The protocol that web browsers use to communicate with web servers is HTTP (Hypertext Transfer Protocol)
19/04/23 COM311, H ZHENG, C&M, UUJ 17
How does the browser fetch the pages?
19/04/23 COM311, H ZHENG, C&M, UUJ 18
Web Browser
URL:
www.myserver.com/
funstuff.html
Web Browser
Here are some fun things to do:
1.Play baseball
2.Go swimming
Web server
Receives request
Sends file with
Funstuff.html
Find Web server at www.myserver.com
The file
Funstuff.html
Your PC
(Internet Connected)
Web Server
(Internet Connected)
eg: school server, public_html
How does the browser display the pages?
All Web pages contain instructions for display
The browser displays the page by reading these instructions.
The most common display instructions are called HTML tags, created by HTML (Hypertext Markup Language).
HTML tags look like this: <p>This is a Paragraph</p>.
19/04/23 COM311, H ZHENG, C&M, UUJ 19
Who is making the Web standards? The rule-making body of the Web is the W3C.
• W3C stands for the World Wide Web Consortium. • W3C puts together specifications for Web standards.
• http://www.w3.org/ The most essential Web standards are HTML, CSS and
XML• HTML 5• CSS 3
XHTML – • Extensible HyperText Markup Language Current version• Successor of HTML, XML based• XHTML 1.0• XHTML 1.1• (X)HTML5
19/04/23 COM311, H ZHENG, C&M, UUJ 20
Web Programmer’s toolbox
XML JavaScript, Java, Perl, and PHP Client side and server side
• (X)HTML and XML, CSS
• JavaScript, Java
• Perl, PHP
• …
19/04/23 COM311, H ZHENG, C&M, UUJ 21
Dynamic Web Authoring
HTML Revision
19/04/23 COM311, H ZHENG, C&M, UUJ 22
What is an HTML File? HTML stands for Hyper Text Markup
Language An HTML file is a text file containing small
markup tags The markup 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
19/04/23 COM311, H ZHENG, C&M, UUJ 23
19/04/23 COM311, H ZHENG, C&M, UUJ 24
An HTML Tag Template<html><head>
<title> (insert text for the browser’s title bar here)</title>
</head><body>
(insert visible Web page elements here)
</body></html>
An HTML Example:
19/04/23 COM311, H ZHENG, C&M, UUJ 25
<html><head>
<title> Welcome to Web Programming </title></head><! - - this is a simple example - - ><body>
<h2> This is the first lecture </h2><p> We are going to revise the basic HTML and introduce the
advanced HTML. </p><hr> </hr>
</body></html>
An HTML5 example
19/04/23 COM311, H ZHENG, C&M, UUJ 26
<!DOCTYPE html><html>
<head><title> Welcome to Web Programming </title>
</head><! - - this is a simple example - - ><body>
<h2> This is the first lecture </h2><p> We are going to revise the basic HTML and
introduce the advanced HTML. </p><hr> </hr>
</body></html>
Basic HTML
HTML basic tags Formatting Entities Links Frames Tables
Lists Forms Images Background Checkbox, Radio
button Button ….
19/04/23 COM311, H ZHENG, C&M, UUJ 27
Advanced HTML
XHTML DHTML (Dynamic HTML) HTML5
19/04/23 COM311, H ZHENG, C&M, UUJ 28
DHTML – Dynamic HTML
It is not a special version of HTML It is a group of technologies used to create
interactive Web pages, including both client side and server side• Cascading stylesheets (CSS) +
• Web scripting e.g. JavaScript +
• DOM (document object model) +
• (X)HTML
• PHP, Perl, ASP.net…
19/04/23 COM311, H ZHENG, C&M, UUJ 29
DHTML Advantages support by all browsers open standards change content on the fly small size of the file no plug-ins requires easy to learn, fast development, faster web
experience No java programming required more interaction through Ajax
19/04/23 COM311, H ZHENG, C&M, UUJ 30
Editors Text editors:
• Microsoft: notepad, notepad++, Crimson Editor• Mac:
• TextWrangler• Smultron• Eclipse• TextEdit
Other tools such as dreamweaver – but not only coding editor is recommended for COM311
19/04/23 COM311, H ZHENG, C&M, UUJ 31
The Web Page Development Cycle
The Four-Step Development Cycle:
1. Save your HTML file
2. Load the file into your Web browser
3. Review the file with your Web browser
4. Revise your HTML file with a text editor
Repeat this cycle as often as needed
19/04/23 COM311, H ZHENG, C&M, UUJ 32
Week 1 Practical
Available on Blackboard
19/04/23 COM311, H ZHENG, C&M, UUJ 33