Archive de mai, 2018

Ionic (Part 1) – Développement hybride pour mobile

jeudi, mai 24th, 2018

Ionic est un framework pour développement mobile pour application hybride.
Ionic permet aux développeurs d’application WEB de développer l’application mobile dans un langage qui leur est famillier comme le HTML, CSS ou Javascript.
Ionic se base sur d’autres framework comme Angular ou encore twitter bootstrap se qui permet vraiment au développeur de se concentrer sur la partie métier/fonctionnel.
Ionic à l’avantage que toutes les applications hybrides on, c’est à dire de s’abstraire des langages natifs des différents OS du marché ainsi vous aurez une application unique que ça soit pour une application mobile Android, Microsoft ou iOs.

Installation de Ionic

Avant d’installer Ionic, vous devez installer nodeJs.
Ensuite il faut vous rendre sur le site de ionic et créer un compte.
Puis installer Ionic avec la ligne de commande suivante

npm install -g ionic cordova

Ou suivre les instructions du site officiel pour plus de détails.
https://ionicframework.com/docs/intro/installation/

Ma 1ere application mobile avec Ionic

Je vous conseil de bien connaitre votre version de Ionic afin de rechercher de l’aide plus facilement que ça soit sur la doc officiel ou bien sur des sites d’entraide. Pour ce faire utiliser la ligne de commande

ionic -v

Ionic vous demandera surement vos identifiants et mot de passe lors de la creation de votre 1er projet, donc mémoriser les.
Pour la création d’un projet il faut utiliser la commande

ionic start

suivit de 2 paramêtres le nom du projet puis le type de template d’application, a savoir:

  • tabs : Un layout composé de 3 tabs
  • sidemenu: un layout avec un menu glissable sur le coté
  • blank: Basique avec une page simple
  • super: un projet avec plus de 14 pages
  • tutorial: un starter complet pour prendre en main Ionic

Au final votre ligne de commande devrait ressembler à ca

ionic start MonAppMobile tutorial

il vous suffit après de vous rendre dans le dossier nouvellement créer (MonAppMobile) et d’exécuter la commande

ionic serve

, cela vous permettra d’exécuter votre application dans un navigateur web et de voir le résultat de vos modifications en temps réel.

Ionic rendu web

Nous verrons dans la seconde partie l’architecture de Ionic et les fichiers à manipuler.

Les métas données dans le SERP

lundi, mai 14th, 2018




Qu’es ce que les métas données?

Ce que l’on peut trouver comme définition:

Une métadonnée (mot composé du préfixe grec meta, indiquant l’auto-référence ; le mot signifie donc proprement « donnée de/à propos de donnée ») est une donnée servant à définir ou décrire une autre donnée quel que soit son support (papier ou électronique).
Wikipedia

Ce qui dépasse, englobe un objet, une science.
Le Robert

La méta donnée est un moyen de référencer, de déclarer un objet de manière structuré.
Pour les moteurs de recherche cela est très pratique et c’est pour cela que l’association schema.org à vue le jour.
Composés de Google, Yahoo, Microsoft et Yandex les structures de méta donnée proposé par schéma.org est devenu rapidement un pilier fondamental du web.

Pourquoi utiliser les métas données?

Les métas données sont utiles pour la compréhension des moteurs de recherche, mais surtout la plupart des moteurs de recherche les utilises dans leur SERP avec un affichage spécifique.
Vous avez surement vu après avoir rechercher une recette de cuisine des étoiles avec une note et des avis, cette affichage est gérée grâce à agregate rating.
Donc en plus d’être compris par le moteur de recherche son interprétation dans le SERP peux vous permettre d’attirer plus de visiteur qui seront plus facilement attiré par votre résultat que le résultat du dessus qui n’en aurait pas, vous améliorerai probablement votre ROI.
Les moteurs de recherche présentent des résultats enrichis grâce aux métas données (arrivés en 2009 avec Google) et ceux de plus en plus.

Quels sont les risques avec les métas données?

Lorsque l’on envoie plus d’informations aux moteurs de recherche, ces derniers on la possibilité de ce servir de ces informations à votre insu.
Vous connaissez surement Google Answer qui propose directement une réponse aux utilisateurs en glanant les informations d’autres sites.
c’est le cas si vous recherchez une séances de cinéma par exemple.

Comment mettre en place une méta donnée?

Il existe 4 méthodes pour mettre en place une méta données:

  • Without Markup
  • Microdata
  • RDFa
  • JSON-LD

Without Markup (sans balise)

Comme son nom l’indique les métas données « sans balise » représentent du texte brut, il est donc difficile a interpréter par les moteurs de recherche.
ex:

Google.Org
Contact Details:
Main address: 38 avenue de l’Opera, F-75002 Paris, France
Tel: ( 33 1) 42 68 53 00, Fax: ( 33 1) 42 68 53 01
E-mail: secretariat (at) google.org
URL: <a href= »http://www.google.org »>www.google.org</a>
Members:
– National Scientific Members in 100 countries and territories: Country1, Country2, …
– Scientific Union Members, 30 organizations listed in this Yearbook: Member 1, Member 2
History:

Microdata

Les microdatas permettent de structurer le texte avec des attributs spécifique que l’on pourra insérer dans des balises HTML.
Les microdatas se structure de la façon suivante :

  • itemscope: Le scope dans lequel on va contenir nos métas données.
  • itemtype: Le type de métadonnées que l’on va utiliser, il s’agit d’une url schema.org pointant vers le type de la structure de données que l’on va manipuler.
  • itemprop: La propriété de notre structure de données

ex:

<div itemscope itemtype= »http://schema.org/Organization »>
<span itemprop= »name »>Google.org (GOOG)</span>
Contact Details:
<div itemprop= »address » itemscope itemtype= »http://schema.org/PostalAddress »>
Main address:
<span itemprop= »streetAddress »>38 avenue de l’Opera</span>
<span itemprop= »postalCode »>F-75002</span>
<span itemprop= »addressLocality »>Paris, France</span>
,
</div>
Tel:<span itemprop= »telephone »>( 33 1) 42 68 53 00 </span>,
Fax:<span itemprop= »faxNumber »>( 33 1) 42 68 53 01 </span>,
E-mail: <span itemprop= »email »>secretariat(at)google.org</span>
Members:
– National Scientific Members in 100 countries and territories: Country1, Country2, …
– Scientific Union Members, 30 organizations listed in this Yearbook:
List of Alumni:
<span itemprop= »alumni » itemscope itemtype= »http://schema.org/Person »>
<span itemprop= »name »>Jack Dan</span>
</span>,
<span itemprop= »alumni » itemscope itemtype= »http://schema.org/Person »>
<span itemprop= »name »>John Smith</span>
</span>,
History:
</div>

Comme vous pouvez le voir dans l’exemple ci-dessus, un scope peut englober d’autres scopes.
Ainsi notre scope de type Organisation possède un scope avec une structure type adresse postale, puis de deux personnes.
Nous avons une structure clair compréhensible par l’homme et par les robots.

RDFa

Le RDFa fonctionne de la même manière que les microdatas à ceci pres qu’il n’y à pas de scope.
Vous retrouver ainsi le type avec l’attribut « typeof« , et la propriété avec l’attribut « property« .
Vous noterez toutefois l’attribut « vocab » qui permet d’indiquer l’url source de déclaration de vos structures de données manipulés.
Par exemple pour manipuler des structures du Dublin Core il vous suffira d’écrire vocab= »http://purl.org/dc/terms/ ».
RDFa vous permet également de déclarer des ressources, pour plus d’information je vous invite à lire plus en détails la source du W3C.

Google.org (GOOG)
Contact Details:

Main address:
38 avenue de l’Opera
F-75002
Paris, France
,

Tel:( 33 1) 42 68 53 00 ,
Fax:( 33 1) 42 68 53 01 ,
E-mail: secretariat(at)google.org
Members:
– National Scientific Members in 100 countries and territories: Country1, Country2, …
– Scientific Union Members, 30 organizations listed in this Yearbook:
List of Alumni:

Jack Dan
,

John Smith

History:

JSON-LD

Cette notation au format JSON est simple à manipuler, la déclaration de la structure des données est assez semblable aux précédentes.
Nous allons retrouver un « context » à la manière du « vocab » il nous permet de déclarer d’où provienne nos structures de données, le « type » de la structure et les propriétés à l’aide de clef/valeur.

Si vous n’êtes pas familier avec le format JSON les accolades « {} » représentent un objet, les crochets « [ ] » représentent un tableau, les attributs sont situé a gauche entre quottes et leurs valeurs a droite.
Pour vous familiariser avec ce format JSON-ld officiel.

Quelles données structurées mettre en place?

Mettre en place des métasdonnées va vous couter plus de temps en spécifications et en développement.
Mettez en place des métadonnées utiles, que vous voulez voir apparaitre dans le SERP par exemple.
Es ce que l’implémentation des métadonnées vas être bénéfique pour moi (calculer le temps passé / bénéfice attendu)?
Vous pouvez tester vos metas données avec l’outil de google
Certaines structures de données ne sont pas encore implémentées par les moteurs mais lorsqu’elles le seront vous pourriez être les 1er à en bénéficier, donc pensez y.