Apuntes y trucos de programación

Entradas

Mostrando entradas de septiembre, 2009

AJAX con mootools. Envio de formulario

septiembre 18, 2009

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 {

HTML div organizar contenido

septiembre 15, 2009

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 .. width="450" height="400" scrolling="auto" frameborder="1" transparency> Ejemplo de página web organizada mediante divs y css 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=U

CSS. HTML. Para todos los dispositivos

septiembre 09, 2009

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.  <link rel = "stylesheet" type = "text/css" media="screen" href="css/screen/general.css"/>  <link rel = "stylesheet"