Buscar en este blog

viernes, 21 de diciembre de 2007

HTML. para teléfonos moviles.

Este articulo lo encontré en http://www.genbeta.com

Adapta cualquier web para verla cómodamente en el teléfono móvil

A veces los trucos más utiles son los que desconocemos y los más sencillos de realizar.

Así, si por ejemplo quieres adaptar una página web para poder verla en un teléfono móvil, no te compliques la vida y prueba a acceder a esta web, donde debes de poner la web que te interesa ver en versión lite.

http://www.google.com/gwt/n?u=www.paginaweb.com

Además, este truco puede servirte también para acceder a páginas web que no puedes ver debido a restricciones de nuestro proveedor o censura del país donde estés.

miércoles, 19 de diciembre de 2007

PHP. Evitar inyección de código.

Por un campo input un usuario puede introducir código que puede ser interpretado en el servidor sino tenemos cuidado.

La función php addslashes( string ) devuelve un string con los carateres escapados, es muy utilizada para escapar los caracteres en las sentencias SQL.

Ver su descripción en www.php.net

Otras formas de evitar que se inyecte código por los input de un formulario sería validar lo que se envía al servidor, las expresiones regulares nos pueden ayudar mucho. Evitamos que se los valores tengan caracteres especiales.

// si tiene algún caracter especial, _.!@#$&*+=|.....
if (ereg("[^A-Za-z0-9]+",$_REQUEST['user'])) {
$_MensajeError="ERROR: usuario no válido";

return $_MensajeError;
}
// si no tiene caracteres alfanuméricos
if (ereg("[^A-Za-z0-9]+",$_REQUEST['pass'])) {
$_MensajeError="ERROR: password no válida";

return $_MensajeError;
}
?>


El tema de la seguridad es muy amplio, con esto solo prevenimos ciertos ataques, por ello deberemos añadir a nuestros scripts muchísimos más controles para tener una web segura.

lunes, 17 de diciembre de 2007

HTML. Border redondos.

Me enteré de este generador de bordes de google, através de sigt.net

Google tiene su propio generador de esquinas redondeadas y es francamente útil, rápido y trabajado. Solamente hay que entrar en una dirección tipo:



http://groups-beta.google.com/groups/rou
ndedcorners?c=999999&bc=white&w=4&h=4&a=tr

Poniendo los parámetros que más nos gusten en la propia URL (mirad en las partes en negrita de la url anterior):

* c: el color en formato hexadecimal como en los ficheros CSS, acepta la forma reducida y la completa (RGB o RRGGBB, 123 o 112233) pero sin poner el #. También se pueden usar los nombres de color de la especificación CSS2: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, y yellow.
* bc: el color de fondo, mismo comportamiento que c. Un truco: si dejamos el parámetro bc vacío el fondo de pantalla es transparente.
* h: alto en pixels. Si lo dejas en blanco por defecto es 8.
* w: ancho en pixels. Por defecto 8.
* a: Esquina a generar, tl es top-left (arriba-izquierda), tr es top-right (arriba-derecha), bl bottom-left (abajo-izquierda) y br bottom-right (abajo derecha).

miércoles, 12 de diciembre de 2007

JAVASCRIPT. Hilos. setInterval. clearInterval.

Bueno esto es una especie de "hilos" para javascript.
Siempre que usaba setInterval ó setTimeOut no sabía como finalizar su ejecución correctamente.
Al devolver la función setInterval un valor o identificador, lo recojo en una variable y así podemos parar la ejecución con clearInterval(hilo);

// declaramos el hilo

var hilo;

// ejecutamos el hilo

hilo=setInterval("llamadaAfuncion()",100);

// eliminamos el hilo

clearInterval(hilo);

EL siguiente código javascript lo utilicé para hacer aparecer poco a poco las imágenes y también para hacerlas desaparecer poco a poco.
En el ejemplo uso setInterval() y clearInterval().


<script type="text/javascript">

var opacidad=0;

var hilo;

function mostrarImagen(id) {
clearInterval(hilo);
opacidad=0;
document.getElementById(id).style.opacity=".0";
document.getElementById(id).style.filter="alpha(opacity=0)";
hilo=setInterval("hacerOpaco('"+id+"')",50);
}

function ocultarImagen(id) {
clearInterval(hilo);
opacidad=100;
hilo=setInterval("hacerTransparente('"+id+"')",50);
}



function hacerOpaco( id ) {
opacidad++;

opacidadFireFox=opacidad/100;

document.getElementById(id).style.opacity=opacidadFireFox;
document.getElementById(id).style.filter="alpha(opacity="+opacidad+")";

if (opacidad>99) {
clearInterval(hilo);
document.getElementById(id).style.opacity="1";
document.getElementById(id).style.filter="alpha(opacity=100)";
return;
}
}

function hacerTransparente( id ) {
opacidad--;

opacidadFireFox=opacidad/100;

document.getElementById(id).style.opacity=opacidadFireFox;
document.getElementById(id).style.filter="alpha(opacity="+opacidad+")";

if (opacidad<1) {
clearInterval(hilo);
document.getElementById(id).style.opacity=".0";
document.getElementById(id).style.filter="alpha(opacity=0)";
return;
}
}

