塵世餘韻

發表文章

目前顯示的是 2018的文章

【網誌】Blogger｜多平台分享按鈕，把你傳出去｜ShareThis

在許多主頁面中（如同我的Blogger）可以看到多個平台的icon分享按鈕，如果想要加裝到自己的家，讓更多人分享你的網誌，可以透過第三方平台 ShareThis 完成這項工具。→ https://platform.sharethis.com/get-inline-share-buttons [ShareThis自訂Button介面] 操作步驟 1) 進入 ShareThis 的網頁後，可以選擇要測欄固定式（sticky）的，以及平行橫躺於頁面（inline）的。 2) 選定其中一種以後，會跳轉到客製化的頁面。可以自訂的內容包含： Channels ：要保留哪些平台，讓人分享。 Alignment ：擺放位置 Button ：針對每個Logo可以調size、label Counts ：總分享次數。 Corners ：調整圓角，讓Button為方形或有圓角 Language ：語言設定（原來分享的日文是「再生回」，韓文也念起來跟它很像） Spacing ：調整Button之間間距。 3) 完成後，最下方按鈕進入，註冊完會產生code與安裝教學，取得Javascript放置於自訂html區的<head>內。而這一排button就端看自己想把下面這個div放在頁面哪裡。 <div class="sharethis-inline-share-buttons"></div> [官方安裝步驟說明] 到Email收驗證信，創建了以後，還可以回頭登入查看 Dashboard 或對按鈕樣式做更新，會自動在部落格上更動，這些UI都可以自己玩玩看，測試一下效果！成果心得 [測試點擊Messenger效果] 點擊按鈕的分享效果非常快速且順暢，不管選擇哪個平台，只要瀏覽器原先有儲存好登入訊息，都可以立即將當前頁面分享給朋友哦。歡迎各位至Blogger頁面最下方將此篇分享出去哦！可惜這裡所提供的圖示沒有包含Line，不太迎合台灣人的口味（使用習慣），希望能趕快跟Line建立起連結。後記到了ShareThis的後台，還可以再擴增其他功能，比方它也跟Disqus一樣具備表情互動讓人點按！Image Share供人分享圖片、Profi

閱讀完整內容

【網頁設計】平面設計原則｜Color Image Typography Composition

設計一個網頁時，要如何做到吸睛？如何引導讓閱讀者清楚明瞭流程？這時候就需要應用上四個基本的圖像設計要點與其中的原則，作為發展企業視覺形象的基底。平面設計要點色彩（color theory）圖像（imagery）字樣（typography）布局（composition） Great visuals really help get the message across to your audience quickly and effectively. 如何吸睛？為品牌設定一個合適形象的主體色與輔助色，每個顏色都有它帶給人的感覺。白色：潔白、精粹純淨、簡單獨立。（Pristine）黑色：暗黑、制式奢華、力與優雅。（Authority）紅色：熱情、自信大膽、領導能量。（Willpower）粉紅：女性、溫暖培育、關懷尊敬。（Feminine）藍色：現代、覺醒自足、遠望企圖。（Content）綠色：自然、平衡穩定、正向成長。（Sanctuary）橘色：樂觀、新穎即時、衝動外向。（Spontaneity）利用互補色來做視覺強調，引導視線做點擊等行為。（如下圖） [Color Wheel, from HubSpot.com] 多利用展示而非說明，使用者處理圖像資訊較快速。在圖像中放入「人」在做動作，會令觀眾更有感。清楚明瞭怎麼做？利用留白、對比來凸顯重要性，讓視覺更流暢。首先圖片解析度要清楚、使用得當，在其上搭配對應精要文字（Overlay responsive text）幫助行動裝置閱讀、定位，要事先用手機瀏覽測試。文字的使用量不要過多，讓人看圖說故事，適時輔助解釋就好。字型選擇上，人們習慣閱讀較熟悉的系統字型(Syetem fonts)。同一頁約2到3種就好。如： ARIAL , HELVETICA , ROBOTO 。內文用有襯字（Serif）字體提高閱讀速度，標題選擇無襯字（Sans-serif）引起注意。如： nbcnews 的「標題」與「內文」的襯字差異（如下圖或點進連結）。如： The Washington Post , The Wall St

