HelpSpa » Web Development http://helpspa.com Computer Advice, Help. and Video Tutorials Thu, 12 Jan 2012 03:18:39 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Macs No Longer Ship with Flash Installed. Adobe Drops Mobile Flash. Is the End of Flash Near? http://helpspa.com/web_development/mac-no-longer-ship-with-flash-installed-is-the-end-of-flash-near/ http://helpspa.com/web_development/mac-no-longer-ship-with-flash-installed-is-the-end-of-flash-near/#comments Tue, 03 Jan 2012 18:23:20 +0000 David W http://helpspa.com/?p=2787 Mac no longer are going to be shipped with Flash installed and Adobe announced it’s no longer going to develop Flash for mobile platforms.  Does this spell the end for Flash? Maybe.  But not so fast…

Flash is Ubiquitous…

…but only on PCs.  And while Flash has an unbeatable share on the Windows platform, how long is it going to be until developers decide to find an alternative way to code their websites or applications so that they don’t have to do so twice?  We are already seeing a small erosion of Flash, IMHO, because iPhones and iPad simply don’t support the plugin. Now that Macs aren’t going to be shipped with Flash, it makes getting people to Flash content every so slightly more difficult.

What to Do?

In planning for the future I don’t think Flash will dissappear anytime soon.  But I do think over time we will start to see Flash replaced by HTML5 and other technology that will render across all devices.   So I will tell you what I tell my clients at least when it comes to website development.  Because Apple devices are basically going to be Flash-free, it’s critical that any important website content such as main navigation and contact information are displayed in an alternative format.

Conclusion

Flash is awesome for making a website interactive.  But with a host of other excellent tools already available and coming down the pipe, I have a hard time thinking that much new development is going to be done for Flash simply due to the fact that mobile devices will no longer support the product.  If Adobe won’t back Flash on the mobile platform, developers are going to find other ways to get things done.  So does this spell the end of Flash?  Yes. In the future.  But not anytime soon.

 

 

]]> http://helpspa.com/web_development/mac-no-longer-ship-with-flash-installed-is-the-end-of-flash-near/feed/ 0 How to Find a List of WordPress Category IDs – 2011 – in under 5 minutes! http://helpspa.com/featured-articles/how-to-find-the-list-of-wordpress-category-ids-2011-in-under-5-minutes/ http://helpspa.com/featured-articles/how-to-find-the-list-of-wordpress-category-ids-2011-in-under-5-minutes/#comments Fri, 07 Oct 2011 17:39:15 +0000 David W http://helpspa.com/?p=2647 There are a lot of way out there to try to find a list of the WordPress category IDs, but sometimes a simple, barebones approach is the easiest way.  Let’s take a look at how to find your WordPress category ID’s in around 5 minutes.

A. Get into phpMyAdmin

1. If you are running WordPress then you have a database, and thus you have a way to access your database.  For most of us this method is by using phpMyAdmin.  If you are using cPanel then simply navigate to phpMyAdmin.   If you are using  a different control panel, ask you hosting provider.

B. Find the WordPress Table that Lists the Category IDs

2. Once you are in phpMyAdmin (or your database browsing client), look for your WordPress database.  It’s the database you created when you first installed WordPress (and if you didn’t install WP on your own, look for a database that starts with “WP” or has “WP” in it.

3. Click on this database name and you will now see a list of tables on the left side of the screen (in phpMyAdmin).  The picture below shows the list (with my DB name blurred out):

4. Click on the “wp_terms” table.  You will see the tabs on the right side of the frame change and you will see some information about the table.  What you want to do now is to select the “Browse” tab at the top of the screen.

5. You will now see a list of your WordPress categories along with the category IDs.

C. Print the List of WordPress Category IDs

6. At this point you can print the screen (or even better), export the list to Excel.  To export the category ID list to Excel, go back to the top of the screen where the tabs are and click “Export”.

7.  On the export screen, click “CSV for Excel” (or whatever file format you want).

Also make sure “save to file” is clicked.  Then click “Go” to start the download.

You are now the proud owner of a list of your WordPress Category IDs’.

]]> http://helpspa.com/featured-articles/how-to-find-the-list-of-wordpress-category-ids-2011-in-under-5-minutes/feed/ 0 How to Select a Single page with a CSS ID in Dreamweaver with a .DWT template. http://helpspa.com/web_development/dreamweaver/how-to-select-a-single-page-with-a-css-id-in-dreamweaver-with-a-dwt-template/ http://helpspa.com/web_development/dreamweaver/how-to-select-a-single-page-with-a-css-id-in-dreamweaver-with-a-dwt-template/#comments Thu, 25 Aug 2011 02:45:22 +0000 David W http://helpspa.com/?p=2534 Those of us familiar with Dreamweaver .DWT template files know their tremendous advantages, and their limitations.  One of the difficulties with .DWT templates is that once you’ve setup a website using .DWTs, it can be difficult to pick out a single page based on a CSS ID tag.  People often use an ID attached to a <body> tag in order to be able to select and manipulate an individual page for a particular purpose; but with .DWT”s, you can’t make different ID’s on the body tag.

