chrismar.sh

web developer, movie lover and tea drinker

HTML5 – the future of web design?

June 4th, 2011

What is HTML5?

HTML is the language used for building websites.
What we see is not solely because of HTML – it’s the CSS that gives it shape.
An HTML page is a machine-readable page, the underlying structure.
Getting that structure right is important for SEO, because Google doesn’t ‘see’ the page as we do, only the code.
HTML5 enhances the existing language of HTML, giving it more flexibility and more power.

What isn’t HTML5?

It’s not a whole new language.
It’s not a futuristic new way of writing webpages.
It’s not CSS3 (but they go hand in hand and I will talk about it)
Unfortunately, it’s not universally supported yet.

When will it be ready?

Never. But already. W3C is moving away from releasing an entire specification in one go, and is updating the specification as browser makers start using the functionality. It’s built to be backwards compatible with old browsers, with some fallback occasionally necessary.

HTML5 and CSS3 are continually evolving specifications, so we can use as much or as little as we like now. In fact, HTML5 doesn’t even exist! The specification is now called HTML, to reflect the continuous updating of the spec.

Browsers (even IE!) are starting to understand that it is driven by their users’ innovation as well as by them. Having a standard across all the new technology makes sense for browser makers as it ensures their browser won’t be sidelined.

Even so, there are differences between browsers. Not just which HTML5 elements they support, but how they support them. We’ll have a look at these later.

What’s in it so far?

HTML5 reflects the way the web is changing – you can’t be sure that all users will be sitting in front of a desktop or laptop computer – they could be on their phone, a tablet, a TV, or an as-yet-uninvented device.

HTML5 is all about structure, so we’ll leave the look and design of the page to CSS and the designers. But I need to stress how important code structure is: it makes pages clearer, easier to style, better to read, quicker to load and more search engine friendly.

This is the hard part to explain to clients: you can have a page that looks exactly the same, but the underlying structure can be good or bad. So what structural elements does HTML5 have?

New semantic elements

What do we mean by semantic elements? An element is the building block of HTML, the tags that you’ll see on an HTML page, such as a <div>, an <h1>, an <a>, and so on.

Most of the tags have a meaning associated with them – the <html> tag goes around the whole document and tells the browser where the HTML document starts and stops, a <p> paragraph tag tells the browser that it’s a block of text, and so on. These elements are: html, head (but we’ll gloss over these for the time being), body, h1-h6, p, div, ul, ol and dl.

Web designers have been using the <div> tag as an empty block–level container to hold all sorts of different content – headers, footers, sidebars, blog posts, and so on. They’d then use an id or class attribute to hook up stylesheets to that div in order to position and style it.

However, the structure of a document was difficult to tell when the same element was used to denote lots of different parts. HTML5 introduces a new range of block level elements: article, aside, dialog, figure, footer, header, hgroup, menu, nav and section.

Inline level elements are ones that fit into the run of the page, such as an <em> tag to emphasise text, or the <a> tag to use as an anchor. In HTML these are: span, a, cite, strong, em, abbr, img, amongst others.

Again, HTML5 gives us a few new tags to define parts of the document: address, mark, small, time, details, meter. These fit within the body of the text to define different elements.

So for instance, whereas before you might have marked up a document like fig. 1, now you can mark it up like fig. 2. You can style the elements exactly the same, so the site will still look the same, but Google and other text readers will know what parts of your document are important, which is the navigation, and so on.

This has another benefit – different devices can latch on to different parts of the document to, for instance, build a table of contents or create a print version of a page.

So new semantic elements give us greater control on how our page is structured. There are also some useability additions that have some real benefits, especially in the mobile world.

Forms are ubiquitous on the web, and over the years web designers have been ingenious in making life easier, creating colour pickers, range sliders and AJAX autocompleters. HTML5 has added a range of inputs which make form filling even easier.

Currently we have text inputs, password inputs, file selectors, radio buttons, checkboxes and submit/reset buttons. The new input types, widely supported by Opera and, to a certain extent, Safari, are: date (lots of them!), email, color, number, range, search, tel and url, and some new elements in output, datalist and keygen.

You can see, in Opera, that the new input types react differently, calling a date picker and color picker, and having a user-friendly slider and number selector. Datalist gives you a list of potential choices (like a dropdown list) but also allows you to type your own choice (no more slecting ‘Other’ and then typing in your own option!).

Keygen is not widely enough supported to be worthwhile but help keep your form data secure by keeping a secure key on the server and in your browser and cross checking in subsequent form submissions. Output is a holder for the result of a form.

Why are these useful? Firstly, it makes form validation easier. Many browsers will have automatic checking of form fields, so an email address, a URL or a phone number can never have garbage data entered. Dates don’t get confused (mm/dd/yy or dd/mm/yy) and you don’t have to mess about with Javascript to create a colour picker or calendar.

What happens if a browser doesn’t support it? In all these things, there are fallbacks. Browsers that don’t recognise the tag, it uses a default, so we get the following (fig. 6 – 11). Even in IE6!

The other benefit is in user entry. In devices without built-in keyboards, the space available for the keyboard is at a premium. If you know that the input has to be a number, only showing a numeric keypad is an advantage. The iPhone (using Safari) has different keyboards for URLs (with a .com button) and email addresses (with an @ sign) (fig. 3, 4 and 5)

Lastly, there are the multimedia tags: audio, video and canvas. Canvas is a tag that started life to allow Apple users to create widgets. It essentially allows you to draw on the browser using Javascript. It’s good for games and online graphic effects, and is used in the text replacement technique Cufon, and there are a lot of people making some pretty cool things using canvas.

