typografie.tex

\documentclass{beamer}

\mode<presentation> {
    \usetheme{Berlin}
    \setbeamercovered{transparent}
}

\usepackage[czech]{babel}
\usepackage[utf8]{inputenc}
\usepackage{times}
\usepackage{graphicx}
\usepackage{colortbl}

\usenavigationsymbolstemplate{}

\title{Typografie na webu}
\author{Milan Vít}
\institute{Ostravská univerzita v Ostravě}
\date{\today}

\begin{document}
    \begin{frame}
        \titlepage
    \end{frame}
    
    \begin{frame}{Osnova}
        \tableofcontents[pausesections]
    \end{frame}
    
    \section{Typografie teoreticky}
    \subsection{}
    
    \begin{frame}{Co je to typografie}
        \begin{itemize}
            \item Ani umění, ani věda, a zároveň oboje
            \item Zabývá se:
            \begin{itemize}
                \item Sazbou textů
                \item Studiem písem
                \item Estetičností dokumentů
            \end{itemize}
            \item Je vědou pro každého se zájmem, nejen pro studenty polygrafických škol
        \end{itemize}
    \end{frame}
    
    \begin{frame}{Historie typografie}
        \begin{itemize}
            \item Souvisí následujícími historickými událostmi:
            \begin{itemize}
                \item Vznikem symbolů, piktogramů a ideogramů v pravěku
                \item Objevem knihtisku v roce 1444
            \end{itemize}
        \end{itemize}
    \end{frame}
    
    \begin{frame}{K čemu je to dobré}
        \begin{itemize}
            \item Snazší orientace v textu
            \item Udržení pozornosti čtenáře
            \item Dojem profesionality
        \end{itemize}
    \end{frame}
    
    \section{Typografie prakticky}
    \subsection{}
    
    \begin{frame}{Zarovnání odstavce}
        \begin{itemize}
            \item HTML a CSS nám nabízí čtyři možnosti zarovnání
            \begin{itemize}[<+->]
                \item doleva
                \item na střed -- jen pro nadpisy a popisky obrázků
                \item<.-> doprava -- jen pro nadpisy a popisky obrázků
                \item do bloku -- nikdy
            \end{itemize}
        \end{itemize}
    \end{frame}
    
    \begin{frame}{Vyznačování}
        \begin{itemize}
            \item HTML nabízí pro zvýraznění textu čtyři podobné příkazy
        \end{itemize}
        \begin{tabular}{c!{\vrule}c>{\onslide<2->}c}
            \textbf{Výchozí styl}   & \textbf{Fyzické zvýraznění}   & \textbf{Sémantické zvýraznění}    \\ \hline
            \textbf{tučné}  & \path{b}  & \path{strong} \\
            \emph{kurzíva}  & \path{i}  & \path{em}     \\
        \end{tabular}
    \end{frame}
    
    \begin{frame}{Pomlčka, spojovník, minus}
        \begin{block}{Najdete rozdíl?}
            \begin{center}
                {\Huge - -- --- $+$ $-$}
            \end{center}
        \end{block}
    \end{frame}
    
    \begin{frame}{Pomlčka, spojovník, minus}
        \begin{tabular}{l!{\vrule}ll}
            \textbf{Název}  & \textbf{Použití}              & \textbf{Zápis}    \\ \hline
            Spojovník -     & nebude-li pršet, hořko-sladký & \path{-}          \\
            \onslide<2-> Pomlčka -- & \onslide<2-> pochod Praha--Prčice, 213,-- & \onslide<2-> \path{&ndash;}   \\
            \onslide<3-> Minus $-$  & \onslide<3-> $85 - 21 = x$                & \onslide<3-> \path{&minus;}
        \end{tabular}
    \end{frame}
    
    \begin{frame}{Uvozovky}
        \begin{itemize}
            \item České uvozovky = \uv{dvojité dolní devítky} a \uv{dvojité horní šestky}
            \begin{itemize}
                \item \textbf{Příklad:} Řekl jsem mu: \uv{Tvrdila mi, že to tak je}
            \end{itemize}
            \item Při vnoření jedna \uv{devítka}, resp. \uv{šestka} odpadá
        \end{itemize}
    \end{frame}
    
    \begin{frame}{Mezery}
        \begin{itemize}
            \item Za tečkou, čárkou, dvojtečkou, středníkem, vykřičníkem, otazníkem píšeme mezeru
            \item Před tečkou, čárkou, dvojtečkou, středníkem, vykřičníkem, otazníkem mezeru \textbf{ne}píšeme
            \begin{itemize}
                \item \only<1>{\textbf{Chybně:} Řekl mi ,že se vrátí .}
                      \only<2>{\textbf{Správně:} Řekl mi, že se vrátí.}
            \end{itemize}
        \end{itemize}
    \end{frame}
    
    \begin{frame}{Výpustka}
        \begin{itemize}
            \item Používáme v místě vypuštěné nebo nedopovězené části věty
            \item Před výpustkou na konci věty mezery nepíšeme, za ní ano
            \item Před výpustkou uprostřed věty píšeme mezery z obou stran
            \begin{itemize}
                \item \only<1>{\textbf{Zdrojový kód:} Ještě jednou mi objedeš klíčem auto a\path{&hellip;}}
                      \only<2>{\textbf{Výsledek:} Ještě jednou mi objedeš klíčem auto a\dots}
            \end{itemize}
        \end{itemize}
    \end{frame}
        
    \begin{frame}{Mezery}
        \begin{itemize}
            \item Nedělitelná mezera -- \path{&nbsp;}
            \begin{itemize}
                \item Používáme za jednoznakovými předložkami
            \end{itemize}
            \item Zúžená mezera -- \path{&thinsp;}
            \begin{itemize}
                \item Užší než nedělitelná mezera
                \item Měli bychom používat mezi číslem a jednotkou, titulem a jménem, u telefonních čísel
                \item V praxi nevyzpytatelná, nahrazuje se nedělitelnou mezerou
            \end{itemize}
        \end{itemize}
    \end{frame}
    
    \section*{Závěr}
    \subsection*{}
    
    \begin{frame}{Weby o typografii}
        \begin{itemize}
            \item Typografie -- skrytá tvář webdesignu\\
            \href{http://typografie.dero.name}{http://typografie.dero.name}
            \item Typomil -- písmo, typografie a sazba na webu\\
            \href{http://www.typomil.com}{http://www.typomil.com}
        \end{itemize}
    \end{frame}
    
    \begin{frame}{Děkuji za pozornost}
        \begin{block}{Otázky?}
        \end{block}
    \end{frame}    
\end{document}