Practica7 NVU

Colegio
PRÁCTICAS CON HTML Y Nvu
San Agustín

PRÁCTICA Nº 7. Sonido
Trabajamos con la página miercoles.html en modo normal. Lo primero que

tenemos que hacer es explicar el viaje: hora de salida, paradas, anécdotas e incluir un
par de fotos (se valorará positivamente la redacción del párrafo). Para que las fotos no
se descoloquen, lo mejor es crear una tabla de 1 fila y 2 columnas e insertar las fotos en
cada una de las celdas de la tabla. Al insertar las fotos, especificar un tamaño
personalizado para que no queden demasiado grandes. Podéis poner de ancho 250 px
y activar la casilla mantener proporciones:
Quedará algo así:
Ahora vamos a insertar la canción que estuvimos escuchando durante el viaje (o

una canción que nos recuerde el viaje).
Al igual que en el caso de la imagen disponemos de dos formatos de sonido

directamente legibles por los navegadores: el formato midi (archivos con extensión
1

Coleggio
PRRÁCTICAS CON HTML Y Nvu
San A
Agustín

.mid) y el formato de onda (archivoss con extenssión .wav). Nosotros u utilizaremoss este
últim
mo formato así que lo primero qu ue tienes que
q hacer ess descargarrte la canció ón en
cuesttión (por ejeemplo de youtube
y con
n el atube ca
atcher, indiicando este tipo de arcchivo)
y guaardarla en la
l carpeta reecursos.
Nvu no dispone dee ningún ico

ono para in
nsertar soniidos, así qu
ue vamos a crear
un hiperenlace en
e una imag
gen:
1. D
Descarga la imagen dell blog del prrofesor.
2. In
nsértala deb
bajo de las fotos,
f centra
ada
3. E
Ejecuta inseertar→enlacce y seleccciona el archivo wav que hay en la
carpeta recurrsos.
Guarda la página y visualízala con el navegadorr. Comprob barás que es el

usuaario el que activa
a que suene
s la can
nción pinch
hando encim
ma de la im
magen, y quee ésta
se reproduce enn una ventanna aparte.
Esta forrma de inssertar sonid

dos no es la que más
m se utiliiza en Inteernet.
Normmalmente lo l que teneemos es una imagen
n de un rep
productor donde nossotros
podeemos ir seleccionando las
l cancionees.
Hay mu uchas web queq proporrcionan el código

c y lo
os archivos necesarios para
inclu
uir este scrip
pt en nuestrra página web.
w
2

Coleggio
PR
RÁCTICAS CON HTML Y Nvu
San A
Agustín

Nosotross vamos a utilizar

u el reeproductor de
d la siguiente página web:
http://w
www.wimp
pyplayer.com
m/downloa
ads/index.p
php
Nos descargamos Wimpy

W MP
P3. Descom
mprime el archivo
a .zip
p y veras unos
ntos archivo
cuan os.
3

Colegio
San Agustín

El único archivo que vamos a necesitar de este .zip para que funcione es el
siguiente: "wimpy.swf" ya que el skin (la apariencia) del iPod lo bajaremos de otro
sitio.
Descarga el archivo skin del siguiente enlace:
http://www.megaupload.com/?d=Y6YF4MVL
Descomprime el archivo .zip y estos archivos mas el "wimpy.swf" son los que
tendremos que subir a vuestro servidor. Es decir que tendremos que subir al servidor
los siguientes 3 archivos: "wimpy.swf", "ipod20_bk_mod.jpg" y
"skin_ipod_mod.xml".
Luego tenemos que pegar el siguiente código en la página que queramos, yo lo

he pegado en la página principal, es decir salou.html:
4

Colegio
San Agustín

