ver y aparecer

martes, 5 de febrero de 2013

Edición del formato de un textarea en HTML con TinyMce

Buenas a tod@s!!!

Hoy traigo una solución fácil, rápida y bonita para que el usuario pueda editar un textarea de nuestra web como si se tratara de un de un fichero de Word, para luego poder guardarlo y mostrarlo; es el TinyMce, una librería basada en JavaScript y HTML.

Varios ejemplos para los que nos vendría bien utilizar esta plataforma es:
En foros, para la gente edite el formato de sus mensajes.
En esta misma entrada que estoy escribiendo la cual puedo modificar la fuente como me apetezca sin saber de HTML ni CSS.
En una tienda online para hacer una descripción bonita de los productos.
(...)

Vamos con unas nociones básicas para empezar a utilizar el tinymce lo más rápido y de la manera más fácil:

Lo primero es descargarnos la librería, nos bajamos la versión más reciente aquí. Y lo ponemos en la carpeta dónde trabajaremos.

Seguidamente creamos un fichero HTML, para ver el editor de textarea, dónde copiaremos el siguiente código (el código es casi el mismo que la web de tinyMce):

tinyMCE.html

Creamos ahora otro archivo, este .PHP, dónde recogeremos por POST el texto con formato que ha elaborado el usuario y lo mostraremos.

tinyMce_post.php

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
var_dump($_POST["content"]);
echo $_POST["content"];
}
?>

lunes, 4 de febrero de 2013

Como hacer un buen scrolling (JQuery)

Buenas a tod@s!!

Hoy vamos a ver como hacer un scrolling de manera bonita, sin que el usuario quede desubicado y no sepa donde está.

Primero veamos como se hace el scrolling tradicional en javascript (el que te desmonta cuando estás navegando y le das)

<html>
<head>
<script>
function scroll() {
window.scrollBy(0,50);
}
</script>
</head>
<body>
<a href="#" onclick="scroll(); return false;">scroll down</a>

</body>
</html>

La función scrollBy hace un scroll en las coordenadas x e y respectivamente.
Lógicamente si ejecutáis este código no habrá mucho con lo que hacer scroll, llenad la página de texto o saltos de línea para comprobarlo.

Ahora vamos a utilizar JQuery para hacer un scroll bonito, esté bajará suavemente permitiendo una mejor experiencia para el usuario.

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
function scroll() {
$.scrollTo($("#abajo"), 1000, {axis:'y'});
}
</script>
</head>
<body>
<a href="#" onclick="scroll(); return false;">scroll down</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p id="abajo"> Bajar aquí </p>
</body>
</html>

Con la función scrollTo, lo que hacemos es situar el scroll en la id que seleccionamos en el primer parámetro, con un retardo (animación) de 1000 ms (2º parámetro), y afectando al eje y que seleccionamos en el tercer parámetro.

sábado, 2 de febrero de 2013

Sessions y cookies en PHP (Parte 2: Cookie)

Eyyy! buenas a tod@s!!!
Hoy traigo la segunda parte de las sessions y cookies, concretamente tocarán las segundas!!!

Ayer hable sobre lo que hacían cada una, así que iré al grano y comenzaré a explicar como se utilizan las cookies.

Lo primero es definir las cookies:

cookie.php

<?php
setcookie("nombre", "Pepe", time()+3600);
setcookie("apellido", "Botella", time()+3600);
?>

<a href="ver_cookie.php"> Ver cookie </a><br/>
<a href="eliminar_cookie.php"> Eliminar cookie </a>

Vemos que se han creado dos cookies una con el nombre del usuario y la otra con el apellido, la duración de ambas es de una hora (el tiempo actual + 3600 segundos).
Es importante destacar que no se puede mostrar la cookie nada más crearla, como vemos a continuación:

cookie_no_funciona.php

<?php
setcookie("nombre", "Pepe", time()+3600);
setcookie("apellido", "Botella", time()+3600);
echo $_COOKIE["nombre"]." ".$_COOKIE["apellido"];
?>

Esto no funcionaria a menos que la cookie se hubiera creado anteriormente (dónde visualizaremos la cookie anterior y no la que acabamos de crear).
Para visualizarla debemos hacer un link como el que tenemos arriba, "ver cookie" y acceder en él.

ver_cookie.php

<?php
echo $_COOKIE["nombre"]." ".$_COOKIE["apellido"];
?>

Aquí ya podremos visualizar la cookie.

Para eliminar una cookie, el método es un poco feo en mi opinión, basta con darle un tiempo que ya haya pasado para que esta expire y de ese modo se borre.

eliminar_cookie.php

<?php
setcookie("nombre", "Pepe", time()-3600);
setcookie("apellido", "Botella", time()-3600);
?>

Le asignamos el tiempo una hora antes y la cookie desaparece.

Hasta aquí una breve introducción de las cookies en PHP, alguna duda o sugerencia, comentad!

Saludos!!!

viernes, 1 de febrero de 2013

Sessions y cookies en PHP (Parte 1: Session)

Buenas a tod@s!!!

Hoy traigo un pequeño tutorial sobre como identificar un usuario que se conecte a nuestra página web.
Lo dividiremos en dos partes, hoy emplearemos las variables de session y mañana lo haremos con cookies.

Para los que ven por primera vez las palabras session y cookies, vamos a introducir brevemente estos conceptos:
Los dos sirven, como hemos comentado antes, para identificar un usuario que visita nuestra plataforma web;
la diferencia entre ambos reside principalmente en que la cookie se almacena en el navegador del cliente mientras que la session se almacena en el servidor de la página.

Vamos con el código:

Para definir una session:

index.php

<?php
session_start();
$_SESSION["nombre"]='Pepe';
$_SESSION["apellido"]='Botella';
echo "<a href='ver_cookie.php'>Ver cookie</a>";
?>

Es importante que la función session_start esté antes del código html.

Para comprobar que funciona correctamente vamos a crear otro php que accederemos desde el link anterior.

ver_cookie.php

<?php

session_start();

echo $_SESSION["nombre"]." ".$_SESSION["apellido"];

Para destruir la session basta con que el usuario deje de hacer peticiones a nuestra página durante un tiempo determinado o utilizar el siguiente código:

<?php
session_start();
if(isset($_SESSION['nombre']) && isset($_SESSION['apellido'])){ unset($_SESSION['nombre']);
unset($_SESSION['apellido']);
}

O este otro método para eliminar toda la información asociada con la sesión actual:

<?php
session_destroy();
?>

Nos vemos!!!

jueves, 31 de enero de 2013

Paginación en PHP

Buenas a tod@s!!!

Hoy traigo un método eficaz para hacer una paginación de distintos elementos en PHP y mysqli. Aunque el ejemplo esté en mysqli el método es compatible en otras versiones de mysql, solo varían las funciones utilizadas para las consultas (las querys son las mismas).

Para simplificar dividiremos el método en dos partes: La obtención de datos y el proceso para mostrarlos.

Obtención de datos:

obtener_elementos.php

$limite_elementos_pagina=20;
//obtenemos por get la pagina que queramos consultar, la primera vez la pagina será 0
if(isset($_GET["pagina"])){
$pagina=(int)$_GET["pagina"];
}
else {
$pagina=0;
}
$pagina_actual=$pagina;
$pagina_elemento=$pagina*$limite_elementos_pagina;
//con esta query obtendremos los elementos pertenecientes a la página del GET
$query="SELECT * FROM `elementos` ORDER BY elementos.id ASC LIMIT ".$pagina_elemento.",".$limite_elementos_pagina.";";
$query.="SELECT count(*) AS `count` FROM `elementos`";
if($mysqli->multi_query($query)){
//en $elementos tendremos guardados los elementos requeridos
if($elementos = $mysqli->store_result()) {
$mysqli->next_result();
if($result = $mysqli->store_result()) {
if($row = $result->fetch_array(MYSQLI_ASSOC)) {
//obtenemos el número de páginas que hay, la función ceil redondea por arriba
$numero_paginas=ceil($row['count']/$limite_elementos_pagina);
//llamamos al archivo php para mostrar los elementos
include("mostrar_elementos.php");
}
}
}
}

El código está bastante comentado, pero hay un par de apuntes que aclarir:
La función isset comprueba si existe la variable y devuelve cierto en dicho caso.
Mysqli permite las sentencias múltiples, en este caso tenemos un poco de caos en el código; lo que hacemos solamente es obtener los elementos en referencia a la página de la base de datos y obtener el número de elementos que hay.
Para obtener el número de páginas, dividimos el número de elementos totales entre el limite de elementos por página; hay un dato importante y es que tenemos que redondear por arriba, ya que, si el número resultante es decimal, indicará que habrá una página con un número de elementos inferior al límite.
Finalmente la función include, nos incluye el código del archivo seleccionado consecutivamente a esa función (include).

Ahora procedemos a mostrar los elementos:

mostrar_elementos.php

<html>
<head>
</head>
<body>
<div>
<?php while($row = $elementos->fetch_array(MYSQLI_ASSOC)) { ?>
<p> <?php echo $row['id'].' '$row['atributo1'].' '$row['atributo2'];?> </p>
<?php } ?>
</div>
<div>
<?php $i=0;
while($i<$numero_paginas){ ?>
<?php if($i==$pagina_actual) { ?>
<label> <?php echo $pagina_actual+1; $i++; ?> </label>
<?php }
else {?>
<a href="obtener_elementos.php?page=<?php echo $i; ?>"> <?php echo $i+1; $i=$i+1; ?> </a>
<?php
}
}?>
</div>
</body>
</html>

