Reset CSS elige la adecuada

La utilidad de los reset, nos ayudarán a que independientemente del navegador que se utilice, el contenido se vea lo más parecido posible a lo que realmente planeamos, según como lo hayamos establecido en nuestro CSS. Y para facilitarnos eso de encontrar el reset adecuado, les de recomiendo cssresetr, un sitio desde donde podrán no sólo probar como se verían los distintos tipos de reset que ofrece en la comparativa, sino que si se van al link de la parte derecha que dice CSS: Reset Library, podrán escoger el que los haya convencido y les mostrará su código. El cual pueden copiar y utilizar sin preocupaciones en sus proyecto.

Web: http://cssresetr.com/

Animaciones Graciosas

Están muy bien... son muy cortas no duran más de medio minuto pero son muy divertidas, además todas tienen una moraleja al final.

Son hechas por Rex Martin A.K.A Ricky Martin, ver más | [rexmartin]

PANCAKES from Rex Martin on Vimeo.


LEMONS from Rex Martin on Vimeo.


CHAIN from Rex Martin on Vimeo.


HORSE from Rex Martin on Vimeo.


I.T. from Rex Martin on Vimeo.


LAPTOP from Rex Martin on Vimeo.

Grubeco te ayuda a recuperar el Grub

Menuda gracia supone el perder el Grub cuando has instalado otro sistema o se ha desconfigurado.

Pues de la mano de machgeek tenemos la posibilidad de recuperarlo sin problema.

Comenzamos iniciando nuestro PC desde un Live CD de Ubuntu. Una vez hecho esto, descargamos el scripty le damos permisos de ejecución:

$ sudo chmod +x grubreco

Y tras esto ejecutarlo:

$ ./grubreco

Si todo sale bien te saldrá esto:

Operacion completada, al reiniciar no vera el grub, pero si iniciara Ubuntu, luego de esto ejecute en un terminal sudo update-grub y listo!

Como verán nos da unas últimas instrucciones, así que para terminar el proceso, reiniciamos y ejecutamos:

$ sudo update-grub

Volvemos a reiniciar para aplicar los cambios y listo :)

Consejos al diseñar para móviles

La navegación en móviles tienen sus propios principios. Los de Hongkiat muestran 10 consejos, para una mejor usabilidad.

Decidir sobre la resolución de la pantalla:

Dividir Páginas Web en pequeñas porciones:

Simplificar el diseño:

Opción Para ver la página completa:

Colocación de navegación. Puede ser en cualquier posición, solo que debe ser intuitiva:

Utilizar enlaces de texto:

Hacer distinción en el enlace seleccionado:

Planificar los hipervínculos en cuanto a su profundidad en el sitio:

Reducir al usuario la necesidad de escribir texto, mejor utilizar métodos de navegación como menús desplegables en las diferentes opciones:

No usar “pop-ups” (ventanas que se abren, aparte de la principal) o refrescamiento automático.

Visto en hongkiat

ALERTA - Comic Sans No se usa!!

Why You Hate Comic Sans es una racionalización del odio existente hacia la tipografía Comics Sans, en forma de charla en vídeo y algunos apuntes acerca de las razones puramente técnicas tras el repelús que produce la abominable –aunque ubicua– tipografía.

(…) Llegó un punto a finales de los 90 en el que gracias a los Macintosh todo el mundo podía usar e imprimir con casi cualquier tipografía. Hacia finales de los 90 los tipógrafos nos dimos cuenta de que las palabras eran incapaces de describir la desgarradora experiencia de ver cómo se había abierto la caja de Pandora para revelar que el 95 por ciento de todo lo que se veía diseñado por el campus la universidad era feo: tipografías elegidas sin criterio, interletraje pobre, elección de colores descarriada… todo estaba terriblemente mal: letreros para guiar a la gente por el campus, carteles de fiestas toga y, sí: pósteres de gatitos perdidos (…) Pero todos quedamos cegados ante la increíble revolución que se estaba produciendo: nuestras abuelas podían componer e imprimir todos los pósteres de gatitos perdidos que quisieran (…)

• ¡Alerta, aberración! El trofeo de la Copa del Rey, con textos en Comic Sans
• ¡Dios mío, está lleno de Comic Sans!, ¡mis ojos, mis ojos!
• El tipo de letra más feo del mundo, ¡el horror!
• Microsiervos, ahora más cool, aquel divertido día de los inocentes
• Comic Sans dominará el mundo, ¡Lo predijo Nostradamus!
• Entra una Comic Sans en un bar…, clásico chiste corto

visto en: microsiervos

Abecedario Superheróico

Filtrar un array con jQuery

jQuery tiene la posibilidad de filtrar elementos de un array. Para ello contamos con la función .grep(). Comenzamos con un sencillo ejemplo:

1-Creamos un array con números del 1 al 10.

var a=[1,2,3,4,5,6,7,8,9,10];

Crearemos una función que devuelva true cuando cumpla la condición que queramos aplicar y false cuando no la cumpla. Siguiendo el ejemplo buscaremos los elementos mayores que 5:

function mayorQueCinco(elemento,indice){return (elemento <=5);}

A la función le pasamos dos parametros "elemento" que será el elemento del array evaluado y el "indice" indice del array que ocupa el elemento. Ahora aplicamos el método .grep(). Este método nos devuelve otro array con los elementos que cumplen el filtro. En el siguiente ejemplo reutilizaremos la variable. En cierto modo estaría mas optimizado.

var a=[1,2,3,4,5,6,7,8,9,10];

a= jQuery.grep(a,mayorQueCinco);

Echo esto solo quedaría visualizar la información del nuevo array:

$("#resultado").text(a.join(", "));

Copiar Base de datos de MySQL a MySQL

Si quereis copiar una base de datos de un servidor MySQL a otro servidor MySQL podeis hacerlo ejecutando la siguiente linea:

$ mysqldbcopy --source=login:pass@localhost:3306 --destination=login:pass@localhost:3306 dborigen:dbdestino

mysqldbcopy pertenece a las utilidades de la linea de comandos de MySQL Workbench 

ahorra tiempo de transferencia con el código 204 No Content

Cuando se hace una petición y se devuelve un 204, se acaba todo, porque básicamente cuando la petición vuelve no se manda “ningún contenido”. ¿Y para qué utilizar esto? Hay un caso en el que se ve todo muy claro.

Muchas veces los contadores de visitas o similares integran en el sitio un pequeño GIF de 1×1, habitualmente, al que se le mandan algunos parámetros. Esto básicamente se usa para recoger estadísticas. La imagen no es que sea una imagen, sino que suele ser algo “programado” que acaba devolviendo una imagen muy pequeña, de pocos bytes… pero ¿qué necesidad hay de devolver información si la imagen simplemente no se muestra?

http://www.ejemplo.com/nada.gif?usuario=10001&navegador=firefox

Esto en vez de devolver el “nada.gif” ¿por qué simplemente no devuelve nada y te ahorras el tiempo que se tarda en descargar información para otras cosas?

Se podría hacer algo como:

http://www.ejemplo.com/nada.php?usuario=10001&navegador=firefox

Y que este PHP tenga algo similar a:

    <?php
        /*
        [...]
        fwrite();
        [...]
        */
        header("HTTP/1.0 204 No Content");
    ?>

De esta forma, se conseguiría el mismo efecto y se ahorrarían unas décimas de segundo en tiempo de transferencia, a parte de la transferencia en sí.

(8 métodos de jQuery que deberías conocer) + 4 que quizá ya conocías

jQuery la librería de javascript mas usada. Tiene una multitud de métodos, efectos, animaciones... Me he topado con este post 8-jquery-methods-you-need-to-know en el que explica de forma breve 8 métodos interesantes que se debería conocer si vas a usar esta librería. Yo he incluido algunos mas que me parecen interesantes.

