XHTML (i)

Antes de intentar cosas complejas en el entorno web deberíamos preocuparnos de entender mínimamente las bases del lenguaje que vamos a utilizar para desarrollar documentos web, así que vamos a comenzar por entender el XHTML y sus peculiaridades.

La primera duda que nos puede surgir al intentar desarrollar algo en web es; "HTML o XHTML?"

Veamos las diferencias.

Tanto uno como otro surgen del SGML; HTML es "hijo" de SGML y XHTML es "nieto" de SGML, ya que su "padre" es XML, este sí, descendiente directo de SGML.

Vemos entonces que son de la misma familia, pero que cada uno pertenece a una rama diferente y por tanto tiene sus características y peculiaridades diferentes y específicas.

Ambos son lenguajes de "etiquetas" (tags) pero sus reglas no son las mismas; HTML es mucho más relajado en cuanto a normativa sintáctica y nos permite hacer cosas mal, pero XHTML hereda de su "padre" XML una cierta manía "formal" e impide hacer mal muchas cosas que HTML permite.

La principal diferencia entre ambos lenguajes es la siguiente; XHTML separa el contenido de la forma y HTML no lo hace.

En XHTML definimos los contenidos, la forma se la dará el CSS aplicado, mientras que en HTML la forma y el contenido están mezcladas de forma confusa e inconsistente.

Esta es la principal característica que nos hará decidirnos por un lenguaje u otro; necesito generar contenidos dinámicos independientes de la forma, o me da igual?

HTML incluye entre sus etiquetas muchas destinadas a dar forma a sus contenidos; fuente, tamaño, negrita, cursiva, etc.

XHTML sustituye esas etiquetas por otras destinadas a dar sentido a sus contenidos; titular, subtitular, destacado, etc.

Es una aproximación muy diferente: en el caso del XHTML decimos si un contenido es un titular, subtitular, cuerpo normal, si debe ser destacado, etc, mientras que en HTML estamos diciendo que ese contenido va en fuente Arial Negrita de 14, en Cursiva, etc. Es muy diferente.

Al diseñar en HTML estamos mezclando conceptos; los contenidos y su representación, mientras que al diseñar en XHTML dividimos el problema en dos partes muy diferenciadas, por una parte definimos los contenidos y su significado, y por otra parte definimos su representación (CSS).

Nosotros, como diseñadores de soluciones Velneo, contamos con la misma dicotomía en nuestro sistema; por una parte la bd (contenidos), y por otra la apariencia (objetos visuales), así que adoptaremos XHTML + CSS como nuestro modelo de desarrollo web.

Las etiquetas (tags) que vamos a poder utilizar son las siguientes:

a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var

Aparte de estas existen otras propias del HTML, ya obsoletas, y cuyo uso queda prohibido de ahora en adelante, y son:

applet, basefont, center, dir, font, isindex, menu, s, strike, u

No son muchas etiquetas, y su uso nos hará acostumbrarnos a todas y cada una de ellas hasta dominarlas completamente.

Veamos cuál va a ser nuestra unidad mínima de trabajo: el ELEMENTO.

Un elemento está compuesto por:

• Una apertura de etiqueta
• Ninguno o más atributos
• Un texto
• Un cierre de etiqueta

Ejemplo:

<p class="estandard">Texto del párrafo</p>

donde

• <p> es la apertura de etiqueta
• class="estandard" es un atributo
• Texto del párrafo es el texto contenido entre la etiqueta de apertura y la de cierre
• </p> es el cierre de etiqueta

Aquí quiero comentar unas diferencias muy notables entre HTML y XHTML:

• en HTML estamos acostumbrados a abrir etiquetas, pero puede ser que no a cerrarlas. XHTML obliga a cerrar siempre una etiqueta que se abre.
• en HTML puede ser que funcionen etiquetas mal anidadas (ej; <p><a href="www.loquesea.com">loquesea.com</p></a>), pero XHTML nos obliga a seguir un orden estricto a la hora de cerrar etiquetas; el mismo por el que se han abierto pero a la inversa, en nuestro ejemplo (<p><a href="www.loquesea.com">loquesea.com</a></p>).
• tanto los descriptores de etiqueta como sus atributos como los nombres de los atributos van en minúsculas. Aquí vemos que el editor HTML de Velneo es eso, un editor HTML que no XHTML.
• los valores de los atributos van entre comillas, no como en HTML.

Inciso. Si el editor HTML de Velneo no es ideal, cuál deberíamos usar?

• Word NO. Word inserta una serie de etiquetas "basura" que fundamentalmente engordan nuestros documentos y lo hacen no compilante, ilegible e inservible.
• Dreamweaver. Se puede usar con conocimiento de causa, es decir, debemos conocer XHTML y saber eliminar toda la basura que introduce el programa en nuestros documentos.
• FrontPage NO. Hablamos de editores HTML, por favor...
• Alguno gratuito. Lo mismo que con Dreamweaver, con conocimiento de causa y con la escoba preparada.

El editor ideal HTML es nuestro cerebro, nuestros conocimientos de XHTML y nuestras manitas, que junto con un editor de textos como por ejemplo el Bloc de notas de Windows, nos permitirán confeccionar documentos estructurados, compilantes, legibles, usables y corectos.

Una vez entendida la unidad mínima de trabajo, el ELEMENTO, veamos su clasificación.

Los elementos se clasifican en:

• Elementos en línea (a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var)
• Elementos de bloque (address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, nos-cript, ol, p, pre, table, ul, además de dd, dt, frame-set, li, tbody, td, tfoot, th, thead, tr)

Los elementos button, del, iframe, ins, map, object, script, pueden ser considerados tanto como en línea como de bloque dependiendo de las circunstancias.

Una vez vistos estos conceptos básicos pasemos a la parte fundamental: estructurar nuestros documentos.

Todos nuestros documentos tendrán siempre tres secciones básicas y fundamentales:

• Inicio y fin de documento. Viene determinado por las etiquetas <html> y </html>. Irán siempre (salvo determinadas especificaciones que veremos más adelante) al principio y fin del documento.
• Cabecera. Encerrada entre <head> y </head>. Aquí definiremos elementos como el Título del documento, metainformación sobre el documento, links a documentos css o javascript, etc.
• Cuerpo. Encerrado entre <body> y </body>, que define el contenido de nuestro documento y supondrá entorno a un 90% de nuestro documento.

Como el 90% del trabajo lo tenemos en el cuerpo del documento veamos cómo MARCAR correctamente nuestros contenidos para darles sentido semántico.

PÁRRAFOS (<p></p>)

Un párrafo es, como hemos visto, un elemento de bloque y como tal ocupa por defecto la anchura disponible en la ventana del navegador.

No tiene atributos específicos pero se le pueden asignar toda una serie de atributos básicos, de internacionalización y de eventos.

Por similitud con un documento Word, diremos que un párrafo es aquello comprendido entre el inicio de una línea de texto y un "Intro".

Inciso. Word es quizás el editor de textos más utilizado del planeta y por ende el peor utilizado también. Cuando empezamos a escribir un texto con Word, tecleamos letras y espacios hasta llegar a un punto y aparte. Esto es un párrafo. Muchos usuarios introducen "Intros" adicionales para separar un párrafo del siguiente, pero esto no se hace así: hay una propiedad del documento llamada separación entre párrafos que se usa para tal fin. No hay que introducir "saltos de línea" o "párrafos en blanco" para separar párrafos, basta con definir la separación entre párrafos y Word ya sabe lo que tiene que hacer cuando pulsamos "Intro".

Un párrafo empieza por <p> y termina </p>.

TÍTULOS DE SECCIONES (<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5> y <h6></h6>)

Es habitual que el contenido de nuestro documento se estructure a su vez en secciones de mayor o menor importancia. Para indicar los títulos de dichas secciones usaremos las etiquetas h, siendo h1 la de mayor importancia, reservada normalmente para el Título de la sección, h2 para el subtítulo, y así sucesivamente para subsecciones del documento de cada vez menor importancia dentro del mismo.

Cualquier navegador web interpreta de por sí estas etiquetas destacándolas del resto de texto del documento otorgándoles ciertas características de tamaño de fuente y negrita o cursiva.

También son elementos de bloque al igual que los párrafos.

Con estas dos simples etiquetas ya podemos estructurar nuestro contenido en secciones de mayor o menor importancia, y a su vez dividir el texto dentro de cada sección en párrafos. Básico pero fundamental.

Ahora veamos cómo marcar el texto dentro de cada párrafo o sección para indicar que va en negrita, cursiva, es una anotación, una corrección, una cita a otro documento, etc.

ÉNFASIS (<em></em>) y MÁS ÉNFASIS (<strong></strong>)

Son elementos en línea a diferencia de los dos anteriores y se utilizan para destacar un texto respecto del resto.

• <em></em> indica que el texto encerrado tiene mayor importancia que el resto y los navegadores lo suelen representar en cursiva.
• <strong></strong> indica que el texto encerrado es de la mayor importancia dentro del documento y los navegadores lo suelen representar en negrita.

Inciso. Elementos de bloque y elementos en línea. La principal diferencia entre unos y otros es cómo ocupan el espacio dentro del documento; los elementos de bloque provocan el salto de línea (empiezan en nueva línea) y ocupan el ancho disponible independientemente de su longitud, mientras que los elementos en línea no provocan salto de línea y ocupan el ancho necesario para mostrar su contenido.

MODIFICACIONES (<ins></ins> y <del></del>)

Para indicar las diferentes modificaciones introducidas en un documento disponemos de estas dos etiquetas.

• <ins></ins> se emplea para indicar la inserción de nuevo contenido en el documento.
• <del></del> se emplea para indicar el borrado de cierto contenido.

Ambas etiquetas disponen de dos atributos específicos que son:

• cite="url". Para indicar la fuente explicativa de la modificación.
• datetime="fecha". Para indicar la fecha y hora de la modificación.

Los navegadores suelen representar las inserciones como texto subrayado y los borrados como texto tachado.

Ambos son elementos en línea.

CITAS TEXTUALES (<blockquote></blockquote>)

Este elemento se utiliza para incluir citas textuales de otros documentos en el actual.

Dispone del atributo cite="url" para indicar la referencia al texto original citado.

Los navegadores suelen representar este elemento con un cierto margen a la izquierda.

Es un elemento de bloque.

AUTOR CITADO (<cite></cite>)

Este elemento se utiliza para declarar el autor de una cita. La diferencia con blockquote es que mientras esta contiene la cita en sí, cite denota al autor de la cita.

Es un elemento en línea.

ABREVIATURAS (<abbr></abbr>), ACRÓNIMOS (<acronym></acronym>) y DEFINICIONES (<dfn></dfn>)

Son elementos en línea con el atributo title="texto" que se usan para abreviaturas, siglas y definiciones de palabras "extrañas" usadas en el documento y así poder indicar su significado.

Los navegadores las suelen representar como texto subrayado por puntos, y suelen mostrar un texto alternativo al situar el ratón sobre ellas (el indicado en el atributo title).

SALTO DE LÍNEA (<br />)

La etiqueta <br> es un tanto especial. Sirve para forzar un salto de línea en nuestro documento.

Es una etiqueta vacía y como tal debe abrirse y cerrarse consecutivamente, pero para evitar tener que escribir <br></br> se abrevia como <br />.

Debemos limitar su uso a ocasiones bastante especiales y no abusar; seguro que lo que queremos hacer se puede hacer de otra manera mucho mejor.

Inciso. Los espacios en blanco sobrantes dentro de un documento (tabulaciones, espacios en blanco consecutivos) son ignorados por HTML salvo que indiquemos lo contrario. Para introducir un espacio en blanco debemos recurrir a la entidad &nbsp;

TEXTO PREFORMATEADO (<pre></pre>)

Hay veces que debemos mostrar un texto dentro de un documento "tal cual se ha escrito", con todos sus espacios, tabulaciones, saltos de línea, etc (por ejemplo un objeto texto de la bd de Velneo). Para estos casos especiales usaremos la etiqueta <pre>.

Es un elemento de bloque cuyo ancho no se ajusta a la ventana del navegador, así que puede forzar la aparición del scroll horizontal en nuestras páginas.

Los navegadores suelen representarlo con un tipo de letra de ancho fijo.

CÓDIGO (<code></code>)

Cuando dentro de un documento hemos de representar código html o de otro tipo que haga uso de las entidades específicas de HTML usaremos la etiqueta <code>.

Es similar a <pre> con la salvedad de que no respeta los espacios en blanco y es un elemento en línea.

LISTAS ORDENADAS (<ol></ol>) y NO ORDENADAS (<ul></ul>)

Cuando hemos de representar en nuestro documento una sucesión de elementos ordenados (numerados de alguna forma) o sin orden aparente, usaremos las listas.

Cada elemento de una lista irá encerrado entre <li> y </li>.

Son elementos de bloque y los navegadores suelen representarlas indentadas y usando números para los elementos de una lista ordenada, y viñetas gráficas para las lista no ordenadas.

Inciso. Este tipo de elementos, veremos más adelante que nos servirá para definir nuestras estructuras de navegación (menús) usando un poco de CSS.

Y por hoy hasta aquí!

En la próxima entrega veremos cómo introducir tablas, imágenes, enlaces y otros elementos útiles dentro de nuestros documentos.

Life is soft!!

Fondo pantalla 004

Trasteando en flickr la otra noche me topé con algunas fotos de Velneo.

Me llamó la atención una de ellas (esta), porque es bastante profesional y la pose "mola mazo".

Esa pose me recordaba algo y no sabía muy bien el qué. Rebusqué entre mi colección de fotos hasta que lo encontré. Lo vi claro al momento y ni corto ni perezoso me puse a ello con el potochof.

Aquí dejo el resultado; un nuevo fondo Velneo con el X-taff directivo al completo.


Vaya con el mayor respeto y cariño. Entiéndase bien, eh?

Life is soft!!

Chrome

La gente de Google son los más listos y oportunos del planeta, y gracias a ello aglutinan al mayor número de usuarios posible.

Un estudio del comportamiento del usuario estandard de internet reveló que la inmensa mayoría de ellos pensaban que Google era internet; su página de inicio era Google y para acceder a un dominio.com lo buscaban literalmente en el famoso buscador; no lo escribían en la barra de direcciones del navegador, lo buscaban en Google y pinchaban sobre el resultado de la búsqueda.

Esto ha llevado a Google a la omnibarra de direcciones que completa automáticamente las url's según tus últimas visitas o búsquedas en Google.

Saben y almacenan tus costumbres de navegación, de forma que te las pueden mostrar en una página especial con tus webs más habituales o una sugerencia de búsqueda en Google.

Muy listos.

Fruto del uso que la gente ha ido haciendo del buscador Google, han sabido optimizar y simplificar la experiencia del usuario, llegando a decisiones de diseño como el que las pestañas estén a un nivel superior e independiente, cada una con sus propios controles de navegación.

La decisión más potente y arriesgada de Google con su navegador Chrome ha sido incluir las Gears como código abierto y libre, para que cualquier otro navegador comercial las pueda usar y adoptar como propias, de forma que con el tiempo todos los navegadores sean como Chrome.

Al haberlo desarrollado desde cero cuando ya están establecidos los estándares de la web para los próximos años, se han asegurado una fiabilidad que los va a posicionar en lo más alto muy rápidamente, y han aprovechado para instaurar una nueva política con los plugins de navegador que cualquiera deberá cumplir en sus futuros desarrollos si quiere funcionar con Chrome o sus derivados, es decir, con cualquier futuro navegador.

Muy oportunos.

Punto y aparte, la campaña de publicidad del navegador; el cómic al respecto me parece fantástico y muy acertado. Explica todo de todo del nuevo navegador, siendo una herramienta muy potente a la hora de convencer a los desarrolladores en el uso y disfrute de las capacidades del navegador.

La mayor alianza actual del navegador es con Java V8, el nuevo motor de java optimizado que soluciona de forma brillante temas de optimización y rendimiento. No tiene rival.

A nivel de seguridad parece ir un paso por delante del resto al considerar cada pestaña de navegación como un proceso independiente, dando mayor estabilidad a la herramienta, y el haber hecho un espacio de memoria de ejecución independiente por pestaña, resuelve la estabilidad del resto de pestañas en ejecución, impidiendo la interacción de unas con otras; que un proceso de pestaña da problemas? se mata esa pestaña y el resto del navegador sigue funcionando, la memoria reservada para esa pestaña se libera y el navegador sigue funcionando de manera eficiente, no importa cuántas horas o pestañas abiertas mantengas.

Muy listos.

La experiencia de usuario que he podido reunir en este tiempo es muy positiva; "es sencillo, con todo lo necesario y nada más", perfecto.

Por ahí tienen ganado al usuario, y por otra parte, con el V8, las Gears y el código abierto, tienen ganado en poco tiempo al mercado de desarrolladores.

En fín, mi más sincera enhorabuena a Google por su exitosa incursión en el mundo del software de navegación. Si hasta ahora para el 90% de los usuarios internet era Google, a partir de ahora TODOS pensarán lo mismo.

Life is soft!!!

Google & Velneo (ii)

Desarrollas aplicaciones web?

Usas bibliotecas javascript como jQuery, prototype, script.aculo.us, MooTools o dojo?

Si es así y no quieres perder la cabeza manteniendo las versiones usadas en todos tus proyectos, Google ha sacado un nuevo servicio en GoogleCode que sirve las últimas versiones de todas estas bibliotecas.

Sólo necesitas enlazar con ellas a través de tu APIkey y Google te las sirve, además comprimidas, de forma que su carga está optimizada, y tus páginas liberadas de un gran peso.

Aquí os dejo el enlace

http://code.google.com/apis/ajaxlibs/

Life is soft!!!

Google & Velneo

Hace tiempo que no posteo nada, y es que estoy tan ocupado desarrollando soluciones de gestión empresariales y web con Velneo V6 que no tengo casi tiempo para más.

Esta noche he sacado un hueco y me gustaría comentar mis últimas experiencias de desarrollo en Velneo V6 integrando soluciones Google.


Está claro que Velneo V6 deja bastante que desear a nivel gráfico, informes, conectividad, etc, pero he descubierto que se lleva muy bien con Google para paliar esas deficiencias.

A nivel de informes, la herramienta que incorpora Velneo V6 es bastante limitada, pocos objetos y poco configurables. Desde hace tiempo intento inculcar en la comunidad el concepto de informes html en Velneo. Son informes xhtml+css lanzados desde la aplicación.

Este tipo de informes son al fin y al cabo como cualquier página web lanzada desde Velneo; un proceso accesible web, que como tal tiene acceso a todas las tablas de la aplicación para componer un informe sin limitaciones impuestas por el origen del proceso; ningún origen, cabecera, líneas, da igual, estamos en un proceso y podemos hacer lo que queramos.

En el proceso podemos cargar datos de una tabla, de otra, de muchas..., componemos el html resultante a base de componentes html, y el resultado se devuelve como Añadir retorno texto.

La maquetación corre a cargo del css que da forma al xhtml generado, y ya tenemos un informe (página html) que se previsualiza siempre y se puede imprimir a gusto del usuario.

Los informes nativos Velneo disponen de gráficos, rejillas de histórico, etc, para su composición, y a nivel de gráficos encontré muy gratificante el API de GoogleCharts.

Es un API gratuita, sólo hay que tener una cuenta Google, y se ataca de forma muy sencilla:

1. Recopilas los datos a representar
2. Los escalas y trasladas en función del número de datos y la codificación correspondiente
3. Eliges el tipo de gráfico
   
4. Rellenas datos accesorios; ejes, rótulos, títulos, tipos de punto, línea, etc
5. Mandas la petición a GoogleCharts y te devuelve un png del gráfico solicitado
6. Este png se inserta como img dentro del informe html y a correr

Una de mis ocupaciones anteriores consistía en desarrollar soluciones GIS personalizadas usando MapInfo. Es un entorno muy profesional y especializado que necesita de técnicos formados para su mantenimiento.

Hace años integré MapInfo con Velneo, pero era una solución muy cara a nivel de licencias de desarrollo. Investigando GoogleCode encontré el API de GoogleMaps y GoogleEarth, gratuítas igualmente, que permiten mandar un formato KML a Google, que no es más que un formato XML con los datos a representar gráficamente en el mapa, y recibes un formáto gráfico mapa de GoogleMaps o GoogleEarth interactivo que muestra tus datos en el mapa.

Su uso es tan sencillo como el de GoogleMaps y no son necesarios técnicos especialistas para su mantenimiento ya que representa automáticamente lo que hay en la base de datos y para ello sólo es necesario rellenar un formulario de alta o modificación.

Y es todo gratuíto mientras sea público.

Así surgió mi primer GIS con Velneo. GoogleMaps se encarga de representar los datos de Velneo en el mapa, y si lo quieres más espectacular le encargas la tarea a GoogleEarth.

A nivel de conectividad a la hora de compartir documentación, GoogleDocs nos permite generar documentos "Word", "Excel", "PowerPoint" en la nube y compartirlos con los usuarios autorizados.

Hay API's disponibles para todo ello en GoogleCode, fáciles de estudiar e implementar en Velneo y que dotan a nuestras aplicaciones de nuevas funcionalidades con un costo realmente bajo: GRATIS.

Así sigo ampliando las capacidades de la herramienta de desarrollo que elegí hace años, Velneo, de la cual aún no he encontrado el techo (esto no lo puedo hacer), y sigo dando años de vida a soluciones V6, utilizado código abierto y gratuíto, en este caso el de Google.

Life is soft!!!

vTiger

Siempre se ha dicho que Velneo peca de una interfaz de usuario muy pobre y puede que sea así.

Disponemos de pocas posibilidades a la hora de hacer un interfaz vistoso, con muchos efectos y colores, pero si nos esmeramos usando esas pocas posibilidades podemos obtener algo bastante al gusto del usuario.

Cuando miro ahora alguna de mis primeras aplicaciones me parecen francamente horribles, en cuanto al interfaz de usuario al menos; fuentes poco acertadas, colores demasiado llamativos, disposición de elementos poco pensada, etc, en definitiva, una mala experiencia para el usuario.

