09/11/2020 écrit par Cyril GRANDJEAN

En dehors du domaine professionnel, j’aime la photographie et la randonnée. C’est pour cela que j’ai crée le groupe French Riviera Hiking Meetup afin de rencontrer des personnes du monde entier autour de randonnées dans les Alpes Maritimes. Etant de nature à coupler les projets personnels avec mes passions, j’ai décidé il y a quelques années avec des amis du groupe Meetup de créer le projet OpenTracks sur mon temps libre.

OpenTracks est un site internet (https://opentracks.app) mais aussi une application iOS (lien) et Android (lien) destiné aux personnes aimant les promenades, randonnées pédestres, randonnées raquettes, trails et treks.

Grâce à l’application OpenTracks, vous pouvez rechercher des randonnées selon plein de critères de sélection mais aussi effectuer les activités sélectionnées depuis votre mobile grâce au GPS intégré et le mode hors-ligne optimisé pour faire en sorte que vous ne soyez pas perdu mais aussi en optimisant l’usage de la batterie. Je vous invite à explorer plus en détails le site d’OpenTracks et les descriptions des applications mobiles pour en découvrir plus sur les multiples fonctionnalités de l’application et n’hésitez pas à créer un compte sur l’application si vous êtes intéressés par l’application.

Je profite du développement de l’application pour perfectionner mes connaissances en Javascript front-end comme backend (OpenTracks est une application entièrement développée en Javascript) ainsi qu’en développement mobile qui était un domaine qui était relativement théorique pour moi jusqu’à maintenant et de créer une architecture robuste qui permettrait de pouvoir avoir des pages affichées en SSR (pour le SEO), tout en étant optimisé sur mobile. Un challenge technique difficile mais pas inintéressant 🙂

J’ai profité de ce projet pour mettre en place le Test Driven Development dans le cycle de vie de l’application. Une petite perte de temps au début du projet mais qui est maintenant un gain de temps considérable grâce aux tests automatiques qui se sont enrichis au fil des versions de l’application et qui participe à l’amélioration continue de la qualité de l’application en évitant les régressions.

Parcourez des parcours existants
Planifiez vos activités

30/08/2018 écrit par Cyril GRANDJEAN

Après quelques mois de travail, le nouveau design de mon site web personnel est désormais en ligne. Comme le design précédent du site Web a été créé il y a 8 ans, j’ai décidé de recréer le design du site web de zéro afin d’améliorer mes compétences en web design. Le nouveau design a été entièrement intégré à WordPress avec un mécanisme d’internationalisation afin de continuer à afficher le contenu des pages et des articles en français et en anglais (je pense qu’il est toujours important pour moi de pratiquer les deux langues, même si cela me prend plus de temps pour écrire des pages et des articles).

En tant qu’ingénieur en développement logiciel, je pense qu’il est important d’apprendre constamment sur les nouvelles technologies. C’est pourquoi j’essaie toujours d’apprendre et de pratiquer en travaillant sur certains projets personnels (je développerai plus en détail dans un prochain article). Par conséquent, j’ai utilisé mon besoin d’améliorer mes compétences en web design dans ce travail de refonte.

J’ai également essayé d’optimiser le design pour les ordinateurs de bureau, les tablettes et les smartphones. Je vais essayer de continuer à corriger certains bogues détectés et d’apporter d’autres améliorations dans le futur sur le site.

Dans le blog, je continuerai à écrire des articles sur des sujets technologiques, mes expériences professionnelles et d’autres articles à partager.

N’hésitez pas à me suivre sur Twitter, LinkedIn, Viadeo et GitHub en utilisant les liens de mon site.

Redesign du site

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

23/03/2011 écrit par Cyril GRANDJEAN

Lors de mon stage chez Distrame de Juillet 2010 à Septembre 2011, j’ai participé à l’élaboration de la solution Efficacenergie.  Cette solution directement installée sur le réseau intranet du client permet la mesure de consommation énergétique d’un bâtiment que ce soit de la mesure de consommation d’eau, de gaz, d’électricité ou de la mesure de température,… Efficacenergie est compatible avec les capteurs sans fils des marques LEM et Coronis.

La solution est installée sur un NAS fonctionnant sur une distribution Linux. Notre serveur NAS va jouer le rôle de collecteur de données provenant des capteurs sans fils.  Grâce à un serveur d’application Apache Tomcat et d’une base de données mySQL, le client peut visualiser ses consommations via une interface web ergonomique développée à partir de la librairie javascript Ext-JS. Vous pourrez trouver sur mon portfolio une liste de fonctionnalités disponibles avec Efficacenergie.

Voici une petite vidéo de présentation de la solution :

29/06/2010 écrit par Cyril GRANDJEAN

Agora Immobilier vient de changer de design suivi de l’ajout de nouvelles fonctionnalités tels que la géolocalisation des biens à louer sur Google Maps.