jump to navigation

Sangría francesa en CSS Noviembre 30, 2007

Publicado por lineadecodigo en : CSS , 3 comentarios

Una sangría francesa incluye un desplazamiento de todas las líneas de un párrafo excepto la primera. Las sangrías francesas son útiles cuando se quieren agregar gráficos al comienzo del párrafo.

(más...)

Mi primer gráfico SVG Noviembre 29, 2007

Publicado por lineadecodigo en : SVG , Hasta ahora 1 comentario

Difícil es abrir en Internet una página en la que no encontremos un gráfico. Ya sean GIF, JPG o PNG. Atrás quedaron los años donde veíamos las páginas repletas de texto plano y con unos fondos grises que tiraban para atrás.

Y en todo este trayecto hemos pasado épocas donde la sobrecarga de imágenes inundaba nuestra pantalla, la moda de los gráficos 3D para los títulos y los gráficos Flash.

Ahora, la vuelta de tuerca, es diferente. Ya no se busca el hacer nuestra página más elegante, sino más útil (en cuanto a la información se refiere). Buscamos gráficos que nos representen información. Y es que muchas veces "más vale una imagen que mil palabras".

(más...)

Sangria de primera línea con CSS Noviembre 28, 2007

Publicado por lineadecodigo en : CSS , 3 comentarios

En tipografía, una sangría es la introducción de uno o varios caracteres en blanco delante de una línea. Se suele emplear en textos que están alineados a la izquierda.

En el caso de la sangría de primera línea, los caracteres en blanco solo se introducen en la primera de un párrafo.

(más...)

Pseudo-elementos tipograficos: Primera línea de un parrafo Noviembre 27, 2007

Publicado por lineadecodigo en : CSS , Hasta ahora 1 comentario

Mediante el pseudo-elemento CSS first-line podemos modificar las propiedades de la primera línea de un párrafo. Entendemos como primera línea, donde el navegador corta el párrafo por coincidir con el final del navegador.

(más...)

Cambiar el color de las barras de scroll Noviembre 26, 2007

Publicado por lineadecodigo en : CSS , 9 comentarios

Si queremos cambiar el color de las barras de scroll de nuestra página podemos utilizar propiedades CSS. Si bien tenemos que tener en cuenta que estas propiedades no están soportadas por el estándar CSS de la W3C.

(más...)

Borrado de campos en XForms Noviembre 25, 2007

Publicado por lineadecodigo en : XForms , Añadir un comenario

Hace ya tiempo, cuando aprendí a construir formularios con HTML, me hacía mucha gracia que todos los formularios que veía por Internet tenían dos botones. El primero era el que realizaba el envío de la información, mientras que el segundo te borraba el contenido de todo el formulario.

Esta claro que no voy a cuestionar la utilidad de los dos botones, ya que útiles son. Pero quién no le ha dado al botón de borrar en vez de enviar, cuando realmente lo que quería era enviar y no borrar. Seguro que a todos nos ha pasado alguna vez y nos hemos visto en la tesitura de volver a introducir todos los datos.

En la especificación de XForms ¡han eliminado al componente “input type reset”¡..... Pero no del todo. La verdad es que ha dejado de ser un control y ha pasado a ser un “evento de interacción”..... ¿Cómo?

Intentare explicarlo... La idea es que los eventos de interacción sean los que correlacionen los eventos con el modelo de datos de XForms. Dentro de la categoría de eventos de interacción tenemos, además del "reset", "next" para cuando pasamos al siguiente control del formulario , "previous" cuando hacemos lo mismo, pero hacía atrás, "focus" para cuando queremos hacer foco en un determinado control,.....

Vale, pero yo quiero poner mi botón de toda la vida en el formulario,......

Lo primero que tenemos que hacer es construir un modelo de datos. Para este ejemplo tampoco nos vamos a inventar un mega-modelo. Hagamoslo sencillo:

  1. <model id="mipersona">
  2.    <instance>
  3. <persona xmlns="">
  4.        <nombre></nombre>
  5.        <apellido></apellido>
  6.        <edad></edad>
  7.        <domicilio></domicilio>
  8.      </persona>
  9.    </instance>
  10. </model>

