Agence de communication digital web AK Digital Avignon

AGENCE DE COMMUNICATION DIGITALE

AK DIGITAL = Créativité et passion

Nos prestations

  • Conseil stratégique

  • Audit de positionnement

  • Référencement SEO

  • Campagnes Facebook & Adword

  • Campagnes d’emailing pro

  • Community Management

  • Content Marketing

  • Créations graphiques

  • Boutiques en ligne

AGENCE de COMMUNICATION DIGITALE à AVIGNON

SPÉCIALISTE DU WEB MARKETING

Au sein de l’agence web AK Digital nous mettons à profit nos compétences et expériences variées et travaillons en équipe sur vos projets de communication digitale et print.

Cette émulation issue du partage incessant d’idées nous permet de vous proposer des solutions innovantes, réalistes et éprouvées !

Notre rôle d’experts en marketing online est d’être avant tout force de proposition. Pour ce faire, nous étudions votre entreprise et son environnement, vous proposons des solutions hiérarchisées selon vos priorités et vous conseillons dans l’utilisation de vos budgets consacrés au marketing et la communication.

« Indépendante par nature.  Brillamment collaborative. » 

  • site-internet-responsive-iphone-smartphone-telephone
  • creation de site internet responsive ipad tablette pc AK Digital

MOBILE FIRST !

Tablettes et smartphones

En 2016, la connectivité mobile a dépassé celle des ordinateurs pour la première fois.

L’agence AK Digital accorde une importance primordiale à l’adaptabilité de vos sites internet aux appareils mobiles (mobiles et tablettes).

Les nouveaux projets seront pensés MOBILE FIRST, c’est à dire avec un design graphique et une ergonomie privilégiant l’accessibilité et la navigation sur appareils mobiles.

Offrez à vos visiteurs une navigation intuitive et facile sur tout type d’écrans et de navigateurs.

Grâce à la connaissance des règles de l’UX design (le design d’interface) et une conception inspirée du design émotionnel, nous ferons de votre site internet ou application mobile, un lieu sympathique, une personne reconnaissable où encore une plateforme de confiance.

AK DIGITAL = Créativité et passion

Agence web à taille humaine, se voulant avant tout indépendante AK DIGITAL est spécialisée dans le marketing digital.   

  • Campagne webmarketing

  • Création de site internet responsive WordPress

  • Community management & campagne social media

  • SEO – Positionnement sur les moteurs de recherche

  • Audit de positionnement et étude marketing

  • Création de site e-commerce – Boutique en ligne

Depuis 2009, nous nous engageons à trouver des solutions innovantes et efficaces pour permettre à nos clients d’atteindre leur objectifs.

agence de communication digitale à Avignon
appli web agence de communication digitale à Avignon

ERGONOMIE ET ACCESSIBILITE

Un design réussi incitera vos visiteurs à découvrir les pages de votre site internet.

En web marketing, on parle de la règle des 3 clics, c’est à dire qu’un visiteur doit pouvoir accéder au contenu ou produit recherché en 3 clics maximum sur votre site.

En temps qu’agence de communication digitale, nous mettons en oeuvre toutes les techniques d’UI et UX design pour rendre votre site aisément navigable et atteindre un taux de conversion optimal !

Agence de communication digitale à Avignon

Un dernier petit mot sur notre approche du web

Les tendances de communication sur internet changent de jours en jours. Une veille perpétuelle est donc nécessaire pour appréhender les règles de l’immense jeu que représente le World Wide Web. Les entreprises et organisations que vous représentez ne peuvent se permettre de scruter cet espace d’échange d’informations à longueur de journée. Par chance pour elles, nous, nous le faisons. Et nous le faisons bien, car nous le faisons avant tout par passion.

Nos dernieres réalisations

Nos derniers articles

Créer une campagne Facebook efficace

