Archives de la catégorie: Web

Développement Web

Installer Symfony 2 sur un serveur mutualisé OVH

Votre application Symfony 2 fonctionne à merveille chez vous. Tout va dans le meilleur des mondes. On passe au déploiement et là : c’est le drame.

Si, vous aussi, vous avez connu ce genre de scenario sur un serveur mutualisé OVH, vous êtes au bon endroit.

Voici une procédure toute simple pour faire fonctionner le tout sans avoir à passer systématiquement par le répertoire /web.

Etape 1 : vérifiez que votre application web est prête

Attention aux fichiers CSS et Javascript générés par l’app : ils doivent être accessibles à la racine de l’app.

Etape 2 : installer l’application

Copiez le contenu de votre application web à la racine du site.

Mettez les droits en 755. Au besoin, mettez les droits de /app/cache à 777.

Pensez à vider le répertoire de cache.

Etape 3 : .htaccess à la racine du site

Voici un exemple de fichier .htaccess qui fonctionne :

SetEnv SHORT_OPEN_TAGS 0 SetEnv REGISTER_GLOBALS 0 SetEnv MAGIC_QUOTES 0 SetEnv SESSION_AUTOSTART 0 SetEnv ZEND_OPTIMIZER 1 SetEnv PHP_VER 5_3  AddType x-mapp-php5 .php   RewriteEngine on   RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(.*)$ web/app.php [QSA,L]

Etape 4 : .htaccess dans le répertoire web

Un autre fichier .htaccess doit être créé, mais dans le répertoire /web :

SetEnv SHORT_OPEN_TAGS 0 SetEnv REGISTER_GLOBALS 0 SetEnv MAGIC_QUOTES 0 SetEnv SESSION_AUTOSTART 0 SetEnv ZEND_OPTIMIZER 1 SetEnv PHP_VER 5_3  AddType x-mapp-php5 .php   RewriteEngine On   RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(.*)$ app.php [QSA,L]

Etape 5 : testez

Normalement, tout est en place. Vous pouvez accéder à votre site depuis la racine.

Share
Développement Mac OS X Web

Le développement web sur Mac

Un rapide article pour vous présenter les différents outils vous permettant d’être rapidement opérationnel pour le développement web sur Mac OS X.

Apache / PHP / Ruby On Rails / MySQL

Concernant Apache, il faut savoir que le serveur est déjà installé d’origine sur le Mac, il y a juste à le configurer dans les options de partage. Il en va de même pour PHP 5 et Ruby.

Pour installer Ruby On Rails, gem sera votre allié.

Pour ce qui est de MySQL, ce n’est guère plus compliqué : vous trouverez la version serveur sur le site officiel. Je vous conseille également l’outil MySQL Workbench qui est très bien fait pour gérer ses bases de données.

L’éditeur TextMate

L’éditeur ViM est intégré à Mac OS X. Cependant, je ne suis pas certain qu’il satisfasse tout le monde.

Personnellement, j’utilise TextMate. Il coûte 45 € mais il est très performant. On peut le tester pendant 30 jours gratuitement.

Son gros avantage est qu’il est généraliste et intègre de nombreux Bundles, et certains se trouvent également sur le web : ActionScript, PHP, Apache, JavaScript, HTML, CSS, Git, Subversion, SQL, Prototype / Script.aculo.us, JQuery, JQTouch,  Ruby On Rails, SproutCore, XML, Perl, Cake PHP, Python… Et ça, uniquement pour les langages web.

Il permet par exemple de compresser le JavaScript, déboguer le code, avoir une auto-complétion efficace.

CyberDuck

Une fois que l’on a testé le code localement, on souhaite bien entendu l’envoyer sur un serveur. CyberDuck permet de gérer correctement tout type de serveur. Il est relativement puissant et regorge de fonctionnalités et de protocoles. (FTP, FTPS, SSH, ..)

Il est disponible en version gratuite (donation optionnelle) ou payante si le logiciel convient. ( 18,99 € sur le Mac App Store )

Synchronisation FTP / SSH avec MacFusion

Pouvoir éditer le code avec TextMate en sélectionnant les fichiers dans CyberDuck, c’est bien.

Pouvoir accéder au projet complet dans un répertoire donnée synchronisé avec le serveur, c’est mieux !

Pour cela, installez MacFUSE.

Ensuite, installez Macfusion.

Et c’est parti, vous pouvez synchroniser comme vous voulez n’importe quel répertoire en montant le répertoire distant localement.

Le débogage

Les différents navigateurs intègrent chacun leurs outils de débogage.

Concernant Safari, le navigateur par défaut de Mac OS X, vous pouvez afficher le menu Développement en passant par les préférences avancées.

Par exemple, grâce à l’inspecteur web (qui s’affiche justement via le menu développement), vous pouvez voir comment sont gérées les ressources, comment est organisée la hiérarchie de votre page, vous pouvez également entrer du code javascript à la volée… c’est vraiment très pratique.

Tester les services web

Souvent, nous avons accès à des services web permettant d’exploiter telle ou telle ressource. Cependant, il est souvent bien difficile de les tester.

Il y a bien entendu l’outil curl, accessible en ligne de commande, qui permet d’effectuer des tests complets, mais qui reste très austère.

Personnellement, j’utilise HTTP Client, disponible pour 1,59 € sur le Mac App Store. Il permet d’effectuer des tests rapidement et de voir les données HTTP brutes, le tout dans une interface graphique simple mais efficace.

RapidWeaver : l’éditeur WYSIWYG

RapidWeaver est disponible sur le Mac App Store pour 39,99 € et vous permet de concevoir très rapidement des sites web, sans connaissances techniques.

Pour les applications web

Le kit de développement fourni avec XCode intègre Dashcode, qui permet de concevoir visuellement des applications web pour Mac, iPhone et iPad.

MobDis, disponible gratuitement sur le Mac App Store, permet de concevoir des applications web également.

Share
iPad iPhone Mac OS X Web

Apple, le marché des apps : aujourd’hui et demain

Les parts de marché d’Apple sur ses différents secteurs d’activité méritent parfois quelques explications. Cet article a pour but d’éclaircir un peu les choses.

Le Mac

A ce jour, les parts de marché du Mac sont grosso-modo de 10 % au niveau mondial. L’évolution est régulière, avec une croissance annuelle de 23 % environ, soit 8 fois plus que les ventes de PC.

Ce qu’il faut savoir, c’est que 50 % des ventes sont des migrations de PC vers Mac.

De plus, depuis Janvier, le Mac dispose d’un App Store. Et le développement sur Mac repose sur la même base que le développement sur iOS. Hors, les iPad et iPhone doivent leur succès essentiellement à l’App Store.

Dernier élément à prendre en compte, l’arrivée imminente de Mac OS X Lion, prévu pour l’été 2011 (Windows 8 sortira en 2012). Tout comme l’iPad ou l’iPhone, il est centré autour des mêmes éléments qui ont été la recette du succès :

  • Mac App Store : un App Store totalement intégré au système, plus besoin de chercher des logiciels douteux sur le web ou bien acheter 4 fois la même application
  • du multi-touch : tout est centré autour du multi-touch, comme sur iOS, avec des actions à 1-2-3-4 doigts (retourner, agrandir, défiler, tapoter)
  • Launchpad : pour faire simple, il s’agit d’avoir une interface d’accès aux applications similaire à celle de l’iPad ou de l’iPhone
  • les apps en plein écran : la plupart des app peuvent être exécutées en plein écran et le passage de l’une à l’autre se fait en un glissement de doigts
  • quand on arrête une application, on reprend là où on était, comme sur iOS.

Il y a en plus tous les avantages du Mac : enregistrement automatique des différentes versions d’un fichier (avec machine à voyager dans le temps pour revenir à une précédente version) , les outils principaux pré-installés, les fonctionnalités serveur intégrées et un aspect fiabilité / sécurité mis à l’épreuve.

Aujourd’hui, un iMac coûte 1200 euros, un Macbook Air coûte 1000 euros, un Macbook coûte 1000 euros. C’est beau, c’est écologique et c’est prévu pour durer dans le temps. (compter 5 ans avant d’être obsolète, contre 3 ans pour un PC)

De là à dire que cela va favoriser son adoption auprès du grand public, ce serait comme dire que le grand public achètera un jour des applications sur son téléphone ou bien une tablette moins puissante qu’un ordinateur et plus grosse qu’un smartphone.

iPad

L’iPad n’aurait, selon les experts, jamais dû fonctionner car « inutile et trop grand ». « Il ne fait même pas téléphone ». « C’est un iPhone en plus gros ». Certes.

l’iPad 2 sort en mars 2011. Il est 2 fois plus rapide que son prédécesseur, 9 fois plus rapide sur les jeux vidéo (se situe au dessus de la Wii, un peu en dessous de la XBox 360). Il possède une sortie TV le poussant donc vers le jeu vidéo. Là où il est déjà expert. (Unreal Engine 3, moteur 3D présent sur de nombreuses consoles, a été adapté à iOS)

Il est leader du marché avec 90% des parts.

Son App Store est le plus gros existant.

Il est le moins cher de tous.

Il a même forcé Samsung à revoir sa stratégie.

Que dire de plus ?

iPhone

Encore une fois, un produit qui n’aurait jamais dû marcher : « Trop cher. », « Qui installerait des applications sur un téléphone ? », « On ne pourra jamais détrôner Sony et Nintendo avec les consoles portables ».

10 milliards de téléchargements sur App Store plus tard, 500 000 apps disponibles : c’est la plateforme d’applications qui a le plus grand succès et qui rapporte le plus aux développeurs.

En termes de parts de marchés des smartphones connectés en France, on est à 70 % environ selon GS StatsCounter, malgré 30% des ventes. On compte environ 30 % aux Etats-Unis. Les grands concurrents sont Blackberry (sur le déclin) et Android.

« Android est en plein essor » : oui, on remplace les téléphone Samsung avec OS maison par des Samsung Android. Et après ? Proportionnellement, Android devrait terrasser Apple sur le marché App Store. Hors, c’est loin d’être le cas. C’est d’ailleurs ce que les statistiques mettent en avant : si 30 % des ventes sont sur Android, partagées équitablement avec iOS et Blackberry, les connexions à Internet (Web, Mail, App Store) se font pour 70 % sur iOS, 20 % sur Android et 10 % sur les autres appareils. Et la découverte de plusieurs vers sur la plateforme de Google ne va pas arranger les choses.

Ce qu’il faut également prendre en compte, au delà du fait que l’Androphone est bien pour mémé qui a l’impression d’avoir un iPhone, c’est que le coût de développement est supérieur sur Android. On entâme donc la rentabilité. Surtout si la plateforme n’a pas un succès prépondérant sur le téléchargement des applications.

En terme de qualité, il faut également savoir que les consommateurs regardent de plus en plus au côté écolo. Hors, Apple travaille sur ce créneau, en faisant le bon équilibre avec la puissance du matériel et en favorisant le recyclage. L’entrée de gamme n’a jamais été en faveur de cet aspect.

Un autre point à ne pas négliger est l’arrivée de l’iPhone sur les réseaux CDMA, ce qui va apporter de nouvelles parts de marché à Apple aux Etats-Unis et en Asie.

Dernier point essentiel à prendre en compte est l’arrivée de l’iPhone 5, qui comme son grand frère l’iPad devrait être plus puissant et équipé du même type de matériel. L’aspect console de jeu dans la poche risque donc de se confirmer.

Avec iOS 4.3, la compatibilité iPhone 3G disparaît : un boulet en moins pour les développeurs. Les nouvelles applications seront donc compatibles avec ce matériel, mais pas de manière optimale. C’est l’obsolescence programmée. Chaque utilisateur pourra revendre son iPhone à son opérateur pour en acheter un neuf, moyennant une centaine d’euros en plus.

Qui dit matériel récent, dit de nouvelles possibilités en termes de développement.

iOS 5 : arrivée imminente

Que peut-on imaginer avec iOS 5, qui arrive cet été :

  • base Mac OS Lion au lieu de Snow Leopard (n’intéresse que les développeurs)
  • base matérielle limitée : de nouvelles possibilités en terme d’interface, avec plus d’effets
  • tout le matériel compatible est compatible avec OpenGL ES 2.0 : les jeux vidéos seront encore plus beaux
  • qui dit OpenGL ES 2.0 dit WebGL : le standard WebGL 1.0 vient d’être arrêté, son développement sur Mac est bien avancé et son développement sur iOS ne doit pas être loin derrière
  • exploitation optimale de Grand Central Dispatch : cette technologie qui est arrivée avec iOS 4 permet d’exploiter au mieux le multi-coeurs des nouveaux appareils, les applications existantes sont donc déjà optimisées
  • accéléromètre, GPS et boussole à tous les étages : tout le matériel supporté par iOS 5 permet la réalité augmentée, grâce à la disparition de l’iPhone 3G
  • caméra en façade sur les appareils récents, donc nouvelles possibilités
  • plus de puissance minimale = nouveaux outils pour les développeurs

En clair, la stratégie d’Apple consistant à avoir une visibilité sur 2-3 ans permet d’écraser la concurrence de la manière suivante :

  • le système iOS est très souple, donc le travail de migration d’une app vers iOS 5 est limité si on s’y est préparé
  • un nombre d’appareils limité signifie un travail d’optimisation moins long
  • ce même aspect favorise l’exploitation maximale des capacités techniques
  • la mise à jours de l’OS permet de redonner un coup de fouet au matériel, comme nous l’avons vu avec la sortie de iOS 4 sur iPad

iOS : la sécurité business

Pour conclure, les aspects importants à connaître sont donc les suivants :

  • parts de marché limitées sur le matériel ne signifie en aucun cas parts de marché limitées sur les apps (cf. Blackberry)
  • sans iOS, les tablettes et smartphones seraient livrés avec un stylet, un clavier rétractable et Windows Mobile
  • de tous les mauvais présages, aucun n’est arrivé
  • Apple garantie une compatibilité maximale sur 2 générations, une compatibilité minimale sur 3 générations : le coût est donc à calculer sur 2 ans, sans mauvaise surprise
  • un appareil iOS, ça se recycle : un cycle de consommation immatérielle
  • en restant sur du haut de gamme, Apple conserve ses parts de marchés à un bon niveau
  • Apple reste leader incontesté sur le marché des apps, malgré une concurrence très forte
  • la publicité sur iOS est plus percutante que la publicité télévisuelle
  • qui d’autre peut garantir une visibilité maximale sur la tranche de population la plus consommatrice ?
Share
Développement

Les services web REST et le format JSON

Dans ce petit billet, nous allons tâcher de présenter simplement ce que sont les services web REST et le format d’échange JSON.

L’architecture REST

Commençons par le commencement. Une piqure de rappel sur le protocole HTTP n’est jamais malvenue.
Pour faire simple, une requête HTTP se présente ainsi :

  • Une méthode (GET, POST, PUT, DELETE)
  • Un chemin vers une ressource (/index.php, /liste/contenu/)
  • Une version du protocole (1.0 ou 1.1 généralement)
  • Un ensemble de propriétés et valeurs (Content-Type, Length)
  • Un contenu (facultatif)

C’est autour de ce protocole que s’organise l’architecture REST.

Les méthodes HTTP sont donc utilisées ainsi :

  • GET : lecture d’information
  • POST : envoi d’information
  • PUT : mise à jour d’information
  • DELETE : suppression d’information

Par exemple, si je veux lire la liste des adhérents à mon club d’échecs, j’effectue une requête de type GET vers la ressource http://monsite.com/adherents . Si je veux les adhérents ayant plus de 20 ans, je peux faire http://monsite.com/adherents?ageMinimum=20.
De la même manière, si je veux supprimer les adhérents 3 et 4, je peux faire une requête de type DELETE vers http://monsite.com/adherents/3/4.
Si on veut envoyer des informations, on utilise POST ou PUT en passant les informations dans le corps du message.

REST du côté serveur

La plupart d’entre vous utilisent PHP pour interpréter les informations du côté du serveur. Nous allons donc nous baser sur ce langage afin d’expliquer le fonctionnement.

Tout d’abord, il faut savoir quelle est la méthode utilisée. Et là, premier problème : PHP ne semble gérer que les requêtes de type POST et GET, qui sont utilisées par HTML.

Récupérons d’abord la méthode HTTP

Pour cela, il suffit d’utiliser les données du serveur.

// $method sera égal à 'get', 'post', 'put' ou 'delete' $method = strtolower($_SERVER['REQUEST_METHOD']);

Pas de soucis pour GET et POST

Les méthodes GET et POST ne posent pas de soucis particulier : leur contenu est passé respectivement dans les tableaux $_GET et $_POST.

Pas de soucis non plus pour DELETE

La méthode DELETE envoie ses paramètres dans l’URL ( accessible via $_SERVER['REQUEST_URI'])

Il reste les paramètres de PUT

La méthode PUT envoie elle des informations dans le corps du message. Comment les récupérer en PHP ?
Voici la solution :

// récupération des données brutes $raw_data = file_get_contents('php://input'); // transformation en tableau à indexes ($put_data) parse_str($raw_data, $put_data);

Format des échanges : JSON

Les données échangées doivent pouvoir être comprises par le côté serveur comme le côté client.
Pour cela, un format simple avec une forte capacité de compression a fait son apparition : JSON.
JSON s’architecture autour du format des objets ECMAScript (JavaScript) .
Les 2 principales caractéristiques sont :

  • Le principe de clé / valeur
  • L’organisation des données sous forme de tableau

Les types de données valables sont :

  • tableau
  • objet
  • chaîne de caractères
  • valeur numérique (entier, double)
  • booléen (true/false)
  • null

Par exemple, pour récupérer le nom, le prénom et l’âge d’une personne dans un objet :

{     "nom": "xxxx",     "prenom": "yyyy",     "age": 25 }

Une liste d’articles :

[     {         "nom": "article a",         "prix": 3.05,         "disponible": false,         "descriptif": "mon article a ..."     },     {         "nom": "article b",         "prix": 13.05,         "disponible": true,         "descriptif": null     } ]

Vous trouverez plus d’informations sur le format JSON au travers du site officiel : http://www.json.org/json-fr.html

Pour les données binaires (images et autres), il suffit de donner une adresse en lecture et une propriété en écriture.
Par exemple, si je veux envoyer une image avec un descriptif, mes variables POST seront organisées ainsi :

  • json : descriptif au format json
  • image : image au format binaire

La lecture des données au niveau serveur se fait ainsi :

$result = json_decode($json_data);

L’écriture, basée sur un tableau à indexes, se fait ainsi :

$json_str = json_encode($data_array);

Vous trouverez toutes les informations nécessaires sur http://www.php.net/manual/fr/ref.json.php.

Pour finir, le type de données utilisé généralement pour décrire un contenu JSON est application/json.

Avec ceci, vous avez de quoi réaliser des services web performants et simples à mettre en oeuvre !

Share
Applications iPhone Mac OS X Web

Pas de Flash pour l’iPhone ni l’iPad : le détail

Le plugin Flash n’est pas disponible sur plateforme iPhone OS et cela suscite beaucoup d’interrogations. Nous allons donc tâcher d’expliquer le pourquoi du comment.

Historique

Flash est disponible sur plateforme MacOS depuis de nombreuses années. Des cumuls de fonctionnalités sont arrivés les uns à la suite des autres, apportant chacun leur lots de nouveautés.

Cependant, au fur et à mesure des versions, Flash sur Mac OS X s’est avéré de plus en plus lourd et lent.

Puis est arrivé iPhone OS : un Mac OS X mobile. Même architecture, donc portage simplifié.

Cependant, Apple a jugé le plugin trop lourd et trop plantogène pour l’iPhone. Il n’a donc pas été inclus.

Pourquoi Flash est-il lourd sur Mac OS X et iPhone OS ?

La raison est simple : la plateforme Mac a évolué, le plugin Flash n’a pas suivi.

Pour vérifier cela, il suffit de regarder ce qu’utilise le plugin Flash sur Mac OS X.

otool -L /Library/Internet\ Plug-Ins/Flash\ Player.plugin/Contents/MacOS/Flash\ Player

Et que voyons-nous ?

Flash utilise Carbon qui est l’ancienne base de Mac OS conservée pour des raisons de compatibilité. La nouvelle base de Mac OS X est en effet connue sous le nom de Cocoa.

Qu’est-ce que cela implique ?

  • Pas de 64 bits,
  • Le matériel n’est pas exploité de manière optimale,
  • L’intégration au système est minimale,

Du coup, iPhone OS subit les mêmes problèmes (d’autant qu’il n’est pas compatible Carbon) . Et ça, Steve Jobs ne l’accepte pas.

Des efforts en cours

Des efforts pour la prochaine version de Flash semblent mis en oeuvre. En effet, Adobe a annoncé avoir optimisé Flash sur Mac OS X.

Pour cela, ils vont commencer par utiliser Core Animation (Quartz Core) qui permet d’afficher des animations 2D optimisées pour le matériel.

De même, la lecture de vidéo sera optimisée.

Du coup, Core Animation faisant partie de Cocoa, il y a fort à parier qu’une version 64 bits fassent son apparition dans la foulée.

Et si Flash utilise pleinement les possibilités de Cocoa sur Mac OS X, il y a de bonnes chances pour qu’Apple finisse par accepter la version mobile qui, reposant sur la même base, sera optimisée pour l’iPhone OS.

La poêle et le chaudron

Apple semble très fort en donneur de leçon sur ce coup-là.

A en croire leur propos, tous leurs logiciels semblent pleinement optimisés.

Sauf qu’il y a un vilain petit canard. iTunes, l’un des logiciels phares d’Apple, n’utilise Cocoa que partiellement. Ceci est vérifiable ainsi :

otool -L /Applications/iTunes.app/Contents/MacOS/iTunes

On voit en effet apparaître un lien prononcé avec Carbon !

Alors Monsieur Apple, à quand une version d’iTunes pleinement optimisée pour Cocoa ?

Share
Développement

xml_encode() : le XML facile

Les développeurs PHP vont certainement adorer cette fonction.

Elle permet d’encoder un tableau (à indexes ou pas) de manière efficace. Elle est basée sur un autre code qui ne fonctionnait malheureusement pas très bien.
Les CDATA sont également automatiquement insérés au besoin.
Quand il n’y a pas d’index, les données ressortent sous l’intitulé entry et la racine du document sera toujours entries.

function xml_encode($mixed, $domElement = NULL, $DOMDocument = NULL) {     if (is_null($DOMDocument)) {         $DOMDocument = new DOMDocument;         $DOMDocument->formatOutput = true;   		$rootNode = $DOMDocument->createElement('entries'); 		$DOMDocument->appendChild($rootNode);           xml_encode($mixed, $rootNode, $DOMDocument);           echo @$DOMDocument->saveXML();     } else {         if (is_array($mixed)) {             foreach ($mixed as $index=>$mixedElement) {                 if (is_int($index)) { 					$nodeName = 'entry'; 				} else { 					$nodeName = $index; 				} 				$node = $DOMDocument->createElement($nodeName); 				$domElement->appendChild($node); 				xml_encode($mixedElement, $node, $DOMDocument); 			}         } else { 			// TODO: test if CDATA if needed 			$new_node = $DOMDocument->createTextNode($mixed);               $domElement->appendChild($new_node);         }     } }

On l’utilise comme json_encode().

Par exemple :

<?php   header('Content-Type: text/xml');   function xml_encode($mixed, $domElement = NULL, $DOMDocument = NULL) {     if (is_null($DOMDocument)) {         $DOMDocument = new DOMDocument;         $DOMDocument->formatOutput = true;   		$rootNode = $DOMDocument->createElement('entries'); 		$DOMDocument->appendChild($rootNode);           xml_encode($mixed, $rootNode, $DOMDocument);           echo @$DOMDocument->saveXML();     } else {         if (is_array($mixed)) {             foreach ($mixed as $index=>$mixedElement) {                 if (is_int($index)) { 					$nodeName = 'entry'; 				} else { 					$nodeName = $index; 				} 				$node = $DOMDocument->createElement($nodeName); 				$domElement->appendChild($node); 				xml_encode($mixedElement, $node, $DOMDocument); 			}         } else { 			// TODO: test if CDATA if needed 			$new_node = $DOMDocument->createTextNode($mixed);               $domElement->appendChild($new_node);         }     } }   $entree[0] = "texte";   for ($i = 0;$i < 50;$i++) { 	$entree[$i]['nom'] = "texte pour nom ${i}"; 	$entree[$i]['valeur'] = "texte pour valeur ${i}";   	$donnes['debut'] = 0; 	$donnes['fin'] = 100; 	$entree[$i]['donnees'] = $donnes;   	for ($j = 0;$j < 5;$j++) { 		$liste[$j] = "liste ${j}"; 	}   	$entree[$i]['liste'] = $liste;   	$entree[$i]['xml'] = "donnees avec <a>balise xml</a>"; }   echo xml_encode($entree);   ?>

Affichera :

<?xml version="1.0"?> <entries>   <entry>dexte</entry>   <entry>     <nom>texte pour nom 1</nom>     <valeur>texte pour valeur 1</valeur>     <donnees>       <debut>0</debut>       <fin>100</fin>     </donnees>     <liste>       <entry>liste 0</entry>       <entry>liste 1</entry>       <entry>liste 2</entry>       <entry>liste 3</entry>       <entry>liste 4</entry>     </liste>     <xml>donnees avec &lt;a&gt;balise xml&lt;/a&gt;</xml>   </entry>   <entry>     <nom>texte pour nom 2</nom>     <valeur>texte pour valeur 2</valeur>     <donnees>       <debut>0</debut>       <fin>100</fin>     </donnees>     <liste>       <entry>liste 0</entry>       <entry>liste 1</entry>       <entry>liste 2</entry>       <entry>liste 3</entry>       <entry>liste 4</entry>     </liste>     <xml>donnees avec &lt;a&gt;balise xml&lt;/a&gt;</xml>   </entry>   <entry>     <nom>texte pour nom 3</nom>     <valeur>texte pour valeur 3</valeur>     <donnees>       <debut>0</debut>       <fin>100</fin>     </donnees>     <liste>       <entry>liste 0</entry>       <entry>liste 1</entry>       <entry>liste 2</entry>       <entry>liste 3</entry>       <entry>liste 4</entry>     </liste>     <xml>donnees avec &lt;a&gt;balise xml&lt;/a&gt;</xml>   </entry>   ... </entries>

Et voilà !

Share
Développement

Intégrer une image au code HTML

Dans ce rapide tutoriel, nous allons voir comment intégrer une image dans un code HTML.

En effet, cela peut-être pratique par exemple pour embarquer du contenu web dans un base de données.

Pour cela, il suffit d’utiliser la balise img, évidemment, ainsi que le codage base64.

En HTML, cela ressemble à ça :

<img src="data:image/png;base64,..." />

Voici un script bash qui permet d’encoder le tout automatiquement, grâce à openssl.

#!/bin/sh   if [ $# -eq 0 ]; then 	echo "Command: ${0} <image file>" 	exit 1 fi   path=$1 source=$(basename ${path}) extension=${source##*.} base=${source%.*} output="${base}.html" base64=$(openssl base64 -in ${path})   echo "<html><head></head><body><img src=\"data:image/${extension};base64,${base64}\" /></body></html>" > $output   exit 0

Le script fonctionne ainsi :

  • ./monscript.sh monfichierimage.png
  • génération automatique de monfichierimage.html
Share
Développement Web

Utiliser la Google Search Ajax API

Je profite de ce nouvel article sur le blog  de Kaeli Soft pour me présenter. Jérémie Veillet, jeune auto-entrepreneur de 26 ans, j’ai pour travail tout ce qui concerne la partie Recherche & Développement au sein de l’équipe. Je travail actuellement sur le site internet de la société, et sur différents moyens d’utiliser le qrcode au sein d’applications, mais sur cela nous reviendrons plus tard.

Je vais vous décrire en quelques étapes simples comment mettre en place sur votre site internet un champs de recherche Google personnalisé.

Prérequis : Avoir des connaissances de base en Javascript.

Tout d’abord il convient de créer une page HTML basique qui va nous servir de squelette pour afficher nos différentes recherches, appelons-la « recherche.html ». Elle contient pour le moment uniquement deux éléments div qui vont nous servir pour la suite.

<!doctype html> <html> <head> 	<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 	<title>Moteur de recherche Kaeli Soft</title> </head> <body> 	<!-- Conteneur des résultats --> 	<div id="searchResults">Chargement...</div>   	<!-- Conteneur des contrôles de navigation --> 	<div id="searchcontrol">Chargement...</div> </body> </html>

Ensuite, nous devons lier notre page aux API de Google à l’aide d’un script pour pouvoir utiliser les fonctions mises à disposition.

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

C’est facultatif mais chaque développeur peut demander gratuitement une clé d’API aux services de Google, cela leur permet de tracer plus facilement s’il y a un problème dans le script exécuté.

Tentons d’afficher le champs de Recherche Google. Créons une fonction Onload() qui va contenir le code javascript nous permettant de faire nos traitements :

<!doctype html> <html> <head> 	<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 	<title>Moteur de recherche Kaeli Soft</title>    	<script src="http://www.google.com/jsapi" type="text/javascript"></script>     <script language="Javascript" type="text/javascript">//<![CDATA[     // Chargement du champ de recherche google, les deux paramètres sont oligatoires     // 1: nom de l'API à charger; 2: numéro de version de l'API (1.0)     google.load('search', '1');       // Fonction de traitement de la recherche     function OnLoad() {         // Créer un objet SearchControl qui permet de créer les contrôles basiques de la recherche       var searchControl = new google.search.SearchControl();       // WebSearch permet de limiter la recherche au Web (ou blogs, images, maps)       searchControl.addSearcher(new google.search.WebSearch());       // Affichage des champ de recherche       searchControl.draw(document.getElementById("searchcontrol"));          // Execute une recherche initiale        searchControl.execute("Google");     }     // Appeler cette fonction pour que le traitement s'effectue une fois le document chargé     google.setOnLoadCallback(OnLoad);     //]]>     </script> </head> <body> 	<!-- Conteneur des résultats --> 	<div id="searchResults">Chargement...</div>   	<!-- Conteneur des contrôles de navigation --> 	<div id="searchcontrol">Chargement...</div> </body> </html>

A cette étape vous devriez obtenir un champs de recherche et un résultat pour la recherche « google ». Bien sûr on peut initialiser la recherche pour qu’aucun résultat par défaut n’apparaisse, il suffit de mettre la méthode « execute » à vide.

Voyons maintenant, comment limiter la recherche à votre propre site et afficher plus de résultats sur la page. La méthode .setExpandMode permet de définir que l’on souhaite afficher l’intégrité des résultats (avec la constante EXPAND_MODE_OPEN), et la méthode .setRoot permet de forcer l’attachement des contôles de navigation sur le div souhaité (ici « searchcontrol »).

<!doctype html> <html> <head>    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>    <title>Moteur de recherche Kaeli Soft</title>    <script src="http://www.google.com/jsapi?key=ABQIAAAA0hDneawcf7yozxJWOReHhxQPxJxl0OR9X1wz4qymITTzqEUA-RQWsCurC_KFwiw1_cM9Sw7_aU4peA" type="text/javascript"></script>    <script language="Javascript" type="text/javascript">//<![CDATA[     // Chargement du champ de recherche google, les deux paramètres sont oligatoires     // 1: nom de l'API à charger; 2: numéro de version de l'API (1.0)     google.load('search', '1');       // Fonction de traitement de la recherche     function OnLoad() {         // Créer un objet SearchControl qui permet de créer les contrôles basiques de la recherche       var searchControl = new google.search.SearchControl();         // Définition des options du champ de résultats       var options = new google.search.SearcherOptions();       // Option permettant d'afficher tout les résultat trouvés, et des pages supplémentaires si les résultats sont nombreux       options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);      // Attachement des contrôles à l'élément racine de la page qui possèdent l'id="searchcontrol"      options.setRoot(document.getElementById("searchcontrol"));       // Ajout d'un objet WebSearch pour préciser que l'on limite à la recherche web     // BlogSearch pour la recherche sur les blogs     // LocalSearch pour une recherche dans une localité     // ImageSearch pour rechercher des images      var siteSearch = new google.search.WebSearch();     // Restrictions de recherche     // setUserDefinedLabel: définit un label pour les résultats de recherche      siteSearch.setUserDefinedLabel("kaelisoft.fr");     // setUserDefinedClassSuffix: définit le suffixe des classes CSS des résultats (ex:gsc-resultsRoot-siteSearch)      siteSearch.setUserDefinedClassSuffix("siteSearch");     // setSiteRestriction: domaine du site sur lequel on veut chercher      siteSearch.setSiteRestriction("kaelisoft.fr");     // On applique les options de restrictions à la recherche      searchControl.addSearcher(siteSearch, options);       // Les résultats de recherche sont écrit dans l'élément qui possèdent l'id="searchResults"      searchControl.draw(document.getElementById("searchResults"));       // Execute une recherche initiale      searchControl.execute("Google");     }     // Appeler cette fonction pour que le traitement s'effectue une fois le document chargé     google.setOnLoadCallback(OnLoad);     //]]>     </script> </head> <body>    <!-- Conteneur des résultats -->    <div id="searchResults">Chargement...</div>       <!-- Conteneur des contrôles de navigation -->     <div id="searchcontrol">Chargement...</div> </body> </html>

Alors maintenant que l’on à fait ça, vous me direz, ce n’est pas forcément ce qu’il y à de plus beau, ou très adapté au design de votre site. Heureusement, Google à tout prévu, et il est possible d’entièrement customiser l’affichage, du champs de recherche aux résultats, par l’intermédiaire de feuille de style CSS.

Imaginons que l’on ne veuille afficher que le champ texte pour la recherche, pas de boutons « Recherche », ni de bouton pour effacer et surtout pas de logo « Fournis pas Google ». Pour connaitre facilement le nom des class à modifier, je conseille d’utiliser l’inspecteur d’éléments (Safari) ou d’utiliser le plugin Firebug pour Firefox (disponible ici).

Il faut alors ajouter dans l’entête du fichier html un petit peut de CSS:

<style type="text/css">    .gsc-branding,     .gsc-title,     .gsc-stats,     .gsc-search-button,     .gsc-clear-button {        visibility: hidden;    } </style>

Maintenant essayons de booster un peu ces champ de recherche en rendant le bouton rechercher noir et le champ de saisie avec des bords ronds.

.gsc-search-button{    background-color: #000000;    color: #ffffff;    border: 1px solid #000000;    /* Border-radius  */    -moz-border-radius: 32px;    -webkit-border-radius: 32px;    border-radius: 32px; }   input[type=text] {    width: 140px;    font-size: 13px;    text-align: left;    color: #000000;    background-color: #ffffff;    border: 1px solid #000000;      /* Border-radius  */    -moz-border-radius: 32px;    -webkit-border-radius: 32px;    border-radius: 32px; }

vous pouvez télécharger le fichier complet ici : recherche.html

Ceci n’est qu’une méthode pour interagir avec les outils de rechercher Google, ici avec javascript, mais on peut aller encore plus avec PHP, Java, Python, mais ceci sera peut être l’objet d’un autre article.

Share