Ubuntu botón para hibernar.

Habilitar hibernación en Ubuntu

No, no estamos de osos e hibernación sino de la metáfora entre el comportamiento animal y las computadoras: se trata de “dormir” a la computadora escribiendo todo lo que está en memoria RAM a un área especial en nuestro disco duro, tras lo cual podemos hasta desenchufar nuestro equipo y cuando de nuevo lo necesitemos quedaremos exactamente con los mismos programas y documentos abiertos justo donde los dejamos.

Antecedentes.

En los lejanos tiempos cuando no teníamos interfaz gráfica (podéis saber -o recordar- más en nuestros anteriores artículos sobre bash y sobre ingeniería social) pues tenía poco sentido el hablar de este proceso de hibernación. Pero es que hay más: los equipos XT tenían un simple interruptor que cortaba la energía, apagando de golpe a la computadora y perdiendo datos (ni hablaremos que los discos duros tipo IDE tenían que “parquear” el cabezal para no dañar los platos). Pero con el advenimiento de los equipos AT se incorporó más bien un botón lógico que cuando uno lo presiona el BIOS de la tarjeta madre se comunica con el sistema operativo -moderno- para entonces así poder apagar, cerrando y guardando debidamente los documentos y programas abiertos. Adicionalmente -y esto aplica a los monitores también- se les colocó una función de “dormir” lo cual hace que la máquina trabaje a una velocidad mínima a la espera de un evento determinado -pulso de tecla, movimiento de ratón, mensaje por tarjeta de red, etc.- logrando ahorrar energía. Dicha función se activa automáticamente cada cierto tiempo predeterminado y así se ahorra, a nivel mundial, de muchísima energía eléctrica.

Pero fueron las computadoras portátiles las que más se beneficiaron pues permite alargar el tiempo que trabajan con una sola carga de batería e incluso hay planes más detallados y específicos que poner a “dormir” al equipo: disminuye el brillo en pantalla, deshabilita uno o más núcleos en el CPU (ahora casi todos los equipos son doble núcleo de 64 bits), apagar la red inalámbrica, apagar el disco duro, etc.

En el caso de la hibernación es el ahorro máximo de energía: apagar el equipo para luego encenderlo muy rápidamente y justo donde estabamos trabajando, de paso ahorrando tiempo y como dijimos, se trata de escribir todo lo que está en memoria al disco duro.

¿Por qué Ubuntu no trae la opción de hibernación activada?

Pues ya saben la historia, a las computadoras se les agregó las opciones de “dormir” e “hibernar” para cumplir normas medioambientales (y ahorro en nuestros bolsillos en nuestra factura por consumo de electricidad) pero resulta ser que cada fabricante impuso sus propios “chips” integrados en las tarjetas madres para cumplir dichas funciones. Ellos, para proteger sus “secretos industriales y de manufactura”, no explican a ciencia cierta cómo funcionan y son pocos los fabricantes que se dedican a trabajar de la mano con los desarrolladores de sistemas operativos. En el caso de Ubuntu fue a partir de la versión 12.04 que tomaron la salomónica decisión de deshabilitarlo (en Debian viene por defecto activado): son pocos los hardwares que son certificados para trabajar con Ubuntu y la base de datos para llevar cuenta de ellos es gigantesca y engorrosa, un trabajo a todas luces de evitar.

¿Y qué es un hardware certificado para trabajar con Ubuntu?

Pues son ordenadores que garantizan que al hibernar no perderemos absolutamente ninguno de nuestros datos, recordemos que todos los GNU/Linux son sistemas operativos estables y confiables y no se arriesgan a perder su reputación simplemente porque la mayoría de los fabricantes de niegan a vender hardware libre (aunque esto también desaliente a las empresas que trabajen por cerificar su hardware con Ubuntu).

¿Y quienes se benefician del proceso de hibernación?

Pues obviamente los equipos de escritorio y portátiles porque las versiones Ubuntu Server para nada ahorran energía: son equipos que trabajan las 24 horas del día. No obstante el software libre nos permite sin ningún problema el convertir nuestros ordenadores de uso diario como servidores de bases de datos, servidores web, etcétera y si éste es vuestro caso pues olvidad la opción de hibernar.

Requisitos para la hibernación.

Pues antes de entrar más en detalles debemos asegurarnos no sólo que tenemos espacio libre en disco duro del mismo tamaño de nuestra memoria RAM, sino que incluso contemos con una partición de intercambio especialmente hecha para ello, y en inglés recibe el nombre “swap” (no confundir con la partición para archivos temporales). Generalmente si escogimos que nuestra distribución Linux ocupe todo nuestro disco entonces habrá particionado nuestro disco duro con los valores adecuado a nuestro hardware.

Pero si fuimos nosotros quienes decidimos los valores de partición debemos revisar, en todo caso nunca está demás consultar dichos valores así que nos arremangamos las mangas de la camisa y abrimos una venta terminal y escribimos lo siguiente:

cat /proc/swaps

Como ya sabemos el comando cat sirve para visualizar el contenido de un archivo y en GNU/Linux todo es un archivo (sin caer en el tema de systemd) y la partición de intercambio tiene su archivo que lo representa. El que consultemos un archivo, ya sea por pantalla, impresora, terminal remota, etc. no representa ningún problema para nuestro ordenador, es decir no desconfiguramos nada (lo peor que nos puede pasar es que no tengamos derecho de lectura del archivo en cuestión).

Pero si queremos ir más allá podemos usar el comando swapon el cual está disponible desde 1995 (apareció en 4.0BSD) y forma parte de las utilerías de Linux. Dicho comando ofrece opciones de reporte y la primera que usaremos es:

swapon -s

o en su versión “larga” -que nos permite memorizarla mejor-:

swapon --summary

Esta opción hace exactamente el mismo trabajo de cat que indicamos al principio y así explícitamente lo indica la ayuda de swap (tecleamos “man swap” -y podemos usar el comando man para obetener ayuda de cualquier otro comando de Linux-). Con el comando swapon también podemos activar o descativar el área de intercambio pero exige conocimientos exactos de nuestro hardware para poderlo ejecutar correctamente, recomendamos mucha precaución si se deciden a ir más allá.

Hay muchos otras muchas herramientas (mirad los enlaces consutlados para hacer esta entrada) pero con 3 creemos es más que suficiente en nuestra labor didáctica, dicho tercer comando es free que nos permite ver tanto en Gigabytes, Kilobytes o Megabytes (las letras iniciales son los parámetros del comando) de nuestra memoria física y el área de intercambio -en realidad sirve para la memoria RAM pero como están intimamente relacionadas con el área de intercambio pues se incluye en los resultados-:

free -g
free -k
free -m

Acá mostramos una captura de nuestra ventana terminal:

cat swapon free
“cat”, “swapon” y “free”.

Otra alternativa es utilizar la interfaz gráfica pulsando la tecla ALT+F2 y escribimos (en Ubuntu) “disco” y automáticamente nos listará las aplicaciones debajo de la linea de comandos -si usan Debian escriban palimpsest – y hacemos click en la utilidad de discos, verán algo parecido a esto:

Ubuntu partición de intercambio.
Ubuntu partición de intercambio.

Como vemos también nos informa del estado del disco duro, temperatura etc.

Probando si nuestro equipo es compatible con hibernación.

La manera pragmática de determinar si nuestro equipo soporta el proceso de hibernación es tener unas cuantas aplicaciones abiertas con datos sin importancia (navegador web, gedit editando una nota, algún reproductor de música) tras lo cual ejecutamos en nuestra línea de comandos lo siguiente:

sudo pm-hibernate

Al presionar la tecla intro nuestro ordenador, según la cantidad de aplicaciones abiertas, la cantidad de memoria RAM y tipo de disco duro, tomará de unos cuantos segundos hasta un minuto. Luego de que se hayan apagado todas las luces y ventiladores esperamos unos 10 segundos y procedemos a encender por su correpondiente botón.

Una vez haya arrancado de nuevo verificamos si nuestras aplicaciones de prueba están en pantalla, si suena la música, el estado de conexión de red; puede ser que parpadee la pantalla una o varias veces, movemos el ratón y observamos cuánto tarda en responder.

Si hemos llegado hasta aquí sin problemas…

Pues ¡enhorabuena! Nuestro ordenador es compatible con la hibernación ahora procederemos a habilitarlo y describiremos el proceso general pero cambiaremos los valores de acuerdo a la versión de Ubuntu que tengamos instalado:

  1. Vamos a crear un archivo llamado “com.ubuntu.enable-hibernate.pkla“.
  2. Dicho archivo lo guardaremos en la siguiente ubicación: ” /etc/polkit-1/localauthority/50-local.d
  3. Debemos hacerlo con derechos de usuario raíz o “root” con “sudo su“.
  4. Reinciamos el equipo y verificamos que nos aparezca la opción correspondiente, veremos algo como esto:
Ubuntu botón para hibernar.
Ubuntu botón para hibernar.

Si usamos Ubuntu 13 o anterior:

Procedemos a abrir una ventana terminal y ejecutamos lo siguiente:

sudo nano /etc/polkit-1/localauthority/50-local.d/com.ubuntu.enable-hibernate.pkla

y luego rellenamos con esto (sientanse libres de copiar y pegar):

[Re-enable hibernate by default]
  Identity=unix-user:*
  Action=org.freedesktop.upower.hibernate
  ResultActive=yes

Si usamos Ubuntu 14:

Deberemos rellenar el archivo con esto:

[Re-enable hibernate by default in upower]
  Identity=unix-user:*
  Action=org.freedesktop.upower.hibernate
  ResultActive=yes

[Re-enable hibernate by default in logind]
  Identity=unix-user:*
  Action=org.freedesktop.login1.hibernate;org.freedesktop.login1.hibernate-multiple-sessions
  ResultActive=yes

Si tenemos Ubuntu 16:

[Re-enable hibernate by default for login1]
 Identity=unix-user:*
 Action=org.freedesktop.login1.hibernate
 ResultActive=yes

[Re-enable hibernate for multiple users by default in logind]
 Identity=unix-user:*
 Action=org.freedesktop.login1.hibernate-multiple-sessions
 ResultActive=yes

Observaciones importantes del archivo de marras:

Advertencia imagen pequeña

Ahora que conocemos el archivo que permite la hibernación hemos de considerar lo siguiente: las lineas que comienzan por “Identity”, “Action” y “ResultActive” como bien pueden observar son las mismas para las versiones de Ubuntu lo que si que es diferente son las etiquetas que las encabezan. Es de notar también que el identado es importante para dichas líneas pues son en jerarquía “hijas” de las etiquetas. Además los nombres de las etiquetas son muy específicas para cada versión de Ubuntu, bueno cada cabeza es un mundo e imaginamos que son muchos y diferentes programadores que han trabajado sobre Ubuntu y que siempre debemos tener siempre en mente que en el campo del software libre nada está escrito sobre piedra, es decir: ¿nos molesta que cada versión de Ubuntu tenga sus diferencias particulares de una a otra según las liberan? El software libre nos permite descargar el código fuente, modificarlo y compilarlo para nuestra propia metadistribución, es decir, es el mismo Ubuntu con pequeñas variaciones (pero si dichas variaciones afectan de algún modo o manera a las aplicaciones que se ejecutan debemos compilar también dichas aplicaciones adaptadas y publicar nuestro propio repositorio para nuesta metadistribución ¿A ver quién se anima a trabajar en ello? Hay gente que conozco que lo hacen, ¡tienen mucho esfuerzo y tenacidad en sus convicciones!).

Si tenemos un ordenador portátil.

En las computadoras portátiles al cerrar su tapa, el comportamiento predeterminado es “dormir” o suspender pero podemos cambiar ese comportamiento siempre y cuando hayamos probado varias veces que la hibernación funciona correctamente:

  • Abrimos una venta terminal e introducimos lo siguiente:
sudo nano /etc/systemd/logind.conf
  • Buscamos la línea que contiene “#HandleLidSwitch=suspend” y la sustituimos por “HandleLidSwitch=hibernate” (nótese que eliminamos el caracter almohadilla y cambiamos “suspend” por “hibernate”.
  • Guardamos el archivo y reiniciamos.

¿Qué problemas podemos enfrentar?

Actualizado el jueves 10 de noviembre de 2016.

Pues pusimos a hibernar nuestro ordenador y al regresar de nuestro trabajo en la calle encendimos y nos mostraba este mensaje:

Ocurrio un error al montar /boot/efi.
Pulse S para no montar o M para una reparación manual.

Al escoger la opción “no montar” pues acepta contraseña pero al no tener acceso al disco duro pues regresa a la pantalla de inicio de sesión. Al escoger la opción de reparación manual “cae” con credenciales de “root” y al introducir:

sudo apt-get update

no se ejecuta correctamente y sugiere el comando dpkg.

Aplicamos:

sudo dpkg --configure -a

y luego el comando “reboot” tras lo cual arranca correctamente. Suponemos que como tenemos configurada las actualizaciones del sistema operativo como “descargar e instalar automáticamente” pues estaba precisamente en ese proceso cuando la pusimos a hibernar.

Agradecemos a los amables colaboradores de Ubuntu-es.org por proporcionarmos la solución, podéis leer el caso en este enlace web.

Enlaces consultados:

En idioma castellano:

En idioma inglés:

VirtualBox logo

VirtualBox 5.0.14

VirtualBox 5.0.14 es la última actualización a la fecha de hoy 22 de enero de 2016, nosotros usamos intensamente este entorno de virtualización tanto para servidores en producción como servidores en desarrollo. Esta última versión hoy la descargamos e instalamos sobre los servidores de desarrollo y dentro de unas dos semanas que hayamos probado su estabilidad y certeza de rapidez y eficiencia, será aplicado a los de producción.

VirtualBox - Acerca de.
VirtualBox – Acerca de.

A continuación la lista de cambios que igual podeís leer en la página web oficial de VirtualBox ¿Que para qué lo repetimos aquí? pues bueno le damos valor agregado a lo que consideramos importante (o digno de recalcar) y utilizamos el color verde en la fuente de letra para ello.


VirtualBox 5.0.14 (released 2016-01-19)

This is a maintenance release. The following items were fixed and/or added:

  • GUI: properly limit the number of VCPUs to the number of physical cores on Mac OS X (bug #15018)
  • Audio: fixed a bug which prevented loading a saved state of a saved guests with HDA emulation (5.0.12 regression; bug #14981)
  • Audio: don’t crash if the backend is unable to initialize (bug #14960)
  • Audio: fixed audio capture on Mac OS X (bug #14386)
  • Storage: fixed a possible crash when attaching the same ISO image multiple times to the same VM (bug #14951)
  • BIOS: properly report if two floppy drives are attached <— JE JE JE 😎
  • USB: fixed a problem with filters which would not capture the device under certain circumstances (5.0.10 regression; bug #15042)
  • ExtPack: black-list Extension Packs older than 4.3.30 due to incompatible changes not being properly handled in the past
  • Windows hosts: fixed a regression which caused robocopy to fail (bug #14958)
  • Linux hosts: properly create the /sbin/rcvboxdrv symbolic link (5.0.12 regression; bug #14989)
  • Mac OS X hosts: several fixes for USB on El Capitan (bug #14677)
  • Linux Additions: fixes for Linux 4.5 (bug #15032)

 

Trabajo, trabajo y más trabajo, lo único constante es el cambio.

VirtualBox 5.0.14

VirtualBox 5.0.14 instalando y compilando kernel con dkms.
VirtualBox 5.0.14 instalando y compilando kernel con dkms.

En la imagen arriba podeís obervar el proceso de actualización e instalación en Ubuntu 14.04 y en lo particular agradezco la deferencia de que revise si el grupo “vboxusers” está agregado al sistema GNU/Linux correspondiente (esto permite el acceso de los puertos USB, incluso 3.0, a las máquinas virtuales) y lo otro es la compilación in situ del kernel necesario, el que se adapta perfectamente al hardware donde uno tiene corriendo el sistema operativo. Todo esto permite eficiencia al máximo, el mejor aprovechamiento de recursos físicos “compilación personalizada” si le queremos dar un nombre. Si creeís que es una tontería esto último, leed la siguiente noticia sobre el futuro que se nos avecina, ahora les dicen “unikernels”.

Actualizando los paquetes de extensiones.

El proceso no estaría completo si no actualizamos los paquetes de extensión (bueno, en realidad utilizamos sólo uno, el de Oracle, pero allí está abierta la posibilidad si queréis usar el de un tercero e incluso desarrollar el vuestro ¡LIBERTAD!) en este caso la versión numérica coincide identicamente:

Descargando paquete de extensión 5.0.14 para VirtualBox
Descargando paquete de extensión 5.0.14 para VirtualBox
Descargado paquete de extensión 5.0.14 para VirtualBox
Descargado paquete de extensión 5.0.14 para VirtualBox
Advertencia antes de instalar paquete de extensión 5.0.14 para VirtualBox
Advertencia antes de instalar paquete de extensión 5.0.14 para VirtualBox
Instalado paquete de extensión 5.0.14 para VirtualBox
Instalado paquete de extensión 5.0.14 para VirtualBox

Casi olvidamos mencionar que, curiosamente, el paquete de extensión se actualiza AL EJECUTAR VIRTUALBOX y no por el repositorio de Ubuntu, que es lo normal además por todas las distribuciones Debian pero que la interfaz gráfica es bonita, ea, que nos gusta la línea de comandos pero esto de la interfaz gráfica cuela y mola en cantidad 😉 .

Actualización de software Ubuntu 14.04
Actualización de software Ubuntu 14.04

VBoxGuestAdditions.

Por último debemos actualizar en las máquinas virtuales el VBoxGuestAdditions el cual permite, por ejemplo, los gráficos 3D y los puertos USB, si a ver vamos, somo controladores “drivers” del entorno VirtualBox (recordar que los BIOS, NIC’s, etc son emulados) para descargar el archivo ISO deben ir a esta dirección web.

Aquí una copia del contenido remoto:

Index of http://download.virtualbox.org/virtualbox/5.0.14

      Name                                                                  Last modified      Size
      MD5SUMS                                                               19-Jan-2016 20:38  3.1K
      Oracle_VM_VirtualBox_Extension_Pack-5.0.14-105127.vbox-extpack        19-Jan-2016 17:55  17M
      Oracle_VM_VirtualBox_Extension_Pack-5.0.14.vbox-extpack               19-Jan-2016 17:55  17M
      SDKRef.pdf                                                            19-Jan-2016 18:14  2.4M
      SHA256SUMS                                                            19-Jan-2016 20:38  4.3K
      UserManual.pdf                                                        19-Jan-2016 17:43  3.4M
      VBoxGuestAdditions_5.0.14.iso                                         19-Jan-2016 17:46  57M
      VirtualBox-5.0-5.0.14_105127_el5-1.i386.rpm                           19-Jan-2016 18:48  81M
      VirtualBox-5.0-5.0.14_105127_el5-1.x86_64.rpm                         19-Jan-2016 18:48  82M
      VirtualBox-5.0-5.0.14_105127_el6-1.i686.rpm                           19-Jan-2016 18:48  73M
      VirtualBox-5.0-5.0.14_105127_el6-1.x86_64.rpm                         19-Jan-2016 19:18  73M
      VirtualBox-5.0-5.0.14_105127_el7-1.x86_64.rpm                         19-Jan-2016 20:04  68M
      VirtualBox-5.0-5.0.14_105127_fedora18-1.i686.rpm                      19-Jan-2016 20:04  68M
      VirtualBox-5.0-5.0.14_105127_fedora18-1.x86_64.rpm                    19-Jan-2016 20:22  68M
      VirtualBox-5.0-5.0.14_105127_fedora22-1.i686.rpm                      19-Jan-2016 20:04  68M
      VirtualBox-5.0-5.0.14_105127_fedora22-1.x86_64.rpm                    19-Jan-2016 20:04  68M
      VirtualBox-5.0-5.0.14_105127_openSUSE131-1.i586.rpm                   19-Jan-2016 20:04  62M
      VirtualBox-5.0-5.0.14_105127_openSUSE131-1.x86_64.rpm                 19-Jan-2016 20:04  62M
      VirtualBox-5.0-5.0.14_105127_openSUSE132-1.i586.rpm                   19-Jan-2016 20:04  62M
      VirtualBox-5.0-5.0.14_105127_openSUSE132-1.x86_64.rpm                 19-Jan-2016 20:04  62M
      VirtualBox-5.0-5.0.14_105127_sles11.0-1.i586.rpm                      19-Jan-2016 19:18  72M
      VirtualBox-5.0-5.0.14_105127_sles11.0-1.x86_64.rpm                    19-Jan-2016 19:18  72M
      VirtualBox-5.0.14-105127-Linux_amd64.run                              19-Jan-2016 18:00  81M
      VirtualBox-5.0.14-105127-Linux_x86.run                                19-Jan-2016 17:56  80M
      VirtualBox-5.0.14-105127-OSX.dmg                                      19-Jan-2016 18:04  87M
      VirtualBox-5.0.14-105127-SunOS.tar.gz                                 19-Jan-2016 17:57  94M
      VirtualBox-5.0.14-105127-Win.exe                                      19-Jan-2016 18:10  112M
      VirtualBox-5.0.14.tar.bz2                                             19-Jan-2016 17:58  106M
      VirtualBoxSDK-5.0.14-105127.zip                                       19-Jan-2016 18:02  9.2M
      virtualbox-5.0_5.0.14-105127~Debian~jessie_amd64.deb                  19-Jan-2016 19:04  62M
      virtualbox-5.0_5.0.14-105127~Debian~jessie_i386.deb                   19-Jan-2016 18:57  62M
      virtualbox-5.0_5.0.14-105127~Debian~squeeze_amd64.deb                 19-Jan-2016 18:26  67M
      virtualbox-5.0_5.0.14-105127~Debian~squeeze_i386.deb                  19-Jan-2016 18:09  67M
      virtualbox-5.0_5.0.14-105127~Debian~wheezy_amd64.deb                  19-Jan-2016 20:33  61M
      virtualbox-5.0_5.0.14-105127~Debian~wheezy_i386.deb                   19-Jan-2016 20:25  62M
      virtualbox-5.0_5.0.14-105127~Ubuntu~precise_amd64.deb                 19-Jan-2016 20:16  61M
      virtualbox-5.0_5.0.14-105127~Ubuntu~precise_i386.deb                  19-Jan-2016 20:09  62M
      virtualbox-5.0_5.0.14-105127~Ubuntu~trusty_amd64.deb                  19-Jan-2016 18:48  61M
      virtualbox-5.0_5.0.14-105127~Ubuntu~trusty_i386.deb                   19-Jan-2016 18:41  61M
      virtualbox-5.0_5.0.14-105127~Ubuntu~wily_amd64.deb                    19-Jan-2016 18:33  62M
      virtualbox-5.0_5.0.14-105127~Ubuntu~wily_i386.deb                     19-Jan-2016 18:26  62M
download.virtualbox.org

Actualizado el sábado 05 de marzo de 2016.

Es muy bienvenida la versión 5.0.16 y compiló los módulos del kernel sin problemas:

VirtualBox kernel modules 5.0.16
VirtualBox kernel modules 5.0.16

<Eso es todo, por ahora>.

Instalando Chromixium en una máquina VirtualBox.

He de confesarles que utilizo como navegador web al Mozilla Firefox, que es muy bueno y al Iceweasel que es mejor aún, pero no pueden competir con el caché web alojado en los servidores de Google para su navegador Chromium o Chrome. Es por ello que estaba buscando la manera de instalarlos de la manera más rápida y práctica posible y no me sentía a gusto; luego leí el reportaje “Chromixium: fusiona lo mejor de Chrome OS y Ubuntu” así que ni tardo ni perezoso me dispuse a bajarla por torrent y al poco rato la había instalado y estaba funcionando. RECOMIENDO presten atención en el particionado del disco, un detallito si escogen la opción “automatica”; donde tuve más contratiempo fue en la configuracion de teclado y lenguaje. Acá está el enlace para los detalles completos de requerimientos e instalación (en inglés) pero primero dediquen un tiempito a mirar el video y tendrán mejor panorama de la instalación.

Actualizado el 16 de noviembre de 2015:

He descargado la nueva versión 1.5 (debería ser la versión 15, pero en fin, que es la última versión publicada) y les traigo de nuevo la instalación. Lo diferente en este caso es que seleccioné completo el disco duro, todo lo demás lo dejé igual. Apliando el tema de uso del Google Chrome es que tiene ciertas características que me hacen la vida más llevadera a la hora de usar el Twitter. He aquí como quedó ahora {la otra máquina virtual la borré, esto de virtualizar es maravilloso 😎 }:

<Eso es todo, por ahora>.

Curso básico de HTML 5.

Ya usted, ellos, ellas y yo lo sé: hay infinidad de tutoriales en internet sobre HTML: sería “llover sobre mojado” volver a tratar el tema, pero ¿quién dijo miedo? 😉

En mi caso, el que me ocupa, es actualizarme al HTML 5 y enfrentar a dos viejos “demonios” en esto de la creación de páginas web. Y no, no me refiero a los servicios en GNU/Linux a los cuales llamamos “D.A.E.MON” si no a los dos grandes problemas que debemos enfrentar antes de comenzar a escribir una sola línea de código en HTML:

  1. La multitud de navegadores web existentes y el legado que traemos a rastras, ya que muchas personas se niegan a actualizar sus programas. Agreguemos a eso las particularidades de los nuevos celulares con Android y ni mencionemos los celulares con WAP (y por ende WML) que aún están en uso con sus micronavegadores.
  2. Los gustos de nosotros los seres humanos en cuanto a diseño, colores y funcionalidad de las páginas web (en otra entrada presentaré las hojas de estilo en cascada con las cuales enfrentaremos este aspecto).

Y para no abrumarlos ni abrumarlas más comienzo de una vez el tema.

Prefacio.

La “World Wide Web”, tal como la conocemos hoy día, vino de la genial idea del profesor Tim Berners-Lee (inspirado por Ted Nelson y convencido por Richard Matthew Stallman) y es quien actualmente aún lleva las riendas al presidir la “World Wide Web Consortium“, una organización creada en 1994, que agrupa a nivel mundial a más de 300 entes y quienes en conjunto recomiendan las normas del HTML. Y sí, leyeron bien, RECOMIENDAN las normativas ya que el HTML no es en realidad un lenguaje de programación sino un lenguaje de marcado, que además descansa sobre dos tecnologías llamada URL y HTTP. Por ahora sólo necesitamos saber de dónde viene y cuál es la situación actual, si quereís ahondar en conocimientos allí mismo teneís los enlaces (gracias de nuevo Señor Tim Berners-Lee).

Los lenguajes de marcado son (y para poder explicarlo y que sea comprensible rápidamente) como el antiguo dictado oral que hacíamos a las secretarias y/o mecanógrafas (casi siempre eran mujeres por su talento natural para lidiar con formas, colores y seres humanos) en el siglo pasado:

“Ponga estilo de carta. ponga comillas, ponga mayúsculas, Estimado Juan, ponga dos puntos, aparte, sangría, ponga primera letra mayúscula, te escribo esta carta, ponga negrillas, de forma muy urgente, cierre negrilla, ya que no me has enviado… etcétera“.

Y para los que nacimos y tuvimos la oportunidad de vivir en el siglo pasado, cada empleada tenía su manera de escribir y presentar las cartas, de allí la actuación de los navegadores web, cada uno ofrece ventajas y desventajas y cada quien escoge de acuerdo a sus necesidades.

Aclaratoria.

A menos que se diga expresamente lo contrario, todo a lo que nos refiramos es HTML versión 5, la del año 2014, la recomendada. Por supuesto que las etiquetas html presentan cierta compatibilidad hacia atrás, y también hay unas totalmente nuevas para esta versión. No entraré demasiado en dichas compatibilidades, si quereís estudiar ese aspecto por favor seguid los enlaces que presento a lo largo y ancho de la entrada. Si ya sabéis, habéis adquirido conocimiento con antelación, os recomiendo un tema más avanzado escrito en este mismo blog: Un CAPTCHA fácil y sencillo de implementar“.

Otra cosa que os parecerá harto extraño (pasado el tiempo lo comprenderíes con la experiencia que logréis) yo seguiré la siguiente consigna:

“Cualquiera puede equivocarse, excepto nosotros“.

¿Qué significa lo anterior? Que seremos más estrictos en la sintaxis del HTML pero sin llegar a declararnos explícitamente como XHTML, así tendremos lo mejor de ambos mundos.

Mi primera página web.

Así que llegamos a dar nuestros pininos en el internet como protagonistas y no como simples lectores. Las páginas web descansan en archivos de texto plano con la extensión .htm o para los sistemas operativos modernos .html y dichas extensiones permiten que identifiquemos qué tipo de contenido albergan más sin embargo para nuestras computadoras el contenido es lo importante. Es así que debemos conocer nuestro primer elemento del lenguaje HTML dentro del archivo nombrado (recordemos que los nombres de archivos son sensibles a mayúsculas y minúsculas):

<!doctype html>

 Como vemos comienza con el signo “mayor que” y finaliza con “menor que”. He aquí la primera diferencia con los lenguajes de programación: aquí dichos símbolos carecen de significado matemático alguno, sirven más bien como delimitadores. Ya que le damos ese uso, nuestra mente cambia el enfoque y los asocia a los paréntesisque trabajan por pares donde uno “abre” y el otro “cierra”. Dentro de esta categoría están los corchetes y luego las llaves: ( [ { } ] ) , en ese orden anidado. Como son rectos y se parecen más a los corchetes que a los otros dos optamos por llamarlos corchetes angulares y así son llamados en inglés angle brackets (y en inglés antiguo chevrons). Y hemos de referirnos al inglés porque precisamente es éste el idioma en el que está escrito el HTML, angle brackets es la traducción literal de corchetes angulares.

Dentro de estos delimitadores está el cierre del signo de admiración acompañado de la palabra doctype que es un recurso nemotécnico abreviado de  “DOCument TYPE” y traduciremos como “tipo de documento” acompañado, por supuesto, de la palabra html. Para este caso particular el uso de mayúsculas y minúsculas es indistinto pero tiene una excepción: como esta declaración se incluye por compatibilidad con anteriores versiones del lenguaje y dichos identificadores para cada versión son un tanto largas y complicadas y de paso eran obligatorias se decidió incorporar lo que yo llamo “un relleno” que debe ser escrito literalmente y entre comillas dobles o simples para aquellos servidores que buscan estos identificadores: dicha sentencia es “about:legacy-compat” que viene a ser leida por nosotros como “acerca de:compatibilidad heredada”. Nuestra primera linea quedaría de la siguiente manera:

<!doctype html system "about:legacy-compat">

La segunda linea a continuación define la página web en sí y tiene el propio nombre html para declarar dónde comienza y dónde termina:

<html lang="es-419"> ... </html>

Donde están los puntos suspensivos colocaremos todo el código, notemos la nomenclatura para definir el idioma y región de nuestro país según el organismo Naciones Unidas: “es-419”; (y ratificado por el W3C en esta página, sin embargo muchos utilizan la norma ISO 639-1 ambos son válidos si recordamos que la W3C sólo recomienda, no obliga) y si necesitaramos programar para alguna otra región del mundo acá está el resto de los códigos.

A partir de este momento colocaré el código completo de la página web las cual ustedes introducirán con el editor de texto de su preferencia, hay muchos, a mi me gusta el nano, notepad++ y gedit. Para uso avanzado están vi y vim. Las capturas de pantalla que verán son tomadas al gedit que viene con ubuntu al cual le hice unas cuantas modificaciones de perfil, para verlas en detalle haga click aquí.

<!doctype html system "about:legacy-compat">
<html lang="es-419">

</html>

Nosotros los seres humanos necesitamos, nos gusta, tener información adicional que nos guía o aclara el código pero que para las máquinas no tiene relevancia. La manera de que ellas “ignoren” dichos datos es colocándolo como comentarios con la siguiente sintaxis:

<!-- ... -->

Donde están los tres puntos insertamos el comentario que deseemos, no importa si ocupa varias lineas pero lo importante es que tengan su apertura y cierre. ¿Recuerdan que les dije que gedit lo utilizo con una configuración especial? Comparen el código que llevamos en purito texto plano y vean como lo presenta el editor de texto gedit:

<!doctype html system "about:legacy-compat"><!--Declara HTML5-->
<html lang="es-419"><!--Escrito en castellano de América-->

</html>

-primera_clase.html (~) - gedit_029

¡Qué diferencia! Al suministrar el nombre al archivo, con todo y extensión, gedit automáticamente codifica al lenguaje html como pueden obervar en la barra de estado inferior de la ventana.

El siguiente paso que haremos es ir a la carpeta donde guardamos nuestro archivo ( al que le dimos el nombre “primera_clase.html”) y lo abrimos ya sea con doble click, click izquierdo o click derecho+abrir en navegador. Cada sistema operativo moderno tiene un navegador web predeterminado, así es que se puede visualizar nuestra primera página web, MÁS SIN EMBARGO NO VEREMOS NADA PUES AÚN FALTAN MÁS LÍNEAS DE CÓDIGO. ¿Por qué entonces yo pido abrirla de una vez, sin más?

La respuesta es: pedirle al navegador web que nos muestre la página web que estamos haciendo para visualizar el código fuente (generalmente haciendo click derecho sobre nuestra página web abierta en navegador). Quiero hacer énfasis que una página web, a pesar de todo nuestro empeño de escribirla bien -según las recomendaciones- depende de algunas cosas más. Les muestro lo que interpreta nuestro navegador web, en este caso Mozilla Firefox:

Fuente de: file:---home-jimmy-primera_clase.html - Mozilla Firefox_015

El punto que quiero recalcar es la palabra América la cual se muestra incorrectamente, con unos caracteres extraños, así que hemos de reparar en que nuestro bello idioma castellano sea escrito (y visualizado) correctamente. A pesar de derivar del latín, (idioma que nunca tuvo acentos ni signos ortogŕaficos) con la evolución de nuestro idioma se llegó a un lenguaje de marcado (ver inicio de esta entrada) que ayuda muchísimo a transmitir mejor las ideas; o lo que yo llamo “degustar las palabras”. Es por ello que en el lenguaje HTML se tomó la previsión de mostrar correctamente dichos caracteres con etiquetas especiales, así tenemos que para mostrar nuestras vocales acentuadas y la letra eñe (las mayúsculas siguen la misma normativa):

á -> &aacute;
é -> &eacute;
í -> &iacute;
ó -> &oacute;
ú -> &uacute;
ñ -> &ntilde;

Y para los acentos en idioma catalán y francés (aquí podeís ver una lista de los más utilizados):

à -> &agrave;
è -> &egrave;
ì -> &igrave;
ò -> &ograve;
ù -> &ugrave;
â -> &acirc;
ê -> &ecirc;
î -> &icirc;
ô -> &ocirc;
û -> &ucirc;

Si insertamos los anteriores caracteres “especiales” (no usados en el idioma inglés) en nuestra primera página web, la guardamos y abrimos con nuestro navegador web (y pedimos visualizar nuestro código fuente) veríamos algo similar a esto en el programa gedit:

primera_clase.html (~) - gedit_019

Y en el navegador web Mozilla Firefox:

Área de trabajo 1_016

Como pueden notar el navegador cumple con su trabajo de mostrar los caracteres especiales, más sin embargo podemos observar que la palabra América en el comentario sigue sin visualizarse correctamente y no, no es porque no utilicé el &ecute; (si quieren hagan la prueba) es por otro motivo más importante. Y, yo ya se que los comentarios no revisten importancia, pensarán ustedes, total eso no se muestra en nuestra página web, sigamos adelante y comprenderán.

Mi primera página web es en castellano.

Ya que hay muchísimas páginas web en inglés, pues vaya que le toca al castellano llenar espacio. Antes de proseguir debo aclarar que lo que los voy a comentar lo aprendí en esta página web. (si no está en línea, prueben este otro enlace). Si quieren saber la historia de la codificación de caracteres puede leer (en inglés) esta otra página web del lenguaje de programación Python. Debemos indicar también que tocaremos brevemente ciertos aspectos inherentes a los programas que sirven páginas web, “servidores web”.

Volviendo a nuestro archivo de texto plano con extensión .html y editado con el programa gedit debemos tener especial cuidado en guardar dicho archivo en la codificación de caracteres utf-8 tal como muestro al escoger la opción “Guardar como”, les resalto con una elipse para acentuar la opción:

Guardar como_035

¿Por qué usar UTF-8 en vez de otros sistemas de codificación?

La respuesta les va a sorprender (y el que me quiera refutar, por favor escriba abajo en los comentarios): USAMOS EL UTF-8 POR COSTUMBRE HEREDADA DEL IMPERIO ROMANO, nacido además en Grecia, cuna de nuestra civilización occidental. Es así, de hecho, que en marzo de 2015 el 83% de las páginas web utilizan esta codificación, y de paso es la recomendada por la World Wide Web Consortium (W3C) por su compatibilidad hacia atrás con la codificación ASCII y hacia adelante con los caracteres (o más bien ideogramas) orientales (hindi, coreano, chino, etc). Esta “compatibilidad hacia adelante” se ve sacrificada por el aumento de bytes en página ya que el UTF-8 fue pensado para ser de longitud variable: si escribimos en cualquier lengua indoeuropea usaremos menos espacio y si escribimos en ideogramas usaremos un poco más de espacio. Es por ello que elegimos UTF-8 PERO NO SE LIMITEN A ELLO si se les presenta la oportunidad de trabajar en otro país de Asia (ejemplo loable cuenta Twitter: @Kopepasah ), si ese fuera su caso, están las codificaciones UTF-16 y la más completa por ahora UTF-32 (vean aquí cómo se estructuran los caracteres); agregarlas a nuestro programa gedit es bien fácil, sólo hacemos click en la ‘flechita’ de codificación de caracteres (ver gráfico anterior) y escogemos “añadir o quitar” y nos muestra este cuadro de diálogo:

Códigos de caracteres_037

Seleccionamos la codificación que necesitaramos y listo, lo guardamos en esa codificación PERO CON EL CUIDADO ESPECIAL DE ESPECIFICARLO EN NUESTRA PÁGINA WEB.

El metacomando para declarar la codificación de caracteres escogida es:

 y debe ser incluida en el meta comando head:

<head><meta charset="UTF-8"></head>

Sólo queda informar dos detalles más acerca de esto y es referida explícitamente al programa servidor web Apache utilizado ampliamente en el mundo:

  • Lo correcto es que incluyamos dicha sentencia en todas y cada una de nuestras páginas html pero hay quienes piensan que debemos simplificarnos la vida y configurar a Apache a que automáticamente ‘emita’ nuestra página web con dicha configuración UTF-8.
  • Debido a lo anterior podemos especificar en el archivo .htacces en el directorio raíz de nuestro sitio web (subdirectorios ‘heredarán’ la configuración) que contenga la sentencia “AddDefaultCharset UTF-8“.
  • Si se configura según el punto anterior, el servidor obviará la sentencia que coloquemos en el fichero .html: si por ejemplo especificamos <head><meta charset=”UTF-16″></head> se obviará UTF-16 y será emitido como UTF-8.
  • Si especificamos en el fichero /etc/apache2/conf.d/charset la sentencia “AddDefaultCharset UTF-8” tendrá el mismo efecto con la diferencia que afectará a todos y cada uno de los sitios web alojados en ese servidor (esta configuración es muy común para ahorrar hardware con sitios web de poco tráfico).
  • Es por tanto que recomendamos agregar en el archivo .htacces la sentencia “AddDefaultCharset OFF” y simplemente a cada archivo .html le especificamos <head><meta charset=”UTF-8″></head>.
  • De ser posible que tengamos acceso /etc/apache2/conf.d/charset (osea, el servidor está entera y únicamente a nuestro sitio web) agregarlo allí también para mayor seguridad (si desea saber más vaya usted a este enlace).
  • Para finalizar este punto, existe un método para indicar la codificación de caracteres empleando lenguaje PHP pero escapa al alcance de este tutorial, no obstante anótenlo para tenerlo siempre presente cuando evolucionemos.

Agregando más comandos a <head></head>.

Al comando para declarar la codificación de caracteres, agregaremos las siguientes etiquetas para que el navegador muestre nuestro título de página en la ventana , si es que el dispositivo lo permite (por ejemplo los celulares no lo hacen):

<title>Titulo de la página web.</title>

En dicha cabecera (que sería la traducción al castellano), además de <meta> y <title> admite los siguientes elementos:

  • <style>…</style>:permite especificar estilos como color de fondo, color de texto, etc. aplicadas a cada sección o texto de la página web.
  • <link>: si por el contrario queremos especificar dichos estilos en un archivo aparte para servir distintos archivos .html en un mismo directorio, podemos usarlo y ahorrar esfuerzo y espacio en disco. No tiene etiqueta de cierre. Dichos aspectos son cubiertos por las Hojas de Estilo en Cascada (cascading style sheets o CSS) y las presentaremos en el siguiente capítulo, por ahora basta saber que la sintaxis será (ejemplo): <link rel=”stylesheet” href=”mystyle.css”>
  • <script></script>: sirve para encerrar código en lenguaje de programación interpretado del lado del cliente (nuestro navegador web) denominado JavaScript (aunque también tiene una versión del lado del servidor). Merece una entrada totalmente aparte.
  • <base>: permite especificar una directorio diferente al que por defecto está nuestra página web. No tiene etiqueta de cierre. En nuestro caso, por ejemplo, nos serviría para especificar imágenes alojadas incluso en otro servidor web (si lo permite) ahorrándonos la escritura de código adicional. Ejemplo: <base href=“http://www.w3schools.com/images/”>
  • Por último volvemos a la etiqueta <meta></meta>, la cual puede contener numerosos valores, ya vimos charset pero además acepta name, http-equiv, e itemprop.

Como pueden ver, las opciones se nos agigantaron rápidamente, pero cuando algo es complejo debemos picarlo en trozos para luego digerirlos uno por uno. Volviendo a nuestra primera página quedaría de la siguiente manera:

Mi primera página web es en castellano

página web y código fuente

Cuerpo de página:la etiqueta <body></body>.

Como pueden observar hasta ahora lo único  “visible” que hemos hecho son los caracteres especiales los cuales incluimos con propósitos didácticos. Para estar en lo correcto debemos encerrarlas entre las etiquetas <body>…</body>, donde están los puntos supensivos. Dentro de estas etiquetas irá toda nuestra página web ordenadas con las siguientes etiquetas:

  • <header></header>: un resúmen de la página, pudiéndose indicar además algún ícono y/o datos del autor. Se pueden declarar varias veces, de ser necesario, aunque nuestro estilo será declararlo una sola vez por página.
  • <section></section>: donde se desglosará lo planteado en el punto anterior pero además debemos encerrarlos entre <article>…</article>. Se pueden declarar las veces que sean necesarias, pero recuerden anidar correctamente cada uno: <section><article></article></section>.
  • Refinando el punto anterior, HTML5 no manda ni ordena anidar de la forma en que yo lo explico pero ¿A quién NO le gusta el orden y sentido?
  • Si queremos mostrar una figura e incluso colocarle un texto descriptivo usaremos <figure> </figure> y <figure> (imagen) <figcaption> (texto) </figcaption></figure>.
  • Si queremos mostrar un menú lateral debemos usar <aside></aside>.
  • Para finalizar el elemento de pie de página <footer></footer> donde podemos indicar autoría, licencias de uso, datos de contacto, mapa del sitio o enlaces externos o internos como siguiente o previo.
  • NÓTESE EL EXTRAORDINARIO PARECIDO con escribir un libro:
    1. Datos de imprenta: <doctype>.
    2. Lomo del libro: <head> y <title>.
    3. El libro en si mismo: <html>.
    4. Prólogo y/o índice: <header>.
    5. Capítulos y subcapítulos: <section><article>.
    6. Imágenes y/o gráficos explicativos: <figure>.
    7. Comentarios al margen: <aside>.
    8. Pie de página -mayor analogía imposible-: <footer>.

Diseño de página.

Llámenme “conservador” pero Gutenberg y el medioevo siguen vigentes hoy día, así como físicamente un libro debe ser diagramado según unos valores armónicos, nosotros también debemos otorgárselo a nuestra página web. He aquí cómo se hacía antes y hacia adonde vamos ahora:

Popularized by Jan Tschichold in his book The Form of the Book in 1975.
The Van de Graaf canon is used in book design to divide a page in pleasing proportions. This canon is also known as the “secret canon” used in many medieval manuscripts and incunabula. The page proportions vary, but most commonly used is the 2:3 proportion. In this canon the text area and page size are of same proportions, and the height of the text area equals the page width.

Tal como en la antigüedad se dieron a la tarea de diagramar los libros hoy en día hay gente que se ha dado a la tarea de ahorrarnos ese trabajo con unos marcos de trabajo (framework) para el lenguaje HTML pero eso lo explicaré en su entrada respectiva.

En este punto les muestro cómo es la estructura de cualquiera página web, lo que está en color blanco es lo que nos muestra finalmente nuestro navegador web preferido:

HTML page structureEn el gráfico anterior, si detallan bien, hay dos elementos que aún no he explicado: son los comandos que nos permiten insertar un título y su párrafo correspondiente; ¿recuerdan la analogía con un libro? Pues ahora vamos a ello.

Títulos y párrafos.

Los títulos que deseemos deben ir dentro de la siguiente estructura de comando, siendo 1 el tamaño más grande y el 6 el más pequeño. No debemos preocuparnos por la fuente de letra que utilice el navegador, dicho programa al leer  el tamaño del título se encargará de mostrarlo adecuadamente.

<h1>Título 1.</h1>
<h2>Título 2.</h2>
<h3>Título 3.</h3>
<h4>Título 4.</h4>
<h5>Título 5.</h5>
<h6>Título 6.</h6>

Acá pueden observar, “en vivo”, cómo se mostraría nuestra página web en castellano en su navegador favorito o escogido para leer mi enseñanza.

primera_clase_titulos_y_parrafosAntes de continuar debo explicaros ciertos detallitos con propósitos didácticos y prácticos:

  • Ya nuestra página tiene 35 líneas y es difícil de mostrar en una sola captura de pantalla, si haceís click en la última imagen podrán verla en una ventana (o pestaña) nueva en su tamaño original.
  • El código indentado facilita la legibilidad a los humanos pero ocupa espacio -tanto en disco como en tráfico- cuando el usuario solicita la página.
  • Dicho código indentado me fue posible escribirlo rápidamente con la personalización que le hice a gedit, el indentado ayuda a visualizar y los resaltados de colores nos ayuda a encontrar errores de sintaxis.
  • Podríamos eliminar los “espacios sobrantes” a fin  de optimizarla para cuando la vayamos a publicar pero dicho trabajo es titánico a la larga.
  • Además podríamos indicarle a nuestro servidor Apache que comprima todo lo que vaya a enviar a los usuarios, pero ese tema escapa a este tutorial.
  • Debido a todo lo anterior en lo sucesivo sólo explicaré el comando correspondiente y su enlace “en vivo” para que vean cómo lo interpreta su navegador web y con click derecho (o el método adecuado) observen el código fuente, analízenlo y vuelven por estos lares. Ojito pues. 😉
  • Por supuesto debo acotar que esto último de los espacios extras para el código html ya otras personas han tenido que lidiarlo y lo han sobrellevado pero que muy bien; por ejemplo en esta página web nos hacen el trabajo: copiando , pegando y ejecutando me dice que pudo cortar 123 espacios, éso son 984 bits ahorrados, multipliquen eso por las miles o decenas de miles de visitas a su página web: bueno “éso no son conchas de ajo” como dice el refrán.

Formato básico del texto.

Ya sabemos cómo agregar títulos y párrafos en lenguaje html, ahora veremos cómo darle formato a nuestro texto, verbi gratia a lo largo de este tutorial hacemos gala de ello.

Texto en negritas:

<p>«Los Estados Unidos parecen destinados por la Providencia a plagar la América de miserias en nombre de la libertad».<br><b>Simón Bolívar.</b></p>

El pensamiento de nuestro Libertador arriba expresado en lenguaje html introduce el salto de línea para separar la cita del autor ya que debemos tener en cuenta que los navegadores hacen sólo lo que le ordenamos: todo el texto es un párrafo y así lo muestra, seguido, pero a fin de darle un sentido de relación (pensamiento-autor) se le debe insertar el comando <br> cuantas veces lo necesitemos recordando siempre que separa líneas, no párrafos.

En XHTML se debe escribir como <br />, con un espacio entre la letra erre y la barra, teniendo un así un “autocierre” pero en HTML dicho comando no tiene cierre y si le agregamos (</br> o <br/>) los navegadores lo admiten e interpretan como <br>. Yo prefiero utilizar <br /> tal y como convenimos al comienzo de este documento.

¿Recuerdan lo que hablamos sobre eliminar los espacios del texto indentado? Pues bien he de añadirles que si escribimos varios espacios entre las palabras y saltos de línea nuestro navegador web lo mostrará exactamente igual. Así el código arriba mostrado es igual a este:

<p>«Los Estados Unidos   parecen destinados por la Providencia a plagar   la América de   miserias en    nombre de la libertad».<br>


<b>Simón

1
&amp;nbsp;
Bolívar.</b></p>

Noten esas letras que agregué entre el nombre y apellido: se conoce como espacio irrompible y se utiliza para decirle al navegador que mantenga esas dos palabras unidas por un espacio sin importar ningún otro comando (centrado, justificado, etc.) y se representa como &nbsp; y observen el recurso nemotécnico: nbsp=NoBlankSPace (encerrado entre et y punto y coma tal como lo vimos para representar caracteres especiales; si lo pensamos bien es un comando de apertura y cierre no simétrico en html).

Texto en cursivas:

<i>Fuente</i>: de la carta al Coronel Campbell, Guayaquil, 5 de agosto de 1829.

Si queremos “aislar” dicho pensamiento podemos agregar una linea horizontal antes y después y no es necesario escribir una serie de guiones como estilan los editores de texto avanzados, simplemente le colocamos <hr> y para ser más preciso con su correspondiente autocierre <hr /> (tal como lo expliqué dos párrafos hacia arriba).

Texto enfatizado:

Es diferente de las cursivas (también llamadas “italics” en inglés) y nos sirve para hacer notar algo, por ejemplo fechas, tal como lo muestro:

<i>Fuente</i>: de la carta al Coronel Campbell, <em>Guayaquil, 5 de agosto de 1829</em>.

Tal vez veamos iguales a cursivas y enfatizados en nuestro navegador web. Pero hay diferencia, y aquí voy a englobar la etiqueta de negritas <b> con la etiqueta fuerte <strong>: mientras que <i> y <b> es opcional para el navegador el mostrarlo diferente, las etiquetas <em> y <strong> obligan a mostrarlo diferente.

Aún más allá, como los dispositivos electrónicos han adquirido gran poder de cálculo, eso ha permitido que incluso dichos aparatos lean en voz alta a personas discapacitadas de la vista y cuando encuentran las etiquetas <em> y <strong> el tono de voz cambia de manera correspondiente.

Texto “grande” y “pequeño”:

Encierro entre comillas los términos sólamente para que noten que dependerá del tamaño predefinido en su navegador web: en base a ese tamaño mostrará más grande o más pequeño los textos a mostrar:

<p>
  <big>«Los Estados Unidos   parecen destinados por la Providencia a plagar la América de miserias en nombre de la libertad».<br />
  <b>Simón&nbsp;Bolívar.</b></big><br />
  <small><i>Fuente</i>: de la carta al Coronel Campbell, <em>5 de agosto de 1829</em></small>.
</p>

Texto “preformateado”:

Muchas veces necesitamos, por ejemplo, escribir fórmulas matemáticas (y ya sabemos cómo insertar caracteres especiales) y por practicidad se definió este comando para que el navegador lo presente con una fuente monoespaciada y respetando los espacios y saltos de lineas sin necesidad de etiquetas especiales tal como hemos venido aprendiendo. Aquí la simplicidad es bienvenida, imaginen todo el esfuerzo en tecleo de comando para mostrar esto:

<pre>
   y =  x + 3
y -3 =  x
  -x = -y +3
   x =  y + 3
</pre>

Ese cuadro semisombreado que ven está hecho con el comando <pre> pero es el estilo aplicado en este blog lo que lo hace así, sirva como introductorio a las hojas de estilos en cascada.

Superíndices y subíndices.

De nuevo las fórmulas matemáticas son las que mayor uso dan a estas etiquetas:

<pre>
   y<sub>1</sub> =  x<sup>2</sup> + 3
</pre>

Texto resaltado:

Si queremos indicar algo importante, podemos resaltarlo (teniendo siempre en cuenta que cada navegador lo muestra a su manera prestablecida):

y = 5 - 3
<mark>y = 2</mark>

Texto insertado y eliminado:

Muchas veces queremos explicar cómo se llegó a un punto determinado agregando y eliminando explicaciones, encuentro útil siempre las fórmulas matemáticas; siguiendo con el ejemplo anterior:

y = 5 - 3
y = 5 - <ins>(+</ins>3<ins>)</ins>
y = 5 - <del>(+</del>3<del>)</del>
<mark>y = 2</mark>

Observación especial: el insertado puede confundirse con el comando subrayado <u></u>, etiqueta esta que no he explicado aún porque lo considero en desuso ya que se confunde fácilmente con los enlaces “links” en los navegadores. Tanto es así que ahora se utiliza para denotar palabras mal escritas (o en uso especial para el idioma chino); valga la acotación.

Todo lo que explico sobre formato de texto está en este enlace para que lo visualicen y analicen.

Con lo que hemos aprendido es suficiente para comenzar a escribir una página web decente, pero en camino a la excelencia debemos aprender más sobre el sueño de Tim Berners Lee: el hipertexto.

Enlaces y tipos de enlaces.

 La razón de ser del html: los enlaces que permiten guiar hacia otros contenidos, construídos unos sobres otros. Es lo que he hecho con este tutorial, los “links” que he colocado indican de dónde he obtenido información e incluso permiten profundizar los conocimientos de usted amable lector o lectora, si así lo quisiera. Sin más lo presento:

<a href="http://www.seniat.gob.ve/">Servicio Nacional Integrado de Administración Aduanera y Tributaria.</a>

Tal como pueden apreciar, tiene su apertura y cierre <a>…</a> pero además se debe incluir la dirección web (que no será visible a menos que el usuario ubique el puntero sobre el enlace) y en los tres puntos colocaremos la descripción del sitio a donde queramos referir al internauta.

Es de hacer notar que incluso podemos especificar la dirección ip del servidor a consultar (si es dedicado, es decir, sirve una sola página web) y hasta por cual puerto vamos a hacer la consulta. El siguiente ejemplo nos permite preguntarle al Instituto Nacional de Higiene “Rafael Rangel”, ente que tiene en Venezuela el monopolio sobre la aprobación o negación de nuevos medicamentos o la renovación de los mismos, sobre los medicamentos vigentes cuyos nombre comiencen con la letra hache:

<a href="http://190.202.114.146:7474/ef/aprobados_int/productos-1.php?l=H">Medicamentos aprobados en Venezuela, letra H.</a>

 Por el contrario, si lo que queremos es referirnos a una página web que está en nuestro mismo servidor y en la misma carpeta lo que debemos hacer es simplemente colocar el archivo que contiene la página web:

<a href="ejemplo.html">Ver ejemplo</a>

Para que cambiemos la búsqueda por defecto en nuestro propio servidor web sólo debemos colocar el comando <base> el cual explicamos brevemente y ahora vamos a ampliar:

<head>
<base>href="http://www.ks7000.net/images/"</base>
</head>

Siendo así que este comando <base> esté declarado en <head> por defecto el penúltimo enlace de ejemplo será buscado en el dominio “ks7000.net” en la carpeta “images” en vez de la carpeta donde está alojada la página abierta.

Otra opción muy útil es especificar si el enlace se abrirá en la misma ventana o pestaña de donde se le llama o en una nueva, aquí en este tutorial las he colocado en una nueva ventana o pestaña para poder seguir el hilo del tema principal de estudio. Así el comando que necesitamos es:

<a href="http://www.ivss.gob.ve" target="_blank"></a>

El otro valores para target es “_self”, que es el valor por defecto y generalmente no se escribe (“_parent”, “_top” y “framename”, que se usaban con frame –no  soportado por HTML5- dejaron de usarse). El comando <base> también acepta ambos parámetros.

 Imágenes.

La inclusión de imágenes en una página web pasa por hablar brevemente sobre la historias de los formatos utilizados para representarlas. Pero primero veamos el comando utilizado por HTML para decirle al navegador cual imagen debe “cargar” y luego ahondaremos el tema de la historia de las imágenes digitales:

<img src="mi_imagen.jpg" alt="Mi imagen" />

Como ven el comando no tiene un cierre sino más bien un autocierre (opcional en HTML pero obligatorio en XHTML). En este ejemplo asume que la imagen está alojada en la misma carpeta que contiene el archivo .html (a menos que usemos el comado <base>, visto anteriormente dentro de <head>). Si la imagen estuviera ubicada en una subcarpeta, simplemente colocaríamos:

<img src="/images/mi_imagen.jpg" alt="Mi imagen" />

O incluso, si estuviera ubicada en otro servidor de nuestra propiedad (por favor eviten el hotlinking ya que es de muy mal gusto “robar” el ancho de banda a otros entes o personas):

<img src="http://www.ks7000.net/images/mi_imagen.jpg" alt="Mi imagen en otro servidor" />

El parámetro alt es obligatorio ya que el navegador muestra el texto colocado entre comillas mientras descarga la imagen en sí y si no la puede descargar, pues bueno, el texto indica que allí debería ir una imagen. Otro uso importante es para los discapacitados visuales ya que los programas lectores usan este texto para narrar de que imágen se trata, así que ojito con colocarle acertadas palabras.

Un uso muy común para las imágenes es utilizarlas como botones para los enlaces ya que llaman más la atención que un mero texto subrayado, aquí debemos aplicar el anidado de instrucciones, fíjense:

<a href="www.a.com"><img src="mi_imagen.jpg" alt="Mi imagen" /></a>

Otro parámetro que soporta el comando <img> es <style> con el cual podemos especificarle al navegador web del usuario que la imagen deseada la convierta a un tamaño específico, ancho y alto en pixeles, por ejemplo:

<img src="/images/mi_imagen.jpg" alt="Mi imagen" style="width:128px;height:128px" />

Así, no importa el tamaño que tenga la imagen original, ésta será mostrada a 128×128 pixeles pero debe usarse esto con mucho cuidado: tengan presente que la imagen que descargará el usuario siempre ocupará el mismo ancho de banda, NO IMPORTA QUE SE VEA MÁS PEQUEÑA, la cantidad de bytes descargados siempre será la misma cantidad. Es por ello que ahora si hablaré de la historia de las imágenes digitales, tómense un café y vuelvan que esto se pone interesante. 😎


style=”text-align: justify;”>Imágenes digitales.

En el siglo pasado, cuando usamos rollos fotográficos (plásticos impregnados de químicos fotosensibles para fijar la luz, generalmente hechos a base de plata) quedaban como negativos fotográficos con los cuales se podían sacar las fotografías en sí, cuantas copias se necesitaran. Con las fotografías digitales sucede un proceso parecido: cada cámara o filmadora almacena la foto original en formato RAW o DCRAW que, esencialmente, consiste en millones de ceros y unos que representan los colores que recibió el sensor digital. Es, por tanto, muy grande y tiene muy poca pérdida de información sobre la fotografía tomada. Pero al igual que con los negativos fotográficos, esta información poco nos sirve por su dificultad de visualizarlos con el ojo humano. Es por ello que, para ahorrar en hardware, se decidió someter dichos datos RAW (existen cientos de formatos RAW, cada fabricante usa o inventa el que mejor le parece y la mejor alternativa a futuro es el formato libre DCRAW) a un proceso de pérdida de información y además compresión y codificación en un formato estandar para, de esta manera, poder compartir con el resto del mundo la fotografía tomada.

DCRAW: live free or die.
DCRAW: live free or die.

Es decir, nuestros navegadores web deben ser capaces de mostrar cualquier imagen siempre y cuando dicho fichero esté codificado en un formato normalizado, el formato RAW o DCRAW no nos sirve para este propósito de hacer páginas web. Simplificando: un programador de paginas web debe rápidamente hacerse estas preguntas antes de escoger un formato de imagen para el trabajo por el cual lo contrataron:

  • ¿Necesita transparencia?
  • ¿Necesita animación?
  • ¿Necesita buena calidad de imagen?

 

Lo que paso a enseñar es un resúmen al máximo de lo publicado (en idioma inglés) de las siguientes páginas:


Si tenemos en cuenta que las imágenes en una página web en promedio ocupan entre 60 y 70% del tamaño en bytes de la misma debemos prestar especial atención en escoger los formatos de imágenes correctos para ahorrar al usuario tiempo, dinero en conexión, y se queden más de un minuto en nuestro sitio web.

Fuentes consultadas.

En idioma inglés.

¿A dónde se fue el reloj (y el calendario) en Ubuntu 14.04?

Recién me acabo de percatar que el Ubuntu que uso (14.04 LTS) NO está mostrando el reloj y la fecha, como siempre veo es mi móvil pues, ea, que había desaparecido de mi vista y yo tan tranquilo.

Investigando en este enlace (en inglés) recomiendan abrir una ventana terminal (que en Ubuntu es CTRL+ALT+T) y transcribir lo siguiente:


1
sudo killall unity-panel-service

colocan su respectiva contraseña ¡y listo!

En el enlace mencionado culpan a ciertas aplicaciones, en mi caso lo que hice fue una “gran” actualización y creo allí fue cuando desapareció de mi Escritorio.

Si desean personalizar aún más hagan click en el botón de apagado y del submenú seleccionan “Configuración del sistema” y al abrir la ventana selecciona “Fecha y Hora” para luego hacer click en la pestaña “Reloj” y cualquier cambio que hagan tomará efecto inmediatamente, prueben y vean.

Dado el caso que “Simple clock” por alguna razón no esté instalado, pues lo reisntalamos con:


1
sudo apt-get install indicator-datetime

y luego lo configuramos con:


1
sudo dpkg-reconfigure --frontend noninteractive tzdata

para luego reniciarlo (el unity-panel-service ) con el comando que explicamos al principio.

<Eso es todo, por ahora>.


La resolución de monitor que “ha muerto” hoy.

Actualizado el día sábado 04 de febrero de 2017.

Un año y diez meses después de haber comenzado esta entrada -lo cual es muestra de la “estabilidad” de Ubuntu- volvimos a tener problemas con el reloj y la bandeja del sistema. Por supuesto que aplicamos nuestra consabida fórmula aquí explicada pero lamentablemente no funcionó.

Una cosa que notamos al ejecutar el comando arriba descrito, una y otra vez, fue el “parpadeo” de las ventanas abiertas, que se redimensionaban para ocupar la pantalla completa. Como tenemos un solo monitor, un venerable Samsung de 17 pulgadas en diagonal, lo tenemos trabajando en su resolución nativa de 1024 por 768 píxeles. La resolución nativa indica el mejor tamaño sin perder legibilidad (y nosotros ahora por la edad que estamos más cegatones que nunca). Es por ello que no pocas veces, para ciertas tareas, cambiar la resolución al máximo 1280 por 1024 (esto es especialmente útil para cuando nos conectamos de manera remota a varios clientes con Remmina) y he aquí que apareció de nuevo la barra del reloj.

Monitores en Ubuntu ejemplo con Samsung 17 pulgadas.
Monitores en Ubuntu ejemplo con Samsung 17 pulgadas.

Tal vez muchos se sorprenderán con lo que vamos a decir: los monitores de 17 pulgadas “han muerto”, eso es parte de la vida, lo único constante es el cambio y lo hemos visto pasar con el transcurso de las décadas. Desde Windows 3.11 con 640 por 480 píxeles, a Windows 98 con 800 por 600, a Windows XP con 1024 por 768 y hoy en día con Ubuntu 16 a 1280 por 1024 píxeles (de hecho en las oficinas utilizamos monitores de 22 pulgadas y los celulares a pesar de tener el mismo tamaño la resolución ha aumentado siendo muy distintivo el caso de “Retina Display®”, norma indicada por el genial Steve Jobs, fundador de la empresa Apple).

Esta situación se presenta tiempo después que descargamos “grandes” actualizaciones de nuestro sistema operativo libre favorito y que manifestamos públicamente por medio de nuestra cuenta Twitter:

Por ahora nuestra solución será basada en hardware y no en software ya que consideramos que los programadores de Ubuntu tienen razón: 1024 por 768 se nos ha quedado corto en este año 2017. Es por ello que trabajaremos muy duro para ganar dinero y comprar un monitor de 22 pulgadas que lo conectaremos como principal a la tarjeta de video Nvidia y el viejo monitor lo colocaremos en la tarjeta gráfica integrada Radeon de la tarjeta madre.

Lo único constante es el cambio (y el único cambio que le gusta al ser humano es el cambio de pañal).

Evolución de los monitores a lo largo del tiempo.

Actualizado el miércoles 1° de marzo de 2017.

Para complementar lo del punto anterior, el siguiente vídeo ilustra muy bien, por medio de la evolución de los videojuegos, la terminología y evolución de los monitores y sus resoluciones (aparte de tocar con menos importancia el tema del sonido -y muchísimo menos importante el tema de la memoria RAM-). Disfrutad, pues, el documental en idioma inglés con “The 8-Bites Guy”:

Fuentes consultadas.

En idioma castellano:

En idioma inglés:

Para saber más sobre Ubuntu según lo que publicamos por Twitter: