Editando apunte: Transiciones: Mosaicos

Editando apunte: Transiciones: Mosaicos cerrar apuntes

ID: 55 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Vicisitudes de un Webmaster, Programación
Etiquetas: diseño, imágenes, javascript, postales, webmaster
Extras: diseño, imágenes, javascript, postales, webmaster
apunte: - - - - - - - -

<p>
	[rss]Mosaicos y barridos tienen una implementación similar ya que los barridos pueden considerarse un caso particular de mosaico de n zonas x 1.[/rss]
	Nos serán muy útiles las alternativas de implementación usadas en los barridos con el uso de arrays.
</p>

<div id="postal_4" style="position: absolute; overflow: hidden; width: 480px; height: 360px; background-color: #ffccff">
		<div style="position: absolute; width: 480px; height: 360px; top: 0px; left: 0px" title="postales/Fondos/FONDO005.gif ">
			<img src="postales/Fondos/FONDO005.gif" style="width: 100%; height: 100%" alt="dibujo"/>
		</div>
		<div style="position: absolute; width: 74px; height: 80px; top: 214px; left: 367px" title="postales/Musicales/Imagen1.gif ">
			<img src="postales/Musicales/Imagen1.gif" style="width: 100%; height: 100%" alt="dibujo"/>
		</div>
		<div style="position: absolute; width: 66px; height: 89px; top: 232px; left: 40px" title="postales/Musicales/Imagen2.gif ">
			<img src="postales/Musicales/Imagen2.gif" style="width: 100%; height: 100%" alt="dibujo"/>
		</div>
		<div style="position: absolute; width: 63px; height: 77px; top: 198px; left: 212px" title="postales/Musicales/Imagen3.gif ">
			<img src="postales/Musicales/Imagen3.gif" style="width: 100%; height: 100%" alt="dibujo"/>
		</div>
		<div style="position: absolute; width: 125px; height: 104px; top: 236px; left: 243px" title="postales/Musicales/Imagen4.gif ">
			<img src="postales/Musicales/Imagen4.gif" style="width: 100%; height: 100%" alt="dibujo"/>
		</div>
		<div style="position: absolute; width: 63px; height: 79px; top: 255px; left: 406px" title="postales/Musicales/Imagen5.gif ">
			<img src="postales/Musicales/Imagen5.gif" style="width: 100%; height: 100%" alt="dibujo"/>
		</div>
		<div style="position: absolute; width: 76px; height: 105px; top: 244px; left: 334px" title="postales/Musicales/Imagen6.gif ">
			<img src="postales/Musicales/Imagen6.gif" style="width: 100%; height: 100%" alt="dibujo"/>
		</div>
		<div style="position: absolute; width: 99px; height: 96px; top: 229px; left: 144px" title="postales/Musicales/Imagen7.gif ">
			<img src="postales/Musicales/Imagen7.gif" style="width: 100%; height: 100%" alt="dibujo"/>
		</div>
		<div style="position: absolute; width: 239px; height: 71px; top: 47px; left: 133px; font-size: 28px; text-align: center; font-style: oblique; font-weight: 900; color: #ff00ff; font-family: Trebuchet MS" title="Postal Digital" >
			Postal Digital
		</div>
		<div style="position: absolute; width: 239px; height: 71px; top: 45px; left: 131px; font-size: 28px; text-align: center; font-style: oblique; font-weight: 900; color: #0000ff; font-family: Trebuchet MS" title="Postal Digital" >
			Postal Digital
		</div>
	</div>
</div>
<div id="botonera_transiciones" style="text-align: center; margin: 1em auto; width: 480px">
	<span style="float: left">
		Mosaico:
	</span>
	<button type="button" id="boton_caos">caos</button>
	<button type="button" id="boton_caos_caos">caos caos</button>
	<br/>
	<span style="float: left">
		Básicos:
	</span>
	<button type="button" id="boton_normal">normal</button>
	
	<button type="button" id="boton_apertura">apertura</button>
	<button type="button" id="boton_cierre">cierre</button>
	
	<button type="button" id="boton_doble">doble</button>
	<br/>
	<span style="float: left">
		Opciones:
	</span>
	<label>i++<input type="checkbox" id="check_i" checked="checked"/> </label>
	<label>j++<input type="checkbox" id="check_j" checked="checked"/> </label>
	<label>zig-zag<input type="checkbox" id="check_z" checked="checked"/> </label>
	<label>i <-> j<input type="checkbox" id="check_ij" checked="checked"/> </label>
	= <input type="text" size="2" id="suma_opciones" />
