Web Designer Tools

My Short List

Here is a short list of the tools i find most useful when constructing or changing websites. This is not a definitive list, it’s jst the tools that seem to work for me. You can always look at some of these :

Designer References

The Web Designer’s Wall – a constant reference on the design-side of life for tools, tips and tricks.


Another designer’s reference i like a lot is the CSS Tricks website. Tutorials and lessons plus news and views – spiffing !

Layouts

Grids and Layouts, I hear you ask ? Yes, please ! A simple grid approach need not be tough, see here. And my perennial favorite, dontcha know, 960.GS – super ! Layouts for bigger displays can be a pain. Step forward 978.GS.

Forms

To teach my entry forms some manners, I pick Formalize.me from Nathan Smith, a constant reference any any business site builder nerd.

The Tutorialzone.com crowd have some interesting tutorials i always find useful. Here is one on making Form checkboxes look better with some CSS and a bit of JQuery.

Menus

Have you ever seen a web site without a menu ? No, neither have I, so this quickie tool generates a lovely CSS3-based menuing system, courtesy of  CSSMenu Maker. Here’s one i made n about 10 minutes ->

CSS3 Menu Maker
CSS3 Menu Maker

Colors and Themes

For themes and color references, choose Color Scheme Designer – great for tetrad or analogic color combinations !

I may have blogged about Colors On The Web before, but i’ll repeat myself so you can see the neat tool they have to work out color themes. Look at their Color Wizzard to do the biz.

Visibone
Visibone

 Visibone is an old favorite of mine. It’s helps me build compatible color themes and offers more tools than just color manipulation. Worth a look.

Images

Ok, not really a designer’s tool, as such, but useful, never-the-less is this image-to-CSS converter. it’s makes any image into a base64 encoded text string for convenient insertion into CSS or HTML documents from Web Coder Tools.

Sometimes, i don’t always want to use text as a design component, so a tool to convert text into an image can be quite useful. Look here.

Gradients

CSS3 Gradients
CSS3 Gradients

The Ultimate CSS Gradient Generator gives us a quick route to several types of gradients. The CSS preview bar plus a convenient CSS-to-clipboard feature is vital in the day of high expectations from our user community.

Fonts

Now that text shadowing becomes possible, our font faces and text can take on a nicer look, it’s a bit like drop-shadows on boxes. CSS3Gen now makes this possible. Thanx, guys !

No list would be complete without a nod to the website font industry. My favorites come free courtesy of the mighty Google men (and great gals, too!). Start here and look here for their web font loader tool and the developer webfont showcase offers graphic examples of the many possibilities we have for free, courtesy of Google.

Just a last item from the Opera browser community is this nice image gallery display. It doesn’t use lightbox but is a cool tool just the same. Hope to blog on this one in more detail, soon.

Apologies

Ok, i confess, this post was really because i get so tired of looking up my links to favorite tools on my system as it’s always chocked to the gunnels with development software, i just can’t seem to find things. So for me, this is a tidy-up and i can always reference  my own post to retrieve them. Perhaps they’ll help you too. Cool tooling, guys !!

Buttons

Sometimes i like to have nice shiny buttons to jazz up the user experience. Gradient buttons are even more extreme but worth a look if you have a moment. Look here. For a full set of possible choices, look here. Screen shot 2013-10-03 at 12.32.07 AM


UPDATE

Can’t even really explain this one – just stumbled on it, so perhaps you’ll understand this a little better than me. Start here or look here to see the background of this web page move several objects around as the user moves the mouse over the panel – Wierd !
—> —> The big picture from http://web-features.net/ Sample of Beautiful Parallax Background

HTML Color Codes, Names and Hex Values

Put this here just for future reference. It is a list of the lesser known colour names we can use in our CSS styles by name rather than by the hex code. It does not show well here with the actual color. Suspect this is due to the style of this wordpress theme. Needs more research.

Aliceblue
F0F8FF
Antiquewhite
FAEBD7
Aqua
00FFFF
Aquamarine
7FFFD4
Azure
F0FFFF
Beige
F5F5DC
Bisque
FFE4C4
Black
000000
Blanchedalmond
FFEBCD
Blue
0000FF
Blueviolet
8A2BE2
Brown
A52A2A
Burlywood
DEB887
Cadetblue
5F9EA0
Chartreuse
7FFF00
Chocolate
D2691E
Coral
FF7F50
Cornflowerblue
6495ED
Cornsilk
FFF8DC
Crimson
DC143C
Cyan
00FFFF
Darkblue
00008B
Darkcyan
008B8B
Darkgoldenrod
B8860B
Darkgray
A9A9A9
Darkgreen
006400
Darkkhaki
BDB76B
Darkmagenta
8B008B
Darkolivegreen
556B2F
Darkorange
FF8C00
Darkorchid
9932CC
Darkred
8B0000
Darksalmon
E9967A
Darkseagreen
8FBC8F
Darkslateblue
483D8B
Darkslategray
2F4F4F
Darkturquoise
00CED1
Darkviolet
9400D3
deeppink
FF1493
Deepskyblue
00BFFF
Dimgray
696969
Dodgerblue
1E90FF
Firebrick
B22222
Floralwhite
FFFAF0
Forestgreen
228B22
Fuchsia
FF00FF
Gainsboro
DCDCDC
Ghostwhite
F8F8FF
Gold
FFD700
Goldenrod
DAA520
Gray
808080
Green
008000
Greenyellow
ADFF2F
Honeydew
F0FFF0
Hotpink
FF69B4
Indianred
CD5C5C
Indigo
4B0082
Ivory
FFFFF0
Khaki
F0E68C
Lavender
E6E6FA
Lavenderblush
FFF0F5
Lawngreen
7CFC00
Lemonchiffon
FFFACD
Lightblue
ADD8E6
Lightcoral
F08080
Lightcyan
E0FFFF
Lightgoldenrodyellow
FAFAD2
Lightgreen
90EE90
Lightgrey
D3D3D3
Lightpink
FFB6C1
Lightsalmon
FFA07A
Lightseagreen
20B2AA
Lightskyblue
87CEFA
Lightslategray
778899
Lightsteelblue
B0C4DE
Lightyellow
FFFFE0
Lime
00FF00
Limegreen
32CD32
Linen
FAF0E6
Magenta
FF00FF
Maroon
800000
Mediumauqamarine
66CDAA
Mediumblue
0000CD
Mediumorchid
BA55D3
Mediumpurple
9370D8
Mediumseagreen
3CB371
Mediumslateblue
7B68EE
Mediumspringgreen
00FA9A
Mediumturquoise
48D1CC
Mediumvioletred
C71585
Midnightblue
191970
Mintcream
F5FFFA
Mistyrose
FFE4E1
Moccasin
FFE4B5
Navajowhite
FFDEAD
Navy
000080
Oldlace
FDF5E6
Olive
808000
Olivedrab
688E23
Orange
FFA500
Orangered
FF4500
Orchid
DA70D6
Palegoldenrod
EEE8AA
Palegreen
98FB98
Paleturquoise
AFEEEE
Palevioletred
D87093
Papayawhip
FFEFD5
Peachpuff
FFDAB9
Peru
CD85
Pink
FFC0CB
Plum
DDA0DD
Powderblue
B0E0E6
Purple
800080
Red
FF0000
Rosybrown
BC8F8F
Royalblue
4169E1
Saddlebrown
8B4513
Salmon
FA8072
Sandybrown
F4A460
Seagreen
2E8B57
Seashell
FFF5EE
Sienna
A0522D
Silver
C0C0C0
Skyblue
87CEEB
Slateblue
6A5ACD
Slategray
708090
Snow
FFFAFA
Springgreen
00FF7F
Steelblue
4682B4
Tan
D2B48C
Teal
008080
Thistle
D8BFD8
Tomato
FF6347
Turquoise
40E0D0
Violet
EE82EE
Wheat
F5DEB3
White
FFFFFF
Whitesmoke
F5F5F5
Yellow
FFFF00
YellowGreen
9ACD32

<table>
<tr>
<td align="center" bgcolor="aliceblue" width="40px">Aliceblue<br />F0F8FF</td>
<td align="center" bgcolor="antiquewhite" width="40px">Antiquewhite<br />FAEBD7</td>
<td align="center" bgcolor="aqua" width="40px">Aqua<br />00FFFF</td>
</tr>

