What is your
Web sites content? A
most excellent question that only you can answer. We can describe "types" of
content by category or function, but ultimately, you decide the content.
Start by reviewing
your lists of parameters and specific business functions. (i.e.
parameter: Increase the average sale per customer from $20-30 in the
next three months; Function, put catalog online and distribute online
coupons)
The broadest way
to look at content is to recognize it by type:
|
Text |
|
Graphics |
|
Animations |
|
Video |
|
Sound |
|
Interactivity |
Another way
to plan is to look at the Site content versus individual Page content. This
requires you to have thought about the content as we have been doing
up to this point and to think about the navigation and page layout.
The Site was looked at as an Organizational Scheme and Structure and
we ended up starting to build a storyboard to give us a site map for
navigation and pages of content.
We further this planning
process along by looking at categories of content for inclusion within
a site. Decide how to arrange the content for the site and for
individual pages. Each page might hold unique content, or each page
might offer repetitions/variations of the content or details
further developing the content.
- Repetitive content.
- Unique
content.
- When
do you need page breaks?
- Will customers
scroll?
- What content comes
up onscreen
without
scrolling
In Class: What content might be on webpages?
| |
Text:
|
- captions
- biographies
- direction
|
- product
descriptions
- explanations
- etc
|
| |
hyperlinks |
logos |
menu bars |
| |
Graphics |
thumbnails |
enlargements |
| |
navigation
tools |
tables |
animation |
| |
audio |
video |
streaming content |
| |
site
search engine |
pictures |
??? |
The result of this
planning would be to:
- Create "Content
Maps" - drawings or block diagrams, by hand or on computer,
that show the placement of content on each page and how each page
interacts with other pages (1st, 2nd, 3rd level navigation, etc.).
Content Maps are also known as "mock ups" or "paper
wireframes" (show sample)
- Create an Interactive
Prototype of the Website. You create each page, title it as
planned, save it as its planned filename, create active text links,
test it, and add description to each page of its content and layout.
You would include plans for file folders to organize the pages.
This is also known as a "wireframe." (show
sample)
http://www.cabrillo.cc.ca.us/~dambrosini/DM170_AmbrosiniInteractivePrototype/index.html
Merging Usability,
Design, Organization & Site mapping, and Content:
http://www.bareSquare.com/play/writersblock/
I see content as
divided amongst the categories of
- Main Features,
- Support
Features,
- Special Features,
- Interactivity,
and
- Acknowledgements & Footnotes.
Following
the decisions on what content to include, you will make decisions regarding
the design and presentation of the content. (see Site
and Page Design Tips for Content)
|
Main
Features- |
This
will be the main components that fulfill the Web sites specific
and primary functions, like textual information, products,
thumbnails and enlargements, catalogs, shopping cart, order
forms, price lists, secure or member pages, retrievable database
info, etc. |
|
|
|
Support
Features- |
These
are essential to the customers use and satisfaction when visiting
the site but play a facilitating, auxiliary or support role
for the main features. Examples are FAQ's, Newsletters,
Discussion page, customer information forms, news reports,
calendar of events, site index or map, statement of site security
features, customer reviews, site search tool, downloads and
plugins, alternative formats for content such as PDF files,
archives of past info or activities, text only printable pages,
refund policy, contact methods for further information , etc. |
|
|
|
Special
Features- |
Special
features are for excitement, fun, deliver secondary but related
content, enhance the user's overall experience and round out
your site. They may include feedback forms, job listings,
links, advertising info, interesting articles, Web cams, for-fun
downloads, weather reports, BBB link, classified ad page for
users, etc. |
|
|
|
Interactivity- |
Interactivity
allows the user to command and navigate the content, send and
receive information and take some action that furthers the
purposes of the Web site. Examples include registry forms
to subscribe to a newsletter or receive updates, chat, Threaded
Discussions/Bulletin Boards/Newsgroups, Listserv subscriptions,
searchable indexes, navigational tools, feedback forms, image
maps, visitor added links via form, contests, thumbnail-to-enlargement
links, a gallery to view, 360 degree imaging, virtual
tours, check accounts or shopping cart totals, use a shopping cart,
listen to or view accompanying (text) audio or video clips,
etc., forms, etc. forms, etc. |
|
|
|
Acknowledgements & Footnotes- |
These
are notices and announcements that may have a purpose for legal
or informational reasons. Examples include statements
regarding security, copyright notices, contact information,
webmaster, design credits, source credits, etc. |
| Things
you can do to help your customer with technology |
| Have
a page or note that lists the technology standards that will
work best for your site |
| Create
links for any downloads a customer might need - plugins,
latest versions of browsers, etc. |
| Create
PDF files for all pages or selected sections of pages at
your site for downloading and printing the pages or parts
of the pages (i.e. click here for a printer friendly version) |
| Create
text only and/or non-frames options for pages at your site |
| Create
an alternate HTML site for Flash sites |
| Test
on 14" monitor and in several browsers and versions
of browsers |
| Have "alternate" text
titles for all graphics - alt tags |
| Give
customers non-technology options for certain tasks |
| |
| (add
to this list as class progresses) |
| |
| |
|
| Content
Creation |
|
Software
and hardware needed |
| Static
Graphics & text in digital format (must be converted to JPEG,
GIF & PNG formats in small file size without sacrificing colors,
perspectives or resolutions |
|
cameras,
digital cameras, scanner, copier, fax or fax-modem, color printer
(HP officejet D series all in one?) |
| Dynamic
Graphics & Text, Dynamic Pages, movies, etc.
sonic.mpg
|
|
The
image contains meta-information that allows the user to use it,
view, run, hear, etc., via plugins (applets, scripts and coding
loaded onto your computer). Adobe Acrobat, Apple's Quicktime
(VR & 360 degrees), Real Network's RealPlayers, VRML
(virtual reality modeling language) file format. FlashPix allows
tiled graphics in different formats and resolutions to be stored
and loaded on the Web page for differing uses such as on the
screen, printing it, downloading it, etc.
Premiere,
Director and other timeline editors for movies.
|
|
Web
Page & Web Site creation and management
examples:
http://www.beauregardvineyards.com/
http://www.primalscream.org/
|
|
Web
Page Editors/Authoring tools such as Notepad, FrontPage and Dreamweaver,
Flash. |
| Graphics
Software for optimizing Web graphics, i.e. Adobe Photoshop, Illustrator,
Image Ready, Paint Shop Pro, shareware, etc. |
| Multimedia
Tools - all browsers support DHTML via JavaScript, CGI, and Cascading
Style Sheets but require programming knowledge. MacroMedia Director,
Flash for manipulating graphics (Adobe Premiere), creating
animations and integrating sound (MP3, wav, MIDI) |
| Sound
Software - RealPlayers (RealAudio; RealVideo) from
Real Networks allow streaming audio and video for live and stored
content narrowcasting. |
Making Interactivity
Work - It is one thing to prepare a form, make a graphic or animation,
or design a shopping cart interface. It requires plug-ins to hear
or view, or programs to make the interaction work. The following
are the most common programming tools for forms and interactivity.
|
Data
Processing Tools
|
| CGI
(common gateway interface) script |
Server-side
processing: The first type of scripting program used to add interactivity
via forms. It connects Web pages to databases. It takes the information
from an HTML form and interprets it for the server. A common
example would have the form interact with a database to complete
an order and create and send a confirmation page to the buyer
onscreen. Most are free from your Web Host, from archive sites
on the WWW or are included with your Web authoring software.
Must be available at or accepted by your Web host server. |
| PERL,
C++, Python |
Server-side
processing: Programming languages to write the scripts required
to run a CGI program. They produce executable file, e.g.
files created in a format that can run on your computer independent
of the language in which it is written. |
| Active
Server Pages (ASP's) |
Server-side
processing: A Microsoft, server-side product that creates Web
pages upon the request of the customer from databases. |
| ActiveX |
Client-side
processing: Microsoft's answer to Java; runs in Internet Explorer
and newer versions of Netscape and tells the computer how information
is shared between applications by creating "ActiveX controls" (objects).
Work only on computers running Windows, unlike Java and JavaScript. |
| Java
Applets |
Client-side
processing: Run compiled programs on the client workstation |
| Web
page Programming Tools |
| JavaScript,
VBScript |
A
fairly simple scripting language that will run on Internet Explorer,
Netscape and some Web servers. |
| JScript |
Microsoft's
answer to JavaScript and adds a little in terms of commands. |
| Java,
PHP |
A
complicated, fully developed programming language for interactivity
and will run on the browser or the Web server. Creates Java Applets
that can do animations, interactivity, computations, communications,
etc.( like chat and real-time conversations, crossword puzzles,
mazes, interactive or static animations, etc.) |
| Special
scripting languages |
Microsoft
FrontPage and Dreamweaver are HTML authoring tools that create
interactive scripts using their own languages and file extensions.
The Web server must support its extensions. |
| Plug-ins |
Plug-in
programs enhance the Web browsers ability to display and run
multimedia, i.e., video, animations, audio, etc. (Flash,
Shockwave, RealPlayer, QuickTime, etc.) |
| Example
of CGI & ASP |
asp.html |
|
Database
Management System Tools (DBMS)
|
|
Jet
(Access), Oracle, SQL, MYSQL
|
Database Management
System building
tools
|
|
Access,
Oracle, SQL Server
|
OBDC
drivers (open database connectivity)
|
|
Access,
FileMaker, Quickbooks, etc.
|
database
client applications
|
You can see
that a major problem is that not all browsers support all the common programs,
or don't support them equally well. Also, many are very difficult to
use and take professional skills. Additionally, even FrontPage and
CGI scripts, which can be used by any browser, must be usable by the
Web Host server's operating system (UNIX, Mac Windows NT). |