The audio and video tags are a huge step: having native audio and video playback makes it quicker to load and gives the user more control over the playback control. Flash, which is used in most places, is a good compression and playback tool but relies on an (often unstable) plugin. YouTube now uses HTML5 video in supported browsers.

Here’s where one of the browser differences kicks in: different browsers can read different codecs. A codec is a way of compressing video – so the difference between a .wav and an .mp3 for audio, or the difference between an .mpg and an .avi for video.

VIDEO CODEC SUPPORT IN UPCOMING BROWSERS
CODECS/CONTAINER IE FF SA GC O IP AN
Theora+Vorbis+Ogg • 3.5+ † 5.0+ 10.5+ • •
H.264+AAC+MP4 9.0+ • 3.0+ • • 3.0+ 2.0+
WebM 9.0+* 4.0+ † 6.0+ 10.6+ • 2.3‡

In addition, H.264 has some rather gnarly licensing issues. So there’s no common encoding that all browsers can use – in fact, the current thinking is rather complicated: offer all different encodings with a Flash fallback. At the moment most browsers will have a Flash plugin, so why waste time re-encoding your video?

Essentially, it’s about progressive enhancement. Having the video tag means that if Flash does drop out of favour in future browsers (as it has on Safari for the iPhone and iPad) your users can still view the video. Also, as the video tag is an HTML tag, you can manipulate it the same way you could with any other tag, and control it using Javascript.

Lastly, there are some attributes that you can give to these new tags that will help out: placeholder, that puts default text in an input; contenteditable, which gives you more control over whether a user can edit; lots more rel attributes saying where a link goes and how it relates to the current page; datetime, allowing you to specify a machine readable time (great for things like articles or offers); and the brilliant data-*, which allows you to attach any relevant data within a tag without exposing it to the user, almost like a storage system for tags.

They’re the new elements, which give us even greater control over the structure of our website, help search engines crawl our content better and allow us to separate out structure and design even more.

Web APIs

The other part of a web page structure is the technology it uses. All server-side technologies (such as ASP or PHP) serve up an HTML page, but most of the processing is done on the server. The client’s browser is given a dynamically generated but static page.

Javascript is used to dynamically change this static page – you can use it to do simple calculations, validate forms and highlight errors, and so on. And with AJAX, Javascript can even pop back to the server, make a request, and return to the page, without the page having to be resubmitted.

Browsers are becoming more and more powerful, taking advantage of faster processors in personal computers. HTML5 introduces a range of APIs (Application Programming Interfaces) that allow you to use the browser (and the device itself) to do a lot of processing.

Some of these can be fairly widely used, others will be brilliant but are a little too exclusive at the moment. Bear in mind that the iPhone and Android phones use a Webkit browser, which has good support for this stuff, so is something to bear in mind for future mobile developments.

  • Web sockets

    An open connection with the server to allow data back and forth

  • Server sent events

    Like push notifications, where the server can send info to browser

  • Web storage

    Taken over from WebSQL, to be able to store data on the clients browser. Works better than cookies or sessions, as they are specific to the window or group of windows.

  • Draggables

    Something that has to be done with Javascript at the moment, allows users to move things around on the page

  • History

    Problems with the back and forward buttons (for example with the Dashboard) are solved! You can intercept back button clicks or send a click to the back button

  • Web workers

    Usually web pages are sent as a whole page, but web workers can take several processes and run them all concurrently.

  • Clipboard

    Copying and pasting has always been a little tricky – some workarounds include using Flash, but that has its own issues

  • File API

    This allows you to manage files better, by dragging and dropping files from your desktop to a browser window, allowing better file transfer and easier file manipulation.

The following have very definite advantage in the mobile sphere:

  • Cache manifest

    The cache manifest allows you to specify which files you should cache to use in an offline situation, essentially allowing you to use a website even when you lose connectivity.

  • Contacts

    Use your computer or devices address book to get phone numbers, email addresses, physical addresses and so on.

  • Geolocation

    Find out where you are!

  • Web Messaging

    This allows different browser windows to communicate with one another – currently to do this you would have to store sessions, which is very clunky.

  • Web Notifications (dropped)

    Usually websites use popup windows or modal overlays to give the user feedback. But imagine if you can hook into a universal browser notification system, to display messages – you can leave your email open in a background window and still be notified when new messages come through.

  • Media capture

    Allow websites to capture, edit and manipulate media such as images, audio or video and save back to your computer. Use webcams and microphones to capture video and audio.

There are tools to do this on your computer already, but the important thing is that you can all of this in the browser. Websites will soon be able to do most of the things that you need separate programs for (in a similar way to Google Docs and Gmail taking the place of Word and Outlook).

In fact, the Google OS uses these ‘cloud’ services exclusively, so you keep almost everything on a website.

So that’s HTML5 covered, now on to the related issue of CSS3.

How does CSS work?

Cascading Stylesheets are the next stage up from the document structure: they lend form and layout to the document, and style the semantic structural blocks you’ve put in place with HTML.

So, for instance, you can say that you want all paragraphs to have a margin above and below them, that you want headers to be a certain font, colour and size, and so on.

CSS2 is now almost universally supported in browsers, and there is a new approach to CSS3. Similar to HTML5, browser makers are leading the way, with suggestions and comments from users helping them work out new features, which the W3C then turns into the specification. This is why you’ll often see “vendor prefixes” in CSS files: to allow users to use up to date CSS but without making other browsers fall over, prefixing a new and snazzy CSS term with –webkit, -moz, -o, -ms and so on mean it will be ignored by any other browser.

In reality, this means you often have to redeclare terms, until the standard is fixed upon. To get an element with the id of ‘sidebar’ to have a 4 pixel rounded corner I would have to write:

#sidebar {
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}

(The last one is there so that when it becomes a standard the style will be picked up).

So CSS3 is developing modularly, with parts of the spec being brought in as and when the browser makers agree on syntax and spec. So what modules are available?

CSS Modules

Lots of CSS3 properties are in this transition stage, so using them is a case of progressive enhancement.

It’s a good buzz word to use with clients, but what does it mean? Well, unless you’re a designer, you might think that rounded corners look lovely, but aren’t an integral part of the design of a site. So you add the CSS above and give a little extra treat for the growing number of people using advanced browsers.

With something like rounded corners, it’s possible to do using images, and extra divs, and a few other tricks, but they cloud the HTML code with unsemantic elements, aren’t scalable, require extra fixes themselves (what if it’s on a patterned bg?) and have the overhead of downloading more image files from the internet.

The best way round this, and the way of avoiding a common problem in the step between design and dev, is to design in the browser. If the client sees a JPG of a design, he’ll want the website to look exactly the same. No matter how well you explain that different browsers, screen sizes, colour balances etc. can affect websites, they’ll go back to the static design.

Developing in the browser allows you to show the design to the client in the browser they will always use. If it’s IE6, you’ll get feedback early on that things don’t look right, and you can fix them early. If he’s using Chrome, he’ll see all the jazzy effects. If he comes to see us and we view it here, and it looks different, then you can explain the “different browser, different monitor, different user” model.

So now on to the fun bit: what toys are available for us to use?

There are 45 modules (!) available, only 2 of which are at the Proposed Recommendation stage (ie the spec is ‘set’).

Some of the cool ones are:

  • Selectors/User Interface
  • Grid
  • Multicolumn
  • Text
  • Media Queries
  • Borders
  • Transformations (2D and 3D)
  • Math(s)

Why use unsupported elements and styles?

So if there’s so much patchy support for both HTML5 and CSS3, why use it? Years back, when the web was new and exciting, people were so excited to have information online it didn’t make a huge difference how that data was displayed.

Now, the web is everywhere, and people are using it not just at their desktop, but on laptops, tablets, phones, TVs, consoles, and lots more. In the same way that a computer in a car used to be a big thing, and all new cars now have several, the internet is informing our lifestyle.

So presenting the same data in multiple ways becomes more and more important. HTML is a logical progression, giving users more power to take control of the internet rather than serving it up as a prepackaged page. No two user experiences are the same, so we need to make sure we cover as many of those as possible.

Obviously we shouldn’t ignore those who are on less-advanced browsers, if we know it’s still a core part of our user base. But if you’re making a web app, then you can, and should, use the correct tools for the job, and technology that was current in 2001 (when IE6 came out) is now very dated.

The same is true of styling. Adding the extra flourishes and details is something that will reinforce the decrepitude of older browsers, and encourage browser makers to do more to update their browsers.

Chrome is already on version 10 of their browser, after 2 and a half years. It took Microsoft 5 years to upgrade from 6 to 7. The web moves quickly, and soon these will be everyday items in a web developers toolbox.

Browsers can use these tools now, and we lose out if we spend too much time looking back. They lend themselves to faster loading times, easily indexable and understandable pages, and user interaction.

Why is it important to Epiphany?

Epiphany doesn’t offer SEO, PPC or Web Dev in isolation. It’s an interactive thing – each feeds into the others. We understand that site optimisation is more than just driving traffic to the site, and that your website itself feeds into that crucial Google ranking or position on the Results Page. Plus, traffic being driven to a site means little if it doesn’t convert, and the usability of pages affects this.

We keep up to date with what search engines do to rank your page, and site optimisation is one of those. Pages that use native browser technology take less time to load, which makes the site better: better for users, better for server loads and better for Google.

It is important for any company working in the computer and internet industry to keep up with new technology, not just to be able to use the right buzzwords with clients, but to be able to explain our reasons for using it and, importantly, to deliver real measurable results.

Lots of the things we’ve talked about today don’t impact our web dev much currently, but may well be the cornerstone of future development projects. I know the R&D team, and the web dev team, are interested in doing more with web sites, with web apps and with mobile development, and this stuff can help us with that.

So the next time clients come to us and say “Is it built in HTML5?”, hopefully you can give a slightly better informed answer than you could an hour ago!

Tags: , , ,
Posted in Web Development | 2 Comments »

I’m not allowed to tell you what this post is about…

May 14th, 2011

Superinjunctions are everywhere. But reporters are not allowed to say that they are. These extraordinary legal documents are granted in cases where the revelation of, for instance, an affair, could cause harm to the children of the people involved.

Recently, an anonymous Twitter user posted details of the celebrities involved in these superinjunctions. Because Twitter is based in the US, it is outside the UK’s legal jurisdiction and so the superinjunctions do not count.

But Twitter can be read in the UK. Newspapers in other countries have published these details, and if you were to travel to one of these countries, buy a paper and bring it back to the UK, would it be taken away from you at the airport?

In the same way, online information published in one country is easy to consume in another.

So where does this leave privacy? Well, no one will deny that individuals have the right to privacy, and there is certainly a difference between the public interest and the prurient interest if the public, but I can’t help feeling that recourse to these superinjunctions is less about protecting children and more about protecting endorsements and sponsorship deals.

