El otro dÃa contábamos como realizar drag&drop de elementos HTML y en el ejemplo lo que hacÃamos era recolocar los elementos dentro del HTML. Indicábamos que una buena utilidad para este efecto podrÃa ser para realizar comparativas de productos en una tienda.
Read More “Laboratorio: Comparar productos mediante drag & drop”
Dentro de la Web 2.0 se intentan hacer cosas menos web y más tipo aplicación de escritorio. Una de estas cosas es realizar un drag and drop. Esto nos puede ser útil para interactuar con elementos, por ejemplo, tenemos una lista de productos, pinchamos en uno y arrastramos en otro, obteniendo una comparativa de los productos. Bueno, las aplicaciones que le podemos dar depende de nuestras necesidades y de nuestra imaginación. Eso sÃ, la forma de realizarlo es la misma.
En el ejemplo que hemos creado, hacemos que el elemento seleccionado se posicione encima del elemento sobre el que realizamos el drop. También hay que tener en cuenta, que en este caso, el drag&drop que hacemos es pinchando-moviendo-pinchando, no pinchando-moviendo-soltando. Realmente también se podrÃa hacer asÃ, pero como lo hemos hecho válido para texto, si lo hacemos de la manera normal, se podrÃa ir seleccionando el texto según se mueve el ratón.
Read More “Laboratorio: realizar drag and drop de elementos HTML”
Una cosa que siempre me ocurre cuando estoy trabajando en mis propios proyectos, es que me creo una carpeta para cada uno de los proyectos dentro del raÃz (root) y no puedo usar paths absolutos ya que en el servidor real no usaré ese directorio.
Por ejemplo, estoy creando un nuevo proyecto llamado proyecto1 y para trabajar en local tengo la ruta siguiente: http://localhost:8080/proyecto1, pero cuando lo suba al servidor, será http://proyecto1.com. Voy a tener problemas si quiero usar los paths sean absolutos (“/imagenes/fondo.png”), porque en local deberÃa tener antes el directorio del proyecto (“/proyecto1/imagenes/fondo.png”). Lógicamente, no puedo estar trabajando con paths relativos y luego pasarlos a absolutos cuando lo suba al servidor, puedo liar una buena.
¿Qué solución me queda?, pues una de ellas es la que uso desde hace tiempo, quizás no la más limpia, pero si es bastante sencilla.
Primero tengo que acceder al fichero hosts, que suele encontrarse en la ruta C:\windows\system32\drivers\etc, y añadir la siguiente lÃnea:
127.0.0.1 proyecto1Con esto lo que conseguimos es que se reconozca el dominio proyecto1 como nuestra propia máquina (127.0.0.1).
Y lo siguiente que tenemos que hacer es modificar el fichero de configuración de Apache (httpd.conf) e incluir el nuevo host.
NameVirtualHost proyecto1:8080
<VirtualHost proyecto1:8080>
DocumentRoot "C:/proyectos/proyecto1"
ServerName proyecto1
</VirtualHost>
<Directory "C:/proyectos/proyecto1">
Allow from all
</Directory>A veces dependemos del navegador en aspectos de diseño, un caso bastante común es con los checkboxes y radio buttons, no son como nosotros queremos y difieren según el navegador que usemos.
Esto se puede solucionar mediante CSS, para ello deberemos crearnos una imagen que contenga todos los estados del botón (seleccionado, no seleccionado, con foco y sin foco). Como se puede apreciar, la imagen contiene todos los posibles estados uno debajo del otro, ya que mediante estilos, usaremos una porción de la imagen para mostrar el estado correspondiente.
Para poder realizar este efecto es necesario usar la etiqueta label, la cual hará referenia al checkbox o al radio button, los cuales son necesarios ocultar para poder sustituirlos por la imagen (que estará ligada al elemento label).
Tenemos estos elementos HTML:
<input type="checkbox" id="opc1"/><label for="opc1">Opcion 1</label>Los estilos iniciales para el input y para el label son los siguientes:
input[type="checkbox"] {
visibility: hidden;
width: 0px;
height: 0px;
padding: 0px;
margin: 0px;
}
label {
padding-left: 20px;
height: 16px;
}Y por último, los estilos para los distintos estados del input son los siguientes:
input[type="checkbox"] + label{
background: url("imagen.png") 0 0 no-repeat;
}
input[type="checkbox"]:focus + label{
background-position: 0 -16px;
}
input[type="checkbox"]:checked + label{
background-position: 0 -32px;
}
input[type="checkbox"]:checked:focus + label{
background-position: 0 -48px;
}Styling Checkbox and Radio Graphics With Only CSS
VÃa / Digg
Interesante artÃculo sobre como cachear nuestras páginas cuando usan la base de datos para almacenar la información. Usar la BD para guardar los datos es bastante útil cuando se quiere modificar la página con facilidad o cuando se quieren usar plantillas.
El caso es que estas páginas no suelen modificarse con frecuencia, por lo que al acceder a ella, se accede a la BD para obtener los mismos datos, generar la página web y mostrarla, cosa que se ha hecho anteriormente. Por eso, este script propone guardar la página en un directorio y acceder a ella cuando el tiempo de creación y el actual no supera un cierto valor.
Para realizar este script, el auto usa las funciones de control de salida que ofrece PHP. Un script fácil de entender y que nos puede ser muy útil.
PhP Caching
VÃa / Dzone
Alguien con valor (y humor) que nos explica cómo hacer que tu ordenador tenga dual-boot con Windows Vista y Windows XP. Sobre todo, recomienda no hacerlo, ya que entre otras cosas, son los propios de Microsoft quienes dicen que quién lo haga, que lo haga en un ordenador de pruebas.
Lo primero es bajarse la Beta 2 de Vista o pedir que te la manden. Son 3.12 Gb, asà que hay que tener paciencia y un gestor de descargas. Una vez obtenido el .iso, lo pasamos a DVD y empezamos la instalación.
Vista sólo funciona en una partición primaria, la misma que usa XP, por lo que hay que crearse otra en el espacio libre que hay en C:, nos recomienda que usemos la utilidad Norton PartitionMagic, ya que es el único que crea particiones nuevas sin borrar lo que ya existÃa antes.
Una vez creada la partición (usa la unidad V:), empezamos a instalar Vista desde el DVD, si no hubieramos realizado la partición, Vista nos hubiera preguntado si renombrábamos la carpeta windows de XP, lo cual no es lo que deseamos. Vista tardará mucho en copiar todos los archivos y en reiniciarse unas cuantas veces, a parte de que no dispone de los drivers de todos los dispositivos, por lo que es bueno que los tengas a mano para poder instalarlos.
Una vez acabado y reiniciado el ordenador, nos pedirá que versión de Windows queremos arrancar: Microsoft Windows (Vista) o Earlier version of Windows (XP).
Windows Vista Beta: How to dual-boot Windows XP and Windows Vista
Hace tiempo contábamos como rotar imágenes aleatoriamente, algo que se puede utilizar para la cabecera del blog (como hace mucha gente). El problema es cuando las imágenes son completamente distintas y hay que buscar un fondo que le convenga. Para ello nada mejor que un script PHP que te calcule el fondo según los colores de la imagen, ya sea calculando la media o la mediana (el que más aparece). Como veréis en el ejemplo, la media (arriba) y la mediana (abajo) devuelven valores distintos.
Para aquellos que buscar en Google es una necesidad, una serie de trucos para realizar mejores búsquedas o para sacarle el máximo partido a Google.
Y muchas más cosas.
Data Mining on the Internet with Google
VÃa / Digg
En la Web 2.0 está más de moda usar transparencias en nuestras páginas web, realmente se puede realizar con estilos, pero con Internet Explorer se hace de una forma y con Firefox de otra, y no estoy muy seguro, con Opera no se puede (actualización: Federico nos comenta que en la versión 9 ya está implementada). Por ello, una forma de simular la transparencia en una capa es usar dos imágenes, una de fondo con la imagen original y la otra con una imagen que hemos creado nosotros que tendrá el efecto de transparencia.
Yo en el ejemplo me he creado una capa blanca, encima he puesto la imagen con cierto grado de transparencia y encima he puesto la misma imagen con efecto de luminosidad suave, para que no sea sÃmplemente una transparencia.
Tenemos una capa div y dentro de ella un párrafo:
<div><p>...</p></div>Ahora le tenemos que indicar los estilos:
div.contenedor {
width: 500px;
height: 375px;
background: url(forest.jpg) top left no-repeat;
}
div.contenedor p {
width: 420px;
height: 295px;
top: 40px;
left: 40px;
background: url(forest_transparencia.jpg) -40px -40px no-repeat;
border: 2px solid #000000;
position: relative;
}Si te fijas, verás que en el estilo de párrafo, se desplaza del background hacia arriba y hacia la izquierda tanto como está desplazado el párrafo hacia abajo y hacia la derecha sobre la capa contenedora.
El formato de compresión ZIP es uno de los más usados y siempre puede sernos de ayuda saber cómo manejarlo, por ejemplo para permitir que nuestros usuarios nos envien ficheros en zip y no tenerles que enviar varios ficheros de uno en uno, cosa que suele sacar de quicio.
En PHP, para leer un fichero zip debemos usar la librerÃa php_zip que ha sido desarrollada por Guido Draheim y que se puede bajar en: http://pecl.php.net/package/zip.
El uso es sencillo y tan solo dispone de unas pocas funciones:
Un simple ejemplo de cómo leer información de un fichero zip serÃa el siguiente. Disponemos de una página HTML que tiene un formulario para enviar un fichero:
<form action="zip.php" method='POST' enctype='multipart/form-data'<br />
<p>Seleccione un fichero ZIP para enviar
<br />
<input type="file" name="fichero" /<br />
<br />
<input type="submit" value="Enviar" /></p<br />
Y disponemos de un script PHP (en este caso se llama zip.php) que nos devuelve los archivos contenidos en el zip.
...
<ul>
<?php
$zip = zip_open($_FILES["fichero"]["tmp_name"]);
if ($zip) {
while ($entrada = zip_read($zip)) {
echo "<li>" . zip_entry_name($entrada) . "</li>";
}
zip_close($zip);
}
?>
</ul>
...El número de utilidades que le podemos sacar a la lectura de ficheros zip puede ser importante.