El interfaz y la usuabilidad de las aplicaciones es un tema muy importante, y más ahora que viene la V7 multiplataforma y vamos a poder entrar en el mercado de usuarios acostumbrados a otro aspecto para sus aplicaciones; linux, mac, etc.

Si nos lo proponemos, con una cuidadosa preparación y unos pocos elementos podemos ir adaptando el aspecto de nuestras aplicaciones hacia ese nuevo mercado que se nos abre.

El siguiente ejemplo es un formulario V6 hecho a partir de una captura de pantalla del OSX-Tiger, tratado con mucho mimo con Photoshop para que no pese, y ejecutado con la V6 en un Windows 2000 Professional.


Usa los colores básicos del OSX-Tiger, fuentes similares, botones al estilo Mac y disposición de elementos similar al OSX-Tiger, para no despistar al usuario Mac.

Así que, aunque no podemos hacerlo todo, sí que podemos hacer bastantes cosas para que el usuario tenga una experiencia agradable y no se encuentre perdido en nuestras aplicaciones Velneo.

Life is Soft!!!

Usabilidad web

Como mi especialidad dentro de Velneo es hacer webs, la usabilidad es un tema que me preocupa sobremanera.

Un buen amigo me ha dejado un libro de Steve Krug titulado "No me hagas pensar".


Es un libro sobre usabilidad web muy fácil de leer, por la sencillez con la que cuenta un trabajo tan complicado a veces, por el lenguaje desenfadado y directo que utiliza, y por lo corto, claro , bien estructurado y por las ilustraciones gráficas que muestra. Es usable.

El trabajo de Steve Krug consiste en ver un sitio web y deducir si es fácil de manejar, redactar un informe con los problemas que presenta el sitio, sugerir posibles soluciones, y ayudar al equipo de diseño web a resolver los problemas e implantar las soluciones. Además le pagan por ello!!!

El libro está lleno de buenos consejos que luego parecen de lo más obvio y trivial, pero que no lo serían si no te los dijese alguien. Así es la usabilidad web.

Me gustaría dejaros aquí, a modo de extracto, algunas perlas que podemos encontrar en el libro:

• No me hagas pensar. El título y resumen perfecto del libro.
• Si algo es complicado de utilizar, simplemente no lo uso demasiado. Un comentario de la mujer de Steve.
• Elimina la mitad de las palabras en todas las páginas, luego prescinde de la mitad de lo que haya quedado.
• Hay que evitar los interrogantes del usuario: dónde estoy? por dónde empiezo? dónde está ...? qué es lo más importante? por qué lo han llamado así?
• Los usuarios no leen las páginas, simplemente les echan un vistazo. No hay que crear literatura de calidad si no una valla publicitaria que se verá a 100 Km/h.

Cinco claves básicas:

1. Jerarquía visual (h1, h2, h3, elementos similares agrupados, bloques englobados)
2. Uso de las convenciones (déjà vu, familiaridad tranquilizadora)
3. División en zonas claramente definidas (esto son las cosas que se pueden hacer en el sitio, esto son los links y esto es lo que me quieren vender)
4. Sobre qué se puede hacer click (el usuario quiere hacer click, dejemos bien claro sobre qué puede hacer click)
5. Minimizar el ruido visual (todo es ruido visual hasta que se demuestre lo contrario)

• Al usuario no le importa el número de clicks que tenga que hacer si hacerlo es sencillo y le ofrece la confianza continuada en que está en el buen camino.
• Omítanse las palabras innecesarias. Esto conlleva además una reducción de ruido visual, realza el verdadero contenido y permite ver más de un sólo vistazo.

El resto del libro profundiza más en aspectos técnicos detallados sobre cómo poner en práctica estos consejos, pero eso ya os lo dejo a los expertos en usabilidad.

Que usted lo use bien!

Betatester V7

Para celebrar la apertura al público en general de la zona de betatesters de V7 el próximo 19 de Mayo de 2008, y aprovechando que hace mucho tiempo que no hacía un fondo de pantalla Velneo, aquí os dejo el que he realizado para la ocasión.


Espero que os guste ( sobre todo la beta de V7 ;-D ).

Life is soft!

Errores en Velneo

Contrariamente a lo que puede sugerir el título de esta entrada del blog, no voy a denunciar un error o bug de Velneo como entorno de desarrollo, voy a exponer un error de programación en el que ya he caído más de una vez, así a vosotros os servirá de experiencia y a mí de recordatorio para no volver a repetirlo.

Un Cargar Lista por un índice de tipo Palabras o Trozos de palabras, resolviendo el índice por alguna de sus partes no funciona.

No es que no funcione, es que parte el motor.

Life is soft!

I had a dream

Anoche tuve un sueño, un sueño que no puedo olvidar.

Soñé que tenía delante de mí una herramienta capaz de enlazar con esta tabla de este Oracle, con esta de este SQLServer y con esta otra de MySql.

Una vez en mi proyecto podía establecer entre ellas las relaciones a que estoy acostumbrado en Velneo; aquí un puntero a maestro, aquí una actualización y aquí un puntero indirecto real.

Soñé que podía hacer un formulario de edición diciendo; de esta tabla, con estos campos, chas!, ya los tengo.

Ahora el aspecto del formulario que tire de este CSS para aplicaciones, chas!, ya tiene aspecto.

Soñé que ponía en marcha mi aplicación, me salía el formulario y podía buscar sobre cualquier campo del mismo sólo con poner algo en un campo y darle a buscar, chas!, rejilla de resultados.

Soñé que en tiempo de ejecución podía modificar el aspecto de las rejillas y los informes para sacarlos como más me convenía según el caso.

Y lo más fuerte, la parte donde el sueño casi pasa a ser una pesadilla; ahora lo quiero en la web, y chas!, sin hacer nada mi aplicación de escritorio se renderizaba en la web tal cual.

Será un sueño?, una quimera?

Será V7?

Espero con ansias que sí.

Life is soft!

Fechas en Velneo

Muchas veces, por ejemplo al realizar una agenda donde apuntar eventos por día, me he encontrado en Velneo con la siguiente duda:

Pero para eso necesito tener todos los días de todos los años generados?

Afortunadamente en la mayoría de ocasiones la respuesta ha sido NO.


No es necesaria una tabla maestra Años y una submaestra Días para una agenda.

Lo que suelo hacer es generar al vuelo, en una tabla en memoria los registros que necesito mostrar como calendario. Es como las famosas tablas "Dummy" de Fran, pero para fechas.

Dicha tabla en principio sólo necesita un campo Código autonumérico y un campo Fecha. En ella daremos de alta por proceso las fechas compredidas en el intervalo fecha_desde - fecha_hasta necesarias para la visualización del periodo de la agenda deseado.

Adicionalmente podemos disponer diversos campos fórmula alfabética que nos muestren cada fecha ya formateada según las necesidades.

Veamos algunas posibilidades de fecha formateada en Velneo.

Supongamos una fecha; 2-01-2008

Utilizando la función fFormatFecha(fecha, szFormato) donde fecha es el campo o variable fecha que vamos a transformar y szFormato es la subcadena de formato que vamos a aplicar a esa fecha para darle la forma deseada, podemos obtener una enorme diversidad de formas para la fecha.

Disponemos de los siguientes formateadores:

&d -> Visualiza el día del mes con uno o dos dígitos, según corresponda (1 - 31)

En nuestro caso sería: 2


&e -> Visualiza el día del mes siempre con dos dígitos (01 - 31)

En nuestro caso sería: 02


&L -> Visualiza, en Español, el día de la semana en texto; Lunes, Martes, ...

En nuestro caso sería: Miércoles


&A -> Visualiza, en Inglés, el día de la semana en texto; Monday, Tuesday, ...

En nuestro caso sería: Wednesday


&l -> (L minúscula). Visualiza, en Español, el día de la semana abreviado a tres letras; Lun, Mar, ...

En nuestro caso sería: Mie


&a -> Visualiza, en Inglés, el día de la semana abreviado a tres letras; Mon, Tue, ...

En nuestro caso sería: Wed


&m -> Visualiza el número del mes con uno o dos dígitos, según corresponda (1 - 12)

En nuestro caso sería: 1


&n -> Visualiza el número del mes siempre con dos dígitos (01 - 12)

En nuestro caso sería: 01


&K -> Visualiza, en Español, el mes en texto; Enero, Febrero, ...

En nuestro caso sería: Enero


&B -> Visualiza, en Inglés, el mes en texto; January, February, ...

En nuestro caso sería: January


&k -> Visualiza, en Español, el mes en texto abreviado a tres letras; Ene, Feb, ...

En nuestro caso sería: Ene


&b -> Visualiza, en Inglés, el mes en texto abreviado a tres letras; Jan, Feb, ...

En nuestro caso sería: Jan


&j -> Visualiza el día del año de un campo fecha (1 - 366)

En nuestro caso sería: 2


&u -> Visualiza el día de la semana en número dentro del rango 1 a 7 siendo 1=Lunes

En nuestro caso sería: 3


&w -> Visualiza el número del día de la semana dentro del rango 0 a 6 siendo 0=Domingo

En nuestro caso sería: 3


&W -> Visualiza el número de la semana del año dentro del rango 0 a 51

En nuestro caso sería: 1


&U -> Visualiza el número de la semana del año dentro del rango 1 a 52

En nuestro caso sería: 1


&x -> Formatea la fecha en la forma que el sistema esté configurado

En mi caso sería: miércoles, 02 de enero de 2008


&Y -> Visualiza el año con todos sus dígitos

En nuestro caso sería: 2008


&y -> Visualiza el año sin siglo con uno o dos dígitos, según corresponda

En nuestro caso sería: 8


&z -> Visualiza el año sin siglo siempre con dos dígitos

En nuestro caso sería: 08


Todos estos formateadores también están disponibles al seleccionar un campo fecha en el editor de fórmulas, dentro del apartado Subcadena de formato (opcional) - Opciones.

Al ser una subcadena, los formateadores admiten cualquier símbolo que podamos teclear dentro de la cadena.

Así, por ejemplo, podríamos mostrar nuestra fecha 2-01-2008 como 08/01/02, Wed. usando la función siguiente

fFormatFecha(2/01/2008, "&z/&n/&e, &a.")

Fácil, como todo en Velneo.


Ahora veamos algunas combinaciones de funciones que nos facilitarán mucho la vida a la hora de trabajar con fechas.


En qué semana del año me encuentro?

fFormatFecha( fHoy(), "&U")


En qué día del año me encuentro?

fFormatFecha( fHoy(), "&j")


Qué día de la semana es el primer día del mes actual?

fFormatFecha( fFecha( 1 ), "&L")


Y el último día del mes que viene?

fFormatFecha( fFecha( fDiasDelMes( fMes( fHoy() ) + 1, fAño( fHoy() ) ), fMes( fHoy() ) + 1 ), "&L")


Y así podríamos seguir complicándolo o simplificándolo, depende de cómo se mire, tanto como deseemos o necesitemos.

Espero que esto ayude a resolver algunas dudas al respecto de las fechas en Velneo.

Life is Soft!

Espero a V7 o no?

Comentando el tema con colegas que usan el entorno de desarrollo Velneo me encuentro siempre con la misma duda recursiva:

Me espero a que salga V7 para hacer esto no?

Mi respuesta es simple:

Si necesitas multiplataforma, multiprocesador, balanceo de carga sin artificios, y desarrollos a nivel mundial multilenguaje con cientos o miles de usuarios atacando simultaneamente la bd desde el vClient, esperate.

Si no es así, lo que estás haciendo es perder una oportunidad de negocio.

V6 es tan válida como lo será V7 para cualquier desarrollo que no deba cumplir con alguno de los requisitos citados anteriormente.

Si no necesitas nada de lo comentado y estás esperando V7 para acometer el desarrollo de una aplicación Velneo estás perdiendo tiempo y dinero, porque mucha gente que ya lo tiene claro está desarrollando en V6 esas soluciones.

Si eres el responsable informático de una gran empresa de desarrollo o de un departamento informático de una corporación de la administración local y necesitas tomar una decisión sobre la herramienta de desarrollo a utilizar, teniendo en cuenta que vas a tener cientos o miles de usuarios atacando la misma bd, o que vas a tener que responder sobre la escalabilidad de las soluciones a gran nivel, o que la política de infraestructuras te obliga a tener servidores multiprocesador con balanceo de carga automático, entiendo que esperes a la salida de V7 para tomar una decisión acertada, yo también lo haría.

Si no es así, ten en cuenta que existen miles de soluciones ya desarrolladas sobre V6 que dan rienda suelta a las posibilidades de la herramienta, y satisfacen de sobra los requisitos de los clientes.

Si es así y no tomas la decisión ya de entrar en V6 estás, sinceramente, perdiendo tiempo y dinero.

No es quizás muy conocido y sabido, pero hay soluciones Velneo V6 dando servicio a multinacionales con delegaciones remotas en diferentes países en diferentes idiomas, aplicaciones sirviendo hasta 400 o 500 puestos de trabajo concurrentes, tablas con millones de registros manejadas de forma diaria y habitual sin ningún tipo de problema, soluciones críticas de ventas online basadas en el modelo Velneo, incursiones radicales en el entorno CAD-CAM servidas con Velneo y dando servicio a máquinas de producción, aplicaciones Velneo conectadas con diversos webservices para vuelos, hoteles, alquiler de cohes, etc...

La salida de V7 al mercado será un shock en el mundo del desarrollo, pero cualquiera que no esté ya acostumbrado a V6 y no tenga hecho el cambio de chip Velneo perderá un tiempo precioso en su formación y adaptación a la herramienta, cosa que ya tendría adelantada si hubiese empezado con la V6.

V7 abrirá un nuevo y enorme abanico de posibilidades al desarrollo de aplicaciones informáticas de gestión, le dará un vuelco a la interface gráfica de nuestras aplicaciones, multiplicará por 100 o por 1.000 el rendimiento gracias al multihilo inteligente, permitirá aplicaciones distribuidas multiservidor gracias al nuevo concepto de cajas, y dará lugar a nuevos e impresionantes servicios alrededor de la herramienta.

Pero con V6 y la participación de empresas especializadas del sector, esas soluciones ya son parcialmente posibles en V6.

Esas empresas y desarrolladores ya llevan una gran ventaja a cualquiera que no se haya decidido a dar el salto ya. Y cuando salga V7, la migración y adaptación de sus soluciones V6 a V7 será mucho más rápida y menos traumática que la de cualquier otro que no dominase ya V6.

Aún esperas V7 para decidirte? Yo NO.

Life is Soft!

Copias de seguridad

En las aplicaciones Velneo que instalo en clientes siempre monto un sistema de copias de seguridad programado en el vServer de la siguiente forma.

Creo una carpeta CopiaSeguridad, a poder ser en un disco físico diferente de aquel donde reside la aplicación (una segunda unidad, una unidad mapeada, etc). Si no puede ser en otro disco, la creo en un directorio diferente al de la aplicación.

Dentro de esa carpeta creo esta serie de subcarpetas; 01-lunes, 02-martes, 03-miercoles, 04-jueves, 05-viernes, 06-sabado y 07-domingo. Le pongo ese nombre a las carpetas para que salgan ordenadas alfabéticamente por día de la semana.

Creo una serie de tareas programadas en el servidor para que semanalmente se realice una copia de seguridad en la carpeta correspondiente; una para los lunes en la carpeta 01-lunes, otra los martes en la carpeta 02-martes, etc.

Como hora de la copia elijo un horario libre de carga y enganches en el servidor, normalmente al finalizar la jornada laboral o por la noche.

Así planteado, el lunes por la noche se realiza copia de seguridad de los datos de la aplicación en la carpeta 01-lunes, el martes en la 02-martes, etc, de forma que si las cosas fuesen muy mal, y nadie se diese cuenta, podría tirar hasta de siete copias de seguridad con un día de diferencia entre cada una de ellas, es decir tengo un colchón de una semana de datos.

Como la copia que realiza vServer es sólo de datos (vcs) hay que ingeniarse un sistema para junto con los datos guardar también la versión del mapa, por si hay que restaurar y se ha modificado el código, así como los ficheros de variables y configuración por ser estrictos.

Adicionalmente, como Velneo nos da esa facilidad, en instalaciones críticas añado la funcionalidad de envío de la copia de seguridad a un servidor remoto mediante SDV, así dispongo de esas copias en otro servidor Velneo por si ocurre alguna hecatombe como que casquen todos los discos duros a la vez, se quemen en un incendio todos los ordenadores o algún informático avezado restaure el sistema a una fecha tres meses anterior.

Life is Soft!

Integridad de la bd Velneo

Hace tiempo me ocurrió una cosa curiosa a la vez que catastrófica para una de mis bases de datos Velneo:

Tenía una tabla maestra de Apartados y tenía otra tabla maestra Fichas. En Fichas tenía un puntero a maestro apuntando a Apartados para así poder indicar a qué apartado pertenecía una ficha.

El caso es que por las prisas, el descuido y la desorganización de la edición en grupo de un mapa, la tabla Apartados se quedó sin el histórico de Fichas.

Como estamos tan acostumbrados a la robustez de Velneo manteniendo la integridad de la bd, ni corto ni perezoso un día me dio por cambiar los códigos del maestro de Apartados para reorganización interna, y cuál fue mi sorpresa al ver que había perdido la relación entre Fichas y Apartados.

Me quedé con unas 3.000 fichas sin apartado, y no había vuelta atrás.

Afortunadamente no ocurrió nada ya que tiré de la copia de seguridad de datos diaria y restauré la bd a su estado de por la mañana, perdiendo básicamente la desafortunada modificación de códigos de Apartados.

Al sufrir este susto investigué en el mapa el porqué de la falta de integridad de datos y lo arreglé.

Y es que Velneo es una herramienta que hace lo que debe de hacer; mantener la integridad de datos siempre y cuando en los desarrollos mantengamos unas mínimas reglas de coherencia para establecer esta integridad.

Veamos los pasos necesarios para que en un caso similar no perdamos datos.


En el esquema de tablas vemos cómo en la tabla Fichas tenemos:

- un puntero a maestro apuntando a Apartados


- tenemos además el índice Apartado que es acepta repetidas sobre el puntero a Apartados


- y en la tabla Apartados tenemos declarado el histórico de Fichas sobre el índice Apartado anterior.


Así las cosas Velneo siempre va a mantener la integridad de datos de nuestras bd; si cambiamos el código del maestro de Apartados, cada registro de Fichas apuntará al nuevo código de Apartado gracias a la relación histórica entre ambas tablas a partir del índice Apartado.

Si alguna vez perdéis datos o relaciones entre tablas revisad los punteros a maestro, los índices correspondientes a estos punteros, y lo más importante, la existencia en los maestros del histórico necesario.

Velneo es rápido, robusto, eficaz..., pero no es mágico.

Life is soft!!

P.D.: Esto sólo es necesario cuando trabajamos con tablas maestras con puntero a maestro, si utilizásemos una relación maestro-submaestro Velneo ya hace el trabajo por nosotros creando los índices e históricos necesarios.

Webs con Velneo

A raíz del post anterior sobre webs realizadas con Velneo, en el foro de Velneo surgió la propuesta de un subforo dedicado íntegramente a mostrar webs Velneo.

Para ello se integró snapshots en el código del foro, así se tiene una previsualización del sitio enlazado sin almacenar imágenes del mismo.

Hay una serie de reglas de publicación expuestas en el postit del principio, más que nada por darle un orden y uniformidad a la exposición de una web.

Así que si tienes una web hecha con Velneo, desde aquí te animo a publicarlo en el foro.

Un saludo,

Modelo de cajas CSS

Lo primero que se debería aprender de CSS, y suele no ser así (yo el primero), es el modelo de cajas que utiliza.

El modelo de la caja del CSS describe las cajas rectangulares que se generan para los elementos en el árbol del documento y se presentan según el modelo visual del formato.

Y esto qué quiere decir?

Cada elemento de html; una capa, un párrafo, una lista, una cabecera, etc..., tiene a su alrededor una caja que lo contiene.

Los elementos componentes de esa caja son

• El contenido en sí
• El relleno (padding)
• El borde (border)
• El margen (margin)

Las partes de cada uno de estos elementos se referencian por su posición respecto del contenido y en este orden: arriba (top), derecha (right), abajo (bottom) e izquierda (left).

Este orden es fácil de aprender; se empieza por arriba y se recorre en sentido horario.

Así un elemento de la caja como por ejemplo el margen tendrá cuatro partes: margin-top, margin-right, margin-bottom y margin-left.

Es bueno recordar esto ya que más adelante veremos cómo nos va a permitir definir las propiedades de cada parte de cada elemento en el CSS.

La dimensión de la caja viene dada por la suma de las dimensiones de todos estos elementos, es decir,

ancho-caja = margen-izquierdo + borde-izquierdo + relleno-izquierdo + ancho-contenido + relleno-derecho + borde-derecho + margen-derecho

y esto es así.

Otra cosa es lo que IE hace. Y es que el famoso navegador calcula el ancho a su manera sin respetar el estándard.

Así que si vuestra web se ve bien en navegadores que siguen el estándard como Opera, Safari, Firefox, pero no se ve bien en IE: cambiad de navegador.

Es impresionante la cantidad de consultas en foros sobre el tema que aún están enfocadas al revés: "Mi web se ve perfectamente en IE, pero cuál ha sido mi sorpresa al ver que se descuadra en Firefox!"

La respuesta a este tipo de dudas es: "Si haces las cosas bien tu web se verá perfecta en todos los navegadores que siguen el estándard. IE no respeta el estándard así que si los usuarios de IE no ven bien una web tienen dos opciones; quejarse amargamente de ello a Microsoft, o cambiar de navegador"

Es conveniente saber que cada navegador implementa unos valores predeterminados para los diferentes elementos de cada caja, así que si no los definimos en CSS se tomarán esos por defecto.

Otro tema que entronca directamente con el modelo de caja es el árbol del documento.

Html es un lenguaje de etiquetas, y estas etiquetas en cada página están anidadas de cierta forma. Esta anidación de etiquetas conforma una estructura en árbol jerárquica, de forma que constituye lo que se llama el árbol del documento.


En el esquema vemos que una etiqueta puede tener un antecesor, unos descendientes, unos hermanos y compañeros del mismo nivel.

Esto hemos de tenerlo muy en cuenta ya que CSS es un lenguaje de definición de estilos en cascada, es decir las propiedades de los elementos son heredables según el árbol del documento, de forma que si definimos por ejemplo el estilo de letra para el body, todos los elementos descendientes del body heredarán ese estilo.

Si en principio nos quedan claros estos pocos conceptos base sobre cajas, árboles y herencia, ya tendremos mucho avanzado a la hora de entender CSS.

Life is soft!

Fondo pantalla 003

Siguiendo con las chicas Velneo...


Uf!!! Scarlett!!!

Life is soft!

Lego technic

Como es bien sabido por todos los que utilizamos Velneo, es la herramienta de desarrollo de aplicaciones empresariales de gestión más rápida del mercado, y esto nos deja el suficiente tiempo libre como para dedicarlo a nuestros hijos, familia y aficiones diversas.

No sólo de software vive el programador.

Así pues, aprovechando mi tiempo libre he montado esta moto de Lego technic, regalo de reyes.


Una verdadera gozada.

Un saludo,

Diseño web (tablas)

Antiguamente, cuando empecé con el diseño de páginas web, había una escuela de programadores venidos a "diseñadores" web que utilizaban ámpliamente las tablas html para la maquetación visual de los elementos de las páginas; una tabla para centrar la página en el navegador, una tabla para el menú, otra tabla para distribuir los elementos de cada página, etc.

Era una forma fácil de poder hacer que lo que apareciese en los navegadores se asemejara más o menos al diseño gráfico pensado para la web.

Yo también era de esos, planteaba un diseño en Photoshop que luego troceaba y pasaba a Dreamweaver para maquetarlo usando una enorme cantidad de tablas anidadas, lo cual al final ralentizaba la presentación del sitio en los navegadores dada la compleja estructura de tablas anidadas resultantes.

Otro problema subyacente era la accesibilidad. Alguien invidente que utilizase un lector para interpretar esa web fácilmente podía no entender nada de una compleja estructura de tablas que nada tenía que ver con el contenido "real" del sitio web.

Durante un largo periodo de tiempo dedicado a investigar la forma de hacer las cosas en la web me encontré con una escuela de diseñadores web que intentaba separar la forma del contenido, lo cual me interesó mucho por dedicarme básicamente a realizar webs dinámicas donde el contenido está en la base de datos y la forma se encuentra en componentes html que son el front-end para ese medio. Me interesó muchísimo y me puse a estudiarlo.

Así conocí el xhtml + css. Era la nueva web semántica; separación de forma y contenido, la forma se controla mediante css y en el código xhtml no se incluye ninguna etiqueta que tenga que ver con la forma.

Las fuentes y sus tamaños, los colores y fondos, la disposición de elementos, etc, se controla desde css, y el contenido se deja para el código xhtml.

Así las cosas parecía que las tablas eran un elemento a no utilizar en xhtml, pero no es así. Hay elementos claramente tabulares que deben ser mostrados en tablas, que para eso fueron creadas. Así un listado tabulado de información se mostrará utilizando una tabla, un calendario también, y toda aquella información cuya naturaleza sea tabular requerirá de este elemento para ser mostrada.

Las tablas en xhtml no deben ser un tema tabú.


Veamos cómo es una tabla bien formada y accesible.

[table summary="Listado de Repartidores de señal indicando el servicio asociado, las extensiones y pares, así como el elemento D.Hard utilizado"]
[thead]
[tr class="odd"]
[th scope="col" abbr="Repartidor"]Repartidor[/th]
[th scope="col" abbr="Servicio"]Servicio[/th]
[th scope="col" abbr="Extensiones"]Ext.[/th]
[th scope="col" abbr="Pares"]Par[/th]
[th scope="col" abbr="D.Hard"]D.Hard[/th]
[/tr]
[/thead]
[tbody]
[tr]
[td]Ayto. Nuevo - S.S. Yecla[/td]
[td]Jubilados[/td]
[td]2.740[/td]
[td]01[/td]
[td]2.013, 2, 3[/td]
[/tr]
[tr class="odd"]
[td]Parque móvil - Cámaras Becalí[/td]
[td]Bomberos Norte[/td]
[td]4.984[/td]
[td]60[/td]
[td]2.013, 10, 9[/td]
[/tr]
[/tbody]
[/table]

En principio observamos que la tabla tiene un summary que es una descripción de los datos que muestra la tabla. Esto hace que la tabla sea más comprensible.

Debajo del summary podría ir el caption que es el título de la tabla, de forma similar al título de un gráfico de Excel, por ejemplo, para que todos nos entendamos. Este caption también es fácilmente controlable desde css para su aspecto y posición.

Luego pasamos a definir el thead de la tabla que es el grupo de celdas de la tabla que actuarán como cabeceras de columna, como los nombres de columna A, B, C, en una hoja Excel por seguir con la analogía anterior.

En el thead vemos que cada columna cabecera la definimos con th en lugar de td. Esto es así porque esas columnas van a actuar como cabecera de columna y le darán sentido a todos sus td's inferiores.

A continuación del thead podríamos definir de forma similar el tfoot que sería el conjunto de celdas que formarán el pie de la tabla; nota al pie, totalizadores por columna, etc.

Luego viene el tbody, es decir, la "chicha". Aquí es donde van los datos, y se sabe exactamente a qué tipo de dato corresponde cada celda porque lo hemos definido con anterioridad en cada th del thead.

Así un lector de pantalla para invidentes podría leer esa tabla de forma que tenga sentido para el usuario final, y un usuario cualquiera podrá acceder a todas esas propiedades de la tabla desde las opciones de su navegador.

Vemos que no hemos utilizado ninguna etiqueta de presentación dentro de la tabla; ni fuentes, ni colores, ni fondos, ni bordes, ni espaciados de celdas o contenido, ni nada de eso a que, al menos yo, estaba tan acostumbrado. Eso es tarea del css y lo veremos en un próximo artículo.

Hay más elementos que podríamos utilizar dentro de la definición de una tabla que no he comentado, pero para una completa colección de los mismos y su descripción os recomiendo verlos en w3c.

Desde aquí os animo a abandonar viejas malas costumbres para pasar a utilizar tablas bien formadas y definidas, más accesibles en definitiva.

Life is soft!!

Webs con Velneo

Hace mucho tiempo pregunté en el foro de Velneo por desarrollos web Velneo y me pasaron muy pocas referencias.

El otro día busqué en Google la cadena "cgi-vel" y me aparecieron unas cuantas más.

Aquí las dejo:

http://www.artemisleon.com/
http://www.libroscentral.com/
http://www.uniempleo.com/cgi-vel/uni/ult-ofertas-uni2.bus?_e=25
http://www.hankypankyrecords.com/
http://www.apeti.com/
http://www.hotelesglobales.com/cgi-vel/globales/index.pro
http://www.soriaya.org/
http://www.binariolibros.com/
http://www.destinosfacil.com/
http://www.reinas.es/cgi-vel/reinas/p.pro?p=409
http://www.iberinox.es/cgi-vel/webn/default.pag
http://www.balmat.es/
http://www.alturabeds.com/cgi-vel/thor/home.pro?idi=1&ptr=0&ntr=0&brand=main&u=0
http://www.mastercomputer.es/cgi-vel/vWeb/index.pro
http://www.malagafacil.com/cgi-vel/malagafacil/indexpag.pro?web=1&idioma=2
http://www.asturweb.com/
http://www.ermut.com/cgi-vel/ermut/index.pro?wprog=ekomdhas.htm
http://217.76.137.131:81/index.htm

