Shape Shed

Drag and drop in HTML5

2009-07-02T11:22:01Z

HTML 5 has the ability to create drag and drop events. This example only works in Firefox 3.5 and Safari 4 but here's a quick tour of how it works.

Not interested in the explanation? Go straight to the demo page or download the source code from Github

Browser based computing

The more I explore HTML5 the more I feel that a browser based Operating System is coming sooner rather than later. Drag and drop is another important feature that will make this happen. Granted the spec is still work in progress but in Firefox 3.5 there is a workable API that developers can use and build UIs with. For this simple example I'm proposing that a user will want to drag a file to the trash. Later on I might take this further and implement a light client-side database using storage, but for now you can only drag a file to the trash. This example only works in Firefox 3.5

Creating the drag

To make an element draggable you can do this.

<li draggable="true" id="file1" ondragstart="drag(this, event)"><span>filename.txt</span></li> 

To create a draggable area you can do this.

<div id="trash" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false"></div> 

Then you just need a bit of JavaScript to hook it all up

function drag(target, e) {
    e.dataTransfer.setData('Text', target.id);
}
function drop(target, e) {
    var id = e.dataTransfer.getData('Text');
    target.appendChild(document.getElementById(id));
    e.preventDefault();
} 

A dose of CSS3

The example also features CSS3 (border-radius, box-shadow, text-shadow, rgba) and @font-face embdding with the excellent open source Junction font.

Reservations

Because I'm a standards zealot I'm not sure about the inline javascript proposed in the spec. There is also a big issue about what happens for users who cannot use the mouse. These are all expected issues though that I hope will be ironed out. Great progress has been made already.

The HTML 5 Video Element

2009-06-05T10:35:43Z

HTML 5 makes adding video to your site a great deal easier with video tag. Issues of videos codecs, browser support and accessibility need to be resolved but somewhere down the line video will get a whole lot easier.

Not interested in the explanation? Go straight to the example.

Current best practice

Current best practice is to use SWFObject to write a player like the JW FLV Media Player or Flow Player. Both of these are Flash players so if users don't have Flash or JavaScript they get no video. Web authors can offer alternative HTML content through this method but it has always felt clunky.

A shiny new element

Enter HTML 5 and the video element. No need to use a third party player - video is available within the HTML specification. Here's how you would add a video to your page:

<video src="/video/your_video.ogg" controls="true">
Your browser doesnt support the video tag. You can <a href="/video/your_video.ogg">download the video here.</a>
</video> 

The following attributes are available:

src: The gives the address of the video
poster: This gives the address of an image to show when video data is not available
autobuffer: This hints to the user agent that the content is likely to be used
autoplay: This auto starts the video
loop: This will loop the video
controls: Choose whether to show video controls or not
width: The width of the video
height: The height of the video

Issues

There are ongoing issues that need to be resolved, not least of which is browser support. Currently Firefox supports the ogg codec whilst Safari supports h.264. Opera is also supporting the .ogg format. Secondly anyone who has worked with videos will understand the plethora of codecs. Some of these are open formats, others are proprietary. For the proprietary codecs browser vendors will need to decide whether to fork out for expensive licenses or just support open codecs. Finally the accessibility question needs to be addressed. Should accessibility be embedded in the browser player (subtitles, transcript) or should this be handled another way?

Likely to be a while

Ubiquitous support for the video element is likely to be a long way off but at some point using video on a site is going to be much easier and developers won't need to rely on third party players - it will be part of the browser.

See the HTML 5 video demo.

The continued need for semantic HTML

2009-06-04T12:11:42Z

Two new search tools in Wolfram and Google Squared have been released that demonstrate the need for a standards based approach to web semantics and data.

HTML is king

From its invention in 1989 to present day developments, HTML has been the foundation for documents on the web. Documents are marked up by humans or machines using HTML and pushed into the ether of the web where they are subsequently consumed by humans and robots. Initially the HTML specification worked well for creators and consumers alike and Google, the most ubiquitous search service, grew out of the ability to parse and intelligently index HTML content. Google did this so well the company name became a verb synonymous with discovering things via the internet. Fait accompli you might think.

Innovation

Google produced a product that killed others, but with the emergence of Web 2.0 (a much maligned term if ever there was one) Google's standard search engine is beginning to look behind the times for a number of reasons. Content is being generated more quickly and more frequently. Services like Twitter are quicker to return results in nearly real-time and APIs are allowing developers in userland to create custom views and mashups of disparate sets of data.

Huge effort for low return

Of course Google continues to innovate but in using Google Squared I couldn't help feeling that a massive amount of human and computational effort had been extended on my search of British Beer. I can only imagine the data harvesting and algorithms that are going on behind the scenes to give me three results. Granted of course that Google Squared is still a labs product.

The same is true of Wolfram which is attempting to make search computational. In terms of aggregating disparate pieces of information it must be reliant on some hefty algorithms and a lot of processing power.

More complex than it should be

Indexing, storing and processing data seems more complex than it should be. Yahoo's YQL seems to turn the data harvesting and algorithm heavy model on its head. By making data available through Open Tables there is a RESTful route to the primary source data that is available to anyone. Essentially the World Wide Web becomes its own database. The web exists as the data and a giant relational database with the ability to create meta views of that data. There is no need for it to exist in multiple instances in search engine datacentres. I am not saying that traditional search engines are going to go away, but that from a design pattern perspective the Open Tables model seems a cleaner and more efficient way of retrieving data from the web.

In addition to APIs and YQL (which is essentially an attempt to standardise an interface to APIs) is a long-standing move to add more semantic meaning to HTML. Microformats have emerged as a genuine means of adding additional semantic meaning to HTML and allowing third party services access to data in a standardised, structured way. Microformats exist for contact information, calendars and reviews. This allows parsers to access the primary source of data and use it however they like.

I even produced an example of how Microformats can return contact details from a URL. No need for a third party search engine - instant access to the primary data source in real time.

Standards needed

What struck me about Google Squared in particular was that pretty much everything it was trying to do could be solved by giving HTML more semantic meaning. Of course defining this is a massive task but in a previous job as an Information Professional, I learned that for good reason there are international standards for indexing books, journals and data that knowledge professionals rely on. In my opinion the web is still badly lacking these standards and frameworks for giving content semantic meaning.

Google's goal is "to organize the world's information and make it universally accessible and useful". The goal of the World Wide Web in general should now be to make world's data universally accessible. The means for controlling access to open data are coming along nicely and as a community I feel we should redouble our efforts to make sure data is open to all. YQL and Microformats show that standardising APIs and Semantic HTML respectively can be done at a meta level. For me harvesting massive amounts of data in the search space is not the way to go. Instead we should work towards creating a standards based approach to open data on the web.

Techno kittens love HTML5

2009-06-01T16:15:34Z

The kittens are jumping up and down. Why? HTML 5 offers an open set of standards for drawing animations and complex user interfaces.

View the demo page or download the source code

Browser Support

The latest versions of Safari, Firefox, Opera, or Chrome all support the canvas element. Internet Explorer doesn't. If you are reading this using Internet Explorer you are probably in the wrong place anyway.

Why is this good?

There are no third-party plugins like Flash or Silverlight needed.
It is made using open standards
You can view the source
Because it uses open standards machines and people will be able to easily read and understand it.

ExpressionEngine permissions shell script

2009-05-03T10:33:54Z

Every ExpressionEngine install requires that a number of permissions are set on folders and files. Here's a shell script to do the hard work for you.

Download

If you are comfortable using shell scripts you can download the file here. The file sets all the necessary permissions on a default installation of ExpressionEngine and allows you to specify a custom system folder name if you have set one. If you are not comfortable using shell scripts I've written a how to article for OSX and Linux.

Script usage

To use the script change directory to the root of your ExpressionEngine install and run:


exp_permissions.sh

You'll be asked for the system folder name. If you have changed this for any reason enter it here. If you have not changed it just hit return.

If all goes well you won't see anything. If for any reason the script cannot find the folders it will tell you.

What it does

The script sets file permssions as detailed on the ExpressionEngine installation page.

License

The script is licensed under an Apache License, Version 2.0.

Using custom shell scripts on OSX or Linux

2009-05-03T10:19:32Z

