Building an Effective Web Site

Overview

There has been enormous growth in the use of the World Wide Web for delivering information and extending commercial capabilities. An organisation's web site is now increasingly becoming its public face. This places a heavy responsibility on the interface design to ensure that it properly reflects the organisation, and worthy of a visit. There are many balances to be struck between exploitation of the available technology and the usability and accessibility of the information provided.

The design issues affect Internet and intranet publishers alike and the questions are many: When is it best to use images? What sort of technology is available for interactive content? How is information passed back to the server? How accessible is my content? These are all questions that need to be addressed when trying to provide information across the network in the best way.

This course shows technologies and tools available for building a web site and will help you to decide which of them are best suited to your environment. Delegates will gain experience of building professional web content using the latest technologies to augment the user experience.

In addition, this course is designed to provide delegates with hands-on experience of building their own Web site. During the practical sessions you can choose which tool you would prefer to use - instructions are provided for Microsoft Expression Web and Dreamweaver CS, as well as a pure HTML editor.

The course is aimed at anyone who has been charged with setting up a website or developing web content as well as those interested in getting a better understanding of the many technologies used to deliver web content.

Prerequisites

• Delegates should have some technical experience, a working knowledge of the Windows operating environment and be familiar with the concepts and use of the Internet.
• Some HTML knowledge would be helpful although not essential.
• Delegates without any previous experience should consider attending either our Web Site Authoring using Microsoft Expression Web or Web Site Authoring using Dreamweaver CS course prior to this course.

Delegates will learn how to

• Create dynamic Web sites
• Include graphics and multimedia
• Design sites that are easily navigated and professional
• Use advanced HTML, such as tables, inline frames and cascading style sheets
• Read and write complex HTML
• Understand the management issues involved in Web site design and maintenance
• Understand principles of client-side and server-side technologies for creating interactive content, including CGI, ASP.Net, Java, JavaScript, Dynamic HTML, AJAX and Silverlight
• Configure websites for Search Engine Optimisation (SEO)
• Interact with databases
• Use HTML4 tags and attributes
• Work with dynamic HTML and CSS positioning
• Understand XML and XHTML concepts
• Understand public and private key encryption, digital signatures and digital certificates
• Understand SVG, RSS Newsfeeds, AJAX and Silverlight
• Describe e-commerce categories

Course Outline

Module 1: Introduction

• Web evolution
• The Internet and intranets
• Benefits to an organisation
• WWW Browsers
• Web server software

Module 2: World Wide Web Basics
Designing powerful and intuitive web sites requires an understanding of the underlying technologies such as URL's, HTTP and MIME. Delegates will become confident in building their internal or external environments around these base technologies.

• URLs and navigation
• Ports in action
• The HyperText Transfer Protocol
• Browser operation
• HTTP interactions
• Client Request and Server Response
• MIME

Module 3: Basic HTML
HTML forms the basis for most web content. This chapter deals with creating basic pages, including creating links, lists and basic formatting.

• HTML standards
• Tags, attributes and values
• Character formatting
• Character entities
• Text formatting
• Ordered and unordered lists
• Hyperlinks and anchors
• Relative and absolute URLs
• Hyperlink targeting

Module 4: Web Tools
Although many developers and content writers will use a basic tool such as Notepad, most developers will prefer to use a more advanced tool that can not only create content but also administer their web sites. We describe some of the more common tools and then allow the delegates to pick one of three ways to complete the exercises for the remainder of the course. They may choose to use MS Expression Web, Dreamweaver CS or Notepad.

• ASCII editors and WYSIWYG tools
• Microsoft FrontPage
• Microsoft Expression Web
• Office Web components
• Microsoft Visual Studio
• Adobe Dreamweaver
• HTML validators and consistency checkers

Module 5: Images
There are many image formats although only a few are suitable for the web. Images are required for most sites and may be used for a multitude of purposes, including navigation. It is therefore very important to use the right type of image as well as understanding the HTML that will present the image in the most pleasing way.

• File formats
• GIF, JPEG, PNG
• Transparent GIFs
• Inline Images
• Image configuration
• Background colour and images
• Graphical hyperlinks
• Image maps (Server side and client side)

Module 6:  Tables, Inline Frames and CSS
Tables have been the mainstay of page design for many major sites and can be used to create the look and feel of the site interface. Although there is less need for this now, it is still important to understand table structures and how to lay out data on the page. In addition, the delegates will learn how to use and configure Inline frames. There is also an introduction to CSS including embedded, inline and linked style sheets as well as using CSS classes.

