CSS : définir la taille d'un champ texte photo

CSS : définir la taille d’un champ texte

Il y a quelques jours, j’ai été confronté à un bug d’affichage du champ de recherche du site : le champ était trop large et débordait sur le design du site.

Ce bug avait été constaté par Agat il y a plusieurs mois mais comme je ne l’avais jamais constaté, je ne savais comment le résoudre.

Et bien la solution est toute simple ! Lorsque l’on crée un champ texte, on a l’habitude de faire comme ceci :

<label for="recherche">Login:</label> <input id="recherche" tabindex="10" name="recherche" size="15" type="text" value="" />

En fait, la déclaration size="15" ne définit que le nombre de caractères visibles (ce que vous pouvez écrire) dans le champ. Cela ne définit donc pas la taille du champ en lui-même.

Lire la suite

Guide pour créer et héberger un site sur Internet photo 3

Guide pour créer et héberger un site sur Internet

Voici un petit guide qui dévoile les étapes de la création et l’hébergement d’un site Internet. Ce guide est plutôt général et ne se veut pas exhaustif, c’est plus une suite d’étapes pour gagner du temps pour monter et mettre rapidement un site en ligne.

you are here

Sachez que la première chose à faire est définir vos besoins : le type de site que vous allez créer, le public visé, le langage de programmation ou la plateforme choisi, les fonctionnalités à mettre en œuvre, le nom du site et le nom de domaine, votre identité graphique (couleurs, logo)…

Tout doit commencer avec un papier et un crayon : couchez par écrit ce que souhaitez en termes de fonctionnalités et de design.

Faîtes un plan. Je vous promets que vous ne le regretterez pas, c’est du temps gagné pour la suite.

Lire la suite

De l'importance du cahier des charges du développement web photo

De l’importance du cahier des charges du développement web

sandglass

J’ai eu l’occasion récemment d’écrire un formulaire de contact ainsi que son traitement PHP pour une entreprise de construction canadienne qui cherche à recruter du personnel.

Je commence à écrire le code. Je connais bien les formulaires étant donné que c’est l’un de mes premiers scripts (2001 si je ne m’abuse).

Je place le script sur mon serveur, commence ma batterie de tests histoire de pallier toutes les situations auxquelles un utilisateur lambda peut être confronté. Le code que je livre est en en CSS3 et HTML5 valides.

Tout s’affiche impeccablement dans tous les navigateurs. Je me dis que c’est une affaire qui roule lorsque le client m’envoie quelques emails pour me demander quelques corrections, additions, et l’intégration du script dans son site.

C’est là que le vent a commencé à tourner.

Lire la suite

Éviter le contenu dupliqué en spécifiant l'URL canonique photo

Éviter le contenu dupliqué avec l’URL canonique

Google, Yahoo! et Live Search viennent de se mettre d’accord pour essayer de résoudre les problèmes de contenus dupliqués à l’intérieur d’un site : ils ont opté pour la création d’une balise spéciale qui décrit l’URL canonique d’une page (c’est-à-dire son URL officielle) :

rel="canonical"

Le problème : le contenu dupliqué

Ce qui pose problème pour les moteurs de recherche, c’est savoir quelle est la bonne page à indexer lorsqu’un même contenu est disponible à plusieurs adresses différentes.

C’est le problème du contenu dupliqué, ou duplicate content.

duplicate content

C’est mauvais pour le référencement d’un site car pour les moteurs de recherche, une page web ou tout autre document indexable (comme les fichiers PDF, DOC, XLS…) équivaut à une URL.

Cette URL doit être unique pour le robot, pour qui une autre URL correspond à une autre page.

Si ce n’est pas le cas, ces pages dupliquées entrent en concurrence les unes avec les autres dans les résultats de recherche, ce qui n’est pas bon.

Lire la suite

Optimisation du thème WordPress : 30 requêtes SQL gagnées photo

Optimisation du thème WordPress : 30 requêtes SQL gagnées

speedy_gonzales

Je viens d’effectuer une jolie petite optimisation qui devrait bien alléger le serveur sur lequel nous tournons. Vous vous souvenez de l’article WordPress : réduire le nombre de requêtes SQL des thèmes, écrit il y a quelques mois ?

