Nukium » xhtml

Les origines de la balise

Nukium — Thu, 08 Jul 2010 22:17:38 +0000

" src="http://www.nukium.com/wordpress/wp-content/uploads/2010/07/dont-you-see-me-blink.png" alt="Les origines de la balise " width="500" height="177" />

Vous êtes vous déjà posé la question des origines de la balise HTML ? Oui vous savez, celle-ci même qui permettait de faire clignoter du texte HTML dans un navigateur avant même que vous n’ouvriez votre premier tutoriel sur le site du zéro. Si cette période remonte à la semaine dernière, vous ne voyez sûrement pas de quoi je veux parler, c’est pourquoi les utilisateurs de Mozilla Firefox pourront voir ce texte clignoter (grâce à une propriété CSS qui n’est autre qu’un lointain héritage de la balise ).

La vraie question aujourd’hui est de savoir pourquoi l’introduction de cette balise déchaîna tant les foules aux prémices du web moderne. La réponse est simple, avez-vous déjà essayé de consulter un site dont la quasi totalité du texte clignote ?

Ajouter au panier CLIQUEZ-ICI Ajoutez-moi à vos favoris J’en passe et des meilleures…

Sans trop caricaturer, l’usage de cette pratique était devenu si courant qu’une majorité s’est élevée contre elle, d’autant plus lorsqu’il fut question de notion d’accessibilité des sites internet.

Aujourd’hui cette pratique est tombée dans l’oubli, surtout au sein de la nouvelle génération d’addicts du W3C Validator (qui dégaine parfois un peu trop vite il faut l’avouer). Pourtant, la balise est née d’une situation assez comique, saupoudrée d’alcool et de développeurs de la première heure. En réalité elle n’aurait jamais dû voir le jour !

Cette histoire nous est contée par Louis J. Montulli II, un pionnier du web puisqu’il participa au développement de Netscape (pour les plus jeunes, il s’agit d’un des tout premier navigateur qui introduisit nombre de concepts actuels du web tel que JavaScript !), et la suite est par ici !

Si cette époque vous intéresse, je vous conseille également la lecture de cette archive dans laquelle on peut lire :

La fameuse balise est la plus ancienne de ces balises exotiques (Netscape 3 ?). Elle a provoqué nombre de crises de nerfs parmi les ayatollahs de l’époque. Elle se contente de faire clignoter du texte.

À part la faute de goût (c’est tarte et laid), elle ne provoque pourtant rigoureusement aucune incompatibilité. Au pire, le texte ne clignote pas… La belle affaire.

Tutoriel : Intégrer un bouton Flattr à son thème WordPress

Nukium — Sun, 16 May 2010 13:24:33 +0000

Présentation de Flattr

Flattr est un nouveau système de « digg-like social » permettant de valoriser et de monétiser la création de contenu sur le web. Le service offre en outre un moyen simple et innovant de rémunérer les auteurs tels que les blogueurs. Veuillez toutefois noter qu’à l’heure ou j’écris ce billet, Flattr est toujours en beta privée.

Si vous lisez ce tutoriel, j’imagine donc que vous disposez déjà d’un compte Flattr et que vous avez en votre possession votre User ID (affiché sur votre Dashboard Flattr).

Intégration d’un bouton Flattr à votre thème WordPress

Premièrement, il vas falloir installer le plugin Flattr pour WordPress disponible ici. L’installation est classique et ne nécessite aucune procédure particulière, utilisez simplement le gestionnaire de plugins de WordPress.

Une fois le plugin installé, un nouvel onglet nommé Flattr est apparu dans le menu Réglages de WordPress. C’est à partir de ce module que vous devez configurer le plugin et en particulier renseigner votre Flattr user ID.

Etant donné que nous allons voir comment ajouter manuellement le bouton Flattr à votre blog, laissez décochée la case « Insert Flattr button automagically« .

Modification des fichiers de votre thème

Désormais le plugin Flattr est correctement installé et configuré sur votre blog. L’étape suivante consiste à modifier les fichiers de votre thème afin d’ajouter l’appel au bouton Flattr et d’ajouter les styles CSS qui afficherons le bouton en haut à droite de chaque article.

Notez que vous devez modifier ces fichiers sur votre hébergement et donc utiliser un logiciel FTP pour effectuer les transferts nécessaires.

1 : Édition du fichier CSS : cherchez et ouvrez le fichier wordpress/wp-content/themes//style.css et ajoutez en fin de fichier le code ci-dessous :

^?View Code CSS

.flattr-container { float: right; margin-left: 15px; }

2 : Édition des templates : nous allons devoir rajouter l’appel au bouton Flattr dans chaque fichier de votre thème servant à afficher un billet. Ainsi, nous allons pouvoir décider d’afficher ou non le bouton sur chaque page de votre blog.

Pour commencer, ouvrez le fichier wordpress/wp-content/themes//index.php et cherchez l’appel à la fonction the_content().

Afin d’afficher le bouton, il suffit de rajouter avant l’appel de cette fonction le code ci-dessous :

^?View Code HTML

Pour afficher le bouton sur la page affichant un billet, vous devez répéter l’opération sur le fichier single.php puis sur les fichiers archive.php, category.php et tag.php s’ils existent pour votre thème. Ainsi, le bouton devrait être affiché sur toutes les pages de votre blog.

Notez que dans ces derniers fichiers, l’appel à la fonction the_content() a pu être remplacé par l’appel à la fonction the_excerpt() qui affiche un résumé de l’article. De la même manière ajoutez simplement le code avant l’appel à cette fonction

En résumé, cette méthode permet de contrôler l’affichage du bouton sur chaque type de page de votre blog et permet également d’appliquer des styles CSS personnalisés si vous désirez un affichage différent de l’affichage par défaut proposé par le plugin Flattr.

A lire également : Flattr : Retour d’expérience après 2 mois d’utilisation….

CKEditor Helper for CodeIgniter

Nukium — Sat, 02 Jan 2010 17:36:59 +0000

Using CKEditor as a plugin into your CodeIgniter applications

CKEditor is a powerfull WYSIWYG text editor licensed under the GPL, LGPL and MPL open source licenses. CKEditor can easilly be added to any web page, you will find below a simple way to integrate CKeditor to your CodeIgniter applications.

Downloading CKEditor

The first step is to download the CKEditor editor package, note that the helper have only be tested over CKEditor 3.0.2. Once done, you should consider to remove the _samples and _sources directories from the uncompressed files.

Then, place the entire ckeditor directory into a /js/ folder. You can place it anywhere but remember to set the correct path when initializing the helper.

Adding the CKEditor helper for CodeIgniter

Download and place the ckeditor_helper.php file into the CodeIgniter’s system/application/helpers folder.

This helper can manage all CKEditor’s available configuration options, custom styles definitions, multiple intances of the editor on the same page and extra config parameters such as toolbar definition.

Creating the controller

First of all, we are going to create a controller that will set all the helper’s configuration options. In this exemple, we are going to instanciate two CKEditors with different configuration values. You are able to set all CKEditor’s available configuration options inside the config array. We are also going to define custom styles to replace the CKEditor’s default styles. Note that the id must match the textarea’s id in the view. Since the 2010-08-28 version, each styles definitions are applied to the associated CKEditor instance, allowing you to use different option set by instance. Since this version, you can also add severals CKEditor instance on the same page and define custom toolbars (thanks to the ronan’s patch ).

^?View Code PHP


 
class Ckeditor extends Controller {
 
	// extends CI_Controller for CI 2.x users
 
	public $data 	= 	array();
 
	public function __construct() {
 
		parent::Controller();
		// parent::__construct(); for CI 2.x users
 
		$this->load->helper('url'); //You should autoload this one ;)
		$this->load->helper('ckeditor');
 
 
		//Ckeditor's configuration
		$this->data['ckeditor'] = array(
 
			//ID of the textarea that will be replaced
			'id' 	=> 	'content',
			'path'	=>	'js/ckeditor',
 
			//Optionnal values
			'config' => array(
				'toolbar' 	=> 	"Full", 	//Using the Full toolbar
				'width' 	=> 	"550px",	//Setting a custom width
				'height' 	=> 	'100px',	//Setting a custom height
 
			),
 
			//Replacing styles from the "Styles tool"
			'styles' => array(
 
				//Creating a new style named "style 1"
				'style 1' => array (
					'name' 		=> 	'Blue Title',
					'element' 	=> 	'h2',
					'styles' => array(
						'color' 	=> 	'Blue',
						'font-weight' 	=> 	'bold'
					)
				),
 
				//Creating a new style named "style 2"
				'style 2' => array (
					'name' 	=> 	'Red Title',
					'element' 	=> 	'h2',
					'styles' => array(
						'color' 		=> 	'Red',
						'font-weight' 		=> 	'bold',
						'text-decoration'	=> 	'underline'
					)
				)				
			)
		);
 
		$this->data['ckeditor_2'] = array(
 
			//ID of the textarea that will be replaced
			'id' 	=> 	'content_2',
			'path'	=>	'js/ckeditor',
 
			//Optionnal values
			'config' => array(
				'width' 	=> 	"550px",	//Setting a custom width
				'height' 	=> 	'100px',	//Setting a custom height
				'toolbar' 	=> 	array(	//Setting a custom toolbar
					array('Bold', 'Italic'),
					array('Underline', 'Strike', 'FontSize'),
					array('Smiley'),
					'/'
				)
			),
 
			//Replacing styles from the "Styles tool"
			'styles' => array(
 
				//Creating a new style named "style 1"
				'style 3' => array (
					'name' 		=> 	'Green Title',
					'element' 	=> 	'h3',
					'styles' => array(
						'color' 	=> 	'Green',
						'font-weight' 	=> 	'bold'
					)
				)
 
			)
		);		
 
 
	}
 
	public function index() {
 
		$this->load->view('ckeditor', $this->data);
 
	}
}

Creating the view

The ckeditor.php view only has to display two textarea elements with matched ids and call the display_ckeditor() helper’s function.

^?View Code PHP

<textarea name="content" id="content" ><p>Example datap>textarea>
 echo display_ckeditor($ckeditor); ?>
<textarea name="content_2" id="content_2" ><p>Example datap>textarea>
 echo display_ckeditor($ckeditor_2); ?>
textarea>

That’s all ! If you’ve followed all the steps correctly, two CKEditors should shows up in the view. Please note that I assume that you are loading also a correct header and footer view with all the xHTML required stuff.

Downloading the tutorial

Source files of this tutorial (controller, helper, and view) can be downloaded here.

Changelog

2010-08-28: Ronan’s patch for custom toolbar definition added (thanks dude!).
2010-08-28: Configuration options are now only applied on the associated CKEditor.
2010-08-28: Several editors can now be displayed on the same page.
2010-01-12: All the stuff moved out of system/plugins.
2010-01-30: Fixed Internet Explorer compatibility issue.

Troubleshooting

If you are using the .htaccess file given by the CodeIgniter’s user guide and have placed the ckeditor’s folder into system/plugins, be sure to allow the directory system to be called via HTTP in order to allow access to the plugins directory

Licence

CKEditor plugin for CodeIgniter by Samuel Sanchez is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.
Based on a work at codeigniter.com.
Permissions beyond the scope of this license may be available at http://www.nukium.com/contact-nukium-developpeur-france/.

Please note that this helper is based on an original idea discussed in this CodeIgniter thread.

HTML 5, une nouvelle plate-forme de jeux vidéo ?

Nukium — Sun, 01 Nov 2009 14:57:06 +0000

Cela fait plusieurs mois que tout le monde ou presque parle de HTML 5, de canvas, de CSS 3 et de bien d’autres nouveautés technologiques à venir. En revanche, les exemples concrets d’utilisation de ces technologies tardent un peu a se diffuser et pour le moment pas mal de développeurs restent dans le flou artistiques vis-à-vis de ces évolutions.

Dans ce billet je ne parlerai pas des applications fonctionnelles comme par exemple Google Wave mais plutôt des tests et autres expérimentations menées ça et là.

HTML 5 pour le jeu vidéo ?

Ce n’est pas nouveau, de tout temps les technologies du web ont été utilisées pour tenter de créer des jeux vidéos, sans parler de Flash qui excelle dans le domaine, on se souvient des embryons de jeux en JavaScript pur, en DHTML, voire en SMIL.

La même chose a été tentée en HTML 5 par Ben Joffe à l’aide des canvas, même si on est loin d’un jeu fonctionnel, les bases d’un First Person Shooter sont bel et biens là :

Canvascape – « 3D Walker » (sans textures)

Canvascape – « Experimenting With Textures »

Même si la version texturée souffre de quelques problèmes de performances, le résultat obtenu avec un peu de code HTML et JavaScript n’en n’est pas moins impressionnant.

Le meilleur pour la fin…

Cerise sur le gâteau, voici une application époustouflante nommée Eye-candy canvas également bâtie autour de HTML 5 et les canvas, alliant interactivité et animation 3D. Celle-ci se présente un peu comme un jeu de réaction en chaine même si l’objectif ici n’est vraisemblablement pas de jouer.

Je vous laisse là découvrir ci-dessous et n’hésitez pas à donner votre avis sur ces 3 applications…

Tutoriel WordPress : Afficher la liste des tags (mots clés) d’un article

Nukium — Thu, 29 Oct 2009 19:21:18 +0000

Ce tutoriel expliquer comment afficher la liste des mots clés (tags) d’un article sous WordPress. Ce tutoriel est destiné aux personnes voulant modifier leur thème pour réaliser cet affichage.

Premièrement il vas falloir ouvrir et éditer le fichier wp-content/themes//single.php.

Nous allons ensuite ajouter du code PHP qui va avoir pour but d’afficher le titre « Mots clés pour ce billet » suivi de la liste des tags du billet :

^?View Code PHP

 $postTags = get_the_tags(); ?>
 if($postTags) { ?>
	<h3>Mots clés pour ce billet :h3>
	<div class="single-tags">	
	 foreach($postTags as $tag) { ?>
		<a rel="tag" href="http://www.nukium.com/tag/$tag->slug ?>/">php echo $tag->name ?>a>
	 } ?>
	div>
 } ?>

J’ai également ajouté un

portant la classe single-tags afin de vous permettre de personnaliser à l’aide de CSS l’affichage des différents tags :

^?View Code CSS

.single-tags a {
	color:#21759B;
	text-decoration: underline;
}
 
.single-tags a:hover {
	text-decoration: underline;
}

A vous de personnaliser le CSS selon vos envies

11 packs gratuits d’icônes de réseaux sociaux pour votre blog

Nukium — Sat, 22 Aug 2009 07:36:50 +0000

Les réseaux sociaux tels que Twitter ou Facebook peuvent se révéler être de formidables outils de promotion pour vos blogs. En effet, ils permettent de partager en un clic une information à l’ensemble de son réseau de contact. C’est pourquoi mettre en avant ces nouveaux moyens de communication sur votre blog ou sur votre site internet peut être important.

Afin de vous aider dans cette tâche, il existe des packs d’icônes gratuits représentant la plupart des grand réseaux sociaux ou moyen de communication du web.

En voici une collection non exhaustive :

Social Network Icon Pack par Komodo Media (52 icônes)

Social Bookmark Iconset par vikiworks (Set 1)

Social Bookmark Iconset par vikiworks (Set 2)

Heart: Free Social Icon Set par The Design Superhero

Free Vector Social Bookmark Icons par snap2objects

Social Media Icon (Freebies) par Arbenting

Social Web Buttons par webfruits (Set 1)

Social Web Buttons par webfruits (Set 2)

WebDev Social Bookmark by ~IconTexto

Socials PNG icons by giZ by ~GiZZiStar

My works sur UtomBox

Bien entendu, gratuit ne signifie pas libre de droits, alors attention toute fois à regarder les licences accompagnant les différents packs.

MooEasyRollover – The easiest rollover image plugin for Mootools !

Nukium — Wed, 10 Jun 2009 17:25:40 +0000

What is MooEasyRollover ?

MooEasyRollover is a plugin for Mootools that allows you to make a simple rollover image without writing any code line !
The plugin is able to detect all images tagged with a specific class in order to add a rollover image behavior with an image caching.

Live Demo

Check out the MooEasyRollover live demo to see it in action !

Why this Mootools plugin ?

I was working on an old website that use the Macromedia function mm_swapimage, when I added some Mootools stuff, I thought it can be cool to be able to do the same work than mm_swapimage with a Mootools class

Installation instructions

Download the MooEasyRollover archive.
Then, add mootools to your page, note that the plugin requires the Assets class of the more builder.
Add the MooEasyRollover class to your page :

^?View Code HTML

Use this code to launch the plugin. Make sure to set options with the correct values according to your server.

^?View Code JAVASCRIPT

window.addEvent('domready', function() {
 
        //MooEasyRollover launcher
	var MooEasyRolloverInstance = new MooEasyRollover({
		MooEasyRolloverClass : 'rollover', //Set the class which tags all buttons to rollover
		fullPath : 'http://www.domain.com/buttons/', //Set the full path to your images folder
		prefix: '-on' //Set the prefix of mouseover images
	});	
 
});

MooEasyRolloverClass is the classname used to identify images to rollover.

Fullpath is the path to the images folder to use.

Prefix is used to identify rollover images, for exemple, in order to rollover button.png you have to create a button-on.png image in the fullPath folder.

Download

Click here to download MooEasyRollover.

1000 icônes gratuites pour vos sites web !

Nukium — Thu, 02 Apr 2009 11:10:14 +0000

Connaissez-vous famfamfam ? Ce site propose gratuitement des packs complets d’icônes sous licence CC (Creative Commons Attribution 2.5 License).

3 packs d’images sont disponibles, un contenant des icônes « smooth » au format png, un autre contenant les mêmes mais pixélisées au format gif, et le dernier contenant 247 images gif/png représentant les drapeaux des différents pays.

Voila une très bonne initiative de la part de fammfamfam.com, et il serait dommage de ne pas en profiter !

Visiter www.famfamfam.com…

Générez facilement vos favicons !

Nukium — Sat, 28 Mar 2009 15:39:49 +0000

Les favicons sont les icônes présentes à gauche de la barre d’adresse de votre navigateur.

Ces images de 16px par 16px peuvent être animés ou non et sont souvent une déclinaison du logo du site.

Il existe un service web entièrement gratuit permettant de générer des favicons à partir d’une image de votre disque dur. Non seulement le service la redimensionne, mais il permet également de paramétrer la couleur d’arrière plan, les bordures etc…

FavIcon from Pics 2.0 génère également des favicons animés ainsi que les icones pour iPod Touch / iPhone.

Pour afficher les favicons sur votre site internet ou votre blog, vous pouvez utiliser le code suivant :

Un favicon classique :

^?View Code HTML

Un favicon animé :

^?View Code HTML

Un favicon pour iPod touch ou iPhone :

^?View Code HTML

Générer des favicons automatiquement avec FavIcon from Pics 2.0

Forcer le mode de compatibilité d’Internet Explorer 8

Nukium — Tue, 24 Mar 2009 11:19:56 +0000

IE 8 est disponible depuis courant mars pour les utilisateurs de Windows. Il est facile de trouver une liste des améliorations qu’apporte cette version sur le web, c’est pourquoi nous nous attarderons uniquement sur les problèmes que peux entraîner celle-ci

Sans rentrer dans le détail (car pour le moment aucune compatibilité avec IE 8 n’est envisagée dans les projets auxquels je participe), voici ce qu’IE ne supporte toujours pas :

La transparence CSS (propriété opacity) ainsi que les valeurs RGBA
Le SVG et la balise HTML Canvas
XForms, WebForms, VoiceXML, MathML
CSS 3 dans sa majeure partie

La question de rendre compatible ou non ses projets web pour le moment se pose tout de même. En effet, une grande partie du marché des pro travaille dans un envirronement système ou intranet cadré par des administrateurs, et ceux-ci ne pourront sûrement pas bénéficier de la mise à jour d’Internet Explorer dans un premier temps. En revanche, les particuliers ont de gros risques de faire la mise à jour par le biais du système de mises à jour automatique de Windows (Windows Update).

C’est pourquoi, une partie de l’audience web utilisera surement ce navigateur dans les prochaines semaines.

Il n’est néanmoins pas nécessaire d’assurer une compatibilité avec IE 8 pour autant ! Et sur ce coup, Microsoft nous tend une perche… En effet, il est possible de forcer IE 8 a passer en mode de compatibilité IE 7 par le biais d’un meta tag :

^?View Code HTML

Voilà qui devrait nous laisser un peu de temps pour apréhender cette nouvelle version de notre navigateur préféré (oupa).