living with technology and other stuff
Found this video on YouTube about the Microsoft Web Platform, the Web Platform Installer, and the Windows Web Application Gallery. Starring Scott Guthrie and Soma. Great work.
I actually saw them filming this on campus one day, but had no idea what this guy running around in a Hawaiian shirt was all about.
{ 0 comments }
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.
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:
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 }
Every Web site has a purpose. Yours may have more than one.
Your Web site is a collection of possible types of content and applications. The purpose of your site can be identified by thinking about your main business objectives and answering a couple of key questions:
Let’s walk through a couple of examples. If your main goal is to achieve and maintain customer satisfaction, your site is likely a Support site. If however, your main objective is to enable the direct sale of products and services, then your site is likely a Commerce site.
Web Purposes will help those of you in the web space measure the business value of your activities vis-à-vis your business objectives and facilitate tracking of your site’s success metrics.
Review the following Web Purposes to see which apply to your Web site.
{ 0 comments }
You’ve all seen them before on your mail and packages. They are starting to turn up all over the place. It’s also becoming a much more complicated landscape. There are more and more types of two-dimensional matrix barcode appearing all the time. The majority of them are consisting of black and white square modules arranged in either a square or rectangular pattern, which gives them that television static look. They are however no longer limited to just black & white or square in shape. There are others that look more like crop circles, some that actually have pictures in them and some based on color triangles.
Microsoft has introduced their own version that they call the High Capacity Color Barcode. This version has both a 4 color and 8 color version that offer a much more data storage.
An interesting aspect to the High Capacity Color Barcode is that is supports RSA signatures. With it’s long list of features and data density it’s your best option for actually storing information that needs to be physically printed on a surface. The only challenge with Microsoft’s solution is that there isn’t any easy way to use them yet. As of this time there are no public readers available for cell phones or online.
However with today’s always online technology and readers based in cellphone, I’m personally interested in ShotCode’s solution. They are focusing on mobile tagging that work sort of like a TinyURL in that they only contain a link to a URL. To use a ShotCode you can use generate one for free on their site. To decode you can Download a ShotCode mobile barcode reader from their site or choose from a few option for the iPhone from the App store.
It’s interesting to see how these codes are starting to take off in general use. The site Semapedia is all about creating links between real world objects and Wikipedia. On their site you can enter in the Wikipedia URLs and create a DIY printable sticker sheet, that you can then go and tag objects with. Everyone should go and create some and stick them on stuff.
The QR Codes seem to have become the most used in advertising right now thanks to their success in Japan. It’s the code that I myself have noticed more and more in public spaces and adds.
So which one is the best? For me it’s the one that is easiest and cheapest to create and scan back in. For that I’m leaning on the QR Code at the top of the list followed by DataMatrix and the ShotCode. I’m interested in using the HCCB, but will have to wait.
Here’s a little sample of some of the matrix codes I could find:
|
|
|
|
|
|
|
|
Codeblock-F |
|
Snowflake code |
|
{ 0 comments }