Servicios para agregar imágenes temporales

¿Imágenes falsas? ¿Para qué? Son útiles a la hora de probar cosas, nos evitan tener que subir alguna o re-dimensionarlas y están siempre listas.

Hay muchos sitios que brindan ese servicio. fakeimg nos permite definir su tamaño (ancho y alto), el color de fondo y del texto así como su contenido. Son todas opciones que se agregan de manera sencilla:

<img src="http://fakeimg.pl/200/" /> será una imagen cuadrada de 200x200
<img src="http://fakeimg.pl/300x200/" /> será una imagen rectangular de 300x200
<img src="http://fakeimg.pl/300x200/ffff00/" /> será una imagen rectangular de 300x200 con fondo amarillo
<img src="http://fakeimg.pl/300x200/ffff00/000" /> será una imagen rectangular de 300x200 con fondo amarillo y texto en negro
<img src="http://fakeimg.pl/300x200/?text=Hola" /> así establecemos el texto a mostrar
<img src="http://fakeimg.pl/300x200/?text=Hola&font=museo" /> y de este modo podemos indicar una fuente par el texto (lobster, bebas, museo)

Pero hay más alternativas. Tanto Dummy Image como placehold son similares en cuanto a opciones:

<img src="http://placehold.it/300x200" />
<img src="http://dummyimage.com/300x200" />

PlaceKitten excepto que lo que nos mostrará son imágenes de gatos definiendo su ancho y alto:

<img src="http://placekitten.com/300/200" />

y para que nadie se queje, Placedog lo hará mostrando imágenes de perros; si usamos Placeape serán monos y Placebear nos dará osos:

<img src="http://placedog.com/300/200" />
<img src="http://placeape.com/300/200" />
<img src="http://placebear.com/400/200" />

Si no se quieren animales, los hambrientos pueden usar Bacon Mockup y mostrar imágenes de comida.