Cet article est destiné à tous ceux qui souhaitent réussir leur campagne de communication sur le web et plus particulièrement au travers du premier réseau social mondial qu’est Facebook. Que vous soyez un(e) professionnel(le) du marketing digital, un(e) Bloggeur(se) ou un(e) Community Manager Freelance, nous espérons vous offrir, sinon la méthode infaillible, du moins une ligne directrice, quelques clés, pour vous aider à mettre sur pied une campagne Facebook efficace. Commençons sans plus attendre !

  1. Soignez votre image, soignez votre page Facebook !

    On ne le répétera jamais assez, le non verbal, c’est 55% de la communication. Et ce chiffre continue à croître avec la démocratisation des vidéos et autres gif viraux sur nos fils d’actualité !

    Nous n’allons pas vous apprendre à créer et remplir votre page professionnelle sur Facebook, mais plutôt vous aiguiller quant aux bonnes pratiques de l’outil « social media » afin de réussir votre campagne Facebook.

    1. Photos de profil

      Selon votre activité (artisanale, commerciale, libérale ou encore artistique) vous devrez choisir entre : utiliser vos propres photos (portrait) où utiliser votre logo et ses déclinaisons.

      Si vous choisissez d’utiliser une photo de vous : Votre photo doit vous ressembler et donner envie à votre interlocuteur de vous rencontrer. Privilégiez une photo portrait (de la tête aux épaules) récente, de qualité et en couleur. Choisissez une situation valorisante et dans un décor neutre. Bannissez l’autoportrait (ou « selfie »), actuellement très tendance et les photos de groupe. Utilisez toujours un photo de bonne qualité.

      Si vous optez pour l’utilisation de votre logo : Il doit contenir environ 80% de l’espace de la photo de profil. Laissez des marges entre le logo et le cadre de l’image afin de faire ressortir le centre. Privilégiez des images simples dans des coloris bi ou tri-chromatiques.

      Deux exemples de photos de profil Facebook, une avec un logo, l’autre avec une photo pro.

      Astuce !
      Une photo de profil doit être remplacée au moins  une fois par mois.
    2. Photos de couverture

      Une photo de couverture doit être, dans l’idéal, changée tous les 15 jours.

      A l’instar de votre photo de profil, votre photo de couverture sera visible par l’intégralité de l’internet mondial (sauf si vous choisissez de la rendre privée.)

      Du texte pourra y être ajouté, le plus souvent lorsque vous voudrez communiquer sur une offre commerciale ponctuelle ou une campagne publicitaire. Mais attention à ce qu’il ne gâche pas l’image !

      La photo de couverture de votre page Facebook est votre vitrine, un panneau publicitaire gratuit en quelque sorte. Utilisez la intelligemment.

      Voici un exemple de photo de couverture contenant du texte ne gâchant aucunement l’image :

    3. Personnaliser sa page

      Facebook vous offre la possibilité d’afficher ou de masquer les modules visibles par les visiteurs qui consultent votre page. Cette option est disponible dans Paramètres > Modifier la page (cf. captures d’écrans ci-dessous.) 

      Choisissez quels onglets (ou modules) devront être affichés en fonction de votre activité mais aussi des contenus originaux dont vous disposez. Par exemple, si vous n’avez aucune vidéo pertinente de votre organisation ou de vos produits, il sera préférable de cacher cet onglet pour l’instant. Ainsi le visiteur ne se verra pas proposer une page vide. N’oubliez jamais que l’internaute a horreur de perdre son temps. Atterrir sur une page vide l’agacera et lui fera rebrousser chemin.

      En conclusion de cette première partie : Soignez vos photos, vos visuels et autres infographies. Ne sous-estimez pas le pouvoir de l’image car le visiteur y est très sensible. Soyez critique envers vous même et gardez un œil sur ce que font vos homologues et concurrents. Renseignez un maximum d’informations sur votre organisation, vos produits et services. Privilégiez du contenu original, des phrases assez courtes, rédigées dans une syntaxe correcte et sans fautes d’orthographe.

  2. Créez des offres attractives

    Avoir une page bien construite, contenant des informations sur vos produits ou services, des photos et vidéos et vos coordonnées, ne suffit pas. Ce n’est en fait que la première partie du travail.
    Désormais vous allez devoir canaliser le maximum de visites vers votre page, et pour ce faire, créer une ou des offres pouvant susciter l’intérêt de votre cible.

    1. Promotion commerciale ponctuelle

      Nous ne nous étendrons pas ce sur type d’offres tarifaires utilisées depuis la nuit des temps, mais sachez qu’elles fonctionnent encore aujourd’hui, si tant est  qu’elles soient employées correctement. Effectivement, tout le monde est sensible à une réduction de prix substantielle et ponctuelle.

      Voici la liste des plus usitées :

      • Prix barrés

      • Pourcentage de réduction

      • Codes promo

      • Gratuité > 3 +1

    2. Organisation de concours ou tirages au sort

      Organiser des concours ou des tirages au sort est idéal pour générer un grand nombre de fans ayant un engagement fort. Vous offrez quelque chose d’une valeur suffisante pour la rendre désirable par tous. En choisissant un gagnant (ou groupe de gagnants) vous créez de la jalousie chez les perdants, mais entretenez leurs espoirs.

      Le champion dans le domaine est le vendeur de matériel informatique LDLC, qui organise des concours environ tous les 15 jours :

      jeux concour LDLC 21 ans Ak digital
      Évidemment, plus le montant du gain est important, plus vous obtiendrez d’engagements et d’actions.

    3. Organisation d’événements

      Une solution qui s’avère très efficace pour gagner des likes de bonne qualité.

      Nous pouvons d’ailleurs en parler en connaissance de cause puisque nous l’expérimentons pour notre client Coach Sportif 84 depuis plusieurs mois.

      Lorsque vous créez un événements Facebook, il est primordial de :

      • Bien remplir toutes les informations.
      • Géolocaliser l’événement, bien renseigner l’adresse, l’heure, le coût de l’entrée, et d’indiquer en lien la page Twitter ou Youtube s’il y en a une.
      • Ecrire un texte pertinent qui donnera envie aux futurs invités d’y assister.
      • Afficher une image attractive représentant l’événement : Affiche, photo d’une soirée, montage photo des artistes présents
      • Publier régulièrement sur la page de l’événement : photos, vidéos, sondages d’opinions, news de l’événements, programmes, météo, etc.

      Vous pouvez commencer, par exemple, par une petite dégustation gratuite, une conférence privée ou une visite de votre établissement.

      En résumé, la création d’un événement Facebook est parfaite lorsqu’on a du temps, un réseau déjà existant et peu de budget.

    4. Invitation à des webinaires (conférences en ligne)

      Le webinaire (où « Webinar » en anglais) est un des moyens les plus économiques pour toucher une population de prospects. Seulement pour que vos invités fassent le pas de se connecter à votre conférence en ligne, vous devez soit déjà posséder une réputation solide, soit avoir mené une grosse action de communication promotionnelle au préalable.

      Ensuite, pour qu’il soit efficace, votre webinaire doit apporter des informations et réponses utiles à l’auditoire. En d’autres termes, vous devez avoir un sujet intéressant, un argumentaire bien ficelé, vous exprimer convenablement, vous être préparé à répondre aux questions, etc. En somme, comme lors d’une conférence in vivo.

      L’intérêt de l’organisation d’un webinaire est multiple :

      • Économie de temps et d’argent : la logistique est simplifiée au maximum
      • Interactivité avec son auditoire : questions et réponse via un module de chat
      • Récolte de statistiques : de connexions et d’actions
      • Création de contenu: la vidéo peut être proposée en Replay sur Youtube
      • Générer une action directe : l’auditoire peut être invité à visiter un site ou télécharger un livre blanc (call-to-action)

      Source Agence Web 1min30

      Le Webinaire est un outil marketing récent et encore trop souvent mal utilisé. Nous vous déconseillons de vous lancer dans la réalisation d’un webinaire si vous n’êtes pas un professionnel de la communication, car un webinaire raté à un très fort impact négatif sur votre marque ou votre société.

    5. Le livre blanc

      Proposition de contenu informatif gratuit à haute valeur ajoutée

      Très à la mode depuis quelques années, le livre blanc représente une source d’information riche et gratuite. Il est généralement inclus dans une stratégie d’Inbound Marketing.

      La rédaction d’un livre blanc est un exercice délicat, au travers duquel on attise l’intérêt du lecteur, tout en s’abstenant d’employer un ton promotionnel. En partageant votre expérience, vous vous positionnez comme un spécialiste de votre domaine et gagnez en crédibilité. Vos prospects auront tendance à préférer travailler avec vous, puisque vous les aurez aidés à faire un choix « objectif » !

      Nous n’approfondirons pas d’avantage ce sujet  mais vous conseillons la lecture de cet article qui constitue une bonne première approche.

  3. Définissez la ligne éditoriale de votre campagne Facebook

    A partir de maintenant nous allons détailler la création d’une ligne éditoriale tout en suivant les différentes étapes proposées par le créateur de campagne de publicité Facebook. Vous pouvez, si vous le souhaitez, vous y connecter et vous essayer à la création d’une campagne pas à pas.

    1. Définissez vos objectifs

      Quel que soit votre canal de diffusion, la construction d’une ligne éditoriale solide jouera un rôle prédominant dans la réussite de votre campagne de communication. Une campagne Facebook ne déroge pas à la règle, et le soin que vous apporterez à la création de votre ligne éditoriale se répercutera directement sur vos résultats.

      Le terme « objectif » fait souvent penser à la vente et au marketing. Comme pour ces deux activités commerciales, votre campagne Facebook, devra viser l’atteinte d’objectifs concis (clairement et brièvement définis), chiffrés et limités dans le temps.

       La vision de Facebook

      Lors de la création d’une campagne publicitaire, Facebook vous propose de choisir entre trois grands ensembles :

      • Sensibilisation : il s’agit des objectifs qui suscitent un intérêt pour votre produit ou service.
        • Notoriété de la marque
        • Sensibilisation locale
        • Portée
      • Considération : il s’agit des objectifs qui incitent les gens à s’intéresser à votre entreprise et à rechercher des informations la concernant.
        • Trafic
        • Installations de l’application
        • Engagement
        • Vues de vidéos
        • Génération de prospects
      • Conversions : il s’agit des objectifs qui encouragent les personnes intéressées par votre entreprise à acheter ou utiliser votre produit ou service.
        • Conversions
        • Ventes sur le catalogue produits
        • Visites en magasin

      Source officielle Facebook

      Leur vision est assez simpliste et vous constaterez qu’il est parfois difficile de rentrer dans une de leurs cases.  Vous prendrez  toutefois rapidement l’habitude d’y trouver votre place.

      Je vous conseille néanmoins de fixer des objectifs personnels (ou d’équipe) variés, tels que : l’atteinte d’un nombre de « likes » sur une page où une publication, d’un nombre de personnes ayant répondu positivement à un événement, etc.

    2. Définissez votre cible (ou audience chez Facebook)

      La cible est la population que l’on souhaite toucher lors d’une action commerciale ou marketing. Elle peut être constituée de clients ou prospects, et divisée en plusieurs segments.

      Le « cœur de cible » correspond à la population qui est la plus particulièrement visée par un produit ou une campagne marketing et qui théoriquement doit fournir la plus grosse part du chiffre d’affaires ou pour laquelle les résultats d’une campagne doivent être les meilleurs.

      Facebook vous offre la possibilité de toucher directement votre cœur de cible, sans circonvolutions, grâce à un outil de ciblage très performant.
      Cet outil, le créateur de campagne Facebook, vous permet de cibler selon des critères de :

      • Zones géographiques
      • Ages (démographie)
      • Intérêts
      • Langues
      • Connexions (que votre cible a avec vos pages, applications et événements)

      Voici  à quoi ressemble le panneau de ciblage d’audience Facebook :


      Parfois il peut être intéressant de cibler des villes, et uniquement des villes. Désactivez le cercle des "alentours" en cliquant sur la petite flèche et choisissant : "juste cette ville".

      Veillez à garder votre baromètre d’audience dans le vert ! Si une audience est trop large, vous risquez de manquer votre cœur de cible. Votre taux de conversion demeurera faible. Si une audience est trop restreinte, chaque affichage vous coûtera plus cher et vous toucherez finalement moins de personnes.

      Astuce !
      Parfois il peut être intéressant de cibler des villes, et uniquement des villes. Désactivez le cercle des « alentours » en cliquant sur la petite flèche et choisissant : « juste cette ville ».
      (cf. photo ci-dessous)

       

    3. Le ton

      Il est très important de bien définir, dès le départ, le ton que vous allez employer durant toute votre campagne de communication. Celui-ci sera bien sûr différent selon votre cible, les produits et services que vous proposez, et variera également d’un réseau social à un autre :

      • Facebook : sympathique, les utilisateurs recherchent le plaisir
      • Twitter : bref, concis, informatif, les utilisateurs recherchent la primeur / le scoop
      • LinkedIn / Viadeo : formel et professionnel, les utilisateurs recherchent à employer ou se faire employer / étendre leur réseau pro

      Nous ne nous étendrons pas sur le choix du ton dans cet article. Les 5 tons de la publicité ont déjà maintes fois été commentés.

    4. Création de votre planning de publication

      Lorsque vous commencez à créer des campagnes Facebook, que ce soit pour vous ou vos clients, vous devez vous organiser rigoureusement afin de minimiser le temps nécessaire à la création et à la diffusion de vos publications.

      Voici un exemple de planning de publication pour une durée de 8 mois. Chaque couleur représente un « ensemble de publicité » Facebook.

      Source : Studio-MAD.fr

      Astuce !
        • Délimitez vos plages de travail, fixez vous des deadlines et tenez vous-y. Vous parviendrez ainsi à contrôler votre temps de travail. Facebook est extrêmement chronophage!

       

        • Utilisez le planificateur de Publication de vos pages pour « Programmer » par avance vos publications non sponsorisées :

       

  4. Finalisez votre campagne

    1. Créez des Hastags

      Les Hastags sont de prime importance dans une campagne Facebook. Ils permettront aux utilisateurs de retrouver toutes les publications contenant ce Hashtag lorsqu’ils le taperont dans la barre de recherche Facebook (où Instagram d’ailleurs). Voici un  exemple de recherche avec le hashtag de notre campagne #SundayWorkoutAvignon :

    2. Invitez vos amis à liker vos pages et à participer à vos événements

      Cela peut paraître évident, mais lorsqu’on passe beaucoup de temps à gérer des pages Facebook on oublie parfois le plus simple. Inviter des amis c’est bien, faites attention quand même à ne pas trop les spammer d’invitations inutiles. Envoyez vos invitations en fonction des intérêts et de la localisation géographique de chacun.

    3.  Créez des Landing Pages sur votre site

      Qu’il s’agisse d’une newsletter, d’un mailing, d’un post sur les réseaux sociaux ou d’une campagne AdWords, la landing page est littéralement la page de votre site sur laquelle vont « atterrir » les visiteurs, en cliquant sur le CTA (Call to Action) de votre campagne digitale.

      Source : deligraph.com

      En d’autres termes, une landing page est une page qui décrit un produit ou un service, une application par exemple, et qui contient un maximum de mots clés afin de répondre aux recherches des internautes. Elle doit également pousser le visiteur à l’action, en utilisant des « call-to-action » (appels à l’action), sous forme de boutons et de formulaires.

      Il est très fortement recommandé de créer au minimum une landing page pour chaque groupe de produits ou services que propose votre campagne Facebook. Au mieux une landing page par produit ou service.

      Le fameux bouton « Call-to-action » (appel à l’action*) redirigera vos prospects vers celle-ci.

    4.  Publiez ! Oui mais quand ?

      Les études indiquent que le timing idéal consiste à poster :

      • Entre 12h et 13h le week-end ;
      • Entre 15h et 16h le mercredi ;
      • Entre 13h et 16h le jeudi et le vendredi.

      Le lundi et le mardi semblent être des journées peu stratégiques, avec un engagement plus bas de 3.5% en moyenne.

      Astuce !
      Il faut distinguer l’heure où les gens sont connectés et l’heure où ils sont réceptifs à vos publications.
      Ce n’est pas parce qu’un internaute est actif sur Facebook qu’il sera sensible à ce que vous postez.

      Source : Notudexo.com

      Par ailleurs, si vous faites de l’actu, préférez les horaires matinaux (7h – 8h), c’est à ce moment là que la plupart des gens effectuent leur veille.

    Conclusion

    Réaliser une campagne Facebook est à la portée de toute personne motivée et méthodique. Quel que  soit votre secteur d’activité et votre localisation géographique, l’outil de ciblage de Facebook vous permettra de toucher une audience qualifiée et ce pour un coût beaucoup plus faible qu’avec d’autres canaux de diffusion.

    N’oubliez pas, le choix des mots et des images est essentiel. Travaillez vos textes, soyez clairs et concis dans vos offres. Publiez aux heures d’affluence et gardez un œil sur vos campagnes afin de mener des actions correctrices.

    Nous aborderons le thème des tests A/B (« A/B testing ») dans un prochain article.

Sources : definitions-marketing.com – facebook business

Quoi de neuf dans HTML 5.1 ? (en Français)

Les nouveautés d’HTML 5.1 traduites en français par AK Digital

HTML 5.1 est la propriété du World Wide Web Consortium (W3C), qui fournit des normes sur l’ensemble du Web afin que les protocoles soient accessibles et normalisés partout dans le monde.

Une mise à jour mineure

En novembre 2016, le W3C a mis à jour le HTML 5, qui est la première mise à jour mineure en 2 ans. Beaucoup de premières fonctionnalités HTML 5.1 ont été abandonné en raison de la conception défectueuse et le manque de support des navigateurs.

Bien qu’il y ait peu d’éléments et d’améliorations apportés au HTML 5.1, il s’agit toujours d’une mise à jour mineure. Certains des nouveaux éléments contiennent des balises combo, qui incluent maintenant <dialog>, <details>, <summary> et <picture>, offrant aux développeurs encore plus de place pour s’exprimer.

Le W3C a déjà commencé à travailler sur un projet de HTML 5.2 qui devrait être publié vers la fin de 2017. Entre-temps, nous présentons quelques nouveautés et améliorations intéressantes introduites dans la version 5.1. Vous pouvez utiliser ces fonctionnalités sans toucher JavaScript. Tous les navigateurs ne prennent pas en charge ces fonctionnalités, il est donc préférable de vérifier le support du navigateur avant de les utiliser en production.

