Sergio.Iglesias - Diseño y desarrollo web recursos sobre diseño web con estándares, programación web, usabilidad, accesibilidad... 2006-11-03T08:52:26+00:00
This is an Atom syndication feed. It is intended to be viewed in a news aggregator or syndicated to another site. Please visit the Atom Project for more information.
Tecnología the-shaker: that blog/flickr/multimedia-aggregator kind of thing Sergio.Iglesias - Diseño y desarrollo web http://s3.amazonaws.com/lcp/sergio-iglesias/myfiles/sergioiglesias65x65.jpg http://sergio-iglesias.espacioblog.com/post/2006/11/03/cambiar-estilos-css-con-javascript Cambiar estilos CSS con JavaScript 2006-11-03T08:52:26+00:00 2008-08-06T04:38:44+00:00 <p>Javascript nos permite cambiar las propiedades de un objeto usando la sintaxis objeto.propiedad=valor así que cambiando la propiedad href de la etiqueta <link> que enlaza los archivos CSS el estilo especificado se cargará.</p> <p>Primero, crearemos un enlace al estilo CSS por defecto asignándole un identificador :</p> <p>&lt;link href="css/defecto.css" rel="stylesheet" type="text/css" id="estilo"&gt;</p> <p>Despues crearemos en Javascript la función que cambiará el estilo. Funciona pasándole como único argumento el nombre o ruta completa del archivo CSS a mostrar. Usaremos la propiedad getElementById() para identificar el objeto:</p> <p>function estilo(arquivo) {<br /> document.getElementById('estilo').href=arquivo;<br /> }</p> <p>Y finalmente sólo tendremos que llamar a la función desde un enlace o botón pasándole como argumento el nombre o ruta del arquivo CSS que queramos mostrar:</p> <p>&lt;input type="buton" value="Cambiar Estilo" onClick="estilo('azul.css');"&gt;</p> <blockquote><p>Autor: David Martínez - http://www.dmnet.bitacoras.com</p></blockquote> </link> Sergio.Iglesias - Diseño y desarrollo web http://s3.amazonaws.com/lcp/sergio-iglesias/myfiles/sergioiglesias65x65.jpg http://sergio-iglesias.espacioblog.com/post/2006/10/26/mostrar-imagen-desde-blob-mysql-usando-php Mostrar una imagen desde blob mysql usando PHP 2006-10-26T19:21:03+00:00 2009-06-14T02:21:25+00:00 <p>Para que el script se muestre como una imagen necesitamos usar la cabecera <code>Content-type</code> y poner el tipo <acronym lang="en" title="Multipurpose Internet Mail Extension">MIME</acronym> de la imagen que recuperaremos de la tabla, esto es:</p> <p><a id="more-8"></a></p> <div class="hiliter"><strong>php:</strong></div> <p>Donde <code>image/gif</code> es el el tipo <acronym lang="en" title="Multipurpose Internet Mail Extension">MIME</acronym> para una imagen <acronym lang="en" title="Graphic Interchange Format">GIF</acronym>.</p> <h2>Desarrollo del Script</h2> <p>Las im&aacute;genes han sido guardadas en la tabla y tienen un &uacute;nico identificador representado por el campo <var>idfoto</var>, la imagen original se guarda en el campo <var>foto</var>, la miniatura en el campo <var>thumb</var> y el tipo <acronym lang="en" title="Multipurpose Internet Mail Extension">MIME</acronym> en el campo <var>mime</var>, como podemos ver en la estructura de la tabla: </p> <div class="hiliter"><strong>sql:</strong> <pre><span style="color: #993333; font-weight: bold;">CREATE</span> <span style="color: #993333; font-weight: bold;">TABLE</span> <span style="color: #ff0000;">`tabla`</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">`idfoto`</span> int<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">3</span><span style="color: #66cc66;">&#41;</span> <span style="color: #993333; font-weight: bold;">NOT</span> <span style="color: #993333; font-weight: bold;">NULL</span> <span style="color: #993333; font-weight: bold;">AUTO_INCREMENT</span>, <span style="color: #ff0000;">`nombre`</span> varchar<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">255</span><span style="color: #66cc66;">&#41;</span> <span style="color: #993333; font-weight: bold;">NOT</span> <span style="color: #993333; font-weight: bold;">NULL</span> <span style="color: #993333; font-weight: bold;">DEFAULT</span> <span style="color: #ff0000;">''</span>, <span style="color: #ff0000;">`foto`</span> blob <span style="color: #993333; font-weight: bold;">NOT</span> <span style="color: #993333; font-weight: bold;">NULL</span>, <span style="color: #ff0000;">`thumb`</span> blob <span style="color: #993333; font-weight: bold;">NOT</span> <span style="color: #993333; font-weight: bold;">NULL</span>, <span style="color: #ff0000;">`mime`</span> varchar<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">40</span><span style="color: #66cc66;">&#41;</span> <span style="color: #993333; font-weight: bold;">NOT</span> <span style="color: #993333; font-weight: bold;">NULL</span> <span style="color: #993333; font-weight: bold;">DEFAULT</span> <span style="color: #ff0000;">''</span>, <span style="color: #993333; font-weight: bold;">PRIMARY</span> <span style="color: #993333; font-weight: bold;">KEY</span> <span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">`idfoto`</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span> ;</pre> </div> <p>Necesitamos enviar par&aacute;metros al script para indicarle el id de la imagen que queremos ver, y tambi&eacute;n si queremos ver la imagen original o su miniatura, suponiendo que el archivo que contiene al script se llame <q>verblob.php</q>:</p> <p><span id="verblob"></span></p> <div class="hiliter"><strong>html:</strong></div> <p>Donde el par&aacute;metro <var>idfoto</var> indica el id de la imagen, y el parametro <var>tam</var> indica si va a mostrar la imagen original o la miniatura (1 para mostrar la imagen original y 2 para mostrar la miniatura). El script trabaja de la siguiente manera:</p> <div class="hiliter"><strong>php:</strong> <pre><span style="color: #808080; font-style: italic;">// Par&Atilde;&iexcl;metros para recuperar la imagen</span> <span style="color: #808080; font-style: italic;"># Recuperamos el par&Atilde;&iexcl;metro GET con el id &Atilde;&ordm;nico de la foto que queremos mostrar</span> <span style="color: #0000ff;">$idfoto</span> = <span style="color: #66cc66;">&#40;</span><a href="http://www.php.net/isset"><span style="color: #000066;">isset</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$_GET</span><span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">"idfoto"</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span> ? <span style="color: #0000ff;">$_GET</span><span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">"idfoto"</span><span style="color: #66cc66;">&#93;</span> : <a href="http://www.php.net/exit"><span style="color: #000066;">exit</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;"># Recuperamos el par&Atilde;&iexcl;metro GET para elegir entre la miniatura o la foto real</span> <span style="color: #0000ff;">$tam</span> = <span style="color: #66cc66;">&#40;</span><a href="http://www.php.net/isset"><span style="color: #000066;">isset</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$_GET</span><span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">"tam"</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span> ? <span style="color: #0000ff;">$_GET</span><span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">"tam"</span><span style="color: #66cc66;">&#93;</span> : <span style="color: #cc66cc;">1</span>; <span style="color: #808080; font-style: italic;">// Escojemos la foto real o la miniatura seg&Atilde;&ordm;n la variable $tam</span> <span style="color: #b1b100;">switch</span><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$tam</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> <span style="color: #b1b100;">case</span> <span style="color: #ff0000;">"1"</span>: <span style="color: #0000ff;">$campo</span> = <span style="color: #ff0000;">"foto"</span>;break;; <span style="color: #b1b100;">case</span> <span style="color: #ff0000;">"2"</span>: <span style="color: #0000ff;">$campo</span> = <span style="color: #ff0000;">"thumb"</span>;break;; <span style="color: #000000; font-weight: bold;">default</span>: <span style="color: #0000ff;">$campo</span> = <span style="color: #ff0000;">"foto"</span>;break;; <span style="color: #66cc66;">&#125;</span></pre> </div> <p>Ya sabiendo el id de la imagen que vamos a mostrar, hacemos la consulta a la base de datos:</p> <div class="hiliter"><strong>php:</strong> <pre><span style="color: #808080; font-style: italic;">// Recuperamos la foto de la tabla</span> <span style="color: #0000ff;">$sql</span> = <span style="color: #ff0000;">"SELECT $campo, mime FROM tabla WHERE idfoto = $idfoto"</span>; <span style="color: #808080; font-style: italic;"># Conexi&Atilde;&sup3;n a la base de datos</span> <span style="color: #0000ff;">$link</span> = <a href="http://www.php.net/mysql_connect"><span style="color: #000066;">mysql_connect</span></a><span style="color: #66cc66;">&#40;</span>DBHOST, DBUSER, DBPASSWORD<span style="color: #66cc66;">&#41;</span> or <a href="http://www.php.net/die"><span style="color: #000066;">die</span></a><span style="color: #66cc66;">&#40;</span><a href="http://www.php.net/mysql_error"><span style="color: #000066;">mysql_error</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$link</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;; <a href="http://www.php.net/mysql_select_db"><span style="color: #000066;">mysql_select_db</span></a><span style="color: #66cc66;">&#40;</span>DBNAME, <span style="color: #0000ff;">$link</span><span style="color: #66cc66;">&#41;</span> or <a href="http://www.php.net/die"><span style="color: #000066;">die</span></a><span style="color: #66cc66;">&#40;</span><a href="http://www.php.net/mysql_error"><span style="color: #000066;">mysql_error</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$link</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #0000ff;">$conn</span> = <a href="http://www.php.net/mysql_query"><span style="color: #000066;">mysql_query</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$sql</span>, <span style="color: #0000ff;">$link</span><span style="color: #66cc66;">&#41;</span> or <a href="http://www.php.net/die"><span style="color: #000066;">die</span></a><span style="color: #66cc66;">&#40;</span><a href="http://www.php.net/mysql_error"><span style="color: #000066;">mysql_error</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$link</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #0000ff;">$datos</span> = <a href="http://www.php.net/mysql_fetch_array"><span style="color: #000066;">mysql_fetch_array</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$conn</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;">// La imagen</span> <span style="color: #0000ff;">$imagen</span> = <span style="color: #0000ff;">$datos</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#93;</span>; <span style="color: #808080; font-style: italic;">// El mime type de la imagen</span> <span style="color: #0000ff;">$mime</span> = <span style="color: #0000ff;">$datos</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#93;</span>; <span style="color: #808080; font-style: italic;">// Gracias a esta cabecera, podemos ver la imagen </span> <span style="color: #808080; font-style: italic;">// que acabamos de recuperar del campo blob</span> <a href="http://www.php.net/header"><span style="color: #000066;">header</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">"Content-Type: $mime"</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;">// Muestra la imagen</span> <a href="http://www.php.net/echo"><span style="color: #000066;">echo</span></a> <span style="color: #0000ff;">$imagen</span>;</pre> </div> <h2>Conclusiones</h2> <p>Los campos blob no solo nos permiten guardar im&aacute;genes, sino una gran variedad de datos, para mostrarlos solo hay que tener en cuenta el tipo <acronym lang="en" title="Multipurpose Internet Mail Extension">MIME</acronym> del archivo que hemos guardado, y al momento de recuperarlo s&oacute;lamente utilizamos <code>header</code> con el <code>Content-Type</code>.</p></p> <h2>Elementos Utilizados</h2> <ul> <li><a href="http://www.buayacorp.com/files/php/mostrar-una-imagen-desde-blob-mysql-usando-php.txt">C&oacute;digo utilizado</a></li> </ul> <h2>Referencias</h2> <ul> <li><a href="http://www.iana.org/assignments/media-types/">MIME Types</a></li> <li><a href="http://dev.mysql.com/doc/mysql/en/BLOB.html">The BLOB and TEXT Types</a></li> </ul> <h2>Autor</h2> <p> Braulio Andr&eacute;s Soncco Pimentel<br /><br /> Programador - Dise&ntilde;ador<br /><br /> <em>braulio at buayacorp.com</em> </p> Sergio.Iglesias - Diseño y desarrollo web http://s3.amazonaws.com/lcp/sergio-iglesias/myfiles/sergioiglesias65x65.jpg http://sergio-iglesias.espacioblog.com/post/2006/10/26/guardar-imagen-y-su-miniatura-un-campo-blob-mysql-2 Guardar una imagen y su miniatura a un campo Blob de mysql 2006-10-26T19:11:03+00:00 2008-12-05T00:36:53+00:00 <h2>&iquest;Qu&eacute; necesitamos?</h2> <p>Para crear la miniatura necesitamos la <a href="http://www.boutell.com/gd/" lang="en" title="GD Graphics Library">Librer&iacute;a Gr&aacute;fica GD</a>, en este script estamos usando la versi&oacute;n 2.0.28 de esta librer&iacute;a. </p> <p>Si no la tenemos activada solo tenemos que modificar el archivo php.ini que se encuentra en C:\Windows (puede variar seg&uacute;n tu versi&oacute;n de Windows), y agregar la l&iacute;nea <code>extension=php_gd2.dll</code> en la secci&oacute;n &quot;Dynamic Extensions&quot;. El archivo php_gd2.dll debe estar en la carpeta &quot;extensions&quot; dentro del directorio donde instalaste el php, por ejemplo &quot;C:\php\extensions&quot;. Si no tienes el archivo php_gd2.dll, <a href="/files/php/php_gd2.zip" title="Extensi&oacute;n GD para PHP en Windows" lang="es">te lo puedes descargar aqu&iacute;</a>.</p> <h2>Desarrollo del Script</h2> <p>El formulario de upload y el script php est&aacute; en una sola p&aacute;gina, la nombr&eacute; como <em>blob.php</em>, empezemos entonces:</p> <div class="hiliter"><strong>php:</strong> <pre><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #808080; font-style: italic;">// Verificamos que el formulario no ha sido enviado aun</span> <span style="color: #0000ff;">$postback</span> = <span style="color: #66cc66;">&#40;</span><a href="http://www.php.net/isset"><span style="color: #000066;">isset</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$_POST</span><span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">"enviar"</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span> ? <span style="color: #000000; font-weight: bold;">true</span> : <span style="color: #000000; font-weight: bold;">false</span>; <span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$postback</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span> <span style="color: #808080; font-style: italic;">// Nivel de errores</span> <a href="http://www.php.net/error_reporting"><span style="color: #000066;">error_reporting</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">E_ALL</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;">// Constantes</span> <span style="color: #808080; font-style: italic;"># Altura de el thumbnail en p&Atilde;&shy;xeles</span> <a href="http://www.php.net/define"><span style="color: #000066;">define</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">"ALTURA"</span>, <span style="color: #cc66cc;">100</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;"># Nombre del archivo temporal del thumbnail</span> <a href="http://www.php.net/define"><span style="color: #000066;">define</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">"NAMETHUMB"</span>, <span style="color: #ff0000;">"/tmp/thumbtemp"</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;">//Esto en servidores Linux, en Windows podr&Atilde;&shy;a ser:</span> <span style="color: #808080; font-style: italic;">// define(&quot;NAMETHUMB&quot;, &quot;c:/windows/temp/thumbtemp&quot;); y te olvidas de los problemas de permisos</span> <span style="color: #808080; font-style: italic;"># Servidor de base de datos</span> <a href="http://www.php.net/define"><span style="color: #000066;">define</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">"DBHOST"</span>, <span style="color: #ff0000;">"localhost"</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;"># nombre de la base de datos</span> <a href="http://www.php.net/define"><span style="color: #000066;">define</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">"DBNAME"</span>, <span style="color: #ff0000;">"test"</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;"># Usuario de base de datos</span> <a href="http://www.php.net/define"><span style="color: #000066;">define</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">"DBUSER"</span>, <span style="color: #ff0000;">"root"</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;"># Password de base de datos</span> <a href="http://www.php.net/define"><span style="color: #000066;">define</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">"DBPASSWORD"</span>, <span style="color: #ff0000;">""</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;">// Mime types permitidos</span> <span style="color: #0000ff;">$mimetypes</span> = <a href="http://www.php.net/array"><span style="color: #000066;">array</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">"image/jpeg"</span>, <span style="color: #ff0000;">"image/pjpeg"</span>, <span style="color: #ff0000;">"image/gif"</span>, <span style="color: #ff0000;">"image/png"</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;">// Variables de la foto</span> <span style="color: #0000ff;">$name</span> = <span style="color: #0000ff;">$_FILES</span><span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">"foto"</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">"name"</span><span style="color: #66cc66;">&#93;</span>; <span style="color: #0000ff;">$type</span> = <span style="color: #0000ff;">$_FILES</span><span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">"foto"</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">"type"</span><span style="color: #66cc66;">&#93;</span>; <span style="color: #0000ff;">$tmp_name</span> = <span style="color: #0000ff;">$_FILES</span><span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">"foto"</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">"tmp_name"</span><span style="color: #66cc66;">&#93;</span>; <span style="color: #0000ff;">$size</span> = <span style="color: #0000ff;">$_FILES</span><span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">"foto"</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">"size"</span><span style="color: #66cc66;">&#93;</span>; <span style="color: #808080; font-style: italic;">// Verificamos si el archivo es una imagen v&Atilde;&iexcl;lida</span> <span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span>!<a href="http://www.php.net/in_array"><span style="color: #000066;">in_array</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$type</span>, <span style="color: #0000ff;">$mimetypes</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span> <a href="http://www.php.net/die"><span style="color: #000066;">die</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">"El archivo que subiste no es una imagen v&Atilde;&iexcl;lida"</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;">// Creando el thumbnail</span> <span style="color: #b1b100;">switch</span><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$type</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">$mimetypes</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#93;</span>: <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">$mimetypes</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#93;</span>: <span style="color: #0000ff;">$img</span> = imagecreatefromjpeg<span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$tmp_name</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #b1b100;">break</span>; <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">$mimetypes</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">2</span><span style="color: #66cc66;">&#93;</span>: <span style="color: #0000ff;">$img</span> = imagecreatefromgif<span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$tmp_name</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #b1b100;">break</span>; <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">$mimetypes</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">3</span><span style="color: #66cc66;">&#93;</span>: <span style="color: #0000ff;">$img</span> = imagecreatefrompng<span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$tmp_name</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #b1b100;">break</span>; <span style="color: #66cc66;">&#125;</span> <span style="color: #0000ff;">$datos</span> = <a href="http://www.php.net/getimagesize"><span style="color: #000066;">getimagesize</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$tmp_name</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #0000ff;">$ratio</span> = <span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$datos</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#93;</span>/ALTURA<span style="color: #66cc66;">&#41;</span>; <span style="color: #0000ff;">$ancho</span> = <a href="http://www.php.net/round"><span style="color: #000066;">round</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$datos</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#93;</span>/<span style="color: #0000ff;">$ratio</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #0000ff;">$thumb</span> = imagecreatetruecolor<span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$ancho</span>, ALTURA<span style="color: #66cc66;">&#41;</span>; imagecopyresized<span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$thumb</span>, <span style="color: #0000ff;">$img</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #0000ff;">$ancho</span>, ALTURA, <span style="color: #0000ff;">$datos</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#93;</span>, <span style="color: #0000ff;">$datos</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #b1b100;">switch</span><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$type</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">$mimetypes</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#93;</span>: <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">$mimetypes</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#93;</span>: imagejpeg<span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$thumb</span>, NAMETHUMB<span style="color: #66cc66;">&#41;</span>; <span style="color: #b1b100;">break</span>; <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">$mimetypes</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">2</span><span style="color: #66cc66;">&#93;</span>: imagegif<span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$thumb</span>, NAMETHUMB<span style="color: #66cc66;">&#41;</span>; <span style="color: #b1b100;">break</span>; <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">$mimetypes</span><span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">3</span><span style="color: #66cc66;">&#93;</span>: imagepng<span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$thumb</span>, NAMETHUMB<span style="color: #66cc66;">&#41;</span>; <span style="color: #b1b100;">break</span>; <span style="color: #66cc66;">&#125;</span> <span style="color: #808080; font-style: italic;">// Extrae los contenidos de las fotos</span> <span style="color: #808080; font-style: italic;"># contenido de la foto original</span> <span style="color: #0000ff;">$fp</span> = <a href="http://www.php.net/fopen"><span style="color: #000066;">fopen</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$tmp_name</span>, <span style="color: #ff0000;">"rb"</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #0000ff;">$tfoto</span> = <a href="http://www.php.net/fread"><span style="color: #000066;">fread</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$fp</span>, <a href="http://www.php.net/filesize"><span style="color: #000066;">filesize</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$tmp_name</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #0000ff;">$tfoto</span> = <a href="http://www.php.net/addslashes"><span style="color: #000066;">addslashes</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$tfoto</span><span style="color: #66cc66;">&#41;</span>; <a href="http://www.php.net/fclose"><span style="color: #000066;">fclose</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$fp</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;"># contenido del thumbnail</span> <span style="color: #0000ff;">$fp</span> = <a href="http://www.php.net/fopen"><span style="color: #000066;">fopen</span></a><span style="color: #66cc66;">&#40;</span>NAMETHUMB, <span style="color: #ff0000;">"rb"</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #0000ff;">$tthumb</span> = <a href="http://www.php.net/fread"><span style="color: #000066;">fread</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$fp</span>, <a href="http://www.php.net/filesize"><span style="color: #000066;">filesize</span></a><span style="color: #66cc66;">&#40;</span>NAMETHUMB<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #0000ff;">$tthumb</span> = <a href="http://www.php.net/addslashes"><span style="color: #000066;">addslashes</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$tthumb</span><span style="color: #66cc66;">&#41;</span>; <a href="http://www.php.net/fclose"><span style="color: #000066;">fclose</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$fp</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;">// Borra archivos temporales si es que existen</span> @<a href="http://www.php.net/unlink"><span style="color: #000066;">unlink</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$tmp_name</span><span style="color: #66cc66;">&#41;</span>; @<a href="http://www.php.net/unlink"><span style="color: #000066;">unlink</span></a><span style="color: #66cc66;">&#40;</span>NAMETHUMB<span style="color: #66cc66;">&#41;</span>; <span style="color: #808080; font-style: italic;">// Guardamos todo en la base de datos</span> <span style="color: #808080; font-style: italic;">#nombre de la foto</span> <span style="color: #0000ff;">$nombre</span> = <span style="color: #0000ff;">$_POST</span><span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">"nombre"</span><span style="color: #66cc66;">&#93;</span>; <span style="color: #0000ff;">$link</span> = <a href="http://www.php.net/mysql_connect"><span style="color: #000066;">mysql_connect</span></a><span style="color: #66cc66;">&#40;</span>DBHOST, DBUSER, DBPASSWORD<span style="color: #66cc66;">&#41;</span> or <a href="http://www.php.net/die"><span style="color: #000066;">die</span></a><span style="color: #66cc66;">&#40;</span><a href="http://www.php.net/mysql_error"><span style="color: #000066;">mysql_error</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$link</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;; <a href="http://www.php.net/mysql_select_db"><span style="color: #000066;">mysql_select_db</span></a><span style="color: #66cc66;">&#40;</span>DBNAME, <span style="color: #0000ff;">$link</span><span style="color: #66cc66;">&#41;</span> or <a href="http://www.php.net/die"><span style="color: #000066;">die</span></a><span style="color: #66cc66;">&#40;</span><a href="http://www.php.net/mysql_error"><span style="color: #000066;">mysql_error</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$link</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #0000ff;">$sql</span> = <span style="color: #ff0000;">"INSERT INTO tabla(nombre, foto, thumb, mime) VALUES ('$nombre', '$tfoto', '$tthumb', '$type')"</span>; <a href="http://www.php.net/mysql_query"><span style="color: #000066;">mysql_query</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$sql</span>, <span style="color: #0000ff;">$link</span><span style="color: #66cc66;">&#41;</span> or <a href="http://www.php.net/die"><span style="color: #000066;">die</span></a><span style="color: #66cc66;">&#40;</span><a href="http://www.php.net/mysql_error"><span style="color: #000066;">mysql_error</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #0000ff;">$link</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>; <a href="http://www.php.net/echo"><span style="color: #000066;">echo</span></a> <span style="color: #ff0000;">"Fotos guardadas"</span>; <a href="http://www.php.net/exit"><span style="color: #000066;">exit</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #66cc66;">&#125;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre> </div> <div class="hiliter"><strong>html:</strong> <pre>&nbsp; <span style="color: #00bbdd;">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;</span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;html</span> xmlns=<span style="color: #ff0000;">"http://www.w3.org/1999/xhtml"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;head&gt;</span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;title&gt;</span></span>Imagen a Blob<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/title&gt;</span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;meta</span> <span style="color: #000066;">http-equiv</span>=<span style="color: #ff0000;">"Content-Type"</span> <span style="color: #000066;">content</span>=<span style="color: #ff0000;">"text/html; charset=utf-8"</span> /<span style="color: #000000; font-weight: bold;">&gt;</span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/head&gt;</span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;body&gt;</span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;form</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">"frmimage"</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"frmimage"</span> <span style="color: #000066;">method</span>=<span style="color: #ff0000;">"post"</span> <span style="color: #000066;">enctype</span>=<span style="color: #ff0000;">"multipart/form-data"</span> <span style="color: #000066;">action</span>=<span style="color: #ff0000;">"&lt;?php echo $_SERVER['PHP_SELF'];?&gt;</span>&quot;&gt; Nombre: <span style="color: #009900;">&lt;input type="</span><span style="color: #000066;">text</span><span style="color: #ff0000;">" id="</span>nombre<span style="color: #ff0000;">" name="</span>nombre<span style="color: #ff0000;">" /&gt;</span><span style="color: #009900;">&lt;br /&gt;</span> Imagen: <span style="color: #009900;">&lt;input type="</span>file<span style="color: #ff0000;">" id="</span>foto<span style="color: #ff0000;">" name="</span>foto<span style="color: #ff0000;">" /&gt;</span><span style="color: #009900;">&lt;br /&gt;</span> <span style="color: #009900;">&lt;input type="</span>submit<span style="color: #ff0000;">" name="</span>enviar<span style="color: #ff0000;">" id="</span>enviar<span style="color: #ff0000;">" value="</span>Guardar<span style="color: #ff0000;">" /&gt;</span> <span style="color: #009900;">&lt;/form&gt;</span> <span style="color: #009900;">&lt;/body&gt;</span> <span style="color: #009900;">&lt;/html&gt;</span> </span></pre> </div> <p>Las primeras l&iacute;neas controlan que el formulario aun no se ha enviado, despues definimos constantes para guardar los archivos en nuestra base de datos, solo las cambiamos seg&uacute;n nos convenga.</p> <p>Despues verificamos si el archivo que subimos es una imagen para esto verificamos su tipo <acronym lang="en" title=" Multipurpose Internet Mail Extensions">MIME</acronym>. Los tipos que se permiten en este script son &quot;image/jpeg&quot; , &quot;image/gif&quot; e &quot;image/png&quot;. Caso contrario recibiremos el mensaje &quot;El archivo que subimos no es una imagen v&aacute;lida&quot;.</p> <p>Seg&uacute;n el tipo <acronym lang="en" title=" Multipurpose Internet Mail Extensions">MIME</acronym> de la imagen, crearemos la miniatura con las funciones <a href="http://www.php.net/imagecreatefromjpeg" lang="en" title="PHP: imagecreatefromjpeg - Manual"><code>imagecreatefromjpeg()</code></a>, <a href="http://www.php.net/imagecreatefromgif" lang="en" title="PHP: imagecreatefromgif - Manual"><code>imagecreatefromgif()</code></a> o <a href="http://www.php.net/imagecreatefrompng" lang="en" title="PHP: imagecreatefrompng - Manual"><code>imagecreatefrompng()</code></a>.</p> <p>La funci&oacute;n <a href="http://www.php.net/imagecopyresized" lang="en" title="PHP: imagecopyresized - Manual"><code>imagecopyresized()</code></a> crea la miniatura de la imagen, aunque tambi&eacute;n podemos utilizar <a href="http://www.php.net/imagecopyresampled" lang="en" title="PHP: imagecopyresampled - Manual"><code>imagecopyresampled()</code></a>.</p> <p>Y aqu&iacute; el script que utiliz&eacute; para la tabla:</p> <div class="hiliter"><strong>sql:</strong> <pre><span style="color: #993333; font-weight: bold;">CREATE</span> <span style="color: #993333; font-weight: bold;">TABLE</span> <span style="color: #ff0000;">`tabla`</span> <span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">`idfoto`</span> int<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">3</span><span style="color: #66cc66;">&#41;</span> <span style="color: #993333; font-weight: bold;">NOT</span> <span style="color: #993333; font-weight: bold;">NULL</span> <span style="color: #993333; font-weight: bold;">AUTO_INCREMENT</span>, <span style="color: #ff0000;">`nombre`</span> varchar<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">255</span><span style="color: #66cc66;">&#41;</span> <span style="color: #993333; font-weight: bold;">NOT</span> <span style="color: #993333; font-weight: bold;">NULL</span> <span style="color: #993333; font-weight: bold;">DEFAULT</span> <span style="color: #ff0000;">''</span>, <span style="color: #ff0000;">`foto`</span> blob <span style="color: #993333; font-weight: bold;">NOT</span> <span style="color: #993333; font-weight: bold;">NULL</span>, <span style="color: #ff0000;">`thumb`</span> blob <span style="color: #993333; font-weight: bold;">NOT</span> <span style="color: #993333; font-weight: bold;">NULL</span>, <span style="color: #ff0000;">`mime`</span> varchar<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">40</span><span style="color: #66cc66;">&#41;</span> <span style="color: #993333; font-weight: bold;">NOT</span> <span style="color: #993333; font-weight: bold;">NULL</span> <span style="color: #993333; font-weight: bold;">DEFAULT</span> <span style="color: #ff0000;">''</span>, <span style="color: #993333; font-weight: bold;">PRIMARY</span> <span style="color: #993333; font-weight: bold;">KEY</span> <span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">`idfoto`</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span> ;</pre> </div> <p>Ustedes ya le agregan los campos que necesiten.</p> <h2>Actualizaci&oacute;n</h2> <p> Dado que el soporte <acronym title="Graphic Interchange Format" lang="en">GIF</acronym> fue retirado por completo de la biblioteca GD en la versión 1.6, la funci&oacute;n <code>imagegif</code> no se encuentra disponible si est&aacute; usando tal versi&oacute;n de la biblioteca GD. Se espera que el soporte para esta característica regrese en una versión posterior al relanzamiento del soporte GIF en la biblioteca GD a mediados de 2004. Para más información, consulte el <a href="http://www.boutell.com/gd/">sitio web del Proyecto GD</a>.</p></p> <p> Para que nuestro script funcione corr&eacute;ctamente la carpeta que lo contiene debe tener permisos de escritura, la mayor&iacute;a de hostings que ofrecen PHP tienen los archivos bajo la carpeta public_html, no se sugiere correr este script bajo la carpeta raiz, ya que si damos permisos de escritura a public_html otros usuarios pueden acceder y modificar nuestros archivos. La sugerencia es correr el script bajo una carpeta cualquiera diferente de la raiz, por ejemplo /thumbs/blob.php, asi no tendremos problemas de seguridad. </p> <h2>Actualizaci&oacute;n 2</h2> <p>Agregué al script en el arreglo de mimes el tipo "image/pjpeg" para que no haya problemas al subirlo, también a sugerencia de mi master Alex cambié la ruta de la NAMETHUMB, para que se guarde en la carpeta temporal del <acronym title="Sistema Operativo" lang="es">SO</acronym> en el que se ejecuta. Si es windows entonces c:\Windows\Temp\ y si es linux /tmp/, etc.</p> <h2>Enlaces</h2> <ul> <li><a href="http://www.forosdelweb.com/s/showpost.php?p=1136841&#038;postcount=2" rel="External">Redimensionar Imágenes</a></li> <li><a href="http://www.buayacorp.com/archivos/mostrar-una-imagen-desde-blob-mysql-usando-php/" rel="help">Mostrar una imagen desde blob mysql usando PHP</a></li> </ul> <h2>Autor</h2> <p> Braulio Andr&eacute;s Soncco Pimentel<br /><br /> Programador - Dise&ntilde;ador<br /><br /> <em>braulio at buayacorp.com</em> </p> Sergio.Iglesias - Diseño y desarrollo web http://s3.amazonaws.com/lcp/sergio-iglesias/myfiles/sergioiglesias65x65.jpg http://sergio-iglesias.espacioblog.com/post/2006/10/26/popups-accesibles-con-javascript Popups accesibles con javascript 2006-10-26T19:06:44+00:00 2007-11-06T07:21:03+00:00 <p>En ocasiones y por exigencias ajenas a los desarrolladores, nos vemos obligados a abrir páginas en esas &quot;amables&quot; ventanas que dicen llamarse <em><strong>popups</strong></em>. Entendiendo por popup como aquellas ventanas a las que podemos eliminar funcionalidades como la barra de direcciones, la barra de estado; definir su tamaño, etc.</p> <p>A través de este pequeño tutorial veremos cómo depurar nuestro código para que su contenido sea 100% accesible, y a convertir esta técnica en algo un poco más usable.</p> <p>Desde el punto de vista de los navegadores con los que nuestro público accederá a la web podemos encontrarnos con tres casos:</p> <ol> <li><strong>Su navegador soporta javascript y permite lanzar nuevas ventanas:</strong> Abriremos un popup con las características que le hayamos definido.</li> <li><strong>Su navegador no soporta javascript pero permite lanzar nuevas ventanas:</strong> Lanzaremos una ventana del navegador normal y corriente.</li> <li><strong>Su navegador no soporta javascript y no permite lanzar nuevas ventanas:</strong> La página se abrirá en la misma ventana.</li> </ol> <h3>Y todo esto traducido a XHTML significa...</h3> <p>Nos ponemos en situación: tenemos un enlace desde el que queremos abrir en un popup la página <code>popup.html</code>.</p> <p>Unas técnicas muy vistas en la <abbr title="World Wide Web">www</abbr> son las siguientes:</p> <div class="ejemplo"> <code>&lt;a href=&quot;javascript:abreventana()&quot;&gt;texto del enlace&lt;/a&gt;<br /><br /> &lt;a href=&quot;#&quot; onclick=&quot;abreventana()&quot;&gt;texto del enlace&lt;/a&gt;</code></p> </div> <p>Ninguna de las dos es correcta. Si <code>abreventana()</code> no se ejecuta, el contenido no será accesible. Además de que el contenido del popup no quedará accesible a los robots de los buscadores, por lo que la página no quedará indexada (a fecha de hoy, éstos no son capaces de seguir enlaces generados mediante JavaScript).</p> <p>La solución correcta sería algo así:</p> <div class="ejemplo"> <code>&lt;a href=&rdquo;popup.htm&rdquo; onclick=&rdquo;abreventana()&rdquo; target=&rdquo;nuevaventana&rdquo; title=&rdquo;Se abre en otra ventana&rdquo;&gt;(nueva ventana) texto del enlace&lt;/a&gt;</code></p> </div> <p>Como podéis ver con este código informamos claramente tanto al usuario como a su navegador de que el enlace se abrirá en una nueva ventana.<br /><br /> La función <code>abreventana()</code> sería la típica:</p> <div class="ejemplo"> <code><br /> &lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;</p> <p> function abreventana(){<br /><br /> &nbsp;&nbsp;window.open(this.href,&quot;nuevaventana&quot;,propiedades);<br /><br /> &nbsp;&nbsp;return false;<br /><br /> }<br /><br /> &lt;/script&gt;</p> <p> </code> </div> <p>Es importante no olvidar el <code>return false</code>, de lo contrario se ejecutará la función de JavaScript y el <code>href</code> del enlace.</p> <p>Si el <abbr title="Agente de usuario">AU</abbr> permite ejecutar javascript y abrir nuevas ventanas, nuestra página se abrirá en una ventana con las propiedades que le hayamos definido.<br /> Si no soporta javascript pero sí permite abrir nuevas ventanas, el enlace se abrirá en una ventana estándar del navegador en cuestión.<br /> Si no soporta javascript ni permite abrir nuevas ventanas, la página se abrirá en la misma. Como podéis ver, <strong>hemos cubierto todas las posibilidades</strong>.</p> <p>Para terminar de ganarnos el sueldo, en la página <code>popup.html</code>, introduciremos un par de líneas de código para asegurarnos de que el usuario puede cerrar la ventana o volver a donde estaba (siempre puede usar el menú de su navegador, pero hagámosle la vida un poco más fácil).</p> <div class="ejemplo"> <code><br /> &lt;script type=&quot;text/javascript&quot;&gt;<br /><br /> &lt;![CDATA[ <br /><br /> &nbsp;&nbsp;document.write(&quot;&lt;a href='#' onclick='window.close()'&gt;Cerrar ventana&lt;/a&gt;&quot;)</p> <p> ]]&gt;<br /><br /> &lt;/script&gt;<br /> </code> </div> <p>Con esta etiqueta cubrimos el abanico de los navegadores con soporte de javascript. Ahora hacemos lo propio para los que no:</p> <div class="ejemplo"> <code><br /> &lt;noscript&gt;</p> <p> &nbsp;&nbsp;&lt;a href=&quot;padre.html&quot;&gt;Volver&lt;/a&gt;<br /><br /> &lt;/noscript&gt;<br /> </code> </div> <h3>Conclusiones</h3> <p>Como hemos podido ver, hacer un poco más accesible una página es cuestión de llevar una metodología de trabajo correcta, teniendo siempre en mente al usuario.</p> <p>En este caso hemos conseguido que la página popup.html sea totalmente accesible, tanto para los agentes de usuario como para los robots de búsqueda.</p> <p class="categoria">En categoría: <a href="/accesibilidad/">Accesibilidad</a> | Comentarios: <a href="/comentarios.asp?id=2">2703</a> | <a href="/comentarios.asp?id=2">Ver o añadir comentarios</a> |</p> <p><em><strong>Permitida la reproducción parcial o total citando la fuente: jlvelazquez.net</strong></em></p> Sergio.Iglesias - Diseño y desarrollo web http://s3.amazonaws.com/lcp/sergio-iglesias/myfiles/sergioiglesias65x65.jpg http://sergio-iglesias.espacioblog.com/post/2006/10/22/colores-la-web Colores en la web 2006-10-22T15:19:39+00:00 2007-11-06T07:20:31+00:00 <p>Siempre se habla de la importancia de los colores en la web. Aquí presento 2 páginas para poder crear una buena paleta de colores:<br /> - <a href="http://www.colorschemer.com/schemes/">colorschemer.com</a><br /> - <a href="http://www.colorblender.com/">www.colorblender.com</a> </p> Sergio.Iglesias - Diseño y desarrollo web http://s3.amazonaws.com/lcp/sergio-iglesias/myfiles/sergioiglesias65x65.jpg http://sergio-iglesias.espacioblog.com/post/2006/10/12/creacion-botones Creación de botones 2006-10-12T17:57:49+00:00 2007-11-06T07:19:12+00:00 <p><img src="myfiles/sergio-iglesias/buttonator.png" width="215" height="95" class="imgdcha" /><br /> Aquí tenemos una página web para crear interesantes botones para todo lo que queramos, además de poder personalizarlos con el tipo de letra, color del texto, color de fondo, distintos estilos de botón...<br /> - <a href="http://www.buttonator.com/">www.buttonator.com</a> </p> Sergio.Iglesias - Diseño y desarrollo web http://s3.amazonaws.com/lcp/sergio-iglesias/myfiles/sergioiglesias65x65.jpg http://sergio-iglesias.espacioblog.com/post/2006/10/12/recursos-la-web Recursos para la web 2006-10-12T17:46:34+00:00 2007-11-06T07:19:12+00:00 <p>A través del blog de <a href="http://www.pixel-inc.net/pixelblog">Pixel</a>, descubrimos varios enlaces a tener en cuenta para el diseño y el desarrollo web:<br /> - <a href="http://www.pixel-inc.net/pixelblog/recursos-de-diseno-web/">Recursos de diseño web</a> </p> Sergio.Iglesias - Diseño y desarrollo web http://s3.amazonaws.com/lcp/sergio-iglesias/myfiles/sergioiglesias65x65.jpg http://sergio-iglesias.espacioblog.com/post/2006/10/09/extension-firefox Extensión FireFox 2006-10-09T19:57:07+00:00 2007-11-06T07:18:15+00:00 <p>- <a href="http://www.hypercubed.com/projects/firefox/fx_install.php?url=xinha_here_v0_10-fx.xpi&title=Xinha%20Here%20v0.10&iconurl=xinhahere.png">Xinha</a>: nueva extensión para FireFox, con la que puedes transformar cualquier textarea en un editor html WYSIWYG. </p> Sergio.Iglesias - Diseño y desarrollo web http://s3.amazonaws.com/lcp/sergio-iglesias/myfiles/sergioiglesias65x65.jpg http://sergio-iglesias.espacioblog.com/post/2006/09/27/razones-tener-tu-pagina-web-ii-para-pymes- Razones para tener tu página web II 2006-09-27T17:30:52+00:00 2009-06-05T01:50:01+00:00 <h2>Guía Básica para PYMES</h2> <blockquote><p>Artículo de: <a href="http://www.alzado.org/autor.php?id=2">César Martín</a><br /> Web: <a href="http://www.alzado.org/articulo.php?id_art=123">alzado.org</a></p></blockquote> <h2>Razones para tener tu página en Internet</h2> <ol> <li>Estar en internet es algo mas que electrónica y ordenadores.<br /> Cada vez mas gente se conecta a internet y con ello cada vez aparecen nueva necesidades a cubrir. Cada vez se demandan mas servicios y productos que pueden encajar con lo que tu negocio ofrece.</li> <li>Todos los productos entran en internet.<br /> Los servicios que mejor encajan en internet son los de servicios profesionales. Si ofreces servicios de jardinería, seria muy interesante consultar que hacer con mi jardín. Esta consulta puede ser gratis si soy yo el que mira la información que ofreces, pero puede ser de pago si te pido un proyecto. La ventaja que tiene el ofrecer servicios profesionales es que internet elimina las barreras internacionales y permite el intercambio de documentos de forma instantánea.<br /> Si lo que ofreces son productos "físicos" lo único que tendrás que hacer es calcular cuanto te puede costar el envío a cualquier parte del mundo y si hubiera problemas legales de algún tipo. Pero no dudes en poner el catalogo "on-line" y en ofrecer la información sobre el precio y cuanto costaría enviarlo.</li> <li>Hay muchos enemigos.<br /> Si tienes un servicio tipo libros, música, vídeos... estas muy expuesto a los gigantes de internet tipo Amazon.com pero las PYMES suelen tener la ventaja de la especialización. Procura ofrecer un producto detallado y especial y juega con la ventaja del trato humano. Procura ofrecer una opinión mas personal y un mejor servicio.</li> </ol> <h2>Elementos a tener en cuenta: El nombre del dominio, la información a incluir y el posicionamiento</h2> <p>En el proceso de hacer una página hay unos cuantos pasos que debes tomar para arrancar. Aquí tienes algunos consejos:</p> <ol> <li>Elegir un nombre de dominio:<br /> Busca algo que describa tu servicio o producto con claridad y poco mas. Sobre comprar un dominio .es o .com es mejor comprar un dominio .com (.net es una buena opcion si el .com esta cogido. Los .org solo si te dedicas a cosas sin animo de lucro, etc.). En un mercado global, tenemos mas que ganar fuera de las fronteras que dentro. Solo es recomendable el dominio .es si tu servicio esta (legalmente) restringido a el país.</li> <li>La información a incluir:<br /> Lo básico es tu catalogo de productos y servicios. Lo mejor es crear un directorio y poner un buscador, si es muy sencillo (menos de 60 páginas) te bastara con el directorio.<br /> Procura ofrecer un acceso a los productos por nombres que usen tus clientes, por familias y crea zonas destacadas para aquellos productos mas solicitados, . Luego información sobre como ponerse en contacto contigo para hacer negocios y por ultimo algo de información sobre la empresa y la plantilla.</li> <li>El posicionamiento:<br /> Esto quizás sea lo mas importante. En internet hay mucha información y esto genera confusión a la hora de saber que es importante. Es crucial para el éxito de tu página que este posicionada correctamente. Procura identificar a tus clientes con precisión, usa su terminología, sus necesidades para que cuando los usuarios busquen, te encuentren a ti primero.</li> </ol> <h2>Darse a conocer y responder al correo</h2> <p>Cuando tengas tu página en internet y todo funcione bien, tendrás que darte a conocer y mantener los clientes que generes.<br /> Para que te conozcan hay que:</p> <ol> <li>Darse de alta en los buscadores (buscas la categoría donde te quieres colocar y accedes por el enlace que suelen tener de "añadir un sitio", cuanto mas profundices en el directorio del buscador mejor). Desde que te des de alta hasta que aparezcas pueden pasar 3 meses. Paciencia que merece la pena.</li> <li>Ponerse en contacto y crear enlaces con páginas que ya existan sobre tu negocio o actividad. En internet es bueno compartir información y enlaces. Busca las páginas que estén en tu sector, miralas y envíales un e-mail presentandote y contandoles que les quieres poner un enlace en tu página.</li> <li>Responder al correo. Un cliente perdido, no solo es "1" cliente, es todos los amigos, primos, hermanos, etc. Con el poder que tiene internet responder al correo correctamente es vital para la propagación de tu sitio. Ademas el responder en menos de 24 horas te dará imagen de eficacia y disposición.</li> <li>Procura crear algo de relaciones publicas enviando una newsletter a los medios especializados sobre novedades en tu site y eventos que puedan ocurrir.</li> </ol> Sergio.Iglesias - Diseño y desarrollo web http://s3.amazonaws.com/lcp/sergio-iglesias/myfiles/sergioiglesias65x65.jpg http://sergio-iglesias.espacioblog.com/post/2006/09/27/galeria-imagenes-01 Galeria de imágenes - 01 2006-09-27T14:06:19+00:00 2007-11-06T07:16:11+00:00 <p>Galería que al hacer clic en cada una de las imágenes se abre a tamaño real en un capa semitransparente:<br /> - <a href="http://www.huddletogether.com/projects/lightbox2/">Lightbox JS v2.0</a> </p>