Building an Effective Web Site — A 5 day course
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 Visual Studio Express and Dreamweaver CS, as well as a pure HTML editor.
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
- 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
- See the new features of HTML5 and CSS3
- Understand public and private key encryption, digital signatures and digital certificates
- Understand SVG, RSS Newsfeeds and AJAX
- Describe e-commerce categories
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.
- 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
Publicly scheduled dates, locations, and prices
Edinburgh — £2195 (+VAT)
Glasgow — £2195 (+VAT)
London — £2195 (+VAT)
- Web evolution
- The Internet and intranets
- Benefits to an organisation
- WWW Browsers
- Web server software
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
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
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 Visual Studio Express, Dreamweaver CS or Notepad.
- ASCII editors and WYSIWYG tools
- Microsoft Visual Studio
- Adobe Dreamweaver
- Aptana Studio
- HTML validators and consistency checkers
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
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
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
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
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
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
- Peer to Peer
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
- Scripting languages
- Invoking a script
- GET and POST methods
- URL encoding
- Server Technologies
- Perl, PHP, ASP.NET, JSP
- Script security issues
- Building HTML forms
- The input types
- Submitting forms
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.
- Client side scripting mechanism
- Scripting languages
- The 'script' tag
- Scripting basics
- Events and form validation
- Browser variations
ASP.Net and PHP
We have picked two of the most popular technologies in order to demonstrate server side programming. 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.Net in order to create their own server side script.
- ASP.Net application development
- ASP.Net page execution
- Web Forms and Web Server controls
- ASP.Net development web server
- Applications and sessions
- Requests and responses
- Accessing Information from the Client
- Overview of PHP
- Basic Syntax of a PHP script
- Running PHP scripts
- PHP script examples
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
- Registering your site
- Document design for searching
- Using the META tag
- Robots and security
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
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
Introduction to jQuery
- What is jQuery
- Adding jQuery to a page
- jQuery UI
- jQuery Plugins
- jQuery Mobile
- The jQuery wrapper
- Selectors and events
- jQuery chaining and animation
- Widgets, including Accordions, Tabs and Datepickers
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
HTML5 and CSS3 Overview
HTML5, like DHTML before it has become a buzz word and overall umbrella for a wide set of technologies. It is not XHTML2.0 in fact many of the hard rules of XHTML are gone in this softer HTML rule set. HTML5 is not due to be fully finished until the next decade. It will evolve and change in conjunction with developer needs and browser company support but as a 'living standard'. This means many core features of HTML5 are ready to go today in the latest crop of browser releases.
- What is HTML5
- HTML5 Keeping it simple
- Rich Media e.g. Canvas
- Form enhancements
- New elements for structure and semantics
- CSS3 pseudo-classes and elements
- Browser specific rules (vendor prefixes).
- Visual enhancements (borders, shadows, fonts and opacity)
- CSS3 Media Queries
- HTML5 Support
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.
- 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)
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 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 allowing to get new data for a page without rebuilding the whole page.
- Scalable Vector Graphics (SVG)
- SVG shape elements
- RSS Newsfeeds
- Syndication and aggregation
- RSS syntax
- RSS clients
- The need for AJAX
- Scenarios for AJAX
- MS Visual Studio AJAX controls
- Dreamweaver Spry framework
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
- Business-to-customer (B2C)
- Business-to-business (B2B)
- Systems integration
- Enabling technologies
- Building E-Commerce solutions
- Application Service Providers
- Payment solutions