domingo, 21 de agosto de 2016


[2016-16-08]

CLASE 25:

Los estudiantes del Grado Noveno B realizaron la salida a la Universidad Industrial de Santander, celebración Festival de Piano.


INCLUIR SONIDO EN UNA PÁGINA WEB

  • Se debe utilizar el elemento <audio>. Este solo  funciona con los browsers Internet Explorer 9+, Chrome, Safari, Firefox y Opera.
  • Conviene incluir una frase de advertencia para los usuarios que utilicen versiones de browser más antiguas.
1.‐ El código básico para incluir sonido en la Página Web es:

<audio control>
<source src="tema musical.mp3"type="audio/mpeg">
<source src="tema musical.ogg"type="audio/ogg">
</source></audio>

Esto hace aparecer en la pantalla una barra de sonido según el browser.


2. Se puede agregar información del audio como un texto informativo sobre el tema musical (título, músicos, duración, etc.) para realizar esto se debe utilizar la etiqueta <p>.

<p>Texto informativo sobre el tema musical (título, músicos, duración, etc.)</p>
<audio controls="">
<source src="tema musical.mp3" type="audio/mpeg">
<source src="tema musical.ogg" type="audio/ogg">
Solo funciona con Internet Explorer 9+, Firefox, Opera, Chrome, y Safari.
</source></audio>






3. Cuando se quieren incluir varios temas musicales, cada [comando de audio] debe estar encerrado y separado de los demás utilizando (por ejemplo) el elemento  <div> ….</div>, o colocándolo dentro de la celda de una tabla.


ATRIBUTOS DEL ELEMENTO <audio> :
  • Autoplay: El sonido comenzará tan pronto esté disponible.
  • Controls: Mostrar en Pantalla la barra de Control de Sonido.
  • Loop: El sonido debe repetirse permanentemente.
  • Muted: Silenciar.
  • Preload: El archivo de sonido debe ser cargado (y cómo) cuando se carga la página.
  • Src: Especifica el sitio (URL) donde se encuentra el archivo de sonido.



                                                                                            
El elemento <audio>, atributos y elementos complementarios <source>:

  • <audio controls=” ”> Indica que el browser debe mostrar la barra de control para escuchar el tema musical.
  • <source src="tema musical.mp3" type="audio/mpeg"> Indica la fuente de donde se tomará el audio correspondiente.
  • type ,  indica qué formato de audio se está utilizando (por ejemplo “audio/mpeg>”.

NOTA:


En el código se incluyen dos formatos de audio posibles (mpeg  y  ogg). Esto se debe a que los browsers tienen sus preferencias; de este modo si no se reconoce el primero (mpeg) , se opta por el segundo (ogg).

MP3 es más pesado que el formato OGGCon archivos MP3, los browsers Safari y Opera no responden. 






TOMADO DE: 


PONER FONDO A LA PÁGINA WEB

El lenguaje de CSS, es el encargado de tener la capacidad para poner un fondo en una página web.

El atributo de CSS que nos permite poner el fondo de la página web es background. Para poner el fondo de la página web, lo tendremos que utilizar sobre el elemento body.

Estructura del elemento background:
background: [color] [image] [repeat] [attachment] [position];

Podemos indicarle:
  • Color RGB.
  • Una imagen.
  • Indicar cómo se repite o si no se repite. 
  • Indicar si se queda fijo(fixed) o en formato scroll
  • Indicar la posición inicial en la que se situará la imagen.

El código CSS quedará de la siguiente forma:
1.  <style type="text/css">
2.  body {  
3.          background:url(fondo.gif) repeat 0 0;                   
4.   }
5.  </style>

Hay que recordar que este código lo tenemos que poner antes de la etiqueta head.
Utilizamos la función url () para indicar el directorio dónde se encuentra la imagen. Si queremos utilizar otro directorio podemos poner lo siguiente:
1.  <style type="text/css">
2.  body {  
3.          background:url('/imagenes/fondo.gif') repeat 0 0;                   
4.   }
5.  </style>

Ahora la imagen se encuentra en un directorio llamado "imagenes" que está en la raiz.
Por último tenemos que saber que existe otra propiedad llamada:
background-image, permite indicar la imagen a utilizar como fondo de mi página web, si no nos queremos preocupar del resto de atributos.
En este caso el código quedaría de la siguiente forma:
1.  <style type="text/css">
2.  body {  
3.          background-image:url('/imagenes/fondo.gif');
4.   }
5.  </style>


TOMADO DE: 

No hay comentarios:

Publicar un comentario