Buenas!
De nuevo por aquí...
Acabada está ya la primera parte de nuestro remote tools... la próxima será, por tanto, matemáticas (tema II, ya).
Pero antes, hay varias cosas que anunciar.
a) Se ve a la vista un nuevo blog personal
b) Surgieron varios temas durante la pasada sección que dejo en cola. A saber:
b1) Criptología
b2) Hacking wifi
b3) Obtención de datos
c) He desarrollado una pequeña función JS/HTML para blogger (lo veremos más abajo)
d) Tengo un nuevo "juguete" del que escribir
e) Hay un pequeño cambio (¡por fin!)
Así que vamos por partes.
Blog personal:
Pues eso... estoy pensando en hacer un pequeño blog donde meter todos mis pensamientos y textos... a ver si podemos fomentar la escritura y el pensamiento (al menos lo intentaré). Os mantendré informados, y, como siempre, si me decido, lo encontraréis
más allá de los confines de mi blog.
Temas:
Éstos - y otros que quizás salen durante este tiempo - los guardo en mi pila de ToDo's de mi despacho (tengo un corcho bien grande lleno de papelitos con ideas...)
Función JS/HTML:
Bien, he creado una pequeña galería fotográfica (pensada para el blog de cosplay). Es una de las cosas que blogger no acaba de hacer: al subir varias fotos cuesta cuadrarlas (salen casi siempre una abajo de otra, y cosas así), así que cuando tengo que poner varias queda bastante "cutre".
Así que me estrujé el cerebro, y como soy tan y tan escéptico, no quise coger galerías de terceras personas, sino más bien hacerme una para mi (que de eso va este blog, ¿no?, ¡DIY!).
Y me gustaría compartir con vosotros mi aporte. Por tanto, vamos a ir paso a paso para ver cómo funciona la pequeña galería.
Para empezar, dejo un esquema general de cómo está estructurada la galería:
Para la notación usaré la siguiente convención (ejemplos):
elemento.clase
elemento#id
elemento.clase subelemento#id:estado
El elemento "global" es "div.blogMarquee". Dentro tenemos tres elementos: "div.blogMarqueePhoto", "marquee#bm" y "div.blogMarqueeScroll".
Dentro del primero hay un elemento: "img#cp".
Dentro del segundo están las imágenes, es decir, un conjunto de "marquee#bm img".
Dentro del tercer elemento hay dos "div": "div#bMSL" y "div#bMSR"
El contenido de "marquee#bm" lo tendremos que introducir de manera manual, y será lo único que varíe de una entrada a otra (es decir, la estructura es siempre la misma, solo cambiaremos las imágenes).
Igual os preguntáis que es eso de "marquee". Para los que no hayan usado nunca este elemento NO ESTÁNDAR de HTML decir que es, de manera general, un div cuyo contenido se mueve. De este movimiento podemos definir:
- Velocidad
- Frecuencia de movimiento
- Dirección de movimiento
- Modo de movimiento
- Cantidad de ciclos de movimiento
Cuando veamos el código explicaré un poco más cómo funciona.
Entonces, el funcionamiento es el siguente:
- Las imágenes pasan por "marquee#bm".
- Al pasar por encima de "marquee#bm", el movimiento cesa, y se muestran flechas de dirección ("div#bMSL" y "div#bMSR").
- Al pulsar sobre una imagen, ésta se "colocará" en "div.blogMarqueePhoto img#cp".
- Al pulsar sobre las flechas, podremos navegar por las imágenes (mientras se mantenga el ratón pulsado)
- Al pulsar sobre "div.blogMarqueePhoto img#cp", la imagen se abrirá a tamaño real en una ventana nueva.
Aquí vemos dos cosas a destacar:
a) Hay un solapamiento de eventos javascript.
b) Tenemos que controlar cuándo el ratón está pulsado sobre "div#bMSL" y "div#bMSR".
Teniendo estas dos cosas en cuenta, vamos a pasar a ver la estructura HTML de nuestra galería:
<div class="blogMarquee">
<div class="blogMarqueePhoto">
<img src="" alt="" width="400" height="300" id="cp" onclick="external(this);">
</div>
<marquee id="bM" onmouseout="setAmount(this,5);" onmouseover="setAmount(this,0);" srcollamount="5">
<!-- imágenes aquí, en formato: width=320 height=240 -->
</marquee>
<div class="blogMarqueeScroll" onmouseover="setAmount(ge('bM'),0);">
<div id="bMSL" class="binv" onmousedown="action([ge('bM'),10,false],true);" onmouseup="action([ge('bM'),0,false],true);"> < </div>
<div id="bMSR" class="binv" onmousedown="action([ge('bM'),10,true],true);" onmouseup="action([ge('bM'),0,true],true);"> > </div>
</div>
<script type="text/javascript">addId(ge('bM'));</script>
</div>
(No me gusta que desfase el ancho del blog... pero así se ve mejor)
Como vemos, al final hay una llamada JavaScript. Ésta sirve para dar "id" a cada imagen dentro de marquee (ya veremos cómo, en un momento).
Antes de entrar en JS, vamos a estudiar un poco el HTML.
Como vemos, tenemos la estructura comentada, así que no pararemos ahí, sino que veremos el el elemento "marquee#bm".
Vemos que tiene "scrollamount=5". Esto indica la velocidad (5, en este caso) a la que se mueven los elementos. La dirección la veremos más adelante.
Ahora, vamos a por el JS (explicado con comentarios):
/**
* variable global para el solapamiento
*/
var b_max=2;
/**
* función action.
* Actúa como manejador de solapamiento de eventos entre "marquee#bm img:click" (a) y ("div#bMSL" | "div#bMSR") (b).
* (a) lanza cphoto
* (b) lanza move
* Recibe dos parámetros:
* @param v: array de parámetros de subllamada
* @param f: valor de flag
*/
function action(v,f){
b_max--;
if(f&&b_max>0){
move(v[0],v[1],v[2])
}else{
if(!f){
cphoto(v[0])
}
}
if(b_max==0||f){
b_max=2
}
}
/**
* función ge.
* Sinónimo de función "document.getElementById".
* Recibe un parámetro y retorna un elemento:
* @param e: id del elemento a retornar
* @return: elemento cuyo id corresponde a "e"
*/
function ge(e){
return document.getElementById(e)
}
/**
* función setAmount.
* Ajusta la velocidad (scrollAmount) del elemento "e" a la velocidad "a".
* Si la velocidad es 0, se muestran las flechas; en caso contrario se ocultan.
* Recibe dos parámetros:
* @param e: elemento a ajustar
* @param a: velocidad
*/
function setAmount(e,a){
e.direction='left';
e.scrollAmount=a;
if(a==0){
ge('bMSL').className='bMSL';
ge('bMSR').className='bMSR'
}else{
ge('bMSL').className='binv';
ge('bMSR').className='binv'
}
}
/**
* función addId.
* Itera sobre el elemento con id "e", y sobre sus hijos, asigna id's de forma secuencial.
* Del mismo modo, asigna un handler "click" a cada elemento.
* Recibe un parámetro:
* @param e: id del elemento a iterar
*/
function addId(e){
am=0;
for(i=0;i<e.childNodes.length;i++){
try{
e.childNodes[i].setAttribute('id','el'+am);
e.childNodes[i].setAttribute('onclick','action([this],false)');
am++
}catch(err){
}
}
}
/**
* función move.
* Mueve el elemento "e", en la dirección indicada por "t" a una velocidad "a".
* Recibe tres parámetros:
* @param e: elemento a mover
* @param a: velocidad a fijar
* @param t: dirección (true para derecha, false para izquierda)
*/
function move(e,a,t){
if(t){
e.direction='right'
}else{
e.direction='left'
}
e.scrollAmount=a
}
/**
* función cphoto.
* Muestra el elemento "e" sobre el elemento "#cp"
* Recibe un parámetro:
* @param e: elemento a mostrar sobre "#cp"
*/
function cphoto(e){
ge('cp').setAttribute('src',e.getAttribute('src'))
}
/**
* función external.
* Abre, en una ventana nueva, el elemento "e".
* Recibe un parámetro:
* @param e: elemento a abrir
*/
function external(e){
if(e.getAttribute('src')!=null){
window.open(e.getAttribute('src'))
}
}
Ahora, trataremos los dos asuntos:
a) Solapamiento: usamos
este sistema para evitarlo.
b) Se generan dos eventos: onmousedown (cuando la tecla está pulsada) y onmouseup (cuando se suelta la tecla). En el primero, indicamos que se mueva hacia la dirección indicada; en el segundo, indicamos que pare.
Por último, falta indicar el estilo de nuestra nueva función:
img{
border:0;
}
.blogMarqueePhoto{
height:300px;
width:400px;
margin-left:auto;
margin-right:auto;
padding:10px;
}
.blogMarqueePhoto img{
width:400px;
height:300px;
border:1px solid #CCC;
padding:0px
}
.blogMarqueePhoto img:hover{
cursor:pointer;
border-color:#FFF;
}
#bM{
height:245px;
}
.blogMarqueeScroll div{
top:-245px;
width:100px;
height:240px;
position:relative;
font-familt:arial;
font-size:180px;
color:#FFF;
line-height:240px;
opacity:.5;
-moz-opacity:.5;
filter:alpha(opacity=50);
background:#000;
}
.bMSL{
float:left;
}
.bMSR{
float:right;
}
.binv{
display:none;
}
#bM img{
padding:0px;
}
#bM img:hover,.bMSR:hover,.bMSL:hover{
cursor:pointer;
}
Y ya solo falta rellenar con imágenes y colocarlo en una entrada.
Aquí podéis ver un ejemplo en funcionamiento. Un consejo: usad el ingenio para "importar" fotos desde facebook ;-)
"Juguete":
Aquí está. Es una lámpara-tecla que compré en la feria del cómic de Barcelona. Mide unos 15cm de largo y se queda en mi despacho.
Ahora ya puedo decir que tengo la luz bajo control ;-)
Cambios:
Hace tiempo que voy detrás de graduarme en la universidad, pero lo que quería hacer estaba fuera de presupuesto (aunque tengo que admitir que de hacer algo relacionado 100% con la informática me gustaría hacerlo); un Bachelor en un centro adscrito a la universidad de Gales. Son tres años de carrera repleta de asignaturas con muy buena pinta...
Pero se va de presupuesto, así que vivía resignado.
Hasta que repasando los apuntes de mates me picó el gusanillo otra vez... así que ahí lo dejo:
¡Me voy a graduar en matemáticas!
Ya me he visto la carrera que voy a hacer y es buena, barata y a distancia. ¡Ale! así, entre curso y curso, podré hacer cursillos de informática (nunca hay que dejar de estudiar)... con este paso estoy más cerca de ser doctor... :-)
Desde luego no es un cambio que haya estado "esperando", más bien vino así de golpe... pero ya está bien.
