Bitácora de Manuweb: 2007

miércoles, 9 de mayo de 2007

Seis canales de TV sobre náutica

Aquí os dejo la posibilidad de ver 6 canales 6, del mundo náutico.

jueves, 8 de marzo de 2007

Autorrelleno de campos con JavaScript

A veces, cuando en un campo de búsqueda introducimos un nombre, nos es útil que este se autorrellene con el más parecido que exista dentro de los posibles valores.

No sé si ya existirá algo parecido por la red pero yo me fabriqué este Script para mi propio uso.

Este es un ejemplo:

(Para que funcione correctamente debes agregar este sitio a los sitios de confianza, Herramientas -> Opciones de Internet ... -> pestaña "Seguridad" -> Clic en "Sitios de confianza" y agregar esta dirección http://elmaestroweb.blogspot.com)

Aquí tienes el código usado:

<SCRIPT LANGUAGE="JavaScript">
//
// para capturar teclas corrientes
// sobre el campo que se ha de autorrellenar
//
function ObservaYBusca(oCampo,url) {
 var ieKey=event.keyCode;    
 // tecla pulsada
 var sTexto1=oCampo.value.toString(); 
 // texto introducido
 var sTexto2=sTexto1.substr(0,nPos); 
 // texto hasta el cursor
 var iFin;
 // captamos ESC
 if (ieKey==27){
  location.href=url;
 }

// largo del texto
 //
 // asignamos la tela pulsada
 sTexto2=sTexto2+String.fromCharCode(ieKey);
 // aumentamos la posicion del cursor
 nPos ++;
 // 
 // buscamos coincidencia en la listao coincidencias
 BuscaEnLaLista(sTexto2,oCampo);

//iFin=oCampo.value.length;
} 
//
// para buscar coincidencias
//
function BuscaEnLaLista(sTexto,oCampo){
 var iPosicion = BuscarElemento(aListaAutorreleno, sTexto); 
 // posición en la lista
 //
 // si existe
 if (iPosicion >=0) {
  // lo rellenamos
  oCampo.value=aListaAutorreleno[iPosicion];
  event.returnValue = false;
  // y ponemos el cursor
  PoneCursor(nPos,oCampo);
 }
 // no existe
 else {
  // asignamos lo introducido
  oCampo.value=sTexto;
  // y ponemos el cursor
  PoneCursor(nPos,oCampo);
  event.returnValue = false;
 }
}
//
// busca en la lista las coincidencias
//
function BuscarElemento(aElementos, sCadena){
 var i;
 // contador
 var iPosicion;
 // posicion dentro de la lista
 var iLargo=sCadena.length;
 // tamaño de la cadena introducida
 //
 // recorremos la lista
 for(i=0; i<aElementos.length; i++)
    {
  if (aElementos[i].substr(0,iLargo) == sCadena)
   // si lo ha encontrado
   break;
  }
 // asignamos la posición (-1 no encontrado)
 iPosicion = (i < aElementos.length)? i : -1;
 // devolvemos la posición
 return (iPosicion);
} 
//
// Pone el cursor en un punto determinado
// 
function PoneCursor(nPos,oCampo){
 var sCadena=oCampo.value.toString();
 // cadena con el valor del campo
 var iComienzo=0;
 // inicio
 var iFin=sCadena.length;
 // final
 var sPrincipio=sCadena.slice(iComienzo,nPos);
 // cadena desde inicio a la posición del cursor
 var sFinal=sCadena.slice(nPos,iFin);
 // cadena desde el cursor hasta el final
 oCampo.focus();
 // damos el foco
 oCampo.value=sPrincipio;
 // recortamos
 oCampo.select();
 // seleccionamos
 document.execCommand('copy');
 // ejecutamos un "copy" (copiar)
 oCampo.value=sFinal;
 // asignamos el final
 oCampo.focus();
 // volvemos a dar el foco
 document.execCommand('paste');
 // ejecutamos un "paste" (pegar) sobre el campo
}
</SCRIPT>
<CENTER>
<FORM name="miForm" METHOD=POST ACTION="">
   
<P>Introducir nombre a buscar <INPUT TYPE="TEXT" NAME="abuscar" onkeypress="ObservaYBusca(this,'http://www.google.es')" onfocus="oFoco=this"></P>
<P><TEXTAREA NAME="lista" ROWS="7" COLS="30" DISABLED>

El codigo está comentado por lo que no necesita prácticamente explicación. En el onkeypress del campo de autorrelleno llamamos a la función ObservaYBusca con dos parametros, el campo en si mismo y una URL donde queremos que se dirija al hacer ENTER.

ObservaYBusca capta la tecla pulsada y busca en el array de nombres las posibles coincidencias y hace que estas se vayan mostrando.

Espero que a alguien le sirva.

lunes, 12 de febrero de 2007

Como el Windows Vista

He dejado mi PC tal que así:

¿Windows Vista? Pues no, es XP modificado.

En principio pensé en probar el Vista, me habían prestado una copia para probarlo. Después de leer en su Web oficial los requerimientos mínimos no me cabía ninguna duda de que mi PC podría ir bien:

Windows Vista Home Basic o Windows Vista Ultimate (requisitos mínimos):

Procesador a 800 MHz y 512 MB de memoria del sistema
20 GB de disco duro con al menos 15 GB de espacio disponible
Compatibilidad con gráficos Super VGA
Unidad de CD-ROM

Con mi Pentium 4 a 2,4 GHz y 512 MB, tarjeta nVidia GeForce 2 de 64 MB, dicos duro “sobrao” debería ir de “lujo”, quizás corto de memoria, pero eso se podría arreglar. Me descargué el programa de la Web de Microsoft para ver hasta que punto no tendía problemas: Asesor para la actualización a Windows Vista.

Este programa, después de correrlo, me dice en su informe que puedo instalar el Windows Vista pero . . . que sería conveniente:

Aumentar la memoria hasta 1 GHz.
Cambiar la Tarjeta Gráfica
Desinstalar el Anti-Virius, ya que no funcionará con el Vista
Desinstalar mi programa de grabación por el mismo motivo.
Y una interminable lista de programas que . . . podrían no funcionar.

Solución:

Había oído hablar de skins y programas para hacer que el XP se asemejara al Vista, así que me puse manos a la obra:

Estos son los programas necesarios (y gratis):

Vista Inspirat 1.1
Temas (skins) para instalar :

Vamos por parte.

Lo primero es instalar Vista Inspirat que es programa que se encarga de cambiar el aspecto de Windows XP a Windows Vista. Es muy fácil de instalar y trae incluso un OjectDock que es una barra superior de inicio estilo Apple Macintosh (Mac), yo en mi caso la desactivé pues me gustó más la RocketDock.

Trae, además, una serie de utilidades para configurar como es UberIcon que permite animar los iconos cuando hacemos doble clic, Y’z Shadow, que nos permite configurar las transparencias de los elementos flotantes, las sombras de los menús, etc. Lo mejor es ir probando.

Si no se llegaran a cambiar los iconos del sistema podemos hacerlo manualmente con Windows Configurator. Lo instalamos y ejecutamos, vamos a la pestaña iconos y uno a uno le damos a default y después a obtener. Una vez cambiado los iconos podemos desinstalar Windows Configurator.

El Rista 3.1 es un tema o skin que he instalado ya que me gusta más que el que trae Vista Inspirat. Para instalarlo simplemente descomprimimos el archivo RAR y ponemos la carpeta “Rista3” en la carpeta "C:\WINDOWS\Resources\Themes", creamos la carpeta “C:\Program Files\Styler\TB\skins\Styler's” y ahí ponemos la carpeta "Vista Styler".

El Vista CG es otro skin y se instala de manera similar al Rista.

La RocketDock es una barra con iconos de colores luminosos y con efectos de animación que se puede personalizar añadiendo elementos, cambiando temas, colores, fuentes, etc. Instalar la RocketDock es muy sencillo. Hacemos doble clic en RocketDock-v1.3.0.exe y seguimos los pasos. Si queremos quitar del escritorio ciertos elementos como la papelera (pues el RocketDock trae una) necesitaremos el TweakUiPowertoy. Una vez instalado se abre el programa y en Desktop deseleccionamos Papelera de reciclaje o cualquier elemento que queramos.

Por últimos nos quedaría el podXP. Este programa permite incluir en el escritorio gadgets (pequeñas utilidades para el escritorio) como calendario, reloj, notas, lector de noticias, etc. Ejecutamos PodXPSetup y lo configuramos a nuestro gusto.

De todos estos programas existen manuales por la red, y como ya he dicho son totalmente gratuitos

martes, 16 de enero de 2007

Pac-Man

Aún me gusta jugarlo de vez en cuando.

Todo un clásico.

Y para aquellos nostalgicos que quieran recordar aquellos tiempos cuando en los salones recreativos estaban esas gigantescas máquinas que con 25 pesetas disfrutabas del come-cocos.

jueves, 11 de enero de 2007

Selector de fecha en Javascript

Voy a explicar como poner un selector de día sobre un calendario para un campo fecha dentro de un formulario.

Lo primero son las imagenes que vamos a necesitar:

	Calendario	Avance	Retroceso	Cerrar	Transparente
Imagen

Este es el código Javascript que podemos poner, bien en archivo js aparte, bien dentro del archivo html :

<SCRIPT LANGUAGE="JavaScript">
//  funciones de validación
// 
//
// validafecha(oCampoFecha) -> validar formato de fecha dd/mm/aaaa
//
function ValidarFecha(oCampoFecha) { 
 var sBorrar;
 var sCampoFecha=oCampoFecha.value;
   if (sCampoFecha)   {  
      sBorrar = sCampoFecha;
      if ((sCampoFecha.substr(2,1) == "/") && (sCampoFecha.substr(5,1) == "/"))      {      
         for (i=0; i<10; i++)      { 
            if (((sCampoFecha.substr(i,1)<0) || (sCampoFecha.substr(i,1)>9)) && (i != 2) && (i != 5))   {
               sBorrar = '';
               break;  
   }  
         }
      if (sBorrar) { 
         iAno = sCampoFecha.substr(6,4);
      iMes = sCampoFecha.substr(3,2);
      iDia = sCampoFecha.substr(0,2);
      if((iAno < 1000) || (iAno > 9999) || (iMes < 1) || (iMes > 12) || (iDia < 1) || (iDia > 31))
    sBorrar = '';
      else
      {
         if((iAno%4 != 0) && (iMes == 2) && (iDia > 28))    
            sBorrar = ''; // Año no viciesto y es febrero y el dia es mayor a 28
      else 
      {
            if ((((iMes == 4) || (iMes == 6) || (iMes == 9) || (iMes==11)) && (iDia>30)) || ((iMes==2) && (iDia>29)))
            sBorrar = '';               
      } 
      } 
         } 
      } 
   else
      sBorrar = '';
   if (sBorrar == '') {
      alert('Fecha erronea\r\nUtilice dd/mm/aaaa');
   oCampoFecha.focus();
   oCampoFecha.select();
   }

} 
}

// 
// El script del calendario
//
//
// inicialización de variables
//

var tFecha=new Date();
var iMesActual=tFecha.getMonth(); 
var iAnoActual=tFecha.getYear(); 
var iMesHoy=tFecha.getMonth(); 
var iAnoHoy=tFecha.getYear(); 
var iDiaHoy=tFecha.getDate(); 
var sCampo;
var bPermiteAnterior=false;
var iDesplazamientoSuperiorStandard=0;
var iDesplazamientoIzquierdaStandard=0;

function MesSiguiente(){

LimpiaCalendario();
 ++iMesActual;
 if (iMesActual==12) {
  iMesActual=0;
  ++iAnoActual;
 }
 PonerCalendario();
}

function LimpiaCalendario(){
 var i=0;
 var j=0; 
 var oFilaActual;
 var oCelda;
 var oTabla=document.all("TablaCalendario");

for (i=2;i<8;i++){
  oFilaActual = oTabla.rows[i];
  for (j=0;j<7;j++){
   oCelda=oFilaActual.cells[j];
   oCelda.innerHTML = " ";
  }
 }
}

function PonerCalendario(){
 var iDia=0;
 var tPrimerDiaFecha = new Date(iAnoActual,iMesActual,1);
 var iUltimoDiaMes=ObtieneDiasMes(iMesActual, iAnoActual);
 var iColumna=tPrimerDiaFecha.getDay(); 
 // 0-Domingo . . . 6-Sábado
 --iColumna;
 if (iColumna <0) {
  iColumna = 6;
 }
 var iFila=2;
 var oTabla=document.all("TablaCalendario");
 var oFilaActual;
 var oCelda;

for (iDia=1;iDia<=iUltimoDiaMes;iDia++){
  oFilaActual = oTabla.rows[iFila];
  oCelda=oFilaActual.cells[iColumna];
  if (iColumna!=6) {
   if ((iAnoActual==iAnoHoy) && (iMesActual==iMesHoy) && (iDia==iDiaHoy)) {
    oCelda.innerHTML = "<div align='center' class='sHoyNormal'><A HREF='javascript:InformaFecha("+iDia+")' class='sLinkNormal'>"+iDia+"</A></div>";
   }
   else {
    oCelda.innerHTML = "<div align='center' class='sDiaNormal'><A HREF='javascript:InformaFecha("+iDia+")' class='sLinkNormal'>"+iDia+"</A></div>";
   }
  }
  else {
   if ((iAnoActual==iAnoHoy) && (iMesActual==iMesHoy) && (iDia==iDiaHoy)) {
    oCelda.innerHTML = "<div align='center' class='sHoyDomingo'><A HREF='javascript:InformaFecha("+iDia+")' class='sLinkDomingo'>"+iDia+"</A></div>";
   }
   else {
    oCelda.innerHTML = "<div align='center' class='sDiaDomingo'><A HREF='javascript:InformaFecha("+iDia+")' class='sLinkDomingo'>"+iDia+"</A></div>";
   }

}
  iColumna++;
  if (iColumna>6) {
   iColumna=0;
   iFila++;
  }
 }
 oFilaActual= oTabla.rows[0];
 oCelda=oFilaActual.cells[1];

oCelda.innerHTML = "<div align='center' class='sNombreMes'>"+DevuelveMes((iMesActual+1))+" - "+iAnoActual+"</div>";
   
}
function DevuelveMes(iMes) {
 var sMeses= new Array;
 sMeses[0] = 'Enero';
 sMeses[1] = 'Febrero';
 sMeses[2] = 'Marzo';
 sMeses[3] = 'Abril';
 sMeses[4] = 'Mayo';
 sMeses[5] = 'Junio';
 sMeses[6] = 'Julio';
 sMeses[7] = 'Agosto';
 sMeses[8] = 'Septiembre';
 sMeses[9] = 'Octubre';
 sMeses[10] = 'Noviembre';
 sMeses[11] = 'Diciembre';
 return sMeses[iMes-1];
}

PonerCalendario();
 document.getElementById('oCalendario').style.left = iPosicionX+iDesplazamientoIzquierda;
 document.getElementById('oCalendario').style.visibility = 'visible' ;
}

function CierraCalendario() {
 document.getElementById('oCalendario').style.visibility = 'hidden' ;

}
</script>

Este código es el estilo que vamos a utilizar. También se puede guardar en un fichero css o dentro del html:

.sDiaDomingo {  font-family: Arial; font-size: 12px; color: #FF0000}
.sHoyDomingo {  font-family: Arial; font-size: 12px; font-weight: bold; color: #FF0000}
.blanco_der {
filter: Alpha(Opacity=50); 
}
.blanco_inf {
background-image: url(imagen/marco/blanco_inf.gif);
filter: Alpha(Opacity=50); 
}
.sombra_esq {
background-image: url(imagen/marco/fon_esq.gif);
filter: Alpha(Opacity=50); 
}

.sombra_der {
background-image: url(imagen/marco/fon_der.gif);
background-repeat: repeat-y;
filter: Alpha(Opacity=50); 
}

td.sombra_inf {
background-image: url(imagen/marco/fon_inf.gif);
background-repeat: repeat-x;
filter: Alpha(Opacity=50); 
}
.marco_calendario {
background-color: #ffffff;
border-width :1px;
border-style : solid;
border-color : #afa79f;
padding:0px;
}
.1 {
background-color: #ffffff;
border-top : 1px #afa79f solid;
border-left : 1px #afa79f solid;
}
.2 {
background-color: #ffffff;
border-top : 1px #afa79f solid;
border-right : 1px #afa79f solid;
}
.3 {
background-color: #ffffff;
border-left : 1px #afa79f solid;
border-bottom : 1px #afa79f solid;
}
.4_calend {
background-color: #ffffff;
border-right : 1px #afa79f solid;
border-bottom : 1px #afa79f solid;
padding: 0px;
}

</style>

Esta parte de código debe insertarse dentro del archivo html donde esté el formulario. Para aplicaciones PHP se podría guardar en archivo independiente y usar con include().

</TD>
        <TD class='sombra_der'> </TD>
      </TR>
      <TR>
        <TD class='blanco_inf'><IMG SRC='http://bp0.blogger.com/_Ea-k09lFw4k/RaYEZNZwKcI/AAAAAAAAABQ/C2GtITw05Oc/s200/trans.gif' WIDTH='5' HEIGHT='5' BORDER=0 ALT=''></TD>
        <TD class='sombra_inf'></TD>
        <TD class='sombra_esq'></TD>
      </TR>
    </TABLE>

</div>

Y aquí está el codigo que muestra el campo para la fecha con el calendario a su derecha:

Voy a intentar explicar como funciona.

La función que hace la llamada al calendario cuando se hace clic en la imagen es:

MuestraCalendario(event,'fecha',miForm.fecha.value,true)

event hace referencia al evento producido (el clic del ratón).

fecha es el nombre del campo.

miForm.fecha.value contiene el valor del campo

true permite retroceder en el calendario a una fecha anterior a la actual. Si este valor es false no dejará ver el mes anterior.

Al llamar a esta función mostramos la capa que contiene el calendario y nos permite elegir fecha para nuestro campo del formulario.

He documentado el código para que esté bien legible y se pueda alterar "al gusto".

A disfrutarlo.

jueves, 4 de enero de 2007

Juegos náuticos

Para empezar el año he colocado estos dos juegos náuticos.

Este para competir contra otro velero:

Este para aprender a atracar:

Yo lo he conseguido:

A disfrutarlos.

Bitácora de Manuweb