<tr>
<td align="center" bgcolor="aquamarine" width="40px">Aquamarine<br />7FFFD4</td>
<td align="center" bgcolor="azure" width="40px">Azure<br />F0FFFF</td>
<td align="center" bgcolor="beige" width="40px">Beige<br />F5F5DC</td>
</tr>

<tr>
<td align="center" bgcolor="bisque" width="40px">Bisque<br />FFE4C4</td>
<td align="center" bgcolor="black" width="40px"><font color="FFFFFF">Black<br />000000</font></td>
<td align="center" bgcolor="blanchedalmond" width="40px">Blanchedalmond<br />FFEBCD</td>
</tr>

<tr>
<td align="center" bgcolor="blue" width="40px">Blue<br />0000FF</td>
<td align="center" bgcolor="bluevoilet" width="40px">Blueviolet<br />8A2BE2</td>
<td align="center" bgcolor="brown" width="40px">Brown<br />A52A2A</td>
</tr>

<tr>
<td align="center" bgcolor="burlywood" width="40px">Burlywood<br />DEB887</td>
<td align="center" bgcolor="cadetblue" width="40px">Cadetblue<br />5F9EA0</td>
<td align="center" bgcolor="chartreuse" width="40px">Chartreuse<br />7FFF00</td>
</tr>

<tr>
<td align="center" bgcolor="chocolate" width="40px">Chocolate<br />D2691E</td>
<td align="center" bgcolor="coral" width="40px">Coral<br />FF7F50</td>
<td align="center" bgcolor="cornflowerblue" width="40px">Cornflowerblue<br />6495ED</td>
</tr>

<tr>
<td align="center" bgcolor="cornsilk" width="40px">Cornsilk<br />FFF8DC</td>
<td align="center" bgcolor="crimson" width="40px">Crimson<br />DC143C</td>
<td align="center" bgcolor="cyan" width="40px">Cyan<br />00FFFF</td>
</tr>

<tr>
<td align="center" bgcolor="darkblue" width="40px">Darkblue<br />00008B</td>
<td align="center" bgcolor="darkcyan" width="40px">Darkcyan<br />008B8B</td>
<td align="center" bgcolor="darkgoldenrod" width="40px">Darkgoldenrod<br />B8860B</td>
</tr>

<tr>
<td align="center" bgcolor="darkgray" width="40px">Darkgray<br />A9A9A9</td>
<td align="center" bgcolor="darkgreen" width="40px">Darkgreen<br />006400</td>
<td align="center" bgcolor="darkkhaki" width="40px">Darkkhaki<br />BDB76B</td>
</tr>

<tr>
<td align="center" bgcolor="darkmagenta" width="40px">Darkmagenta<br />8B008B</td>
<td align="center" bgcolor="darkolivegreen" width="40px">Darkolivegreen<br />556B2F</td>
<td align="center" bgcolor="darkorange" width="40px">Darkorange<br />FF8C00</td>
</tr>

<tr>
<td align="center" bgcolor="darkorchid" width="40px">Darkorchid<br />9932CC</td>
<td align="center" bgcolor="darkred" width="40px">Darkred<br />8B0000</td>
<td align="center" bgcolor="darksalmon" width="40px">Darksalmon<br />E9967A</td>
</tr>

<tr>
<td align="center" bgcolor="darkseagreen" width="40px">Darkseagreen<br />8FBC8F</td>
<td align="center" bgcolor="darkslateblue" width="40px">Darkslateblue<br />483D8B</td>
<td align="center" bgcolor="darkslategray" width="40px">Darkslategray<br />2F4F4F</td>
</tr>

<tr>
<td align="center" bgcolor="darkturquoise" width="40px">Darkturquoise<br />00CED1</td>
<td align="center" bgcolor="darkviolet" width="40px">Darkviolet<br />9400D3</td>
<td align="center" bgcolor="deeppink" width="40px">deeppink<br />FF1493</td>
</tr>

<tr>
<td align="center" bgcolor="deepskyblue" width="40px">Deepskyblue<br />00BFFF</td>
<td align="center" bgcolor="dimgray" width="40px">Dimgray<br />696969</td>
<td align="center" bgcolor="dodgerblue" width="40px">Dodgerblue<br />1E90FF</td>
</tr>

