Buscar en este blog

viernes, 18 de septiembre de 2009

AJAX con mootools. Envio de formulario

Con las mootools es muy fácil usar ajax sin necesidad de manejar el objeto XmlHttpRequest y complicarse con las compatibilidades de los navegadores.

Este ejemplo es el envio de un formulario, tan sencillo como formulario.send();

Ahí va el código:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<script type="text/javascript" src="js/mootools/mootools-1.2.1-core-yc.js"></script>
<style>

/* los colores son muy mejorables */

.formulario {
display: block;
border: 0.1em solid green;
background-color: #777070;
color: #ffffff;
font-size: 0.7em;

}
.formulario label {
display: block;
}
.formulario input {
display: block;
background-color: #efdddd;
color: #f60962;
}
.formulario input[type=submit] {
background-color: #000000;
color: #f60962;
font-weight: bolder;
}
.codigo {
width: 10em;
}
.descripcion {
width: 20em;
}
.cantidad {
width: 5em;
}
.precio {
width: 5em;
}
.dto {
width: 5em;
}
.tax {
width: 5em;
}
.importe {
width: 5em;
}

</style>
</head>
<body>

<form action="controller.do" id="formulario" name="formulario" method="post" class="formulario">
<label>Código</label>
<input type="text" id="codigo" name="codigo" maxlength="16" class="codigo" />
<label>Decripción</label>
<input type="text" id="descripcion" name="descripcion" maxlength="120" class="descripcion" />
<label>Cantidad</label>
<input type="text" id="cantidad" name="cantidad" maxlength="9" class="cantidad" />
<label>Precio</label>
<input type="text" id="precio" name="precio" maxlength="11" class="precio" />
<label>Dto</label>
<input type="text" id="dto" name="dto" maxlength="5" class="dto" />
<label>Tax</label>
<input type="text" id="tasa" name="tasa" maxlength="5" class="tax" />
<label>Importe</label>
<input type="text" id="importe" name="importe" maxlength="15" class="importe" />
<input type="submit" id="guardar" name="guardar" value="Guardar" title="Guardar"/>
</form>
<div id="resultado"></div>
<script type="text/javascript">

window.addEvent('domready', function() {
addEventToForm('formulario','resultado');
});
function addEventToForm(_id_form, _id_result) {

$(_id_form).addEvent('submit', function(e) {
//Prevents the default submit event from loading a new page.
e.stop();

this.set('send', {onComplete: function(response) {

$(_id_result).set('html', response);
}});
//Send the form.
this.send();
});
}

</script>
</body>
</html>


El código de controller.do tan solo es...

<?php
print_r($_REQUEST);
?>

martes, 15 de septiembre de 2009

HTML div organizar contenido

Como todavía me encuentro muchas webs y aplicaciones web con <TABLE><TR><TD>
continúo con el tema de usar div en lugar de table.

Con el siguiente ejemplo podemos organizar una página web o documento html
con divs, centrando el contenido y estableciendo un diseño proporcional,
que se adaptaría a cualquier resolución de pantalla y dispositivo.

No usamos ningún <table> ni <tr> ni <td> ni ..




Ahora el código html y css

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>div html</title>
<!--
/* lo ideal sería tener la hoja de estilos en otro fichero
* pero para el ejemplo lo metemos dentro del documento html
*/
<link rel = "stylesheet" type = "text/css" media="screen" href="media/css/all/estilos.css"/>
-->
<style type="text/css" media="all">
body {
/* para centrar el contenido */
background-color:#ffffff;
text-align:center;
margin:0 auto;
}
#container {
/* # la almoadilla aplica el estilo a los tag html con ese id */
margin: 0 auto;
text-align:left;
/*width:780px; /* para 800 x 600 */
width: 100%;
}
#cabecera {
background-color: blue; /* mejor definir color notación #333ccc */
color: white;
}
#menu {
background-color: orange;
float: right;
width: 20%;
}
#contenido {
background-color: #eadcdc;
float: left;
width: 75%;
}
#pie {
clear: both;
background-color: #333ccc;
color: #ffffff;
}
</style>
</head>
<body>
<div id="container">
<div id="cabecera">
cabecera
</div>
<div id="menu">
menu
<ul>
<li>item menu</li>
<li>item menu</li>
<li>item menu</li>
<li>item menu</li>
<li>item menu</li>
<li>item menu</li>
<li>item menu</li>
<li>item menu</li>
</ul>
</div>
<div id="contenido">
contenido
<h2>La Ñ con utf-8</h2>
<p>
Podemos usar cualquier caracter de nuestro queridisimo lenguaje
con la codificación UTF-8
Ñ ñ á é í ó ú Á É Í Ó Ú ç Ç
</p>
<h2>Titulo dentro del contenido</h2>
<p>
Texto dentro del contenido, texto dentro del contenido
Ah los diseñadores gráficos usan el siguiente texto como borrador
</p>
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

</div>
<div id="pie">
pie
</div>
</div>
</body>
</html>

Fundamental es separar el contenido del diseño.
Por un lado nuestro contenido organizado con html o mejor con xhtml
y por otro lado el diseño.

Copia todo el html, guardalo en un fichero html o xhtml y abrelo con un navegador.

Todo el contenido dentro del tag <style> debería pasar a un fichero estilos.css
pero lo puedes dejar así para hacer pruebas.

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, 9 de septiembre de 2009

CSS. HTML. Para todos los dispositivos

Hace poco se cumplieron 20 años de la web, World Wide Web, y Tim Berners-Lee criticaba los dominios .tel y .mobi. No es de extrañar ya que realmente con el mismo contenido html o xhtml podemos crear estilos para los distintos dispositivos o Media types. Echar un vistazo a las guias de las w3c sobre estos Media types

El tema es sencillo, si hemos separado bien el contenido de la apariencia, el html del css.

Dentro de <html><head> podemos definir hojas de estilo, css, para cada dispositivo cliente que pueda solicitar una url de nuestra web.

Se trata de añadir con el valor del atributo media las diferentes hojas de estilo, css, que hayamos generado, mejor que sea el diseñador gráfico si sabe que existe algo más que flash.



<!-- para monitores de ordenador, computadora -->
<link rel = "stylesheet" type = "text/css" media="screen" href="css/screen/general.css"/>

<!-- para imprimir -->
<link rel = "stylesheet" type = "text/css" media="print" href="css/print/general.css"/>

<!-- para pequeñas pantallas, como móviles, pda, ... -->
<link rel = "stylesheet" type = "text/css" media="handheld" href="css/handheld/general.css"/>

<!-- incluso para ciegos -->
<link rel = "stylesheet" type = "text/css" media="braille" href="css/braille/general.css"/>
<link rel = "stylesheet" type = "text/css" media="embossed" href="css/embossed/general.css"/>

<!-- sintetizadores de voz -->
<link rel = "stylesheet" type = "text/css" media="speech" href="css/speech/general.css"/>

<!-- Para nuestro querido terminal o consola, cuando navegamos con lynx -->
<link rel = "stylesheet" type = "text/css" media="tty" href="css/tty/general.css"/>


<!-- Los tipicos pantalla, impresión y teléfono móvil o pda
<link rel = "stylesheet" type = "text/css" media="screen" href="css/screen/menu.css"/>
<link rel = "stylesheet" type = "text/css" media="print" href="css/print/menu.css"/>
<link rel = "stylesheet" type = "text/css" media="handheld" href="css/handheld/menu.css"/>



No te olvides echar un vistazo a la w3c, hay una guía muy interesante sobre css (en español) que puede resolver muchas dudas y por su puesto los Media types en inglés.