Noms de couleurs reconnus pour le Web

Ces noms de couleur sont reconnus par la plupart des navigateurs sur le Web.  Ainsi on pourra utiliser le nom plutôt que le code hexadécimal – quoique ce dernier ne porte jamais à confusion pour aucun navigateur.  Ne sont montrées ici, à titre indicatif, que des noms facilement mémorisés. Couleurs classées par ordre alphabétique de noms.

aliceblue #F0F8FF	antiquewhite #FAEBD7	aqua #00FFFF	aquamarine #7FFFD4
azure #F0FFFF	beige #F5F5DC	bisque #FFE4C4	black #000000
blanchedalmond #FFEBCD	blue #0000FF	blueviolet #8A2BE2	brown #A52A2A
burlywood #DEB887	cadetblue #5F9EA0	chartreuse #7FFF00	chocolate #D2691E
coral #FF7F50	cornflowerblue #6495ED	cornsilk #FFF8DC	crimson #DC143C
cyan #00FFFF	darkblue #00008B	darkcyan #008B8B	darkgoldenrod #B8860B
darkgray #A9A9A9	darkgreen #006400	darkkhaki #BDB76B	darkmagenta #8B008B
darkolivegreen #556B2F	darkorange #FF8C00	darkorchid #9932CC	darkred #8B0000
darksalmon #E9967A	darkseagreen #8FBC8B	darkslateblue #483D8B	darkslategray #2F4F4F
darkturquoise #00CED1	darkviolet #9400D3	deeppink #FF1493	deepskyblue #00BFFF
dimgray #696969	dodgerblue #1E90FF	firebrick #B22222	floralwhite #FFFAF0
forestgreen #228B22	fuchsia #FF00FF	gainsboro #DCDCDC	ghostwhite #F8F8FF
gold #FFD700	goldenrod #DAA520	gray #808080	green #008000
greenyellow #ADFF2F	honeydew #F0FFF0	hotpink #FF69B4	indianred #CD5C5C
indigo #4B0082	ivory #FFFFF0	khaki #F0E68C	lavender #E6E6FA
lavenderblush #FFF0F5	lawngreen #7CFC00	lemonchiffon #FFFACD	lightblue #ADD8E6
lightcoral #F08080	lightcyan #E0FFFF	lightgoldenrodyellow #FAFAD2	lightgreen #90EE90
lightgrey #D3D3D3	lightpink #FFB6C1	lightsalmon #FFA07A	lightseagreen #20B2AA
lightskyblue #87CEFA	lightslategray #778899	lightsteelblue #B0C4DE	lightyellow #FFFFE0
lime #00FF00	limegreen #32CD32	linen #FAF0E6	magenta #FF00FF
maroon #800000	mediumaquamarine #66CDAA	mediumblue #0000CD	mediumorchid #BA55D3
mediumpurple #9370DB	mediumseagreen #3CB371	mediumslateblue #7B68EE	mediumspringgreen #00FA9A
mediumturquoise #48D1CC	mediumvioletred #C71585	midnightblue #191970	mintcream #F5FFFA
mistyrose #FFE4E1	moccasin #FFE4B5	navajowhite #FFDEAD	navy #000080
oldlace #FDF5E6	olive #808000	olivedrab #6B8E23	orange #FFA500
orangered #FF4500	orchid #DA70D6	palegoldenrod #EEE8AA	palegreen #98FB98
paleturquoise #AFEEEE	palevioletred #DB7093	papayawhip #FFEFD5	peachpuff #FFDAB9
peru #CD853F	pink #FFC0CB	plum #DDA0DD	powderblue #B0E0E6
purple #800080	red #FF0000	rosybrown #BC8F8F	royalblue #4169E1
saddlebrown #8B4513	salmon #FA8072	sandybrown #F4A460	seagreen #2E8B57
seashell #FFF5EE	sienna #A0522D	silver #C0C0C0	skyblue #87CEEB
slateblue #6A5ACD	slategray #708090	snow #FFFAFA	springgreen #00FF7F
steelblue #4682B4	tan #D2B48C	teal #008080	thistle #D8BFD8
tomato #FF6347	turquoise #40E0D0	violet #EE82EE	wheat #F5DEB3
white #FFFFFF	whitesmoke #F5F5F5	yellow #FFFF00	yellowgreen #9ACD32

Note: Les noms retenus plus haut ne font pas partie des standards web W3C web. Les standards W3C HTML et CSS ne reconnaissent que 16 noms de couleur: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, et yellow.  L’emploi des valeurs hexadécimales dans les documents HTML ou CSS évitera toute erreur.

[Complément]

Color Match Redux. Outil en ligne permettant de voir une palette de couleurs qui s’agencent bien ensemble.

ColorCombos. Trouver la combinaison parfaite de couleurs.

Color Palette Generator. Trouver une palette de couleur s’agençant parfaitement à une image.

Logiciel Volvox Listra Utilitaire portable sans installation pour aider dans le choix des couleurs et fontes à utiliser dans les documents html.

Pantone – pour l’inspiration et les quelques logiciels gratuits après enregistrement.

[php wordpress] Modèle de page personnalisé

Dans Wordpress, les modèles ou ‘templates‘ sont responsables de la présentation générale des pages, normalement en suivant le thème imposé par la feuille de style CSS. Plus souvent qu’autrement cette présentation se fonde sur le fichier index.php et va inclure l’en-tête, les colonnes (gauche/droite), le contenu principal et le pied de page. Mais que faire si pour la présentation d’une page spécifique, l’on désire exclure les colonnes, ou le  pied de page?

C’est là qu’intervient une page modèle personnalisée. Ce fichier php sera placé dans le dossier racine du thème actif. Lors de l’édition de la page on le choisira parmi les modèles disponibles dans la section attribut. Ci-après, vous trouverez un exemple de modèle personnalisé minimal affichant l’en-tête de votre blogue ainsi que le contenu souhaité, mais excluant les colonnes et le pied de page.

<?php
/*
Template Name: Modèle personnalisé1
*/
?>

<?php get_header(); ?>

<div id="bigcolumn">
<div class="postbox">

<?php if (have_posts()) : while (have_posts()) : the_post();?>
<?php the_content(); ?>
<?php endwhile; endif; ?>

</div>
</div>

<!--<?php get_footer(); ?>-->

[Explication]

• La ligne 3 indique le nom du modèle personnalisé. C’est le nom que vous sélectionnerez lors du choix du modèle de page lors de la publication de la page.
• La ligne 7 indique que l’on veut présenter l’en-tête générique de notre thème.
• Les lignes 9 et 10 sont les balises de style à l’intérieur desquelles s’inscrit le contenu principal du texte . Ces balises sont fermées à la fin du contenu. Ces balises varient selon le thème utilisé. Vous devez mettre les bonnes, à trouver dans le fichier index.php ou dans la feuille de style CSS de votre thème.
• Les lignes 12, 13 et 14 annoncent le contenu de la page à publier (s’il existe). Il s’insère à l’intérieur des balises de style.

Ce modèle est ultra simple. On pourra le compléter en ajoutant la commande php pour le pied de page  [ get_footer() ] ou celle pour les colonnes [ get_sidebar() ]. De même, on devra ajuster les balises pour la présentation correcte du contenu.  Celle que j’ai utilisée (bigcolumn et postbox) sont spécifiques à mon thème.

Ce modèle personnalisé m’a permis de présenter ma page CONTACT qui normalement s’affichait avec la colonne de gauche et le pied de page. C’est avec un autre modèle semblable que je publie ma page personnalisée des ARCHIVES. Dans ce dernier cas, le modèle personnalisé est le suivant:

<?php
/*
Template Name: Mes Archives
*/
?>
<?php get_header(); ?>
<div id="content">
<p align="center">
<?php if (isset($Archives)) echo
$Archives->display(); ?>
</p>
</div>
<?php get_footer(); ?>

