\documentclass{beamer}
\usepackage[dutch]{babel}
\usepackage[utf8]{inputenc}
\usepackage{beamerthemesplit}
\usepackage{graphics}
\usepackage{url}
\usepackage{listings}

\definecolor{kugreen}{RGB}{130,151,183}
\setbeamercovered{transparent}

\lstset {
	tabsize=4,
	showspaces=false,
	showstringspaces=false,
	showtabs=false
}

\mode<presentation> {
	\usetheme{PaloAlto}
	\usecolortheme[named=kugreen]{structure}
	\useinnertheme{circles}
	\usefonttheme[onlymath]{serif}
	\setbeamercovered{transparent}
	\setbeamertemplate{blocks}[rounded][shadow=false]
}

\logo{\includegraphics[width=1cm]{images/vo20-logo.png}}

\title{Prototype vo20 \& java code editor}
\subtitle{Informatica toetssysteem in webtechnologieën}
\author{Taddeüs Kroes \& Sander van Veen}
\institute{Universiteit van Amsterdam}
\date{3 september 2010}

\begin{document}

\frame {
	\titlepage
}

\frame {
	\frametitle{Overzicht}
	\tableofcontents[pausesection]
}

\section{Introductie}

\subsection{Voortgezet Onderwijs 2.0}

\frame {
	\frametitle{Wie? Wat? Waarom?}

	\begin{itemize}
		\item Profielwerkstuk 2008
		\item Informatica / Scheikunde
		\item Automatisering
	\end{itemize}
}

\frame {
	\frametitle{Screenshots: Scheikunde (1)}

	\includegraphics[width=10cm]{images/toetspagina-1.png}
}

\frame {
	\frametitle{Screenshots: Scheikunde (2)}

	\includegraphics[width=10cm]{images/toetspagina-2.png}
}

\frame {
	\frametitle{Screenshots: Scheikunde (3)}

	\includegraphics[width=10cm]{images/toetspagina-3.png}
}

\frame {
	\frametitle{Screenshots: Scheikunde (4)}

	\includegraphics[width=10cm]{images/redox-voorbeeld.png}
}

\section{Technologieën}

\frame {
	\frametitle{JavaScript preprocessor}

	\begin{itemize}
		\item includes \\
		\texttt{\#include "ds.form.js"} \\
		\texttt{\#include "ds.tree.js"} \\
		\item dependencies \\
		\texttt{\#define DS\_\$\_hide} \\
		\texttt{\#include "ds.dom.js"} \\
		\texttt{\$('\#header$\,$a').hide()} \\
		\item conditions \\
		\texttt{\#ifdef DS\_DEBUG} \\
		\texttt{console.log("$ $user status = "$ $ + user.status);} \\
		\texttt{\#endif} \\
		\item macro's \\
		\texttt{\#define ASSERT(x) $\setminus$ \\
		\hspace{1cm} (!x \&\& throw new Exception(x))} \\
	\end{itemize}
}

\frame {
	\frametitle{CSS enhancements}

	\begin{itemize}
		\item nested selectors
		\lstinputlisting{code/nested-selectors.css}
		\item server imports
		\lstinputlisting{code/server-imports.css}
		\item inline images
	\end{itemize}
}

\section{Management}

\frame {
	\frametitle{Mappenstructuur}

	\begin{itemize}
	\item Framework en applicatie gescheiden:
		\begin{itemize}
		\item Minder conflicten bij het committen.
		\item Centrale updates.
		\item Gescheiden unit tests, bugtracking etc..
		\end{itemize}
	\item Gescheiden onderdelen:
		\begin{itemize}
		\item Media (JavaScript, stylesheets, images)
		\item Helpers
		\item Models
		\item Modules
		\item Unit tests
		\end{itemize}
	\item applicatie $>$ module $>$ action
	\end{itemize}
}

\frame {
	\frametitle{Toegepaste design patterns}

	\begin{itemize}
	\item Model View Controller
	\item ActiveRecord
	\lstinputlisting[language=PHP]{code/activerecord.php}
	\item Factory (boot class / db connection handler)
	\end{itemize}
}

\frame {
	\frametitle{Onderhoud}

	\begin{itemize}
	\item Version control (Subversion of Git) \\
	\texttt{\\ \$ phake upgrade}
	\item Bug tracking (Trac)
	\item Debian packages \\
	\texttt{\\ \$ sudo apt-get install duoworks} \\
	\texttt{\$ sudo apt-get update \&\& sudo apt-get upgrade}
	\end{itemize}
}

\section{DuoWorks}
% - Phake
% - Database abstractie laag (Library_Data)
% - XHP
% - User library: authenticatie en authorisatie
% - Overige beveiliging:
%    - sql injections
%    - null byte injection
%    - content escaping (XHP) tegen XSS
% - Internationalization (gettext)
% - Unit testing

\subsection{Gebruikte technieken}

\frame {
	\frametitle{Gebruikte technieken (1)}

	\textbf{Command line interface}
	\begin{itemize}
	\item Vergemakkelijkt updates en algemene taken.
	\item Phakefile is eenvoudig uit te breiden.
	\end{itemize}
	\textbf{Data library}
	\begin{itemize}
	\item Een driver voor elk database type.
	\item Database in 3 stappen:
		\begin{enumerate}
		\item Design in MySQL Workbench.
		\item Exporteren SQL bestand.
		\item Models genereren met Phakefile.
		\end{enumerate}
	\end{itemize}
}

\frame {
	\frametitle{Gebruikte technieken (2)}

	\textbf{Facebook's XHP}
	\begin{itemize}
	\item Objectgeori\"enteerde helpers in XML syntax.
	\item Voorkomt \emph{cross-site scripting}.
	\end{itemize}
}

\frame {
	\frametitle{Gebruikte technieken (3)}

	\textbf{Internationalisering door \texttt{gettext}}
	\begin{itemize}
	\item Gemakkelijke syntax: \texttt{\_('Translate this please...')}.
	\item Ook leesbaar als vertaling niet beschikbaar is.
	\item Geschikt gemaakt voor JavaScript.
	\end{itemize}
	\textbf{Unit testing}
	\begin{itemize}
	\item Lokaliseren van scriptfouten.
	\item Alle tests in \'e\'en commando, fouten worden direct geprint.
	\end{itemize}
}

\subsection{Beveiliging}

\frame {
	\frametitle{Beveiliging}

	\textbf{Authorisatie en authenticatie}
	\begin{itemize}
	\item Centrale \'en lokale authorisatie.
	\end{itemize}
	\textbf{Overige beveiliging}
	\begin{itemize}
	\item SQL injections
	\item Null byte injection
	\item Remote file inclusion
	\end{itemize}
}

\frame {
	\section{Code editor}

	\subsection{Studenten}

	\frametitle{Code editor: Studenten}

	\textbf{Studenten}

	\begin{itemize}
	\item code opslaan en laden (filebrowser)
	\item code compileren en uitvoeren
	\item fullscreen weergave
	\item java API documentatie (en C man pages)
	\item syntax highlighting
	\item zonder installatie aan de slag
	\end{itemize}
}

\frame {
	\subsection{Docenten}

	\frametitle{Code editor: Docenten}

	\textbf{Docenten}

	\texttt{svn co svn://vo20.nl/uva/binds3/assignments/}

	\begin{itemize}
	\item in \'e\'en keer de opdrachten van alle studenten per vak
	\item specifieke opdracht van alle leerlingen inzien\\
	\end{itemize}

	\subsection{Beveiliging}

	\textbf{Beveiliging}

	\begin{itemize}
	\item limieten voor cpu, memory, runtime
	\item sandbox
	\item java policy
	\end{itemize}
}

\section{Toekomst}

\frame {
	\frametitle{Toekomstbeeld}

	\begin{itemize}
	\item Verschillende vakken
	\item Nakijk module
	\item Automatisch nakijken
	\item Met meerdere gebruikers code schrijven
	\end{itemize}
}

\end{document}

