aleantin

Usuario (Argentina)

Primer post: 5 jul 2011Último post: 7 jul 2011

Posts

Puntos totales

Comentarios

Aprendé a programar aplicaciones HTML (3ª entrega)

Hazlo Tu MismoporAnónimo7/6/2011

Introducción Para comprender este post es necesario ver previamente las publicaciones anteriores: • Aprendé a programar aplicaciones HTML • Aprendé a programar aplicaciones HTML (2ª entrega)

Aprendé a programar aplicaciones HTML

Hazlo Tu MismoporAnónimo7/5/2011

Introducción Gracias a las aplicaciones HTML, los usuarios de Windows pueden desarrollar sus propias aplicaciones de forma rápida y sencilla, utilizando herramientas básicas como el Bloc de notas y sin conocimientos de programación en lenguajes complejos como C++. En sucesivas entregas voy a tratar de explicar de la forma más clara posible y en profundidad cómo programar aplicaciones HTML, pero no así el lenguaje DHTML del cual sólo haré menciones específicas. De todas formas esta guía pretende ser útil para todos los usuarios aunque quedaría como tarea de ellos incursionar con más profundidad en DHTML. Aplicaciones HTML Una aplicación HTML (HTML Application), es un archivo de texto plano escrito en lenguaje DHTML (HTML Dinámico), que se ejecuta en los sistemas Windows como si fuera una aplicación cualquiera gracias a una etiqueta especial, ubicada dentro del encabezado del documento HTML, que permite especificar el nombre, tamaño, botones de la ventana, icono, etc. En resumen, una aplicación HTML puede ser escrita utilizando el Bloc de notas y posee todas las facilidades de los lenguajes HTML, CSS y scripts. Adicionalmente permite la utilización de contenido ActiveX, applets Java y cualquier contenido que pueda añadirse e interactuar en un documento HTML. Estructura de un documento HTA Una aplicación HTML se escribe en un documento de texto plano cuya extensión debe ser .hta y que debe respetar las convenciones de un documento HTML estándar. Si bien esta no pretende ser una guía de HTML, a continuación se explica la estructura básica de un documento HTML: • Un documento HTML comienza con la etiqueta <html> y termina con la etiqueta </html>. • Dentro de estas etiquetas se encuentran el encabezado del documento, que contiene información y define propiedades del mismo, y el cuerpo del documento, que presenta el contenido visible del mismo. • El encabezado se define entre las etiquetas <head> y </head>. • El cuerpo del documento se define entre las etiquetas <body> y </body>. Ejemplo: aleantin dijo:<html> <head> En esta área se escriben etiquetas propias del encabezado. </head> <body> En esta área se escribe el contenido visible del documento. </body> </html> El encabezado Entre las etiquetas <head> y </head> se pueden escribir otras etiquetas y sus propiedades que definen características del documento, los formatos del contenido y rutinas de script. Por el momento sólo se destacarán dos etiquetas. La primera es la etiqueta <title> y su correspondiente cierre </title>. Dentro de estos marcadores se escribe el título de la ventana. La otra etiqueta que se analizará es la que establece las propiedades de la aplicación HTML: <hta:application>. Esta etiqueta por sí sola no define ningún atributo de la aplicación, para esto es necesario un conjunto de pares propiedad="valor" que se escriben dentro de la misma. Por ejemplo: aleantin dijo:<hta:application maximizebutton="no" windowstate="maximize"> En la siguiente entrega se detallarán todas las propiedades de la etiqueta <hta:application> y sus posibles valores. El cuerpo del documento Entre las etiquetas <body> y </body> se escribe todo el contenido visible del documento: texto, imágenes, botones, listas, etc. ¡Hola Mundo! Para finalizar esta entrega, se presenta el clásico ejemplo ¡Hola Mundo! el cual puede probarse ingresando el siguiente código en el Bloc de notas: aleantin dijo:<html> <head> <title>Mi primera aplicación HTML</title> <hta:application maximizebutton="no" windowstate="maximize"> </head> <body> ¡Hola Mundo! </body> </html> Luego se debe guardar el código en una carpeta cualquiera pero encerrando el nombre entre comillas para que tome la extensión .hta. Por ejemplo: "holamundo.hta" Ahora sólo queda abrir el Explorador de Windows, buscar la aplicación HTML antes guardada y ejecutarla haciendo doble click sobre su icono. Contacto Para que todos tengan acceso a las consultas, no las recibiré por MP, sólo en comentarios. Espero que les haya gustado. Saludos.

Aprendé a programar aplicaciones HTML (2ª entrega)

Hazlo Tu MismoporAnónimo7/5/2011

Introducción Para comprender este post es necesario ver previamente la publicación anterior: • Aprendé a programar aplicaciones HTML En esta entrega voy a explicar en profundidad las propiedades de la etiqueta <hta:application>, las cuales permiten establecer las propiedades de la ventana del programa. Propiedades de la ventana Como se vio en el post anterior, la etiqueta <hta:application> por sí sola no define ningún atributo de la aplicación, para esto es necesario un conjunto de pares propiedad="valor" que se escriben dentro de la misma. Estas propiedades, y sus posibles valores, son los siguientes: ID="cadena" Función: Establece un nombre para acceder al objeto hta:application mediante código script. Valores: Cualquier cadena de texto admitida como nombre valido en los lenguajes de script. APPLICATIONNAME="cadena" Función: Establece el nombre de la aplicación HTML. Valores: Cualquier cadena de texto. BORDER="cadena" Función: Establece el tipo de borde de la ventana de la aplicación HTML. valores: thick (borde normal que permite redimensionar la ventana, es el valor por defecto), dialog (borde propio de un cuadro de diálogo), none (ventana sin bordes), thin (borde delgado con barra de títulos). La propiedad sólo admite uno de estos valores. Nota: Establecer BORDER="none" elimina la barra de título de la ventana y por lo tanto hace inútiles a las propiedades que establecen su icono y botones. BORDERSTYLE="cadena" Función: Establece el tipo de borde del área de contenido de la aplicación. Valores: normal (borde normal, es el valor por defecto), complex (borde elevado y hundido), raised (borde 3D elevado), static (borde 3D usado para ventanas que no aceptan entradas del usuario), sunken (borde 3d hundido). La propiedad sólo admite uno de estos valores. CAPTION="booleano" Función: Determina si se muestra o no la barra de títulos en la ventana de la aplicación HTML. Valores: yes (la barra de títulos está presente, valor por defecto), no (la barra de títulos no está presente). La propiedad sólo admite uno de estos valores. CONTEXTMENU="cadena" Función: Determina si el menú contextual es mostrado o no cuando el usuario pulsa el botón derecho del mouse sobre la ventana. Valores: yes (el menú contextual está habilitado, valor por defecto), no (el menú contextual está deshabilitado). La propiedad sólo admite uno de estos valores. ICON="cadena" Función: Establece la ruta de un icono para la aplicación. Valor: Ruta absoluta o relativa de un archivo .ico (si el icono está en la misma carpeta de la aplicación sólo es necesario el nombre del archivo). INNERBORDER="cadena" Función: Determina si se muestra o no el borde 3D interno de la ventana. Valores: yes (el borde interno está presente, valor por defecto), no (el borde interno no está presente). La propiedad sólo admite uno de estos valores. MAXIMIZEBUTTON="booleano" Función: Determina si se muestra o no el botón maximizar en la ventana. Valores: yes (el botón está presente, valor por defecto), no (el botón no está presente). La propiedad sólo admite uno de estos valores. MINIMIZEBUTTON="booleano" Función: Determina si se muestra o no el botón minimizar en la ventana. Valores: yes (el botón está presente, valor por defecto), no (el botón no está presente). La propiedad sólo admite uno de estos valores. NAVIGABLE="cadena" Función: Determina si los documentos vinculados se muestran en la ventana de la aplicación o en una ventana nueva del explorador. Valores: yes (los enlaces se abren en la ventana de la aplicación HTML), no (los enlaces se abren en una nueva ventana del explorador, valor por defecto). La propiedad sólo admite uno de estos valores. SCROLL="cadena" Función: Determina si se muestran o no las barras de desplazamiento del área de contenido. Valores: yes (las barras de desplazamiento siempre serán visibles, valor por defecto), no (las barras de desplazamiento no serán visibles), auto (las barras de desplazamiento se presentarán sólo cuando sean necesarias). La propiedad sólo admite uno de estos valores. Nota: Establecer SCROLL="no" hace inútil a la propiedad SCROLLFLAT. SCROLLFLAT="booleano" Función: Determina si las barras de desplazamiento se muestran en forma plana o con efecto 3D. Valores: yes (las barras se muestran planas), no (las barras se muestran 3D, valor por defecto). La propiedad sólo admite uno de estos valores. SELECTION="cadena" Función: Determina si el contenido de la ventana puede ser seleccionado con el mouse o no. Valores: yes (el contenido es seleccionable, valor por defecto), no (el contenido no es seleccionable). La propiedad sólo admite uno de estos valores. Nota: Establecer SELECTION="no" evita que el menú contextual sea mostrado y hace inútil a la propiedad CONTEXTMENU. SHOWINTASKBAR="booleano" Función: Determina si la aplicación se muestra o no en un botón de la barra de tareas. Valores: yes (la aplicación es visible en la barra de tareas, valor por defecto), no (la aplicación no es visible en la barra de tareas). La propiedad sólo admite uno de estos valores. Nota: Esta propiedad no impide que la aplicación sea seleccionada mediante la combinación de teclas ALT+TAB. SINGLEINSTANCE="booleano" Función: Determina si varias o sólo una instancia de la aplicación pueden correr a la vez. Valores: yes (sólo puede ejecutarse una instancia de la aplicación), no (se pueden ejecutar múltiples instancias de la aplicación a la vez, valor por defecto). La propiedad sólo admite uno de estos valores. Nota: Establecer SINGLEINSTANCE="yes" requiere de la propiedad APPLICATIONNAME. SYSMENU="booleano" Función: Determina si se muestra o no el menú del sistema de la ventana. Valores: yes (el menú está habilitado, valor por defecto), no (el menú está deshabilitado). La propiedad sólo admite uno de estos valores. Nota: Establecer SYSMENU="no" deshabilita al icono y a los botones de la barra de títulos de la aplicación. VERSION="cadena" Función: Establece el número de versión de la aplicación HTML. Valores: Cualquier cadena de texto. WINDOWSTATE="cadena" Función: Establece el estado inicial de una ventana. Valores: normal (la ventana se presentará en el tamaño normal de la ventana de Internet Explorer, valor por defecto), maximize (la ventana se presentará maximizada), minimize (la ventana se presentará minimizada). La propiedad sólo admite uno de estos valores. Observaciones Las etiquetas HTML pueden ser escritas en una única línea o en varias puesto que las mismas se consideran cerradas solamente cuando aparece el símbolo mayor que >. Por esto, y para obtener una mejor visión de las propiedades de la etiqueta <hta:application> es posible escribirla con sus atributos alineados en columna. Por ejemplo: aleantin dijo:<html> <head> <title>Mi primera aplicación HTML</title> <hta:application id="htaMain" applicationname="helloworld" border="thin" innerborder="no" maximizebutton="no" singleinstance="yes" version="1.0" > </head> <body> ¡Hola Mundo! </body> </html> Los nombres de las propiedades no son sensibles a mayúsculas o minúsculas, es decir que es indistinta la forma en que se escriban. Contacto Para que todos tengan acceso a las consultas, no las recibiré por MP, sólo en comentarios. Espero que les haya gustado. Saludos.

Hice un programa para los taringueros

Hazlo Tu MismoporAnónimo7/7/2011

Introducción Para mostrar las posibilidades que brinda la programación de aplicaciones HTML, hice este pequeño programa que permite generar texto con efecto de degradado para post en sitios que soporten BBCode. aleantin dijo:Este es un ejemplo de lo que se puede hacer con BBColor. Cómo utilizar este programa Para probar el programa pega el código siguiente en el Bloc de notas: Luego se debe guardar el código en una carpeta cualquiera pero encerrando el nombre entre comillas para que tome la extensión .hta. Por ejemplo: "BBColor.hta" Ahora sólo queda abrir el Explorador de Windows, buscar la aplicación HTML antes guardada y ejecutarla haciendo doble click sobre su icono. Código fuente El código escrito en DHTML es el siguiente: aleantin dijo: <html> <head> <title>BBColor</title> <hta:application id="htaMain" applicationname="BBColor" border="thin" innerborder="no" maximizebutton="no" scroll="no" singleinstance="yes"> <script language="JavaScript">  </script> <style type="text/css">  </style> </head> <body onLoad="ftnLoadData();ftnMarquee()" onContextMenu="return blnEdit" onSelectStart="return blnEdit"> <p><b>Generador de títulos BBCode</b></p> <form name="frmMain" onSubmit="return false"> <table border="0" width="100%" cellpadding="4" cellspacing="0"> <tr><td colspan="4"><input type="text" name="txtMain" value="Escriba una frase a la cual aplicar el efecto" style="width:100%;" onFocus="blnEdit = true;this.select()" onBlur="blnEdit = false"></td></tr> <tr valign="top"><td><input type="radio" name="radMain" checked> Gradiente</td> <td> </td> <td> </td> <td><input type="radio" name="radMain"> Arco Iris</td></tr> <tr valign="top"><td>Color inicial:</td> <td><select name="selStart" onChange="ftnSetCode()"> </select></td> <td># <input type="text" name="txtStart" value="000000" size="6" maxlength="6" class="code" disabled onChange="ftnSetCustom()" onFocus="blnEdit = true" onBlur="blnEdit = false"></td> <td> </td></tr> <tr valign="top"><td>Color final:</td> <td><select name="selEnd" onChange="ftnSetCode()"> </select></td> <td># <input type="text" name="txtEnd" value="ff0000" size="6" maxlength="6" class="code" disabled onChange="ftnSetCustom()" onFocus="blnEdit = true" onBlur="blnEdit = false"></td> <td> </td></tr> <tr><td colspan="4" align="center"><button onClick="ftnGetCode()">Obtener BBCode</button></td></tr> <tr><td colspan="4">Vista previa:<br> <span id="spnMain">Escriba una frase a la cual aplicar el efecto</span></td></tr> <tr><td colspan="4">BBCode:<br> <textarea name="txaMain" rows="8" readonly onFocus="blnEdit = true" onBlur="blnEdit = false">Escriba una frase a la cual aplicar el efecto</textarea></td></tr> </table> </form> </body> </html> Para conocer más... Para conocer más sobre aplicaciones HTML mirá mis post anteriores: • Aprendé a programar aplicaciones HTML • Aprendé a programar aplicaciones HTML (2ª entrega) • Aprendé a programar aplicaciones HTML (3ª entrega) Espero que les haya gustado. Saludos.