Custom shell scripts allow you to do pretty much anything. Here's a short tutorial on how to set up either OSX or Linux so you can use custom shell scripts on your system.

Configuring your environment

I'm assuming here that you are on a POSIX compliant system (namely OSX or Linux). First let's make sure we are in our home directory. On OSX or Linux in a terminal run:

cd

Standard practice is to keep user shell scripts in a bin folder in your home directory. You may or may not have this folder depending on your operating system. If it doesn't exist create it:


mkdir bin

So on OSX the folder path will be /Users/george/bin. On Linux it will be /home/george/bin. Remember 'george' will be whatever your username is.

Ensuring bin is in your path

To be able to use the shell scripts from our bin folder we need to make sure that this folder is in the $PATH variable. The shell looks in this folder when you issue a command.

If you are comfortable with vi use these commands. If you are not comfortable with vi you can use textedit in OSX or gedit on Linux.

cd #change to home directory
vi .bash_profile 

Add the following line to this file


PATH=$PATH:$HOME/bin

For the changes to take effect you need to reload your profile. I'm assuming you are still in your home directory.


. ./.bash_profile

Adding scripts

Now we can just drop shell scripts into the bin folder. To use them we must make sure they are executable:


chmod +x yourshellscript.sh

That's it. Now you can call your shell script from the command line using


yourshellscript.sh

Ubuntu 9.04 Jaunty Jackalope Released

2009-04-23T13:04:10Z

The latest release of Ubuntu is now available, featuring faster boot times, a growl-style notification system and updates to bundled software.

Desktop Linux + Usability

A fair critism of Linux Desktops is that they are not particularly usable. In short they fail the Mum test - it is unlikely your Mum could turn on a Linux machine and start using it.

The Ubuntu project recognises that historically Desktop Linux has not been particularly usable and has been working hard to build on UI improvements. Bundled with the 9.04 release is a new desktop notification system, specific to Ubuntu. The design and positioning of notices suggest that the idea is heavily borrowed from Growl notifications in OSX but the implementation is neat. In my experience it works really well for Twitter, music and mail notifications. This is just the kind of UI improvement that will invaluable to non-technical users.

Free Software

Ubuntu comes with a wealth of free software that makes it a real contender for cash-stapped students, businesses and individuals. You get the latest version of Open Office, a mail client, Instant Messaging and much more installed by default. With a bit of training for users I don't see why businesses (especially small businesses) would not consider this a viable option. Furthermore a vast array of additional software is available via the very easy to use Package Manager.

Access for all

The Ubuntu project has stated that it wants to change the status quo in computing. They want to open up computing and the internet to everyone, regardless of wealth or education. I really applaud this ethos and feel that web designers sitting behind £2000 Apple machines often forget that there is a growing digital divide in society and the world in general. Yes the Ubuntu project is utopian in its aspirations but I do agree that the internet should be available to all regardless of wealth or geographical location.

Eye candy anyone?

Not specific to Ubuntu (it is available on most Linux desktops) is a dazzling and sometimes overwhelming array of Desktop effects via Compiz. Apple has long led the market in terms of visual appearance but Linux is catching up and I'd argue pushing the envelope. Here's a quick video of some of what's on offer:

Ubuntu 9.04 from George Ornbo on Vimeo.

Congratuations

So congratulations to Canonical for getting another release out of the door and if you haven't given Ubuntu a go yet why not try out the new release?

Testing with IE6, IE7 and IE8 on VirtualBox

2009-04-14T13:37:58Z

I've recently moved from using Parallels for browser testing to Sun's Open Source VirtualBox. Here's a walkthrough on how to get a browser testing suite for free on OSX or Ubuntu.

Microsoft's Virtual Hard Drives

Microsoft make a series of downloads available for web developers to ensure browser compatibility. Currently you can download IE6-8 on XP and IE7 on Vista. The good news is that they are also free so there is no need to buy a Windows license if all you want to do is browser test. The images generally expire at the end of each quarter but it is fairly trivial to download a new version.

Extracting the .exe

The downloads are available as .exe files so you will need to extract them first. On OSX I use Stuffit which extracts .exe files on the free version. Andrew Odri also has a write up on this and he recommends using The Unarchiver although this didn't work for me.

On Ubuntu you can use Wine:


sudo apt-get install wine

Once installed you can use Wine to extract the exe:


wine /path/to/yourexe.exe

Get VirtualBox

Next download and install VirtualBox. On OSX you can download a .dmg file. On Ubuntu the following will install it for you:


sudo apt-get install virtualbox

Fixing Microsoft's duplicate identifiers

The Microsoft images all share the same Hard Disk Identifier which means that VirtualBox will only let you add one of the hard drives to the Media Manager. So we need to fix that. Hat tip to Andrew Odri for documenting this.

For OSX Download Q and then for each vhds we need to convert it to a vdi. This will allow us to test in parallel. On OSX run:

/Applications/Q.app/Contents/MacOS/qemu-img convert -O raw -f vpc yourVHD.vhd RAWimage.raw
VBoxManage convertdd RAWImage.raw NewVDIImage.vdi 

For Ubuntu get QEMU:


sudo apt-get install qemu

Once installed on Ubuntu you can then convert the .vhd to a .vdi

qemu-img convert -O raw -f vpc yourVHD.vhd RAWimage.raw
VBoxManage convertdd RAWImage.raw NewVDIImage.vdi 

Fixing drivers

Once you have set up your Virtual Machine and booted you will see a blue screen of death. This is because we still need to install some drivers. When booting hold down F8 and boot into Safe Mode with Command Prompt. Cancel any prompts that come up and at the DOS prompt enter

cd \WINDOWS\system32\drivers
ren processr.sys processr.old 

Restart the machine and then in the VirtualBox menu go to Devices > Install Guest Additions. Follow the prompts and install the additions. On Ubuntu I found I had to manually download the iso from the link supplied, then mount it in the machine settings before booting. Reboot when you are done.

Once rebooted at the DOS prompt type


D:\VBoxWindowsAdditions-x86.exe /extract /D=C:\Drivers

This will extract the VirtualBox drivers

Then within Windows do

Start > Administrative Tools > Computer Management
Select Device Manager.
Select Batteries, Unknown Device -> Disable
Select Network Adapters, Ethernet Controller -> Update Driver
Select Yes, now and every time, click Next
Select Install from a list or specific location, click Next
Enter location "C:\Drivers\x86\Network\AMD"
Click Finish

All done - repeat this method on the other vhds and you will then have a full IE6-8 testing suite that you can run side-by-side if you wish.

Credits

This article draws on knowledge gained from the following posts and I'm very grateful to the authors

Chroot SFTP users on Ubuntu Intrepid

2009-03-31T15:16:34Z

Newer versions of OpenSSH come with the ChrootDirectory directive that makes it easy to jail SFTP users to a directory. I've written about giving users a limited shell with older versions of OpenSSH but if you can run OpenSSH 4.9 or greater I recommend using this method.

Usual warning

This article is written for Ubuntu Intrepid 8.10 and should work for Linux distributions running OpenSSH 4.9 or greater. No responsibility is taken for data loss. You know the score - take backups and try it out of a test server if possible.

Create an sftp group

First we need to create an sftp group. This group will hold users who we want to chroot.


sudo groupadd sftp

This group is used in the ssh config file so in future we can easily add more users if we want to.

Create a user

Now we create a user that we want to have sftp access only. This user won't be able to login on a standard ssh login but will be able to login using sftp to transfer files. Replace user with whatever you wish. Set the home directory (in this case /var/www/vhosts/theirsite.com) to the folder you want the user to have access to.


sudo useradd -d /var/www/vhosts/theirsite.com user

Now set a password for the user:


sudo passwd user

Change the user's primary group to the sftp group we just created


sudo usermod -g sftp user

Then we need to set the user's shell to /bin/false


sudo usermod -s /bin/false user

Configuring OpenSSH

Now we need to configure OpenSSH.


sudo vi /etc/ssh/sshd_config

Change the Subsystem:

#Subsystem sftp /usr/lib/openssh/sftp-server
Subsystem sftp internal-sftp 

At the bottom of the file add

Match group sftp
    X11Forwarding no
    ChrootDirectory %h
    AllowTcpForwarding no
    ForceCommand internal-sftp 

Correct permissions

OpenSSH is sensitive to permissions so you need to make sure permissions are correct.

My vhost layout is:

theirsite.com
 - conf
 - logs
 - httpdocs
 - httpdocs
 - private
 - subdomains 

The important thing here is that the folder theirsite.com must be owned by root and in the root group. Providing you want to allow write access everything else must be owned by the user and in the sftp group. You could of course set custom permissions on sub-folders as you wish.

chown user:sftp -R theirsite.com
chown root:root theirsite.com 

In order for jailing to work correctly every folder above the theirsite.com directory must also be owned by root and in the root group. In this case this means the following folders.

/
- var
  - www
    - vhosts 

If these folders are not owned by root and in the root group the user login will fail.

So that's it the user should be able to login using sftp and you should have an extensible chrooted SFTP system.

Magento and ePDQ - Part 2

2009-03-24T12:43:08Z

Having successfully set up a Magento install I have now moved onto integrating ePDQ with Magento. I discovered there is no off the shelf gateway available for ePDQ so I had to write my own.

No ePDQ module available

After the initial excitement that an ePDQ module was available for Magento this turned out not to be true. The module stopped development a couple of versions ago so is no longer compatible with the latest version of Magento.

Steep learning curve

Developing for Magento is not straightforward. I had thought that a working knowledge of the Zend Framework would stand me in good stead but the Magento developers have extended this framework to bring some excellent features into play. These are not really documented anywhere however so I had to pick my way through a fair bit of source code to understand how Namespacing and the configuration setup worked for modules.

I used the Wiki article on creating a Custom Module with Custom Database Table and also used the excellent Module Creator available on that page. This set up a bare bones module and also helped me to understand how Magento works.

Hacking an ePDQ module

I worked through the PayPal module and within a couple of days understood how Magento manages code and also front end templates. I have to confess that this was a bit painful at times. There isn't a great deal of documentation available other than the phpDocs. Coming from a product like ExpressionEngine the forums are much less busy so I found a couple of questions I had went unanswered.

ePDQ support

On the ePDQ side the supporting documents are pretty good, although the support model relies on speaking to a developer at ePDQ. I found the support excellent once they did respond to my enquiries, but that it did take a little time. I wonder why they don't have forums where users can help each other out? I was incorrect in part one of this series that ePDQ doesn't have a sandbox available. Once I requested one this was set up pretty quickly.

A working module

So now I have a working module that I've shown to the client and that they are happy with. With a bit of tarting up I might even package it up as a product.

Impressed with Magento

Now that I've got my head around the architecture and namespacing (which is an great extension to PHP's native capabilities) I'm very impressed with Magento. For an Open Source project it is highly customisable and extendible. I'm now moving onto working with the client to define a structure for their products. I'll post about this process shortly.

My impressions so far are that even a relatively experienced PHP coder will need to take a day or so to become familiar with the architecture and setup of Magento. Once the learning curve is over it seems a very powerful piece of kit.

Shape Shed

Drag and drop in HTML5

Browser based computing

Creating the drag

A dose of CSS3

Reservations

Further reading

The HTML 5 Video Element

Current best practice

A shiny new element

Issues

Likely to be a while

Further reading

The continued need for semantic HTML

HTML is king

Innovation

Huge effort for low return

More complex than it should be

Standards needed

Techno kittens love HTML5

Browser Support

Why is this good?

Further reading

ExpressionEngine permissions shell script

Download

Script usage

What it does

License

Using custom shell scripts on OSX or Linux

Configuring your environment

Ensuring bin is in your path

Adding scripts

Related reading

Ubuntu 9.04 Jaunty Jackalope Released

Desktop Linux + Usability

Free Software

Access for all

Eye candy anyone?

Congratuations

Testing with IE6, IE7 and IE8 on VirtualBox

Microsoft's Virtual Hard Drives

Extracting the .exe

Get VirtualBox

Fixing Microsoft's duplicate identifiers

Fixing drivers

Credits

Chroot SFTP users on Ubuntu Intrepid

Usual warning

Create an sftp group

Create a user

Configuring OpenSSH

Correct permissions

Magento and ePDQ - Part 2

No ePDQ module available

Steep learning curve

Hacking an ePDQ module

ePDQ support

A working module

Impressed with Magento