viernes, 10 de octubre de 2014

Generador de Imagen thumbnail en base 64 (readAsDataURL) con JavaScript

Una manera facil y sencilla de cargar una imagen y generar un thumbnail con el objeto FileReader de JavaScript, usando usar readAsDataURL () para obtener imágenes que un usuario ha seleccionado y una vista previa en la pantalla. 

Code

<!DOCTYPE html>
<input type="File" id="image_file" accept="image/*">
<input type="button" value="import" onclick="importImageToData()"><br><br>
<script>
function importImageToData(){
var imageFile = document.getElementById("image_file").files[0];
var formatreader = new FileReader();
formatreader.onloadend = function(e){
console.log("file Loaded");
var imageData = e.target.result;
var viewdata = document.createElement("textarea");
var img = document.createElement("img");
img.src = viewdata.value = imageData;
document.body.appendChild(img);
document.body.appendChild(document.createElement("br"));
document.body.appendChild(viewdata);
viewdata.select();
}
formatreader.readAsDataURL(imageFile);
};
</script>

jueves, 11 de septiembre de 2014

Menú desplegable con CSS

Este es un menú desplegable muy simple que usa algunas técnicas de CSS3 que lo hacen llamativo en algunos navegadores pero al que podemos modificar un poco para que funcione bien en cualquier navegador.



+ Seleccione una opcion


El HTML no tiene muchos misterios; en un DIV con una clase a la que llamamos drop-menu, colocamos un SPAN que es lo que nos servirá para desplegar y contraer el menú que está en una lista ordenada:

<div class="drop-menu"> 
<span class="plus">+</span>
Seleccione una opción del menú
 <ul class="sub-menu"> 
 <li><a href="URL1"><img src="URL_imagen1"/>Texto enlace 1</a></li>   
<li><a href="URL2"><img src="URL_imagen2"/>Texto enlace 2</a></li> 
 <li><a href="URL3"><img src="URL_imagen2"/>Texto enlace 3</a></li> 
</ul>
</div>

Como siempre, la clave está en el CSS y allí hay muchas variantes. Este sería el necesario para realizar el ejemplo:

.drop-menu {  
background-color: #242F3A;  
border: 1px solid #343F4A;  
cursor: pointer;  
display: block;  
font-family: Tahoma;  
font-size: 20px;  
height: 25px;  
letter-spacing: -1px; 
 margin: 0 auto;  
 max-height: 
 25px;  padding: 10px;  
 position: relative;  
 text-align: left;  
 width: 300px;  
 z-index: 1000;
 }
.plus {  display: inline-block;
  font-family: Georgia; 
  font-size: 22px;  
  font-weight: bold;
  margin-right: 10px;
  -moz-transition: .3s ease-in-out; 
  -o-transition: .3s ease-in-out; 
  -webkit-transition: .3s ease-in-out;
 }
  
  .drop-menu:hover {}.drop-menu:hover .sub-menu {  display: inline-block;}
  .drop-menu:hover .plus {  -moz-transform: rotate(45deg);  
  -o-transform: rotate(45deg); 
  -webkit-transform: rotate(45deg);}
  
  .sub-menu {  background-color: #242F3A; 
  background:image: -moz-linear-gradient(100% 100%  90deg, #000000, #242F3A); 
  background-image: -webkit-gradient(linear, left bottom, left top, from(#000000), to(#242F3A)); 
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF242F3A', EndColorStr='#FF000000'); 
  border: 1px solid #343F4A; 
  display: none;  
  border-top: none;  
  margin-left: -11px !important;  
  margin-top: 5px;  padding: 10px;  
  width: 300px;}
  
  .sub-menu li {  display: block; 
  font-size: 20px; 
  height: 22px; 
  list-style-type: none; 
  padding: 8px 0;}
  
  .sub-menu li img { 
  margin-right: 10px; 
  vertical-align: top;}
  
  .sub-menu li:hover {}.sub-menu a { color: #DDD; 
  font-size: 20px; 
  font-family: Tahoma
  }
  
  .sub-menu a:hover {color: #ABC;}

Ventanas con IFRAME

El tag IFRAME permite insertar una ventana (un marco) dentro de la misma ventana donde puede incluirse un objeto externo, incluyendo otro documento HTML.

<iframe> ....... atributos ....... </iframe>

Donde los atributos son:

  • align=[top|middle|bottom|left|right] alineamiento
  • class=valor clase de estilo
  • frameborder=[0|1] bordes al marco (NO,SI)
  • id=valor nombre único
  • height=valor alto en pixeles)
  • longdesc=url descripción larga
  • marginheight=valor alto del margen (en pixeles)
  • marginwidth=valor ancho del margen (en pixeles)
  • name=texto nombre destino del marco
  • scrolling=[yes|no|auto] barras de desplazamiento
  • src=url dirección del contenido
  • style=definiciones reglas de estilo
  • title=texto herramienta de ayuda
  • width=valor ancho (en pixeles)


Un ejemplo típico:

<iframe src="pagina.html" width="400" height="500"
   scrolling="auto" frameborder="1">
   [su navegador no soporta marcos]
</iframe>


El uso de IFRAME no parece muy extendido entre los usuarios, pero tiene algunas ventajas, por ejemplo, se pueden crear secciones en las que se inserte contenido de otras páginas:


Desplazamientos de textos con MARQUEE

La etiqueta <MARQUEE> </MARQUEE> crea una marquesina cuyo contenido se desplaza. Por defecto, ocupa todo el ancho de la pantalla, tiene una línea de altura y el texto se mueve lentamente de derecha a izquierda.

Esta es una marquesina por defecto.
Los atributos WIDHT y HEIGHT permiten controlar el ancho y el alto de la marquesina y pueden expresarse en pixeles o porcentualmente. El atributo ALIGN permite alinear el texto que rodea la marquesina, y puede tener los siguientes valores: top (arriba), middle (centrado) bottom (abajo). Los atributos HSPACE y VSPACE definen la separación horizontal y vertical del texto con los bordes de la marquesina:


<marquee width="50%" height="60" align="bottom">

... texto ...
</marquee>

Esta marquesina ocupa el 50% del ancho, tiene una altura de 60 pixels y está alineada con la parte inferior.

El color de fondo puede establecerse con el atributo BGCOLOR o, utilizando el atributo STYLE, podemos establecer cualquier propiedad, de manera similar al resto de las etiquetas HTML:

Esto se ve con la fuente Impact

<marquee style="...propiedades...">
... texto ...
</marquee>

Para controlar más efectivamente las marquesinas, existen una serie de atributos especiales:

DIRECTION se utiliza para modificar la dirección hacia la que se dirige el texto. Puede ser left (el valor por defecto), right, up o down:




Este txto va de derecha aizquierda Este texto se desplazará de abajo hacia arriba texto dentor de una caja

Texto con direccion de izquirda - derecha

Con el atributo SCROLLDELAY se define el tiempo entre cada movimiento expresado en milisegundos:

<marquee scrolldelay="100">
Velocidad = 100.
</marquee>

Estás viendo el ejemplo con scrolldelay = 100.


LOOP indica el número de veces que aparecerá el texto y por defecto, es infinito.

Con SCROLLAMOUNT controlamos la cantidad de desplazamiento del texto en cada movimiento de avance. Cuanto mayor es el número, más rápido avanza:

<marquee scrollamount="50">
SCROLLAMOUNT=50
</marquee>


SCROLLAMOUNT=100 SCROLLAMOUNT=50 SCROLLAMOUNT=30 SCROLLAMOUNT=10

Por último, el atributo BEHAVIOR (comportamiento) sirve para definir de que manera se va a efectuar el desplazamiento y puede tener los siguientes valores:
scroll (valor por defecto), aparece por un lado, se desplaza hasta el otro, desaparece y vuelve a empezar
slide aparece por un lado, se desplaza y se detiene (sólo funciona en Internet Explorer).
alternate se desplaza alternativamente hacia un lado y el otro.

Las marquesinas no sólo pueden contener textos, también pueden contener otros elementos, por ejemplo, imágenes, vínculos o tablas:

TABLA
CELDA A CELDA B
CELDA C CELDA D

Tag META

El tag META nos permite proporcionar información adicional sobre nuestra página y su contenido. Muchos buscadores usan esta información para crear sus índices. Es una buena idea saber cómo usarlos y cómo agregarlos a nuestro blog.

Los elementos META deben ubicarse en el HEADER y su forma más simple es la siguiente:
<META name='tipo' content='contenido' />

META description está considerado como imprescindible, es el que utilizan los buscadores y, muchas veces, es su contenido el que muestran como sumario de una página. Simplemente es un texto descriptivo del contenido de la página (en este caso del blog entero) sin ningún tipo de restricción, aunque se recomienda no incluir el título dentro del mismo. Qué y cuánto poner parece subjetivo, unos dicen que deber ser conciso mientras otros dicen que debe ser amplio (hasta 150 caracteres). Su código es el siguiente:
<meta name="description" content="... texto_personal ..." />

META keywords también está considerado como imprescindible, contiene palabras clave que sirven de referencia del contenido. Pueden colocarse hasta 1024 caracteres, separando cada palabra por medio de una coma o un espacio:
<meta name="keywords" content="... palabra, palabra, palabra ..." />

META refresh permite establecer cada cuánto tiempo (expresado en segundos) se recargará la página:
<meta http-equiv="refresh"content="segundos" />

Con refresh también podemos redireccionar al usuario de una pagina a otra:
<meta http-equiv="refresh" content="segundos;URL=http://www.xxxxx/index.htm" />

META Robots los robots son programas que usan los buscadores para indexar las páginas (visitan y registran todos los vínculos en su base de datos):
<meta meta name="robots" content="TIPO" />

Donde TIPO va a indicar cómo queremos que actuen los robots:
content="all" todas las paginas son indexadas
content="noindex,nofollow" no añade la página al motor de búsqueda
content="noindex,follow" no añade la página inicial pero si resto de lo enlaces
content="none" igual que el anterior
content="index,nofollow" sólo indexa la pagina inicial
content="index,follow" indexa la página y todos sus vínculos (opción por defecto y la más utilizada)

El uso de META author, META copyright, META date, META language y META rating es evidente:
<meta name="Author" content="... nombre_autor ..." />
<meta name="copyright" content="... texto_advertencia ..." />
<meta name="Date" content="... fecha ..." />
<meta name="language" content="es" />
<meta name="rating" content="general|mature" />

Hay más, estas, sólo las enumero a modo informativo ya que su aplicación es bastante relativa:

META Cache-Control y META Pragma evitan que la página sea guardada en la caché del usuario. La primera es de uso genérico y la segunda es para los navegadores Netscape. Son útiles cuando tenemos un sitio que se actualiza muy seguido pero sus resultados son poco fiables:
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />

META Expires permite la caché pero le da un tiempo, pasado este, obliga al navegador a cargar la página desde el servidor (la fecha debe estar en formato GMT):
<meta http-equiv="Expires" content="... fecha ..." />

Si se quiere que sea inmediatamente utilizar:
<meta http-equiv="Expires" content="0" />


Eso es todo. Incluir description y keywords me parece casi obligatorio pero tengan en cuenta que el uso de palabras claves falsas para mejorar las estadísticas está considerado un fraude por los motores de búsqueda.

Generación de Contraseña en PHP

Este script permite generar contraseñas aleatorias de cualquier longitud requerida con cualquier combinación de caracteres.
Contraseña generada aleatoriamente: m1ztpxw8

El código:

function GeneraPassword ( $length = 6 ) {
 $Password = '' ;
 $posible = '23456789bcdfghjkmnpqrstvwxyz' ;
 $i = 0 ;
 while ( $i < $length ) {  
            $Password .= substr ( $posible , mt_rand ( 0 , strlen ( $posible ) - 1 ) , 1 ) ;
            $i++;
 } 
 return $Password ;
 }

Uso

<? Php
$password = GeneraPassword ( 8 ) ;
Echo $password;

 ?>

Imágenes PHP- Captcha de seguridad

Este script genera imágenes (conocidos como "Captcha" ) que contienen  códigos de seguridad utilizados para proteger una forma contra los robots de spam. Mediante la codificación  de un 'password' dentro de una imagen y pidiendo al usuario que vuelva  entrar en lo que ven con el fin de verificar que el usuario es un humano y no un  software automatizado.




Probemos los códigos para ver cómo funciona:

<?php
session_start();
class CaptchaSecurityImages {
            var $font = 'monofont.ttf';
            function generateCode($characters) {
                        $possible = '23456789bcdfghjkmnpqrstvwxyz';
                        $code = '';
                        $i = 0;
                        while ($i < $characters) {
                                   $code .= substr($possible, mt_rand(0, strlen($possible)-1), 1);
                                   $i++;
                        }
                        return $code;
            }

            function CaptchaSecurityImages($width='120',$height='40',$characters='6') {
                        $code = $this->generateCode($characters);
                        /* font size will be 75% of the image height */
                        $font_size = $height * 0.75;
                        $image = @imagecreate($width, $height) or die('No se puede inicializar nuevo flujo de imagen GD');
                        $background_color = imagecolorallocate($image, 255, 255, 255);
                        $text_color = imagecolorallocate($image, 20, 40, 100);
                        $noise_color = imagecolorallocate($image, 100, 120, 180);
                        for( $i=0; $i<($width*$height)/3; $i++ ) {
                                   imagefilledellipse($image, mt_rand(0,$width), mt_rand(0,$height), 1, 1, $noise_color);
                        }
                        for( $i=0; $i<($width*$height)/150; $i++ ) {
                                   imageline($image, mt_rand(0,$width), mt_rand(0,$height), mt_rand(0,$width), mt_rand(0,$height), $noise_color);
                        }
           
                        $textbox = imagettfbbox($font_size, 0, $this->font, $code) or die('Error in imagettfbbox function');
                        $x = ($width - $textbox[4])/2;
                        $y = ($height - $textbox[5])/2;
                        imagettftext($image, $font_size, 0, $x, $y, $text_color, $this->font , $code) or die('Error en la función imagettftext');

                        header('Content-Type: image/jpeg');
                        imagejpeg($image);
                        imagedestroy($image);
                        $_SESSION['security_code'] = $code;
            }

}

$width = isset($_GET['width']) ? $_GET['width'] : '120';
$height = isset($_GET['height']) ? $_GET['height'] : '40';
$characters = isset($_GET['characters']) && $_GET['characters'] > 1 ? $_GET['characters'] : '6';

$captcha = new CaptchaSecurityImages($width,$height,$characters);


?>


Eso es básicamente el archivo que nos ayudara hacer nuestro captcha, también puedes descargar el código y ver un ejemplo haciendo Click Aqui


miércoles, 10 de septiembre de 2014

Cambiar el tamaño de imágenes con PHP

Si usted está buscando la forma de como cambia el tamaño de las imágenes subidas al servidor fácilmente en miniatura o el tamaño que usted desee darle, en hora buena el siguiente script le permitirá cambiar fácilmente el tamaño de las imágenes usando PHP y la libreria GD. 

USO


Copiar y guardar la clase que nos permitirá realizar el cambio de  tamaño de la imagen en un archivo con el nombre de SimpleImage.php y listo, empezamos a usar la clase.

El Codigo: 

<?php
class SimpleImage {
 var $image;
  var $image_type;
   function load($filename) {
      $image_info = getimagesize($filename);
      $this->image_type = $image_info[2];
      if( $this->image_type == IMAGETYPE_JPEG ) {
         $this->image = imagecreatefromjpeg($filename);
      } elseif( $this->image_type == IMAGETYPE_GIF ) {
         $this->image = imagecreatefromgif($filename);
      } elseif( $this->image_type == IMAGETYPE_PNG ) {
         $this->image = imagecreatefrompng($filename);
      }
   }

   function save($filename, $image_type=IMAGETYPE_JPEG, $compression=75, $permissions=null) {
      if( $image_type == IMAGETYPE_JPEG ) {
         imagejpeg($this->image,$filename,$compression);
      } elseif( $image_type == IMAGETYPE_GIF ) {
         imagegif($this->image,$filename);        
      } elseif( $image_type == IMAGETYPE_PNG ) {
         imagepng($this->image,$filename);
      }  
      if( $permissions != null) {
         chmod($filename,$permissions);
      }
   }
  
   function output($image_type=IMAGETYPE_JPEG) {
      if( $image_type == IMAGETYPE_JPEG ) {
         imagejpeg($this->image);
      } elseif( $image_type == IMAGETYPE_GIF ) {
         imagegif($this->image);        
      } elseif( $image_type == IMAGETYPE_PNG ) {
         imagepng($this->image);
      }  
   }

   function getWidth() {
      return imagesx($this->image);
   }
   function getHeight() {
      return imagesy($this->image);
   }
   function resizeToHeight($height) {
      $ratio = $height / $this->getHeight();
      $width = $this->getWidth() * $ratio;
      $this->resize($width,$height);
   }

   function resizeToWidth($width) {
      $ratio = $width / $this->getWidth();
      $height = $this->getheight() * $ratio;
      $this->resize($width,$height);
   }

   function scale($scale) {
      $width = $this->getWidth() * $scale/100;
      $height = $this->getheight() * $scale/100;
      $this->resize($width,$height);
   }

   function resize($width,$height) {
      $new_image = imagecreatetruecolor($width, $height);
      imagecopyresampled($new_image, $this->image, 0, 0, 0, 0, $width, $height, $this->getWidth(), $this->getHeight());
      $this->image = $new_image;  
   }     
}

?>


El primer ejemplo siguiente carga un archivo denominado imagen.jpg y cambia su tamaño a 250 píxeles de ancho y 400 píxeles de alto y vuelva a guardarlo como picture2.jpg

<?php
include ( 'SimpleImage.php' ) ;
$image = new SimpleImage ( ) ;
$image -> load ( 'picture.jpg' ) ;
$image -> resize ( 250 , 400 ) ;
$image -> save ( 'picture2.jpg' ) ;
?>

Si desea cambiar el tamaño a un ancho especficado para mantener la relación de las dimensiones de la misma, entonces la secuencia de comandos puede calcular la altura requerida, sólo tiene que utilizar la función resizeToWidth.

<?php
include ( 'SimpleImage.php' ) ;
$image = new SimpleImage ( ) ;
$image -> load ( 'picture.jpg' ) ;
$image -> resizeToWidth(250) ;
$image -> save ( 'picture2.jpg' ) ;
?>


Es posible que desee escalar una imagen a un porcentaje especificado como la siguiente que cambia el tamaño de la imagen al 50% de su anchura y altura original.

<?php
include ( 'SimpleImage.php' ) ;
$image = new SimpleImage ( ) ;
$image -> load ( 'picture.jpg' ) ;
$image -> scale (50) ;
$image -> save ( 'picture2.jpg' ) ;
?>

Por supuesto, puedes hacer más de una cosa a la vez. El siguiente ejemplo creará dos nuevas imágenes con alturas de 200 píxeles y 500 píxeles.

<?php
include ( 'SimpleImage.php' ) ;
$image = new SimpleImage ( ) ;
 $image -> load ( 'picture.jpg' ) ;
$image -> resizeToHeight ( 500 ) ;
$image -> save ( 'picture2.jpg' ) ;
$image -> resizeToHeight ( 200 ) ;
$image->save('picture3.jpg' );
?>

La función output te permite enviar la imagen directamente al navegador sin tener que guardar el archivo. Su utilidad es para la generación de imágenes en miniaturas.

<? Php
header ( 'Content-Type: image/jpeg' ) ;
include ( 'SimpleImage.php' ) ;
 $image = new SimpleImage ( ) ;
 $image -> load ('picture.jpg') ;
$image -> resizeToWidth (150) ;
 $image -> output ( ) ;
 ?>

El siguiente ejemplo cambia el tamaño y guarda una imagen que se ha subido a través de un formulario.

<?php
if(isset($_POST['submit'])) {
 include('SimpleImage.php');
$image = new SimpleImage();
$image->load($_FILES['uploaded_image']['tmp_name']);
 $image->resizeToWidth(150);
$image->output(); }
 else {   ?>  
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="uploaded_image" />  
<input type="submit" name="submit" value="Upload" /> 
 </form>  
<?php } ?>

Tambien puedes descargar el codigo mas un ejemplo. Download Code