Si se quieren calaveras (hay para todos los gustos, se puede usar PlaceSkull:

<img src="http://baconmockup.com/300/200" />
<img src="http://placeskull.com/300/200/" />

Y si nada nos convence, está Lorempixel que genera imágenes aleatorias con opciones diversas:

<img src="http://lorempixel.com/300/200/" /> es una imagen de 300x200
<img src="http://lorempixel.com/g/300/200" /> es una imagen en tonos de gris
<img src="http://lorempixel.com/300/200/sports" /> muestra una imagen de cierta categoría (abstract, animals, city, food, night, life, fashion, people, nature, sports, technics, transport)

Hay muchas opciones más y el sitio posee una herramienta que nos permite generar el código.

REFERENCIAS:paulund.co.uk

DuckDuckGo es un buscador alternativo que se va difundiendo poco a poco y que rescata todo eso que tenía Google y ha abandonado desde que se coronó como rey del mundo: la simplicidad, la rapidez y una política de privacidad que implica no recopilar ni compartir información de los usuarios. Quien no lo use, debería probarlo y darle una oportunidad o tenerlo siempre a mano; algo que es bastante sencillo ya que dispone de extensiones para distintos navegadores.

Quien quiera, también puede agregarlo a su blog; para eso, basta abrir la página respectiva y completar los datos:

width: es el ancho de la caja (por defecto 408 pixeles)
Duck logo: nos permite ver (On) u ocultar (Off ) el logo
background color: es el color de fondo donde será agregado
site search: permite escribir la url del sitio donde se quiere buscar si es que deseamos que lo haga en nuestro blog
prefill: es el texto visible de la caja
autofocus: si es On, e cursor se posicionar automáticamente en el buscador apenas se abra la página

El resultado de todo eso puede previsualizarse al efectuar los cambios y nos darán un código simple que podemos copiar y pegar en cualquier elemento HTML, en una entrada o en una página estática; por ejemplo:

<iframe src="http://duckduckgo.com/search.html?width=200&site=http://vagabundia.blogspot.com/&prefill=buscar en DuckDuckGo&bgcolor=171E27" style="overflow:hidden;margin:0;padding:0;width:258px;height:40px;" frameborder="0"></iframe>

Cuando subimos un archivo a Google Drive que NO puede ser editado; por ejemplo, una imagen, un PDF, un video, etc; usar ese archivo en una web se hace engorroso ya que es difícil encontrar la dirección url o, simplemente, no existe y lo único que podemos hacer es enlazarla para que se vea o se descargue desde el mismo servicio.

Pero hay una solución; basta copiar la dirección que se nos muestra cuando visualizamos el archivo:

https://docs.google.com/file/d/0B2BzKCEbdpQcYVRYcjdkV3o1NHM/edit

y tomar nota de ese conjunto de letras y números estrafalarios que suele generar Google para todos sus productos y cambiar la dirección:

http://drive.google.com/uc?export=view&id=0B2BzKCEbdpQcYVRYcjdkV3o1NHM

Así que, en términos genéricos, debemos cambiar

https://docs.google.com/file/d/xxxxxxxxxxxxxxxxxxxxxxx/edit

con:

http://drive.google.com/uc?export=view&id=xxxxxxxxxxxxxxxxxxxxxxx

Por supuesto, esto funcionará sólo si la carpeta y los archivos son públicos, algo que debemos establecer con la opción Compartir.

Aunque comentan que esto sería válido con cualquier tipo de archivo, me temo que la realidad dice lo contrario; lo que sí puede funcionar es establecer la dirección url de descarga directa; el sistema es similar y este es un ejemplo concreto:

http://drive.google.com/uc?export=download&id=0B2BzKCEbdpQcX2g3T1RyN1RZZ00

REFERENCIAS:Google Operating System

Como en Blogger no podemos subir un mísero archivito, en un tiempo, cuando existían las Google Pages, las usábamos a destajo hasta que kaput porque "a los que saben" se les ocurrió crear Google Sites que no era lo mismo aunque ellos creían que si.

Nos quedamos colocados, mudando archivos de lado a lado, buscando alternativas, las encontramos, cada una con sus bemoles pero, acá seguimos.

Ahora, resulta que se les ha ocurrido que podemos usar Google Drive para guardar páginas web completas y, la verdad, yo ya no sé si creerles que esto durará pero, de todos modos, por ahora, ahí está la opción que, imagino, deberá usarse prudentemente.

El procedimiento es sencillo; entramos en Google Drive https://drive.google.com/ y creamos una carpeta nueva. Luego, con botón derecho, hacemos click en Compartir | Cambiar y marcamos que sea Publica:

Ahora, subimos nuestro archivo HTML a esa carpeta, lo editamos y, haciendo click en Vista Previa, copiamos la dirección url que nos muestra que será del tipo:

https://googledrive.com/host/xxxxxxxxxxxxx/nombre_archivo.html

Eso es todo, con esa dirección, podemos mostrarlo donde se nos ocurra, como en este ejemplo que lo abre en una ventana modal:

ver testgd.html

En este caso, el HTML no tiene nada especial, solo código normal, scripts internos y CSS pero, podemos ampliar las posibilidades y utilizar archivos externos que también alojamos en la misma carpeta y a los que accedemos desde el HTML, usando las direcciones url relativas.

Hasta ahí, es una forma sencilla de manejarse aunque no es cómodo que no sea posible crear o editar esos archivos desde el mismo Google Drive salvo que se agreguen aplicaciones externas como Drive Notepad que sólo funcionan en Chrome.

One div es un sitio donde podemos buscar y copiar el código necesario para utilizar íconos o símbolos creados exclusivamente con CSS; una técnica cuyo uso se va va extendiendo ya que tiene la ventaja de no utilizar imágenes y de ser flexibles porque podemos variar su tamaño con sencillez sin que se deformen.

Además, basta un poco de imaginación para aprovechar las distintas propiedades, cambiar colores, agregar animaciones o utilizar efectos aunque, claro está, como todas estas cosas, la compatibilidad con los distintos navegadores es una limitación importante pero, poco a poco, es algo que deberíamos dejar de lado y empezar a aceptar que esas limitaciones existirán siempre y que nada es universal excepto que 2+2=4.

Algunos ejemplos:

<style>
.mug_animate {
  box-shadow: 0 -3em 0 0 #0AF inset;
  height: 2.5em;
  position: relative;
  -moz-transition: all 1000ms linear 0s;
  -webkit-transition: all 1000ms linear 0s;
  -o-transition: all 1000ms linear 0s;
  -ms-transition: all 1000ms linear 0s;
  transition: all 1000ms linear 0s;
  width: 1.5em;
}
.mug_animate:after {
  border-color: #DDD transparent #DDD #DDD;
  border-image: none;
  border-radius: 0.75em 0 0 0.75em;
  border-style: solid none solid solid;
  border-width: 0.25em medium 0.25em 0.25em;
  content: "";
  height: 1.5em;
  left: -1em;
  position: absolute;
  top: 0.25em;
  width: 0.75em;
}
.mug_animate:before {
  border: 0.25em solid #DDD;
  border-radius: 0 0 0.2em 0.2em;
  content: "";
  height: 2.5em;
  left: -0.20em;
  position: absolute;
  top: -0.5em;
  width: 1.5em;
}
.mug_animate:hover {
  box-shadow: 0 0 0 0 #00F inset;
}
</style>

<div class="mug_animate"></div>

<style>
.fir {
  box-shadow: 0em 0.9em 0 -0.8em #4D4,0em 1em 0 -0.8em #4D4,0em 1.1em 0 -0.8em #4D4,0em 1.2em 0 -0.8em #4D4;
  border-bottom: 1.7em solid #4D4;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  font-size: 20px;
  height: 0em;
  position: relative;
  width: 0em;
}

.fir:before {
  border-bottom: 1em solid #4D4;
  border-left: 0.7em solid transparent;
  border-right: 0.7em solid transparent;
  content: '';
  display: block;
  height: 0em;
  left: -0.7em;
  position: absolute;
  top: -0.2em;
  width: 0em;
}

.fir::after {
  border-bottom: 0.7em solid #4D4;
  border-left: 0.5em solid transparent;
  border-right: 0.5em solid transparent;
  content: '';
  display: block;
  height: 0em;
  left: -0.5em;
  position: absolute;
  top: -0.5em;
  width: 0em;
}
</style>

<div class="fir"></div>

<style>
.pacman {
  background-image: -webkit-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -moz-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -o-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -ms-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  border-radius: 3em 3em 0 0;
  height: 1.5em;
  position: relative;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 3em;
}

.pacman:after {
  background-color: #EE0;
  border-radius: 0 0 3em 0;
  content: '';
  height: 1.5em;
  left: 0em;
  position: absolute;
  top: 1.45em;
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 1.5em;
}
</style>

<div class="pacman"></div>