outline
Download
Skip this Video
Download Presentation
Outline

Loading in 2 Seconds...

play fullscreen
1 / 42

Web Design for Schools - PowerPoint PPT Presentation


  • 235 Views
  • Uploaded on

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. Needs Assessment. Who is your audience?.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Web Design for Schools' - PamelaLan


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
outline

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
who is your audience

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
who is your audience3

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.
who is your audience4

Needs Assessment

Who is your audience?
  • Parents
  • Volunteers
  • Staff
  • Students
  • Media
  • Job seekers
  • Families considering relocation
  • Outside groups
who is your audience5

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
who is your audience6

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
who is your audience7

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
who is your audience8

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!

who is your audience9

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.

who is your audience10

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
who is your audience11

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
who is your audience12

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
stuff for every site

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.
stuff for every site14

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…
definitions

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.
static site

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
dynamic site

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
software options

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
who s job is it

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.)
who s job is it20

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
research shows

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
research shows22

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
good practices

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
good practices24

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
good practices25

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
behind the scenes

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
formats

Graphics

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

Graphics

JPG vs GIF

Best for logos

GIF

6K

JPG

6K

Best for photos

working with images

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
understanding resolution

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
understanding resolution31

Graphics

Understanding Resolution
  • Pixels are the “dots” that make up digital screen imagery
the downloads

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
communication

Buzz Technologies

Communication
  • Blog
  • Bulletin Board
  • Chat Room
  • Forum/Discussion Board
  • Digest
  • Chat Room
subscription news

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
multimedia

Buzz Technologies

Multimedia
  • Streaming Video
  • Streaming Audio
  • Webinar
  • Podcast
  • Flash Animation
authoring

Buzz Technologies

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

Buzz Technologies

ADA Accessibility
  • W3C 508 Compliance
  • Bobby Compliance: A, AA, AAA(www.cast.org/bobby)
2 part approach

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
find help online

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;
find help online40

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
examples

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
james scofield

Contact Me

James Scofield
  • James [email protected]
  • This presentation online:www.michiganedusource.org then go to Communication Tools
ad