Jump to content

Florida Non-Native Plant Species


renobird
 Share

Recommended Posts

http://assessment.ifas.ufl.edu

I've been working on this one a good while now. What's there now is essentially a phase one MVP (Minimum Viable Product).

We start the next phase of the project soon, which migrates a lot more data, and takes all the paper processes and turns them into web forms and/or calculation tools. More on that another time. :)

For those of you familiar with the pitfalls of infinite scroll — I'm still working out the kinks with history.js, but I wanted to go ahead and post the site here as it's now officially live.

Some of the more crucial modules used:

  • ListerPro
  • AIOM
  • ProFields: PageTable
  • FormBuilder (not live yet, coming in phase 2)

Homepage

post-474-0-51707300-1417718685_thumb.png

post-474-0-06137500-1417718713_thumb.png

Search Page

post-474-0-12745200-1417718766_thumb.png

post-474-0-50258100-1417718780_thumb.png

Filters

post-474-0-89976600-1417718814_thumb.png

Species Page

post-474-0-60902800-1417718840_thumb.png

post-474-0-63065200-1417718850_thumb.png

  • Like 21
Link to comment
Share on other sites

Thanks Adrian,

I find the Contact Us straight to mailto a little annoying

That's part of the minimum viability. :)

There is a proper contact form already built (as well as several other forms via FormBuilder), but the contact form has other options that we weren't ready to introduce, so we decided to go with the simplest option for now.

  • Like 2
Link to comment
Share on other sites

It's already fairly fast with template and markup cache, but up next is a little ProCache.

The images are served a 2x resolution for everyone, but at 20% quality.

$images->first()->size(556,416,array('quality' => 20))

The file sizes are decent, but I also want to add a lazy loading so that only images that make it to the viewport get loaded.

  • Like 1
Link to comment
Share on other sites

A project like this isn't really funded in a big chunk. It comes from different sources, so we had to make some concessions out of the gate to build what we could with the first round of funding. The next phase has funding now, so we can start work again. Might take 3-4 phases to get everything done. 

  • Like 1
Link to comment
Share on other sites

All the taxonomy is handled by page fields. Some are just basic fields like Origin and Growth habit, and others like Conclusion Type and Zones are part of a PageTable. (Screenshots at the end of the post).

There is a lot of JS involved in the filters — more than I have time to explain at the moment. The short version: Filter selections build a URL containing the page IDs for any selected filters via JS.

We needed the URIs to be as short as possible, since they will be frequently emailed, and eventually cited in publications.

They end up looking something like:

/?zones=1030,1028&types=1082,1080&growth_habit=19040,1022

A selector is then built from those GET variables in the template.

// default selector, used for assessment page
$selector = "template=species, limit=16, sort=name,";

// zones GET variables
if ($input->get->zones){
    $zones = explode(",", $input->get->zones);
    $q = implode("|", $zones);
    $selector .= "@conclusions.conclusion_zones={$q}, check_access=0,";
}

It gets a little more complicated, because of the infinite scroll. A maximum of 16 results are initially shown for any query, additional items are pulled in via AJAX on scroll. So if there are GET variables involved, the AJAX call needs to pass them along.

In the JS

function getUrlVars() {
        var vars = {};
        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
            vars[key] = value;
        });
        return vars;
    }

var GET_zones = getUrlVars()["zones"];

There is a GET_* for each possible filter.

All of which are passed via the data param in the $.ajax() call.

data: {
    start:start,
    query:query,
    zones:GET_zones, 
    types:GET_types,
    origin:GET_origin,
    growth_habit:GET_growth_habit,
    tool_used:GET_tool_used
},

Screenshots

post-474-0-95533400-1417792286_thumb.png

post-474-0-00995200-1417792904_thumb.png

This is a bit of a disjointed explanation, but should give you some idea.

:)

  • Like 6
Link to comment
Share on other sites

A majority of the photos are from wikimedia commons. There are other sources too, but that seems to be the majority.

The UF/IFAS Assessment Coordinator was tasked with gathering all the photos (previous incarnations of the assessment were just text).

I gave her a few pointers about resolution, etc... but she really did an amazing job. There are some low-res photos or poorly composed shots here and there. They will all eventually be replaced with higher quality versions.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...