background preloader

La balise <canvas> avec JavaScript

La balise <canvas> avec JavaScript
Related:  Javascript

Un framework Web python dans une bouteille Introduction à Bottle Bottle est un framework Web très simple à mettre en oeuvre et qui permet d'écrire des applications Web rapides avec peu de lignes de code. Il suffit de lire l'exemple fourni sur la page du projet pour s'en rendre compte. Pour illustrer son fonctionnement, nous allons créé un outil simple de diffusion d'un diaporama. Contexte de notre application On aimerait pouvoir diffuser un briefing (suite de diapositives) à un ensemble de personnes via leur navigateur Web. On aura donc un serveur disposant : d'une application/serveur Web qui pointe sur un répertoire donné et affiche la dernière image disponibled'un accès FTP sur ce même répertoire sur lequel on va placer des images de notre briefing On aura N clients qui iront sur l'URL fournie par l'application et ils disposeront d'un bouton pour interroger régulièrement le serveur sur l'image en cours à afficher. Contraintes techniques Les clients auront une interface très simple : L'environnement de développement Le script de base <!

Java.Scripts-Fr.com : Détecter la taille de la fenêtre <script type="text/javascript"> <!-- Debut // JavaScript pris sur le site: " if (document.body) { var larg = (document.body.clientWidth); var haut = (document.body.clientHeight); } /* Ici une version DOM (le script est entre les balises <body> et </body>) qui devrait fonctionner sur tous les navigateurs. On commence donc par détecter la présence de l'objet body dans le DOM. else { var larg = (window.innerWidth); var haut = (window.innerHeight); } /* Cette version est purement javascript et ne fonctionne pas sous IE (les propriétés innerWidth et innerHeight de l'objet window n'ayant pas été intégrée dans ce navigateur). document.write("Cette fenêtre fait " + larg + " de large et "+haut+" de haut"); // ensuite on en fait ce que l'on veut, la je les écrit avec la méthode write// de l'objet document // fin du script --> </script>

L'élément HTML 5 Canvas - Tutorial Pour commencer, voyons brièvement qu'est-ce que ce fameux élément Canvas. Introduction Le HTML 5 introduit dans ses spécifications la balise Cette balise est plutôt récente et n'est pour le moment implémentée que par quelques navigateurs: FirefoxOpéraSafariKonqueror Internet Explorer est encore en retard là dessus ... Vos applications Canvas ne pourront pas être executées sur tous les navigateurs, il faut bien garder cela en tête. Chaque élément canvas dispose d'un contexte. Seul Opéra supporte en version bêta le contexte 3D. Une fois qu'un élément HTML canvas est déclaré, il faudra utiliser du Javascript pour créer les graphiques dynamiques. Déclaration du canvas en HTML La déclaration de l'élément est relativement simple: L'élément canvas prend en paramètres: width: La largeur de la zoneheight: La hauteur de la zoneid: L'id de l'élément qui servira au Javascript Si vous voulez voir toute la spécification HTML 5 sur le Canvas, rendez vous sur ce lien. Ca y'est !

Maîtriser les tableaux HTML avec JavaScript Au cours de vos projets, vous serez sûrement amenés à développer, supprimer ou simplement lire le contenu d'un tableau HTML, surtout si vos structures, ou celles que vous devrez traiter, seront en tableaux HTML. Ici, je vous présente une manière sûre d'y arriver. Oui ! Totalement sûre, car les outils que nous allons utiliser sont issus du DOM level 1, c'est-à-dire l'ensemble des standards publiés par le W3C en 1998. Ils sont donc disponibles dans tous les navigateurs dès Internet Explorer 5 et Netscape 6. Ce tutoriel demande des connaissances en JavaScript, et en particulier sur les objets. J'essaierai d'être le plus clair possible en expliquant les nouvelles notions. Ainsi ce tutoriel ne s'adresse pas uniquement à ceux qui doivent traiter des tableaux HTML, mais aussi à tous ceux qui veulent progresser en JavaScript. Voici un exemple de ce que vous pourrez facilement faire : aperçu.

HTML5 Canvas Réaliser un IHM web avec Python et Bottle Il existe de nombreux frameworks de développement web en Python. Le plus connu, et à mon avis le plus efficace, reste Django mais je voudrais vous présenter Bottle, une solution très légère dont la philosophie est complètement différente de celle de Django. Idéal pour développer très rapidement par exemple une IHM web. La légèreté comme philosophie Django se veut le framework des perfectionnistes sous pression. Bottle a une approche beaucoup plus minimaliste d'un framework web. Une page web = Une fonction Python Du point de vue du code, là aussi Bottle recherche la légèreté. import bottle@bottle.route("/")def index(): return "Hello world!" bottle.run() #lance le serveur web en localhost sur le port 8080 Ouvrez un navigateur sur la page et la page affiche "Hello world!". Les décorateurs pour simplifier le développement Il n'y a pas de magie là dessous mais une utilisation très judicieuse des décorateurs Python. def trace(fn): #le code decorateur print "appel", fn.

