Archives du tag: html

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