refactor(AnnexeProblematique): add annexe (#17)

sections/annexes/index.tex

@@ -4,6 +4,8 @@
 % il devrait pas y avoir de soucis pour conserver les titres avec les pdfs
 % https://tex.stackexchange.com/questions/440046/title-of-subsection-on-included-multi-page-pdf
 
+\import{sections/annexes/problematique/}{index}
+\pagebreak
 \import{sections/annexes/analyseBibliographique/}{index}
 \pagebreak
 \import{sections/annexes/googleForm/}{index}

sections/annexes/problematique/index.tex

@@ -0,0 +1,114 @@
+\chapter{Problématique : Images des plateformes}
+\label{annexe:problematique}
+
+\section{Practice-it}
+
+\begin{figure}[H]
+    \includegraphics[width=\textwidth,height=0.6\textheight,keepaspectratio]{images/comparison/practice-it-1.png}
+    \centering
+    \caption[Practice-it : page principale pour rechercher un problème]{Page principale pour rechercher un problème}
+\end{figure}
+
+\begin{figure}[H]
+    \includegraphics[width=\textwidth,height=0.6\textheight,keepaspectratio]{images/comparison/practice-it-2.png}
+    \centering
+    \caption[Practice-it : page d'un problème]{Page d'un problème}
+\end{figure}
+
+\begin{figure}[H]
+    \includegraphics[width=\textwidth,height=0.35\textheight,keepaspectratio]{images/comparison/practice-it-3.png}
+    \centering
+    \caption[Practice-it : recherche avancée]{Recherche avancée}
+\end{figure}
+
+\section{Hackerrank}
+
+\begin{figure}[H]
+    \includegraphics[width=\textwidth,height=0.35\textheight,keepaspectratio]{images/comparison/hacker-1.png}
+    \centering
+    \caption[Hackerrank : tableau de bord]{Tableau de bord}
+\end{figure}
+
+\begin{figure}[H]
+    \includegraphics[width=\textwidth,height=0.35\textheight,keepaspectratio]{images/comparison/hacker-2.png}
+    \centering
+    \caption[Hackerrank : page pour rechercher un problème]{Page pour rechercher un problème}
+\end{figure}
+
+\begin{figure}[H]
+    \includegraphics[width=\textwidth,height=0.35\textheight,keepaspectratio]{images/comparison/hacker-3.png}
+    \centering
+    \caption[Hackerrank : page d'un challenge]{Page d'un challenge}
+\end{figure}
+
+\section{Leetcode}
+
+\begin{figure}[H]
+    \includegraphics[width=\textwidth,height=0.6\textheight,keepaspectratio]{images/comparison/leetcode-1.png}
+    \centering
+    \caption[Leetcode : page de recherche de problèmes]{Page de recherche de problèmes}
+\end{figure}
+
+\begin{figure}[H]
+    \includegraphics[width=\textwidth,height=0.6\textheight,keepaspectratio]{images/comparison/leetcode-2.png}
+    \centering
+    \caption[Leetcode : quelques \glspl{tag} disponibles sur le côté droit]{Quelques \glspl{tag} disponibles sur le côté droit}
+\end{figure}
+
+\begin{figure}[H]
+    \includegraphics[width=\textwidth,height=0.35\textheight,keepaspectratio]{images/comparison/leetcode-3.png}
+    \centering
+    \caption[Leetcode : page d'un problème]{Page d'un problème}
+\end{figure}
+
+
+\section{Codeforces}
+
+\begin{figure}[H]
+    \includegraphics[width=\textwidth,height=0.6\textheight,keepaspectratio]{images/comparison/codeforces-1.png}
+    \centering
+    \caption[Codeforces : page de recherche de problèmes]{Page de recherche de problèmes}
+\end{figure}
+
+\begin{figure}[H]
+    \includegraphics[width=\textwidth,height=0.6\textheight,keepaspectratio]{images/comparison/codeforces-2.png}
+    \centering
+    \caption[Codeforces : page d'un challenge]{Page d'un challenge}
+\end{figure}
+
+
+\section{Codechef}
+
+\begin{figure}[H]
+    \includegraphics[width=\textwidth,height=0.6\textheight,keepaspectratio]{images/comparison/codechef-1.png}
+    \centering
+    \caption[Codechef : page de recherche de challenges]{Page de recherche de challenges}
+\end{figure}
+
+\begin{figure}[H]
+    \includegraphics[width=\textwidth,height=0.45\textheight,keepaspectratio]{images/comparison/codechef-2.png}
+    \centering
+    \caption[Codechef : page de filtres]{Page de filtres}
+\end{figure}
+
+\begin{figure}[H]
+    \includegraphics[width=\textwidth,height=0.45\textheight,keepaspectratio]{images/comparison/codechef-3.png}
+    \centering
+    \caption[Codechef : page d'un challenge]{Page d'un challenge}
+\end{figure}
+
+\section{Coderbyte}
+
+\begin{figure}[H]
+    \includegraphics[width=\textwidth,height=0.5\textheight,keepaspectratio]{images/comparison/coderbyte-1.png}
+    \centering
+    \caption[Coderbyte : page de recherche de challenges]{Page de recherche de challenges}
+\end{figure}
+
+\begin{figure}[H]
+    \includegraphics[width=\textwidth,height=0.35\textheight,keepaspectratio=false]{images/comparison/coderbyte-2.png}
+    \centering
+    \caption[Coderbyte : page d'un challenge]{Page d'un challenge}
+\end{figure}
+
+

sections/chapters/problematique/index.tex

@@ -9,7 +9,7 @@ \section{Situation actuelle}
 
 Pour mieux comprendre l'univers des \glspl{resinfo}, nous avons analysé différentes plateformes. Bien que ces dernières n'apportent pas de solution précisément axée sur notre problématique, elles nous ont tout de même permis d'extraire des éléments pertinents à la création de notre plateforme : \texttt{SourceCode}.\\
 
-Le tableau ci-dessous regroupe les différents sites web parcourus. Dans les sous-sections suivantes, nous listons les qualités et les défauts de chacune de ces plateformes.\\
+Le tableau ci-dessous regroupe les différents sites web parcourus. Dans les sous-sections suivantes, nous listons les qualités et les défauts de chacune de ces plateformes. Vous retrouverez les captures d'écran représentant les différentes plateformes dans l'annexe \ref{annexe:problematique}.\\
 
 \begin{table}[H]
     \centering
@@ -42,29 +42,10 @@ \section{Situation actuelle}
 
 Avant d'aller plus loin, nous tenons à mentionner l'outil \href{https://oer.uclouvain.be/}{OER UCLouvain} hors du champ de notre analyse. En effet, notre projet est une version simplifiée de leur application, car nous ne traitons qu'un seul domaine des \gls{oer} : les \glspl{resinfo}. Par conséquent, le système de recherche que le site propose ne correspond pas à la vision que nous avons pour notre type de plateforme étant donné qu'il est beaucoup plus complexe que ce que nous voulons mettre en place : Un catalogue de \glspl{resinfo}. Néanmoins, nous avons pu discuter avec \textit{Christine Jacqmot}, membre du \textit{Louvain Learning Lab}, afin de lui présenter notre projet et de voir comment se comporte l'outil \href{https://oer.uclouvain.be/}{OER UCLouvain} côté administration (voir section TODO).
 
-\pagebreak
 \subsection*{Practice-it}
 
 \href{https://practiceit.cs.washington.edu/problem/list}{Practice-it} est une plateforme permettant de résoudre des problèmes en Java en ligne. Comme le site le relate : \textit{la plupart des problèmes viennent des cours d'introduction en Java de l'université de Washington}.
 
-\begin{figure}[H]
-    \includegraphics[width=\textwidth,height=0.6\textheight,keepaspectratio]{images/comparison/practice-it-1.png}
-    \centering
-    \caption[Practice-it : page principale pour rechercher un problème]{Page principale pour rechercher un problème}
-\end{figure}
-
-\begin{figure}[H]
-    \includegraphics[width=\textwidth,height=0.6\textheight,keepaspectratio]{images/comparison/practice-it-2.png}
-    \centering
-    \caption[Practice-it : page d'un problème]{Page d'un problème}
-\end{figure}
-
-\begin{figure}[H]
-    \includegraphics[width=\textwidth,height=0.35\textheight,keepaspectratio]{images/comparison/practice-it-3.png}
-    \centering
-    \caption[Practice-it : recherche avancée]{Recherche avancée}
-\end{figure}
-
 \subsubsection*{Qualité(s)}
 
 \begin{itemize}
@@ -90,29 +71,10 @@ \subsubsection*{Défaut(s)}
     \item La recherche de problèmes sans la recherche avancée n'est pas pratique.
 \end{itemize}
 
-\pagebreak
 \subsection*{Hackerrank}
 
 Cette plateforme a la volonté d'aider les développeurs à améliorer leurs compétences en programmation. Elle est aussi faite pour que les grandes entreprises puissent facilement trouver des développeurs ayant les compétences requises. Seule la partie "\textit{Practice}" du site est intéressante pour notre problématique.
 
-\begin{figure}[H]
-    \includegraphics[width=\textwidth,height=0.35\textheight,keepaspectratio]{images/comparison/hacker-1.png}
-    \centering
-    \caption[Hackerrank : tableau de bord]{Tableau de bord}
-\end{figure}
-
-\begin{figure}[H]
-    \includegraphics[width=\textwidth,height=0.35\textheight,keepaspectratio]{images/comparison/hacker-2.png}
-    \centering
-    \caption[Hackerrank : page pour rechercher un problème]{Page pour rechercher un problème}
-\end{figure}
-
-\begin{figure}[H]
-    \includegraphics[width=\textwidth,height=0.35\textheight,keepaspectratio]{images/comparison/hacker-3.png}
-    \centering
-    \caption[Hackerrank : page d'un challenge]{Page d'un challenge}
-\end{figure}
-
 \subsubsection*{Qualité(s)}
 
 \begin{itemize}
@@ -144,29 +106,10 @@ \subsubsection*{Défaut(s)}
     \item La moyenne de note d'un challenge ne figure pas dans l'interface. On peut noter un exercice, mais on ne peut pas connaître "l'avis" général.
 \end{itemize}
 
-\pagebreak
 \subsection*{Leetcode}
 
 Cette plateforme cherche à améliorer les compétences des développeurs en proposant des exercices et tutoriels sur des thématiques variées. Elle permet d'étendre ses connaissances en programmation en vue de préparer un prochain entretien avec une entreprise.
 
-\begin{figure}[H]
-    \includegraphics[width=\textwidth,height=0.6\textheight,keepaspectratio]{images/comparison/leetcode-1.png}
-    \centering
-    \caption[Leetcode : page de recherche de problèmes]{Page de recherche de problèmes}
-\end{figure}
-
-\begin{figure}[H]
-    \includegraphics[width=\textwidth,height=0.6\textheight,keepaspectratio]{images/comparison/leetcode-2.png}
-    \centering
-    \caption[Leetcode : quelques \glspl{tag} disponibles sur le côté droit]{Quelques \glspl{tag} disponibles sur le côté droit}
-\end{figure}
-
-\begin{figure}[H]
-    \includegraphics[width=\textwidth,height=0.35\textheight,keepaspectratio]{images/comparison/leetcode-3.png}
-    \centering
-    \caption[Leetcode : page d'un problème]{Page d'un problème}
-\end{figure}
-
 \subsubsection*{Qualité(s)}
 
 \begin{itemize}
@@ -200,23 +143,10 @@ \subsubsection*{Défaut(s)}
     \item Il faut obligatoirement se connecter pour s'exercer avec la plateforme.
 \end{itemize}
 
-\pagebreak
 \subsection*{Codeforces}
 
 CodeForces est une plateforme créée par une communauté de programmation axée sur la compétition et les concours.
 
-\begin{figure}[H]
-    \includegraphics[width=\textwidth,height=0.6\textheight,keepaspectratio]{images/comparison/codeforces-1.png}
-    \centering
-    \caption[Codeforces : page de recherche de problèmes]{Page de recherche de problèmes}
-\end{figure}
-
-\begin{figure}[H]
-    \includegraphics[width=\textwidth,height=0.6\textheight,keepaspectratio]{images/comparison/codeforces-2.png}
-    \centering
-    \caption[Codeforces : page d'un challenge]{Page d'un challenge}
-\end{figure}
-
 \subsubsection*{Qualité(s)}
 
 \begin{itemize}
@@ -235,28 +165,10 @@ \subsubsection*{Défaut(s)}
     \item Aucun moyen de réinitialiser la recherche. La seule manière est de retirer manuellement les \glspl{tag} sélectionnés et le titre de recherche.
 \end{itemize}
 
-\pagebreak
 \subsection*{Codechef}
 
 \textit{CodeChef} est un site de programmation compétitif. Il s'agit d'une initiative éducative à but non lucratif de Directi, qui vise à fournir une plateforme pour les étudiants, les jeunes professionnels du logiciel, afin qu'ils puissent s'exercer et affiner leurs compétences en programmation grâce à des concours en ligne. En outre, le programme "CodeChef For Schools" vise à atteindre les jeunes étudiants et à inculquer une culture de la programmation dans les écoles indiennes. (texte tiré de \href{https://en.wikipedia.org/wiki/CodeChef}{Wikipedia})
 
-\begin{figure}[H]
-    \includegraphics[width=\textwidth,height=0.6\textheight,keepaspectratio]{images/comparison/codechef-1.png}
-    \centering
-    \caption[Codechef : page de recherche de challenges]{Page de recherche de challenges}
-\end{figure}
-
-\begin{figure}[H]
-    \includegraphics[width=\textwidth,height=0.45\textheight,keepaspectratio]{images/comparison/codechef-2.png}
-    \centering
-    \caption[Codechef : page de filtres]{Page de filtres}
-\end{figure}
-
-\begin{figure}[H]
-    \includegraphics[width=\textwidth,height=0.45\textheight,keepaspectratio]{images/comparison/codechef-3.png}
-    \centering
-    \caption[Codechef : page d'un challenge]{Page d'un challenge}
-\end{figure}
 
 \subsubsection*{Qualité(s)}
 
@@ -276,23 +188,10 @@ \subsubsection*{Défaut(s)}
     \item Pas de barre de recherche pour trouver un exercice en fonction de son titre.
 \end{itemize}
 
-\pagebreak
 \subsection*{Coderbyte}
 
 \textit{CoderByte} est une plateforme proposant divers challenges de programmation en vue d'améliorer les compétences des développeurs et les préparer à une future interview avec une entreprise.
 
-\begin{figure}[H]
-    \includegraphics[width=\textwidth,height=0.5\textheight,keepaspectratio]{images/comparison/coderbyte-1.png}
-    \centering
-    \caption[Coderbyte : page de recherche de challenges]{Page de recherche de challenges}
-\end{figure}
-
-\begin{figure}[H]
-    \includegraphics[width=\textwidth,height=0.35\textheight,keepaspectratio=false]{images/comparison/coderbyte-2.png}
-    \centering
-    \caption[Coderbyte : page d'un challenge]{Page d'un challenge}
-\end{figure}
-
 \subsubsection*{Qualité(s)}
 
 \begin{itemize}