makeabilitylab / makeabilitylabwebsite Goto Github PK

1. We have a trailing comma in the list under the people category. In this case "1 Prof, 1 PhD," -- it's the last comma that shouldn't exist
2. There is an errant thin gray line showing at the bottom above the footer (it's not the footer gray line, that one is fine--it's the line above that one)
3. Change "Professors and Graduate Students" to "Professor and Graduate Students" since this website is just for my research group

Currently, we are using the default django logo, I believe, which is a series of gears. We need to switch this to a custom ML logo.

For the news feed, I was expecting that we basically have mini-blog functionality. In Django, we write a blog post and tag it as a news item. Then, the front page would automatically pull this item in with a title and a little blurb. If you click on the news item, it takes you to the blog post.

Till we decide what were going to do to populate this with content (and we have everyone's buy-in) I am assigning this integration to Post-MVP; I also don't know how much progress has been made on the landing page.

Please add in like ~25 pixels or so of vertical space between carousel and publication content in publications page.

These are minor convenience features that I think would be useful. Rather than requiring that admins download the file and then upload it from their file system, it may be simpler in some cases to enter a link or copy and paste or drag-and-drop. I'm not sure how Django's admin system will handle these cases, but I know there is HTML5/javascript support for it.

We need to be able to crop images like profile images on upload. How best to do this?

Some possible solutions:

• http://asaglimbeni.github.io/clean-image-crop-uploader/
• https://github.com/jonasundderwolf/django-image-cropping (this doesn’t seem right though because it actually stores full image and only crops using javascript—the jcrop library—which, in my mind, means that the user has to download all these full size images even though we are only showing a portion of them)

Would be nice to either use simple markdown when writing news posts to refer to ML people or projects or to auto-parse this stuff from the news post and link to the appropriate things.

Among other things, the logos are not vertically aligned properly:

We should also discuss what other things we might want in the logo and whether we are happy with the current aesthetic.

The publications and talks page have lots of overlapping functionality (other pages may as well). I think it makes sense to refactor the filtering code in the publications.html page so that it can be easily used on the talks.html page as well.

Currently the banner images are rendered as background images, which was necessary in order to get the scaling/cropping behavior I wanted. But that means that we can't give them accessibility features like alt text, which is an issue. At some point soon we need to look into how to add alt tags without breaking the responsive design.

Right now, the migrations folder in Django is a bit of a mess because we are still rapidly changing the database schema and adding more libraries--some of which also require database changes.

So, I'm tempted to remove it from the git repo until things settle down a bit.

Note that it seems like the migrations folder (and files within) are meant to be stored in version control. See:

• http://stackoverflow.com/questions/28035119/should-i-be-adding-the-django-migration-files-in-the-gitignore-file
• https://docs.djangoproject.com/en/1.7/topics/migrations/

See hulu.com for an example of how to do this. We may still have a problem with this on extremely wide and short windows, since we probably don't want it to fill up more than 50-60% of the vertical space. In that case, our choices would be to either add blank space to the sides of the site (like hulu does it), set a maximum height and crop the images (like we're doing now), or allow it to grow to fill the full height of the the screen in extreme cases.

Need to finalize color palette for web page. I'd like a bright, fun color palette to fit the spirit of the lab. See this blue for example.

Do we want to validate filetypes like PDFs on upload?

Evidently, to do this, can use something called python-magic which examines a file and infers what type it is. See:

• http://stackoverflow.com/questions/10937350/how-to-check-type-of-files-without-extensions-in-python
• https://djangosnippets.org/snippets/3039/

At a minimum, we should test the website across:

BROWSERS

• Chrome
• Firefox
• Edge
• Safari

