\documentclass[ignorenonframetext,]{beamer}
\setbeamertemplate{caption}[numbered]
\setbeamertemplate{caption label separator}{: }
\setbeamercolor{caption name}{fg=normal text.fg}
\beamertemplatenavigationsymbolsempty
\usepackage{lmodern}
\usepackage{amssymb,amsmath}
\usepackage{ifxetex,ifluatex}
\usepackage{fixltx2e} % provides \textsubscript
\ifnum 0\ifxetex 1\fi\ifluatex 1\fi=0 % if pdftex
  \usepackage[T1]{fontenc}
  \usepackage[utf8]{inputenc}
\else % if luatex or xelatex
  \ifxetex
    \usepackage{mathspec}
  \else
    \usepackage{fontspec}
  \fi
  \defaultfontfeatures{Ligatures=TeX,Scale=MatchLowercase}
\fi
% use upquote if available, for straight quotes in verbatim environments
\IfFileExists{upquote.sty}{\usepackage{upquote}}{}
% use microtype if available
\IfFileExists{microtype.sty}{%
\usepackage{microtype}
\UseMicrotypeSet[protrusion]{basicmath} % disable protrusion for tt fonts
}{}
\newif\ifbibliography
\hypersetup{
            pdftitle={Linguagem de Consulta XPath},
            pdfborder={0 0 0},
            breaklinks=true}
\urlstyle{same}  % don't use monospace font for urls

% Prevent slide breaks in the middle of a paragraph:
\widowpenalties 1 10000
\raggedbottom

\AtBeginPart{
  \let\insertpartnumber\relax
  \let\partname\relax
  \frame{\partpage}
}
\AtBeginSection{
  \ifbibliography
  \else
    \let\insertsectionnumber\relax
    \let\sectionname\relax
    \frame{\sectionpage}
  \fi
}
\AtBeginSubsection{
  \let\insertsubsectionnumber\relax
  \let\subsectionname\relax
  \frame{\subsectionpage}
}

\setlength{\parindent}{0pt}
\setlength{\parskip}{6pt plus 2pt minus 1pt}
\setlength{\emergencystretch}{3em}  % prevent overfull lines
\providecommand{\tightlist}{%
  \setlength{\itemsep}{0pt}\setlength{\parskip}{0pt}}
\setcounter{secnumdepth}{0}
%-----------------------------------------------------------------------

\usepackage[T1]{fontenc}

\usepackage[math]{iwona}
% \usepackage[math]{kurier}

% \usepackage[sfdefault]{roboto}
\usepackage[sfdefault, condensed]{roboto}
% \usepackage[default]{sourcesanspro}

% \usefonttheme[onlymath]{serif}
% \usefonttheme[onlymath]{sans}

\usepackage{csquotes}

% % Font for code. ----------------------------
% \usepackage{inconsolata}
\usepackage[scaled=0.8]{beramono}

%-----------------------------------------------------------------------

% \usepackage{lmodern}
\usepackage{amssymb, amsmath}
\setcounter{MaxMatrixCols}{20} % bmatrix, max number of columns.

% \usepackage{ifxetex, ifluatex}
\usepackage{fixltx2e} % provides \textsubscript
\usepackage[utf8]{inputenc}
\usepackage[shorthands=off,main=brazil]{babel}
\usepackage{graphicx}

\usepackage{xcolor}
\usepackage{setspace}
\usepackage{xspace}
\usepackage{tabularx}

\setlength{\belowcaptionskip}{-0.5em}
\setlength{\parindent}{0pt}
\setlength{\parskip}{6pt plus 2pt minus 1pt}
\setlength{\emergencystretch}{3em}  % prevent overfull lines
\providecommand{\tightlist}{%
  \setlength{\itemsep}{0pt}\setlength{\parskip}{0pt}}
\setcounter{secnumdepth}{0}

%-----------------------------------------------------------------------
% Definições de esquema de cores.

% Ubuntu.
% http://www.color-hex.com/color-palette/2018
\definecolor{ubuntu_purple}{HTML}{2CA05A} % Título.
\definecolor{ubuntu_orange}{HTML}{686868} % Estrutura.
\definecolor{gray_dark}{HTML}{333333}  % Texto.
\definecolor{gray_light}{HTML}{DDDDDD} % Faixa.