• Basic tables
• Tables layout
• Complex tables
• Sizing tables
• Inline frames
• Hyperlinks and iframes
• Inline frames
• Cascading Style Sheets
• Embedded, inline and linked stylesheets
• Classes and ID's
• Spans and divisions

Module 7: Other Media Formats
Many types of media are now used as part of the construction of web pages and it is important to understand how the browser interacts with these files and how to enhance your web sites with multimedia components.

• Sound Formats
• Adding sounds to web pages
• Background sound
• Animated GIFs
• Video Formats
• Video links and inline video
• Streaming Video
• Shockwave and Flash
• Adobe PDF

Module 8: Web Site Design
Making your site easy to navigate and fast are of paramount importance as web users change their views of what is acceptable. Developers need to keep up with the methods for making their sites as efficient as possible. Small changes in say an image configuration may have a large impact on the time it will take a page to download and therefore on the users experience of your site.

• Making the site easy to navigate
• Bandwidth considerations for multimedia
• Image compression
• Sound and video compression
• Supporting different browsers
• Style guides

Module 9: Architecture
In some cases a web site will be the first, and possibly only, interface between the corporate environment and a possible client. Any mistakes, even minor ones, will give a bad impression to the user and those they communicate with. A simple broken link or link that goes to the wrong resource can do major damage to the corporate image.

• Multiple developer sites
• Testing and deployment
• Version control
• Shared files
• Server side includes
• Site management
• Auto Redirection
• Virtual servers and directories
• Server Hosting

Module 10: Other Internet Services
Most people assume that the web and the internet are the same thing. There are other internet services, apart from the web, that may be needed as part of your development environment, including dealing with file transfers, creating email links and how some of the newer services may affect your decision making, such as peer to peer technologies.

• Browser functions and gateways
• FTP URL syntax
• Anonymous FTP
• FTP versus HTTP for downloads
• Mailto and Usenet schemes
• Discussion Webs
• Telnet
• Peer to Peer

Module 11: Dynamic Content (Server)
You will need to consider the server if you want more than just a static page. The server sits between the user and other corporate systems and can be used to create dynamic content from those systems. This chapter deals with the communications and mechanisms for making these dynamic requests as well as how to construct the web page forms that will allow the user to send data and information that may be used or stored at the server.

• Static and dynamic data
• Common Gateway Interface(CGI)
• Scripting languages
• Invoking a CGI script
• GET and POST methods
• URL encoding
• Server Technologies
• Perl, ASP, JSP, PHP, ASP.NET
• CGI and security issues
• Building HTML forms
• The input types
• Submitting forms

Module 12:  Dynamic Content (Client)
Most browsers provide an extremely powerful environment to the user that can be used to affect and change pages without a round trip to the server. Scripting technologies can be used to not only give an enhanced interface to the user, i.e. drop down menus and rollover images, but also to deal with the background mechanisms such as validating form content before being sent to the server. In addition, the delegates will see how Java applets are used and configured on the client.

• Client side scripting mechanism
• Scripting languages
• The <script> tag
• Scripting basics
• JavaScript samples
• Events and form validation
• Browser variations
• JavaScript standards
• ECMAScript
• Java overview
• Java Applets
• The Java Virtual Machine (JVM)
• Applets sources

Module 14: Active Server Pages (ASP and ASP.Net)
Although this is a Microsoft technology, it is an ideal mechanism for demonstrating server side scripting. The delegates will be able to understand how communications from the client and server can be interrogated and manipulated to provide dynamic pages. They will also use ASP and ASP.Net in order to create their own server side scripts.

• ASP introduction
• The ASP page
• ASP processing
• The ASP object model
• Applications and sessions
• Requests and responses
• ASP.Net application development
• ASP.Net page execution
• Web Forms and Web Server controls
• ASP.Net development web server

Module 15: Search Engine Optimisation
This chapter deals with incorporating search mechanisms in to your own environments as well as how your pages should be configured so that the search engines will be able to provide results that make sense to users. The different types of search engine are discussed and how, once your site has been created and tested, you will want to make sure that users become aware of it.

• Indexing and search facilities
• Types of search engine
• Automated search engines
• Directory based search
• Registering your site
• Document design for searching
• Using the META tag
• Robots and security

Module 16: Database Integration
One of the many server mechanisms that most corporate sites will want to introduce is database integration. We talk about three tier architecture as well as middleware integration products and, as part of their exercises, the delegates will create an impressive dynamic ASP.Net page that will query back end databases for user specific data.

• Database products
• Web database access
• Three tier applications
• ODBC, OLEDB and JDBC
• Middleware integration products
• Microsoft ADO and ADO.NET
• Transacted database access

Module 17: Dynamic HTML and CSS Positioning
There are some very impressive websites that use a combination of technologies in order to achieve their look and feel. Dynamic HTML is a term used to describe this combination of technologies which includes client side scripting and the document object model as well as CSS positioning. This now means that any part of a page can be manipulated by capturing events and allows for almost a desktop publishing type mechanism for the placement of content on the page.

• The Document Object Model (DOM)
• Elements and events
• Browser support
• Static, absolute and relative positioning
• Absolute and relative measurement units
• 'z' positioning
• Dynamic content
• Dynamic styles

Module 18: HTML4 and Accessibility
The current specification for HTML is version 4 and this introduced many new tags and attributes designed to enhance the user's experience of your site as well as tags and attributes specifically related to accessibility for those who are visually impaired or disabled. Accessibility has become an important part of web site design because of the Disabilities Act.

• W3C specification
• HTML4 v HTML3.2
• Changes and additions to tags and attributes
• Changes and additions to forms and table tags and attributes
• Accessibility
• Internationalisation
• Deprecated tags
• Browser support
• HTML5 draft specification

Module 19: eXtensible Mark-up Language (XML)
XML is one of the most important developments within the web technology arena. It provides a standard representation of data in a format that is easily disseminated across internet and intranet infrastructures. The chapter will describe XML as well as the surrounding technologies such as XSL transformations and Schemas that allow it to work. The delegates will not only create some of their own well formed and validated XML but also a stylesheet transformation in order to view it in the browser.

• eXtensible Mark up Language
• What is XML
• Representing Data
• HTML vs XML
• Well formed XML
• XML document structure
• Document Type Definition(DTD) and Schemas (XSD)
• Valid XML documents
• Extensible Stylesheet Language Transformations (XSLT)
• Data exchange and interoperability
• XHTML and XHTML rules

Module 20: Security
Security is a very interesting aspect of web communications that is often misunderstood by users as well as developers. This chapter aims to demystify the most commonly used mechanisms and deals with the three main requirements of preventing eavesdropping, preventing modification and preventing impersonation. The technology behind the secure socket layer (HTTPS) is described and delegates will enable secure communications to part of their site using a digital certificate and SSL.

• HTTP Authentication
• Security issues
• Protection through encryption
• Public and private key encryption
• Message authentication (Message digests)
• Digital signatures
• Digital certificates
• Certification authorities
• The secure socket layer (SSL)

Module 21: Content Delivery
New ways of delivering content to the user are arriving all the time. We have picked a few of these mechanisms which include SVG for data driven images at the client and Newsfeeds (RSS). RSS (Really Simple Syndication) is now becoming very popular with major sites that are providing some of their content in this format which enables reuse across many environments. In addition, delegates will create an AJAX implementation as well as use Microsoft's Deep Zoom Composer to create a Silverlight application and add this to one of their pages.

• Scalable Vector Graphics (SVG)
• SVG shape elements
• RSS Newsfeeds
• Syndication and aggregation
• RSS syntax
• RSS clients
• The need for AJAX
• Scenarios for AJAX
• MS Expression AJAX controls
• Dreamweaver Spry framework
• Silverlight and its capabilities
• Expression Blend and XAML

Module 22: E-Commerce
Now that the delegates have experienced what is required in order to create effective web sites they can understand what may be needed to create E-commerce applications relating to the main categories of B2B and B2C.  The implications in using this public trading infrastructure are many and must be considered carefully so that the likelihood of success can be increased.

• Business drivers and marketplace
• Categories
• Business-to-customer (B2C)
• Business-to-business (B2B)
• Systems integration
• Enabling technologies
• Building E-Commerce solutions
• Application Service Providers
• Payment solutions

Certification

This course will assist delegates preparing for the following exams:
N/A

Recommended follow on courses

• Web Programming with Javascript
• CSS, XHTML and Accessibility
• Developing Web Applications with Active Server Pages

For those with programming experience:-

Building Effective ASP.Net 2.0 Applications with Visual Studio 2005
Building Effective ASP.Net 3.5 Applications with Visual Studio 2008
Building Effective ASP.Net 4.0 Applications with Visual Studio 2010