 |
 |
 |
|
Coordinating and assessing
HTML production resources takes experience. What
is the level of expertise necessary to successfully
produce and launch your site?
Assessment and assigning of resources was handled in
the Define phase of the project, however now is a good
time to review and confirm that the team is suited to
the job. Are they up for the challenge? Will you be
creating HTML pages or templates? Preparation and organization
will allow for efficient productionthat is, setting
standards to touch each HTML page or
template as infrequently as possible.
Take a moment to assess the project status. Pre-production
is a chance to take a step back and see where you are
in regard to time, budget, scope and expectations. Determine
how many hours you have budgeted and used thus far for
all phases of the development process. Compare your
initial projections to your current reality. Do you
have enough time left to complete the site? Make sure
the scope of the project has not increased due to additional
wish list items and unforeseen technology issues.
Meet with the client to review project status.
If you are in a design firm, be sure to outline any
AC's
(additional charges) as applicable for any client-initiated
changes. Review audience needs (target browsers, screen
size and connection speeds), technology (light scripting,
plug-ins), content status (is the content going to be
ready in time?) and design templates (will they need
to be altered by the design team prior to production?).
|
Coordinating
Production
|
|
In any project, you need the right tools for
the job at hand.
A WYSIWYG editor (What You See Is What You Get)
is an automatic drag and drop HTML editor for
people with little to no understanding of basic
or complex coding. An HTML editor works well for
the creation of static sites with little functionality.
Dreamweaver
4 offers both WYSIWYG and HTML editor capabilities.
The more complex the functionality (light scripting,
frames and complex tables usage), the more you
will need to rely on experienced developers and
programmers to code the site by hand with the
knowledge required to troubleshoot problems.
|
| |
| Page
vs Template |
|
What is the difference between a page and a template?
An HTML page is an independent document that
is created with all content in place referenced
directly by a browser. Usually it will have an
.html or .htm extension.
An HTML template is sometimes referred to as
a shellit is an HTML page which is divided
into components or sections (header, body, footer)
that is used for dynamically populated sites (sometimes
referred to as "on the fly"). The template
or shell can be used to hand off to another development
team for their own HTML page creation. Dreamweaver
4 has pre-designed templates to help build
out static pages quickly.
|
|
| |
 |
|
Before starting actual production, take time to readdress
the expectations, assumptions and deliverables originally
used to determine the scope of the project.
Perform a time check to see
how many hours have been used to date, and how many
resources and hours are necessary to complete the site's
production, through launch. The project was started
with some assumptionsa certain number of pages
or templates for the site, a certain amount of light
scripting (for rollovers, frames, etc.)
This phase of production is usually one of the gray
areas when estimating time. Each page or template usually
takes from eight to twelve hours (sometimes as long
as 2 days per piece for complex tables, frames or light
scripting.) Subsequent pages based on a similar look
and feel can be produced in a shorter amount of time.
Multiplying out the template creation and then the actual
page creation or back-end integration, days and resources
can add up quickly. An original estimate of 100 hours
can easily become 300 hours if the complexity of the
site was underestimated.
Whether you work for a corporate Web team or a design
firm, this time and resource reevaluation is necessary
for managing client expectations, and will help you
to better estimate future projects as you gain more
experience.
|
Time
Check
|
|
Tracking time on a weekly basis is key to keeping
a project on target and knowing when you have
issues of "scope creep".
Comparing "time allocated" in the original
statement of work, and the "time used"
from weekly summaries will allow you to quickly
assess if you have enough time and money to complete
your project.
Clients who are aware of the time and how it
is spent during a project will be much less surprised
if the budget or schedule needs to increase during
the production phase. If there is a significant
increase and you are working in a design firm,
you may need to submit an AC
form for the additional charges. If you are
working for an in-house Web team, you may need
to get more resources assigned to the project,
or extend the schedule if possible.
If your project is well documented and hours
have been tracked (along with client-initiated
changes and late content), you should be in a
great position to reevaluate and negotiate for
additional funds, time or resources.
|
|
| |
 |
|
At this stage of development, technical considerations
may have changed from original specifications.
Readdress the technical requirements of the project.
Revisit your basic technical requirementstarget
audience, screen size, browsers and platforms. Frames
or no frames? Light scripting needs? Plug-ins? Is this
a static or dynamic Web
site? Will this site need to be created as HTML templates
and then handed off to another team for additional production
and implementation? Who is your contact for the application
development, and what schedule are they on for testing
and integration?
Make sure everything is moving in the right directiona
lot can change from the client's first thoughts to the
current realities of site production.
|
Static
or Dynamic
|
| You
will already know at this point if you are creating
a static site (independent HTML pages, each with
an .html or .htm extension) or a dynamic site (created
by pulling pieces of the page together using a standard
header and footer, and populated with database content.)
Depending on the type of site you are creating,
you may either be independent of, or working closely
with, the application development team. |
|
| |
 |
|
Working with a team of HTML production artistsespecially
remotely over an FTP connectionrequires careful
coordination and organization.
If you have 3 or more people working on the HTML of
your site, you will want to have some kind of established
method of version control in place to avoid writing
over files or duplication of efforts. Dreamweaver
4 has a Check In/ Check Out feature that enables
you to require each user to check files in and out,
along with a feature that enables you to include design
notes for others to understand the purpose, status,
and direction of the development.
Establish very clear methods to indicate when a file
is being worked on, as well as methods of backing up
all files, as there is always a chance of overwriting
something that is being revised or modified.
Have a system. Be clear with the team. Organize and
backup. Allow FTP access to key individuals only.
|
| |
 |
|
Organize your file structure and set naming
conventions as established during the Structuring
phase. Before you start, you will need to work with
your HTML coders to determine how you will set up and
maintain the site structure.
Failure to structure from the beginning may result
in images in various folders, with duplicated files
and general confusion. It can also wreak havoc with
any Web applications or traffic monitoring that may
be in place. A messy folder structure is something to
avoid.
Think about how the site will need to be organized
in order to be easily maintained and as scalable as
possible. Agree on naming conventions for the folders
and files within. Will all images be in the root folder?
Will there be separate image folders for each main section?
As the project manager, your role is to communicate
the client's goals to the production team as early as
possible to allow establishment of clear methods of
directory and folder structure.
|
| |
| The
folder structure below is set up so all of the site's
images are in one folder at the root level. This method
is good for small sites needing very little maintenance. |
 |
| Full
size image |
| |
| The
folder structure below is set up so images are contained
within each section of the site. This method is good for
large sites needing a lot of maintenance and updating
for each particular section (in this case, every 1-2 months). |
 |
| Full
size image |
| |
|
Naming
Conventions
|
|
Determination of a convention for HTML naming
style is usually made based on the production
team's preference.
Some prefer to write everything outno longer
adhering to the old eight-dot-three standard (unless
you are UNIX based, then you will need to adhere
to the old standard and be case sensitive as well.)
Some prefer "aboutthecompany.html" vs.
"about.html" . Try to avoid falling
into the trap of "AboutTheCompany.html".
Using key caps will only be another convention
to remember.
Whatever the preference, set it and stick to
it from the get go.
For dynamic sites, HTML naming conventions don't
apply directly, but discipline is still required.
Pages are divided and individual sections can
be called out as "header," "footer,"
"main," "navigation" and so
on. Be descriptive, but keep it simple.
|
|
| |
 |
|
How often will you be changing content? Daily? Monthly?
Will it be an automatically posted change? How will
you be archiving material? Who will be maintaining the
site? How HTML savvy is the maintenance team? What tools
will they be using? Understanding how often the site
will be updated and the complexity of the updates will
help to determine how the site will be structured and
built.
If you have a highly complex site needing major changes
on a daily basis, you will need to think about site
maintenance and how it can be addressed during the pre-production
phase in order to cover all needs and issues.
If you have a site changing globally weekly, you might
want to think about creating your site using templates,
style sheets or includesseparate HTML pages or
data that is plugged into your site in chunks without
having to rebuild the entire page. JavaScript, CGI and
CSS (cascading style sheets, for 4.0 browsers and above)
can also aid in automated updating.
|
| |
|
Includes
|
|
To make life easier, you can start thinking about
using includes to help create globals which can
be altered easily if there are changes as the
site production continues.
An include is a self-contained piece of code
that can be created and stored independently from
the documents it appears in. An example is a footer
or copyright that needs only to be created once
and referenced via HTML to every page in the site,
allowing for easy global edits and site-wide changes.
There are also functionality globals created in
JavaScript and formatting standards that can be
applied globally using CSS (cascading style sheets.)
The tag used is <!--#include
. >
|
|
| |
|
|
|
|