%-----------------------------------------------------------------------
% Bibliography.

% \usepackage[style=authoryear]{biblatex}
% Use:
%   \cite{<ref>}
%   \parencite{<ref>}
%   \fullcite{<ref>}
%   \footfullcite{<ref>}
% ATTENTION: Compilation = pdflatex > biber > pdflatex > pdflatex.
% Call refs.bib at preamble with: \addbibresource{refs.bib}
%
%-----------------------------------------------------------------------

\usepackage{caption}
\captionsetup{
  font=footnotesize,
  labelfont={color=ubuntu_orange},
  labelsep=period}
\usepackage{subfig}

\makeatletter
\let\@@magyar@captionfix\relax
\makeatother

\providecommand{\tightlist}{%
  \setlength{\itemsep}{0pt}\setlength{\parskip}{0pt}}

%-----------------------------------------------------------------------

\usepackage{tikz}

\usebackgroundtemplate{
  \tikz[overlay, remember picture]
  \node[at = (current page.center),
        inner sep = 0pt] {%
          \includegraphics[keepaspectratio, height=\paperheight]{config/ufpr-fachada-baixo-1.jpg}
        };
}

%-----------------------------------------------------------------------

\hypersetup{
  colorlinks=true,
  linkcolor=ubuntu_orange,
  urlcolor=ubuntu_purple,
  citecolor=ubuntu_purple
}

%-----------------------------------------------------------------------
% ATTENTION: http://www.cpt.univ-mrs.fr/~masson/latex/Beamer-appearance-cheat-sheet.pdf

\usetheme{default}

\setbeamerfont{title}{series=\bfseries, size=\huge, parent=structure}
\setbeamerfont{subtitle}{series=\bfseries, size=\Large, parent=structure}
\setbeamerfont{frametitle}{series=\bfseries, size=\LARGE, parent=structure}

\setbeamertemplate{caption}[numbered]
\setbeamertemplate{caption label separator}{: }
\setbeamertemplate{caption}[numbered]{}
\setbeamertemplate{section in toc}[sections numbered]
\setbeamertemplate{subsection in toc}[subsections numbered]
\setbeamertemplate{sections/subsections in toc}[ball]{}
\setbeamertemplate{navigation symbols}{}
\setbeamertemplate{footline}{}
\setbeamertemplate{frametitle continuation}{\gdef\beamer@frametitle{}\vspace*{1ex}}

\setbeamertemplate{enumerate items}[default]
\setbeamertemplate{itemize items}{\scriptsize\raise1.25pt\hbox{\donotcoloroutermaths$\blacktriangleright$}}

% Rodapé.
\setbeamercolor{title in head/foot}{parent=subsection in head/foot}
\setbeamercolor{author in head/foot}{bg=ubuntu_orange, fg=white}
\setbeamercolor{date in head/foot}{parent=subsection in head/foot, fg=ubuntu_orange}

% Cabeçalho.
\setbeamercolor{section in head/foot}{bg=ubuntu_purple, fg=ubuntu_orange}
\setbeamercolor{subsection in head/foot}{bg=ubuntu_purple, fg=white}

\setbeamercolor{title}{fg=ubuntu_purple}       % Título dos slides.
\setbeamercolor{subtitle}{fg=ubuntu_orange}    % Subtítulo.
\setbeamercolor{institute}{fg=gray_dark}       % Instituição.
\setbeamercolor{frametitle}{fg=ubuntu_purple}  % De quadro.
\setbeamercolor{structure}{fg=ubuntu_orange}   % Listas e rodapé.
\setbeamercolor{item projected}{bg=gray_dark}
\setbeamercolor{normal text}{fg=gray_dark}     % Texto.

%-----------------------------------------------------------------------
% To remove empty brackets of \institution.

