core.tex 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  1. \documentclass[aspectratio=169]{beamer}
  2. % get rid of clickable beamer buttons
  3. \beamertemplatenavigationsymbolsempty
  4. % parse most utf-8 correctly
  5. \usepackage[utf8]{inputenc}
  6. \usepackage[ngerman]{babel}
  7. % better graphics
  8. \usepackage{graphicx}
  9. % beamer settings
  10. \title{snailmail}
  11. \author{Noah Vogt \& Simon Hammer}
  12. \date{5. Februar 2022}
  13. \institute{Gymnasium Kirschgarten}
  14. \usetheme{Copenhagen}
  15. \usepackage{varwidth}
  16. \usepackage{graphicx,calc}
  17. \newlength\myheight
  18. \newlength\mydepth
  19. \settototalheight\myheight{Xygp}
  20. \settodepth\mydepth{Xygp}
  21. \setlength\fboxsep{0pt}
  22. \newcommand*\inlinegraphics[1]{
  23. \settototalheight\myheight{Xygp}
  24. \settodepth\mydepth{Xygp}
  25. \raisebox{-\mydepth}{\includegraphics[height=\myheight]{#1}}%
  26. }
  27. % for code snippits
  28. \usepackage{listings}
  29. \usepackage{color}
  30. \definecolor{dkgreen}{rgb}{0,0.6,0}
  31. \definecolor{gray}{rgb}{0.5,0.5,0.5}
  32. \definecolor{mauve}{rgb}{0.58,0,0.82}
  33. \definecolor{background}{rgb}{0.36,0.36,0.36}
  34. \lstset{
  35. numbersep=3pt,
  36. keywordstyle=\color{blue},
  37. commentstyle=\color{dkgreen},
  38. stringstyle=\color{mauve},
  39. breaklines=true,
  40. numbers=left,
  41. numberstyle=\scriptsize\color{black},
  42. frame=none,
  43. basicstyle = \small\ttfamily,
  44. breaklines=true
  45. breakatwhitespace=false,
  46. columns=flexible,
  47. xleftmargin=0.5cm,framesep=8pt,framerule=0pt,
  48. aboveskip=3mm,
  49. belowskip=3mm,
  50. }
  51. % Package to use videos
  52. %\usepackage{movie15}
  53. %\usepackage{media9}
  54. \usepackage{multimedia}
  55. %for table
  56. \usepackage{array}
  57. \newcolumntype{C}[1]{>{\centering\arraybackslash}m{#1}}
  58. %% Putting the background image in the frames
  59. \usebackgroundtemplate{%
  60. %\vbox to \paperheight{\hfil\hbox to \paperwidth{\hfil\includegraphics[width=1\paperwidth]{../../logo/version2grey.pdf}\hfil}\vfil}
  61. \hspace{5.2cm}\includegraphics[width=0.8\paperwidth]{../logo/version2grey.pdf}
  62. }
  63. \begin{document}
  64. \begin{frame}[plain]
  65. \maketitle
  66. \end{frame}
  67. % TODO: -> sectioning (or custom sectioning, but less preferable)
  68. \begin{frame}[plain]{Inhaltsverzeichniss}
  69. \tableofcontents
  70. \end{frame}
  71. \section{Vorwort}
  72. \subsection{Motivation}
  73. \begin{frame}[plain]{Motivation}
  74. \begin{varwidth}{.5\textwidth}
  75. \begin{figure}
  76. \centering
  77. \includegraphics[width=.9\textwidth]{media/macbook.jpg}
  78. \end{figure}
  79. \end{varwidth}
  80. \hfill
  81. \begin{varwidth}{.5\textwidth}
  82. \begin{itemize}\pause
  83. \item allgemeines Interesse\pause
  84. \item fehlender Edubs-Mail-Client\pause
  85. %\item fehlender Edubs-Mail-Client\inlinegraphics{media/baslerstab-1.jpg}\pause
  86. \item persönliche Bedürfnisse
  87. \end{itemize}
  88. \end{varwidth}
  89. \end{frame}
  90. \subsection{Ziele}
  91. \begin{frame}[plain]{Ziele}
  92. \begin{varwidth}{.5\textwidth}
  93. \begin{figure}
  94. \centering
  95. \includegraphics[width=.8\textwidth]{../logo/version3d.png}
  96. \end{figure}
  97. \end{varwidth}
  98. \hfill
  99. \begin{varwidth}{.5\textwidth}
  100. \begin{itemize}\pause
  101. \item Basisfunktionen \inlinegraphics{media/mail.png} \pause
  102. \item Account Manager\inlinegraphics{media/business.png}\pause
  103. \item Mobil und Modern\inlinegraphics{media/mobile.png}\pause
  104. \item Einstellungen\inlinegraphics{media/settings.png}\pause
  105. \item Schnell, Frei und Simpel\inlinegraphics{media/run.png}
  106. \end{itemize}
  107. \end{varwidth}
  108. \end{frame}
  109. %:TODO Ich han eig gmeint Bilder us de Apps. Also wenn du seisch es isch zu überlade das me das in de Apps seht und ned s Logo fo de App
  110. \begin{frame}[plain]{Inspiration Design}
  111. \begin{varwidth}{.3\textwidth}\pause
  112. \begin{figure}
  113. \centering
  114. \includegraphics[height=.8\textheight]{media/gmail-screenshot.png}\\
  115. \vspace{.5cm}
  116. \includegraphics[width=.25\textwidth]{media/gmail-logo.png}
  117. \end{figure}
  118. \end{varwidth}
  119. \hfill
  120. \begin{varwidth}{.3\textwidth}\pause
  121. \begin{figure}
  122. \centering
  123. \includegraphics[width=.8\textwidth]{media/k9-screenshot.png}\\
  124. \vspace{.5cm}
  125. \includegraphics[width=.25\textwidth]{media/k9-logo.png}
  126. \end{figure}
  127. \end{varwidth}
  128. \hfill
  129. \begin{varwidth}{.3\textwidth}\pause
  130. \begin{figure}
  131. \centering
  132. \includegraphics[width=.8\textwidth]{media/fairmail-screenshot.png}\\
  133. \vspace{.5cm}
  134. \includegraphics[width=.25\textwidth]{media/fairmail-logo.png}
  135. \end{figure}
  136. \end{varwidth}
  137. \end{frame}
  138. % TODO: consider using external player
  139. \section{Haupteil}
  140. \subsection{App mit Film}
  141. \begin{frame}[plain]{Demo}
  142. \centering
  143. %\movie[externalviewer]{\includegraphics[width=.8\textwidth]{media/bug.png}}{media/appNoSound.mp4}
  144. %\includemovie[externalviewer, autoplay]{20pt}{20pt}{media/appNoSound.mp4}
  145. % \includemedia[
  146. % width=0.6\linewidth,height=0.45\linewidth,
  147. % activate=pageopen,
  148. % addresource=media/appNoSound.mp4,
  149. % flashvars={
  150. % source=media/appNoSound.mp4
  151. % &autoPlay=true
  152. % &scaleMode=letterbox
  153. %
  154. % }
  155. %]{}{SlideShow.swf}
  156. \movie[externalviewer, autostart, width=4cm, height=8cm]{first try}{media/appNoSound.mp4}
  157. \end{frame}
  158. \subsection{App Inhalte}
  159. \begin{frame}[plain]{Was alles drin ist}
  160. \centering
  161. \begin{figure}[h]
  162. \includegraphics[height=.9\textheight]{media/errorMessage.png}
  163. \hspace{2.5cm}
  164. \pause
  165. \includegraphics[height=.9\textheight]{media/moreSettings.jpg}
  166. \end{figure}
  167. \end{frame}
  168. \subsection{App-Struktur}
  169. \begin{frame}[plain]{Allgemeine App-Struktur}
  170. \begin{varwidth}{.3\textwidth}
  171. \pause
  172. \begin{figure}
  173. \centering
  174. \includegraphics[height=.8\textheight]{../maturText/media/AppStructureFull.png}
  175. \end{figure}
  176. \end{varwidth}
  177. \hfill
  178. \begin{varwidth}{.5\textwidth}
  179. \begin{itemize}\pause
  180. \item Das User Interface \pause
  181. \item Die Server Connection \pause
  182. \item Die Database \pause
  183. \end{itemize}
  184. \end{varwidth}
  185. \end{frame}
  186. \begin{frame}[plain]{Database}
  187. \begin{block}{Allgemein}
  188. \textbf{Datenbank:} eine organisierte Ansammlung von strukturierter Information oder Daten
  189. \end{block}
  190. \begin{block}{in Der App}
  191. %:TODO finish this simon
  192. \pause
  193. \begin{tabular}{ |C{1.4Cm} |C{0.9Cm} |C{0.5Cm} |C{0.65Cm} |C{0.95Cm} |C{0.85Cm} |C{1.05Cm} |C{1.55Cm} |C{1.05Cm} |C{0.8Cm}|}
  194. %\begin{tabular}{ c c c c c c c c c c}
  195. \hline
  196. \multicolumn{10}{|c|}{Database Table} \\
  197. \hline
  198. \small{ObejctKey} &To & cc & bcc & from & date & subject & \small{textContent} & folder & seen \\
  199. \hline
  200. \pause
  201. 01 & \small{Sam} & null & null & \small{Anna} & \small{1.3.13} & Schule & Hallo Herr & Draft & true \\
  202. \hline
  203. \end{tabular}
  204. \end{block}
  205. \end{frame}
  206. % TODO: add pauses + neomutt / thunderbird + customdomain / edubs example imgs
  207. \begin{frame}[plain]{Email Connection}
  208. \centering
  209. \includegraphics[width=.8\textwidth]{../maturText/media/connection-diagram.png}
  210. \end{frame}
  211. % TODO: not use lstlisting?
  212. \defverbatim[colored]\makeset{
  213. \lstset{language=python}
  214. \begin{lstlisting}
  215. def sendStarttls(host, sendingMail, receivingMail, password, message="",
  216. subject="", port=587, cc=[], bcc=[]):
  217. context = ssl.create_default_context()
  218. if type(cc) is not str:
  219. cc = ",".join(cc)
  220. if type(bcc) is not str:
  221. bcc = ",".join(bcc)
  222. utf8Message = ("Subject: " + subject + "\nCC: " + cc + "\nBCC: " + bcc +
  223. "\n\n" + message)
  224. decoded = utf8Message.encode('cp1252').decode('utf-8')
  225. with smtplib.SMTP(host, port) as serverConnection:
  226. serverConnection.starttls(context=context)
  227. serverConnection.login(sendingMail, password)
  228. serverConnection.sendmail(sendingMail, receivingMail, decoded)
  229. \end{lstlisting}
  230. }
  231. \begin{frame}[plain]{Senden einer Email}
  232. %\makeset
  233. %\lstset{language=Python}
  234. %\lstinputlisting[language=Python]{code/sentMail.py}
  235. \begin{figure}[h]
  236. \includegraphics[width=.8\textwidth]{media/codeFragment.png}
  237. \end{figure}
  238. \end{frame}
  239. \subsection{Librarys}
  240. \begin{frame}[plain]{Material Design}
  241. \begin{varwidth}{.5\textwidth}
  242. \begin{figure}
  243. \centering
  244. \includegraphics[width=\textwidth]{media/material-design-in-action.jpg}
  245. \end{figure}
  246. \end{varwidth}
  247. \hfill
  248. \begin{varwidth}{.4\textwidth}
  249. \includegraphics[width=\textwidth]{media/material-android.png}
  250. \begin{itemize}\pause
  251. \item GUI-Framework\pause
  252. \item beliebt\pause
  253. \item in Google Apps
  254. \end{itemize}
  255. \end{varwidth}
  256. \end{frame}
  257. % TODO: insert bugs
  258. \begin{frame}[plain]{Bugs}
  259. \begin{figure}[h]
  260. \includegraphics[width=.8\textwidth]{media/bug.png}
  261. \end{figure}
  262. \end{frame}
  263. \section{Resultate}
  264. \begin{frame}[plain]{Resultate}
  265. \begin{itemize}\pause
  266. \item User Interface\pause
  267. \item chaquopy\pause
  268. \item Funktionalität\pause
  269. \item abschliessend
  270. \end{itemize}
  271. \end{frame}
  272. \section{Gelerntes}
  273. \begin{frame}[plain]{Was wir gelernt haben}
  274. \begin{varwidth}{.5\textwidth}
  275. \begin{figure}
  276. \centering
  277. \includegraphics[width=.95\textwidth]{media/monetary-success.jpeg}
  278. \end{figure}
  279. \end{varwidth}
  280. \hfill
  281. \begin{varwidth}{.5\textwidth}
  282. \begin{itemize}\pause
  283. \item Java\inlinegraphics{media/java-only-logo.png}\pause
  284. \item Android Apps\inlinegraphics{media/android-robot.png}\pause
  285. \item Android Studio\inlinegraphics{media/android-studio-logo.png}\pause
  286. \item Database \& SQL\inlinegraphics{media/database.png}\pause
  287. \item Gradle\inlinegraphics{media/gradle.png}\pause
  288. \item Zusammenarbeit\inlinegraphics{media/handschlag.jpeg}
  289. \end{itemize}
  290. \end{varwidth}
  291. \end{frame}
  292. \section{Persönliche Meinung}
  293. \begin{frame}[plain]{Persönliche Meinung: Simon}
  294. \begin{varwidth}{.4\textwidth}
  295. \begin{figure}
  296. \centering
  297. \includegraphics[width=.95\textwidth]{media/git-logo.png}
  298. \end{figure}
  299. \end{varwidth}
  300. \hfill
  301. \begin{varwidth}{.5\textwidth}
  302. \begin{itemize}\pause
  303. \item VCS $\rightarrow$ Git $\rightarrow$ GitHub\pause
  304. \item Treffen \& Absprachen \& VoIP\pause
  305. \item texdiary
  306. \end{itemize}
  307. \end{varwidth}
  308. \end{frame}
  309. \begin{frame}[plain]{persönliche Meinung: Noah}
  310. \begin{varwidth}{.4\textwidth}
  311. \begin{figure}
  312. \centering
  313. \includegraphics[width=.95\textwidth]{media/gradle-logo.png}
  314. \end{figure}
  315. \end{varwidth}
  316. \hfill
  317. \begin{varwidth}{.5\textwidth}
  318. \begin{itemize}\pause
  319. \item fehlende Erfahrung\pause
  320. \item Java Libraries\pause
  321. \item persönlicher \& beruflicher Vorteil
  322. \end{itemize}
  323. \end{varwidth}
  324. \end{frame}
  325. \begin{frame}[plain]{Zukunft: Wie geht es weiter?}
  326. \begin{figure}
  327. \centering
  328. \includegraphics[height=.7\textheight]{media/github-repo.jpg}
  329. \end{figure}
  330. \begin{itemize}
  331. \centering
  332. \item https://github.com/noahvogt/snailmail
  333. \item https://git.noahvogt.com/me/snailmail
  334. \end{itemize}
  335. \end{frame}
  336. \end{document}