Skip to content

Commit 4202644

Browse files
authored
Merge pull request #5796 from Gracia-zhang/patch-2
Create graciazhang_gsoc_2022.md
2 parents 5c2d252 + c01a7ef commit 4202644

File tree

1 file changed

+119
-0
lines changed

1 file changed

+119
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
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+
![](https://drive.google.com/uc?export=veiw&id=1r-wriIvnOPLL6G-ihrL-9wOSEOKfY7l3)
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

Comments
 (0)