The declaration <!DOCTYPE HTML> must be the very first thing in an HTML5 document, before the tag. The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
The doctype in HTML 4.01 required a reference to a DTD, because HTML 4.01 was based on SGML. HTML5 is not based on SGML, and does not require a reference to a DTD, but need the doctype for browsers to behave as they should.
On November 8th, 2010, Spoon announced the immediate availability of the world’s first free cloud hosting service for desktop applications. Spoon allows software developers to make their existing desktop applications available in the cloud, with no installs. Spoon applications can be accessed from the Spoon.net library or embedded into any website, blog, or social edia service as a “Spoon Feed” with a single line of HTML.
Unlike other forms of cloud computing, Spoon completely preserves the richness and responsiveness of traditional desktop applications. Users can save files to local folders, print, and even migrate offline to continue working while disconnected. Spoon’s unique virtualization technology completely eliminates dependencies and conflicts, and seamlessly handles patches and upgrades.
Today I created an account at spoon.net and installed the spoon plugin. I was able to succesfully run different browser versions of Firefox and Safari in the cloud (without insallting these browsers on my laptop) to test the compliance of a current web design project with these browsers. I am impressed by this new cloud technology.
Last update : August 9, 2012
Google Bodybrowser
On December 15th, 2010, Google announced the launch in Google Labs of an interesting WebGL application called Body Browser, which lets you explore the human body just like you can explore the world in Google Earth.
Google Body (Google Human) is a detailed 3D model of the human body. You can peel back anatomical layers, zoom in, click to identify anatomy, or search for muscles, organs, bones and more. You can also share the exact scene you are viewing by copying and pasting the URL.
To view the body application, you need a Web browser that supports WebGL. I use Google Chrome.
The 3D body data was provided by the Zygote Media Group, Inc., a leading company in the development of Bio-Medical 3D content (since 1994).
Zygote offers stock 3D models, images and animation of the Human Anatomy Collections through the website 3DScience.com. These collections are the best and most comprehensive available. The artistic and illustrative value is unquestionable while remaining medically accurate.
3D anatomy collection of Zygote
Late 2011, the Google Body application was disabled. A commercial 3D platform BioDigital Human that simplifies the understanding of anatomy, disease and treatments has been launched in the meantime by Biodigital. Founded in 2002, BioDigital is the leading developer of state of the art biomedical visualization systems.
screen snap of the test results
A very useful HTML5 test tool has been created by Niels Leenheer. The goal is to show an indication of how well a browser supports the upcoming HTML5 standard and related specifications. The test tool was upgraded in June 2010 (see the blog).
The maximum score of the test is 300 points. The support of one or more codecs provides additional bonus points.
The results for my installed browsers are :
Niels Leenheer stated on his blog that there are problems with the HTML5 video codec detection in most browsers. Safari and Chrome report an answer “probably” with the javascript canPlayType() command even if the codec indicated is a dummy. I experienced the same behavior in my test environment. Today it’s not possible to check what profile is supported in browsers implementing the MIME video/mp4.
The Web Standards Project’s operates also a test website called Acid Tests site.
W3C provides the mobileOK Checker (version 1.4.2). This work is part of the MobiWeb 2.0 project supported by the European Union’s 7th Research Framework Programme (FP7). The checker is based on the open source mobileOK checker library developed by the Mobile Web Best Practices working group.
To test new web applications, it’s sometimes useful to disable the Flash Plugin in web browsers. The procedures to do this are quite different in the latest versions of the common browsers :
WebGL brings plugin-free 3D to the web, implemented right into the browser. Major browser developpers Apple (Safari), Google (Chrome), Mozilla (Firefox), and Opera (Opera) are members of the WebGL Working Group.
WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES 2.0, exposed through the HTML5 Canvas element as Document Object Model interfaces. It stays very close to the OpenGL ES 2.0 specification, with some concessions made for what developers expect out of memory-managed languages such as JavaScript.
WebGL is developped by the Khronos Group, a not for profit, member-funded consortium focused on the creation of royalty-free open standards for parallel computing, graphics and dynamic media on a wide variety of platforms and devices. The Khronos Group was founded in January 2000 by a number of leading media-centric companies, including 3Dlabs, ATI, Discreet, Evans & Sutherland, Intel, NVIDIA, SGI and Sun Microsystems.
A guide how to get a WebGL implementation is available at the Khronos wiki website.
The current stable version of the Google Chrome 8 browser can be WebGL enabled by entering about:flags in the address bar and enabling the feature. A better (default) support of WebGL is provided with the Google Chrome Canari browser (the development version 10.0.614.0).
The following links point to websites with useful informations, tutorials, tools and ressources about WebGL :
The mobiReady testing tool evaluates mobile-readiness using industry best practices & standards. The free report provides both a score (from 1 to 5) and in-depth analysis of pages to determine how well your site performs on a mobile device.
The WordPress Mobile Pack gets a high score with this test tool.
Trackbacks were originally developed by SixApart, creators of the MovableType blog package. It’s a notification method between websites working as follows :
Most trackbacks send to Person A only a small portion (a teaser called an “excerpt”) of what Person B had to say. One problem is that there is no actual verification performed on the incoming trackback, and indeed they can even be faked.
Pingbacks were designed to solve some of the problems of trackbacks. The official pingback documentation is available on the website www.hixie.ch.
The best way to think about pingbacks is as remote comments:
There are two significant differences between pingbacks and trackbacks : pingbacks and trackbacks use drastically different communication technologies (XML-RPC and HTTP POST, respectively) and pingbacks do not send any content.
A useful guide “Introduction to Blogging” with more details about trackbacks and pingbacks is published by WordPress.
last update : April 3, 2012
A native photo gallery feature and an image uploader was added to WordPress in version 2.5. The documentation for these features is poor. A useful guide is available at the website yourbloghelper. The official wordpress guide is available at the WordPress Codex pages, informations about the gallery shorcodes are also listed.
To add additional management tools and to customize the presentations, you need a WordPress plugin. There are several great plugins available, the most reknowned is NextGEN Gallery.
Alex Rabe started in March 2007 the development of the Nextgen Gallery Plugin for WordPress. Version 0.33 was released on April 23th, 2007. Thomas Boley, the creator of the WordPress Plugin mygallery, stated in mid-2007 that the Nextgen Gallery plugin was a copy of his own plugin with a few new features.
Version 0.8 of the Nextgen Gallery Plugin was released in January 2008. Version 0.92 worked fine with the new WordPress version 2.5. In june 2008, the number of downloads of the plugin reached the level of 200.000. The release 1.00 of the Nextgen Gallery Plugin was announced on December 11, 2008. One year later, version 1.7.2 was published.
Several developers joined Alex Rabe to progress with the enhancement of the plugin or to create useful addons. A much requested feature of the Nextgen Gallery Plugin was a search function. A tutorial how to add this feature was written by Colophon. A working gallery with the search function is available at the website of Aengus Moran. An addon to the plugin implementing a gallery search feature (admin side) has been created by Marco Piccardo. Alex Rabe published a script to search for images in the Nextgen galleries.
Today, NextGEN Gallery is a full integrated Image Gallery plugin for WordPress with dozens of options and features downloaded by more than 5 million users. The current version is 1.9.3.
An extended tutorial about wordpress galleries and the NextGEN Gallery plugin has been published by Len De Groot at the website of the Knight Digital Media Center (kdmc), UC Berkeley Graduate School of Journalism.
NextGEN Gallery uses templates to customize the layout of the photos in WordPress. A built in template is carousel [nddgallery id=2 template=carousel]. Other templates can be added in the folder /wp-content/themes/mytheme/nggallery/gallery-mytemplate.php. Seven different style-sheets can be chosen to display the albums and galleries.
NextGEN Gallery has a built in image browser. To prevent page loading at every click, AJAX pagination can be enabled, but this works only in combination with the thumbnail javascript effect generator Shutter.
A second default thumbnail javascripts is Thickbox (not maintained any longer). Thickbox displays images with a thick white border over a sheer gray background. Shutter displays images similar but without a border.
The javascripts for Lightbox and Highslide can be added manually, customized code links can be manually integrated for other thumbnail javascript effects.
An built-in slideshow with different transition/fade effects, based on JQuery Cycle, can be replaced by the flash based JW Image Rotator created by Jeroen Wijering.
To get the ID of the saved media, hover the mouse about the name of the media in the gallery and look at the displayed url.
Tutorials about css decorative galleries are available at the WebDesignerWall. More informations about NextGEN Gallery are available at the following links :
Last update : January 30, 2013
FOURCC is short for “four character code” – an identifier for a video codec, compression format, color or pixel format used in media files. Another way to write FOURCC is 4CC. To find out which FOURCC’s are used within a media file, you need to use an application specialized to open and inspect the media file. Gspot, MediaInfo and ACIcodec are some of the tools supporting FOURCC.
A list of a few hundred video-codecs is available at the FOURCC website, a list of RGB- and YUV-pixel formats is available at the same site.
For audio codecs it is not FOURCC’s that is used, but rather audio tags, or an audio identifier – that identifies one specific audio codec or one type of audio compression scheme. An audio tag is an integer decimal value, often specified as a HEX value.
A great website about video- and audio-codecs is MovieCodec Forums/Downloads.