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.