Blog Informatique

Un générateur de thème WordPress

Javascript et Css   14 réactions »
A ce point ?PassableIntéressantYeahExcellent! (1 vote(s), moy. : 5,00 sur 5)
Loading...

Il n'est pas toujours simple de trouver un thème WordPress qui corresponde vraiment à ses attentes : couleurs, nombre de colonnes, organisation de différents éléments, ... sans parler de la qualité du code source.

Yvo Schaap a réalisé un générateur de thème WordPress accessible à tous. Sans qu'il soit nécessaire de maîtriser le (X)HTML, JS, PHP, ou le CSS il est très facile de choisir les couleurs du texte, du fond, des liens, ... tout est paramétrable en quelques clics. » Lire la suite

Utiliser un fond aléatoire pour votre blog

Javascript et Css   7 réactions »
A ce point ?PassableIntéressantYeahExcellent! (Votez !)
Loading...

But : utiliser des fonds aléatoires sur un blog/site (démonstration).

On m'a récemment demandé s'il était possible d'utiliser un fond (background) aléatoire sur un blog. La réponse est oui, c'est même très simple.

Avant tout, sachez qu'il existe bon nombre de méthodes pour y parvenir, des plus simples aux plus saugrenues voir lourdes pour votre serveur.

La solution pour laquelle j'ai opté ne consommera aucune ressource supplémentaire vis-à-vis d'un fond unique. Elle est également compatible avec tous les systèmes de cache existants (WP-SuperCache inclus) puisque le code javascript s'exécute sur la partie cliente, c'est à dire le navigateur de l'internaute.

Pré-requis

Il vous faut bien évidemment créer vos fonds et les placer de préférence dans le même répertoire, bien que ce ne soit en rien une obligation.

Pour l'aspect pratique nous utiliserons un chiffre pour distinguer les fonds : fond1.jpg, fond2.jpg, fond3.jpg, etc.

Une pincée de CSS

Nous allons tout simplement jouer sur le contenu de la feuille de style. L'image de fond va être appliquée directement sur la balise BODY.

Nous devons dans un premier temps définir les différents attributs pour le fond :

Puis, créez X classes CSS, X correspondant même nombre que vous avez de fonds :

Enregistrez et envoyez votre fichier CSS sur le serveur, puis passons à la suite.

Un grain de javascript

La dernière étape consiste à ajouter une ligne de code Javascript pour permettre l'appel aléatoire d'une des classes CSS, chacune faisant appel à un fond différent.

Remplacer votre balise "<body>" par :

C'est fini !

Conclusion

Enregistrez et envoyer tous les fichiers modifiés, pensez à vider votr système de cache si vous en utilisez-un.

Cette méthode est simple mais fonctionnelle. Vous pouvez tout à fait utiliser jQuery, mootools, ou tout autre framework JavaScript si vous êtes à l'aise avec. N'hésitez pas à partager votre code dans les commentaires.

Voir la démonstration.

SpriteMe (I’m Famous) : optimiser le chargement d’un site

Javascript et Css   6 réactions »
A ce point ?PassableIntéressantYeahExcellent! (Votez !)
Loading...

SpriteMe est un webservice très pratique permettant d'optimiser le poids d'une page web, ce qui influence directement son temps de chargement. SpriteMe est capable de générer vos sprites CSS de façon complètement autonome.

» Lire la suite

Un formulaire de création d’utilisateurs LDAP avec jQuery

Javascript et Css   3 réactions »
A ce point ?PassableIntéressantYeahExcellent! (2 vote(s), moy. : 3,00 sur 5)
Loading...

Objectif : générer de façon autonome les identifiants de connexions de chaque utilisateur pour un domaine (LDAP ou Active Directory) grâce à un formulaire en jQuery.

Essayer la démo.

Seule la partie de nommage sera abordée, la partie de traitement du formulaire ne fait pas partie de l'objet de ce billet.

formulaire-jquery

Que vos utilisateurs soient gérés depuis un serveur LDAP Linux ou depuis un serveur Windows avec Active Directory (qui de toutes façons cache un serveur LDAP), vous devez adopter un nommage strict pour la définition des identifiants et adresses emails des utilisateurs de l'entreprise.

