Curso Construir una gramola en HTML.

1ª Parte SUMARIO

¿Qué es...? Reunir discos en formato MP3 46

▼
Pasos previos 47
01 MP3 Transformar pistas de audio en MP3 47
Formato de archivo de Crear listas de MP3 48
sonido que tiene una al-
Preparar las imágenes para las páginas 50
ta calidad y un tamaño
muy reducido. Para re-
producirlo es necesario ÍNDICE DEL CURSO
utilizar un ordenador,
aunque últimamente han Construir una gramola en HTML. 1ª Parte Nº 25
aparecido unos aparatos Construir una gramola en HTML. 2ª Parte Nº 26
similares a los Walk-
man, que son capaces
de reproducir MP3.
El truco de este formato
radica en la compresión
de datos,que reduce el
espacio necesario para
almacenar la informa-
ción sonora. Además, se
utilizan técnicas muy
complejas para eliminar
algunos sonidos no per-

Foto: Cordón Press. Montaje: Computer Hoy.

ceptibles por el oído hu-
mano (por ejemplo cam-

Música personalizada
bios bruscos de
volumen o tono).

02 Archivo Wav
Cuando almacenamos el
sonido en formato digi-
tal, se puede hacer de
diversas formas. Según
el del número de “mues-
tras” que tomemos por
segundo del sonido ana-
lógico, el sonido digital
tendrá una mayor o me-
nor calidad.
El formato Wav, permi-
te almacenar sonido
con una cálidad muy
elevada, aunque lo hace
a costa de ocupar un
gran espacio en el dis-
co. Este formato es el
utilizado comunmente
por el sistema operati-
vo Windows para alma-
cenar sus archivos de
sonido.
03 Interfaz
En software, se denomi-
na interfaz al programa
que sirve para comuni-
carse con el usuario.
Lo más corriente es que
desde este tipo de apli-
caciones sea posible
acceder a la mayor parte
de las funciones y ca-
racterísticas del produc-
to. Este tipo de progra-
ma debe ser lo
suficientemente llamati-
vo y lo más sencillo de
utilizar posible, ya que
es la parte que el usua-
rio ve en la pantalla de
su ordenador personal
cuando trabaja con la
aplicación.
46
¿Cansado de tener que cambiar el CD de música cada vez que quiere escuchar
un nuevo disco mientras está trabajando con el ordenador? Con nuestra
“gramola” habrá terminado con ese problema. En dos prácticas lecciones
le enseñamos cómo reunir todos sus discos en uno para disfrutarlos mejor.
interfaz 03 con la que acce- tará un programa como el
Reunir discos en formato MP3 der a las canciones de un popular WinAmp- V . Por
Si es un lector habitual de co y sin estropear los origi- modo sencillo. Dado que aca- último, necesitará un progra-
Computer Hoy, conocerá ya nales. Para llegar a este ob- bamos de terminar con el ma para grabar todos estos
las ventajas que el pequeño jetivo, vamos a hacer uso de curso de HTML 04 , vamos a archivos en un CD, como
tamaño de los archivos de so- muchas y muy variadas he- utilizar este formato para cre- por ejemplo, el progra-
nido en formato MP3 01 re- rramientas de distinto tipo. ar unas páginas con las que ma Nero- . Todos estos
porta, comparativamente ha- Por un lado, necesitaremos "navegar" por el contenido del programas , a excepción de
blando, con una pérdida no un programa que permita CD. Con el programa Front- FrontPage, puede conse-
muy grande de calidad. La transformar la música que vie- Page que ya conocemos, no guirlos a través de Internet
propuesta que le hacemos ne en soporte CDA (en el que tendremos ningún problema en versiones de prueba. Si
en este curso es muy útil, está grabada la música en los para hacerlas. Si dispone de más adelante desea seguir
crear una copia de sus dis- CDs).Utilizaremos el progra- un escáner, puede incluir la utilizándolos, tendrá que pa-
cos en formato MP3 y gra- ma que ya vimos en el nú- portada de sus discos en las gar a sus fabricantes para ad-
barlos en un CD, de forma mero 16 de Computer Hoy, páginas, tal y como vamos a quirirlos. Para nuestra parti-
que pueda oírlos en su or- "Easy CD-DA"-v . hacer en nuestro ejemplo,de cular colección de discos,
denador sin cambiar de dis- Se trata de un sencillo pro- forma que el resultado final hemos escogido la música
grama que per- sea más vistoso.Para los reto- de algunas películas. Selec-
mite transfor- ques que llevemos a cabo en cione los discos que quiera
mar directa- las imágenes,usaremos el pro- incluir y dispóngase a co-
mente las pis- grama Paint Shop Pro -« .Si menzar. Más adelante vere-
tas de sonido quiere escuchar los archivos mos cómo saber cuántos dis-
de un CD en MP3 en su ordenador,necesi- cos puede incluir en un CD.
archivos MP3
sin tener que
pasar por un ➜ Direcciones online
formato inter-
medio, como -v Easy CD-DA: www.poikosoft.com/cdda
Wav 02 Des- -« Paint Shop Pro: www.jasc.com
pués, necesita- -V WinAmp: www.winamp.com
Usando un navegador de Internet, podrá remos también - Nero: www.ahead.de
acceder a la música que tenga en el CD. construir una
Nº 25

Pasos previos
Antes de empezar, es con-
veniente que creemos una
serie de carpetas 05 que,
luego, utilizaremos para al-
macenar todos los archivos
HTML, MP3 y JPG que nece-
sitaremos para crear el CD.
La correcta organización de
todos estos archivos nos va
a facilitar mucho el trabajo
en el futuro.
1 Con el puntero del ratón
situado sobre un lugar
vacío de su Escritorio, haga
click con el botón derecho
del ratón y, en el Menú de
contexto 06 que aparece,
escoja la opción y,
después, . del sistema de organiza-
2 Aparecerá una carpeta
en su Escritorio
Escriba "CD"
como nombre
de la carpeta y
pulse $ para
terminar
Transformar pistas de audio en MP3
Si ya descargó de Internet
el programa EASY CD-DA y
lo tiene instalado, siga estos
pasos para convertir a MP3
las canciones de sus CDs.
De no ser así, si tiene al-
guna duda sobre cómo ins-
talar o configurar el progra-
ma, en la página 96 del nº 16
de Computer Hoy, encon-
trará la información que ne-
cesita.
1
en
Haga click sobre
y, después, en
y en
, 5
, con el fin
de arrancar el programa.
2 Haga click en para ce-
rrar la ventana de conse-
jos si ésta ha aparecido.
3 ¿Ha introducido el CD
que quiere convertir en
MP3 en el lector de CD? Si
no es así, hágalo ahora. Al
poco tiempo, aparecerá en
la ventana principal del pro-
grama una lista con las pis-
tas del CD
4 Observe que no aparece
el nombre de las can-
3
Haga click dos veces so-
bre la carpeta de CD pa-
ra abrirla
4 Pulse .
y, en el menú que apare-
ce, escoja, primero, y,
después, . Las carpetas son la base
5 Pulse una vez con el bo-
tón izquierdo del ratón
sobre la carpeta que ha apa-
recido para seleccionarla
y, después, pulse 2.
6 Escriba "imágenes" .
como nombre para la
ciones. Si lo desea, puede
conseguirlo a través de In-
ternet haciendo click sobre
el icono
. una carpeta puede va-
Sin embargo en este caso
no será necesario. Resulta
mucho más sencillo dejar el
nombre de las pistas tal y co-
mo está, y colocarlas en una
carpeta con el nombre del
disco.
En la barra de menús, ha-
ga click sobre
y, después, escoja
Construir una gramola en HTML. 1ª Parte
carpeta y pulse $ .
74 Repita ahora los puntos
a 6 tantas veces como
discos vaya a incluir en el
CD. En el punto 6 , escriba
cada vez el nombre del dis-
para seleccionar todas las
canciones
6 Ahora necesitamos en-
trar en la ventana de gra-
bación. Haga click sobre:
. jo, lo cual quiere decir una
Nº 25
▼
co correspondiente.
El resultado final debería
ser este.
8 Si finalmente no incluye
algún CD, borre su car-
peta, o cámbiela por otro
nombre si modifica algún
disco. Al final, debería haber
una carpeta por cada disco
que incluya. Pulse
cerrar esta ventana.
para
7 En la primera opción de
la ventana que ha apare-
cido, haga click sobre y más facil encontrar
seleccione una de estas tres
opciones
según el tipo de ordenador
que tenga.
8 En la segunda opción
seleccione un valor más ba-
,
mayor compresión, como
por ejemplo
9 Ya sólo queda escojer el
lugar donde vamos a
guardar los archivos MP3 y
el nombre que tendrán.
En la parte inferior pulse
y seleccione la carpeta que
creó al principio con el
nombre de este disco.
En nuestro caso debemos
hacer click dos veces sobre
, después, sobre
y, finalmente,
pulsar .
Curso
¿Qué es...?
04 HTML
Proviene del inglés (Hy-
pertext Markup Langua-
ge). Es un lenguaje de
códigos que utiliza las
páginas web de Internet.
Se compone de una se-
rie de códigos delimita-
dos por los caracteres
“<” y “>” que se utilizan
para indicar las diferen-
tes partes de una página
web, formato y fuentes
del texto, enlaces a otras
páginas o a imágenes y
sonidos, código Java e,
incluso, formularios.
05 Carpeta
ción de archivos de
Windows 98. Las carpe-
tas pueden contener ar-
chivos de cualquier tipo
u otras carpetas, que
pasan a ser denomina-
das subcarpetas de
aquella que las contiene.
Si usted copia, mueve o
borra una carpeta, tam-
bién hará lo mismo con
todos los elementos que
contiene. Mediante su
uso, usted puede man-
tener todos sus archivos
o documentos ordena-
dos de forma que le sea
aquello que busca.
La forma en que se pre-
senta el contenido de
riar. Usted elige si quie-
re ver los archivos y
carpetas como iconos o
en forma de lista.
06 Menú
de contexto
Los modernos sistemas
operativos como Win-
dows 95 o Windows 98
se basan en objetos. Es-
to quiere decir que to-
dos los elementos que
manejamos son
objetos, y, como tales,
tienen su personalidad.
Así, al actuar sobre un
icono en los menús, só-
lo aparecerán las opcio-
nes que tienen relación
con un icono. Los
menús contextuales son
justamente eso, los me-
nús que aparecen al pul-
sar el botón derecho so-
bre un icono con las
opciones que guardan
relación con ese icono.
▲
47
 Curso XXXXXXXXXXXXXX
Construir una gramola en HTML. 1ª Parte
¿Qué es...?
10
▼
▼
Cómo nombre de las ta que finalice la conversión
canciones, vamos a
07 Descargar
PDA
13
01 utilizar únicamente un nú- Pulse cuando
Dentro
Las de la
siglas PDA redsignifi-
Internet mero que nos indique de haya terminado.
existen
can muchos
Personal ordena-
Digital As- qué canción se trata, por tan- Ahora tendrá que repetir
dores a(Asistente
sistant los cualesDigital
pode-
mos acceder para copiar
to, haga click en todos estos pasos para ca-
Personal). Algunos de
ficheros a nuestro orde- da uno de los discos. No ol-
estos ordenadores que,
nador.
por Esta operación
su reducido tamaño, se vide grabarlos en sus car-
denomina
caben descargabol-
en cualquier de petas correspondientes.
ficheros.
sillo, ni siquiera tienen y borre todo excepto . Para saber cuánto espa-
La teclado.
un descargaSon se puede
maneja- cio le queda disponible, si-
realizar
dos con desde
dor, que
piz, haciendo
el navega-
un pequeño
escribeclick
los directamente
tos
los en
enlaces que repre-
lá-
tex-
sobre
11 Cuando haya termina-
do, pulse pa-
ra comenzar la conversión.
ga las indicaciones en el re-
cuadro de esta misma
página.
senten
la los archivos,
pantalla, transformán- o Pulse el icono cuando
mediante
dolos
dor
luego
pecialmente
programas
a ficheros
para laEstos
ticos.
el ordena-es-

descarga
pensados
informá-
como
chiquitines”
12 Ahora tendrá que es-
perar un tiempo has-
haya terminado con el fin
de cerrar el programa.
aquellos
son que utilizan
utilizados sobre to- el
protocolo
do como block
ocopiar
comocosas
FTP de08notas
agenda desde
para
de telé-
Crear listas de MP3 so será:
. En-
siones de una misma can-
ción. Ponga su imaginación
otros ordenadores.
fonos

08
y de direcciones.

FTP de
Puerto
¿Ha instalado ya el progra-
ma WinAmp para reprodu- 5 Pulse tonces pulse a trabajar con nuevas com-
binaciones. Nosotros nos li-

6
02 cir sus archivos MP3? De no y después Ya ha creado la lista que, mitaremos a las listas para
infrarrojos
Significa “File Transfer
ser así, descárguelo 07 de para guardar la lista. más adelante, nos per- cada disco por separado.
Protocol”,
Dos es decir,
ordenadores se Pro-
tocolo de Transferencia
Internet e instálelo, vamos a Escoja un nombre para ella. mitirá reproducir todo el
pueden conectar a tra-
de Ficheros. crear con él unas listas que Por seguir una pauta, noso- disco con un simple click
vés de los puertos del ! Consejo
Se utiliza para
ordenador por intercam-
medio de
nos permitirán después es- tros utilizaremos siempre el de ratón.
biarcable.
un ficheros con unexiste
También ser- cuchar un disco de forma nombre del disco, en este ca- Para cerrar el programa Computer Hoy
vidor
la de Internet.
posibilidad Algu-
de trans- ininterrumpida.
nas empresas
mitir los datos utilizan
sin la ne- ¿Cuántos discos puedo
estos servidores
cesidad de un cable,
ofrecer programas
mediante
tuitos señales
emita
para
un puertogra-
o actualizaciones
que
infrarrojas
1 Arranque el programa
WinAmp. Haga click so-
bre el botón
almacenar en formato
MP3 en un CD? La res-
puesta a esta pregunta
de productos.
hacia otro puerto de las depende del tamaño de
mismas características, los discos, de la com-
09 Seleccionar
que esté a una distancia presión que utilice al
Es la acción
máxima pormetros.
de 1,5 la que, crear los MP3 y del ta-
enfuncionamiento
El un programa para es el maño de las imágenes
sistema
igual
dows,
de
queoperativo
usted escoje de
un televisor.
entre varios elementos
Win-
el del mando
2 Aparecerá la ventana del
editor de listas
Pulse
que use para la interfaz
en HTML. Le recomen-
damos que el conjunto
03 Velocidad
uno o varios de ellos 24pa- para seleccionar los archi- de todos los MP3, no su-
X /porun 24
ra realizar operación. vos que añadir a la lista. pere los 620 Megaby-
Estoprimeros
Los se puedelectores
realizar
tes 10 .
de CD-ROM
distintas formas,
transmitíanya
seadatos
los con elapuntero
ratóndey/o
dad
del
una veloci-
150mediante
Kilobytesuna
3 En la ventana
, se-
leccione la carpeta donde
Para saber cuánto están
ocupando los discos
que va trasformando,
combinación
por segundo. de teclas.
Esta velo-
Por ejemplo,
cidad se ha ido si multipli-
mantie- tiene los MP3 de un disco y haga click sobre la car-
ne pulsada
cando con losla tecla
años.` ábrala . peta que contiene to-
mientras
Ahora, lashace click con
unidades de dos los MP3
el ratón
24
tos
sobre unlos
X transmiten
mento,
a uneste
ritmo
los que yapor
Kilobytes
sede
tenga
ele-da-
añadirá
3.600 a
usted
segundo.
4 Pulse la tecla e mientras
mantiene apretada la te-
cla ` . Así seleccionará 09 con el botón derecho
seleccionados. todos los archivos del ratón. A continua-
04 Notebook2 Pulse ción, seleccione
Se Megabytes
10 identifican como para añadirlos a la lista. . Compruebe
La capacidadlos
“notebooks” de ordena-
almace- WinAmp, haga click sobre el tamaño de los archhi-
namiento
dores de un ordena-
pequeños y trans- vos que lleva creados
dor se mideEl en
portables. bytes.esLa
tamaño .
relaciónalentre
similar
tamaño
gabytes
ronda
de unlos
los kilobytes peso
loses2 parecida
bytes,
folio
A-4. Ely los
de
Me-
a la
kilos. Éstos
7 No olvide que debe
realizar estos pasos con
cada uno de los discos que
relación
tienen que hay entre
prestaciónes si- utilice. Siguiendo este mis- y calcule cuánto espa-
gramos,akilogramos
milares los de sobre- y
mo procedimiento, usted cio le queda. Una bue-
toneladas.
mesa, sólo 1que
kilobyte
el tecla-
equivale
puede crear también listas na estimación es la de
do es mása 1.024 bytes,
reducido y
mientras que 1.024elme- que permitan la ejecución 1 megabyte por minuto
lleva incorporado
gabytes se correspon-
monitor.lleva incorpo-
ininterrumpida de todos los de grabación. Normal-
den con
rado un gigabyte.
el monitor. discos, o cualquier combi- mente, pueden caber
nación de canciones que a de 14 a 18 CDs, según
usted se le ocurra, como su tamaño.
por ejemplo, distintas ver-
48 Nº 25
 Curso Construir una gramola en HTML. 1ª Parte
¿Qué es...? Preparar las imágenes para las páginas
▼

pecto original
Escáner
7
11 Si va a incluir, como hare- En ese caso, sustituya el ta- Necesita reducir la opa-
Es un dispositivo pareci- mos nosotros, las imágenes maño del mayor por el del cidad de la imagen para
do a una fotocopiadora de las portadas de los CDs más pequeño, de forma que conseguir el efecto que de-
que copia imágenes,
en las páginas de acceso a ambos creen un cuadrado seamos. Haga click sobre
gráficos y fotografías.
Pero, el resultado no es
la música, tendrá que esca- .
una copia en papel, sino nearlas 11 y adaptarlas, Pulse para realizar
un fichero que se después, para su uso. Si tie- los cambios.
puede tratar en un orde- ne dudas sobre cómo usar
nador. Los escáneres
pueden ser de distintos
tipos, los más econó-
su escáner, encontrará res-
puesta a ellas en la página 8
del número 12 de Computer
4 La imágen ya tiene forma
de cuadrado hasta que el valor se haya re-
ducido a .
micos son los de mano.
Los más sofisticados
son los escáneres de
Hoy. Una vez que haya esca-
neado una imagen, siga es-
tos pasos para crear los ar-
Pulse
terminado.
cuando haya
14 Ya sólo tenemos que
darle el tamaño ade-
cuado. Repita los pasos 4 y
sobremesa o escáneres
planos, que suelen ofre-
cer más calidad.
chivos necesarios.
Nosotros usaremos dos
imágenes de cada CD, una
8 Observe el resultado: 5, pero escoja como tamaño
para la imagen

pequeña para la página prin-

12 Barra cipal y otra más grande, que
de menús
Los programas de Win-
dows tienen colocados
servirá de fondo en la pági-
na de la lista de canciones
de ese disco. Para reducirla ahora al ta-
15
ña?
¿Parece que la imagen
es demasiado peque-
los comandos principa-
les en una línea en la
parte superior de la ven-
1 La imagen que ha esca-
neado
maño que necesitamos para
la imagen de fondo, haga
tana, justo debajo del tí-
tulo de la aplicación. No se preocupe por esa
Para acceder a cada ca- trama de cuadrados grises
tegoría o submenú, de- que aparecen, no estarán ahí
bemos hacer un click, cuando abramos la imagen No se preocupe, esto se
con el botón izquierdo con el editor de HTML. debe a que Paint Shop Pro
del ratón, sobre una de no la está presentando a su
ellas, o bien, pulsar la
combinación de teclas
% + ”tecla subraya-
9 Para guardar la imagen,
haga click sobre
y, después, en .
tamaño auténtico. Para ver-
la en su proporción real ha-
ga click sobre y, des-
da”. Por ejemplo, para pués, en .
acceder al submenú Edi-
ción, se puede pulsar la
combinación de teclas
10 Seleccione la carpeta
que contendrá todas
las imágenes. Haga click so-
Ya puede ver la imagen co-
rrectamente:
% ye. bre y bus-
que la carpeta dentro de la
13 JPG que contiene todos los ar-
Es un formato de archi- chivos
vo gráfico. Es la abrevia- tendrá un tamaño diferente click en la Barra de menús .
tura de JPEG, que signi-
fica Joint Photographic
Expert Group.
al que necesitamos y es po-
sible que sean necesarios al-
gunos ajustes.
12 sobre
en
y, después,
. 11 Ahora dé un nombre
al archivo, especifi-
cando que es la imagen que
Es muy utilizado en las
páginas web de Internet,
junto al formato GIF
14 . El formato JPG se 2 Para empezar, modifica-
remos el tamaño de la
5 Introduzca el siguiente
tamaño
se usará de fondo. Por ejem-
plo: 16 Para guardarla, haga
click de nuevo sobre
y, a continuación, en
utiliza más que el ante-
rior, ya que una imagen
en este formato suele
imagen a aquel que nos con-
venga. Lo primero es selec-
cionar una región cuadrada y pulse .
12 A continuación tiene
que pulsar
. Esta vez el for-
mato y la carpeta ya son los
correctos, y lo único que tie-
ocupar menos espacio de ella, en caso de que no y escoja el formato JPG 13 ne que cambiar es el nom-
en el disco duro que la
misma imagen en for-
mato GIF.
hayamos ajustado bien al se-
leccionar la región a esca-
near. Haga click sobre
6 Esta es la imagen que uti-
lizaremos como fondo
para la página en la que es-
bre del archivo. Para dife-
renciarlo del otro, dele un
nombre:
y, después, en tá la lista de las canciones de .
14 GIF . esta película. Para terminar, pulse .
Es la abreviatura de Pero, para que se lean Cuando haya hecho todo
Graphics Interchange
Format, en castellano,
Formato de Intercambio
3 Observe si el tamaño del
ancho o de la altura es
mayor que el otro
bien éstas, es mejor que la
volvamos un poco más
"trasparente", de forma que
esto, pulse
dar la imagen.
para guar-
17 Repita todo este pro-
ceso para cada una
de las carátulas de los CDs
Gráfico. Es, junto con el
formato JPG, uno de los
formatos más usados
se pueda leer mejor encima
de ella.
Haga
13 Para la siguiente ima-
gen no necesitaremos
el aspecto trasparente de és-
que desee transformar en
MP3. En la próxima entrega
del curso, utilizaremos to-
debido a que se puede
incluir en las páginas click so- ta, así que será mejor des- das estas imágenes para dar-
web de Internet. bre hacer lo hecho. Haga click le un poco de color al in-
y, después, sobre y, luego, elija terface en HTML que nos
escoja la . La dará acceso a los archivos
■

opción imagen volverá a tener el as- de música.

50 Nº 25 50
 Curso Construir una gramola en HTML. 2ª Parte
¿Qué es...?
▼
01 HTML
Proviene del inglés
(Hypertext Markup Lan-
guage). Es un lenguaje
de códigos que utiliza
las páginas web de In-
ternet. Se compone de
una serie de códigos
delimitados por los ca-
racteres “<” y “>” que
se utilizan para indicar
las diferentes partes de
una página web, forma-
to y fuentes del texto,
enlaces a otras páginas
o a imágenes y soni-
dos, código Java e, in-
cluso, formularios.
Interfaz
02
En software, se deno-
mina interfaz al progra-
ma que sirve para co-
municarse con el
usuario. Lo más co-
rriente es que desde
este tipo de aplicacio-
nes sea posible acceder
a la mayor parte de las
funciones y caracterís-
ticas del producto. Este
tipo de programa debe
ser lo suficientemente
llamativo y lo más sen-
cillo de utilizar posible,
ya que es la parte que
el usuario verá en la
pantalla de su ordena-
dor personal cuando
esté trabajando con la
aplicación.
03 MP3
Es un formato de archi-
vo de sonido que tiene
una alta calidad y un ta-
maño muy reducido.
Para reproducirlo es
necesario utilizar un or-
denador, aunque últi-
mamente han aparecido
unos aparatos similares
a los walkman, que son
capaces de reproducir
MP3. Lo que diferencia
a este formato de otros
es la compresión de da-
tos,que reduce el espa-
cio necesario para al-
macenar la información
sonora. Esto permite
almacenar más música
en menos espacio. Ade-
más, se utilizan técni-
cas muy complejas pa-
ra eliminar algunos
sonidos no perceptibles
por el oído humano
(por ejemplo cambios
bruscos de volumen o
tono).
44
Ya le habría gustado a Tony Manero, el personaje de John
Travolta en “Fiebre del sabado noche”, tener la tecnología
actual para poder preparar mejor sus “númeritos” con
nuestra gramola. Por fortuna, la música la decide usted.
La interfaz para la música
No sólo para Internet es
útil el código HTML 01 .
Dadas sus características,
nos será muy útil para, de un
modo sencillo, construir la
Interfaz 02 que nos permi-
ta acceder a los archivos de
música que preparamos en
la entrega pasada del curso.
Por si lo ha olvidado, se lo
recordamos. Estamos cons-
truyendo una gramola con
Página inicial con FrontPage Express
Vamos a empezar por la
primera página de la inter-
faz,aquella a través de la cual
podemos entrar en el resto
de páginas que contienen los
títulos de las canciones de
la que escuchar en nuestro
ordenador, desde un sólo
CD, la música de unos cuan-
tos de nuestros discos.
Si se perdió la primera en-
trega del curso, no dude en
buscar el número pasado.
Esta segunda y última en-
trega, se divide fundamen-
talmente en dos partes.
En la primera de ellas,
construiremos la interfaz pa-
cada disco. Por supuesto, son
muchas las formas en que se
puede hacer una página así,
nosotros crearemos una ta-
bla con las imágenes peque-
ñas de las carátulas que guar-
Nº 26
SUMARIO
El interfaz para la música 44
Pagina inicial con FrontPage Express 44
Una página para cada disco 46
Grabar la gramola en el CD 48
ÍNDICE DEL CURSO
Construir una gramola en HTML. 1ª Parte Nº 25
Construir una gramola en HTML. 2ª Parte Nº 26
y por último .
2 Si no está trabajando con
un documento nuevo,
haga click en
para crear uno.
3 Lo primero que vamos a
hacer es escribir el en-
cabezado de la página, haga
click sobre
para que quede centrado.
4
Foto: Cordón Press. Montaje: Computer Hoy.
Pulse $ para bajar una
linea el cursor y escriba
lo siguiente:
5 Esto aún no se parece al
encabezado tal como lo
queremos, seleccione todo
el párrafo haciendo click so-
bre un extremo de él y arras-
trando el puntero hasta el
otro extremo: .
Después haga click sobre
él con el botón derecho del
ratón y, en el Menú de con-
texto 04 que aparece, haga
click sobre
ra poder escuchar la música
de una forma cómoda usan-
do el programa FrontPage
Express. En la última parte,
usaremos el programa Nero
para grabar todas las carpe-
6 En la ventana que se abre
a continuación
tas que hemos preparado
con el interfaz y los archivos
MP3 03 a un CD para que de
esa manera no ocupen es-
pacio en nuestro disco duro.
Una vez que haya terminado,
podrá disfrutar de su gra-
mola siempre que quiera.
puede cam-
biar la apa-
riencia de la
fuente 05
damos el número pasado. Si- usada para
ga estos pasos. este párrafo.
Para aumen-
1 Haga click en la Barra de
tareas sobre
coja ,
, es-
tar el tama-
ño, haga
click en

y seleccione después
. cambiar el color del
7 Cambie también el tipo
de letra
a .
8 Haga click también sobre
para resaltar aún
más el texto. Pulse
para terminar. El color del
texto también puede cam-
biarlo aquí, con la opción:
pero tendrá a su disposición
menos colores que si esco-
je la siguiente opción.
9 ¿Se mantiene aún el tex-
to seleccionado, pero
con sus nuevos atributos?
. po de letra”. Es la forma
De no ser así, seleccióne-
lo de nuevo y después haga
click en la Barra de herra-
mientas 06 sobre
y seleccione el color
Pulse para confir-
mar el cambio.
10 Pulse un par de veces
$ para dejar algo de
espacio entre el encabeza-
do y la tabla
Pulse y escoja
. programas por varios
11 Seleccione el número
de filas y de columnas
que se correspondan con el
número de CDs que intro-
duzca.
En nuestro caso
Tiene que tener en cuen-
ta que hemos escogido un
tamaño para las imágenes
pequeñas que nos permi-
te poner en la misma fila no
más de tres imágenes para
una resolución de
640x400.
12 Cambie el valor de to-
dos estos campos a 0
.
y haga click sobre
13
trada,
No se preocupe si la
tabla no aparece cen-
Cuando hayamos termina-
do de rellenarla, la pondre-
mos en su sitio.
14 Haga click sobre la
primera celda vacía y
después sobre
para insertar una imágen.
Pulse en la ventana que ha
aparecido
y, escriba
,
poniendo el nombre de uno
de los CDs.
15 La primera imagen ya
está en su celda.
Repita el paso 14 para ca-
da una de las imágenes de
los CDs que incluye en su
gramola, el resultado final se-
rá parecido a este
16 Para centrar la tabla,
haga click sobre
y escoja .
Pulse
y la tabla quedará centrada.
Construir una gramola en HTML. 2ª Parte
17
Ya sólo nos queda
fondo a negro. Haga click so-
bre y seleccione
18 Acontinuación pulse
y escoja .Ya puede
hacer click en para
cerrar esta ventana.
Este es el resultado
19 Aún queda lo más im-
portante, crear los en-
laces de cada una de estas
imágenes a la página (que
haremos en el siguiente
apartado) en la que aparece
el contenido del disco.
20 Haga click sobre la
imagen de un disco
y después haga click sobre
21 En el campo . detalles, pero uno de los
escriba el nombre de la car-
peta que contiene las can-
Nº 26
Curso
¿Qué es...?
▼
ciones de ese disco seguida
de "/index.html", en este ca-
04 Menú
so
Pulse
la ventana.
para cerrar
.
de contexto
Los modernos sistemas
operativos como Win-
dows 95 o Windows 98
22 21 Repita los pasos 20 y
para cada una de
las imágenes.
se basan en objetos. Es-
to quiere decir que to-
dos los elementos que
Cuando haya terminado,ya manejamos son
estará finálizada la página. objetos, y, como tales,
Pulse tienen su personalidad.
Así, al actuar sobre un
para guardarla y después
.
icono en los menús, só-
lo aparecerán las opcio-
nes que tienen relación
Guarde el archivo en la con un icono. Los
carpeta con menús contextuales son
el nombre justamente eso, los me-
. nús que aparecen al pul-
sar el botón derecho so-
bre un icono con las
opciones que guardan
relación con ese icono.
05 Fuentes
También se las llama “ti-
de representar los ca-
racteres en la pantalla
de ordenador y en la im-
presora. Existen
muchos tipos de letras,
aunque usted posible-
mente use “Times News
Roman” o “Courier”
23 Haga click en . cuando está escribien-
do. Este texto, por
ejemplo, utiliza el tipo
de letra “Helvetica Con-
densed”. Dentro de las
fuentes podemos elegir
distintos tamaños y
para cerrar este archivo.Ya
está listo para seguir con los efectos como la negrita
o la cursiva.
siguientes, que son uno por
cada disco, donde irán los
nombres de las canciones.
06 Barra de
herramientas
Las aplicaciones de
Windows bien pensadas
se distinguen de otros
que realmente ayuda a
que sean más cómodas
y fáciles de usar es la
Barra de herramientas.
Con ella, en lugar de te-
ner que buscar por los
menús cada uno de los
comandos que se quie-
ren emplear, basta con
efectuar una simple pul-
sación de ratón sobre el
icono correspondiente.
En los programas real-
mente buenos se puede
personalizar el conteni-
do de esta barra para
que incluya las acciones
preferidas para facilitar
el trabajo al usuario.
▲
45
 Curso XXXXXXXXXXXXXX
Construir una gramola en HTML. 2ª Parte
¿Qué es...? Una página para cada disco

▼
▼
07 Links
PDA
6
01 Ya tenemos la página prin- Rellene del mismo modo
Normalmente
Las siglas PDAsesignifi-
les lla- cipal. Ahora necesitamos el resto de las filas con
ma enlaces.
can PersonalConsisten
Digital As- una página para cada CD las distintas canciones y, en
en líneas
sistant de texto Digital
(Asistente o imá-
genes que Algunos
se encuen-
que nos permita reproducir la última de ellas, introduz-
Personal). de
tran dentro de ciertos cada una de las canciones de ca la opción
estos ordenadores que,
documentos,
por su reducido general-
tamaño,
forma individual o todo el
mente en
caben en cualquier
que permiten
sillo,
otros
páginas web,
acceder
ni siquiera
documentos.
bol- y
tienena
disco completo. El sistema
que emplearemos será simi-
lar al que usamos para la pá-
7 Ahora hay unos cuantos
retoques que la tabla ne-
cesita para dar una imagen
un teclado. Son maneja-
Estos
dos conenlaces estable-
un pequeño lá- gina principal, una tabla en óptima. Para empezar los nú-
cen que
piz, conexiones
escribe con
los tex- la que introducimos cada meros no están correcta-
otras
tos páginas en Inter-
directamente sobre uno de los componentes.Pa- mente alineados. Haga click
netpantalla,
la para quetransformán-
el navega- ra adornarla un poco, aña- sobre una celda de la pri-
dor pueda
dolos luegovisualizarlas.
el ordena- diremos una imagen de la ca- mera columna
Cuando
dor se haceinformá-
a ficheros click rátula como fondo de la
sobre Estos
ticos. un enlace, el na-
chiquitines” pantalla.
vegador
son abrirásobre
utilizados automá-to-
ticamente
do
oinformación
como agenda
la página
como block

ce referencia.
fonos
de
de notas
a ladeque ha-
telé-
y de direcciones.
1 ¿Aún tiene abierto el pro-
grama FrontPage? Haga
click sobre
y después pulse

lumna
y
.Toda la co- sobre
para cambiar el tipo de letra
pondiente a esta canción
.
utilizado y escoja . Recuerde que cada can-
08
02 Pestañade
Puerto para crear una nueva página. Por último pulse ción tiene como nombre el
infrarrojos
Windows emplea mu-
número de la posición que
chosordenadores
Dos símbolos gráficos se
relacionados
pueden
jetosdeque
vés
conectar
lospodemos
conalos
puertos del
tra-ob-
en- 2 Pulse un par de veces $
para dejar un poco de es-
pacio. Haga click en la Ba-
para resaltar aún más el tex-
to.Ya puede hacer click so-
bre cualquier lugar vacío de
ocupaba en el CD. No se pre-
ocupe si todas las canciones
de los CDs tienen los mis-
contrar en por
ordenador una medio
oficina.de
Algunas
un cable.ventanas
También tienenexiste rra de menús en y des- la página para ver el resul- mos nombres, cada grupo de
tantas
la opciones,
posibilidad que es-
de trans- pués en . está seleccionada. tado. ellas está guardado en una
tán separadas
mitir los datos en sindistin-
la ne-
tos apartados.
cesidad de un cable,
Para seleccionar
mediante
tado buscado,
emita
un puerto el apar-
que
sólo hace
señales infrarrojas
3 Cree una tabla con dos
columnas y tantas filas
como canciones tenga el dis-
8 Pulse de nuevo
escoja esta
y
vez
. En la
falta pulsar
hacia con elde
otro puerto ratón
las co, más una, en la que in- ventana que aparece haga
en los pequeños
mismas cam-
características, cluiremos la opción de es- click sobre
pos esté
que de laaparte superior
una distancia cuchar todas las canciones
de la ventana.
máxima de 1,5 metros. seguidas.
Estas
El fichas son pareci-
funcionamiento es Nosotros usamos para es-
das a que
igual las pestañas
el del mando de un te ejemplo el disco de “The
archivador
de un televisor.y sirven para Matrix”, que tiene 13 can-
separar los distintos ciones, por lo tanto, la tabla y elija . Ya puede
03 Velocidad
contenidos y opciones 24 tendrá pulsar , ahora los nú-
X /porobjetos
de algunos 24 de meros están en su sitio
Windows,
Los primeros presentándo-
lectores carpeta distinta y no hay
losCD-ROM
de de una forma bas-
transmitían
tante
los lógica.
datos a una veloci-
dad de 150 Kilobytes
11 El siguiente paso es
colocar los links 07
que nos permitirán escuchar
confusión posible. Pulse
para crear el enlace.
por segundo. Esta velo-
cidad se ha ido multipli-
cando con los años. 4 En el apartado ,
modifique los valores pa-
ra que sean estos
las canciones. Seleccione el
título de una canción 13 Repita el paso 12 para
cada una de las can-
ciones, cambiando el núme-
Ahora, las unidades de
09 XArrastrar
24 transmiten los da-
Es laa un
tos acción
ritmodededespla-
3.600 9 Una vez más, haga click
sobre y ahora elija y pulse
ro del archivo

zar de un por
Kilobytes lugarsegundo.
la pantalla uno o varios
04 Notebook2
objetos
a otro de

seleccionados.
.
Toda la tabla está resaltada
12 Ahora, sustituya el
contenido del campo
14
chivo
En la última línea .
cree el enlace al ar-

Simplemente
Se identifican hay como que por el que es en el que guardamos
hacer click sobre
“notebooks” ellos
los ordena- Pulse cuando ter- nombre del archivo corres- la lista de las canciones.
con el pequeños
dores botón del yratón trans- y, mine los cambios.
manteniéndolo
portables. pulsado,
El tamaño es Pulse
moverlos
similar
tamaño
hasta
al de
al que queremos
A-4. El peso
los, soltando
ronda los 2 kilos.
el lugar
un folio de
llevar-
allí elÉstos
bo-
5 Ahora incluya en la pri-
mera columna de cada fi-
la, el número de la canción,
para centrar la tabla.
tón. Por ejemplo, usted
tienen
milares
prestaciónes
puede arrastar
archivosólo
mesa,
a los decualquier
hasta
sobre-
quelaelpapele-
si-