Et bien il se trouve que j’avais tout optimisé tous les fichiers de mon thème – sauf le menu du site qui se trouve dans le fichier header.php !

Ce dernier contenait quasiment une trentaine de requêtes SQL destinées à obtenir les permalinks des pages statiques…

Je m’étais dit à l’époque que si je changeais le permalink d’une page, cela se reflèterait immédiatement dans le menu. Quand j’y pense aujourd’hui, c’est vraiment ridicule.

Lire la suite

CSS : créer une feuille d’impression pour votre site

Une fois que l’on a fini de designer son site pour que tout le monde puisse le consulter et admirer vos talents d’artiste vient le moment de penser à la manière dont votre site est rendu lors de l’impression.

En effet, votre site n’est jamais imprimé sur une feuille tel que vous le voyez à l’écran. Si votre design utilise les feuilles de style (CSS), il suffit d’en créer une destinée à l’impression.

Le principe

Faîtes une copie de la feuille CSS de votre site et nommez-la print.css par exemple.

Décidez ensuite quelles sont les parties qui sont superflues lors d’une impression papier : les menus peuvent être ignorés, tout comme les images de fond :

/* désactivation des menus pour l'impression */
.menu-right {
	display : none;
}
.menu-left {
	display : none;
}

Lire la suite

CKYF : lancement de la boutique

Boutique du CKYF

Allez, j’ai assez fait duré le suspense : je lève le voile sur la boutique du Centre de Kriya Yoga France.

Je me suis démené pour faire un logo potable et il apparaît qu’il n’est pas totalement transparent. J’ai même sollicité l’aide de quelques experts Photoshop et l’image que vous voyez là est le résultat de plusieurs heures de travail.

Et c’est lorsqu’on a eu fini de jouer avec la transparence qu’on s’est posé la question fondamentale suivante : a-ton vraiment besoin de la transparence ? Oui, nous on n’est comme ça, brut de pomme.

Si le fond change, j’utiliserai alors celle qui est transparente. Je crois que je hais les images, c’est sans doute pour cela que mes designs en utilisent si peu.

Bon, ben il ne me reste plus qu’à leur souhaiter bon vent (et bonnes ventes !).

Nouveau look : le thème LSD

LSDJ’en avais un peu marre de la présentation du blog en gris et rouge : j’ai donc travaillé sur un nouveau design le week-end dernier pour pouvoir le tester sous toutes les coutures cette semaine. Aujourd’hui marque donc la venue du nouveau look LSD. Il n’y a rien de psychédélique du tout, c’est juste le seul nom qui m’est venu à l’esprit lorsque j’ai eu fini de jouer avec ma feuille de style – l’histoire du LSD est cependant intéressante. J’ai repris le gris et abandonné le rouge qui commençait à me fatiguer les yeux : le thème est donc un peu plus bleuté et la rubrique “about” a enfin été ajoutée (remarquez, j’ai mis un an avant de me rendre compte qu’elle manquait à l’appel…), je l’étofferai lorsque je serai un peu plus inspiré ;-). Le petit plus : j’utilise maintenant un header qui change aléatoirement à chaque lancement d’une des pages du blog. C’est plutôt sympa, j’ai même ajouté des photos qui n’ont peu (ou même pas du tout) de rapport avec le blog, juste pour varier les plaisirs. La largeur du blog a également été réduite, ce qui améliorera la lecture sur les grands écrans. Lecture parfaite sur un 17″, okay sur un 15″ d’après mes tests.

Il y a juste quelque chose qui me chiffonne un peu : IE. Bah oui, évidemment cela fonctionne sans problèmes avec Firefox, Opera et même Netscape mais IE m’affiche une scrollbar horizontale pour moins de 3 d’une dizaine de pixels qui dépassent. J’ai cherché tant et plus, pas moyen de trouver la ligne qui produit ce phénomène sans tout casser dans les autres navigateurs. Je réitère donc mon (éternelle) requête : si vous lisez ce blog, faîtes-le avec un navigateur qui respecte les standards du Web. Sérieusement, c’est vraiment important pour tous ceux qui créent des designs. En plus, vous y gagnerez au change. Voilà. Ah oui, j’oubliais : vous pouvez toujours revenir au look précédent grâce au Theme Switcher qui se trouve tout en bas du menu.