Me mudo

Este blog no recibirá ya más actualizaciones. Ve al nuevo blog enricflorit.com o averigua por qué me mudo.

sábado, 26 de mayo de 2012

#weareatwar: La guerra no se hará sola


He estado leyendo estos días en el blog bonillaware sobre la nueva iniciativa que, supuestamente, tiene que revolucionar el mundo de la informática en España: #weareatwar.

Tengo que decir, antes de empezar a hacer autocrítica, que estoy completamente de acuerdo con esta iniciativa, y que pienso dedicarme a ella todo lo que pueda (teniendo en cuenta que soy estudiante de ESO).

Para ser claros: esto no debe quedar en comentar en twitter con el hashtag #weareatwar, ni poniéndose un logo en el blog... Aquí habrá que trabajar de verdad, iniciar algún proyecto, quien no lo tenga; seguir mejorándolo y promocionándolo, el que ya lo haga. Pero esto no puede convertirse en una simple tendencia y/o moda de ponerse un logo molón en el avatar de twitter.

Así que manos a la obra... Yo por mi parte pienso aumentar el ritmo de posts en este blog, con scripts, comentarios y ayudas sobre mis bibliotecas, seguiré creando nuevos programas y scripts... Es decir, quiero luchar, y lo haré. Suerte a todos!



El post original | http://www.bonillaware.com/weareatwar

viernes, 25 de mayo de 2012

jUri - Qué es, y cómo se usa

Hace relativamente poco empecé un proyecto que necesitaba para poder desarrollar el tipo de webs en las que estoy metido normalmente (con AJAX, por ejemplo). Estuve unas dos semanas añadiendo funciones cada día según mis necesidades, y el resultado fue el siguiente: una biblioteca de funciones en JavaScript para manejar cómodamente la URL del navegador (entre otras cosas).



A partir de aquí, la he ido actualizando en GitHub y creo que ya va siendo hora de que lo explique un poco a la comunidad.

Básicamente, quise crear este script porque no había (o no encontré) una biblioteca que hiciera exactamente lo que yo quería, así que me puse a investigar el objeto window.location de JS, para empezar a escribir funciones a partir de los datos que nos proporciona. A continuación os explico las cosas para las que se puede usar el script...


Parseo de URL

La biblioteca tiene como único objeto jUri, que tiene diferentes métodos y propiedades para intentar cubrir las necesidades que suelen ser básicas referentes a la uri/url. El objeto jUri es parecido a window.location, pero está extendido. Estas propiedas son exactamente las mismas que el window.location:
  • jUri.host
  • jUri.hostname
  • jUri.href
  • jUri.pathname
  • jUri.port
  • jUri.protocol
Además, para facilitar el acceso a las variables GET, existe la función jUri.get(), que devuelve un objeto con todas las variables.


Manejo de #hash

La función más importante es jUri.hash(), ya que tiene varios usos:
  • Si no le pasamos argumentos, nos devuelve el hash actual
  • Si le pasamos un argumento como expresión regular, lo compara con el hash actual y nos devuelve true/false. También le podemos pasar un callback como segundo argumento, que será ejecutado si coincide la RegExp.
  • Si le pasamos una cadena (string) como argumento, definirá la cadena como #hash
También existe soporte para el evento hashchange (soportado nativamente en algunos navegadores).  Su uso es jUri.hashchange(function(){});.


Anclas <a> animadas

Una de las características más útiles y que requieren menos programación (una sola línea de código) es la de animar los enlaces que llevan a una ancla <a name=""/> de la página. Con animado quiero decir el desplazamiento suave, al contrario de lo que  sucede cuando hacemos click en un enlace de este tipo.

La función para generar este efecto es jUri.animateAnchorLinks();. Le podemos pasar, eso sí, un string con los nombres de las anclas que queramos animar (individualmente), separadas por comas.


Generador de anclas

Esto es automático solo con incluir el script de jUri: se genera una ancla automáticamente justo antes de cualquier elemento con el atributo data-name="". Esto es útil si queremos incluir una ancla rápidamente en nuestro código html ;).


Enlaces retardados

También podemos usar el atributo data-after en los enlaces, para poder definir el retardo en milisegundos antes de ir a la dirección del enlace.


De momento, ya he explicado bastantes de las características de esta biblioteca, jUri. Por supuesto, iré publicando más entradas sobre el proyecto conforme vaya añadiendo cosas nuevas ;).

Un saludo!



Este proyecto en GitHub | https://github.com/3nr1c/jUri.js
Si quieres contribuir al proyecto | efz1005[at]gmail[dot]com

miércoles, 9 de mayo de 2012

