simple 301 redirect

Simple 301 redirect pour gérer les redirections 301

By | Aide et astuces, côté serveur, Plugin Wordpress, Référencement Wordpress | No Comments

Faire une redirection 301 sur WordPress à l’aide de extension Simple 301 redirect.

Si nous utilisons WordPress pour un blog ou un site vitrine, c’est essentiellement pour ses qualités de référencement naturel sur Google. Or Google souhaite simplifier les URL (changements depuis Penguin et Panda) cela nous impose pour les sites les plus anciens d’ajuster certaines pages web afin de maximiser leur fabrication sans pour autant perdre la puissance de la page.

Si la page ne change pas en revanche l’URL, elle va être modifiée.
Alors, pour ne pas perdre la puissance du Netlinking, nous opérons une redirection 301 de l’ancienne page vers la nouvelle page.
Cette redirection, sur la nouvelle URL, peut être faite de différentes manières sur WordPress.

  • Soit à l’aide d’un fichier Htaccess, qui va répertorier les modifications et dans lequel on peut mettre une succession de lignes correspondantes à toutes les URL qui vont être changées et sur lesquelles on souhaite poser une redirection 301.
  • Soit par l’intégration d’un plugin pour gérer la redirection 301, qui fera donc tout le boulot à notre place.

Une extension wordpress de redirection 301 simple, et rapide de configuration pour garder le positionnement de vos pages référencées sur Google.

La première méthode est pratique lorsqu’il s’agit d’automatiser un site largement référencé contenant plusieurs centaines de pages. Mais s’il s’agit d’une simple modification pour une optimisation de votre référencement naturel sur certaines pages, une extension très simple va vous aider à faire cela sur WordPress. L’extension s’appelle simple 301 redirect.

Elle porte plutôt bien son nom puisqu’elle s’active et se paramètre en quelques clics

Du côté gauche vous rentrez les anciennes URL, du côté droit la nouvelle URL, puis vous valider. Par la suite en faisant le test dans votre navigateur, vous pourrez observer qu’en tapant l’ancienne adresse de votre page Web vous tombez directement sur la nouvelle. Il est donc une redirection efficace que l’on observe, mais il y a également une redirection de la puissance Web de la page, ce qui est nécessaire et indispensable si on veut conserver la puissance de référencement de positionnement de l’ancienne page.

Simple 301 redirect est a priori à la référence pour des ajustements de quelques pages ou articles. Mais si jamais cette redirection n’est que provisoire, pensez aux redirections 302 qui sont là pour les sites en travaux.
Pour le reste n’oubliez pas qu’une redirection 301 communique et transmet toute la puissance de l’ancien de la nouvelle page. Attention donc aux pages pénalisées page Penguin : si vous êtes victime d’un déclassement d’une page, il n’est pas forcément malin d’utiliser une redirection 301…

Google Web Font sous WordPress

Utiliser Google Web Font sous WordPress

By | Aide et astuces, Le graphisme et wordpress | No Comments

Utiliser Google Web Font sous WordPress s’effectue en 5 étapes. Relativement simple, il est accessible à tous, même pour ceux qui ne possèdent pas de compte Google.

 

Qu’est-ce que Google Web Font ?

Google Web Font est un site Internet proposé par Google, permettant d’ajouter plus facilement des polices d’écriture à votre site Web. En effet, par défaut les navigateurs Web prennent en compte 9 polices d’écriture qui sont : Arial, Georgia, Helvetica, Lucida, Palatino, Tahoma, Times, Trebuchet et Verdana.
Sans Google Web Font, ajouter des polices d’écriture personnaliser peut vite devenir un vrai casse-tête:

Premier problème, il existe plusieurs formats de fichier pour les polices d’écriture, et les navigateurs Web prennent en en charge qu’un seul formats de fichiers et bien entendu de l’un à l’autre ce n’est pas toujours le même format qui est supporté. Par conséquent, il faut pas moins de 4 fichiers pour que la police d’écriture personnalisé s’affiche correctement sur tous les navigateurs. Sans compter le fichier JavaScript pour les version d’IE6 et IE7.

Second problème, est que c’est fameux fichiers seront hébergé sur votre serveur xAMP, plus précisément dans un dossier situé à la racine du thème actif. Lors du téléchargement de la page, le navigateur devra également télécharger la police d’écriture. Avec une connexion Internet 3G ou bas débit cela ralentis l’ouverture de la page.

C’est pour pallier à ces problèmes que Google à mis en place Google Web Font. Le site héberge une galerie de 629 polices d’écriture à ce jour.Avec ce concept on sélectionne sa/ses police(s) d’écriture et on ajoutez les lignes de codes adéquate dans le fichier CSS.Le téléchargement de la page est moins long car il s’effectue en parallèle sur les serveurs Google pendant que votre navigateur charge la page de votre site.

Rendez-vous sur la page d’accueil de Google Web Font, puis choisissez une police de caractère.

Google Web Font sous WordPress-2

Dans cet exemple c’est la police Chango qui sera utilisé. Cliquez sur le bouton Quik-use en bas à gauche de la police d’écriture (ici case orange).

Dans les étapes 1 et 2 permettent modifier quelques paramètre de la police d’écriture. Ces réglages diffèrent quelques peut d’une police à l’autre.

Dans l’étape 3 se trouve une ligne de code HTML semblable à celle-ci:

Ouvrez le fichier <strong>header.php</strong> de votre thème et dans le bloc <strong>head</strong> àjouter cette ligne de code :


Dans l’étape 4 se trouve une ligne de code CSS semblable à celle-ci:

font-family: 'Chango', cursive;

Cette ligne de code sera à ajouter dans le/les fichiers CSS de votre thème. Dans l’example ci-dessous la police Chango sera utiliser pour les balises H1 :

h1 {

font-family: 'Chango', cursive;

}

Comme toute police d’écriture, il sera possible de changer la couleur, la taille, mettre en gras, italique, souligné…

wp-cron

WP-Cron pour planifier des tâches récurentes

By | Aide et astuces, sauvegarde wordpress | No Comments

WP-Cron est un programme qui permet d’exécuter périodiquement un script.

Historiquement Cron (contraction de chrono table) est un programme d’arrière-plan (ou deamon) développer pour les systèmes UNIX. Par la suite les descendants d’UNIX (BSD, Darwin, Linux…) en ont hérité.

Et WordPress dans tout ça ?

WordPress possède ça propre version de Cron appelé WP-Cron. Bien entendu il n’a de Cron que le nom. Comme beaucoup d’autres programmes UNIX, Cron est entré dans les moeurs. Dire d’aujourd’hui « faire un Cron » cela veut dire que l’on crée une planification.

Programmer une tâche unique

Sans le savoir, à chaque fois qu’une page ou un article est publié en différé (Publier tout de suite Modifier), l’utilisateur délègue la publication à WP-Cron.

Sous le capot, cela revient à faire appel à la fonction wp_schedule_single_event() avec comme paramètres la date/heure et une action du type hook. Il s’agit d’une fonction contenant le script que devra exécuter WP-Cron. Mais avant d’utiliser wp_schedule_single_event() WordPress préconise de vérifier si l’exécution du script n’a pas déjà été panifier à l’aide de la fonction wp_next_scheduled.Dans le cas contraire, la fonction retourne la date de la prochaine exécution.

// création de la tâche sous forme de fonction

add_action('action_hook', 'cron_script');

function cron_script {
	// le code source de la tâche figure ici
}

// vérification et planification de la tâche

if( !wp_next_scheduled('action_hook')){
	wp_schedule_single_event( time() + 3600, 'action_hook');
}

La fonction wp_schedule_single_event() à deux arguments obligatoires:

  • La date à laquelle le script sera exécuté. Pour cela il faut fournir un timestamp, comme dans l’exemple ci-dessous avec time() qui retourne l’heure courante, mesurée en secondes depuis le début de l’époque UNIX, (1er janvier 1970 00:00:00 GMT) plus 3600 secondes pour ajouter 1 heure.
  • Le nom du hook associé à la tâche action_hook.

Déprogrammer une tâche

WordPress stocke la date de la prochaine exécution d’une tâche planifiée dans la table wp_options. Pour la déprogrammer, il faut utiliser la fonction wp_clear_scheduled_hook() en précisant le hook associé à la tâche. Soit, action_hook.

<?php wp_clear_scheduled_hook('action_hook'); ?>
sticky menu

Créer un sticky menu en CSS

By | Aide et astuces, Le graphisme et wordpress, Thèmes Wordpress | No Comments

Le sticky menu est une des nouvelles tendances du webdesign. Cela consiste, à maintenir le menu principal collé en haut de la fenêtre du navigateur, lors du défilement vertical des pages.

Il est possible de créer un simple sticky menu à l’aide de la propriété CSS position: fixed. C’est la méthode qui va être présenté ici. L’avantage de cette méthode, c’est qu’elle est simple et donc à portée de tous. L’inconvenant est qu’il n’est pas possible de bloquer le menu seul. Il faudra bloquer tous l’entête de la page. Pour les thèmes ayant un en-tête fin (200px de haut environ) cela ne posera pas de problème, pour les autres oui. Car pendant le défilement vertical de la page cet en-tête figé sera trop imposant sur les écrans de petites tailles.

Pour ceux qui possède un en-tête trop volumineux, il est préférable d’utiliser un plugin, voir même de Jquery. Avec cette méthode, seul le menu sera maintenu en haut de page, le reste de l’en-tête disparaitra.

Pour créer un sticky menu, il faut commencer par repérer la balise div qui englobe la totalité du header de votre site. Généralement appelé header. Pour la localiser facilement, afficher la page d’accueil de votre site puis utiliser les outils de développement de votre navigateur web. Une fois localisé, ouvrez le fichier style.css de votre thème à l’aide de votre éditeur de texte préféré, puis en fin de fichier ajouter le code suivant :

.header {
	position: fixed;
	left: 10%;
	z-index: 1000;
	background-color: #FFF;
}

Dans l’exemple ci-dessus, l’en-tête du thème se trouve dans : div class= »header »
.

  • position: fixed. Permet de maintenir l’en-tête haut de la page pendant le défilement vertical.
  • left. Par défaut, l’élément vient se caller dans le coin supérieur gauche du navigateur, utilisez left pour recentrer l’en-tête.
  • z-index. Si le menu passe en dessous du contenu, ajoutez également la propriété z-index et le contenue passe en dessous.
  • background-color. Ajoutez en un car pendant le défilement de la page, le contenue peut être visible dans les espaces vides du header.

Pour la propriété left préférez une valeur en pourcentage, cela permet une meilleure intégration en responsiv web design. Ou bien, faite un en-tête faisant toute la largeur de la fenêtre du navigateur. La propriété left prendra la valeur auto

.header {
	position: fixed;
	left: auto;
	width: 100%;
	z-index: 1000;
	background-color: #FFF;
}

Pour finir, repérer la balise div qui contient le contenu de la page, généralement appelé : content, container ou wrap. Ajouter lui un padding-top dont la valeur correspond à la hauteur de l’en-tête.

Sauvegarde automatique du contenu sous wordpress

Sauvegarde automatique du contenu sous wordpress en cas de perte de connexion

By | Plugin Wordpress, sauvegarde wordpress | No Comments

La Sauvegarde automatique du contenu sous wordpress en cas de perte de connexion, c’est désormais possible, nous pouvons travailler sur WordPress avec une connexion « défaillante ».

Depuis la version 3.6, la gestion des caches pour les questions d’admin s’est nettement améliorée. Par l’intermédiaire du navigateur, il est possible de faire une sauvegarde automatique du contenu sous WordPress dans le cache du navigateur au cas où la connexion serait perdue. Cela se fait sur tous les navigateurs, de Chrome à IE en passant par Firefox.

Pour la création et le travail sur un site web, le choix d’un site en local puis d’une migration sur le serveur est clairement la solution. En revanche, pour la rédaction d’articles de blog ou de pages d’un site, pas de problème, l’enregistrement de votre article dans le cache fera l’interface avec votre serveur pour éviter les bugs au moment de la publication qui ne vous repère plus.

Voilà donc une solution pour les plus frileux qui travaillent en 3G+/4G pour avancer sur des contenus.

Pour la mise en place de ce mode, rien à faire, vous pourrez le voir au moment de la perte de votre connexion internet. Un bandeau saumon apparaîtra pour vous signifier que l’enregistrement automatique est désactivé au profit d’un sauvegarde par le navigateur. C’est donc que votre site fait le boulot et que vous pouvez continuer à écrire tranquillement.

Ai to canvas

Ai to canvas – Exporter un fichier AI en Canvas HTML5

By | Aide et astuces, Le graphisme et wordpress | No Comments

Ai to canvas est un plugin pour Illustrator développé par Mikes Wanson, permettant d’exporter des tracés vectoriels dans le caneva HTML5.

Qu’est-ce que le Canva HTML ?

Canva est une balise HTML5. Elle s’utilise conjointement avec le langage JavaScript pour créer des tracés vectoriels statiques ou animer.
Le code source des tracés et des animations est en JavaScript. La balise <canvas></canvas> est placée là où les tracés vectoriels et leurs animations devront figurer.