If, God forbid, I was ever in the public eye enough to know that details of my private life would be under scrutiny, I wouldn’t appreciate the attention. However, whether you are a celebrity or not, if you are acting in a way that you wouldn’t want published in a newspaper, you maybe need to reconsider your actions.

What makes us so interested in celebrities? Their fallibilities. We idolise them for their skills on the football pitch, or on the big screen, but we love to see them fall. It reminds us of how human they are, and excuses our own fallibilities.

Posted in Opinion | No Comments »

10 jQuery Plugins You Can’t Live Without

April 29th, 2011

JQuery is a great Javascript library. It doesn’t have the rigour of Prototype or MooTools, which I find to be more suited to developers, but its ease of use and great extensibility make it my first choice.

Another knockout feature in jQuery is the ability to write plugins. I use a few of them a lot: here they are…

  1. Easing

    The standard easing that comes with jQuery are pretty good, and are suitable for most things. But when you need something to spring or bounce into place, GSGD’s easing plugin gives you a huge number of options.

  2. PNG Fix

    The bane of the web developer, Internet Explorer 6, doesn’t support transparent PNGs. This plugin gets around that limitation using a proprietary Microsoft filter. It’s really extensible, allowing you to replace all PNGs in a webpage or to specify exactly which elements you replace.

    This plugin saves a load of time, avoids silly (and wasteful) GIF replacements, and allows you to apply a simple and consistent fix.

  3. Form Validation

    Not a hugely difficult thing to do in Javascript, but you need to validate forms so often that having a regularised way to do it can be a real bonus. This plugin gives you that ease of use that is a plugin’s real value.

  4. File Upload

    The file upload input is a pain to style – you can’t really do anything with it. This plugin smoothes all this over. It allows you not only to select the files you want to upload, with an easily-stylable upload button and text input, but also allows multiple file uploads, drag and drop support, resumable uploads and lots more.

    A really user-friendly way to enhance your forms.

  5. Dynamic News

    A great way to add a news slider to your site. It can either search the content of the page for the headlines to display (fairly useful), or load them from an RSS feed (very useful). On a page that needs something a little bit more, especially if your site has a syndicated news feed anyway, this plugin really does the trick.

  6. Table Sorter

    Whenever the case is there to actually use HTML tables (i.e. when there actually is a load of data that can be made sense of in rows and columns), a lot of developers who haven’t written tables for years have to reopen their “Beginner’s Guide to HTML” books to remember the markup!

    Once your table is written, this plugin allows your users to sort the table columns: great if you have large amounts of data. It allows you to sort alphabetically, numerically, by date, currency and lots more. It even allows you to add custom sort types.

  7. Twitter Plugin

    Everyone’s on Twitter these days… and everyone has a blog. One of the great things about the way the web has developed is the interoperability of your various accounts. Tweets appear in Facebook; Foursquare checkins also check in to Facebook places; your blog cross-posts to Tumblr.

    This plugin gives you the chance to show your Twitter feed on your site, with a simple interface and easy to style markup. Simple, and an easy way to keep new content appearing on your site.

  8. Nested Sortables

    If your users need to able to sort a list of items, for instance in the back-end of a CMS to reorder pages, this plugin is ace. You can drag and drop the list into whatever order you like, and it returns the new order as an array, a serialised string or a hierarchy for you to write back the options to a database.

    This is a plugin that probably benefits a small number of fairly high-end developers, but when you need it, it’s perfect!

  9. jTruncate

    A really good plugin doesn’t need to be too complex: it just needs to do one thing well. jTruncate does exactly that. It truncates long text to your specifications, allowing content-heavy sites to still contain all the text they need to but allowing the site user to choose when and how that text is displayed.

    You can truncate the text after a certain number of characters, define the ‘Read more’ and ‘Read less’ text, and that’s about all you need!

  10. FancyBox

    No list of plugins would be complete without an overlay plugin. This one can overlay images, video, Flash or AJAX requests in a modal popup. It can group together linked images and provide navigation between them, and, best of all for your users, looks great!

    There’s a few nice little touches, such as choosing transitions, using the mouse scrollwheel, adding a semi-transparent overlay and adding a neat drop shadow beneath the image.

These plugins are all really useful: I wouldn’t necessarily add jQuery to a site just to use one of these effects, but since most of the jobs I work on require at least some scripting, jQuery is often loaded anyway, and these plugins can make your job as a coder that much easier.

Tags: , ,
Posted in Web Development | No Comments »

Hacking and Privacy Issues

April 22nd, 2011

Two things have happened in the last week or so that have caused people to rethink their blasé attitude to how companies deal with personal data. The first was when a script was published that allows an iPhone user to open the hidden file that saves your location, essentially tracking you for the whole time your phone is on. The second was the hacking of the PlayStation Network and the theft of several million users’ details.

So should these two things change your attitude towards privacy? Should you remove any personal details from websites, in case they are hacked? I think not, and here’s why.

The iPhone “scandal” is nonsensical. It has been known for a while that the iPhone stores location details, but it is only since a user-friendly way to show this data appeared that there has been even the slightest outcry.

It’s not unusual for any mobile phone to store its location – any mobile phone connecting to a mast will log that it has connected. On a smartphone that has geolocation, it is reasonable that the phone will keep track of where it is, to save time when using location-based services. The fact that this file is accessible on the phone and on a synced computer is not a security breach. I’m sure if anyone hacked your computer or stole your phone there are more things to worry about than the knowledge of where you’ve been for the last few months.

