Confirmed users
376
edits
Engagement/Developer Engagement/Grab bag: Difference between revisions
Jump to navigation
Jump to search
Engagement/Developer Engagement/Grab bag (view source)
Revision as of 09:41, 1 September 2011
, 1 September 2011no edit summary
No edit summary |
|||
| Line 25: | Line 25: | ||
The main selling points of CSS3: | The main selling points of CSS3: | ||
* ''Independence of images'' - this means fewer HTTP requests (faster loading sites) and simpler redesign - if the colour scheme of your site changes from green to blue, you don't need to create a lot of images, optimise them and upload them to a CDN. | * '''Independence of images''' - this means fewer HTTP requests (faster loading sites) and simpler redesign - if the colour scheme of your site changes from green to blue, you don't need to create a lot of images, optimise them and upload them to a CDN. | ||
* ''Mathematical access to graphics'' - you can rotate and zoom elements in the page with degrees and zoom levels. That way if you need a text that is 45 degrees turned to change to 37.5 degrees all you need to do is to alter the CSS value. | * '''Mathematical access to graphics''' - you can rotate and zoom elements in the page with degrees and zoom levels. That way if you need a text that is 45 degrees turned to change to 37.5 degrees all you need to do is to alter the CSS value. | ||
* ''All visuals are maintained in the same space'' - before CSS3, we mostly did animations with JavaScript which meant that maintainers needed to be proficient in both technologies. | * '''All visuals are maintained in the same space''' - before CSS3, we mostly did animations with JavaScript which meant that maintainers needed to be proficient in both technologies. | ||
* ''Hardware acceleration'' - CSS animations and transformations and hardware accelerated which is especially effective on mobile devices. | * '''Hardware acceleration''' - CSS animations and transformations and hardware accelerated which is especially effective on mobile devices. | ||
Showcases: | Showcases: | ||
| Line 44: | Line 44: | ||
* They offer simple client-side validation of form elements. In the past we always wrote that in JavaScript and repeated it on the server which made maintenance harder. It is important to explain though that server side validation is still very much needed as you could bypass the client-side validation with, for example, cURL. It is also worth pointing out that HTML5 forms have a validation API in JavaScript, so if you don't like the way browsers display errors, you can roll your own error display. | * They offer simple client-side validation of form elements. In the past we always wrote that in JavaScript and repeated it on the server which made maintenance harder. It is important to explain though that server side validation is still very much needed as you could bypass the client-side validation with, for example, cURL. It is also worth pointing out that HTML5 forms have a validation API in JavaScript, so if you don't like the way browsers display errors, you can roll your own error display. | ||
* We have new cool elements: | * We have new cool elements: | ||
** ''Date picker'' - writing a client-side calendar that localises to different markets is a pain to do - now we don't need that any longer. | ** '''Date picker''' - writing a client-side calendar that localises to different markets is a pain to do - now we don't need that any longer. | ||
** ''Number fields'' - they render with up/down arrows and allow simple entry | ** '''Number fields''' - they render with up/down arrows and allow simple entry | ||
** ''Email/URL/Phone fields'' - they don't mean much on a desktop but are a total win on mobile devices as they switch the keyboards around and tie into your history and address books - that way you need to enter a lot less and you don't need to switch from alphanumeric to numeric keyboard. | ** '''Email/URL/Phone fields''' - they don't mean much on a desktop but are a total win on mobile devices as they switch the keyboards around and tie into your history and address books - that way you need to enter a lot less and you don't need to switch from alphanumeric to numeric keyboard. | ||
** ''Range'' - renders a slider control - something we never had natively | ** '''Range''' - renders a slider control - something we never had natively | ||
** ''Datalist'' - is a combo box we had in many other GUI frameworks - it allows for open text entry but offers autocomplete for a preset of values. The really cool thing about this one is that it extends an input for backwards compatibility. | ** '''Datalist''' - is a combo box we had in many other GUI frameworks - it allows for open text entry but offers autocomplete for a preset of values. The really cool thing about this one is that it extends an input for backwards compatibility. | ||
The great thing about HTML5 form elements is that they gracefully degrade to a text input on old browsers. The bad thing about them is that their support is not good across browsers as [http://wufoo.com/html5/ this comparison grid by Wufoo] shows. | The great thing about HTML5 form elements is that they gracefully degrade to a text input on old browsers. The bad thing about them is that their support is not good across browsers as [http://wufoo.com/html5/ this comparison grid by Wufoo] shows. | ||
| Line 75: | Line 75: | ||
* There was a [https://developer.mozilla.org/en-US/demos/devderby/2011/july/ Mozilla Dev Derby on HTML5 video] with great examples of what can be done with open video. | * There was a [https://developer.mozilla.org/en-US/demos/devderby/2011/july/ Mozilla Dev Derby on HTML5 video] with great examples of what can be done with open video. | ||
== Issues with HTML5 video: | == Issues with HTML5 video: == | ||
Of course not everything is rosy about HTML5 video at the moment and the following things are constantly brought up in Q&A sessions with audiences. It is important to make the message clear that there are some issues with it and that sometimes Flash video is the better option (seldomly though). | Of course not everything is rosy about HTML5 video at the moment and the following things are constantly brought up in Q&A sessions with audiences. It is important to make the message clear that there are some issues with it and that sometimes Flash video is the better option (seldomly though). | ||
* ''Different codecs for different browsers'' - there is a discontent between different browser vendors what constitutes HTML5 video. Whilst Microsoft and Apple favour mp4 files with [http://en.wikipedia.org/wiki/H.264/MPEG-4_AVC H.264] encoding (which is also the format for Blue Ray discs), Google, Opera and Mozilla went for fully open codec formats like [http://en.wikipedia.org/wiki/Theora Ogg Video] and [http://en.wikipedia.org/wiki/Webm Web-M]. This means a few annoying things: ** if you want to support all HTML5 browsers with your videos you have to convert them into three formats | * '''Different codecs for different browsers''' - there is a discontent between different browser vendors what constitutes HTML5 video. Whilst Microsoft and Apple favour mp4 files with [http://en.wikipedia.org/wiki/H.264/MPEG-4_AVC H.264] encoding (which is also the format for Blue Ray discs), Google, Opera and Mozilla went for fully open codec formats like [http://en.wikipedia.org/wiki/Theora Ogg Video] and [http://en.wikipedia.org/wiki/Webm Web-M]. This means a few annoying things: ** if you want to support all HTML5 browsers with your videos you have to convert them into three formats | ||
** If you also want to support different mobiles and tablets you will also have to create the video in different resolutions and sizes. | ** If you also want to support different mobiles and tablets you will also have to create the video in different resolutions and sizes. | ||
** One simple way to do this is to use online services. [http://archive.org Archive.org] for example automatically converts hosted videos (which have to be licensed with Creative Commons or Public Domain) you upload to OGG and MP4, so all you need to do is create a WebM version. | ** One simple way to do this is to use online services. [http://archive.org Archive.org] for example automatically converts hosted videos (which have to be licensed with Creative Commons or Public Domain) you upload to OGG and MP4, so all you need to do is create a WebM version. | ||
** [http://vid.ly Vid.ly] converts videos to 20 formats and provides you with a URL that redirects different browsers, mobiles and consoles to the right format automatically. | ** [http://vid.ly Vid.ly] converts videos to 20 formats and provides you with a URL that redirects different browsers, mobiles and consoles to the right format automatically. | ||
* ''HTML5 video is open - and so is the source file'' - if people want to offer video in HTML5 then the files will be possible to download. YouTube's HTML5 player goes through a proxy server to prevent this but it can be easily fooled. If people want DRM in their files and prevent users from downloading them they need to use Silverlight or Flash (or host the files on a login-protected server). | * '''HTML5 video is open - and so is the source file''' - if people want to offer video in HTML5 then the files will be possible to download. YouTube's HTML5 player goes through a proxy server to prevent this but it can be easily fooled. If people want DRM in their files and prevent users from downloading them they need to use Silverlight or Flash (or host the files on a login-protected server). | ||
=== HTML5 Audio === | === HTML5 Audio === | ||