哈希技術部落格


Slider

Thunkable教學-製作註冊登入與驗證功能

設計APP或網頁時,為了要區分不同的使用者,因此都會有「註冊」的功能。而為了避免產生幽靈註冊的情況,都會再設計驗證的步驟,例如使用email註冊,會需要使用者點擊email認證信。 今天,我們會分享如何使用積木式程式,搭配google的服務,實現註冊與認證的功能哦! 開啟Thunkable,加入Firebase登入功能 首先,我們在元件列表中,找到「身份認證」,並將「登入功能」加入到作品的不可見元…

Read more »

Thunkable教學 – 製作測速照相位置的地圖

疫情時代的現在,開車族的人數也漸漸在成長中。而開車族幾乎都會碰到讓荷包失血的,就是超速罰單。因此偵測測速照相的產品或是app,都擁有很高的使用人口。 今天,我們會分享如何讓學程式的小孩子,也可以自行開發出測照相地圖這樣的作品哦! 取得測速照相位置 目前測速照相的位置主管機關是警政署,也已經是開放資料分享出來。點擊連結 -> 政府開放資料平台接著可以分別搜尋「測速執法設置點」、「國道公路固定式…

Read more »

玩遊戲學程式 – PAIA

隨著越來越多小朋友學習程式,除了常見的Scratch或是樂高…等等學習平台。而學習的過程中,藉由遊戲式的學習往往是學生最喜歡的學習途徑 今天,我們會分享一個新的遊戲式程式學習平台 – PAIA,並藉由這個平台學習python PAIA 課程學習 在此網站中,目前包含三堂的遊戲式教材內容,分別是磚塊、賽車、兵乓球 每一堂課中,包含從環境設置到執行的詳細教學步驟 積木式程式操作…

Read more »

Scratch教學-基礎路徑尋訪I

在學程式的過程中,路徑尋訪是演算法非常重要的一部分,例如深度優先、寬度優先..等等演算法。而從基本的路徑尋訪開始,經典的例子就是老鼠走迷宮。 今天,我們會分享如何使用Scratch,實現路徑尋訪的基礎效果 製作路徑地圖 首先,我們在Scratch的舞台中,使用「矩形」工具,繪製出6×6的地圖(如下) 並藉由顏色標示出可以走的區域(綠色)與不能走的區域(橘色),以及最終目的地(藍色) 製作…

Read more »

Scratch教學 – 使用遞迴

當我們有指令需要重複產生效果時,直覺會想到藉由迴圈的方式達成。但在程式裡,其實可以藉由遞迴產生相似的效果。而且有時候遞迴甚至可以用更簡短的程式量即可達成效果。今天,我們會分享如何藉由Scratch,使用遞迴 認識遞迴 在「函式」中又呼叫自己。如此循環下去,稱為遞迴 遞迴需要有終止條件,否則會無限循環… 因為遞迴對於初學者而言是較抽象的概念,因此在程式界中還會出現「遞迴只應天上有 凡人應當用迴圈」的…

Read more »

免費的IBM數位學習平台

談到新興的數位科技,常常就會出現一些熱門詞彙,像是區塊鏈、人工智慧…等等內容。而這些名詞背後的技術,究竟代表什麼意思?孩子又應該從哪裡開始學習呢? 對此IBM設計了一個線上的學習網站,裡面包含了非常豐富的資訊科技內容,重點是,這些都可以免費學習哦! IBM OPEN P-TECH 首先,開啟OPEN P-TECH網站,就可以看見以下畫面。P-TECH是一種新興的教育方式,可以參考PTE…

Read more »

Scratch教學 – 雲端變數

小朋友在設計Scratch遊戲時,有時候需要紀錄玩遊戲的「最高分數」。但每次暗綠旗,遊戲就會重新開始無法儲存。 今天,我們會分享如何紀錄不同使用者的資料,而且遊戲結束後也不會清除哦! 儲存變數資料 在Scratch中建立變數時,除了常用的「適用於所有角色」與「僅適用當前角色」以外,會發現還有一個選項稱為「雲端變數」。 成功建立以後,就可以發現「雲端變數」會有一朵雲的圖案,來區分變數是一般的變數還是…

Read more »

RWD響應式網頁教學 – 文字超出範圍自動換行

隨著現在智慧型設備的增加,網頁不再只限於電腦上瀏覽,而是在平板、手機、電視、甚至手錶等裝置上,都可以閱覽網站。但如此一來,各種裝置不一樣的顯示比例,如何確保正確的顯示內容而不被裁切呢?這樣的做法,就稱為RWD響應式網頁設計。 今天,我們會分享如何讓網頁中的文字,在不同的比例範圍下,可以自動換行顯示。 傳統的文字顯示 CSS語法:文字超出範圍的換行控制 針對這樣的問題,我們可以使用CSS語法「wor…

Read more »

HTML&CSS教學 – relative與absolute定位方式比較

設計網頁排版時,我們會需要將不同的區塊(DIV)進行控制,而最常用到的就是relative與absolute。對比預設的static定位,這兩種方式可以自由上下移動與定位。 今天,我們會簡單分享,relative與absolute的定位,有哪些需要注意的事項哦! 定位方式語法 CSS常見的定位語法包含static (預設值)、absolute (絕對定位)、relative (相對定位)、fixe…

Read more »

Scratch教學 – 無限橫向捲動背景

許多經典的2D平面遊戲,都會有無限延伸的背景,例如2D瑪利歐兄弟、FlappyBird、跑跑薑餅人…等經典遊戲。而這樣背景可以無限出現的效果,是如何做出來的呢? 今天,我們會分享如何透過2張圖片,就可以製作出這樣的效果哦! 無限延伸的背景 我們以經典遊戲「Flappy Bird」為範例,可以發現遊戲的背景翠無限的橫向滾動 <遊戲作品連結> 接合兩張圖片 將背景圖片接合再一起…

Read more »