• Ultime [Cool]
  • pratique
  • cours
  • developpement

  CHAPITRE 1 - HTML
     1.1. Creation d'un document et syntaxe
     1.2. Balises d'en tete et corp de page
     1.3. mise en forme du texte
     1.4. Puces
     1.5. Images
     1.6. Liens
     1.7. Tableaux
     1.8. Multi fenetrage
     1.9. Formulaires
  CHAPITRE 2 - Feuille de styles CSS (Cascaded Style Sheet) 
     2.1. Syntaxe
     2.2. Definition du style
     2.3. Polices de style
     2.4. Mise en page
     2.5. Exemples de calques
     2.6. menus CSS
     2.7. Les sprites CSS
     2.8. Bootstrap
  CHAPITRE 3 - Référencement
     3.1. Les zones chaudes
     3.2. Les freins au référencement
  CHAPITRE 4 - Javascript
     4.1. Syntaxe
     4.2. Evenements
     4.3. Programmation objet
     4.4. Interactions
     4.5. Actions programmees
     4.6. Prototypes et héritage: les classes en Javascript
     4.7. Ajax avec XMLHTTPRequest
  CHAPITRE 5 - jQuery
     5.1. Fonctionnement
     5.2. Ajax et Formulaires
     5.3. DataTable
     5.4. DataTable : Chargement avec un Appel Ajax
     5.5. DataTable : Edition
     5.6. DataTable : Filtrage et total de colonne
  CHAPITRE 6 - Les pluggins

<hr width="px|%"      px: en pixels     ex:  "100" ou "100px"
    size="px"         %:  en pour cents ex:  "10%"
    color="#rgb"      code rgb:   red   green blue   "#FFFFFF"="white"
    align=...         ~~~~~~~~  #  FF    FF    FF    "#000000"="black"
    noshade>          Utilisez plutot des feuilles de style hr.

<b>texte</b> texte en gras           <small>texte</small>   texte en petit
<i>texte</i> texte en italique       <big>texte</big>       texte en gros
<u>texte</u> texte souligne          <sup>texte</sup>       texte en exposant
<strike>texte</strike> texte barre   <sub>texte</sub>       texte en indice

<font face="nom de la police"  ex: "Arial Black", "Garamond Bold"
      size="1...6"   3=T; 4=T+2; 2=T-2; T: Taille utilisateur
      color="#rgb"> ... </font>

<a href="..."        Reference: url, java script, ancre, ...
   target="_blank">  Cible du lien. Dans une nouvelle fenetre avec _blank
texte du lien </a>   Ca peut aussi etre une image.

<a name="nom"        Nom de l'ancre.
   tabindex=n        Index de tabulation.
   accesskey=x       Alt-x

<table> <!-- Cadre exterieur -->
  <tr>  <!-- table raw: ligne -->               _________________________
    <td> cellule1 </td>  <!-- cellule -->      |            |            |
    <td> cellule2 </td>                        |  cellule1  |  cellule2  |
  </tr>                                        |            |            |
  <tr>                                         |____________|____________|
    <td> --- </td>                             |            |            |
    <td> +++ </td>                             |    ---     |    +++     |
  </tr>                                        |            |            |
</table>                                       |____________|____________|

<form action=""       par defaut sur la page elle meme. Sinon page asp.ou php
      method="">      par defaut get "get","post"
  ... elements du ...
  ... formulaire ...
</form>

  Element texte:
  ~~~~~~~~~~~~~
    <input type="..."         "text|password|hidden"
           name=""            Nom de l'element.
           size=""            Taille de la case.
           maxlength=""       Longeur maximum de la chaine.
           value=""           Valeur du champ.
           disabled           Verouiller.
           readonly>          Lecture seule.

  Zone de texte:
  ~~~~~~~~~~~~~
    <textarea name=""         Nom de l'element.
              rows=""         Nombre de lignes de la zone.
              cols=""         Nombre de colones de la zone.
              disabled        Verouiller.
              readonly>       Lecture seule.
      ... contenu ...
    </textarea>

  Case a cocher:
  ~~~~~~~~~~~~~
    <input type="..."         "radio|checkbox"
           name=""            Meme nom pour les radio du meme groupe.
           value=""           Valeur retourne si selectionne.
           disabled
           checked>

  Listes deroulantes:
  ~~~~~~~~~~~~~~~~~~
    <select name=""           Nom de la liste deroulante.
            size=""           Nombre de lignes affichees de la liste.
            disabled          Verouiller.
            multiple>         Multicritaire autorise.
      <option value=""            Valeur retourne (val1,val2,val3 en multi).
              selected>           Seleclionne par defaut.
        ... contenu ...
      </option>
      <option ...
    </select>

  Boutons:
  ~~~~~~~
    <input type=""            "button|submit|reset"
           name=""            Nom du bouton.
           value=""           Texte du bouton.
           disabled>          Verouiller.

Regroupement d'elements 

    <fieldset>                Regroupement en catégories logiques (thématiques),
    <legend>Titre</legend>
    elements...               Rend les contrôles  plus compréhensibles,  et plus
    </fieldset>               accessibles aux handicapées.

<Balise id=id class=class>             <P>                     <P id=intro>

