building your own website
Post on 13-Sep-2014
2.739 views
DESCRIPTION
Presentation given October, 2008, to the Portland (Oregon) Macintosh User Group by Allen Watson, PMUG member and officer.TRANSCRIPT
Building Your Own Website
a survey of available toolsby Allen Watson
Tuesday, February 9, 2010
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Tuesday, February 9, 2010
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Tuesday, February 9, 2010
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Tuesday, February 9, 2010
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Tuesday, February 9, 2010
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Tuesday, February 9, 2010
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Tuesday, February 9, 2010
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Tuesday, February 9, 2010
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Web Host Computer
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Tuesday, February 9, 2010
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Web Host Computer
Your website
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Tuesday, February 9, 2010
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Web Host Computer
Your website
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Tuesday, February 9, 2010
FTP access
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Web Host Computer
Your website
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Tuesday, February 9, 2010
FTP access
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Web Host Computer
Your website
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Tuesday, February 9, 2010
FTP access
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Web Host Computer
Your website
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Tuesday, February 9, 2010
FTP access
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Web Host Computer
Your website
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Programs like Fetch,
Transmit, Coda, CyberDuck
Tuesday, February 9, 2010
FTP access
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Web Host Computer
Your website
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Programs like Fetch,
Transmit, Coda, CyberDuck
Tuesday, February 9, 2010
FTP access
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Web Host Computer
Your website
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Programs like Fetch,
Transmit, Coda, CyberDuck
Tuesday, February 9, 2010
FTP access
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Web Host Computer
Your website
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Programs like Fetch,
Transmit, Coda, CyberDuck
Tuesday, February 9, 2010
FTP access
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Web Host Computer
Your website
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Programs like Fetch,
Transmit, Coda, CyberDuck
Tuesday, February 9, 2010
FTP access
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Web Host Computer
Your website
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Programs like Fetch,
Transmit, Coda, CyberDuck
Tuesday, February 9, 2010
FTP access
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Web Host Computer
Your website
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Programs like Fetch,
Transmit, Coda, CyberDuck
Tuesday, February 9, 2010
FTP access
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Web Host Computer
Your website
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Programs like Fetch,
Transmit, Coda, CyberDuck
Tuesday, February 9, 2010
FTP access
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Web Host Computer
Your website
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Programs like Fetch,
Transmit, Coda, CyberDuck
Tuesday, February 9, 2010
FTP access
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Web Host Computer
Your website
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Programs like Fetch,
Transmit, Coda, CyberDuck
Tuesday, February 9, 2010
FTP access
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Web Host Computer
Your website
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Programs like Fetch,
Transmit, Coda, CyberDuck
Tuesday, February 9, 2010
FTP access
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Web Host Computer
Your website
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Programs like Fetch,
Transmit, Coda, CyberDuck
Browsers like
Safari
Tuesday, February 9, 2010
FTP access
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Web Host Computer
Your website
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Programs like Fetch,
Transmit, Coda, CyberDuck
Browsers like
Safari
Tuesday, February 9, 2010
FTP access
Website Maintenance
Your Hard Drive
HTML, PHP,
images, etc.
Your Mac
Web Host Computer
Your website
USERS OF YOUR SITE
Programs like Dreamweaver, BBEdit,
iWeb, Photoshop (Elements), Graphic
Converter
Programs like Fetch,
Transmit, Coda, CyberDuck
Browsers like
Safari
Tuesday, February 9, 2010
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.
Tuesday, February 9, 2010
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><p>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.</p><p><em>Now</em> is <strong>really</strong> the time for all good people to help.</p><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>
Tuesday, February 9, 2010
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: <b>, <i> 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.
Tuesday, February 9, 2010
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
Tuesday, February 9, 2010
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
Tuesday, February 9, 2010
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)
Tuesday, February 9, 2010
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.
Tuesday, February 9, 2010
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
Tuesday, February 9, 2010
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.
Tuesday, February 9, 2010
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.
Tuesday, February 9, 2010
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)
Tuesday, February 9, 2010
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.
Tuesday, February 9, 2010
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.
Tuesday, February 9, 2010
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.
Tuesday, February 9, 2010
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.
Tuesday, February 9, 2010
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.
Tuesday, February 9, 2010
Cheap SoftwareHyperEdit (25.00)Taco HTML (24.95)PageSpinner (29.95)
CSSEdit (29.95)Transmit (29.95)
RapidWeaver (49.95)Sandvox (basic, $49)
Tuesday, February 9, 2010
Free SoftwareText Wrangler
TextEditCyberDuck
SEEdit Maxi 2008 (promising; crashes)Special tools: XAMPP. meaning cross-platform,
Apache, MySQL, PHP, Perl
Tuesday, February 9, 2010
Questions?
Tuesday, February 9, 2010