Evento Frontend 11 junio en Barcelona: Modern Web Event

Pues retomamos escribir en nuestro rincón preferido para dejaros aviso de uno de los resultados del proyecto formativo que estamos llevando a cabo en [Q] bajo la marca «THELAB«, y del que ya os hemos hablado en unas cuantas ocasiones.

En colaboración con la Universitat Oberta de Catalunya y agradeciendo el apoyo de Mobile World Capital, Mobile World Centre y Movistar, aprovechamos la visión que compartimos de la importancia de acercar las necesidades profesionales actuales a la educación reglada hemos creado el «Modern Web Event«, un evento donde precisamente intentamos trasladar esta filosofía y de forma totalmente GRATUITA.

Para explicarlo mejor, simplemente basta con que veáis la lista de ponencias y juzguéis vosotros mismos :)

Temáticas de actualidad y de clara relevancia en el futuro más cercano del desarrollo frontend en este caso, tocando temas como: flexbox, HTML5, videojuegos, TypeScript, apps híbridas con Cordova/Phonegap, AngularJS y responsive web design.

Así que si estáis por Barcelona el 11 de junio, no os podemos recomendar otra cosa que os inscribáis cuanto antes y que os animéis a saludar a Marcos (@qmarcos) que participará dando la lata con una de las cosas que más nos gusta hacer por [Q]: juegos con HTML5 y TypeScript!

typescript.io

Aquí os traemos este jsfiddle para TypeScript, en el que podréis hacer pruebas rápidas con TypeScript. Para verlo en acción puedes acceder a dos ejemplos: greeter y un poco de herencia con animalillos.

Conzole, panel de depuración en JavaScript

Igual alguno de vosotros está preguntándose qué puede aportar de especial o novedoso un panel de depuración hecho en JavaScript, frente a las increíbles funcionalidades con las que contamos con las herramientas de desarrollo de los navegadores, ya sea las de IE, Safari, Chrome, Ffox e incluso extensiones tan famosas como Firebug…

La respuesta a esto es «móvil». La depuración en terminales no es precisamente sencilla en muchas situaciones, por lo que disponer de algo como lo que ofrece Conzole, no es para nada despreciable en estas situaciones. Pronto os hablaremos de Weinre (Web Inspector Remote), que viene muy a cuento de esto.

 

Validación de tarjetas de crédito, códigos postales y otros en JavaScript

Os traemos un enlace a un plugin que solventa la validación de algunos datos complejos de una forma realmente sencilla. Además lo hace con compatibilidad con jQuery y Node, además del soporte para JavaScript standard.

isjs nos permite validar números de diferentes tipos de tarjetas de crédito, códigos postales de diferentes países, números de teléfono de diferentes países, coordenadas de geoposición y números de ISBN entre otros de una manera realmente sencilla.

TypeScript Succinctly, free eBook

Aquí os dejamos este eBook gratuito sobre TypeScript para conocer mejor una de las opciones más prometedoras en JavaScript cuando se desea programar en mejores condiciones que las que ofrece el lenguaje en su estado actual. Para quien quiera saber un poco más de qué es TypeScript y qué supone para los que venimos de lenguajes con una aproximación más OOP, también os dejamos el enlace a la web de TypeScript.

FPSmeter

Hoy os traemos una utilidad muy interesante para todos los que le metemos mano al desarrollo de juegos o aplicaciones que hacen procesos intensivos… se trata de un medidor de FPS que además de ser muy fácil de integrar, chulo y bonito, permite tunearlo visualmente.

Entre algunas de sus funciones más destacadas están el permitir múltiples instancias, permite medir frames por segundo, milisegundos entre frames o tiempo en renderizar 1 frame y está soportado en todos los navegadores modernos además de IE7+.

Bug/Error fuente TTF con caracteres extendidos con librería GD, imagettftext y PHP

Ayer me topé con una de esas situaciones en la que a los quemetemos mano al código de vez en cuando nos ponen «contentos». Una de esas sorpresas que a veces el dios del código nos tiene preparadas para recordarnos que no somos nadie y que estamos expuestos al peor de los males. Una de esas obras de arte que te permiten disfrutar durante horas de un bug loco para terminar emocionado y contento por haber encontrado la causa, cuando en realidad hemos perdido un precioso tiempo de nuestras miserables vidas…

Por el título ya sabéis que es de PHP, que tiene que ver con la librería GD y que se refiere al uso de textos en dicha librería, concretamente con fuentes TrueType, es decir, extensión TTF. Es un bug/error que te puedes encontrar o no, dependiendo precisamente de cómo está instalada y configurada la librería GD dentro de PHP. Básicamente consiste en que a la hora de usar una tipografía TrueType para escribir texto en una imagen sobre la que estamos trabajando con GD en PHP a través del método imagettftext, tendremos problemas a la hora de ver caracteres extendidos tales como acentos, eñes, etc. dependieno de dicha configuración.

Lo que verías es algo como esto:
Texto con fuente TTF con el error causado por la configuración de GD
Seguir leyendo…

The Starter Kit, recursos de calidad seleccionados minuciosamente sobre diseño y desarrollo web para el día a día

The Starter Kit, un directorio con enlaces a recursos ultra high quality

Ya nos imaginábamos cuando Criterion anunció su Alt+F4 que el Sr. Sotoca no podía estar demasiado tiempo sin emponzoñar la web con otro proyectazo para todos los que nos dedicamos a hacer de nuestra profesión algo más que una fábrica de pasteles, y estamos en el constante reciclaje que este negocio te exige si quieres hacer las cosas bien.

Pues el tiempo nos ha dado la razón, y tampoco ha hecho falta esperar demasiado. The Starter Kit es un nuevo rincón al que habrá que tener muy vigilado, porque estamos totalmente convencidos que recogerá las mejores perlas en forma de enlaces hacia los mejores recursos (seleccionados con mucho mimo y cuidado, nos consta) tanto para diseñadores como para desarrolladores web.

Seguir leyendo…

#21 [Q] JS Tip: reseteando el valor de un select con jQuery

Si deseamos resetear el valor de un select con jQuery, y tenemos la buena costumbre de poner como primer «option» el valor que sale por defecto, una manera muy sencilla de lograr el reset sería:

$('#mi_select').val($('#mi_select > option:first').val());

Y para no recorrer el DOM 2 veces en busca del mismo elemento, esta optimiación de regalo:

var $miSelect = $('#mi_select');
$miSelect.val($miSelect.children('option:first').val());
GreenSock Animation Platform (GSAP) v12, JavaScript version

JavaScript GreenSock Animation Platform (GSAP)

Desde hace ya bastante tiempo, el mundo de los estándares web está recibiendo magníficas aportaciones de muchos desarrolladores para simplificar y potenciar el uso de algunas de las características más interesantes de estas tecnologías.

Cada día son más los motores de físicas que se están portando a JavaScript, frameworks y herramientas de animación, para permitir subir un nivel más la interacción, animación y principalmente el desarrollo de juegos con estándares. En mi opinión, Flash sigue bastante por delante si se analiza el estado actual de ambos referentes en el campo de los videojuegos, pero quien va a decir que no le gustan algunos dulces que nos están llegando como CreateJS, Adobe Edge, o multitud ya de Game Engines.

En este post os presento los pasos básicos de uso de una herramienta que es un referente en el mundo «flashero» y que abraza a JavaScript con una versión para trabajar de la misma forma en dicho lenguaje. Si el día en el que descubrí las bondades de TweenLite (y posteriormente su hermano mayor TweenMax) fue grande, el día en el que GreenSock ha decidido sacar una versión para JavaScript seguramente será igual o más grande aun.

Seguir leyendo…