%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% Author : Jishnu <jishnu7@gmail.com>
% original theme : progressbar by Sylvain Bouveret <sylvain[dot]bouveret[aT]cert[DoT]fr>
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\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<presentation>
\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 <sylvain[dot]bouveret[aT]cert[DoT]fr>
% jun. 2007 version 0.32
%
% based on the LaTeX-Beamer package :
% Copyright 2003 by Till Tantau <tantau@users.sourceforge.net>
%
% 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<presentation>

\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
<all>

\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}
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
  <head>
    <title>HTML</title>
  </head>
  <body>
  <p>Hello World</p>
  </body>
  \end{verbatim}
}%
\frame[containsverbatim]{\frametitle{HTML 5 Minified}%
  \begin{verbatim}
  <!DOCTYPE html>
  <title>HTML</title>
  <p>Hello World</p>
  \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}
  <video src="x.mp4" controls autobuffer></video>
  \end{verbatim}
  \begin{verbatim}
  <audio src="sound.mp3" controls></audio>
  \end{verbatim}
\begin{block}{Example}
http://youtube.com/html5
\end{block}
}%

\frame[containsverbatim]{\frametitle{Link Relations}%
\begin{semiverbatim}
<link \alert{rel="icon"} href="/favicon.ico" />
<a \alert{rel="archives"} href="http://myblog.com/archives">
old posts</a>
<a \alert{rel="external"} href="http://notmysite.com">
tutorial</a>
<a \alert{rel="license"} href="http://licenseurl.org">
license</a>
<a \alert{rel="nofollow"} href="http://notmysite.com/sample">
wannabe</a>
  \end{semiverbatim}
}%

\frame[containsverbatim]{\frametitle{Micro Data}%
  \begin{semiverbatim}
My name is <span \alert{itemprop="name"}>Neil</span>.
Our band is called <span \alert{itemprop="band"}>Blah</span>.
I am <span \alert{itemprop="nationality"}>Indian</span>.</p>
  \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}
 <html>
  <svg>
    <circle id="myCircle" class="important" cx="50%" 
	        cy="50%" r="100" 
        fill="url(#myGradient)"
        onmousedown="alert('hello');"/>
  </svg>
 </html>
  \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}