Installer Ai to Canevas

1. Télécharger le plugin sur le blog officiel de l’éditeur.

Nota: Choisissez bien le plugin en fonction de votre version d’Illustrator, CSS3, CS4, CS5, CS6 ou CC. Les versions CS6 et CC sont disponibles en version 32bits et 64btis. Là encore il ne faut pas se tromper.

Pour connaitre votre version d’Illustrator allez dans le menu Aide -> A propos d’Illustrator…

2. Une fois téléchargé, dézippez le fichier, puis placer le dans le dossier des modules.

Pour les versions:

    • Windows 32bits: C:Program Files(x86)AdobeAdobe Illustrator CSxPlug-ins
    • Pour les versions Windows 64bits: C:Program FilesAdobeAdobe Illustrator CSx (64 Bit)Plug-ins
    • Mac: /Applications/Adobe Illustrator CSx/Plug-ins

Comment utiliser Ai to canevas ?

L’utilisation de Ai to canevas est très simple. Créez un nouveau document Illustrator, puis réaliser un tracé votre vectoriel.
Une fois votre tracé vectoriel achevé, allez dans Fichier -> Exporter…. Dans type sélectionnez canevas (*.HTML)., puis Enregistrer.

Un fichier au format .html sera alors créé, et votre navigateur Web par défaut ouvrira ce dernier permettant ainsi de visualiser le résultat.

Le canvas dans WordPress

Le fichier HTML créé par Ai to canvas ne peut pas être utilisé tel quel sur votre site. Il va falloir ouvrir le fichier avec un éditeur de texte pour en extraire les parties importantes. A savoir, le contenu dans des balises <script></script> et <canvas></canvas>.

Dans WordPress, créez une nouvelle page, puis copiez/collez la balise <canvas></canvas> et sont contenu. Cliquez sur Publier pour enregistrer votre travail.

Quant au script JavaScript, copiez/collez le (sans les balises <script></script> ) dans un nouveau fichier, puis enregistrez-le avec l’extension .js. Pour notre exemple ce sera: canvas.js.
A la racine de votre thème, créez un sous-dossier js si il n’est pas déjà présent, puis placez-y votre fichier.js à l’intérieur.

Ouvrez à présent, le fichier header.php situé dans le dossier racine de votre thème. Localiser la balise fermante </head> et ajouter le code HTML suivant juste au-dessus de cette dernière:

...
	<script type='text/javascript' src="js/canvas.js"></script>
</head>

Pour aller plus loin

Bien que l’image soit de type vectoriel elle n’en est pas pour autant responsive. Pour remédier à cela, ajoutez dans votre fichier CSS.

canvas#canvas {
	width: 100%;
}

Cet article a pour but de présenter le plugin AI to canvas ou plutôt une introduction à celui-ci afin de permettre au plus grand nombre de créer simplement des tracés vectoriels et de les exploiter au sein d’un page WordPress..

C’est pourquoi la fonction animation ne sera pas décrite dans cet article, car trop difficile pour ceux qui ne maitrisent pas JavaScript.
Pour les plus courageux, rendez-vous sur le site officiel, pour y trouver des tutoriels, des exemples ainsi que des vidéos faites par Mikes Wanson en personne.

Ultimate Branding

Ultimate Branding : personnaliser votre site pour allez encore plus loin

By | Plugin Wordpress, wordpress 3.9 | No Comments

Ultimate Branding est une plugin développé par le célèbre wpmudev, à l’origine de nombreuses extensions et de nombreux thèmes.

L’extention Ultimate Branding, permet de personnaliser votre admin wordpress back-end très facilement. Nous avions déjà parlé dans ce blog de l’extension de personnalisation White Label, permettant de mettre l’admin à vos couleurs.

Ultimate Branding va plus loin, et de façon plus simple. Chaque élément du back-end peut être ou non activé, afin d’en profiter ou de le laisser selon les standards de WordPress.

Vous pourrez donc travailler les images types comme le contenu du texte standard,, simplement changer le header, travailler le footer ou encore totalement personnaliser le site pour imposer votre marque et celle de votre client.

C’est une application qui coûte 19$. Pourquoi ne pas profiter d’une application gratuite me direz vous? Et bien le temps. Une fois acheté, l’application évolue et avance vers de nouvelles fonctions et de nouvelles applications.

