Etiquetas de HTML5
Audio-Video
HTML5 introduce soporte integrado para el contenido multimedia gracias a los elementos
<audio> y <video>, ofreciendo la posibilidad de insertar contenido multimedia en documentos HTML.Insertando contenido multimedia
Insertar contenido multimedia en tus documentos HTML es muy sencillo:
El atributo
src puede ser una URL del archivo de audio o la ruta al archivo en el sistema local.
Este código de ejemplo usa los atributos del elemento
<audio>:controls: muestra los controles estándar de HTML5 para audio en una página web.autoplay: hace que el audio se reproduzca automáticamente.loop: hace que el audio se repita automáticamente.
El atributo
preload es usado en el elemento audio para almacenar temporalmente (buffering) archivos de gran tamaño. Este puede tomar uno de 3 valores:"none"no almacena temporalmente el archivo"auto"almacena temporalmente el archivo multimedia"metadata"almacena temporalmente sólo los metadatos del archivo
Se pueden especificar múltiples fuentes de archivos usando el elemento
<source> con el fin de proporcionar vídeo o audio codificados en formatos diferentes para diferentes navegadores. Por ejemplo:<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4" type="video/mp4">
Tu navegador no implementa el elemento <code>video</code>.
</video>
Esto reproduce el archivo Ogg en navegadores que admiten el formato Ogg. Si el navegador no admite Ogg, el navegador usará el archivo MPEG-4. Mira también la lista de los formatos multimedia admitidos por los elementos audio y video en los diferentes navegadores.
También puedes especificar qué codecs requiere el archivo multimedia; de esta forma el navegador tomará decisiones más inteligentes:
<video controls>
<source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
Tu navegador no implementa el elemento <code>video</code>.
</video>
Aquí, especificamos que el vídeo usa los codecs Dirac y Speex. Si el navegador implementa Ogg, pero no los codecs especificados, el vídeo no será cargado.
Si el atributo
type no está especificado, el tipo de contenido multimedia se obtiene del servidor y se comprueba para ver si el navegador lo puede manejar; si no puede ser mostrado, se comprueba el siguiente source , si ninguno de los elementos source especificados pueden ser usados, un evento de error es enviado al elemento video. Si el atributo typeestá especificado, es comparado con los tipos que el navegador puede reproducir, y si no es reconocido, no se hace la consulta al servidor; en su lugar, el siguiente source se comprueba una vez.
Mira los eventos del contenido multimedia para una lista completa de eventos asociados con la producción multimedia. Para detalles en los formatos multimedia soportados por los diferentes navegadores, mira los formatos multimedia sportados por los elementos audio y video.
Controlando la reproducción multimedia
Una vez que has incrustado el contenido multimedia en tu documento HTML usando los nuevos elementos, puedes controlarlos mediante programación en JavaScript. Por ejemplo, para iniciar (o reiniciar) la reproducción, puedes hacer esto:
var v = document.getElementsByTagName("video")[0];
v.play();
La primera línea obtiene el primer elemento video en el documento, y la segunda línea llama al método
play() del elemento, como está definido en la interfaz nsIDOMHTMLMediaElementque es usada para implementar los elementos multimedia.
Controlar un reproductor de audio en HTML5 para reproducir, pausar, aumentar y disminuir el volumen usando algo de Javascript es muy sencillo.
<audio id="demo" src="audio.mp3"></audio>
<div>
<button onclick="document.getElementById('demo').play()">Reproducir el Audio</button>
<button onclick="document.getElementById('demo').pause()">Pausar el Audio</button>
<button onclick="document.getElementById('demo').volume+=0.1">Aumentar el Volumen</button>
<button onclick="document.getElementById('demo').volume-=0.1">Disminuir el Volumen</button>
</div>Deteniendo la descarga de contenido multimedia
Mientras que detener la reproducción multimedia es tan fácil como llamar al método pause() del elemento, el navegador sigue descargando el contenido multimedia hasta que el elemento multimedia es eliminado a través de la recolección de basura.
Aquí un truco para detener la descarga de una sola vez:
var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src = "";
Estableciendo una cadena vacía al atributo
src del elemento multimedia, tu destruyes el decodificador interno del elemento con lo que detienes la descarga.Etiquetas HTML para imágenes
Para incluir imágenes en el contenido de una página utilizaremos la etiqueta
<img>, que es una etiqueta muy sencilla, que dispone de varios atributos para modificar como se verá la imagen (los atributos src y alt son siempre obligatorios):| Atributo | Descripción |
|---|---|
| src | Indica el nombre o la URL de la imagen a mostrar. |
| alt | Establece un texto alternativo para mostrar en el caso que la imagen no se pueda mostrar. |
| width | Indica el ancho de la imagen. No se debe indicar unidad. Se aconseja hacerlo desde CSS. |
| height | Indica el alto de la imagen. No se debe indicar unidad. Se aconseja hacerlo desde CSS. |
Un ejemplo básico para colocar una imagen sería el siguiente:
<img src="http://lenguajehtml.com/img/html5-logo.png" alt="Logotipo de HTML5" width="400" height="453">
Nota que los atributos width y height redimensionan la imagen al vuelo, esto es, la imagen tendrá unas dimensiones concretas y se descargará siempre a máxima resolución. Con estos atributos redimensionas la imagen al tamaño de ancho y alto indicado, pero la imagen realmente tiene su propio tamaño. Puedes omitir estos atributos siempre que quieras, ya que no son obligatorios.
Formatos de imágenes soportados
En el ámbito informático existen múltiples formatos de imágenes (¡muchísimos!) pero no todos son aptos para utilizar en web. Vamos a dar un repaso a los formatos más utilizados y cuales son más apropiados:
| Formato | Características | ¿Recomendado? |
|---|---|---|
| PNG | Soporta transparencia. Compresión sin pérdidas. Imágenes «lisas». | Sí |
| JPG | Compresión con pérdidas. Ideal para imágenes con texturas. | Sí |
| SVG | Formato vectorial. Ideal para imágenes escalables. | Sí |
| GIF | Formato para imágenes pequeñas y animadas. | Sí |
| WEBP | Alternativa libre de Google al JPEG. Soporta transparencias. | No, poco soporte |
| JPEG2000 | Evolución del JPEG. | No, poco soporte |
| JPEG-XR | Alternativa libre de Microsoft al JPEG. | No, poco soporte |
| APNG | Alternativa libre a GIF. Compatible con PNG. Soporta animaciones. | No, poco soporte |
Cualquier otro formato no mostrado en esta lista no está recomendado para utilizar en web. Formatos como BMP, TIFF, RAW, NEF, PSD, CDR son formatos muy pesados, propietarios o no orientados para su uso en la web.
Si quieres saber más sobre formatos de imágenes y como conseguir reducir su tamaño sin disminuir su calidad, te sugiero leer Formatos de imagen: Guía de optimización.
Etiquetas HTML 5.1 para imágenes
HTML 5.1 incorporará un nuevo sistema para utilizar imágenes en nuestros documentos HTML de forma mucho más flexible que la antigua etiqueta
<img> que nos permitirá mostrar imágenes dependiendo de nuestras necesidades. Para ello, utilizaremos las dos siguientes etiquetas:| Etiqueta | Atributos | Descripción |
|---|---|---|
<picture> | Agrupa una serie de imágenes. Etiqueta contenedora. | |
<source> | srcset, sizes, media, type | Mostrará la imagen que cumpla una serie de criterios opcionales. |
Como podemos ver, lo interesante está en la etiqueta
<source>, que tiene una serie de atributos disponibles para utilizar. Vamos a ver para que sirve cada uno:| Atributo | Descripción |
|---|---|
| srcset | Serie de imágenes (separadas por coma) que se utilizarán. Obligatorio. |
| sizes | Tamaño específico de la imagen que finalmente se mostrará. |
| media | Condición que se debe cumplir para que muestre la imagen. Ver media queries. |
| type | Tipo de formato de imagen. Opcional. |
Imágenes con soporte alternativo
Una de las primeras ventajas que nos ofrecen estas etiquetas es la de utilizar formatos diferentes, dependiendo del soporte del navegador. Así pues, podríamos hacer algo como esto:
<picture>
<source srcset="imagen.webp"> <!-- Formato WebP -->
<source srcset="imagen.jxr"> <!-- Formato JPEG XR -->
<img src="imagen.jpg" alt="Descripción de la imagen"> <!-- Fallback -->
</picture>
En este caso, indicamos que el navegador utilice la imagen con el formato WebP. En caso de no soportarlo, lo intentará con el formato JPEG XR. Si tampoco lo soporta, mostrará la imagen en formato JPEG, que es la que está soportada por todos los navegadores, y si utilizamos algún navegador de texto como Lynx u otro que no pueda mostrar imágenes, mostrará el texto alternativo.
Imágenes responsive (contenido diferente)
Otra ventaja interesante es que con
<picture> podemos crear imágenes responsive que cambien dependiendo de características de las media queries (CSS). Por ejemplo, utilicemos min-width(tamaño mínimo de ancho de la pantalla) en el siguiente ejemplo:<picture>
<source media="(min-width: 600px)" srcset="html5-logo-xl.png">
<source media="(min-width: 300px) and (max-width: 600px)"
srcset="html5-logo-large.png">
<source media="(max-width: 50px)" srcset="html5-logo-small.png">
<img src="html5-logo-medium.png" alt="HTML5 logo">
</picture>
De esta forma, estamos indicando que se muestren diferentes imágenes dependiendo de la resolución de pantalla (ancho) del dispositivo:
- Dispositivos muy grandes (más de 600px): Muestra la imagen
html5-logo-xl.png - Dispositivos grandes (entre 300-600px): Muestra la imagen
html5-logo-large.png - Dispositivos pequeños (menos de 50px): Muestra la imagen
html5-logo-small.png - Si no cumple las anteriores (o no soporta HTML5.1): Muestra la imagen
html5-logo-medium.png
Nótese que esto sólo hará cambio de imagen efectivo justo en los límites indicados (50, 300, 600). Si se desea que la imagen se adapte proporcionalmente, lo mejor es recurrir a tamaños máximos y mínimos de CSS.
Imágenes para diferentes densidades
Además, este sistema también permite especificar diferentes imágenes dependiendo de la densidad de pantalla del dispositivo (alto que varía actualmente en las diferentes gamas de smartphones). Para ello, tenemos que usar un descriptor después del nombre de la imagen utilizado en el atributo srcset (si no se incluye, por omisión es igual a 1x):
<picture>
<source media="(min-width: 600px)" srcset="html5-logo-xl.png,
html5-logo-xl-hd.png 2x,
html5-logo-xl-fhd.png 3x">
<source media="(min-width: 300px) and (max-width: 600px)"
srcset="html5-logo-large.png,
html5-logo-large-hd.png 2x,
html5-logo-large-fhd.png 3x">
<source media="(max-width: 50px)" srcset="html5-logo-small.png,
html5-logo-small-hd.png 2x,
html5-logo-small-fhd.png 3x">
<img srcset="html5-logo-medium.png,
html5-logo-medium-hd.png 2x,
html5-logo-medium-fhd.png 3x" alt="HTML5 logo">
</picture>
Nótese que en cada etiqueta
<source>, e incluso en la etiqueta <img>, se puede especificar el atributo srcset e indicar varias imágenes preparadas para pantallas de alta densidad.
Por último, recuerda que la etiqueta
<picture> y la etiqueta <source> dentro de la anterior son características de HTML5.1 y aún no están soportadas en todos los navegadores. Se recomienda ser cuidadoso con este detalle.¿QUE ES WIX?
Hoy en día hay cada vez más plataformas que prometen ayudarte a crear una página web de manera fácil y gratuita. Wix, una plataforma de origen Israelí, es una de las más conocidas entre ellas. Su eslogan es “Crea tu increíble página web. Es gratis”, una fórmula muy llamativa que atrae a miles de usuarios. Efectivamente, con Wix puedes crear una página web más o menos atractiva, de manera fácil y “gratis”.
¿Por qué es tan popular?
Wix es increíblemente popular, tiene más de 60 millones de usuarios y presumen de que cada día 45.000 usuarios nuevos se suman a utilizarla. ¿A qué se debe?
- Es muy fácil de usar. Hasta un niño puede construir una web en Wix en poco tiempo.
- Tiene plantillas muy vistosas, que prometen un diseño muy atractivo.
- De primeras, hacer tu web es gratis si no te importa que esté llena de publicidad y que tu dominio acabe en .wix.com
- Ofrecen alojamiento gratuito básico.
La verdad de Wix
La verdad es que Wix, como muchas otras plataformas de este tipo, al final acaban dando muchos dolores de cabeza. Cada semana recibo algún email en mi bandeja de entrada de una persona que ha hecho una página web en Wix y está profundamente decepcionada. ¿Qué es lo que pasa?
Recuperado de:https://www.creatiburon.com/que-es-wix/
Recuperado de:https://www.creatiburon.com/que-es-wix/
No hay comentarios.:
Publicar un comentario