Igual aprendemos algo

nonews

Mostrando entradas con la etiqueta Código HTML. Mostrar todas las entradas
Mostrando entradas con la etiqueta Código HTML. Mostrar todas las entradas

Reproductor de música basado en You Tube - Actualización

| martes, 22 de mayo de 2012
Tan solo hace mes y medio que realicé el vídeo que habéis visto en el post anterior y ya los chicos de You Tube me han cambiado las cosas.
¿Pararán quietos alguna vez?
Debe ser que tienen que justificar que les pagan bien.

En fin, el caso es que si seguís las instrucciones del vídeo al pie de la letra, comprobaréis sorprendidos que no ocurre lo que yo digo en él, aunque en el vídeo lo veáis muy claro.

Hay una cosa que yo daba por hecha y es que quitando el término de la versión del reproductor, You Tube emplearía el reproductor antiguo, que es el que nos interesaba. Y así era hasta hace unos días. Como eso parece que ha cambiado, lo que haremos es cambiar solamente el número de la versión. Así, pondremos un 2 en lugar de un 3, como se ve en la imagen que os pongo debajo.



Parece que de esta forma sí sale la barra de You Tube como esperábamos.

De la misma manera, si vamos a hacernos una plantilla deberemos tener esto mismo en cuenta.
Os lo explico en la siguiente imagen.



Bueno, con esto espero no haber perdido el tiempo y sirva para el propósito requerido.

Reproductor de música basado en You Tube

| domingo, 20 de mayo de 2012
En ocasiones de lo que encontramos en You Tube solamente nos interesa la música, bien sea porque el vídeo no merece la pena (es una imagen o sucesión de imágenes estáticas) o porque realmente solo queremos poner un tema concreto para adornar una idea en un post.

Se sabe que podemos descargar solo la parte musical de cualquier vídeo, hay muchos métodos para ello. Pero eso nos complica las cosas porque luego tendremos que subir ese archivo musical a un servidor y encontrar un reproductor que nos lo permita oír incrustado en el blog.

Más cómodo sin duda es el método que yo suelo utilizar y que os explico en el siguiente vídeo.



Nota: El vídeo procede de un archivo autoejecutable de mi creación, realizado para explicar a una compañera de la blogosfera mi forma de incrustarlo, pero que he convertido a película para poder colocarlo aquí.
La posible pérdida de calidad se debe al proceso de transformación.
Se recomienda ponerlo a pantalla completa para verlo mejor.

Icono personalizado para nuestro blog (y 2)

| miércoles, 6 de abril de 2011
>>> Viene de aquí

Ahora que ya tenemos alojada la imagen, necesitaremos conocer su dirección en la red para poder llamarla, mediante el código correspondiente, para que aparezca en el blog.

Pinchando sobre la imagen en el álbum, tendremos una vista de ella en solitario, con información de la misma a la derecha de la pantalla.


Pinchando en la frase 'Enlace a esta foto' aparecen dos tipos de vínculos.
El primero es el enlace a la página donde nos encontramos.
El segundo es el que nos interesa, porque ahí nos dará el vínculo directo a la imagen.
Pero para obtenerlo tendremos que marcar la casilla 'Sólo imagen (no enlace)'.
Copiamos el enlace y nos sale una cosa como esta del ejemplo:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr4wWpkQLA38KrxpbAy00xJc0pu0bMB8pnMMpw9_RvyA7tc0JDcVRVF5-SuXmU_Ra1VA0A2wyffQek9TWIRZQVKzDc1-Ap7VL7FvNOrwkY36U0FQFgf0Avt4dQFE9o5NpjRUrJQ1-lxys/s144/nonicon412.png

Lo marcado en rojo es el tamaño que nos pone Picasa por defecto, pero nosotros lo vamos a eliminar. De esta forma la imagen que salga será la original.

Continuará...

Icono personalizado para nuestro blog

| viernes, 25 de febrero de 2011
Habréis visto que la mayoría de las páginas comerciales, por no decir todas, tienen un icono personalizado que aparece en la barra de direcciones del navegador o en su caso en la pestaña correspondiente.
Muchos blogs han incorporado esto también, porque da una cierta personalidad al blog, además de hacer más reconocible su presencia en los favoritos o el historial.

Desde aquí vamos a intentar explicar como colocar un icono de este tipo.

Necesitaremos hacer estos pasos:

1.- Conseguir una imagen adecuada.
2.- Alojar esa imagen en un servidor
y 3.- Introducir el código necesario en el blog para que aparezca la imagen.

Pues vamos a ello.

1.- Conseguir una imagen adecuada
En principio hay que decir que la imagen deberá ser cuadrada, de 16 pixeles de lado, y con formato '.ico'.
Al final del post veremos que esto en realidad era así en el principio de Internet. Hoy día se puede conseguir el mismo resultado con otros tamaños e incluso con otras extensiones de archivo.
Para obtener la imagen tenemos al menos dos opciones:
1.1- Buscarla en Internet.
y 1.2- Crearla nosotros mismos.

1.1- Una simple búsqueda en Google por 'iconos' o 'iconos web' nos dará un sinfín de resultados de páginas que nos ofrecen descarga gratuita de miles de iconos, de todos los tipos y temáticas.
Si así no encuentras uno que te llegue a gustar es que eres muy especial.
Bueno, la verdad es que habrá que echarle paciencia también.

Pero si de verdad quieres uno personal, lo mejor es la segunda opción: crearle nosotros mismos.

1.2- Para ello necesitaremos algún programa, como es lógico.
Editores de iconos y utilidades para trasformar imágenes en iconos hay muchos en el mercado. De pago y gratuitos.
Os daré unas pistas sobre lo que yo he visto y he usado.
El Microangelo tiene fama de ser el más completo, una especie de 'Photoshop del icono' (también trabaja cursores). Pero es de pago.

Vayamos con los gratuitos.
Easy Picture2Icon es muy sencillo y útil si lo que quieres es trasformar una imagen que ya tienes en icono, de una forma rápida. Admite bmp, gif, jpg y png. Necesita tener instalado .NET Framework para su funcionamiento.

IcoFX es ya un programa bastante más completo. Permite crear iconos desde cero, pero también trasformar imágenes en iconos e incluso extraer los iconos de un archivo ejecutable del sistema. Existe también en versión portátil, para los que nos movemos con los programas puestos (en un pendrive, claro).

Y por último, Greenfish Icon Editor Pro. Este es parecido al anterior, es decir un programa de edición de iconos completo, con efectos y transparencias, pero además incorpora capas, cosa bastante interesante para trabajar distintos aspectos de un icono con comodidad.

En el recuadro os dejo los vínculos correspondientes.



Estas son solo mis recomendaciones, pero en páginas de descarga de programas como Softonic o UptoDown encontraréis muchas más opciones. Cada uno tiene sus preferencias, y es posible que os manejéis mejor con otro programa.
Por otra parte algunos editores de fotografías tienen también la opción de exportar imágenes en formato icono.
Alguna vez hemos hablado en este blog de PhotoFiltre, un sencillo editor de imágenes, portátil, que nos sacará a menudo de esos pequeños problemas con las fotografías. Pues, además, este programa también permite la exportación -con un solo clic- al formato de icono.

Y ya para cerrar este capítulo, hay que decir que existe otra opción muy sencilla para trasformar una imagen en icono: los servicios on-line.
Hay muchos por ahí pero yo os daré solo uno: FavIcon Generator.
Solo hay que ir a su página, subir una imagen (cuadrada a ser posible), y descargar un archivo comprimido (zip) que ellos crearán. En ese archivo encontraremos los iconos en dos tamaños (16x16 y 32x32), así como unas vistas previas de ellos (en formato .png) y un archivo de ayuda para colocarlo en el blog, aunque no os recomiendo seguir esa ayuda porque está incompleta.

2.- Alojar la imagen en un servidor
Ahora que ya tenemos nuestra imagen, de nada nos servirá tenerla en nuestro ordenador. Para que pueda verla todo el mundo que visite nuestro blog, habrá de estar alojada en un servidor.

Sitios de hospedaje (hosting) de archivos hay un montón en la red, algunos incluso dedicados en exclusiva a imágenes.
Por mi parte solo dos recomendaciones: Álbumes Web de Picasa y Dropbox.

Para los que publican su blog en la plataforma de Blogger (Google), lo más recomendable es el servicio de Álbumes Web de Picasa, puesto que ahí es donde están alojadas todas las imágenes que vamos colocando en nuestro blog.

Con la misma cuenta que ya tenemos de Google, entramos en el servicio 'Álbumes Web de Picasa'. O bien, en la página de búsqueda de Google, pinchamos en Más > Fotos, como vemos en la imagen.


Habremos entrado en el servicio y nos encontraremos con todos los álbumes donde se encuentran las fotos que hemos ido colocando en los blogs.
Algo como esto:


Pinchamos en el botón 'Subir' y luego en seleccionar un álbum. Eso nos lleva a una vista de todos nuestros álbumes, donde elegimos uno o creamos uno nuevo si es nuestra deseo.


Como el icono es una imagen que va a pertenecer a un blog, mi recomendación es ubicar la imagen en el álbum de ese blog, pero esto es a gusto del consumidor.
Seguimos los pasos que nos indican y ya tendremos la imagen de nuestro icono subida.
En la siguiente captura podéis ver la imagen de mi icono en el álbum correspondiente junto a las otras imágenes de este blog.



Sigue aquí >>>

Construyendo un vínculo

| domingo, 13 de diciembre de 2009
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

| lunes, 5 de octubre de 2009
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>

Algunos trucos de texto para blogueros y comentaristas

| jueves, 14 de mayo de 2009
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 2 es así:

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

H2O (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.

Los últimos comentarios