dimanche 27 octobre 2013

Super Mario en HTML5

Si vous n'avez pas de temps à perdre, tant pis pour vous. Car si vous cliquez sur ce lien, vous serez (re)plongé dans le fantastique Super Mario Bros réalisé en 1985 par Nintendo, dans une version HTML5 entièrement illégale (droits d'auteur oblige) mais totalement géniale. Jouable au clavier dans le navigateur, Full Screen Mario propose comme son nom l'indique une version plein écran de Mario, qui reprend fidèlement les niveaux, le graphisme et le gameplay de l'original, grâce aux ressources publiées par TheMushRoomKingdom. 
Le jeu s'adapte automatiquement à la taille de l'écran, et devrait logiquement fonctionner sur tous les navigateurs modernes, quel que soit l'OS utilisé. Cerises sur le gâteau, Full Screen Mario propose aussi un éditeur de niveau, un sélecteur de niveau, et son code source est disponible sur GitHub.
Ne reste plus qu'à organiser des concours pour voir qui terminera le jeu le plus vite.
Publié par à Aucun commentaire:

samedi 26 octobre 2013

The main element


Recently, <main> was formally added to the W3C HTML specification. Now that the dust has settled, it’s about time we dive in to find out where and when it’s appropriate to use <main>. Let’s get started.

History

The inclusion of a main element (or similar) has long been debated in the working groups with authors and others often questioning why we had new elements such as <header>, <article>, and <footer> but no element to accurately describe the primary content of a page.
Steve Faulkner, an accessibility consultant and new doctor in residence, undertook the hard graft of carrying out research, gathering data and use cases, and speaking to implementers to get them interested. As Steve explains, he talked to:
as many implementers (both general browser implementers and accessibility implementers), developers, authors and users as I could and got advice and input from them. I went where the various people hung out; on IRC, mailing lists, twitter, blogs, conferences — anywhere.
Steve Faulkner
This led to his writing an extension specification for <main> and a thorough use case rationale.
The proposal was accepted in November 2012, and <main> was then rolled into the HTML5.1 specification. Recently, it was added to the HTML5 specification following no objections. Lets have a look at how the spec describes <main>.

W3C Specification

The primary purpose of <main> is to map ARIA’s landmark role main to an element in HTML. This will help screen readers and other assistive technologies understand where the main content begins. The W3C spec describes <main> as representing:
The main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.
W3C HTML Editors Draft
Since the <main> element is now included in the HTML specification, the <body> element has reverted to its HTML4 definition:
The body element represents the content of the document.
W3C HTML Editors Draft

More Details

One important facet of <main> is that it can only be used once per page. Jeremy Keith wrote to the working group to understand why this is the case (rather than allowing multiple <main>s). Although I won’t go into detail, the discussion is an interesting read.
As per the spec, the W3C validator throws an error if you attempt to use multiple <main> elements per document.
Another stipulation of <main> is that it can’t be used as a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.
Because <main> isn’t sectioning content, it doesn’t affect the document outline in the same way <article>, <nav>, or <section> do.

Getting Going

Just as with the introduction of many other new HTML5 elements, not all browsers recognise <main> or have preset styles for it. You’ll need to ensure it displays as a block level element in your CSS:

main {display:block;}
For the time being, you'll also need to use JavaScript to create the element for older versions of IE:

<script>document.createElement('main');</script>
Of course, if you use the html5shiv, <main> is now baked in directly.

Implementing <main> on HTML5 Doctor

The easiest way to implement <main> is to replace that <div> that you've likely got with an id or class of something like main or content.
So what does that look like in practice? Well, here's our pre-<main> markup on HTML5 Doctor:
<body>
<header role="banner">
[...]</header>
<div id="content" class="group" role="main">
[...]</div>
<footer role="contentinfo">
    [...]</footer>
</body>
And here's what it's like now:
<body>
<header role="banner">
[...]</header>
<main id="content" class="group" role="main">
[...]</main>
<footer role="contentinfo">
    [...]</footer>
</body>
Yes, it's really that simple. With any luck, it'll take you less than five minutes to implement.

The WHATWG Version

The WHATWG definition of <main> differs from the W3C version in that the element has no meaning. It's merely a styling hook (like a <div> with a new name) and represents its children.
The main element can be used as a container for the dominant contents of another element. It represents its children.
We recommend using the W3C version of <main> as described above.

Browser Support

Firefox 21, Chrome 26, and a WebKit r140374 have all implemented basic support for <main>.
They have all mapped the ARIA role="main" to the <main> element so assistive technologies can now recognise the <main> element without issue.
Publié par à 1 commentaire:

Specking, le plug-in de mesures sous Photoshop

Avoir un PSD propre, clair, bien rangé et surtout prêt à être intégré. Un rêve de développeur front-end, plus que réalisable si il travaille avec un bon webdesigner. Pour caresser votre dev’ dans le sens du poil et lui faire gagner du temps, découvrez Specking.

Specking, mesures et spécifications de conception

Grâce au plug-in Specking, vous allez pouvoir préparer au mieux votre PSD pour l’intégration pixel-perfect, en ajoutant facilement et rapidement des annotations sur vos éléments.
En tant qu’intégrateur, vous savez comme il est long et fastidieux de mesurer des marges, des largeurs de blocs et de chercher des propriétés de polices dans un PSD. Les outils additionnels du plug-in peuvent vous faciliter la vie : un fichier bien annoté, vous donnera l’assurance que votre design sera bien intégré selon les spécifications. Concrètement le plug-in se décompose en 3 panneaux :
Specking pannels

Les principales fonctions du plug-in :

  • Créer des mesures et des spécifications de conception en un seul clic
  • Mesurer n’importe quelle taille (largeur / hauteur), les marges et les propriétés typographiques de votre maquette.
  • Fonctionne sur n’importe quel fichier PSD et même des fichiers aplatis.
  • Générè toutes les spécifications en superpositions sur des calques modifiables et personnalisables.

Mesurer les tailles des blocs (largeur / hauteur) :

Sélectionnez un calque dans votre PSD, cliquez sur le bouton rouge et vous obtiendrez la taille de l’élément. Comme le montre la capture ci-dessous, Specking vous offre la possibilité de choisir l’emplacement des annotations (à gauche, au dessus, au centre…).
Specking

Mesurer les distances (margin / padding) :

Specking padding

Spécification typographiques :

Vraiment pratique pour le CSS ! Les données générées sont placées sur un simple calque de texte. Le copier/coller direct dans votre fichier CSS est donc possible.
Specking

En pratique, ça donne quoi ?

En y jetant rapidement un œil, le plug-in peut paraître long et fastidieux à utiliser. Il ajoute une étape supplémentaire lors de la finalisation du design. C’est un petit mal nécessaire car au final Specking est simple d’utilisation et représente un gain de temps conséquent pour l’intégration.
Je vous conseille vraiment de tester pour vous faire votre propre impression. Specking est disponible en téléchargement par ici au prix de 19$.

Pourquoi prendre des mesures en 2013 à l’ère du Responsive Design ?

C’est une question légitime que je me pose. En effet, un design fluide ne possède pas de bloc de taille fixée, donc l’annotation devient inutile ! Oui et non, car ici nous parlons de Photoshop, qui ne gère que « des maquettes fixes », ce qui est totalement différent de la création d’un design à l’aide d’outils comme Macaw ou Edge Reflow.
Publié par à Aucun commentaire:

vendredi 25 octobre 2013

10 raisons de préférer HTML5 pour créer votre présentation en ligne


Bien que le débat sur les avantages d’utiliser HTML5 ait déjà été soulevé maintes fois, il mène encore à polémique. Voici donc 10 bonnes raisons de créer votre présentation en ligne en version HTML5.
Note : cet article est un guest-post, écrit par RoK.

1. Un affichage simplifié

Pour visualiser votre animation en version HTML5, vous n’avez pas besoin de télécharger de programmes supplémentaires. Ce qui facilite le travail d’affichage en comparaison avec une présentation Flash qui nécessite souvent une mise à jour du logiciel.

2. Accessible à tous

Des systèmes générant des présentations en version HTML5 rendent cette technologie d’autant plus simple. Il n’est donc pas obligatoire d’être un “as” du codage pour réaliser votre contenu en HTML5.
Beaucoup de plateformes sont émergentes sur le marché et apportent des fonctionnalités étendues en termes de webdesign et d’animation. Un mariage parfait entre Powerpoint et Flash !
Voici quelques exemples: Canvas, Prezi et EWC Presenter. De nombreux acteurs offrent une version gratuite vous permettant ainsi de tester l’outil.
HTML5

