Building Your Own Website

Building Your Own Website

a survey of available toolsby Allen Watson

Tuesday, February 9, 2010

Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.


Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac


Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac


Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac


Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac

Programs like Dreamweaver, BBEdit,

iWeb, Photoshop (Elements), Graphic

Converter


Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac



Converter


Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac



Converter


Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac

Web Host Computer



Converter


Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac

Web Host Computer

Your website



Converter


Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac

Web Host Computer

Your website



Converter


FTP access

Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac

Web Host Computer

Your website



Converter


FTP access

Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac

Web Host Computer

Your website



Converter


FTP access

Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac

Web Host Computer

Your website



Converter


FTP access

Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac

Web Host Computer

Your website



Converter

Programs like Fetch,

Transmit, Coda, CyberDuck


FTP access

Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac

Web Host Computer

Your website



Converter




FTP access

Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac

Web Host Computer

Your website



Converter




FTP access

Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac

Web Host Computer

Your website



Converter




FTP access

Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac

Web Host Computer

Your website



Converter




FTP access

Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac

Web Host Computer

Your website



Converter




FTP access

Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac

Web Host Computer

Your website



Converter




FTP access

Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac

Web Host Computer

Your website



Converter




FTP access

Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac

Web Host Computer

Your website



Converter




FTP access

Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac

Web Host Computer

Your website



Converter




FTP access

Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac

Web Host Computer

Your website



Converter




FTP access

Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac

Web Host Computer

Your website



Converter



Browsers like

Safari


FTP access

Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac

Web Host Computer

Your website



Converter



Browsers like

Safari


FTP access

Website Maintenance

Your Hard Drive

HTML, PHP,

images, etc.

Your Mac

Web Host Computer

Your website

USERS OF YOUR SITE



Converter



Browsers like

Safari


Flow of creating a web page

Create an HTML file locally

Possibly test it locally

Upload file to host

Test in multiple browsers

Repeat first four steps until satisfied.


Simple HTML page<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>PMUG Sample Page</title> <meta name="generator" content="BBEdit 9.0" /></head><body>

<h1>This is a heading</h1>Now is the time for all good men to come to the aid of their Mac User Group.

Notice that I have a blank line in the source code. Browsers will ignore the blank line, and even multiple spaces, and treat them as a single space. To get a new paragraph,

you must have a "p" tag.Now is really the time for all good people to help.<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li><ul><li>subitem 1</li><li>subitem 2</li></ul></ol></body></html>


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

http://www.w3.org/1999/xhtml

http://www.w3.org/1999/xhtml

Adding CSS(Cascading Style Sheets)

HTML (HyperText Markup Language) is intended mostly for describing content: identifying headings, paragraphs, lists, etc.

CSS (Cascading Style Sheets) is intended to describe the design or appearance of the content: font, color, background, placement. (demo)

HTML originally did some of this: , are examples. CSS allows you to describe many aspects of an element like a paragraph or a particular class of paragraphs, to describe it one time, and then have it automatically applied to every instance.

More than this is not the purpose of this talk, so I’ll stop here with a simple example.


Varieties of Website Editing Software

WYSIWYG do-it-all editors such as Adobe Dreamweaver

Partial display, Page Spinner

Color-coded text like TextMate and Coda

CSS-only editors: StyleMaster, CSSEdit

HTML-only editors: HyperEdit

Plain text like TextEdit


How We’ll Proceed

Starting with most expensive, short demos

Moderately expensive, longer demos of favorites

Inexpensive software, quick demos, discussions of shortcomings

Free software, quick demos


Expensive Software: More than $100

Goodpage (99.00)BBEdit (125.00)

Freeway Express & Freeway Pro ($79/$249)Adobe CS3/4 Suite (1,699.00 or 1,799.00)

Dreamweaver (399.00)Fireworks (299.00)Photoshop (649.00)

Flash (699.00)Contribute (169.00)


Goodpage

Unique, full-fledged editor. Handles HTML, CSS, does preview, shows structural view of a page.

Major drawback: no documentation. Vendor claims it is so intuitive that documentation isn’t necessary.

Worth a look-see; seems like great value for the price.


BBEdit

Plain text editor—high power find/replace

HTML Editor with prompts

CSS Editor with prompts

FTP Editor to access remote site

Previews web pages

Scriptable

Processes groups of files

$125


Freeway Express and Freeway Pro

Express not recommended; uses coding techniques considered outmoded in today’s market (tables for positioning, versus CSS)

Freeway Pro: King of the “easy creation” tools; works like a page layout program. But expensive. Uses proprietary database, can’t read HTML.


Adobe Dreamweaver and Creative Suite

CS3 or CS4 has a web design suite; main web editor is Dreamweaver. Photoshop edits photos; Fireworks does other images; Flash does animation. Can be purchased separately.

Dreamweaver edits HTML, CSS, Javascript. WYSIWYG interface. Sophisticated tools.

Steep learning curve but worth it if you are going to create many web pages.


Moderately-priced Software: $50—$100

Photoshop Elements (89.99)TextMate (57.55 [39 Euros])

StyleMaster (59.95)Coda (79.00)

iWeb (79.00, part of iLife ‘08; may come installed on some Macs)

Sandvox Pro ($79)


Moderately Priced

Photoshop Elements v6: Photo editing for advanced non-professional (above iPhoto level). We had a demo not long ago.

TextMate: Superb editor for text and all kinds of code, HTML, CSS, PHP. Organize files into projects. Color coding; great code completion, shortcuts, foldable code blocks. Can be external editor for FTP programs.


StyleMaster: a CSS editor. Great for doing lots of CSS styling, fine tuning, debugging. WestCiv, the vendor, has super CSS tutorial.

Coda: Combines HTML, CSS editors, Preview, and FTP in one window. My favorite app!

iWeb: WYSIWYG editor; great integration with Mobile Me (Dot Mac), one button publishing. Can also publish to local disk. Easy but limited. (Includes iPhoto, iDVD, iMovie, Garage Band.) Uses templates for fast development.


Sandvox: Similar to iWeb, but with more than twice as many themes, and capable of fancier editing. Advise Pro version; allows insertion and editing of raw HTML. Able to publish directly to remote site. Include Google tools and analytics. My preferred “easy creation” tool.


Limitations of iWeb, Sandvox, RapidWeaver,

FreewayThese programs save your site in a proprietary database format. They cannot read HTML or PHP files; they can only output them. So you cannot use them to edit existing websites; you can only use them to create new sites.

Any changes made with external editors like TextMate, Coda, or BBEdit have to be made every time you export the site from the database to HTML.


MY COMPUTER CRASHED!

I had notes written up on the cheap and free software, but my computer crashed 20 minutes

before I had to stop working on this presentation!! Oh, well!

I’ve got the basics in my head, so bear with me.


Cheap SoftwareHyperEdit (25.00)Taco HTML (24.95)PageSpinner (29.95)

CSSEdit (29.95)Transmit (29.95)

RapidWeaver (49.95)Sandvox (basic, $49)


Free SoftwareText Wrangler

TextEditCyberDuck

SEEdit Maxi 2008 (promising; crashes)Special tools: XAMPP. meaning cross-platform,

Apache, MySQL, PHP, Perl


Questions?

Technology

Building Your Own Website