Homework -> Homework #6- Part 2: Code QA of Final Target & "Staging" of Files

We will now start on QA of the coding in the HTML files to identify if we have destroyed any tags. After we are confident our files have no major coding errors, we are going to upload them to a "staging" site on the internet via FTP (i.e., upload them to the client's server that is connected to the internet).

PART 1 - Setting Up

Download the following applications. Save to your desktop and install all.

PART 2 - Code QA Using "CSE HTML Validator Lite"

"CSE HTML Validator Lite" is a great free program which checks HTML coding for errors such as deleted, broken or extraneous tags. These errors are often introduced by translators during the translation process so it is good to check before you client finds them.

Step #1: Move your localized Compass Travel site to the next step

  1. Copy the "Compass_Site" folder from "...\04_Post-Processing"
  2. Paste the folder in "...\05_QA"

Step#2: Launch 1st Instance of "CSE HTML Validator Lite" and Browse to the Localized File Tree

  1. Launch "CSE HTML Validator Lite" -- "START > Programs > CSE HTML Validator Lite >CSE HTML Validator Lite"
  2. In the main application menu go to File > Open... a dialog named "Select File or Files to Open" will appear.
    1. Browse to "...\CompassTravel\05_QA\Compass_Site"
    2. Select all the web-based files at the root (all the HTML and PHP files)
    3. Click Open
  3. Each file you selected will be opened below the editor window in a separate tab

Step #3: Launch 2nd Instance of "CSE HTML Validator Lite" and Browse to the Source File Tree

  1. Launch a second instance of "CSE HTML Validator Lite". Ignore the warnings and say click Yes -- you do want to open another session.
  2. Open the files at the root in "...\CompassTravel\01_Source\Compass_Site" following the same steps to get there as you did in Step #2 above.

Step #3: Split the Windows for Clear Viewing & Comparison

  1. Manually grab the edges of the windows of the two instances of "CSE HTML Validator Lite" and stretch them vertically so that each instance takes up about 1/2 of the screen in a vertical alignment (side-by-side).
    • If you're curious: Yes, there is an easier way to do this. If you only have the two instances of "CSE HTML Validator Lite" open and nothing else, put your mouse arrow pointer on your taskbar in Windows at the bottom of the screen (where the START button and all the Quick Launch icons are located). Right-click on a grey area and select Tile Windows Vertically

    See the image below. Click on the image to see a larger version in another window!

  2. Your screen should look something like the above. Here you can see my Source file tree is open on the left and my Target file tree is open on the right. Both windows show the "root" files opened in their respective tabs.
    • Note: The files in the tabs of both Source and Target windows should have the same filenames and be in the same order.

Step #4: Validate the Source for Errors, Compare Error Report to the Target

  1. In both instances of "CSE HTML Validator Lite" (both Source and Target) go to Tools > Validate All Open Documents...
    • Click on OK when the validation summary pops up
  2. You should now see a report on the status of your tags in the bottom left-hand pane of both windows
    See the image below. Click on the image to see a larger version in another window!

  1. Compare the reports generated by "CSE HTML Validator Lite" in both instances
    • If they match, move onto the next file...
    • If they don't match AND your "Target" window shows more errors than the "Source" window:
      • Go to your window where the target is open (i.e., the window where "...\05_QA\Compass_Site" is open)
      • Double-click on the error that doesn't match in the report pane at the bottom of the window
      • You will be automatically directed to where "CSE HTML Validator Lite" thinks the error is...sometimes "CSE HTML Validator Lite" doesn't know exactly...the error is sometimes a few tags before or after that point. Sometimes the error is the result of another tag having an error and when you fix the first tag the others all are "fixed." THIS IS WHY KNOWING HOW TO WRITE AND UNDERSTAND HTML SOURCE CODE IS CRITICAL IF YOU WANT TO TRANSLATE WEBSITES -- YOU NEED TO UNDERSTAND WHAT YOU ARE LOOKING AT!
      • Once you have resolved an error for a particular file, save the file (File > Save) and then go to Tools > Validate in the menu to refresh the report for that page.
      • If the reports match, you can move on. If they don't, continue fixing errors until they match
  2. Now check the files in the subfolders for Source and Target (not just the "root" content). In our case "...05_QA\Compass_Site\popups" would be a subfolder of "Compass Site" with HTML in it, so make sure to check the files in there against the source as well.
  3. When you have completed the comparison of your localized files against the source and have resolved all errors where the Target error report does not match the Source, close both instances of CSE Validator and move onto the next QA step below.

PART 2 - Upload Files to FTP with "FileZilla"

FileZilla is a program designed to help connect you with FTP sites (i.e., servers that you client has set up to store files..including those that make up their website). We are connecting to FTP to upload our translated files. This particular FTP site is connected to a website "host" which will serve up our translated site to the internet. Once we place our files on the FTP site we will be able to see our site "staged" on the internet at an actual WWW web address. Wow!

    IN ORDER TO CONNECT TO A CLIENT'S FTP SITE YOU MUST FIRST BE
    PROVIDED WITH THE FOLLOWING:

    NEED EXAMPLE
    The FTP address written as ftp.[site name].[domain] ftp.ritzdorfacademy.com
    A username translator
    A password (usually will be fairly complex) v@b8cHuk!
  1. Once you have the information noted above in the green box under "NEED", launch "FileZilla" -- "START > Programs > FileZilla FTP Client > FileZilla"
  2. In the "QuickConnect" bar just below the main menu enter the FTP login information into the appropriate boxes (unless you were provided a "Port:" number, leave it blank)

  3. Click the Quickconnect button
    • A connection will be made to the FTP site
    • If you provided the correct login information, a directory listing of the folders and files on the FTP site will appear in the lower right. Only folders and files that the client's webmaster has given you permission to access will be visible to you.
    • If you provided incorrect login information, you will be be given an error in the "Message Log" (just below the "Quickconnect" bar. Try your username and login again.

  4. In the Local site: folder tree on the left, browse to "My Computer\C:\Translation Jobs\CompassTravel\05_QA\Compass_Site"
  5. Drag and drop all your files and folders from the "Compass_Site" folder into the adjacent right-side box

    See the image below. Click on the image to see a larger version in another window!

  6. Wait for "FileZilla" to process all the file/folder uploads
    • If you're curious: You just moved a copy of all your translated and QAed website files from your "local" hard drive on your computer to a "remote" location on a file server somewhere. Your files are now in a computer server in another city, state or even a different country!
  7. Once "FileZilla" has completed all the uploads you may close the program

    IMPORTANT!
    In order to be able to view the "staged" site, your client must provide you a "staging" URL where you can actually see the files you uploaded to FTP as a running website.

    In our case, each student's work is at:
    compass.ritzdorfacademy.com/[your student number]