Trier par :
View:
  • Accueil
  • Archive par catégorie "programmation"

Catégorie : programmation

Placeholder pour textes et images : créez des textes et images vides pour votre design !


Pendant la réalisation d’un site web, il est utile de mettre du contenu afin de mettre en place le design de ce dernier. Ce contenu n’a pas forcément besoin d’être compréhensible. Il peut s’agir :

  • d’un texte afin de montrer la police, des news, etc ;
  • d’images à placer dans le design.

 

Le problème de ce système est que le texte créé ainsi que les images seront supprimés une fois le graphiste ou le client passé par là. Prendre du temps pour créer du texte réaliste ainsi que de jolies images est donc une perte de temps et peut être rapidement coûteux pour une entreprise ! Mais des solutions existent… On appelle ça un placeholder.

 

Placeholder pour texte : lorem ipsum

Dans un premier temps il est utile de remplir un site web par des textes même si ceux-ci n’ont ni queue ni tête. Pour ce faire, il existe ce qui est appelé le lorem ipsum. Ce dernier permet d’aider à la mise en page et ressemble à du latin. De nombreux sites existent pour en générer  dont le très bon lipsum.com. Au milieu du site vous pourrez configurer la quantité de texte voulue :

Création de texte lorem ipsum

L’utilisation est simple et intuitive, vous choisissez la quantité de texte voulue et le type de texte : des paragraphes, mots, caractères ou listes. Une fois le texte généré vous pourrez l’intégrer à vitre site.

 

Placeholder pour images : fakeimg

Pour ce qui est des images, l’affaire peut sembler plus compliquée. Bien évidemment il est possible d’ouvrir un logiciel comme Paint et de générer une image, grise par exemple, aux dimensions que l’on veut. Cependant, qu’arrive-t-il si l’on décide de changer l’image d’un pixel seulement ? Puis finalement en ajouter 10 de plus ? Il faudrait encore ouvrir le logiciel pour changer l’image et perdre un temps fou ?

Des développeurs ont eu l’idée de créer un site contenant une API afin de créer des images le plus simplement du monde. Ce site s’appelle fakeimg.pl. Nous allons apprendre à nous en servir. Pour créer une image de 200×200 pixels, il suffit de se rendre à l’adresse suivante : http://fakeimg.pl/200×200/. Résultat :

Placeholder sous forme d'image

Pour obtenir une image aux dimensions différentes il suffit de remplacer le premier nombre « 200 » par la largeur voulue et le second par la hauteur voulue. Simple non ? Eh bien il est possible d’aller plus loin ! Pour l’instant, la couleur est grise mais il est possible de créer une image jaune par exemple : http://fakeimg.pl/400×200/fff000/. Résultat :

Placeholder custom : jaune et taille personnalisée

 

 

Vous l’aurez compris, il suffit de changer la valeur « fff000 » par la valeur hexadécimale de la couleur que vous souhaitez. Maintenant nous pouvons préciser la couleur du texte avec un autre paramètre : http://fakeimg.pl/400×200/fff000/000/. Résultat :

Placeholder custom : jaune et couleur de texte personnalisée

 

Là aussi, il suffit de remplacer le code « ooo » par la couleur du texte. Enfin, le texte peut a tout moment changer afin d’éviter que ce soient les proportions de l’image qui soient affichées. Il est aussi possible de changer la police du texte. Testons cela avec l’URL http://fakeimg.pl/350×200/ff0000/000/?text=Hello%20World&font=lobster :

Placeholder custom : rouge et texte personnalisé

 

Vous pouvez désormais utiliser ce site pour générer tout type d’images n’ayant pas besoin d’être graphiques. Pour les intéger sur votre site il y a 2 solutions : soit vous enregistrez l’image sur votre ordinateur, soit vous mettez le lien du site directement dans la balise « img » de la façon suivante :

<img alt="" src="http://fakeimg.pl/350x200/?text=World&font=lobster" />

Vous avez maintenant toutes les cartes en main pour mettre du contenu sur vos sites et vous concentrer sur les fonctionnalités et le design !

Créer son site e-commerce avec Thelia


Logo de TheliaLorsque l’on désire créer un site, on utilise souvent un CMS (Content Management System, soit en français Système de Gestion de Contenu). Ces derniers correspondent à des sites pré-construits. Il est par exemple possible en quelques clics, grâce à l’un des CMS les plus connus, WordPress, de créer un site de type blog pouvant également contenir quelques pages, etc. Dans cette article, nous allons voir comment créer un site e-commerce en quelques clics grâce à un autre CMS nommé Thelia.

 

1. Pré-requis

Avant de commencer à créer notre site, vous devez savoir comment utiliser un site en PHP, soit en possédant un serveur web, soit en sachant utiliser un logiciel tel que Wamp sour Windows, Mamp pour Mac ou Lamp pour Linux. Si vous ne savez pas comment utiliser un tel logiciel, je vous recommande ce tutoriel sur le Site du Zéro.

Nous allons également avoir besoin de télécharger le CMS en question. Pour ce faire, rendez-vous sur le site officiel, puis dans la zone de téléchargement. Téléchargez ensuite la dernière version stable. Celle-ci est affichée au dessus de toutes les autres. Lors de l’écriture de cet article, il s’agit de la version 1.5.1, il est possible que votre version soit supérieure mais la procédure sera la même :

Téléchargement du CMS Thelia

 

Une fois le fichier téléchargé, décompressez le et placez le dans le dossier local correspondant pour votre système (celui-ci porte généralement le nom www comme « /var/www » par exemple sous Linux, ou bien le dossier www du répertoire Wamp pour Window, etc.). Vous pouvez également renommer ce répertoire comme bon vous semble.

 

 2. Installation du CMS Thelia

A partir de maintenant, vous êtes supposés savoir comment lancer votre serveur local (wamp, lamp ou mamp) et vous avez placé Thelia dans le bon répertoire. Il vous suffit maintenant de vous rendre dans votre répertoire local avec un navigateur web (« http://localhost/ » le plus souvent) puis de cliquer sur le site correspondant à votre version de Thelia (le répertoire que vous avez décompressé précédemment). Vous devriez voir cette page :

Installation de thelia étape 1

Bravo, le plus dur est fait (si si). Pour lancer l’installation, cliquez sur continuer pour atteindre une nouvelle page affichant si tous les éléments sont corrects. Si c’est le cas, vous pouvez continuer et passer à l’étape suivante. Si ce n’est pas le cas et que votre version de PHP n’est pas la bonne, effectuez une mise à jour.

A l’étape suivante, renseignez vos identifiants de connexion à la base de données. Si vous travaillez en local, le serveur de base de données sera probablement localhost comme dans la capture d’écran ci-dessous. Si vous avez pris un hébergement comprenant une base de données chez un hébergeur comme OVH par exemple, vous pouvez retrouver ces identifiants dans votre espace utilisateur :

Installation de Thelia étape 2 - connexion à la base de données

Si vos identifiants ne sont pas corrects, Thelia vous affichera un message d’erreur. Il faut impérativement que ce dernier établisse une connexion à la base de données pour s’installer.

A l’étape suivante, si vous êtes en local, je vous conseille de remplir le champ « Vous pouvez aussi choisir de créer une base : » en donnant un nom propre à votre base de données, comme par exemple « vente_peluches » si vous voulez faire un site de vente de peluches 🙂 . Si vous êtes sur un hébergement, vous n’avez peut-être pas le choix et devrez utiliser l’unique base de données disponible. Une fois la base de données choisie ou créée (dans le cadre de cet article, la base de données s’appellera « site_test »), cliquez sur Continuer. Vous constaterez qu’il faudra un certain temps avant d’accéder à l’étape suivante. C’est normal car Thelia crée tout ce qui lui est nécessaire dans la base de données. D’ailleurs, si vous jetez un coup d’oeil à celle-ci, vous verrez qu’elle est déjà bien remplie :

Base de données Thelia

L’étape suivante est la plus importante. La plupart des champs sont implicites, cependant pour le dernier, n’oubliez pas de donner l’url exacte du site en question (et non pas seulement « http://localhost »). Voici pour ma part le résultat :

Installation de Thelia étape 3 - Configuration

Une fois l’installation terminée, Thelia vous demande de supprimer le répertoire install. Vous pouvez le faire sans hésiter :

Fin de l'installation du CMS TheliaSuppression du répertoire install

Je vous laisse ensuite visiter votre tout nouveau site ! Testez également la partie d’administration qui est très bien faite. Vous pouvez ajouter des catégories, sous catégories, des produits :

Aperçu de l'interface d'administration de Thelia

Les modifications sont directement visibles sur le site, notez que la gestion des inscriptions, connexions, du panier, etc. est déjà faite. Vous n’avez quasiment plus rien à faire !

Aperçu du résultat d'une recherche dans Thelia

3. Et maintenant ?

Afin de personnaliser votre site internet, vous devrez principalement modifier le design. Le plus gros du travail s’effectuera donc dans le répertoire template du site, notamment dans le fichier styles.css. Des connaissances en design et en CSS sont requise pour ce travail. Si vous souhaitez modifier la structure même du site (en modifiant le header ou le footer par exemple), il faudra s’attaquer directement aux fichiers HTML de ce même dossier.

Enfin, nous verrons dans un prochain article qu’une des forces de Thelia est que l’on peut lui ajouter des plugins. En effet, pour l’instant nous ne pouvons pas utiliser le mode de paiement Paypal par exemple (qui est très utile pour les clients). Nous ajouterons donc ce système dans un prochain article. Jusque là, faites un tour sur l’interface d’administration, faites des tests, des tests, et encore des tests 😉

Créer le design de son site rapidement avec Bootstrap


Bonjour à tous ! Jusqu’à présent, pour réaliser un site web je créais à chaque fois un fichier css vide qui se remplissait au fut et à mesure de la progression du site. J’ai récemment découvert le projet Bootstrap (fait par Twitter) qui permet d’avoir un css de base avec de nombreuses configurations préétablies !

 

Voici un exemple de design possible en liant ce css à votre site (cliquez sur l’image pour arriver sur la page de démonstration) :

Le CSS Bootstrap permet de mettre en forme les formulaires, tableaux, menus, boutons mais aussi de fournir des barres de progression, etc. En bref, si vous avez un petit site original à faire sans se prendre la tête dans le CSS, vous savez quoi faire maintenant !

Python : hasher un fichier avec md5 et sha1


Utilisateurs de python, je vous souhaite la bienvenue ! Cette semaine je vous offre 2 fonctions bien utiles dans certains cas. Elles permettent d’effectuer une empreinte de vos fichiers en utilisant le md5 et/ou le sha1. Ces 2 hash sont assez vieux et commencent à être obsolète toutefois ils sont encore très utilisés !
Une fonction effectuant un « hash » génère une empreinte qui est « normalement » unique pour chaque fichier (il y a parfois des collisions, c’est-à-dire 2 fichiers différents ayant la même empreinte, mais c’est extrêmement rare). Sans plus attendre, voici le code python permettant de calculer l’empreinte md5 ainsi que l’empreinte sha1 :

import hashlib
 
def sumFileMD5(filePath):
	fichier = open(filePath, 'r')
	c = hashlib.md5()
	while 1:
		try:
			d = fichier.next()
			c.update(d)
		except: break
	fichier.close()
	return c.hexdigest()
 
def sumFileSHA1(filePath):
	fichier = open(filePath, 'r')
	c = hashlib.sha1()
	while 1:
		try:
			d = fichier.next()
			c.update(d)
		except: break
	fichier.close()
	return c.hexdigest()

 

Les fonctions calculant des empreintes sont toutes différentes. C’est pour cela qu’il y en a plusieurs. Pour pouvoir utiliser ces 2 fonctions vous n’aurez qu’à envoyer en paramètre l’adresse du fichier. Exemple pour le fichier suivant :

?Download lorem.txt
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum consectetur sapien, a ultrices orci pharetra eu. Aliquam adipiscing varius eleifend. Curabitur congue blandit odio sit amet aliquet. Cras accumsan mattis nibh non lobortis. Praesent pretium pellentesque euismod. Aliquam ac orci quis turpis lacinia sodales. Duis porta, elit in tempor tempor, leo dui ornare sapien, et sollicitudin mi metus quis felis. Nullam sed sapien purus, vel ultrices sem. Curabitur nec quam vulputate felis fermentum interdum id vitae justo. Donec vehicula augue a justo hendrerit in pellentesque elit mollis. Fusce at turpis at massa vehicula ornare vitae ut massa. Phasellus egestas, neque ut vehicula luctus, lacus tellus volutpat est, sed tincidunt lacus dolor ut lectus. Curabitur hendrerit ornare urna sit amet iaculis. Praesent eleifend placerat est, ut mattis lorem commodo vitae.

 

Ajoutez ces ligne en bas du fichier python :

?View Code PYTHON
md5 = sumFileMD5('lorem.txt')
sha1 = sumFileSHA1('lorem.txt')
 
print "Empreinte md5 = %s"%md5
print "Empreinte sha1 = %s"%sha1

 

Résultat lorsque vous exécutez le script :

Empreinte md5 = f0383024ac976ceb01cf6eb9f2bb4db2
Empreinte sha1 = d34d3b058b929ec271f63267b5f014db4210f8ec

Ajout de mon second jeu iPhone : Sorting Balls


Bonjour à tous !

Place maintenant au second jeu de Plurigames. Celui-ci s’appelle Sorting Balls. Le but du jeu est simple. Le fond est constitué de 2 ou 3 couleurs, il vous suffit de placer les balles dans les zones de leurs couleurs respectives pour remporter la partie. Pour ce faire vous n’avez qu’un moyen : les balles se déplacent chacunes dans un sens et vous ne pouvez déplacer que le mur central.

Aller sur la page du jeu

Ma première application iPhone (Super Brick Breaker), et mon site dédié aux jeux


Bonjour tout le monde, aujourd’hui ce n’est pas une mais deux créations qui sont mises en avant. Tout d’abord celle de ma première application iPhone appelée Super Brick Breaker. Comme son nom l’indique il s’agit d’un jeu de casse brique classique avec un mode normal, des challenges à remporter, un générateur de niveaux, etc. Il n’y a pas moins de 120 niveaux en tout dans le jeu et il est disponible à cette adresse : Super Brick Breaker sur l’AppleStore.

Comme je l’ai dit plus tôt cette news contient une seconde création. Celle-ci est proche de la première puisqu’il s’agit d’un site que j’ai mis en place et qui sera consacré aux jeux que je ferai à l’avenir (en fonction du temps disponible). Celui-ci s’appelle Plurigames et contient seulement pour l’instant Super Brick Breaker. Un second jeu va bientôt faire son apparition mais je n’en dit pas plus (il fera l’objet d’une news le moment venu).

Toutes les informations concernant mes jeux seront donc sur Plurigames. A bientôt !

Aller sur le site Plurigames

Programmation iPhone – Cacher la barre de status de son application


Lorsque l’on programme pour iPhone, on commence par choisir un projet de base parmi ceux proposés par Xcode (Navigation-based Application, OpenGL ES Application, Split View-based Application, etc.). Cette phase a pour but de préparer un projet plus ou moins préparé pour le type d’application que l’on cherche à créer. Cependant, dans un certain nombre de ces projets, lorsque l’on en crée un et qu’on lance le simulateur, on s’aperçoit que la barre de status de l’iPhone est présente. Dans l’exemple ci-dessous, j’ai créé un projet « Navigation-based Application » appelé « Exemple », puis lancé le simulateur en cliquant sur le bouton « Run » :

 

Nous allons maintenant voir comment cacher cette barre de status gênante.

 

ATTENTION : la barre de status permet d’afficher à l’utilisateur certaines informations comme l’état de sa réception réseau, l’heure actuelle ainsi que son niveau de batterie. Cacher cette barre ne doit se faire que pour améliorer le confort de son application et donc seulement en cas de nécessité. Le meilleur exemple est celui d’un jeu vidéo pour iPhone dans lequel la barre de status est bien plus gênante qu’utile.

 

Si vous regardez bien votre projet, vous vous apercevrez que celui-ci comporte un dossier appelé « Supporting Files ». Déroulez le pour faire apparaître son contenu. Parmi ces fichiers, un seul nous intéresse : « exemple-Info.plist ». Cliquez dessus pour voir son contenu s’afficher sur la droite. Ce fichier contient certaines informations utiles pour votre application. Nous allons en ajouter une, celle demandant à l’iPhone de masquer la barre de status. Pour cela, faites un clic droit n’importe où dans ce document puis sélectionnez « Add Row » (ajouter une nouvelle ligne). Une clé vous est demandé, commencez à taper « Status » et vous verrez que Xcode vous propose de remplir le champ key par « Status bar is initially hidden ». Cliquez dessus (ou tapez l’intégralité de la clé comme vous voulez). Cette information attend un booléen qui est par défaut initialisé à NO. Double cliquez sur ce booléen pour pouvoir le modifier, tapez « YES » puis faites « Entrer », sauvegardez votre projet et enfin cliquez sur « Run » pour voir le résultat. Magie : plus de barre de status ! Voici la procédure en quelques captures d’écran :


Intégrer un calendrier javascript pour vos formulaires


Récemment, j’ai eu besoin d’intégrer un calendrier en javascript pour un formulaire sur un site web. N’ayant pas le courage de le faire moi-même et sachant qu’il y aurait surement plein de programmeurs ayant publié le leurs sur le net, je me suis donc mis à la recherche d’un script.
C’est ainsi que je suis tombé sur un code tout simple à programmer donnant le résultat suivant :

Affichage du calendrier lorsque l’internaute clique sur le champ texte

 

L’avantage d’un tel système est clair : l’utilisateur n’a plus qu’à naviguer dans les mois et à cliquer sur le bon jour pour que le champ texte prenne automatiquement la valeur souhaitée (par exemple : 13-02-2011).

Vous trouverez le code source sur espacejavascript.com. Toutefois je l’ai un peu adapté pour avoir le code source dans des fichiers séparés (afin d’avoir le JS, le CSS et le HTML à des endroits différents). Vous trouverez ces fichiers dans l’archive téléchargeable ci-dessous :

Cliquez ici pour télécharger le fichier ZIP contenant le code source

Librairies javascript utiles


Librairies manipulant la balise « canvas »

http://raphaeljs.com/

S’il n’y en a qu’une à retenir pour manipuler la balise canvas, c’est bien celle-ci. Elle permet de réaliser très facilement des dessins vectoriels.

Compatibilité :

  • Firefox 3.0+, Safari 3.0+, Opera 9.5+ et Internet Explorer 6.0+.

http://www.liquidx.net/plotkit/

De nombreux sites professionnels requièrent des graphiques, camemberts… souvent faits en flash. Cette librairie permet de les réaliser très facilement en JS par le biais de la balise canvas.

Compatibilité :

  • avec la balise canvas : Safari 2+, Opera 9+, Firefox 1.5+, IE 6 (en émulé).
  • avec SVG : Opera 9+, Firefox 1.5+, IE6 avec Adobe SVG.

http://www.pixastic.com/lib/

Librairie JS très bien faite pour modifier ses photos / images et les manipuler dynamiquement depuis son site.

Compatibilité :

  • Firefox 2+, Opera 9.5+, Safari.
  • Peut-être quelques problèmes sous Linux (l’auteur ayant surtout testé sous Windows et Mac).

http://code.google.com/p/explorercanvas/

Comme à son habitude Internet Explorer est toujours à la traine. Cette librairie permet d’y remédier en intégrant la balise canvas dans ce navigateur.

http://www.c3dl.org/

c3dl est une librairie permettant de faire facilement de la 3D dans la balise canvas par le biais de WebGL. La documentation est assez complète et couplée de nombreux tutos.

Librairies utiles

http://code.google.com/p/cookies/

Manipuler des cookies en JS n’est pas très compliqué en soi. Mais avec cette librairie même ma grand-mère pourrait le faire les mains dans le dos… Possibilité de manipuler une liste de cookies, de les éditer en une simple ligne… jQuery n’est pas obligatoire mais combinée avec celle-ci elles permettent de mettre tous les champs d’un formulaire en cookie. Utile pour un site non PHP ?

http://pajhome.org.uk/crypt/md5/index.html

Cette librairie permet d’utiliser la fonction md5 en JS mais pas seulement : RIPEMD-160,
SHA-1, SHA-256, SHA-512. Bref, il y a de quoi faire.

http://code.google.com/p/datejs/

Dans certains développements il devient utile d’utiliser les dates. Datejs permet de faciliter
leur utilisation. Il devient alors facile d’ajouter des jours, d’en soustraire, de comparer 2 objets Date…

http://www.gscottolson.com/blackbirdjs/

Blackbird est une librairie de débogage de javascript. Elle permet d’éviter de faire des «
alert » à répétition. A mon avis elle peut se révéler très utile !

http://xregexp.com/syntax/

Les regex en JS sont un calvaire ! Cette librairie essaye d’y rajouter des fonctionnalités
pour qu’elles soient plus puissantes.

http://alexgorbatchev.com/wiki/SyntaxHighlighter

Il est parfois utile de mettre du code dans son site (lors de tutos, d’explications…). SyntaxHighlighter permet de le colorer en fonction du langage de programmation (de nombreux langages sont pris en compte).

http://phpjs.org/

Avec cette librairie, beaucoup de fonctions PHP ont été réécrites en javascript. Mieux que cela, plutôt que de télécharger un package de fonctions dont seulement la moitié vous sera utile, créez le votre sur cette page : http://phpjs.org/packages/configure !

Source : mensuel de developpez.com

Menu