2. Leverage Your Online Presence The Web Design Process Duane Dixon – HSPVA -- ddixon@houstonisd.org Susan Boone - Westside High School -- sboone@houstonisd.org Houston I.S.D. TechSPAN ‘09

3. You can create the look, feel, and navigation for Web sites using HTML, as well as a number of computer graphics programs. Start by planning…then revise some more. So you want to have a web site? Now What?

4. Design

5. Brainstorming Work with key individuals at your campus to get ideas about what content should be on the web. Determine WHO is responsible for gathering the information and creating the text and collecting images.

6. Assigning Groups… Team Roles: “Buzz Words” for developers –Project manager –Documenter –Designer It doesn’t matter what you CALL these individuals, but it REALLY matters that they exist. Otherwise, you may be the ONE person that ‘does it all’….

7. PROTOTYPES Three prototypes used in Web design 1. Site Map – text-based outline of the entire Web site. 2.Storyboard – graphical representation of the entire Web site that shows the navigational structure and page hierarchy. 3.Wireframe – diagrammatic representation of each page in the Web site. Placement of various elements on the page should be represented with simple drawings.

8. Planning the Content Work from the sitemap and wireframe to develop content.

9. Initial Design Templates… –Free sites –Problem Solving –Trouble Shooting CSS Style Sheets… –Work with code –Plan

10. Feedback All of the people involved in providing content needs to check to make sure the team is headed in the right direction.

11. Iterate

12. Build the HTML Dreamweaver Notepad (Templates)

13. CSS ???? Really cool Style sheets add a lot of flexibility. Many available CSS style sheets that are available

14. Present to Administration Be sure to include the administration in the development phase. Get feedback from them AGAIN until the site is completed.

15. TEST When refining a Web site, what techniques should be used? Heuristic – problem solving Think Aloud – work in teams (pairs) and go through the entire site and discuss and record comments Usability Studies – use various tools to track data collected from the Web site

16. Launch If the website is stored on the HISD server…check to make sure the guidelines for the district have been followed.

17. How To Request a Department Web Site on the Portal To request a department Web site on the HISD Portal, contact Marcy Spears, Portal Services Supervisor. She will meet with you to discuss your site and assist you through the process of organizing the site. Training will be provided by the HISD Help Desk monthly for site managers and content contributors.Marcy Spears

18. School Web Site Guidelines Guidelines and standards covered here are intended to ensure appropriate content/use of HISD school Web sites as to: – Process – Protocol/Responsibility – Content – Requirements – Publishing Guidelines https://www.houstonisd.org/Technology/Home/Technical%20Resources/SchoolWebSiteGuidelines2.pdf

19. Web Monkey http://www.webmonkey.com/ Webmonkey is a free, public resource for web developers. Builders, designers write the articles, tutorials, code snippets and other contributions.

20. The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. W3C is a forum for information, commerce, communication, and collective understanding. On this page, you'll find W3C news, links to W3C technologies and ways to get involved. New visitors can find help in Finding Your Way at W3C. We encourage organizations to learn more about W3C and about W3C Membership.W3C newsW3C technologiesget involvedFinding Your Way at W3C about W3Cabout W3C Membership http://www.w3.org/

21. Copyright for ones and zeros. The Digital Domain is the home of some of the thorniest issues regarding copyright. See the software cases that spawned incomprehensible infringement tests, legislation (proposed and enacted) that frame the Battle Royale for the Internet, and, or course, everything you wanted to know about websites and copyright. http://www.benedict.com/Digital/Digital.aspx

22. Links Storyboarding: http://en.wikipedia.org/wiki/Storyboard - Decent article on storyboardinghttp://en.wikipedia.org/wiki/Storyboard Wireframing: http://www.mstoner.com/index.php/blog/comments/651/pwir eframing_paper_wireframing - a great ideahttp://www.mstoner.com/index.php/blog/comments/651/pwir eframing_paper_wireframing http://www.justinmind.com/ - wireframing app for purchasehttp://www.justinmind.com/ http://hello.hotgloo.com/ - free online wireframing apphttp://hello.hotgloo.com/ http://wireframes.linowski.ca/ - wireframing bloghttp://wireframes.linowski.ca/

23. Design/CSS: http://reference.sitepoint.com/css - a great CSS resourcehttp://reference.sitepoint.com/css http://www.alistapart.com/ - A List Aparthttp://www.alistapart.com/ http://www.csszengarden.com/ - A great/wonderful inspiration site for design ideas all done with CSShttp://www.csszengarden.com/ http://joshspear.com/ - Josh Spear, great with spotting design trendshttp://joshspear.com/ http://ffffound.com/ - what Delicious is to links, this is to imageshttp://ffffound.com/

24. Leverage Your Online Presence – link to this presentation http://hspva.org/departments/index.cfm?DepartmentI D=9&DepartmentChoice=links High School for the Performing Arts http://hspva.org Westside High School http://westsidewolves.org