Créer une application XUL – Partie 2 – Création de l’Interface

Tutoriel « Réalisation d’un projet XUL pas à pas »

– Création de l’Interface –

  Prérequis:

  • CSS (quelques notions),
  • Javascript (notion de base)
  • HTML (facultatif)

  Outils :

  • Sans Assistant (pour ceux qui utilise couramment un Éditeur [avec coloration syntaxique et plugin] ou un IDE)

  Temps estimé:

  • 1 heure 30 à 2 heures pour ceux qui découvrent XUL.

Vous vous y connaissez en création de site web simple? Un peu de CSS par ci un peu de Javascript par la!
Imaginez que vous puissiez réaliser une application comme si c’était un site 🙂 Et bien c’est la que XUL rentre en scène! et une fois que l’on comprend le principe, XUL prend l’allure d’un jeu d’enfant.

XUL c’est quoi?? 🙂 rappelez vous on l’a présenté dans un précédent billet, a quoi servait ‘il, son importance dans le développement d’interface, et pourquoi il attire de plus en plus de monde?
Le seul défaut de XUL a mon avis, c’est que coté marketing il est vraiment nul! dans le sens ou on a pas su nous le présenter comme il fallait, pas assez de pub, pas assez d’article… donc j’espère que ce billet saura vous convaincre de ces possibilités. Pour cela, je vais essayer de sortir du cadre du programme « Hello World » qui est plus un test de fonctionnement histoire de se dire « ouaiiiss ça fonctionne » qu’une démonstration réelle de ces capacités. L’application que je vous propose est un condensé de technologies qui j’espère avec votre esprit d’imagination donneront lieu a de grands projets comme par exemple la réalisation de votre propre navigateur 🙂 En nous basant sur l’arborescence et les fichiers déjà crées en première partie, nous allons passer d’une simple application qui affiche « Hello World » a une application qui intégrera un menu (bof!), un widget (wow!), du javascript (oula!) et du DOM (nannnnn!), puis on jouera un peu avec le fichier chrome.manifest pour montrer comment faire une application multilingue (das ist unmöglich!!), et avant de terminer on montrera que grâce aux interfaces XPCOM (huh? au quoi?) on peut réaliser et manipuler des préférences (paramètres de configuration) propres au logiciels offrant bien plus de possibilités à vos réalisations. Et le clou de la fin, la manipulation pure et dure du presse papier.

Les opérations de notre application seront réalisables en cliquant sur un bouton, un menu ou alors via la capture de touche (du genre si vous appuyez sur ESCAPE l’application se ferme, sur F1 vous avez l’aide etc…).

Remarque: ce tutoriel sera réalisé sans IDE (XUL-Explorer). Pour ceux qui souhaitent utiliser XUL-Explorer nous développerons son utilisation dans un prochain tutoriel/billet.

Lire la suite

Indexe de popularité des langages de programmation (Oct 2011)

La Société TIOBE est une société qui depuis 2001 nous offrent chaque mois des statistiques sur le taux de popularité des langages de programmation (TPCI: TIOBE Programming Community Index) oui je dis bien taux de popularité car ces résultats se base sur les requêtes faites auprés de plusieurs moteurs de recherche tel que Google, Bing et Yahoo.

Il faut être prudent avec ces résultats et seulement se dire si oui on est dans la tendance ou non! D’après un excellent article assez critique sur les méthodes de réalisation de ces statistiques on est en droit de se poser plusieurs questions. Est ce qu’une recherche sur JAVA concerne l’utilisation, le besoin de documentation ou alors la recherche d’un emploi. Et si la progression des recherche sur JAVA semble baisser de 0.25% est ce le signe d’un langage délaissé ou celui d’un langage maitrisé qui requiert de moins en moins le besoin d’aller sur le Net?

Autres choses… ceux qui se connectent directement aux sites de documentation (en ligne) ne sont pas comptabilisés, ainsi que ceux qui se référent à de l’imprimé (oui ça existe encore!)! Allez je vous donne les données correspondantes à octobre 2011.

