Author Archives: admin

Outils de mots-clefs SEO

Posted on by
Reply

Vers une meilleure réflexion SEO

Un développeur Web freelance peut travailler pour divers clients (associations, entreprises,…) dans beaucoup de domaines différents : coiffeurs, architectes, écoles,…

Maîtriser les outils SEO fait partie des compétences du développeur. Et son client pourrait ne pas être au courant des tendances de mots-clefs sur le Web. Son site peut être indexé par les moteurs de recherche comme Google mais peut être dificile à trouver à partir de certains mots-clefs (parce que listé trop loin des 10 premiers résultats) sans une réflexion profonde en termes de SEO.

Cet article vous montrera quelques outils SEO gratuits de base qui peuvent être utilisés pour préparer une meilleure indexation et un meilleur positionnement dans les moteurs de recherche.

Avant de commencer

Jetons un oeil à Google Analytics. Votre site Web est visité via 3 sources de trafic :

Google Analytics : traffic sources

  • Les moteurs de recherche : un internaute fait une recherche par mots-clefs et clique sur votre site listé dans les résultats du moteur
  • Accès directs : un internaute tape votre url (http://www.domaine.com) dans le champ url de son navigateur
  • Sites référents : un internaute visite un site qui affiche un lien vers votre site

Ce qui m’intéresse pour cet article est comment on peut guider les internautes vers notre site via les moteurs de recherche. En effet :

  • le nombre d’accès directs pourra être augmenté quand votre visibilité sur le web et dans le monde réel s’améliorera (grâce à la publicité, par exemple)
  • et le nombre de sites référents augmentera dès que d’autres Webmasters afficheront un lien vers votre site sur le leur. Vous devrez pour cela les contacter et les convain’ils ont un intérêt à le faire.

Quels mots-clefs choisir pour mon site Web?

La recherche de mots-clefs que vous ferez ne vous fournira pas une liste de mots-clefs à placer dans un meta tag “keywords” à l’intérieur de la head de votre document Html puisque Google n’utilise pas le meta tag keyword dans l’indexation. Google utilise plutôt l’url de la page, les balises titre et description et, bien entendu, le contenu de la page. Le contenu d ela page Html deviendra une source de contenu encore plus importante pour Google puisque l’Html évolue vers l’Html5 avec des balises sémantiques comme <header>, <nav>, <article>, <section>, <aside>, <footer>,…

Améliorer les visites sur votre site via les moteurs de recherche implique :

  • l’applications de réflexes SEO sur votre site (réécriture d’url et gestion des redirections, fil d’ariane, balises titre et description dynamiques, contenu en relation avec les mots-clefs,…)
  • et une réflexion sur les mots-clefs, ces mêmes mots-clefs que les internautes sont supposer utiliser dans un moteur de recherche pour atteindre votre site Web.

Le client du développeur Web peut être très habile dans son domaine professionnel, mais peut ne pas savoir quels mots-clefs les internautes sont susceptibles de taper dans un moteur de recherche concernant son domaine d’activité. Il existe quelques outils qui permettent de faire ces recherches à la place du client.

Google Adwords

Google Adwords est un outil commercial de Google qui vous permet de choisir une liste de mots-clefs qui feront afficher une publicité de votre site au dessus des résultats de recherche. Cet outil peut s’avérer assez cher, tout dépend des mots-clefs que vous choisissez.

Mais Google Adwords offre aussi un générateur de mots-clefs. Imaginez que l’on doive développer le site d’un architecte avec descriptions des maisons qu’il a construites, des rénovations, des conseils en construction,…

Google adwords keywords tool and generatorTapez une liste de mots-clefs (un par ligne), l’url de votre site web, le pays et la langue dans laquelle vous désirez que la recherche s’effectue.

mots-clefs : architecte tournai, maison, construction, rénovation

pays : Belgique

langue : Français

Google produira une liste de mots-clefs à partir des mots que vous avez saisis et des mots-clefs associés que les internautes ont tapé dans Google. Ceci augmentera certainement votre liste de mots-clefs. Google affiche également les tendances de recherche sur une ligne du temps et la quantité de recherches mensuelles sur chaque mot-clef. Ainsi, vous connaîtrez les mots-clefs pertinents dans le domaine d’activité de votre client et n’aurez plus qu’à faire afficher ces mots-clefs aux endroits stratégiques SEO de vos pages Web.

Notez encore que la liste de mots-clefs que Google Adwords vous a donnée est la liste de mots-clefs via lesquels les concurrents de votre client ont été rankés ;)

Google Adwords keywords tool results

Google Insights – Tendances de recherche

Avec Google Tendances de recherche, vous pouvez aussi affiner la recherche de mots-clefs pour votre site et vérifier les logs de Google pour connaître la fréquence de recherche de vos mots-clefs en Belgique ces dernières années, par exemple :

Google Trends

J’ai fait une recherche sur 4 mots-clefs en Belgique : architecte Tournai, maison, construction, rénovation : chaque mot-clef sera identifié avec une couleur distincte et les statistiques apparaîtront sous la forme suivante :

Google Trends results

Google trends donne aussi la fréquence de recherche par mot-clef dans chaque sous-région géographique.

CuteRank – Position de votre site dans les moteurs de recherche

Si vous voulez vérifier comment les pages de votre site se positionnent dans une recherche Google, téléchargez CuteRank. Ils disposent d”une version gratuite en téléchargement.

Une fois installé, ajoutez un profil, c’est-à-dire l’url de votre site Web et les mots-clefs à vérifier. Choisissez les moteurs que vous désirez puis lancez l’analyse: si vous avez sélectionné les mots-clefs intelligemment (ceux que les internautes sont supposés utiliser) et que les résultats sont affichés en vert, votre site web apparaît dans la première page des résultats. Si ce n’est pas le cas, vous devrez vérifier vos contenus et votre stratégie SEO pour améliorer votre ranking :

Cuterank : a tool to check your website's keyword positions in search engines

Webliographie

Google n’utilise pas le meta tag keywords meta tag dans l’indexation des pages Web

Preview of HTML5

Google Adwords Keyword Tool

Google Trends

CuteRank – tool to check your website’s keyword position in search engines

SEO Keyword tools

Posted on by
Reply

Better SEO thinking

A freelance Web developer may be asked to develop websites for diverse customers (charities, companies,…) in many fields : hairdressers, architects, schools,…

Being aware of SEO is part of the web developer’s skills. And the customer may not always be aware of the keywords trends on the Web. His website may be indexed by search engines like Google but can hardly be found (because listed too far from Google’s first 10 results) if no SEO thinking has taken place.

This post will show you the basic free SEO tools that can be used to prepare a website’s better indexation and ranking by search engines.

Before starting

Just take a look at Google Analytics. Your website gets hit thanks to three traffic sources :

Google Analytics : traffic sources

  • Search engines : a web surfer types keywords and clicks on your website listed in the search engine’s results
  • Direct traffic : a web surfer types your url (http://www.domain.com) in the url field of his browser
  • Referers : a web surfer visits a website that provides a link to your website

What interests me in this post is how we can drive surfers from search engines. Indeed :

  • direct traffic will improve when your visibility on the web and in the real world improves (thanks to advertising, for example)
  • and the number of referers will rise if other websites’ webmasters provide a link to your site. Therefore, you’ll need to convince them that your site is worth linking.

What keywords for my website

The keyword search you need to make will not provide a set of keywords to be placed in a meta tag “keywords” inside the head of your html document since Google does not use the keywords meta tag in web ranking. Google rather uses the page url, title and description tag and, of course, the page content. The page Html content itself may soon become a rich content source for Google since HTML is evolving to HTML5 with new content-related tags like <header>, <nav>, <article>, <section>, <aside>, <footer>,…

Improving the search engines hits implies

  • applying accurate SEO tips to your site (url rewriting and redirection handling, breadcrumb trails, dynamic title tags and description tags, accurate content,…)
  • and a thorough work on keywords, these very keywords the web surfer is supposed to type in a search engine

The Web developer’s customer may be skillful in his own field, but may not know exactly what keywords net surfers will type in a search engine to reach his own website. There are a few tools that can be used to get to know these keywords.

Google Adwords

Google Adwords is a commercial tool by Google that lets you choose keywords that will display an ad of your website on top of Google search results. This tool can be expensive, depending on the keywords you choose.

But Google Adwords also provides a Keyword Generator . Imagine we’re building an architect’s website with descriptions of the houses he built, renovations, building tips,…

Google adwords keywords tool and generatorHere you can type a list of keywords (one per line), your website url. Then you can select the country and language you’re looking for.

keywords : architecte tournai, maison, construction, rénovation

country : Belgium

language : French

Google will provide you with a list of keywords suggested from the list you typed and from what web surfers type in Google, which will accurately extend your keyword list. Google also provides searches trends with a timeline and the amount of monthly searches. So you know what keywords are relevant in the field and must be inserted in the SEO areas of your website.

The list of keywords provided by Google Adwords are the keywords your competing websites have ranked with ;) :

Google Adwords keywords tool results

Google Insights – Trends

With Google Trends, you can also improve your website keyword search and check Google logs to know how often web surfers have used your keywords on Google in Belgium in the last few years :

Google Trends

I’ve tried to look for 4 different keywords in Belgium : architecte Tournai, maison, construction, rénovation : each keyword gets its own colour and the statistics are shown as follows :

Google Trends results

Google trends also gives you the frequency of searches per keyword in each sub-region.

CuteRank – A keyword Google ranking tool

If you want to check how well your website is displayed in a Google search, just download CuteRank. They’ve got a free version available for download.

Once installed, just add a profile, i.e. your website url and the keywords your want to check, choose the search engines you want CuteRank to check. Then launch the analysis : if you’ve chosen the keywords wisely (the ones web surfers are supposed to type) and everything’s green, you’re on top of it : your website appears in the first page results. If not, you’ll have to check your content and SEO strategy to improve ranking :

