systems engineering army politechnic school latacunga - ecuador technical english

SYSTEMS ENGINEERINGSYSTEMS ENGINEERING

ARMY POLITECHNIC ARMY POLITECHNIC SCHOOLSCHOOL

Latacunga - EcuadorLatacunga - Ecuador

TECHNICAL ENGLISHTECHNICAL ENGLISH

Integrants:Integrants:

Ricardo MongeRicardo MongeElizabeth GalloElizabeth GalloOswaldo MontalvoOswaldo Montalvo

Principle #1Principle #1

Just because you can do it,

doesn’t mean you should do it.


Know your audience and have a clear goal

for your Web site.


Don’t post an “under construction” graphic after you’ve published your URL. In the words

of Nike… Just Do It!Oh! …and no BLINKING!

Steps to a well designed Steps to a well designed Web siteWeb site

Have a goalHave a goal Target your audienceTarget your audience Create a planCreate a plan Select a Web service providerSelect a Web service provider Try it outTry it out Maintain itMaintain it

Have a goal for your web siteHave a goal for your web site

What were you put on earth to What were you put on earth to accomplish?accomplish?• review your mission statementreview your mission statement

Do you want your web site to Do you want your web site to accomplish all or some of those things?accomplish all or some of those things?• the more goals, the more difficult the task the more goals, the more difficult the task

becomesbecomes What information do you need or want What information do you need or want

to provide?to provide?

Identify your target audienceIdentify your target audience Who is the information for? Who is the information for?

• Do you have more than one audience?Do you have more than one audience?• Can you serve them all with one Web Can you serve them all with one Web

site?site? What are the information needs of your What are the information needs of your

audience?audience? What are their habits, characteristics, What are their habits, characteristics,

culture, technical capabilities, etc.culture, technical capabilities, etc.• Are they likely to start with the Web or Are they likely to start with the Web or

another information source?another information source?

Plan it outPlan it out

Identify information you already provide Identify information you already provide your audience.your audience.

Identify information that you haven’t, but Identify information that you haven’t, but would like to provide your audience.would like to provide your audience.

Identify the sources of information you Identify the sources of information you want to provide through your Web site.want to provide through your Web site.• Prepare that information for the web by Prepare that information for the web by

collecting it and converting it.collecting it and converting it.

Plan it outPlan it out

Develop a vision for your Web site and Develop a vision for your Web site and storyboard it before construction begins.storyboard it before construction begins.

Share your vision and storyboard with your Share your vision and storyboard with your colleagues and your bosses.colleagues and your bosses.

Estimate initial times and costs for Estimate initial times and costs for construction.construction.• Decide on the software/hardware tools Decide on the software/hardware tools

necessary to construct your site.necessary to construct your site.

Select a Web service providerSelect a Web service provider

Coordinate the method for publishing Coordinate the method for publishing and updating your Web pages.and updating your Web pages.• email filesemail files• mail files on floppy diskmail files on floppy disk• FTP filesFTP files

Know your root address (domain Know your root address (domain name).name).

Will you have a need for scripting and Will you have a need for scripting and database interaction?database interaction?

Try it out:Try it out:Optimize it for your audienceOptimize it for your audience

Test it in-house.Test it in-house. Test it on a sample audience.Test it on a sample audience. Test it on as many different computers Test it on as many different computers

and monitors and browsers as and monitors and browsers as possible.possible.

Test it using various Internet Test it using various Internet connections.connections.• ModemsModems• Direct connectsDirect connects

Too many graphics for most home users.

Few graphics makes it more accessible to everyone.

Maintain itMaintain it

Dates need to be correctDates need to be correct Services need to be up-to-dateServices need to be up-to-date Hours must be correctHours must be correct People’s names, email addresses & People’s names, email addresses &

phone numbers need to be correctphone numbers need to be correct Prices need to be correctPrices need to be correct Explore new technologies & Explore new technologies &

encourage innovationencourage innovation

This document is “living” …in the past.

Characteristics of a Characteristics of a good web sitegood web site

Well-organizedWell-organized Easy to navigateEasy to navigate AttractiveAttractive UsefulUseful Up-to-dateUp-to-date

