JavaScript

Zepto un mini jQuery

por

ZeptoJSPensando en que los móviles no tienen mucha capacidad de computo (todo es cuestionable) ni tanto ancho de banda (esto ya suele ser más normal) que los ordenadores personales, ha surgido la idea de minimizar el tamaño de la libreria (biblioteca) más popular de javascript y su nombre es Zepto.
Como jQuery pero en aerogel. Esa es su filosofía, y la verdad es que la parte ajax de la biblioteca la dejan an 39 lineas de código.
Que se reducen sus funcionalidades es algo lógico y normal, pero en realidad las principales y muchos selectores CSS siguen estando.
Las cosas que cambian y con motivo son por ejemplo la detección de UserAgent que la implementa de la siguiente manera:

android = ua.match(/(Android)\s+([\d.]+)/),
iphone = ua.match(/(iPhone\sOS)\s([\d_]+)/),
ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
webos = ua.match(/(webOS)\/([\d.]+)/);

Como veis aunque está pensado para dispositivos móviles está orientado hacia el uso de un navegador con webkit. De hecho todo el apartado de FX de la librería lo solucionan con las directivas de webkit.

$.fn.anim = function(props, dur, ease){
var transforms = [], opacity, k;
for (k in props) k === 'opacity' ? opacity=props[k] : transforms.push(k+'('+props[k]+')');
return this.css({ '-webkit-transition': 'all '+(dur||0.5)+'s '+(ease||''),
'-webkit-transform': transforms.join(' '), opacity: opacity });
}

Me gusta la iniciativa de una versión ‘mini’ o ‘movil’ de jQuery, de hecho en muchas ocasiones no se utiliza la librería en todo su esplendor, cosa que es normal. Pero en el caso de Zepto, que aun va por la versión 0.2 se podria tener en cuenta el resto de navegadores para moviles (como opera mini).

Adaptar el estilo de tu web a tu monitor

por

Una cosa que se me ha ocurrido hace poco es hacer virguerias con los estilos de la web que tengas en el navegador acutualmente. La mejor opción es hacer las cosas en la parte del cliente, ya que desde el servidor hay información, como el tamaño de la ventana en que se visualiza la web, que no se puede consultar directamente.
Usando jquery puedes aumentar o disminuir el tamaño de las fuentes de tus divs con esta sencilla funcion. Esto lo puedes hacer con las proporciones que más te gusten, aquí aparecen a partir de 900 pixels.

var w=0;
var h=0;
function res(elem,we){
 var tam=$(elem).css('font-size');
 tam=parseFloat(tam);
 if(we>900){
  var incremento=(we*100/900)-100;
  tam +=incremento;
 }
 $(elem).css('font-size',tam+"px");
}

$(document).ready(function() {
 var w= $(document).width();
 var h= $(document).height();
 $("div").each(function(i,e){
  res(this,w);
 })
});

Si simplemente te has definido distintas hojas de estilo para distintos tamaños no es nedesario que crees ninguna funcion para recorrer los elementos de la web. Simplemente debes seleccionar la hoja de estilo según el tamaño e incrustarla dinamicamente.

var w=0;
$(document).ready(function(){
 var tam;
 var w= $(document).width();
 if(w > 900){
  tam=1;
 }
 else{
  tam=2;
 }
var link=<link rel=stylesheet type=text/css href=style '+tam+'.css >;
$('head').append(link);
});

así selecionarás la hora de estilo style1.css o style2.css según el tamaño de la ventana en la que se esté viendo tu web.

Ni y ni ningun diseñador te recomendará que cambies el estilo de la web dependiedo del monitor, pero eso no significa que no tengas que hacerlo en determinadas condiciones.
El metodo CSS de jQuery te permite leer y escribir dinamicamente las caracteristicas de los elementos que tengas en la web. De hecho los efectos se hacen con ligeros cambios usando este método.