cs302-week-three.tex

\documentclass[14pt,aspectratio=169]{beamer}

\usepackage{pgfpages}
\usepackage{fancyvrb}
\usepackage{tikz}
\usepackage{pgfplots}

\usepackage{minted}
\usemintedstyle{tango}

\usetheme{auriga}
\usecolortheme{auriga}

\setbeamercolor{background canvas}{bg=lightgray}

% define some colors for a consistent theme across slides
\definecolor{red}{RGB}{181, 23, 0}
\definecolor{blue}{RGB}{0, 118, 186}
\definecolor{gray}{RGB}{146, 146, 146}

\title{Web Development: \\ Programming in HTML}

\author{{\bf Gregory M. Kapfhammer}}

\institute[shortinst]{{\bf Department of Computer Science, Allegheny College}}

\begin{document}

{
  \setbeamercolor{page number in head/foot}{fg=background canvas.bg}
  \begin{frame}
    \titlepage
  \end{frame}
}

%% Slide
%
\begin{frame}{Technical Question}
  %
  \hspace*{.25in}
  %
  \vspace*{.2in}
  %
  \begin{center}
    %
    {\large How can I follow industry best practices for implementing
      syntactically valid hypertext markup language (HTML) files that correctly
    use content and tags to display text-based and image content?}
    %
  \end{center}
  %
  \vspace{1ex}
  %
  \begin{center}
    %
    \small Let's learn more about how to use HTML to write syntactically valid markup!
    %
  \end{center}
  %
\end{frame}

% Slide
%
\begin{frame}{The Web with HTML and Associated Languages}
%
  \begin{itemize}
    %
    \item HTML standards for the hypertext markup language
      %
    \item HTML is one of the many components in the modern web
      \begin{itemize}
        \item Markdown, HTML, CSS, JavaScript
        \item Design, implementation, and testing
        \item Deployment, maintenance, monitoring
        \item Linting and testing tools for all languages
      \end{itemize}
      %
    \item HTML source code must have correct {\em syntax} and {\em semantics}
      %
  \end{itemize}
%
\end{frame}

% Slide
%
\begin{frame}{Markup Languages and the Origin of HTML}
%
  \begin{itemize}
    %
    \item Distinction between {\em data} and {\em meta-data}
      %
    \item XML and HTML as markup languages
      \begin{itemize}
        \item XML is ``extensible''
        \item Both use tags to represent the markup
        \item Tags can be added to or removed from XML
        \item HTML has a largely fixed set of tags
      \end{itemize}
      %
      \vspace*{-.2in}
      %
    \item Check sites like \url{https://caniuse.com/} to learn more about the
      current features of HTML and its browser support. Different browsers have
      different support!
      %
  \end{itemize}
%
\end{frame}

%% Slide
%
\begin{frame}{Fragmented Browser Support for HTML}
  %
  \hspace*{.25in}
  %
  \vspace*{-.2in}
  %
  \begin{center}
    %
    {\large ``The Web Hypertext Applications Technology working group therefore
      intends to address the need for one coherent development environment for Web
      applications, through the creation of technical specifications that are
    intended to be implemented in mass-market web browsers.''}
    %
  \end{center}
  %
  \vspace{1ex}
  %
  \begin{center}
    %
    \small Has this working group been able to deliver on its promise?
    %
  \end{center}
  %
\end{frame}

% Slide
%
\begin{frame}{XHTML and HTML5}
%
  \begin{itemize}
    %
    \item XHTML aimed for a ``stricter'' HTML, ultimately not delivering and
      eventually being superseded by HTML5
      %
      \vspace*{-.1in}
      %
    \item Characteristics of HTML5
      \begin{itemize}
        \item Specify how a browsers should handle invalid markup
        \item Support JavaScript as a non-proprietary language
        \item Be backwards compatible with existing HTML
        \item See widespread adopting in all modern browsers
      \end{itemize}
      %
      \vspace*{-.1in}
      %
    \item Wait, what does a web browser have to do to render a web page? Why is
      it so difficult to get HTML and the web right?
      %
  \end{itemize}
%
\end{frame}

% Slide
%
\begin{frame}{Syntax and Semantics of HTML}
%
  \begin{itemize}
    %
    \item HTML contains tags that designate specific elements
      %
      \vspace*{-.1in}
      %
    \item HTML contains attributes that are key value pairs for tags
      %
      \vspace*{-.1in}
      %
    \item Additional characteristics of HTML
      \begin{itemize}
        \item Tags provide meaning and formatting for content
        \item Tags can be nested in their application
        \item Content is divided into the {\tt <head>} and{\tt <body>}
        \item Parsing and interpretation of tags varies among browsers
      \end{itemize}
      %
      \vspace*{-.2in}
      %
    \item How can you tell if your HTML is going to work? Linting and
      testing can help to ensure page correctness!
      %
  \end{itemize}
%
\end{frame}

% Slide
%
\begin{frame}[fragile]
  \frametitle{Programming HTML: Using the {\tt <head>} Tag}
  \normalsize
  \hspace*{-.25in}
  \begin{minipage}{6in}
    \vspace*{.25in}
    \begin{minted}[mathescape, numbersep=5pt, fontsize=\small]{html}
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width"/>
    <link href="css/github.css" rel="stylesheet">
    <link href="css/emoji.css" rel="stylesheet">
    <title>Share Your Travels</title>
  </head>
    \end{minted}
  \end{minipage}
  \vspace*{.05in}
  \begin{center}
    %
    \normalsize \noindent HTML tags are nested inside of the {\tt <head>} tag\\
    \normalsize \noindent Some HTML tags can define the meta-data about the web page \\
    \normalsize \noindent Other HTML tags define content displayed by the
    browser \\
    %
  \end{center}
  %
\end{frame}

% Slide
%
\begin{frame}[fragile]
  \frametitle{Programming HTML: Using the {\tt <body>} Tag}
  \normalsize
  \hspace*{-.25in}
  \begin{minipage}{6in}
    \vspace*{.25in}
    \begin{minted}[mathescape, numbersep=5pt, fontsize=\small]{html}
    <body>
      <h1>Share Your Travels</h1>
      <h2>A Delta 757 lands at LAX on January 29th.</h2>
      <img src="img/plane.jpg"/></a>
    </body>
    \end{minted}
  \end{minipage}
  \vspace*{.05in}
  \begin{center}
    %
    \normalsize \noindent The {\tt <body>} tag defines the region for a page's
    content\\
    \normalsize \noindent Many different tags can be nested inside of the {\tt
    <body>} \\
    \normalsize \noindent These tags define multi-level headers and include an
    image\\
    %
  \end{center}
  %
\end{frame}

% Slide
%
\begin{frame}[fragile]
  \frametitle{Programming HTML: Adding Extra Content}
  \normalsize
  \hspace*{-.25in}
  \begin{minipage}{6in}
    \vspace*{.25in}
    \begin{minted}[mathescape, numbersep=5pt, fontsize=\small]{html}
    <blockquote>
      <p><b>By Ricardo on <time>Feb 8, 2018</time></b></p>
      <p>Great photograph! How did you take it?</p>
      <p>This photo rates as <i class="em em---1"></i></p>
    </blockquote>
    \end{minted}
  \end{minipage}
  \vspace*{.05in}
  \begin{center}
    %
    \normalsize \noindent HTML supports multiple levels of nesting content \\
    \normalsize \noindent Let's explain the purpose of each tag in this example! \\
    \normalsize \noindent Sometimes the use of an HTML tag is overloaded \\
    %
  \end{center}
  %
\end{frame}

% Slide
%
\begin{frame}[fragile]
  \frametitle{Relative Referencing of External Files}
  \normalsize
  \hspace*{-.25in}
  \begin{minipage}{6in}
    \vspace*{.25in}
    \begin{minted}[mathescape, numbersep=5pt, fontsize=\small]{html}
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width"/>
    <link href="css/github.css" rel="stylesheet">
    <link href="css/emoji.css" rel="stylesheet">
    <title>Share Your Travels</title>
  </head>
    \end{minted}
  \end{minipage}
  \vspace*{.05in}
  \begin{center}
    %
    \normalsize \noindent The inclusion of additional files is relative to web
    server's root\\
    \normalsize \noindent This example assumes that the {\tt css/} directory
    exists in the root\\
    \normalsize \noindent What are the benefits to a hierarchical layout of
    files and directories? What are the challenges of this approach?\\
    %
  \end{center}
  %
\end{frame}

% Slide
%
\begin{frame}{Key Terms in Relative File Referencing}
%
  \begin{itemize}
    %
    \item HTML files will commonly refer to other CSS or image files
      %
      \vspace*{-.2in}
      %
    \item If the reference to the file is incorrect, no resource will load
      %
      \vspace*{-.15in}
      %
    \item Types of relative links in an HTML file
      \begin{itemize}
        \item Same directory
        \item Child directory
        \item Grandchild directory
        \item Parent directory
        \item Sibling directory
        \item Root of web server
        \item Default document
      \end{itemize}
      %
  \end{itemize}
%
\end{frame}

% Slide
%
\begin{frame}[fragile]
  \frametitle{Programming HTML: Creating Nested Lists}
  \normalsize
  \hspace*{-.55in}
  \begin{minipage}{6in}
    \vspace*{.25in}
    \begin{minted}[mathescape, numbersep=5pt, fontsize=\small]{html}
    <ol>
      <li><a href="https://www.lonelyplanet.com/"
        target="_blank">Visit the Lonely Planet Site</a></li>
      <li><a href="https://www.lonelyplanet.com/blog/"
        target="_blank">Read the Lonely Planet Blog</a></li>
    </ol>
    \end{minted}
  \end{minipage}
  \vspace*{.05in}
  \begin{center}
    %
    \normalsize \noindent Each tag has an opening and a closing location \\
    \normalsize \noindent This ordered list features hypertext references \\
    \normalsize \noindent References to external pages have a name and a URL \\
    %
  \end{center}
  %
\end{frame}

% Slide
%
\begin{frame}[fragile]
  \frametitle{Programming HTML: Semantic Markup}
  \normalsize
  \hspace*{-.45in}
  \begin{minipage}{6in}
    \vspace*{-.15in}
    \begin{minted}[mathescape, numbersep=5pt, fontsize=\small]{html}
    <footer>
      Created with <i class="em em-heart"></i>
      and <i class="em em-coffee"></i> by Greg Kapfhammer
    </footer>
    \end{minted}
  \end{minipage}
  \vspace*{.05in}
  \begin{center}
    %
    \normalsize \noindent Semantic markup influences display and has meaning \\
    \normalsize \noindent Examples of this markup type include {\tt <nav>} and {\tt <main>} \\
    \normalsize \noindent This source code segment defines the page's {\tt <footer>} \\
    \normalsize \noindent The segment contains both {\tt <footer>} and {\tt </footer>} \\
    \normalsize \noindent What are the trade-offs associated with semantic markup? \\
    %
  \end{center}
  %
\end{frame}

% Slide
%
\begin{frame}[fragile]
  \frametitle{Programming HTML: Using External Resources}
  \normalsize
  \hspace*{-.15in}
  \begin{minipage}{6in}
    \vspace*{.15in}
    \begin{minted}[mathescape, numbersep=5pt, fontsize=\small]{html}
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width"/>
    <link href="css/site.css" rel="stylesheet">
    <link href="css/emoji.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?
         family=Montserrat"
        rel="stylesheet" type="text/css">
  </head>
    \end{minted}
  \end{minipage}
  \vspace*{-.05in}
  \begin{center}
    %
    \normalsize \noindent Which of these resources are ``internal''? \\
    \normalsize \noindent Which of these resources are ``external''? \\
    \normalsize \noindent What are the trade-offs of using external resources? \\
    %
  \end{center}
  %
\end{frame}

% Slide
%
\begin{frame}{Tools for Web Development}
%
  \begin{itemize}
    %
    \item Many different tools can support your web development!
      %
      \vspace*{-.2in}
      %
    \item Installing some of the tools can be very challenging
      %
      \vspace*{-.15in}
      %
    \item Tools to support your web development tasks
      \begin{itemize}
        \item Text editor
        \item Web browser ``dev tools''
        \item Terminal window
        \item Linters
        \item Test frameworks
        \item Visual debuggers
        \item Automated fault localizers
      \end{itemize}
      %
  \end{itemize}
%
\end{frame}

\end{document}