Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Imagen y Sonido

    Cargado por

    Marco Antonio Rivero
    6 vistas5 páginas
    introducion al manejo de formatos de imagen y archivos para inicializarse en la edicion de audio y video

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    introducion al manejo de formatos de imagen y archivos para inicializarse en la edicion de audio y video

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    6 vistas5 páginas

    Imagen y Sonido

    Cargado por

    Marco Antonio Rivero
    introducion al manejo de formatos de imagen y archivos para inicializarse en la edicion de audio y video

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 5

    Insertar una imagen

    Para insertar una imagen, se coloca el siguiente cdigo:


    <img src="ruta/imagen.gif" width="XXpx" height="YYpx" alt="descripcion de la imagen">
    Como se puede ver este es uno de los pocos casos en los que no hay etiqueta de cierre, es decir, no
    se pone </img>. Las imgenes nunca tienen etiqueta de cierre. A lo sumo se indica el cierre en la
    misma lnea colocando una contrabarra al final, as: ..... alt="descripcion de la imagen" />
    Veamos con detalles su sintaxis:
    Para empezar se coloca la ruta, que como siempre puede ser una ruta relativa (si la imagen
    pertenece a, o est guardada en tu espacio web) o absoluta (siempre que la imagen la ests
    obteniendo de otra web distinta a la tuya, aunque esto no es recomendable). Las rutas van siempre
    encerradas entre comillas.
    Luego se coloca el ancho y altura expresada en pixeles con las siglas "px". No debes dejar nunca
    espacios en blanco entre la cantidad y las unidades, es decir, no vale poner esto "100 px", sino que
    lo vlido es ponerlo junto, as "100px".
    En el caso de que no pongamos ni width (anchura) ni height (altura), si el archivo de la pgina
    fallara, el resto de los elementos como prrafos etc, ocuparan el lugar de esa imagen. Sera como si
    no existiera. En cambio, si definimos anchura y altura, si ocurre un fallo con la imagen y esta no se
    muestra, el navegador dejar un rectngulo con esas medidas en blanco, respetando la estructura de
    la web.
    Por ltimo vemos un alt="........". No es obligatorio, pero para tener un cdigo vlido es necesario
    poner ese alt y adems escribir entre las comillas una breve descripcin de la imagen. Este
    contenido aparece en el hueco de la imagen en el caso de que la propia imagen no se visualizara por
    algn problema. Por otro lado, algunos buscadores como Google tienen en cuenta estas palabras
    escritas en estas descripciones para relacionar las bsquedas de sus usuarios con el contenido de las
    pginas web, de modo que es bueno adems hacer que aquellas palabras por las que queremos ser
    encontrados aparezcan en esa descripcin.

    BORDER
    Con el atributo BORDER podemos aplicar un borde a la imagen. Los valores son numricos y van
    expresados en pxel. Si impostamos el valor BORDER en 0, la imagen no va recuadrada. Cuando omitimos
    este atributo, el navegador no aplica ningn borde, pero si la imagen es tambin un enlace automticamente
    se le asignar un BORDER=1. La sintaxis correcta es:
    <IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Obra de K. Haring">

    HSPACE y VSPACE
    Con estos dos atributos podemos establecer la distancia en pxel de la imagen a los objetos que se
    encuentran a los cuatro lados de la misma.

    HSPACE define la distancia de los lados derecho e izquierdo de la imagen a los objetos ms
    cercanos (texto, imgenes, apliques, etc.).
    VSPACE define la distancia de los lados superior e inferior de la imagen a los objetos ms
    cercanos (texto, imgenes, apliques, etc.). La sintaxis correcta es
    <IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 VSPACE=3
    HSPACE=3 ALT="Obra de K. Haring">
    Estos atributos resultan tiles cuando queremos distanciar la imagen de los objetos ms
    cercanos.
    ALIGN
    El atributo ALIGN define la posicin de la imagen respecto al texto colocado inmediatamente antes
    o despus de la misma. Existen varias opciones para el atributo ALIGN:
    ALIGN=top: alinea la primera lnea de texto con la parte superior de la imagen.

    INSERTAR IMAGEN DE FONDO


    ara incluir un fondo en una pgina web necesitamos utilizar el atributo background en la etiqueta
    <BODY>, al que le asignamos el nombre del archivo que deseamos utilizar como fondo. Si el
    archivo se encuentra en un directorio distinto que la pgina web, necesitaremos incluir la ruta al
    archivo, teniendo en cuenta siempre de utilizar una ruta relativa al archivo .html para que se
    conserve la ruta en caso de que cambiemos el sitio web de localizacin.
    <body background="fondo.gif">
    Lo que conseguimos con esto es que el archivo fondo.gif se muestre en la pgina como fondo. Por
    defecto, la imagen de fondo aparece como un mosaico, repitindose a lo largo de todo el espacio de
    la pgina.
    Fondo en otros elementos
    No solo la pgina puede tener un fondo, tambin lo podemos colocar a las tablas o las celdas, por
    ejemplo. Se utiliza el mismo atributo background, aunque aplicado a otras etiquetas.
    <table background="fondo.gif">
    <td background="fondo.gif">
    Consejos para utilizar fondos
    Veamos ahora algunos consejos que se deberan seguir para una correcta utilizacin de los fondos
    de imagen.

    1) Colocar un fondo de color parecido a la imagen


    Cuando colocamos un fondo en una pgina debemos utilizar el atributo bgcolor para asignar un
    color de fondo parecido al predominante en la imagen que compone el mosaico. Posiblemente
    muchos de nosotros habremos accedido a una pgina en la que no se ve nada y, cuando se carga el
    fondo, nos damos cuenta que s que haba texto en la pgina, lo que ocurre es que no se vea porque
    no contrastaba con el color de fondo blanco por defecto. Es posible que en estos casos la imagen de
    fondo fuera oscura y que el texto fuera blanco y, hasta que no se carga la imagen de fondo, no se
    puede ver nada. Este problema se agrava si el fondo no se llega a cargar por un error en la
    transferencia del archivo o porque la imagen ha sido borrada del servidor accidentalmente.
    2) Que se puedan leer bien los textos
    Los fondos estn para hacer ms vistosa la pgina, no para molestar en la lectura de los textos. Es
    un error muy comn utilizar un fondo que luego molesta al leer los textos. Ya es bastante difcil leer
    una web en un monitor como para que encima el texto no contraste bien con el fondo que se est
    utilizando. En este caso cabe indicar tambin que es muy importante que las combinaciones de
    color del texto y del fondo sean agradables, ya que hay ciertos colores que, aunque contrastan bien,
    provocan unas combinaciones difciles de leer, por ejemplo un fondo con un color azul
    predominante y el texto en rojo.
    3) Los fondos de imagen de color homogneo
    Si utilizamos un fondo de imagen, tenemos que procurar que en la imagen se utilicen colores de una
    misma gama. Si la imagen tiene partes oscuras y claras, de qu color pondremos el texto para
    asegurarnos de que se lea bien siempre? Si el texto es claro no contrastar bien con las partes del
    fondo que tambin son claras. Igual pasar si colocamos el texto con un color oscuro, que no
    contrastar bien con las partes oscuras del fondo.
    4) Tener cuidado con las distintas definiciones de pantalla
    Es importante saber que un visitante puede acceder a una pgina con un tamao de ventana
    variable. A veces un fondo se comporta bien con una definicin dada, pero no con otras mayores.
    Ocurre muy a menudo que se utiliza un fondo y se ve el resultado en una ventana de 800x600
    1024x768. Luego accede una persona con una definicin de 1280x1024, o superior, y ve la pgina
    incorrectamente porque se realiza un mosaico con el fondo que no haba tenido en cuenta el
    desarrollador. Para entender este punto, puede ser interesante acceder a esta pgina, que se ver bien
    en una definicin de 800x600 pero mal si es mayor.
    5) Hacer un fondo suficientemente grande
    Es importante que el tamao del archivo que vamos a utilizar como fondo tenga un cierto tamao.
    Si utilizamos como fondo una imagen de unos pocos pixels, nuestro ordenador trabajar mucho
    para crear el mosaico repitiendo cientos o miles de veces esa imagen. Sin embargo, si el fondo
    hubiese sido un poco ms grande, para realizar el mosaico hubiera trabajado mucho menos.
    En definitiva, tendremos que tener mucho cuidado al utilizar los fondos, puesto que pueden
    dificultar mucho la presentacin de la informacin en la pgina de una manera clara.

    Si deseamos utilizar un fondo que pudiera dar algn problema, una idea para asegurarnos que los
    textos se visualicen correctamente es colocar todo el contenido de la pgina dentro de una tabla y
    asignarle a la tabla un color de fondo con el atributo bgcolor.

    SONIDO DE FONDO
    Aadir una msica de fondo a una pgina tiene pros y contras, si el sonido es apropiado al
    contenido de la pgina, puede hacerla ms atractiva en contrapartida la descarga del archivo de
    sonido supone una carga que puede ralentizar la visualizacin de la pgina y adems muchos
    usuarios suelen estar escuchando otro tipo de msica cuando navega en Internet, por lo que el
    escuchar tambin sonido en cada pgina que visita puede resultar algo molesto.
    Los formatos de sonido ms habituales en Internet son el WAV, el MP3 y en algunas ocasiones el
    MIDI, aunque existen otros formatos diferentes que tambin pueden utilizarse. Lo ideal es incluir
    algn archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.
    El navegador Internet Explorer puede reconocer la etiqueta <bgsound>, que se utiliza para incluir
    sonido de fondo. Esta nueva etiqueta no necesita etiqueta de cierre.
    A travs del atributo src hay que especificar la ruta y el nombre del archivo de audio.
    Con el atributo loop indicamos el nmero de veces que se tienen que reproducir el sonido. Si se
    desea que el archivo de audio se reproduzca continuamente en un bucle, habr que asignarle el valor
    infinite o -1.
    Por ejemplo, podramos insertar un sonido de fondo escribiendo el siguiente cdigo:
    <bgsound src="varios/audio.mid" loop="-1">
    La etiqueta <bgsound> puede situarse en cualquier parte del documento, pero es preferible que la
    situemos siempre en un sitio fcil de encontrar, por si deseamos hacerle alguna modificacin.
    Podramos, por ejemplo, incluirla justo debajo de la etiqueta <body>.
    VIDEO Y AUDIO <embed>
    En ocasiones puede interesar incluir algn vdeo en una pgina web, pero hay que tener en cuenta
    que los vdeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para
    descargarse.
    Los formatos de vdeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.
    La etiqueta <embed> es la que se utiliza para insertar archivos de vdeo. Puede incluirse la etiqueta
    de cierre, pero en realidad no es necesaria, ya que entre las etiquetas <embed> y </embed> no hay
    que insertar nada.
    A travs del atributo src hay que especificar la ruta y el nombre del archivo de vdeo.
    Los videos insertados a travs de esta etiqueta se reproducen automticamente al cargarse la pgina,
    y se reproducen solamente una vez. Esto puede cambiarse a travs de los atributos autostart y loop.

    El atributo autostart indica si el archivo se reproducir automticamente al cargarse la pgina, y


    puede tomar los valores true o false.
    El atributo loop indica si el archivo se reproducir continuamente en un bucle, y tambin puede
    tomar los valores true o false.
    Los atributos width (anchura) y height (altura) sirven para especificar el tamao de la consola de
    control de vdeo. Estos atributos pueden tomar como valor un nmero, que indica el tamao en
    pxeles. Si no se especifican estos atributos, la consola de control de vdeo se mostrar con el
    tamao ms adecuado al tamao del vdeo.
    A la derecha tienes un ejemplo de un archivo de video, para el que se muestran los controles de
    video. Puedes reproducirlo pulsando sobre los controles.

    Object1

    Para insertar el vdeo anterior, se podra escribir:


    <embed src="varios/cotorra.avi" autostart="false" loop="true">
    Existen algunos navegadores que no reconocen la etiqueta <bgsound>, por lo que no es posible
    utilizar esta etiqueta para incluir un sonido de fondo. En su lugar, se utiliza la etiqueta <embed>,
    que funciona del mismo modo para los archivos de audio y de vdeo.
    No hay que olvidar que para los archivos de audio tambin se mostrarn los controles de
    reproduccin.

    También podría gustarte