I caught wind of this parody of the MacBook Air commercial and thought it was great. I love the sleekness of it and Apple in general, but the choice to remove things that are commonly used like say - a cdrom drive is just crazy.
But then again, some people really love their Air.
[Although I would probably be the same way if I had one 
]
Apr 30 2008
[See a demo here]
Modal windows seem to be the rage these days and somewhat synonymous with “Web 2.0.” And yes, options exist, whether it be Lightbox, Thickbox, or .NET AJAX — to name a few. Recently, Facebox has emerged as a very promising contender. The aforementioned plugins/widgets have proven their usefulness to many developers during their life course. In fact they one might even go so far as to deem “standard” to the plugin of choice.
Yet, what if a scenario arises where you do not need such full featured capability? After all, most of the plugins out there come with their own CSS along with the JavaScript. This is not to say that CSS wouldn’t be necessary if one were to create a homegrown solution. The fact remains that their is still integration work involved.
Therefore, my aim in this post is to illustrate a simple example of leveraging the jQuery framework to create a simple iFrame modal window. Of course a polished plugin will be more robust, however, robust is at times overkill. It is at that point where simplicity comes into play and thus the forthcoming example.
First we create an object in JavaScript to encapsulate some core methods and properties that we could potentially reuse.
var modalWindow = {
parent:"body",
windowId:null,
content:null,
width:null,
height:null,
close:function()
{
$(".modal-window").remove();
$(".modal-overlay").remove();
},
open:function()
{
var modal = "";
modal += "<div class=\"modal-overlay\"></div>";
modal += "<div id=\"" + this.windowId + "\" class=\"modal-window\" style=\"width:" + this.width + "px; height:" + this.height + "px; margin-top:-" + (this.height / 2) + "px; margin-left:-" + (this.width / 2) + "px;\">";
modal += this.content;
modal += "</div>";
$(this.parent).append(modal);
$(".modal-window").append("<a class=\"close-window\"></a>");
$(".close-window").click(function(){modalWindow.close();});
$(".modal-overlay").click(function(){modalWindow.close();});
}
};
Notice that only three CSS classes need to be defined, “.modal-window”, “.modal-overlay”, and “.close-window”. Because of the fact that we are trying to keep things simple, I’ve decided not to check to null’s in required properties (windowId, content, width, height).
Next the three classes from above need to be defined. The “.modal-overlay” class is the layer that covers the current view and serves as a backdrop for the modal window. “.modal-window” is obviously the window itself. In this case, the modal-window class is very generic since we will rely on the styling in the transparent iFrame for design. Lastly, I chose to implement a close graphic which is displayed using the “.close-window” class. Again, this is very basic.
.modal-overlay
{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
height:100%;
width:100%;
margin:0;
padding:0;
background:#fff;
opacity:.75;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
z-index:101;
}
.modal-window
{
position:fixed;
top:50%;
left:50%;
margin:0;
padding:0;
z-index:102;
}
.close-window
{
position:absolute;
width:32px;
height:32px;
right:8px;
top:8px;
background:transparent url('/examples/modal-simple/close-button.png') no-repeat scroll right top;
text-indent:-99999px;
overflow:hidden;
cursor:pointer;
opacity:.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}
.close-window:hover
{
opacity:.99;
filter: alpha(opacity=99);
-moz-opacity: 0.99;
}
Now that we have set some basic styles and defined our core functionality, we can open a new modal window to display our iframe.
var openMyModal = function(source)
{
modalWindow.windowId = "myModal";
modalWindow.width = 480;
modalWindow.height = 405;
modalWindow.content = "<iframe width='480' height='405' frameborder='0' scrolling='no' allowtransparency='true' src='" + source + "'></iframe>";
modalWindow.open();
};
<a href="/example/modal-simple/modal.html" target="_blank" onclick="openMyModal('/example/modal-simple/modal.html'); return false;">Click here to open</a>
Implementation is simple, just make a call to the method created earlier with the source of the modal window.
As stated at the outset, this post was meant to illustrate a bare bones and simple example of a modal window. If you wanted to extend the functionality for example, it would be quite simple to create more “openMyModal” methods to suit needs. So if Facebox or Thickbox are too much for your application, why not try the simple approach?
Apr 25 2008
I would like to make everyone aware that the Deseloper.org feed will be moving to a new location: http://feeds.feedburner.com/deseloper.
As you know, FeedBurner is used to serve up both the new (feeds.feedburner.com/deseloper) and old (feeds.feedburner.com/tomlauck) feeds. I will be removing the old FeedBurner url in the next few days, so make sure to update your bookmarks and RSS aggregators!
New Feed Location:
http://feeds.feedburner.com/deseloper
Mar 27 2008
I thought a little scenario might assist in prefacing this post.Bob has built a cool Flex application and it now time to show it off to the world. Bob is a web guy, so like most web guys, he uses YSlow to see the performance on his pages. Flex application and YSlow in hand, Bob uploads his files to his web-server. He then realizes that he forgot to ask himself one very important thing, “how big is this Flex application anyway?” To Bob’s dismay, the final size is almost 2 mb! Bob has some options:
Now back to me…Bob’s best options here are 3, 4, 5. And more specifically 3 and 5. If you aren’t familiar with RSLs (Runtime Shared Libraries) in Flex, I highly recommend them. By implementing RSLs, it becomes possible to cut down the initial file size of the application, only loading libraries when needed.But one still has to load the swf libraries, even if RSLs are utilized. In many scenarios users visit a specific page or URI before accessing or launching a Flex application. For instance, a search page followed by Flex search results. To take advantage of this, why not take employ AJAX? After all, its primary purpose is the asynchronous transmission of data, so AJAX seems like the perfect tool for the job.I chose YUI for this example, but you could use jQuery or something of the like.
//Caching methods using YUI
var flashCache = {
handleSuccess:function(o)
{
this.processResult(o);
},
handleFailure:function(o){ },
processResult:function(o){ },
startRequest:function(url) {
YAHOO.util.Connect.asyncRequest('GET', url, callback, null);
}
};
var callback = {
success:flashCache.handleSuccess,
failure:flashCache.handleFailure,
scope: flashCache
};
//Cache the swf and swz
window.onload = function()
{
flashCache.startRequest("flexApplicaiton.swf");
flashCache.startRequest("framework_3.0.189825.swf");
flashCache.startRequest("framework_3.0.189825.swz");
};
By asynchronously loading the Flex application, Framework while the user is taking a preliminary action, you basically take the 2 mb Flex application (although hopefully it is less because you are using Runtime Shared Libraries) and turn it into 12-40k. Otherwise known as the size of the page which the swf file is embedded. (The photo below is not a real representation of the scenario, but illustrates the difference in cache.)
It is understood that most users who visit your site have an empty cache. However, if you have instances where the user will spend some significant amount of time (enough to load the swf), you and Bob (from the outset) can rejoice in the now optimized speed and total score benchmark you will receive in YSlow…2 mb Flex application included.
Mar 19 2008
After reading the live blog of the press conference on March 6th and then watching the video of it, I was really excited about playing with the SDK, especially the OpenGL and OpenAL stuff that was demoed.Excitedly I went to developer.apple.com, $99 in hand. Unfortunately, I was met with a “please refresh this page and check back later message.” After waiting, and switching to Firefox (I initially used Safari), I logged in and applied. I started to rejoice, then looked at my screen. Another canned message:
Thank you for submitting your information.While we process your information, please visit the iPhone Dev Center to download the iPhone SDK and access a wealth of technical resources.Please note, the iPhone Developer Program will initially be available in the US and will expand to other countries in the coming months.Next StepsYou will receive notification of your enrollment status. Enrollment ID: XXXXXXXXXX
Deflated, although still bearing hope, I eagerly awaited their email. Day 1 passed. Then day 2, 3…you get the picture.Finally, today, I see a message arrive from “iPhone Developer Program.” Oooo, excitement again…or so I thought:
Dear Registered iPhone Developer,Thank you for expressing interest in the iPhone Developer Program. We have received your enrollment request. As this time, the iPhone Developer Program is available to a limited number of developers and we plan to expand during the beta period. We will contact you again regarding your enrollment status at the appropriate time.Thank you for applying.Best regards,iPhone Developer Program– snip –
I’ve been an a loyal customer and somewhat of a fanboy for years. I just don’t get it. Steve and company has this big press conference about the SDK, then they don’t give people access like they said they would?So Apple, what’s up with the rejection letter?…At least they haven’t taken my $99.
Mar 14 2008
Lately, many have been asking about SEO. With the economy in a little slump of sorts, I am assuming people are for one feeling the pinch and realizing the selling value of the internet. The end of the age of bad flash sites and complex tables is in sight! For many years, big companies have been playing the pragmatic SEO game, but now the average joe is finally jumping on the bandwagon and willing to invest in SEO and SEM. In my opinion this is big, because small businesses are willing to give up valuable revenue to the relatively uncertain territory of SEO and SEM.To accompany my recent observation of those with small businesses I have compiled a brief list of essential SEO tips:
For the more advanced readers, please feel free to add to or suggest alternatives. And for the rest, this list is not meant to be a be all and end all, but - just like one’s wedding day - a mere beginning on a long journey.Now for the shameless plug…If you need some assistance implementing an SEO plan, drop Vovéo or myself a line, we will be glad to help
Feb 18 2008
View example and download source.
Creating software with mapping should be a figurative walk in the park given the tools available from the major map api players like Google and Yahoo. However, when creating software on the Flash platform that needed mapping, my immediate choice was to go with Yahoo, since they have a history of being Flash friendly.
After investigating and implementing the examples Yahoo providing using the ASTRA Web Api, and in the end the solution as a whole seemed to work, albeit not as robust or simple as I would have liked. All was apparently well until production time. Once I deployed to the web, with a DOCTYPE of xhtml-transitional, the map ceased to dispatch the onMapLoad event.
As an alternate AS3/Flex solution I discovered Modest Maps. The hitch was that using Modest Maps would require building custom own components (such as Zoom, Map Types, Markers, Etc), for modest maps displays the map only.
I really take a liking Yahoo’s map markers. There was a hitch, Modest Maps was written in AS3 only. Therefore, when I went to integrate a Flex based marker into the map, the two were incompatable.
My solution:
I see my work as a mere starting point. As Google states, “release early, release often.” So, please view the example, download the source and play. I would love to see where things go with it, if any.
Jan 1 2008
For those of you who just want the source code, I’ll cut right to the chase. View the demo.
Now for the explanation.
For a recent project, the design spec dictated a fluid layout. Normally, this would be no problem, however, in this scenario there was a footer that always needed to be pinned to the bottom of the page content did not extend very far.
Rather than pinning the footer to the bottom of the page absolutely, I wanted to footer to scroll with the content when the content was long enough to create browser scrollbars. Rather than create JavaScript to position things onResize or scroll, I opted to create a 100% CSS/XHTML layout that accomplished exactly what I wanted.
Although the outcome is not as lean as I would like, but in the end it gets the job done well. What more can I really ask for?
Nov 3 2007
UPDATE: I’ve since rethought the implications of this post and I wanted to add that using h1 as the company name is the right choice is certain scenarios. I simply wished to provide an alternate method.
First it has been a very long time since my last post. My excuse is that I moved…and I’ve been a bit lazy. I felt the need to address a topic that seems to have been brought up to me several times over past couple weeks: CSS site navigation.
When structuring and styling menus, a definition list (dl) should be used for the site title and navigation.
The first roadblock some have with this method is that they feel the h1 tag must be used for the site title. However, using the h1 for the site title (or company name in many cases) is redundant. Your h1 (although many web builders view it improperly as a semantic whore and over use it), has great value in SEO. Because the h1 is suppossedly the most important content on a specific page, why would one waste it something like Widgets, Inc. when it could be used for maybe a content rich headline: Widgets Inc Provides Solutions for All Widgets Manufacturers. I thought the following experience was very valuable
As I observed a blind web user navigate through a few pages, he reported that hearing the h1 content on top of the page was boring and redundant for him. Because his screen reader read the content of the title element first, the title element served as the actual title of the document for him, and the h1—which merely repeated the content of the title element—was useless.
ALA - October 09, 2006 - Working with Others: Accessibility and User Research”
If a blind human and his screen reading software sees the h1 used as the site title as redundant, I wonder how it impacts how a search engines screen reader views your site’s content. Clearly, using the dt instead of the h1 for the site title is not a bad thing whatsoever.
Secondly, if you look at the meaning of a definition list you will see that it fits perfectly with the notion that you are defining your site and there direct relationship between the items (navigation). And to reiterate the advantage of not using h1 for your site name, the site navigation is now minimized along with the site name - since both are redundant and not content rich.
Lastly, stlyling your header is now a breeze. And your html structure won’t give you indigestion due to enclosing your site name, navigation, and possibly one other element (perhaps search) in a wrapping div.
Here is the markup for your reference (or view a mockup page). Using this method, you can easily create dropdown menus by nesting another unordered list (ul) inside of the list item (after the anchor tag).
<dl class="sitedefinition"> <dt><a href="/">Company Name, LLC</a></dt> <dd> <ul> <li><a href="/company/">Company</a></li> <li><a href="/solutions/">Solutions</a></li> <li><a href="/strategy/">Strategy</a></li> <li><a href="/clients/">Clients</a></li> <li><a href="/partners/">Partners</a></li> <li><a href="/contact/">Contact</a></li> <li><a href="/">Home</a></li> </ul> </dd> </dl>
Sep 27 2007
We found out today that a tech blogger recently reviewed 1,088 websites of publicly traded companies in the technology sector. Initially his review process was broken into three sections (A-G, H-O, P-Z), and 45 sites were selected in each section. The sites were filtered on aesthetics and function.
Upon completion of the process mentioned at the outset, the top 20 sites of the 1,088 were selected.
All of us at Vovéo, especially those deeply involved in producing Safeguard.com, feel honored to have our work ranked among the ‘best of the web’.
» View the whole article
» View Safeguard.com
Furthermore, despite the amount of objectives we had to accomplish on the Safegaurd site (also known as: we had a lot to fit on that homepage), we were able to keep the site clean, simple, and visually pleasing.
Jul 24 2007
