W EB S ITE D EVELOPMENT O VERVIEW

Web Site Development Module Overview Lectures – Lecture 1 Web Site Technology Foundation Developing a Web Site HTML Overview – Lecture 2 HTML Continued Cascading Style Sheets Labs – Lab 1 Basic tools for developing a web site Creating a Home Page using HTML – Lab 2 More practice with HTML Extending your web site using Cascading Style Sheets – Semester Project Assignment and Kickoff Lab

Web Site Development Building and maintaining a web site utilizes the same basic disciplines as developing and maintaining applications programs – Requirements – Defining and gaining agreement on the problem being solved – Design – Deciding on the approach to solving the problem – Development – Building the solution – Testing – Ensuring the solution works under varied conditions – Implementing/Publishing – Making the solution available to the users Web sites utilize a series of innovations for: – Formatting and presentation of documents (web pages) – Navigating within and between documents

Hypertext Text that includes links – no single sequential path through or between text documents Long history that could go back as far as the Talmud Vannar Bush – Described a system for linking microfilm machines – System was called Memex 1965 Ted Nelson working at SRI – Coined the terms hypertext and hypermedia First hypermedia use was a tour of Aspen 1983 – Hypermedia development tool available on an Apple II 1987 – Apple release Hypercards for the Macintosh

Links Can Be Followed Ad Hoc

Markup Languages A Programming Language is compromised of a set of rules that direct the actions of a computer A Markup Language is a programming language designed for formatting of “documents” where a document can be any stored file, not just text The formatting is defined in the document as a series of tags 1960s – IBM – Standardized General Markup Language (SGML) – Formatting of documents to be printed – Many of the earliest tags still in use in Markup Languages today

There Are a Number of Markup Languages SGML – Standard General Markup Language – Text document formatting had no hyperlinks XML – Extensible Markup Language – Language that describes document format and context – Commonly used for inter-program, document exchange – Used in business between companies (or within) for Electronic Data Interchange (EDI). E.g. to send an invoice to another company’s computer I would encode it in XML. HTML – Hypertext Markup Language – One of the original languages used to format web pages XHTML – Extensible Hypertext Markup Language – Strict interpretation of Hypertext rules – All open tags must be closed and tags must be properly nested Cascading Style Sheets – Allows the separation of formatting from the actual page contents – Uses many HTML concepts, and eclipsing HTML

Hypertext Markup Language (HTML) The Combination of Hypertext and Markup Languages Origination credited to physicist Tim Berners-Lee – Working at CERN (European Organization for Nuclear Research) – Looking for method for scientists to share information between networked computers – First used in December 1990 Using document elements (tags) to link (jump to) related documents within or between computers

Browser A program that is able to interpret and act on the contents of documents encoded with HTML or other language with a similar intent 1992 University of Kansas – Lynx browser – Used for student campus information – text only 1993 University of Illinois – First browser to support both text and graphics information – Mosaic browser whose co-author was Marc Andreesen 1995 Netscape IPO – Founding members were Jim Clark and Marc Andreesen – Primary products the Netscape browser and web server (based on Mosaic) 1995 Internet Explorer 1.0 – Initial browser from Microsoft who licensed the software from Spyglass 1996 Internet Explorer 3.0 – Equivalent Netscape functionality bundled with Windows 95

HTML HTML is made up of instructions embedded in a document that inform a browser how to treat a document The instructions are expressed as tags and attributes which further define the tag instruction HTML tags are: – Delimited by greater and less than symbols e.g. indicates the text that follows is to be bolded – And should generally bounded by open and close tags e.g. This text will be in bold – In a few cases there are multiple tags for the same function, e.g., and do the same thing. Attributes further qualify tags that require information This tag indicates that an image is to included where src=“name” indicates the location of the image (e.g. file path)

HTML Basic tag language rules – Whitespace (blanks, new lines) insensitive Hello there is treated the same as He llo the re – Attribute values can be enclosed in single or double quotes (i.e. ‘ or “) – Not all tags require attributes – Not all attributes require quotes – Not all tags require open and close (but generally a a good habit) This is the first paragraph This is the second Will probably be treated the same – Beware: HTML does not do checking for errors – it interprets what it can and ignores the rest. You will need to be the error checker for yourself.

Cascading Style Sheets - CSS A Style Language that like HTML, describes the look and formatting of documents – the most common of which are web pages Provides the same types of formatting capabilities as HTML CSS: – Allows for better separation of document content and formatting information – Can be stored separately from the document’s contents – Can specify different formatting information for different presentation modes (e.g. viewing versus printing) these features: – Allow content developers to focus on content – Facilitate sharing of formatting instructions across documents

Javascript First introduced by Netscape browser Version 2.0 Code which runs within the client’s browser (on your Mac/PC) Relatively easy to learn and use Support by “all” browsers Allows additional interactive features to users via browsers, e.g. – Forms controls such as field validation – Allowing mouse-rollover to change an object – Popping a new window and controlling the size of the window Disadvantages – Users can disable – Common carrier for malware

Planning for a Web Site What Do You Think Makes a Good Web Site?

Planning for a Web Site Some considerations: Be clear on the audience, purpose and requirements Plan your sites look and feel – Be consistent – Be clear – Use of fonts, color, graphics, sounds and video Set and test page loading speed for acceptability Plan the structure and hierarchy of your pages – Within a page – Between pages Plan your navigation – Within a page – Between pages – Between your site and other sites Create a mockup and check with users

Process for Developing a Web Site Complete the planning Create the web pages using an editor or other tool – There are many editors that assist in creating web pages (free and fee) – We will use the Notepad Accessory which is part of Windows – it doesn’t provide any assistance Test the web pages locally Publish the web pages by uploading the pages to the web server – There are many tools available to facilitate the management and uploading of web pages – called content management systems Commercial web sites: – First publish to test web sites – Ensure that all pages work well on all browsers they intend to support – Test page load times across a variety of user internet connections for acceptability – Tune and retest as needed – Push to the public-facing web sites

A Basic Approach toWriting Code - Programming Document the problem you want to solve Sketch out your ideas – Basic flow – Web page or report layouts Write the code with your tool of choice – Do it incrementally – Testing: Each new section as you add Prior sections to ensure you haven’t broken them Thoroughly test – Test each function – Test the system end to end – If appropriate stress test Your goal is to break your code! – Rather than a user finding your faults – So you can fix it