Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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 © " + 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 © 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