Category: HTML

A Hypertext Markup Language post all versions from HTML 4, XHTML and HTML5.

August 17 10 / 228

Aloha Editor – Content editing the HTML5 way

The number of times I’ve built a website based on a CMS only to have the client utter the words “Oh I’m confused, it’d be so much quicker if you made the changes”. Right, so the CMS was a bit of a waste of time then! But fingers crossed thanks to Aloha Editor that may be a thing of the past. Often the problem clients have is actually finding the content that needs to be edited in the CMS; Aloha to the rescue!

What Aloha actually does is make the content editable right on the page; no need to jump into the CMS, find the page, make the changes then preview the result. Just click on the text you wish to edit and type away. Done! It’s hard to believe it actually works until you try it. Why not give it a go on their demo page. It incorporates a few HTML5 technologies which could cause issues with older IE versions, but the demo page seems to work (with a few quirks).

Quickly and easily edit the demo webpage.

The core has been written to be very small and streamlined, with additional functionality being added by the way of user contributed plug-ins. There’s already an extensive API for developers to play with so I’m sure many of the missing features will be plugged very soon.

There are alternatives about such as TinyMCE and CKEditor, but they’re integrated directly into a CMS’ administration pages rather than as an inline editor like Aloha. Now before you get too excited there are a few cons:

It isn’t as simple as just dropping the scripts into a page, it needs to be integrated into a backend system for the changes to be saved.
Still in early development so could be quite buggy.
Doesn’t work with Opera Browser at the moment but this is being worked on.
Some features aren’t available yet, like image / media insertion. But I’m sure these will be developed as it matures.

So there are still a few issues to iron out but it all looks very promising! There were even murmurs on Twitter today about a WordPress plug-in and a Drupal v7 module (not 6 though I presume) in development. So it won’t be long before we’ll be able to try it out on a live site; hopefully it’s also simple enough for clients to use too!

Also posted under: JavaScript, Ramblings
Tagged: CMS, content, html5, plugin
Comments: 0

July 17 10 / 197

Nooshu.com now with added HTML5 goodness

So I finally pulled my finger out and took the HTML5 plunge over the past day or so; the Nooshu WordPress theme now has a sprinkling of HTML5. Mmmm I have that warm fuzzy feeling of completeness! In all honesty it’s been an easy way to learn about the new HTML5 specifications (although they aren’t complete and won’t become a W3C recommendation until 2022… no that isn’t a typo!).

HTML5 has added a host of new tags which have much more semantic meaning. So instead of using ‘divs’ to section off areas of your page layout, you can now use:

1
2
3
4
5
6

<header></header>
<footer></footer>
<article></article>
<section></section>
<nav></nav>

It’s certainly a welcome addition to the modern web. My favourite part of HTML5 has to be the doctype (other than the canvas element):

1
2
3
4
5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


<!DOCTYPE html>

Look how simple it is! No more copy / paste from a previous project for this doctype.

My main concern when converting the theme to HTML5 was how it would work in IE; as IE8 supports parts of HTML5 but IE6 and IE7 not at all. When IE comes across a tag it doesn’t recognise it just ignores it. Since the tags aren’t recognised you won’t be able to style your lovely new HTML5 template in IE6 & IE7. Lucky you can patch this missing functionality using JavaScript. Remy Sharp has created a script called html5shim, that adds the missing tags to IE. Just add the following code to your header and you will now be able to style your HTML5 tags:

1
2
3

The script must be in the header and must fire before the DOM is created. The script simply creates all the new HTML5 elements using the document method ‘createElement’, you don’t even need to attach the created elements to the DOM! Now IE will recognise the tags and you can get on with your page styling. Yay!

Those who use WordPress 3.0 may have noticed that the default Kubric theme is no more and it’s been replaced with a new theme called twenty ten. The theme uses the HTML5 doctype but it doesn’t use any of the new tags. I guess because of the IE issues. Maybe this will be changed in future releases.

The Nooshu theme is still a work in progress, and I’ll modify areas as I learn more about the new HTML5 features. Here are a selection of links that I found incredibly useful while working on the theme:

Dive into HTML5: Read through this article and you will be well on your way to learning HTML5. It delves into the history of HTML and progresses forward right up to implementing the new specifications.
HTML5 Doctor: Looking for HTML5 related news or need some clarification of a new tag? Look no further than HTML5 Doctor. Lots of articles available for you to read and there’s even the option to ask a question if you don’t find the answers you are looking for.
HTML 5 Outliner: So you’ve created your shiny new HTML5 template; why not check it with the outliner to see if it makes sense to a user / search engine.
W3C Markup Validator: It’s been a while since I’ve used a validator since I have one built into Firefox, but the W3C validator was very handy for pointing out attributes and tags that are no longer supported in the specifications. It also gives you a quick benchmark to aim at.

If you have any other useful HTML5 tips and links let me know below.

Also posted under: Browsers, CSS, Wordpress
Tagged: code, html5, semantics, site
Comments: 0

June 15 10 / 165

High Resolution Icons for Google Chrome

I’ve been using Google Chrome as my default browser for quite a few months, I still use Firefox for Web Development but for general browsing you really can’t beat the speed of Chrome. One of my favourite Chrome features is the ‘Create application shortcuts…’ function. Creating an application shortcut essentially adds an icon to your desktop, Chrome will then run the web application like it is a free-standing desktop application (you still need to be connected to the internet unless it uses some form of offline storage).

If you are a Gmail user I highly recommend creating an application shortcut to see this function in action. One thing you will notice when you create the shortcut with Gmail is it uses a high resolution icon. If you create a shortcut using a standard website, by default the favicon.ico is used. As the favicon is limited to 16 by 16 resolution it will look very ugly blown up on your desktop.

Various application shortcuts I've created

You can really see the difference between the Gmail icon (left) and the standard favicons.

The image above really illustrates the difference between a 16 x 16 icon and a high resolution version. Now of course you could just change the icon in the Windows properties…. but that’s boring. Why not offer your users a high resolution image along with the standard favicon? It really is very simple:

1 2	<link rel="icon" href="/icon_32x32.png" sizes="32x32" /> <link rel="icon" href="/icon_48x48.png" sizes="48x48" />

Simply place this code in your head tag of your web application and link to the corresponding icons. Now when your user creates an application shortcut they will have a nice high resolution icon on their desktop.

You can really see the difference when you add a high resolution icon

I’ve added a high resolution icon for my blog administration, now if only F1 live timings would do the same. For those of you who want to add a high resolution icon to your WordPress blog add the following code to your functions.php:

1
2
3
4
5
6

function wp_hi_res_admin_icons() {
echo '<link rel="icon" href="/wp-content/themes/' . basename(dirname(__FILE__)) . '/images/icon_name_32.png" sizes="32x32" />'."\n";
echo '<link rel="icon" href="/wp-content/themes/' . basename(dirname(__FILE__)) . '/images/icon_name_48.png" sizes="48x48" />'."\n";
}
add_action('login_head', 'wp_hi_res_admin_icons');
add_action('admin_head', 'wp_hi_res_admin_icons');

This will add the icon code to your administrator login panel and dashboard; or paste the raw HTML into your header.php so all users can see the icons.

Also posted under: Browsers, Ramblings
Tagged: browser, icons
Comments: 0

May 11 10 / 130

Investigating the HTML5 Drag and Drop API

One of the many new API’s available to developers with HTML5 is the Drag and Drop API. Drag and Drop is nothing new, it has been available for quite a few years now using JavaScript libraries (Prototype + script.aculo.us, Mootools, jQueryUI, YUI), and even in IE; HTML5 drag and drop is based on work done by Microsoft in 1999 (wow!). That being said, each library implements it in their own specific way, usually this isn’t a problem but it means all developers on a team have to know how that library works, which isn’t always the case. Luckily the HTML5 D&D API promises to level the playing field by supporting drag and drop natively in the browser using vanilla JavaScript (but how long it will take for this to happen is anybody’s guess).

It’s an interesting time for JavaScript libraries with these new native browser API’s coming out. I’m guessing it will be a case that if the browser supports drag and drop natively the method will be used, if not then fall back the the library implementation. For the developer this should mean no extra code, but for the library authors it could be a little tricky as browsers gradually roll out native support. Browser sniffing is never a good thing, but if browser vendors don’t agree on it’s implementation it may be required.

To see how HTML5 drag and drop works I’ve put together a simple little experiment. The experiment allows you to drag a thumbnail image onto a drop area to load a larger version of the image using the canvas element. It’s easy to see how this could be adapted for use in an e-commerce shopping cart or an online web application (perfect for iPad users!). Note: I’ve only tested in FF 3.6, I don’t want to get into the cross-browser issues (yet!), but for more information about what a mess it seems to be take a look at “The HTML5 drag and drop disaster” by Peter-Paul Koch.

It’s fairly simple to start using the drag and drop API, you just need to add a couple of attributes and events to an element to make it drag-able, then attach events to the drop element to do something with the data from the dropped element:

1
2
3
4
5
6

<li draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'bonfire'); event.dataTransfer.mozSetDataAt('application/x-moz-node', event.target, 0);">
<img src="images/bonfire.jpg" alt="bonfire" id="bonfire">
</li>

<div id="drop" ondragover="dragDrop.imageDragOver(event);" ondrop="dragDrop.imageDrop(event);" ondragleave="dragDrop.imageLeave(event);"></div>

Now create a function that will fire once an element has been dropped; this will collect the data from the element and do something with it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

{
//.....
imageDrop: function(event){
//Does the drop contain node data?
var isNode = event.dataTransfer.types.contains("application/x-moz-node");

var imageData;
//Look for node data first, fall back to plain if unavailable
if(isNode){
var nodeData = event.dataTransfer.mozGetDataAt("application/x-moz-node", 0);
imageData = nodeData.id;
} else {
imageData = event.dataTransfer.getData("text/plain");
}
//Pass the data to the image load function
this.loadCanvasData(imageData);

//Prevents page jumping to the image
event.preventDefault();
},
//.....
}

As you can see from the example above, it is possible to pass different types of data to the drop element. These include plain text, links, HTML / XML, files, images and document nodes. I’ve used the document node data by default and have added a check to see if the dragged element has any node data attached to it, if not it falls back to plain text data. You can see this check in action by dragging image two over the drop area. The background will turn red signalling that there is no node data attached. If you wanted, you could restrict what data type accepted by the drop box, but I added a fall back instead.

The example only took a couple of hours to put together, it may be very simple but it demonstrates how easy it is to implement the drag and drop API into your web application (assuming all browsers agree on how it should be implemented!).

Also posted under: Canvas, Experiments, JavaScript
Tagged: api, drag, drop, html5, image
Comments: 0

May 4 10 / 123

Aptana on Steroids using Zen Coding

I’ve mentioned before in previous articles that Aptana is my IDE of choice; one which I’ve been using for a few years. I only use a handful of the many features available in Aptana, all of which are also available in other editors (Notepad++ being one), but I’ve got so used to the way it works I’m sticking with it for the moment.

One of Aptana’s helpful features is the ability to generate code using the easy to access menu bar at the top of the code window (see image):

Aptana has a host of code helpers available

Generate and wrap code at the touch of a button

A superb feature it must be said, but it is totally eclipsed when you start using the Zen Coding JavaScript Library. Zen Coding, written by Sergey Chikuyonok isn’t a JavaScript Library in the traditional sense, it isn’t uploaded and linked to in your web page; it’s installed as a plug-in for your selected text editor. As you can see from the list there are many versions available, so you aren’t restricted to only Aptana.

Let me explain what it does first, then I’ll show you how to install it (for Aptana). As a Front End Web Developer you will often find you’re writing out the same blocks of code again and again. You can just copy / paste then modify, but even that’s quite slow and tedious. Zen Coding uses a technology that you will be very familiar with: CSS selectors. It may seem confusing at first, but once you see it in action it makes perfect sense. Here are a few code examples I use all the time:

1
2
3
4
5
6
7
8
9
10
11
12

<ul id="mainNav">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>

Using simple CSS selectors we’ve been able to quickly generate an unordered list that can be used for example, as a page navigation. You can even use more advanced selectors like siblings and abbreviated groups to generate more advanced HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>


<div id="content">
<div class="primary-section">
<h2 class="header"></h2>
<p></p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="secondary-section">
<h3></h3>
<p></p>
</div>
</div>

It may take a little while to get into the routine, it’s all to easy to slip back into typing the code by hand; but once you do you can build the basic mark-up of a page in a matter of minutes.

There’s a very informative article on Smashing Magazine from last year which you may find useful if you plan on investigating Zen Coding further; I highly recommend adding it to your “toread” list. There are so many more functions available that I haven’t even touched on in this article, you will be amazed.

Now that you’ve seen Zen Coding in action you may be wondering how you install it for use with Aptana. Well luckily it’s dead simple. First create a ‘new project’ in Aptana, call it whatever you like e.g. ‘Zen Coding’:

Within the new project create a scripts directory and copy the Zen Coding JavaScript into into the directory. That’s it you’re done! Restart Aptana and start using Zen Coding. Once you’ve typed in a string of CSS selectors you wish to convert to HTML, hit CTRL + E (Expand Abbreviation) and it will do the rest for you. One thing to note, you must keep the new project you’ve just created open at all times, else Aptana won’t be able to access the scripts.

You can customise the key you use expand an abbreviation by editing the “Key” value in “Expand Abbreviation.js”. For more information on available keycodes see the Aptana documentation here.

Hopefully you find Zen Coding useful, it’s certainly changed the way I code on a day to day basis.

Also posted under: CSS, JavaScript, Ramblings
Tagged: aptana, code, front-end, HTML
Comments: 0

Currently on page 1 of 512 3 4 5 Next »

nooshu - Matt Hobbs' Web Development Blog

Kneeling on the shoulders of giants

Category: HTML

A Hypertext Markup Language post all versions from HTML 4, XHTML and HTML5.

Aloha Editor – Content editing the HTML5 way

Nooshu.com now with added HTML5 goodness

High Resolution Icons for Google Chrome

Investigating the HTML5 Drag and Drop API

Aptana on Steroids using Zen Coding