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 <!
Script: déplacer un objet sur une page ??? | CommentCaMarche Salut sjlouis, Voici un truc que tu peux tester. Je sais pas si ca répond parfaitement à ta question En tout cas ca permet de déplacer n'importe quel élément HTML à la souris en utilisant le drag & drop pour peu que tu positionnes cet élément de manière absolu Par contre ca dépasse et de loin les 25 lignes .... Cela dit tu peux optimiser le code et supprimer toute la gestion de la liste si tu ne veux utiliser qu'un seul objet. Mais trève de discussion voici mon code : D'abord la librairie javascript : fichier drap.js // Php // Déclaration object Mouse // Une seule instance de l'objet Mouse sera crée : // elle va servir à stocker la position absolue de la souris function Mouse() { this.x=0; this.y=0; } // Convertit les coordonnées relatives de la souris en coordonnées absolues function mouse_rel2abs(event_object) { this.x=document.body.scrollLeft+event_object.clientX; this.y=document.body.scrollTop+event_object.clientY; } Mouse.prototype.rel2abs=mouse_rel2abs; if (this.ref) this.show() }
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.
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 !
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.
Créer une fonctionnalité drag and drop sur votre site Vous avez deux propriétés à définir pour initialiser l'objet. keyHTML correspond au code HTML que doivent contenir tous les éléments déplaçables. J'ai choisi un code HTML simple : une balise <a> avec une classe CSS pour permettre un peu de mise en forme. Vous pouvez utiliser le code HTML que vous voulez, mais il est important de noter que seul un lien <a> (en dehors des éléments de formulaire) peut obtenir le focus depuis le clavier sur tous les navigateurs, or la gestion du clavier impose qu'un élément puisse obtenir le focus pour que le script fonctionne correctement. keySpeed indique la vitesse de déplacement de l'élément au clavier, en pixels, par appui. Il y a sept autres propriétés, mais elles sont internes au script. Le drag and drop est une technique pour pouvoir déplacer un élément à l'écran. En théorie, il serait aussi possible d'utiliser position: relative, mais cela n'est quasiment jamais utile. Affecter les cordonnées est relativement simple. Initialiser un élément▲ Mouseup▲
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 !
20 canvas HTML5 pour vous inspirer Ah les canvas en HTML5 c'est vraiment sympa et le débat est toujours aussi animé entre l'utilisation de Flash et des canvas HTML5. Mais depuis qu'Adobe a annoncé se concentrer sur HTML5 au détriment de Flash, je pense qu'il est temps de voir quelques réalisations croustillantes de canvas HTML5 pour vous inspirer. L'utilisation des canvas a besoin de décoller car en ce moment il en est encore à son stade "trial" en raison de la limitation au niveau des navigateurs et le manque de ressources au niveau du code et des tutoriaux. HTML5 offre de grandes possibilités et de fonctionnalités avancées par rapport à ce que l'HTML est capable de faire. Dans la suite de cet article vous trouverez 20 canvas HTML5 avec des animations, des jeux et des outils
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. How to Drag and Drop in JavaScript JavaScript excels at modifying the DOM of a Web page, but we usually only do simple things with it, such as creating image rollovers, making tabs, etc. This article is going to show you how to create items on your page that you can drag and drop. There are several reasons you might want to encorporate this drag and drop ability into your Web pages. One of the simplest reasons is to reorganize Data. There's really not much involved with dragging an item around on your Web page. Demo - Drag any of the images Capturing Mouse Movement To start we need to capture the mouse coordinates. We must first explain the event object. To make ev contain the event object in every browser we OR it with window.event. Since we'll need to obtain the mouse coordinates many times over this article we make a mouseCoords function that takes one argument: the event. Again we run into differences between IE and other browsers. Capturing Mouse Clicks Moving an Item
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 !
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();
motion Motion est un logiciel de détection vidéo et qui permet de diffuser un flux vidéo via internet par le protocole HTTP. C'est une solution simple pour diffuser le flux de sa webcam en ligne ou pour détecter des mouvements dans le champ d'une caméra par exemple. Pré-requis Disposer d'une connexion à Internet configurée et activée. Pour vérifier l'installation de votre webcam saisir dans un terminal : gstreamer-properties dans Video/Test, le test devrait afficher l'image de votre webcam. Installation Lancement automatique Par défaut, le daemon motion n'est pas activé/démarré. Si l'on veut l'activer, il faut mettre à 'Yes' la variable start_motion_daemon dans le fichier /etc/default/motion. En mode utilisateur (hors daemon), le mieux est de copier le fichier /etc/motion/motion.conf dans son propre dossier personnel. sudo cp /etc/motion/motion.conf ~/ Puis, mettre les bons droits : sudo chown $USER ~/motion.conf Configuration de base pour une webcam Maintenant nous allons éditer le fichier motion.conf