Lecturer: Dr Joel Scanlan Mr Lu Rongdong

Unit Introduction Objectives Unit Structure Assessments Teaching Staff Background Concepts Terminology Technology

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 3

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 4

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

Week 1 Introduction and Basic Concepts Week 2 Introduction to HTML Week 3Continued HTML and Introduce the DOM Week 4Website Design and Introduce CSSTutorial Test Week 5CSS with the DOM Week 6JavaScriptTutorial Test Week 7DOM Events with JavaScriptAssignment 1 Week 8HTML FormsTutorial Test Week 9Form Validation with JavaScript Week 10Site Management and AccessibilityTutorial Test Week 11Web Security and Cookies Week 12Ethics on the Web and the FutureAssignment 2 Week 13Exam Revision

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 7

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

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 9

10 Of Staff Of Students

 Unit coordinator  Lecturers Hobart Launceston  Tutors  Consultation Lec

What is the Web? What is Web Management? Terminology and Technology needed for Web Management

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?

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 to view on our computer

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?

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

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

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

The Web is structurally comprised of computers referred to as Clients and Servers Server Clients

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)

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

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

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

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

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

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.

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

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)

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 ECMAScript 262) to handle events dynamically on the client-side

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

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

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… 32 Lec1-3

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

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!

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

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)

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

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!