Intro to Web Development: Using Dashcode as an Editor
You now know about the tools required to code and publish web pages, let’s look at one of them in particular: Dashcode.
You may know dashcode to be a really useful tool to create dashboard widgets – but what are dashboard widgets but miniature web pages. I’ve chosen this tool because it’s simple and free to download. Here is where you can find Dashcode:
Like Xcode, Dashcode is free to those who have an Apple Developer Connection membership. Go to http://developer.apple.com/mac/ and look at the paragraph at the top to sign up. You then can click log in. Once you are logged in, locate the download Xcode section halfway down the page. Yes I know it says Xcode, but Dashcode is bundled with it. Depending on your connection speeds, this might take a while. Open up the disk image “if it hasn’t already opened” and click on the Dashcode package installer.
In the Finder, create a new folder that will contain all of your web page’s files so that you can locate them in one convenient place. Now, download the following template.
This will be used as a template which you can use to start creating any web page with. Notice that it’s called “index.html” By default a web browser looks for a file with the name “index.html” to display first as your web site’s home page.
Once you’ve downloaded the file, drag it onto Dashcode’s icon. Be sure to also double click the file in the finder so that it opens up in your default web browser.
Switch over to Dashcode. Notice how Dashcode automatically formats the code giving different “tags” a specific color. Dashcode, as well as many web development apps these days, does this making it easier for you to parse through your code. Double click on a red tag and hit the escape key. Notice the Dashcode brings down a popup menu with a list of tags in it. This is a way that Dashcode helps you so that you don’t need to remember every single aspect of HTML. This is known as auto completion. Don’t worry if you don’t understand any of the code we’ve typed so far or any of the suggestions that Dashcode is giving in the auto completion feature, We’re going to delve into HTML and all of it’s glory in the next installment.
Dashcode is a very easy to use program. Though it is mainly used for developing widgets, Dashcode’s built in features like auto-coloring specific tags, and the popup menu that helps suggest the correct HTML syntax, are useful in any form of developing for the web – and best of all, it’s free! Unfortunately Dashcode won’t allow you to create your own HTML files without them being part of a widget BUT because this series implements example files, you won’t need to worry about creating them from scratch. Stay tuned for our next installment which will talk about Hyper Text Markup Language or HTML for short.
The template download is busted…. darn, I was hoping to try this out!
This seems interesting. Looking forward to the series.
@APG: The template works, you just have to right click the link and click “Save Linked File As…”
@ Steven: Thank you for the hint!
I second that @ Steven. Thanks. Now for some fun!
@ Steven: the link isn’t working now. When I use “Save Linked File As…”, it saves the HTML for “Page Not Found | MacApper”. What was the point of the template?
I can’t seem to find a good example on how to consume data from a web service. I want to be able to input one variable and return the data based on that input.