Sin más preámbulo, pasamos a ver como fucking cambiar la contraseña del Usuario System de Oracle.

Primero abrimos la línea de Comandos SQL. (Y si andan algo despistados, lo pueden encontrar en Todos Los Programas -> Base de Datos Oracle -> Ejecutar línea de Comandos SQL).

Luego de eso, se tienen que conectar para poder realizar la última operación. (Sí ya casi terminamos)

conn/ AS sysdba

Y finalmente cambian la clave del usuario System.

ALTER USER system IDENTIFIED BY "tunuevaclave";

Y les saldrá "Usuario Modificado". Bueno eso es todo, ahora si me voy a practicar!

Related posts:

1. Como Instalar LAMP en Ubuntu
2. Como Instalar La Ultima Version de Firefox en Ubuntu
3. Como cambiar el icono del Finder en Mac OS X Lion

Como saben siempre que queremos descargar de Rapidshare y Megaupload, debemos esperar un tiempo (para los usuarios no premium) que se muestra en cuenta regresiva.

Pero a quién le gusta esperar todo ese tiempo, y lo peor es que a veces nos olvidamos y dejamos avanzando al contador, y cuando regresamos no podemos descargar, porque se venció el tiempo y debemos actualizar la página para volver a esperar.

Para los usuarios de Google Chrome ya hay solución para eso. Solo debes instalar dos extensiones: RapidShare DownloadHelper y MegaUpload DownloadHelper.

Una vez instalado ya no te debes preocupar por esperar el tiempo del contador, las extensiones detectarán el tiempo que falta, y cuando el contador llegue a cero, las descargas comenzarán automáticamente.

Enlace: Descargar RapidShare DownloadHelper y Descargar MegaUpload DownloadHelper

Related posts:

1. Instalar extensiones no compatibles con firefox 3.5
2. Como Probar las novedades de Google Doc
3. Descargar Google Chrome 3 Final

7 Taskbar Thumbnail Customizer, es una pequeña aplicación portable (no necesita instalarse), con la que podemos redimensionar los Thumbnail (miniaturas) del Taskbar (Barra de Tareas) de Windows 7.

Por defecto el valor del tamaño de las miniaturas es de 200, pero podemos cambiarlo en "Maximun Size". Además esta aplicación nos permite cambiar el espacio y los márgenes entre el Taskbar y las miniaturas, así como el tiempo que se demora en mostrar la miniatura.

Antes de redimensionar los Thumbnail del Taskbar

Después de redimensionar los Thumbnail del Taskbar

Enlace: 7 Taskbar Thumbnail Customizer

Related posts:

1. Miniaturas con jQuery
2. Como cambiar el icono del Finder en Mac OS X Lion
3. Como descargar Fotos de Flickr

Hay veces que descargamos CD's o mp3 sueltos de algún lugar de internet (mp3's de dudosa procedencia xD). Y cuando lo reproducimos con algún reproductor, no sale la carátula o el cover, o tal vez está con la carátula equivocada.

Pero eso lo podemos solucionar con Mp3tag, que es una aplicación donde podemos cambiar o agregar las carátulas de una canción o varias canciones a la vez.

Lo único que deben hacer es abrir el programa y dar click en Archivo -> Añadir Carpeta. Luego seleccionan la canción que quieran agregar la carátula. Y en el lado inferior izquierdo del programa, hay un cuadrado blanco, el cual deben dar click derecho y click en "Añadir Carátula".

De la misma manera pueden quitar la carátula, extraer la carátula, cortar la carátula, etc.

Además Mp3tag, es un programa completo en lo que es, la edición de tags de los mp3 como título, artista, álbum, año, etc.

Enlace: Descargar Mp3Tag

Related posts:

1. Como Excluir Taxonomias en los Posts
2. Como crear DVD con cualquier video
3. Como Instalar La Ultima Version de Firefox en Ubuntu

1) XHTML

Comenzamos creando la base para aplicar el efecto de miniaturas. Solo creamos una simple lista, con algunas imágenes.

<ul class="mini"> 
	<li><img src="mini1.jpg" alt="" /></li> 
	<li><img src="mini2.jpg" alt="" /></li> 
	<li><img src="mini3.jpg" alt="" /></li> 
	<li><img src="mini4.jpg" alt="" /></li> 
	<li><img src="mini5.jpg" alt="" /></li> 
	<li><img src="mini6.jpg" alt="" /></li> 
</ul>

2) CSS

Una vez que acabamos con la base, pasamos a aplicarle los estilos. Debemos enfocarnos en la posición de las imágenes y de las listas, ya que estas serán la base para aplicarle los efectos con jQuery.

ul.mini {
	height:140px; width:840px; /* Definimos el Tamaño de nuestra lista */
	margin:10px; /* mantener espaciado de los demás elementos de tu web */
	padding:30px; /* para no tener problema al momento de agrandar la imagen de la miniatura */
	list-style: none; /* Importante! para que no salgan los estilos de las listas */
}
ul.mini li {
	margin: 5px;
	float: left;/* alineación de la lista */
	position: relative; /* importante para aplicar el centrado vertical */
	width: 130px;height: 130px; /* Definimos el tamaño de las miniaturas de la lista */
}
ul.mini li img {
	width: 120px; height: 120px; /* tamaño las imagenes en miniatura */
	border: 1px solid #ccc; /* borde de las imágenes */
	padding: 5px; /* teníamos 120px de Ancho/Alto + 10px Ancho/Alto(padding) da los 130px del tamaño de la lista*/
	background: #f0f0f0;
	position: absolute;/* importante definir la posición absoluta */
	left: 0; top: 0;/* posición por defecto */
	-ms-interpolation-mode: bicubic; /* hack IE para la la escala bicúbica */
}
ul.mini li img.hover {
	background:url(miniatura.png) no-repeat center center; /* Un PNG de fondo que le da un efecto de sombra */
	border: none;
}

3) jQuery

El efecto se basa principalmente en cambiar la posición y aumentar el tamaño de la lista a un tamaño mayor (de preferencia al tamaño de la imágen), pues así cuando pasamos encima de las imágenes, éstas se agrandarán según el tiempo que le apliquemos en el código de jQuery.

$("ul.mini li").hover(function() {
	$(this).css({'z-index' : '10'}); // aumentamos el z-index para que quede encima de los demás elementos
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '-110px', marginLeft: '-110px', // centramos los thumbnail verticalmente
			top: '50%', left: '50%', // Posicionamos a la mitad
			width: '180px', height: '180px',  padding: '20px' // EL tamaño del thumbnail
		}, 400);// Tiempo que demora en hacer el efecto
 
	// Regresando a su posición inicial
	} , function() {
	$(this).css({'z-index' : '0'});// regresamos el z-index a cero
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', marginLeft: '0',// Posición incial
			top: '0', left: '0', 
			width: '120px', height: '120px', padding: '5px' // Tamaño inicial de la miniatura
		}, 400);// Tiempo que demora en hacer el efecto
});

Demo - Miniaturas con jQuery

Related posts:

1. Esquinas redondeadas con jQuery
2. JPlayer un reproductor MP3 con jQuery
3. Ocultar Link con jQuery

Pues ahora puedes personalizarlos de formas sencillas, solo con un poco de conocimiento de CSS. Hay varias maneras de personalizar un formulario, esta vez les enseñaré 2 maneras, con resultados similares. Pero antes de comenzar a personalizar, debemos tener el boceto de lo que será nuestro formulario.

Luego de ya saber cómo será la estructura, empezamos a hacer el html de nuestro formulario.

<form method="post" action="">
	<fieldset>
	<h1>Registro</h1>
	<p>Registrate ahora! es gratis</p>
 
	<label for="nombre" class="nombre">
	Nombre
	<span>Agrega tu nombre</span>
	</label>
	<input type="text" name="nombre" id="nombre" />
 
	<label for="email" class="email">
	E-mail
	<span>Agrega un correo valido</span>
	</label>
	<input type="text" name="email" id="email"/>
 
	<label for="pass" class="pass">
	Password
	<span>5 caracteres como minimo</span>
	</label>
	<input type="password" name="pass" id="pass"/>
 
	<input type="submit" id="registrar" value="Registrarme"/>
	</fieldset>
</form>

Una vez que tenemos listo nuestro formulario, es hora de personalizarlo.

1) Usando solo CSS

fieldset{
        margin:auto; width:475px;
	overflow:hidden; padding:30px;
}
h1{
	margin:10px 0 0 0;
	font-size:4.5em;
}
p{
	margin:0 0 30px 0; padding:0 0 5px 0;
	font-size:10px;
	border-bottom:1px solid #cfe0e9;
}
label{
	float:left; /* Importante, para la alineación */
	width:200px; /* ancho del label */
	font-size:2.8em;
	margin:5px 0 15px;
}
 
input{
	float:left;/* Importante, para la alineación */
	width:245px; height:36px;/* Medidas del Input */
	margin:0 0 15px 0; padding:15px;
	color:#ccc;font-size:2em;
}
span{
	font-size:10px;/* Tamaño más pequeño para las indicaciones */
	display:block; /* hace que salte de linea */
}
/* Personzaliando el botón de registrar */
#registrar{
	float:left;
	padding:0; margin:15px 0 0 140px;
	background:#d0e8f7; color:#418eb6;
	width:185px;height:45px;
}
/* Hover a nuestro Botón 
   No funciona en IE6 (Uno de los peores navegadores) */
#registrar:hover{
	background:#418eb6; color:#d0e8f7;
}
/* Opcional - Bordes Redondeados
   Solo funciona con Firefox / Safari / Google Chrome */
input,#registrar{
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}
/* Si usan esto ultimo no validara, porque aun no lo han estanderizado
   pero funciona a la perfección - salvo con IE (la oveja negra) */

Es una forma fácil de personalizar, solo aprovechando lo que nos brinda CSS. Esta forma funciona perfectamente con IE6, IE7, Safari, Firefox y Google Chrome.

Demo - Personalizar el formulario usando solo CSS

2) Usando Imágenes / CSS

Ahora veremos como personalizar usando imágenes y CSS. Para este caso lo que hice fue tratar de tener la menor cantidad de imágenes.

Comenzamos con todos los textos, para eso debes juntar todos los textos creados en algun editor de imágenes (aplicando los efectos que desees) a una sola imágen. Después de eso, jugamos un poco con CSS .

Lo que vamos a hacer va a ser algo parecido a lo que ya expiqué en otro tutorial, solo que esta vez jugaremos con las alturas.

Lo más importante en esto es saber usar "background-position".

h1,p,label,span{
	background:url(images/txt-form.png) no-repeat;/* Imagen con todos los textos para h1,p,label,span */
	text-indent:-9999em;/* Hace desaparecer por arte de magia los textos xD! y solo quedaran las imagenes */
}
h1{
	margin:10px 0 3px 0;
	background-position:0 0; /* Posición inicial de la imágen */
	width:200px; height:45px;/* Medidas de nuestro título */
}
p{
	margin:0 0 50px 0;
/* La posición disminuye según la altura donde se ubique la parte que quieres mostrar */
	background-position:0 -50px;
	width:143px;height:9px;
}
label{
	float:left;/* Importante para la alineación */
	width:200px;/* ancho que heredaran todos los label */
	font-size:2em;
	margin:12px 0 15px 0;
}
span{
	display:block; /* hace que salte de linea */
}
.nombre{
/* Como esta parte comenzaba en Y = 59, le quitamos -59px a la posición */
	background-position:0 -59px;
	height:23px; /*Importante poner la altura que queremos mostrar */
}
.nombre span{
	background-position:0 -94px;
	height:10px;
}
.email{
	background-position:0 -104px;
	height:23px;
}
.email span{
	background-position:0 -138px;
	height:10px;
}
.pass{
	background-position:0 -148px;
	height:23px;
}
.pass span{
	background-position:0 -182px;
	height:8px;	
}

Ahora personalizamos los elementos que faltan que ya son más fáciles de entender

input{
	float:left;
	background:url(images/input.png) no-repeat; /* imagen con esquinas redondeadas para todos los input */
	width:245px; height:36px;
	margin:0 0 25px 0; padding:15px;
	color:#ccc; font-size:2em;
}
 
#registrar{
	float:left;
	margin:15px 0 0 140px;padding:0;
	background:url(images/registrar.png) 0 -45px;/* Otra vez usando las posiciones */
	width:185px;height:45px;/* importante definir la altura*/
	color:#418eb6;
}
/* Hover a nuestro Boton 
   No funciona en IE6(para variar..) */
#registrar:hover{
	background-position:0 0;
	color:#d0e8f7;
}

Y así hemos personalizado nuestro formulario usando imágenes y CSS (sobre todo usando background-position).
Esta manera funciona bien en IE7, IE8, Firefox, Safari y Google Chrome. (No se ve bien en IE6)

Demo - Personalizar formulario con imágenes / CSS

Ahora que ya saben usar las 2 maneras, pueden mejorarlo para que funcione para todos los navegadores (incluyendo el maldito IE6) combinando las 2 formas (Usar imágenes solo en las esquinas redondeadas y lo demás puro CSS).

Enlace: Descargar los 2 demos (Incluido el PSD del boceto)

Related posts:

1. Centrar Pagina con CSS
2. Creando un excelente Menu con Photoshop y CSS
3. Sombra con CSS

Pues haz llegado al sitio correcto x). Fuera de bromas, en este tutorial explicaré como poder crear un elegante menú en Photoshop ( la imagen que será el background de nuestro menú). Y lo maquetaremos con CSS, de una forma simple y sobre todo validada, para no tener ningún problema con ningún explorador ( incluido IE6 xD ).

I) Creación del background de nuestro menú en Photoshop

1.- Primero creamos un nuevo documento en Photoshop de 500 x 40 pixeles.

2.- Ahora con la herramienta Rectángulo Redondeado, crearemos un rectángulo del tamaño del documento ( 500 x 40 ) con un radio de 7px. de color #5b4949.

3.- Ahora con la herramienta texto escribiremos las categorías de nuestro menú.

4.- Luego crearemos lo que serán las seperaciones de las secciones del menú. Para eso usaremos la herramienta lápiz con 1px de grosor. Crearemos 2 líneas, una con un color #715555 y la otra con #3e3232. (Debemos elegir colores que hagan contraste con el fondo del menú y también entre las 2 líneas).

5.- Seleccionamos todas las capas, y nos vamos a Capa > Nueva > Grupo. Se abrirá una nueva ventana, donde le pondremos por nombre "Nav"

6.- Ahora duplicaremos el grupo, para eso debemos seleccionar el grupo, luego ir a Capa > Duplicar Grupo y lo llamaremos "Nav Hover"

7.- Ahora en el nuevo grupo que creamos "Nav Hover", cambiaremos el color del fondo de nuestro menú. Para eso le damos doble click a la capa del fondo y le pondremos una superposición de degradado con la siguiente configuración. En esta parte también podemos cambiar el color del texto de las categorías.

8.- Ahora que ya tenemos 2 grupos, una que es la del menú en estado normal y la otra que será para el hover ( cuando pasamos el mouse por el menú). Nos vamos a Imagen > Tamaño de Lienzo y duplicaremos la altura, es decir pondremos 80px.

9.- Ahora debemos posicionar nuestros 2 grupos, de tal manera de que quede uno arriba del otro. Para eso debemos seleccionar todo el documento y seleccionar el grupo "Nav" , seleccionar la herramienta Mover y posicionarlo en la parte superior. Lo mismo para "Nav Hover" solo que a este lo pondremos en la parte inferior.

10.- Solo queda guardar la imagen, que será el "background" de nuestro menú.

II) Maquetación de nuestro Menú

Ahora ya que acabamos con el diseño, procedemos a crear "el esqueleto" de nuestro menú en html.

<div id="nav">
           <ul>
                <li><a href="#" id="ajax">Ajax</a></li>
                <li><a href="#" id="css">CSS</a></li>
                <li><a href="#" id="js">JavaScript</a></li>
                <li><a href="#" id="jQ">jQuery</a></li>
                <li><a href="#" id="php">PHP</a></li>
                <li><a href="#" id="wp">Wordpress</a></li>
            </ul>
</div>

Como verán, le he aplicado un id a cada categoría del menú. Esto es para poder diferenciarlos, a la hora de crear el CSS.

Ahora solo debemos "jugar" un poco con CSS

#nav{
	width:500px;
}
 
#nav ul{
	list-style:none; /* Para quitar todos los estilos de la lista */
	width:500px; /* Definimos el ancho de nuestra lista */
	height:40px; /* Definimos el alto de nuestra lista */
}
#nav ul li{
	float:left; /* Para hacer que el menú sea horizontal */
}
#nav a{
	text-indent:-9999px; /* Posicionamos el texto, de tal manera que no sea visible */
	height:40px;
	background:url(images/menu-css.png) no-repeat; /* la imagen que hicimos en photoshop */
	display:block; /* Hacemos que los links se muestren por bloques
                           y no en línea, es importante :) */
}

Ahora, viene lo interesante , la idea es fácil. Solo debemos asignarle el ancho de cada categoría y posicionar la imagen de fondo. Acá es donde le damos uso a los "id" que le asignamos a cada categoría cuando creamos "el esqueleto" en HTML.

a#ajax{
	background-position:0 0;
	width:68px;
}
a#css{
	background-position:-68px 0;
	width:52px;
}
a#js{
	background-position:-120px 0;
	width:106px;
}
a#jQ{
	background-position:-226px 0;
	width:86px;
}
a#php{
	background-position:-312px 0;
	width:62px;	
}
a#wp{
	background-position:-374px 0;
	width:126px;
}

Ahora de la misma forma, debemos posicionar el background, para el "hover" de nuestro menú. Para este caso ya no es necesareo asignarle el ancho, ya que este valor lo hereda del a#id.

a:hover#ajax{
	background-position:0 -40px;
}
a:hover#css{
	background-position:-68px -40px;
}
a:hover#js{
	background-position:-120px -40px;	
}
a:hover#jQ{
	background-position:-226px -40px;
}
a:hover#php{
	background-position:-312px -40px;
}
a:hover#wp {
	background-position:-374px -40px;
}

Ver Demo del menú
Descargar el menú con Photoshop y CSS ( incluye el PSD)

El menú funciona perfectamente en IE 6, IE 7 , IE 8, Mozilla Firefox, Safari y Google Chrome. (Todos probados por mí). Y sobre todo está validada.

Como verán, no es nada del otro mundo crear un menú con Photoshop y CSS. Si tienes alguna duda, no dudes en comentar. Y si tienes otro método, o alguna parte que se pueda optimizar, bienvenido los comentarios están para eso.

Related posts:

1. 5 Menu Horizontales con CSS
2. Como Crear un Formulario Elegante con CSS e Imágenes
3. Sombra con CSS

Veamos como hacer un Menú desplegable con jQuery en tan solo 5 líneas de código:

Primero debemos tener un fichero HTML con la siguiente estructura:

<div id="menu1">
	<h1>Articulos</h1>
	<ul>
		<li><a href="#">Noticias</a></li>
		<li><a href="#">Tecnologia</a></li>
		<li><a href="#">Wordpress</a></li>
	</ul>
	<h1>Recursos</h1>
	<ul>
		<li><a href="#">Brushes</a></li>
		<li><a href="#">Pattern</a></li>
		<li><a href="#">Texturas</a></li>
		<li><a href="#">Vectores</a></li>
	</ul>
	<h1>Tutoriales</h1>
	<ul>
		<li><a href="#">CSS</a>
		<li><a href="#">Java</a></li>
		<li><a href="#">Javascript</a></li>
	</ul>
</div><!-- end menu1 -->

En el CSS:

#menu1{
	width:200px;
	margin:auto;
	margin-top:100px;
}
 
#menu1 h1{
	color:#b66737;
}
 
#menu1 ul{
	display:none; /* Importante! esto hace que las listas esten ocultas */
}
 
#menu1 a{
	color:#b66737;
	font-size:12px;
}

Y ahora las 5 líneas de código que harán un sencillo pero grandioso menú desplegable:

  $(document).ready(function(){
		$("#menu1 h1").mouseover(function(){
			$(this).next("#menu1 ul").slideDown(500).siblings("#menu1 ul").slideUp("slow");
		});
	});

Demo:Menu Desplegable jQuery (I)
Enlace:Descargar Menu Desplegable jQuery (I)

Related posts:

1. Miniaturas con jQuery
2. Ocultar Link con jQuery
3. Esquinas redondeadas con jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="relative_time.js"></script>
 
<script type="text/javascript">
$(document).ready(function() {
var tutwitter = "willxd";
	$.getJSON("http://twitter.com/statuses/user_timeline/"+ tutwitter +".json?count=1&callback=?", function(json){
 		var lastTweet = json[0].text;
		var tweetTime = json[0].created_at;
		var tweetTime = relative_time(json[0].created_at);
		$("#twittexto").html(lastTweet);
		$("#twittiempo").html(tweetTime);
	});
});
 
</script>

Ahora lo que debemos hacer es cambiar en la variable "tutwitter" a tu cuenta de Twitter. Y crear en tu web los siguientes "divs"

<div id="twittexto"></div> // Texto del tweet
<div id="twittiempo"></div> // Hace cuanto escribiste el tweet

Demo: Ultimo Tweet con jQuery
Enlace: Descargar Ultimo Tweet con jQuery

Related posts:

1. Ocultar Link con jQuery
2. Esquinas redondeadas con jQuery
3. JPlayer un reproductor MP3 con jQuery

Econtrar diferencias entre los identificadores “ID” y las clases “Class” es una de las primeras dudas que aparecen en el aprendizaje de CSS.
A simple vista no parece haber ninguna diferencia, pero sin embargo estamos muy equivocados, ya que sí existen grandes diferencias.

Lo que siempre se estila decir para explicar es
“ID solo se usa una vez y Class se utiliza varias veces”
¿Pero por qué? a mi parecer esa no es una explicación, sino una simple proposición. Sin embargo tienen razón, pero siempre es bueno saber el porqué (no siempre crean todo lo que le dicen por más ducho que sea, siempre pregunten el ¿Por Qué? xD )

Identificadores "ID"

Para comenzar el “ID” es un identificador de un objeto, y un objeto solo puede tener un solo identificador, así como en la vida cotidiana, nosotros tenemos un DNI (documento de identidad) que es el cual nos identifica, y nadie más puede tener el mismo DNI.

Veamos un ejemplo:

#contenido{
	background:#9CC;
	margin: auto;
	padding:20px;
}
 
#sidebar{
	width:300px;
	background:#99C;
	padding:10px;
}
 
#footer{
	background:#CCC;
	border:1px solid #093;
	margin:10px 12px 20px 15px;
}

<div id="contenido"></div>
<div id="sidebar"></div>
<div id"=footer"></div>

En este ejemplo tenemos 3 identificadores que no se repiten.

¿Qué pasa si repetimos un identificador?

Una de los primeros problemas es que no podremos validar el CSS. Ya que cuando en una web tenemos varios objetos con el mismo ID, hay errores en la interpretación de los navegadores.

El identificador no solo es importante en CSS sino también en el uso de JavaScript, Ajax con los que los identificadores toman un papel muy importante.

