%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% Author : Jishnu
% original theme : progressbar by Sylvain Bouveret
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\documentclass[12]{beamer}
\usecolortheme{crane}
\useinnertheme{rectangles}
%\useinnertheme{progressbar}
%\useoutertheme{progressbar}
\usepackage{iwona}
%start
\RequirePackage{tikz}
\usetikzlibrary{fadings}
\RequirePackage{ifthen}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%
% Processing options...
%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\makeatletter
\def\progressbar@headline{none}%
\def\progressbar@frametitle{picture-section}%
\def\progressbar@imagename{images/tree04}%
\def\progressbar@titlepage{picture}%
\define@key{progressbar}{headline}[none]{%
\def\progressbar@headline{#1}%
}
\define@key{progressbar}{frametitle}[picture]{%
\def\progressbar@frametitle{#1}%
}
\define@key{progressbar}{imagename}{%
\def\progressbar@imagename{#1}%
\pgfdeclareimage[width=0.12\textwidth,interpolate=true]{headlineimage}{\progressbar@imagename}
}
\define@key{progressbar}{titlepage}[picture]{%
\def\progressbar@titlepage{#1}%
}
\def\progressbaroptions#1{\setkeys{progressbar}{#1}}
\def\insertintermediateframenumber{\inserttotalframenumber}
% This piece of code is just to make the code Babel-compliant with every
% language.
% It comes from:
% http://forum.mathematex.net/latex-f6/beamer-et-shorthandoff-t3851.html
\makeatletter
\newboolean{@twopt} \setboolean{@twopt}{false}
\newcommand*{\twoptoff}{\ifnum \catcode`\;=13 \catcode`\;=12 \setboolean{@twopt}{true} \fi}
\newcommand*{\twopton}{\if@twopt \catcode`\;=13 \setboolean{@twopt}{false} \fi}
%
%
\mode
\newbox\progressbar@blockbox
% The ultimate trick to prevent the itemize-inside-blocks bug from happening...
\let\progressbar@tempitemize=\itemize
\def\progressbar@itemize{\ifhmode\else\vskip-0.85\topsep\fi\progressbar@tempitemize}
%
\defbeamertemplate*{block begin}{progressbar theme}
{
\setbox\progressbar@blockbox=\hbox to 0.95\textwidth\bgroup\vbox\bgroup\raggedright\begin{minipage}{0.95\textwidth} \ifx\insertblocktitle\@empty\else{\usebeamerfont{block title}\usebeamercolor{block title}\emph{\insertblocktitle}}\\[-0.3cm]% Just to be "babel-safe"
\twoptoff{}\tikz\draw[black!20!bg] (0, 0) -- (\textwidth, 0);\twopton{}\fi\usebeamerfont{block body}\global\let\itemize=\progressbar@itemize\par
}
\defbeamertemplate*{block end}{progressbar theme}
{
\global\let\itemize=\progressbar@tempitemize\end{minipage}\egroup\egroup
\usebeamercolor{block body}
{\centering
\begin{tikzpicture}
\draw (0, 0) node[draw=fg!20!bg,fill=bg, rounded corners=2pt] (box) {\box\progressbar@blockbox};
\end{tikzpicture}}
}
\defbeamertemplate*{block alerted begin}{progressbar theme}
{
\setbox\progressbar@blockbox=\hbox to 0.95\textwidth\bgroup\vbox\bgroup\raggedright\begin{minipage}{0.95\textwidth}{\usebeamerfont{block title alerted}\color{alerted text.fg}\insertblocktitle}\\[-0.3cm]\twoptoff{}% Just to be "babel-safe"
\usebeamercolor{block body alerted}
\tikz\draw[fg!20!bg] (0, 0) -- (\textwidth, 0);\twopton{}\usebeamerfont{block body alerted}\usebeamercolor{block body}\global\let\itemize=\progressbar@itemize\par
}
\defbeamertemplate*{block alerted end}{progressbar theme}
{
\global\let\itemize=\progressbar@tempitemize\end{minipage}\egroup\egroup
\usebeamercolor{block body alerted}
{\centering
\begin{tikzpicture}
\draw node[draw=fg!20!bg,fill=bg, rounded corners=2pt] {\box\progressbar@blockbox};
\end{tikzpicture}}
}
\defbeamertemplate*{block example begin}{progressbar theme}
{
\setbox\progressbar@blockbox=\hbox to 0.95\textwidth\bgroup\vbox\bgroup\raggedright\begin{minipage}{0.95\textwidth}{\usebeamerfont{block title example}\color{example text.fg}\insertblocktitle}\\[-0.3cm]\twoptoff{}% Just to be "babel-safe"
\usebeamercolor{block body example}
\tikz\draw[fg!20!bg] (0, 0) -- (\textwidth, 0);\twopton{}\usebeamerfont{block body example}\usebeamercolor{block body}\global\let\itemize=\progressbar@itemize\par
}
\defbeamertemplate*{block example end}{progressbar theme}
{
\global\let\itemize=\progressbar@tempitemize\end{minipage}\egroup\egroup
\usebeamercolor{block body example}
{\centering
\begin{tikzpicture}
\draw node[draw=fg!20!bg,fill=bg, rounded corners=2pt] {\box\progressbar@blockbox};
\end{tikzpicture}}
}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%
% Frame title...
%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\def\progressbar@separator{--}
\ifx\progressbar@imagename\@relax
\else
\pgfdeclareimage[width=0.12\textwidth,interpolate=true]{headlineimage}{\progressbar@imagename}
\fi
\ifx\progressbar@frametitle\@relax
\def\progressbar@frametitle{normal}
\fi
\defbeamertemplate*{frametitle}{progressbar theme}{
\edef\tempa{normal}
\ifx\progressbar@frametitle\tempa
\begin{centering}
\textbf{\insertframetitle}
\par
\end{centering}
\else
\edef\tempa{picture-subsection}
\ifx\progressbar@frametitle\tempa
\parbox[c]{0.13\textwidth}{\pgfuseimage{headlineimage}}
\parbox[c]{0.85\textwidth}{
\usebeamercolor{frametitle}{\scriptsize \ifx\insertsection\@empty\ \else\insertsection\fi\ifx\insertsubsection\@empty\else\ \progressbar@separator\ \insertsubsection\fi}\\[-0.3cm]\rule{0.7\textwidth}{0.5pt}\par%\vskip-1cm\rule{0.7\textwidth}{0.5pt}\par
\textbf{\vphantom{Hp}\insertframetitle}
}
\else
\parbox[c]{0.13\textwidth}{\pgfuseimage{headlineimage}}
\parbox[c]{0.85\textwidth}{
\usebeamercolor{frametitle}{\scriptsize \ifx\insertsection\@empty\ \else\insertsection\fi}\\[-0.3cm]\rule{0.7\textwidth}{0.5pt}\par%\vskip-1cm\rule{0.7\textwidth}{0.5pt}\par
\textbf{\vphantom{Hp}\insertframetitle}
}
\fi
\fi
}
%end
% Beamer theme by Sylvain Bouveret
% jun. 2007 version 0.32
%
% based on the LaTeX-Beamer package :
% Copyright 2003 by Till Tantau
%
% This program can be redistributed and/or modified under the terms
% of the GNU Public License, version 2.
\RequirePackage{tikz}
\makeatletter
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%
% Some color definitions...
%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\setbeamercolor{progressbar primary}{parent=palette primary}
\setbeamercolor{progressbar secondary}{parent=palette secondary}
\setbeamercolor{progressbar tertiary}{parent=palette tertiary}
\setbeamercolor{progressbar quaternary}{parent=palette quaternary}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%
% Some computations dedicated to the progressbar...
%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newdimen\progressbar@currentbarlength
\newdimen\progressbar@framenumberrectangle
\newdimen\progressbar@titlerectangle
\newdimen\progressbar@leftbar
\newcount\progressbar@tmpresult
\newcount\progressbar@numer
\newcount\progressbar@denom
\newcount\progressbar@barlength
\progressbar@framenumberrectangle=\paperwidth
\progressbar@titlerectangle=\paperwidth
\advance\progressbar@framenumberrectangle by -0.9cm
\advance\progressbar@titlerectangle by -1.1cm
\progressbar@barlength=115 % (in millimeters)
\progressbar@leftbar=\progressbar@titlerectangle
\advance\progressbar@leftbar by -\progressbar@barlength mm
\def\insertprogressbar{
\ifnum\inserttotalframenumber=1\else
\progressbar@numer=\insertframenumber
\advance\progressbar@numer by -1
\progressbar@denom=\inserttotalframenumber
\advance\progressbar@denom by -1
\progressbar@tmpresult=\progressbar@barlength
\multiply\progressbar@tmpresult by \progressbar@numer
\divide\progressbar@tmpresult by \progressbar@denom
\progressbar@currentbarlength=\progressbar@tmpresult mm
\begin{tikzpicture}
\shade[top color=bg, bottom color=bg!80!fg] (0, 0) rectangle (\paperwidth, 0.6cm);
\shade[left color=bg,right color=bg!70!fg] (.5\paperwidth, 0.2cm) rectangle (\paperwidth, 0.22cm);
\draw (\progressbar@framenumberrectangle, 0.21cm) node [anchor=mid west, draw=bg!70!fg, fill=bg] {\color{structure.fg!70!bg}\insertframenumber~/~\inserttotalframenumber};
\draw (\progressbar@titlerectangle, 0.32cm) node [anchor=south east] {\color{bg!70!fg}\inserttitle};
\fill (\progressbar@leftbar, 0.12cm) [fill=bg, rounded corners=0.1cm] rectangle (\progressbar@titlerectangle, 0.3cm);
\ifnum\insertframenumber=1\else
\shade[left color=progressbar primary.fg!10!bg, right color=progressbar primary.fg!20!bg, rounded corners=0.1cm] (\progressbar@leftbar, 0.12cm) rectangle ++(\progressbar@currentbarlength, 0.2cm);
\fi
\draw (\progressbar@leftbar, 0.11cm) [draw=bg!70!fg, rounded corners=0.1cm] rectangle ++(\progressbar@barlength mm, 0.2cm);
\end{tikzpicture}
\fi
}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%
% Definition of the customized templates...
%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\mode
\newlength\progressbar@sectionboxwidth
\newlength\progressbar@sectionboxheight
\newbox\progressbar@sectionbox
\newbox\progressbar@sectionboxbox
\usesectionheadtemplate
{\hfill
\setbox\progressbar@sectionbox=\hbox{\insertsectionhead}%
\progressbar@sectionboxwidth=\wd\progressbar@sectionbox
\advance\progressbar@sectionboxwidth by 4pt
\setbox\progressbar@sectionbox=\hbox{\pgfinterruptpicture t \endpgfinterruptpicture}%
\progressbar@sectionboxheight=\ht\progressbar@sectionbox
\advance\progressbar@sectionboxheight by 4pt
\begin{tikzpicture}
\useasboundingbox (-0.5\progressbar@sectionboxwidth, 0pt) rectangle (0.5\progressbar@sectionboxwidth, \progressbar@sectionboxheight);
\draw[anchor=base] (0pt, 2pt) node {\color{structure.fg!80!bg} \insertsectionhead};
\draw[rounded corners=3pt, draw=structure.fg!80!bg] (-0.5\progressbar@sectionboxwidth, 0pt) rectangle (0.5\progressbar@sectionboxwidth, \progressbar@sectionboxheight);
\end{tikzpicture}
}
{\hfill
\setbox\progressbar@sectionbox=\hbox{\pgfinterruptpicture\insertsectionhead\endpgfinterruptpicture}%
\progressbar@sectionboxwidth=\wd\progressbar@sectionbox
\advance\progressbar@sectionboxwidth by 4pt
\setbox\progressbar@sectionboxbox=\hbox{\pgfinterruptpicture t \endpgfinterruptpicture}%
\progressbar@sectionboxheight=\ht\progressbar@sectionboxbox
\advance\progressbar@sectionboxheight by 4pt
\begin{tikzpicture}
\useasboundingbox (-0.5\progressbar@sectionboxwidth, 0pt) rectangle (0.5\progressbar@sectionboxwidth, \progressbar@sectionboxheight);
\draw[anchor=base] (0pt, 2pt) node {\color{structure.fg!50!bg} \insertsectionhead};
\end{tikzpicture}
}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%
% Headline...
%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\defbeamertemplate*{headline}{progressbar theme}
{%
\leavevmode%
\begin{beamercolorbox}[wd=\paperwidth,ht=4ex,dp=1.125ex]{section in head/foot}%
\insertsectionnavigationhorizontal{\paperwidth}{}{}%\hskip0pt plus1filll}{}%
\end{beamercolorbox}%
}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%
% Footline...
%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\defbeamertemplate*{footline}{progressbar theme}{
\begin{beamercolorbox}[wd=\paperwidth,ht=0.6cm,dp=0ex]{progressbar in head/foot}%
\insertprogressbar
\end{beamercolorbox}%
}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%
% Title page...
%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%\institute{(void)}
\defbeamertemplate*{title page}{progressbar theme}{
\pgfdeclarehorizontalshading{separationtitlepagelineshading}{0.5pt}{color(0cm)=(bg); color(0.5\textwidth)=(structure.fg); color(\textwidth)=(bg)}
\makeatletter
\begin{center}
\textbf{\textcolor{structure.fg}\large\inserttitle}
\pgfuseshading{separationtitlepagelineshading}
\vskip\baselineskip
\footnotesize\insertauthor\\[\baselineskip]
\ifx\insertinstitute\@empty \else\tiny\insertinstitute\\[\baselineskip]\fi
\insertlogo
\vskip\baselineskip
\pgfuseshading{separationtitlepagelineshading}
\vfill
\footnotesize
\insertdate
\end{center}
\makeatother
}
\setbeamertemplate{title page}[mytitlepage]
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%
% Background...
%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\defbeamertemplate*{background canvas}{progressbar theme}{\pgfuseshading{background shading}}%[action]
\AtBeginDocument{%
{
\usebeamercolor{progressbar primary}
\pgfdeclareverticalshading{background shading}{\the\paperwidth}{color(0cm)=(normal text.bg); color(0.8\paperheight)=(normal text.bg); color(0.95\paperheight)=(progressbar primary.bg); color(\paperheight)=(progressbar primary.bg)
}
}
}
\mode
\makeatother
%\progressbaroptions{titlepage=normal,headline=sections,frametitle=picture-section}
\setbeamercovered{dynamic}
\newenvironment<>{varblock}[2][\textwidth]{%
\setlength{\textwidth}{#1}
\begin{actionenv}#3%
\def\insertblocktitle{#2}%
\par%
\usebeamertemplate{block begin}}
{\par%
\usebeamertemplate{block end}%
\end{actionenv}}
\begin{document}
\title{HTML 5}
\subtitle{The Next Generation Markup on the Web}
\author[Jishnu]{\textbf{Jishnu Mohan}}
\institute{Dept. of IT, MESCE \linebreak Guide: Prof.C.K Raju}
\date{October 19, 2010}
\section{Title}
\begin{frame}
\titlepage
\end{frame}
\progressbaroptions{imagename=pics/WorldWideWeb.jpg}
\begin{frame}
\frametitle{Outline}
\tableofcontents[pausesections]
\end{frame}
\section{Introduction}
\progressbaroptions{imagename=pics/html5.jpg}
\begin{frame}
\begin{center}
\includegraphics[scale=0.3]{pics/whatwg.png}\\
\huge WHATWG \\
\small Web Hypertext Application Technology Working Group
\end{center}
\end{frame}
\begin{frame}
\begin{center}
\includegraphics[scale=0.3]{pics/img_w3c_13.jpg}\\
%\huge W3C \\
%\small World Wide Web\\
% Consortium
\end{center}
\end{frame}
\begin{frame}
\frametitle{History of HTML}
\begin{description}
\item[1991] HTML
\pause
\item[1994] HTML 2
\pause
\item[1995] HTML 3
\pause
\item[1996] CSS + JavaScript
\pause
\item[1997] HTML 3.2
\pause
\item[1998] HTML 4, CSS 2
\pause
\item[2000] XHTML 1
\pause
\item[2002] Tableless Web Design
\pause
\item[2005] AJAX
\pause
\item[2008] HTML 5 Working Draft
\end{description}
\end{frame}
%%%
%\subsection{Browser Support}
%\begin{frame}
%\frametitle{Browser Support}
%\begin{tabular}{cc}
%\includegraphics[scale=.09]{pics/firefox.png}{Firefox}&
%\includegraphics[scale=.2]{pics/chromium-logo.png}{Chromium / Google Chrome}\\
%\includegraphics[scale=.15]{pics/opera_logo.png}{Opera}&
%\includegraphics[scale=.2]{pics/microsoft-ie9-logo.png}{IE 9}
%\includegraphics[scale=.12]{pics/SafariLogo.png}{Safari}
%\end{tabular}
%\end{frame}
%%%
\begin{frame}
\begin{center}
HTML 5 $\approx$ HTML + CSS + JavaScript API
\end{center}
\end{frame}
\progressbaroptions{imagename=pics/Why-Not-Run-Your-Browser-with-HTML5.png}
\AtBeginSection[] {
\begin{frame}[plain]
\frametitle{Outline}
\tableofcontents[currentsection]
\end{frame}
\addtocounter{framenumber}{-1}
}
\section{Comparison Between HTML 4 and HTML 5}
\frame[containsverbatim]{\frametitle{HTML 4}%
\small\begin{verbatim}
HTML
Hello World
\end{verbatim}
}%
\frame[containsverbatim]{\frametitle{HTML 5 Minified}%
\begin{verbatim}
HTML
Hello World
\end{verbatim}
}
%\begin{block}{Column 1 Header}
%Column 1 Body Text
%\end{block}
%\begin{columns}[t]
%\column{.5\textwidth}
%\begin{block}{Column 1 Header}
%Column 1 Body Text
%\end{block}
%\column{.5\textwidth}
%\begin{block}{Column 2 Header}
%Column 2 Body Text
%\end{block}
%\end{columns}
%\begin{block}{Column 1 Header}
%Column 1 Body Text
%\end{block}
\AtBeginSection[] {
\begin{frame}[plain]
\frametitle{Outline}
\tableofcontents[currentsection]
\end{frame}
\addtocounter{framenumber}{-1}
}
\section{Tags}
\begin{frame}
\frametitle{Removed Tags}
\begin{itemize}
\item width
\item height
\item size
\item $<$u$>$
\item $<$strike$>$
\item cellpadding
\item valign
\item $<$basefont$>$
\item $<$font$>$
\item $<$center$>$
\end{itemize}
\end{frame}
\begin{frame}
\frametitle{New Tags}
\begin{itemize}
\item header
\item nav
\item aside
\item article
\item section
\item footer`
\item video
\item canvas
\item time
\end{itemize}
\end{frame}
\begin{frame}
\begin{center}
\includegraphics[width=\linewidth]{Screenshot.png}
\end{center}
\end{frame}
\begin{frame}
\begin{center}
\includegraphics[width=\linewidth]{Screenshot-1.png}
\end{center}
\end{frame}
\frame[containsverbatim]{\frametitle{Video and Audio}%
\begin{verbatim}
\end{verbatim}
\begin{verbatim}
\end{verbatim}
\begin{block}{Example}
http://youtube.com/html5
\end{block}
}%
\frame[containsverbatim]{\frametitle{Link Relations}%
\begin{semiverbatim}
old posts
tutorial
license
wannabe
\end{semiverbatim}
}%
\frame[containsverbatim]{\frametitle{Micro Data}%
\begin{semiverbatim}
My name is Neil.
Our band is called Blah.
I am Indian.
\end{semiverbatim}
}%
\begin{frame}
\frametitle{Canvas}
\begin{center}
Canvas, Canvas 3D (WebGL)
\linebreak \linebreak
\end{center}
\begin{block}{Example}
http://www.3dtin.com
\end{block}
\end{frame}
\frame[containsverbatim]{\frametitle{SVG}%
\begin{verbatim}
\end{verbatim}
}%
\progressbaroptions{imagename=pics/javascript.jpg}
\AtBeginSection[] {
\begin{frame}[plain]
\frametitle{Outline}
\tableofcontents[currentsection]
\end{frame}
\addtocounter{framenumber}{-1}
}
\section{JavaScript API}
\begin{frame}
\frametitle{JavaScript API}
\begin{itemize}
\item Client Side Storage (Web SQL Database, App Cache, Web Storage)
\item Communication (Web Sockets, Worker Workers)
\item Desktop experience (Notifications, Drag and Drop API)
\item Geolocation
\end{itemize}
\end{frame}
\subsection{Web SQL Database}
\frame[containsverbatim]{\frametitle{Web SQL Database}%
\begin{verbatim}
var db = window.openDatabase("Database Name",
"Database Version");
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM test", [],
successCallback, errorCallback);
});
\end{verbatim}
}%
\subsection{Geolocation}
\frame[containsverbatim]{\frametitle{Geolocation}%
\begin{verbatim}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var options = { position: new google.maps.LatLng(lat, lng) }
var marker = new google.maps.Marker(options);
marker.setMap(map);
});
}
\end{verbatim}
}%
\progressbaroptions{imagename=pics/CSS.png}
\AtBeginSection[] {
\begin{frame}[plain]
\frametitle{Outline}
\tableofcontents[currentsection]
\end{frame}
\addtocounter{framenumber}{-1}
}
\section{CSS}
\begin{frame}
\frametitle{CSS 3: New Features}
\begin{itemize}
\item FontFace
\item Text wrapping
\item Columns
\item Text Stroke
\item Opacity
\item Rounded Corners
\item Gradients
\item Shadows
\item Animations
\end{itemize}
\end{frame}
\progressbaroptions{imagename=pics/WorldWideWeb.jpg}
\section{Advantages}
\begin{frame}
\begin{itemize}
\frametitle{Advantages}
\item No need to depend on proprietary technologies
\item Less webpage size compared to HTML 4
\item Faster when compared to HTML 4 + JavaScript
\item Common platform for all webpages
\end{itemize}
\end{frame}
\section{Current Problems}
\begin{frame}
\begin{itemize}
\frametitle{Current Problems}
\item Heavy processor and memory utilisation
\item Standardisation
\end{itemize}
\end{frame}
\AtBeginSection[] {
\begin{frame}[plain]
\frametitle{Outline}
\tableofcontents[currentsection]
\end{frame}
\addtocounter{framenumber}{-1}
}
\section{Conclusion}
\begin{frame}
\begin{center}
Conclusion
\end{center}
\end{frame}
\begin{frame}
\frametitle{Reference}
\begin{itemize}
\item \textbf{W3C Working Draft} \\ dev.w3c.org/html5
\item \textbf{WHATWG}\\ http://whatwg.org/html5,\\ irc.freenode.net \# whatwg
\item \textbf{Wikipedia}
\end{itemize}
\end{frame}
\begin{frame}
\begin{center}
\huge{Thank You !}
\linebreak \linebreak \linebreak \small{jishnu7@gmail.com\linebreak http://blog.thecodecracker.com} \linebreak \linebreak \linebreak \linebreak \linebreak \linebreak
\tiny This document is created using \LaTeX\
\end{center}
\end{frame}
\end{document}