|
| 1 | +# p5 /teach reorganize & update |
| 2 | +#### by Gracia Zhang ([@Gracia-zhang](https://github.com/Gracia-zhang)), mentored by ([@yinhwa](https://github.com/yinhwa)) |
| 3 | + |
| 4 | + |
| 5 | +## Overview |
| 6 | + |
| 7 | + |
| 8 | +Updated 12 new posts that were submitted in the past two years on Teach Page, using yaml and Handlebars. Re-design the user interface(UI) and the experience of the Teach Page with new functions and features. And responsible for the front-end development of this web page. The project was mentored by Inhwa Yeom. |
| 9 | + |
| 10 | + |
| 11 | +* Project Page: https://p5js.org/teach/ |
| 12 | + |
| 13 | + |
| 14 | +* Final Pull Request(UI/UX update): https://github.com/processing/p5.js-website/pull/1275 |
| 15 | + |
| 16 | + |
| 17 | +## Goal & Approach |
| 18 | + |
| 19 | + |
| 20 | +This project is an update and extension of Inhwa's project “p5 for 50+ teaching”. She has archived and visualized workshops, classes and relevant materials to better provide the community with access to education-related resources. |
| 21 | + |
| 22 | + |
| 23 | +In this project, I updated the posts based on the recent submission form first to be familiar with the original /Teach and to research the user through the submitted forms. Based on user studies, I intend to bring more learners & diversity on /teach page by optimizing the submission form with a new form for learners who want to share and a new section "Upcoming Workshops". Inhwa and I hope that this new section will bring in more willing learners and give more teachers the opportunity to share their workshops, classes, etc. |
| 24 | + |
| 25 | + |
| 26 | +## Updating posts |
| 27 | + |
| 28 | + |
| 29 | +### Screening the submission forms for the last two years |
| 30 | + |
| 31 | + |
| 32 | +#### 1)Filter unpublishable contents |
| 33 | +-the answer in the spreadsheet doesn't seem like a full version. |
| 34 | +-filled the form up with unrelated contents. |
| 35 | + |
| 36 | + |
| 37 | +#### 2)Update the other contents. |
| 38 | +-updated with 12 filtered contents in yaml file. |
| 39 | +-added the corresponding model box for each of the 12 new posts. |
| 40 | + |
| 41 | +* Teach Page Rebasing Pull Request: https://github.com/processing/p5.js-website/pull/1245 |
| 42 | + |
| 43 | +* Teach Page Posts Update Pull Request: https://github.com/processing/p5.js-website/pull/1249 |
| 44 | + |
| 45 | + |
| 46 | +## UI/UX Design |
| 47 | + |
| 48 | +Besides the specific UI/UX changes below, I also proposed an issue in processing/p5.js-website about the overall structural changes to enhance the user experience.[#1250](https://github.com/processing/p5.js-website/issues/1250) |
| 49 | + |
| 50 | + |
| 51 | + |
| 52 | + |
| 53 | + |
| 54 | +#### 1)Upcoming Workshops |
| 55 | + |
| 56 | +Following the original UI style, I used a combination of banners and headers to present the new workshops to guarantee accessibility. Also, to make it easier for users to plan their time, I have added workshop start time in this section. |
| 57 | + |
| 58 | + |
| 59 | +#### 2)Corresponding Tags |
| 60 | + |
| 61 | +In order to allow users to see the results of their selection more visually after selecting the filtering options, I added a tags column to the right of each posts and added a color change corresponding to being selected. |
| 62 | + |
| 63 | + |
| 64 | +## Submission Questionnaire Re-Design |
| 65 | + |
| 66 | +I adapted the original Submission Form specifically for learners. |
| 67 | +With the help of Saber and Inhwa, I also updated the parts of the original form that could be ambiguous, to try to avoid misunderstandings and irrelevant content when the sharers fill out the form. [Updated form.](https://forms.gle/GVLrxrvuBTpSTzgCA) |
| 68 | + |
| 69 | + |
| 70 | +### Updating Submission Form for Learners |
| 71 | + |
| 72 | +#### 1)In the guidelines: |
| 73 | + |
| 74 | +- Changed the guideline for potential learners and added a section to encourage learners to share. |
| 75 | +- Added a note for non-English submissions to remind submitters that their responses will be automatically translated into English. |
| 76 | + |
| 77 | +#### 2)For learners to share their experiences: |
| 78 | + |
| 79 | +- Added a question to differentiate teachers and learners. |
| 80 | +- Removed the question about teaching goal and method. |
| 81 | +- Added questions about learning feelings and difficulties encountered. |
| 82 | + |
| 83 | +### New Submission Form for Upcoming Workshops |
| 84 | + |
| 85 | +For the new section "Upcoming workshops", I designed a new form for the submission, including basic information about the workshop and the teacher. [New form.](https://forms.gle/mP9oFpeA4SMWoi446) |
| 86 | + |
| 87 | +## Implementation |
| 88 | + |
| 89 | +Languages: HTML, CSS, jQuery |
| 90 | + |
| 91 | + |
| 92 | +- Created an “upcoming workshops” section in the HTML file. |
| 93 | +- Added script for showing/hiding each banner when different titles are clicked. |
| 94 | +- Added HTML & jQuery & CSS codes for the preliminary versions of corresponding tags |
| 95 | +- Edited HTML & jQuery & CSS codes for the final version of UI/UX design |
| 96 | +- Added Css code for responsive web design on mobile devices. |
| 97 | + |
| 98 | +Upcoming Workshops are still on open call for specific engagement content.[#1277](https://github.com/processing/p5.js-website/issues/1277) |
| 99 | + |
| 100 | +## Future Plan & Sustainability |
| 101 | + |
| 102 | +My future contribution plans |
| 103 | +- Add Chinese translation (As a Chinese Translation Stewards: [#1220](https://github.com/processing/p5.js-website/issues/1220)) |
| 104 | +- Keep updating posts and upcoming workshops |
| 105 | +- Help with the website user experience not limited to /teach.([#1250](https://github.com/processing/p5.js-website/issues/1250)) |
| 106 | +- Start updating the workshops from an open call about “Upcoming workshops” and Learner-friendly form to gather more teachers and learners to join the /teach contribution.([#1277](https://github.com/processing/p5.js-website/issues/1277)) |
| 107 | + |
| 108 | + |
| 109 | +For Future Contributors: |
| 110 | +- Add Spanish, Japanese, Hindi translation |
| 111 | +- Gather more teaching experiences from around the world! |
| 112 | +- Bring more ideas to keep the page visible and useful |
| 113 | + |
| 114 | + |
| 115 | +## Acknowledgements |
| 116 | + |
| 117 | +The first person I want to thank is Inhwa. I have to say, I looooove Inhwa as my mentor!!! I am a beginner in front-end and she helped me a lot throughout the GSoC project in every way. I couldn't have completed my project without her help. She encouraged me when I was hesitant about the direction, and explained in detail when I had problems with the code. She is both my mentor and my friend! |
| 118 | + |
| 119 | +I would also like to thank Saber and Qianqian.The discussion with them about education has been very profitable and I have a more solid idea about my project. |
0 commit comments