REFERENCIAS:Poca Tinta
0
Wallpapers (IPhone 3)
| Click en la imagen para previsualizar un modelo reducido. | ||
 |  |  |
 |  |  |
 |  |  |
Descargar el archivo ZIP que contiene las imágenes | ||
REFERENCIAS:extraverage.net
0
Sencillo ¿verdad? ahora nadie tiene excusa para decir que no sabe realizar una captura.
Creando capturas
Dicen que una imagen vale más que mil palabras y en ocasiones es cierto.Una prueba de ello son los tutoriales presentados con imágenes, resulta más sencillo entender algo a la vez que se hace más ameno.
Las imágenes de los tutoriales suelen ser capturas mostradas de forma ordenada siguiendo las explicaciones, un tutorial con capturas resulta bastante más laborioso sin embargo el resultado es más satisfactorio.
En ocasiones queremos mostrar algo que nos ha llamado la atención, o nos da la sensación que al expresarnos nuestro interlocutor no termina de entendernos, no digo que no seamos claros, pero... ¿han pensado que con una captura no serían necesarias tantas palabras? y lo que es mejor, se captaría de inmediato aquello que tratamos de explicar.
Si, ya sé que todos andamos justos de tiempo ¡yo también! pero podemos intentarlo, dejemos atrás la pereza, quizás no salga una obra de arte pero tampoco es necesario.
Capturar una imagen de lo que vemos en pantalla es tan sencillo como presionar "Imprimir pantalla" (en algunos teclados "Impr Pant" )
Podemos realizar dos clases de capturas: De pantalla completa o sólo la ventana activa.Para realizar una captura de ventana activa presionamos ALT+Imprimir pantalla
Si presionamos la tecla Impr Pant realizamos una captura de pantalla completa.
Al utilizar capturas puede que nos veamos en la necesidad de resaltar algo, modificar el tamaño, recortar... con cualquier programa online podemos hacerlo, si utilizamos Windows disponemos del Paint, es muy básico pero nos puede sacar de más de un apuro.
Dependiendo el sistema podemos localizarlo en Inicio/Programas/Accesorios y a continuación Paint una vez lo abrimos hacemos click en Edición y luego en Pegar, nos aparecerá la última captura.
En Edición / Pegar muestra la última captura
Podemos cortar, pintar, añadir texto, modificar tamaño... herramientas muy sencillas y suficientes para comenzar.
En los comentarios Kenneth Jack aporta otra sugerencia, se trata de capturar las imágenes sin el borde superior/inferior que añade marcadores, hora, barra de navegación...
Presionamos la tecla F11 y nos mostrará la pantalla completa. De esa forma ya podemos hacer la captura y nos la mostrará tal y como la vemos en ese momento.
Eulalia también ha comentado para proporcionar un enlace a su blog donde entre otras cosas habla de Paint como aprovecharlo
Eulalia también ha comentado para proporcionar un enlace a su blog donde entre otras cosas habla de Paint como aprovecharlo
A partir de ahí todo es cuestión de aprender jugando porque en realidad es como mejor se aprende, si nos queda alguna duda podemos resolverla haciendo click en Ayuda donde encontraremos una descripción de cada herramienta y forma de utilizarla.
Sencillo ¿verdad? ahora nadie tiene excusa para decir que no sabe realizar una captura.
0
Quitter: Un singular cliente para Twitter
¿En que categoría debería ir esto? ¿Sólo es una curiosidad? Bueno, quién sabe. Son esas cosas "nuevas" con gustito a "viejas" y es un descubrimiento de CaTa llamado Quitter.
¿Que es Quitter? Pués un cliente para Twitter desarrollado por Duane Roelands que funciona como si fuera el paleolítico D.O.S.
Una vez que lo descargamos y descomprimimos, sólo nos encontraremos con un archivo que ni siquiera se instala. Lo ejecutamos, se comunica con Twitter para autorizar el login, nos dan un PIN (una serie de números) para que entremos y listo, ya está funcionando y sólo hay que teclear, teclear y teclear.
¿Que es Quitter? Pués un cliente para Twitter desarrollado por Duane Roelands que funciona como si fuera el paleolítico D.O.S.
Una vez que lo descargamos y descomprimimos, sólo nos encontraremos con un archivo que ni siquiera se instala. Lo ejecutamos, se comunica con Twitter para autorizar el login, nos dan un PIN (una serie de números) para que entremos y listo, ya está funcionando y sólo hay que teclear, teclear y teclear.
- [P] para enviar un tweet
- [R] para responder
- [T] para hacer un retweet
- [D] para mensajes privados
- [C] para configarlo
- [Q] para salir
- [?] para leer la ayuda
Y si se requiere algo más de información basta acudir al HELP del sitio ... no hay mucha pero es suficiente.
El proyecto es open source así que también es posible descargar el código fuente que está creado con mi bieneamado Visual Basic.
El proyecto es open source así que también es posible descargar el código fuente que está creado con mi bieneamado Visual Basic.
0
La magia de la publicidad
de por qué usar bicicletas ...
de por qué usar condones ...
de por qué los monos son más inteligentes ...
0
[2] Añadimos a continuación el código html para construir el slide y el script para conseguir el efecto, que incluiremos como ya dije antes, en un gadget html o en una entrada.
Notas y modificaciones:
Ejemplo:
¡Gracias por la paciencia Unperro!
Consejo:
Rotando imágenes con Scriptaculous
Siguiendo con la serie de entradas sobre como usar la librería de script Scriptaculous para añadir distintos efectos en nuestro blog, vamos a ver en esta ocasión como construir un slide de imágenes o banners que podremos colocar en un gadget e incluso en una entrada.
[1] Para empezar tenemos que incluir el código necesario para el uso de cualquier efecto con Scriptaculous (como ya vimos en la primera entrada sobre Scriptaculous, este código solo es necesario incluirlo una vez en la plantilla) así que, si ya lo tenemos incluido nos saltamos este paso.
Si es la primera vez que vamos a usar un efecto mediante Scriptaculous, añadimos este código antes de la etiqueta </head> de nuestra plantilla (Edición HTML):
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
[2] Añadimos a continuación el código html para construir el slide y el script para conseguir el efecto, que incluiremos como ya dije antes, en un gadget html o en una entrada.
<div style="height: 200px; text-align: center; width: 100%;">
<div class="slide" id="slideshow1">
<div>
<img src="URL_DE_LA_IMAGEN" /></div>
</div>
<div class="slide" id="slideshow2" style="display: none;">
<div>
<img src="URL_DE_LA_IMAGEN" /></div>
</div>
<div class="slide" id="slideshow3" style="display: none;">
<div>
<img src="URL_DE_LA_IMAGEN" /></div>
</div>
</div>
<script type="text/javascript">
start_slideshow(1, 3, 2000);
function start_slideshow(start_frame, end_frame, delay) {
setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
}
function switch_slides(frame, start_frame, end_frame, delay) {
return (function() {
Effect.Fade('slideshow' + frame);
if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
setTimeout("Effect.Appear('slideshow" + frame + "');", 850);
setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 850);
})
}
</script>
Notas y modificaciones:
Lo más apropiado para la correcta visualización del slide, es usar imágenes con la misma medida.
La primera línea del código es la que controla el <div> donde van incluidas las imágenes, y es ahí donde podemos controlar una serie de parámetros:
height: 200px; La altura del div. Sería apropiado colocar un poco más de lo que midan de alto las imágenes.
text-align: center; El contenedor de las imágenes estará centrado respecto al lugar donde se coloca, por tanto las imágenes del slide también.
width: 100%; Es el ancho del <div> que contiene el slide. En este caso he puesto 100% para que se adapte al espacio total de donde ha sido colocado. Puede variarse el porcentaje o colocar en pixeles un poco más de la medida de las imágenes.
En el ejemplo he usado 3 imágenes, pero podemos añadir más siempre antes del último </div> del código, repitiendo para cada una estas líneas de código:
<div class="slide" id="slideshow4" style="display: none;">
<div>
<img src="URL_DE_LA_IMAGEN" /></div>
</div>
Cada vez que añadamos una nueva imagen, tenemos que cambiar la id del código que la muestra, es decir, en el ejemplo la última imagen tiene como id "slideshow3", así que la nueva que añadamos a continuación tendrá que llamarse "slideshow4".
En el script que va debajo del código html, cambiaremos el 3 por el número de imágenes totales que mostraremos en el slide, lo haremos en esta línea:
start_slideshow(1, 3, 2000);
En el código no he añadido enlaces a las imágenes, pero pueden añadirse de la misma forma que hacemos habitualmente:
<a href="Url_del_enlace"><img src="Url_de_la_imagen"/></a>
La primera línea del código es la que controla el <div> donde van incluidas las imágenes, y es ahí donde podemos controlar una serie de parámetros:
height: 200px; La altura del div. Sería apropiado colocar un poco más de lo que midan de alto las imágenes.
text-align: center; El contenedor de las imágenes estará centrado respecto al lugar donde se coloca, por tanto las imágenes del slide también.
width: 100%; Es el ancho del <div> que contiene el slide. En este caso he puesto 100% para que se adapte al espacio total de donde ha sido colocado. Puede variarse el porcentaje o colocar en pixeles un poco más de la medida de las imágenes.
En el ejemplo he usado 3 imágenes, pero podemos añadir más siempre antes del último </div> del código, repitiendo para cada una estas líneas de código:
<div class="slide" id="slideshow4" style="display: none;">
<div>
<img src="URL_DE_LA_IMAGEN" /></div>
</div>
Cada vez que añadamos una nueva imagen, tenemos que cambiar la id del código que la muestra, es decir, en el ejemplo la última imagen tiene como id "slideshow3", así que la nueva que añadamos a continuación tendrá que llamarse "slideshow4".
En el script que va debajo del código html, cambiaremos el 3 por el número de imágenes totales que mostraremos en el slide, lo haremos en esta línea:
start_slideshow(1, 3, 2000);
En el código no he añadido enlaces a las imágenes, pero pueden añadirse de la misma forma que hacemos habitualmente:
<a href="Url_del_enlace"><img src="Url_de_la_imagen"/></a>
Ejemplo:
¡Gracias por la paciencia Unperro!
Consejo:
Para aquellos que usáis JQuery en lugar de la librería Scriptaculous, en el blog BanakaBanaka encontraréis como hacer algo parecido en la entrada Imágenes rotantes con JQuery.
0
Crear una barra de herramientas para el footer (3)
Terminemos con la barra en el footer y empecemos a agregar el contenido de los elementos ocultos. Teníamos tres cosas que mostrar usando los botones Feedburner, Twitter y Facebook.
Como dije, puede ser cualquier cosa y, en estos ejemplos, copié el formulario de suscripciones en uno, coloqué el script para conectarse con Twitter en otro y puse una imagen en el tercero.
En todos los casos, lo hice exactamente igual que lo haría si tuviera que agregarlos en la sidebar o en cualquier otra parte del blog.
Terminado eso, volvemos a la edición HTML de la plantilla y agregamos unas definiciones CSS que dimensionarán esos elementos y los ocultarán:
En todos los casos, lo hice exactamente igual que lo haría si tuviera que agregarlos en la sidebar o en cualquier otra parte del blog.
Terminado eso, volvemos a la edición HTML de la plantilla y agregamos unas definiciones CSS que dimensionarán esos elementos y los ocultarán:
/* el contenedor Twitter */
#HTML7 {display: none; width: 400px;}
/* el contenedor Feedburner */
#HTML8 {display: none; width: 240px;}
/* el contenedor Facebook */
#HTML9 {display: none; width: 260px;}
Como el estilo por defecto será "ocultos", si fuéramos a la solapa Elementos de la página no los veríamos así que no podríamos editarlos; para que esto no ocurra, es decir, para que esten ocultos en el blog pero visibles en esa ventana de edición, agregamos esto, también en la parte de estilo:
body#layout #footer-tools #HTML7 {display: block;}
body#layout #footer-tools #HTML8 {display: block;}
body#layout #footer-tools #HTML9 {display: block;}Ahora, haciendo click en cada ícono, se mostrará ese contenido y volviendo a hacer click, se ocultará tal como podemos verlo en este DEMO online.
El script que pusimos al inicio es el que controla eso y consigue que sólo se muestre uno por vez, permutando la propiedad display.
No es necesario que todos los elementos se oculten y sean mostrados mediante íconos, también podríamos agregar accesos a gadgets que se ejecutaran directamente en la barra. Agreguemos dos más: un buscador y un ícono para abrir un formulario de contacto.
El primero, será un elemento Cuadro de búsqueda (id = CustomSearch1) y el segundo, otro elemento HTML (id = HTML2) que dependerá del formulario que usemos.
Luego, otra vez en la plantilla seguimos agregando CSS para esos elementos:
El script que pusimos al inicio es el que controla eso y consigue que sólo se muestre uno por vez, permutando la propiedad display.
No es necesario que todos los elementos se oculten y sean mostrados mediante íconos, también podríamos agregar accesos a gadgets que se ejecutaran directamente en la barra. Agreguemos dos más: un buscador y un ícono para abrir un formulario de contacto.
El primero, será un elemento Cuadro de búsqueda (id = CustomSearch1) y el segundo, otro elemento HTML (id = HTML2) que dependerá del formulario que usemos.
Luego, otra vez en la plantilla seguimos agregando CSS para esos elementos:
#CustomSearch1 {
background: transparent url(URL_imagen) no-repeat left top;
height: 35px !important;
padding: 15px 0 0 60px;
width: 180px;
}
/* y algún efecto extra sobre los íconos */
#contacto, #feedburner, #twitter, #facebook {opacity: .8; filter: alpha(opacity=80); }
#contacto:hover, #feedburner:hover, #twitter:hover, #facebook:hover {opacity: 1; filter: alpha(opacity=100);}Otra vez, si es necesario, volvemos a cambiar el ancho de #footertools-barra-inner (ahora requiere 590 pixeles) ... veremos esto.
Y así podríamos seguir hasta el infinito, agregando cosas y haciendo que se muestren en la barra de manera directa o bien colocando enlaces para que se abran en ese DIV superior que permanece oculto hasta que lo necesitamos.
El proceso será siempre el mismo. Si se trata de íconos que abren ventanas modales:
El resultado final es el de este DEMO donde los contenidos son sólo simulaciones o bien copias de distintos gadgets de este mismo blog.
Y así podríamos seguir hasta el infinito, agregando cosas y haciendo que se muestren en la barra de manera directa o bien colocando enlaces para que se abran en ese DIV superior que permanece oculto hasta que lo necesitamos.
El proceso será siempre el mismo. Si se trata de íconos que abren ventanas modales:
- agregamos un elemento HTML en la barra inferior
- agregamos un elemento cualquiera en la barra superior y le ponemos el contenido
- tomamos nota del ID que se muestra en Edición HTML
- colocamos las propiedades necesarias (fundamentalemente su ancho)
- volvemos a editar el ícono y usamos el ID del elemento oculto para agregar la imagen y el enlace que ejectua el script
- agregamos ese elemento en la barra inferior
- colocamos las propiedades necesarias en Edición HTML
El resultado final es el de este DEMO donde los contenidos son sólo simulaciones o bien copias de distintos gadgets de este mismo blog.
Suscribirse a:
Entradas (Atom)