Page Flip o libro que pasa hojas en flash

Filed Under (Ajax, Flash) by admin on 20-01-2011

Tagged Under : , , , ,

Hace un tiempo encontré un script hecho en flash que nos puede ahorrar mucho tiempo para hacer esos famosos libros que pasan las hojas, el archivo viene en .FLA para poder editarlo.

Podéis editarlo e incluirle más páginas, añadir fotos, textos o enlaces directos a páginas desde un botón, por ejemplo.


Descargar pageflip


Fuente: Pageflip – También tienen una versión de pago con más opciones, pero si os apañáis con la versión gratuita y algunas modificaciones se pueden hacer muchas cosas, lo bueno de la de pago… que ya viene con más opciones preparadas.

Documentación

PD: cuando tenga un hueco os pondré la traducción de la documentación.

Script para crear copos de nieve cayendo en la página

Filed Under (Javascript) by admin on 11-12-2009

Tagged Under : , , , ,

Ahora que llega la navidad, a algunos les gusta decorar la página, pues bién, os dejo un script de efecto de copos de nieve cayendo en la página, por si os puede valer.

<script language=”JavaScript1.2″>

/******************************************
* Snow Effect Script- By Altan d.o.o. (snow@altan.hr, http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code
* Modified Dec 31st, 02′ by DD. This notice must stay intact for use
******************************************/

//Configure below to change URL path to the snow image
var snowsrc=”snow.gif
// Configure below to change number of snow to render
var no = 100;

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write(“<layer name=\”dot”+ i +”\” left=\”15\” top=\”15\” visibility=\”show\”><a href=\”http://dynamicdrive.com/\”><img src=’”+snowsrc+”‘ border=\”0\”><\/a><\/layer>”);
} else {
document.write(“<layer name=\”dot”+ i +”\” left=\”15\” top=\”15\” visibility=\”show\”><img src=’”+snowsrc+”‘ border=\”0\”><\/layer>”);
}
} else if (ie4up||ns6up) {
if (i == 0) {
document.write(“<div id=\”dot”+ i +”\” style=\”POSITION: absolute; Z-INDEX: “+ i +”; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\”><a href=\”http://dynamicdrive.com\”><img src=’”+snowsrc+”‘ border=\”0\”><\/a><\/div>”);
} else {
document.write(“<div id=\”dot”+ i +”\” style=\”POSITION: absolute; Z-INDEX: “+ i +”; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\”><img src=’”+snowsrc+”‘ border=\”0\”><\/div>”);
}
}
}

function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout(“snowNS()”, 10);
}

function snowIE_NS6() { // IE and NS6 main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth : document.body.clientWidth;
doc_height = ns6up?window.innerHeight : document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById(“dot”+i).style.top=yp[i];
document.getElementById(“dot”+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
}
}
setTimeout(“snowIE_NS6()”, 10);
}

if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}

</script>


y su imagen:snow

Aunque podéis poner la que queráis, solo tener en cuenta:   var snowsrc=”snow.gif” que es lo que llama al archivo de imágen

Enviar mail desde un formulario con php

Filed Under (HTML, Php) by admin on 09-11-2009

Tagged Under : , , , , ,

Este es un script que ya me han preguntado más veces por el y que os puede venir bastante bien si utilizáis php.

Podéis descargaros los archivos de ejemplo más abajo.

Primero creamos el formulario (esto lo pondreis a vuestro gusto):

form.html

Podeis descargar el formulario de ejemplo [download id="3"]

Ahora vamos con lo gordo, procesar los datos y enviar el formulario,

send.php

Empezamos creando una función que serviría para convertir los caracteres acentuados y las ñ en su entidad correcta, para ello usamos htmlentities y htmlspecialchars_decode

[code lang="php"]function caracteres_html($texto){
$texto = htmlentities($texto, ENT_NOQUOTES, 'UTF-8');
// Convertir caracteres especiales a entidades
$texto = htmlspecialchars_decode($texto, ENT_NOQUOTES);
// Dejar <, & y > como estaban return $texto; }[/code]

A continación recibimos las datos del formulario y los metemos cada uno en una variable (quitar los espacios que hay antes de POST) y creamos otras variables, como el destinatario y el asunto:

[code lang="php"]$destinatario="info@azdream.es";
$nombre = caracteres_html($_ POST['nombre']);
$telefono = caracteres_html($_ POST['telefono']);
$empresa = caracteres_html($_ POST['empresa']);
$email = caracteres_html($_ POST['mail']);
$comentarios = caracteres_html($_ POST['comentarios']);
$asunto="Consulta desde el formulario de la WEB";[/code]

Ahora ya podemos pasar a crear el mail, primero las cabeceras:

[code lang="php"]$cabeceras="Content-type: text/html\n";
$cabeceras.="From: Consulta desde la WEB <$destinatario> \r\n";
$cabeceras.="Reply-To: {$email}\r\n";[/code]

La primera línea indica qué tipo de mail se enviará (html), la segunda será de quién viene (el From) y la tercera vamos a usarla por si queremos responder directamente a quien ha rellenado el formulario, para no tener que andar buscándolo en los datos que recibiremos… sólo pincharíamos en el botón RESPONDER de nuestro gestor correo.

Una vez creadas las cabeceras creamos el cuerpo y ya podemos enviar el mail en la misma función:

[code lang="php-brief"]if(mail($destinatario, $asunto, " $nombre ha enviado una consulta a traves desde la web< br>< br/>

<b>Nombre: $nombre
Empresa: $empresa
Telefono: $telefono
E-mail: $email

Comentarios: $comentarios

PRUEBA FORM
",$cabeceras)){ echo "enviado"; } else { echo "no enviado"; }[/code]

Con esto ya estaría  ya que mandamos todo a través de la función mail

[code lang="php"]if(mail($destinatario, $asunto, $cuerpo_del_mensaje,$cabeceras)){ echo "enviado"; } else { echo "no enviado"; }[/code]


Para descargar los archivos:

[download#4#image]





Crear favicon.ico para poner al lado de la URL de tu web

Filed Under (HTML, Internet) by admin on 08-11-2009

Tagged Under : , , , ,

Para todos aquellos que siempre han querido poner su imágen al lado de la URL en la barra de direcciones o cuando lo agregan a los favoritos, debéis hacer los siguiente, es muy sencillo.

  1. Creáis un icono de 16×16 px con una herramienta para generar iconos o con esta extensión de photoshop
  2. Lo guardais como favicon.ico
  3. Subís ese archivo creado al servidor en el directorio raíz (httpdocs)
  4. En vuestra página de inicio ponéis el siguiente código:

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” />

Y subís el archivo al servidor.

Sencillo no?

Hacer un loop o bucle de un vídeo FLV con actionscript

Filed Under (Actioscript) by admin on 05-03-2009

Tagged Under : , , , , , ,

Recientemente he encontrado un script supersencillo que soluciona el problema de hacer el típico bucle de un vídeo flv.

Primeramente importamos el flv en el escenario y seleccionando el mismo (no en la linea del tiempo) escribimos lo siguiente en actionscript:

on (complete) {
this.autoRewind =true;
this.play ();
}

Con esto se soluciona el problema y ya tenemos el bucle creado.

Muchas gracias por la aportación Vicente.

Transparencias de archivos PNG en Internet Exporer

Filed Under (Javascript, Scripts) by admin on 10-12-2008

Tagged Under : , , , ,

Como todos sabemos, el maravilloso, fantástico, increíble e insuperable  ;-)   Internet Explorer sigue destacando del resto de navegadores.

En esta ocasión es por su IN-Tolerancia a las transparencias de archivos PNG.

Indagando por internet me he encontrado con un script que hace funcionar las transparencias en versiones anteriores a IE 7.

Se trata de lo siguiente:

<!–[if lt IE 7.]>
<script defer type=”text/javascript” src=”Scripts/pngfix.js”></script>
<![endif]–>

Hay que ponerlo entre las etiquetas <head> y  </head>. Lo que hace es llamar al script que hará que se visualicen las imágenes PNG de nuestra web CON TRANSPARENCIA. El archivo lo podéis descargar desde aquí

También he visto otras opciones como sería la de utilizar CSS, que salvo transparencias en imágenes de fondo y que las mismas las llaméis desde vuestro archivo CSS, no le he visto necesario pero yo os lo pongo por si os sirve.

Se trataría de lo siguiente:

background-image: url("archivo.png")!important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="
imagen/archivo.png");

Importante: la ruta del archivo debe ser desde el directorio raíz de nuestra página, es decir, si tenemos la imágen dentro de una carpeta que se llame archivos y ésta a su vez contiene la carpeta de imágenes, el resultado sería: ….(src=”/archivos/imágenes/archivo.png)

Espero os haya ayudado un poco en vuestro proceso de diseño web.

Salu2

PD: gracias a aNIETO2k por la información.