Transcript web_pres_boone

TechSPAN ‘09
Leverage Your Online Presence
The Web Design Process
Duane Dixon – HSPVA -- [email protected]
Susan Boone - Westside High School [email protected]
Houston I.S.D.
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.
Design
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.
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’….
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.
Planning the Content
Work from the
sitemap and
wireframe to
develop content.
Initial Design
Templates…
– Free sites
– Problem Solving
– Trouble Shooting
CSS Style Sheets…
– Work with code
– Plan
Feedback
All of the people involved in
providing content needs to
check to make sure the
team is headed in the right
direction.
Iterate
Iterate
Iterate
Build the HTML
• Dreamweaver
• Notepad
• (Templates)
CSS ????
Style sheets add
a lot of flexibility.
Many available
CSS style sheets
that are available
Really cool 
Present to Administration
Be sure to include the administration in the
development phase. Get feedback from them
AGAIN until the site is completed.
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
Launch
If the website is
stored on the HISD
server…check to
make sure the
guidelines for the
district have been
followed.
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.
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
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.
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/
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
Links
Storyboarding:
• http://en.wikipedia.org/wiki/Storyboard - Decent article on
storyboarding
Wireframing:
• http://www.mstoner.com/index.php/blog/comments/651/pwir
eframing_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
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
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