Como poner un target a un frame con javascript

Hola!!

Ayudando a un compañero me vi en la necesidad de investigar como poner Target a un location.href q utilizamos para redireccionar con javascrpt,

Bueno en si en metodo es muy simple!!

Les muestro como:

Miren si utilzamos HTML, tendiramos algo como esto

<a href="page.html" target="_top">Link</a>

Bueno ahora si lo manejamos con javascript y necesitamos utilizar el target lo ponemos asi

<script type="text/javascript">
top.location.href = 'page.html'; 
</script>

Y asi se van con las otras opciones de Target:

<script type="text/javascript">
 
self.location.href = 'page.html';
 
blank.location.href = 'page.html';
 
parent.location.href = 'page.html'; 
 
</script>

Bueno espero que les haya sido se Ayuda!!

Nos vemos!!!!

Aplicacion web para generar popups

Hola de nuevo!!!

Esta pagina es similar al POST anterior solo que esta es para popUP’s!!

Te es util si no tienes mucha idea de como hacer una Ventana Emergente o popUP’s.

Esta chida la pagina ya que le puede pasar muchos parametros (URL de la ventana, Tamaño, Nombre de la ventana, etc…) y de ahi generar el codigo que aplicaras en tu pagina.

Los chido es que te dice para que te sirve cada parametro.

Les dejo el LINK

Generador de clases CSS

Hola, q onda!!

Navegando por ahi me encontre una pagina que pude ser util para aquellos que apenas tan aprendiendo a usar las hojas de estilo CSS.

En esta pagina tu escoges, tipo de letra, color de fondo, etc… Y te genera el codigo en CSS.

Espero que a alguien le sirva!!!

Chao!!

Les dejo el LINK

Generador de contraseñas aleatorias con PHP

Hola, q onda!!!

Bueno despues de tanta regañada hay les dejo un post!! jejeje

Es algo sencillo, pero util me sirvio para mis proyectos de escuela y uno q otro por ahi, espero que a ustedes les sirva.

Es una pequeña funcion para generar paswords aleatorios con PHP.

<?
 
function Pass_Aleatorio(){
	$password ="";
	$tamano = 6; //Longitud del password generado.
	$caracteres = "abchefghjkmnpqrstuvwxyz0123456789";  // Caracteres posibles para el password.
	srand((double)microtime()*1000000);
	$i = 0; 
	while ($i <= $tamano) { 
		$num = rand() % 33; 
		$temp = substr($caracteres, $num, 1); 
		$password = $password . $temp; 
		$i++; 
	}
	return $password;
}
 
?>

Y para obtener el resultado llamamos a la funcion de la siguiente manera

<?
echo Pass_Aleatorio();
?>

Eso es todo!!

Nos vemos pa la proxima!!

Dando estilos CSS a nuestras tablas

Hola!!!
Navegando por ahi me encontre una pagina muy chida, CSS Table Gallery ya que te genera estilos CSS para tus tablas. Hay varios que valen la pena.

Y es muy util ya que al momento de descargar te dan listo en codigo, tu solo lo aplicas en tu sitio!!!

Les paso la liga. CSS Table Gallery

Templates y Plantillas Gratis – CSS – Flash – FREE

Hola!!!

Navegando por Ahi me tope con una pagina de Templates Gratis, tanto en Flash como de CSS, esta bastante decente, hay uno que otro que si vale la pena, sobre todo en las de Flash, que tambien puede encontrar galerias para utilizar en tu Sitio Web.

Les dejo los Links!!

Templates Flash
Templates CSS

Hola les mostrare como crear el efecto de paginacion en tu Web. La mayoria de las veces esto lo crean con flash, pero les voy a mostrar una manera mas rapida y sencilla de hacerlo.
Les muestro como:

1ro vamos a crear el contenedor de nuestra esquina paginada.

1
2
3
4
5
6

<div id="pageflip">
	<a href="#">
		<img src="page_flip.png" alt="" />
		<span class="msg_block">Subscribe via RSS</span>
	</a>
</div>

Ahora creamos nuestro style css, establecemos nuestra imagen de la esquina a un tamaño pequeño (50px por 50px) por defecto y establecemos el posicionamiento absoluto de nuestro span en la esquina superior derecha.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#pageflip {
	position: relative;
}
#pageflip img {
	width: 50px; height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
	width: 50px; height: 50px;
	position: absolute;
	z-index: 50;
	right: 0; top: 0;
	background: url(subscribe.png) no-repeat right top; /* Imagen oculta a mostrar */
	text-indent: -9999px;
}

Y por ultimo nuestro codigo js, antes debemos llamar a nuestro archivo jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$("#pageflip").hover(function() { //On hover...
	$("#pageflip img , .msg_block").stop()
		.animate({ // Animacion de nuestro div (Width + height)
			width: '307px',
			height: '319px'
		}, 500);
	} , function() {
	$("#pageflip img").stop() //Al estar fuera volvemos a nuestro tamaño original 50x52
		.animate({
			width: '50px',
			height: '52px'
		}, 220);
	$(".msg_block").stop() //Al estar fuera volvemos a nuestro tamaño original 50x52
		.animate({
			width: '50px',
			height: '50px'
		}, 200);

Les dejo el link de la DEMO EL LINEA

Hola!! Esta vez les voy a mostrar como utilizar Jcrop es una libreria que junto a Jquery te permite cortar imagenes online (cortar imagenes tipo facebook ). La libreria es muy facil de usar!!
Les muestro como:

Paso 1: En nuestro archivo tenemos que colocar este codigo php para generar la imgen que vamos a recortar luego:

1
2
3
4
5
6
7
8
9
10
11
12
13

      if ($_SERVER['REQUEST_METHOD'] == 'POST')
      {
      $targ_w = $targ_h = 150; // Es el tamaño que tendra nustra imagen al momento de cortarla.
      $jpeg_quality = 90;// Es la calidad que tendra nuestra Imagen.
      $src = 'demo_files/raphaxx3.jpg'; //En este paso seleccionamos que imagen vamos a cargar para luego cortarla.
      $img_r = imagecreatefromjpeg($src);
      $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
      imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
      $targ_w,$targ_h,$_POST['w'],$_POST['h']);
      header('Content-type: image/jpeg');
      imagejpeg($dst_r,null,$jpeg_quality);
      exit;
      }

Paso2 : Incluimos los archivos JavaScript y css de la libreria entre las etiquetas “head”. Sin esto obviamente no va a funcionar:

1

<script src="js/jquery.pack.js"></script> <!-- Incluimos la libreria de jQuery --> <script src="js/jquery.Jcrop.pack.js"></script> <!-- Incluimos la libreria de jQuery - Jcrop -->

Paso3: Tambien dentro de nuestro archivo en el

del archivo pegamos este codigo javascript para generar nuestro archivo para luego cortarlo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

      <script type="text/javascript">
                  jQuery(function(){       
                      jQuery('#cropbox').Jcrop({
                          aspectRatio: 1,
                          onSelect: updateCoords
                      });
 
                  });
 
                  function updateCoords(c)
                  {
                      jQuery('#x').val(c.x);
                      jQuery('#y').val(c.y);
                      jQuery('#w').val(c.w);
                      jQuery('#h').val(c.h);
 
                  };
 
 
                  function checkCoords()
 
                  {
 
                      if (parseInt(jQuery('#x').val())) return true;
 
                      alert('Porfavor seleccione un area de la imagen.'); <!  Configuramos msj de error si no seleccionamos que parte de la imagen vamos a cortar -->
 
                      return false;
 
                  };
</script>

Bueno eso fue todo!!!
Les paso el link del DEMO EN LINEA
Y el LINK de descarga de los Archivos.

Intentaremos hacer algo asi…(jaja “PHOSHOP-perdonen)

Ya se tiene pesima calidad, si gustan bajenlo:
Duracion: 04:16 min
Peso: 28.5MB
::Musica::
Autor: Epica
Cancion: Feint
Album: The Phantom Agony
Contraseña: www.zoneartcss.com
AVI/Rapidshare

http://rapidshare.com/files/261196507/wall-tuto-zacss.com.rar

Estoy encontra a todos los video-tutoriales de internet por que todos son de “Photoshop” ok muy buenos, pero hay gente que esta con Fireworks, pero bueno aqui trataremos de hacer las cosas lo mas posible desde 0, sin recursos, tansolo aprovechando lo que este magnifico software nos brinda y que no se mal interprete “Los mejores del mundo usan Photoshop” y son dioses en diseño, y se les respeta que programa sea su preferido, asi que respeten que en esta seccion del blog “MIA”, aqui “I HATE PHOTOSHOP”… asi que sino tienes nada bueno que comentar mejor ni lo hagas, o hazlo igual no sera publicado, esta zona es solo para “FIREWORKS LOVERS“

Hola!!!!

Navegando por ahi encontre un script js muy chido Llamado reflection.js con el puedes aplicar reflejos a tus imagenes!!!

Les muestro como, es muy sencillo!!

Para empezar Llamamos a nuestro Script reflection.js

1

<script type="text/javascript" src="reflection.js"></script>

Ahora lo que sigue es aplicar nuestro reflejo en la imagenes

1

<img src="version.png" class="reflect rheight50 ropacity33"  />

Podemos variar el tamaño del reflejo, con tan solo cambiar la clase

1
2
3

<img src="user.png" class="reflect rheight33" alt="Muestra un 33% de la imagen" />
<img src="user.png" class="reflect rheight66" alt="Muestra un 66% de la imagen" />
<img src="user.png" class="reflect rheight100" alt="Muestra un 100% de la imagen" />

Por qué para utilizar este efecto?

Fácil de implementar. Solamente agrega class=”reflect” a la imagen y listo.

1. No necesitas perder tiempo con un editor de imágenes para crear el efecto de reflejo.
2. Trabaja muy bien con avatares, y no requiere de trabajo adicional por parte del servidor.
3. Es muy fácil cambiar la opacidad y el tamaño del reflejo.
4. Los reflejos pueden responder a la acción de usuario.
5. Es chido.

Eso es todo!!!!

Les dejo el Link para descargar el js Reflection.js

Ver demo en linea

Bueno ya era hora de tener en el blog una sección oficial de “I Hate Photoshop“, una serie de videos tutoriales en macromedia fireworks que tienen ya mas de un año, pero aun son utiles para los newbies, les traere uno a la semana, y cuando publique los 7 videos (aprox) de hace tiempo, les traere videos nuevos, con mas tecnicas, mas vistosos, y claro mas rapidos y sencillos.

1. La razon de el “odio” es por k no lo se usar.
2. Solo muestro alternativas a efectos simples “NO PROFESIONALES” .
3. No menos presio al photoshop u otro soft. solo manifiesto k me gusta el fireworks, por su sencilles y es el unico que se usar.
4. No soy diseñador, solo lo intento.
5. Si son comentarios negativos mejor ni se molesten.

Pero bueno basta de parloteo aquí va el primero disfrútenlo!!!.

Haremos este logo en fireworks

Ya se tiene pesima calidad, si gustan bajenlo:
Duracion: 01:43 min
Peso: 3.5MB
Contraseña: www.zoneartcss.com
AVI/Rapidshare

http://rapidshare.com/files/257031892/logo_easy_zoneartcss.rar

Estoy encontra a todos los video-tutoriales de internet por que todos son de “Photoshop” ok muy buenos, pero hay gente que esta con Fireworks, pero bueno aqui trataremos de hacer las cosas lo mas posible desde 0, sin recursos, tansolo aprovechando lo te este magnifico software nos brinda y que no se mal interprete “Los mejores del mundo usan Photoshop” y son dioses en diseño, y se les respeta que programa sea su preferido, asi que respeten que en esta seccion del blog “MIA”, aqui “I HATE PHOTOSHOP”… asi que sino tienes nada bueno que comentar mejor ni lo hagas, o hazlo igual nosera publicado, esta zona es solo para “FIREWORKS LOVERS“

Bueno no soy un programador, pero si tengo ciertas habilidades en el CSS, no me considero experto pero si con los conocimientos suficientes, y bueno este lenguaje que en mi opinión tonta y personal no considero muy de programación sino de estrategia y sobre todo paciencia.

Primero lo básico para dar estilos es importante saber a quien se lo estamos dando vale?… Es un poco tedio pero es fácil si tienes paciencia y un poco de razonamiento.
Cuando damos un estilo es necesario saber si es a una etiqueta HTML o una clase o bien a una ID. Y en castellano se traduce a:

Etiqueta HTML o bien

La siguiente propiedad CSS le dará el estilo a todas las etiquetas “div” de nuestro sitio,
(esta propiedad se le puede dar a otras etiquetas, table, span, h1, etc..)

1
2

/* Esto le dará un margen en la parte superior de 15px*/
div{ margin-top:15px; } /*el html es: <div></div>*/

Estilo a una clase “.miclase”
Esta propiedad CSS le dará el estilo a una o varias clases en nuestro sitio dependiendo a que elementos le hayamos asignado en nuestro código HTML.

(no importa si la etiqueta HTML es un “div”, “table”, “h1” o cualquier otro, ya que tendrá el estilo que le demos en el siguiente código, aquí lo importante es la clase y no su etiqueta.)

1
2
3
4
5
6
7
8
9
10

/* Esto le dará un margen en la parte superior de 15px a todos los elementos que contengan esta clase sin importar si es un “div”, o cualquier otra etiqueta HTML*/
.miclase{ margin-top:15px; }  /*el html es: <div class=”miclase”></div>*/
/*De igual manera podemos personalizarla a un nivel “semi-avanzado en CSS*/
div.miclase{ margin-top:15px; }  /*le dará el margen de 15px solo a los “div’s” que tengan esta clase ejemplo:<div class=”miclase”></div>*/
 
span.miclase{ margin-top:14px; } /* le dará el margen de 14px solo a los “span’s” que tengan esta clase ejemplo:<span class=”miclase”></span>*/
 
h3.miclase{ margin-top:13px; } /* le dará el margen de 13px solo a los “h3’s” que tengan esta clase ejemplo:<h3 class=”miclase”></h3>*/
 
/*todas las anteriores tuvieron asignada la misma clase, pero fue variando su margen dependiendo de su etiqueta HTML*/

Estilo a una ID #ESTILO
Esta propiedad CSS le dará el estilo a nuestra ID que por reglas HTML no se debe repetir en nuestro documento, es muy util para ahorrar codigo… cuando a nuestras ID’s les asignamos eventos en JS… y de paso le damos estilos… pero igual se pueden usar las 2.
(a veces sin querer se repite nuestra id, para estos casos se debe asignar una clase ya que un ID debe ser único. )

1
2
3
4
5

/* Esto le dará un margen en la parte superior de 15px*/
#ESTILO{ margin-top:15px; }
 
/*De igual manera se puede asignar el elemento HTML para tenerlo ordenado o bien para que no olvidemos que etiqueta era… enfin*/
div#ESTILO{ margin-top:15px; }

El punto es que cuando es una etiqueta HTML se escribe tal cual es, si es un “div” en el CSS es “div { }”, cuando es una clase lleva un punto antes
“.miclase { }” y cuando es una ID lleva un signo de gato antes “#ESTILO”.

Esto fue una extencion de un “manual” que tenia para hacer templates y mejor explicado chao!…