Balise[#id|.class]  {           ex:    P  {                    P#intro  {
  definition1 : valeur1  ;               text-align:justify;     color:black;
  definition2 : valeur2  ;               text-indent:8pt;        font-size:10;
  definitionN : valeurN (;)              color:red             }
}                                      }

  CLASS                      ID                         SPAN

  <head><style>              <head><style>              <head><style>
  P { }                      BODY#top { }                SPAN.maj {  }
  P.intro { }                </style></head>            </style></head>
  </style></head>            <body id="top">            <body>
  <body>                     ...                        <span class=maj>
  <p class=intro>txt</p>     <a href="#top"></a>        </span>
  </body>                    </body>                    </body>

    font-family: fonte desiree, fonte de rechange1, ...
    font-family: "News Gothic MT", "Lithos Regular"
    H2 {font: small-caps bold 16pt times; color: #0000FF}
    Body {background: black url(text.jpg) repeat-x scroll center top}

    A:link , A:visited, A:active, A:hover { }

position:relative|absolute;
top:pt; right:pt; bottom:pt; left:pt; width:px|%; height:px%;
clip:rect(h d b g); capture un rectangle sur l'element.
                    hdbg haut, droite, bas, gauche du rectangle
z-index:-1; niveau dans la pile d'objets
display:none|block|inline|list-item(comme li)

border, border-top, border-bottom, border-left, border-right, border-color,
border-left-width, ...
border:thin|medium|thick|4px
border:none|dotted|thick|solid|double|groove|ridge|inset|outset

padding, padding-top, padding-bottom, padding-left, padding-right
padding: hdbg (haut et droite et bas et gauche) en pt ou %
padding: h d b g (haut, droite, bas, gauche)
padding: hb dg (haut et bas, droite et gauche)
padding: h dg b (haut, droite et gauche, bas)

margin, margin-top, margin-bottom, margin-left, margin-right
margin: hdbg (haut et droite et bas et gauche) en pt ou %
margin: h d b g (haut, droite, bas, gauche)
margin: hb dg (haut et bas, droite et gauche)
margin: h dg b (haut, droite et gauche, bas)

vertical-align:
    baseline|    aligne le centre sur la ligne de base
    middle|      aligne le centre sur le milieu
    sub|         en indice
    super|       en exposant
    text-top|    aligne le haut sur le haut du texte de la ligne
    text-bottom| aligne le bas sur le bas du texte de la ligne
    top|         aligne le haut sur le plus haut de la ligne
    bottom       aligne le bas sur le plus bas de la ligne

float:left|right equivaut a align=left et align=right en html
clear:left|right|both|none equivaut a la balise clear

color:#rgb ou color:rgb(r, g, b) ou color:rgb(r%, g%, b%)
background:transparent|#rgb|red
background url()|repeat|repeat-x|repeat-y|noreapeat|fixed|scroll|x y
x peut etre: top, center, bottom
y peut etre: left, center, right
overflow:visible|hidden|scroll

list-style:disc|circle|square
list-style:decimal|lower-alpha|upper-alpha|lower-roman|upper-roman|url()
list-style:outside|inside
page-break-after:always|auto
page-break-before:always|auto

2.5. Exemples de calques

Il existe de multiples balises pour faire des calques :

<div>, <p>, <ul>, <li>, <h1>...<h6>, <blockquote>...

Deux blocs l'un en-dessous de l'autre avec un espace de séparation :

Partie HTML :

Et la CSS correspondante :

Trois blocs côte-à-côte :

Partie HTML :

Et la CSS correspondante :

Un bloc contenu dans un autre :

Partie HTML :

Et la CSS correspondante :

Une image alignée à droite d'un texte :

Partie HTML :

Et la CSS correspondante :

Une mise en page:

Une page html en fond d'ecran:

2.6. menus CSS

2.7. Les sprites CSS

Les sprites sont utilisées dans de nombreuses applications web où de multiples images sont utilisées. Au lieu d'avoir une image par fichier, on économise de la bande passante et de la mémoire en les envoyant toute dans le même fichier, ainsi, le nombre de requêtes HTTP diminue. On utilise alors background-position pour choisir l'image qu'on souhaite utiliser.

2.8. Bootstrap

réf:
https://devstory.net/11975/bootstrap-modal
réf:
http://www.trucsweb.com/tutoriels/javascript/bootstrap4-modal_dynamique/

CHAPITRE 3 - Référencement

3.1. Les zones chaudes

Zone chaude n°1: Optimiser ses titres

En terme de référencement, le critère auquel les moteurs de recherche apportent le plus d'importance est le titre. Vous devez donc soigner au mieux le titre de chacune de vos pages. Chaque page doit comporter un titre différent au risque de se retrouver en "Duplicate content" soit du contenu dupliqué dans les résultats de recherche. En somme vos titres doivent suivre les règles suivantes:

• Un bon titre doit comporter au maximum 10 mots (sauf le, la, des, ou,…) ou 100 caractères maximum
• Il ne doit y avoir plus de deux mots clés similaires dans votre titre et doivent être séparé par 3 mots environ
• Comporter des mots clés en rapport avec le sujet traité

Zone chaude n°2: Optimiser la zone de texte

Quand les moteurs de recherche indexent vos pages, ils vérifient et lisent la totalité du texte présent sur les pages. Pour être crédible, vous devez placer les mots clés les plus importants le plus près de la balise . Le moteurs de recherche privilégient les 3 premières lignes de texte visible plutôt que les dernières lignes les plus en bas pour leurs critères de référencement:

Vous devez également mettre en exergue vos mots clés importants.

Voici quelques conseils à savoir pour rendre vos mots clés réactifs:

• Utilisez les balises h1 et h2, pour faire ressortir vos titres de paragraphe.
• Mettre en valeur vos mots clés avec la balise strong, ce qui a pour effet de mettre en gras votre expression (+++).
• Idem pour la balise b (+).
• Les balises em permettent de passer votre texte en italique.

Préférer la balise "strong" à la balise "b". Pour éviter tous problèmes de "blacklistage", vous ne devez en aucun cas cacher du texte sur votre page (exemple: texte blanc ou jaune très clair sur fond blanc). Les moteurs ne pardonneront pas ce genre de technique et supprimeront sans préavis votre site de leur index.

Il existe également un critère que l'on appel IDM (Indice de mot clé). Cette IDM permet de calculer en pourcentage l'occurrence d'un mot présent dans la zone de texte. Voici un exemple:

3 mots clés / 100 mots dans la zone de texte = 3%

Certains référenceurs préconisent un IDM maxi de 5% par page, mais cette information est à prendre avec précaution. Beaucoup de sites utilisent des IDM atteignant 10 à 15% et sont très bien référencés.

Note très importante, il vaut mieux créer de petites pages décrivant bien le thème abordé plutôt que de grands documents parlant de plusieurs thèmes à la fois. Les moteurs sont très sensibles à ce sujet et feront donc la différence lors des résultats de recherche.

Zone chaude n°3: Optimiser les adresses URL des pages

Les liens internes ou externes sont des critères important pour les moteurs de recherche. En somme, les moteurs adorent les mots "cliquables", car vous pouvez insérer des mots clés à l' intérieur des ces mêmes liens. Pensez donc à bien soigner vos ancres pour un maximum de réactivité. Voici un très bon lien:

Dans cette exemple les mots "referencement gratuit" sont très réactifs pour une recherche sur les moteurs. A noter que le "-" (tiret) et "_"(l'underscore) dans les adresses sont considérés pour les moteurs comme un espace. N'hésitez donc pas à placer un maximum de mots clés entre ces balises.

Les liens dans une images

Vous pouvez insérer des liens internes ou externes dans une image, les liens seront très bien suivi par les moteurs. Voici un exemple:

l'attribut alt de la balise est pris en compte par Google.

Zone chaude n°4: Les backlinks

Comme vous avez pu le constater, les moteurs de recherches attachent une grande importance à la qualité des URL de lien. Cependant, il existe un autre critère de référencement qui est basé sur l'échange de liens. Plus vous effectuerez d'échange de liens avec d'autres sites internet, plus votre site aura tendance à monter dans les résultats de recherche.

Pour que les moteurs puissent apporter une importance sur vos échanges de liens, vous devez respecter les conditions suivantes:

• Les liens doivent contenir les mots clés essentiel
• Les sites doivent avoir un thème commun entre eux
• Les pages sur lesquels se trouve le lien doivent être référencées sur les moteurs pour que le lien soit pris en compte
• Les liens ne doivent pas être cachés

Evitez les pages qui comportent trop de liens (compter 10 liens externe maxi par page). Si vous souhaitez connaitre le nombre de backlinks pointant vers votre site, vous devez utiliser la commande suivante dans la zone de recherche des moteurs:

link:www.votre-site.com (sur Google et msn) linkdomain:www.google.fr (sur Yahoo)

Meme si Google n'affiche pas la totalité des liens pointant vers votre site, les autres liens sont bien pris en compte.

Zone chaude n°7: Les balises méta

Les balises sont de moins en moins utilisées de nos jours. Certains moteurs les utilisent encore mais la plupart des grands moteurs ne le font plus. Cependant, il ne faut pas non plus les ignorées pour autant. Nous allons les détaillés ici:

Cette balise permet de préciser le codage du texte. Elle est juste utilisé par les moteurs pour définir le type de codage. Cette balise doit être renseignée.

est quand à elle vitale pour les moteurs. Sans elle, les pages de votre site porteraient toutes le même nom "untitle" (duplicate content). Elle ne doit pas dépasser environ 10 mots ou 100 caractères. Cette balise doit se trouver la plus haute possible dans votre code (au plus proche de la balise par exemple). Si ce n'est pas le cas, faites le!

Cette balise permet de résumer en quelques mots le contenu du site, si celui-ci ne comporte pas de zone de texte (site en Flash ou avec des frames par exemple). Nous vous conseillons de remplir cette balise. Elle ne doit pas dépasser environ 20 mots ou 200 caractères. Cette balise doit se trouver sous la balise "title".

Cette balise ne sert quasiment plus aux moteurs de recherche. Il est cependant conseillé de placer quelques mots clés séparés par une virgule. Placer également les formes singuliers/pluriels, miniscules/majuscules des occurences dans cette balise. Cette balise ne doit pas dépasser les 1000 caractères soit une centaine de mots clés.

Cette balise doit être renseigné. Elle spécifie si le moteur doit ou non indéxer la page et suivre les liens présent sur celle-ci: "index, follow" pour indexer et suivre les liens "noindex, nofollow" pour ne pas indéxer et suivre les liens de cette page. Si cette balise est absente, la page sera indéxé et les liens seront suivi par défaut.

Zone chaude n°8: Attributs alt et title

Beaucoup de webmaster inclus les balises alt et title pour l'affichage de texte alternatif en l'absence d'images et dans les liens textuels de leurs pages. Voici 2 exemples de code:

Les attributs alt et title sont pris en compte par Google

Les autres critères du référencement

Fréquence de mise à jour des pages: Plus les pages sont mises à jour, plus le site sera considéré comme réactif

Date de création du document: Plus un document est ancien dans l'index du moteur, plus son poids pourrait être considéré comme fort

Nombre de pages du site: Plus un site comportent de pages, plus sa notoriété sera considéré par le moteurs

Validité W3C: Un code HTML propre peut permettre aux spiders des moteurs de mieux comprendre votre code. Cette étape n'est pas obligatoire. Vous pouvez vérifier la validité de votre site en cliquant sur ce lien: Validateur W3C
http://validator.w3.org/

Notion de TrustRank: Algorithme permettant de repérer des tentatives de spam sur Google en analysant les liens du web tout en partant de pages de référence choisies par des humains. Très peu d'informations sont encore disponibles sur cette méthode.

http://www.referencement-conseil.net/referencement/optimisation/zone-de-texte.php

3.2. Les freins au référencement

Les sites en Flash

Les moteurs ne savent pas lire les textes inclus dans les animations Flash, par contre, il lisent les pages HTML qui lancent les animations. Il faut donc optimiser la page HTML en renseignant :

• La balise "TITLE" : inclure des mots clés et un descriptif ;
• La balise "META" : inclure des mots clés et un descriptif ;
• La balise "NOEMBED" : c'est la balise d'insertion des animations Flash dans les pages HTML, il faut ajouter du texte descriptif sans abuser.

Il faut éviter les sites réalisés entièrement en Flash ou doubler ses pages Flash avec des pages HTML ou encore : présenter quelques pages optimisées pour être indexé par les moteurs.

Le langage Javascript

En arrivant sur l'index ou page d'accueil d'un site, le robot va tenter de suivre les liens présents sur cette page afin d'indexer toutes les pages.

Un lien en JavaScript pose problème si il est du type : lien

Les liens en JavaScript sont pris en compte par les robots, mais pour cela ils doivent être compatibles avec les robots ou spiders.

En intégrant l'URL de destination dans la zone "href", le robot va la reconnaître et la suivre pour indexer le document – cette URL est ensuite suivie du code propre à l'action proprement dite.

Un lien en JavaScript compatible est du type : lien

Attention! au placement JavaScript dans la partie des pages: les moteurs accordent plus de poids au texte situé en début de page ; il est essentiel de placer tout contenu optimisé le plus haut possible dans la page.

Les sites dynamiques et les URL sans contenu lexical

L'adresse URL générée lors de la création «dynamique» de pages présente les caractères bloquants ? et & . Les URL contenant jusqu'à 3 paramètres (2 &) ne posent pas de problème aux moteurs. Mais si les URL atteignent un nombre élevé de paramètres (plus de 4 paramètres, soit 3 &), elles constituent un frein.

Que faire ?

• Optimiser les pages Web qui ne nécessitent pas de paramètres (page d'accueil, de présentation, le plan du site, présentation générale des produits, etc.) et les présenter avec des URL simples.
• Passer par un référencement payant.
• Pratiquer l'URL rewriting pour présenter des URL "propres" aux robots.

Les identifiants de session – Session ID (SID)

Les identifiants de session permettent de conserver des informations sur un internaute tout au long de sa visite sur un site. Ils permettent de connaître le parcours des internautes sur un site Web, de gérer un panier d'achats sur un site e-commerce, de rester identifié sur un forum, etc.

Ces données changent à chaque visite et posent problème aux robots qui considèrent cette adresse comme une nouvelle URL à chaque fois qu'ils visitent le site.

Que faire ?

• Eviter les identifiants de session en page d'accueil et les garder pour la navigation profonde du site.
• Pratiquer l'URL rewriting.
• Créer des pages statiques pour la présentation de produits qui ne nécessitent pas d'identifiants de session.
• Utiliser les cookies (moins problématiques) plutôt que les identifiants de session.

Les cookies (biscuit, témoin de connexion)

Les cookies sont des fichiers enregistrés sur l'ordinateur de l'internaute ; ils stockent des informations sur le disque dur de l'utilisateur afin de l'identifier lors d'une prochaine connexion.

Les cookies sont destinés aux navigateurs et ils ne sont pas acceptés par les robots ; ce qui constitue un frein au référencement. Il faut donc présenter une autre information aux robots afin qu'ils puissent accéder aux pages du site et les indexer.

Notons que certains utilisateurs n'acceptent pas les cookies non plus : il faut bien évidemment prévoir ce choix de navigation et tout comme pour les robots, présenter une autre information afin qu'ils puissent accéder aux pages du site.

Les accès par mot de passe

Un site accessible par mot de passe en page d'accueil ne permet pas aux robots

d'indexer vos pages (ils n'ont pas de mot de passe).

La solution :

• Proposer des pages grand public pour acquérir une visibilité minimale et supprimer le mot de passe d'entrée de jeu.
• Créer une zone protégée par mot de passe pour les membres.

Les tests en entrée de site

Les tests à l'entrée du site vérifient certains paramètres : la langue, la résolution d'écran, etc. Ils ne posent pas de problème, mais il faut prévoir le cas du passage des robots et mettre en place un script afin de leur permettre d'indexer les pages.

Les redirections

La redirection 301 (Moved Permanently) permet de diriger le robot vers une nouvelle adresse URL, soit d'indiquer au robot qu'une page a été déplacée. L'avantage de la redirection 301 est qu'elle permet de récupérer le PageRank qui est alors transféré vers la nouvelle page. Ce code peut être placé dans un fichier .htaccess à la racine du site et se présente comme tel :

Code :

RewriteEngine on RewriteRule ancien_fichierl.htm http://www.nouveau-site.com/fichier.htm [R=301] En crawlant vos pages, le robot va recevoir cette information et va suivre la redirection. Il faut que l'utilisation du fichier .htaccess soit possible par l'hébergeur.

L'hébergement

L'hébergement de votre site peut être un facteur bloquant; tenir compte de :

• La réputation de l'hébergeur : Si vous êtes sur un serveur mutualisé, donc partagé par plusieurs sites, vous pouvez être pénalisé par un moteur de recherche qui bloque l'adresse IP d'un site ayant trop spammé son index. Une solution : passer du serveur mutualisé au serveur dédié.

• L'accessibilité du serveur et la fiabilité : Votre site doit être accessible en permanence pour être visible, notamment lors du passage des robots. Mais d'autres critères doivent être pris en compte pour assurer une continuité du service d'hébergement : l'ancienneté, la réactivité et l'évolutivité. Il faut donc vérifier la garantie sur la disponibilité du serveur proposé.

• Un hébergement gratuit n'est pas un frein majeur mais il peut en revanche s'avérer problématique pour réaliser une opération telle que l'URL Rewritting; il pose également le problème de la pérennité avec le risque de fermeture du service.

Robots.txt

Un Robots.txt impose des limitations aux robots des moteurs de recherche en les empêchant d'accéder à certaines pages.

Des directives sont incluses dans les fichiers Robots.txt ou les balises meta “robots” pendant la phase de développement afin que les moteurs n'indexent pas une page (« noindex »), un répertoire ou le site ; lors de la mise en ligne pour le grand public, ces directives ne sont pas supprimées et nuisent au référencement du site.

Les menus déroulants et formulaires

Les menus déroulants et formulaires présentent du contenu visible aux robots, mais ces robots ne savent pas suivre ces liens, car ils ne sont pas « spider compatible ». Or, les robots ou spiders se basent sur les liens pour indexer les pages.

Seule solution donc pour contrer cet obstacle au référencement : offrir un plan du site ou passer par des services tels que Google Sitemap

Les cadres ou frames

La gestion des cadres est mal prise en compte, car chaque page est divisée en plusieurs parties : la page « mère » et les pages « filles ». Les spiders considèrent souvent ces pages comme des pages distinctes et ne font pas le lien entre les pages – ils affichent alors une page orpheline, indépendamment des autres.

Si vous utilisez les frames, il faut :

• Optimiser la page « mère » :
  1. Balise TITLE riche en mots clés.
  2. Balises META descriptives et riches en mots clés.
  3. Balise NOFRAMES incluant des mots clés et un descriptif du site.
  4. Ajouter un lien vers les fichiers des pages « filles » en l'incluant entre les balises A (la balise lien).
• Optimiser les pages « filles » :
  1. Etablir le lien avec la page « mère » en ajoutant un code javascript dans les pages « filles ».

1. Inclure des titres riches en mots clés.
2. Rédiger des META riches en mots clés.

Spamdexing (ou la fraude au référencement)

Le spamdexing est sanctionné par les moteurs de recherche, il s'agit de :

• La création de pages spécifiques pour le référencement : «pages alias», «pages satellites», «doorway pages» ou «pages fantômes». Ces pages sont optimisées pour les moteurs. Elles sont présentées lors de la visite de l'internaute et contiennent une redirection vers le vrai site.

• La création de texte et liens cachés dans les pages. Ce sont les fonctions “visibility:hidden” ou “display:none”, l'utilisation de balises “noscript” n'ayant aucun rapport avec la balise “script” qu'elles accompagnent.

• La pratique du cloaking (camouflage) qui consiste en la création d'une page satellite qui est présentée lors de la visite du robot. Le site Web peut envoyer différents contenus selon si la page est demandée par un utilisateur ou par un moteur de recherche.

• Spam de recherche: il s'agit de la création d'un grand nombre de pages sans contenu réel mais dont le but est d'entrer dans les moteurs de recherche, quel que soit le mot clé demandé.

• Spam de commentaires: c'est l'envoi d'un nombre massif de commentaires sur les blogs, forums ou autres espaces Web mentionnant un lien vers le site de l'auteur afin de faire monter sa position.

• Réaffectation d'un domaine: achat d'un site Web qui possède une bonne quotation dans les moteurs de recherche et le remplacement du contenu existant par un autre contenu tout à fait différent.

CHAPITRE 4 - Javascript

Le javascript est un langage de programmation évolué, qui est interprété par le navigateur et procure un dynamisme des pages coté client. Il s'agit d'un script qui s'integre dans la page html, et qui permet de lancer tout type de commandes, de modifier ou de générer la page en cours. Seul les liens ne doivent pas être générés pour être vus par le robot du moteur de recherche (ex: google). Il faut très peu de temps pour tester le code via un interpréteur en ligne, par exemple:
https://jseditor.io/
(mon préféré), https://codepen.io/pen/, ou encore
https://code-basics.com/#courses

4.1. Syntaxe

Javascript utilise les conventions du langage c; la case est importante, les structures de controle sont les meme, ainsi que les operateurs. conventions: ; { } ( ) \" \b \n operandes: + - * / % = += -= = /= %= == < <= > >= != ? : || && ++ -- binaire: & | >> << commentaires: // / */ structures: if else for while break continue return

L'inclusion d'un script peut se faire de plusieurs maniere. Le code javascript peut se metre n'importe ou. En general on place les fonctions dans le head.

Les variables ne sont pas typées à la déclaration, elles prenent le type de leur contenue. Les operateurs === et !== permettent de prendre en compte le type.

• boolean : true false 2 === '2' -> false
• number : 2.5 2 == 2 -> true
• string : 'toto'
• object : null, { name:'zz', age:22 }
• function : function(){}
• undefined

Une variable non déclarée ou non affectée, prend la valeur undefined. Une var peut être affectée à null, en tant qu'objet sans valeur. undefined et null sont deux types distincts: undefined est un type indéfini, null est un objet.

Pour connaitre le type d'une variable on a la fonction typeof(toto); Les tableau sont aussi de type object. Pour différencier les objets des tableaux utiliser la méthode Array.isArray ou Object.prototype.toString.call

Vous pouvez stocker divers types de données dans un élément Array, y compris les nombres, les chaînes, les objets et même d'autres tableaux. Vous pouvez créer un tableau multidimensionnel en concevant un tableau indexé et en affectant à chacun de ses éléments un tableau indexé différent.

Méthodes disponibles :

at(), concat(), every(callback:Function, thisObject:* = null) fill(), filter(), find(), findIndex(), flat(), flatMap(), forEach() includes(), indexOf(), join(), keys(), lastIndexOf(), map(), pop(), push(), reduce(), reduceRight(), reverse(), shift(), slice(), some(), sort(), splice(), unshift(), values(), ...

ex: data.forEach(function (item) { item.type = 2; });

Le format JSON permet de créer des objets avec des méthodes.

4.2. Evenements

Javascript integre une dizaine d'evenements exploitables. Associes aux fonctions, aux balises et aux formulaires, ces evenements permettent une reelle interactivite de vos pages.

onLoad, onUnload creation d'un evenement: onmouseOver, onmouseOut onevenement="fonction()" onFocus, onBlur onchange, onselect, onsubmit onClick

4.3. Programmation objet

Javascript est un language objet. Il regroupe des objets contenant des attributs et des methodes. Les objets sont organises en arborescence. Par defaut c'est l'objet window qui est utilise. le lancement d'une methodes js se fait ainsi: objet.methode() ou methode() si l'objet est window ex: alert()

 #- window                  fenetre avec barre d'etat
 |    |- history                historique de la fenetre
 |    |- location               url actuelle, protocole, ...
 |    #- document               corp du texte (body)
 |    |    #- form                  formulaire (form)
 |    |    |    |- button               elements du formulaire
 |    |    |       ...
 |    |    |- image             images (img)
 |    |    |- images
 |    |    |- link              liens (a)
 |    |
 |    |- frame                  frames
 |
 #- navigator               Navigateur
 |    |- plugin
 |
 |- Date                    Date
 |- Math                    Math
 |- String                  String

4.4. Interactions

A travers les objets, javascript peut lire et modifier les attributs des balises contenus dans le document.

L'utilisation la plus courante, est sur les formulaires:

4.5. Actions programmees

Il est possible de programmer des actions qui serons exécutées après un certain temps

4.6. Prototypes et héritage: les classes en Javascript

JavaScript est un langage basé sur des prototypes, et chaque objet en JavaScript possède une propriété interne cachée appelée [[Prototype]] qui peut être utilisée pour étendre les propriétés et les méthodes des objets. Nous pouvons accéder au [[Prototype]] d'un objet avec la méthode Object.getPrototypeOf().

Jusqu'à récemment, les développeurs industriels utilisaient des fonctions de constructeur pour imiter un modèle de conception orienté objet en JavaScript. La spécification de langage ECMAScript 2015, souvent appelée ES6, a introduit des classes dans le langage JavaScript. Les classes en JavaScript n'offrent pas réellement de fonctionnalités supplémentaires, et sont souvent décrites comme fournissant du « sucre syntaxique » par rapport aux prototypes et à l'héritage, en ce sens qu'elles offrent une syntaxe plus propre et plus élégante. Comme d'autres langages de programmation utilisent des classes, la syntaxe des classes en JavaScript permet aux développeurs de passer plus facilement d'un langage à l'autre.

Une classe JavaScript est un type de fonction. Les classes sont déclarées avec le mot-clé class. Nous utiliserons la syntaxe d'expression de fonction pour initialiser une fonction et la syntaxe d'expression de classe pour initialiser une classe.

constructeur:

Les codes déclarés avec function et class renvoient tous deux une fonction [[Prototype]]. Avec les prototypes, toute fonction peut devenir une instance de constructeur en utilisant le mot-clé new.

Une fonction de constructeur est initialisée avec 0 à n paramètres, qui seraient attribués comme propriétés de this, en référence à la fonction elle-même. La première lettre de l'identifiant serait en majuscule par convention.

La pratique courante avec les fonctions de constructeur est d'assigner les méthodes directement au prototype plutôt que dans l'initialisation, comme on le voit dans la méthode greet() ci-dessous.

héritage

De nouvelles fonctions de constructeur peuvent être créées à partir du parent en utilisant la méthode call(). Cela revient a créer une classe qui hérite de Hero:

réf: Comprendre les classes en JavaScript
https://www.digitalocean.com/community/tutorials/understanding-classes-in-javascript-fr
réf: Promesses
https://smnarnold.com/cours/javascript/promesses

4.7. Ajax avec XMLHTTPRequest

AJAX (Asynchronous JavaScript and XML) permet de mettre à jour certaines parties d'une page sur base d'évènements déclenchés par l'utilisateur sans recharger la page. L'objet XMLHttpRequest permet d'échanger des informations sous différents formats (dont XML, HTML ou texte). La page générant les données sera faite ici en php, mais elle aurai très bien put etre en asp.

Fichier ajax.js

Pour déclarer ce qui se produit lorsque la réponse est reçue:

Pour lancer effectivement la requête serveur, il faut appeler les méthodes:

Pour des raisons de sécurité, il n'est pas possible d'appeler des pages sur un autre domaine. Les données doivent être sous la forme d'une chaîne de requête : nom=valeur&autrenom=autrevaleur&ainsi=desuite

Pour envoyer des données avec la méthode POST, il faut changer le type MIME:

Quand la réponse est reçu, la fonction déclarée doit vérifier l'état de la requête. Si cet état a une valeur de 4, cela signifie que la réponse du serveur a été reçue dans son intégralité et qu'elle peut maintenant être traitée. La 2nd vérification concerne le code d'état de la réponse HTTP du serveur (200=OK).

Pour accéder à ces données la fonction dispose de deux méthodes: * httpRequest.responseText — chaîne de texte * httpRequest.responseXML — objet XMLDocument qui se traite avec des fonctions DOM de JavaScript.

Fichier cp.html

Fichier dpt.xls

Si vous envoyez une requête vers un bout de code dynamique qui renvoie du XML, plutôt que vers un fichier XML statique, vous devez définir certains en-têtes de réponse pour que votre page fonctionne; Content-Type: application/xml

Fichier ville.php

Fichier dpt.php

CHAPITRE 5 - jQuery

5.1. Fonctionnement

jQuery est une librairie Javascript libre qui fait interagir javascript et HTML, et dont l'intérêt est de simplifier les commandes les plus utilisées. Permet de:

• parcourir et de modifier le DOM,
• d'attribuer des actions à des évènements,
• d'implémenter des effets visuels / animations,
• de manipuler le CSS, d'implémenter Ajax facilement, etc.

Sélecteurs d'élément :

jQuery utilise des sélecteurs CSS pour sélectionner des éléments HTML.

$(this) Élément HTML actuel 
$("p") sélectionne tous les éléments  <p>.
$("p.intro") sélectionne tous les éléments <p> de classe = « intro »
$("p#intro") sélectionne tous les éléments  <p> avec l'id = « intro ».
$("p#intro:First") Le premier élément  <p> avec l'id = « intro »
$(".intro") Tous les éléments de classe = « intro »
$("#Intro") Le premier élément avec id = « intro » 
$("ul li:first") Le premier élément <li>  de  chaque liste <ul> 
$("div #intro .head") elmts de classe = « head » dans un élément <div> avec l'id

^ element qui commencent par
$ elements qui terminent par
* element contenant

Sélecteurs d'attribut :

jQuery utilise les expressions XPath pour sélectionner les éléments ayant des attributs donnés.

$("[href]") sélectionner tous les éléments avec un attribut href.
$("[href='#']") sélectionner tous les éléments avec une valeur de href à "#".
$("[href!='#']") sélectionner elmts avec un attribut href différent de "#".
$("[href$='.jpg']") sélectionner elmts avec href qui se termine par ".jpg".

Sélecteurs CSS :

Les sélecteurs CSS jQuery permet de modifier les propriétés CSS pour les éléments HTML. Ex: modifie la couleur d'arrière-plan des éléments p :

Sélecteur personnalisé :

désactiver un bouton:

désactiver des champs:

jQuery possèdes des fonction de manupulation du DOM : - append, appendTo pour ajouter un élément enfant à la fin d'un élément - prepend, prependTo pour ajouter un élément enfant au début d'un élément - remove pour supprimer un élément du DOM ex : $('.dup').remove() - wrap pour encapsuler un élément dans un autre - hasClass, addClass, toggleClass, removeClass pour ajouter / inverser une class

jQuery permet de parcourrir des éléments sélectionnés du DOM, ou les éléments enfants d'un div :

jQuery permet de definir des évenements : click, changemouseenter, mouseleave...

jQuery permet d'attacher des événements a un type d'élement, ainsi l'action est déclenché même sur les nouveaux éléments ajoutés dans le DOM.

$('#table tbody').on('click', 'tr', function (e) { ... });

réf: jQuery c'est quoi?
https://creersonsiteweb.net/page-apprendre-jquery
réf: les sélecteurs jQuery
http://www.oujood.com/jquery/selecteurs-jQuery.php

5.2. Ajax et Formulaires

jQuery permet de factoriser le code en appliquant a tout un ensemble d'élement un comportement particulier. En voici un exemple pratique pour le datePicker :

réf: How to Use jQuery Validator for Your Form Validation
https://www.solodev.com/blog/web-design/how-to-use-jquery-validator-for-your-form-validation.stml

5.3. DataTable

Pour utiliser DataTables, vous devez tout d'abord inclure, dans le fichier html, les bibliothèques jQuery et DataTables dans l'en-tête de la page html (head), ainsi que le fichier de style CSS de DataTables :

• https://code.jquery.com/jquery-3.5.1.js
  
• https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js
  
• https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css
  

Le tableau html doit contenir l'élément thead, et l'élément tbody : Eventuellement utiliser un style CSS .tableHeader {display: table-row-group;}

Dans le javascript, associez DataTables au tableau dont l'id a la valeur tab :

L'option dom de DataTables permet de définir les éléments de contrôle du tableau qui seront affichés ainsi que leur ordre dans la page. Ci dessous, les contrôles disponibles pour cette option :

• l Affiche le select indiquant le nombre de lignes à afficher par page
• f Affiche le champ permettant de filtrer les données du tableau
• i Affiche des informations
• p Affiche le menu de pagination
• t Indique l'emplacement du tableau par rapport aux contrôles
• r Affiche un message de traitement

Par défaut la valeur de dom est lftrip. Il est possible d'utiliser plusieurs fois la même lettre pour dupliquer un contrôle.

Quelques options de base des DataTables :

• pagingType: "simple", lengthMenu: [5, 10, 15], pageLength: 3
• order:[[1,'desc'], [0, 'asc']]
• fixedColumns: true
• scrollY = 20vh et scrollCollapse: true pour limiter la hauteur du tableau.
• scrollX = true: pour etiter l'extention du tableau.
• "lengthMenu": [20, 50, 100, 500, 1000],
• "lengthChange": true,

L'option columns, permet entre autre de définir le type de la colonne. Le type de la colonne sera pris en compte pour le tri. Une cellule peut contenir des éléments html (dont des input). Pour ignorer les balises html du trie, il faut donner le type html. Quelques options de base des Colonnes :

• width
• visible
• render

Le style du tableau est contrôlé par une ou plusieurs classes de style prédéfinies (voir tableau ci-après), placées dans l'attribut class de l'élément table :

• cell-border Encadre les cellules
• row-border Encadre les lignes
• stripe Alterne les couleurs de fond des lignes
• hover Change la couleur de fond de la ligne survolée par la souris
• order-column Change la couleur de fond des colonnes triables
• display Raccourci pour stripe, hover, row-border, order-column
• nowrap Désactive le passage à la ligne dans une cellule
• compact Diminue les espaces dans les cellules

DataTables supporte les thèmes bootstrap, jQuery UI, ThemeRoller UI. Pour personnaliser le thème par défaut on a l'interface de création de thème :
https://www.datatables.net/manual/styling/theme-creator
. Il y a une grande variétés de add-ons (TableTools, FixedHeader, KeyTable…), La possibilité de copier, imprimer ou d'exporter votre tableau sous format PDF, CSV ou Excel.

DataTables est livré avec une API étendue, qui est utilisée pour manipuler les informations sur les DataTables sur une page. Une fois l'objet défini, vous pouvez appeler n'importe laquelle des fonctions de l'API sur cet objet. L'API est accessible de 3 manières :

pour affecter les données d'une datatable:

C'est le code pour filtrer les Datatables [1.10.7] par valeur par programmation, vous pouvez le trouver sur la documentation officielle.

C'est le code pour obtenir la valeur par la recherche précédente. Cette approche est utile lorsque le cache est actif ( "stateSave": true ), et que vous devez connaître la valeur de recherche précédente après avoir rechargé la page.

Utilisation de la fonction API Datatables intégrée fnFilter : Nous passons deux paramètres à cette méthode - la chaîne de requête et l'index de la colonne à filtrer. Dans ce cas, la valeur de la case à cocher sera «Checked» si elle est sélectionnée dans l'interface utilisateur et l'index de la colonne contenant les cases à cocher est 8. Nous passons donc «Checked», et 8 en tant que pamaeters à la fonction fnFilter. On peut trouver sur d'anciennes version de DataTable la méthode search à la place de la méthode fnFilter.

Quand une dataTable est réactualisée, elle reviens sur la page 1. Pour garder sélectionné le numéro de page et de revenir après l'actualisation.

Ou dans les tables de données 1.10 : table.row(index).data(data).draw(false); Ou avec ajax: $('#YOUR_TABLE_ID').DataTable().ajax.reload(null, false);

réf: DataTables : interagir avec les tableaux HTML
https://connect.ed-diamond.com/GNU-Linux-Magazine/glmf-189/datatables-interagir-avec-les-tableaux-html
réf: datatables - RIP Tutorial
https://riptutorial.com/Download/datatables-fr.pdf
réf: Garder sélectionné le numéro de page après le rappel
https://askcodez.com/datatables-garder-selectionne-le-numero-de-page-apres-le-rappel.html

5.4. DataTable : Chargement avec un Appel Ajax

La propriété ajax de la dataTable, permet d'exécuter un appel ajax directement pour alimenter la table. deferLoading: 0, permet de différer le chargement de la table, après le choix de filtres de recherche par exemple.

Voici un exemple d'appel ajax

réf: Create Json string From datatab
https://datatables.net/forums/discussion/36669/create-json-string-from-datatable-selected-selected-row

5.5. DataTable : Edition

Le controller du back end renvoit au format Json un tableau d'objects. Ce type d'objet inclut différents formats de type dateTime par exemple.

public JsonResult LoadDocuments(int patientId)

Le HTML

Le javascript

Remarquez la fonction de render pour le champ de type Date. Le type 'display', permet de formater pour l'affichage, l'autre type, c'est le format pour le trie. Ci dessous une fonction javascript qui permet de faire la même chose, de manière plus condensée :

Exemple pratique d'un evennement sur un champ ckeckbox dans un dataTable :

5.6. DataTable : Filtrage et total de colonne

Voici un exemple pratique du filtrage d'une DataTable sur deux colonnes, et avec un calcul du total :

javascript :