Otro de los usos de “id” es que podemos poner links en nuestros sitios que nos dirigirá a sitios específicos.

Usando el ejemplo anterior. Si tenemos un link así:

<a href="#footer">
Ir al footer
</a>

el navegador nos dirigirá al elemento que tenga como “id” a footer.

Clases (Class)

En cambio las clases “class” son propiedades que un objeto o varios objetos pueden tener.
Además a un objeto le podemos aplicar varias clases.

Veamos un ejemplo

.texto {
	font-size:12px;
	color:#069;
}
 
.negrita {
	font-weight:bold;
}

<div class="texto">
	En este texto heredamos las propiedades de la clase texto
</div>
 
<div class="texto">
	Volvemos a heredar las propiedades de la clase texto
</div>
 
<div class="texto negrita">
	Este texto hereda las propiedades de las clases texto y negrita.
</div>

Otros..

Otro de los puntos que debemos saber es que si a un elemento le aplicamos un “ID” y un “Class” el elemento herederá preferentemente las propiedades del “ID”
Por ejemplo:

.com{
	background:#939;
	font-size:18px;
}
 
#fil{
	background:#393;
	font-size:10px;
}

<div id="fil" class="com">
Este texto hereda las propiedades tanto del identificador como de la clase. 
Pero si se repiten, toma como preferencia el del identificador.
</div>

En ese ejemplo toma como preferencias las propiedades del “ID” que le asigné.
Espero que haya despejado algunas dudas y si por el contrario si te di más dudas xD no dudes en comentar para saber tu opinión o duda.

Salu2!

Related posts:

1. Sombra con CSS
2. Fondo transparente con CSS
3. Centrar Pagina con CSS

Encontré una manera fácil de descargar imágenes con un solo click usando un pequeño script en PHP.

El pequeño script será el siguiente:

<?php
$enlace = "imagenes/".$id;
header ("Content-Disposition: attachment; filename=".$id."\n\n");
header ("Content-Type: application/octet-stream");
header ("Content-Length: ".filesize($enlace));
readfile($enlace);
?>

Lo guardaremos con el nombre "desc.php".
Algo importante del código es "$enlace = "imagenes/".$id;" que es donde estarán guardados nuestras imágenes, en este caso debemos guardar las imágenes en la carpeta "imagenes"

Luego en nuestra página colocamos esto:

<a href="desc.php?id=imagen1.jpg">
<img src="imagenes/imagen1.jpg" width="256" height="192" >
</a>

Donde imagen1 sería la imagen que podremos descargar con 1 solo click

Lo útil de este pequeño script, es que podemos poner la imagen en un tamaño menor y cuando lo descargamos, lo descargaremos en su tamaño real.

Espero les ayude !

Related posts:

1. Marco decorativo para imagenes con CSS
2. Como Crear un Formulario Elegante con CSS e Imágenes
3. Esquinas redondeadas con jQuery

En realidad lo que hace es que si hacemos 1 click nos envía al primer link, pero si damos doble click sobre el enlace, este nos muestra el enlace oculto.

Veamos, primero creamos un enlace normal:

<a href="http://google.com">Búscalo en Google</a>

Ahora le asignamos un ID para nuestro código jQuery.

<a id="linkoculto" href="http://google.com">Búscalo en Google</a>

Ahora usaremos jQuery, lo que hace el siguiente código es que se retrase medio segundo en rederigir al enlace, para tener tiempo suficiente para dar doble click:

$("a#linkoculto").click(function(){
  var timeout = setTimeout(function() {
    location.href=$("a#linkoculto").attr("href");
  }, 500);
  return false;
});

Ahora lo que haremos será definir el link oculto, al cual redireccionará siempre y cuando demos doble click.

$("a#linkoculto").dblclick(function(){
  location.href="http://youtube.com";
});

Related posts:

1. Menu Desplegable jQuery (I)
2. Esquinas redondeadas con jQuery
3. Ultimo Tweet con jQuery