發表文章

〖典藏〗★ Must Read

【網誌】SEO｜處理內文不安全連結｜noFollow Link

圖片
在上次 【網誌】Blogger｜文章發布技巧｜Tags、Schedule、Link 這篇談論到關於SEO（Search Engine Optimization），也就是怎麼樣讓自己的網誌在搜尋引擎中提前。該篇提到可以自訂連結名稱，將最重要的主題名稱及關鍵字詞組放置其中。 這次我所要提的SEO方法，也與連結有關。 設定rel="nofollow"時機？ 我們在內文新增連結時，會指向不同的 來源 ，等於在提供資源給讀者做鑽研，也是貼文參考的依據。 　　而如果這項來源網址的網站經營方並不 可靠 ，通常會以http的方式連過去，不像http s 經過加密的動作較安全（Secure）。那搜尋引擎在評分時，也會依照內文的連結數中，有多少來自這樣不健康的網站，根據數量多寡決定將妳的網站打入冷宮與否？ 　　因為擔心這些不安全來源是垃圾網站、釣魚網頁或廣告，怕撰文者刻意引導過去。如果能減少這種來源，當然是最好。儘管如此，有時候雖然來源是http，卻不一定內容都有問題，單純是該經營者沒有花錢申請網域，讓人得以通過加密管道獲取該網站資源。所以當來自這種網站的資訊又不可或缺時，就可以在屬性中加入 關鍵字rel="nofollow" ！藉此不把這個連結算入搜尋引擎追蹤的考量。 如何設定 rel="nofollow"？ 在過去，要設定時必須在各個hyperlink的attribute中自主加上它。像是： Ivan Chen <a href="https://ivanchen20.blogspot.com/" rel="nofollow" target="_blank">Ivan Chen</a> 　　現在若想要加上它，Blogger可以直接在撰文過程中，為文字製作超連結時所跳出的框框裡，將其 勾選 起來即可，如圖： 　　最後再提一個小技巧，如果要幫網址設定超連結，只要反白起來，按下編輯區上排的「超連結」就會自動產生囉！如下所示： [先反白再按下去] [按下去後結果]
張貼留言
閱讀完整內容

【科技生活】重灌前中後小記錄｜Reformat Win10

圖片
平時養成好習慣，程式下載前都會先自訂位置，且我也把文件、音樂、下載（預設需到瀏覽器設定調整）...等資料夾都改到D槽了，但可能因為之前有次直接硬搬C槽Program中的資料到D槽，使得索引位置整個跑掉，有些以為刪除的資料還存在硬碟空間中。 而最近系統空間亮出紅條，決定重灌筆電，以下紀錄自己的重灌過程還有前後值得注意的事。 重灌前可以做的事： 匯出 瀏覽器標籤、最愛（我採用Opera可登入自動同步，Chrome也行） 將所有Fonts資料夾（C:/Windows/Fonts）內字型備份 將所有 同步帳號登出 同時記錄各應用程式綁定的帳號 這步驟是為 防止直接將所有資料抹去時也刪掉了備份 確定自己是否需要重灌？ 或是先將應用程式做整理，騰出空間即可？ 搜尋%TEMP%，刪除資料夾內資料（不要刪資料夾） 刪除系統還原備份檔 [右鍵內容> 磁碟管理> 清理系統檔] 重灌過程： Windows Defender設定 裝置效能與運作狀況→ 重新開始 利用全新且最新的Windoes安裝從頭開始。 保留個人檔案和部分Windows設定，移除部分應用程式。 注意：MS Office、防毒也會被刪除。 [點選其他資訊後重灌] 等待重置完成，進入開機畫面。 將系統 備份清除 ，擴大空間。（如下圖） 否則舊的系統檔會佔很大空間，以為自己沒有重灌到。（為了讓你不滿意還能夠還原，所以系統會暫時保留） 重灌以後C槽除原廠設定、系統資料以外皆消失、D槽主程式仍存在。 也可以搜尋 應用程式與功能 ，選擇不需要的程式解除安裝。 [設定>儲存空間>釋放空間] 完成重灌！ [完成去除Windows備份動作後可見空間有效擴張] 重灌後可以做的事： 清理 Menu 清楚其中有些檔案已不復存在的捷徑 還有一些預設程式，如果用不到也可解除安裝（Netflix、XBox） 重新 釘選 設定工具列：翻譯工具、便利貼、畫面擷取工具、瀏覽器 設定開始畫面：辦公室、程式設計、繪圖軟體 資料夾釘選：若位於D槽的仍會保留 下載回 程式 （一般性的放在D:/） 重新 同步 資料：郵件、便籤、書籤、雲端硬碟（iCloud、Drive、Dropbox）。
張貼留言
閱讀完整內容

【網誌】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或點擊選中
張貼留言
閱讀完整內容