Contenido

CSSCrap, los razzies de los diseños CSS

30 ene

+ 18

Por decirlo de alguna manera los Razzie, son los “anti oscars”, premios que se otorgan a las peores películas, actores, … una forma cómica de ridicular los premios de la academia (los famosos Oscars).

Pues via Twitter, Michocano me avisa de que ha creado CSSCrap, una galería que me recuerda a estos premios pero en este caso los diseños se merecen el premio a peor diseño.

csscrap

Sin duda es una idea inovador e interesante. Así que hagamos una buena recopilación de diseños que vayamos encontrando para evitar que en un futuro se repitan. Apuntate a CSSCrap.

Minimizando al máximo la detección del navegador

30 ene

+ 4

Ayer vimos como minimizar al máximo la detección de Internet Explorer en Javascript. Pero, ¿y los demás navegadores? Pues en The Spanner han hecho una recopilación de estos métodos de detección que se aprovechan de peculiaridades de cada navegador.

//Firefox
FF=/a/[-1]=='a'

//Firefox 3
FF3=(function x(){})[-5]=='x'

//Firefox 2
FF2=(function x(){})[-6]=='x'

//IE
IE='\v'=='v'

//Safari
Saf=/a/.__proto__=='//'

//Chrome
Chr=/source/.test((/a/.toString+''))

//Opera
Op=/^function \(/.test([].sort)

¿Y si los juntamos todo?

B=(function x(){})[-5]=='x'?'FF3':(function x(){})[-6]=='x'?'FF2':/a/[-1]=='a'?'FF':'\v'=='v'?'IE':/a/.__proto__=='//'?'Saf':/s/.test(/a/.toString)?'Chr':/^function \(/.test([].sort)?'Op':'Unknown'

Motivación extra para aprender CSS

30 ene

+ 6

Si el CSS te gusta pero te dá pereza aprenderlo, hay gente que se ha empeñado en motivarnos para que el CSS sea más interesante de lo que ya de por sí és. [Via]

Primera descripción oficial de que existe GDrive

30 ene

+ 3

Hace ya años que se baraja la idea de que Google ofreciera un espacio a modo de disco duro para almacenar datos y que estos no estén ligados a un PC, pudiendo así almacenar en ellos lo que quieras podemos usar desde cualquier PC en cualquier lugar.

Mucho se ha rumoreado, pero hoy vía Twitter descubro que ya hay alguna definición oficial por parte de Google sobre el tema.

// Localized product category of GDrive
_CI_messages.CI_GDRIVE_CATEGORY = 'Copia de seguridad y almacenamiento de archivos online';
// Localized short description of GDrive (1st
// of 2 description lines)
_CI_messages.CI_GDRIVE_DESCRIPTION_1 = 'GDrive te proporciona un espacio de almacenamiento seguro para todos tus archivos, ya sean de fotos, de música, de documentos o de otro tipo.';
// Localized short description of GDrive (2nd
// of 2 description lines)
_CI_messages.CI_GDRIVE_DESCRIPTION_2 = 'GDrive te permite acceder a tus archivos en todo momento, desde cualquier lugar y mediante todo tipo de dispositivos, ya sea desde tu escritorio, a través del navegador web de tu equipo o desde tu teléfono móvil.';

Esto está sacado de un fichero JS de Google. Y nos muestra lo que pretenden conseguir con GDrive. Más información para las BD de Google :D

Añadir selector :regex a jQuery

29 ene

+ 4

Una de las maravillas de los frameworks es que no se queda en simplemente una colección de funcionalidades que te pueden ayudar sinó que además te permiten extenderlos y darles más capacidades a sus funcionalidades. 

jQuery, al igual que los demás, dispone de esta propiedad y además nos permite extender los selectores con los que podemos realizar consultas sobre nuestra aplicación.  James Padolsey lo sabe y por ello ha extendido el listado de selectores con uno nuevo que puede ayudar a mucha gente.

jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels) ?
                        matchParams[0].split(':')[0] : 'attr',
            property: matchParams.shift().replace(validLabels,'')
        },
        regexFlags = 'ig',
        regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}

Este código, nos permite extender el listado de selectores disponibles con :regex, un selector que permite aplicar expresiones regulares a los objetos que estamos buscando.

// Selecciona todo los elementos que no comiencen vocales:
$(':regex(id,^[aeiou])');

// Selecciona todos los DIV's que contengan números
$('div:regex(class,[0-9])');

// Todos los elementos SCRIPT que tenga jQuery en el atributo SRC
$('script:regex(src,jQuery)');

jQuery Rotate, rota imagenes con jQuery fácilmente

29 ene

+ 0

jQuery Rotate es un plugin desarrollado en jQuery que permite rotar imagenes fácilmente. En la misma página nos muestran algunos ejemplos de como funciona dicho plugin y vemos que gracias al uso del elemento <canvas /> de HTML 5 conseguimos rotar imagenes con una fluidez bastante aceptable.[Descargar][Demo]

Mini detección de Internet Explorer en Javascript

29 ene

+ 4

El gran Dean Edwards nos mostró un sistema extremadamente minimalista para detectar Internet Explorer mediante Javascript:

var isIE = /*@cc_on!@*/false;

Hoy vía Ajaxian encuentro una más minimalista todavía

IE='\v'=='v';

Internet Explorer (todas las versiones) es el único que devuelve true frente a esta comprobación, lo que nos ayuda a detectar el navegador

Pese a que no recomiendan estos sistemas para desarrollar, en muchas ocasiones no nos queda otra. Siempre que podamos debemos comprobar que esta funcionalidad exista y “metaprogramar” nuestros scripts.

WordPress MU por fín en la versión 2.7

28 ene

+ 0

La versión Multi Usuario de WordPress, por fín, ha llegado a la versión 2.7. Al parecer desde Diciembre se está depurando el sistema para ofrecer su versión más estable y al parece Doncha lo ha conseguido. Podemos ver el proceso en el trac de WordPress MU y como mejora visual importante, añadir que se ha introducido el panel administrador de Viper007Bond que se complementa con el resto del panel administrador de WordPress 2.7 [Descargar]

Divide formularios en pasos con jQuery

28 ene

+ 10

Revisando los posts del foro, en un rato que he tenido, me he encontrado babySteps, un plugin que hans me muestra y que se encarga de dividir formularios en partes. Un componente ideal para formularios rápidos y complicados.

Revisando el plugin he visto que tu defines los puntos de corte y eso no me acaba de gustar, el tener que poner elementos que no tendrían ningún sentido si no fuera por el plugin no me ha gustado mucho. Así que me montado un pequeño script, que usando jQuery, nos permite obtener lo mismo siguiendo un poco más la semántica del HTML.

stepForm()

Simplemente es una función que se encarga de convertir todos los formularios cuyo atributo class sea stepMe. Únicamente se encarga de cortar el formulario por elementos <fieldset /> haciendo que un formulario largo aparente ser varios de menor tamaño.

Veamos un ejemplo que he montado.

<form action="" method="post" class="stepMe">
	<fieldset>
		<label for="name">Nombre:</label>
		<input name="nombre" id="name" value="" />
		<label for="surname">Apellidos:</label>
		<input name="apellidos" id="surname" value="" />
		<label for="birthday">Fecha de Nacimiento:</label>
		<input name="fnac" id="birthday" value="" />
	</fieldset>
	<fieldset>
		<label for="text1">Text1:</label>
		<select id="text1">
			<option>1</option>
			<option>1</option>
			<option>1</option>
			<option>1</option>
			<option>1</option>
		</select>
		<label for="text2">Text2: </label>
			<input type="radio" id="text2" />
	</fieldset>
	<fieldset>
		<label for="submit">Submitar datos </label>
		<input type="submit" id="submit" value="Enviar" />
	</fieldset>
</form>

Este ejemplo nos divide la página en 3 pasos. Para permitir al usuario moverse entre los pasos he añadido un enlace “Volver” y otro “Seguir“, pero no descarto añadir una pequeña paginación esta noche :D

Personalización

Podemos definir nuestro propio estilo para los enlaces que se añaden mediante el uso CSS de las clases .nextStep y .backStep.

Además, podemos definir el texto que queremos mostrar en ambos enlaces pasándolo como parámetro. Disponemos de 3 parámetros:

  1. Texto Back. (por defecto Volver)
  2. Texto Next. (por defecto Seguir)
  3. Contenedor. (por defecto fieldset)
$.stepForm();
// Volver / Seguir [fieldset] 

$.stepForm('Back','Next');
// Back / Next [fieldset]

$.stepForm('<-','->', 'p');
// Volver / Seguir [p]

Si somos reacios a usar <fieldset /> podemos pasar como 3er parámetro el tag que vamos a usar como contenedor.

Código

jQuery.extend({
    stepForm: function(txtBack, txtNext, token){
    	var fieldsets = $((token || 'fieldset'), $("form.stepMe"));
        var total = $(fieldsets).length;
	$(fieldsets).each(function(x,el){
			    if (x > 0) {
			      $(el).hide();
			      $(el).append('<a class="backStep" href="#x_' + (x-1) + '">'+ (txtBack || 'Volver') +'</a>');
			      $(".backStep", $(el)).bind("click", function(){
			                $("#x_" + (x - 1)).show();
			                $(el).hide();
			       });
			    }

			    if ((x+1)< total) {
			        $(el).append('<a class="nextStep" href="#_' + (x+1) + '">'+(txtNext || 'Seguir')+'</a>');
			        $(".nextStep", $(el)).bind("click", function(){
			                $("#x_" + (x + 1)).show();
			                $(el).hide();
			        });
			    }
			    $(el).attr("id", "x_" + x);
	});
    }
});

Actualización

Marco Neumann  ha portado el script a MooTools para los usuarios de este framework. La verdad es que la claridad del código no tiene comparación.

Navegación basada en letras con jQuery

28 ene

+ 7

jQuery ListNav es un plugin que nos permite crear listas de navegación basadas en letras. 

jquery_listnav

Como podemos ver nos ayuda mucho a filtrar nuestras busquedas mediante la selección de la primera letra que estamos buscando.  Ademas: 

  1. Es muy fácil de añadir a cualquier listado de tu página
  2. Completamente no obstructivo
  3. Funciona perfectamente con UL/OL, reiniciando el contado de los OL en cada busqueda.
  4. Trabaja con cualquier contenido HTML dentro los elementos LI
  5. Testeado en IE6/7, FF2/3, Safari (Win y Mac)
  6. Requiere jQuery 1.2+ y jQuery Dimensions (o jQuery 1.2.6 + plugin).

 

Ver demos o Descargar