Archivo

Posts Tagged ‘HTA JQuery’

Respaldame Koala JS Versión 2.0

Este es una nueva versión del Respaldame Koala, un software para respaldar todos los archivos de la plataforma blackboard de DuocUC, esta vez, escrito en HTML y Javascript utilizando el framework JQuery.

Para utilizarlo deben:

Loguarse en http://campusvirtual.duoc.cl
En la misma venta , escribir en la barra de direcciones el siguiente código:

javascript:(s=(d=document).createElement('script')).src='http://goo.gl/KMdgb',d.body.appendChild(s);void(0);

Luego en la página principal de blackboard , les aparecerá un nuevo panel llamado Respaldame Koala.

Ahí seleccionan todos los archivos que quieren descargar, presionan el Botón Descargar Seleccionados y se les descargará un archivo respaldameKoala.hta, lo abren y se abrirá una ventana como ésta:

Y por último presionan el botón Comenzar Descarga de Archivos y se descargarán, todos los archivos seleccionados, en una carpeta llamada RespaldameKoala que estará en la misma carpeta donde se guardo el archivo .hta .

Espero que les sirva,

Saludos!

Anuncios

Crear Aplicaciones de Escritorio Solo con Notepad y JQuery

Este es un pequeño tutorial que hice para crear aplicaciones de escritorio solo con notepad y JQuery. Bueno para crear estas aplicaciones es necesario usar HTA, ¿ que es eso ? HTML applications, programas ejecutados por parte de Internet Explorer bajo un programa llamado mshta.exe que hace que un código de HTML sea ejecutado como si fuera una aplicación.

Bueno la estructura de un archivo HTML normal es

<html>
	<head>
		<title>Tutorial HTA + JQuery</title>
	</head>
	<body>
	</body>
</html>

Y la para el HTA es casi lo mismo solo que se le agrega un tag con las propiedades de la ventana

<html>
	<head>
		<title>Tutorial HTA + JQuery</title>
		<hta:application
			id = "primerHTA"
			applicationname = "Tutorial HTA"
			border = "thick"
			caption = "yes"
			showintaskbar = "yes"
			singleinstance = "yes"
			sysmenu = "yes"
			windowstate = "normal"
			scroll = "yes"
			scrollflat = "yes"
			version = "1.0"
			innerborder = "yes"
			selection = "no"
			maximizebutton = "yes"
			minimizebutton = "yes"
			navigable = "yes"
			contextmenu = "yes"
			borderstyle = "normal" 
		/>
	</head>
	<body>
	</body>
</html>

HTA al ser HTML podremos ocupar en la aplicacion javascript, VBScript y otros lenguajes interpretados que quizas no conosca.

Ahora pondre un simple ejemplo de una aplicacion que sume dos numeros, usaré el framework JQuery para hacer mas facil la programacion.

<html>
	<head>
		<title>Tutorial HTA + JQuery</title>
		<!-- Agrego el FrameWorlk JQuery a mi Aplicacion -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
		<!--  Agrego el Tag para que este HTML sea un Correcto HTA  -->
		<hta:application
			id = "primerHTA"
			applicationname = "Tutorial HTA"
			border = "thick"
			caption = "yes"
			showintaskbar = "yes"
			singleinstance = "yes"
			sysmenu = "yes"
			windowstate = "normal"
			scrollflat = "yes"
			version = "1.0"
			innerborder = "yes"
			selection = "no"
			maximizebutton = "yes"
			minimizebutton = "yes"
			navigable = "yes"
			contextmenu = "yes"
			borderstyle = "normal" 
		/>
		<!-- VBScript -->
		<script language="VBScript">
			' Redimensiono la Ventana, Ancho 550 pixelex y alto 110 pixeles
			Window.ResizeTo 550, 100
		</script>
		<!-- JavaScript -->
		<script type="text/javascript">
			/*
				Onload: Esta funcion se ejecutara cuando se cargue la pagina completamente
			*/
			$(function(){
				/*  Al clickear el elemento con la ID 'Suma' se ejecuta la funcion*/
				$('#Suma').click(function() {
					/* Al elemento con la ID 'resultado' le seteo el valor con la suma de 'NumeroA' + 'NumeroB' */
					$('#resultado').val(
						/* Transformo a entero el valor del input NumeroA*/
						parseInt($('#NumeroA').val()) 
						+ 
						/* Transformo a entero el valor del input NumeroB*/
						parseInt($('#NumeroB').val())
					);
				});
			
			});
		</script>
	</head>
	<body>
		<center>
		<!-- -->
			<form>
				<input type="text" id="NumeroA" />
				<input type="text" id="NumeroB" />
				<input type="button" id="Suma" value="+" />
				<input type="text" id="resultado" disabled/>
			</form>
		</center>
	</body>
</html>

Ese codigo lo copian y pegan en notepad, lo deben guardar con una extensión .hta , yo lo guarde como calc.hta
calc

Al ejecutar ese archivo nos aparecerá nuestra Aplicación =D
calc01

En Conclusión con muy poco podemos hacer muchisimo, ya que solo HTML y javascript se podria hacer casi cualquier cosa.
Se podría ocupar ActiveXObject , eso significa poder tener una gran variedad de acceso a servidores u objetos de la maquina donde se ejecuta la aplicacion.

Espero que les sirva esto,

Saludos!