PowerPoint for Web Mock-Ups

I had read a tip for web designers a few months back - Adobe Illustrator is good for creating mock-ups for a web apps. Well, I got another tip for all those short-cut hungry, time-savers out there - Use PowerPoint.
We had some 5 days left for submission of Project SpaceLock's architecture for Student2Business, and I had no idea how to show to my group, how the Web Interface would look like.
Enter Microsoft PowerPoint into the scene. All I did was layout the menus and a little background, that all, everything else was taken care by PowerPoint.
Don't believe me? have a look at the Mock-Ups yourself - http://www.slideshare.net/ideamonk/space-lock-web-ui

And then compare it to the finished user interface I did today -

• http://spacelock.blogspot.com/2009/03/another-section-of-web-interface-down.html
• http://spacelock.blogspot.com/2009/03/intrusions-archive-interface.html
• http://spacelock.blogspot.com/2009/03/control-interface-finished.html
• http://spacelock.blogspot.com/2009/03/home-section-of-web-interface-is-done.html
  

Minor improvements are all that you will find. This is the first time I could complete a complete interface in just 4 hours, I usually take more that a day :O :P ;)
And guess what, mysteriously, I never had those famous nasty bugging IE6 design issues. It work's on a newly installed Windows XP too - http://spacelock.blogspot.com/2009/03/wow-that-worked-on-ie6-on-xp-too.html

The Lesson - Do look at PowerPoint too as an alternative for creating rapid prototypes and mocks for Web Interfaces.

Adding SyntaxHighlighter to your blogger blog

Have you noticed colourful, beautified codes written in syntax highlighted format on so many blogs around the world? Here's how to get this into your own blog too -

1. If you want it to be done fast checkout FaziBear: Blogger Syntax Highlighter. You can add it as a widget on your blog. Clean and easy!

2. Now if you really want to use the real SyntaxHighlighter and wish to have greater control, the developertips article is worth reading.

3. Now as you have tried both of these, you will encounter strange extra
s and blank lines between each line. Don't worry I have a stupid hack for that. Use my negligibly modified code instead of the one mentioned at developertips.

<link href='http://[YOUR OWN PAGE].googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>

<script src='http://[YOUR OWN PAGE].googlepages.com/shCore.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushCpp.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushCSharp.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushCss.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushJava.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushJScript.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushSql.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushXml.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushRuby.js' type='text/javascript'/>

<script class='javascript'>
//<![CDATA[
  function FindTagsByName(container, name, Tag)
  {
      var elements = document.getElementsByTagName(Tag);
      for (var i = 0; i < elements.length; i++)
      {
          if (elements[i].getAttribute("name") == name)
          {
              container.push(elements[i]);
          }
      }
  }
  var elements = [];
  FindTagsByName(elements, "code", "pre");
  FindTagsByName(elements, "code", "textarea");

for(var i=0; i < elements.length; i++) {
if(elements[i].nodeName.toUpperCase() == "TEXTAREA") {
 var childNode = elements[i].childNodes[0];
 var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,''));
 elements[i].replaceChild(newNode, childNode);

}
else if(elements[i].nodeName.toUpperCase() == "PRE") {
 brs = elements[i].getElementsByTagName("br");
 for(var j = 0, brLength = brs.length; j < brLength; j++) {
  var newNode = document.createTextNode("");
  elements[i].replaceChild(newNode, brs[0]);
 }
}
}
//clipboard does not work well, no line breaks
// dp.SyntaxHighlighter.ClipboardSwf =
//"http://[YOUR OWN PAGE].googlepages.com/clipboard.swf";
dp.SyntaxHighlighter.HighlightAll("code");
//]]>

</script>