<tr>
<td align="center" bgcolor="firebrick" width="40px">Firebrick<br />B22222</td>
<td align="center" bgcolor="floralwhite" width="40px">Floralwhite<br />FFFAF0</td>
<td align="center" bgcolor="forestgreen" width="40px">Forestgreen<br />228B22</td>
</tr>

<tr>
<td align="center" bgcolor="fuchsia" width="40px">Fuchsia<br />FF00FF</td>
<td align="center" bgcolor="gainsboro" width="40px">Gainsboro<br />DCDCDC</td>
<td align="center" bgcolor="ghostwhite" width="40px">Ghostwhite<br />F8F8FF</td>
</tr>

<tr>
<td align="center" bgcolor="gold" width="40px">Gold<br />FFD700</td>
<td align="center" bgcolor="goldenrod" width="40px">Goldenrod<br />DAA520</td>
<td align="center" bgcolor="gray" width="40px">Gray<br />808080</td>
</tr>

<tr>
<td align="center" bgcolor="green" width="40px">Green<br />008000</td>
<td align="center" bgcolor="greenyellow" width="40px">Greenyellow<br />ADFF2F</td>
<td align="center" bgcolor="honeydew" width="40px">Honeydew<br />F0FFF0</td>
</tr>

<tr>
<td align="center" bgcolor="hotpink" width="40px">Hotpink<br />FF69B4</td>
<td align="center" bgcolor="indianred" width="40px">Indianred<br />CD5C5C</td>
<td align="center" bgcolor="indigo" width="40px">Indigo<br />4B0082</td>
</tr>

<tr>
<td align="center" bgcolor="ivory" width="40px">Ivory<br />FFFFF0</td>
<td align="center" bgcolor="khaki" width="40px">Khaki<br />F0E68C</td>
<td align="center" bgcolor="lavender" width="40px">Lavender<br />E6E6FA</td>
</tr>

<tr>
<td align="center" bgcolor="lavenderblush" width="40px">Lavenderblush<br />FFF0F5</td>
<td align="center" bgcolor="lawngreen" width="40px">Lawngreen<br />7CFC00</td>
<td align="center" bgcolor="lemonchiffon" width="40px">Lemonchiffon<br />FFFACD</td>
</tr>

<tr>
<td align="center" bgcolor="lightblue" width="40px">Lightblue<br />ADD8E6</td>
<td align="center" bgcolor="lightcoral" width="40px">Lightcoral<br />F08080</td>
<td align="center" bgcolor="lightcyan" width="40px">Lightcyan<br />E0FFFF</td>
</tr>

<tr>
<td align="center" bgcolor="lightgoldenrodyellow" width="40px">Lightgoldenrodyellow<br />FAFAD2</td>
<td align="center" bgcolor="lightgreen" width="40px">Lightgreen<br />90EE90</td>
<td align="center" bgcolor="lightgrey" width="40px">Lightgrey<br />D3D3D3</td>
</tr>

<tr>
<td align="center" bgcolor="lightpink" width="40px">Lightpink<br />FFB6C1</td>
<td align="center" bgcolor="lightsalmon" width="40px">Lightsalmon<br />FFA07A</td>
<td align="center" bgcolor="lightseagreen" width="40px">Lightseagreen<br />20B2AA</td>
</tr>

<tr>
<td align="center" bgcolor="lightskyblue" width="40px">Lightskyblue<br />87CEFA</td>
<td align="center" bgcolor="lightslategray" width="40px">Lightslategray<br />778899</td>
<td align="center" bgcolor="lightsteelblue" width="40px">Lightsteelblue<br />B0C4DE</td>
</tr>

<tr>
<td align="center" bgcolor="lightyellow" width="40px">Lightyellow<br />FFFFE0</td>
<td align="center" bgcolor="lime" width="40px">Lime<br />00FF00</td>
<td align="center" bgcolor="limegreen" width="40px">Limegreen<br />32CD32</td>
</tr>

<tr>
<td align="center" bgcolor="linen" width="40px">Linen<br />FAF0E6</td>
<td align="center" bgcolor="magenta" width="40px">Magenta<br />FF00FF</td>
<td align="center" bgcolor="maroon" width="40px">Maroon<br />800000</td>
</tr>

<tr>
<td align="center" bgcolor="mediumaquamarine" width="40px">Mediumauqamarine<br />66CDAA</td>
<td align="center" bgcolor="mediumblue" width="40px">Mediumblue<br />0000CD</td>
<td align="center" bgcolor="mediumorchid" width="40px">Mediumorchid<br />BA55D3</td>
</tr>

<tr>
<td align="center" bgcolor="mediumpurple" width="40px">Mediumpurple<br />9370D8</td>
<td align="center" bgcolor="mediumseagreen" width="40px">Mediumseagreen<br />3CB371</td>
<td align="center" bgcolor="mediumslateblue" width="40px">Mediumslateblue<br />7B68EE</td>
</tr>

<tr>
<td align="center" bgcolor="mediumspringgreen" width="40px">Mediumspringgreen<br />00FA9A</td>
<td align="center" bgcolor="mediumturquoise" width="40px">Mediumturquoise<br />48D1CC</td>
<td align="center" bgcolor="mediumvioletred" width="40px">Mediumvioletred<br />C71585</td>
</tr>

<tr>
<td align="center" bgcolor="midnightblue" width="40px">Midnightblue<br />191970</td>
<td align="center" bgcolor="mintcream" width="40px">Mintcream<br />F5FFFA</td>
<td align="center" bgcolor="mistyrose" width="40px">Mistyrose<br />FFE4E1</td>
</tr>

<tr>
<td align="center" bgcolor="moccasin" width="40px">Moccasin<br />FFE4B5</td>
<td align="center" bgcolor="navajowhite" width="40px">Navajowhite<br />FFDEAD</td>
<td align="center" bgcolor="navy" width="40px">Navy<br />000080</td>
</tr>

<tr>
<td align="center" bgcolor="oldlace" width="40px">Oldlace<br />FDF5E6</td>
<td align="center" bgcolor="olive" width="40px">Olive<br />808000</td>
<td align="center" bgcolor="olivedrab" width="40px">Olivedrab<br />688E23</td>
</tr>

<tr>
<td align="center" bgcolor="orange" width="40px">Orange<br />FFA500</td>
<td align="center" bgcolor="orangered" width="40px">Orangered<br />FF4500</td>
<td align="center" bgcolor="orchid" width="40px">Orchid<br />DA70D6</td>
</tr>

<tr>
<td align="center" bgcolor="palegoldenrod" width="40px">Palegoldenrod<br />EEE8AA</td>
<td align="center" bgcolor="palegreen" width="40px">Palegreen<br />98FB98</td>
<td align="center" bgcolor="paleturquoise" width="40px">Paleturquoise<br />AFEEEE</td>
</tr>

<tr>
<td align="center" bgcolor="palevioletred" width="40px">Palevioletred<br />D87093</td>
<td align="center" bgcolor="papayawhip" width="40px">Papayawhip<br />FFEFD5</td>
<td align="center" bgcolor="peachpuff" width="40px">Peachpuff<br />FFDAB9</td>
</tr>

<tr>
<td align="center" bgcolor="peru" width="40px">Peru<br />CD85</td>
<td align="center" bgcolor="pink" width="40px">Pink<br />FFC0CB</td>
<td align="center" bgcolor="plum" width="40px">Plum<br />DDA0DD</td>
</tr>

<tr>
<td align="center" bgcolor="powderblue" width="40px">Powderblue<br />B0E0E6</td>
<td align="center" bgcolor="purple" width="40px">Purple<br />800080</td>
<td align="center" bgcolor="red" width="40px">Red<br />FF0000</td>
</tr>

<tr>
<td align="center" bgcolor="rosybrown" width="40px">Rosybrown<br />BC8F8F</td>
<td align="center" bgcolor="royalblue" width="40px">Royalblue<br />4169E1</td>
<td align="center" bgcolor="saddlebrown" width="40px">Saddlebrown<br />8B4513</td>
</tr>