C’est de plus l’une des extensions que nous ajoutons automatiquement dans l’installation d’un wordpress pour un client, donc au final, le 19$ est très rapidement amorti!

Pour les purs, je sais que tout peut être fait dans le code et que WordPress laisse les fichiers bien ouverts, mais le gain de temps est parfois un bon moyen de travailler sur d’autres choses, plus stratégique pour le site du client que vous développer.

Voilà une vidéo Youtube qui présente rapidement l’extension.

web-design

Les 10 dernières tendances du Web design

By | Aide et astuces, Thèmes Wordpress, wordpress 3.9 | No Comments

Le Web design est comparable au monde de la mode, voici donc les 10 dernières tendances du Web Design pour bien choisir votre thème WordPress.

1. Le RWD pour Responsive Web Design

Avec la multiplication des mobiles devices (smartphones et tablettes en tête), il n’est plus conservable de créer des site uniquement destiné ordinateurs de bureau. En ce qui concerne WordPress, les thèmes payants sont RWD. Pour ceux qui souhaite utiliser les thèmes gratuit disponible depuis le tableau de bord, pensez à cocher la case Largeur flexible pour filtrer tous les thème qui ne sont pas RWD encore trop nombreux actuellement.

2. Le Flat Design : Le nouveau style qui s’impose depuis fin 2013.

Le temps du Web 2.0 avec ses barres en dégradé et ses boutons glossy aux coins arrondis c’est finit, place au Flat Design.
Le Flat Design fait référence à un style de dessin d’interface épuré de toute formes stylistique afin de ne garder que des formes vectoriel en deux dimension au couleurs unis. Les barres et les boutons ont de nouveau des coins carré.
Le Flat Design reprend les codes des premiers site Internet que l’on pourrait appeler le Web 1.0. La grosse différence réside dans le choix des couleurs. Aujourd’hui les couleurs sont claire et pétillantes, souvent dans des tons pastels.

3. Les font icone : Une intégration progressive dans les thèmes wordpress ou drupal.

Eléments indispensables de tous bon site Flat Design qui se respecte, les fonts icone. Comme sont nom l’indique, il s’agit de police d’écriture (font en anglais) qui représentent non pas des lettres mais des icônes.
Ainsi, les avantages sont nombreux :
– il n’est plus nécessaire de savoir dessiner pour avoir de beaux icône ;
– les polices d’écriture sont des formes vectoriel, donc pas de risque de pixellisation
– le temps de chargement d’une police d’écriture est moins long que celui d’une image pixelisé.

4. Le Parallax Scrolling : A utiliser en fonction des sites, et avec modération.

Autre tendances old school qui revient sur le devant de la seine c’est le parallax scrolling ou défilement parallaxe. Ce concept emprunt au monde du jeux vidéo en 2D consiste à faire défiler l’arrière plant plus lentement que le premier plan, donnant ainsi une impression de profondeur dans le décor.
Appliqué au Web cela ce traduit par une image en arrière plan (le background de la page) défilant plus lentement que le contenue de la page (le texte principalement).

Si votre thème ne permet de faire du parallax scrolling une série de plugins sur le site officiel de WordPress est disponible.

5. Les big images : L’image et la vidéo au service du contenu.

Avec les big images, rien de bien révolutionnaire, il s’agit tous simplement d’utiliser de très grandes images (en HD de préférence) en guise de background.
L’idée n’est pas de faire de le spectaculaire, mais simplement de créer un ambiance sur le site.

6. Les background videos : Impressionnant pour porter votre site internet.

Les background videos sont des vidéos encodées en webm (pour Chrome, Firefox et Opera) et en mpeg4 (pour Internet Explorer et Safari) qui sont utilisées comme des background de page web.
Comme pour les big images, la vidéo recouvre l’intégralité de l’arrière plan du site.
Seul contrainte, le téléchargement de la vidéo réclame une bonne connexion Internet.

Nous avons d’ailleurs bien détailler le fonctionnement du format Webm sur ce même blog.

7. Le Scrolling

Le scrolling ou défilement en français, plus connu sous le nom de : single page ou encore one page (pour trouver des thèmes WordPress ces deux mots clé sont à privilégier), propose une navigation des pages comparable à un rouleau de papiers.
Ici les pages sont positionnés les unes à la suite des autres formant une longue et unique page avec un en-tête tous en haut, pied de page tout en bas et pas de barre latérale.
Cet disposition des élément est plus propice à une utilisation pour écran tactile que pour une utilisation classique avec la souris. Pour palier à cet problème ce type de site utilisent des liens de type ancres pour délimité les sections de page et des sticky menu pour la navigation.

8. Le Sticky Menu

Le sticky menu est un menu qui reste en permanence collé en haut de la page web même lors d’un défilement horizontal. La timeline de Facebook ou encore la fonction Figer les volets d’Excel sont souvent pris en exemple pour expliquer ce qu’est le stiky menu.
Pour ceux qui souhaiterez l’appliqué à leur thème WordPress, les directives CSS position:fixed ou encore position:absolute peuvent remplir très simplement cette mission.

9. Le full screen menu

Le full screen menu est un menu qui recouvre l’intégralité de la page web. Cette tendances initié par Microsoft avec sont interface Metro, et parfaite pour les smartphones et éventuellement les tablettes 7 pouces. Les écrans sont petits et la navigation est tactile. Les boutons sur-dimensionnés font le bonheurs des mobinautes mal habile.
En revanche, pour les écrans de plus grande taille, non tactile, le succès est plus mitigé. Il faudra patienter encore un peut, le temps que les utilisateurs s’habituent au full screen menu sur de si grands écrans.

10.Le mobile first : Mobile, puis tablette puis desktop, pour une construction optimisée.

Le mobile first n’est pas vraiment une tendances mais plutôt une méthode de travail qui devient tendances.
Jusqu’à présent, les Web designers commençaient par créer la version desktop du site. Autrement dit, par la version la plus complète du site. Puis, ils l’épuraient une première fois pour la version tablettes puis une seconde et dernière fois pour la version smartphone.
Partant du principe que plus l’écran est petit, plus le contenu du site doit allé à l’essentiel, les Web designers conçoivent leurs site dans le sens inverse.
La méthode à prouvé qu’il était plus simple et plus rapide d’ajouter du contenue au fur et à mesure de l’avancement du site, plutôt que de faire le trier et réorganiser l’ensemble.

Les éléments présentés dans cet article peuvent être visualisés sur le site de Dronelis.

Themeforest : Le grand gagnant des thèmes et plugins WordPress

By | Aide et astuces, Plugin Wordpress, Thèmes Wordpress, wordpress 3.9 | No Comments

Création de sites Internet avec WordPress ne passe plus nécessairement par la création d’un thème graphique. Désormais avec la hausse du nombre de sites proposant des thèmes déjà créés, il suffit de choisir son mode de thème, sachant graphique, et de l’adapter aux couleurs de son client. Les connus était jusque là pour WordPress, MonsterTemplate, c’est désormais Themeforest, le petit poucet de l’époque qui est devenu grand.

Themeforest, référence et meilleure banque de données pour l’achat d’un thème WordPress Premium, de qualité professionnelle.

L’un des grands gagnants sur le sujet, spécialiste dans la création de thèmes WordPress (Drupal, Joomla, ou encore de simples feuilles HTML) c’est ThemeForest. Il s’agit d’une banque de données payantes mais libres de droit. Un avantage précieux par rapport au temps que cela fait gagner. Car au-delà des couleurs, et de la mise en forme, il y a surtout certains types de thèmes déjà intégrés, comme pour la création d’une boutique ou un site tout spécialement dédié aux photographes.

WordPress reste simple dans son administration est parfaitement accessible pour celui qui saura faire les modifications standards que l’on retrouve sur les blogs. À partir de la l’intégration d’un thème acheté, on peut donc facilement utiliser WordPress pour créer un site internet totalement professionnel, sans pour autant être un grand spécialiste du code.

Mais tout cela a une limite car en réalité, Themeforest s’adresse aux Agences qui achètent là une matière première plus aboutie que de simples lignes de code. Si on peut réaliser un site, le modifier reste donc à la porter des professionnels de la création web.

Themeforest est donc une banque de données que pourront utiliser les agences de création de sites au profit d’un gain de temps et ceci pour quelques euros. Un thème se vendra entre 30 et 50 $, et un plugin en moyenne entre 8 et 20 $.
Ainsi au lieu de créer un plugin dédié à quelque chose dont vous avez besoin dans votre site Internet, il suffira de l’acheter et de l’intégrer sur votre site. Le meilleur exemple reste l’utilisation de plugin permettant la création d’un CRM ou d’un système de facturation sur WordPress. Besoin de personnaliser en fonction de ce que fait l’entreprise, mais en aucun cas il n’est nécessaire de tout reprendre à zero. Il suffira donc d’acheter un plugin et de le faire ensuite évoluer. Pour souvent moins de 20€ on gagne plusieurs jours de programmation, c’est donc évidement rentable et pratique.

