By BoLOHUKE payday loans uk
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.
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.
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.
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 |
|
GasBuddy.com is a fantastic site with a heat map of all the gas prices across the nation. I feel bad for California, but too much because we’re getting more dark red in the Seattle area as well. I’d like to know why the price variations existed the way they do. It’s not a coastal thing. Because I could see it making sense for the pricing to be the same on each coast. It really just seems like California is being punished. First Enron really screwed them and now the Oil companies are too.
My favorite feature by far is when you zoom in close enough you’ll get a view with all the gas stations and their prices.
This also helped confirm for me that we don’t actually have that many gas stations in Seattle.
There are more challenges when it comes to optimizing for search engines to consume your content if it is a dynamic Rich UI application that doesn’t rely on Ajax. While Google is able to pick up Flash SWF files during its crawl, this does not guarantee that the content is parsed correctly or given the same weight as any other file formats or a pure HTML/AJAX page. Worse, if the application uses a web service, how can it be guaranteed that all the pages are crawled and returned correctly?
In most cases you will need to make sure that the page hosting the application has some html text that describes the application and what it offers. So in essence treat the page in the same way you would HTML.
When possible expose the content of the application so that it too can be indexed.
Simple Silverlight application – XAML to XHTML with XSLT
For a Silverlight element that contains all of its content in the XAML the best method would be to transforms the XAML using XSLT into friendly XHTML. The goal is to contain the translated XAML into a <div> element that would be replaced by the Silverlight control. Search engines would find the XHTML while browsers with Silverlight installed would see the Silverlight app.
1: <div id="SLHost">
2: <asp:Xml ID="XHTML" runat="server" DocumentSource="seo.xaml"
3: TransformSource="XAML2XHTML.xslt" EnableViewState="False"/>
4: <script type="text/JavaScript">
5: createSilverlight();
6: </script>
7: </div>
Then use the following XAML2XHTML.xslt
1: <?xml version="1.0" encoding="utf-8"?>
2:
3: <xsl:stylesheet version="1.0"
4: xmlns:sl="http://schemas.microsoft.com/client/2007"
5: xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
6: exclude-result-prefixes="sl">
7:
8: <xsl:output omit-xml-declaration="yes" indent="yes"/>
9:
10: <xsl:template match="/">
11: <xsl:comment>This is the text that is in the Silverlight XAML:</xsl:comment>
12: <xsl:apply-templates select="*"/>
13: </xsl:template>
14:
15: <xsl:template match="sl:Canvas">
16: <div>
17: <xsl:apply-templates select="*"/>
18: </div>
19: </xsl:template>
20:
21: <xsl:template match="node()"/>
22:
23: <xsl:template match="sl:Image">
24: <div>
25: <img src="{@Source}"/>
26: </div>
27: </xsl:template>
28: <xsl:template match="sl:MediaElement">
29: <div class="Media">
30: <a href="{@Source}">Media</a>
31: </div>
32: </xsl:template>
33:
34: <xsl:template match="sl:TextBlock">
35: <div>
36: <xsl:value-of select="@Text"/>
37: <xsl:value-of select="text()"/>
38: <xsl:apply-templates select="*"/>
39: </div>
40: </xsl:template>
41: <xsl:template match="sl:LineBreak">
42: <br/>
43: </xsl:template>
44:
45: <xsl:template match="sl:Run">
46: <span>
47: <xsl:value-of select="@Text"/>
48: <xsl:value-of select="text()"/>
49: </span>
50: </xsl:template>
51: </xsl:stylesheet>
Handling more advanced Silverlight applications
How do you design an application that could have dynamic content and robust interaction while at the same time enable a web crawler to understand and categorize the underlying content correctly? Unfortunately there is no simple answer or single correct answer. It depends highly on the application’s purpose. In some situations there will be no way to offer the content of the application up to spider outside of the application. In this case it’s best to have as much meta information on the page hosting the application as possible. By following the standard HTML methods in this document you can still extend the indexability of your application by making sure external links are properly formatted and that high ranking sites link to your application.
Detect and Serve
It requires a little more work up front from a development standpoint to go this route, but if you really have a strong need to get the content in your application indexed then this will be the best approach. The goal is to develop the code of the site to be delivered in multiple formats based on the user agent that is accessing the content. This isn’t all that uncommon anyway with the large range of browser and devices out there that are consuming the web already. Most applications are built with the data stored separately from the interaction in a database or local XML document. The site would have to be built so that it can serve up HTML pages for those who don’t have Flex/Flash/Silverlight installed. Plus, we could potentially change these pages for mobile devices like the iPhone that don’t yet support Flash or Silverlight.
It’s also recommend to have some enticement or value proposition to explain to real users why it would be beneficial to add the plug-ins required to get the optimal experience.
The goal would be to have clients that have the plug-in or runtime installed, would be provided the rich interaction. On those that don’t, a functional page in HTML will be provided. More importantly, to the search engines, these pages that are generated will be tagged and indexed correctly, making the content of our applications visible and increase their visibility.
Very nice introduction to web services with ASP.NET video.
[blipit id="375615"]
This was perfect for what I’m working on today.