Just another web developer

Etiquetas de la entrada: jquery

Texto

Antes de haber aprendido mucho de desarrollo front-end aprendí lenguajes del lado servidor (por ejemplo, PHP) por lo que al empezar a desarrollar seriamente con JavaScript familiarizarme con la sintaxis fue relativamente sencillo. Para entonces obviamente utilizaba muy normalmente las funciones. Si con PHP podía hacer lo siguiente:

function foo($bar = 0){ // si no se especifica un valor, $bar toma 0

}

En JavaScript al principio no me figuraba como poner un valor por defecto pero la solución resulta ser bastante simple:

function foo(bar){
    var bar = bar || 0;
}

¿Y con múltiples parámetros?

Ok, si determinamos cómo podemos establecer un valor por defecto, vamos a ver cómo lo hacemos si tenemos más parámetros.

Solución clásica sería la siguiente:

function foo(a, b, c, d, e, f, g, h){

}

Funciona, está bien, todos están contentos. Pero… pronto olvidaríamos que representa cada parámetro y en el orden en particular, por lo que el uso de una función después de unos días puede ser bastante problemático.

Si utilizamos jQuery (¿quién no?), podríamos valernos del jQuery.extend(). En lugar de enviar una serie loca de argumentos, un objeto sería mucho más atractivo…

var params = {
	moneda:	'guaranies',
	precio: 200
};
foo(params);

function foo(params) {
	var o = { // o de opciones
		moneda:	'USD',
		precio: 0,
		param_x_defecto: 'bar'
	}
	$.extend(o, params);

	console.dir(o);

}

Ahora no importa en qué orden van específicamente los argumentos. Simple ah!?

Y comentá ¿cuál es la técnica que utilizás actualmente?

Fuente: iamntz.com

Comentarios
Texto

El objetivo aquí es una imagen de fondo en un sitio web que cubre la ventana del navegador en todo momento. Vamos a poner algunos detalles específicos sobre él:

  • Llena toda la página con la imagen, sin espacios en blanco
  • Escalas de imagen según sea necesario
  • Mantiene las proporciones de la imagen (relación de aspecto)
  • La imagen está centrada en la página
  • No causa barras de desplazamiento
  • Compatible entre navegadores como sea posible
  • No son unas artimañas de lujo como Flash

Impresionante, fácil y progresiva a la manera CSS3

Podemos hacer esto simplemente a través de CSS gracias a la propiedad background-size ahora en CSS3. Vamos a utilizar el elemento HTML (mejor que el body ya que tiene siempre al menos la altura de la ventana del navegador). Creamos un fondo fijo y centrado en él, y luego ajustamos su tamaño con background-size establecido en la palabra clave cubierta.

html {
        background: url(img/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Funciona en:

  • Safari 3 +
  • Chrome sea-cual-sea +
  • IE 9 +
  • Opera 10 + (Opera 9.5 compatible background- size pero no en las palabras clave)
  • Firefox 3.6 + (Firefox 4 soporta la versión prefijada non-vendor)

Solo CSS: Técnica 1

Aquí se utiliza un elemento <img> en línea (inline), que será capaz de cambiar el tamaño en cualquier navegador. Se plantea un mínimo de altura que mantiene rellenando la ventana del navegador en posición vertical, y establecer un ancho de 100%, lo que mantiene el llenado horizontal. También establece un mínimo de ancho de la anchura de la imagen para que la imagen no se haga más pequeña de lo que realmente es.

La pisca inteligente es usar una consulta de medios de comunicación (media query) para comprobar si la ventana del navegador es más pequeña que la imagen, y con un combinado en el margen izquierdo negativo y de porcentaje de izquierda que le mantenga centrada independientemente.

Es decir, en CSS sería así:

img.bg {
        /* Setea reglas para rellenar el fondo */
        min-height: 100%;
        min-width: 1024px;

        /* Setea una escala proporcional */
        width: 100%;
        height: auto;

        /* Setea el posicionamiento */
        position: fixed;
        top: 0;
        left: 0;
}

/* Esta parte tiene que ser específica de la imagen que se utilice */
@media screen and (max-width: 1024px) {
        img.bg {
                left: 50%;
                margin-left: -512px;   /* 50% */
        }
}

Funciona en:

  • Cualquier versión de los navegadores buenos: Safari / Chrome / Opera / Firefox
  • IE 6: Borked - pero probablemente corregible si se utiliza algún tipo de posicionamiento fijo
  • IE 7.8: Mayormente funciona, no se centra en los tamaños pequeños, pero llena bien la pantalla
  • IE 9: Funciona

Solo CSS: Técnica 2

Una forma bastante simple de manejar esto es poner una imagen en línea en la página, de posición fija a la parte superior izquierda, y darle un min-width y min-height de 100%, preservando su relación de aspecto.

HTML:

CSS:

#bg {
        position:fixed;
        top:0;
        left:0; 

        /* Conservar la relación de aspecto */
        min-width:100%;
        min-height:100%;
}

Sin embargo, esto no centra la imagen aún… Por lo tanto, podemos fijar que envolviendo la imagen en un div. A ese div lo haremos el doble de grande de la ventana del navegador. Luego la imagen se coloca, aún conserva su relación de aspecto y que cubre la ventana visible del explorador, y el punto muerto de eso.

HTML:

        

CSS:

#bg {
        position:fixed;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
}
#bg img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        min-width:50%;
        min-height:50%;
}

Funciona en:

  • Safari / Chrome / Firefox (no probé, pero las últimas versiones están muy bien) 
  • IE 8 + 
  • Opera (cualquier versión) y el IE fallan de la misma manera (mal colocado, no sé por qué)

EXTRA: el método con jQuery

Esta idea se convierte en mucho más fácil (desde una perspectiva CSS) si sabemos si la relación de aspecto de la imagen (<img> en línea que va a utilizar como fondo) es más grande o más pequeña que la relación de aspecto actual de la ventana del navegador. Si es inferior, entonces se puede establecer sólo el ancho a 100% en la imagen y sé que va a llenar la altura y anchura. Si es mayor, se puede establecer sólo la altura a 100% y sé que va a llenar tanto el alto y ancho.

Tenemos acceso a esta información a través de JavaScript. Como de costumbre por aquí, me gusta apoyarme en jQuery.

HTML:

CSS:

#bg { position: fixed; top: 0; left: 0; }
.fondo-ancho { width: 100%; }
.fondo-alto { height: 100%; }

JavaScript:

$(window).load(function() {    

        var laVentana        = $(window),
            $fondo           = $("#bg"),
            aspectoRelacion  = $fondo.width() / $fondo.height();

        function redimensionarFondo() {

                if ( (laVentana.width() / laVentana.height()) < aspectoRelacion ) {
                    $fondo
                        .removeClass()
                        .addClass('fondo-alto');
                } else {
                    $fondo
                        .removeClass()
                        .addClass('fondo-ancho');
                }

        }

        laVentana.resize(function() {
                redimensionarFondo();
        }).trigger("resize");

});

Funciona en:

  • IE7 + (probablemente podría funcionar en Internet Explorer 6 con una posición fija)
  • Prácticamente todos los demás

Bueno, espero les sirva de alguna forma y si tienen dudas u otra técnica que quieren compartir dejen sus comentarios!

Fuente: css-tricks.com

Comentarios
Texto

Una situación cada vez más común es la necesidad de manipular (de una u otra manera) la URL desde JavaScript. En una aplicación GIS en la que estoy trabajando utilizo un 90% de JavaScript para desarrollarla y una de las primeras cosas que necesité fue capturar los parámetros que eran pasados vía URL; para ello había escrito una función sencilla:

// opu = obtener parametro de url ;)
function opu(nombre){
    name = nombre.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&]"+nombre+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var resultados = regex.exec( window.location.href );
    if( resultados == null ){
        return "";
    }else {
        return resultados[1];
    }
}

Simplemente se pasa como parámetro a la función el nombre del parámetro que se encuentra en la URL. Por ejemplo, para una URL como http://www.ejemplo.com/index.html?param=99 si a esta función le paso param obtendría 99 de retorno.

Hoy en día casi siempre utilizamos jQuery para cualquier tipo de desarrollo web y existe un plugin llamado jQuery-URL-Parser que es excelente para obtener todo tipo de información que pueda darnos una URL

Funciona de la siguiente manera:

  • Especificar la URL a manipular
    Se puede obtener de varias formas
    var url = $.url(); // obtiene la URL actual
    var url = $.url('http://gilbert.im'); /* pasar una URL en forma de texto */
    var url = $('#miElemento').url(); // extrae la URL del elemento seleccionado - funcionaría con elementos que cuenten con atributos `src`, `href` o `action`.
    
  • Atributos URL
    El método .attr() es utilizado para retornar información de varias partes de la URL. Por ejemplo:
    var url = $.url('http://gilbert.im/carpeta/dir/index.html?item=valor');
    url.attr('protocol'); // retorna 'http'
    url.attr('path'); // retorna '/carpeta/dir/index.html'
    Los atributos disponibles para realizar consultas son:
    • source - la URL completa que se está analizando
    • protocol - Ej.: ‘http’, ‘https’, ‘file’, etc.
    • host - Ej.: www.mydomain.com, localhost, etc.
    • port - Ej.: ’80’, ‘4848’
    • relative - la ruta de acceso relativa al archivo incluyendo la cadena de consulta (por ejemplo, carpeta/dir/index.html?item=valor)
    • path - la ruta del archivo (por ejemplo, carpeta/dir/index.html)
    • directory - la parte del directorio de la ruta (por ejemplo, /carpeta/dir/)
    • file - el nombre base del archivo. Ej.: index.html
    • query - la cadena de consulta completa si es que existe. Ej.: item1=valor1&item2=valor2
    • fragment (también disponible como anchor) - toda la cadena después del símbolo #
  • Consulta de parámetros de cadena

    El .param() se utiliza para devolver los valores de los parámetros de cadena de consulta.

    Pasar de una cadena en el acceso de valor de dicho parámetro:

    $.url('http://gilbert.im?cielo=azul&pasto=verde').param('cielo'); /* retorna 'azul' */
    

    Si ningún argumento se pasa en ella, devolverá un objeto literal que contiene un mapa clave:valor de todos los parámetros de cadena de consulta.

    $.url('http://gilbert.im?cielo=azul&pasto=verde').param(); 
    /* retorna { 'cielo':'azul', 'pasto':'verde' } */
    

    Tenga en cuenta que el método .param() trabajá tanto en signo de división y de cadenas de consulta dividida por punto y coma.

  • Segmentos URL

    El .segment() se utiliza para devolver valores de segmentos individuales de la ruta de la URL

    Pase un valor entero para obtener el valor de ese segmento - Nótese sin embargo que el número no es cero-indexado como un array - es decir, el .segment(1) devuelve el primer segmento, no el segundo

    También puede pasar en valores negativos, en cuyo caso se contará de nuevo desde el final de la ruta en lugar de hacia delante desde el principio.

    var url = $.url('http://gilbert.im/carpeta/dir/ejemplo/index.html');
    url.segment(1); // retorna 'carpeta'
    url.segment(-2); // retorna 'ejemplo'
    

    Si ningún argumento se pasa en ella devolverá una matriz de todos los segmentos (que será cero-indexado!)

    $.url('http://gilbert.im/carpeta/dir/ejemplo/index.html').segment();
    /* retorna ['carpeta','dir','ejemplo','index.html'] */
    
  • Fragmento de parámetros y / o segmentos

    Algunos sitios y aplicaciones también utilizan el fragmento de hash para almacenar los pares de claves de estilo cadena de consulta de valor (Ej.: http://gilbert.im/#cielo=azul&pasto=verde) o path de tipo barra-delimitado (http://ejemplo.com/#/quienes/somos/)

    Hay dos métodos para extraer información a partir de fragmentos de este tipo - .fparam() y .fsegment(), los cuales se comportan de forma idéntica a sus contrapartes .param() y .segment() pero actúan en el fragmento en lugar de la URL principal.

    $.url('http://gilbert.im/#cielo=azul&pasto=verde').fparam('pasto'); /* retorna 'verde' */
    $.url('http://ejemplo.com/#/quienes/somos/').fsegment(1); /* retorna 'quienes' */
    

Comentarios
Texto

Quiero presentar a jKey, un plugin jQuery muy sencillo que permite utilizar atajos en nuestras aplicaciones.

Ejemplo 1

/**
 * Un ejemplo básico de su uso.
 */
$(window).jkey('a',function(){
	console.log('Presionaste la tecla "a".');
});

Nótese que el selector indica que está utilizando el evento para window pero esta forma es aplicable a cualquier elemento del documento.

Seleccionando un elemento

/**
 * La función será ejecutada
 * solo cuando el foco esté en el input.
 */
$('#ejemplo').jkey('i',function(){
	console.log('Presionaste la letra "i" dentro de un input.');
});

Ejemplo 2

Combos! Se pueden cachar combos (y/o combinaciones) de la siguiente manera:

/**
 * A diferencia de los sistemas operativos se puede
 * crear un atajo con 2 letras
 */
$(window).jkey('y+u',function(){
	console.log('Presionaste la "y" y la "u"!');
});
/**
 * Una combinación convencional
 */
$(window).jkey('alt+d',function(){
	console.log('Felicidades, hiciste un combo: alt+d');
});
/**
 * Una combinación de más de 2 teclas
 */
$(window).jkey('alt+shift+s',function(){
	console.log('Woohoo, combinaste de esta forma: alt+shift+s');
});

Ejemplo 3

Muchas veces puede que querramos hacer accesible una misma función pero de forma distinta. jKey permite la selección de múltiples opciones

/**
 * Más de una opción para la misma función
 */
$(window).jkey('w, up',function(){
	console.log('Presionaste o la w, o arriba!');
});

Estas son solo algunas de las funcionalidades que nos ofrece este sencillo plugin. Las aplicaciones prácticas que se le puede dar son muchas! Desde integrarlo dentro de un formulario sencillo como integrarlo dentro de un juego.

Pueden descargar el código fuente AQUI

Happy coding! ;)

Comentarios