demo.html

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

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

		<title>MerakiVE</title>

		<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
		<meta name="author" content="Hakim El Hattab">

		<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="css/reveal.css">
		<link rel="stylesheet" href="css/theme/league.css" id="theme">

		<!-- Theme used for syntax highlighting of code -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>

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

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section data-transition="zoom">
					<a href="#" class="navigate-down">
						<img 
							data-src="img/meraki.jpg" alt="Down arrow">
					</a>
					
					<small>
						<i>
							"Hacer algo con el alma, con amor y creatividad, dejar un pedazo de si mismo en el trabajo"
						</i>
					</small>

					<p>
						<small>
							<a href="http://github.com/MerakiVE">MerakiVE</a> 
						</small>
					</p>
				</section>

				<section data-transition="zoom">
					<h2>Componentes</h2>
					<a href="#" class="fragment">
						<img 
							width="500px" 
							data-src="img/components2.png" alt="Down arrow">
					</a>
					
					<small class="fragment">
						<i class="fragment grow">
							"La aplicación esta compuestas por cuatro componentes principales 
						</i><br>
						<i class="fragment">
							Distribuidos estratégicamente para solventar los problemas a nivel de estructura y de lógica".
						</i>
					</small>
				</section>

				<!-- Example of nested vertical slides -->
				<section data-transition="concave">
					<section>
						<h2>Agente</h2>
						
						<a href="#" class="fragment">
							<img 
								width="200" 
								data-src="img/agente2.png">
						</a>
						<br>
						<small class="fragment">
							<i>
								“Entidad qué realiza rutinas con el fin de completar un tramite.”
							</i>
						</small>
						<br>
					</section>
					
					<section>

						<h1> Funciones</h1>

						  <ul>
						  	<li class="fragment">Procesar SUB RUTINAS. </li>
						  	<li class="fragment"> Intercomunicar información con otros agentes</li>
						  </ul>

						<a href="#">
							<img  
								width="300" 
								data-src="img/agente-step.png">
						</a>
					</section>

					<section>
						<span>Vida de un Agente</span>
						<br>
						<a href="#/2">
							<img width="50%" height="50%" 
								data-src="img/diagrama-agente.jpg">
						</a>
					</section>
				</section>

				<section data-transition="zoom"> 
					<section>
						<h2>NEURON</h2>
						<a href="#/2">
							<img width="600px" data-src="img/neuron.png">
						</a>

						<p>
							<small class="fragment out">
								<i>
									"Entidad distribuida encargada de usar el CEHDUN para generar y validar la información correspondiente a los tramites".
								</i>
								
							</small>
							
						</p>
					</section>

					<section>
						<h1> Funciones</h1>
						<ul>
							<li class="fragment"> Generar información. </li>
							<li class="fragment"> Validar la informacion</li>
						</ul>
						<br>
						<a href="#" class="fragment">
							<img  
								width="500" 
								data-src="img/neuron-fun.jpg">
						</a>
					</section>

					<section>
						<span>Proceso de un NEURON</span>
						<br>
						<a href="#/2">
							<img width="70%" height="50%" 
								data-src="img/diagrama-neuron.jpg">
						</a>
					</section>
				</section>

				<section data-transition="concave" style="text-align: left;"> 
					<section>
						<h2>CEHDUN</h2>
						<a href="#" class="fragment">
							<img width="400px" data-src="img/cehdun-tools.jpg">
						</a>

						<p>
							<small class="fragment grow">
								<i>
									"Conjunto estandarizado de herramientas de desarrollo para la union e interconexion de Neurones".
								</i>
							</small>
						</p>
					</section>

					<section>
						<h1> Funciones</h1>
						<ul>
							<li class="fragment"> Generar Micro Servicios. </li>
							<li class="fragment"> Generar Tramites </li>
							<li class="fragment"> Gestionar Rutinas </li>
							<li class="fragment"> Gestionar Agentes </li>
						</ul>
						<br>
						<a href="#" class="fragment"> 
							<img  
								align="center" 
								width="400" 
								data-src="img/cehdun-fun.jpg">
						</a>
					</section>

					<section>
						<span>Proceso de un CEHDUN</span>
						<br>
						<a href="img/diagrama-cehdun.jpg">
							<img width="70%" height="100%" 
								data-src="img/diagrama-cehdun.jpg">
						</a>
					</section>
				</section>

				<section data-transition="concave"> 
					<section>
						<h2>CVDI</h2>
						<a href="#" class="fragment">
							<img width="400px" data-src="img/cvdi.png">
						</a>

						<p>
							<small class="fragment">
								<i>
									"Componente vital descentralizado de interconexion (sinapsis)."
								</i>
							</small>
						</p>
					</section>

					<section>
						<h1> Funciones</h1>
						<ul>
							<li class="fragment"> 
								Encargarse del flujo de trabajo, siendo el medio principal de comunicación por donde pasaran todas las conexiones.
							</li>
						</ul>
						<br>
						<a href="#" class="fragment"> 
							<img  
								align="center" 
								width="600" 
								data-src="img/cvdi-fun.png">
						</a>
					</section>

					<section>
						<span>Proceso del CVDI</span>
						<br>
						<a href="img/diagrama-cvdi.jpg">
							<img width="70%" height="100%" 
								data-src="img/diagrama-cvdi.jpg">
						</a>
					</section>
				</section>

				<section data-transition="concave">
					<section> 
						<h2>Bondades</h2>
						<ul>
							<li class="fragment"> Alta Disponibilidad </li>
						</ul>
						<a href="#" class="fragment">
							<img width="70%" height="100%" 
								data-src="img/alta-disponibilidad.png">
						</a>
					</section>

					<section data-transition="concave">
						<h2>Replicación de base de datos</h2>

						<a href="#">
							<img width="50%" height="100%" 
								data-src="img/replicacion2.jpg">
						</a>

						<pre  class="fragment">
							<code class="javascript" data-trim contenteditable style="font-size: 18px;">
arangoDB.replicate( 'replicate', function() {
	start.Replicate("I'm on fire");
} );
							</code>
						</pre>
					</section>

					<section data-transition="concave">
						<h2>Manejo de Concurrencia</h2>
						
						<a href="#">
							<img width="20%" height="100%" 
								data-src="img/go-fast.svg">
						</a>
						<pre  class="fragment">
							<code class="javascript" data-trim contenteditable style="font-size: 18px;">
func (d *Dispatcher) dispatch() {
	for {
		select {
		case job := <-JobQueue:
			go func(job Job) { jobChannel := <-d.WorkerPool }(job)
		}
	}
}
							</code>
						</pre>
					</section>

					<section> 
						<h2>Benchmark</h2>
						<a href="#" class="fragment">
							<img width="90%" height="100%" 
								data-src="img/handlling.png">
						</a>
					</section>

					<section> 
						<h2>Trazabilidad de los tramites</h2>
						<a href="#">
							<img width="90%" height="100%" 
								data-src="img/blockchain.png">
						</a>
					</section>
				</section>	

				<section> 
					<h2>Infraestructura</h2>
					<a href="#" class="fragment">
						<img width="60%" height="100%" 
							data-src="img/infraestructure.jpg">
					</a>
				</section>

			</div>

		</div>

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

		<script>

			// More info https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				center: true,
				autoSlide: 5000,

				transition: 'zoom', // none/fade/slide/convex/concave/zoom

				// More info https://github.com/hakimel/reveal.js#dependencies
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: 'plugin/search/search.js', async: true },
					{ src: 'plugin/zoom-js/zoom.js', async: true },
					{ src: 'plugin/notes/notes.js', async: true }
				]
			});

		</script>

	</body>
</html>