Contenido

LESS, CSS enriquecido en el cliente

15 May

+ 6

Hace unos días vimos SASS, una herramienta pensada para agilizar la maquetación CSS de nuestros proyectos. Vimos que ofrecía una serie de herramientas que nos permitía trabajar con una versión enriquecida de CSS con variables, funciones, anidamiento de selectores,…

LESS

Pues LESS, nos ofrece más de lo mismo, usando una sintaxis similar a que vimos con SASS, y nos ofrece las mismas maravillas que ya hemos visto.

Variables

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

Mixins

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Anidamiento de selectores

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Funciones y operaciones

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

Como podemos ver, nuestros CSS’s cogen una aspecto de lenguaje de programación que permite dinamizarlas fácilmente.

Compilación en el cliente

A diferencia de SASS, LESS permite compilar las hojas de estilos dinámicas (.less) directamente en el navegador mediante una librería JS que cargaremos en nuestras páginas (para Chrome, Safari y Firefox).

<head>
	<link rel="stylesheet/less" type="text/css" href="styles.less">
	<script src="less.js" type="text/javascript"></script>
</head>

Es importante poner las hojas de estilos antes de añadir la librería javascript e indicar que mediante el atributo rel que el tipo de stylesheet del que se trata es uno de los que se han de compilar.

Además, nos añade la capacidad de refrescar los estilos mediante el Watch Mode, que podremos activarlo mediante un parámetro en la URL a la que accedemos (#!watch) o desde la consola de Firebug ejecutando less.watch().

cssSandpaper, unifica transformaciones CSS3 en todos los navegadores

15 May

+ 0

cssSandpaper es otra librería javascript que pretende hacernos la vida más fácil haciendo que dispongamos de transformaciones CSS3 en nuestros navegadores de forma estandarizada, omitiendo las versiones personalizadas de cada navegador e incluso dotando a Internet Explorer de ellas.

Pie Menu, añade un menú circular a tu página con jQuery y CSS3

14 May

+ 2

Pie Menu, es un plugin jQuery que se aprovecha de las animaciones CSS3 para generar curioso menu circular desplegable.

piemenucss3
(Ver Imagen)

Además usarlo es muy sencillo, ya que solo tendremos que definir un listado de opciones e indicar que el elemento contenedor debe comportarse como un Pie Menu.


  <div id='outer_container' class="outer_container" >
        <a class="menu_button" href="#" title="Toggle"><span>Menu Toggle</span></a>
        <ul class="menu_option">
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
        </ul>
    </div>

Una vez definidas las opciones del menu, activamos el menú:


$('#outer_container').PieMenu({
	'starting_angel':0(Starting Angle in degree),
	'angel_difference' : 90(Displacement angle in degree),
	'radius':100 (circle radius in px),
}); 

Siempre que veo menus de estos, me recuerdan a aquellos del juego Secret of Mana de la Super NES😀

Datavisualization.ch, colección de herramientas para crear tus gráficas en javascript

14 May

+ 0

Si eres de los que ya hemos perdido la cuenta de la cantidad de herramientas que hay para incluir gráficas en tus páginas mediante javascript, te recomiendo datavisualization.ch. Una web donde podrás encontrar todas, o casi, las que te puedan sacar de un apuro en un momento dado. Recomendable para tenerla siempre a mano.

*JS, el hijo bastardo entre Javascript y C

13 May

+ 1

No paran de salir herramientas para hacernos la vida más facil, aunque hay veces que para evitar aprender un lenguaje concreto tienes que aprender otro que te convertirá el código en este primero. Este es el caso de *JS, un lenguaje pensado para programar Javascript como si de C se tratara.

Por el momento es una versión beta que no permite trabajar con ella en el mundo real, pero que sirve para poner una serie de ideas sobre la mesa con las que mejorar nuestra programación de bajo nivel sobre Javascript.

Programación más eficiente

*JS ofrece un lenguaje tipado que permite especificar el tipo de variables que vamos a definir, lo que hará que la conversión a Javascript sea más robusta y  segura. Para ello usa las herramientas de más bajo nivel que Javascript puede ofrecer, haciendo que nuestro código roce la ilegibilidad extrema 😀

Código *JS

struct Node {
  let Node *next;
  let int value;
}

let Node *head = new Node, *tail = head;

function Node * add (int value) {
  let Node * next = new Node;
  next->value = value;
  tail->next = next;
  tail = next;
  return next;
}

trace(add(1));
trace(add(2));
trace(add(3));

traceList(head->next);

function void traceList(Node * p) {
  while (p) {
    trace("Node at address: " + p + ", has value: " + p->value);
    p = p->next;
  }
}

Código Javascript

Una vez compilado el código anterior, nos quedaría en algo así que podría ser ejecutado por cualquier navegador…

const $U4 = U4;
var head = (malloc(8) >> 2), tail = head;
function add(value) {
  const $I4 = I4, $U4 = U4;
  var next = (malloc(8) >> 2);
  $I4[next + 1] = value;
  $U4[tail] = next;
  tail = next;
  return next;
}
trace(add(1));
trace(add(2));
trace(add(3));
traceList($U4[head]);
function traceList(p) {
  const $I4 = I4, $U4 = U4;
  while (p) {
    trace('Node at address: ' + p + ', has value: ' + $I4[p + 1]);
    p = $U4[p];
  }
}

Además, *JS nos ofrece herramientas como malloc() y free() (como en C) que nos servirán para gestionar la memoria que consumen nuestros scripts de forma explícita.

CamanJS, manipulación de imágenes mediante javascript

11 May

+ 1

CamanJS une dos de mis más grandes pasiones, la fotografía y el javascript. Y gracias a las nuevas tecnologías lo permiten hacer de una forma muy eficiente.

Gracias al uso de <canvas /> y su control mediante javascript nos permite disponer de una serie de métodos para dar efectos predefinidos o crear los nuestros propios de forma sencilla.


<-- cargamos la funcionalidad de camanJS -->
<script type="text/javascript" src="caman.full.min.js"></script>
 
<script type="text/javascript">
// Modificamos la apariencia de la imagen indicada.
Caman("images/example-image.jpg", "#example-canvas", function () {
    this
        .saturation(20)
        .gamma(1.4)
        .vintage()
        .contrast(5)
        .exposure(15)
        .vignette(300, 60)
        .render();
});
</script>

<canvas id="#example-canvas"></canvas>

Aunque la compatibilidad con los diferentes navegadores no es completa (obviamente) soporta una buena cantidad de navegadores (Google Chrome, Safari 5+, Firefox 4+, Opera 10+, Internet Explorer 9+) que junto a la completa documentación nos ofrece una herramienta más que interesante para trabajar con imágenes desde el navegador.

-prefix-free, dí adios a los prefijos CSS

11 May

+ 5

Ayer vimos la cantidad de líneas de código que debemos incluir en nuestros CSS’s para disponer de ciertas funcionalidades en los diferentes navegadores, no es algo nuevo, hace ya tiempo nos quejábamos de ello. Y parece que a medida que van saliendo más y más propuestas por parte de los diferentes navegadores estos prefijos se están haciendo más y más populares.

El problema, radica en que dentro de X años esos prefijos dejarán de ser necesarios por que por lo general adoptan una nomenclatura estándar, lo que nos obligará a recorrer todos nuestros CSS’s para adaptarlos a los atributos del momento.

Para solventar prácticamente por completo ese problema aparece prefix-free, un librería Javascript que se encarga de gestionar estos prefijos por nosotros dejándonos a nosotros la nomenclatura estándar y él adaptándose al navegador que está visitando nuestra aplicación web.


// Nuestro CSS
border-radius: 1em; // Para cuando se cumplan los estandares.

// Resultado
-moz-border-radius: 1em; // Mozilla 
-ms-border-radius: 1em; // Internet Explorer 8 (No soportado) 
-webkit-border-radius: 1em; // WebKit y Safari 

Como podemos ver el cambio es significativo, y únicamente hemos de añadir un fichero JS a la carga de nuestra aplicación web.

<script src="js/prefixfree.min.js"></script>

Compatibilidad

Actualmente está disponible para los principales navegadores, IE9+ Opera 10+, Firefox 3.5+, Safari 4+ y Chrome para escritorio y Mobile Safari, Android browser, Chrome y Opera Mobile para móviles.

Problemas detectados.

En CristaLAB comentaban que nos funcionan en:

  • CSS’s cargados mediante @include.
  • ficheros CSS’s locales en Chrome y Opera.
  • Estilos inline
  • y CSS’s de diferentes dominios

Aún así, el trabajo que nos ahorramos a largo plazo es realmente interesante para tenerlo en cuenta.

Diagnosticando errores javascript más fácilmente con Error.stack

11 May

+ 2

Hoy, IEBlog publica un artículo muy interesante sobre el tratamiento de errores en IE10 sobre Windows 8. Al parecer, este último incluye soporte para un nuevo atributo al objeto Error(), el Error.stack, que activado desde las Web Developer Toolbars de IE10 nos ayudará a detectar los errores de forma más rápida.

Error.stack en IE10
(Ver Imagen)

Como podemos ver, nos ofrece una información detallada del error, al puro estilo Java mostrando toda la traza del error producido. Por lo tanto, nuestros try/catch vendrán cargados con todo lo necesario para conocer la causa de nuestros problemas, además podremos limitar el nivel de profundidad de dicha traza mediante el atributo stackTraceLimit disponible de igual modo en el objeto Error(). Una funcionalidad muy interesante que seguro nos ayudará a solventar los problemas que nos encontremos en IE10 … que seguro que los encontramos 😀

jQuery transit, transformaciones y transiciones CSS3

10 May

+ 1

jQuery.Transit, es un plugin de jQuery (1.4+) que nos permite trabajar con las diferentes transiciones y transformaciones de CSS3 mediante una simple nomenclatura.

Para ello, dota al atributo css() de una serie de parámetros que nos permite extender los estilos básicos tratados con jQuery.


("#box").css({ x: '30px' });               // Move right
$("#box").css({ y: '60px' });               // Move down
$("#box").css({ translate: [60,30] });      // Move right and down
$("#box").css({ rotate: '30deg' });         // Rotate clockwise
$("#box").css({ scale: 2 });                // Scale up 2x (200%)
$("#box").css({ scale: [2, 1.5] });         // Scale horiz and vertical
$("#box").css({ skewX: '30deg' });          // Skew horizontally
$("#box").css({ skewY: '30deg' });          // Skew vertical
$("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation
$("#box").css({ rotateY: 30 });
$("#box").css({ rotate3d: [1, 1, 0, 45] });

// Valores relativos
$("#box").css({ rotate: '+=30' });          // 30 degrees more
$("#box").css({ rotate: '-=30' });          // 30 degrees less

// No importa usar unidades
$("#box").css({ x: '30px' });
$("#box").css({ x: 30 });

// Multivalores
$("#box").css({ translate: [60,30] });
$("#box").css({ translate: ['60px','30px'] });
$("#box").css({ translate: '60px,30px' });

Todos estos helpers implementados en css() usan la funcioón $.fn.transition() que es la encargada de gestionar las animaciones aplicadas a estos nuevos parámetros.


/*
   $('...').transition(options, [duration], [easing], [complete])
*/
$("#box").transition({ opacity: 0.1, scale: 0.3 });
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500);                         // duration
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast');                      // easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');                   // duration+easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..});             // callback
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..});  // everything

Funciona en: IE 10+, Firefox 4+, Safari 5+, Chrome 10+, Opera 11+, Mobile Safari

Un plugin de esos que te ayuda a hacer las cosas más faciles, de los que nunca viene mal conocer 😀

Usando la Javascript Fullscreen API

9 May

+ 11

Si conoces Facebook, conocerás el nuevo sistema de visualizado de imágenes que permite, entre otras opciones, ver la imagen a pantalla completa, pero cuando decimos pantalla completa, es a pantalla completa, usando toda la pantalla, no usando el tamaño del elemento Window como lo usábamos antes.

¿Como es posible?

Pues debido a la implementación de la Javascript Fullscreen API :D.
Una implementación, introducida por Apple en el Safari 5.0 para los tags <video /> y que fue bien acogida en la comunidad de desarrolladores, lo que hizo que Mozilla se añadiera con una propuesta más firme en la que se extendía su uso a cualquier elemento del DOM. Y para consolidar esta buena idea, la W3C metió mano y definió la primera propuesta para estandarizar esta funcionalidad.

¿Como lo usamos?

Después de comprobar que el navegador del usuario dispone de dicha funcionalidad (que por ahora son Google Chrome 15+, Safari 5.1+ y Firefox 10+) ejecutamos la llamada RequestFullScreen() que nos cambiará a modo pantalla completa.

var docElm = document.documentElement;
if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen();
}

Una vez ya en pantalla completa, el navegador no solicitará si deseamos permitir que el dominio sobre el que usamos dicha funcionalidad debe tener permitido el uso de la Fullscreen API.

Para detectar el estado de nuestra pantalla completa disponemos del evento fullscreenchange que nos permitirá detectar un cambio sobre esta funcionalidad. Pudiendo conocer en todo momento si estamos en modo normal o modo pantalla completa.


document.addEventListener("fullscreenchange", function () {
    fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
}, false);

document.addEventListener("mozfullscreenchange", function () {
    fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
}, false);

document.addEventListener("webkitfullscreenchange", function () {
    fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);

Y además, disponemos de una pseudo-clase CSS que nos permite condicionar ciertos aspectos de nuestra pantalla completa.


html:-moz-full-screen {
    background: red;
}

html:-webkit-full-screen {
    background: red;
}

html:fullscreen {
    background: red;
}

Personalmente, creo que es una funcionalidad muy interesante y me ha llamado mucho la atención que se haya movido tan rápido y que podamos usarla con tantos navegadores en tan poco tiempo. Aunque al parecer, Microsoft aún no tiene claro si lo va a implementar debido a que Windows 8 ya está pensado para trabajar con Internet Explorer 10 en modo pantalla completa siempre… otra vez 🙁

Más Info