Make your site well-organizedMake your site well-organized

Decide how you want to organize Decide how you want to organize your information based on your your information based on your users and what you know about themusers and what you know about them

Ways to organize your site:Ways to organize your site:• by department or organizational chartby department or organizational chart• by audience typeby audience type

marketingmarketing

• by subjectby subject

Organized by department.

Organized by audience type.

Organized by subject.

Make your site Make your site easy to navigateeasy to navigate

A well-organized generally drives the A well-organized generally drives the ease of navigation.ease of navigation.

Keep scrolling down to a minimum by Keep scrolling down to a minimum by keeping individual Web pages short.keeping individual Web pages short.

Always have links back to your home Always have links back to your home or major sections.or major sections.

Use color to identify for users where Use color to identify for users where they are in your site.they are in your site.

No scrolling necessary to start navigating.

Standard tool bars and a brief menu for easy navigation.

Make your site attractiveMake your site attractive

Choose simple colors that compliment Choose simple colors that compliment each other & work on most web browsers.each other & work on most web browsers.

Keep graphics less than 20,000 Bytes Keep graphics less than 20,000 Bytes (20 kilobytes) to make them download (20 kilobytes) to make them download reasonably on a home modem.reasonably on a home modem.

Keep animated gifs to a minimum.Keep animated gifs to a minimum. Use graphics that compliment your image.Use graphics that compliment your image.

An example of a very unattractive site (best viewed online).

Toyota provides a balanced, attractive Web site.

Avoid backgrounds that wash out your text.

Make your site usefulMake your site useful

If you are unique, you’re already useful!If you are unique, you’re already useful! If you are not unique, how do you differ If you are not unique, how do you differ

from similar Web sites?from similar Web sites?• Is your content unique?Is your content unique?• Is your approach unique?Is your approach unique?• Is your audience unique?Is your audience unique?• Are you more up to date?Are you more up to date?• Are you better organized?Are you better organized?• Are you more comprehensive?Are you more comprehensive?

Keep your site up-to-dateKeep your site up-to-date

In an organization, make this part of In an organization, make this part of someone’s job. Pay them to do it. someone’s job. Pay them to do it. It’s worth it.It’s worth it.

If a person is currently the If a person is currently the “documentation person” or the “flier “documentation person” or the “flier person,” consider that person to be person,” consider that person to be your Webmaster.your Webmaster.

Ways to present informationWays to present information

Hierarchical organizationHierarchical organization Image mapsImage maps TablesTables FramesFrames

Hierarchical organizationHierarchical organization

Menus in progressive order of most Menus in progressive order of most general to more specificgeneral to more specific

ProsPros• always gives impression of organizationalways gives impression of organization

ConsCons• Not really necessary unless you have a Not really necessary unless you have a

collection of somethingcollection of something• Makes user travel through a number of Makes user travel through a number of

levels to get to their informationlevels to get to their information

Hierarchical organization.

Image MapsImage Maps

Links are in an image or pictureLinks are in an image or picture ProsPros

• Allows for greater artistic creativityAllows for greater artistic creativity• Don’t need to use browser-dictated Don’t need to use browser-dictated

fontsfonts ConsCons

• Takes longer to downloadTakes longer to download• Can be tricky to set upCan be tricky to set up

Imagemaps can provide easy means of navigation.

TablesTables

Standard text, images or links are Standard text, images or links are arranged in tabular format with or arranged in tabular format with or without borderswithout borders

ProsPros• Allows creator to place items on a pageAllows creator to place items on a page• Looks neatLooks neat

ConsCons• Can be tricky, but tables are amazingly Can be tricky, but tables are amazingly

useful to the designer.useful to the designer.

Tables provide Web designers with control over layout.

Tables also provide simple organization of information.

FramesFrames

Divides the browser's window into Divides the browser's window into two or more scrollable areastwo or more scrollable areas

ProsPros• Can provide an area that makes Can provide an area that makes

updating or changes very simpleupdating or changes very simple• Can help with navigationCan help with navigation

ConsCons• Used improperly can make a huge Used improperly can make a huge

mess!mess!

Frames can be used to provide a static navigation window.

Static navigation windows can be along the bottom.

Tips for framesTips for frames

Use in a site that rarely, if ever, goes Use in a site that rarely, if ever, goes out to other links on the World Wide out to other links on the World Wide Web.Web.

Use a frame to hold a static banner Use a frame to hold a static banner at the top or bottom.at the top or bottom.

Use a frame to hold a navigation bar Use a frame to hold a navigation bar at the top, side or bottom of your at the top, side or bottom of your Web site.Web site.

General Things to General Things to Remember & ConsiderRemember & Consider

Emulate a site you like.Emulate a site you like. Try your color scheme before you get Try your color scheme before you get

too far.too far. Keep things simple.Keep things simple. Use the ALT attribute in the IMAGE tagUse the ALT attribute in the IMAGE tag

• provide alternatives to framed sites and provide alternatives to framed sites and graphic intensive sitesgraphic intensive sites

Provide a search function if possible.Provide a search function if possible.

Test text colors against background colors.


Avoid requiring users to fill out a Avoid requiring users to fill out a form to gain access to your site.form to gain access to your site.

Avoid a counter unless you Avoid a counter unless you knowknow that that will enhance your site will enhance your site andand that the that the number will impress whoever it’s number will impress whoever it’s supposed to impress.supposed to impress.

Don’t link to something that is Don’t link to something that is goinggoing to exist in the future.to exist in the future.


Avoid having more than one Avoid having more than one spinning, whirling, clicking, moving spinning, whirling, clicking, moving icon or graphic on a page.icon or graphic on a page.

Make hyperlinks intuitive so as to Make hyperlinks intuitive so as to avoid the avoid the click hereclick here text. text.

Don’t advertise other products or Don’t advertise other products or companies unless it meets your goal, companies unless it meets your goal, generates revenue or helps your generates revenue or helps your audience.audience.


Avoid detracting from the image of Avoid detracting from the image of your excellent Web site by posting all your excellent Web site by posting all of your awards on the front page.of your awards on the front page.

Provide text toolbars when Provide text toolbars when appropriate.appropriate.

Provide templates to multiple Web Provide templates to multiple Web developers to maintain a consistent developers to maintain a consistent look.look.

Develop standards for your Web site.Develop standards for your Web site.

Avoid littering your opening page with your awards.

Awards hidden away on their own page is okay.


Limit fonts and headings on each Limit fonts and headings on each Web page.Web page.

Attempt to use HTML tags that have Attempt to use HTML tags that have layout built-in to ensure a layout, layout built-in to ensure a layout, such as a hierarchical listing.such as a hierarchical listing.

If you are familiar with hard-copy If you are familiar with hard-copy page layout principles, use them in page layout principles, use them in Web design.Web design.

Remember Your Remember Your Hard-Copy Publishing RulesHard-Copy Publishing Rules

For example…For example…• Provide white space for easy readabilityProvide white space for easy readability• Limit font usage and typeface usageLimit font usage and typeface usage• Limit text column widthLimit text column width• Balance graphics and text on a pageBalance graphics and text on a page• Use complimentary colors with contrastUse complimentary colors with contrast• Standardize on a heading font and text fontStandardize on a heading font and text font• Balance the page layout with top/bottom Balance the page layout with top/bottom

and right/left marginsand right/left margins

Clearly and ConsistentlyClearly and Consistently Identify your site Identify your site

Banner graphicsBanner graphics Signature iconsSignature icons Links to local home pagesLinks to local home pages

Essential Elements forEssential Elements for Every Page Every Page

Organization or institutionOrganization or institution Author or person to contactAuthor or person to contact Link to local home pageLink to local home page Date created or revisedDate created or revised Copyright statementCopyright statement

Suggested Page ElementsSuggested Page Elements

Organization’s logo or sealOrganization’s logo or seal Author’s e-mail addressAuthor’s e-mail address Mailing address, phoneMailing address, phone Document’s URL (helpful when Document’s URL (helpful when

printing)printing) Links to related local pagesLinks to related local pages Navigational aids: button/text barsNavigational aids: button/text bars

Go to Multimedia ExampleGo to Multimedia Example

systems engineering army politechnic school latacunga - ecuador technical english

Documents