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

Deroy

Sergio

• We used HTML5, SVG, and canvas to draw the visualization, alongside CSS3 transforms, rotation, and perspective for immersive animation and data interaction.
• We used CSS3 to kick off the timeline with a 3D-like animation, as well as the panning and zooming functions, toggling between day and night modes.
• Additionally, we took advantage of the D3 JavaScript library’s interaction and visual frameworks.

Last month, just before I left on vacation, I posted three sets of data to help implementors of the HTML5 parser specification optimise their code. There are several implementations coming along, for example those that are part of the html5lib project and the one behind Validator.nu.

The three sets of data that I posted are all derived from parsing several billion documents from Google's Web search index using a parser I wrote in Sawzall.

The first set of data gives the relative aggregate distribution of invocations of the "in head", "in body", and "in table" insertion modes, for each of the insertion modes. This allows implementors to determine, for instance, that invoking the "in body" code while in a cell must be very efficient, while invoking the "in body" code from the "after frameset" code need not be as efficient, in case the implementor has a strategy that optimises one at the cost of another. See: documentation, data.

The second set of data gives the relative aggregate distribution of tokens for each phase/insertion mode pair. This can help implementors that are using a cascade of if statements decide on the right order for their statements. For instance, the most common token type seen in the "in body" insertion mode is character data, and the second most token is the start tag token for an a element, but the isindex start tag was almost never seen. This tells implementors that they should check for characters and a start tags long before checking for isindex tags. See: documentation, data.

The last set of data examines the number of attributes per element. It allows implementors to decide on the optimum memory allocation strategy for attributes. For example, since most elements have 9 or fewer attributes, the data structure that stores attributes can be optimised for simply having 9 attributes, using little memory, and if an element has more than this number of attributes, the implementation can switch to a separate implementation that is more memory-heaving but is optimised for large numbers of attributes. See: data.

I hope this data is useful!

• Many protocols that power the Internet and the web were developed when broadband and rich interactive web apps were in their infancy. Networks have become much faster in the past 20 years, and by collaborating to update protocols such as HTML and TCP/IP we can create a better web experience for everyone. A great example of the community working together is HTML5. With HTML5 features such as AppCache, developers are now able to write JavaScript-heavy web apps that run instantly and work and feel like desktop applications.


• In the last decade, we have seen close to a 100x improvement in JavaScript speed. Browser developers and the communities around them need to maintain this recent focus on performance improvement in order for the browser to become the platform of choice for more feature-rich and computationally-complex applications.


• Many websites can become faster with little effort, and collective attention to performance can speed up the entire web. Tools such as Yahoo!'s YSlow and our own recently launched Page Speed help web developers create faster, more responsive web apps. As a community, we need to invest further in developing a new generation of tools for performance measurement, diagnostics, and optimization that work at the click of a button.


• While there are now more than 400 million broadband subscribers worldwide, broadband penetration is still relatively low in many areas of the world. Steps have been taken to bring the benefits of broadband to more people, such as the FCC's decision to open up the white spaces spectrum, for which the Internet community, including Google, was a strong champion. Bringing the benefits of cheap reliable broadband access around the world should be one of the primary goals of our industry.

var statement = google.wspl.Statement('SELECT col from test_table;');
database.createTransaction(function(tx) {
  tx.executeAll([statement], {onSuccess: function(tx, resultSet) {
    // Statement succeeded.

    for(; resultSet.isValidRow(); resultSet.next()) {
      window.console.info(resultSet.getRow()['col']);
    }
  }, onFailure: function(error) {
    // Statement failed.
  }}); 
}, {onSuccess: function() {
    // After transaction commits, before any other starts.
}, onFailure: function(error) {
    // After transaction fails, before any other starts.
}});

• There are cross-browser issues related to resizing the canvas tag once it's been created. In Firefox you're ok. In Safari, you need to destroy and re-create the region to get the canvas to draw properly. With IE, the region doesn't clear and redraw automatically.


• In the canvas element you can't say, "this line being drawn should be this class". There is no separation between the presentation and the markup. It has to be programmatically done and it's cumbersome to keep tweaking JS code to change the look and feel of what is being rendered. So how do you tell the canvas what style of wire to draw? We chose to use the styles of the source and target terminals to infer the wire styles in their CSS. We put the configuration of the wire style (color, width, thickness etc..) into the background image filename of each terminal which the JavaScript could parse to create a compatible render style for our canvas wires.


• Performance rapidly decreases with size, especially with other overlapping DOM elements such as many transparent elements and other canvas tags. There is a tradeoff therefore between using one canvas tag with many wires or one canvas for each wire. The latter worked better for our usage within the Pipes editor.


• There are no "canvas" events about the "inside" of the canvas, It's just a 2D layer, and mixing DOM elements with canvas has significant event occlusion issues. Even if you are only drawing a wire within the canvas rectangle, anything under the canvas won't see events (mouseover, click etc) as the bounding box acts like any other element. This issue involved the most iterations in our interaction design. Initially we wanted the wires above the modules, but because of the event occlusion that the canvas tag created, we couldn't do a drag/drop (since the targets were always "under" the canvas). Since the wires had to be on the bottom, we then tried making the Pipes' modules themselves semi-transparent. Not only does this give a faded out look to the whole page, but many transparent elements create significant rendering performance issues. We finally picked a solution that kept the wires under the modules and when mouse-overing the canvas containing the wire bounding box, we made the modules connected to either end of the wire in the canvas semi-transparent using animation. This allows parts of the UI to show the wiring flowing around and under modules when the user focuses (by moving the mouse over) on a wire.

1. Go to Settings->Safari and tap "Clear Cache".
2. Open Safari and terminate it by holding down the home screen button for 10 seconds.

~/Library/Application Support/iPhone Simulator/User/Library/Caches/com.apple.WebAppCache/ApplicationCache.db

$ sqlite3 ApplicationCache.db
SQLite version 3.4.0
Enter ".help" for instructions
sqlite> .mode column
sqlite> .headers on
sqlite> .tables
CacheEntries        CacheResourceData   CacheWhitelistURLs  FallbackURLs      
CacheGroups         CacheResources      Caches              SchemaVersion     
sqlite> select * from CacheGroups;
id          manifestHostHash  manifestURL                                        newestCache
----------  ----------------  -------------------------------------------------  -----------
1           906983082         http://mail.google.com/mail/s/?v=ma&name=sm        1 

sqlite> select * from Caches;
id          cacheGroup
----------  ----------
1           1      

sqlite> select * from CacheEntries limit 1;
cache       type        resource  
----------  ----------  ----------
1           2           1       

sqlite> select * from CacheResources where id=1;
id          url                                          statusCode  responseURL            
----------  -------------------------------------------  ----------  -----------------------
1           http://mail.google.com/mail/s/?v=ma&name=sm  200         http://mail.google.c...

mimeType             textEncodingName  headers data
-------------------  ----------------  --------------
text/cache-manifest  utf-8             


sqlite> .schema CacheResourceData
CREATE TABLE CacheResourceData (id INTEGER PRIMARY KEY AUTOINCREMENT, data BLOB);

sqlite> select type,url,mimeType,statusCode from CacheEntries,CacheResources where resource=id;
type        url                                             mimeType             statusCode
----------  ----------------------------------------------  -------------------  ----------
2           http://mail.google.com/mail/s/?v=ma&name=sm     text/cache-manifest  200       
4           http://mail.google.com/mail/images/xls.gif      image/gif            200       
4           http://mail.google.com/mail/images/pdf.gif      image/gif            200       
4           http://mail.google.com/mail/images/ppt.gif      image/gif            200       
4           http://mail.google.com/mail/images/sound.gif    image/gif            200          
4           http://mail.google.com/mail/images/doc.gif      image/gif            200       
4           http://mail.google.com/mail/images/graphic.gif  image/gif            200       
1           http://mail.google.com/mail/s                   text/html            200       
4           http://mail.google.com/mail/images/generic.gif  image/gif            200       
4           http://mail.google.com/mail/images/zip.gif      image/gif            200       
4           http://mail.google.com/mail/images/html2.gif    image/gif            200       
4           http://mail.google.com/mail/images/txt.gif      image/gif            200   

// Each animation frame is 16x16 pixels
var sheet = new ig.AnimationSheet( 'player.png', 16, 16 );

// This creates the "run" animation: it has 6 frames (the 2nd row 
// in the image), with each one being shown for 0.07 seconds
var run = new ig.Animation( sheet, 0.07, [6,7,8,9,10,11] );

// Create a 2D tilemap
var map = [
 [5, 3, 4],
 [2, 7, 1],
 [6, 0, 3]
];

// Specify a layer with a tilesize of 16px and our tilemap
var layer = new ig.BackgroundMap( 16, map, 'tileset.png' );
layer.draw();

CACHE MANIFEST
# version: 3f1b9s84
jsfile1.js
... other URLs ...

• Cache (what we have dealt with so far),
• Fallback,
• Network

CACHE MANIFEST
jsfile1.js

NETWORK:
/images/

FALLBACK:
/thumbnails/ images/missing_thumb.jpg

• 0 - UNCACHED
• 1 - IDLE
• 2 - CHECKING
• 3 - DOWNLOADING
• 4 - UPDATEREADY

if (window.applicationCache.status == 0) {
  // Page was loaded from the Network.
} else {
  // Page was loaded from AppCache
}

CACHE MANIFEST
jsfile1.js
jsfile2.js
styles.css
/images/image1.png
/images/image2.png

<html manifest="/sitemanifest">