Transcript So You Want To Develop An Advanced Web Site

So You Want To Develop An
Advanced Web Site, Huh?
Daniel B. Smith
[email protected]
http://dsmith77.wordpress.com/
Introductions All Round
What you teach
Your Name
Why you took
this workshop
Where you teach
Your
experience
with web
technologies
2
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!
3
Content Outline
Part I:
Technical Aspects
Answers “What?”
Focus on Functionality
Available Tools
Part II:
Business Aspects
Answers “How?”
Focus on Development
Implementation
Part III:
Creative Aspects
Answers “Who?”
Focus on Teamwork
Best Techniques
Part IV:
A Combined Perspective
Here and Now
Focus on Aesthetics
Hands-On Scenarios
4
Part I
Technical Aspects
Answers “What?”
Functionality
Available Tools
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
6
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
7
The Best Browser
Unfortunately, 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.
8
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.
9
7 Rules of XHTML
1.
2.
3.
4.
5.
6.
7.
XHTML has a few mandatory elements.
XHTML tags MUST be closed.
XHTML tags MUST be properly nested.
XHTML elements MUST be in lowercase.
XHTML attribute values MUST be quoted.
Boolean Attributes are forbidden.
Use the id attribute in place of the name attribute.
10
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
11
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 >.
12
JavaScript
Sample JavaScript code: (Displays an always up-to-date copyright ready for a page footer.)
// Year in 4-digit format
var 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:[email protected]"
onclick="javascript:window.location='mailto:[email protected]'">Daniel Smith</a>. All
Rights Reserved.
The Page Result:
“Copyright © 2007 Daniel Smith. All Rights Reserved.”
13
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.
14
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)
15
Part II
Business Aspects
Answers “How?”
Focus on Development
Implementation
Steps 1-10: Design Process
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Assess objectives and requirements
Conduct scenarios
Produce wireframes (and establish site architecture)
Produce sketches, comps, and (if necessary) prototypes
Draft the style guide
Produce templates and stylesheets
Write code
Test presentation and behavior
Reconcile test results (if possible)
Publish
Taken from “Avoid Edge Cases by Designing Up Front”
http://www.alistapart.com/articles/avoidedgecases
17
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
18
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
19
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
20
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
21
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.
22
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.
23
Part III
Creative Aspects
Answers “Who?”
Focus on Teamwork
Best Techniques
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.
25
A Sample Development Team
A 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
26
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.
27
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.
28
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
•
29
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
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?
30
Part IV
A Combined Perspective
Here and Now
Focus on Aesthetics
Hands-On Scenarios
Group Activity
You will now divide into role-play development teams by numbering off 1
to 4.
1.
2.
3.
4.
Producers
Engineers
Stylists
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.
32