Archives du mot-clé JavaScript

Adobe Edge Preview – Création de contenu HTML / SVG / CSS3 / JS

Adobe vient tout juste de sortir une version « preview » de son nouvel outil : Adobe Edge.

Peut-être que le nom vous semble familier, et c’est normal puisqu’Adobe Edge était le nom de la newsletter d’Adobe qui sortait de manière mensuelle / bi-mensuelle:

Adobe Edge newsletter

Au passage, cette newsletter est renommée « Adobe Inspire Magazine » pour laisser place à ce nouvel outil.

Pour télécharger le « vrai » Adobe Edge, c’est par là:

http://labs.adobe.com/technologies/edge/

Cette version est une version « preview », c’est-à-dire à peine une beta. Le produit va donc évoluer et s’améliorer dans les prochaines versions. N’hésitez pas à remonter les bugs que vous rencontrez si vous voulez que celui-ci s’améliore :) . Rien n’a été annoncé quant au prix de ce logiciel en version finale.

Un outil de création

Adobe Edge est un outil de création de contenu « HTML5″, c’est-à-dire une combinaison de JS / CSS3 / SVG / HTML.

L’interface se compose de plusieurs panneaux dont:

  • Une Timeline qui ressemble à celle d’autres outils Adobe comme Flash Pro ou After Effects
  • Elements qui récapitule les éléments qui composent votre scène. Un peu comme la vue Outline de Flash Builder dans l’esprit
  • Properties qui vous permet de modifier les attributs d’un élément. Assez similaire à l’interface proposée par Dreamweaver.
  • Editor, votre scène sur laquelle vous allez travailler

Voici un petit aperçu de l’outil:

L’outil se veut simple, avec comme fonctionnalités principales:

  • Création d’éléments grâce aux outils de dessin (rectangle et rectangle arrondi) et de texte
  • Import d’éléments SVG / PNG / JPG / GIF
  • Création facilitée d’animations grâce à la timeline sur n’importe quelle propriété (position, taille, couleur, …)
  • Import de fichiers HTML / CSS existant tout en conservant leur structure
  • Copier-coller de transition, inversion, effets prédéfinis

Les habitués de Flash Pro ne retrouverons donc pas tous les outils de dessin vectoriel qu’ils ont l’habitude de manipuler. Rappelons quand même que c’est une version Preview, qui a pour but d’évoluer.

Prise en main rapide

Si vous avez déjà manipulé une timeline (Flash Pro, After Effects ou un logiciel de 3D comme Maya), vous allez rapidement comprendre le concept. Ici, vous n’avez même pas à passer par l’étape « Ajoutez une keyframe » (la fonction auto-keyframing est activée par défaut). Déplacez vous simplement dans la ligne des temps, faites bouger votre élément et Edge va automatiquement créer une transition entre les 2 états sur les propriétés concernées (position X / Y par exemple):

Pour prévisualiser votre animation, il suffit d’appuyer sur Ctrl + Entrée comme dans Flash Pro. Votre page sera rendue directement dans votre navigateur (Edge fait tourner un petit serveur web sur le port 54321 pour servir le fichier, je ne sais pas vraiment pourquoi).

Pour l’anecdote, l’Editor que vous avez directement dans Edge est un vrai rendu HTML basé sur WebKit. Vous devriez donc (en théorie) avoir un rendu similaire sur les navigateurs qui utilisent WebKit comme Google Chrome.

Lire la suite

AIR Mobile – Afficher des pop-up natives depuis AIR (hack)

Le dernier tutorial présentait comment accéder aux contacts sous iOS sans passer par une API native:

AIR Mobile – Accéder aux contacts sous iOS (Address Book)

Ce n’était pas vraiment un « hack », juste un contournement. Ici, on va voir comment afficher des pop-up natives (qui ont donc le « chrome » de l’OS) depuis une application AIR Mobile. Attention, cette méthode est un vrai hack des familles et comme toute hack qui se respecte, a un point noir que j’explique à la fin du tutorial.

La technique : StageWebView et alert

Ce n’est pas moi qui ai trouvé cette technique mais quelqu’un l’a partagée sur le forum de la prerelease. Autant que tout le monde y ait accès :) . Si vous ne connaissez pas le composant StageWebView, celui-ci sert à embarquer un navigateur HTML natif là ou la classe HTMLLoader n’est pas supportée. Ce composant est supporté sur AIR Desktop et mobile (toutes plate-formes) mais pas sur AIR pour TV.

On peut donc ajouter un StageWebView et lui charger du contenu, dont du contenu JavaScript qui va être exécuté par le navigateur. C’est en exécutant du JavaScript (une sorte d’injection) que l’on va réaliser notre hack. En effet, lorsque vous faites un alert() dans du JavaScript sur une plate-forme mobile, vous avez une pop-up native qui va s’ouvrir et afficher le texte. Celle-ci respecte l’OS et les styles définis sur le portable de l’utilisateur.

Si vous avez un peu d’expérience en JavaScript, vous savez qu’il existe 3 méthodes différentes:

  • alert : qui affiche un simple message
  • confirm : qui demande à l’utilisateur Oui ou Non (boutons) + un message
  • prompt : qui demande à l’utilisateur d’entrer un texte + un message

Bon ce sont les méthodes classique un peu « old school » et la plupart vont utiliser des pop-ups jQuery pour faire le travail et styler cela.

Exécuter du code JavaScript dans une StageWebView

Pour exécuter du JS dans une StageWebView, c’est plutôt simple, il suffit de passer le code JS sous forme de String à la méthode loadString de StageWebView. Dans notre cas, on va faire:

_webView.loadString("<script>alert('Thanks for the click');</script>");

En faisant cela, une pop-up native va s’ouvrir. Cependant, pour les méthodes confirm et prompt, on va chercher à récupérer le résultat de la saisie utilisateur. En effet, ces 2 méthodes renvoient une valeur (Boolean pour confirm et String pour prompt) que l’on va devoir récupérer. Là on commence à rentrer un peu plus dans le hack puisqu’il n’est pas possible de base de faire communiquer JavaScript -> ActionScript avec StageWebView.

Réaliser une communication JavaScript -> ActionScript

La solution que certains ont trouvé  est d’utiliser la variable « location » indiquant l’URL de la page. En effet, depuis le code JavaScript, on peut modifier l’url de la page courante pour la navigation en modifiant window.location. Et lorsque l’utilisateur essaie de naviguer vers une autre page, StageWebView propage un évènement que l’on peut capter.

Là où ça devient malin, c’est que s’il on appelle la méthode preventDefault() sur cet évènement, on va saborder l’opération et rien de se passera, aucun changement de page. Mais entre temps, vous aurez récupéré l’URL de la page vers laquelle on a demandé la navigation. On peut utiliser cette URL pour faire transiter des variables au format String. Pour un format plus compact, vous pouvez réaliser un encodage / décodage en Base64.

Lire la suite