Les librairies JavaScript vraiment utiles JSTweener JSTweener est une librairie de gestion des transitions (tween en anglais) basé sur la classe Tweener utilisée dans le code ActionScript de Flash. $fx() - JavaScript Animation Library $fx() est une librairie JavaScript légère (moins de 4Ko) d'animation d'éléments HTML. Facebook Animation Cette librairie vous offre beaucoup de possibilités pour améliorer leur page Facebook avec juste une ou deux lignes de code. Autres librairies : FX, Animator.js, jsAnim SoundManager SoundManager importe et améliore l'API Sound de Flash et la rend disponible en JavaScript. Flowplayer JavaScript API L'API JavaScript de Flowplayer vous permet de contrôler facilement et efficacement une ou plusieurs instances de Flowplayer dans une page HTML. Cookies Cette librairie vous permet de récupérer et de manipuler les cookies HTTP dans le navigateur. EasyCookie Un script simple et facile d'utilisation permettant la gestion des cookies. Taffy DB Taffy DB est une librairie AJAX libre. ActiveRecord.js Date.js Blackbird

HTML5 animation and CSS filters | Creative droplets Predefined filter effects are now implemented in WebKit browsers (Chrome, Safari 6, iOS Safari 6, BB10 browser). You only have to set CSS properties to blur a DIV, drop a shadow, saturate an image (or the opposite with grayscale), or play with the opacity or the gamma (brightness) information. Then you can use CSS animations and transitions to create cinematic effects on your web pages. Adobe is actively working with the W3C on CSS filters. Actually, this is just a start. Edge Animate 1.5 New panel on the left of the screen: Filters. The latest release of Adobe Edge Animate (version 1.5 – Feb 2013) lets you play and animate CSS filters. Simple animation with Edge Animate 1.5 Here is a short video tutorial that explains how to create a simple animation with Edge Animate and CSS Filters. Roll-over buttons Adding a blur filter, you can easily simulate a depth of field. I’ve seen several ways on the web to create rollover buttons. on mouse over: this.play()on mouse out: this.playReverse();

Dynamisez vos sites web avec Javascript ! Bienvenue à toutes et à tous, Qui n'a jamais entendu parler du JavaScript ? Créé dans les années 90 en tant que simple langage de script, JavaScript est désormais un des poids lourds du développement Web ! Qui plus est, il se démocratise au sein d'autres environnements comme les serveurs avec le célèbre Node.js, les applications pour smartphones et tablettes, avec PhoneGap d'Adobe, les applications pour Windows 8, mais aussi les logiciels multiplateformes. Bref, JavaScript est partout ! Voici quelques exemples de ce qui est réalisable grâce au JavaScript : Sur ce, bonne lecture !

Canvas tutorial - Web developer guide <canvas> is a HTML element which can be used to draw graphics using scripting (usually JavaScript). This can, for instance, be used to draw graphs, make photo composition or simple (and not so simple) animations. The images on the right show examples of implementations <canvas> which they will be in the future in this tutorial. <canvas> was first introduced by Apple for the Mac OS X Dashboard and later implemented in Safari and Google Chrome. This tutorial describes how to use the <canvas> element to draw 2D graphics, starting with the basics. Before you start Using the <canvas> element isn't very difficult but you do need a basic understanding of HTML and JavaScript. In this tutorial See also A note to contributors Due to an unfortunate technical error that occurred the week of June 17, 2013, we lost the history of this tutorial, including attributions to all past contributors to its content. Document Tags and Contributors

POO/IHM Objectifs Développement d'Interfaces Homme-Machine (IHM). Sensibilisation à la conception d'IHM. Mise en œuvre du concept de séparation couche de présentation - couche applicative. Plan Introduction à la notion d'IHM (1 séance) IHM en SWING (3 séances) IHM en GWT (3 séances) IHM en Flex (3 séances) 2 séances supplémentaires pour ajuster le planning en fonction de l'état d'avancement des étudiants Détail des séances Mode d'évaluation Contrôle continu (1/3 de la note globale). Vous êtes libre de développer avec IDE ou sans. Référence javascript : Objets, propriétés, méthodes par Tout JavaScript.com La référence javascript Tout JavaScript.com vous propose sur cette interface ergonomique et conviviale, plus de 230 fiches détaillant précisément les objets javascript , leurs propriétés et leurs méthodes . , les fonctions natives et les mots de structures sont regroupés dans le répertoire Mots_clefs. Naviguez simplement dans l'arborescence des objets dans le menu de gauche. Quand vous lancez une fiche, l'arborescence du menu s'ouvre à la position de l'objet sélectionné. Cette référence javascript, développée et écrite pour Tout JavaScript.com, est en constante évolution. Erreur ?] Accès rapide : window, document, Array, RegExp, Math, Image, navigator...

JavaScript Tutorial

Related: