<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>Single Page Applications</title>

		<meta name="author" content="Julio Biason">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<link rel="stylesheet" href="_external/reveal.min.css">
		<link rel="stylesheet" href="_external/default.css" id="theme">
		<link rel="stylesheet" href="jointjs/joint.min.css">

		<!-- For syntax highlighting -->
		<link rel="stylesheet" href="_external/zenburn.css">

		<!-- If the query includes 'print-pdf', include the PDF print sheet -->
		<script>
			if( window.location.search.match( /print-pdf/gi ) ) {
				var link = document.createElement( 'link' );
				link.rel = 'stylesheet';
				link.type = 'text/css';
				link.href = '_external/pdf.css';
				document.getElementsByTagName( 'head' )[0].appendChild( link );
			}
		</script>

		<!--[if lt IE 9]>
		<script src="reveal.js/lib/js/html5shiv.js"></script>
		<![endif]-->

		<style>
.semi-opaque {
	background-color: rgba(0, 0, 0, 0.7);
}

* {
	hyphens: none !important;
	-moz-hyphens: none !important;
}

div.code {
    font-size: 150%
}

#traditional-1, #traditional-2, #spa-1, #spa-2, #spa-3 {
	background-color: white;
}
		</style>
	</head>

	<body>

		<div class="reveal">
			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section data-background='_images/Eau_Rouge_1997.jpg' class='semi-opaque' data-header>
					<h1>SPA</h1>

					<h2>Single Page Applications</h2>
				</section>

				<section>
					A idéia de um Single Page Application é carregar todos os
					elementos que devem ser apresentados ao usuário de uma só vez ou
					em pequenas partes incrementais.
				</section>

				<section>
					<section>
						<h2>Modelo Dinâmico "Tradicional"</h2>
						<div id='traditional-1'></div>
					</section>

					<section>
						<h2>Modelo Dinâmico "Tradicional"</h2>
						<div id='traditional-2'></div>
					</section>

					<section>
						<h2>Modelo SPA</h2>
						<div id='spa-1'></div>
					</section>

					<section data-transition="slide" data-background-transition="fade">
						<h2>Modelo SPA</h2>
						<div id='spa-2'></div>
					</section>

					<section data-transition="slide" data-background-transition="fade">
						<h2>Modelo SPA</h2>
						<div id='spa-3'></div>
					</section>
				</section>

				<section>
					<section>
						<p>Bacana, mas...</p>

						<h2>Como Faiz?</h2>
					</section>

					<section>
						<img src='_images/demotimeheader2.png'>
					</section>
				</section>

				<section>
					<section>
						<h2>O estranho caso de onde estou</h2>
					</section>

					<section>
						<p>No modelo tradicional, a URL indica onde o usuário
							se encontra.</p>

						<p>O usuario pode salvar a URL e retornar a mesma
							posição depois.</p>

						<p>Se o conteúdo é lido por partes, perde-se a
							informação de posição.</p>
					</section>

					<section>
						<h2>Você sabia que...</h2>

						<p>É possível criar um link que pula pro meio da página?</p>
					</section>

					<section>
						<div class='code'>
							<pre><code data-trim class='html'>
<a href='#meio-da-pagina'>Pular para o meio da página</a>
							</code></pre>
						</div>

						<p>...e mais adiante...</p>

						<div class='code'>
							<pre><code data-trim class='html'>
<a name='meio-da-pagina'></a>
							</code></pre>
						</div>
					</section>

					<section>
						<p>Ou HTML5:</p>

						<div class='code'>
							<pre><code data-trim class='html'>
<a href='#meio-da-pagina'>Pular para o meio da página</a>
							</code></pre>
						</div>

						<div class='code'>
							<pre><code data-trim class='html'>
<a id='meio-da-pagina'></a>
							</code></pre>
						</div>
					</section>

					<section>
						<p>Ou <strong>TUDO</strong>:</p>

						<div class='code'>
							<pre><code data-trim class='html'>
<a href='#meio-da-pagina'>Pular para o meio da página</a>
							</code></pre>
						</div>

						<div class='code'>
							<pre><code data-trim class='html'>
<a id='meio-da-pagina' name='meio-da-pagina'></a>
							</code></pre>
						</div>
					</section>

					<section>
						<p>Mas o que acontece se fizer</p>

						<div class='code'>
							<pre><code data-trim class='html'>
<a href='#meio-da-pagina'>Pular para o meio da página</a>
							</code></pre>
						</div>

						<p>... mas não tiver um <code>id</code> ou
							<code>name</code> "meio-da-pagina"?</p>
					</section>

					<section>
						<img src='_images/absolutely_nothing.jpg'>
					</section>

					<section>
						<div class='code'>
							<pre><code data-trim class='html'>
<a href='#usuario-1040'>Informações do usuário</a>
							</code></pre>
						</div>

						<p>... ao clicar, a URL fica</p>
						<div class='code'>
							<pre><code data-trim class='html'>
http://meuservidor/servico#usuario-1040
							</code></pre>
						</div>

						<p>E quando a página carrega, a primeira coisa que se faz
						é verifica a URL inteira e fazer o parse do conteúdo.</p>

						<p class='fragment'>Chato, né?</p>
					</section>

					<section>
						<p>É por isso que para esses caso se usa um framework
							que já faça todo esse controle.</p>

						<p>Angular.JS, por exemplo, tem todo um controle de 
						rotas do lado do cliente (!!) que gera URLs do tipo</p>

						<div class='code'>
							<pre><code data-trim class='html'>
http://meuservidor/servico#/usuario/1040
							</code></pre>
						</div>

						<p class='fragment'>BEEEM melhor, não?</p>

						<p class='fragment'>Exemplo do Gmail:
							<code>https://mail.google.com/mail/u/1/#all/14841018b0ce8bb1</code></p>
					</section>
				</section>

                <section data-background='_images/thats-all-folks.jpg'>
                    <section></section>
                </section>
			</div>
		</div>

		<script src="_external/head.min.js"></script>
		<script src="_external/reveal.min.js"></script>

		<script src="jointjs/joint.min.js"></script>
		<script src="jointjs/joint.shapes.uml.js"></script>

		<script>
			// Full list of configuration options available here:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				center: true,

				theme: 'night',
				transition: 'linear',

				// Optional libraries used to extend on reveal.js
				dependencies: [
					{ src: '_external/classList.js', condition: function() { return !document.body.classList; } },
					{ src: '_external/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: '_external/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: '_external/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: '_external/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
					{ src: '_external/notes.js', async: true, condition: function() { return !!document.body.classList; } }
				]
			});
		</script>

		<script id='joint-global'>
			var uml = joint.shapes.uml;
		</script>

		<script id='traditional-1-graph'>
			$(function() {
				var graph = new joint.dia.Graph;

				var paper = new joint.dia.Paper({
					el: $('#traditional-1'),
					width: 800,
					height: 600,
					gridSize: 1,
					model: graph
				});

				var elements = {
					template: new uml.State({
						position: { x:10, y: 100 },
						size: { width: 200, height: 400 },
						name: "Template"
					}),

					render: new uml.State({
						position: { x: 550, y: 100 },
						size: { width: 200, height: 400 },
						name: "Página"
					})
				};
				graph.addCells(elements);

				var connectors = [
					new uml.Transition({ source: { id: elements.template.id },
										 target: { id: elements.render.id } })
				];
				graph.addCells(connectors);
			});
		</script>

		<script id='traditional-2-graph'>
			$(function() { 
				var graph = new joint.dia.Graph;
				var paper = new joint.dia.Paper({
					el: $('#traditional-2'),
					width: 800,
					height: 600,
					gridSize: 1,
					model: graph
				});

				var elements = {
					template1: new uml.State({
						position: { x: 100, y: 100 },
						size: { width: 200, height: 100 },
						name: "Template 1"
					}),

					template2: new uml.State({
						position: { x: 100, y: 250 },
						size: { width: 200, height: 100 },
						name: "Template 2"
					}),

					template3: new uml.State({
						position: { x: 100, y: 400 },
						size: { width: 200, height: 100 },
						name: "Template 3"
					}),

					render: new uml.State({
						position: { x: 550, y: 100 },
						size: { width: 200, height: 400 },
						name: "Página"
					})
				};
				graph.addCells(elements);

				var connectors = [
					new uml.Transition({ source: { id: elements.template1.id },
										 target: { id: elements.render.id } }),
					new uml.Transition({ source: { id: elements.template2.id },
										 target: { id: elements.render.id } }),
					new uml.Transition({ source: { id: elements.template3.id },
										 target: { id: elements.render.id } })
				];
				graph.addCells(connectors);
			});
		</script>

		<script id='spa-1-graph'>
			$(function() { 
				var graph = new joint.dia.Graph;
				var paper = new joint.dia.Paper({
					el: $('#spa-1'),
					width: 800,
					height: 600,
					gridSize: 1,
					model: graph
				});

				var elements = {
					render: new uml.State({
						position: { x: 550, y: 100 },
						size: { width: 200, height: 400 },
						name: "Página"
					})
				};
				graph.addCells(elements);
			});
		</script>

		<script id='spa-2-graph'>
			$(function() { 
				var graph = new joint.dia.Graph;
				var paper = new joint.dia.Paper({
					el: $('#spa-2'),
					width: 800,
					height: 600,
					gridSize: 1,
					model: graph
				});

				var elements = {
					partial: new uml.State({
						position: { x: 100, y: 150 },
						size: { width: 150, height: 100 },
						name: "Conteúdo"
					}),

					render: new uml.State({
						position: { x: 550, y: 100 },
						size: { width: 200, height: 400 },
						name: "Página"
					})
				};
				graph.addCells(elements);
			});
		</script>

		<script id='spa-3-graph'>
			$(function() { 
				var graph = new joint.dia.Graph;
				var paper = new joint.dia.Paper({
					el: $('#spa-3'),
					width: 800,
					height: 600,
					gridSize: 1,
					model: graph
				});

				var elements = {
					render: new uml.State({
						position: { x: 550, y: 100 },
						size: { width: 200, height: 400 },
						name: "Página"
					}),

					partial: new uml.State({
						position: { x: 100, y: 150 },
						size: { width: 150, height: 100 },
						name: "Conteúdo"
					}),

					insert: new uml.State({
						position: { x: 575, y: 150 },
						size: { width: 150, height: 100 },
						name: "Conteúdo"
					})
				};
				graph.addCells(elements);

				var connectors = [
					new uml.Transition({ source: { id: elements.partial.id },
										 target: { id: elements.insert.id } })
				];
				graph.addCells(connectors);
			});
		</script>
	</body>
</html>