</script>

martes, 11 de diciembre de 2007

PHP. variables almacenadas en fichero. Serialize

Este ejemplo me lo ha pasado Felipe, no se de donde lo ha sacado por ello no hago mención a él. Pero es una buena alternativa para las variables en memoria, ya que éstas últimas no me acaban de convencer y me parecen más útiles los valores almacenados en base de datos o en archivos de texto.

El ejemplo almacena la información de un array asociativo en un fichero de texto serializando la variable para escribirla y unserializandola (=desserializar) para su lectura.



define("APP_DATA_FILE",
"counter.data");

function application_start ()
{
global $_APP;

// if data file exists, load application
// variables
if (file_exists(APP_DATA_FILE))
{
// read data file
$file = fopen(APP_DATA_FILE, "r");
if ($file)
{
$data = fread($file,
filesize(APP_DATA_FILE));
fclose($file);
}

// build application variables from
// data file
$_APP = unserialize($data);
}
}

function application_end ()
{
global $_APP;

// write application data to file
$data = serialize($_APP);
$file = fopen(APP_DATA_FILE, "w");
if ($file)
{
fwrite($file, $data);
fclose($file);
}
}

?>


El termino "serialize" lo traduzco como serializar pero creo que la traducción oficial al castellano sería "seriar". Aunque no estoy seguro.

CSS. comparación versiones y navegadores

Este articulo demuestra el porque se ven las páginas diferentes en un navegador y en otro.

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29

CSS. selectores

He encontrado un mini turorial sobre selectores en CSS que explica de forma genial este tema.

p { color: red; }

.nombre_clase { color: red; }

#idelemento { color: red; }

div p:first-child { color: red; }



http://simplelogica.net/caoticoneutral/?p=43

En este minitutorial hace referencia a un tutorial(en inglés) sobre css selectors que está de miedo.

http://css.maxdesign.com.au/selectutorial/index.htm

lunes, 10 de diciembre de 2007

PHP. variables en memoria compartida

Las variables globales han desparecido. Pero con las Funciones Semáforo y de memoria compartida podemos almacenar variables que sean disponibles desde cualquier script y que conserven su valor fuera de la vida del script.

Yo recomiendo el uso de base de datos y/o el uso de archivos de texto o incluso script que contienen arrays de información.

Pero esto de la variables en memoria compartida puede ser útil, ahí va el ejemplo:

(lo he metido en un objeto para verlo de una forma más clara)


/************ class MemVar ***********************/
class MemVar {

var $identifier="";
var $key = "";

function MemVar( $_key ) {

$this->$key = $_key;

$this->$identifier = @shm_attach( $_key );
}

function setValue( $_keyvar , $_valor ) {
@shm_put_var( $this->$identifier , $_keyvar , $_valor );
}

function getValue( $_keyvar ) {
return @shm_get_var( $this->$identifier , $_keyvar );
}

function eliminar( ) {
@shm_remove( $this->$identifier );
}

function close( ) {
@shm_detach( $this->$identifier );
}
}
/************ FIN class MemVar ***********************/

/* poner valor

$memvar = new MemVar( 100 );
$memvar->setValue( 1 , "valor de la variable en memoria compartida" );
echo "puesto valor";
$memvar->close();
*/

/* obtener valor

$memvar = new MemVar( 100 );
echo "valor = ".$memvar->getValue( 1 );
$memvar->close();
*/

martes, 4 de diciembre de 2007

AJAX. objeto XMLHttp

Una forma más elegante de crear el objeto AJAX.
La condición if (window.XMLHttpRequest) es la forma mostrada en los otros ejemplos.
En cambio esta de la function AJAX me gusta más.

<script language="javascript">
// Documento JavaScript

// llamamos a que se recarge el contenido del div con ese id_contenedor
// mediante la llamada a la url
function mostrarNuevoContenido(url, id_contenedor) {
var Ajax = new AJAX(url, id_contenedor);
}
// todo es correcto y ha llegado el momento de poner la información requerida
// en su sitio en la pagina xhtml
function cargarpagina (pagina_requerida, id_contenedor)
{
if (pagina_requerida.readyState == 4 && (pagina_requerida.status == 200 || window.location.href.indexOf ("http") == - 1))
document.getElementById (id_contenedor).innerHTML = pagina_requerida.responseText;
}

function AJAX(url, id_contenedor) {


try {
// Si es Mozilla, Safari etc
XMLHttp = new XMLHttpRequest ();
} catch (e) {
try {
XMLHttp = new ActiveXObject ("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttp = new ActiveXObject ("Microsoft.XMLHTTP");
} catch(e) {
XMLHttp = false;
}
}
}


XMLHttp.onreadystatechange = function ()
{
// función de respuesta
cargarpagina (XMLHttp, id_contenedor);
}
XMLHttp.open ('GET', url, true); // asignamos los métodos open y send
XMLHttp.send (null);
}
</script>