Source

talks / tt2 / tt2.tex

Full commit
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%% documentclass and packages
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\RequirePackage{atbegshi}           % workaround for newer PGF versions
\documentclass[hyperref={pdfpagelabels=false}]{beamer}
% https://sourceforge.net/tracker/index.php?func=detail&aid=1848912&group_id=92412&atid=600660
\usepackage{lmodern}
\usepackage[T1]{fontenc}							
\usepackage[utf8]{inputenc}
\usepackage{textcomp}
\usepackage[ngerman]{babel}		
\usepackage[babel,english=american,german=guillemets]{csquotes}	% french
%\usepackage{microtype}

% colors for listings
\definecolor{lightergray}{gray}{.95}
\definecolor{darkblue}{rgb}{0,0,0.5}
\definecolor{darkgreen}{rgb}{0,0.5,0}
\definecolor{darkred}{rgb}{0.5,0,0}
\definecolor{darkerblue}{rgb}{0,0,0.4}
\definecolor{darkergreen}{rgb}{0,0.4,0}
\definecolor{darkerred}{rgb}{0.4,0,0}

\usepackage{listings}
\lstloadlanguages{HTML,XML}
\lstset{
    basicstyle=\ttfamily\small\mdseries,
    keywordstyle=\bfseries\color{darkblue},
    identifierstyle=,
    commentstyle=\color{darkgray},
    stringstyle=\itshape\color{darkred},
    frame=none,
    showstringspaces=false,
    tabsize=4,
    backgroundcolor=\color{lightergray},
}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%% preparations for beamer 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\useinnertheme{default}
\useoutertheme{infolines}
%\usecolortheme[rgb={0.28,0.37,0.52}]{structure}
\usecolortheme[rgb={0.18,0.23,0.33}]{structure}
%\usecolortheme{beaver}
\usefonttheme{structurebold}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%% images
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\pgfdeclareimage[width=\textwidth]{lespockydeimpressum}{lespocky.de_impressum}
\pgfdeclareimage[width=0.6\textwidth]{psituxsmileybeispiel}{psi_tux_smiley_beispiel}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%% title, author, date
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\title[Template Toolkit 2]{Schnell, statisch, sicher} 
\subtitle{Template Toolkit 2 für Webseiten (und andere Späße)}
\author{Alexander Dahl} 
\institute[lespocky.de]{\url{http://www.lespocky.de/}}
\date{2010-10-11}
\subject{subj}
\keywords{foo, bar}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%% document
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\begin{document} 

\begin{frame}
	\titlepage
\end{frame}

\begin{frame}{Überblick}
    \tableofcontents
\end{frame}

\section{Einleitung}

\subsection{Ziel}

\begin{frame}{Statisch, schnell, sicher}
    \begin{block}{Statisch}
        \begin{itemize}
            \item \emph{seite.htm} als fertige Datei
            \item keine dynamische Seitenerzeugung auf dem Webserver
        \end{itemize}
    \end{block}
    \pause
    \begin{block}{Schnell}
        \begin{itemize}
            \item httpd liest nur Datei und schickt Daten (Caching
                möglich)
%            \item kein webserverseitiges Erzeugen der Seiten
            \item keine zeitintensiven Datenbankanfragen
        \end{itemize}
    \end{block}
    \pause
    \begin{block}{Sicher}
        \begin{itemize}
            \item nur lesende Nutzerinteraktion
            \item keine Sicherheitslücken durch dynamische
                Skriptsprachen
            \item keine SQL-Injections
        \end{itemize}
    \end{block}
\end{frame}

\subsection{Eignung}

\begin{frame}{Wofür?}
    \begin{block}{Beispiele}
        \begin{itemize}
            \item statischer Content ;-)
            \item Bilderalbum
            \item Vereinsseite
            \item HowTo-Sammlung
            \item \dots
        \end{itemize}
    \end{block}
    \pause
    \begin{block}{Aber}
        \begin{itemize}
            \item kein \textquote{user generated content} (z.\,B.
                Kommentare)
        \end{itemize}
    \end{block}
\end{frame}

\subsection{Probleme}

\begin{frame}{Herausforderungen}
    \begin{block}{\textquote{Inhalt} der (X)HTML-Datei}
        \begin{itemize}
            \item sich wiederholende Abschnitte
                \begin{itemize}
                    \item HTML-Header (Titel, Links zu CSS usw.)
                    \item Seitenkopf
                    \item Seitenfuß
                \end{itemize}
            \pause
            \item Navigationselemente (Menü)
            \item Strukturelemente um den Content herum
                (\texttt{<div>}-Layout)
        \end{itemize}
        \pause
        \begin{block}{Also}
            \emph{\textquote{nerviges} Drumherum lenkt vom Inhalt ab}
        \end{block}
    \end{block}
\end{frame}

\section{Template Toolkit}

\subsection{About TT2}

\begin{frame}{Template Toolkit 2 im Überblick}
    \begin{itemize}
        \item schnelles, flexibles, erweiterbares Template Processing
            System
        \item ausgereift, zuverlässig, gut dokumentiert
        \pause
        \item freie, offene Software, plattformunabhängig (Perl)
        \item kein Wissen über \emph{Perl} oder \emph{C} notwendig
        \pause
        \item Trennung von Inhalt, Nutzerschnittstelle, Anwendungscode
            und Daten
        \item dynamische Inhaltserzeugung möglich (bspw. mit
            Apache/mod\_perl)
        \pause
        \item Vorverarbeitung für HTML, POD, \LaTeX, PostScript,
            \emph{you name it} \dots
    \end{itemize}
\end{frame}

\subsection{Hello World}

\begin{frame}[fragile]{Hallo [\% Welt \%]!}
    \begin{lstlisting}[
        language=HTML,
        basicstyle=\ttfamily\normalsize\mdseries,
    ]
[% INCLUDE header title="Ein erstes Beispiel" %]
<p>
  Hallo Welt!
</p>
[% INCLUDE footer copyright="2010 Susanna Dean" %]
    \end{lstlisting} 
\end{frame}

\begin{frame}[fragile]{Hallo Header \& Footer!}
    \begin{block}{Header}
        \begin{lstlisting}[
            language=HTML,
            basicstyle=\ttfamily\normalsize\mdseries,
        ]
<html>
<head>
  <title>[% title %]</title>
</head>
<body>
  <h1>[% title %]</h1>
        \end{lstlisting}
    \end{block}
    \pause
    \begin{block}{Footer}
        \begin{lstlisting}[
            language=HTML,
            basicstyle=\ttfamily\normalsize\mdseries,
        ]
  <p>&copy; [% copyright %]</p>
</body>
</html>
        \end{lstlisting}
    \end{block}
\end{frame}

\begin{frame}[fragile]{Hallo Welt!}
    \begin{lstlisting}[
        language=HTML,
        basicstyle=\ttfamily\normalsize\mdseries,
    ]
<html>
<head>
  <title>Ein erstes Beispiel</title>
</head>
<body>
  <h1>Ein erstes Beispiel</h1>
  <p>
    Hallo Welt!
  </p>
  <p>&copy; 2010 Susanna Dean</p>
</body>
</html>
    \end{lstlisting}
\end{frame}

\subsection{Komplexere Daten- und Kontrollstrukturen}

\begin{frame}[fragile]{Schleifen und Bedingungen}
    \begin{lstlisting}[
        language=HTML,
        basicstyle=\ttfamily\footnotesize\mdseries,
    ]
[% FOREACH artikel IN korb %]
[% IF loop.first %]
<table>
  <tr>
    <th>Pos.</th>
    <th>Artikel</th>
    <th>Preis</th>
  </tr>
[% END %]
  <tr>
    <td>[% loop.count %]</td>
    <td>[% artikel.name %]</td>
    <td>[% artikel.preis %]</td>
  </tr]
[% IF loop.last %]
</table>
[% END %]
[% END %]
    \end{lstlisting}
\end{frame}

\section{Anwendungsbeispiele}

\subsection{lespocky.de}

\begin{frame}{Eine statische Homepage -- lespocky.de}
    \pgfuseimage{lespockydeimpressum}
\end{frame}

\begin{frame}{Aufteilung der Template-Dateien}
    \begin{block}{public\_html}
        \begin{itemize}
            \item \emph{include}
                \begin{itemize}
                    \item common\_footer
                    \item common\_h1
                    \item common\_html\_header
                    \item common\_main\_navigation
                    \item common\_topnav
                    \item globals
                    \item match\_tt2name
                    \item section\_definition
                    \item wrapper\_yaml
                \end{itemize}
            \item \emph{src}
                \begin{itemize}
                    \item index.tt2
                    \item lhimpres.tt2
                    \item \dots
                \end{itemize}
        \end{itemize}
    \end{block}
\end{frame}

\begin{frame}[fragile]{Einblick in ein Template}
    \begin{lstlisting}[
        language=HTML,
        basicstyle=\ttfamily\scriptsize\mdseries,
        breaklines=true,
    ]
[%- PROCESS section_definition %]
[%- PROCESS match_tt2name %]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
[%  INCLUDE common_html_header %]
<meta name="keywords" content="impressum" />
<title>[% title_1 %] :: [% this_section.title %]</title>
</head>
<body>
[% WRAPPER wrapper_yaml %]

    <h2>[% this_section.title %]</h2>

    <p>Dies ist ein Absatz mit <a 
        href="http://www.lespocky.de/">Link</a>.</p>

