MEANJS Tutorial – bossable(30 DAY MEAN STACK CHALLENGE)

http://www.bossable.com/

http://meanjs.org/
https://www.heroku.com/
https://toolbelt.heroku.com/
http://mongoosejs.com/
http://getbootstrap.com/
http://expressjs.com/
https://angularjs.org/
https://docs.angularjs.org/api/ng/directive
https://angular-ui.github.io/
http://angular-ui.github.io/bootstrap/#/modal

4.
home.client.view.html
Boostrap
core.css
home.client.controller.js
$scope.alerts
home.client.view.html
ng-repeat https://docs.angularjs.org/api/ng/directive/ngRepeat

5.
\config\strategies\facebook.js
// Create the user OAuth profile
var providerUserProfile = {
firstName: profile.name.givenName,
lastName: profile.name.familyName,
displayName: profile.displayName,
email: profile.emails[0].value,
username: profile.username,
provider: ‘facebook’,
providerIdentifierField: ‘id’,
providerData: providerData
};

6. Sign In Page
\public\modules\users\views\authentication\signin.client.view.html
http://getbootstrap.com/components/#input-groups

7.
\public\modules\users\views\authentication\signin.client.view.html
\public\modules\users\css\users.css
\node_modules\passport-local\lib\strategy.js
Alerts http://getbootstrap.com/components/#alerts
\public\modules\users\controllers\authentication.client.controller.js

8.
\public\modules\users\views\authentication\signup.client.view.html

9.
\public\modules\users\
\public\modules\core\services\menus.client.service.js
\public\modules\customers
\public\modules\customers\config\customers.client.routes.js
http://localhost:3000/#!/customers

