KXO205 Dynamic Web Development Week 1

1. KXO205 Dynamic Web DevelopmentWeek 1 Lecturer: Dr Joel Scanlan Mr Lu Rongdong

2. In this lecture: • Unit Introduction • Objectives • Unit Structure • Assessments • Teaching Staff • Background Concepts • Terminology • Technology

3. Unit objectives • Overall goal of the unit is • Be able to design and create a well designed assessable website • Specific Learning outcomes are listed on the Unit Outline • These are what are assessed in the units assessments Lec 1-1

4. Unit Structure • Lectures • 2 hours of lectures a week • Tutorials • 1 hour a week • Self Study Activities • Outside of formal class times • Consultation time • TBA Lec 1-1

5. Unit Structure Lectures introduce concepts Self studies step you through the concepts at your own pace Tutorials apply the concepts further, building on the self studies Practical tests examine whether your understand the concepts and are keeping up Assignments examine whether you can combine these concepts into a more meaningful and useful complete website

6. Unit Structure

7. Out of Class Activities • Should take about 6 hours / week • What? • Self Study Activities • Consolidate concepts/ideas discussed in lectures • Become proficient in applying these concepts • How? • Read notes from lectures - backup with • Reading from text, other suggested readings • Lecture recordings (if necessary) • Work on tutorial exercises • Balance time in and out of lab Lec 1-1

8. Assessment - tasks • In- semester (40%) • Tutorials • Practical Tests (10%) • Assignments – Write a website • Part 1 (10%) • Part 2 (20%) • Exam (60%) Lec 1-1

9. Assessment - Requirements • To pass the unit need • 45% or more on in-semester • 45% or more on exam • 50% or more overall • NOTE: • Deadlines are deadlines - School of CIS policies on extensions are very strict. • Supplementary assessment is not automatic • School policies about recommending • Faculty policies about awarding • NO supplementary assessment on in-semester work (Faculty rule). Lec 1-1

10. Expectations Lec 1-1 Of Staff Of Students

11. Teaching Staff • Unit coordinator • Lecturers • Hobart • Launceston • Tutors • Consultation Lec 1-1

12. Background Concepts What is the Web? What is Web Management? Terminology and Technology needed for Web Management

13. What is the Web? • We all know what the Web is from a user point of view. • Its where we get information • Its where we interact with people we know • Its where we can buy things • But what is it really? And does that impact on how we need to think about from a management point of view?

14. What is the Web? • The World Wide Web is: • A vast distributed network for delivering content • The network is made up of millions of computers that communicate between one another using formalised protocols • These computers deliver content to us in the form of a web page or an email to view on our computer

15. What is Web Management? • The Web is made up of countless sites. What makes one better than another? • What makes one nice to look at and another ugly? • How do we communicate our message effectively? • What is our websites message or purpose? • And how can we benchmark its effectiveness? • What makes one secure to use and another not? • What ethical issues relate to website content? • What helps users with disabilities able to use a website?

16. What is Web Management? • In this unit, before we look at security, ethical and accessibility issues we are going to look at how to make a website • Web Management is about content presentation. • How do we present content? How do we maintain it? • How do we make a website? • In Week 10 we will look at specific management tools, but before this we will look at how to actually make a website

17. What is Web Management? • Creating a website is a technical and artistic thing • In this unit we will be dealing largely with the technical portions, but we will touch on the artistic from time to time also • Effective Web Management is often about combining these two halves into a effective whole • A website that is artistic, but doesn’t work is useless • A website that works, but is ugly, is also often just as useless

18. Terminology and Technology The World Wide Web (WWW) is a vast distributed network for delivering content It was invented in 1989 by Tim Berners-Lee at CERN The goal of the web is to share information between geographically isolated locations

19. Terminology and Technology Server Clients The Web is structurally comprised of computers referred to as Clients and Servers

20. Terminology and Technology • A Client uses a Web browser to request content in the form of a Web page from a Web Server • This request is sent by a protocol called Hyper Text Transfer Protocol (HTTP) • We won’t be going into depth on this protocol in this course • The Web server responds to this request by sending the Client the Web page which is written in HyperText Markup Language (HTML)

21. HTML • HyperText Markup Language (HTML) is what all webpages are written in • It is this programming language which we will learn how to use within this course • In HTML textual and multimedia content is able to be rendered in a web browser for a user to view • HTML documents also contain links to other documents, which together form a Web of connections

22. The Internet • The Internet is the network of connected computers that allow for data to be transferred between them • The Internet is used by many protocols to transfer specific kinds of data • Email via the Simple Mail Transfer Protocol (SMTP) • Web pages written in HTML via HTTP • File Transfer via File Transfer Protocol (FTP) • Many more protocols • As such the WWW and the Internet are two different things • The WWW is built on top of the Internet

23. HTML • The HTML file which the server has sent to the client when requested is displayed in the web browser • This HTML file or document is a single file that contains references to other files of various types. These include: • Images to be displayed in the document • Cascading Style Sheets (CSS) used in formatting the website appearance • Links to other web pages or files to be accessed

24. HTML and Client-Side Scripting When a client’s browser receives a HTML document it renders the document with the images and formatting that are detailed inside the HTML All of this rendering and loading of additional content such as images is handled on the client side by the web browser In this unit all of the websites we develop will be static HTML pages with only client-side scripting content

25. Server Side Scripting • A large portion of websites which you access generate the HTML file at the point of your request, personalising it for each client • The server may include information in the page for the client which is retrieved from a database • This process is referred to as server-side scripting • We will not be doing any server side scripting in this course • KXT209 is a second year unit which is dedicated to server-side scripting

26. Web Technologies • A web “Technology” is a term that generally refers to a set of rules or tools that can be used to implement an aspect of a web application • Two groups of technologies used in this course are • Markup – Based around XML • Special characters are added to content to provide information about the material • Scripting • Programming languages that allow for a web site to by dynamic, responding to user input.

27. Markup Languages • <font size=4>Example!</font> • Markup Language Terms • Tags – Label a given item of information in which they enclose. Come in pairs that “bookend” the item. • Open • Close • Within Tags • Attributes – Further information about this label. Each attribute has a set of possible values An example of a tag from HTML that we will learn to use relates to the font of some text. Its open and close tags

28. Markup Languages • SGML - Standardised General Markup Language • International Standard, large and complicated • HTML • based of SGML used on web (several versions) – various non-standard additions made over time • XML • eXtensible Markup Lanaguage - simplified form of SGML • XHTML • current recommended web language (form of HTML that follows XML rules)

29. Scripting Languages Scripting languages allow for websites to by Dynamic, and react to a user’s interaction with the page In this unit we will use JavaScript (also referred to as ECMAScript262) to handle events dynamically on the client-side

30. Web Technologies • A websites appearance is largely the result of the HTML that produced it • A pages structure, layout and content such as headings images, bullet points are positioned in HTML • Although XHTML is generally what is used these days

31. Web Technologies Another web technology which has a big impact on website appearance is Cascade Style Sheets (CSS) A style sheet is basically a list of rules about how each component of content in a page will appear, without having the content present in the style sheet (unlike the HTML which can have both) Style sheets make it easier to change a pages appearance. We will learn about them from week 5

32. What Software to Use? • There are two options for kinds of authoring tools • Text Editors • Installed in the school labs: • Suggested Portable that runs from USB: • Syntax highlighting is very useful • Web Authoring Tools • Installed in the School Labs: Dreamweaver • Will generate some code for you… Lec1-3

33. What Software to Use? • In this course you will learn XHTML and the basics of CSS and JavaScript • In the exam you will be expected to be able to write some of all 3 of these languages • If you use an authoring tool that generates code for you it will make the exam a lot harder as it will make you lazy • It is quite easy to pass this course internally by being lazy using authoring tools and then fail the exam

34. What Software to Use? • If you are intending on enrolling in KXT209 later in your degree, I strongly further suggest you avoid authoring tools • Server Side Scripting requires you to know HTML well, and it is assumed knowledge in the course. Authoring tools won’t help you in that course as you are writing code to generate the HTML automagically!

35. Summary • Unit Outline • Course Overview • Self Studies and Tutorials • Assessment • Web Management • Starts with making a page. Designing it with thought given to the technical and artistic areas. But also continues as you maintain it and produce new content

36. Summary • The Web is about Server -> Client relationship • The server sends the client’s browser HTML documents that represent the web page • The HTML is rendered on the client side • This unit is focused on client side web programming, as such the files on the server are static (un-changing)

37. Summary • HTML is a markup language filled with tags which describe the information which they contain, which is used to format the document on the screen • Web pages, made of HTML, also make use of • Images • CSS • JavaScript

38. Self Studies and Tutorials There is a self study this week, which you should have completed before next weeks tutorial Don’t forget to sign up for a tutorial this week!