Alex Sancho

Formularios 101: Estructura

2007-01-26T21:11:02+01:00

Haciendo un repaso de lo que he escrito en el weblog, me viene a la memoria una de las primeras entradas que publique, un formulario de contacto, la verdad es que mirándolo hoy veo los errores que cometí y la cantidad de cosas que se pueden mejorar. Es por eso que me he decidido a escribir una serie de artículos en los que tratare de desglosar el proceso de creación de un formulario de contacto que se pueda utilizar en cualquier pagina web. En este primer articulo quisiera tratar la estructura y presentación del formulario, para la maquetacion utilizaremos xhtml estricto y para la presentación css y algo de javascript ayudados por la libreria jquery. [code html] [/code] Esta estructura básica nos servirá para definir los campos a utilizar en el formulario, aunque estamos utilizando etiquetas xhtml por definición, este código aun no cumple con los estándares del w3c que indican que los campos han de estar dentro de un elemento de bloque. Para este ejercicio utilizaremos listas ordenadas dentro de un fieldset, con lo que la estructura final quedaria asi: [code html] [/code] Con esto ya tenemos definida la estructura ahora vamos a por la presentación, me basare en una técnica publicada en [A List Apart][1], podéis aprender mas sobre ella en [Prettier Accessible Forms][2]. En [este enlace podeis ver el ejemplo completo][3], [1]: http://www.alistapart.com/ [2]: http://www.alistapart.com/articles/prettyaccessibleforms [3]: http://alexsancho.name/archives/examples/forms/101/markup/

Comentarios (0)

Generar xhtml con perl

2006-06-28T23:46:22+01:00

Un script escrito en perl puede devolver código html correctamente formateado, tan solo tenemos que incluir una llamada al modulo **CGI** que por defecto viene en cualquier instalación de perl. Si no estamos seguros de tener el modulo, podemos instalarlo desde cpan, [code bash] perl -MCPAN -e shell ... install CGI [/code] Ahora ya estamos seguros de cumplir los requisitos, comencemos con el script, lo primero es incluir el modulo e inicializarlo declarando una variable. [code perl] use CGI; my $q = new CGI; [/code] Para generar el marcado html tenemos varias opciones, podemos llamar directamente a la etiqueta pasando los parámetros mediante un array de variables, [code perl] $q->p({-style=>'font-size:12px;'}, 'mi parrafo'); [/code] o abriendo y cerrando la etiqueta para poder generar un marcado mas complejo. [code perl] $q->open_div(); $q->p({-style=>'font-size:12px;'}, 'mi párrafo'); $q->close_div(); [/code] Este seria el script una vez unimos todas las piezas, podéis comprobar que el código valida totalmente como xhtml 1.0 transicional. [code perl] use CGI; my $q = new CGI; print $q->header(-type => 'text/html', -status => '200 OK'); print $q->start_html(-title => "Generar XHTML con perl"); print $q->start_div({-style => 'font:1em/1em Verdana, Arial, Helvetica, sans-serif;color:#000;'}); print $q->h1('mi titulo'); print $q->p('este es mi párrafo'); print $q->end_div(); print $q->end_html(); [/code] Ver el ejemplo No es que sea un método ideal para generar paginas complejas, pero es una forma interesante de crear scripts utilizando un marcado valido sin tener que escribir muchas lineas de código.

Comentarios (3)

Javascript no intrusivo: moo.ajax

2006-02-06T20:42:43+01:00

Hace unos días comente algo sobre los beneficios de utilizar JavaScript de forma no intrusiva, hoy me gustaría mostrar un ejemplo de lo sencillo que resulta implementar estas técnicas, y los sorprendentes resultados que se pueden conseguir. Antes de comenzar, un par de detalles, la idea general del script es realizar una búsqueda en mi weblog sin tener que recargar la pagina, esta se realiza en tiempo real mediante una llamada a la [API de Yahoo! Search][1]. Para el ejemplo echare mano de dos bibliotecas, moo.ajax y prototype.lite, ambas de muy reducido tamaño y que incluyen una serie de funciones de gran utilidad. Comenzando por el código html, todo el funcionamiento de nuestro script se basara en el formulario de búsqueda, crearemos una serie de elementos en el DOM que se añadirán a diferentes partes del formulario. Para esto tendremos que definir algunas identidades en él como veis aquí abajo [code html] [/code] esto es casi todo lo que necesitamos del html. Pasemos a nuestro script [1]: http://developer.yahoo.net/

Continuar leyendo Javascript no intrusivo: moo.ajax...

Comentarios (3)

Microformatos: hCard

2005-10-28T19:13:25+01:00

La idea del microformato surge de la necesidad de adoptar un estandard de maquetado xhtml para definir semanticamente ciertas partes del contenido que por norma siempre señalaremos de la misma manera, por ejemplo los datos personales de un individuo. La razon principal para implementar este tipo de maquetado, es la de permitir que estos datos sean facilmente reconocidos y facilitar su disponibilidad a la hora de incluirlos en alguna aplicacion. Como la explicación del concepto, al menos a mí, parece un poco espesa, pongamos un ejemplo practico. Existe un estandar reconocido y adoptado por infinidad de aplicaciones que permite agrupar/organizar los datos personales de un individuo, se trata del vCard ([RFC2426][1]), casi la totalidad de los programas de correo son capaces de importar y exportar datos en este formato. Ahora supongamos que incluyo mis datos personales en el weblog, y que ademas quiero ponerselo facil al lector y coloco a su disposicion un fichero vCard para que pueda importarlo a su libreta de contactos. Utilizando el microformato hCard puedo tener disponible ambas cosas simplemente marcado el codigo HTML con una serie de clases previamente definidas como microformato, que permitiran reconocer y extraer estos datos del propio codigo. Evidentemente para extrar estos datos hace falta algun tipo de software programado para ello, como puede ser el favelet publicado por Brian Suda ([X2V][2]). Si quieres ampliar informacion sobre microformatos y sus diferentes aplicaciones, puedes visitar [microformats.org][3] en ingles, o si no se te da la lengua de Shakespeare, tienes el articulo escrito por Manuel G noriega, [Microformatos: la web semantica en minusculas][4] [1]: http://www.ietf.org/rfc/rfc2426.txt [2]: http://suda.co.uk/projects/X2V/ [3]: http://microformats.org/ [4]: http://www.alzado.org/articulo.php?id_art=416

Comentarios (0)

Listas en XHTML

2005-10-16T09:22:16+01:00

Dentro de las etiquetas XHTML tenemos varias que nos permiten definir elementos de listas, basicamente son tres los tipos de listados que pueden ser representados mediante etiquetas: ## Listas de Definiciones Como se puede deducir este tipo de etiquetas se utilizan para crear listados de definiciones, la estructura a seguir para el maquetado seria la siguiente: [code html]

El titulo: La Definicion

[/code] Donde utlizamos la etiqueta como contenedora del bloque y en la que solo se pueden incluir elementos de lista (dt, dd), la etiqueta como titulo de la definicion y la etiqueta como definicion. Estas dos ultimas etiquetas normalmente contendran texto plano, pero podemos incluir casi cualquier etiqueta de maquetado (a, acronym, address, applet, b, basefont, bdo, big, blockquote, br, button, center, cite, code, dfn, dir, div, dl, em, fieldset, font, h1, h2, h3, h4, h5, h6, hr, i, iframe, img, input, isindex, kbd, label, map, menu, noframes, noscript, object, ol, p, pre, q, s, samp, script, select, small, span, strike, strong, sub, sup, table, textarea, tt, u, ul, var) Apple : Pomaceous fruit of plants of the genus Malus in the family Rosaceae. Orange : The fruit of an evergreen tree of the genus Citrus.

Continuar leyendo Listas en XHTML...

Comentarios (3)

Buscando los estandares

2005-09-08T15:21:34+01:00

Hoy en [molly.com][1] , se puede leer una curiosa [comparativa][2] donde se pone en evidencia el poco interes que demuestran los grandes buscadores por adoptar maquetados que cumplan con los estandares web. Curiosamente, el único de los motores examinados en esta comparativa que cumple al 100% con estas reglas es el buscador de MSN, que presenta un maquetado basado en XHTML Strict totalmente valido. Paradojicamente nuestro bienamado Google, parece estar poco o más bien nada interesado en seguir los estandares, aun con el ahorro de ancho de banda que esto les supondria. La verdad es que todo esto hace pensar un poco en si realmente el enfoque que se le ha dado a los estandares web realmente tiene algun futuro, aunque si que es cierto que cada dia se ven más portales y webs corporativas que adoptan este tipo de maquetado, el camino para una implementación total aun tiene lejos su final. [1]: http://www.molly.com/ [2]: http://www.molly.com/2005/09/08/searching-for-standards/

Comentarios (3)

Empezando por la a

2005-05-06T21:53:33+01:00

## La etiqueta a Este pretende ser el primero de una serie de articulos/apuntes sobre lenguaje XHTML y sus diferentes usos y aplicaciones. Como indico con el titulo, empezare por la ``, segun la definicion del W3C, > The `` tag defines an anchor element. An anchor can be used in two ways: > >* To create a link to another document by using the href attribute >* To create a bookmark inside a document, by using the name or id attribute Que en castellano, viene a decir que el encargado de crear enlaces, ya sean a páginas externas, como a las diferentes partes de un documento. Indudablemente es uno de las etiquetas html/xhtml más utilizadas y con menos diferencias en cuanto atributos se refiere.

Continuar leyendo Empezando por la a...

Comentarios (2)

Meta Contenidos

2005-03-25T09:53:27+01:00

## Meta Información En todo documento que se quiera usar en la web, hay que diferenciar dos tipos de información, el contenido y el meta-contenido. Por contenido entendemos la información que compone el documento. La meta-información nos describe el documento en si, nos facilita su comprensión. Podemos definir los tipos de meta-información de la siguiente manera: * Los contenidos y objetivos del documento. * La relación entre el documento y otros. * El tipo de documento, imagenes, texto... * Información que facilite la navegación del usuario por los contenidos. * Información que ayude a los programas a procesar el documento .

Continuar leyendo Meta Contenidos...

Comentarios (3)