El Blog de Fox » Web http://blog.foxandxss.net Fomentando el desarrollo libre bajo .NET Tue, 01 Nov 2011 23:32:17 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Silverlight & HTML & Apache http://blog.foxandxss.net/silverlight-html-apache http://blog.foxandxss.net/silverlight-html-apache#comments Fri, 24 Jul 2009 13:56:26 +0000 Fox http://www.foxandxss.org/blog/?p=66 Buenas!

Mucha gente piensa, de hecho, yo también lo pensaba en su día, que para poder usar Silverlight necesitaríamos un servidor Windows corriendo IIS y una aplicación web usando ASP.NET.

Investigando descubrí que podía embeber una aplicación Silverlight dentro de un simple HTML. Gracias a esto, podemos embeber dicha aplicación en cualquier tipo de página, ya sea PHP u otra cosa.

No solo eso, si no que podemos correr dicha página web bajo un servidor Apache ya sea en Windows o Linux. Ahora te surgirán las dos típicas preguntas: ¿Cómo?, ¿Por qué funciona?. Paso a contestarlas:

¿Por qué funciona en algo que no sea Windows e IIS?

Silverlight no se ejecuta en el servidor, Silverlight se ejecuta en el cliente, es un plugin del navegador, así que somos nosotros quienes necesitamos tener Silverlight instalado.

Así que al ser nosotros quienes ejecutemos la aplicación, el servidor simplemente necesita conocer los ficheros de Silverlight y nada más.

¿Cómo lo hago?

Tendremos que modificar el fichero .htaccess e insertar estos MimeTypes:

AddType application/x-silverlight-app xap
AddType application/x-silverlight-2 xap

Realmente con uno nada más funciona, pero mejor insertamos ambos y nos quitamos de tener que editar luego el html para cambiar el MimeType.

Y bueno, ya que estamos, podriamos insertar todos estos:

AddType application/x-ms-application application
AddType application/x-ms-manifest manifest
AddType application/octet-stream deploy
AddType application/vnd.ms-xpsdocument xps
AddType application/xaml+xml xaml
AddType application/x-ms-xbap xbap
AddType application/x-silverlight-app xap
AddType application/x-silverlight-2 xap

Con todos estos, podremos hacer uso del ClickOnce que nos ofrece el Visual Studio para distribuir nuestras aplicaciones de forma más comoda, en este caso, desde nuestra web.

Y nada más, con esto ya podemos usar alojar nuestra aplicación Silverlight en un servidor Linux con Apache.

Vale, y… ¿Ahora como incrusto la aplicación en el HTML?

Más facil todavía.

Si creamos una aplicación Silverlight en el Visual Studio, nos dará la opción de crear un proyecto ASP.NET, pero si le decimos que no, nos creará un .html básico con el objeto ya embebido.

Básicamente, al compilar una aplicación Silverlight, se creará un fichero .xap que no es más que un .zip que contiene los ficheros .xaml, los dll necesarios… Vamos, algo parecido a los .jar de Java.

Ahora con este .xap, solo necesitaremos embeberlo en el .html usando un código como este:

<div id="silverlightControlHost">
	<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
	  <param name="source" value="NombreDel.xap"/>
	  <param name="background" value="white" />
	  <param name="minRuntimeVersion" value="3.0.40624.0" />
	  <param name="autoUpgrade" value="true" />
	  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&amp;v=3.0.40624.0" style="text-decoration:none">
		  <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
	  </a>
	</object>
</div>

Con esto, dentro de ese div tendremos nuestra aplicación Silverlight embebida.

Esto sería un ejemplo completo de página HTML que contiene simplemente el Silverlight.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>SilverlightApplication1</title>
    <style type="text/css">
		#silverlightControlHost {
			height: 500px;
			width: 500px
		}
    </style>
</head>
<body>
<div id="silverlightControlHost">
	<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
	  <param name="source" value="NombreDel.xap"/>
	  <param name="background" value="white" />
	  <param name="minRuntimeVersion" value="3.0.40624.0" />
	  <param name="autoUpgrade" value="true" />
	  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&amp;v=3.0.40624.0" style="text-decoration:none">
		  <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
	  </a>
	</object>
</div>
</body>
</html>

Con el CSS ajusto el tamaño de la aplicación Silverlight. Imagino que no será la mejor forma para hacerlo, pero todavía estoy verde con la programación web :P

Ejemplo de aplicación Silverlight embebida aquí en el artículo

Install Microsoft Silverlight

Eso es todo amigos.

]]> http://blog.foxandxss.net/silverlight-html-apache/feed 4