However, the second is more serious. It is an absolute breach of security that has left many people’s personal details exposed. The only mitigation is that the credit card details stolen are encrypted, so cannot be used. Still, every credit card provider signs up (as far as I know) to an insurance scheme which means that you are not liable for any fraudulent activity on your account.

The personal details which have been hacked include names, addresses phone numbers and email addresses. These undoubtably will be shared and will cause loads of unwanted spam.

Sony acted quickly in taking down the PlayStation Network, and has been very sheepish in it’s apologies, but the fact that such a large organisation has been hacked shows you how important it is to protect data. For most of us, we don’t need to worry about our data being hacked – hackers will only go for targets that are worth it.

However, should we pull our details from every online service? Of course not. Big companies spend big money on protecting data. The response to the Sony hacking shows how u usual it is for such a thing to happen, and in the wake of it more online companies (Apple and Amazon, I’m looking at you!) should be reviewing their security processes. And I’m sure they will.

The Internet has opened up so many opportunities for businesses and for private users. Online shopping, social networking, online gaming… The list is endless. And I would rather embrace these opportunities than be stifled by the fear that I might have my email address stolen. The bigger the company, the more it stands to lose from a security lapse like this, and Microsoft and Nintendo must be rubbing their hands in glee at the thought of people defecting to Xboxes and Wiis.

Tags: , , ,
Posted in Opinion, Web Development | No Comments »

New Input Types in HTML5

April 19th, 2011

Changing the way you fill in forms on the web

Forms are ubiquitous on the web, and over the years web designers have been ingenious in making life easier, creating colour pickers, range sliders and AJAX autocompleters. HTML5 has added a range of inputs which make form filling even easier.

Currently we have text inputs, password inputs, file selectors, radio buttons, checkboxes and submit/reset buttons. The new input types, widely supported by Opera and, to a certain extent, Safari, are: date (lots of them!), email, color, number, range, search, tel and url, and some new elements in output, datalist and keygen.

You can see, in Opera, that the new input types react differently, calling a date picker and color picker, and having a user-friendly slider and number selector. Datalist gives you a list of potential choices (like a dropdown list) but also allows you to type your own choice (no more slecting ‘Other’ and then typing in your own option!).


Opera 10

Opera 10, showing date picker

Opera 10, showing the colour picker

Opera 10, showing the <datalist> tag

 

Keygen is not widely enough supported to be worthwhile but help keep your form data secure by keeping a secure key on the server and in your browser and cross checking in subsequent form submissions. Output is a holder for the result of a form.

Why are these useful? Firstly, it makes form validation easier. Many browsers will have automatic checking of form fields, so an email address, a URL or a phone number can never have garbage data entered. Dates don’t get confused (mm/dd/yy or dd/mm/yy) and you don’t have to mess about with Javascript to create a colour picker or calendar.

The other benefit is in user entry. In devices without built-in keyboards, the space available for the keyboard is at a premium. If you know that the input has to be a number, only showing a numeric keypad is an advantage. The iPhone (using Safari) has different keyboards for URLs (with a .com button) and email addresses (with an @ sign)

What happens if a browser doesn’t support it? In all these things, there are fallbacks. Browsers that don’t recognise the tag, it uses a default text input, even in IE6!

The new input types give web developers a new way to enhance forms, making it easier for users to use your site and, hopefully, lead to more conversions!

Tags: , ,
Posted in Web Development | No Comments »

Charlie Sheen, the car crash celebrity

March 18th, 2011

Like a car crash that clogs up the other side of the motorway with people gawking, Charlie Sheen’s very public fall has had the Twittersphere alight with quotes, comments and jokes at his expense. So what is it about celebrities’ failings that makes us want to stop and stare?

With Charlie Sheen, many people have blamed the media for stoking a fire that had been smouldering for a while. There is an element of truth in that, and several media outlets, including the radio station that baited Sheen to call him, have fanned the flames.

But no-one is forced to go in to acting, or is forced to take drugs, or insult their bosses on air. And Sheen, in his own crazy way, has revealed to us what publicists and media executives would otherwise have covered up: when celebs go in to freefall, the results are… interesting.

And interesting is right: millions of Twitter followers, and growing every day; more media coverage than Lindsay Lohan and Britney Spears during their meltdowns; and, despite the loss of his $1.2m per episode for Two and a Half Men, I can imagine he will have several lucrative income streams for many years to come.

So public meltdowns: bad for your mental health, but stellar for your public profile.

Posted in Movies, Opinion | No Comments »

Six Months of Blog Posts for Epiphany!

March 5th, 2011

