Outline

1. Websites for Schools Outline • Needs Assessment • Static vs. Dynamic Technology • Web Maintenance Roles • Layout & Design Basics • Graphics • Buzz Technologies • Resource Files (downloads) • Security • Additional Resources

2. Needs Assessment Who is your audience? • Take a momentThink about how you look at web pages. What takes you there? • Portal pages: Open to new info • Favorites: Familiar routine • Info-seeking: Looking for specific answer or resource (95% schools) • Leisure Surfing: Following thread of connected interests

3. Needs Assessment Who is your audience? • People on a missionWeb is different from print news. People come to a site with very specific questions in mind. They are scanning for key words, not reading for content.

4. Needs Assessment Who is your audience? • Parents • Volunteers • Staff • Students • Media • Job seekers • Families considering relocation • Outside groups

5. Needs Assessment Who is your audience? • Parents • Not only what type of information, but how it’s presented • Announcements: School closings, Special Alerts, etc. • Support organizations: Band Boosters, PTA, volunteer groups • Complaints: How to contact the people they need • Resources: Registration forms, Permission slips, etc. • Calendar: Parent-Teacher conferences, holidays

6. Needs Assessment Who is your audience? • Parents Good news: • Highlight staff in personal way • “Feel good” blurbs about teams/ programs/ events • KEEP IT SHORT! They may not come seeking this info, but it’s a good way to share the positive if it’s presented well

7. Needs Assessment Who is your audience? • Volunteers • Looking for the group or event they are involved with • Permanent section for groups or temporary announcements of “hot topic” events

8. Needs Assessment Who is your audience? • Staff • Intranet vs. Internet • Remote access email • Site maintenance, update • Teachers • Gradebooks, Assignments, Attendance • Presentations • Professional Development Password protected security!

9. Needs Assessment Who is your audience? • Students • Consult district policy, explore legal risks, seek parent consent, and provide internet security • Classroom assignments, teacher-led content, links to resources With the growing popularity of web resources and the increasing variety of functionality, students and teachers will seek outside sites for functions not offered on district site. Take that into consideration when exploring liability and cost issues.

10. Needs Assessment Who is your audience? • Media • Contact information for spokespersons • Superintendent • Principals • Public Relations • Press releases • Proactive information sharing • Formatted for public consumption • Photos • Hi-quality print quality and web optimized • portraits of supt & key staff • Events, teams, newsworthy activities

11. Needs Assessment Who is your audience? • Families Considering Relocation • Community Demographics • State Report Card • Graduation rates • Contact info • Special programs for students, families • Real estate links • Links to community incentives

12. Needs Assessment Who is your audience? • Outside Groups • Adult education • Community events, elections, Scouts, Churches, etc. that may use school property for non-district functions • Maps & Directions • Contact info

13. Needs Assessment Stuff for every site • Contact informationGeneral contact on every page, area-specific on Contact page • Maps & directionsto buildings and other areas events or services might occur • Personnel bioskey people that parents and media will want to “get to know” – supt, board, etc.

14. Needs Assessment Stuff for every site • Calendar of events • Announcements & current newsHome page location for posting school closings, deadlines, etc. • SearchSite-specific or web-wide • Policies & general info • FAQ • Links Partners, ISD, Community…

15. Static vs. Dynamic Definitions • Static site is developed & maintained with editing software and does not allow user interaction. “Online Brochure” strategy. • Dynamic site has features that respond automatically to user input and/or database edit.

16. Static vs. Dynamic Static site • Benefits of static site • Less expensive start-up • Flexibility in appearance • Greater control at a hands-on level • Minimal security risks • Introductory technology for students

17. Static vs. Dynamic Dynamic site • Benefits of Dynamic site • Greater range of features • E-commerce, RSS feeds, Blogs and other communication, directories, surveys, gradebooks, sign-ups… • Can be edited/updated from any online source • Multiple people can be assigned content responsibilities • Minimal training/software

18. Static vs. Dynamic Software options • Web design software • Macomedia Dreamweaver (Adobe) • Adobe GoLive • Microsoft FrontPage • Graphic software • Adobe Photoshop / ImageReady • Macromedia Fireworks • Other • Adobe Acrobat • Microsoft Office • Macromedia Flash

19. Maintenance Roles Who’s job is it? • Class Poll • One person does all updating district-wide • One person for each building • Roles divided by content specialists (Public Relations, Curriculum, Technology Dept, Supt, Principals, Students, etc.)

20. Maintenance Roles Who’s job is it? • Decide during design phase some ideas of how content will be managed, reviewed, and updated. • Time-intensive and important responsibility • Policy should provide formal guidance for intent, restrictions, and standards for web content • Keep material current

21. Layout & Design Research shows… • Web viewing patterns are very different from traditional media • Scanning for key words in expected places • Predictable locations, terminology, and colors are critical to easy navigation • Images, icons, and identifiable navigation items draw attention

22. Layout & Design Research shows… • Hot Spots on the page (in order) • Upper-left corner • Down the left-side, top to bottom • Along the top, “title area” • Right side (only if identifiable navigation exists) • Upper-center of screen scanning for body material • Lower part of screen • Scrolling downward

23. Layout & Design Good Practices • Keep messages shortPeople don’t read sentences until reaching final destination or if lost • Use familiar clear terminology in navigation (“Student Council” or “Lion’s Den” depending on your audience) • Standard fonts (arial, verdana, helvetica, times) • Identify the page you’re on

24. Layout & Design Good Practices • Position navigation in predictable areas (top, left, right) • Contact info on every page • Printer friendly (80%, 550 pixels) • Site unity: Every page should have the same “look” and navigation should remain consistent • Cross linking allows visitors to locate resources from a variety of angles and stages of their search

25. Layout & Design Good Practices • Special instructions for unexpected or complex features (ex. Long download time or plug-in required) • Avoid broken links or graphics • AVOID ALL CAPS in excess • Left justify blocks of text • Only underline links • Fresh content • Alt tags provide Bobby Compliance & helpful roll-over info to visitors

26. Layout & Design Behind the scenes • Code is important • Search engines look for Page Titles, Object Descriptions, Alt Tags, and Key Words in meta information to determine results • They also scan file names such as embedded graphics and associated PDFs, forms, and other documents • Random “googling” may not be important to school sites but searchability is

27. Graphics Formats • Download time vs. quality • Formats • JPG (photos) • GIF (logos, text, icons) • Animated GIF (use sparingly if at all)

28. Graphics JPG vs GIF Best for logos GIF 6K JPG 6K Best for photos

29. Graphics Working with images • Background images are generally out of fad and present design complications • Animated graphics are distracting, out of fad, and should be used sparingly • Images should be optimized in Photoshop, not resized in web editing software

30. Graphics Understanding Resolution • Image Resolution is the sharpness or detail of an image. Ratio of pixels per inch. Digital = 72ppi (96) • Screen Resolution is the total numbers of pixels that comprise a monitor’s viewing screen • 800px X 600px or 1024x768 for monitors • 256x256 on some handhelds/phones • Compression is the amount of quality sacrificed to shrink the file size (download time) of an image

31. Graphics Understanding Resolution • Pixels are the “dots” that make up digital screen imagery

32. Resource Files The Downloads • PDF: Viewable across platforms, not easily editable • Word: .doc vs. Save For Web • Excel: .xls vs. Save For Web • PowerPoint: .ppt/.pps vs. Web • Scans: JPG, GIF, PDF • Video: stream vs. download (provide controls) www.gomasa.org/EnergyWise/e2007-10/e2007-10g.htm • Audio: stream vs. download

33. Buzz Technologies Communication • Blog • Bulletin Board • Chat Room • Forum/Discussion Board • Digest • Chat Room

34. Buzz Technologies Subscription News • RSS = Really Simple Syndication • Listserv • Distribution Group vs Discussion Board • Spam filtering • Opt out • E-Newsletterwww.gomasa.org/EnergyWise/e2007-10/e2007-10.htmwww.gomasa.org/ldr/2007/ldr102607/ldr102607.htm

35. Buzz Technologies Multimedia • Streaming Video • Streaming Audio • Webinar • Podcast • Flash Animation

36. Buzz Technologies Authoring • HTML • Javascript / Applets • Dynamic / Data Driven (XML, DNN, PHP, ASP…) • CSS (Cascading Style Sheets) • Tables • Frames • Templates • Cookies • Pop-ups

37. Buzz Technologies ADA Accessibility • W3C 508 Compliance • Bobby Compliance: A, AA, AAA(www.cast.org/bobby)

38. Security 2-Part Approach • Security needs to be considered a 2-part approach • Policies and practices in design, use, and maintenance • Technology and software • E-commerce (www.paypal.com) • SSL = Secure Socket Layer • Filters, Firewalls

39. Resources Find Help Online • Right-click, View Source for source code • Web developers: www.schoolwires.com;www.foxbright.com;http://ltgi.net; • Classroom Management Systems:www.powerschool.com;www.finalsite.com; www.renweb.com;

40. Resources Find Help Online • Listservs:www.lyris.com; www.lsoft.com; www.infacta.com; www.constantcontact.com • Calendars: www.webcalendarcreator.com; www.localendar.com • General info, tips, add-ons: www.bravenet.com; www.pcmag.com; www.freescripts.com

41. Resources Examples • Oakland ISD: www.oaisd.org • Rochester Community Schools: www.rochester.k12.mi.us • Bloomfield Hills: www.bloomfield.org • Huron Valley: www.huronvalley.k12.mi.us • Ann Arbor Public Schools: www.aaps.k12.mi.us • Mona Shores: www.monashores.net

42. Contact Me James Scofield • James Scofieldjscofield@gomasa.org517.327.9259 • This presentation online:www.michiganedusource.org then go to Communication Tools