So You Want To Develop An Advanced Web Site, Huh? Daniel B. Smith

2 What you teach Where you teach Your experience with web technologies Why you took this 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 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

Part I Technical Aspects Answers What? Functionality Available 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

7 Web Standards Structural Languages –Extensible Hypertext Markup Language (XHTML) 1.0Extensible Hypertext Markup Language (XHTML) 1.0 –XHTML 1.1XHTML 1.1 Presentation Languages –Cascading Style Sheets (CSS) Level 1Cascading Style Sheets (CSS) Level 1 –CSS Level 2CSS Level 2 Scripting Languages –ECMAScript 262 (the standard version of JavaScript)ECMAScript 262 Object Models –Document Object Model (DOM) Level 1 (Core)Document Object Model (DOM) Level 1 (Core) –DOM Level 2DOM Level 2 See for a detailed, yet concise explanation of the above standardshttp://

8 The Best Browser Unfortunately, there is no best browser. They each have their positives and negatives. Heres the skinny on the important ones, the ones your students should become familiar with: (See ) Firefox (15%) – Open-source; attempts to strictly follow W3C standards, but is not perfect. (My preferred browser.) Internet Explorer (79%) – Microsofts 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 is the tag name. width=60% and color=red are the tags 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 LayoutsLittle Boxes –MaxDesign CSS Resources TutorialsMaxDesign CSS Resources –The Layout Reservoir Ready-Made Page LayoutsThe Layout Reservoir –W3Schools CSS Tutorials Real-Time EditorW3Schools CSS Tutorials

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 cant be typed directly from the keyboard or are part of HTML code and thus not be displayed under normal conditions. Examples include è, ¾,,, &,.

13 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 ; var pre = "daniel.smith"; var pst = "mcdowell.k12.nc.us"; var all = pre + + pst; document.writeln("Copyright © " + m_year + " Daniel Smith. All Rights Reserved."); The Code Result: (Modify the highlighted portions to customize the code.) Copyright © 2007 Daniel Smith. All Rights Reserved. The Page Result: Copyright © 2007 Daniel Smith. All Rights Reserved.Daniel Smith

14 Future Web Programming The web seems to be moving away from Scripting Languages (JavaScript, Perl, and VBscript) to Programming Languages (ASP, Flashs 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 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. Its 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,

Part II Business Aspects Answers How? Focus on Development Implementation

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

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 builtwhat are its business objectives? How are we going to build the sitewhat tools are we using, and whats the budget? Taken from Avoid Edge Cases by Designing Up Front

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 wont 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 iterationsbefore 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

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,

21 Search Engine Optimization You might have the best site on the entire world wide web, but if nobody knows youre out there or can find you it wont 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. Googles Site Submission Process: –sitemaps.org, –Webmaster Tools, –The Web Robots Page,

22 Site Statistics Track your visitors! Know which parts of your site are popular and know how much! –StatCounter, 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. – 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. – is one of the biggest and best in the business offering $4 per month hosting and $7 per year domain registration.

Part III Creative Aspects Answers Who? Focus on Teamwork Best Techniques

25 Templates Templates are built-in to most web site generation tools –Dreamweaver, 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 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 Designers work informs the schedule of the stylist. Adapted from Avoid Edge Cases by Designing Up Front

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 Dont expect to create a master e-Commerce site in a semester. Its 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, 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 ServiceThe W3C Markup Validation Service –Usability.govUsability.gov –Watchfire WebXACT online quality, accessibility, and privacy checkerWatchfire WebXACT CSS –Little Boxes Ready-Made Page LayoutsLittle Boxes –MaxDesign CSS Resources TutorialsMaxDesign CSS Resources –The Layout Reservoir Ready-Made Page LayoutsThe Layout Reservoir –W3Schools CSS Tutorials Real-Time EditorW3Schools CSS Tutorials Step-by-Step Site Creation –From Table Hacks to CSS Layout: A Web Designers JourneyFrom Table Hacks to CSS Layout: A Web Designers Journey –Selectors in ActionSelectors in Action Firefox Add-ons –IE Tab Embedding Internet Explorer TabsIE Tab –Web Developer Web Developer ToolsWeb Developer –Total Validator 5-in-1 ValidatorTotal Validator –Firebug Edit, debug, and monitor CSS, DOM, HTML, and JavaScript live in any web pageFirebug –ColorZilla Eyedropper, and Color PickerColorZilla –MeasureIt Get the exact pixel size of any page elementMeasureIt –FireFTP Cross-Platform FTP ClientFireFTP Publications –A List Apart web design, and development articles, best practices, web standardsA List Apart –Bound By Law copyright law, fair use, copyright infringementBound By Law –Getting Real a smaller, faster way to build softwareGetting Real –Research-Based Web Design and Usability GuidelinesResearch-Based Web Design and Usability Guidelines –The Web Standards ProjectThe Web Standards Project

30 Pop Quiz! Web Site Evaluation: 1.Visit the McDowell County Tourism site at Visit the Baskin-Robbins site at Now, discuss the following design considerations. Pros? Cons? Media? Technologies? Audience? Approach? Functionality? Look and Feel?

Part IV A Combined Perspective Here and Now Focus on Aesthetics Hands-On Scenarios

32 Group Activity You will now divide into role-play development teams by numbering off 1 to 4. 1.Producers 2.Engineers 3.Stylists 4.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.