tecla-
y en la siguiente columna, el
título de la misma. 10 Con la tabla aún se-
leccionada, haga click
ra que
do es más en el Escri-
hay reducido y
torioincorporado
lleva 10 (Pág. 48) elde
Windows paraincorpo-
monitor.lleva borrarlo
de sueldisco
rado duro.
monitor.
▲

46 Nº 26
 Curso Construir una gramola en HTML. 2ª Parte
¿Qué es...?
15
▼

Ya prácticamente he- Tenga cuidado de poner

mos terminado siempre los nombres co-
10 Escritorio pero el aspecto aún es un rrectos a cada uno de los ar-
Es la superficie principal poco simple. Dejará de ser chivos, es sencillo, pues
de trabajo de Windows así cuando añadamos de fon- siempre usamos el nombre
95 y de Windows 98.
do la imagen que prepara- del disco, y de guardarlos en
En esta superficie pode-
mos dejar todo tipo de
mos al principio del curso. las carpetas correspondien-
ficheros y aplicaciones Haga click sobre y tes, es decir, cada archivo en
para que estén accesi- escoja . la carpeta con el nombre del
bles en cualquier mo- disco.
mento. En el Escritorio
encontraremos iconos
importantes como el de
16 Pulse ahora . Si ha terminado, ya tiene
todos los archivos que ne-
cesita para crear el CD.
Mi PC, la Papelera de re-
ciclaje o la Bandeja de para añadir una imagen y de- y después en .
entrada. Podemos per- pués , en el campo es-
sonalizarlo a nuestro
gusto, con diferentes
fondos, tipos y tamaños
criba
Cada vez tendrá que es-
.

cribir el nómbre de la pelí-

18 Guarde la página den-
tro de la carpeta
con el
de letras o colores en cula correspondiente. Pulse nombre
los menús. . y pulse .
Grabadora
17 19
11 Aún no se ve el resul- ¿Ve ya un resultado
de CDs tado ¿verdad? Necesi- como este?
Las unidades normales ta guardar la página para De no ser así, cierre el do-
de CD-ROM sólo permi-
que, una vez ubicado el ar- cumento y vuélvalo a abrir
ten realizar la operación
de lectura de discos.
chivo, FrontPage pueda en- para que FrontPage lea de
Sin embargo, un/a Gra- contrar la imagen de fondo. nuevo el archivo. Ahora ten-
bador/a de CDs también Haga click sobre drá que repetir este proce-
permite la operación de so con cada uno de los CDs.
escritura utilizando un
programa específico.
Para escribir los datos
hay que utilizar unos
Grabar la gramola en el CD izquierda. Pulse en
la ventana que aparece.Ya tie-
Hemos llegado al final. ya
tiene su gramola grabada en
discos especiales
denominados CD-R 12 1
bre
Arranque el programa
Nero, haciendo click so-
y después en
abra la carpeta "cd" que con-
tenía todos los archivos
ne seleccionados todos los
archivos que quiere grabar.
el CD y puede escucharla
cuando quiera. ¿Cómo? Muy
sencillo. Con su navegador
y . de Internet favorito, abra el
archivo “index.html” que se

2 En la ventana que apare-

ce inicialmente, asegú-
rese de que está activada la
encuentra en la raíz del CD.
A partir de ahí, ya puede
navegar por el contenido de
opción la gramola. Para volver de la
12 CD-R página de un disco a la prin-
Es un disco compacto cipal, basta con que use el
grabable. El aspecto de
botón “atrás” que tienen to-
los discos CD-R es muy
similar al de los discos
dos los navegadores. Para es-
CD musicales y pueden cuchar una canción, haga
ser utilizados en cual- y de que el tipo de CD es: click sobre su título y, si no
quier reproductor de se reproduce automática-
CD, bien sea el del mente, en la ventana que
equipo de música o el aparece, haga click sobre
del ordenador.
La única diferencia, ra- 3 Haga click sobre la flecha

dica en que los discos

CD-R se pueden grabar
con la música que se
hasta que encuentre la pes-
taña 08 (Pág. 46) .
Haga click sobre ella y
6 Haga click sobre
y después . Ase-
gúrese de que la unidad
y después en . Si aún
no suena la música, puede
desee una sola vez y en compruebe que las opcio- Grabadora de CDs 11 con- que no tenga asociado nin-
los discos CD tradicio- nes escogidas son tiene un CD-R 12 gún programa para repro-
nales no se puede gra- nuevo y pulse . ducir los archivos MP3.
bar. Para hacerlo, es
necesario disponer de
una unidad grabadora
5 Pulse ` y a para selec-
cionar todos los archivos
y carpetas y, haciendo click 7 Cuando haya terminado
la grabación, pulse
Busque en la lista

de CD que normalmen- sobre ellos con el botón de- y después para ce-
te se instala en un or-
denador.
También hay discos
4 Pulse para esco-
ger los archivos que ne-
cesita. En la ventana
recho del ratón, arrástrelos
09 (Pág. 46) a la ventana de la
rrar esas dos ventanas. Ya
puede cerrar el programa.
CD-RW que se pueden
grabar tantas veces co- el programa o
mo se desee. aquel que usted tenga ins-
talado en su equipo para es-
cuchar MP3 y haga click
■

después sobre .
48 Nº 26