Présentation des nouveautés apparues dans cette version 5.1

14. Prévenir l’attaque de type « phishing »

La plupart des personnes qui utilisent target = ‘_ blank’ n’ont aucune idée d’un fait pourtant courant – l’onglet nouvellement ouvert peut modifier la « window.opener.location » sur une page de phishing. Il exécutera du code JavaScript malveillant sur la page d’ouverture en votre nom. Étant donné que les utilisateurs font confiance à la page déjà ouverte, ils ne seront pas suspicieux.

Afin d’éliminer complètement ce problème, HTML 5.1 a standardisé l’utilisation de l’attribut rel = « noopener » qui sépare les contextes du navigateur. Le rel = « noopener » peut être utilisé dans les balises <a> et <area>, comme dans l’exemple suivant :

<a href="#" target="_blank" rel="noopener"> 
The link won't make trouble anymore 
</a>

A lire en complément d’informations : 24 CSS3 and HTML5 Animation Tools for Designers

 

13. Une balise Figure Caption plus adaptée

La balise <figcaption> représente une légende ou une légende associée à un élément <figure>, qui agit comme un conteneur pour des images telles que des images, des diagrammes, des illustrations, etc. Dans les premières versions HTML, <figcaption> ne peut être utilisé que comme premier ou dernier enfant Tag de l’élément <figure>. HTML5.1 a libéré cette restriction, et maintenant vous pouvez utiliser <figcaption> n’importe où dans son conteneur <figure>

<article>
  <h1>The Headline of todays news </h1>
  <figure>
    <img src="petrolimage.jpeg" alt="Petrol price drops">
    <figcaption>A man fueling up his car at petrol station</figcaption>
  </figure>
  <p>This is the forth hike in petrol prices in two month and the third in case of diesel in one fortnight.</p>
</article>

 

12. Spell Checking (correcteur automatique)

Le spellcheck est un attribut énuméré dont les mots clés sont la chaîne vide, true et false. L’état vrai indique que l’élément doit avoir son orthographe et grammaire vérifié. L’élement « element.forceSpellCheck () » force l’agent utilisateur à signaler l’orthographe et l’erreur de grammaire sur l’élément de texte, même si l’utilisateur n’a jamais ciblé l’élément.

<p spellcheck="true">
 <label>Name: <input spellcheck=" false" id="textbox"></label>
</p>

 

11. The Empty Option (l’Option vide)

La nouvelle version de HTML 5.1 vous permet de créer un élément <option> vide. Il peut s’agir d’un élément enfant des éléments <optgroup>, <datalist> ou <select>. Vous trouverez cette fonctionnalité utile lors de la conception de formulaire convivial.

 

10. Autoriser l’affichage plein écran pour les images frames

L’attribut booléen allowfullscreen, développé pour les frames, vous permet de contrôler si le contenu peut se présenter en plein écran à l’aide de la méthode requestFullscreen (). Prenons par exemple un iframe qui intègre un lecteur de YouTube. L’attribut allowfullscreen est requis pour permettre au lecteur d’afficher son plein écran vidéo.

 

9. Imbrication d’Header et Footer

HTML 5.1 vous permet d’imbriquer l’en-tête et le pied de page dans un autre en-tête. Vous pouvez ajouter un en-tête ou un pied de page à l’élément d’en-tête si elles sont elles-mêmes contenues dans le contenu de même section. La fonctionnalité peut être très utile si vous souhaitez ajouter des en-têtes élaborés aux éléments de séparation sémantique, comme <section> et <article>.

Dans le code ci-dessous, le <article> contient un <header> qui a une balise <aside> qui contient elle-même une balise <header>.

 

8. Zero Width Images

La nouvelle version HTML vous permet d’ajouter une image de taille zéro. Cette fonction est utilisée lorsque l’image n’est pas destinée à l’utilisateur. Si un élément img est utilisé à des fins autres que l’affichage d’une image, par exemple, dans le cadre d’un service pour compter le nombre de pages vues, utilisez l’attribut width et height avec la valeur 0. Pour les images de largeur nulle, il est recommandé d’utiliser des attributs vides.

 

7. Formulaire de validation

 

 

La nouvelle méthode reportValidity () vous permet de valider un formulaire de récupérer les résultats et de signaler les erreurs aux utilisateurs directement dans le navigateur. Les agents utilisateurs peuvent signaler plus d’une violation de contrainte, si l’élément souffre de plusieurs problèmes en même temps. Comme dans ce cas, l’entrée « mot de passe » doit être marquée d’erreur car elle est obligatoire mais vide.

 

6. Le menu contextuel du navigateur

Dans HTML 5.1, vous pouvez utiliser la balise <menu> pour définir un menu composé d’un ou plusieurs éléments <menuitem>, puis le lier à n’importe quel élément à l’aide de l’attribut « contextmenu ». L’id de l’élément <menu> doit avoir la même valeur que l’attribut « contextmenu » de l’élément auquel nous voulons ajouter le menu contextuel.

Chaque <menuitem> peut avoir l’une des trois formes:

  • Radio – Sélectionner une option dans un groupe
  • Case à cocher – Sélectionner ou désélectionner une option
  • Commande – Exécuter une action en cliquant

 

5. Utiliser des nonces cryptographiques avec des scripts et des styles

Un nonce cryptographique est un nombre généré au hasard qui ne peut être utilisé que pour un seul, et il doit être régénéré pour chaque demande de page. Cet attribut nonce peut être utilisé dans les éléments <script> et <style>.

Il est généralement utilisé par la politique de sécurité du contenu d’un site Web pour décider si un certain style ou un script doit être implémenté sur la page. Dans le code donné, la valeur est codée en dur, mais dans le scénario du monde réel, sa valeur est générée au hasard.

 

4. La navigation gràce à « rel » et « rev » améliorée

L’attribut rev a été défini en HTML 4, mais il n’a pas été inclus dans HTML5. Le W3C a décidé d’inclure l’attribut rev pour les éléments <a> et <link>. L’attribut rev spécifie la relation entre le document en cours et le document lié dans le sens inverse. Il a été inclus pour prendre en charge le format de données structurées largement utilisé, RDFa.

Prenons un exemple de deux documents, chacun contenant une leçon, le lien entre eux peut être défini avec les attributs « rel » et « rev » comme illustré ci-dessous …

 

3. Montrer/masquer des informations avec <details> et <summary>

Les nouveaux éléments <détails> et <résumé> vous permettent d’ajouter des informations étendues à un morceau de contenu. Vous pouvez afficher ou masquer un bloc d’informations supplémentaires en cliquant sur l’élément.

Les informations supplémentaires sont masquées par défaut. Dans votre code, vous êtes censé mettre la balise <summary> dans la balise <details> comme indiqué. Après la balise <summary>, vous pouvez ajouter le reste du contenu que vous souhaitez masquer.

 

2. De nouveau type d’ « input »

Les éléments d’entrée HTML ont été étendus avec HTML 5.1 . Trois types d’entrées ont été ajoutés : semaine, mois et date et heure locale. Comme son nom l’indique, les deux premiers permettent aux utilisateurs de choisir une semaine ou un mois. Selon le support du navigateur, les deux sont rendus comme un calendrier déroulant qui vous permet de sélectionner soit une semaine ou un mois particulier d’une année.

Datatime-local spécifie un champ de saisie de date et d’heure, sans fuseau horaire. Les données peuvent être sélectionnées de manière similaire à la saisie du mois ou de la semaine, et l’heure peut être saisie séparément.

 

1. Images responsives (images adaptatives)

W3C a introduit quelques nouvelles fonctionnalités pour la mise en œuvre d’images sensibles sans l’utilisation de CSS. Ceux-ci sont…

L’attribut d’image srcset

L’attribut « srcset » vous permet de définir plusieurs sources d’images alternatives qui varient en densité de pixels. Il permettra au navigateur de sélectionner une image de qualité appropriée selon le dispositif de l’utilisateur.

Par exemple, il serait intéressant d’afficher une image de résolution inférieure pour les utilisateurs disposant de périphériques mobiles sur un réseau plus lent. Vous pouvez utiliser l’attribut srcset avec son propre modificateur x qui décrit le taux de pixels pour chaque image. Comme l’exemple illustré, si le pixel de l’utilisateur est égal à 3, l’image haute résolution sera affichée.

Au lieu du rapport de pixel différent, vous pouvez choisir d’afficher des images de taille différente en utilisant le modificateur « w ». Dans ce cas, l’image haute résolution est définie comme 1600px.

Les dimensions de l’attribut d’image

La plupart du temps les auteurs aiment afficher différentes images pour différentes tailles d’écran. Cela peut être fait à l’aide de sizeattribute. Il vous permet de transformer la largeur de l’écran en espace attribué à une image, puis de choisir l’image appropriée à l’aide de l’attribut scrset. Par exemple…

Dans ce cas, l’attribut size définit la largeur de l’image comme 100% de la largeur de la fenêtre lorsque la largeur de la fenêtre est supérieure à 25em ou 60% de la largeur quand elle est inférieure ou égale à 25em.

L’élément image

L’élément « image » vous permet de déclarer des images avec plusieurs sources pour différentes tailles d’écran. Cela peut se faire en enveloppant <img> avec l’élément <picture> et en décrivant plusieurs éléments <source> enfant. Elément

La balise <picture> seule n’apparaîtra pas. Vous êtes censé déclarer la source d’image par défaut comme la valeur de l’attribut src et la source d’image alternative aller dans l’attribut scrset comme indiqué …

 

SourceWhat’s New In HTML 5.1 — 14 Added Features and How To Use Them

Se désinscrire des newsletters en un clic – CleanFox

Débarrasez-vous des emails publicitaires non désirés et récurrents en 5 minutes !

J’ai testé pour vous l’application web Cleanfox

et je dois dire que j’ai été stupéfait par sa rapidité et son efficacité !

Cette appli vous permet de vous désinscrire, en un temps record, de toutes les listes de diffusion auxquelles vous êtes abonné.

Une Web App simple et gratuite !

Après vous avoir demandé d’entrer votre adresse email, CleanFox génère une page qui répertorie les émetteurs de ces newsletters.

Vous n’avez plus qu’ à choisir de « rester abonné » ou « vous désabonner ».

newsletter cleanfox application desinscription newsletter akdigital agence avignon

Et voici à quoi ressemble votre dashboard CleanFox :

Article cleanfox application desinscription newsletter akdigital agence avignon

C’est sur cette page que vous pouvez vous désabonner en un clic de toutes les newsletters auxquelles vous avez souscrit, plus ou moins consciemment 😛

Vous n’avez pas besoin de vous inscrire, entrez simplement votre adresse email lorsqu’elle vous est demandée.

Nettoyez votre boite mail, protégez la planète!

C’est le slogan de CleanFox.

D’après eux « chaque email génère 10 grammes de CO2. Cleanfox vous aide à nettoyer votre boite mail et à réduire votre empreinte carbone. »

Il est vrai que chaque email a un poids en octets. Qu’il doit être stocké sur un serveur physique distant (hébergeur). Ce serveur consomme de l’énergie. Et la production d’énergie, comme chacun le sait, entraîne une production de CO² … (ce postulat n’est pas toujours vrai, c’est un raccourci, mais nous ne débattrons pas de ce sujet dans cet article !)

En se désinscrivant de nos newsletters, nous recevons moins d’email et réduisons donc l’émission (hypothétique) de CO².

On peut débattre des motivations de CleanFox quant à ce choix de communication. Néanmoins leur solution demeure très utile lorsqu’on souhaite conserver le contrôle de sa boite email.

Créez des équipes !

CleanFox vous propose de vous associer à d’autres utilisateurs, pour contribuer à la réduction des émissions de CO².

Moi, par exemple, j’ai rejoins l’équipe « TEAMFRANCE » et nous avons économisé, à nous tous, 7494 Kg de CO², Wouhouuu !

teamfrance cleanfox application desinscription newsletter akdigital agence avignon

J’espère que cette application vous plaira et que vous rejoindrez mon équipe pour qu’on économise encore plus de CO² et qu’on sauve la planète !

 

PS : Pensez à nettoyer vos « adresses-poubelles » avec Cleanfox !