Audio HTML
Al igual que vimos en el tema anterior con los videos, es posible añadir archivos de audio a nuestras páginas web para colocar música, sonidos o simplemente usar a una etiqueta HTML obsoletadenominada
<bgsound> que realizmúsica como ambientación. En versiones anteriores de HTML se usababa algo similar.
En este caso, utilizaremos la etiqueta
<audio> que funciona exactamente igual que <video>, pero con relación a archivos de audio.
La etiqueta
<audio> tiene varios atributos a nuestra disposición:| Atributo | Valor | Descripción |
|---|---|---|
| src | Dirección URL | Audio a reproducir. Obligatoria si actua como etiqueta contenedora. |
| preload | auto | metadata | none | Indica como realizar la precarga del audio. |
| mediagroup | nombre | Establece un nombre para un grupo de contenidos multimedia. |
| autoplay | - | Comienza a reproducir el audio automáticamente. |
| loop | - | Vuelve a iniciar el audio cuando finaliza su reproducción (bucle). |
| muted | - | Establece el audio sin sonido (silenciado). |
| controls | - | Muestra los controles de reproducción. Por defecto no se muestran. |
Un primer ejemplo muy básico para colocar un audio en nuestra página web:
<audio src="audio.mp3"></audio>
Video HTML
En HTML5 se introduce la interesante posibilidad de mostrar videos directamente desde nuestro navegador. De hecho, si arrastramos un video a la ventana del navegador, veremos que comienza a reproducirse en él. Para poder insertar videos en nuestras páginas HTML tenemos que utilizar la etiqueta
<video>, que junto a la etiqueta <source> podremos utilizar estas capacidades multimedia de HTML5.
La etiqueta
<video> tiene varios atributos a nuestra disposición:| Atributo | Valor | Descripción |
|---|---|---|
| src | Dirección URL | Video a reproducir. Obligatoria si actua como etiqueta contenedora. |
| poster | Dirección URL | Muestra una imagen a modo de presentación. |
| preload | auto | metadata | none | Indica como realizar la precarga del video. |
| mediagroup | nombre | Establece un nombre para un grupo de contenidos multimedia. |
| autoplay | - | Comienza a reproducir el video automáticamente. |
| loop | - | Vuelve a iniciar el video cuando finaliza su reproducción (bucle). |
| muted | - | Establece el video sin sonido (silenciado). |
| controls | - | Muestra los controles de reproducción. Por defecto no se muestran. |
| width | tamaño | Indica el tamaño de ancho del video. |
| height | tamaño | Indica el tamaño de alto del video. |
Un primer ejemplo muy básico para colocar un video en nuestra página web:
<video src="video.mp4" width="640" height="480"></video>Barra de Herramientas Dreamweaver
La barra de la aplicación.
La barra la aplicación se incorporó en la versión anterior de Dreamweaver. Si tenemos la ventana maximizada veremos todos los elementos de la barra ocupando una sola línea, si no, ocuparán dos líneas, como en la imagen superior.
Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte inferior), varios botones propios de la aplicación, el conmutador de espacio de trabajo y una caja de búsquedas para obtener ayuda on line.
Los botones propios de la aplicación, que aparecen junto al icono, nos permiten (de derecha a izquierda) cambiar entre la vista de diseño o código, acceder a las extensiones que se pueden añadir, o al administrador de sitios, que ya veremos.
Más hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un espacio de trabajo es la configuración del entorno (paneles visibles y su disposición) que podemos guardar y cargar. Lo veremos más adelante.
Los menús, están agrupados en categorías.
Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Todas las opciones de Dreamweaver son accesibles a través de los menús, aunque en ocasiones nos envíen a los paneles.
2.- Las pestañas de documento.
Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá cambiar de uno a otro fácilmente. Si junto al nombre aparece un *, indica que ese archivo tiene cambios sin guardar. Podemos cerrar cada documento clicando en el aspa de la derecha, o acceder a otras acciones haciendo clic con el botón derecho, como Cerrar otros archivos.
Debajo de las pestañas encontramos los archivos a que utiliza nuestra página, como la hoja de estilos, archivos JavaScript, etc... pudiendo acceder a ellos con un clic. Esto nos ahorrará bastante tiempo.
3.- La barra de estado.
Esta barra la encontramos debajo de la ventana de documento, y nos da información sobre el mismo.
A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas. Siguiendo hacia la derecha tenemos las herramientas de Selección, Mano (para desplazarse) y Zoom. Más a la derecha encontramos tres iconos para ver la página en tres tamaños de pantalla: móvil, tableta y PC escritorio.Y al final hay otros datos como el tamaño de la ventana, el tamaño de la página o su codificación.
Hasta aquí las barras que siempre veremos en la aplicación. A parte, existen otras que podemos ver u ocultar desde el menú Ver → Barras de herramientas.
La barra de herramientas estándar.
La barra de herramientas estándar contiene iconos para realizar las acciones más habituales del menú Archivo y Edición. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer. Esta barra puede ser muy útil, pero en realidad casi todo el mundo usa esos comandos directamente con el teclado (Ctrl + G para guardar, Ctrl + C para copiar, etc.)
La barra de herramientas de documento.
La contiene iconos que nos permiten cambiar entre las distintas vistas de edición y la vista en vivo, vistas previa en multipantalla, acceder cómodamente al título de la página, o realizar las distintas opciones de validación que nos ofrece el programa.
La barra de representación de estilos.
Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamos utilizando hojas distintas que dependan del eso. Hay varias opciones, como las de ver los estilos que dependen de pseudo clases activas, como cuando el cursor está sobre un elemento.
La barra de navegación con navegador.
Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las páginas de nuestro sitio, aunque sólo tiene sentido con la Vista en vivo, como ya veremos.
Como también veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo como otra barra de herramientas.
No hay comentarios.:
Publicar un comentario