Saltar al contenido

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript... y lo que venga ;)

17 años online

el blog de José M. Aguilar

Inicio El autor Contactar

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web
ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript...

¡Microsoft MVP!
jueves, 27 de julio de 2006
Hace como mes y medio, a primeros de Junio, fue lanzada la última versión de Ubuntu, la 6.06 LTS (Dapper Drake). Desde entonces he esperado impaciente la oportunidad para instalarlo en una máquina y echarlo a correr, y hoy por fin he tenido ocasión de hacerlo. La máquina en cuestión es un portátil IBM ThinkPad con 512Mb de memoria RAM, lector de DVD, tarjeta WiFi PCMCIA (marca SMC), y un corazón Pentium III.

En primer lugar he descargado la imagen ISO desde la dirección http://releases.ubuntu.com/6.06/ubuntu-6.06-desktop-i386.iso; en mi primer intento lo descargué con eMule, aunque simplemente pude obtener una copia defectuosa que me llevó a desperdiciar tiempo, amén de algún CD tostado en vano. El único problema que trae de serie esta imagen es que el software que instala (p.e., OpenOffice) es inicialmente en inglés, aunque el sistema operativo venga en la lengua de Cervantes; supongo que en breve aparecerán distribuciones alternativas, donde todos los paquetes vendrán ya en nuestro idioma, pero mientras debemos instalar a posteriori las versiones localizadas de los mismos.

Una vez con la imagen ISO correcta grabada a fuego, ha sido introducirla en el lector del portátil, arrancar seleccionándolo como unidad inicial, y listo, todo sobre la seda. En pocos segundos ha aparecido un menú con varias opciones, inicialmente en inglés, aunque es posible cambiar esto pulsando la tecla F2 y cambiando a español. Seleccionando la opción "Iniciar Ubuntu" y esperando unos tres minutos, se cargará el sistema operativo, como es habitual montado sobre un disco RAM, apareciendo el escritorio Gnome.

Esta versión "live" ha sabido detectar perfectamente la placa madre, los dispositivos integrados (como el puerto de infrarrojos, la tarjeta de red Ethernet, o la de sonido), la tarjeta de red inalámbrica y hasta una llave USB que tenía introducida accidentalmente en uno de los puertos USB del equipo. A nivel de detección de hardware, simplemente perfecto. Ni un detalle a echarle en cara.

Para iniciar la instalación al disco duro, simplemente hay que pulsar un acceso directo que encontraremos en el escritorio, que iniciará el asistente. Tras algunas preguntas simples, como el idioma, la configuración de teclado y la zona horaria, y otras más complejas, como la distribución de particiones del disco, se inicia la instalación, propiamente dicha, del sistema. Ojo con el tema de las particiones, sobre todo si el ordenador tiene otro sistema operativo instalado, pues puede dar lugar a una pérdida irrecuperable de la información almacenada.

Unos quince minutos más tarde, y tras el necesario reinicio tenemos un Ubuntu en su punto, listo para ser degustado. Y de guarnición, decenas de aplicaciones de uso cotidiano, que harán que podamos podemos a trabajar de inmediato (navegación por internet, correo electrónico, mensajería instantánea, procesador de textos, hoja de cálculo, creador de presentaciones, editor gráfico, visores multimedia, grabadores de cd, juegos...).

¡Muy bien, sí señor! Si seguimos así, sin duda el software libre puede ser una alternativa al omnipotente y ubicuo (en sus respectivas primeras acepciones del diccionario de la Real Academia) Windows.

Y por cierto, (este párrafo ya lo estoy escribiendo desde mi nuevo Ubuntu :-)), es una maravilla, aunque esto esté ya inventado desde hace tiempo, ver cómo se actualiza muy frecuentemente de forma totalmente automática. De hecho, estas actualizaciones están aseguradas para esta versión durante tres y cinco años para las versiones desktop y servidor, respectivamente, de ahí las siglas LTS (Long Time Support) del nombre del producto.

Para finalizar, simplemente decir que hoy comienzo mis (esperadas) vacaciones. Estaré unos días en la costa de Málaga, otros en Huelva y algunos también me quedaré en casa. Eso sí, siempre con mi portátil y mi nuevo sistema operativo. A ver qué tal.

Felices vacaciones.
miércoles, 12 de julio de 2006
El último día vimos etiquetas relacionadas con enlaces, listas, incrustación de objetos, controles de formularios e incluso tags destinados a modificar la presentación de las páginas.

En esta última entrega completaremos la referencia completa de etiquetas XHTML.

Creación de tablas

A diferencia de lo que ocurre con HTML, en XHTML es una mala idea utilizar tablas para maquetar presentaciones. No olvidemos que en este punto nos encontramos describiendo el contenido, no cómo debe visualizarse en pantalla. De hecho, deberíamos acostumbrarnos a pensar en las tablas como una forma de mostrar exclusivamente datos tabulares, como puede ser la tabla de clasificación de la liga de fútbol, o un listado de movimientos bancarios.

Para ello, XHTML nos brinda los siguientes tags, de los cuales algunos son ya bastante habituales:


  • caption permite definir el título de la tabla, un pequeño texto sobre su contenido.
  • col define atributos de una columna contenida en un grupo creado mediante el tag <colgroup>.
  • colgroup está pensado para definir grupos de columnas sobre los que se podrán aplicar atributos de forma conjunta. En su interior deberá existir un elemento <col> por cada columna que lo componga.
  • table, que indica el comienzo y fin de la tabla.
  • tbody, permite marcar el cuerpo de la tabla, es decir, indicar dónde se encuentran los datos de sus filas.
  • td es el tag clásico de definición de una celda de la tabla.
  • tfoot como en el caso de tbody, indica la sección del pie de la tabla.
  • th es como td, pero se utiliza en las celdas que son encabezado de columnas.
  • thead contiene el encabezado de la tabla.
  • tr permite señalar el comienzo y fin de cada fila. En su interior habrá tantos <td> como columnas tenga la tabla.

Inserción de imágenes y mapas de imagen

  • img permite la inserción de imágenes, como en HTML tradicional. Ojo con el cierre del tag, que es necesario como en todo documento XML.
  • map y area permiten, respectivamente, la inserción de imágenes mapeadas, y la definición de áreas sensibles.

Metainformación

En algún otro post he comentado que la metainformación se define como "información sobre la información". En el contexto que nos ocupa, se trata de la información introducida en la página web que describe el contenido que podremos encontrar en ésta. Por ejemplo, esta información es extremadamente útil para las técnicas SEO, pues permiten que los buscadores conozcan de qué trata el contenido, las palabras clave, el autor, etc. El único tag disponible es bien conocido por todos:

  • meta, define información sobre los contenidos de la página.

Scripting

Con XHTML también es posible utilizar scripts. De hecho, es un entorno perfecto para el desarrollo de aplicaciones AJAX. Encontramos en esta categoría dos etiquetas:

  • script que permite alojar código de script en el interior de una página XHTML.
  • noscript se utiliza para definir qué contenidos se utilizarán o visualizarán cuando el dispositivo cliente no disponga de capacidades de ejecución de estos elementos.

Hojas de estilo en cascada

  • style permite definir en el encabezado del documento (<head>) las pautas de estilo que serán utilizadas para representar visualmente el contenido de la página.

Relación con otros documentos

  • link relaciona el documento XHTML actual con otros. Es habitual utilizarlo para cargar hojas de estilo externas de la siguiente forma:

<link rel="stylesheet" type="text/css" href="theme.css" />

Base del documento

  • base indica al cliente la dirección base que deberá ser aplicada para todos los enlaces relativos del documento. Y cuando digo todos, digo todos. Ojo a esto, que si se cambia la base de una página XHTML es posible que haya que revisar todas las rutas que se hayan utilizado (hojas de estilo, links, scripts, imágenes...)

Bueno, con esto ya hay suficiente para ponerse a trabajar. Seguiremos informando.

miércoles, 5 de julio de 2006
Hace unos días publiqué una primera lista de tags permitidos en XHTML, recogidos en dos grupos; el primero de ellos incluía las etiquetas que permitían estructurar un documento según el estándar, y añadir algo de información adicional, mientras que el segundo facilitaba el enriquecimiento de los contenidos mediante la inclusión de marcas con cierto significado semántico.

Hoy vamos a continuar en esta línea.

Enlaces hipertexto

  • a, el tag de toda la vida, que ha sufrido pocas variaciones, aparte del consabido cierre obligatorio de la etiqueta en todos los casos, hasta en el establecimiento de anclas.

Composición de listas

  • dl indica una lista de definiciones. En su interior habrá un par dt y dd por cada término a definir, el primero para el término y el segundo para su definición.
  • dd indica la definición del término apuntado por el <dt> correspondiente.
  • dt, que refleja el término a ser definido en el siguiente <dt>
  • ol (ordered list) permite especificar que su contenido estará compuesto por líneas (creadas mediante el tag <li>) que serán numeradas y ordenadas conforme se vayan añadiendo a la lista.
  • ul se usa para incluir listas desordenadas. Una lista desordenada es una serie de elementos consecutivos entre los que no se establece ningún tipo de relación de dependencia en función de su posición.
  • li, que se utiliza para indicar cada elemento de las listas, sean ordenadas o desordenadas.

Inclusión de objetos

  • object permite incluir objetos o plugins en las páginas, como pueden ser applets o animaciones Flash.
  • param, se utiliza para especificar los parámetros a enviar al objeto.

Etiquetas de presentación

Hace ya algunos posts, hacía hincapié en la absoluta separación de contenidos y visualización en una página XHTML. Aunque esto es cierto, existen una serie de tags que permiten modificar ligeramente la presentación desde XHTML sin tener que recurrir a CSS:

  • b, como siempre, para poner en negrilla.
  • big, hace que el texto sea presentado en un tamaño de fuente mayor que el utilizado en ese momento.
  • hr, que permite incluir una separación vertical en el documento, normalmente con una línea horizontal de lado a lado, aunque este comportamiento puede modificarse mediante las hojas de estilo.
  • i, para que el contenido sea formateado en itálica o cursiva.
  • small, reduce el tamaño de la fuente utilizada para representar su contenido.
  • sub, permite incluir subíndices.
  • sup, lo mismo, pero con superíndices.
  • tt fuerza la utilización de caracteres en modo teletipo, con caracteres de ancho fijo.

Etiquetas de edición

Estos tags permiten enriquecer el contenido con marcas relativas a la supresión o inserción de información. Por ejemplo, serían útiles para indicar, tras una revisión, qué partes del texto han sido eliminadas o cuáles han sido insertadas por el revisor. Las etiquetas son las siguientes:

  • del, que marca el texto eliminado o a eliminar.
  • ins, que indica el texto nuevo.

Texto bidireccional

La inclusión de bidireccionalidad hace posible que una página pueda ser visualizada correctamente por personas cuya escritura se realiza en un sentido distinto a nuestro sistema habitual (por ejemplo, en países árabes, se lee de derecha a izquierda).

  • bdo permite indicar el comienzo y finalización de un bloque de texto que podrá ser representado usando una direccionalidad distinta a la establecida en el momento.

Por ejemplo, podemos ver cómo queda un famoso palíndromo de Julio Cortázar "Átale, demoníaco Caín, o me delata" al presentarlo modificando la direccionalidad:

"Átale, demoníaco Caín, o me delata"

¡Pues era verdad esto de los palíndromos, se lee igual al derecho y al revés! El código fuente para conseguir esto ha sido:

<bdo dir="rtl"><em>"Átale, demoníaco Caín, o me delata"</em></bdo>

Formularios

  • button, que permite incluir un botón.
  • fieldset permite agrupar un conjunto de campos de un formulario bajo un título común, especificado mediante el tag <legend>.
  • form, es el elemento raíz de todo formulario.
  • input permite incluir distintos tipos de control de entrada datos. Cuidado con los cierres, que no estamos acostumbrados a hacerlo aquí.
  • label es útil para asociar descripciones textuales a cada control de entrada.
  • legend, se utiliza para dar un título a un fieldset.
  • select permite crear un control de selección basado en desplegable o lista de selección.
  • option indica cada elemento disponible en un control de tipo select, descrito anteriormente.
  • optgroup, facilita la agrupación de elementos <option> para crear efectos como el siguiente:
  • textarea, que, como el de toda la vida, permite la entrada de textos multilínea.

El próximo día continuaremos con los elementos de tabla, imágenes y algunas cosillas más.

viernes, 30 de junio de 2006
Hoy vamos a dedicar un poco de tiempo a resumir las etiquetas existentes en XHTML. Como comenté en el post anterior, han desaparecido las relacionadas con aspectos estéticos (por ejemplo, <font> ha sido repudiado) y ahora toman más sentido los tags que describen el contenido del documento desde un punto de vista semántico, delegando los aspectos visuales a las hojas de estilo (CSS).

A pesar de haberse reducido en número respecto a HTML4, siguen siendo bastantes, por lo que las dividiré en varios posts. En este sólo trataremos las estructurales, que componen el esqueleto básico de un documento XHTML y definen algunas de sus propiedades, y las de texto, que permiten adornar el contenido de un documento con información semántica.

Etiquetas estructurales
  • body, que indica el comienzo del cuerpo de la página.
  • head, que contiene la sección de encabezado de la página XHTML. Su contenido no será mostrado, y se utiliza principalmente para recoger aspectos genéricos, como el título y metainformación sobre el documento.
  • html, la etiqueta raíz del documento XHTML. Antes de ella sólo existirán las destinadas a indicar los tipos de documento.
  • title, que permitirá indicar el título de la página.

Estiquetas de texto

  • abbr, que permite señalar las abreviaturas e indicar su significado.
  • acronym, idem, con los acrónimos.
  • address, utilizado para indicar localizaciones o direcciones de contacto.
  • blockquote, marca una cita textual de otro documento, destacada como un bloque independiente.
  • br, que fuerza la ruptura de una línea en un texto. Es importante destacar que, a diferencia de HTML, este tag debe ir cerrado, es decir, escribirse como <br />
  • cite, también indicado para recoger citas, pero en la misma línea, sin necesidad de iniciar un nuevo párrafo.
  • code, ideal para incluir código fuente de programas, ejemplos, etc. Cuidado al mostrar código HTML, que los caracteres < y > no pueden ser incluidos directamente, sino a través de las correspondientes entidades, &lt; y >.
  • dfn, que permite definir términos cuando, por ejemplo, aparecen por primera vez en un documento.
  • div, una de las principales herramientas disponibles para estructuración de bloques que componen un documento. Todo lo que se incluya entre la etiqueta de apertura y de cierre será tratado como un bloque, al que se podrán aplicar atributos de forma conjunta. Por ello, en la práctica, cada área o grupo de elementos estructuralmente importante irá incluido en su propio div (p.e.: el menú de la web, el encabezado, el pie...).
  • em, que permite destacar (emfatizar) partes del texto. Normalmente es un énfasis light, y habitualmente es representado en cursiva; para destacar de forma más violenta, es conveniente usar el tag <strong>.
  • h1, h2... h6, indican que un texto es un encabezado de una sección posterior. Hay seis niveles de encabezado posibles.
  • kbd, utilizado para marcar texto que debe ser introducido por el usuario mediante teclado. Puede ser interesante en documentos técnicos o manuales on-line.
  • p, este sí que es el de siempre. Permite indicar el inicio y fin de los párrafos que componen un texto. Importante: debemos cerrarlo siempre, aunque HTML no nos obligara a ello.
  • pre, que indica que su contenido está preformateado; a efectos prácticos, todo lo incluido entre el <pre> y el </pre> será visualizado incluyendo los espacios, tabulaciones y rupturas de línea literalmente, tal y como hayan sido incluidas en el código.
  • q, otro tag que posibilita la inclusión de citas. La verdad es que, existiendo cite y blockquote, este resulta algo obviable.
  • samp, que permite incluir ejemplos de resultados o salida de procesos y programas.
  • span, que, como ocurría con la etiqueta <div>, se utiliza para delimitar porciones de contenido que pueden ser manipuladas, a nivel de presentación, conjuntamente. En cambio, <span> no fuerza el salto de línea, ni las separaciones presentes en el citado anteriormente, todo se realiza en la misma línea donde se encuentra.
  • strong, utilizado para resaltar su contenido, de forma "fuerte". En la práctica, es habitual que la representación visual se realice en negrilla.
  • var, usado para indicar que su contenido es un nombre de variable o de componente de un sistema software.