Cuterank : a tool to check your website's keyword positions in search engines

Webliography

Google does not use keywords meta tag in web ranking

Preview of HTML5

Google Adwords Keyword Tool

Google Trends

CuteRank – tool to check your website’s keyword position in search engines

De Notepad2 à Aptana, IDE pour Développement PHP

Posted on by
Reply

Eureka!

Cette fois-ci; c’est la bonne.

J’avais pris l’habitude de scripter avec Notepad2, qui possède quelques outils basiques tels que la coloration syntaxique, la numérotation des lignes, mais pas beaucoup plus.

Aptana, IDE for Web developmentJ’étais donc à la recherche d’IDE PHP (Integrated Development Environment) mais n’étais pas parvenu à me décider. Cette fois c’est fait. Il s’appelle Aptana, une solution open source pour développer des applications web.

Basé sur Eclipse, vous trouverez des téléchargements d’Aptana pour Windows, MacOS et Linux. J’ai testé les versions 64 bits pour Windows et Linux.

Aptana peut être installé avec toute une série de plugins. Je me contenterai du plugin pour le développement PHP.

Vous le trouverez sans doute un peu poussif car il nécessite de grandes ressources mais fonctionne correctement sur Core i7 2.67 GHz avec 4Go Ram avec Opensuse 11.2, et est bien sûr moins efficace sous Asus EEEPC N10 (Atom N270 (1.6 GHz) avec 2Go Ram). C’est encore avec un MacBook Pro Core 2 Duo (4 Go Ram) qu’Aptana donne les meilleurs résultats de rapidité.

Depuis la version Aptana 2.0, il est devenu moins aisé de prérarer Apatana au développement PHP. En effet, les développeurs d’Aptana ont décidé d’implémenter le plugin Eclipse PDT (PHP Development Tools project) pour remplacer le plugin PHP qui était utilisé avec l’ancienne version Aptana 1.5. Le problème est que le plugin Aptana PHP plugin est bien mieux que le PDT, comme l’explique bram.us.

Télécharger et installer Aptana

Tout d’abord, téléchargez Aptana. J’ai choisi la version standalone. Une fois installée, allez dans le menu Help / Install new software et ajoutez une nouvelle source (http://update.aptana.com/install/php) et suivez l’assistant d’installation d’Aptana PHP 1.1 Developement Environment.

Configurer Aptana et le PHP plugin

Menu Window / Showview ouvrira diverses fenêtres : gestionnaire de fichier, propriétés,…

Menu Window / Preferences / General vous permet de choisir le simple ou le double clic pour ouvrir un fichier.

Menu Window / Preferences / General / Editors / File Associations devrait afficher les fichiers *.php associés à l’Aptana PHP Editor par défaut.

Menu Window / Preferences / General / Editors / Text Editors permet de faire afficher les numéros de ligne.

aptana Create new PHP projectPour créer un nouveau projet PHP, affichez le menu Window / Showview / File et faites un clic droit sur “Projects” pour afficher le menu contextuel. Ensuite, choisissez New / Project / Web / PHP Project. Insérez un nom de projet et le répertoire source si pertinent.

Aptana PHP

Ce qui est puissant dans Aptana par rapport à un éditeur basique comme Notepad2 est que :

  • Aptana offre une validation du code en temps réel
  • Il dispose d’un outil Code Assist
  • et d’autres Code preview…

Changer le Workspace

Si vous désirez changer lespace de travail par défaut et stocker vos projets Aptana sur une autre partition que la partition C: définie par défaut, sélectionnez le Menu File / Switch Workspace / Other… et identifiez votre partition de travail…

Afficher les fichiers .htaccess

Par défaut, les fichiers .htaccess files ne s’afficheront pas dans la Vue File. Pour pouvoir les aficher et les modifier, cliquez sur la flèche liste déroulante de la Vue File et sélectionnez “Customize View” puis décochez le filtre .* files :

View .htaccess files in AptanaView .htaccess files in Aptana

Empêcher Aptana de créer un fichier index.php

Quand vous créez un nouveau projet avec Aptana configuré tel qu’expliqué ci-dessus, il essaie de créer un fichier index.php qui contient la ligne de code pour afficher le phpinfo();

Si vous voulez empêcher Aptana de créer ce fichier par défaut, ouvrez le Menu Window / Preferences / Aptana / Editors / PHP et décochez “create project file in new PHP Project”.

Webliography

Aptana Studio 2

Installer Aptana PHP plutôt que le plugin Eclipse PDT

From Notepad2 to Aptana, IDE for PHP Dev

Posted on by
Reply

This time I’ve found it!

I used to script with notepad2, which features a basic color syntaxing and line numbering, but not more!

Aptana, IDE for Web development

I’ve looked for PHP IDEs (Integrated Development Environment) for a while but had never made a choice. This time, I’m ready to move to the one I’ve tested : It’s called Aptana, an open source solution to build web applications.

Based on Eclipse, you’ll find Aptana downloads for Windows, MacOS and Linux. I’ve tested Linux and Windows 64bits versions.

Aptana offers many plugins for developement. I’ll stick to PHP development.

Some may find it too resource-hungry but it works fine on Core i7 2.67 GHz with 4Go Ram memory with Opensuse 11.2, and is a bit less efficient on Asus EEEPC N10 (Atom N270 (1.6 GHz) with 2Go Ram memory). Aptana seems to be working quickly on MacBookPro Core2 Duo (4Go Ram).

Since Aptana 2.0, things seem to have become a bit less easier for PHP Web developers. Indeed, Aptana developers have decided to implement the Eclipse PDT plugin (PHP Development Tools project) to replace the Aptana PHP plugin that was used with older Aptana 1.5. The problem is the Aptana PHP plugin is much better than the PDT, as stated on bram.us.

Download and install Aptana

First download Aptana. I’ve chosen the standalone version. Once installed, go to Menu Help / Install new software and add a new source (http://update.aptana.com/install/php) and follow the wizard to install Aptana PHP 1.1 Developement Environment.

Configure Aptana and PHP plugin

Menu Window / Showview will open different kinds windows : file manager, properties,…

Menu Window / Preferences / General lets you choose between single or double click to open a file.

Menu Window / Preferences / General / Editors / File Associations should display *.php files associated with Aptana PHP Editor set as default.

Menu Window / Preferences / General / Editors / Text Editors lets you display line numbers.

Aptana create new project

In order to create a new project, display the Menu Window / Showview / File and right-click on “Projects” to display the context menu. Then Choose New / Project / Web / PHP Project. You’ll be asked a Project name and the source directory.

Aptana PHP

What is most powerful when you compare a simple editor as Notepad2 with Aptana is:

  • it provides real-time code validation
  • code Assist
  • Code preview…
  • Switching workspace

Then you may want to switch workspace and have your Apatana projects stored on another partition than the default C: partition. So, select Menu File / Switch Workspace / Other… and select your workspace partition…

Displaying .htaccess files

By default, .htaccess files won’t show in the File View. In order to be able to view them and modify them, click on the dropdown arrow of the File View then select “Customize View” and untick the .* files option :

View .htaccess files in AptanaView .htaccess files in Aptana

Prevent Aptana from creating index.php file

When you create a new project with Aptana configured the way it is above, it attempts to create an index.php file to display the phpinfo();

If you want to get rid of this, simply open Menu Window / Preferences / Aptana / Editors / PHP and untick “create project file in new PHP Project”.

Webliography :

Aptana Studio 2

Install Aptana PHP rather than the Eclipse PDT plugin

JQuery pour masquer ou afficher des champs de formulaires

Posted on by
8

JQueryJQuery est un framework Javascript qui a révolutionné la manière dont ont peut générer des événements côté client. L’interaction entre Javascript et HTML est devenue beaucoup plus aisée et standardisée grâce à JQuery.

Dans cet article, je montre comment gérer l’affichage de champs de formulaire grâce à JQuery.

La clef de JQuery réside dans la balise <head> de votre document. JQuery.js est un fichier javascript qui contient les fonctions principales. J’en ai téléchargé la version allégée (72 Ko) à partir de JQuery.com

<script type=”text/javascript” src=”./js/jquery-1.4.2.min.js”></script>

La liste déroulante (select) fait afficher des champs de formulaire

Mon premier exercice est de laisser JQuery afficher des champs de formulaire si une valeur particulière d’un champ liste déroulante est sélectionnée.

Voici mon formulaire HTML avec 3 éléments : 2 listes déroulantes (id = type et id = choix) et un textarea (id = text) :

<form>
<select id=”type”><option>choix de type</option><option value=”1″>type 1</option><option value=”2″>type 2</option><option value=”3″>type 3</option></select><br />
<select id=”choix”><option>choix</option><option value=”1″>choix 1</option><option value=”2″>choix 2</option><option value=”3″>choix 3</option></select><br />
<textarea id=”text”></textarea>
</form>

L’affichage de cette page dans un navigateur affichera les 3 éléments (2 listes déroulantes et le champs textarea).

Mon objectif est d’afficher seulement la première liste déroulante (id = type) et de seulement afficher la seconde liste déroulante et le textarea si la troisième entrée de la première liste déroulante est sélectionnée.

Dans la <head> de mon document, j’ajoute un script qui commence avec la fonction $(document).ready(). Ceci vous permet de charger autant de fonctions que nécessaire dès que le DOM est chargé et avant que le contenu de votre page ait été chargé. Vous pourriez- enregistrer cette fonction à l’intérieur d’un fichier .js séparé et le pouvoir de JQuery est que vous n’aurez rien d’autre à ajouter au contenu HTML de votre document :

<script language=”javascript”>//<![CDATA[

$(document).ready(function() {

$("#choix").hide();

$("#text").hide();

$("#type").change(function() {

if ( $("#type").val() == "3"){

$("#choix").show();

$("#text").show();

}

else{

$("#choix").hide();

$("#text").hide();

}

});

if ( $("#type").val() == "3"){

$("#choix").show();

$("#text").show();

}

$("#choix").change(function() {

var val = $("#choix").val();

$("#text").append(val + "\n");

});

});

//]]></script>

Vous devriez aisément compendre ce que ce script fait : la liste déroulante “choix” et le champ textarea sont masqués par défaut. JQuery a accès aux éléments de formulaire grâce à leur id (#choix, par exemple). Si la valeur de la liste déroulante “type” est 3, les autres éléments du formulaire seront affichés, sinon, ils seront masqués. Puis si lma valeur de la liste déroulante “choix” change, sa valeur sera ajoutée au contenu du champ textarea.

La case à cocher (checkbox) fait afficher des champs de formulaire

 

Mon second exercice est de laisser JQuery identifier si une case à cocher (checkbox) est cochée pour faire afficher ou masquer des champs de formulaire.

J’ajoute un champ checkbox à mon formulaire HTML :

 

<form>
<input type=”checkbox” id=”check” />
<select id=”type”><option>choose a type</option><option value=”1″>type 1</option><option value=”2″>type 2</option><option value=”3″>type 3</option></select><br />
<select id=”choice”><option>choice</option><option value=”1″>choice 1</option><option value=”2″>choice 2</option><option value=”3″>choice 3</option></select><br />
<textarea id=”text”></textarea>
</form>

Puis je modifie le script de ma balise <head> pour identifier si la case a été cochée ou non :

<script language=”javascript”>//<![CDATA[

$(document).ready(function() {

$("#choix").hide();

$("#text").hide();

$("#type").change(function() {

if ( $("#type").val() == "3"){

$("#choix").show();

$("#text").show();

}

else{

$("#choix").hide();

$("#text").hide();

}

});

if ( $("#type").val() == "3"){

$("#choix").show();

$("#text").show();

}

$("#check").change(function() {

if($("#check").attr("checked")) {

$("#choix").show();

$("#text").show();

}

else{

$("#choix").hide();

$("#text").hide();

}

});

$("#choix").change(function() {

var val = $("#choix").val();

$("#text").append(val + "\n");

});

});

//]]></script>

Avec JQuery, vous pourrez aussi ajouter quelques effets à la “scriptaculous” avec ces actions show et hide :

$(“#choix”).show(“slow”);

affichera l’élément de formulaire lentement.

Vous pourriez aussi utiliser une valeur numérique :

$(“#choix”).hide(200);

Webliography :

JQuery.com

JQuery to show or hide form fields

Posted on by
1

JQueryJQuery is a javascript library that has revolutionized the way we can trigger client-side events. Having Javascript interact with HTML has become much easier and also more standard thanks to that framework.

In this post, I’ll tackle displaying form elements thanks to JQuery.

The key to JQuery lies in the <head> of your document. JQuery.js is a javascript file that contains the main functions. I’ve downloaded the minified version (72 Ko) from JQuery.com

<script type=”text/javascript” src=”./js/jquery-1.4.2.min.js”></script>

Display form fields on change select box value :

My first exercise is to let JQuery identify the select box value which is selected to display or hide extra form fields.

So, here’s my HTML form with 3 elements : 2 select boxes (id = type and id = choice) and a textarea (id = text) :

<form>
<select id=”type”><option>choose a type</option><option value=”1″>type 1</option><option value=”2″>type 2</option><option value=”3″>type 3</option></select><br />
<select id=”choice”><option>choice</option><option value=”1″>choice 1</option><option value=”2″>choice 2</option><option value=”3″>choice 3</option></select><br />
<textarea id=”text”></textarea>
</form>

Displaying such a form in a browser will display the 3 elements (2 select boxes and the textarea).

My objective is to show the first select box only (id = type) and to only display the second select box and the textarea if the third item of the first select box is selected.

So, in the <head> of my document, I’ll add a script that starts with the $(document).ready() function. This allows you to load as many functions as necessary as soon as the DOM is loaded and before the loading of the contents of your page. You could store this function inside a separate .js file and the power of JQuery is you won’t have to add anything to your HTML content :

<script language=”javascript”>//<![CDATA[

$(document).ready(function() {

$("#choice").hide();

$("#text").hide();

$("#type").change(function() {

if ( $("#type").val() == "3"){

$("#choice").show();

$("#text").show();

}

else{

$("#choice").hide();

$("#text").hide();

}

});

if ( $("#type").val() == "3"){

$("#choice").show();

$("#text").show();

}

$("#choice").change(function() {

var val = $("#choice").val();

$("#text").append(val + "\n");

});

});

//]]></script>

So you’ll easily guess what that script does : the “choice” select box and the textarea are set to hidden by default. JQuery here accesses the form element thanks to their id (#choice, for example). If the value of the “type” select box is set to 3, the other form elements are shown, if not, they’re hidden. Then if the value of the “choice” select box is changed, its value will be added to the textarea content.

 

Display form fields on change checkbox :

My second exercise is to let JQuery identify if a checkbox is ticked to display or hide form fields.

I’ll add a checkbox to my HTML form :

 

<form>
<input type=”checkbox” id=”check” />
<select id=”type”><option>choose a type</option><option value=”1″>type 1</option><option value=”2″>type 2</option><option value=”3″>type 3</option></select><br />
<select id=”choice”><option>choice</option><option value=”1″>choice 1</option><option value=”2″>choice 2</option><option value=”3″>choice 3</option></select><br />
<textarea id=”text”></textarea>
</form>

Next I’ll modify the script in my <head> tag to handle checkbox ticking (or not) :

<script language=”javascript”>//<![CDATA[

$(document).ready(function() {

$("#choice").hide();

$("#text").hide();

$("#type").change(function() {

if ( $("#type").val() == "3"){

$("#choice").show();

$("#text").show();

}

else{

$("#choice").hide();

$("#text").hide();

}

});

if ( $("#type").val() == "3"){

$("#choice").show();

$("#text").show();

}

$("#check").change(function() {

if($("#check").attr("checked")) {

$("#choice").show();

$("#text").show();

}

else{

$("#choice").hide();

$("#text").hide();

}

});

$("#choice").change(function() {

var val = $("#choice").val();

$("#text").append(val + "\n");

});

});

//]]></script>

With JQuery, you’ll also have some “scriptaculous” effects with show and hide actions :

$(“#choice”).show(“slow”);

will slowly display your form element.

You could also use a numeric value :

$(“#choice”).hide(200);

Webliography :

JQuery.com

JQuery event tracker pour Google Analytics

Posted on by
Reply

Google Analytics est l’outil statistique par excellence pour comptabiliser les hits sur votre site. Il vous donne des statistiques à propos de vos visiteurs, à propos des sources de trafic vers votre site et à propos des pages vues.

Ces outils sont assez utiles si vous désirez des informations sur qui vient visiter votre site et quelles pages sont les plus visitées.

Un autre outil est le suivi des événements (event tracker) qui est accessible par le menu Contenu / Suivi des événements.

Code de suivi asynchrone

Pour finaliser votre compte Google Analytics, vous devez copier-coller un bout de code de suivi donné par GA (à coller juste avant la balise </body> de vos pages).

Google Analytics suggère que vous ne copiez pas ce code de suivi à placer à la fin de vos pages, mais de le remplacer par un code de suivi asynchrone à coller dans la <head> de votre document :

<script type=”text/javascript”>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

Il vous faudra bien entendu remplacer le account ID (UA-XXXXX-X) par le vôtre.

Ce bout de code fonctionnera aussi bien que l’ancien code de suivi et n’attendra pas que la fin de la page soit chargée pour s’exécuter puisqu’il se trouve dans la <head> de votre document.

Pour suivre les événements sur votre page, disons des clics sur des liens, j’ai ajouté une fonction à ce script :

 

<script type=”text/javascript”>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();

 

function trackClick(text,link,title) {
_gaq.push(['_trackEvent',text,link,title]);
};
</script>

Cette fonction trackClick enverra des informations à l’outil de suivi des événements de Google Analytics. Les attributs passés à cette fontion sont :

  • une categorie : le texte du lien
  • une action : l’adresse du lien
  • un libellé : l’attribut titre du lien

Donc, si ma page contient un lien comme celui-ci :

<a href=”./produits.php” title=”Choisissez un de nos produits”>Nos produits</a>

le script enverra les informations suivantes à GA si le lien est cliqué :

  • une categorie : Nos produits
  • une action : ./produits.php
  • un libellé : Choisissez un de nos produits

Pour que ces données soient envoyées à GA, j’utiliserai JQuery. Donc je devrai tout d’abord télécharger jquery.js, l’uploader sur mon serveur Web et ajouter la ligne suivante à la <head> de mon document :

<script type=”text/javascript” src=”jquery.js”></script>

Puis j’ajouterai un autre script qui lancera ma fonction trackClick quand un lien est cliqué :
<script type=”text/javascript”>
$(document).ready(function(){
$(‘a’).click(function(){
var eventCategory = $(this).attr(‘title’);
var trackURL = $(this).attr(‘href’);
var text = $(this).text();
trackClick(text,trackURL,eventCategory);
});
});
</script>

Vous devrez attendre un moment avant que Google Analytics n’affiche des événements, mais une fois fait, vous pourriez voir les résultats suivants :

Event tracking Google Analytics

Vous pouvez parcourir vos données par catégorie, par action et par libellé.

Webliography

Google’s Event Tracking Guide

Asynchronous Tracking

JQuery event tracker for Google Analytics

Posted on by
Reply

Google Analytics is the ultimate tool if you want to get some trustworthy statistics about the hits on your website. It will easily give you statistics about your visitors, about the sources of traffic to your site and about pageviews.

This is fairly useful if you want general information about who comes to your site and what pages are viewed most.

Another useful tool is the event tracker which is accessible under Menu Content / Event Tracker.

Asynchronous Tracking

In order to finalize your Google Analytics Account, you need to copy-paste Google tracking code snippet to the bottom of your pages (just before the </body> tag).

Google Analytics suggests you erase that code at the end of your page and replace it by an asynchronous tracking code to be pasted in the <head> of your document :

<script type=”text/javascript”>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

You’ll have to replace the account ID (UA-XXXXX-X) by your own.

This code snippet will work as well as the old one and will not wait for the end of the script to be loaded since it’s in the <head> of the document.

In order to track events on your page, let’s say clicks on links, I’ll add a function to this script :

 

<script type=”text/javascript”>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();

 

function trackClick(text,link,title) {
_gaq.push(['_trackEvent',text,link,title]);
};
</script>

That trackClick function will send information to Google Analytics’s event tracker. The attributes that I pass are :

  • a category : the text of the link
  • an action : the link address
  • label : the title attribute of the link

So, if my page contains a link like :

<a href=”./products.php” title=”Choose one of our products”>Our products</a>

the script will send the following pieces of information if the link is clicked :

  • a category : Our products
  • an action : ./products.php
  • label : Choose one of our products

In order to do so, I’ll invoke JQuery. So first, I’ll have to download jquery.js, upload it to my web server and add the following to the <head> of my document to have JQuery work :

<script type=”text/javascript” src=”jquery.js”></script>

Then I’ll add another script that will trigger my trackClick function when a link is clicked :
<script type=”text/javascript”>
$(document).ready(function(){
$(‘a’).click(function(){
var eventCategory = $(this).attr(‘title’);
var trackURL = $(this).attr(‘href’);
var text = $(this).text();
trackClick(text,trackURL,eventCategory);
});
});
</script>

You’ll have to wait a while for Google Analytics to display your events but once it’s done, it can give you the following results :

Event tracking Google Analytics

You can browse the data per categories, per actions or per labels.

Webliography

Google’s Event Tracking Guide

Asynchronous Tracking

Code Igniter, un framework PHP

Posted on by
Reply

Choisir un Framework PHP pour développer des sites web peut vous faire gagner des efforts et du temps. Je ne désire pas écrire ici une liste exhaustive des avantages et inconvénients des différents frameworks PHP disponibles mais veut simplement mettre en évidence pourquoi je crois qu’ils valent la peine qu’on les essaie.

Dans mon cas personnel, le choix d’un framework PHP m’a aussi aidé à acquérir une meilleure pratique de programmation.

Code Igniter - PHP FrameworkKohana - PHP5 FrameworkZend Framework

Le framework avec lequel j’ai développé plusieurs projets Web est Code Igniter (v.1.7.2). J’ai aussi approché Kohana3 (pour le plaisir) parce que je cherchais un framework léger et PHP5 strict. Je n’ai pas approfondi Zend Framework parce qu’il m’a l’air un peu lourd et je cherche un système plus léger. Cela dit, produit développé par Zend Technologies Ltd., il est également une référence dans le domaine des Frameworks PHP.

Si vous ne vous êtes jamais frotté à un framework PHP et être prêt à jeter un oeil à oeil en quelques minutes, visionnez un des tutoriels vidéos officiels sur http://codeigniter.com/tutorials/ : absolument convaincant!

Au départ, j’étais assez frileux de choisir un framework et préférais coder mes propres scripts parce que je pensais qu’un framework me forcerais à utiliser une pratique de programmation que je pourrais regretter ultérieurement (utiliser des règles de programmation propres au framework, efficacité à long terme,…). Tel était mon état d’esprit avant d’en avoir essayé un.

Après ma première expérience avec Code Igniter, j’ai changé d’avis et pense désormais que les framework nous facilitent la vie. Et même si le framework que j’ai choisi n’était plus développé, je pourrais aisément en choisir un autre pour développer mes sites web sans devoir révolutionner ma pratique.

Selon moi, ce qui rend un framework crédible, efficace est :

  • un framework PHP5
  • une architecture MVC (Modèle-Vue-Contrôler)
  • un lot de helpers (scripts qui vous font gagner du temps car ils contiennent des classes pour gérer les urls ou les éléments de formulaire, par exemple)
  • la possibilité de scripter vos propres contrôleurs, vos propres bibliothèques de classes, vos propres helpers
  • une pratique bien documentée (off- et/ou online)
  • un système léger (donc au chargement rapide)

Tout est une question de puissance…

PHP5-powered

La puissance de framework PHP5 comme Kohana est qu’ils sont strictement OOP (Object Oriented Programming), signe d’une meilleure pratique de programmation. Code Igniter est partiellement écrit en PHP5 OOP, les helpers n’incluent pour l’instant que des fonctions PHP4.

MVC-powered

Une architecture MVC vous permet de structurer votre code : vos scripts PHP ne sont plus mêlés à votre HTML et vos requêtes MySql comme ils l’étaient dans des scripts faits maison sans framework. Dans une architecture MVC, vous pouvez définir des répertoires spécifiques qui contiendront vos classes de contrôleurs, vos classes de modèles et vos vues. Pratiquement parlant, une page Web appellera un contrôleur. Ce contrôleur peut définir des variables, appeler un modèle qui se connectera à la base de données pour en extraire des données, par exemple. Donc, le modèle exécute une requête MySql, obtient les données de la base de données et renvoie le résultat au contrôleur. Le contrôleur passera ensuite les résultats à la vue qui est comme un template HTML.

MY_Controller.php : écrire vos propres contrôleurs

Un Framework PHP vous laisse scripter vos propres contrôleurs. Dans Code Igniter, le contrôleur principal se trouve dans /system/libraries/Controller.php. Pour utiliser votre propre contrôleur, créez un fichier dans /system/application/libraries/MY_Controller.php. Ce fichier contient une classe MY_Controller qui étend le contrôleur principal :

<?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);
class MY_Controller extends Controller {
public function __construct() {
parent::__construct();
$this->load->helper(array(‘my_html’,'my_url’,'my_date’));
}
}
?>

Mon contrôleur personnel charge le constructeur du contrôleur principal puis charge quelques helpers. Ces helpeurs ne sont pas les helpers par défaut de Code Igniter qui se trouvent dans /system/helpers/ mais mes propres helpers réécrits : my_html_helper.php, my_url_helper.php et my_date_helper.php qui sont des copies des helpers originaux auxquels j’ai ajouté quelques fonctions personnelles.

Développer des sites Web avec Code Igniter m’a permis d’écrire des scripts très courts, faciles à mettre à jour et redoutablement efficaces.

Webliography

Code Igniter

Code Igniter Video Tutorials

Code Igniter Tutorials

Derek Allard’s tutorials

Kohana

Code Igniter, a PHP Framework

Posted on by
Reply

Choosing a PHP Framework to develop websites can save you time and efforts. I’m not writing this post to write an exhaustive list of the pros and cons of different PHP frameworks but just want to highlight why I think PHP frameworks are worth trying.

In my very case, it has also led me to better programming practises.

Code Igniter - PHP FrameworkKohana - PHP5 FrameworkZend Framework

The framework I’ve developed entire projects with is Code Igniter (v.1.7.2). I have also had a go with Kohana3 (just for fun) because I was looking for a strict PHP5 lightweight framework. I have not got very deep into Zend Framework because it looks a bit heavyweight for my purposes. However, it is developed by Zend Technologies Ltd., the reference in terms of web-based PHP applications.

If you have never tried a PHP framework and are ready to view how it works in a few minutes, just try one of the official video tutorials on http://codeigniter.com/tutorials/ : strictly astonishing!

At first, I was a bit reluctant to choose a framework and preferred coding my own scripts because I tought starting to use a framework would force me into a practise I could later regret (use of coding rules imposed by the framework itself, efficiency in the long term…). This was my first thought before ever trying one.

After my first Code Igniter experience, I have changed my mind and now think they make my life easier. And even if the framework I have chosen was no longer maintained, I could easily choose another framework to develop my new websites without changing so much my programming practise.

In my opinion, the following features make a good and efficient framework :

  • a PHP 5 framework
  • an MVC (Model-View-Controller) architectural pattern
  • a set of helpers (scripts that save you time for managing urls, or form elements, for example)
  • the possibility to script your own controllers, libraries, helpers
  • a well-documented practise
  • a lightweight (thus fast loading) system

It’s all a question of powers…

PHP5-powered

The power of PHP5 frameworks like Kohana is they’re strictly OOP (Object Oriented Programming), a proof of better programming practises. Code Igniter is partly written in PHP5, helpers including PHP4 functions.

MVC-powered

The power of an MVC architectural pattern is that it allows you to structure your code : your PHP scripts are not mixed anymore with Html and MySql requests as they would be in a home-made script without a framework. In a Model-View Controller pattern,you may define specific folders to hold your controller classes, your models classes and your views. Practically speaking, a web page will call a controller. This controller may define variables or call a model to retrieve data from a database, for example. So, the model will execute the MySql query, get the data from the database and return the result to the Controller. The controller will then pass the results to the view which is like an Html template.

MY_Controller.php : writing your own controllers

A PHP Framework lets you write your own controllers. In Code Igniter, the main controller is in /system/libraries/Controller.php. Code Igniter lets you write your own controller. You should name it /system/application/libraries/MY_Controller.php. This file contains a MY_Controller class that actually extends the main Controller class :

<?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);
class MY_Controller extends Controller {
public function __construct() {
parent::__construct();
$this->load->helper(array(‘my_html’,'my_url’,'my_date’));
}
}
?>

My personal controller here loads the Main Controller constructor and then loads some helpers. These helpers are not the default CI helpers that can be found in /system/helpers/ but my own rewritten helpers : my_html_helper.php, my_url_helper.php and my_date_helper.php which are copies of the original helpers to which I have added some personal functions.

Scripting websites with Code Igniter has led me to write scripts which are very short, easy to manage and wonderfully efficient.

Webliography

Code Igniter

Code Igniter Video Tutorials

Code Igniter Tutorials

Derek Allard’s tutorials

Kohana