class: center, middle, bg-info, text-light
# Applying Web-based Resource
<hr class="bg-light" />
## Cyrus Ngan @ LPSS
### [cyrusn.github.io][@01]
---
# Agenda
- About Me
- First Project
- Google Services
- 在學證明書 (Testimonial) 申報活動
- 模擬升學出路選填
- School / Careers Calendar
- Programming
- Subject Selection System
- Online Vocabulary Test
- Line up system
- TL;DR
- Free resources
- Other useful application
---
# About Me <i class="fas fa-user"></i>
## Cyrus Ngan
- .badge.badge-info[@LPSS]
- Careers Master
- Math Teacher
- Exco of HKACMGM
- Math Major
- My best friend is a .text-danger[programmer]
- Transition from .badge.badge-warning[HKCEE] (2012) ➞ .badge.badge-danger[HKDSE]
---
class: middle center bg-info text-light
# If you have no time to learn, find one.
---
# Career and Life Planning Committee
- Life Planning Education
- Curriculum (F1 - F3, F4 - F5)
- Education (Students / Teachers / Parents)
- Careers Assessment
- Career Guidance
- F6 transitions (JUPUS, EApp, VTC, Taiwan, Mainland ...)
- Testimonial (F6)
- SLP (F6)
- OLE report (F1 - F5)
- ApL
- Subject Selection
- Career Counseling
- Principal Nomination
- Reference Letter
---
# How I learn programming
- What kind of IT support you need?
- IT Support .badge.badge-warning[vs] Problem solver?
- 命運係掌握係自己手
<!-- ---
# CaLP Homepage
- [聖公會李炳中學 | 生涯規劃部][@02]
- [Facebook | 聖公會李炳中學﹣生涯規劃部][@03]
-->
---
class: middle bg-dark text-light
# Sharing experiences on using Google Services
<hr class="bg-light">
.right[## Form, Calendar, Email, .text-danger[**Script**]]
---
# Google Services
They are not standalone, you can orchestrate them by .text-danger[Google Script].
.d-flex.flex-row[
.p-2[[![spreadsheet][@04-img]][@04-url]]
.p-2[[![document][@05-img]][@05-url]]
.p-2[[![slides][@06-img]][@06-url]]
.p-2[[![forms][@07-img]][@07-url]]
.p-2[[![drive][@08-img]][@08-url]]
.p-2[[![gmail][@09-img]][@09-url]]
.p-2[[![calendar][@10-img]][@10-url]]
.p-2[[![contacts][@11-img]][@11-url]]
.p-2[[![maps][@12-img]][@12-url]]
.p-2[[![language][@13-img]][@13-url]]
]
---
# [在學證明書 (Testimonial) 申報活動][@14]
.row[
.col-7[
學生如有需要，可利用在學證明書作報讀課程之用
| Date | Event |
|------|------------------------------|
| May | 班主任填寫學生能力評估及評語 |
| Jun | 學生申報活動 |
| Sept | 核對在學證明書初稿 |
| Nov | 派發在學證明書 |
]
.col-5[
.overflow.h-75.img-100.mx-auto.border[
[![testimonail][@18]][@15]
]]]
---
# [模擬升學出路選填][@16]
.row[
.col-6[
| Date | Event |
| ---- | ---------------------------------- |
| Apr | 生涯規劃輔導 1 |
| May | 期終考試 |
| Jun | 多元升學途徑簡介 |
| Jun | 生涯規劃輔導 2 |
| Jul | .text-danger[**多元升學出路選填**] |
| Aug | .text-danger[**中六級第一次考試**] |
]
.col-6[
| Date | Event |
|------|-------------------------------|
| Sep | 派發8月考試成績 |
| Sep | 升學出路志向表 |
| Oct | 生涯規劃輔導 3 / 事業興趣測驗 |
| Nov | 生涯規劃輔導 4 （.text-danger[**派發選填結果**]） |
| Jan | 模擬考試 |
| Feb | 生涯規劃輔導 5 |
]]
---
class: center middle medium
# 模擬升學出路選填
<div class="mermaid">
graph TB
A("6月出路選填")
B("8月考試成績")
C("10月生涯規劃輔導<br>(派發模擬升學結果)")
D("11~1月完成各系統報名程序")
A --> C
B --> C
C --> |"跟進"| D
</div>
---
# How Google Services help
.row[
.col-7[
- Using Google Form to collect student's preference
- JUPAS × 5
- EApp × 5
- VTC × 4
- Mainland × 4
- Taiwan × 4
- Other × 3
- Generate Google Doc from the Google Sheet (Like mail merge in MS Office)
]
.col-5[
.overflow.h-75.img-100.mx-auto.border[
![multipathway][@17]
]]]
---
class: middle center
# [中六臺灣升學讀書計劃及自傳寫作][@18]
## 收集，整埋
---
class: middle center
# 電郵戶口密碼
事業興趣測驗
JUPAS, EAPP 老師戶口 ...
---
# Google Calendar
- [CaLP Calendar - Google Sheets][@19]
<iframe src="https://calendar.google.com/calendar/embed?title=F1%20-%20F6%20Schedules&height=600&wkst=1&bgcolor=%23FFFFFF&src=liping.edu.hk_urfir3sscv3oejlhja4d94tk5k%40group.calendar.google.com&color=%23182C57&src=liping.edu.hk_6p82i74fds3dp5omlc1g4b4jgc%40group.calendar.google.com&color=%238C500B&ctz=Asia%2FHong_Kong" style="border-width:0" width="100%" height="70%" frameborder="0" scrolling="no"></iframe>
---
# Other projects
- [Subject Selection System][@20]
- [School Reference Report][@21]
- [Online Vocabulary Test][@22]
- [A lineup programme][@23]
---
class: center middle bg-primary text-light
# TL;DR
## [Tutorial on Google Script][@24]
---
# Free resources
## Start from scratch
- [Harvard University CS50.tv][@25]
- [Codecademy][@26]
- HTML (3Hrs) .badge.badge-info[Create Webpage]
- CSS (11hrs) .badge.badge-info[Style Webpage]
- JavaScript (5hrs) .badge.badge-danger[Interaction with Webpage]
- Command Line (3hrs) .badge.badge-info[Navigate in Unix system]
- [freeCodeCamp][@27]
- [Apps Script | Google Developers][@28]
---
# Other useful application
- [DigitalOcean: Cloud Computing, Simplicity at Scale][@29]
- [WordPress.com: Create a free website or blog][@30]
---
class: center middle
## .text-danger[♥] Thanks .text-danger[♥]
<!-- reference links -->
[@01]: https://cyrusn.github.io
[@02]: https://careers.liping.edu.hk/
[@03]: https://www.facebook.com/skhlpss.calp/
[@04-img]: https://www.gstatic.com/images/branding/product/2x/sheets_48dp.png
[@04-url]: https://developers.google.com/apps-script/reference/spreadsheet/
[@05-img]: https://www.gstatic.com/images/branding/product/2x/docs_48dp.png
[@05-url]: https://developers.google.com/apps-script/reference/document/
[@06-img]: https://www.gstatic.com/images/branding/product/2x/slides_48dp.png
[@06-url]: https://developers.google.com/apps-script/reference/slides/
[@07-img]: https://www.gstatic.com/images/branding/product/2x/forms_48dp.png
[@07-url]: https://developers.google.com/apps-script/reference/forms/
[@08-img]: https://www.gstatic.com/images/branding/product/2x/drive_48dp.png
[@08-url]: https://developers.google.com/apps-script/reference/drive/
[@09-img]: https://www.gstatic.com/images/branding/product/2x/gmail_48dp.png
[@09-url]: https://developers.google.com/apps-script/reference/gmail/
[@10-img]: https://www.gstatic.com/images/branding/product/2x/calendar_48dp.png
[@10-url]: https://developers.google.com/apps-script/reference/calendar/
[@11-img]: https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png
[@11-url]: https://developers.google.com/apps-script/reference/contacts/
[@12-img]: https://www.gstatic.com/images/branding/product/2x/maps_48dp.png
[@12-url]: https://developers.google.com/apps-script/reference/maps/
[@13-img]: https://www.gstatic.com/images/branding/product/2x/translate_48dp.png
[@13-url]: https://developers.google.com/apps-script/reference/language/
[@14]: https://docs.google.com/forms/u/1/d/e/1FAIpQLSdrLlYG0_nv2ysgySRRdg467FywRhs2aMO9Fmm9O5lXdiTudQ/viewform
[@15]: ./testimonail.png
[@16]: https://docs.google.com/forms/d/e/1FAIpQLSfCGaNOWY7Bw0rWNDEDnEkzkzEMXyCxBGRwouM8ELXZj2b5Ag/viewform
[@17]: ./mock-multipathway.png
[@18]: https://careers.liping.edu.hk/taiwan-individual/
[@19]: https://docs.google.com/spreadsheets/d/e/2PACX-1vQJhh0bU5NAjAggS1-RjkEtNovUAfkomhtdW_CdnFedaGRaUqEVj21b07ztBxXe_GAhH_hv0vGgl7xT/pubhtml?gid=0&single=true
[@20]: https://careers.liping.edu.hk/ss
[@21]: https://github.com/cyrusn/srr-overall-rating-convertor
[@22]: https://careers.liping.edu.hk/edict/
[@23]: https://careers.liping.edu.hk/lineup
[@24]: ../tutorial-on-google-script
[@25]: http://cs50.tv/2017/fall/
[@26]: https://www.codecademy.com/learn
[@27]: https://www.freecodecamp.org/
[@28]: https://developers.google.com/apps-script/
[@29]: https://www.digitalocean.com/
[@30]: https://wordpress.com/