2011-m1s2-ter/presentation/presentation.tex

673 lines
24 KiB
TeX

\documentclass{beamer}
\usepackage[utf8]{inputenc}
\usepackage[frenchb]{babel}
\usepackage{tikz}
\usepackage{subfigure}
\usepackage[scriptsize]{caption}
\usepackage{multicol}
\renewcommand*{\figurename}{}
\usetikzlibrary{shapes,positioning,snakes,calc}
\usetheme{Darmstadt}
% \setbeamercolor{alerted text}{fg=blue}
\def\android{Android\texttrademark}
\title{FMIN200 \\ TER~: Reconception du jeu PtiClic sous \android{}}
\author{DUPÉRON Georges \and\\ CHARRON John \and\\ BRUN Bertrand \and\\ BONAVERO Yoann}
\institute{Université Montpellier II, Département informatique \\ Master 1 IFPRU \\ Sous la direction de Monsieur Mathieu LAFOURCADE}
\date{Jeudi, 26 mai 2011}
\defbeamertemplate*{footline}{shadow theme}
{%
\leavevmode%
\hbox{\begin{beamercolorbox}[wd=.5\paperwidth,ht=2.5ex,dp=1.125ex,leftskip=.3cm plus1fil,rightskip=.3cm]{author in head/foot}%
\usebeamerfont{author in head/foot}\insertframenumber\,/\,\inserttotalframenumber\hfill\url{http://www.pticlic.fr/}
\end{beamercolorbox}%
\begin{beamercolorbox}[wd=.5\paperwidth,ht=2.5ex,dp=1.125ex,leftskip=.3cm,rightskip=.3cm plus1fil]{title in head/foot}%
\usebeamerfont{title in head/foot}\insertshorttitle%
\end{beamercolorbox}}%
\vskip0pt%
}
\begin{document}
\renewcommand*{\figurename}{}
\begin{frame}
\titlepage
\end{frame}
% John
\section{Introduction}
\begin{frame}
\begin{figure}[h!]
\centering
\includegraphics[width=0.8\textwidth]{img/PtiClicJeu.png}
\caption{PtiClic de Mathieu LAFOURCADE et Virginie ZAMPA}
\end{figure}
\end{frame}
\begin{frame}
\begin{figure}[h!]
\centering
\only<1>{\includegraphics[width=0.4\textwidth]{img/preterit01.jpg}}%
\only<2>{\includegraphics[width=0.4\textwidth]{img/preterit02.jpg}}%
\only<3>{\includegraphics[width=0.4\textwidth]{img/preterit03.jpg}}%
\only<4>{\includegraphics[width=0.4\textwidth]{img/preterit04.jpg}}%
\only<5>{\includegraphics[width=0.4\textwidth]{img/preterit05.jpg}}%
\only<6>{\includegraphics[width=0.4\textwidth]{img/preterit06.jpg}}%
\only<7>{\includegraphics[width=0.4\textwidth]{img/preterit07.jpg}}%
\only<8>{\includegraphics[width=0.4\textwidth]{img/preterit08.jpg}}%
\caption{Reconception PtiClic Version HTML5}
\end{figure}
\end{frame}
\section{Paquetage TALN}
\begin{frame}
\begin{center}
\Huge Paquetage TALN
\end{center}
\end{frame}
\begin{frame}
Ferdinand de Saussure (1857-1913), Cours de linguistique générale
\begin{itemize}
\item Signe linguistique
\begin{figure}
\centering
\mbox{
\subfigure{\includegraphics[scale=0.3]{img/signe-conceptimageacoustique.jpeg}}\quad
\subfigure{\includegraphics[scale=0.3]{img/signe-cheval.jpeg}}\quad
\subfigure{\includegraphics[scale=0.3]{img/trianglesemiotique.jpeg}}
}
\end{figure}
\item Arbitraire du signe
\item Synchronie et Diachronie
\item Langue et Parole
\end{itemize}
\end{frame}
\begin{frame}
\frametitle{Réseau lexical JeuxDeMots - 1/2}
\begin{block}{Types de noeuds}
\begin{itemize}
\item termes
\item catégories grammaticales
\item informations métalinguistiques supplémentaires
\end{itemize}
\end{block}
\textcolor{white}{text}\\
\begin{block}{Types de relations}
\begin{itemize}
\item morphologique
\item sémantique
\item métalinguistique
\end{itemize}
\end{block}
\end{frame}
\begin{frame}
\frametitle{Réseau lexical JeuxDeMots - 2/2}
\begin{block}{Quelques statistiques}
\begin{itemize}
\item environ 45\% des noeuds n'ont pas de relation sémantique sortante
\item environ 70\% des noeuds n'ont pas de relation sémantique entrante
\end{itemize}
\end{block}
\end{frame}
\begin{frame}
\begin{block}{Bruits et silences}
\begin{itemize}
\item bruit = relations plus fortes que la réalité
\item silence = relations non existantes ou trop faibles par rapport à la réalité
\item bruits et/ou silences = couverture de relations sémantiques hétérogènes
\end{itemize}
\end{block}
\end{frame}
\begin{frame}
\begin{figure}
\pgfdeclarelayer{background}
\pgfdeclarelayer{foreground}
\pgfsetlayers{background,main,foreground}
\begin{tikzpicture}[
txt/.style = {fill=white,font=\footnotesize,scale=0.75, inner sep=1pt},
earlymidway/.style = {pos=0.4},
latemidway/.style = {pos=0.6}
]
\node (n4) {mot4};
\node[above left = 2cm of n4] (n1) {mot1};
\node[above right = 2cm of n4] (n3) {mot3};
\node[below left = 2cm of n4] (n2) {mot2};
\node[below right = 2cm of n4] (n5) {mot5};
\foreach \direction/\nfrom/\nto/\angle/\pos/\anchor/\text in {
->/n4/n3/15/near end/east/idée associée 450,
<-/n4/n3/0/midway/center/idée associée 250,
<-/n4/n3/-15/near start/west/hyperonyme 50,
%
->/n4/n5/-20/midway/center/idée associée 25,
%
->/n3/n5/-15/near end/east/hyponyme 50,
->/n3/n5/0/latemidway/east/locution 70,
->/n3/n5/15/latemidway/west/idée associée 25,
<-/n3/n5/30/near end/west/idée associée 25,
%
->/n1/n2/-15/very near end/east/hyperonyme 70,
<-/n1/n2/0/latemidway/center/idée associée 50,
<-/n1/n2/15/very near end/west/hyperonyme 50,
%
->/n1/n4/-15/near end/center/domaine 25,
->/n1/n4/5/midway/center/idée associée 310,
%
->/n1/n5/-30/very near end/east/domaine 25,
%
->/n1/n3/40/midway/center/idée associée 200,
->/n1/n3/25/midway/center/hyperonyme 80,
<-/n1/n3/12/midway/center/hyponyme 100,
<-/n1/n3/0/midway/center/idée associée 60
}{
\draw[\direction] (\nfrom) to[bend left=\angle] (\nto);
\begin{pgfonlayer}{foreground}
\path[\direction] (\nfrom) to[bend left=\angle] node[\pos, anchor=\anchor, txt] {\text} (\nto);
\end{pgfonlayer}
}
\end{tikzpicture}
\end{figure}
\end{frame}
\begin{frame}
\begin{center}
\hskip -15.1em
\begin{minipage}{15em}
\begin{tabular}{ | l | l | l | l | p{5cm} |}
\hline
\footnotesize{Relation} & \footnotesize{Mot central} & \footnotesize{Mots nuage} & \footnotesize{Remarques} \\ \hline
\footnotesize{-1 'mn' n'est pas lié à 'mc'} & \footnotesize{\shortstack{adj adv n v}} & \footnotesize{\shortstack{adj adv n v}} & \footnotesize{} \\ \hline
\footnotesize{0 'mc' est en rapport avec 'mn'} & \footnotesize{\shortstack{adj adv n v}} & \footnotesize{\shortstack{adj adv n v}} & \footnotesize{} \\ \hline
\footnotesize{5 'mc' est un synonyme de 'mn'} & \footnotesize{\shortstack{adj adv n v}} & \footnotesize{\shortstack{adj adv n v}} & \footnotesize{\shortstack{même POS}} \\ \hline
\footnotesize{6 'mc' est une sorte de 'mn'} & \footnotesize{n} & \footnotesize{n} & \footnotesize{} \\ \hline
\footnotesize{7 Un contraire de 'mc' est 'mn'} & \footnotesize{\shortstack{adj adv n v}} & \footnotesize{\shortstack{adj adv n v}} & \footnotesize{\shortstack{même POS}} \\ \hline
\footnotesize{8 Un spécifique de 'mc' est 'mn'} & \footnotesize{n} & \footnotesize{n} & \footnotesize{} \\ \hline
\footnotesize{9 'mn' est une partie de 'mc'} & \footnotesize{n} & \footnotesize{n} & \footnotesize{} \\ \hline
\footnotesize{10 'mc' fait partie de 'mn'} & \footnotesize{n} & \footnotesize{n} & \footnotesize{} \\ \hline
\footnotesize{13 'mn' pourrait 'mc'} & \footnotesize{v} & \footnotesize{n} & \footnotesize{} \\ \hline
\footnotesize{15 Le lieu pour 'mc' est 'mn'} & \footnotesize{n v} & \footnotesize{\shortstack{n}} & \footnotesize{} \\ \hline
\footnotesize{16 Instrument pour 'mc' est 'mn'} & \footnotesize{v} & \footnotesize{n} & \footnotesize{} \\ \hline
\footnotesize{17 Un caractéristique de 'mc' est 'mn'} & \footnotesize{n} & \footnotesize{adj} & \footnotesize{} \\ \hline
\end{tabular}
\end{minipage}
\end{center}
\end{frame}
\begin{frame}
\begin{block}{}
Pas de conflit de relations + bonne catégorie grammaticale = conditions nécessaires mais pas suffisantes
\begin{itemize}
\item 'mn' est une partie de 'mc'~ : noms, mais objets physiques aussi
\item 'mn' pourrait 'mc' (Qui/Quoi pourrait 'mc')~: noms et verbe respectivement, mais verbe d'état ne fonctionne pas
\item le lieu de 'mc' est 'mn'~: nom ou verbe puis nom, etc.
\end{itemize}
\end{block}
\end{frame}
\begin{frame}
\frametitle{Introduction des mots sans aucune relation sémantique}
\begin{block}{Algorithme de base}
\begin{enumerate}
\item On génère le nuage à l'aide d'une méthode ou algorithme auxiliaire (LSA ou autre) à partir d'un mot central choisi au hasard
\item On choisit la seule relation sémantique "idée associée" afin de valider les mots générés par l'étape précédente
\item Algorithme suivant est utilisé pour affiner les informations concernant le mot central en question
\end{enumerate}
\end{block}
\end{frame}
\begin{frame}
\begin{figure}
\pgfdeclarelayer{background}
\pgfdeclarelayer{foreground}
\pgfsetlayers{background,main,foreground}
\begin{tikzpicture}[
txt/.style = {fill=white,font=\footnotesize,scale=0.75, inner sep=1pt},
earlymidway/.style = {pos=0.4},
latemidway/.style = {pos=0.6}
]
\node (n0) {mot4};
\node[above left = 2cm of n0] (n1) {mot1};
\node[above right = 2cm of n0] (n2) {mot3};
\node[below left = 2cm of n0] (n3) {mot2};
\node[below right = 2cm of n0] (n4) {mot5};
\foreach \direction/\nfrom/\nto/\angle/\pos/\anchor/\text in {
-/n0/n1/15/near end/east/0.28,
%
-/n0/n2/-20/midway/center/0.48,
%
-/n0/n3/-15/near end/east/0.12,
%
-/n0/n4/-15/very near end/east/0.4,
%
-/n1/n2/-20/midway/center/0.94,
%
-/n1/n3/-15/near end/east/0.75,
%
-/n1/n4/-15/very near end/east/0.42,
%
-/n2/n3/-15/near end/east/0.04,
%
-/n2/n4/-15/very near end/east/0.39,
%
-/n3/n4/-20/midway/center/0.88
}{
\draw[\direction] (\nfrom) to[bend left=\angle] (\nto);
\begin{pgfonlayer}{foreground}
\path[\direction] (\nfrom) to[bend left=\angle] node[\pos, anchor=\anchor, txt] {\text} (\nto);
\end{pgfonlayer}
}
\end{tikzpicture}
\end{figure}
\end{frame}
\begin{frame}
\frametitle{Affinage des relations de types "idée associée"}
\begin{block}{Algorithme}
\begin{enumerate}
\item On génère le nuage à partir de la relation sémantique le plus générale, "idée associée"
\item On choisit des relations sémantiques plus spécifiques sans conflits (tableau "relations" précédent)
\end{enumerate}
\end{block}
\end{frame}
\begin{frame}
\frametitle{Renforcement de relations}
\begin{block}{Algorithmes}
\begin{itemize}
\item Synonymie~: "synonyme de synonyme" ou "antonyme d'antonyme" du mot central
\item Antonymie~: "antonyme de synonyme" ou "synonyme d'antonyme" du mot central
\item Spécifique~: "spécifique d'un générique d'un spécifique" du mot central
\item etc.
\end{itemize}
\end{block}
\end{frame}
\begin{frame}
\frametitle{Expériences en TALN}
\begin{block}{Interactions homme-machine}
\begin{itemize}
\item On apprend de la machine
\item La machine "apprend" de nous~: modifications d'algorithmes, de stratégies et d'approches par rapport aux résultats
\end{itemize}
\end{block}
\end{frame}
\section{Génération de partie}
\begin{frame}
\begin{center}
\Huge Génération de partie\\
\Large (Georges \textsc{Dupéron})
\end{center}
\end{frame}
\begin{frame}
\begin{center}
\begin{tikzpicture}[
mynode/.style = {circle, minimum size=1.5cm},
mc/.style = {mynode,draw=red,text=red},
mn/.style = {mynode,draw},
mi/.style = {mynode,draw=gray,text=gray},
rel/.style = {font=\footnotesize},
guess/.style = {->,dashed},
exist/.style = {->},
auto,swap
]
\node[mc] (mc) {Chat};
\node[mn] (mn0) at (0,3) {Souris};
\node[mi] (mi1) at (3,-2) {matou};
\node[mn] (mn2) at (6,0) {animal};
\path[exist] (mc) edge[bend right] node[rel]{idée associée} (mn0);
\path[exist] (mc) edge node[rel]{synonyme} (mi1);
\path[exist] (mi1) edge node[rel]{sorte de} (mn2);
\path[guess,swap] (mc) edge node[rel]{sorte de ?} (mn2);
\path[guess,swap] (mc) edge[bend left] node[rel]{\shortstack{sorte de ?\\synonyme ?\\\dots}} (mn0);
\end{tikzpicture}
\end{center}
\end{frame}
\begin{frame}
\begin{center}
\begin{tikzpicture}[
mynode/.style = {circle, minimum size=1.5cm},
mc/.style = {mynode,draw=red,text=red},
mn/.style = {mynode,draw},
mi/.style = {mynode,draw=gray,text=gray},
rel/.style = {font=\footnotesize},
guess/.style = {->,dashed},
exist/.style = {->},
auto
]
\node[mc] (mc) {\shortstack{Mot central\\\action<3->{\footnotesize{POS 1}}}};
\node[mi, above right=of mc] (mi) {\shortstack{\footnotesize{Intermédiaire}\\\action<3->{\footnotesize{POS 2}}}};
\node[mn, below right=of mi] (mn) {\shortstack{Mot nuage\\\action<3->{\footnotesize{POS 3}}}};
\path[draw,->] (mc) edge node {Relation 1} (mi);
\path[draw,->] (mi) edge node {Relation 2} (mn);
\path<2->[draw,->] (mc) edge node[swap] {Relation déduite} (mn);
\end{tikzpicture}
\end{center}
\end{frame}
%Yoann
\section{Création de partie}
\begin{frame}
\begin{center}
\Huge Cr\'eation de partie\\
\Large (Yoann \textsc{Bonavero})
\end{center}
\end{frame}
\begin{frame}
\frametitle{Création manuelle de parties}
\begin{block}{Un exemple de partie crée automatiquement}
\begin{center}
tsé tsé
\end{center}
\begin{multicols}{2}
\begin{itemize}
\item mouche
\item tsé-tsé
\item mouche tsé-tsé
\item mouche tsétsé
\item géohistoire
\item ensommeiller
\item fatigue
\item \dots{}
\end{itemize}
\end{multicols}
avec comme relations :
\begin{itemize}
\item \dots{} est une sorte de \dots{}
\item un instrument pour \dots{} est \dots{}
\end{itemize}
\end{block}
\end{frame}
\begin{frame}
\frametitle{Création manuelle de parties}
\begin{block}{Quel intérêt pour les joueurs ?}
\begin{itemize}
\item Valorise le joueur
\item Crée des relations entre joueurs
\item Donne un intérêt aux parties
\item Permet de jouer sur des parties contenant un message.
\end{itemize}
\end{block}
\end{frame}
\section{Site Internet}
\begin{frame}
\frametitle{Le site Internet}
\begin{block}{}
\large Un site internet, pour quoi faire ?
\newline \\
\large Que peut-on y trouver ?
\newline \\
\large Jouez directement sur le site !
\end{block}
\end{frame}
% bertrand
\section{Le Jeu}
\begin{frame}
\begin{center}
\Huge Le Jeu\\
\Large (Bertrand \textsc{Brun})
\end{center}
\end{frame}
\begin{frame}
\frametitle{Le framework \android{}}
\begin{block}{Les outils mis à disposition}
\begin{itemize}
\item<+-> Langage de programmation Java ;
\item<+-> Patron de conception MVC (Modèle-Vue-Contrôleur);
\item<+-> Les vues sont réalisées en XML
\end{itemize}
\end{block}
\begin{alertblock}{Inconvenient}<+->
L'édition des vues en XML nous a énorment ralenti lors du développement de l'alpha 1
\end{alertblock}
\end{frame}
\begin{frame}
\frametitle{Le modèle MVC proposé par Google}
\begin{block}{Modèle-Vue-Contrôleur}
\centering
\begin{tikzpicture}[bend angle=10, shorten >=0.1cm, shorten <=0.1cm]
\node[draw] (activite) {Contr\^olleur (Activité)};
\node[draw,below right=of activite, anchor=east, xshift=1cm] (modele) {Modèle};
\node[draw,below left=of activite, anchor=west, xshift=-1cm] (xml) {Vue (XML)};
\draw[->] (activite.east) ++(0,+.1cm) to[out=0, in=90] ($(modele.north)+(+.1cm,0)$);
\draw[<-] (activite.east) ++(0,-.1cm) to[out=0, in=90] ($(modele.north)+(-.1cm,0)$);
\draw[->] (activite.west) ++(0,+.1cm) to[out=180, in=90] ($(xml.north)+(-.1cm,0)$);
\draw[<-] (activite.west) ++(0,-.1cm) to[out=180, in=90] ($(xml.north)+(+.1cm,0)$);
\end{tikzpicture}
\end{block}
\begin{block}{Détail}
\begin{description}
\item[Modèle] Classe metier permettant de stocker des informations
\item[Contrôleur] Classe héritant d'\verb!Activity! (Activité)
\item[Vue] XML affichant les informations
\end{description}
\end{block}
\end{frame}
\begin{frame} % Un peu vide peut etre ajouter les autre activite tel que prefs, info...
\frametitle{Prototype 1}
\begin{block}{Schéma général de l'enchainement des Activités~:}
\centering
\begin{tikzpicture}[
state/.style={draw},
transition/.style={->}
]
\node[state] (frontpage) {Page de garde};
\node[state, right=of frontpage] (game) {Jeu};
\node[state, right=of game] (score) {Score};
\draw[transition] (frontpage) -- (game);
\draw[transition] (game) -- (score);
\draw[transition] (score.south) -- ++(0,-0.3cm) -| (frontpage);
\draw[transition,<-] (game.north) -- ++(0,0.3cm) -| ($.5*(game) + .5*(score)$);
\node[state,text width=1.2cm, below=of frontpage] (activite) {Activité};
\draw[transition] (activite.north east) ++(0.5cm,0) -- node[auto,swap,font=\footnotesize,scale=0.8] {\shortstack{\shortstack{Évènement\\(Intent)}}} ++(1.5cm,0);
\end{tikzpicture}
\end{block}
\end{frame}
\begin{frame}
\frametitle{Passage au HTML}
\begin{alertblock}{Défauts constatés}
\begin{itemize}
\item<2-> Perte de temps avec les ajustements des vues ;
\item<3-> Public visé trop faible ;
\end{itemize}
\end{alertblock}
\begin{block}{Solutions proposées}<4->
\begin{itemize}
\item<5-> Développement de l'application en Javascript/HTML5 pour les vues ;
\item<6-> Utilisation du framework WebKit proposé par \android{} ;
\item<7-> Utilisation du web pour toucher plus de personnes ;
\end{itemize}
\end{block}
\end{frame}
\begin{frame}
\frametitle{Prototype 2}
\begin{block}{Schéma général de l'enchaînement des pages~:}
\footnotesize{
\texttt{
\textcolor{gray}{http://www.pticlic.fr/jeu.html}%
\only<1-1>{\#frontpage}%
\only<2-8>{\#\textcolor{red}{game}/1306104746953}%
\only<9>{\#game/\textcolor{blue}{1306104746953}/\textcolor{blue}{5}}%
\only<10>{\#game/1306104746953/5,\textcolor{blue}{0}}%
\only<11>{\#game/1306104746953/5,0,\textcolor{blue}{5}}%
\only<12>{\#game/1306104746953/5,0,5,\textcolor{blue}{-1}}%
\only<13>{\#game/1306104746953/5,0,5,-1}%
}
}
\begin{center}
\vskip 0.5em%
\begin{tikzpicture}[
state/.style = {circle,draw,minimum size=1.3cm},
sync/.style = {draw, ->},
async/.style = {draw, ->, decorate, decoration={snake, post length=.5mm}, segment amplitude=.4mm, segment length=2mm},
source/.style = {},
auto,
secondary/.style={draw=gray}
]
\path[use as bounding box] (-1,-4.8) rectangle (7.8,0.3);
\path<2-3> node[source] (hash) {\color{red}{hashchange}};
\path<3> node[state, below=of hash, color=red] (goto) {\shortstack{aller\\vers}};
\path<4-8> node[source] (hash) {hashchange};
\path<4-> node[state, below=of hash] (goto) {\shortstack{aller\\vers}};
\path<4-> node[state, below=of goto] (leave) {quitter};
\path<5-> node[state, right=of goto] (pre-enter) {\shortstack{pré-\\entrée}};
\path<6-> node[state, right=of pre-enter] (enter) {entrée};
\path<7-> node[coordinate, below=of pre-enter] (c1) {};
\path<7-> node[coordinate, below=of enter] (c2) {};
\path<7-> node[state] (ajax) at ($0.5*(c1) + 0.5*(c2)$) {AJAX};
\path<8> node[state, right=of enter] (update) {\shortstack{mise\\\`a\\jour}};
\path<9-12> node[state, right=of enter, color=blue] (update) {\shortstack{mise\\à\\jour}};
\path<9-12> node[source] (hash) {\color{blue}{hashchange}};
\path<13> node[source] (hash) {hashchange};
\path<13> node[state, right=of enter] (update) {\shortstack{mise\\à\\jour}};
\path<3>[sync,draw=red] (hash) -- (goto);
\path<4->[sync] (hash) -- (goto);
\path<4-> [sync] (goto) edge node {1} (leave);
\path<5-> [sync] (goto) edge node {2} (pre-enter);
\path<6-> [sync,dashed] (pre-enter) -- (enter);
\path<8-> [sync] (enter) -- (update);
\path<7-> [async,secondary] (pre-enter) -- (ajax);
\path<7-> [async,secondary] (ajax) -- (enter);
\path<9-12> [sync,draw=blue] (hash.east) to[out=0, in=135] (update);
\path<13> [sync] (hash.east) to[out=0, in=135] (update);
\end{tikzpicture}
\end{center}
\end{block}
\end{frame}
\begin{frame}
\frametitle{\'Evolution de l'architecture}
\begin{block}{Architecture de la \only<-8>{première}\only<9->{deuxième} version}
\begin{center}
\begin{tikzpicture}[
bend angle=10, shorten >=0.05cm, shorten <=0.05cm, text height=0.35cm,
communication/.style={draw,dashed,<->}
]
\node[draw] (appli) {Application \android{}};
% Pour que l'animation ne bouge pas.
\path[use as bounding box] (-5.2,0.4) rectangle (5.2,-5.1);
\path<2-8> node[draw,below=of appli] (frontpage) {Écran principal};
\path[draw,->]<2-8> (appli) -- (frontpage);
\path<3-8> node[draw,below=of frontpage, anchor=north east, xshift=-0.3cm] (game) {Jeu};
\path[draw,->]<3-8> (frontpage) -- (game);
\path<4-> node[draw,left=of appli] (prefs) {Préférences};
\path<4-8> node[draw,below=of prefs,xshift=0.1cm] (reseau) {Réseau};
\path[communication]<4-8> (game) -- (prefs);
\path[communication]<4-8> (game) -- (reseau.south east);
\path[draw,->]<5-8> (game.south west) ++ (0,0.35cm) arc (90:360:0.35cm);
\path<6-8> node[draw,below=of frontpage, anchor=north west, xshift=0.3cm] (score) {score};
\path[draw,->]<6-8> (game) -- (score);
\path[draw,->]<7-8> (score) -- (frontpage);
\path<8-8> node[draw,below left=of frontpage] (prefs-screen) {Préférences};
\path<8-8> node[draw,below right=of frontpage] (about) {À propos};
\path[draw,->]<8-8> (frontpage) -- (prefs-screen);
\path[draw,->]<8-8> (frontpage) -- (about);
\path[communication]<8-8> (prefs-screen.north west) to[bend left] (prefs.south west);
\path[communication]<8-8> (prefs-screen) -- (reseau);
\node[below=of appli, text height=0.25cm, minimum width=2cm] (fake-webkit) {\phantom{Webkit}};
\path<9-> node[draw,below=of fake-webkit, text height=1.5cm, minimum width=2cm, text centered] (html5) {\shortstack{Html5\\JavaScript\\jQuery\\CSS}};
\path[draw,->]<10-> (html5.south east) ++ (0,0.35cm) arc (90:-180:0.35cm);
\path<11-> node[draw,below=of appli, text height=0.25cm, minimum width=2cm] (webkit) {Webkit};
\path[draw,->]<11-> (appli) -- (webkit);
\path[draw,->]<11-> (webkit) -- (html5);
\path<12-> node[coordinate] (waypoint) at ($0.5*(webkit.center)+0.5*(webkit.west)$) {};
\path[communication]<12-> (html5) to[controls=(waypoint) and (waypoint)] node[pos=0.16, anchor=east, xshift=-0.1cm, font=\small] {Interface JavaScript} (prefs.south east);
\end{tikzpicture}
\end{center}
\end{block}
\end{frame}
\section{Demonstration}
\begin{frame}
\begin{center}
\huge{Démonstration\dots{}}
\end{center}
\end{frame}
\section{Conclusion}
\begin{frame}
\begin{center}
\Huge Conclusion
\end{center}
\end{frame}
\begin{frame}
\begin{block}{Chiffres~:}
\begin{itemize}
\item<2-> Nombre de participants~: 27 ;
\item<3-> Nombre de parties jouées~: 145 ;
\end{itemize}
\end{block}
\begin{block}{Am\'eliorations~:}<4->
\begin{itemize}
\item<5-> Implémentation de l'algorithme de prédiction d'arcs dans un graphe ;
\item<6-> Mettre l'application sur Android Market ;
\end{itemize}
\end{block}
\end{frame}
\begin{frame}
\begin{center}
\huge{Merci de votre attention\dots}
\vskip 1em
\huge{Avez-vous des questions~?}
\end{center}
\end{frame}
\end{document}