The Solution is an Editable Header and <head> Tag.

While your <body> tag is likely consumed by the template, it’s very likely that your <head> tag has editable regions.  If you are adding any kind of meta tags, you will have an editable <head> tag.  So in order to take advantage of the <head> tag, simply add a <style> tag to the <head> area of the page in question, and you can then manipulate the CSS to your needs.

Let’s Look at An Example.

For example, let’s say you have an image with the ID “myImage” you want to display on every page on the website except for the “contact” page.   Go ahead and add the image to the .DWT so that the image code propagates to all of your pages.  Now in order to remove the image from the contact page, simply open up the contact page and add the following code within the header tag:


<style type="text/css">
#myImage {
display: none; }
</style>

What will happen is that the page will render and read the site’s main .css file.  The browser will then read the above style code that you put in the <head> tag, which will override the site’s global stylesheet.  In this manner, the image with the myImage tag will now be hidden on the contact page.

Summary

In order to apply  CSS code to  individual pages using Dreamweaver and .DWT templates, simply add a <style> tag with your overriding CSS code to the <head> tag of the page in question.

]]> http://helpspa.com/web_development/dreamweaver/how-to-select-a-single-page-with-a-css-id-in-dreamweaver-with-a-dwt-template/feed/ 0 How to Add Google Analytics Tracking Code to your WordPress Blog http://helpspa.com/web_development/wordpress/how-to-add-google-analytics-tracking-code-to-your-wordpress-blog/ http://helpspa.com/web_development/wordpress/how-to-add-google-analytics-tracking-code-to-your-wordpress-blog/#comments Thu, 21 Apr 2011 21:48:52 +0000 admin http://helpspa.com/?p=3 One of the most important features for your WordPress Blog (and almost any web site for that matter) is being able to track and analyze your site’s analytics (statistics).  Adding the free Google Analytics code is easy to do and will take around 10 minutes.  These steps assume you already have a Google Account and a Google Analytics account.

1.  Find the footer.php file for your wordpresss theme.  This file is usually located at:  /wp-content/themes/[your theme name]/footer.php

Note:  I generally do NOT work on the live server copy of any file, as you can make your site stop functioning if you make a mistake.  I prefer to download a working copy of the file from the live site to my local machine, make the changes, and then upload the file back up to the server.  If it’s a critical file you are editing (such as .htacces), I recommend making a backup copy locally as well prior to making any changes.  This way you have a working copy if for some reason the file you upload doesn’t function as expected.

Head to the bottom of this file in your favorite text editor or HTML editor like Dreamweaver and find the </body> tag as illustrated below:

addAnalytics-1

3.  I like to mark the area with HTML comments so that later on when I’m looking at the code I can easily see where the Analytics code starts and ends.  In the image below I’ve added HTML comments to demarcate the start and end of the analytics code section (Note: in the pictures below I wrote  ”AdSense” instead of “Anayltics” — but the concept is the same  – you can also  make comments for the position of your AdSense code this way, too).

addAnalytics-2

4.  Now it’s time to add the actual analytics code.  Go back to  your Google Analytics account and select Analytics Settings.  You will see a list of site profiles.  For the profile you wish yo use, select Edit in the Actions column.  This will take you to the profile page.  On the profile page the one for the website you are working on (there will be only one if you’ve only created one profile) click the check status link.  You will then be taken to a page that will give you the analytics code to add for your site.

addAnalytics-4

5.  Now let’s go back to our footer.php page and paste this code into the space we marked off with our HTML comments.

addAnalytics-3

6.  Now upload the file back to the server.  Go back to your Google Analytics account and click ”edit” next to the site profile.   If all is working well you should see, at the top right of the next page:

ga_status Note that it make take around an hour before you see that Google Analytics is correctly receiving data.  In one case it took almost two days for one of my sites to reflect that data was in fact being collected.  Just make sure that when you add the code that you have copied and pasted everything correctly.

