Java瑪奇朵-非本科系的IT吃喝電玩日誌

人工智慧也能入場替球隊應援?!你沒看錯!!有可能在不久的將來還可以看到機器人組成的棒球隊呢!!一起來看看是怎麼回事吧!!(上)

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

上過前端工程師課程想複習卻苦無資源嗎?CSS教學補給站幫你解決這個煩惱!!今天要來談的是float浮動屬性
CSS 的 float (浮動) 屬性
CSS 的 float (浮動) 屬性是前端工程師在做網頁排版時，必用的基本語法之一。使用 CSS float 浮動屬性，可將一個元素往左移或是往右移，並允許其他元素圍繞它（例如文繞圖、圖繞文等）。
float 浮動屬性的使用時機
使用 <div> 等區塊元素排版時，預設的排列方式都是由左至右、由上至下。但若想要讓多個區塊並排、或是二欄、三欄等多欄網頁前端排版時，就需要使用 float 屬性。
如下方例子，若我們使用一般的 div 區塊元素時，則所有的區塊就整齊的由左上出來，一個 <div> 區塊就佔用了一行。（溫馨提示：可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法）
See the Pen Float-example-1 by Tedutw (@Tedutw) on CodePen.
承上例，若在 CSS 中加一個「float: left;」，則結果如下（溫馨提示：可以點擊下例視窗左上方的「HTML 」與「CSS」按鈕來查看語法）：
See the Pen Float-example-2 by Tedutw (@Tedutw) on CodePen.
這是因為「float」屬性使 div 區塊元素「漂浮」起來，不再形成 div 區塊占滿整行的情況
承上例，若把由左側開始「漂浮」的「float: left;」改成由右側開始「漂浮」的「float: right;」，則所有的區塊就會由右側開始「飄」出來，結果如下（溫馨提示：可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法）：
See the Pen Float-example-3 by Tedutw (@Tedutw) on CodePen.
CSS 浮動屬性有三個參數：left、right 與 none。left 與 right 顧名思義，就是控制區塊由左側還是右側浮出用的，如上方兩個例子所示。而 none 就是不使用浮動參數的意思。
下方是另一個文繞圖排版的例子，就是文字的部分「不」設定 float 屬性，但是在 logo 圖片的部分使用浮動屬性「float:right;」，文字的部分則不使用浮動屬性。（溫馨提示：可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法）
See the Pen Float-example-4 by Tedutw (@Tedutw) on CodePen.
若前端工程師想要做出兩欄或多欄的網頁，則可以善用 float 屬性搭配寬度需要進行初步的排版。
以下範例為兩欄的排版示例。兩個欄位視為兩個區塊， float 屬性都設定為「left」，左欄寬度為 20%；右欄為 80%：
See the Pen Float-example-5 by Tedutw (@Tedutw) on CodePen.
網路上有人說：前端工程師的網頁 layout 基石除了本章介紹的浮動（float） 屬性之外，還有下一張會介紹的清除浮動（clear）。想當前端工程師的各位同學們請先把本章再複習一次，並親自使用 codepen 自己練習一次程式，才會達到最佳的學習效果！
 
 
更多關於前端工程師的文章請點閱下方連結!!
 
 
 
其他閱讀
從哆啦A夢到 iPhone...為何 UI 設計用「圓角」就是比較討喜？
APCS 程式檢定，該從 C、Java 還是 Python 下手？
【前端工程師CSS教學】float浮動屬性
AI人工智慧救地球！Google：AI 保護環境還比人類快 3000 倍
所有APCS認證要知道的事都在這!!(上)
前端工程師起步的t初學小課(22):數學物件
如何分辨全端,後端和前端工程師?還不知道的可是不行的喔~

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

上過前端工程師課程想複習卻苦無資源嗎?CSS教學補給站幫你解決這個煩惱!!今天要來談的是定位元素~

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

想一次考取APCS認證就成功嗎?那你一定不能錯過今天的文章!!快來看看從哪裡下手最快最簡單吧!!(下)

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

