Engagement/Developer Engagement/Grab bag

From MozillaWiki
Jump to navigation Jump to search

Do you want to give a talk and cover a certain product or technology and you are not sure how to? This is a pick'n'mix grab bag of topics, examples of explanations, links to screenshots, products and videos to help you along.

If you have some specific question, contact us either on IRC on #devrel (irc.mozilla.org) or directly via the emails listed on the Developer Engagement page (Mozilla internal).

HTML5 and other "new" technologies

HTML5 was the re-boot of web development practices. The old ways of developing web sites didn't fit the need of a fast moving environment that moved past the desktop towards mobiles and tablets and we needed a way to shift more responsibility to the user agent. Therefore HTML5 broke a few of the conventions of the past but empowers web developers far beyond what we were able to do in the past.

HTML5 for everybody

One big request from audiences is always "how do I get started with HTML5" and there are a few things you can show/give them.

  • HTML5 boilerplate is an HTML template, demo CSS3 files and all the fixes needed to make HTML5 work for legacy browsers. Unzip the provided file, start editing index.html and we are off.
  • Modernizr is a JavaScript library that makes it much easier to test if the current environment supports HTML5 and other new technology. It performs a few checks for you and adds classes to the root element of the document. That way you can use the class name in your CSS to conditionally append styles, f.e. .fontface .nav-item{} where the fontface was added by Modernizr after testing that the browser supports custom fonts.
  • Dive into HTML5 is a great, free online book on the subject
  • HTML5 Doctor is a simple blog with very up-to-date HTML5 info
  • HTML5 rocks has documentation and tutorials
  • HTML5 readiness shows the support of HTML5 (and other new tech) features in browsers
  • Can I use is a great resource that shows the support of new tech features in browsers

CSS3

CSS3 is a vast topic to cover as it ranges from visual enhancements like rounded corners, gradients and shadows via simple transformation up to full animations and 3D transformations. In essence it enhances the capabilities of CSS2 much further and in some areas competes with JavaScript for behaviour changes in our interfaces.

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.
  • 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.
  • Hardware acceleration - CSS animations and transformations and hardware accelerated which is especially effective on mobile devices.

Showcases:

  • The Mozilla Dev Derby for June had CSS animation as its main topic - there were some really cool entries as videos, too.
  • The Planetarium demo shows how animation can be used to showcase different planets webm ogv mp4
  • The HTML5 Dashboard demo has some good examples for all "new tech" implementations. The CSS3 one is very effective when you go through it one by one. webm mp4 ogv
  • Ben the body guard is a site advertising an app that uses CSS3 animation and jQuery to do some storytelling. The thing to point out (which is also on the screencast) is that they didn't do a good job of using CSS to improve semantic HTML - the site is just empty DIVs. webm mp4 ogv
  • Madmanimation is a showcase of the Animatable tool, which turns an HTML storyboard (check the site in Opera to see the fallback) into a cool animation. This is progressive enhancement as it should be done. webm mp4 ogv

HTML5 forms

HTML5 forms allow us to build more interactive applications for our users and get rid of a few of the annoyances we had to deal with in the past:

  • 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:
    • 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
    • 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
    • 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 this comparison grid by Wufoo shows.

HTML5 File APIs

This is a big topic and might be hard to understand for people. I like to show an example screencast of either of the following:

  • Min.us - this is showing how you can drag and drop an image into the browser and then send it to image hosting sites. Explain how much easier that is than uploading them one by one. webm mp4 ogv
  • 64 yourself - this shows how you can drag a file into the browser, convert it and save it back without any server interaction. It also has a cool geek feeling to it :) webm mp4 ogv
  • Motivational poster - our own demo, this shows again how to manipulate an image in the browser before uploading it. webm mp4 ogv

The main thing to tell people about the File APIs is that they make it much easier for us to build applications without a server and that we use the end user's computer power for our needs. It is a bit like SETI@home, only for humans, not aliens.

HTML5 Video

HTML5 video was probably the main breakthrough for the new technology. We realised pretty early that the media internet will not be interesting enough for end users if we keep it strictly text and image based. The benefit of HTML5 video over plugin-based solutions is that the video is just another element in the document. This solved a few issues we had with Flash or Silverlight based video solutions:

  • Videos have a native browser control, which means they are keyboard accessible and assistive technology could interact with it
  • Videos can be styled with CSS much like any other element in the document, you can zoom them, rotate them, add borders, make them transparent and many more things that weren't possible with a Flash embed
  • Videos have a built-in API that allows you to write your own controls, react to the time of the movie, test what video formats are supported and get all kind of information about them that you couldn't get with Flash videos.
  • Videos can easily interact with other parts of the page and even generated dynamically. A plugin always was a black box of unknown in your document

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).

  • 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 H.264 encoding (which is also the format for Blue Ray discs), Google, Opera and Mozilla went for fully open codec formats like Ogg Video and 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.
    • One simple way to do this is to use online services. 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.
    • 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 Audio

Technically HTML5 audio should not be much harder than video but the implementations in browsers right now are not as good as they could be. There are issues with looping sounds for example. The benefits of audio are the same as for HTML5 video:

  • Native player controls allow for keyboard access
  • Simple communication with the rest of the page allows for great experiences of audio with other open technologies

The issues with HTML5 have been discussed in detail by Scott Schiller in his 24 ways article "Probably, Maybe, No": The State of HTML5 Audio.

There are however browser specific APIs to work with audio both by Chrome and Firefox which allows for byte-level access to music and you can do great things with those.

Showcases

Canvas

WebGL

  • Body Browser - Google took a 3D model of the human body and built a maps-style interface to it in WebGL webm mp4 ogv

Pretty sites using new web standards (HTML5/CSS/JS)

These are a few sites I like to show when it comes to new technology and how it can be used for pretty sites as nice as Flash/Silverlight:

  • Nike better world - vertically scrolling page with parallax - check the source code to see that it is HTML5 webm mp4 ogv
  • Nissan Leaf - site with a 3D interface to the car interior and exterior webm mp4 ogv
  • TRON - interactive graphic novel (originally to promote IE9) - the cool story to tell here is that someone like Disney is betting on HTML5.
  • 20 things I learned - an e-book in HTML5 by Google - really nicely done
  • Angry Birds web - Notice the use of Flash for music. That is a good opportunity to explain that music in HTML5 is still badly supported (no looping)

Open Web Initiatives

BrowserID

BrowserID is an experiment by Mozilla to work around the problem we have with logins and passwords on the web. Instead of having to remember all your passwords and logins BrowserID acts as a broker for one of your identities - in the form of emails. So instead of having to type in your login and password over and over again, BrowserID allows you to click a button, select which email identity you want to login with and the rest happens automatically behind the scenes for you.

WebFwd

Universal Subtitles

Universal Subtitles is a product on top of the Mozilla sponsored Popcorn.js library. By including a JavaScript into your HTML documents it allows your visitors to write and subsequently translate subtitles for the videos embedded in your product. A simple interface allows both the writing an the display of the subtitles. The process is crowdsourced and chunked, which means I can only write the subtitles for minute 1 to minute 7 and someone else can write the rest.

Mozilla Products

Firefox

AddOns

Web APIs

The goal with WebAPI is to provide a basic HTML5 phone experience and bridge the gap between the Open Web and native apps, and offer consistent APIs that will work in all web browsers, no matter the operating system.

Examples of APIs are:

  • Dialer: Telephony & Messaging API, Contacts API
  • Address Book: Contacts API
  • SMS: Telephony & Messaging API, Contacts API
  • Clock
  • Camera: Camera API, Filesystem API
  • Gallery: Filesystem API (could possibly be FileReader & FileWriter in conjunction)
  • Calculator
  • Settings: Device Status API, Settings API
  • Games: Accelerometer API, Mouse Lock API
  • Maps: Geolocation API, Contacts API

A lot of people ask about the WebAPI effort and how it stands in relation to the W3C DAP and WAC, and the answer is that WebAPI offers a way for Mozilla to experiment and prototype ideas and suggestions, and then create a proposal and bring it to working groups like W3C DAP, WAC and WHATWG.

More details and good questions and discussions can be found in the posts at Mozilla Hacks:

Developer Tools

AddOns

Boot to Gecko

Retrieved from "https://wiki.allizom.org/index.php?title=Engagement/Developer_Engagement/Grab_bag&oldid=346030"