Fin de du transfert de fichier du commit précédent
This commit is contained in:
parent
da6049711f
commit
09b95adc8b
|
|
@ -1,251 +1,65 @@
|
||||||
\chapter{Configuration} \label{chapter:configuration}
|
\chapter{Introduction}
|
||||||
\maminitoc
|
|
||||||
|
|
||||||
Ce chapitre présente essentiellement le fichier \src{config.tex} qui permet la configuration générale du travail de maturité.
|
\section{Motivations et Objectifs}
|
||||||
|
\subsection{Motivations}
|
||||||
|
Désormais l'utilisation de \LaTeX au lycée fait partie des connaissances que doivent acquérir les élèves qui on choisi des options techniques. Si celles-ci sont absolument nécessaire pour ces élèves, en considérant le résultat fourni, d'autres élèves font régulièrement la demande pour pouvoir utiliser \LaTeX pour leur travail de fin d'étude, en Suisse, nommé travail de maturité. Or, leur familiarité avec \LaTeX est parfois trop peu importante pour que ce travail puisse se faire sans un véritable soutient des enseignants.
|
||||||
|
|
||||||
\section{Config.tex}
|
Force est de constater que la majorité des enseignants en est incapable. Et ce n'est pas dû à \LaTeX uniquement, avec d'autres traitement de texte plus connus, c'est souvent la même chose.
|
||||||
|
|
||||||
Au \squote{c\oe ur} de la configuration du travail de maturité se trouvent une série de questions posées au rédacteur qui permettent de mettre à sa disposition les différents éléments dont il va avoir besoin. Ces questions se trouvent regroupées dans le fichier \src{config.tex} sous différentes sections.
|
\subsection{Objectifs}
|
||||||
|
Une solution à ce problème est constitué par le présent travail. Il s'agit d'un modèle de travail de maturité, simplement configurable, permettant de mettre à disposition des élèves ayant des connaissances de base en \LaTeX tous les outils nécessaires pour leur travail.
|
||||||
\begin{description}
|
|
||||||
\item[La page de titre] S'y trouvent définis les titre et sous-titre du travail, le type de travail, l'auteur, la date et le mentor.
|
|
||||||
\item[Le pied de page] S'y trouvent définis le domaine, c'est-à-dire l'option spécifique ou autre, du travail ainsi que la langue du pied de page.
|
|
||||||
\item[Citations, remerciements, acronymes, licence, site officiel, cdrom, index] On peut choisir ici de mettre une page contenant une pensée ou citation, une page contenant un préambule, une dédicace, des remerciements, une page contenant un résumé, une page d'acronymes, une page présentant la licence du travail, une page présentant le site associé au travail, une autre le cdrom associé et enfin une page d'index.
|
|
||||||
\item[Chapitres]
|
|
||||||
\item[Listes des figures, tables et listings]
|
|
||||||
\item[Les chapitres]
|
|
||||||
\item[Les figures]
|
|
||||||
\item[Insertion de code : listings]
|
|
||||||
\item[Version provisoire]
|
|
||||||
\item[Le texte]
|
|
||||||
\item[Un index]
|
|
||||||
\end{description}
|
|
||||||
|
|
||||||
\listingref{listing:manifeste}.
|
|
||||||
|
|
||||||
\begin{lstlisting}[float,caption={Le manifeste : manifest.manifest},label={listing:manifeste}]
|
|
||||||
CACHE MANIFEST
|
|
||||||
|
|
||||||
# Version 10.4 (*@ \label{codeline:version} @*)
|
|
||||||
|
|
||||||
# A mettre en cache. Attention, la page index.html est cachee par defaut
|
|
||||||
# comme le manifest lui-meme.
|
|
||||||
CACHE: (*@ \label{codeline:cache} @*)
|
|
||||||
offline.html
|
|
||||||
css/android.css
|
|
||||||
css/desktop.css
|
|
||||||
|
|
||||||
# A aller chercher sur le net (meme s'il est en cache ?)
|
|
||||||
NETWORK: (*@ \label{codeline:network} @*)
|
|
||||||
# Si je decommente la ligne suivante, il refusera le fallback sur offline.html
|
|
||||||
#ONOFFlineTest.html
|
|
||||||
js/h5utils.js
|
|
||||||
|
|
||||||
# A remplacer si la ressource est dans network et qu'on est hors ligne
|
|
||||||
FALLBACK: (*@ \label{codeline:fallback} @*)
|
|
||||||
ONOFFlineTest.html offline/offline.html
|
|
||||||
online/online.html offline/offline.html
|
|
||||||
onlineAccueil,js offlineAccueil.js
|
|
||||||
\end{lstlisting}
|
|
||||||
|
|
||||||
Ce fichier est découpé en trois parties : la partie CACHE, ligne \ref{codeline:cache}, la partie NETWORK, ligne \ref{codeline:network} et la partie FALLBACK, ligne \ref{codeline:fallback} du listing \ref{listing:manifeste}.
|
|
||||||
|
|
||||||
\subsection{Détection du manifeste}
|
|
||||||
|
|
||||||
|
|
||||||
\begin{comment}
|
|
||||||
% This is the correct way to insert a figure
|
|
||||||
% The 1st argument: the filename (without the extension, the file is located in the figures subfolder)
|
|
||||||
% The 3rd argument: is the caption
|
|
||||||
% The 4th argument: the label (for references)
|
|
||||||
\tmfigureT{barcode}{EAN-8 representation of the number 2402820}{fig:barcode}
|
|
||||||
|
|
||||||
% This is the correct way to make reference to a figure:
|
|
||||||
An EAN-8 representation is show in \figref{fig:barcode}.
|
|
||||||
\end{comment}
|
|
||||||
|
|
||||||
\subsection{Les outils d'analyse} \label{subsec:outils_analyse}
|
|
||||||
|
|
||||||
Un certains nombre d'outils d'analyse\index{outils d'analyse} sont nécessaire pour suivre l'évolution des caches. Sous Firefox, on peut avoir accès aux caches par le code \ref{listing:cachefirefox}.
|
|
||||||
|
|
||||||
\begin{lstlisting}[float,caption={Le cache de Firefox},label={listing:cachefirefox}]
|
|
||||||
about:cache
|
|
||||||
\end{lstlisting}
|
|
||||||
|
|
||||||
dans la barre d'URL. La figure \figref{fig:about_cache} permet de voir les indications fournies. De plus, une liste des fichiers en cache est disponible, ce qui est très pratique. Sous Chromium\index{Chromium} ou Chrome\index{Chrome}, la commande précédente donne simplement une liste des fichiers en cache, ce qui n'est pas très pratique. Il faut donc passer par les \squote{outils de développement} du menu \squote{outil} qui permettent d'avoir accès aux \squote{Ressources}, notamment le cache d'application. Plus clairement qu'avec Firebug, ces outils de développements proposent alors une liste des fichiers mis en cache d'application.
|
|
||||||
|
|
||||||
% This is the correct way to insert a figure
|
|
||||||
% The 1st argument: the filename (without the extension, the file is located in the figures subfolder)
|
|
||||||
% The 3rd argument: is the caption
|
|
||||||
% The 4th argument: the label (for references)
|
|
||||||
\tmfigureS{about_cache}{Les caches sous Firefox}{fig:about_cache}
|
|
||||||
|
|
||||||
Il faut relever un piège avec Firebug\index{Firebug} sous Firefox. En explorant le DOM\index{DOM}, on trouve l'entrée applicationCache. Or, même si le cache d'application contient des fichiers, cette entrée mentionne toujours \verb=0 items in offline cache=. Pour moi, la raison de ce fait reste encore inexpliquée et elle m'a fait perdre beaucoup de temps.
|
|
||||||
|
|
||||||
Une autre manière de faire est de suivre les transactions à travers les logs du serveur web. Pour Apache, il se trouvent à l'adresse \apath{/var/log/apache2/access.log}.
|
|
||||||
|
|
||||||
Pour voir le fichier, il faut naturellement être en root. On peut alors en voir la fin par la commande \ref{listing:lecturelogs}.
|
|
||||||
|
|
||||||
\begin{lstlisting}[float,caption={Lecture des logs},label={listing:lecturelogs}]
|
|
||||||
tail -f access.log
|
|
||||||
\end{lstlisting}
|
|
||||||
|
|
||||||
\section{Interface graphique} \index{Interface graphique}
|
|
||||||
|
|
||||||
L'ergonomie d'une application embarquée doit être très claire. Celle d'un site peut être visuellement plus complexe. Il est donc nécessaire de fournir un maximum de renseignements sur le site et d'épurer, de minimiser voire de supprimer ceux-ci dans la version embarquée.
|
|
||||||
|
|
||||||
Pour l'instant, tout est très simple. Aucune recherche particulière n'a été faite pour obtenir une bonne qualité graphique de l'interface. L'idée est de laisser à la bibliothèque \squote{Jquery mobile}\index{Jquery mobile} le soin de réaliser la mise en page. Cela fonctionne en partie. Deux problèmes persistent cependant. Le premier est une certaine lenteur lors des effets graphiques tels que les changement de page. L'autre est la désactivation des feuilles de style\index{feuille de style} de \squote{Jquery mobile} sur la page de la carte de vocabulaire. Je pense pouvoir trouver dans un délai raisonnable une solution à chacun de ces problèmes. Mais, je n'ai pas encore eu le temps de le faire. C'est pourquoi j'ai désactivé \squote{Jquery mobile}.
|
|
||||||
|
|
||||||
Évidemment, l'utilisation de \squote{Jquery mobile} serait un avantage du point de vue de la prise en charge d'une multitude de plateformes sans qu'il soit nécessaire d'effectuer moi-même des test pour chacune d'elles. C'est pourquoi je vais investir encore du temps pour tenter une bonne intégration. Mais, au vu des ralentissements, un développement graphique réalisé par mes soins ou à l'aide d'élèves web-designers reste présent dans mon esprit.
|
|
||||||
|
|
||||||
Je ne mettrai donc pas l'accent ici sur la conception purement graphique de Turn comme la recherche d'une identité graphique\index{identité graphique}, d'une palette de couleurs adaptée (les tons sombres sont plus adéquats sur les smartphones) ou un choix de types de transitions entre les pages. Je vais simplement les présenter et en indiquant leurs besoins en terme d'éléments fonctionnels en tentant une première approche des difficultés liées à leur utilisation sur les téléphones.
|
|
||||||
|
|
||||||
\subsection{Analyse des besoins}
|
|
||||||
|
|
||||||
Divers éléments sont nécessaires dans tous les cas.
|
|
||||||
|
|
||||||
\smallskip
|
|
||||||
Actuellement, on trouve sur la page d'accueil\index{page d'accueil} (voir figure \ref{fig:pageindex}, page \pageref{fig:pageindex}) un petit texte expliquant ce qu'on peut faire en mode connecté ou déconnecté. Puis, se trouve un simple lien vers la page suivante. Il est nécessaire que ce lien apparaisse sous la forme d'un bouton assez grand pour qu'il soit aisé d'appuyer sur celui-ci avec le doigt sur un smartphone. Aucune indication ne devant être transmise à la page suivante, il n'est pas nécessaire d'avoir un vrai bouton.
|
|
||||||
|
|
||||||
\subsubsection{Sur site}
|
|
||||||
Du côté embarqué, vient ensuite la page d'authentification\index{page d'authentification} (voir figure \ref{fig:pageconnection}, page \pageref{fig:pageconnection}). Très simple, elle nécessite trois champs \verb|input| et un lien de retour sur la page d'accueil.
|
|
||||||
|
|
||||||
Les champs font partie d'un formulaire. Le premier permet l'entrée d'un texte, le login\index{login} de l'utilisateur. Le second est de type \verb|password| de manière à ne présenter que des caractères cachés. Le dernier et de type \verb|submit| pour valider le formulaire.
|
|
||||||
|
|
||||||
\smallskip
|
|
||||||
Puis, vient le choix de charger un test déjà enregistré, d'en réaliser un nouveau ou de revenir sur la page d'accueil. Rien de particulier, trois liens suffisent (voir figure \ref{fig:pageonline}, page \pageref{fig:pageonline}).
|
|
||||||
|
|
||||||
\smallskip
|
|
||||||
Du côté du chargement d'un test préenregistré\index{test préenregistré} en ligne, une liste des tests doit apparaître (voir figure \ref{fig:pagetestsEnregistres}, page \pageref{fig:pagetestsEnregistres}). Chaque test est constitué de deux boutons. Le premier pour accéder au test lui-même et le second pour le supprimer. Il s'agit de deux formulaires constitués d'\verb|input| de type \verb|submit|. Mais, il faut relever qu'il a été nécessaire, pour des raisons techniques, d'utiliser un champ caché\index{champ caché}, un \verb|input| de type \verb|hidden|. Nous n'en reparlerons qu'au paragraphe \ref{choix}, puisque aucune mise en forme n'est nécessaire pour lui.
|
|
||||||
|
|
||||||
Puis, deux liens permettant d'effectuer un nouveau test et de revenir sur la page d'accueil sont présenté.
|
|
||||||
|
|
||||||
\smallskip
|
|
||||||
Du côté de la réalisation d'un nouveau test\index{nouveau test}, on commence par présenter une liste des répertoires disponibles (voir figure \ref{fig:pagenouveauTest}, page \pageref{fig:pagenouveauTest}). Cela est réalisé par une balise \verb|select| placée à l'intérieur d'un formulaire. Une liste d'\verb|option| est créée ensuite à l'intérieur du \verb|select|. Un \verb|input| de type \verb|submit| permet d'envoyer le choix effectué.
|
|
||||||
|
|
||||||
\smallskip
|
|
||||||
Puis, on présente les choix de la sélection\index{choix de la sélection}, par page ou par chapitre, et du type\index{type} de test, normal ou inverse (voir figure \ref{fig:pagechoixTypeSelection}, page \pageref{fig:pagechoixTypeSelection}). Il s'agit d'un unique formulaire comprenant deux champs dans lesquels se trouvent chaque fois deux \verb|input| de type \verb|radio| et de même nom dans chaque champ, \verb|selection| ou \verb|type| respectivement. Un champ \verb|submit| termine le tout pour envoyer les données.
|
|
||||||
|
|
||||||
\smallskip
|
|
||||||
Vient enfin la sélection\index{sélection} des chapitres ou pages selon le choix (voir figure \ref{fig:pageselection}, page \pageref{fig:pageselection}). Il s'agit d'un formulaire à l'intérieur duquel se trouve une balise \verb|select| remplie par une liste d'\verb|option| correspondant à chaque chapitre ou page. Il faut relever ici le paramètre \verb|multiple="multiple"| qui permet de sélectionner plusieurs chapitres ou pages simultanément. Le tout est toujours finalement terminé par un champ \verb|submit| pour envoyer les données sélectionnées.
|
|
||||||
|
|
||||||
\medskip
|
\medskip
|
||||||
Enfin, vient la carte de vocabulaire\index{carte de vocabulaire} du mode en ligne\index{mode en ligne} (voir figure \ref{fig:pageTest}, page \pageref{fig:pageTest}). Elle est constituée d'un formulaire à l'intérieur duquel se trouve une balise \verb|div| constituant la carte. A l'intérieur de celle-ci se trouvent trois \verb|input| de type \verb|submit| et de même nom \verb|navig|. Le premier, de valeur \verb|X|, correspond au bouton annuler\index{annuler}. Le second, de valeur \verb|<?php echo $mot?>| contient le mot et, quand on le presse, correspond à l'action de retourner la carte\index{retourner la carte} pour faire voir la traduction\index{traduction}. Enfin, le dernier, de valeur \verb|>>| correspond à un changement de carte\index{changement de carte}, c'est-à-dire à un changement de mot.
|
L'article \citeweb{wCHROMEGear} intitulé ``Chrome 12 arrête son support à Google Gears'' a permis un choix décisif en faveur de la seconde solution.
|
||||||
|
|
||||||
Cette structure très simple est suffisante. Seuls la gestion de l'apparence de la carte peut poser quelques problèmes. On verra au paragraphe \ref{css} comment y parvenir sans trop de difficultés.
|
\section{Organisation}
|
||||||
|
Pour obtenir la plus grande simplicité possible, le modèle a été conçu autour de trois fichiers.
|
||||||
|
\begin{enumerate}
|
||||||
|
\item main.tex
|
||||||
|
\item TM.sty
|
||||||
|
\item config.tex
|
||||||
|
\end{enumerate}
|
||||||
|
Le premier est simplement destiné à la compilation. Il contient la structure générale du travail. IL ne doit pas être modifié. Le second règle tous les détails techniques. Il se compose essentiellement de code \LaTeX complexe et ne doit pas être modifié. Le dernier est le fichier de configuration du travail. C'est lui qui donne accès au divers outils mis à disposition, tels que titre, préface, nombre de chapitres, postface, index, etc.
|
||||||
|
|
||||||
\subsubsection{Embarqué}
|
\section{Notations et Conventions}
|
||||||
Du côté embarqué\index{embarqué}, on trouve deux pages spécifiques qui correspondent au mode hors ligne\index{mode hors ligne}.
|
|
||||||
|
|
||||||
\smallskip
|
\subsection{Documentation}
|
||||||
Premièrement, il s'agit de la page de chargement d'un test préenregistré hors ligne (voir figure \ref{fig:pageoffline}, page \pageref{fig:pageoffline}). En raison de l'utilisation de \squote{Javascript}\index{Javascript} pour la gestion des pages hors ligne, celle-ci est très simplement composée d'une balise \verb|div| et d'un lien en retour sur la page d'accueil. A l'intérieur de la balise \verb|div| est inséré dynamiquement par un script \squote{Javascript} deux \verb|input|. Le premier prend une valeur décrivant le vocabulaire mémorisé et réalise sur clic la récupération des mots. Le second prend la valeur \verb|X| et efface le vocabulaire en question.
|
|
||||||
|
|
||||||
\smallskip
|
|
||||||
Secondement, il s'agit de la carte de vocabulaire\index{carte de vocabulaire} du mode hors ligne\index{mode hors ligne}. Son aspect est exactement celui de la carte du mode en ligne (voir figure \ref{fig:pageTest}, page \pageref{fig:pageTest}). Elle est constituée des mêmes éléments, mais les balises d'\verb|input| sont plus simple en raison de l'utilisation de \squote{Javascript}.
|
|
||||||
|
|
||||||
\subsection{CSS}\label{css}\index{CSS}
|
\section{Rédaction}
|
||||||
Le projet étant finalement assez simple, seules deux feuilles de style\index{feuille de style} ont été nécessaires. Malgré des redondances entre elles qui auraient pu permettre une fusion en une seule feuille, elles ont été maintenues clairement séparées. En effet, elles correspondent au deux côtés bien distincts du site et de l'embarqué. Pour l'instant beaucoup de choses sont communes, mais à l'avenir cela ne devait plus être le cas, les besoins du site étant très différents de ceux induits par les smartphones\index{smartphone}.
|
|
||||||
|
|
||||||
\subsubsection{Détection du matériel}
|
|
||||||
La détection\index{détection du matériel} du type de terminal\index{type de terminal} utilisé se fait dans l'entête du document HTML. Il s'agit de la balise du code \ref{listing:detectterm}.
|
|
||||||
|
|
||||||
\begin{lstlisting}[float,language=HTML,caption={Détection du terminal},label={listing:detectterm}]
|
|
||||||
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0" />
|
|
||||||
\end{lstlisting}
|
|
||||||
|
|
||||||
La directive \verb|user-scalable=no| empêche de zoomer et les deux derniers paramètres verrouillent l'échelle. On tient compte des dimensions de l'écran utilisé grâce à l'attribut \verb|width=device-width|.
|
|
||||||
|
|
||||||
\smallskip
|
|
||||||
Il faut relever deux balises meta concernant l'Iphone, notamment pour supprimer la barre d'adresse, qui ne fonctionnent pas sur Androïd\index{Androïd}. Je les ai laissées pour les tests sur Iphone\index{Iphone}.
|
|
||||||
|
|
||||||
\bigskip
|
|
||||||
En fonction de l'écran détecté, on choisit ensuite une feuille de style adaptée à l'aide du \verb|media| de la balise \verb|link|, comme présenté dans le code \ref{listing:feuillesstyle}.
|
|
||||||
|
|
||||||
\begin{lstlisting}[float,language=HTML,caption={Feuilles de style},label={listing:feuillesstyle}]
|
|
||||||
<link rel='stylesheet' href='css/desktop.css' type='text/css' media='screen and (min-width: 481px)' />
|
|
||||||
<link rel='stylesheet' href='css/android.css' type='text/css' media='only screen and (max-width: 480px' />
|
|
||||||
\end{lstlisting}
|
|
||||||
|
|
||||||
On utilise ici les \squote{Media Queries de CSS3}\index{Media Queries}\index{CSS3}. L'attribut \verb|media| permet en effet de spécifier précisément les feuilles de style ou les styles à utiliser en fonction des écrans. Le code \ref{listing:feuillesstyle} présente une manière de faire un choix de feuilles de style en fonction de l'écran, mais on peut aussi écrire cela directement dans un feuille de style, comme présenté dans le code \ref{listing:mediafeuillesstyle}.
|
|
||||||
|
|
||||||
\begin{lstlisting}[float,language=HTML,caption={Media dans une feuille de style},label={listing:mediafeuillesstyle}]
|
|
||||||
@media screen and (min-width: 481px) {
|
|
||||||
regles css;
|
|
||||||
}
|
|
||||||
\end{lstlisting}
|
|
||||||
|
|
||||||
Évidemment, il existe un vocabulaire et une syntaxe simple pour imposer les conditions de choix des écrans (voir \citeweb{wdew}).
|
|
||||||
|
|
||||||
\subsubsection{Les feuilles de style}
|
|
||||||
Les deux feuilles de style présentes \verb|desktop| et \verb|android| sont découpées en trois parties.
|
|
||||||
\begin{description}
|
|
||||||
\item[Paramètres généraux]\index{paramètres généraux} contient les spécifications de la page, du corps, des titres et d'alignements.
|
|
||||||
\item[Paramètres spécifiques]\index{paramètres spécifiques} contient les paramètres relatifs aux boutons, aux balises de sélection, aux listes et aux champs. De plus, on y trouve la description des \squote{boutons} permettant de sélectionner les tests enregistrés.
|
|
||||||
\item[La carte de vocabulaire]\index{carte de vocabulaire} contient la partie la plus conséquente de la feuille de style. Évidemment, il s'agit de la description de la carte de vocabulaire.
|
|
||||||
|
|
||||||
Celle-ci se compose d'une première balise \verb|div| (\#reponse) autour de laquelle on place une petite bordure pour éviter un bord à bord de l'écran.
|
|
||||||
|
|
||||||
Puis vient celle qui représente la carte\index{la carte} (\#carte). Centrée dans la précédente par des marges automatiques, avec une petite bordure et légèrement moins longue que son conteneur, elle présente si possible des bords arrondis d'un rayon de dix pixels.
|
|
||||||
|
|
||||||
A l'intérieur de la carte se trouvent trois balises \verb|input|. L'une (\#mot) permet d'afficher le mot et sa traduction\index{traduction}. Elle est transparente, sans bordure extérieure et fait 60\% de son conteneur. Le reste sert au deux autres boutons. Une bordure intérieure en haut et en bas est fixée. Signalons que la taille de la police n'est pas la même pour le desktop et pour Androïd. Cela dit, il est très difficile de fixer une taille de police pour les smartphones, car des phrases peuvent se trouver dans le vocabulaire à réviser.
|
|
||||||
|
|
||||||
Dans l'espace restant (40\%), on place les \verb|input| associés aux \squote{boutons} pour annuler (\#annuler) et passer au mot suivant (\#suivant). Pas de marges extérieures, pas de bordures, fond transparent, une marge interne haute et basse et une largeur de 20\%.
|
|
||||||
|
|
||||||
Pour faire la différence entre le \squote{bouton} d'annulation et celui pour le mot suivant, on définit la les classe d'\verb|input| gauche et droite comme des flottants\index{flottant} à gauche et à droite.
|
|
||||||
\end{description}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
% -------------------------------------------------------------
|
|
||||||
\begin{comment}
|
\begin{comment}
|
||||||
\begin{table}
|
\begin{itemize}
|
||||||
\begin{tabularx}{\linewidth}{|X|X|X|}
|
|
||||||
\hline \textbf{Type} & \textbf{Communication} & \textbf{Characteristics}\\
|
|
||||||
\hline Memory cards & Using galvanic contact. & Cheap and widely used. Contains only a memory, usually of type EEPROM.\\
|
|
||||||
\hline Microprocessor cards & Using galvanic contact. & Contains a microprocessor which facilitates rapid adaptation to new applications.\\
|
|
||||||
\hline Contact-less smart cards & Without galvanic contact but need to be really close to the reader. & Can be either a memory or a microprocessor card.\\
|
|
||||||
\hline
|
|
||||||
\end{tabularx}
|
|
||||||
\caption{A quick overview of the different smartcards}
|
|
||||||
\label{table:type_of_smartcards}
|
|
||||||
\end{table}
|
|
||||||
|
|
||||||
% Here one can see how to put text between quotes:
|
\item Formatting conventions:
|
||||||
Java enforces the \squote{Write Once, Run Anywhere} principle.
|
\begin{itemize}
|
||||||
|
\item \textbf{Bold} and \textit{italic} are used for emphasis and to signify the first use of a term.
|
||||||
|
|
||||||
% This is the correct way to make reference to a table.
|
\item \url{Sans Serif} is used for web addresses.
|
||||||
A very good overview is given in \tableref{table:type_of_smartcards}.
|
|
||||||
|
|
||||||
% Here we make a reference to a web resource (in the web bibliography).
|
\item \src{Code} is used in all Java code and generally for anything that would be typed literally
|
||||||
These informations were retrieved from \citeweb{wRFIDSoft}.
|
when programming, including keywords, constants, method names, and variables, class names, and interface names.
|
||||||
|
\end{itemize}
|
||||||
|
|
||||||
% Here we make a refernce to a normal resouce (standard bibliography).
|
\item The present report is divided in Chapters. Chapters are broken down into Sections.
|
||||||
A more detailed description is provided by \cite{Shepard}, \cite{Collins} or \cite{Mahmoud}.
|
Where necessary, sections are further broken down into Subsections, and Subsections may
|
||||||
|
contain some Paragraphs.
|
||||||
|
|
||||||
% In-line source code (class names, paths, method names,...)
|
\item \afigurelabel s, \atablelabel s and \alistinglabel s are numbered inside a chapter. For example, a reference
|
||||||
The class which is responsible for all the lookup and caching tasks is \src{ch.unifr.ebay.util.Locator} which implements the \src{ch.unifr.ebay.Lookup} interface. The \src{lookup()} method\footnote{This method is very analog to the \footsrc{lookdown()} method.} is its most relevant service.
|
to
|
||||||
|
\afigurelabel~\textit{j} of Chapter \textit{i} will be noted \textit{\afigurelabel~i.j}.
|
||||||
|
|
||||||
% Use following command to typeset URLs, pathes, email adresses:
|
\item As far as gender is concerned, I systematically select the feminine when possible.
|
||||||
Following file is the root\footnote{This URL is a shortcut to the official website on the University server: \apath{http://www.berkeley.com/cs/student-projects/bobby/index.jsp}}
|
|
||||||
of my report \apath{/home/genius/uni/master/report/src/main.tex} and this URL \apath{http://diuf.unifr.ch/softenggroup/student-projects/completed/05-06/bobmarley/master.php} provides all the related information and stuff. You can send me your comments by email at following adress: \apath{bob.marley@genius.org}
|
|
||||||
|
|
||||||
% Here we have an example of the sinparaenum environment.
|
\item Source code is desplayed as follows:
|
||||||
There are three possibilities:
|
\end{itemize}
|
||||||
\begin{sinparaenum}
|
|
||||||
\item the first;
|
|
||||||
\item the second;
|
|
||||||
\item the third;
|
|
||||||
\end{sinparaenum}
|
|
||||||
to achieve this goal!
|
|
||||||
|
|
||||||
\tmfigureN{smartcard_components}{General structure of a microprocessor smart card}{smartcard_components}
|
\begin{lstlisting}
|
||||||
|
Matrix3f rotMat = new Matrix3f();
|
||||||
% Here you see how to use acronyms. Don't forget to define the meaning of the acronym in the corresponding appendix.
|
rotMat.fromAngleNormalAxis( FastMath.DEG_TO_RAD * 45.0f, new Vector3f( 1.0f, 0.0f, 0.0f));
|
||||||
Do you know about \ac{XML}? The word \ac{XML} is used as an example of acronym here. Each time you use
|
box.setLocalRotation( rotMat );
|
||||||
it, tpye \ac{XML} and Latex will automatically expand the acronym only for its first occurence!
|
\end{lstlisting}
|
||||||
If we need it explained again, you can force the explanation of the acronym by writing \acf{XML}.
|
\end{comment}
|
||||||
|
|
||||||
% If acronyms appear in titles you have to type it manually
|
|
||||||
|
|
||||||
\end{comment}
|
|
||||||
|
|
|
||||||
|
|
@ -1,181 +1,251 @@
|
||||||
\chapter{Les outils spécifiques}\label{outils_specifiques}\index{Outils spécifiques}
|
\chapter{Configuration} \label{chapter:configuration}
|
||||||
\maminitoc
|
\maminitoc
|
||||||
|
|
||||||
\section{Le texte}
|
Ce chapitre présente essentiellement le fichier \src{config.tex} qui permet la configuration générale du travail de maturité.
|
||||||
|
|
||||||
\subsection{Généralités}
|
\section{Config.tex}
|
||||||
Il n'est pas question de faire un cours sur \LaTeX. Vous pouvez trouver avec \cite{Mittelbach}. ou \cite{Desgraupes} des livres de référence de très bon niveau et avec \citeweb{wEdTM} ou \citeweb{wToutLatex} des sites fournissant des ouvrages en PDF qui vous permettrons d'approfondir simplement le sujet. N'oubliez pas non plus l'aide que peuvent vous fournir vos professeurs.
|
|
||||||
|
|
||||||
\smallskip
|
Au \squote{c\oe ur} de la configuration du travail de maturité se trouvent une série de questions posées au rédacteur qui permettent de mettre à sa disposition les différents éléments dont il va avoir besoin. Ces questions se trouvent regroupées dans le fichier \src{config.tex} sous différentes sections.
|
||||||
On se contentera de rappeler ici quelques règles de base qui permettrons à chacun de s'en sortir sans trop de difficultés.
|
|
||||||
|
|
||||||
\smallskip
|
|
||||||
L'utilisation de \LaTeX passe par celle d'un éditeur dédié comme \emph{Texmaker}\index{Texmaker}. On recommande celui-ci car il est libre, gratuit et multiplateforme. Nous ne détaillerons pas son installation. En cas de problèmes, contactez vos professeurs ou une aide en ligne.
|
|
||||||
|
|
||||||
\smallskip
|
|
||||||
Pratiquement, l'édition se fait dans Texmaker sans formatage particulier. Notamment, les retours à la ligne sont gérés automatiquement par l'éditeur. Par contre, les sauts de paragraphes ne correspondent pas dans l'éditeur à de simples retours à la ligne. L'usage courant est de les indiquer par une simple ligne vide. Dans certains cas très particuliers, il est nécessaire d'avoir recours à une double contre-oblique \lstinline!\\!. Mais généralement, il ne faut pas l'utiliser.
|
|
||||||
|
|
||||||
Pour obtenir des espaces particulier entre certains parragraphes, trois commandes sont à disposition :
|
|
||||||
\begin{description}
|
\begin{description}
|
||||||
\item[Petit espace] \lstinline!\smallskip! qui permet un espace entre les paragraphes concernés légèrement plus grand que celui par défaut.
|
\item[La page de titre] S'y trouvent définis les titre et sous-titre du travail, le type de travail, l'auteur, la date et le mentor.
|
||||||
\item[Moyen espace] \lstinline!\medskip! qui donne un espace légèrement plus grand que le précédent et
|
\item[Le pied de page] S'y trouvent définis le domaine, c'est-à-dire l'option spécifique ou autre, du travail ainsi que la langue du pied de page.
|
||||||
\item[Grand espace] \lstinline!\bigskip! qui donne un espace encore plus grand, mais qui reste raisonnable.
|
\item[Citations, remerciements, acronymes, licence, site officiel, cdrom, index] On peut choisir ici de mettre une page contenant une pensée ou citation, une page contenant un préambule, une dédicace, des remerciements, une page contenant un résumé, une page d'acronymes, une page présentant la licence du travail, une page présentant le site associé au travail, une autre le cdrom associé et enfin une page d'index.
|
||||||
|
\item[Chapitres]
|
||||||
|
\item[Listes des figures, tables et listings]
|
||||||
|
\item[Les chapitres]
|
||||||
|
\item[Les figures]
|
||||||
|
\item[Insertion de code : listings]
|
||||||
|
\item[Version provisoire]
|
||||||
|
\item[Le texte]
|
||||||
|
\item[Un index]
|
||||||
\end{description}
|
\end{description}
|
||||||
|
|
||||||
Pour des espacements encore plus grand voyez la littérature.
|
\listingref{listing:manifeste}.
|
||||||
|
|
||||||
Rappelons que le réglage de l'indentation de première ligne se fait dans le fichier de configuration du travail de maturité (voir chapitre \ref{chapter:configuration}).
|
\begin{lstlisting}[float,caption={Le manifeste : manifest.manifest},label={listing:manifeste}]
|
||||||
|
CACHE MANIFEST
|
||||||
|
|
||||||
|
# Version 10.4 (*@ \label{codeline:version} @*)
|
||||||
|
|
||||||
|
# A mettre en cache. Attention, la page index.html est cachee par defaut
|
||||||
|
# comme le manifest lui-meme.
|
||||||
|
CACHE: (*@ \label{codeline:cache} @*)
|
||||||
|
offline.html
|
||||||
|
css/android.css
|
||||||
|
css/desktop.css
|
||||||
|
|
||||||
|
# A aller chercher sur le net (meme s'il est en cache ?)
|
||||||
|
NETWORK: (*@ \label{codeline:network} @*)
|
||||||
|
# Si je decommente la ligne suivante, il refusera le fallback sur offline.html
|
||||||
|
#ONOFFlineTest.html
|
||||||
|
js/h5utils.js
|
||||||
|
|
||||||
|
# A remplacer si la ressource est dans network et qu'on est hors ligne
|
||||||
|
FALLBACK: (*@ \label{codeline:fallback} @*)
|
||||||
|
ONOFFlineTest.html offline/offline.html
|
||||||
|
online/online.html offline/offline.html
|
||||||
|
onlineAccueil,js offlineAccueil.js
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
Ce fichier est découpé en trois parties : la partie CACHE, ligne \ref{codeline:cache}, la partie NETWORK, ligne \ref{codeline:network} et la partie FALLBACK, ligne \ref{codeline:fallback} du listing \ref{listing:manifeste}.
|
||||||
|
|
||||||
|
\subsection{Détection du manifeste}
|
||||||
|
|
||||||
|
|
||||||
|
\begin{comment}
|
||||||
|
% This is the correct way to insert a figure
|
||||||
|
% The 1st argument: the filename (without the extension, the file is located in the figures subfolder)
|
||||||
|
% The 3rd argument: is the caption
|
||||||
|
% The 4th argument: the label (for references)
|
||||||
|
\tmfigureT{barcode}{EAN-8 representation of the number 2402820}{fig:barcode}
|
||||||
|
|
||||||
|
% This is the correct way to make reference to a figure:
|
||||||
|
An EAN-8 representation is show in \figref{fig:barcode}.
|
||||||
|
\end{comment}
|
||||||
|
|
||||||
|
\subsection{Les outils d'analyse} \label{subsec:outils_analyse}
|
||||||
|
|
||||||
|
Un certains nombre d'outils d'analyse\index{outils d'analyse} sont nécessaire pour suivre l'évolution des caches. Sous Firefox, on peut avoir accès aux caches par le code \ref{listing:cachefirefox}.
|
||||||
|
|
||||||
|
\begin{lstlisting}[float,caption={Le cache de Firefox},label={listing:cachefirefox}]
|
||||||
|
about:cache
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
dans la barre d'URL. La figure \figref{fig:about_cache} permet de voir les indications fournies. De plus, une liste des fichiers en cache est disponible, ce qui est très pratique. Sous Chromium\index{Chromium} ou Chrome\index{Chrome}, la commande précédente donne simplement une liste des fichiers en cache, ce qui n'est pas très pratique. Il faut donc passer par les \squote{outils de développement} du menu \squote{outil} qui permettent d'avoir accès aux \squote{Ressources}, notamment le cache d'application. Plus clairement qu'avec Firebug, ces outils de développements proposent alors une liste des fichiers mis en cache d'application.
|
||||||
|
|
||||||
|
% This is the correct way to insert a figure
|
||||||
|
% The 1st argument: the filename (without the extension, the file is located in the figures subfolder)
|
||||||
|
% The 3rd argument: is the caption
|
||||||
|
% The 4th argument: the label (for references)
|
||||||
|
\tmfigureS{about_cache}{Les caches sous Firefox}{fig:about_cache}
|
||||||
|
|
||||||
|
Il faut relever un piège avec Firebug\index{Firebug} sous Firefox. En explorant le DOM\index{DOM}, on trouve l'entrée applicationCache. Or, même si le cache d'application contient des fichiers, cette entrée mentionne toujours \verb=0 items in offline cache=. Pour moi, la raison de ce fait reste encore inexpliquée et elle m'a fait perdre beaucoup de temps.
|
||||||
|
|
||||||
|
Une autre manière de faire est de suivre les transactions à travers les logs du serveur web. Pour Apache, il se trouvent à l'adresse \apath{/var/log/apache2/access.log}.
|
||||||
|
|
||||||
|
Pour voir le fichier, il faut naturellement être en root. On peut alors en voir la fin par la commande \ref{listing:lecturelogs}.
|
||||||
|
|
||||||
|
\begin{lstlisting}[float,caption={Lecture des logs},label={listing:lecturelogs}]
|
||||||
|
tail -f access.log
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
\section{Interface graphique} \index{Interface graphique}
|
||||||
|
|
||||||
|
L'ergonomie d'une application embarquée doit être très claire. Celle d'un site peut être visuellement plus complexe. Il est donc nécessaire de fournir un maximum de renseignements sur le site et d'épurer, de minimiser voire de supprimer ceux-ci dans la version embarquée.
|
||||||
|
|
||||||
|
Pour l'instant, tout est très simple. Aucune recherche particulière n'a été faite pour obtenir une bonne qualité graphique de l'interface. L'idée est de laisser à la bibliothèque \squote{Jquery mobile}\index{Jquery mobile} le soin de réaliser la mise en page. Cela fonctionne en partie. Deux problèmes persistent cependant. Le premier est une certaine lenteur lors des effets graphiques tels que les changement de page. L'autre est la désactivation des feuilles de style\index{feuille de style} de \squote{Jquery mobile} sur la page de la carte de vocabulaire. Je pense pouvoir trouver dans un délai raisonnable une solution à chacun de ces problèmes. Mais, je n'ai pas encore eu le temps de le faire. C'est pourquoi j'ai désactivé \squote{Jquery mobile}.
|
||||||
|
|
||||||
|
Évidemment, l'utilisation de \squote{Jquery mobile} serait un avantage du point de vue de la prise en charge d'une multitude de plateformes sans qu'il soit nécessaire d'effectuer moi-même des test pour chacune d'elles. C'est pourquoi je vais investir encore du temps pour tenter une bonne intégration. Mais, au vu des ralentissements, un développement graphique réalisé par mes soins ou à l'aide d'élèves web-designers reste présent dans mon esprit.
|
||||||
|
|
||||||
|
Je ne mettrai donc pas l'accent ici sur la conception purement graphique de Turn comme la recherche d'une identité graphique\index{identité graphique}, d'une palette de couleurs adaptée (les tons sombres sont plus adéquats sur les smartphones) ou un choix de types de transitions entre les pages. Je vais simplement les présenter et en indiquant leurs besoins en terme d'éléments fonctionnels en tentant une première approche des difficultés liées à leur utilisation sur les téléphones.
|
||||||
|
|
||||||
|
\subsection{Analyse des besoins}
|
||||||
|
|
||||||
|
Divers éléments sont nécessaires dans tous les cas.
|
||||||
|
|
||||||
|
\smallskip
|
||||||
|
Actuellement, on trouve sur la page d'accueil\index{page d'accueil} (voir figure \ref{fig:pageindex}, page \pageref{fig:pageindex}) un petit texte expliquant ce qu'on peut faire en mode connecté ou déconnecté. Puis, se trouve un simple lien vers la page suivante. Il est nécessaire que ce lien apparaisse sous la forme d'un bouton assez grand pour qu'il soit aisé d'appuyer sur celui-ci avec le doigt sur un smartphone. Aucune indication ne devant être transmise à la page suivante, il n'est pas nécessaire d'avoir un vrai bouton.
|
||||||
|
|
||||||
|
\subsubsection{Sur site}
|
||||||
|
Du côté embarqué, vient ensuite la page d'authentification\index{page d'authentification} (voir figure \ref{fig:pageconnection}, page \pageref{fig:pageconnection}). Très simple, elle nécessite trois champs \verb|input| et un lien de retour sur la page d'accueil.
|
||||||
|
|
||||||
|
Les champs font partie d'un formulaire. Le premier permet l'entrée d'un texte, le login\index{login} de l'utilisateur. Le second est de type \verb|password| de manière à ne présenter que des caractères cachés. Le dernier et de type \verb|submit| pour valider le formulaire.
|
||||||
|
|
||||||
|
\smallskip
|
||||||
|
Puis, vient le choix de charger un test déjà enregistré, d'en réaliser un nouveau ou de revenir sur la page d'accueil. Rien de particulier, trois liens suffisent (voir figure \ref{fig:pageonline}, page \pageref{fig:pageonline}).
|
||||||
|
|
||||||
|
\smallskip
|
||||||
|
Du côté du chargement d'un test préenregistré\index{test préenregistré} en ligne, une liste des tests doit apparaître (voir figure \ref{fig:pagetestsEnregistres}, page \pageref{fig:pagetestsEnregistres}). Chaque test est constitué de deux boutons. Le premier pour accéder au test lui-même et le second pour le supprimer. Il s'agit de deux formulaires constitués d'\verb|input| de type \verb|submit|. Mais, il faut relever qu'il a été nécessaire, pour des raisons techniques, d'utiliser un champ caché\index{champ caché}, un \verb|input| de type \verb|hidden|. Nous n'en reparlerons qu'au paragraphe \ref{choix}, puisque aucune mise en forme n'est nécessaire pour lui.
|
||||||
|
|
||||||
|
Puis, deux liens permettant d'effectuer un nouveau test et de revenir sur la page d'accueil sont présenté.
|
||||||
|
|
||||||
|
\smallskip
|
||||||
|
Du côté de la réalisation d'un nouveau test\index{nouveau test}, on commence par présenter une liste des répertoires disponibles (voir figure \ref{fig:pagenouveauTest}, page \pageref{fig:pagenouveauTest}). Cela est réalisé par une balise \verb|select| placée à l'intérieur d'un formulaire. Une liste d'\verb|option| est créée ensuite à l'intérieur du \verb|select|. Un \verb|input| de type \verb|submit| permet d'envoyer le choix effectué.
|
||||||
|
|
||||||
|
\smallskip
|
||||||
|
Puis, on présente les choix de la sélection\index{choix de la sélection}, par page ou par chapitre, et du type\index{type} de test, normal ou inverse (voir figure \ref{fig:pagechoixTypeSelection}, page \pageref{fig:pagechoixTypeSelection}). Il s'agit d'un unique formulaire comprenant deux champs dans lesquels se trouvent chaque fois deux \verb|input| de type \verb|radio| et de même nom dans chaque champ, \verb|selection| ou \verb|type| respectivement. Un champ \verb|submit| termine le tout pour envoyer les données.
|
||||||
|
|
||||||
|
\smallskip
|
||||||
|
Vient enfin la sélection\index{sélection} des chapitres ou pages selon le choix (voir figure \ref{fig:pageselection}, page \pageref{fig:pageselection}). Il s'agit d'un formulaire à l'intérieur duquel se trouve une balise \verb|select| remplie par une liste d'\verb|option| correspondant à chaque chapitre ou page. Il faut relever ici le paramètre \verb|multiple="multiple"| qui permet de sélectionner plusieurs chapitres ou pages simultanément. Le tout est toujours finalement terminé par un champ \verb|submit| pour envoyer les données sélectionnées.
|
||||||
|
|
||||||
\medskip
|
\medskip
|
||||||
La mise en évidence de certains mots dans le texte ne doit surtout pas se faire par une augmentation de la graisse (mise en gras). Une telle technique est réservée aux cas particuliers où il est nécessaire de faire apparaître très fortement certains termes. Elle ne doit être utilisée qu'exceptionnellement.
|
Enfin, vient la carte de vocabulaire\index{carte de vocabulaire} du mode en ligne\index{mode en ligne} (voir figure \ref{fig:pageTest}, page \pageref{fig:pageTest}). Elle est constituée d'un formulaire à l'intérieur duquel se trouve une balise \verb|div| constituant la carte. A l'intérieur de celle-ci se trouvent trois \verb|input| de type \verb|submit| et de même nom \verb|navig|. Le premier, de valeur \verb|X|, correspond au bouton annuler\index{annuler}. Le second, de valeur \verb|<?php echo $mot?>| contient le mot et, quand on le presse, correspond à l'action de retourner la carte\index{retourner la carte} pour faire voir la traduction\index{traduction}. Enfin, le dernier, de valeur \verb|>>| correspond à un changement de carte\index{changement de carte}, c'est-à-dire à un changement de mot.
|
||||||
|
|
||||||
Deux commandes servent généralement à la mise en évidence.
|
Cette structure très simple est suffisante. Seuls la gestion de l'apparence de la carte peut poser quelques problèmes. On verra au paragraphe \ref{css} comment y parvenir sans trop de difficultés.
|
||||||
|
|
||||||
|
\subsubsection{Embarqué}
|
||||||
|
Du côté embarqué\index{embarqué}, on trouve deux pages spécifiques qui correspondent au mode hors ligne\index{mode hors ligne}.
|
||||||
|
|
||||||
|
\smallskip
|
||||||
|
Premièrement, il s'agit de la page de chargement d'un test préenregistré hors ligne (voir figure \ref{fig:pageoffline}, page \pageref{fig:pageoffline}). En raison de l'utilisation de \squote{Javascript}\index{Javascript} pour la gestion des pages hors ligne, celle-ci est très simplement composée d'une balise \verb|div| et d'un lien en retour sur la page d'accueil. A l'intérieur de la balise \verb|div| est inséré dynamiquement par un script \squote{Javascript} deux \verb|input|. Le premier prend une valeur décrivant le vocabulaire mémorisé et réalise sur clic la récupération des mots. Le second prend la valeur \verb|X| et efface le vocabulaire en question.
|
||||||
|
|
||||||
|
\smallskip
|
||||||
|
Secondement, il s'agit de la carte de vocabulaire\index{carte de vocabulaire} du mode hors ligne\index{mode hors ligne}. Son aspect est exactement celui de la carte du mode en ligne (voir figure \ref{fig:pageTest}, page \pageref{fig:pageTest}). Elle est constituée des mêmes éléments, mais les balises d'\verb|input| sont plus simple en raison de l'utilisation de \squote{Javascript}.
|
||||||
|
|
||||||
|
\subsection{CSS}\label{css}\index{CSS}
|
||||||
|
Le projet étant finalement assez simple, seules deux feuilles de style\index{feuille de style} ont été nécessaires. Malgré des redondances entre elles qui auraient pu permettre une fusion en une seule feuille, elles ont été maintenues clairement séparées. En effet, elles correspondent au deux côtés bien distincts du site et de l'embarqué. Pour l'instant beaucoup de choses sont communes, mais à l'avenir cela ne devait plus être le cas, les besoins du site étant très différents de ceux induits par les smartphones\index{smartphone}.
|
||||||
|
|
||||||
|
\subsubsection{Détection du matériel}
|
||||||
|
La détection\index{détection du matériel} du type de terminal\index{type de terminal} utilisé se fait dans l'entête du document HTML. Il s'agit de la balise du code \ref{listing:detectterm}.
|
||||||
|
|
||||||
|
\begin{lstlisting}[float,language=HTML,caption={Détection du terminal},label={listing:detectterm}]
|
||||||
|
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0" />
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
La directive \verb|user-scalable=no| empêche de zoomer et les deux derniers paramètres verrouillent l'échelle. On tient compte des dimensions de l'écran utilisé grâce à l'attribut \verb|width=device-width|.
|
||||||
|
|
||||||
|
\smallskip
|
||||||
|
Il faut relever deux balises meta concernant l'Iphone, notamment pour supprimer la barre d'adresse, qui ne fonctionnent pas sur Androïd\index{Androïd}. Je les ai laissées pour les tests sur Iphone\index{Iphone}.
|
||||||
|
|
||||||
|
\bigskip
|
||||||
|
En fonction de l'écran détecté, on choisit ensuite une feuille de style adaptée à l'aide du \verb|media| de la balise \verb|link|, comme présenté dans le code \ref{listing:feuillesstyle}.
|
||||||
|
|
||||||
|
\begin{lstlisting}[float,language=HTML,caption={Feuilles de style},label={listing:feuillesstyle}]
|
||||||
|
<link rel='stylesheet' href='css/desktop.css' type='text/css' media='screen and (min-width: 481px)' />
|
||||||
|
<link rel='stylesheet' href='css/android.css' type='text/css' media='only screen and (max-width: 480px' />
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
On utilise ici les \squote{Media Queries de CSS3}\index{Media Queries}\index{CSS3}. L'attribut \verb|media| permet en effet de spécifier précisément les feuilles de style ou les styles à utiliser en fonction des écrans. Le code \ref{listing:feuillesstyle} présente une manière de faire un choix de feuilles de style en fonction de l'écran, mais on peut aussi écrire cela directement dans un feuille de style, comme présenté dans le code \ref{listing:mediafeuillesstyle}.
|
||||||
|
|
||||||
|
\begin{lstlisting}[float,language=HTML,caption={Media dans une feuille de style},label={listing:mediafeuillesstyle}]
|
||||||
|
@media screen and (min-width: 481px) {
|
||||||
|
regles css;
|
||||||
|
}
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
Évidemment, il existe un vocabulaire et une syntaxe simple pour imposer les conditions de choix des écrans (voir \citeweb{wdew}).
|
||||||
|
|
||||||
|
\subsubsection{Les feuilles de style}
|
||||||
|
Les deux feuilles de style présentes \verb|desktop| et \verb|android| sont découpées en trois parties.
|
||||||
\begin{description}
|
\begin{description}
|
||||||
\item[L'italique] obtenu par la commande \lstinline!\emph{mot}! et cela produit ceci : \emph{mot}.
|
\item[Paramètres généraux]\index{paramètres généraux} contient les spécifications de la page, du corps, des titres et d'alignements.
|
||||||
\item[Les guillemets] obtenus suivant les cas de deux manières différentes. Pour les guillemets anglais la commande est \lstinline!\squote{mot}! et cela produit ceci : \squote{mot}.
|
\item[Paramètres spécifiques]\index{paramètres spécifiques} contient les paramètres relatifs aux boutons, aux balises de sélection, aux listes et aux champs. De plus, on y trouve la description des \squote{boutons} permettant de sélectionner les tests enregistrés.
|
||||||
|
\item[La carte de vocabulaire]\index{carte de vocabulaire} contient la partie la plus conséquente de la feuille de style. Évidemment, il s'agit de la description de la carte de vocabulaire.
|
||||||
|
|
||||||
Pour les guillemets français, en raison de leur dissymétrie, il faut utiliser les commandes \lstinline!\og! et \lstinline!\fg! en encadrant le mot \lstinline!\og mot\fg! et cela donne : \og mot\fg.
|
Celle-ci se compose d'une première balise \verb|div| (\#reponse) autour de laquelle on place une petite bordure pour éviter un bord à bord de l'écran.
|
||||||
|
|
||||||
|
Puis vient celle qui représente la carte\index{la carte} (\#carte). Centrée dans la précédente par des marges automatiques, avec une petite bordure et légèrement moins longue que son conteneur, elle présente si possible des bords arrondis d'un rayon de dix pixels.
|
||||||
|
|
||||||
|
A l'intérieur de la carte se trouvent trois balises \verb|input|. L'une (\#mot) permet d'afficher le mot et sa traduction\index{traduction}. Elle est transparente, sans bordure extérieure et fait 60\% de son conteneur. Le reste sert au deux autres boutons. Une bordure intérieure en haut et en bas est fixée. Signalons que la taille de la police n'est pas la même pour le desktop et pour Androïd. Cela dit, il est très difficile de fixer une taille de police pour les smartphones, car des phrases peuvent se trouver dans le vocabulaire à réviser.
|
||||||
|
|
||||||
|
Dans l'espace restant (40\%), on place les \verb|input| associés aux \squote{boutons} pour annuler (\#annuler) et passer au mot suivant (\#suivant). Pas de marges extérieures, pas de bordures, fond transparent, une marge interne haute et basse et une largeur de 20\%.
|
||||||
|
|
||||||
|
Pour faire la différence entre le \squote{bouton} d'annulation et celui pour le mot suivant, on définit la les classe d'\verb|input| gauche et droite comme des flottants\index{flottant} à gauche et à droite.
|
||||||
\end{description}
|
\end{description}
|
||||||
|
|
||||||
\subsection{Environnements}
|
|
||||||
L'environnement principal nécessaire dans pratiquement tout travail de maturité est celui correspondant aux citations. Une fois pour toute, un environnement de citation a été défini très clairement. Chaque citation est référencée à l'aide d'un compteur, elle est mise en évidence et son auteur est mentionné en fin de citation.
|
|
||||||
|
|
||||||
L'environnement permettant cela est donné par le code \listingref{listing:citation} qui donne le résultat constitue la citation \ref{wales}.
|
|
||||||
|
|
||||||
\begin{lstlisting}[float,caption={L'environnement de citation},label={listing:citation}]
|
|
||||||
\begin{Citation}{Jimmy Wales. Fondateur de Wikipedia.}\label{wales}
|
|
||||||
Imaginez un monde dans lequel chaque personne pourrait partager librement l'ensemble des connaissances humaines.
|
|
||||||
\end{Citation}
|
|
||||||
\end{lstlisting}
|
|
||||||
|
|
||||||
\begin{Citation}{Jimmy Wales. Fondateur de Wikipedia.}\label{wales}
|
|
||||||
Imaginez un monde dans lequel chaque personne pourrait partager librement l'ensemble des connaissances humaines.
|
|
||||||
\end{Citation}
|
|
||||||
|
|
||||||
\section{Figures}
|
|
||||||
Quatre commandes pour placer des figures sont prévues. Elles permettent de mettre simplement des figures de taille très petite (\lstinline|\tmfigureT|), de taille petite (\lstinline|\tmfigureS|), de taille normale (\lstinline|\tmfigureN|) et de grande taille (\lstinline|\tmfigureB|). Chaque commande prend trois arguments :
|
|
||||||
\begin{enumerate}
|
|
||||||
\item le nom de la figure sans extension,
|
|
||||||
\item sa légende et
|
|
||||||
\item une étiquette qui permet d'en faire la référence dans le texte.
|
|
||||||
\end{enumerate}
|
|
||||||
Ainsi, la commande de placement de chaque figure est donné par le code \listingref{listing:figure}.
|
|
||||||
|
|
||||||
\begin{lstlisting}[float,caption={Les commandes de placement des figures},label={listing:figure}]
|
|
||||||
\tmfigureB{NomFigureSansExtension}{Legende}{fig:votreLabel1} % Taille grande
|
|
||||||
\tmfigureN{NomFigureSansExtension}{Legende}{fig:votreLabel2} % Taille normale
|
|
||||||
\tmfigureS{NomFigureSansExtension}{Legende}{fig:votreLabel3} % Taille petite
|
|
||||||
\tmfigureT{NomFigureSansExtension}{Legende}{fig:votreLabel4} % Taille tres petite
|
|
||||||
\end{lstlisting}
|
|
||||||
|
|
||||||
Pour placer une référence dans le texte, il suffit ensuite de mettre la commmande donnée par le code \listingref{listing:reffigure} là où on souhaite son numéro.
|
|
||||||
|
|
||||||
\begin{lstlisting}[float,caption={La commande de référence à une figure},label={listing:reffigure}]
|
|
||||||
\figref{fig:votreLabelno}
|
|
||||||
\end{lstlisting}
|
|
||||||
|
|
||||||
Le résultat obtenu est présenté aux figures \figref{fig:figgrandetaille}, \figref{fig:figtaillenormale}, \figref{fig:figpetitetaille} et \figref{fig:figtrespetitetaille}.
|
|
||||||
|
|
||||||
\tmfigureB{cdrom}{Une figure de grande taille}{fig:figgrandetaille}
|
|
||||||
\tmfigureN{cdrom}{Une figure de taille normale}{fig:figtaillenormale} % Taille normale
|
|
||||||
\tmfigureS{cdrom}{Une figure de petite taille}{fig:figpetitetaille} % Taille petite
|
|
||||||
\tmfigureT{cdrom}{Une figure de très petite taille}{fig:figtrespetitetaille} % Taille tres petite
|
|
||||||
|
|
||||||
Remarquez enfin, qu'il est possible d'activer ou de désactiver l'affichage d'une page présentant une liste des figures avec une référence aux pages où elles se trouvent. Pour cela, il suffit de mettre Y (es) ou N (o) dans la commande \lstinline|\unelistefig| du fichier de configuration \verb|config.tex|.
|
|
||||||
|
|
||||||
\section{Code source}
|
|
||||||
Pour les travaux de maturité en informatique, il est nécessaire de pouvoir présenter du code. Pour cela on utilise l'environnement \lstinline|lstlisting| (du pacakge listings) que le code \ref{listing:gestioncode} présente et qui constitue en lui-même le résultat qu'on obtient.
|
|
||||||
|
|
||||||
\begin{lstlisting}[float,caption={L'environnement pour placer du code},label={listing:gestioncode}]
|
|
||||||
\begin{lstlisting}[float,caption={Legende du code},label={listing:votreLabel}]
|
|
||||||
Placez le code ici.
|
|
||||||
\end{lstlisting } <- sans l'espace !
|
|
||||||
\end{lstlisting}
|
|
||||||
|
|
||||||
\section{Bibliographie}\index{Bibliographie}\label{bibliographie}
|
|
||||||
Une bibliographie est absolument nécessaire pour un travail de maturité. Cependant, il ne s'agit généralement pas de bibliographies complexes. C'est pourquoi on se limitera ici à une gestion à une gestion très simple de la bibliographie via deux fichiers : \verb|mainbib.bib| et \verb|webbib.bib|. Le premier permet de créer une bibliographie traditionnelle fraite de livres, articles, \dots{} Le second permet une \squote{bibliographie} de sites web.
|
|
||||||
|
|
||||||
\subsection{Sites web}
|
|
||||||
Commençons par les sites web à référencer. Comme pour la bibliographie traditionnelle qu'on va voir plus loin, deux choses sont nécessaires :
|
|
||||||
\begin{itemize}
|
|
||||||
\item Décrire dans le fichier \verb|webbib.bib| les caractéristiques de chaque site. Il s'agit de son titre, son url et la date de la consultation (\emph{obligatoire}). De plus, il faut le lier à une référence qui permettra la citation dans le texte.
|
|
||||||
\item Placer une référence dans le texte pointant sur le site en question.
|
|
||||||
\end{itemize}
|
|
||||||
Pour cela, la structure retenue est celle présentée dans le code \listingref{listing:webbiblio}.
|
|
||||||
|
|
||||||
\begin{lstlisting}[float,caption={La référence à un site web},label={listing:webbiblio}]
|
|
||||||
@MISC{mareference,
|
|
||||||
title = {{Le titre}},
|
|
||||||
note = {\biburl{http://www.adresse/a/referencer.html}{12}{janvier}{2006}},
|
|
||||||
key = {cle_alphabetique}
|
|
||||||
}
|
|
||||||
\end{lstlisting}
|
|
||||||
|
|
||||||
Remarquez les doubles accolades pour le titre, la commande \lstinline|\biburl{...}| pour l'adresse et le fait que la référence est libre, mais unique, sans espace, sans accents et sans caractères particuliers.
|
|
||||||
|
|
||||||
\smallskip
|
|
||||||
Pour placer la référence, il faut utiliser la commande \lstinline|\citeweb{mareference}|. Elle se met directement dans le texte et sera traduite à la compilation en un numéro permettant de retrouver le site dans la liste des sites web en fin de document.
|
|
||||||
|
|
||||||
Par exemple, en plaçant la commande \lstinline|\citeweb{wGNUDoc}| dans ce texte, on obtient la référence \citeweb{wGNUDoc} dont le numéro, qui figure dans la liste des sites web à la fin de ce document, réfère au site contenant le texte de la licence libre GFDL.
|
|
||||||
|
|
||||||
\smallskip
|
|
||||||
Attention cependant, la référence ne doit pas être confondue avec la clé (key) qui permet, en l'absence de nom d'auteur, de trier alphabétiquement les références dans la liste des sites web.
|
|
||||||
|
|
||||||
\smallskip
|
|
||||||
Attention aussi à la procédure permettant de réaliser la ''bibliographie'' des sites web. Elle est issue du module \verb|multibib| qui permet de réaliser les deux bibliographies. Il s'agit tout d'abord de faire appel à la commande :
|
|
||||||
\begin{verbatim}
|
|
||||||
bibtex web
|
|
||||||
\end{verbatim}
|
|
||||||
dans le répertoire principal (où se trouve le fichier \verb|main.tex|). Puis, de recompiler \verb|main.tex| au moins deux fois.
|
|
||||||
|
|
||||||
\smallskip
|
|
||||||
Remarquez enfin, que si aucune référence \lstinline|\citeweb{unereference}| ne se trouve dans le texte, la page de référence des sites web n'appraîtra pas, même si des entrées figurent dans le fichier \verb|webbib.bib|.
|
|
||||||
|
|
||||||
\subsection{Bibliographie}
|
|
||||||
Pour la bibliographie traditionnelle, les choses sont assez identiques. Deux choses sont aussi nécessaires :
|
|
||||||
\begin{itemize}
|
|
||||||
\item Décrire dans le fichier \verb|mainbib.bib| les caractéristiques de chaque ouvrage. Il s'agit de différents champs qui sont fonction du type d'ouvrage décrit. Des exemples sont donnés et sous la mention bibtex, on en trouve d'autres sur le net. De plus, il faut lier chaque ouvrage à une référence qui permettra la citation dans le texte.
|
|
||||||
\item Placer une référence dans le texte pointant sur le site en question.
|
|
||||||
\end{itemize}
|
|
||||||
Pour cela, la structure retenue est celle présentée dans le code \listingref{listing:ouvragebiblio}.
|
|
||||||
|
|
||||||
\begin{lstlisting}[float,caption={La référence à un ouvrage},label={listing:ouvragebiblio}]
|
|
||||||
@Book{Heurtel,
|
|
||||||
author = {Olivier Heurtel},
|
|
||||||
title = {PHP 5.3},
|
|
||||||
publisher = {eni editions},
|
|
||||||
year = {2010},
|
|
||||||
note = {Interessant et assez complet.}}
|
|
||||||
|
|
||||||
@Article{GuidonC,
|
|
||||||
author = {Yann Guidon},
|
|
||||||
title = {Plus leger, plus rapide : compactez votre site web},
|
|
||||||
journal = {Linux Magazine France},
|
|
||||||
year = {2011},
|
|
||||||
volume = {144},
|
|
||||||
number = {1 et 2},
|
|
||||||
pages = {78-98},
|
|
||||||
month = {decembre},
|
|
||||||
note = {Article assez complexe.}}
|
|
||||||
\end{lstlisting}
|
|
||||||
|
|
||||||
Ici deux types d'ouvrages sont décrits : un livre et un article. A chaque type d'ouvrage correspond une série de champs descriptifs qui lui est propre.
|
|
||||||
|
|
||||||
\smallskip
|
|
||||||
Pour placer la référence, il faut utiliser la commande \lstinline|\cite{Heurtel}|, par exemple. Elle se met directement dans le texte et sera traduite à la compilation en un une référence faite des trois premières lettres du nom de l'auteur accolées à l'année de plublication et permettant de retrouver le site dans la liste des sites web en fin de document.
|
|
||||||
|
|
||||||
Par exemple, en plaçant la commande \lstinline|\cite{Heurtel}| dans ce texte, on obtient \cite{Heurtel} dont la référence, qui figure dans la liste des ouvrages à la fin de ce document, mène au livre \squote{PHP 5.3}.
|
|
||||||
|
|
||||||
\smallskip
|
|
||||||
Attention à la procédure permettant de réaliser la ''bibliographie'' traditionnelle. Elle est issue du module \verb|multibib| qui permet de réaliser les deux bibliographies. Il s'agit tout d'abord de faire appel à la commande :
|
|
||||||
\begin{verbatim}
|
|
||||||
bibtex main
|
|
||||||
\end{verbatim}
|
|
||||||
dans le répertoire principal (où se trouve le fichier \verb|main.tex|). Puis, de recompiler \verb|main.tex| au moins deux fois.
|
|
||||||
|
|
||||||
\smallskip
|
|
||||||
Remarquez enfin, que si aucune référence \lstinline|\citeweb{unereference}| ne se trouve dans le texte, la page de référence des sites web n'appraîtra pas, même si des entrées figurent dans le fichier \verb|webbib.bib|.
|
|
||||||
|
|
||||||
|
|
||||||
\section{Index}\index{Index}\label{index}
|
|
||||||
Il n'est absolument pas nécessaire de réaliser un index pour un travail de maturité. La possibilité de le faire a néanmoins été maintenue au cas ou cela s'avèrerais nécessaire pour un raison ou une autre.
|
% -------------------------------------------------------------
|
||||||
|
\begin{comment}
|
||||||
|
\begin{table}
|
||||||
|
\begin{tabularx}{\linewidth}{|X|X|X|}
|
||||||
|
\hline \textbf{Type} & \textbf{Communication} & \textbf{Characteristics}\\
|
||||||
|
\hline Memory cards & Using galvanic contact. & Cheap and widely used. Contains only a memory, usually of type EEPROM.\\
|
||||||
|
\hline Microprocessor cards & Using galvanic contact. & Contains a microprocessor which facilitates rapid adaptation to new applications.\\
|
||||||
|
\hline Contact-less smart cards & Without galvanic contact but need to be really close to the reader. & Can be either a memory or a microprocessor card.\\
|
||||||
|
\hline
|
||||||
|
\end{tabularx}
|
||||||
|
\caption{A quick overview of the different smartcards}
|
||||||
|
\label{table:type_of_smartcards}
|
||||||
|
\end{table}
|
||||||
|
|
||||||
|
% Here one can see how to put text between quotes:
|
||||||
|
Java enforces the \squote{Write Once, Run Anywhere} principle.
|
||||||
|
|
||||||
|
% This is the correct way to make reference to a table.
|
||||||
|
A very good overview is given in \tableref{table:type_of_smartcards}.
|
||||||
|
|
||||||
|
% Here we make a reference to a web resource (in the web bibliography).
|
||||||
|
These informations were retrieved from \citeweb{wRFIDSoft}.
|
||||||
|
|
||||||
|
% Here we make a refernce to a normal resouce (standard bibliography).
|
||||||
|
A more detailed description is provided by \cite{Shepard}, \cite{Collins} or \cite{Mahmoud}.
|
||||||
|
|
||||||
|
% In-line source code (class names, paths, method names,...)
|
||||||
|
The class which is responsible for all the lookup and caching tasks is \src{ch.unifr.ebay.util.Locator} which implements the \src{ch.unifr.ebay.Lookup} interface. The \src{lookup()} method\footnote{This method is very analog to the \footsrc{lookdown()} method.} is its most relevant service.
|
||||||
|
|
||||||
|
% Use following command to typeset URLs, pathes, email adresses:
|
||||||
|
Following file is the root\footnote{This URL is a shortcut to the official website on the University server: \apath{http://www.berkeley.com/cs/student-projects/bobby/index.jsp}}
|
||||||
|
of my report \apath{/home/genius/uni/master/report/src/main.tex} and this URL \apath{http://diuf.unifr.ch/softenggroup/student-projects/completed/05-06/bobmarley/master.php} provides all the related information and stuff. You can send me your comments by email at following adress: \apath{bob.marley@genius.org}
|
||||||
|
|
||||||
|
% Here we have an example of the sinparaenum environment.
|
||||||
|
There are three possibilities:
|
||||||
|
\begin{sinparaenum}
|
||||||
|
\item the first;
|
||||||
|
\item the second;
|
||||||
|
\item the third;
|
||||||
|
\end{sinparaenum}
|
||||||
|
to achieve this goal!
|
||||||
|
|
||||||
|
\tmfigureN{smartcard_components}{General structure of a microprocessor smart card}{smartcard_components}
|
||||||
|
|
||||||
|
% Here you see how to use acronyms. Don't forget to define the meaning of the acronym in the corresponding appendix.
|
||||||
|
Do you know about \ac{XML}? The word \ac{XML} is used as an example of acronym here. Each time you use
|
||||||
|
it, tpye \ac{XML} and Latex will automatically expand the acronym only for its first occurence!
|
||||||
|
If we need it explained again, you can force the explanation of the acronym by writing \acf{XML}.
|
||||||
|
|
||||||
|
% If acronyms appear in titles you have to type it manually
|
||||||
|
|
||||||
|
\end{comment}
|
||||||
|
|
@ -1,35 +1,181 @@
|
||||||
\chapter{Structure et compilation}\label{suite}\index{suite}
|
\chapter{Les outils spécifiques}\label{outils_specifiques}\index{Outils spécifiques}
|
||||||
Sans revenir sur le fonctionnement de \LaTeX, rappelons qu'il est nécessaire de passer par une étape de compilation pour obtenir le document final. Cette compilation nécessite l'utilisation d'un grand nombre de fichiers qui sont organisés selon une structure bien précise.
|
\maminitoc
|
||||||
|
|
||||||
\section{Structure de fichiers}
|
\section{Le texte}
|
||||||
|
|
||||||
\subsection{Description}
|
\subsection{Généralités}
|
||||||
Pour s'y retrouver dans la multitude des fichiers qui peuplent le répertoire dans lequel se trouve le modèle de travail de maturité, il faut partir de la racine du projet, c'est à dire le répertoire dans lequel se trouve le fichier principal nommé : \verb|main.tex|. A l'intérieur de celui-ci se trouvent plusieurs répertoires : \verb|pagesspeciales|, \verb|chapitres|, \verb|images| et \verb|code_source| et plusieurs fichiers : toute une série de \verb|main.|, des \verb|config.|, des \verb|TM.|, des \verb|web| et \verb|fancyheadings.sty|, \verb|multibib.sty| et \verb|licence.txt|.
|
Il n'est pas question de faire un cours sur \LaTeX. Vous pouvez trouver avec \cite{Mittelbach}. ou \cite{Desgraupes} des livres de référence de très bon niveau et avec \citeweb{wEdTM} ou \citeweb{wToutLatex} des sites fournissant des ouvrages en PDF qui vous permettrons d'approfondir simplement le sujet. N'oubliez pas non plus l'aide que peuvent vous fournir vos professeurs.
|
||||||
|
|
||||||
Les \verb|main.| sont issus de la compilation. A part \verb|main.tex|, il ne faut pas les toucher. Même \verb|main.tex| ne devrait pas être modifié. On ne doit que le compiler.
|
\smallskip
|
||||||
|
On se contentera de rappeler ici quelques règles de base qui permettrons à chacun de s'en sortir sans trop de difficultés.
|
||||||
|
|
||||||
Parmis les \verb|config.|, seul le fichier \verb|config.tex| doit être parcouru pour définir les réglages à faire pour adapter le modèle de travail de maturité à son propre travail de maturité. Il doit être impérativement lu.
|
\smallskip
|
||||||
|
L'utilisation de \LaTeX passe par celle d'un éditeur dédié comme \emph{Texmaker}\index{Texmaker}. On recommande celui-ci car il est libre, gratuit et multiplateforme. Nous ne détaillerons pas son installation. En cas de problèmes, contactez vos professeurs ou une aide en ligne.
|
||||||
|
|
||||||
Parmis les \verb|TM.|, l'élément central est \verb|TM.sty|. C'est le fichier de macros qui permet le fonctionnement du modèle de travail de maturité. Il ne faut pas le toucher.
|
\smallskip
|
||||||
|
Pratiquement, l'édition se fait dans Texmaker sans formatage particulier. Notamment, les retours à la ligne sont gérés automatiquement par l'éditeur. Par contre, les sauts de paragraphes ne correspondent pas dans l'éditeur à de simples retours à la ligne. L'usage courant est de les indiquer par une simple ligne vide. Dans certains cas très particuliers, il est nécessaire d'avoir recours à une double contre-oblique \lstinline!\\!. Mais généralement, il ne faut pas l'utiliser.
|
||||||
|
|
||||||
Les \verb|web| servent à la bibliographie des pages web. Le fichier permettand de répertorier les différents sites web est \verb|webbib.bib|. C'est celui-ci qu'il faut remplir des références web. De la même manière, c'est le fichier \verb|mainbib.bib| qu'il faut remplir des références pour la bibliographie classique.
|
Pour obtenir des espaces particulier entre certains parragraphes, trois commandes sont à disposition :
|
||||||
|
\begin{description}
|
||||||
|
\item[Petit espace] \lstinline!\smallskip! qui permet un espace entre les paragraphes concernés légèrement plus grand que celui par défaut.
|
||||||
|
\item[Moyen espace] \lstinline!\medskip! qui donne un espace légèrement plus grand que le précédent et
|
||||||
|
\item[Grand espace] \lstinline!\bigskip! qui donne un espace encore plus grand, mais qui reste raisonnable.
|
||||||
|
\end{description}
|
||||||
|
|
||||||
Finalement, les fichiers \verb|fancyheadings.sty| et \verb|multibib.sty| sont nécessaires pour les entêtes et les deux bibliographies. Il ne faut pas les toucher. Le fichier \verb|licence.txt| donne lui le texte de la licence du travail.
|
Pour des espacements encore plus grand voyez la littérature.
|
||||||
|
|
||||||
\bigskip
|
Rappelons que le réglage de l'indentation de première ligne se fait dans le fichier de configuration du travail de maturité (voir chapitre \ref{chapter:configuration}).
|
||||||
Dans le répertoire \verb|pagesspéciales|, se trouvent les fichiers nécessaires à la définition des pages spéciales comme la page de titre (\verb|pagetitre.tex|), la page de citation et dédicaces (\verb|citations.tex|), la page de remerciements (\verb|remerciements.tex|, la page du résumé (\verb|resume.tex|, la page des acronymes (\verb|acronymes.tex|) et la page décrivant le site web éventuellement associé au travail de maturité (\verb|website.tex|).
|
|
||||||
|
|
||||||
Dans le répertoire \verb|chapitres| se trouvent les différents chapitres du travail de maturité, ainsi que son introduction et sa conclusion. C'est dans ceux-ci qu'il faut travailler.
|
\medskip
|
||||||
|
La mise en évidence de certains mots dans le texte ne doit surtout pas se faire par une augmentation de la graisse (mise en gras). Une telle technique est réservée aux cas particuliers où il est nécessaire de faire apparaître très fortement certains termes. Elle ne doit être utilisée qu'exceptionnellement.
|
||||||
|
|
||||||
Dans le répertoire \verb|images| se trouvent les images du travail de maturité. Elles doivent figurer sous deux formes : .eps et .jpg ou .png. Généralement on y met une version .eps et une version .jpg de chaque image.
|
Deux commandes servent généralement à la mise en évidence.
|
||||||
|
\begin{description}
|
||||||
|
\item[L'italique] obtenu par la commande \lstinline!\emph{mot}! et cela produit ceci : \emph{mot}.
|
||||||
|
\item[Les guillemets] obtenus suivant les cas de deux manières différentes. Pour les guillemets anglais la commande est \lstinline!\squote{mot}! et cela produit ceci : \squote{mot}.
|
||||||
|
|
||||||
Finalement, dans le répertoire \verb|code_source| se trouvent éventuellement des codes sources informatiques qui vont figurer dans le travail de maturité.
|
Pour les guillemets français, en raison de leur dissymétrie, il faut utiliser les commandes \lstinline!\og! et \lstinline!\fg! en encadrant le mot \lstinline!\og mot\fg! et cela donne : \og mot\fg.
|
||||||
|
\end{description}
|
||||||
|
|
||||||
\subsection{Pratiquement}
|
\subsection{Environnements}
|
||||||
Le modèle de travail de maturité se présente sous le forme d'un répertoire zippé. Il faut donc tout d'abord le décompresser et lire le fichier \verb|Lisez-moi.txt| qui va vous diriger vers le présent texte qu'il faut lire.
|
L'environnement principal nécessaire dans pratiquement tout travail de maturité est celui correspondant aux citations. Une fois pour toute, un environnement de citation a été défini très clairement. Chaque citation est référencée à l'aide d'un compteur, elle est mise en évidence et son auteur est mentionné en fin de citation.
|
||||||
|
|
||||||
Puis, il faut tenter une première compilation du fichier \verb|main.tex| pour détecter d'éventuelles erreurs dues à l'éventuelle absence de packages nécessaires. Si c'est le cas, il faut les installer et refaire la compilation jusqu'à ce qu'il n'y ait plus d'erreurs.
|
L'environnement permettant cela est donné par le code \listingref{listing:citation} qui donne le résultat constitue la citation \ref{wales}.
|
||||||
|
|
||||||
Alors le travail peut commencer.
|
\begin{lstlisting}[float,caption={L'environnement de citation},label={listing:citation}]
|
||||||
|
\begin{Citation}{Jimmy Wales. Fondateur de Wikipedia.}\label{wales}
|
||||||
|
Imaginez un monde dans lequel chaque personne pourrait partager librement l'ensemble des connaissances humaines.
|
||||||
|
\end{Citation}
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
\section{Compilation}
|
\begin{Citation}{Jimmy Wales. Fondateur de Wikipedia.}\label{wales}
|
||||||
|
Imaginez un monde dans lequel chaque personne pourrait partager librement l'ensemble des connaissances humaines.
|
||||||
|
\end{Citation}
|
||||||
|
|
||||||
|
\section{Figures}
|
||||||
|
Quatre commandes pour placer des figures sont prévues. Elles permettent de mettre simplement des figures de taille très petite (\lstinline|\tmfigureT|), de taille petite (\lstinline|\tmfigureS|), de taille normale (\lstinline|\tmfigureN|) et de grande taille (\lstinline|\tmfigureB|). Chaque commande prend trois arguments :
|
||||||
|
\begin{enumerate}
|
||||||
|
\item le nom de la figure sans extension,
|
||||||
|
\item sa légende et
|
||||||
|
\item une étiquette qui permet d'en faire la référence dans le texte.
|
||||||
|
\end{enumerate}
|
||||||
|
Ainsi, la commande de placement de chaque figure est donné par le code \listingref{listing:figure}.
|
||||||
|
|
||||||
|
\begin{lstlisting}[float,caption={Les commandes de placement des figures},label={listing:figure}]
|
||||||
|
\tmfigureB{NomFigureSansExtension}{Legende}{fig:votreLabel1} % Taille grande
|
||||||
|
\tmfigureN{NomFigureSansExtension}{Legende}{fig:votreLabel2} % Taille normale
|
||||||
|
\tmfigureS{NomFigureSansExtension}{Legende}{fig:votreLabel3} % Taille petite
|
||||||
|
\tmfigureT{NomFigureSansExtension}{Legende}{fig:votreLabel4} % Taille tres petite
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
Pour placer une référence dans le texte, il suffit ensuite de mettre la commmande donnée par le code \listingref{listing:reffigure} là où on souhaite son numéro.
|
||||||
|
|
||||||
|
\begin{lstlisting}[float,caption={La commande de référence à une figure},label={listing:reffigure}]
|
||||||
|
\figref{fig:votreLabelno}
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
Le résultat obtenu est présenté aux figures \figref{fig:figgrandetaille}, \figref{fig:figtaillenormale}, \figref{fig:figpetitetaille} et \figref{fig:figtrespetitetaille}.
|
||||||
|
|
||||||
|
\tmfigureB{cdrom}{Une figure de grande taille}{fig:figgrandetaille}
|
||||||
|
\tmfigureN{cdrom}{Une figure de taille normale}{fig:figtaillenormale} % Taille normale
|
||||||
|
\tmfigureS{cdrom}{Une figure de petite taille}{fig:figpetitetaille} % Taille petite
|
||||||
|
\tmfigureT{cdrom}{Une figure de très petite taille}{fig:figtrespetitetaille} % Taille tres petite
|
||||||
|
|
||||||
|
Remarquez enfin, qu'il est possible d'activer ou de désactiver l'affichage d'une page présentant une liste des figures avec une référence aux pages où elles se trouvent. Pour cela, il suffit de mettre Y (es) ou N (o) dans la commande \lstinline|\unelistefig| du fichier de configuration \verb|config.tex|.
|
||||||
|
|
||||||
|
\section{Code source}
|
||||||
|
Pour les travaux de maturité en informatique, il est nécessaire de pouvoir présenter du code. Pour cela on utilise l'environnement \lstinline|lstlisting| (du pacakge listings) que le code \ref{listing:gestioncode} présente et qui constitue en lui-même le résultat qu'on obtient.
|
||||||
|
|
||||||
|
\begin{lstlisting}[float,caption={L'environnement pour placer du code},label={listing:gestioncode}]
|
||||||
|
\begin{lstlisting}[float,caption={Legende du code},label={listing:votreLabel}]
|
||||||
|
Placez le code ici.
|
||||||
|
\end{lstlisting } <- sans l'espace !
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
\section{Bibliographie}\index{Bibliographie}\label{bibliographie}
|
||||||
|
Une bibliographie est absolument nécessaire pour un travail de maturité. Cependant, il ne s'agit généralement pas de bibliographies complexes. C'est pourquoi on se limitera ici à une gestion à une gestion très simple de la bibliographie via deux fichiers : \verb|mainbib.bib| et \verb|webbib.bib|. Le premier permet de créer une bibliographie traditionnelle fraite de livres, articles, \dots{} Le second permet une \squote{bibliographie} de sites web.
|
||||||
|
|
||||||
|
\subsection{Sites web}
|
||||||
|
Commençons par les sites web à référencer. Comme pour la bibliographie traditionnelle qu'on va voir plus loin, deux choses sont nécessaires :
|
||||||
|
\begin{itemize}
|
||||||
|
\item Décrire dans le fichier \verb|webbib.bib| les caractéristiques de chaque site. Il s'agit de son titre, son url et la date de la consultation (\emph{obligatoire}). De plus, il faut le lier à une référence qui permettra la citation dans le texte.
|
||||||
|
\item Placer une référence dans le texte pointant sur le site en question.
|
||||||
|
\end{itemize}
|
||||||
|
Pour cela, la structure retenue est celle présentée dans le code \listingref{listing:webbiblio}.
|
||||||
|
|
||||||
|
\begin{lstlisting}[float,caption={La référence à un site web},label={listing:webbiblio}]
|
||||||
|
@MISC{mareference,
|
||||||
|
title = {{Le titre}},
|
||||||
|
note = {\biburl{http://www.adresse/a/referencer.html}{12}{janvier}{2006}},
|
||||||
|
key = {cle_alphabetique}
|
||||||
|
}
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
Remarquez les doubles accolades pour le titre, la commande \lstinline|\biburl{...}| pour l'adresse et le fait que la référence est libre, mais unique, sans espace, sans accents et sans caractères particuliers.
|
||||||
|
|
||||||
|
\smallskip
|
||||||
|
Pour placer la référence, il faut utiliser la commande \lstinline|\citeweb{mareference}|. Elle se met directement dans le texte et sera traduite à la compilation en un numéro permettant de retrouver le site dans la liste des sites web en fin de document.
|
||||||
|
|
||||||
|
Par exemple, en plaçant la commande \lstinline|\citeweb{wGNUDoc}| dans ce texte, on obtient la référence \citeweb{wGNUDoc} dont le numéro, qui figure dans la liste des sites web à la fin de ce document, réfère au site contenant le texte de la licence libre GFDL.
|
||||||
|
|
||||||
|
\smallskip
|
||||||
|
Attention cependant, la référence ne doit pas être confondue avec la clé (key) qui permet, en l'absence de nom d'auteur, de trier alphabétiquement les références dans la liste des sites web.
|
||||||
|
|
||||||
|
\smallskip
|
||||||
|
Attention aussi à la procédure permettant de réaliser la ''bibliographie'' des sites web. Elle est issue du module \verb|multibib| qui permet de réaliser les deux bibliographies. Il s'agit tout d'abord de faire appel à la commande :
|
||||||
|
\begin{verbatim}
|
||||||
|
bibtex web
|
||||||
|
\end{verbatim}
|
||||||
|
dans le répertoire principal (où se trouve le fichier \verb|main.tex|). Puis, de recompiler \verb|main.tex| au moins deux fois.
|
||||||
|
|
||||||
|
\smallskip
|
||||||
|
Remarquez enfin, que si aucune référence \lstinline|\citeweb{unereference}| ne se trouve dans le texte, la page de référence des sites web n'appraîtra pas, même si des entrées figurent dans le fichier \verb|webbib.bib|.
|
||||||
|
|
||||||
|
\subsection{Bibliographie}
|
||||||
|
Pour la bibliographie traditionnelle, les choses sont assez identiques. Deux choses sont aussi nécessaires :
|
||||||
|
\begin{itemize}
|
||||||
|
\item Décrire dans le fichier \verb|mainbib.bib| les caractéristiques de chaque ouvrage. Il s'agit de différents champs qui sont fonction du type d'ouvrage décrit. Des exemples sont donnés et sous la mention bibtex, on en trouve d'autres sur le net. De plus, il faut lier chaque ouvrage à une référence qui permettra la citation dans le texte.
|
||||||
|
\item Placer une référence dans le texte pointant sur le site en question.
|
||||||
|
\end{itemize}
|
||||||
|
Pour cela, la structure retenue est celle présentée dans le code \listingref{listing:ouvragebiblio}.
|
||||||
|
|
||||||
|
\begin{lstlisting}[float,caption={La référence à un ouvrage},label={listing:ouvragebiblio}]
|
||||||
|
@Book{Heurtel,
|
||||||
|
author = {Olivier Heurtel},
|
||||||
|
title = {PHP 5.3},
|
||||||
|
publisher = {eni editions},
|
||||||
|
year = {2010},
|
||||||
|
note = {Interessant et assez complet.}}
|
||||||
|
|
||||||
|
@Article{GuidonC,
|
||||||
|
author = {Yann Guidon},
|
||||||
|
title = {Plus leger, plus rapide : compactez votre site web},
|
||||||
|
journal = {Linux Magazine France},
|
||||||
|
year = {2011},
|
||||||
|
volume = {144},
|
||||||
|
number = {1 et 2},
|
||||||
|
pages = {78-98},
|
||||||
|
month = {decembre},
|
||||||
|
note = {Article assez complexe.}}
|
||||||
|
\end{lstlisting}
|
||||||
|
|
||||||
|
Ici deux types d'ouvrages sont décrits : un livre et un article. A chaque type d'ouvrage correspond une série de champs descriptifs qui lui est propre.
|
||||||
|
|
||||||
|
\smallskip
|
||||||
|
Pour placer la référence, il faut utiliser la commande \lstinline|\cite{Heurtel}|, par exemple. Elle se met directement dans le texte et sera traduite à la compilation en un une référence faite des trois premières lettres du nom de l'auteur accolées à l'année de plublication et permettant de retrouver le site dans la liste des sites web en fin de document.
|
||||||
|
|
||||||
|
Par exemple, en plaçant la commande \lstinline|\cite{Heurtel}| dans ce texte, on obtient \cite{Heurtel} dont la référence, qui figure dans la liste des ouvrages à la fin de ce document, mène au livre \squote{PHP 5.3}.
|
||||||
|
|
||||||
|
\smallskip
|
||||||
|
Attention à la procédure permettant de réaliser la ''bibliographie'' traditionnelle. Elle est issue du module \verb|multibib| qui permet de réaliser les deux bibliographies. Il s'agit tout d'abord de faire appel à la commande :
|
||||||
|
\begin{verbatim}
|
||||||
|
bibtex main
|
||||||
|
\end{verbatim}
|
||||||
|
dans le répertoire principal (où se trouve le fichier \verb|main.tex|). Puis, de recompiler \verb|main.tex| au moins deux fois.
|
||||||
|
|
||||||
|
\smallskip
|
||||||
|
Remarquez enfin, que si aucune référence \lstinline|\citeweb{unereference}| ne se trouve dans le texte, la page de référence des sites web n'appraîtra pas, même si des entrées figurent dans le fichier \verb|webbib.bib|.
|
||||||
|
|
||||||
|
|
||||||
|
\section{Index}\index{Index}\label{index}
|
||||||
|
Il n'est absolument pas nécessaire de réaliser un index pour un travail de maturité. La possibilité de le faire a néanmoins été maintenue au cas ou cela s'avèrerais nécessaire pour un raison ou une autre.
|
||||||
|
|
|
||||||
7
main.tex
7
main.tex
|
|
@ -35,8 +35,11 @@
|
||||||
% Plusieurs éléments de présentation aidant à la rédaction seront alors retirés (filigrane, notes de todo, repère de lignes trop longues, ...)
|
% Plusieurs éléments de présentation aidant à la rédaction seront alors retirés (filigrane, notes de todo, repère de lignes trop longues, ...)
|
||||||
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||||||
|
|
||||||
\documentclass[12pt,a4paper,idxtotoc,bibtotoc,francais,titlepage,twoside,openright,draft]{book}
|
\documentclass[12pt,a4paper,francais,titlepage,twoside,openright,draft]{book}
|
||||||
%\documentclass[12pt,a4paper,idxtotoc,bibtotoc,francais,titlepage,twoside,openright]{book}
|
%\documentclass[12pt,a4paper,francais,titlepage,twoside,openright]{book}
|
||||||
|
|
||||||
|
% Pour mémoire, ne pas en tenir compte
|
||||||
|
%\documentclass[12pt,a4paper,idxtotoc,bibtotoc,francais,titlepage,twoside,openright,draft]{book}
|
||||||
|
|
||||||
%------ DÉBUT DU PRÉAMBULE --------
|
%------ DÉBUT DU PRÉAMBULE --------
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue