Modernizr

Posted on by

last update : 18 January 2012
Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies. These technologies are new features that stem from the ongoing HTML 5 and CSS 3 specifications. Many of these features are already implemented in at least one major browser. Modernizr tell you whether the current browser has this feature natively implemented or not.

  1. Modernizr tests for over 40 next-generation features, all in a matter of milliseconds;
  2. Modernizr creates a JavaScript object (named Modernizr) that contains the results of these tests as boolean properties;
  3. Modernizr adds classes to the html element that explain precisely what features are and are not natively supported. It allow you to target specific browser functionality in your stylesheet ( if-statements in your CSS ). You don’t actually need to write any Javascript to use it.

I started with version 1.6.  and experienced a problem with Chrome 9 (beta) which was also reported by other people. The current version  2 was released on 1st June 2011.

With the help of the Modernizr library, the website haz.io gives a quick overview of a browser’s support for recent technologies in the world of HTML, CSS and Javascript.

 

How to make an iPhone web app ?

Posted on by

Tetris web app for iPhone

An iPhone web application (web app) uses Web 2.0 technologies to deliver a focused solution that looks and behaves like a native iPhone application. iPhone web apps run in Safari on iPhone, the unique implementation of Safari that provides full-featured web browsing on iOS-based devices and responds to touch-based gestures.

The Apple Safari Developer / Reference Library provides guides, tutorials, code samples, FAQ’s  and best practices about the creation of web content for iOS devices. The Safari Web Content Guide, the HTML Reference, the CSS Reference and the JavaScript Guide are key documents.

A very useful tutorial about the creation of an off-line Tetris game for an iPhone has been published by Alex Kessinger on the Six Revisions Website. A tutorial about how to install a web app on iPhones has been written by jeshyr on the iTalk Magazine.

There are several tools and frameworks available to build html5/css3 web apps for iPhones or for other mobiles (cross-platforms). A list of a few ones is shown herafter :

  • iWebKit 5 : an outstanding kit with copy and paste elements designed by Christopher Plieger and Johan Van Wilsum to create iPhone web apps.
  • Appcelerator Titanium : an SDK for different application environments. The SDK provides the necessary tools, compilers and APIs for building for the target platform.
  • Sencha Touch : a free HTML5 mobile JavaScript framework that allows you to develop mobile web apps that look and feel native on iPhone and Android touchscreen devices.
  • PhoneGap : an open source development framework for building cross-platform mobile apps with support of core features in iPhone/iPod touch, iPad, Google Android, Palm, Symbian and Blackberry SDKs.
  • Corona : fast and easy development tool for iPhone, iPad and Android games and applications.
  • jQuery Mobile : Touch-Optimized Web Framework for Smartphones & Tablets.
  • iUI: iPhone User Interface Framework
  • Dashcode : part of Apples iPhone SDK

There are also tools and simulators to test created web apps :

  • Bugaboo : an App for debugging web apps on iPhone, iPad, and iPod touch devices, downloadable from the Apple App Store.
  • iPhone  simulator : web browser based simulator

You have to be aware that there are some differences between iPhone native Apps and web apps.

A native App runs code (Objective-C program) on the device and is installable through the App store (if approved by Apple). You have access to all the UI elements the iPhone uses and can do things like 3D which are impossible in the Safari browser. You need a mac to make a native App, but you can make web apps with any platform of your choice.

A web app is accessed via the Safari browser and requires no install. You are just going to a website that has a special stylesheet for the iPhone. Because a web app can also be installed on an iPhone with a custom icon, a custom startup screen, a native look-and-feel and can be used even when the phone is not connected to the Internet, the differences between Apps and web apps are becoming very small.

There are a lot of native Apps that could be run more efficient as web apps. And there are tools to convert a web app into a native App. Make your choice !

iWebKit, jQTouch and iUI

Posted on by

iWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp.

iWebKit has been specially made for Apple mobile devices. Specific iphone css and html rules compatible with safari’s engine called “webkit” are used. Most browsers won’t be able to open an iWebKit site correctly, currently only chrome and safari do on a desktop PC ( http://demo.iwebkit.net).

iUI and jQTouch are frameworks that include all the css, javascript and images needed to build native looking apps.

jQTouch is a jQuery library, it’s functionality is currently comparable to  jQuery UI.

Manipulating HTTP Headers with .htaccess

Posted on by

Last update : July 25, 2013

.htaccess is a very ancient configuration file that controls the Web Server running your website, and is a very powerful configuration file. htaccess is sometimes called “HyperText Access” because of its ability to control access of the WWW’s HyperText Transfer Protocol (HTTP) using Password Protection, 301 Redirects, and much much more.

The AskApache website offers a lot of tutorials, tricks and hacks for webmaster and online tools related to .htaccess.

.htaccess tips and tricks are available at the corz.org website.

!DOCTYPE HTML

Posted on by

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.

Spoon virtualization

Posted on by

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.

Google Body and Biodigital Human

Posted on by

Last update : August 9, 2012

Google Body

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.

HTML5 Test website

Posted on by

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 :

  • Chrome Canari (beta 10.0.614.0) : 244 points + 13 bonus points
  • Chrome 8.0.552.224 : 231 points + 13 bonus points
  • Safari 5.0.3 : 207 points + 7 bonus points
  • Firefox 4 beta 8 : 197 points + 9 bonus points
  • iPod Touch 4 (version 4.2.1  8C148) : 196 points + 7 bonus points
  • Firefox 3.6.13 : 139 points + 4 bonus points (no H264 support)
  • IE 9.0.7930 : 96 points + 5 bonus points
  • IE 8.0.6001 : 27 points, no bonus points
  • BlackBerry Bold 9000 (version 4.6.0.126) : 14 points, no bonus points

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.

Disable Flash in web browsers

Posted on by

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 :

  • IE 8 : Menu Tools > manage external modules > disable Flash
  • Firefox 3.6 : Menu Tools > Modules > Plugins > disable Flash
  • Safari 5 :  Menu Settings > Preferences > Security > disable external modules
  • Chrome 8 : enter about:plugins in address bar > disable Flash in plugin list

WebGL – OpenGL for the Web

Posted on by

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 :