閱讀完整內容

【網頁設計】CodePen｜一窺設計成品特效與源碼

許多前端工程師會將自己的網頁元件成品(Pen)擺放在 CodePen 上，不僅能看得到showcase實作的效果，更是連HTML、CSS、Javascript都一覽無遺，能夠透過閱讀別人的Code，看他們是怎麼完成一個吸睛的效果，來汲取經驗、吸收靈感。　從CodePen.io的首頁主要可以看到幾個主體： Pen：最主要閱讀元件Source Code與效果呈現如何互動的地方 Project ：如何刻劃出一個完整網頁 Post：專業front-end engineers撰寫的文章（Ex: The Art of CSS Illustration ） Collections ：整理過的Pen集合，把來自不同設計者，但與主題相關的Pen放在一起。 Ex: My HexaPens 放置各種六角形、 Daily CSS Image 放置純用CSS做成的圖。閱讀Pen 版面 CodePen的擺置非常方便閱讀，上頭三個欄位是網頁生成的三元素，HTML管排版、CSS管樣式、JS管互動，下方則是效果呈現處（範例如下圖）。 [CodePen 即時修改互動] 這裡的好處是可以修改上方Code來改變互動，即時察看下方效果，方便學習或了解其他人的對於三個區塊的程式編排方式。若著重視覺效果，如簡單線條、幾何、文字、色彩，或是IO互動，如捲動、點選等等，就仔細閱讀CSS與JS，或是改寫操作，找尋重要的地方學習精隨。瀏覽Project管理可以看到Engineer對大網頁的撰寫方式，了解資源編排架構（index, css, js, src），還有UX操作方式與視覺流暢性等等。 [Codepen Project瀏覽template] 比如此範例，自動依據時間變化的畫面流程、使用下拉捲動(scroll)時的網頁內容改變(transform)，利用伸縮(scale)、旋轉(rotate)的前後景效果，或游標懸浮(hover)的醒目提示。心得早期看到別人擺放個人相關連結的時候，通常是放置Facebook、Twitter、RSS等社交平台或是訂閱相關的連絡資訊。近期更是慢慢開始見到會放置Medium、Github、CodePen等等技術文章部落格以及專案完整源碼，利用這些平台來放置作品集。 → 如同這個個人連結展開效果（

閱讀完整內容

【網誌】Bloggeroid｜行動間貼文 App搞定

繼上次【網誌】Blogger App｜行動間貼文，使用Blogger的App圖片上傳失敗以後，來測試其他Android上的App應用工具，這次選擇操作看看 Bloggeroid 。（一看名稱就知道是開發給Android版的Blogger ?）發文介面 [Bloggeroid介面說明] 如上圖，在Bloggeroid中可以直接用 HTML tag 或是少量自定義的 Markdown 來撰寫。一點開App就會直接進入撰寫貼文的頁面，一樣包含輸入標題、內文、加入標籤。右上角可以新增圖像（Image），接著在文章中也能自由擺放，或是置換圖片。完成以後可以將草稿（Draft）儲存在SD卡中，要編輯再重新載入（Load）回來即可。發佈文章 [點下Publish後選擇發布方式] 除了能存在SD中（勾選Save），當然可選擇要直接發佈到Blogger，一樣需連結到Blogger（Add Account）。接續上個部分，當文章撰寫完成後按下發布（ Publish ）會跳出上圖介面，包含三個勾選選項： Publish as Draft ：若勾選則存為草稿，未勾選則直接發布。 Add "posted from Bloggeroid" under your post content ：在文章底部放個小小的Credit給這個App的Developer，感謝他們的心血。（如此篇文末右下角） Save post to SD ：存在手機記憶體內。測試三者皆勾選的狀態，按下有機器人在一旁的Publish按鈕後，檢查Blogger後台確實有出現文章，且出現在草稿資料夾中。也可以再回到Bloggeroid重新載入Blogger中的文章做編輯，非常方便，互通順暢。編輯現存文章 [按下Load Existing Posts> from blog取得文章] [按下Load Post From Blog後的讀取狀態] 依照上面兩張圖示的位置及說明依序執行，登入 Google帳戶（Add Account）後，會得到所有自己在Blogger上的文章。接著，點擊欲編輯的文章後，點右上角選擇 Load post to editor ，即載入該文並回到編輯頁面。可能會稍微長得有點亂，

閱讀完整內容

【網頁設計】CSS｜Pseudo class效果｜:hover :active

在做網頁的時候，得注意有些自己設計成可互動的元件，也要讓使用者清楚知道可以互動，不然就喪失了其效果。舉最簡單的例子，就是超連結（Hyperlink），一般認知為藍色有底線的文字，移上去以後會改變顏色，點擊過的超連結也會顏色加深。　　通常要讓人注意到一個元件可以互動，靜態上，能設計成如同常見的Button樣子，用鮮明顏色對比來呈現；動態上，則是讓使用者不經意觸發，比方滑鼠移過去以後產生變色效果。而這邊探討的就是動態的方式，會使用到CSS中的Pseudo class。 Pseudo Class 　　Pseudo 代表虛、偽的意思，像有時在實作程式前，會先撰寫Pseudo Code，代表能呈現概念邏輯的語句，是虛的程式碼，不會實際以此編譯。而這裡的 Pseudo Class 代表不是真實的Class，是添加的屬性，在畫面上看不到，必須當有動作發生在指定的Tag/Class/id（或不指定表全部）才會套用到效果，寫法以冒號跟隨。Pseudo Class包含下列幾項代表用字： :hover ：滑鼠游移於上方 :focus ：Tab選擇到的物件 :active ：滑鼠或Enter點擊剎那（或手機板的點開中） :target ：被選擇的區塊，內容放置的代表針對被選擇的id做事。（#id:target）通常可搭配display（none/block）來使資料顯示與否 https://www.w3schools.com/cssref/sel_target.asp 搭配燈箱效果（常用於廣告或Cookie顯示） https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target_modal 　　要在這些游移、點擊、選擇後做什麼動作，可以輔以在{}添加內容，像是常用顏色（color、grayscale）、透明度（opacity）、動畫（animation）、縮放（Scale）來區辨使用者有執行上面那些pseudo class的動作。實作例子 [在widget上，以hover, active搭配opacity] 　　以自己的Blogger為例，在文章頁面最下方，可以看見Archive的區塊，我設定了透明度，當hover或點擊選中

閱讀完整內容

【網誌】Blogger App｜行動間貼文

這篇要記錄的是操作Android版本 Blogger 原生 App 的過程，想知道到底原生App是否方便？優缺在哪？分享給大家。(這篇我也嘗試採用App打完) 文章管理區塊從乾淨的介面中可以看出基本功能都有，包含編輯、儲存、發布、刪除文章，也能看到所有現存文章，依照發布與否排列整齊。點擊筆圖樣進入編輯後，可以看到能夠輸入標題、內文及標籤、插入圖片。 [同步Blogger後乾淨整齊的文章列表] [創建單篇文章之編輯介面] 內文編輯區塊主要功能都有，能上傳圖片、簡單上粗體，但排版可能還做不到太方便，像是讓圖片穿插其中、字樣設定。所以會建議的搭配用法是：「有靈感時直接創建文章、上標籤，輸入內文，傳送手機截圖時得以直接傳送，較方便。其餘細緻動作再一併用筆電處理。」 [非常陽春的編輯區塊] [會自動補齊過去曾用過的標籤] [撰寫完貼文後可於右上方儲存或發布] 心得結果實際Po這篇文測試以後，圖片上傳有問題，會出現bug，只能以純文字方式(測試ok)送出，稍嫌不便。 [draft字樣旁小圖片未消失顯示上傳失敗] 所以說，如果以Blogger App來貼含圖片的文，可能只能先傳到Drive。但也可能是手機型號差異所產生的bug，或許其他機型在使用上還是很順暢，大家還是可以嘗試。（筆者所使用的測試機為Sony Z5 Premium）後記由於這篇圖片傳輸碰上Bug，所以後來我另外再找到了 Bloggeroid 這個App作為解決方案，一樣用手機編輯的方式把此篇圖片做上傳並安置，補齊內容。下一篇我會介紹Bloggeroid這個App，功能上滿好用。 posted from Bloggeroid

閱讀完整內容

【網誌】Blogger｜留言統計、表情回覆｜Disqus

上一篇中，加入了Disqus的工具後，下一步就可以進一步實現如統計、表情支持等基礎功能。留言統計 Blogger添加Script 到Blogger中的主題> 編輯HTML處，在body區塊底部置入script即可控制 <script id="dsq-count-scr" src="// 自己的Disqus暱稱 .disqus.com/count.js" async></script> → 暱稱(Short Name)可以在 Disqus的Admin> Settings> General 中找到　　增加完後儲存，回到網誌的各篇文章中就可以看到文章發布日期旁邊多了0 comment，出現在如下圖螢光的位置。這時只要點擊文章中的這一個連結，就會跳到下方留言區。此外，在首頁也會直接顯示各篇文章有幾則留言。 Disqus更動留言設置那可以看到圖上我改成了「歡迎點此至底部留言」，要怎麼設定呢？　　其實也很簡單。從 Admin> Settings> Community的最上面Comment Count Link區塊讓你更改，依照 0則、1則、n則留言而有不同的字樣出現，這裡可以自行設定。在這個區塊還可以調整其他事項，如原PO的標記、留言權限、留言內容、階層式留言等等。表情回覆這滿有趣的，就像手機瀏覽新聞網頁，也會開放讓讀者在下方直接按愛心、按怒、傷心等等圖示，當讀者看了你的文章有什麼感覺就可以邀請他們順手按一下，非常適合手機用戶順手按心得的使用習慣。這部分可以從 Settings> Reaction 中調整自訂樣貌後，點選Enable即完成，非常簡單。完成的樣貌如下：到這邊就完成啦，不過一般跳轉時會直接跳到下方，那要怎麼製造滾動下去的效果呢？　　只要在Blogger中的主題> 自訂> 進階> 新增CSS 的地方加入 html{scroll-behavior=smooth;} 即可，這樣子就會很順，才不會讓使用者感到疑惑，能清楚知道網頁的動向。（但目前只支援Chrome, Opera, Firefox等瀏覽器，手機板僅Firefox可看出效果。）這次教學紀錄到此，如果您喜歡我的

閱讀完整內容

【網誌】Blogger｜更動留言區塊，如何使用Disqus工具

Blogger預設的留言區塊是讓到訪者以Google登入留言，或是訪客身分。如果想要讓更廣泛的讀者留言互動，就可以依靠Disque，將這套小工具(Widget)安裝在Blogger中。安裝步驟？可以參閱官方的說明 https://disqus.com/admin/blogger/ 1. 到官網申請帳號 2. 完成後選擇使用／申裝 [上面是到別人的地盤留言／下面是裝在自己的地盤] 3. 填寫資料送出（看自己要什麼名稱、語言。） 4. 訂閱基本即可（Subscribe Basics） 5. 選擇平台，這裡當然是Blogger（其他還有非常多平台都支援，包括常見的Wordpress, Tumblr, Wix, Weebly, Strikingly, Jekyll, Hubspot, ...） 6. 點選Add...的按鈕正式安裝！（這邊要注意如果妳是Dynamic View動態主題會不能用。） 7. 送出→自動跳轉回Blogger→儲存排列→回到Disqus按下Configure設置。到這邊就大致完成囉！成果展示 [Before] [After] 也就是目前可以在我的Blogger上看到的樣子。另外，還有一小步實現支援所有新舊版IE需做的功夫： https://help.disqus.com/installation/updating-a-blogger-template-to-support-all-versions-of-internet-explorer 　　完成以後，可以看看自動跳出的影片： 6個安裝後可進行的動作。包括後續處理到留言內容過濾、階層式留言、置頂留言(Moderators)、開啟留言通知...等等。還可以再調整細部樣式（語言、表情包等等）。如果安裝不妥碰上問題，或許也可以嘗試用手動的方式，附上官方教學網址： https://help.disqus.com/installation/manually-adding-a-disqus-gadget-to-blogger 　　那其實不僅是Blogger，其他平台也都常見這個套件，因為管理留言很便利，回到Disque就可以看統整的留言了。那也歡迎大家看完文章可以至下方留言、Disqus一下哦！（像Discuss的感覺，如果點選留

閱讀完整內容

【網誌】Blogger｜文章發布技巧｜Tags、Schedule、Link

在打每篇文章以前，身為作者肯定會有一些想法、動機來完成這篇文章，不管是為了完整紀錄某個主題(Topic) 下的收穫、心得，或者是延續某篇未完的篇章。抑或在開創部落格的最開始就有所規劃，這時候我們就得以善用分類標籤。而在辛苦打完一篇文章後，想搭配讀者習慣抓個好時間才發文，也可以設定排程。那別人要怎麼外連至這篇文章呢？就要設定好網址。調整文章設定文章編輯時，在文章的右方可以看到「文章設定」區塊。（如下圖）標籤（Tags）善用分類標籤歸類好同類別或特質的文章，設定好與內文關聯的關鍵字(Keywords) 搭配好自己為該文章的標題命名，做好分類才方便日後管理跟查詢，讓讀者或自己都好找到，可以透過在網誌上的標籤小工具自動整理同類文章。同時，也能對SEO提升有助益。排程（Scheduling）打完文章後，如果感到發文過於密集，想要緩緩的話，那麼可以設定日期及時間，做好排程給予緩衝，讓發布時間依照自己所設定的時候出現。不過這邊要注意的一點是它的時區為太平洋標準時間(Pacific Standard Time, PST)，相較台灣位處的時區CST晚16個小時。舉例來說： 2018/11/13 21:20:00 PST 等於 2018/11/14 13:20:00 CST 什麼是CST時區？觀看這篇文章按下設定日期時其實會出現當下時間，但因為時區關係，看起來好像時間點不同。如果只是想要不同日子同時間規劃發文，調整日期即可。連結（Hyperlink）一般預設發布文章時，即會自動產生永久連結，是根據標題擷取英文字作為網址參照。那我們也可以選擇自己設定，網址一般可以設定「-」或「_」來幫助英文詞彙做分隔，更能看出意義，同時幫助SEO。這篇預設自動產生的永久連結為bloggertagsschedulelink 我可以將網址自訂為blogger-tags-schedule-link 當做完這些動作並發佈後，就得到清楚分類，且網址客製的一篇文章列入排程囉！（可以在後台的發表文章> 已排程區塊裡看到）　　上述算是簡單而能改善SEO的細微動作，除了產生易搜索的特性外，還要有內文品質引人入勝，得以清楚解決問題；外觀吸睛，操作新穎有趣、閱讀舒適，整體的

閱讀完整內容

【數據分析】R｜修正時區｜as_datetime & timezone

繼【數據分析】R｜時間格式處理｜date format & lubridate 上次提到如何將各種常見型態的日期以及時間，分別轉換成標準格式的Date和POSIXt型態，也見證了Lubridate的好用。　　在我的那篇文章中，有個待解決的問題，就是Lubridate用as_datetime轉完後的結果，雖然數字都乖乖的轉換成對的型態了，但！！出來的結果卻會將時區統一變成UTC，但我們實際上是住在CST阿！！所以需要額外做「時區轉換」。（這邊名詞如果有不了解可以回頭看上篇）時區轉換函數在該篇文章裡，我有提到在Lubridate中有方法做時區轉換，有請with_tz()這個函式。 with_tz ("datetime",tz="timezone") 這個函數就是專門針對剛剛所準備好的標準時間值（轉換完成後存放datetime型態的變數），將其時區根據你的需求做調整。舉例來說： b<-as_datetime(1541111111) with_tz(b, tz="時區") 就像這樣代進去。那後面的時區難道只是放CST（以身為台灣人為例）這麼簡單嗎？可以試試看，會報錯。那該怎麼做呢？找尋所在時區如何知道我們所在的時區？可以到環境裏頭去找，這裡透過Sys.getenv()可以看看環境(environment)中有那些現存資源，這時候發現到了TZDIR這個包含TimeZone資源的資料夾(Directory)。 Sys.getenv("TZDIR") 來講講我是怎麼發現這個位置的？輸入完Sys.getenv之後，按Tab會自動補全並跳到()中央，再按一次Tab就能知道這個函數能呼叫什麼，而我要找的跟Timezone有關，所以就先輸入tz，這時候跳提示出現TZDIR，再次Tab補全。　　跑了這行程式碼後，會告訴你這個資料夾所在地方：R>R-3.5.1>share>zoneinfo，進入資料夾後，發現存在各種地區（如下圖） [存有各地timezone的zoneinfo資料夾] 這時候需要發揮本能了，生而為人，應該都清楚知道自己住哪，站在地球上的哪個位置。像我所在的地方位於台灣的新北市。雖然沒

閱讀完整內容

【網誌】Blogger｜簡單建立個人網誌

現存有各種方式可以建立自己的個人網誌，像是自己用XAMPP架Server、也可以採用不管企業或個人都適合且套件完整的WordPress。或是比較簡單的申請痞克幫(pixnet)、隨意窩(Xuite)帳戶。（就像以前國中時期用無名小站也會自己去選設計好的模板套用，很方便，可惜後來倒了。）關於 Blogger Google Blogger也同樣能夠非常快速採用內建風格，且現在多數人都擁有Google帳戶，申請方便，且能直接使用一整套串連的服務，如Drive雲端硬碟、 Google Analytics 觀看流量數據。若經營得好、慢慢累積人氣，到達符合 Adsense 的方針標準，就有機會申請擺上廣告獲利。　　當創建好Blogger之後，首先當然是先快速美化、布置好自己的Blog ，可以先從下述幾部分著手，都在後台進行設置。風格布置 theme ：首先從眾多主題中挑選喜歡的，我個人喜歡簡約的風格，所以選擇Contempo。（主題） icon ：用AI、PS，或線上工具來設計專屬Blog的標誌。（版面配置> 網站小圖示） widget ：決定該放置哪些小工具、如何擺置呈現，方便讀者閱讀或易於尋找文章。（版面配置> 分別新增或調整，給予這些小工具明顯且統一性的命名。） background ：選定符合個人特色的背景。（主題> 自訂> 背景）上傳後可以做些調整，比方模糊化3px（選擇進階> 背景）。 color ：整體色調作調配，選定主色調及輔助色，以對比清楚為主，在連結上動手腳。（進階> 分別調整）個人化添加設置簡介（主題> 編輯HTML）找到 profile-datablock 這個class 在<dl>標籤內部增加<dd>標籤，置放簡介文字內容樣式（主題> 自訂（點擊後進入圖中主題設計工具）> 進階> 新增css）在這裡可以隨心所欲的改動自己想要的效果。可以自定義一些 id、class ，未來在編輯文章時，切換到 HTML模式，增加 class=""或id="" 就能自動套用。觀察一下自己po過的文章，覺得有些地方可以改動來凸顯差異，就可以利用這邊來設定。比如我

閱讀完整內容

【數據分析】R｜時間格式處理｜date format & lubridate

在R之中，我們有時會需要時間的轉換。常常抓到網路資料後，得到的timestamp欄位可能是char或是num的格式，這時候就可以採用內建的as.date或取用lubridate這個package。但在了解怎麼用後面的函數從字串中轉成時間前，得先知道什麼是標準的時間格式，才知道怎麼得到想要的結果。標準時間格式 class為「POSIXlt」和「POSIXct」，包含資料的格式為" %Y-%m-%d %H:%M:%S "。 "年-月-日時:分:秒" 在日期間以「-」區隔，時間以「:」區隔，兩者以一個空白分隔。 %m 小寫是月(month)， %M 大寫是分(Minute) → 時間的格式都是大寫。我們常用 Sys.time()或now() 來取得執行當下的時間點，可以得到標準格式 "2018-11-09 11:35:06 CST" 。以我們台灣來講，CST = China Standard Time，也就是常聽到的中原標準時間，是我們這個經度所位在的時區。相對於UTC地球標準時間要加上八小時。即為UTC+8。 UTC = Coordinated Universal Time是像秒一樣的公定標準，格林威治標準時間GMT = Greenwich Mean Time所在時區與該時間相同。 now()之中可以設定時區 → now(tzone = "UTC") 會得到比CST少8小時的結果。而日期格式較為簡單， class為「Date」，取得當天日期則用Sys.Date()。轉換為日期首先先看日期的部分，實作上，常碰到的是三種狀況：長相已經是標準日期（Ex: 2018-11-09），但型別為character 長相是數字（Ex: 17844），型別為numeric 各式長相的時間（Ex: "November 9, 2018"、"09/11/2018"），型別為character 面對這些該如何怎麼解決呢？解決方法：as.Date搭配format設定 [1] as.Date("2018-11-09") 　　→"2018/11/09"也

閱讀完整內容

【軟體操作】Google Slides｜下載共用簡報方式與網址

本篇所使用之Google Slides網址為： https://docs.google.com/presentation/d/1I_-bwMI4R_ZverF_pdEY9h81jx1PM98DNpRzw0Jad58/edit#slide=id.p2 如何下載線上投影片方法一：介面操作 [檔案> 下載格式> PDF(或其他自訂格式)] 方法二：查看簡報點選畫面右上方的查看簡報按鈕進入（或先點擊工作區域，再按Ctrl+Shift+F5） [設定圖示> 下載PDF或PPTX] 方法三：更改網址 https://docs.google.com/presentation/d/ <FileID> / export / <format> 仔細觀察原網址，由/分隔出的各個部分。在/presentation/d/後方為這份簡報的 <FileID> 。 1I_-bwMI4R_ZverF_pdEY9h81jx1PM98DNpRzw0Jad58 如範例中即為上面這組長度為44個字元，由大小寫英文、數字及-_字符形成的識別碼。於後方加上/export/代表輸出，最後加上需輸出的格式 <format> ，需自行設定。可設定pdf、pptx、txt、odp、 png、jpeg、svg 等格式將完整連結輸至網址列即可跳出下載視窗 Ex: https://docs.google.com/presentation/d/1I_-bwMI4R_ZverF_pdEY9h81jx1PM98DNpRzw0Jad58/ export/pdf 問題　　然而，png、jpeg、svg預設只能存取一頁（如第一張圖所示"當前頁面"，而以網址的方法只能存下首頁p1），那要怎麼取得其他頁面的圖檔並下載？答案　　為了解決這個問題，我從Dev-Tools的Network去觀察，操作點下檔案> 下載格式> PNG圖片，觀察按下按鈕後Request方法，發現它在網址後方加入「?pageid=p2」即可。 Ex: https://docs.google.com/presentation/d/1I_-bw

閱讀完整內容

【數據分析】R｜擷取字串｜RegEx與常用函數

在抓取資料或清理資料、Mutate整理Dataframe時，我們常常會需要擷取字串，舉凡辨識Email、檔案格式或副檔名(File Extension)、用字分析...等等，抑或最簡單的只想看出vector中含有某個詞彙的比率，各種情境都很常出現擷取或比對字串的需求。擷取字串常用函數而在這過程之中，勢必需要了解有哪些函數與方法來幫助解決問題。來看看常用的函數包含在哪些Package？ base 內建之基礎套件 grep：設定要找的詞彙，列舉資料中存在該詞彙的位置(index)。 grep("pattern", vector) grepl：與grep一樣，但l代表logical，列舉之結果為T/F，有該pattern者為TRUE。 gsub：可以將pattern中( )所鎖定的subpattern再進一步抓出來，結果為( )中內容。 gsub("(sub)pattern", "\\1", vector) gsub("pattern", sentence, "substitution")，把字串中所有含pattern者依substitution做取代。gsub = global substitution strsplit：String Split，顧名思義將字串做分割（依據給的pattern）。 strsplit(sentence, "pattern") stringr 需另外載入之套件 str_detect：偵測到vector之字串中含有pattern者為TRUE str_detect(vector, "pattern") str_sub：自字串中，擷取設定之始末位置(index)之間的字串。subset of the string str_sub(string, start_index, end_index)，末位置接受負值，代表倒數第幾個。 grepl vs. str_detect？　　基本上，我認為grepl與str_detect沒有差異。個人在處理時較喜歡利用str_detect的方法判斷dataframe欄位是否有想要的pattern，直

閱讀完整內容

【軟體操作】Axure RP｜初探專業級原型設計利器｜Prototype

昨天在課堂上，來自悠識 UserXper 的講師大致介紹了Axure這套軟體的元件與互動，收穫很多，覺得功能真的滿強大的，能夠完整呈現一個網頁的長相，並能針對元件、頁面做註記，方便設計師與工程師做溝通，做出專業級的"PRO"totype！在此先做個紀錄並引言分享。如何下載？首頁： https://www.axure.com 下載： https://www.axure.com/downloadthanks?dl=80pc （注意：從這個連結進去即會自動跳出下載視窗詢問您下載位置）可以趁下載同時，一邊先看過下載頁面中的影片，熟悉介面環境，下載好後一打開整體環境畫面就一目了然（如下圖），主要操作方式是以滑鼠拖拉點選做布置。 [Axure RP 軟體介面] 取得授權？　　一般下載後可試用30天，若申請License可續用，而Axure對於在學學生則可提供一年期的授權，只要附上在學證明申請即可。（學生與教師之授權申請網址： https://www.axure.com/edu ）　　像我自己是在學學生身分，到自己的學校申請並取得在學證明，在上述網址填表過程上傳電子檔即可。（舉例來說，NTU學生到My ePo登入校內帳號後，點選左列最下方在學證明，就能直接下載電子檔，非常方便。他校流程須查詢校內規範，應該也類似。）主畫面包含：紅框部分正中間為畫布：左邊及上面有尺規，可以拉出輔助線。上面為大工具：右鍵後點選 Customize Toolbar 即可選擇自己的常用工具。右上角為輸出：可以預覽自己在各元件、頁面的互動，選擇輸出。綠框部分左邊為頁面區：事先做好有架構的命名，可以節省麻煩、方便溝通。上面為小工具：基本上與Word, Powerpoint一樣，在右邊則可設定Pixel。固定方框預設隱藏右邊為 Inspector ：至關重要，可以看與被點擊物件相關的所有特性，包含與I/O互動的關係和動畫呈現(Properties)、為它做的註解(Notes)與本身的特質(Style)。像是自適應螢幕大小的設計就是透過Properties中Adaptive的Enable與否來進一步設定完成。其他部分左邊的 Libraries

閱讀完整內容