-- 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', '<p>WordPress est le CMS le plus populaire dans le monde. Il permet de cr&eacute;er des blogs, mais &eacute;galement des sites web tr&egrave;s complets, comme par exemple une boutique en ligne, gr&acirc;ce &agrave; de nombreux plugins optionnels.</p>', '', '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', '<p>Joomla est le 2&egrave;me CMS le plus connu au monde, apr&egrave;s WordPress. Historiquement, Joomla s\'est toujours adress&eacute; &agrave; des d&eacute;veloppeurs (en se basant sur des composants, des plugins, des modules) , tandis que son concurrent, WordPress, s\'adressait davantage au grand public &agrave; l\'origine. Au fil du temps, WordPress a fini par devenir plus consistant et plus complexe, avec la multiplication des extensions qui compl&egrave;tent l\'offre de base (la fonction blogging) de WordPress.</p>', '', '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', '<p>Font Awesome est un outil permettant d\'afficher des ic&ocirc;nes sur un site web. Tout comme Google Fonts, il est cod&eacute; en CSS. D\'abord sous forme de fichier CSS, Font Awesome est d&eacute;sormais propos&eacute; en fichier JavaScript, dont l\'adresse est &agrave; int&eacute;grer dans la section HEAD de la page. Font Awesome a &eacute;t&eacute; cr&eacute;&eacute; en 2012 pour &ecirc;tre int&eacute;gr&eacute; &agrave; Bootstrap. A noter : l\'utilisation de Font Awesome fait appel aux balises sur les sites web, qui ne sont pas conseill&eacute;es si on souhaite respecter les contraintes li&eacute;es &agrave; l\'accessibilit&eacute; des sites web. Il est pr&eacute;f&eacute;rable de les remplacer par les balises qui respectent les normes d\'accessibilit&eacute;.</p>', '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', '<p>Google Fonts est une service d\'h&eacute;bergement de polices de caract&egrave;res cr&eacute;&eacute; en 2010. Ce service, cr&eacute;&eacute; par Google, permet d\'afficher des polices de caract&egrave;res sp&eacute;cifiques sur un site web, gr&acirc;ce &agrave; un fichier CSS disponible sur le site de Google Fonts. Les d&eacute;veloppeurs peuvent faire appel &agrave; ce fichier CSS en mode \"embed\", ou bien en t&eacute;l&eacute;chargeant le fichier CSS pour l\'int&eacute;grer ensuite en local sur le site. Il est pr&eacute;f&eacute;rable de l\'utiliser en mode \"embed\" pour ne pas ralentir l\'affichage du site.</p>', '', '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', '<p>Github est un service d\'h&eacute;bergement web utilisant le logiciel de gestion de versions Git. Avec Github, les d&eacute;veloppeurs peuvent contr&ocirc;ler le versioning de leurs projets web.</p>', '', '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', '<p>Git est un logiciel de gestion de versions d&eacute;centralis&eacute;. A ne pas confondre avec Github, m&ecirc;me si les 2 sont li&eacute;s. Git a &eacute;t&eacute; cr&eacute;&eacute; en 2005. Github a &eacute;t&eacute; cr&eacute;&eacute; en 2008 et s\'appuie sur la technologie Git.</p>\r\n<p>Git poss&egrave;de deux structures de donn&eacute;es : une base d\'objets et un cache de r&eacute;pertoires. Il existe cinq types d\'objets :</p>\r\n<p>-<strong>l\'objet blob</strong> (pour binary large object d&eacute;signant un ensemble de donn&eacute;es brutes), qui repr&eacute;sente le contenu d\'un fichier ;</p>\r\n<p>- <strong>l\'objet tree</strong> (mot anglais signifiant arbre), qui d&eacute;crit une arborescence de fichiers. Il est constitu&eacute; d\'une liste d\'objets de type blobs et des informations qui leur sont associ&eacute;es, tel que le nom du fichier et les permissions. Il peut contenir r&eacute;cursivement d\'autres trees pour repr&eacute;senter les sous-r&eacute;pertoires ;</p>\r\n<p>-<strong> l\'objet commit</strong> (r&eacute;sultat de l\'op&eacute;ration du m&ecirc;me nom signifiant &laquo; valider une transaction &raquo;), qui correspond &agrave; une arborescence de fichiers (tree) enrichie de m&eacute;tadonn&eacute;es comme un message de description, le nom de l\'auteur, etc. Il pointe &eacute;galement vers un ou plusieurs objets commit parents pour former un graphe d\'historiques ;</p>\r\n<p>- <strong>l\'objet tag</strong> (&eacute;tiquette) qui est une mani&egrave;re de nommer arbitrairement un commit sp&eacute;cifique pour l\'identifier plus facilement. Il est en g&eacute;n&eacute;ral utilis&eacute; pour marquer certains commits, par exemple par un num&eacute;ro ou un nom de version (2.1 ou bien Lucid Lynx);</p>\r\n<p>- <strong>l\'objet branch</strong> (branche) qui contient une partie de l\'avancement du projet. Les branches sont souvent utilis&eacute;es pour avancer dans une partie du projet sans impacter une autre partie.</p>', '', '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', '<p>Atom est un &eacute;diteur de texte. Il supporte de nombreux langages de programmation :</p>\r\n<p><strong>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</strong></p>', '', '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', '<p>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&eacute;seaux sociaux Facebook, Twitter, LinkedIn... Ce protocole facilite le partage depuis un ordinateur, le navigateur d\'un smartphone ou une application mobile.</p>', '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', '<p>Par le terme de \"Twitter Cards\", on entend 2 choses :</p>\r\n<p>-les cards \"Twitter\" permettant d\'afficher un tweet sur Twitter</p>\r\n<p>-les balises \"Twitter Cards\" ins&eacute;r&eacute;es dans les balises meta d\'un site web, afin que Twitter puisse afficher un tweet correctement</p>\r\n<h3>Les Cards \"Twitter\"</h3>\r\n<p>Vous l\'aurez remarqu&eacute; : lorsque vous consultez Twitter, les tweets ne s\'affichent pas tous de la m&ecirc;me fa&ccedil;on. Certains sont de simples textes (phrases courtes...), alors que d\'autres tweets sont enrichis de photos, de vid&eacute;os...</p>\r\n<p>Concernant les tweets enrichis, on distingue 2 cat&eacute;gories :</p>\r\n<p>-le tweet enrichi depuis Twitter : l\'utilisateur poste un tweet en y ajoutant une photo, ou une vid&eacute;o. Dans ce type de cas, le tweet ne fait appel &agrave; aucun site web ext&eacute;rieur. L\'utilisateur ins&eacute;re des photos ou des vid&eacute;os qui sont pr&eacute;sents sur son device (mobile, PC...)</p>\r\n<p>-le tweet enrichi gr&acirc;ce &agrave; un site tiers : dans ce cas, lorsque l\'utilisateur poste un lien menant &agrave; un site web (par exemple un lien vers un article de presse), Twitter ins&egrave;re <em><strong>automatiquement</strong></em> des &eacute;l&eacute;ments pour enrichir le tweet (le plus souvent il s\'agit par exemple d\'un aper&ccedil;u photo d\'un article de presse post&eacute; sur un site web. <em><strong>C\'est dans ce cas de figure</strong></em> qu\'interviennent les balises meta \"Twitter Cards\".</p>\r\n<p>Plusieurs types de Twitter Cards existent :</p>\r\n<p>- <strong>Summary Card</strong> : elle affiche un aper&ccedil;u du site web de r&eacute;f&eacute;rence. L\'aper&ccedil;u contient le titre ou bien une description du document. On y voit aussi une vignette d\'aper&ccedil;u.</p>\r\n<p>- <strong>Summary Card avec image large</strong> : c\'est la m&ecirc;me chose, mais cette fois avec une photo bien plus large qui occupe toute la largeur du fil Twitter.</p>\r\n<p>- <strong>Photo Card</strong> : La Card ne contient qu\'une photo. Le contenu standard du tweet int&eacute;gre &eacute;galement l\'auteur, la source et un lien externe.</p>\r\n<p>- <strong>Gallery Card</strong>.&nbsp; Seule diff&eacute;rence avec la Photo Card : cette fois, plusieurs photos sont affich&eacute;es.</p>\r\n<p>- <strong>App Card</strong>. Elle permet d\'afficher une application Android ou iOS. La card contient une courte description (celle pr&eacute;sente dans l\'App Store), ainsi qu\'un lien de t&eacute;l&eacute;chargement de l\'application.</p>\r\n<p>- <strong>Player Card</strong>. Comme on peu le deviner, ce type de Card affiche des vid&eacute;os ou des fichiers audio.</p>\r\n<p>- <strong>Product Card</strong>. Elle est destin&eacute;e &agrave; ceux voulant faire la promotion d\'un produit. Elle affiche un produit avec 2 caract&eacute;ristiques d&eacute;finies par l\'utilisateur. Il peut s\'agir de la cat&eacute;gorie du produit, du prix...</p>\r\n<p>&nbsp;</p>\r\n<h3>Les balises meta \"Twitter Cards\"</h3>\r\n<p>Afin d\'afficher correctement des Twitter Cards sur Twitter, il est n&eacute;cessaire d\'ajouter des balises meta Twitter Cards sur le site de r&eacute;f&eacute;rence.</p>\r\n<p>3 balises sont obligatoires :</p>\r\n<p>&nbsp;</p>\r\n<p>La 1&egrave;re balise, \"twitter:card\" correspond &agrave; la description courte du site web</p>\r\n<p>Les 2 autres \"twitter:site\" et \"twitter:creator\" correspondent au compte Twitter de l\'utilisateur.</p>\r\n<p>A noter : si le site web contient les balises Open Graph suivantes : og:type ; og:title ; og:description sont pr&eacute;sentes et si la balise twitter:card est absente, alors le summary sera quand m&ecirc;me affich&eacute; sur Twitter. Lorsque Twitter crawle le site web, il v&eacute;rifie si des balises Open Graph sont pr&eacute;sentes.</p>\r\n<p>Voici quelques exemples de balises Twitter :</p>\r\n<p><strong>twitter:description</strong></p>\r\n<p>Cette balise doit contenir la description de l\'article. Elle ne doit pas d&eacute;passer 200 caract&egrave;res.</p>\r\n<p><strong>twitter:title</strong></p>\r\n<p>Comme son nom l\'indique, celle-ci contient le titre. Limit&eacute;e &agrave; 70 caract&egrave;res.</p>\r\n<p><strong>twitter:image</strong></p>\r\n<p>URL de l\'image &agrave; ins&eacute;rer dans la card. A noter : l\'image doit faire moins de 5 Mo. Les formats support&eacute;s sont : JPG, PNG, WEBP et GIF. Dans le cas d\'un GIF, seule la premi&egrave;re frame est affich&eacute;e. Le format SVG n\'est pas support&eacute;.</p>\r\n<p><strong>twitter:image:alt</strong></p>\r\n<p>Description de l\'image. Maximum autoris&eacute; : 420 caract&egrave;res.</p>\r\n<p><strong>twitter:player</strong></p>\r\n<p>URL du player vid&eacute;o ou audio.</p>\r\n<p><strong>twitter:player:width</strong></p>\r\n<p>Largeur en pixels du player.</p>\r\n<p><strong><strong>twitter:player:height</strong></strong></p>\r\n<p>Hauteur en pixels du player</p>\r\n<h3>A quoi &ccedil;a sert ?</h3>\r\n<p>Les Twitter Cards ont un int&eacute;r&ecirc;t &eacute;vident : plus le tweet est enrichi (pr&eacute;sence d\'une description, d\'une vignette, d\'une vid&eacute;o...), plus le lien aura des chances d\'&ecirc;tre cliqu&eacute;, et ainsi il permettra de g&eacute;n&eacute;rer du traffic sur le site web. Attention cependant : certains &eacute;l&eacute;ments comme les vid&eacute;os, ne vont pas forc&eacute;ment g&eacute;n&eacute;rer du traffic, car dans le cas des vid&eacute;os, l\'utilisateur peut se contenter de visionner int&eacute;gralement la vid&eacute;o sur Twitter sans visiter le site web.</p>', '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', '<p>HTML signifie : <strong>Hypertext Markup Language</strong></p>\r\n<p>Le langage HTML est constitu&eacute; :</p>\r\n<p>- de balises (tags en anglais)</p>\r\n<p>- d\'attributs (attributes)</p>\r\n<p>- d\'&eacute;l&eacute;ments (ce qui se trouve entre la balise ouvrante <strong>&lt;</strong> et la balise fermante <strong>&gt;</strong>).</p>\r\n<h3>Structure d\'une page Web</h3>\r\n<p>Une page HTML est constitu&eacute;e au minimum :</p>\r\n<p>- <strong>du doctype</strong> (pour indiquer au navigateur que le document est de type HTML)</p>\r\n<p>- <strong>des balises </strong> qui elles-m&ecirc;men renferment 2 autres balises : et : ces 3 balises&nbsp; sont les balises de premier niveau.</p>\r\n<h3>La section Head</h3>\r\n<p>La balise head renferme plusieurs balises qui sont interpr&eacute;t&eacute;es par le navigateur, mais dont le contenu n\'est pas affich&eacute; sur la page.</p>\r\n<p>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 &eacute;galement des balises meta, des liens vers des feuilles de style CSS, et parfois des scripts en Javascript.</p>\r\n<p>Les diff&eacute;rentes balises meta et title jouent un r&ocirc;le primordial pour le r&eacute;f&eacute;rencement.</p>\r\n<h3>La section Body</h3>\r\n<p>Elle contient au contraire tout ce qui sera affich&eacute; sur la page web dans le navigateur. Il existe de nombreux types de balises :</p>\r\n<p>- <strong>les balises sectionnantes</strong> (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).</p>\r\n<p>- <strong>les balises de structuration du texte</strong> (comme les headings, les blockquotes, les paragraphes)</p>\r\n<p>- <strong>les balises de listes</strong> (num&eacute;rot&eacute;es ou non)</p>\r\n<p>- <strong>les balises de tableau</strong> (d&eacute;sormais d&eacute;conseill&eacute;es pour construire une page web, mais parfois tr&egrave;s utiles pour construire le template d\'une newsletter)</p>\r\n<p>- <strong>les balises de formulaire </strong>(form, input, textarea...)</p>\r\n<p>- <strong>les balises g&eacute;n&eacute;riques </strong>(div, span...)</p>\r\n<h3>Mode d\'affichage des &eacute;l&eacute;ments HTML</h3>\r\n<p>Il existe &eacute;galement une autre fa&ccedil;on de distinguer certains types de balises.</p>\r\n<p>On parle parfois en effet de :</p>\r\n<p>- balises \"inline\" qui permettent de d&eacute;finir l\'affichage d\'un &eacute;l&eacute;ment sans retour &agrave; la ligne. Parmi les balises inline, nous avons par exemple les balises<strong>&nbsp; span, a, strong, img ...</strong></p>\r\n<p>- balises \"blocks\": elles occupent toute la largeur disponibles. Lorsque 2 &eacute;l&eacute;ments de type \"blocks\" se suivent, ils sont dispos&eacute;s par d&eacute;faut l\'un en dessous de l\'autre. Nous avons par exemple les balises <strong>div, h1, p, ul, form, table, blockquote.</strong></p>\r\n<p>-de balises \"invisibles\" : elles ne s\'affichent pas sur la page, comme par exemple la balise <strong>meta</strong>, inclue dans la partie <strong>head </strong>de la page.</p>', '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', '<p>Le CSS (Cascading Styles Sheets) est un langage informatique permettant de d&eacute;crire le style, la pr&eacute;sentation d\'un document HTML. L&agrave; o&ugrave; 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.</p>\r\n<p>En r&eacute;alit&eacute;, le HTML n\'a jamais eu besoin du langage CSS pour &ecirc;tre ex&eacute;cut&eacute; sur un navigateur web. Cependant, le CSS est devenu rapidement une n&eacute;cessit&eacute; afin de s&eacute;parer ce qui rel&egrave;ve purement et simplement de la structure d\'une page web (c\'est le r&ocirc;le du HTML), de ce qui rel&egrave;ve de la mie en page (formes, couleurs, polices de caract&egrave;res....).</p>\r\n<p>Le style d\'une page web peut &ecirc;tre d&eacute;fini de 3 fa&ccedil;ons :</p>\r\n<p>-soit directement dans la page HTML (avec par exemple la balise <strong>style</strong>, situ&eacute;e dans la partie HEAD de la page)</p>\r\n<p>-soit en mode inline (exemple : utilisation de la balise <strong>strong</strong> pour mettre en gras un texte)</p>\r\n<p>-soit gr&acirc;ce &agrave; un fichier CSS, r&eacute;f&eacute;renc&eacute; dans la section HEAD de la page.</p>\r\n<p>Il est &eacute;vident qu\'il est pr&eacute;f&eacute;rable d\'utiliser la 3&egrave;me m&eacute;thode. En effet : imaginons qu\'un d&eacute;veloppeur souhaite modifier compl&egrave;tement le design d\'un site web, sans pour autant modifier la structure des pages web. C\'est l&agrave; que le fichier CSS a son int&eacute;r&ecirc;t : le d&eacute;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&egrave;s nombreuses pages.</p>\r\n<p>Il est possible &eacute;galement qu\'une page web ou qu\'un site fasse appel &agrave; plusieurs fichiers CSS. Par exemple, il est fr&eacute;quent de voir un fichier CSS diff&eacute;rent pour chaque taille d\'&eacute;cran, afin de rendre un site 100% responsive.</p>\r\n<p>Par ailleurs, le CSS est devenu de plus en plus puissant au fil des ann&eacute;es. D&eacute;sormais, le CSS permet d\'afficher par exemple des animations, ou des graphiques particuli&egrave;rement complexes.</p>\r\n<h3>Les s&eacute;lecteurs</h3>\r\n<p>Le principe du CSS repose sur la s&eacute;lection : on s&eacute;lecte un &eacute;l&eacute;ment (par exemple un type de balise, ou bien une balise poss&eacute;dant un identifiant) pour lui appliquer un style. On pourra par exemple appliquer une couleur rouge pour tous les titres de type H3.</p>\r\n<h3>Box Model</h3>\r\n<p>Tous les &eacute;lements HTML (une image, un paragraphe, un formulaire...) peut &ecirc;tre consid&eacute;r&eacute; comme une bo&icirc;te. Pour d&eacute;finir cette bo&icirc;te, on utilise 4 &eacute;lements :</p>\r\n<p>- Margin (Marge - l\'espace qui est en dehors de la bordure)</p>\r\n<p>- Border (Bordure - la bordure qui est autour du padding)</p>\r\n<p>- Padding (Ecart - l\'&eacute;cart entre le contenu et la bordure)</p>\r\n<p>- Content (Contenu - par exemple le texte et les images)</p>\r\n<h3>Grid</h3>\r\n<p>Grid est un principe CSS permettant d\'afficher un Layout en mode \"grille\". Le d&eacute;veloppeur peut utiliser ce principe pour positionner des &eacute;l&eacute;ments dans une grille, en faisant varier par exemple la taille de chaque case, ou l\'orientation de chaque rang&eacute;e, etc...</p>\r\n<p>Pour afficher un layout en mode Grid, il est n&eacute;cessaire d\'ins&eacute;rer l\'instruction display: grid</p>\r\n<h3>Flexbox</h3>\r\n<p>Auparavant, nous avions 4 formats de Layouts possibles :</p>\r\n<p>- <strong>Block</strong>, pour les sections d\'une page</p>\r\n<p>- <strong>Inline</strong>, pour le texte</p>\r\n<p>- <strong>Table</strong>, pour afficher un tableau</p>\r\n<p>- <strong>Positioned</strong>, pour positionner explicitement un &eacute;l&eacute;ment.</p>\r\n<p>L\'arriv&eacute;e du concept du Flexbox facilite la cr&eacute;ation de layout, sans avoir &agrave; utiliser les notions de float ou de position.</p>\r\n<p>Pour activer la notion de flexbox sur un &eacute;l&eacute;ment, il est n&eacute;cessaire d\'appliquer un affichage flex avec l\'instruction display: flex</p>\r\n<p>Les proprit&eacute;s d\'un conteneur Flex sont les suivantes :</p>\r\n<p>flex-direction</p>\r\n<p>flex-wrap</p>\r\n<p>flex-flow</p>\r\n<p>justify-content</p>\r\n<p>align-items</p>\r\n<p>align-content</p>', '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', '<p>Avec le CSS et le HTML, le Javascript constitue le 3&egrave;me langage essentiel en front-end. Cr&eacute;&eacute; en 1995 par Brendan Eich, Javascript a &eacute;t&eacute; standardis&eacute; sous le nom d\'ECMAScript.</p>\r\n<p>ECMAScript conna&icirc;t 3 impl&eacute;mentations : celles de Mozilla (&agrave; l\'origine du navigateur Firefox), celle de Microsoft sous le nom de JScript, et celle d\'Adobe Systems, sous le nom d\'ActionScript.</p>\r\n<p>L&agrave; o&ugrave; CSS permet de d&eacute;finir le style d\'une page web, Javascript est un langage tr&egrave;s puissant, permettant de rendre les pages web interractives. Javscript est &eacute;galement utilis&eacute; pour un grand nombre d\'applications web.</p>', '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', '<p>DNS signifie : <strong>Domain Name System</strong>, c\'est-&agrave;-dire, \"le syst&egrave;me de noms de domaines\".&nbsp; 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.</p>\r\n<h3>Adresses IPv4 et IPv6</h3>\r\n<p>Sur internet, chaque serveur (h&ocirc;te) poss&egrave;de une adresse IP (IPv4 ou IPv6) :</p>\r\n<p>- En IPv4, les adresses IP ont le format suivant : xxx.xxx.xxx.xxx</p>\r\n<p>Chaque section (repr&eacute;sent&eacute;e par xxx) est un nombre compris entre 0 et 255. Probl&egrave;me : vu le nombre de serveurs / machines pr&eacute;sents dans le monde, le nombre d\'IP possibles fut tr&egrave;s vite atteint. Ce fut le cas en F&eacute;vrier 2011. Il a donc &eacute;t&eacute; n&eacute;cessaire d\'inventer un nouveau format d\'IP : IPv6</p>\r\n<p>- En IPv6, les adresses IP ont un format beaucoup plus cons&eacute;quent : xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx</p>\r\n<p>Non seulement le format est plus long (on passe de 12 &agrave; 32 caract&egrave;res), mais en plus, chaque bloc correspond &agrave; une valeur allant de 0000 &agrave; FFFF.</p>\r\n<h3>N&eacute;c&eacute;ssit&eacute; du Nom de domaine</h3>\r\n<p>Comme on l\'a vu, &agrave; chaque DNS correspond une adresse IP. Pour acc&eacute;der &agrave; un site web, nous pouvons tr&egrave;s bien y acc&eacute;der gr&acirc;ce &agrave; une adresse IP. Evidemment, pas &eacute;vident pour le commun des mortels de se rappeler de tous les sites web qu\'il pr&eacute;f&egrave;re en retenant leur adresse IP.</p>\r\n<p>D\'o&ugrave; la n&eacute;cessit&eacute; 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&egrave;re l\'adresse IP&nbsp; 17.142.160.59</p>\r\n<h3>Structure du Nom de domaine</h3>\r\n<p>Chaque nom de domaine contient une racine : le point.</p>\r\n<p>Un nom de domaine contient au moins 3 &eacute;l&eacute;ments :</p>\r\n<p>- 1 label (par exemple apple)</p>\r\n<p>- 1 point <strong>.</strong></p>\r\n<p>- 1 TLD (l\'extension, par exemple com ou org)</p>\r\n<h3>Les TLD</h3>\r\n<p>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.</p>\r\n<p>Il existe 2 types de TLD :</p>\r\n<p>-les TLD g&eacute;n&eacute;riques (com, org ...)&nbsp; correspondant &agrave; une cat&eacute;gorie : com pour commerce, org pour organisation</p>\r\n<p>-les TLD nationaux (fr, de, us ...) correspondant &agrave; un pays.</p>\r\n<h3>Le label</h3>\r\n<p>Si on reprend notre exemple, apple.com, le label correspond ici &agrave; \"apple\"</p>\r\n<p>En r&eacute;alit&eacute;, dans cet exemple, apple est un sous-domaine de .com</p>\r\n<h3>Les sous-domaines</h3>\r\n<p>Mis &agrave; part le label, il existe d\'autres sous-domaines. Par exemple, dans l\'adresse <em>www.apple.com</em>, les www sont un sous-domaine d\'apple.</p>\r\n<p>Mais le domaine peut poss&eacute;der plusieurs sous-domaines. Par exemple l\'adresse <em>https://support.apple.com</em> contient le label apple, et ce label a pour sous-domaine support. Cette URL est utilis&eacute;e pour h&eacute;berger la page support de la soci&eacute;t&eacute; Apple.</p>\r\n<h3>Serveurs DNS</h3>\r\n<p>Pour qu\'un nom de domaine affiche une page web, il est n&eacute;cessaire d\'utiliser des serveurs DNS. En g&eacute;n&eacute;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&eacute;.</p>\r\n<h3>Fully Qualified Domain Name</h3>\r\n<p><strong>Fully Qualified Domain Name</strong> (Nom de domaine pleinement qualifi&eacute;) : c\'est quoi&nbsp; ?</p>\r\n<p>Il s\'agit du nom de domaine &eacute;crit de fa&ccedil;on absolue, suivi par un point. Par exmple : <strong>www.apple.com. </strong>ou<strong> www.total.com.</strong></p>\r\n<p>Chaque label du domaine (par exemple www ou bien apple) ne peut d&eacute;passer les 63 caract&egrave;res, et le FQDN (Fully Qualified Domain Name) , ne peut d&eacute;passer les 253 caract&egrave;res.</p>\r\n<p>&nbsp;</p>', '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 */;
