發表文章

目前顯示的是 12月, 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可看出效果。） 這次教學紀錄到此，如果您喜歡我的
張貼留言
閱讀完整內容