background preloader

Ninja power: open-source HTML5 toolset hopes to unleash the Web

Ninja power: open-source HTML5 toolset hopes to unleash the Web
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. But first—a high-level overview. The Ninja authoring tool is a Google Chrome app for designing keyframe-based animation with HTML5, including 3D scenes and vector graphics. Modularity is a key theme of the project. Workspace Layout Related:  HTML5 & CSS3

Ninja – Un outil révolutionnaire pour coder en HTML5 CSS3 Ninja – Un outil révolutionnaire pour coder en HTML5 CSS3 3 développeurs indépendants ont mis en ligne sur le Chrome App Store, une application encore en version alpha baptisée Ninja. Ce soft est un éditeur pro destiné principalement au développement HTML5. Il gère les technos SVG, Canvas et WebGL nativement, permet d'importer vos propres graphismes et de les mettre en mouvement grâce à une timeline et des modèles de CSS. L'outil est vraiment complet et poussé et propose une vue code, une vue "design" ainsi qu'une palette d'outils assez balèse. ArsTechnica a publié un tuto d'initiation à l'outil que je vous invite à découvrir. Je ne suis pas un grand développeur donc n'hésitez pas à me dire ce que vous en avez pensé à l'usage. Vous avez aimé cet article ?

Codiad - Server IDE Comment créer des lignes diagonales en CSS3 Dans ce tutoriel, nous allons vous expliquer pas à pas comment créer des lignes diagonales en CSS3. Afin de facilité la compréhension, nous utiliseront un même exemple tout au long de ce tutoriel. Nous allons créer un cadre avec un contenu (texte, paragraphe, liste, formulaire …) et un titre. C’est justement ce titre qui bénéficiera d’une ligne en diagonales pour le rendre plus jolie. Et le tout en CSS3, sans rajouter d’image d’arrière-plan ! Comme pour le résultat final ci-dessous : Cadre en diagonal Et sans image en arrière-plan ! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. La technique employée est assez simple, mais, néanmoins, peu de gens la connaissent. La partie HTML du cadre Pour commencer, nous allons créer un cadre en HTML5 : Et sans image en arrière-plan ! L’encadrement du titre avec une ligne diagonale en CSS3 Pour la mise en page, nous allons régler la police, la taille et les marges de notre cadre :

Tutoriel : Un cadre de partage qui s’affiche lorsque la page défile vers le bas – Animation jQuery Dans ce tutoriel, nous allons vous détaillé comment créer un cadre de partage (Facebook …) qui s’affichera au défilement de la page avec une animation en jQuery. Cette technique est de plus en plus employé sur de nombreux sites. Ne vous est-il jamais arrivé de voir un bandeau ou un cadre apparaitre dans le coin inférieur droit de votre écran pour vous proposer un article relatif à celui que vous lisez ? Dans ce tutoriel, nous utiliseront ce procédé pour essayer d’accroitre le nombre d’abonnés à nos réseaux sociaux. Nous vous détaillerons pas à pas les différentes étapes de création. Le résultat final Introduction Nous procèderons de la manière suivante : Création d’une page web pour notre exemple, elle sera compose d’un titre et de plusieurs paragraphes.Création d’un cadre en HTML5.Intégration du code facebook like box dans notre cadre.Mise en forme du cadre en CSSAnimation en jQuery du cadre Code source en HTML5 : le corps de la page Création du cadre en HTML5 Mise en forme du cadre en CSS

Les ressources et logiciels nécessaires pour développer en HTML5 – et/ou en CSS3 Ceci est le deuxième chapitre du Tutoriel complet pour apprendre le HTML5. Découvrons quels sont les outils et ressources dont vous aurez besoin pour développer vos futurs sites web en HTML5. Et première bonne nouvelle, vous ne serez pas obligé de débourser un seul centimes pour coder en HTML5 ou en CSS3. Pour commencer à écrire vos premières lignes de codes HTML5, vous n’aurez besoin que de deux choses : Un éditeur de texte et un navigateur. Du simple éditeur de texte au gestionnaire de projet Si un simple bloc-note peut suffire pour coder en HTML5 ou CSS3, d’autres alternatives existent et apportent bien souvent un meilleur confort. Certain logiciel gratuit sont bien plus pratique, par exemple, il vous propose d’enregistrer votre document sous de nombreuses extension (html, css, php, javascript …). Notepad++ : un éditeur de code GRATUIT à coloration syntaxique pour windows Si votre machine tourne sous windows, vous pourrez utiliser le célèbre notepad++. Les solutions de test en ligne

24 Astuces et Techniques HTML5 à connaitre Le web évolue rapidement, très rapidement. Si vous ne faites pas attention, vous allez vite être dépassé. Voici donc un petit rappel sur l’évolution du HTML5 et ses mises à jour. Ce tutoriel est une liste de 24 Astuces et techniques essentiel et à connaitre en HTML5. Article complémentaire : 20 Conseils et astuces pour coder proprement ses pages en HTML5 1. Il est désormais inutile de mémoriser un ligne de code a rallonge. En savoir plus sur le doctype en HTML5. En HTML5, le doctype n’est pas obligatoire ni nécessaire. 2. L’attribut Type n’est plus nécessaire. 3. Telle est la question. faîtes-vous votre propre idée. 4. les calques Div, par nature, n’ont pas de structure sémantique – même si un id lui est appliquée. Il est tout à fait possible d’avoir plusieurs en-têtes et pieds de page dans vos projets. 5. Internet Explorer requiert quelque notification dans le but de comprendre les éléments HTML5 nouvelles. 6. Noté que les guillemets ne sont pas obligatoires. 7. 8. 9. la balise <hgourp>

Les nouveaux éléments de formulaire en HTML5 Le HTML5 apporte 3 nouveaux éléments pour les formulaires : les balises <datalist>, <keygen> et <output>. Bien que les principaux navigateurs ne supportent pas encore tous les nouveaux éléments de formulaire, vous pouvez déjà commencer à les utiliser. Si ils ne sont pas pris en charge, ils vont se comporter comme des champs de texte ordinaire. I. La balise <datalist> en HTML5 L’élément <datalist> spécifie une liste pré-définis d’options pour un élément <input>. L’élément <datalist> est utilisé pour fournir une »saisie semi-automatique » sur les éléments <input>. II. Le but de l’élément <keygen> est de fournir un moyen sécurisé pour authentifier les utilisateurs. La balise <keygen> spécifie un champ générateur de clés dans un formulaire. Lorsque le formulaire est soumis, deux clés sont générées, l’une publique et l’autre privée. La clé privée est stockée localement, et la clé publique est envoyée au serveur. III.

Canvas - Le graphisme dans un navigateur La balise Canvas est définie dans le nouveau format de pages HTML 5, et elle déjà implémentée sur la plupart des navigateurs. Elle permet d'afficher du graphisme en 2D dans le navigateur et ainsi faire de celui-ci une plateforme d'applications web riches. Comment utiliser Canvas La balise n'a que deux attributs: width et height (largeur et hauteur), outre les attributs génériques comme id, name, class... Le corps de la balise n'est pas affiché par les navigateurs qui implémentent Canvas mais seulement par les autres, et constitue donc un moyen de fournir un contenu alternatif. Utiliser Canvas est très simple, le code ci-dessous montre une application minimale: <canvas id="c1" width="400" height="100"> Non implémenté. Cela a défini un emplacement et son identifieur, reste à ajouter un contenu graphique: var canvas = document.getElementById(c1); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillRect(100,0,80,80); // afficher un rectangle plein } window.onload.canvasFun;

iFrame, pour un contenu dynamique ou isolé de la page Cette balise faisait déjà partie de la spécification HTML 4 mais est développée dans la version 5 alors que les frames, et donc la balise frameset, sont devenus obsolètes. Iframe signifie "inline frame", en français cadre en ligne, il s'insère dans le flot du contenu de la page. On utilisait déjà l'iframe pour créer du contenu dynamique avant l'apparition d'Ajax: en assignant un contenu avec JavaScript, on pouvait modifier la page très facilement après son chargement. Mais Ajax permet une interaction plus complète avec le serveur. L'iframe a cependant d'autres utilisations. Indépendamment des moteurs de recherche les iframes permettent d'insérer du contenu plus facilement qu'avec Ajax qui requiert des fonctions XMLHttpRequest. Ajax reste indispensable pour charger une page HTML créée sur le serveur, en fonction de paramètres fournis par l'utilisateur. Utilisation d'iframe On définit une iframe en assignant l'URL d'une page contenant le contenu à inclure à l'attribut src. Code source: srcdoc

Related: