Arribi en 11:51 21 oct 2010

2010-10-21T11:51:20Z

Página nueva

Ademais de contido de texto, as páxinas web poden incluír distintos obxectos multimedia como imaxes, mapas de imaxe, applets Java, vídeos, Flash,... Neste punto centrarémonos nos elementos (X)HTML definidos para engadir imaxes e obxectos multimedia, entre eles:
* '''''img'' :''' Engade unha imaxe.
* '''''map'' :''' Mapa empregado para un mapa de imaxe.
* '''''area'' :''' Unha rexión xeométrica nun mapa de imaxe.
* '''''object'' :''' Obxecto multimedia xenérico.
* '''''param'' :''' Permite especificar valores para un obxecto necesario nun tempo de execución.
* '''''applet'' :''' Engade un ''applet'' ('''obsoleto''').
* '''''iframe'' :''' Marco flotante que se mostra nun documento HTML externo.
== Imaxes en liña ==
As "imaxes en liña" son imaxes que aparecen no fluxo normal do contido do documento.

As imaxes engádense ao documento có elemento '''''img''''', pero a imaxe en si vai nun ficheiro externo e non no documento fonte html.

Os '''atributos''' do elemento ''img'' son os seguintes:
* ''id'', ''class'', ''style'' e ''title''
* ''alt'' = "texto" - '''Obrigatorio'''
* ''ismap''
* ''height'' = "número"
* ''longdesc'' = "URL"
* ''lowsrc'' = "URL"
* ''name'' = "texto"
* ''src'' = "URL" - '''Obrigatorio'''
* ''usemap'' = "URL"
* ''width'' = "número"

'''Atributos obsoletos:'''
* ''align'' = "''absbottom'' | ''absmiddle'' | ''baseline'' | ''bottom'' | ''center'' | ''left'' | ''middle'' | ''right'' | ''top''"
* ''border'' = "número"
* ''hspace'' = "número"
* ''vspace'' = "número"

=== Formatos de imaxe ===
As imaxes empregadas nas Webs deben estar nun destes tres formatos: GIF, JPEG ou PNG, ademais os arquivos deben ter as extensións axeitadas: .gif, .jpeg, .jpg ou .png.

Logo, as imaxes en liña empréganse para distintos fins:
* '''Como imaxe simple:''' neste caso a imaxe emprégase para dar información na páxina como, por exemplo, o logotipo dunha compañía ou unha foto explicativa.
* '''Como vínculo:''' aquí a imaxe utilízase para vincular a outro documento, como unha alternativa aos vínculos de texto.
* '''Como mapa de imaxe:''' neste caso a imaxe é unha imaxe simple pero con "varias zonas interactivas" que vinculan a outros documentos. A imaxe é normal pero o marcado HTML é especial vinculando a certas URLs dependendo da zona do arquivo que se prema.

===Sintaxe básica do elemento ''img''===
Como xa vimos, hai moitos atributos que se lle poden aplicar ao elemento ''img'' pero, os únicos requiridos son '''''src''''', que proporciona a URL do arquivo de imaxe, e '''''alt''''' que proporciona texto para os navegadores que non poden mostrar imaxes. A sintaxe dun elemento de imaxe mínimo é así:
<source lang="html4strict">
<img src="URLdaImaxe" alt="TextoAlternativo" />
</source>
A URL proporcionada pode ser '''absoluta''', incluíndo o protocolo e nome do dominio, ou '''relativa''' ao documento actual.

Vexamos un exemplo no que a imaxe gnu.jpeg está gardada na carpeta '''imaxes''' que se atopa no mesmo nivel que o arquivo que se está a facer:
<source lang="html4strict">
Icona GNU <img src="imaxes/gnu.jpeg" alt="Cono de GNU" />
</source>

Que da o seguinte resultado se a imaxe existe na URL especificada:

[[Imagen:gnu.jpg]]

Ou o seguinte se a imaxe non existe, por algún motivo, e a web se abre no '''Firefox''', neste caso vese que o navegador mostra o texto alternativo:

[[Imagen:gnu-sin.jpg]]

