布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(27)
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(13)
關於網頁前端CSS中的排版屬性,今天要介紹兩種給你認識! 本篇介紹網頁前端排版的兩個 CSS 屬性：display 屬性與 visibility 屬性。CSS：display 屬性display:block 對於 CSS 語法來說，網頁前端的每個元素都是一個矩形盒（rectangular box）模型。而使用「display」屬性，便可以決定「盒（box）」的呈現方式。又「區塊元素（block element）」則會佔用可用寬度的最大值，前後有換行符。以下範例分別顯示了是否有將<span>元素顯示為區塊元素（block element）的結果。在下方的顯示視窗中，按「CSS」，就可以觀看 CSS 的語法如何設定了！See the Pen display: block by Tedutw (@Tedutw) on CodePen.上述範例的網頁前端 CSS 語法設定如下：span.block{
display:block;
}
display:inlineinline 元素只佔用可用寬度的最大值，並不強制換行。將上一段範例的<span>元素，CSS 換成「display: inline」的結果如下。跟上一個範例一樣，在下方的顯示視窗中，按「CSS」可以觀看 CSS 的語法如何設定。See the Pen display: block by Tedutw (@Tedutw) on CodePen.上述範例的 CSS 語法設定如下：span{
display:inline;
}
display:none「display:none」用來將元素隱藏使用，當元素隱藏後，就不佔用任何空間了，且在網頁前端頁面顯示時也不會被展現出來，就好像該元素不存在一樣。 在以下範例中，我們將第 2、4 段設為「display:none」，其他設為「display:block」。See the Pen display: none by Tedutw (@Tedutw) on CodePen.上述介紹的「block」、「inline」、「none」都是最常碰到的的 display 參數。display 當然還有很多其他次常用的參數值，如 list-item、table、table-cell、table-column、grid 等，將會在往後的章節中一一介紹 CSS：visibility 屬性visibility 屬性用於指定元素是可見的還是隱藏的。最常見的值是 visible 和 hidden當我們想要隱藏園素食，有兩個方法：一是上一段介紹的，將「display」屬性設為「 none」參數；二是將「visibility」屬性設置為「hidden」來隱藏元素。注意：以上兩個方法雖然都能將元素隱藏，但都呈現出不同的結果：被「display:none」隱藏後的元素，就不會佔用任何的空間，就好像它從來都不存在一樣；而被「visibility:hidden」隱藏後的元素，雖然在網頁前端不會顯示，但仍佔用了對應的空間（就是被隱藏的元素有多大，網頁上空出來的空間就有多大），所以仍會影響排版。範例如下：我們準備要將以下的例子，第一個<p>元素設為「visibility:hidden」、第二個<p>元素設為「display: none」。See the Pen visible:hidden-before by Tedutw (@Tedutw) on CodePen.將以上的第一個<p>元素設為「visibility:hidden」、第二個<p>元素設為「display: none」的結果如下：See the Pen visible:hidden-after by Tedutw (@Tedutw) on CodePen.由以上例子我們可知，同樣都是將元素隱藏，第一個<p>元素雖然被「visibility:hidden」隱藏了，但是仍遺留下空間；第二個被「display: none」隱藏的<p>元素則是完完整整的「被消失」，連原本的位置都不見了。下一張我們將介紹網頁前端排版的另一個 CSS 屬性：Positioning Elements。 相關閱讀推薦：用Python寫出唐鳳「番茄鐘工作法」程式，讓AI幫你集中注意力!
AI機器狗Aibo成最新愛寵 真狗會被取代嗎？ 今年10月即將入手的新身分證，它的UI設計有啥亮點？你是我的眼！Google AI 眼鏡助視障朋友「看見」世界 懂JavaScript,網頁前端開發之路就輕鬆點啦~
零基礎的也不要怕學習網站前端技能,這篇讓你更了解它! 不只前端工程師,還有後端跟全端!!!???
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(49)
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(20)
本篇為下篇，上篇請點此連結 有了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 更精準的標記出錄音中的座頭鯨聲音。現在的人工智慧已經可以根據錄音中的座頭鯨聲音，在地圖上標記出他們出現的時間地點，甚至得知牠們的遷徙途徑，用於保育和研究。這些生活在地球已有 5000 萬年的大型哺乳動物，能否能夠繼續優游海洋，也許命運就交託在 AI 手中了！ 相關閱讀推薦：用Python寫出唐鳳「番茄鐘工作法」程式，讓AI幫你集中注意力!
AI機器狗Aibo成最新愛寵 真狗會被取代嗎？ 今年10月即將入手的新身分證，它的UI設計有啥亮點？你是我的眼！Google AI 眼鏡助視障朋友「看見」世界 AI真的能保護地球環境嗎?Google是這麼說的..(上)
汽車產業和人工智慧的結合,原來可以這麼厲害?(上) 這人工智慧的甩尾技術,讓方程式冠軍車手直呼:要失業拉(上)
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(28)
AI讓保衛動物戰變得稍微輕鬆點了!但人類還是絕不能大意阿~~ 人工智慧 AI 或許是應對氣候變化，除了個人力行友善地球的生活方式之外，另一個生態保育的關鍵技術！如今，氣候變遷是人類面臨的最大挑戰之一，全球變暖、冰川消融、物種滅絕、海平面上升到極端天氣事件頻發等等，能挽回的時間越來越緊迫。也許我們可以借助於效率比人類快 3000 倍的 AI 人工智慧⋯⋯ 「現代問題就是需要現代手段呀!」《自然氣候變遷》（Nature Climate Change）期刊研究生物多樣性資料庫中的 48,786 個動植物物種，並進行電腦氣候變遷模擬，而結果表明：若無法有效減少溫室氣體排放，屆時全世界 57% 的植物和 34% 的動物將會失去超過一半的家園！這將對上萬種物種產生毀滅性的影響，常見、珍稀和瀕危物種都難逃一劫。而許多動物保育或環保團體目前正積極抓緊時間，記錄下野生動物的姿態、習性乃至等聲音等資料。但，先不論人工採集資料所需耗費的成本，以人力一項項辨識分析，巨量的資料往往是事倍功半、耗時過久，此時 AI 的優勢就展現出來了：經訓練的 AI 辨識資料的時間比人類少了 1/3000！等於人類辨識完一張相片的時間，AI 已經辨識完 3000 張了。 動植物資料庫最強救星 AI 輕鬆處理百萬張照片～在物種生態研究領域中「相機陷阱」（Camera Traps）是一種採集原始照片常用的方式。將鏡頭長期放置在大自然，再利用紅外線感應並自動拍攝的，時常被應用在觀察野生動物與尋找稀有物種上。隨著相機畫質不斷提高，相機陷阱的運用也愈來愈盛行。然而，即使是被動拍攝，一年拍攝的照片也多達數百萬張，其中可能只拍到動物閃身而過、或是拍到空蕩蕩的背景，但也很可能捕捉到珍貴的一幕。為了處理這些人力無法負擔的百萬張照片，Google 成立了「Wildlife Insights」平台，並訓練了專責辨識照片的 AI。根據介紹，Google 用了 870 萬張動物圖像去訓練 AI，這比全世界博物館中的動物標本總和都還多。任何人只要將相片上傳到此平台，AI 就能自動分析識別照片中有沒有拍到動物，如果有動物，又是何種動物。▲相機陷阱如同人類在大自然中的眼睛，而 AI 則是過濾出有用資料的關鍵。同時 Wildlife Insights 平台也匯集了來自世界各地的照片，統整出全球各地野生動物分布的即時數據並無償公開，目的是結合生態保育、AI 尖端技術與大數據分析技術。更重要的是，無論是動保團體、生態動植物科學家或一般民眾，大家都共享這些自然生物的資料，在保育全球野生動植物種群的目標上功不可沒。 本篇為上篇，下篇請點此連結 相關閱讀推薦：用Python寫出唐鳳「番茄鐘工作法」程式，讓AI幫你集中注意力!
AI機器狗Aibo成最新愛寵 真狗會被取代嗎？ 今年10月即將入手的新身分證，它的UI設計有啥亮點？你是我的眼！Google AI 眼鏡助視障朋友「看見」世界 AI真的能保護地球環境嗎?Google是這麼說的..(下)
大家都需要的人工智慧蚊子追蹤器,今天來好好介紹它! 近期歐盟宣布的人工智慧白皮書,規範了哪些東西?(上)
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(70)
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(113)
今天要為你介紹這超受歡迎的人工智慧機器狗,你覺得它能取代毛小孩在你心中的地位嗎?
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(304)
想讓學習Python的路更順遂?接下來的每一點都很重要阿~~
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(1,554)
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(943)