Reemplazando a Flash – curso de animación con jQuery


Hoy voy a empezar con algo de lo que últimamente se está hablando bastante en la red, pero que aún no se está llevando demasiado a la práctica: las alternativas a Flash usando Javascript. Supongo que, si todavía no se ha extendido demasiado el uso de JS, es por la “mala fama” que se ha ido generando: al haber una gran multitud de plataformas que lo soportan, pero todas en distinto grado de soporte, da algo de miedo tener que adaptar las aplicaciones a cada navegador.

Pero, por suerte, hay herramientas que nos ahorran este tedioso trabajo de adaptación y comprobación, reduciendo las aburridas tareas antiguas a un simple vistazo para ver que todo funciona a la perfección.

Y por esto he decidido empezar este curso, para demostrar que jQuery y Javascript pueden ser muy buenas alternativas al uso de Flash.

Empezamos...

Como primera práctica del curso, empezaremos con algo relativamente sencillo, un banner animado. De tamaño estándar (o, al menos, el que con el uso de Flash se ha ido estandarizando), es decir, 468x60.

Para realizarlo, solo un par de cosas. Necesitaremos tres fotos, del tamaño que queráis, pero si son más anchas que el banner, tardarán en cargar. Lógicamente, también usaremos nuestro programa de edición de código habitual (en mi caso Sublime Text 2) para generar los tres archivos (uno HTML, uno CSS y uno JS) y el código fuente de jQuery.

En primer lugar, crearemos esta estructura de archivos en nuestra carpeta de proyectos:

  • jquery_banner (carpeta)
    • index.html
    • assets (carpeta)
      • banner.css
      • banner.js
    • img (carpeta)

Dentro de la carpeta img guardaremos nuestras tres imágenes, a ser posible, con formato *.jpg y numeradas del 1 al 3 por nombre de archivo.

Abrimos el archivo index.html y escribimos el siguiente código:

<!doctype html>
<html>

<head>

<title>Banner con jQuery - reemplazando a Flash</title>

<link rel="stylesheet" href="assets/banner.css" media="all"/>

<script src="assets/jquery-1.7.2.min.js"></script>
<script src="assets/banner.js"></script>

</head>

<body>

<div class="banner" id="my_banner">

<img src="img/1.jpg"/>
<img src="img/2.jpg"/>
<img src="img/3.jpg"/>

</div>

</body>

</html>

Como veis, nos hemos descargado la versión comprimida de jQuery en la carpeta assets y hemos incluido ya nuestros archivos. Ahora pasamos a ver los estilos css:

.banner {
height:60px;
width:468px;
overflow:hidden;
}

.banner>img {
position:relative;
top:0px;
width:100%;
display:none;
}

.banner>img:first-child{
display:inline;
}

/*

OPCIONAL: un borde redondeado para nuestro banner

.banner, .banner>img {
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
}*/

En el archivo css hemos definido el tamaño de nuestro banner, así como los diferentes estilos para que se vean bien las imágenes. Como veis, también hemos añadido (como comentario, es decir, no hará efecto) un borde redondeado, para que combine bien con el estilo de la web, si conviene.

Finalmente, aquí tenemos el código Javascript. Se podría mejorar bastante, pues se usan demasiadas funciones, pero creo que así se verá mejor el mecanismo de repetición.

$(document).ready(function(){

var frame = $('.banner'),
images = frame.children(),
p1 = $(images[0]),
p2 = $(images[1]),
p3 = $(images[2]),

animate1 = function(){
p3.css({top:'0px'});
p1.fadeIn(2000);

p1.animate({
/*introducir aqui los píxeles de alto de la imagen*/
top:(-351
+60)+'px'
},10000,function(){
p1.fadeToggle(1000,animate2);
});
},

animate2 = function(){
p1.css({top:'0px'});
p2.fadeToggle(2000);

p2.animate({
/*introducir aqui los píxeles de alto de la imagen*/
top:(-351
+60)+'px'
},10000,function(){
p2.fadeToggle(1000,animate3);
});
},

animate3 = function(){
p2.css({top:'0px'});
p3.fadeToggle(2000);

p3.animate({
/*introducir aqui los píxeles de alto de la imagen*/
top:(-351
+60)+'px'
},10000,function(){
p3.fadeToggle(1000,animate1);
});
};

animate1();

});

Eso es todo, espero que os sea útil. Próximamente trabajaremos efectos más avanzados (también con jQuery), y pasaros dentro de poco para ver el nuevo script de buscador instantáneo (también en Javascript) que estoy preparando.

Un saludo!






© 2012 Enric Florit (3nr1c)
Related Posts Plugin for WordPress, Blogger...