MTNA Conference Tricks and Technique Updates

by John Kuzmich, Jr.

March 27, 2004

HTML - HTML stands for Hyper Text Markup Language. A “markup language” is a computer language that describes how a page should be formatted. HTML allows you to change fonts, add colors, create headlines, and embed graphics in your pages. Tags are use to qualify the HTML formatting commands/codes).

Technical Tips for Preparing To Build Your Site

• Diagram Your Site on how each page links to the others

• Create a folder for your web site on your hard drive or network drive
  
• Use a text editor to type in most of the tet youj want on your web pages
  
• Scan or prepare any photos or graphics. Use GIF or JPEG file format.

HTML File Names

• No spaces in them. File needs to end in HTM or html. File names are case sensitive.

What Do You Need?

• A computer
  
• Multiple browsers
  
• Multiple platforms
  
• Different sized monitors
  
• An Internet connection
  
•  A Text Editor
  
• Web authoring software
  
• A scanner and/or digital camera with image editing software
  
• File conversion software to convert youjr graphic files into JPEG or GIF files.
  
• Animated GIFS
  
• Video capture equipment
  
• Audio editing equipment

Tricks

• Convert word processing files into HTML
  
• Converting PowerPoint presentations to HTML
  
• Convert documents to PDF with Adobe acrobat or WordPerfect

Understanding HTML

• Popular tags in pairs with blackets: < and >

Frames

• Frames are essentially web pages within web pages and are useful in giving the web author control over what they want their users to see.

HTML Tutorial

• Need an ASCII editor and a browser
  
• Type the following text with HTML codes
  
• Save the file and View the document in a web browser provided you saved the file as an html file.
  
• Now do the same thing in a word processor and view it in a browser
  
• Now do the same thing in Netscape Composer.

Web sites That Build Web Sites: Web Publishing Services)

• They include clip art, graphics tools and automatic transfer of your files to their server and usually free. Can’t use them for commercial purposes. They have limited amount of server space. GeoCities allows 15 MB.
• 
  
• Geocities: Page Wizards with blank pages and PageBuilder which offers templates for you to customize.
  
• AOL
  
• CompuServe
  
• Apple’s iTools Home Page
  
• School pages with http://www.bigchalk.com
  
• TeacherWeb: http://www.TeacherWeb.com
  
• Creating Classroom activities with Fiamentality: http://www.kn.pacbgell.com/wired/fil
  
• Make a Class Page with Teachers.net Homepage Maker: http:/teachers.net/sampler and can be done in 5 minutes.
  
• Building business pages with BigStep: http://www.bigstep.com
  
• Puzzlemaker.com: http://www.uzzlemaker.com. It will generate several different types of puzzles for you, free.
  
• Quixlab at: http://www.funbrain.com/quiz. Buidles online quizzes and surveys for you from an online template.

WYSEWYG

• Cheaper than free: Netscape Composer, Microsoft FrontPage Express (can be downloaded from http://evolt.org No Mac version however.
  
• Tailored for K-12: SiteCentralIdedveloped by Roger Wagner as a complete drag and drop environment. Web Workshop Pro
  
• Heavy Hitters: Dreamweaver, Go-Live, FrontPage 2003

Dreamweaver

• Dreamweaver offers at least two to three ways to achieve every function, from pull-down menus to object-oriented panels with icons for drag-and-drop editing.
  
• Behaviors: built-in JavaScript code with 20 built-in Behaviors.. No programming necessary.
  
• Site Management by putting your files on the web with its built-in FTP client. The advantage to using of these two methods is that you always have a copy of your entire site on your hard drive. Best feature of the Site Management tool is its ability to keep track of all your web site’s links and file names. Also has a built-in synchronization feature that compares the files in your local directory to the one on your web server, giving you the option of transferring the latest version of each file either to the web server or your hard drive.
  
• Adjuncts to site management: styles, templates and libraries. Styles that applied to regions of text. Templates define an entire page and libraries contain elements used repeatedly on your web pages.
  
• Integration with Fireworks, a graphics authoring program. Together, the two give you a complete web-authoring environment that integrate seamlessly.
  

 

Building a Web Site with Netscape Composer

Use the Bloem book.

Posting, Hosting and Promoting Your Site

1. Save it to your web server via a LAN (Local Area Network), by using FTP (file Transfer Protocol) or HTTP, or by putting it on a disk and giving it to someone who will do either of the first two for you.

2. For FTP transfer, you
   
3. IP address or DNS
   
4. Path to your files on the file server
   
5. Your username
   
6. Your password

Products: WS-FTP at: http://www.ipswitch.comb for PC platform

Fetch Softworks at: http://fetchsoftworks.com for Mac platform

Free Web Hosting Services

• MySchoolOnline: http://www.nyschoolonline.com
  
• Teachers.Net at: http://www.teachers.net

Registering Your Web Site

• Get registered/listed with a portal or an Internet Search engine.
  
• Addme.com submits your site to the 25 top search engines at no charge. http://www.addme.com or http://www.submit-it.com both at no charge.
  
• Sub-it.com is broader in scope and its core list is more than 400 search engines
  
• Domain Registration and Search Submissions links:
  
• InterNic: http://www.internic.com
  
• ICANN: http://www.icann.org
  
• HomeStead: http://www.homestead.com
  
• NBCI: http://www.nbci.com
  
• My School Online: http://www.myschoolonline.com
  
• Teachers Net: http://www.teachersnet.com/tools/
  
• ADDmE: HTTP://WWW.ADDME.COM
  
• Submit It: http://www.submit.com
  
• Web Ring: http://www.Webring.com
  
• Ipswitch Software: http://www.ipswitch.com
  
• NeoText software: http://www.neotextsoftware.com

Deadly Design Sins

• 1. Outdated information
  
• 2. Too much text
  
• 3. Long Scrolling Pages
  
• 4. Long Download Times
  
• 5. Distracting Animation and Multimedia Overkill
  
• 6. Dead Links
  
• 7. Awkward Navigation
  
• 8. Under Construction Messages
  
• 9. The Frame Factor
  
• 10. Splash Screens
  
• 11. The Wrong Stuff
  
• 12. Cool Sites vs. Good Sites

Tips for a User-Friendly Site

• 1. Know Your Audience and Your Purpose

• 2. Keep It Consistent and logical
  
• 3. Navigation Tips - Improving the User Interface
  
• 4. Give it “Stickyness” for repeat users
  
• 5. Good mix of text and visuals
  
• 6. Make the links obvious
  
• 7. Use Image Maps with “hot” spot links
  
• 8. Make it Load Fast  (under 20 seconds at 28 Kps with 60 KB)
  
• 9. Field test your site
  
• 10. Organize with the future in Mind

General Web Design Links

• Yale Style Guidelines: http://info.med.yale.edu/caim/manual/contents.html

 

• Evaluating Internet Resources: http://library.lib.binghamton.edu/search/evaluation.html



• Web Pages That Suck: http://www.Websitesthatsuck.com

 

• 10 C's for Evaluating Internet Sources: http://www.uwec.edu/Admin/Library/Guyides/tencs.html ten criteria for evaluating the reliability of the information on an Internet site.

 

• Web Evaluation for Students: http://www.siec.k12.in.us/~west/online/eval.htm

 

• Three checklists students can use to evaluate Web sites.

 

• LookSmart: Web Design for Beginners. http://www.looksmart.com/eus55260/r?l&

 

• Creating Killer Web Sites: http://www.killersites.com

 

• All About Your Own Web Site: http://www.allaboutyourownWebsite.com

 

• Web teacher tutorials: http://Webteacher.org

 

• Teacher Tips tutorials: http://myschoolonline.com/article/0,1120,36-20561,00.html?ett0128

 

• Writing for the Web: http://electric-pages.com/articles/wftw1.htm

Sources of Web Utilities

• NetMechanic: http://www.netmechanic.com

• Web Tools: Web building links: http://www.Webtools.com

• Really Big: directory of Web utilities: http://www.reallybig

• Project Cool's Web Creation Resources: http://www.projectcool.com/

• Web Developer's Virtual Library: http://wdvl.com/

• Xenu Link Checker: http://home.snafu.de/tilman/enulink.html

• Link validator: http://tucows.com

• Browser Watch: current browsers: http://browserwatch.internet.com/browsers/browsers-big.html

Fonts

• Arial, Helvetic, Times New Roman or CG Time plus Verdana and Georgia. are found on both Mac and PC platforms.

Guidelines

• Although GIF images can display 256 different colors, only 216 of hem look the same on any browser or comuter. These are the "Web-safe" or "browser-sag" colors. To fina a list of these colors, visit: http://www.bagism.com/colormake

• Save all graphics at 72 dpi.

• Giver users a "No Graphics" alternative byh using ALT tags that display the name of the grpahic file, but not the image.

• Use thumbnails to point to fulll-size pictures. A free utility called GIFwizard - for shrinking GIF's and animations - can be found at http://www.gifward.com

1. Make two copies of your image
2. On one of the copies, make the dimensions small (such as one inch across). This is often doen via the Image Size command.
3. Save that thumbnail version as a GIF, beause small images look the same as GIFs or JPEGs, but GIF file sizes will be smaller.
4. Place the small thumbnail on the first web page.
5. Use the second copy of the graphic to make an image with full-size dimensions.
6. Plae it on the second Web page.
7. Now, create a link from the thumbnail on page one to its full-size counterpart on page two (and perhaps a link from there back to page one).

 

• Small images (thumbnails) can serve as previews of a larger image.

 

• Keep file sizes small.

 

1. Open up a graphics file.
2. Try changing the display size by altering its demensions
3. Decide if it should become a GIF or a JPEG.
4. For GIFS, try altering the number of colors in the graphic. For JPEGs, try altering the percentage of compression. Usually a compression of 60 to 80 percent gives you the best bang for your buck.

Learn To Create Lovely Layouts

• Leave open space around your text and graphic elements to make the page more inviting to the eye. You can do this with VSPACE and HSPACE tags.

 

• Keep the background light and Simple (or very dark)

 

• A busy background, such as a tiled picture, can make the text hard to read. Normally, contrasting light text to dark background vice versa genearlly works. If you have a medium-dark background, it usually doesn't work.

 

• Don't overuse clip art and animated GIFS on your pages.

 

• Choose your colors wisely. Use a Web-=safe color wheel of the 216 colors.

 

• Keep design pages to 640 X 480 pixel dimensions in mind. 800 X 600 would be an alternative.

Graphics Software

• Adobe Photoshop: http://www.adobe.com is the standard by which all other image processing programs are measured. It is very good at manipulating images and adding special effects and not good at pianting and drawing tool at .http://www.adobe.com

 

• Adobe Photoshop LE: http://www.adobe.com is a limited edition of Photshop and lacks some features but sells under $100.

 

• Adobe Illustrator, Macromedia Freehand, Corel Draw and Deneba Canvas are all excellent object-oriented draw programs.

 

1. http://www.adobe.com
2. http://www.macromedia.com
3. http://www.corel.com
4. http://deneba.com/

 

• Adobe ImageReady: http://www.adobe.com comes bundled with Photoshop. It offersfeatures such as slicing graphics,creation of animated GIFs, graphics compression and many of the photo editing capabilities of Photoshop.

 

• Macromedia Fireworks at: http://www.macromedia.com and works seamlessly with Dreamweaver. Fireworks performs image compression, slicing of graphifs JavaScript rollovers and Flash buttons.

 

• Ulead: http://www.ulead.com has created a family of low-cost Web utility software, including PhotoImpact.

 

• Debabilizer: http://www.debabelizer.com is the most powerful utility forfile conversion. It can convert a whole folder of files at once (batch mode). Also comes in a lite version which is much cheaper.

Using Clip Art and Stock Photography

• There are tons of clip art collections on the web. many of these are low dcost or free. But be cautious, cheap clip art can look just that.

 

• Be aware, you can also find on the web: lines, symbols, icons, buttons, backgrounds, animated GIFs,and even sounds and videos.

 

Sources of Graphics

 

1. Clip.Com: http://www.clipart.com which includes animations, buttons, and lots of other items.
2. Art Today: http://www.arttoday.com which has thousands of free clip art images.
3. For backgrounds, try: http://www.Webreferenced.com/authoring/graphics/backgrounds.html
4. Onlinw Image Archive: http://www.maths.tcd.ie/pub/images/images.html
5. To do a search of images on the web, try: http://www.ditto.com which is graphics search engine!
6. The Wizard of Draws: http://www.wizardofdraws.com
7. Web shots: http://www.Webshots.com
8. Animagted GIFS: http://animationfactory.angelfire.com which is the AngelFire Animation Factory.
9. GIF Builder: http://iawww.epfl.ch/Staff/Yves.Piguet/clip2gif-home/GifBuilder.htm

 

Animated GIFs

 

• Animation can be fun or irritating. An animated GIF is a graphic that displays a series of pictures rapidly, one right after the other, like a cartoon. An animation can be as simple as two frames or contain as many frames as you wish. The frames are usually "looped" so the animation repeats endlessly. These kinds of graphics need to be in GIF format, never JPEG. A GIF builder program puts the frames together into a timed sequence. Programs like Macromedia Fireworks and ADobe LiveMotion are two of the most well-known software packages that creat animated GIFs. Here are two other, simpler programs for creating animated GIFs.http://www.rtlsoft.com/animagic/http://www.rtlsoft.com/animagic/

 

1. GIF Builder: http://hotfiles.zdent.com (Mac only)
2. Animagic GIF Animator: http://www.rtlsoft.com/animagic/

Rollovers

 

• Rollovers are most often achieved by simply combining two graphics and adding some code to make them change when the cursor moves over them. To make the rollover behavior, one adds some simpel JavaScript code. Programs like ImageReady, Fireworks or LiveMotion can also generate this code automatically.

Flash

• Almost all grpahics you see on the Web are bitmap graphics (pain/photo editing programs) that produce graphics made up of small dots or pixels. Adobe Photoshop, Fireworks and PhotoDeluxe all create bitmapped graphics.

 

• Adobe Illustrator and Macromedia Freehand can produce vector-based (drawing program files). Vector-based graphics can be resized bigger or smaller without losing quality.

 

• The only vector-based graphic format on the web is Flash. You can create beautiful full-motion animations with relatively small file sizes. These animations have a swf extension and are known as ShockWave Flash files. There is a great resource at: http://www.flashkit.com that gives the beginning and advanced Flash animator access to hundreds of Flash moveies that you can alter and learn from.

 

• One barrier to using Flash on your web site is that users must have the Shockwave plug-installed in their browser to view the Flash files.