Wallpapers » corazones

REFERENCIA y DESCARGABlogtecnia

PICandASK

Si esto aparece acá es simplemente porque me divirtió hacerlo, porque me gusta y porque los beta-testers presionan aunque, en realidad, no sepa ni por donde empezar. Me falta un buen gerente de ventas

PICandASK en un juego o algo parecido a un juego. Su primera versión fue realizada en una vieja Commodre 64 , la segunda en una 286, la tercera en VisualBasic y esta última es la cool, la 2.0 aunque para ser absolutamente cool debería ser PICandASK Beta o algo por el estilo

Por ahora, consta de 70 niveles aunque la idea es que se vayan agregando de manera sistemática de tal forma de no tener fin. Para superar cada nivel, solo es necesario adivinar, deducir o imaginar una palabra; un palabra simple, real o no y para eso hay una serie de imágenes fijas o interactivas, sonidos y animaciones. Las respuestas son "lógicas", absurdamente lógicas, pero ese es un detalle.

El juego, obviamente, es gratuito y puede jugarse de manera anónima o registrándose con un nombre cualquiera. El registro tiene la ventaja de poder continuar en cualquier momento desde donde se dejó; por el contrario, los jugadores anónimos siempre deben empezar desde el nivel 1.

Los usuarios de Twitter pueden registrarse utilizando su cuenta y realizar algunas acciones tales como enviar tweets o leer su timeline desde el juego mismo. La cuenta del juego también está abierta para recibir solicitudes de ayuda o despejar dudas.

En este caso, el registro se hace via OAuth de manera segura y es Twitter mismo quien autentifica a los usuarios por lo tanto, el sitio en si mismo no guarda información ni requiere de contraseñas.

Y bueno, para tener una idea del asunto hay una FAQ que puede consultarse:

Lo que falta ...

... es lo que sobra.

Y ya con esto termina la auto-promo.

Con un agradecimiento especial para Nico por tantas ideas locas.

El nuevo pacto educativo

Maite me pasaba el otro día un enlace que habla del nuevo pacto educativo. En ese nuevo pacto no se hace alusión a los niños con necesidades educativas especiales, visto así las familias con niños que precisan necesidades educativas especiales se preguntan ¿qué obtendrán cuando no se pueda exigir lo que les corresponde porque no lo contempla la ley? la pregunta es lógica y la incertidumbre mucho más por eso están pidiendo firmas y enviando cartas a nivel individual como ciudadanos a una serie de personas cuyos cargos deben responder ante esta situación.

• Para colaborar con vuestra firma podéis hacerlo desde AQUÍ  leer atentamente la carta donde obtendréis  amplia información .

• Si deseáis colaborar enviando un email podéis hacerlo a través del siguiente blog donde tenéis toda la información para poder ayudar: Pacto educativo para todos.

• También podéis sumaros al grupo de Facebook "Inclusión del Pacto Educativo de Estado".

REFERENCIA:Maite - Hasta la luna ida y vuel...TA

Marcos para imágenes con Clip Your Photos

Las aplicaciones online lo ponen todo tan fácil que es imposible resistirse, lo malo viene cuando esa herramienta la utilizamos con frecuencia y un buen día desaparece. Nos quedamos con cara de bobo y buscamos desesperadamente otro aplicación similar aunque no siempre hay suerte.

Mientras eso no ocurra con Clip Your Photos tenemos la posibilidad de añadir marcos a nuestras imágenes escogiendo entre 13 modelos distintos así como escoger el color del marco desde la paleta de colores.

REFERENCIA:MamaNunes

Roundabout con JQuery

Roundabout es un script para JQuery que permite crear listas interactivas.

Podemos usarlo tanto para textos como para imágenes. Aún más, en la página del desarrollador hay una serie de ejemplos más sofisticados, un reloj o una pequeña animación.

Lo elemental es simple; basta tener la librería de JQuery, descargar el script roundabout-1.0.min y poner ambos antesde de </head>, por ejemplo, así:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
&lgt;script type="text/javascript" src="URL_jquery.roundabout.1.0.min.js"></script>

Debajo, un poco de CSS:

<style type='text/css'>
  .roundabout-holder { /* es el rectangulo dentro el cual se moveran */
    height: 5em;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  .roundabout-moveable-item { /* cada uno de los items a mover */
    background-color: #ABC;
    border: 2px solid #345;
    color: #FFF;
    cursor: pointer;
    height: 4em;
    text-align: center;
    width: 4em;
  }
  .roundabout-in-focus {
    cursor: auto;
  }
</style>

Faltaría el HTML que ponemos donde nos guste y que sólo es una lista con un ID único:

<ul id="nombreExclusivo">
  <li> ... el contenido ...</li>
  <li> ... el contenido ...</li>
  <li> ... el contenido ...</li>
</ul>

Lo ponemos a funcionar llamando a la función:

<script type="text/javascript">
// <![CDATA[
  $(document).ready(function() {
    $('ul#nombreExclusivo').roundabout();
  });
// ]]>
</script>

Y como podemos tener varios en una misma página, como cada uno tiene un nombre diferente, basta agregarlos; por ejemplo, así:

$(document).ready(function() {
  $('ul#unNombre').roundabout();
  $('ul#otroNombre').roundabout();
  $('ul#ultimoNombre').roundabout();
});

El script tiene muchas alternativas para ser personalizarlo y acepta una serie de técnicas avanzadas que pueden ser vistas en la página del desarrolaldor o bien en una página con demos.

Queridos Reyes Magos...

Alguna vez me entregaron los regalos personalmente, recordaba su voz grave preguntándome si había sido buena y yo, sin poder articular palabra asentía con la cabeza.

Desde mi altura sentía la sensación de tener a mi lado a las personas más poderosas del mundo, cuando me sentaba sobre su pierna para hacernos una fotografía era mucho peor porque además de muda mi cuerpo se paralizaba hasta tal punto de no poder gesticular, con el tiempo entendí por qué esas fotos causaban tanta risa, mis ojos como platos lo decían todo.

Esa sensación de mariposas en el estómago se repetía cada noche del 5 de enero. Quería verlos pero no quería verlos, sus figuras majestuosas imponían tanto que prefería imaginar.

Esa cita se fue espaciando conforme fui creciendo, era tanto trabajo que tenían que hacer en una sola noche que no podían perder tiempo para fotografías, de todas formas nunca se olvidaron de la dirección y cada año pasaban por casa.

Mi madre decía que era de mala educación hacer visitas a las hora de la comida o la cena, pero curiosamente los Reyes Magos siempre llegaban a casa cuando yo estaba cenando, como no tenían otro momento su inoportuna llegada era disculpada o al menos nadie hacía referencia a ese detalle. Además, su visita era muy rápida, tan rápida que no daba tiempo a reaccionar.

Llamaban fuertemente a la puerta nunca usaban el timbre, se oía  murmullo de voces, pasos y más pasos de un sitio a otro, menos mal que en esos momentos coincidía que mi abuela siempre estaba a mi lado, llevaba su dedo a los labios en señal de silencio y las dos nos quedábamos muy quietas intentando oír algo más que ruidos y pasos.

Inmediatamente mi madre llegaba llamándome y yo salía corriendo, cuando llegaba mi padre siempre estaba junto a la puerta mirando hacia la oscuridad de la calle agitando su mano despidiéndolos "Casi los ves pero tenían mucha prisa porque han recibido muchas cartas"

Parece que fue ayer y sin embargo llegó el día que fui yo la que abría la puerta y recibía a los Reyes Magos,  los camellos se tomaban la leche y la hierba que entre risas y nervios ellos había preparado por la tarde, curiosamente llegaban corriendo en el mismo momento que el padre los despedía agitando la mano deseándoles un buen viaje.

He visto en sus ojos la misma expresión que los míos en aquellas fotografías, he vivido el momento con la misma ilusión que ellos deleitándome en cada detalle, como hacía mi madre.

Y algún día, espero ser yo la que lleve el dedo a los labios y cómplice de ese momento mágico.

"Que lo pasen lindo y disfruten el momento"

Sombras nada más ... entre Firefox e IE

Lentamente, los navegadores van incorporando opciones de diseño aunque, claro está, cada uno lo hace a su modo y con sus propia sintaxis; pequeño detalle que ... nos vuelve locos.

Las sombras son una de esas opciones y ni la w3.org tiene claro que hacer con ellas y ha sido removida temporalmente de las especificaciones del futuro CSS3. Se soponía que uno podría aplicarlas de manera similar a esto:

box-shadow: 5px 5px 5px #AABBCC;

Pero, pese a que box-shadow aún no funciona, algunos navegadores siguen teniendo la posibilidad de agregar sombras, no solo a los textos usando la propiedad text-shadow, sino también a bloques, es decir, a etiquetas como DIV, P o incluso IMG y  si bien se recomienda que esos bloques estén dimensionados con width o height, sólo es necesario en versiones de Internet Explorer anteriores a la 8.

Lo confuso es que cada navegador tiene su propio juego de instrucciones excepto Opera donde no está implementado. Por ejemplo, todas estas declaraciones deberían generar el mismo resultado:

en Firefox 3.5 en adelante (ver detalles):

-moz-box-shadow: 5px 5px 5px #ABC;

en los que usan WebKit como Chrome y Safari (ver detalles):

-webkit-box-shadow: 5px 5px 5px #ABC;

en Internet Explorer 8 (ver detalles):

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)";

en Internet Explorer en general (ver detalles):

filter: progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5);

Este es un texto dentro de un DIV

Bueno, eso del mismo resultado es un decir porque en IE las sombras se muestran "duras" más estáticas pero, algo es algo.

Para aplicar el efecto, he declarado una clase y la he agregado a un DIV:

<style>
.sombra {
  /* propiedades normales */
  -moz-border-radius: 10px;
  background-color: #456;
  color: #DEF;
  font-size: 24px;
  height: 30px;
  margin: 20px auto;
  padding: 10px;
  text-align: center;
  width: 400px;
  /* propiedades de la sombra */
  -moz-box-shadow: 5px 5px 5px #ABC;
  -webkit-box-shadow: 5px 5px 5px #ABC;
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)";
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5);
}
</style>

<div class="sombra"> Este es un texto dentro de un DIV </div>

De manera similar, prodría aplicarse a un elemento más complejo:

Esta es una imagen dentro de un DIV

La sintaxis para Firefox y todos los navegadores basados en Gecko es la siguiente (los que usan WebKit son similares, sólo cambia el nombre de la propiedad):

-moz-box-shadow: offsetX offsetY blurRadius spreadRadius colorRGB;

offsetX offsetY indican la distancia horizontal y vertical del comienzo de la sombra; valores positivos colocan la sombra debajo; valores negativos, colocan la sombra arriba:

-moz-box-shadow y -webkit-box-shadow
Este es un texto dentro de un DIV	Este es un texto dentro de un DIV	Este es un texto dentro de un DIV

blurRadius indica el efecto blur o esfumado, cuanto más alto sea, más se esfuma y, por defecto es 0:

blurRadius 1	blurRadius 10	blurRadius 50
Este es un texto dentro de un DIV	Este es un texto dentro de un DIV	Este es un texto dentro de un DIV

spreadRadius es el tamaño de esa sombra, su ancho y su alto; un valor de 0 hace que sea tan grande como el elemento:

spreadRadius 5	spreadRadius 10	spreadRadius 20
Este es un texto dentro de un DIV	Este es un texto dentro de un DIV	Este es un texto dentro de un DIV

Hay un dato extra que podemos incluir: la palabra inset que hará que la sombra, en lugar de estar afuera, esté adentro. Un ejemplo:

-moz-box-shadow: -110px 2px 30px 1px #AABBCC inset;

Este es un texto dentro de un DIV

Para tener esa sombra en ambos ángulos, agregamos otra definición, separándola con una coma. De este modo:

-moz-box-shadow: 5px 5px 5px #ABC, -5px -5px 5px #ABC;

Este es un texto dentro de un DIV

La propiedad puede ser combinada con cualquier otra (bordes, fondos, curvas) y generar cualquier tipo de efecto extraño:

-moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;

Este es un texto dentro de un DIV

En Internet Explorer lo que se usa es uno de los tantos filtros disponibles, la propiedad básica es filter aunque en IE8 se habla de -ms-filter, en realidad, ambas son la misma; la única diferencia es que en un caso, los valores se colocan entre comillas y en el otro, no:

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(propiedades)"; 
filter: progid:DXImageTransform.Microsoft.Shadow(propiedades);

Cada una de esas propiedades se separa con una coma y hay disponibles cuatro:

color indica el color de la sombra en formato RGB
direction establece la direccion (un ángulo) de la sombra y es un valor en grados (por defecto 225)
enabled puede ser false o true y habilita o deshabilita la sombra
strength es el tamaño de la sombra, cuánto se extenderá y su valor máximo es 255

filter: sólo en Internet Explorer
Este es un texto dentro de un DIV	Este es un texto dentro de un DIV	Este es un texto dentro de un DIV

Las sombras pueden agregarse y quitarse a voluntad, por eso podríamos crear alguna clase de efecto hover. Las quitamos con:

-moz-box-shadow:  none;
-webkit-box-shadow:  none; 
filter: progid:DXImageTransform.Microsoft.Shadow(enabled=false);

Al colocar el cursor encima, se mostrará una sombra ...

<style>
  .sombra {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    filter: progid:DXImageTransform.Microsoft.Shadow(enabled=false);
  }
  .sombra:hover {
    -moz-box-shadow: 5px 5px 5px #AABBCC;
    -webkit-box-shadow: 5px 5px 5px #AABBCC;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5,enabled=true);
}
</style>

<div class="sombra"> ............... </div>