30 July 2010

Favorite Google search tips

http://www.google.com/landing/searchtips/

29 July 2010

Firefox Environment Backup Extension

Back up Firefox profiles on Mac, Windows, and Linux with this handy plugin.

Joomla 1.6 Templates: What Designers Should Know

http://www.s-go.net/index.php/s-go-blog/261-joomla-16-templates-what-designers-should-know

Become the next Photoshop evangelist

http://www.nextphotoshopevangelist.com/

ASP.NET 4 and Visual Studio 2010 Web Forms

http://www.devsource.com/c/a/Languages/ASP-NET-4-Web-Forms-2134/

45 Great Examples of V-card Designs

http://inspirationfeed.com/2010/06/45-great-examples-of-v-card-designs/

45+ jQuery Based Wordpress Plugins and Tutorials

http://www.themeflash.com/45-jquery-based-wordpress-plugins-and-tutorials/

How to Create Glass Effect Text in Photoshop

http://www.designioustimes.com/tutorials/how-to-create-glass-effect-text-in-photoshop.html

Joomla 1.6 tutorial videos

What's new in Joomla 1.6 from Andrew Smith on Vimeo.


Joomla 1.6 — For Developers from Andrew Smith on Vimeo.

Tiny and Free Utility System Spec Reveals Your System's Secrets

http://www.pcworld.com/article/201302/tiny_and_free_utility_system_spec_reveals_your_systems_secrets.html

15 July 2010

20 Free Fonts Ideal For Logos And Headings

http://bluefaqs.com/2010/07/20-free-fonts-ideal-for-logos-and-headings/

28 Useful Front End Web Developer Cheat Sheets

http://smashinghub.com/useful-front-end-web-developer-cheat-sheets.htm

25 Wonderful PSD’s from 365psd.com (#2)

http://www.markedlines.com/25-wonderful-psd%e2%80%99s-from-365psd-com-2/

Achieving Visual Sharpness in Design and Art with Photoshop

http://design.creativefan.com/achieving-visual-sharpness-in-design-and-art-with-photoshop/

baseJS: A Mobile JavaScript Framework

http://paularmstrongdesigns.com/weblog/basejs-a-mobile-javascript-framework/

19 Impressive, Stunning and Simple Web Sites

http://www.designshard.com/inspiration/19-impressive-stunning-simple-web-sites/

35 Fresh Examples Of Creative Web Design

http://www.bestfreewebresources.com/2010/07/creative-web-design.html

CSS3 Features Support for Internet Explorer: PIE

http://www.greepit.com/2010/07/css3-features-support-for-internet-explorer-pie/

14 July 2010

Opera and the OGG video - source location matters

I've recently been working on implementing HTML5 video on a new web site. The challenge I ran into yesterday was to get the OGG video to display on Opera 10.54. Using the following error handler, I found out what the problem was, but couldn't get any closer to a solution:
 function failed(e) {
// video playback failed - show a message saying why
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
alert('You aborted the video playback.');
break;
case e.target.error.MEDIA_ERR_NETWORK:
alert('A network error caused the video download to fail part-way.');
break;
case e.target.error.MEDIA_ERR_DECODE:
alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
break;
default:
alert('An unknown error occurred.');
break;
}
}
Here's the video tag:
<video  id="vid-2" width="372" height="209" 
poster="global/img/farmfresh.jpg" controls
onPlaying="stopSlider()" >
<source class="source" src="global/vid/farmfresh.ogg" type='application/ogg'
onError="failed(event)">
<source class="source" src="global/vid/farmfresh.mov">
<source class="source" src="global/vid/farmfresh.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<img src="global/img/farmfresh2.jpg" title="North Carolina Farm Fresh: Monday, April 29 at 9:30 PM"/>
</video>
The problem was the location of the OGG source tag; for Opera, the OGG video has to be the first if you have multiple source elements. Now Opera is happy as well as the other browsers.

13 July 2010

30+ Very Useful HTML5 Tutorials, Techniques and Examples for Web Developers

http://www.tripwiremagazine.com/2010/07/30-very-useful-html5-tutorials-techniques-and-examples-for-web-developers.html

23 Essential HTML 5 Resources

http://carsonified.com/blog/dev/html-5-dev/23-essential-html-5-resources/

Summit: Mobile computing is education’s future

http://www.eschoolnews.com/2010/06/21/summit-mobile-computing-is-educations-future/
"Keynote speaker Peggy Johnson, executive vice president of Qualcomm Inc., pointed to a successful initiative in North Carolina, called Project K-Nect, that uses mobile phones to help teach algebra as an example of how mobile technology can empower learning.

"At-risk ninth graders taking part in the project have access to specially created mobile applications that help explain algebraic principles, and they also can watch videos of other students explaining these principles. In addition, they can text or IM their peers for advice when they get stuck.

"According to early studies of the program’s efficacy, students taking part in this Qualcomm-funded project outscored their peers who did not have access to the mobile phones and content by an average of 30 percent in algebra proficiency."

12 July 2010

Explaining JavaScript scope and closures

Closures are a critical part of JavaScript libraries; this tutorial explains scope and closures: http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/

Another great article on the same subject from the always impressive SmashingMagazine.com: http://www.smashingmagazine.com/2009/08/01/what-you-need-to-know-about-javascript-scope/

And more here: http://blog.morrisjohns.com/javascript_closures_for_dummies.html

How to use HTML5 on your website today

http://www.infoworld.com/d/applications/how-use-html5-your-website-today-220

Why SQL Server is better than any other RDBMS applications?

Pinal Dave has a question on his blog: "Why SQL Server is better than any other RDBMS applications?" Here's my two cents.

I learned RDBMS on SQL Server 2000 back in 2002; picked up a book and read it until the pages came out. It was an easy-to-use, developer-friendly relational database, which tied nicely to classic ASP. I wrote tons of stored procedures from the start, and avoided using ad hoc queries — and never had any security issues.

For a university’s online directory that needed quick response and tons of features, I wrote the entire search engine in a SQL Server stored procedure, with additional user-defined functions. At the time, the school’s data was in flat files stored on OpenVMS. I used a nightly DTS to pull the data and ran cleanup procedures to store it on SQL Server. All of this with great ease. And lets not forget: There’s not an equivalent of DTS/SSIS on Oracle. Going back to SQL Server 2000, this has been a powerful feature of the database, making developers’ lives easier.

For the same directory project, I needed to provide users with the option to leave multiple fields blank and allow searches on any combination of values they provided. The handy “coalesce” function made this a snap. I posted to SQL Server forums and got great help on how to accomplish this. The final SELECT statement looks beastly, but it’s quick and efficient. This was long before Oracle supported the “coalesce” function.

Also, I constantly used the IF EXISTS (SELECT *…) in my stored procedures and user-defined functions. Believe it or not, Oracle still doesn’t have a direct equivalent of this easy feature. If you wanted to insert a row but wanted to check that it didn’t already exist, you’d simply do an IF EXISTS. Easy and intuitive. This is much harder in Oracle.

In addition, the ease of using stored procedures with web apps makes SQL Server a web developer’s best friend. It took us over 2 weeks to get Oracle working with ASP.NET; SQL Server worked with it like a breeze. And the syntax was easy too. If you’ve connected Oracle stored procedures to ASP.NET apps, it’s not a trivial task. We had to install a 200Mb data provider to talk to Oracle. Not my idea of easy.

Moreover, SQL Server installs and runs smoothly with the Visual Studio development suite. SQL Server comes with the Management Studio tool built-in; you often buy extra utilities to get the same functionality out of other RDBMS.

With Oracle, you have to set up TNS files and ensure they have the correct settings on development and production. With SQL Server, you don’t have to worry about any of this.

Reporting tools? Built into SQL Server. As far back as 2002, you could purchase an inexpensive ($5, if I remember correctly) add-on from Microsoft to enable reporting capabilities. Today, the SSRS tool is robust, easy to use, and also developer-friendly. For years I was trying to convince my boss to go with SSRS; she finally went to a conference and saw how powerful it was and she was sold. Instead of a third-party tool that kept crashing daily, the university went with a product that users, admins, and developers love.

10 July 2010

Create your own online AR 3D storybooks

http://www.webkitchen.be/2010/07/07/create-your-own-online-ar-3d-storybooks/

Automate a Large Project with InDesign and Data Merge

http://www.creativebeacon.com/automate-a-large-project-with-indesign-and-data-merge/

The 9 best (and free) cross-browser testing tools

One common problem for web developers is how to test their sites with the different versions of browsers and platforms. Because IE is often the most troublesome, I start with those:
  • Internet Explorer Application Compatibility VPC Image: Virtual PC VHD files with the browser preinstalled. A Windows-centric solution, but provides the most comprehensive testing solution. To use, you'll need the free Virtual PC app; then create a new VMC and point it to one of the downloaded VHD files above.
  • MultipleIE: Another Windows-only tool, which provides a way for IE3 IE4.01 IE5 IE5.5 and IE6 to run on the same box. I've had some limited success with this; the browsers can be very temperamental (that is, they can crash without notice).
  • Spoon Browser Sandbox: Run different versions of browsers from the web without having to install them on your machine. Though I've not yet used Spoon, it holds great promise.
  • Adobe BrowserLab: Upload your pages securely to this Flex app and view snapshots of what they look like on different browsers. This tool is built into Dreamweaver CS5 and holds great potential for easing the testing process.
  • BrowserShots.org: Free and comprehensive alternative to BrowserCam, generates screenshots of your design in an incredible list of browsers and platforms. Because the tool is free, a lot of developers use it. For best results, limit your testing to just a few browsers; this speeds up the results.
  • IETester: Free browser for testing pages against IE 5.5 - 9. It's relatively new but holds promise.
  • NetRenderer: Choose IE version and enter a URL -- it's that simple.
  • iPhoney: Free tool for testing designs on the iPhone.
  • iPad Seek: Online tool to test your designs on the iPad in a similar fashion to iPhoney.

08 July 2010

Getting JW HTML5 Player to work on IE

In my continuing adventures with HTML5 video, I arrived at IE testing, and noticed that IE does not like the JW HTML5 Player (mainly because it's in beta right now). But I have to demo my site and can't wait until Version 1.0 of the player; so, I rolled up my sleeves for another non-trivial challenge.

The problem is that the current versions of IE can't display the HTML5 video tag; IE 9 will address this, but we'll be living with lower versions for some years. And the beta JW HTML5 Player doesn't remove the video tag completely from IE. The answer is to do some jQuery coding to find the video tags and replace them with swfobject elements. There are plenty of gotchas along the way as to file paths and filenames.

Here's the finished code:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">
</script>

<script type="text/javascript">
$(document).ready(function(){
// If this is IE...
if (jQuery.browser.msie){
var el = "";
var vidFileName = "";
var posterPath = "";
var videoTag = "";
var boxId = "";
var so = "";
var flashId = "";
var flashVars = "";
var params = "";
var attributes = "";
var anchorId = "";

// For each video element...
$("[id^='vid-']").each(function(){
// Clear out the variables.
el = "";
vidFileName = "";
posterPath = "";
videoTag = "";
flashId = "";
flashVars = "";
params = "";
attributes = "";
anchorId = "";

// Get a handle to the current object.
el = $(this);

// Set some variables we'll shortly.
boxId = this.id + "_flashBox";
flashId = this.id + "_flashPlayer";
anchorId = this.id + "_anchor";

/*
Set the ID of the first DIV element of the current
object's parent's parent. This will allow us to
reference that DIV later.
*/
el.parent().parent().find("div:first").attr("id",boxId);

/*
Loop over each 'source' tag inside the video; check
the 'source' tag's 'src' attribute. If it contains
'm4v' or 'mp4', then it's usable for the Flash
player in IE.
*/
el.parent().children("source").each(function(){
if ($(this).attr("src").indexOf("m4v") != -1 ||
$(this).attr("src").indexOf("mp4") != -1){
/*
We don't need the filename + path of the video,
only the filename. So we remove the path and
fetch only the filename.
*/
vidFileName = $(this).attr("src").substring($(this).attr("src").lastIndexOf("/")+1);
}
});

// Get the poster's filename and path.
posterPath = el.parent().find("img").attr("src");


// Get a reference to the video's containing DIV.
el = $("[id="+boxId+"]");

// Empty the DIV of all contents.
el.empty();

/*
Append an anchor tag with the anchor ID to the DIV.
We'll replace this anchor tag with the Flash player.
*/
el.append("<a id='" + anchorId + "'></a>");

// Set flashvars, params, and attributes.
flashvars =
{
file: vidFileName,
autostart: 'false',
image: posterPath
};

params =
{
allowfullscreen: 'true',
allowscriptaccess: 'always',
wmode: 'opaque'
};

attributes =
{
id: flashId,
name: flashId
};

/*
Embed the Flash player object using the swfobject.
The embedSWF() method replaces the anchorId element
with the Flash player. For more information on the
various arguments, please see the documentation here:
http://code.google.com/p/swfobject/wiki/documentation
*/
swfobject.embedSWF('global/vid/player.swf', anchorId, '372',
'209', '9.0.124', false, flashvars, params, attributes);
});
}
});
</script>
One gotcha with swfobject: You need to ensure the path of the 'file' that you wish to play is relative to the player.swf or you'll get an error saying 'Can't find file or access denied.' This thread talks about the issue.

In addition, you'll need to add the following to the page to prevent IE from throwing an error:
if (!jQuery.browser.msie){
$('video').jwplayer({
flashplayer:'global/js/jwplayer/player.swf',
skin:'global/js/jwplayer/five/five.xml'
});
}
This ensures that the JW HTML5 Player is fired off only on non-IE browsers. My previous post on HTML5 video and the JW Player has links to all my other posts on the subject.

UPDATE: Please see part 2 of this post for how to get the release version of the player working on IE and other browsers.

01 July 2010

Tracking the Real-Time Color Trends

http://www.colourlovers.com/trends

48 Best Creative, SEO, Marketing & Freelance Bookmarks – June 2010

http://joannaciolek.com/wordpress/best-creative-seo-marketing-freelance-bookmarks-june-2010

HTML5 Charting & Data Visualization Tool: HumbleFinance

http://www.greepit.com/2010/06/html5-charting-data-visualization-tool-humblefinance/

YouTube backs Adobe Flash over HTML5

http://www.infoworld.com/d/developer-world/youtube-backs-adobe-flash-over-html5-849
"While HTML5's video support enables us to bring most of the content and features of YouTube to computers and other devices that don't support Flash Player, it does not yet meet all of our needs," said YouTube software engineer John Harding in the post. "Today, Adobe Flash provides the best platform for YouTube's video distribution requirements."

Automatically put HTML5 videos in Fancybox

Here's a tricky one: Safari 5 and the iPad have issues with HTML5 video tags if those objects move. They show "black holes" on the screen, especially inside content rotators. Solution? Do a "popup" (via Lightbox, Fancybox, etc.) to handle the video, while leaving the video as is on the other browsers.

Adding to the complexity of the problem is the fact that Safari strips off the poster attribute from the video tag; not sure why. So I ended up using an img inside the video tag; we'll see the reason below. Here's the video tag as it appears in the HTML; the closing source tags are to prevent IE from throwing an error:
<video  id="vid-1" width="372" height="209"
poster="global/vid/historydetectives-poster.jpg" controls onPlaying="stopSlider()">
<source src="global/vid/historydetectives.mov"></source>
<source src="global/vid/historydetectives.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
<source src="global/vid/historydetectives2.ogg" type='application/ogg'></source>
<img src="global/vid/historydetectives-poster.jpg" />
</video>
To get Safari/iPad to pop these up in a Fancybox, we follow these steps:
  1. Loop over all the video tags on the page. In this case, their IDs all start with "vid-".
  2. Get each video's HTML; for this we have to get the parent element.
  3. Get the img tag's src attribute (Safari stripped out the poster attribute on the video tag).
  4. Generate some HTML for a linked image, with its src set to the img tag above.
  5. Ensure the link has a unique ID.
  6. Replace the video tag with the generated HTML.
  7. Instantiate a Fancybox for the video and set its content to the video's HTML.
Here's the code:
$(window).load(function () {
if (jQuery.browser.safari) {
var videoTag = "";
var posterPath = "";
var replacement = "";
var boxId = "";
var el = "";

/* Fetch all the video tags with ID
starting with 'vid-'.
*/
$("[id^='vid-']").each(function(){
// Extra precaution: reset variables.
videoTag = "";
posterPath = "";
replacement = "";
boxId = "";
el = "";

// Get a reference to this element.
el = $('[id='+this.id+']');

/*
To get the enclosing video tag,
fetch the parent's HTML.
*/
videoTag = el.parent().html();

/*
Get the path to the video's poster image.
Safari strips off the poster attribute, so
we use an image within the video tag to hold
the image path.
*/
posterPath = el.parent().find("img").attr("src");

/*
We're manually instantiating and setting
properties on a Fancybox, so we add "_manual"
to the ID.
*/
boxId = this.id + "_manual";

/*
Concatenate some HTML: We'll create an image tag
with its source set to the image tag inside the video.
Wrap it in an anchor tag and set its ID to what we
created above so we can attach it to the Fancybox.
*/
replacement = "<a title='' id='" + boxId +
"' href='javascript:;'><img src='" +
posterPath + "' style='float:left; padding-left:5px; '/></a>";

/*
Replace the video element with the concatenated HTML
we just created.
*/
el.parent().replaceWith(replacement);

/*
Instantiate a Fancybox and attach it to the
linked image. Set its 'content' to the video
tag's HTML.
*/
$("[id="+boxId+"]").fancybox(
{
'content' : videoTag,
'autoDimensions' :true,
'padding' : 9,
'showCloseButton' : true,
'enableEscapeButton': true
}
); // end click function
}); // end each function
} // end if
else {
/*
This next line is needed only if we use an HTML5 video
player library (such as JW HTML5 Player from LongTail
Video). These libraries often include their own controls
and if we don't remove the 'controls' attribute from
the video tag, the other HTML5-ready browsers produce
"double" controls. We're including the 'controls'
attribute on the video tag for the iPad to be happy;
without that attribute, the video pops up with a black
screen on Fancybox. So we strip it from the video tag.
*/
$("[id^='vid-']").each(function(){
$('[id='+this.id+']').removeAttr("controls");
});
} // end else
} // end load function
One other caveat: We can't call the following in the each function:
$("[id="+boxId+"]").click(function()
{
$.fancybox( ....
The reason? We need to instantiate a Fancybox for each of the videos.

I've documented additional adventures and solutions with the content rotator and HTML5 video in these posts: