%\documentclass[11pt,a4paper]{article}
\documentclass[12pt,a4paper,twoside]{scrartcl}

\usepackage{OCI}

\author{Nom des auteurs, classe}
\title{Titre explicite du rapport d'OCI}

\begin{document}
\maketitle

\section{But}
Placez ici le but du rapport.

\medskip
Par exemple, pour un travail sur un site internet, on pourrait écrire :

\smallskip
\emph{Notre objectif était de créer un site sur les écureuils avec différentes sections comme un historique, la biologie des écureuils, \dots}

\medskip
Le but du présent modèle est de permettre une rédaction facilité de rapports en informatique. Le c\oe ur du modèle tourne donc autour de la possibilité d'écrire du code et de le commenter. Pour cela, le package utilisé est \verb|listings|. Ce module de \LaTeX{} est très complet et relativement complexe à utiliser. Sa documentation (en anglais) se trouve dans le répertoire \verb|documentation| du projet sous le nom \verb|Listings.pdf|. Reportez-vous y fréquemment.

Pour apprendre à l'utiliser, il faut savoir qu'outre l'appel au module et la configuration préalable réalisée dans le préambule de ce document via \lstinline|\lstset{...}|, la présentation des codes peut se faire en ligne ou hors ligne.

En ligne, la commande est \lstinline!\lstinline|...|! et le placement du code se fait à la place des points de suspension.

Hors ligne, on utilise l'environnement du listing~\ref{listing:environnement}.
\lstinputlisting[float,language={[LaTeX]TeX},caption={Placement d'un code en ligne},label={listing:environnement},numbers=left,numberstyle=\tiny,numbersep=6pt]{moncode2.tex}

Finalement, on peut importer du code d'un fichier externe, comme vous pourrez le voir plus loin. Cela peut être utile pour différentes raisons.

\section{Réalisation}
On place ici différents éléments pour présenter comment le travail fut réalisé.

\medskip
Par exemple, toujours pour un site internet, on peut présenter la structure des fichiers comme présenté à la figure \ref{figure:dispos}.

\begin{figure}
\centering
\includegraphics[scale=0.5]{images/StructureSite.eps} 
\caption{La structure de fichier d'un site}\label{figure:dispos}
\end{figure}

Pour ne pas rendre le modèle trop complexe, le placement des figures côte à côte n'est pas abordé ici. Cependant, s'il vous est nécessaire, consultez le modèle de rapport de travail pratique de physique que j'ai aussi mis à disposition sur le même dépôt de Framagit. Y est détaillé ce type de placement d'images. Vous pouvez aussi consulter le code de la figure \ref{figure:subfigures} qui est reproduit dans le listing \ref{listing:subfigure}, qui présente la manière de mettre deux figures côte à côte (en changeant les mots figure et subfigure respectivement par table et subtable, on peut aussi gérer le placement de tableaux côte à côte).

\begin{figure}
 \centering
 \begin{subfigure}[b]{0.5\textwidth}
  \centering
  \includegraphics[scale=0.6]{images/LatexPS.eps}
  \caption[T vs m]{\centering Compilation via Postscript\par \small Recommandée mais eps}\label{figure:ps}
 \end{subfigure}
 \begin{subfigure}[b]{0.4\textwidth}
  \centering
  \includegraphics[scale=0.6]{images/LatexPDF.eps}
  \caption[T vs m]{\centering Compilation directe\par \small Moins sure mais jpg et png}\label{figure:pdf}
 \end{subfigure}
 \caption[subfigures]{\centering Figures côte à côte}\label{figure:subfigures}
\end{figure}

\begin{lstlisting}[float,language={[LaTeX]TeX},caption={Placer des sous-figures},label={listing:subfigure},numbers=right,numberstyle=\tiny,numbersep=6pt,stepnumber=2]
\begin{figure}
 \centering
 \begin{subfigure}[b]{0.5\textwidth}
  \centering
  \includegraphics[scale=0.4]{images/....eps}
  \caption[...]{\centering ...}\label{figure:...}
 \end{subfigure}
 \begin{subfigure}[b]{0.4\textwidth}
  \centering
  \includegraphics[scale=0.4]{images/....eps}
  \caption[...]{\centering ...}\label{figure:...}
 \end{subfigure}
 \caption[subfigures]{\centering Figures côte à côte}\label{figure:subfigures}
\end{figure}
\end{lstlisting}

Sur la figure \ref{figure:subfigures}, on peut voir les deux manières principales de compiler un document \LaTeX{}. Sur la figure \ref{figure:ps}, on voit comment compiler en passant par du Postscript, compilation très puissante et sûre. Elle oblige cependant l'utilisation d'images vectorielles eps exclusivement. Sur la figure \ref{figure:pdf}, on voit une autre manière de compiler directement en PDF. Elle est moins sûre, mais nécessite ou permet l'utilisation d'images bitmap, jpg et png, à l'exclusion de l'eps.

\section{Problèmes rencontrés}
Placez ici la description des problèmes rencontrés. Par exemple, en python, si on oublie les parenthèses de la commande \lstinline|mainloop()|, alors on a une erreur dans un code comme celui du listing~\ref{listing:turtle}.

\begin{lstlisting}[float,language=python,caption={Un code utilisant turtle},label={listing:turtle},numbers=right,                numberstyle=\tiny,numbersep=6pt]
from turtle import *	# import du module turtle
forward(100)		# avance de 100
mainloop()		# boucle en attente
\end{lstlisting}

Pour mettre un code à l'intérieur d'une ligne de texte, il faut donc utiliser le code particulier \lstinline!\lstinline|mainloop()|!.
Pour mettre un code en évidence hors ligne, il faut donc par exemple utiliser le code du listing~\ref{listing:horsligne}.
\lstinputlisting[float,language={[LaTeX]TeX},caption={Placement d'un code hors ligne},label={listing:horsligne},numbers=left,numberstyle=\tiny,numbersep=6pt]{moncode1.tex}

Mieux, on peut utiliser un fichier extérieur et l'appeler comme présenté dans le listing~\ref{listing:fichierext}, ligne~\ref{listing:nomfichier}. On y voit aussi comment activer la numérotation de lignes.
\begin{lstlisting}[float,language={[LaTeX]TeX},caption={Code dans un fichier},label={listing:fichierext},numbers=left, numberstyle=\tiny,numbersep=6pt]
\lstinputlisting[float,
language=python,caption={Placement d'un code en ligne},
label={listing:horsligne},numbers=left,
numberstyle=\tiny,numbersep=6pt]
{moncode1.tex}(*@\label{listing:nomfichier}@*)
\end{lstlisting}

Pour faire référence au numéro d'une ligne présente dans un listing, il faut ajouter à la fin de la ligne le code \lstinline|(*@\label{listing:nomfichier}@*)|. Les caractères d'échappement parenthèse, étoile et arobase permettant d'interpréter le code \LaTeX{} de référencement \lstinline|\label{listing:nomfichier}| qui constitue la référence à la ligne sont définis dans le préambule par \lstinline|\lstset{escapeinside={(*@}{@*)}}|.

\section{Analyse}
Évidement, on peut aussi spécifier le langage utilisé pour mettre en évidence certains mots clés. Ainsi, en html, on peut écrire le code du listing~\ref{listing:html} qui montre la \og coloration syntaxique \fg{}. 
\begin{lstlisting}[float,language=HTML5,caption={Un code utilisant html5},label={listing:html},numbers=left, numberstyle=\tiny,numbersep=6pt]
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Test Javascript</title>
  </head>
  <body>
    <h1>Test Javascript</h1>
    Un langage intéressant.
  </body>
</html>
\end{lstlisting}

Par ailleurs, on peut régler la numérotation finement. Par exemple, avec le code CSS du listing~\ref{listing:css}
où on a commencé la numérotation à vingt et numéroté une ligne sur deux.
\begin{lstlisting}[float,language=HTML5,caption={Un code CSS},label={listing:css},numbers=left, numberstyle=\tiny,numbersep=6pt,firstnumber=20,stepnumber=2]
h1 {
  color: blue;
}
.rouge {
  color: red;
}
\end{lstlisting}

Beaucoup d'autre options sont disponibles. Reportez-vous à la documentation disponible dans le guide de l'utilisateur mentionné plus haut.

\section{Conclusion}
Voici un exemple de conclusion. À éviter : mettre ici les remerciements.

Ce modèle est entièrement basé sur le module \LaTeX{} \emph{listings}. Plusieurs reproches sont à adresser à ce module (positivement, car il fait déjà beaucoup de choses très bien), dont notamment, de ne pas supporter des langages comme javascript ou css. Évidemment, cela tombe mal pour un mod On peut certes le configurer pour les prendre en charge de manière plus ou moins efficaces, mais il n'est pas déplacé de dire qu'ils pourraient être intégrés à listings.

Ainsi, d'autres modules de traitement des listings peuvent être utilisés, comme \emph{Pygments} ou \emph{LGrind}. Mais, ils ont tous des défauts et le plus complet est certainement listings. Vous trouverez à l'adresse \url{http://www.grappa.univ-lille3.fr/FAQ-LaTeX/29.53.html} un petit résumé de la situation.

\newpage
\appendix

\section{Première annexe}
Mettez en annexe tout ce que vous voulez conserver dans le cadre de ce travail pratique, mais qu'il vous semble inutile de lire. On peut penser pour le travail sur le pendule simple à une présentation de l'utilisation de la balance de précision, qui peut s'avérer utile par la suite, mais n'est pas nécessaire pour comprendre votre travail.

\medskip
Ici, par exemple, dans le listing~\ref{listing:html5}, on peut voir l'utilisation du langage html5 ou dans le listing~\ref{listing:javascript}, celle de JavaScript. La coloration syntaxique est partielle, mais si nécessaire, il est possible de l'améliorer dans le fichier \texttt{OCI.sty}.

Notez qu'une liste des langage prédéfinis dans listings se trouve dans sa documentation. Mais, autant HTML5, CSS et JavaScript n'y figurent pas. Ils ont été défini dans ce modèle directement et se trouvent dans le fichier \texttt{OCI.sty}. Vous pouvez y jeter un coup d'\oe il, tout en comprenant bien que toute modification de celui-ci peut avoir d'importantes répercutions sur le modèle. Donc prudence.

\begin{lstlisting}[float,language=HTML5,caption={Un code CSS},label={listing:html5},numbers=left, numberstyle=\tiny,numbersep=6pt,stepnumber=2]
<!DOCTYPE html>
<html>
  <head>
    <title>Canvas</title>
    <meta charset="UTF-8" />
    <style>
      #square {
        border: 1px solid black;
        transform: scale(10) rotate(3deg) translateX(0px);
        -moz-transform: scale(10) rotate(3deg) translateX(0px);
      }
      .box {
        transition-duration: 2s;
        transition-property: transform;
        transition-timing-function: linear;
      }
    </style>
  </head>
  <body>
    <canvas id="square" width="200" height="200"></canvas>
  </body>
</html>
\end{lstlisting}

\begin{lstlisting}[float,language=JavaScript,caption={Un code JavaSrcipt},label={listing:javascript},numbers=left, numberstyle=\tiny,numbersep=6pt,stepnumber=2]
<script>
    var canvas = document.createElement('canvas');
    canvas.width = 200;
    canvas.height = 200;
    var image = new Image();
    image.src = 'images/card.png';
    image.width = 114;
    image.height = 158;
    image.onload = window.setInterval(function() {
        rotation();
    }, 1000/60);
</script>
\end{lstlisting}

\section{Seconde annexe}
Utilisons cette seconde annexe pour présenter divers éléments formels utilisable avec \LaTeX{} dans votre rapport.
\subsection{Notes}
Les notes de bas de page peuvent être utilisées de la manières suivante\footnote{Regardez dans le code du modèle.}.
\subsection{Références}
Dans un document tel qu'un travail de maturité, une bibliographie est indispensable. Si vous désirez en faire une pour votre rapport de physique, il faut tout d'abord simplement mettre une référence d'entrée de bibliographie telle que \cite{EinsteinPR1935} et mettre la description de l'ouvrage dans l'environnement \verb|thebibliography|, comme présenté dans le code source de ce document. Si vous avez moins de 10 références mettez en paramètre le chiffre 9 et 99 si vous en avez moins de cent. Il s'agit là d'une bibliographie très simple obéissant aux canons de la physique. Pour générer des bibliographies plus complexes, utilisez le programme externe \emph{bibtex}.

\begin{lstlisting}[float,language={[LaTeX]Tex},caption={La biliographie},label={listing:biblio},numbers=left, numberstyle=\tiny,numbersep=6pt]
\begin{thebibliography}{9}
\bibitem{EinsteinPR1935}A.~Einstein and N.~Rosen, Phys. Rev. \textbf{48}, 73 (1935)
\end{thebibliography}
\end{lstlisting}

\subsection{Placement des flottants}
Techniquement, le placement des éléments graphiques flottants\footnote{Voir l'excellent site :\\\url{https://en.wikibooks.org/wiki/LaTeX/Floats,_Figures_and_Captions}} se fait par l'intermédiaire des environnements \verb|figure|, \verb|table|, \verb|subfigure| et \verb|subtable|, pour autant que le module \verb|subcaption| soit chargé.

Ce placement peut être influencé par les éléments :
\begin{description}
\item [h] pour placer l'élément ici, approximativement,
\item [t] pour placer l'élément en haut de page,
\item [b] pour placer l'élément en bas de page,
\item [p] pour placer l'élément sur une page de flottants,
\item [~!] pour tenter de forcer \LaTeX\ à faire ce qu'on veut et
\item [H] pour placer l'élément exactement ici (nécessite le paquel \verb|float|).
\end{description}
placés entre crochets de la manière suivante :
\begin{verbatim}
\begin{figure}[tbh...]
\end{verbatim}

\begin{thebibliography}{9}
\bibitem{EinsteinPR1935}A.~Einstein and N.~Rosen, Phys. Rev. \textbf{48}, 73 (1935)
\end{thebibliography}

\end{document}