To grow our site’s reach and enhance its content, every employee writes a blog post each month. After starting in August, I’ve now reached a full half dozen posts! Here’s a recap of what I’ve said so far…

  1. Canvas, SVG and HTML5 – Flash Killers?

    As a search marketing agency, Epiphany’s blog often centres on Google, social media like Facebook, and other search engine-related stuff. My first post was slightly away from that topic and into the murky world of online illustration.

    I explored the ways people are replacing Flash with HTML5 canvas and SVG, and how you can use these tools to create better, more interactive websites.

  2. Evri.com: a New Way to Search

    For November, I found a new search engine that offers a ‘semantic search’ – not just scoring web pages but grouping them according to who or what they represent. Searching for a keyword brings up a collection of blog posts, images and news reports.

    It’s a useful addition to the already crowded search engine market, and gives users a fresh way to look at results.

  3. Going Full Frontal

    An additional November post! I attended the Full Frontal Javascript Conference in Brighton. I thought it would be useful to write up my experiences from the conference in a blog post.

    It was a great conference, I learned a lot and made some great new contacts.

  4. Epiphany Infographic – It’s Been A Great Year

    One of the innovations we’ve introduced at work is the concept of an interactive infographic, and at the end of the year I took an advert that we ran in the Drum magazine and made it animated. This was the result.

    It showcases some of the animations possible in jQuery – scrolling, scaling, rattling and lots more.

  5. Should You Get Into Mobile App Development

    One of the areas I’m focusing on in 2011 is mobile development: whether it’s mobile versions of websites; web apps to work on mobiles; or fully-fledged mobile apps.

    In this post I explain the reasons why mobile applications are still worth getting into, even in such a crowded marketplace.

  6. Not All Web Browsers Are Created Equal

    I thought it was time to explain one of the fundamentals of web browsing: what a browser is and how your choice of browser can change your browsing experience.

    There’s a long way to go before the wider web audience gets a handle on the browser choice, but hopefully posts like this might help a few people make better decisions about how to surf the net.

It’s been an interesting time, with lots of new stuff to learn and to share – here’s to the next six months!

Tags: , , , ,
Posted in Work | No Comments »

Text Shadow and the Illusion of Depth

February 15th, 2011

A recurring theme in my travels down the well-worn road of web design is the constant tussle between design and functionality. On the one hand, you want a submit button to be a input type=”submit”: it’s semantically correct and has the desired effect when pressed. On the other hand, the designer who’s mocked up your web form wants it to look like a shiny glass, button, with slightly bevelled text and a semi-transparent shadow.

This, again is where CSS is your friend. Being able to create semantically correct markup with pleasing design can go hand in hand.

I know you could use input type=”image”, but it’s not quite the same: you need a separate image for each button, whereas the following method allows you to specify input[type=submit] in your CSS and forget about it (using, of course, the wonderful Selectivizr to allow you to select elements based on attributes in non-supporting browsers).

Here’s the code I’ve used for the following submit button:

Style:

input[type=submit] {
	cursor:pointer;
	color:#fff;
	color:rgba(255,255,255,.9);
	background:#333;
	background:-webkit-gradient(linear, left bottom, left top, from(#000), color-stop(0.50, #000), color-stop(0.51, #3e3e3e), to(#7d7d7d)) center top no-repeat #333;
	background:-moz-linear-gradient(bottom center, #000, #000 50%, #3e3e3e 51%, #7d7d7d) center top no-repeat #333;
	border:1px solid #2c2c2c;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	-webkit-box-shadow:0 1px 1px rgba(255,255,255,.6), 0 -1px 1px rgba(0,0,0,.6);
	-moz-box-shadow:0 1px 1px rgba(255,255,255,.6), 0 -1px 1px rgba(0,0,0,.6);
	box-shadow:0 1px 1px rgba(255,255,255,.6), 0 -1px 1px rgba(0,0,0,.6);
	text-shadow:0 -1px 1px rgba(47,47,47,.6), 1px 1px 1px rgba(244,244,244,.6);
	padding:4px 12px;
}

Markup:

<input type="submit" />

Here’s how it appears in a few browsers:


Internet Explorer 9


Safari 5


Internet Explorer 6 (I know, but at least you can see it, right?)


Google Chrome 9


Mozilla Firefox 3.6

I’ve built in a fair amount of redundancy to ensure cross-browser compatability and to take advantage of as many CSS3 techniques as possible. So how’s it done?

Background Gradient: Using CSS gradients is great – they’re native, quicker to load (although a 2KB png probably wouldn’t hurt) and pretty versatile. Webkit and Mozilla use different notations for gradients, so you’ll have to write it twice. I believe there’s an IE filter that does something similar.

Rounded corners: Ah, the Web 2.0 designer’s favourite technique: rounded corners. So ubiquitous it’s included in the CSS3 specification.

Text Shadow: Fantastic for creating the illusion of depth by giving a faux bevelled edge to the text

Box Shadow: Again, it has to be declared in both Webkit and Mozilla forms (and I’ve included the vendor-prefixless version there too. Another designer favourite, giving shadows to the box can lift it off the page or, as in this case, give it a harder, chiselled look. Simply keep the third declaration (the ‘spread’ of the shadow) down to 0 or 1px.

RGBA text: I love RGBA colour. For those who are asking, the ‘A’ stands for Alpha, and is the level of opacity. I’ve told the text to be 0.9 percent opaque white (255,255,255 are the red, green and blue values for white). In the browsers that support it, it can really enhance your text and lift them off the page.

And with a little enhancement you can get some great text effects (uses jQuery for the movement effects).

So, a simple trick that allows you to make sure your designer goes home happy, and your client gets a quick-loading, enhanced website.

Tags: ,
Posted in Web Development | 1 Comment »

Gracefully Graded Headers

February 4th, 2011

If, like me, you have a graphic designer who’s particularly picky about the way his designs render on screen, you may have come up against this problem: graded headers. I’ve often had a design that has included something like this:

(Okay, I know this is pretty strong, but bear with me – we want to be able to see the effect, right?)

What to do? Being good coders, we don’t want to go down the “headers as images” route, especially since this is a dynamic site and the header could say, well, anything. There’s options like Cufon fonts, which uses the canvas tag to render text, but there’s the ‘Flash of Unstyled Content’ problem, where you see the header before Cufon replaces it. There’s also the overhead of calls to the server – if your site will be seen hundreds of times a day, having three or four extra calls per page will make a difference.

Well, fear no more – I’m here to help! Our friend CSS can help – giving us graded headers that falls back to solid colour in browsers that don’t support our CSS magic.

The Effect

“What is this magic?” I hear you cry. The answer is background-clip. Webkit has a ‘text’ value for background-clip, which makes the background clip to the text. Simple really. All that’s needed is to make sure we serve up the right styles to the right browser.

  1. The original header

    Make your website work harder

  2. Set the background

    More CSS magic with CSS3 gradients. You’re all down on Webkit gradients, right?

    #textId {
	background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(153,0,0,.8)), color-stop(1, rgba(255,255,255,.8)));
}

    Make your website work harder

  3. Make the text color transparent

    #textId {
	background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(153,0,0,.8)), color-stop(1, rgba(255,255,255,.8)));
	-webkit-text-fill-color:transparent;
}

    Make your website work harder

  4. Set background clip

    #textId {
	background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(153,0,0,.8)), color-stop(1, rgba(255,255,255,.8)));
	-webkit-text-fill-color:transparent;
	-webkit-background-clip:text;
}

    Make your website work harder

The Finished Article

Depending on which browser you’re using, you may have seen the resaults already, but here’s how it appears in a few major browsers

Google Chrome 7

Internet Explorer 8

Mozilla Firefox 3.6

Safari 4

As you can see, it’s far from perfect in Firefox and Internet Explorer, which make up a large proportion of the browser market, but if you’re after a subtle effect for your site, and you know a large proportion of your visitors use Chrome and Safari, and you want to give them a little something extra, try it out!

Tags: , , ,
Posted in Web Development | No Comments »

Full Frontal Javascript Conference

November 24th, 2010

On Friday 12th November I attended the Full Frontal Conference. I wrote up my notes for some of the guys at work, and I thought it might be useful to post it here too!

Let me know of any errors or omissions and I’ll fix them – I have copied them straight from my notes so there might be a few errata!

Full Frontal Javascript Conference Notes

How HTML5 will change the Framework Landscape

Alex Russell (Google)

Alex talked about how quickly we should be able to introduce new HTML5, CSS3 and Javascript stuff to websites and web apps, and the answer was: do it now! Browsers will have to catch up with the pace of development, and the more people develop apps that take advantage of advanced techniques, the sooner non-conforming browsers will have to get on board (a bit like what we’ve done with the Dashboard).

JS libraries have helped with this convergence, smoothing over the cross-browser issues in e.g. AJAX, but we need to be careful that they don’t become bloated. Big companies will pay to develop their own library, which can be super-slimmed-down, but for the rest of us we need to be careful.

There can be a reliance on JS libraries to replace HTML semantics, and since JS blocks rendering as it processes it can slow down pages. HTML should be the platform we build on, not JS!

Mobile browsing is an interesting case, as people tend to change their phone every 12 months, so get an updated browser, which is a lot sooner than their computer.

He also talked about the Chrome Web Store (https://chrome.google.com/webstore/comingsoon) which will allow people to sell Apps online, which will use Chrome’s advanced features. This will hopefully encourage other browsers to introduce features to their sites so Web Apps sold through the Chrome Web Store can be accessed in e.g. Firefox.

Lastly, he mentioned the Chrome Frame plugin for IE which is simply a meta tag in the head which will use the Google Chrome Frame plugin, if installed, and if not will ask users if they want to install it. The plugin allows IE to use Chromes rendering and Javascript engine to show webpages. Definitely something for us to think about using.

About the Peer-to-Peer web

Jan Lehnardt (CouchDB)

This talk was about the mobile web and how it differs from desktop computing. It is different enough to need a rethink of the architecture of the web. Mobiles don’t always have connectivity, and when they do, it can be variable in speed. But there were more laptops sold in the first 6 months of 2010 than desktops, and more smartphones.

The obvious differences in mobile web (form factor, touch navigation, connectivity and battery life) are being addressed, by mobile optimised sites, but the User Experience for the mobile web is being approached in the same direction as for desktop. The web is currently centralised, in services like Facebook, Twitter etc, but on the mobile web the local content is king.

Ideally we want the web on the device, which updates when we have connectivity (in the same way that you can write an email when you’re not connected to the net, press ‘send’ and the email client will send it when it next connects to the net.

He introduced CouchDB, an Open Source, portable system for distributing and syncing data. It uses the same method as Lotus Notes Sync (and, I think, Dropbox) where you can update stuff locally and when you are connected it will write it to a remote server. It will sync both data and apps.

Batshit crazy stuff you’ll be able to do in browsers

Paul Rouget (Mozilla)

New HTML5 tools such as Web Sockets, File API and WebGL are giving Javascript a new lease of life.

Web Sockets is a persistent connection between browser and server, which is bidirectional and also allows you to push stuff to the browser from the server. Unfortunately the wifi at the venue wasn’t good enough for Paul to show us his Web Sockets demo, but apparently it was great!

The File API is an interface that allows you to read local files. Paul’s demo was a drag and drop file uploader, where you could drag and image onto a web browser, crop it, colourise it, add other images on top of it, manipulate it, all client-side. It’s a powerful tool to allow you to do a lot before even communicating with the server.

But the graphics stuff was the most impressive. JavaScript can use HTML5’s new capabilities to use the power of the GPU for graphics rendering. So now, superfast Javascript, video and audio tags, the canvas element and SVG can use hardware acceleration to do some crazy stuff.

Paul demoed a face recognition and morphing browser tool, and then an amazing 3D canvas demo, flying around a landscape that was playing HTML video, where the landscape moves according to HTML audio, and that rendered in real time at an amazing framerate.

This graphics capability is definitely something we will be able to plug in to in the future, with something like the dashboard rendering faster.

Bringing the Same Origin Policy to its knees

Dan Webb (Twitter)

Dan spoke about the issues in building a client side API: whereas Twitter’s REST API is well-established, the client side API is much harder. An API needs to communicate wuith a service, authenticate a user, and then send/receive data. The issue with client side APIs is the Same Origin Policy – you cannot do an AJAX call to a different domain. In fact, you can’t do an AJAX call to a subdomain of your own domain, or to your domain with an https:// protocol.

The issue is usually got round with by having a proxy PHP file, which does a cURL request based on the variables you send through. But this is not ideal. All new browsers (IE8+, FF3.5+, Safari 4+, Chrome) have a protocol called Cross-Origin Resource Sharing (http://bit.ly/ffcors). But this might alienate up 60% of your users who use old IE.

You can use iframes, but if your iframe is on a different domain you still have a cross domain problem. However, you can use window.postMessage() in JS to post messages to an iframe (with some IE6/7 workarounds…). There is a library called easyXDM which wraps up this capability to allow you to speak between two windows.

Twitter is using tech like this to allow users to connect cross-domain, and is using OAuth2 as its authentication method, where everything is sent over https to keep it secure. Luckily, the client doesn’t need to have https to make this work, it’s getting the auth token that is sent back by Twitter to your iframe window that is done over https, and you can get that information easily from that.

Building a Game Engine for the Web

Paul Bakaus (Zynga)

Zynga have been working on building a 2.5D game engine (isometric 3D, like SimCity or Civ) using Javascript. The results are amazing. The new JS engines in Chrome, FF and Safari render environments at very high speeds.

One of the issues is that game dev and web dev are two different things. Getting the right tech ius important, and they’re using jQuery, because it is very even druiven, has lots of mouse/touch helpers.

He spoke about whether you concentrate on cross browser compatibility or make a platform specific product (as we have with the Dashboard). He suggests picking future technologies – if you’re developing something that might not be released for 6 months or a year, use the tech that will be current then!

They rejected using the canvas element to render everything, as it is slower, needs to be redrawn each cycle and, despite not using the DOM to place elements, does use the DOM to load images.

So their engine simply uses HTML. One trick they have is to use canvas to read an image file, check which pixels are transparent and build an image map, so only the pixels that are opaque are clickable. Very clever.

The demo was a Final Fantasy style adventure game, where you can walk around a map, enter houses and interact with items in the houses. The tiles for the ground and walls are just images, but they use CSS transforms to put images and videos on the walls, so you can play HTML5 videos on the walls of the houses.

IE doesn’t do CSS transforms, but does have a transform filter, which can rotate, scale and matrix HTML elements. TransformIE is a JS library that does this automatically. There are both 2D and 3D transforms, and although they are just using 2D transforms they are written as 3D transforms with a zero z movement, because 3D transforms are hardware accelerated whereas 2D transforms are not.

The engine uses Javascript on the front end and the backend – the server runs node.js – which means that much of the code can be reused. He estimated about 40% of the code was reused on the front and back end. This saves time and resource. Node.js looks interesting – it is event driven instead of process driven, and gives greater flexibility for their needs.

The characters that walk around the screen use CSS animations, using sprites and moving the background each frame. The main problem is that CSS animations move smoothly, which means the background image just scrolls. This can be overcome with a new easing technique called ‘steps’, so the animation jumps to each keyframe that you specify.

The game engine looked amazing, was very smooth and quick to render, and I look forward to seeing some of the product offerings they have next year.

The Future of Mobile Now

Brian LeRoux (PhoneGap)

Brian works for PhoneGap, which is a technology for creating apps for mobiles, smartphones and consoles. Symbian is still the biggest mobile OS, with Android growing a lot over the past year and iOS staying about the same. Windows 7 Mobile will be introduced soon.

With PhoneGap, the web is the platform for building apps. It’s supposed to fill the gap between OSs. Most mobile browsers are Webkit, but Opera is also popular. Firefox Mobile is expected soon, and Windows Phone 7 will have some sort of browser on it too.

PhoneGap supports iOS, Blackberry, Android, WebOS, Symbian and Windows Mobile.

There is a W3C Device API being developed, some of which overlaps with PhoneGap’s implementations. Amongst other things, there are standards for: Contacts, Calendar, Media Capture, System Info, Device and Gallery (supported by PG); Permissioning, Messaging, Policy Framework (not supported by PG); App Launching, Tasks and Communications Logs (maybe supported).

As mobile web becomes more supported, it makes sense to have a centralised way of accessing e.g. your phone’s Contacts, and PhoneGap and the W3C are helping to drive this.

Phone Gap allows you to create apps as web apps and port them to mobile (unlike Titanium, which converts them to native code). There are lots of (sometimes conflicting) standards, but these constraints can be good to make sure you make decent apps. But in making an app you can’t do better than researching your users first!

Pixel Pounding

Seb Lee-Delisle

Seb’s presentation was jaw-dropping. He talked about easy particle physics, showed a few examples of simple movement using canvas, and showed some examples of firework-type effects, smoke effects and some basic 3D rendering.

He moved on to talk about Unity 3D, a 3D rendering program that allows you to build using Javascript. It comes with a set of pre-existing textures, objects and effects, and is very simple for building up realistic 3D worlds and interacting with them.

Tags: ,
Posted in Web Development, Work | No Comments »

« Older Entries
Newer Entries »