Para mostrar los elementos intercalamos html y php.
Dentro del primer DIV, en el while recorremos todos los elementos pertenecientes a la página actual, obtenidos anteriormente y mostramos sus atributos.
En el segundo DIV, vamos de 0 hasta el número de páginas-1 (ya que la página 0 cuenta): En el caso de que la página sea la actual no permitiremos acceder a ella (label), en el caso de que no lo sea crearemos un link para obtener los elementos de dicha página, dónde le pasaremos por GET el número de página que se corresponda.
Cabe indicar que el número de página que mostramos es una unidad superior al número de página real, ya que no tiene mucho sentido que el usuario vea la página número 0.

Espero no dejarme nada, cualquier cosa, comentario!!!

Un saludo!!!

miércoles, 30 de enero de 2013

Encriptación y desencriptación en PHP

Buenas a tod@s!!

Hoy traigo un método de encriptación y desencriptación de PHP, para ocultar lo que nos venga de gusto y aumentar así nuestra privacidad.

Las funciones que vienen a continuación són simples: cogen la variable a encriptar o desencriptada y la devuelven desencriptada o encriptada respectivamente.

El cifrado de encriptación que utilizaremos es MCRYPT_RIJNDAEL_256 y el modo MCRYPT_MODE_ECB.

La función de encriptación es esta:

function encriptar($cadena)
{
$clave = "ljkljlk4ñj5lk432l532";
$cifrado = MCRYPT_RIJNDAEL_256;
$modo = MCRYPT_MODE_ECB;
$cadena_encriptada= mcrypt_encrypt($cifrado, $clave, $cadena, $modo,
mcrypt_create_iv(mcrypt_get_iv_size($cifrado, $modo), MCRYPT_RAND));
return $cadena_encriptada;
}

En la variable $clave ponemos lo que nos apetezca, lógicamente debemos ser coherentes y poner la misma en la función desencriptar que tenemos más abajo.
La función mcrypt_encrypt que utilizamos es una función que encontramos en las librerías de PHP.

La función para desencriptar es la siguiente:

function desencriptar($cadena)
{
$clave = "ljkljlk4ñj5lk432l532";
$cifrado = MCRYPT_RIJNDAEL_256;
$modo = MCRYPT_MODE_ECB;
$temp = mcrypt_decrypt($cifrado, $clave, $cadena, $modo,
mcrypt_create_iv(mcrypt_get_iv_size($cifrado, $modo), MCRYPT_RAND)
);
//Para saltar caracteres raros
$temppos = stripos($temp, chr(0));
if ($temppos !== false) {
$cadena_desencriptada = substr($temp, 0,$temppos);
}else{
$cadena_desencriptada = $temp;
}
return $cadena_desencriptada;
}

Como vemos es casi lo mismo que la anterior función; algunas veces, pero, nos encontramos que la cadena que nos devuelve la función contiene caracteres un tanto raros, utilizando la función substr como hemos visto los podemos evitar.

Nos vemos!!!

lunes, 28 de enero de 2013

Animate JQuery

Buenas a todos!!

Hoy traigo una función de JQuery para animar un poco nuestras páginas web. El ejemplo que he tomado es un poco simple (no he tenido mucho tiempo...), pero basta para ver como funciona.

La función es el animate y sirve para animar, valga la redundancia, nuestros elementos de las páginas web cambiando de forma progresiva los estilos de estos.

Para utilizar la función basta con unos sencillos pasos:

Lo primero seria cargar la libreria jquery; con esta dirección cargamos la última versión de jquery:

Seguidamente ponemos una imagen cualquiera con una altura y una anchura de 10em por ejemplo :

Y por último creamos la función que nos permita animar:

Este código nos permite agrandar la imagen cuando el ratón está encima de ella y reducirla cuando lo sacamos fuera. Para hacer esto vamos por partes:
Seleccionamos mediante el JQuery la id de la imagen: $('#imagen').
Aplicamos la función de la librería JQuery mouseover o mouseout que nos permite establecer una nueva función que se ejecutará cuando el ratón esté encima o fuera de la imagen.
Nuevamente seleccionamos la id que queramos y le aplicamos, esta vez, la función animate.
La función animate acepta varios parámetros, en este caso nos quedaremos con dos:
El primer parámetro es una lista dónde especificaremos las propiedades CSS que queremos cambiar de la imagen, en este caso he cambiado la altura y anchura; el segundo parámetro es la duración de la animación.

NOTA: Es importante que el script se ejecute después de crear el objeto que queremos animar y no antes, en el caso que elijamos funciones como mouseover o mouseout.

Un saludo!!