Building Your Own
                                 Website
                              a survey of available tools
     ...
Website Maintenance

            Your Hard Drive

                HTML,
                  PHP,
                images
    ...
Website Maintenance
                                Your
                                Mac
            Your Hard Drive

...
Website Maintenance
                                Your
                                Mac
            Your Hard Drive

...
Website Maintenance
                                Your
                                Mac
            Your Hard Drive

...
Programs like
                            Website Maintenance
    Dreamweaver, BBEdit,
       iWeb, Photoshop          You...
Programs like
                            Website Maintenance
    Dreamweaver, BBEdit,
       iWeb, Photoshop          You...
Programs like
                            Website Maintenance
    Dreamweaver, BBEdit,
       iWeb, Photoshop          You...
Programs like
                            Website Maintenance
    Dreamweaver, BBEdit,
       iWeb, Photoshop          You...
Programs like
                            Website Maintenance
    Dreamweaver, BBEdit,
       iWeb, Photoshop          You...
Programs like
                            Website Maintenance
    Dreamweaver, BBEdit,
       iWeb, Photoshop          You...
Programs like
                            Website Maintenance
    Dreamweaver, BBEdit,
       iWeb, Photoshop          You...
Programs like
                            Website Maintenance
    Dreamweaver, BBEdit,
       iWeb, Photoshop          You...
Programs like
                            Website Maintenance
    Dreamweaver, BBEdit,
       iWeb, Photoshop          You...
Programs like
                            Website Maintenance
    Dreamweaver, BBEdit,
       iWeb, Photoshop            Y...
Programs like
                            Website Maintenance
    Dreamweaver, BBEdit,
       iWeb, Photoshop            Y...
Programs like
                            Website Maintenance
    Dreamweaver, BBEdit,
       iWeb, Photoshop            Y...
Programs like
                            Website Maintenance
    Dreamweaver, BBEdit,
       iWeb, Photoshop            Y...
Programs like
                            Website Maintenance
    Dreamweaver, BBEdit,
       iWeb, Photoshop            Y...
Programs like
                            Website Maintenance
    Dreamweaver, BBEdit,
       iWeb, Photoshop            Y...
Programs like
                            Website Maintenance
    Dreamweaver, BBEdit,
       iWeb, Photoshop            Y...
Programs like
                            Website Maintenance
    Dreamweaver, BBEdit,
       iWeb, Photoshop            Y...
Programs like
                            Website Maintenance
    Dreamweaver, BBEdit,
       iWeb, Photoshop            Y...
Programs like
                            Website Maintenance
    Dreamweaver, BBEdit,
       iWeb, Photoshop            Y...
Programs like
                            Website Maintenance
    Dreamweaver, BBEdit,
       iWeb, Photoshop            Y...
Programs like
                            Website Maintenance
    Dreamweaver, BBEdit,                                Brow...
Programs like
                            Website Maintenance
    Dreamweaver, BBEdit,                                Brow...
U
                                                                   S


        Programs like
                           ...
Flow of creating a web
                               page
                            Create an HTML file         Repeat fi...
Simple HTML page
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
               "http://www.w3.org/T...
Adding CSS
                                 (Cascading Style Sheets)
              HTML (HyperText Markup Language) is int...
Varieties of Website
                              Editing Software
                            WYSIWYG do-it-all       CS...
How We’ll Proceed

                            Starting with most expensive, short demos

                            Mode...
Expensive Software:
                              More than $100
                           Goodpage (99.00)
             ...
Goodpage
                            Unique, full-fledged editor. Handles HTML,
                            CSS, does previ...
BBEdit
                            Plain text editor—high     Previews web
                            power find/replace  ...
Freeway Express and
                                Freeway Pro
                            Express not recommended; uses ...
Adobe Dreamweaver and
                     Creative Suite
                            CS3 or CS4 has a        Dreamweaver ...
Moderately-priced
                            Software: $50—$100
                               Photoshop Elements (89.99)...
Moderately Priced

                            Photoshop Elements v6: Photo editing for
                            advanc...
StyleMaster: a CSS editor. Great for doing
                            lots of CSS styling, fine tuning, debugging.
       ...
Sandvox: Similar to iWeb, but with more
                            than twice as many themes, and capable of
            ...
Limitations of iWeb,
                      Sandvox, RapidWeaver,
                             Freeway
These programs save ...
MY COMPUTER CRASHED!

                I had notes written up on the cheap and free
             software, but my computer ...
Cheap Software
                              HyperEdit (25.00)
                              Taco HTML (24.95)
           ...
Free Software
                           Text Wrangler
                              TextEdit
                            ...
Questions?


Tuesday, February 9, 2010
Upcoming SlideShare
Loading in …5
×

Building Your Own Website

2,293 views

Published on

Presentation given October, 2008, to the Portland (Oregon) Macintosh User Group by Allen Watson, PMUG member and officer.

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,293
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
18
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Building Your Own Website

  1. 1. Building Your Own Website a survey of available tools by Allen Watson Tuesday, February 9, 2010
  2. 2. Website Maintenance Your Hard Drive HTML, PHP, images , etc. Tuesday, February 9, 2010
  3. 3. Website Maintenance Your Mac Your Hard Drive HTML, PHP, images , etc. Tuesday, February 9, 2010
  4. 4. Website Maintenance Your Mac Your Hard Drive HTML, PHP, images , etc. Tuesday, February 9, 2010
  5. 5. Website Maintenance Your Mac Your Hard Drive HTML, PHP, images , etc. Tuesday, February 9, 2010
  6. 6. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, PHP, images , etc. Tuesday, February 9, 2010
  7. 7. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, PHP, images , etc. Tuesday, February 9, 2010
  8. 8. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, PHP, images , etc. Tuesday, February 9, 2010
  9. 9. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, Web Host PHP, Computer images , etc. Tuesday, February 9, 2010
  10. 10. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, Web Host PHP, Computer images Your website , etc. Tuesday, February 9, 2010
  11. 11. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, Web Host PHP, Computer images Your website , etc. Tuesday, February 9, 2010
  12. 12. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website , etc. Tuesday, February 9, 2010
  13. 13. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website , etc. Tuesday, February 9, 2010
  14. 14. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website , etc. Tuesday, February 9, 2010
  15. 15. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
  16. 16. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
  17. 17. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
  18. 18. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
  19. 19. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
  20. 20. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
  21. 21. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
  22. 22. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
  23. 23. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
  24. 24. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
  25. 25. Programs like Website Maintenance Dreamweaver, BBEdit, iWeb, Photoshop Your (Elements), Graphic Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
  26. 26. Programs like Website Maintenance Dreamweaver, BBEdit, Browsers iWeb, Photoshop Your like (Elements), Graphic Safari Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
  27. 27. Programs like Website Maintenance Dreamweaver, BBEdit, Browsers iWeb, Photoshop Your like (Elements), Graphic Safari Converter Mac Your Hard Drive HTML, FTP Web Host access PHP, Computer images Your website Programs like , etc. Fetch, Transmit, Coda, CyberDuck Tuesday, February 9, 2010
  28. 28. U S Programs like Website Maintenance E R Dreamweaver, BBEdit, Browsers S iWeb, Photoshop Your like (Elements), Graphic Safari Converter Mac O Your Hard Drive F HTML, FTP Web Host access Y PHP, Computer O images Your website U Programs like R , etc. Fetch, Transmit, Coda, CyberDuck S I T E Tuesday, February 9, 2010
  29. 29. Flow of creating a web page Create an HTML file Repeat first four locally steps until satisfied. Possibly test it locally Upload file to host Test in multiple browsers Tuesday, February 9, 2010
  30. 30. 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
  31. 31. 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
  32. 32. Varieties of Website Editing Software WYSIWYG do-it-all CSS-only editors: editors such as Adobe StyleMaster, CSSEdit Dreamweaver HTML-only editors: Partial display, Page HyperEdit Spinner Plain text like Color-coded text like TextEdit TextMate and Coda Tuesday, February 9, 2010
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. BBEdit Plain text editor—high Previews web power find/replace pages HTML Editor with Scriptable prompts Processes groups CSS Editor with of files prompts $125 FTP Editor to access remote site Tuesday, February 9, 2010
  37. 37. 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
  38. 38. Adobe Dreamweaver and Creative Suite CS3 or CS4 has a Dreamweaver edits web design suite; HTML, CSS, main web editor is Javascript. WYSIWYG Dreamweaver. interface. Photoshop edits Sophisticated tools. photos; Fireworks does other images; Steep learning curve Flash does animation. but worth it if you Can be purchased are going to create separately. many web pages. Tuesday, February 9, 2010
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. Limitations of iWeb, Sandvox, RapidWeaver, Freeway These 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
  44. 44. 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
  45. 45. Cheap Software HyperEdit (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
  46. 46. Free Software Text Wrangler TextEdit CyberDuck SEEdit Maxi 2008 (promising; crashes) Special tools: XAMPP. meaning cross-platform, Apache, MySQL, PHP, Perl Tuesday, February 9, 2010
  47. 47. Questions? Tuesday, February 9, 2010

×