(I'm not interested in supporting backwards compatibility with old web browsers tbh)

DEVICES

• iPhone and Android phones
• iPads

Jon

Need to finalize font for Makeability Lab header text.

The font we have been using is a Helvetica lightweight font variant. Specifically, HelveticaNeueLT Com 23 UltLtEx Bolded for 'make' and HelveticaNeueLT Com 23 UltLtEx for 'ability lab'

This is a pretty wide font, however, and I don't think it will scale well at low sizes. But I think we should at least try it.

Authors on a publication are currently not listed in the order they were added to the publication, but instead in the order the people entries were added to the database. Need to implement an ordering function in the admin page and data models, but I'm not sure how that would work since it needs to be associated with the publication, not the people.

We are currently using a default boostrap font (I believe) in our menu:

In my mocks, I was using HelveticaNeueLT Com 35 Th (regular and bold)--see below. We need to finalize font and integrate.

Update talk page to display selected talk PDFs to the user in the page rather than having them download, view the raw pdf, or move off the website to slideshare.

Currently, it looks like we restrict filenames to 100 characters or less (at least for the publications page). Can we change this to like 255 chars?

The input field for Project Short Name allows for multiple words to be input which is also what gets displayed by the filter code, but when multiple words are used it will cause a javascript error and I am unsure how we want to resolve this issue.

Should we be using CDNs for css files and js files or store them locally on the server?

See: http://www.sitepoint.com/7-reasons-to-use-a-cdn/

There are multiple points in here, we can split these up as separate issues in the tracker as necessary:

• We need to have a grid or opacity overlay on the carousel to darken the images
• Each image in the carousel needs to have title and content text. The content text should be html with clickable links. I think we should be able to upload new images and content for the carousel via Django's admin interface, so we will need to program this. We also need to support ALT data as I want to make this website as accessible as possible.
• How tall should the carousel be? It's currently 500px. One of the websites that has well-designed templates is Squarespace. For one template, for example, they are using 475px height on frontpage and 335px for other pages. See http://www.lucyrodina.com/

This should be similar, I think, to the people overview page and the talks page.

Note: this is the overview page that lists all of our projects and not the individual project pages (which is assigned to @Manaswis ).

Currently, there is lots of javascript code embedded into publications.html. Where possible, I think it's best to include javascript code in stand-alone file in static/website/js rather than embedded in a template file.

Since we're using a responsive design for the carousel images, it's not entirely clear how we should handle it on the admin side to make sure that we're choosing good images that won't appear overly cropped on different screen sizes. Does anyone have any suggestions?

We should explore this for a future update, but for now you should just check how the image appears on the actual site for different window sizes.

Implement auto generation of Short Title: use a character count that cuts off at closest word under maximum and then has ellipses at end to indicate the cutoff. Also, set a good maximum as current 100 char limit was set somewhat arbitrarily.

I thought I remembered reading in the dev docs somewhere that while SQLite is great for dev environments, it should not actually be used for the actual production server.

However, I just checked the docs and it looks like, perhaps, we could just stick with SQLite for now: https://docs.djangoproject.com/en/1.9/ref/databases/. What do you guys think?

Jon

Mockup and design MVP version of people gallery page.

The current filter that's implemented in the ML publications page does not highlight the filter terms in the DOM, which I think is essential--this is the way I implemented it on my webpage. See some examples below:

Before we shift our github from being private to public, we need that none of our passwords/security settings leak out. How to do that?

Could be useful if we wanted to do interesting mouse hover behavior on thumbnails to quickly enlarge them and provide more information.

Need to add in award overlay icons for talks and pubs pages.

The media folder hosts all of the uploads for the website, including: talk PDF and PPTX, paper PDFs, website images, etc. Do we want all of this stuff also in github? Probably not, right? We just want the code in github. So, we will need to probably do a git ignore on the media folder?

The problem, then, is in local development. You won't be able to see the thumbnails and other media in the 'media' folder on the server when you're doing local dev.

This could include: abstract, links to videos and talks, links to project page, etc.

To make it easier to add content to our webpage, I want to support entering publications by copying/pasting bibtex. This data should then be used to auto-fill in our publication or talk form. I have this sort of working. See templates/admin/website/publication/bibtex_form.html

Add in HCIL Hackerspace info either to the landing page or as a top-level menu link with dedicated page.

I want all study recruitment docs to be hosted off of the ML website--like this one, for example:
http://www.cs.umd.edu/~jonf/glassear.html

To make it easier to make these sorts of pages in the future, I want to make a Django template. Moreover, I think we could even have this be a form that people fill out with necessary information for screening purposes (which will differ depending on each study).

Currently the publications page only includes the text citation, but it would also be useful to provide bibtex data for copy and paste purposes. This should appear in the same popup, probably as a tab (similar to ACM).

We need to develop django support for the image carousels we have on each page. I think we should be able to upload new images and content for the carousel via Django's admin interface, so we will need to program this. Each image in the carousel needs to have title and content text. The content text should be html with clickable links. We also need to support ALT data as I want to make this website as accessible as possible.

There are sort of three different carousels imo:

• Landing page carousels: these need to be the most striking images. Also, the dimensions are different here because landing page has larger vertical
• Publications, Talks, People, etc. pages need relevant carousel images (e.g., people page carousel has images of our group). These are all same dimensions.
• Individual project page. This is yet to be determined but each individual project page should cycle through relevant images to that project.

Not sure exactly how to implement this. Will need to discuss.

I think Lee is most equipped to do accomplish this task so assigning him initially.

This is related to #2

For the news feed and other areas of the website, would be nice to have rich text editor support in the Django admin interface.

Need to add in Google Analytics and statcounter to webpage. I'll look into doing this.

Here's an example with some dummy data:

We should probably set a fixed height so that the titles line up, and then vertically center the image.

I think the content width is slightly too wide. Looks like currently set to 1170px. Hmm, but that’s what the grayscale webpage is set to for content so maybe OK…?

I want us to create a Django page/form for high school and undergrad applicants to apply to do research with our group.

The form should ask questions about technical background, allow for the uploading of documents (resume, portfolio), and provide a blank for a personal statement.

See http://www.cs.umd.edu/~jonf/advising.html#ugradresearch for details.