Kanikase
Usuario (México)
Hay muchos métodos para expandir imágenes al pasar el cursor, uno de ellos es Expando, un script que permite que la imagen aumente a su tamaño real con un efecto deslizante, y al quitar el cursor la imagen regresa al tamaño pequeño, también con el mismo efecto.[/size Para lograr este efecto en tus imágenes ingresa a la Edición HTML y agrega antes de </head> el script: Copia y pega el siguiente codigo Kanikase dijo:<script type='text/javascript'> //<![CDATA[ /* Expando Image Script 2008 John Davenport Scheuer as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1 - This Notice Must Remain for Legal Use */ if (document.images){ (function(){ var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20; var expConIm = function(im){ im = im || window.event; if (!expConIm.r.test (im.className)) im = im.target || im.srcElement || null; if (!im || !expConIm.r.test (im.className)) return; var e = expConIm, widthHeight = function(dim){ return dim[0] * cos + dim[1] + 'px'; }, resize = function(){ cos = (1 - Math.cos((e.ims.jump / times) * Math.PI)) / 2; im.style.width = widthHeight (e.ims.w); im.style.height = widthHeight (e.ims.h); if (e.ims.d && times > e.ims.jump){ ++e.ims.jump; e.ims.timer = setTimeout(resize, speed); } else if (!e.ims.d && e.ims.jump > 0){ --e.ims.jump; e.ims.timer = setTimeout(resize, speed); } }, d = document.images, i = d.length - 1; for (i; i > -1; --i) if(d == im) break; i = i + im.src; if (!e.ims){ im.title = ''; e.ims = {im : new Image(), jump : 0}; e.ims.im.onload = function(){ e.ims.w = [e.ims.im.width - im.width, im.width]; e.ims.h = [e.ims.im.height - im.height, im.height]; e (im); }; e.ims.im.src = im.src; return; } if (e.ims.timer) clearTimeout(e.ims.timer); e.ims.d = !e.ims.d; resize (); }; expConIm.ims = {}; expConIm.r = new RegExp('\bexpando\b'); if (document.addEventListener){ document.addEventListener('mouseover', expConIm, false); document.addEventListener('mouseout', expConIm, false); } else if (document.attachEvent){ document.attachEvent('onmouseover', expConIm); document.attachEvent('onmouseout', expConIm); } })(); } //]]> </script> <style> img.expando{ margin:10px; vertical-align: top; } </style> Y luego en tus entradas o donde lo quieras poner, usa este código para tus imágenes: Copia y pega el siguiente codigo Kanikase dijo:<img border="0" src="URL de la imagen" class="expando" width="100" /> Agrega la URL de la imagen donde se indica y listo, así de fácil y sencillo. La imagen que pongas deberá ser la que tiene el tamaño normal, y en donde se indica en color azul deberás poner el tamaño que tendrá la miniatura. SI TE GUSTAN MIS APORTES SIGUEME SI TE GUSTO MI POST DEJA PUNTOS
Hola a todos, hacía mucho que no creaba un post, así que en este tutorial les "enseñaré" a crear su propia web de Host de imágenes, desde cero, sera algo básica, lo único será en el index el formulario para subir la imagen y algunas imágenes que se han subido, así que sólo usaremos HTML, CSS y poco php, empecemos con el tutorial: Lo primero que se tienen que hacer, es abrir su editor de texto para programar (yo uso sublime text2), ahí crean un nuevo archivo, en "formato" php y dentro de el pegan lo siguiente: <!DOCTYPE html> <html> <head> <title>Host de imagenes</title> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head> <body> <div id="wrapper"> <header><a href="index.php"><h2 class="title">Host de imagenes</h2></a><div class="clear"></div></header> <div id="contenido"> <p>Para subir la imagen, lo único que tienes que hacer es seleccionar la imagen, en el formulario que encontrarás más abajo, cuando tengas seleccionada la imagen, sólo haces click en "<i>Subir imagen</i>", y luego te llevara a la pagina donde estará la imagen que seleccionaste, y los modos para insertarla en diferentes lugares.<br><br> Las "condiciones" para las imagenes son las siguientes:</p> <p class="condicion">La imagen debe tener un peso menor a 1.5 MB.</p> <p class="condicion">NO con contenido pornografico, gore, racismo etc.</p> <p class="condicion">La imagen de estár en formato png, jpg, gif, ico o bmp</p><br> <p style="margin-bottom:15px">Si estás seguro de que cumpliras con las condiciones anteriores, puedes continuar.</p> <div id="formulario"> <form action="complete.php" method="post" enctype="multipart/form-data"> <input type="file" name="imagen" style="width:400px;"/> <input type="submit" name="subir" value="Subir Imagen" /> </form> </div> <div id="ultimas"> <h2 style="margin-bottom:15px">Algunas imagenes que se han subido</h2> <?php function get_images(){ $arr_ext = array("bmp","BMP","gif","GIF","jpg","JPG","png","PNG","ico","ICO","jpeg","JPEG"); $mydir = opendir('./upload/'); while($file = readdir($mydir)){ $ext = substr($file, -3); if(in_array($ext, $arr_ext)){ if(!empty($size)){ $im_size = substr($file, -6, 2); if ($size == $im_size) $images_list[] = substr($file, 0, -7); }else $images_list[] = $file; } } return $images_list; } $images_list = get_images(); $i = 1; $limite = 8; foreach($images_list AS $img){ if($i <= $limite) echo '<img id="img-home" src="upload/'.$img.'" alt="Imagen" />'; $i++; } ?> </div> <div id="publicidad"><?php include '728x90.php' ?> </div> </div> </div> <footer> Copyright © <script>document.write(new Date().getFullYear());</script> </footer> </body> </html> Si no entienden ese código, lo único que teneos es como ya dije, el formulario para enviar la imagen, y algunas imagenes que se han subido, que serán 8 las que se mostrarán, eso lo pueden poner a su gusto. Ese archivo lo guardan en alguna carpeta, yo lo tengo en localhost/imagenes Ahora creamos otro archivo, este sera donde aparecer la imagen que se ha cargado, en nuestri editor creamos un nuevo archivo, también en formato php, dentro de el pegan el siguiente código: <?php //CONFIGURACIONES PARA EL UPLOAD $inicio = 'http://localhost/imagenes/'; //Página de inicio de la web, que termine en "/" $nombreimagen = $_FILES['imagen']['name']; //Nombre de la imagen $tmpimagen = $_FILES['imagen']['tmp_name']; //Directorio de la imagen $extimagen = pathinfo($nombreimagen); //Extension de la imagen $ext = array("bmp","BMP","gif","GIF","jpg","JPG","png","PNG","ico","ICO","jpeg","JPEG"); //Formatos permitidos $directorio = 'upload/';//A donde se subira la imagen $url = $directorio.md5($nombreimagen).'.'.$extimagen['extension']; $tamaño = getimagesize($_FILES['imagen']['tmp_name']); //Tamaño de la imagen list($ancho, $alto) = $tamaño; ?> <!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head> <body> <div id="wrapper"> <header><a href="index.php"><h2 class="title">Host de imagenes</h2></a><div class="clear"></div></header> <div id="contenido"> <?php if(isset($_POST['subir'])){ if(is_uploaded_file($tmpimagen)){ if(array_search($extimagen['extension'],$ext)){ copy($tmpimagen, $url); echo '<h2 class="modo">Imagen seleccionada:</h2><div id="cont-imagen"><a href="'.$url.'" target="_blank"><img class="imagen" src="'.$url.'" /></a></div>'; echo '<div id="publicidad">';include '728x90.php'; echo '</div>'; //Incluimoas la publicidad echo '<h2 class="modo">Enlace:</h2><pre id="cod">'.$inicio.$url.'</pre>'; echo '<h2 class="modo">HTML</h2><pre id="cod"><img src="'.$inicio.$url.'" /></pre>'; echo '<h2 class="modo">CSS y HTML (background)</h2><pre id="cod" style="text-align:left"><style type="text/css"> #img-background{ background: url('.$inicio.$url.'); width: '.$ancho.'px; height: '.$alto.'px; } </style> <div id="img-background"></div></pre>'; echo '<h2 class="modo">Foro/Comunidad</h2><pre id="cod">[IMG]'.$inicio.$url.'[/IMG]</pre>'; } else { echo 'Solo se permiten imágenes con formato bmp, jpg, gif o png<br>'; } } else { echo 'Selecciona una imagen.'; } } ?> <h2 class="modo" style="margin-top:30px">Selecciona otra imagen</h2> <div id="formulario"> <form action="complete.php" method="post" enctype="multipart/form-data"> <input type="file" name="imagen" style="width:400px;"/> <input type="submit" name="subir" value="Subir Imagen" /> </form> </div> </div> </div> <footer> Copyright © <script>document.write(new Date().getFullYear());</script> </footer> </body> </html> Ese código tiene las funciones, que son al inicio obtener los datos de la imagen, como extensión, directorio de la imagen y dimensiones, aemas de que se definen unas configuraciones, que son a donde se subirá la imagen, o mejor dicho a que carpeta, en este caso yo seleccione upload, pero la pueden cambiar. También usamos otro poco de php en el body, que lo único que hace es imprimir la imagen, y los metodos para insertarla, que yo seleccione, la imagen, el enlace directo, con la etiqueta img, con css yHTML (background) y código para foros. Es muy importante que arriba, se escriba la direccion principal de la web, y que termine con "/" en mi caso http://localhost/imagenes. Así se debería ver el código si usan Sublime text2 , así se vería la web hasta ahora: Se ve mal D: asi que le daremos estilo, para eso, en nuestro mismo editor de texto creamos un nuevo archivo, pero este en formato css, y en el pegamos el siguiente código: body{ background: #EFEFEF; margin: 0; font-family: sans-serif; background-image: url(hdr.png); background-size: 100% 50px; background-repeat: no-repeat; } h1, h2, h3, p{ margin:0; } .clear{clear:both;} #wrapper{ width: 900px; margin: auto; background: #FFF; box-shadow: 0 0 1px #333; } header{ padding: 10px 0; background: #000; } .title{ float: left; } header a{ color: #EEE; text-decoration: none; } #contenido{ padding: 10px; background: #F8F8F8; } h2.modo{ text-align: center; color: #444; } #cont-imagen { text-align: center; } .imagen { max-width: 800px; padding: 10px; box-shadow: 0 0 1px #333; margin-top: 10px } #cod { padding: 8px; background: #DFDFDF; border: 1px solid #A7A7A7; overflow: auto; text-align: center; border-radius: 3px; font-family: monospace; } #formulario { background: #E4E4E4; padding: 10px; border: 1px solid #ACACAC; margin-bottom: 30px; } form { width: 500px; margin: 0 auto; } #img-home { padding: 5px; border: 1px solid #E2E2E2; margin: 0 5px 0 0; width: 200px; height: 200px; } #ultimas { text-align: center; margin: 10px 0; padding: 10px 0; } #publicidad{ width: 728px; margin: 10px auto; } p.condicion { color: #585858; font-style: italic; font-size: 15px; margin: 0 0 3px; } p.condicion::before { content: '--'; color: transparent; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAYAAAAiYZ4HAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9gKFBI5OnBYz50AAAChSURBVCjPlZJBCsIwEEVfS/EAbt16kB7FA7iPYhFaFM3eS3gLD9KtW08gxIVJGUKGIbNJPrwXJsM0IQRqqqWyOgDnXMrneE4l2Hv/FwQ8ijxZLa3EfQROljAAV5EvJSn/9ADcM+lgTemYSTcpaWN9AB+R98BaEzbAKwHAG+jTA60CbzN4LrVkwlLogKcFS+EL7CKowssuxZojiAYDNLXr/QO6nCauowYexgAAAABJRU5ErkJggg==); position: relative; margin: 0 4px 0 0; background-size: 13px 13px; background-repeat: no-repeat; top: 2px; } footer{ background: #000; padding: 10px; text-align: center; color: #FFF; } Y lo guardamos cono estilos.css y ya tendremos estilos en nuestra web, ahora se vera así: El error que sale es porque aun no hay imagenes en nuestra web. Ahora vamos a agregar publicaidad 728 x 90, en el editor de texto sólo creamos un archivo php y en el sólo pegamos nuestro codigo de publicidad 728 x 90 y lo guardamos como 728x90.php y listo, ya abremos terminado la web. Y ultimo paso, crea una carpeta en el directorio principal que se llame upload o si seleccionaste otro nombre, con el que hayas seleccionado. Opcional, puedes agregar arriba de todo <?php error_reporting(0) ?> para que no reporte si hay alguna falla. Así debe estar la carpeta. Ahora si ya está todo listo, sólo subimos todos los archivos y la carpeta a nuestro host. Importante este es un tutorial para crear la web básica, por lo que no agregue metaetiquetas, favicon, o algunas otras cosas menos importantes, que pueden agregar a su gusto, como logo a la web o más publicidad DEMO Eso es todo en este tutorial, espero que les guste.
Hola taringueros en este post les voy a enseñar a crear un sistema de registro,no explicaré mucho, si están aquí es porque ya deben saber algo, minimo de HTML, así que empecemos Lo primero, se van a su editor de texto, yo uso Sublime text 2, ustedes lo pueden hacer hasta con el block de notas :v Cuando ya tengan abirto su editor, crean un nuevo archivo en formato php y lo primero que tendrán que hacer es configurar la configuracion con mySQLi, hacen lo siguiente: <?php define('db_host', 'localhost'); //Host de la base de datos define('db_user', 'root'); //Usuario para acceder a la base de datos define('db_password'. ''); //La contraseña define('db_name', 'usuarios'); //Nombre de la base de datos $conexion = mysqli_conect(db_host, db_user, db_password, db_name); ?> Copian ese código al principio de el archivo que crearon Despúes creamos la estuctura básica de la página. <!DOCTYPE html> <html lang="es"> <head> <title>Formulario de registro</title> <meta charset="utf-8"> </head> <body> </body> </html> Listo, ya tenemos lo más básico, ahóra creamos el formulario para poner los datos, dentro de <body> pegan el siguiente código: <form action="" method="post"> <label for="nick">Escribe tu nick</label><input type="text" name="nick" required> <label for="nombre">Escribe tú nombre</label><input type="text" name="nombre" required> <label for="password">Escribe una contraseña</label><input type="password" name="password" required> <label for="repassword">Repite la contraseña</label><input type="password" name="repassword" required> <input type="submit" value="registrar" name="registrar"> </form> <br> <?php echo '<b>'.$existe.$registrado.$nocoincide.'</b>'; ?> Y listo, como ya dije eso lo metemos en el body de nuestra página. Ahora vamos a crear el php que verificará los datos y los enviara a la base de datos. <?php $comprobar = mysqli_query($conexion, 'SELECT nick FROM datos'); //Creamos el query $row = mysqli_fetch_assoc($comprobar) if(isset($_POST['registrar'])){ // Verificamos que se haga click :v if($_POST['password'] == $_POST['repassword']){ // Verificamos que las contraseñas coincidan if($row['nick'] == $_POST['nick']){ //Verificamos que el nick no exista $existe = 'Error, el nick que seleccionaste se encuentra en uso.'; } else { $registrado = 'Usuario registrado exitosamente.'; mysqli_query($conexion, 'INSERT INTO datos (nick, nombre, password) VALUES ("'.$_POST['nick'].'", "'.$_POST['nombre'].'", "'.$_POST['password'].'")'); } } else { $nocoincide = 'Error, las contraseñas no coincide.' } }?> Y listo, ya tenemos todo :v El código final sería así: <?php define('db_host', 'localhost'); //Host de la base de datos define('db_user', 'root'); //Usuario para acceder a la base de datos define('db_password'. ''); //La contraseña define('db_name', 'usuarios'); //Nombre de la base de datos $conexion = mysqli_conect(db_host, db_user, db_password, db_name); ?> <!DOCTYPE html> <html lang="es"> <head> <title>Formulario de registro</title> <meta charset="utf-8"> </head> <body> <?php $comprobar = mysqli_query($conexion, 'SELECT nick FROM datos'); //Creamos el query $row = mysqli_fetch_assoc($comprobar) if(isset($_POST['registrar'])){ // Verificamos que se haga click :v if($_POST['password'] == $_POST['repassword']){ // Verificamos que las contraseñas coincidan if($row['nick'] == $_POST['nick']){ //Verificamos que el nick no exista $existe = 'Error, el nick que seleccionaste se encuentra en uso.'; } else { $registrado = 'Usuario registrado exitosamente.'; mysqli_query($conexion, 'INSERT INTO datos (nick, nombre, password) VALUES ("'.$_POST['nick'].'", "'.$_POST['nombre'].'", "'.$_POST['password'].'")'); } } else { $nocoincide = 'Error, las contraseñas no coincide.' } }?> <form action="" method="post"> <label for="nick">Escribe tu nick</label><input type="text" name="nick" required> <label for="nombre">Escribe tú nombre</label><input type="text" name="nombre" required> <label for="password">Escribe una contraseña</label><input type="password" name="password" required> <label for="repassword">Repite la contraseña</label><input type="password" name="repassword" required> <input type="submit" value="registrar" name="registrar"> </form> <br> <?php echo '<b>'.$existe.$registrado.$nocoincide.'</b>'; ?> </body> </html> Lo último, creamos una base de datos que se llame usuarios, y en ella ejecutamos la siguiente consulta sql: CREATE TABLE `datos` ( `id` int(11) NOT NULL AUTO_INCREMENT, `nick` varchar(50) NOT NULL, `nombre` int(100) NOT NULL, `password` varchar(32) NOT NULL, PRIMARY KEY (`id`) ) Pr´ximo tutorial como crear el login
Hola Taringueros hacía ya tiempo que no hacía un tutorial, y ya me dieron ganas de hacer uno, en este les dejaré el código para que hagan su propio script para contador de visitas, está en php, para mostrar las visitas utiliza javascript para que pueda funcionar en Blogger, es sencillo, y no se necesita mucho, así que el tutorial será corto. Primero vamos a abrir nuestro editor de código, puede ser hasta el block de notas, ya ahí creamos un nuevo archivo, y lo nombramos visitas.php, en el pegamos: <?php ob_start(); header("Content-type: text/javascript"); // Creamos la conexion $con = @mysqli_connect('localhost', 'USER_BD', 'PASS_BD', 'NAME_BD') or die("document.write('Error');"); // Obtenemos, y validamos url $url = $_SERVER['HTTP_REFERER']; if (!$url || $url == '') { die(); } // Obtenemos los datos de la bd $sql = "SELECT `visitas` FROM `visitas` WHERE `url`='$url'"; $query = mysqli_query($con, $sql); $row = mysqli_fetch_assoc($query); // creamos las querys verificando primero las cookies, para contar visitas y no impresiones if (isset($_COOKIE[md5($url)])) { // cuando si existe la cookie solo le damos el valor a $visitas $visitas = $row['visitas']; echo "document.write($visitas);"; } elseif (!isset($_COOKIE[md5($url)])) { // Comprobamos si la url ya esta en la bd $rows = mysqli_num_rows($query); if ($rows > 0) { // Cuando si existe la url actualizamos $SQL = "UPDATE `visitas` SET `visitas`=visitas+1 WHERE `url`='$url'"; if (mysqli_query($con, $SQL)) { // Si se inserta la visita $visitas = ($row['visitas']) + (1); // Le sumamos uno para mostrar la visita actual echo "document.write($visitas);"; setcookie(md5($url), '_vStD', time() + 86400); // Y creamos la cookie de 1 dia } else { // Si no se inserta la visita $visitas = $row['visitas']; // Solo obtenemos las visitas echo "document.write($visitas);"; } } elseif ($rows == 0) { // Cuando no existe la url en la bd la insertamos $SQL = "INSERT INTO `visitas` (`url`,`visitas`) VALUES ('$url',1)"; if (mysqli_query($con,$SQL)) { // Si se inserta la nueva url echo "document.write(1);"; setcookie(md5($url), '_vStD', time() + 86400); // Y creamos la cookie de 1 dia } else { // Si no se inserta echo "document.write(0);"; } } } // Por ultimo cerramos la conexion, y matamos el script ob_end_flush(); mysqli_close($con); die(); ?> Ahí viene todo comentado, para que es cada código. Ya que lo tengan a lo van a subir normal a su hosting, como siempre, y después van a crear la bd, para guardar las visitas, a la bd la llaman así como hayan puesto en la conexión (linea 5), ya creada, en el mismo phpmyadmin se van a SQL y ahí pegan lo siguiente: CREATE TABLE `visitas` ( `id` int(7) NOT NULL AUTO_INCREMENT, `url` text NOT NULL, `visitas` int(7) NOT NULL, PRIMARY KEY (`id`), ); Eso les creará la tabla, para guardar los registros xD Y ya eso sería todo. Otro paso opcional, es usar htaccess, para cambiar la extensión, de php a .js, yo lo hago porque me gusta, si lo quieren hacer, crean el archivo .htaccess y en el pegan: RewriteEngine on RewriteRule ^visitas.js visitas.php Y ya estará. Por último, para mostrar las visitas, donde queramos ponemos el script, es de la siguiente forma: Visitas: <script src="//DOMINIO.COM/visitas.js"></script> Y solo tienen que cambiar DOMINIO.COM por su dominio donde lo hayan subido, y ya les mostrará las visitas, el script solo devuelve un número, por si lo quieren personalizar a su gusto. Y ya eso es todo, lo pueden usar donde quieran, Blogger, Wordpress, para contar las visitas de las entradas. Aclaración: El script trabaja con cookies, por eso cuando creamos la cookie, el nombre se lo ponemos de la url codificado en md5, para que los usuarios de la web no sepan que es y no borren la cookie, si no van a poner muchas impresiones.