Ici, pas de théorie des couleurs, les palettes sont des créations manuelles des membres de ColourLovers, et les résultats proposés correspondent au Top des palettes couleurs le plus aimées du site.

Alors pourquoi présenter pltts.me, et pas le site original dans ce cas? Tout simplement parce que l’auteur a ajouté sur pltts.me LA fonctionnalité qui manque sur ColourLovers : la recherche par code couleur! De plus, les palettes y sont affichées de façon plus simpliste et présentent directement les codes hexadécimaux sur les couleurs, pas besoin de cliquer pour afficher des détails inutiles.

L’une de mes ressources préférées avec 0to255.

Si les temps ont bien changé avec l’arrivée salvatrice d’IE7 (ouf!), certaines habitudes ont la vie dure, et l’une de Microsoft quand il s’agit de son navigateur Internet, est de s’adapter au ralenti. Même si de gros progrès ont été fait (et pas des moindres!), il est un peu dommage de constater chaque nouvelle version d’IE manquer un wagon à chaque fois… En cause ces derniers temps: l’intégration des nouvelles spécifications CSS3.

Alors forcément le problème est nettement moins prise de tête qu’un design qui saute, néanmoins si vous voulez obtenir le même rendu cross-navigateurs, ce n’est pas encore ça. Par chance, CSS3Pie propose une solution pour y remédier, et cette solution est plutôt simple : quelques fichiers en plus à charger sur son site et à appeler dans les CSS.

Voilà ce que ça donne en détails :

1. Télécharger le pack CSS3Pie et uploadez les fichiers sur votre serveur (ex. dans « css/css3pie/ »),
2. Pour chaque style faisant appel à des propriétés CSS3, ajoutez le code suivant (au sein du style concerné) et le tour est joué:
   behavior: url(css3pie/PIE.htc);

Facile hein ?

Si j’aime bien mon crayon à papier et la gomme qui va avec lors de création d’architectures de petits sites, ce n’est pas forcément la solution la plus adéquate pour les plus gros projets… à moins d’ajouter des ciseaux et de la colle dans ma trousse à outils, je risque de galérer un maximum sur les schémas un tant soit peu complexes. Comme le collage n’a jamais été mon fort, j’ai choisi l’option « logiciel » en ce qui me concerne.

Comme toujours, il existe des solutions payantes, mais également des solutions gratuites, dont deux qui sortent du lot: MySQL WorkBench et SQuirreL. Dans les deux cas, vous pourrez effectuer le même type de travail, à savoir concevoir, modéliser, générer et gérer visuellement des bases de données. En ce qui me concerne, j’ai une large préférence pour la première solution, plus complète: MySQL Workbench.

MySQL Workbench dispose de tout ce dont vous avez besoin pour créer des modèles ER (entité-relation) complexes, mais aussi d’outils visuels pour créer, exécuter et optimiser des requêtes SQL. Il est ainsi possible de partir d’un document vierge ou d’une base existante, selon vos besoins.

La création de diagrammes ER est on ne peut plus simple: vous sélectionnez les tables (créées ou importées) dans votre catalogue, et les déplacez sur un plan de travail virtuel. De là, vous pouvez ajouter des calques pour grouper les objets liés, ajouter des relations entre vos tables, insérer du texte, etc.

Le logiciel est globalement assez intuitif et ergonomique, il est de fait possible de modifier les tables (ajouter une clé, renommer un champ, etc.) en cliquant dessus, ou de plier/déplier les tables de votre choix pour gagner en lisibilité. Le résultat est quant-à lui exportable en différents formats, tel que PNG, SVG, PDF, SQL CREATE/ALTER, etc.

Une même base de données pouvant avoir différents modèles, la navigation au sein du programme s’effectue principalement par onglets. De fait, le premier onglet affiche votre schéma de base (tables, privilèges, scripts, notes), les suivants les Modèles Entité-Relation créés. Si vous avez plusieurs bases de données, celles-ci sont disponibles dans le premier onglet, et il faudra choisir la vue correspondante pour afficher celle de votre choix.

