| |

Crea tu motor de búsqueda con Google y PHP

ByLuis

google.pngAlgunas veces nos podemos encontrar con la necesidad de incluir un motor de búsquedas en nuestra aplicación web, no me refiero a uno interno, sino a uno que busque dentro de todo Internet.

Normalmente se soluciona mediante un formulario que llama a la página de Google, pero eso puede ser un tanto “feo” y no ser exáctamente lo que buscamos.

Si lo que quieres es un script que llame al API de Google para poder recibir las resultados de una búsqueda a Google y luego mostrarla, verás como se hace en la traducción que hacemos del siguiente artículo.

Read More “Crea tu motor de búsqueda con Google y PHP”

| |

Laboratorio: listas con descripción en HTML

ByLuis

Muchas veces el diseño que creamos nos hace usar listas no ordenadas, las cuales queremos que tengan descripción, pero por la falta de espacio, queremos que esta ocupe poco espacio.

lista-descripcion.png

Para crear este efecto, usaremos una lista y una capa por cada descripción que queremos mostrar, a parte de un script que mostrará la descripción cuando pasamos el ratón sobre el elemento de la lista.

Read More “Laboratorio: listas con descripción en HTML”

|

21 cuestiones sobre block, inline y floating en HTML

ByLuis

Una colección con 21 preguntas/respuestas sobre block, inline y floating en HTML. Para aquellos que se inicien en el mundo del HTML y tengan dudas sobre los diferentes tipos de elementos (bloques e inline), sobre los márgenes, el padding, los bordes…
Un FAQ muy sencillo, y muy bien explicado que nos puede resolver muchas dudas.
CSS Tutorials – HTML Formatting Model: Block, Inline and Floating Elements
Vía / Pixel Groovy

|

Evitar Cross-Site Request Forgeries en PHP

ByLuis

Siempre que hagamos una aplicación web, tenemos que tener muy encuenta las cuestiones de seguridad, sobre todo las formas más conocidas de ataque. Una de estas formas es Cross-Site Request Forgeries, que más o menos viene a decir Falsificación de Petición desde Otro Sitio (quizás la traducción no es exacta, pero creo que lo explica bien).

Este ataque se produce cuando a un usuario se le conceden permisos, confiando en él, pero no teniendo en cuenta que otra gente pueda aprovecharse de ello. Supongamos que tenemos una página de compra de artículos, cuya aplicación controla perfectamente los campos de entrada y que tiene una función que realiza la operación de compra de artículos.

Tenemos el formulario HTML:

<form action="compra.php" method="POST">
Artículo: <input type="text" name="articulo" />
Cantidad: <input type="text" name="Cantidad" />
<input type="submit" value="Comprar" />
</form>

El primer fallo que solemos cometer es leer las variables de entrada mediante $_REQUEST:

<?php
session_start();
if (isset($_REQUEST['articulo'] &&
isset($_REQUEST['cantidad'])) {
compra($_REQUEST['articulo'],
$_REQUEST['cantidad']);
}
?>

Una forma muy utilizada para realizar un ataque y que al autor del artículo le gusta mucho, es mediante el uso de una imagen:

<img src="http://ejemplo.org/compra.php?articulo=CAFETERA&cantidad=1000" alt="ads" />

Con esto conseguimos que el usuario que visita nuestra página tambien haga una petición a la página en cuestión sin que él lo sepa, claro, que esto solo funciona si el usuario a la vez tiene una sesión abierta en la página que se está atacando.

La solución es añadir una marca formada por un número “encriptado” y un tiempo para que tenga que renovarse esta marca. La marca se debe crear y pasar en el formulario por el que se envían los datos y a parte se debe controlar su existencia, si coincide y si no ha superado el timeout.

<?php
$marca = md5(uniqid(rand(), TRUE));
$_SESSION['marca'] = $token;
$_SESSION['tiempo_marca'] = time();
?>
<form action="compra.php" method="POST">
<input type="hidden" name="marca" value="<?php echo $marca; ?>" />
Artículo: <input type="text" name="articulo" />
Cantidad: <input type="text" name="Cantidad" />
<input type="submit" value="Comprar" />
</form>
<?php
if ($_POST['marca'] == $_SESSION['marca']) {
$diferencia_tiempo_marca = time() - $_SESSION['tiempo_marca'];
if ($diferencia_tiempo_marca <= 300) {
/* Menos de 5 minutos */
}
}
?>

Artículo original: Security Corner: Cross-Site Request Forgeries

Vía / backdraft

|

Cómo crear un portfolio en flash

ByLuis

Un buen tutorial en el que se explica cómo crear un portfolio en el que se cargan las imágenes dinámicamente. Explicado de forma muy detallada y fácil de seguir. El flash mostrará tres thumbnails, que al pinchar sobre ellos cargará la imagen correspondiente, mostrando el título y la descripción.
portfolio.png
Como única pega, a parte de que está limitado a tres imágenes, yo hubiera cargado los datos en un XML, en vez de en 3 ficheros de texto independientes.
Creating a Dynamic Portfolio in Flash
Vía / Pixel Groovy

| |

Laboratorio: shortcuts en formularios

ByLuis

Algo a lo que suelo estar acostumbrado es a usar el teclado para realizar ciertas acciones (shortcuts), cuando estás 8 horas diarias delante de un ordenador, si no haces uso de los shortcuts, perderás mucho tiempo moviendo el ratón de un lado para otro.

Antes el uso estaba más restringido a las aplicaciones de escritorio (CTRL + S para guardar el documento, ALT + F4 para cerrar la ventana, …), pero ahora que cada vez se usa con más frecuencia aplicaciones web, se echan en falta estas facilidades. Aunque hay que decir que últimamente se ven con más frecuencia: TAB + INTRO para enviar un correo en GMail (claro que esta no se programa), CONTROL + S para guardar una entrada en Blogger, …

Read More “Laboratorio: shortcuts en formularios”

| |

Laboratorio: multilenguaje mediante Apache

ByLuis

Leyendo un comentario en una entrada de Minid.net, en el que preguntaba cómo redirigir a una url específica según el idioma del navegador, se nos ha ocurrido explicarlo según lo haríamos nosotros.

Se trata de que la url se redirija a otro directorio según el idioma que nos viene por la cabecera HTTP, por ejemplo: si accedemos a www.dominio.com y nuestro lenguaje es el español, que nos redirija a www.dominio.com/es, y si el idioma es el inglés que acceda a www.dominio.com/en. En nuestro caso, si el idioma no está en la lista de idiomas disponibles accederemos a un idioma por defecto (en).

Read More “Laboratorio: multilenguaje mediante Apache”

| |

Crear un sistema de registro con PHP y MySQL

ByLuis

Algo común en muchas de las páginas que visitamos, por ejemplo en foros, es la necesidad de registrarnos para poder acceder a los contenidos. El tutorial que ponemos a continuación explica muy bien como hacerlo paso a paso:

Creating a Membership System with PHP and MySQL

Vía / dzone

| |

Incluir CSS a tu RSS

ByLuis

Algo sencillo y que queda muy bien a la hora de mostrar nuestras hojas de estilo, claro, que si usamos una aplicación que las muestra según sus propios estilos, no conseguimos nada.

Se trata de añadir una línea indicando el xml-stylesheet en las RSS:

<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="http://dominio.com/rss.css" ?>
...

Y luego definir los estilos, en el ejemplo del autor, a parte de formatear la salida, oculta aquellas partes del RSS que no quiere que aparezcan:

rss {
display: block;
font-family: verdana, arial;
}
title {
display: block;
margin: 5px;
padding: 2px;
color: gray;
border-bottom: 1px solid silver;
}
link {
display: block;
font-size: small;
padding-left: 10px;
}
item {
display: block;
padding: 2px 30px 2px 30px;
}
docs {
display: block;
background-color: #ffffe6;
margin: 20px;
text-align: center;
padding: 5px;
color: #7f7f7f;
border: 1px solid silver;
}
/* Elementos ocultos */
language, lastBuildDate, ttl, guid, category, description, pubDate {
display: none;
}

Ejemplo

Adding a CSS StyleSheet to your RSS Feed

Vía / dzone

| | |

Laboratorio: marcar búsquedas de Google

ByLuis

Algo que suele ser interesante es cuando realizamos una búsqueda en Google, que en la página a la que accedemos desde los resultados de Google, nos resalte las palabras que hemos buscado, aunque la barra de Google ya te da la oportunidad de hacerlo.

El proceso es sencillo, tenemos que capturar la URL desde la que nos llaman, dada por $_SERVER[‘HTTP_REFERER’], obtener las palabras que hemos puesto a buscar el Google (vienen en el parámetro q) y después capturar la salida, como se realizaba en el caso de la caché, y cuando tenemos lo que vamos a enviar por la salida, sustituir cada una de las palabras por el código HTML que queramos que resalte la palabra en cuestión.

<?php
// Filtro para el array para quedarnos solo con la QUERY
function filtro($val) {
return strpos($val, 'q=') === 0;
}
// Obtenemos la página desde la que nos llaman
$url = $_SERVER['HTTP_REFERER'];
// Nos quedamos solo con los parámetros
$url = parse_url($url);
$url = $url['query'];
// Nos quedamos solo con el parámetro que nos interesa
$parametros = split("&", $url);
$cadena = array_filter($parametros, "filtro");
$cadena = urldecode(substr(array_shift($cadena), 2));
// Cacheamos la salida
ob_start();
?>
...
Página HTML
...
<?php
// Recuperamos el buffer de salida
$html = ob_get_clean();
// Por cada palabra de la cadena de búsqueda, la sustituimos por el HTML necesario para resaltar
$palabras = split(" ",$cadena);
foreach ($palabras as $palabra) {
$html = preg_replace('/('.$palabra.')/i', '<b>$1</b>', $html);
}
// Mostramos el buffer por la saliad
echo $html;
?>

Código