[Offre d'emploi] – Ingénieur Développement web sur Lyon

Ingénieur Développement web (Villeurbanne – 69) – Offre d’emploi

  • Titre: Ingénieur Développement web
  • L’entreprise: Business Geografic (http://www.business-geografic.com) est une société lyonnaise filiale du groupe CIRIL, éditeur de progiciel de gestion à destination des collectivités depuis plus de 30 ans.
  • Business Geografic est éditeur du générateur d’applications web-mapping AIGLE ainsi que de l’ensemble des applicatifs métiers dérivés de cette technologie : Géo-décisionnel, Géomarketing, Plan interactif de ville, Gestion des élections, Gestion de l’enfance, Gestion de l’urbanisme, Gestion du patrimoine, Gestion logistique…
  • Business Geografic est spécialisée dans l’intégration de la dimension géographique au système d’information des organisations. Notre avance technologique liée à une innovation permanente (brevet international) nous offre des perspectives de croissances fortes, sur le marché national et international.

Profil Recherché

  • Profil recherché:
    • Niveau d’études : DESS, DEA, Grandes Ecoles, Bac + 5
    • Le poste est à pourvoir au sein de notre équipe « Projets ». L’objectif principal de cette équipe est d’assurer :
      • La gestion des projets spécifiques
      • La conception, le développement et les évolutions des applicatifs métiers de la gamme Aigle Solutions ou des logiciels de géo-décisionnels
      • Avec le souci du respect de la démarche qualité. Tous ces produits sont développés en full web en technologie Flex / AS3 ou Ajax.
  • Compétences Techniques Requises:
    • Bon niveau en AS3, FLEX, JAVASCRIPT, XHTML, XML, XSLT, CSS
    • Connaissances en Java / J2EE (JSF, Servlets, EJB)
    • Base de données
    • Bonne maîtrise du français écrite et orale
    • Sensibilité graphique et à la démarche qualité.
    • Les plus pour vous démarquer:
      • Connaissances de WPF et Silverlight
      • Expériences dans l’utilisation de CMS type « Joomla ! », «  SPIP ».
      • Connaissances des outils graphiques courant : PHOTOSHOP, ILLUSTRATOR, FLASH
      • Expériences en Infographie et Design en Web notamment => Références url à fournir
      • Notions de Business Intelligence (BI)
      • Notions en géomantique
  • Expérience Requise: 1 à 2 ans
  • Disponibilité: Immédiate

Conditions d’embauche

  • Lieu : Villeurbanne (69)
  • Rémunération: selon profil
  • Contrat: CDI

Pour postuler

  • Contact:
    • Fournir un CV à Sylvain Pourquier par mail : spourquier (AT) ciril (POINT) net avec la référence DEV/BG/20107205-1
vous justifiez d’une expérience professionnelle au moins 2 ans dans le développement orienté objet en PHP et 1 an en Flex.

LCCS – Screen Sharing, SDK Javascript, support P2P et RTMFP

Cela faisait longtemps que je n’avais pas regardé les nouveautés de LCCS (Livecycle Collaboration Service, anciennement AFCD, anciennement Cocomo) et depuis quelques mois, ils en ont fait du chemin!

En même temps, on ne voit que peu de billet sur ce service, alors qu’il est vraiment très puissant d’un point de vue fonctionnel. C’est dommage que les evangelists Adobe ne fassent pas plus la promotion de ce produit (car bon, il vendent le service qui est derrière). Je vais essayer de mettre quelques exemples sur mon blog ce soir :)

Si vous voulez les résumés complets des derniers changements, voici les billets des développeurs:

LCCS April Release : Feature Explosion

Screen Sharing and Recording: August Feature Tsunami

Voici les grands points:

  • Server-to-Server HTTP APIs: Permet à un serveur (le votre) de contrôler ce qui se passe dans les « rooms » de votre application ainsi que de l’administrer sans passer par du code client
  • Flash Player 10.1 libraries: Grâce aux API Flash Player 10.1, de nouvelles fonctionnalités sont possibles comme
    • Peer2Peer entre utilisateur (sans faire passer la donnée par LCCS)
    • Audio / Video multicast: Partager un flux audio ou vidéo à plusieurs utilisateurs
  • Large room support: Vos « rooms » ont maintenant une capacité plus grande. Pour l’instant limitée à 5000 utilisateurs mais les responsables de LCCS reconnaissent que l’on pourrait mettre bien plus que cela
  • Buddy List presence: Permet à un utilisateur d’avoir une liste d’amis qu’il suit et dont il peut suivre la présence facilement
  • JavaScript SDK: Vous voulez intégrer du collaboratif dans votre site HTML sans tout refaire en Flash? Pas de souci, vous pouvez maintenant commander le SDK à travers une API JavaScript.
  • Partage d’écran (Screen Sharing): C’est une fonctionnalité qui n’était pour l’instant présente que dans Adobe Connect. Vous pouvez maintenant partager votre écran aux autres utilisateurs de votre room très facilement. Notez que cette fonctionnalité se fait grâce à l’extension Adobe ConnectNow que l’utilisateur doit installer (installation transparente)
  • Screen Recording and Playing: Encore mieux que de simplement diffuser ce qui se passe sur votre écran, vous pouvez enregistrer le flux pour le rejouer par la suite

Et pour finir, une petite vidéo pour montrer le partage d’écran:

Screen Sharing Feature In Flash Now Available For Everyone! from Tom Krcha on Vimeo.

Eviter les failles de sécurité dans son application Flex

Quand on parle de Flash Player, ses détracteurs ont souvent l’argument « Flash Player n’est pas sûr, il est bourré de failles de sécurité ». On ne va pas se voiler la face, on voir parfois passer des bugfix sur des failles de sécurité, corrigées plutôt rapidement, on ne peut pas dire que Flash Player n’a jamais eu aucune faille. Personnellement, je pense avoir pris plus de virus à cause de mon OS (Windows FTW) que par Flash Player :P .

InsideRIA a publié un bon article sur certaines failles que vous pourriez avoir dans votre application, principalement du cross-scripting:

Top security threats to Flash/Flex applications and how to avoid them – Part 2

Principalement, cela se joue quand on utilise ExternalInterface sans se poser de question sur le contenu à écrire. Ainsi, si vous faîtes une écriture dans votre DOM sans vérifier le contenu, il se peut que l’utilisateur envoie une balise <script> contenant du code JavaScript. Idem pour les paramètres que vous pouvez passez dans l’URL de la page et que vous allez récupérer ensuite,

Bon alors personnellement, je n’ai pas vraiment compris la portée de ces attaques X-Scripting. Si un utilisateur essaie d’exécuter du code JS sur sa page, il sera confiné à son domaine, il ne pourra pas faire grand chose (personne ne commande sa connexion BDD par son JS par exemple). Et si vraiment il arrive à faire quelque chose, cela sera restreint à son contexte utilisateur, les autres ne seront pas utilisés.

Voilà, peut-être je suis à coté de la plaque mais si vous voyez un cas d’utilisation de ces attaques (sur vos applications par exemple), n’hésitez pas à laisser un commentaire, je suis curieux !