PHP6, HTML5

Written by: Chris in Graphic Design, Web Technology

Please note: This post is not meant to have an exhaustive list of all new features, but rather highlight some of the more important and useful changes. Additionally, newer CSS and JavaScript features are not mentioned for a variety of reasons – we may do so in the future. This post expands on the PHP6 & HTML5 slides.

PHP6

What’s new*?

  • Unicode support throughout is planned (UTF-8 or UTF-16? It’s not entirely clear anymore; Everyone is saying UTF-16 but I don’t see it in the notes)
  • Code clean-up
    • A lot of backwards compatibility removed, which should lighten PHP
    • register_globals, magic_quotes, and so on are removed
  • Needless/broken features removed (e.g. safe_mode)
  • Changes in extensions
    • EReg being dropped (already in 5.3)
    • XMLReader/Writer (5.1), APC, Fileinfo will be in the core rather than being extensions
  • Namespaces (already in PHP 5.3)
  • More neat features
  • Other small changes
    • E_STRICT included in E_ALL
    • [ ] used instead of { } for string indexes (Note: [ ] could always be used, { } was just another option)
    • ASP-style (<% %>) no longer supported
  • 64-bit integers

You can also have a look at the NEWS file being created for the announcement.

What’s to come?

There is more to come (old list) from PHP6; However, PHP6 has been expected for a while, and therefore has drawn a fair amount of criticism… including an April Fool’s joke about its release. Part of the reason for this delayed release is that developers do not want to rush it out the door but rather get it done well and enjoy making it.

HTML5

HTML5 makes several changes and adds new features to HTML that were previously accomplished in a variety of other ways. For example:

  • <video> provides … video! Similarly for <audio> which provides audio playing capabilities.
  • <canvas> for drawing images on the fly
  • Storage for storing data (similar to cookies, but doesn’t get sent like cookies)

Curious about the HTML5 doctype tag? It’s become really simple:

<!DOCTYPE html>

That’s it. There’s no “transitional” or “strict” or any other variants this time, either. That’s all you need.

The <canvas> tag

Canvas allows for on-the-fly drawing, such as graphs, images, even animations and maybe games; You’re limited by the speed of JavaScript, however, and if you think that’s fine for gaming purposes you may have been on your eight-core 2TB souped-up gaming/development system a wee bit too long (or perhaps you’re expecting everyone to run Chrome).
There are several canvas demo galleries; Here are a few:

There are many canvas samples/demos as well; A few of note:

  • A few drawing apps:
    • Harmony – Simple and functional, has some interesting brushes and has a save feature
    • Sketchpad – Very polished look, features history, several tools and also has a save feature
    • CanvasPaint – This one looks suspiciously familiar… ;)
  • A simple game: Chain Reaction
  • RGraph, a graphing library based on canvas and yet sporting some IE8 support.
  • Some 3D demos – watch your CPU usage!

… versus Flash?

Canvas is not, was not, and will never mean to be a (full-on) competitor with Flash. Canvas is meant to be used where Flash was used as a stop-gap, where often the question asked was “Isn’t there another way?” — Now there is. Situations like the above demos – simple image editing/drawing, graphs, simple animations and games – are where canvas will shine.
Even with advancements in JavaScript engines, JavaScript will never perform faster than pre-compiled scripting (at least, I think ActionScript gets at least pre-compiled) and thus would never (properly) manage to beat Flash in performance.

Audio & Video

Youtube (for ad-less videos), DailyMotion, Vimeo and other video sites offer an HTML5 option to bypass using Flash for video.

  • Ogg/Theora was being pushed as the standard, but at least one company steadily refused to accept it as the standard.
  • No consensus could be reached, therefore there is no standard codec and H.264 or x264 tend to be used (e.g. Youtube) though Ogg/Theora is used as well.
  • If Google open-sources the VP8 codec, that codecGoogle has open-sourced VP8 and it is a likely candidate to be the standard — or perhaps not.

General new mark-up

  • <header> (not to be confused with <head> of course) is used to contain groups of intro/nav items
  • <nav>, meant to desginate portion(s) of document used for navigation
  • <section> is similar to <div> and usually begins with a header; <h1…6> can be re-used in a document using sections
  • <article> while similar to <section>, is meant to be “independently usable”, e.g. a blog entry, comment, or newspaper article
  • <aside> are sidebars related to the content but separate from it
  • <footer> is used for bottom of a section of content, e.g. copyright notices
  • <figure> (think “See figure 1″)
  • <mark> for marking (highlighting) relevance, e.g. search results
  • Linguistic helpers such as <ruby>

And of course, if you care to read the proposed standard, there’s plenty more. For example the changes to forms, outlined below.

Forms

Once again, these are improvements which developers have had to find some way to code in via JavaScript or some other solutions. Once supported, they should shorten development time (when backwards compatibility is not necessary, at least):

  • Many new input types (mostly refinements):
    • Text variants: Search (the differences are mostly stylistic), telephone, URL, e-mail
    • Time: Time, date, datetime, month, week, datetime-local (no time zone)
    • Number, range (with step, min/max attributes)
    • Colour
  • New attributes:
    • autocomplete (on/off), list (to provide a different set of autocomplete suggestions)
    • required
    • multiple (when multiple inputs are expected, e.g. a To field in an e-mail)
    • pattern (basically, regular expression validation)
    • placeholder (that usually-grey text that hints at what to enter or what a field is for)
  • New elements:
    • datalist (for list attribute, among other things)
    • keygen (Yes, cryptographic keys)
    • output (for calculations; I’m not quite sure what the reasoning for this one is, honestly)
    • progress**
    • meter**

And more

These aren’t directly related to forms, but may still be useful (For example, rich text editor toolbars):

  • details**
  • summary
  • command
  • menu

Browser support

It is important to note that HTML5 is not final just yet, but there is a lot of support from browsers so far. Sadly, the form changes above seem to be hardly supported at all (but try Opera on this example HTML5 form thanks to 24ways)!

Partial to full support is available in these browsers:

* New in the sense “Not out in current stable version”

** Have some issues to be resolved; See respective portion of standards document for more information

Sources not linked above