The Tools of my Trade
Ideas
The Tools
Examples
Links

 
Firstly, some practical ideas to consider:

  • Keep webpages as short as you can. The web gets quite slow sometimes, and people get bored of waiting...
    • Do you really need that lengthy animation of the dancing gorilla? :-)
    • Graphics
      • Jpegs (mostly used for Photo scans) can often be compressed far more that the preset of the program you are using, e.g. ChangeFSI (the program which I use) defaults to 75% compression/quality, yet some things look fine at 30%. Certainly, not all things look OK at 30% though. Experiment.
      • GIFs (mostly used for drawn pictures) can often be optimised more - look at the palette of your GIF - allow your GIF creator to use only as many colours as your picture actually has (by default it won't!).
  • Test your web-pages on as many different browsers that you can get your hands on - you'd perhaps be surprised how different browsers render your pages, especially if you've made some mistakes e.g. MicroSoft Internet Explorer goes rather wonky if you have one extra </center>; also versions prior to 5.01 can't display GIFs correctly.
  • It's good practice to cater for 'older' browsers without certain features - it's not against the law to have an older browser, and it's often not difficult to accomodate them. You can do something called 'degrading gracefully' - i.e. if a browser can handle all the bells and whistles that your page can throw at it, fine, but if your page will still look OK on a browser which can't render these new-fangled features. Two such things are:
    • Tables - to allow your tables to be rendered readably on a non-tables browser, try stuffing a <br> at the end of the cell; a tables-enabled browser will ignore the <br> whilst a non-tables browser will ignore your <table> etc. and render the <br>. I've used this extensively on this site.
    • Frames - you can use <noframes> (which a frames enabled browser will ignore!), but I've only very rarely seen any sites which actually use frames in a convenient or sensible way (I've used them only once on my site)... think twice - do you really need to use frames?

 
Why bother doing all this hard work when there's so many web-page editors about? -
Why bother with an Acorn?
  1. Creating web-pages by had ensures that they will work well on all browsers!
  2. It allows me to create compact, fast loading webpages
  3. It's satisfying, and stops my brain from festering :-)

One of my reasons for buying an Acorn machine was to learn about computers (again), not just use one. No doubt that makes me a bit of a rarity in today's world, but I must say that I've got real satisfaction from doing all the code, graphics and animations by hand.
Also, having done it by hand I know that it will work with pretty well any browser, yet is quite attractive and informative (tell me if you think otherwise!) without using frames, Javascript, Java etc. - You may be surprised how many people either

  • Can't use these 'advanced features' (there are lots of older computers still, especially PCs with Windows 3.1)
  • Have them turned off!
I also know that the pages are efficient and lean, which will result in fast download and display times. It seems ridiculous to me that some 'serious' pages take ages to load and say nothing of use; especially so if these graphics are stolen/useless/a load of crap/boring. Do it properly or don't bother. Time is Money - it's not in your interests to bore people. Use your imagination...


 
So, apart from the computer itself, what did all these fancy graphics designers, animators and programming tools cost?
Nuffink!

 
These web-tools are all freeware....what a superb system RISC OS/Acorn is:
  • stable OS and software
  • practically virus free
  • Compactly coded programs (less downloading time!)
  • Intuitive and fast - no stuffing around grappling with Windows (or MacOS for that matter)
  • and very nice people!
Some useful sites:

Web Pages That Suck


 

 

Henceforth follows a list of the applications (tools) which I used to create this whole site:

 
      !Browse  !Browse
A web browser, made by Acorn.
This is what started it all, because there's a 'view source code' button  which I used to look at the HTML used to display web-sites...it didn't look too hard after all...
!Browse is also what I use initially to view the finished product (will it ever be 'finished'?).
 
      !StrongHelp  !StrongHelp
Gives structured help with pretty pictures, if the content has it in. It was made by Guttorm Vik.
 
There is structured help available for a variety of subjects by various authors, but for me; stage II of learning HTML came courtesy of StrongHTML - a manual by Guttorm Vik.
StrongHTML has all the HTML with it's appropriate syntax + more.
Forget the rest - this is all you need.
 
      !StrongED  !StrongED
This is a text/program editor, also by Guttorm Vik.
 
Right, once I've got itchy HTML fingers, I fire up this application. It has many 'modes' to choose from; funnily enough I choose HTML mode (these modes have useful tools for each purpose).
Alternatively, you could use !Edit the text editor supplied with every Acorn, but !StrongED is free and offers more, so why not...
Download it along with !StrongHelp and StrongHTML (approx.500K in total)
 
      !Paint  !Paint
A sprite (bitmap) editor which is supplied with every Acorn.
 
Hmmm, I thought; these pages need some illustrations to enliven them, so I used this proggy. For starters anyway...
 
      !Draw  !Draw
A vector graphics application which is supplied with every Acorn.
 
!Draw is ace for re-sizing or re-orienting (eg. rotating) graphics and text fonts. There is a (gratuitous) spinning Morris emblem on a page in the Cars Dept. as an example of this. Also the titles of the pages were created with !Draw.
 
      !ChangeFSI  !ChangeFSI
Converts many image formats into sprites or JPEGs. It is supplied with all RiscPCs (at least).
 
