-- phpMyAdmin SQL Dump -- version 4.9.7 -- https://www.phpmyadmin.net/ -- -- Hôte : sql25:3306 -- Généré le : Dim 10 jan. 2021 à 20:40 -- Version du serveur : 10.3.25-MariaDB-1:10.3.25+maria~stretch-log -- Version de PHP : 7.3.19-1~deb10u1 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET AUTOCOMMIT = 0; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Base de données : `p4547_10` -- -- -------------------------------------------------------- -- -- Structure de la table `extended_cards` -- CREATE TABLE `extended_cards` ( `id` int(11) NOT NULL, `id_category` int(11) NOT NULL, `id_user` int(11) UNSIGNED NOT NULL, `title` varchar(255) NOT NULL, `slug` varchar(255) NOT NULL, `content` text NOT NULL, `owner` varchar(255) NOT NULL, `date_native` datetime NOT NULL, `year_native` varchar(255) NOT NULL, `licence` varchar(255) NOT NULL, `os_supported` varchar(255) NOT NULL, `langage` varchar(255) NOT NULL, `sgbdr` varchar(255) NOT NULL, `number_of_users` varchar(255) NOT NULL, `pdm` varchar(255) NOT NULL, `features` text NOT NULL, `image` varchar(255) NOT NULL DEFAULT '900x300.png', `last_news` text NOT NULL, `links` text NOT NULL, `version` varchar(255) NOT NULL, `views` int(11) NOT NULL, `draft` text NOT NULL, `bin` text NOT NULL, `date_creation` datetime NOT NULL, `date_update` datetime NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; -- -- Déchargement des données de la table `extended_cards` -- INSERT INTO `extended_cards` (`id`, `id_category`, `id_user`, `title`, `slug`, `content`, `owner`, `date_native`, `year_native`, `licence`, `os_supported`, `langage`, `sgbdr`, `number_of_users`, `pdm`, `features`, `image`, `last_news`, `links`, `version`, `views`, `draft`, `bin`, `date_creation`, `date_update`) VALUES (1, 1, 18, 'WordPress', 'wordpress', '

WordPress est le CMS le plus populaire dans le monde. Il permet de créer des blogs, mais également des sites web très complets, comme par exemple une boutique en ligne, grâce à de nombreux plugins optionnels.

