Tutoriels | Undisconnected

Désactiver le mode SSL sur Prestashop avec SQL

Imatt — Fri, 17 Apr 2015 04:25:03 +0000

Pourquoi j’ai eu besoin de faire ça ? J’ai fait une copie de mon site Prestashop en local et n’est pas de SSL en local. Je n’avais donc pas accès à l’admin pour aller modifier cela facilement. Voici la commande SQL qui désactive le mode SSL sur Prestahsop.

UPDATE ps_configuration SET value='0' WHERE name='PS_SSL_ENABLED';

/!\ Attention au prefix de la table configuration, si vous en avez un.

Comme j’ai cherché à désactiver le mode SSL sans avoir accès à l’admin de prestashop et que j’ai mis un peu de temps à trouver, je relaye l’information ici en espérant que ça aidera quelqu’un

The post Désactiver le mode SSL sur Prestashop avec SQL first appeared on Undisconnected.

Changer le nombre de produits par défaut dans Prestashop

Imatt — Wed, 15 Apr 2015 04:01:26 +0000

Comme j’ai cherché un peu pour trouver cela, je me suis dit que j’allais le partager ici. Voici donc comment faire pour changer le nombre de produits sur une page dans Prestashop :

Admin > préférences > produits
Modifier le champs « Produits par page » dans la section « Pagination »
Cliquez sur enregistrer

Facile, une fois qu’on le sait

The post Changer le nombre de produits par défaut dans Prestashop first appeared on Undisconnected.

Créer un diagramme circulaire avec Google Charts

Imatt — Tue, 24 Feb 2015 05:17:18 +0000

Grossièrement appelés ~~diagrammes de Normandie~~ « camemberts », les diagrammes circulaires sont parfaits pour résumer un ensemble de données à une variable. Il est très facile de créer ce type de diagramme grâce à des librairies comme Highchart ou Google Charts. Aujourd’hui, je vais vous montrer comment créer un diagramme circulaire grâce à Google Chart.




Diagramme circulaire

Comme vous le voyez, avec juste ces quelques lignes de code, on peut créer un diagramme circulaire vraiment facilement grâce à Google Charts.

Pratique pour un projet rapide, ou montrer des statistiques à votre boss d’une belle façon.

The post Créer un diagramme circulaire avec Google Charts first appeared on Undisconnected.

Postgresql – Changer le propriétaire d’une table

Imatt — Thu, 29 Jan 2015 15:05:12 +0000

Comme j’utilise Postgresql pour un projet en cours, je me suis dit que j’allais vous faire profiter de ma base de connaissance, même si pour l’instant elle est assez rudimentaire Alors voici un premier :

Pour changer le propriétaire d’une table, utilisez la commande :

ALTER TABLE tablename OWNER TO username

The post Postgresql – Changer le propriétaire d’une table first appeared on Undisconnected.

Tutoriel pour mettre son site en ligne

Imatt — Wed, 04 Jun 2014 19:22:44 +0000

Recharger un graphique Highchart avec de nouvelles données provenant d’un formulaire

Imatt — Mon, 24 Mar 2014 14:20:30 +0000

Je vous ai préparé un tutoriel sur Highchart qui explique comment recharger un graphique avec de nouvelles données saisies dans un formulaire HTML. Dans mon cas, je vais prendre l’exemple de quelqu’un qui saisit des données dans des champs texte et recharger le graphique à l’aide de ces données.

Voir le résultat du tutoriel

Structure de ce tutoriel Highcharts

Pour ce tutoriel, nous allons utiliser la structure de fichier suivante :

fichier index.html
fichier main.js (contient le code pour le graphique)
On appelle Highcharts & jQuery via un CDN

Fichier index.html qui va accueillir le graph Highcharts



Undisconnected - Tutoriel sur comment recharger un graphique Highcharts.js avec de nouvelle données 













  

  Données 1 :  - 

  Données 2 :  - 

  Données 3 :  - 

  Données 4 :  -

Ici, rien de bien compliqué, on fait juste créer un fichier HTML5 en appelant le fichier main.js et les 2 librairies Highcharts et jQuery. Puis on construit un formulaire.

Fichier main.js

Le fichier main.js va accueillir le code qui va nous servir à créer le graph mais aussi le code qui va permettre de recharger le graph avec de nouvelles données saisies par l’utilisateur dans un formulaire.

Découpons un peu le code! Premièrement, nous allons mettre en place la fonction qui va générer le graphique au chargement de la page (la première fois). Notez que l’on assigne ce graphique à la variable document.chart, ceci dans le but de pouvoir accéder facilement plus tard à notre variable. (voir la portée des variables en Javascript).

Fonction qui affiche le graphique

var colors = ["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a", "#d62728", "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"];


$.displayPieChart = function(colors, data) {
         
          document.chart = new Highcharts.Chart({
      chart: {
         renderTo: 'pieChart',
         width: 598,
         height: 450,
         marginLeft: 25,
         marginRight: 25,
      },
      colors: colors,
      title: {
         text: "Il faut manger des fruits",
         margin: 10
      },
      tooltip: {
         formatter: function() {
            return "Nombre: " + parseInt(this.y) ;
         }
      },
      plotOptions: {
         pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
               enabled: true,
               formatter: function() {
                  return "" + this.point.name.toLowerCase() + "";
               }
            }
         },
         series: {
            dataLabels: {
                enabled: true,
                color: 'black',
                fontSize: 3
            }
        }
      },
       series: [{
         type: 'pie',
         name: 'fruits',
         data: data
      }]
   });
         
         
     }

Ensuite, nous allons créer la fonction qui va prendre en charge la lecture du formulaire et le rechargement du graphique en fonction des nouvelles données.

Fonction qui va recharger le graphique

function getDataFromUser(){

  var value   = [];
  var titre   = [];
  var data    = [];
 
  $("#data .value").each(function(i,e){
    value.push(parseInt($(e).attr("value")));
  });

  $("#data .titre").each(function(i,e){
    titre.push($(e).attr("value"));
  });
 
  $.each(titre, function(i,e){
    var inside  = [];
    inside.push(e);
    inside.push(value[i]);
    data.push(inside);
  })
 
  return data;
}

Quelques explications :

Ici on va aller lire à l’aide de jQuery les valeurs entrées dans le formulaire. On sélectionne, #data .value (la série qui contient les chiffres) et #data .titre (la série qui contient les titres). On insère ces nouvelles données dans des array Javascript à l’aide de la méthode push. On utilise la fonction parseInt pour s’assurer que les valeurs seront bien des integers. Il faudrait pousser plus loin la vérification des données du formulaire dans un cas réel mais pour ce tutoriel, ça suffira amplement.

Finalement : Document ready de jQuery pour binder les actions

$(function() {
  var data = getDataFromUser();

  $.displayPieChart(colors, data);
 
  $("#button").click(function(){
    var data = getDataFromUser();
   
    document.chart.series[0].setData(data);
    document.chart.redraw();
   
  })
});

Ce bout de code permet donc dans l’ordre de :

Récupérer les données du formulaire via la fonction getDataFromUser
Initialiser le graphique au chargement de la page en appelant la fonction displayPieChart.
Binder (lier) le click sur le bouton(#button) le rechargement du graphique avec les nouvelles données

Conclusion

Voici donc le résultat de ce tutoriel sur Highchart, j’espère que ça vous sera utile. N’hésitez pas si vous des questions / remarques en commentaires.

Voir le résultat du tutoriel

The post Recharger un graphique Highchart avec de nouvelles données provenant d’un formulaire first appeared on Undisconnected.

Tutoriel : Introduction à la librarie javascript d3.js

Imatt — Mon, 01 Apr 2013 16:05:08 +0000

Voici le premier d’une longue lignée (je l’espère) de tutoriaux en français portant sur la librarie d3.js. Pour en savoir plus sur cette librairie reportez vous à la présentation que j’en ai fait sur ce post. L’objectif de ce premier tutoriel est de faire quelques exemples d’utilisation très simple de la librairie.

A l’instart de Jquery, d3.js est une librarie qui permet de manipuler le DOM. Mais là où d3.js est très efficace est dans la manipulation de SVG.

Manipuler ou créer une div avec d3.js

Ajouter et manipuler un rectangle SVG

Dessiner plusieurs éléments dans un groupe svg

Gérer des données au format JSON et dessiner en fonction de ces données

Dans ce dernier exemple, nous allons construire des nodes qui sont en fait des groupes svg ayant la class « node ». Ensuite, on va dessiner, suivant les données (variable data) un cercle et afficher le nom de ce cercle dans celui -ci.

Le dernier exemple introduit plusieurs nouveaux concepts : selectAll(), data(), et enter().

selectAll()

la methode de selection selectAll permet, comme son nom l’indique de selectionner les éléments définis par le selecteur css passé en argument. selectAll(« p ») va selectionner tous les éléments présents dans le DOM.

data()

La methode data() permet de « binder » (attacher) des données à des éléments sélectionnés par la methode selectAll(). Ces données une fois attachées seront utilisables dans la suite du chainage. Exemple : attr(« fill »,function(d){return d.color});

enter()

Cette fonction va « binder » les données à des éléments et créer les éléments sélectionnés par selectAll(). Si vous n’utilisez pas enter() alors aucun élément ne sera crée. Seul les éléments existants seront utilisés et donc s’il sont inexistant, rien ne s’affichera.

Ressources

W3 School, documentation sur le SVG
Le site de d3.js
Approfondir sur le DOM (Document Object Model)

The post Tutoriel : Introduction à la librarie javascript d3.js first appeared on Undisconnected.

Produire un diaporama qui fait rêver avec Iphoto

Imatt — Wed, 07 Nov 2012 15:24:10 +0000

Il s’agit aujourd’hui d’un article concernant les utilisateurs de Mac. Je vais vous donner ici un petit tutoriel pour gérer votre bibliothèque de photos et générer et partager sur Youtube un diaporama de qualité avec le logiciel Iphoto.

Quels sont les problèmes qui se posent ?

Mon diaporama doit rester court pour être agréable à regarder.
J’ai trop de photos en double ( les fameuses 10 photos du même paysage que vous avez prises).
Je veux générer un diaporama avec uniquement les meilleures photos de mon évènement.
Je veux garder mes photos en double pour mes archives personnelles.
Comment partager facilement mon diaporama à tous mes amis

Effectivement, vous souhaitez éviter d’assomer votre public par des longueurs dû à des photos répétitives. Pour améliorer la qualité et captiver votre publique, vous devez limiter le nombre de photos. Il n’y a pas de règle mais je dirais que 100 photos (1 photo toute les 3 secondes pour un temps total de 5 minutes) semble correcte.

Masquez les photos non désirées dans Iphoto

Exemple :

J’ai pris 5 photos de la patinoire sous tous les angles, je veux les garder pour archive (au cas ou) mais je ne souhaite pas les présenter dans le diaporama que je ferais voir à tout le monde. Pour ce diaporama, je veux montrer LA meilleure photo de la patinoire.

Comment faire cela dans Iphoto ? C’est très simple, il faut utiliser la fonction de masquage. Masquez les photos non désiré dans l’évènement. (Click droit sur une image ou une selection d’image & Masquer – c’est la croix jaune).

Dans le menu Présentation (Barre de menu en haut) vous pouvez décider d’afficher ou non les photos masquée en sélectionnant « Photos masquées ». Les photos masquées ne seront donc pas prise en compte par le diaporama.

Réglage de votre diaporama

À cette étape vous allez générer un diaporama avec les réglages de votre choix. Choisissez le style, la musique et les réglages de défilement. Par défaut 1 photo toutes les 3 secondes est un bon réglages. (mais vous pouvez tester d’autres réglages). Pour la musique, Apple propose des musique libre de droit , mais vous pouvez aussi choisir une musique de votre librarie Itunes. Attention cependant Youtube est capable de bloquer une vidéo à cause du droit d’auteur.

Exportez votre diaporama au format video

Il est effectivement possible d’exporter le diaporama en cours au format video. Pour se faire, une fois les réglages de votre diaporama fini (étape ci-dessus), allez dans le menu Fichier (Barre de menu en haut) puis Exporter. Cliquez sur l’onglet Diaporama puis choisissez la qualité de la vidéo que vous désirez. Pour ma part j’utilise le format « grand », car la plupart du temps je vais faire voir cette video sur mon laptop ou l’envoyer sur Youtube. Avec ce format la qualité reste très bonne.

Envoyer votre video sur Youtube

Une fois votre diaporama exporté en video, il est pas mal pratique d’envoyer la video sur Youtube (ou autre gestionnaire de video en ligne, Vimeo, Dailymotion). Pourquoi? Pour partager facilement votre diaporama en envoyant juste un lien menant vers Youtube à vos amis / famille.

Pour se faire, ouvrez votre diaporama au format video avec Quicktime Player. Aller dans le menu fichier (Barre de menu en haut) puis Partagez, choisissez Youtube (ou autre si désiré, mais cet article traîte de Youtube). Si c’est la première fois que vous utilisez cet fonctionnalité, il vous faudra renseigner votre compte Youtube (ou compte Google).

Si vous n’en avez pas, créez en un en allant ici.

Choisissez la catégorie de votre video, donnez un titre, entrez une description, choisissez des mots-clés (Balises). Laissez la case « Rendre cette vidéo personnelle » cochée. La vidéo va être envoyer sur Youtube et vous pouvez suivre la progression avec cette fenêtre :

Gérer les permissions de la vidéo sur Youtube

Sur Youtube, allez dans votre compte puis « Gestionnaire de vidéos ». Cliquez sur « Modifier » près de la vidéo que vous avez créé à l’étape précédente puis sélectionnez « Infos et paramètres ». Une nouvelle page apparaît permettant de régler les droits de la vidéo à droite de la page. Sélectionnez : Non répertorié. La vidéo sera alors accessible aux gens à qui vous donnez le lien mais ne sera pas trouvable dans le moteur de recherche Youtube.

Le résultat en video

Voici donc le résultat de la video de mon diaporama sous Youtube. Pour l’exercice, j’ai pris quelques photos de ma vie quotidienne à Montréal. Photos pour la plupart prise avec mon Iphone.

[youtube]http://youtu.be/xvQ5vdhCCDw[/youtube]

Conclusion du tutoriel

J’espère que ce tutoriel vous sera utile! Si vous avez des questions, n’hésitez pas à les poser dans les commentaires ci-dessous. Aussi, si vous voyez comment améliorer le processus, n’hésitez pas à en faire part. Pour finir je dirais que ce tutoriel demande à bonne concentration environ 30 min. Si vous souhaitez partager vos diaporamas, n’hésitez pas.

Bonne création!

The post Produire un diaporama qui fait rêver avec Iphoto first appeared on Undisconnected.

Utiliser les filtres photos d’Instagram dans Photoshop

Imatt — Wed, 11 Jan 2012 18:31:53 +0000

Vous avez des photos que souhaiteriez améliorer avec les filtres d’Instagram ? Vous adorez Instagram mais vous ne souhaitez pas l’utiliser pour obtenir ce rendu ? Voici un tutoriel rapide qui vous permettra de retrouver tous les effets d’Instagram dans Photoshop (Mac ou PC).

Télécharger le fichier action (.atn)

Pour commencer vous devrez récupérer le fichier action photoshop (en cliquant sur ce lien). Ce fichier est mis à disposition par Daniel Box qui est l’auteur de ce portage d’Instagram vers photoshop. Vous aller donc obtenir une archive zip contenant le fichier à l’extension « atn ».

Installer le fichier action (.atn)

Pour installer le fichier action, rien de plus simple :

Lancer Photoshop
Aller dans le panneau Action dans les menus de droite
Si vous ne l’avez pas, allez dans le menu Windows et choisissez Action.
Dans le menu action (flèche en haut à droite), choisissez « Load Action »
Vous devrez ensuite fournir le fichier « atn »
Si tout c’est bien passé, vous devriez maintenant avoir un répertoire dans votre menu action comprenant tous les effets Instagram.

Utiliser les filtres Instagram

Maintenant que tout est installé, je sens que vous mourrez d’envie de l’essayer Alors faisons un test, c’est une fois de plus très simple :

Ouvrez un fichier photo de votre choix
Dans le menu action de photoshop, ouvrez le répertoire « Instagram Actions », vous devriez voir les filtres Brannan, Earlybird, Gotham …
Cliquez sur l’un de ces filtres
Cliquez sur le bouton play (flèche) en bas du menu action.
Votre photo est maintenant filtré.

Conclusion

Voilà, je vous laisse jouer avec ces filtres. Pour ma part je les adore !!! Surtout que maintenant, je peux utiliser ces filtres sur n’importe quel photo.

Ressources

The post Utiliser les filtres photos d’Instagram dans Photoshop first appeared on Undisconnected.

Fini les problèmes de cache navigateur avec filemtime

Imatt — Fri, 06 Jan 2012 19:39:29 +0000

Marre d’avoir des problèmes de cache lors de vos développements ? Marre de recevoir des appels de vos clients mécontents car ils ne voient pas les changements que vous venez de mettre en place ? Vous souhaitez maîtriser le cache du navigateur pour les fichiers de style (css), javascript, images (png, jpg …) ?

Le problème

Les navigateurs (tous confondus) utilisent un système de cache local qui permet d’afficher plus rapidement une page une fois que celle-ci a déjà été affichée. Le problème c’est que si vous poussez une mise à jour d’un fichier javascript ou un fichier de style, les visiteurs qui auront déjà ce fichier en cache ne verront aucun changement sur le site car leur navigateur sortira le fichier en cache.

La solution

Pour éviter ce problème très frustrant à la longue, il existe une pratique qui utilise une fonction PHP pour permettre de dater le fichier. Cette fonction s’appelle filemtime et va renvoyer la date de dernière modification du fichier au format timestamp.

Voici comment l’utiliser :

il suffit donc de mettre un paramètre GET (ici « date ») avec comme valeur le timestamp de la date de dernière modification de votre fichier (donné par la fonction filemtime) pour que le navigateur pense qu’il s’agit d’un nouveau fichier et aille le chercher sur le serveur.

Procédez comme cela pour chaque fichier javascript et css mais aussi pour les images si besoin.

Attention au chemin (path) que vous allez utiliser pour filemtime. Un chemin peut être relatif ou absolue. Si vous avez une erreur PHP contenant le terme « stat failed« , ceci veut dire que PHP n’a pas réussit à récupérer les infos du fichier, ce qui le plus probablement sera une erreur de chemin. Alors relatif ? ou absolue ? Ceci va dépendre de votre configuration PHP, mais le plus souvent le chemin relatif fonctionnera.

Conclusion

J’espère que ce petit tutoriel vous aura aidé à comprendre une méthode simple pour vous éviter bien des problèmes de cache. J’utilise maintenant cette méthode dans tous les projets que j’entreprends, c’est vraiment une « best practice » comme on dit dans le métier.

The post Fini les problèmes de cache navigateur avec filemtime first appeared on Undisconnected.