</div>
<p>
	Con esta serie que hemos nominado "Básicos" hay unas pocas cosas "extrañas" que iremos explicando.
</p>
<h3 class="subtitulo">
	¿Caos?... ¿Caos caos?...
</h3>
<p>
	Los dos primeros botones parecen algo enigmáticos. ¿En qué se diferencian?
</p>
<p>
	Hemos visto que usamos un array para indicar la temporización de las acciones, y que tanto éstas como aquellos (acciones y tiempos) pueden obtenerse con el método que hemos añadido a los arreglos llamado "caos", pero también podemos usar el sistema tradicional, con el método Math.random(); y eso es lo que hacemos en el segundo de los botones. Los códigos los vemos a continuación:
</p>
<pre class="codigo">objetoTransiciones.prototype.m_caos = function(x)	{// mosaico caótico
	this.ini_m(x);
	while(this._acciones_.length > 0)	{
		setTimeout(
			this._acciones_.pop(), this._tiempos_.caos()
		)
	}
	this._visible_ = x;
}

objetoTransiciones.prototype.m_caos_caos = function(x)	{// mosaico caótico caótico
	this.ini_m(x);
	while(this._acciones_.length > 0)	{
		setTimeout(
			this._acciones_.pop(), Math.floor(Math.random() * this._lapsus_)
		)
	}
	this._visible_ = x;
}</pre>
<p>
	Para evitar código innecesario, solo implementamos en la librería el primero de ellos.
</p>
<h3 class="subtitulo">
	Vicisitudes
</h3>
<p>
	Tantas expectativas con los mosaicos, pero tan solo nos encontramos con seis botones, de los que ya hemos adelantado que solo se quedarán cinco.
	También nos encontramos unas opciones que en total generan 16 configuraciones distintas, que hemos notado que cambian el efecto de cada botón "Básico".
	Resumiendo, nos encontramos con 65 efectos distintos con los cuatro interruptores y cinco botones. 	
</p>
<p>
	Esos botones se asocian a unos pocos métodos de muy pocas líneas como vemos en los casos mostrados, donde se usan los arreglos y se obtienen acciones combinando los métodos mostrados en el apunte "<a href="?titulo=Transiciones%3A+Barridos&PHPSESSID=3kplr1n6kb8fn5kuu0es9t5af1">Transiciones: Barridos</a>". Hemos evitado efectos duplicados con algunas combinaciones, por ejemplo el botón "normal" combina el método pop() tanto para extraer las acciones como los tiempos; ese efecto también se podría obtener con las combinaciones "shift-shift" y "mitad-mitad". 
</p>
<p>
	Las opciones "i++" y "j++" cambian los bucles crecientes por decrecientes de ambos índices, por lo que no necesitamos usar las combinaciones "pop-shift" y "shift-pop".
</p>
<p>
	Sé que las explicaciones pueden ser incomprensibles para quienes tienen pocos conocimientos de programación. En próximas entregas resumiremos los pasos a seguir para su uso y más efectos que se nos han quedado en el tintero.
</p>

Controles Otras tablas: imagenes, postales, categorias, etiquetas, extras - - (popup ) - que

Seleccionar nuevo apunte

categoria Nombre:
Controles Otras tablas: apuntes, imagenes, postales, etiquetas extras - - Seleccionar: categoria
Descripción: - - - - - - - -	Apuntes

extra Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias etiquetas - - Seleccionar: extra
Descripción: - - - - - - - -	Apuntes

etiqueta Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias extras - - Seleccionar: etiqueta
Descripción: - - - - - - - -	Apuntes

Editor del diario

Zona de comentarios

Evaluación