GEOG 863:
Web Application Development for Geospatial Professionals

Portfolios

PrintPrint

Portfolios

Since you'll be creating web-based maps, you'll need to have space on a web server to publish them. Some of you may have your own personal website set up already. If so, you can use that. We used to have webspace at Penn State (referred to as PASS, short for Penn State Access Account Storage Space) but this was retired.  The University does offer a web publishing platform, sites.psu.edu, but it is WordPress-based and does not allow for authoring and uploading your own pages as we want you to do in this class.  The platform we're currently recommending is infinityfree.com, which offers free accounts and seems to have reliable uptime (which is also important and not always a given).

Once you've registered to use InfinityFree, create your new website by clicking the "Create Account" button. (I know, that's confusing terminology.)

Step 1: There's a number of hosting plans but it's the "InfinityFree" for $0 that we're going to use.
Step 2: Enter a subdomain in the text box. Use something like <surname>geog863 (e.g., detwilergeog863).
InfinityFree gives you several choices for domain extensions. Any are fine, I picked free.nf.

Step 3: The default Account Label should be fine.  You'll probably want to modify the auto-generated Account Password to something you can remember.   
It'll ask for permissions to send you emails. If you decline, it'll warn you that you may lose your account.
Then - Create Account - The next page will give you your username (to go with that password). You'll use these to connect to the file storage with an FTP client.

It'll churn for a few seconds and you'll have a webpage.

If you're wondering what the URL is for your site it'll be the name you gave you site in all lower case (e.g. https://detwilergeog863.free.nf/)

There's a generic landing page at your URL (once it's created). You'll upload your own later during Lesson 3.

Once you've got your webspace allocated, there are a few ways to connect to it. Here are two, with the first being the one I recommend most:

Connect using FileZilla

FileZilla is a free and open-source secure file transfer protocol (SFTP) application. If you already have another SFTP app that you prefer, you're welcome to use it instead.

  1. FileZilla can be downloaded at FileZilla. Installation should be straightforward.
  2. Along the top of the application window, you should see text boxes for making a connection to a remote server. Fill out the boxes as follows:

    You can find the needed FTP connection parameters for your InfinityFree account by going to Accounts -> FTP Details.

    Host: ftpupload.net
    Username: your account username
    Password: your website password
    Port: 21 
    Then click Quickconnect.  (I needed to widen the FileZilla window after first installing it to see the Quickconnect button.) Tell FileZilla whether you want it to store your password.  You should see an Unknown Certificate dialog the first time you connect.  Click OK, and you should not see that dialog with future connections. 

    When finished connecting, you should see your webspace files/folders on the right side of the window.

    To simplify the connection process in the future, you might consider using the Site Manager as detailed below. 
  3. Double-click on the htdocs folder to access the part of your webspace that's open to the world to see (where you'll want to post your projects).
  4. To transfer a file from your local system to your webspace, navigate to the file in the left-hand pane, right-click on the file and select Upload. (Or drag and drop from the local site to the remote site.)
  5. When finished transferring files, you can disconnect from the remote server by clicking on the button with the red X.

To avoid having to enter the same connection parameters every time, you can store them as follows:

  1. Open the Site Manager (1st button on toolbar).
  2. Click New Site.
  3. Give a name to your connection (e.g., PSU web space).
  4. Enter the Host and Port values as specified above.
  5. Set the Protocol to FTP - File Transfer Protocol.
  6. Set the Logon Type to Normal or Ask for password (depending on whether you allowed FileZilla to store your password or not).
  7. Set the User as you did above.
  8. Click Connect and enter your password if prompted.

    The screenshot below shows an example of storing a site connection with the Site Manager.  Note that it uses a different host URL from what we're using now.

Going forward, you can connect to your webspace in FileZilla by going to the Site Manager dialog, selecting the connection you created above, and clicking Connect.

Note: The application is set up by default to show a directory tree and a file listing for both the local and remote sites. If you're like me and prefer to see the directory tree and files in a single pane, you can toggle the directory trees off by clicking on the 3rd and 4th buttons in the toolbar.

Connect using the InfinityFree File Manager

  1. This is a web-based means of uploading files to your web space. 
  2. Login and go to your site dashboard under Accounts. Click the File Manager button and it'll show you your folders - htdocs is where you'll be putting your html, js and css files later in the class.  After browsing into the htdocs folder, you can use the buttons running along the bottom of the page to upload files, create new folders, etc.  I'd suggest a folder per lesson to keep everything neat and tidy. 
  3. Going this route doesn't require installing any additional software and the interface is fairly self-explanatory. You can even drag-drop files into the browser window to upload them. It'll probably be fine for what we're doing, but manually copying files can be clunky and tedious for complex sites with lots of files.

Hard Reloading Web Pages

In this class, you'll probably be editing and reuploading html, javascript, and css files - then viewing them in your web browser to see how they look. Browsers like to cache files which means if you update a file, it may keep using the old version and you won't see your changes. Solve this with a hard reload. In Chrome - hold Control and click Reload.

You may encounter some web publishing tutorials that recommend you set up a blog. Blogs are preferable to a plain personal web page for most students because blogging software provides page authoring tools that simplify the publishing process. However, for this course, you should avoid setting up a blog. You will need to be able to write your own HTML from scratch and the blogging tools will only complicate matters.