[% END %]
</body>
</html>
    \end{lstlisting}
\end{frame}

\subsection{Smiley-Theme-Generator}

\begin{frame}{Smileys für alle}
    \begin{columns}
        \begin{column}{0.4\textwidth}<2->
            \begin{itemize}
                \item Emoticon-Themes für Instant Messenger
                \item \emph{eine} Beschreibungsdatei
                \item Build-Skript
                \item derzeit fertige Templates für
                    \begin{itemize}
                        \item Adium
                        \item KDE (Kopete, Choqok)
                        \item Miranda
                        \item Pidgin
                        \item Psi
                    \end{itemize}
            \end{itemize}
        \end{column}
        \begin{column}{0.6\textwidth}<1->
            \begin{centering}
                \pgfuseimage{psituxsmileybeispiel}
            \end{centering}
        \end{column}
    \end{columns}
\end{frame}

\begin{frame}[fragile]{Template für KDE}
    \begin{lstlisting}[
        language=XML,
        basicstyle=\ttfamily\scriptsize\mdseries,
        breaklines=true,
    ]
[% PROCESS smileys.tt2 %]
<?xml version='1.0'?>
<!-- Theme created with penguineering tools! - http://tools.penguineering.com/ -->
<messaging-emoticon-map>
[% FOREACH smiley IN smileys %]
<emoticon file="[% smiley.basename %]">
[% FOREACH alias IN smiley.aliases -%]
    <string>[% FILTER replace('<','&lt;') %]
[%- FILTER replace('>','&gt;') %]
[%- FILTER replace('&','&amp;') %]
[%- alias -%]
[% END -%]
[% END -%]
[% END %]</string>
[% END -%]
</emoticon>
[% END %]
</messaging-emoticon-map>
    \end{lstlisting}
\end{frame}

\section*{Solang die dicke Frau noch singt \dots}

\begin{frame}{Kontakt}
    \begin{itemize}
        \item \url{http://www.lespocky.de/}
        \item \url{http://blog.antiblau.de/}
        \item \emph{alex@antiblau.de}
    \end{itemize}

    \vspace{1em}
    \small
    Die Folien sind freigegeben unter \emph{Creative Commons
    Namensnennung-Nicht kommerziell-Weitergabe unter gleichen
    Bedingungen 3.0 Deutschland Lizenz} (BY-NC-SA).
    \normalsize
\end{frame}

\end{document}