Bien évidemment MySQL Workbench est un outil bien plus puissant ne s’arrêtant pas simplement à la conception de modèles/schémas de bases de données. Cet article met volontairement l’accent sur la création de modèles conceptuels, mais il est possible de réaliser bien d’autres opérations. Par exemple, MySQL Workbench propose divers outils complémentaires, comme une console visuelle, permettant d’administrer facilement les environnements MySQL et ainsi avoir une visibilité optimale sur vos bases de données. Depuis la version 5.2, le logiciel inclut également un Assistant de migration (tables, objets, données) de bases de données, et il est à ce jour possible de migrer vers MySQL des bases suivantes: Microsoft SQL Server, Sybase ASE, PostreSQL et autres RDBMS.

En conclusion, MySQL Workbench est bien plus qu’un simple utilitaire de création de modèles de bases de données, tout en étant l’un des meilleurs du genre. Le tout faisant partie d’un ensemble logiciel cohérent, vous aurez probablement besoin d’un certain nombre de fonctionnalités complémentaire un jour ou l’autre. Puisqu’il est gratuit, autant en profiter!

Ceci est principalement dû à une relative jeunesse, n’empêche, là ou un simple border-radius:5px devrait suffire pour arrondir une div avec un angle de 5px selon les spécifications de la norme, il est souvent nécessaire d’ajouter -webkit-border-radius: 5px, ou -moz-border-radius: 5px (pour ne citez qu’eux) si vous voulez reproduire l’effet sur Chrome ou Firefox (selon les versions).

Heureusement pour les feignants, CSS3Gen existe, et vous permet de paramétrer en quelques clics divers styles à votre convenance. A ce jour, l’auteur propose les 5 générateurs suivants: ombre de boites, ombre de texte, bords arrondis, dégradés, et création de boutons.

Selon l’outil sélectionné, vous aurez accès à différents paramètres, incluant un aperçu en temps réel et bien sûr le code HTML/CSS3 à utiliser. Chaque générateur dispose ses petites explications, et présente la liste des navigateurs supportés… ou non.

Un petit utilitaire en ligne sans prétention pouvant s’avérer très utile !

Voici les principales caractéristiques des menu:

• Pas de javascript (100% CSS)
• Menu « Responsive » (s’adapte à votre résolution écran)
• SEO friendly (liens en dur)
• Compatibilité étendue (à partir de IE7+, et compatible iPhone, iPad, Android, BlackBerry, Windows Phone)
• Possibilité de créer des Mega Menu (incluant des multi-colonnes et sous-menus)
• Rapide (chargement immédiat)

Pas grand chose à ajouter de plus si ce n’est que la structure de ce menu peut parfaitement servir de base pour le développement d’un menu complètement différent.

Heureusement vous nous, Hugo Giraudel et Tim Pietrusky ont eu la bonne idée de créer la bilble du genre : Browserhacks. Grâce à Browserhack, plus besoin de chercher sur le net des hacks CSS improbables ne produisant pas toujours le résultat escompté. Ici, tout a été testé, classé et est foncionnel! En bonus le site est clair et concis, c’est propre et efficace, bref du beau travail!

Tous les hacks sont classés par navigateur, type de hack (sélecteur, propriété, media, javascript), version de navigateur concernée, et il est même possible d’effectuer une recherche pour gagner quelques micro-secondes sur votre journée bien remplie.

Que dire de plus, si ce n’est qu’il faut bookmarker ce petit pense bête bien utile!

Dans le même style, si vous recherchez plus particulièrement des menus CSS3, le site vous propose une 50aine de menus de bonne qualité. Quelques tutoriaux vous permettent également d’apprendre comment créer divers effets et éléments CSS3, tels que infobulles, boutons, formulaires, etc. Un démo est à chaque fois disponible en plus des fichiers à télécharger.

En bonus, une collection d’outils tiers est disponibles.

S’il est facile de créer des images avec PHP (grâce à l’extention GD notamment), il est beaucoup plus compliqué de manipuler tout ou portion de site de la sorte. Pourtant, ce travail est souvent bien utile : que ce soit pour générer des PDF à la volée (les librairies les plus connues telles que TCPDF interprétant mal les classes CSS), transformer une div en image pour des besoins SEO ou plus simplement proposer une vignette à la façon de thumbshots.org; vous aurez besoin d’une solution.

Malheureusement, rien n’existant nativement, il faut trouver des astuces. Si vous recherchez des mots clés tels que « div to image », « PHP screenshot » et j’en passe, vous vous rendrez vite compte que les résultats gravitent  tous autours d’un même script: html2canvas.

Html2canvas vous permet de capturer des pages entières ou des portions de celles-ci, via le navigateur de vos visiteurs. Le screenshot est basé sur le DOM, c’est à dire qu’il ne représente pas directement ce qu’il y a à l’écran, mais qu’il interprète ce qu’il est sensé y avoir à l’écran. Petite nuance pour préciser que ce n’est donc pas une capture forcément 100% identique à ce que vous pouvez voir à l’écran, du moins théoriquement, parce que dans les faits, c’est complètement conforme.

Le seul petit problème de cet outil, c’est son manque d’explications. Même si cela reste simple à mettre en œuvre, ce n’est pas forcément évident pour tout le monde, selon son niveau. Je vais donc brièvement expliquer comment intégrer ce système sur son site.

La première chose à faire, c’est de télécharger (ou copier/coller) le fichier, puis de l’inclure dans votre page.  Sachant qu’il s’agit d’un script jquery, il vous faut insérer les lignes suivantes dans votre <head> :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="lienvers/html2canvas.js"></script>

Ensuite, vous devez paramétrer html2canvas selon vos objectifs. Dans cet exemple, nous allons convertir une partie du site en image, et l’enregistrer. Pour cela nous ajoutons les lignes suivantes (à la suite):

<script language="javascript">
$(document).ready(function() {
	var capture = {};
	var target = $('#ma-div');
	html2canvas(target, {
		onrendered: function(canvas) {
			capture.img = canvas.toDataURL( "image/png" );
			capture.data = { 'image' : capture.img };
			$.ajax({
			url: "/ajax.php",
			data: capture.data,
			type: 'post',
			success: function( result ) {
				console.log( result );
			}
			});
		}
	});
});
</script>

Au chargement de la page, une capture écran de la div « #ma-div » (remplacer par « body » pour capturer toute la page) sera effectuée, et le résultat envoyé à la page de traitement ajax.php.

Attention : l’erreur traditionnelle consiste à ajouter une div spécifique pour délimiter une partie du site à enregistrer; cependant, si vous avez des div flottantes, cette div n’affichera probablement rien (tout dépend de la structure). Il faut donc s’assurer qu’il y ait réel un rendu du block sur le navigateur. Vérifiez avec FireBug au besoin. Notez qu’il est aussi possible de remplacer la div ainsi convertie par son résultat (se référer aux fonctions jQuery).

Maintenant, il ne nous reste plus qu’a créer la page de traitement du formulaire envoyé, ajax.php, dont voici le contenu :

<?php
$save = str_replace('data:image/png;base64,', '', $_POST['image'] );
file_put_contents( 'img/image.png', base64_decode( $save ) );
?>

Ici, nous envoyons donc la copie dans un dossier img/ (pensez aux droits en écriture), mais il est bien sûr possible de faire ce que vous voulez, comme par exemple passer des variables supplémentaires à ‘data’ et créer dynamiquement des noms d’images. N’oubliez pas de sécuriser tout ceci, l’exemple est volontairement simple.

De la même façon, vous pouvez redimensionner, rogner les images, etc.

Et voilà !

nb. Si vous voulez capturer une page distante, commencez  votre lecture sur cette page, car les problèmes sont plus nombreux.

Heureusement pour nous, Eden a eu la brillante idée de centraliser au sein d’une librairie PHP tous les composants nécessaire à ces interactions, les rendant réutilisables tout en gardant une certaine logique. En clair, il vous suffit de connaitre la documentation fournie avec l’API d’Eden pour pouvoir communiquer facilement avec des API tierces, sans même savoir comment les utiliser ! Bien sûr, cela suppose quand même le plus souvent l’utilisation de clés d’identification (à demander à chaque service). Une fois en possession de ces clés, tout se passe avec d’Eden.

A ce jour, les principaux services sont supportés, dont Amazon, Paypal, Youtube, Facebook, Tweeter, Yahoo, etc. Évidemment, si le service que vous souhaitez utiliser n’est pas supporté (ex. last.fm), la librairie ne vous servira à rien…

Pour utiliser Eden, il vous suffit de télécharger la librairie (compressée en un unique fichier en passant!), de la charger sur votre serveur (par exemple dans « inc/lib/ ») et de l’inclure dans vos fichier :

include('inc/lib/eden.php');

S’agissant d’une classe PHP5.3.x, les outils proposés ne fonctionneront évidemment pas sur les versions de PHP antérieures à 5.3. Notez également que les fonctionnalités offertes vont au delà de simples interactions avec des API tierces. Il est ainsi possible de créer un site complet grâce à la librairie, ou simplement de l’utiliser comme complément sur un projet existant.

S’il reste toujours possible d’utiliser une classe spécifique par API selon vos besoins (que vous trouverez par exemple sur PHPclasses.org) ou de parser vous même les réponses  (SimpleXML, XML2Array, etc.), l’utilisation d’Eden permet un réel gain de temps dès lors ou vous avez besoin de vous connecter à différents services web. Le mode de fonctionnement étant identique pour tous les services, le développement est très intuitif et la maintenance simple. Pour ne rien enlever, le code produit est sobre.

Bref, un bon couteau Suisse pour se utiliser les API des principaux services en ligne.

Du coup, si vous êtes confrontés à ce problème, vous avez grosso-modo deux solutions : utiliser un logiciel de découpage automatique du fichier en question, ou utiliser un logiciel plus puissant. Chaque stratégie a ses avantages et ses inconvénients, que je pourrais résumer par le proverbe: le temps…. c’est de l’argent. En clair, avez-vous du temps à perdre ou de l’argent à dépenser dans un programme permettant de répondre à votre besoin?

Pour ma part la réponse est vite vue, je vais donc vous présenter le logiciel que j’utilise: EmEditor. A mon sens, il s’agit de la solution offrant de loin le meilleur rapport qualité/prix pour ce type de travail.

Voici ses caractéristiques :

• Ultra léger et rapide : La vitesse de lancement, d’ouverture des fichiers est monstrueuse ! De loin la plus rapide du marché.
• Ouverture de fichiers pouvant faire jusqu’à 256Go ! (et même plus, avec la fonction d’ouverture partielle),
• Fonction de recherche, recherche/remplacement ultra optimisée: Là où la plupart des programmes pèchent par leur lenteur ou leur manque de fiabilité, EmEditor s’en sort avec brio. Cette fonction est tout simplement démentielle, que ce soit en recherche simple ou avec des expressions régulières, multilingues ou non…
• Extensible (par plugins),
• Macros supportées,
• Système de comparaison (et même de synchronisation) de fichiers : les différences entre les documents sont coloriés dans leurs volets respectifs,
• Correcteur d’orthographe, édition de Sélection Verticale, etc.
• Disponible en version 34 et 64-bits,
• De très nombreux Encodages supportés (UTF-16, UTF-8, UTF-7 et beaucoup d’encodages internationaux),
• Un support réactif,
• etc.

Vous l’aurez compris, EmEditor est un petit bijou, véritable couteau suisse de l’édition de texte, polyvalent, fiable et compact.

Bien sûr des solutions concurrentes existent, mais aucune d’entre elle ne parvient réellement à se hisser à la hauteur de EmEditor, ni même à lui arriver à la cheville pour ce type de travaux. A mon sens, le seul logiciel présentant une alternative fiable et sérieuse est le fameux UltraEdit, même si ses finalités sont au final différentes. UltraEdit se positionne comme un outil de développement, et propose donc tout l’environnement qui va avec, tandis qu’EmEditor se présente plus comme un véritable éditeur de texte.

Si vous souhaitez pouvoir ouvrir et manipuler des fichiers de grande taille de façon optimale, EmEditor est sans aucun doute le logiciel qu’il vous faut. Pour 39$, pourquoi se priver ! Si vous avez des doutes, vous pouvez l’essayez gratuitement pendant un mois.

nb. Notez bien que si vous cherchez avant tout un outil de développement web permettant d’ouvrir des gros fichiers (mais que ce point n’est pas votre problématique principale), regardez plutôt du côté d’UltraEdit.