\makeatletter
\setbeamertemplate{footline}{
  \leavevmode%
  \hbox{%
    \begin{beamercolorbox}[
      wd=0.3\paperwidth, ht=2.25ex, dp=1ex, right]{author in head/foot}%
      \usebeamerfont{author in head/foot}\insertshortauthor{}\hspace*{1ex}
    \end{beamercolorbox}%
    \begin{beamercolorbox}[
      wd=0.6\paperwidth, ht=2.25ex, dp=1ex, left]{title in head/foot}%
      \usebeamerfont{title in head/foot}\hspace*{1ex}\bfseries\insertshorttitle{}
    \end{beamercolorbox}%
    \begin{beamercolorbox}[
      wd=0.1\paperwidth, ht=2.25ex, dp=1ex, right]{date in head/foot}%
      \bfseries\insertframenumber{}\hspace*{2ex}
    \end{beamercolorbox}
  }%
  \vskip0pt%
}
\makeatother

%-----------------------------------------------------------------------
%---- preamble-author.tex ----------------------------------------------

\author[Walmes Zeviani $\cdot$ UFPR]{%
      \href{http://leg.ufpr.br/~walmes}{Prof.~Walmes Zeviani} \\
      \href{mailto:walmes@ufpr.br}{\small\tt walmes@ufpr.br}
}

\institute[DEST/UFPR]{
  {Laboratório de Estatística e Geoinformação}\\
  {Departamento de Estatística}\\
  {Universidade Federal do Paraná}}

%-----------------------------------------------------------------------
%---- preamble-chunk.tex -----------------------------------------------

% Knitr.

% ATTENTION: this needs `\usepackage{xcolor}'.
\definecolor{color_line}{HTML}{333333}
\definecolor{color_back}{HTML}{DDDDDD}

% R input.
\ifcsmacro{Highlighting}{
  % Statment if it exists. ------------------
  \DefineVerbatimEnvironment{Highlighting}{Verbatim}{
    frame=lines,
    framesep=1ex,
    framerule=0.5pt,
    rulecolor=\color{color_line},
    numbers=right,
    fontsize=\footnotesize,
    baselinestretch=0.75,
    commandchars=\\\{\}}
  % Margens do ambiente `Shaded'.
  % \fvset{listparameters={\setlength{\topsep}{-1em}}}
  \renewenvironment{Shaded}{\vspace{-1ex}}{\vspace{-2ex}}
  }{
  % Statment if it not exists. --------------
}

% R output e todo `verbatim'.
\makeatletter
\def\verbatim@font{\linespread{0.75}\normalfont\ttfamily\footnotesize}
\makeatother

% Cor de fundo e margens do `vertabim'.
\let\oldv\verbatim
\let\oldendv\endverbatim

\def\verbatim{%
  \par\setbox0\vbox\bgroup
  \vspace{-1.5\topsep}
  \oldv
}
\def\endverbatim{%
  \oldendv
  \vspace{-0.9\topsep}
  \egroup\fboxsep0pt
  \noindent{\colorbox{color_back}{\usebox0}}\par
}

%-----------------------------------------------------------------------

\title{Linguagem de Consulta XPath}
\subtitle{Caminhos, predicados, ancestrais e funções}
\date{}

\begin{document}
\frame{\titlepage}

\begin{frame}{Introdução}

\begin{block}{Motivação}

\begin{itemize}
\tightlist
\item
  \textbf{XPath} é uma linguagem de consulta para XML.
\item
  Ela é baseada em notação de caminhos e é bastante flexível.
\item
  Com XPath pode-se:

  \begin{itemize}
  \tightlist
  \item
    Utilizar regras lógicas em atributos e conteúdo.
  \item
    Descrever caminhos baseados em relação vertical e horizontal.
  \item
    Aplicar funções numéricas e de texto.
  \end{itemize}
\item
  Existem outras formas de apontar para extração mas geralmente são
  subótimas comparadas ao XPath.
\end{itemize}

\end{block}

\end{frame}

\begin{frame}{Introdução}

\begin{block}{Objetivos}

\begin{itemize}
\tightlist
\item
  Introduzir o básico da sintaxe XPath para consultas.
\item
  Apresentar uso dos predicado e genealogia em consultas XPath.
\item
  Ilustrar o uso de predicados, operadores e funções.
\end{itemize}

\end{block}

\end{frame}

\section{XPath}\label{xpath}

\begin{frame}{Características}

\begin{itemize}
\tightlist
\item
  É uma \textbf{linguagem de consulta} para endereçamento e extração de
  informação em documentos XML/HTML.
\item
  É um padrão do \emph{World Wide Web Consortium} (W3C).
\item
  Só funciona com a representação DOM do documento e descreve caminhos
  pelos nós e ramos da árvore.
\item
  Uma instrução XPath retorna o conteúdo que bate com o caminho
  descrito.
\item
  Em alguns aspectos, se assemelha a Expressões Regulares.
\end{itemize}

\end{frame}

\begin{frame}[fragile]{Documentação do XPath no W3C}

\begin{block}{Documentação}

\begin{enumerate}
\def\labelenumi{\arabic{enumi}.}
\tightlist
\item
  XPath está na versão 3.1.
\item
  Documentação para cada versão: \url{https://www.w3.org/TR/xpath/all/}.
\item
  De acordo com o
  \href{https://github.com/GNOME/libxml2/blob/master/xpath.c}{código
  fonte}, a \texttt{libxml2} usa o XPath 1.0.
\end{enumerate}

\end{block}

\begin{block}{Tutoriais}

\begin{enumerate}
\def\labelenumi{\arabic{enumi}.}
\setcounter{enumi}{2}
\tightlist
\item
  \url{https://www.w3schools.com/xml/xpath_intro.asp}.
\item
  \url{https://docs.marklogic.com/guide/xquery/xpath};
\item
  \url{https://www.tutorialspoint.com/xpath/}.
\item
  \url{http://www.utools.nl/downloads/XPathReference.pdf}.
\end{enumerate}

\end{block}

\end{frame}

\begin{frame}{Cartões de referência e testadores online}

\begin{block}{Cartões de referência}

\begin{enumerate}
\def\labelenumi{\arabic{enumi}.}
\tightlist
\item
  \url{http://ricostacruz.com/cheatsheets/xpath.html}.
\item
  \url{http://xpath.alephzarro.com/content/cheatsheet.html}.
\item
  \url{http://www.mulberrytech.com/quickref/XSLT_1quickref-v2.pdf}.
\end{enumerate}

\end{block}

\begin{block}{Testadores online de XPath}

\begin{enumerate}
\def\labelenumi{\arabic{enumi}.}
\tightlist
\item
  \url{http://xpather.com/}.
\item
  \url{http://codebeautify.org/Xpath-Tester}.
\item
  \url{http://www.webtoolkitonline.com/xml-xpath-tester.html}.
\item
  \url{http://www.freeformatter.com/xpath-tester.html}.
\end{enumerate}

\end{block}

\end{frame}

\begin{frame}

\begin{figure}

{\centering \includegraphics[width=10cm]{./img/01-descendant-selectors} 

}

\caption{Seleção de descentes. Fonte: \url{https://devhints.io/xpath}.}\label{fig:unnamed-chunk-2}
\end{figure}

\end{frame}

\begin{frame}

\begin{figure}

{\centering \includegraphics[width=10cm]{./img/02-prefixes} 

}

\caption{Significado dos prefixos. Fonte: \url{https://devhints.io/xpath}.}\label{fig:unnamed-chunk-3}
\end{figure}

\end{frame}

\begin{frame}

\begin{figure}

{\centering \includegraphics[width=10cm]{./img/03-steps-and-axes} 

}

\caption{Combinação de seleção e prefixos. Fonte: \url{https://devhints.io/xpath}.}\label{fig:unnamed-chunk-4}
\end{figure}

\end{frame}

\begin{frame}

\begin{figure}

{\centering \includegraphics[width=10cm]{./img/04-child-axes} 

}

\caption{Seleção de filhos. Fonte: \url{https://devhints.io/xpath}.}\label{fig:unnamed-chunk-5}
\end{figure}

\end{frame}

\begin{frame}

\begin{figure}

{\centering \includegraphics[width=10cm]{./img/06-descendant-or-self-axes} 

}

\caption{Seleção de descendentes. Fonte: \url{https://devhints.io/xpath}.}\label{fig:unnamed-chunk-6}
\end{figure}

\end{frame}

\begin{frame}

\begin{figure}

{\centering \includegraphics[width=10cm]{./img/05-using-axes} 

}

\caption{Diferentes formas de caminho vertical e horizontal. Fonte: \url{https://devhints.io/xpath}.}\label{fig:unnamed-chunk-7}
\end{figure}

\end{frame}

\begin{frame}

\begin{figure}

{\centering \includegraphics[width=10cm]{./img/08-siblings} 

}

\caption{Seleção de irmãos ou caminhos horizontais. Fonte: \url{https://devhints.io/xpath}.}\label{fig:unnamed-chunk-8}
\end{figure}

\end{frame}

\begin{frame}

\begin{figure}

{\centering \includegraphics[width=6.5cm]{./img/07-other-axes} 

}

\caption{Outras especificações de eixos verticais e horizontais. Fonte: \url{https://devhints.io/xpath}.}\label{fig:unnamed-chunk-9}
\end{figure}

\end{frame}

\begin{frame}

\begin{figure}

{\centering \includegraphics[width=10cm]{./img/09-attributes-selectors} 

}

\caption{Seleção baseada nos atributos. Fonte: \url{https://devhints.io/xpath}.}\label{fig:unnamed-chunk-10}
\end{figure}

\end{frame}

\begin{frame}

\begin{figure}

{\centering \includegraphics[width=10cm]{./img/10-indexing} 

}

\caption{Seleção pela posição. Fonte: \url{https://devhints.io/xpath}.}\label{fig:unnamed-chunk-11}
\end{figure}

\end{frame}

\begin{frame}

\begin{figure}

{\centering \includegraphics[width=10cm]{./img/11-order-selectors} 

}

\caption{Mais seleção por posição. Fonte: \url{https://devhints.io/xpath}.}\label{fig:unnamed-chunk-12}
\end{figure}

\end{frame}

\begin{frame}

\begin{figure}

{\centering \includegraphics[width=10cm]{./img/12-predicates} 

}

\caption{Uso de predicados nos nós. Fonte: \url{https://devhints.io/xpath}.}\label{fig:unnamed-chunk-13}
\end{figure}

\end{frame}

\begin{frame}

\begin{center}\includegraphics[width=10cm]{./img/13-operators} \end{center}

\vspace{-0.75cm}

\begin{figure}

{\centering \includegraphics[width=10cm]{./img/14-boolean-functions} 

}

\caption{Operadores de comparação e lógicos. Fonte: \url{https://devhints.io/xpath}.}\label{fig:unnamed-chunk-15}
\end{figure}

\end{frame}

\begin{frame}

\begin{center}\includegraphics[width=10cm]{./img/13-unions} \end{center}

\vspace{-0.75cm}

\begin{figure}

{\centering \includegraphics[width=10cm]{./img/15-nesting-predicates} 

}

\caption{União de expressões e encadeamento. Fonte: \url{https://devhints.io/xpath}.}\label{fig:unnamed-chunk-17}
\end{figure}

\end{frame}

\begin{frame}

\begin{figure}

{\centering \includegraphics[width=10cm]{./img/16-node-functions} 

}

\caption{Funções aplicáveis aos nós. Fonte: \url{https://devhints.io/xpath}.}\label{fig:unnamed-chunk-18}
\end{figure}

\end{frame}

\begin{frame}

\begin{figure}

{\centering \includegraphics[width=10cm]{./img/17-string-functions} 

}

\caption{Funções de texto aplicáveis aos nós. Fonte: \url{https://devhints.io/xpath}.}\label{fig:unnamed-chunk-19}
\end{figure}

\end{frame}

\begin{frame}

\begin{figure}

{\centering \includegraphics[width=10cm]{./img/18-using-nodes} 

}

\caption{Combinando funções e precedência de seleção. Fonte: \url{https://devhints.io/xpath}.}\label{fig:unnamed-chunk-20}
\end{figure}

\end{frame}

\begin{frame}[fragile]{Exemplos de uso do XPath}

Usar esse conteúdo no \url{http://xpather.com/} para avaliar expressões
XPath.

\begin{verbatim}
<body>
  <div type="orçamento">
    <p>
      Essa sobremesa custa <span class="valor">10 reais</span>
      e serve <span class="quantidade">6 pessoas</span>.
    </p>
  </div>
  <div type="sobremesa">
    <ul class="ingredientes">
      <li>3 ovos.</li>
      <li>150 ml de leite.</li>
      <li>3 colheres de manteiga.</li>
      <li>Massa preparada de bolo.</li>
    </ul>
    <ul class="preparo">
      <li>Deixe o forno preaquecer por 20 min a 180 graus.</li>
      <li>Bata os ingredientes até uniformizar.</li>
      <li>Unte a forma.</li>
      <li>Despeje na forma.</li>
      <li>Leve ao fogo por aproximadamente 1 hora.</li>
    </ul>
  </div>
</body>
\end{verbatim}

\end{frame}

\begin{frame}

\begin{center}\includegraphics[width=8.5cm]{./img/crop-XPath243} \end{center}

\end{frame}

\begin{frame}

\begin{center}\includegraphics[width=8.5cm]{./img/crop-XPath265} \end{center}

\end{frame}

\begin{frame}

\begin{center}\includegraphics[width=8.5cm]{./img/crop-XPath248} \end{center}

\end{frame}

\begin{frame}

\begin{center}\includegraphics[width=8.5cm]{./img/crop-XPath266} \end{center}

\end{frame}

\begin{frame}

\begin{center}\includegraphics[width=8.5cm]{./img/crop-XPath262} \end{center}

\end{frame}

\begin{frame}

\begin{center}\includegraphics[width=8.5cm]{./img/crop-XPath252} \end{center}

\end{frame}

\begin{frame}

\begin{center}\includegraphics[width=8.5cm]{./img/crop-XPath250} \end{center}

\end{frame}

\begin{frame}

\begin{center}\includegraphics[width=8.5cm]{./img/crop-XPath258} \end{center}

\end{frame}

\begin{frame}

\begin{center}\includegraphics[width=8.5cm]{./img/crop-XPath259} \end{center}

\end{frame}

\begin{frame}

\begin{center}\includegraphics[width=8.5cm]{./img/crop-XPath254} \end{center}

\end{frame}

\begin{frame}

\begin{center}\includegraphics[width=8.5cm]{./img/crop-XPath264} \end{center}

\end{frame}

\begin{frame}[fragile]{Resumo de recursos do XPath}

\begin{itemize}
\tightlist
\item
  Prefixos e eixos:

  \begin{itemize}
  \tightlist
  \item
    \texttt{./}, \texttt{/}, \texttt{//}.
  \item
    Verticais: \texttt{child::}, \texttt{parent::},
    \texttt{descendant::}, \texttt{ancestor::}, etc.
  \item
    Horizontais: \texttt{following-sibling::},
    \texttt{preceding-sibling::}.
  \end{itemize}
\item
  Metacacteres: \texttt{.}, \texttt{..}, \texttt{@}, \texttt{*}.
\item
  Predicados: \texttt{{[}···{]}}.
\item
  Operadores de comparação: \texttt{=}, \texttt{!=},
  \texttt{\textless{}}, \texttt{\textless{}=}, \texttt{\textgreater{}},
  \texttt{\textgreater{}=}.
\item
  Operadores lógicos: \texttt{and}, \texttt{or}, \texttt{not()} e
  \texttt{\textbar{}}.
\item
  Funções: \texttt{text()}, \texttt{name()}.
\item
  Funções numéricas: \texttt{count()}, \texttt{position()},
  \texttt{last()}, etc.
\item
  Funções de texto: \texttt{contains()}, \texttt{starts-with()}, etc.
\end{itemize}

\end{frame}

\begin{frame}{Resumo}

\begin{itemize}
\tightlist
\item
  XPath é uma linguagem \textbf{flexível e poderosa} para consultar
  XML/HTML.
\item
  HTML são profundos na hierarquia e requerem uso de predicados para
  \textbf{delimitar a consulta}.
\item
  O domínio dos recursos do XPath são fundamentais para especificar
  buscas precisas, fáceis de criar e manter.
\item
  O emprego de predicados, eixos e funções potencializa a aplicação do
  XPath.
\item
  O mesmo resultado pode ser conseguido com diversas expressões.
\item
  Os predicados podem ser combinados de várias formas.
\item
  Como expressões regulares, e necessário equilibrar
  \textbf{especificidade} e \textbf{generalidade} para reduzir
  manutenção do código.
\end{itemize}

\end{frame}

\end{document}