Mais Themeforest, s’il est concentré sur un très grand nombre de produit WordPress, ne travail pas que pour cela. Vous trouverez également des thèmes de qualité pour Drupal, Joomla, Photoshop, ou des simples feuilles en HTML pour les sites les plus simples. En dehors du Web, on peut également trouver de la matière pour le print, pour le son et le montage vidéo, permettant réellement d’aller très loin. Projet After Effect, présentations powerpoint… tout est là pour fournir à votre agence une matière première efficace.

WordPress reste un logiciel libre de droit ce qui permet donc de modifier, d’adapter et de personnaliser à la charte graphique de celui qui intégrera dans son site Web les éléments de Themeforest. La qualité du travail final n’est donc pas impacté, mais le temps gagné dans l’inspiration et la structuration du site est précieux!

Je vous conseil donc d’utiliser sans réserve cette source que beaucoup d’entre vous ont déjà dans leurs bases de données j’en suis certain!

Créer des animations simples avec CSS3

Créer des animations simples avec CSS3

By | Aide et astuces, Wordpress 3.6, Wordpress 3.7, Wordpress 3.8, wordpress 3.9 | No Comments

L’animation d’objets n’est plus l’adage de JavaScript. Avec @keyframes il est possible de créer des animations simples avec CSS3.

Définition de @keyframes

@keyframes est un règle CSS3 qui permet de créer des animations.

L’animation est créée en modifiant progressivement une série de styles CSS à l’autre. Durant l’animation, il est possible de modifier le styles CSS à plusieurs reprises.
Pour préciser quand le changement de style CSS se produira il est possible d’utiliser les mots-clés from et to ou bien des pourcentages.

  • from ou 0%, détermine le début de l’animation.
  • to ou 100%, détermine la fin de l’animation.

Avec des valeurs en pourcentages il sera possible de créer des animations plus complexes comme dans le second exemple ci-dessous.

La règle @keyframes, est supporté par Internet Explorer 10, Firefox, et Opera. Pour Safari et Chrome il faudra utiliser la règle alternative .

Syntaxe et propriétés

La règle @keyframes s’utilise avec les propriétés suivantes :

animation-name, permet de nommer une animation. Cette propriété est obligatoire

animation-delay, Impose un délai avant de démarrer l’animation. Valeurs: s (secondes)ou ms (millisecondes)

animation-direction, Indique dans quel sens est joué l’animation lorsque celle-ci se répète. Valeurs : normal (sens identique) et alternate (sens inverse)

animation-duration, Détermine la durée de l’animation. Valeurs : s (secondes) ou ms (millisecondes)

animation-iteration-count, Spécifie le nombre de fois que l’animation sera jouée avant de s’arrêter. Valeurs : un nombre entier ou infinite pour créer un boucle infini.

animation-play-state, Permet de mettre en pause une animation, puis de là reprendre. Valeurs : paused (met en pause) et running (reprend l’animation en cours)

animation-timing-function, Détermine la vitesse d’exécution de l’animation au début, au milieu et à la fin. Valeurs : cubic-bezier(val1, val2, val3, val4), ease, ease-in, ease-out, ease-in-out, linear.

La syntaxe tel que là définit la W3C est : @keyframes animation_name.
Pour le moteur Gecko (Firefox) : @-moz-keyframes.
Pour le moteur Webkit (Chrome et Safari) : @-webkit-keyframes.
Pour le navigateur Opera : @-o-keyframes.

Exemple 1: Faire clignoter un élément

Jouons un peut avec les animation en réalisant un terminal factice dans lequel clignotera l’invite de texte.

linux-lo8i:/var/www #

_

Code source coté HTML

<div id="terminal">
	<div id="textarea">
		<p>linux-lo8i:/var/www # </p><span id="prompt">_</span>
	</div><!-- /textare -->
</div><!-- /terminal -->

L’élément à faire clignoter est le underscore situé dans l’id prompt.

Code source coté CSS

/* Prompt */

#terminal {
	background-color: black;
  	padding: 10px 0 22px 12px;
}
 
#textarea {
  	margin: 3px;
}
 
#textarea p {
  	color: rgba(10, 225, 10, 1);
	float: left;
}
 
/* animation du prompt */

span#prompt {
  
	animation-name: blinky;
  	animation-duration: 0.7s;
  	animation-iteration-count: infinite;  

  	-webkit-animation-name: blinky;
  	-webkit-animation-duration: 0.7s;
  	-webkit-animation-iteration-count: infinite;  

  	-moz-animation-name: blinky;
  	-moz-animation-duration: 0.7s;
  	-moz-animation-iteration-count: infinite;

  	-o-animation-name: blinky;
  	-o-animation-duration: 0.7s;
  	-o-animation-iteration-count: infinite;

  	-ms-animation-name: blinky;
  	-ms-animation-duration: 0.7s;
  	-ms-animation-iteration-count: infinite;

}
@keyframes blinky {
  	from {opacity: 1;}
  	to {opacity: 0;}
}

@-webkit-keyframes blinky {
  	from {opacity: 1;}
  	to {opacity: 0;}
}

@-moz-keyframes blinky {
  	from {opacity: 1;}
  	to {opacity: 0;}
}

@-o-keyframes blinky {
  	from {opacity: 1;}
  	to {opacity: 0;}
}

@-ms-keyframes blinky {
  	from {opacity: 1;}
  	to {opacity: 0;}
}

Pour réaliser l’animation, il faut ajouter les propriétés animation à l’élément concerné. Ici p#prompt. Pour animation-name le nom sera blinky, la durée sera de 0,7 seconde le tous dans une boucle infini.
Fermer l’accolade, puis ajouter la règle @keyframes suivit du nom de l’animation blinky.
from indique que l’opacité est de 1, to qu’elle passera à 0

Exemple 2 : Faire un bouton qui change de couleur

Dans le précèdent exemple l’animation avait été faite avec from et to. Créant une animation en deux temps. Pour créer une animation sur 3 temps et plus, seul les pourcentages pourront être utilisés. C’est le cas de ce second exemple où le bouton ci-dessous change de couleur 7 fois.

Bouton

Code source coté HTML

<div id="button">
	<p id="text-button">Bouton</p>
</div>
<!-- /button -->

Code source coté CSS

/* Bouton */
  
#button {
  	padding-left: 30px;
}
 
p#text-button {
  	color: #FFF;
  	font-size: bold;
  	padding: 10px;
  	width: 10%;
  	text-align: center;

/* Annimation du buton */

  	animation-name: cameleon;
  	animation-duration: 5s;
  	animation-iteration-count: infinite;

  	-webkit-animation-name: cameleon;
  	-webkit-animation-duration: 5s;
  	-webkit-animation-iteration-count: infinite;

  	-moz-animation-name: cameleon;
  	-moz-animation-duration: 5s;
  	-moz-animation-iteration-count: infinite;

  	-o-animation-name: cameleon;
  	-o-animation-duration: 5s;
  	-o-animation-iteration-count: infinite;

  	-ms-animation-name: cameleon;
  	-ms-animation-duration: 5s;
  	-ms-animation-iteration-count: infinite;
}
 
@keyframes cameleon {
  	0% {background-color: #FF5D5D;}
  	25% {background-color: #FFDF5F;}
  	50% {background-color: #8EFF61;}
  	75% {background-color: #60FFB2;}
  	100% {background-color: #5EB7FF;}
}
 
 @-webkit-keyframes cameleon {
  	0% {background-color: #FF5D5D;}
  	25% {background-color: #FFDF5F;}
  	50% {background-color: #8EFF61;}
  	75% {background-color: #60FFB2;}
  	100% {background-color: #5EB7FF;}
}

@-moz-keyframes cameleon {
  	0% {background-color: #FF5D5D;}
  	25% {background-color: #FFDF5F;}
  	50% {background-color: #8EFF61;}
  	75% {background-color: #60FFB2;}
  	100% {background-color: #5EB7FF;}
}

@-o-keyframes cameleon {
  	0% {background-color: #FF5D5D;}
  	25% {background-color: #FFDF5F;}
  	50% {background-color: #8EFF61;}
  	75% {background-color: #60FFB2;}
  	100% {background-color: #5EB7FF;}
}

@-ms-keyframes cameleon {
  	0% {background-color: #FF5D5D;}
  	25% {background-color: #FFDF5F;}
  	50% {background-color: #8EFF61;}
  	75% {background-color: #60FFB2;}
  	100% {background-color: #5EB7FF;}
}

Pour résumé, le bouton p#text-button dont l’animation s’appelle caméléon, dont la durée est de 5 seconde, change de couleur 5 fois et se reproduit indéfiniment.