Join GitHub today
GitHub is home to over 20 million developers working together to host and review code, manage projects, and build software together.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
This is a presentation on web standards and how to use them, specifically how to build predictable, clean and readable code in the HTML5 world without falling for the "shiny new and cool" trap. You can find the slides here: Building for real standards-notes.pdf - Annotated version Building for real standards-notes.pdf - Plain version Building for real standards.key.zip - Keynote file (with notes) Building for real standards.ppt - Powerpoint file (with notes) The font uses is Open Sans available from Google - in case Powerpoint doesn't show it properly. In the presentation you'll find "demo time" slides followed by "Memo time" slides repeating what we just learned. These mean you should show demo code in between, which is available here: HTML5 Basics Demo time: magic.html - show that this file displays as a heading in the browser. Then open the browser developer tools and show that the browser automatically added a html, head and body element, the latter around the h1 element. Explain that this is what HTML5 browsers do - they have been built around the robustness principle that end users should not suffer from developer mistakes and will inject necessary elements for you. Also explain that this is a safety precaution to make sure that bad old code on the web will still display in newer browsers and should not be used as an excuse not to write these elements. Instead we should write code that is valid and has all the elements to tell the browser what to do _and_ make things easy to understand for the next person who works with your code. Move on to template.html. template.html - this is a very basic template for HTML5 with all the needed elements and explanations in comments why something is there. Remove the comments when you show the template or use template-simple.html as your demo to show. form.html - this is a simple form example showing that simply by adding a required attribute you can prevent forms that have errors in them being sent to the server. Explain that there is very much a need to validate form data on the server (as relying on client-side validation means attackers could just directly call the script in the action of your form). Also explain that in HTML5 browsers we don't need to write our own client-side validation as it comes built-in. The other benefit of this approach is that the validation rules are defined in the HTML (as seen at the age field) which means they don't get out of sync easily. As a bonus, also explain that the labels in the form are very much needed for accessibility. video.html - a demo on how easy it is to use video in HTML5. Point out that all you need to do to make a video playable in an HTML5 browser is to add the controls attribute which creates all the player UI in a keyboard accessible manner. Also point out that the different formats are needed to support different browsers with MP4 being for Safari/IE, WebM for Chrome/Firefox and OGV for older, but still HTML5 compatible browsers. Also point out that a link around an image as the fallback should video not be supported is an OK solution and that offering a Flash fallback could be overkill. You can also show http://vid.ly as a great example to convert videos in all the necessary formats or Miro video encoder/MPEG Streamclip as fat client application alternatives. Another way to convert is to host your videos on archive.org which will create an MP4 and a WEBM from an OGG video you upload. broken.html - Show this as an example of how to use browser-only functionality and break the web. The file shows a button styled with a gradient on Firefox. Open the same file in Opera, IE or any webkit browser and you'll see that it is unusable as it is white text on white background. Show or edit the file live to resemble fixed.html to show the way around that. fixed.html - the fixed version of broken.html - show that by adding a simple green background before the gradient one you have a working fallback for non-Mozilla browsers. Then add all the other browser prefixes to show how to have the gradient across the browsers. Point out the annoyance of having to repeat all the prefixes, but also point out that this allows for tweaking the settings for different browsers as the results may vary or even the syntax might be different. Repeat that anything with a browser prefix is experimental! Mention SASS/LESS/Compass and other pre-processors as a way to make this easier. Client side thumbnails? Demo time: Show the demo in the /canvasthumber folder. Simply open the file in the browser and drag some images onto the "Drop images here" square and show that the browser generates thumbnails from them. If you want, explain the code - there is a detailed post on it on Mozilla hacks linked in the footer. It is more important though to point out that this is a great example showing that something that traditionally is only used to output data - HTML5 canvas - can be used as an input device and that a hitherto pure server side task like image generation (think GD library or imageMagick) can now be done on the client. It's important that in HTML5 we try to use all the things the client can do for us instead of relying on a server all the time as connections are flaky and it is annoying to have to reload a document on a mobile device. If you present this somewhere, why not tell me about it? All of this here is licensed with creative commons BY-SA. Go nuts! Chris