Lire la suite

Google en profondeur (Astuces et Hacking) – 1sur3

Ahh!! Google! Google!!  Saviez vous qu’il était possible de contempler le ciel via cette adresse: http://www.google.com/sky/? Que l’on pouvait se connecter à des caméras de sécurités reparties partout dans le monde? Que la caméra sur cette page: http://202.212.193.26:555/CgiStart?page=Single&Mode=Motion&Language=0 peut être télécommandée et que celle la: http://84.205.233.40/view/index.shtml nous offre une belle vue en temps réel sur les plages grecque? Google n’est pas qu’un simple moteur de recherche, il vous permet de vous infiltrer dans un forum qui requiert une authentification, il permet aussi de dénicher des milliers de vulnérabilités (voir la partie concernant Google Hack) et par la même occasion de faire des tests de pénétrations sur vos sites pour en découvrir les éventuelles failles de sécurité, un audit qui est aussi bien gratuit de votre coté que de celui qui est malveillant, donc autant être le premier 🙂 Et pour les fondus de veille technologique, saviez vous que Google fait de la surveillance pour vous!!! via ce site: http://www.google.com/alerts

Allez rentrons dans le vif du sujet, je vous propose à travers ce dossier divisé en 3 parties de vous présenter les multiples facette de ce fabuleux Google 🙂

