Leverage Your Online Web Presence
1 like505 views
The document provides guidance on developing a website, including planning content by brainstorming with key individuals, assigning roles like project manager and designer, creating prototypes like site maps and wireframes, developing initial design templates, getting feedback, iterating the design, building the HTML, adding CSS style sheets, testing the site, and following guidelines for launching on a school or district server. It also includes links to additional resources for storyboarding, wireframing, design, and CSS.
![Leverage Your Online Presence The Web Design Process Duane Dixon – HSPVA -- [email_address] Susan Boone - Westside High School -- [email_address] Houston I.S.D. TechSPAN ‘09](https://image.slidesharecdn.com/leverage-091201130435-phpapp01/85/Leverage-Your-Online-Web-Presence-1-320.jpg)
Leverage Your Online Web Presence
- 1. Leverage Your Online Presence The Web Design Process Duane Dixon – HSPVA -- [email_address] Susan Boone - Westside High School -- [email_address] Houston I.S.D. TechSPAN ‘09
- 2. So you want to have a web site? Now What? 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.
- 3. Design
- 4. 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.
- 5. 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’….
- 6. 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.
- 7. Planning the Content Work from the sitemap and wireframe to develop content.
- 8. Initial Design Templates… Free sites Problem Solving Trouble Shooting CSS Style Sheets… Work with code Plan
- 9. Feedback All of the people involved in providing content needs to check to make sure the team is headed in the right direction.
- 11. Build the HTML Dreamweaver Notepad (Templates)
- 12. CSS ???? Really cool Style sheets add a lot of flexibility. Many available CSS style sheets that are available
- 13. Present to Administration Be sure to include the administration in the development phase. Get feedback from them AGAIN until the site is completed.
- 14. 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
- 15. Launch If the website is stored on the HISD server…check to make sure the guidelines for the district have been followed.
- 16. 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.
- 17. 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
- 18. 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.
- 19. 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 . http://www.w3.org/
- 20. 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
- 21. Links Storyboarding: http://en.wikipedia.org/wiki/Storyboard - Decent article on storyboarding Wireframing: http://www.mstoner.com/index.php/blog/comments/651/pwireframing_paper_wireframing - a great idea http://www.justinmind.com/ - wireframing app for purchase http://hello.hotgloo.com/ - free online wireframing app http://wireframes.linowski.ca/ - wireframing blog
- 22. Design/CSS: http://reference.sitepoint.com/css - a great CSS resource http://www.alistapart.com/ - A List Apart http://www.csszengarden.com/ - A great/wonderful inspiration site for design ideas all done with CSS http://joshspear.com/ - Josh Spear, great with spotting design trends http://ffffound.com/ - what Delicious is to links, this is to images
- 23. Leverage Your Online Presence – link to this presentation http:// hspva.org/departments/index.cfm?DepartmentID =9&DepartmentChoice=links High School for the Performing Arts http://hspva.org Westside High School http://westsidewolves.org
Editor's Notes
- #7: http://en.wikipedia.org/wiki/Storyboard - Decent article on storyboarding http://www.mstoner.com/index.php/blog/comments/651/pwireframing_paper_wireframing - a great idea http://www.justinmind.com/ - wireframing app for purchase http://hello.hotgloo.com/ - free online wireframing app http://wireframes.linowski.ca/ - wireframing blog http://en.wikipedia.org/wiki/Storyboard - Decent article on storyboarding http://www.mstoner.com/index.php/blog/comments/651/pwireframing_paper_wireframing - a great idea http://www.justinmind.com/ - wireframing app for purchase http://hello.hotgloo.com/ - free online wireframing app http://wireframes.linowski.ca/ - wireframing blog
- #9: http://reference.sitepoint.com/css - a great CSS resource http://www.alistapart.com/ - A List Apart http://www.csszengarden.com/ - A great/wonderful inspiration site for design ideas all done with CSS http://joshspear.com/ - Josh Spear, great with spotting design trends http://ffffound.com/ - what Delicious is to links, this is to images