Jump to content
renobird

Florida Non-Native Plant Species

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

Share this post


Link to post
Share on other sites

Love it Tom - really nice design and functionality - very sharp!

One comment at the moment - maybe it's just me, but I find the Contact Us straight to mailto a little annoying :)

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Thanks Peter.

Do you mean how they work from a PHP/PW standpoint, or JS?

Share this post


Link to post
Share on other sites

I guess both. Just a brief description of what going on in the background in terms of PW, PHP and then the JS.

Are the zones and origins etc tags in PW and how you are pulling them onto a web page and then displaying results?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Forgot to mention: There is some $input->whitelist() stuff going on in the real code, but I left it out of the examples above for the sake of simplicity.

Share this post


Link to post
Share on other sites

Phase 2 has some other really cool features coming for the filters. Like result counts and "disabling" options if the combinations would results in 0 results.

Share this post


Link to post
Share on other sites

Thanks so much. Great to read how it was approached and implemented.

The photography of the plants is largely very good. Was that something you had a part in or was there a library you chose from?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

This might be the finest big, data-heavy PW site (aside from some of Ryan's sites obvs  :) ), I've seen. Great work, and please keep us up to date on future developments.

  • Like 3

Share this post


Link to post
Share on other sites

Thanks Dave!  :)

The next phase will make this look simple in comparison. Some of the paper processes that are being turned into web based tools are intense.

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...