Bluegriffon, editor HTML5 WYSIWYG

En los comentarios del artículo sobre BlueFish ya se habló de este editor de HTML WYSIWYG, considerado por muchos como la evolución natural del Kompozer.

Basado en el motor de renderizado Gecko de Mozilla (es decir, lo que hagas con BlueGriffon se te verá en el Firefox tal cual), BlueGriffon incorpora una serie de herramientas muy interesantes para trabajar tanto con CSS3 (donde podrás editar estilos gráficamente) como con HTML5, dando por ejemplo una comodidad pasmosa a la hora de trabajar con vídeo, además de incorporar las típicas herramientas para realizar rápidamente formularios o tablas. Una de sus características más productivas es su ventana para navegar por el DOM.

Logotipo BlueGriffon
El grifo azul

Incluye además el popular editor de gráficos vectoriales SVG Edit, incluso añadiéndote las pertinentes líneas de Javascript para poder usarlo con HTML 4.

Pero no todo es WYSIWYG, el programador más experimentado podrá ir a la vista de código para trabajar a un nivel más detallado y ahorrarse «código basura» que suelen meter estos editores.

En la web oficial del proyecto podéis además encontrar multitud de Add-ons que permiten agregar interesantes funcionalidades al programa, como un cliente FTP, un manual de ayuda, un emulador de dispositivos móviles, un editor avanzado de css, un editor de fórmulas matemáticas, un administrador de Toolkits… en fin, que es altamente extensible.

Como punto negro sólo diré que no he logrado que PhoneGAP se integre tan bien como lo hacía el Dreamweaver o Eclipse (ya sabéis que soy anti Adobe, pero he de reconocer que la integración jQueryMobile/PhoneGAP/Dreamweaver 5.5 era excepcional), pero en general obtiene un aprobado alto. Además, ha aparecido bajo múltiples licencias libres (GPL, Mozilla), lo cual siempre aporta tranquilidad y fiabilidad al proyecto.

Obtener la url de una página en PHP

Cuando trabajamos con CMS o con frameworks suele ser habitual tener una función que nos indique la url de la página con la que estás trabajando. Pero claro, no siempre trabajamos con frameworks o CMS, a veces nos vemos metidos en el hard-code puro y duro.

En ese caso ¿cómo conseguimos la url? En fin, tendremos que usar la variable $_SERVER.

La variable $_SERVER es un array que almacena cierta información sobre el servidor. En la variable $_SERVER[‘HTTP_HOST’] se guarda la información sobre el nombre de domino, En $_SERVER[‘SERVER_PORT’] el puerto contra el que realizamos la conexión y en $_SERVER[‘REQUEST_URI’] la URI.

Con lo cual si queremos obtener la url basta con usar dos o tres de estas variables, dependiendo de si queremos o no el puerto. Abajo un ejemplo:

//Con puerto
$url_port="http://".$_SERVER['HTTP_HOST'].":".$_SERVER['SERVER_PORT'].$_SERVER['REQUEST_URI'];
//sin puerto
$url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];

Y si vamos a usarlo a menudo lo mejor es utilizarlo dentro de una función que nos devuelva el resultado, para no andar repitiendo código.

Usar codificación utf-8 con MySQLi

Como estos días estoy hablando de MySQLi voy a seguir un poco más con el tema y comentar una peculiaridad: si quieres recuperar datos de una BD donde se hayan guardado en utf-8 y manipularlos e imprimirlos sin problemas de codificación tienes que especificarlo.

Es decir, no basta con que los datos estén en la base codificados como utf-8 y que, además, en la web también esté definido que usaremos esta codificación. No, además debemos indicar a MySQLi que queremos trabajar con utf-8 específicamente. Esto no es para nada complicado porque ya hay una función que te permite elegir la codificación. Un ejemplillo de código simplón os lo aclarará:

$con = new mysqli("server", "user", "password");
if (mysqli_connect_errno($con)) { //comprobamos que no haya fallo en la conexión
	die("Fallo al conenctar a MySQL: " . mysqli_connect_error());
}
				
if (!$con->set_charset("utf8")) {//asignamos la codificación comprobando que no falle
       die("Error cargando el conjunto de caracteres utf8");
}

Como podéis ver, es simple: creamos la conexión y luego simplemente definimos un juego de caracteres. En el ejemplo he usado utf-8, pero vamos, que podéis usar cualquiera de los soportados por MySQL.

Bucles en PHP: do, while, foreach y for

Hoy vamos con una lección de PHP básico: el uso de los distintos bucles existentes en este lenguaje de programación. Esencialmente tenemos cuatro bucles, por lo que no es muy difícil aprendérselos. Lo curioso es que muchas veces la gente hace un mal uso de ellos, os lo digo yo que en los últimos meses casi he trabajado más sobre código de otros (plugins de CMS, terminar trabajos a medias) que creando el mío.

Empezamos por el bucle for. Este debe usarse cuando queremos ejecutar una instrucción o bloque de instrucciones un número conocido de veces. Es decir, si sabes que tienes que repetir una instrucción exactamente, por ejemplo, diez veces entonces usa for. La sintaxis sería for(inicialización; condición de terminación; incremento) pero mejor te la explico en un ejemplillo:

for($i=0; $i<10; $i++){
    echo 'Voy a imprimir esto 10 veces y esta es la '.$i;
}

Es habitual ver a programadores usando el for de forma abusiva e inadecuada.

El siguiente bucle a comentar será el while. En este caso el código de este bucle se ejecuta si una condición dada es cierta y se repite mientras esta sigue siendo cierta. Es decir, si no se da la condición antes de entrar ya no se ejecuta, y se se entra se hará hasta que la condición deje de darse, evaluándola en cada iteración. Debemos usar este bucle cuando no sepamos con exactitud la cantidad de veces que tiene que ejecutarse el bucle, pero sí el valor que queremos alcanzar. La sintaxis es while(condición). Un ejemplo:

<?php
$i=0;
$precio = 50;

while( $precio < 5000)
{
   $precio*2;
   $i++;
}
echo ("Hemos doblado el precio  ".$i." veces hasta superar los 5000");
?>

Parecido, pero no igual, es el bucle do-while. La diferencia es que este se ejecuta siempre al menos una vez, aunque la condición de salida no se cumpla a la entrada. Es decir, en el ejemplo anterior entró en el bucle porque la variable precio era menor de 5000, pero en caso de un do-while habría entrado y ejecutado el código al menos una vez aunque hubiéramos inicializado la variable con un valor superior a 5000. La sintaxis es do{código}while(condición). Veamos un ejemplo simple donde lo diferenciamos del while:

$i=5;
while($i<4)
{
   echo 'Esto no se va a imprimir porque no va a entrar';
}

do
{
    echo 'Aunque la condición es la misma, esto se imprimirá al menos una vez';
}while($i<4);

Finalmente tenemos el foreach, pensado para iterar dentro de arrays. En este bucle lo que hacemos es recorrer todos los elementos de un array. La sintaxis es foreach(array as valor). Es el bucle que debemos utilizar siempre para este propósito. Un ejemplo donde imprimimos los nombres de una serie de frutas:

$frutas = array('melón','limón','fresa','manzana');
echo 'Existencias:'
foreach($frutas as $fruta){
   echo $fruta;
}

Con esto ya estarían repasados los cuatro bucles. Existen, además, dos sentencias que pueden usarse para romper/modificar el flujo natural del bucle: break y continue.

La sentencia break fuerza la salida de un bucle, saltando a la siguiente línea tras el mismo. Su uso natural es para las condicionales switch/case, si bien a veces se ve dentro de bucles. Por cuestiones de elegancia y comprensión del código se recomienda no usarlo. El ejemplo sería:

while( $i < 10)
{
   $i++;
   if( $i == 5 )break;
}

En cuanto a continue se utiliza con un condicional antes y lo que hace es saltarse las instrucciones cuando se cumpla esa condición, pero sin salir del bucle. Por ejemplo imaginemos que queremos recorrer una serie de números pero imprimir sólo los pares:

$i=1;
while($i<10)
{
  if($i % 2 != 0) continue;
  echo $i;
}

El código del ejemplo no haría nada cuando se cumpliera la condición, y cuando no se cumpliera imprimiría el valor.

En fin, con esto ya damos por terminada la lección sobre bucles en PHP. Espero que haya sido de ayuda a alguien. Y recordad, usad cada bucle cuando sea necesario, no de forma indiscriminada.

PHP prepared statement (consulta parametrizada) con MySQLi

Si bien en el pasado ya vimos como hacer una consulta parametrizada en este blog de una forma primitiva (fue un artículo antiguo y a día de hoy no lo haría así ni lo recomiendo, por lo que quedaos con este) o haciendo uso de PDO, toca ahora ver cómo hacerlo con MySQLi.

¿Por qué usar MySQLi y no PDO? En fin, todo depende del caso. PDO nos permite abstraernos del SGBD, con sólo cambiar un parámetro en la creación nuestro código funcionará en Postgres, MySQL, Oracle… MySQLi, en cambio, sólo funciona con MySQL. En principio parece que no hay ningún motivo para usar MySQLi, pero si nos metemos en temas de rendimiento veremos que MySQLi va a penalizar menos el rendimiento de la página que PDO. Es decir, trabajando con MySQL nuestra web requerirá menos recursos usando MySQLi que PDO. Si por lo que sea estás con un proyecto que estás seguro de que no a tener que migrarse de SGBD, si sabes positivamente que se va a usar MySQL durante mucho tiempo, entonces MySQLi es tu opción.

Entonces ¿cómo hacemos una consulta parametrizada con MySQLi? Bueno, veamos como se hace una SELECT que recogería unos datos de la BD vinculados a un id del que disponemos en nuestro PHP?


$mysqli = new mysqli ("servidor", "usuario", "password", "nombre_base_de_datos"); //creamos el objeto MySQLi<code>
</code>

if($mysqli->connect_errno){ //comprobamos que no haya errores de conexión

die( 'La cagaste, esto no va'); //mensaje de error

}

if(!$prepared_st = $mysqli->prepare("SELECT * FROM tabla WHERE id = ?")){//creamos el statment y controlamos los errores

die("La cagaste again"); //mensaje de error

}

&nbsp;

//ahora toca vincular el parámetro id a la consulta

$id=5;

if(!$prepared_st->bind_param("i",$id)){ //vinculamos el parámetro

die("Fallito en la vinculación");

}

if(!$prepared_st->execute()){//ejecutamos la consulta

die("Fallo en la ejecución");

}

$resultado = $prepared_st->get_result(); //recogemos resultado

$prepared_st->close(); //cerramos el prepare

$mysqli->close(); //cerramos la conexión a la base de datos

Bueno, toca una pequeña explicación de bind_param: como veis en este caso recibe dos parámetros. El primer parámetro de bind param siempre es una cadena donde le pasamos una serie de letras que identificarán los tipos de datos que le vamos a proporcionar luego con las variables. Es decir, en el ejemplo le decimos primero que le va a llegar un entero, y luego pasamos la variable de ese entero. Si quisiéramos pasar un entero y una cadena (en se orden) el primer parámetro sería «is» y luego irían la variable entera y la variable cadena. El orden es fundamental.

Finalmente recogemos el resultado (para usar get_result() tienes que tener instalada la extensión mysqlnd, si no tendrás que usar bind_result()), que podemos convertir a array con las funciones fetch_array o fetch_assoc según convenga. En cualquier caso en la web de php.net tenéis más información con la que trabajar. Para el resto de operaciones CRUD la cosa va siendo similar: consulta, vinculamos parámetros, ejecutamos, recogemos resultado si procede.

Crear un botón Pin it para compartir en Pinterest desde tu web

Cierto es que Pinterest ha sacado un complemento para el navegador que agrega un botón Pin-it a tu Firefox o Chrome, pero con todo es recomendable agregar un botón de compartir en Pinterest a tu web. Puede que en España no sea todavía muy popular esta red social (y desconozco las estadísticas para América Latina)  pero para sitios de fotografía y moda se ha vuelto indispensable.

Como en todas las redes sociales, crear el botón es fácil (a ellos les interesa facilitarte el trabajo): Tan sólo tienes que irte al generador de widgets de Pinterest y crearlo desde allí.

Para el botón de Pin It verás que se te ofrecen 3 opciones: One Image, Any Image o Image Hover. La primera opción es para crear el botón sólo para una imagen concreta, de ahí el formulario donde se te pedirá el url de la imagen y que elijas donde ubicar un contador. Debes copiar tanto la notación HTML como el script que te da y ubicarlo donde te sea más cómodo.

Boton Pin it
Pin it!!!

La opcion Any Image te permitirá crear un botón para insertar cualquier imagen de la página en que esté ubiado en Pinterest (similar al que hay implementado a día de hoy en los productos de la web de la marca Mango, por ejemplo). Tienes que pegar un HTML en tu código para que genere el botón y un script.

Finalmente Image Hover hará que sobre cada imagen de la página en que ubiques el script aparezca un botón de compartir en Pinterest al sobrevolarla con el ratón. En este caso no habrá HTML y sólo tendrás que copiar el script.

Y así, de forma sencilla tienes el botón insertado en tu web. Para insertar el botón Pin It en un blog de Blogger podéis seguir esta guía.

El patrón Registry (y su aplicación en PHP)

Volvemos a los patrones de diseño tras un par de artículos de otra índole, y lo hacemos con Registry. La idea de este patrón es que nos permita utilizar los objetos y variables registrados en cualquier nivel de la aplicación sin necesidad de duplicarlos. Es decir, en la práctica nos permitiría usar cualquier objeto como si fuera un Singleton.

La idea de este patrón es crear una clase que tenga un array donde guardar los objetos registrados y una serie de métodos: uno que añada los objetos al array, otro que compruebe su existencia para evitar duplicaciones, otro que devuelva el objeto pasándole su clave, uno que borre el objeto recibiendo la clave y finalmente uno que limpie el array de la clase.

Pasado a código, PHP como siempre, la estructura sería la siguiente:

    <?php      
    class Registry  
    {  
        /** 
         * Registra variables y objetos         
         */  
        static private $registry = array();  
      
        /** 
         * Método que añade objetos
         * Recibe el objeto (por referencia) y la clave
         * Devuelve un booleano para confirmar si se ha insertado
         * o si en cambio estaba duplicado.
         */  
        static public function add($key, &$elemento)  
        {  
            if (!self::exists($key)) {  
                self::$registry[$key] = $elemento;  
                return true;  
            } else {  
                return false;  
            }  
        }  
      
        /** 
         * Función que comprueba la existencia de una clave.
         * Devuelve un booleano confirmando si existe o no.
         */  
        static public function exists($key)  
        {  
            return array_key_exists($key, self::$registry);  
        }  
      
        /** 
         * Función que devuelve un item dada la clave          
         */  
        static public function get($key)  
        {  
            if (self::exists($key)) {  
                return self::$registry[$key];  
            } else {  
                return null;  
            }  
        }  
      
        /** 
         * Elimina una entrada recibiendo su clave y devuelve confirmación.
         * Si la clave no existe devuelve false.
         */  
        static public function remove($name)  
        {  
            if (self::exists($name)) {  
                unset(self::$registry[$name]);
                return true;  
            } else {
                return false;
            }  
            
        }  
      
        /** 
         * Limpia el registro totalmente.         
         */  
        static public function clear()  
        {  
            self::$registry = array();  
        }  
    }  
    ?>  

El ejemplo es una estructura muy básica, puedes ampliarlo con filtros varios, control de errores y demás, pero la idea del esqueleto de este tipo de clase.

Ale, a disfrutarlo.

Sesiones en PHP: uso básico

A la hora de guardar los datos de navegación de un usuario de nuestra web el uso de sesiones se torna esencial. Las sesiones son una forma fácil y práctica de almacenar estos datos del usuario (los almacena en una cookie de sesión que gestionará el propio navegador), de forma individual, para trabajar con ellos.

La idea es simple: cuando llamamos a la función session_start() PHP comprueba si existe un ID de sesión, en caso negativo crea una sesión nueva y en caso afirmativo mantiene los datos de la creada. Con la sesión activa podremos utilizar la variable array superglobal $_SESSION para almacenar los datos que queramos relativos a la navegación. Piensa en el carrito de la compra de cualquier tienda on-line, que va almacenando los items que vas comprando hasta que haces el pago, creo que es el mejor ejemplo de cómo funcionan estas variables.

Vamos a ver un ejemplo donde creamos una sesión y almacenamos la hora de la última conexión y de la última acción:

@session_start(); //iniciamos la sessión

if(!isset($_SESSION["first_connection"])){ //comprobamos si existe la variable y si no, inicializamos
  $_SESSION["first_connection"] = time(); //asignamos a la variable la fecha de creación
}else{
  $_SESSION["lastAction"] = time(); //sobreecribimos la fecha de la última acción
}

Un ejemplo tonto, pero básico.

Para destruir una sesión, por ejemplo al pulsar un botón de logout, usaríamos la función @session_destroy(). Y para acceder al id de la misma la función @session_id() nos lo devolverá. Si queremos cargarnos una variable de la sesión sin destruir la sesión basta con usar la función unset(), más o menos como en el ejemplo que va ahora:

//AHORA QUEREMOS DEJAR DE ALMACENAR LA ÚLTIMA ACCIÓN
unset($_SESSION["lastAction"]);

Ni se os curra hacer unset($_SESSION) sin indicar variable para cargároslas todas, esto deshabilitará el registro de las variables del array y os romperá un montón la cabeza.

En fin, como siempre si queréis más ejemplos en la web de PHP podéis explorar sobre el uso de sesiones. Un saludo y que os sea provechoso.

Crear gráficas en PHP con Googchart

La librería GoogChart de Google puede descargarse libremente (licencia MIT) desde este enlace y nos permite generar gráficas desde PHP.

El primer paso es añadir la clase GoogChart a nuestro script de PHP tal que así:

include "GoogChart.class.php"; 

Ahora necesitamos varias cosas: Primero generar un objeto de la clase GoogChart, después un array con los colores que tendrán las columnas y luego otro array con los datos a mostrar.

$chart = new GoogChart(); //objeto
$color = array('#333','#666','#999','#ccc'); //colores
$datos = array(enero=>50, febrero=>35, marzo=>89, abril=>45);//datos simples

Con estos datos ya podemos darle valores a nuestro objeto e imprimirlo:

$chart->setChartAttrs( array(
'type' => 'bar-vertical',
'title' => 'Ventas 2012',
'data' => $datos,
'size' => array( 600, 300 ),
'color' => $color,
'labelsXY' => true
));

echo $chart;

A la hora de dar valores al objeto definimos el tipo de gráfica (en este caso barras verticales), el título, los datos, el tamaño (en píxeles), la paleta de colores y si tendrá etiquetas en los ejes. Ahora veamos un ejemplo con datos de varios años:

$datosMultiple = array(
 'Año 2011' => array(
 enero => 30,
 febrero => 20,
 marzo => 45,
 abril => 75
),
 'Año 2012' => array(
 enero => 50,
 febrero => 35,
 marzo => 89,
 abril => 65
 ),
 );

Este array incluye dos arrays de datos donde los nombres sirven como leyenda para la gráfica. El resto del proceso sería igual.

En fin, ahora lo que os queda es miraros los ejemplos que vienen junto al archivo de la clase y experimentar.

CSS3 Box Shadow: sombras sin usar imágenes

Seguimos otra vez con truquillos de CSS3 para vuestra web. Mientras me desquicio usando un teclado de silicona para escribir (cosa incómoda donde las haya) vamos a comentar el uso de la propiedad box-shadow de CSS3. Como siempre, ojo con IE que es puñetero cuando se trata de trabajar con stándares.

En su uso básico box-shadow necesita al menos tres parámetros, si bien acepta hasta cinco.

  • Desplazamiento horizontal: Define la posición horizontal de la sombra respecto al elemento al que se la aplicamos. Si le enviamos un valor positivo la sombra se situará a la derecha del elemento. Si el valor es negativo se situará a la izquierda.
  • Desplazamiento vertical: Define la posición vertical de la sombra. Si recibe un valor positivo la sombra se situará debajo del elemento, y con uno negativo encima.
  • Radio de desenfoque: Cuanto mayor sea, más transparente será la sombra. En caso de 0 la sombra será totalmente nítida. Se trata de un valor opcional y 0 es su valor por defecto.
  • Radio de dispersión: Cuanto mayor sea, mayor dispersión tendrá la sombra. Es opcional y el valor por defecto es cero. En ese caso el tamaño será igual al desenfoque.
  • Color: Finalmente el color que tendrá la sombra. Es el tercer valor obigatorio.
  • Inset: Existe un parámetro más, que es este inset. Si lo incluimos al principio hará que la sombra en lugar de estar en el exterior se sitúe en el interior del elemento..

La sintaxis sería como en este ejemplo:

/*Sombra gris abajo derecha*/
.sgad{
    box-shadow: 5px 5px 2px #666;
}

/*Sombra azulada arriba izquierda muy dispersa*/
.saaid{
    box-shadow: -5px -5px 5px 14px #99C;
}

/*Sombra interna gris*/
.sig{
    box-shadow: inset 0 0 10px #666;
}

Si queréis una buena serie de ejemplos y trucos los podéis encontrar en este enlace. Y recordad, ojo con el Explorer.