Wednesday, May 14, 2008

Exploring Coda - A Tutorial I Built Using ScreenSteps

I built this tutorial using ScreenSteps, a wonderful documentation builder on my Mac.  You can also view this lesson at my ScreenSteps Live page.




Exploring Coda






Site Management




Site Management - if you were building multiple sites, you could manage all of them from this view.





Site Management Detailed




Here is where you actually manage the basics of the site - connectivity, etc.





Edit Mode




One-click access to all of your code. Browse to the left and edit in the main frame.





Instant Preview




Simply click back and forth between code and preview to see your changes instantly.





CSS Editor




You can build each of your CSS styles using this simple builder and get a preview of each style immediately. This tool basically references all styles that are shown on the doc that is currently being edited - HTML or CSS. The style navigator even shows you color and text changes as they will appear on your page.





More CSS








Terminal




Built-in SSH terminal.





Books




Built-in reference library. Amazing.





Books Detailed




Drill down into a book to find all of the elements that you may want to work with.








Pick an element and fully explore the usage complete with examples. Note the crumbtrail nav on the bottom. Nice touch.





Manage Assets




Browse and manage all of your site's assets.








Use the function browser to find each of the javascript functions that are contained within your page or js library.








Programming language hints as you type.





Page Element Browser




Click on each page element to browse and select each one within the page.





Clips




A HUD browser of all relevant clippings to paste directly into your page. Think of this as your clipboard that you can actually manage. Core Animation used here - when you click on the i button, the pane actually flips over to reveal more info about that particular clip.





No comments:

Search This Blog