Construyendo un vínculo

Aunque ya lo he explicado en más de un comentario, en este y algún otro blog, bueno será que lo vuelva a explicar aquí. Así será más fácil de encontrar para los que no lo sepan todavía.

En general cuando en un post queremos enlazar un texto o imagen a una página web nueva, solo tenemos que seleccionar ese texto o imagen y darle al botón que todos los editores de blogs incluyen en su escritorio. Eso hace que no nos demos cuenta de lo fácil que es montar un enlace, a no ser que seamos curiosos y estudiemos el código que nos ha introducido el mero hecho de darle a ese botón.

El problema viene cuando queremos o necesitamos vincular algo en un comentario, porque ahí la mayoría de las plantillas dejan de tener esos botones que tanto nos ayudan.

En un post anterior expliqué algunos trucos de texto que bien pueden ser empleados en los comentarios. Así que hoy toca explicar cómo hacer un enlace.

Consiste básicamente en anclar un cosa a otra. Para ello se utiliza la etiqueta de anclaje <a></a>.
Lo que seleccionaremos (imagen o texto) deberá ir encerrado en la etiqueta anterior, es decir entre la etiqueta de inicio <a> y la de cierre </a>.
Eso hará que cuando pasemos el ratón por encima de la parte seleccionada nos salga una indicación de que hay un enlace que al pinchar nos lleva a otra página.
Como aún no hemos puesto adonde queremos que nos lleve el enlace, todavía no nos saldrá la típica mano de vínculo.
Para decirle dónde queremos ir, deberemos darle la dirección de la nueva página, que obtendremos visitando ésta y copiando el enlace que aparece en la barra de direcciones de nuestro explorador web.
Esa dirección tenemos que colocarla dentro del atributo href que acompañará a la etiqueta de anclaje.
La cosa deberá quedar así:
<a href="dirección_de_la_nueva_página">texto o imagen seleccionada</a>

Veamos un ejemplo:

Para oír música moderna visita esta página del amigo Nando.

Todo esto se deberá escribir así:

Para oír música moderna <a href="http://comocantosrodados.blogspot.com/">visita esta página</a> del amigo Nando.

---

Sugerencia:
Siempre que introduzcamos código en un comentario, es conveniente comprobar que va a funcionar correctamente. Para ello, en lugar de publicar directamente el comentario, haremos una 'vista previa' y una vez comprobado su funcionamiento, procederemos a publicarlo.

Adornando una línea horizontal

Como ya adelantábamos en este post, para colocar una línea horizontal en algún lugar del post o página web, sólo es preciso colocar la etiqueta HTML siguiente:
<hr />
El resultado será esta línea que vemos aquí:

---

A poco que nos fijemos veremos que ocupa todo el ancho del bloque de escritura.
Pero podemos cambiar eso haciendo uso de los atributos o modificadores que acepta esta etiqueta.
Para darle un ancho concreto a esta línea tendremos que especificar ese ancho, mediante el atributo width, bien en píxeles o en porcentaje respecto del ancho total.
El código sería como este:
<hr width="100px" />
o también así:
<hr width="50%" />
Y lo que veríamos son estas dos líneas respectivamente:

---

---

Ahora, al ver esto, nos damos cuenta de otra cosa, y es que por defecto las líneas se colocan centradas dentro del post.
Esto también lo podemos cambiar si le añadimos el atributo align.
Si escribimos esto:
<hr align="left" width="50%" />
lo veremos así:

---

Y a la derecha sería:
<hr align="right" width="50%" />

---

Ya metidos en harina, ¿por qué no darle un grosor determinado a la línea?
Utilizaremos para ello el atributo size, en píxeles:
<hr size="10px" />
ó <hr size="10" />
Veremos esto:

---

Ahora, parece que se echa en falta un poco de color.
Pues nada, a por ello con el atributo color, dando los valores en formato hexadecimal, por ejemplo, el rojo sería:
<hr color="#ff0000" size="10px" />
y se verá así:

---

Notas importantes:

Dependiendo del navegador que usemos los resultados pueden variar ligeramente.

Si nuestra página o blog usa plantilla CSS en la que se haya definido el comportamiento de la etiqueta hr, los resultados no serán los mismos que hemos indicado aquí.

Todos los atributos que hemos explicado anteriormente han quedado anticuados a partir de la versión HTML 4.01, por lo que pudieran quedarse obsoletos y no funcionar en un futuro, aunque por el momento todos los navegadores los interpretan aún por motivos de compatibilidad.

En la actualidad es conveniente, aunque sea un poco más complicado, utilizar la sintaxis de estilos propia de las CSS.
Tomando los mismos ejemplos de arriba, se escribirían así:

En lugar de:
<hr align="left" width="50%" />
pondríamos:
<hr style="width:50%;text-align:left" /> (IExplorer y Opera)
<hr style="width:50%;margin-left:0" /> (Firefox, Chrome y Safari)
Si queremos que lo entiendan todos los navegadores simplemente lo escribimos todo, es decir:
<hr style="width:50%;text-align:left;margin-left:0" />
El resultado es este:

---

En lugar de:
<hr color="#ff0000" size="10" />
pondremos:
<hr style="height:10px;color:red" /> (IExplorer)
<hr style="height:10px;border-width:0;background-color:red" /> (Firefox, Opera, Chrome y Safari)
Para todos ellos a la vez:
<hr style="height:10px;border-width:0;color:red;background-color:red" />
Y el resultado:

---

Actualización (25-10-09):
Uno de mis lectores me dice que ha intentado colocar una barra horizontal y no le sale centrada por defecto, como yo decía en el post.
Normalmente esto es debido a que la plantilla tiene algunas opciones predeterminadas para mostrar ciertos elementos.
Cuando eso ocurre la solución más sencilla es añadir el siguiente código (escrito en rojo):
<hr align="center" width="50%" />
o bien:
<center><hr width="50%" /></center>

Dos prácticas herramientas en Internet Explorer 8

Desde hace unos meses los usuarios del navegador por excelencia, mal que les pese a los seguidores de Firefox, "disfrutamos" de una nueva versión: Internet Explorer 8.

Nota: Lo de disfrutar y lo de Firefox quizá lo explique en otra ocasión.

Nada más instalar la nueva versión, lo primero que nos sorprende es que es prácticamente más de lo mismo, es decir que aparte de cambiar algunas cosillas de sitio o de nombre, aparentemente no encontramos nada nuevo.
Sí que han añadido un gestor de proveedores de búsqueda que puede ser útil en determinadas ocasiones, aunque no del todo necesario.
Y el modo de exploración InPrivate, para cuando queremos ver páginas y no nos apetece que los demás sepan qué hemos visto.

Después de un mes desde que lo instalé y enredando mucho, como suelo hacer siempre, me encuentro la verdadera mejora de esta versión respecto de las anteriores. Y esa no es otra que las Herramientas de desarrollo, que está más escondida de lo que debiera.
Con ellas podemos hacer un montón de cosas como validar el HTML de nuestras páginas web, cambiar de tamaño la visualización de las mismas, ver información de cookies, habilitarlas o deshabilitarlas a voluntad, ver informes detallados de todas las imágenes de cualquier página, ver los códigos fuente de toda la página o de partes de ella, etc.
Y todo ello sin que se produzca un cambio real en la página, lo cual es muy interesante para el estudio de las páginas web o blogs (propios y ajenos), antes de tomar la decisión de cambiar algo en ellas.

Pero todo esto no lo tengo aún probado del todo y por ello en este post sólo nos fijaremos en un par de herramientas de fácil manejo y muy útiles.
A saber:
- La regla para medir sobre pantalla
- Y el selector de colores

Para los que tenemos un blog muchas veces nos será de utilidad saber con exactitud las medidas de todas las zonas de la página, para poder introducir imágenes o widgets sin que se nos vayan fuera de marco.
Ya sabemos que esto lo podemos descubrir en la plantilla del blog, pero por no buscarlo a veces lo hacemos a base del método "ensayo-error".
Algo parecido nos ocurre con los colores.

De modo que vamos a ver como sacamos estas herramientas, que bajo mi punto de vista son un método más rápido para conseguir estos datos.

Iniciamos el navegador y nos vamos a una página cualquiera. Usaré El mito de la taberna como ejemplo. Lo vemos en la imagen siguiente:


Una vez en ella vamos a Herramientas > Herramientas de desarrollo:


Enseguida aparecerá una nueva pantalla:


Hay que advertir aquí, que no debemos cerrar el blog puesto que esta segunda pantalla nos está dando los datos que encuentra en él en todo momento.
Para más comodidad podemos anclar esta segunda pantalla a la primera, la del blog, con pulsar en el botón que he señalado en la imagen anterior, quedando entonces una vista como esta:


Una vez aquí vamos a Herramientas > Mostrar la regla, como se ve en la imagen anterior.
Nos aparecerá en la pantalla del blog una nueva pantalla con las opciones de la regla:


- ajustar al eje X/Y > para medir en horizontal o vertical. Si la desmarcamos podremos medir en cualquier dirección.
- ajustar al elemento > hará que la regla se pegue a los bordes del elemento sobre el que medimos, ya sea una imagen o un cajetín de texto, etc.
- ocultar marcas de graduación y extremos no necesitan explicación.
- pulsar Ctrl crea varias reglas a la vez. Si no se pulsa una regla borra la anterior.
- Ctrl+M muestra una pequeña lupa que podemos desplazar con el cursor. Para hacerla desaparecer volvemos a pulsar la misma secuencia.
La regla tiene además la opción de presentarse en los cuatro colores que se seleccionan pinchando sobre los cuadrados situados arriba a la izquierda.
Las medidas nos las da en píxeles y las muestra sobre la regla y también bajo las opciones.
En la imagen siguiente hemos realizado la medición del cajetín que alberga el reloj del blog:


Cerraremos esta herramienta simplemente pulsando la X de cierre y vamos a abrir ahora el selector de color.
Volvemos a Herramientas > Mostrar selector de colores.
Aparecerá otra pantallita con un cuentagotas:


Pinchando en la imagen del cuentagotas y desplazándonos por la pantalla veremos que el color del rectángulo que hay sobre él va adaptándose al color sobre el que nos movemos. Si nos gusta un color determinado del blog y queremos saber cual es solo tenemos que llevar el cuentagotas hasta allí y pinchar sobre la zona. El color quedará grabado en el rectángulo y a su derecha veremos los valores en hexadecimal y en RGB. Además podemos copiar esos valores con el botón que se encuentra bajo ellos.
Como ejemplo, vemos que en este blog el color de fondo del texto de los artículos responde a los valores siguientes:
- hexadecimal #446666
- R:68 G:102 B:102

Bien, todo esto que parece muy complicado se simplifica con los siguientes atajos de teclado:

F12 > abre la pantalla principal de desarrollo
Ctrl+L > abre la regla
Ctrl+K > abre el selector de color

Algunos trucos de texto para blogueros y comentaristas

Si escribes en un blog o haces comentarios en ellos, te pueden venir bien estos pequeños y sencillos trucos para darle una mejor presentación a tus escritos.

En realidad no son más que tags (etiquetas) de código HTML, que se tardan muy poco en escribir, pero hay que conocerlos y saber el resultado que van a dar.

Un texto en negrita se escribe así:

<b>negrita</b>

o así

<strong>negrita</strong>

La letra inclinada, llamada itálica será así:

<i>itálica</i>

pero también

<em>itálica</em> (énfasis)

Análogas son variable y cita:

<var>variable</var> <cite>cita</cite>

Una letra más grande de lo normal será así:

<big>más grande</big>

Y una más pequeña de lo normal, así:

<small>más pequeña</small>

Para dividir un texto puede ir bien una línea horizontal como esta:

---

que se consigue simplemente así:

<hr />

Imitación de teletipo (ejemplo o teclado) será de alguna de estas tres formas:

<tt>teletipo</tt> <samp>ejemplo</samp> <kbd>teclado</kbd>

Para hacer un subrayado (o insertado) a un texto:

<u>subrayado</u>

o

<ins>insertado</ins>

Tres métodos de tachado o borrado:

<s>tachado</s> <strike>tachado</strike> <del>borrado</del>

Y por último, puede que tengamos que escribir alguna fórmula sencilla. En ese caso utilizamos los subíndices y superíndices.
Ejemplos: E = m c ² es así:

E = m c <sup>2</sup>

H₂O (agua) será:

H<sub>2</sub>O

En algunas plataformas de creación de blogs existen botones específicos para algunos de estos tags, pero no en todos. Algunos de ellos se pueden usar indistintamente en posts y comentarios. Otros, sólo en posts.

Utilizados convenientemente, sin abusar, harán más legibles y bellos tus textos.

Problema: El escritorio se ha girado

Me preguntaron ayer qué se podía hacer para volver el escritorio de Windows a su estado normal.

¿Qué había pasado? Alguien había enredado en el ordenador y sin saber cómo había puesto el escritorio del revés, girado, con todas las letras y los iconos boca abajo.
Parece una tontería pero así, en principio, no se te ocurre nada.

Así que hice una búsqueda en Google por la frase del título, "el escritorio se ha girado", y aparecieron cientos de páginas con un problema similar, cuando no igual.

El problema tiene fácil solución. Consiste en pulsar una determinada combinación de teclas, pero hay que decir que ésta depende de qué tarjeta gráfica tengamos instalada en el ordenador.
En muchos casos ni siquiera se puede dar este problema, porque muchas tarjetas no admiten el giro de la pantalla.

Para ordenadores con tarjeta nVidia la combinación de teclas a pulsar será Ctrl+Alt+flechas(← → ↑ ↓).
En Dell Latitude X1 la combinación es AltGr+flechas(← → ↑ ↓).

En todo caso, si se puede hacer esto es porque la controladora gráfica lo admite, como ya dije arriba, pero este es un método abreviado.
Si nuestra gráfica admite el giro pero no encontramos la combinación de teclas adecuada siempre podremos buscar en las propiedades de la tarjeta, de la siguiente manera:

Vamos al escritorio y con el botón derecho del ratón nos vamos a Propiedades. Nos salen las Propiedades de pantalla > Configuración > Opciones avanzadas.
Ahí buscaremos en las fichas de Adaptador o Monitor. En alguna de ellas debe estar la opción de giro o rotación de la pantalla.

Y eso es todo. Es sencillo, pero la primera vez que te ocurre te asusta bastante.

Si alguien sabe de alguna otra combinación de teclas sería bueno que nos lo pusiera en un comentario, dando el nombre de su tarjeta gráfica.

Actualización (de los comentarios):

Mandevile nos dice: Si anulamos la tarjeta gráfica y reiniciamos, el sistema nos reinstalará los controladores nuevamente y por tanto de una forma correcta.

Para ello vamos a Inicio > Configuración > Panel de control > Sistema > Hardware > Administrador de dispositivos > Adaptador de pantalla.

Esto es para Windows XP, siendo similar en otros sistemas.

Almudena nos dice: Con la tarjeta "Intel(R) Graphics Media Acelerator Driver for mobile", en lugar de ir a Propiedades, voy a Propiedades de Gráficos (opción que tiene esta tarjeta), y en la pestaña Configuraciones de pantalla, donde dice Rotación tenemos la posibilidad de giro de la pantalla.

Los datos concretos de esta tarjeta son:
Mobile Intel(R) 915GM/GMS,910GML Express Chipset Family (128 Mb). Intel Corporation.

Películas con subtítulos en varios idiomas

En el artículo anterior os enseñaba cómo poner subtítulos a una película bajada de Internet.

Pero puede darse el caso que nos interesen varios idiomas.
Por ejemplo puede ocurrir que solo hemos podido conseguir la película en inglés. Si estamos estudiando este idioma, nos vendrá muy bien tener además los subtítulos para una mejor comprensión.

Pero en la familia puede haber personas que ni saben inglés ni lo van a estudiar, y sin embargo sí les gusta el cine.
Este es un caso típico en el cual, en lugar de descargar dos películas (en castellano una y en inglés la otra) lo que haremos es descargar dos subtítulos (castellano e inglés, por ejemplo).

Hay que tener en cuenta que los subtítulos son archivos de texto simple y por tanto ocupan muy poco, mientras que los vídeos pueden llegar a ocupar fácilmente un giga cada uno.
Como expliqué en el post anterior, comprobaremos la sincronización de cada uno de los subtitulos. Si hace falta retocarlos podemos echar mano del programa SubtitleWorkshop.

También sabemos ya que la película y el subtítulo deben tener el mismo nombre de archivo (exceptuando la extensión, por supuesto) y estar ubicados en la misma carpeta.
Pues bien, cuando tenemos más de un subtítulo, procederemos de igual manera, añadiendo una falsa extensión a cada uno de los archivos de subtitulo.
Pongamos un ejemplo:

Archivo de vídeo: Película.avi
Archivo de subtítulos en inglés: Película.eng.srt
Archivo de subtítulos en español: Película.spa.srt

Realmente en lugar de eng y spa, podriamos poner cualquier cosa, pero de esta forma es más fácil de identificar qué archivo estamos usando.

Ahora nos queda ver como cambiamos de uno a otro subtítulo.

Cuando abrimos el vídeo en el Media Player, por ejemplo, se cargará automáticamente el primer subtítulo atendiendo al orden alfabético de la extensión de idioma que les hemos colocado. En nuestro ejemplo sería el inglés.
Si ahora nos fijamos en la barra de tareas de nuestro ordenador, veremos que ha aparecido un nuevo icono tal como el de la imagen siguiente:


Si con el botón derecho del ratón hacemos click en él, veremos la opción (entre otras) de cambiar de idioma los subtítulos, y además para ello no nos hará falta detener la reproducción de la pelicula.


Y eso es todo.

Hay que decir también que esto funcionará en cualquier aparato de esos que ahora llaman "discos duros multimedia". La diferencia está en que para cambiar los subtítulos tendremos que echar mano del mando a distancia que todos ellos traen.

Rectificación:

He comprobado esta misma tarde que en mi reproductor multimedia (ese que se conecta al televisor), si colocas la falsa extensión de idioma (.eng, .spa, etc.) no se cargan los subtítulos de forma automática, pero además te impide cargarlos de forma manual, es decir eligiéndoles tú.

Para resolver ese inconveniente siempre podemos ponerlo así, por ejemplo:

Archivo de vídeo: Película.avi
Archivo de subtítulos en inglés: Película_eng.srt
Archivo de subtítulos en español: Película_spa.srt

porque el problema se produce al tomar el programa del reproductor la primera extensión (.eng) como la verdadera, y no es capaz de reconocerla como es lógico.

Sustituyendo los puntos por guiones bajos ya no es posible confundir la extensión. Sin embargo la forma de cargar los archivos de subtítulos será siempre manual y de la siguiente manera:

Primero cargamos la película y luego con el mando del reproductor buscaremos los subtítulos y elegiremos en cada caso el que nos interese.

Nota:

Esto es lo que ocurre en mi disco duro multimedia, pero como hay tantos modelos actualmente puede que en otros funcione de otra forma.

Si sabéis de alguna podéis dejarme un comentario al respecto.