Archive for the ‘Development’ Category

HTML5 Audio & Video MIME Types

Saturday, March 10th, 2012

HTML5 video and audio can be endlessly frustrating to get working properly across all platforms. To further complicate matters there is more misinformation out there than definitive resources. This problem isn’t much different than JavaScript where there hundreds of thousands who can write JavaScript, but there must only be 10 people in the world that really understand it.

An important step in serving HTML5 audio and video is serving the files with the correct MIME type. To add them to an Apache server, use the AddType directive in a .htaccess or directly in a Virtual Host file. The following example assumes separate .htaccess files for each:

Audio

AddType audio/aac .aac
AddType audio/mp4 .mp4 .m4a
AddType audio/mpeg .mp1 .mp2 .mp3 .mpg .mpeg
AddType audio/ogg .oga .ogg
AddType audio/wav .wav
AddType audio/webm .webm
Video
AddType video/mp4 .mp4 .m4v
AddType video/ogg .ogv
AddType video/webm .webm
The only tricky and rarely discussed thing is some files use the same file extension for both audio and video formats. This means depending on the types of files you want to serve you might want to add a .htaccess file to the specific directory containing either the audio or the video files so the proper MIME type is served.

References:


				

Full Window Flash With Minimum Dimensions – Updated

Tuesday, March 8th, 2011

Several years ago we came up with a solution for “full window” Flash that maintains a minimum width and height, without requiring JavaScript in modern browsers. Thanks to the feedback of several users we restored Chrome compatibility. At the same time we simplified the CSS, created a landing page, hosted example, downloadable package, and re-certified it in all major browsers, even IE 5.

In our testing we also came across swffit and SWFForceSize. Both of these JavaScript only solutions can be replaced by ours in most cases with better compatibility and less fragility. Our solution primarily relies on CSS, and only uses JavaScript in IE 6 or less.

The original article “Full Window Flash (With Minimum Dimensions), Done Right” is now it’s own page. The original article is still useful for a procedural explanation on how we came up with the solution and what each part of it does. The inline examples have not been updated to reflect the new code, instead refer to the standalone page.

Please post any comments, suggestions or problems here.

Internet Explorer 6 Duplicate Characters Bug

Monday, May 11th, 2009

Just for reference if you come across the old issue with IE 6 duplicating characters at the end of a block of text, check out this article at Position Is Everything.

Opening a Link in a New Window, and How Not To

Friday, May 8th, 2009

I often tell everyone here to avoid examples of JavaScript on the Internet, because more often then not it’s incorrect. The same goes for most of the popular examples of how to cause a link, an A tag more specfically, to open in a new window.

The most popular and incorrect way is using the target attribute:

<a href="http://www.example.com/" target="_blank">Using Target</a>

The target attribute was meant to direct content to load in a specific frame. In this case the keyword directs the browser to load the page in a new window, but with frames long dead and gone this little gem lives on as a reason people “can’t use HTML Strict.”:

The most common solution that people came up with this was to use JavaScript, but in some strange ways. Instead of opening the link directly, the page would go to an anchor and JavaScript would open the URL in a new window:

<a href="#" onclick="window.open('http://www.example.com/');">Using Onclick</a>

The HTML will validate, but if JavaScript is disabled the link won’t go anywhere, and it can’t be copied via a contextual menu. On top of that clicking on the link will cause the page to jump to the top, unless you add “return false;”:

<a href="#" onclick="window.open('http://www.example.com/'); return false;">Using Onclick</a>

Another approach to avoding the jump was to place JavaScript within the href attribute:

<a href="javascript:window.open('http://www.example.com');">Using inline JavaScript</a>

While inline JavaScript has its novel uses, this isn’t one of them. This method doesn’t offer much over the previous one and can be complicated even further when a wrapper function is called instead:

<a href="javascript:wrapperfunction();">Using inline abstracted JavaScript</a>

The only way to fix the issue of JavaScript being disabled was to put the link back in the href attribute:

<a href="http://www.example.com/" onclick="window.open('http://www.example.com/'); return false;">Improved use of onclick</a>

Using “return false;” stops the link from executing, allowing the URL to be put back in the href. This is the farthest I’ve seen any site go. it’s technically complete, but redundant. One last bit of JavaScript fixes that:

<a href="http://www.example.com/" onclick="window.open(this.href); return false;">Ideal use of onclick</a>

The redundancy is elimanted by using this.href. “this” refers to the current object in context, being the A tag. The “href” references the A tags href property and the value (URL) contained within.

The end result is a small generic addition to any A tag to make it open in a new window. The tag will pass HTML strict validation, “SEO” is preserved and if JavaScript is disabled everything keeps working.

Removing automatic quotes from the q (quote) tag

Sunday, December 21st, 2008

Just a quick note, if you’re ever looking to remove the automatically generated quotes from a <q> (quote) tag, all you need to do is use a little CSS to unstyle it.

q:before,
q:after {
content: "";
}

IE doesn’t understand this, but it doesn’t automatically make the quotes anyway. For more information see this article.

Updated: Full Window Flash (With Minimum Dimensions)

Friday, September 26th, 2008

I updated the Full Window Flash (With Minimum Dimensions), Done Right post. It now properly supports Firefox 3 and has been retested against Safari and IE 5 through 7. I also fixed a few more broken links and tried to spruce other things up as well. Feedback is encouraged.

Full Window Flash (With Minimum Dimensions), Done Right

Tuesday, June 3rd, 2008

2011-03-08 – Updated and now at:

http://dev.firefallpro.com/full-window-flash/

Original Article:

So you want to have Flash take up 100% of the browser window, but it also has to maintain minimum dimensions so content won’t be hidden if the window isn’t large enough. This will give Flash the ability to expand and contract as the user resizes the window, but if they make it too small scroll bars will appear. Achieving this involves a multistep process in order to properly support the most browsers (Safari, Firefox 2 & 3, IE 5 through 7).

Step 1: Create Your Container HTML File

Starting out with a HTML 4.01 Strict file is essential in creating a consistent experience. It’s time to get used to conforming to standards unless you want to mess around with multiple box models. No, you cannot use XHTML, no one should use it. Almost no one serves it properly and IE 6 has no clue what application/xml is. All you’ll do is force IE to render in quirks mode and use its box model.

Here is the start of a HTML 4.01 strict document as generated by BBEdit.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"        "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Full Window Flash With Minimum Dimensions</title> <meta name="generator" content="BBEdit 9.0"></head><body>

</body></html>

Step 2: Embed Your Flash with SWFObject 2

SWFObject 2 is a free JavaScript library that provides the ability to uniformly embed Flash while maintaining standards compliance and cross-browser support. I strongly urge you to check out the documentation as this article won’t go into any depth about its use.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"        "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Full Window Flash With Minimum Dimensions</title> <meta name="generator" content="BBEdit 9.0"> <script src="js/swfobject.js" type="text/javascript"></script> <script type="text/javascript"> <!--  swfobject.registerObject("flash_holder","7.0.19","swf/expressInstall.swf"); //--> </script></head><body> <div id="content">

  <!-- BEGIN: Flash Embed -->  <object id="flash_holder" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">   <param name="movie" value="flash.swf">   <param name="quality" value="high">   <param name="scale" value="noscale">   <!--[if !IE]>-->   <object type="application/x-shockwave-flash" data="flash.swf" width="100%" height="100%">    <param name="quality" value="high">    <param name="scale" value="noscale">   <!--<![endif]-->

    <!-- BEGIN: Alternate Content -->    <div>Adobe Flash is required to view this website. Please <a href="http://www.adobe.com/go/EN_US-H-GET-FLASH/" onclick="window.open(this.href); return false;">install</a> it and reload this page.</div>    <!-- END: Alternate Content -->

   <!--[if !IE]>-->   </object>   <!--<![endif]-->  </object>  <!-- End: Flash Embed -->

 </div></body></html>

Between the head tags the SWFObject JavaScript file is referenced, followed by the function call itself. Between the body tags two nested objects are used along with some IE conditional comments. If none of this makes any sense, you probably still need to read the SWFObject documentation. The important thing is to set the width and height of the both objects to 100%.

Stopping here would create a nicely embedded Flash file that will resize with the window. Though a little CSS needs to be added to make it properly fill the window.

Step 3: The CSS

CSS needs to be added to make sure the Flash fills the entire window. There are a variety of issues with full window content, the specifics which I no longer recall, so you’ll just have to trust me for the most part.