', '', '2003-05-27 00:00:00', '', 'GNU GPL version 2', '', 'PHP', 'MySQL', '', '34.7% des sites web', 'Publications (blog)\r\nThèmes\r\nExtensions / Plugins\r\nAdministration du site', '2020-03-27-15-43-49-wordpress.png', 'La version 5.0 sortie en 2018 met en place une nouveauté essentielle : l’apparition de l\'éditeur Gutenberg. Plus moderne et intuitif, cet éditeur fonctionne par blocs de contenus. Cet éditeur est construit sur Javascript, la librairie React, et l\'API Wordpress REST.', 'Français : fr.wordpress.org\r\nAnglais : wordpress.org', '5.3.2', 97, 'no', 'no', '2020-03-27 15:40:18', '2020-04-25 16:55:26'), (2, 1, 18, 'Joomla', 'joomla', '

Joomla est le 2ème CMS le plus connu au monde, après WordPress. Historiquement, Joomla s\'est toujours adressé à des développeurs (en se basant sur des composants, des plugins, des modules) , tandis que son concurrent, WordPress, s\'adressait davantage au grand public à l\'origine. Au fil du temps, WordPress a fini par devenir plus consistant et plus complexe, avec la multiplication des extensions qui complètent l\'offre de base (la fonction blogging) de WordPress.

', '', '2005-09-15 00:00:00', '', 'GNU GPL', '', 'PHP', 'MySQL', '', '2.7% des sites web', 'Articles, Composants, Plugins, Modules, Thèmes, Administration du site...', '2020-03-27-16-01-44-joomla.jpg', 'Le CMS est actuellement en version 3.9 et prépare sa refonte complète pour sa version 4.0 qui sortira dans les tous prochains mois.', '', '3.9.16', 80, 'no', '', '2020-03-27 17:01:45', '2020-04-25 16:55:08'), (3, 1, 18, 'Font Awesome', 'font-awesome', '

Font Awesome est un outil permettant d\'afficher des icônes sur un site web. Tout comme Google Fonts, il est codé en CSS. D\'abord sous forme de fichier CSS, Font Awesome est désormais proposé en fichier JavaScript, dont l\'adresse est à intégrer dans la section HEAD de la page. Font Awesome a été créé en 2012 pour être intégré à Bootstrap. A noter : l\'utilisation de Font Awesome fait appel aux balises sur les sites web, qui ne sont pas conseillées si on souhaite respecter les contraintes liées à l\'accessibilité des sites web. Il est préférable de les remplacer par les balises qui respectent les normes d\'accessibilité.

', 'Dave Gandy', '2012-08-21 00:00:00', '', 'SIL OFL 1.1 / CC BY 4.0', '', 'CSS, LESS et SASS', '', '', '20%', 'Police d\'écriture, Outil d\'icônes', '2020-03-27-16-23-03-font-awesome.jpg', 'Depuis 2017, avec la sortie de la version 5 de Font Awesome, deux versions sont proposées : une version gratuite, et une version Pro, payante. La version gratuite contient 1535 icônes et la version payante 7020.', '', '5.13.0', 86, 'no', '', '2020-03-27 17:23:04', '2020-04-26 15:15:48'), (4, 1, 18, 'Google Fonts', 'google-fonts', '

Google Fonts est une service d\'hébergement de polices de caractères créé en 2010. Ce service, créé par Google, permet d\'afficher des polices de caractères spécifiques sur un site web, grâce à un fichier CSS disponible sur le site de Google Fonts. Les développeurs peuvent faire appel à ce fichier CSS en mode \"embed\", ou bien en téléchargeant le fichier CSS pour l\'intégrer ensuite en local sur le site. Il est préférable de l\'utiliser en mode \"embed\" pour ne pas ralentir l\'affichage du site.

', '', '0000-00-00 00:00:00', '2010', 'SIL Open Font License 1.1 / Apache License', '', 'CSS', '', '', '', 'Police d\'écriture', '2020-03-27-17-47-27-google-fonts.jpg', '960 polices de caractères gratuites. Polices populaires : Open Sans, Roboto, Lato, Slabo, Oswald and Lobster.', '', '', 92, 'no', '', '2020-03-27 17:47:27', '2020-04-25 16:54:20'), (5, 1, 18, 'Github', 'github', '

Github est un service d\'hébergement web utilisant le logiciel de gestion de versions Git. Avec Github, les développeurs peuvent contrôler le versioning de leurs projets web.

', '', '2008-04-10 00:00:00', '', '', '', 'Ruby On Rails / Erlang', '', '37 Millions', '', 'Hébergement de versions Git, recensement des bugs (issues), gestion des demandes de Pull (Pull Requests), Wiki (documentation, roadmap), sécurité...', '2020-04-05-10-57-53-github.png', 'Le 4 Juin 2018, GitHub annonce son acquisition par Microsoft pour 7,5 milliards de dollars.', '', '', 83, 'no', '', '2020-04-05 10:57:53', '2020-04-26 15:10:54'), (6, 1, 18, 'Git', 'git', '

Git est un logiciel de gestion de versions décentralisé. A ne pas confondre avec Github, même si les 2 sont liés. Git a été créé en 2005. Github a été créé en 2008 et s\'appuie sur la technologie Git.

\r\n

Git possède deux structures de données : une base d\'objets et un cache de répertoires. Il existe cinq types d\'objets :

\r\n

-l\'objet blob (pour binary large object désignant un ensemble de données brutes), qui représente le contenu d\'un fichier ;

\r\n

- l\'objet tree (mot anglais signifiant arbre), qui décrit une arborescence de fichiers. Il est constitué d\'une liste d\'objets de type blobs et des informations qui leur sont associées, tel que le nom du fichier et les permissions. Il peut contenir récursivement d\'autres trees pour représenter les sous-répertoires ;

\r\n

- l\'objet commit (résultat de l\'opération du même nom signifiant « valider une transaction »), qui correspond à une arborescence de fichiers (tree) enrichie de métadonnées comme un message de description, le nom de l\'auteur, etc. Il pointe également vers un ou plusieurs objets commit parents pour former un graphe d\'historiques ;

\r\n

- l\'objet tag (étiquette) qui est une manière de nommer arbitrairement un commit spécifique pour l\'identifier plus facilement. Il est en général utilisé pour marquer certains commits, par exemple par un numéro ou un nom de version (2.1 ou bien Lucid Lynx);

\r\n

- l\'objet branch (branche) qui contient une partie de l\'avancement du projet. Les branches sont souvent utilisées pour avancer dans une partie du projet sans impacter une autre partie.

', '', '2005-04-07 00:00:00', '', 'GNU GPL version 2', '', 'C, Shell Unix, Perl, Tcl, Python et C++', '', '12 Millions', '', '', '2020-04-06-13-21-20-git.png', 'La version 2.26.2 est sortie le 20 Avril 2020.', '', '2.26.2', 142, 'no', '', '2020-04-06 13:21:20', '2020-04-26 15:11:27'), (7, 1, 18, 'Atom', 'atom', '

Atom est un éditeur de texte. Il supporte de nombreux langages de programmation :

\r\n

C, C++, C#, Clojure, COBOL, CSS, CoffeeScript, D, Markdown, Go, HTML, Java, Javascript, JSON, Julia, Less, Make, Mustache, Objective-C, Perl, PHP, Python, Racket, Rust, Ruby on rails, Sass, Scala, script shell, SQL, TOML, TypeScript, XML, YAML

', '', '2014-02-26 00:00:00', '', 'MT Licence', 'macOS, GNU/Linux et Windows', 'JavaScript, CoffeeScript, CSS, C++, HTML et Node.js', '', '', '', '', '2020-04-06-13-38-54-atom.png', 'Rien à signaler... La dernière version stable, version 1.45.0 est sortie le 10 Février 2020.', '', '1.45.0', 96, 'no', '', '2020-04-06 13:38:22', '2020-04-26 15:09:56'), (9, 1, 18, 'Open Graph', 'open-graph', '

Open Graph est un protocole. Il permet d\'optimiser le contenu d\'une page web afin que les utilisateurs puissent la partager sur les principaux réseaux sociaux Facebook, Twitter, LinkedIn... Ce protocole facilite le partage depuis un ordinateur, le navigateur d\'un smartphone ou une application mobile.

', 'Facebook', '0000-00-00 00:00:00', '2010', '', '', '', '', '', '', 'Open Graph consiste en une série de meta tags que l\'on peut insérer dans la partie HEAD de la page HTML.', '2020-04-26-15-24-38-open-graph.jpg', 'Rien de nouveau sous le soleil...', '', '', 216, 'no', '', '2020-04-26 15:24:38', '2020-06-13 15:43:36'), (10, 1, 18, 'Twitter Cards', 'twitter-cards', '

Par le terme de \"Twitter Cards\", on entend 2 choses :

\r\n

-les cards \"Twitter\" permettant d\'afficher un tweet sur Twitter

\r\n

-les balises \"Twitter Cards\" insérées dans les balises meta d\'un site web, afin que Twitter puisse afficher un tweet correctement

\r\n

Les Cards \"Twitter\"

\r\n

Vous l\'aurez remarqué : lorsque vous consultez Twitter, les tweets ne s\'affichent pas tous de la même façon. Certains sont de simples textes (phrases courtes...), alors que d\'autres tweets sont enrichis de photos, de vidéos...

\r\n

Concernant les tweets enrichis, on distingue 2 catégories :

\r\n

-le tweet enrichi depuis Twitter : l\'utilisateur poste un tweet en y ajoutant une photo, ou une vidéo. Dans ce type de cas, le tweet ne fait appel à aucun site web extérieur. L\'utilisateur insére des photos ou des vidéos qui sont présents sur son device (mobile, PC...)

\r\n

-le tweet enrichi grâce à un site tiers : dans ce cas, lorsque l\'utilisateur poste un lien menant à un site web (par exemple un lien vers un article de presse), Twitter insère automatiquement des éléments pour enrichir le tweet (le plus souvent il s\'agit par exemple d\'un aperçu photo d\'un article de presse posté sur un site web. C\'est dans ce cas de figure qu\'interviennent les balises meta \"Twitter Cards\".

\r\n

Plusieurs types de Twitter Cards existent :

\r\n

- Summary Card : elle affiche un aperçu du site web de référence. L\'aperçu contient le titre ou bien une description du document. On y voit aussi une vignette d\'aperçu.

\r\n

- Summary Card avec image large : c\'est la même chose, mais cette fois avec une photo bien plus large qui occupe toute la largeur du fil Twitter.

\r\n

- Photo Card : La Card ne contient qu\'une photo. Le contenu standard du tweet intégre également l\'auteur, la source et un lien externe.

\r\n

- Gallery Card.  Seule différence avec la Photo Card : cette fois, plusieurs photos sont affichées.

\r\n

- App Card. Elle permet d\'afficher une application Android ou iOS. La card contient une courte description (celle présente dans l\'App Store), ainsi qu\'un lien de téléchargement de l\'application.

\r\n

- Player Card. Comme on peu le deviner, ce type de Card affiche des vidéos ou des fichiers audio.

\r\n

- Product Card. Elle est destinée à ceux voulant faire la promotion d\'un produit. Elle affiche un produit avec 2 caractéristiques définies par l\'utilisateur. Il peut s\'agir de la catégorie du produit, du prix...

\r\n

 

\r\n

Les balises meta \"Twitter Cards\"

\r\n

Afin d\'afficher correctement des Twitter Cards sur Twitter, il est nécessaire d\'ajouter des balises meta Twitter Cards sur le site de référence.

\r\n

3 balises sont obligatoires :

\r\n

 

\r\n

La 1ère balise, \"twitter:card\" correspond à la description courte du site web

\r\n

Les 2 autres \"twitter:site\" et \"twitter:creator\" correspondent au compte Twitter de l\'utilisateur.

\r\n

A noter : si le site web contient les balises Open Graph suivantes : og:type ; og:title ; og:description sont présentes et si la balise twitter:card est absente, alors le summary sera quand même affiché sur Twitter. Lorsque Twitter crawle le site web, il vérifie si des balises Open Graph sont présentes.

\r\n

Voici quelques exemples de balises Twitter :

\r\n

twitter:description

\r\n

Cette balise doit contenir la description de l\'article. Elle ne doit pas dépasser 200 caractères.

\r\n

twitter:title

\r\n

Comme son nom l\'indique, celle-ci contient le titre. Limitée à 70 caractères.

\r\n

twitter:image

\r\n

URL de l\'image à insérer dans la card. A noter : l\'image doit faire moins de 5 Mo. Les formats supportés sont : JPG, PNG, WEBP et GIF. Dans le cas d\'un GIF, seule la première frame est affichée. Le format SVG n\'est pas supporté.

\r\n

twitter:image:alt

\r\n

Description de l\'image. Maximum autorisé : 420 caractères.

\r\n

twitter:player

\r\n

URL du player vidéo ou audio.

\r\n

twitter:player:width

\r\n

Largeur en pixels du player.

\r\n

twitter:player:height

\r\n

Hauteur en pixels du player

\r\n

A quoi ça sert ?

\r\n

Les Twitter Cards ont un intérêt évident : plus le tweet est enrichi (présence d\'une description, d\'une vignette, d\'une vidéo...), plus le lien aura des chances d\'être cliqué, et ainsi il permettra de générer du traffic sur le site web. Attention cependant : certains éléments comme les vidéos, ne vont pas forcément générer du traffic, car dans le cas des vidéos, l\'utilisateur peut se contenter de visionner intégralement la vidéo sur Twitter sans visiter le site web.

', 'Twitter', '0000-00-00 00:00:00', '', '', '', '', '', '', '', 'SEO / Réseaux Sociaux', '2020-06-13-15-38-36-twitter-cards.jpg', 'Rien à signaler.', '', '', 167, 'no', '', '2020-06-13 14:04:58', '2020-06-13 15:44:18'), (11, 2, 18, 'HTML', 'html', '

HTML signifie : Hypertext Markup Language

\r\n

Le langage HTML est constitué :

\r\n

- de balises (tags en anglais)

\r\n

- d\'attributs (attributes)

\r\n

- d\'éléments (ce qui se trouve entre la balise ouvrante < et la balise fermante >).

\r\n

Structure d\'une page Web

\r\n

Une page HTML est constituée au minimum :

\r\n

- du doctype (pour indiquer au navigateur que le document est de type HTML)

\r\n

- des balises qui elles-mêmen renferment 2 autres balises : et : ces 3 balises  sont les balises de premier niveau.

\r\n

La section Head

\r\n

La balise head renferme plusieurs balises qui sont interprétées par le navigateur, mais dont le contenu n\'est pas affiché sur la page.

\r\n

La section Head contient de nombreuses balises, parmi lesquelles nous trouvons : l\'encodage de la page (le plus souvent UTF-8), le titre de la page (balise title) . On y trouve également des balises meta, des liens vers des feuilles de style CSS, et parfois des scripts en Javascript.

\r\n

Les différentes balises meta et title jouent un rôle primordial pour le référencement.

\r\n

La section Body

\r\n

Elle contient au contraire tout ce qui sera affiché sur la page web dans le navigateur. Il existe de nombreux types de balises :

\r\n

- les balises sectionnantes (permettant de diviser la page en plusieurs sections, comme header, nav, section, footer, article. Elles sont primordiales car elles donnent des indicationx aux moteurs de recherche qui parcourent les pages web).

\r\n

- les balises de structuration du texte (comme les headings, les blockquotes, les paragraphes)

\r\n

- les balises de listes (numérotées ou non)

\r\n

- les balises de tableau (désormais déconseillées pour construire une page web, mais parfois très utiles pour construire le template d\'une newsletter)

\r\n

- les balises de formulaire (form, input, textarea...)

\r\n

- les balises génériques (div, span...)

\r\n

Mode d\'affichage des éléments HTML

\r\n

Il existe également une autre façon de distinguer certains types de balises.

\r\n

On parle parfois en effet de :

\r\n

- balises \"inline\" qui permettent de définir l\'affichage d\'un élément sans retour à la ligne. Parmi les balises inline, nous avons par exemple les balises  span, a, strong, img ...

\r\n

- balises \"blocks\": elles occupent toute la largeur disponibles. Lorsque 2 éléments de type \"blocks\" se suivent, ils sont disposés par défaut l\'un en dessous de l\'autre. Nous avons par exemple les balises div, h1, p, ul, form, table, blockquote.

\r\n

-de balises \"invisibles\" : elles ne s\'affichent pas sur la page, comme par exemple la balise meta, inclue dans la partie head de la page.

', 'Web Hypertext Application Technology Working Group', '0000-00-00 00:00:00', '1992', '', '', 'HTML', '', '', '', 'HTML permet d\'écrire de l\'hypertexte. Il permet de structurer sémantiquement et logiquement le contenu des pages web, mais aussi d\'inclure des éléments multimédia tels que des images ou des vidéos.', '2020-06-13-15-47-53-html.jpg', 'Actuellement, la dernière version du HTML est le HTML 5. Mais les membres du groupe de travail du W3C veulent créer un HTML Living Standard, une version du HTML qui n\'aurait pas de numéro de version. Ainsi le HTML serait en constante évolution. ', '', '5.2', 164, 'no', '', '2020-06-13 15:46:06', '2020-06-13 19:00:46'), (12, 2, 18, 'CSS', 'css', '

Le CSS (Cascading Styles Sheets) est un langage informatique permettant de décrire le style, la présentation d\'un document HTML. Là où le HTML va se contenter de structurer un document, le CSS va prendre en charge le style, la mise en page d\'une page web.

\r\n

En réalité, le HTML n\'a jamais eu besoin du langage CSS pour être exécuté sur un navigateur web. Cependant, le CSS est devenu rapidement une nécessité afin de séparer ce qui relève purement et simplement de la structure d\'une page web (c\'est le rôle du HTML), de ce qui relève de la mie en page (formes, couleurs, polices de caractères....).

\r\n

Le style d\'une page web peut être défini de 3 façons :

\r\n

-soit directement dans la page HTML (avec par exemple la balise style, située dans la partie HEAD de la page)

\r\n

-soit en mode inline (exemple : utilisation de la balise strong pour mettre en gras un texte)

\r\n

-soit grâce à un fichier CSS, référencé dans la section HEAD de la page.

\r\n

Il est évident qu\'il est préférable d\'utiliser la 3ème méthode. En effet : imaginons qu\'un développeur souhaite modifier complètement le design d\'un site web, sans pour autant modifier la structure des pages web. C\'est là que le fichier CSS a son intérêt : le développeur pourra modifier le style du site en ne modifiant que le fichier CSS du site. Ce sera d\'autant plus utile si le site web contient de très nombreuses pages.

\r\n

Il est possible également qu\'une page web ou qu\'un site fasse appel à plusieurs fichiers CSS. Par exemple, il est fréquent de voir un fichier CSS différent pour chaque taille d\'écran, afin de rendre un site 100% responsive.

\r\n

Par ailleurs, le CSS est devenu de plus en plus puissant au fil des années. Désormais, le CSS permet d\'afficher par exemple des animations, ou des graphiques particulièrement complexes.

\r\n

Les sélecteurs

\r\n

Le principe du CSS repose sur la sélection : on sélecte un élément (par exemple un type de balise, ou bien une balise possédant un identifiant) pour lui appliquer un style. On pourra par exemple appliquer une couleur rouge pour tous les titres de type H3.

\r\n

Box Model

\r\n

Tous les élements HTML (une image, un paragraphe, un formulaire...) peut être considéré comme une boîte. Pour définir cette boîte, on utilise 4 élements :

\r\n

- Margin (Marge - l\'espace qui est en dehors de la bordure)

\r\n

- Border (Bordure - la bordure qui est autour du padding)

\r\n

- Padding (Ecart - l\'écart entre le contenu et la bordure)

\r\n

- Content (Contenu - par exemple le texte et les images)

\r\n

Grid

\r\n

Grid est un principe CSS permettant d\'afficher un Layout en mode \"grille\". Le développeur peut utiliser ce principe pour positionner des éléments dans une grille, en faisant varier par exemple la taille de chaque case, ou l\'orientation de chaque rangée, etc...

\r\n

Pour afficher un layout en mode Grid, il est nécessaire d\'insérer l\'instruction display: grid

\r\n

Flexbox

\r\n

Auparavant, nous avions 4 formats de Layouts possibles :

\r\n

- Block, pour les sections d\'une page

\r\n

- Inline, pour le texte

\r\n

- Table, pour afficher un tableau

\r\n

- Positioned, pour positionner explicitement un élément.

\r\n

L\'arrivée du concept du Flexbox facilite la création de layout, sans avoir à utiliser les notions de float ou de position.

\r\n

Pour activer la notion de flexbox sur un élément, il est nécessaire d\'appliquer un affichage flex avec l\'instruction display: flex

\r\n

Les proprités d\'un conteneur Flex sont les suivantes :

\r\n

flex-direction

\r\n

flex-wrap

\r\n

flex-flow

\r\n

justify-content

\r\n

align-items

\r\n

align-content

', 'W3C', '1996-12-17 00:00:00', '', '', '', 'CSS', '', '', '', 'Style / Mise en page', '2020-06-13-16-15-59-css.jpg', 'Depuis 2010, CSS est censé évoluer vers sa version 4. Mais suite au succès de HTML 5 couplé avec CSS 3, il est possible que CSS 4 ne voit jamais le jour, où bien que la notion de version (5 pour HTML et 3 pour CSS) disparaisse, pour devenir des langages en constante évolution.', '', '3', 193, 'no', '', '2020-06-13 16:15:59', '2020-06-13 19:00:18'), (13, 2, 18, 'Javascript', 'javascript', '

Avec le CSS et le HTML, le Javascript constitue le 3ème langage essentiel en front-end. Créé en 1995 par Brendan Eich, Javascript a été standardisé sous le nom d\'ECMAScript.

\r\n

ECMAScript connaît 3 implémentations : celles de Mozilla (à l\'origine du navigateur Firefox), celle de Microsoft sous le nom de JScript, et celle d\'Adobe Systems, sous le nom d\'ActionScript.

\r\n

Là où CSS permet de définir le style d\'une page web, Javascript est un langage très puissant, permettant de rendre les pages web interractives. Javscript est également utilisé pour un grand nombre d\'applications web.

', 'Brendan Eich', '1995-12-04 00:00:00', '', '', '', 'Javascript', '', '', '', 'Fonctionnalités...', '2020-06-13-18-45-17-javascript.jpg', 'Aux dernières news...', '', '1.8.5 (ECMA-262) - ECMAScript 2019', 182, 'no', '', '2020-06-13 18:45:17', '2020-06-13 19:00:55'), (14, 3, 18, 'DNS', 'dns', '

DNS signifie : Domain Name System, c\'est-à-dire, \"le système de noms de domaines\".  Il s\'agit d\'un service IT qui fait correspondre un nom de domaine internet avec une adresse IP ou un autre enregistrement. Ce service est apparu en 1983.

\r\n

Adresses IPv4 et IPv6

\r\n

Sur internet, chaque serveur (hôte) possède une adresse IP (IPv4 ou IPv6) :

\r\n

- En IPv4, les adresses IP ont le format suivant : xxx.xxx.xxx.xxx

\r\n

Chaque section (représentée par xxx) est un nombre compris entre 0 et 255. Problème : vu le nombre de serveurs / machines présents dans le monde, le nombre d\'IP possibles fut très vite atteint. Ce fut le cas en Février 2011. Il a donc été nécessaire d\'inventer un nouveau format d\'IP : IPv6

\r\n

- En IPv6, les adresses IP ont un format beaucoup plus conséquent : xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx

\r\n

Non seulement le format est plus long (on passe de 12 à 32 caractères), mais en plus, chaque bloc correspond à une valeur allant de 0000 à FFFF.

\r\n

Nécéssité du Nom de domaine

\r\n

Comme on l\'a vu, à chaque DNS correspond une adresse IP. Pour accéder à un site web, nous pouvons très bien y accéder grâce à une adresse IP. Evidemment, pas évident pour le commun des mortels de se rappeler de tous les sites web qu\'il préfère en retenant leur adresse IP.

\r\n

D\'où la nécessité d\'utiliser un raccourci. Ce raccourci, c\'est le nom de domaine. Par exemple, le nom de domaine apple.com permet d\'afficher le site web qui se trouve derrière l\'adresse IP  17.142.160.59

\r\n

Structure du Nom de domaine

\r\n

Chaque nom de domaine contient une racine : le point.

\r\n

Un nom de domaine contient au moins 3 éléments :

\r\n

- 1 label (par exemple apple)

\r\n

- 1 point .

\r\n

- 1 TLD (l\'extension, par exemple com ou org)

\r\n

Les TLD

\r\n

Le TLD (Top Level Domain), c\'est l\'extension. Dans le nom de domaine, c\'est ce qui arrive en premier, en partant par la droite.

\r\n

Il existe 2 types de TLD :

\r\n

-les TLD génériques (com, org ...)  correspondant à une catégorie : com pour commerce, org pour organisation

\r\n

-les TLD nationaux (fr, de, us ...) correspondant à un pays.

\r\n

Le label

\r\n

Si on reprend notre exemple, apple.com, le label correspond ici à \"apple\"

\r\n

En réalité, dans cet exemple, apple est un sous-domaine de .com

\r\n

Les sous-domaines

\r\n

Mis à part le label, il existe d\'autres sous-domaines. Par exemple, dans l\'adresse www.apple.com, les www sont un sous-domaine d\'apple.

\r\n

Mais le domaine peut posséder plusieurs sous-domaines. Par exemple l\'adresse https://support.apple.com contient le label apple, et ce label a pour sous-domaine support. Cette URL est utilisée pour héberger la page support de la société Apple.

\r\n

Serveurs DNS

\r\n

Pour qu\'un nom de domaine affiche une page web, il est nécessaire d\'utiliser des serveurs DNS. En général, chaque nom de domaine pointe vers au moins 2 serveurs : un serveur primaire, et un serveur secondaire. Mais il peut y en avoir plus. Si le premier serveur est en panne, alors c\'est le serveur secondaire qui est appelé.

\r\n

Fully Qualified Domain Name

\r\n

Fully Qualified Domain Name (Nom de domaine pleinement qualifié) : c\'est quoi  ?

\r\n

Il s\'agit du nom de domaine écrit de façon absolue, suivi par un point. Par exmple : www.apple.com. ou www.total.com.

\r\n

Chaque label du domaine (par exemple www ou bien apple) ne peut dépasser les 63 caractères, et le FQDN (Fully Qualified Domain Name) , ne peut dépasser les 253 caractères.

\r\n

 

', 'Jon Postel et Paul Mockapetris', '0000-00-00 00:00:00', '1983', '', '', '', '', '', '', '', '2020-06-22-22-37-36-dns.jpg', '', '', '', 181, 'no', '', '2020-06-22 22:37:36', '2020-06-22 23:48:33'); -- -- Index pour les tables déchargées -- -- -- Index pour la table `extended_cards` -- ALTER TABLE `extended_cards` ADD PRIMARY KEY (`id`), ADD KEY `id_user` (`id_user`), ADD KEY `category` (`id_category`); -- -- AUTO_INCREMENT pour les tables déchargées -- -- -- AUTO_INCREMENT pour la table `extended_cards` -- ALTER TABLE `extended_cards` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=15; COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;