background preloader

Ninja power: open-source HTML5 toolset aims to enable richer Web apps

Ninja power: open-source HTML5 toolset aims to enable richer Web apps
Modern HTML rendering engines and emerging standards make it possible to create a new class of rich experiences that could previously be achieved only with native development toolkits—but developers need better Web development frameworks and authoring tools in order to take advantage of the possibilities. Three new open-source software projects developed at Motorola Mobility hope to address the problem. We—Tim Statler, Zachary Cohen, and Kris Kowal—have had the pleasure of working on a new content creation tool called Ninja, a JavaScript development framework called Montage, and a testing automation tool called Screening. In this article, we will describe all three pieces of software, and we've included code examples to illustrate some of the functionality. The Ninja authoring tool is a Google Chrome app for designing keyframe-based animation with HTML5, including 3D scenes and vector graphics. Montage bridges the gap between developing native applications and Web sites. Workspace Layout

L’infographie ultime sur le HTML 5 Le HTML 5 s’annonce depuis pas mal de temps comme l’une des technologies qui va permettre de multiplier encore plus les usages du Web. Si vous avez toujours voulu savoir en quoi consistait cette évolution sans jamais avoir osé le demander (bande de petits canaillous ! :-p), voici une très bonne infographie qui fait le point sur cette technologie en passe de changer nos habitudes en ligne : Si vous travaillez dans le Web, il va vraiment falloir s’y mettre ! Source et Image leak-finder-for-javascript - Tool for finding memory leaks in JavaScript programs. In JavaScript you cannot have "memory leaks" in the traditional sense, but you can have objects which are unintentionally kept alive and which in turn keep alive other objects, e.g., large parts of DOM. Leak Finder for JavaScript works against the Developer tools remote inspecting protocol of Chrome, retrieves heap snapshots, and detects objects which are "memory leaks" according to a given leak definition. The default configuration of the tool detects goog.Disposable objects which were not dispose()d. goog.EventTarget is a subclass of goog.Disposable, and if an EventTarget is not disposed, event listeners are not discarded properly, and event listeners in turn keep DOM objects alive. It's possible to configure the tool to detect other similar misuses. Resources: Getting the code: 1. 2. 3. gclient sync Running the code: Requirements: simplejson (For Ubuntu, the package is python-simplejson, for Mac see ) Prerequisites:

A New Collection of Free HTML5 and CSS3 Templates Jul 18 2012 Professionally designed and neatly coded templates always make life easier for developers, not only because they save time, but also for the effort they save. Since web development is an ever expanding field, it is important for developers to keep their work up to date with the latest changes. HTML5 and CSS3 templates are there to make your websites future proof and make them even more accessible. In this round up, we are presenting a brilliant collection of some fresh and free HTML5 and CSS3 templates that you can download today. The Templates Template for Powerful Business Startup ( Demo | Download ) The visually pleasing layout is the first thing that catches the attention when you look at this theme, but it’s certainly not the last. Animated Neoarts ( Demo | Download ) This is a modern and elegantly designed web template suitable for Design/Studio websites. Vintage – HTML Template ( Demo | Download ) This is a responsive blog template that comes with a retro touch.

Formation en soirée Objet Direct : HTML5 ! Le 25 juin à Toulouse | Objet Direct Write once, run every … Smartphone Ou comment développer 1 application en HTML5 compatible avec la majorité des Smartphones. L’engouement actuel pour les Smartphones a conduit de nombreuses entreprises à développer des applications spécifiques pour l’iPhone, Android, BlackBerry, Windows Phone, Symbian, … Avec l’adoption massive par les navigateurs Web de HTML5 et de CSS3 d’une part, mais aussi du moteur WebKit d’autre part, il est possible aujourd’hui de n’investir que dans un seul développement. Alternative aux APIs propriétaires, HTML5 et CSS3 permettent néanmoins de construire des applications dont l’apparence est proche d’une application native. Nous commencerons cette formation par la découverte des principales APIs de HTML5. HTML5 versus un développement natif, L’avenir de HTML5. Vous allez : Informations et inscription* : afouquet[@]objetdirect.com (attention : le nombre de places est limité !) *Participation gratuite après confirmation par Objet Direct

etherwall 5 herramientas para simplificar el desarrollo en HTML5 A pesar de que el W3C -World Wide Web Consortium- y WHATWG -Web Hypertext Application Technology Working Group - aún se encuentran trabajando en él, HTML5, con sus nuevas y magnificas características, está revolucionando la forma en que se desarrolla para la web. Es una realidad que, a la fecha, no todos los navegadores soportan todas las características del estándar -aunque hay que reconocer que se esfuerzan mucho para mejorar la compatibilidad con cada versión- sin embargo, desarrollar hoy día en HTML5 trae muchos beneficios, sobre todo de cara al futuro. Para el día de hoy, se encuentran disponibles una gran variedad de herramientas para simplificar el desarrollo en HTML5, útiles tanto para los más expertos como para los que apenas se inician. Personalmente encuentro muy atractivas estas 5 que compartiré con ustedes a continuación: Initializr HTML 5 Demos HTML 5 Visual Cheat Sheet SwitchToHTML5 HTML5 Reset

video + canvas = magic You’ve already learned about the <video> and <canvas> elements, but did you know that they were designed to be used together? In fact, the two elements are absolutely wondrous when you combine them! I’m going to show off a few super-simple demos using these two elements, which I hope will prompt cool future projects from you fellow web authors. (All of these demos work in every modern browser except Internet Explorer.) First, the basics If you’re just starting with HTML5, you may not be familiar with the <video> element and how to use it. The <video> element contains two attributes: @controls and @loop. Then, inside the <video> element, we have three child <source> elements, each pointing to a different encoding of the same video. See this code in action, playing the intro to one of the greatest cartoon series of all time. (A note about fallback: all of these demos assume that your browser has <video> support, which isn’t true in IE8 or earlier. Now, a simple example Done? <! },false);

Main Page - Syncany 5 of the Best Free HTML5 Presentation Systems I have a lot of respect for Microsoft PowerPoint. It may be over-used and encourages people to create shocking slide shows, but it’s powerful and fun. I have just one criticism: all PowerPoint presentations look the same. It doesn’t matter how you change the colors, backgrounds, fonts or transitions — everyone can spot a PPT from a mile away. Fortunately, we now have another option: HTML5. it’s quicker to add a few HTML tags than use a WYSIWYG interfaceyou can update a presentation using a basic text editor on any devicefiles can be hosted on the web; you need never lose a PPT againyou can easily distribute a presentation without viewing softwareit’s not PowerPoint and your audience will be amazed by your technical prowess. Admittedly, HTML5 presentations are not quite as powerful: you require web coding skillspositioning, effects and transitions are more limitedfew systems offer slide notes (it’s a little awkward to show them separately)it’s more difficult to print handouts Reveal.js

Related: