211 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

   212 \mode<presentation>{

   213 \begin{frame}[c]

   214 \frametitle{\begin{tabular}{c}This Course\end{tabular}}

   215 

   216 \begin{itemize}

   217 \item the ultimate goal is to implement a small web-browser (really small)\bigskip

   218 \end{itemize}

   219 

   220 Let's start with:

   221 

   222 \begin{itemize}

   223 \item a web-crawler

   224 \item an email harvester

   225 \item a web-scraper

   226 \end{itemize}

   227 

   228 \end{frame}}

   229 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   

   230 

   231 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

   232 \mode<presentation>{

   233 \begin{frame}[c]

   234 \frametitle{\begin{tabular}{c}A Web Crawler\end{tabular}}

   235 

   236 \begin{enumerate}

   237 \item given an URL, read the corresponding webpage

   238 \item extract all links from it

   239 \item call the web-crawler again for all these links

   240 \end{enumerate}

   241 

   242 \end{frame}}

   243 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   

   244 

   245 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

   246 \mode<presentation>{

   247 \begin{frame}[c]

   248 \frametitle{\begin{tabular}{c}A Web Crawler\end{tabular}}

   249 

   250 \begin{enumerate}

   251 \item given an URL, read the corresponding webpage

   252 \item if not possible print, out a problem

   253 \item if possible, extract all links from it

   254 \item call the web-crawler again for all these links

   255 \end{enumerate}\bigskip\pause

   256 

   257 \small (we need to bound the number of recursive calls)

   258 

   259 \small (the purpose is to check all links on my own webpage)

   260 \end{frame}}

   261 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   

   262 

   263 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

   264 \mode<presentation>{

   265 \begin{frame}[c]

   266 \frametitle{\begin{tabular}{c}Scala\end{tabular}}

   267 

   268 \footnotesize a simple Scala function for reading webpages\\[-3mm]

   269 

   270 {\lstset{language=Scala}\fontsize{8}{10}\selectfont

   271 \texttt{\lstinputlisting{app0.scala}}}\pause\bigskip

   272 

   273 \footnotesize slightly more complicated for handling errors:\\[-3mm]

   274 

   275 \footnotesize

   276 {\lstset{language=Scala}\fontsize{8}{10}\selectfont

   277 \texttt{\lstinputlisting{app1.scala}}}

   278 

   279 

   280 \end{frame}}

   281 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   

   282 

   283 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

   284 \mode<presentation>{

   285 \begin{frame}[c]

   286 

   287 

   288   

   289 \end{frame}}

   290 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   

   291 

   292 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

   293 \mode<presentation>{

   294 \begin{frame}[c]

   295 \frametitle{\begin{tabular}{c}Cookies\end{tabular}}

   296 

   297 

   298 \begin{textblock}{1}(1.5,5)

   299 \begin{tabular}{c}

   300 %\includegraphics[scale=0.15]{pics/servers.png}\\[-2mm]

   301 \small Servers from\\[-2mm] 

   302 \small Dot.com Inc.

   303 \end{tabular}

   304 \end{textblock}

   305 

   306 \begin{textblock}{1}(5.6,5.6)

   307   \begin{tikzpicture}[scale=2.5]

   308   \draw[white] (0,0) node (X) {};

   309   \draw[white] (1,0) node (Y) {};

   310   \draw[white] (0.05,-0.3) node (X1) {};

   311   \draw[white] (0.95,-0.3) node (Y1) {};

   312   \only<1-2>{\draw[red, <-, line width = 2mm] (X) -- (Y);

   313   \node [inner sep=5pt,label=above:\textcolor{black}{GET request}] at ($ (X)!.5!(Y) $) {};}

   314   \only<1>{\draw[white, <-, line width = 1mm] (X1) -- (Y1);

   315   \node [inner sep=2pt,label=below:\textcolor{white}{read a cookie}] at ($ (X1)!.5!(Y1) $) {};}

   316   \only<2>{\draw[red, <-, line width = 1mm] (X1) -- (Y1);

   317   \node [inner sep=2pt,label=below:\textcolor{black}{read a cookie}] at ($ (X1)!.5!(Y1) $) {};}

   318   \only<3->{\draw[red, ->, line width = 2mm] (X) -- (Y);

   319   \node [inner sep=5pt,label=above:\textcolor{black}{webpage}] at ($ (X)!.5!(Y) $) {};}

   320   \only<3->{\draw[red, ->, line width = 1mm] (X1) -- (Y1);

   321   \node [inner sep=2pt,label=below:\textcolor{black}{write a cookie}] at ($ (X1)!.5!(Y1) $) {};}

   322   \end{tikzpicture}

   323 \end{textblock}

   324 

   325 

   326 \begin{textblock}{1}(9.5,5.5)

   327 \begin{tabular}{c}

   328 %\includegraphics[scale=0.15]{pics/laptop.png}\\[-2mm]

   329 \small Client

   330 \end{tabular}

   331 \end{textblock}

   332   

   333 \only<4->{  

   334 \begin{textblock}{13}(1,11)  

   335 \small\begin{itemize}

   336 \item cookies: max 4KB data\\[-2mm]

   337 \item cookie theft, cross-site scripting attacks\\[-2mm]

   338 \item session cookies, persistent cookies, HttpOnly cookies, third-party cookies, zombie cookies 

   339 \end{itemize}  

   340 \end{textblock}}

   341 

   342 \only<5>{

   343 \begin{textblock}{11}(1,3)

   344 \begin{tikzpicture}

   345 \draw (0,0) node[inner sep=2mm,fill=cream, ultra thick, draw=red, rounded corners=2mm] 

   346 {\normalsize\color{darkgray}

   347 \begin{minipage}{10cm}\raggedright\small

   348 {\bf EU Privacy Directive about Cookies:}\smallskip\\

   349 ``In May 2011, a European Union law was passed stating that websites that leave non-essential cookies on visitors' devices have to alert the visitor and get acceptance from them. This law applies to both individuals and businesses based in the EU regardless of the nationality of their website's visitors or the location of their web host. It is not enough to simply update a website's terms and conditions or privacy policy. The deadline to comply with the new EU cookie law was 26th May 2012 and failure to do so could mean a fine of up to \pounds{}500,000.''

   350 \hfill\small\textcolor{gray}{$\rightarrow$BBC News}

   351 \end{minipage}};

   352 \end{tikzpicture}

   353 \end{textblock}}

   354   

   355 \end{frame}}

   356 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   

   357 

   358 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

   359 \mode<presentation>{

   360 \begin{frame}[t]

   361 \begin{itemize}

   362 \item While cookies are per web-page, this can be easily circumvented.

   363 \end{itemize}

   364 

   365 \begin{textblock}{1}(1.5,4.5)

   366 \begin{tabular}{c}

   367 %\includegraphics[scale=0.07]{pics/servers.png}\\[-2mm]

   368 \small Pet Store\\[-2mm] 

   369 \small Dot.com\\[-2mm] 

   370 \end{tabular}

   371 \end{textblock}

   372   

   373 \begin{textblock}{1}(1.5,8)

   374 \begin{tabular}{c}

   375 %\includegraphics[scale=0.07]{pics/servers.png}\\[-2mm]

   376 \small Dating.com

   377 \end{tabular}

   378 \end{textblock}  

   379 

   380 \begin{textblock}{1}(10.5,7.5)

   381 \begin{tabular}{c}

   382 %\includegraphics[scale=0.07]{pics/servers.png}\\[-2mm]

   383 \small Evil-Ad-No\\[-2mm]

   384 \small Privacy.com

   385 \end{tabular}

   386 \end{textblock}  

   387 

   388 \begin{textblock}{1}(6,10.5)

   389 \begin{tabular}{c}

   390 %\includegraphics[scale=0.16]{pics/rman.png}\\[-1mm]

   391 \small you

   392 \end{tabular}

   393 \end{textblock}  

   394 

   395 \begin{textblock}{1}(4,5)

   396   \begin{tikzpicture}[scale=1]

   397   \draw[white] (0,0.5) node (X) {};

   398   \draw[white] (5.7,-1) node (Y) {};

   399   \draw[red, ->, line width = 0.5mm] (X) -- (Y);

   400   \node [inner sep=5pt,label=above:\textcolor{black}{}] at ($ (X)!.5!(Y) $) {};

   401   \end{tikzpicture}

   402 \end{textblock}

   403 

   404 \begin{textblock}{1}(4,7.9)

   405   \begin{tikzpicture}[scale=1]

   406   \draw[white] (0,0) node (X) {};

   407   \draw[white] (5.7,0) node (Y) {};

   408   \draw[red, ->, line width = 0.5mm] (X) -- (Y);

   409   \node [inner sep=5pt,label=above:\textcolor{black}{}] at ($ (X)!.5!(Y) $) {};

   410   \end{tikzpicture}

   411 \end{textblock}

   412 

   413 \begin{textblock}{1}(3.3,9.3)

   414   \begin{tikzpicture}[scale=1.2]

   415   \draw[white] (0,0) node (X) {};

   416   \draw[white] (1.5,-1) node (Y) {};

   417   \draw[red, <->, line width = 2mm] (X) -- (Y);

   418   \node [inner sep=5pt,label=above:\textcolor{black}{}] at ($ (X)!.5!(Y) $) {};

   419   \draw[white] (0.9,0.3) node (X1) {};

   420   \draw[white] (1.9,-1) node (Y1) {};

   421   \draw[red, <->, line width = 2mm] (X1) -- (Y1);

   422   \node [inner sep=5pt,label=above:\textcolor{black}{}] at ($ (X1)!.5!(Y1) $) {};

   423   \end{tikzpicture}

   424 \end{textblock}  

   425 

   426 \begin{textblock}{1}(8.6,10.1)

   427   \begin{tikzpicture}[scale=0.9]

   428   \draw[white] (0,0) node (X) {};

   429   \draw[white] (-2,-1) node (Y) {};

   430   \draw[red, <->, line width = 0.5mm] (X) -- (Y);

   431   \node [inner sep=5pt,label=above:\textcolor{black}{}] at ($ (X)!.5!(Y) $) {};

   432   \end{tikzpicture}

   433 \end{textblock}

   434 

   435 

   436 

   437 \end{frame}}

   438 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   

   439 

   440 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

   441 \mode<presentation>{

   442 \begin{frame}[c]

   443 \frametitle{\begin{tabular}{c}My First Webapp\end{tabular}}

   444 

   445 {\bf GET request:}\smallskip

   446 \begin{enumerate}

   447 \item read the cookie from client

   448 \item if none is present, set \texttt{visits} to \textcolor{blue}{$0$}

   449 \item if cookie is present, extract \texttt{visits} counter

   450 \item if \texttt{visits} is greater or equal \textcolor{blue}{$10$}, \\

   451 print a valued customer message\\

   452 otherwise just a normal message

   453 \item increase \texttt{visits} by \textcolor{blue}{$1$} and store new cookie with client

   454 \end{enumerate}

   455 

   456   

   457 \end{frame}}

   458 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   

   459 

   460 

   461 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

   462 \mode<presentation>{

   463 \begin{frame}[c]

   464 \mbox{}\\[-9mm]

   465 

   466 %{\lstset{language=Scala}\fontsize{8}{10}\selectfont

   467 %\texttt{\lstinputlisting{app2.scala}}}

   468 

   469 \footnotesize

   470 \begin{itemize}

   471 \item cookie value encoded as hash

   472 \end{itemize}

   473 \end{frame}}

   474 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%   

   475