¡Descarga Etiqueta de Objetos en HTML y más Guías, Proyectos, Investigaciones en PDF de Física solo en Docsity!
Etiquetas de Objetos
Las principales características que constituyen una página en Internet son : TEXTO El texto es el elemento más significativo de cualquier sitio Web porque los usuarios navegan por la Web fundamentalmente en busca de información expresada en hipertexto. NOTA : Los textos han convertido el inglés en el idioma universal de la red. En su objetivo por alcanzar la mayor audiencia posible, muchos sitios ofrecen su información y sus servicios en su idioma natal y en otros idiomas, fundamentalmente en inglés. IMÁGENES Aunque no debe abusar de las imágenes por el riesgo de aumentar el peso de la página, y por lo tanto, los tiempos de descarga. Las imágenes constituyen un elemento esencial para ofrecer información visual del contenido y mostrar un diseño atractivo y personal. ESPACIO WEB Para que nuestro sitio Web sea visible ante todos necesitamos colocarlo en un servidor. UN NOMBRE DE DOMINIO El nombre de dominio es la primera parte de una dirección Web que identifica al servidor que almacena y sirve su sitio. HIPERVÍNCULOS Por sí misma, una página Web no puede hacer mucho. La magia de verdad comienza cuando relaciona varias página mediante enlaces. VIDEO
Mientras Internet es cada vez más asequible, confiable y veloz, los programas de edición de video se hacen más cercanos a los usuarios. Ahora es más fácil realizar un video desde una cámara digital o un teléfono móvil con cámara incorporada y que termine subiendo a la Web para ponerlo al alcance de todos. ANIMACIONES EN FLASH Es una imagen animada, fácil de crear y sobre todo que ocupa poca memoria. Tiene diferentes usos, desde la creación de dibujos animados hasta el despliegue de dibujos interactivos. SONIDOS Un elemento cada vez más importante. La comercialización de nuevos dispositivos digitales móviles como el iPhone ha potencializado este elemento. Además de incorporar sonido en la página Web puede descargar de ellas archivos de audio para sus dispositivos móviles. El formato MP3 es el más conocido y más usado por su calidad y nivel de compresión. OTROS ELEMENTOS Otros elementos bastante comunes son: Banner: Una imagen fija o animada utilizada generalmente para publicidad. Marcos: También llamados frames, son una especie de recuadro independiente en el que puede cargar una página Web. De esta forma es posible dividir una página Web en diferentes partes o ventanas, cada una con sus propios bordes y barras de desplazamiento, cargando dentro de cada una de ellas una página web externa independiente.
Atributo Función
finalizada la descarga de la página web. Las opciones para ello son: auto (se carga
completamente), preload (el vídeo carga determinados metadatos) y none (impide la
carga previa de datos de vídeo).
Navegadores sin soporte HTML Las versiones actuales de los navegadores web más comunes soportan HTML5. Aun así, si quieres que los vídeos de tu página web también sean accesibles para usuarios que no dispongan de las últimas actualizaciones, puedes utilizar enlaces de texto dentro del elemento __ , ofreciéndoles archivos descargables independientes. De esta forma, el usuario recibe un texto alternativo con el que podrá descargar el vídeo y visualizarlo en su reproductor de vídeo local. El caos del códec HTML La especificación HTML5 define el elemento __ y sus respectivas interfaces de programación (application programming interface, API), pero no especifica la codificación del vídeo. Por esto, la elección del formato suele ser un problema para los administradores de páginas web. WebM, OggTheora o H.264/MPEG4 son formatos con sus respectivas ventajas y desventajas, lo que ha impedido que los principales navegadores web hayan podido ponerse de acuerdo. Mientras que Internet Explorer y Safari se decidieron por el formato H.264/ MPEG4, un formato disponible desde 2013 casi de forma universal, Firefox, Chrome y Opera soportan formatos libres tales como OggTheora y WebM.
Navegador
MP4 (archivos
MPEG4 con códec de
vídeo H.264 + códec
de audio AAC)
WebM (archivos WebM
con códec de vídeo
VP8/VP9 + códec de
audio Vorbis )
Ogg (archivos Ogg
con códec de vídeo
Theora + código de
audio Vorbis)
IE 9+ sí no no
Firefox sí sí sí
Chrome sí sí sí
Safari sí no no
Opera sí sí sí
Para evitar incompatibilidades, se recomienda proporcionar los vídeos en diferentes formatos. Para ello, el elemento __ permite insertar vídeos a través del elemento secundario source y marcarlos con el atributo type para que puedan ser reconocidos por el navegador web.
En caso de que se integren en el elemento __ otros elementos source con el atributo type, el navegador web seleccionará automáticamente el formato de vídeo al que da preferencia. Cabe resaltar
que para insertar un vídeo con este procedimiento, el elemento __ no puede contener atributos src. Integrar contenido audiovisual desde plataformas de vídeo Quien no quiera guardar vídeos en su servidor y prefiera alojarlos externamente , podrá integrarlos utilizando un código de inserción desde YouTube o Vimeo. Este tipo de plataformas garantizan la compatibilidad del contenido con los navegadores más comunes, consiguiendo una correcta visualización en la mayoría de dispositivos de salida. Con el alojamiento externo de los vídeos, la carga de transmisión no recae sobre el servidor propio. Sin embargo, los operadores web deben informarse con antelación sobre las condiciones de uso de este tipo de plataformas y ajustar el código de inserción, también conocido como “embeded code”, a sus necesidades. Si quieres insertar un vídeo desde YouTube solo tienes que encontrarlo y solicitar el código correspondiente. Aquí también es posible definir algunos aspectos de la configuración general, tales como las dimensiones o los subtítulos. Para evitar la reproducción de contenido externo en tu web, es recomendable desactivar la función de vista previa de vídeos alternativos. En el peor de los casos podría tratarse de vídeos de tus competidores directos como consecuencia de contenido visto por otros usuarios relacionado con criterios de búsqueda idénticos. Etiqueta Fotográficas Antes de colocar una imagen en una página web debemos tener claro en que clasificación se encuentra. Las imágenes utilizadas en una página web pueden ser de dos tipos: de contenido o de decoración. En el primer caso, si la imagen pertenece al contenido y tema tratado en esa página, debería incluirse mediante una etiqueta HTML , pero si por el contrario pertenece a la decoración de la página, deberíamos incluirla como un fondo mediante la propiedad CSS background-image. Al principio, la web solo era texto y resultaba más bien aburrido. Afortunadamente, no pasó mucho tiempo antes de que se añadiera la capacidad de insertar imágenes (y otros tipos de contenido más interesantes) en las páginas web. Hay otros tipos de elementos multimedia que tener en cuenta, pero es lógico comenzar con el humilde elemento utilizado para insertar una imagen simple en una página web. En este artículo, veremos en detalle cómo usar este elemento, incluidos sus conceptos básicos y cómo añadir pies de imagen usando y explicaremos cómo se relaciona con las imágenes de fondo en CSS. Prerrequisito s: Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de cómo trabajar con archivos, estar familiarizado con los principios básicos de HTML (como se describe en Empezar con el HTML). Objetivo: Aprender cómo insertar imágenes simples en HTML y añadirles pies de imagen, y cómo se relacionan las imágenes HTML con las imágenes de fondo de CSS. ¿Cómo ponemos una imagen en una página web? Para poner una imagen simple en una página web, utilizamos el elemento . Se trata de un elemento vacío (lo que significa que no contiene texto o etiqueta de cierre) que requiere de por lo menos de un atributo para ser utilizado: src (a veces denominado por su nombre completo, source ). El atributo src contiene una ruta que apunta a la imagen que quieres poner en la página, que puede ser una URL relativa o
Nota: Los elementos como y a veces se denominan elementos reemplazados. Esto se debe a que el tamaño y el contenido del elemento se especifican en un recurso externo (como un archivo de imagen o video), no en el contenido del elemento en sí. Nota: Puedes encontrar el ejemplo terminado de esta sección en Github (consulta también el código fuente).
Etiqueta de sonido
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 música como ambientación. En versiones anteriores de HTML se usaba una etiqueta HTML obsoleta denominada **** que realizaba algo similar. En este caso, utilizaremos la etiqueta **** que funciona exactamente igual que **** , pero con relación a archivos de audio. Etiqueta HTML para audio (modo básico) La etiqueta **** 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:
Sin embargo esto no mostrará nada visualmente, ni reproducirá ningún sonido. Realmente, el audio está ahí, pero no le hemos indicado el atributo controls para que muestre los controles y que el usuario pueda pulsar el botón «play». Tampoco le hemos colocado el atributo autoplay , en cuyo caso tampoco mostraría nada visualmente, pero si que se empezaría a escuchar el sonido o pista de música. Otro ejemplos básicos para colocar audios en nuestra página:
En el primer ejemplo, cargamos un audio en formato MP3, pero indicamos que no precargue nada. Empezará a descargarse sólo cuando el usuario pulse en los controles de reproducción. Este escenario puede ser interesante para evitar consumo de ancho de banda de archivos que es probable que el usuario no escuche o en dispositivos móviles donde las tarifas de datos son costosas. Por otro lado, el segundo ejemplo, carga un archivo de audio en formato OGG y lo reproduce automáticamente y en bucle, de modo que vuelve a empezar cuando termina. Formatos de audio soportados Los archivos de audio estan codificados mediante un codec específico, y es importante conocer estos detalles para saber que formatos están soportados por los diferentes navegadores. A continuación tenemos un listado de los formatos/codecs de audio más conocidos y utilizados: Format o Codec utilizado Características ¿Recomendad o? MP3 MPEG Layer-3 Buena calidad. Sí, buen soporte OGG Ogg Vorbis Buena calidad. Alternativa libre a MP3. Sí, soporte medio AAC Advanced Audio Coding Mejora el MP3. Usado como audio en MP4. Sí, soporte medio Opus Opus Buena calidad. Alternativa libre a MP3. Sí, soporte malo FLAC FLAC Audio Lossless Compresión sin pérdidas. Alto tamaño. Sí WAV Wave sound Formato de Microsoft. Está soportado. No, muy pesado Otros formatos como ASF (WMA), RA u otros no son apropiados para web. **Atributos de la etiqueta ** En la especificación de HTML5 hay alguno más, que nunca está de más echarle un vistazo, pero estos son los atributos que hay que conocer sí o sí: autoplay Autoplay es un atributo booleano. Vamos, que o está o no está, no necesita tener un valor asociado. Este atributo reproduce automáticamente el archivo, así que damos por hecho que eres buena gente y no lo piensas usar.
loop Este atributo, como su nombre indica, nos permite indicar si queremos reproducir el archivo en bucle. Usarlo en combinación con autoplay te elevaría a la categoría de "troll supervillano" en el mundo del desarrollo web. Procura que no me entere de que los usas juntos o tendré que liberar al kraken. ;-)
preload Preload sirve para precargar tus archivos de audio. También existe el booleano autobuffer, que estaría genial si no fuese porque Safari hace la precarga, exista o no el atributo autobuffer. Así que hubo que introducir Preload, que no es booleano y tiene tres valores: media, auto y none. Si no quieres que tus archivos de audio se precarguen, añádeles preload= "none". La precarga está bien si tienes uno o dos archivos, pero si tienes muchos va a ralentizar mucho la carga de tu página.
Así cada navegador reproducirá el primer archivo que pueda reproducir. Ahora, si queremos, podemos echarle un cable a IE8 (y anteriores) y a otros navegadores antiguos que no soporten la etiqueta audio. Para ello podemos echar mano de un reproductor hecho en Flash de manera muy sencilla porque está todo pensado. Todo lo que haya entre y que no sea un elemento de la etiqueta será mostrado sólo a los navegadores que no la soporten :
