tmm_tema6_integracion_medios_digitales.pdf

5/21/2018 tmm_tema6_integracion_medios_digitales.pdf

1/120

Integracin de medios con herramientasde autora Web y propietariasProfesor Coordinador:

Manuel Alonso Castro Gil, UNED DIEEC

Profesores de la asignatura:

Pablo Losada de Dios, UNED DIEEC


2/120

Master en Ingeniera de la Web

Integracin de medios con herramientas de autora Web y prop ietarias 2 de 120

ndice

Introduccin a la asignatura...........................................................3

Objetivos .................................................................................4

Contenidos................................................................................5Introduccin, Multimedia en la web ..............................................5MIME................................................................................5Aplicaciones de ayuda...........................................................6Multimedia incorporada.........................................................6Multimedia , lenguaje HTML y Navegadores .................................8Extensiones de HTML para multimedia ..................................... 11

Inclusin de multimedia con herramientas de autora Web................ 19Qu permite un editor HTML actual?....................................... 19Insercin de contenidos multimedia con Dreamweaver.................. 25

Procesos y tcnicas para la optimizacin de imgenes para la Web ...... 44

Imgenes en la Web............................................................ 44Formatos grficos ptimos para web........................................ 45Grficos vectoriales............................................................ 49HTML y las imgenes........................................................... 56Procesos y optimizacin de imgenes con Fireworks..................... 60

Tecnologas y Plataformas para introducir multimedia en la Web ........ 62Applets de JAVA ................................................................ 62Tecnologa FLASH.............................................................. 64Tecnologa y plataforma QuickTime ........................................ 95Arquitecturas y estndares de vdeo en la web ..........................100Audio y vdeo continuo, Streaming (Reproduccin mediante flujo) ..106

Resumen ...............................................................................118Ejercicios ..............................................................................119

Ejercicio 2 .........................................................................119

Referencias............................................................................120

Bibliografa......................................................................... 120

Recursos en la Web...............................................................120


3/120



INTRODUCCIN A LA ASIGNATURA

Conocemos las necesidades multimedia del sitio

Conocemos las caractersticas del medio Internet y sus limitaciones

Conocemos las herramientas para navegar por Internet y sus limitaciones a lahora de reproducir contenidos mulimedia.

Necesitamos conocer tecnologas y formatos para optimizar y visualizarcontenidos multimedia.

Tenemos la necesidad de aplicaciones que optimicen la integracin y lostiempos de trabajo


4/120



OBJETIVOS

Conocer las caractersticas de los elementos multimedia que se pueden

integrar en pginas Web Conocer las tcnicas de optimizacin de contenidos multimedia.

Conocer tecnologas y formatos que permiten introducir contenidosmultimedia pesados en pginas Web.

Conocer plataformas que permiten reproducir contenidos multimedia demanera integrada con los navegadores

Conocer como soporta HTML la integracin de medios

Conocer que aportan las herramientas de autora Web a la integracin de losmedios digitales


5/120



CONTENIDOS

Introduccin, Multimedia en la webLa multimedia en ordenadores se refiere, por lo general, a la integracin de texto,grficos, audio, vdeo y animacin en un solo documento, como el vdeo, animacin yel sonido incorporado en una pgina Web. La multimedia informtica a menudo poseela caracterstica aadida de la interactividad. Por ejemplo, en un vdeo incorporadoen una pgina Web, el usuario puede elegir entre escuchar el vdeo, pararlo,rebobinarlo o modificar el volumen del sonido.

Las herramientas de navegacin muestran el contenido multimedia de tres formasbsicas:

Incorporada. La multimedia incorporada puede aparecer directamente en unapgina Web sin la necesidad de ningn otro programa o visualizador. Todas las

herramientas de navegacin grficas soportan los grficos GIF Algunas soportanlos grficos JPEG y otros tipos de multimedia. Aplicaciones de ayuda. Hasta hace muy poco, ste era el estndar para

visualizar contenido multimedia en el Web. Casi todas las herramientas denavegacin pueden mostrar multimedia que no sea incorporada por medio deaplicaciones de ayuda. Estas aplicaciones podan ser las herramientas decreacin de los propios formatos o visualizadores diseados para ese fin, enambos casos, herramientas externas al navegador.

Incorporada con mdulos de cdigo externo como los Plug-Ins compatibles conNetscape, controles Active X o los applets Java. Estos "miniprogramas" oconectores de software permiten reproducir al navegador contenidomultimedia directamente en la pgina Web. La diferencia con las aplicacionesde ayuda es que su tamao es mucho menor, que muestran el contenidomultimedia de manera integrada dentro de la pantalla del navegador y que enlas versiones ms actuales de los navegadores ya vienen incluidos los de msuso.

MIMEMIME (Multipurpose Internet Mail Extensions) se desarroll en un principio para enviarcontenido multimedia, como grficos, audio y vdeo, por medio de correoelectrnico. MIME, que incluye un medio estndar para identificar el contenidomultimedia, se ha integrado en el protocolo HTML, el principal protocolo decomunicacin que utilizan los servidores Web, como un medio para identificar el

contenido multimedia en el Web.Todos los documentos, grficos y archivos multimedia en el Web se puedenidentificar con un tipo y subtipo MIME. Por ejemplo, el tipo MIME "text' y el subtipo"plain" indican un archivo de texto ASCII. Los tipos y subtipos MIME, por lo general, seescriben de la siguiente forma: "text/plain". Un documento HTML posee el tipo ysubtipo MIME "text/html. Un archivo GIF posee el tipo "image/gif ". Las herramientasde navegacin y los servidores Web utilizan el tipo y el subtipo MIME para determinarcmo se tienen que procesar los datos multimedia.

La forma ms comn de distinguir archivos con diferentes tipos MIME es utilizarextensiones estndar de nombres de archivos. Todos los servidores Web poseen una

tabla que asocia una determinada extensin con un tipo MIME. Por ejemplo, todos losarchivos HTML en un determinado servidor poseen la extensin ".html" que se puedeasociar con el tipo MIME "text/html". Todos los archivos JPEG en un servidor poseen


6/120



la extensin de nombre de archivo "Jpg"o "jpeg" y se pueden asociar con el tipo MIME"Image/ipeg".

Cuando una herramienta de navegacin solicita, por ejemplo, un archivo denominado"image.gif ", el servidor Web busca la extensin del nombre del archivo en su tablade tipos MIME, determina que se trata de un archivo GIF y luego enva esa

informacin a la herramienta de navegacin. sta, por su parte, determina la accina tomar, como por ejemplo mostrar el GIF incorporado, lanzar una aplicacin deayuda o un Plug1n.

Todos los servidores Web se tienen que configurar para que puedan gestionardiferentes tipos MIME. Numerosas extensiones de nombres de archivos se puedenasociar al mismo tipo MIME. Por ejemplo, los archivos con una extensin ".qt" y".mov" se asocian, por lo general, al tipo MIME "video/quicktime".

Si se quiere ofrecer contenido multimedia en un centro Web, se debera asegurarque:

Los archivos multimedia poseen la extensin de nombre de archivo correcta.

El servidor est configurado para asociar estas extensiones con un determinadotipo MIME.La mayor parte de las herramientas de creacin Web incorporan informacin sobrelas extensiones de los nombres de archivo y los tipos MIME para determinados tiposde multimedia.

Aplicaciones de ayudaLas aplicaciones de ayuda son una forma para que las herramientas de navegacinWeb muestren o procesen tipos MIME y contenido multimedia que las herramientasde navegacin no pueden mostrar por s solas. En otras palabras, las aplicaciones deayuda le proporcionan la riqueza del contenido multimedia del Web sin la necesidad

de que su herramienta de navegacin tenga incorporadas todas las posibilidades devisualizacin para la multitud de tipos de datos multimedia existentes. Por ejemplo,para mostrar un vdeo QuickTime, las herramientas de navegacin no necesitanincluir posibilidades especiales para visualizar vdeo, sino que, en su lugar, puedenlanzar una aplicacin de visualizacin por separado en la mquina local. Estaaplicacin gestiona la visualizacin del vdeo. Las aplicaciones de ayuda se siguenutilizando en la actualidad para el contenido multimedia, aunque cada da estncediendo ms paso los Plug-ins.

Desventajas de las aplicaciones de ayuda

Una desventaja que presentan las aplicaciones de ayuda es que la multimedia sevisualiza en una ventana aparte. No existe ningn tipo de integracin en informacin

en la pgina y la aplicacin de ayuda. Asimismo, los usuarios de contar en suordenador con la aplicacin de ayuda apropiada, deben configurar su ordenador parautilizar adecuadamente dicha aplicacin y deben contar recursos suficientes en elsistema para que se soporte dicha aplicacin.

Multimedia incorporadaLa multimedia incorporada es contenido multimedia que se muestra directamente enuna pgina Web junto con el documento de texto. La posibilidad de mostrar grficosincorporados como archivos GIF o JPG ha estado presente desde las primerasherramientas de navegacin Web grficas. Netscape Navigator y otras herramientasde navegacin estn empezando a proporcionar soporte incorporado para otros tipos

de grficos y archivos multimedia.


7/120



Parte de esta funcionalidad adicional procede de los mdulos de cdigo externodenominados Plug-Ins o controles ActiveX. A partir de la aparicin de NetscapeNavigator 3.0, esta herramienta de navegacin proporciona soporte para vario tiposde datos multimedia y se ha convertido en una potente herramienta de creacin eintegracin multimedia.

La primera generacin de los Plug-Ins multimedia incorporados se utiliza de formamuy similar a los GIFs incorporados. La multimedia se muestra incorporada, en lapgina Web, y el usuario posee la opcin de utilizar controles estndar como losbotones play, pausa o repeticin. La segunda generacin de multimedia incorporadosproporciona una integracin de multimedia ms sofisticada. LiveConnect de Netscapey VBScript de Microsoft permiten compartir informacin entre varios elementos deuna pgina Web

La arquitectura Plug-In de Netscape (tratada con detalle ms adelante) permite a losdesarrolladores ampliar la funcionalidad de la herramienta de navegacin Netscape.

Los usuarios tienen que importar e insular los Plug-Ins. En las actuales versiones deNetscape Navigator, los importarn automticamente segn sea necesario.

Netscape Navigator 4.7 se distribuye con varios de ellos (de modo que el usuario notiene que importarlos ni configurar nada), lo que proporciona soporte para lossiguientes formatos multimedia:

Vdeo para Windows (AVI) en mquinas Windows Live Audio (AIFF, WAV, AU, y sonido MIDI) Animaciones Shockwave Flash Virtual Reality Modeling Language (VRML) Applets Java

OLE/ActiveX es la arquitectura de componentes de Internet de Microsoft basada ensu tecnologa OLE. ActiveX constituye una plataforma integrada que incluye serviciosdedicados a cliente y servidor, tecnologas de red y herramientas de desarrollo yautor.

De Active X destacar para la Web:

Controles Active X, similares a los Plug - Ins Documentos Active X, permiten la visualizacin de documentos distintos de

contenido no HTML, tales como los procedentes de Microsoft Excel o Word, atravs del navegador

Lenguajes Scripts

La incorporacin de los lenguajes script a la web permiti a los desarrolladores darms dinamismo e interactividad a su pginas.

Javascript permite, en entre otras cosas:

Controlar el aspecto y contenido de la pgina Controlar el navegador Interactuar con el contenido del documento y con el usuario

El lenguaje se basa en la dualidad Objeto - Evento

Objeto: Son elementos predefinidos que se refieren a cosas comunes(Ventanas, documentos, imgenes, etc).Tienen mtodos y propiedades

Eventos: Son acciones que produce el usuario en la pantalla del navegador(hacer clic con el ratn, etc). Se manejan con los controladores de eventos(Onmouseout, etc)


8/120



Multimedia Java. Los Applets

Java es un lenguaje de programacin de alto nivel con sintaxis similar a C.

Permite disear aplicaciones adaptadas a cliente con las ventajas de ser un lenguaje

independiente de la plataforma y dirigido a red.El aspecto ms usado de JAVA en la Web son los Applets, que son pequeosprogramas hechos en JAVA con la limitacin del navegador donde se ejecutan

Relativamente novedosos son los Servlets, que a diferencia de los applets, seejecutan en el lado del servidor y no tienen interfaz grfica. Dirigidos a crear sencillaaplicaciones de servidor, muy tiles para comercio electrnico.

Multimedia , lenguaje HTML y NavegadoresMultimedia en Internet se reduce principalmente a la posibilidad de introducirdiversos medios electrnicos en la Web. En sus comienzos, el lenguaje que soporta la

Web, HTML, apenas permita introducir texto con un formato sencillo e imgenes.A medida que la Web fue siendo ms usada y se la dio un uso ms comercial sefueron incrementando las posibilidades multimedia para soportar ms tipos demedios.

El primer paso fue la introduccin de nuevas etiquetas o extensiones del lenguajeHTML que permiten introducir un formateado ms completo de texto, introduccin sesonidos y vdeos, etc. Decir que la forma de introducirlos era muy rudimentaria ydaba poca flexibilidad al autor.

El siguiente paso fue dar la posibilidad de introducir en las pginas Web todo tipo decontenidos multimedia creados por herramientas de creacin (Ficheros grficos condiversos formatos, otros formatos de audio y vdeo, etc). Para ello se adopto elestndar MIME (Multipurpose Internet Mail extensins) existente para correoelectrnico como un modelo de identificacin de la gran cantidad de formatosmultimedia existente. A travs de un tipo y un subtipo se puede informar alnavegador de que formato multimedia se trata y que accin realizar con el paravisualizarlo. En un principio, para visualizarlos, el navegador hacia uso deaplicaciones de ayuda externas. Pero fue aqu cuando la empresa NetscapeComunications desarrollo e impulso los denominados Plug-Ins o pequeos programasque se integraban con el navegador y que permitan visualizar los ficheros nosoportados por el navegador de una manera ms sencilla e integrada.

Como contraataque a esta tecnologa por parte de Microsoft se hizo una evolucin dela tecnologa OLE ya existente y se la denomino Active-X. A travs de controlesexternos denominados Controles Active-X se permite incorporar todo tipo decontenidos multimedia en pginas Web. Por ahora estos son solo soportados por elNavegador Explorer y el navegador Netscape los soporta a travs de un Plug-In y laetiqueta EMBED.

A diferencia de los plug-ins, los ActiveX se pueden detallar como parte integrante delcdigo de una pgina Web con unos controles especficos. Esto se lleva a cabo pormedio de la etiqueta que indica los parmetros y propiedadesdel tipo de control a utilizar y el fichero multimedia a visualizar. Los controlesActiveX se identifican por medio de un cdigo CLASSID. Los controles ActiveXtambin se diferencian de los plug-ins en que se pueden utilizar en otras aplicacionesdesarrolladas en lenguajes de programacin como Visual Basic, Visual C++ o Borland

C++.


9/120



Lenguajes de programacinEl siguiente paso en la evolucin de la Web fue la aparicin de lenguajes deprogramacin que permitan introducir animacin en las pginas, mayor control yflexibilidad en el manejo de medios digitales y mayor interactividad con el usuario.Podemos destacar los siguientes:

Javascript: Se trata de un lenguaje script que permite a los autores incorporaruna programacin sencilla orientada a objetos que se ejecuta en la mquinadel usuario cuando se carga la pgina en el navegador o el usuario produce unevento(actuar con el ratn, con el teclado, etc). La sintaxis de Javascript essimilar a la C, existiendo como elementos principales, manejadores deeventos, objetos, funciones, operadores, etc

VRML: VRML (Virtual Reality Modeling Languaje) es un lenguaje deprogramacin con el que se pueden desarrollar mundos interactivos en tresdimensiones (3-D). Estos mundos constituyen lo que se denomina la "realidadvirtual", porque los usuarios pueden interactuar con los objetos de una formasimilar a como lo hacen en la realidad "normal". Muchos expertos opinan que la

realidad virtual va a revolucionar la manera con la que los usuarios serelacionan con sus ordenadores, de un modo similar a lo ocurrido con el WorldWide Web. Las posibilidades son innumerables: simulaciones educativas,nuevos mtodos de organizar la informacin, nuevas formas deentretenimiento, etc .La manera de acceder a estos mundos virtuales es por medio de un navegadorde VRML que interprete los comandos del lenguaje, y permita adentrarse einteractuar con el mundo virtual. Estos navegadores de VRML funcionannormalmente como plug-ins de los navegadores tradicionales del Web,(Explorer, Netscape, etc). Se puede decir, por tanto, que nos dirigimos haciala formacin del Web en tres dimensiones.

JAVA: Se trata de un lenguaje de programacin muy similar a C++ adaptado a

las exigencias de uso en la red. Sus principales caractersticas son:Es un lenguaje en parte compilado y en parte interpretado. Al compilarse losprogramas con un compilador JAVA se genera un cdigo Byte que hay queinterpretar mediante las denominadas mquinas virtuales instaladas en lasmquinas del los usuarios. Esto hace al lenguaje independiente de la mquinadonde se vaya a ejecutar.Es orientado a objetos, lo que permite la modularidad de la programacin ydistribuido.Es multihilo, lo que permite ejecutar varios procesos a la vez dentro unprograma.Mediante JAVA se escriben los Applets de JAVA, programas escritos en dicho

lenguaje que se ejecutan dentro de una herramienta de navegacin. Un Appletse incorpora a una pgina Web como si se tratase de una imagen o un sonido yproporciona un medio muy flexible y completo de introducir multimedia yanimaciones con independencia de la mquina y navegador donde se vaya acargar la pgina en cuestin.La multimedia en Java es algo primitiva, aunque con la versin 2.0 se hamejorado esto bastante y se han incluido libreras para este cometido muchoms completas.

XML: El Lenguaje de Marcaje Extensible (Extensible Markup Language, XML) esun lenguaje de metamarcaje (meta-markup) que proporciona un formato paradescribir datos estructurados. Esto facilita declaraciones ms precisas decontenido y resultados de bsquedas con ms significado entre muchas

plataformas. Adems, el XML habilitar una nueva generacin de aplicacionesmanipulacin y visualizacin de datos basadas en Web.


10/120



Dentro de XML puede definir un conjunto ilimitado de etiquetas. Mientras quelas etiquetas de HTML pueden utilizarse para desplegar una palabra en negritao itlicas, el XML proporciona un marco de trabajo para etiquetado de datosestructurados. Un elementos de XML puede declarar que sus datos asociadossean el precio de venta al pblico, un impuesto de venta, el ttulo de un libro,la cantidad de precipitacin o cualquier otro elemento de datos deseado. Alirse adoptando las etiquetas XML a lo largo de una intranet de algunaorganizacin y por otros a lo ancho de la Internet, habr una correspondientehabilidad para buscar y manipular datos sin importar las aplicaciones dentro delas cuales se encuentre. Una vez que los datos han sido localizados, pueden sertransferidos a travs de la red y presentados en un navegador tal como elInternet Explorer 5 en una gran variedad de formas, o puede ser transferido aotras aplicaciones para su posterior procesamiento y visualizacin.XML proporciona una representacin estructural de los datos que ha probadoser ampliamente implementable y fcil de distribuir. Las implementacionesindustriales en la comunidad del Lenguaje de Marcaje Generallizado Estndar(Standard Generalized Markup Language, SGML) y en otros lugares han

demostrado que la calidad intrnseca y la fortaleza industrial del formato dedatos con estructura de rbol del XML.XML es valioso para la Internet, as como para los grandes ambientes deintranets corporativas porque proporciona interoperabilidad utilizando unformato basado en estndares, abierto y flexible con nuevas formas deacceder a bases de datos propietarias y proporcionar datos a los clientes deWeb. Las aplicaciones se pueden construir ms rpidamente, son ms fcilesde mantener y pueden proporcionar varias vistas de los datos estructurados.El beneficio de XML es que mantiene la separacin entre la interfaz de usuarioy los datos estructurados. El Lenguaje de Marcaje de Hipertexto (HypertextMarkup Language, HTML) especifica como visualizar datos en un navegador, elXML define el contenido. Por ejemplo, en HTML se utilizan etiquetas para

decirle al navegador que despliegue en negritas o itlicas; en XML solo utilizaetiquetas para describir los datos, tales como el nombre de la ciudad,temperatura y presin baromtrica. En XML, utiliza hojas de estilo tales comoel Lenguaje de Estilo Extensible (Extensible Style Language, XSL) y las Hojas deEstilo en Cascada (Cascading Style Sheets, CSS) para presentar los datos en unnavegador. El XML separa los datos de la presentacin y el proceso,permitiendo desplegar y procesar los datos tal como se desee, al aplicardiferentes hojas de estilo y aplicaciones.Esta separacin de datos de la presentacin permite una integracin de datosperfecta de fuentes diversas. La informacin de clientes, ordenes de compra,resultados de imvestigaciones, pagos de facturas, registros mdicos, datos de

catlogo y cualquier otra informacin se puede convertir a XML en el nivelmedio , permitiendo a los datos ser intercambiados en lnea tan fcilmentecomo las pginas de HTML despliegan datos hoy. Los datos codificados en XMLpueden ser transmitidos sobre la Web hasta el escritorio.


11/120



Extensiones de HTML para multimedia

Extensiones para incluir sonidosUna pgina del Web puede tener sonidos incorporados, bien sea como un fondo

sonoro que se ejecuta automticamente al cargar la pgina, o como una opcin paraque la active el propio usuario. Es una etiqueta propietaria de Microsoft, por lo queslo es interpretada por Internet Explorer, admitiendo los formatos de audio MID yWAV, aunque generalmente tambin acepta AU y MP3, en versiones actuales delnevagador o mediante plugins de uso general.

Su sintaxis general, con sus atributos ms importantes, es del tipo:

Donde:

src="ruta_fichero" fija la ruta en la que se encuentra el fichero de audio areproducir. La ruta puede ser relativa a nuestro sistema de carpetas local,absoluta respecto el sistema de carpetas del servidor web o una URL completaque localice el fichero en Internet.

loop="l" determina el nmero de veces (l) que se debe ejecutar el fichero deaudio. Si le damos el valor infinite, el fichero se reproducir indefinidamente.

balance="b" determina el balance del sonido entre los dos altavoces delequipo, es decir, la potencia o intensidad con que se oir en cada uno de ellos(derecho e izquierdo). Sus valores pueden estar entre -10,000 y +10,000,correspondiendo el valor 0 a un balance equilibrado entre los dos altavoces.

volume="v" fija el volumen al que se oir el sonido, y sus valores pueden variarentre -10,000 (mnimo) y 0 (mximo). No es soportado por los equipos MAC.

Un ejemplo sera:

ETIQUETA

Nestcape Navigator implement la etiqueta para incorporar ficheros deaudio. Es sta una etiqueta de carcter general, que se usa para la inclusin en laspginas web de todos aquellos archivos ajenos al navegador y que necesitan por lotanto la ejecucin de algn plugin para su interpretacin.

Internet Explorer asumi despus el uso de esta etiqueta para la inclusin de ficheros

de audio, para llegar a interpretarla mejor y ampliarla con ms atributos ypropiedades, de tal forma que la ejecucin de sonidos con embed es actualmentems cmoda con este navegador, al incorporar la suite de Microsoft sus propiosconectores de software para la interpretacin de los diferentes formatos de audio.En cambio, si usamos Netscape Navigator nos encontraremos en muchos casos con unfallo en la reproduccin o con un engorroso mensaje de necesidad de algn pluginespecial (sobre todo en las versiones 6x), lo que nos obligar a visitar la pgina deNetscape para su descarga e instalacin, que muchas veces no ser efectiva.

Sea como sea, hay que indicar que esta etiqueta nos va a incluir en la pgina web unobjeto especial, una especie de consola de mando, denominada Crescendo, queconsta de tres botones, similares al de cualquier reproductor de audio: un botn

Play, para comenzar la reproduccin (si no est establecida a automtica), un botnPause, para detenerla momentneamente y un botn Stop, para detenerla


12/120



definitivamente (puesta a cero). Esta consola es diferente segn el navegador usado;en el caso de Internet Explorer se muestra la tpica consola de Windows Media, cuyotamao podemos configurar, mientras que en Netscape se muestra una consolapropia, de tamao fijo definido.

La sintaxis general de la etiqueta embed es del tipo:

Y los atributos se pueden dividirlos en dos tipos:

1. Atributos referentes al sonido: src="ruta_fichero", que fija la ruta en la que se encuentra el fichero de audio a

reproducir. La ruta puede ser relativa a nuestro sistema de carpetas local,absoluta respecto el sistema de carpetas del servidor web o una URL completaque localice le fichero en Internet.

loop="l/true/false", que determina el nmero de veces que se debe ejecutar elfichero de audio. Los valores admitidos son l (nmero entero de veces), true(infinitas veces) y false (slo una vez). Slo es reconocida por Netscape

Navigator. playcount="n", que define el nmero de veces (n) que se debe ejecutar en

fichero de audio en el caso de Internet Explorer. type="tipo_fichero", atributo importante, que declara el tipo de fichero de

audio que estamos usando, con lo que el navegador web puede ejecutar elprograma o plugin adecuado para la reproduccin del fichero. Puede seraudio/midi, audio/wav, etc.

autostart="true/false", que determina si el fichero de audio debe empezar areproducirse por s slo al cargarse la pgina o si por el contrario ser precisola actuacin del usuario (o de cdigo de script) para que comience la audicin.

pluginspage="URL", que establece, en caso de ser necesario un plugin especialpara reproducir el fichero, la pgina web donde se puede descragar el mismo.Slo se activa en el caso de que el navegador no sea capaz de reproducir elfichero por s mismo, y es soportada tan slo por Netscape Navigator.

name="nombre", que asigna un nombre identificador (debe ser nico en lapgina) a una etiqueta embed determinada, con objeto de ser accedida luegopor lenguajes de script.

volume="v", que determina el volumen de reproduccin del sonido, y quepuede variar entre 0 y 100. Es slo soportada por Netscape Navigator, que enla consola muestra el valor establecido en su indicador de volumen, siendo suvalor por defecto 50. En en caso de Internet Explorer, el valor del volumen pordefecto es 50 en plataformas PC, y 75 en MAC, siendo necesario actuar sobreel control de volumen de la consola para modificarlo.

2. Atributos referentes a la consola: hidden="true/false", que establece si la consola va a ser visible (false) o no

(true). Es ste un aspecto polmico, ya que si ocultamos la consola obligamosal usuario a oir nuestro fichero, sin posibilidad de detenerlo ni de modificar elvolumen, y si la mostramos estaremos incrustando en la pantalla un objeto quemuchas veces nos romper el esquema de diseo de nuestra pgina. Quedadeterminar su uso en cada caso concreto.

width="w", que determina el ancho visible de la consola, en pixels. height="h",que determina el alto visible de la consola, en pixels. Estos atributos sontambin muy importantes, caso de que hayamos establecido hidden= "false",

ya que de su valor va a depender la correcta visulazacin de la consola. En elcaso de Internet Explorer, que muestra un logo de Windows Media sobre los


13/120



controles, el tamao mnimo aceptable debe ser de 140x100 pixels, ya que sino la consola saldr deformada en exceso o recortada. Y en el caso deNetscape Navigator, deberemos asignar unos valores de 145x60 pixels, que eslo que ocupa la consola; si ponemos un tamao menor, la consola serrecortada, perdiendo funcionalidades, y si asignamos un tamao mayor,aparecern espacios grises alrededor de la consola, afeando el aspecto de lapgina. Si no especificamos estos atributos y tampoco hidden, nos aparecernen la pgina tan slo los mandos de la consola, sin logotipos aadidos (InternetExplorer) o la consola recortada (Netscape Navigator).

align="top/bottom/center/baseline/left/right/texttop/middle/absmiddle/absbotom", anlogo al de la etiqueta IMG, define la alineacin horizontal overtical de la consola respecto de los elementos de la pgina.

hspace="hs", que establece la separacin horizontal, vspace="vs", queestablece la separacin vertical, en pixels, entre la consola y los elementos dela pgina que la redean. Anloga a sus equivelentes de la etiqueta IMG.

Ejemplo sin consola:

Ejemplo con consola:

FONDO SONORO COMBINADO PARA EXPLORER Y NETSCAPE

Se pueden combinar los dos tipos distintos de etiquetas para conseguir que un fondosonoro sea escuchado por usuarios que utilicen tanto el Explorer como el Netscape

En este caso, el Explorer ignorar la etiqueta del Netscape, y a la inversa.

Las etiquetas necesarias para que se ejecute el fichero sonido.mid como sonido

de fondo, tanto por el Explorer como por el Netscape (lo har una sola vez):

ACTIVACIN DEL SONIDO POR EL PROPIO USUARIO

Hasta aqu se ha visto cmo poner un sonido de fondo en una pgina. Hay otra

opcin, mucho ms sencilla, y es la de poner un enlace a un fichero de sonido, de talmanera, que al pulsarlo se ejecute el fichero.

Por ejemplo, poner un enlace al fichero sonido.mid:

Escucha esta musica

Al pulsar el enlace se activa, en una ventana aparte, el programa que ejecuta elsonido.

Tambin se puede conseguir que al hacer clic en una imagen se active un sonidopredeterminado, a travs de la siguiente lnea:


14/120



ETIQUETA

Con objeto de normalizar la inclusin de ficheros no nativos en los navegadores Webse decidi sustituir las diferentes etiquetas que realizaban este papel (APPLET,BGSOUND, EMBED, etc.), y que no pertenecan a los estndares Web, por unaetiqueta general, que fuera capaz de incrustar en el navegador todo tipo de ficheros.

La etiqueta elegida en el estndar HTML 4.0 fue OBJECT, a la que se dot desuficientes atributos y flexibilidad para poder realizar correctamente su trabajo.Debido a esto, la propuesta ha sido usar la etiqueta object tambin para incluirficheros de audio de todo tipo en las pginas Web.

Ahora bien, la aceptacin e implementacin que la misma ha tenido vara segn elnavegador en particular, as como en funcin del objeto a incrustar. De este forma,Internet Explorer a realizado su propia implementacin de la etiqueta object,incluyendo en ella referencias a filtros y componentes ActiveX especficos para losficheros de audio. Por su lado, los navegadores Netscape no soportan correctamenteesta etiqueta para ficheros de este tipo.

Como regla general, vlida no slo para incrustar ficheros de sonido, sino tambin

para otros tipos, la etiqueta object va a definir un objeto o componente externoencargado de la reproduccin del fichero, que en el caso de Internet Explorer sueleser algn tipo de control ActiveX. Mediante object se instancia el objeto, se declarasu URL y sus principales propiedades generales, y mediante un conjunto de etiquetasespeciales, PARAM, se le van pasando los valores que necesita para su correctofuncionamiento o para su configuracin deseada.

La sintaxis general de la etiqueta object, para el caso de ficheros de sonido, es deltipo:

...

Los principales atributos de object, en referencia a ficheros de audio, son:

classid="identificador_objeto", que fija la URL del objeto ocomponenteexterno necesario para reproducir el fichero de audio, y laimplementacin CLSID de los controles ActiveX necesarios.

type="tipo_fichero", atributo importante, que declara el tipo de fichero de

audio que estamos usando. width="w", que determina el ancho visible de la consola, en pixels. height="h", que determina el alto visible de la consola, en pixels. align="top/bottom/center/baseline/left/right/texttop/middle/absmiddle/abs

botom", anlogo al de la etiqueta IMG, define la alineacin horizontal overtical de la consola respecto de los elementos de la pgina.

hspace="hs", que establece la separacin horizontal, vspace="vs", queestablece la separacin vertical, en pixels, entre la consola y los elementos dela pgina que la redean. Anloga a sus equivelentes de la etiqueta IMG.

autostart="true/false", que determina si el fichero de audio debe empezar areproducirse por s slo al cargarse la pgina o si por el contrario ser preciso

la actuacin del usuario (o de cdigo de script) para que comience la audicin. standby="mensaje", que presenta en pantalla un mensaje al usuario mientrasel fichero se carga.


15/120



En cuanto a los elementos param, los ms importantes son:

param name="FileName" value="ruta_fichero" determina la ruta o URL delfichero de audio a reproducir. No es necesario utilizar slo ficheros WAV o MID,pudiendo reproducirse tambin ficheros MP3 o Real Audio. El reproductor delprimero lo incluye Explorer en ActiveMovie (componente de Windows Media).

param name="autostart" value="true/false" indica al navegador si se debeempezar a reproducir el sonido automticamente al cargar la pgina o si por elcontrario ser preciso que el usuario pulse el botn Play para ello.

No son estos todos los atributos y parmetros posibles. Es ms, en cuanto nosmetemos en componentes Microsoft, podemos encontrarnos multitud deconfiguraciones posibles, que nos van a permitir fijar muchos aspectos de los mismos.Dejo a cada uno la posibilidad de profundizar en el estudio de aquellos componentesy propiedades que necesite, pero sabiendo que con los elementos vistos arribatenemos ms que suficiente para presentar un fichero de audio en nuestra pginaWeb.

Un ejemplo sera:

>

Extensiones de posicinExisten en la ltima versin de HTML , HTML 4.0, una serie de etiquetas que van apermitir a los desarrolladores posicionar los objetos dentro de la pgina web demanera ms exacta y adems darle otras posibilidades dinmicas:

ETIQUETA DIV

Su sintaxis bsica es :

Etiqueta que es soportada por los navegadores Netscape y Explorer a partir de su

versin 4 o posterior y que posee los siguientes propiedades, que son colocadosdentro de el atributo style.

Position, El control de posicionamiento de los objetos en la pgina HTML serealiza a travs de la propiedad POSITION del atributo STYLE siguiendo lasiguiente sintaxis.......Es aplicable a todos los elementos, aunque lo ms habitual es utilizarlo con lasetiquetas y . La principal diferencia entre utilizar una u otra esque mientras la segunda implica un salto de linea la primera no.Acepta tres valores:

static, que es el valor por defecto, y con el que se indica que siga el

flujo normal del HTML, sin darle ningn tipo de coordenadas.


16/120



absolute, se indica con unas coordenadas una posicin absoluta respectode un origen.

relative, es como el posicionamiento esttico, es decir siguiendo el flujonatural del HTML pero con la posibilidad de posicionarlo mediantecoordenadas.

La utilizacin de esta propiedad va evidentemente acompaada de otrascomo TOP, LEFT, HEIGHT y WIDTH etc... con las que se puedencontrolar otros aspectos del posicionamiento.

Left y Top, Con la propiedad LEFT se indica la distancia que se deja por laizquierda hasta el origen y con TOP se indica la distancia por arriba.Los valores admiten medidas con unidades o valores de porcentajes.

Width y Height, Al utilizar la propiedad POSITION lo que se est haciendo escolocar una capa rectangular (contenedor) en algn lugar de la pgina. Con laspropiedades TOP y LEFT definimos las coordenadas iniciales de ese rectngulo,mientras que con las propiedades WIDTH y HEIGHT se define el tamao delrectngulo.Con la propiedad WIDTH se define el ancho del contenedor, mientras la

propiedad HEIGHT se define la altura.En el siguiente ejemplo se crea una capa de 150 pixels de ancho por 200 dealto.

Hay que tener especial precaucin con la propiedad WIDTH ya que el E4 y NS4la tratan de forma distinta. Si no se especifica, NS4 asume por defecto queWIDTH toma el ancho que realmente ocupa la capa, mientras que IE4 hace quela capa tome todo el ancho disponible en la ventana del navegador.

Overflow, La propiedad OVERFLOW indica al navegador como tiene queadaptar el tamao del contenido al tamao del contenedor. Permite tresposibilidades en funcin del valor que se le proporcione:

none, este permite mostrar todos los datos, ignorando las restriccionesde altura y anchura.

clip, esto da lugar a que se trunquen los datos en funcin de losparmetros definidos en la propiedad clip.

scroll, este valor aade barras de desplazamiento al contenedorpermitiendo que se visualicen los datos por desplazamiento.

Esta propiedad es adecuada para cuando el contenido del contenedor essusceptible de ser adaptado al contenedor, pero imaginar que lo que se tiene

dentro del contenedor es una imagen, en tal caso es cuando se utilizar lapropiedad CLIP. Clip, La propiedad CLIP permite recortar el contenido del contenedor, siempre

y cuando el valor de la propiedad OVERFLOW sea clip.Se puede definir de dos maneras:

auto, en cuyo caso la zona de recorte se corresponde con la delcontenedor.

rect (top, right, bottom, left)Donde: top, indica la distancia entre el extremo superior de la capa y el extremo

superior de la zona de clipping. left, indica la distancia entre el extremo izquierdo de la capa y el

extremo izquierdo dela zona de clipping.


17/120



right, indica la distancia entre el extremo izquierdo de la capa y elextremo derecho de la zona de clipping.

bottom, indica la distancia entre el extremo superior de la capa y laparte inferior de la zona de clipping.

Z-Index, En un documento HTML pueden existir tantas capas como se

necesiten. Estas pueden estar distantes o superpuestas. Para este ltimo seproporciona la propiedad Z-INDEX, para controlar el orden de apilamiento ypor tanto cual se visualizara por encima de otra.La primera capa sera aquella que tenga el valor Z-INDEX mayor.Este valor se puede poner de forma manual, o dejarlo a auto, en cuyo caso esevalor se le ira otorgando a medida que aparecen en el documento. La primeracapa que se coloque tomara el cero, la segunda el 1 y as sucesivamente, demanera que la ltima que se coloque ser la que tenga preferencia paravisualizarse en el caso de que se superponga otra.

Visibility , La propiedad VISIBILITY permite especificar si una capa y su

contenido son visibles o no.Admite dos valores: visible y hidden.

ETIQUETA LAYER

Esta etiqueta, LAYER, contradice los principios de los ltimos estndares delconsorcio W3C, que intentan separar el contenido de la forma de representarlo. Sinembargo, resulta casi imprescindible su estudio si se desean crear soluciones enDHTML compatibles en ambos, porque, en ocasiones, esta etiqueta puede ser la nicamanera de que Netscape Communicator haga lo que se quiera.

Dada la sencillez del uso de esta etiqueta, una vez aprendida la manera de posicionarutilizando CSS, la mejor manera de comenzar es mediante el uso de un ejemplo,donde se puede ver las diferencias entre uno y otro sistema. As, por ejemplo, elsiguiente cdigo:

equivaldra a

Presenta los siguientes parmetros:

Posicionamiento absoluto y relativo: La etiqueta LAYER no tiene ningnparmetro equivalente a position; asume por defecto un posicionamientoabsoluto. Si se quiere utilizar capas con posicionamiento relativo se deberutilizar la etiqueta ILAYER, equivalente en todo a la primera, pero que provocaque la capa en cuestin utilice un posicionamiento relativo.

Posicin y tamao : Los parmetros para colocar la capa se llaman igual y se

utilizan para lo mismo. Son LEFT, TOP, WIDTH y HEIGHT. Slo se puedenutilizar como unidades de tamao los pixels, indicando directamente elnmero sin ms.


18/120



Aparte de stos, Netscape incluye los parmetros PAGEX y PAGEY. Sonequivalentes a LEFT y TOP, excepto en el caso en que se aniden capas. En esemomento, y en el segundo caso, en las capas "hija" se asume que lascoordenadas indicadas se refieren al interior de la capa "padre", mientras quecon los parmetros PAGE se asegura que se refieran a los mrgenes deldocumento.

Cambio de aspecto: Aunque Netscape no admite OVERFLOW en sus etiquetas(ms que nada porque Communicator no soporta esta propiedad tampoco enCSS) si admite los recortes por medio del parmetro CLIP, al que se deberasignar una lista de nmeros equivalente a la propiedad del mismo nombre,cuando le se le asignaba un rectngulo. De ese modo,equivale a

Admite tambin los parmetros BGCOLOR y BACKGROUND , con los mismosefectos que tienen en la etiqueta BGCOLOR, es decir, cambiar el color o

incluir una imagen en el fondo de la capa.Capas: Aparte de Z-INDEX, que se utiliza de un modo equivalente al usado enCSS, las etiquetas LAYER e ILAYER admiten otro mtodo por medio de losparmetros ABOVE y BELOW. Si se tiene el siguiente cdigo:

Ver que la etiqueta nombrada como capa3 sera la que estuviera debajo detodas las dems, capa1 en medio y capa2 encima.En cuanto a VISIBILITY, se cambia el nombre de los valores, aunque lafuncionalidad sea la misma. Esos valores son SHOW y HIDE. Tambin admite elvalor INHERIT, que indica a una capa "hija" que herede el valor que tenga en

esta propiedad su capa "padre". Otros: Aparte de los parmetros ya vistos, las capas de Netscape admiten un

par de cosas ms que conviene indicar. El parmetro SRC, por ejemplo,permite introducir en la capa el contenido la pgina HTML que le pase comovalor. Por otro lado, las etiquetas LAYER e ILAYER admiten los eventosOnMouseOver, OnMouseOut, OnFocus, OnBlur y OnLoad, siendo sta la causade que en ocasiones se deban usar estas etiquetas en Netscape en lugar delposicionamiento CSS (DIV).


19/120



Inclusin de multimedia con herramientas de autora Web

Qu permite un editor HTML actual?Determinar cules son las caractersticas ms valorables no es tan sencillo comopueda parecer. Sin duda, las pginas han de parecer atractivas, pero sobre gustos nohay nada escrito. Si deseamos un diseo algo sofisticado, las capacidades de edicinde cuadros, tablas o capas son fundamentales, pero en un entono corporativo sonmucho ms interesantes las herramientas de actuaci6n global, es decir, aquellas queproporcionen un estilo nico a todo el sitio Web.

Como primer aspecto se debe valorar la Interfaz de usuario de la herramienta, quedebe ser sencilla, sin aglomeracin de ventanas y paletas de herramientas. Para estoltimo se est trabajando con las paletas y ventanas contextuales, que slo aparecencuando se selecciona un objeto y muestran informacin y opciones slo referentes alobjeto.

Otro aspecto muy valorable en las aplicaciones actuales son los asistentes de

creacin de objetos "ms complicados", como pueden ser los asistentes de bases dedatos, de DHTML, de mapas de imagen, etc.

Las tablas, visibles o no, juegan un papel importante en la presentacin, sobre todo,cuando las celdas pueden partirse o combinarse. No slo sirven para ordenar encolumnas palabras y nmeros, sino que sirven de escenario para colocar cada cosa ensu sitio, ya sean textos o imgenes. En efecto, cuando son invisibles son an mstiles, ya que suponen el nico modo compatible casi universalmente de dar unaestructura a la pgina.

Los recuadros o frames, algo ms modernos en la escala evolutiva del HTML,supusieron un recurso inestimable para aquellos creadores que les gustan fijar partesde la pgina, mientras otras navegan. Aunque no son necesarios, su utilidad es

manifiesta y suponen un avance en el corporativismo, o ms bien, en la consecucinde un estilo.

Pero la evolucin final viene de mano de las capas o layers. Una nueva etiqueta quepermite colocar todos los objetos de la pgina a nivel de pixe1. Las capas sonsoportadas de forma adecuada por la versin 4, tanto de Intemet Explorer como deNetscape Navigator, pero no, al menos en cuanto a libertad de posicionamiento, porsus predecesores. Si se busca compatibilidad, siempre es posible convertir las capas atablas de forma automtica. aunque, dependiendo de su complejidad, los resultadosno son siempre los esperados.

En cuanto a las bases de datos, es una asignatura pendiente en la mayora de lasweb, y es muy valorable que la herramienta permita construir este tipo de objetos,sin necesidad de utilizar cdigo, mediante la ayuda de asistentes.

Un aspecto que tambin se debe tener en cuenta es la integracin de la herramientade edicin con otras herramientas relacionadas con el proceso de creacin de unWeb, y en concreto con otras herramientas de la misma empresa, siendo positivo quetodas tengan un interfaz similar, que manejen correctamente formatos de transicinentre ellas y que las opciones comunes funcionen de una manera similar.

Por ltimo, tambin se debe requerir a un editor HTML avanzado una administracinsencilla del sitio Web , que de la mayor informacin posible del sitio, las pginas y suestructura y que lo haga de una manera visual que permita al creador tener uncontrol rpido de un sitio o varios.

Otros aspectos valorables de un editor pueden ser: Administracin de sitios en formato Web con enlaces activos


20/120



Previsualizacin en navegador Gestin de estilos CSS Acceso y edicin de HTML Soporte de Formularios Soporte de Javascript y JAVA

Soporte de XML Posibilidad de definir el formato de la pantalla de destino Importar HTML y documentos Microsoft Word

Adobe GoLiveSiguiendo su habitual estilo de interfaz, con una zona principal de trabajo y variaspaletas flotantes alrededor, Golive se trata de una potente herramienta paracreacin y gestin de sitios Web, orientada hacia el profesional integrado en gruposde trabajo.

GoLive dispone de mltiples asistentes: el de lanzamiento inicial de la aplicacin, que ayuda a configurar el archivo

del proyecto de sitio Web; y el de contenido dinmico, que ayuda a configurar adecuadamente un sitio

Web de este tipo.Uno de los principales problemas que conlleva el uso de entornos tipo WYSIWYG en lacreacin de contenidos Web es la cantidad de cdigo basura que genera el programacuando transforma la edicin visual en cdigo HTML, as como las pocas facilidadesque suele dar para la edicin directa del cdigo. GoLive aporta como solucin no slola mejora en creacin de cdigo, sino un editor de texto con resaltado de sintaxis porcolores, que puede ser empleado simultneamente con la edicin visual incluso conpantalla partida para mejorar el cdigo de forma manual. Adems, cuenta con unverificador de sintaxis dependiente del tipo de fichero que asegurar que el cdigoescrito es correcto, tomando como base una DTD.

GoLive soporta los archivos origen de Photoshop, de capas de texto y vectoriales. Unarchivo origen PSD con cortes puede redimensionarse libremente dentro de GoLivesin tener que dejar la aplicacin. odas las imgenes se redimensionarn y


21/120



reoptimizarn, incluyendo una actualizacin del cdigo de tabla HTML para acomodarlas nuevas dimensiones del archivo origen.

GoLive funciona con los cortes establecidos en Illustrator. Una imagen cortada puedeser aprovechada para la creacin de una pgina web aadiendo objetos como unabarra de navegacin o botones. Cada corte puede vincularse a una URL y especificar

el marco de destino en el que se abre la URL. Los cortes tambin pueden tenermscaras diferentes y hay disponibles varias opciones avanzadas de exportacin deSVG, incluyendo la de guardar en formato .SWF.

En la edicin visual, el empleo de objetos de arrastrar y soltar desde las paletashasta la ventana de edicin simplifica sobremanera la creacin de pginas y sitioscompletos. Cada uno de estos objetos tiene unas caractersticas completamentemodificables a travs del Inspector, gracias al cual se puede llegar a grandes nivelesde personalizacin.

Para acelerar el proceso de creacin de un sitio Web, tambin se dispone de unaserie de plantillas, donde el usuario tendr realizado el diseo base, y tan slodeber retocar el aspecto final y proporcionar los contenidos. Pero si se desea

realizar el diseo desde cero, GoLive dispone tambin de un editor de diagramas yfases, que permite hacer rpidamente un boceto del lugar, para despus convertirloautomticamente en pginas.

Y para apoyar los nuevos entornos, incluye la posibilidad de desarrollar cdigoorientado a dispositivos mviles, aplicando toda la potencia del programa endesarrollos en WML, WAP 2.0, i-mode y otros, existiendo la posibilidad de emplear unemulador de telfonos Nokia para verificar la correcta visualizacin del trabajo enestos dispositivos.

La gestin de los grupos de trabajo es un componente que trae por separado estaversin de GoLive, en un programa denominado Web Workgroup Server. Este

servidor va a ser el encargado de mantener bloqueados los ficheros que estn en usopor parte de alguno de los miembros del grupo de trabajo, mantener histricos deversiones, facilitar la visualizacin de modificaciones, y permitir la gestin del grupode trabajo, con adicin y eliminacin de usuarios. GoLive se conectaautomticamente a este gestor, y su mantenimiento se realiza a travs de Web.

La impresin final que produce el programa es de familiaridad para usuarios de otrosprogramas de Adobe (como Photoshop, Illustrator y LiveMotion) con los que GoLive secomunica e intercambia datos sin problemas, pero algo recargado de opciones yventanas flotantes para quien no est acostumbrado a este entorno, que hacesentirse algo abrumado al principio, hasta que se llegan a controlar todas lasposibilidades. Dado que el usuario posiblemente sea un profesional, pues para elcreador de pginas no habitual es un producto complejo y caro, la inversin entiempo merece la pena.

La nueva versin de Golive CS, que presenta numerosas mejoras:

Objetos smart: mediante los cuales se pueden abrir, editar y colocar losarchivos de Photoshop, de Illustrator y los archivos con formato PDF de Adobeen el entorno de GoLive.

Paquete InDesign para GoLive: que permite utilizar XML para transferir eltexto de publicaciones impresas y elementos de imagen a GoLive.

Gestin de color compartido: permite conseguir un color uniforme con AdobeColor Engine.

Integracin avanzada de archivos PDF de Adobe: que permite editar los

archivos en formato PDF de Adobe directamente en el entorno de GoLive.


22/120



Diseos de pgina incorporados previamente:Se puede seleccionar entre unagama de 58 plantillas diseadas profesionalmente para diseos de galera deimgenes, composiciones editoriales, formularios basados en Web y sitios denegocios y comercio electrnico.

Barra de herramientas Objeto: con slo hacer clic en un botn, se puede

transformar la barra de herramientas Objeto de una orientacin de estiloPhotoshop a una orientacin de estilo GoLive ms habitual. Creacin visual CSS: la creacin visual y la vista previa verdaderas del nivel 1

y 2 de CSS proporcionan la presentacin de estilo en tiempo real y loscomentarios.

Interfaz de vista dividida para realizar un desarrollo intuitivo dividiendo losmodos de interfaz Composicin y Origen.

Relleno de cdigos de origen: el relleno de los cdigos de origen extensiblescon sintaxis le permite trabajar rpidamente con etiquetas, atributos ymtodos basados en bloques de sintaxis, como PHP, JavaScript, XHTML, CSS,SVG y SMIL.

Edicin y validacin de XML: permite crear y analizar XML utilizando los

editores de composicin, origen y contorno. Modo Co-Author de GoLive: permite a los usuarios colaboradores que

actualicen y mantengan el contenido con la interfaz de acceso controladodenominada Co-Author.

Macromedia DreamWeaverEl primer aspecto destacable de Macromedia Dreamweaver es la de una excelenteinterfaz (heredado de Macintosh), con todas las ventanas flotantes que muestran laestructura de las pginas, la edicin de las mismas y una coleccin de herramientas ypropiedades. Dreamweaver arranca con una interfaz bastante limpia, evitando lamasificacin de botones y ventanas tan caracterstico de otras aplicaciones que lo

nico que consigue es que los desarrolladores inexpertos no sepan por dondeempezar. Es cierto que en la ltima versin MX da la posibilidad al usuario detrabajar en un entorno de trabajo basado en el sistema de persianas, tan comn enlas herramientas de programacin, donde las ventanas se han convertido enestructuras fijas en los laterales del rea de trabajo con un sistema de pestaas quedespliegan hacia abajo el contenido de la ventana.

Para cada pgina que est siendo editada se abre una ventana. En la parte inferior dela misma, correspondiente a la barra de estado donde muestran aquellas etiquetas(tags) de HTML que corresponden a los alrededores de la zona por se pasa el cursor,cuyos parmetros pueden ser fcilmente modificados gracias a un simple toque deratn.

El espritu es muy similar a los programas de maquetacin de libros y revistas, en elsentido de que se ofrecen unas posibilidades muy altas a la hora de conseguir undeterminado estilo, controlando en su totalidad la apariencia y actuacin de cadapgina en el sitio web. De hecho, Dreamweaver fue pionero en lo que respecta alDHTML y las capas (layers), las cuales constituyen uno de los pilares del programa.

Para evitar incompatibilidades, es posible configurar las herramientas de creacinespecificando un determinado tipo de navegador o incluso crear pginas quecomprueben el tipo de navegador remoto que est accediendo a ellas, envindosecorrectamente configuradas. Tambin es posible convertir las capas a tablas, por elmtodo de crear una tabla invisible que englobe la pgina, subdividida cuantas vecessea necesario para posicionar los objetos.


23/120



En Dreamweaver existen dos vistas principales: la del sitio, donde aparece laestructura de pginas, pudiendo organizar o descargar contenidos y la de pgina,donde se crea y se edita la pgina en si.

De otro lado, se constata que Macromedia mantiene la presencia de los mensflotantes que rodean a la ventana principal, como en anteriores versiones. En el

men situado en el lado izquierdo de la pantalla se han dispuesto las opciones msbsicas del programa, como puede ser la insercin de una imagen, plug-Ins o unapplet Java. ste est estrechamente vinculado con el que se halla situado en el reainferior, por lo que se podr modificar desde este ltimo las caractersticas de todolo que se seleccione e inserte posteriormente al proyecto.

Al lado derecho de la ventana principal, se localiza el men que ms funcionesrealiza y, tal vez por ello, el ms complejo de manejar. En primer est la opcinSite, cuya interfaz de usuario es muy similar a la del Explorador de Windows.Fundamentalmente, capacita para construir el sitio web, para lo cual bastar consealar en qu directorio de nuestro disco duro estn los ficheros que se quierensubir a la Red, as como la direccin del servidor, para que lo haga

instantneamente.Por su lado, Libraryse usa para crear libreras quise podrn incluir en las pginas quese quieran, la funcin que cumple es la misma que hara una macro en otroprograma. En la misma lnea, est la posibilidad de emplear plantillas predefinidaspara realizar maquetas genricas a las que slo habr que retocar ligeramente sidesea personalizar. La diferencia bsica que hay entre ambas es que las libreras seutilizan sobre objetos y las plantillas se aplican al documento entero. En el siguientecontrol , Behaviorse descubren conjunto eventos que abarcan desde la llamada a unscript hasta la comparecencia de un reproductor de sonido.

Se puede comprobar a simple vista la integracin con otros productos de la firma,sobre todo con el editor de grficos para la Web, Macromedia Fireworks.

Un aspecto muy interesante, de cara a obtener pginas web de aspecto uniforme, esel equivalente conceptual a lo que en FrontPage se conoce como Temas, y que enDreamweaver se denominan Templates. Bsicamente es crear una pgina que serutilizada como modelo o Template. A partir de ste se irn generando sucesivaspginas que guardan la apariencia de su ancestro. Igualmente, cuando se produzcancambios en la pgina modelo, de forma automtica se propagarn los cambios atodas aquellas que hayan sido creadas a partir de sta.

Hay que apreciar que en los modelos es posible aadir todo tipo de elementos,puesto que son pginas normales y corrientes, lo que es muy importante en aquellosdiseos avanzados donde sea preciso repetir una estructura formada por marcos,capas o simples tablas. Para completar la perfeccin de la idea, es posible designarregiones del modelo que sean editables y otras que no. As, si se est ante undesarrollo producido por un equipo de trabajo en las nuevas pginas, nadie podrmodificar, por error, un apartado considerado como no cambiable.

Herramientas avanzadas como bsqueda y, sustitucin de texto con alcance global entodas las pginas, barras de navegacin generadas dinmicamente, edicin avanzadade tablas y libreras de objetos para mejorar la organizacin son algunas de lasopciones que se ofrecen. Hay que destacar que las tablas pueden soportar ordenacinautomtica, algo que las hace nicas.

En el aspecto del acceso a bases de datos, se echa de menos algn asistente queautomatice el proceso, aunque se ha incorporado un adecuado soporte para pginas

ASP y Cold Fusion.


24/120



En general, Dreamweaver es un producto que va muy a la par con FrontPage, con unaadministraci6n de sitios web y unas herramientas de autornatizaci6n muy elaboradas.No obstante, Dreamweaver se puede calificar como una herramienta algo msindicada para usuarios algo ms avanzados dentro del mundo del desarrollo depginas Web.

La versin Studio 8 que ha sacado Macromedia es un paquete conjunto con laherramienta de edicin grfica (y otras herramientas como Flash 8, Contribuye 3,FlashPaper 2 o Freehand)

Las novedades que presenta Dreamweaver 8 son las siguientes:

Interfaz comn de usuario de Macromedia, lo que permite a los diseadorestrabajar sin problemas en cualquier aplicacin de diseo Web de Macromedia.

Creador de mens emergentes y rollovers (imgenes de sustitucin) Panel de capas y de enmascaramiento, que ofrece vistas en miniatura de los

objetos de cada capa y capacidades avanzadas de enmascaramiento. Importacin y exportacin de Photoshop y manipulacin de mscaras de capas

con un nuevo efecto automtico de relleno de color. Nuevas opciones de pegado desde Microsoft Word Edicin de tablas "Roundtrip" con Dreamweaver Edite y actualizacin de

grficos y cdigo HTML y JavaScript desde Dreamweaver, mientras conserva lasmodificaciones de la tabla.

Visualizacin de cdigo con un nuevo e integrado Editor de textos, o utilizandola nueva caracterstica de visualizacin dividida para ver la visualizacin decdigo y de diseo simultneamente. La visualizacin de cdigo ofrececoloracin de sintaxis, equilibrio de etiquetas y sangras automticas, parapermitir codificaciones al instante. Posibilidad se activar la herramienta desugerencias de cdigo que genera cdigo automticamente relacionado con elcdigo que se est escribiendo.

Funcin mejorada de sugerencias para el cdigo para XML y XSLT Panel CSS unificado para edicin, reproduccin y visualizacin de estilos CSS Soporte integrado de los lenguajes de programacin de pginas dinmicas ms

usados actualmente como pueden ser ASP, ASP NET, PHP5, ColdFusion 7, JSP,XML etc

Mejora e incrmento de los objetos web prediseados , bibliotecas de cdigo ynuevas plantillas de partida que permiten diseos ms atractivos y funcionalesen un menor tiempo.

Referencia de cdigo, para obtener fcilmente informacin sobre JavaScript,HTML, CSS, ASP, CFM, JSP y DOMs de explorador.

Visualizacin de composicin de pgina que permite crear tablas limpias que

funcionan en todos los navegadores. En esta versin de puede directamentedibujar en una pgina, arrastrar celdas o agruparlas para crear tablascomplejas con facilidad.

Botones y texto Flash. Estas nuevas funciones permiten crear grficos devectores editables directamente en Dreamweaver o trabajar Macromedia Flashpara crear nuevos estilos de botones o descargar estilos gratuitos deMacromedia Exchange.

Por ltimo, La integracin entre Dreamweaver y Fireworks 8 es bastante completa,permitiendo realizar ediciones de objetos introducidos desde el otro sin necesidad decambiar de programa.


25/120



Insercin de contenidos multimedia con Dreamweaver

Insercin de textoDreamweaver permite aadir texto a pginas Web escribiendo el texto directamenteen una pgina, copiando y pegando texto de otro documento o arrastrando texto de

otra aplicacin.Entre los tipos de documentos que los profesionales de la Web reciben con contenidode texto que debe incorporarse en las pginas Web, se incluyen los archivos de textoASCII, los archivos en formato de texto enriquecido y los documentos de MicrosoftOffice.

Dreamweaver permite extraer texto de cualquiera de estos tipos de documentos eincorporarlo a una pgina Web. La aplicacin de formato a texto en Dreamweaver essimilar a la utilizacin de un programa estndar de tratamiento de texto. Puedeestablecer estilos de formato predeterminados (Prrafo, Encabezado 1, Encabezado2, etc.) para un bloque de texto, cambiar la fuente, el tamao, el color y laalineacin del texto seleccionado o aplicar estilos de texto, como negrita, cursiva,monoespacio y subrayado.

De forma predeterminada, Dreamweaver aplica formato a texto mediante hojas deestilos en cascada (CSS). Los estilos CSS ofrecen a los diseadores y desarrolladoresWeb un mayor control sobre el diseo de la pgina Web, a la vez que les permiteutilizar funciones mejoradas que optimizan la accesibilidad y reducen el tamao dearchivo. Puesto que el formato y la alineacin se aplican mediante los comandos deformato de Dreamweaver, las reglas CSS estn incrustadas en el documento actual.Esto le permite reutilizar fcilmente los estilos existentes, as como asignar nombre alos estilos que cree. CSS se est convirtiendo en el mtodo preferido para aplicarformato a texto y presentar pginas Web. Si lo prefiere, puede optar por utilizaretiquetas de formato HTML para aplicar formato y alinear el texto de las pginas

Web. Si necesita utilizar etiquetas HTML en lugar de CSS, debe cambiar laspreferencias de formato de texto predeterminadas de Dreamweaver.

La utilizacin de CSS es una forma de controlar el estilo de una pgina Web sinimplicaciones para su estructura. Al separar los elementos visuales de diseo(fuentes, colores, mrgenes, etc.) de la estructura lgica de una pgina Web, CSSpermite a los diseadores Web tener un control visual y tipogrfico de la pgina Websin que ello repercuta negativamente en la integridad del contenido. Adems, aldefinir el diseo tipogrfico y el diseo de la pgina a partir de un solo bloque decdigo, sin tener que recurrir a mapas de imagen, etiquetas font, tablas y GIFespaciadores, se pueden llevar a cabo descargas ms rpidamente, mejorar elmantenimiento del sitio Web y establecer un punto central desde el que se pueden

controlar los atributos de diseo de varias pginas Web.Los estilos CSS definen el formato del texto de una determinada clase o redefinen elformato de una etiqueta HTML especfica (como h1, h2, p o li).

Se pueden almacenar los estilos CSS que cree directamente en el documento (laconfiguracin predeterminada al aplicar formato al texto empleando el inspector depropiedades) o, si desea tener mayor control y flexibilidad, en una hoja de estilosexterna. Si adjunta una hoja de estilos externa a varias pginas Web, todas laspginas reflejarn automticamente los cambios realizados en la hoja. Para accedera todas las reglas de estilos CSS de una pgina, utilice el panel Estilos CSS (Ventana >Estilos CSS).


26/120



HOJAS DE ESTILOS EN CASCADA

Las hojas de estilos en cascada (CSS) son un conjunto de reglas de formato quecontrolan el aspecto del contenido de una pgina Web. Cuando se utilizan estilos CSSpara dar formato a una pgina, el contenido se separa de la presentacin. Elcontenido de la pgina (el cdigo HTML) reside en el propio archivo HTML, mientras

que las reglas CSS que definen la presentacin del cdigo residen en otro archivo(una hoja de estilos externa) o en otra parte del documento HTML (normalmente, enla seccin head). Los estilos CSS aportan gran flexibilidad y control sobre el aspectoexacto que se busca en una pgina, desde la colocacin precisa de elementos hastael diseo de fuentes y estilos concretos.

Los estilos CSS permiten controlar muchas propiedades que el cdigo HTML no escapaz de controlar. Por ejemplo, puede especificar distintos tamaos y unidades defuente (pxeles, puntos, etc.) para el texto seleccionado. Si utiliza CSS para definir eltamao de fuente en pxeles, tambin conseguir un tratamiento ms coherente deldiseo y el aspecto de la pgina en mltiples navegadores.

Adems del formato del texto, puede utilizar CSS para controlar el formato y la

posicin de elementos de nivel de bloque (block-level) de una pgina Web. Porejemplo, puede ajustar mrgenes y bordes para elementos de nivel de bloque, textoflotante sobre texto fijo, etc.

Una regla de formato CSS consta de dos partes: el selector y la declaracin. Elselector es un trmino (por ejemplo P, H1, un nombre de clase o un identificador)que identifica el elemento con formato; la declaracin define cules son loselementos de estilo. En el siguiente ejemplo, H1 es el selector y todo lo que quedaentre las llaves ({}) es la declaracin:

H1 {

font-size: 16 pixels;

font-family: Helvetica;

font-weight:bold;

}

La declaracin, a su vez, consta de dos partes: la propiedad (por ejemplo, font-family) y el valor (por ejemplo, Helvtica). En la regla CSS anterior, se ha creado unestilo concreto para las etiquetas H1: el texto de todas las etiquetas H1 vinculadas aeste estilo tendr un tamao de 16 pxeles, fuente Helvtica y negrita.

La expresin en cascada hace referencia a la posibilidad de aplicar varios estilos a unmismo elemento. Por ejemplo, puede crear una regla CSS que aplique color y otraque aplique los mrgenes y aplicarlas las dos al mismo texto de la pgina. Los estilosdefinidos se distribuyen en cascada hacia los elementos de la pgina Web, lo quele permite obtener finalmente el diseo deseado.

Una de las grandes ventajas de las CSS reside en que pueden actualizarse fcilmente;cuando actualiza una regla CSS en un sitio, el formato de todos los documentos queusan ese estilo se actualiza automticamente con el nuevo estilo.

Puede definir los siguientes tipos de estilos en Dreamweaver:

Las reglas CSS personalizadas, tambin llamadas estilos de clase, permitenaplicar atributos de estilo a cualquier rango o bloque de texto.

Los estilos de etiquetas HTML redefinen el formato de una determinadaetiqueta, como h1. Cuando se crea o cambia un estilo CSS para la etiqueta h1,

todo el texto formateado con la etiqueta h1 se actualiza inmediatamente.


27/120



