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>

martes, 27 de noviembre de 2007

ORACLE. autoincrement.

Muchos son los casos en los que tenemos que hacer un insert y el campo id no puede repetirse. En MySQL tenemos el autoincrement pero en oracle necesitamos saber el máximo del campo id de la tabla y añadirle uno.

Por suerte podemos incluir sentencias select dentro de un insert.

Veamos el ejemplo:

CREATE TABLE CLIENTES
(
ID_CLIENTE NUMBER(11) NOT NULL,
NOMBRE VARCHAR(240 Byte),
constraint PK_ID_CLIENTE primary key (ID_CLIENTE)
);

/* inicializamos la tabla */
INSERT INTO CLIENTES
( ID_CLIENTE, NOMBRE )
VALUES
( 1 ,'CLIENTE 1')

/* el resto de los insert con la select dentro del insert */
INSERT INTO CLIENTES
( ID_CLIENTE, NOMBRE )
VALUES
( (SELECT MAX(ID_CLIENTE)+1 FROM CLIENTES) ,'CLIENTE DE PRUEBA')

---

Supongo que habrá otras técnicas de simular el autoincrement de MySQL.
Esta forma funciona pero seguro que hay otras muchas más.

AJAX. metodo get y post

Continuando con AJAX, estas funciones nos permiten trabajar con AJAX tanto por el método GET como por el POST.



function Ajax() {

var XMLHttp = false;
if (window.XMLHttpRequest) {
// Si es Mozilla, Safari etc
XMLHttp = new XMLHttpRequest ();
} else {
if (window.ActiveXObject) {
// pero si es IE
try {
XMLHttp = new ActiveXObject ("Msxml2.XMLHTTP");
} catch (e) {
// en caso que sea una versión antigua
try {
XMLHttp = new ActiveXObject ("Microsoft.XMLHTTP");
} catch (e) {
return false;
}
}
} else {
return false;
}
}

return XMLHttp;
}

function cargarContenidoAjaxPOST(url, post, contenedor) {

ajax = Ajax();

if (ajax==false) {
alert("Exception AJAX");
return;
}

ajax.open("POST",url,true);

ajax.onreadystatechange=function() {

if (ajax.readyState == 4 && (ajax.status == 200 || window.location.href.indexOf ("http") == - 1)) {
contenedor.innerHTML = ajax.responseText;
}

}

ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//ajax.send("t1="+t1+"&t2="+t2)
ajax.send(post);
}

function cargarContenidoAjaxGET(url, contenedor) {

ajax = Ajax();

if (ajax==false) {
alert("Exception AJAX");
return;
}

ajax.open("GET", url, true);

ajax.onreadystatechange=function() {

if (ajax.readyState == 4 && (ajax.status == 200 || window.location.href.indexOf ("http") == - 1)) {
contenedor.innerHTML = ajax.responseText;
}

}

ajax.send(null);
}
/****************************************/
/* ejemplos de llamadas a las funciones */
/****************************************/
function publicarCambios() {
url="prueba.php";

contenedor=document.getElementById('idcontenido');

post="Accion="+form.Accion.value;

cargarContenidoAjaxPOST(url, post, contenedor);
}

function mostrarListadoFolletos( ) {

url="ajax_php/FolletosListado.php";

contenedor=document.getElementById('idcontenido');

cargarContenidoAjaxGET(url, contenedor)
}

lunes, 26 de noviembre de 2007

AJAX. ejemplo POST

Este codigo es la recopilación de varios mini-manuales encontrados por internet.

Este ejemplo es para enviar los parametros por el método POST.

/* ajax.js */
function Ajax() {

var XMLHttp = false;
if (window.XMLHttpRequest) {
// Si es Mozilla, Safari etc
XMLHttp = new XMLHttpRequest ();
} else {
if (window.ActiveXObject) {
// pero si es IE
try {
XMLHttp = new ActiveXObject ("Msxml2.XMLHTTP");
} catch (e) {
// en caso que sea una versión antigua
try {
XMLHttp = new ActiveXObject ("Microsoft.XMLHTTP");
} catch (e) {
return false;
}
}
} else {
return false;
}
}

return XMLHttp;
}

function cargarContenidoAjaxPOST(url, post, contenedor) {

ajax = Ajax();

if (ajax==false) {
alert("Exception AJAX");
return;
}

ajax.open("POST",url,true);

ajax.onreadystatechange=function() {

if (ajax.readyState == 4 && (ajax.status == 200 || window.location.href.indexOf ("http") == - 1)) {
contenedor.innerHTML = ajax.responseText;
}

}

ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//ajax.send("t1="+t1+"&t2="+t2)
ajax.send(post);
}
/* FIN ajax.js */

/****************************************************/

/* documento HTML */
<script type="text/javascript" src="js/ajax.js"></script>
<script language="javascript">
function publicarCambios( form ) {
url="prueba.php";

contenedor=document.getElementById('idcontenido');

post="Accion="+form.Accion.value;

cargarContenidoAjaxPOST(url, post, contenedor);
}
</script>

<a href="javascript: publicarCambios(document.form);"
style=""
>
Publicar cambios
<form action="prueba.php" id="form" name="form" method="post">
<input type="hidden" id="Accion" name="Accion" value="pepe">
</form>
</a>
<br />
<div id="idcontenido">
idcontenido
</div>
/* documento HTML */

PHP. autentificación HTTP.

Esta es una forma sencilla de autentificación con PHP. Solo funciona si php es modulo de apache, como cgi no funciona.

Yo prefiero loguear a los usuarios mediante su login y controlar la session. Pero muchas veces hay prisas o simplemente para una sola pantalla restringida para que te vas a montar una gestión de usuarios.

if ($_SERVER['PHP_AUTH_USER']!="user" && $_SERVER['PHP_AUTH_PW']!="pass") {

  header('WWW-Authenticate: Basic realm="My Realm"');
  header('HTTP/1.0 401 Unauthorized');
  //echo 'Text to send if user hits Cancel button';
  echo 'HTTP/1.0 401 Unauthorized';
  exit;
} else {

  echo "

Hola {$_SERVER['PHP_AUTH_USER']}.

";
  //echo "

You entered {$_SERVER['PHP_AUTH_PW']} as your password.

";
}
?>

Este ejemplo lo he recogido de http://es2.php.net/manual/es/features.http-auth.php

Visitarlo para más información.

jueves, 22 de noviembre de 2007

HTML. div en lugar de table II

La distribución del contenido html es posible sin el uso de tablas.

En el ejemplo podemos distribuir el contenido típico de cabecera, menu a la derecha y contenido a la izquierda.

Con el uso de los estilos
float: left;
float: right;

clear: left;
clear: both;

Podemos distribuir el contenido de nuestra web sin necesidad de tablas.

Echar un vistazo al ejemplo más completo en HTML organizar el contenido con divs

También ejemplos visuales de divs con distintos css en la propiedad de display

Y cómo no la w3c con su guía de referencia rápida de css y xhtml:
Guía de Referencia CSS 2.1
Guía de Referencia XHTML


<div id="cabecera" style="border: 1px solid blue;">
cabecera
</div>
<div id="cabecera2" style="border: 1px solid blue; clear: both;">
cabecera2
</div>
<div id="menu" style="float: left; border: 1px solid blue; width: 200px;">
<div>menu 1</div>
<div>menu 2</div>
<div>menu 3</div>
<div>menu 4</div>
</div>
<div id="contenido" style="border: 1px solid blue; margin-left: 225px;">
contenido1
contenido2<br />
<div>contenido3</div>
<div>contenido4</div>
</div>
<div id="derecha" style="float: right;">
derecha
</div>

<div id="pie" style="border: 1px solid blue; clear: both">
pie
</div>
<div id="tabla" style="float: left; margin-top: 10px;">
tabla
<div style="float: left; border: 1px solid blue; width: 50px;">
A
</div>
<div style="float: left; border: 1px solid blue; width: 50px;">
B
</div>
<div style="float: left; border: 1px solid blue; width: 50px;">
C
</div>
<div style="float: left; width: 50px; border: 1px solid blue;">
D
</div>
<div style="float: left; width: 50px; border: 1px solid blue;">
E
</div>
<div style="float: left; border: 1px solid blue; width: 50px;">
F
</div>
<div style="clear: left;">
</div>
<div style="float: left; border: 1px solid blue; width: 50px;">
H
</div>
<div style="float: left; border: 1px solid blue; width: 50px;">
I
</div>
<div style="float: left; border: 1px solid blue; width: 50px;">
J
</div>
<div style="float: left; width: 50px; border: 1px solid blue;">
K
</div>
<div style="float: left; width: 50px; border: 1px solid blue;">
L
</div>
<div style="float: left; border: 1px solid blue; width: 50px;">
M
</div>
</div>

Visita también la parte I de este mismo tema.

HTML. div en lugar de table

Podemos organizar el contenido html en lugar de con table con div.
Es muy útil ya que nos enseña a manejar el contenido como recomienda la w3c.
Muchas páginas se nos muestran ya sin usar ni una sola tabla, visita www.php.net y verás como no hay un solo tag table, ni tr, ni td

Este apunte lo recogí de
www.anieto2k.com


Solución inline-block

//CSS
.table { }
.table .row { }
.table .row .cell { display: inline-block; }
//HTML
<div class=”table”>
<div class=”row header”>
<span class=”cell” style=’width:50px;’>Header Column 1</span>
<span class=”cell” style=’width:50px;’>Header Column 2</span>
</div>
<div class=”row body”>
<span class=”cell” style=’width:50px;’>Body Column 1</span>
<span class=”cell” style=’width:50px;’>Body Column 2</span>
</div>
</div>

Esta solución, funcionará en la mayoría de navegadores, aunque rompe la regulación de la W3C ya que estamos haciendo que los <span /> sean elementos de bloque.
Solución float

//CSS
.table { }
.table .row { clear: left; }
.table .row .cell{ float: left; }
//HTML
<div class=”table”>
<div class=”row header”>
<span class=”cell” style=’width:50px;’>Header Column 1</span>
<span class=”cell” style=’width:50px;’>Header Column 2</span>
</div>
<div class=”row body”>
<span class=”cell” style=’width:50px;’>Body Column 1</span>
<span class=”cell” style=’width:50px;’>Body Column 2</span>
</div>
<div style=’clear:left;’></div>
</div>

Echar un vistazo al ejemplo más completo en HTML organizar el contenido con divs

También ejemplos visuales de divs con distintos css en la propiedad de display

Y cómo no la w3c con su guía de referencia rápida de css y xhtml:
Guía de Referencia CSS 2.1
Guía de Referencia XHTML

miércoles, 21 de noviembre de 2007

HTML. Mostrar código html dentro de una página html

Para mostrar directamente el código html dentro de una web deberemos remplazar los caracteres que abren y cierran cada tag.

Sustituimos cada caracter < por &lt;
y cada caracter > por &gt;

ejemplo:

<div>Hola mundo!</div>

&lt;div&gt;Hola mundo!&lt;/div&gt;

AJAX. ejemplo básico.

Mediante AJAX podemos recargar solo una parte del contenido de un documento html.

Este ejemplo es una versión minimamente modificada de un código que me encontré en internet.
Siento no hacer referencia a ese sitio pero no me acuerdo de la url.
/* codigo 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) {
var XMLHttp = false;
if (window.XMLHttpRequest)
{
// Si es Mozilla, Safari etc
XMLHttp = new XMLHttpRequest ();
} else if (window.ActiveXObject)
{
// pero si es IE
try
{
XMLHttp = new ActiveXObject ("Msxml2.XMLHTTP");
}
catch (e)
{
// en caso que sea una versión antigua
try
{
XMLHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
catch (e)
{
}
}
}
else
return 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);
}

/* documento html */

<div style="float: left; width: 175px;">
<a href="javascript: mostrarNuevoContenido('dameContenido.php','contenido');">
mostrar
</a>
</div>
<div id="contenido" style="float: left;">
AJAX mediante objeto javascript
</div>

// La url dameContenido.php podría ser cualquier documento html que contenga el contenido que queremos cargar en el div

ORACLE. paginación con oracle. LIMIT en oracle.

Se trata de anidar las consultas. Introducimos nuestra consulta $sql dentro de otras dos consultas que controlan las filas obtenidas en la consulta.

$sql_paginada="
SELECT * FROM (
SELECT ROWNUM AS FILA, CONSULTA.* FROM (
$sql
)
CONSULTA
)
WHERE FILA > $Desde AND FILA <= $Hasta
";