Archives du tag: Web

iPad iPhone Kaeli Soft Mac OS X

iPad : une nouvelle étape vers l’informatique « humaine » ?

Beaucoup de questions nous ont été posées sur l’iPad ces derniers temps. En effet, cet objet intrigue. Nous allons donc tâcher de répondre à certaines questions.

Un premier pas avec l’iPhone

Aujourd’hui, c’est un fait : tout le monde est séduit par l’iPhone. Les ventes explosent. Les utilisateurs migrent en masse des systèmes BlackBerry et Nokia vers la marque à la pomme. Bref, c’est un véritable succès.

Mais quelle est l’origine de son succès :

  • le prix ? à 600 euros l’appareil, tout le monde s’accordait sur le luxe de l’objet à sa sortie
  • les performances techniques ? tous les processeurs d’appareils mobiles sorties à ce jour se sont basé sur des composants identiques, ou presque

Il semblerait que son origine soit plutôt ce qui le différencie des autres :

  • sa simplicité d’utilisation
  • la richesse de l’AppStore (richesse également qualitative, du fait de la validation du contenu)

En clair, Apple a fait comme les autres, mais en mieux. Et c’est là qu’est la véritable différence : des interfaces simples, conviviales, à échelle humaine. Le lien qui unie l’homme à son outil se ressert, en effaçant magnifiquement la barrière technique.

Donc l’iPad est un gros iPhone ?

Tout comme un match de tennis n’est pas un match de ping-pong où les joueurs sont sur la table, l’iPad n’est pas un gros iPhone ni un gros iPod Touch. Beaucoup de choses changent et d’autres sont malgré tout liées.

La première différence est l’usage : imaginez-vous téléphoner avec un iPad à l’oreille. De même, essayez de réaliser une présentation sur un iPhone, la tâche risque d’être rude…

La taille est également un point de différence : si l’iPhone est un appareil mobile, l’iPad est un appareil nomade. L’iPhone a un usage strictement personnel. l’iPad a lui, de par sa taille, une capacité d’ouverture à l’environnement.

… alors c’est un MacBook, mais en plus petit ?

Ce n’est pas un MacBook non plus :

  • les applications iPad démarrent instantanément
  • l’ensemble de la plateforme iPad repose sur une base iPhone OS, optimisée pour un usage tactile
  • un MacBook peut effectuer des tâches plus complexes, et de manière simultanée, correspondant à un usage plus intensif
  • du fait de la différence d’usage et de matériel, les applications pour ordinateur sont très différentes des applications iPad

Ni un ordinateur, ni un appareil mobile ???

En effet, l’iPad est un appareil à mi-chemin entre les deux.

Le maillon manquant

Prenons un exemple concret : les réseaux sociaux. La plupart d’entre nous adorons visiter Facebook, Twitter et autres.

Au travail, ou à la maison quand on fait les comptes par exemple, on aime bien avoir une petite fenêtre qui apparaît ponctuellement histoire de nous lier au reste du monde. Dans un tel cadre d’activité informatique pure, l’outil est tout à fait approprié.

Dans les transports en commun ou dans la rue, on apprécie également de pouvoir être liés à notre vie virtuelle, pour partager par exemple une photo ou une vidéo de l’instant présent avec ceux qui ne peuvent être là. On sort alors instantanément le compagnon de poche et il fait le lien, aussi rapidement qu’il le défait.

Mais il y a ces moments, où l’appareil mobile est trop petit pour un usage plus immersif et l’ordinateur est trop encombrant (et trop lourd d’usage). On veut par exemple partager entre amis ou en famille des photos trouvées sur les réseaux sociaux pour rester dans le même exemple.

Ce genre de situation est souvent problématique pour beaucoup d’entre nous. Qui ne s’est jamais trouvé dans une situation comme celles-ci :

  • l’ordinateur encombrant pour regarder un film dans le train (même un netbook devient vite pénible du fait de son clavier)
  • le casse-tête pour regarder 3 photos en famille
  • l’ordinateur trop long à charger pour présenter un produit à un client
  • les démonstrations techniques plantées à cause d’une mauvaise version d’un logiciel quelconque
  • les recettes de cuisine sur internet, illisibles sur un mobile et impossibles à positionner avec un ordinateur
  • le programme TV en ligne, petit (et très personnel) sur iPhone et trop encombrant (avec le câble qui passe entre les jambes) sur l’ordinateur
  • le « ha, si j’avais mon ordinateur, je regarderais sur wikipedia » quand on visite un monument

Une tablette tactile classique peut-elle suffire ?

L’idée est séduisante : de nombreux constructeurs ont d’ailleurs réalisé des tablettes tactiles. Techniquement, il n’y a rien de révolutionnaire.

Mais ce n’est pas la technique qui est en question. L’approche d’Apple a été inverse. Plutôt que se demander quels usages techniques pouvaient être réalisés par l’utilisateur, la question a été de savoir comment les tâches réalisées par les utilisateurs au quotidien pourraient être simplifiées grâce à la technique.

Le bug

C’est à ce stade que l’on se rend compte d’un bug qui atteint la majorité des systèmes informatiques.

C’est à l’outil informatique de s’adapter à l’homme, et non l’inverse.

Le renouveau de l’informatique

Jusqu’à aujourd’hui, les utilisateurs d’outils informatiques devaient être technicien pour comprendre leurs outils.

Et c’est bien une aberration : comment peut-on gagner du temps / de la facilité avec un outil qui n’est pas adapté à notre activité ?

Le monde Apple tourne en effet autour de cette philosophie. Mac OS X se veut simple et efficace par définition. Mais le marché en a voulu autrement. Mais le PC fait partie de la culture informatique.

Cependant, le mobile est un marché relativement nouveau. Et l’iPhone a jeté un pavé dans la mare en proposant un outil relativement simple d’utilisation tout en s’avérant aussi efficace que ses concurrents.

Et c’est grâce à cette philosophie de simplicité et d’efficacité que l’iPad va pouvoir combler la plupart des lacunes de l’informatique. L’iPad est la seule tablette qui se veut à la fois esthétique, simple d’utilisation, efficace et relativement abordable.

Le début d’une grande aventure

Si l’iPhone a véritablement marqué l’informatique mobile, l’iPad va s’occuper de l’informatique mobile. Le lien entre les deux est véritablement réduit. En effet, comme l’a relativement bien présenté S. Jobs, une application conçue pour fonctionner sur iPhone pourra également fonctionner sur iPad.

La plupart du temps, Internet fait le lien entre les deux : les réseaux sociaux en sont le parfait exemple. Mais c’est également le cas pour les mails, les documents partagés, les messageries instantanées. Tout ceci est maintenant dématérialisé.

Mais il y a encore une limite à franchir : le lien entre l’iPhone OS (iPhone / iPad) et Mac OS X. Mais cette limite est très mince. La base technique de l’iPhone OS est en effet la même que Mac OS X. Les applications iPhone / iPad seront-elles un jour compatible Mac OS X ? L’avenir nous le dira.

Kaeli Soft : une porte ouverte vers ce nouveau monde

C’est dans cet esprit d’informatique à échelle humaine que fonctionne la société Kaeli Soft. Nous ne faisons pas des outils pour des techniciens mais pour des Hommes.

Aujourd’hui, notre compétence technique, validée par plusieurs succès dont nous garderons la discrétion, nous permet de vous offrir le meilleur de l’informatique d’aujourd’hui et de demain. Nous travaillons dans un soucis d’efficacité et de clarté technique afin d’offrir des prestations reposants sur de solides socles techniques.

Nos compétences sont bien sûr orientées vers la plateforme iPhone OS (iPhone, iPod Touch, iPad) nous permettant d’assurer une conception optimale.

Nous orientons également notre travail afin de fournir des solutions aussi simples à maintenir qu’efficaces à l’usage.

Afin d’être assurés d’obtenir les meilleurs résultats, Kaeli Soft est axée sur 3 pôles de compétence principaux :

  • services web
  • développement iPhone
  • ergonomie des système

Nos prestataires internes et externes proposent le meilleur de leurs compétences en matière de :

  • conception
  • production
  • recherche et développement

De plus, la structure Kaeli Soft, soucieuse d’offrir un soin tout particulier à l’aspect visuel et l’ergonomie des produits de ses clients, travaille en partenariat avec des graphistes et ergonomistes professionnels.

Vous pouvez nous contacter par mail ou via le formulaire prévu à cet effet.

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