WEB SITE DEVELOPMENT OVERVIEW Web Site Development Module

WEB SITE DEVELOPMENT OVERVIEW

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 • 1945 - 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 • 1977 - 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 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 • 1960 s – 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 < and > e. g. <b> indicates the text that follows is to be bolded – And should generally bounded by open <tag> and close tags </tag> e. g. <b>This text will be in bold</b> – In a few cases there are multiple tags for the same function, e. g. <b>, <em> and <strong> do the same thing. • Attributes further qualify tags that require information <img src=“name”> 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) <p>This is the first paragraph <p>This is the second <p>This is the first paragraph</p> <p>This is the second<p> 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 • 1996 - 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 to. Writing 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