想一次考取APCS認證就成功嗎?那你一定不能錯過今天的文章!!快來看看從哪裡下手最快最簡單吧!!(上)
第一次考 APCS 程式語言，從哪個程式語言下手才會事半功倍呢？
若是一開始就選到一個好上手、測驗時又好作答的程式語言，就可以減少準備時間和學習負擔！本篇文章將以三款詢問度較高的應考語言 C , Java , Python 來做解析、比較。
此篇你將了解...

1. APCS 檢測的規範與基礎

2. C , Java , Python - 哪個語言適合解題？

先來了解一下檢測內容的基礎概念，APCS 的兩大題組 【觀念題】與【實作題】
程式設計觀念題

題型：單選題 (含題組)，以運算思維、問題解決與程式設計概念測試為主。

檢測與計分方式：分兩節次檢測 (單節測驗時間60分鐘)， 檢測分數為合併計分，滿分100分

觀念題例題#1

1. 右側程式碼，執行時的輸出為何？

1. (A) 0 2 4 6 8 10


2. (B) 0 1 2 3 4 5 6 7 8 9 10


3. (C) 0 1 3 5 7 9


4. (D) 0 1 3 5 7 9 11

void main() {
for (int i=0; i<=10; i=i+1) {
printf ("%d ", i);
i = i + 1;
}
printf ("\n");
}

（出自 105 年 3 月 5 日，理論題第 15 題）
這一題主要要測驗的內容，是考驗考生是否了解 C 語言當中， for 迴圈的結構。
以 for 迴圈來說，三的區段的值分別是初始值、條件值、運算值。
在這一題當中，第一次執行的時候 i 為 0 ，所以會先印出 0。
接下來，由於第四行 i=i+1 的關係， i 會變為 1 。但是執行迴圈時，回到了 for 的第三部分，這時候，還是另外一次的 i=i+1 ，所以 i 變為 2，然後進行驗證， i <= 10
根據這樣的執行邏輯， i 每印出一個就會 +2 一次，直到 i 超過 10 之後跳出迴圈。
Ans：所以會印出「0 2 4 6 8 10」
觀念題例題#2

2. 若以 f(22)呼叫右側 f()函式，
總共會印出多少數字?

1. (A) 26


2. (B) 22


3. (C) 11


4. (D) 15

void f(int n) {
printf ("%d\n", n);
while (n != 1) {
if ((n%2)==1) {
n = 3*n + 1;
}
else {
n = n / 2;
}
printf ("%d\n", n);
}
}
（出自 105 年 3 月 5 日，理論題第 21 題）
本題所考內容，是對於 while 與 if 的熟悉度。
傳入 22 進 function 之後，會先印出 22。
接下來進入 while 迴圈，如果 n 不是 1 ，那麼這個迴圈會一直執行。
while 當中， 如果 n 是奇數，則 n 會變成 3xn+1 ，如果 n 是偶數，那 n 會變成原來的一半。
所以整個流程會是「22➔11➔34➔17➔52➔26➔13➔40➔20➔10➔5➔16➔8➔4➔2➔1」。
Ans：所以答案是 16 個。

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

在UI設計領域裡常見的圓角矩形設計你一定見過~但你知道設計背後的涵義嗎?還不知道的同學一起來看看吧!!(下)
本篇為上篇，下篇請點此

