Beginning Web Development on the Mac Today: most of what you need to know and download

I first started messing around with HTML in DreamWeaver and Claris Home Page around 1999 to put up my own music website. But it was not until the last couple years that I updated my skills and capabilities in web development. I would like to share what I have learned.

Hosting

First, you will need hosting. I use Host Gator‘s $10 a month plan. They have a custom implementation of CPanel, so it is really easy to add a domain, install and upgrade dozens of popular free and open source web apps like WordPress or Drupal with just a couple of clicks with Fantastico. It includes the LAMP stack (Linux OS, Apache web server, MySQL database, and PHP) which any worthwhile web hosting is going to provide, as well as Ruby on Rails. phpMyAdmin is also in important app that your hosting provider should have installed so you can easily manipulate, import, and export a MySQL databases without having to know sql query language.

MAMP

If you are not ready to up a website, that is fine. You can experiment with web development on your Mac. However, to match the functionality of a $10 a month web host, there are a lot of things you have to do first. Mac OS 10.5 includes PHP and Apache, you just need to turn them ob by editing some hidden files. Then you need to install MySQL. These steps can be a little daunting. And running these platforms natively on the Mac also requires some command lines (aka the Terminal app) which I don’t know much about (and when I am ready to learn I will probably get this book). Or, you could avoid all of this and use MAMP. It is Apache, MySQL, and PHP all running in one app, with MacOS (not Linix, but very similar) running as the OS, and a control panel to adjust functions instead of command lines. You can try MAMP out for free for a month, then buy it for $60. This will let you run apps like WordPress on your Mac while you do things like edit CSS themes or experiment with WordPress plugins. You can see what the pages will look like by visiting http://localhost:8888 in your browser.

PHP and MySQL

I do not know much about PHP yet, but I am able to do everything mentioned in this post without basic PHP or MySQL knowledge, since most of the apps I run were developed by someone else. I am just using them. Just because you can’t rebuild a car’s engine does not mean you can’t drive it or change a tire. But soon, I will get the book PHP and MySQL from O’Reilly’s Head First series, and I recommend it to anyone else who wants to go just a little further than the basics I am covering here.

Most data-driven web apps in PHP (blogs, wikis, mailing lists) need to connect to a MySQL database. Databases have:

  • a host address
    • usually it is “localhost” which is a MySQL database on the same server
    • or a domain name
    • or an IP address
  • a database name
  • a username for the database
  • a password

If you are not using an automated script like Fantastico to install your apps, you will need to create the database in your hosting provider’s control panel. You also need to make the user, and then assign the user to the database.

Next, (unless your are using the same automated script) you will need to configure the app to connect to the database. This is usually done by editing a file called config.php, settings.php, or database.php. If one of the pieces of info is wrong, the app will usually give you an error message. You can edit this on your server or before you upload it (more on this below). There are always install instructions that are included with these apps.

SequalPro

Sometimes, you might not have access to the control panel and phpMyAdmin for a web hosting provider you might come across, like one you are migrating a blog from. In this case, you will need a database client like SequalPro. It offers some of the same functions as phpMyAdmin, but it lives on your Mac, accessing a database on a web server. It is free, but you can make a donation to the author.

CSS

Cascading Style Sheets are what tell browsers how to make a page look. CSS files contain info on what fonts, graphic boxes, and colors to use, and how and where on the page they should be displayed. CSS allows you to easily change themes in WordPress, or easily make something ugly on a MySpace profile. CSS Garden is a good place to start, but I think the best way to learn is to experiment with hacking WordPress themes (more on this later). When you make edits to a CSS file you need to hit Refresh in your browser to see what the changes look like. It is also good to do this in more than on type of browser when you are finalizing your design. To make some killer designs, you will need Photoshop to edit image files, but you can get by with Gimp for free. Since IE6, IE7, and IE8 render CSS differently than Firefox and the other compliant browsers such as Opera, Safari, and Chrome, get familiar with IE’s conditional CSS comments.

TextWrangler

Almost all web files are text files, but with an extension so that browsers and servers know what to do with them (like .html, .php, .xml). So, you can edit most of these files with a text editor. The best free text editor for the Mac is TextWrangler. It will color code the different parts of your code so that you know which parts are marked up properly. There is a more feature-rich text editor, BBEdit, offered by the same company.

Transmit and FTP

In order to get files to your server, you need an FTP app (file transfer protocol) to upload files to your site. When you buy hosting, you will need to provide a domain name (which you can buy from a registrar like GoDaddy). The registrar will give you a DNS address. You need to put this address into your hosting provider’s control panel. This will allow you to connect to your server via FTP. In your FTP app, you will need to enter

  • a nickname for the ftp account access
  • your ftp address (sometimes ftp.yourdomain.com)
  • username
  • password

Once you are logged in, you can edit and upload text files, photos, mp3, etc.

A lot of Mac users Cyberduck for FTP, since it is free. But I like Trasnmit since the navigation is more Mac-like. You can open files on your server in Trasmit, edit them with TextWrangler, and save them back to the server. The experience is just like editing a file on your computer locally. Command-S saves the file to your server. You can run the demo version for about a month and then buy it for $30.

Firefox and add-ons

If you are only using Safari, you should start using Firefox for web development. You can still test in Safari, but Firefox will be one of your main tools. Since it is open source, it constantly being updated so that newly discovered bugs and be fixed, and so that new web standards can be implemented. There are many plugins available for it that make it easy for development. Firebug lets to see the CSS of an element of a page just by clicking on it, and let’s you change values (font size, colors, widths and heights, padding and margins) on the fly to see what the change looks like. Then you go into you text file and edit in the changes. You can also turn off any CSS property and instantly see what change this makes visually. This is really great when you are trying to edit a page behavior and you can’t figure out what is causing it, you can just start turning off properties. You can see page load times, and see which files are taking the longest time to load. Web Developer is a toolbar that re-sizes your browser to typical sizes that most people use, disable java script or caching, display image paths and dimensions, and a number of other things. If you are a visual person like I am, and need help visualizing divs within divs, you might like the View Source Chart plugin.

Parallels

Mac OS is great, but the one thing it does not do is run Internet Explorer 6/7/8 for Windows, each of which has bugs that make pages look and behave differently than Firefox. At this time Windows XP is running on 68% of the computers that access the web. But, if you have an Intel Mac and a Windows XP CD-ROM, you can run Parallels and install Windows XP. This is better than running BootCamp, since you can use Mac OS and Windows at the same time. Parallels runs Windows in its own app. Strip down the Windows installs so they do not bog down your Mac too much. You can run the full-featured demo version of Parallels for about a month, and then buy it for $80.

Each version of Internet Explorer makes changes to the Windows OS. Therefore, it is not possible to run more than one version of Windows on one virtual machine. You will want to have a virtual machine for each version of IE. That is fine, since there is no limit to the number of virtual machines that Parallels will let you have installed, and at no additional cost. This does mean you will need to install Windows at least 3 times within Parallels. On my first machine I have IE6 (this comes with Windows XP) and Netscape Navigator (just for kicks), and Multiples, an app that lets you run IE3, IE4.01, IE5, IE5.5, and IE6 all on the same machine and keep all of their quirks. On my second virtual Windows machine I have IE7, Firefox, Chrome, Opera, Safari and Flock. The rendering of Firefox and Flock are pretty much the same, and if things look and behave good in Firefox, it is usually the same for Opera, Chrome, and Safari. If things look good in Safari Mac, they will probably be ok in Safari Windows. On my third virtual Windows machine I have IE 8. If you are developing in MAMP, you can look at your sites in your Windows browsers by going to http://localhost:8888. (update: this does not work, see comments). Keep track of the month-to-month browser usage trends at WC3 Schools Browser Statistics page to know which browsers are most important to check. You can also install Ubuntu Linux as a virtual machine in case you have been curious about that and test your site with browsers in Linux if you feel inclined.

Google Analytics

This is a free service from Google that will tell you where your traffic is coming from, what pages are popular, the screen size, browser, and OS your visitors are using (so you can allocate testing resources mentioned above more efficiently).

WordPress

One of the most important things you can do to have a web presence is to have your own domain name. And from a marketing perspective, one of the most important things you should say on your site is what you are doing or thinking. The best way to do this is with a blog. And the blogging platform that is easiest to set up and use is WordPress. There are thousands of free WordPress themes to pick from, and with some practice, you can edit them pretty easily. There is a huge WordPress developer community that are creating plugins, themes, and can help you on the WordPress forums. Do you have a WordPress.com blog? You could host it on your own hosting and have more control over the look and feel. Here is a post that explains the difference between the two versions of WordPress: WordPress.com hosted and self-hosted. You can export WordPress blogs as XML files to go from any one WordPress host to any other. It does not matter where you chose to start, you can always move it very easily.

Drupal

If you need to make a website that is more than just a blog, Drupal is the way to go. Sites like MichaelJackson.com, Obama’s Recovery.org site, over 100 of Warner Brothers’ Record’s artist sites, and our own company site are just some sites using Drupal. Drupal is a free and open source content management framework bases mainly on nodes (pieces of content) and modules (custom plugins that let you do different things). There is pretty much a Drupal module (most are also free and open source) for any function or features you might need in a website. Just do a Google search for: drupal module [function you want]. Like: drupal module photos, drupal module ecommerce, or drupal module calendar. You can be on your way to a custom, functional website just by installing Drupal, uploading the modules and a theme via FTP to your site, and checking off some boxes in the admin, all while not needing to editing any code. If you want to be a web developer that can make real money by building websites which can later be maintained by the client, learning Drupal is a great investment of your time.

Get help from the Community

There are communities you can participate with for almost any question you might have regarding web development. I mentioned the WordPress forum above. You can also sign up at Drupal.org, or reach out to people on Twitter. You can join IRC chats for Drupal and WordPress using Colloquy IRC chat client. Please be patient when asking questions. There might be multiple channels for each platform. Make sure you are on the right channel by reading the channel descriptions. You can find channels by doing a Google search for: irc [name of subject]. There might be some high level discussions taking place. Don’t be too demanding. No one is obligated to help you. People only want to help nice people. Just hang out, read the discussions taking place, and learn. There might also be a local community of developers in your area. Search on Meetup, Facebook, or Upcoming for groups meeting in your area, or start one yourself. It is ok if you are not an expert. Woody Allen says “Eighty percent of success is showing up.” Donate money to any open source projects you would like to see continue.

Conclusion

So, for about $280 in software, along with all of the free and open source software, and many hours of reading and experimenting, you can start learning how to develop modern, data drive, interactive websites on your Intel based Mac.

MAMP $60
Parallels $80
Transmit $30
Windows XP on Ebay $100
First month of LAMP hosting $10

$280

Update:
Smashing Magazine has a great post on How to do web development on a Windows PC.

Do you need a web developer for a Drupal or WordPress project? A marketing strategist to manage your social media profiles, search ads, or SEO? Contact me here.

Related Articles:

    Be Sociable, Share!

    This entry was posted in Web Development and tagged , , , , , , , , , , , , . Bookmark the permalink.

    10 Responses to Beginning Web Development on the Mac Today: most of what you need to know and download

    1. Elena says:

      I thought this was excellent. I am still fairly new to developing but am pretty good with the front end. Your article helped me really get a better understanding of programs like Drupal and how it differs from WordPress. BTW, someday, I hope to get a Mac laptop. Still, this was a very well-written and informative article. Keep it up!

    2. Pingback: Posts about Open Source Software as of May 17, 2009

    3. Nick Dynice says:

      Thanks, Elena. Let me know if I can be of any further assistance ๐Ÿ™‚

    4. Thanks for the Parallels mention

    5. Matt says:

      Dude. The following is untrue!~
      “If you are developing in MAMP, you can look at your sites in your Windows browsers by going to http://localhost:8888
      You need to change heaps of geeky Server stuff in your windows directory to view locally. Unless you have an easier option??? I’d be glad to hear it. It sux.

    6. Nick Dynice says:

      @Matt,

      Yes, you are right. I discovered that the other day (should have updated this at that time). I must have been thinking of when I was developing on a public site. You could use the IP address shown in System Preferences > Sharing > Web Sharing with http:// your-local-ip-address:8888/directory name The local IP address will probably be 192.16.1.X where X is another number.

    7. Liz says:

      Hi Nick – Thanks for this article – very helpful. I have a MAC and am interested in getting Parallels to run IE 6/7/8, but do I need to purchase Windows XP, Vista, and 7 to accomplish this? Any help you can offer is much appreciated! Thanks.

    8. Nick Dynice says:

      Hi Liz.

      Windows XP will run IE6, IE7, and IE8. You will just need to install three differnt virtual machines since only one version of IE can be run in its original form per machine. There are no limits placed on Windows XP (or any other version) or Parallels regarding how many virtual machines you can have setup inside Parallels. You don’t need Vista or Windows 7. For now, XP is fine since it will run all three browsers. You will need to obtain a Windows install disc somehow.

    9. pablo says:

      I recommend free MySQL-manager for OSX – Valentina Studio, check it out if you havenโ€™t tried it yet: http://www.valentina-db.com/valentina-studio-overvie

    10. Rhea says:

      Excellent post. I used to be checking continuously this blog
      and I am impressed! Very helpful information specially the closing section ๐Ÿ™‚ I deal
      with such information a lot. I used to be seeking this certain information for a very long time.
      Thanks and best of luck.

    Leave a Reply

    Your email address will not be published. Required fields are marked *