Home Etiquetas Publicaciones etiquetada con "javascript"

javascript

La vez pasada hablamos de TideSDK una plataforma para desarrollar aplicaciones de escritorio con lenguajes de programación para web como HTML, JavaScript, PHP, Pyton, Ruby, Rails, incluso con gestores de datos como MySQL Ahora vamos a explicar como usar TideSDK para crear una aplicación de ejemplo sencilla: el clásico “Hola Mundo” que nos dará una idea básica-esencial de la configuración inicial de un proyecto. Primero necesitamos un IDE. TideSDK es un actualización ó continuación del SDK de Titanium Desktop, el cual ya no tiene soporte. Este dispone de un editor de código llamado Titanium Studio. Usaremos este IDE para cargar la API de TideSDK y trabajar con esta (Al parecer no es el único IDE para trabajar con el TideSDK, así que hablaremos de ello más adelante). Veamos:

Instalación y Configuracion de Titanium Studio

Descargar Titatium Studio: http://www.appcelerator.com/platform/titanium-studio. Luego de unos minutos de instalación, iniciar el IDE. Te pedirá iniciar sesión para lo cual tendrás que registrarte para usar Titanium Studio. Además, actualizará algunas SDK como por ejemplo para desarrollar aplicaciones móviles y Android, así que dejar que realice este proceso.

Ir al menu Help -> Install new software, clic en Add y en Location pegar esta url: http://preview.appcelerator.com/appcelerator/studio/desktop/update/beta/. Esta actualización permitirá a Titanium Studio agregar la caracteristica de desarrollar aplicaciones de escritorio (la cual nativamente ya no es soportada, por lo menos hasta nuevo aviso). Luego de la instalación, reiniciara el IDE.

repository

Instalar TideSDK

Ahora tenemos que instalar la API de TideSDK: https://github.com/TideSDK/TideSDK/downloads, seleccionar la versión de acuerdo a nuestro sistema operativo y descargar. Una vez descargado el zip (para nuestro caso trabajamos con la versión para Windows: desktopsdk-1.2.0.RC4-win32.zip ), ir al IDE darle clic en menu Help -> Install a Specific Titanium SDK y buscar el zip descargado y clic en Finish.

install sdk

Ahora tenemos configurado el IDE para crear aplicaciones de escritorio con HTML, CSS, PHP y más, para comprobarlo ir  menu File -> New-> Project. Buscar Titanium -> Titanium Desktop Project.

menu new

Clic en Next, en la siguiente pantalla podemos especificar datos del proyecto y ubicación de los archivos a usar. Asegurarse que en la opción Titanium SDK Versión, figure la versión del TideSDK que descargamos. Para este ejemplo 1.2.0.RC4.

show sdk

Mi primera aplicación

Ok, esta es la parte más sencilla 🙂 Clic en File -> New -> Project -> Titanium Desktop Project. En Project name escribimos: HelloWorld, en App Id escribimos:  com.sample.helloworld ó algo que identifique su aplicación. Clic en los módulos con los que se trabajará en este caso PHP. Clic en Finish.

project

Automaticamente carga la configuración del proyecto, la cual podemos modificar al gusto. Esta configuración se guarda en un archivo XML llamado tiapp.xml. Para ver el contenido de este, clic en pestaña de abajo donde dice tiapp.xml. Veremos que podemos configurar valores como el tamaño de la ventana; el archivo inicial a cargar; permitir botones maximizar, minimizar, cerrar; pantalla completa; etc.

xml file

En la parte izquierda, en el panel de Exploración de Proyectos, vemos nuestro proyecto HelloWorld contenida en una carpeta, desplegamos y notaremos la carpeta Resources que tambien desplegaremos. Allí irán todos nuestros archivos fuentes incluso otras carpetas.

Clic derecho en la carpeta Resources y agregamos un nuevo archivo New -> File. Escribimos index.php. Allí podemos probar con código PHP y HTML, como si fuera cualquier otro editor de código. Para el ejemplo ponemos los siguiente:

<html>
	<head>
	</head>
	<body style="background-color:#1c1c1c;margin:0">
		<h1>Hola Mundo</h1>
		<?php echo "Simple Sample"; ?>

	</body>
</html>

Ahora debemos configurar el archivo tiapp.xml que vimos anteriormente para que cuando inicie la aplicación lo haga con este archivo index.php y no con el index.html que es por defecto. Abrimos tiapp.xml vamos a la parte del código y buscamos la línea <url>app://index.html</url> y cambiamos el valor por index.php.

Ahora clic en el menú Run -> Run, esperamos que empaquete y mostrará nuestra primera aplicación.

sample finish

Bueno muy simple la aplicación ¿verdad? Mas adelante entraremos a mas detalles y más avanzado con otros lenguajes de programación como JavaScript e intentaremos conexiones a datos en MySQL.

Mas ejemplos | https://github.com/TideSDK

0 9751

El famoso accordion es un elemento perfecto para mostrar una galería de fotos con estilo. Gracias a jQuery y las hojas de estilo podemos implementar uno rapidamente. He aqui una recopilación de entre plugins y tutoriales sobre jQuery para desarrollar ó colocar nuestro propio acordeón de imagenes ó cualquier otro contenido. Indispensable tener a disposición una lista de recursos para nuestros proyectos.

zAccordion

zaccordion

liteAccordion

liteaccordion

JavaScript Accordion Menu Wizard

accordion menu

Tutorial: Colorido acordeón

accordion css jquery

Tutorial: Acordeón elegante

elegant accordion

jQuery Accordion

jq accordion

Tutorial: Easy Accordion

jquery easy accordion

jQuery Accordion Plugin

jquery plugin accordion

Vallenato Simple jQuery Accordion

vallenato

Tutorial: Accordion Madness

accordion

Tutorial: Como crear Accordion

tuto accordion

Tutorial: Acordeón Vertical

verticual sliding

Tutorial: Stupid Simple Accordion Menu

jquery stupid

Tutorial: Acordeón Grid con jQuery

grid accordion

Tutorial: Simple jQuery Accordion

simple accordion

SOCIAL

SOCIAL

0FansLike