http://www.pixelcrea.com Blog de Jacques Danilo, graphiste et formateur freelance en-usnofreelance,graphiste,independant,webdesignerBlog lié à mon activité de graphiste, photographe et formateur freelance.Le blog du graphiste freelance Jacques DnailoJacques Danilo http://www.pixelcrea.com/blog/ecommerce2021/ http://www.pixelcrea.com/blog/ecommerce2021/ L'année 2021 n'échappera pas à la règle de son calendrier des actions marketing à mener sur l'année. Ceci est une trame à personnaliser en fonction de votre secteur d'activité et de votre cible... Je vous conseille de préparer votre action marketing 2 mois environ avant la date fatidique du lancement : il faudra définir l'offre, la formuler sur votre site e-commerce ou e-business, réaliser les visuels et rédiger les textes... Si vous avez un besoin spécifique en marketing, n'hésitez pas à me contacter pour en discuter. Bon marketing en 2021 :) ... Fri, 22 Jan 2021 10:00:10 GMT Jacques Danilo http://www.pixelcrea.com/blog/ecommerce2020/ http://www.pixelcrea.com/blog/ecommerce2020/ Comme chaque année, retrouvez l'infographie regroupant en un seul endroit les moments clefs de 2020 pour l'animation commerciale : noel, fêtes des pères, fêtes des mères, périodes de soldes, etc... Cette infographie est gratuite : il vous suffit de faire un clic-droit sur l'image et de choisir "enregistrer sous..." et elle est à vous :) ... Mon, 13 Jan 2020 14:43:24 GMT Jacques Danilo http://www.pixelcrea.com/blog/conseils-linkedin-2019/ http://www.pixelcrea.com/blog/conseils-linkedin-2019/ Que vous soyez un étudiant à la recherche d’un stage ou d’une alternance, à la recherche d’un emploi ou un employé déjà implanté dans une société mais qui recherche l’entreprise de ses rêves, votre profil LinkedIn doit être à la hauteur de vos compétences ! Présent dans plus de 200 pays à travers la planète et avec près de 20 millions de comptes actifs en France, LinkedIn est le réseaux sociaux professionnel par excellence. Sur ce réseau social vous avez un compte associé à votre nom qui permet à tout le monde de connaître votre CV, mais pas seulement : on peut connaître vos compétences, si vous êtes recommandez par quelqu’un, votre activité professionnelle (à travers vos publications notamment et aux groupes auxquels vous êtes inscrits). Mais le leader des réseaux sociaux professionnels va plus loin, en proposant des offres d’emplois, des outils marketings pour les publicitaires, des outils de management et de solutions de recrutement en ligne, ou une plateforme d’e-learning permettant d’obtenir des titres supplémentaires. Votre futur recruteur utilise déjà cette plateforme, soit pour simplement découvrir votre profil (à la réception de votre CV par exemple) ou voir même gérer son recrutement directement avec les outils LinkedIn inclus dans les offres premium dédié au recrutement pour les ressources humaines. Il est donc important de soigner son profil au maximum pour vous donner toutes les chances d’accéder à l’emploi de vos rêves. Voici quelques conseils bien pratiques pour gagner en visibilité sur ce réseau social : Votre photo de profil LinkedIn doit être professionnelle La première impression est souvent la bonne n’est-ce pas ? Sur LinkedIn c’est pareil : c’est votre photo qui sera votre première vitrine, avant même de lire votre nom ou de découvrir les compétences et expériences pro que vous avez. Il faut donc soigner votre photo de profil. La photo doit être centré sur votre visage et doit être cadré sur votre visage, voir jusqu’à la taille grand maximum. Evitez les accessoires (même s’ils sont professionnels) comme les casquettes, capuches ou casques de chantier. On doit vous reconnaître. Si vous pouvez, n’hésitez pas à vous prendre en photo dans le monde professionnel afin d’avoir un fond d’image en lien avec votre activité : un boulanger peut laisser apparaître la boulangerie en fond, un industriel dans l’entreprise ou un commercial dans une salle de réunion par exemple. Sachez qu’un profil avec photo a environ 40 fois plus de visibilité et qu’une photo de profil bien adaptée et de qualité vous donnera 7 fois plus de visibilité ! Si vous pouvez vous offrir les services d’un photographe ou que vous connaissez un dans votre réseau, n’hésitez pas afin de parfaire votre photo de profil. Une bannière de profil LinkedIn pour faire ressortir votre profil La bannière LinkedIn est la photo qui se trouve au-dessus de votre photo de profil en arrière-plan. En miniature elle est présentée derrière votre photo de profil mais apparait en grand au-dessus de votre profil. Au format paysage étendu aux dimensions de 1600x400 pixels environ, cette photo doit présenter votre univers, vos valeurs ou les produits ou services que vous proposez. Faites attention au cadrage et faites des essais : l’affichage de cette bannière diffère entre les profils sur ordinateur, tablette et smartphone. De plus cette image est visible en miniatures et sur votre profil : pensez à la disposition de votre texte si vous en mettez un ! Le slogan est la clé du succès Votre titre est une zone de texte libre limité à 120 caractères qui suivra votre nom tout au long du parcours utilisateur : recherche, page de profil, suggestion ou recommandations, le slogan vous suit à la trace. Soignez ce texte cours pour vous présenter rapidement. Ne faites pas de phrases mais utilisez simplement les termes qui vous correspondent. Il doit être accrocheur, percutant et succinct. Pensez également au SEO (référencement Google) et placez ici des mots clés importants Une description courte qui résume votre activité professionnelle Vendez-vous ! Votre résumé doit être percutant pour susciter l’intérêt ou la curiosité du recruteur. Il est limité à 2000 caractères mais ne présente que les 250 premiers caractères avec un bouton pour étendre cette zone et afficher le texte en entier. Soignez les premiers termes employés car en plus de capter l’intérêt du lecteur, il favorise également votre référencement sur Google et dans le moteur de recherche de LinkedIn. Pour vous aider à rédiger votre résumé, répondez à ces 3 questions : -       Qui suis-je ? -       Qu’est-ce que je sais faire ? -       Quelle est ma mission ou mon projet ? Renseignez toutes vos coordonnées Avec votre profil sont associés toutes vos coordonnées (celles que vous voulez montrer évidemment). Indiquez un maximum d’informations comme l’adresse de votre site Internet, votre portfolio, blog ou flux RSS, ainsi que votre compte Twitter si vous en avez un et qu’il est en lien avec votre activité professionnelle ou associative. Indiquez aussi votre date de naissance, cela permettra à votre réseau de recevoir une notification à votre sujet ce jour-là (plutôt pratique pour susciter l’intérêt et gagner en visibilité). Réalisations : présentez votre book professionnel L’espace réalisations vous permet de présenter votre travail, vos compétences à l’aide de médias : vidéos, images, slideshares, pdf, etc… N’hésitez pas à en mettre beaucoup afin de présenter au mieux vos talents et compétences phares  Renseignez vos formations et vos diplômes Vos formations et diplômes obtenus permettent aux recruteurs où vous positionner : niveau d’étude, de culture, de prétention salariale, etc. Renseignez tout ce que vous pouvez sur chaque formation en racontant une histoire plutôt que de simplement lister les postes occupés. Les recruteurs et votre réseau apprécieront l’effort réalisé. Expériences : détaillez votre expérience et les projets réussis Les expériences et projets réussis montrent votre travail, vos périodes de travail et les postes occupés jusqu’à maintenant. Vous pouvez même dans les options de la partie emploi choisir si vous voulez être visible en tant que chercheur d’emploi ou non (si vous êtes en poste actuellement)  Soyez actif et partagez du contenu adapté A la fois pour l’algorithme et pour la qualité de votre profil, votre activité sur le réseau social jouera un rôle déterminant dans la visibilité des recherches, des suggestions et des réponses aux offres d’emplois. Sur votre profil sont présentés les 3 dernières activités, avec la possibilité de voir l’ensemble des publications de votre compte par la suite. Les publications présentées montrent 2 choses primordiales, à savoir les dates de publications (activité récente ou non) et le contenu des publications. L’idéal est de partager régulièrement du contenu adapté à votre activité, vous présentant alors comme un potentiel influenceur dans ce domaine ou simplement actif et connaisseur sur le sujet (je partage donc je connais). Le recruteur va en déduire que vous êtes au fait de l’actualité du métier et actif dans l’échange de connaissance.  Voici un récapitulatif des 55 conseils présents dans l’infographie sur le profil LinkedIn PHOTO DE PROFIL          1 - Prenez une photo professionnelle          2 - Choisissez une photo en lien avec votre activité          3 - Cadrez sur le visage ou jusqu’à la taille au maximum          4 - Souriez et regardez l’objectif ! BANNIERE          5 - Trouvez une bannière professionnelle et attrayante          6 - Prouvez par l’image votre univers, vos valeurs, … TITRE / SLOGAN LinkedIn          7 - Soyez accrocheur et descriptif sur le poste occupé / recherché          8 - Remplissez un maximum des 120 caractères autorisés RESUME          9 - Favorisez les 250 premiers caractères (SEO, recherche LinkedIn)          10 - Remplissez un maximum des 2000 caractères autorisés          11 - Structurez votre textes en paragraphes courts          12 - Donnez envi d’en savoir plus ou de vous contacter          13 - Utilisez des mots clefs          14 - Soyez professionnel          15 - Mentionnez les points importants de votre profil          16 - Terminez par une invitation à vous contacter (avec rappel de vos coordonnées) EXPERIENCES PROFESSIONNELLES          17 - Ne listez pas vos fonctions, racontez vos expériences          18 - Précisez le poste actuel          19 - Renseignez les précédents emplois          20 - Utilisez des mots clefs pour favoriser la recherche          21 - Ne divulguez rien de confidentiel          22 - Illustrez vos expériences avec des réalisations concrètes          23 - Citez vos expériences associatives          24 - Illustrez vos expériences (photo, liens, vidéos, documents) FORMATIONS & DIPLOMES          25 - Renseignez tout votre cursus          26 - Mentionnez tous les diplômes obtenus          27 - Ajoutez les détails (mentions, grades, …)          28 - Citez les MOOC et les formations en ligne suivies          29 - N’oubliez pas les formations annexes (bafa, sst, pompier volontaire, …) COMPETENCES & EXPERTISE          30 - Indiquez vos expertises avec Skills          31 - Faites valider vos compétences par votre réseau RECOMMANDATIONS          32 - Sollicitez vos collègues, collaborateurs, clients, …          33 - LinkedIn donne une meilleur visibilité avec 3 recommandations minimum          34 - Recommandez vos anciens collègues VOTRE PROFIL          35 - Personnalisez l’URL publique          36 - Remplissez toutes les coordonnées possibles          37 - Reliez LinkedIn à votre Twitter          38 - Soignez l’orthographe et la grammaire          39 - Exportez le en PDF pour sauvegarde et mails          40 - Organisez l’ordre des sections          41 - Traduisez votre profil aux langues maitrisées          42 - Mettez à jour votre profil régulièrement          43 - Activez les objectifs professionnels dans « emplois »          44 - Configurez les options de confidentialité ACTIVITES          45 - Incluez un lien vers votre profil dans votre signature de mail          46 - Rejoignez des groupes liés à votre métier et participez          47 - Recommandez vos contacts          48 - Employez des hashtag pour augmenter la visibilité de vos publications          49 - Identifiez vos contacts dans les publications et commentaires          50 - Demandez l’avis un expert pour booster les commentaires          51 - Restez professionnel          52 - Fêtez les anniversaires          53 - Répondez rapidement aux messages          54 - Commentez vos partages (ou posez des questions)          55 - Soyez créatif... Fri, 13 Sep 2019 14:36:59 GMT Jacques Danilo http://www.pixelcrea.com/blog/semantique-seo-contenu/ http://www.pixelcrea.com/blog/semantique-seo-contenu/ Cet article est consacré aux balises sémantiques HTML 5 utiles au SEO pour le contenu d’une page, comme les notions de niveaux de titres, les balises prises en compte pour le SEO, etc. Elle fait suite à l’article sur la sémantique d’une page HTML expliquant les balises de structure d’une page avec l’utilisation des balises header, footer, main, aside, section et article, etc. Cette première partie est indispensable pour construire une structure lisible et compréhensible par les robots d’indexation des moteurs de recherche et permettent ainsi d’améliorer la prise en compte SEO. Dans cette deuxième partie je vais aborder plusieurs notions et balises propre à un contenu. Je parle ici du contenu principale d’une page web, se situant dans une balise article ou section. Cela s’applique à tout type de contenu : article d’un blog, page informative, fiche produit sur un site e-commerce, bref, une page où il y a du contenu que l’on souhaite voir apparaître le plus haut possible sur un moteur de recherche. Utilisation des niveaux de titres = SEO friendly Le langage HTML dispose depuis très longtemps de balises de titres que l’on appelle des header Hn, disponibles sur 6 niveaux de H1 à H6. Ces balises sont importantes pour la prise en compte SEO et pour la compréhension globale d’un article. Elle permet de structurer votre contenu et de hiérarchiser vos idées et votre rédaction. Note : les balises HTML s’écrivent toujours en minuscule et ont, sauf quelques balises spécifiques, toujours une balise ouvrante (ex : <p>) et une balise fermante (ex : </p>). Par convention on notera H1 (nom de la balise en majuscule) dans un texte pour parler de la balise <h1>…</h1>. La balise H1 Lorsque vous créez du contenu, il faut dans un premier temps créer le titre principal de votre contenu. Il s’agit de la balise H1 (écrite <h1>Mon titre</h1) qui doit être unique (d’une page à une autre) et différent de la balise TITLE présente dans la partie HEAD du document HTML. Il n’y a pas de longueur particulière mais il est indispensable de placer le mot clef principal de la page et d’avoir une longueur de plus de 30 caractères. Je vous déconseille d’avoir un titre H1 trop long, qui n’offrira qu’une dilution de votre mots-clef par rapport aux autres termes utilisés dans le titre H1. Voici un exemple de balise H1 optimisée : <h1>La sémantique SEO : l’utilisation de la balise H1</h1>  Les autres balises de titres Hn La balise H1 doit être unique sur la page, mais pour les autres niveaux de titres vous pouvez en utilisez autant que vous souhaitez. Cependant il y a quelques règles à respecter. Partons d’un contenu le plus simple possible tout d’abord : une page où il n’y a que des paragraphes les uns à la suite des autres. L’utilisation en HTML de la balise p (écrite <p>mon contenu</p>) permettra de réaliser autant de paragraphes que désiré il n’y a aucune limite quant au nombre de paragraphes à créer dans une page. Dans cette page vous aurez peut-être besoin de séparer votre contenu en plusieurs idées différentes : Sur un article parlant de SEO par exemple, on pourrait décider de faire 2 parties : « pourquoi utiliser une bonne sémantique SEO », et « comment éviter la sur-optimisation pour Google » par exemple. Tout d’abord il faudra respecter l’ordre de niveaux des titres Hn : après un titre H1 viennent les titres H2, puis à l’intérieur d’un bloc H2 on utilisera des niveaux de titres 3 (les H3), etc… Comme ceci : H1 > H2 > H3 > H4 > H5 > H6 On pourrait imaginer la structure et l’utilisation des balises Hn comme ceci : - La balise H1 correspond au titre de notre contenu - Les balises H2 correspondraient aux chapitres - Les balises H3 correspondraient à des parties de chapitres - Les balises H4 à des sous-parties, …   Les règles pour les titres sont simples mais hyper importantes pour favoriser le SEO de votre contenu : - 1 seule balise H1 dans la page, présente le plus haut possible dans votre page - Si on sépare le contenu, on le sépare forcément en 2 parties au minimum (donc utilisation de 2 balises titres de niveau inférieur (sous un H1 on doit retourver du H2, sous un H2 on doit retrouver du H3, etc. - Si dans votre structure vous utilisez des titres H5 et H6 c’est que votre contenu est trop complexe : peut-être qu’il faudrait traiter ce sujet sur 2 pages différentes. - Simplifiez-vous la structure au plus simple, toujours !   Pour illustrer mes dires voici 2 exemples de sémantique concernant les titres dans les pages HTML. A gauche l’exemple est correcte, mais à droite il existe plusieurs erreurs. Seriez-vous les identifier ? Pour la partie de droite il y a 2/3 erreurs : 1/ le titre H5 présent sur la 3ème ligne n’est pas au bon niveau (cela doit être un H3 puisque le niveau au dessus est un H2) 2/ le titre H5 en 3ème ligne ne doit pas être seul (toujours 2 au minimum) 3/ Il existe un deuxième H1 dans la page : problème ! 4/ lié au point 3, sous un H1 on devrait alors retrouver du H2   Attention également à la présentation de votre page (partie CSS), Google lit aujourd’hui les styles CSS et est vigilent sur ce point : un titre H1 doit être plus grand en taille de typo qu’un titre h2, qui lui-même… vous avez compris ! Valable aussi pour le contenu même, pensez au contraste entre la couleur du texte (donc des titres) et le fond (couleur, image ou dégradé d’ailleurs) : pour tester le contraste, prenez un impression-écran de votre page et passez-la en noir et blanc (via Paint ou Photoshop par exemple) pour constater s’il y a beaucoup de contraste ou pas. Si le texte reste bien lisible, Google l’acceptera ! Les autres balises de contenu La mise en gras avec strong La documentation HTML nous donne 2 balises pour une mise en gras de contenu (comprenez en balises HTML et non en instruction CSS) : la balise <b>…</b> et la balise <strong>…</strong>. Visuellement ces 2 balises mettent le texte entouré de ces balises en gras (disponible par la typographie utilisée ou forcée graphiquement par le navigateur) mais il y a une différence de taille : Google prendra en compte la balise STRONG comme étant une mise en avant de ce contenu pour le moteur de recherche, alors qu’il sera simplement ignoré si vous utilisez la balise B (B pour Bold ^^). Il est également possible de mettre en gras un élément via le CSS utilisé dans la page web : avec l’instruction font-weight :bold (ou une valeur du type 500, 600, 700, 800 ou 900 pour l’extra-bold – seulement si la typographie en a été spécifiée) vous aurez un rendu graphique de ce contenu effectivement en gras, mais comme la balise B, Google ignorera tout simplement cette mise en avant et ne la prendra pas en compte (le texte sera alors considéré comme un texte normal – un paragraphe) Nul besoin non plus de rajouter du gras (ou de l’italique que j’aborde juste après) dans un niveau de titre. Les titres sont déjà des mises en avant de votre texte, toutes intentions de mises en avant à travers des balises de styles comme le gras et l’italique seront ignorés par les moteurs de recherche, voir même pourraient orienter Google vers une pénalité de sur-optimisation. En effet Google chasse depuis 2011/2012 la sur-optimisation du contenu (Google Dance PANDA et PINGOUIN). Si vous souhaitez mettre un mot ou groupe de mot en avant (graphiquement j’entends) dans un titre, privilégiez la balise SPAN Dans cet exemple, dans le titre le mot website semble en gras alors que le reste ne l’est pas. Le mot mis en avant doit alors être englobé d’une balise span, pour donner ceci en CSS : H1 span {font-weight :bold ;} La mise en italique avec em Le fonctionnement est le même qu’avec la balise strong : le HTML prévoit 2 balises pour l’italique : la balise EM sera prise en compte pour le SEO, alors que la balise I (<i>...</i>) sera ignorée par les moteurs. Dans les deux cas, que ce soit avec strong ou avec em, il s’agit là d’une mise en avant qui doit servir à plusieurs choses : 1/ Coté SEO, cela permet de faire remonter certains mots clefs de votre contenu et de gagner des points (je vulgarise évidemment, cela fait au moins 10 ans que Google ne fonctionne plus en comptage de point et proportions de mots clefs seuls) 2/ Coté utilisateur : il permet de se faire une idée générale de l’article, ou d’une partie de l’article) en ne lisant que les éléments en gras. Vous devrez donc trouver un compromis entre optimisation SEO et confort utilisateur. Evitez la sur-optimisation en mettant en gras systématiquement votre mot-clef principal, et tablez plutôt sur un travail de rédaction autour du champ lexical général de l’article (mais ce n’est pas notre sujet ici) Les autres balises Google apprécie d’avoir une mise en page riche, à savoir l’utilisation de plusieurs balises changeante d’un simple paragraphe : les images, les listes à puces ou listes numérotées, les liens, les tableaux et les images. Concernant les liens, ils doivent dans la mesure du possible être dans une phrase, un contexte, et pointer vers des pages internes traitant du même sujet. Si je parle dans un article de Wordpress il faudrait que mes liens pointent vers d’autres articles de mon blog parlant de Wordpress. Si je ramène mon visiteurs vers un article qui parle de la colorisation des monuments du 12ème siècle dans la région de bordeaux, comprenez bien que Google n’arrivera pas à comprendre le lien qu’il peut avoir entre ces 2 thématiques bien différentes. En respectant la sémantique de vos titres, et en utilisant du gras (avec STRONG), de l’italique avec EM, et quelques liens dans votre contenu, le tout saupoudré de quelques images bien nommées, vous vous donnez toutes les chances pour que Google apprécie ce contenu et le pousse vers le haut Et mes anciens contenus alors ? Si vous avez déjà mis en ligne des pages de textes (articles de blog, fiches produits e-commerce, pages de présentations, etc.) et que vous vous rendez compte que vous n’avez pas utilisé les bonnes balises, aucune inquiétude : Google passe régulièrement sur votre site et pourra, lors d’un prochain passage, reconsidérer la qualité de votre page ou sa thématique en fonction du nouveau balisage mis en place. Il est alors tout à fait logique et normal de voir vos anciennes pages remonter légèrement dans les moteurs de recherche et de voir ainsi, au bout de quelques semaines, une remontée en trafic sur les pages travaillées.... Thu, 31 Jan 2019 16:59:56 GMT Jacques Danilo http://www.pixelcrea.com/blog/semantique-seo-page/ http://www.pixelcrea.com/blog/semantique-seo-page/ Aujourd’hui avoir un simple site Internet ne suffit plus, il faut l’optimiser au mieux pour les moteurs de recherche sur le plan technique : rapidité du temps de chargement de la page complète, poids des images, rédaction de contenus, mise à jour régulière de votre contenu en ligne, site en perpétuel mouvement, etc… Les critères de Google (et des autres moteurs de recherche) sont précis sur le plan technique. Depuis l’arrivée du HTML 5 (version actuellement utilisé sur quasiment l’ensemble de la sphère Internet, des balises ont étés prévues pour améliorer et quadriller votre contenu au sein même d’une page web. Pour illustrer mes dires je me base sur une maquette de thème Wordpress prise au hasard, proposé par themeForest une plateforme e-commerce pour l’achat de thèmes et éléments web. Il n’y a aucun sponsor derrière d’où le fait que je ne fasse aucun lien vers cette plateforme. Il me fallait simplement un site web neutre pour illustrer mes dires dans cet article. Voilà tout !     Le référencement sur les moteurs de recherche est important voir indispensable dans beaucoup de secteurs d’activité. Pour cela votre site Internet doit être en conformité technique pour les moteurs de recherche : cela permettra d’aider à l’indexation et au positionnement de votre page dans les résultats de recherche. Définition de la sémantique HTML  La sémantique correspond à la structure HTML 5 mise en place sur une page web permettant aux robots (des moteurs de recherches surtout) de comprendre l’importance ou la récurrence d’un élément dans une page web par rapport aux autres éléments. Cela a pour but d’aider à la prise en compte de votre contenu pour les moteurs de recherche et d’en favoriser l’indexation et la position sur Google. Lorsque l’on parle de sémantique, ou sémantique HTML, ou encore sémantique SEO, on parle surtout du bon balisage du code HTML dans la page web afin de définir des zones en lien avec le contenu qu’ils contiennent. Lors de la sortie du HTML 5, certaines balises normalisées étaient orientées pour constituer la bonne sémantique d’un page : <header></header><nav></nav><main></main><article></article><section></section><aside></aside><footer></footer> Ces balises HTML, vides de toutes instructions CSS par défaut, permettent de structurer votre document HTML : on pourra alors définir les éléments récurrents, le contenu principal dans la page, le ou les différents menus de navigation dans la page, etc. Les moteurs de recherche, et notamment Google, se basent sur ces balises pour comprendre et interpréter plus rapidement le contenu de vos pages. Les balises HTML 5 dédiées à la sémantique SEO  Toutes ces balises dites de sémantiques fonctionnent tous en binômes : une balise ouvrante, par exemple <aside> pour commencer à encapsuler un contenu, et se terminera par une balise de fermeture, identique à la balise d’ouverture mais précédée d’un slash comme ceci : </aside>. La balise header Cette balise permet d’encapsuler tout le contenu récurrent présent en haut de la page, y compris le menu de navigation principal. Cela indiquera à Google que ce contenu est récurrent et identique (ou avec quelques variations) d’une page à une autre sur votre site. La balise footer Comme la balise header, cette balise encadre le contenu récurrent en bas de page. On y retrouve généralement le rappel de la navigation (pour éviter de remonter en haut du site pour passer d’une page à une autre), le logo et les informations légales : mentions légales, conditions générales de vente ou d’utilisation, déclaration CNIL, identification de l’entreprise ou de l’association, etc. Par contre vous n’aurez pas besoin d’y ajouter une balise nav (pour la navigation) au sein d’une balise footer : les liens présents dans la balise footer sont systématiquement considérés comme étant des liens secondaires (sauf si les mêmes liens sont présents ailleurs bien sur). La balise main La balise indispensable pour le contenu propre à votre page (le contenu présent entre le header et le footer) : cela indique aux moteurs de recherche que votre contenu est là et pas ailleurs. Il englobera potentiellement les balises article, section, et aside.  Pour l’instant, la maquette présentée plus haut pourrait ressembler à ceci sur le plan sémantique : La balise nav Cette balise HTML permet d’identifier le ou les menus de navigation disponible. Tous les liens présents à l’intérieur de cette balise nav auront un impact significatif sur la structure de votre site et son référencement. Il n’est par contre pas obligatoire d’utiliser des listes à puces (balises UL/LI). Vous pouvez utiliser des divs, des spans ou tous autres balises à l’intérieur. Essayez par contre de faire au plus simple coté HTML, quitte à jouer avec les pseudo classes CSS :before et :after par exemple pour rajouter du contenu. N’y placez surtout pas de contenu à l’intérieur à l’exception de liens ! Il est possible d’avoir plusieurs balises nav dans la page, traditionnellement dans le header de la page (balise header) Les balises article et section Ces 2 balises permettent de structurer l’intérieur de votre balise main et peuvent s’imbriquer les unes dans les autres sans problème : un article peut contenir plusieurs sections, et une section peut contenir plusieurs articles. Traditionnellement, un article représente une page de contenu : un article de blog, une fiche produit e-commerce, une page d’information, etc. Au sein d’un article il peut y avoir plusieurs sections qui, fondamentalement, devraient regrouper des idées ou thèmes différents dans votre contenu. Sur vos pages de listing (catégories d’un site marchand ou d’un blog par exemple), utilisez plutôt une section pour englober le listing des produits ou articles. Chaque article peut être encapsuler par une balise article mais n’est pas obligatoire : après tout, ces pages ne sont pas les pages les plus pertinentes en terme de SEO (référencement sur les moteurs de recherche) car elles proposent en général plusieurs résumés d’articles portant sur des sujets différents (champs lexicaux multiples) avec souvent peu de contenu unique. Un article ou une section peuvent aussi accueillir un header et un footer, mais cela n’a pas d’impact sur le SEO pour le moment. Dans la théorie, une section (comme un article d’ailleurs) ne traite que d’un sujet sous un seul angle, il devrait donc comporter un titre Hn et du contenu textuel et visuel à chaque utilisation de la balise section (ou article) La balise aside Cette balise HTML permet de spécifier le contenu secondaire à la zone principale (balise HTML 5 main évoquée plus haut). En général on place dans cette balise les liens ou articles secondaires à notre contenu (des articles sur le même sujet, ou des produits de la même catégorie en e-commerce) mais il n’est pas obligatoire d’indiquer la colonne latérale comme étant une balise aside. Habituellement, si la balise aside se trouve dans main, il s’agit de liens secondaires au site, alors que si la balise aside se trouve dans une balise article (celle de votre contenu principal), les liens sont secondaires à votre article.  Avoir la bonne structure pour le référencement     Voici une bonne structure sémantique en utilisant les balises HTML 5. Ce n’est pas la seule structure fonctionnelle mais pourrait être un bon point de départ. Simplifiez au maximum l’utilisation de ces balises pour englober vos contenus et n’abusez pas de balises sémantiques imbriquées. Vous pourriez simplement vous contenter d’utiliser les balises header, footer, nav et main que vous auriez déjà une structure compréhensible et intelligible pour les moteurs de recherche. Sur le thème servant d’exemple, voici la structure sémantique complète optimisée pour les moteurs de recherche. On y retrouve tout d’abord le header incluant la navigation, puis la partie main incluant un article et des sections à l’intérieur de l’article, et pour finir le footer.  La bonne sémantique adaptée au modèle de votre page Identifiez les pages types sur votre site. On pourrait retrouver par exemple la page d’accueil, les pages catégories et les pages d’article de blog. Adaptez votre sémantique en fonction de votre structure. Le cas de la page d’accueil En règle général, la page d’accueil d’un site est un peu le fourre-tout des thèmes abordés sur le site. Dans ce cas, privilégiez des sections dans votre contenu principal (balise main) afin de bien séparer les différents sujets et thèmes abordés sur la page d’accueil Les balises sémantiques et le CSS Par défaut les balises de structure sémantique ne sont pas stylisés par les navigateurs principaux du marché (Safari, Edge, Internet Explorer, FireFox, Chrome, …) Il s’agit de balises vides de styles (non prévues par les DTD – comprenez CSS par défaut – des différents navigateurs web). Il n’y a pas de restrictions ou contraintes à les styliser directement en CSS. Cependant, et surtout pour les navigateurs d’ancienne génération (notamment Internet Explorer 10 et inférieur) il est possible d’avoir des affichages aléatoires et des bugs visuels puisqu’ils n’étaient pas prévus pour traiter et afficher le HTML 5. Certains frameworks CSS utilisant des reset CSS mettent ces balises en display:block afin de palier aux bugs d’affichage de ces anciens navigateurs. Vous avez le droit de styliser vous-même ces balises en les appelant en CSS comme ceci par exemple : header {display : block ; width :1000px ; margin :0 auto} Ce code permet de définir la largeur (width) de la balise header et de le centrer horizontalement (margin : 0 auto) dans la page.   Pour résumer : -       Une page web en 2019 doit forcément comporter la balise header, la balise main et la balise footer -       Au moins 1 balise nav doit être employée pour définir la navigation principale sur le site -       Au sein de main on doit utiliser des articles ou des sections -       Un article peut contenir plusieurs sections, et une section peut contenir plusieurs articles -       Utilisez une structure aussi simple que possible -       Utilisez le CSS pour style vos éléments   J’espère que ce premier article autour de la sémantique SEO vous aura permis de comprendre et de mieux appréhender la sémantique structurelle d’une page web. Si vous souhaitez une formation HTML, une formation SEO ou un audit de votre site (incluant l’audit SEO et avec un listing de préconisations à suivre) n’hésitez pas à me consulter !          ... Wed, 30 Jan 2019 14:32:13 GMT Jacques Danilo http://www.pixelcrea.com/blog/publications-facebook/ http://www.pixelcrea.com/blog/publications-facebook/ Si vous suivez ou gérez une page (page pro ou page fan suivant les appellations) sur Facebook, vous avez remarquez qu’il existe plusieurs formats possibles de publication : la photo, la galerie photo, le carrousel, etc. Nous allons faire un tour d’horizon des différents formats de publication possible d’un post Facebook. La publication de textes La publication la plus simple, mais la moindre accrocheuse et vendeuse : un simple texte ! Sans limite de taille, vous pouvez rédiger un simple texte comme un long paragraphe. Par contre si votre texte dépasse 3 ou 4 lignes, vous aurez une jolie coupure et un « Afficher la suite » se rajoutera pour voir le restant de votre texte. Cette option n’est pas la plus pratique, car sans mise en page votre texte passera assez inaperçu dans le fil d’actualités de vos abonnés et fans. Pour pallier à ce manque de visibilité, Facebook nous propose d’y ajouter un fond : automatiquement votre texte prend alors vie avec une typo plus lisible et plus grosse, devant un fond imposé par Google (environ 15 fonds proposés à l’heure actuelle). Les engagements générés par une publication texte sur Facebook sont très faibles : simple texte ou texte avec mise en forme (fond personnalisé), ces 2 formats sont assez peu visibles et n’invite pas à la lecture ou à suivre un lien. Mes conseils sur le format textuel :- être le plus court possible- ne jamais utiliser un texte simple sans fond- incitez l’engagement de vos abonnés en posant une question  Les publications d’images et vidéos  Dans les publications standards on retrouve les images et vidéos. Facebook nous propose plusieurs options lors d’un ajout de photos ou vidéos : Import de photos et vidéos, création d’albums photos, diaporamas, création d’une Instant Expérience (canva pour Facebook et Instagram avec éditeur visuel très simple), ... Facebook a tendance à compresser de manière importante vos images. Je vous invite donc à travailler avec des images très grandes (supérieur à 1000 pixels pour le plus petit coté - hauteur ou largeur) et de ne pas compresser l'image par vous-même (sous Photoshop par exemple n'enregistrez pas l'image en passant par "Enregistrement pour le web et les périphériques"). La première option consiste à importer une ou plusieurs photos ou vidéos. Avec la possibilité d'y rajouter un texte également, la publication d'image et/ou de vidéos permet de mieux capter l'attention de l'internaute à l'aide du visuel. Vous pouvez ajouter une seule photo comme un album complet, la présentation s'adaptera comme les exemples ci-dessous : A l'exception de quelques formats peu classiques comme le panoramique horizontal ou vertical, votre image sera affiché en entier dans ces proportions. Une image au format paysage ne prendra alors pas beaucoup de hauteur, le format carré ou portrait est alors à privilégier ! Avec 2 images, les 2 images se mettent l'une à coté de l'autre. La publication prendra alors beaucoup moins de place en hauteur Même remarque avec une publication Facebook de 3 images : les images se mettent sur une seule ligne, réduisant alors la hauteur de la publication et donc sa visibilité auprès de votre cible ! A partir de 4 images, les images se placent sur 2 lignes. Dans le cas d'un nombre d'images plus important, la 4ème image (en bas à droite) se grise affichant le nombre d'image en plus dans la galerie de la publication. Par exemple un +3 indiquera qu'il y a 6 photos au total (3 images visibles et non-grisées + 3 en plus) Dans cet exemple il y a 5 photos (visible en haut par "a ajouté 5 photos" : la publication affichera 3 photos normalement, la 4ème étant grisée pour afficher +2 par dessus. 3 photos normales + 2 on arrive bien à 5 photos/visuels au total. Dans tous les cas, Facebook souhaite que vos images ne soit... que des images ! Evitez de mettre trop de texte sur une image, au risque de voir votre publication refusée lorsque vous boosterez la publication (Facebook Ads). Il existe un outil qui permet de vérifier, avant de se faire refuser une publication sponsorisée, si votre image contient trop de texte ou pas, il s'agit de l'outil Facebook Text Overlay Mes conseils pour les publications d'images :- Favorisez les images carrées et verticales (en mode portrait)- Travaillez et importez toujours de très grandes images pour limiter la compression liée aux images sur facebook- Evitez des formats d'image étirés en hauteur ou en largeur (panoramiques verticaux ou horizontaux) au risque de voir votre image coupée- Evitez le cas de 2 ou 3 photos car l'espace pris par la publication est plus limité en hauteur (donc une moins bonne visibilité)- Testez systématiquement vos images qui contiennent du texte à l'aide de l'outil Facebook Text Overlay Le diaporama photo Facebook propose la génération d'une petite vidéo sur la base de 3 à 10 photos. L'ajout de photos se fait de la même manière qu'une publication avec photo, et permet dans les options de gérer le format, la durée d'affichage de chaque image et la transition entre chaque image. Le format du diaporama- Original : s'adapte au format des images ajoutées- Carré : même hauteur et même largeur, les images seront alors coupées pour ne prendre que le centre de l'image- Rectangle, imposé en 16:9- Vertical au format 2:3 (format qui fonctionne le mieux et ayant le meilleur engagement) Facebook vous propose également de mettre de la musique à votre diaporama en choisissant dans la bibliothèque de Facebook (environ 15 à 20 musiques) ou alors d'importer votre propre bande son (fichier mp3). Assurez-vous d'avoir les droits d'utilisation de la musique que vous importez ;) Le résultat obtenu sera une vidéo simpliste avec vos images à l'intérieur. Il faudra attendre quelques secondes pour voir le rendu final le temps à Facebook de générer votre vidéo. La publication de vidéos C'est le format de prédilection sur Facebook avec le meilleur taux d'engagement : vous jouez avec le mouvement, la musique, l'animation. Et grâce aux smartphones aujourd'hui, la création d'une vidéo devient plus facile et moins couteuse qu'auparavent ! Facebook estime même que d'ici à 2021 78% du contenu mobile sera de la vidéo. Vous pouvez créer des vidéos verticales (prenant alors tout l'écran de l'utilisateur), des instagram Stories, des carrousels de vidéos très courtes et même d'ajouter des produits (collections) à votre publicité vidéo. Les Instant Expériences Anciennement appelées Canvas, il s'agit de constituer une page fictive de pré-information entre votre publication et le Call-To-Action (CTA) : éditez simplement et rapidement une page avec images, sliders, vidéos et textes sans oublier le bouton qui permettra d'accéder à votre site, un formulaire de contact ou d'inscription, le téléchargement de votre jeu ou application, ou tout autre chose d'ailleurs (libre sur l'URL)... Wed, 12 Dec 2018 16:19:06 GMT Jacques Danilo http://www.pixelcrea.com/blog/calendrier-ecommerce-2019/ http://www.pixelcrea.com/blog/calendrier-ecommerce-2019/ L'animation e-commerce est importante pour acquerir de nouveaux visiteurs comme pour fidéliser votre audience. Avec ce calendrier des évènements importants pour l'année 2019, organisez de belles campagnes digitales au travers des réseaux sociaux, de newsletters, du référencement naturel ou de campagnes publicitaires (Google Ads, Facebook Ads, ...). Mois par mois, définissez vos campagnes publicitaires en ligne et mettez toutes les chances de votre coté ! N'hésitez pas à partager cette infographie d'animations e-commerce/e-business autour de vous :) ... Tue, 13 Nov 2018 20:00:57 GMT Jacques Danilo http://www.pixelcrea.com/blog/conserver-internautes/ http://www.pixelcrea.com/blog/conserver-internautes/ Avec plus de 10 conseils pour conserver les internautes sur votre site, cet article vous permettra de découvrir quels sont les leviers pour garder vos visiteurs plus longtemps sur vos pages (et donc votre site). Mesurable avec des outils comme Google Analytics, le temps joue un rôle important pour le référencement naturel (votre positionnement sur Google) mais aussi jouera un rôle dans la prise de décision sur l’achat ou le passage à travers un formulaire de contact ou d’inscription par exemple. Voici un petit tours des axes d’amélioration à apporter à votre contenu pour conserver plus longtemps les internautes sur votre site Internet !  Soyez clair sur votre objectif de site Si vous êtes présent sur Internet, c’est avec un but précis. Un site vitrine cherchera à obtenir des prospects, un site marchand cherchera à générer des ventes, une plateforme en ligne cherchera des inscriptions, un blog monétisé cherchera à générer des affichages/clics pour monétiser sa rédaction, etc. Il est important que votre utilisateur comprenne de quoi il en retourne à chaque instant de sa navigation sur le site. Une technique simple est de rappeler régulièrement dans le contenu ce que vous proposez (un formulaire de contact par exemple pour un site vitrine) par des liens et une rédaction orientée. De plus, votre contenu doit être en lien avec l’objectif de votre site. Une navigation claire permettra de comprendre tout de suite la mission première du site : une icône de panier pour un site marchand amènera tout de suite le visiteur à comprendre qu’on est bien sur un site marchand. Utilisez une navigation simple et claire La navigation sur votre site doit être le plus simple possible : simplifiez le nombre d’éléments de votre navigation, utilisez qu’un seul menu de navigation, ordonnez votre menu sous forme logique, et mettez toujours en dernier le lien le plus important : l’accès au formulaire de contact ou d’inscription, l’accès au panier, etc. La navigation doit présenter dans l’ordre ce que vous proposez. Sur mon site par exemple, vous retrouverez d’abord ma présentation, suivi de mes prestations de graphiste freelance (sans oublier la formation) et d’exemples de réalisations. Enfin, en dernier, la mise en avant par une couleur sur le menu contact permettra à l’internaute de me contacter plus facilement en identifiant tout de suite comment me contacter pour une question, un devis ou une demande de formation. Si vous regardez de grands sites comme celui d’Apple, Amazon, la Fnac, La Poste, Netflix ou Spotify pour ne citer qu’eux, vous verrez que la navigation est simple et permet de comprendre le but premier de chaque site. Faites de même ! J’ai un client qui proposait sur son site marchand des vêtements pour enfants de la naissance à 12 ans. Sa navigation démarrait par fille ou garçon. Un menu déroulant s’ouvrait alors pour proposer tous les âges de 1 mois à 12 ans (menu trop long avec toutes les tailles intermédiaires). Ensuite, une fois l’âge sélectionné, un deuxième niveau de menu déroulant proposait les familles de vêtements (pull, t-shirt, pantalon, pyjama, ...) et ensuite par exemple dans pantalon on retrouvait encore des sous-familles (jean, ville, jogging, …) – le temps et la lourdeur de la navigation rebutait énormément de visiteurs. En la simplifiant au maximum (regroupement d’âges, retrait des sous-familles) la navigation devenait alors plus claire, plus fluide. Proposez des liens connexes dans vos contenus Lors de votre rédaction de contenu, il est fort à parier que vous parliez ou évoquiez de nombreux sujets que vous avez déjà abordés dans vos précédents articles (applicable aussi aux fiches produits d’une boutique en ligne bien sur). Lorsque vous parlez d’un sujet déjà abordé ailleurs sur votre site, proposez un lien sur le terme important au sein de votre contenu. Le visiteur comprendra qu’en cliquant dessus il pourra en savoir plus sur ce sujet. Plus vous aurez des liens vers d’autres contenu plus votre visiteur sera incité à poursuivre sa lecture sur votre site. Il pourra alors passer d’une page à une autre facilement sans pour autant utiliser votre menu principal et se laisser guider de pages en pages. Suggérez des articles ou produits similaires en fin de lecture Comme pour les liens dans votre article de blog, vous pouvez orienter en fin de lecture votre visiteur en lui suggérant des liens annexes dans votre site. Ces liens sont très importants car ils arrivent en bas de la page juste après la lecture de votre contenu. Le visiteur qui affiche des propositions d’articles de blog ou de produits aura déjà pris le temps de lire votre contenu, et donc sera plus susceptible de poursuivre sa lecture au travers d’un autre de vos articles. C’est pourquoi ces liens doivent être soignés, aussi bien par le thème abordé que par l’aspect esthétique : le choix de l’image, le titre et le résumé de l’article doivent être réfléchis. Si vous avez un doute et que vous hésitez entre 2 titres par exemple, faites de l’A/B Testing (testez et mesurez pendant 1 mois les 2 propositions pour voir quelle est la plus performante auprès de vos visiteurs. Réactualisez vos contenus une fois par an Votre contenu est figé dans le temps, rattaché à une date indiquant la date de rédaction ou de publication de l’article. Pourtant, votre article reste d’actualité malgré le temps qui est passé depuis. Il est possible également que des changements soient à opérés dans votre contenu pour le rendre plus actuel (jargon, informations données, chiffres collectés, etc.) Pour qu’un internaute n’ai pas l’impression de perdre son temps, il est judicieux de revenir sur vos contenus une fois par an pour relecture et modification si besoin. La première des solutions pour agrémenter votre ancien contenu est de rajouter une nouvelle zone en bas de votre contenu pour préciser une mise à jour du contenu (datée). On retrouve souvent la mention EDIT du XX/XX/XXXX avant le nouveau contenu rajouté. Une autre solution est de modifier dans le contenu des notes ou précisions par rapport au contexte actuel. Pensez également à faire des liens vers des articles plus récents et sur la même thématique dans votre contenu afin d’orienter le visiteur vers des contenus plus frais. Proposez des vidéos dans votre contenu Pour que le visiteur passe plus de temps sur vos pages, en plus du contenu vous pouvez ajouter des vidéos car le temps de lecture de la vidéo est pris en compte dans le temps passé sur la page. Attention cependant à ne pas proposer de vidéos trop longues, car les outils de tracking comme Google Analytics recommenceront une nouvelle session au bout de 30 minutes passé sur une page (je vulgarise). Simplifiez votre design de page Votre page doit être light pour plusieurs raisons : d’abord, le temps de chargement de la page sera plus court si vous allégez votre design ; votre visiteur sera également moins déconcentré s’il peut afficher uniquement le contenu pur sans les à-côtés (publicités, call-to-action, articles connexes, …), et pour finir l’aspect esthétique doit se concentrer sur la typographie. Ecrivez encore plus ! Cela peut paraître bête, mais la rédaction doit être importante. Pour agrémenter et améliorer vos contenus, n’hésitez pas à vulgariser votre discours et à l’illustrer d’exemples. Préparez votre contenu sur plusieurs jours, afin de vous permettre de prendre le temps de la réflexion, de la critique et de revenir sur un point particulier qui ne vous convient pas. Vous pourrez également reprendre une partie de votre contenu en fonction des critiques faîtes sur les réseaux sociaux en partage ou encore en commentaires. Le but est de rendre vos contenus le plus long possible sans pour autant diluer l’information ou votre prise de position. Ouvrez le débat avec les commentaires/avis Dans le cadre de la rédaction de contenu (fiches produits pour un site e-commerce ou articles pour un blog), si votre plateforme vous le permet (avec des extensions ou modules par exemple), activez les commentaires ou avis, cela vous permettra d’accueillir du contenu supplémentaire. Animez alors la discussion avec vos réponses et améliorez ainsi votre contenu. Pour votre boutique en ligne, vos visiteurs vous cèdera plus de crédit confiance en fonction des avis laissés par les internautes. Proposez un chat en ligne Surtout utilisé dans l’e-commerce, le chat permet de vous rendre disponible pour un internaute s’il a une question à poser. Très utile pour le visiteur qui pourra alors vous contacter directement à travers une petite fenêtre positionnée le plus souvent en bas à droite de la fenêtre du navigateur. Si vous êtes présent (et donc actif), l’internaute pourra à sa guise prendre contact avec vous afin de vérifier les stocks, poser une question sur le produit ou sur l’expédition. Il passera alors plus de temps sur la page, voir être amener à visiter d’autres produits du catalogue à l’aide du chat. Option intéressante également, le lancement automatique du chat au bout de X minutes : si l’internaute passe plus de 3 minutes par exemple sur la page, le chat se lance avec un message d’invitation à la discussion. Limitez les liens sortants au maximum Les liens sortants sont des liens qui pointent vers d’autres sites Internet. L’usage veux que les liens externes s’ouvrent dans un nouvel onglet afin de conserver l’onglet avec votre site ouvert. Mais le risque derrière le lien sortant est de perdre définitivement le visiteur : il suffit que le lien pointe vers un site pertinent pour lui, il restera sur ce dernier sans revenir sur l’onglet encore ouvert avec votre site web.... Tue, 25 Sep 2018 16:06:56 GMT Jacques Danilo http://www.pixelcrea.com/blog/filtres-google-analytics/ http://www.pixelcrea.com/blog/filtres-google-analytics/ Les données récupérées dans Google Analytics captent l’ensemble des pages chargées sur un navigateur lors d’une session. Le problème est qu’il capte tout le trafic, aussi bien des utilisateurs que des robots ou des services en ligne par exemple. Pour pouvoir se repérer et recevoir les bonnes données à analyser sur Google Analytics, il est important de bien filtrer les données captées. Voici une sélection que j’utilise personnellement de 7 filtres que j’estime être indispensable afin de ne capter sur Analytics que les véritables utilisateurs.  Introduction aux filtres dans Google Analytics Le découpage dans Analytics se compose comme ceci : le compte (l’entité de l’entreprise) comporte une ou plusieurs propriétés (des sites Internet) qui eux-même comportent une ou plusieurs vues. Je vous conseille tout d’abord de travailler sur 3 vues différentes : -       Une première vue, nommée données brutes, captera l’ensemble du traffic du site, sans filtrage ou options particulières. Cette vue devra restée intacte tout au long de l’utilisation de Google Analytics. Cela permettra d’avoir une base de comparaison en cas de doute sur l’application d’un filtre notamment. -       Une deuxième vue, nommée vue de test, permettra de tester les différents filtres à employer en fonction de la configuration du site et des attentes que l’on pourrait avoir. Une fois avoir testé le filtre et validé son bon fonctionnement, nous pourrons alors l’appliquer sur la dernière vue. -       La troisième vue à créer est la vue principale, qui recevra les réglages et filtres définitifs. Je vous conseille également de définir cette vue par défaut, afin que Google Analytics vous l’affiche par défaut au chargement de l’application web. -       Dans le cas où vous aviez déjà une ou plusieurs vues pour votre site, gardez-les ! Renommez-les pour comprendre qu’il s’agit d’anciennes vues (en rajoutant OLD par exemple dans l’intitulé de la vue du site. Ne les supprimez pas, car les nouvelles vues créées ne peuvent pas récupérer les données antérieures. Sinon, vous repartirez de zéro (avec aucune comparaison possible sur les sessions antérieures)...   Les filtres s’appliquent donc aux vues. Pour cela allez dans l’onglet administration > vue > filtres. Les filtres s’appliquent dans l’ordre (du haut vers le bas), il est donc important de bien comprendre les filtres que vous appliquez et d’en déterminer l’ordre si vous travaillez sur les mêmes statistiques ou dimensions. Vous pouvez modifier l’ordre des filtres à tout moment mais, comme pour tout sur Google Analytics, l’impact ne pourra pas être visible sur les données antérieures à vos changements.   Rappel : tous filtres doivent être testés sur votre vue de test avant de l’appliquer à votre vue principale, sans quoi un mauvais réglage pourrait vous couper de plusieurs données importantes à l’analyse de votre site web. Filtre Google Analytics 1 : Exclure votre adresse IP Comme vous disposez d’un site, vous allez forcément le consulter souvent : voir s’il fonctionne toujours, si le dernier article se présente bien, ou simplement rechercher une information à l’intérieur de votre site. Alors forcément, Google le capte et vous indique une visite sur le site. Avec un filtre, vous pouvez exclure auprès de Google Analytics tout le trafic généré par vos passages sur le site (et/ou ceux des employés de l’entreprise). Attention cependant, pour que le filtre fonctionne tout le temps, vous devez être en IP fixe.  L’adresse IP est un peu votre adresse postale sur Internet : lorsque vous surfez sur Internet, cette adresse vous permet de recevoir les pages demandées. Pour des raisons de sécurité, votre adresse IP à la maison change toutes les 24h de manière totalement transparente pour vous pour vous prémunir d’attaques pirates ciblées. Etre en IP fixe est principalement utile en entreprise, car les besoins en connexion avec l’entreprise sont nombreux : les commerciaux avec leurs outils CRM, les clients avec des serveurs de dépôts de fichiers, les applications tierces avec l’échange de données, et j’en passe. Il serait très difficile et contraignant de reconfigurer tous les systèmes en embauchant tous les matins par exemple. Pour vérifier si vous être adresse IP fixe, recherchez votre adresse ip avec Google ou directement sur ce site pour afficher votre adresse IP. Attendez 24h et retournez sur ce site pour voir si votre numéro a changé. Si c’est le cas c’est que vous avez une adresse IP qui change, sinon il y a de fortes chances que vous soyez en IP fixe. Le filtre pour exclure votre adresse IP de Google Analytics doit se créer comme ceci : -       Créer un nouveau filtre -       Nommez-le Exclure adresse IP ou un autre nom qui vous parle -       Dans le type de filtre, choisissez Prédéfini. -       Sur la ligne d’en dessous nous allons exclure le trafic provenant des adresses IP et étant égal à… -       Dans le champ adresse IP collez l’adresse IP obtenue à l’aide de ce site. -       Enregistrez votre filtre -       Recommencez en créant d’autres filtres identiques pour tous les postes de l’entreprise si besoin.   Pour tester ce filtre, il vous suffira de regarder alors le temps réel pendant que vous passez d’une page à une autre pour vous rendre compte qu’il ne vous détecte plus. Si tout s’est bien passé, appliquez ce filtre à votre vue principale. Vous ne serez plus détecté à présent sur Google Analytics. Filtre Google Analytics 2 : Exclure les visites fantômes Si vous allez voir dans Audience > Technologie > Réseau, sur la dimension Nom d’hôte, et en utilisant la plage de date la plus grande, vous pourrez peut-être vous apercevoir qu’il n’y a pas que votre nom de domaine qui apparaît ici. Il est possible ici de retrouver d’autres formes d’accès à votre site. Par exemple, si vous retrouvez en nom d’hôte la valeur webcache.googleusercontent.com c’est que certains utilisateurs ont regardé votre site à travers l’option En cache disponible chez Google. translate.googleusercontent.com est l’outil de Google pour traduire les pages. Si vous avez fait un audit SEO, d’autres lignes peuvent apparaître ici. Seulement voilà, mis à part l’accès à votre site via votre nom de domaine (avec et/ou sans les www), le reste ne nous intéresse absolument pas. Ce sont des parasites à nos analyses. Pour les retirer de notre vue, nous allons créer un autre filtre comme ceci : -       Créer un nouveau filtre dans votre vue de test -       Nommez ce filtre par exemple comme Exclure les hôtes fantômes -       Sélectionnez Type de filtre personnalisé -       Nous allons Inclure le champs de filtrage Nom d’hôte avec comme règle de filtrage (www\.|^)votredomaine.com en remplaçant votredomaine.com par votre nom de domaine. -       Enregistrez ce filtre (aucune autre option à cocher ici)   Pour l’explication, la ligne (www\.|^)votredomaine.com permet à Google Analytics de ne prendre en compte uniquement les nom d’hôtes avec pour valeur www.votredomaine.com et votredomaine.com. Ce qui exclura alors d’office tous les autres parasites comme la page en cache, le service de traduction ou les autres sites d’audit par exemple, car ils ne sont pas de véritables utilisateurs. Pour vérifier l’application du filtrage des hôtes fantômes, utilisez le site siteliner pour auditer votre site sur le duplicate content par exemple. Si siteliner apparaît dans les noms d’hotes c’est que votre filtre ne s’applique pas correctement. S’il n’apparaît pas c’est tout bon, vous avez réussi à l’exclure de Google Analytics. Filtre Google Analytics 3 : Exclure not set dans les résolutions d’appareils Si vous regardez dans Audience > Mobile > Appareils dans la dimension principale Résolution d’écran, vous pourriez retrouver la valeur (not set) : il s’agit la plupart du temps de robots ou d’outils en ligne scannant votre site (pour un audit SEO par exemple) – hors cette valeur signifie que des visiteurs autre que des utilisateurs faussent vos données. Pour les exclure, un filtre appliqué à la vue vous permettra d’enlever ces sessions des différents rapports de Google Analytics. Pour se faire : -       Créez un nouveau filtre dans votre vue de test -       Nommez ce filtre Exclure les résolutions d’écran (not set) -       Configurez un filtre personnalisé de type Exclure le champ de filtrage Résolution d’écran -       La règle de filtrage à indiquer est ^\(not set\)$ -       Enregistrez ce filtre sans autres options à cocher Pour vérifier que le filtre sur les résolutions d’écran fonctionne bien attendez un peu pour observer si une ligne (not set) apparaît de nouveau. Si aucun (not set) apparaît alors c’est que le filtre fonctionne bien ! Filtre Google Analytics 4 : Regroupez vos noms de domaine Google Analytics fait la différence entre l’accès à votre site via www.votredomaine.com et l’accès via votredomaine.com. Cela peut générer les rapports erronés pour les pages les plus vues, d’entrée, et de sortie entre autre ! Pour corriger cela, même si normalement vous ne devriez accéder qu’à un seul hôte (choix à faire sur l’outil Google Search Console), il faut regrouper les 2 noms d’hôtes en un seul avec un filtre rechercher et remplacer : -       Créez un nouveau filtre et nommez le Regroupement noms d’hôtes. -       Configurez le type de filtre personnalisé en cochant Rechercher et remplacer -       Le champ de filtrage est le Nom d’hôte -       La Chaîne de recherche est ^votredomaine\.com$ -       La Chaîne de remplacement est www.votredomaine.com -       Enregistrez le filtre   Pour vérifier si les 2 appellations sont bien regroupées ensemble, testez en accédant des 2 manières sur un navigateur différent (et une autre adresse IP que la vôtre si vous avez appliqué le filtre d’exclusion de votre adresse IP) ! Si le nom d’hôte reste le même sur Analytics c’est que c’est bon ! Filtre Google Analytics 5 : Les recherches du site en minuscule Si votre site est doté d’une recherche onsite (un formulaire de recherche sur votre site), Analytics est capable d’enregistrer la recherche dans ces rapports, mais est sensible à la casse : l’outil de webtracking vous présentera les recherches chaussure, CHAUSSURE, et ChaussuRe comme étant 3 termes de recherche différents. Hors cette sensibilité à la casse sur Google Analytics est génante car le plus souvent votre moteur de recherche onsite n’est pas sensible à la casse et considèrera que ces 3 termes de recherches donneront les mêmes résultats au final. L’analyse de ces données est également compliquée : Il existera une ligne différente pour chaque écriture possible du même terme de recherche. Pour y remédier, créer un filtre pour mettre tous les termes de recherche en minuscule sur Analytics pour les regrouper : -       Créez un nouveau filtre nommé Recherches en minuscule -       Ce filtre personnalisé configurera l’option Minuscules sur le champ de filtrage Terme de recherche -       Enregistrez le filtre   Pour le vérifier, faites différentes recherches sur le site avec des majuscules et minuscules et regardez le résultat de recherche dans Comportement > Site Search > Termes de recherche. Vous pouvez également reproduire ce filtre sur d’autres champs de filtrage comme les url des pages par exemple (avec URI de la demande) ou les Catégories Site Search si elles sont configurées dans les paramètres de la vue. Filtre Google Analytics 6 : Hacker le (not provided) des mots clefs Google Analytics ne nous présente qu’une petite partie des termes de recherche sur son moteur de recherche, il cache le reste dans une ligne appelée (not provided) qui représente aux alentours des 93% à 97% du volume de recherches sur Google, ce qui est énorme ! Il ne semble garder que les recherches de longues traines (avec 3 ou 4 mots au minimum). A ce jour il n’existe aucune recette miracle pour contrer Analytics et avoir le détail du terme de recherche. Par contre on peut feinter et détourner un peu les informations. La logique de ce filtre est de remplacer le terme not provided par l’url de la page d’atterrissage. Cela ne nous donnera pas le terme de recherche mais nous orientera en connaissant les pages générant ce trafic directement dans le rapport sur les termes de recherche en recherche organique. Ce rapport est visible dans Acquisition > Tout le trafic > Canaux et en cliquant sur le Default Channel Grouping > Organic Search. -       Créer un nouveau filtre Analytics : Hack - Not provided -       En mode avancé, dans le champ A indiquez le Terme de la campagne avec la valeur (.not provided.) -       Le champ B est l’URL de la demande avec en valeur (.*) -       Le champ de sortie est également un Terme de la campagne en écrivant np - $B1 comme valeur -       Le champ A est requis, tout comme le champ B, et le champ de sortie est bien remplacé. -       Enregistrez ce filtre   Vous observerez très vite une distinction de vos mots clefs avec l’indication np – l’URL de la page d’atterrissage. Certes Google ne vous affiche toujours pas les mots-clefs, mais vous permet de tirer quelques analyses en fonction des pages indiquées. Filtre Google Analytics 7 : Le nom de domaine dans les URL des pages Dans la partie Comportement, Google analytics vous affiche que le chemin des pages depuis la racine, en n’incluant pas le nom de domaine. Par exemple, il affichera la page contact comme /contact/ au lieu de https://www.votredomaine.com/contact/ - Il est alors possible à l’aide d’un filtre Google Analytics de palier le problème. Attention : ce filtre est intéressant pour ceux qui exportent leurs données vers Excel par exemple afin d’avoir l’url complète, plus pratique et rapide pour des copier/coller. Cependant cela casse l’accès à la page depuis Analytics (le petit icône à droite représentant une flèche dans un cadre). Ce filtre n’est pas forcément indispensable mais pour gagner du temps lors d’une analyse extérieure à Analytics c’est relativement pratique ! -       Créez un nouveau filtre nommé Nom de domaine dans les URL -       En mode avancé, le champ A est un nom d’hôte avec comme valeur (.*) – le champ B est URI de la demande avec la valeur (.*) – et le champ de sortie est URI de la demande avec comme valeur $A1$B1 (sans espace) -       Le champ A est requis, tout comme le champ B, et le champ de sortie est bien remplacé. -       Enregistrez ce filtre   Pour le tester regardez vos pages de destinations, de sorties et la vue générale pour vous rendre compte qu’à partir de maintenant les pages présentent votre nom de domaine ainsi que l’URI de la page en question. Conclusion sur l’utilisation des filtres A l’aide de ces 7 filtres pour l’outil de tracking de chez Google, vous allez pouvoir afficher, et donc analyser, uniquement les véritables internautes surfant sur votre site. En éliminant vos sessions et celles laissées par les robots et outils servant à la surveillance de votre site (par vous, l’agence qui pilote votre site Internet ou les concurrents). Si vous avez d'autres filtres que vous jugez utile, n'hésitez pas à les partager en commentaire à cet article pour rassembler l'ensemble des bonnes pratiques sur Google Analytics.... Tue, 04 Sep 2018 15:05:38 GMT Jacques Danilo http://www.pixelcrea.com/blog/google-analytics/ http://www.pixelcrea.com/blog/google-analytics/ Pour vérifier l’efficacité de votre site internet, ou de mesurer des informations pertinentes lors de vos actions en webmarketing, l’outil indispensable de collecte de données est sans nul doute Google Analytics. De par son jargon et sa configuration très austère, il est toujours difficile d’appréhender le numéro 1 des outils d’analyse web (web analytics en anglais). Voici quelques bases et explications sur l’outil, par son installation, sa configuration et son jargon. Introduction à Google Analytics Google Analytics est un outil de collecte et d’analyse de données web. En clair, c’est un outil de captation des données sur les internautes qui visitent les pages de votre site web. Grâce à cet outil, il est possible de savoir le volume de trafic sur l’ensemble du site, ou encore par quel moyen ils ont accédés au site (moteur de recherche, emailing, campagnes réalisées sur Google Ads, réseaux sociaux, etc.). Si vous faites ou souhaitez faire du webmarketing, c’est à dire des actions commerciales sur Internet, il est alors important de pouvoir analyser correctement vos actions. Par exemple, si vous envoyez des mails commerciaux à vos clients ou prospects, il serait intéressant de savoir le nombre de personnes qui sont aller voir votre offre sur votre site, et ce qu’ils font en général ensuite, afin d’en améliorer l’efficacité lors de votre prochain envoi non ? Installation de Google Analytics sur votre site Dans un premier temps il vous faudra un compte sur Google Analytics, en vous rendant sur l’outil (par une simple recherche Google) vous devrez vous inscrire ou raccorder votre compte Google à Analytics. Une fois connecté, il vous faudra créer un compte pour votre site web, ce qui vous donnera un code de suivi en javascript à placer sur votre site. Pour ajouter le code de suivi Google Analytics, il suffit d’ajouter le code fourni basé sur gtag.js sur l’ensemble de vos pages web. Attention, depuis l’utilisation du javascript gtag.js, le code se place tout en haut de votre code, juste après l’ouverture de la balise HEAD de votre document. Habituellement, le code javascript doit être placé en bas du code de la page, juste avant la fermeture de la balise BODY, permettant alors un chargement plus rapide de la page. Mais Google dispose d’un nouvel outil nommé Google Tag Manager qui permet, en autre, de piloter plusieurs traqueurs en même temps en plus d’analytics directement par un seul code javascript unique. De ce fait, l’appel de Google Analytics a changé pour utiliser directement la technologie de Tag Manager en permettant de se lancer dès l’appel de la page, permettant de surveiller plus facilement votre page et donc les actions réalisées dessus. La structure de Google Analytics Sur Google Analytics, l’outil est décomposé en 3 niveaux : le compte, la propriété et la vue. Voici les définitions et explications sur ces 3 termes particuliers sur Google Analytics. 1/ Le compte représente votre société dans Google Analytics. Il est piloté par votre compte Google et pourra, comme pour les autres niveaux (propriétés, vues) être partagé avec d’autres compte Google afin qu’ils puissent voir et piloter les fonctionnalités de Google Analytics. On y retrouve également les options générales comme le fait de partager vos données avec Google à des fins d’amélioration de leurs outils, ou encore l’analyse comparative qui permettra à Google de vous fournir des informations démographiques intelligentes. 2/ La propriété représente votre site Internet à suivre et à analyser. C’est la propriété qui possède le code de suivi à placer sur l’ensemble de vos pages. Vous pouvez associer votre vue à des outils annexes comme la Search Console ou Google Ads afin de recevoir des données de ces outils et affiner votre analyse. 3/ La vue est l’affichage des données. Vous pouvez en avoir plusieurs et je vous conseille de créer directement 3 vues : une première vue pour les données brutes (avec les réglages par défauts), une deuxième vue pour vos tests (sur la configuration, la segmentation, vos objectifs et évènements, etc…) et une troisième vue d’exploitation (une fois les tests concluants) Fonctionnement de Google Analytics Pour comprendre le fonctionnement de l’outil, il faut comprendre que Google Analytics est sollicité à chaque chargement de page sur votre site lorsque celle-ci lance le code de suivi placé dans votre page. Lors de cet appel, Google Analytics capte l’information que votre internaute regarde telle page sur votre site. Il le reconnaît à travers un cookie présent sur votre ordinateur permettant de vous suivre tout au long de votre navigation. Ce cookie ne comporte qu’un identifiant unique le temps de votre navigation et ne fournit en aucun cas à Google votre nom, numéro de téléphone ou adresse physique. Rien de tout ça ! Il ne s’agit que d’un numéro attribué aléatoirement par Google pour vous suivre et vous reconnaître dans votre parcours sur votre site. Ce cookie est propre à une configuration : votre connexion internet, votre ordinateur et votre navigateur. En clair vous n’aurez pas le même cookie si vous changez de navigateur, de poste informatique ou de connexion réseau. C’est important de bien comprendre que Google capte des cookies et non des internautes. Durant votre navigation sur Internet, chaque page affichée envoie donc un message à Google, et votre passage sur le site est appelé une session. Cette session regroupe l’ensemble des pages chargées et actions réalisées sur le site. Ce qui fait que dans les premières statistiques que Google nous propose, c’est le nombre de sessions réalisés. Concrètement cela correspond au nombre de cookie différent qu’il a vu dans une période donnée (en haut à droite de quasiment tous les écrans de Google Analytics). Une session démarre lors de la première page chargée de votre site et se termine au bout de 30 minutes d’inactivité, causée par la fermeture de la page, un clic sur un lien externe, ... ce qui aura pour conséquence de donner un temps de visite sur la dernière page vue à 0s : Google Analytics se pouvant connaître le moment précis où vous quittez la page, il ne donnera pas de données et renverra zéro secondes.... Thu, 23 Aug 2018 19:21:40 GMT Jacques Danilo http://www.pixelcrea.com/blog/wordpress-administration/ http://www.pixelcrea.com/blog/wordpress-administration/ Dans ce tutoriel destiné aux débutants, je vais vous présenter l’interface d’administration de Wordpress. Il s’agit ici d’une découverte pour ceux qui utilisent l’outil pour la toute première fois. Je commencerai par vous présenter l’interface générale, puis nous ferons le tour du menu principal de Wordpress. Pour finir, je vous donnerai quelques conseils et choses à faire et vérifier dès qu’on démarre un nouveau site avec Wordpress. Wordpress, le leader des CMS ! Un CMS (Content Management System - système de gestion de contenu) est un système qui vous permet de concevoir un site web sans être obligé de développer votre site par le code. Au travers d’une interface d’administration, vous créez vous-même les pages de votre site, avec un éditeur de texte riche permettant une mise en page de votre texte (couleur, alignement, soulignement, etc.). Wordpress est l’outil aujourd’hui le plus utilisé à travers le monde (représentant environ 1 site sur 3 dans le monde). Dans la concurrence on retrouve Joomla, Drupal, DotClear, Typo3, Mambo, et des centaines d’autres moins connus. Et comme la plupart des solutions de gestions de sites internet, Wordpress est gratuit ! Vous trouverez sur le blog quelques explications et infographies sur Wordpress. Principe de fonctionnement A travers l’administration du site, il vous est possible de quasiment tout contrôler sur votre site : son aspect graphique (avec les thèmes graphiques), son aspect technique (en y rajoutant des extensions) et son contenu (avec des pages et des articles). Bref, vous pouvez faire quasiment tout sans mettre les mains dans le cambouis. Plutôt pratique et qui évite des centaines d’heures d’apprentissage sur les diverses technologies employées pour la création d’un site sur mesure : HTML, CSS, PhP, MySql, JavaScript, et j’en passe… Découverte de l’interface de Wordpress A la première connexion, vous arrivez sur le tableau de bord de Wordpress, page d’accueil de l’administration. Ici la version utilisée est la version 4.9.7 et peut être légèrement différente de ce que vous pouvez avoir sur votre écran. Mais la structure est la même : une barre d’administration noire au-dessus, le menu principal à gauche, et la zone de travail à droite comme présenté ici : La barre d’administration A partir du moment où vous êtes connecté au site en tant qu’administrateur, cette barre reste présente en haut de votre site. Aussi bien sur la partie administration que sur la partie publique, cette barre vous permet de passer du site à l’administration et inversement. Pour cela il vous suffit de cliquer sur le nom de votre site à gauche (ici le nom de mon site est Mon premier site). A droite on retrouve l’accès à votre compte à vous. En passant le curseur sur votre identifiant (ici admin), un menu s’ouvre : c’est ici que vous pouvez changer votre mot de passe par exemple ou pour vous déconnecter. Le menu principal de Wordpress Le menu à gauche regroupe l’ensemble des actions possibles, triées par ordre d’usage : vous utiliserez plus souvent les pages ou les articles que les réglages du site ou les utilisateurs dans votre activité de tous les jours dessus. Le tableau de bord Sur la page d’accueil de l’administration, vous retrouverez quelques informations générales sur votre site, comme le nombre d’articles, de pages et de commentaires. Les articles Ici se rangent tous les contenus de votre blog. Wordpress étant un CMS de type blog, les articles se suivent par date et peuvent être rangés dans des catégories et porter des étiquettes (mots-clefs permettant de les regrouper comme des catégories). La bibliothèque de médias Tous les médias que vous utilisez pour remplir vos pages se retrouvent ici : les images, évidemment, mais aussi les fichiers PDF, les fichiers son, vidéo, ... A ce propos j'avais rédigé un article sur comment optimiser les images pour le SEO avec Wordpress. Les pages Les pages sont comme les articles à la différence près qu’ils n’ont pas cette contrainte d’être rangé chronologiquement. Elles sont indépendantes mais peuvent être rangées dans une page parente pour créer des niveaux de profondeur dans le site. Par exemple on pourra avoir une page Qui sommes-nous, avec 2 sous-pages (présentation de l’entreprise, et les chiffres clefs par exemple). Cette hiérarchisation des pages vous permettra de réaliser des sites riches en contenu et d’avoir une structure (arborescence) sur plusieurs niveaux Les commentaires Comme Wordpress est un CMS orienté blog, il accepte de recevoir des commentaires sur vos articles. Toute la gestion de ces commentaires se retrouvera ici : modération, modification et suppression des commentaires au besoin. L’apparence Comme expliqué dans l’introduction, Wordpress sépare le fond de la forme. Le fond correspond aux fichiers sources de Wordpress, et la forme se retrouve dans le menu apparence. On y retrouve les thèmes (l’aspect graphique général de votre site), les widgets (pour personnaliser les colonnes du site par exemple) et les menus (pour gérer et ordonner le menu principal entre-autre). D’ailleurs vous retrouverez énormément de thèmes gratuits sur le site de Wordpress directement, mais attention aux pièges en choisissant un thème. Vous pouvez aussi, avec des connaissances sur les technologies HTML, CSS, et PHP, créer votre propre thème Wordpress ! Les extensions En plus des fonctionnalités de base que vous propose Wordpress, vous pouvez en ajouter dans cette rubrique. Ces nouvelles fonctionnalités couvrent à peu près tout ce qui est possible de faire : filtre capcha pour limiter le spam, système de mise en page évolué, optimisation SEO, etc... Les utilisateurs Ici sont regroupés les différents utilisateurs de votre site. Vous retrouvez votre compte administrateur ici, et vous pouvez aussi créer autant de compte que désiré. De plus Wordpress permet de gérer des niveaux d’accès différents : on retrouve par défaut les rôles d’abonné, de contributeur, d’auteur et d’éditeur en plus du rôle d’administrateur que vous avez vous. Voici visuellement le récapitulatif des différences entre ces niveaux d’administration : Les outils Les outils proposés par Wordpress vous permettront d’importer du contenu d’un autre CMS qui vous faite une migration d’un ancien site (réalisé par un autre CMS connu obligatoirement). Les réglages Derrière cette dernière rubrique se cache toute la configuration de votre site et le comportement que doit adopter Wordpress. Attention aux réglages que vous mettez ici, cela pourrait faire planter votre site en quelques clics. Je vous recommande vivement de faire appel à quelqu’un qui s’y connaît pour cette partie-là qui est relativement sensible.  Quelles sont les choses à faire au démarrage de votre site ? Lors du premier accès à votre administration (back-office de Wordpress), je vous conseille de faire plusieurs petites choses pour bien configurer et utiliser votre site par la suite. Mon premier conseil est d’aller faire un tour dans les réglages du site dans la rubrique permaliens pour sélectionner le réglage des urls de votre site sur nom de l’article : les adresses URL de vos pages seront alors parlantes pour l’internaute (on comprendra tout de suite vers où on va) et favorisera votre référencement sur Google. Pour le référencement toujours allez voir dans les réglages la partie lecture pour décider si vous souhaitez faire référencer votre site par Wordpress ou non. Si vous débutez et que vous souhaitez remplir votre site tranquillement, ne le faite pas référencer de suite, au risque de voir votre contenu référencé par Google et ainsi ouvrir la porte aux visiteurs. Pensez alors à réactiver l’indexation par Google lorsque vous serez prêt. Dans les réglages généraux ensuite vous pouvez personnaliser le nom de votre site ainsi que son slogan. Et si votre hébergement supporte le https (web sécurisé dans les échanges – je vulgarise), remplacez http par https dans les 2 champs URL (pour Wordpress et pour le site). Ensuite dans les extensions je vous préconise de rechercher, d’installer et d’activer les extensions suivantes : Contact Form 7, pour réaliser un formulaire de contact sur votre site ; Cookie Notice, pour ne pas être hors-la-loi et indiquer aux utilisateurs que vous utilisez des cookies ; Yoast SEO, pour optimiser votre référencement sur les moteurs de recherche ; WP Maintenance, si vous souhaitez couper le site et afficher un message d’attente à la place ; et pour finir Analytics Code Integration, pour suivre sur Google Analytics vos visiteurs. Ce sont pour moi les bases indispensables en terme d’extensions mais vous retrouverez des dizaines d’autres extensions indispensables un peu partout sur Internet.  La sécurité sur Wordpress Wordpress étant le CMS le plus utilisé dans le monde, vous vous doutez bien que les pirates informatiques cherchent sans relâche des failles de sécurité pour récupérer vos données (compte administrateur du site, contenu de vos pages, données recueillis, … Vous devez activer et configurer votre site Wordpress en https absolument, et vous créer un compte administrateur béton : n’utilisez pas comme login les mots admin, administrateur, ou administrator, utilisez un identifiant qui soit propre à vous et difficile à trouver (ex : Etienne75) et utilisez un mot de passe compliqué : plus de 10 caractères en mixant les minuscules, les majuscules, les caractères spéciaux et les chiffres. Sans cette première mise en sécurité, votre site risquera d’être piraté trop facilement et donc de planter votre activité en ligne.  Pensez également à faire toutes les mises à jour possibles (Wordpress, les thèmes et les extensions utilisées) afin de corriger des failles ou bugs éventuels sur les versions plus anciennes. Une pastille apparaitra en haut du site si des éléments sont à mettre à jour sur votre site.   J’espère que cette introduction à l’interface d’administration de Wordpress vous aura permis de vous sentir un peu plus à l’aise avec le fonctionnement du back-office et des options importantes. Je propose des formations personnalisées pour vous permettre de gagner en production avec Wordpress, ou d’améliorer le référencement de votre site Wordpress ou encore une formation pour créer votre propre thème Wordpress. N’hésitez pas à me contacter si le besoin se fait sentir.... Fri, 13 Jul 2018 12:25:55 GMT Jacques Danilo http://www.pixelcrea.com/blog/prestashop17-seo/ http://www.pixelcrea.com/blog/prestashop17-seo/ Mettez toutes les chances de votre coté en adoptant les bons réflexes SEO lorsque vous ajoutez un produit sur Prestashop 1.7. Etape par étape, nous allons découvrir les bons choix stratégiques pour renseigner une belle fiche produit pour les moteurs de recherche (mais surtout et avant tout Google évidemment) : de l'optimisation du titre du produit aux choix d'options à affecter sur votre fiche produit, découvrons points par points toutes les subtilités d'un bon référencement avec Prestashop. Lorsque vous ajoutez un nouveau produit (ou que vous en modifiez un), beaucoup de champs sont à remplir : le prix, la description, son titre, les quantités, les mots-clefs, etc... Mais savez-vous que certains champs sont néfastes pour votre référencement (risque de pénalité Google). Regardons de plus près les étapes clés d'un bon référencement SEO avec la dernière version stable de Prestashop : la version 1.7 Note : pour ceux qui utilisent encore la version 1.6, les champs à remplir et les options sont quasiment les même, seule la présentation et l'ordre d'appel de chaque champs ou option change ! L'onglet "Essentiel" A. Le nom du produitLe nom du produit est l'élément le plus important de la page, il s'agit du titre principal du produit, et donc de la page. Normalement, si le thème utilisé est bien conçu, le titre de votre produit doit être encapsulé dans une balise HTML H1 (en inspectant le code source de votre page, vous devriez retrouver h1 et /h1 entourant le nom de votre produit). Pour rappel, il ne doit y avoir qu'une seule balise H1 dans la page, avec une taille comprise idéalement entre 35 et 80 caractères, incluant un ou plusieurs mots-clefs. Par exemple : "Canapé 3 places Miami moderne - couleur gris ardoise" B. Les images de votre produitSi vous n'avez pas encore lu le dossier sur l'optimisation des images pour le référencement, je vous invite à vous jeter dessus. Pour résumer, sur Prestashop vous pouvez contrôler la légende de l'image uniquement, puisque le nom sera repris en fonction du nom du produit (A), la résolution et la qualité de l'image dépendent du thème retenu et installé sur votre Prestashop... Chaque image doit avoir une légende différente (jamais la même pour toutes les images) et doivent expliquer le contenu de la photo. Ne cherchez pas à en faire trop ou à y placer trop de mots-clefs.Par exemple : "Assise du canapé gris-ardoise miami" ou encore "Vu de dos du canapé 3 places" C. Le récapitulatif et la description du produitIci souvent les choses se gatent : le récapitulatif représente le texte situé entre le titre du produit et le bouton de CallToAction "Ajouter au panier". La description représente la zone de texte disponible en bas de la page pour le détail complet du produit. Vous avez dans les 2 cas un éditeur de texte évolué avec de la mise en page, de la mise en gras, des liens, etc... Dans les points à regarder attentivement (une petite liste non-exaustive) : - Ne pas utiliser le titre 1 (il s'agit de la balise H1, qui doit être unique dans une page, et déjà utilisé par le nom de votre produit)- Attention aux titres d'ordre général : vous pouvez utiliser des titres 2, 3, 4, ... mais avec sagesse : si vous devez faire 2 parties dans votre description (ex : pourquoi choisir cette télévision - et - la qualité du plasma ultraHD dans votre salon) utilisez des titres h2 (qui sont les plus importants après la balise H1), et si dans une partie vous souhaitez réutiliser des titres pour diviser votre contenu, utilisez des titres h3 (titres de niveau 3) - comme par exemple "la longévité du plasma" et "l'entretien d'un écran plasma"...- Utilisez de temps en temps du gras et/ou de l'italique pour mettre en avant certains termes (mot-clef ou groupe de mots-clefs) qui sont dans le même champ lexical que votre titre de produit. Cette mise en avant rapporte des points pour Google !- Faites des liens internes : de 3 à 10 liens au grand maximum, toujours vers des pages de votre site (on ne veux pas faire partir l'internaute, au contraire) permettront de mieux naviguer dans les différentes catégories et différents produits de votre boutique. Faites des liens dans le même univers (un produit canapé qui pointe vers des chaussettes ou vers la fiche produit d'un sac aspirateur n'offre pas un grand intérêt)- Votre description doit comporter environ 2500 à 3000 caractères pour représenter un intérêt important pour Google (permettant d'être plus facilement placé sur la première page de Google) - n'hésitez pas à faire de la rédaction donc, et surtout, ne faites jamais de copier-coller de textes sur Internet, Google n'aime pas ça, mais alors pas du tout... D. Les caractéristiques produitLes caractéristiques sont les données techniques de votre produit (dimensions, système d'accroche, matière, coloris, etc...). En plus de pouvoir aider votre visiteur dans sa prise de décision, cela vous permet également de placer du texte référençable. N'hésitez pas alors à en charger au maximum : le genre, le style, le type de produit, etc... N'hésitez pas à faire de la répétition avec les zones description et récapitulatif  E. La marqueLa marque permet d'un point de vu fonctionnel de cliquer sur la marque pour voir tous les produits de cette marque que vous vendez sur le shop. Super pour l'utilisateur (si tenté que la marque est connue ou recherchée), mais pas terrible en SEO : en fait vous allez créer une nouvelle page (les produits de la marque) qui se trouvent déjà dans des catégories : vous êtes en train de faire du contenu dupliqué et de diffuser des pages sans réels intérêts pour le référencement. Attention à ça. Pour les plus techniciens d'entre-vous, je vous invite à mettre ces pages créées en noindex pour éviter que Google ne les indexe dans ses résultats de recherche... F. Les produits associésComme les liens dans votre description (ou dans la zone récapitulatif), les produits associés permettent de diriger et d'orienter vos visiteurs vers des produits similaires ou associés. Mais ce sont avant tout des liens, et ils devront donc diriger l'internaute vers des pages ressemblantes en terme de contenu et de mots-clefs. Si vous êtes sur une fiche produit d'un film d'action en DVD, orientez l'internaute vers d'autres films d'actions plutôt que vers des boites de rangement ou des goodies (peluches, tshirts, series tv, etc...) G. Les déclinaisonsLes déclinaisons sont les variantes d'un produit. Si vous proposez un produit en plusieurs couleurs, plusieurs tailles, pointures, (etc) vous devriez utiliser les déclinaisons au lieu de proposer plusieurs produits trop souvent identiques dans leur contenus. Afin d'eviter le duplicate content (contenu dupliqué) traqué par Google depuis plusieurs années, au risque de se voir pénalisé dans les résultats de recherche du moteur de recherche, privilégiez le rassemblement en une seule et même fiche produit avec déclinaisons. Cela diminuera évidemment le nombre de vos produits mais vous gagnerez en qualité. En rassemblant le tout avec les déclinaisons, vous gagnerez aussi en confort utilisateur, qui pourra alors adapter son choix plus facilement que de devoir naviguer à travers les catégories du site. H. La référence du produitChaque produit dispose d'une référence, c'est à dire un nom/numéro unique pour votre organisation. Cette référence ne concerne que votre e-commerce et votre gestion des stocks. Vous pouvez donc la personnaliser. Tout d'abord en y placant un mot clé, comme par exemple "canape-scandinave-93842". Bon ce n'est qu'un mot (plus facilement plaçable dans un contenu par exemple) mais c'est toujours ça. Vous pouvez aussi nommer cette référence en fonction du modèle et de sa désignation publique, comme par exemple "smartphone-apple-iphone7plus-256go-blanc" ou encore "samsung-plasma-tv299u34958" qui pourrait vous donner du poids sur une recherche de référence sur Google (Attention : sur le plan marketing, se positionner sur une référence produit peux amener une cible non prévue, ceux qui recherche des informations techniques d'un produit si ils l'ont déjà (comme par exemple connaître les références des cartouches d'encres d'un modèle particulier), et ramènera un profil cherchant à comparer les prix pour une finalisation d'achat (puisqu'il est arété sur un modèle précis, maintenant il recherche l'offre!) I. Les catégories associées (et la catégorie principale)Votre produit doit être associé à une ou plusieurs catégories pour que l'internaute puisse la retrouver à travers votre catalogue (navigation au clic, pour la différencier de la navigation par recherche, nommée également navigation au clavier...). Vous pouvez l'associer à plusieurs catégories sans problème, à condition de ne pas avoir trop de ressemblance entre un niveau de catégorie et un autre. Si vous avez une catégorie TV comportant 50 produits, et une sous-catégorie LED comportant 49 produits, vous avez en gros 2 pages (la page TV et la page LED) trop ressemblantes, risquant de créer alors du duplicate content pour Google... Pour la catégorie principale, c'est la catégorie qui sera selectionnée dans le fil d'ariane du site (la structure de navigation d'un site, comme par exemple SHOP / FEMME / BLOUSONS / Blouson en cuir avec perles. En règle général, on sélectionne la catégorie la plus profonde, afin de faciliter la navigation et la compréhension de l'internaute. Pour le référencement, il permettra d'afficher une URL de produit (la ligne verte dans un résultat de recherche) avec la catégorie la plus précise (idéal pour faire du SEO long traine) ! L'onglet Quantités J. Les messages personnalisés des quantitésSi vous avez du stock, ou si vous êtes en rupture de stock (avec précommandes autorisées) - pour un lancement de produit avant de recevoir votre stock par exemple - vous allez pouvoir personnaliser l'un des 2 champs pour y placer un peu de SEO : placez-y des mots-clefs ou des recherches possibles, tout en restant compréhensible évidemment, comme par exemple "précommande Star Wars Episode 83" qui pourrait être une recherche possible dans Google. L'onglet Référencement - SEO K. La balise titre (title)C'est ce que Google affiche en bleu (pour un lien non visité) ou en violet (pour un lien déjà visité). Vous le retrouvez aussi dans l'onglet de notre navigateur ou dans la barre des applications sur Windows. Ce titre est important. Limité à 70 caractères, en tentant d'être au plus proche des 70 caractères (autant prendre le plus de place possible), la balise titre (ou title si on parle du nom de la balise) sert d'argument commercial pour insiter l'internaute à cliquer sur votre lien, dans le sens ou il n'a aujourd'hui plus d'impact dans son positionnement en y plaçant un mot clef spécifique. Aucun intérêt direct (mais indirect par il donnera envi à l'internaute de cliquer sur ce lien en particulier - ou pas). Cependant il doit obligatoirement être différent du titre H1 de la page, et être différent de toutes les autres balises title de votre site ! Ca serait trop simple sinon. Pas besoin de rapeller votre nom de société à chaque balise titre, ou l'adresse du site... L. La meta descriptionC'est le bloc de 2 à 4 lignes grises en dessous du titre de la page dans Google. Officiellement défini à 160 caractères, Google viens d'annoncer fin 2017 le passage à 320 caractères, soit le double ! On passe alors de 2 à 4 lignes de textes. Ici pareil, ce n'est qu'un argumentaire commercial pour donner l'envi à l'internaute, rien de plus. Le seul intérêt encore utile à l'heure actuelle, c'est la mise en gras du mot recherché s'il apparait dans la description. M. L'URL simplifiéePar défaut, Prestashop 1.7 (mais aussi les versions précédentes) utilise le nom du produit que vous lui avez donné en le mettant tout en minuscule, sans accent, et en remplaçant les espaces par des tirets (tiret du 6 pour les intîmes). Le plus souvent, cela vous donne une url pas très sexy et un peu complexe. Par exemple, un produit "Robe d'été légère rose à rayures" donnera comme url "robe-d-ete-legere-rose-a-rayure"(.html), on peut facilement la diminuer et la rendre plus facile, ce qui donnera "robe-ete-legere-rose-rayure"(.html). Retenez qu'une url doit être le plus simple possible et parlante (on sait directement sur quoi je tombe si on me donne ce lien par mail par exemple) ! N. Les pages de redirectionLes produits qui ne seront plus disponibles à la vente doivent être retirées de votre catalogue (mais attendez un peu si la page est bien référencée et apporte un trafic conséquent)... En désactivant le produit, la page devient alors inaccessible, provoquant une erreur 404 et affichant une page du style "la page recherchée n'est pas ou plus disponible"... Pas terrible pour les utilisateurs, et encore moins par Google qui supprimera très vite cette URL de ses résultats. Evitez absolument d'avoir des erreurs 404 sur un site. Mais cette page était associée à d'autres pages à travers des liens hypertext. Du coup vos internautes vont, en cliquant sur un lien, provoquer une erreur 404 et être géné dans leurs parcours d'achat et risque d'entacher votre réputation et le crédit confiance acquis chez le visiteur... Vous pouvez rediriger l'internaute vers un produit ou une catégorie (nouveauté de prestashop 1.7 par rapport à ses anciennes versions) s'il clique sur un lien allant vers un produit plus disponible. Dans la logique : un produit a été desactivé mais risque de revenir un jour : on redirige temporairement le visiteur (code 302), ou on est sur que le produit ne risque pas d'être à nouveau disponible sur le site, alors on passe en redirection 301 : redirection permanente. En terme de SEO, une redirection temporaire permet de garder en mémoire le potentiel de référencement (sa notoriété sur Google si vous préférez) puisque la page va revenir, et permet de passer un peu de cette notoriété à la page de destination (la redirection quoi). Cependant elle a tendance à s'estomper avec le temps pour être ignoré au final. Mais même dans le cas d'un arrêt définitif, passez d'abord en redirection temporaire 302 quelques semaines avant de passer en redirection permanente 301 afin de booster sensiblement la page de destination... L'onglet Options 0. Les mots-clefsAlors là grosse méfiance ! Sur tous les CMS du marché, les mots clefs concernent la balise meta keywords, qui n'est plus pris en compte depuis 2012 environ, et qui pénalise votre site si vous l'utilisez encore après toutes ces années... Mais là dans prestashop 1.7 c'est précisé qu'ils servent pour aider les internautes à l'aide de la fonction recherche du site (la barre de recherche de votre site). Cependant, on remarque que beaucoup de développeurs de thèmes graphiques pour prestashop 1.7 utilise ce champs là pour la balise keywords de la page (je vous recommande de lire mon article sur comment choisir un thème wordpress, facilement adaptable au choix d'un thème sur Prestashop). Si c'est le cas, vous êtes pénalisé par Google. Il faudra alors modifier le code du thème pour ne plus afficher la balise keywords. Sinon, on retrouve aussi ce champ "mots-clefs" pour un nuage de tag, permettant de rendre cliquable chaque mot pour afficher tous les produits disposants du même mot-clef. Cette technique, même si elle est pratique pour l'internaute, crée souvent du duplicate content avec vos catégories de produits, ou génère tout un tas de pages pauvres en contenu, ce qui n'aidera pas le SEO et la qualité de votre site... Donc je le redis : méfiance !!!   Voilà, maintenant vous savez comment bien penser votre produit tout au long du remplissage de votre fiche produit sur Prestashop 1.7. Mes conseils fonctionnent tout à fait sur les versions précédentes (prestashop 1.6 sûr... Je n'ai pas de prestashop 1.5 sous la main pour confirmer mes dires). N'hésitez pas à me laisser un commentaire si vous n'avez pas saisi un point particulier ou si vous avez une question autour du SEO et de PRestashop 1.7. A vous de jouer ;)... Wed, 31 Jan 2018 16:46:49 GMT Jacques Danilo http://www.pixelcrea.com/blog/marketing-mobile-2018/ http://www.pixelcrea.com/blog/marketing-mobile-2018/ Le marketing mobile prend de plus en plus de place dans nos stratégies, et pour cause, l’année 2017 a été une année charnière entre les utilisateurs Desktop (depuis un ordinateur) face aux utilisateurs mobiles (smartphones et tablettes confondus) : aujourd’hui plus d’internautes utilisent un terminal mobile qu’un ordinateur pour surfer sur Internet (mais également pour échanger à travers les réseaux sociaux, acheter via des sites et applications en ligne, ou simplement rechercher une information. Alors pour 2018, il va falloir intégrer le mobile dans nos stratégies, sous risque de se couper de plus de 50% de notre cible. Filmora nous a concocté une magnifique infographie au sujet des statistiques du marketing mobile, des tendances mobiles et des conseils à suivre pour 2018 : infographie en anglais que nous allons décrypter ensemble, point par point ! Le nombre d’utilisateurs de smartphones augmentent tous les ans Les utilisateurs de smartphones sont nombreux, de plus en plus nombreux, par l’obsolescence programmée, les offres de plus intéressantes et cette démocratisation d’un téléphone multifonctions (et pas que pour téléphoner ou envoyer des messages). La proportion mondiale était d’environ 56% en 2013 pour tendre vers les 67% en 2019. L’information est alors plus accessible, plus facilement et plus rapidement ! En 2018, on estime qu’environ 66% de la population mondiale sera propriétaire d’un smartphone. La proportion navigation via un ordinateur ou un smartphone s’inverse Les prévisions, comme expliquées en introduction, indiquent que 57% des visiteurs naviguent à travers une plateforme mobile (smartphones et tablettes), et 43% uniquement depuis un ordinateur (PC ou MAC d’ailleurs). Cette tendance est avérée par Google qui en 2017 a changé son algorithme pour être en « Mobile-First », favorisant les sites bien présenté en version mobile (ce que l’on appelle aussi le responsive design) Le temps passé sur les différentes plateformes L’infographie compare aussi le temps passé sur les plateformes les unes par rapport aux autres : la tendance pour 2018 annonce 43% sur les smartphones, 18% pour les tablettes (soit 61% si on réunit smartphones et tablettes), et pour finir 39% sur ordinateurs. Les tablettes sont en chute libre depuis quelques années en terme de vente et d’utilisation : nos smartphones proposants le même fonctionnement, avec des écrans de plus en plus précis ou grands. L’ordinateur personnel se perd aussi de plus en plus, le tout par les forfaits offrants de plus en plus de Giga-octets et donc favorisant le smartphone. Les utilisations de smartphones par tranches d’âges  Voici un récapitulatif du temps passé par jour sur un mobile. La première tranche présente les 16-24 ans qui passent en moyenne 3h26 sur leurs écrans… par jour ! oui oui, par jour !! Puis, plus on augmente dans les tranches d’âges, plus ce temps passé diminue. D’abord parce que les autres générations ont appris à vivre sans (puisque pas de smartphones avant les années 2000), et aussi parce que plus on avance dans l’âge plus on fait des choix de vie, et rester connecté devant un écran est du temps perdu avec ces amis, sa famille, etc… Le mobile et l’engagement en 2018 Les conversions sur mobiles sont 64% plus importantes que sur ordinateur. Lorsque l’on parle de conversions, on parle d’un objectif réussi en marketing. Pour vous donner quelques exemples on pourrait : diriger un internaute vers un site web à travers une publicité (web, réseaux sociaux, moteurs de recherche, …), faire vendre à travers un encart publicitaire sur un site (mise en avant) ou sur une plateforme de vente (Google Shopping, publicité Amazon), acquérir du trafic à travers une newsletter, obtenir une inscription à une newsletter, obtenir du prospect à travers un formulaire de contact, … Le mobile converti presque 2 fois mieux en terme de ventes (e-commerce) que la vente sur ordinateur ! Coté Facebook (pour ne parler que du géant incontournable des réseaux sociaux), 88% des revenus publicitaires proviennent des publicités mobiles. Presque 9 accès sur 10 derrière une publicité proviennent d’un mobile. De quoi donner des axes d’améliorations à nos campagnes Facebook mais aussi à l’aspect esthétique de notre site sur mobile ! Des conseils en marketing mobile pour 2018 L’infographie se termine par une série de 7 conseils autour du marketing sur mobiles (smartphones et tablettes). Dans l’ordre : 1. Les vidéos préparée pour le mobile. Si vous avez à communiquer à travers des publicités vidéos, optimisez-les pour les smartphones (et tablettes) dans le format, le choix des images, la qualité, l’orientation (le format portrait fonctionne très bien sur mobile), éventuellement le sous-titrage (beaucoup de réseaux sociaux diffusent la publicité sans le son, activation par clic ou pointage sur la vidéo…) 2. Avoir un site adapté pour les mobiles devient impératif. Google nous avait averti depuis presque 2 ans pour la partie SEO, mais également pour l’usage que font les internautes avec l’utilisation mobile qui dépasse largement l’utilisation ordinateur, votre doit doit absolument être confortable pour l’utilisateur provenant d’un smartphone ou d’une tablette : affichage adapté, navigation simple pour le tactile, boutons ou liens suffisamment gros et espacés les uns des autres, contraste élevé, … Tous ces critères vous aideront à améliorer l’expérience utilisateur sur votre site coté mobile ! 3. Investissez du temps pour des stratégies sociales. Aussi bien sur Facebook, Twitter, LinkedIn que sur les autres plateformes, il est devenu indispensable en 2018 d’être présent, visible et actif en permanence afin d’attraper le prospect au bon moment avec le bon format. 4. Optez pour la réalité augmentée, et la réalité virtuelle. Avec des dernières tendances techniques en terme de marketing, développez des outils de réalité augmentée pour placer un meuble virtuel dans votre salon pour voir son intégration dans votre décoration d’intérieur, ou mesurez facilement les dimensions d’une pièce, … C’est la tendance de ces dernières années en terme de recherche et développement dans les grandes sociétés. 5. Utilisez des publicités vidéos natives pour mobiles. Comme pour la navigation et l’expérience utilisateur, pensez d’abord mobile avant de penser publicité : quel format fonctionne le mieux ? Quelle durée ? Quel message ? Pour qui ? Pourquoi ? etc… Toutes ces questions vous orienteront vers un format adapté et pensé pour les utilisateurs mobiles. 6. Le paiement facilité sur mobile. Proposez une solution de paiement adapté aux mobiles avec des services comme AmazonPay, ApplePay, Google Wallet ou d’autres systèmes tout aussi performants. Le paiement traditionnel en 5 étapes fonctionne de moins en moins, et les modes de paiement proposés par les banques françaises à l’heure actuelle ne sont pas pertinentes sur mobiles. 7. Utilisez les QR Codes pour faciliter l’utilisation sur mobiles. Les QR Codes (images carrés avec des carrés bancs ou noirs), qui ressemblent à des codes-barres, peuvent être utilisés sur un site web pour orienter l’internaute sur une page spécifique, aimer votre page Facebook, obtenir des informations complémentaires sur un produit, amener l’internaute vers le formulaire de contact, offrir un coupon de réduction, etc…  Filmora nous propose également les sources qui ont servis à l’élaboration de cette très belle infographie, même si quelques coquilles sont encore présentes aujourd’hui dessus. Cela n’empêche absolument pas d’apprécier le travail fourni et de comprendre l’ampleur des tendances mobiles à suivre en 2018. En espérant que ce descriptif des différents points vous auront servis ! A vous de jouer les marketeurs mobiles :)... Fri, 26 Jan 2018 15:44:56 GMT Jacques Danilo http://www.pixelcrea.com/blog/calendrier-ecommerce-2018/ http://www.pixelcrea.com/blog/calendrier-ecommerce-2018/ Comme l'an dernier avec le calendrier des animations e-commerce 2017, voici le calendrier 2018 avec les dates mises à jour ! Une infographie à imprimer de toute urgence pour plannifier au mieux vos actions commerciales. Ce calendrier, evidemment gratuit et enregistrable (clic droit > enregistrer sous) vous permettra de gérer au mieux votre animation commerciale et e-commerce pour l'année 2018 qui arrive ! Bon téléchargement et n'hésitez pas à partager ! ... Thu, 30 Nov 2017 15:43:33 GMT Jacques Danilo http://www.pixelcrea.com/blog/backlinks-2018/ http://www.pixelcrea.com/blog/backlinks-2018/ Le référencement naturel (optimisation SEO) va de pair avec l’obtention de backlinks. Il s’agit de liens pointant vers une page de notre site Internet. C’est ce que l’on appelle aussi le netlinking, cette phase importante et obligatoire pour asseoir sa notoriété sur Internet. C’est à l’heure actuelle un des critères les plus importants dans le référencement naturel de Google. Pour introduction, plus vous aurez de liens vers votre site, plus vous serez populaire sur Internet, et Google se base sur ce critère pour vous positionner dans ses résultats de recherche. Par rapport aux anciennes versions de l’algorithme de classement des résultats, Google distingue aujourd’hui le domaine référent et le nombre de liens. C’est à dire que Google aujourd’hui ne retiens que le nombre de domaines qui pointent vers vous, avant de prendre en compte le nombre de liens au total. C’est d’ailleurs ce qui a induit il y a quelques années un positionnement assez volatile pour l’ensemble des agences de communications et indépendants qui signaient en bas de tous leurs sites internet « création par un graphiste freelance » en faisant un lien vers la page d’accueil. Par cette action, on générait un nombre incalculable de liens pointant vers notre domaine mais avec au final peu de domaines. Dans mon cas, pour illustrer mes dires, j’avais fait un site marchand pour un client qui avait environ 3500 produits. Du coup, en laissant un lien en bas de page j’avais environ 4000 liens pointant vers la page d’accueil de mon site, mais 1 seul domaine référent ! Et Google retient avant tout le nombre de domaines référents… Autant vous dire qu’au moment du changement d’algorithme, notre position à tous devenait volatil, très volatil (certains concurrents à moi ont perdus jusqu’à 3 pages dans leur positionnement, d’autres sont remontés sur la première page pendant quelques jours pour se retrouver au final sur une 5ème ou 6ème page sans trop comprendre pourquoi… La chose à retenir : un lien par domaine, c’est plus simple comme ça ! Il existe plusieurs techniques ou manières d’obtenir des liens retours (ces fameux backlinks), je vais essayer de vous expliquer les différentes techniques avec les avantages et inconvénients, la stratégie à mettre en place ou des petits tips au fur et à mesure. 1. L’échange de liens La façon la plus simple à mettre en place : vous contactez un site internet pour leur demander de réaliser un échange de liens, un partenariat finalement ! L’inconvénient c’est que Google le voit très bien et considère ce lien comme n’étant pas un lien de qualité, puisqu’il y a eu un arrangement (même financier parfois). Le risque aussi c’est que votre partenaire supprime son lien, ce qui produira non plus un échange de liens mais un lien sortant de votre site uniquement. Bref, peu valorisant et potentiellement risqué si tout le monde ne joue pas le jeu 2. L’échange de liens, mais entre 3 sites ou plus. Pour essayer de feinter Google sur l’échange de liens, il est possible de travailler à 3 domaines : le site A fait un lien vers B, B vers C, et C vers A. De cette manière, tout le monde dispose d’un lien entrant et d’un lien sortant, et Google considère que ces liens sont de meilleure qualité qu’un échange de lien classique. Cependant nous ne savons pas si demain Google pénalisera cette technique, ou considèrera que cette pratique est identique à un échange de lien classique ! 3. La création de mini-sites Une autre technique pour obtenir des liens de qualité peut se faire à travers la création de mini sites parlant du même sujet et créant du lien vers votre site. L’inconvénient principal est le temps passé pour gagner 1 lien, et l’autre difficulté est que ce site, s’il ne possède pas de backlinks à son tour, n’aura aucune notoriété pour Google, donc le lien créé n’offrira pas énormément de valeur ajoutée à votre référencement 4. la rédaction d’articles sur des plateformes de blogs Vous pouvez demander à un bloggeur de recevoir un article traitant d’un sujet proche de votre domaine d’activité, en réalisant dans l’article un lien vers votre domaine. Cela produit un contenu pour le blog en question, qui peut faire plaisir au bloggeur qui a moins de travail à produire, mais crée également un lien vers vous. La difficulté est de trouver un bloggeur qui accepte que vous rédigiez un article sur son blog. Privilégiez les blogs assez petits, avec une fréquence de parutions d’article assez faible, pour avoir plus de chances d’obtenir le droit de publier un article. 5. La rédaction d’articles rémunérés C’est la mode de ces dernières années : financer un bloggeur pour la rédaction d’un article de fond sur un sujet proche de vous et d’y placer un ou plusieurs liens vers votre domaine (peu importe la page d’arrivée). Cela représente un coût entre 200 et 400 euros par article, en fonction du trafic généré sur le blog et de la notoriété du domaine / du blog. 6. L’inscription à des annuaires Le plus souvent l’inscription est gratuite et vous demande de remplir votre fiche vous-même. Attention au duplicate content : rédigez vous-même votre contenu en évitant le copier-coller du contenu de votre site, sinon Google déclassera la page comme étant du duplicate content et ne donnera aucun poids (aucune qualité ou notoriété si vous voulez) au lien créé ! De plus, un annuaire est souvent très généraliste, trop même, qui produira un lien souvent très faible en terme de qualité de liens. Si l’annuaire en question vous demande un lien retour, ne vous inscrivez pas, c’est ni plus ni moins qu’un échange de liens. Un annuaire spécialisé en e-commerce français : https://www.sites-marchands.fr/ 7. Les réseaux sociaux Vos profils, pages, groupes, évènements, (etc.) sont des pages web référencées par Google (pas forcément les publications ou tweets). Cela vous permet de créer facilement des liens de votre compte à votre site. Le lien est de qualité moyenne (le lien est faible en soit mais le domaine référent est intéressant : Avoir un lien de Facebook par exemple est plutôt apprécié de Google). De plus toute inscription à un réseau social est gratuite et rapide. En quelques minutes votre lien est visible et cliquable ! En moins d’une demi-journée, vous pourrez avoir autant de backlinks que de réseaux sociaux : facebook (profil + page + groupe public par exemple), twitter, Google +, Youtube, Pinterest, Instagram, LinkedIn, … Ca va très vite !  8. Les forums Une technique plutôt bonne consiste à vous inscrire sur un forum et de participer aux discussions engagées. A chaque message laissé une signature (comme une signature de mail) est laissée, que vous aurez préalablement modifié pour y placer le lien vers votre site ! Idem sur des sujets à forte demande (beaucoup de commentaires et réponses) vous pourrez créer un article de blog par exemple pour renvoyer les visiteurs du forum à se renseigner sur un sujet à travers un article de chez vous (avec une génération de trafic par la même occasion) 9. Annoncez vos offres/produits aux influenceurs de votre domaine d’activité Faites le travail d’un chargé de communication en allant inonder les principaux acteurs de votre secteur d’une information importante autour de votre activité (rachat, emploi, stage, modification de votre offre, nouveau produit exclusif, …). Présentez-vous aux bloggeurs en parlant de votre grande nouveauté. Avec un peu de chance, ce bloggeur vous fera un article dans les prochaines semaines si vous lui apportez suffisamment de matière ! 10. Transformez les bloggeurs en testeurs En plus d’informer les bloggeurs de votre nouveau produit miracle, pourquoi pas ne pas lui envoyer un produit directement ? Bien moins cher que de payer un article rédigé, offrir un produit contre un article vous arrangera vous comme le bloggeur, afin de profiter également de sa notoriété s’il est convaincu par votre produit. Mais cependant, même une critique négative peut être utile ! 11. Les commentaires de blogs Très facile à mettre en place, il vous suffira de répondre à des articles de blog pour générer du lien. Le plus souvent on vous demandera un nom, une adresse mail, l’adresse d’un site et votre commentaire. Mais attention de ne pas paraître trop mécanique : votre nom ne doit pas être commercial sur un blog (comme « paysagiste Paris 12ème » par exemple) au risque de voir votre commentaire supprimé avant publication de la part du modérateur du blog. De plus, votre commentaire doit être constructif. Comme cette technique a été trop souvent utilisée pour avoir du lien, beaucoup de bloggeurs ont mis leurs liens des commentaires en no-follow (instruction pour dire à Google de ne pas prendre en compte ce lien) 12. Utilisez votre réseau réel Autour de vous, dans vos amis, votre famille, vos activités sportives ou culturelles, votre réseau doit être sollicité pour obtenir des liens. Essayez d’abord de demander un lien, en expliquant que c’est super important pour vous, et s’il en fait la demande, proposez un échange lien au pire des cas. Mais le but ici est d’avoir qu’un lien entrant sans retour de votre part !  13. Proposez du contenu intéressant C’est la manière la plus performante sur du long terme : proposer un contenu riche, frais et unique, sous un angle différent ou quelque chose qui donnera un attrait pour les bloggeurs (un sondage, un jeu concours, …). Si votre contenu est intéressant (sous réserve que vous communiquez aussi dessus évidemment pour vous faire connaître auprès de la blogosphère), les bloggeurs consulteront votre blog et en feront référence lors de leurs articles. Cela prend du temps, plusieurs années en général, afin d’être un nom important et influant dans votre domaine… Mais ces liens vraiment naturels porteront leurs fruits ! 14. Achetez des noms de domaines expirés En étant vigilant, vous pourrez trouver des sites web abandonnés qui pourront être rachetés pour une bouchée de pain. Avec cette technique vous bénéficierez d’un domaine déjà référencé, avec une notoriété acquise (plus ou moins bonne) sur lequel vous pourrez mettre un lien vers votre site. Pas très cher, peu de temps à passer pour des retours assez intéressants ! 15. Faites-vous interviewer Autre solution pour obtenir un backlink est de chercher à se faire interviewer dans les bloggeurs/youtubeurs influents dans votre domaine. Contactez-les en leur proposant une interview, avec vos disponibilités et les thèmes que vous aimeriez abordés pendant l’interview. Grâce à cette technique, vous allez gagner en notoriété en plus de gagner un lien vers votre site 16. Créez un réseau de bloggeurs pour une sollicitation par mail Une technique qui a fait ses preuves : produire un contenu de qualité sur votre site/blog et d’en informer votre réseau de bloggeur par mail en proposant cet article de référence en espérant qu’ils traitent le sujet en vous réalisant un lien retour dans leur article de blog...   Je vous conseille de travailler tous ces points du mieux possible. C’est un levier important aujourd’hui où la notoriété d’un domaine (son autorité) a un tel impact ! C’est également un travail de fond, qu’il est important de mettre en œuvre tout au long de votre activité, et non qu’au lancement ! Normalement vous avez de quoi produire une action en netlinking de qualité. Si vous souhaitez le faire faire, n’hésitez pas à me contacter pour une demande de devis !... Tue, 28 Nov 2017 15:17:10 GMT Jacques Danilo http://www.pixelcrea.com/blog/seo-images/ http://www.pixelcrea.com/blog/seo-images/ Les images ont une place importante dans la stratégie SEO de votre entreprise : elles permettent de gagner en visibilité grâce à Google Images et de gagner en trafic sur votre site Internet. Mais vos images sont-elles bien optimisées pour le référencement ? Une image est considérée par Google comme étant du contenu référençable avec un lot d’optimisations à apporter pour permettre une meilleure prise en compte et un meilleur positionnement sur Google. Il se base sur 4 critères : - son nom, c’est à dire le nom du fichier stocké sur le serveur (par exemple biscuit.jpg)- sa résolution et sa qualité- son texte alternatif, c’est à dire le texte s’affichant lorsque votre souris reste sur l’image (ex : Biscuits aux pépites de chocolat)- son contexte : l’ensemble de la page qui accueille votre image. Le nom du fichier Votre image doit comporter des mots-clefs identifiant à elle seule l’image et permettant de comprendre sans l’ouvrir de quoi parlera l’image. Ce nom doit être précis sans être à rallonge, au risque d’être considéré comme sur-optimisé aux yeux de Google. Evitez donc des images du type biscuit-chocolat-pepite-pur-beurre-bretagne-fabrication.jpg Le format de l’image joue aussi un rôle important. Les formats supportés aujourd’hui sont le JPG (ou JPEG ou JPEG2000), le PNG, le GIF, et dernièrement le SVG (image vectoriel dédiée aux icones et aux logos principalement) mais qui est aujourd’hui pris en charge sur Google Image. En dehors de ces formats-là, n’espérez pas avoir un bon référencement sur Google Images. Préférez les images au format JPG qui sont aujourd’hui le standard pour les images, le PNG étant surtout dédié aux images d’interface nécessitant de la transparence (un logo par exemple) et le GIF est plutôt utilisé pour des éléments graphiques avec transparence et/ou avec de l’animation. Le format et la qualité des images La résolution peut jouer un rôle important, en effet Google préfèrera afficher de belles images en grand format qu’une image microscopique (à qualité équivalente). Les filtres affineront également cette logique en affichant que les grandes images par exemple. Si vous utilisez des images génériques (une photo d’un produit par exemple), optez pour la plus grande résolution par rapport à la concurrence) et changez le format ou le contenu de l’image (en y plaçant votre logo ou en évitant d’être sur le même format que les concurrents) – même s’il n’y a pas de notion de duplicate content pour les images, Google cherchera à nettoyer Google Images en affichant qu’une seule image du même format/type et le plus souvent il prendra la meilleure résolution possible. Attention cependant car plus votre image sera grande, plus elle sera lente à se charger sur vos pages. Trouvez le bon compromis entre la taille (la résolution et la qualité de votre image) et son poids ! Le texte alternatif : la propriété ALT de votre image Une image doit disposer d’un texte alternatif, aussi bien sur le plan de l’accessibilité du site que les cas où l’image en question n’est pas disponible. Ce texte s’affichera aussi en attendant le chargement complet de l’image dans le cadre d’une connexion internet trop lente et sert également lorsque vous envoyez des images par mail : aujourd’hui les lecteurs de mails proposent de charger les images après une action de votre part. Votre texte alternatif doit décrire votre image le plus précisément possible en une phrase courte. Il n’y a pas de limites en nombre de caractères pour cette description de l’image mais il ne faut pas faire un simple listing de mots-clefs. Le risque étant d’être en sur-optimisation pour Google. Une simple phrase décrivant l’image (avec des mots-clefs évidemment) suffira. Le contexte de l’image Le facteur le plus important pour le référencement de vos images : le contexte dans lequel est appelé votre image. L’image par définition doit servir à illustrer votre texte, et donc doit être le plus proche possible du champ lexical utilisé dans votre page. Si vous parlez de vêtements dans votre page et qu’une image présente un biscuit, aucun intérêt (ni pour l’internaute, ni pour Google) ! Google verra qu’il n’y a aucune corrélation entre votre image et son contexte. Le contexte est le contenu texte autour de votre image (pas forcément l’ensemble de la page) et si votre contenu présente plusieurs idées (ce qui n’est pas une bonne stratégie SEO), l’image doit être en lien avec le contenu proche de l’image. Si vous respectez ces 4 critères, votre image aura plus de chance d’être positionné dans les premiers résultats de Google Images. N’oubliez pas que le contenu texte sert au référencement des images, mais que les images servent également au référencement de votre page. C’est un levier important !   Pour illustrer mes dires, prenons l’exemple de l’image principale de mon article : - Le fichier image se nomme seo-images.jpg - Sa résolution est de 750 par 450 pixels, ce qui est une taille moyenne, voir plutôt grande, par rapport à ce que l’on peut trouver sur le web aujourd’hui (elle n’est pas non plus gigantesque hein !) - Son texte alternatif est : SEO : Comment référencer vos images avec Google - Son contexte : bah, je parle SEO, Référencement des images… Normalement avec ça on devrait être pas mal ! L’intérêt des images pour agrémenter votre contenu vous servira sur Google Images mais permettra d’être plus facilement visible au travers des différents réseaux sociaux dédiés aux images : Pinterest, Instagram, mais également les réseaux sociaux à forte influence comme Facebook. Bref, soignez vos images, Google vous le rendra :)   Optimisez le SEO de vos images avec Wordpress Si vous utilisez le CMS le plus populaire de tous les temps, j'ai nommé Wordpress, vous pouvez optimisez facilement vos images : lorsque vous chargez de nouvelles images dans Médias, Wordpress prendra le nom du fichier que vous lui avez donné, faites donc attention au nom de votre fichier image sur votre ordinateur. Il s'agit d'un nom informatique, donc doit être en minuscule, sans accents, et en remplassant les espaces par des tirets (-). Préférez les tirets - aux underscores (_ : le tiret du bas). Une fois votre image chargée vous avez sur le coté 4 champs : titre, légende, texte alternatif et description. Sur cette image, le texte alternatif et le titre sont répétés, car le texte alternatif sert pour Internet Explorer, alors que le titre servira pour les autres navigateurs pour permettre l'affichage du tooltips (cette barre orange/jaune lorsque votre souris reste statique au dessus de l'image). La description et la légende se servent pas pour le référencement, ils permettent un affichage type dictionnaire avec la légende écrite en dessous de l'image. Lorsque vous modifiez une image, vous retrouvez ces informations dans une présentation différente : la légende, le texte alternatif, ... Pensez à ouvrir les options avancées pour avoir accès à l'attribut Title de l'image ! Optimisez vos images sous Prestashop 1.7 Les images sont gérées différemment avec Prestashop 1.7, puisque le nom du fichier image sera automatiquement le titre de votre produit (passé en minuscule, sans accent et avec des tirets "-" remplassants les espaces) - il n'y a donc pas trop de réglages de ce coté là. Idem avec la résolution, puisque Prestashop retaille et recadre automatiquement vos images en fonction des tailles définis par votre thème (visible et modifiable dans Personnaliser > Apparence > Images). Cependant vous avez quand même la main sur son texte alternatif (que Prestashop appele la légende de l'image) et sur son contexte puisque vous avez la main sur 2 zones de textes, à savoir le résumé à coté de l'image et la description longue en dessous. Vous avez donc la main sur 2 paramètres sur 4, mais ce n'est pas forcément un problème, puisque sur les 2 paramètres automatiques, le nom du fichier est supposé être optimisé puisqu'il reprend le titre de votre produit (et je pars du principe que l'image est liée au titre du produit - cela semble logique après tout) - et la résolution est en général assez bonne. Sur le thème par défaut (le thème "classic" proposé par Prestashop), la résolution d'une image affichée en grand est de 452 pixels de coté (hauteur et largeur de l'image). Au final, l'automatisation gérée par Prestashop 1.7 pour l'optimisation des images n'est absolument pas déconnente pour le référencement, mais ne vous laissez pas avoir par cette automatisation : pensez à personnaliser chaque légende de chaque image et de travailler votre contenu ! Les images et le SEO avec Prestashop 1.6 et les autres versions antérieures Avec les versions de Prestashop en 1.6 et antérieurs, les images sont gérées automatiquement pour leur nom de fichier, en reprenant le titre de votre produit en minuscule, sans accent, et en remplaçant les espaces par des tirets. Toutes les images d'un même produit aura donc le même nom de fichier (Prestashop fera la différence à travers un dossier virtuel précédent le nom du fichier afin de s'y retrouver). Idem avec la résolution où la configuration de la taille des images de votre thème prendra le dessous. Aucun moyen de personnaliser la résolution d'une image (ainsi que sa compression et qualité) puisqu'il s'agit d'un traitement automatique de Prestashop 1.6. Pour information les dimensions d'une image en grand à travers le thème par défaut de Prestashop 1.6 (Default-Bootstrap) est de 800 pixels de coté. Vous allez donc avoir la main sur la légende et le contexte de l'image. Par défaut Prestashop nous propose de mettre à jour toutes les légendes d'un coup (il s'agit bien du ALT de l'image, et non de sa légende - pour être précis) - il faut travailler chaque légende indépendemment les unes des autres, pour avoir la meilleure prise en compte de la part de Google Images. Si vos légendes sont inexistantes ou identiques d'une image à une autre (sur la même fiche produit), Google prendra l'image principale (ou appelée image de couverture) avant de prendre les autres images dans son positionnement sur Google Images, au risque de ne pas voir les autres images sur Google Images.... Tue, 07 Nov 2017 12:25:37 GMT Jacques Danilo http://www.pixelcrea.com/blog/tydressing-mapubici/ http://www.pixelcrea.com/blog/tydressing-mapubici/ Une de mes clientes, Anne-Christine, gérante de la société Ty Dressing que j’accompagne depuis le début de son aventure, vient d’être sélectionnée par la BNP Paribas lors de la quatrième édition de son concours #MAPUBICI ouvert à toutes les start-ups françaises. Je l’accompagne donc à Paris lors d'une journée de présentation aux différentes campagnes publicitaires gagnés par les lauréats mais également pendant une journée de shooting photo et reportage vidéo pour l’affichage en agence pendant tout le mois de novembre 2017. La sélection des lauréats Avant l’été, la BNP PARIBAS a proposé à travers les réseaux sociaux et les agences physiques de la banque un concours ouvert à toutes les entreprises pour tenter de gagner un accompagnement publicitaire financé et piloté par la BNP PARIBAS. Plus de 1200 dossiers de participations au concours ont étés enregistrés avant la période estivale, et après délibération, chaque région sélectionnait 2 projets/startups pour arriver à 14 lauréats, dont Ty Dressing, la société crée par Anne-Christine spécialisée en vente de vêtements de seconde main pour bébés et enfants jusqu’à 16 ans mais orientée vers les produits de marque. Ty Dressing, dans les 14 lauréats de MA PUB ICI Ty Dressing est une boutique en ligne (la seule boutique représentée parmi les 14 lauréats du concours) dédié à la vente de vêtements de marque pour enfants de 0 à 16 ans, avec une très belle sélection de vêtements de qualité. Travailleuse indépendante, Anne-Christine Thomas a lancé Ty Dressing en 2015 sur la région de Lorient, dans le Morbihan. J’ai eu la chance d’avoir toute la confiance d’Anne-Christine depuis l’idée jusqu’à aujourd’hui, avec un accompagnement stratégique dès le lancement de son activité. J’ai contribué à son succès à travers la réalisation de son logo, ses cartes de visites, sa communication traditionnelle et la création de sa boutique en ligne visible actuellement sur www.tydressing.fr. Elle propose des vêtements de marque jusqu’à 80% de remise sur le prix du neuf avec un gros travail de sélection des vêtements pour ne vous proposer que le meilleur du seconde-main. Etre lauréat de #mapubici ? Pour avoir été sélectionné, Ty Dressing disposera alors sur tout le mois de novembre d’une visibilité locale (dans la région Grand-Ouest) au sein des agences à travers différents slides sur écrans géants, d’une couverture médiatique à travers plusieurs journaux et magazines spécialisés, et dispose d’un montant confortable de 15 000 euros à investir dans des publicités AdWords et Facebook Ads. Et pour choisir tout ça, elle a été invitée par la BNP à venir sur Paris sur 2 jours pour participer à une formation dédiée à la publicité en ligne sur la première journée, et d’une journée shooting pour la communication dans les agences de la banque. C’est donc avec un grand plaisir que je l’ai accompagné sur ces 2 journées sur Paris. Et voici le reportage photo :  Nous sommes accueilli dans le neuvième arrondissement de Paris pour une journée de formation sur les formats de publicités sur les réseaux sociaux et les stratégies Google AdWords dans les locaux de WAI (We Are Innovation) de BNP Paribas. La formation est animée par des experts en publicités sociales et campagnes Adwords de la société Havas Media, en charge d’accompagner la communication de la BNP PARIBAS (entre autre). Avec des formateurs de qualité, nous avons découvert toutes les fonctionnalités que l’agence mettra en place pour le compte de Ty Dressing. Une journée bien chargée : définition des formats possibles, exemples, mise en place de stratégies évolutives, orientation des publicités et pilotage d’une campagne de A à Z, tout un programme ! Quand Ty Dressing et PixelCréation sont sur les toits de Paris, on est obligé d'avoir le sourire non ? :) Le deuxième jour, direction le quatorzième arrondissement de Paris dans le studio photo InVisu pour un shooting photo de 2h avec habillage, maquillage et prise photo par une équipe au top ! Plus de 15 personnes en charge du shooting photo dans des conditions réelles avec un studio photo gigantesque (qu’est-ce que j’aimerai travailler dans ces conditions), un staff compétent, un encadrement des chargés du projet #MAPUBICI, … Sur cette journée j’accompagnai Anne-Christine pour la coacher durant cette journée pas si évidente : d’abord un shooting photo impressionnant, suivi d’un discours vidéo pour promouvoir son activité et l’avenir de Ty Dressing, en terminant par un interview de La Tribune sur l’activité de Ty Dressing et la présentation d’Anne-Christine Thomas. Dans ma mission de coach durant cette journée, mon rôle a été de mettre à l’aise Anne-Christine, de l’orienté vers une posture, un regard et une expression particulière (en lien avec l’équipe technique sur place par rapport à leurs idées), mais également pour répéter et travailler la partie vidéo où, en moins d’une minute, sans montage, il faut présenter l’avenir de l’entreprise : diction, posture, regard, orientation du discours, longueur et travail sur le temps (une minute, pas une seconde de plus…). Anne-Christine qui se la joue star d'un jour, c'est grâce à #MAPUBICI de la BNP PARIBAS !!! Nous nous étions donc retrouvé une heure avant le début de ce marathon pour travailler ensemble les idées à aborder, les thèmes à aborder, la stratégie du discours, le rythme et le regard. Au final, il ne faudra que 2 prises pour valider la vidéo. Comme quoi un travail en amont et une bonne préparation portent leurs fruits ! Et allez, j'ose le dire, l'équipe technique a été impressionnée de la qualité du discours d'Anne-Christine... Ils étaient presque déçus de ne pas pouvoir travailler plus lol... Puis, pour finir (et l’exercice le plus facile finalement) un interview de La Tribune par un jeu de questions/réponses, avec de la même manière un coaching pour Anne-Christine autour de l’attitude à avoir face caméra. Le bilan est alors très positif : le résultat du shooting, avant retouche, est superbe, le discours vidéo cartonne et est parfaitement clair, et l’interview vidéo pour le journal est propre. Anne-Christine m’a remercié plusieurs fois d’ailleurs, ce qui fait énormément plaisir ! Pour ma part, c’était une superbe expérience de pouvoir suivre et coacher Anne-Christine dans cette expérience médiatique. Merci à elle pour m’avoir fait confiance et pour avoir écouté mes recommandations et conseils ! A vous maintenant de scruter les publicités de Ty Dressing sur tout le mois de Novembre 2017. Nous allons attendre les retours sur cette belle opportunité à présent ! Et pour ceux qui n'ont pas encore été voir le site d'Anne-Christine Thomas, il faut aller ici : vente de vêtements de marque d'occasion pour enfants... Tue, 10 Oct 2017 14:28:18 GMT Jacques Danilo http://www.pixelcrea.com/blog/facebook-ecommerce/ http://www.pixelcrea.com/blog/facebook-ecommerce/ Depuis 2015, Facebook propose pour les professionnels une visibilité de leur boutique e-commerce directement sur le numéro 1 des réseaux sociaux. Plutôt dédié au BtoC (ventes aux particuliers) sur une tranche d'age allant principalement de 15 à 45 ans, une entreprise peut se positionner à l'aide d'une page pro (appelée également page fan). En 2015 nous avons découvert l'onglet boutique, permettant aux entreprises disposant d'une boutique en ligne une mise en avant des différents produits de leur catalogue. Malheureusement, l'offre gratuite posait des soucis de fonctionnement car les internautes étaient un peu frilleux à payer directement sur Facebook (ou sur les réseaux sociaux, d'ordre général). Facebook a donc changer son principe de fonctionnement permettant à l'entreprise de lister ces produits et de permettre le lien avec la boutique e-commerce directement. Plus transparente auprès des internautes et permettant un meilleur référencement du site par la même occasion (car ce fonctionnement permet de générer du trafic sur le site enregistré par Google), Facebook propose enfin une option intéressante pour les e-commercants. Décryptage ! Activer l'option "boutique" de votre page Facebook Sur votre page, allez sur l'onglet "Paramètres" puis dans "Modifier la page" (les points 1 et 2 de l'aperçu). Tout en bas de cette page vous trouverez les différents onglets présents pour votre page. D'ailleurs vous pouvez les ranger dans l'ordre qu'il vous plaira à l'aide des petites barres grises à gauche de chaque ligne. Pour voir apparaître l'onglet boutique cliquez sur "Ajouter un onglet" (le gros bouton tout en bas) et dans le cadre qui s'ouvre vous trouverez "boutique" (point 3) : Vous devriez avoir cet affichage là une fois les paramètres de l'onglet boutique ouverts : Chose intéressante, le lien de partage de la boutique "made in Facebook" pour pouvoir partager rapidement l'adresse de la boutique e-commerce de Facebook (sur Facebook comme ailleurs) ! Mis à part ce lien, rien de plus à cet endroit, il vous faut retourner sur votre page et de cliquer sur le nouvel onglet "boutique" (qui devrait se trouver tout en bas de votre menu, sauf si vous avez changé l'ordre dans paramètres > modifier la page > onglets... En arrivant pour la première fois sur cet onglet (en tant qu'administrateur de la page) il vous faudra accepter les conditions et règles du commerçant. Pour les plus sérieux qui chercheront à lire ces conditions, elles ne sont proposées qu'en anglais à l'heure ou j'écris cet article et, dans les grandes lignes, engage votre responsabilité sur vos produits, leurs provenances, leur cadre légal par rapport à Facebook et face à la législation du pays où se trouve votre entreprise, etc... Rien de bien particulier sur ce point. Nous passons ! Ensuite Facebbok nous propose 2 options : soit de générer des ventes à travers la messagerie de Facebook (pour discuter les prix et convenir d'un arrangement et définir les conditions d'envoi et de paiement entre le client et vous), soit de renvoyer le client potentiel vers votre boutique pour en effectuer l'achat (voir, idéalement, à acheter d'autres produits par la même occasion...) ! Ici c'est bien la 2ème option (la redirection vers notre boutique e-commerce) qui nous intéresse le plus. Note : Pourquoi prendre l'option "Payer sur un autre site" ?Tout d'abord, acheter par message va vite devenir compliquer : gérer toutes les discussions, avec des clients qui vont poser énormément de questions sans concrétiser l'acte d'achat, une négociation systématique (comme le réflexe "LeBonCoin" malheureusement). Vous l'autrez compris la messagerie va être très énergivore pour peu de résultats. Par contre payer sur un autre site est une très bonne option pour nous : Ils vont atterir sur notre boutique, effectuer l'achat (du moins on l'espère fortement) mais surtout ces internautes pourront effectuer d'autres ajouts au panier et ainsi augmenter le panier moyen, découvrir l'ensemble de votre offre produit (chose difficilement exploitable sur Facebook seul) et découvrir notre image de marque, notre actualité, notre blog même peut-être... De plus, ce visiteur nous offre un avantage en terme de SEO : ce visiteur, déjà conquis sur Facebook, offrira un taux de rebond très faible lors de sa visite et un temps de session important, ce qui ravira Google et boostera notre notoriété et votre crédibilité sur le moteur de recherche. Mais attention il n'y a pas que du bon non plus : si votre site n'est pas bien optimisé, il pourrait faire abandonner vos potentiels clients pendant l'acte d'achat. Pensez à vérifier que le passage de commande se passe bien sur smartphones, tablettes et ordinateurs, ... Définissez ensuite à l'étape suivante la monnaie utilisée (de l'euro pour notre cas) et terminez la phase de paramétrage général. Vous devriez alors arriver sur une page vide vous invitant à remplir vos premiers produits... Si jamais vous vous êtes trompés dans les réglages, la seule solution à ce jour est de supprimer la boutique en cliquant sur la petite roue crantée en haut à droite dans l'onglet boutique. Le remplissage des produits sur Facebook pour l'e-commerce Pour ajouter des produits, cliquez sur ajouter des produits et saisissez les informations demandées : - Photos ou vidéos du produit- Nom du produit- Son prix- Sa description- L'URL de paiement (adresse web de votre fiche produit, ou pour ceux qui ont un développeur sous la main, l'URL du panier pré-rempli)- Sa visibilité et son partage sur la page pro de votre entreprise Lorsque tout est renseigné, il faudra que Facebook traite ce produit (pour vérifier que tout est cohérent aux conditions et règles du commerçant notamment. Cette vérification dure quelques minutes en général et vous recevrez une notification une fois le(s) produit(s) validé(s).  Les collections Vous pouvez créer aussi des collections (qui sont des catégories de produits) pour affinier et aider les internautes dans leur navigation ! Ces collections peuvent être publics ou non publiées (si vous n'avez pas fini de remplir cette collection). Vous avez l'option de mettre en avant une collection (mais une seule) ce qui affichera la collection tout en haut de la boutique avec des images plus grandes L'affichage de votre boutique sur Facebook Une fois vos premiers produits ajoutés, vous les retrouverez sur la page d'accueil de votre page pro Facebook, ainsi que dans l'onglet boutique. Pour information, l'ordre d'affichage de votre page d'accueil dépend de l'ordre des onglets. Si vous souhaitez que vos produits apparaissent en haut de votre page, placez l'onglet "boutique" tout en haut ! Vous pouvez aussi partager votre produit en y ajoutant un texte personnalisé, de la même manière qu'une publication normale. Pratique ! L'autre grande innovation de Facebook est l'association de produits à une publication. Imaginez que vous vendiez des vêtements. Sur une photo d'une personne vous pourrez identifier les produits de la même manière que des personnes sur une photo de groupe. L'affichage sera de ce style là : En cliquant sur le produit associé, vous retombez directement sur la fiche produit du site (lien configuré dans votre fiche produit lors de l'ajout : URL de paiement ! Vous pouvez donc maintenant partager un produit, un montage associé à plusieurs produits, en faire la promotion avec un ciblage optimisé via les Facebook Ads ou organiser un jeu concours très facilement ! A vos claviers les e-commerçants, car avec cette petite refonte de la boutique Facebook, vous n'aurez plus d'excuses :)... Mon, 21 Aug 2017 11:50:42 GMT Jacques Danilo http://www.pixelcrea.com/blog/adwords-remarketing/ http://www.pixelcrea.com/blog/adwords-remarketing/     Le remarketing consiste à cibler des campagnes publicitaires pour des internautes ayant déjà visités le site Internet de l’entreprise (ou l’application mobile). Dans un exemple concret, cela vous permettra de proposer une annonce spécifique à l’internaute n’ayant pas finalisé son panier sur votre boutique e-commerce avec AdWords.  Cette notion de remarketing est idéale pour interagir avec des internautes déjà acquis en terme de trafic, de réduire les coûts de prospections car extrêmement ciblé mais aussi de personnaliser son message en fonction du contenu du panier ou de la navigation de l’internaute. C’est le cas avec Amazon par exemple qui utilise énormément cette technique en dehors de son site Internet à travers les annonces et publicités de Google AdWords. Les types de remarketing de Google Adwords Google AdWords nous permet de mettre en place plusieurs types de campagnes de remarketing en travaillant sur le ciblage. Le remarketing par liste de diffusion consiste par exemple à fournir à Google une liste de clients qui, s’ils se connectent à la plateforme de recherche Google, Youtube ou Gmail de voir apparaître vos annonces publicitaires. Les campagnes de remarketing standard proposent de diffuser vos annonces publicitaires à vos anciens visiteurs, aussi bien sur le moteur de recherche que sur les applications du réseaux display. Google AdWords nous propose également d’autres types de campagnes, dédiés aux applications mobiles ou encore aux vidéos que je n’évoquerais pas ici, mais un autre type de campagne intéressante est le remarketing dynamique qui permet d’inclure dans les annonces AdWords les produits ou services consultés par l’ancien visiteur (ce qui accroit de manière significative le passage de commande sur le site). La configuration des campagnes de Remarketing sur AdWords Tous les types de campagnes ne sont pas compatibles avec l’option de remarketing. Pour le réseau display d’AdWords, il faut sélectionner Réseau display uniquement, puis dans objectifs marketing il faut choisir Inciter à l’action puis Acheter sur votre site Web. Pour le réseau de recherche d’AdWords, il faut impérativement prendre « Réseau de Recherche uniquement – Toutes les fonctionnalités » sinon le remarketing ne pourra pas être actif !   L’ajout du code sur le site En suivant le lien ci-dessous vous accèderez au tutoriel de Google AdWords pour configurer un code à insérer sur toutes les pages de votre site, permettant alors à la régie publicitaire de Google de capter le parcours de l’internaute sur votre site, afin de lui proposer par la suite des annonces optimisées par rapport à son comportement. Le tutoriel est bien fait et vous permet même si vous sous-traiter la gestion de votre site d’envoyer au webmaster le code par email. Comptez environ 10 à 15 minutes, surtout si vous le faites pour la première fois. Ce n’est pas compliqué mais demande de bien tout lire pour être sûr de choisir les bonnes options parmi celles proposés : https://support.google.com/adwords/answer/2476688   Le code à insérer ressemblera à ceci : La création de listes de remarketing Après avoir insérer dans le code de l’ensemble de vos pages le code fourni par Google pour traquer le remarketing de votre site Internet (boutique, blog, site vitrine, forum, …) vous devez créer une liste de remarketing. Il s’agit d’une liste permettant d’enregistrer des comportements types afin d’ajouter l’identifiant de l’internaute (via un cookie) à votre liste. Par exemple, vous pourrez lister les visiteurs ayant visités telle ou telle catégorie du site, ou une fiche produit particulière, ou encore ceux qui ont consultés la page panier. Vous pouvez créer autant de listes que vous voulez sans avoir à modifier ou réadapter le code de tracking remarketing vu plus haut. Dans le détail, le code fourni par Google AdWords pour le remarketing enregistre tous les visiteurs, mais il vous faudra des listes pour ranger ces visiteurs dans des listes spécifiques (la liste globale n’est bien évidemment pas disponible) ! Il vous est également possible de créer des listes avec paramètres personnalisés comme par exemple une liste d’internautes ayant consultés le panier avec un minimum d’achat (pour leur proposer un code promo pour offrir les frais de port par exemple). Dans un autre cas j’ai personnalisé mes listes afin de traquer ceux qui mettaient plus de 3 produits identiques dans le panier, pour leur proposer des annonces de packs par la suite... Le remarketing est une très bonne solution pour automatiser les relances panier et susciter l’acte d’achat par un matraquage publicitaire ciblé auprès d’une cible déjà conquise. En réduisant les coût par la même occasion, vos campagnes AdWords offriront de bons retours et un bien meilleur taux de transformation. Pensez également à réadapter votre compte Google Analytics pour suivre au mieux la mise en place de cette stratégie remarketing !... Thu, 06 Jul 2017 13:45:25 GMT Jacques Danilo http://www.pixelcrea.com/blog/tunnel-achat/ http://www.pixelcrea.com/blog/tunnel-achat/ Lors d’un passage de commande sur votre site marchand, il est possible d’avoir des abandons de paniers tout au long de votre tunnel de commande (ou tunnel d’achat, ou encore tunnel de validation de commande). Afin d’optimiser le confort utilisateur et de favoriser la finalisation de l’acte d’achat, votre tunnel de commande doit être optimisé le plus possible. Les étapes du tunnel de commande De manière traditionnelle, votre tunnel de passage de commande se déroule ainsi : 1. Récapitulatif / Validation du panier  2. Connexion à votre compte client ou création du compte 3. Remplissage des adresses de livraison et facturation 4. Choix du transporteur 5. Choix du mode de paiement et paiement en ligne 1. Le panier (validation de la commande) Lors de la première étape « validation du panier » le client va passer le cap du passage de commande. C’est LE point crucial entre la mise au panier (pour s’en rappeler pendant que l’internaute flâne sur le site) et l’acte du passage de la commande. Beaucoup d’abandons sont présent sur cette première étape pour plusieurs raisons : - La mise au panier ne servait que vous mettre de côté les articles intéressants - Le montant global dépasse le budget espéré ou estimé (barrière psychologique) - Manque de temps (ils verront ça plus tard) - Manque de confiance sur le site marchand Afin d’optimiser et favoriser l’acte d’achat sur votre site marchand, il est important de soigner la présentation du panier, que cette page soit ergonomique et pratique, et de rappeler quelques éléments importants pour la confiance client : un encart rappelant que le paiement est sécurisé (avec le logo de votre banque), le montant minimum requis pour avoir les frais de port offerts (si c’est le cas sur votre boutique), le délai ou mode de livraison, et une promotion éventuelle (code promo à renseigner, 1 acheté 1 offert, promotion sur une catégorie de produits, etc…). Le but est ici de consolider la confiance du client pour valider son panier et/ou de faire développer son panier avant commande. 2. Inscription ou connexion au compte client Arrive alors la deuxième étape qui consiste à l’internaute de se connecter (pour un client déjà enregistré) ou de s’inscrire. A cette étape d’inscription peut se poser la question du spam, car beaucoup de boutiques demandent de valider son compte en cliquant sur un lien reçu par mail. Les abandons à cette étape peuvent êtres liés à : - Un formulaire trop imposant où la boutique demande trop de choses - Un formulaire pas ou peu explicite sur les champs à renseigner (par exemple pour un téléphone ou une date de naissance donnez toujours un exemple : 10/01/1978) - Une sécurité sur le mot de passe à renseigner trop imposante (ex : 32 caractères minimum, 3 majuscules, 4 chiffres et au minimum 10 caractères accentués…) - Un mail qui tombe dans la boite de courriers indésirables (spams) - Un mail mal constitué (fautes d’orthographes, mise en page hasardeuse) - Un lien qui ne ramène pas vers la bonne page (ex : retour à la page d’accueil) ce qui peut perdre le client. Pour cette étape je teste la création de compte avec plusieurs adresses : orange, free, yahoo, gmail, afin de vérifier si sur toutes ces boites mails ils arrivent bien dans le courrier entrant et non dans les spams. S’ils tombent dans les spams (sur toutes les boites ou certaines) c’est que votre domaine (nom de domaine) est enregistré en tant que spammeur potentiel, pour cela adressez-vous à votre webmaster qu’il corrige ce problème (je ne détaillerai pas ici les différentes procédures possibles pour être enlevé de ces filtrages auprès des différents fournisseurs de services…) 3. Adresses de livraison / Facturation A cette 3ème étape il faut remplir les 2 adresses. Le plus souvent vous ne devez en renseigner qu’une seule qui se recopie automatiquement pour la facturation (ou l’inverse). Les abandons à cette étape sont rares mais peuvent arrivées : - Le formulaire n’est pas assez clair (ex : ligne1 et ligne2 au lieu de numéro, rue, adresse complémentaire) - Il faut forcément recopier l’adresse pour les 2 formulaires (livraison / facturation) 4. Le transporteur A cette étape on retrouve également beaucoup d’abandons de commandes : - Les offres sont mal adaptées (trop cher) - Il n’y a pas de transporteurs proposés (lors de paniers conséquents) - Les transporteurs proposés sont mal adaptés aux besoins du client Il faut tester et bien configurer vos transporteurs, votre panier étant exprimé en kilos pour le choix d’un transporteur, vous devez être capable de proposer au moins 2 voir 3 transporteurs différents peu importe le poids du colis à envoyer. Dans les transporteurs à proposer, vous devez proposer au moins le traditionnel (La Poste), un transporteur privé (ChronoPost, UPS, …) et un transporteur via un point relai (Mondial Relay par exemple), afin de couvrir l’ensemble des souhaits du client : le moins cher, le plus fiable en qualité de prise en charge, et une solution permettant de le récupérer après le travail. Pour cela vérifiez la configuration de vos transporteurs coté administration et testez également plusieurs cas de figure sur le site : un petit panier, un très gros panier… Vérifiez également les cas particuliers : colis trop gros ou trop lourd, colis sensibles ou de forte valeur, etc… Proposez éventuellement un numéro de téléphone sur cette étape pour aider le client à faire le bon choix ou d’avoir une assistance si aucun transporteur n’est proposé. 5. Le paiement de la commande On arrive à la 5ème étape pour valider notre commande avec le choix du mode de paiement. Il est aujourd’hui indispensable aujourd’hui en France de proposer un paiement sécurisé par carte bancaire via une banque française, car cela nous rassure de se dire que s’il y a un problème quelconque on pourrait toujours aller au guichet de cette banque faire un scandale… Pourquoi pas ! Vous devez également proposer 1 ou 2 autres moyens de paiement : le chèque ? le virement bancaire ? Un paiement via Paypal ou une autre solution en ligne ? En Bitcoin (mais est-ce intéressant aujourd’hui) ? Les abandons peuvent être liés : - A un manque de confiance - A des modes de paiements mal adaptés (ex : Paypal uniquement pour acheter de la laine ou des prothèses auditives – s’adressant à une cible plutôt agée) Renforcez votre confiance client en précisant à cette étape que le paiement est fiable à 100%, qu’il est sécurisé, etc. Quelques conseils supplémentaires  L’acte d’achat se décide au moment du panier et arrivera au bout du tunnel d’achat sauf problèmes techniques dans la majorité des cas. Etudiez bien votre tunnel d’achat et boostez votre crédibilité à chaque étape. Rapellez que le paiement se fait de manière sécurisé (avec logo de votre banque) et placez-vous à la place d’un client. Faites également un audit auprès de votre entourage, en leur demandant des avis critiques (et constructifs) sur le processus d’achat en sélectionnant toutes les catégories de personnes par leur age, leur sexe, afin de cerner au mieux les points négatifs ou bloquants.  Pour vous donner quelques conseils supplémentaires à propos du tunnel d’achat : - Proposez une fois la commande passée une enquête de satisfaction. - Paramétrez Google Analytics pour qu’il puisse vous ressortir les taux d’abandons à chacune des étapes du tunnel de commande - Proposez une assistance visuelle : lors d’une des étapes, précisez « encore X minutes et votre commande sera validée » qui aidera le client à comprendre le temps à consacrer encore ou les étapes à passer… - Rassurez le client à chaque étape par les moyens de paiements, les modes de transports proposés, le coût total avec frais de port (s’ils ne sont pas offerts) - Sachez qu’une fois l’étape 2 passée vous avez les coordonnées du client, s’il abandonne son panier n’hésitez pas à le contacter pour savoir s’il a rencontré un problème. Le mieux étant le téléphone, et évitez les modules de relances automatiques (souvent froids, pas personnalisés)... Sat, 01 Jul 2017 16:45:56 GMT Jacques Danilo http://www.pixelcrea.com/blog/google-images-seo/ http://www.pixelcrea.com/blog/google-images-seo/ A l'heure actuelle, cette fonctionnalité n'est disponible que sur les smartphones, tablettes et applications Google sur Android, mais devrait s'étendre dans les prochains mois (prochaines semaines peut-être) à l'ensemble des affichages de Google Images. Il s'agit d'une nouveauté SEO relativement discrète de 2017, à l'heure où nous utilisons de manière identique le téléphone ou l'ordinateur pour effectuer nos achats en lignes. Vous le savez, une image vaut 1000 mots, et grand nombre de personnes surfent longuement sur Google Images. C'est pour cela que Google vient de sortir les Similar Items qui permettent de mettre en avant des produits similaires à une image avec prix et description du produit, permettant à l'internaute en 1 clic d'aller sur votre fiche produit et d'effectuer son achat. Magique ! Similar Items : les produits associés à une image Google Lorsque vous naviguez avec votre smartphone dans les images de Google (ici dans l'exemple en recherchant "chaussure ville homme"), puis en zoomant sur une des photos, on retrouve en dessous de cette image (après la description) les articles similaires. Présentés comme Google Shooping, ces articles similaires pointent vers votre fiche produit, à condition que le code source de la page produit soit écrite pour permettre à Google son intégration facile. Sur le listing des articles similaires on retrouve l'image (normal), son titre, son prix ainsi que le nom de la boutique (ou du moins le début). Le nombre de produits proposés semblent se limiter à 12 produits actuellement. Mise en place technique pour Google Images Déjà, sachez que vous ne pouvez pas orienter Google, c'est lui qui choisira quels produits afficher en articles similaires (on ne connait actuellement pas la logique de classement sur ce point précis). Mais il y a quelques petits bouts de code à intégrer pour accéder à cet affichage là. Le fonctionnement tourne avec schema.org qui propose d'incorporer dans le code source de votre page web quelques petites précisions appréciées des moteurs de recherches et des annuaires. Pour une intégration dans Google Images, Google nous demande d'intégrer plusieurs données vitales à l'aide des micro-formats : Le nom du produit, marqué via les microformats par le terme name : <span itemprop="name">Chaussure de ville élégante pour homme</span> L'image principale du produit (dans le cas où il y en a plusieurs), il faut nommer de la même manière la photo qui s'affichera dans les produits similaires : <img itemprop="image" src="chaussure-homme.jpg" alt="Chaussure homme élégante" /> Le prix du produit, ainsi que sa devise, marquées par price et priceCurrency : Attention, le prix est normalisé avec comme séparateur le point (.) et non la virgule (,) et ne doit encapsuler que le prix (sans le symbole euro). <span itemprop="price">119.99</span> €<meta itemprop="priceCurrency" content="EUR" /> Sa disponibilité est également obligatoire pour pouvoir proposer son produit sur Google Images (nous parlons toujours du cas des produits similaires hein !) : <link itemprop="availability" href="http://schema.org/InStock" /> Si ne savez pas le faire vous-même, n'hésitez pas à me consulter si vous souhaitez mettre ça en place sur votre boutique en ligne. Des retours possibles ? Des ventes ? A mon avis, ce nouveau levier de transformation e-commerce est très interessant, quand on connait le succès des images dans la communication. De plus, cette présence est gratuite, et relativement facile à mettre en place sur votre boutique. La logique reste la même puisque Google se base encore sur scema.org ! 2017 est une année charnière où plus de 50% des visites web se font sur smartphones. Et dernier point, comme c'est nouveau il n'y a pas encore trop de concurrence sur ce levier, allez-y les yeux fermés. Reste maintenant à savoir si Google nous a pris en compte, et de quelle manière on arrivera sur notre site à convertir le visiteur en acheteur...... Tue, 06 Jun 2017 12:14:15 GMT Jacques Danilo http://www.pixelcrea.com/blog/referencement-local/ http://www.pixelcrea.com/blog/referencement-local/ Dans de nombreux cas, la zone de chalandise de votre entreprise s’étend sur quelques dizaines de kilomètres : que vous soyez une boulangerie, un coiffeur, un dépanneur informatique ou encore une crèche. Pour votre stratégie Web, il devrait en être de même non ? Depuis 2014, Google a mis à jour son algorithme afin de proposer des résultats locaux plutôt que généralistes sur beaucoup des recherches réalisées. Cette mise à jour porte le nom non-officiel de Google Pigeon (nom donné par la communauté web). De cette façon, le résultat sur la recherche « coiffeur » sera différent si vous êtes à Lille ou à Marseille. Mais comment Google fait-il pour proposer des résultats différents pour cette même recherche ? Tout d’abord, il prend en compte votre positionnement géographique, par la géolocalisation liée à votre smartphone ou par votre équipement (votre box) avec une précision allant d’un rayon de 5km (passant par un routeur ou une box) à une précision proche de la dizaine de mètres en fonction du réseau téléphonique de l’endroit (GSM / Edge / 3G / 4G …). Mais il a aussi besoin de connaître l’emplacement de votre boutique ou commerce physique pour joindre la position de celui qui recherche par rapport à vous. Il va donc falloir optimiser un peu sa visibilité par quelques leviers assez simples. 1. Google My Business : Votre page entreprise géolocalisée La société Google permet, à l’aide de son outil Google My Business, de créer gratuitement une page pour son entreprise, qui servira de fiche de renseignement visible sur les recherches Google mais aussi sur Google Map. Vous vous étiez toujours demandé comment le supermarché du coin, votre coiffeur ou la station-service s’affichaient sur votre application Google Map ? C’est à l’aide de cet incroyable outil (et gratuit, je le rappelle). Foncez vite créer votre propre page « Etablissement » où vous allez pouvoir renseigner le nom de votre entreprise, son adresse locale, le numéro de téléphone, les horaires d’ouverture au public, votre site Internet, quelques photos de votre établissement (intérieur et extérieur, produits, ambiance, employés éventuellement, …), … Une fois votre page validée elle apparaitra alors sur les recherches de Google, Google Map ainsi que sur Google Plus (le réseau social de Google).  2. Inscription sur les annuaires locaux Votre page Google My Business faite et validée, votre fiche apparaitra donc sur les résultats de Google, mais il va falloir favoriser votre référencement local en s’inscrivant sur des annuaires locaux, comme Les pages Jaunes, Yelp, Tripadvisor, Yahoo Local, La Poste, … Google favorisera votre site (et par extension votre profil établissement sur Google My Business) dans ses recherches pour gagner en réputation en ligne et ainsi grappiller quelques places face à la concurrence. D’ailleurs, par une logique certaine, ces actions sont à faire car votre concurrence, elle, l’a peut-être déjà faite ou le fera un jour ou l’autre… Prenez les devants ! L’inscription est gratuite pour la plupart des annuaires locaux et favorisera votre visibilité sur Internet.  3. Développez les avis de vos clients sur Internet Votre notoriété en ligne passe principalement par la notation de vos clients, que ce soit sur Google My Business, Tripadvisor, Les Pages Jaunes, … Cela donnera plusieurs informations utiles à votre entreprise, comme son influence (un coiffeur avec 100 avis sera favorisé par rapport à celui qui en a qu’un ou deux) et sa crédibilité (la note moyenne comme les avis eux-mêmes). Pour cela invitez votre clientèle à laisser un commentaire sur les différentes plateformes en ligne, aussi bien en magasin, que par mail (avec le lien évidemment pour aider les internautes). L’engagement de votre clientèle sera difficile à booster alors n’hésitez pas à le mettre en avant le plus possible ! 4. Votre présence sur les réseaux sociaux Qu’il s’agisse de Facebook, Twitter, Google +, ou les autres, vous devez être présent sur les principaux réseaux sociaux, ce qui appuiera votre visibilité et votre crédibilité en ligne, pour votre site web comme pour votre e-réputation globale. Avoir une page pro sur Facebook est, allez j’ose le dire, obligatoire aujourd’hui. En moyenne en France on passe près de 3h les yeux rivés sur nos smartphones par jour – et principalement sur les réseaux sociaux !  5. Votre site web est-il « responsive design » ? En 2017, nous allons passer une étape importante dans le monde des usages web : de plus en plus de recherches sont faites à partir un terminal mobile (tablettes et smartphones confondus) – et 2017 sera l’année où les recherches mobiles dépassent les recherches dîtes desktop (faites à partir d’un ordinateur). On entre dans l’ère du mobile-first ! Mais du coup, votre site est-il responsive design ? S’adapte-t-il sur téléphone facilement avec une navigation simple et accessible ? Si ce n’est pas le cas, sachez qu’en moyenne vous vous rendez inconfortable pour 50% de vos prospects ou clients ? C’est déjà énorme, mais retenez aussi que votre site web est défavorisé depuis le 1er janvier 2017 à cause de ce manque d’adaptabilité sur les petits écrans ! Si votre site ne s’adapte pas aujourd’hui, faite le refaire au plus vite par un professionnel ! 6. Optimisez le contenu de vos pages web Vos pages web se travaillent de la même manière que vous avez travaillés les rayonnages de votre boutique, ou la décoration de votre vitrine en périodes de fêtes de fin d’année. Pour travailler votre référencement local, il faut alors travailler le contenu de vos pages en fonction : Placez votre adresse sur toutes les pages du site (avec le nom de la ville, du quartier ou de l’arrondissement), optimisez vos titres en y plaçant des informations locales, et écrivez du contenu toujours en plaçant des informations locales : la ville, le quartier, les points de repères géographiques (ex : à droite après la station-service Total), … 7. Optimisez vos balises titres et descriptions Votre contenu est maintenant optimisé, bien ! Mais il faut aussi maintenant optimiser votre affichage sur les moteurs de recherche : il s’agit de renseigner les balises « titre » et « meta description ». Ce sont ces 2 contenus qui s’affichent sur les moteurs de recherche. Note : votre titre doit faire une longueur idéale inférieure à 70/72 caractères, et la description ne devrait pas dépasser 160 caractères, au risque pour les deux cas que Google n’affiche pas tout votre contenu et remplacent les derniers mots par des petits points. Vos titres et descriptions doivent alors comprendre des termes locaux (ville, quartier, arrondissement). Cela aidera Google à comprendre que vous souhaitez être visible sur « Boulangerie Paris 11ème » plutôt que sur « boulangerie ». Et en plus, comme la recherche local est assez récente, beaucoup d’internautes feront leurs recherches en précisant la ville, la région ou le département… Conclusion Le référencement local est une technique particulière mais pas difficile à mettre en place pour gagner en visibilité et en qualité sur Internet. Toutes les techniques évoquées et outils sont gratuits et vous permettront d’être plus visible, pour prendre la place de vos concurrents et dynamiser vos ventes ! Evidemment, je ne vous donne pas toutes les techniques dans cet article qui ne sert que de mise en bouche du potentiel SEO que vous pourriez gagner sur le plan local. N’hésitez pas à me contacter si vous avez des questions !... Sat, 13 May 2017 17:37:35 GMT Jacques Danilo http://www.pixelcrea.com/blog/choisir-nom-de-domaine/ http://www.pixelcrea.com/blog/choisir-nom-de-domaine/ Au lancement de votre activité Web, la première question à se poser est la recherche de votre nom de domaine. C’est ce qui permettra de savoir si vous serez visible sur les différents moteurs de recherche, et comment vous serez vu et retrouvés par les internautes. Il faut, comme le nom d’une entreprise, qu’il soit le plus court possible et facilement mémorisable. Petit tour d’horizon des différents points à surveiller… Trouver le nom Que ce soit pour un nouveau business ou pour une entreprise déjà installée, Internet vous offre tout un nouveau secteur à explorer et à dynamiser. Le plus souvent, on essaye d’avoir le même nom de domaine que le nom de l’entreprise (ex : tf1, leroymerlin, …) mais ce n’est pas une obligation. Dans tous les cas, pensez simple, et court ! Le nom de domaine doit refléter votre activité, votre nom de société, en évitant les noms de domaine à rallonge qui deviennent compliqués à retenir (et donc à écrire forcément !). Si vous démarrez une nouvelle activité, notez toutes vos idées sur un papier, comparez avec votre concurrence locale, nationale voir internationale pour trouver le bon nom. Gardez-vous plusieurs pistes (3 ou 4) sous le coude, parlez-en à vos amis, discutez du nom, etc. Evitez les noms de domaine compliqués Votre nom de domaine ne sert pas que sur Google. Il sera véhiculé par plusieurs autres sources comme la carte de visite, le catalogue papier ou marqué sur votre véhicule d’entreprise. Plus il sera court et simple, plus les retours seront meilleurs. Evitez à tout prix les fautes d’orthographes ou une parodie orthographique comme Kdo par exemple.  Avec ou sans tirets ? Si vous n’avez pas le choix, puisque votre souhait se base sur plusieurs mots (prenons l’exemple d’un nom de domaine à trouver pour « Ma terrasse en bois »), vous pourriez l’écrire sous plusieurs formes : - Avec tirets : ma-terrasse-en-bois.com- Sans tiret : materrasseenbois.com- En version courte avec tirets : terrasse-bois.com- Court et sans tirets : terrassebois.com Attention à la longueur Une ancienne stratégie consistait à placer des mots-clefs dans votre nom de domaine, comme par exemple agence-immobilier-paris-18-arrondissement-France-jenesaispasquoi.com – Sachez qu’aujourd’hui il n’y a plus aucune raison de choisir un nom de domaine… Comment dire… Aussi pourri ? bon on va dire aussi long ! Avant, il y a 10 ans maintenant, Google prenait en compte les mots clefs placés dans l’URL (et donc dans le nom de domaine). Ainsi on pouvait espérer ressortir plus facilement sur les moteurs de recherche. Depuis des années Google ne considère plus ces mots-clefs comme étant important : il ne les prend plus en compte. Pire même, Google semble préféré un terme court et simple – pas forcément un mot commun d’ailleurs. La longueur a son importance, privilégiez donc un mot court et facilement prononçable en respectant la langue française (si votre nom est français). Sachez que la longueur moyenne d’un nom de domaine est de 13,1 caractères (source : Keep.The.Line) Vérifier sa disponibilité Pour vérifier et enregistrer votre nom de domaine, il faut trouver un hébergeur ou un registrer (ovh, amen, 1and1, planetHosteur, … Il en existe plein, ils sont quasiment au même tarif et proposent quasiment les mêmes prestations. Retenez qu’un nom de domaine se loue à l’année (c’est la seule offre proposée, peu importante quel prestataire vous prenez) et coûte dans les 10/15 Euros en moyenne en fonction de l’extension choisie : .fr, .com, .bzh, .ru, … Evitez les nombres Toujours pour rester avec mon exemple de terrasse, imaginons une entreprise nommée Terrasse de bois. Je pourrais prendre le nom de domaine terrasse2bois.com – Attention car entre 2, de ou deux (voir d’œufs ^^) il peux y avoir quelques soucis. Idem à l’international avec 2, to, ou two… Pensez à l’avenir de votre activité sur Internet Avant de vous ruez sur un nom de domaine, il faut se poser la question de l’extension, à savoir : est ce que je prends un .fr, un .com, un .bzh, un .biz, … ? Ce qu’il faut savoir c’est que lorsque nous réalisons des recherches sur Internet, on passe par Google dans plus de 95% des cas, on ne va donc parler que de lui. Vos recherches, en France, sont faites sur Google.fr (notez bien : .fr chez Google) : Google favorise donc sur ce domaine là les .fr (logique) et les .com qui sont habituellement associés aux sociétés internationales. Optez donc pour une extension classique (.fr ou .com) – sans oublié de voir avec votre activité aujourd’hui mais aussi dans l’avenir. Prenons un exemple avec mon nom de domaine : pixelcrea.com – j’aurais pu, lorsque j’ai pris ce nom de domaine en 2006, prendre le .fr – au démarrage je cherchais une clientèle locale, avec un secteur géographique très ciblé car je visais surtout la Bretagne, en favorisant les 3 grandes villes autour de chez moi qui étaient Vannes, Rennes et Nantes. Mais j’espérais pouvoir un jour dépasser ce secteur là et pouvoir, en qualité de graphiste freelance, sortir de ma Bretagne, voir même pouvoir travailler à l’extérieur de la France. Gràce à un .com, je peux alors me retrouver plus facilement visible sur les autres moteurs de recherches (ex sur Google.be pour la Belgique, qui, vous l’aurez compris, favorise les noms de domaine en .be et en .com) – malin non ? Pensez donc à l’avenir, et au pire, si vous n’êtes pas sur, privilégiez le .com ! Le risque des nouvelles extensions Depuis quelques années, il existe des extensions plus farfelues comme le .bzh, le .tel, le .paris, … Il y a 2 risques par rapport à ces extensions là : au moment où j’écris cet article (Février 2017) Google considère ces noms de domaine comme étant « originaux » et semblerait ne pas les favoriser (en gros ils passent après les .com et .fr) – de plus ces extensions ont tendance à couter cher ! Evitez le cyber-squatting Le quoi ? Le cyber-squatting est le fait de prendre un nom de domaine proche d’un nom de domaine connu afin de profiter de l’image de marque (notoriété) du site principal. Comme exemple que j’aime raconter durant mes formations, le site de la maison blanche aux Etats-Unis est en .org, mais ils n’avaient pas pensés à réserver d’autres extensions. Du coup l’un des plus gros sites pornographiques a pris le .com – donc si on se trompe en écrivant l’adresse on risquerait d’être choqué ^^ ! Réservez donc les extensions les plus proches : je vous invite à réserver, s’ils sont disponibles, les .fr, .com, .eu, .biz, voir même si vous pensez en avoir l’utilité les extensions des pays limitrophes (de, be, it, et les autres) en fonction du nom et de votre activité.  Pour résumer sur votre choix de nom de domaine Votre nom de domaine doit être le plus simple possible, le plus court possible, et être avec une extension en fr ou en .com pour avoir les meilleures chances en SEO sur Google (du moins à l’heure actuelle – en 2017 – cela pourrait changer dans les prochaines années vu la diversification des extensions proposées). Essayez plusieurs écritures possibles, avec ou sans tiret, regardez la concurrence et prenez votre temps.... Mon, 06 Mar 2017 17:54:08 GMT Jacques Danilo http://www.pixelcrea.com/blog/ecommerce2017/ http://www.pixelcrea.com/blog/ecommerce2017/ L'année 2017 approche à grand pas et il est grand temps de préparer sa stratégie e-commerce. Pour ne rien rater, j'ai préparé une onfographie reprenant les plus grands évènements de l'année pour le e-commerce. A télécharger et à partager le plus possible ! Mois par mois, vous avez les dates des jours et des périodes les plus importantes pour permettre de préparer au mieux vos actions commerciales. Une action se prépare 2 mois à l'avance et se lance 1 mois avant. Par exemple, pour la saint valentin, il serait temps de penser aux actions à mener : newsletter ? Réseaux sociaux ? Adwords ? A partir de quand ? le jour même ? Pensez à ceci dès maintenant et établissez un planning pour cet évènement. Préparez ensuite sur janvier les éléments graphiques et techniques nécessaires à cet évènement puis lancez vos actions en respectant votre planning. Cette infographie du calendrier e-commerce 2017 n'est pas exaustive mais vous permettra déjà d'élaborer votre stratégie marketing 2017 dans les meilleures conditions ! Enjoy :D ... Fri, 02 Dec 2016 20:09:09 GMT Jacques Danilo http://www.pixelcrea.com/blog/nouveautes-prestashop-17/ http://www.pixelcrea.com/blog/nouveautes-prestashop-17/ Prestashop, le leader du CMS e-commerce vient (enfin!) de faire une grosse mise à jour, aussi bien sur le fond que sur la forme. Une grosse refonte qui concerne aussi bien la partie publique que la partie administration pour l’animateur e-commerce. Nous allons faire un tour d’horizon de cette nouvelle version et de ses nouveautés. Un autre article traitera de l'aspect technique de Prestashop, aussi bien dans les changements majeurs du moteur que dans la modification des thèmes Prestashop 1.7. On l'attendait depuis longtemps, car la version prestashop 1.6 était un peu difficile à gérer : trop de choses, de menus, d'éléments rangés au mauvais endroit, avec un manque d'intuitivité malgré l'effort graphique comparé à la 1.5. Et surtout ce qui me frénait de plus en plus, c'est cette lourdeur de la solution Prestashop qui ne nous classait pas bien en terme de SEO : lourdeur de Prestashop = temps de chargement important = négative SEO, même avec les meilleures optimisations proposées. Là, on approche d'un temps de chargement plus concevable, aussi bien pour l'internaute que pour notre très cher moteur de recherche préféré ! L’installation de Prestashop 1.7  A l’installation, pour le moment rien ne change. Un peu déçu car en voyant les différents screenshots de l’administration Prestashop 1.7, j’aurais aimé aussi un léger restylage de l’installation. Seule petite modification pour moi, qui, travaillant avec MAMP Server sur Mac, a du faire 2 modifications mineures qui apparaissaient lors de la validation système. En premier lieu Prestashop me suggérait d’activer un accélérateur PHP (APC pour MAMP), et de modifier un paramètre du php.ini pour désactiver short_open_tag (pour l’utilisation des codes raccourcis d’ouverture php <? et ?>). Attention également pour ceux qui l’installent en local, la connexion à la base de données doit être précisée avec le port utilisé pour MySQL (que vous pouvez retrouver sur PhpMyAdmin en haut à gauche). Les nouveautés de l’administration Fini le vert ! Place au bleu… L’administration a été refondue, mais pas que sur la couleur. Premier accès et on retrouve Preston, le personnage ludique d’apprentissage de l’administration. En quelques étapes vous pourrez, sans connaissances particulières, créer votre premier produit, paramétrer votre site e-commerce, configurer les coûts de transports de vos transporteurs et définir les modes de paiement, et hop, vous voilà commerçant en ligne ! Mais la première chose que l’on remarque si on était déjà connaisseur de Prestashop c’est le menu qui a été entièrement refondu. 3 catégories voient leurs apparitions : vendre, personnaliser, et configurer. Voici une petite infographie sur le menu de Prestashop 1.7 avec l'explication de chaque menu pour vous y retrouver ! Note : au passage, si vous voyez des fautes, n'hésitez pas à me le dire, je corrigerai. La création des fiches produits a été également simplifiée avec 6 onglets au lieux des 12 de la version précédente, évitant ainsi de jongler entre chaque partie. Un gain de temps et une réorganisation plus logique aussi. Dans l’onglet vendre, les commandes passent avant les produits, ce qui semblait être plus logique effectivement ! Le service client se voit remonté au niveau principal. Les statistiques elles sont mises à l’honneur en se trouvant directement dans les ventes, plutôt que tout en bas dans les versions précédentes. Pour la personnalisation de Prestashop 1.7, la simplification est au rendez-vous : Les paiements viennent sur le devant de la scène, et l’ancien menu localisation se simplifie et devient international. On notera l’épuration de la gestion des modules, mais surtout des positions, qui je trouvais était une partie trop dangereuse pour l’animateur e-commerce débutant souhaitant absolument toucher à tout. C’est une bonne chose ! Allez dernière différence avec les anciennes versions aussi, le menu CMS devient pages, également plus logique, et qui évite de confondre contenu texte avec le terme CMS : Prestashop est un CMS e-commerce. (CMS : Content Manager System, autrement dit : Système de gestion de contenus) Mise à part le changement du menu, pas ou peu de nouveautés dans les réglages, options et pages de l’administration de Prestashop 1.7. Passons donc à la partie publique... Nouveautés Prestashop 1.7 : La partie publique Là franchement, ils ont fait enfin un vrai thème e-commerce : classic, réalisé par l'équipe Prestashop Il faut dire que je me lassais carrément du thème de la version 1.6 (Default-Bootstrap), trop vu surement ! Là encore il y a eu une grosse simplification du thème de base, et franchement, c'est joli. On aurait même envi de travailler directement avec ce thème tellement il est light de toute emprise graphique. Une très belle surprise ! Pour les développeurs, intégrateurs et graphistes, notez qu'une structure du thème squelette pour Prestashop 1.7 est disponible sur Github :https://github.com/PrestaShop/StarterTheme  De plus, avoir un thème aussi simple et épuré permettra aux graphistes et intégrateurs HTML/CSS de faire des modifications ou de nouveaux thèmes plus facilement. Un must aujourd'hui quand on sait le temps que prend la création ou la modification de thèmes Prestashop 1.7... Gros changement par contre pour le tunnel d'achat, précédemment présenté en 5 étapes (Validation du panier, Connexion/Inscription, Choix du transporteur, Choix du paiement, et Validation de la commande), qui est refondu en une seule et même page, permettant alors un aboutissement des commandes plus aisé (pas de changement de pages, avec la lenteur qui en découle). Le tunnel d'achat en est donc simplifié, vous aurez moins d'abandons ! Pour le moment, cette mise à jour de Prestashop possède les nouveautés que j'espérais : une administration plus simple, et une partie publique plus rapide. Avec ce beau thème en plus, personnellement j'adhère ! Moi qui passait de plus en plus sur WordPress et WooCommerce car Prestashop me sortait un peu par les yeux, me voilà re-séduit par la solution ! Faut-il passer tout de suite à Prestashop 1.7 ? Mon avis est double : pour ceux qui veulent lancer leur site marchand aujourd'hui, la réponse est oui : Prestashop 1.7 est une très (très) bonne solution e-commerce, stable (la phase de tests et débugages terminés), nous avons le feu vert de la société Prestashop pour l'utiliser. Par contre pour le moment les modules et thèmes sont assez peu nombreux, car Prestashop a changé de logique et passe maintenant par Symphony 2, le célèbre Framework PHP. Mais pour ceux qui ont un prestashop déjà installé, d'une ancienne version, la migration ne se fera pas sans mal : tous les modules n'ont pas encore étés mis à jour, idem pour le thème que vous aviez retenu (ou modifié) il ne sera pas compatible avec la nouvelle architecture. Donc il vaut mieux faire appel à un prestataire pour migrer le plus facilement du monde. Si besoin contactez-moi pour vous conseiller à ce sujet. Et vous quel est votre ressenti sur cette nouvelle version ? Vous aimez ? Vous detestez ?... Wed, 16 Nov 2016 20:08:00 GMT Jacques Danilo http://www.pixelcrea.com/blog/wordpress-theme-infographie/ http://www.pixelcrea.com/blog/wordpress-theme-infographie/ Wordpress permet, grâce à l'utilisation de thèmes, de personnaliser l'interface publique. On peut en trouver des gratuits, des payants, ou le faire soit-même (en supposant que l'on maitrise le HTML 5, le CSS 3, le Php, le fonctionnement de Wordpress et des notions de référencement). Ce n'est pas impossible, et en étant capable de faire de bonnes recherches sur Google on arrivera à trouver beaucoup de ressources autour de la création de thèmes pour Wordpress. Je vous ai préparé une infographie concernant la structure d'un thème pour pouvoir s'y repérer lors de modifications d'un thème ou la création de thèmes sur-mesure pour Wordpress. Elle s'adresse aux débutants, et j'ai vulgarisé volontairement l'information pour m'orienter sur la compréhension lors de mes formations sur Wordpress. La structure minimale d'un thème Wordpress La structure du dossier de votre thème doit contenir absolument ces fichiers pour fonctionner correctement. C'est le minimum vital pour que Wordpress puisse le comprendre comme un thème : index.php : le modèle par défaut. Théoriquement cette page ne doit pas servir car il existe des modèles spécifiques (voir plus bas). header.php : c'est le header du site, qui comprend de la création du doctype au début de la balise body. Ce fichier s'appele grâce à la fonction get_header(). style.css : C'est la feuille de styles principale de votre thème. Ce fichier permet l'identification du thème à l'aide de commentaires, utile pour le nom du thème (visible depuis l'administration Wordpress), ainsi que l'auteur, la version, etc...). functions.php : les fonctions du thème, qui concernent aussi bien la version publique (front-office) que l'administration (back-office) comme pour définir les zones de widgets. footer.php : le footer du site, déclare la fin du document HTML (fin du BODY et fermeture de la balise HTML). Ce fichier est appelé grâce à la fonction get_footer(). screenshot.png : c'est l'image de votre thème qui sera visible depuis l'administration dans apparence > thèmes. Fonctionnement des modèles / gabarits d'un thème Dans la deuxième partie de cette infographie Wordpress, je vous présente le fonctionnement des modèles et ce qu'attend Wordpress. Tous ces gabarits ne sont pas forcément à produire, cela sera défini par les différentes présentations que vous voulez donner à vos pages. Si je prends l'exemple de la page d'accueil, elle se vérifie par la fonction is_home() et viendra chercher le gabarit home.php, sinon Wordpress se rabattra sur index.php. Dans un autre exemple, pour les catégories, la catégorie se teste par la fonction is_category() et se trouvera dans category.php. Si cette dernière n'existe pas il ira voir le modèle archive.php ou index.php si archive.php n'existe pas non plus. Des modèles existent pour la page d'accueil, un article, une page, une catégorie (d'articles), un auteur, des dates (ex : 2014) pour les archives, les résultats de recherches et la page 404 (très importante pour le SEO).... Thu, 06 Oct 2016 19:00:05 GMT Jacques Danilo http://www.pixelcrea.com/blog/page-pro-facebook/ http://www.pixelcrea.com/blog/page-pro-facebook/ Vous avez une page entreprise mais qui stagne, aussi bien dans l’engagement que dans la conversion (appels, achats de produits, contacts par mails, ou visites sur votre site) ? Voici une liste de plusieurs conseils, ou trucs et astuces pour dynamiser les retours de votre page entreprise sur Facebook. Améliorez l’engagement de vos fans, trouvez de nouveaux fans, et convertissez plus facilement pour atteindre votre objectif (passage de commande pour un site marchand, contact téléphonique pour une société de service, prise de rendez-vous, ou inscription à une newsletter par exemple). Pour faire un point sur ce qu’est Facebook aujourd’hui, il faut savoir qu’aujourd’hui c’est le plus grand des réseaux sociaux, loin devant Twitter et LinkedIn et très très très (très) loin devant Google Plus, Pinterest ou Viadeo : près de 31 millions d’utilisateurs actifs par mois en moyenne en France, de quoi booster votre activité non ? Sachez aussi qu’environ 6% de vos fans verront vos publications, elles ont une sorte de date de validité et une importance (ou non) dans l’algorithme de tri de Facebook. Facebook n’affiche pas tous les messages de tous vos amis, pages, groupes, etc… Il sélectionne les contenus à afficher à l’aide d’environ 100 000 critères différents pour savoir quoi montrer à chaque membre. En fonction de vos habitudes, centres d’intérêts, engagements, commentaires, … Facebook trie pour vous le contenu de votre mur pour n’afficher que le meilleur (c’est ce qu’il dit hein, parce que les chatons trop mimi bah moi j’aime pas ^^). Autre statistique intéressante donnée par mes amis de la chaine du web, environ 82% des consommateurs utilisent Facebook pour joindre directement un représentant d’une marque. Toujours est-il qu’il y a un potentiel sans précédent sur Internet, et la concurrence est moins acharnée et représentée que pour le référencement naturel sur Google par exemple.  VOTRE PAGE ENTREPRISE  1. Remplir sa page du mieux possibleRemplissez de votre profil le plus possible. Facebook vous permet de rajouter une description personnalisée, de mettre en avant vos coordonnées comme l’email, votre téléphone ou votre site web. Précisez également les horaires d’ouverture et adresse physique. Ajoutez également plusieurs photos, vidéos ou services afin d’avoir le profil le plus complet possible, cela incitera l’internaute a passer plus de temps sur votre page, et favorisera les conversions et l’engagement. 2. L’image de profilVotre image de profil doit être la plus visible possible : préférez votre logo à la photo de votre commerce ou bâtiment (car trop difficile à comprendre en petit format). Préférez un format carré sinon Facebook tronquera votre photo de profil à votre place - cela risquerait de dénaturer votre image de marque 3. L’image de couvertureL’image de couverture se voit quand on est sur la page entreprise, mais également lorsque l’internaute passe sa souris sur votre promotion de page ou lors de partages d’articles par exemple. Elle doit être soignée, sans comporter de messages publicitaires (Facebook n’apprécie pas les images type call-to-action) – et d’un format idéal de 800px de large sur 315px de haut. Si vous renseignez une image trop haute par exemple, Facebook la coupera pour vous et votre image aura alors certainement moins d’impactes auprès de votre cible. 4. Un lien vers votre site, et un lien vers votre page pro !Votre page pro sur Facebook n’est autre qu’une extension de votre site web, preuve en est, vous en faite la promotion : lien dans la description, définition du bouton en savoir plus, etc…) mais n’oubliez pas de générez l’inverse : votre site doit inviter les internautes à aimer votre page facebook. Cela boostera l’engagement de votre page (et par extensions à votre site aussi) 5. Soyez différent, ou même mieux, soyez unique !Comparez votre page avec celles des concurrents ou acteurs de votre marché, essayez de trouver quelque chose qui vous différencie de la concurrence, voir innovez complètement, par une ligne éditoriale, une charte graphique établie et reconnaissable dans le temps, sortez des sentiers pour proposer quelque chose que les autres acteurs ne proposent pas. 6. Définissez votre objectifAvoir une page ok, mais pour quoi faire ? Quel est votre but en animant cette page ? Pour certains, cela peut être simplement de dynamiser ses ventes, mais il est possible de se choisir un autre objectif : remplir une base de mails (pour une prospection par newsletters), générer des inscriptions sur un site (ex : forum, blog, site spécifique de niches), des contacts téléphoniques, etc... A vous de définir pourquoi animer cette page, cela en découlera par un comment ? (Je sais, c'est pénible toutes ces questions :) )  7. Prenez du recul sur votre page Prenez un peu de recul, et demandez autour de vous ce que les gens pensent de votre page, de votre présentation (description de la page), du contenu publié, corrigez si necessaire. Montrez votre page à vos employés et écoutez leur avis. Notez les points qui vous semblent importants pour de futures modifications 8. Testez votre pageAvec les smartphones, les tablettes, un ordinateur voir même sur des supports spécifiques (les consoles de jeu ?), prenez le temps de regarder comment s'affiche votre page aux yeux de tous. Cela permettra de mettre en avant des problèmes que vous n'aviez pas identifié encore (exemple avec du texte sur la photo de couverture qui se retrouverai tronqué sur smartphones). 9. Administrez votre page partoutJe ne sais pas si vous saviez, mais une application iphone/android est disponible (elle se nomme Pages - evidemment) pour vous permettre la meilleure expérience utilisateur et gagner en confort pour manager votre contenu et les interactions avec votre audience. 10. Mettez votre page à jour, et modifiez-la de temps en tempsDu changement ne fait jamais de mal. Pensez à innover en modifiant l'image de couverture ou la photo de profil de temps en temps, cela surprendra votre audience et suscitera la curiosité ! Attention cependant à ne pas dénaturer votre image de marque ou de faire un virage à 180°. Votre audience vous connait déjà, et doit pouvoir s'identifier autant qu'avant vos changements... L’ANIMATION DE VOTRE PAGE 1. Les conversationsAnimez la conversation en répondant toujours aux questions et commentaires de vos fans (ceux qui aiment votre page et par conséquent voient vos publications sur leur mur). Vous donnerez alors une impression de proximité avec eux et augmentera leur engagement. Répondez avec politesse, soyez toujours agréable malgré certaines attaques. N’oubliez pas que vous représentez l’entreprise, pas votre personne. 2. L’engagementEngagez votre audience en posant des questions, en créant un sondage et en publiant du contenu de qualité (articles rédigés ou partagés sur votre page) afin de dynamiser l’engagement de vos fans en obtenant des partages et des j’aime en plus (pour votre page ou votre publication). 3. Le visuel prime !Les utilisateurs de Facebook aiment les images (et les vidéos), alors plutôt qu’un long discours préférez un contenu visuel. Grâce aux images et vidéos, obtenez plus d’engagement à vos publications. Le meilleur format aujourd’hui est une image (format carré de préférence) avec 2 lignes de texte au maximum. 4. Variez ses publicationsFacebook vous permet de publier différents contenus (questions, articles, vidéos, photos, publications longues, …) alors pourquoi publier ou partager toujours le même contenu ? Changez de format aussi souvent que possible pour surprendre les fans de votre page entreprise. 5. Soyez efficace !Votre audience (vos fans) est constamment sollicitée, soyez donc le plus clair, précis et concis possible lors de vos publications de contenu, pour ne pas risque un manque cruel d’engagement et voir un désabonnement de votre cible. 6. Et avec de l’humour s’il vous plait !Facebook permet une chose incroyable pour les discours d’entreprises : on peut se permettre sur Facebook un brin d’humour sans pour autant porter préjudice à l’image de marque véhiculée. La sensation de proximité avec votre audience pourrait bien vous permettre quelques petites touches d’humour. Evitez l’humour noir ou de l’humour sur un sujet trop sensible (migrants, les SDF, les attentats, les opinions politiques), préférez l’humour gentil (ne jamais se moquer de ses fans !) et l’autodérision. 7. Ne spammez pas votre audienceNe publiez pas trop de contenus dans la même journée, se limiter à 2/3 publications est déjà bien, le risque étant que vos contenus génère que peu ou pas d’engagement (j’aime, partages, commentaires, clics) pour au final ne plus apparaître sur le mur de vos fans. 8. Persévérez !Malgré certaines publications qui n’ont générés pas ou peu de retours, continuez votre activité en tenant un rythme de publication. Vos fans vous suivent car ils aiment savoir ce qu’il se passe dans votre entreprise. Donnez alors les informations qu’ils attendent (au passage cela peut-être une idée de sondage à lancer ;) ) 9. L’honnêteté de vos proposCela ne sert à rien de mentir à votre audience, si elle vous suit c’est qu’elle a confiance en votre entreprise. Donnez une information honnête et réfléchie, sans quoi les retours négatifs seront nombreux : mauvais commentaires, désengagement de votre audience, critique externe difficile à gérer ensuite. 10. La modération, mais avec modérationModérez votre page en y supprimant les publications "spammeuses", mais évitez le plus possible de supprimer les commentaires négatifs. D’abord parce que cela est normal aussi d’avoir des clients moins satisfaits que les autres, de votre faute ou pas d’ailleurs (problème de transport par exemple, de gestion, clients particulièrement pointilleux). Cherchez plutôt à résoudre le problème, publiquement ou non, et d’en tirer les bonnes leçons pour vos futures missions/prestations/commandes/engagements (rayez les mentions inutiles ^^). Si besoin excusez-vous, cela donnera un aspect plus humain, et boostera votre crédibilité. 11. Automatisez le moins possibleLes pages Facebook permettent d’automatiser la publication de contenus, mais méfiez-vous de votre programmation. En fonction des évènements, des changements de lois ou de l’actualité du moment, vos publications pourraient ne pas avoir l’effet escompté. V audience souhaite voir un contenu de qualité et comprendra tout de suite le coté automatisé stérile de votre contenu. Evitez également de lier vos tweets par exemple, chaque plateforme a sa propre logique, ses propres stratégies… 12. Soignez l’orthographe !Nous sommes encore quelques irréductibles qui refusons le nivèlement par le bas à travers la réforme de l’orthographe. Je ne parle pas d’éviter les fautes, non, n’en faites pas, c’est tout. C’est votre image de marque qui en dépend : des fautes d’orthographe, de grammaire ou de conjugaison dénature votre contenu (on ne voit plus que ça) et votre crédibilité. Souvenez-vous du buzz bfm/itélé sur les bandeaux en bas de l’écran… 13. Faites de la promotion de publicationsUne publication a une durée de vie assez limitée sur Facebook, votre audience verra votre publication perdue dans un nuage d’autres publications sur leur mur. Son impacte sera importante à la diffusion de ce contenu mais à peine quelques heures plus tard elle n’apparaitra même plus dans le fil d’actualités. Promouvoir une publication permettra une meilleure visibilité et un engagement multiplié ! Promouvoir une publication est la meilleure façon de séduire de nouveaux prospects, loin devant le partage classique. 14. Décoincez-vous, on est sur FacebookSortez de l’information institutionnelle et rigide type communiqué de presse, et optez pour un ton plus amicale (mais pas trop non plus hein !). Tournez votre discours de plusieurs façons possibles avant de prendre votre décision, et regardez bien quelle est votre cible. Vulgarisez votre contenu et boostez ce sentiment de proximité envers vos fans. 15. Evitez les vidéos YouTubeSi vous avez des vidéos à mettre sur votre page, évitez de les mettre sur Youtube et de donner le lien. Facebook permet de publier des vidéos, et surtout Facebook cherche aujourd’hui à détrôner un peu Youtube dans les plateformes de vidéos. Certes ce n’est pas la même stratégie entre les 2 géants, mais il est préférable de rester sur un seul support : votre page pro Facebook. L’affichage d’un lien Youtube est d’ailleurs moins glamour que la publication d’une vidéo Facebook dans le fils timeline de vos fans. 16. Publiez des liensEngagez votre cible par des liens vers votre site : blog, actualités, pages produits ou services… Si vous devez inciter votre audience à partir de votre page pro Facebook, ce ne sera que pour aller vers votre site (sauf cas exceptionnels, comme un lien vers un texte de lois, ou une actualité nationale de type presse). 17. Publiez à l’heureLes meilleurs engagements sont sur des contenus publiés à 8h, 13h et 19h. Si vous devez publier du contenu, préférez ces heures là (programmez votre publication si besoin) : l’engagement est en général meilleur (en fonction des différents profils de votre audience, de l’algorithme Facebook pour la classification des publications et par les habitudes utilisateurs). 18. Mettez du budget, vous êtes professionnel non ?On parle bien d’une page pro ? Pour une entreprise hein ? Alors pourquoi votre entreprise ne met pas 1 centime sur Facebook ? Si vous devez faire un encart publicitaire à la télévision ou dans les journaux, cela vous coutera des centaines voir des milliers d’euros pour une visibilité restreinte (limitée par exemple au nombre d’exemplaires d’un journal). Sur Facebook, je crois ne pas dire de bétises en disant que Facebook diffuse du contenu à plus de prospects que votre journal préféré, je me trompe ? Blague à part, Facebook c’est presque 2 milliards d’utilisateurs dans le monde, 31 millions d’utilisateurs en France, et presque 7,5 millions d’utilisateurs uniques par jour en France (chiffres d’aout et novembre 2016 via webmarketing conseil) 19. Publiez un contenu partageable facilementCe qui marche bien ce sont les images textuelles (image de fond avec une petite citation graphique du style "Le Nutella fait rétrécir les jeans". Pour en faire sans compétences particulières, utilisez le site canva.com qui est gratuit et permet de faire ce genre de choses. Cela favorisera le partage (puisque c’est à la mode en ce moment) et votre page sera citée systématiquement. Attention cependant de ne pas trop en faire, et de se retrouver avec une audience nouvelle qui ne cible que ce genre de publications, au risque de dénaturer un peu le but de notre fanpage ! 20. Proposez des offres exclusives pour les fansParce que l’engagement est important, favorisez vos fans en leur proposant des offres intéressantes. Cela boostera l’intérêt de votre page aux yeux de vos prospects 21. Créez ou annoncez vos évènementsSi vous participez à un salon, un séminaire ou que vous organisez l’anniversaire de la société, un apéritif ou une porte ouverte, créez un événement pour ça via votre page Facebook. 22. Montrez les coulisses de votre entreprisePour fidéliser et engager vos fans, présentez de temps en temps les coulisses de votre entreprise : le fonctionnement, le traitement des commandes, vos salaries en train de travailler, etc. Cela favorisera la proximité. Attention à ne pas donner trop d’informations non plus, au risque de générer d’autres problèmes plus… réels, comme un cambriolage par exemple de votre entrepôt car vous présentiez les stocks du dernier iPhone en rupture de stock… 23. Mettez-vous à la place d’un internauteAvant de vous lancer dans l’animation de votre page Facebook, mettez-vous à la place d’un internaute : suivez votre page, mais suivez également les concurrents et d’autres pages dans le même domaine et dans le même secteur géographique pour suivre la tendance. 24. Consultez vos statistiques régulièrementFacebook nous propose des statistiques intéressantes sur notre page, nos contenus et l’engagement réalisé. Suivez cela de près pour comprendre de mieux en mieux votre audience et pour pouvoir leur proposer des contenus plus efficaces. 25. L’humain avant tout !Soyez humain et partagez votre émotion, cela boostera l’aspect humain de votre entreprise (peu importe la taille de l’entreprise) et permettra un meilleur engagement de votre audience. Partagez des messages positifs, en y mettant de la bonne humeur et de la joie pour favoriser le partage de vos contenus (exemple "On est enfin vendredi, plus que quelques heures et c’est le week-end !") 26. Les évolutions de FacebookFacebook évolue tous les jours, par de petites modifications ou par de nouvelles fonctionnalités. Pensez à réaliser une veille de temps en temps afin de profiter des dernières nouveautés. 27. Une planification des publicationsPour vous aider dans l’animation de votre page, constituez un planning avec des actions bien précises (ex : le lundi un conseil technique, le mardi une mise en avant d’un produit, le mercredi on parle de l’entreprise, etc…) et essayez de vous y tenir. Si vous avez plusieurs idées le même jour, gardez les précieusement pour les semaines suivantes. 28. Taguez vos fansDans les commentaires, vos publications et évènements, taguez systématiquement vos interlocuteurs ou fans, ils auront alors une notification à ce sujet et donc une meilleure visibilité de votre activité sur Facebook. 29. Un discours unique sur FacebookParce que tous les réseaux sociaux ont leurs propres systèmes de fonctionnement et leurs propres logiques, il est impératif que votre contenu soit unique, par sa forme et le ton employé, sur Facebook. Retrouver le même contenu sur Facebook, Twitter et d’autres réseaux sociaux ne fera que perdre l’internaute. Votre ligne éditoriale doit être différente d’un réseau social à un autre. 30. Accueillez les nouveaux fans et fidélisez immédiatementLorsque vous gagnez de nouveaux fans, n’hésitez pas à les inclure dans vos publications : citez les dans une de vos publications (du type bienvenue à Marie, Simone et François par exemple). N’en faites pas trop non plus, si vous avez gagnez 100 j’aime dans la semaine, ne les listez pas, ça sera horrible et désengagera beaucoup de monde ! 31. Formez-vous en entrepriseParce que Facebook évolue sans arrêt, et que vous ne faites pas ça toute la journée, profitez de formations professionnelles autour de Facebook et de la rédaction web afin d’être plus efficace dans vos publications. Une formation graphique sur Photoshop ou une formation Gimp par exemple boostera votre image de marque en ayant une ligne graphique unique pour tous vos contenus. Conclusion Votre page Facebook doit être vu comme un nouveau moyen de prospecter et de fidéliser votre audience. Cela prend du temps, certes, mais le retour peut être très positif sur le long terme. Pourquoi les plus grosses marques sont hyper actives sur les réseaux sociaux sinon ? Il faudra être patient et ne pas se décourager pour récolter un engagement important. Mais c’est aujourd’hui une stratégie d’entreprise indispensable qu’il faut maitriser. Vous n’avez pas le temps de le faire vous-même ? N’hésitez pas à me contacter pour l’animation de vos pages Facebook. Je pilote le contenu de votre page et l’interactivité avec vos fans à votre place. Consultez-moi pour connaître les différentes offres et pouvoir mettre cela en place rapidement et de manière efficace. D'ailleurs, au passage, venez-voir ma page PixelCréation sur Facebook ! ... Sun, 18 Sep 2016 00:03:13 GMT Jacques Danilo http://www.pixelcrea.com/blog/content-spinning/ http://www.pixelcrea.com/blog/content-spinning/ Entre SEO et NSEO, le content spinning est une technique utile pour la création de multiple textes à la volée. Très utile pour la création de backlinks qualifiants, cette technique, à la limite du négatif SEO, nous permet de gagner un temps très important lors de la sousmission à des annuaires et évite ainsi le duplicate content (chose que Google déteste)...  Le content spinning Utile pour le SEO, et notamment la rédaction de contenu hors site (soumission à des annuaires par exemple), le content spinning est une technique de création de textes multiples basé sur un seul texte. En écrivant un texte, on défini les autres possibilité afin de former une phrase. Entre l’écrit et la logique mathématique, cette technique de rédaction de texte permet de générer un grand nombre de textes facilement. Les différentes valeurs de textes produisent alors un nombre incalculable de textes possibles…  Principe de fonctionnement Imaginons que j’ai besoin de créer du contenu pour 50 annuaires, mais je n’ai pas le temps (ni l’envie) de rédiger 50 textes différents pour la description de mon site. La technique du content spinning pourrait me servir. Voilà par exemple 2 phrases que j’aimerai inscrire dans mon texte : Je suis graphiste freelance en sous-traitance pour des agences de communication Je suis webdesigner en collaboration pour des agences publicitaires On peut remarquer que la structure est la même dans les 2 phrases : Je suis (quelque chose) en (fonction) pour des (clients) A la place de quelque chose, fonction et clients, je vais créer une sorte de fonction logique textuelle pour préciser les valeurs, comme par exemple : Je suis {graphiste freelance|webdesigner} en {sous-traitance|collaboration} pour des {agences de communication|agences publicitaires} Ca y est, nous faisons du content spinning, c’est à dire que nous définissons plusieurs valeurs possibles dans un texte, ce qui permettra de faire autant de phrases qu’il y a de possibilités. Dans l’exemple ci-dessus, comme nous avons 3 blocs de 2 valeurs, nous allons avoir 8 possibilités de textes (2 x 2 x 2 = 8). Je viens donc de créer 8 phrases différentes en un rien de temps. Magique non ?   Pour rependre un exemple différent, imaginons la phrase structurée suivante : La {house|musique electronique|techno} est {assourdissante|trop bruyante} Cette structure me donnera 6 possibilités : La house est assourdissante La house est trop bruyante La musique électronique est assourdissante La musique électronique est trop bruyante La techno est assourdissante La techno est trop bruyante   Dans les solutions de content spinning évolués, il est même possible de rajouter de temps en temps certains bouts de phrase facultatifs comme par exemple : Merci {|beaucoup} pour votre {action|soutien} Le terme beaucoup pourra être alors utilisé de temps en temps. Mise en place du content spinning Pour utiliser cette technique, il existe des logiciels (principalement sur PC) mais il existe des solutions de content spinning en ligne, qui est plus simple à utiliser. Il existe quelques solutions gratuites, notamment l’outil tout simple de InfoWebMaster : http://www.infowebmaster.fr/outils/content-spinning.php L’outil est simple, et permet de générer facilement un certain nombre de contenus. Les avantages du content spinning - Un gain de temps important : la création de la matrice est importante, mais le temps de rédaction pure est réduit à la matrice uniquement, les variations étants calculées… - Un moyen d’éviter le duplicate content lors de la soumission à des annuaires, blogs, etc… lors de la recherche de backlinks - Un travail intéressant sur le texte et sa structure : en travaillant son texte pour le content spinning, on relève souvent un gros manque en terme de mots clefs pour le référencement. Cela permet alors de se poser les bonnes questions ! Les inconvénients liés au content spinning - Le duplicate content : si vous écrivez un texte avec peu de possibilités, la majeure partie de votre texte sera ressemblante, et apportera du négative SEO auprès de Google en créant du duplicate content. - Une structure de texte mal-pensée : A force de vouloir faire trop de remplacement de contenus, on oublie le coté naturel d’une rédaction de texte. Du coup le texte ressemble à une injection de mots-clefs sans réel sens à la phrase, et dénature grandement la qualité de la rédaction. - Une technique non-viable dans le temps : Même si pour l’instant cette technique fait ses preuves pour le référencement naturel de nos sites Internet, les solutions de création de contenus à la volée comme le content spinning sont exactement ce que Google déteste le plus, c’est à dire un contenu non naturel, écrit plus par une machine que par un humain… Google a pilonné (le mot est faible…) les comparateurs ces dernières années justement pour éviter les farm-links, ces sites qui ne créent aucun contenu propre, et qui se basent sur du contenu existant (ex : les flux de produits pour les comparateurs) afin d’avoir un site Google-friendly. Cette technique n’a fonctionné qu’un temps et aujourd’hui peu de comparateurs peuvent se vanter d’avoir passé la mise à jour de Google sans encombres. Aujourd’hui le duplicate content se base sur les mots plus que sur la structure, mais il est fort à parier que Google orientera ses prochaines mises à jours dans ce sens, puisque le content spinning est une technique qui permet un changement des mots, mais en gardant une structure identique. Attention donc à ne pas en abuser !... Mon, 18 Jul 2016 15:46:05 GMT Jacques Danilo http://www.pixelcrea.com/blog/verifier-themes-wordpress/ http://www.pixelcrea.com/blog/verifier-themes-wordpress/ Avant de partir tête baissée sur le thème coup de cœur vu sur une plateforme d’achat (ThemeForest, Elegant Themes, …) sous prétexte que le design proposé colle parfaitement à votre image de marque, il est impératif de vérifier certains points importants sur l’utilisation que vous allez en faire. Que le thème Wordpress soit payant ou gratuit, vous devez vous poser les bonnes questions. Comme je le dis souvent en formation (en comparant le site avec un magasin physique) : Avoir une belle enseigne est très bien, mais si c’est pour être au fond d’une impasse sans passage, votre magasin physique ne sert à rien. Dans l’univers du virtuel c’est exactement la même chose : D’un coté le graphisme, de l’autre l’aspect technique du site, de l’hébergement, et son potentiel en référencement Google. Voici donc une liste des points à vérifier avant de sortir la carte bancaire (dans le cadre d’un thème payant pour Wordpress) pour ne pas gâcher votre investissement : 1. Les gabarits disponibles Sur quasiment toutes les plateformes d’achat de thèmes Wordpress, vous avez la possibilité de tester le rendu du thème à travers une démonstration en ligne. Prenez le temps qu’il faut pour découvrir tous les gabarits possibles et ses options : la page d’accueil, la page article, page, ainsi que les différents formats d’articles et/ou de pages. C’est ce que l’on appelle les custom post type, ces options présentes lors de la création d’un contenu pour le spécifier en tant que texte, gallerie photo, présentation d’une vidéo ou d’autres formats encore. Regardez et identifiez ce dont vous avez besoin. Prenez le temps aussi pour découvrir la présentation des widgets utilisés sur les gabarits de pages. La démonstration en ligne du thème vous permettra déjà d’identifier ce qui va et ce qui ne va pas pour votre utilisation. 2. Le responsive design Bien qu’aujourd’hui on ne trouve presque que des thèmes responsives, il faut quand même s’en assurer, d’autant que Google a annoncé qu’il prendrait de plus en plus en compte l’adaptabilité des sites sur les plateformes mobiles (smartphones et tablettes). Pour le vérifier facilement, réduisez la largeur de la fenêtre de votre navigateur préféré (oubliez Internet Explorer svp, c’est le diable absolu – préférez Chrome ou FireFox). En bougeant la largeur de la fenêtre, le site doit absolument s’adapter, sans vous proposer un ascenseur horizontal pour voir du contenu caché à gauche ou à droite. Si il est responsive, déjà c’est bien. Mais tant que vous êtes à jouer avec la largeur du navigateur, regardez comment le thème réagi : en version smartphones (inférieur à 500 pixels de larges) et en version tablettes (largeur comprise entre 500 et 1000 pixels), est-ce que la présentation vous plait également ? Sachez que modifier un thème dans sa version réduite (responsive design) peut-être assez compliquée, surtout quand on ne maîtrise pas bien les CSS, voir le framework utilisé (bootstrap, skeleton, fundation, knacss ^^). 3. La sémantique des pages Lorsque l’on parle de sémantique, on parle de la façon dont la page a été codée pour l’affichage. En HTML, il existe pas mal de balises prévues pour la structure du document, commes les balises h1, h2, h3, etc. qui définissent la hiérarchie et la structure de votre contenu. En plus de ces balises typées texte, il en existe d’autre pour définir des zones particulières dans votre page, comme les balises header, footer, article et aside. Ces balises sont interprétées par Google pour comprendre plus facilement votre contenu, et donc, par conséquent, permettre une meilleure compréhension et une prise en compte plus rapide. Google est friand des structures de pages, mais il faut s’assurer que le thème réponde bien à cette demande. Théoriquement, le titre de votre page (ou article) doit être par exemple utilisé dans une balise h1. Il ne doit d’ailleurs n’avoir qu’une seule balise h1 dans la page (si vous recherchez dans le code source h1 vous devriez en avoir 2, la balise ouvrante et la balise fermante, avec le titre au milieu ! Regardez bien la structure du code, car même si le gros de la sémantique sera à créer dans l’éditeur de texte de l’administration Wordpress (pages ou articles), le reste compte aussi. 4. Le support technique associé Lorsque vous achetez un thème, vous avez normalement le droit à un support technique derrière, géré le plus souvent par le développeur du thème directement. Il faut alors s’assurer de la langue employée par le développeur (si le développeur ne parle que russe les échanges seront compliqués je pense). Vérifiez-bien aussi que le support dispose d’un avis favorable, par son temps de réponse ou la qualité des propos échangés. Attention, un support technique n’est qu’un support technique lié au thème, toute question du genre « Je n’arrive pas à ajouter mon image » ne donnera pas de réponses de la part du support technique. Le support est lié au développement, la conformité pour un plugin particulier ou un bug survenu lors de la dernière mise à jour de Wordpress par exemple. 5. La documentation associée Avec le support technique, la deuxième chose qui ne vous fera pas sentir trop seul face aux problèmes est la documentation associée au thème. Normalement, vous devriez acheter un thème qui inclus un PDF généralement avec des informations importantes sur l’installation du thème, les différents gabarits (post types) employés ou encore les réglages particuliers que vous devrez au besoin apporté à votre Wordpress pour prendre en compte telle ou telle fonction. 6. La maintenance des thèmes Un thème est lié à un CMS, comme Wordpress dans notre cas, mais surtout à une version particulière ou un ensemble de versions de Wordpress. Ce CMS, comme quasiment tous les CMS aujourd’hui, sont avec des mises à jour automatiques, ce qui nous oblige à être extrêmement rigoureux dans l’achat du thème. Il faut regarder quelle version de Wordpress est actuellement utilisée sur le site (cliquez sur le logo Wordpress de votre administration en haut à gauche puis sur A propos pour connaître la version utilisée sur votre site. Regardez ensuite sur le thème qui vous plait pour quelle(s) version(s) il est supposé être compatible avant de l’acheter tête baissée… Autre chose aussi sur la maintenance des thèmes, pensez à regarder de quand date la dernière mise à jour du thème. Un thème qui n’a pas été mis à jour depuis plus d’un an est un pari risqué (que je ne prends jamais). Considérez qu’un thème qui n’a pas été mis à jour depuis 2 ans est obsolète. 7. Les plug-ins livrés avec le thème Un thème peu être lié à l’utilisation de plug-ins pour fonctionner comme dans la démonstration en ligne. Assurez-vous que ces extensions sont incluses dans l’achat du thème, et qu’il n’y a pas de mauvaises surprises. Pour avoir déjà eu le cas, c’est très frustrant de se dire qu’il faut encore rajouter des sous pour avoir les fonctionnalités présentes dans la démonstration du thème… Certaines extensions peuvent avoir un abonnement mensuel ou annuel pour fonctionner. Prenez le temps de vous renseigner sur les plugins proposés. 8. Les traductions/langues disponibles Les thèmes sont le plus souvent disponibles en anglais, ce qui induit alors que, par exemple pour la pagination, vous aurez next au lieu de suivant. Il faudra donc gérer ces traductions. Si la démonstration le propose, passez le thème en français (ou la langue désirée) et faites le tour du thème : les pages, les articles, les commentaires, la pagination, etc. Il existe également quelques plugins et logiciels de traductions qui permettent de prendre la main dessus. Au cas où je fais un rappel mais ne traduisez jamais un terme à l’aide de Google traduction pour votre interface. Il m’arrive très souvent de me retrouver avec des thèmes qui, ayant étés réalisés par des anglais, propose pour le lien retour à la page d’accueil (qui se dit home en anglais) par le mot maison. Merci Google Traduction ! Demandez à votre communauté quelqu’un qui parle couramment la langue souhaitée ou utilisez des services en ligne pour traduire votre contenu. 9. L’ergonomie du thème WordPress N’importe quel site Internet doit être ergonomique. Il doit être simple et fonctionnel pour l’internaute, mais pas seulement. Les moteurs de recherches se penchent également sur l’ergonomie d’un site Internet et mettent dans leurs formules de classement et de positionnement certains critères d’ergonomie. En plus d’un site qui vous plaise graphiquement, l’ergonomie d’un site doit être la meilleure possible pour simplifier et favoriser l’expérience utilisateur. Regardez la navigation, le menu principal, la pagination, les liens (aspects, couleurs, différenciation par rapport au contenu dit normal), les titres, les jeux de couleurs. Une des nombreuses choses à vérifier sur l’ergonomie d’une page web est d’en faire un screenshot et de le passer en noir et blanc. Cela mettra en avant le contraste entre le contenu et l’interface. Si vous arrivez à tout lire facilement, c’est que le contraste employé est bon. 10. Les possibilités avancées Lorsque je recherche un thème pour un projet, je fais d’abord le point sur toutes les fonctionnalités nécessaires. Je regarde alors le nombre de téléchargement d’un thème, car plus il est téléchargé (donc acheté), plus support technique a été sollicité, et donc, théoriquement, le thème subit de nombreuses mises à jour. Qui dit thème réputé dit également une communauté gravitant autour de ce thème. Je recherche donc sur des blogs et forums si ce que j’ai besoin est possible sur le thème. Un exemple de la semaine dernière, j’avais un besoin en multi-langue sur un thème assez connu. Pour vérifier que le plug-ins que j’utilise pour la gestion des langues du front-office fonctionne bien, j’ai retrouvé un assez vieux message sur un forum qui m’indiquait que depuis 2014 le thème gérait parfaitement le multi-langue avec ce plug-ins. Pensez à faire le point sur les fonctionnalités avancées que vous souhaitez mettre en place avant de choisir votre thème WordPress. Cela vous évitera quelques grosses déceptions et d’exploser votre clavier sur votre écran parce que c’est trop nul personne ne nous l’avait dit avant ! N’est ce pas Thomas ? #privatejoke ;)   En conclusion, l’achat d’un thème wordpress demande de bien vérifier certains points pour ne pas se retrouver devant un mur rapidement. Se jeter dessus en 10 minutes et courir l’acheter ressemble plus à ce que l’on voit à la TV pendant le BlackFriday non ? Pour éviter toute déception, prenez du temps pour analyser vos besoins avant de faire votre choix. Sachez aussi que techniquement, un thème wordpress est un ensemble de codes et de fonctions autour du HTML, du CSS, du PHP et d’autres langages ou technologies web. Pour modifier un thème, n’hésitez pas à faire appel à un professionnel au risque de rendre encore plus mauvais le thème acheté, voir en faisant du négative SEO.... Mon, 27 Jun 2016 12:36:17 GMT Jacques Danilo http://www.pixelcrea.com/blog/wordpress-infographie/ http://www.pixelcrea.com/blog/wordpress-infographie/ WordPress est le CMS le plus utilisé dans le monde, avec près de 25% des sites web dans le monde. Dans tous les domaines, à tout niveau, WordPress est l'outil indispensable pour concevoir son site rapidement et sans avoir a écrire du code, gérer une base de donnée ou encore faire un développement personnalisé. Je vous ai choisi une sélection de 5 infographies sur Wordpress pour comprendre pourquoi l'utiliser, comment l'installer ou encore les plug-ins indispensables à utiliser pour votre site wordpress. Pourquoi utiliser WordPress ? Réalisée par ResonanceCommunication, cette très belle infographie nous présente pourquoi choisir WordPress aujourd'hui pour la création d'un site Internet, que ce soit pour sa présence aujourd'hui (25% des sites dans le monde, gage de qualité) ou par la présence de nombreuses extensions (plugins) ou encore par le nombre de thèmes disponibles aujourd'hui sur la toile. Comment utiliser le CMS Wordpress ? Une petite suite de questions liées à l'utilisation de WordPress, crée par Simply Business, permet de nous interroger sur l'utilisation que l'on souhaite en faire. Très bon point de démarrage. Installer WordPress en infographie Epicerie du Blog nous propose une infographie sur l'installation de WordPress avec tous les détails qu'il faut. L'installation n'est pas compliquée en soit mais cette infographie sur l'installation de Wordpress permet, étape par étape, de bien installer le CMS. Les plug-ins indispensables Une infographie qui reprend 30 des meilleurs plugins pour WordPress, en anglais.  Anatomie d'un thème wordpress Pour aller plus loin dans la compréhension de l'outil WordPress, voici une infographie sur l'anatomie d'un thème WordPress. Très utile lorsqu'il s'agit de faire des modifications sur un thème acheté. ... Fri, 24 Jun 2016 12:42:09 GMT Jacques Danilo http://www.pixelcrea.com/blog/test-mobile-friendly/ http://www.pixelcrea.com/blog/test-mobile-friendly/ Un tout nouvel outil SEO pour la compatibilité mobile, le mobile-friendly, vient de sortir sur la plateforme Think With Google. Il s'agit d'une version remasterisée de PageSpeed Insights avec une interface franchement sympatique. L'utilité de cet outil nous permet de vérifier si notre site est mobile-friendly, paramêtre de l'algorithme de Google renforcé en 2016 (malgré la première annonce que Google avait faite en 2015 mais qui n'impliquait que très peu de changements l'année dernière, et seulement sur des SERPs concurrentiels). Le mobile-friendly c'est quoi ? Aujourd'hui, un site Internet peut être consulté depuis un ordinateur, une tablette, ou un smartphone. Depuis 2015, les connexions sur les sites Internet depuis les smartphones ont dépassées les connexions réalisés sur ordinateur. Mais ça c'est la moyenne mondiale, tous canaux marketings contenus (newsletters mails, réseaux sociaux, campagnes publicitaires). Etre mobile-friendly, c'est proposer un site adaptable en fonction du support : le responsive design. A l'heure de la démocratisation des appareils nomades (tablettes et smartphones), votre site doit absolument être lisible correctement sur ces plateformes. Il l'est peut-être déjà, mais est-ce que le responsive est bien fait ? Le nouvel outil mobile-friendly est là pour vous indiquer quels sont les points bloquants dans votre visibilité mobile. Vérifier si son site est responsible Sur la page d'accueil du test, il faut renseigner l'adresse du site a analyser et cliquer sur le bouton "test now". L'analyse ne prend que quelques secondes et un petit visuel nous montre la progression. En général l'analyse du site ne prend pas plus d'une minute. Une fois l'analyse terminée le site nous affiche des résultats sous forme de 3 analyses différentes : - le fait d'être mobile-friendly (les bonnes pratiques pour le responsive) : note sur 100 - la vitesse sur mobile : note sur 100 - la vitesse sur ordinateur : note sur 100 Un code couleur permet tout de suite de vérifier si on est bon, moyen ou mauvais dans cette première analyse de notre site Internet. Ici dans l'exemple ci-dessus, le site testé a une note de 96/100 pour son adaptabilité mobile (ce qui est très bien), une note de 79/100 pour sa rapiditié mobile (peut-être améliorée), et une note très moyenne, voir faible, de 51/100 pour sa rapidité sur ordinateur. En descendant dans la page, nous pouvons avoir des détails sur l'analyse réalisée et voir les points bloquants aux yeux de Google : L'analyse Mobile-Friendly La première partie de l'analyse concerne la capacité à être bien affiché sur les tablettes et smartphones. On observe à coté de la note un lien "view the details" pour voir le détail de cette analyse. En cliquant dessus nous découvrons les différents points de cette analyse : Est ce que le site est responsive ? Est-ce que les tailles d'écriture sont lisibles sur un smartphone (petits écrans) ? Si les boutons/liens ne sont pas trop petits pour une navigation facile. Dans cet exemple, tout est bon (résolution du site, adaptabilité de l'écriture, ...) mais visiblement certains liens sont trop petits pour une navigation aisée. C'est le premier point de cette analyse et est annoncé en orange : C'est une alerte mais ce n'est pas un élément décisif. Il peut être corrigé ! L'analyse de rapidité mobile La rapiditié sur mobile permet de vérifier si le temps de chargement est adapté à la navigation sur mobiles. Les points analysés sont la réduction des ressources html, javascripts et css, un temps de réponse-serveur minimale, une priorité au contenu visible. Lors de l'analyse, les points bloquants qui font perdre un nombre de points importants sont : le blocage javascript et/ou CSS du contenu sous la ligne de flottaison (qui ramène l'erreur importante - la croix rouge) ains que 2 alertes pour la mise en cache navigateur et l'optimisation des images. L'analyse de rapidité sur ordinateurs C'est là que tout se complique pour moi. Avec une note de 51/100, j'ai tout juste la moyenne. Le risque de redoublement n'est pas loin derrière moi ;) Dans les points négatifs, la mise en cache navigateur ainsi que le blocage CSS/JS du contenu sous la ligne de flottaison posent problème, mais surtout, le site m'annonce un problème d'optimisation des images, chose qui doit me faire perdre beaucoup de points visiblement puisqu'en comparant avec la rapidité mobile, c'est sur ce point que je passerai d'environ 80% à 50%. Mais c'est chose normale, car pour les 2 versions (mobiles et desktop), j'utilise les mêmes images qui s'adaptent en fonction de la largeur d'écran. J'ai donc peux d'images affichées en 100% (hauteur/largeur) mais toujours un ratio pour être sur que l'image remplira bien la largeur, peut importe la résolution du navigateur affichant la page. Que faire avec ces résultats ? Maintenant qu'on a découvert nos erreurs et alertes, il faut donc les réparer. Pour cela, suivez les directives, recherchez sur Google les différentes solutions envisagées par d'autres webmasters, ou contactez la personne qui a réalisé votre site Internet pour faire un audit sur sa capacité mobile. Google avait annoncé en 2015 la prise en compte du mobile-friendly, mais n'avait quasiment rien produit en changement de positionnement Google, à l'exception de certains mots-clefs très concurentiel comme "immobilier" où les acteurs du marchés se sont vu gagner ou perdre qu'une place ou deux. Un changement minime donc pour 2015. Mais en 2016, Google a réaffirmé son optique de faire un site compatible parfaitement pour tous les supports et on attend donc les prochaines mises à jour Google pour voir des changements de positionnement plus conséquents. Personnellement, je ne préconise pas d'être à 100/100 pour tous les supports, car cela inclut bien souvent une modification lourde du site, voir de votre image de marque. Il faut simplement identifier les problèmes que vous pouvez résoudre facilement, qui n'engendre pas de coûts trop importants pour déjà se mettre à niveaux (80% dans les 3 analyses serait déjà un beau score) N'attendez plus pour tester votre site : Analyser mon site avec Think with Google        ... Fri, 03 Jun 2016 16:00:51 GMT Jacques Danilo http://www.pixelcrea.com/blog/nuanciers-couleurs-photos/ http://www.pixelcrea.com/blog/nuanciers-couleurs-photos/ Une sélection de très beaux nuanciers de couleurs basés sur des photos pour votre inspiration graphique. Partant sur la base de 4 couleurs qui compose chaque photo présentée, voici mes propositions de couleurs pouvant être en harmonie. Je reviendrai dans un autre article sur la signification des couleurs ou comment mixer avec plusieurs couleurs. Mais là, aujourd'hui, je vous propose une sélection de nuanciers, et pas qu'un peu, plus de 35 nuanciers gratuits basés sur des photos. Par ailleurs, les photos sélectionnées sont toutes gratuites et sont issues du site de pixabay.com. C'est ce que l'on appelle des "color scheme", des nuanciers que les américains surtout adorent, il n'y a qu'à voir les pinterests ou les blog de graphistes freelances américains pour s'en rendre compte. Voilà pourquoi les titres des images sont en anglais, pour répondre à la demande du plus grand nombre :) Nuancier de couleurs Apple Juice Nuancier aux couleurs de l'automne La birmanie en couleur Un Nuancier autour du pain et de la cuisine Le chat en prison Les couleurs du plateau à fromage Le bois du jeu d'échec Nuancier de couleurs : Fraises et chocolats Couleur... Café... Que j'aime ta couleur... café En pleine préparation à la cuisine Le feu et les braises Les couleurs du printemps en fleur Un tour en mongolfière ? Un dessert haut en couleurs Les nuances colorimétriques de mon jardin Le portrait dans les bois Les couleurs de la moto de mes rêves La vallée des ombres Des couleurs d'un autre monde En arrivant sur l'île Les couleurs d'un jet ski La douceur des couleurs Les couleurs du luxe Couleurs du maquillage Les couleurs du matin en pleine montagne Couleurs des pistes moto Le nuancier jaune : l'avion old school/vintage Les magnifiques paysages américains Nuancier de couleurs d'argent - le dollar Le pop-corn haut en couleurs La salade de crevettes Couleurs marines Les pâtes fraiches La pause Thé Un toast pour fêter cette sélection de nuanciers de couleurs ?   Alors ? Cette sélection de nuanciers vous a plu ? Quel est votre nuancier favori ? Pour les sauvegarder, soit vous ajouter cet article dans vos favoris, soit en les partageant à l'aide des icones qui sont juste en dessous, ou vous pouvez enregistrer l'image en faisant un clic-droit sur la (ou les) photo(s) souhaité(s).... Thu, 02 Jun 2016 17:57:08 GMT Jacques Danilo http://www.pixelcrea.com/blog/pre-styles-css/ http://www.pixelcrea.com/blog/pre-styles-css/ Si vous avez un blog parlant de développement ou de code, vous utilisez certainement la balise html pre, qui permet de créer un texte dit pré-formaté. Cette balise va permettre de mettre du code en exemple, pour illustrer une technique ou une fonction liée au code. Evidemment, cette balise ne se limite pas au HTML et au CSS, vous pourrez l'utiliser pour n'importe quel langage de programmation, qu'il soit de technologie web ou non. Balise HTML pre ? code ? ou les deux ? La balise pre signifie littéralement "texte pré-formaté", sans dire autre chose sur le texte à l'intérieur de cette balise. La balise code, quant à elle, signifie que le texte à l'intérieur de cette balise sera un extrait de code. Cela tombe sous le sens, sémantiquement la balise code semble donc plus appropriée pour l'affichage d'un extrait de code, peu importe le language utilisé. Mais pour une bonne pratique HTML/CSS, il est recommandé d'utiliser la balise code à l'intérieur de la balise pre. D'un point de vue sémantique, cela permet aux moteurs de recherche de comprendre que ce texte est un contenu pré-formaté et qu'il s'agit d'un code/langage de programmation. Et c'est logique : un extrait de code est bien un texte pré-formaté. Il faut donc mettre d'abord la balise pre, puis à l'intérieur la balise code. <pre><code>Texte à insérer</code></pre> Quelle typo utiliser pour la balise pre ? De manière générale, la typo utilisée pour codé est de la famille des "monospace" (pas le modèle de voiture hein!). Dans les types de typos possibles, les 2 grandes familles sont avec serif ou sans serif, qui signifie avec empattement (comme le Times New Roman), ou sans empattement (Comme l'Arial). La différence entre ces 2 familles sont l'aspect angulaire/droit des barres qui composent chaque caractère. Avec la lettre L par exemple, si la typo n'est faite qu'avec 2 droites, c'est une typo sans empattement, alors qu'avec empattement le haut du L ainsi que l'extrémité droite (la droite horizontale) auraient de petites queues. C'est ce que l'on appelle l'empattement. En plus de ces familles traditionnelles, il en existe beaucoup d'autre, et notamment la famille "monospace" qui nous concerne ici. La particularité de cette famille est que tous les caractères prennent la même largeur, aussi bien une majuscule comme le Z que le i ou le point (.). L'avantage est pour la lecture du code qui est alors grandement facilité. Dans un article de 2009 écrit par Mickael Tuck, il est expliqué comment utiliser les familles de polices en CSS et explique comment bien préparer un groupe de typos pour l'utilisation web. Voici un exemple donné sur l'utilisation des familles "monospace" : font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; Bien évidemment, vous pouvez réadapter cette famille de polices en fonction de vos besoins ou contraintes. L'utilisation de Google Font peut être également un atout. Retour à la ligne ou non ? C'est plus une préférence personnelle, mais moi personnellement je laisse tout sur la même ligne, et je bloque mes éditeurs de code (TextMate, TextWrangler, NotePad++, etc...) pour qu'ils ne fassent pas de retour à la ligne en cas de dépassement de fenêtre. Du coup j'ai un scroll horizontal mais cela me permet de m'y retrouver plus facilement. Mais cela reste du confort visuel et un choix purement personnel. Lorsque vous utilisez la balise pre, vous allez pouvoir également définir ce paramétrage en CSS : pre { white-space:pre-wrap;} En refusant le retour à la ligne (donc de risquer le dépassement du bloc en largeur) il vous faudra préciser au navigateur d'ajouter un scroll automatique sur l'axe des x (en mode horizontal je le précise) avec l'instruction suivante : overflow-x:auto; Un ascenceur viendra se positionner en bas du bloc pre et s'affichera si le code dépasse en largeur. Facile pour l'instant non ? A l'inverse, si vous souhaitez que le bloc s'adapte en largeur à votre contenu, il faudra remplacer l'instruction précédente par : width:min-content; Cette instruction indique que la largeur (width) prendra comme valeur la largeur minimale du contenu. Bien sur, vous pouvez jouer avec les pseudo-classes CSS hover et focus par exemple pour l'ouvrir complètement lorsque vous cliquez dessus ou si vous survoler ce bloc, en passant par ceci : pre:hover, pre:focus {  width: min-content;} La coloration syntaxique Malheureusement, le HTML et le CSS ne permettent pas l'ajout de couleurs pour chaque terme en fonction de l'utilisation (variable, fonction, instruction, objet, ...). Si vous souhaitez rajouter de la couleur à votre code, vous pouvez utiliser le javascript et notamment Prism.js qui permet une colorisation synthaxique avec l'utilisation de thèmes. Prism.js est léger, n'est pas dépendant d'une librairie (comme MooTools ou jQuery) et est personnalisable très facilement.  Les tabulations Pour gérer les tabulations, qui vont vous permettre d'aérer votre code, l'instruction CSS est la suivante : pre { tab-width: 4;} Et comme vous l'aurez compris, en utilisant du monospace en CSS, la valeur de l'attribut tab-width est l'écart en nombre de caractères par rapport à la position verticale d'origine. C'est simple ! (en faisant référence à une fameuse marque de voiture là pour le coup). Les autres options La balise pre fonctionne après comme le reste des balises, on peut y ajouter un fond, des bordures, des espaces intérieurs (padding) et des espaces extérieurs (margin) - mais ça vous le saviez déjà ! Pour ma part, sur ce blog, j'ai personnalisé les balises pre et code avec un display block pour qu'ils prennent toute la largeur, avec une couleur de fond et une couleur de typo, comme ceci : code { display: block; padding: 12px; color: #F60; background:#f5f5f5;} Personnellement, je n'utilise pas (encore ?) la coloration synthaxique pour le code, puisque j'en utilise qu'un petit peu dans mes articles. Mais si un jour je dois faire des articles plus complets avec des extraits plus importants, je n'hésiterai pas à utiliser Prism.js ou un autre script de coloration. J'espère que cet article vous aidera dans l'utilisation des CSS et du HTML pour la balise pre. Cet article est une version traduite et allégée de l'excellent article de Chris Coyier sur MediaTemple.net... Wed, 01 Jun 2016 13:17:13 GMT Jacques Danilo http://www.pixelcrea.com/blog/trouvailles-du-web-17/ http://www.pixelcrea.com/blog/trouvailles-du-web-17/ Voilà le 17ème épisode des Trouvailles du web, avec au menu de ce nouvel opus du référencement avec KillDuplicate, de la ressource graphique (et gratuite) avec EpicPXLS, des bookmarklets pour le référencement et la surveillance de sites Internet par WebRankInfo, un plugin pour Photoshop CC des plus intéressants pour les typos, et encore un peu de référencement avec un bloqueur de spam pour Analytics. Un beau programme donc pour ce 17ème épisode des Trouvailles du Web légèrement orienté SEO et référencement. Un plugin pour Photoshop CC : Fontea Fontea est un plugin pour Photoshop CC (à partir de Photoshop 2014/2015) permettant l'utilisation à la volée des typos proposées par Google Font. Avec plus de 700 typos gratuites et utilisables facilement, Fontea est un indispensable à avoir pour tous ceux qui créent des maquettes ou montages sur Photoshop. A avoir absolument ! Des ressources gratuites pour un design moderne avec EpicPXLS EpicPXLS est un nouveau site proposant beaucoup de ressources graphiques (totalement gratuites) comme des icones, des mockups, des widgets, des illustrations ou des UI kits de très bonnes qualités. La sélection est belle et permet facilement de personnaliser ses maquettes graphiques. Protégez vos contenus en limitant le duplicate content grâce à KillDuplicate Si vous cherchez à contrôler votre contenu face au redoutable duplicate content de Google, afin de ne pas être pénaliser par le moteur de recherche, KillDuplicate est fait pour vous : il permet de surveiller votre contenu par rapport à ce qu'il y a en ligne pour limiter au mieux les pénalités Google. L'outil permet d'identifier quels sites dupliquent vos contenus et proposent différentes solutions pour palier aux problèmes rencontrés. Une vidéo de 13 minutes vous explique tout le fonctionnement et les avantages d'utiliser ce très bel outil de référencement : Vidéo de KillDuplicate. Des bookmarklets pour le référencement et la surveillance de sites Un bookmarklet est un lien à mettre dans ses favoris (comme le favori vers votre blog préféré) mais d'un format un peu spécial : il s'agit d'un lien javascript qui lance une fonction pour par exemple afficher le nombre de liens sur la page, ou le nombre de partages sur les réseaux sociaux. Plutôt que d'utiliser un site particulier qui pourrait faire ce travail, pourquoi ne pas l'avoir directement dans nos favoris. Extrèmement pratique pour surveiller son site comme celui des concurrents ! WebRankInfo vous propose une belle sélection des bookmarklets les plus utilisés aujourd'hui. Un régal ! Pour une analyse via Google Analytics plus précise Pour analyser le traffic de notre site, il nous faut des statistiques basées sur la réalité, hors des sites spammeurs viennent surfer sur votre site. Ce ne sont pas des humains, et leur parcours, le temps passé ou les pages visités peuvent vous induire en erreur dans l'analyse des résultats sur Google Analytics. SayStopToSpam permet d'identifier les sites ou serveurs spammeurs pour les supprimer de l'analyse.   Voilà, cet épisode est déjà fini, mais rassurez-vous, un épisode viendra très vite ! Bon surf à vous. Au passage, je tenais à remercier Thomas, Mathilde et Guillaume pour les ressources qu'ils m'ont suggérés. Ils seront cités dans les prochains épisodes des Trouvailles du Web. N'hésitez pas à me proposer vos ressources également par commentaires ou en me contactant via le formulaire de contact.... Sun, 29 May 2016 21:44:46 GMT Jacques Danilo http://www.pixelcrea.com/blog/conseils-reseaux-sociaux/ http://www.pixelcrea.com/blog/conseils-reseaux-sociaux/ Pour bien gérer vos réseaux sociaux, que vous soyez community manager, auto-entrepreneur, indépendant, gérant ou communiquant, il faut suivre quelques règles afin d'augmenter notre visibilité et notre popularité au sein des réseaux sociaux. Il faut tout d'abord comprendre le fonctionnement et la logique/politique employée sur chacun des réseaux sociaux en général, que ce soit pour les comptes entreprises comme pour les comptes personnels, d'abord dans un axe BtoB ou BtoC mais également pour effectuer une veille comportementale des utilisateurs de chaque plateforme. Ensuite, en fonction de votre offre, votre stratégie et de vos moyens (financiers, ressources humaines et temps), certains réseaux sociaux ne répondront peut-être pas à vos besoins ou contraintes. Social Metrics nous a réalisé une superbe infographie sur les réseaux sociaux avec 21 règles/conseils à suivre pour réussir sur les réseaux sociaux : 1. Prenez le temps de communiquer La communication sur les réseaux sociaux demande du temps. Réflechissez bien sur la stratégie à adopter en vous limitant sur le nombre de réseaux sociaux à utiliser pour communiquer. Consacrez-vous du temps pour publier du contenu régulièrement. 2. Apportez de la valeur ajoutée à vos messages Par le ton employé, l'image associée, la présentation de la publication, l'intéractivité que vous y mettez avec des personnes ou des hashtags, apportez une touche originale à vos messages pour avoir de la valeur ajoutée pour booster votre image de marque. 3. Positionnez-vous comme un expert Sans arrogance et prétentions, donnez votre avis et échangez avec votre cible de manière professionnelle, sans douter de vos propos et devenez une référence en la matière. Publiez du contenu de qualité en lien avec votre activité. 4. N'ouvrez pas la bouche pour ne rien dire Si vous n'avez rien à dire d'intéressant, en lien avec votre activité, pour en faire la promotion ou non, alors abstenez-vous ! Oubliez surtout les messages politiques, haineux, violents, ou trop sensibles comme par exemple le racisme, les attentats, le mariage pour tous, les émeutes, les grèves, la religion, ...). Vous devez restez professionnel ! 5. Privilégiez la qualité à la quantité Entre la quantité et la qualité, privilégiez la qualité. Prenez le temps de valoriser votre discours et les informations partagées. 6. Ne soyez pas saoulant Ne vous imposez pas, ne rentrez pas dans des conflits ou des débats stériles. Faites la part des choses entre présence et omniprésence néfaste pour votre image. 7. Evitez le spam L'auto-promotion contante n'est pas attractive, liez de manière intéligente votre promotion avec des partages d'information en lien avec votre activité. 8. Soyez vous-même Soyez vous-même, ne vous donnez un style. Partagez votre propre expérience et votre savoir, et pourquoi pas avec un peu d'humour... 9. Une communication à double sens Les réseaux sociaux vont dans les 2 sens, partagez, diffusez du contenu, mais également entrez en communication avec votre cible en partageant leur contenu ou en commentant leurs publications. Par ce biais vous multiplirez votre visibilité. 10. L'interaction ne donne pas toutes les permissions. Ce n'est pas parce que vous gagnez de nouveaux followers qu'il faut les importuner directement. Laissez leur le temps d'apprécier vos contenus et prenez le temps de construire des relations solides et qualitatives. 11. Vous n'avez pas tous les droits Même si votre réputation augmente et que vous gagnez des followers sur vos réseaux sociaux, ce n'est pas pour autant que vous avez tous les droits. Laissez votre cible tranquille, au risque qu'elle vous fuit 12. Adaptez-vous au jour-le-jour Restez à l'affut de l'actualité liée à votre activité afin de produire des effets de buzz en partageant des articles et des ressources actuelles. En général le premier lien sera celui qui sera le plus partagez, ne perdez donc pas de temps pour vous positionner. 13. Analysez vos efforts Si vos efforts sur les réseaux sociaux semblent inutiles (visites acquises sur votre site, passage de commande sur votre site e-commerce, interactivité sur les réseaux sociaux) c'est que quelque-chose ne fonctionne pas. Prenez donc du temps pour comprendre ce qu'il se passe et faîtes les ajustements appropriés. 14. Vous devez gagner de l'argent Votre présence sur les réseaux sociaux génère de l'engagement (participation de vos followers, visites sur le site, etc...). Théroriquement vos actions de marketing doivent donner des résultats chiffrables. Si ce n'est pas le cas c'est que votre stratégie ne fonctionne pas. Analysez vos efforts pour comprendre d'où vient le problème. 15. Utilisez le multimédia pour être plus visible Profitez du multimédia pour que votre cible puisse plus facilement vous voir : images, vidéos, liens, galeries... Tout est bon pour favoriser votre visibilité. 16. Soyez à l'écoute N'ignorez pas vos fans et followers qui cherchent à communiquer avec vous. Montrez leur de l'interet sans pour autant devenir envahissant. 17. Restez polis Certains fans ou followers ne seront pas toujours polis. Ils pourront être en désaccord avec votre contenu ou votre point de vue, mais dans tous les cas vous devez restez polis et répondre toujours de la meilleure manière qui soit ! 18. Il vous faudra de la patience C'est très rare qu'une stratégie marketing sur les réseaux sociaux donne des résultats immédiatement. Il vous faudra beaucoup de patience pour tirer réellement profit des réseaux sociaux. 19. Ne vous affichez pas partout. Ne rejoignez pas trop de communautés ou groupes sur les différents réseaux sociaux que vous utilisez, cela risquerait de vous faire perdre trop de temps pour un résultat minime. Axez votre stratégie sur quelques groupes uniquement. 20. Les réseaux sociaux et votre blog sont étroitement liés. Vous devez être présent sur des blogs également pour faire le lien entre votre stratégie sur les réseaux sociaux et votre blog. Les plus grands acteurs en marketing social ont un blog. Si vous êtes actifs sur les réseaux sociaux, vous aurez de meilleurs engagements sur votre blog. 21. Amusez-vous Si vous ne prenez pas de plaisir à être sur les réseaux sociaux, alors vous ne ferez pas les choses bien. L'intéraction sociale doit être un réel plaisir pour vous. Votre cible sentira si vous n'êtes pas heureux de le faire (par le ton employé dans vos contenus ou commentaires par exemple) et jouera négativement sur votre image de marque.   ... Fri, 27 May 2016 13:42:20 GMT Jacques Danilo http://www.pixelcrea.com/blog/eviter-spam-emailing/ http://www.pixelcrea.com/blog/eviter-spam-emailing/ Lorsque vous créez une newsletter pour du démarchage commercial ou pour un fidélisation, il y a certaines choses que les filtres anti-spam n'aiment pas. Que ce soit dans le titre ou le contenu de votre mail envoyé en masse, certains mots, certaines expressions, peuvent alerter le filtre anti-spam pour finalement vous placer directement en spam. Sarbacane nous propose une infographie de qualité pour comprendre quelles sont les expressions qui alertent ces contrôles qualités. Voilà comment éviter les pièges pour ne pas tomber pour spam lors de vos campagnes emailing. Sarbacane nous présente 4 domaines qui sont le marketing, les arnaques, la santé et l'argent. Dès que l'on parle d'un de ces domaines, en fonction des mots employés, les filtres auraient tendances à nous envoyer directement dans la catégorie spam. Décryptage ! les emailings liés à la santé Que ce soit pour les remèdes miracles, les médicaments ou tout ce qui touche au sexe et aux drogues, il y a beaucoup de chances pour que votre mail passe en spam directement, surtout si vous utilisez les expressions suivantes : Remèdes miracles : perdre du poids, maigrir, rapidement, kilos en trop, comment maigrir, amincissant, minceur, erection, rides, ronflements, vieillissement, cavitie, sans efforts, performances, ... Médicaments : valium, vicodin, xanax, levitra, prozac, viagra, pharmacie online, médicaments, médecin, cure, docteur, ... Sexe et drogues : rencontres, sexe, célibataire, chaud, herbe, weed, drogues, casino, backjack, jeux d'argent, téléchargement de films, streaming, ... Bon, évidemment, si vous signez vos mails par "Docteur Dupont" vous ne partez pas en spam, mais l'accumulation de ces mots dans vos emailing risqueraient fort de vous amener directement en spam. Utilisez ces termes avec précautions... Le marketing vire au spam Lorsque vous utilisez trop de termes liés au marketing, voir ce que j'appele du sur-marketing, il est évident que votre mail-réputation risquerait d'être sacrément atteinte, surtout pour les expressions d'urgence, de félicitations ou de ventes... Urgence : faites vite, urgent, profitez maintenant, offre limitée, dès maintenant, dès aujourd'hui, n'hésitez plus, appelez maintenant, expire bientôt, ... Félicitations : vous avez gagné, bravo, ouvrez pour découvrir votre cadeau, cliquez pour découvrir notre offre exceptionnelle, gagnant, vous avez été choisi, félicitations, récompense, heureux gagnant, concours, ... Ventes : soldes, augmentez vos ventes, augmentez votre traffic, cliquez-ici, commande, plus de ventes, chiffre d'affaire, acheter, marketing, augmentez, ... Quand le mail a un parfum d'arnaque Si vous utilisez des mots autour de la possiibilité de gagner de l'argent, sans risque, ou que l'offre est incroyable, c'est qu'il y a forcément une arnaque ! Méfiez-vous des termes suivants pour éviter tout risque d'être considéré comme un spammeur : Gagner de l'argent : cash, money, facile, argent, rapide, gagner de l'argent, revenus supplémentaires, bénéfices, millions de dollars/euros, économisez, meilleur prix, profits, gains, votre propre patron, ... Aucun risque : 100% garanti, certifié, sans risque, deal incroyable, bonus, bonne affaire, ca fonctionne, satisfaction garantie, pas d'arnaque, pas de coûts cachés, mot de passe, identité, ... Incroyable : gratuit, 100% gratuit, remboursé, cadeau, appel gratuit, pas de frais, inscription gratuite, essai gratuit, gratuitement, ... Les mails qui parlent d'argent La gratuité, les promotions ou la finance alertent les filtres anti-spam et risquent de classer votre mail dans la mauvaise catégorie. Faites attention lorsque vous utilisez ces termes : Gratuité : gratuit, remboursé, cadeau, pas de frais, inscription gratuite, essai gratuit, essayez gratuitement, ... Promotions : réduction, rabais, meilleur prix, promos, promotions, offre spéciale, comparez les prix, pour seulement, pas cher, abordable, coût, coupon, ... Finance : carte de crédit, carte bancaire, carte bleue, investissement, faillite, revenu, salaire, taux d'interet, assurance, sortir des dettes, remboursement, chèque, débit, hypothèque, paypal, prime, rendement, visa, mastercard, ... Les mots dits de spam en une infographie Les mots de spam, dits spamwords, sont regroupés sur une très belle infographie réalisée par Sarbacane, un des leader du marché des solutions emailing : J'espère que ce résumé vous aura plus. N'hésitez pas à commenter si vous avez d'autres expressions ou conseils au sujet du spam ou de l'envoi de newsletters... Thu, 19 May 2016 12:51:36 GMT Jacques Danilo http://www.pixelcrea.com/blog/prestashop-google-shopping/ http://www.pixelcrea.com/blog/prestashop-google-shopping/ Google Shopping est le comparateur de prix made in Google. Il permet de trouver directement des articles disponibles à l'achat si vous avez lié votre site Prestashop avec le module Google Shopping. Voici un guide d'utilisation de Prestashop lié à l'utilisation de Google Shopping, d'autant plus qu'à partir du 16 mai 2016 les règles vont légèrement changées. A partir du 16 mai 2016, Google change le fonctionnement de la plateforme de shopping en imposant pour tous les produits la présence dans le passage de flux vers Google shopping du fameux GTIN pour chaque produit que vous souhaitez diffuser. Un changement important car si vous n'avez pas renseigner ces informations sur vos fiches produits, ils n'apparaitront plus après le 16 mai (en supposant que ce soit une modification appliquée directement sur le plan mondial). Si ce n'est pas le 16 cela pourrait être dans les jours suivants. Dans tous les cas il vaut mieux être prêt si vous ne voulez pas perdre la visibilité de vos produits sur Google Shopping. Qu'est ce que le GTIN demandé par Google Shopping ?  Le GTIN (pour Global Trade Item Number) est un code article unique et international permettant d'identifier de manière unique votre produit. Cela permet d'avoir un standard international pour répertorier les produits. A partir du 16 mai prochain, Google demandera à ce que vos produits soient donc identifiés, permettant ainsi au moteur de recherche de pouvoir plus facilement regrouper les produits identiques sur la partie Shopping. Il existe plusieurs formats pour le code GTIN : le GTIN-12, le GTIN-13, le GTIN-14 ou le GTIN-8 sont ceux que l'on retrouve le plus souvent. Il s'agit du numéro indiqué sous chaque code barre. Ainsi, grâce à ce chiffrement, on ne peux pas confondre de manière informatique une boite de céréales d'une autre... En Europe (et au Japon), nous utilisons la norme GTIN-13, composée de 13 chiffres, indiquant différentes informations comme le code du pays, le code de l'entreprise, un numéro produit et le dernier chiffre pour la validation du code (bit de contrôle). Où puis-je mettre ce code sur Prestashop ? Le code GTIN obligatoire pour Google shopping se renseigne sur la fiche d'un produit (Administration > Catalogue > Produits > Modifier un produit) en indiquant ce code dans l'onglet informations (le premier) dans la case "code-barres EAN-13 ou JAN" : la norme EAN-13, utilisée pour l'Europe et le Japon, est la norme GTIN-13 pour les pays concernés. Il faut donc remplir avec le chiffrage donné sur le code-barre afin de remplir la nouvelle condition imposée par Google. Pour les produits américains, il faudra remplir le champ UPC et non le champ EAN-13 ou JAN. ... Fri, 15 Apr 2016 12:15:01 GMT Jacques Danilo http://www.pixelcrea.com/blog/trouvailles-du-web-16/ http://www.pixelcrea.com/blog/trouvailles-du-web-16/ Voilà l'épisode 16 des Trouvailles du Web, une série d'articles où je poste un peu en vrac 5 liens que j'ai trouvé interessant lors de ma veille technique et graphique. Au menu de l'épisode 16 des thèmes graphiques pour des sites de CV, de l'emailing responsive avec Foundation for emails, 111 ressources pour votre référencement Google, un site de ressources graphiques pour de l'interface (web, applications mobiles, logiciels, ...) et pour finir une explication sur le phénomène de confiance attribuée par Google. On démarre ? 7 thèmes pour votre CV en ligne Le site Tuts Plus nous propose 7 CVs créatifs en ligne par l'achat de thèmes ou templates pour Wordpress. Ces thèmes graphiques vous permettent d'afficher sous forme de sites Internet votre CV. Idéal quand on souhaite prendre le nom de domaine de son nom et son prénom. Ayez une présence en ligne ! 7 créative Resume Ideas to Stand Out Online Des emails responsives (et compatibles pour tous les lecteurs mails) Foundation, le célèbre framework HTML/CSS, nous propose d'utiliser un framework spécialisé dans l'email responsive et compatible pour tous les lecteurs de mails, aussi bien en ligne qu'en logiciels (comme Outlook ou Thunderbirds). Facile d'utilisation, je reviendrai dessus lors d'un tutoriel dans quelques semaines. Foundation for Emails 111 ressources SEO L'excellent blog de codeur.com nous propose une sélection de 111 ressources à connaître absolument pour notre référencement auprès des différents moteurs de recherche. Que ce soit pour analyser son site, trouver des mots-clés, des outils pour notre nom de domaine, suivre l'évolution de notre positionnement, etc... Tout y est ! A garder précieusement... 111 ressources SEO à connaître absolument Material Up : ressource graphique UI/UX Ce site est une mine d'or en ispiration graphique pour les interfaces : administrations, logiciels, applications pour smartphones ou tablettes (iOS/Apple, Android ou Windows Phone) et même des sites Internet proposant un graphisme ou une navigation originale. Materialup.com La confiance de Google Un article très interessant qui nous explique comment google nous attribut une note de confiance en fonction de plusieurs critères expliqués dans cet très bon article rédigé par les invités du blog SEO Mix. A lire de toute urgence pour ceux qui se soucie de leur référencement Google et de leur positionnement sur les recherches naturelles. Pourquoi votre site ne mérite pas la confiance de Google   Voilà, c'est terminé pour ce 16ème épisode des Trouvailles du Web. On se retrouve pour d'autres ressources très bientôt. Bon surf et bonne veille !... Tue, 08 Mar 2016 13:11:49 GMT Jacques Danilo http://www.pixelcrea.com/blog/anniversaire-freelance/ http://www.pixelcrea.com/blog/anniversaire-freelance/ Happy birthday PixelCréation. Ca y est, le cap des 10 ans vient d’être passé, et ça fait tout drôle. Jamais je ne m’étais imaginé faire 10 ans avec mon entreprise, et je n’avais pas idée en lançant mon activité de graphiste freelance que j’aurais fait un tel parcours. Il y a eu des choses positives, beaucoup en fait, et les quelques zones d’ombres sur le tableau ne font que mettre en avant tout le plaisir que j’ai pris à travailler pour vous. Tout d’abord, merci à vous pour votre confiance Vous avez été des centaines à me faire confiance, pour mon graphisme, mes conseils, et mon expertise. Sans vous je ne serais pas là, et je tenais à vous remercier d’avoir cru en PixelCréation. Que ce soit pour la création graphique, la photographie ou la formation, vous avez cru en moi et nous avons pu collaborer ensemble. Merci, merci beaucoup pour ces dix années pleines d’émotions, de rencontres, de partages et de passions partagées. Le point de départ : le hasard Je n’avais pas forcément prévu de me mettre à mon compte, ou du moins pas en 2006, à l’âge de 22 ans et encore étudiant. J’étais dans ma dernière année d’étude lorsque je tombe sur une annonce en ligne où une entreprise de transport cherchait un logo pour son entreprise. Après avoir discuté du logo, l’entreprise voulais absolument une facture. J’ai donc foncé au centre des impots de Vannes pour avoir des renseignements, et 15 jours plus tard, je recevais le fameux sésame (mon numéro de SIRET) pour pouvoir faire une facture à l’entreprise. Première mission réalisée avec succès ! Mais je ne me considérais pas encore indépendant, j’étais en étude, et j’avais mon stage à faire, ainsi qu’une préparation poussée pour mon examen de fin d’année pour obtenir le diplôme de concepteur infographiste multi-médias. Durant mon stage, à force de crier haut et fort que j’étais indépendant, que si ils le voulaient ils pouvaient faire appel à moi, ils ont fini par me rapeller (à peine une semaine après la fin de mon stage). J’y ai passé ma première année de freelance. Une ascension fulgurante Dès la première année, au bout de quelques mois, mon planning était plus que plein : pas de vacances, pas de we non plus. Le travail tombait, avec un taux de conversion sur mes devis quasi parfait (environ 90% des devis réalisés étaient acceptés sur la premiere année). Mon activité n’a pas désempli durant les 2 premières années, et ce n’est qu’au bout de 2 ans que j’ai pu prendre enfin un week-end de 4 jours de vacances Mes premières vacances, mon premier échec Je pars donc 4 jours avec des amis, direction Center Parcs (pour ne pas le citer), mais à peine les valises posées qu’un client me téléphone : son site a été piraté et il faut que je jette un coup d’oeil de suite. Je prend mon ordinateur portable, je cours à la reception pour savoir où je pouvais avoir le wi-fi et je me retrouve à louer une salle de séminaire pour avoir le wi-fi. Lorsque je termine la restauration du site et la correction de la faille de sécurité 4 jours s’étaient écoulé. Il faut repartir travailler. La blague. Résumé de mes 10 années en quelques lignes 2006 : Lancement de mon activité, encore étudiant à l’age de 22 ans 2007 : je travaille en freelance pour quelques agences vannetaises. Je reçois plusieurs offres d’agences, cherchant à me recruter, notamment à Monaco - Offres que je refuse systématiquement. Débordé, je commence à sous-traiter une partie de mon travail. 2008 : Je suis embauché à mi-temps chez Medicis Alternance en tant que professeur informatique au niveau BTS pour une année. Très bonne expérience d’ailleurs. 2009 : Je quitte Vannes pour m’installer à Rennes. Je lance officiellement mes prestations de photographes et de formateurs sur mon site. Je me rapproche de Cyril Chaniaux pour monter le site Studio2freelances qui nous apportera quelques belles affaires dans l’année. Je commence à avoir une visibilité hors de France : Belgique, Suisse et Québec, mes clients viennent de plus en plus loin… 2010 : Je passe une grosse partie de l’année en déplacement. Plus de 40 000 Km cette année là, entre les formations, les hôtels, et un peu chez moi. Je réalise ma meilleure année cette année là. Je crée en même temps ma deuxième société Group D&D spécialisée dans la vente en ligne avec Etienne Dauvergne, un développeur talentueux. 2011 : mon activité de freelance bat son plein, et nous lançons Cartenpion, un site marchand spécialisé dans les jeux de sociétés pour initiés. Je déménage à Savenay, centre stratégique entre Vannes, Nantes et Saint-Nazaire. J’intègre également la caserne des Pompiers de Savenay en qualité de pompier volontaire. 2012 : Notre société Group D&D accueille un nouvel associé pour la gestion des commandes, mais le coup du sort nous oblige à demander la liquidation judiciaire de notre société fin 2012. 2013 : Group D&D est officiellement fermé, ça été une très belle expérience malgré la fermeture prématurée. Je gagne un procès pour plagiat face à une graphiste peu scrupuleuse. 2014 : Je lance quelques projets persos comme l’annuaire sites-marchands.fr qui deviendra en quelques mois l’annuaire gratuit de référence pour le e-commerce français. Je découvre avec 3 ans de retard l’effet de la crise. Durant quelques mois pas un coup de fil, pas un mail de contact ou de demande de devis. Gros passage à vide me permettant de me poser les bonnes questions. Je refais mon site entièrement et réoriente mes recherches sur le plan national et international. 2015 : Une excellente année, aussi bien pour le travail (avec plein de beaux projets clients), mais également dans ma vie personnelle : participation aux championnats d’Europe de Billard à Malte où nous perdons en demi-finale. Du coté des pompiers Je suis promu Caporal et devient chef d’équipe. 2016 : Une très belle année qui démarre avec mes 10 ans d’activité, une maison qui va se construire et le gros ventre de ma femme qui va se transformer en une magnifique petite princesse...   Alors merci, merci encore pour m’avoir fait vivre tout ça. Et comme dirait un opérateur téléphonique très connu : et c’est pas fini !   Happy birthday to me !... Thu, 03 Mar 2016 15:33:53 GMT Jacques Danilo http://www.pixelcrea.com/blog/rechercher-annonces-adwords/ http://www.pixelcrea.com/blog/rechercher-annonces-adwords/ Lorsque l'on réalise des campagnes de publicité sur la plateforme Google AdWords (qui est une solution de publicité en ligne très interessante - certainement la plus rentable soit dit en passant), l'erreur que tout le monde fait est de vérifier son annonce sur les mots-clefs que l'on a défini. Pour rappel (pour ceux qui ont comme moi déjà réalisés des annonces AdWords), on crée des campagnes qui vont joindre vos annonces à une liste de mots-clefs. Pour être sûr, on va rechercher de temps en temps son annonce en tapant le ou les mot(s)-clef(s) dans la barre de recherche Google. Hors, comme nous l'explique le blog Conseil SEO (www.conseils-seo.fr - Blog fermé visiblement depuis), l'internaute se nuit tout seul car il affiche son annonce mais sans cliquer dessus (pour ne pas dépenser le moindre centime pour rien). La formule de Google Adwords Tout d'abord, depuis des années maintenant Google a mis en place le Quality Score, calcul simple entre le montant défini de votre annonce multiplié à une note de qualité comprise entre 0 et 10 (10 étant la meilleure note bien sûr). Une annonce ayant un cout au clic de 1€ avec une note de 2 donnera un score de 2 (2x1), alors qu'une annonce à 30 centimes mais avec une note de 8 donnera un score de 2,4 (0,3x8). L'annonce à 30 centimes sera donc mieux positionnée que la premiere annonce à 1 euro. D'où le fait de faire très attention à son quality score (visible pour chacune de vos annonces dans votre administration AdWords). Les avantages vont de paire : une bonne note vous permettra d'atteindre une meilleure position face à la concurrence, et cette même bonne note pourra faire baisser le coût au clic. Malin hein ?! Mais le quality score, note entre 0 et 10, est donné par Google et est basé sur plusieurs critères (correspondance des mots-clefs AdWords avec la page cible, temps passé sur la page, taux de rebonds, etc.) mais surtout comme critère important c'est le comportement des internautes face à votre annonce : Si un internaute recherche le mot-clef sur lequel vous avez défini une annonce mais qu'elle n'est pas cliquée, Google considère que votre annonce n'est pas interessante. Google cherchera alors à dégrader votre Quality Score pour laisser la place à la concurrence. Pour les annonces Adwords L'erreur que nous faisons tous, c'est d'aller vérifier à l'aide de la recherche Google voir comment notre annonce apparait. Mais comme on ne veux pas dépenser quelques centimes pour notre propre site web (ce qui est logique n'est-ce pas), on affiche mais on ne clique pas sur notre annonce. Google ne sachant pas que c'est nous, propriétaire de notre annonce, il considère que cette annonce est mal ciblée, et donc nous dégrade la note du quality score. Comment vérifier notre annonce alors ? La meilleure solution est d'attendre un peu, quelques heures, voir quelques jours en fonction du budget, pour avoir les premiers résultats. Vous pouvez les voir en regardant vos statistiques sur AdWords ou sur Analytics si vos comptes sont reliés ensemble.   ... Wed, 02 Mar 2016 17:09:18 GMT Jacques Danilo http://www.pixelcrea.com/blog/meta-referencement/ http://www.pixelcrea.com/blog/meta-referencement/ Google et les autres moteurs de recherches (même s'ils ne représentent d'une proportion très faible) se servent des balises META dans votre partie HEAD en HTML pour orienter voir définir votre référencement. Lors d'une recherche sur Google, le titre de votre page (balise html TITLE) ainsi que la description (META Description) sont repris afin d'inciter l'internaute à cliquer sur votre lien plutôt qu'un autre. Je parle ici uniquement du référencement naturel, et non des publicités/annonces Google qui sont personnalisables en passant une annonce. Nous allons faire ensemble un petit tour d'horizon des différentes balises META que Google et les autres préconisent pour améliorer votre référencement naturel. Le jeu de caractères avec Content-Type et Charset Version HTML 4 : <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Version HTML 5 : <meta charset="UTF-8"> Elle devrait idéalement se trouver en premier dans votre partie HEAD : elle permet de définir le jeu de caractères que l'on utilise dans notre document. Les plus utilisés sont l'utf-8 et l'iso-8859-1 mais Google préconise d'utiliser l'UTF-8 afin d'harmoniser le web. Sachez également que si vous utilisez un autre charset que l'UTF-8, il se peut que lors de partages de vos pages sur les réseaux sociaux vous ayez des caractères étranges à la place des accents et caractères particuliers. Définir la langue avec Content-Language <meta http-equiv="Content-Language" content="fr" /> Tout comme le jeu de caractère, il faut aider les moteurs de recherche à identifier la langue utilisée, surtout si vous avez tendance à utiliser différents langages dans votre page (en citant vos sources, ou avec des traductions de bouts de textes...). Même si elle n'est pas obligatoire, cela permet de faire gagner du temps pour les moteurs de recherches. Les valeurs sont en pour l'anglais ou l'américain, fr pour le français, it pour l'italie, etc... Dans le cas où vous devez écrire une partie de votre page dans une autre langue, utilisez l'attribut html pour définir un ensemble d'une autre langue comme ceci : <p lang="en">This is a text in English</p> Le titre de votre page/document <title>PixelCréation - Graphiste freelance et formateur indépendant</title> La balise la plus importante, qui doit contenir les mots les plus représentatifs pour votre référencement. La longueur idéale doit être d'environ 70 caractères pour ne pas être tronqué et d'avoir les ... qui couperait votre titre. Cependant même si votre titre est trop long, Google prendra quand même les différents termes utilisés mais dans des proportions beaucoup plus faibles, n'en abusez pas ! La balise description <meta name="description" content="Ici votre description, résumé de votre page incluant des mots-clefs"/> La balise description va avec le titre, puisqu'elles sont reprises par les moteurs de recherche pour afficher votre page dans les résultats. La description doit être accrocheuse tout en incluant des mots-clefs. La longueur peut aller jusqu'à 1000 caractères mais il est conseillé de se limiter entre 150 et 400 caractères. Comme l'indique l'agence de référencement Vos-mots-clés, la balise meta est importante pour contrôler l'affichage de votre page sur les SERPs de Google. Beaucoup de sites préconisent d'utiliser 150 caractères pour que la description ne soit pas tronquée, mais sur les recherches comportant beaucoup de mots-clefs, Google affiche parfois une description plus longue. Pensez également à votre stratégie de référencement, la recherche mobile affichera moins de caractères que la même recherche en mode desktop... Indiquez le comportement pour les robots avec robots et GoogleBot <meta name="robots" content="..., ..." /><meta name="googlebot" content="..., ..." /> Avec ces deux balises, indiquez la prise en compte de cette page pour les robots d'indexation des moteurs de recherche. Googlebot est spécifique à Google alors que la balise meta robots est plus générique (mais interprétée par Google si GoogleBot n'est pas précisé). Elle permet de définir 2 valeurs : la premiere sur la prise en compte de la page avec index ou noindex, et la deuxième valeur pour indiquer aux moteurs de recherches s'ils doivent suivre ou non les liens présents dans la page avec follow ou nofollow. Il est également possible d'ajouter d'autres valeurs en les séparant par des virgules comme avec nosnippet qui empêche l'affichage d'un extrait de la page à la place de la description (ou si la balise meta description est absente), ou encore noimageindex pour spécifier que l'on ne veux pas que les images présentes dans la page ne soient indexées par Google Images. La recherche dans votre résultat <meta name="google" content="nositelinkssearchbox" /> Lorsque vous faîtes une recherche sur le nom de votre entreprise, Google peut afficher sous votre résultat de recherche une barre de recherche interne à votre domaine/site. Pour forcer Google à ne pas afficher cette barre de recherche, placez cette balise dans votre partie head. Bloquez la traduction Google <meta name="google" content="notranslate" /> Si vous faites une recherche dans une langue spécifique, votre page peut être proposée en la traduisant. Pour bloquer la traduction de votre page par Google, placez cette balise dans la partie head de votre document HTML    ... Sat, 13 Feb 2016 17:56:15 GMT Jacques Danilo http://www.pixelcrea.com/blog/devenir-freelance/ http://www.pixelcrea.com/blog/devenir-freelance/ Si vous hésitez à vous lancer aujourd'hui en tant qu'indépendant ou freelance, voici une liste de raisons pour ne pas être indépendant. Evidemment cela est dit avec humour mais le fond reste vrai, c'est un petit retour sur mes 10 années passées en tant qu'indépendant. Cela concerne mon activité de graphiste freelance mais se décline facilement pour toutes les activités d'indépendants. Allez on y va ! 1. Indépendant c'est être tout seul ! Se lancer en freelance signifie passer environ 99% de son temps tout seul. Il faut le savoir ! Cela peut être un avantage, mais c'est au final très difficile : il faut trouver la motivation, se forcer à respecter des horaires de travail, faire sa propre veille, ... Même si c'est un choix que je ne regrette absolument pas, au contraire, je dois avouer que des fois, cette solitude était pesante par moment. Il faut être bien accompagné, avoir une vie sociale bien remplie sinon on a de quoi péter un cable facilement. En 10 ans j'ai connu beaucoup de confrères qui ne supportaient plus cette solitude quotidienne et ont décidé de revenir à un poste en entreprise. 2. Savoir tout faire soi-même... Etre indépendant c'est avoir plusieurs casquettes : on est à la fois le graphiste, mais on est aussi le commercial, le comptable, le secrétaire, le chef d'entreprise, le chef de projet, etc. Si on a une de ces casquettes qui ne nous convient pas, le plus souvent on se casse la gueule. Dans mon activité de graphiste freelance, j'ai connu beaucoup de graphistes meilleurs que moi mais qui commercialement parlant n'étaient pas présents. Le contact client était compliqué, et au final l'entreprise ne fonctionnait pas, en grande partie à cause de cette casquette qu'ils n'avaient pas (c'est également le cas pour la compta ou une autre casquette) 3. Avoir les épaules larges et les reins solides Quand on est indépendant, on a le plus souvent un statut juridique "simplifié", en auto-entrepreneur ou en micro, le plus souvent en nom propre, ce qui nous inclut personnellement dans les risques de l'entreprise. De ce fait, la moindre embrouille, le moindre problème juridique peut nous coûter notre société, voire même plus encore. Si vous devez engager des poursuites judiciaires face à un client ou qu'un client souhaite engager une procédure contre vous, assurez vous d'être capable à la fois de gérer cette situation peu confortable mais également d'être sûr de pouvoir assumer une défaite, et donc des frais qui peuvent monter très vite quand il s'agit de dommages et intérêts... 4. Une rémunération aléatoire Quand on est indépendant, un des aspects les plus compliqués est de ne pas avoir de salaires fixes. Un mois on va rentrer plein de règlements de factures, et pendant 2/3 mois on n'a rien qui rentre : le client règlera bientôt nous dit-il, ou alors on est sur un gros projet de plusieurs mois et en attendant, bah, il n'y a rien ! Faîtes tous les efforts du monde pour bien vous entendre avec votre banquier, car certains mois il risque de vous téléphoner souvent (remboursements de prêts, carte refusée par manque de provisions, etc...). Ce côté aléatoire m'aura fait passer des nuits blanches au début de mon activité. 5. Trouver des clients est difficile En discutant avec des amis ou confrères, le constat est toujours le même : trouver des clients est difficile une fois le réseau passé. Pour vous raconter une anecdote, un ami décide de se lancer en indépendant car son oncle a une société et il voudrait faire son site web. Super se dit-il, il fait un devis pas cher (pour se lancer, ne pas abuser de sa famille et parce qu'il ne connait pas les prix du marché - on reviendra dessus un peu plus tard) et il travaille pour son oncle. Premier mois de salaire fait grâce à lui, cet indépendant se rend compte qu'à part ce client il n'a rien, alors il cherche, il propecte à mort, mais rien ne tombe, pas de devis signés, etc... Sachez qu'un bar, un restaurant, ou un hotel est démarché entre 10 et 20 fois par an pour faire ou refaire son site. En quoi nous, petits indépendants pourrions tirer notre épingle du jeu et sortir vainqueur face à une concurrence féroce ? Posez-vous les bonnes questions avant de vous lancer !  6. La concurrence actuelle est féroce En vous mettant à votre compte, vous arrivez dans une jungle féroce où se trouvent déjà des milliers de loups attendant leurs proies. Avec le statut d'auto-entrepreneur, comme la création d'entreprise a été largement simplifiée, on retrouve aujourd'hui beaucoup plus d'indépendant qu'il y a 10 ans quand j'ai commencé. Bon il y a de tout je vous l'accorde, de très bons comme de très "moins bons". 7. Savoir se vendre en tant qu'indépendant Je rencontre depuis plusieurs années maintenant un phénomène récurrent chez mes prospects : s'ils ont fait appel à un indépendant qui n'a pas pu assumer sa prestation correctement, le plus souvent le crédit de confiance accordé n'affecte pas cet indépendant en particulier mais la confiance globale accordées aux indépendants. Du coup beaucoup me disent : oui mais vous êtes indépendant et on a déjà subit les conséquences, merci. Il est donc important de savoir se vendre pour réussir à signer des affaires. Je constate aussi que depuis 4/5 ans, il est plus diffile de signer des affaires qu'avant. C'est un constat général que l'on partage avec des confrères indépendants aussi depuis un moment. 8. Travailler à la maison : on en sort jamais Travailler en freelance signifie pour beaucoup d'entre nous de travailler à la maison, dans une pièce à part ou directement dans le salon. Cette situation est à double tranchant : l'avantage d'être directement sur place le matin (pas de temps de route), mais le plus dur je trouve c'est de décrocher de son ordinateur. On ne compte pas ses heures, on travaille tard le soir et on n'arrive plus à retrouver une séparation maison/boulot. Le pire c'est quand les clients passent un peu à l'improviste. Pour rejoindre le point 1 sur la solitude, on peut facilement rester cloitré des jours entiers sans sortir de la maison. Faut être capable de le supporter. 9. Travailler à la maison : les distractions Quand on travaille dans un bureau professionnel, en dehors de la maison, c'est facile : on prend la voiture, on se met en condition, et on a le plus souvent que son ordi donc rester concentré sur le travail est assez facile, surtout en open space collaboratif (je vous recommande au passage de démarrer par ce biais c'est plus facile). Mais à la maison c'est beaucoup plus dur de ne pas craquer et de faire de grandes pauses : la guitare, la télévision, sortir le chien, faire la vaiselle, jouer à la console, ou simplement pour se lever le matin... Il est bon d'avoir un bureau à part, porte fermée, afin de se couper le plus possible de la vie de la maison et du temps de travail. 10. Trouver la motivation Lié avec les distractions que l'on a autour de nous, un des facteurs qui jouera sur le temps est la motivation : vous êtes le plus souvent tout seul à vous gérer et il est parfois difficile de trouver la motivation. J'ai connu des mois entiers où j'avais beau chercher à me motiver il n'y avait rien à faire : pas de créativité, le moral dans les chaussettes, à la limite de ne pas vouloir décrocher le téléphone quand il sonnait (pour le boulot ou pour le reste d'ailleurs). Comme je vous le disais dans le point 1, la solitude peut peser, tout comme gérer un client pas satisfait ou avoir une période creuse en terme d'activité. 11. Les indépendants passent des entretiens tous les jours C'est sûr, hein, le CDD ou CDI est facile : on passe un entretien, on a réussi à séduire le recruteur et nous voilà parti pour une longue durée où l'on est tranquille. On peut ranger notre chemise "spécial entretiens" au placard pour quelques mois et on peut alors prendre notre rythme de croisière et faire simplement notre boulot. Et bah chez nous, dans le monde des freelances, c'est pas comme ça : la belle chemise spéciale doit être de sortie tous les jours, car à chaque rdv clientèle on joue sur la rémunération qui tombera dans 1, 2 voire 3 mois. Si l'on échoue notre rendez-vous client on peut commencer à se retrouver dans une situation difficile pour les mois à venir. 12. Ne pas attendre la période calme pour relancer le démarchage client On fonctionne tous pareils : on démarche à fond, puis quand on a signé 2-3 devis on se met à fond sur nos projets clients, et on ne fait que ça. Du coup notre démarchage client s'arrète aussi vite qu'il a commencé et lorsque les projets signés se terminent, on facture et on retourne au charbon. Problème : le temps que les nouveaux rdv se transforment en devis signés il peut se passer plusieurs semaines et pendant ce temps rien ne tombe. Et on a sur l'année une alternance de mois très bons et d'autres à 0. Pour éviter ça il faut absolument être capable de tout faire en même temps : travail client et prospection pour éviter au maximum les périodes calmes. 13. La reconnaissance n'existe pas Quand on travaille en indépendant, notre but est de faire le maximum pour notre client (toujours dans le cadre de notre devis bien sûr). Et comme il est coutume en France, si on vous dit rien c'est que c'est bien. On aimerait (et là je passe un message personnel à mes clients - je plaisante) avoir des remerciements plus souvent, pour conforter notre idée qu'on s'est vraiment donné à fond pour lui. 14. Les vacances auront un goût étrange (comme le reste) Vous êtes indépendant, donc vous êtes la seule personne a réaliser du chiffre. Fini les 5 semaines de congés payés, quand vous vous arrêtez, c'est l'entreprise qui fait une pause, donc il n'y a pas de travail, pas de facturation, donc pas de sous qui rentrent. Les vacances vont être amers finalement et vous aurez presque hâte de reprendre le travail, et oui, pas le choix ! Idem pour le reste : le CE, les chèques vacances, ou simplement le chômage en fin de mission ou la couverture sociale n'existeront plus : si vous vous cassez la main pendant vos vacances au ski, vous n'aurez rien ! Si vous décidez d'arreter définitivement votre société c'est pareil : pas de chômage ! 15. C'est à vous de vous adapter !! En qualité de freelance, c'est à vous de vous adapter aux clients et non l'inverse, que ce soit sur les horaires, le rythme, ... Vous serez toujours dans cette position où on ne vous demandera pas votre avis. Si la société travaille dès 8h il faudra être là, s'ils ne travaillent pas le vendredi à vous de vous arranger pour livrer les éléments à temps... CONCLUSION Voilà en vrac les quelques points négatifs d'être à son compte. Voilà 10 ans que je fais ce métier avec passion mais ce métier n'est pas tout rose. Ceci dit personnellement je ne regrette absolument pas mon choix et j'espère rester indépendant le plus longtemps possible. Mais beaucoup de mes amis qui sont passés par le statut d'indépendant ne voyaient pas ces contraintes quand ils se sont lancés - ils s'en sont rendu compte ensuite, et ils ont finis par retourner en entreprise. J'espère que cet article vous aura aidé à prendre la bonne décision. Ce que je peux vous dire en étant le plus honnète possible, c'est que je ne regrette pas mon indépendance mais j'ai eu la chance de me lancer il y a 10 ans. Vu la concurrence actuelle, les prix du marché qui se sont effondrés (merci au statut d'auto-entrepreneur qui a complètement modifié le métier), et l'image du statut d'indépendant véhiculé par les médias aujourd'hui, je ne me lancerais pas aujourd'hui c'est sûr.... Fri, 05 Feb 2016 19:55:19 GMT Jacques Danilo http://www.pixelcrea.com/blog/trouvailles-du-web-15/ http://www.pixelcrea.com/blog/trouvailles-du-web-15/ Et nous voilà à l'épisode 15 des Trouvailles du Web, une mini-série où je vous livre différents liens que j'ai gardé spécialement pour vous au fur et à mesure de ma veille techno. Au menu de cet épisode 15, de la programmation pour applications mobiles (android et iOS), un bilan sur la création de logo en 2015 et la tendance pour 2016, des fonds d'écrans super sympatiques, De l'inspiration graphique et visuelle avec WookMark, et pour fini le guide des twitters-cards pour de l'utilisation +++ des réseaux sociaux en dynamique. D'ailleurs je vous prépare un petit article très détaillé sur l'utilisation des twitter-cards qui devrait arriver très prochainement ! Apache Cordova, pour compiler des applications Android, iOS, ... Apache Cordova est la solution gratuite pour développer des applications pour smartphones (toutes plateformes confondues). Il ne permet pas de développer (je vous invite à vous renseigner sur AngulardJS pour cela), mais permet la compilation d'applications HTML/CSS/JS en une solution pour les différents stores. L'avantage est qu'il est gratuit et très bien documenté. Un régal de travailler avec (même si ce n'est pas si simple que cela...) Apache Cordova Création de logo : bilan 2015 et tendance 2016 Le site Influencia nous propose un très bel article sur le bilan de la conception de logos en 2015 et affirme une tendance pour l'année qui démarre. Une très belle infographie fait le bilan de l'année passée sur la création de logo (en freelance ou non d'ailleurs).  Logo : bilan 2015 et tendances 2016 Simple Desktops : des fond d'écrans super sympa Je ne suis pas forcement des plus fan à partager ce genre de ressources. Les fond d'écrans on en trouve partout. Mais là, je trouve que la sélection est plutot graphique et propre. Beaucoup de flat design et avec des résolutions importantes. Du coup, bah voilà je vous le donne ! Simple Desktop De l'inspiration visuelle avec WookMark WookMark est un simple d'inspiration où l'on retrouve beaucoup d'univers graphiques complètement différent. La sélection est encore un peu light pour le moment mais cela n'enlève en rien la qualité de ces références et inspirations graphiques. Un régal pour les yeux et pour notre créativité WookMark Faire des twitters-cards : la documentation officielle Les twitters-cards sont ces fameux tweets où l'on retrouve la photo principale de la page, présentée un peu comme une publication sponsorisé mais qui n'en ai pas une au final. Twitter nous a prévu plusieurs formats de cartes (type de présentation des tweets) qui peuvent être sympa à intégrer dans le partage de nos pages sur les réseaux sociaux. Si vous tweetez cet article par exemple, vous verez de quelle manière s'affiche votre tweet. Documentation sur les twitter cards   Ca y est, c'est déjà fini pour les ressources livrées dans cet épisode 15, mais rassurez-vous, le prochain numéro est déjà en préparation ! Bon surf mes p'tits loups.... Fri, 29 Jan 2016 11:31:47 GMT Jacques Danilo http://www.pixelcrea.com/blog/cartes-visites-moo/ http://www.pixelcrea.com/blog/cartes-visites-moo/ Nouvelle année, et nouvelles cartes professionnelles pour PixelCréation. Afin de poursuivre ma refonte de la communication globale de mon entreprise, j'ai décidé de changer différemment le logo, le site, et maintenant les cartes de visites. Je suis revenu vers le format portrait, plus pratique sur les présentoirs et de mano-à-mano. Sur le recto on y retrouve juste l'idéogramme en flat design avec un fond reprenant les courbes du logo en quasi-aplat bleu. Pour le verso je suis parti sur le logo complet prenant la moitié de la carte en hauteur, puis mes informations avec une nouveauté : l'anglais. Bah oui, si je veux démarcher en anglais, ça sera plus simple ! J'y ai simplement indiqué mon téléphone (au format international), mon mail et l'adresse de mon site Internet www.pixelcrea.com. Le choix de l'imprimeur Maintenant que le design a été validé, il me fallait un imprimeur. Le plus simple, rapide et efficace : l'imprimeur en ligne. Je connaissais VistaPrint pour ses publicités à la TV mais surtout pour la médiocre qualité d'impression. RapidFlyer jusqu'à il y a 2/3 ans possédait un très bon rapport qualité/prix (certainement le meilleur du marché je pense) - mais qui depuis s'est certainement laissé déborder et maintenant à chaque commande (pour moi ou mes clients) j'ai un problème : coulures, dimensions grossières, zones abîmées... Il me fallait donc trouver autre chose, de mieux, de sérieux finalement. En regardant un peu les différents sites proposés sur mon moteur de recherche préféré j'ai pas trouvé mon bonheur, à la course au moins cher que se disputent toutes les enseignes. Mais j'avais gardé depuis un petit moment dans mes favoris Moo (moo.com) un imprimeur de cartes de visites visiblement réputé (des confrères ont déjà testés avant moi et en disaient du bien. Allez, ca sera Moo. Moo, imprimeur de qualité en ligne ? Moo.com possède une interface vraiment sympa et abouti, c'est un plaisir que de naviguer dessus. Un premier bon point quand on compare à certains imprimeurs (que je n'avais pas cité plus haut, non loin de moi cette idée). Hop, je crée un compte, je choisi ma finition et la quantité, je charge mon design, je sors la CB, et ça y est, ma commande est passée. Je suis parti sur le modèle Cartes de visite Supra en 200 exemplaires pour 92,39 €. Il n'y a plus qu'à attendre. - La commande est passée le 4 janvier (estimation de livraison le 15 janvier)- la commande est expédiée le 7 janvier (génial, plusieurs jours d'avance)- le 17 janvier toujours rien reçu, je contacte le support.- Arrivée finalement le 21 janvier de ma commande ! Bon, sur la gestion commande on repassera hein : plus de 2 semaines de delta-temps entre l'expédition et la livraison, la poste a bon dos mais quand même ;). Bref. Mon colis posé sur le bureau, je l'ouvre et la premiere impression est géniale : boite personnalisée, présentation soignée et luxueuse. Déjà c'est top ! Malheureusement, l'ascenseur émotionnel est redécendu aussi sec : les cartes de visites sont belles, mais avec un massicotage qui laisse franchement à désirer : normalement tous mes éléments graphiques sont centrés sur la carte, hors d'un coté du logo j'ai 20mm et de l'autre 23mm, soit une precision très faible avec un jeu de 3mm quand même (normalement, je devais avoir un écart de 21,5mm de part et d'autre du logo) . Résultat : mes cartes sont moyennes, avec une très très belle qualité d'impression mais avec une précision vraiment décevante. Je viens de les contacter pour en savoir plus, je vous tiendrai au courant !... Fri, 22 Jan 2016 15:47:25 GMT Jacques Danilo http://www.pixelcrea.com/blog/fomulaires-iphones/ http://www.pixelcrea.com/blog/fomulaires-iphones/ La navigation sur tablettes et smartphones se démocratisent depuis des années, mais en 2015 les navigations web ont connu un virage très important, car 51% des navigations web se sont faites sur mobile - source smartinsights. Il est donc important de personnaliser l'expérience utilisateur pour les navigations mobiles. En plus du responsive design HTML 5 et CSS 3, qui devient presque obligatoire aujourd'hui, il est possible de personnaliser ses formulaires de contact pour proposer un clavier optimisé par rapport au contenu attendu. Vous l'avez peut-être déjà remarqué lors d'inscriptions ou de connexions à une application par exemple, on ne dispose pas d'un seul et même clavier tactile, mais plusieurs, différents en fonction du besoin : une date, une heure, une adresse mail ou une url à écrire et notre clavier s'adapte pour nous proposer un clavier intelligent. Tout se passe dans l'attribut d'un input : type Pour personnaliser un formulaire HTML pour les smartphones, tout se passe dans l'attribut type d'un champ input pour attribuer un clavier spécifique. <input type="text" /> Dans l'attribut type du champ input, on utilise le plus souvent type="text", ou encore type="password", mais il existe aujourd'hui, grâce aux smartphones, d'autres types de valeurs possibles. Le clavier par défaut <input type="text" />  Le clavier par défaut propose les caractères alphabétiques, avec la possibilité de switcher vers les chiffres et caractères particuliers. Le clavier de sélection d'une date <input type="date" /> Le clavier de sélection d'une date se présente sur 3 colonnes : le jour, le mois, et l'année. On glisse le doigt pour modifier chaque colonne vers le haut ou vers le bas. Le jeu : faire glisser le mois vite et relacher pour retomber sur le bon mois ;) On y passerait des heures Le clavier de date locale <input type="datetime-local" /> Même principe que pour le type date : 3 colonnes. Mais cette fois on se base sur la date d'aujourd'hui comme référence, avec l'heure et les minutes. Le clavier email <input type="email" /> Le clavier email propose un alphanumérique mais avec l'arobaz et le point directement pour gagner du temps. Très pratique sur un champ login par exemple. Le champ file <input type="file" /> Le champ input file permet sur iPhone de prendre une photo/vidéo, d'accéder à la photothèque ou d'aller se rendre sur le cloud pour y choisir un fichier (peut importe le format, pas uniquement les images/vidéos). Sur Android, on a accès à l'enregistreur vocal en plus, avec un accès aux documents également. Le clavier pour les mois et l'année <input type="month" /> Le clavier month permet de sélectionner une date limitée au mois et à l'année, sur 2 colonnes. Le clavier pour les nombres <input type="number" /> Le clavier numérique sur iPhone renvoit directement aux nombres par rapport au clavier standard où il faut cliquer sur "123" pour afficher les chiffres. Un petit gain de temps ! Sur Android, on représente un clavier numérique avec la possibilité de mettre un point (pour les décimaux). Le clavier type téléphone <input type="tel" /> Le clavier téléphone permet de n'avoir que les chiffres, mais ne fonctionnera uniquement dans le cas d'un téléphone à remplir, puisqu'on a pas de choix pour les virgules ou les points sur un chiffre décimal. Sur Android, le pad numérique ressemble aux nombres (type="number") mais affiche également les lettres comme pour l'écriture des textos il y a quelques années maintenant ! Le clavier pour une heure <input type="time" /> Le clavier time permet sur 2 colonnes de choisir une heure précise avec heures et minutes. Par contre pas d'options sur les secondes, c'est dommage ! Le clavier pour les url <input type="url" /> Le clavier type url ressemble au clavier normal à la différence qu'il n'y a pas d'espaces, mais des points, des slashs et un raccourci vers le .fr à la place. Note : le .fr est rattaché à la langue utilisée sur le téléphone. Conclusion Pour faire gagner du temps à vos internautes, proposez leur le bon clavier en fonction de leur utilisation. Très pratique pour un formulaire d'inscription par exemple. Ressource : Safari developer Library... Sun, 10 Jan 2016 11:16:47 GMT Jacques Danilo http://www.pixelcrea.com/blog/marques-voitures-internet/ http://www.pixelcrea.com/blog/marques-voitures-internet/ Les marques automobiles ont besoin d'avoir une image de marque irréprochable, surtout sur Internet. Je me suis amusé à parcourir l'ensemble des plus grands constructeurs pour vous faire un retour sur ma navigation à travers leur site sur mon ordinateur. Les formats sont bien différents même si l'on trouve une certaine trame entre tous. Normal, ils vendent la même chose ! Tous les screenshots ont été réalisé le 20 décembre 2015. Audi Le site Internet d'Audi est responsive, d'une largeur maximale de 1400px, proposant un slider des différentes offres du moment. BMW Site non-responsive, d'une largeur de 1270px. Citroen Site non-responsive, d'une largeur de site Internet de 1250 pixels. Fiat Site semi-responsive (adaptable de 1440px à 960px). Ford Largeur du site de Ford de 980 pixels, site non responsive. Hyundai Site de 960px de large, non-responsive. Kia Site non-responsive pour une largeur de 980px. Land Rover Site Internet de Land Rover responsive et fullscreen (la largeur maximale sera celle du navigateur). Mercedes Site de 1000px de large possédant du flash pour le slider principal. Le site Internet de Mercedes n'est pas responsive ! Nissan Site responsive et fullscreen (qui s'adapte parfaitement à la largeur du navigateur, même sur ordinateur ! Opel Site non-responsive de 1024px de large. Peugeot Site responsive d'une largeur d'écran max de 1250px pour Peugeot. Renault Le site de Renault fait 990px de large et est responsive (avec quelques bugs d'affichage sur le menu secondaire (sous le slider). Toyota Toyota a un site Internet fullscreen et responsive. Volkswagen 960 pixels de large pour le site de Volkswagen qui n'est pas responsive. Volvo Site fullscreen et responsive pour la marque de voiture Volvo.   Le bilan Mention spéciale pour les sites de Volvo, Nissan et Land Rover qui ont parfaitement réadapté leur communication web en lien avec la réalité du marché : site fullscreen, responsive design. Mention très négative pour Mercedes qui encore aujourd'hui utilie un slider fait en Flash, malgré les navigations mobiles qui l'occultent et donc propose un affichage défaillant. Petit regret pour Renault et Volwkswagen qui restent dans un esprit minimaliste et petit, un peu enfermé finalement.... Mon, 21 Dec 2015 14:53:23 GMT Jacques Danilo http://www.pixelcrea.com/blog/tendances-seo-2016/ http://www.pixelcrea.com/blog/tendances-seo-2016/ Google change sans cesse les règles pour avoir un bon référencement et un bon positionnement. Voici les prédictions les plus probables pour 2016 d'après la vielle que je fais et mes propres recherches et analyses. Ce ne sont que des prévisions (voir visions ^^) mais d'après les dire de blogs spécialisés sur le référencement naturel et le SEO, on aurait tendance à le croire. Voici donc 5 points supposés important pour cette nouvelle année. 1. Le comportement utilisateur sera plus important encore ! Une multitude de critères viennent se joindre pour former le comportement utilisateur : les sources d'où ils proviennent, leurs actions sur le site web, les liens de sorties cliqués, le temps passé sur la page, etc... Tous ces paramètres seront plus important encore au fur et à mesure des mises à jour de l'algorithme de Google en 2016. Il est donc important de ne pas flouer les balises meta (titre et description) pour ne pas induire l'utilisateur afin qu'il arrive vraiment sur un lien influant par rapport à sa recherche. 2. Le responsive design Même s'il est arrivé de manière un peu brutale en 2015, mais finalement pas ou très peu pris en compte dans son algorithme de positionnement, Google mettra je pense un point central au responsive design (le mobile-friendly) dans son référencement en 2016. Comme la recherche mobile devient plus importante que les recherches desktop (sur ordinateur), il y a fort à parier que Google fasse un pied de nez aux sites non-responsive. A suivre de prêt ! 3. L'expérience mobile Comme je l'évoquais au point précédent, les recherches (et donc navigations) mobiles deviendront plus importantes que les recherches réalisées sur un ordinateur dans les mois à venir, et Google modifiera forcément en conséquence sa formule de positionnement des sites en fonction du comportement du site et de ces utilisateurs sur mobile et tablette.En plus d'être responsive, il devra proposer une expérience utilisateur des plus simples sur les smartphones et tablettes. 4. Les réseaux sociaux mis en avant Google et Twitter ont passés un accord depuis le début d'année 2015 pour la prise en compte du référencement des tweets dans les résultats de recherche. Malheureusement, Google a trainé un peu avant de réellement prendre en compte le contenu des tweets. Mais cela a progressé et on peut s'attendre à une prise en compte d'autres réseaux sociaux dans l'année : Facebook ? Instagram ? voir même les posts de Google Plus ? Qui sait... 5. La chasse au contenu pauvre Maintenant que Google met en avant le contenu riche (unique, pertinant et influant pour les internautes - réseaux sociaux), on peut imaginer que Google fasse l'effet inverse, c'est à dire déclassé plus vite que prévu le contenu pauvre : page manquant d'interêt pour l'internaute (contenu partiellement dupliqué, ou contenu très faible en longueur, manque de médias, liens entrants et sortants), pages jamais partagées sur les réseaux sociaux, sémantique mal adaptée ou possédant des CSS-hacking...   Rendez-vous dans un an pour analyser ces prédictions sur le référencement 2016 !... Fri, 11 Dec 2015 08:56:42 GMT Jacques Danilo http://www.pixelcrea.com/blog/sprites-css/ http://www.pixelcrea.com/blog/sprites-css/ Les sprites permettent de regrouper toutes les images d'interface du site en une seule image, plus rapide à charger que les dizaines d'images qui vous servent dans l'interface même de votre site (logo, flèches suivant/précédent d'un slider jQuery, icones pour les réseaux sociaux, etc...). Lors du chargement du site, le navigateur demandera qu'une seule image, qui permettra d'optimiser la bande passante et donc le temps de chargement du site. Explications Les avantages des sprites CSS - Optimisation du temps de chargement du site : vous ne chargez q'une seule image qui en contient plusieurs, on fait moins d'aller-retour avec le serveur. - Le poids des images : toutes les images d'interface pèsent un peu, alors qu'un fichier sprite qui en contient plusieurs sera toujours moins lourde. Les inconvénients de faire du sprite CSS - la phase de préparation est assez complexe (mais je vais vous l'expliquer un peu plus bas) - les modifications d'un sprite mal pensé devient très fastidieux. - il faut être à l'aise avec le HTML et le CSS (un minimum) Mais comment ça fonctionne exactement ? Le sprite est un fichier image classique, au format jpg ou png (en fonction de si vous avez besoin d'avoir de la transparence ou non). Mais ce qui est important c'est ce qu'il contient, puisqu'on y mettra toutes les images dont vous avez besoin dans votre interface : logos, icones, réseaux sociaux, flèches pour un slider, etc... Le but est de réussir à intégrer tout ça dans un seul fichier comme l'exemple ci-dessous : La préparation d'un sprite CSS Pour concevoir un sprite CSS, vous devez analyser votre site web pour savoir de quoi vous aurez besoin : logo sous plusieurs aspects ou tailles ? Flèches ? Icones d'interface ? Réseaux sociaux ? Elements graphiques ? Le plus simple, surtout au début, est de tous les lister et de voir si certains éléments sont très grand (en hauteur ou en largeur), ce qui permettra de définir la largeur ou la hauteur de notre image sprite.png (le nom du fichier n'a pas d'importance). Le travail en utilisant des grilles Ce que je préfère quans je créer mes sprites pour mes clients ou pour mon site, est de travailler avec une grille. J'aime bien travailler avec une grille de 50px, c'est à dire des carrés de 50px x 50px : Cette grille de 50x50 sera également plus facile à utiliser lors de la création du CSS associé. Le remplissage de votre fichier sprite Maintenant que vous avez défini les images à intégrer dans votre fichier sprite et que vous avez créer une grille adaptée, il suffit d'y ajouter les images sans qu'elles se touchent et en respectant un espace rectangulaire autour. Dans cet exemple, en bas se trouvent 2 logos trop proches. Comme les images ou les zones CSS seront forcéments carrées, n'oubliez pas de laisser suffisamment d'espace entre chaque élément. L'utilisation en CSS de votre fichier sprite Ca y est, notre fichier est prêt. On y a mis tous les éléments qu'il faut pour notre interface et on aimerait remplacer toutes les images indépendantes par notre sprite.png. Pour cela, il faudra jouer avec les règles CSS. Avant on avait ceci : <img src="fleche.png" alt="" title="" /> Il faudrait remplacer la balise image par ceci : <div class="fleche"></div> Et rajouter en CSS : .fleche{width:50px;height:50px;background:url(sprite.png);background-position:-200px -150px;} Pour l'explication, on remplace l'image par une balise DIV que l'on appelera par une classe 'fleche'. Coté CSS, on définit la taille de cette boite en hauteur et en largeur en fonction de la taille de l'image que l'on avait avant (qui doit se trouver dans votre fichier sprite). On indique ensuite que l'on utilisera une image d'arrière-plan qui ne nomme sprite.png en spécifiant le background-position pour déplacer l'image d'arrière plan au bon endroit en partant du point en haut à gauche, le point de référence. Maintenant il ne reste plus qu'à reproduire la même démarche pour chacune des images qui composent votre page/site... Et ça peut être long, mais les résultats seront meilleurs pour les utilisateurs, pour le temps de chargement de votre site et donc, indirectement, pour votre référencement naturel. Si vous avez besoin d'exemples, recherchez 'sprite css' sur Google Images pour voir des centaines d'autres exemples (Google, Facebook, etc...)... Mon, 21 Sep 2015 17:37:58 GMT Jacques Danilo http://www.pixelcrea.com/blog/trouvailles-du-web-14/ http://www.pixelcrea.com/blog/trouvailles-du-web-14/ 14ème épisode pour les Trouvailles du web, ma série d'articles où je vous donne des petites ressources glanées ici et là en parcourant la toile. Au menu de cette édition, de la ressource graphique avec un wireframe PSD gratuit, du quizz, des ressources sur le référencement Google, du jquery pour les blogueurs, et un petit tuto sur la création d'un mail responsive... Un zoning de webdesign sous Photoshop Freebiesbug nous offre aujourd'hui une maquette Photoshop one-page pour la création de maquettes web. Beaucoup d'éléments et de zones pour une construction plus rapide de nos maquettages avec le logiciel de chez Adobe... Un must que je vous recommande ! one page website wireframes psd Des quizz pour les développeurs Que vous soyez développeur de logiciels, d'applications mobiles ou de sites Web (html, css, php, mysql, ...) TutorialsPoint (site en anglais) vous propose des tutos très sympa, mais surtout des quizz assez costaux il faut le reconnaitre. http://www.tutorialspoint.com/questions_and_answers.htm 200 astuces pour maitriser Google Le Blog du modérateur, excellent blog français, nous propose une série de conseils et astuces autour du moteur de recherche : gestion du compte Google, recherche, affiner ses recherches, gmail, google Maps, google Plus, ... Tout y est, ou presque. L'article date un peu mais il reste d'actualité. http://www.blogdumoderateur.com/astuces-google/ Highlight.js - ressource jQuery pour les développeurs Si vous avez un blog où vous partagez beaucoup de codes (html, css, php, ou autre), highlight.js est fait pour vous : il retravaillera vos bouts de codes dans les balises <pre><code>...</code></pre> pour ajouter de la colorisation syntaxique adaptée au language utilisé. Très pratique ! highlight.js Un tuto sur la création d'un email responsive (en 7 étapes) - Anglais Tuto très sympa sur la création d'emails responsives en 7 étape. Le tuto est en anglais mais est largement compréhensible. Creation d'un email responsive en 7 étapes... Fri, 10 Jul 2015 10:26:26 GMT Jacques Danilo http://www.pixelcrea.com/blog/booster-prestashop/ http://www.pixelcrea.com/blog/booster-prestashop/ Prestashop a un inconvenient de taille, il est lourd et donc lent au chargement des pages. Comme le temps de chargement des pages pour Google a son importance, les sites réalisés avec Prestashop sont le plus souvent défavorisé malgré que Prestashop soit un très bon CMS pour la vente en ligne aujourd'hui leader sur le marché... Heureusement il existe certains réglages qui permettent de résoudre ou réduire quelques soucis coté performance de Prestashop. Les réglages de performances Dans votre administration, vous avez une page prévue pour optimiser le rendu des pages, la mise en cache et le temps de chargement de votre site. Pour cela il faut aller dans Paramètres avancés > Performances : SmartyIl faut que la compilation des templates recompile les fichiers de templates s'ils ont été mis à jour en activant le cache. Le cache permet de garder en mémoire la dernière version de la page. Si elle n'a pas été modifiée, le système de gestion du cache de Prestashop retournera la page en HTML uniquement, alors que si une modification a été réalisée Prestashop recompilera cette page. Fonctionnalités désactivablesLes déclinaisons, caractéristiques et groupes de clients dans votre administration de Prestashop peuvent être désactivées, mais seulement si vous n'utilisez pas ces options.  Concaténation, compression et mise en cache (CCC de Prestashop)Pour tous les réglages de cette rubrique, il faut les mettre à oui lorsque vous êtes en phase de production, puisque Prestashop concaténera toutes les feuilles de styles CSS des différents modules ainsi que les fichiers JS et le code HTML afin de ne charger qu'une seule feuille de style, un seul fichier JS (en fin de page), ce qui est fortement conseillé pour le référencement et d'éviter de faire trop d'aller)retour entre le serveur et l'internaute. La mise en cacheActivez le système de mise en cache proposé en bas de page en utilisant le système de cache par fichiers (qui ne necessite aucune intervention sur le serveur) Les autres réglages de Prestashop La compression des imagesDans le menu Préférences > Images vous pouvez changer la compression des images pour qu'elles soient un peu plus léger, mais qui aura un impact direct sur la qualité des images. Idem sur le format des images entre le JPG (léger) et le PNG (un peu plus lourd mais qui garde la transparence de vos images si besoin). Si vous changez ces paramêtres n'oubliez pas de regénérer les miniatures pour que toutes vos images subissent les modifications demandées (même les anciennes images) Le choix du thème graphique de PrestashopLes différents thèmes du marché ne sont pas tous bien optimisés : problème en temps de chargement, problème sur le poids du thème, sur la sémantique employée... Faites donc un vrai tour d'horizon d'un thème Prestashop avant de l'acheter ! Le remplissage des différents modulesLorsque vous modifiez un module pour y placer une image, un logo, ou un autre média, pensez toujours au poids des fichiers. Sous Photoshop par exemple il existe l'enregistrement pour le web qui compresse de manière importante vos images. Il existe d'autres outils en ligne pour compresser efficacement vos images Surveiller votre serveurLe serveur où se trouve votre boutique Prestashop doit être également surveillé afin de vérifier que les caractéristiques techniques de votre hébergement permettent bien l'utilisation de Prestashop. Consultez votre hébergeur pour lui poser la question si besoin.   J'espère que ces quelques conseils vous permettront de gagner en rapidité et de réduire l'impact négatif sur votre référencement.... Tue, 07 Jul 2015 12:05:38 GMT Jacques Danilo http://www.pixelcrea.com/blog/trouvailles-du-web-13/ http://www.pixelcrea.com/blog/trouvailles-du-web-13/ Aujourd'hui au menu des Trouvailles du Web - Episode 13, nous allons avoir un peu de code, avec une lightbox jQuery, une analyse CSS, une autre lightbox responsive, un superbe script jquery pour du SVG, et un slider jquery ultra simple à mettre en place. Les trouvailles du web sont un recceuil de mes recherches sur Internet, je garde des pages ouvertes au fur et à mesure de ma veille, utilisant les blogs, facebook et twitter pour assouvir ma connaissance et ma culture web. J'espère que ces ressources vont interesseront autant qu'à moi. Un viewer de photos avec Glisse.js Simple et responsive, Glisse.js permet d'afficher des images en plein écran, simplement via le jQuery. Des transistions sont prévues entre les images par les actions suivant ou précédent. Une documentation très simple et très bien faite vous accompagnera pour monter ce script sur vos pages web. glisse.fr (site indisponible) Un analyseur de feuilles de styles CSS CSS Analyser est un analyseur de feuilles de styles CSS. Il permet de le valider W3C tout en pointant du doigts certaines pratiques CSS qui ne seraient pas bonnes : déclaration des règles et des instructions, simplification du code, ... CSS Analyser (site indisponible) Une lightbox responsive avec Fresco Fresco est un système de lightbox (zone s'ouvrant par dessus le site web sans quitter la page) responsive et très léger qui permet de charger des vidéos Youtube et Viméo. Les démonstrations vous prouveront que ce script est tout simple et qu'il fonctionne bien sur un ordinateur, une tablette et un smartphone Fresco, responsive lightbox Du dessin SVG en jQuery Très original, Lazy Line Painter permet d'animer un dessin au format SVG sur nos pages web. Pour cela il suffit d'enregistrer un fichier illustrator en SVG en respectant quelques règles : ne pas cloturer les lignes (les laisser avec un début et une fin), pas de formes pleines, etc... Le fichier jQuery fera le reste et vous animera l'ensemble comme si quelqu'un était en train de le dessiner en live. Très sympa ! Lazy Line Painter Un slider jQuery on-ne-peut-plus-simple ! Encore un slider, oui c'est vrai, mais celui là est vraiment simple à utiliser. Regardez vous-même ! Unslider (site indisponible)... Mon, 01 Jun 2015 16:19:00 GMT Jacques Danilo http://www.pixelcrea.com/blog/personnaliser-google-maps/ http://www.pixelcrea.com/blog/personnaliser-google-maps/ SnazzyMaps est un service gratuit qui vous permettra très rapidement d'intégrer un style visuel à vos cartes Google Maps. Très imple d'utilisation avec une documentation extrêmement claire (en anglais par contre) vous pourrez intégrer en quelques secondes un style pour votre carte. Explorez les dizaines de styles déjà proposés sur le site ou créez votre propre style grâce à l'éditeur. Il existe même un plugin gratuit pour Wordpress afin de personnaliser encore plus facilement vos cartes. Très pratique pour personnaliser l'expérience utilisateur et sortir un peu du code couleur très répandu de Google Maps, SnazzyMaps est fait pour vous, même sans compétences importantes en HTML/CSS/JQUERY...... Thu, 07 May 2015 15:00:12 GMT Jacques Danilo http://www.pixelcrea.com/blog/conseils-hebergement/ http://www.pixelcrea.com/blog/conseils-hebergement/ Il existe de nombreux hébergeurs sur le marché, et le plus souvent ils nous proposent plusieurs offres d'hébergement de sites web allant de quelques dizaines d'euros par an à plusieurs centaines d'euros. Nous allons ensemble essayer de décripter les différentes offres et de comprendre quels sont les éléments importants à prendre en compte en fonction de votre site. Voici les différentes options proposées le plus souvent et comment bien les choisir. Les types de serveurs Il existe aujourd'hui 3 formes principales de serveur : le serveur mutualisé, le serveur dédié et l'offre intermédiaire, le VPS : virtual private serveur. Un serveur est ni plus ni moins qu'un ordinateur (ou une partie) quelque part dans le monde que vous allez louer à l'année en fonction du type de site internet que vous aurez besoin à l'avenir. Le serveur mutualiséC'est le type de serveur que presque tout le monde prend aujourd'hui : il est bon marché et présente des caractéristiques largement suffisante pour un site vitrine d'entreprise, voir même pour du site marchand. Le principe est le suivant : vous êtes avec des dizaines d'autres sur la même machine. Si vous avez besoin pour un calcul par exemple de 50% de la puissance de la machine vous pourrez l'avoir car vous mutualisez les ressources avec les autres. Mais à l'inverse, si un autre site du serveur utilise beaucoup de ressources vous vous partagerez le restant. Pour afficher du HTML simple (création d'un site vitrine tout simple) ou pour utiliser un CMS léger (comme Wordpress sans trop de plugins) c'est l'option qu'il vous faut. Mais s'il vous faut des ressources importantes (comme un site marchand par exemple avec Prestashop), cela va devenir assez problématique sur du long terme. Le serveur dédiéLà on joue dans la cours des grands, puisque vous louez à l'année une machine rien que pour vous. Le prix sera en conséquence forcément, mais les ressources ne seront que pour vous. Si votre but est de mettre un Wordpress cela ne vaut peut-être pas le coup, mais pour un site marchand de grande ampleur, cette solution pourrait bien vous plaire : gros processeur, grande capacité de disque dur et beaucoup de mémoire vive. Le gros inconvénient est l'administration d'un tel serveur : il vous faudra connaitre les lignes de commandes et mettre à jour le serveur vous-même (apache, mysql, et d'autres petites choses ici et là. Problème de taille surtout aujourd'hui : la sécurité informatique ! Et oui, c'est à vous d'administrer le serveur dédié, donc d'en assurer la sécurité, surtout si vous stockez des informations clients ! Le serveur virtuel (le VPS)L'offre intermédiaire entre le partage des ressources (le serveur mutualisé) et la solution autonome (le serveur dédié) est le serveur virtuel (ou virtual serveur dédié - VPS) : vous louez une partie définie d'un serveur dédié administré. En clair, vous louez par exemple 1/10ème du serveur, ce qui veux dire 1/10ème du disque dur, 1/10ème de la rapidité du processeur, 1/10ème de la mémoire vive, etc... C'est un très bon compromis au serveur dédié, d'habord par rapport au cout d'un tel serveur, et sur son administration. Aujourd'hui beaucoup d'hébergeurs se propose de gérer pour vous la notion de sécurité et/ou de mises à jour du serveur virtuel. Les points à prendre en compte pour un hébergement En plus du type de serveurs à prendre en compte, il faut également regarder de plus prêt les différentes offres pour savoir si votre site pourra fonctionner dessus parfaitement et si les limites vous permettent un peu de liberté tout de même. L'espace disqueL'espace disque s'est bien agrandi ces dernières années mais cela peut-être un facteur important. Un site vitrine tout simple (avec une partie blog/actualité et portfolio, devrait faire moins de 100Mo, dans quel cas toutes les offres que vous trouverez sur Internet permettront d'y mettre votre site. Mais si vous passez par une solution en site marchand comme Prestashop, sachez qu'il vous faudra un peu plus de places. Pour vous donner un ordre d'idée, Prestashop vide fait déjà presque 50 Mo, et un site marchand disposant de 100 articles (en prenant en compte 3 photos par article) fera environ dans les 250 à 500 Mo. Prestashop par exemple gardera sur le serveur votre photo originale et produira environ 5 à 8 formats d'images pour chaque image produit. La taille du disque dur deviendra donc vite un problème si vous avez 1000 références produits dans votre base. Le nombre de bases de donnéesSi vous ne mettez qu'un seul site Internet sur votre hébergement, une seule base de données suffira le plus souvent, mais le nombre de bases pourrait être différent si vous scindez votre site en 2 par exemple (site vitrine d'un coté et site marchand de l'autre, voir pourquoi pas un blog très riche en plus). Dans ce cas plusieurs bases de données pourraient permettre un accès différent entre le site marchand, le blog et la partie vitrine - et qui optimiserai également les temps de réactions dans les différentes parties de votre site La taille de la base de donnéesLa taille maximale autorisée est également à surveiller si vous devez stocker énormément de données. Pour un site marchand, vous devrez stocker les produits, les clients et les commandes notamment. Malgré le fait qu'une base de donnée n'est en réalité que du texte (donc un format très léger) une base de donnée de 50Mo deviendra très vite insuffisante pour un site marchand.  La limitation de traficIl est possible que certaines offres (pour les hébergements mutualisés) vous limite à un nombre de visiteurs par mois. Faites attention donc pour ne pas se retrouver les derniers jours du mois à la limite pour voir un message désagréable du serveur au lieu de votre site Internet. Regardez également le nombre d'accès serveur simultanés, critère qui limite le nombre d'internautes en même temps sur le site. Certaines offres limitent à 10 connexions max. Attention, ce n'est pas 10 personnes sur le site au même moment, mais si les 10 chargent la page d'accueil en même temps, un 11ème qui arriverait sur le site au même moment aura un temps de réponse beaucoup plus important. Et on sait que le temps de réaction d'un serveur est important pour le référencement !  Le nombre de boites mails à créerMême si vous pourrez toujours prendre une option en plus, prévoyez à l'avance le nombre de boites mails que vous devrez utiliser. Dans une entreprise, quasiment tous les employers ont une boite mail pro qui peut être créer. Beaucoup d'offres aujourd'hui se limite à 10 boites mails...  Les versions des languages de développementSi vous utilisez un CMS (wordpress, prestashop, joomla, etc...) renseignez vous également sur les versions de PHP et de MySQL utilisés par les dernières versions stables de ces CMS, il est possible que votre hébergeur ne dispose pas encore des bonnes versions.   Mais dans la réalité ? Pour finir sur les différentes offres, sachez qu'il est important de bien choisir au démarrage son offre en fonction de ses besoins, mais qu'il est impératif de suivre l'évolution de son site. Un petit blog d'entreprise faisant le buzz à un moment donné doit être capable de supporter la charge de visiteurs à ce moment là... Surveillez de temps en temps (tous les 6 mois) l'évolution des besoins : espace disque, taille de la base de données, nombre des visiteurs, ... Si vous n'avez pas le temps de le faire, sachez qu'en travaillant avec un professionnel, celui-ci pourra vous suggérer de changer d'offre en fonction de l'évolution de votre site voir même piloter cette action.... Mon, 27 Apr 2015 09:26:58 GMT Jacques Danilo http://www.pixelcrea.com/blog/trouvailles-du-web-12/ http://www.pixelcrea.com/blog/trouvailles-du-web-12/ Pour ce douzième épisode des Trouvailles du Web, nous aurons au menu des dégradés CSS 3 très simple à utiliser, un slider 3D en jQuery et CSS3, un site pour donner un style retro à vos photos, un générateur de formulaire html/css et des effets de textes avec jQuery. Du code, du code, et encore du code ! On est parti ? Générateur de dégradés CSS3 L'outil de ColorZilla est très pratique si vous avez besoin de gérer un dégradé en CSS3 : comme la palette de dégradé sous Photoshop ou Illustrator, indiquez vos couleurs au bon endroit pour créer un dégradé parfait. En plus, le site dispose de presets qui vous permettra de gagner un temps fou. Il ne restera qu'à faire un copier-coller du code généré pour pouvoir l'utiliser pour la construction CSS de vos pages web. Tout simplement indispensable ! Ultimate CSS Gradient Generator Une gallerie CSS3/jQuery en 3D Tympanus.net nous propose gratuitement un slider 3D, idéal pour présenter des images comme iTunes ou le finder d'Apple. Vous aurez différentes options possible, comme l'effet particulier à 3 éléments, ou l'auto-slide. 3D Gallery with CSS3 and JQUERY Besoin de photos vintages ? VintageJs.com est un site qui vous permet en quelques secondes de donner un effet old-school/vintage à vos photos. Vous importez votre photo, vous choisissez l'effet souhaité, et vous enregistrez votre photo. Très simple, et les effets sont plutôt sympatiques. vintagejs.com Des formulaires HTML en quelques clics Form Builder permet en quelques clics de concevoir son propre formulaire, avec des options très interessantes. On peut personnaliser les styles et les effets d'hover sur chaque champs du formulaire. Très intuitif, le formulaire se monte très vite. Les boutons de génération du HTML et du CSS nous permettent de récupérer son travail. Form builder Des effets de textes CSS3 Textillate.js est un petit plugin jquery pour avoir des animations amusantes sur vos textes html. Il existe des dizaines d'animations qui permettent des effets interessants. A voir ! Textillate.js   J'espère que cette sélection vous donnera plein d'idées. Rendez-vous au prochain numéro mes loulous... Sun, 15 Mar 2015 15:53:36 GMT Jacques Danilo http://www.pixelcrea.com/blog/10-astuces-backlinks/ http://www.pixelcrea.com/blog/10-astuces-backlinks/ Le netlinkig et la gestion des liens retours (backlinks) sont 2 choses très importantes dans l'optimisation du référencement de votre site Internet (le SEO). Voici 10 pistes et conseils à suivre pour améliorer son référencement : de la réflection, de la sélection, et une dose d'optimisation pour les réseaux sociaux et la rédaction intelligente ! Tout un programme !   1. Des liens réfléchis pour une meilleure prise en compte Avoir 1000 liens retours, c'est bien, mais le mieux est d'en avoir de qualité : vos liens retours doivent être dans un contenu en lien avec la page cible. Concraitement si vous parlez de cuisine, avoir un lien du garagiste n'offre que peu d'interet, simplement puisque vous ne traitez pas du tout du même sujet d'une page à l'autre. Il est bon de se positionner dans des sujets qui correspondent à votre contenu 2. Des liens retours en masse ? Faites-le directement ! La qualité est importante, comme évoqué dans le premier point. Mais lorsque l'on parle de quantité il faut être prudent, et donc ne pas partir sur des solutions gratuites ou payantes qui génèrent un maximum de liens, le mieux est de le faire manuellement, en contactant le webmaster. Certes vous y passerez plus de temps, mais le volume sera en lien direct avec la qualité ! 3. Les témoignages Les témoignages peuvent être un près bon moyen de faire du backlink : proposez à vos partenaires de rédiger vous-même un témoignage qu'il pourra afficher sur son site. Ainsi, vous proposerez un contenu texte en y plaçant certains mot-clefs importants pour vous, en précisant de faire lien sur le nom de votre entreprise, évidemment ! 4. La rédaction d'articles C'est certainement ce qui prend le plus de temps, mais le retour est viral ! Proposez à des blogs dans votre secteur d'activité de rédiger un ou plusieurs articles sur le domaine. Cela permettra de vous rendre plus visible, avec un lien systématique vers votre site web. C'est aujourd'hui un des excellent moyens de faire du lien de très très bonne qualité puisque c'est votre propre contenu que l'on retrouve sur un site influant ! 5. Les infographies Comme les articles, proposer une infographie dans votre domaine peut vous apporter un traffic et vous faire faire le buzz sur les réseaux spécialisés (réseaux sociaux, blogs...) 6. Les communiqués de presse Vous avez des choses importantes à dire (rapports d'activités, modification de l'entreprise, virage important) faites le à travers des sites spécialisés dans votre domaine. 7. Du contenu viral pour les réseaux sociaux Proposez un contenu riche, avec un titre accrocheur, spécialement dédié au partage sur les réseaux sociaux. Indiquez ce contenu à vos amis en le partageant sur votre profil ou page d'entreprise, mais diffusez le aussi dans différents groupes liées de prêt ou de loin à votre activité. En préparant votre page comme il se doit (bonnes balises, optimisation du format d'images pour les réseaux sociaux, ...), votre contenu sera partagé de nouveau et vous ferez le buzz ! N'oubliez pas de l'alimenter et d'y participer en répondant à certains commentaires afin d'être encore plus visible ! 8. Donnez du gratuit, et encore du gratuit Un très bon moyen d'interesser les visiteurs est de proposer du gratuit : ressources graphiques, livres blancs, informations légales et lois associés à votre domaine d'activité... C'est tout bête mais cela peut servir enormément ! 9. Les liens payants Même si Google n'aime pas ça, il peut être bon de se rapprocher de sociétés vous proposant de faire du lien à votre place de manière rémunéré. Ils auront un algorithme qui vous evitera d'être sur des pages à faible valeur afin de gagner en popularité pour un meilleur positionnement 10. Développez une communauté Pourquoi ne pas proposer un forum ou un blog participatif, afin que les internautes puissent trouver un endroit où la discussion est ouverte ? Beaucoup feront naturellement un lien pour informer leur communauté que votre site est LA plaque tournante où il est bon d'y être !   J'espère que ces conseils vous aideront à créer de meilleurs backlinks autour de votre site web. Bon SEO les loulous !... Sun, 01 Mar 2015 18:26:50 GMT Jacques Danilo http://www.pixelcrea.com/blog/planete-ecommerce-vannes/ http://www.pixelcrea.com/blog/planete-ecommerce-vannes/ Ca y est, l'inscription est possible pour la 3ème édition de Planète e-commerce à Vannes qui se déroulera le 31 mars au Palais des Arts et des Congrès de Vannes. Sur toute une journée, vous aurez la possibilité de participer à des conférences sur des sujets aussi variés que la création du cahier des charges, les market-places, les nouveaux enjeux de Google Adwords ou le choix de la solution pour son site marchand. Coté intervenants, de nombreux professionnels vous feront partager leurs astuces et des conseils du métier, mais surtout de bénéficier de leur expérience sur des domaines bien spécifiques. Je pense notamment à Renaud Varoqeaux, Fondateur et gérant de l'agence 404, et à Yann Lavarec, de la société Soledis, qui présenteront ensemble les règles d'or pour la création d'un cahier des charges et du business plan pour votre site Internet. La journée est chargée puisque de 9h à 18h sans interruption les ateliers se succèderont. Prévoyez les casse-croutes :) Inscription au salon Planète e-commerce à Vannes L'inscription est gratuite, pour cela il suffit simplement d'aller sur leur site et de s'inscrire aux différentes parties qui vous interessent, puisque sur certain créneaux se déroulent plusieurs ateliers. Site de l'évènement Planète e-commerce : http://www.planeteecommerce.com/bretagne/ Un graphiste freelance dans la salle Je n'y participe pas en tant qu'intervenant mais je me suis inscrit pour la journée complète. Donc pour mes amis, collègues, et clients, si vous êtes disponible cette journée là nous pourrions y participer ensemble. Cela sera également l'occasion d'en discuter. Clients qui m'accompagneront : - Anne-Christine (Société Ty Dressing) - spécialisée dans la vente de vêtements pour enfants   Si vous y aller faites le moi savoir !... Thu, 05 Feb 2015 12:44:55 GMT Jacques Danilo http://www.pixelcrea.com/blog/recrutement-commercial/ http://www.pixelcrea.com/blog/recrutement-commercial/ Dans le cadre de mon activité de formateur et de graphiste, je recherche un agent commercial (homme ou femme). La mission sera de prospecter et d'apporter des solutions en formation auprès des entreprises sur le secteur 44 (Nantes, Saint-Nazaire), 35 (Rennes), et 56 (Vannes). L'agent commercial devra prospecter par téléphone et organiser des rendez-vous afin d'expliquer les différentes formations du catalogue en lien avec leur activité professionnel et/ou leur communication. Il/elle devra également suivre le processus de formation aussi bien en amont (préparation du dossier de prise en charge, planning) mais également en aval (récupération des bilans de formations, émargement des stagiaires, ...). Le commercial sera en lien direct avec les clients tout au long de la mission de formation. Le poste est à pourvoir dès aujourd'hui. Je l'accompagnerai dans les premières missions et une à deux journées seront à prévoir afin de connaître au mieux mon catalogue de formations. Profil recherché Commercial débutant ou confirmé, avec expérience souhaitée dans la vente par prospection (idéalement de la vente de formations). L'agent devra être autonome dans sa prospection et dans le suivi de clientèle. Permis B et voiture obligatoire. La rémunération serait en moyenne de 2500 à 3000 euros sur commissions uniquement. Pour postuler... Merci d'adresser un mail à contact@pixelcrea.com avec CV et lettre de motivation.... Fri, 30 Jan 2015 00:20:31 GMT Jacques Danilo http://www.pixelcrea.com/blog/trouvailles-du-web-11/ http://www.pixelcrea.com/blog/trouvailles-du-web-11/ Pour les graphistes, webdesigners, infgraphistes ou simplements fans de ressources web en tout genre, voici ma onzième petite sélection de liens en tout genre, du tout-venant en somme. Au fil de mes navigations sur Internet, je garde des ressources qui pourraient m'être utiles pour mes projets, donc peut-être utiles pour vous :) Au menu aujourd'hui, des palettes de couleurs gratuites et originales, des planches de tendances par Niice, un script jQuery pour du texte dynamique, un slider responsive en jQuery optimisé pour le tactile, et Slask pour du travail colaboratif. Des palettes de couleurs par Loading.io Loading.io nous propose une petite page tout simple pour trouver des associations de couleurs pour la création de nos visuels/graphismes/maquettes web. Très pratique ! Infinite Palettes par loading.io Niice.co - pour de l'inspiration graphique On y trouve de tout : des illustrations, du traditionnel, de la photo, du print comme du web. Une sélection de petites perles graphiques dans plein de styles très différent. Je ne m'en lasse pas ! Niice.co TheaterJS, par Gabin Aureche Un petit script très simpathique qui permet de dynamiser un texte donnant l'impression que le texte s'écrit au fur et à mesure. De plus l'exemple présenté est très drôle avec le dialogue entre Luke et Dark Vador. Je suis très fan ! TheaterJS Flickity Voici un slider jQuery optimisé pour le tactile et responsive, de quoi proposer une expérience utilisateur interressante sur smartphones et tablettes. A essayer d'urgence ! Script responsive et tactile Slask - la messagerie collaborative Si comme moi vous travaillez avec plusieurs acteurs à distance, Slask est fait pour vous : il permet de tchatter à plusieurs en partageant des ressources, en créant des groupes (hashtags) tout en permettant la discussion privées entre plusieurs personnes dans le groupe. Un must qui m'a servi plusieurs fois avec des agences notamment ! Slask... Fri, 23 Jan 2015 10:21:21 GMT Jacques Danilo http://www.pixelcrea.com/blog/tendances-seo-2015/ http://www.pixelcrea.com/blog/tendances-seo-2015/ Boostez votre référencement naturel en 2015 avec 7 points importants à ne pas oublier et à contrôler dès aujourd'hui : le contenu, les signaux et réseaux sociaux, la sécurité du site Internet, le responsive design, la sémantique de vos pages, le netlinking, le multimédia et le retour sur investissement. Tous ces points vont être essentiels en 2015 pour booster votre positionnement et atteindre les premières places/pages sur les moteurs de recherche, surtout sur Google ! Voici le détail des axes d'améliorations possibles pour votre site web en 2015. L'optimisation du contenu Depuis la mise à jour de l'algorithme de Google avec Penguin 3.0 notamment, il devient indispensable de proposer un contenu frais, unique, et riche ! La richesse du contenu prend en compte les tendances de recherches, votre positionnement et le comportement de vos visiteurs : restent-ils longtemps sur votre page, d'où viennent-ils, où partent-ils ensuite ? Donnez des informations pertinantes, et axez votre référencement sur les bons termes/mots-cles. Les signaux sociaux Les moteurs de recherche regardent aujourd'hui votre présence sur les réseaux sociaux et pour les réseaux sociaux ! Proposez sur vos pages des liens de partages sur les réseaux sociaux importants (Twitter, Facebook, Google+, ...) mais préparez également vos pages à être partagées le plus efficacement possible : balises adaptées, images bien nommées, balises meta renseignées, titre court, etc... La sécurité du site Internet le https se démocratise et devient un paramêtre important au positionnement de votre site sur les moteurs de recherche. Non seulement important pour la sécurité de votre site, il est devient également important pour le positionnement Google. Coté sécurité, il devient aujourd'hui indispensable d'avoir un certificat SSL pour vos phases de paiement sur Internet (le fameux petit cadenas) - même si on trouve encore des espaces de paiement par CB non sécurisés, mais le SSL protège aussi certaines actions de piratage bien connus des hackers. Le responsive design Le mobile-friendly de Google, c'est à dire la prise en compte d'une interface CSS (grâce aux media-queries du CSS3) différente pour les mobiles et tablettes. Votre site doit disposer d'une adaptabilité de son interface à vos utilisateurs smartphones, c'est important puisque le nombre de visiteurs via ses plateformes se multiplient de plus en plus, surtout si vous avez un contenu apprécié des réseaux sociaux... La sémantique HTML Le balisage de vos informations sur vos pages est important : une seule balise H1, 2 balises H2 au minimum, des balises H3 si besoin, etc... La sémantique permet à Google de comprendre la hierarchie de votre contenu et l'indexe alors plus facilement et à une meilleure position. Ne l'oubliez pas ! Le netlinking Le texte utilisé dans les liens vers votre site est encore plus important, Google l'a annoncé cette année. Maintenant, les moteurs de recherches mettent en avant plus facilement les contenus de pages où les liens entrants sont bien nommés (lien/rapport entre le nom du lien et le contenu de votre page) mais également la popularité sur les réseaux sociaux. Repensez alors peut-être vos campagnes de netlinking ! Le multimédia Avoir un contenu texte, avec une bonne sémantique, est vraiment la base de votre référencement naturel, mais il faudra proposer pour 2015 un contenu riche, comprenant les photos, images, infographies, graphiques et vidéos pour optmiser votre positionnement sur Google Image mais également pour la recherche classique. Conclusion Les tendances de 2015 pour le SEO vont dans un seul et même sens : du web propre, riche et bien structuré (aussi bien dans la sémantique que dans le netlinkig et les réseaux sociaux). Alors à vos ordis, on a tous du pain sur la planche en 2015 :) Bon SEO à tous !... Wed, 10 Dec 2014 14:44:57 GMT Jacques Danilo http://www.pixelcrea.com/blog/histoire-logo/ http://www.pixelcrea.com/blog/histoire-logo/ Voici le gros virage de mon identité visuelle. Je viens de mettre à jour le logo de mon entreprise. Un exercice qui m'a demandé du temps et de la réflexion avant d'être sur de vouloir communiquer avec cette nouvelle communication. Vous verrez certainement mon ancien logo puisque qu'il traine encore mes anciennes cartes de visites un peu partout. Du coup, je me suis préter au jeu de vous présenter l'évolution graphique de mon logo de sa création en 2006 pour l'ouverture et le lancement de mon activité de graphiste freelance. Le logo a évolué d'années en années, s'adaptant aux nouvelles tendances graphiques. Mais ces changements étaient vraiment légers jusqu'à aujourd'hui où je lache cet idéogramme en écriture manuscrite pour la lettre P présente derrière mon logo depuis 2007 pour arriver sur une forme plus actuelle et cette lettre P plus carrée, plus imposante, vient prendre place. Voici l'historique complet depuis la création du logotype en 2006. Création du logo en 2006 Voici la toute première version de mon logo créé en 2006 au moment où l'idée d'être indépendant se fait sentir. L'idée du nom provient du terme création que je voulais mettre en avant, et le terme pixel provient de la création sous Photoshop, mon logiciel favori. La baseline (slogan) devait être en lien avec les agences de communication. Le terme communication devait être affiché : d'où le slogan de communication visuelle. L'idée était suffisamment large pour accueillir de nouvelles prestations au fur et à mesure de l'évolution de la société. Puisqu'au lancement, mon but était avant tout de me rapprocher du cinéma, ma grande passion depuis toujours ! On y ajoute la lettre P en 2007 Le logo se construit un peu plus, la lettre P servant d'idéogramme se rajoute derrière la typo, qui donnera un effet plus massif au logo. Je voulais rajouter quelque chose de plus souple et de plus graphique à l'époque que la simple typographie utilisée. Une lettrine en écriture serif faisait bien l'affaire, créant des courbes dans le logo. A l'époque, les arabesques et autres dessins/patterns étaient très à la mode. Du relief pour PixelCréation en 2008 On est vraiment dans l'époque du relief : des ombres, un effet de reflet sur une vitre. Je donne donc ces effets à mon logo de graphiste indépendant avec une ombre un peu plus diffuse pour la lettrine/idéogramme et le terme PixelCréation se voit transformé pour avoir un léger dégradé et une ligne blanche donnant un aspect vitré, lumineux, et brillant. 2010 : je rajoute au logo son reflet Les contrastes sont moins marqués entre Pixel et Création, la lettrine est plus light également. La grosse nouveauté est en réalité son reflet et son ombre, donnant l'impression que le logo est posé sur une surface brillante. Ceci donnera un effet de relief et d'importance. Changement de typo en 2012 Je commencais à saturé de cet aspect carré, très angulaire dans mon logo. Cet aspect ou cette impression venait de la typographie utilisée à l'époque. Je décide donc de changer cela et j'opte pour une typo plus arrondie. J'avance également en jouant sur la graisse de la typo pour différencier encore plus le mot Pixel au mot création. Et le logo jusque là en noir et blanc se voit passer en couleur. C'est léger, mais les couleurs employées pour ma communication papier et en ligne s'étaient arrêtées sur les nuances bleus et verts citrons. 2014, le grand virage ! On quitte ici complètement l'idée d'origine, pour simplifier le logo. On oublie la superposition de la typo, on écrit en minuscule et on change totalement l'idéogramme. Adieux la lettre P en serif mis derrière le texte pour arriver sur quelque chose de plus moderne, où la lettre P apparaît toujours mais en négatif dans hexagone composé d'autres hexagones. Que pensez-vous du nouveau logo ? N'hésitez pas à me dire ce que vous en pensez, je suis ouvert à la critique (tant qu'elle est constructive ^^)... Wed, 19 Nov 2014 22:29:31 GMT Jacques Danilo http://www.pixelcrea.com/blog/trouvailles-du-web-10/ http://www.pixelcrea.com/blog/trouvailles-du-web-10/ Ca y est, la barre des dix épisodes des trouvailles du web est franchie ! Quand j'ai commencé cette série je ne savais pas trop vers quoi j'allais : à chaque ressource trouvée je me pose systèmatiquement la même question : dois-je en parler sur le blog du freelance ? Et si oui est-ce que j'en fais un article ou est-ce que j'attend pour faire un nouvel épisode des trouvailles du web... Alors je garde des onglets ouverts dans mon navigateur préféré en attendant le moment où je prendrai le temps de rédiger un article complet ou faire un petit patchwork de différentes ressources. 10 épisodes, ça y est, c'est fait !!! Au menu toujours pareil, 5 ressources triées sur le volet, que je trouve pertinantes : aujourd'hui nous aurons du PSD et du HDR sous Photoshop en entrée, en plat principal de la ressource gratuite de templates mobiles, un peu de javascript et jquery pour le fromage et au dessert une liste de sites pour trouver des clients. Oui, parce qu'après le repas on repart à la recherche de travail... :) 30 fichiers Photoshop gratuits pour les designers GDJ, ou plutôt Graphic Design Junction, est un blog de référence pour les graphistes. Et l'article que je vous présente ici est un reccueil de 30 PSD (fichiers photoshop) pour les designers. On y retrouve des templates print et web, du mockup, de la texture à gogo, bref, une très belle collection de ressources gratuites pour Photoshop ! 30 ressources gratuites pour photoshop De la création HDR pour Photoshop Un petit tutoriel très rapide pour simuler du HDR sur vos photos. Petite technique certes, mais qui pourra certainement rattraper un peu certaines de vos photos ou en dynamiser l'impacte. Merci à Creative Nerds pour ce petit tuto Un effet HDR dans Photoshop Mobil Mozaic Très beau site d'inspiration graphique autour de l'application mobile. On retrouve des projets mobiles (applications ou web-apps) sous plusieurs vues. Site très utile lorsque l'on se lance dans le graphisme d'applications smartphones ou tablettes, afin de comparer les différentes présentations et navigations possibles. Un must et une très belle collection. Voir la galerie de design pour smartphones Du scroll maîtrisé grâce à jQuery Un petit plugin jQuery pour contrôler les scrolls dans nos pages webs. Que ce soit le scroll de la page, d'une partie précise, aussi bien verticalement qu'horizontalement, jQuery custom content scroller vous permettra de maîtriser très facilement l'aspect graphique. De plus le site et le plugin sont très bien documentés et proposent quelques thèmes graphiques déjà tout prêts. Très interessant pour finir le look de votre site (ou celui de vos clients bien sur...) jQuery custom content scroller 60 sites pour trouver des clients quand on est indépendant Le site auto-entrepreneur info nous propose une sélection de sites pour nous aider à trouver des clients dans différents domaines comme le développement, le graphisme, et d'autres rubriques... Je ne connais pas ces plateformes, je ne les ai jamais utilisées donc je ne peux pas vous apporté de conseils sur le sujet. Cela sera un sujet à développer dans les mois à venir peut-être... En attendant voilà de quoi vous aider si besoin : 60 sites pour trouver des clients   Et bien voilà, c'est déjà fini pour cet épisode 10 des trouvailles du web. N'hésitez pas à consulter les autres épisodes sur mon blog de freelance. Bonne lecture et bon surf.... Sun, 16 Nov 2014 16:10:52 GMT Jacques Danilo http://www.pixelcrea.com/blog/catalogue-formation/ http://www.pixelcrea.com/blog/catalogue-formation/ Ca y est, l'édition 2015 est terminée et vient de partir à l'impression : 72 pages de formations que je propose en tant que formateur freelance dans le grand ouest. Les formations sont organisées par domaines d'interventions : les métiers du web, l'infographie et la photographie. Vous y retrouverez les objectifs de formation, un programme détaillé, les pré-requis ainsi que d'autres informations autour de la formation. Des nouveautés vous attendent également dans cette édition 2015. N'hésitez pas à me contacter pour recevoir ce nouveau catalogue par mail au format PDF ! Je couvre les régions suivantes : Bretagne, Pays de la Loire, Basse Normandie, Haute Normandie, Poitou-Charentes, Centre et Ile de France... Sommaire du catalogue 2015 Voici le sommaire de ce catalogue de formation 2015 de 72 pages autour des métiers du web, des logiciels de la suite Adobe et du mon de de la photo (prise de photo et retouche photo) : - Explication sur les formations proposées - Les métiers du web : 38 formations triées sur le volet du cahier des charges au développement personnalisé en passant par des CMS comme Joomla, WordPress ou Prestashop... - Infographie et Print : 12 formations sur les logiciels de la suite Adobe (Photoshop, Illustrator, InDesign, Acrobat) et sur la communication globale... - Photographie : 8 formations autour de l'utilisation des photos en entreprises : photos studio ou extérieurs, travail sur la lumière et retouche photo... - Les autres services : Création graphique, accompagnement client, Reportage photo, ... - Des références clients Demandez votre catalogue Si vous souhaitez recevoir ce catalogue au format PDF (72 pages - 950 Ko) n'hésitez pas à me contacter. Je me ferais un plaisir de vous l'envoyer rapidement. Merci de me préciser si vous êtes un organisme de formation recherchant un formateur externe ou une entreprise qui souhaite avoir une formation particulière.... Mon, 10 Nov 2014 15:41:08 GMT Jacques Danilo http://www.pixelcrea.com/blog/lancement-site-web-check/ http://www.pixelcrea.com/blog/lancement-site-web-check/ Le lancement d'un site est une étape très importante pour la vie de votre site Internet : référencement, fonctionnement du site, tracking de vos visiteurs, marketing, aisance de navigation... Il y a toujours des choses à faire et il est important que le lancement se fasse dans les meilleures conditions possibles ! En qualité de créateur de site Internet depuis plusieurs années, j'ai receuilli des informations importantes à vérifier lors de la mise en ligne du site Internet d'un client pour un lancement de qualité, que ce soit au yeux de vos premiers visiteurs (qui donneront une tendance à suivre pour le référencement) mais surtout pour une prise en compte par les principaux moteurs de recherche (Google, Bing, ...) le plus facilement et rapidement possible... C'est au lancement que tout se joue ! Voici donc 50 points importants à vérifier pour chaque site que vous lancez. Certains points ne sont pas obligatoires : par exemple un fichier robot.txt permet de restreindre l'accès à certains robots, mais si le fichier n'existe pas il acceptera le passage de tous les robots... Le design du site web - La navigation est-elle clairement identifiée ? - L’interface du site est-elle compatible avec tous les navigateurs du marché ? (Safari, Google Chrome, IE toutes versions confondus, …) - Responsive webdesign : Le site Internet est-il supporté sur les tablettes et smartphones ? (iPhone, iPad, Android, Windows phone, …) - Le code HTML et la feuille de style CSS sont-il valides W3C ? - Un favicon a-il été créé ? - Le site possède-t-il une image sprite ? (interface, logo, boutons, … hors contenu) - Les images du site ont-elles étés optimisées (format du fichier, compression) - Les fichiers CSS ont-ils étés combinés en un seul et même fichier ? - Les fichiers JS ont-ils étés combinés en un seul et même fichier ? Le contenu des pages - Le contenu est-il unique et pertinent ? (longueur, conjugaison, grammaire) - Le contenu est-il suffisamment long ? (temps de lecture) - Le contenu est correctement balisé en HTML ? (niveaux de titres, listes, paragraphes) - Le texte possède-t-il des mises en avant ? (liens, éléments en gras ou en italique, division en sous-parties) - Le contenu est-il daté ? (actualités, blog, newsletters) - Retrouve-t-on les informations de contact dans la page ? (téléphone, adresse mail, adresse postale) - Présence d’une ou plusieurs images liées au contenu même ? (photos, illustrations, schémas explicatifs) - Les vidéos sont-elles importées correctement ? - Les fichiers à télécharger sont-ils faciles à trouver ? - Les sources et crédits photo sont-ils indiqués ? Fonctionnalités du site - Les formulaires fonctionnent-ils correctement ? - Existe-t-il une validation de formulaire en javascript ? - Existe-t-il une validation de formulaire en php ? - Existe-t-il une page de remerciement après chaque formulaire du site ? - Le moteur de recherche du site est-il fonctionnel ? - Les liens internes fonctionnent-ils tous ? - La page d’erreur 404 a-t-elle été créée ? - Le logo du site ramène-t-il bien vers la page d’accueil ? - Les éléments sociaux sont-ils en place ? (flux RSS, boutons j’aime, accès aux pages de vos réseaux sociaux) - Les mails automatiques sont-ils personnalisés ? (inscription à la newsletter, contact, commande) - La page « mentions légales » existe-t-elle ? - La page « plan du site » existe-t-elle ? Référencement du site Internet - Le temps de chargement des pages a-t-il été optimisé ? - Les pages possèdent-t-elles un titre unique et optimisé ? (balise meta title) - Les pages possèdent-t-elles une description unique ? (balise meta description) - Les mot-clés sont-ils indiqués sur toutes les pages ? (balise meta keywords) - Le flux RSS est-il correctement balisé ? - Existe-il un sitemap.xml à la racine du site ? - Le fichier robot.txt est-il présent ? - Les URL des pages sont-elles optimisées ? - Les redirections 301 fonctionnent-elles correctement ? (pour les anciennes pages du site) - Les balises de contenu HTML 5 sont-elles en place ? (header, footer, article, aside, …) - Les micro-formats sont-ils utilisés correctement ? - Le site a-t-il été soumis aux principaux moteurs de recherche ? (Google, Bing, …) - Le site a-t-il été analysé par des outils d’analyse du contenu ? (Google Webmaster Tools, Bing Webmaster Tools, …) L’analyse du site Internet - Présence du fichier d’analyse de Google Analytics sur toutes les pages publiques ? - Le compte/code de Google Analytics est-il bien configuré en fonction du profil du site ? (site marchand, blog, site vitrine, …) - Le compte Google Analytics permet-il d’analyser des tunnels de conversion et des objectifs clairement identifiés ? (acte d’achat, contact, inscription à une newsletter) Sécurité du site -Les failles PHP courantes ont-elles étés contrées ? - Une sauvegarde complète du site au lancement a-t-elle été réalisée ? (FTP, configuration serveur et bases de données) - Les mots de passe sont-ils tous sécurisés et complexes ? (mails, accès à l’administration, accès au FTP…)   J'espère que ces quelques points vous permettrons d'optimiser au mieux le lancement de vos sites Internet. Si vous voyez d'autres points à rajouter à cette liste, n'hésitez pas à laisser des commentaires, j'adapterai la liste en fonction. Plus qu'à vous souhaiter un bon lancement !... Fri, 17 Oct 2014 15:51:48 GMT Jacques Danilo http://www.pixelcrea.com/blog/dix-typos-gratuites-octobre/ http://www.pixelcrea.com/blog/dix-typos-gratuites-octobre/ Voici pour octobre une petite sélection de typographies gratuites pour vos créations numériques. Attention toutes ces typos ne sont pas forcément libre de droits, certaines sont des démonstrations limitées à quelques caractères et peuvent être ensuite achetées si on a besoin de les utiliser à des fins commerciales. Je ne vais pas le réexpliquer, ça vous le savez... Cette sélection d'octobre 2014 est exclusivement en provenance du site de Dafont.com - qui est je pense LE site de référence en terme de typos gratuites et/ou libres de droits. Le seul inconvénient est la trop grande diversité de leur collection, ce qui fait qu'on trouve de très très bonnes typos mais également beaucoup de déchets à mon humble avis. Ahhh, les gouts et les couleurs me direz-vous. Quoi qu'il en soit j'ai sélectionné pour vous les meilleures nouveautés de ces quelques dernières semaines pour vous. South African Lien vers la typo South African Hebe Lien vers la typo Hebe Macaroni and Cheese Lien vers la typo Macaroni and cheese Playsir Lien vers la typo gratuite Playsir Defonarts Lien vers la typo Defonarts Delphine et Mathias Script Lien vers la typographie gratuite Delphine et Mathias Tomb Raider Lien vers la typo de Tomb Raider Authentic Hilton Lien vers Anthentic Hilton (fonte gratuite) Good Karma Lien vers la typographie gratuite de Good Karma Story Book Lien vers Story Book (typographie libre de droit)   Bon téléchargement les amis. Et bonne créa :)... Tue, 14 Oct 2014 19:57:35 GMT Jacques Danilo http://www.pixelcrea.com/blog/google-chromecast/ http://www.pixelcrea.com/blog/google-chromecast/ Ca y est, Google lance un produit pour notre TV. On est d'ailleurs presque étonné qu'il ne l'ai pas lancé avant. Google était déjà sur nos ordinateur PC et Mac à l'aide de son navigateur, il a lancé Google Glasses et les Chromebooks. Il était également présent sur nos tablettes androids... Bref maintenant il est partout ou presque. A quand une radio Google ? Google Chromecast est la réponse légère à l'AppleTV ou encore à tous les micro-ordinateurs comme le Raspberry ou le Hummingboard. Il se branche directement sur un port HDMI de la TV et permet de se connecter au contenu web de plusieurs sites comme youtube, netflix, deezer, ... Il supporte les photos, vidéos et musiques. La diffusion se fait à travers un navigateur ou une application tablette compatible. Cela peut être très interessant en soirée par exemple où l'on pourra diffuser sur le home-cinéma le son de notre portable ou tablette, ou bien encore diffuser sur grand écran une vidéo youtube par exemple... Tout ceci fonctionne à travers le wifi domestique. Très simple donc. De plus, le site dédié à Google Chromecast nous permet de savoir avant d'acheter quelles sont les applications et services qui supportent Google Cast, et dispose d'une aide à la configuration de notre petite clef HDMI.... Fri, 03 Oct 2014 09:23:08 GMT Jacques Danilo http://www.pixelcrea.com/blog/grille-css-responsive-gridism/ http://www.pixelcrea.com/blog/grille-css-responsive-gridism/ Dans l'univers des ressources web gratuites, il existe les frameworks qui peuvent être très lourds à implanter sur notre site et qui ont des fonctionnalités qui ne nous servent pas forcément... Heureusement, il existe d'autres petites ressources gratuites et utiles autour des frameworks HTML/CSS. Gridism est une petite ressource très légère qui permet de réaliser des grilles en CSS avec la gestion du responsive design en prime. Son fonctionnement est tout simple : on ajoute un lien vers le fichier CSS de Gridism dans notre HTML par la balise link (à mettre dans le head) et on défini la balise viewport dans le head également. A partir de là, il n'y a plus qu'à utiliser les classes définis par gridism à l'intérieur de notre document comme dans le visuel ci-dessous : L'installation L'installation de gridism dans notre intégration HML/CSS se fait en 2 étapes. D'abord, on défini la balise link vers notre fichier gridism.css : <link rel="stylesheet" href="/css/gridism.css"> Et on défini également le viewport dans le head de notre document : <meta name="viewport" content="width=device-width,initial-scale=1"> Cela permettra au navigateur de comprendre l'échelle à considérer pour le responsive webdesign (je simplifie volontairement) L'utilisation de Gridism Maintenant que notre fichier gridism.css est ajouté et que la balise meta viewport est défini, il faut créer une div qui encadrera notre système de grille par la classe .grid. ensuite, à l'intérieur, on utilisera des éléments par les classes proposées dans le fichier gridism.css comme par exemple la classe .one-third pour définir une largeur d'un tiers... Les options de Gridism Gridism propose quelques options en plus de son système de grille CSS responsive, comme par exemple l'utilisation de gouttières ou la définition d'une largeur maximale en CSS. Par défaut, le responsive prend le pas à la taille de 568 pixels de large et défini tous les blocs à 100% de large, mais vous pouvez modifier ces règles CSS ou en ajouter d'autres... L'écriture ou la modification est très simple et vous permettra de rajouter des éléments si besoin. Conseils Je vous suggère d'ajouter la CSS de Gridism directement dans votre fichier CSS, afin d'éviter de charger un autre élément lors du chargement de page via votre navigateur. Il est important aujourd'hui d'optimiser au mieux le chargement des pages et de tous les éléments qui constituent votre site Internet : CSS, JavaScript, images, typos, ... Maintenant que vous savez tout sur Gridism, je vous laisse le tester, il est vraiment simple et agréable à utiliser : Télécharger Gridism... Thu, 04 Sep 2014 10:21:02 GMT Jacques Danilo http://www.pixelcrea.com/blog/il-giardino-cap-ferret/ http://www.pixelcrea.com/blog/il-giardino-cap-ferret/ Ce petit fait divers ne passe pas inaperçu sur la toile depuis quelques jours, un restaurant italien du Cap-Ferret Il Giardino vient de gagner son procès contre une blogueuse amateur ayant fait l'erreur de critiquer le restaurant sur son organisation, l'ambiance et l'amabilité de l'équipe. Le buzz tourne autour du fait que cela est une première dans l'histoire du blog en France : un professionnel de la restauration gagne un procès contre un blog amateur. La blogueuse se retrouve alors à devoir 1500 euros au restaurant... On s'attaque ici à notre libre expression, à la liberté de penser, de dire et d'écrire des individus, non seulement des blogueurs. Les faits avant tout Les chroniques culturelles (ou cultur'elle) est un blog amateur tenu par Caroline Doudet. Sur son blog, et après une soirée restaurant au Cap-Ferret désastreuse, elle publie un article sur le déroulement de sa soirée dans cet établissement (ouvert depuis plus de 15 ans, ce que nous rappellera la directrice du restaurant Italien) : dès l’arrivée dans le restaurant, la blogueuse se fait placer par un serveur sur une table, et dès qu’elle s’assoie à la table désignée une serveuse lui fait la réflexion qu’elle aurait du avoir l’autorisation (ce qu’elle a eut avec le serveur juste avant)… Puis l’apéro n’est pas proposé, obligé donc de demander pour avoir un apéritif qui arrive en même temps que les plats, puis le combat continue encore et encore… avec la directrice de l’établissement qui débarque dans tout ce bordel en plus… Je passe les détails : la blogueuse est déçue de sa soirée dans le restaurant, et se permet donc de relater les faits sur son blog en précisant que c’est vraiment une adresse a éviter (et en donnant également le nom, l’adresse, etc…). Une critique quoi ! Rien de plus normal que de partager son sentiment (positif ou négatif) sur un fait, une action, un moment. Le blog est fait pour cela, sorte de journal intime publique.  L’attaque tête baissée Le restaurant attaque aussitôt, directement au tribunal où la malheureuse blogueuse, en plus d’avoir passée une très mauvaise soirée dans cet établissement, se voit perdre devant la cour et doit 1500 euros de dommages et intérêts au restaurant suite à la soit-disante mauvaise presse de l’article. La gérante du restaurant Italien Il Giardino explique qu’elle est là depuis 15 ans et que ça fait mal de se faire insulter, et que la baisse de fréquentation de son restaurant en fin de saison pouvait être lié à cet article… Des réactions mais pas dans le bon sens Super me direz-vous : le restaurant, qui n’accepte pas la mauvaise critique, gagne un procès contre une blogueuse qui avait malheureusement donné son avis sur la piètre prestation de ce restaurant ce soir là. Seul problème, c’est que la presse a relaté cette histoire, et les réseaux sociaux ont fait le reste. On parle de boycottage de ce restaurant et maintenant lorsque l’on fait une recherche Google sur le nom du restaurant il n’y a que ça sur les 3 premières pages. C’est ça le référencement ! Avant ce restaurant n’avait visiblement qu’un seul mauvais résultat sur Google qui était cet article, maintenant il n’y a que ça… Les blogueurs, comme moi, et beaucoup d’autres, se rallient pour soutenir Caroline Doudet sur le bien fondé de la libre expression et de la liberté de la presse (ou de l’écrit), amateur ou professionnelle. La liberté d’expression mise à mal C’est une première, mais malheureusement cet incident ouvre la porte à tous les professionnels qui auraient reçu une mauvaise critique pour leur établissement, que ce soit une discothèque, un bar, un restaurant ou un établissement de loisir. On ne pourra plus critiquer un établissement sans prendre le risque d’aller au tribunal pour quoi ? Pour avoir donner simplement notre avis. C’est pourtant ça le web 2.0 : la possibilité de commenter, donner un avis, discuter ou échanger autour d’un sujet. Les sites de voyage propose quasiment tout le temps des avis utilisateurs. C’est ce qui aide à la décision, qu’elle soit bonne ou mauvaise ! Où est notre liberté aujourd’hui ? Et si cela s’était passé autrement ? La gérante a attaquée au tribunal, mais qu’est ce qu’elle aurait pu faire d’autre ? D’abord, la gérante n’est jamais passé par la phase accord à l’amiable, soit pour demander le retrait de l’article, soit pour demander la modification de celui-ci. La gérante du Il Giardino aurait pu également demander à Google le retrait de cet article dans les résultats de recherche. Elle aurait pu également se servir de cette mauvaise presse  pour se remettre en question également, revoir sa stratégie commerciale et son fonctionnement en interne. Il y avait tellement à faire au lieu d’attaquer cette blogueuse qui a simplement voulu donner son avis sur la soirée dans cet établissement. Alors luttons, luttons pour cette liberté d’expression !... Fri, 11 Jul 2014 13:01:05 GMT Jacques Danilo http://www.pixelcrea.com/blog/google-formulaire-oubli/ http://www.pixelcrea.com/blog/google-formulaire-oubli/ Google nous permet depuis quelques jours de soustraire à ces résultats de recherche liés à votre nom certains résultats à l'aide de son formulaire relatif à la protection des données. L'Union européenne a tranchée pour le contrôle des résultats sur le moteur de recherche. Et Google joue le jeu. Nous pouvons maintenant profiter de cette chance / ce droit pour gérer et affiner au mieux notre visibilité sur Internet. Ce droit à l'oubli nous permet de mentionner les liens concernées et expliquer pourquoi ces liens sont problématiques. Google s'engage à regarder en détail chaque demande pour essayer de répondre au mieux aux attentes des internautes et être en adéquation... Le processus de suppression En se rendant sur cette page, vous allez pouvoir faire une demande de suppression de résultat de recherche. Il va falloir fournir une copie de votre carte d'identité nationale en cours de validité. Une fois avoir renseigné vos informations personnelles (pays, nom, prénom, mail), il faudra alors donner à Google le ou les sites qui vous gêne, en expliquant pour chacune des URL les raisons qui vous poussent à demander le retrait. Le formulaire est très simple mais lisez bien toutes les lignes pour ne pas voir votre demande simplement rejetée. Google analysera votre demande de suppression Une fois avoir validé le formulaire, Google validera individuellement chaque demande faite via ce formulaire, mais patience, le retrait ne se fera pas du jour au lendemain puisqu'à chaque fois une personne (voir plusieurs) regardera les URL fournis en fonction des explications. De plus, ce formulaire n'existe que depuis quelques jours et à l'heure qu'il est Google doit crouler sous les demandes. Alors patience.... Wed, 04 Jun 2014 23:11:20 GMT Jacques Danilo http://www.pixelcrea.com/blog/trouvailles-du-web-9/ http://www.pixelcrea.com/blog/trouvailles-du-web-9/ Ca faisait un petit moment que je n'avais préparé un épisode des trouvailles du web. Voilà le tir corrigé par ce nouvel épisode. Au sommaire de ce 9ème épisode toujours 5 ressources flanées sur la toile : faire des grilles facilement pour l'impression, des icones vectoriels et gratuits, une sélection de typos gratuites, une typo gratuite spectaculaire pour sa finition, et un peu de ressource jQuery avec FullPage - script pour l'affichage en pleine page facilement... On touche donc un peu à tout, autour du graphisme et du code. On y va ? Gridzzly.com Gridzzly est un site tout simple qui a pour seule et unique vocation de créer des grilles prêtes à imprimer. On peut y choisir par points, lignes ou par quadrillages rectangulaires ou hexagonales. On choisi ensuite son echelle et on clique sur le bouton print et voilà, de notre imprimante sort une page A4 avec une grille toute propre... C'est simple, mais efficace ! Créer ses propres grilles Dripicons Voilà une très belle colection d'icones vectoriels créée par Amit Jakhu. Cette typo est crée via Fontastic qui permet de transformer des éléments vectoriels en une typo exploitable facilement par la suite... Voir les icones gratuits 15 typos gratuites pour Mars 2014 Proposée par Ressource.pro (de Fabien Berthoux), cette très belle collection de typo toute neuve fera des jaloux dans vos créas. On y retrouve Handmade et Glober que j'adore ! Je vous laisse les découvrir par vous même ! Les typos de Mars (lien mort) Typo de qualité : StreetWear Cette typo gratuite est hyper bien foutu ! En plus d'être stylée, elle est complète et propose grâce à Illustrator un montage très réussi. De plus, sur cette page est proposée une vidéo explicative sur le montage de la typo en fonction de la longueur du mot ou encore de la forme que l'on souhaite donner sur chaque lettre... Un régal quand on sait comment c'est compliqué de jouer avec une typo pour un logotype par exemple... Typo StreetWear sur Behance FullPage.js Une ressource jQuery pour créer rapidement des animations d'écrans sur nos sites. Pour l'avoir testé pour une présentation interactive avec un client à l'étranger il y a quelques jours, C'est limite plus fun qu'avec un powerpoint. Il y a beaucoup de réglages possibles et les utilisations sont variées. Je me tate même à faire mon CV sous cette forme. Ludique et simpa ! FullPage.js sur GitHub   Voilà, c'est terminé pour ce 9ème numéro des ressources gratuites. Rendez-vous au numéro 10 !... Tue, 25 Mar 2014 15:12:31 GMT Jacques Danilo http://www.pixelcrea.com/blog/facebook-chiffres-2013/ http://www.pixelcrea.com/blog/facebook-chiffres-2013/ L'infographie porte sur l'utilisation de Facebook sur l'année 2013. Elle est intitulée "Facebook facts for 2013" avec le sous-titre "Some amazing facts about the twerting facebookian year of 2013 !". Voici le résumé de cette infographie proposée par socialmediacambridge.co.uk en 9 points/faits marquants sur cette année... 1. Toutes les 20 minutes, il y a environ 2 million de statuts postés sur le site. 2. L'application la plus téléchargée sur toutes les plateformes (iOS, Android, Windows Phone) est Facebook Mobile 3. Aux Etats-Unis, sur le total des pages vues sur l'année, une sur cinq était une page Facebook 4. L'asie possède le plus d'utilisateurs de Facebook en représentant 38% de l'activité sur Facebook. Soit un peu plus du tiers sur le réseau social. 5. 874 millions d'utilisateurs actifs (avec au mimimum 1 activité par mois) ont étés ressensés le 30 septembre pour l'application mobile de Facebook... 6. Et 1,19 Billion d'utilisateurs actifs au total... 7. Chaque seconde, partout dans le monde, 5 nouveaux comptes sont créés 8. L'activité la plus populaire et l'upload de photos 9. En moyenne, un utilisateur a passé 8,3 heures par mois en 2013 dessus !     ... Tue, 18 Mar 2014 12:12:01 GMT Jacques Danilo http://www.pixelcrea.com/blog/layoutit-bootstrap/ http://www.pixelcrea.com/blog/layoutit-bootstrap/ Développé par Martin Capeletto, Hernan Berroja Albiz et Jonathan Katz, LayoutIt est un utilitaire en ligne pour Bootstrap (en version 2 ou 3 d’ailleurs) basé sur le drag’n’drop afin de construire des interfaces front-end de qualité autour du fameux framework. Il est encore en version Beta mais à l’avantage d’être gratuit et extrêmement simple d’utilisation. Basé sur le HTML 5 et le responsive Webdesign, il permet en quelques clics de construire des gabarits de pages HTML / CSS d’une grande qualité. Explications…   Petit tour de BootStrap BootStrap est un framework de développement HTML/CSS avancé : la solution permet de rapidement prendre en main une mise en page, utilisant notamment la notion de grille CSS pour vos constructions HTML. Mais cette usine à gaz ne s’arrête pas à ça, il permet de gérer le style des boutons, des icones, des alertes, et possède notamment un nombre important de composants CSS et jQuery pour gagner un temps considérable lors de vos intégrations front-end ! Passons à LayoutIt ! maintenant… C’est purement et simplement un Boostrap visuel. A l’aide de cet outil, sélectionnez dans un menu positionné à gauche les différents éléments dont vous avez besoin : colonnes, diaporama photo, fil d’ariane, … En glissant-déposant ces éléments dans la partie de droite (votre gabarit), vous pouvez le positionner où bon vous semble et de paramétrer ensuite votre nouvelle zone. Les avantages sont nombreux : tout d’abord il est très simple d’utilisation et ne demande pas une connaissance parfaite de BootStrap pour faire un premier gabarit. Ensuite il est gratuit, et c’est ce qui fait la différence par rapport à d’autres solutions similaires, pouvant atteindre 300$ par mois pour une agence… Le dernier point est la simplicité de récupération du code. Une fois votre gabarit terminé, cliquez sur le bouton Download pour récupérer un fichier ZIP contenant votre page HTML, les CSS et autres modules que vous avez besoin pour fonctionner. Très efficace ! Découvrez toute la magie de LayoutIt... Thu, 09 Jan 2014 13:33:39 GMT Jacques Danilo http://www.pixelcrea.com/blog/litecart-cms/ http://www.pixelcrea.com/blog/litecart-cms/ Prestashop n'a qu'à bien se tenir, LiteCart arrive sur la toile ! Il s'agit d'un CMS gratuit téléchargeable et à installer sur l'hébergement de votre choix. Il est simple, léger, intuitif, et pourrait donc faire de l'ombre à la concurrence sur des besoins simples. Pour ceux qui ont testés Prestashop, la solution leader sur le marché, vous avez peut être remarqué que la solution était complète mais lourde également : temps de chargement des pages important, manque d'optimisation globale au référencement et aux nouvelles technologies. Et dès que l'on met les mains dedans c'est pire ! LiteCart pourrait donc sur des besoins élémentaires le remplacer. Partons à la découverte du CMS en vogue... Pourquoi choisir LiteCart e-commerce ? Les interets sont nombreux en fait. D'abord, c'est à la pointe de ce qui se fait d'un point de vue code, sémantique, référencement : le CMS LiteCart utilise PHP, HTML 5, CSS 3 et jQuery. A la pointe de l'innovation, l'interface est simple et intuitive, aussi bien en partie publique qu'en partie administration. Il n'y a pas de restrictions sur les produits ou les catégories et le site gère de nombreuses langues L'installation On peut remarquer déjà en téléchargant le CMS sur le site officiel que la solution complète ne pèse que 4 Mo (contre 50 Mo pour Prestashop, 21 Mo pour OpenCart, ...) et est réparti en 500 fichiers seulement (contre 6640 fichiers pour Prestashop, 2400 fichiers pour OpenCart, ...) : il semble donc optimisé ! Et effectivement, pour avoir regardé grossièrement le code de LiteCart, je peux vous dire que l'on est face à quelque chose d'hyper bien pensé et conçu. L'installation se fait simplement à travers le navigateur étape par étape, pour arriver avec un site e-commerce au bout de quelques minutes. La partie publique La partie front-office (partie publique) est simplement... simple ! Et je pense que c'est un luxe. Comme le CMS est basé sur des templates, on peut tout à fait partir sur quelque chose de plus élaboré, voir pourquoi pas une création sur mesure. Un forum est d'ailleurs à disposition et l'équipe de développement est très réactive (mais je préfère vous prévenir, c'est en anglais) L'administration Là encore, une simplicité déconcertante. Un tableau de bord nous accueil pour suivre les ventes sur la dernière année et le dernier mois. Les menus sont simples et on retrouve toutes les options possibles sur les produits, les catégories, les modes de paiement, les commandes, les promotions, etc. Les choses en plus... Bon, c'est un CMS, donc ça ne peut pas tout faire directement. D'abord parce que ça serait trop facile, et surtout parce que ça alourdirait énormément la solution... Du coup, il existe comme chez les concurrents une plateforme pour acheter des Add-Ons. Il faut reconnaitre que le catalogue est un peu vide pour le moment, mais patience, ce n'est que le début, et libre à vous de créer un module. Sur le site, plusieurs parties concernent les développeurs : le Wiki, le Forum et également une page de tutoriels pour découvrir le moteur qui se cache derrière cette belle carrosserie ! Verdict après 2h d'utilisation Je suis fondamentalement contre les CMS : ces usines à gaz que l'on installe sur nos sites Internet sont utilisées par nous et nous clients à hauteur de 5% peut être au maximum. Pourquoi rouler en Porsche pour simplement aller chercher son pain, à part pour frimer devant les copains... Là on se trouve sur un intermédiaire extrêmement bien pensé entre l'usine à gaz et le petit site de monsieur tout le monde. Il est suffisamment puissant et complêt pour répondre aux souhaits d'une boutique en ligne classique, sans pour autant surcharger la solution. De plus l'interface publique et l'intuitivité de l'administration rendent cette solution e-commerce une partie de plaisir... Par contre, le CMS est très jeune et doit évoluer. A l'heure où je teste cette solution, nous sommes à la version 1.0.1 ! Ce n'est que le début. Par sa jeunesse, il n'y a encore pas ou peu de documentation à ce sujet, peu de publicité également, et un catalogue très pauvre. Cependant dans mon test je n'ai pas rencontré le moindre manque dans la gestion du CMS, sur les promotions, les avoirs ou remboursements de produits ou commandes... Je n'ai pas vu d'oublis importants du moins. Je suis donc fan ! Très fan. Je vous invite à l'essayer de toute urgence comme moi et de pourquoi pas faire un retour d'expérience ici-même en commentaire de cet article. J'vous laisse, j'ai déjà des commandes à traiter ;) Le site officiel de LiteCart... Thu, 28 Nov 2013 02:19:40 GMT Jacques Danilo http://www.pixelcrea.com/blog/trouvailles-du-web-8/ http://www.pixelcrea.com/blog/trouvailles-du-web-8/ Me voilà de retour après un bon mois d'absence pour cause de vacances bien méritées. Alors on reprends un peu avec quelques trouvailles ici et là sur la toile pour vos créations et votre inspiration. Au menu de ce billet de ressources en ligne, on va trouver des arrière-plans de qualité pour iPhone 5 avec effet de parallax sur un site que j'adore, des ressources jQuery avec notamment jQuery ++, un peu de CSS avec les animations de l'arrière plan (background) sur la page ou un élément, ... Un peu de ressources, et du code surtout... A l'exception du site pour personnaliser son iPhone, nous allons découvrir quelques petites astuces pour améliorer la qualité de nos sites. On démarre par quoi alors ? Le graphisme on va le garder pour la fin ! jQuery ++ Vous l'aurez deviné, on est dans le domaine de jQuery. Mais pourquoi ces 2 symboles "++" à la fin alors ? jQuery++ est un rassemblement intélligent des options les plus utiles de différents addo-on ou plugins jQuery. Il regroupe des fonctionnalités avancées, présentes dans jQuery UI et dans jQueryTools. Avec un seul fichier, il regroupe plusieurs belles avancées comme le drag-and-drop par exemple, ainsi que beaucoup d'autres... jQuery ++ fait la même chose que son grand frère, mais il optimise le code et la rapidité d'écriture et d'éxécution du code. Il traite très simplement la gestion des cookies, la récupération de plusieurs propriétés CSS en une seule fonction et possède également un évènement "resize" pour retailler un bloc.  Le projet est encore jeune, puisqu'à l'heure où j'écris ces quelques lignes nous sommes à la version 1.0.1, mais cela semble très prometteur. Le site officiel de jQuery ++ HoverFlow : plugin d'animations pour jQuery HoverFlow est un tout petit petit plugin pour jQuery permettant de résoudre un bug connu sur les animations : lorsque l'on ajoute une animation (par exemple avec la fonction .animate();) sur un hover, jQuery crée une pile pour faire X animations en fonction du nombre de fois que l'on passe au dessus de l'évènement. La fonction stop() permet de contrer ce problème mais en rajoute un autre : on ne vois pas l'animation en entier, puisque jQuery arrète l'animation en cours pour appliquer la nouvelle. HoverFlow PlugIn permet de contrer un peu cette option stop en laissant terminer l'animation initiale, puis en rajoutant la nouvelle sans pour autant créer une pile d'évènements jQuery. Très pratique, et ça pèse que 1Ko dans la version mini. Le plugin HoverFlow Mmenu, un menu jQuery pratique pour les mobiles ! Si vous avez un smartphone et que vous utilisez Facebook vous connaissez son menu qui s'ouvre sur le coté, décalant la page sur la droite. Mmenu fait ça, et simplement ! En rajoutant une seule ligne de code, notre menu s'adapte maintenant sur les smartphones sur le coté avec un bouton pour laisser voir notre navigation. Dans les options du plugin jQuery, il est possible de positionner son menu en haut, en bas, à gauche comme à droite, de l'animer avec quelques options, ainsi qu'une personnalisation complète par thèmes. le plugin Mmenu CSS : l'animation du background directement en CSS Pour animer un arrière plan, on utilisait un gif animé, puis le javascript est arrivé mais plantait un peu sur ces techniques d'animations "barbares". Puis est arrivé jQuery et MooTools qui permettent de la faire "assez" facilement. Mais CSS3 nous propose une nouvelle instruction : animation. L'animation se fait directement en CSS, sans ligne de code ! PAr contre attention, cela ne fonctionne pas sur tous les navigateurs Animation du background en CSS Des wallpapers pour iPhone 5 avec parallax On termine cette sélection de ressources avec un site super sympa et riche en contenu : le site propose une multitude de fonds d'écrans pour iPhone 5, et notamment avec l'effet Parallax, nouveauté de iOS 7. Les arrières-plans sont superbes. Moi perso, je me fournis chez eux ;) Fonds d'écrans pour iPhone 5   Et bien voilà, on a fait le tour je pense ! Des questions ? Bon bah je file !... Wed, 27 Nov 2013 21:08:14 GMT Jacques Danilo http://www.pixelcrea.com/blog/creation-cv/ http://www.pixelcrea.com/blog/creation-cv/ Votre CV est le premier élément concret que verra la boite pour qui vous postulez. Si il y a bien un élément à présenter correctement, c'est justement ce fameux papier ! Votre CV, dans la plupart des cas, sera entassé sur un bureau avec des dizaines d'autres postulants, puis consulté par une ou plusieurs personnes afin de décider qui de ces prétendants iront à l'étape suivante : l'entretien d'embauche. Durant tout l'été, j'ai été amené à m’entretenir avec des patrons et des managers sur la question du curriculum vitae. Je vous livre ici quelques astuces importantes qui pourront faire la différence par rapport à cette féroce concurrence autour de vous. Une photo, et une bien svp !Il y a quelques années, la question du « délit de sale gueule » était soulevée, et la conclusion était d’envoyer un CV sans photos. Les personnes avec qui j’ai eu la chance d’échanger sur le sujet sont unanimes, il faut avoir une photo. D’abord la photo a un premier impacte sur votre feuille : c’est un élément qui attire l’œil, ce gros pavé noir et blanc en haut à gauche où l’on distingue une forme ressemblant à un visage. Le recruteur prendra plus de temps à observer l’apparence du CV dans un premier temps. De plus, votre photo véhicule des informations importantes : est-ce que vous souriez ? Est-ce que vous avez des tatouages et/ou percings partout ? La coupe de cheveux, l’expression du visage, la posture générale, toutes ces choses donnent des informations qui peuvent vous être favorable ! On ne parle pas du critère physique ou de la couleur de peau, je parle plus de l’atmosphère dégagée par une photo. Une mise en page soignéeAutre élément indispensable c’est une présentation soignée. Un CV se rédige en 3 points principaux : votre expérience professionnelle, vos études et diplômes qualifiants, et vos loisirs. Chaque partie doit être identifiée facilement par le lecteur. Optez également pour de la mise en gras, une mise en couleur… Un CV en couleur (pour le texte et la photo) aura également plus d’attention qu’un CV en noir et blanc. Autre conseil pratique sur la mise en page : Le papier ! Bien souvent, lorsqu’une société recherche un profil, des dizaines de CV se retrouvent dans un coin de bureau en attendant l’heure du jugement. Pourquoi ne pas donner une visibilité supplémentaire en choisissant un papier en couleur (optez pour un pastel par exemple) et/ou une épaisseur plus forte du papier (le grammage). Et pourquoi ne pas partir sur une impression en 24x32 au lieu du traditionnel A4 ? Un point d’honneur sur vos loisirsUn recruteur lit votre CV, et oui ! Par contre il peut le faire d’abord en diagonal afin de trier les « imposteurs » des réels postulants crédibles. Et dans cette lecture en diagonal les loisirs attirent tout le temps l’attention. Que fait cette personne en dehors du travail ? Les loisirs en disent beaucoup sur vous. Evitez alors les activités bateau comme « cinéma, lecture, musique » aujourd’hui qui ne regarde pas de films, n’écoute jamais de musique ou ne lit jamais (je ne parle pas d’un lecteur averti qui s’affile romans sur romans). Si par exemple j’indique dans mes loisirs un sport en compétition (même local) ou un travail en association, je démontre alors mon caractère ambitieux et ma volonté de vouloir bien faire et/ou d’aider les autres. L’intérêt n’est pas de choisir des loisirs en fonction du poste recherché, mais plutôt de vous faire comprendre que ce que vous écrivez sur un CV conduit à des interprétations de la part de l’employeur… Evidemment, n’inventez pas ! Il suffit que le recruteur connaisse un peu ce loisir et vous questionne vous aurez l’air bête ! Il existe aujourd’hui des milliers d’exemples de CV. Regardez par exemple sur Google Image pour avoir de l’inspiration, on en trouve de toute sorte. Mais dans tous les cas, adaptez-le au profil recherché. Pour un poste important qui demande de l’expérience par exemple vos jobs d’étudiant on s’en balance un peu. Un CV doit faire une seule page, indiquez l’essentiel pour donner envi au recruteur de vous contacter pour un entretien. Et si vous avez d’autres conseils à donner j’éditerai ce billet au fur et à mesure ! Bonne chance !... Fri, 27 Sep 2013 22:02:13 GMT Jacques Danilo http://www.pixelcrea.com/blog/astuces-twitter/ http://www.pixelcrea.com/blog/astuces-twitter/ Tout le monde connait Twitter, avec ses hashtag, ses comptes et ses fameux tweets. Les tweets sont les petits messages de moins de 140 caractères que l'on écrit dans l'interface de Twitter. En plus d'avoir un compte et de l'alimenter régulièrement par ces petits messages, il est important de comprendre comment fonctionne Twitter et l'utilisation que les membres en font. Voici alors 5 conseils permettant d'améliorer sa visibilité, en augmentant son audience : 1. Intégrez un lien à votre messageIl est important pour vos followers de pouvoir suivre un lien pour en savoir plus lors d'un message à caractère promotionnel. Vos messages devront donc être accompagnés d'un lien. Evitez le flood (l'overdose) en essayant de rester dans une proportion de 40 à 70% de vos tweets disposant d'un lien (vers votre site Internet ou vers une ressource externe à votre entreprise) 2. Utilisez les call-to-actionVos tweets doivent susciter de l’intérêt auprès de votre cible, utilisez alors les fameux « cliquez-ici » avec votre lien, ou encore les « RT PLZ » en fin de message (qui signifie s’il vous plait, retweetez) 3. Optimisez la fréquence de vos tweetsIdéalement, d’après certains experts, il faudrait tweeter environ 4 messages par jour pour avoir le meilleur taux de rendement et d’engagement de vos followers. Ceci dit tous vos messages ne sont pas obligatoirement de l’auto-promotion ! 4. Diffusez l’existence de votre compte partoutAfin de booster le nombre de vos followers, ajouter un lien vers votre compte twitter sur toutes les pages de votre site. Utilisez également les boutons « follow » pour que vos internautes (sur votre site) puissent un clic s’abonner à votre compte twitter 5. Reliez Facebook et TwitterDans les réglages de votre compte, il est possible de synchroniser Twitter et Facebook. De ce fait, tous vos tweets seront automatiquement publiés sur Facebook. Attention, l’inverse ne marche pas par contre !   J’espère que ces quelques conseils vous aideront à développer votre compte et ainsi dynamiser votre popularité. Bons tweets à tous !... Mon, 09 Sep 2013 21:19:28 GMT Jacques Danilo http://www.pixelcrea.com/blog/facebook-astuces-pro/ http://www.pixelcrea.com/blog/facebook-astuces-pro/ Facebook se professionnalise de plus en plus, par les profils de gérants d’entreprises, les pages des sociétés et les groupes de discussions, publiques ou privés. Il devient presque indispensable aujourd’hui qu’une entreprise se positionne sur les réseaux sociaux, en particulier sur Facebook ! L’avantage de Facebook est cette interaction obligatoire entre 2 comptes ou pages : si vous voyez les publications de vos amis et contacts, c’est qu’ils voient les vôtres. Contrairement à Twitter qui ne permet que des abonnements unidirectionnels ! Soignez votre page C’est la base vous me direz, mais soignez au mieux votre profil dans son intégralité : votre avatar (photo principale), la couverture de votre page, les galeries photos et vidéo, votre journal, etc… Lorsqu’une personne pointe la souris sur votre pseudo, un encadré s’affiche affichant votre avatar en plus grand, la photo de couverture et quelques informations. Il est bon de contrôler au mieux ces informations ! De la même manière, contrôler ce qui est publique de ce qui est privé : que doivent voir les personnes qui ne sont pas ami avec mon profil, que doivent voir les amis, etc. La publication sur Facebook Lorsque vous postez un nouveau message, il est important de comprendre déjà quelles sont les bases du marketing : quelle est la cible de votre message, l’objectif final, votre message, … ? Mais aujourd’hui l’information va vite et votre message risque très fortement d’être noyé dans le flux des différents posts de vos amis Facebook. Du coup, il est important d’associer le plus souvent possible une image, votre message prendra alors plus de place dans le journal de vos amis et surtout sera beaucoup plus visible. Soignez votre auditoire Soyez réactif, avec vos amis, clients, prospects, mais surtout, surtout, avec les curieux. Commentez leurs publications, aimez un maximum, commentez leurs commentaires et répondez à tous les messages privés. Des mises à jours et posts régulièrement Il n’y a pas de secrets, il est important de poster régulièrement. Un bon fonctionnement serait etre 2 et 6 messages par semaines. La présence se montre par les publications (posts) avec images, mais également toutes les autres actions : création d’une galerie photo, publication de nouvelles photos dans un album, changement d’avatar et de couverture, … Montrez que vous donnez de l’importance à Facebook en étant actif, les utilisateurs apprécieront !... Tue, 20 Aug 2013 11:52:53 GMT Jacques Danilo http://www.pixelcrea.com/blog/triangles-css/ http://www.pixelcrea.com/blog/triangles-css/ Le HTML comme le CSS ne nous permettent pas de faire des formes autre que le rectangle (je rappelle qu’un carré est un rectangle particulier). Seulement il est tout à fait possible de faire un triangle sans avoir besoin de créer une image à l’aide des bordures en CSS. La technique est simple : créer un bloc faisant 0 pixels de haut sur 0 pixels de large, et de jouer avec les bordures. On va devoir utiliser une bordure de couleur et des bordures transparentes, en utilisant la propriété CSS border-color :transparent; ! Comme la bordure en CSS est gérée par les navigateurs à l’extérieur du bloc et, lors d’une épaisseur importante, biaise les angles, nous allons pouvoir créer un triangle très simplement. La technique est simple : la seule chose à retenir c’est que la bordure CSS pour la réalisation d’un triangle se fera toujours du coté opposé à la direction souhaitée. Du coup, si je souhaite faire un triangle pointant vers la droite, il faudra alors mettre une couleur de bordure à gauche. Idem pour les autres sens où l’on prendra toujours l’opposé. Voici le code CSS à créer : .flechedroite { width : 0; height : 0; border-bottom : 5px solid transparent; border-top : 5px solid transparent; border-left : 5px solid #2f2f2f; font-size: 0; line-height: 0; }   J’ai rajouté font-size et line-height à 0 afin d’éviter des incompatibilités sur différents navigateurs qui pourraient prendre en compte le fait qu’une div comporte un élément texte et fausse alors l’affichage de notre triangle CSS Voyez, c’est tout simple !... Tue, 06 Aug 2013 09:34:43 GMT Jacques Danilo http://www.pixelcrea.com/blog/trouvailles-du-web-7/ http://www.pixelcrea.com/blog/trouvailles-du-web-7/ Je ne pouvais pas partir en week-end sans poster un petit épisode des trouvailles du web, ce numéro 7. Toujours le même mode de fonctionnement, je parcours le web et je cherche à ne garder que le meilleur de mon voyage initiatique dans des domaines qui peuvent servir mes clients et confrères graphistes freelances. Ces ressources sont aussi riches que variées, mais se limitent volontairement au nombre de 5 liens. Il n’y a pas de rythme ou de périodicité dans la publication de cette série de ressources et sites Internet, simplement qu’au bout de 5 liens je m’arrête. Au menu de ce septième épisode, nous allons avoir des ressources CSS, du graphisme haut de gamme pour des cartes et menus de restaurants à travers la planète, plus de 200 icônes vectoriels, une petite sélection de graphisme en flatdesign (comme c’est la mode en ce moment) et pour finir l’impressionnante idée qu’à eu Sinon Mahieu pour trouver un emploi. On envoie la purée ? 20 ressources CSS pour les sites Internet Un petit tour sur WDT (WebDesigner Trends) pour un très bon article sur une vingtaine de ressources CSS pour l’animation de vos sites Internet, en prenant beaucoup d’aspects du site : des effets de survol, la gestion de menus, les formulaires en CSS et des petits gadgets en tout genre. 35 cartes de restaurant et menus graphiques (site indisponible) Si jamais vous aviez une carte de restau à faire pour votre client cet été, il faut absolument que vous alliez voir cette page. InspirationFeed vous sélectionne une très belle collection de photos de cartes et menus pour les bars et restaurant. Du lourd, du très très lourd… 200 icônes vectoriels WebDesignerDepot nous propose une archive de plus de 200 icônes de grande qualité en vectoriel libre de droits. C’est évidemment gratuit (sinon la place ne serait pas ici sur ce blog) à la seule condition de donner son adresse mail. Pour info, donnez votre adresse car un lien vous est envoyé par mail. Donc ne cherchez pas à tricher Du Webdesign en FlatDesign, rien que ça ! Voici un recueil des plus belles maquettes en flat design sur Internet en ce moment. La sélection est signée Abduzeedo, un site que j’adore depuis très longtemps pour la qualité des tutos et articles écrits. Le Flat design est à la mode, et certains graphistes maîtrisent le sujet comme personne ! A voir absolument. Le CV de Simon Mahieu Non il ne manque pas un T au nom de famille de cet étudiant normad. C’est bien Mahieu et non Mathieu… Si je parle de lui ici c’est simplement par sa créativité pour faire son CV. Ce graphiste a réussi le pari d’associer un CV et une bouteille de vin. Le problème c’est que personne ne prendra le risque d’ouvrir cette jolie bouteille pour en connaitre les saveurs de ce vin vu la qualité de la bouteille.... Fri, 02 Aug 2013 16:43:24 GMT Jacques Danilo http://www.pixelcrea.com/blog/5-outils-couleurs/ http://www.pixelcrea.com/blog/5-outils-couleurs/ Choisir ses couleurs dans la création graphique est une étape difficile, il faut que les couleurs véhiculent les valeurs choisis, qu’elles soient toutes en adéquation avec les autres couleurs, dans l’ère du temps, suffisamment contrastées pour être à la fois compatible au monde du print et au monde du web, tout en prenant en compte les différents supports (écrans mats et écrans brillants) et la luminosité associée… Vous avez déjà rencontré ce problème lors de vos maquettes et créations graphiques print ou webdesign ! Il faut alors, en démarrant la création, définir une palette de couleurs qui servira de base de travail lors du maquettage de nos créations.  Voici alors 5 outils en ligne permettant de créer des palettes de couleurs : Flat UI Colors Ce site propose une palette de 20 couleurs utilisées en ce moment où le flat design est à la mode. Il suffit de cliquer sur une des 20 couleurs pour copier sa valeur dans le presse-papier. Il n’y a plus qu’à aller sous Photoshop ou un autre logiciel de création graphique pour coller la couleur. Simple cmome bonjour et très pratique ! Cependant le site à ses limites, seule cette palette est disponible, et rien d’autre ! ColourLovers Depuis le temps, ce site est devenu une référence dans le monde de la création. Il est possible de voir un nombre incalculable de palettes de 5 couleurs. Idéal alors pour démarrer rapidement un projet de création. Pour chaque palette vous retrouvez en bas de page les codes hexa pour Photoshop à copier-coller… Color by HailPixel Là on est sur de la création pure et dure ! Votre navigateur se transforme en une plage de couleur grandeur nature ! Glissez votre souris pour choisir une teinte. En cliquant à l’endroit souhaité le site garde en mémoire la couleur choisie, la met sur le coté et vous permet de sélectionner une autre couleur, puis une autre, etc. Idéal pour faire sa propre palette de couleurs. Hexu.Al Imaginez une page regroupant une multitude de couleurs basées sur la référence hexadécimale mais, qui en plus de lister les couleurs, considère que le code hexa devient un mot compréhensible. Par exemple la couleur #CACA05 devient alors cacaos… le site donne donc sa définition en anglais. Très rigolo ! Paletton - Color Scheme Designer Beaucoup plus sérieux, ce site propose une palette traditionnelle en se basant sur une structure plus mathématique et logique : on choisi la teinte principale et on peut alors choisir la couleur complémentaire, sous forme de triptyque, etc… Une bonne base de travail cependant et de compréhension de la couleur… Des palettes de couleurs et des nuanciers A partir de photos, j'ai concocté quelques nuanciers pour la réalisation de couleurs lors de vos créations graphiques (print, web, motion, ...). Sur une base de 4 couleurs extraitent de la photo au dessus, réalisez vos propres maquettes. Vous pouvez aussi (et c'est pourquoi j'ai laissé la photo) piquez directement vos propres couleurs sur la photo. Pratique non ? Nuanciers à base de photos   Vous utilisez autre chose vous ?... Mon, 29 Jul 2013 16:06:42 GMT Jacques Danilo http://www.pixelcrea.com/blog/webdesign-css/ http://www.pixelcrea.com/blog/webdesign-css/ A mes heures perdues je scrute le web, passant de blog en blog en lisant des tonnes d’articles autour de la création de site web, de WebDesign et de ressources graphiques. Beaucoup de personnes sont soulevées la question de la création de maquettes web directement en CSS, zappant alors tout bonnement la phase de création sous Photoshop (ou d’autres logiciels graphiques)... Et effectivement, cela m’est déjà arrivé de travailler de la sorte sur quelques projets pour moi ou mes clients. Mais quelles sont les différences réelles dans notre travail ? La création d’une maquette avec Photoshop propose plusieurs avantages : la réalisation de la maquette ne se fait que sous un seul logiciel, cela va alors très vite, avec la possibilité de poser des repères, de sélectionner plusieurs calques et d’en tirer une construction riche. De plus, une harmonie des couleurs, formes et typos est rapide à créer. Et le gros avantage est surtout de travailler avec une vision globale de la page. Mais effectivement j’avoue, cela prends du temps de faire la maquette, la présenter au client pour faire ensuite les retouches graphiques et corrections de contenu avant la phase d’intégration. A l’inverse, la création directement en CSS permet de gagner un temps important puisque la création se fait directement par le code  HTML/CSS – on a donc l’impression de gagner un temps fou car la maquette est directement prête en y présentant également la partie interactivité au client (roll-over, effets jQuery, parallaxes, …) – mais j’insiste bien : ce n’est qu’une impression. En réalité, nous passons un temps fou à tester, allant de notre page de code à notre navigateur sans arrêt pour voir les modifications et si elles fonctionnent correctement. On essaye différentes typos, différentes tailles et réglages, différentes couleurs et différentes dispositions des contenus les uns par rapport aux autres. Du coup le gain de temps en évitant la fastidieuse maquette Photoshop est immédiatement perdu avec les allers-retours entre notre éditeur et notre navigateur. De plus, Photoshop (ou tout autre logiciel de création graphique) est obligatoirement ouvert, pour y travailler la taille du logo, sa couleur de fond, les textures et images d’arrière plan... On se retrouve alors dans notre dossier de travail tout un tas de fichiers Photoshop qui ne sont que des parties de la maquette initialement zappée. Un PSD pour le logo, un autre pour le fond, l’autre pour le format des miniatures, etc. Et lorsque le client nous demande une modification, comme le texte en plus gros, ou 4 photos au lieu de 3 sur la largeur, là on arrive à quelque chose de très compliqué : il faut alors revoir le CSS en partie, et bien souvent on a tendance à manipuler les règles CSS en les réadaptant plutôt qu’en les optimisant. Résultat des courses : une feuille de style CSS non-optimisée à force de la retoucher pour les corrections du client, une maquette la plupart du temps moins riche en terme de mise en page, une maintenance plus difficile, ... En conclusion je ne suis pas sur que passer directement par le CSS pour nos WebDesign est un réel gain de temps. Cela peut être pratique pour nos propres sites mais dès qu’un avis extérieur (comme un client par exemple) vient discuter nos choix, on se retrouve avec une multitude de problèmes à gérer. De plus, aujourd’hui on est obligé d’optimiser un maximum nos maquettes web avec l’optimisation des images, la génération de fichiers sprites, etc. Qui demande de prendre un certain recul avant t’attaquer la CSS ! On imagine pas une seule seconde un constructeur automobile réaliser un moteur sans avoir réaliser un plan parfait avant, pour voir si il a pensé à tout, ou bien un architecte construire une maison sans avoir fait un plan précis du bâtiment. Alors avant de vous jeter sur la feuille de style CSS, prenez du temps et un recul important en réalisant la maquette sous Photoshop, vous verrez, vous y gagnerez au final ! Et je serais prêt à parier que même le site de Google a été photoshopé avant !... Fri, 26 Jul 2013 15:55:47 GMT Jacques Danilo http://www.pixelcrea.com/blog/ubuntu-edge/ http://www.pixelcrea.com/blog/ubuntu-edge/ Bon, il n’y a pas que PC ou Mac dans la vie, il y a aussi Linux. Et dans cet univers assez complexe au premier abord il existe ce que l’on appelle des distributions. Une distribution c’est un système d’exploitation basé sur la structure Unix (ou Linux c’est la même chose...) ! Et dans le nombre incalculable de distributions Linux il existe Ubuntu. J’ai eu la chance de travailler pour Ubuntu sur leur forum français il y a quelques années afin d’en améliorer l’ergonomie. Et depuis le lancement d’Ubuntu je suis l’activité de cette distribution avec un grand intérêt. Je possède un poste à la maison où Ubuntu est installé dessus, je l’utilise pour surfer et pour la rédaction de textes principalement, mais Ubuntu fait beaucoup de chose, autant que Mac ou qu’un PC équipé de Windows. Seulement l’interface est différente et permet, à travers des lignes de commandes, de tirer d’autres avantages que ceux proposez à travers l’interface. Ca va vous arrivez à me suivre ? Si vous n’y arrivez pas ce n’est pas grave, le plus important arrive ! Ubuntu est en train de travailler sur une nouvelle façon d’utiliser nos smartphones et nos ordinateurs de bureau en créant Ubuntu Edge, un smartphone utilisable en bureau d’ordinateur en connectant le téléphone à un écran de bureau. Ce simple raccordement offre alors l’interface d’un ordinateur confortable et disposant d’un bureau pour y travailler. Le grand intérêt de ce projet est dans la mobilité de son ordinateur de bureau et le fait de pouvoir être mobile à 100% ! Si comme moi il vous arrive d’embarquer du travail le WE chez les amis, ou s’il vous arrive de travailler en agence ou chez le client, cette solution est pour vous. Quand je me déplace, j’ai toujours mon iPhone, mon iPad, une seconde tablette Android et mon ordinateur portable. Autant vous dire que dans un monospace ça passe, mais juste ! Alors qu’avec cette solution je trimballerai simplement mon smartphone dans les mêmes circonstances. Un régal donc ! Par contre attention, vous vous doutez bien qu’avec un format smartphone on n’explose pas la baraque en fluidité et en ressources mémoires et disque dur, mais pour une mobilité aisée pour le moment c’est simple, ça n’existe pas ! Ce projet malheureusement coute de l’argent, et l’estimation s’élève à 32 millions de dollars. Une page est donc disponible pour contribuer à cette grande aventure. Vous avez la possibilité de donner le montant que vous souhaitez pour la contribution au projet, avec un petit truc en plus : en fonction de ce que vous donnez vous pourrez alors faire partie de la liste officielle des contributeurs, ou alors recevoir le smartphone à sa sortie, etc… Alors n’hésitez pas et participez au projet ! Pour contribuer au projet, c’est par ici ! (lien supprimé depuis)... Mon, 22 Jul 2013 15:16:48 GMT Jacques Danilo http://www.pixelcrea.com/blog/optimisation-png/ http://www.pixelcrea.com/blog/optimisation-png/ Le poids des images a toujours été important sur Internet. Depuis le début, lorsque nous surfions en 56K avec nos modems et nos forfaits à l’heure, le poids de la page était un facteur clé à la réussite de nos sites Internet. Malheureusement, ce n’est pas parce que nous avons des connexions ADSL beaucoup plus rapides et une connexion illimitée que l’internaute a changé ses principes. J’aurais même tendance à dire que l’internaute deviendrai plus exigent avec le temps… La richesse graphique apportée à nos maquettes depuis l’age d’or d’Internet en 2002 nous force à faire de plus en plus d’efforts sur la qualité de nos images. Il y a beaucoup de manières de travailler l’intégration des pages, en utilisant les formats acceptés comme le GIF, le JPG et le PNG. Malheureusement, le PNG conserve la qualité photo (16 millions de couleurs) en y ajoutant un paramètre de transparence, ce qui inclut tout de suite un poids beaucoup plus important à nos fichiers. C’est pourquoi une optimisation minutieuse est indispensable ! Dans un premier temps, lorsque vous exportez des images destinées à Internet (pages, mails, …) sous Photoshop vous avez le menu exporter pour le web et les périphériques… qui permet d’optimiser le poids des images en jouant facilement sur les réglages de qualité d’images pour en déterminer un poids idéal, compromis entre la photo sans compression et une photo dégradée. Cependant, suite à plusieurs tests sur différents logiciels et différentes solutions en ligne, il semblerait que Photoshop n’optimise pas à 100% le format PNG. D’autres solutions permettent, pour la même image, d’atteindre un poids inférieur pour une qualité d’image semblable ! Il n’y a pas de raisons particulières à ce petit défaut à Photoshop, car pour le JPG et le GIF il est bon, voir très bon dans certains cas (pour les dégradés notamment). A mon avis Photoshop n’a jamais pris le temps de remettre en cause la compression PNG lors d’un export pour le web et les périphériques, tout simplement ! Il existe plusieurs sites notamment qui proposent une compression optimisée, notamment TinyPNG qui semblerait d’après mes tests être le plus intéressant. Il suffit de glisser ses fichiers PNG pour qu’il compresse immédiatement les fichiers. Un lien permet alors de télécharger la nouvelle version optimisée. Simple comme bonjour. Et le must, c’est qu’on peut aller jusqu’à 20 images à la fois. Du coup, l’optimisation devient très rapide à faire juste avant une mise en ligne. Le site pour optimiser au mieux vos PNG : TinyPNG... Fri, 19 Jul 2013 16:40:19 GMT Jacques Danilo http://www.pixelcrea.com/blog/trouvailles-du-web-6/ http://www.pixelcrea.com/blog/trouvailles-du-web-6/ Dans ce sixième épisode des trouvailles du web, j’ai trouvé pour vous de la typo gratuite, un blog sur des petits détails marrants en graphisme, un créateur de grille en CSS, une solution efficace pour l’élimination du spam et un analyseur de site pour en ressortir des couleurs ! Du vrac encore oui, au fur et à mesure de mes recherches sur Internet, allant de liens en liens pour ne vous garder que le meilleur ! Parlons peu parlons bien, place aux liens (et en plus ça rime)...   Stylify Me une interface simple pour une analyse des couleurs d’un site Internet. Le site va anlyser la feuille de style du lien fourni pour vous ressortir les codes couleurs en hexa (le symbole #) pour l’arrière plan, les typos, ainsi que quelques infos typographiques sur les niveaux de titres et le corps du texte Unroll Me Là on est sur du lourd, du très très lourd, puisque le site propose tout simplement de vous déshabonner à votre place à tous les spams reçu sur vos boites mails. Même si le site est en anglais l’interface est claire et simple, ce qui permet à tout le monde de naviguer rapidement sur le site et d’en comprendre l’intérêt. Je n’ai malheureusement pas pris le temps de tester ce service mais cela fait longtemps que j’entends parler de cette solution, et que en bien rassurez-vous ! 50 typos de type tatouage Une superbe sélection de 50 typos ressemblant au style tatouage par Designzzz. Encore une fois ce blog nous propose une très belle sélection de ressources en ligne. Un must ! 3x4 Grid : la création d’une grille CSS L’outil est pratique : il permet de créer par glissé-déposé une grille de 4 blocs de larges sur 3 de haut. Il suffit de glisser les zones sur la grille pour en définir les codes CSS. Un petit bouton nous permet ensuite de voir le code à copier pour avoir une grille de qualité sur notre site Internet. Little Big Details On a là un petit site Tumblr. listant des détails pour le moins étonnant sur les interfaces qui nous entoure. Sympa !   C’est tout… pour le moment * Merci la voix !... Wed, 17 Jul 2013 16:53:58 GMT Jacques Danilo http://www.pixelcrea.com/blog/definition-freelance/ http://www.pixelcrea.com/blog/definition-freelance/ Un graphiste freelance, c’est comme une agence de communication, mais en plus petit, à taille humaine. Un indépendant n’a donc pas de salariés, il est seul dans son entreprise. Ca à l’air triste comme ça mais au contraire, il y a de nombreux avantages pour les clients justement. J’ai fait le choix d’être en indépendant plutôt que dans une structure d’entreprise plus importante, simplement car je travaille à la maison. On peut dire l’inverse aussi, je dors sur mon lieux de travail. Mais le plus grand avantage c’est qu’un graphiste indépendant n’a pas ou peu de charges : ni secrétaires, ni commerciaux, ni locaux ou voitures de sociétés… Pour simplifier, c’est une agence de communication graphique et visuelle mais sans les frais annexes que les clients payeront au final sur leurs factures. On est donc moins cher, beaucoup moins cher des fois ! Et pourtant on fait le même travail c’est juste que l’application et l’implication sont différentes. Une agence, qui possède dans son équipe des chargés de clientèle ou des commerciaux pourra facilement organiser des rendez-vous réguliers sur le suivi de projet, alors qu’un freelance, lui, sera contraint de faire plus de production, et donc moins de rendez-vous. Mais attention, les agences de communications sont bien également. On ne s’adresse en général pas aux mêmes clients. Certains clients souhaitent avoir une grande structure en face pour avoir justement ce suivi plus important. D’autres, au contraire, se base plus sur un résultat et un prix. Mais être indépendant, c’est aussi aimer la difficulté. Car finalement être graphiste indépendant n’est pas simplement de jouer avec Photoshop toute la journée. On est multi-casquettes ! Etre freelance, c’est savoir gérer une société, être patron, secrétaire, commercial et graphiste… Pour ceux qui proposent que du graphisme à leurs clients. Il faut aimer faire un peu de tout, et être capable de se motiver tous les jours. Etre seul est vu de l’extérieur comme une chose super méga cool, mais en fait c’est une difficulté supplémentaire. Se motiver n’est pas quelque chose de simple, surtout en restant à la maison. Tu sais, il y a la console, la guitare, la télévision, qui nous empêcherait facilement de travailler pour nous et nos clients. Et tous les jours, on nargue ces loisirs pour s’enfermer dans son bureau, et être sérieux ! La réalité n’est pas si simple tu vois, mais je t’encourage à devenir un graphiste indépendant plus tard ! On y apprend beaucoup au contact de ses clients, et la relation humaine est quelque chose de magique. Quand tu seras grand tu pourras faire ce qu’il te plaira, et tu vois, ton papa, il fait ce qu’il aime, et ses clients le lui rendre bien !   Voilà le rendu du site Internet d'un graphiste freelance : ... Wed, 17 Jul 2013 14:30:11 GMT Jacques Danilo http://www.pixelcrea.com/blog/feedly-rss/ http://www.pixelcrea.com/blog/feedly-rss/ Ca y est, Google Reader disparait des applications et produits de la firme Google. Comme à son habitude, Google teste, crée puis enlève quelques produits tous les ans, ceux qui ne fonctionnent pas vraiment ou qui vivotent. Google Reader a été un très bon agrégateur de flux RSS mais il y a 6 mois la société avait annoncé sa fermeture en juillet 2013. Voilà qui est fait ! Du coup, pour ceux comme moi qui utilisent les flux RSS pour rester au contact des blogs et sites d’informations, il fallait trouver autre chose qui pouvait correspondre aussi bien sur la facilité d’utilisation que sur la gratuité du produit. Il existe beaucoup d’acteurs sur la gestion des flux RSS et mon choix a été difficile : il fallait alors tester chacun des principaux acteurs afin de choisir celui qui me correspondrait le plus. Et bien mesdames et messieurs, j’ai l’honneur de vous présenter mon choix : Feedly ! Feedly est un agrégateur simple et design, qui s’ajoute de manière discrète à Google Chrome (le navigateur) ainsi qu’avec des applications sur iPhone et iPad. Tout l’intérêt est dans cette adaptabilité à mes différents supports de navigation. La journée je surf sur Internet de mon ordinateur de bureau, mais le soir venu j’ai plus tendance à suivre les actualités sur ma tablette, ou sur mon téléphone lorsque je suis en sorties. Du coup ces applications et la synchronisation me permet d’être à jour sur les flux RSS que je suis. De la même manière, Google Chrome fonctionne avec une identification qui permet, lorsque je suis en formation par exemple sur un autre poste que mon portable, de me connecter via mon identifiant Google pour avoir Chrome qui se transforme comme à la maison : mes raccourcis, mes plugins et donc mon compte Feedly ! Simple, et magique ! Voici la liste des liens concernant Feedly :- le site Internet Feedly- le plugin pour Google Chrome- le plugin pour Firefox- le lien vers iTunes pour les applications iPhone et iPad- le lien vers Google Play pour Android... Tue, 16 Jul 2013 18:34:35 GMT Jacques Danilo http://www.pixelcrea.com/blog/trouvailles-du-web-5/ http://www.pixelcrea.com/blog/trouvailles-du-web-5/ Dans la famille des trouvailles du web, je voudrai le cinquième épisode ! Dans ce numéro, même si il n’y a pas de périodicité dans tout ça, je vous ai trouvé 5 liens ou sites Internet toujours autour de la création de site, de ressources gratuites, … Au menu donc, un site de photos au concept intéressant, des refontes graphiques des grands noms du web, de la texture pour photoshop, un éditeur de photo en ligne gratuit et un tutoriel pour la création d’un menu en CSS à plusieurs niveaux. Il n’y a pas de ligne éditoriale, mise à part le fait que je met de coté les sites Internet qui me plaisent au fur et à mesure de ma navigation dans cet océan de ressources (oh mon dieu que c’est beau, je m’étonne moi-même) ! On démarre ? Unsplash – 10 photos gratuites tous les 10 joursLe concept est joli, et les photos sont toutes magnifiques ! UnSplash propose tous les dix jours une série de 10 photos libres de droits et gratuites, en haute définition s’il vous plait ! Le concept, comme le site, mérite le détour et de le garder précieusement dans ses favoris ! Des refontes graphiques pour 25 sites populaires Un exercice de qualité pour tous graphistes freelance : refondre le graphisme, voir l’ergonomie et la navigation, sur des sites mondialement connus. Twitter, Facebook, tout y passe ! 40 textures photoshop gratuites Artatm nous propose une sélection de 40 textures pour photoshop, ou n’importe quel logiciel de montage et retouche photo d’ailleurs, en haute définition et d’une qualité intéressante pour nos compositions graphiques… Tuto : Un menu  multi-niveaux en responsive Un petit tutoriel très bien fait et documenté pour la réalisation d’un menu en css/jquery adaptable sur toutes les résolutions puisqu’il est responsive ! Le toturiel explique, étape par étape comment créer un menu et sa hiérarchisation en y implémentant un peu de jQuery. Fotor : éditeur de photos en ligne Il existe beaucoup de sites pour retoucher ses photos en ligne, mais malheureusement les options et outils sont souvent très pauvres sur ces plateformes en ligne. Pourtant, fotor relève le défis en proposant un très grand nombre d’outils, gratuitement qui plus est ! C’est à mon avis pour le moment le meilleur du marché, se détachant du lot par ses options avancées… A essayer de toute urgence !... Tue, 16 Jul 2013 18:00:59 GMT Jacques Danilo http://www.pixelcrea.com/blog/20-outils-seo/ http://www.pixelcrea.com/blog/20-outils-seo/ Aujourd’hui, avoir un site Internet nécessite obligatoirement d’avoir un bon référencement, à l’exception des sites privés (comme les extranets par exemple) ou des sites type évènementiel. Il est bon alors de savoir de quoi on parle et de faire en sorte que notre référencement nous apporte des visiteurs ciblés dans notre domaine d’intervention… Pour cela il existe une multitude d’outils, gratuits pour la plupart, permettant d’analyser en amont et en aval notre stratégie de référencement.  Je vous ai concocté une liste de 20 outils SEO indispensables vous permettant de produire, suivre, analyser et optimiser votre référencement Google, gratuitement !   1. Google SERP Snippet Optimization Tool SEO MOFO nous offre la possibilité de voir sous quelle forme notre page sera affichée et considérée dans les résultats naturels de Google. Cela vous permettra de voir comment votre titre et votre description seront affichée dans le moteur de recherche, afin d’adapter vos textes en fonction de la longueur du titre et de la longueur de la description. Plusieurs options sont disponibles pour afficher une date par exemple ou encore des mots en gras comme si la recherche était lancée http://www.seomofo.com/snippet-optimizer.html   2. Pingdom Tools : Full Page Test Nous savons que depuis quelques années Google prend en compte le temps de chargement des pages dans sa fameuse recette miracle au bon référencement d’un site. PingDom Tools permet de voir facilement comment sont chargées nos pages et quelles éléments prennent du temps afin d’optimiser la qualité de chargement de nos pages. http://tools.pingdom.com/fpt/   3. Google WebMasterTools Google fait du business, mais Google nous aide ! Il nous propose une analyse relativement interessante pour le référencement de notre site : analyse du robot.txt, analyse du contenu des pages, … Un outil gratuit et donc indispensable. http://www.google.com/webmasters/   4. Google Analytics Là on est sur de l’analyse du référencement Google. Il suffit d’installer un petit bout de code sur votre site pour démarrer l’analyse du site par Google. Il est alors possible de suivre les visiteurs sur votre site Internet en connaissant la provenance, le chemin réalisé dans votre contenu, etc… http://www.google.com/intl/fr/analytics/   5. Google Trends Un outil permettant de suivre l’évolution des recherches dans différents pays et de voir comment évolue la tendance sur les mots-clefs au fil du temps. Idéal surtout sur de l’international ou pour des sites multi-langues. http://www.google.com/trends/?hl=fr   6. Positéo Positéo permet de vérifier sa position sur les datacenters de Google, au-delà du moteur de recherche qui réadapte les résultats en fonction de vos précédentes recherches. Google est capable de reconnaitre vos recherches et les actions associées pour réadapté les nouveaux résultats… http://www.positeo.com/check-position/   7. Densité des mots clés Outils référencement nous propose d’analyser une page web (en donnant l’URL) ou en collant un texte pour en ressortir la densité des mots-clefs du contenu donné. Idéal pour une première analyse de vos contenus web. http://www.outils-referencement.com/outils/mots-cles/densite   8. Audit de la page web par outiref OutiRef audite une page web, en donnant l’url http, et analyse pour vous le titre de la page, les balises META, le texte visible, le contenu, son indice de popularité et la densité des mots présents. Le site peut également auditer un mot clé en donnant le nombre de résultats sur les moteurs et le positionnement de votre site sur les résultats de Google http://www.outiref.com/   9. Bing Webmaster Tool Idéal pour compléter son référencement en analysant son référencement pour et par le moteur de recherche BING. Le fonctionnement reste le même que pour Google WebmasterTools : vous ajoutez un bout de code sur la page et il analyse votre site dans les moindres recoins… http://www.bing.com/toolbox/webmaster   10. CopyScape recherche le duplicate content Google a horreur de la copie de contenus. Si vous avez fait votre site vous-même, c’est super, mais êtes-vous le seul à avoir ce contenu ? On a peut-être copié votre contenu ou rédigé un contenu semblable… Afin d’éviter toute mauvaise surprise comparez ! http://www.copyscape.com/ 11. Calcul du PageRank Même si ce paramêtre n’est plus autant d’actualités qu’il y a quelques années, pensez à vérifiez la notoriété de votre site et de vos pages grâce au calcul du pagerank http://www.pagerank.fr/   12. Analyse des balises META de votre site Là on s’adresse plutôt aux webmasters mais vérifier ses balises peut donner des explications sur la qualité de votre référencement. La sémantique de vos pages est indispensable aujourd’hui pour un référencement et un positionnement dans les résultats des moteurs ! http://www.outils-referencement.com/outils/pages-web/balises-html   13. Le nombre de pages référencées SEO Centro nous liste le nombre de pages référencées sur les moteurs de recherches suivants : Google, Yahoo, Bing et Blekko (beaucoup moins connu en France) http://www.seocentro.com/tools/search-engines/search-engine-saturation.html   14. Comment les moteurs de recherche voient votre site ? Ah, j’suis sur que vous ne vous étiez jamais posé la question… Spider Simulator analyse et affiche votre site de la manière d’un robot. Sympa pour en optimiser la sémantique, le contenu et la navigation interne http://www.webconfs.com/search-engine-spider-simulator.php   15. Le siteMap pour améliorer la prise en compte de votre site Créer un sitemap aide énormément les moteurs de recherche à explorer votre site Internet puisque vous lui indiquez toutes les pages du sites. Il n’aura pas besoin de suivre pages par pages les liens internes pour en référencer le contenu. http://www.yakaferci.com/genere-sitemap/   16. Suggestion de mots-clés WebRankInfo, le site de référence aujourd’hui sur l’actualité du référencement en France nous propose un outil de suggestion de mots clés. Il s’agit d’une analyse basée sur les recherches Google associées en analyse de la concurrence.http://www.webrankinfo.com/outils/google-suggest.php   17. Analyse du contenu d’un texte Live Keyword Analysis nous analyse un texte en recherchant précisément la densité de mots définis (allant jusqu’à 3 au maximum). Cela permet de savoir si la proportion de termes importants dans notre contenu est cohérent en fonction de notre stratégie de référencement http://www.live-keyword-analysis.com/   18. Alexa L’outil mondial de classement des sites Internet : il ordonne les sites du monde entier pour en déterminer un ordre. Cependant, au-delà du chiffre affiché et donc de la position mondiale de notre site Internet, il permet de savoir le nombre de visiteurs par jours, le taux de rebond ainsi que le temps passé sur le site en moyenne. Il donne également un nombre important d’informations concernant le domaine et la provenance des visiteurs. http://www.alexa.com/   19. XML SiteMap Generator Pour ceux qui ne développent pas de sites Internet, il existe des générateurs de fichiers sitemap.xml – comme l’excellent xml-sitemaps.com : http://www.xml-sitemaps.com/   20. Calcul des backlink vers votre site Internet En allemand, mais fort intéressant, Backling Checker permet de connaitre le nombre de liens entrant vers votre site.backlink-checker.de (site indisponible)... Mon, 15 Jul 2013 23:33:13 GMT Jacques Danilo http://www.pixelcrea.com/blog/deja-500-boutiques-e-commerce/ http://www.pixelcrea.com/blog/deja-500-boutiques-e-commerce/ J’ai développé il y a 2 ans maintenant un annuaire spécialisé dans le e-commerce français. Le but était de permettre aux boutiques en lignes de se référencer sur un site dédié au référencement et à son optimisation. Même si les annuaires ne sont plus à la mode depuis des années, j’ai souhaité par ce biais faire de la qualité au détriment de la quantité. L’annuaire fait son petit bonhomme de chemin, évoluant tranquillement pour atteindre en moyenne 100 visites jours actuellement. En regardant les statistiques, l’évolution des visiteurs est linéaire au fil du temps, car son trafic est essentiellement tiré des moteurs de recherche comme Google. 5% du trafic proviennent de sites référents. Mais plutôt que de vous parler des stats, je fais cet article pour fêter la 500ème inscription sur le site. Un cap est franchi ! Et ça fait d’autant plaisir qu’au départ je l’ai développé uniquement pour des tests sur des contraintes techniques en PHP et MySQL. Mais au bout de quelques heures de développement je me suis dit qu’il était possible d’en faire quelque chose. Comme quoi ! Alors merci aux 500 sites qui encore aujourd’hui font confiance à ce site spécialisé dans le e-commerce. En espérant que cette petite aventure continue un petit moment encore ! Note : le site Sites-Marchands.fr référence gratuitement les boutiques françaises dans diverses rubriques comme l’informatique, la mode, les loisirs, … N’hésitez pas à vous inscrire si ce n’est déjà fait ! Car rappelons-le, c’est gratuit !... Tue, 09 Jul 2013 12:03:52 GMT Jacques Danilo http://www.pixelcrea.com/blog/travailler-multi-ecran/ http://www.pixelcrea.com/blog/travailler-multi-ecran/ Lorsque l’on travaille sur un ordinateur, on a vite-fait de se retrouver avec une multitude de fenêtres ouvertes. Pire encore, on navigue entre-elles sans arrêt, au point de perdre du temps lorsqu’on doit ajouter une pièce jointe à un mail par un glisser-déposer, ou alors lire un mail avec des corrections à apporter à une maquette et qu’on passe sans arrêt d’une fenêtre à l’autre. Ces petites actions nous prennent un temps important dans notre journée et il est possible avec les technologies d’aujourd’hui d’améliorer le tout : en travaillant avec plusieurs écrans. De nos jours, on trouve énormément de cartes graphiques qui acceptent jusqu’à 2, 3, 4 voir même 6 écrans. Personnellement, j’ai opté pour une carte graphique avec 6 sorties, très puissante. J’utilise alors 3 écrans 21 pouces, m’offrant alors un bureau de 5760 pixels de large sur 1080 pixels de haut. Pour ma configuration, j’utilise l’écran central pour le bureau de Windows, avec sa barre d’applications en bas. Les 2 autres écrans sont à coté, un à gauche et un à droite. Dans mon fonctionnement de tous les jours, j’utilise les outils graphiques sur mon écran principal (central), mon navigateur à gauche et mes mails à droite. Je gagne donc du temps à faire les corrections de maquettes pour mes clients en ayant affiché à la fois mon Photoshop et le mail comportant les corrections sur le Webdesign. Et j’y fais des économies en impression ! Que l’on travaille avec 2 écrans ou plus, nous optimisons notre espace de travail et notre productivité. Ceci dit avec tout ce qui est ouvert je me pose la question si je ne devrais pas rajouter un quatrième écran pour les petites fenêtres : Skype, WinAmp, l’explorateur… Et vous vous travaillez comment ?... Mon, 08 Jul 2013 11:39:42 GMT Jacques Danilo http://www.pixelcrea.com/blog/bureaux-design-creatif/ http://www.pixelcrea.com/blog/bureaux-design-creatif/ L’espace dans lequel on travaille est très important pour notre confort et notre créativité. Et de nombreux sites spécialisés nous présentent des photos splendides sur des bureaux design, ergonomiques et tendances. Certains bureaux sont oldschool, d’autres design, proche de la prouesse architecturale. Et il y en a pour toutes les bourses, nul besoin d’avoir un bureau blanc de 60 mètres carrés devant une piscine ou la mer pour prétendre avoir un espace de travail design de qualité. Voici donc une petite sélection de quelques sites spécialisés dans la présentation de nos bureaux créatifs : - Minimal Desks (site plus disponible) - Fashionably Light - Home Designing - WorkSpaces Design - 17 Designers you Should Know and their Workspaces   Si vous en connaissez d’autres n’hésitez pas à me laisser un message ou via les commentaires afin de completer la liste…... Sun, 07 Jul 2013 13:28:48 GMT Jacques Danilo http://www.pixelcrea.com/blog/trouvailles-du-web-4/ http://www.pixelcrea.com/blog/trouvailles-du-web-4/ Encore une sélection des meilleures trouvailles du web aujourd’hui. Ce quatrième épisode vous propose un menu particulier car nous allons nous orienter sur la finalité d’un site, avec au programme du google Map Jquery avec une implantation facile, de la personnalisation de formulaire avec Chosen, de la vente de produits virtuels avec GumRoad, du remplissage automatique avec LoremPixel pour des images et la sélection du blog du WebDesign sur juin 2013. Ce n’est pas forcément des nouveautés mais simplement une mise en avant ici de sites internet qui méritent le détour ! En espérant que ces épisodes vous plaisent :) On commence ? gMaps.jsCe petit script jQuery nous propose l’ajout de Google Maps Api facilement et rapidement dans nos pages web. L’ajout se fait principalement en donnant les longitudes et latitudes d’un ou plusieurs repères. Il est possible de les personnaliser facilement pour y ajouter un logo ou une image personnalisée pour y poser un repère. Idéal donc pour aller au bout de la personnalisation de vos sites Internet. ChosenVoici un script jQuery permettant de gérer les listes d’un formulaire de manière plus ludique que les champs traditionnels. Que ce soit des champs select standards ou multiples, voilà un bon moyen de personnaliser vos formulaires. GumRoadVoici une petite boutique en ligne simple et pratique, mais seulement si vous vendez des fichiers numériques. Que ce soit des films, des fichiers graphiques, des livres (ebook) ou encore de la musique, créez votre profil et vos articles à vendre dans une simplicité déconcertante. Tout est extrêmement bien pensé, avec la possibilité de joindre vos fichiers sur la plateforme ou de simplement donner le lien du fichier à télécharger si il se trouve sur vos serveurs. Une perle à garder précieusement dans vos favoris ! LoremPixelLoremPixel s’occupe, par une simple ligne de commande, de remplir vos chartes graphiques avec de belles images lors de vos intégrations. On recherche toujours des images afin de remplir une intégration html/css en attendant les textes et photos du client. La ligne de commande se place dans la source de la balise image (img). Simple et rapide ! La sélection du mois de juin 2013Le blog du Webdesign nous propose sa sélection de sites Internet où le graphisme est d’une rare qualité. La sélection du webdesign est réalisée par Vincent Ginet, webDesigner de talent dans l’agence Dezup.... Wed, 03 Jul 2013 13:11:33 GMT Jacques Danilo http://www.pixelcrea.com/blog/analyse-windows/ http://www.pixelcrea.com/blog/analyse-windows/ J’ai toujours connu Windows, et j’ai évolué avec lui. Mes plus lointains souvenirs vont jusqu’à Windows 3.1, qui s’installait par disquettes et où les applications étaient très pauvres et limitées. A peine 20 ans plus tard arrive alors Windows 8, destiné à faire la passerelle entre les ordinateurs de bureau traditionnels et les tablettes ou du moins le monde du tactile (sur écrans d’ordinateurs, tablettes et smartphones). J’ai d’évolué en même temps que les versions de Windows, passant alors par Windows 2000, Windows Millénium, Windows XP, Vista et Seven. Windows XP était révolutionnaire pour son époque : on était enfin sorti de l’aplat gris de la barre du menu démarré et des fenêtres d’applications, la fameuse colline donnait alors la tendance : un nouvel horizon. Depuis cette époque, tout le monde parle de Windows XP comme étant un système stable et performant. Oui c’est vrai, dès lors que les drivers étaient bien installés il y a avait pas ou peu de bugs. Le système d’exploitation de Microsoft connu un franc succès, dès le départ… Et c’est alors que, pour des raisons inexpliquées, Microsoft a voulu sortir une version beaucoup plus simpliste de Windows. Une sorte de version fermée, offrant beaucoup moins d’options et de réglages. Windows Vista voyait le jour ! Et ce fut un fiasco total : un système beaucoup plus lourd en terme de ressources (notamment lié à son interface très bling-bling jouant à fond la carte de la transparence des fenètres d’applications). Pour l’avoir testé lors de sa sortie, cette version m’a dégouté au bout de quelques minutes à peine. L’ordinateur ramait pour un rien, un simple clic droit sur le bureau donnait lieu à une attente interminable… La décision a été très rapide, on repasse à XP tout de suite ! D’ailleurs, pour les entreprises qui étaient en version RETAILS (contrat par abonnements de licences), Microsoft a lui-même offert la réinstallation de Windows XP sur les postes, comprenant que dans un cadre professionnel son utilisation était clairement impossible. Microsoft, venant de comprendre son erreur, planche alors sur une nouvelle version, mixant la stabilité qu’offrait Windows XP au graphisme de Vista. Ils se sont beaucoup inspiré sur leur concurrent direct, Apple avec leur OS X simple et fonctionnel. Windows Seven (windows 7) se lance alors. Et là, on cri au miracle ! Enfin, enfin un système beau, ludique, pratique et fonctionnel. Pour ma part, j’analyse Windows 7 comme étant un mix parfait entre Windows XP et l’OS de chez Apple. Il est aussi performant que Windows XP, sachant libérer de la ressource système si besoin (en fonction des applications lancées). De plus, le fait de pouvoir garder dans la barre Windows les applications en raccourcis font penser au dock d’Apple. En un mot il est parfait ! Alors forcément, sortir une nouvelle version allait devenir difficile, surtout si ils cherchaient à refondre l’interface. Evidemment, vous l’aurez compris, c’est le cas, car Windows 8 propose une interface qui est identique sur toutes les plates-formes : Ordinateur de bureau, téléphone portable et les tablettes. Là encore, j’ai eu l’occasion de le tester il y a quelques semaines (Merci Edouard pour m’avoir prété ton PC un WE), et comme avec Vista j’ai été frustré dès le démarrage. L’interface est sympa oui, mais pas sur un ordinateur de bureau, pas pour travailler tous les jours dessus : l'interface de l'écran d'accueil est difficilement optmisable pour des applications tierces, le bureau devient difficilement accessible, fini le bouton démarrer où se trouve toutes les applications, ... Par mon expérience de ces systèmes, j’en conclus que Microsoft sait faire des systèmes performants et fonctionnels, mais simplement une fois sur deux visiblement. Plus qu’à attendre les versions 9, 11, 13, etc… ^^... Wed, 26 Jun 2013 11:31:49 GMT Jacques Danilo http://www.pixelcrea.com/blog/cms-or-not/ http://www.pixelcrea.com/blog/cms-or-not/ Pour la création d’un site Internet, il existe 2 solutions principales : la création sur-mesure de votre site Internet, et la création à travers l’utilisation d’un CMS. Un CMS est un gestionnaire de contenu, en d’autres termes il s’agit de plusieurs fichiers à installer qui permettent d’avoir une administration sur votre site internet pour gérer l’intégralité de votre site, de l’aspect graphique au contenu même en passant par la navigation et les réglages du site (optimisation, gestion des photos, etc.). Aujourd’hui, beaucoup de personnes souhaitent avoir la main complète sur leur site, ce qui tendrait vers l’utilisation d’un CMS plutôt qu’un développement personnalisé. Car effectivement, un CMS peut faire beaucoup de choses, presque tout en fait ! Encore faut-il bien choisir son CMS en fonction de ses besoins et des contraintes que possède chaque CMS. Il en existe plusieurs sur le marché aujourd’hui, et presque tous sont gratuit. Pour faire un rapide tour d’horizon des différentes plateformes utilisées, on utilise WordPress pour la gestion d’un site de type blog (avec articles et commentaires), Joomla pour la gestion de contenu texte simple (site de présentation d’entreprise par exemple), ou encore PrestaShop pour la création d’une boutique en ligne… Il en existe beaucoup d’autres mais ne nous attardons pas, je vous présente ici les plus populaires aujourd’hui. Mais est-ce réellement intéressant d’utiliser un CMS ? Ce qu’il faut savoir c’est qu’un CMS est avant tout une usine à gaz, proposant alors une multitude d’options, de réglages, pour répondre aux diverses utilisations possibles. D’expérience, nous voyons que les clients utilisent entre 3 et 5% des possibilités qu’offre le CMS installé. Alors pourquoi rouler avec une voiture de course si c’est juste pour aller faire vos courses ? De plus, un CMS est une solution très lourde, malgré le fait que les fichiers soient optimisés, si c’est simplement pour y afficher du texte et des actualités. Les performances ne sont donc pas optimisées. Nous savons que les moteurs de recherche comme Google considèrent que la rapidité d’accès au serveur et le temps de chargement de la page sont des paramètres aidant ou défavorisant le positionnement du site dans les résultats de recherche… Autre point important, un CMS évolue. Il évolue tout le temps en fait. Derrière chaque CMS se cache des dizaines de graphistes, développeurs, qui consacrent du temps à la réalisation d’un CMS sensé être parfait. Mais le temps de mettre les idées en place, de la réaliser, de les tester et de considérer les modifications stables (sans failles de sécurités ou bugs possible) provoque un décalage entre le référencement du CMS avec les différentes stratégies de référencement des moteurs de recherche… Si l’on prend l’exemple de Joomla, la dernière version stable (joomla 2.5) a été lancée en janvier 2012. Et il faut savoir que Google change sa stratégie de positionnement des sites environ tous les 6 mois. Il y a donc eu du changement depuis... Dans son utilisation, un CMS permet de faire beaucoup de choses, et l’erreur que nous voyons souvent concerne les règles de mise en page. Un client non formé, ayant la main sur le contenu de ses pages aura tendance à détériorer la mise en page en y ajoutant des couleurs aux textes, du soulignement et de la mise en gras partout. Hors le contenu de qualité est aujourd’hui indispensable pour les moteurs de recherche, sans parler des fautes de gout à mettre du jaune fluo partout pour écrire les textes du site. Forcément je défends mon bout de gras et mon travail de graphiste freelance, qui est de livrer à mes clients des sites propres et adaptés aux différents moteurs de recherche pour un retour sur investissement important. De plus, en qualité de formateur indépendant, je forme des personnes régulièrement sur la rédaction web, l’installation et la personnalisation de CMS (Prestashop, WordPress et Joomla notamment)… Pour conclure, oui un CMS c’est bien, simple et pratique pour le client final, avec une main mise sur l’intégralité du site, mais face à cela il risque d’en couter en référencement, navigation et ergonomie des pages. Il y a du bon, oui, mais attention, il n’y a pas que du bon derrière tout ça !... Tue, 25 Jun 2013 13:35:43 GMT Jacques Danilo http://www.pixelcrea.com/blog/trouvailles-du-web-3/ http://www.pixelcrea.com/blog/trouvailles-du-web-3/ Dans ce nouvel épisode des trouvailles du web, j'ai selectionné pour vous 5 nouveaux liens. Au menu nous avons CSS Hat, pour transformer nos calques photoshop en css rapidement et simplement, des textures grunges à gogo, une analyse très propre d'iOS7, du code en pagaille, et une très belle sélection d'icônes. Un menu chargé donc ! Pour rappel, ces liens sont issus d'un surf intensif sur la toile, sautant de liens en liens, de tweets en tweets et de statuts facebook en statuts... Tout ça pour ne garder que le meilleur pour moi. Il n'y a pas de fréquence dans ces épisodes, simplement je m'arrète au bout de 5 liens trouvés... :) On commence ? CSS HatCss Hat transforme les calques photoshop en CSS grâce à ce plugin pour photoshop CS6. Il s'agit là d'un gain de temps lors de vos intégrations HTML et CSS. Par contre, cela demande une rigueur dans la construction de vos calques pour avoir un résultat interessant. Pour l'avoir testé il y a quelques jours, son utilisation est simple à la seule condition de travailler sous photoshop proprement. Il peut exporter la dite CSS par le presse-papier sous différents formats : CSS3, LESS, SCSS, SASS, ... Une perle !http://csshat.com/ 25 textures grunges en haute définitionWebdesignerdepot nous propose une sélection de textures en haute définition. La qualité des textures, en plus du format, nous permettra de réaliser de belles plaquettes commerciales design ou des maquettes web (webdesign) de qualité. A télécharger sans plus tarder !http://www.webdesignerdepot.com/2013/06/free-download-25-colorful-grunge-textures/ Matt Gemmell analyse iOS 7Le bloggeur Matt Gemmell nous propose, en anglais, un excellent article sur l'analyse d'iOS 7, se basant sur les visuels officiels d'Apple. L'article décrit écran par écran la nouvelle interface. Article très complet !http://mattgemmell.com/2013/06/12/ios-7/  40 fiches récap pour les développeurs et les graphistesUn très bon récap de fiche CheatSheet de la part du blog Inspire Trends autour des métiers et techniques du web : du CSS, du HTML, du PHP, du Photoshop et Illustrator, tout y est ! Ces fiches sont un résumé des techniques, des raccourcis claviers des logiciels, des fonctions principales, etc. A garder précieusement pour optimiser au mieux votre travail !http://inspiretrends.com/fresh-cheat-sheet-for-designers-and-developers/ 20 packs d'icônes gratuits pour vos interfacesLine25, un blog que j'apprécie particulièrement, nous propose ici une vingtaine de packs d'icones de qualités. Idéal pour les graphistes lors de la création d'interfaces (administration ou parties publiques - FrontOffice)http://line25.com/articles/20-free-web-icon-glyph-packs-for-your-ui-designs  Et comme dirait TF1 à l'heure où j'écris ces lignes : C'est tout, pour le moment...... Tue, 25 Jun 2013 12:16:45 GMT Jacques Danilo http://www.pixelcrea.com/blog/organiser-temps-freelance/ http://www.pixelcrea.com/blog/organiser-temps-freelance/ En tant que freelance, travaillant le plus souvent chez soi, on a toujours du mal à gérer nos journées : certaines sont trop remplis, d’autres au contraire sont affreusement vides. Alors comment peut-on mieux adapter nos journées de travail ? Il est important de prendre du recul sur son activité quotidienne dans son ensemble, pas seulement liée à notre activité même. En comprenant notre fonctionnement propre, il sera alors possible d’en tirer profit vers une meilleure gestion de notre temps et de nos journées. Explications : Prendre du reculDans un premier temps, faites vous en fin de journée un petit récap de la journée : du réveil à la fin de la journée, qu’avez-vous fait ? Si possible essayez d’être précis sur le temps passé sur chaque tâche de la journée. Pour exemple voilà ma journée type : Réveil vers 7h30, et petit déjeuné devant mes mails. Vers 8h je me prépare (ranger un peu la maison, prise de la douche) pour démarrer vers 8h30 ma journée de travail. Vers 10h je fais une première pause sur Tweeter et Facebook et à 10h30 je reprends le travail en cours. Je fais une pause entre 13h et 14h pour manger. La fin de la journée se situe entre 18h et 19h. Identifier les tâches récurrentesComme vous, je passe beaucoup de temps à lire mes mails, faire de la veille sur les réseaux sociaux et sur les blogs. Ces moments prennent un temps considérable dans une journée (près d’une heure chez moi, parfois deux !). Sur une semaine, les tâches récurrentes peuvent être les devis ou les factures également… Modifier l’ordre des actions dans une journéeCa parait facile à dire, mais essayez de modifier l’ordre de votre journée type. Vérifiez vos mails qu’à 11h par exemple, ou encore surfez sur Facebook qu’entre 9h et 10h le matin. Le fait de changer l’ordre des tâches à faire peut vous donner une impression de gagner en productivité, ou l’inverse. Mais c’est en testant que vous saurez ! Supprimez les distractionsC’est prodigieux, si je coupe les réseaux sociaux et les applications parasitaires comme le lecteur de flux RSS ou Skype par exemple, je travaille mieux ! Je sais, c’est pas facile ;) Donnez vous de la rigueurIl est important, que vous commenciez votre activité de freelance ou non, de se donner de la rigueur : démarrez et terminez vos journées à une heure précise, faites des pauses à heures fixes, en évitant de se laisser distraire. Personnellement, j’ai supprimé toutes les distractions de mon bureau : guitare, télévision, … Je travaille donc dans un univers d’entreprise uniquement quand je suis dans mon bureau. De plus ma porte est fermée, ce qui évite d’être dérangé par la vie familiale ! Alors… et vos journées ? C’est quoi votre petit secret pour organiser votre journée ?... Sat, 22 Jun 2013 01:11:14 GMT Jacques Danilo http://www.pixelcrea.com/blog/iphone5s-couleur/ http://www.pixelcrea.com/blog/iphone5s-couleur/ D'après de nombreuses sources non-officiels, il est envisagé que la nouvelle version de l'Iphone 5s, qui devrait être dévoilé cet automne, se décline dans un jeu de plusieurs couleurs, comme actuellement sur la dernière gamme des iPod. L'iPhone 5, tout comme le dernier iPad, propose un système bicolore blanc/alu ou noir/ardoise. Cependant l'iPod lui évolue avec des couleurs anodisées comme le vert, le bleu, le rouge ou encore le rose... Mais rappelez-vous, les iMac ont vus le jour avec toute une série de couleur qui ont permis à la marque de se démarquer des concurrents. Alors pourquoi ne pas le proposer sur la nouvelle version ? Cela changerait ! Nous avons toujours connu les téléphones Apple en noir, puis en blanc ou noir. Dans un marché très concurrentiel, surtout depuis l’arrivée des smartphones Samsung, il pourrait être intéressant de proposer quelque chose d’un peu plus personnel. Les constructeurs d’accessoires pour iPhone pourraient par contre rester sur le banc de touche si le nouveau modèle se produit en couleur : il sera alors plus sympa aux utilisateurs de montrer la couleur que d’afficher une coque personnalisée, du moins dans un premier temps. Autre souci également à proposer des coques d’origine en couleur : la gestion des stocks. Même si Apple peut se baser sur les volumes de vente de l’iPod, il devient alors compliqué aux opérateurs téléphoniques et magasins spécialisés de prévoir les couleurs qui marcheront le mieux. Au-delà de la possibilité d’avoir de la couleur sur le nouvel iPhone 5S, que peut-on imaginer d’autre ? Un téléphone plus fin ? Plus léger ? Plus performant en tout cas c’est sur ! Un changement de forme, de taille d’écran ou du design général se verrait certainement plus sur un iPhone 6 qu’un 5s (dans la dénomination).... Fri, 21 Jun 2013 15:02:31 GMT Jacques Danilo http://www.pixelcrea.com/blog/refonte-site-internet/ http://www.pixelcrea.com/blog/refonte-site-internet/ 3 mois se sont écoulés depuis la refonte complète de mon site Internet. Je parle ici de refonte complète puisque la refonte comprenait à la fois l’architecture des pages (dans le design et la sémantique) et l’architecture du site (arborescence, nom des pages et nombre des pages) : Je n’ai gardé que le nom de domaine et quelques contenus, repartant de zéro en remettant tout à plat pour une nouvelle stratégie de référencement et stratégie commerciale. L’ancien site n’avait quasiment pas changé en 6 ans d’activités, seule la partie portfolio bougeait de temps à autre, mais il ne répondait plus aux nouvelles directives sur le référencement d’un site Internet. Il était alors temps de penser à une refonte dans la structure et les messages à y faire passer. Et ce sans vous parler d’un graphisme vieillissant ! Alors nous voilà, 3 mois plus tard, à pouvoir commencer une première analyse de cette refonte complète. Dès le départ, il apparaissait qu’un changement de structure dans le site allait se constater avec un grand nombre d’erreurs 404 sur la nouvelle version, puisque des pages allaient disparaitre ou changer de place (nouvelle adresse URL donc). Mon premier travail avant la sortie du nouveau site a été de lister toutes les pages de l’ancien site et d’en ressortir les nouvelles adresses pour les inclure dans mon fichier htaccess en redirection 301. Ensuite, j’ai personnalisé l’erreur 404 du site pour les pages moins importantes. Certaines pages de mon ancien site ne représentaient que quelques visites par années, autant les retirer tout simplement. J’étais alors paré au lancement du nouveau site. Une fois la nouvelle version du site lancée et disponible en ligne, j’ai été sur mon compte Google Webmaster afin d’inclure le nouveau sitemap du site. Il suffit de retirer l’ancien dans la configuration du compte et d’y inclure le nouveau. Pour information, Google risque de ne pas le prendre au départ car il trouvera beaucoup d’erreurs 404 liées au changement de structure du site. Et après quelques jours, Google est passé sur le nouveau site et à naturellement fait la mise à jour des adresses des pages importantes (par la redirection 301) et a commencé à référer les nouvelles pages. Moi qui redoutais la refonte, en m’attendant à une grosse perte de trafic, je suis épaté du résultat. Parlons un peu de chiffres : avant la refonte, le site enregistrait en moyenne 120 visites uniques par jour en 2010, puis environ 110 visites/jour en 2011 pour finir à 60 visites uniques par jour en ce début 2013. Les raisons de cette perte sur le trafic du site : la réduction des publications sur mon blog MisterDanilo et la réduction des publications sur mon ancien site (actualités et portfolio). Ces chiffres sont donc normaux vu la perte d’activité sur les 2 sites Internet. Depuis la sortie du site (lancé un dimanche soir), j’ai enregistré une légère perte la première semaine avec 45 visiteurs uniques par jours, puis, au passage des robots Google et de la prise en compte du nouveau sitemap je suis passé à 90 visites uniques par jour la deuxième semaine. C’est au bout de ces 2 premières semaines que j’ai alors envoyé un emailing afin d’annoncer la nouvelle version, enregistrant des records d’audience avec un pic à 350 visiteurs uniques… Depuis, le site enregistre entre 90 et 130 visiteurs uniques par jour la semaine et entre 20 à 60 visiteurs uniques le week-end : normal, on est ici sur un site qui s’adresse à des professionnels… Agences de communications, graphistes, etc. D’un point de vue positionnement et référencement Google, je suis passé en seulement 3 semaines de la 34ème place à la 16ème sur le mot-clef graphiste freelance et de la 22ème place à la 13ème place sur le mot clef graphiste indépendant... Autant dire que le bilan est très positif, et ma boite mail me le présente bien : 20% d’augmentation de demande de devis par semaine pour la partie graphique, et de une à deux prises de contact pour la partie formateur freelance (nouvelle rubrique sur le site Internet). Attendez vous d’ici quelques semaines à voir de nouveaux partenaires et surtout de nouvelles références clients :)... Thu, 20 Jun 2013 18:12:48 GMT Jacques Danilo http://www.pixelcrea.com/blog/apple-ios-7/ http://www.pixelcrea.com/blog/apple-ios-7/ Ca y est, il y a quelques heures Apple a présenté la nouvelle interface iOS7 qui devrait voir le voir sur le nouvel iPhone et iPad à l'automne prochain. Nous avons à faire ici à une grosse révolution d'un point de vue graphique et esthétique, avec un changement radicale de l'interface par de nouveaux icones et des effets novateurs. Mais Steve Jobs aurait-il validé cette nouvelle version de iOS ? On l'avait dit et redit un peu partout sur Internet, la mode est au Flat Design, et, oh grande surprise... On a du flat design sur la nouvelle interface d'Apple... Comme c'est étonnant ! Tous les icones ont étés repensés, et l'effet de relief à disparu : les couleurs sont plus éclatantes, plus claires aussi. J'ai eu l'impression que l'interface lors de la présentation était liée à l'été. C'est frais ! Dans les grandes nouveautés esthétiques, sans parler de l'architecture et la navigation modifiée, on retrouve un effet de paralaxe pour l'arrière-plan : lorsque l'on déplace son portable de gauche à droite, la photo en arrière-plan se déplace également de manière légère, mais donnant un semblant de niveau entre le fond et les icones. Android le faisait déjà un peu, voilà qui est égalé si ce n'est dépassé ! Pourtant un mauvais ressenti j'ai ! Mince je recommence à parler comme Maitre Yoda, vite un cacheton... Je disais donc que j'ai un peu de mal avec cette nouvelle version : malgré cette simplification de l'interface qui est relativement agréable, je tilte sur les icones, un peu trop "enfant" à mon goût : les couleurs sont ludiques, certes, mais le jeu de couleur utilisé semble sortir d'une boite de crayon de couleur. Je m'attendais plus à avoir un aplat de couleur qu'un dégradé partout... Si vous souhaitez voir toutes les photos de la nouvelle interface, c'est par ici sur le blog de osxdaily... Tue, 11 Jun 2013 11:46:15 GMT Jacques Danilo http://www.pixelcrea.com/blog/texte-image-remplacement/ http://www.pixelcrea.com/blog/texte-image-remplacement/ Ah, ce fameux Lorem Ipsum que vous voyons partout, nous les graphistes, et que nous utilisons dans nos maquettes en attendant les textes de nos clients. A force de l'utiliser, nous connaissons par coeur les premières lignes de ce texte de remplacement en latin. Mais savez-vous pourquoi nous utilisons ce fameux texte ? Et pourquoi le latin d'ailleurs ? Ce Lorem Ipsum ne pourrait-il pas avoir un remplaçant ? Le texte ne veux absolument rien dire, et même si nous recherchons la traduction il n'y en a pas. Une amie à moi, qui n'y connaissait rien, passa un rapide coup d'oeil par dessus mon épaule pour s'exclafer : Ah, tu fait un site en latin, c'est original... J'vous jure, les blondes ! Ayant fait un peu de latin au collège, elle commença à traduire... Mais rapidement elle comprit que la traduction n'était pas possible ! Si nous utilisons du latin, c'est simplement pour mettre un texte de remplacement (sur nos maquettes photoshop, illustrator et InDesign notamment) qui ressemble le plus de loin à la structure européenne dans la longueur des mots, la structure des phrases, ... Nous, Français, utilisons principalement des mots courts, à comparaison à l'Allemand où les mots sont sensiblement plus long. Voilà l'explication rationnelle, et cela nous évite d'avoir à écrire du "bla bla" à la place de longs textes pour nos clients. Il existe plusieurs sites permettant de trouver du texte latin en attendant, mais personnellement j'utilise http://fr.lipsum.com/ qui permet rapidement de me produire plusieurs paragraphes, mots, caractères ou encore des listes. C'est simple et rapide. Il fait parti de mes favoris et est ouvert plusieurs fois dans ma journée... Avoir du faux texte c'est bien, surtout en attendant que le client rédige ses propres textes, mais on manque aussi d'images... On peut chercher rapidement sur Google Image des paysages, ce que je fais assez souvent, en attendant le cd du client, ou sinon il y a http://fakeimg.pl/ : Fake images please permet de mettre des images vides en attendant les photos du client ou de l'agence de communication lors de nos découpages html et css. L'utilisation est simple comme bonjour, on insert la balise image avec en source l'adresse du site suivi des dimensions... Fastoche ! ;)... Tue, 11 Jun 2013 11:26:10 GMT Jacques Danilo http://www.pixelcrea.com/blog/agent-freelance/ http://www.pixelcrea.com/blog/agent-freelance/ J'ai été récemment démarché par un agent spécialisé dans les activités graphiques indépendantes. Un agent pour freelances en fait. Je l'ai rencontré et nous avons discuté de son activité et de son offre pour nous, graphistes indépendants ! Cette discussion était vraiment intéressante, et cela m'a aidé à découvrir son métier et le métier d'agent d'ordre général, que ce soit pour nous, simples graphistes, ou pour les stars et personnalités publiques. Mais c'est quoi au juste un agent pour graphiste freelance ?Un agent, c'est le juste milieu entre un patron et un expert. Il suppervise ce que l'on fait avant, pendant et après une mission en freelance : il nous aide à budgetiser le projet, d'en déduire les difficultés et le temps à prendre, ensuite il permet de nous donner quelques clés durant notre activité. Il s'occupe principalement de la partie finance autour de notre activité. Il ne faut pas confondre apporteur d'affaires et agent, ce sont bien 2 activités différentes. Un apporteur d'affaires nous apporte comme son nom l'indique des devis à réaliser, et si ça signe, il prend un pourcentage sur la vente. Un agent lui, travaille au forfait le plus souvent, par trimestre ou par mois. Il permet de vérifier l'état des comptes, des rentrées et sorties, et avec une analyse personnelle (contrairement aux banques) autour du monde du freelance. Il devient alors le moniteur de l'activité en contrôlant les dépenses et en vérifiant les entrées. Il permet aussi de mettre en place des lettres de relances ou mises en demeurent de payer... Pour ma part, je n'ai pas été conquis par le concept, malgré que j'y trouve beaucoup de qualité et d'avantages tous les jours dans mon métier. La personne rencontrée me disait que ça semblait se démocratiser et que le coût d'un agent serait entre 50 et 300 euros par mois.... Sun, 09 Jun 2013 18:28:36 GMT Jacques Danilo http://www.pixelcrea.com/blog/trouvailles-du-web-2/ http://www.pixelcrea.com/blog/trouvailles-du-web-2/ Allez, on continue cette série sur les trouvailles du web avec ce deuxième épisode. Au menu de cet épisode de l'infographie, pinterest et la stratégie web pour les entreprises, de l'interface en PSD de qualité, des icones Flat Design et un peu de code jQuery pour les typos. Un peu de tout, et pour tout le monde finalement ! Du graphiste freelance au développeur et intégrateur, vous devriez vous y retrouver aujourd'hui ! C'est parti ? Voici la sélection du moment, découverte en surfant sur la toile, sur Facebook et Twitter. Et n'oubliez pas, partagez ! 1. Infographie pour les photographesLe blog Designzzz nous propose une sélection d'infographies autour de la photo, Nikon ou Canon, avec des réglages, conseils, habitudes et utilisations possibles autour de la photo et de ses réglages.http://www.designzzz.com/handy-photography-cheat-sheets/  2. 6 raisons d'intégrer Pinterest dans sa stratégie WebPinterest monte, et c'est pourquoi une entreprise devrait s'y interesser d'un peu plus près. Le Webmarketeur nous propose sa version et sa stratégie autour de ce nouveau réseau socialhttp://www.le-webmarketeur.com/2012/02/07/6-raisons-dintegrer-pinterest-dans-sa-strategie-web/ 3. Des interfaces en PSDPlus de 35 fichiers photoshop pour vos créations d'applications en ligne, administrations, etc. Il y en a pour tous les styles et tout est évidemment gratuit. Ces interfaces sont sélectionnées pour leur qualité, évidemment !http://blog.karachicorner.com/2013/05/photoshop-psd-files-for-gui-designing/ 4. Des plugins jQuery pour jouer avec nos typos préféréesUn deuxième lien pour le blog de Designzzz que j'apprécie particulièrement. Ici sont présentés différents plugins jQuery autour du thème de la typo et de ses effets possibles. Une très belle sélectionhttp://www.designzzz.com/jquery-typography-plugins/ 5. Du Flat, du Flat, et du Flat !J'évoquais quelques billets plus tôt la mode du Flat webdesign et de cet effet de mode. Alors pour que vous puissiez intégrer tout ça j'ai trouvé une série de 12 PSD (fichiers photoshop) avec des icones en Flat Designhttp://designerves.com/article/12-free-flat-icon-sets/   Voyez, il y en a pour tout le monde ! Bon surf ! ... Tue, 04 Jun 2013 19:48:08 GMT Jacques Danilo http://www.pixelcrea.com/blog/ipad-applications-freelance/ http://www.pixelcrea.com/blog/ipad-applications-freelance/ Quand l’iPad est sorti, c’est vrai que je m’étais demandé à l’époque à quoi pouvait bien servir ce nouvel outil. Entre le smartphone et l’ordinateur portable, une tablette apple ne permet pas de travailler comme je l’entendais avec les produits Adobe par exemple… Cependant, fan de gadgets, j’ai craqué et j’ai acheté mon premier iPad (la première version) assez rapidement. Et j’ai découvert un réel intérêt directement, non pas dans le travail à proprement parlé, mais dans son accompagnement. Effectivement c’est pratique de pouvoir consulté sa banque tout de suite, d’avoir le programme tv ou checker ses mails fréquemment en déplacement. Depuis, je suis passé sur l’iPad 3, en conservant le premier iPad pour les besoins domestiques (recettes de cuisines, consultation du programme tv, etc…) Je ne compte plus le temps que je passe dessus. Je l’utilise très souvent dans ma journée, du matin au reveil jusqu’à aller me coucher. Je regarde mes séries Tv et mes films que sur la tablette ou presque. Coté travail, toute la journée je l’utilise pour ma veille techno, mes mails, mes flux rss et beaucoup de choses encore. Voici alors les applications que je lance très régulièrement dans ma journée regroupée par thèmes : Les réseaux sociaux Dès la page d’accueil, je retrouve les accès direct vers les réseaux sociaux que j’utilise : Facebook, Twitter, Instagram, Google plus et Skype. Je passe beaucoup de temps sur Facebook, ainsi que sur Twitter. J’avoue. Par ces applications, je me mets à la page en consultant l’actualité sociale. Pour le travail J’utilise le calendrier d’Apple, synchronisé entre mon portable, mon iPhone et donc mon iPad. J’y inscris tous mes rdv, les choses à faire sur une journée précise (comme rappeler un client par exemple). Pour mes mails c’est l’application Mail par défaut qui fonctionne très bien sur lequel j’ai installer 3 comptes différents pour différents besoins et sites que je gère. J’utilise aussi beaucoup l’application photo où sont stockés la plupart de mes références clients. J’ai mon book portable que je peux montrer lors de mes rdv clients. J’ai également un dossier où se trouve toutes les documentations sur les langages de développement, comme le html, css, jquery, php et mysql. En plus, j’utilise Adobe Reader pour lire les PDF importants pour mon activité, que ce soit des documentations (comme la documentation des pages jaunes pour les formats publicitaires) ou des aides sur des logiciels ou autres. Pour les rendez-vous J’ai parlé juste avant de l’application photo où j’y stocke mon book de graphiste freelance, mais j’utilise beaucoup en rdv Idea Sketch et Adobe Ideas pour la prise de note. Ces applications me permettent de réaliser des schémas et croquis rapidement et de présenter au client. De plus, l’intéractivité entre les mails et ces applications se fait très bien, ce qui permet de gagner beaucoup de temps lors de la mise en production des projets clients. Pour la veille technologique Mon application préférée, Dribbblr, que je consulte 2 ou 3 fois par semaine. Ensuite je consulte mes flux RSS avec Feedly et lorsque je surfe j’utilise Pocket pour sauvegarder les pages web qui me plaisent. Pocket est très utile car il se présente partout, sur smartphone, tablette, mais surtout sur Mac et PC. Indispensable donc si, comme moi, vous vous déplacez souvent. Voilà donc les applications que j’utilise quotidiennement, dans mon travail et ma vie de tous les jours. Et vous ? Qu’est ce que vous utilisez le plus ?... Mon, 03 Jun 2013 14:12:43 GMT Jacques Danilo http://www.pixelcrea.com/blog/flat-design/ http://www.pixelcrea.com/blog/flat-design/ Les modes changent, elles évoluent sans cesse. La mode sur le plan du design intéractif aurait tendance à se diriger vers ce que l'on appelle le Flat Design. Mais qu'est ce qui se cache derière ce nom ? Comment faire un design à plat ? Quels sont les secrets de cette nouvelle tendance graphique ? Le Flat design n'est pas nouveau, bien au contraire. Il est arrivé avec la sérigraphie en faite, il y a bien longtemps. Ceci dit, depuis quelques mois, ce type de graphisme refait surface. Et oui, fini les ombres noires derrière les gros boutons sur nos sites Internet, fini l'aspect 3D et les effets de lumières un peu partout, c'est l'heure du Flat Design ! Un flat design c'est simplement une simplification à l'extrême du graphisme : on oublie tout ce qui est en surcharge pour gager le meilleur : pas de dégradé, pas d'ombrage, pas de relief, on simplifie. On arrive simplement avec un jeu de couleur (une palette couleur) avec du contraste. Ce sont les couleurs et les formes qui définissent l'aspect général, et rien d'autre. Pour faire du flat, du graphisme sobre et épuré, il suffit de jouer sur les couleurs. Pour en donner du relief, il faut faire des ombres dures et nettes, en jouant sur les couleurs et l'opacité uniquement. Si vous regardez bien, ce graphisme était visible depuis des années, pensez aux vieilles affiches de cinéma ou d'art déco. La sérigraphie avait-elle quelques décénnies d'avance ? C'est Windows 8 qui, de nos jours, lanca cette nouvelle mode par un graphisme très sobre et rectangulaire. Windows mobile repris la même interface. Il y a même des rumeurs qui annonceraient une nouvelle version pour iOS en flat design. Pourquoi pas ? Aujourd'hui tout le monde simplifie ses interfaces : Twitter, FaceBook, Instagram, ... On y arrive doucement mais surement. Mais qu'en est-il des sites Internet pour nos clients ? Et au bout de combien de temps nous allons saturer de cet effet de mode ? Hihi !... Mon, 03 Jun 2013 01:32:52 GMT Jacques Danilo http://www.pixelcrea.com/blog/trouvailles-du-web-1/ http://www.pixelcrea.com/blog/trouvailles-du-web-1/ Les trouvailles du web - Epidode 1 - démarre une nouvelle série de ressources trouvées sur Internet destiné aux graphistes, webdesigners, illustrateurs, ... C'est une sélection de bons sites, tutos, et plein d'autres choses qui pourraient vous servir. Ces liens sont le fruit d'une veille techno en surfant cette semaine, avec quelques citations sur Twitter ou sur les autres réseaux sociaux... Je vais essayer de regrouper par époside environ 5 liens marquants dans la veille technologique. Alors c'est parti ! Dans ce premier numéro des trouvailles du web je vous propose des tutos pour faire des caractères cartoon sous Photoshop et Illustrator, du déournement de photos avec Photoshop, d'imprimer vos photos Instagram, de réaliser vos propres objets 3D, et pour finir de mettre en place dans vos pages web des graphiques et diagrammes de qualités. 25 tutoriels pour créer des personnages et mascottesCet article du blog de Spell Web Design regroupe plus de 25 tutos pour la réalisation de personnages de type cartoon, sous Illustrator ou Photoshop. Il y en a pour tous les styles...http://blog.spellwebdesign.com/character-design-tutorials/ Tutoriel pour déshabiller une girafe sous PhotoshopUn excellent cours sur comment réaliser une affiche créative en partant de 2 photos : une girafe et une table à repasser... Le détournement et les explications montrent comment réaliser ce poster de qualité simplement et facilement... http://psd.tutsplus.com/tutorials/photo-effects-tutorials/remove-giraffe-spots-photoshop/ Sculpteo : imprimez en 3D facilementLa société propose d'imprimer en 3D à partir de vos fichiers 3D ou en partant d'une base disponible dans leur catalogue de produits. La qualité des travaux réalisés ainsi que de la boutique annonce clairement la couleur : on est ici sur du très haut niveau !http://www.sculpteo.com/fr/ Printstagram : imprimez vos photos Instagram sous forme de livres, polaroids, posters, ...Le site propose d'imprimer les photos de votre compte Instagram sous différentes déclinaisons comme le poster, le livret photo, de calendriers, de mini-livres, ... Commandez directement en ligne en vous connectant sur votre compte Instagram et suivez le guide. C'est Fresh et Design, j'adore !http://printstagr.am/ Créez facilement des graphiques en html avec Chart.jsChart.js est un plugin à rajouter à vos pages HTML pour mettre en place des graphiques et diagrammes simplement par des lignes de code. La document est vraiment bien faite et permet de monter un graphique très rapidement. Pour l'avoir testé, c'est vraiment simple !http://www.chartjs.org/   Bon, j'èspère que ce premier numéro (d'une longue série) vous convient ! :) Bon surf !... Sun, 02 Jun 2013 19:44:07 GMT Jacques Danilo http://www.pixelcrea.com/blog/wordpress-anniversaire/ http://www.pixelcrea.com/blog/wordpress-anniversaire/ Si il y a bien un terme mondialement connu dans le jargon des site de gestion de contenu (CMS en anglais) c'est bien WordPress. Créé en 2003, ce système de type blog a rapidement su s'intégrer face au concurrent de l'époque : DotClear. Et nous y voilà, 10 ans plus tard, avec un CMS qui est resté toujours identique à lui-même : sobre, simple, intuitif... Les avantages sont nombreux ! Alors bon anniversaire à toi petit CMS qui est devenu grand, très grand, voir incontournable dans la réalisation de blog en ligne. Le projet a vu le jour le 27 mai 2003 par les fondateurs Matt Mullenweg et Mike Little. En très peu de temps, la communauté web l'a intégré, ventant les mérites de WordPress et de sa maniabilité. Il a été utilisé pour du blog dans un premier temps mais l'aisance avec laquelle le code peut être modifié, il est aujourd'hui utilisé pour de la création de sites Internet complexes, voir de sites marchands avec des extensions... Il est aujourd'hui le leader dans la création de site et compte aujourd'hui plus de 66 millions de sites web à travers le monde. Une grande majorité des sites internet sous WordPress est en anglais, les sites français ne correspondent qu'à peine 1,4% de la masse mondiale pour le CMS. En france, le site de Presse-Citron d'Eric Dupin est géré entièrement par exemple, site qui enregistre énormément de visiteurs par mois. Le site de Loic Lemeur l'est également. Sur le plan international, WordPress est intégrée dans des solutions importantes comme le site CNN ou TechCrunch. Je ne l'utilise pas souvent, étant assez réticent aux CMS d'ordre général pour de nombreuses raisons (que je n'évoquerais pas ici...). Cependant j'apprécie réellement ce CMS par la simplicité d'installation et d'utilisation au quotidien, surtout avec les smartphones et tablettes... Souhaitons donc un joyeux anniversaire au meilleur CMS de tous les temps : WordPress... Fri, 31 May 2013 19:03:15 GMT Jacques Danilo http://www.pixelcrea.com/blog/wunderlist-pro/ http://www.pixelcrea.com/blog/wunderlist-pro/ Wunderlist est une application multi-support permettant de gérer ses choses à faire (une ToDo-liste) - une sorte de liste de course améliorée. Tout l'intéret de cette solution réside dans le fait de pouvoir l'utiliser sous forme d'application sur iPad, iPhone, PC et Mac et de synchroniser directement le tout. Personnellement, je l'utilise depuis presque 2 ans de manière assez intensive. C'est pratique, rapide, et surtout gratuit. Quand je suis en déplacements professionnels, j'utilise Wunderlist sur mon iPhone pour mettre par écrit mes idées ou des choses à faire que je reprends ensuite sur mon portable ou sur mon fixe une fois rentré de déplacements. Mais parlons de cette nouvelle version : Wunderlist Pro vient d'arriver en application payante par abonnement par mois. Le prix annoncé au démarrage est de 5$ par mois. Les nouveautés sont nombreuses mais sont réellement utiles en entreprise lorsque plusieurs collaborateurs travaillent ensemble. La première des nouveautés permet d'assigner une tâche à une autre personne utilisant l'application (autre compte) et d'en suivre l'évolution. La collaboration se fait alors parfaitement car une nouvelle tâche arrive sur l'écran du collaborateur assigné. Dans les autres nouveautés payantes on retrouve l'intégration de facebook pour les tâches à réaliser et le centre d'activités et de notifications, l'accès rapide vers les choses à faire. Une barre d'actions permet également d'optimiser son application en triant les tâches à faire par ordre alphabétique ou d'en imprimer une version par exemple... A mon avis cette version payante est effectivement pratique, mais uniquement dans le cadre d'un travail collaboratif entre plusieurs comptes, en entreprise ou à l'école par exemple. Cependant en freelance cette version payante n'offre que peu d'intérets. Heureusement que la version payante continue d'exister.... Thu, 23 May 2013 14:05:44 GMT Jacques Danilo http://www.pixelcrea.com/blog/lancement/ http://www.pixelcrea.com/blog/lancement/ Je démarre aujourd'hui un nouveau blog, un blog intégré au site actuel de mon activité professionnel. J'avais lancé en même temps que mon activité il y a 7 ans un blog du nom de MisterDanilo, mixant étroitement ma profession d'indépendant, mes loisirs, et la culture web et graphique. Le blog avait été dévellopé à la main et pose aujourd'hui des problèmes d'un point de vue référencement (les règles ont changées en 7 ans). De plus, son administration reste assez compliquée... Ma stratégie à l'époque était de dissocier mon activité pro et ce "journal intime" sur lequel étaient regroupés différents coups de gueule. Aujourd'hui ma stratégie a changée et c'est pourquoi, avec regret, le blog MisterDanilo ne sera plus alimenté. Par contre, la bonne nouvelle est que cela continue, et ça continue ici-même, directement sur ce site pro. Une nouvelle histoire commence ici, mais je ne ferme pas MisterDanilo pour autant. Il possède encore aujourd'hui un bon référencement et enregistre plus de 400 visites uniques par jour. Je ne voudrai pas priver les internautes d'un tel contenu ;) héhé ! Toujours est-il que MisterDanilo se transfère alors ici, avec la même ligne éditoriale. Ce blog, nommé Blog du Graphiste Freelance, en comparaison à ma newsletter "la Newsletter du Freelance" que je vous invite à suivre également. Je parlerai ici des nouveautés autour du graphisme, de l'actualité de mon activité de graphiste freelance ainsi que quelques articles de fond sur différents thèmes. Ce blog suivra donc l'actualité du métier. Je ne garantie pas un article toute les semaines, mais j'essayerai de produire au mieux un contenu riche et varié pour vous, graphistes, webdesigners, clients, prospects, ou simplement curieux. Alors bienvenue, bienvenue à tous sur ce nouveau blog. Une page se tourne, mais l'histoire continue. Bonne lecture :)... Tue, 14 May 2013 01:03:35 GMT Jacques Danilo