10.
\app\models\customer.server.model.js
\app\controllers\customers.server.controller.js
\app\routes\customers.server.routes.js
\public\modules\customers\services\customers.client.service.js
\public\modules\customers\controllers\customers.client.controller.js
// Create new Customer
$scope.create = function() {
// Create new Customer object
var customer = new Customers ({
firstName: this.firstName,
surname: this.surname;
suburb: this.suburb,
country: this.country,
industry: this.industry,
email: this.email,
phone: this.phone,
referred: this.referred,
channel: this.channel
});
\public\modules\customers\config\customers.client.routes.js
\public\modules\customers\views\view-customer.client.view.html
http://localhost:3000/#!/customers/create

11.

12.
\public\modules\customers\views\create-customer.client.view.html

13.
\public\modules\customers\css\customers.css

14.

15.
\public\modules\customers\views\list-customers.client.view.html
\public\modules\customers\services\customers.client.service.js
\app\routes\customers.server.routes.js
\app\controllers\customers.server.controller.js

16.

17.
\app\models\customer.server.model.js

18.
https://docs.angularjs.org/api/ng/filter/filter

19.
http://getbootstrap.com/javascript/#modals
\public\modules\customers\controllers\customers.client.controller.js

20.
\public\modules\customers\config\customers.client.routes.js
\public\modules\customers\views\edit-customer.client.view.html

21.

22.

24.
https://docs.angularjs.org/guide/directive

\public\modules\customers\views\view-customer.client.view.html
Rename to
\public\modules\customers\views\customer-list-template.html

25.

29.
\server.js
\config\express.js
\config\env\all.js
\bower.json
\config\env\production.js

30.
cmd $ grunt build
\public\dist\
package.json

30(i).
https://www.heroku.com/
https://toolbelt.heroku.com/

cmd $ heroku login
cmd $ cd PROJECT PATH
cmd $ heroku create
cmd $ git push heroku master
cmd $ heroku config:set NODE_ENV = production
cmd $ heroku open

環景圖 (panorama)

關鍵字

panorama maker
panorama software
panorama 360
360 全景 軟體
全景合成軟體
360度全景照片

軟件

http://hugin.sourceforge.net/
http://www.arcsoft.com/panorama-maker/
http://research.microsoft.com/en-us/um/redmond/groups/ivm/ice/
http://www.dermandar.com/
http://www.panomonkey.com/
http://cs.bath.ac.uk/brown/autostitch/autostitch.html

參考資料

http://zh.wikipedia.org/zh-hant/%E5%85%A8%E6%99%AF%E5%9B%BE

http://worldwidepanorama.org/worldwidepanorama/wwp/index.html
http://www.360cities.net/

http://iapp.com.tw/2013/05/panorama-360-cities/

https://www.pcschool.com.tw/campus/share/lib/251/index.htm
http://key.chtouch.com/ContentView.aspx?P=819
http://steachs.com/archives/3676
http://solomo.xinmedia.com/photo/4407-MicrosoftICE

兒童編程二三事

介紹

編程(寫程式)以往是成年人的事, 是高深的事情, 小孩不合適參與. 隨著科技發展,
開源軟/硬體發展迅速, 加上一些有心人推動, 小孩參與編程是大勢所趨,為未來世界培育更多人才.

工具

Scratch
http://scratch.mit.edu/

ScratchJr – Coding for young children
http://www.scratchjr.org/

Stencyl
http://www.stencyl.com/

App Inventor
http://appinventor.mit.edu/

Kodu
http://www.kodugamelab.com/

kano
http://www.kano.me/

Arduino
http://www.arduino.cc/

Raspberry Pi
http://www.raspberrypi.org/

相關資源

Koding Kingdom
http://kodingkingdom.com/

Let’s Code (HK)
http://letscode.org.hk/

Rails Girls Hong Kong
http://railsgirls.com/
http://railsgirls.com/hongkong
http://railsgirls.tw/

WOMEN WHO CODE HONG KONG
http://www.womenwhocodehk.com/

EDUx Taiwan
http://www.edux.tw/

iCodeSchool.org
http://icodeschool.org/

Code.org
http://code.org/

Code Club
https://www.codeclub.org.uk/

Computer Science Education Week
http://csedweek.org/

The Creativity Post
http://www.creativitypost.com/

兒童程式設計 KidsCoding
http://kidscodingclub.blogspot.hk/

參考資料

全民寫程式運動 BBC推Kid Coding服務
http://innomambo.com/2014/09/bbc-announced-kid-coding-education-service/
BBC begins kids coding push with Bitesize and TV shows
http://www.bbc.com/news/technology-28984411

[專訪] Raspberry Pi創辦人Eben Upton
http://innomambo.com/2014/08/interview-with-raspberry-pi%CA%BBs-foundr-eben-upton/

翻轉教育的程式語言 – Python
http://innomambo.com/2014/05/language-to-reverse-education-python/

鼓勵兒童於歡笑中學習編程.數碼港首辦「易童功夏令營」
http://www.bqjournal.com/?p=55883

「超。新創公司!」員工平均年齡不到 13 歲的 App 製作公司
http://techorange.com/2014/08/14/learn-about-startups-by-launching-their-own/

兒童寫程式 增創意學解難 英美興起港漸流行 中產家長熱捧
http://www.hket.com/eti/article/691756f8-515f-46d1-8ba9-35c150e4e7ad-589900

兒童學堂﹕4歲學寫程式 做未來IT達人
http://happypama.mingpao.com/cfm/relation3.cfm?File=20140514/gac/ofa1.txt

為什麼 8 歲的小孩應該要學寫程式?
http://techorange.com/2013/04/30/why-your-8-year-old-should-be-coding/

歐美國家最夯的兒童才藝課:程式語言!不用識字就可以開始學了
http://techorange.com/2013/08/08/kindergarten-coders-can-program-before-they-can-read/

自學 Coding 三個月,12 歲的 Ehan 就能獨立開發數款 App
http://techorange.com/2013/08/16/this-12-year-old-kid-learned-to-code-on-codecademy-built-5-apps-and-is-speaking-at-sxsw/

大家都說要學 Coding,但我該先從哪種程式語言下手?
http://techorange.com/2014/02/25/which-coding-language-is-right-for-you/

機器人不只教孩子學 Coding,它將顛覆人類既定的學習模式
http://techorange.com/2014/04/17/robot-will-change-the-way-kids-think/

陪小孩學 Coding 的機器人做好了,只要新台幣 1800 元
http://techorange.com/2013/12/17/play-i-raises-1-4m-from-the-crowd-for-toy-robots/

讓孩子從10歲開始寫程式 – SHALLEY 老師專訪
http://xuexue.today/2014/05/12/%E8%AE%93%E5%AD%A9%E5%AD%90%E5%BE%
9E10%E6%AD%B2%E9%96%8B%E5%A7%8B%E5%AF%AB%E7%A8%8B%E5%BC%8F/

Kano: A computer anyone can make
https://www.kickstarter.com/projects/alexklein/kano-a-computer-anyone-can-make

Kinect 二三事-學習資料

Programming Kinect for Windows v2
http://channel9.msdn.com/Series/Programming-Kinect-for-Windows-v2

MSDN – Kinect for Windows SDK 2.0
http://msdn.microsoft.com/en-us/library/dn799271.aspx

寒江独钓 – Kinect开发
http://www.cnblogs.com/yangecnu/p/Learning-KinectSDK.html

TW-HKT 程式●城市●人 – Kinect 教學目錄
http://tw-hkt.blogspot.hk/2012/03/kinect.html

Coursera – Beginning Game Programming with C#
https://class.coursera.org/gameprogramming-001

C# Fundamentals: Development for Absolute Beginners
http://channel9.msdn.com/Series/C-Sharp-Fundamentals-Development-for-Absolute-Beginners

Visual Studio 2010 使用者入門教學課程
http://msdn.microsoft.com/zh-tw/library/vstudio/dd492171(v=vs.100)

XNA Game Programming Adventures
http://xnagpa.net/

Rob Miles
http://www.robmiles.com/
Learn Programming with XNA
https://www.facultyresourcecenter.com/curriculum/pfv.aspx?ID=7992&c1=en-us&c2=0
Using Kinect for Windows with XNA
https://www.facultyresourcecenter.com/curriculum/8938-Using-Kinect-for-Windows-with-XNA.aspx?c1=en-us&c2=0

書籍 – Kinect體感程式設計入門與應用 -第二版
原始碼 – https://github.com/SenWang?tab=repositories

書籍 – XNA 4遊戲程式設計:適用Windows PC、 Phone、Xbox 360

書籍 – 寫給專業開發者用的Windows Kinect SDK技術手冊

Kinect 二三事

介紹

Microsoft Kinect 以人體骨架和手勢作控制器, 不用觸摸實體物件作控制. 第二代感應器和開發工具出爐, 可到以下網頁查看最新介紹.
http://www.microsoft.com/en-us/kinectforwindows/

應用例子

娛樂、遊戲、醫護保健、互動藝術、運動、銷售應用等等, 請按此處.

工具

Kinect for Windows SDK 2.0
http://www.microsoft.com/en-us/download/details.aspx?id=44561

Kinect for Windows SDK v1.8
http://www.microsoft.com/en-us/download/details.aspx?id=40278

Microsoft Visual Studio 2010 Express / Visual Studio Express 2012 for Windows Desktop
http://www.visualstudio.com/

Microsoft Silverlight 4 SDK
http://www.microsoft.com/en-us/download/details.aspx?id=7335
Microsoft XNA Game Studio 4.0
http://www.microsoft.com/en-us/download/details.aspx?id=23714
Microsoft Speech Platform – Software Development Kit (SDK) (Version 11)
http://www.microsoft.com/en-us/download/details.aspx?id=27226
Microsoft Speech Platform – Runtime Languages (Version 11)
http://www.microsoft.com/en-us/download/details.aspx?id=27224

其他工具

Unity3D
http://www.unity3d.com/

Unity3D Assets
+ Kinect for Windows SDK 2.0 Unity Pro Add-in (需要是Unity3D Pro)
http://download.microsoft.com/download/0/D/6/0D63A520-05FE-4054-9B5C-DDFE1D141681/KinectForWindows_1407_Unity%20(Pro%20Only)%20.zip
+ Kinect v2 with MS-SDK
https://www.assetstore.unity3d.com/en/#!/content/18708
+ Kinect with MS-SDK
https://www.assetstore.unity3d.com/en/#!/content/7747
+ Kinect v2 MobileVr Examples
https://www.assetstore.unity3d.com/en/#!/content/61376
https://rfilkov.com/2016/05/07/kinect-v2-mobile-vr-examples/
64-bit build of the KinectDataServer
+ Kinect/PS with OpenNI 2
https://www.assetstore.unity3d.com/en/#!/content/10693
+ KinectSDK / Unity3D Interface(KUInterface)
https://github.com/adevine1618/KinectSDK-Unity3D_Interface_Plugin
+ Kinect Wrapper Package(CMU)
http://wiki.etc.cmu.edu/unity3d/index.php/Microsoft_Kinect_-_Microsoft_SDK
+ YuYuYouEr_Kinect_SDK_Wrapper_for_CMU_Unity3D
http://www.yuyuyouer.cn/blog/?page_id=369
+ Zigfu
http://zigfu.com/

Monogame
http://www.monogame.net/

NOVA Framework
http://novaframework.codeplex.com/

Kinect2Scratch
http://scratch.saorog.com/
Kinect 2 Scratch is an extension for Scratch 1.4 and Scratch 2.0 that enables Scratch coders program with the Kinect sensor for Xbox 360 or Xbox One.
http://howell.azurewebsites.net/kinect2scratch/

Greenfoot
a project in the Programming Education Tools Group, part of the Computing Education Research Group at the School of Computing, University of Kent in Canterbury, UK.
http://www.greenfoot.org/

BrekelTools for Markerless Motion Capture
http://brekel.com/

Dale Phurrough
Exploring the creative and professional of interactive multimedia art, software engineering, and participatory experiences
http://hidale.com/

Cycling ’74
http://cycling74.com/

Extreme Reality
http://www.xtr3d.com/

OpenNI 2 SDK
http://structure.io/openni

occipital/OpenNI2
https://github.com/occipital/openni2
OpenNI/OpenNI2
https://github.com/OpenNI/OpenNI2

建議

對 C# / XNA / Unity3D 有基本認識.

參考資料

Kinect for Windows v2 Sensor
http://devices.microsoftstore.com.hk/product/74Z-00002/74Z-00002?locale=zh_HK

Kinect for Windows features
http://www.microsoft.com/en-us/kinectforwindows/discover/gallery.aspx

Kinect for Windows Product Blog
http://blogs.msdn.com/b/kinectforwindows/

Kinect for Window Dev Center
http://www.microsoft.com/en-us/kinectforwindowsdev/default.aspx

GALLERY – Experience Kinect
http://www.microsoft.com/en-us/kinectforwindows/discover/gallery.aspx

Microsoft Research 展示超高精準度的手部追蹤技術
http://chinese.engadget.com/2014/10/05/microsoft-research-fully-articulated-hand-tracking/

Vangos – Kinect, Mobile & Web apps
http://pterneas.com/

Coding4Fun-Kinect
http://channel9.msdn.com/coding4fun/kinect

Kinect | CreativeApplications.Net
http://www.creativeapplications.net/tag/kinect/

Unity 3D Armenia
http://unity3d.am/

First look: Kinect for Windows v2 Developer Preview SDK
http://blogs.msdn.com/b/jgalasyn/archive/2013/11/27/kinect-for-windows-v2-first-look.aspx

Kinect for Windows 感應器開箱文
http://viml.nchc.org.tw/blog/paper_info.php?CLASS_ID=1&SUB_ID=6&PAPER_ID=418

Wiki – Kinect
http://en.wikipedia.org/wiki/Kinect

Kinecting for Windows
http://www.kinectingforwindows.com/

OpenNI 中文粉絲團
https://zh-hk.facebook.com/CHineseOpenNI

Engadget 中文版 – Kinect
http://chinese.engadget.com/tag/Kinect/

KINECT創意程式開發大賽
https://m21.hk/microsoft/kinect.php

學習資料

由基礎C#教學到Kinect教學, 請按此處.

工具路徑

C:\Program Files\Microsoft SDKs\Kinect\Developer Toolkit v1.8.0\Assemblies
Microsoft.Kinect.Toolkit.dll
Microsoft.Kinect.Toolkit.Interaction.dll

C:\Program Files\Microsoft SDKs\Kinect\Developer Toolkit v1.8.0\bin
KinectInteraction180_32.dll
KinectInteraction180_64.dll

C:\Program Files (x86)\Microsoft SDKs\Expression\Blend\Silverlight\v4.0\Libraries

WordPress 外掛

外掛

語言轉換
Polylang
http://wordpress.org/plugins/polylang/

選單
Menu Image
https://wordpress.org/plugins/menu-image/
Nav Menu Images
https://wordpress.org/plugins/nav-menu-images/

幻燈片
Meta Slider
https://wordpress.org/plugins/ml-slider/

文章顯示
Content Views
https://wordpress.org/plugins/content-views-query-and-display-post-page/
Simple Featured Posts Widget
https://wordpress.org/plugins/simple-featured-posts-widget/
AK Featured Post Widget
http://wordpress.org/plugins/akfeatured-post-widget/

Tabs
Tabby Responsive Tabs
https://wordpress.org/plugins/tabby-responsive-tabs/

Google 地圖
WP Google Map Plugin
https://wordpress.org/plugins/wp-google-map-plugin/

隨機顯示文字
Random Text
https://wordpress.org/plugins/randomtext/
隨機產出文字
http://randomtextgenerator.com/
http://www.randomtext.me/

隱藏頁面標題
Hide Page and Post Titles
https://wordpress.org/plugins/hide-page-post-titles/

表單
Contact Form 7
http://wordpress.org/plugins/contact-form-7/
Contact Form 7 reCAPTCHA Extension
http://wordpress.org/plugins/contact-form-7-recaptcha-extension/
WP-reCAPTCHA
http://wordpress.org/extend/plugins/wp-recaptcha/
Really Simple CAPTCHA
https://wordpress.org/plugins/really-simple-captcha/

備份/複製
BackWPup Free
https://wordpress.org/plugins/backwpup/
Duplicator
https://wordpress.org/plugins/duplicator/

購物車
WooCommerce
http://wordpress.org/plugins/woocommerce/
WP eCommerce
https://wordpress.org/plugins/wp-e-commerce/

社交媒體
Facebook for WordPress
https://wordpress.org/plugins/facebook/
Social Sharing Toolkit
https://wordpress.org/plugins/social-sharing-toolkit/
Creativ Shortcodes Plugin
http://pixelatedminds.com/creativ-shortcodes-a-wordpress-plugin
Social Media Shortcode Pack
https://wordpress.org/plugins/social-media-shortcodes/

版面設計
Page Builder by SiteOrigin
http://wordpress.org/plugins/siteorigin-panels/
Easy Bootstrap Shortcode
https://wordpress.org/plugins/easy-bootstrap-shortcodes/
Bootstrap Shortcodes for WordPress
https://wordpress.org/plugins/bootstrap-3-shortcodes/
Column Shortcodes
https://wordpress.org/plugins/column-shortcodes/
Grid Columns
https://wordpress.org/plugins/grid-columns/
How To Create Columns In Posts
http://vip.wordpress.com/documentation/how-to-create-columns-in-posts/

<div style=”width: 30%; padding: 0 10pt 0 0; float: left;”>
Column 1 info here
Column 1 info here
Column 1 info here
</div>
<div style=”width: 30%; padding: 0 10pt 0 0; float: left;”>
Column 2 info here
Column 2 info here
Column 2 info here
</div>
<div style=”width: 30%; padding: 0 10pt 0 0; float: right;”>
Column 3 info here
Column 3 info here
Column 3 info here
</div>

Arduino 二三事

介紹

這是一個開源硬體.

應用例子

互動藝術創作、自動控制系統、3D打印機、機械人、智能家居等等

工具

Arduino Uno R3
http://arduino.cc/en/Main/arduinoBoardUno
Arduino IDE
http://arduino.cc/en/Main/Software

其他工具

Fritzing
http://fritzing.org/
S4A
http://s4a.cat/
Ardublock
http://blog.ardublock.com/
Unity3D – Arduino-Unity3D-Serial-Connection
https://github.com/kirillrybin/Arduino-Unity3D-Serial-Connection
Unity3D – unity-arduino-serial-connection
https://code.google.com/p/unity-arduino-serial-connection/
Unity3D – Kinect2Arduino(US$10)
https://www.assetstore.unity3d.com/#/content/9680
http://handhgraphicsorlando.com/Kinect2Arduino/
Unity3D – UNIDUINO – Arduino for Unity(US$30)
https://www.assetstore.unity3d.com/en/#!/content/6804
Unity3D – Android & Microcontrollers / Bluetooth(US$10)
https://www.assetstore.unity3d.com/en/#!/content/16467

建議

Arduino 進入門檻低,即便你沒有電子電機相關科系的背景,也可以很容易學會使用 Arduino,因此只要具備基本電腦操作能力就可以學習。 (文字來源)

參考資料

http://www.arduino.cc/
http://arduino.cc/en/Main/Products
http://arduino.tw/
https://www.facebook.com/DSChinese
http://zh.wikipedia.org/wiki/Arduino
http://makezine.com/category/electronics/arduino/
http://www.arduino.cn/forum.php
http://jackedu.blogspot.com/2013/05/arduino.html

學習資料

http://arduino.cc/en/Guide/HomePage
http://arduino.cc/en/Tutorial/HomePage
http://arduino.tw/ http://www.youtube.com/user/DesignSparkTW
Cooper Maa – Arduino 教學系列
http://coopermaa2nd.blogspot.hk/2011/05/arduino.html
柯博文老師 – Arduino 教學
http://www.powenko.com/wordpress/?page_id=4155
曹永忠博士 – Arduino專書
http://www.cs.pu.edu.tw/~yctsao/indexdown.php

相關資料

Arduino- 遙控電子車
Arduino- 超聲波電子車
Arduino- 導航電子車

留意

長腳-VCC-正極 (鋰電池紅線)
短腳-GND-負極

相關路徑

C:\Users\USERNAME\Documents\Arduino\libraries

WordPress 二三事

介紹

WordPress 是一個開源部落格,加上不同外掛和模組,增強部落格功能和表達效果。

應用例子

WordPress Showcase
https://wordpress.org/showcase/

工具

WordPress — Blog Tool, Publishing Platform, and CMS
https://wordpress.org/
WordPress Plugin Directory
https://wordpress.org/plugins/
WordPress Themes Directory
https://wordpress.org/themes/
163 Free WordPress Themes
http://theme.wordpress.com/themes/sort/free/

關鍵字

wordpress XXXXX Shortcode
wordpress XXXXX Widget

外掛

請按此處

學習資料

WordPress Documentation
https://codex.wordpress.org/Main_Page

相關資訊

修改語言檔案(Edit .mo File)
Poedit http://poedit.net/
管理台轉換繁體中文
WORDPRESS\wp-config.php define(‘WPLANG’, ‘zh_TW’);
語言路徑
WORDPRESS\wp-content\languages\
圖片路徑
WORDPRESS\wp-content\uploads\
外掛路徑
WORDPRESS\wp-content\plugins\