Archivos de la categoría Programación

Jugando con JQuery para hacer animaciones

He estado jugando estos días con Jquery para hacer animaciones chulas dentro de una web. Y la verdad es que me han quedado algunas cosas chulas. Aquí os enseño algunos ejemplos.

Noche y día. Esta es la animación que más gusta, pero principalmente se debe a que me gustan las imágenes que se usan. Seguramente si no fueran tan chulas sería una animación bastante cutre. Mueve el scroll hacía arriba o hacía abajo para que salga o se ponga el sol. Por otro lado en la otra animación la bicicleta se va moviendo solo mientras se oscurece el cielo.

Creditos finales. Esta es perfecta para una página de ‘quienes somos’ de cualquier empresa de diseño web. Es una animación supersencilla pero muy curiosa que simula los titulos de credito finales de una película.

Casillas. Si sois aficioandos a los juegos de tablero o de rol os sonarán las casillas de juego hexagonales. Aquí os presento un sistema para mover una pieza blanca sobre un tablero de casillas hexagonales ( se usan las teclas W,E,D,X,Z,A)

Parallax. Este fue mi primer fecto de animación y de parallax. Simplemente mueve hacía abajo el scroll y veras como se mueve el pajarito y las nubes de fondo. Es una pena que no consiguera que el pajaro se parara encima de la otra rama que estaba en el pie de la web.

Super Woko Bros. Este es lo máximo que he llegado en animaciones con Jquery y aun así esta en pañales. La idea erá hacer una especie de Super Mario Bros, pero me queda mucho por hacer. Podeís moveros con A (izquierda), D (derecha), W (saltar) y S (agacharse).

Nuevo proyecto lanzado: webversusweb.com/

webversusweb comparador seo Acabamos de lanzar en wokomedia.com un nuevo proyecto web WebVersusWeb. Es una sencilla herramienta SEO que te permite ver los puntos fuertes y debiles del SEO de tu web frente a los de tu competencia. Esperó que os guste y que os sirva de ayuda.

Está desarrollado en PHP y MySQL y no he usado ningún framework para su desarrollo, ya que para una página no me merecía la pena. El diseño está montado con Foundation, pero le he desactivado el responsive (paradojas de la vida). En próximas semanas empezaremos a traducir la web.

Mi experiencia con Foundation de Zurb

autoescuelagoAcabo de lanzar AutoescuelaGO.com, un nuevo proyecto que he estado desarrollando en Wokomedia.com. Es un WordPress a pelo pero lo más especial que tiene es que he desarrollado todo el diseño en Foundation de Zurb. La verdad es que me ha aparecido un framework de desarrollo buenisimo y muy facil de usar. En pocas horas tenía un prototipado de la web funcional y en unas pocas horas más tenía integrado el diseño que me habían pasado. Con la ayuda de algunos trucos como el smooth scrolling de Artberri ha quedado un proyecto muy chulo y con mucha fuerza visual.

El tema del responsive no me ha quedado muy bien (sobre todo por los temas de los elementos fijos como el menu superior), pero espero terminar de pulirlo poco a poco. Por cierto a tenor de todo esto ODIO IE8 (y no me simpatizan el resto de sus versiones).

Chapa y pintura para una vieja aplicación de Facebook

eligetuaventuraAprovechando el parón del paro he decidido darle un nuevo diseño a una antigua aplicación que había hecho para Facebook. Lo que he hecho es meterle LungoJS para darle un mejor diseño y funcionalidad y he hecho una serie de mejoras para que la aplicación vaya mejor. Así pues aquí teneís en el enlace para la aplicación en Facebook de Elige tu Aventura o en el enlace directo fuera de Facebook.

La verdad es que con LungoJS se montan en nada aplicaciones con un aspecto muy profesional y encima hay una gran cantidad de iconos en DevianArt que me han permitido darle un toque profesional al diseño. La única pena es que no tengo tiempo para andar metiendo nuevas aventuras.

En fín si alguien se anima a escribir que se ponga en contacto conmigo 🙂 y si queréis montaros vuestra propia web tenéis todo el código en GitHub.

Me encantan los widgets

Si hay algo que me gusta en mis proyectos es meter widgets para que la gente meta partes de mis webs en sus propias webs. Las ventajas son claras, te desvían bastante tráfico y dan visibilidad a tu web. Así pues he montado uno con las constelaciones de mi último proyecto Cbeams.org. Aquí teneís un ejemplo:

<iframe src=”http://cbeams.org/constellation/Orion/widget?height=500″ style=”width: 100%; height: 500px;”></iframe>

Trucos para mostrar el firmamento con Google Maps v3

A tenor de haber estado currando estos días en cbeams.org he aprendido una serie de cosillas sobre Google Maps v3 y la opción de ver el firmamento. Para empezar diré que Google Maps v3 no da soporte directo para mostrar el firmamento, la Luna o Marte. No podemos decirle a la API que nos de una capa en concreto en plan MapTypeId.ROADMAP o MapTypeId.HYBRID. Hay que hacer un truco para cargar los mapas del espacio como una nueva capa. Mi solución tras romperme mucho la cabeza y darle bastantes vueltas ha sido la que podéis encontrar funcionando en skymaps.js a partir de un ejemplo que encontré aquí.

Otro truco es convertir la declinación y la ascensión derecha en formato decimal de manera que Google Maps pueda entenderlas. Al principio hacia la misma formula que usaba la latitud y longitud (grados + minutos / 60 + segundos / 3600) que si funcionaba con la declinación, pero en la ascensión derecha no tiraba correctamente. Para ello tuve que recurrir a estas dos formulas.

function convertRaToDecimal ($ra) { //Ascension derecha en formato hh:mm:ss
list($hours, $minutes, $seconds) = explode(":", $ra);
$hour = ($hours + ($minutes/60) + ($seconds /3600));
$d = ($hour/24)*360 + 180;
if ($d >180) $d=$d -360;
return $d*-1;
}


function convertDecToDecimal ($dec) { //Ascension derecha en formato gg:mm:ss
list($degrees, $minutes, $seconds) = explode(":", $dec);
if ($degrees < 0) {
$minutes = $minutes*-1;
$seconds = $seconds*-1;
}
return ($degrees + ($minutes/60) + ($seconds /3600));
}

Aún así tengo que seguir investigando ya que tengo problemas al mostrar la Estrella Polar, ya que me saca fuera del mapa, cuando en principio las coordenadas son correctas. También tengo que mirar de quitar el control de Google Street View que da problemas., ya que saca imágenes de la tierra.

Mi primer proyecto en Silex, cbeams.org

Hace unos 10 días fui a un evento aquí en Bilbao denominado BilboStack. En una de sus charlas, Javier Eguiluz hizo una presentación de Silex, un potente microframework para PHP, que me convenció de probarla. Tenía en la cabeza algunas ideas de cosas que me gustaría desarrollar y decidí montar un mashup de astronomía, sacando la información y las imágenes de diferentes fuentes y APIs. Esa misma tarde tenía montado ya el proyecto medianamente funcional y solo necesitaba darle un poco de diseño y mejorar la recogida de datos. Así que ayer y metiendo unas pocas horas más entre semana termine la primera fase del proyecto que he denominado cbeams.org (si te gusta Blade Runner sabreís porque se llama así). Uno de estos días me tengo que liar la manta la cabeza y subir todo el proyecto a Github para que le podaís echar un vistazo.

Sobre Silex dire que me ha convencido bastante. Te da la capacidad de programar con calidad y rápidamente proyectos pequeños y medianos con un código limpio y una estructura rapida, sobre todo si sigues la que te recomienda el propio creador de Silex.