Mark Beattie Huiru （Jane） Zheng Dynamic Web Authoring Mark Beattie Huiru （Jane） Zheng 20/04/2017 COM311, H ZHENG, C&M, UUJ

Teaching Plan Module contents Teaching format Assessments Suggested reading Introduction and Revision 20/04/2017 COM311, H ZHENG, C&M, UUJ

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 COM427J2, 2009 20/04/2017 COM311, H ZHENG, C&M, UUJ

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) 20/04/2017 COM311, H ZHENG, C&M, UUJ

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: 3 20/04/2017 COM311, H ZHENG, C&M, UUJ

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 20/04/2017 COM311, H ZHENG, C&M, UUJ

Example of learning log 20/04/2017 COM311, H ZHENG, C&M, UUJ

Example of learning log 20/04/2017 COM311, H ZHENG, C&M, UUJ

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) 20/04/2017 COM311, H ZHENG, C&M, UUJ

Textbook and references Reading list Terry Felke – Morris, Web development & design foundations with XHTML, 4th Ed. The Web Wizard’s Guide to JavaScript http://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, Wiley 20/04/2017 COM311, H ZHENG, C&M, UUJ

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 20/04/2017 COM311, H ZHENG, C&M, UUJ 11

Information and contact room: 16E05 email: h.zheng@ulster.ac.uk Email may NOT be replied at night or weekend! 20/04/2017 COM311, H ZHENG, C&M, UUJ

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) 20/04/2017 COM311, H ZHENG, C&M, UUJ

Overview of World Wide Web Dynamic Web Authoring Overview of World Wide Web 20/04/2017 COM311, H ZHENG, C&M, UUJ

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. The Web is a network of computers all over the world. All the computers in the Web can communicate with each other. 20/04/2017 COM311, H ZHENG, C&M, UUJ

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 COM311, H ZHENG, C&M, UUJ 20/04/2017

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) 20/04/2017 COM311, H ZHENG, C&M, UUJ

How does the browser fetch the pages? Your PC (Internet Connected) Web Server (Internet Connected) Web Browser URL: www.myserver.com/ funstuff.html Find Web server at www.myserver.com Web server Receives request Sends file with Funstuff.html The file Funstuff.html Web Browser Here are some fun things to do: Play baseball Go swimming eg: school server, public_html 20/04/2017 COM311, H ZHENG, C&M, UUJ

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>. 20/04/2017 COM311, H ZHENG, C&M, UUJ

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 Current W3C HTML standard is HTML 4.01 20/04/2017 COM311, H ZHENG, C&M, UUJ

Web Programmer’s toolbox XML JavaScript, Java, Perl, and PHP Client side and server side (X)HTML and XML, CSS JavaScript, Java Perl, PHP … 20/04/2017 COM311, H ZHENG, C&M, UUJ

Dynamic Web Authoring HTML Revision 20/04/2017 COM311, H ZHENG, C&M, UUJ

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 20/04/2017 COM311, H ZHENG, C&M, UUJ

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> the html element contains everything the browser needs to know about the Web page The head element contains information that is not displayed in the browser’s web page display Text and graphics inside the body element are displayed in the browser’s web page display Text inside the title element appears in the browser window’s title bar. 20/04/2017 COM311, H ZHENG, C&M, UUJ

An HTML Example: <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> 20/04/2017 COM311, H ZHENG, C&M, UUJ

An HTML5 example <!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> 20/04/2017 COM311, H ZHENG, C&M, UUJ

Basic HTML HTML basic tags Formatting Entities Links Frames Tables Lists Forms Images Background Checkbox, Radio button Button …. 20/04/2017 COM311, H ZHENG, C&M, UUJ

Advanced HTML XHTML DHTML (Dynamic HTML) HTML5 20/04/2017 COM311, H ZHENG, C&M, UUJ

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… 20/04/2017 COM311, H ZHENG, C&M, UUJ

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 20/04/2017 COM311, H ZHENG, C&M, UUJ

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 20/04/2017 COM311, H ZHENG, C&M, UUJ

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 20/04/2017 COM311, H ZHENG, C&M, UUJ

Week 1 Practical Available on Blackboard 20/04/2017 COM311, H ZHENG, C&M, UUJ