Archive for décembre, 2007

30th déc 2007

Lecteur FLV, Diffusez vos vidéos sur internet

Pour tous ceux qui désirent diffusez facilement des videos au format flv (videos flash) sur leurs sites internet, voici un lecteur facilement et fortement paramètrable. 

 

 

Plusieurs types/configuration du lecteurs sont disponibles, Mini - Normal - Maxi - Multi et  Js, suivant l’utilisation. Une bonne documentation, un générateur de code, un forum et une FAQ est disponible sur le site.

Il est également possible de contrôler le player à partir de javascript (Play - Pause - Stop - Next - Previous - Volume) afin de l’intégrer dans une interface personnalisée (ex: allocine.fr).

Voir aussi Lecteur MP3 par neolao production  …que demander de plus ?

 

 

Posted in Application web, Flash | No Comments »

25th déc 2007

Mootools, a super lightweight web2.0 javascript framework

Mootools

Présent dans la grande famille des framework javacript, Mootools est un de mes… mon préféré ! Dès que je suis confronté à un nouveau projet web qu’il soit personnel ou professionnel je pense directement Mootools. Merci à Magu(s) de m’avoir fait découvrir cette incontournable librairie js.

1. Framework javascript ?

C’est un ensemble de fonctions, classes javascript liées entre elles facilitant la création d’application web. Utilisant le DOM qui lui donne la possibilité de manipuler dynamiquement le contenu dans la page, il n’y a plus de limite d’utilisation.. mise à part ceux du navigateur utilisé par l’internaute. Souvent Orienté objet, ces framework sont très faciles d’utilisation et suivent une logique compréhensible de tous programmeurs.

2. Travailler avec Mootools?

Il n’existe pas plus facile à intégrer mais il est nécessaire d’avoir quelques bases en javascript pour son utilisation
Introduction au javascript par Serge P. -
Programmation Orientée Objet avec le javascript par Thierry Templier

2.1 Téléchargement

Télécharger mootools est très facile, il suffit de se rendre sur cette page et de choisir les composants dont on a besoin (ici tous), la compression du fichier .js (javascript packer fait gagner près de 60% sur la taille du fichier .js).

2.2 Ajouter à votre page

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> 
<html> 
   <head> 
      <meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1&#8243; /> 
      <title>Hello Mootools!</title> 
      <script type=“text/javascript” src=“js/mootools-release-1.11.js”></script> 
      <script type=“text/javascript”> 
         window.addEvent(‘domready’, function() { 
            // ICI VOTRE CODE JS 
         }); 
      </script> 
   </head> 
   <body> 
   </body> 
</html> 

La fonction "domready" permet d’exécuter le code javascript lorsque le dom est prêt, c-a-d quand tous les éléments html de la page sont chargés et pas quand la page entière est chargée (css, images, animations, …) voir DomReady vs Load

2.3 Exemples d’utilisation

Action sur un lien :
ajax

Imaginons que nous avons un lien sur lequel une action précise doit se passer (Confirmation, affichage d’une image, requête ajax, …), il suffit de donner une valeur à l’identifiant du lien :

<a href="#" id="id_du_lien">Charger le contenu dynamiquement</a> 

et d’ajouter l’action que l’on souhaite par le biais de la fonction addEvent, Ici on demande l’évènement sur le click de la souris sur le lien.
 ajax

$(‘id_du_lien’).addEvent(‘click’, function() { 

  console.log("click ok"); 
}) 

J’utilise console.log("click ok"); au lieu de alert("click ok"); pour faciliter le débogage du script à l’aide de Firebug.
Imaginez que vous avez des calculs de prix à déboguer, les dizaines d’alertes javascript vont vous faire péter les plombs tandis qu’avec la console de Firebug une liste de logs se crée.

Requête Ajax

Effectuer une requête ajax n’a jamais été aussi simple, il suffit d’utiliser la fonction new Ajax dans une action ou dans une fonction que l’on peut appeler sur un lien:
ajax

$(’start’).addEvent(‘click’, function(e) { 
  e = new Event(e).stop(); 
 
  var url = "http://demos.mootools.net/demos/Ajax/lipsum.html"; 
 
  /** 
   * The simple way for an Ajax request, use onRequest/onComplete/onFailure 
   * to do add your own Ajax depended code. 
   */ 
  new Ajax(url, { 
    method: ‘get’, 
    update: $(‘log’) 
  }).request(); 
}); 

exemple reprit des demos officielles du site mootools

var url: Définition de l’url de la page à charger dynamiquement
method: Get ou post
update: Div ou bloc à mettre à jour avec le contenu de la page que l’on appelle

Plusieurs paramètres comme onRequest/onComplete/onFailure peuvent être ajoutés. (ex : un gif loading pendant la requête)

3. Demos, tutoriels et plugins disponibles.

Demos

Voici la page de démonstration officielle du site mootools: Mootools demos - start

Tutoriels

