Archivo de la categoría ‘Programación’

Bug en parseInt de Javascript

Miércoles, 14 de Julio de 2010

Estabamos haciendo unos calculos con javascript, y para transformar un string a un valor para asegurarnos que la suma la hace correctamente nos hemos encontrado en un bug un tanto curioso en la funcion parseInt().

Resulta que todo funciona correcto excepto cuando la funcion tiene un 8 o un 9 a transformar, no sabe hacerlo, y devuelve un 0.

Para solucionarlo se debe multiplicar por 1:

var valor = 9;

alert(parseInt(valor));//devuelve 0
alert(parseInt(valor*1));//devuelve 9

Modificar el tiempo de vida de una sesión en php

Martes, 8 de Junio de 2010

Las sesiones en php tienen múltiples usos, el más habitual, el de mantener activo un usuario logueado. En la mayoría de configuraciones de php el SID se propaga mediante cookies, por lo que para modificar el tiempo de vida de una sesión debe usarse la directiva session.cookie_lifetime.

Por ejemplo, para setear sesiones de dos minutos:

ini_set(”session.cookie_lifetime”,120);  //El tiempo viene dado en segundos

Además, será necesario combinarlo con el valor gc_maxlifetime para que el recolector de basura de php no elimine la cookie antes de su expiración.

Siguiendo el ejemplo de los dos minutos, deberíamos inicar lo siguiente:

ini_set(”session.gc_maxlifetime”, 120);

Por último, recordar que estos parámetros deben cambiarse antes de la instrucción session_start(); que es la que nos seteará la cookie en el caso de que ésta no estuviera ya en servidor.

Importante: Es posible que intentéis modificar este tiempo y os de la sensación de que no funciona. Hay que tener en cuenta que es posible que hayáis modificado el código pero vuestro equipo siga teniendo una cookie activa, por lo que hasta que no caduque la anterior no se os guardará la nueva con el tiempo de vida actualizado. Lo mejor para hacer pruebas es disponer de una herramienta como web developer toolbar que os permitirá controlar las cookies, pudiendo eliminar la antigua y comprobar que el código funciona correctamente.

jquery efecto desvanecimiento texto (fade in text, fade out texto)

Viernes, 28 de Mayo de 2010

En jQuery es fácil encontrar cualquier efecto de desvanecimiento - fade, fade in, fade out - pero casi todos estan orientados a hacer galerías de imagenes, me ha costado encontrar algo que funcione correctamente con solo texto. Esto es, un pase de diapositivas de información (no imagen).

Los ejemplos de utilización para imágenes no los voy a describir ya que son fáciles de encontrar y no me interesan en este momento, voy a explicar directamente como hacer el fade con textos:

jQuery
Usaremos el framework jQuery:
http://code.jquery.com/jquery-latest.pack.js

jQuery cycle
Complementamos jQuery con la extensión 'cycle':
http://jquery.malsup.com/cycle/

Código

JavaScript:
  1. $(function () {
  2. var $container = $('#informacion'),
  3.  
  4. quotes = [
  5. {fecha: '10 FEBRER 2010', titulo: 'Inauguració oficines SOC a Badalona'},
  6. {fecha: '05 MAIG 2010', titulo: 'Notícia nº1'},
  7. ];
  8.  
  9. $(quotes).each(function (i) {
  10. var quote = '<span>' + this.fecha + '</span> - <span>' + this.titulo + </span>';
  11. $container.append('
  12. <div>
  13.  
  14. ' + quote + '</div>
  15. ');
  16. });
  17. $container.cycle({
  18. speed: '2000',
  19. timeout: '10000',//1000=1seg
  20. cleartype: '1' // activar correcciones cleartype
  21. });
  22. });

Explicación

La variable container es el elemento que va a contener la información que queremos rotat. En mi caso:

Se crea el array 'quotes', que es el que contendrá la información que vamos a rotar, mi caso:

Posición N[fecha='',titulo='']

La manera en la que se mostrara se puede modificar en la linea:

var quote = '' + this.fecha + ' - ' + this.titulo + ';

En nuestro ejemplo pondra la fecha entre 'span' un guion separador y el titulo entre 'span' de nuevo.

Ejemplo

Podéis ver un ejemplo en funcionamiento en www.agparquitectes.com, en la sección de inicio, en el pie.

Problema strtoupper con acentos

Viernes, 4 de Diciembre de 2009

Si en PHP queremos pasar un String con acentos, diéresi o diferentes letras de codificación UTF-8 a mayúsculas, directamente no podemos utilizar

PHP:
  1. $var = strtoupper($valor);

ya que transformará a mayúsculas únicamente las letras del abecedario simple (sin contar ñ ni ç).

La forma correcta de cubrir todos los casos es:

PHP:
  1. $var =   mb_strtoupper($valor,'utf-8');

Aprender hacer expresiones regulares para quitar los tags de un texto en php

Jueves, 19 de Noviembre de 2009

Para eliminar los tags de un texto, ya sea en php o javascript o cualquier otro lenguaje, vamos a utiizar expresiones regulares.

la ideal para tags es:  .<[^>]+>.

Para aprender a como funcionan las expresiones regulares, podemos utilizar un simuladro muy bueno, que nos permite probar "in the fly", en tiempo real. Si la expressión regular es válida o hace lo que queremos.

Para ello te deja poner un texto donde reconocer y la expressión.

El sitio es:  regexpal.com

dedicado a luis.

allow memory en phpmyadmin al importar una BD

Martes, 27 de Octubre de 2009

Cuando importamos una base de datos grande y lo queremos hacer desde el PHPMYADMIN, puede ser que nos de un error de que no tiene memoria suficiente.

Para solucionarlo, si tenemos acceso al servidor. Podemos incrementar la memoria máxima de ejecución y el tiempo de ejecucución de los escripts php en generar desde el php.ini (el fichero de configuración de php)

Si el servidor está montado sobre un S.O. Linux, el ejemplo en concreto es sobre ubuntu

la ruta del fichero será /etc/php5/apache2/php.ini

Dentro del fichero buscar "Resource Limits":

;;;;;;;;;;;;;;;;;;;
; Resource Limits ;
;;;;;;;;;;;;;;;;;;;

max_execution_time = 60 ; Maximum execution time of each script, in seconds
max_input_time = 60 ; Maximum amount of time each script may spend parsing request data
;max_input_nesting_level = 64 ; Maximum input variable nesting level
;memory_limit = 16M      ; Maximum amount of memory a script may consume (16MB) ; Por defecto
memory_limit = 128M ; Maximum amount of memory a script may consume (16MB)

Ahí dentro, modificar las lineas en negrita (memory_limit y max_execution_time ) por los valores acordes a la importación que vaya hacer y la memoria disponible en el servidor.

despues reiniciar el apache para que surja efecto:

sudo /etc/init.d/apache2 restart

Una vez importada la bd es recomendabe volver a dejar el fichero como estaba.

Un enlace sin href que no mueva ni actualice la pagina

Jueves, 24 de Septiembre de 2009

Nos interesa un enlace, que al hacerle click, ejecute una funcion javascript, pero que no mueva la pagina, ni la refresque, ni se vaya a otra.

La gracia es colocar # en el href del enlace, pero al hacerlo la pagina escrolla hasta la cabecera de la misma.

Como arreglarlo? Muy fácil, con un return false en javascript.

<a href="#" onclick="return false;">
<a href="#" onclick="funcionJavascript();return false;">

Imprimir directo desde ms-dos. Tickets desde php bajo Windows

Jueves, 10 de Septiembre de 2009

Hace tiempo solventamos la impresión desde php a impresora de tickets bajo Linux mediante este método

Ahora tenemos la problemática de hacer lo mismo desde Windows. Existe la extensión printer pero nos interesa reutilizar la mayor parte del código, en este caso el cuerpo del ticket, para que las versiones bajo Windows y Linux difieran el mínimo posible.

Bien, siguiendo el mismo método necesitamos imprimir un fichero previamente generado desde php directamente desde consola (en este caso mediante comandos ms-dos). Ms-dos y las impresoras usb no se llevan bien, así que toca hacer un pequeño "apaño". Mapear el puerto LPT1 a un puerto de impresión de red con nuestra impresora previamente compartida en red. Estos son los pasos:

1) Nos asegurarnos de tener, al menos, una interfaz de red. En caso de no tener ninguna podemos añadir un adaptador ficticio, como "Adaptador de bucle invertido de Microsoft" y asignarle una IP.

2) Compartimos la impresora (que por cierto, debe ser sólo texto) en red. Recordamos el nombre que le asignamos como recurso compartido.

3) Mapeamos el puerto desde ms-dos con el siguiente comando: NET USE LPT1: \\[nombre_en_red_de_la_maquina]\[nombre_impresora] /PERSISTENT:YES

4) Ahora desde php ya podemos imprimir el fichero que queramos con: shell_exec('type nombre_fichero>lpt1');

Con un pequeño if que detecte el sistema operativo en que está instalado php podemos tener un sistema de impresión de tickets multiplataforma. Eso si, con nuestra intervención para mapear el puerto.

Técnica CSS sprite sin background

Jueves, 6 de Agosto de 2009

Sprite es una técnica que nos permite agrupar muchas imágenes bajo una misma, y luego separarlas mediante CSS. Con dicha técnica conseguimos aligerar el peso de la página web y las peticiones que realizamos.

Hasta ahora utilizábamos las propiedades background-image y bakground-position colocando la imagen como fondo de un contenedor. Con este método se consiguen efectos muy logrados de substitución de imágenes sin precarga javascript, para hovers en los links de un menú, por ejemplo.

