Linea de Codigo

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.

Continue reading Sangría francesa en CSS...

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".

Continue reading Mi primer gráfico SVG...

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.

Continue reading Sangria de primera línea con CSS...

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.

Continue reading Pseudo-elementos tipograficos: Primera línea de un parrafo...

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.

Es decir, que depende del navegador web que estemos utilizando y del soporte que de sobre estas etiquetas. En un barrido pequeño de los navegadores más utilizados creo que solo es el Internet Explorer 5.5+.

Pero, si utilizo las propiedades CSS ¿Que pasa cuando entro con otro navegador? Pues nada, el resto de navegadores las omitirán y utilizaran los datos que tengan del navegador para colorear las barras de scroll.

Las propiedades CSS de scroll que podemos utilizar son las siguientes:

• scrollbar-3dlight-color, color del borde que hace el efecto 3D en la barra de scroll.
• scrollbar-arrow-color, color de las flechas.
• scrollbar-base-color, es el color genérico a utilizar por la barra de scroll. Podríamos utilizar únicamente este para dar color a la barra.
• scrollbar-darkshadow-color, sombra de la barra de progreso.
• scrollbar-face-color, el color de lo que es realmente la barra de progreso. Es decir, del bloque que se mueve por la barra.
• scrollbar-highlight-color, el color del fondo de la barra.
• scrollbar-shadow-color, son los dos botones sobre los que podemos pulsar para desplazar la barra.
• scrollbar-track-color, es el color de fondo de la barra de scroll.

A las propiedades las asignaremos un color dentro de un área de código CSS. Quedará como el código que sigue:

 
<style type="text/css">;
<!--
 
body {
 scrollbar-face-color:fuchsia;
 scrollbar-highlight-color:yellow;
 scrollbar-3dlight-color:orange;
 scrollbar-darkshadow-color:darkblue;
 scrollbar-shadow-color:gray;
 scrollbar-arrow-color:yellow;
 scrollbar-track-color:aqua;
}
-->
</style>
 

Vemos que las propiedades las asignamos al elemento HTML body, para que de esta manera afecte a todos los elementos con scroll de la página.

Solo nos quedará añadir a nuestra página un elemento que tenga scroll. Para ello utilizamos un textarea.

<textarea rows="15">
...
</textarea>

Hay que indicar, que no hemos encontrados un navegador que aplique esto al scroll de la propia página.

Visualizar el ejemplo | Descargar el código

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:

<model id="mipersona">
   <instance>
<persona xmlns="">
       <nombre></nombre>
       <apellido></apellido>
       <edad></edad>
       <domicilio></domicilio>
     </persona>
   </instance>
</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í:

 
<input ref="/persona/nombre">
  <label>Persona: </label>
</input>
 
<h:br/>
<input ref="/persona/apellido">
  <label>Apellido: </label>
</input>
 
<h:br/>
<input ref="/persona/edad">
  <label>Edad: </label>
</input>
 
<h:br/>
 
<textarea ref="/persona/domicilio">
   <label>Domicilio: </label>
</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.....

 
<trigger>
   <label>Borrar</label>
   <reset ev:event="DOMActivate" model="mipersona"/>
</trigger>

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

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:

• Separar el modelo de datos del formulario y su diseño visual
• Dotar de mayor potencia a los formularios: funciones de trabajo sobre ellos, nuevos componentes visuales,...

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.

<h:html xmlns:h="http://www.w3.org/1999/xhtml">
 <h:head>
   <h:title>Mi primer formulario XForms</h:title>
 </h:head>
 <h:body>
 
 ...
 
 </h:body>
</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

<h:html xmlns:h="http://www.w3.org/1999/xhtml"
   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:

 
<input>
  <label>Nombre:</label>
</input>
 
<h:br/>
<input>
 <label>Apellido:</label>
</input>
 

Dentro de la etiqueta input podemos encontrar dos elementos

• Label: Para indicar el nombre que se antepondrá al campo de entrada
• Hint: Que es una etiqueta de texto emergente que nos servirá de aviso.

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.

<submit submission="busqueda">
  <label>Buscar</label>
</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:

<model>
  <instance>
    <data xmlns="">
      <nombre>Victor</nombre>
      <apellido>Cuervo</apellido>
    </data>
  </instance>
</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:

 
<input ref="nombre">
 <label>Nombre:</label>
</input>
 
<h:br/>
<input ref="apellido">
 <label>Apellido:</label>
</input>
 

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:

• action, que define la URI donde se enviarán los datos.
• method, que indica que tipo de protocolo se va a utilizar para la serialización de datos: post, get,...
• id, identificador que lo hace único y que será usado por el elemento submit para identificar la acción de búsqueda a usar.

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

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

• Visitas: 48.137 (+16.461)
• Visitantes Únicos: 41.078 (+13.542)
• Página Vistas: 79.448 (+23.872)
• Page Rank: 3 (-1)

Navegadores

• Internet Explorer: 65,18 (-3,4%)
• FireFox: 31,72 (+3,87%)
• Opera: 1,79 (+0,46%)
• Safari: 0,43 (-0,01%)

Sistemas Operativos

• Windows:95,33 (+0,08%)
• Linux:3,64 (+0,88%)
• Macintosh:0,82 (-0,05%)

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.

Continue reading Validaciones personalizadas con wForms...

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.

Continue reading Ejecutar cuando pasen X segundos en JavaScript...