Presentation web site : Create information site for the AccessLocator project

[joshi1983]

Blandine asked to create a website that gives information about AccessLocator. This site will be very independent from the web application in that no one needs to sign in or save anything.

Technical details The site could be made many ways and could be a few HTML, CSS, and just maybe JavaScript files. If you develop in Windows, be careful that any referenced files are a case sensitive match since our Linux hosting will be case sensitive. Don't worry about using git if that'll slow you down.

Where it'll be available She was suggesting that the site be available at accesslocator.com. I(Josh) will handle the domain-name-related work. Give a zip file with the site files and I can put them up.

Deadline The deadline for this will be January 1.

[stephanosm]

I am not sure if the hosting comes with a cPanel with pre-installed scripts e.g. WordPress/Drupal, etc. If it does may be we can set up a quick page with that.

[joshi1983]

Stephanos, the control panel on Digital Ocean is a little different from what you're probably used to but I could get Drupal or WordPress up if that's what Areeba and Rumana think is best. Static file sites can look good too if that's their preference.

How they want the information site to work and be maintained is totally up to whatever Areeba and Rumana are familiar with and their personal preferences.

If they go the static route, I can probably give FTP connection details so they can replace files without me. If they choose Drupal or WordPress, they can update content and themes by signing into the dashboard/admin sections. All those ways seem equally good to me.

[stephanosm]

I will ask them tomorrow morning and see if they know any CMS. thanks!

[joshi1983]

Stephanos requested by email that Drupal be installed for this information site so that's been done.

app.accesslocator.com is the only place to find the main web application that we're making now. Every other domain name such as accesslocator.com and accesslocator.ca is pointing to a fresh install of Drupal so Stephanos can manage the content through the credentials that privately emailed to him.

Who is responsible for the information site? Is Stephanos working on it exclusively for now?

[stephanosm]

Yes, I will work on it.

[areebakamal]

The assignees were actually updated by Josh when he helped with my computer.

[stephanosm]

Josh I need FTP credentials to change the theme

[joshi1983]

@stephanosm I emailed you some SFTP credentials. I used SFTP for a little extra security.

[stephanosm]

I uploaded a new template. Now I need to create the content and figure out how this template works :-)

[joshi1983]

It looks snazzy so far.

[joshi1983]

@stephanosm how's the content coming along?

I wonder if JMCC or Blandine would want to discuss the content or the aesthetics/theme before the Christmas holidays that are fast approaching.

The issue was written with a deadline of January 1 but considering how unavailable most of us will get over Christmas Holidays and that more of the team may want to discuss the site's information, we probably should get this done in the next week.

@Blandine-AA how important was the January 1 deadline and why is it due January 1? I think the date roughly came from you when I made the issue.

• Was it important because Google will start reviewing the grant applications in any time in January?
• Did we tell Google that we'd have a site available at http://accesslocator.com?

[stephanosm]

We will be meeting tomorrow Wednesday at 1:30 in JMCC to discuss this. If you can make it let me know. That would be nice. The content will try to keep it simple and in one page. The idea is to have something to show in case Google visits our site. Yes, we indicate the site name in the proposal and that would be available after Jan 1.

[joshi1983]

No, I can't go to the meeting but hopefully it goes well. I look forward to their feedback. I'll see you and Blandine Friday though since I'll have that time off work.

[RumanaHakeem]

Hi, I have done the coding. I can't figure out how to post it here.So I have zipped all the files,screenshots of how the webpage looks and necessary images in this folder and attached it here.This is how the webpage works. The home button on the webpage keeps us on the info page and on clicking on the ContactUs button, the user is taken to a page where he can see the contact info. Clicking on the logos of all the four organisations at the bottom takes the user to their respective home pages. I have changed the background colour and made a few more changes to the appearance. Please let me know if I need to make any changes. I have tried to align the buttons to the centre of the page but could not do it. Please help me out if anyone knows how to do it. Also, once the logo for the page is figured out, I can replace the old logo with the finalised one. The demo button will be replaced by the video clipping once it is provided to me. Thanks. Rumana. ` informationpage.zip ` Rumana.

[Blandine-AA]

Josh, Is it possible to have this installed so that we can view the web page? I unziped Rumana's file and it doesn't look right.

Stephanos, Is it possible to have access to your initial proposal? Just for comparison and be able to review objectively.

[joshi1983]

Sure I will replace the Drupal site with Rumana's files. I'll also pass the same FTP credentials I gave to Stephanos so she can update the files according to the required tweaks.

[joshi1983]

The FTP credentials have been emailed to Areeba and Rumana. I used an FTP client and the emailed credentials to upload the files Rumana developed so far. http://accesslocator.com/Website.html is one of them. Rumana should be able to replace/tweak the files using an FTP client.

I want to give the following tips to Rumana:

• Some broken links/image references would be fixed by following some of the notes I wrote in the issue description such as "If you develop in Windows, be careful that any referenced files are a case sensitive match since our Linux hosting will be case sensitive." The easiest way to avoid those case sensitivity problems is to just make all files strictly in lower case and reference them that way.

• Some other broken links could be fixed by replacing absolute paths with relative ones such as replacing "C:\Users\TEMP\Desktop\h\contact.html" with "contact.html".

• I suggest moving all the CSS from the styles element to an external CSS file and adding a link element to reference that. This can make it easier to maintain the styles for more than one page in one place. It is easier to maintain the pages in a similar appearance this way.

• None of the images should be over 500kb or they'll be slow to download and resize for some browsers and internet connections. If you can use some graphic editing software like Photoshop or GIMP to resize the images to the dimensions you want show on the site, that will likely get the sizes under 500kb.

• When resizing graphics, maintain the aspect ratio(width divided by height value) so things continue to look natural. The team image looks distorted in Windows because its original dimensions of 1086 by 669 has an aspect ratio of 1.6233 but this was resized to an aspect ratio of 0.9067(680 by 750).

• Rename Website.html to index.html so the page will show when anyone goes to http://accesslocator.com

[joshi1983]

@RumanaHakeem should I take over where you left off? I'm just concerned about there only being a few days until the deadline and not hearing anything from you in the last couple days.

[RumanaHakeem]

Hello, I am going to work on it tonight Josh.In case I can't figure out how exactly that is done, I'll let you know by tomorrow morning then can you please continue from there? Thank you. Rumana.

On 26 Dec 2016 4:27 p.m., "Josh Greig" notifications@github.com wrote:

@RumanaHakeem https://github.com/RumanaHakeem should I take over where you left off? I'm just concerned about there only being a few days until the deadline and not hearing anything from you in the last couple days.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/hhaccessibility/hhaccessibility.github.io/issues/67#issuecomment-269242875, or mute the thread https://github.com/notifications/unsubscribe-auth/AVO5yJzvuO8JVHEtw1Mb1b-5SpUtRTrcks5rMDEjgaJpZM4K7Imz .

[joshi1983]

That sounds good, @RumanaHakeem. Thanks

[joshi1983]

Thanks @RumanaHakeem , I have uploaded all of Rumana's new files and will implement some of the improvements that come to mind.

[RumanaHakeem]

Thank you Josh. I didn't know the email id for our website contact information, so it put dots for now, can you please replace it if u know what the id is? Thank you. Rumana.

On 27 Dec 2016 9:00 a.m., "Josh Greig" notifications@github.com wrote:

Thanks @RumanaHakeem https://github.com/RumanaHakeem , I have uploaded all of Rumana's new files and will implement some of the improvements that come to mind.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/hhaccessibility/hhaccessibility.github.io/issues/67#issuecomment-269329850, or mute the thread https://github.com/notifications/unsubscribe-auth/AVO5yK0j5Ug3QbniW71Yfa2oU27qBtr6ks5rMRoCgaJpZM4K7Imz .

[joshi1983]

Yes, I'll do that in a little while. I'll probably list Blandine and my contact information.

On Tue, Dec 27, 2016 at 10:51 AM, RumanaHakeem notifications@github.com wrote:

Thank you Josh. I didn't know the email id for our website contact information, so it put dots for now, can you please replace it if u know what the id is? Thank you. Rumana.

On 27 Dec 2016 9:00 a.m., "Josh Greig" notifications@github.com wrote:

Thanks @RumanaHakeem https://github.com/RumanaHakeem , I have uploaded all of Rumana's new files and will implement some of the improvements that come to mind.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/hhaccessibility/hhaccessibility.github.io/ issues/67#issuecomment-269329850, or mute the thread https://github.com/notifications/unsubscribe-auth/ AVO5yK0j5Ug3QbniW71Yfa2oU27qBtr6ks5rMRoCgaJpZM4K7Imz .

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/hhaccessibility/hhaccessibility.github.io/issues/67#issuecomment-269343515, or mute the thread https://github.com/notifications/unsubscribe-auth/ALSi7-bRSFVbzcRW3kGQIOKfTna7TDhAks5rMTQSgaJpZM4K7Imz .

-- Josh Greig

[joshi1983]

I implemented a few improvements on what Rumana started at http://accesslocator.com. It should look acceptable on a mobile device even though a reviewer will most likely use a desktop. I added Blandine's email address to the contact page.

I also forwarded an email to @Blandine-AA in response to "Is it possible to have access to your initial proposal? Just for comparison and be able to review objectively."

[joshi1983]

I replaced the demo button image with one provided by Areeba. She and I thought the new image looked better.

[areebakamal]

Meeting:

*Under the Team heading on the site, we need to add a bullet with "Agile/ Scrum Practitioners"

[Blandine-AA]

Following today's meeting, here are the changes required by January 1rst:

• [x] Pick a slogan

• [x] Update the logo with the full version

• [x] Add new section "History", to be the first one, with the following text: "This innovative idea of an accessibility application was presented at the Hacking Health Windsor-Detroit 2016 Hackathon by two paediatric clinicians from the John McGivney Children’s Centre (JMCC), a paediatric rehabilitation facility. The goal of Hacking Health is to find innovative solutions to front-line healthcare problems by bringing together participants involved in software or hardware development with health care specialists. At the end of the hackathon, the project received two awards: 2016 BEST TEAM FROM CANADA and 2016 OVERALL JUDGES' FAVOURITE"

• [x] Update the "About AccessLocator" section. Replace the current text with: "The AccessLocator product will address a lack of specific accessibility information of locations, for individuals with social/cognitive, vision, hearing, communication and physical disabilities. Our unique web and mobile based system will provide a multi-faceted review of a facility’s accessibility by using a comprehensive checklist that looks beyond minimum accessibility standards unlike other available applications which provide limited or unclear information. The outstanding feature of the application is the capability to develop a User Profile that filters accessibility criteria specific to an individual’s needs and truly customizes their search."

• [x] "Team" section: Add "Agile & Scrum Practitioners" below the Disability experts from JMCC, line

• [x] Create new section "Future Plans" after the "Progress" section with the following text: "Over the next three years, our project will be initially introduced to 21 treatment centres representing over 80,000 children and youth with disabilities across Ontario and to various advocacy groups in Canada and the United States. This application will be available to all people with accessibility needs worldwide regardless of age. Our goal is to raise accessibility awareness around the world."

• [x] put the partners in the proper order : OACRS, JMCC, UofW, WE-Tech

[Blandine-AA]

• [x] I unchecked the logo task as the implementation doesn't have the "AccessLocator" name beside it. The slogan can wait few days after January first for Anne and Tracey to provide some feedback, but we need at least the app name.

• [x] My mistake... please use lowercase "p" in "Agile & Scrum Practitioners", for consistency with the rest of the list.

• [x] I think we need to have margins. at least a left one. Maybe we also justify the text? To see how it looks!

• [x] I was looking at the presentation page with the text update and the logo and it occurred to me that we don't need the AccessLocator name and slogan in the middle of the page since we will have it at the top.

• [x] Also, there is lots of space below the picture. I suggest to move the " Click to view slideshow" icon there.

• [x] Then we can have the 2 pictures where they are. The map one will be larger since it will be the full view with the location info.

[joshi1983]

@Blandine-AA can you draw out the layout changes you want? It should be easier to get the margin size and layout you want with a picture than those words.

One of your tasks looks more like general comment than a task. What are you asking to be done in this?

I was looking at the presentation page with the text update and the logo and it occurred to me that we don't need the AccessLocator name and slogan in the middle of the page since we will have it at the top."

[joshi1983]

The following changes were implemented based on feedback from Blandine:

• increased margin a bit
• moved AccessLocator and slogan from middle of page to top of page
• made the Home and Contact menu move to a new row when using very narrow width browser or a mobile phone

I checked off a few subtasks that seemed completed by the listed work.

[joshi1983]

Instead of putting the demo/prototype images under the team photo, how about moving "Future Plans under the team photo?

If the demo/presentation link button was moved under the team photo, I'm not sure how the map and prototype images should be positioned to look good.

[Blandine-AA]

I think we can have 2 rows of images before the partners. I have provided a set of images to use. This can just be tested and see how it works.

The way it is now, if we use the slideshow video, we will need 2 buttons. One for the slideshow video and the other one for the demo. As there is no access to the demo from the slideshow video!

[Blandine-AA]

This is what I had in mind to reorganize the info page with all the extra informations we have: AccessLocator Info Page Sketch.pptx

[joshi1983]

I added the video to the information site in a new page.

The new "Presentation" page looks like this with the video playing immediately:

[Blandine-AA]

Hum... I thought the video would open in a separate tab. The same for the demo, a new tab should open to launch the app.

I don't think that we need to make the ppt available to the public. It should stay an "internal" document.

[joshi1983]

ok. I removed the link to the powerpoint file. I didn't open the video in a new tab because that could disrupt their navigation within the site. Keeping it in a page on our site will keep the menu options for Home and Contact visible on the page. The user could then hit the maximize button on the video to open it up full screen.

[Blandine-AA]

I understand your point... but it doesn't feel right the way it opens now. May be we need some borders or something... It is too "white on white".

Did you look at the sketch?

[joshi1983]

I agree on the border so I darkened the box-shadow that I added before.

I also moved the demo link to be more like the PPT you sent. I'll get more done tomorrow.

[joshi1983]

Since @brucelau-github configured the sending of email, we could add a working contact form to the information site. Is that something we prefer over just showing accesslocator@gmail.com?

[stephanosm]

absolutely! A form is much better than a gmail account!

[Blandine-AA]

Thanks Josh... but please do not use the ppt sketch as is. I just wanted to show where I thought sections should be placed with the images I had. Now we will need to be careful to make it consistent and appealing to the eye and the user.

[joshi1983]

Sure, @Blandine-AA.

I added the links to the demo site and video like in your layout. That change is available at accesslocator.com.

I'm planning to add a working contact form but haven't started work on that quite yet. Maybe tomorrow night.

I started adding a 4 picture grid like suggested in your ppt but will get better images to look more polished on the page. Here's a screenshot from my work in progress:

I'll upload to accesslocator.com only after I get the good images in which will likely be tomorrow night.

[joshi1983]

I stayed up a bit longer than expected working on it and have the grid change published now.

Check it at accesslocator.com

[Blandine-AA]

I had a look at the images on the web site. Here are my comments:

1. If we put six images, they should be on 2 rows. 3 rows, is too much!
2. We don't need both the Sign In and Sign up image. One should be sufficient! I would go for the Sign Up page!
3. We don't need that much details in the caption. Things can change after we start testing. Here are my suggestions:
   • Home page image : "Home page"
   • Profile page image : "User's Profile. Set your accessibility needs to have a personalized view! - Under development"
   • Rate location image : "Rate a Location after signing in (sketch) - Under development"
   • map image : "Location overview report (sketch)- Under development"
   • Sign Up image : "Create a user account to access the personnalisation feature."

[Blandine-AA]

@areebakamal,

When looking at the link icons for the presentation and demo, they are different. I think it would look better if they had identical design features and just the text will be different.

If you have other suggestions, it is greatly appreciated. I just think that it looks a bit weird as it is now.

[areebakamal]

I've updated the demo button to match the presentation button.

[joshi1983]

@areebakamal nice job with the text but the icon has a shadow under it and the presentation link icon doesn't. Also, can you brighten the background colour to match this:

[areebakamal]

How about now?

[areebakamal]

[areebakamal]

Background brightened: