JunkSource Blog

notfound.org – Faites un Meilleur Usage de vos Pages 404

Ghilas BELHADJ — Thu, 27 Sep 2012 18:55:02 +0000

notfound.org est un site qui vas vous permettre d’installer un petit iframe à la place de vos messages d’erreur 404 (pages non trouvées), cela permettrais entre autre d’afficher aux visiteurs à chaque fois qu’il tombent sur une page inexistante de votre site, une image, ainsi qu’une description d’un enfant disparu.

Exemple: http://junksource.com/pagenotfound

Installation:

Pour installer l’iframe c’est très facile: vous vous rendez sur le site de notfound.org, et vous cliquer sur le bouton: « Oui, je souhaite faire un meilleur usage de ma page 404. » et là on vous propose d’entrez l’url de votre site, ensuite, si le type de serveur de votre site n’as pas été identifié, vous le choisissez dans les type de serveurs qu’ils vous proposent (généralement c’est apache, pour les site tournant sous Linux). Après cela un code vous sera fournis, c’est ce code-là que vous allez insérer dans la page destinée a afficher le message d’erreurs 404 (sous WordPress par exemple, c’est le fichier 404.php).

Cela ne vous prend que quelque minutes à mettre en place, mais permettra peut-être au gens grâce à vous de retrouver leurs enfants perdu.

alors, faites un meilleur usage de vos pages 404

Intégrer Gravatar dans votre site

Ghilas BELHADJ — Wed, 11 Jul 2012 16:58:32 +0000

Si vous voulez utiliser gravatar sur un site WordPress, il suffit de l’activer depuis le back-end de celui-ci, par contre si vous voulez l’utiliser sur votre propre site web (que vous avez crée à la main), ce petit tutoriel est fait pour vous.

Avant de pouvoir intégrer des Gravatar sur votre site, il faudra comprendre la structure des liens de celui-ci. En général un liens vers une image de profil Gravatar est structuré de la manière suivante:

Une partie fixe: http://2.gravatar.com/avatar/

Le mail de la personnne en md5: 7bf4e9a47c5a87fa47719d7f5f9d64be (le hash md5 de mon adresse mail)
Une taille en pixel: ?s=160 (160×160 dans cet exemple)
Un avatar par defaut: &d=http://adresse-de-lavatar-par-defaut.com/avatar.png

ce qui donnerais un lien du genre:

http://2.gravatar.com/avatar/7bf4e9a47c5a87fa47719d7f5f9d64be?s=160&d=http://adresse-de-lavatar-par-defaut.com/avatar.png

remarque: l’avatar par defaut est une image qui s’affichera dans le cas ou aucun gravatar n’est associé à une adresse mail, vous pourrez alors, soit spécifier l’adresse complète d’une image que vous voulez mettre, ou bien choisir l’un des type d’avatar suivant et qui sont aléatoirement généré par Gravatar: monsterid, retro, wavatar, identicon.

?>

la variable $email pourrait par exemple correspondre à l’email de vos commentateurs, ainsi, vous aurez à coté de chacun de leurs messages, leurs avatar respectifs.

c’est fini pour ce tutoriel, j’espère qu’il vous a plut. Et n’oubliez pas d’associer toutes vos adresses emails à votre avatar sur http://gravatar.com/

Ajouter une Coloriation de Code à vos Projets Web Avec Google Code Prettify

Ghilas BELHADJ — Sat, 05 May 2012 13:28:09 +0000

Avant de commencer, nous allons d’abord télécharger Google Code Prettify

Après que nous ayons dézippé l’archive, nous allons nous interessé essentiellement au dossier src, il contient les fichiers prettify.css et prettify.js que nous allons importer dans notre page web.

Maintenant à la fin du document, avant la balise fermante body, on exécute la fonction javascript prettyPrint() qui vas lancer le script de coloriation sur le code, comme ceci :

Ensuite, il ne nous reste plus qu’as tappez le code que l’on veut entre la balise pre muni de la classe prettyprint

/*Test de Coloriation CSS*/
.titre{
    text-align: center;
    color: #333;
}

Le résultat est le suivant :

Par defaut, le langage est detecté automatiquement, mais vous pouvez forcer à utiliser la coloriation d’un langage particulier en ajouttant une autre class lang-[le_langage_choisis] (ex: lang-css), ce qui donnerais ça:

/*Test de Coloriation CSS*/
.titre{
    text-align: center;
    color: #333;
}

Vous pouvez aussi ajouter les numéros de lignes pour le code en ajouttant la class linenums:[numero_première_ligne] (ex: class= »prettyprint lang-css linenums:10″)
ceci rajoutera les numéros des lignes en commançant par 10

Choisir un Theme Pour Google Code Prettify

Vous pouvez télécharger des thèmes de coloriations puis facilement les installer en l’uploadant puis en remplaçant juste le lien vers prettify.css avec celui de votre theme.

sinon, vous pouvez aussi créer le vôtre en vous basant sur le theme par defaut par exemple. Vous n’aurez qu’as ouvrir le fichier prettify.css puis changer une à une les couleurs et styles de chaque élément de code.

Sublime Text : Mon Nouvel Editeur de Texte Préféré

Ghilas BELHADJ — Fri, 04 May 2012 10:46:45 +0000

Ce qui me plait tant dans sublime text

Multiplate-forme

Sublime text est disponible en téléchargement pour diverse plate-formes tel que Mac , linux ou encore Windows. vous pouvez le télécharger à partir du site officiel

La Minimap

Le premier truc qui m’as attiré dans Sublime text, et je suis sans doute pas le seul, c’est la Minimap: une sorte de barre de défilement qui affiche l’integralité de votre code dedans. Vous pouvez, grace à cette Minimap, visualiser l’emplacement ou vous voulez vous déplacer, vous n’aurez ensuite qu’as cliquer dessus et vous y êtes. Vous n’allez donc pas vous embrouller à vous déplacer par-ci par-là dans votre code, Vous avez l’integralité de votre code sous l’oeuil.

Le Design

La plupart des editeurs de codes travaillent avec l’interface par defaut du systéme d’exploitation su lequel ils tournent, ce qui leur offre un affichage différent d’un système à un autre, et qui est souvent pas très agréable.
Sublime Text utilise son propre design: boutons, anglets et menus personalisés.

Une Coloriation de texte agréable

Une coloriation de texte qui ne pique pas les yeux, c’est le rêve des developpeurs. Sublime Text, fait encore plus que cela, il utilise même de l’italic pour styler votre code source, vous pourez donc facilement repèrer vos fonctions php, proprieté css, ou vos balises html misent en valeur avec de l’italic.

Les fonctionnalités de base

Sublime text offre toute les fonctionalités que peut procuré n’importe quel éditeur de code, à savoir:

la coloriation :

l’autocompletion:

la gesion de projets

La recherche et replacement (même avec expressions régulières):

l’indentations automatique de code, la vérification orthographique, etc…

Les fonctionnalités avancées

Il possède des fonctions plus avancées qui permettent de gagner du temps et de l’efficacité, comme la gestion de snippets

la possibilité de rajouter des plugins :

un accées rapide à toutes les fonctionnalité de sublime text (Ctrl+Shift+p)

La gestion de packages (les plugins)

En plus de la puissance que procure sublime text, vous pouvez rajouter des plugins (packages) pour rajouter d’autres fonctionnalité, comme par exemple, la compression css et js, l’enrichissement avec encore plus de snippets, etc…

Réaliser un Background Très Créatif et Original pour votre Site

Ghilas BELHADJ — Tue, 01 May 2012 13:55:43 +0000

L’idée :

Nous allons nous servir d’une image transparente contenant des dessins avec deux couleurs distincts (sombre et claire). Je vais pour cet exemple utiliser l’image suivante :

Lidée, c’est de pouvoir afficher les pictogrammes claire en mettant l’image sur un arrière plan sombre (de la même couleur que les picto sombres), et d’afficher les pictogrammes sombres en les mettant sur un arrière plan claire (de la même couleur que les picto claire).

Coté Pratique

Afin d’illustrer le changement de l’arrière plan du claire vers le sombre, je vais créer un dégradé, que je vais mettre à la fin de la page, comme ça, si le visiteur scroll jusqu’à la fin de la page, il verra son arrière-plan se changer au fur et à mesure:

Découpage de l’arrière plan en vertical pour alléger l’image :

Passons au code

HTML

Vous allez rapidement conclure que nous avons deux backgrounds (l’image et l’arrière plan), pour les contenir, on vas donc devoir les mettre dans des div différentes.


		
		
			Contenu de la page

body: vas contenir l’arrière plan en dégradé.
picto: vas contenir l’arrière plan en picto.
page: vas contenir le contenu de votre site.

CSS
C’est l’étape la plus important pour la création de ce genre d’arrière plan, on vas mettre en place dans un premier temps l’arrière plan en dégradé sur le tag body

body{
	background: url(img/bg.jpg) repeat-x left bottom #d3d3d3;
}

img/bg.jpg: c’est le chemin vers le dégradé.
repeat-x: permet de répéter le dégradé sur l’axe horizontale (l’axe des x).
bottom: permet de positionner le dégradé à la fin de la page
#d3d3d3: c’est la couleur de l’arrière plan sans le dégradé.

Maintenant, on vas mettre en place l’image picto.png qui sera « fixé » en bas de la feunêtre du navigateur.

#picto{
	background: url(img/picto.png) repeat-x left bottom fixed;
}

fixed: c’est le mot clé le plus important dans ce code, c’est lui qui permet de garder l’image fixé en bas.

Voir la Demo – Télécharger le Source

C’est la fin de ce tuto, j’epère qu’il vous a plu. Maintenant il ne vous reste plus qu’a faire preuve d’imagination pour créer vos propres images d’arrière plan, et les implémenter à votre site. N’hésitez pas à demander de l’aide dans les commentaires si vous avez le moindre problème.

33 Screencasts & Podcasts Gratuits sur le Developpement Web/Webdesign

Ghilas BELHADJ — Sun, 29 Apr 2012 07:47:37 +0000