Mostrando entradas con la etiqueta programación web. Mostrar todas las entradas
Mostrando entradas con la etiqueta programación web. Mostrar todas las entradas

jueves, 6 de agosto de 2009

Abrir reproductor en ventana nueva mediante javascript

Necesitaba que un reproductor basado en jQuery se cargase en un popup y desapareciese de la ventana original para que el usuario pudiese navegar por la página y seguir escuchando las canciones sin interrupción.

Decidí usar variables de sesión. En la página original condicioné que se mostrase el reproductor a si la siguiente variable era falsa:


if Session("ventana_reproductor_abierta") = false then

...

end if


Al reproductor le añadí un enlace y usé jQuery para enlazarle el evento.


//Busco el enlace al que hay que añadirle el evento click.

var botonReproductorVentanaNueva = $('#columnaUno #reproductor-ventana-nueva');

botonReproductorVentanaNueva.click(function(){

abrePopup('carga_reproductor_ventana.asp','Titulo',300,400);


});

function abrePopup(url,titulo,h,w){

newwindow=window.open(url,titulo,'height=' + h + ',width=' + w);
if (window.focus) {newwindow.focus()}
return false;

}


El script ASP 'carga_reproductor_ventana.asp' se asegura de establecer la variable de sesión a verdadero, de manera que al recargarse la página original no se muestre el reproductor:


Session("ventana_reproductor_abierta") = true


Ahora viene la parte difícil. Necesitamos que cuando la ventana abierta se cierre, se devuelva la variable de sesión a falso y se recargue la página que lanzó el popup. Para ello necesitamos una función poco documentada llamada window.onbeforeunload que se lanza cuando uno cierra la ventana. Además necesito llamar a otro script ASP mediante AJAX que se encargará de devolver la variable de sesión al valor adecuado.


//Funciones para el reproductor cargado en un popup.

$(document).ready(function(){

//Controlo el evento que se dispara cuando intenta quitar la página.

window.onbeforeunload = function() {

$.ajax({

contentType: 'application/x-www-form-urlencoded',
type: "GET",
url: "cierra_ventana_reproductor.asp"

});

window.opener.location.reload();


}

});


Como se ve, window.opener permite acceder a la ventana que llamó al popup, y location.reload() recarga la página. El script 'cierra_ventana_reproductor.asp' establece la variable de sesión al valor necesario.


<%

Session("ventana_reproductor_abierta") = false

%>

miércoles, 5 de agosto de 2009

Función que vacía campos de un formulario que tengan en el contenido un patrón común

$(document).ready(function(){

//Asume que los campos de tipo input text empiezan con "Escriba aquí...",
// y vacía esos campos en focus, siempre que tengan ese valor, y vuelve a escribir ese texto
// en blur si se ha dejado el campo vacío.

var campos=$("form :input[value *= Escriba aqu]");

$.each(campos,function(){

//Por cada campo, compruebo si el contenido contiene la cadena "escriba aqu".

var contenido=$(this).attr("value");

$(this).bind("focus", function(){

if ($(this).attr("value") == contenido){

$(this).attr("value","");

}

});

$(this).bind("blur", function(){

if ($(this).attr("value")==""){

//Ha dejado el campo vacío, así que vuelvo a ponerle de texto lo que había antes de entrar en el foco.

$(this).attr("value",contenido);

}

});


});


});

'player-viral.swf' y otros reproductores flash sin funcionar en ciertos servidores

Anduvimos con un problema de aparente difícil solución al implementar un reproductor programado en flash que cogía archivos de tipo flv. La solución, sobre todo cuando va en un servidor y no en otro, consiste en probar a descargarse directamente el fichero desde donde esté almacenado, en el servidor donde el reproductor no funcione. Si la respuesta del navegador es que no reconoce ese tipo de fichero o que no existe cuando sí debería de reconocerlo, es que no está añadido el MIME Type en IIS.

La siguiente página es una buena manera de empezar a buscar:

Adding .FLV MIME Type in IIS

martes, 4 de agosto de 2009

Error de javascript en IE, sin problemas en Mozilla

Cuando surja un error en IE que impida que algún script funcione, hay que fijarse en las diferencias en interpretación y capacidad para evitar ciertos errores. Nos hemos pasado un buen rato intentando descubrir qué parte del código daba problemas, y resulta que IE no consigue interpretar arrays a cuyo último elemento le sigue una coma. Mozilla lo interpreta sin problemas.

El código era el siguiente:


function almacenaReproduccion(){


var cancion = myPlayList[playItem].filename;

//Los dos otros datos que necesito guardar son el id de la sesión y la fecha y hora
// actual, pero los recojo en el servidor.

$.ajax({

contentType: 'application/x-www-form-urlencoded',
type: "GET",
url: "../web/cuenta_reproduccion.asp",
data: "archivo=" + myPlayList[playItem].filename

});


}


El error se encontraba en la línea siguiente:

data: "archivo=" + myPlayList[playItem].filename

Anteriormente terminaba en una coma, ya que en el pasado le seguía otro parámetro. Como he dicho, Mozilla lo entendía e IE no. Algo a tener en cuenta.

Guardar una cuenta de reproducciones usando AJAX en ASP

Primero localizamos el botón de play del reproductor y asociamos una función al evento click:


var botonPlay = $('#player_play_archivos');

$(botonPlay).click(function(){

$('#jquery_jplayer').play();

//Necesito los datos de la canción que se está escuchando en este momento.

almacenaReproduccion();

});


La función almacenaReproduccion() coge el nombre del archivo (en el ejemplo, la ruta completa), y la envía por AJAX al servidor.


function almacenaReproduccion(){


var cancion = myPlayList[playItem].filename;

//Los dos otros datos que necesito guardar son el id de la sesión y la fecha y hora
// actual, pero los recojo en el servidor.

$.ajax({

contentType: 'application/x-www-form-urlencoded',
type: "GET",
url: "cuenta_reproduccion.asp",
data: "archivo=" + myPlayList[playItem].filename,

});


}



Como se ve, se llama a un archivo llamado 'cuenta_reproduccion.asp'. En el servidor añado el ID de la sesión actual y la fecha y la hora en la que se ha reproducido el archivo.



dim archivo
archivo = LimpiarRequest(Request("archivo"))

dim intCurrentPos, intFileNamePos

'Cojo el nombre del archivo encontrando la última barra
Do

intCurrentPos = InStr(intCurrentPos + 1, archivo, "/", vbTextCompare)
If intCurrentPos <> 0 then
intFileNamePos = intCurrentPos
else
intFileNamePos = intFileNamePos + 1
Exit Do
End If
Loop

dim FileName

If intFileNamePos <> 1 then

FileName = mid(archivo, intFileNamePos, len(archivo) - intFileNamePos + 1)

End If

'FileNamewExt contiene el nombre del archivo, sin la ruta.

'Necesitamos tanto el id de la sesión y la fecha y hora actuales.

dim idSesion,momentoActual

idSesion = Session.SessionID

momentoActual = now()

'Envío los datos a la consulta que realiza la inserción.

dim resultado

set resultado = setCuentaReproduccion(FileName,idSesion,momentoActual)

'response.write(resultado)



lunes, 3 de agosto de 2009

Problemas con la sesión y objetos desconocidos al trabajar con AJAX en PHP

En un script, llamémosle script1.php, llamaba mediante jQuery a otro script, llamémosle script2.php, intentaba acceder a los datos de la variable $_SESSION. A pesar de establecer el session_start(), y ver mediante el Firebug que podía ver la información, no podía acceder por programación a los atributos de la clase con la que tenía que trabajar. El Firebug la definía de la siguiente manera:

__PHP_Incomplete_Class Object ( [__PHP_Incomplete_Class_Name] ...

Obviamente sugiere que la clase no existe. La solución está en cargar un include o un require con la definición de la clase antes de session_start().

sábado, 1 de agosto de 2009

Explode en jQuery y javascript

Explode es una manera muy útil de sacar información de algún elemento de la web, ya que, por ejemplo, suelo almacenar ids de elementos de la base de datos como parte del nombre de un id o de una clase. Aquí tenemos un ejemplo de explode en jQuery, que sería un split:

var valor=$('#elemento').attr('id').split('filtro-id')[1];

La variable 'valor' contendría ahora 'id'.

Parámetros opcionales en las funciones de javascript

Por desgracia, parece ser que no podemos especificar que un parámetro sea igual a un valor como haríamos en otros lenguajes, así que hay que comprobar dentro de la propia función si el parámetro que queremos tener como opcional es undefined, de la siguiente manera:


function Funcion(par1,par2,par3){

//código

if (par3===undefined){

//El par3, opcional, no se ha enviado

}

}

sábado, 25 de julio de 2009

Encuentra un elemento dentro de un elemento ya seleccionado en jQuery

Digamos que has seleccionado un div llamado #posts que contiene las entradas de un blog. Pero después necesitas modificar elementos concretos que están contenidos dentro de ese div. Se haría de la siguiente manera:

$('#posts')
.find('.firstColumn')
.css('background','red')
.end()
.find('.lastColumn')
.css('background','blue');

Evento onChange de un select con jQuery

Por lo general, al asociar eventos con el magnífico, glorioso, inimitable jQuery, usaríamos la función bind, pero en el caso del evento onChange de los select debemos hacerlo de otra manera.

var selectEscogido=$('#select-a-escoger');

$(selectEscogido).change(function(){

//instrucciones

}

lunes, 20 de julio de 2009

Problema "Fatal error: allowed memory size of X exhausted"

Me ha surgido en el trabajo el siguiente problema. No me voy a molestar en cambiar demasiado el correo interno que sugería la solución.

El bloque de código que fallaba estaba localizado en otra parte de gd.func.php, al habernos visto forzados a resamplear las imágenes de otra manera (mediante la opción ‘2’ de las opciones de campo en el gestor). He comprobado que la imagen sí que conseguía subirla. Resampleaba el thumb y lo copiaba correctamente a su carpeta, pero fallaba al resamplear la imagen normal y dejaba el archivo sin resamplear dentro de uploads. De nuevo, el problema se concentraba en la función imagecreatetruecolor, pero en este caso no parecía deberse a un error de código.


Activé el ‘reporting’ de errores mediante ini_set(“display_errors”, 1); error_reporting (E_ALL | E_STRICT); , lo que me permitió ver que se estaba produciendo el siguiente error fatal:


Fatal error: allowed memory size of X exhausted (tried to allocate 49 bytes), siendo X un número cercano a 17M.


Parece que el servidor tiene asociada una memoria de trabajo baja que provoca errores en funciones que consumen considerable cantidad, como imagecreatetruecolor. Por fortuna, en este caso podemos establecer la variable memory_limit de php.ini a una cantidad superior para que tenga más margen. He corregido el problema, de momento, poniendo la siguiente orden antes de la llamada a la función imagetruecolor que fallaba:


ini_set (“memory_limit”, “20M”);


Si vuelve a fallar, habría que comprobar cuánta memoria está usando y cuánta más necesitaría, y en caso de que ya no se pueda andar cambiando los parámetros por ini_set no quedaría más remedio que sugerir al hosting que eche una mano.

miércoles, 24 de junio de 2009

Función muy útil para "resumir" párrafos que no queremos mostrar largos en la página. Añadirá puntos suspensivos y evita cortar texto por la mitad para que no quede '&aa' de 'á' y cosas similares.

function recortaTexto($string, $maxlen, $addon = '...')
{
if(strlen(strip_tags($string)) <= $maxlen)
{ // Ha de ser HTML válido
return $string;
}

//Tengo que comprobar que el $maxlen no esté cortando un á o algo similar, así que aumento
// maxlen hasta que el siguiente caracter sea un espacio

while ($string[$maxlen+2]!=' '){

$maxlen+=1;

}

$closing_tags = array();
$string = str_replace(chr(0), '', $string);
$string = preg_replace('/(<\/?[a-z][a-z0-9]*[^<>]*>)/im', chr(0) . '\\1' . chr(0), $string);
$result = explode(chr(0), $string);
for($i = 0, $n = count($result), $len = 0; $i < $n; $i++)
{
if($i % 2)
{
if(substr($result[$i], -2, 1) == '/')
{
continue;
}
if($result[$i]{1} == '/')
{
unset($closing_tags[array_search($result[$i], $closing_tags)]);
continue;
}
$closing_tags[$i] = '';
}
else
{
$len += strlen($result[$i]);
if($len >= $maxlen)
{
$len -= strlen($result[$i]);
break;
}
}
}


return implode('', array_slice($result, 0, $i)) . substr($result[$i], 0, $maxlen - $len) . $addon . implode(array_reverse($closing_tags));
}

viernes, 12 de junio de 2009

Caracteres  y problema "headers already sent"

He estado una temporada codificando con Aptana Studios y teniendo que usar el notepad para editar ciertos scripts, ya que Aptana parece completamente incapaz de mostrar caracteres latinos por mucho que intente modificarlo, motivo por el que voy a cambiar por completo a Zend Studio.

De vez en cuando las páginas me daban un error relativo al session_start sugiriendo que los headers ya se habían mostrado (headers already sent). Tras investigar, vi que se trataba de o bien el notepad estaba dejando algún carácter de codificación delante del primer carácter real o algo raro estaba pasando con la transición al Aptana posteriormente. Hoy empezó a aparecer además la combinación . Descubrí que si guardaba con el Wordpad el problema se solucionaba inmediatamente.

El notepad parece que guarda por defecto en UTF8, lo que provoca conflicto con el ISO-8859-1. Voy a recalcar, por lo tanto, que JAMÁS hay que editar un script en el notepad aunque sea una urgencia o parezca no haber alternativa de momento. Ahora estoy probando el PSPad, que será, asumo, competente.

viernes, 29 de mayo de 2009

Comprobar si una dirección de correo es correcta

if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", $_POST[email])) {
echo "

El campo Email es incorrecto

";
}

martes, 24 de marzo de 2009

Listar los archivos de un directorio

El directorio del ejemplo es 'imagenes/fotos_casas'.


if (is_dir("imagenes/fotos_casas")){

$scanarray=scandir("imagenes/fotos_casas");

for ($i = 0; $i < count($scanarray); $i++){

if ($scanarray[$i] != "." && $scanarray[$i] != ".."){

//Asegurarse de que sea un archivo y no un directorio.

if (is_file("imagenes/fotos_casas/" . $scanarray[$i])){

//echo $scanarray[$i]

}

}


}

}

Ajax y problemas con el encoding

En algunos casos, aunque la base de datos parezca correcta, los navegadores no muestran bien los datos o tienen problemas con la codificación cuando se usan técnicas de Ajax. Para solucionarlo, hay que asegurarse de que las pequeñas páginas php que se encargan de realizar las operaciones de Ajax lleven un header apropiado. Además, conviene convertir los $_GET y los $_POST que se pasen desde javascript al charset correcto:

header('Content-type: text/html; charset=iso-8859-1');
//+
$texto = iconv("UTF-8", "iso-8859-1", $_POST['texto']);

lunes, 16 de marzo de 2009

Tamaño base del texto igual en todos los navegadores

Dado que ciertos navegadores toman un tamaño de texto nombrado como un tamaño y otros navegadores lo toman de otra manera, es necesario utilizar el siguiente hack:

body {

font-size: small;


}


* html body {


font-size: x-small; /* for IE5/Win */

f\ont-size: small; /* for other IE versions */


}

miércoles, 4 de marzo de 2009

Limpiar floats que no se limpian con clear both

Por algún motivo, clear: both no acaba de funcionar cuando hay diferentes combinaciones de floats dentro del contenedor. Para solucionarlo, se puede probar a utilizar los siguientes estilos de CSS para el contenedor que contiene los floats:

overflow: auto;
height: auto;

viernes, 27 de febrero de 2009

Trabajo con ficheros en PHP

Para leer el contenido de un directorio, pero sólo los ficheros o directorios (sin "." ni ".."):

$directorio=dir(RUTA);

while ($fichero=$directorio->read()){

//Mientras siga pudiendo leer.

//Siempre que el fichero no sea ni "." ni ".."

if ($fichero!='.' && $fichero!='..'){

//trabajo con el fichero

}

}

Para leer el fichero en bloques de 8kb (más seguro que leerlo de una vez):

$file=fopen(RUTA_FICHERO);

if ($file!=0){

//No ha dado error.
//Escribo el contenido.

$contenido = '';

while (!feof($file)) {

$contenido .= fread($file, 8192);

}

//Hago lo que tenga que hacer con el contenido del fichero.

fclose($file);

miércoles, 18 de febrero de 2009

Solucionar compatibilidades entre navegadores en CSS

Para evitar problemas de compatibilidades entre diferentes navegadores, sobre todo en cuanto se usen listas, conviene añadir lo siguiente a la hoja de estilos CSS:

* { margin:0; padding:0; border: 0; }