So that’s all you have to do.  Happy tracking!

]]> http://helpspa.com/web_development/wordpress/how-to-add-google-analytics-tracking-code-to-your-wordpress-blog/feed/ 0 SMF vs. Vanilla vs bbPress – A Quick Look http://helpspa.com/web_development/smf-vs-vanilla-vs-bbpress-a-quick-look/ http://helpspa.com/web_development/smf-vs-vanilla-vs-bbpress-a-quick-look/#comments Sun, 03 Apr 2011 05:09:05 +0000 David W http://helpspa.com/?p=2246 Recently I was looking to add a forum to a website of mine (www.classicalweekly.com). In the past I’ve used vBulletin and phpBB but I didn’t want to use either in this case. Briefly, I was a vBulletin customer but I was not happy with the way they handled their upgrade to VB4 in regards to how they treated their existing VB3 customers. And while I’ve had success getting phpBB to do what I wanted it to do, I find customizing and maintaining phpBB to be a bit of a bear. So I took a quick look at Vanilla, bbPress and SMF. Here, quickly, is what I found:

Vanilla:
I like the fact that you can embed the forum on a page (e.g on a page within your blog) and I like that you have the flexibility of changing what your home page will look like to visitors (e.g. category list, discussion list). But I had the following problems:
- It is very difficult to get email to work and to test if your email is working (e.g. to have the system email you when someone registers). One could argue that it’s my server settings, but with a different board installed, emailing worked find with no additional configuration.
-At the current time I couldn’t find any stable plugins for spam prevention. Such a plugin, IMHO, is critical.
-Vanilla does an interesting job of having a social-network like profile. Unfortunately I couldn’t find any way to limit the display of this information to registered users only.

Overall I think Vanilla is on a great course and with some time and improvement, will be a great product.

bbPress
I’ve heard a lot about bbPress over the years and I figured I’d try the board. Installation was easy but after that I didn’t find bbPress to be too powerful. Emailing was functional right out of the box, and there is a human-anti-spam plugin that people do seem to like.

The major issue I had with bbPress, other than the very limited # of available plugins, was the lack of an ability to adjust forum permissions. On almost every board I’ve every worked with, having some control over forum access has been critical. For example, I don’t want people posting in my “Rules and Announcements” forum and I do sometimes like to limit posting in certain forums to certain types of users (e.g. having premium forums).

So while bbPress was a breeze to get up and running, I didn’t find it had what I needed out of the box. And while I know that there are some large websites running their forums on bbPress, I just don’t have the coding team in place that I need to get bbPress where I need it to be.

SMF
I’d only dabbled in SMF before, but I finally installed it and so far I’m happy. There is an anti-spam plugin and you are able to create specific forum permissions. Of the threee products mentioned here I find SMF closest to vBulletin and phpBB in terms of robustness and configuration options. You have the option of easily customizing the registration text, and I also like the features.

So at this point, in comparing these three products, I found SMF to be my choice at this time.

]]> http://helpspa.com/web_development/smf-vs-vanilla-vs-bbpress-a-quick-look/feed/ 2 Defensio Anti Spam – A Top Anti Spam Plugin for WordPress http://helpspa.com/web_development/wordpress/defensio-anti-spam-a-top-anti-spam-plugin-for-wordpress/ http://helpspa.com/web_development/wordpress/defensio-anti-spam-a-top-anti-spam-plugin-for-wordpress/#comments Wed, 30 Mar 2011 17:22:56 +0000 David W http://helpspa.com/?p=2239 I was looking for a free anti-spam Akismet replacement plugin for WordPress and I came across Defensio. I run multiple WordPress blogs and I needed a reliable and accurate (and easy to use) anti-comment-spam plugin.  I’ve been running Defensio for around a month now on a few sites and I must say that I’ve been extremely pleased.  The amount of wordpress comment spam has dropped to practically a trickle (if that) and the false positive rate is very low. The setup of the plugin is easy, and you administer your profile from their website.  On their website you will be able to add more sites, and also see your statistics. Their pricing is tiered — but their free plan is extremely generous and gives you a ton of leeway to grow your site. So I give a thumbs up to Defensio as an anti-spam plugin for wordpress.   It’s easy to install,  easy to configure, and most importantly…it works!

]]> http://helpspa.com/web_development/wordpress/defensio-anti-spam-a-top-anti-spam-plugin-for-wordpress/feed/ 0 4 – A Review of SmartSVN–A GUI Subversion Client for Windows http://helpspa.com/web_development/4-a-review-of-smartsvn-a-gui-subversion-client-for-windows/ http://helpspa.com/web_development/4-a-review-of-smartsvn-a-gui-subversion-client-for-windows/#comments Sun, 23 Jan 2011 21:09:32 +0000 David W http://helpspa.com/?p=2110 This article is the third in a series of guides about my experiences using Subversion (svn) for Web Development. These are the articles in the series:

1. A Desktop-Laptop Solution for Web Developers – Using Subversion to Co-Exist (this article)
2. What is Subversion and How Does it Help in the Web Design and Development Process?
3. A Subversion Workflow for Web Developers and Web Development
4. A Review of SmartSVN – a GUI Subversion client for Windows (this article)
5. A Quick Review of Online Options for Hosted Subversion for Web Developers
6. A Brief Review of Assemmbla, an Online Subversion Hosting Company.

Being new to Subversion and especially with using it in a web development workflow with Dreamweaver, I wanted to make the most of SVN but without having to deal with the command-line.  Generally speaking there are three major ways to go about using SVN.

1) command line – it’s great for those who use it but as a novice this wasn’t an option for me so  I won’t discuss it further here.

2) TortoiseSVN

3) GUI Subversion client such as SmartSVN.

TortoiseSVN is a free option and it basically adds the SVN command set to the right-click menu.  While I find this helpful now (after having been using SVN for a while), in the beginning I found TortoiseSVN a little confusing.  The truth is that there really isn’t anything confusing about TortoiseSVN — but it takes a decent understanding of subversion and how it works in order (at least for me) to be comfortable with TortoiseSVN.

SmartSVN – a Subverion GUI Client for Windows.

So wanting to reap the benefits of SVN without having to worry about the implementation and interface I started looking for a GUI for Windows and I came across SmartSVN.  The best way to show you how SmartSVN works (and how easy it is to use) is by going through my sample subversion web design workflow showing you screenshots along the way.  Note that SmartSVN comes in two flavors, a free Foundation Edition and a paid Professional Edition at very reasonable $79.  I will be using the Professional Edition for the examples below, and you can download a free trial edition to evaluate the Professional Edition.

Note that in this review I used screenshots from an actual production workflow, so some of the client information and server information is blurred out.

Let’s assume you already have a subversion server setup somewhere and you’ve already created a repository.  One of the best things about SmartSVN is that it lets you immediately decide if you want to go directly into a Subversion project or if you want to browse a repository:

smart_proj_repo

In this example I’m going to want to work on a specific project so I’ll go to the “New Project Window” option — which will let me select from the projects I’ve already setup, or setup a new project.

smart_proj_options

Because I’m going to work on an existing project, I’ll select one of the projects I already have listed [not shown] under the “Open existing project(s)” option.

Once you have selected a project (or created a new one) you are presented with the main SmartSVN screen.  Here is where you will control your interaction with your SVN server/repository.  You will have a tree-like view on the top left, a working area on the top right, a command output area on the bottom left, and a transaction list on the bottom right.

So now let’s assume that I went into Dreamweaver and made some changes to the files in my website.  SmartSVN will show you what files have changed (and you can easily sort to see what’s changed and what hasn’t):

smart_modList

Note the revision number, the state “modified” and the path on the right side of the screenshot.  SmartSVN can also help you see if you’ve added any files that are not yet versioned:

smart_unversioned

Because I don’t want to keep track of the dwsync.xml files, you can easily have SmartSVN ignore these files (an option in the main menu bar on top or an option in the right-click menu). But if you did want to add these files, you can also easily do so quickly.

So now that I’ve made a few changes, ignored a few and added a file or two, I’m ready to commit the changes.   Committing is as simple as clicking a button and adding a commit message, so I’ll skip that here.  But now let’s assume I’ve made the commit and I want to see a list of my commits (note that while the commit is happening and while SmartSVN is interacting with the server/repository, you will see the progress in the lower left part of the screen).  You can now easily look at the lower-right area of the screen, the Transactions area to see what’s gone on with your repository (note you can maximize this view if needed).

smart_transList

So you can see quite a bit of information from this transaction list and you can also expand the “+” signs to get more information.

Now that I’ve committed my changes, I’d like to add a tag (so as to have a snapshot in time of my project).  For more information about how I use SVN in my web development process you might consider reading this article series starting from the top — you can see a list of the articles at the top of this page.

Back to tags —  let’s now create a tag.  The easiest thing to do is to head to the Tag+Branch menu and click “Add Tag…”

smart_addTag

to bring up the “Add Tag” options:

smart_tagOptions

I like to name my tags like this:  client_tag_1.05, with increments as needed.  In the above example I used the name “sampleTag” and notice how SmartSVN automatically created a commit message based on my tag name.  In this dialog box you are able to create the tag based on your working copy or the repository copy, and you can decide (at the bottom) how to manage it if the tag already exists.  When you are done you can hit the “Add Tag” button to finish adding the tag.

Moving along, let’s take a look at the list of our tags in the repository.  Note first that SmartSVN lets you pick which repository you want to look at (if you have separate repos):

smart_repo_change

But moving back, let’s look at the repository view of our project:

smart_repo_tag_list

This is just a clipping but you can easily see the structure of my project, and if you wanted to you could click the “+” to see all of the tags that I have.

On the subject of tags, let’s go ahead and download a copy of a tag to the local drive so I can have an archive.   You could easily copy your working directory, but don’t forget that your working directory has lots of special svn files that you may not want to necessarily keep in your copy (this is a function of subversion itself, not SmartSVN).  Let’s now walk through the export process.  The first thing I did is I went to a tag in the repository view and right-clicked on “check-out” (incidentally you also could use this command if you wanted to create a working copy based on a tag).

svn_export_tag_1

I then added a local directory and set some options:

svn_export_tag_2

and then finalized my choices.  Under the “Export only” selection I left the selection as “native” — which basically exports the tag as it is — but without the svn files.

svn_export_tag_3

Lastly you can view a summary report before you finish the creation of the local copy of the tag:

svn_export_tag_4_report

Foundation Version vs Professional Version

I spent time with the Foundation Edition and the Professional Edition and I found that the Foundation, while free, is greatly limited compared to the Professional Edition.  The Foundation is excellent as a repository browser and for basic management, but for creating tags and for more complex operations, the Professional Edition is needed to take advantage of these tasks with a GUI.

Conclusion

Subversion is a fantastic way to implement revision control into the web development process, but can be confusing and a little overwhelming for the novice user.  For this reason the use of a GUI such as SmartSVN is a great way to get going with subversion.  SmartSVN is a paid option but is the best GUI that I’ve seen for interacting with Subversion; the $79 is well worth it when you consider that with SmartSVN, you can worry about your project, and let SmartSVN  worry about interacting with your repository.

Disclosure. I originally approached Syntevo  about writing a review of  SmartSVN.   I was given a free license to use the product.

]]> http://helpspa.com/web_development/4-a-review-of-smartsvn-a-gui-subversion-client-for-windows/feed/ 2 3 – A Subversion Workflow for Web Developers and Web Development using Dreamweaver http://helpspa.com/web_development/a-subversion-workflow-for-web-developers-and-web-development-using-dreamweaver/ http://helpspa.com/web_development/a-subversion-workflow-for-web-developers-and-web-development-using-dreamweaver/#comments Sun, 16 Jan 2011 21:14:17 +0000 David W http://helpspa.com/?p=2031 This article is the third  in a series of guides about my experiences using Subversion (svn) for Web Development. These are the articles in the series:

1. A Desktop-Laptop Solution for Web Developers – Using Subversion to Co-Exist (this article)
2. What is Subversion and How Does it Help in the Web Design and Development Process?
3. A Subversion Workflow for Web Developers and Web Development (this article)
4. A Review of SmartSVN – a GUI Subversion client for Windows
 5. A Quick Review of Online Options for Hosted Subversion for Web Developers
6. A Brief Review of Assemmbla, an Online Subversion Hosting Company.

Now that you understand a little bit about my rational for using subversion and the very basic concepts for using SVN, let’s take a look at my own web development workflow using Subversion (and Dreamweaver).

I. BASIC SETUP AND CONFIGURATION

A.  Setup the client directory on the local or development machine: I keep all of my client files in one folder.  So client_1 has a folder /client_1 where all of client_1′s files are kept.  Among the other folders in the /client_1 directory are two web specific folders:  the /client_1/web directory contains the main website files, usually in /web and  the /client_1 /webBackup directory has the backups.  These backups are either release versions or increments in the development process.  Whereas in my older workflow I referred to the iterations as simply “web backups”, now that Im using subversion nomenclature I call these iterations tags.  The image below shows the contents of a sample /client_1 directory:

clientFolder-2

B. Setup a Subversion repository. If you are new to SVN you can head to one of the Subversion Hosting Companies listed in Part 6 of this series (coming soon), and explore them for yourself to see which company meets your needs.  Many of these companies have trial periods and/or free accounts.  You can also setup your own SVN repository on a VPS or dedicated server, but if you’re new to SVN I’d recommend you start with a hosted service to make sure using SVN works for you in your web development cycle.

C. Install a SVN Client such as Tortoise SVN or SmartSVN. I actually use Tortoise SVN and SmartSVN on different machines.  They are both excellent programs for helping you interface with your SVN repository.  SmartSVN is a GUI client so as someone who was completely new to SVN, I found it easy to work with.  You can read my review of SmartSVN in article #4 of this series (coming soon).

D. Setup Dreamweaver as you normally would for a website (“Manage Sites”). While Dreamweaver does have some checkin/checkout features and there are plugins for SVN, I’m not using these options.  In my workflow I’m developing completely in Dreamweaver, and DW doesn’t know about SVN.  There may be better ways to do this but right now this workflow works for me.  Note also that I’m using Dreamweaver CS3, as I’m still quite happy with the programs features and how it performs.

II. SUBVERSION WORKFLOW FOR WEB DEVELOPMENT AND DREAMWEAVER

A. Get the local /web folder talking to the /trunk folder in the repository. I’m not going to go over the steps in detail as there are ample SVN tutorials out there, but you will basically create a folder structure in your repository with trunk, tag, and branch folders and set it up so that the contents of the /web folder on your local machine reflect the contents of the /trunk folder in the repository.  My repository for a client project looks like this:

/clientName
/branches
/tags
/trunk
/css
/images
/index.html
/about.html
…..

So you can see that the trunk contains everything that would be in the website folder that you’d upload to a live server. If you also want to version other site assets, you can create additional folders under the /trunk directory.  I usually create a /docs folder and a /working folder for frequently changed assets that I want to be able to access on many machines. Note that files that don’t change are not in this setup.  For example, I don’t put the clients web design questionnaire  or the .pdf of the signed development agreement in this structure.

B. Start developing your site on the local machine, working in the /client_1/web directory as you normally would. Each time you make a signifigant change, you commit the change to the repository.  As you work with SVN more and more, you will decide when you need to commit your changes.   I usually commit every 30 minutes or so, unless I’m working on something more critical whereby I commit more frequently.  If I’m adding a new page for a client and adding the text, I usually will create the page and add the text and then commit to the repo.   If I wanted to I could commit once I’ve created the page, and then commit again when the content is done, but I don’t find that practical.  You, however, will find what’s practical and what works for you.

C.  Stop and create tags at major intervals. When I’m first building a site I make very frequent use of tags. Recall that tags are a snapshot frozen in time of your site.  When I’m building a site I often make sweeping changes to the css, and that’s why I commit and tag frequently.  I may have 20-30 development tags in early development while I’m working on the site structure and cross-browser testing (though I do my browser testing with each tag creation. as I like to pickup browser compatibility issue early on).

Once I’m happy with the site structure and I’ve tested it in multiple browsers, I make tags less frequently.  Often I’ll complete sections of pages in a website and then create a tag.  Once the site is complete and I have it to show to the client, I also create a tag.  I then make the required corrections and changes (with more tags if needed) and then for the final release, I create a final tag.

In terms of versioning my tags, I like to keep all development versions under 1.0, as I save the release version for a website for 1.0.  As I make updates to the site I will increment the version number.  Major changes to the site (a new section, new feature) will sometimes get a tick up to 2.0 — but only for very signifigant changes.

D. Moving tag contents to a testing server. This step is the only major limitation I see with my svn web development workflow — and if you the reader has suggestions I’d love to hear them.  Currently when I want to upload a tag to a web server (development server or live server ), I export the tag to the local machine. My tags are named based on my personal version system, for example,  ”helpspa_tag_0.5.1″ , so I export the tag from the repository and place it in the client’s folder, in the /webBackup directory (recall that we created this folder in the beginning of this article).  I now head to the /webBackup/helpspa_tag_0.5.1 directory and I upload the files to the testing (or live) server.

E. Maintenance and Corrections.  Clients often make changes to websites, and it’s my practice to create a new tag for each set of changes that a client requests.  So if a client calls me tomorrow and asks me to make 5 changes to 4 different pages, I make the changes and save this set of changes as one tag.  I document what these change are in the commit box, of course, but I see no reason to create a new tag for every single change.  Note that if the client only wanted one change I would still create a single tag, but when multiple changes are requested in one “set”, then this set becomes a tag.

III. LIMITATIONS AND WHAT I’D IDEALLY LIKE TO BE ABLE TO DO

A. There’s no easy way to go from the SVN repository directly to the FTP server (testing or live). There are services that will perform an FTP push every time you commit, but that’s not useful for me.  Often I’m committing work in progress that isn’t ready for people to see (e.g it doesn’t work yet), so I really only want to move to the FTP server when I’m ready — which in my case is usually when I create a tag.

And the reason I use the export feature and go from the tag in the /webBackups directory as opposed to copying directly from the /web directory is because the files in the /web directory also have hidden /svn folder that track change information.  While you can upload the website with these files, for very large sites it really increases the upload time.  So exporting is way you can get a copy of the site without having to deal with these hidden files.

B. I’d like to get Dreamweaver involved. Another limitation of my system is that I’m not synchronizing.  If you are using Dreamweaver and you’ve set it up properly, you can very easily make a correction to a couple of files, and then only upload these files as needed and not the whole site.   Now if I remember what’s changed I can just upload the single files from the tag directory in /webBackup, but often times I don’t remember what files I changed and I wind up re-uploading the entire site.  And while this isn’t a deal-breaker, I’d like to improve this part of my workflow.

C.  I’m not branching. At this time I’m not really using branches in my workflow and I’m not sure that I need them.  I’ve read mixed reviews of SVN’s ability to branch — some people think it’s great while others report it to be a disaster.  In the future I will consider looking at Mercurial.  Mercurial is a DVCS (distributed version control system) that is fundamentally different from SVN in many different ways.  According to what I’ve read, many people have said that Mercurial does a significantly better job with merging branches back into the trunk than SVN.  At this time, however, SVN still offers a ton of popularity and resources for you if you have questions.  In the future I will look at Mercurial and see if there’s a case for Mercurial in a web development workflow.

The preceding workflow is my own creating for getting subversion to fit into web site design.  Please feel free to leave comments to let me know where this workflow can be improved.  In the next article in this series, I will review SmartSVN, the program that I use as a GUI for Subversion (coming soon).

]]> http://helpspa.com/web_development/a-subversion-workflow-for-web-developers-and-web-development-using-dreamweaver/feed/ 1 2 – What is Subversion and How Does it Help in the Web Design and Development Process? http://helpspa.com/web_development/what-is-subversion-and-how-does-it-help-in-the-web-design-and-development-process/ http://helpspa.com/web_development/what-is-subversion-and-how-does-it-help-in-the-web-design-and-development-process/#comments Wed, 12 Jan 2011 22:11:59 +0000 David W http://helpspa.com/?p=2013 This article is the second  in a series of guides about my experiences using Subversion (svn) for Web Development. These are the articles in the series:

1. A Desktop-Laptop Solution for Web Developers – Using Subversion to Co-Exist (this article)
2. What is Subversion and How Does it Help in the Web Design and Development Process? (this article)
3. A Subversion Workflow for Web Developers and Web Development
4. A Review of SmartSVN – a GUI Subversion client for Windows
 5. A Quick Review of Online Options for Hosted Subversion for Web Developers
6. A Brief Review of Assembla, an Online Subversion Hosting Company.

There’s a ton of great information about the specifics of Subversion and how to use it, so I’m not going to go through all of that here.  There’ an excellent free book online, “Version Control with Subversion” which I strongly recommend that you read (at least the beginning few chapters).  Rather, here I will discuss the core concepts of subversion as they relate, in my workflow, to web development.

Synchronization and Version Control

The two main ideas to understand when using subversion are the concepts of 1) keeping your files in sync among multiple machines and developers (if needed) 2) at the same time maintaining a log of revisions — with the ability to roll back those changes.

Consistent Copies

The first main  concept behind using subversion (svn) is that the main files for your project – in our case a website – are stored on a central server called a repository.  When you want to work on the website, you connect to this central server  and you synchronize your local copy with the copy that’s on the server.  SVN actualyl doesn’t use the word synchronization — if it’s your first time working on the project on the specific machine, you  first download (check-out) a copy of the site from the repository (called a working copy) and you then make your changes.  If you’ve already worked on the project on the chosen machine, you would head to the repository and update your copy — which is the method of making sure that your working copy is current (in sync) with the copy that’s in the repository.

Version Control

The second major advantage is that not only to you have an easy way to work on updated code no matter what development machine you use, but version-control is built in.  In my own personal version control methodology, which I’ve been using for years, I saved multiple version of my work in progress and each time saved an exact duplicate of the entire site.  Subversion, in contrast, logs the changes that you have made in each version — so while it does not keep a physical copy of every version that you have, a record of your changes is kept so that you can revert back to any revision at any time.    This is the concept that took the most time for me to get used to — I like having hard copies of everything — but the more I use subversion (backing up my repository, of course) I realize that these extra backups aren’t necessary.  You can read this article if you want to see how I used to manage my web design version control.

One of the reasons that I chose to work with SVN is because I develop a lot on my laptop, but wanted to also harness the power of my desktop machine.  I thus work on my latptop and I upload (commit) the changes to the repository.  When I’m on my desktop machine later, I can easily run the update command to make sure that my desktop copy is current with the copy I just finished working on on my laptop.

More Subversion Vocabulary:  Trunk, Branch, Tag

Finally let’s touch upon a few more subversion concepts/vocabulary items.  These items are trunk, tag, and branch. The trunk is generally defined as the main line of development, whereas a tag is used to take a snapshot in time of the trunk.  Lastly, a branch is used when you want to go off in a different direction for a while, but at the same time keeping the main development line (trunk) intact.  As a simple example, if you are working on a website and you are ready to code the contact form, and you’ve coded it a certain way first, but decide now that you want to try a different script to implement the form, you can use a branch.   The thought is that your main development (i.e. your main, stable code) stays untouched in the trunk, and you can work on this new contact form coding method in a branch without altering your trunk.  If you then decided that you are happy with this new contact form code that you’ve written in your branch, you can now merge this branch into the main trunk.  Note that merging is a straightforward process that does need a degree of care and planning.  You don’t want to merge code back in that will break your original code, so it pays to do a little reading (and practice) with merging before you perform a merge on a real-life client project.

Note that trunk, tags, and branches are really just  nomenclature — these folders as you will learn, don’t exist in any special format — but it’s how you are managing them that make the difference.  Thus it’s by convention that we keep our main line of code in the trunk, and the side or other development pieces in the trunk.  You could just as easily call them the body and the arm, but convention is trunk and branch.  Note also that there’s nothing special about a tag other than the fact that we are calling it  a tag and that, by convention, tags are not touched.   As a tag is designed to be a snapshot in time of your trunk, it make no sense to copy and change your established tag.  And while if you wanted to you could make changes to a tag, by convention, it doesn’t make sense, as the whole idea behind a tag is to have a copy of the trunk at a certain point in time that you will not be changing — thus making a large rollback possible.   Obviously you could always go back to previous versions using the trunk, but it’s just more practical if you want to make a major rollback to have the ability to use a tag.  Having tags also allows you to keep frequent “backup” copies of your work in progress.

In the next article, #3 in the series, I will discuss my Subversion Workflow for Web Developers and Web Development.

]]> http://helpspa.com/web_development/what-is-subversion-and-how-does-it-help-in-the-web-design-and-development-process/feed/ 0 A Sample Web Design Workflow with Basic Version Control http://helpspa.com/web_development/a-sample-web-design-workflow-with-basic-version-control/ http://helpspa.com/web_development/a-sample-web-design-workflow-with-basic-version-control/#comments Wed, 12 Jan 2011 05:01:39 +0000 David W http://helpspa.com/?p=1998 Before I decided to take the leap of faith and code on two machines — using svn as my go-between, I was coding on a single machine and I needed some type of version control system for my projects.  In this article I will share this system; and while I’m using a variation of it now that I’m running subversion, the core principles are still relevant and useful.  To see my updated system, and my article series about using svn for web development, you can start with the first article here.

1.  Create a separate folder for each client on your hard drive, preferably keeping all of these client folders on a separate partition  You may even consider having a /clients folder to hold all of your client directories.

clientFolder-g copy

2.  Make sure you have a /web directory in the client folder (among many other directories as needed).  I always put the website itself in the /web directory.  All supporting files are somewhere else in the client directory tree.  Also make sure you create a /webBackups directory.  Here is where you will store all of the iterations of the website.

clientFolder-2

3.  Once I start coding I create versions, or snapshots as I move along in the process in case I ever want to move back. So I will copy the /web folder to the /webBackups folder and I change the name.; usually I rename it to something like /[client]webBK_v1.2.5, or whatever number is next in the iteration scheme.

clientFolderBK

4. Of critical importance is this step — in addition to having these backups, I also keep a log in Excel describing each version.  In this manner I can quickly see what changes were made.

excelLog

One of the problems with the system (or reliefs if you ask me) — is that each version contains a full version of the website. Now some will criticize that this is unncessary — if you have a site with 200 images and you are simply adding a line of text to an about page, do you really need to create an entire new version with an entire copy?  In my opinon – and with this system, the answer is yes.  Disk space is cheap and problems with clients are expensive.   With this system I rest assured that no matter what happens, I always have a full copy of every version of the site that ever existed (development and production).

Using subversion pretty much accomplishes the same goals that I wanted with the “manual” system I describe above.  But if you are a one -person show, or you only develop off of one machine, a system like the above may be useful.  I’ve gone back to backups before and they’ve saved my skin on multiple occasions.

]]> http://helpspa.com/web_development/a-sample-web-design-workflow-with-basic-version-control/feed/ 0