3. Facile à sauvegarder

En créant votre présentation en version HTML5, vous avez la possibilité de la sauvegarder en ligne sur un serveur, ce qui évite toute perte de fichier et vous permet de la consulter de n’importe quel endroit. Il vous suffit pour cela d’avoir une connexion internet ! Vous pouvez également télécharger votre version originale en mode déconnecté souvent au format Jpeg ou Pdf.

4. Adapté à tous les Browsers

Tous les navigateurs récents du marché permettent de bénéficier totalement d’HTML5.
Navigateurs récents

5. Stratégie mobile

La technologie HTML5 est supportée par la majorité des systèmes d’exploitation mobiles. Contrairement à Flash qui par exemple se voit privé des utilisateurs d’Iphone et d’Ipad étant donné qu’Apple ne supporte pas cette technologie.
Toutefois, ce n’est pas seulement pour les iPhones, mais pour la quasi-totalité des smartphones qu’ HTML5 est supporté. Une étude du Walkers Sand center montre l’évolution du trafic web mobile en 2013 (Source : walkersandsdigital.com) :
Mobile Traffic
Il est donc important de ne pas négliger le langage que vous allez utiliser pour réaliser votre présentation online surtout si vous souhaitez la partager et l’ afficher sur des supports mobiles. Par exemple, les sites développés en HTML5 peuvent fonctionner aussi bien sur votre navigateur Web de PC que sur celui de votre terminal mobile sans développement spécifique.

6. Diffuser votre présentation en 3 clics

Lorsque vous enregistrez votre présentation via une plateforme, vous avez la possibilité de générer un code HTML. Un simple copier/coller du code suffit alors pour publier votre présentation sur des sites Web, blogs et autres.
En outre, il n’est pas nécessaire d’occuper le serveur du client parce que la présentation elle-même est déjà stockée sur un serveur à distance, tout comme les vidéos YouTube le sont lorsqu’elles sont incorporées sur un site Web.

7. Partager votre contenu online facilement

Étant donné que votre contenu est déjà enregistré sur internet via un serveur, il est d’autant plus facile de le partager. Vous pouvez ainsi envoyer votre présentation via email ou messenger, vous avez juste besoin d insérer le lien du “slideshow”.
Ne perdez plus de temps à attendre que votre présentation soit téléchargée. Les logiciels de présentation HTML5 permettent également de partager votre travail via les grands réseaux sociaux tels que Facebook, Twitter etc. en un clic seulement.

8. Augmenter la visibilité de votre présentation pour les moteurs de recherches.

Si vous souhaitez partager votre travail, vous devez bien entendu attirer l’attention des visiteurs mais aussi des moteurs de recherches! Malheureusement, le référencement pour les présentations Flash est limité. Google, Yahoo et les autres moteurs de recherches ne lisent pas Flash, ce qui se traduit souvent par un gros trou noir sur la toile !
Tandis que ces mêmes moteurs de recherche sont capables de reconnaître n’importe quel code HTML dont évidemment HTML5. Ainsi, votre travail ne passera pas inaperçu. De plus, l’ajout de nouvelles balises sémantiques rend le Web ‘5’ plus intelligent. La structuration des contenus est ainsi plus lisible pour les moteurs de recherches.

9. Format non propriétaire

HTML5 est un format «libre» qui peut être intégré par l’ensemble des éditeurs et des fabricants librement dans leurs logiciels et matériels.

10. Multimédia

HTML5 gère de façon native les vidéos et les fichiers sons MP3. Par exemple, il vous est donc possible d’insérer facilement une vidéo (Youtube, Vimeo etc.) sur votre présentation et de la visualiser sur votre téléphone, tablette, PC, etc.
ll est donc important de suivre les nouvelles tendances et de choisir la technologie la plus adaptée à votre travail. Tout dépend évidemment de la façon dont vous souhaitez utiliser votre présentation.
Publié par à Aucun commentaire:

Technologies HTML 5 et WebGL

Les technologies HTML 5 et WebGL, remplissent bien leur rôle « d’accélérateurs » du web, en donnant la possibilité aux agences et aux talentueux développeurs de créer des expériences inédites.

Des sites riches, interactifs et inédits

Ne pas laisser l’utilisateur passif, tel peut-être le mot d’ordre des sites interactifs basés sur les nouvelles technologies du web. Par simple envie d’exploration technologique ou pour un but réellement marketing, les capacités des langages web modernes permettent de mettre au jour des sites inédits.
Le mot HTML5 reste un raccourci pour désigner toutes les technologies rattachées comme Three.js, WebGL, Javascript, etc. Depuis plusieurs semaines, je sélectionne les sites qui m’en mettent littéralement plein la vue, tout ça pour les partager avec vous.
Comme vous allez pouvoir le découvrir, il y a beaucoup de 3D dans cette sélection, comme dans cet ancien article. Les navigateurs modernes contribuent au support grandissant de la 3D, pour le plus grand plaisir de nos yeux. Je vous laisse découvrir ces quelques sites, pour ensuite vous donner quelques ressources, si vous vous sentez prêt à expérimenter.

Say Viget

Un mini-jeu de plate-forme pour apprendre à prononcer le nom de l’agence Viget. Une réalisation fluide et propre qui a d’ailleurs remporté un Awwwards.
Expérience HTML5

Mission Rosapark

Développé par l’agence parisienne Rosapark, le jeu sert de plate forme de recrutement. Le but du jeu : mettre les candidats au défi en subtilisant les budgets des autres agences comme Publicis ou BETC. Durant l’opération, chaque mois, l’agence a reçu les personnes avec les meilleurs scores.
Un concept intéressant pour se passer des CV papiers.
Experience HTML 5

Cube Slam

Une expérience Google Chrome, sous la forme d’un pong en 3D. Jouez contre un ours ou un ami avec webcam dans un univers polygonal et coloré.
Pour satisfaire votre âme de geek, un site dédié détaille les technologies utilisées.
Experience HTML5

Pearl Boy

Pearl Boy est une expérience basée sur Gooengine. La démo est constituée d’un univers en 3D, avec lumières, sons et interactions. Le tout avec un chargement rapide, c’est assez impressionnant ! Je vous laisse juger par vous-même :
Experience HTML 5

Hello Run

Un jeu carrément sympathique dans un univers 3D futuriste. Passez les portes et tentez d’aller le plus loin possible.

Hello RUN

Danger Dirt

Un jeu 3D dans une arène. Armé de votre fusils, anéantissez les différentes vagues d’ennemis qui cherchent à vous nuire. L’univers simpliste est basé sur de grossiers polygones, mais l’interactivité et le fun sont au rendez-vous.
Experiences HTML5

Urban Galaxy Online

Un MMORPG basé sur WebGL : voici ce qui résume Urban Galaxy Online. Le jeu se déroule sur Anassin, capitale du domaine appelé « Solar Empire double« , située sur la planète Cotricon.
Pour l’instant en version pre-alpha, l’expérience vaut le détour.

HTML 5

MapDive

Comme son nom l’indique, il s’agit d’une expérience basée sur Google Maps. Contrôlez PegMan, le célèbre personnage de Street View, dans une chute libre vers un objectif précis.
Plus d’informations sur la technologie sur ce site dédié.
HTML5 Expérience

Epic Citadel

Une expérience inédite basée sur le moteur de jeux Unreal. Sûrement la démo la plus poussée de cette sélection, je n’ai pas les mots pour décrire le site, essayez, vous verrez !

They Will Eat You

Un univers 3D sombre, des sons étranges et des zombies ! Fuyez pauvres fous ! They will eat you…

Experience HTML5

Morph Target

Jouez avec les paramètres pour créer un morphing de visage. Déplacez votre souris et le modèle suit votre trajectoire.
Experience HTML5

The Cathedral

La cathédrale de Lyon, rendue en 3D. Utilisez la souris ou votre clavier pour commencer une petite balade dans ce lieu sacré.

The Cathedral

Face Tron

Une expérience 3D « basique » de contrôle de véhicule.
Face Tron

Banana Bread

Sorti il y a plus d’un an, vous devez probablement connaître Banana Bread. Pour faire simple, c’est tout simplement du lourd, du très lourd : un jeu en FPS multiplayer en 3D basé sur du Javascript et Web GL. À tester ab-so-lu-ment !
Experiences HTML5

Zen Photon Garden

Tracez des lignes pour jouer avec la lumière. Une réalisation originale à tester.
Experience HTML5

Ressources :

Pour vous lancer dans la création d’expériences digitales du genre, je vous propose quelques liens vers les différents outils :
Publié par à Aucun commentaire:

20 CV créatifs pour votre inspiration

Dans le domaine du web et du graphisme, un CV original et soigné est une des bases minimale à maitriser pour décrocher le job de vos rêves. Pour vos donner vos idées, voici quelques exemples de CV réussis.

Quelques conseils avant de commencer…

Avant tout, soyez vous-même. Inutile d’en faire trop en surchargeant le CV avec du contenu sans intérêt ou de sur-enchérir sur vos compétences. Il doit donner tous les renseignements sur vous à votre recruteur en un clic d’œil : quel est votre spécialité ? Quel est l’outil que vous maitrisez le plus ? Quelles sont vos qualités ? Autant de points à mettre en avant de manière claire et lisible.
Surtout soyez original ! Pas forcément sur la structure qui elle reste en général standard (compétences, formation, expérience…) mais plus sur la forme. Si vous souhaitez y consacrer un petit budget, un impression professionnelle sera du meilleur effet. Cette sélection comporte dans CV francophone mais également étranger ayant une structure et des normes différentes mais toujours avec de superbes idées originales. Pour plus d’infos sur la bonne réalisation d’un CV, je vous renvoi à l’article ancien mais toujours efficace du JDN.

Quelques exemples :

CV Inspiration
CV inspiratio
cv-inspiration-3
cv-inspiration-4

cv-inspiration-4
cv-inspiration-6
cv-inspiration-7
Cv Inspiration
cv-inspiration-9
CV Inspiration
cv-inspiration
cv-inspiration-12
cv-inspiration
cv-inspiration-14
cv-inspiration-15
Publié par à Aucun commentaire:

The Fluid Baseline Grid System

The FBG system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework. It is packed with CSS normalization, beautiful typographic standards, corrected bugs, common browser inconsistencies and improved usability. You can finally have your cake and eat it too, all while making awesome websites.

Fluid Columns

The FBG system facilitates creativity by providing a framework for composition. Grid systems create visual rhythm and structural balance to enhance the experience with predictable patterns.
FBG is defaulted to a minimal 3-column folding grid, which is easy to work with and divided into equal portions, 31.333% wide with 2% wide gutters between columns. This is a starting point, not a standard, so we encourage you to change the columns as your project requires.

Baseline Grid

The typography of FBG is designed to establish a typographic hierarchy that improves readability and creates harmony within the text. Measure, leading, vertical rhythm, emphasis and scale are something we obsess about.
The primary font is Georgia, but the font stack can be easily changed. Paragraphs are set at a 16px base with 150% (24px) line height to improve readability and improve the appearance of text. We encourage you to change the base font size and line height to suit your needs.

Responsive Design

The FBG is designed for mobile first. CSS styles are scaled up from the minimum instead of scaled down from the maximum through the use of media queries. IE6/7/8 do not support media queries, so Respond.js is used to polyfill.

Common Break Points

  • 320 px — Mobile portrait
  • 480 px — Mobile landscape
  • 600 px — Small tablet
  • 768 px — Tablet portrait
  • 1024 px — Tablet landscape/Netbook
  • 1280 px & greater — Desktop

Normalize CSS

Reset vs. Normalize? Most web designers use either the Eric Meyer Reset or the YUI Reset, but a reset doesn't fix cross-browser inconsistencies or preserve useful defaults. Normalizing CSS allows for the preservation of useful defaults, while correcting bugs, fixing common browser inconsistencies and improving usability. Many thanks to Nicolas Gallagher and Jonathan Neal for researching the differences between default browser styles in order to precisely target only the styles that need normalizing.
Publié par à Aucun commentaire:

Useful Responsive CSS Grid Frameworks


Before responsive design came into the scene, companies created multiple versions of their websites for mobile users. Creating and maintaining a different website for each device is not practical and this is when responsive design approach saves the day.

Why to use a Responsive CSS Framework?

Every web developer at some point has created a set of base CSS files to be reused for multiple projects. Web design standards and browsers are constantly evolving and maintaining a custom framework becomes a task in itself.
CSS Frameworks offer a great starting point without having to re-invent the wheel. Being available for the general consumer, these are constantly updated and follow best practices. These frameworks would not only provide a default set of rules for your content display but would also make the content responsive based on screen size.

How to select a framework

If not more, then there might be at least a hundred different responsive CSS frameworks available. The general way in which most of these frameworks work is the same, however each one follows a different set of naming convention, file structure and rules. Understanding them is the key to successfully choosing and using them.
Before you pick a framework for your project, I would strongly recommend testing them for dummy projects as changing the frameworks for a completed website would be time consuming. Some of simple enough to understand and use within few minutes, but some like Twitter Bootstrap would take more time to learn.
There is no hard and fast rule to select the best framework at the end it would come down to which Responsive CSS framework you are most comfortable with. Every framework would have its pros and cons and 1 framework might not be the best solution for every single project.

Few things you can consider while selecting a frame are:

1. Learning Curve
The most important aspect in choosing a Responsive CSS framework would be to find the one you are comfortable with. A basic framework would be the fastest to learn and use but lack of features would mean additional work for larger websites.
2. Features & Performance
More features in a framework might affect its performance. A typical website might not require every single feature a framework offers. Hence it would be best to use different framework based on the requirements of each website.
3. Backward Compatibility
Framework is used to save time. Hence having a framework that is compatible on older browsers makes development even easier.
4. Customization
As mentioned in the above point, lot of features would affect performance. Hence being able to choose only certain components of a framework gives us more control. Twitter Bootstrap is one of the most feature rich CSS Frameworks available today but also offers a great customization option to be able to choose only required features.
5. Support & Maintenance
Another important aspect to consider would be how well a framework is maintained. As many frameworks are created by web developers on their own, if for any reason, they get busy or lose interest, you might have to continue improving the framework yourself or switch to another. This is no doubt true for every free product out there, but nonetheless is an important aspect to consider.
6. Online Community & Resources
Finally, to be able to make the maximum use of your chosen framework, the community and available resources for the framework would be crucial. E.g. for Twitter Bootstrap, you would many articles on how to use it as well as web based tools and ready made website templates.
In this article, my aim is to not cover all of the Responsive CSS frameworks out there, but only a few.
Publié par à Aucun commentaire:

Marketing



L’essentiel d’un plan marketing
  1. Avant de commencer
    • Si vous avez un produit, commencez par chercher sa cible.
    • Etudiez vos concurrents, où sont-ils présents, quels sont leur liens, leurs mots-clés.
    • Rédigez le contenu de votre site, avant de faire le design.
    • Préparez le plan de navigation de votre site avec les rubriques.
  2. Référencement et optimisation du site
    • Faites un site professionnel, attractif, que le visiteur se plait à parcourir.
    • Choisissez bien vos mots-clés et phrases pour vos produits ou services
    • Créez des META TAGS pour aider votre site à atteindre les premières places des moteurs
  3. Comment garder vos visiteurs
    • Offrez quelque chose à vos visiteurs afin de récupérer leur adresse e-mail.
    • Une explication de votre produit, un cadeau, un ebook.
  4. Concluez vos ventes ou inscriptions par e-mail
    • Expliquez largement votre produit ou service, donnez un maximum d’informations
    • Créez une liste de prospects à l’aide de l’autorespondeur.
    • Faites que votre site soit captivant
Publié par à Aucun commentaire:

Astuces et optimisation Google AdSense

Google est de très loin leader du marché des moteurs de recherche avec presque 90% de part de marché en France. Google dispose donc d’un espace publicitaire réservé aux liens sponsorisés extrêmement vaste.
Créer puis optimiser une campagne adsense vous permettra de générer des revenus grâce à vos visiteur et de gagner plus d’argent grâce à son site que dans l’immense majorité des programmes d’affiliation ! En effet Google en plus de bénéficier d’un nombre très important d’annonceur potentiel, dispose d’outils efficaces pour piloter et optimiser les campagnes de publicite. Et mieux incite fortement les annonceur Adwords à publier leurs annonces sur le réseau Adsense. Leur secret ? l’affichage sur le réseau Adsense est activé par défaut, lorsque l’on crée un campagne adwords de liens sponsorisés.
  • Astuces Google adsense : Les différentes sources de revenus
  • Astuces Google adsense : Identifier les opportunités d’optimisation
  • Astuces Google adsense : Les outils adsense
  • Astuces Google adsense : Le groupement d’annonce
  • Astuces Google adsense : Les enchères
  • Astuces Google adsense : Le suivi des conversions
  • Astuces Google adsense : Le ciblage
  • Astuces Google adsense : Le groupement d’annonce
  • Astuces Google adsense : Astuces pour des campagnes de liens sponsorisés réussies.
  • Astuces Google Adsense : Optimiser le contenu de ses pages
  • Astuces Google Adsense : Choix de la thématique
  • Cas pratique : Google Adsense sur un Forum
  • Cas pratique n°2 : le cas du Google Adsense sur un Blog (wordpress, dotclear)
Publié par à Aucun commentaire:

jeudi 24 octobre 2013

20 Astuces Adsense

  • Revenus AdSense = Impressions x Taux de clics x Facteur de tarification intelligente (Smart Pricing).
  • Le nombre d’impressions se base directement sur votre achalandage. Il indique le nombre de fois où le bloc AdSense est affiché.
  • Le CTR (Click-Through-Rate) est le ratio de clics par impressions. Il peut se situer dans l’intervalle de 0.1% et 30% mais se situe généralement entre 1% et 1o%.
  • LE CPC (Cost-Per-Click) est le revenu que vous avez par clic. En français il se nomme le coût par clic.
  • Le facteur de tarification intelligente (Smart Pricing) est une méthode d’AdSense utilisée pour déterminer la valeur des clics sur les publicités de votre site. Si les clics de votre site ne semblent pas être d’une valeur acceptable pour les annonceurs, vous ne recevrez qu’un certain pourcentage du CPC. Par exemple, une publicité destinée à une clientèle Européenne qui s’affiche sur des sites au contenu ciblé pour les Nord-Américains a moins de valeur et sera rémunérée en conséquence de l’audience moins ciblée.
  • Appliquez pour l’ouverture d’un compte AdSense via blogger.com et vous réduirez les délais d’acceptation au programme.
  • Une fois que vous aurez reçu votre numéro d’identification d’annonceur (Publisher Code), vous pourrezl’utiliser sur autant de sites que vous le souhaitez sans avoir besoin d’approbation de la part de Google.
  • Lisez et Relisez les politiques du programme AdSense et les termes et conditions afin d’éviter d’en enfreindre les règles.
  • Ne cliquez pas sur vos propres publicités et ne demandez à personne de le faire et ce, même si vous utilisez un proxy.
  • N’utilisez pas de robots-cliqueurs (click-bots) sur vos publicités AdSense.
  • N’encouragez pas vos visiteurs à cliquer sur les annonces. Les seules nomenclatures acceptables pour les publicités sont “Liens sponsorisés” et “Annonces”.
  • N’insérez pas de publicités contextuelles de compétiteurs d’AdSense dans la même page. Exemple: Yahoo Publisher Network et Clicksor. Les annonces non ciblées en fonction du contenu ne posent pas de problème.
  • Ne mettez pas de publicités sur des sites à caractère questionnable tels que les sites pour adultes, de paris, mp3 etc.
  • Sommairement, ne trichez pas avec AdSense. Google vous repèrera un jour ou l’autre.
  • Consulter votre site de temps en temps ne présente pas de risque pour vous d’être banni sauf si vous cliquez sur vos annonces.
  • Par contre, recharger vos pages sans cesse pour augmenter votre nombre d’impressions peut vous faire bannir du programme AdSense.
  • Quand vous avez des doutes sur l’utilisation des publicités, n’hésitez pas à contacter l’équipe du programme AdSense. Ça vous évitera bien des problèmes.
  • Choisissez des sujets rémunérateurs qui n’ont pas trop de compétition.
  • Vous pouvez utiliser des mots clés plus payants dans vos pages en consultant la liste de cwire.com, mais sachez que vous ferez face à de la compétition très féroce!
  • Utilisez l’outil d’enchère d’Overture pour trouver des mots clés viables.
Publié par à Aucun commentaire:
Inscription à : Articles (Atom)