Chrome, HTML5

HTML5 – Some Great Presentation To Keep You In The Loop

HTML5 is a rich development platform that let developers (and companies) target more users on different browsers, devices and tools. Here are few links I’ve collected in the past week. It’s more a short list of great presentations (mostly from Google I/O 2011) and some code sample to give you a hint of the power.

  • HTML5 Intro – learn what is all about. From Geo to Canvans, here are some short examples:
    // Get the user location 
    if (navigator.geolocation) {
      navigator.geolocation.watchPosition(function(position) {
        var latLng = new google.maps.LatLng(
            position.coords.latitude, position.coords.longitude);
        var marker = new google.maps.Marker({position: latLng, map: map});
      }, errorHandler);
    // paint some stuff
    var canvasContext = document.getElementById("canvas").getContext("2d");
    canvasContext.fillRect(250, 25, 150, 100);
    canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
    canvasContext.lineWidth = 15;
    canvasContext.lineCap = 'round';
    canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
    // Use some really nice fonts on your site
    @font-face {
      font-family: 'LeagueGothic';
      src: url(LeagueGothic.otf);
    @font-face {
      font-family: 'Droid Sans';
      src: url(Droid_Sans.ttf);
    // Notify your user - just like on other devices
    function showNotification(pic, title, text) {
      if (hasNotificationPermission()) {
        var notificationWindow = window.webkitNotifications
          .createNotification(pic, title, text);
        // close notification automatically after a timeout    
        setTimeout(function(popup) { 
        }, notificationWindowTimeout, notificationWindow);
  • HTML5 Games  and of course the Bad Aliens game that we’ve built during this presentation.
  • HTML5 WOW and How – you got here some very nice code snippiest of Files, Graphics (CSS3, WebGL) and Audio/Video stuff.
  • High level view on the chrome web store, upload process and the new file API.
Last but not least, if you wish to keep track on all the rapid changes and improvements that is going on in the ‘Chrome arena’ – feel free to use this pipe in your apps/reader

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s