Building Your Own Website

1. Building Your Own Website a survey of available tools by Allen Watson Tuesday, February 9, 2010

2. Website Maintenance Your Hard Drive HTML, PHP, images , etc. Tuesday, February 9, 2010

3. Website Maintenance Your Mac Your Hard Drive HTML, PHP, images , etc. Tuesday, February 9, 2010

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

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. 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. 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. 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. 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. 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. 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. 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. 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. 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> Tuesday, February 9, 2010

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: , 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. 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. 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. 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. Goodpage Unique, full-ﬂedged 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. BBEdit Plain text editor—high Previews web power ﬁnd/replace pages HTML Editor with Scriptable prompts Processes groups CSS Editor with of ﬁles prompts $125 FTP Editor to access remote site Tuesday, February 9, 2010

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. 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. 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. 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 ﬁles into projects. Color coding; great code completion, shortcuts, foldable code blocks. Can be external editor for FTP programs. Tuesday, February 9, 2010

41. StyleMaster: a CSS editor. Great for doing lots of CSS styling, ﬁne 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. 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. Limitations of iWeb, Sandvox, RapidWeaver, Freeway These programs save your site in a proprietary database format. They cannot read HTML or PHP ﬁles; 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. 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. 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. 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. Questions? Tuesday, February 9, 2010

Building Your Own Website

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Building Your Own Website

Ähnlich wie Building Your Own Website (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Building Your Own Website