Los estilos del selector CSS (estilos avanzados) redefinen el formato de unadeterminada combinacin de elementos o de otros selectores permitidos por elCSS (por ejemplo, el selector td h2 se aplica siempre que aparece unencabezado h2 dentro de la celda de una tabla). Los estilos avanzados tambinredefinen el formato de las etiquetas que contienen un atributo id especfico(por ejemplo, los estilos definidos por #miEstilo se aplican a todas lasetiquetas que contienen el par atributo-valor id="miEstilo").

Las reglas CSS pueden residir en las ubicaciones siguientes:

Las hojas de estilos CSS externas son conjuntos de reglas CSS almacenados en unarchivo CSS (.css) independiente externo (no un archivo HTML). Este archivo sevincula con una o varias pginas de un sitio Web mediante un vnculo situado en laseccin head de un documento.

Las hojas de estilos CSS internas (o incrustadas) son grupos de reglas CSS incluidos enuna etiqueta style en la seccin head de un documento HTML.

Los estilos en lnea se definen con instancias especficas de etiquetas en undocumento HTML.

Dreamweaver reconoce los estilos definidos existentes siempre que se ajusten a lasdirectrices de los estilos CSS.

El formato HTML aplicado manualmente prevalece sobre el formato aplicado con CSS.Para que las reglas CSS controlen el formato de un prrafo, deber quitar todo elformato HTML aplicado manualmente.

Dreamweaver representa la mayora de atributos de estilo aplicados directamente enla ventana de documento. Tambin puede obtener una vista previa del documento enla ventana del navegador para comprobar los estilos aplicados. Algunos atributos de

estilo CSS se representan de forma distinta en Microsoft Internet Explorer, Netscape,Opera y Apple Safari, y otros no son compatibles actualmente con ningn navegador.

La especificacin CSS permite crear estilos mediante una sintaxis abreviada conocidacomo CSS en forma abreviada. CSS en forma abreviada permite especificar los valoresde diversas propiedades con una sola etiqueta de propiedad. Por ejemplo, lapropiedad font permite definir las propiedades font-style, font-variant, font-weight,font-size, lineheight y font-family en una nica lnea de sintaxis.

Por ejemplo, la etiqueta H1 que se muestra a continuacin utiliza la sintaxis CSS sinabreviar.

Observar que a las propiedades font-variant, font-stretch, font-size-adjust y fontstylese les han asignado sus valores predeterminados.

H1 {

font-weight: bold;

font-size: 16pt;

line-height: 18pt;

font-family: Arial;

font-variant: normal;

font-style: normal;

font-stretch: normal;

font-size-adjust: none

}


28/120



La misma etiqueta tiene el aspecto siguiente si se especifica como nica propiedaden forma abreviada:

H1 { font: bold 16pt/18pt Arial }

Al especificarlos con la notacin abreviada, a los valores omitidos se les asignan susvalores predeterminados. As, en el ejemplo de notacin abreviada anterior seomiten las etiquetas font-variant, font-style, font-stretch y font-size-adjust.

PANEL ESTILOS CSS

El panel Estilos CSS permite supervisar las reglas ypropiedades CSS que afectan a un elemento de pginaactualmente seleccionado (Current mode (modo Actual)) olas reglas y propiedades que afectan a todo un documento

(All mode (modo Todo)). Un botn situado en la partesuperior del panel Estilos CSS le permite cambiar entre estosdos modos. El panel Estilos CSS tambin le permite modificarpropiedades CSS tanto en modo Todo como en modo Actual.

En modo Actual, el panel Estilos CSS muestra tres secciones:un resumen del panel Seleccin que muestra las propiedadesde CSS de la seleccin actual del documento, un panel Reglas

que muestra la ubicacin de laspropiedades seleccionadas (o unacascada de reglas para la etiqueta seleccionada, en funcinde la seleccin) y un panel Propiedades que le permite

editar las propiedades CSS al definir reglas para laseleccin.

En modo Todo, el panel Estilos CSS muestra tres secciones:un panel Todas las reglas arriba y un panel Propiedadesabajo. El panel Todas las reglas muestra una lista de reglasdefinidas en el documento actual, as como las reglasdefinidas en las hojas de estilo adjuntas al documentoactual. El panel Propiedades le permite editar propiedadesCSS para cualquier regla seleccionada en el panel Todas lasreglas.

INSPECTOR DE PROPIEDADES Y APLICACIN DE FORMATO A TEXTO

El inspector de propiedades de texto permite aplicar formato al texto seleccionadoactualmente. Puesto que el inspector de propiedades se utiliza para aplicar formatoal texto,

Dreamweaver realiza un seguimiento de las propiedades de formato que el usuarioasigna a todos los elementos del texto y asigna una etiqueta a cada uno de ellosmediante una convencin de asignacin de nombres: Style1, Style2, Style3, Stylen. Siasigna los mismos atributos de formato a dos o ms elementos del texto,Dreamweaver asigna una etiqueta a los elementos que tengan el mismo ttulo; deeste modo, se eliminan los nombres de estilo redundantes. La etiqueta que

Dreamweaver aplica a un cuerpo de texto determinado se puede aplicarposteriormente mediante el men emergente Estilo, lo que permite crear una


29/120



biblioteca de estilos dentro de una pgina y aplicar esos mismos estilos simplementeseleccionando el elemento de texto en la pgina y seleccionando un estilo en elmen emergente Estilos. Puede cambiar el nombre de los estilos por texto con mssignificado, como Encabezado1, Encabezado2, Cuerpo y CuerpoTabla.

El men emergente Estilo muestra ambos nombres de estilos en la pgina, adems de

una vista previa de las propiedades del estilo. Las propiedades mostradas en la vistaprevia son la familia de fuentes, el tamao y el grosor de la fuente, el color del textoy el color de fondo.

FORMAS DE INSERCIN DE TEXTO

Dreamweaver permite insertar texto fcilmente en un documento escribindolodirectamente, copindolo y pegndolo o importndolo. Tambin puede insertarespacio adicional entre caracteres y lneas en el texto.

Para aadir texto a un documento de Dreamweaver puede escribir textodirectamente en la ventana de documento de Dreamweaver o puede cortar y pegartexto. Tambin puede importar texto de otros documentos

Al pegar texto en un documento de Dreamweaver, puede utilizar el comando Pegar oPegado especial. El comando Pegado especial le permite especificar el formato deltexto pegado de diversas formas. Por ejemplo, si desea pegar texto de un documentocon formato de Microsoft Word en un documento de Dreamweaver pero deseaeliminar todo el formato de manera que pueda aplicar su propia hoja de estilos CSSal texto pegado, puede seleccionar el texto en Word, copiarlo al portapapeles yutilizar el comando Pegado especial para seleccionar la opcin que le permite pegarslo texto.

Asimismo, al utilizar el comando Pegar para pegar texto de otras aplicaciones, puedeestablecer las preferencias de pegado como opciones predeterminadas.

Para aadir texto al documento, siga uno de estos procedimientos: Escriba texto directamente en la ventana de documento.


30/120



Copiar texto de otra aplicacin, cambie a Dreamweaver, coloque el punto deinsercin en la vista Diseo de la ventana de documento y seleccione Edicin >Pegar o Edicin > Pegado especial. Al seleccionar Edicin > Pegado especial,aparece un cuadro de dilogo que ofrece diversas opciones de formato alpegar. Para ms informacin, haga clic en el botn Ayuda del cuadro dedilogo.

Se puede importar texto de documentos Microsoft Office como Word o Excel.Las opciones de formato son las siguientes: Slo texto permite insertar texto sin formato. Si el texto original tiene

formato, se eliminar todo el formato. Texto con estructura permite insertar texto que conserve su estructura pero

no el formato bsico. Por ejemplo, puede pegar texto y conservar laestructura de los prrafos, listas y tablas sin conservar negritas, cursivas uotras caractersticas de formato.

Texto con estructura y formato bsico permite insertar texto con formatoHTML estructurado y simple (por ejemplo, prrafos y tablas, as comoetiquetas b, i, u, strong, em, hr, abbr o acronym).

Texto con estructura y formato completo permite insertar texto queconserva toda la estructura, el formato HTML y los estilos CSS.

Limpiar espaciado de prrafo de Word permite eliminar espacios adicionalesentre prrafos al pegar el texto si seleccion la opcin Texto con estructurao Formato bsico.

Insercin de imgenesExisten muy diversos formatos de archivo grfico, aunque para pginas Webgeneralmente se utilizan tres formatos de archivo grfico: GIF, JPEG y PNG.Actualmente, GIF y JPEG son los formatos de archivo que cuentan con mayor

compatibilidad y pueden verse en la mayora de los navegadores.Los archivos PNG son los ms adecuados para casi cualquier tipo de grfico Webdebido a su flexibilidad y su tamao de archivo reducido; no obstante, lavisualizacin de imgenes PNG slo es parcialmente compatible con los navegadoresMicrosoft Internet Explorer (4.0 y posteriores) y Netscape Navigator (4.04 yposteriores). De manera que, a no ser que est diseando para un tipo de usuarioconcreto que utilice un navegador compatible con el formato PNG, deber utilizararchivos GIF o JPEG para poder llegar a ms usuarios.

Los archivos GIF (Formato de intercambio de grficos, Graphic Interchange Format)utilizan un mximo de 256 colores y son idneos para visualizar imgenes con tonosno continuos o imgenes con grandes reas de color homogneo, como barras de

navegacin, botones, iconos, logotipos u otras imgenes con colores y tonosuniformes.

El formato de archivo JPEG (Grupo conjunto de expertos fotogrficos, JointPhotographic Experts Group) es el mejor para imgenes fotogrficas o de tonoscontinuos, ya que puede contener millones de colores. A medida que la calidad de unarchivo JPEG aumenta, tambin lo hace su tamao y el tiempo que tarda endescargarse. A menudo es posible conseguir un equilibrio adecuado entre la calidadde la imagen y el tamao de archivo comprimiendo el archivo JPEG.

El formato de archivo PNG (Grupo de redes porttiles, Portable Network Group) es unsustituto del formato GIF sin patente compatible con imgenes con color indexado,

escala de grises y color verdadero, adems de ser compatible con el canal alfa paratransparencias. PNG es el formato de archivo nativo de Macromedia Fireworks. Losarchivos PNG conservan la informacin original de capa, vector, color y efectos


31/120



(como por ejemplo las sombras), y todos los elementos pueden editarse siempre quese desee. Los archivos se deben guardar con la extensin .png para que Dreamweaverpueda reconocerlos como tales.

EDICIN DE IMGENES EN DREAMWEAVER

Dreamweaver proporciona unas funciones bsicas de edicin de imgenes quepermiten modificar las imgenes sin tener que iniciar una aplicacin externa deedicin de imgenes como Macromedia Fireworks. Las herramientas de edicin deimgenes de Dreamweaverestn diseadas para trabajar con diseadores decontenido que crean archivos de imgenesque se pueden utilizar en el sitio Web.

Dreamweaver incluye las siguientes funciones de edicin de imgenes:

Nuevo muestreo de imgenes aade o quita pxeles en archivos de imagen JPEG y GIFcuyo tamao se ha cambiado a fin de que se parezcan lo mximo posible a la imagenoriginal. Al muestrear de nuevo una imagen, se reduce el tamao del archivo deimagen, lo cual mejora el rendimiento de la descarga. Cuando cambie el tamao deuna imagen en Dreamweaver, puede volver a muestrearla para adaptarla a sus

nuevas dimensiones. Al muestrear de nuevo un objeto de mapa de bits, se aaden oquitan pxeles en la imagen para hacerla mayor o menor. Si se muestrea una imagencon una resolucin ms alta, la prdida de calidad suele ser poco importante. Sinembargo, si se muestrea con una resolucin ms baja, siempre se pierden datos y sereduce la calidad.

Recorte permite editar imgenes mediante la reduccin del rea de la imagen.Normalmente, suele recortarse una imagen para poner ms nfasis en el tema de laimagen y eliminar aspectos no deseados alrededor del centro de inters de laimagen. Brillo/Contraste modifica el contraste o el brillo de los pxeles de la imagen.Esto afecta a los resaltados, sombras y medios tonos de la imagen. Normalmente, lafuncin Brillo/Contraste se utiliza para corregir imgenes que son demasiado oscuras

o demasiado claras.Perfilado ajusta el enfoque de una imagen mediante el aumento del contraste de losbordes de dentro de la imagen. Cuando se explora una imagen o se realiza una fotodigital, la accin predeterminada de la mayora del software de captura de imgenesconsiste en suavizar los bordes de los objetos que aparecen en la imagen. Esto evitaque se pierdan detalles minsculos en los pxeles de los que se componen lasimgenes digitales. Sin embargo, para mostrar estos detalles en los archivos deimagen digital, a menudo es necesario perfilar la imagen, con lo que aumenta elcontraste de los bordes y la imagen aparece ms definida.

INSERCIN DE UNA IMAGEN

Al insertar una imagen en un documento de Dreamweaver, el programa generaautomticamente una referencia al archivo de imagen en el cdigo HTML. Paraasegurarse de que esta referencia es correcta, el archivo de imagen deber estar enel sitio actual. Si no lo est, Dreamweaver le preguntar si desea copiar el archivo enel sitio.

Asimismo, las imgenes se pueden insertar de forma dinmica. Las imgenesdinmicas son aquellas que cambian con frecuencia. Por ejemplo, en los sistemas derotacin de rtulos publicitarios es necesario seleccionar de forma aleatoria un nicortulo de una lista de posibles rtulos y, despus, mostrar dinmicamente la imagendel rtulo seleccionado cuando se solicite una pgina.

Existen diversas formas de introducir una imagen:

En la categora Comn de la barra Insertar, hacer clic en el icono Imagen.


32/120



En la categora Comn de la barra Insertar, arrastrar el icono Imagen a laventana de documento (o a la ventana de vista Cdigo si se est trabajando enel cdigo).

Seleccionar Insertar > imagen. Arrastrar una imagen desde el panel Activos (Ventana > Activos) hasta la

posicin deseada de la ventana de documento. Arrastrar una imagen desde el panel Sitio hasta la posicin deseada de laventana de documento.

Arrastrar una imagen desde el escritorio hasta la posicin deseada de laventana de documento.

En el cuadro de dilogo que aparece, seguir uno de estos procedimientos:

Seleccione Sistema de archivos para elegir un archivo grfico. Seleccione Fuente de datos para elegir un origen de imagen dinmica.

Para finalizar, buscar y seleccionar el origen de imagen o contenido que se deseeinsertar.

A travs del Inspector de propiedades y del Panel de atrib

tmm_tema6_integracion_medios_digitales.pdf

Documents

herramientas de autora

herramientasde autora

necesidades multimedia

optimizacin de imgenes

webintegracin de medios

lenguaje html

extensiones de html

prop ietarias