How To: Program in any web language on your idevice

Dalorbi · January 9, 2013, 1:31am

@Zoyt PR0C0D1N6 will let anybody write HTML 5 canvas applications straight from their idevice. Its perfect for the new tutorials you’re writing

Ever wanted to program in a web language but didnt want to buy a specialised app, well i’ll show you how.

####Step 1:
Find your app of choice, a text editor that has an offline html viewer. The two apps i use are Kodiak for PHP and Koder.

####Step 2:
Make sure this app has a HTML viewer (that doesnt need to connect to internet) the best ones i’ve found are Kodiak for PHP, Koder and Textastic.

####Step 4:
if it has a html viewer then HTML 5 canvas is almost definately 100% supported. I say almost because well who knows what wierd apps there are that dont support html 5, if it ios supports html it should too but you never know. You may now program in HTML 5 Canvas

####Step 5:
Create a folder or a new Project called: Libraries, but dont put it in any other folder or project.

####Step 6:
This is the most time consuming step, taking between 2 and 5 minutes. Find the language you want to use, lets say… coffee-script on the internet. The file should be called something like coffee-script-1.5.1.js or coffee-script.js, From here continue with either step 6.25 or 6.50

####Step 6.25:
Copy the entire file and paste it into an empty file with exactly the same name, inside the folder “Libraries”, this is probabbly the least reliable and easiest way to do it

####Step 6.50:
Download the file and click open in: then click “name of app you’re using in my case Koder” it will then open the coffee-script file inside your app, move the file to the folder “Libraries”

####Step 7:
create a folder called HTML (or whatever you want) and create your HTML file there, put the collowing code inside the head of your HTML Code <script src="../Libraries/coffee-script.js"></script>

####Step 8:
Whenever you want use some coffeescript code in your html add the line <script type="text/coffee-script"> to start it and </script>
or if you want to have your code in a different file use <script type="text/coffee-script" src="nameofcoffeefile.js"> if the path is in a different folder type ../path/to/file.js

####Step 9:
Enjoy

####Tips:

I dont use Kodiak for PHP as much because it gives me PHP syntax highlighting even when i want anything else but its the better developed app
to Open the html viewer in Koder tap the eye button in the toolbar whilst a HTML file is open
if you’re in a a folder inside a folder and you want you will have to type another set of …/, e.g. …/…/path/to/file, and if you’re in a folder in a folder in a folder you will have three sets of …/ e.g. …/…/…/path/to/file,
if you want to have an external file containing your scripts and the file is inside a folder in your current folder type ./path/to/file.js doesnt matter how deep as long as its in a folder that is in your current folder just use one dot.

Dalorbi · January 9, 2013, 11:10am

Nothing? is it because of a bad step? If so let me know.

Zoyt · January 9, 2013, 1:03pm

Good job! Those are good instructions to start a basic canvas app. To find the full file structure and files, go here:
http://codeatohtml5.site44.com/resources/Lessons/Lesson1/TemplateFile.zip

Bri_G · January 10, 2013, 6:42am

Hi @Dalorbi,

Downloaded PR0C0D1NG to my pad and ran the demos - impressive. So I tried to look up support for PR0C0D1NG on the internet, can’t find anything.

update - finally found a forum:

http://www.audiocommander.de/blog/forums/forum/procoding/

Going to play now - just a bit concerened about making directories for libraries - is this from within the app or using iexplorer (or similar)?

Thanks,

Bri_G

Dalorbi · January 10, 2013, 8:02am

@Bri_G I meant create from within the app itself, but you can use iexplorer to create the file in the documents section of the app, it works,
I actually found a way to download the libraries without copy paste

####Step 1:
Download: MyMedia it’s the one with the blue download icon

####Step 2:
Navigate to the let’s say Coffeescript website and scroll to near the bottom to the section called “text/coffeescript” Script Tags

####Step 3:
Hold the part that says: “(Download current version here, 39k when gzipped)” it’s underlined so it’s a link, wait till the popup says download file click the big red download file button and when it asks for a name type: coffee-script.js

####Step 4:
When finished downloading go to the others section and Click the blue arrow then click open in, choose “insert the name of the app your going to use in this case koder”

Fcrick · January 11, 2013, 1:31am

If you like coffee script, check out typescript, a new design time language, a statically typed superset of JavaScript that compiles back to JavaScript. Typescriptlang.org has a cool demo, and the whole thing is open source, with the compiler in typescript. I’ve written a few small tools in it that use node.js and it’s just amazingly easy to use any existing JavaScript libraries out there. Was created by the same guy who made c#

corneliuhoffman · January 11, 2013, 3:55am

There is also a cofeescript app

Dalorbi · January 11, 2013, 5:12am

@corneliuhoffman, i presume you’re talking about coffescript at once, that app only let’s you use one HTML file, on CSS file and js file so I prefer koder for the multiple file allowance @Fcrick it looks a tad like oCanvas, (Currently my favourite HTML toy) could you outline, why it’s better than say Processing.js