Name
TAP - Technology and Perceptibility
Link to deployment of TAP
- NOTE: This project is being archived and development is being ceased. Will post a link to a new and improved project when it is available. This repo will remain as an example of the author's previous work.
Project Management Pages:
Project Overview
Important Concepts
Ultimate Goals of The Project
- Research and/or literature reviews need to be done to understand how best to provide effective access to technology, both physical individual-use devices and a means of high-speed internet access.
- Research and/or literature reviews need to be done to understand how other people perceive the world in order to make sure technology is accessible and technology training is effective.
- This application can be used in the future to store in-house data models, which would be produced by in-house researchers. This information would be used to make decisions on how best to spend resources to provide three things to underserved individuals:
- Physical technology devices.
- Some form of high speed internet access.
- Training in digital literacy.
- This application can be used to store reference code-snippets of accessible features of web applications, this information would be useful for website developers.
Accessibility with Alternative Navigation.
- Application must be accessible to users of alternative navigation.
- Application can be tested manually[^firefox-accessibility-tester] or use automated testing.
Libraries and Frameworks
Features
User Stories
- As an Alternative Navigation user, I want to navigate the application using keyboard only, because this is how I access internet content.
- [x] Learn how to make important content waypoints navigable.
- As an Alternative Navigation user, I want to navigate the application using screen-reader and keyboard only, because this is how I access internet content.
- [x] Learn how to make important content waypoints navigable.
- As a Color Blind user, I want to the application to have adequate contrast, because adequate contrast is important for reading and understanding application content.
- [x] Use Color Contrast Analyser as project is built.
- As a User, I want to be able to create a login account, because I want to use the app in the future to view and edit TAPs.
- [X] Create User Model.
- [X] Create CustomUser model in case additional User model fields might be needed in future.
- [ ] Create API for User Model.
- [X] Create or use existing
api app:
- [X] Create Django REST API
urls.py for Users.
- [X] Create Django REST API
serializers.py for Users.
- [ ] Create Django REST API
permissions.py for Users.
- [ ] Create Django REST API
views.py for Users.
- As a User, I want to be able to save a set of three fields (url, url title, url description), because I want to refer to them in the future.
- [X] Create TAP (data) Model.
- [X] Create basic TAP Model:
- [ ] Modify TAP Model to include (or verify it includes) all required fields:
- [X] URL
- [X] URL Title
- [X] URL Label
- [X] URL Description
- [ ] Other fields:
- [X] Add foreign key to link multiple TAPs to a single user. Will this be in both 'Tap' and 'CustomUser'? posts.models.py - It seems there is no need to add to a
users.models.py.
- [ ] Create API for TAP Model.
- [X] Create or use existing
api app:
- [X] Create Django REST API
views.py for TAPs.
- [X] Create Django REST API
urls.py for TAPs.
- [X] Create Django REST API
serializers.py for TAPs.
- [ ] Modify (or verify) TAP API to include all required fields:
- [X] Create Django REST API
permissions.py for TAPs.
- [ ] Create permission in
permissions.py to allow editing of TAPs by User who owns the TAP.
- [ ] Incorporate permissions in
views.py.
- [X] Create input fields (using Vue) for TAP creation component.
- [X] Bind the input fields to the Vue model.
- [X] Create button to submit TAP creation action.
- [X] Use 'v-on:click' or '@click'
- As a User, I want to access my previously saved field sets, because I want to review and have access to the saved links' url and information.
NOTE: These features may be completed in User story above.
- As A mobile phone user, I need to be able to view the field sets.
- [x] Ensure site displays appropriately on small screens.
Miscellaneous Tasks:
- [X] Apply CSS:
- [X] Apply sticky footer to
base.html.
- [X] Apply
flex and @media to a top nav/header. As screen width grows, move from stacked title/nav to side-by-side with one on right and one on left.
- [X] Compare my own 'cards' in Stuff project to Card - Download the code.[^cards-and-accessibility]
[^cards-and-accessibility]:Cards Accessibility Issues
Stretch Goals
- As a User, I want to be able to view the data of an external site's API provided for consumption in a format I can read, because I want to be able to review data from outside organizations.[^external-site-api][^stretch-goal]
- As a User, I want to be able to view the data of the external site in both graphical-chart and table forms, because I want to be able to know the value trends in the data presented.[^external-site-api][^stretch-goal]
- As a User, I want to be able to save a fourth element of the above field sets in the form of a code snippet, because I want to be able to include a snippet of code in addition to the existing three fields. This field can be useful to developers who want to share notes.[^stretch-goal]
- As a User, I want to share my field sets with other users in the form of common access field sets or shared via email or message system, because I want to share my knowledge and interests with other users.[^stretch-goal]
[^stretch-goal]:
Stretch Goals
Data Models
- User
- First Name
- Last Name
- Email
- Three/Four Element Field Set
- URL
- URL Title
- URL Description
- Code Snippet[^stretch-goal]
- Data model for external sites' API[^external-site-api][^stretch-goal]
[^external-site-api]:
External API to be determined.
Schedule
Mar 30 - Mar 30:
- [X] 0.5 Days - Learn FireFox Accessibility Tester[^firefox-accessibility-tester]
Mar 30 - Mar 30:
- [X] 0.5 Days - Learn Materialize - Decided to try my own CSS due to font-size issues
Mar 31 - Mar 31:
- [X] 0.5 Days - Practice my own custom CSS - We Got Stuff!
Mar 31 - Mar 31:
- [X] 0.5 Days - Learn proper accessible ARIA and HTML tags - HTML Elements
Apr 01 - Apr 04:
- [X] 1.5 Days - Learn Django REST Framework testing
- [X] 1.5 Days - Write Django (REST) tests
Apr 06 - Apr 07:
- [X] 1.5 Days - TAP Model - API and Front End
Apr 07 - Apr 10:
- [x] 1.5 Days - Finish 1. Minimum Viable Product
Apr 11 - Apr 12:
- [ ] 2 Days - Finish 2. Accessibility Enhancements
Apr 13 - Apr 14:
- [ ] 1.0 Days - Learn Chart.js or 3D[^stretch-goal]
[^firefox-accessibility-tester]: FireFox Accessiblity Tester
Project Setup
- [X] Create GitHub repository for TAP project
- [X] Create pipenv
- [X] Create Django project
Extras and Reminders
- [ ] Favicon.
- [x] Normalize the css.
- [ ] Check order of \<script> tags to ensure proper script execution.
- [x] Check some of the links in Vue console when there are errors/warnings. Sometimes the link will show the actual location of bug even though line numbers may be different than in IDE.
- [x] CSS is almost done. Add card for CSS finishing touches to the backlog. Finish it some other day.
License
This project is licensed under the [GNU General Public License v3.0] License - see the LICENSE.md file for details
Resources
Inspiration, examples, code snippets, etc.