http://www.html5canvastutorials.com/
Related: HTML5/CSS3/JSRetour d’expérience sur le responsive design Au-delà de notre satisfaction d'avoir sorti un site dont nous sommes particulièrement fiers, nous avons voulu partager notre retour d'expérience sur la refonte de notre site en responsive design. Refondre son site web est toujours un défi pour une agence web. Notre précédent site fêtant son 3ème anniversaire, il n’était plus très en phase, ni avec notre discours, ni avec nos méthodologies et commençait à être technologiquement obsolète. Avec l’arrivée du HTML5, des CSS3 (media queries, @font-face, multi-columns, animations…) et l’expansion du javascript (à travers jQuery ou Mootools…), nous possédons désormais les outils nécessaires pour pouvoir mettre en ligne simplement des sites à la fois agréables, accessibles,rapides et portables.Avec cette refonte, nous avons voulu construire un site qui soit en phase avec notre image,nos méthodes de travail et notre vision du Web.
Apprendre JavaScript : utilisation de la balise canvas I-A. JavaScript & ECMAScript▲ JavaScript (abrégé JS) est un langage de programmation de scripts principalement utilisé dans les pages Web interactives mais aussi côté serveur[1]. S02E01 : Responsive Web Design Vendredi 2 septembre 2011. 13h, le WDFR saison 2 débute, la foule est en délire. Pendant ce temps Francis explique comment vont se dérouler les sessions WDFR de cette nouvelle année “scolaire” et rappelle la marche à suivre pour participer au tweet-up (pour les nouveaux surtout, parce que nous on sait comment ça se danse :D).
L'interactivité avec la balise HTML5 Canvas La balise <canvas> se comporte comme toute autre balise. Elle possède des attributs width, height et id. Le contenu de la balise correspond à un contenu alternatif pour les navigateurs ne la supportant pas. J'ai aussi défini une fonction à exécuter au chargement de la page et une balise <div> qui contiendra certaines informations, à savoir la quantité de mouvements effectués par l'élément. Nous allons créer un carré que l'on pourra déplacer avec les touches fléchées du clavier.
Créer une application en HTML 5 Pendant les trois jours au Web 11, on peut voir des conférences, rencontrer du monde mais aussi assister à des ateliers. Un certain nombre d’ateliers sont animés par Orange, Google, Evernote, Linkedin ou Intel. J’ai eu l’occasion d’assister à un atelier d’Intel sur l’HTML 5. Cet atelier prodiguait des bonnes pratiques et conseillait des bons outils et frameworks pour créer des applications en HTML 5.
Tutoriel : Des applications ultra-rapides avec Node.js Version en ligne Table des matières Des applications ultra-rapides avec Node.js Node.js, c'est un peu l'outil dont les développeurs web entendent parler tout le temps en ce moment. Comment utiliser une fonte «non-standard» sur un site Web Il est de notoriété publique que l'usage des fontes sur le Web est limité à une poignée de fontes non pas standardisées, mais suffisamment répandues pour pouvoir être utilisées sans trop de risques. Et cela pour une raison très simple: la police de caractères que l'on souhaite utiliser doit être présente sur le système de l'utilisateur pour être utilisée par le navigateur. Quand @font-face tombe à l'eau CSS 2 (publié en 1998) comprenait un mécanisme qui autorisait les auteurs de pages web à proposer une fonte au téléchargement, fonte qui serait ensuite utilisée dans la page.
Les Media Queries CSS3 La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web. Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc.
Optimiser l'ergonomie des formulaires web Les formulaires sont très fréquents sur les sites web et parfois complètement incompréhensible. Il existe une multitudes d'astuces pour améliorer la compréhension de ceux-ci, éviter que les utilisateurs fassent des erreurs et optimiser le durée nécessaire pour les remplir. Cet article présente plus de 60 astuces et recommandations avec des explications. Structurer le formulaire Dans le cas d'un formulaire pour se connecter, il est possible de faire apparaître le formulaire au survol ou avec un clic de souris.
Journal de bord: création d’une application de création de schéma en HTML5: Jour 1 Introduction Depuis quelques temps déjà j’ai besoin de créer des schémas, si possible interactif. Principalement des schémas d’architecture avec des serveurs, des bases de données ainsi que des liens entre eux. Avec le développement des derniers jeux RTS et Bomberman en HTML5, j’ai appris à utiliser les canvas. Je viens donc vous présenter ici l’application sur laquelle je travaille en ce moment: MkDraw. Comme d’habitude, vous trouverez en bas de ce billet le lien vers le github du projet. Présentation fonctionnelle de l’application Cette application, basée sur le mkframework, permet de créer des schémas si besoin interactif. Journal de bord: création d’un bomberman-like en HTML5, jour 1 Introduction Lors du précédent journal de bord, j’ai développé un jeu de stratégie temps réel ou RTS multiplayer en HTML5. J’ai beaucoup appris de ces 17 jours, et j’espère que vous aussi. Aujourd’hui commence un nouveau journal de bord pour developper un jeu bomberman-like multiplayer également en HTML5. L’avantage, c’est qu’on ne part pas de zéro, on a déjà une base de structure Map/unité/cycle/serveur multiplayer… note: comme pour le RTS, ce jeu est disponible sur github, je mets des extraites de code pour exemple mais les classes entières sont disponibles sur le dépôt. Les bases du jeu Voici la liste des fichiers du jeu:
Journal de bord: création d’un RTS en HTML5, jour 2 Journal de bord: création d’un RTS en HTML5, jour 2 Introduction Ce billet fait suite au billet précédent: Dans ce billet je vais vous détailler les fichiers rts.js et canvas.js , leur utilisation, leur construction. Journal de bord: création d’un RTS en HTML5, jour 1 Introduction Il y a une semaine, en discutant avec des collègues d’un petit jeux que j’avait fait en html5, m’est venu l’idée un peu dingue de faire un jeu de stratégie temps réel. L’idée était de faire un bon vieux RTS à l’ancienne, un peu comme Warcraft: notre madeleine de proust. J’ai mis les sources sur Github en LGPLv3 afin de permettre d’apprendre de ce projet et de permettre à d’autre de se lancer pour s’amuser ou plus dans le developpement de jeux HTML5. L’idée du journal Au vu des soucis que j’ai rencontré en le développant, je me suis dit qu’écrire une sorte de journal de bord serait une bonne idée, que cela pourrait en intéresser plus d’un. Je vais au fil du développement poster l’état d’avancement du projet ainsi que les problèmes rencontrés et les solutions trouvées.