JPEGs are very efficient on space, and any JPEG on my site is created using this wee gem. Absolutely indespensible, quick and very easy to use - just drag and drop. It also offers easy scaling and other processing options.
An added bonus of this application is it's ability to cut down the colours used by sprites eg. 256 to 16, or to colour to grey scale.
The latest version (1.16) is only available with RISC OS 4; the latest version for people without RISC OS 4 is 1.15RC, available from R-Comp (290K long)
 
      !Jclean  !Jclean
Jclean and it's two companions: Jcut and Jsize are jpeg utilities.
 
Jclean allows you to turn a 'normal' jpeg into a progressive one and/or optimise it so that the file ends up as small as possible with no degredation. Allows faster download times and less waste...
Get these three from http://www.dacha.freeuk.com/ 'cos they're fab...
 
      !ArttoSprite  !ArttoSprite
This allows you to take a !Draw file (or !Artworks file) and turn it into a !Paint (bitmap) file. !ArttoSprite is by Tony Houghton.
 
Often, I wanted to turn !Draw files into sprites (bitmaps), either for further editing or mastering into GIFs or JPEGs. This program makes a lovely job of it, but it needs !AWviewer (found in $.Diversions.ArtWorks directory on RiscPCs) to be on the icon bar. !AWviewer has been supplied with all Acorn RiscPCs, and is free otherwise.

!ArttoSpr can be found on  Tony Houghton's site approx. 22K
 
      !Intergif  !InterGIF
By Peter Hartley; turns sprites, drawfiles, ARmovies or GIFs into GIFs or sprites; both animated and static. It is freeware, it is amazing; it is indispensible!
According to the author, it is one of the most efficient GIF creators anywhere - see his site for details:
!InterGIF can be found on Peter Hartley's site approx. 75K
 
      !png2sprite  !Png2Spr
This program by Tom Tanner can create sprites from PNGs or vice-versa. Download it from: here (70K)
 
GifWizard.com
This is not a RISC OS application, however you can feed a URL into it (online) and it'll almost instantly tell you how efficient your graphics (and HTML) are. If you run your RISC OS apps really well you can end up with files that are even more optimised than GifWizard.com can do. Ha Ha!
(it's rated some of my works at 100% optimised).
Try feeding someone elses webpage URL into it - it can be quite enlightening: www.gifwizard.com
 
      !FTPc  !FTPc
When everything is ready, uploading the files, piccys and data couldn't be simpler - !FTPc by Colin Granville is a PD file transfer program using true 'drag 'n' drop' in RISC OS fashion. It is fast and efficient to use. Get !FTPc from Colin's site, and watch out for updates - he works on it very often! (96K)

 

Here are some hints and tips about how I made some parts of this site.
And some acknowledgements too!

 
!Draw !Intergif
Some sharp-eyed Acorn folk may recognise one or two things from !Poster, most notably the Big capital letters. These are !Draw files, which, after sizing; can be dragged straight to !InterGIF.
 
!Draw !Paint !ArttoSprite !Intergif
!Draw has many uses, one of them is the ability to rotate sprites/text/whatever accurately via the:
  • Tranform -> Rotate menu
To rotate for animation, divide 360° by a suitable number and enter it.
 
An example of this is the wholly unnecessary and silly Morris emblem, in the Cars Dept. - this uses 10 frames (360° divided by 10 = 36°)
After rotating each frame, I saved each !Draw file, converted them to a multiple !Paint sprite file (use !ArttoSpr) and cropped all the frames to be the same size - a requirement of animation using !InterGIF.
Finally, I used !InterGIF to turn the sprite file into an animated GIF.
 
!Paint !Intergif
An example of animation using !Paint is the tea cup one (Cars Dept.)
For this the petrol pump and teacup were drawn, and this sprite was copied lotsa times. Each different frame was achieved by adding columns between the pump and cup using
  • Edit -> insert columns menu
thus pushing the cup to the left, and then using
  • Edit -> adjust size
to keep the frame at it's original size. Put the sprite file through !InterGIF and voila!

!Paint !ChangeFSI
Another example of adjusting the size of sprites was used to elongate the Morris Oxford brochure scanned in - it was shorter than the Morris Cowley one...no problem - using !Paint add some rows to the bottom and colour them in white!
Both these sprites were loaded into !ChangeFSI, resized and turned into highly compressed JPEGs (30%-40% I think...)
 
!ChangeFSI
An example of the image mastering facilites of !ChangeFSI is the background of this page, which used a sprite from Tony Houghton's web-site. However, the original sprite was too dark to be useful, so I dragged it onto !ChangeFSI, and re-processed it with
  • Processing -> Gamma correction set to 2.9
this lightened it up a treat!
I then saved it (using !ChangeFSI) as a monochrome JPEG at 70% compression, and it's a whopping 4Kbytes!
 
!png2sprite !Intergif
Many web browsers cannot handle PNG graphic files at all well, so I had to change my home-page's background into something else. !Png2Spr changed it into a sprite, then !InterGIF to turn it into a highly compressed GIF...the resulting GIF was actually smaller than the original PNG!

 

The links. Other sites that I'm impressed with:

 
->DaveSpace
 
->
 

 


 
    
Back one page  Back the way you came
 

© MCMXCIX The Monster Group and Mysterious Mr F™. All HTML, ideas and pics crafted on an Acorn computer a little acorn