發表文章

FotoJet 線上照片編輯器:設計圖片、製作拼圖、圖形設計創作工具

圖片
FotoJet 為一款線上照片編輯器,「設計圖片製作拼圖、編輯照片」是此款線上圖形設計創作工具的主要功能。

運用 FotoJet 提供的各式模板範本主題,無論是幫照片運用濾鏡、特效、形狀、增加相框,或是執行一些經常性的制式化平面設計、美工圖片、雜誌、卡片、海報的修編,有了 FotoJet 就能簡化及方便的完成製作工事。



另外如果有經營社交媒體的話,FotoJet 也支援 Facebook、Google+、Youtube、Twitter、Tumblr、Instagram、Pinterest ...等,社交封面圖、社交貼文圖及橫幅廣告的製作。

FotoJet 編輯器平台目前是使用 Flash 運作,因應近年來網路架構的改變,FotoJet 在近期也會推出 HTML5 版本的編輯器平台。FotoJet「設計圖片 Beta 版」的 HTML5 版本已經開始提供給訪客嚐鮮使用,相信不久後 HTML5 的全功能版本就會正式推出。

操作 FotoJet 編輯工具時,會看到黃色的「皇冠圖示」,顯示「皇冠圖示」的資源皆為 PLUS 的高級功能。如果日常使用 FotoJet 的情況很頻繁,不妨參考 FotoJet 的「價格 & 計劃」,PLUS 付費版本除了具有「高級編輯工具」外,也有 600+ 以上的的高級範本主題能夠應用,可以省去大量的圖片創作編輯時間。

值得一提的是 FotoJet 也有 Chrome 版本,如果平常在電腦上是使用 Chrome 瀏覽器,在 Chrome 擴充裡安裝了「FotoJet」,就能快速的在 Chrome 應用程式啟動器『chrome://apps/』中使用 FotoJet 的照片編輯器功能。FotoJet 的 Chrome 擴充與早前介紹的「Pixlr Editor」雷同,在應用程式中開啟後,會連結至網站首頁。



網站資訊: 網站名稱:FotoJet

官方網址:https://www.fotojet.com/

網站性質:線上照片編輯器 (*價格 & 計劃 )

其他版本:設計圖片 HTML5 Beta 版Chrome 擴充版本

適用平台:電腦桌機

使用語言:支援「繁體中文」

工具特點:
瀏覽器操作,免安裝軟體。不用登入註冊即可使用。支援電腦匯入圖檔。支援搜尋匯入 Pixabay 線上素材圖片。使用 Facebook 帳號一鍵登入 (*權限…

註冊申請 Google 帳戶,建立取得 Gmail 帳號

圖片
Android 行動裝置登入、Chrome 瀏覽器、Gmail 郵件服務、Youtube 影片上傳分享、Google drive 雲端儲存、Google Map 地圖規劃行車路線,舉凡網路生活裡的大小事,現在已經越來越離不開 Google 了。

體驗 Google 產品時,需要註冊申請 Google 帳號。帳戶建立後即可透過同一組使用者名稱和密碼使用 Google 相關服務。如果曾經登入過任何 Google 產品,代表已擁有 Google 帳戶。

申請Google帳戶的同時,即可建立並取得一個 Gmail帳號。而帳戶關聯的通知郵件,也會全部寄到新註冊的 Gmail 電子郵件地址中。


剛好最近有需求註冊一個新的 Gmail 帳號,加上建立 Google 帳號的過程有一些小變化,所以這邊就順道記錄下整體的申請流程。



申請流程 申請註冊 Google 帳戶 前往「建立您的 Google 帳戶」,輸入『使用者名稱與密碼』。




填妥「生日、性別與電話」之後,可以按下『下一步』。(* 電話欄位可輸入包含『09』,例如「0912345678」。)




接著可以詳讀使用 Google 服務的「隱私權與條款」。




閱讀完 Google 隱私權政策後,畫面拉至最下方會有一個「我同意」的按鈕。點取『我同意』即可完成註冊 Google 服務帳戶的動作。




到這裡就建立一個 Google 服務帳戶了。接著點取畫面中的『繼續』。




建立取得 Gmail 帳號 在自己 Google 帳戶的資訊主頁,「Google 功能列」中會預置存取常用 Google 應用程式。這裡可以點取『Gmail』。




接下來會有 Gmail 功能導覽。這邊可以點取『繼續』。




在觀看完 Gmail 的導覽介紹後,按下『前往 Gmail』。




到這裡就取得 Gmail 帳號了。




相關文章如何使用自己的電子信箱註冊申請 Google 服務


Google 結構化資料標記:搜尋結果連結網址顯示階層式網站名稱

圖片
Google 網站管理員部落格在 2015 年 4 月 16 日說明,為了讓搜尋結果在行動裝置上,也能夠有良好的體驗,會將行動搜尋結果中的 URL 網址格式,更改為以網站名稱替代的方式顯示 ( 與麵包屑式格式雷同 )。

網頁裡部署「搜尋結果中顯示」的「網站名稱型式的階層式連結路徑」結構化資料標記,支援使用 schema.org 提供的 JSON-LD、Microdata、RDFa 這三種標記類型。

目前網站部署 Google階層式連結網站名稱」的結構化資料標記,僅適用於行動裝置搜尋使用,且現在只在美國語系搜尋結果中顯示。




前置作業 於 Google Search Console 已提交「網站地圖 Sitemap.xml」。

Mobile Friendly:建立適合行動裝置瀏覽的網站「行動裝置相容性測試」。



設置說明 ( 指南 ): 為了讓 Google 將標記的結構化資料視為網站名稱,請務必執行以下操作:

使用 schema.org 提供的詞彙表及 JSON-LD、Microdata、RDFa 這三種標記類型。

設定網站「rel="canonical"」首選版本的連結元素。

不要使用機器人排除協議 ( Robots 協議:也稱為爬蟲協議、機器人協議 ... 等 ) 阻止帶「標記」的頁面。

網站名稱是唯一識別:不被其他網站使用,且不是網站的描述詞。

提供的網站名稱標記,必須與所屬網域合理相似。



標記須在 WebSite 項目下,並使用包含以下相關屬性: url = 官方網站的網址 ( 必需 )「URL

name = 網站的首選名稱 ( 必需 )「Text

alternateName = 希望 Google 考慮的替代名稱 ( 可選 )「Text




設置流程階層式網站名稱 JSON-LD 標記階層式網站名稱 Microdata 標記Blogger 階層式網站名稱標記標記調試分析
設定方式 「搜尋結果網站名稱」的結構化資料標記,可使用 JSON-LD、Microdata、RDFa 這三種標記類型。Google 推薦使用 JSON-LD 標記。

行動版網站中,只要有被搜尋引擎收錄的網頁,皆可放置標記。尤其是文章頁面部署「Breadcrumb 階層導覽麵包屑」的網頁。



Step 1 階層式網站名稱 JSON-LD 標記 可將以下陣列資料,放置在網頁…

Google 結構化資料測試工具:使用方式與基本準則

圖片
Google結構化資料測試工具,是 Google 提供的網頁「結構化資料標記」檢測分析工具,網站中藉由佈置 HTML 結構化語意,能讓搜尋引擎更容易地組織並在搜尋結果中顯示結構化信息。

舉凡食譜標記、麵包屑、連結搜索框、活動、評論、網站徽章 、社交簡介、公司商家資訊、音樂、電視、電影、圖書等類型的資料,都能將網站豐富吸引人的內容在搜尋引擎裡顯示。

結構化資料標記使用 JSON-LD、Microdata、RDFa 這三種標記類型,依據 schema.org 開放協作社群共享編輯。使網站管理員和開發人員更容易的使用統一模式,建立網頁的結構化信息。


現在搜尋引擎已經越來越人性化,除去以往對搜尋引擎的刻板印象。 Google、Microsoft、Yahoo、Yandex 等搜尋引擎,皆已支援網頁 HTML 的結構化標記,訪客在搜尋引擎中得到的搜尋結果,網站關聯信息都能經由使用「結構化資料標記」,在搜尋引擎中呈現豐富連結單元。

Google 在「技術指南」中,建議可在自己的官方網站中使用 schema.org 提供的 JSON-LD、Microdata、RDFa 這三種標記類型,部署網站的結構化資料標記。網站 robots.txt 文件中則不能建立阻擋 Googlebot ( 自動尋檢程式 ) 撈取網頁的資料。

使用結構化資料標記時,Google 建議盡可能使用 JSON-LD 標記。除了「Breadcrumb 階層導覽麵包屑」無法使用 JSON-LD 標記外,Google 也正在為所有主要標記添加 JSON-LD 的支持。

額外的,除了須提供網頁「rel="canonical"」首選版本的連結元素外,也可以標記 AMP HTML 網頁的等效項目,以提供跨設備瀏覽的最佳體驗。



使用流程擷取網址提交程式碼片段Google Search Console 檢查標記
使用方式 在「結構化資料測試工具」幫網頁檢測 HTML 的「結構化資料標記」時,可以使用「擷取網址」與提交「程式碼片段」的方式,做標記的即時調試分析。

目前使用「結構化資料測試工具」時,一次可以檢測一個網頁。如果有多個頁面需要檢測時,就得重複提交網址,建議可以將網站裡重要的頁面進行調試分析。以下是工具的使用方式。

標記網頁的結構化資料,可參考官方文件「Introduction to Structur…

Blogger 如何移除 PageSpeed Insights 禁止轉譯 JavaScript、CSS 資源

圖片
使用 Google PageSpeed InsightsBlogger 網站做網頁速度檢測時,會發現有幾筆禁止轉譯JavaScriptCSS 資源,而且是 Blogger 原生的渲染阻塞資源。

CSS 的部份,分別有「css_bundle_v2.css ( 電腦版 )、widget_css_mobile_2_bundle.css ( 行動版 ) 與 authorization.css」。JavaScript 的部份則為「widgets.js、plusone.js 與看不到的 shindig_random.js」。Blogger 導覽列 ( Navbar ) 預設也藏了一筆「plusone.js」。

上列禁止轉譯的 JavaScript 與 CSS 資源,會影響網頁的載入速度,是 Blogger 範本的底層架構,並不在範本裡出現,僅在網站的「網頁原始碼」中顯示。

CSS 的部份負責按鈕漸層、網頁排板、簡單色塊的組成。網站中原生的分享按鈕、小工具則靠「widgets.js」運作。

非必要,其實可以不用註釋掉這些底層資源,資源移除之後影響深遠,等於得全部自己來。「widgets.js」等 JavaScript 的部份,從某些角度操作還有辦法用 if 判斷式解決,CSS 就需要一些基本功才能做調整。

如果你正在規劃設計 Blogger 版型,或是調整設計 Blogger AMP 網頁,總是被速度或這些「禁止轉譯的 JavaScript、CSS」底層資源限制住,那麼本文應該會很適合你。


我們這裡做個小實驗,觀察一下清除了禁止轉譯的 JavaScript 與 CSS 資源的 Blogger,底層速度到底有多快。測速時使用 Chrome 擴充「Open SEO Stats」,來觀察瀏覽器載入網頁的即時速度。

實驗時使用官方的「簡單」範本,並將範本中「b:skin」裡面的「CSS」清空,版面配置只清除「導覽列」這個小工具,以當作速度測試時的條件。

這邊可以觀察到,在清除「禁止轉譯 JavaScript、CSS 資源」後,Blogger 網誌首頁開啟速度,最快能到「0.19 秒」。採十次用 F5 重刷網頁,平均數值約在「0.36 秒」。一般僅注釋掉 Navbar 導覽列後,平均網頁開啟速度約為「1 秒」。「0.19 秒」很罕見,剛好想寫這篇的時候被測到。


以下是移除…

繼續閱讀: