Blog

The (example) issue: A carpet company has a wide network of suppliers, each of which give the carpet company a basic (HTML/CSS/JS) page to put some content about the carpets, prices, contact information, company policy, etc. All of this information is available in the carpet company's TYPO3-powered website, and it's updated and improved regularly by the carpet company staff. Ideally the carpet company would like to have the updated information displayed on all supplier websites automatically. How can this be done? With TYPO3 and a bit of jQuery, we can quite easily achieve a workable solution!

Given in our hypothetical situation we are limited to HTML, CSS, and Javascript, one solution that comes to mind is using Javascript to pull in the desired content from the main carpet TYPO3 site. This can be accomplished using JSONP. For those unfamiliar, most browsers enforce a same-origin policy, which prevents us from making a simple AJAX call to get our desired data, so a site such as http://www.acmefloorsuppliers.com couldn't make a "normal" AJAX call to www.acmecarpets.com; it would be blocked by the browser. So instead, we essentially dynamically load a remote Javascript file/object/JSON, and then evaluate its contents. The magic here is that we pass a parameter to the remote server, which is a function name that the JSON return value is to be wrapped in. So, for instance, the GET string might be something like:

(acme carpet domain).com?eid=id_ajax&value=somevalue&callback=callback123

Our server side code on acmecarpets.com will return what is essentially a function call, like this:

callback123({"results":{"somevalue":"some return value here"}});

In the example below, I'm using jQuery (which I really love by the way!), which automatically takes care of the heavy lifting for us. It will automatically define the callback123 function (in reality this function name is automatically and dynamically generated by jQuery in the example below) and we are left with JSON to work with in our callback function.

Here is a working example in which individual content elements are pulled from tt_content based on their uid (which is what we're passing in with the GET parameter). Note that this is more of a proof of concept, and not a production-ready snippet. The server side code I wrote does a very minimal amount of security validation - without proper care, this type of script can be dangerous, so ultimately it's up to the developer to insure safety. The server side code only checks to see that the fe_user is not set for each content element. This example is also not particularly scalable, however it could be much more so if the server side code were fleshed out further. Also, this will NEVER be a great solution for any sort of crucial data. In my example, I have default content loaded in the event that the script fails to load external data; and in our carpet store example we might have a set of default information that is displayed, so in the event of a javascript (or external server) failure our distributors still have the critical information.

Enter list of content element IDs to load dynamically (ie 206,201,169)

Example content from different origin/domain (it might look familiar!)

Hi all! Kevin here, checking into the ol’ blogosphere to share with you a slice of my love for web application development, this time in the form of my recent HTML5 video tag experiences!

One thing that’s great about working at Infield Design is having the opportunity to work with clients that are not only open to using new technology, but excited about the idea! One of the more exciting up-and-coming trends in the web realm is the adoption and support of HTML5. The topic of HTML5 could (and does!) fill many a book, blog and forum, but of particular interest to me this week is the HTML5 <video> tag.

The humble <video> tag is one of the more significant and powerful tags offered in the HTML5 specification. It allows a wide range of devices and platforms to play video files, natively, without the need for Adobe Flash Player or other third party browser plugins. That’s great news for the majority of mobile users out there who aren’t able to view flash video. It’s even better news for our clients who would like to use video media to share product information, user generated content, or other marketing materials with their customers in the ever-growing mobile space.

Plus, the HTML5 <video> tag is really easy to implement and nearly foolproof!!

...in a perfect world.

In reality, the HTML5 video tag is not quite ready to be used out in the wild without some serious testing and (several!) contingency plans, in particular for mobile devices. To save everybody some time, I’d recommend checking out Video for Everyone, or use the handy HTML5 video generator ,which will help you to create a solid block of HTML markup with support for multiple video encoding formats and even an Adobe Flash Player fallback for older browsers that don’t support the HTML5 video tag (hello, Internet Explorer 6, 7 and 8!).  These are great tools and resources to help you get started with HTML5 <video>.

Unfortunately, one thing that can’t be solved with HTML markup is video support in Android browsers. Before Android 2.3 (Gingerbread), Google did not support <video> controls, so while the above resources will allow you to insert a video on an Android device, the video won’t actually play (which is sort of the point!) without some javascript. Luckily again, there are several great resources which will take care of most of the heavy lifting. MediaElement.js is a personal favorite of mine, but Video-JS is also very popular. My preference is to only use these javascript libraries where needed (for instance Android 2.2 or below devices) and allow for a native HTML5/Flash experience on devices that can handle it.

So, the HTML5 <video> tag - use it now, but be sure to spend some time testing on your client's targeted browser platforms. Be prepared for some small inconsistencies, but hopefully using some of the resources mentioned above you’ll be able to keep those to a minimal! On my to-do list: create an extbase extension for TYPO3 that will allow clients to upload a video file in ANY format, and then encode/transcode the video (using the wonderful Zencoder service) and generate a HTML5, IE and mobile (even Android!) friendly video player. Keep an eye out here at the Infield Design blog, and please, drop us a line with any questions or comments!