Download - Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1
![Page 1: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/1.jpg)
Dynamic Web Authoring
Mark Beattie
Huiru ( Jane ) Zheng
19/04/23 COM311, H ZHENG, C&M, UUJ 1
![Page 2: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/2.jpg)
Teaching Plan
Module contents Teaching format Assessments Suggested reading Introduction and Revision
19/04/23 COM311, H ZHENG, C&M, UUJ 2
![Page 3: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/3.jpg)
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
![Page 4: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/4.jpg)
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
![Page 5: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/5.jpg)
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
![Page 6: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/6.jpg)
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
![Page 7: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/7.jpg)
Example of learning log
19/04/23 COM311, H ZHENG, C&M, UUJ 7
![Page 8: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/8.jpg)
Example of learning log
19/04/23 COM311, H ZHENG, C&M, UUJ 8
![Page 9: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/9.jpg)
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
![Page 10: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/10.jpg)
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
![Page 11: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/11.jpg)
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
![Page 12: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/12.jpg)
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
![Page 13: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/13.jpg)
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
![Page 14: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/14.jpg)
Dynamic Web Authoring
Overview of World Wide Web
19/04/23 COM311, H ZHENG, C&M, UUJ 14
![Page 15: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/15.jpg)
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
![Page 16: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/16.jpg)
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
![Page 17: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/17.jpg)
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
![Page 18: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/18.jpg)
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
![Page 19: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/19.jpg)
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
![Page 20: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/20.jpg)
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
![Page 21: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/21.jpg)
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
![Page 22: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/22.jpg)
Dynamic Web Authoring
HTML Revision
19/04/23 COM311, H ZHENG, C&M, UUJ 22
![Page 23: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/23.jpg)
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
![Page 24: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/24.jpg)
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>
![Page 25: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/25.jpg)
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>
![Page 26: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/26.jpg)
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>
![Page 27: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/27.jpg)
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
![Page 28: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/28.jpg)
Advanced HTML
XHTML DHTML (Dynamic HTML) HTML5
19/04/23 COM311, H ZHENG, C&M, UUJ 28
![Page 29: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/29.jpg)
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
![Page 30: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/30.jpg)
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
![Page 31: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/31.jpg)
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
![Page 32: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/32.jpg)
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
![Page 33: Dynamic Web Authoring Mark Beattie Huiru ( Jane ) Zheng 30/08/2015COM311, H ZHENG, C&M, UUJ1](https://reader035.vdocuments.mx/reader035/viewer/2022062421/56649e015503460f94aeb263/html5/thumbnails/33.jpg)
Week 1 Practical
Available on Blackboard
19/04/23 COM311, H ZHENG, C&M, UUJ 33