En effet, il n'y a rien de plus ennervant que de constater que certains identifiants (login) sont créés sur la base de prenom.nom puis d'autres sous p.nom ou encore pnom. Tout système informatique se doit d'être organisé et cohérent. » Lire la suite

Google offre ses outils de compression JS

Javascript et Css   Une réaction »
A ce point ?PassableIntéressantYeahExcellent! (Votez !)
Loading...

closure-toolsGoogle est le plus gros consommateur de JavaScript de par sa popularité et ses nombreux services en ligne. Chaque optimisation de code est source d'économies en terme de bande passante, de temps et biensûr de coût.

Il suffit de regarder le code source de Google.com pour se rendre compte à quel point tout est optimisé. Google compresse en réalité toutes les parties de code JavaScript de façon très efficace. De nombreux services seraient pratiquement inutilisables sans ses optimisations (Gmail, Maps, etc.). On se souvient par exemple que Gmail prenait parfois plus de 60 secondes sur une connexion bas débit pour afficher la boite de réception...

compression-javascript

Un contenu web en Java-Script peut réagir  différemment suivant le navigateur utilisé. L'unification des affichages et du comportement des applications fait parti des objectifs de la firme américaine. Pour y parvenir Google vient de sortir une suite d'outils baptisée Closure Tools, tout droit issue du Labs et via le Google App Engine. » Lire la suite

Proposer l’ajout d’un site en favoris pour Firefox en JS

Javascript et Css   2 réactions »
A ce point ?PassableIntéressantYeahExcellent! (2 vote(s), moy. : 3,00 sur 5)
Loading...

favorisHistoriquement, il a toujours été possible avec Internet Explorer de proposer un lien permettant d'ajouter l'adresse de votre site/blog en favoris (marques-pages).

De nombreux sites ont utilisé cette technique qui se révèle aujourd'hui complètement obsolète.

Vous vous doutez bien que ce code est propre à Microsoft et ne respecte en rien ce que l'on trouve dans les standards :

Résultat : qu'aucun autre navigateur ne le prend en charge, exceptés ceux fonctionnant un moteur IE ! Il suffit d'utiliser Mozilla Firefox pour se rendre compte que le code est toalement inactif...

Voici un équivalent pour Firefox (fonctionne également sur IE). » Lire la suite

HTML-ipsum : générer du faux texte mis en forme

Javascript et Css   5 réactions »
A ce point ?PassableIntéressantYeahExcellent! (1 vote(s), moy. : 4,00 sur 5)
Loading...

HTML-ipsum est un générateur de faux texte (Lorem Ipsum) destiné à remplir de texte vos designs pour obtenir un rendu lorsque vous n'avez pas encore de contenu.

html-ipsum » Lire la suite

Une technique simple de lien distant en CSS

Javascript et Css   3 réactions »
A ce point ?PassableIntéressantYeahExcellent! (2 vote(s), moy. : 4,50 sur 5)
Loading...

Voici une technique en CSS pur de sélection de lien distant ("remote link") :

» Lire la suite

Suivez les standards avec le framework SenCSs

Javascript et Css   6 réactions »
A ce point ?PassableIntéressantYeahExcellent! (Votez !)
Loading...

SenCSs est un framework CSS Open-Source (MIT) qui ne vous fournit pas de support de mise en page mais qui vise à prendre en charge tout le reste :

  • polices et tailles de polices
  • paddings
  • margins
  • couleurs
  • tableaux
  • listes
  • blockquotes
  • etc.

Le framework est en fait composé d'un seul et unique fichier CSS que vous pouvez utilisé comme base lors de l'élaboration d'un site web. Il permet d'effectuer un reset de certaines proprietés CSS permettant d'obtenir un rendu identique (ou presque) sous tous les navigateurs.

Oubliez les galères d'alignement et le décallages CSS » Lire la suite

Testeur d’expressions régulières Javascript en ligne

Javascript et Css   2 réactions »
A ce point ?PassableIntéressantYeahExcellent! (Votez !)
Loading...

Pas facile d'écrire les bonnes expressions régulières lorsqu'on ne les manipule pas régulièrement.

Pour valider vos expressions régulières sans avoir à bidouiller votre code, je vous propose de les essayer directement en ligne via le testeur d'expressions régulières de QuentinC :

» Lire la suite