Grâce à mon expérience au sein d’Air France, j’ai eu la chance d’être initié sur les bons usages en terme d’amélioration du référencement web (SEO). Après avoir approfondit le sujet via les nombreux articles présents sur le web, j’ai pu mettre en application ces connaissances sur le site tout fraîchement développé pour Noëlie Serries, ostéopathe à Cannes La Bocca.

Voici quelques exemples de points d’améliorations du référencement et d’expérience utilisateur que j’ai mis en place:

  • Amélioration des performances (utilisation du cache navigateur et applicatif, minification du code)
  • Site web optimisé pour les tablettes et mobiles
  • Enrichissement des pages avec des données sémantiques
  • Liaison avec les réseaux sociaux
  • Optimisation du contenu important aux moteurs de recherches (URL canoniques, balises meta, title et header)
  • Internationalisation

Lien vers le site de Noëlie Serries – Ostéopathe

site de Noëlie Serries - Ostéopathe

En dehors de mon activité professionnelle, j’aime partir en randonnée et découvrir de nouveaux paysages et des animaux sauvages que j’aime photographier grâce à mon appareil photo reflex numérique. Je suis aussi un passionné de voyage et toujours intéressé pour explorer de nouveaux pays.

Lors des différentes randonnées ou les voyages que j’ai pu faire avec mes amis ou avec mon groupe Meetup, j’ai remarqué que les photos que je prenais servaient uniquement pendant une courte période avant d’être archivées dans un répertoire qui n’était quasiment plus ouvert. De plus, quand certaines personnes me demandaient de les recommander pour visiter tel ou tel destination, je me disais que cela serait plus pratique si je pouvais leur montrer les photos que j’ai prises sur une carte. Le projet Photo Travel était né.

L’objectif de Photo Travel est de pouvoir exposer des photos de voyages, randonnées et évènements sur des cartes pour les personnes intéressées par une destination particulière, une randonnée ou un évènement local.

Lien sur Photo Travel.

Photo Travel

19/03/2015 écrit par Cyril GRANDJEAN

En utilisant les nouvelles technologies web HTML 5 et CSS 3, j’ai modifié le design de mon site web personnel dans le but d’avoir un site web « responsive » et ainsi permettre un affichage adapté en fonction de si vous utilisez un téléphone mobile, une tablette ou un ordinateur.

  • Affichage téléphone mobile

mobile-display

  • Affichage tablette

Screenshot_2015-03-19-21-42-22

  • Affichage ordinateur

desktop-display

03/08/2013 écrit par Cyril GRANDJEAN

Quand vous développez une version de votre application web, vous aurez souvent besoin de créer une procédure de test qui testera toutes les fonctionnalités de votre application web. Ensuite, vous allez exécuter tous ces tests fonctionnels manuellement dans le but de vérifier qu’aucune régression n’est apparue. Les tests fonctionnels manuels sont long, ennuyeux et peuvent être sujet à des erreurs humaines.

Vous pouvez éviter tous ces désavantages en automatisant vos tests fonctionnels en utilisant la librairie Selenium. En utilisant la librairie Selenium avec Java, vous serez capable d’automatiser vos actions du navigateur web and vous serez capable de vérifier que ces actions ont le comportement souhaité.

Nous prendrons exemple de ce programme PHP basique:

<?php
session_start();

//Nous ajoutons l'élément à l'intérieur d'un tableau en session
if(isset($_POST['elementToAdd']))
{
	//Si le tableau est déjà crée
	if(is_array($_SESSION['array']))
	{
		//Limite de 10 éléments
		if(sizeof($_SESSION['array']) < 10)
		{
			//Nous ajoutons notre élément
			array_push($_SESSION['array'],$_POST['elementToAdd']);
		}
	}
	else
	{
		//Nous créons un nouveau tableau
		$_SESSION['array'] = array($_POST['elementToAdd']);
	}
}
//Nous supprimons un élément du tableau en session
else if(isset($_POST['elementToDelete']))
{
	unset($_SESSION['array'][array_search($_POST['elementToDelete'], $_SESSION['array'])]);
}
?>
<html>
<head>
</head>
<body>
	<?php
	//Nous affichons le tableau HTML si il y a des éléments en session
	if(isset($_SESSION['array']) && is_array($_SESSION['array']) && sizeof($_SESSION['array']) > 0)
	{
	?>
		<table>
			<?php
			//Nous affichons nos éléments en session
			foreach ($_SESSION['array'] as $value)
			{
			?>
				<tr class="aRow">
					<td class="rowValue">
						<?php echo $value ?>
					</td>
					<td>
						<form method="post">
							<input type="hidden" name="elementToDelete" value="<?php echo $value ?>" />
							<input type="submit" class="deleteButton" value="Supprimer l'élément" />
						</form>
					</td>
				</tr>
			<?php
			}
			?>
		</table>
	<?php
	}	
	?>
	
	<form method="post">
		<input name="elementToAdd" type="text" />
		<input id="submitButton" type="submit" value="Ajouter l'élément" />
	</form>
</body>
</html>

Vous pouvez cliquer ici pour voir le résultat de ce script PHP ici .

A l’intérieur de ce script PHP, nous avons un formulaire que nous utiliserons pour ajouter un élément à l’intérieur d’une session PHP limitée à 10 éléments uniquement. Quand un élément est ajouté au tableau, nous pouvons le supprimer en cliquant sur le bouton supprimer.

Nous allons ensuite créer la procédure de tests fonctionnels suivante que nous allons automatiser avec Selenium:

  • Nous ajoutons un élément à l’intérieur du tableau et nous vérifions qu’il est bien ajouté.
  • Nous supprimons l’élément du tableau et nous vérifions que l’élément est bien supprimé.
  • Nous testons la limite de 10 éléments
public class SeleniumClass {

    /**
     * Driver du navigateur web
     */
    private WebDriver driver;

    /**
     * Code à exécuter avant chaque test JUnit
     */
    @Before
    public void setUp() {

        //Nous créons notre driver Firefox
        driver = new FirefoxDriver();

        //Nous l'initialisons avec une valeur maximale de 5 secondes
        driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
    }

    /**
     * Test JUnit de nos tests fonctionnels
     */
    @Test
    public void testElementPage()
    {
        //Nous chargeons notre page web
        driver.get("http://www.cyril-grandjean.fr/fr/selenium.php");

        //Nous trouvons le champ texte avec le nom elementToAdd que nous remplissons avec la valeur element to add
        driver.findElement(By.name("elementToAdd")).sendKeys("element to add");

        //Nous cliquons sur le boutton avec l'id submitButton
        driver.findElement(By.id("submitButton")).click();

        //Nous vérifions qu'un élément avec la classe rowValue a été ajouté
        assert driver.findElements(By.className("rowValue")).size() == 1;

        //Nous vérifions la valeur de l'élément dans le tableau HTML
        assert driver.findElement(By.className("rowValue")).getText().equals("element to add");

        //Nous vérifions le champ hidden du formulaire pour supprimer un élément en vérifiant l'attribut value
        assert driver.findElement(By.name("elementToDelete")).getAttribute("value").equals("element to add");

        //Nous supprimons l'élément en cliquant sur le boutton supprimer
        driver.findElement(By.className("deleteButton")).click();

        //Nous vérifions que l'élément a bien été supprimé
        assert driver.findElements(By.className("rowValue")).size() == 0;

        //Nous essayons d'ajouter 11 éléments
        for(int counterElementAdded = 0; counterElementAdded < 11; counterElementAdded++)
        {
             //Nous trouvons le champ texte avec le nom elementToAdd que nous remplissons avec la valeur element to add
            driver.findElement(By.name("elementToAdd")).sendKeys("element to add");

             //Nous cliquons sur le boutton avec l'id submitButton
            driver.findElement(By.id("submitButton")).click();
        }

        //Nous vérifions qu'il y a toujours 10 éléments
        assert driver.findElements(By.className("rowValue")).size() == 10;

        //Nous supprimons les éléments en cliquant sur les boutons supprimer
        while (driver.findElements(By.className("deleteButton")).size() == 0)
        {
            //Nous supprimons l'élément en cliquant sur le boutton supprimer
            driver.findElements(By.className("deleteButton")).get(0).click();
        }

        //Nous vérifions que les éléments ont bien été supprimés
        assert driver.findElements(By.className("rowValue")).size() == 0;
    }

    /**
     * Code à exécuter après chaque test JUnit
     */
    @After
    public void tearDown() {

        //Nous quittons le driver
        driver.quit();
    }
}

Avec ces tests JUnit Selenium, nous avons été capable d’automatiquement tester toutes les fonctionnalités de notre script PHP.

Vous pouvez trouver plus d’information à propos de Selenium au lien suivant : http://docs.seleniumhq.org

30/07/2013 écrit par Cyril GRANDJEAN

My first book Instant Highcharts is now released.

7545OT_HighCharts Starter_Instant_cov

What you will learn from this book

  • Set up Highcharts to work with your web application
  • Build your own customized column, bar, area, and pie charts
  • Prepare your chart dynamically on the server side
  • Set up a time axis
  • Add plot lines and plot bands into your axis
  • Customize some of your chart parameters such as the legend or the tooltip
  • Implement a multiple axes chart
  • Create a stacked bar chart

In detail

Nowadays, a lot of systems and tools are developed using web technologies. Customers need to analyze their data using charts on their computer or their mobile device. With the Highcharts library, it is possible to create highly customizable and interactive charts on any computer or a mobile device without installing any plugins.

Instant Highcharts is a practical, hands-on guide that provides you with a step-by-step approach, which will help you to take advantage of the powerful features of Highcharts. With Instant Highcharts, you will learn everything you need to know to create your own dynamic charts with your own data inside your web application.

Instant Highcharts will present you with different features available with Highcharts, and helps you to create your own chart. You will start with Highcharts installation and then learn to create your own customized column, bar, area, and pie charts with your data. You will learn to add some interactive functionality such as the zoom feature or to export your chart into a printable format. We will also give you tips that will help you to improve your skills with Highcharts.

Approach

Get to grips with a new technology, understand what it is and what it can do for you, and then get to work with the most important features and tasks. Instant Highcharts has a step-by-step approach to help you understand the core concepts of different types of Highcharts and create your own customized charts.

Who this is for

Instant Highcharts is for web developers who are new to the Highcharts library and looking to create their own charts in their webpages. You should have some experience with the JavaScript library. You should know how to develop a server-side language such as PHP to create dynamic Highcharts.

You can buy this book at this link : https://www.packtpub.com/create-dynamic-customized-charts-instantly-using-highcharts/book

19/03/2010 écrit par Cyril GRANDJEAN

Comme vous pourrez le remarquer, mon site internet dispose d’un nouveau design afin d’apporter plus de sobriété et de professionalisme.

J’ai pu compter sur le soutien d’Antoine Lenoir pour la création de la nouvelle charte graphique (www.studio-khaz.com).