Código a pegar entre las etiquetas <head> y </head>. Atención: hay que
cambiar lo que está en rojo por la dirección de tu página web
<!‐‐ START WIMPY PLAYER CODE ‐‐>
<script language="JavaScript">
wimpySwf = "http://la url de tu sitio/recursos/wimpy.swf";
wimpySkin = "http://la url de tu sitio/recursos/skin_ipod_mod.xml";
wimpyConfigFile = "";
trackPlays = "";
voteScript = "";
defaultImage = "";
startPlayingOnload = "no";
shuffleOnLoad = "no";
randomOnLoad = "no";
displayDownloadButton = "no";
startOnTrack = "";
autoAdvance = "yes";
popUpHelp = "yes";
scrollInfoDisplay = "yes";
infoDisplayTime = "3";
bufferAudio = "3";
theVolume = "100";
defaultVisualExt = "jpg";
/// NO MODIFICAR NADA A PARTIR DE AQUI ///
randNum = 1;
function makeWimpyPlayer(theWidth, theHeight, theBkgdColor, thePlaylist){
AmyConfigs = Array();
AmyConfigs[AmyConfigs.length] = "wimpySkin="+wimpySkin;
AmyConfigs[AmyConfigs.length] = "trackPlays="+trackPlays;
AmyConfigs[AmyConfigs.length] = "voteScript="+voteScript;
AmyConfigs[AmyConfigs.length] = "defaultImage="+defaultImage;
AmyConfigs[AmyConfigs.length] = "startPlayingOnload="+startPlayingOnload;
AmyConfigs[AmyConfigs.length] = "shuffleOnLoad="+shuffleOnLoad;
AmyConfigs[AmyConfigs.length] = "randomOnLoad="+randomOnLoad;
AmyConfigs[AmyConfigs.length] =
"displayDownloadButton="+displayDownloadButton;
AmyConfigs[AmyConfigs.length] = "startOnTrack="+startOnTrack;
AmyConfigs[AmyConfigs.length] = "autoAdvance="+autoAdvance;
AmyConfigs[AmyConfigs.length] = "popUpHelp="+popUpHelp;
AmyConfigs[AmyConfigs.length] = "scrollInfoDisplay="+scrollInfoDisplay;
AmyConfigs[AmyConfigs.length] = "infoDisplayTime="+infoDisplayTime;

AmyConfigs[AmyConfigs.length] = "bufferAudio="+bufferAudio;
AmyConfigs[AmyConfigs.length] = "theVolume="+theVolume;
AmyConfigs[AmyConfigs.length] = "defaultVisualExt="+defaultVisualExt;
5

Colegio
San Agustín

myConfigs = AmyConfigs.join("&");
randNum++;
flashVersion = "6,0,47,0";
if(theBkgdColor != false){
bkgdColor = theBkgdColor
tptBkgd_param = "";
tptBkgd_embed = "";
} else {
bkgdColor = "000000";
tptBkgd_param = '<param name="wmode" value="transparent" />';
tptBkgd_embed = 'wmode="transparent" ';
}
if(thePlaylist){
writePlaylist = "&playlist="+thePlaylist;
} else {
writePlaylist = "";
}
if(wimpyConfigFile.length > 4){
altString = '&wimpyConfigs='+wimpyConfigFile;
} else {
altString = "&"+myConfigs;
}
queryString = wimpySwf +'?x='+randNum+altString+writePlaylist;
flashCode = '';
flashCode += '<object classid="clsid:D27CDB6E‐AE6D‐11cf‐96B8‐444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#versio
n='+flashVersion+'" width="'+theWidth+'" height="'+theHeight+'" name="wimpy'+randNum+'"
id="wimpy'+randNum+'">';
flashCode += '<param name="movie" value="'+queryString+'" />';
flashCode += '<param name="loop" value="false" />';
flashCode += '<param name="menu" value="false" />';
flashCode += '<param name="quality" value="high" />';
flashCode += '<param name="scale" value="noscale" />';
flashCode += '<param name="salign" value="lt" />';
flashCode += '<param name="bgcolor" value="'+bkgdColor+'" />';
flashCode += tptBkgd_param;
flashCode += '<embed src="'+queryString+'" width="'+theWidth+'"
height="'+theHeight+'" bgcolor="'+bkgdColor+'" loop="false" menu="false" quality="high"
scale="noscale" salign="lt" name="wimpy'+randNum+'" id="wimpy'+randNum+'"
align="middle" allowScriptAccess="sameDomain" type="application/x‐shockwave‐flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
'+tptBkgd_embed+'/></object>';
document.write(flashCode);
//document.write('<textarea name="textarea" cols="30" rows="5"
wrap="VIRTUAL">'+flashCode+'</textarea>');
6

Colegio
San Agustín

}
</script>
<!‐‐ END WIMPY PLAYER CODE ‐‐>

Código a pegar entre las etiquetas <body> y </body>. El lugar concreto
dependerá de donde quieras que aparezca el ipod. En mi caso he elegido la
celda de la derecha de la fila central.
Atención: hay que subir las canciones en formato mp3 a la carpeta recusos
del servidor, y luego poner tu dirección de la página en lo que está en rojo.
Puedes subir tantos mp3 como quieras, con el nombre que quieras en vez de
archivo1.mp3, archivo2.mp3, etc. (pero no te olvides entonces de cambiarlo en
el código:
<!‐‐ START WIMPY PLAYER CODE ‐‐>
<script language="JavaScript" >
myPlaylist = Array();
myPlaylist[myPlaylist.length] = "http://la url de tu página/recursos/archivo1.mp3";
//
makeWimpyPlayer("188", "300", false, myPlaylist.join("|"));
</script>
<!‐‐ END WIMPY PLAYER CODE ‐‐>
7

Practica7 NVU

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Practica7 NVU

Uploaded by

Copyright:

Available Formats

Colegio

Trabajamos con la página miercoles.html en modo normal. Lo primero que

Quedará algo así:

Ahora vamos a insertar la canción que estuvimos escuchando durante el viaje (o

Al igual que en el caso de la imagen disponemos de dos formatos de sonido

Nvu no dispone dee ningún ico

Guarda la página y visualízala con el navegadorr. Comprob barás que es el

Esta forrma de inssertar sonid

Hay mu uchas web queq proporrcionan el código

Nosotross vamos a utilizar

Nos descargamos Wimpy

Descarga el archivo skin del siguiente enlace:

Luego tenemos que pegar el siguiente código en la página que queramos, yo lo

You might also like