Nosotros hemos querido ir mas allá y tener una imagen con todos los elementos gráficos de la página web (hover, cabeceras, logos, bordes redondeados de tablas, etc... ) y 'recortar' parcialmente dicha imagen para mostrar sólo una parte dentro de la página. El tiempo de carga utilizando esta técnica se reduce drásticamente. La suma de las imágenes por separado daría un tamaño mayor que el de la imagen agrupándolas todas y, sobretodo, el realizar una sola petición para descargar todo el contenido gráfico de la web reduce muchísimo dicho tiempo.

Vamos a utilizar esta imagen:

Programación web

Control+Z Web technology

Para mostrar el efecto, vamos a suponer que necesitamos utilizar por separado el logo por un lado y el teléfono y el mail por otro. Aquí está el código:

CSS:
  1. body{font-family: verdana,arial,helvetica,sans-serif;font-size:.8em;color:#5f5f5f;margin:50px;}
  2. p{margin-top:50px;}
  3. /*Estilos genericos del sprite*/
  4. .sprite{ display:block;overflow:hidden;position: relative; }
  5. .spriteImg{ position: absoluteborder:none; }
  6.  
  7. /*Medidas y coordenadas especificas del elemento 1*/
  8. .logoContenedor { width: 305px; height: 95px; }
  9. .logoImg { top:-5px;left:-50px;}
  10.  
  11. /*Rollhover*/
  12. /*a.logoContenedor:hover .logoImg{top:-10px;left:-50px;}*/
  13.  
  14. /*Medidas y coordenadas especificas del elemento 2*/
  15. .infoContenedor { width: 200px; height: 50px; }
  16. .infoImg { top:-95px;left:-100px;}

HTML:
  1. Aquí necesito un enlace con el logo:
  2.  
  3. <a class="sprite logoContenedor" href="http://www.controlzeta.net">
  4. <img class="spriteImg logoImg" title="Control+Z Software" src="http://controlzeta.net/ControlZeta.png" alt="Control+Z Software" width="408" height="205" />
  5. </a>
  6.  
  7. Aquí usaremos el teléfono y el email:
  8.  
  9. <a class="sprite infoContenedor" href="http://www.controlzeta.net">
  10. <img class="spriteImg infoImg" title="Control+Z Software" src="http://controlzeta.net/ControlZeta.png" alt="Control+Z Software" width="408" height="205" />
  11. </a>

El ejemplo (y por tanto el código) lo tenéis aquí: http://controlzeta.net/Tutoriales/Sprite/sin-background.php

La explicación técnica es simple.

Necesitamos un contenedor para cada imagen (en este caso un <a> con display:block, podría ser un div u otra elemento) que nos delimite las medidas que tendrá el recorte de la imagen mostrada. Este contenedor debe tener la propiedad "overflow:hidden;" para que no se nos muestre el trozo de imagen que no queremos ver.

Dentro del contendor, insertamos el tag <img> con el src la imagen en cuestión y, importante, las medidas completas de la imagen original. Si no las introducimos, se nos escalará la imagen para adaptarse al contenedor. Además, debemos posicionar la imagen con los atributos css top y left, para "empezar" a mostrar la imagen desde la coordenada que nos interese.

Llevamos tiempo utilizando esta técnica pero en la variante background-image. En algunas ocasiones la hemos usado para reducir el tiempo de carga, pero implicaba problemas semánticos (un logo nunca puede ser una imagen de fondo) y de posicionamiento (una imagen de fondo no puede tener alt o title). Esta nueva técnica solventa los problemas mencionados, por lo que podremos extender el concepto a toda la web, consiguiendo agrupar tantas imágenes como queramos.

Fuente: google.com No porque lo hayamos buscado, que también, sino porque, si os fijáis, google utiliza esta imagen:

google.com

google.com

Curioso, ¿no?

Node cannot be inserted at the specified point in the hierarchy” code: “3 [Break on this error] (no source for http://www.sintoner.com/Javascript/funcion.js)

Martes, 14 de Julio de 2009
Este fallo que lanza firebug desde firefox,
Node cannot be inserted at the specified point in the hierarchy" code: "3
(no source for http://www.sintoner.com/Javascript/controlador.js)
Es debido a que se ha tratado de insertar un nodo padre a un hijo. Esto provoca un un ciclo dentro de la estructura DOM, que el navegador no puede interpretar. Revisa la estructura que estás creando y evita añadir el padre de un nodo a un hijo.
mi error:

columna=document.createElement('a');

nodoNuevo= document.createElement('div')

clomuna.appendChild(Nodonuevo);

NodoNuevo.appendChild(columna); // error! Estamos insertando un hijo que ya es padre del nodo actual

La solución era que tenía que crear una variable nueva para el nodo. al reutilizar un nombre de variable en un bucle. Se creaba este problema, utilizando otra variable ya no hay problema.