Presentation on theme: "So You Want To Develop An Advanced Web Site, Huh? Daniel B. Smith"— Presentation transcript:
So You Want To Develop An Advanced Web Site, Huh? Daniel B. Smith firstname.lastname@example.org http://dsmith77.wordpress.com/
2 What you teach Where you teach Your experience with web technologies Why you took this workshop Your Name Introductions All Round
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 http://www.danielsmithdesigns.com/design_philosophy.html http://www.danielsmithdesigns.com/design_philosophy.html
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 http://marketshare.hitslink.com/. ) http://marketshare.hitslink.com/ 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 è, ¾,,, &,.
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 http://www.alistapart.com/articles/avoidedgecases 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 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 http://www.alistapart.com/articles/avoidedgecases 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 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 http://www.alistapart.com/articles/avoidedgecases 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/adsensehttps://www.google.com/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, http://www.sitemaps.org/http://www.sitemaps.org/ –Webmaster Tools, http://www.google.com/webmasters/tools http://www.google.com/webmasters/tools –The Web Robots Page, http://www.robotstxt.org/wc/robots.html 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/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.http://www.domains.org/ 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.http://www.godaddy.com/
Part III Creative Aspects Answers Who? Focus on Teamwork Best Techniques
25 Templates Templates are built-in to most web site generation tools –Dreamweaver, http://www.adobe.com/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 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 http://www.alistapart.com/articles/avoidedgecases 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.
30 Pop Quiz! Web Site Evaluation: 1.Visit the McDowell County Tourism site at http://www.mcdowellnc.org/ http://www.mcdowellnc.org/ 2.Visit the Baskin-Robbins site at http://www.baskinrobbins.com/ http://www.baskinrobbins.com/ 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.