Add within the head tags the following CSS:

 <style type="text/css"> <!--  html,  body,  div#content {   width: 100%;   height: 100%;  }

  body {   padding: 0;   margin: 0;   background-color: #FFFFFF;  }

  div#content,  object {   overflow: hidden;  } --> </style>

Now the Flash should take up the entire window. Though this doesn’t yet solve the problem of enforcing a minimum size when a user resizes the window. The user could shrink the window down and miss important elements, but Flash has no way of telling the browser that needs to maintain a certain size. A little CSS is all it takes to address that in modern browsers.

 <style type="text/css"> <!--  html,  body,  div#content {   width: 100%;   height: 100%;  }

  body {   padding: 0;   margin: 0;   background-color: #FFFFFF;  }

  div#content,  object#flash_holder {   min-width: 800px;   min-height: 600px;  }

  div#content,  object {   overflow: hidden;  } --> </style>

There is some over-specification in there because of a Safari bug.

I purposefully said modern browsers, because IE 6 and below have no idea what min-width or min-height even is. Chances are forgoing IE 6 support is not a likely option.

Step 4: Making Up for It with JavaScript

Even though IE 6 doesn’t support the CSS that would make this process complete doesn’t mean it has to get any more difficult. I created a JavaScript function called minsize()* to emulate the absent behavior.

<head>...<script src="js/minsize.js" type="text/javascript"></script>...</head>

The function takes the ID of the element you want to set minimum dimensions to, followed by the width, then the height. It should be wrapped in a IE conditional statement and placed at the end of the document before the closing body tag.

<!--[if lte IE 6]><script type="text/javascript">minsize('content',1000,750);</script><![endif]-->

*Please do not redistribute this file. The credits within need to remain intact. I also ask to be notified of any changes or improvements so I can update and repost the file as needed.

Step 5: Dealing with “Click to Activate”

Certain versions of IE will display a message around a Flash embed saying that it must be clicked to activate. This is due to that whole patent mess. Microsoft eventually licensed the patent so not every version of IE is effected. This can also be solved with another JavaScript workaround that should be included at the end of the document before the closing body tag, wrapped in IE conditional comments.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"        "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Full Window Flash With Minimum Dimensions</title> <meta name="generator" content="BBEdit 9.0"> <style type="text/css"> <!--  html,  body,  div#content {   width: 100%;   height: 100%;  }

  body {   padding: 0;   margin: 0;   background-color: #FFFFFF;  }

  div#content,  object#flash_holder {   min-width: 800px;   min-height: 600px;  }

  div#content,  object {   overflow: hidden;  } --> </style> <script src="js/minsize.js" type="text/javascript"></script> <script src="js/swfobject.js" type="text/javascript"></script> <script type="text/javascript"> <!--  swfobject.registerObject("flash_holder","7.0.19","swf/expressInstall.swf"); //--> </script></head><body> <div id="content">

  <!-- BEGIN: Flash Embed -->  <object id="flash_holder" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">   <param name="movie" value="flash.swf">   <param name="quality" value="high">   <param name="scale" value="noscale">   <!--[if !IE]>-->   <object type="application/x-shockwave-flash" data="flash.swf" width="100%" height="100%">    <param name="quality" value="high">    <param name="scale" value="noscale">   <!--<![endif]-->

    <!-- BEGIN: Alternate Content -->    <div>Adobe Flash is required to view this website. Please <a href="http://www.adobe.com/go/EN_US-H-GET-FLASH/" onclick="window.open(this.href); return false;">install</a> it and reload this page.</div>    <!-- END: Alternate Content -->

   <!--[if !IE]>-->   </object>   <!--<![endif]-->  </object>  <!-- End: Flash Embed -->

 </div><!--[if lte IE 7]> <script src="js/clicktoactivate.js" type="text/javascript"></script><![endif]--><!--[if lte IE 6]> <script type="text/javascript">  minsize('content',800,600); </script><![endif]--></body></html>

I hope you’ve enjoyed scrolling to the end of this document as much as I did writing it. Here are the referenced files:

Now at: http://dev.firefallpro.com/full-window-flash/

Completed HTML
minsize.js (1.0.001)
clicktoactivate.js
SWFObject

Please send me comments on how I can improve this process or minsize.js. I will try to keep this document up-to-date and expand it if necessary.

BlogSpot SPAM Heuristics

Saturday, April 19th, 2008

Like many people I too get a lot of SPAM containing links to BlogSpot pages. The whole point is for a user to see a fairly trustworthy domain in an e-mail and click on it, then get quickly redirected to the intended site. I always thought it was strange because while the e-mails can not be stopped, Google could perform heuristics based scanning of the BlogSpot pages for questionable HTML and JavaScript.

Taking a few minutes, I decided to visit one of the BlogSpot SPAM sites with JavaScript off. I fully expected to see an instance of window.location, instead it was similar to:

document.write("<meta content='0;URL=http://www.example.com/?"+location.search.substring(1)+"' http-equiv='refresh'/>");

The page also was for the most part blank. It wouldn’t be much of a stretch to say that many of the other BlogSpot SPAM pages were employing similar methods. I attempted to find a Google Search that would let me search only within site source code, but was unable to.

It is my hope that within Google either efforts to do this are already underway or could be considered. Even if just given the right starting point I’d be glad to help come up with a set of heuristics to quickly flag-out these sites. If anyone reading this knows of search engine that is capable of doing HTML source searching, let me know.

The One Hand Bandit

Friday, November 16th, 2007

Our good friend Ryan O’Neil needed a site that allowed him to easily connect with his fans. A blog alone would’ve done the trick. However, a standalone blog based on pre-built templates just doesn’t offer a level of personalization and uniqueness that an artist deserves.

The solutions to these problems are not difficult or complex. The solution is to blend together the ease of use of a blogging platform with the extensibility of Strict HTML and CSS.

As is the case in most of our projects, the objectives are clear: cleanliness in design, simplicity in maintenance, value through simplicity, a stable foundation, and an adherence to standards through semantic markup.

All Ryan has to do is focus on the message. We take care of the rest.

U.S. States CSV / SQL

Thursday, October 11th, 2007

I needed a mySQL table containing the common names of the U.S. States and their two letter abbreviations. I quickly Googled and couldn’t find anything. Maybe I didn’t search long enough. All I found was a Wikipedia article that listed them.

I grabbed the contents, formatted them with BBEdit to a CSV and imported them into mySQL. Just so no one else has to do that, here you go: state.csv, state.sql

Hope this helps someone.