有圓角才是好UI?!其實圓角設計的背後含意是....(上)
1. 認知負荷論（cognitive load theory）
認知負荷理論是由澳大利亞新南威爾士大學的認知心理學家 John Sweller 於1988 年提出，他假設人類的認知結構由工作記憶和長時記憶組成。其中工作記憶也可稱為短時記憶，容量十分有限，一次只能記下 5～9 條簡單的訊息。
著有《視知覺》（Visual Perception）的瑞士物理學家、藝術家 Jürg Nänni 也曾提出：視網膜中區處理「正圓形」是最快速的，而處理多稜角的形狀則較吃力，速度也較慢。
結合以上理論我們可以得知：「圓角」更容易被大腦處理，因為它能夠降低大腦的認知負荷，也有利於在同樣時間內接受更多資訊。故比起一般的矩形，人類的大腦更願意接納圓潤的圓角矩型。
2. 視覺動線論
視覺動線是指在讀取眼前資訊時，視覺移動時所構成的方向路徑。這表示視覺動線決定了設計的焦點所在、擺放的位置與順序。
人眼在擷取資訊時，通常不一定會意識到有視覺動線隱藏其中，但眼睛卻會自然而然地依照視覺動線的設計來移動。
而圓角的「曲線」能自然地、圓滑地帶動一般人的視覺動線，而不會感到突兀與刺眼。
3. 曲線偏坦論（Contour Bias）
以演化心理學的觀點來看，人在面臨可能造成危害的事物時，會湧現出恐懼、不安與抗拒的情緒，這是人類經歷長時間的演化後遺傳下來的「適應體」，目的是幫助我們存活，提高生存機會。
除了心理學，腦科學也指出當面對尖銳的物體時，大腦的杏仁核活性會增強。杏仁核是邊緣系統的皮質下中樞，有產生情緒的功能，能產生恐懼記憶並引發應急反應，讓身體能逃離危險。
所以，人類對於形狀銳利的物品往往有先天的排斥，如會連想到尖銳物的方角矩型；對於有曲線的圓融物體則會有較高的接納度，讓圓角矩型不被人腦淺意識抗拒。
圓角不是萬靈丹　善用不濫用才是好的 UI
我們已經知道了圓角佔有許多先天優勢，但並非一股腦地選擇圓角就是正確答案。
在 UI 設計的領域，需要考量的有品牌識別、選用字體、色彩配置以及邊緣線條的採用等等，今天企業若要一切都端正穩重，那圓角就不一定是最佳解答；並且若是矯枉過正，使用弧度過大的圓角可能會看起來不專業，造成反效果。
UI師能塑造出怎麼樣的品牌視覺，背後有許多的「眉眉角角」，需要不斷吸收新知、訓練思考，長時間累積自我的美學素養。
 
更多UI或其他程式語言相關文章請點下方連結!!
 
 
 
其他閱讀
AI人工智慧救地球！Google：AI 保護環境還比人類快 3000 倍
CSS教學-display與visible屬性介紹
用Python寫出唐鳳「番茄鐘工作法」程式，讓AI幫你集中注意力!
AI機器狗Aibo成最新愛寵 真狗會被取代嗎？
新式身分證今年要登場啦!UI人快來看看有何設計要點吧!(上)
不懂網站前端在做甚麼?零基礎學員非讀這篇不可!!
人工智慧狗狗Aibo超擬真!!真狗要被取代了嗎?(上)

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

在UI設計領域裡常見的圓角矩形設計你一定見過~但你知道設計背後的涵義嗎?還不知道的同學一起來看看吧!!(上)
「圓角矩形」是近年盡人皆知的 UI 設計優勢，自 iPhone 4 發售至今日，到處都可以看到這個乍看簡單、但其實富有深意的幾何圖形。
然而圓角矩形何以能擄獲 Steve Jobs 以至於世人芳心呢？箇中緣由，其實也藏在哆啦 A 夢身上！
「圓角矩形」在現代 UI 中代表簡約、清爽與和平易近人。這些印象是因幾何圖形能帶給人們的心理暗示，任何圖形設計元素如形狀、線條、顏色、紋理和圖案，都能淺移默化地影響人們的感官認知，從而讓平面圖形附上不同的喻意。
乍聽之下有點形而上學，但其實我們從童年開始就不斷在接收幾何圖形的心理暗示了——許多卡通動畫中的角色，也都被賦予了「幾何暗示」！
三角形的小夫、方形的胖虎……哆啦 A 夢中的幾何暗示
▲ 哆啦 A 夢中的五個角色造型都跟個性息息相關（圖片取自 flickr）

 

陪伴許多人長大的國民作品《哆啦 A 夢》（ドラえもん），其中的主要角色個個形象鮮明、深入人心，是運用幾何圖形設計角色的好範例：
自戀愛現、在狡猾的同時又常有鬼點子的小夫，從是身形、嘴形到髮型都呈現三角形；而個性粗暴、蠻不講理，但在緊要關頭時又展現了正直的胖虎，無論臉型與身體都呈現寬大的方型。
至於個性善良溫柔、富有同情心的靜香，臉型與整題造型都較圓潤，沒有稜角；至於最備受喜愛的哆啦 A 夢，整個角色從頭到手都是圓型設計。

▲藝術家實際示範如何以基礎的圓型、三角形與方形設計角色形象。
不只日本，歐美的畫家、藝術家、動畫師等角色設計專家們也時常以「幾何造型」為基底，藉此創造出引人入勝、個性鮮明的角色，足見一個好的幾何設計所具有的優勢。
卡通之外　賈伯斯也瘋狂的圓角設計
不只卡通動漫畫之外，許多商業產品也為了讓客戶留下良好的第一印象，採用親民的圓角設計。
話說從頭，要談圓角矩型，就不得不談它成為設計趨勢的轉折點——iPhone 的發布。Steve Jobs 認為：所有物件都有圓角，而且相較於圓形與橢圓形，圓角矩形設計在生活中其實更為常見。

▲ 2020 年發售的 iPhone SE 依然保留標誌性的圓角設計。
1981 年，Steve Jobs 要求當時任職蘋果的電腦工程師 Bill Atkinson 設計出可以快速畫出圓角矩形的方法。當時已能快速繪製出長方形、圓形與橢圓形的 Bill當下便反駁：「圓角的矩形很難用電腦技術畫出來，而且又不必要！」
Steve Jobs 二話不說便把 Bill 從座位上拉起來，指著房間內的白板、桌椅等所有圓角矩型的物品。更帶著他出門上街，指出大街小巷每個小角落的圓角矩形給他看：「你看，到處都有圓角矩形！」
最後，在一個「禁止停車」的圓角矩形路標牌被指出來後，Bill 認輸了。「好啦，我放棄。我回去看看是不是真的跟我想像的一樣困難。」
隔天下午，Bill 就研究出快速繪製圓角矩形的方法。如今在 iOS 系統裡，這個幾何圖形已經成為其 UI 介面傳承的一部分。
不只是「好看」　圓角設計的背後深意
近年 3C 產品硬體設計上都大量使用圓角，UI 介面設計也順其自然地大量採用圓角。除了是為了要「跟上潮流」，圓潤的造型也的確讓產品設計加分。舉凡服務性產品、企業官網、社群媒體、網路商店等，需要 UI 介面的地方全都導入圓角設計。但是圓角「好看」的背後，到底是什麼原因？
人們為何會熱愛圓角的科學根據尚未定論，大致有以下三種說法：

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

今天要來跟大家介紹人工智慧機器人最新趨勢~四足機器人!!這種機器人的教練還是好動的狗狗喔~一起來看看~(下)

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

今天要來跟大家介紹人工智慧機器人最新趨勢~四足機器人!!這種機器人的教練還是好動的狗狗喔~一起來看看~(上)

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

手把手網頁前端教學初登場~第一篇要來跟大家分享display與visibility屬性!!還不會的快學起來!!

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

你還對於學習Python的出路和應用感到好奇嗎?今天要跟大家分享的文章你就千萬不錯過啦!!
如果你想學

Python，或者你剛開始學習

Python課程，那麼你可能會問：“我能用Python做什麼?”這個問題不好回答，因為Python用途太多了，以至於小編不知道如何回答，但是我可以告訴大家的是幾個主要用途，Python主要有以下三大主要應用：

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

AI人工智慧不僅為人類生活帶來便利~現在也即將要在地球生態圈帶來正向改變!!(下)
本篇為上篇，下篇請點此

善用AI人工智慧保護地球環境生態效率超高?!(上)
比人快 3,000 倍！Google AI 省時省力拚保育
過去若以人力一張張辨識照片影像的話，每個小時最極限也只能處理 1,000 張照片。但如果用 Google Wildlife Insights AI，影像辨識分析的速度可達3,000 倍以上，等於每小時能處理多達 3 千 6 百萬張照片。

▲Google AI 可辨識出照片中的物種或空景。
當然，目前尚不能精準辨識出地球上所有物種，但其中 614 種物種如美洲豹、非洲象與羚羊等，Google AI 有最多達 98.6% 的準確度。且最重要的是，若是沒拍到動物的空景，AI 可以快速地辨識出並且剔除，就已省下一大筆人工篩選時間了。
此外，AI 在辨識的同時也能統計相同區域中出沒的動物，計算出物種分布密度，提出一份較為準確的數據給予大眾使用。識別、分析和共享野生動物的數據，以近乎即時的方式揭示野生生物的現況。
只聞其聲不見其「魚」　Google AI 用音頻追蹤鯨魚
除了在陸地上跑跳的動物外，海中優游的座頭鯨也是 Google 關心的對象。
座頭鯨以其躍出水面姿勢、長長的胸鰭與富有深意的叫聲而聞名，被稱為「大海的歌唱家」。然而，隨著遠洋漁業的發展，座頭鯨曾一度被列為瀕危物種。根據《自然》雜誌發表的一篇報告指出，商業性捕魚已使近 90% 的大型掠食性魚類消失，其中就包括座頭鯨。
為了保育面臨絕種危機的座頭鯨，第一步是要確認他們出現的位置和時間。Google 在東京舉行的「Solve with AI」論壇上，公開了 Google 與美國國家海洋暨大氣總署（NOAA）合作訓練神經網路模型的 AI，可自動偵測辨識座頭鯨的聲音，並進一步定位其所在地。

▲Google 與 NOAA 建立了網站「鯨魚之歌」，分享了數千小時的鯨魚歌聲。
要從這些錄音中辨識出座頭鯨的聲音並不簡單，水下錄音機會錄下各式各樣的聲音，而雨聲或是船隻的噪音，也常混淆判斷。並且座頭鯨的叫聲特別難分辨，不如藍鯨、長鬚鯨等其他鯨類會發出固定的叫聲，座頭鯨的叫聲複雜且多變，更是加深辦識難度。
NOAA 過去已錄製了超過 17 萬小時的水下錄音，「若要人手處理，需要24 小時不眠不休地聆聽 19 年，要人手分析簡直是天方夜譚。」
Google AI 將這些水下聲音轉視覺化，以頻譜表示，不斷標記頻譜資料訓練，就能讓 AI 更精準的標記出錄音中的座頭鯨聲音。現在 AI 已經可以根據錄音中的座頭鯨聲音，在地圖上標記出他們出現的時間地點，甚至得知牠們的遷徙途徑，用於保育和研究。
這些生活在地球已有 5000 萬年的大型哺乳動物，能否能夠繼續優游海洋，也許命運就交託在 AI 手中。
 
 
本篇為上篇，下篇請點此連結
 
 
更多關於AI人工智慧的文章請點下方連結喔~
 
 
 
 
 
 
 
其他閱讀
用Python寫出唐鳳「番茄鐘工作法」程式，讓AI幫你集中注意力!
AI機器狗Aibo成最新愛寵 真狗會被取代嗎？
今年10月即將入手的新身分證，它的UI設計有啥亮點？
你是我的眼！Google AI 眼鏡助視障朋友「看見」世界
新一代Google人工智慧眼鏡功能大進化!還兼具外型喔~(上)
台灣人工智慧學校創辦人陳昇瑋英年早逝!
歐盟頒布AI白皮書,嚴加規範人工智慧發展應用!!(上)
 

(繼續閱讀...)

Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()