Presentation is loading. Please wait.

Presentation is loading. Please wait.

Mark Beattie Huiru （Jane） Zheng

Published byMerryl Bond Modified over 8 years ago

Similar presentations

Presentation on theme: "Mark Beattie Huiru （Jane） Zheng"— Presentation transcript:

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

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

3 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

4 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

5 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

6 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

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

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

9 Blackboard System http://portal.ulster.ac.uk/
All material will be available there Communication – using blackboard message function, blog, wiki, discussion function submission (via blackboard) 20/04/2017 COM311, H ZHENG, C&M, UUJ

10 Textbook and references
Reading list Terry Felke – Morris, Web development & design foundations with XHTML, 4th Ed. The Web Wizard’s Guide to JavaScript JavaScript and Ajax for the Web: Visual QuickStart Guide (7th Edition) 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

11 Using on-line material
Access the web wizard’s web: World Wide Web Consortium. Website. Available from , Other online tutorials How to use online information? Understand Refine or correct Reference 20/04/2017 COM311, H ZHENG, C&M, UUJ 11

12 Information and contact
room: 16E05 may NOT be replied at night or weekend! 20/04/2017 COM311, H ZHENG, C&M, UUJ

13 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

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

15 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

16 How does the WWW work The Internet consists of many applications, not just the web: Telnet FTP News/blog/… Protocol: TCP/IP networks (Transmission Control Protocol/Internet Protocol) Web protocols are created by the World Wide Web Consortium (W3C) – COM311, H ZHENG, C&M, UUJ 20/04/2017

17 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

18 How does the browser fetch the pages?
Your PC (Internet Connected) Web Server (Internet Connected) Web Browser URL: funstuff.html Find Web server at 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

19 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

20 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. 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

21 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

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

23 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

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> 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

25 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

26 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

27 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

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

29 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

30 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

31 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

32 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

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

Download ppt "Mark Beattie Huiru （Jane） Zheng"

Similar presentations

Getting Familiar with Web Pages 1 2 The Internet Worldwide collection of interconnected computer networks that enables businesses, organizations, governments,

Getting Familiar with Web Pages 1 2 The Internet Worldwide collection of interconnected computer networks that enables businesses, organizations, governments,
TS 313 Multimedia Applications Welcome to TS 313 Multimedia Applications There is no audio lecture associated with this set of introduction slides Refer.

TS 313 Multimedia Applications Welcome to TS 313 Multimedia Applications There is no audio lecture associated with this set of introduction slides Refer.
INTRO TO THE WWW. What is the World Wide Web? The World Wide Web (WWW) is most often called the Web. The World Wide Web (WWW) is most often called the.

INTRO TO THE WWW. What is the World Wide Web? The World Wide Web (WWW) is most often called the Web. The World Wide Web (WWW) is most often called the.
Project 1 Introduction to HTML.

Project 1 Introduction to HTML.
Beginning Web Site Creation: Dreamweaver CS4.  WK1 & WK2  File Management  BlackBoard  SWS  Planning, Design, and HTML review  WK3 & WK4  Dreamweaver.

Beginning Web Site Creation: Dreamweaver CS4.  WK1 & WK2  File Management  BlackBoard  SWS  Planning, Design, and HTML review  WK3 & WK4  Dreamweaver.
HTML Computing Concepts HTML - An Introduction 1.

HTML Computing Concepts HTML - An Introduction 1.
CIS101 Introduction to Computing Week 05. Agenda Your questions Exam next week - Excel Introduction to the Internet & HTML Online HTML Resources Using.

CIS101 Introduction to Computing Week 05. Agenda Your questions Exam next week - Excel Introduction to the Internet & HTML Online HTML Resources Using.
CIS101 Introduction to Computing Week 05. Agenda Your questions CIS101 Survey Introduction to the Internet & HTML Online HTML Resources Using the HTML.

CIS101 Introduction to Computing Week 05. Agenda Your questions CIS101 Survey Introduction to the Internet & HTML Online HTML Resources Using the HTML.
DT211/3 Internet Development Application Internet Development Application.

DT211/3 Internet Development Application Internet Development Application.
Introduction to HTML 2006 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.

Introduction to HTML 2006 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.

Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
IST 221 Internet Concepts and Applications Internet, WWW and HTML 1.

IST 221 Internet Concepts and Applications Internet, WWW and HTML 1.
Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.

Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
1st Project Introduction to HTML.

1st Project Introduction to HTML.
5 th February Introduction Web Development Course.

5 th February Introduction Web Development Course.
Lecturer: Dr Joel Scanlan Mr Lu Rongdong. Unit Introduction Objectives Unit Structure Assessments Teaching Staff Background Concepts Terminology Technology.

Lecturer: Dr Joel Scanlan Mr Lu Rongdong. Unit Introduction Objectives Unit Structure Assessments Teaching Staff Background Concepts Terminology Technology.
Chapter 14 Introduction to HTML

Chapter 14 Introduction to HTML
CIS101 Introduction to Computing Week 06. Agenda Your questions Excel Exam during second hour Our status after the snow day Introduction to the Internet.

CIS101 Introduction to Computing Week 06. Agenda Your questions Excel Exam during second hour Our status after the snow day Introduction to the Internet.
ITM352 Javascript and Dynamic Web Pages: Client Side Processing.

ITM352 Javascript and Dynamic Web Pages: Client Side Processing.
HTML 1 Introduction to HTML. 2 Objectives Describe the Internet and its associated key terms Describe the World Wide Web and its associated key terms.

HTML 1 Introduction to HTML. 2 Objectives Describe the Internet and its associated key terms Describe the World Wide Web and its associated key terms.

Similar presentations

Ads by Google