Ingeniuz :: Desarrollador web

lunes, mayo 30, 2005

Incrustar Flash en XHTML

Hoy de nuevo me he visto en la necesidad de incrustar una película flash en un documento xhtml (strict). Para que no se me olvide y por si alguien lo necesita, dejo aquí el código necesario:


<object type="application/x-shockwave-flash" data="swf/pelicula.swf" height="200" width="400">
<param name="movie" value="swf/pelicula.swf">
<img src="http://www.blogger.com/sustituta.gif" alt="imagen sustitutiva" height="200" width="400" />
</object>



esto funciona para xhtml estricto (valida según el estándar W3C). Si la película flash no puede ser cargada en el navegador (por ejemplo si no tiene instalado el plugin de macromedia), se muestra una imagen en su lugar.
Espero que os sirva ;)

domingo, mayo 29, 2005

¿Cómo almacenar una imagen en MySQL (SQL)?

Un amigo me preguntaba por email, cómo podría guardar las imágenes de su página web dentro de su base de datos mysql.
Aquí os pongo un trozo de código que puede ayudaros para esta tarea:

- Empezamos por la tabla que contendrá las imágenes:

Código:

CREATE TABLE imagenes (
id INT NOT NULL DEFAULT 0 auto_increment,
imagen LONGBLOB,
tipo VARCHAR(255),
PRIMARY KEY (id)
);


el campo "imagen" contendrá la imagen propiamente dicha (los datos binarios) y el campo "tipo" contendrá el tipo MIME que identifica el formato de la imagen (p. ej. image/gif).
Por supuesto esta tabla puede ser alterada, modificada, etc. para cubrir vuestras necesidades específicas.
El tipo de datos BLOB (BLOB, MEDIUMBLOB y LONGBLOB) es el usado por MySQL para almacenar datos binarios.

A continuación muestro un ejemplo de como almacenar una imagen en esta tabla que hemos creado:

Código:

// Abro el archivo de imagen para cargar sus contenidos
$archivo = 'images/foto01.jpg';

$fp = fopen ($archivo, 'r');
if ($fp){
$datos = fread ($fp, filesize ($archivo)); // cargo la imagen
fclose($fp);

// averiguo su tipo mime
$tipo_mime = 'image/jpeg';
$isize = imagesize ($archivo);
if ($isize)
$tipo_mime = $isize['mime'];

// La guardamos en la BD
$datos = base64_encode ($datos);
$sql = "INSERT INTO imagenes (imagen, tipo) VALUES ('$datos', '$tipo_mime');
$res = mysql_query($sql);
if (!$res)
echo "Error al ejecutar la consulta ($sql)\n";
}
else
echo "Error al abrir el archivo";



Para recuperar la imagen de la base de datos, el proceso que
tendríamos que seguir depende de cual queramos que sea el
resultado. Imaginemos que lo único que queremos es recuperar
la imagen de la base de datos y mostrarla en el navegador:

Código:

$id = intval ($_GET['id']); // imaginamos que el parámetro "id" nos llega en la URL (p. ej. imagen.php?id=5).
$sql = "SELECT imagen, tipo FROM imagenes WHERE id='$id'";
$res = mysql_query ($sql);
if ( $res AND mysql_num_rows($res)>0 ){ // se ha encontrado la imagen
$datos = mysql_fetch_array ($res);

// Indicamos al navegador el tipo de imagen que le vamos a enviar
header ('Content-type: ' . $datos['tipo']);

// Enviamos los datos binarios (la imagen)
echo base64_decode($datos['imagen']);
}
else
echo "Error al ejecutar la consulta ($sql)\n";


Bueno, espero que este código os ayude y ya sabeis, si teneis alguna duda o problema para ponerlo en práctica, estaré encantado de echaros una mano.

conocer la ip del visitante usando PHP

Me lo pregunaban hace poco y lo pongo aquí por si a alguien más le sirve de referencia.
Para mostrar la ip del visitante a nuestra web, PHP nos proporciona una variable especial: $_SERVER['REMOTE_ADDR']. De esta forma, podremos mostrar la IP de nuestro visitante simplemente haciendo:


echo "IP: " . $_SERVER['REMOTE_ADDR'];


Sin embargo, en el caso de que nuestro visitante esté tras un PROXY, la ip mostrada no será la suya, sino la del proxy. Para averiguar su ip real, podemos usar la variable de php $_SERVER['HTTP_X_FORWARDED_FOR']:



if( isset($_SERVER['HTTP_X_FORWARDED_FOR']) &&
$_SERVER['HTTP_X_FORWARDED_FOR'] != '' )
{
echo "IP: " . $_SERVER['HTTP_X_FORWARDED_FOR'];
}
else
echo "IP: " . $_SERVER['REMOTE_ADDR'];



De esta forma podemos descubrir, almacenar o comunicar la IP desde la que nos visita un usuario de nuestra web.

Ayudando a los buscadores a indexar tu página

Parte I: las recomendaciones del W3C

Este artículo pretende comentar lo que nos sugiere el W3C para que nuestras páginas sean más accesibles a las herramientas de "indexado" de los buscadores. Mucho se ha hablado y se habla sobre técnicas y "trucos" para ser "indexado" o subir posiciones en los motores de búsqueda más usados.
El objetivo de este artículo no es hablar del último truco para "entrar en la lista", sino comentar lo que parece que pocos tienen en cuenta, que son las recomendaciones del W3C para el desarrollo de nuestras páginas.

Estos son los consejos que nos dá el organismo encargado de controlar los estándares en la web:

Define el idioma del documento

En el contexto global de la web, es importante saber en qué idioma ha sido escrita una página. Si has preparado versiones en otros idiomas de los contenidos de tu página web, es importante que los especifiques en el código de la misma. El lenguaje HTML nos dá la posibilidad de hacer mediante el elemento LINK. De esta forma el motor de búsqueda podrá ofrecer a sus usuarios los resultados en su idioma preferido, sin importar qué ha escrito para realizar su búsqueda.

Por ejemplo, los siguientes enlaces ofrecen alternativas en francés y en alemán al motor de búsqueda:

<LINK rel="alternate"
type="text/html"
href="pagina-fr.html" hreflang="fr"
lang="fr" title="La vie souterraine">
<LINK rel="alternate"
type="text/html"
href="pagina-de.html" hreflang="de"
lang="de" title="Das Leben im Untergrund">

Coloca palabras clave y descripciones

Algunos motores de búsqueda recogen los valores alojados en los elementos META.
Se trata de una lista de palabras/frases clave separadas por coma o una descripción corta de los contenidos del sitio web.
Los buscadores pueden mostrar esas palabras/descripciones como resultados para las búsquedas.

Por ejemplo:

<meta name="keywords" content="rent a car, alquiler de coches">
<meta name="description" content="PrestaCoches - Rent a car - Alquile su coche para las vacaciones">

Indica el comienzo de un grupo de páginas relacionadas

Los grupos de documentos relacionados o presentaciones frecuentemente se convierten a grupos de documentos HTML.
Es muy útil el referenciar el principio del grupo (la página principal) de forma que tanto el buscador como el visitante puedan identificarla.
Esto lo podemos conseguir usando el elemnto LINK con rel="start" acompañado por el atributo título.
Por ejemplo:

<LINK rel="start"
type="text/html"
href="pagina1.html"
title="Teoría general de la relatividad">

Deja instrucciones para los robots de los buscadores

Alguna gente se sorprende al darse cuenta que contenidos "sensibles" de su sitio web han sido "indexados".
La mayoría de los robots de los buscadores, aceptan unas instrucciones especiales que les indican qué páginas/documentos pueden "indexar" y cuales no. Hay dos formas de comunicarse con los robots:

  1. un archivo "robots.txt"
  2. el elemento META en los documentos HTML
Lo describo con más detalle a continuación.

Robots de búsqueda

El archivo robots.txt

Cuando un robot visita un sitio web, por ejemplo http://www.innoa.com, lo primero que comprueba es la existencia del archivo http://www.innoa.com/robots.txt.
Si encuentra el documento, analizará su contenido para ver si puede descargar documentos del sitio web. Se puede personalizar el archivo robots.txt para que sólo se aplique a un determinado robot y para no permitir el acceso a directorios o documentos específicos.

Este es un ejemplo del contenido de un archivo robots.txt que evita que los robots visiten el sitio web

        User-agent: *    # se aplica a todos los robots
Disallow: / # no permite el indexado de ninguna página

El Robot simplemente comprobará si existe la URI "/robots.txt" en tu sitio web. Aquí tienes algunos ejemplos de URI para el archivo "robots.txt":

URI del sitio web URI para el archivo robots.txt
http://www.w3.org/ http://www.w3.org/robots.txt
http://www.w3.org:80/ http://www.w3.org:80/robots.txt
http://www.w3.org:1234/ http://www.w3.org:1234/robots.txt
http://w3.org/ http://w3.org/robots.txt

Únicamente puede existir un archivo "/robots.txt" en un sitio web. Concretamente, no se deben crear archivos "robots.txt" en archivos de usuario, ya que el robot nunca los buscará ahí. Si deseas que tus usuarios puedan crear sus propios "robots.txt", no te queda más remedio que integrarlos todos en un único "/robots.txt" o decirles que usen la etiqueta META Robots.

NOTA: Las URI diferencian mayúsculas y minúsculas, y la cadena "/robots.txt" debe estar completamente en minúscula. Las líneas en blanco no se permiten dentro de un registro en el archivo "robots.txt".

Debe haber exactamente un campo "User-agent" por registro. El robot puede ser liberal al interpretar este campo, por lo que se recomienda poner una subcadena del nombre del robot en minúscula y sin información de versión.

Si el valor es "*", el registro describe la política de acceso por defecto para cualquier robot que no se haya especificado en otro registro. No se debe tener más de un registro de este tipo en el archivo "/robots.txt".

El campo "Disallow" especifica una URI parcial que no se debe visitar. Puede ser relativa o absoluta; cualquier URI que comience comience con este valore no será visitada por el robot.
Por ejemplo:

Disallow: /ayuda prohibe ambos /ayuda.html y /ayuda/index.html, mientras que
Disallow: /ayuda/ debe prohibir /ayuda/index.html pero permitir /ayuda.html.

Un valor vacío para "Disallow" indica que todas las URIs pueden ser visitadas por el robot.
Al menos un campo "Disallow" debe estar presente en el archivo "robots.txt".

Robots y el elemento META

El elemento META de HTML permite comunicarse con los robots para permitirles o denegarles el acceso a un documento.

En el siguiente ejemplo un robot no debe "indexar" el documento, ni analizarlo en busca de enlaces:

<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">

Los términos que pueden aparecer en el content son ALL, INDEX, NOFOLLOW, NOINDEX.

Enlaces relacionados

domingo, mayo 15, 2005

AJAX: Asynchronous JavaScript and XML

Hace tiempo, oí hablar de una nueva tecnología que permitía intercambiar datos con el servidor usando simplemente javascript y XML (olvidándonos del famoso método del iframe oculto).
Esta tecnología, creada en un principio por Microsoft, se basaba en un control ActiveX y posteriormente fue teniendo soporte en el resto de los buscadores.
Hoy en día se está poniendo muy de moda gracias al uso que de ella está haciendo google en sus aplicaciones (google suggest, gmail, etc.).
En Dynamic HTML and XML: The XMLHttpRequest Object, Apple nos explica de forma resumida y con ejemplos, de qué va el tema. Básicamente se trata de un objeto javascript (XMLHttpRequest) que nos permite comunicarnos con el servidor, e intercambiar documentos xml con el.
Hablo hoy de él, porque acabo de encontrarme con la necesidad de usarlo en el trabajo y porque tambien veo que va tomando importancia (ver dirson), incluso hay un blog donde se habla exclusivamente de esta tecnología. Voy a trabajar un poco con él, y en cuanto lo tenga más claro, intentaré poner un ejemplo por aquí, por si le ayuda a alguien ;)


 
Working on casas rurales / casas rurales & codigo postal & Salud y nutricion & tiendas + Padel, tiendas online