Si os dais cuenta, los campos del modelo están vacíos. Y es que el evento de interacción reset no borra los campos, sino que lo que hace es volver a poner en el formulario el modelo inicial.

Vamos con el siguiente paso, construyamos el formulario. Para ello nos basamos en dos componentes sencillos: input y textarea. De ellos solo tienes que darte cuenta que para hacer referencia a un campo del modelo usan el atributo ref. El código nos quedaría algo así:

  1.  
  2. <input ref="/persona/nombre">
  3.   <label>Persona: </label>
  4. </input>
  5.  
  6. <h:br/>
  7. <input ref="/persona/apellido">
  8.   <label>Apellido: </label>
  9. </input>
  10.  
  11. <h:br/>
  12. <input ref="/persona/edad">
  13.   <label>Edad: </label>
  14. </input>
  15.  
  16. <h:br/>
  17.  
  18. <textarea ref="/persona/domicilio">
  19.    <label>Domicilio: </label>
  20. </textarea>

Y ahora llega lo más importante.... Nuestro botón de borrado... Para poner un botón tenemos que usar el componente trigger.

Dentro de este componente es donde pondremos nuestro evento de interacción. La etiqueta del elemento es reset y como atributos tendremos dos: el evento que lo activa que será DOMActivate . El evento DOMActivate viene a reflejar la acción por defecto sobre un control, en nuestro caso pulsar el botón. En el caso de que fuese una caja de texto, la acción por defecto sería pulsar "Intro".

El segundo atributo del reset es el modelo que tiene que resetear. Ya que podemos tener varios modelos en nuestra página.....

  1.  
  2. <trigger>
  3.    <label>Borrar</label>
  4.    <reset ev:event="DOMActivate" model="mipersona"/>
  5. </trigger>

Bueno, al final, tampoco ha sido tan difícil....

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre XForms

Mi primer formulario XForms Noviembre 24, 2007

Publicado por lineadecodigo en : XForms , 3 comentarios

XForms, otra tecnología X*. Un amigo mío dice, en broma, que toda tecnología que evoluciona el W3C le pega la X. Ya lo hizo al evolucionar su HTML al XHTML, las Querys al XQuery y claro está los formularios (Form) a XForms. Vamos, que podríamos decir que estamos delante de una verdadera generación X.

¿Qué es XForms?

XForms como reza su página del W3C es “the next generation of web forms”.... la nueva generación de formularios web. Y es que los formularios HTML se nos habían quedado pequeños y había que acometer dos cosas sobre ellos:

De las dos cosas mencionadas, la primera es la más importante. Separación de los datos de la presentación. Es por ello que se crea un conjunto de componentes visuales que pueden ser usados dentro de un documento XHTML o cualquier otro documento XML.

Por otro lado se define el concepto de instancia de datos. Esto es un modelo de datos que viene a reflejar la estructura de datos que se va a manejar. Estos datos son los que realmente se van a intercambiar.

Estas dos cosas: controles de formulario y la instancia de datos son ligados mediante un procesador XForms el cual define como se envía y recibe datos.

Mi primer formulario

Pongámonos manos a la obra y construyamos nuestro primer formulario basado en XForms. El movimiento se demuestra andando....Lo primero que tenemos que saber es que vamos a construir un documento XHTML.

  1. <h:html xmlns:h="http://www.w3.org/1999/xhtml">
  2.  <h:head>
  3.    <h:title>Mi primer formulario XForms</h:title>
  4.  </h:head>
  5.  <h:body>
  6.  
  7.  ...
  8.  
  9.  </h:body>
  10. </h:html>

Si os fijáis en el código. El namespace escogido en mi ejemplo para el XHTML> es h. Esto nos permitirá diferenciarlo de las etiquetas XForms.

Lo siguiente que tenemos que hacer es incluir el namespace de XForms. Este, está definido en http://www.w3.org/2002/xforms

  1. <h:html xmlns:h="http://www.w3.org/1999/xhtml"
  2.    xmlns="http://www.w3.org/2002/xforms">

En nuestro ejemplo vamos a poner un formulario de búsqueda. No nos vamos a complicar más la vida. Dentro de este formulario pondremos dos campos de entrada de texto y un botón que lance la búsqueda.

Lo más interesante de los XForms es que HA DESAPARECIDO LA ETIQUETA FORM.

Para añadir los campos de entrada de texto tenemos el elemento input:

  1.  
  2. <input>
  3.   <label>Nombre:</label>
  4. </input>
  5.  
  6. <h:br/>
  7. <input>
  8.  <label>Apellido:</label>
  9. </input>
  10.  

Dentro de la etiqueta input podemos encontrar dos elementos

Para añadir el botón de búsqueda tendremos que trabajar con el elemento submit. Este elemento tiene asociado un atributo que es submission, el cual enlazará con una acción de envío.

  1. <submit submission="busqueda">
  2.   <label>Buscar</label>
  3. </submit>

Enlazando el formulario con el modelo de datos

Como hemos dicho en la introducción. XForms separa los datos de la presentación. El modelo de dato se define dentro de la etiqueta model. Y un modelo contendrá una instancia del mismo (definida por el elemento instance), la cual contendrá los datos.

Veamos como quedaría nuestro formulario con el nombre y apellido como modelo:

  1. <model>
  2.   <instance>
  3.     <data xmlns="">
  4.       <nombre>Victor</nombre>
  5.       <apellido>Cuervo</apellido>
  6.     </data>
  7.   </instance>
  8. </model>

Si queremos hacer referencia a algún elemento del modelo desde los controles visuales lo haremos mediante el atributo ref. Así nuestros componentes visuales quedarían de la siguiente forma:

  1.  
  2. <input ref="nombre">
  3.  <label>Nombre:</label>
  4. </input>
  5.  
  6. <h:br/>
  7. <input ref="apellido">
  8.  <label>Apellido:</label>
  9. </input>
  10.  

Dentro del modelo también tendremos la acción desencadenada por el componente gráfico submit. El elemento que tiene la acción es submission.

<submission action="http://example.com/buscar" method="post" id="buscar"/>

Este elemento tiene múltiples atributos, pero entre ellos destacamos tres:

Visualizar nuestro trabajo: plug-in para Mozilla

Solo nos quedará por guardar nuestro ejemplo como .xhtml y probarlo.

Para probar el XForms con Mozilla y FireFox hay que descargarse un plug-in https://addons.mozilla.org/firefox/824/ que nos servirá para nuestros ejemplos.

Otros interpretes de XForms están disponibles en http://www.w3.org/MarkUp/Forms/#implementations

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre XForms

Estadisticas de Octubre Noviembre 21, 2007

Publicado por lineadecodigo en : Linea de Codigo , Añadir un comenario

Este mes está siendo un poco complicado y llegamos tarde con las estadísticas de Octubre. Pero no quería dejar pasar la ocasión de mostrároslas. Estas son algunas de las estadísticas de Línea de Código para el mes de Octubre.

Generales

Navegadores

Sistemas Operativos

Validaciones personalizadas con wForms Noviembre 20, 2007

Publicado por lineadecodigo en : wForms , 4 comentarios

Junto con wForms vienen predefinidas las validaciones básicas: números, fechas, direcciones de email,... pero wForms también nos da la posibilidad de hacer validaciones personalizadas.

En nuestro ejemplo vamos a definir dos validaciones. La primera será la de un código postal. La validación comprobará que sea un dígito de 5 números. La segunda validación comprobará que el texto introducido sea M o F. Intentando representar el concepto de texto.

(más...)

Ejecutar cuando pasen X segundos en JavaScript Noviembre 19, 2007

Publicado por lineadecodigo en : JavaScript , Añadir un comenario

Este artículo es un complemento a Ejecutar cada X segundos en JavaScript. Mientras que en el primer artículo veíamos como utilizar el método JavaScript setInterval para ejecutar una función cada X segundos de forma repetitiva, en este vemos como ejecutar una función a los X segundos. Para ello nos apoyaremos en la función JavaScript setTimeout.

(más...)