Un des sujets épineux de ces derniers temps fût le support du multi-tâches sur iPhone OS. On ne peut pas faire tourner 4 programmes à la fois sur un iPhone alors que c’est possible sur un ordinateur de bureau.
- Limite technique ? Pas vraiment. Sans être multi-coeurs, le processeur de l’iPhone sait faire plusieurs choses à la fois. (on peut écouter de la musique en surfant par exemple)
- Limite de l’OS ? Non plus. iPhone OS repose sur Mac OS X qui est tout à fait à l’aise avec ce procédé.
Mais alors, pourquoi ?
(très) rapide historique du développement sur smartphone
Les premiers smartphones orientés grand public furent, entre autres, les Windows CE.
Et comme chez Microsoft (et d’autres) on n’a pas spécialement cherché a se compliquer la tâche, on a donc fait en sorte que ça fonctionne comme sur un ordinateur de bureau, mais en plus petit.
Ca fonctionne, oui mais…
La farandole des programmes « maison »
Forcément, les développeurs ont rapidement voulu concevoir leurs applications « maison », tournant pour certaines en tâche de fond.
Ensuite, on a forcément pu lancer plein d’applications dans tous les sens : des applications de qualité excellente à médiocre. (à savoir, gourmande en mémoire, mais restant en tâche de fond)
Sans compter que certaines lancent elles-même des sous-tâches (appelées threads) qui s’exécutent avec une emprunte mémoire certes mince (autour d’1 Mo) et qui s’arrêtent ensuite (ou pas).
Sauf que cette gourmandise mémoire fait que le smartphone devient très vite horriblement lent. Le smartphone n’a pas le quart de la mémoire d’un ordinateur. Il arrive donc vite à saturation.
Mais que faire alors ?
C’est très certainement la question que ce sont posés les ingénieurs d’Apple en lançant l’iPhone.
Le principe est simple :
- lancer une application
- sauvegarder son état à la fermeture
- restaurer son état à l’ouverture
Du coup :
- les applications se lancent rapidement, car elles ont un maximum de mémoire disponible,
- leur état est enregistré, donc pas de soucis de reprise d’activité,
- la batterie est économisée car aucun processus ne consomme inutilement des ressources.
Bien entendu, au début, tout le monde s’est plein de cette « limitation ». Mais aujourd’hui, l’iPhone reste l’un des smartphones les plus appréciés.
Un exemple suivi ?
Alors que les Windows Mobile étaient jusqu’ici multi-tâches, la version Windows Mobile 7 en cours de développement s’oriente elle vers le mono-tâche, à la manière de l’iPhone.
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 ?
Si vous aussi vous avez un Mac et une clé 3G, vous avez dû être séduit par l’annonce : « Compatible Mac OS X ». Seulement, la version fournie n’est pas compatible avec Snow Leopard.
Après de nombreuses recherches, j’ai enfin trouvé une version parfaitement fonctionnelle sous Mac OS X : Vodaphone Mobile Broadband 3.04.10.00.
Vous pouvez télécharger cette version ici.
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 <a>balise xml</a></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 <a>balise xml</a></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 <a>balise xml</a></xml> </entry> ... </entries>
Et voilà !
Hier, Apple nous a présenté son nouveau bébé : l’iPad !
Nous allons donc tâcher de présenter ce nouveau support qui sera bientôt dans tous les foyers. (si, si, même si beaucoup d’entre vous semblent encore en douter !)
Tout d’abord, c’est une tablette
Et oui : Pad en anglais signifiant bloc-note, il s’agit bien d’une tablette tactile.
Les tablettes tactiles, on connaît : chacun a sorti la sienne. Ca a fait d’ailleurs un beau flop dans la plupart des cas. Rien de nouveau me direz-vous…
Et bien non !
En effet, l’iPad n’est pas une tablette comme les autres. Contrairement à ses concurrentes qui fonctionnent avec un Windows 7 ou un GNU/Linux dans le meilleur des cas, celle-ci fonctionne sous iPhone OS.
Qu’est-ce que ça change ?
- meilleure autonomie (10 heures)
- meilleures performances
- démarrage quasi instantané
Et comme c’est du Apple :
- écran très haute qualité
- fin et léger
- multi-touch
- écologique (pas de PVC, etc..)
- avec une pomme au dos
Ok, c’est une tablette performante : et après ?
Les fonctionnalités de base sont identiques à celles de l’iPhone et suivent la même logique d’utilisation. La différence principale est l’ergonomie qui a été adaptée à la taille de la tablette.
On retrouve donc le classique navigateur web Safari : surfez instantanément depuis votre canapé sans le pénible câble d’alimentation…
Il y a également le client Mail pour lire et écrire des courriers électroniques confortablement (à 2 mains !)
L’outil Photos : une gestion simple et rapide des photos (que l’on peut importer depuis l’appareil photo) . Une utilisation inédite du multi-touch et des diaporamas 3D à couper le souffle ! On veut faire voir une photo à un interlocuteur en face de soi ? Il suffit de retourner l’iPad, l’image s’adapte automatiquement !
Les vidéos peuvent être lues en haute définition via une interface animée en 3D époustouflante ! Un confort d’utilisation inégalé.
YouTube est également de la partie.
La fonctionnalité iPod n’a jamais été aussi simple d’utilisation pour écouter votre musique et voir vos films.
L’application iTunes vous permet également d’acheter du contenu multimédia en ligne ou bien télécharger des podcasts par exemple.
Les applications Contacts, Cartes, Notes et Calendrier sont également de la partie…
Génial ! Un gros iPhone avec une interface améliorée… C’est tout ?
Et bien non, ce n’est pas tout.
Car s’il y a bien une chose qui a fait le succès de l’iPhone, c’est bien l’App Store et ses applications !
L’iPad possède en effet son App Store avec des applications spécialement prévue pour lui. En effet, les applications iPad permettent une interaction nouvelle. Par exemple, grâce à la taille de l’écran, on peut faire défiler des sous-menus flottants.
L’intégralité de la suite bureautique iWork a ainsi été déclinée sur iPad afin de rendre l’expérience tactile encore plus simple et agréable. Par exemple pars en weekend avec un peu de boulot. La mallette du portable avec le câble d’alimentation qui traverse la chambre. Il n’y a rien de pire pour avoir l’impression d’emmener son bureau entier avec soi. Je prend l’iPad : l’interface est agréable, je l’utilise également pour mes loisirs, ça ne stresse personne et ça ne prend pas de place dans les bagages.
Dans le même ordre d’idée, un sac d’école est suffisamment lourd sans en plus s’encombrer d’un ordinateur portable qui pèse plusieurs kilos qu’il faudra charger au bout d’une heure. L’iPad sera remercié par bien des colonnes vertébrales ! Il ne prend pas plus de place qu’un cahier et pèse environ 700g.
Bon, c’est un outil de travail sympa… et les gamers sont encore oubliés !
Et bien non !
Les graphismes 3D sont somptueux et l’expérience de jeux unique grâce à une immersion totale.
Tout d’abord, grâce à l’accéléromètre, vous pouvez par exemple pencher votre iPad pour tourner dans les virages : sensations assurées !
C’est notamment le cas dans Need For Speed, qui se sert également du multi-touch afin d’améliorer les contrôles du joueur. (boîte de vitesse, rétroviseur)
Le génialissime NOVA a également été revu afin de s’adapter à ce nouveau support : on peut par exemple ouvrir une porte en tournant le loquet avec 3 doigts, comme dans la vraie vie !
Et bien entendu le jeu en réseau sera de la partie, notamment via Bluetooth ou WiFi, à l’instar de ce que l’on retrouve sur iPhone.
Parlons-en de l’iPhone : que deviennent mes applications achetées sur l’App Store ?
Et bien justement, Apple a pensé à tout. Vous pouvez utiliser vos applications iPhone sur iPad, soit en dimensions normales, soit en doublant la taille des pixels.
Il est également prévu de pouvoir fournir à terme des applications universelles, à la fois adaptées à l’iPhone et à l’iPad, sans dégradation de la qualité.
Et la presse électronique, c’est pour quand ?
La véritable presse électronique arrive enfin !
Si vous aussi vous avez cru à une mauvaise blague en voyant débarquer le Kindle d’Amazon (un lecteur noir et blanc, tout plastique,… XXème siècle) vous allez adorer l’iPad.
- une librairie en ligne : iBooks Store
- une interface simple et agréable
- des animations 3D
- de la vidéo
- du contenu interactif
- accessible (grossissement du pas de caractères, changement de police)
Enfin un eBook aussi confortable qu’un véritable livre ! 
Et dans la vie de tous les jours, concrètement ?
Les exemples d’utilisation sont nombreux :
- regarder des photos en famille sans sortir l’artillerie lourde
- consulter ses emails dans son canapé
- aller sur Facebook avant de dormir, après avoir lu quelques pages d’un livre électronique
- surfer sur le net pendant une réunion, l’iPad caché dans un dossier (au moins 50% des lecteurs en meurent d’envie, soyons francs !)
- préparer ses diapos dans le train sans encombrer le voisin d’en face
- permettre aux enfants de voir un film pendant un long trajet en voiture
- regarder la TV numérique dans n’importe quelle pièce de la maison (Orange ou SFR TV)
- faire une partie de jeux en réseaux entre 2 cours
- prendre des notes que l’on n’aura pas à recopier ensuite
- dessiner
- lire des livres en vacances sans encombrer la valise
- faire la présentation des derniers produits de la société à un client
- lire un livre de recette dans la cuisine, avec les caractères ECRIS EN GROS
- … et tout ce qui reste à inventer par les développeurs !
Il y a des accessoires au moins ?
Clavier physique, dock, housse de protection qui fait également office de support, et…
J’oubliais ! Il y a possibilité d’utiliser une sortie vidéo externe pour utiliser les vidéo-projecteurs par exemple !
En terme de réseau, ça donne quoi ?
Du WiFi N pour de meilleurs performances et un emplacement SIM en option pour la 3G !
Et comme une bonne nouvelle ne vient jamais seule, ils ont même prévu du partage de fichiers.
Niveau prix, on annonçait du 999 $ : encore un gouffre financier !
Et bien il n’en n’est rien !
Décliné en 3 versions 16 Go, 32 Go et 64 Go pour un prix allant de 499 $ à 699 $. Comptez 130 $ de plus pour l’option 3G. (aucun tarif annoncé en Europe pour la 3G, mais entre 15 et 30 $ par mois au lieu d’environ 60 $ sans engagement aux USA)
A titre de comparaison, le lecteur de eBook Kindle DX d’Amazon (le truc en noir et blanc) coûte 489 $ !
Une date de sortie ?
Il sortira très certainement en mars 2010 pour la version WiFi et en juin 2010 pour la version WiFi + 3G.
Je veux de la vraie démo
La présentation intégrale est disponible sur le site d’Apple.
Et Kaeli Soft dans tout ça ?
Kaeli Soft ? Nous avons déjà conçu nos premiers programmes de tests : nous serons sur le marché dès sa sortie !
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
Afin de répondre à de nombreuses demandes, Kaeli Soft met a disposition une page présentant ses principales applications iPhone.
Voici le lien pour y accéder : Applications iPhone
Vous retrouverez également ce lien dans le menu principal du blog.
Si vous souhaitez vous aussi avoir votre propre application, n’hésitez pas à nous laisser un message via le formulaire de Contact.
A bientôt !
(et merci à Jérémie pour son travail de recensement ^^)
Quand vous utilisez UIImagePickerController pour prendre une photo avec l’iPhone depuis la bibliothèque ou bien l’appareil photo, il vous est possible d’éditer cette dernière grâce à l’option setAllowsEditing.
Cela se présente donc comme ceci :
if (imagePickerController == nil) { imagePickerController = [[UIImagePickerController alloc] init]; [imagePickerController setDelegate:self]; [imagePickerController setSourceType:UIImagePickerControllerSourceTypeCamera]; [imagePickerController setAllowsEditing:YES]; } [self presentModalViewController:imagePickerController animated:YES];
Jusqu’ici, pas de problème.
Seulement, c’est après que les problèmes arrives. Vous récupérez votre image via
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info { [...] }
Et vous vous rendez compte que l’image originale correspond à la capacité de l’appareil (3Mpx pour le 3GS) mais pas l‘image éditée qui est elle en 320×320 !!!
La méthode à utiliser est donc la suivante :
- récupérer l’image originale
- la mettre à l’endroit, car c’est à l’endroit qu’est créé le repère de découpe
- utiliser le repère pour découper l’image
- redimensionner l’image découpée aux dimensions souhaitées
Et voilà, vous avez votre belle image bien découpée et de bonne qualité !
Et si vous voulez annuler, voici le code (merci Laurent) :
- (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker { //Cancel [[picker parentViewController] dismissModalViewControllerAnimated:YES]; }
Vous trouverez un projet d’exemple ci-dessous.
Télécharger le projet XCode d’exemple
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.
Tous d’abord, au nom de l’équipe Kaeli Soft, merci à tous pour vos messages d’encouragement et de félicitations.
Vous avez été nombreux à regarder le reportage de France 3 Poitou-Charentes sur l’activité de Kaeli Soft. La société est en effet spécialisée, pour ceux qui ne le savaient pas, dans la création d’applications iPhone.
Le reportage a été tourné dans les bureaux de Niort.
Vous pouvez donc retrouver Kaeli Soft sur iTunes.
Parmi les applications présentées, vous trouverez :
- EasyBAC (test d’alcoolémie, 0,79 €, gratuit en version lite)
- jecoconduis (émissions de CO2 et taxe carbone, gratuit)
- Histoire de France (0,79 €)
