October 2008

PDC day 2 keynote – updated

by Ryan Lane on October 28, 2008

update: okay that was a bust. As soon as I started blogging the WiFi dropped out and I lost connectivity. So I switched to my phone and started using the WordPress for iPhone app. Then the cell network started getting throttled as everyone else started doing the same and then it died. Sigh. All this technology and I was just stuck in dead silence. The press seem to have their own private secue WiFi so they were able to stay online.

Anyhoo, I’ll be posted some updates today going forward with all the information I’ve learned. I’ll be install Windows 7 soon.

Be sure to check out MicrosoftPDC.com

8:08 am – people are starting to file in to the seats

Wifi is brokes so I’m updating via my phone woohoo

Okay, here we go

8:38 am – Ray Ozzie is talking about the history if the PC

“we all have PC, phone and web”

8:48 – Windows 7, IE 8, Silverlight 2

Lost connectivity. Will post update soon today.

{ 0 comments }

I’ll be at PDC

by Ryan Lane on October 26, 2008

Microsoft PDC 2008

Microsoft PDC 2008

What’s PDC? It’s the Professional Developers Conference put on by Microsoft. It’s one of the biggest events they put on for developers. I’m really excited about this one because of the Windows 7 announcements and sessions. I’ll do my best to live / semi-live blog the event. I’m going to do a test an use my OLPC for blogging at the event since it’s so much easier to lug around. Of course maybe someone from MS will see me running Sugar as the OS and help hook me up with the version of Windows XP that runs on it instead :P .

If you’re reading this and you’re attending PDC then hit me up on Twitter @futileboy

If you want to learn more about PDC then check out this sites:

{ 0 comments }

links for 2008-10-23

by Ryan Lane on October 23, 2008

{ 0 comments }

Simple CSS based wireframe annotation

by Ryan Lane on October 22, 2008

A while back I created a simple CSS based solution to annotate wireframes for one of my clients.  This created a simple web based view of the wireframes.   I created the wireframes in OmniGraffle.  As a side note, I love OmniGraffle.  It’s one of my most favorite applications.  The Omni Group makes amazing software in general.  If I didn’t have to use a Windows PC for work, I would be using their software all the time.  It makes me sad that there isn’t a version for Windows.   My favorite part of this solution is that is works on screen and in print.  By creating a print version of the CSS it’s a simple process to print out a non interactive version of the wireframes if you need a hard copy.

image

The basic idea is to have a simple wireframe image loaded up with an image map to handle navigation. The image map part in this example was created using OmniGraffle, but you could use which ever tool you prefer.

   1: <map name="GraffleExport">
   2:     <area shape=rect coords="20,366,169,450" href="News.html">
   3:     <area shape=rect coords="16,232,138,246" href="Products_List.html">
   4:     <area shape=rect coords="25,196,158,210" href="Suppliers_Page.html">
   5:     <area shape=rect coords="137,155,162,169" href="Products_Search_Results.html">
   6:     <area shape=rect coords="181,366,453,450" href="News.html">
   7:     <area shape=rect coords="466,106,752,180" href="About_CP_-_Careers.html">
   8:     <area shape=rect coords="466,331,750,450" href="Customers.html">
   9:     <area shape=rect coords="466,189,750,321" href="Suppliers_Overview.html">
  10:     <area shape=rect coords="0,0,13,14" href="Stucture.html">
  11:     <area shape=rect coords="686,77,740,91" href="About_- Careers.html">
  12:     <area shape=rect coords="175,77,222,91" href="News.html">
  13:     <area shape=rect coords="121,77,181,91" href="Products.html">
  14:     <area shape=rect coords="62,77,127,91" href="Services_Solutions.html">
  15:     <area shape=rect coords="217,77,266,91" href="About.html">
  16:     <area shape=rect coords="29,17,256,59" href="Landing_Page.html">
  17:     <area shape=rect coords="643,77,693,91" href="Contact.html">
  18:     <area shape=rect coords="25,77,65,91" href="Landing_Page.html">
  19:     <area shape=rect coords="512,17,739,59" href="Login_Register_block.html">
  20: </map>

For the notation part the notes are contained in DIV tags at the bottom of the HTML document and then placed with CSS and use JavaScript for the moue over behavior below is an example of one note.

HTML of the note:

   1: <div class="noteblock">
   2:     <div class="note" id="note001" onmouseover="return escape(document.getElementById('note001text').innerHTML)">1</div>
   3:     <div class="notetext" id="note001text">
   4:         1. This is the login is / register box. The behavior is for it to dynamically swap out with login box if selected. <br/>
   5:         <img src="loginNote.png"/>
   6:     </div>
   7: </div>

The CSS used handle to layout and display:

   1: .note {
   2:     font-family: tahoma, Arial, Helvetica, sans-serif;
   3:     font-size: 9px;
   4:     font-weight: bold;
   5:     background-color: #FFFF99;
   6:     border: 1px solid #FFCC33;
   7:     color: #996600;
   8:     width: 16px;
   9:     height: 16px;
  10:     text-align: center;
  11:     visibility: visible;
  12: }
  13:  
  14: .notetext { visibility: hidden; }
  15:  
  16: #note001 {
  17:     position: absolute;
  18:     left: 493px;
  19:     top: 20px;    
  20: }
  21: 

 

The for the to get the note to appear next to the cursor I use wz_tooltip.js.  To handle the hide and reveal the notation layer I put together the following javascript:

   1: function getAllRules()
   2: {
   3:     if (document.styleSheets)
   4:     {
   5:         var theRules = new Array();
   6:         if (document.styleSheets[1].cssRules)
   7:             theRules = document.styleSheets[1].cssRules
   8:         else if (document.styleSheets[1].rules)
   9:             theRules = document.styleSheets[1].rules
  10:         else
  11:             return "Your browser doesn't support rules[] or cssRules[]";
  12:  
  13:         var returnstring = '';
  14:         for (var i=0;i<theRules.length;i++)
  15:         {
  16:             returnstring += i + ' = ' + theRules[i].selectorText + '<br>';
  17:         }
  18:         return returnstring;
  19:     }
  20:     else
  21:         return "Your browser doesn't support document.styleSheets";
  22: }
  23:  
  24:  
  25: function hideIt()
  26: {
  27:     
  28:     if (!document.styleSheets) return;
  29:     var theRules = new Array();
  30:     if (document.styleSheets[0].cssRules)
  31:         theRules = document.styleSheets[0].cssRules
  32:     else if (document.styleSheets[0].rules)
  33:         theRules = document.styleSheets[0].rules
  34:     else return;
  35:     theRules[0].style.visibility = 'hidden';
  36: }
  37:  
  38: function showIt()
  39: {    
  40:     if (!document.styleSheets) return;
  41:     var theRules = new Array();
  42:     if (document.styleSheets[0].cssRules)
  43:         theRules = document.styleSheets[0].cssRules
  44:     else if (document.styleSheets[0].rules)
  45:         theRules = document.styleSheets[0].rules
  46:     else return;
  47:     theRules[0].style.visibility = 'visible';
  48: }
  49: 

 

For the print CSS it’s loaded and defined with the CSS print media type

<link rel="stylesheet" type="text/css" href="print.css" media="print">

Here’s the print.css:

   1: .note {
   2:     font-family: tahoma, Arial, Helvetica, sans-serif;
   3:     font-size: 9px;
   4:     font-weight: bold;
   5:     background-color: #FFFF99;
   6:     border: 1px solid #FFCC33;
   7:     color: #996600;
   8:     width: 16px;
   9:     height: 16px;
  10:     text-align: center;
  11:     visibility: visible;
  12:     position: static;
  13: }
  14:  
  15: .notetext { 
  16:     font-size: 9px;
  17:     visibility: visible; 
  18: }
  19:  
  20: body { 
  21:     margin: 0px 0px 0px 0px;
  22:     padding: 0px 0px 0px 0px;
  23:     }
  24:  
  25: #top {
  26:     display: none;    
  27: }
  28: #top a {color: #999999;}
  29:  
  30: .noteblock {
  31:     margin: 26px;
  32:     padding-top: 12px;
  33:     border-top: 1px dotted #666;
  34: }

 

Here’s how it looks:

image

You can view the example of the wireframe notation.

I found this form to very helpful with several of my clients.  My favorite part is the ability to walk a client through the interaction and leave it behind since the notation is inline it helps answer most of the questions about interaction that are not represented by the wireframes.

{ 0 comments }

links for 2008-10-21

October 21, 2008

Basics – How I Stopped Worrying and Learned to Tolerate Vista – NYTimes.com (tags: software microsoft vista blogs tips advice tech) Windows Vista (tags: software microsoft reference windows Community vista technet)

Read the full article →

links for 2008-10-16

October 16, 2008

Ubuntu On OLPC XO – OLPC I'm thinking about putting another OS on the OLPC. I'd really love to get a copy of XP that MS has put together, but I'm sure that won't be public ever. (tags: howto linux ubuntu xo olpc)

Read the full article →

links for 2008-10-15

October 15, 2008

O'Reilly – Safari Books Online – 9780596518554 – iPhone Open Application Development, 1st Edition (tags: development iphone audio streaming) How to play MP3 Audio Stream – iPhone Dev SDK Forum (tags: development programming audio iphone) PowerPCFAQ – Ubuntu Wiki Thinking about switching over some of my old PPC macs (tags: ubuntu PPC Apple linux)

Read the full article →

Silverlight 2 Release soon

October 13, 2008

Silverlight 2 will be released within the next 24 hours.  I’ve been working with it since day one earlier last year and I’m very excited for the Silverlight team to have reached this major milestone.  Congratulations! Highlights of new Silverlight 2 features include the following: .NET Framework support with a rich base class library. This [...]

Read the full article →

Sprout

October 13, 2008

I’ve been playing around with Sprout today. It’s a web based Flash widget building tool.   My favorite part about it is the Components service.  This little tool bar provides loads of easy to build functionality in to my widget.  The widget above was build using the RSS reader.  All I did was supply the feed [...]

Read the full article →

I heart my new cup

October 9, 2008

I heart my new cup Originally uploaded by futileboy This is my new favorite travel mug. It’s a double wall ceramic cup with a silicone lid. Most important of all it’s dishwasher and microwave safe. I’ve always liked the New York coffee mug that Graham made, but I really always wanted a lid.

Read the full article →

← Previous Entries