Tutoriel officiel sur clientside: The Mootorial (en)
Tutoriel video sur Beautyindesign.com: User Experience with javascript

Plugins

Mootools 1.0+ Plugins, Examples, Tutorials & Demos List (en)
33 plugins pour Mootools que vous devriez connaitre ! 

Une adaptation est nécessaire mais ce framework vous fera gagner un temps précieux par la suite !

Posted in Application web, Mootools | No Comments »

25th déc 2007

FireBug

L’extension indispensable et incontournable pour debuguer ses pages !

Firebug

Plus d’informations sur le site officiel: GetFireBug

Cette extension existe aussi en français : FireBug en français

Posted in Application web, Programmes | No Comments »

25th déc 2007

SpongeStats 3.0, l’éponge dynamique !

Spongestats est un outil d’analyse du trafic facilement intégrable à votre site. Développer en php et utilisant subtilement l’ajax, cet outil est très agréable à utiliser.

SpongeStats 3.0

Pour le moment en période de test sur le blog et d’autres projets professionnels, il se révèle très précis.

Posted in Ajax, Application web | No Comments »

20th déc 2007

Testez le design de votre site dans différents navigateurs

Qu’est-ce que Browsershots.org ?

"Browsershots réalise des captures d’écran du design de votre site dans différents navigateurs. C’est un service en ligne open-source et gratuit créé par Johann C. Rocholl. Quand vous soumettez votre adresse internet, elle est ajoutée à la file d’attente. Un certain nombre d’ordinateurs ouvriront votre site internet dans leur navigateur. Ils feront donc des captures d’écran et les enverront sur ce serveur central." Encore un outil de travail intéressant et pratique! J’avais commencer à installer plusieurs navigateur sur xp mais rien de tel qu’un zip contenant tous les screenshots pour vérifier la compatibilité a tête reposée. Plusieurs Navigateurs sur plusieurs plateformes sont disponibles (Une trentaine), ne possédant pas Linux je vois donc que mon blog n’est pas affiché correctement ! Navigateur manquant: Opera même si il ne génère qu’un pourcentage minime de visite.

N’hésitez pas à faire un petit don si vous vous servez beaucoup de cette application, la bande passante coute très chère.

Posted in Application web | 1 Comment »

20th déc 2007

OmniGraffle

Vous aussi avez déjà perdu un temps fou a réaliser des organigrammes, structures de projets ou schéma que ce soit pour l’école ou le boulot avec Photoshop ou autre… (la galère) Voila un programmes intéressant et facile d’utilisation qui vous fera gagner énormément de temps ! Il s’organise autour d’une interface très claire et intuitive, nombreuses illustrations présentent (Réseaux, Mobiliers, Schémas), un alignement automatique et un affichage des distances pendant le déplacement des objets (comme dans illustrator pour ceux qui ont déjà essayer), des points magnétiques autour des objets pour une liaison parfaite,… et la liste est longue. (Surtout dans la version Pro ) OmniGraffle Uniquement sur Mac, pour les utilisateurs de windows: Microsoft Office Visio

Posted in Macosx, Programmes | No Comments »

18th déc 2007

Quicklook Plugins

En recherchant des plugins Léopard, je suis tombé sur le site quicklookplugins.com qui propose des plugins pour "Coup d’oeil" présent dans la dernière merveille d’apple. Gain de temps, plaisir visuel et installation simpliste.

quicklookplugins.screenshoots

quicklookplugins.screenshoots  

 Pour les personnes ne connaissant pas bien MacOs, voici une petite présentation officielle Regardez avant d’ouvrir

 

Posted in Macosx | No Comments »

18th déc 2007

Bonjour tout le monde !

Il faut se lancer un jour ou l’autre (disait-il), cela fait déjà un petit temps que je pense a faire un “blog”…

“Un blog ou blogue (mot-valise de web log) est un site Web constitué par la réunion de billets écrits dans l’ordre chronologique, et classés la plupart du temps par ordre ante-chronologique (les plus récents en premiers). Chaque billet (appelé aussi note ou article) est, à l’image d’un journal de bord ou d’un journal intime, un ajout au blog ; le blogueur (celui qui tient le blog) y délivre un contenu souvent textuel, enrichi d’hyperliens et d’éléments multimédias, sur lequel chaque lecteur peut généralement apporter des commentaires.” wikipedia

Pour ma part, ce ne sera pas un journal intime, ni un journal de bord…

Plutôt un espace de ressources, snippets, liens utiles, etc… réservé principalement a la programmation.

Pour ceux qui ne me connaissent pas, je suis passionné par tout ce qui touche de près ou de loin au monde de l’informatique. I’m not a geek Infographiste de formation, je développe plus que je ne fait du graphisme!

Un bonjour a toutes les personnes que j’ai perdu de vue, a toutes les personnes avec qui je me suis disputé, a toutes celles que je connais et à toi!

Sur ce, je retourne <?php programmer  ?>

Romain

Posted in Billets | No Comments »