Ici, $Archives est une variable définie dans une extension (plugin) Wordpress installée.

[Références]

En rappel, get_header(), get_footer(), get_sidebar() sont les variables WordPress qui peuvent être utilisées dans le modèle afin d’inclure les portions voulues du thème actif.

Il est aussi possible d’inclure n’importe quel fichier du thème  actif en ajoutant la fonction suivante au modèle:

<?php include (TEMPLATEPATH . '/NomDeFichier.php'); ?>

Plus d’information sur les pages et modèles Wordpress. Les possibilités de présentations sont infinies.

CODEX – Pages : http://codex.wordpress.org/Pages

CODEX – Template : http://codex.wordpress.org/Templates

CODEX – Stepping into Templates: http://codex.wordpress.org/Stepping_Into_Templates

CODEX – Include tags : http://codex.wordpress.org/Include_Tags

[php Wordpress] Afficher l’heure dans la langue voulue

Un truc infaillible pour afficher l’heure dans la langue voulue et pour un fuseau horaire donné sans modifier la configuration globale de Wordpress (ou autre template). Compatible pour la version php 5 et +

<?php
date_default_timezone_set('-5');
$jour = array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
$mois = array("","Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");
$datefr = $jour[date("w")]." ".date("d")." ".$mois[date("n")]." ".date("Y")." à Québec. Il est ".date("H:i:s");
echo "Nous sommes le ". $datefr;
?>

Usage:

• Définir le fuseau horaire avec  « date_default_timezone_set »;
• Traduire les jours et mois dans la langue voulue;
• Adapter le texte des lignes 5 et 6 comme bon vous semble; à titre indicatif le texte actuel me donne: « Nous sommes le Mardi 22 Septembre 2009 à Québec. Il est 21:55:50
• Placer la fonction à l’endroit souhaité dans le template (Wordpress  ou autre plate-forme) à l’intérieur d’une division appropriée.

[php wordpress] Quelques ressources pour le développement d’extensions

Point de départ pour étendre nos connaissances à propos de la programmation d’extensions sur Wordpress.

Documentation WordPress  – WordPress Codex
Le WordPress Codex est une banque d’information primordiale alimentée par plusieurs développeurs chevronnés. Contient l’information sur les APIs, le ‘comment faire’, les guides, tutoriels, localisation, et plus encore:
http://codex.wordpress.org/Main_Page

WordPress development
Pour obtenir l’information la plus récente sur la programmation des extensions:
Blogue WordPress : blogue officiel Wordpress.org. Là où sont publiées les dernières versions du programme, des outils et composants:
http://wordpress.org/development/

WordPress development updates
Derniers développements du moteur WordPress (core) development:
http://wpdevel.wordpress.com/

WordPress Trac
Pour de l’information en profondeur sur le développement. Tous les bogues et tous les ajouts demandés par les programmeurs:
http://trac.wordpress.org/

WordPress dev IRC channel
Rencontre des développeurs sur un canal IRC (clavardage):
irc.freenode.net, channel #wordpress-dev

Debogage et tests
Pour déboguer et tester les méthodes avant leur publication:
Test des unités (unit testing).
Permet d’effectuer des test indépendants sur les blocs de code et contrôles afin de déterminer s’ils fonctionnent correctement et dans diverses circonstances:
http://simpletest.org/
http://www.phpunit.de/

Tests automatisés complets et calibration des extensions:
http://codex.wordpress.org/Automated_Testing

Listes de discussions
Pour recevoir par courriel des discussions concernant le développement des extensions Wordpress.

WP hackers
Liste de discussions avancée  à propos des idées d’extensions pour  WordPress, et autres sujets:
http://lists.automattic.com/mailman/listinfo/wp-hackers

WP professionals
Liste des développeurs professionnels Wordpress et leurs coordonnées.
http://lists.automattic.com/mailman/listinfo/wp-pro

Autres listes
Autres listes de discussions portant sur les codes, les tests, la sécurité etc..
http://codex.wordpress.org/Mailing_Lists

Podcasts
Quelques poscasts reliés au développement de WordPress et les techniques connextes.

WordCast
Lieu de rassemblement des développeurs Wordpress, leurs dernières trouvailles et opinions à propos des extensions, et autres sujets s’y ratachant:
http://wordcastpodcast.com/

WordPress Weekly

Les dernières nouvelles de la semaine. Parfois des tables rondes sur différents sujets reliés au développement .
http://www.wptavern.com/wordpress-weekly

UBIQUITY

Finalement, si ce n’est pas déjà fait, je vous conseille d’installer l’extension UBIQUITY pour Firefox.  Cette extension nous offre un éditeur couplé à des dizaines de commandes en ligne et utilitaires. Une fois installé, tapez about:ubiquity dans Firefox pour y voir les références.

En visitant la page http://npattison.com/ubiquity/ubiq_php.html (acceptez la page) vous ajouterez automatiquement à Ubiquity une fonction de recherche pour vos commandes PHP. Il existe une commande similaire pour Wordpress Codex qui s’installe en visitant (et acceptant si demandé) la page http://www.prelovac.com/vladimir/ubiquity-plugins/wp-codex-search.

[Références]

Vladimir Prelovac, Creative Solutions, WordPress SEO, Website Performance.
WordPress Plugin Development – Beginner’s Guide. 278p. 2009.
Développer un plugin wordpress avec Eclipse.

twitterPopper – notification rapide des messages provenant de votre compte Twitter

Maintenant version 1.2 (20 mars 2010)

twitterPopper est un logiciel sans installation qui signale l’arrivée des messages provenant de votre compte Twitter. Le message nouvellement reçu est brièvement affiché dans une bulle sur la barre de notification (tray). L’application retient les 20 derniers messages publiés ou plus au choix.

Quelques caractéristiques de la version 1.2:

• nouveaux messages affichés sur la barre de notification, il est possible de désactiver cette fonction;
• mise à jour à intervalle variable;
• tri des messages selon l’auteur, le contenu ou la date de parution;
• [nouveau v 1.2] filtre intégré, pour ne voir que les messages filtrés;
• regroupement des messages par auteur;
• messages ne contenant pas de lien URL affichés d’une couleur différente;
• double-clic sur le message avec lien URL pour atteindre le lien;
• [nouveau v 1.2] envoi de messages
• [nouveau v 1.2] filtres de réception
• application constituée d’un seul fichier, ne nécessitant aucune installation;
• traduction en français à venir.

D’autres fonctions pourront s’ajouter dans un développement futur. L’application est simple, rapide, et très facile à utiliser; un quelconque navigateur n’a pas à être ouvert ou utilisé car twitterPopper est une application autonome. Les messages sont rapidement lus sur votre compte Twitter au format JSON.

Aperçu:

1. Présentation d’un nouveau message ‘pop’ sur la barre de notification. Un double-clic sur l’icône de l’application fait apparaître l’application et sa liste de messages. Un clic droit permet d’activer ou de désactiver la notification. Vous fermez l’application à partir de cet icône.

2. Liste des 20 derniers messages reçus ou plus. Les fonctions de recherche de messages et de regroupement sont montrés au bas de la fenêtre. Un clic sur le titre de la colonne permet d’en trier le contenu. Un mot clé dans le filtre ne fera qu’apparaître les messages contenant ce mot.

3. Messages regroupés par auteur. Note: durant le regroupement, les messages ne sont plus mis à jour. Ils le seront lorsque le regroupement sera désactivé (Ungroup).

4. Les Options. Essentiellement, vous n’avez qu’à inscrire votre nom usager du compte Twitter et votre mot de passe. Ces données sont conservées et cryptées. D’autres options pour filtrer les messages à la source, pour modifier l’intervalle de mise à jour, pour indiquer le nombre de messages à récupérer du compte. Enfin des options pour afficher ou non la boite d’envoi de messages, le regroupement ou la notification.

Téléchargement:

Note: traduction française à venir.

« Page précédente — Page suivante »