Hay de todo un poco.

Quizás las que me llamaron la atención fueron la de hankypankyrecords, por la temática, y la de malagafacil (esta parece que tiene un imperio de webs nombre-ciudad_facil.com).

Es reconfortante ver que cada día hay más y mejor.

AH! No olviden visitar también las mías ;-DD

reservaentradas.com
hellovalencia.com
icenter-torrent.es
ccnval.com

Life is soft!!!

Diseño web (paletas de color)

Como ya he dicho en alguna ocasión, el diseño de un sitio web debe correr a cargo de un profesional del diseño gráfico, alguien que partiendo de una hoja en blanco pueda crear un interface que comunique con el usuario de forma atractiva e inteligente, es decir, un diseñador.

En mi caso, no he tenido la ocasión de trabajar con un diseñador a la hora de realizar mis webs, así que he tenido que recurrir a apuntes de diseño gráfico, historia del arte, psicología del color, tutoriales en internet y sobre todo a blogs de diseñadores.

Aparte de las proporciones (diseño áureo, diseño modular), el respeto del espacio en blanco, la elección de la tipografía y su tamaño, uno de los temas que más me han preocupado siempre a la hora de desarrollar el aspecto gráfico de una web es la paleta de color.

La elección de una paleta de colores que resulten en armonía, que comuniquen lo que queremos, que satisfaga y atraiga al usuario, es lo más difícil de todo, al menos para mí.

Un truco que suelo utilizar a veces es una plantilla como la siguiente:

donde dispongo de una rampa de color del blanco al negro con variaciones del 10% en cada paso.

Rellenado con un color base como por ejemplo el #330099 obtenemos una rampa de color desde el blanco hasta el color elegido como base con saltos del 10%:

y si trabajamos con el blanco para el fondo, un casi negro para el texto y dos o tres de estos saltos del color base, ya tenemos una paleta de color para nuestra web que funcionará tan bien como un diseño típico para imprenta a una tinta.

Lo que realmente me sorprende son elecciones de colores, cinco o seis, que teniendo algo que ver o no unos con los otros, al final trabajan bien juntos en un diseño; una paleta de color.

He tenido la suerte de contar desde hace mucho tiempo con los ColourLovers, donde siempre puedes encontar una paleta que te inspire para un diseño determinado.

He recopilado unas cuantas de las que más me han gustado hasta el momento del sitio y las adjunto aquí para que las disfruteis.

Life is soft!!!

Funciones remotas

Las funciones remotas son esas grandes desconocidas de Velneo, funciones normales y corrientes pero que tienen marcado el check accesible VRPC.

Este hecho permite que sean ejecutadas de forma remota desde otros servidores Velneo invocándolas con un simple

Set -> fr,fEjecutarFuncionRemota( servidor-remoto, alias-aplicacion, funcion-remota, pwd-fr, parametro1, parametro2, ... )

donde

• servidor-remoto es la ip-pública o nombre del servidor remoto donde se va a ejecutar la función remota
• alias-aplicación es el alias con el cual está publicada la aplicación que contiene la función remota que se va a ejecutar en el servidor remoto
• funcion-remota es el nombre de la función accesible VRPC a ejecutar
• pwd-fr es la contraseña de funciones remotas definida en el servidor remoto para la aplicación correspondiente
• parametro1, parametro2, ... son los diferentes parámetros que puede recibir la función remota separados por comas

Algo tan simple y sencillo como esto dota a nuestras aplicaciones Velneo de una potencia inusitada, permitiéndonos actualización de datos online desde sitios remotos, replicación de servidores en caliente, consolidación de datos de sucursales en una central en tiempo real, o el uso que realmente se nos ocurra.

Una función remota siempre se va a ejecutar en un servidor Velneo, pero su invocación puede ser desde una aplicación publicada en otro servidor Velneo o desde una aplicación cliente ejecutandose en monopuesto, así un portátil trabajando en local en el coche de un comercial puede comunicar al servidor Velneo de la central las ventas que está realizando, siempre que disponga de conexión a internet, y podría incluso bajarse a local las variaciones de tarifa que
necesitase.

Una función remota, como cualquier otra función en Velneo tiene un retorno. Ese retorno puede ser un simple 1 si se ha ejecutado, un parámetro resultado de un cálculo o extracción de la base de datos, o una ristra de parámetros separados por punto y coma por ejemplo para tener como respuesta un registro entero de una tabla de la base de datos.

Si la función remota no tiene definido un retorno explícito la variable local utilizada para su invocación contendrá un 1 en caso de haberse ejecutado y un 0 en caso contrario.

Un par de cosas a tener en cuenta: el alias-aplicacion y funcion-remota en mayúsculas tanto en su definición como en su invocación, y así nos evitamos problemas.

Condiciones a cumplir con las funciones remotas:

1. Una función remota entre servidores distintos que vaya a transaccionar, debe transaccionar ella misma.
2. Una función remota contra el propio servidor que la invoca que vaya a transaccionar, no debe transaccionar ella misma.

Aquí alguien se puede preguntar; una función remota contra el propio servidor?!! Pues sí. En entornos de desarrollo, para probar una aplicación que ejecuta funciones remotas contra un servidor, si sólo dispones de un servidor para pruebas deberás ejecutar las funciones remotas contra el propio servidor, y en entornos de producción reales yo me he encontrado varios casos donde la ejecución de una función remota contra el propio servidor me ha solucionado más de un problema; enlace gestión-contabilidad, mantenimiento unificado de tablas maestras, etc.

En estos casos hay que evitar que la función remota transaccione sacando la parte del proceso que transacciona a funciones que son llamadas desde la propia función remota.

Hasta aquí hemos visto superficialmente las funciones remotas, su uso y su potencial que vemos que es tremendamente esperanzador ya que nos permite hacer prácticamente todo lo que nos podamos imaginar entre dos aplicaciones Velneo.

Ahora la pega; dos servidores Velneo no pueden ejecutar funciones remotas simultáneas entre ellos, es decir, el servidor 1 no puede lanzar una función remota contra el servidor 2 y a su vez el servidor 2 sobre el servidor 1.

Puede parecer un caso raro y que no vaya a darse nunca, pero en la práctica se da, muy a nuestro pesar. La realidad supera con creces cualquier ficción.

Qué debemos hacer en este caso? Establecer un semáforo, una variable booleana global en disco que condicione la ejecución de las funciones remotas para evitar el "fuego cruzado" entre servidores.

En caso contrario nos encontraremos con dos servidores Velneo bloqueados hasta que uno de ellos se venga abajo. Al tirar abajo uno de los servidores, el otro se recupera y continúa su ejecución como si no hubiese pasado nada.

Como no existe una función específica para acceder al estado del semáforo propio de Velneo al ejecutar funciones remotas, debemos crear y gestionar el nuestro propio. Para acceder al estado del semáforo del servidor remoto lo más sencillo es diseñar un protocolo TCP que informe al otro servidor del estado del semáforo de funciones remotas.

Si la ejecución de la función remota consistiese en la simple petición de un parámetro al otro servidor, como ya tenemos un protocolo TCP establecido entre ambos servidores para la gestión del semáforo, podríamos utilizar el propio protocolo para la transmisión de ese parámetro entre servidores y ahorrarnos la función remota, y el posible problema del "fuego cruzado".

Life is soft!!!