.data() info
Este no lo conocía y me ha parecido muy interesante. Os mostrare un ejemplo:

<div data-type="page" data-hidden="true" data-options='{"name":"John"}'></div>

$("div").data("role") === "page";
$("div").data("hidden") === true;
$("div").data("options").name === "John";

Otra forma de hacer lo mismo

$("div").data("role", "page");
$("div").data("hidden", "true");
$("div").data("role", {name: "John"});

De está forma nos permite almacenar información sobre los elementos de la página.

.stop() info

Con esto podemos llamar a un elemento que se está ejecutando una animación y pararlo. Pudiendo concatenar otra acción cuando este termine, como por ejemplo .fadeOut() vemos un ejemplo de ello:

$(this).find('img').stop(true, true).fadeOut();

.toggleClass() info

Añade o elimina la clase/s en el elemento con el que interactua (es pulsado). Un ejemplo:

$('#opcion').toggleClass('active');

podemos hacer lo mismo realizando este proceso:

if ($('#home').hasClass('active')) {
    $('#home').removeClass('active');
}
else {
    $('#home').addClass('active');
}

.delay(duración, [nombreCola]) info

Sirve para crear un intervalo de espera entre la ejecución de funciones.

$('#content').slideUp(300).delay(800).fadeIn(400);

.each() info

Recorre un objeto ejecutando la función en todos los elementos coincidentes.

Lista: <span>(pulsa para cambiar)</span>
    <ul>
        <li>Platanos</li>
        <li>Manzanas</li>

        <li>Naranjas</li>
    </ul>
    <script>
        $("span").click(function () {

            $("li").each(function(){
                $(this).toggleClass("example");
            });
        });
    </script>

.size() info
devuelve el numero de elementos del objeto.

var size1 = $("li").size();
var size2 = $("li").length;

.length hace el mismo efecto.

.closest() info

Obtiene un grupo de elementos que contenga el elemento padre más cercano que cumpla con el selector especificado, incluyendo al elemento inicial. Comienza comprobando primero si el elemento actual cumple con la selección especificada. Si es así devuelve ese elemento. En caso contrario continúa buscando en el elemento, padre a padre, hasta que encuentra un elemento que cumpla la condición dada. Si no lo encuentra, no devuelve nada.

$('p').find('span')

.position() info
Como su nombre indica obtiene las coordenadas del elemento.

    var p = $("p:first");
    var position = p.position();
    $("p:last").text( "left: " + position.left + ", top: " + position.top );

.noConflict() info
Con esto podemos editar la referencia del " $ "

var j = jQuery.noConflict();
// Ahora, en vez de $, usamos j.
j('#someDiv').hide();
// La siguiente linea referenciará a otra librería con la función $
$('someDiv').style.display = 'none';

.ready() info
Ejecuta la función cuando está listo el elemento indicado.

$(document).ready(function() {
    // ejecuta la función cuando el documento está cargado
});

otra versión mas optimizada.

$(function() {
    // ejecuta la función cuando el documento está cargado
});

.load() info

El evento load se lanza tan pronto el elemento al que hemos asociado el evento ha terminado de cargarse por completo. Este evento puede asociarse a cualquier tipo de elemento que tenga una URL, imágenes, iframes, hojas de estilo o javascripts...

Hay que tener especial cuidado con las imágenes, porque si la imagen la carga desde la caché en ocasiones 

no lanza el evento de cargado. Un ejemplo de este evento podría ser;

<img alt="Book" id="book" src="book.png" />

$('#book').load(function() {

    // Hace algo cuando termina de cargar la imagen por completo

});

.one() info

Es igual que bind, pero en este caso el evento sólo se ejecuta una vez. Por ejemplo, puede interesarnos que cuando pinchemos un botón se muestre un mensaje, pero que la segunda vez que se pinche ya no se muestre, en ese caso podríamos hacer,

$('#boton').one('click', function() {
    alert('Este mensaje se muestra sólo una vez');
});