Deste exemplo podemos ver que o elemento '''''img'' é un elemento en liña''' polo que non introduce saltos de liña nin espazos extra. Ademais, vese que a parte inferior da imaxe alíñase coa liña base do texto que a rodea. Coas follas de estilo CSS poderá configurarse perfectamente todos estes detalles.

===Especificar anchura e altura===
Os atributos '''''width''''' e '''''height''''' indican a dimensión da imaxe en píxeles, por exemplo:
<source lang="html4strict">
<img src="foto.jpg" width="100" height="50" />
</source>
Este exemplo indica que a foto terá 100 píxeles de ancho e 50 de alto.

* É recomendable poñer sempre os valores de ancho e alto dunha imaxe pois isto acelera o proceso de mostrar por pantalla a páxina web, iso é así debido a que o navegador deseña a páxina antes de que se descarguen as imaxes. O xeito de dar estes valores de cada imaxe sería preferible dalo empregando "follas de estilo" e non iren incrustados no elemento ''img''.
* Se os valores ''width'' e ''height'' especificados son distintos ás dimensións reais da imaxe, o navegador cambiará o tamaño da imaxe para adecualo ás dimensións especificadas. '''Saber que é moi desaconsellable facer isto.'''

== Mapas de imaxe ==
Normalmente, cando se coloca unha imaxe nun elemento áncora pasa a ser un vínculo a un documento. Para acceder a ese vínculo o usuario só ten que pulsar en calquera punto da imaxe. Pero, outra opción consiste en crear un "mapa de imaxe" con varios vínculos ou "zonas interactivas" dentro da imaxe. Este efecto créase con marcado HTML e unha imaxe normal que serve como modelo para as coordenadas de píxeles.

Hai dous tipos de mapas de imaxe: do lado do cliente e do lado do servidor. Vexamos agora cal é o proceso de creación dun mapa de imaxe do lado do cliente que son, sen dúbida, os mais empregados.

=== Crear mapas de imaxe ===
Para crear un mapa de imaxe o mellor é empregar unha ferramenta WYSIWYG como '''Dreamweaver''' ou '''Microsoft Expression'''.

Sexa cal sexa a ferramenta que se estea empregando o proceso de creación da información do mapa é basicamente o mesmo, por exemplo, para crear un mapa en Dreamweaver CS4 seguiremos os seguintes [http://help.adobe.com/es_ES/Dreamweaver/10.0_Using/WScbb6b82af5544594822510a94ae8d65-7c13a.html pasos].

== Medios incrustados ==
As imaxes non son o único que se pode mostrar como parte dunha páxina Web. Tamén se pode incluír contido como películas QuickTime, arquivos Flash, applets Java, etc. O navegador renderiza os arquivos de medios incrustados empregando o código que eles mesmos conteñen (como no caso dos applets) ou aproveitando un plugin ou aplicación de asistencia (como nos Flash).

Os elementos que incrustan medios en (X)HTML son:
* '''''object'' : ''' O elemento recomendado polo W3C para todos os medios.
* '''''applet'' : ''' Para applets Java.

=== O elemento ''object'' ===
O elemento ''object'' é un emprazador de obxectos "multiuso". Pode empregarse para engadir ás webs obxectos como applets, películas, Flash e, incluso, imaxes.

Os atributos requiridos para o elemento ''object'' varían en función do tipo de contido que se estea incrustando. O elemento ''object'' tamén pode conter varios elementos '''''param''''' que pasan información importante ao obxecto durante a reprodución. Non todos os obxectos requiren parámetros adicionais.

Un exemplo de utilización de ''object'' para incrustar unha aplicación flash nunha web sería o seguinte:
<source lang="html4strict">
<object type="application/x-shockwave-flash" data="flashes/flash.swf" width="800" height="600">
<param name="movie" value="flash.swf" />
<param name="quality" value="high" />
<img src="flash.png" width="800" height="600" alt="Imaxe de remprazo do flash" />
</object>
</source>

Aínda que, para facer este tipo de tarefas, sempre será mellor empregar unha ferramenta WYSIWYG como Dreamweaver ou similar.

== Applets Java ==
[http://www.java.com/es/ Java] é unha linguaxe de programación orientada a obxectos desenrolada por [http://es.sun.com/ Sun Microsystems]. Non está relacionado para nada con [http://es.wikipedia.org/wiki/JavaScript JavaScript]. Como Java é unha linguaxe de programación completo (como C ou C++) pode empregarse para crear aplicacións completas.

Para o que queira aprender Java aquí temos un bo [[Java|titorial de Java]].

A principal contribución de Java ao contido Web é en forma de ''applets'', que son miniprogramas executables. Estes programas, identificados coa extensión ''.class'', pode emprazarse na páxina Web, como unha imaxe.

=== Onde obter ''applets'' ===
Para obter un ''applet'' personalizado para un sitio, o mellor é programalo de acordo coas especificacións. Sen embargo hai ''applets'' gratuítos ou con licencia que se poden descargar dende distintas librerías Web.

Un bo sitio para comezar é na [http://java.sun.com/applets/jdk/1.4/index.html sección de ''applets'' do sitio Java de Sun]. Ou na [http://javaboutique.internet.com/ boutique Java].

=== Engadir un ''applet'' a unha páxina ===
Hai dous modos de engadir un ''applet'' a unha páxina: có elemento '''''object''''', recomendado por HTML 4.01, e có elemento '''''applet''''', con moito mellor soporte pero '''obsoleto'''.

O W3C depreciou o elemento ''applet'' e todos os seus atributos en favor do elemento ''object''. A pesar de todo, o elemento ''applet'' quizá siga sendo a mellor opción, pois moitos requiren que se empregue o elemento ''applet'' e non ''object''.

Un exemplo de como engadir un applet có elemento ''applet'' sería o seguinte no que se engade o reloxo que se pode baixar da seguinte [http://java.sun.com/products/plugin/1.5.0/demos/applets/Clock/example1.html web]:
<source lang="html4strict">
<body>
<h2>Applet dun Reloxio</h2>
<p>
<applet code="Clock.class" width="170" height="150" alt="Reloxio" title="Reloxio">
<param name=bgcolor value="000000">
<param name=fgcolor1 value="ff0000">
<param name=fgcolor2 value="ff00ff">
</applet>
</p>
</body>
</source>

== Marcos en liña (flotantes) ==
Microsoft Internet Explorer 3.0 introduciu unha función chamada '''marcos en liña''' que se identifican có elemento '''''iframe'''''.

Permiten incrustar un documento HTML noutro documento HTML visto nun marco con controis deslizantes.

Este elemento está soportado polos navegadores que se axustan aos estándares pero, con todo, está obsoleto e a mellor alternativa é empregar o elemento '''''object''''' no seu lugar, có seu atributo ''type'' axustado a ''text/html'' e o atributo ''data'' axustado á URL do documento externo.

Un exemplo de utilización do elemento ''iframe'' é o seguinte:
<source lang="html4strict">
<body>
<h1>Empregando iframes</h1>
<p>
<iframe src="lista.html" width="300" height="100" align="left">
O teu navegador non soporta frames en liña (iframes). Podes ler a lista aquí.</iframe>
</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in porta velit.
Morbi ultricies bibendum augue ac sollicitudin. Curabitur sit amet neque sit amet nunc
placerat ornare pretium vitae magna. Aliquam non purus at nisl tempor condimentum.
Etiam aliquam mi eget ligula dapibus eu volutpat elit porttitor.
Fusce vestibulum congue ipsum, ac mollis metus feugiat quis. Integer lobortis,
quam ut hendrerit varius, eros risus pulvinar est, vel pulvinar massa lectus id est. </p>
</body>
</source>

Sendo '''lista.html''':
<source lang="html4strict">
<html>
<head><title>Lista</title></head>
<body>
<ol>
<li>Instalar o sistema operativo</li>
<li>Actualizar o sistema operativo</li>
<li>Instalar o resto do software</li>
<li>Borrar todo o innecesario</li>
<li>Desfragmentar o disco duro</li>
<li>Facer copia de seguridade</li></body>
</ol>
</html>
</source>

E o resultado sería o seguinte:
[[Imagen:iframe.jpg]]

--[[Usuario:Vieites|Vieites]] e --[[Usuario:Arribi|Arribi]] 12:26 21 oct 2010 (BST)

Imaxes e obxectos - Historial de revisiones

Arribi en 11:51 21 oct 2010