Articles de la catégorie "Tutoriels"

Les thèmes WordPress sont de plus en plus courus par tous : débutants, blogueurs confirmés ou professionnels du web. Il est possible d’en obtenir gratuitement un peu partout sur la toile, pas toujours de bonne qualité, pas toujours très sécurisés, comme il est possible d’en obtenir de payants (je n’ai pas dit qu’ils étaient mieux). Dans tous les cas il est possible de les personnaliser.

Un Slideshow sur une page d’accueil, c’est joli, c’est à la mode, mais c’est souvent lourd à intégrer. Il vous faudra des compétences certaines en jQuery, ou utiliser des plugins déjà prêts.
Aujourd’hui je vous propose un tutoriel pour créer un infinite slideshow en quelques lignes de code.

Le plugin jQuery InView permet de déclencher des actions en JavaScript en fonction de l’apparition à l’écran d’un élément ou d’une partie de cet élément. Il est donc facile d’imaginer toutes sortes de succession d’animations ou d’actions asynchrones grâce à ce plugin. Voyons comment l’utiliser.

Désolé pour le titre à rallonge, je n’ai pas trouvé plus court. J’ai eu besoin pour un client de rendre privé un post lorsqu’il était publié dans certaines catégories. L’idée initiale étant de lui simplifier la tâche et d’éviter les erreurs de publication.

Il y a quelques jours de cela je répondais à un petit tweet d’un confrère pour donner une astuce sur la création d’un effet graphique de feuilles superposées en CSS3. Le défi était de ne pas multiplier les éléments HTML pour réaliser cet effet. C’est chose faite. Jetons un œil sur la technique utilisée.

Si vous suivez le compte @NoupeMag sur Twitter (ça marche aussi pour mon compte), vous avez certainement vu passer mon slideshow en CSS3 datant de l’an dernier.
Ce n’était pas ma première tentative de slideshow comme le présentent ces premier et second travaux datant de mai 2010.

Microformats, microdata, nouvelle sémantique, nouveaux éléments HTML… Tant de nouveautés qui perturbent les intégrateurs web soucieux de se mettre à jour dans leurs compétences ou curieux de savoir ce dont ils peuvent déjà faire usage dans leurs intégrations.

WordPress possède un formulaire de commentaire adapté à la plupart des blogs. Cependant, comment s’y prendre si vous souhaitez ajouter ou supprimer des champs et personnaliser l’affichage des commentaires ?

Je vous parlais d’une solution pour forcer le téléchargement grâce à un morceau de code dans votre fichier .htaccess dans l’article précédent, alors que je venais juste de découvrir cet attribut HTML5 permettant de faire la même chose en mieux. Pour le moment seul Chrome supporte cet attribut.

Le « force file to download » (entendez forcer le fichier à se télécharger) permet de forcer le navigateur à ouvrir la boîte de dialogue de téléchargement pour certains types de fichier. C’est le cas par défaut des fichiers de type archive (.zip, .rar, etc.) si je ne fais pas erreur.

Utiliser CSS3 c’est bien, mais pas suffisant. Il ne s’agit pas d’un nouveau langage de style, mais bien d’ajouts à CSS2.1. Il serait donc prématuré de vouloir se jeter sur CSS3 sans maitriser son petit frère.

Ce court article pour vous signaler ma participation au magazine WebDesign Hors Série numéro 14. Cet opus présente un certain nombre d’articles orientés sur les trucs et astuces (et bidouilles, mais promis, je ne vous ai pas pondu de bidouille :p) que je n’ai hélas pas eu le temps de lire entièrement.

Il y a quelques temps déjà, Lea Verou proposait d’utiliser la propriété max-height afin d’effectuer des animations sur un élément sans toucher à la propriété height. Avec une petite adaptation, il est possible de créer un menu déroulant au survol avec un petit délai créé grâce à la propriété CSS 3 transition.

Retour des tutoriels CSS avec quelque chose d’un peu original pour cet article : un effet parallaxe uniquement en CSS3.
C’est à la suite de l’article de Simon Kern sur Alsacréations que m’est venue l’envie de tenter d’utiliser CSS pour reproduire cet effet initialement conçu avec JavaScript.

HTML5 apporte son lot de nouveautés également dans nos bons vieux formulaires. Proposant historiquement un nombre assez limité de types de champs (text, password, file, radio, checkbox, submit, image, hidden, reset,button) et d’éléments de contrôle (<textarea>, <select>, <option> et <optgroup>, <button>), HTML5 vient bousculer nos habitudes en proposant de nouveaux types notamment.

Google affiche un certain nombre d’informations dans ces résultats de recherche. Un aperçu du site, un titre, une description et l’URL référencée est un assemblage assez classique. Des choses peuvent être rajoutées dans l’affichage, dont un système de notation (ou vote). Voyons voir comment procéder.

Manière un peu originale d’aborder les transitions, j’ai lu un article en anglais il n’y a pas longtemps qui proposait d’étudier les transitions sur l’événement hover en CSS.
Par défaut, la transition sur cet événement comme on a l’habitude de l’utiliser nous propose des effets équivalents au «mouseover» comme

Il existe un certain nombre d’indices lors de l’exploration d’un site qui peuvent aider le hacker à dévoiler des failles de sécurité. Il existe également des choses basiques à mettre en place pour vous prémunir de ces quelques failles.