<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Hakkura: &#187; HTML</title>
	<atom:link href="http://www.aterism.com/code/tag/html/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.aterism.com/code</link>
	<description>Of Code Snippets And Tutorials</description>
	<lastBuildDate>Tue, 01 Jun 2010 16:32:20 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Titanium: Starting Your Project</title>
		<link>http://www.aterism.com/code/2009/04/titanium-starting-your-project/</link>
		<comments>http://www.aterism.com/code/2009/04/titanium-starting-your-project/#comments</comments>
		<pubDate>Thu, 09 Apr 2009 15:09:33 +0000</pubDate>
		<dc:creator>makkura</dc:creator>
				<category><![CDATA[Titanium]]></category>
		<category><![CDATA[Titanium Tutorials]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[webapp]]></category>

		<guid isPermaLink="false">http://www.aterism.com/code/?p=34</guid>
		<description><![CDATA[Starting Your Project There have been some articles written giving overviews of the Titanium Developer application. This is the application that helps you manage your Titanium projects, test code samples, and keep up with the Titanium community. This tutorial isn&#8217;t &#8230; <a href="http://www.aterism.com/code/2009/04/titanium-starting-your-project/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<h2>Starting Your Project</h2>
<p>There have been some articles written giving overviews of the Titanium Developer application.<br />
This is the application that helps you manage your Titanium projects, test code samples, and keep up with the Titanium community.<br />
This tutorial isn&#8217;t about the application so much as what is involved in making your application.<br />
For a more broad look at Titanium Developer check out the official screencast for PR3: <a href="http://www.vimeo.com/3930183">Titanium Developer &#8211; Preview Release 3 Features</a>.<br />
<strong>Notes:</strong> Due to a reload of the database the images for this section have been lost. The plugin handling toggling the subsections is also no longer in support. For now all divs are visible and no images are available.<br />
This is an old tutorial now so it will stay as is unless a request comes in.<br />
<span id="more-34"></span></p>
<h3>Installation / Upgrading: <a id="button_install" style="text-decoration: none;" onclick="wp_showhide('installation')">[+/-]</a></h3>
<div id="installation" style="display: block;">I&#8217;m going to assume you already have Titanium installed as a prerequisite.<br />
If not, visit www.titaniumapp.com/download/ and get the latest version.<br />
If you are running an older version and are upgrading, please delete the previous Titanium folders before doing so.<br />
The folders you need to remove are:<br />
<u>Windows</u> &#8211; C:\Documents and Settings\All Users\Application Data\Titanium  and  C:\Program Files\Titanium Developer<br />
<u>OS-X</u> &#8211; /Library/Application Support/Titanium and /Applications/Titanium Developer<br />
<u>Linux</u> &#8211; ./TitaniumApp, usually /home/user/TitaniumApp</div>
<h3>Project Creation: <a id="button_creation" style="text-decoration: none;" onclick="wp_showhide('creation')">[+/-]</a></h3>
<div id="creation" style="display: block;">Alright, you should be inside the Titanium Developer program after your installation finished or you went and opened it because you&#8217;re abit ahead fo the game here.<br />
If you&#8217;re looking at the listing of projects, hit the Create Project button, it is a small plus sign in a circle.<br />
If you&#8217;re looking a list of frameworks like JQuery and MooTools, you&#8217;re in the right place.</p>
<div id="attachment_96" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.aterism.com/code/wp-content/uploads/2009/04/project-list.jpg"><img class="size-full wp-image-96" title="project-list" src="http://www.aterism.com/code/wp-content/uploads/2009/04/project-list.jpg" alt="Project Listing" width="300" height="177" /></a><p class="wp-caption-text">Project Listing</p></div>
<div id="attachment_91" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.aterism.com/code/wp-content/uploads/2009/04/create.jpg"><img class="size-full wp-image-91" title="create" src="http://www.aterism.com/code/wp-content/uploads/2009/04/create.jpg" alt="Creating a Project" width="300" height="177" /></a><p class="wp-caption-text">Creating a Project</p></div>
<p>From here you want to select the additional tools you may want to use for your project.<br />
Just highlight want you want and hit Continue.<br />
Don&#8217;t fret too much! You can always add them later or add other libraries just like you would on a normal webpage.</p>
<p>The next page is your projects information.<br />
Fill it out and hit Create.<br />
It&#8217;s simple, I promise.</p>
<div id="attachment_92" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.aterism.com/code/wp-content/uploads/2009/04/create_details.jpg"><img class="size-full wp-image-92" title="create_details" src="http://www.aterism.com/code/wp-content/uploads/2009/04/create_details.jpg" alt="Creating a Project: Details" width="300" height="177" /></a><p class="wp-caption-text">Creating a Project: Details</p></div>
<p>The <i>Project Name</i> is the name of your application to be.<br />
This will also be used to help organize it by giving it a dedicated folder with a matching name.<br />
The <i>Project Description</i> is a summary of what your application is for or does.<br />
The <i>Publisher Name</i> is you or your company.<br />
The <i>Publisher URL</i> is your home page or your company&#8217;s home page.<br />
The <i>Project Location</i> is the local location to store your project&#8217;s folder. It has a standard browse button there next to it.<br />
The <i>Application Image</i> is the icon that will be used for your application. It aslo has a standard browse button next to it.</p>
<p>Got everything filled in and ready to go?<br />
Hit Create and we&#8217;ll move on.</p></div>
<h3>Adding Content: <a id="button_content" style="text-decoration: none;" onclick="wp_showhide('content')">[+/-]</a></h3>
<div id="content" style="display: block;">Alright, your project exists and you&#8217;re ready to add some code!<br />
Where do you do that?<br />
Well your project has its own folder so let&#8217;s go there and take a look.<br />
You&#8217;ll have to find this one yourself as you specified that directory when you were filling out the basic project information.<br />
Once you get there, take a look at the folder structure.</p>
<div id="attachment_94" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.aterism.com/code/wp-content/uploads/2009/04/file_structure.jpg"><img class="size-full wp-image-94" title="file_structure" src="http://www.aterism.com/code/wp-content/uploads/2009/04/file_structure.jpg" alt="File Structure of a Project" width="300" height="222" /></a><p class="wp-caption-text">File Structure of a Project</p></div>
<p>The main things to notice here are the &#8216;tiapp.xml&#8217;, the &#8216;dist&#8217; folder, and the &#8216;Resources&#8217; folder.<br />
The &#8216;tiapp.xml&#8217; file is filled with the information you filled in when creating your project but it also handles some window sizing and control material.<br />
You can see more information on it in my post: TiApp.xml &#8211; Some Detail On Defaults.</p>
<p>The &#8216;dist&#8217; folder will populate with data when you Package and Launch your project. It pretty much holds the local data for your project then.</p>
<p>The &#8216;Resources&#8217; folder is the most important thing for you here.<br />
It acts like your base web directory of a website.<br />
Remember how Titanium uses web languages, right?<br />
Well this is where it starts treating things like a website or webapp.</p>
<div id="attachment_95" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.aterism.com/code/wp-content/uploads/2009/04/file_structure_resources.jpg"><img class="size-full wp-image-95" title="file_structure_resources" src="http://www.aterism.com/code/wp-content/uploads/2009/04/file_structure_resources.jpg" alt="File Structure of a Project: Resources Folder" width="300" height="222" /></a><p class="wp-caption-text">File Structure of a Project: Resources Folder</p></div>
<p>Open it up and you&#8217;ll see an &#8216;index.html&#8217; file.<br />
The &#8216;index.html&#8217; file is the first file that is displayed when your application opens.<br />
<i>Note: The icon you chose for your application may be here as well. As of PR3 it appears your icon file may be linked to rather than copied to your Resources folder.</i></p>
<p>Understand this &#8216;Resources&#8217; directory is just base folder of a web site.<br />
That means you can add any content you want under this folder and get access to it just like you would in a normal website.<br />
Want to make a &#8216;js&#8217; folder for your javascript files? An &#8216;images&#8217; folder for your images? Go for it! Just remember to add &#8216;js/&#8217; or &#8216;images&#8217;/ to your path when referencing them.</p>
<p>Speaking of referencing to this folder, Titanium saves you some effort by making the &#8216;Resources&#8217; folder equivalent to &#8216;app://&#8217;.<br />
So your &#8216;images&#8217; folder above would be &#8216;app://images/&#8217; and your javascript files would be &#8216;app://js/&#8217;.<br />
Your index is &#8216;app://index.html&#8217; as well.</p>
<p>Open up that &#8216;index.html&#8217; file and take a peek inside.<br />
You&#8217;ll see it is a very basic webpage welcoming you to Titanium.<br />
Any frameworks that you chose to include when you created your project are also here.<br />
You can add more by adding them in the code here. Don&#8217;t worry you don&#8217;t have to add references or anything somewhere else. It&#8217;s all right here.<br />
Take a few moments to edit it, add in some custom text or your favorite feature.<br />
Need some inspiration? Try out a <a href="http://doc.titaniumapp.com/notification_tutorial">Notification Tutorial</a>.<br />
Save and close your editor.</p>
<div id="attachment_93" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.aterism.com/code/wp-content/uploads/2009/04/editor.jpg"><img class="size-full wp-image-93" title="editor" src="http://www.aterism.com/code/wp-content/uploads/2009/04/editor.jpg" alt="Index.html with default content" width="300" height="148" /></a><p class="wp-caption-text">Index.html with default content</p></div>
<h3>Testing Your Application: <a id="button_testing" style="text-decoration: none;" onclick="wp_showhide('testing')">[+/-]</a></h3>
<div id="testing" style="display: block;">#image: TiDev in project window with project selected</p>
<p>Back in the Titanium Developer application on the Projects tab your project should be listed along with any others you have started.<br />
Click its name to open up some details on it.<br />
Replacing the date next to the project name are a couple of icons.<br />
The minus sign will let you delete your project.<br />
The &#8216;box&#8217; icon will let you run or package your project for installation.<br />
Go ahead and click the box.</p>
<div id="attachment_100" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.aterism.com/code/wp-content/uploads/2009/04/project_packaging_options.jpg"><img class="size-full wp-image-100" title="project_packaging_options" src="http://www.aterism.com/code/wp-content/uploads/2009/04/project_packaging_options.jpg" alt="Project Package / Install / Launch Options" width="300" height="177" /></a><p class="wp-caption-text">Project Package / Install / Launch Options</p></div>
<p>You should be presented with some options:<br />
- Package and Launch<br />
- Run Application Installer<br />
- Package for Distribution</p>
<p>To test your application you&#8217;ll want to use Package and Launch.<br />
This will prepare your application to run and then run it so you can see it in action.<br />
Feel free to give it a whirl and see some of your code in action.</p>
<div id="attachment_109" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.aterism.com/code/wp-content/uploads/2009/04/running_app.jpg"><img class="size-full wp-image-109" title="running_app" src="http://www.aterism.com/code/wp-content/uploads/2009/04/running_app.jpg" alt="Simple Titanium App Running w/ Debugger" width="300" height="184" /></a><p class="wp-caption-text">Simple Titanium App Running w/ Debugger</p></div>
</div>
<h3>Packing for Distribution: <a id="button_packaging" style="text-decoration: none;" onclick="wp_showhide('packaging')">[+/-]</a></h3>
<div id="packaging" style="display: block;">If you followed the Testing Your Application section you&#8217;ll be in the right place to begin packing your application.<br />
If not, open up the Titanium Developer, go to the Projects tab, select your project, and push the box icon next to your project name.</p>
<div id="attachment_97" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.aterism.com/code/wp-content/uploads/2009/04/project_packaging_bundle.jpg"><img class="size-full wp-image-97" title="project_packaging_bundle" src="http://www.aterism.com/code/wp-content/uploads/2009/04/project_packaging_bundle.jpg" alt="Package for Distribution Options" width="300" height="177" /></a><p class="wp-caption-text">Package for Distribution Options</p></div>
<p>Here you are greeted with icons to select the platforms (OS-X, Windows, and Linux) to build the application for.<br />
Go ahead and at select one or more of them and we&#8217;ll move on.<br />
You can then choose if the Titanium runtime files will be bundled with your installer or downloaded when the installer is installing your application.<br />
The Network option is smaller and a good idea in case the user already has the runtime files.<br />
Since I&#8217;m just testing, I usually use the Bundled options even though it can be pretty large.</p>
<p>Below the basic Network /Bundled option is a listing of the different modules.<br />
You can choose to Exlude a module entirely, leave it downloadable on install, or bundle it.<br />
This will let you customize what is actually going with your application and is your best bet when you get to the point when you&#8217;re trying to make your installer a little smaller.<br />
Before you jump down to the Package button look down there for a little check box.<br />
See him? He&#8217;s there to let you make your application public in the cloud.<br />
If you check him and Package he&#8217;ll show up on the Apps tab and make your application easier for others to access.<br />
Once you&#8217;ve at least selected a general packaing method hit Package along the bottom.</p>
<div id="attachment_98" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.aterism.com/code/wp-content/uploads/2009/04/project_packaging_cloud.jpg"><img class="size-full wp-image-98" title="project_packaging_cloud" src="http://www.aterism.com/code/wp-content/uploads/2009/04/project_packaging_cloud.jpg" alt="Packaing Project: In Progress Cloud" width="300" height="177" /></a><p class="wp-caption-text">Packaing Project: In Progress Cloud</p></div>
<p>You will be packaged via the Titanium Cloud.<br />
You will see an animation with a cloud to show you it is packaing the application.<br />
When it is done you will be given a link to your application for each of the operating systems you chose.<br />
There is also a link to visit a page containing them all.</p>
<div id="attachment_99" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.aterism.com/code/wp-content/uploads/2009/04/project_packaging_downloads.jpg"><img class="size-full wp-image-99" title="project_packaging_downloads" src="http://www.aterism.com/code/wp-content/uploads/2009/04/project_packaging_downloads.jpg" alt="Packing Project: Finished - Download Options" width="300" height="177" /></a><p class="wp-caption-text">Packing Project: Finished - Download Options</p></div>
<p>Follow a link and grab your application.<br />
<strong>Congratulations on completing your application in Titanium!</strong></div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.aterism.com/code/2009/04/titanium-starting-your-project/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>About This Blog</title>
		<link>http://www.aterism.com/code/2009/04/hello-world/</link>
		<comments>http://www.aterism.com/code/2009/04/hello-world/#comments</comments>
		<pubDate>Tue, 07 Apr 2009 00:58:39 +0000</pubDate>
		<dc:creator>makkura</dc:creator>
				<category><![CDATA[Titanium]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[JQuery]]></category>
		<category><![CDATA[MooTools]]></category>
		<category><![CDATA[Ruby]]></category>

		<guid isPermaLink="false">http://www.aterism.com/code/?p=1</guid>
		<description><![CDATA[Initial plans for blog content: Titanium, Ruby, HTML, CSS, JavaScript, Python, and JavaScript frameworks: JQuery &#38; MooTools. <a href="http://www.aterism.com/code/2009/04/hello-world/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;">This blog is intended to provide interesting code snippets and tutorials for those that are interested.</p>
<p style="text-align: left;">The initial plans for content here involve: Titanium (<a title="www.titaniumapp.com" href="http://www.titaniumapp.com" target="_blank">www.titaniumapp.com</a>), Ruby (<a title="www.ruby-lang.org" href="http://www.ruby-lang.org" target="_blank">www.ruby-lang.org</a>), HTML(<a title="www.w3.org" href="http://dev.w3.org/html5/spec/Overview.html" target="_blank">www.w3.org</a>), CSS(<a title="http://www.w3.org/Style/CSS/" href="http://www.w3.org/Style/CSS/" target="_blank">www.w3.org</a>), JavaScript(<a title="https://developer.mozilla.org/en/JavaScript" href="https://developer.mozilla.org/en/JavaScript" target="_blank">developer.mozilla.org</a>), Python(<a title="http://www.python.org/" href="http://www.python.org/" target="_blank">www.python.org</a>), and various JavaScript frameworks according to whim including JQuery(<a title="http://jquery.com/" href="http://jquery.com/" target="_blank">www.jquery.com</a>) and MooTools(<a title="http://mootools.net/" href="http://mootools.net/" target="_blank">www.mootools.net</a>).</p>
<p style="text-align: left;">Why such a large range of tools?  Namely because Titanium can allow them all to work together in the same environment for huge amounts of flexability. Each of the languages listed here are things I have some experience with but I am not an expert in any of them. Hopefully something I find of interest to post here is of value to you, the reader.</p>
<p style="text-align: left;">-makkura</p>
]]></content:encoded>
			<wfw:commentRss>http://www.aterism.com/code/2009/04/hello-world/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
