So You Want To Develop An Advanced Web Site, Huh?

Daniel B. SmithDaniel B. Smithdsmith77@gmail.comdsmith77@gmail.com

http://dsmith77.wordpress.com/http://dsmith77.wordpress.com/

2

What you teach

Where you teach

Yourexperiencewith web

technologies

Why you tookthis workshop

Your Name

Introductions All Round

3

What happened to Advanced XHTML?

• The only real way to make a coding language like XHTML advanced is to add to it.

• Making modern web sites is less about knowing any version of HTML and more about knowing how it can be extended with:

– Cascading Style Sheets (CSS)

– The Document Object Model (DOM)

– JavaScript and other programming languages

– Other Emerging Web Technologies like Flash!

4

Content Outline

Part I:Technical AspectsAnswers “What?”

Focus on FunctionalityAvailable Tools

Part II:Business AspectsAnswers “How?”

Focus on DevelopmentImplementation

Part III:Creative AspectsAnswers “Who?”

Focus on TeamworkBest Techniques

Part IV:A Combined Perspective

Here and NowFocus on AestheticsHands-On Scenarios

Part ITechnical AspectsAnswers “What?”

FunctionalityAvailable Tools

6

My Design Philosophy

• There are Web Standards• Web Pages are Fluid (not 8 ½ x 11)• Separate Content from Presentation

– Tables vs Divs and CSS• Small is Beautiful• Neither Aesthetics nor Functionality must be sacrificed• Content is Key

Taken from “Design Philosophy” http://www.danielsmithdesigns.com/design_philosophy.html

7

Web Standards• Structural Languages

– Extensible Hypertext Markup Language (XHTML) 1.0– XHTML 1.1

• Presentation Languages– Cascading Style Sheets (CSS) Level 1– CSS Level 2

• Scripting Languages– ECMAScript 262 (the standard version of JavaScript)

• Object Models– Document Object Model (DOM) Level 1 (Core)– DOM Level 2

• See http://www.webstandards.org/learn/faq/ for a detailed, yet concise explanation of the above standards

8

The Best BrowserUnfortunately, there is no best browser. They each have their positives and

negatives. Here’s the skinny on the important ones, the ones your students should become familiar with: (See http://marketshare.hitslink.com/.)

• Firefox (15%▲) – Open-source; attempts to strictly follow W3C standards, but is not perfect. (My preferred browser.)

• Internet Explorer (79%▼) – Microsoft’s track record of following W3C standards is bleak preferring instead to implement their own; Used by the vast majority of internet users.

• Mosaic (N/A) – The first graphical browser ever; Invented by Marc Andreessen as a college project who went on to found Netscape Communications. (Read the copyright credits on IE and others!)

• Netscape (1% ▼) – Once the dominant browser and freely downloadable until Microsoft decided to bundle Internet Explorer with their OS.

• Opera (1% ▲)– The creator also invented CSS, so it implements CSS closest to the W3C standard

• Safari (4% ▲) – A popular open-source browser for the Mac.

9

HTML Vocabulary Check

• Different people and textbooks use different terms to refer to the various parts of typical HTML. The following is a correctly coded HTML tag (flag). Remember, this is still HTML not XHTML.

<hr width=“60%” color=“red”>

• hr is the tag name.• width=“60%” and color=“red” are the tag’s attributes.• width and color are attribute names while 60% and red are attribute

values. The quotes are for clarity since they are not required.• Most attributes come in name=“value” pairs.

10

7 Rules of XHTML

1. XHTML has a few mandatory elements.

2. XHTML tags MUST be closed.

3. XHTML tags MUST be properly nested.

4. XHTML elements MUST be in lowercase.

5. XHTML attribute values MUST be quoted.

6. Boolean Attributes are forbidden.

7. Use the id attribute in place of the name attribute.

11

CSS• Cascading Style Sheets allow the content within a web page to be

truly separated from presentation. Best of all, style information can be used with multiple pages on your site. Edit once in one location to affect every page.

• When working with CSS, # before a selector refers to id attributes while . before a selector refers to a class attribute. No punctuation indicates a redefining of an existing tag.

• CSS Links– Little Boxes Ready-Made Page Layouts– MaxDesign CSS Resources Tutorials– The Layout Reservoir Ready-Made Page Layouts– W3Schools CSS Tutorials Real-Time Editor

12

Color Codes and Escape Characters

Color Codes• These are numbers written in Hexadecimal that convert to colors in RGB format.• The numbers range from 0 to 9 and then continue A to F until they increment and

start over at 0. 0 = no color and F = full color in either red, green, or blue (RGB). The first two characters govern the amount of red, the middle two govern green, and the last blue.

• Black (#000000), White (#FFFFFF), Red (#FF0000), Green (#00FF00), Blue (#0000FF), Yellow (#FFFF00), Magenta (#FF00FF), and Cyan (#00FFFF) should give you an understanding of how the codes work. See the patterns?

• There is a shorthand popularly in use since the most common color values are pairs. So, white as #FFFFFF would be #FFF in shorthand.

Escape Characters• These are visible characters that can’t be typed directly from the keyboard or are

part of HTML code and thus not be displayed under normal conditions.• Examples include è, ¾, ™, “, &, <, and >.

13

JavaScriptSample JavaScript code: (Displays an always up-to-date copyright ready for a page footer.)

// Year in 4-digit formatvar modified = new Date(document.lastModified);var m_year = modified.getYear();if (m_year<1000) m_year = m_year + 1900;

var pre = "daniel.smith";var pst = "mcdowell.k12.nc.us";var all = pre + "@" + pst;

document.writeln("Copyright &copy; " + m_year + " <a href=\"mailto:" + all + "\" onclick=\"javascript:window.location='mailto:" + all + "'\">Daniel Smith</a>. All Rights Reserved.");

The Code Result: (Modify the highlighted portions to customize the code.)

Copyright &copy; 2007 <a href="mailto:daniel.smith@mcdowell.k12.nc.us" onclick="javascript:window.location='mailto:daniel.smith@mcdowell.k12.nc.us'">Daniel Smith</a>. All Rights Reserved.

The Page Result:“Copyright © 2007 Daniel Smith. All Rights Reserved.”

14

Future Web Programming

• The web seems to be moving away from Scripting Languages (JavaScript, Perl, and VBscript) to Programming Languages (ASP, Flash’s ActionScript, Java, PHP, and Ruby).

• Scripting Languages allow for the creation of largely static, informational content.

• Programming Languages allow for the creation of dynamic, transactional services.

• Only time will tell where the future of the web lies, but there will likely be room for both.

15

The DOM

• DOM stands for Document Object Model and is built-in to all the popular browsers.

• In the words of the W3C located at http://www.w3.org/DOM/, “The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.”

• The DOM provides “hooks” for code running in web pages to make the pages more dynamic, responsive, and interactive.

• It’s most closely associated with JavaScript which accesses the DOM extensively. “document.writeln();” is JavaScript code that interacts with the DOM. In this case, it displays whatever is found between the parentheses in the current browser window.

• WikiPedia has a good list of DOM elements and which browsers support what, http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(DOM)

Part IIBusiness AspectsAnswers “How?”

Focus on DevelopmentImplementation

17

Steps 1-10: Design Process

1. Assess objectives and requirements 2. Conduct scenarios 3. Produce wireframes (and establish site architecture) 4. Produce sketches, comps, and (if necessary) prototypes 5. Draft the style guide 6. Produce templates and stylesheets 7. Write code 8. Test presentation and behavior 9. Reconcile test results (if possible) 10. Publish

Taken from “Avoid Edge Cases by Designing Up Front” http://www.alistapart.com/articles/avoidedgecases

18

Step 1: Initial Assessment

• Who do we want to visit the site? • What are we publishing that those visitors will find important? • Where are our visitors in terms of geography, ambient environment,

and client platform? • When should the site be launched, phased, maintained, and finally

taken down or redesigned? • Why does the sponsor want the site built—what are its business

objectives? • How are we going to build the site—what tools are we using, and

what’s the budget?

Taken from “Avoid Edge Cases by Designing Up Front” http://www.alistapart.com/articles/avoidedgecases

19

Design Process Benefits• Well defined scope: Since the assessment defines exactly what needs to be built and the

resources that will be made available to build it, time and progress management are made easier.

• Earlier identification of user experience (UX) issues: Scenarios probably won’t catch all of the possible UX flaws in a site or application, but they will reveal many of the flaws likely to force multiple production iterations—before design, much less production, even starts.

• Context and purpose are well-established: The wireframes ultimately define where everything goes. Armed with this knowledge, the developers can devote their energy to implementation and production, rather than dithering with edge cases or internal disagreements.

• Team members become fairly accountable for all of their own decisions. Each member of a development team makes decisions that affect the timeline.

• A style guide makes interactions between team members predictable, and encourages dialogue between team members about problems that otherwise would remain invisible until the site goes into production.

Taken from “Avoid Edge Cases by Designing Up Front” http://www.alistapart.com/articles/avoidedgecases

20

Business Model

• Each web site NEEDS a business model. Hosting and purchasing a Domain name are inexpensive, but they do have a cost.

• True e-Commerce sites MUST have a detailed business plan just to function let alone succeed.

• Consider implementing a revenue generation method. The most common way is to use embedded advertisements in your web site.

– “Google AdSense”, https://www.google.com/adsense

21

Search Engine Optimization

• You might have the best site on the entire world wide web, but if nobody knows you’re out there or can find you it won’t make any difference.

• Your primary concern in this should be to submit your site to Google which is currently the most-visited search engine on the web.

• Google’s Site Submission Process:– sitemaps.org, http://www.sitemaps.org/ – Webmaster Tools, http://www.google.com

/webmasters/tools– The Web Robots Page, http://

www.robotstxt.org/wc/robots.html

22

Site Statistics

• Track your visitors! Know which parts of your site are popular and know how much!– StatCounter, http://www.StatCounter.com/

• Some visitors will be concerned about their privacy so provide information explaining exactly what you do and how the information is used. Add a Disclaimer or Policy to your site.

23

Going Live!Domain Registration

– Purchasing a Domain Name is easy. Choosing a good one can be tricky, but owning a common one is nearly impossible without money to burn.

– http://www.domains.org/ will tell you all you need (or could ever want) to know about Domains.

Hosting Accounts– It is often beneficial to select a Domain Name Registrar

that also offers hosting options. – http://www.godaddy.com/ is one of the biggest and best

in the business offering $4 per month hosting and $7 per year domain registration.

Part IIICreative AspectsAnswers “Who?”

Focus on TeamworkBest Techniques

25

Templates

• Templates are built-in to most web site generation tools– Dreamweaver, http://www.adobe.com/

• They make keeping navigation, headers, footers, and other items consistent across multiple pages a breeze. They also prevent accidental page changes and coding errors.

• Templates work by restricting which parts of a page can be changed. The remainder of each page is “locked” and kept synchronized with the template. To make any changes, make the changes to the template and then update all pages that rely on that template.

26

A Sample Development TeamA Stakeholder (from the Client Company)

The stakeholder works closely with the Producer and is empowered to make decisions for the client company. He or she is responsible for determining the business model and lays out the work for the Engineer.

The Producer

The Producer works closely with the Stakeholder and supervises all aspects of the project. He or she defines the toolset of the designer and must approve all work completed.

The Engineer

The Engineer writes XHTML code and gets the web site working piece by piece in a rough, plain form. He or she scopes the work of the Producer.

The Stylist

The Stylist works with the Producer or Stakeholder to first generate and later maintain a detailed, written style guide that describes what the project should look and feel like when complete.

The Designer

The Designer uses the style guide and CSS to create the layout, customize the interface, and implement the style guide. The Designer’s work informs the schedule of the stylist.

Adapted from “Avoid Edge Cases by Designing Up Front” http://www.alistapart.com/articles/avoidedgecases

27

Development Team Pitfalls

• There are Two Basic Approaches to creating a web site: The Developer and The Designer.

• The Developer is concerned with the backend, the underlying code for the site. He or she focuses on implementing features and makes sure that “it works” regardless of how hard it might be to use or how unattractive the interface.

• The Designer is concerned with the look and feel of the site. He or she focuses on what the visitor will see and makes sure that “it looks good” without regard to accessibility or feature availability.

• A good implementation will combine the approaches of both while avoiding their pitfalls.

28

Expectations• Don’t expect to create a master e-Commerce site in a semester. It’s just not practical.

Students, even advanced ones, have a hard time grasping the full concept of what a web site is, what it can be, and how it all fits together.

What you can reasonably expect from…• All Students:

– Basic XHTML Coding– Copy and Paste JavaScript, Copy and Paste CSS– Simple Form Submission, Email Form Submission

• Only The Rare Highly Advanced Students: – User Accounts, Secure Data Transfer– Shopping Carts, Financial Transactions, Credit Card Processing– Database Integration– Custom Programming, Custom JavaScript

• Most students will fall somewhere between these two extremes.

29

Resources• XHTML

– The W3C Markup Validation Service– Usability.gov– Watchfire WebXACT online quality,

accessibility, and privacy checker• CSS

– Little Boxes Ready-Made Page Layouts– MaxDesign CSS Resources Tutorials– The Layout Reservoir Ready-Made Page

Layouts– W3Schools CSS Tutorials Real-Time

Editor• Step-by-Step Site Creation

– From Table Hacks to CSS Layout: A Web Designer’s Journey

– Selectors in Action

• Firefox Add-ons– IE Tab Embedding Internet Explorer Tabs– Web Developer Web Developer Tools– Total Validator 5-in-1 Validator – Firebug Edit, debug, and monitor CSS,

DOM, HTML, and JavaScript live in any web page

– ColorZilla Eyedropper, and Color Picker– MeasureIt Get the exact pixel size of any

page element– FireFTP Cross-Platform FTP Client

• Publications– A List Apart web design, and development

articles, best practices, web standards– Bound By Law copyright law, fair use,

copyright infringement – Getting Real a smaller, faster way to build

software– Research-Based Web Design and Usability

Guidelines

– The Web Standards Project

30

Pop Quiz!

Web Site Evaluation:

1. Visit the McDowell County Tourism site at http://www.mcdowellnc.org/

2. Visit the Baskin-Robbins site at http://www.baskinrobbins.com/

Now, discuss the following design considerations.• Pros? Cons? Media? Technologies? Audience?

Approach? Functionality? Look and Feel?

Part IVA Combined Perspective

Here and NowFocus on AestheticsHands-On Scenarios

32

Group Activity

You will now divide into role-play development teams by numbering off 1 to 4.

1. Producers2. Engineers3. Stylists4. Designers

Each team will be randomly given a development challenge scenario. The materials that come with it represent the client Stakeholder.

Your assignment is to develop a web site to the specifications of the stakeholder. If the stakeholder has not expressed a preference on an issue, then you may decide how to proceed.