Contenu de la première partie « Astuces Google) du Dossier

  1. Astuces Google
  1. Google Doodle.
  2. Google Theme.
  3. Versions et Parodies de Google.
  4. Google Calculator.
  5. Fonctions Cachées de Google.
  6. Visionner les vidéos de caméras de sécurité IP
  • Le moteur de recherche Google
    1. Pourquoi les Hackers aiment Google.
    2. Fonctionnement et limites de Googlebot
    1. Utilisation de l’attribut rel dans les liens hypertexte
    2. le meta name googlebot, mode d’emploi
    3. fonctionnement des « indicateurs » robots.txt
  • Comment accéder aux forums sans y avoir accès?
  • Quelques Règles de Bases de recherches pointues.
  • Google Hacking, la recherche de vulnérabilités et fichiers inaccessibles.
    1. Principe de la recherche de vulnérabilités et de fichiers « inaccessibles ».
    2. Le Google Hacking en pratique
    3. Soyez un « Pentester », auditez votre site et protégez vous « facilement »!

    Présentation de Google

    « Google » nom à la base du moteur de recherche et qui a été donné à la société, et a le nom le plus utilisé au monde en 2009 (conférences, sites web, magazines etc…). Inspiré du nom « gogol » représentant le nombre 10 puissance 100, Google des sa création en 1998 annonce sa mission « d’organiser l’information à l’échelle mondiale et de la rendre universellement accessible et utile ». Elle doit sa naissance aux logiciels libre sur lesquels elle se base en les améliorant (Linux, MySQL, Python…)

    Cette société a en 2010 plus 2% des serveurs du monde soit 1 milliard de serveurs (imaginez la facture d’électricité) contre 30000 serveurs pour Facebook et 100000 pour Intel, Google a réussit a indexer plus de 1000 milliards de pages web, en octobre 2010 il représente 6.4% du trafic mondiale!!! le nom Google est parmi les 10 plus connus au monde, et la marque Google est la première.

    I . Astuces Google

    1. Google Doodle ( Logo dynamiques)

    Ce qui est assez remarquable chez Google, c’est le changement de style du logo qui change selon les évènements. (c’est plus une fonctionnalité qu’une astuce)

    La liste de tous les logos (appelés Doodle) peut être consultée ici

    2. Google theme (changer le thème igoogle)

    iGoogle est un portail web personnalisé permettant de configurer le thème ou à rajouter un gadget (traducteur, météo, tv etc…).

    Google vous permet de naviguer dans un répertoire de thèmes et d’activer le thèmes qui vous plait en cliquant sur le bouton « ajouter »

    3. Versions & Parodies de Google

    Ressentir la gravité

    Google version Epic

    & son inverse Google version Winnie

    Google a peur de Chuck Norris 🙂

    Personnalisez Google avec votre nom et style

    Site mirroir de Google dite elgooG

    Google craint Chuck Norris 🙂

    Personnalisez Google avec votre nom et style

    Site miroir de Google dite elgooG

    Google version arc en ciel

    Google version Pac Man

    Et pour mon préféré Google Sphere (ressemble au nuage de tag)

    Lire la suite

    Un Virus touche les Drones de l’armée de l’air des États-Unis

    C’est un magazine américain (Wired) qui l’annonce sur son site, des drones de l’armée de l’air américaine ont été touchés par un virus assez coriace car suite a tous les efforts, le virus revenait toujours, l’information a été relayé le 7 octobre 2011. Cela rappelle l’histoire du département de la défense infecté en 2008 par un virus (le virus agent-btz) et qui 3 ans plus tard est toujours présent et a muté sous une forme encore plus dangereuse (Lire l’article).

    Lire la suite

    Créer une application XUL – Partie 1 – Théorie

    Le langage XUL c’est quoi?

    XUL (prononcé zoul) est l’abréviation de « XML-based User interface Language » (basé sur XML).

    C’est un langage de balisage (tout comme l’(X)HTML) qui permet la description d’interfaces graphiques des applications (dont entre autres les extensions du navigateur Firefox de Mozilla).

    Les balises sont des unités sémantiques qui permettent de délimité des ensembles dans un fichier texte (ici un fichier XUL), par exemple si je veux que dans ma phrase le mot « tutoriel » soit en gras j’adopterais la logique qui veut que juste avant d’écrire le mot tutoriel j’annonce le fait que ce qui suit sera en gras, ensuite après le mot tutoriel j’annonce qu’il ne faut plus écrire en gras. comme suit:

    • « Cette article est un <debut ensemble a afficher en gras>tutoriel<fin ensemble a afficher en gras> »

    Lors de l’affichage de cette phrase dans le navigateur web par le moteur d’affichage, les balises « <debut ensemble a afficher en gras> » et « <fin ensemble a afficher en gras> » ne seront pas visible mais interprété pour donner le résultat suivant:

    • « Cette article est un tutoriel« 

    XUL offre les informations permettant de dire comment mettre en place tous les éléments d’une interface graphique tel que les menus (fixes et popups), les listes, les boutons, les zones de textes mais aussi les boites de dialogues, les barres d’outils ou encore les raccourcis claviers.

    il est possible de mettre ces informations dans un autre fichier (source de donnée externe) de type RDF (Ressource Description Framework) qui est un modèle informatique de description de  ressources.

    XUL a l’avantage d’être simple, de permettre de travailler rapidement, logiquement, il est extensible grâce à l’utilisation de XBL qui lui permet d’implémenter de nouveau élément d’interface ou d’associer des comportements ou des modèles de contenu, et enfin, il est bon de citer que XUL offre un résultat multiplateforme dit  portable (Tout comme JAVA).

    Bien… c’est jolie de décrire son interface mais comment fait on pour l’afficher?

    Notre première application XUL

    C’est simple on utilise ce qu’on appelle un moteur d’affichage de page web (ou moteur de rendu), dans le cas de Firefox (navigateur Internet), Thunderbird (client de messagerie) et SeaMonkey (ensemble d’outils internet [Agenda, Tchat…]), le premier moteur à implémenter XUL est Gecko qui en plus de XUL supporte aussi CSS, DOM, JavaScript, RDF, HTML et XHTML, SMIL, XML etc…

    Comment fonctionne Gecko?

    Le fonctionnement de Gecko est assez compliqué car il fait appelle a des algorithmes très avances, pour informations sachez que pour chaque page via l’interface DOM il crée d’un coté un arbre (arborescence) d’objets « content » et d’un autre coté un arbre d’objets FRAME (langage Gecko).

    Pour schématiser le fonctionnement de Gecko, les objets content sont les informations (réellement plus) quant à l’objet FRAME contient les éléments à afficher (éléments ayant des propriétés et pouvant être modifié via CSS).

    Donc ou se trouve la complexité??? Dans le fait que tout est lié, si un frame (tableau, cadre, etc…) change sa hauteur ou sa largeur (par exemple) alors il faudra recalculer toutes les autres hauteurs ou largeurs et faire en sortes de ne pas oublier dans les calcules les autres propriétés telles que les margin ou padding, parfois la taille obligera le texte à faire un saut de ligne ou à changer le nombre de colonnes…, C’est comme dans un rubik’s Cube, une simple rotation supposée modifier 3 petites cases causera en réalité, le changement de position de coins, d’arêtes et couronnes de plusieurs autres faces.

    Où trouve t’on Gecko?

    Le moteur Gecko est inclus dans Firefox ainsi que dans d’autres navigateurs web tel que Camino (OS X) · Epiphany (utilise Gecko jusqu’a 2008)· IceCat · Iceweasel (qui est en quelques sortes la version pour Debian de Firefox)· Kazehakase (navigateur japonais pour Linux) · K-Meleon (Qui utilise Gecko mais pas XUL) · Fennec (version mobile de Firefox) · Torpark/xB Browser (navigateur pour le réseau TOR [Réseau basé sur le principe de l’anonymat] ,

    XULRunner est aussi dans ce qu’on appelle des environnements d’exécution (a titre informatif une machine virtuel est un environnement d’exécution)ce qui permet à un développeur de voir ce que donnera son implémentation XUL avant de réellement l’interpréter par Firefox dans le cadre d’une extension (par exemple).

    Grâce à la bibliothèque XPCOM (Cross-Platform Component Object Model) qui permet via C++ ou javascript de construire de nouveaux composants, Mozilla a pu offrir à la communauté mondiale XPFE (Cross-Platform Front End parfois appelé XPToolkit) une plate-forme de développement multiplate-forme  comparable à la machine virtuel de JAVA ou à l’environnement .NET (DotNet) de Microsoft.

    Le principe du multiplateforme est d’obtenir la portabilité, ce qui en d’autre terme veut dire qu’il sera exécutable sur de nombreux systèmes d’exploitations (Linux, Mac OS,  Windows, Palm OS etc…) ce qui inévitablement est un gain en coût de développement/production. vous n’aurez pas à faire une version pour chaque système d’exploitation. Pour qu’un logiciel est le plus d’audience possible il existe trois techniques :

    L’histoire veut que Mozilla ai crée l’environnement de développement XPFE (Cross Platform Front-End)  qui par sa simplicité, sa rapidité de développement et son évolutivité a permit de donner une réponse au problème de l’évolution du code de Netscape (notamment dans la prise en charge des éléments HTML 4.0 et dans le besoin de créer une version pour chaque environnement de travail [Linux, Mac OS, Windows]sa portabilité)

    XULRunner est un environnement d’exécution dédié à XUL et incluant (mis à par le moteur d’affichage Gecko) la majeur partie des API de Firefox (Application Programming Interface).

    Le développement d’une application XUL est simple, pour chaque objet de l’interface graphique on associe un événement et une action (typiquement écrite en JavaScript) qui sera exécuté par la machine cliente. CSS sera utilisé pour modifier le style.

    Via ces API, XULRunner offre une interface (en terme de développement) aux entrées/sorties (clavier, souris, impression, affichage), à la communication réseau (socket), au gestionnaire de thèmes et d’extensions,  à la localisation, à la manipulation de plusieurs type de fichiers tel que XML, RDF etc…

    Tout ceci est la partie client (navigateur), du coté du serveur il y a la possibilité de travaillé en JAVA ou PHP (avec toutes les extensions qu’il possède dont PDO!)

    Quand et où utilise t’on XUL?

    La où il a du Mozilla ou plus généralement, la ou il y a du Gecko 🙂

    Rappelez vous que XUL n’est que la peinture, pour l’utiliser il vous faut des pinceaux ou encore un pistolet à peinture.

    XUL et éventuellement RDF et XBL définissent l’interface et les différents éléments de l’interface qui auront un style prédéfinis grâce à CSS.

    Rappelez vous que XUL est basé sur XML  qui lui même a pour ancêtre SGML, sans rentrer dans encore plus de détails mais XML et SGML sont une encapsulation de données (via les balises) qui sont représenté par une arborescence formé de noeud (le premier noeud étant appelé la racine du document) de la racine Si vous entendez parlez de XSLT et XPATH, sachez que le premier permet de changer  la structure d’un document (comme CSS permet de changer le style des élements d’une page Web) et le second (XPATH) permet de naviguer facilement à

    Chaque action entreprise lors d’un clique ou tout autre évènement sera réalisé par l’intermédiaire de javascript ou Python.

    Vous pouvez grâce à XUL et les technologies adjacentes (RDF,XBF,CSS,Javascript…) faire des applications ou créer des modules XPI pour firefox. Oui j’ai bien dit POUR car c’est l’un des inconvénients (disons mineur)de XUL,Donc d’après le tableau suivant, une application XUL sera affichable sur Firefox, Torpark … et pas sur Internet Explorer Konqueror ou les versions d’Epiphany sortie depuis 2008

    Fondés sur Gecko Camino · Epiphany · IceCat · Iceweasel · K-Meleon · Fennec · Mozilla Firefox · SeaMonkey · Torpark
    Fondés sur KHTML ou WebKit ABrowse · Arora · Epiphany · Google Chrome · Chromium · iCab · Konqueror · Midori · MixShark · OmniWeb · rekonq · Safari · Shiira · SRWare Iron · SWK browser · Uzbl · Vespucci
    Fondés sur Presto Opera · Opera Mini · Opera Mobile · Opera Wii · Nintendo DS Browser · Nintendo DSi Browser
    Fondés sur Trident Avant Browser · AOL Explorer · Internet Explorer · Maxthon
    Navigateurs obsolètes ABrowse · Arachne · Beonex Communicator · Chimera · Flock · Galeon · HotJava · MidasWWW · Mosaic · NetPositive · Netscape
    Autres Amaya · Dillo · Links · Lynx · NetFront · NetSurf · w3m · Lunascape

    Pour information, Firefox version 1.0 est née en novembre 2004, le projet initial s’appelait Phoenix (2002)  puis Firebird (2003)

    Notre première application XUL Hello World

    Lire la suite

    Les Anonymous sont de retour: « Opération Occuper Wall Street »

    Ils agacent, ils enquiquinent, ils sont bêtes et méchants s’écrient certains, mais pour d’autres ils attisent l’admiration, support du printemps arabes ils sont vu comme des héros, munis d’une armée de fan prés a se battre a leur coté on dirait un vrai film à la James Bond, Ce sont les hacktivistes Anonymous! des hackers dont les motivations sont purement idéologique, les anonymous n’attaquent jamais sans raison et la raison qui les poussent à s’en prendre à la bourse de New York ils nous la dévoilent en ne machant pas leurs mots (voir vidéo).

    Cela fait déjà plusieurs semaines que les Anonymous ont lancé un large appel à une « protestation pacifique » et une occupation à partir du samedi 17 septembre, du quartier de Wall Street à New York . Le groupe d’hacktivistes espéraient ainsi voir « plus de 20.000 personnes affluer dans le sud de Manhattan » et c’est chose faite!

    Les manifestants étaient invités à installer des tentes, des « barricades paisibles », des cuisines… pour « occuper Wall Street pendant plusieurs mois ». « Comme nos frères et nos sœurs en Egypte, en Grèce, en Espagne et en Islande, nous utiliserons […] l’occupation massive pour restaurer la démocratie en Amérique ».

    Les médias nord-américains ont sciemment décidé de garder l’information sous silence pour éviter que le mouvement se propage ailleurs dans le pays.

    Pour suivre les événements un live stream est disponible sur http://www.livestream.com/globalrevolution

    Après New York un agenda assez chargé est en vu : Milan, Madrid, Valencia, London, Lisbon,Athens, San Francisco, Santander, Madison, Amsterdam, Los Angeles et puis aussi Algeria & Iqrael.

    Anonymous : derrière le masque, des hackers révolutionnaires

    Des Anonymous lors d'une manifestation contre la scientologie, le 16 janvier 2010 en Floride (Anonymous9000/Flickr/CC).

    Ils n’ont que trois ans et ils font peur aux plus grandes puissances, des Etats-Unis à l’Iran en passant par le Royaume-Uni, mais aussi aux firmes multinationales. Qui sont les hackers de « Anonymous », ces pirates informatiques experts dans l’art de mettre hors-service un site web ?

    Au fil des cyber-attaques, ce mouvement aux contours flous, énième progéniture de la culture web, entend bien faire passer un message : la défense de la liberté d’expression par tous les moyens, même illégaux.

    En défendant les fuites de documents confidentiels de WikiLeaks, ou en s’en prenant tant aux gouvernements tunisien et égyptien pendant les révolutions dans ces pays qu’à Hadopi en France, les « Anons » s’imposent dans le débat public. Mais leur défi des lois leur vaut d’être surveillé et traqués par les polices du monde entier.

    Les « plus beaux coups » des Anonymous

    Lire la suite

    Sony Annonce une technologie détectant les cellules cancéreuses

    Le communiqué qui réjouit!

    Sony vient d’annoncer la mise au point d’une technologie permettant de différencier des cellules (et donc par extension détecter quelles cellules sont cancéreuses par exemple) en analysant leurs propriétés électriques. Jusqu’à maintenant, il était nécessaire d’utiliser des colorants pour différencier les cellules.

    Définition du cancer

    Le cancer est une maladie caractérisée par une prolifération cellulaire anormalement importante au sein d’un tissu normal de l’organisme, de telle manière que la survie de ce dernier est menacée. Ces cellules dérivent toutes d’un même clone, cellule initiatrice du cancer qui a acquis certaines caractéristiques lui permettant de se diviser indéfiniment. Au cours de l’évolution de la maladie, certaines cellules peuvent migrer de leur lieu de production et former des métastases. Pour ces deux raisons, le dépistage du cancer doit être le plus précoce possible.

    La prévention du cancer

    Elle se fonde sur :

    • l’évitement ou la diminution de l’exposition aux cancérogènes de l’environnement et industriels : principalement, la lutte contre le tabagisme, la consommation excessive d’alcool et de graisses animales, l’exposition excessive au soleil, les normes de construction (désamiantage), manutention de produits dangereux dans le cadre professionnel, étude REACH ;
    • le rôle protecteur de certains éléments : fibres, vitamines et autres antioxydants (céréales, légumes verts, fruits), ainsi que le thé vert (plus que le noir) ou le chocolat et plus précisément les aliments contenant de la catéchine. Consommer une gousse d’ail par jour réduit de moitié le risque de cancer de l’estomac, du colon et du rectum.

    On peut y ajouter le traitement des lésions précancéreuses, pour éviter les métastases, bien qu’il s’agisse aussi de traitement « curatif ».

    [Plus d’infos sur la prévention]

    Comment fonctionne l’appareil de Sony

    Le fonctionnement de l’appareil se base sur une analyse de la structure électrique de la cellule : son impédance est mesurée grâce à 16 fréquences différentes pendant le passage de la cellule, qui dure 16 millisecondes. Ces fréquences permettent de « cartographier » la cellule. De plus, Sony utilise une puce de détection spécialement conçue pour éviter les parasites au moment du passage de la cellule. Enfin, un « trieur de cellules » permet de changer la direction du flux en fonction de la cellule détectée et donc de récupérer toutes les cellules d’un type précis.

    Pour le moment, l’ensemble n’existe que sous forme de prototype, mais l’appareil semble fonctionnel et pourrait à terme servir dans divers domaines, donc la détection des cellules cancéreuses, mais aussi pour vérifier si une personne a pris de la drogue ou un produit dopant.

    [Source Tom’s Hardware] [Source Sony] [Source Wikipedia]