<tr>
<td align="center" bgcolor="salmon" width="40px">Salmon<br />FA8072</td>
<td align="center" bgcolor="sandybrown" width="40px">Sandybrown<br />F4A460</td>
<td align="center" bgcolor="seagreen" width="40px">Seagreen<br />2E8B57</td>
</tr>

<tr>
<td align="center" bgcolor="seashell" width="40px">Seashell<br />FFF5EE</td>
<td align="center" bgcolor="sienna" width="40px">Sienna<br />A0522D</td>
<td align="center" bgcolor="silver" width="40px">Silver<br />C0C0C0</td>
</tr>

<tr>
<td align="center" bgcolor="skyblue" width="40px">Skyblue<br />87CEEB</td>
<td align="center" bgcolor="slateblue" width="40px">Slateblue<br />6A5ACD</td>
<td align="center" bgcolor="slategray" width="40px">Slategray<br />708090</td>
</tr>

<tr>
<td align="center" bgcolor="snow" width="40px">Snow<br />FFFAFA</td>
<td align="center" bgcolor="springgreen" width="40px">Springgreen<br />00FF7F</td>
<td align="center" bgcolor="steelblue" width="40px">Steelblue<br />4682B4</td>
</tr>

<tr>
<td align="center" bgcolor="tan" width="40px">Tan<br />D2B48C</td>
<td align="center" bgcolor="teal" width="40px">Teal<br />008080</td>
<td align="center" bgcolor="thistle" width="40px">Thistle<br />D8BFD8</td>
</tr>

<tr>
<td align="center" bgcolor="tomato" width="40px">Tomato<br />FF6347</td>
<td align="center" bgcolor="turquoise" width="40px">Turquoise<br />40E0D0</td>
<td align="center" bgcolor="violet" width="40px">Violet<br />EE82EE</td>
</tr>

<tr>
<td align="center" bgcolor="wheat" width="40px">Wheat<br />F5DEB3</td>
<td align="center" bgcolor="white" width="40px">White<br />FFFFFF</td>
<td align="center" bgcolor="whitesmoke" width="40px">Whitesmoke<br />F5F5F5</td>
</tr>
<tr>
<td align="center" bgcolor="yellow" width="40px">Yellow<br />FFFF00</td>
<td align="center" bgcolor="yellowgreen" width="40px">YellowGreen<br />9ACD32</td>
</tr>
</table>

Code Fragment Syntax Highlighter – Part Two

Read part one here : Syntax Highlighter Part One

Ok, here is a screen snippet of what our test2.html page looks like when rendered by a browser. Notice each color fragment has it’s code keywords colored according to the language of the fragment. Also note that the ‘Midnight’ theme is used for all code fragment displays. Click to grow.

Code Fragment Test Page
Code Fragment Test Page

Image of Example Folder Layout
Image of Example Folder Layout

Here is my test folder with a ‘styles’ sub-folder for the test2.html file. The HTML for our example test page follows. As Alex explains in his installation page, there are two approaches to markup of code fragments :

  1. Use the html <pre> tag
  2. Use the html <script> tag witha CDATA extension

Again, there are several javascript files we need to declare in our test2.html page. A core j/s file with overall logic plus three j/s brushes for the three code fragments, each in a different programming language.

For overall color control, five CSS files declare 1) the core colors 2) a theme default if no override theme has been chosen and 3) in this case we do use an overriding theme called ‘Midnight’. There are several other themes you can try.

Points to note in the following html document – both styles of highlighting are used. The <pre> element needs a class declaration for the brush (programming language) contained within the fragment. You can see class=’brush: groovy’ in the first fragment to color groovy keywords. The <script type=”syntaxhighlighter” class=”brush: js”><![CDATA[ declaration is the alternative approach to present code fragments. We can place any < or > characters within the CDATA of a script declaration otherwise if we use the pre approach, we need to manually change each < and > for their &lt; and &gt; equivalents.

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="./styles/shCore.css" type="text/css" />
<link rel="stylesheet" href="./styles/shCoreDefault.css" type="text/css" />
<link rel="stylesheet" href="./styles/shCoreMidnight.css" type="text/css" />
<link rel="stylesheet" href="./styles/shThemeDefault.css" type="text/css" />
<link rel="stylesheet" href="./styles/shThemeMidnight.css" type="text/css" />

<title>Technology Page To Check Muliple Column text Features</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="./scripts/shCore.js"></script>
<script type="text/javascript" src="./scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="./scripts/shBrushJava.js"></script>
<script type="text/javascript" src="./scripts/shBrushGroovy.js"></script>
</head>
<body >
<h2>Code Examples Using Midnight Theme</h2>
<div><h3>Groovy Code Fragment</h3>
<p>
<pre class='brush: groovy'>
println 'Hi kids'
def cats=[]
cats.each{cat -> println cat}
</pre>
</p></div>
<h3>Javascript Code Fragment</h3>
<p>
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
var setArray = function(elems) {
this.length = 0;
push.apply(this, elems);
return this;
}
]]></script>
</p>

<h3>Java Code Fragment</h3>

<script type="syntaxhighlighter" class="brush: java"><![CDATA[
// require(url:'https://scripting.dev.java.net', jar:'groovy-engine.jar')
// this runs in groovy 1.8 using java 1.6 to run the script engine

import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;

public class CalcMain {
public static void main(String[] args) throws Exception {
System.out.println("Starting …");

ScriptEngineManager factory = new ScriptEngineManager();
ScriptEngine engine = factory.getEngineByName("groovy");

// basic example
System.out.println(engine.eval("(1..10).sum()"));

// example showing scripting variables
engine.put("first", "HELLO");
engine.put("second", "world");
System.out.println(engine.eval("first.toLowerCase() + second.toUpperCase()"));
System.out.println("Ending ...");
}
}
]]></script>
</p>

<script type="text/javascript">
$(document).ready(function()
{
SyntaxHighlighter.highlight();
});
</script>
</body>
</html>

Finally, look at the bottom of the html to see how we invoke syntax highlighter. We can invoke it only after the page has loaded completely. Here is a nice use of JQuery as it has a convenient function of $(document).ready(); which is called upon page load completion. It’s a nice place to insert our call to fire up the highlighter engine. Copy the code above into a textfile named test2.html and then use your favorite browser to open this file. If you’ve done it all correctly, you’ll be rewarded with a display like the screen snippet shown at the top of this post.

It look quite a while to figure out all these bits and pieces. The website documentation is sparse hence a steep lerning curve. Hope this helps you a bit. 🙂

Firefox 7 beta 4 for Apple PPC iMac/Macbook G3,G4 and G5

A brill move from the boys in Floodgap give us a sneak preview of the next Mozilla Firefox version labelled as 7.04

Ten Four Fox turns your Mac into a Happy Bunny !
Ten Four Fox turns your Mac into a Happy Bunny !

There are speed improvements due to reduced memory footprint but these are offset by other drawbacks, so overall, it’s a subjective notion of better speed. Any real improvement has come to us  courtesy of a revised graphics stack for our rendering pipeline of the G series chipset. A new HTML5 canvas backend becomes available as well.

Real downsides of this release are no plug-ins or add-ons, javascript stack requirements now jump from 64MB to 256MB, meaning we actually need an iMac or PPC system with a minimum of 512MB, preferably 768MB though due to other improvements in memory management, we’ll make better use of any unclaimed system memory.

Pick your choice from here depending on your mac chipset :

HTML 5 and The Canvas and Sprites

Have been keeping an eye on the evolution of the html 5 specification regarding 2D and 3D features. IBM have done a nice set of write-ups on these key features, if you need them. Look here for part four of an IBM document  about them. Part three is here. Part two covers more of the user input GUI side of the HTML 5 specification. Look here. The initial overview document is here.


Here is a new approach to dynamic image movement, rotation, and special effects. See some documentation here for examples of how to do it in javascript.

Website Design Tools – 978.GS

Exploring further into the wonderful world of web page designs, i find that more work has been expended by Stephen Bau based on the 960.GS system of Nathan Smith. Sorry cannot find any further references to Stephen’s original GS 978 page, though there is an old link from the Web Designer’s Wall about the limitations of the 960.GS structure. Read more here.

The home page of the later design tool is http://978.gs/and you will find a tidy entry point into this design tool. It looks like this:

Home Page for 978.GS
Home Page for 978.GS

From here, we can hit the download button to choose a grid system that matches our requirements, or those of our target audience and their display device.

I’ve also found 978.GS to be more simple to code as you can see below. Because the gutter widths are more generous at 30px between columns and an overall increase of a further 38px in content width, the result is more pleasing to the eye than 960.GS. Also a bonus is the simpler HTML markup that no longer needs the alpha and omega class attributes to identify the first and final column of each row. One added declaration is needed on the first column, where the ‘first’ class designation serves to identify the start of a new row.  Here is a test, doing some sample column layouts.

Test Page Using 978.GS Grid System
Test Page Using 978.GS Grid System
/*
	978 Grid System ~ Core CSS.
	Learn more ~ http://960.gs/

	Licensed under GPL and MIT.

	Use in place of the gs960 grid to allow 30px gutters plus an additional   38px of content. There is no need for containers. The only requirement is that
the first grid of a new line will have class= .first
*/

.d1 {background: #E14678;}
.d2 {background: #0EFEBF;}
.d3 {background: #00F;}
.d4 {background: #fff;}

.container {
	width: 978px;
	margin: 0 auto;
}
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
	float: left;
	margin-left: 30px;
}
.grid1 {
	width: 54px;
}
.grid2 {
	width: 138px;
}
.grid3 {
	width: 222px;
}
.grid4 {
	width: 306px;
}
.grid5 {
	width: 390px;
}
.grid6 {
	width: 474px;
}
.grid7 {
	width: 558px;
}
.grid8 {
	width: 642px;
}
.grid9 {
	width: 726px;
}
.grid10 {
	width: 810px;
}
.grid11 {
	width: 894px;
}
.first {
	margin-left: 0;
	clear: left;
}

The CSS for this test is shown above. The HTML for the test page follows :

<!doctype html>
<html>
<head>
	<title>Test Page using GS978 Grid</title>
	<link rel="stylesheet" href="gs978.css" type="text/css" media="screen" />
</head>
<body>
<div class="container d4">
	<header class="grid11 first d2">
		<h1>HTML5 + CSS3 Test in a GS978 px Grid</h1>
	</header>

<div class="grid4 first d3">
This is the first column of this row. So i have declared a class of .first and a grid of .grid4.
For this example :
<code><pre><div class="grid4 first"></pre></code>
</div>
	<section id="intro" class="grid4 d2">
		<!-- Introduction -->
		<p>This is the introduction section. It shows how to use the gs978.css features.</p>
	</section>

<div class="grid11 first d1">
	<section>
		<!-- Main content area -->
		<div id="content">
			<div id="mainContent">
				<section>
				This test page uses the less complex gs978 grid rather than the
gs960 grid system. It  is simpler as it allows a 30px gutter and a 38px additional content.
The first column for a row must have a .first class. So
<code><pre>
<footer class="grid11 first">
		<p>This is a footer line</p>
</footer>
</pre></code>
				</section>
				<section id="comments">
					<!-- Comments -->
				</section>
				<form>
					<!-- Comment form -->
				</form>
			</div>
			<aside>
				<!-- Sidebar -->
			</aside>
		</div>

	</section>

	<aside>
		<!-- Sidebar -->
		<p><a href="http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/">Read This Tutorial on HTML5</a></p>
		<p><a href="http://www.css3.info/preview/multiple-backgrounds/">Multiple Background images tutorial</a></p>
	</aside>
</div>

	<footer class="grid11 first d3">
		<p>This is a footer line</p>
	</footer>
</div>

</body>
</html>

Note that i’ve made four extra class declarations for the color aspects, so we can see where the boundaries of each column are drawn. The first DIV has a ‘container’ class which effectively holds the whole of this web page’s contents. Everything content-wise will be placed within this DIV, of course nothing would stop us from writing extra markup after the final DIV.

Remember that since i’m writing up HTML5 markup, the HEADER declaration acts as a large text placement point. The class on this element is declared as ‘grid11’ plus ‘first’ since the HEADER markup is the initial column on the row. This is the only column so a ‘grid11’ class forces this element to span the entire 894px width of the page.

The next row of the page starts at DIV class=”grid4 first d3″. This column effectively spans four columns and is the first column of this row and is colored ‘d3’