MatrixAdapt | Logiciel de gestion d'Entreprise, Création et référencement des sites web

Seo Master present to you:
By Scott Knaster, Google Code Blog Editor

This is the last Fridaygram of 2011, and like most everybody else, we’re in a reflective mood. It’s also the 208th post on Google Code Blog this year, which means we’ve averaged more than one post every two days, so that’s plenty of stuff for you to read. What did we write about?

At Google, we love to launch. Many of our posts were about new APIs and client libraries. We also posted a bunch of times about HTML5 and Chrome and about making the web faster. And we posted about Android, Google+, and Google Apps developer news.

Many of our 2011 posts were about the steady progress of App Engine, Cloud Storage, and other cloud topics for developers. We also published several times about commerce and in-app payments.

2011 was a stellar year for Google I/O and other developer events around the world. Some of our most popular posts provided announcements, details, and recaps of these events. And we welcomed a couple dozen guest posts during Google I/O from developers with cool stories to tell.

The two most popular Code Blog posts of the year were both launches: the Dart preview in October, and the Swiffy launch in June.

Last, and surely least, I posted 26 Fridaygrams in an attempt to amuse and enlighten you. Thank you for reading those, and thanks for dropping by and reading all the posts we’ve thrown your way this year. See you in 2012!

And finally, please enjoy one more Easter egg.

2013, By: Seo Master

Seo Master present to you:
By Soonson Kwon, Developer Relations Program Manager

For developers and engineers, the best way to learn something is to get your hands dirty and try making something. That is why Google hosts many hackathons around the world. Last November 17 and 18, we had a bigger experiment at Gangnam (yes, this is the very Gangnam in Gangnam Style!) in Seoul, South Korea which expanded a 1-2 day hackathon into a much longer one which we called Google HackFair.



The idea was to give developers enough time (2 months) to develop something bigger and provide a nice chance to showcase their projects. 153 developers submitted 92 projects, and 40 projects were chosen from among them and displayed. Developers used many different technologies, including Android, Chrome, App Engine, and HTML5, and they completed creative and interesting projects: a remote controlled car guided by Android, a serial terminal for Chrome, a braille printer using Go, and many more!


Besides the exhibition, we also prepared a mini-conference and GDG (Google Developers Group) booth where Googlers and community developers gave 27 sessions in total.


More than 1000 people attended and enjoyed the Google HackFair. Although the event is finished, developers continue updating and polishing their projects. It was a great time indeed.

If you are interested in details for the projects including full demos or source code, please check here.


Soonson Kwon is Developer Relations Program Manager and Country Lead for South Korea. His mission is to help Korean developers make better use of Google’s developer products. He is also passionate about Open Source.

Posted by Scott Knaster, Editor

2013, By: Seo Master

Seo Master present to you:

(Updated 10 Dec 2010 -- corrected link to 3rd Place Hilversum developer Kornel Lesinski's Twitter page.)

Last month, more than 50 developers assembled in Hilversum, Netherlands, and San Francisco, California for an HTML5 game jam.

The idea of HTML5 gaming may seem unusual, but if the results from this event are anything to go by, there will be plenty more HTML5 games in the future. In just over 24 hours of coding, attendees were able to produce the seeds of great games, powered by standard web technologies. The games we saw were novel, visually appealing, and in many cases, already very playable.

HTML5 is making it easy to develop games for standard web browsers, and it also provides a way for developers to reach mobiles and tablets with a single code base. Watch for other initiatives, like Mozilla's current HTML5 gaming competition, to take HTML5 gaming to the next level.

Here’s a look at the winners from both venues. You can see a detailed list of all the entries here.

First Place, San Francisco: Ninja Leap

A novel 8-bit style game where you “leap” over the bad guys. A good demo of the Canvas element and a complete game with levels and scoring. Congratulations David Ganzhorn and Mike Rotondo on winning the HTML5 Game Jam in the USA.

First Place, Hilversum: Monkey Fortress

A puzzle game where you build a fortress to protect the monkey, demonstrating a physics engine in Canvas. Congratulations Tom Hastjarjanto on winning the HTML5 Game Jam in Europe.

Second Place, San Francisco: Shell Shock

A platform shooter involving turtle-like creatures on wheels, using Canvas. By Wolff Dobson, Charles Lee, Nicolas Coderre, Dan Fessler, Sara Asher. (No online demo at present.)

Second Place, Hilversum: Snakes

A refresh on the classic “Snake” game, demonstrating multiplayer powered by NodeJS and WebSocket, and 3D transforms of the canvas element. By David Durman & Ales Sturala. (No online demo at present, but code repository available.)

Third Place, San Francisco: Fruit Link

A casual puzzle game by Bruno Garcia, where you link up adjacent matching fruit.

Third Place, Hilversum: Enterprise

A stunning 3D game inspired by the classic Syndicate series showcasing just how far we’ve come with Canvas-based graphics. Observe the collision detection and be sure to hit the “Flying Carpet” button as well as the space bar to fire! This game was also shown in the “Web or Native for Mobile Development?” session at the recent Google Developer Days conferences in Europe. Created by Kornel Lesinski, Peter van der Zee, and Edwin Martin.

A few other readily playable games you might enjoy are:

• Atome by Pierre-Louc Doulcet
• Tablet Tennis (multitouch) by Michiel van den Anker
• Scubed by David Gregory, Estelle Weyl, Gabe Hernandez, Perry Chow, Stacie Hibino
• Smiley vs. the Gumballs by Michael Yorg

We were also honoured to have keynotes by two pioneers of web-based gaming. In Hilversum, the speaker was Tino Zijdel, creator of DHTML Lemmings back in 2004. Tino, coincidentally a Hilversum local, explained the tricks he used to make the game playable on the browsers of the day. He has subsequently written his account of the Game Jam. It’s in Dutch, so here’s an English translation. There were additional presentations from from Yu Jianrong, who covered ten tips for HTML5 Game Development and Paul Irish on HTML5.

The San Francisco keynote was given by Marcin Wichary, who gave a keynote on games and HTML5. Marcin is the creator of the Pac-Man doodle and also the first version of the popular HTML5Rocks slides. Marcin talked about his experiences in recreating Pac-Man and the timeless aspects of videogaming in modern age, shared some behind-the-scenes trivia, and shared the technology used to write the doodle and debug it.

We thank SPIL Games for hosting and co-organising the Netherlands event, and we also thank Samsung for contributing a Galaxy Tab for the Game Jam at that venue. Developers working on touch apps were able to use the Tab for testing, and we later gave the device away as a prize. Congratulations all who took part!

You can find more details about the event, including links to code repositories and further demos, at HTML5GameJam.com.

By Michael Mahemoff, Chrome Developer Relations2013, By: Seo Master

Seo Master present to you: Update: Thanks for all the interest and feedback on 20 Things I Learned about Browsers and the Web! We hope to open-source the code in the coming months and will post an update when we do. Stay tuned.

Twenty years ago this month, Tim Berners-Lee published his proposal for the World Wide Web. Since then, web browsers and web programming languages have come a long way. A few of us on the Chrome team decided to write an online guide for everyday users who are curious about the basics of how browsers and the web work, and how their evolution has changed the way we work and play online. Called "20 Things I Learned about Browsers and the Web," this online guidebook is illustrated by Christoph Niemann, and built in HTML5, JavaScript and CSS3, with our friends at Fi.

In building an online book app, HTML5, JavaScript and CSS3 gave us the ability to bring to life features that hearken back to what we love about books with the best aspects of the open web: the app works everywhere, and on any device with a modern browser. Here are a few features of the book experience that we’re particularly excited about:

• After the app has been visited once, you can also take the experience with you offline, thanks to the Application Cache API.
• You can resume reading where you had left off as the book remembers your progress using the Local Storage API. We also mark the chapters that have previously been read by folding the top right corner of the page in the navigation.
• The app utilizes the History API to provide a clutter-free URL structure that can be indexed by search engines.
• The HTML5 canvas element is used to enhance the experience with transitions between the hard cover and soft pages of the book. The page flips, including all shadows and highlights, are generated procedurally through JavaScript and drawn on canvas.
• The canvas element is also used to animate some of the illustrations in the book.
• CSS3 features such as web fonts, animations, gradients and shadows are used to enhance the visual appeal of the app.

This illustrated guidebook is best experienced in Chrome or any up-to-date, HTML5-compliant modern browser. We hope you enjoy the read as much as we did creating it, at www.20thingsilearned.com or goo.gl/20things.

By Min Li Chan, Google Chrome Team2013, By: Seo Master

Seo Master present to you:
By Esteban de la Canal, Software Engineer

We launched Google Swiffy in July. Swiffy enables you to convert Flash SWF files to HTML5. One of our main aims for Swiffy is to let you continue to use Flash as a development environment, even when you’re developing animations for environments that don’t support Flash.

To speed up the development process, we’ve built the Swiffy Extension for Flash Professional. The extension enables you to convert your animation to HTML5 with one click (or keyboard shortcut). The extension is available for both Mac and Windows, and it uses Swiffy as a web service, so you’ll always get our latest and greatest conversion. Information about the conversion process is shown within Flash Professional.


You can download the Swiffy Extension from the Google Swiffy site. We hope it will streamline your workflow when you use Flash and Swiffy to produce HTML5 animations. Please let us know how well it works for you via our feedback page.


Esteban de la Canal is a Software Engineer on the Swiffy team. He also enjoys game development, particularly weird-looking snake-like games in Flash.

Posted by Scott Knaster, Editor

2013, By: Seo Master

Seo Master present to you:

There’s an exciting new event happening December 6th dubbed the “Woodstock for Cloud Developers.” We’ll be participating at Cloudstock, an industry event taking place in San Francisco’s Moscone West, that brings together a growing developer community and some of the leading cloud technology companies (such as Google, vmware, Salesforce.com and Amazon) to learn, hack and network.

Google is a strong believer in the open technologies powering the web, such as HTML5. Cloud computing is about powering innovations on the web with platforms and services that make developers like you more efficient and allow you to concentrate on solving business problems. No longer do you have to worry about the hassle of acquiring and managing servers, disks, RAM and CPU-- it’s all accessible in the cloud.

Google will be presenting the following sessions at Cloudstock:

• Introduction to Google’s Cloud Platform Technologies (Christian Schalk)
  This talk will provide an in depth review of Google's Cloud Platform Technologies by first reviewing both Google App Engine and App Engine for Business followed by an introduction to Google's new cloud technologies: Google Storage, Google Prediction API and BigQuery. Throughout the presentation, in depth technical demonstrations will be given showing how to use these technologies together in an integrated manner.
• Selling your Cloud App on the Google Apps Marketplace (Ryan Boyd)
  This demo-focused session will review how to integrate your app with Google Apps and sell it on the Google Apps Marketplace to reach 30 million users at 3 million businesses. It will dive into the SaaSy Voice demo application, showing how technologies like OpenID-enabled Single Sign-On, OAuth and AtomPub make it easy to create great user experiences for your customers.

We have another session which will be announced shortly-- stay tuned to this blog and the GoogleCode twitter account!

Register for the free Cloudstock event at:
http://www.cloudstockevent.com/

Moscone West
San Francisco, CA
Monday, December 6th, 2010

Looking forward to meeting you there!

By Ryan Boyd, Google Developer Team2013, By: Seo Master

Seo Master present to you:
By Scott Knaster, Google Developers Blog Editor

Hey, wanna start a band? A new Chrome Experiment, JAM with Chrome, lets you play music in a web app and jam with others online in real time. You get to pick from 19 different instruments, including drums, guitars, and keyboards. Once you get really good, you can use shortcuts on your (computer) keyboard to play your instrument.



When you’ve had enough fun making music with your friends, you can explore how JAM with Chrome works. Take a look at the tools and technologies that were used to make this app, and for details, read the case study. Then you can decide whether you want to build the next great web app or become a rock star instead.

Speaking of stars, scientists have astonishingly figured out how to learn about light from every star that ever existed. Researchers used the orbiting Fermi Large Area Telescope to look at distant galaxies and measure photons from various places around the universe. This data goes back to the formation of the first stars more than 13 billion years ago.

Finally, back on our own planet, you might have noticed that Google Maps recently added more building footprints to map displays. In case you didn’t count them, over 25 million new building footprints have been added to both desktop and mobile versions of Google Maps. Maybe you’ll see the new footprints while exploring your favorite city this weekend.


On Fridays we detour slightly from our usual posts and publish a Fridaygram, a fun compilation of nerdy stuff to amuse you (and us). And how cool is it that we have orbiting telescopes?

2013, By: Seo Master

Seo Master present to you: By Lars Bak, Software Engineer

A year ago we released a technology preview of Dart, a project that includes a modern language, libraries and tools for building complex web applications. Today, after plowing through thousands of bug reports and feature requests from the web community, a new, more stable and comprehensive version of Dart is now available and ready to use.



With this version of the Dart SDK, we’ve made several improvements and added many features:

• A faster Dart Virtual Machine that on some Octane tests outperforms even V8.
• A new Dart to JavaScript translator that generates fast and compact output.
• An HTML library that works transparently on modern browsers.
• A library to interoperate with JavaScript code.
• An easy to use editor.
• Pub, a new package manager
• Dartium, a Chromium build with native Dart support.
• A server-side I/O library.
• A language specification describing the Dart semantics, including new features.

Over the following months, we will continue to work hard to evolve the SDK, improve Dart’s robustness and performance, and fine-tune the language while maintaining backwards compatibility.


You can download the Dart Editor from dartlang.org. It comes with a copy of the open-source SDK and Dartium. Thanks again for all your feedback – keep it coming.


Lars Bak is a veteran virtual machinist, leaving marks on several software systems: Beta, Self, Strongtalk, Sun's HotSpot and CLDC HI, OOVM Smalltalk, and V8.

Posted by Scott Knaster, Editor

2013, By: Seo Master

Seo Master present to you: By Alex Komoroske, Product Manager

Cross-posted with the Chromium Blog

When you want to build something for the web, it's surprisingly difficult to find out how you can implement your vision across all browsers and operating systems. You often need to search across various websites and blogs to learn how certain technologies can be used. It's kind of like a scavenger hunt, except it's not any fun.

This scavenger hunt is soon coming to an end. Google along with the W3C and several leading internet and technology companies just announced the alpha release of Web Platform Docs. Web Platform Docs is a community-driven site that aims to become the comprehensive and authoritative source for web developer documentation.



The founding members of Web Platforms Docs have all already provided a lot of content for the site to help get this effort off to a strong start. However, collectively, we’ve barely scratched the surface. We decided that it would be better to open up Web Platform Docs to the community as early as possible, so that everyone – including you – can help expand and refine the documentation, and ultimately define the direction of the site.

If you have more questions about Web Platform Docs, you can find us on Twitter.


Alex Komoroske is a Product Manager on Chrome's Open Web Platform team. Before he was a product manager he was a web developer, and even today he loves building web apps in his spare time.

Posted by Scott Knaster, Editor

2013, By: Seo Master

Seo Master present to you: At Google we're excited about new web technologies like HTML 5, CSS 3, Web Fonts, SVG, faster JavaScript, and more. It's an exciting time to be a web developer, especially with the major advancements made in modern browsers like Firefox, Safari, Opera, and Chrome the last two years. In this blog post I want to share some of the work we've been doing with SVG in particular.

Today kicks off the start of the SVG Open 2009 conference, hosted at Google this year. The SVG Open conference is an annual conference where the SVG community comes together for three-days. Other sponsors of the conference this year include Microsoft and IBM.

What is SVG?

SVG, or Scalable Vector Graphics, is an open web standard that makes it easy to add interactive vector graphics to your web pages. Vector graphics, as opposed to bitmap graphics like JPG, GIF, or PNG files, describe the shapes on your screen with mathematical equations rendered by your computer rather than pixels. This allows vector graphics to stay beautiful and crisp whether displayed on a 40" monitor or a small mobile device.

Just as HTML gives you simple tags such as <form> or <table> to add to your web pages, SVG gives you such graphical tags as <circle> or <rect> for a rectangle that you can drop into your web page. Working with SVG is very similar to working with HTML - you use JavaScript to animate and make things interactive, CSS (Cascading Style Sheets) to add style, etc.

Why Google is Excited About SVG

We're excited about SVG for a host of reasons:

First, SVG is part of the HTML 5 family of technologies. One of the major new features of HTML 5 is the fact that you can now drop SVG tags into normal HTML, directly embedded into your page. We're excited about how this will empower developers. Here, for example, is a small code sample that embeds an SVG circle and rectangle right into an HTML 5 page:

<!DOCTYPE html>
<html>
  <body>
    <h1>SVG/HTML 5 Example</h1>
    <svg>
      <circle id="myCircle"
              cx="100" cy="75" r="50"
              fill="blue"
              stroke="firebrick"
              stroke-width="3" />
      <text x="60" y="155">Hello World</text>
        </svg>
  </body>
</html>

Produces:


Second, we like that SVG is composed of text and markup, just like HTML. Because it's markup, search engines have a much easier time working with SVG; server-side languages like PHP or Google App Engine can simply emit SVG just like they generate HTML; and users and developers can easily view the source just like a normal web page to learn and move things forward. It's also easy to import and export SVG into tools like the open source Inkscape drawing package or Adobe Illustrator.

Third, the compact size of SVG when combined with HTTP GZip compression can easily make the images on a page roughly an order of magnitude smaller, and when directly embedded into an HTML 5 page can decrease the latency of a page by reducing the number of fetches. Small and fast are definitely two things we like at Google, and we like that SVG helps enable both.

Fourth, SVG integrates with the rest of the web stack, including JavaScript, CSS, and the DOM (Document Object Model). Even better, developers can easily adapt the skills they already know when working with SVG.

Finally, SVG is an open standard that is vendor-neutral. It also has accessibility built in, so when screen readers start to work with SVG your content will be future-proofed with accessibility baked in. We also like that SVG is now natively supported on all modern browsers, including the iPhone.

What Are Some Places We Use SVG?

We use SVG ourselves in a range of products. In Google Docs, for example, you can insert drawings, illustrations, and diagrams using a built in drawing tool:


On all browsers we use SVG to build this user interface; on Internet Explorer we have to revert to an older technology named Vector Markup Language (VML) unfortunately.


Another example is the Google Visualization API, which lets you access multiple sources of structured data that you can display, choosing from a large selection of visualizations. Some of these visualizations (such as this one and this one) use SVG to do their drawing on all browsers except Internet Explorer.

Canvas Or SVG? Oh My!

A natural question is how SVG compares to the Canvas tag. In our opinion both are needed for the web and are suitable for different applications.

The Canvas tag can best be thought of as a scriptable image tag that you build up yourself using JavaScript. This means it is lower-level, requiring you to keep track of all objects you have placed on the canvas. This can be a benefit if you want to do a large degree of non-interactive animation, but can quickly become a burden if you need to build sophisticated user interfaces.

SVG, meanwhile, is higher-level, doing the bookkeeping necessary to keep track of where everything is, making things like mouse interaction much easier. If you don't need this interaction, however, the overhead imposed by SVG can get in the way of certain applications. Because SVG is markup, importing and exporting is much easier, including SEO and accessibility.

We believe that Canvas versus SVG is a false dichotomy. A great example of both technologies working together is the Firefox Download Tracker. This page shows real time updates across the world whenever a copy of Firefox is downloaded. SVG is used to draw the map of the world; this is an appropriate use, since we don't want thousands of lines of JavaScript for this but rather markup from a tool like Inkscape. Red circles are drawn on top of the SVG using the Canvas tag as copies are downloaded; this is perfect for Canvas as the circles are non-interactive and might number in the thousands if copies are being downloaded rapidly.

SVG In Internet Explorer and in Wikipedia

Now that you know a bit more about SVG, why we like it, and some of the places we use it, let me tell you a bit about some of the work we've been doing to support SVG lately.

In addition to hosting this years conference, we are also helping to address the fact that SVG can't be used on Internet Explorer. It's hard for developers to use new web technologies if they can't deploy them on IE. In response to this, we've been working with others in the open source community on a drop-in JavaScript library named SVG Web that brings SVG to Internet Explorer.

SVG Web cleverly uses existing facilities on Internet Explorer 6, 7, and 8 to instantly enable SVG support without the user having to download any new software or plugins. Using SVG Web plus native SVG support you can now target close to 100% of the existing installed web base, today. Before SVG Web you could only target about ~30% of web browsers with SVG.

Once dropped in SVG Web gives you partial support for SVG 1.1, SVG Animation (SMIL), Fonts, Video and Audio, DOM and style scripting through JavaScript, and more in about a 60K library. Your SVG content can be embedded directly into normal HTML 5 or through the OBJECT tag. If native SVG support is already present in the browser then that is used. No downloads or plugins are necessary other than Flash which is used for the actual rendering, so it's very easy to use and incorporate into an existing web site. Here's a quick one minute introduction to SVG Web:



SVG Web is currently in alpha and is a developer release. It's also important to note that it is a collaboration with many others in the open source community outside Google, including Rick Masters at F5 Networks and James Hight at Zavoo Labs. Google is just one participant in this open source project. Finally, a JavaScript library will never be as fast as native support; this doesn't take Internet Explorer off the hook for needing to implement SVG, but it does help developers in the here and now deploy their SVG today to get the wheel turning.

In addition to helping enable SVG on Internet Explorer, we've been working with Wikipedia. Wikipedia has an impressively large collection of SVG files that are under Creative Commons licenses. Every one of these files is available in the Wikimedia Commons; for example here is the Linux penguin Tux as SVG. We've been working with Wikipedia to enable interactive zooming and panning of these SVG files, similar to Google Maps; even better, this functionality works in Internet Explorer thanks to the SVG Web library on the sixth largest site on the web.

Today at the SVG Open show we are demoing a prototype of the Wikipedia SVG Zoom and Pan tool; deployment to the wider base of Wikipedia users will happen after the conference and an appropriate QA period. Here's a screencast showing the tool in action:



We hope you are as excited as we are about SVG and other new web technologies in the pipeline!

By Brad Neuberg, Google Developer Programs2013, By: Seo Master

Seo Master present to you: Last week I hosted Chris Anderson for a Google tech talk on CouchDB as part of the Web E^xponents speaker series. Chris is an Apache CouchDB committer. He is co-author of the forthcoming O'Reilly book CouchDB: The Definitive Guide and a director of couch.io.

Making web applications work offline is a hot topic. Google Gears blazed the trail, and Web Storage is part of HTML5. CouchDB is a NoSQL alternative that makes it easy for web apps to run offline. This is important because even as bandwidth grows, latency is still an issue for a significant number of users, and outages or zero-bars can and do happen. CouchDB makes this a non-issue by running your application close to the user, on their device or in their browser. Chris calls this "ground computing" - a refreshing counterpoint to the oft-used "cloud computing" label. Hear more from Chris in his video and slides.



Check out other videos in the Web Exponents speaker series:

• John Resig: Drop-in JavaScript Performance
• Doug Crockford: JavaScript: The Good Parts
• Steve Souders: Life's Too Short, Write Fast Code (part 2)
• Rob Campbell: Debugging and Testing the Web with Firebug
  
• Nicholas C. Zakas: Speed Up Your JavaScript
  
• PPK: The Open Web Goes Mobile
• Aza Raskin: Conversational Computing (Ubiquity & Jetpack)
  

By Steve Souders, Performance Evangelist
2013, By: Seo Master

Seo Master present to you: On April 7th, Google launched a new version of Gmail for mobile for iPhone and Android-powered devices. We shared the behind-the-scenes story through this blog and decided to share more of what we've learned in a brief series of follow-up blog posts. This week, I'll talk about different ways to animate the floaty bar.

Even from the earliest brainstorming days for our new version of Gmail for iPhone and Android-powered devices, we knew we wanted to try something novel with menu actions: a context-sensitive, always-accessible UI element that follows conveniently as a user scrolls. Thus, the "floaty bar" was born! It took us a surprisingly long time, experimenting with different techniques and interactions, to converge on the design you see today. Let's look under the covers to see how the animation is achieved. You may be surprised to find that the logic is actually quite simple!


Screenshots of the floaty bar in action

In CSS:

.CSS_FLOATY_BAR {
 ...
 top: -50px;  /* start off the screen, so it slides in nicely */
 -webkit-transition: top 0.2s ease-out;
 ...
}

In JavaScript:

// Constructor for the floaty bar
gmail.FloatyBar = function() {
 this.menuDiv = document.createElement('div');
 this.menuDiv.className = CSS_FLOATY_BAR;
 ...
};

// Called when it's time for the floaty bar to move
gmail.FloatyBar.prototype.setTop = function() {
 this.menuDiv.style.top = window.scrollY + 'px';
};

// Called when the floaty bar menu is dismissed
gmail.FloatyBar.prototype.hideOffScreen = function() {
 this.menuDiv.style.top = '-50px';
};

gmail.floatyBar = new gmail.FloatyBar();

// Listen for scroll events on the top level window
window.onscroll = function() {
 ...
 gmail.floatyBar.setTop();
 ...
};

The essence here is that when the viewport scrolls, the floaty bar 'top' is set to the new viewport offset. The -webkit-transition rule specifies the animation parameters. (The 'top' property is to be animated, over 0.2s, using the ease-out timing function.) This is the animation behavior we had at launch, and it works just fine on Android and mobile Safari browsers.

However, there's actually a better way to achieve the same effect, and the improvement is particularly evident on mobile Safari. The trick is to use "CSS transforms". CSS transforms is a mechanism for applying different types of affine transformations to page elements, specified via CSS. We're going to use a simple one which is translateY. Here's the same logic, updated to use CSS transforms.

In CSS:

.CSS_FLOATY_BAR {
 ...
 top: -50px;  /* start off the screen, so it slides in nicely */
 -webkit-transition: -webkit-transform 0.2s ease-out;
 ...
}

In JavaScript:

// Called when it's time for the floaty bar to move
gmail.FloatyBar.prototype.setTop = function() {
 var translate = window.scrollY - (-50);
 this.menuDiv.style['-webkit-transform'] = 'translateY(' + translate + 'px)';
};

// Called when the floaty bar menu is dismissed
gmail.FloatyBar.prototype.hideOffScreen = function() {
 this.menuDiv.style['-webkit-transform'] = 'translateY(0px)';
};

Upon every scroll event, the floaty bar is translated vertically to the new viewport offset (modulo the offscreen offset which is important to the floaty bar's initial appearance). And, why exactly is this such an improvement? Even though the logic is equivalent, iPhone OS's implementation of CSS transforms is "performance enhanced", whilst our first iteration (animating the 'top' property) is performed by the OS in software. That's why the experience was unfortunately somewhat chunky at times, depending on the speed of the iPhone hardware.

You'll see smoother looking floaty bars coming very soon to an iPhone near you. This is just the first in a series of improvements we're planning for the mobile Gmail floaty bar. Watch for them in our iterative webapp, rolling out over the next couple of weeks and months!

By Joanne McKinley, Software Engineer, Google Mobile

Previous posts from Gmail for Mobile HTML5 Series:
HTML5 and Webkit pave the way for mobile web applications
Using AppCache to launch offline - Part 1
Using AppCache to launch offline - Part 2
Using AppCache to launch offline - Part 3
A Common API for Web Storage
Suggestions for better performance
Cache pattern for offline HTML5 web application
Using timers effectively
Autogrowing Textareas
Reducing Startup Latency2013, By: Seo Master

Seo Master present to you: Are you interested in HTML 5 and what's coming down the pipeline but haven't had time to read any articles yet? We've put together an educational Introduction to HTML 5 video that goes over many of the major aspects of this new standard, including:

• Web vector graphics with the Canvas tag and Scalable Vector Graphics (SVG)
• The Geolocation API
• HTML 5 Video
• The HTML 5 Database and Application Cache
• Web workers

In the video we also crack open the HTML 5 YouTube Video prototype to show you some of the new HTML 5 tags, such as nav, article, etc. It's chock full of demos and sample source code.



By Brad Neuberg, Google Developer Programs2013, By: Seo Master

Seo Master present to you: Today, we're releasing an early version of Google Chrome Frame, an open source plug-in that brings HTML5 and other open web technologies to Internet Explorer.

We're building Google Chrome Frame to help web developers deliver faster, richer applications like Google Wave. Recent JavaScript performance improvements and the emergence of HTML5 have enabled web applications to do things that could previously only be done by desktop software. One challenge developers face in using these new technologies is that they are not yet supported by Internet Explorer. Developers can't afford to ignore IE -- most people use some version of IE -- so they end up spending lots of time implementing work-arounds or limiting the functionality of their apps.

With Google Chrome Frame, developers can now take advantage of the latest open web technologies, even in Internet Explorer. From a faster Javascript engine,  to support for current web technologies like HTML5's offline capabilities and <canvas>, to modern CSS/Layout handling, Google Chrome Frame enables these features within IE with no additional coding or testing for different browser versions.

To start using Google Chrome Frame, all developers need to do is to add a single tag:

<meta http-equiv="X-UA-Compatible" content="chrome=1">

When Google Chrome Frame detects this tag it switches automatically to using Google Chrome's speedy WebKit-based rendering engine. It's that easy. For users, installing Google Chrome Frame will allow them to seamlessly enjoy modern web apps at blazing speeds, through the familiar interface of the version of IE that they are currently using.

We believe that Google Chrome Frame makes life easier for web developers as well as users. While this is still an early version intended for developers, our team invites you to try out this for your site. You can start by reading our documentation. Please share your feedback in our discussion group and file any bugs you find through the Chromium issue tracker.



(Cross-posted on the Chromium Blog)

By Amit Joshi, Alex Russell and Mike Smith, Google Chrome Frame Team2013, By: Seo Master

Seo Master present to you: By Pete LePage, Developer Advocate

Cross-posted with the Chromium Blog

Earlier this year at Google I/O, we gave developers a sneak peek at Movi.Kanti.Revo, a new sensory Chrome experiment crafted by Cirque du Soleil and developed by Subatomic Systems that brings the magic of Cirque du Soleil to the web through modern web technologies. The full experiment, which allows users to follow a mysterious character through a beautiful world of Cirque du Soleil performances, was launched today at the Big Tent event in New York City.



The experiment was created using just HTML5, and the environment is built entirely with markup and CSS. Like set pieces on stage, divs, images and other elements are positioned in a 3D space using CSS. To create movement, CSS animations and 3D transforms were applied making the elements appear closer and further away. Everything is positioned and scaled individually to create a highly realistic interactive environment. In addition, the experiment uses HTML5 <audio> to play music and sounds.

Movi.Kanti.Revo breaks with the tradition of keyboard or mouse navigation; instead users navigate through an interactive Cirque du Soleil world with their gestures. To accomplish this, the experiment asks users for permission to access their web cam using the new getUserMedia API. With this new API, the experiment renders the camera output to a small <video> element on the page. A facial detection JavaScript library then looks for movement and applies a CSS 3D transform to the elements on the page, making environment move with the user.


Because this experience was built using just markup, it works in the browser across all devices. The experiment takes advantage of the rich capabilities possible on mobile devices, like the accelerometer to navigate through the world.

To learn more about how this experiment was built, check out the new technical case study or join us for a special Google Developers Live Behind The Divs event on September 20th at 8:30am PDT /15:30 UTC where we’ll be talking to the engineers behind the project.

Head over to Movi.Kanti.Revo at www.movikantirevo.com to check things out, and be sure to open Chrome’s developer tools to see what’s going on behind the <div>s!


Pete LePage is a Developer Advocate on the Google Chrome team and works with developers to create great web applications for the Chrome Web Store. He recently helped launch the +Chrome Developers page on Google+.

Posted by Scott Knaster, Editor

2013, By: Seo Master

Seo Master present to you:

This has been an exciting year for web developers, with all the new features being made possible by HTML5 and browsers getting faster by the day. One of the big surprises has been the rise of HTML5 gaming, with the open technology stack of HTML, CSS, and Javascript becoming a viable platform for games on the web. That’s why, next month, SPIL Games and Google will be running an HTML5 Game Jam event on both sides of the Atlantic, and you’re invited!

In the Netherlands, we’ll be hosting a sleepover event at the Hilversum headquarters of SPIL Games. SPIL recently converted their 47 mobile portals to work on mobile HTML5, and is running a $50,000 HTML5 games contest. Hilversum is a quick train journey from Amsterdam and the spacious premises are the perfect setting for hardcore games hacking, which means we’ll be coding HTML5 games all weekend. Participants will be able to sleep over on-site. In which case, please bring a sleeping bag, change of clothes, and don’t forget your toothbrush! We’ll also mail out a list of hotels in the Hilversum area for those who’d rather book a room instead (at your own cost).

Meanwhile, we’ll be running a parallel event at Google’s office in downtown San Francisco. We won’t quite be pulling an all-nighter like our friends in the Netherlands, but we will keep our doors open till midnight.

This will primarily be a hands-on hackathon in both locations, which runs from Saturday October 9th, 10am to Sunday October 10th, 6pm. We’ll kick off with short talks on the technology, followed by pitches from anyone with ideas on a great game. Then it will be hacking all day. We’ll pick up again on Sunday at 10am, and wrap up at 6pm with presentations and judging. There will also be chillout areas with games and diversions, and food and drinks to fuel your frenetic hacking.

The event is free of charge and places are limited. Sign Up here, and we’ll mail back with confirmations soon. We’re looking forward to see what games you can build using HTML5!

By Michael Mahemoff, Chrome Developer Relations2013, By: Seo Master

Seo Master present to you:
This guest post was written by Tal Raviv, CTO of Ecquire

Even though the words "browser extension" connote a one-trick feature, today’s browser extensions allow developers to accomplish some pretty amazing things. Entire companies are being funded and sold as extensions and providing serious value to users.

Here’s how you can make your browser extension a formidable product.

1. Use Your Superpowers

Developing an extension gives you advantages you may not have been aware of. Think of your extension as an abnormally powerful front end. I'll name a few features we've especially enjoyed:

• Let your users install very slickly directly from your home website to increase conversions.
• List on the Chrome Web Store for tens of thousands of free impressions. (Tip: For maximum exposure and traffic, invest time in beautiful graphic assets.)
• Use localStorage as a super-easy store. Unlike in regular web applications, localStorage for extensions remains untouched even if users clear their cookies. (For more structured, asynchronous, client-side storage of large amounts of objects, take a look at IndexedDB.)
• Let Chrome sync your extension across devices, including data you store in chrome.storage.sync.

Extensions are your chance to hack with any site you've wanted to improve beyond the limits of their API. There are many more very powerful advantages browser extensions have - these are just the lesser known ones.

Check out examples and look at what other apps (even silly ones) have done. If you find yourself asking “how did they do that?”, check out the source code.

2. Know What's Going On Inside Your App

Because extensions are front ends on steroids, you have your pick of almost any web analytics software you choose. We recommend choosing an event-based, not a page view-based model because the definition of a page view is hard to interpret in most extensions. Instead, track specific interactions.

We chose Mixpanel, but there's an official Chrome tutorial on using Google Analytics in an extension. The principles of implementation are the same no matter what you choose.

Solid analytics help you answer questions about what's going on inside your app using hard data instead of intuition and opinions. It will also undoubtedly reveal a few unexpected surprises about user behavior.

3. Connect to Third-Party APIs

Good apps avoid reinventing the wheel, and great apps connect users to the services they already like using. Extensions can request permission to connect with any domain. Just because you're an extension doesn't mean you can't use OAuth to authorize those requests.

If your extension has a server backend, then fantastic, you have plenty of resources to help you. If you want to directly make requests from the user's computer, that is completely possible. The initial handshake and exchange of access token is done from a light server, but after that you can save the tokens locally. This allows your extension to run all of its interactions client-side if you'd like to keep things simple.

4. Make Money

Accepting credit cards and making financial transactions via an extension can be just as ironclad and secure as anywhere else. There's no shortage of billing management services that provide hosted payment pages and APIs.

Simply direct users to secure hosted payment pages to accept credit card information, letting the billing service deal with compliance. We use Recurly, which conveniently allows our users to use coupon codes, receive invoices by email, and manage their billing info directly, saving us even more development time and headache.

Hosted payment pages may be simple to implement, but they are pretty powerful (see also Chargify and CheddarGetter). They allow very specific management of your paying customers. Hosted payment pages can make your extension aware of the user's subscription status, to deactivate or activate as appropriate. Your customers’ payment statuses can be accessed with APIs behind the scenes throughout the lifetime of your extensions.

If you prefer a super-streamlined flow for your customers - one where they potentially do not need to enter their credit card information - using a hosted payment page from Paypal or the recently announced Google Wallet for digital goods are your best bets for maximum coverage and quickest checkout.

Using hosted payment systems affords maximum functionality with the least amount of coding and testing - or any server-side billing logic. Most importantly, you have peace of mind that your customer's financial information is secure and compliant. No compromises.

5. Use Frontend Frameworks

Anywhere there's JavaScript, you can use JQuery, BackboneJS and CoffeeScript: any JS library or plugin you love. This applies across the extension architecture, from injected UI in content scripts to any background code. The entire platform is web frontend - you can run anything you would use in a web application.

6. Test All the Freaking Time

Okay, I admit it's a more fun motto to say than to do, but if you're a TATFTer, I have good news for you. Adrian Unger provides a how-to on using Jasmine BDD in browser extensions even in the sub-cockles of your content scripts, even in the context of a live, logged-in webpage.

Peace of mind about your code is important, but it's even more crucial in extensions where you don't control the webpages you may be injecting into. You can use Jasmine to assert that the DOM of your target web sites hasn't changed too much and that your code is still valid out in the wild web.

In summary, just when you thought you knew everything you could do on the web, new doors open up. This is just a small taste of our lessons learned about what puts browser extensions in the league of extraordinary platforms. Like any new platform, I can’t even imagine the innovation that has yet to launch.


Tal Raviv is the CTO of Ecquire, a maker of CRM workflow automation software. Capture contacts from anywhere and Ecquire puts it in the right account for you. Read Tal’s guides on Chrome development and startup experiences on the Ecquire blog.

Posted by Scott Knaster, Editor

2013, By: Seo Master

Seo Master present to you:
By Pieter Senster, Software Engineer

In June we released Swiffy, an experimental tool to convert Flash to HTML5, on Google Labs. We were thrilled with the response: in the first month, Swiffy users converted hundreds of thousands of files.

We received a lot of feedback from developers after the launch, and we learnt a lot from studying the warnings generated in the conversion process. As a result, we’ve released several improvements over the last few weeks. For example, Swiffy now supports shape tweening and drop shadow, blur and glow filters, all using SVG, CSS and JavaScript. Some of these filters can be seen in action in this Chrome ad (on a browser with SVG filter support).

We’ve also made Swiffy easier to use. You can now convert files of up to 1MB, and you’ll get a QR code to preview the output on a mobile device. We’ve also made it clear that you can host the Swiffy runtime (the JavaScript file that controls the animation) yourself if you need to.

Although Google Labs is winding down, Swiffy will continue to be available. We’re moving Swiffy to a new home: http://www.google.com/doubleclick/studio/swiffy (or, for those in a hurry, g.co/swiffy). Although it’s no longer a Labs product, it is still in beta, so it may not be able to convert all your Flash files, but we’re working to improve it all the time.

Pieter Senster is a Software Engineer on the Swiffy team. He's currently planning his first diving trip to the Great Barrier Reef.

Posted by Scott Knaster, Editor

2013, By: Seo Master

Seo Master present to you: On April 7th, Google launched a new version of Gmail for mobile for iPhone and Android-powered devices. We shared the behind-the-scenes story through this blog and decided to share more of what we've learned in a brief series of follow-up blog posts. This week, I'll talk about how modularization can be used to greatly reduce the startup latency of a web app.

To a user, the startup latency of an HTML 5 based application is critical. It is their first impression of the application's performance. If it's really slow, they might not even bother to wait for the app to load before navigating away. Even if your application is blazing fast after it loads, the user may never get the chance to experience it.

There are several aspects of an HTML 5 based application that contribute to startup latency:

1. Network time to fetch the application (JavaScript + HTML)
2. JavaScript parse time
3. Code execution time to fetch the data and render the home page of your application

The third issue is up to you! The first two issues, however, are directly correlated with the size of the application. This is a tricky problem since as your application matures, it will have more features and the code size will get bigger. So, what to do? Modularize your application! Split up your code into independent, standalone modules. Consider splitting each view/screen of your application and implement each new feature as its own module. This is only half the story. Now that you have your code modularized, you need to decide which subset of these modules are critical to load your application's home page. All the non-core modules should be downloaded and parsed at a later time. With a consistent code size for your startup code, you can maintain a consistent startup time. Now, let's go into some nitty gritty details of how we built an application with lazy-loaded modules.

How to Split Your Code into Modules

Splitting an application into individual modules might not be as simple as you think. Code that serves a common purpose/functionality should be grouped together and form a module (comparable to a library). As mentioned earlier, we selected which modules are critical to the home page of the app and which modules can be lazy-loaded at a later time. Let's use a Weather application as an example:

High Level Functionality:

• A "Weather in my Favourite Cities" home page
• Click on a city to view the cities entire week forecast
• Weather data comes from an external web service

Possible Module Separation:

• Weather data model
• Weather web service API
• Common UI widgets (buttons, toolbars, navigation, etc)
• Favourite Cities page
• City Weather Forecast page

Now let's say your users want a "breaking news" feature. No problem: just put the page, the news data API and the data model into a new module.

One thing to keep in mind is the dependency order of your modules. For modules that have many downstream dependencies, it might make sense to include them as part of the core modules.

How to Lazy Load the Modules

Option 1: Script as DOM

This method uses JavaScript to insert SCRIPT tags into the HEAD's DOM.

<script type="text/JavaScript">
  function loadFile(url) {
    var script = document.createElement('SCRIPT');
    script.src = url;
    document.getElementsByTagName('HEAD')[0].appendChild(script);
  }
</script>

Option 2: XmlHttpRequest (XHR)

This method sets up XmlHttpRequests to retrieve the JavaScript . The returned string should be evaluated in the XHR callbacks (using the eval(string) method). This method is a little more complicated but it gives you more control over error handling.

<script type="text/JavaScript">
  function loadFile(url) {
     function callback() {
      if (req.readyState == 4) { // 4 = Loaded
        if (req.status == 200) {
          eval(req.responseText);
        } else {
          // Error
        }
      }
    };
    var req = new XMLHttpRequest();
    req.onreadystatechange = callback;
    req.open("GET", url, true);
    req.send("");
  }
</script>

The next question is, when to lazy load the modules? One strategy is to lazy load the modules in the background once the home page has been loaded. This approach has some drawbacks. First, JavaScript execution in the browser is single threaded. So while you are loading the modules in the background, the rest of your app becomes non-responsive to user actions while the modules load. Second, it's very difficult to decide when, and in what order, to load the modules. What if a user tries to access a feature/page you have yet to lazy load in the background? A better strategy is to associate the loading of a module with a user's action. Typically, user actions are associated with an invocation of an asynchronous function (for example, an onclick handler). This is the perfect time for you to lazy load the module since the code will have to be fetched over the network. If mobile networks are slow, you can adopt a strategy where you prefetch the code of the modules in advance and keep them stored in the javascript heap. Only then parse and load the corresponding module on user action. One word of caution is that you should make sure your prefetching strategy doesn't impact the user's experience - for example, don't prefetch all the modules while you are fetching user data. Remember, dividing up the latency has far better for users than bunching it all together during startup.

For an HTML 5 application that takes advantage of the application cache to reduce startup latency and to serve the application offline, there are a few caveats one should be aware of. Mobile networks have decent bandwidth, but poor round trip latency, so listing each module as a separate resource in the manifest incurs quite a bit of extra startup latency when the application cache is empty. Also, if one of the module resources fails to be downloaded by the application cache (e.g. disconnected from network), additional error handling code needs to be written to handle such a case. Finally, applications today have no control when the application cache decides to download the resources in the manifest (such a feature is not defined in the current specification of the draft standard). Typically, resources are downloaded once the main page is loaded, but that's not an ideal time since that's when the application requests user data.

To work-around these caveats, we found a trick that allows you to bundle all of your modules into a single resource without having to parse any of the JavaScript. Of course, with this strategy, there is greater latency with the initial download of the single resource (since it has all your JavaScript modules), but once the resource is stored in the browser's application cache, this issue becomes much less of a factor.

To combine all modules into a single resource, we wrote each module into a separate script tag and hid the code inside a comment block (/* */). When the resource first loads, none of the code is parsed since it is commented out. To load a module, find the DOM element for the corresponding script tag, strip out the comment block, and eval() the code. If the web app supports XHTML, this trick is even more elegant as the modules can be hidden inside a CDATA tag instead of a script tag. An added bonus is the ability to lazy load your modules synchronously since there's no longer a need to fetch the modules asynchronously over the network.

On an iPhone 2.2 device, 200k of JavaScript held within a block comment adds 240ms during page load, whereas 200k of JavaScript that is parsed during page load added 2600 ms. That's more than a 10x reduction in startup latency by eliminating 200k of unneeded JavaScript during page load! Take a look at the code sample below to see how this is done.

<html>
...
<script id="lazy">
// Make sure you strip out (or replace) comment blocks in your JavaScript first.
/*
JavaScript of lazy module
*/
</script>

<script>
  function lazyLoad() {
    var lazyElement = document.getElementById('lazy');
    var lazyElementBody = lazyElement.innerHTML;
    var jsCode = stripOutCommentBlock(lazyElementBody);
    eval(jsCode);
  }
</script>

<div onclick=lazyLoad()> Lazy Load </div>
</html>

In the future, we hope that the HTML5 standard will allow more control over when the application cache should download resources in the manifest, since using comments to pass along code is not elegant but worked nicely for us. In addition, the snippets of code are not meant to be a reference implementation and one should consider many additional optimizations such as stripping white space and compiling the JavaScript to make its parsing and execution faster. To learn more about web performance, get tips and tricks to improve the speed of your web applications and to download tools, please visit http://code.google.com/speed.

Previous posts from Gmail for Mobile HTML5 Series

HTML5 and Webkit pave the way for mobile web applications
Using AppCache to launch offline - Part 1
Using AppCache to launch offline - Part 2
Using AppCache to launch offline - Part 3
A Common API for Web Storage
Suggestions for better performance
Cache pattern for offline HTML5 web application

By Bikin Chiu, Software Engineer, Google Mobile2013, By: Seo Master

Seo Master present to you:

This week, a lot.

Today we’re excited to announce the band Arcade Fire’s new project “The Wilderness Downtown,” an interactive HTML5 music experience that is being showcased on Google’s Chrome Experiments site. The project was created by writer/director Chris Milk with Arcade Fire and Google.

We put everything except the proverbial kitchen sink into this project: It features HTML5 audio, video, and canvas, animated windows with JavaScript controllers, mash-ups with Google Maps and Street View APIs, and an interactive drawing tool. You can take a look at how all this works by viewing the source code.

Check out the project or learn more about the techniques used to make it happen at www.chromeexperiments.com/arcadefire.

We hope you enjoy it.

By George Michael Brower, Google Creative Lab2013, By: Seo Master