pruebaandrea3

<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>reveal.js - The HTML Presentation Framework</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" />

		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/default.css" id="theme">

		<!-- For syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- If the query includes 'print-pdf', use the PDF print sheet -->
		<script>
			document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
		</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>
					<h1>UNIFICAR SCRIPTS Y CSS</h1>
					<img width="580" height="354" src="imagenes/presentar.jpg" >

					<p>
						<small>Realizado por<a href="#">Julia</a> / <a href="#">Héctor</a></small>
					</p>
				</section>

				<section>
					<h2>OBJETIVOS:</h2>
					<ul>
					    <li>Incluir scripts .js y css que se utilizan en la misma página en un único fichero conjunto.</li>
					    <li>Reducir al máximo el tiempo de descarga de la web. Cuantas menos peticiones HTTP se realicen menor será el tiempo de descarga.</li>
					</ul>
					<img width="412" height="162" src="imagenes/comprimir.jpg" >

				</section>
				
					<section>
                        <h2>Optimizando nuestra Página Web</h2>
                        <br/>
                        <p>Comprimir los ficheros .js y .css.</p>
                        <br/>
                        <p>Se cree que es una buena práctica utilizar muchos ficheros pequeños Javascript y CSS en lugar de uno grande, pero ralentiza el rendimiento de la página.</p>
                        <br/>
                        <p>Una técnica WPO sería combinar varios CSS y JavaScript en uno.</p>
                         <br/>
                        <p>Para que funcione todo más rápido, es mejor tener un único fichero .JS o .CSS de un tamaño mayor que no varios pequeños.</p>
                    </section>

                    <section>
                        <p>Cuando el navegador solicita los archivos JavaScript y CSS, se realiza una solicitud HTTP por archivo.</p>
                        <p>Cada petición HTTP devuelve unos resultados, este ir y venir de datos se llama latencia.</p>
                        <p>Así que, si tiene tres javascripts y dos css cargados por una página, se está perdiendo tiempo en cinco viajes de ida y vuelta de la red.</p>
                        <p>Aquí está un gráfico que muestra la suma de espera, la cual representa un retraso significativo en la carga de páginas:</p>
                        <img width="482" height="279" src="imagenes/image_16.png" >
					</section>

					<section>
						<p>Sin embargo, una solución mejor es entregar múltiples archivos a través de una solicitud utilizando un HttpHandler que combina varios archivos. Así que, en vez de poner muchas etiquetas &lt;script> o &lt;link> ,mejor poner solor una etiqueta &lt;script> y una etiqueta <link>, y vincularlas al HttpHandler.</p>
                        <p>Hay que indicar al manejador los archivos que se desea combinar y entregar esos archivos en una respuesta. Esto ahorra al navegador hacer muchas peticiones y elimina tiempos de espera.</p>
						<p>Aquí se puede ver la cantidad de mejora que se obtiene si se pueden combinar varios archivos JavaScript y CSS en uno.</p>
						<img width="512" height="309" src="imagenes/image_18.png" >
					</section>

					<section>
                        <h4>Otra forma de reducir el tiempo de carga de la Página</h4>
						<p>En una página web típica, podrá haber muchos javascripts de referencia:</p>
					    <pre>
							<code contenteditable>
							  <p>&lt;script type="text/javascript" src="http://www.msmvps.com/Content/JScript/jquery.js">&lt;/script></p>
                             <p> &lt;script type="text/javascript" src="http://www.msmvps.com/Content/JScript/jDate.js">&lt;/script></p>
                              <p>&lt;script type="text/javascript" src="http://www.msmvps.com/Content/JScript/jQuery.Core.js">&lt;/script></p>
                              <p>&lt;script type="text/javascript" src="http://www.msmvps.com/Content/JScript/jQuery.Delegate.js">&lt;/script></p>
                              <p>&lt;script type="text/javascript" src="http://www.msmvps.com/Content/JScript/jQuery.Validation.js">&lt;/script></p>
							</code>
						</pre>
					</section>

				<!-- Example of nested vertical slides -->
					<section>
						<h3>Si combinamos todos los scripts en un bloque y los CSS en otro, quedaría de esta forma</h3>
						<pre>

                            <code contenteditable>
								<p>&lt;script type=”text/javascript” src=”HttpCombiner.ashx?s=scripts&t=text/javascript&v=1″>&lt;/script></p>
                                <p>&lt;link type=”text/css” rel=”stylesheet” href=”HttpCombiner.ashx?s=css&t=text/css&v=1″>&lt;/link></p>
							</code>
						</pre>
					</section>
					<section>
							<h3>Podemos reducirlo aún más si hacemos uso de HttpCombiner1. Para ello usaremos un fichero de configuración (web.config) que será similar a este:</h3>
						<pre>
							<code contenteditable>
								<p>&lt;appSettings></p>		
								<p>&lt;add key=”scripts” value=”js/jquery.js, js/jDate.js, js/jQuery.Core.js, js/jQuery.Delegate.js, js/jQuery.Validation.js”/></p>
								<p>&lt;add key=”css” value=”css/Theme.css, css/Common.css, css/grid.css”/></p>
								<p>&lt;&frasl;appSettings></p>
							</code>
						</pre>
                        <p><a href="http://msmvps.com/blogs/omar/archive/2008/08/28/http-handler-to-combine-multiple-files-cache-and-deliver-compressed-output-for-faster-page-load.aspx" target="_blank">Puedes pinchar aquí y ver la páginade referencia:</a></p>
					</section>
					
				</section>

				<section>
					<h2>Algunas Herramientas</h2>
						<ul>						
						<li><a href="http://www.zbugs.com/" target="_blank"><span>Zbugs</span></a></li>
						<li><a href="http://csstidy.sourceforge.net/example.php" target="_blank"><span>Csstidy</span></a></li>
						<li><a href="http://www.crockford.com/javascript/jsmin.html" target="_blank"><span>JSmin</span></a></li>
						<li><a href="http://demo.lateralcode.com/jmerge/" target="_blank"><span>Jmerge</span></a></li>
						<li><a href="http://cleancss.com/" target="_blank"><span>CleanCSS</span></a></li>
                        <li><a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank"><span>PageSpeed</span></a></li>
						<li><a href="http://webperformanceoptimization.es/httpcombiner/httpcombiner.zip" target="_blank"><span>HttpCombiner</span></a></li>
                        <li><a href="http://www.xtreeme.com/javascript-optimizer/" target="_blank"><span>Xtreeme</span></a></li>

						</ul>
				</section>

				<section>
					<h2>Ejemplo Práctico</h2>
					<p></p>
					 <ul>
						<li><a href="http://csstidy.sourceforge.net/xhtml-before.css" target="_blank"><span>Normal. (Pulsar para ver código)</span></a></li>
                        <img src="../ejercicio2/imagenes/normal.png" width="1258" height="550" alt="">

					</ul>
				</section>

                <section>
                    <ul>
                        <li><a href="http://csstidy.sourceforge.net/xhtml-after.css" target="_blank"><span>Comprimido un 38,3%. (Pulsar para ver código)</span></a></li>
                        <img src="../ejercicio2/imagenes/comprimido.png" width="1258" height="550" alt="">
                    </ul>
                </section>

                <section>
                    <ul>
						<li><a href="http://csstidy.sourceforge.net/xhtml-after-max.css" target="_blank"><span>Compresión Máxima (46,2%). (Pulsar para ver código)</span></a></li>
                        <img src="../ejercicio2/imagenes/comprimidoMaximo.png" width="1258" height="550" alt="">
                    </ul>
                </section>

				<section>
					<h1>THE END</h1>
					<h3>Julia / Héctor</h3>
					<img width="580" height="354" src="imagenes/codificar.jpg" >
				</section>

			</div>

		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.min.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,

				theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
				transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none

				// Optional libraries used to extend on reveal.js
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'plugin/markdown/showdown.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/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
					{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
				]
			});

		</script>

	</body>
</html>