Skip to content

Instantly share code, notes, and snippets.

@mohtth
Last active May 29, 2019 10:43
Show Gist options
  • Save mohtth/152e79b9b6cda1e06faddf873758df69 to your computer and use it in GitHub Desktop.
Save mohtth/152e79b9b6cda1e06faddf873758df69 to your computer and use it in GitHub Desktop.
retro VM

Récapitulatif de la semaine 10

enter image description here

Lundi : Le SCSS (Sass)

Créé en 2006 par Hampton Catlin et Natalie Weizenbaum (Sass: Syntaxically Awesome Styles Sheets).

sass = 1ère syntaxe sans {} ni ; (basé sur l’indentation), assez éloigné de la syntaxe de CSS .scss = syntaxe très proche de CSS (plus pratique à utilisé)Les deux sont compilées en CSS exactement de la même manière, seule la syntaxe diffère.

Apportent une écriture simplifiée du CSS mais n’apportent pas de nouvelles fonctionnalités à CSSIlI.

En existe plusieurs, Sass (SCSS) http://sass-lang.com Less http://lesscss.org, Stylus http://stylus-lang.com

IMBRICATION

  • La syntaxe est légèrement différente de CSS.
  • Il est pas interprétable par le navigateur directement, il faut traduire le fichier en CSS, seul format lisible par le navigateur.
  • Différents scripts (sous différents langages) pour effectuer cette conversion rend l’écriture de CSS plus dynamique et évite la répétition de codes: variables, mixins (fonctions), import/extend, écriture simplifiée, imbrications (nesting), boucles et conditions, gestion avancée des couleurs...
  • Marche aussi avec les média queries Mixins. Ce sont des “fonctions” en CSS, permettant la réutilisation du code.

enter image description here Le SCSS permet de définir des fonctions retournant le résultat d’un calcul, à ne pas confondre avec les mixins qui elles renvoient du code CSS.

enter image description here

Conclusion

Le CSS se professionnalise

  • Avec nouveaux outils
  • Nouvelles méthodologies

Les préprocesseurs facilitent grandement l’écriture des feuilles de styles

  • facile à installer
  • simple à apprendre (pour un usage basique)

Le CSS évolue continuellement et s'enrichit de nouvelles fonctionnalités Il faut donc faire de la veille pour ne pas passer à côté des améliorations du langage

Ressources:

Mardi: PROJET

Mercredi: Jour férié!

enter image description here

Jeudi:

Matin: Projet

Après-midi: Intervention de Mr ANDRIEU Olivier

Olivier Andrieu, né le 29 avril 1961, est un consultant en optimisation pour moteurs de recherche (SEO) et blogueur français.

Parallèlement à son activité de référenceur et à ses publications sur le sujet, il a aussi publié quatre livres sur René Goscinny et l'univers d’Astérix de 1999 à 2009

Il a écrit des livres sur Internet depuis 1994. En 1996, il se spécialise sur les moteurs de recherche et devient consultant indépendant en référencement naturel. Le 1er avril 1996, il crée la société Abondance et lance le site éponyme https://www.abondance.com en 1998. En février 2013, il est élu meilleur référenceur français par un jury composé par le Journal du Net. De façon générale il est considéré comme un pionnier et professionnel de référence de l'optimisation pour les moteurs de recherche en France.

Qu’est-ce que le référencement (SEO) ?

Faire comprendre le référencement (optimisation pour les moteurs de recherche) en une image est l’objectif de cette infographie SEO (Search Engine Optimization).

Définition : L’optimisation pour les moteurs de recherche (SEO) regroupe un ensemble de techniques qui permet de renforcer la visibilité d’un site dans les pages de résultats naturels (SERP) d’un moteur de recherche.

Quels sont les critères principaux en SEO ?

En France et généralement dans le monde, les sites les plus visités par les internautes sont ceux qui apparaissent sur la toute première page de résultats (parmi les 10 premiers). Sur ces 10 premiers résultats, les 3 premiers sites sont les plus visités.

D’après les études, les chiffres concernant le pourcentage de clics sur les résultats de recherche Google en fonction de leur position sur la SERP sont les suivants :

  • 1ère position : 33% des clics sur ordinateur
  • 2ème position : 15,6% des clics sur ordinateur et la même chose sur mobile
  • 3ème position : 10% des clics sur ordinateur et la même chose sur mobile

Les 3 premiers résultats représentent donc quasiment 60% des clics sur les moteurs de recherche. D’où l’importance d’être bien placé dans les résultats naturels.

Google note par degré de pertinence les sites web. Plus les notes sont bonnes, plus ils sont visibles et se rapprochent de la 1ère page. Pour être pertinent aux yeux du moteur de recherche, plusieurs critères sont pris en compte.

Les googlebots sont des robots d'indexation utilisés par le moteur de recherche Google afin de recenser et indexer les pages web.

Optimisation On-page : contenu textuel des pages du site

L’optimisation on-page ou on-site est l’ensemble des techniques visant à améliorer la qualité du contenu d’un site / page web. Plusieurs éléments sont à perfectionner à partir de votre stratégie de mots-clés :

  • Balises (H1-H6, Title, Meta)
  • URLs
  • Contenu de la page (Body)
  • Maillage interne (liens internes)

Optimisation Off-page : liens externes (Netlinking)

A l’inverse, la partie off-site représente tout ce qui touche à l’environnement d’un site, et donc les liens qui redirigent vers une page de celui-ci. Il s’agit de :

  • Provenance des liens externes (les backlinks provenant de sites de qualité seront plus pertinents pour Google)
  • Ancre de lien (quel terme est utilisé pour rediriger vers votre site)

La quantité de liens est aussi un facteur, mais il est bien plus important de miser sur la qualité des liens que sur leur quantité.

Expérience utilisateur (UX)

Cette partie est la dernière à avoir été prise en compte par Google.

On peut distinguer plusieurs critères important pour le SEO :

  • ergonomie du site : apparence et qualité
  • taux de rebond
  • taux de conversion
  • parcours utilisateur

Les éléments techniques liés à l’infrastructure (code HTML, nom de domaine, crawl, etc.)

Il s’agit de tous les éléments qui touchent à l’expérience utilisateur (UX).

  • Poids et vitesse de chargement d’une page (très important)
  • Apparence et qualité du site
  • Architecture et arborescence

Ces différents points sont essentiels à traiter, mails ils ne constituent que la partie émergée de l’iceberg. Le référencement naturel passe en effet par une multitude d’actions et par une régularité des actes. Ce sont toutes ces opérations qui amélioreront l’image de votre site pour Google ou pour un moteur de recherche. Dans tous les cas, le référencement naturel prend du temps.

enter image description here

Comment optimiser son SEO en 2019 ?

Le référencement naturel est un secteur en évolution constante, qui demande une veille permanente pour être au courant des dernières nouveautés et critères à appliquer. Voici donc quelques points qu’il va falloir intégrer à sa stratégie digitale ou surveiller dans les mois à venir.

Outils pour les professionnels du SEO

  • Google analytics: Service gratuit d’analyse de sites Web et de mesure d’audience.C’est l’outil web analytics le plus connu et le plus utilisé au monde avec 10 millions de site soit 83,4 % du marché mondial qui y ont recours
  • Piwik: Successeur de PhpMyVisites et adopté par plus d’un million de sites, Piwik est un logiciel où plus de 70 plugins sont disponibles. Alternative à Google Analytics.
  • Google Keyword planner: Outil de planification des mots-clés. Il vous donne le volume de recherche et la concurrence pour chaque idée de mot-clé. C’est un formidable outil pour bien choisir vos mots-clés pour votre stratégie de contenu.

Screaming frog, Botify, Oncrawl.. Outils visualisation du maillage interne: Cocon.se, Visiblis, GephiSEA, Google my business..

Quel Hat Seo pour votre référencement

La technique du White Hat Seo

Elle consiste à utiliser des techniques respectant les conseils de qualité des moteurs de recherche. En les utilisant, nous ne serons pas pénalisés. Ces techniques normales, et surtout légales, qui vous aident à engendrer plus de trafic sont celles qui sont le plus appréciées par les moteurs de recherche.

La technique du Grey Hat Seo

Ce sont celles dont nous ne sommes pas sûres. Dans le détail technique, on peut considérer un Grey Hat Seo, toute action délibérée qui essaye d’améliorer le positionnement d’un site dans les moteurs de recherche pour certains mots-clés. L’achat de liens est un bon exemple du comportement répressif de Google face aux Grey Hat SEO. Cette technique était un bon moyen dans le passé. Elle rapportait aux propriétaires des sites et aux acheteurs. Maintenant que Google ne la tolère plus, s’il suspecte que vous vendez des liens, votre positionnement en souffrira… (et s’il suspecte que vous en achetez, ces liens ne seront pas pris en compte, le résultat est que vous dépensez de l’argent pour rien).

La technique du Black Hat Seo

Ces techniques sont totalement contre les règles des moteurs de recherche et surtout, elles sont INTERDITES ! Elles ont par exemple pour but de donner à un site web un classement inapproprié pour certains mots-clés.

enter image description here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment