Artículos
HTML5

Patrones en formularios con HTML5 pattern

03/Mar/2013

Para realizar la validación de un formulario de lado del cliente siempre recurriamos a scripts en JavaScript o usar alguna librería para verificar que los inputs sean los correctos, que estén completos con datos antes de que el formulario sea enviado. En HTML5 tenemos la posibilidad de aplicar patrones con HTML5 pattern.

En el nuevo estándar de HTML5, nuevos atributos de los input como required y pattern usados en combinación con CSS selectors nos facilita la tarea y mejora la interfaz de aviso al usuario.

Atributo HTML5 pattern

El atributo HTML5 pattern especifica una expresión regular usada para validar los valores del elemento input.

Este atributo funciona con los tipos de entrada input siguientes: texto, búsqueda, url, teléfono, correo electrónico y contraseña.

Usar el atributo de «tittle» para describir el HTML5 pattern para ayudar al usuario.

Ejemplo de uso de HTML5 pattern

Digamos que necesitamos que el input tenga el siguiente formato: Las primeras 3 letras del nombre de tu país. El uso de required y pattern nos asegura que el input debe ser completado y siguiendo la expresión regular. Al pararse el usuario sobre el input, el mensaje en el atributo title es mostrado, lo cual ayuda  a darle una pista al usuario de cómo debe llenar el formulario.

Puedes encontrar una gran cantidad de patrones en la web HTML5 Pattern.

Vídeos sobre HTML5

Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML5

¿Te atreves a probar tus habilidades y conocimiento en HTML5 con nuestro test?

Test HTML5
PHP

Codificar una imagen en base 64 con PHP

06/Feb/2013

Codificar una imagen e insertarla directamente en el código nos facilita la tarea de optimizar las páginas web y hacerlas más rápidas. Esto nos da la ventaja de acelerar la carga al disminuir las peticiones necesarias, además evita el uso de archivos externos.

Base 64 es un tipo de codificación diseñado para que datos binarios sobrepasen capas de transporte que no son de 8-bits. La información codificada con este sistema dará como resultado una secuencia de letras, que constituye un archivo y puede ser decodificado y mostrado correctamente por cualquier navegador web.

Codificando la imagen en base 64

Codificar un archivo es algo sencillo, ya que PHP incluye una librería que permite la conversión en base64 de la siguiente forma mediante el método base64_encode.

string base64_encode (cadena o datos)

Por ejemplo para codificar una cadena de texto utiliza el siguiente código:

En el siguiente ejemplo podemos ver como se codifica/decodifica en base64 con PHP:

"; //Se muestra Hola mundo
echo $codificado; //Se muestra SG9sYSBtdW5kbw==
?>

Una vez que hemos visto como se codifica/decodifica  una cadena de texto, veremos este ejemplo de cómo codificar una imagen en base 64 con PHP:

Lo que hemos hecho ha sido obtener el contenido de la imagen del directorio mediante file_get_contents y pasarla a base64 con base64_encode.

Para insertarla en nuestra página web sería algo como esto:

echo "";

Donde imdata es datos base64.

Artículos
PHP

Alto y ancho de una imagen en PHP

23/Ene/2013

En este ejemplo veremos cómo obtener de manera sencilla información sobre una imagen en PHP, específicamente su ancho y su alto de manera que podamos manipular nuestra imagen de manera sencilla en nuestra aplicación. Así que pongámonos manos a la obra para poder calcular el alto y ancho de una imagen en PHP.

PHP nos recomienda el método getimagesize() la cual determinará el tamaño de un archivo de imagen dado y devolverá las dimensiones junto con el tipo de archivo y una cadena de texto con el alto/ancho para ser usada dentro una etiqueta IMG de HTML normal y el tipo de contenido HTTP correspondiente.

getimagesize() también puede devolver alguna información más con el parámetro imageinfo. A continuación veremos como obtener información sobre la imagen:

<?php 

 $file = "logo.png";  // Dirección de la imagen

 $imagen = getimagesize($file);    //Sacamos la información
 $ancho = $imagen[0];              //Ancho
 $alto = $imagen[1];               //Alto

 echo "Ancho: $ancho";
 echo "Alto: $alto";

?>

El retorno de la función getimagesize() es un array, el cual dependiendo de la posición, contiene una información u otra. Así en la posición 0 tenemos el ancho y en la posición 1 tenemos el alto.

Sin embargo también podemos obtener más información de la imagen como por ejemplo su tipo: JPG, PNG,…:

list($width, $height, $type, $attr) = getimagesize("imagen.jpg");

echo "Ancho de imagen: " .$width;
echo '';
echo "Alto de imagen: " .$height;
echo '';
echo "Tipo de imagen: " .$type;
echo '';
echo "Atributos: " .$attr;

Los tipos de imagen que podemos encontrar en $type son:

1 = GIF 5 = PSD 9 = JPC 13 = SWC
2 = JPG 6 = BMP 10 = JP2 14 = IFF
3 = PNG 7 = TIFF 11 = JPX 15 = WBMP
4 = SWF 8 = TIFF 12 = JB2 16 = XBM

Además la documentación de PHP nos da mas referencias acerca del procesamiento de imágenes, algunas funciones que nos ofrece son:

Para consultar mas métodos puedes visitar la documentación de procesamiento de imágenes en PHP en http://php.net/manual/es/book.image.php

Esperemos que os haya servido de utilidad este ejemplo para saber como poder calcular el alto y ancho de una imagen en PHP.

Código Fuente

Descárgate el código fuente de Alto y ancho de una imagen en PHP
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star
PHP

Obtener la URL actual con PHP

21/Ene/2013

En este post veremos cómo obtener la URL actual por medio de un par de funciones con PHP, además de obtener la URL también podemos obtener ciertos detalles como el puerto, el protocolo y el host.

En PHP existen varias variables que ofrecen datos sobre la URL que se está ejecutando. Nosotros podemos obtener diferentes datos a través de estas variables según nos convenga. Por ejemplo, con las variable $_SERVER de PHP siguientes puedes obtener esa URL que estamos ejecutando:

  • $_SERVER[«REQUEST_URI»], devuelve la URL que se está ejecutando, relativa a la raíz del dominio
  • $_SERVER[«PHP_SELF»], devuelve el script que se está ejecutando, relativo a la raíz del dominio, que puede ser distinto a REQUEST_URI
  • $_SERVER[«SERVER_NAME»] Almacena el servidor donde está alojada la página

De esta manera podríamos juntar las variables y concatenarlas en una sola para obtener la URL completa de manera sencilla

$url_actual = "http://" . $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"];
echo "$url_actual";

También podemos obtener más datos además de la URL, como lo son el protocolo, el host y el puerto que se esta usando, a continuación les muestro el código para obtener dichos datos:


Una vez que la función obtenerURL ha montado la URL lo que hacemos es descomponerla mediante la función parse_url para ver las partes que lo componen.

$url = obtenerUrl();
$datos = parse_url($url);

foreach ($datos as $key=>$value) {
  echo "$key: $value 
"; } $url_actual = "http://" . $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"]; echo "$url_actual"; ?>
PHP

Convertir a mayúsculas y a minúsculas en PHP

11/Ene/2013

En PHP es muy sencillo controlar el texto ya que contamos con varias funciones que nos ayudan a darle formato según requiera nuestra aplicación, las 4 funciones principales son:

  • strtolower: convierte a minúsculas
  • strtoupper: convierte a mayúsculas
  • ucwords: convierte a mayúsculas todas las primeras letras de cada palabra
  • ucfirst: convierte a mayúsculas solo la primera letra de toda la cadena de texto

Veamos un ejemplo con cada una:

 echo strtoupper("hola usuario"); -->HOLA USUARIO --> todo a mayúsculas
echo strtolower("hola USUARIO"); --> hola usuario --> todo a minúsculas
 echo ucfirst("hola"); --> Hola --> Primer letra mayúscula
echo ucwords ("hola usuario"); --> Hola Usuario -Mayúscula-> todas las primeras letras

Sin embargo esto anterior no es válido muchas veces en UTF-8, para resolver este problema podemos usar la función mb_convert_case la cual realiza una conversión a mayúsculas/minúsculas en un string, de acuerdo al modo especificado por mode.

La función es como sigue:

string mb_convert_case(string $str, int $mode = MB_CASE_UPPER [, string $encoding = mb_internal_encoding() ] )

Parámetros:

  • str, string que se va  a convertir.
  • mode, el modo de conversión. Puede ser MB_CASE_UPPER, MB_CASE_LOWER, o MB_CASE_TITLE.
  • encoding, el parámetro encoding es la codificación de caracteres. Si es omitido, será usado el valor de la codificación de caracteres interna.

De esta manera podemos utilizar la función mb_convert_case de la siguiente manera:

Artículos
PHP

Generar un número aleatorio en PHP

09/Ene/2013

En este post veremos cómo generar un número aleatorio en PHP de manera sencilla haciendo uso de dos métodos diferentes: rand y mt_rand. Así aprenderemos de una forma más sencilla a manejar los números en PHP.

PHP nos facilita la obtención de números aleatorios con la función rand(), que recibe un par de valores, el mínimo y el máximo de los números aleatorios a generar. En este demo vamos a obtener un número aleatorio entre 1 y 30, incluyendo estos dos valores entre los posibles, si no se indica nada a rand(), el valor mínimo será cero.

El valor máximo depende de la plataforma donde se esté ejecutando PHP, por ejemplo en Windows el valor máximo sería 32786. Si queremos asegurarnos que este valor máximo sea mayor, entonces conviene definir los valores máximo y mínimo al llamar a la función.

Ahora veamos el código:

<?php
  $d=rand(1,30);
  echo $d ;
?>

Con este sencillo par de líneas nosotros podemos obtener un número aleatorio. También podemos obtener un numero aleatorio con la función mt_rand() la cual es mucho mejor que rand() ya que es mucho más rápida y con un mejor algoritmo de obtención de números aleatorios.

<?php
  $d=mt_rand(1,30);
  echo $d ;
?>

Con estas funciones nosotros podemos generar un número aleatorio en PHP de manera fácil y rápida.

Código Fuente

Descárgate el código fuente de Generar un número aleatorio en PHP
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star