En el próximo post seguiremos enumerando y describiendo brevemente más tags pertenecientes al estándar XHTML 1.1., que nos permitirán definir enlaces hipertexto, listas, incluir objetos y muchas cosas más.

lunes, 26 de junio de 2006
Voy a intentar recoger de forma muy resumida los aspectos que he visto más interesantes para iniciarse con XHTML, sobre todo aquellos que marcan la diferencia respecto a las técnicas tradicionales basadas en HTML estándar o algunos de sus dialectos.

Comenzando por donde hay que hacerlo normalmente, por el principio: ¿qué es XHTML? Así al vuelo, podríamos definir el eXtensible HyperText Markup Languaje es una reformulación de HTML en XML. Es decir, una formalización del habitual lenguaje de marcas, utilizando unas normas sintácticas más estrictas, e introduciendo al mismo tiempo una fuerte separación entre los aspectos semánticos de una página Web, que será lo que recojan las páginas, y su presentación, descritas mediante CSS.

Recordemos que la semántica hace referencia al significado del contenido, independientemente del formato en que esté presentado. Esto implica, por ejemplo, que en XHTML no podremos utilizar la etiqueta <font color="blue"> para poner en azul un texto (¡esto es presentación!); sí podremos, por ejemplo, indicar que una porción del texto es importante con la etiqueta <em> o <strong> y más tarde, en la hoja de estilos, indicar que las cosas importantes queremos que aparezcan en negrita, en azul, o como sea. La buena noticia es que, dado que no se pueden usar las etiquetas habituales de formato, el conjunto de éstas se reduce considerablemente.

En cuanto a la sintaxis, deberemos acostumbrarnos a escribir siempre los tags en minúsculas; XHTML, como XML que es, es sensible á este aspecto del código. Los que estábamos acostumbrados a escribir las etiquetas siempre en mayúsculas para distinguirlas del resto, vamos a tener que ir cambiando de hábitos.

También es imperativo el cierre de todas las etiquetas; como en XML, toda etiqueta de apertura tiene que tener su correspondiente etiqueta de cierre. Es decir, nada de:

<img src='zxc.gif'>

Esto deberá convertirse, a partir de ahora en:

<img src='zxc.gif'></img>

Por suerte, los señores que inventaron el XML debían sufrir dolores en las articulaciones, por lo que decidieron que esto podría simplificarse así:

<img src='zxc.gif' />

(El espacio justo delante de la barra de cierre es a propósito, parece ser que hacerlo de otra forma causa problemas en navegadores antiguos).

Hay algún otro aspecto sintáctico adicional, como la conveniencia de sustituir caracteres especiales por su entidad correspondiente (como el ">", que debe ser sustituida por "&gt;"), el uso obligatorio de comillas para los valores asignados a los atributos, y algún otro, pero, en general, lo dicho hasta el momento es lo más importante (aparentemente al menos).

El siguiente ejemplo muestra un documento XHTML válido completo:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>El saludo habitual</title>
</head>
<body>
<p>¡Hola, mundo!</p> </body></html>

Destacan los siguientes detalles:

  • Tal y como se define en la primera línea, se trata de un documento XML. Esto quiere decir que deberá ser bien formado según las reglas generales de este lenguaje. Si, por ejemplo, olvidamos cerrar un tag, el documento no será válido y, por tanto, podría no ser representado.
  • A continuación se define el tipo de documento, XHTML 1.1 en este caso, y la DTD o definición del tipo de documento que permitirá detectar su validez respecto a ésta; por ejemplo, un documento no sería válido XHTML 1.1 si introdujéramos un tag <img> dentro de otro, lo cual no tiene sentido. Por cierto, se está trabajando en la versión 2.0, pero se prevé que no estará lista hasta 2007.
  • La siguiente línea define el elemento raíz del documento, con la etiqueta <html>. Se incluyen, además, referencias al espacio de nombres (xmlns) e idioma (xml:lang) utilizado. El primero de ellos debe tener fijo el valor http://www.w3.org/1999/xhtml, cualquier intento de modificarlo causará un error de validación; el segundo, podrá, obviamente, variarse en función del idioma del contenido.
  • Las siguientes son ya bastante habituales, definiendo el contenido del documento.

El próximo día iré incorporando las etiquetas disponibles y comentando su utilidad. Hasta entonces.