2016年6月29日 星期三

[筆記].net MVC 安裝Web Essentials 並 使用bundle功能將多個CSS or JS檔打包彙整成一個檔案

首先第一步 安裝:Web Essentials
https://visualstudiogallery.msdn.microsoft.com/56633663-6799-41d7-9df7-0f2a504ca361 

第二步 裝好之後 到下面這個網址
http://vswebessentials.com/features/bundling

第三步 複製畫面中的XML



第四步 在專案中加入bundle檔
例如:main.css.bundle

第五步 將剛剛複製的XML貼到bundle檔中,然後修改或加入你要匯入的檔案及路徑後存檔


第六步 在Visual Studio中先確定檔案已加入專案後點選Update All Bundles

完成了! 此時你會看到多了2隻CSS檔
依本範例為例會多出
main.css及main.min.css













2016年6月23日 星期四

[筆記]CSS3 filter blur 濾鏡特效

常常在一些網站上看到滑鼠移入時會出現圖片霧化個幾秒鐘
且同時底下的字或是小icon會移動或是變色

好奇看了一下之後做了一個類似的感覺還不賴

主要是靠CSS中的 @keyframes關鍵影格
以及CSS的一些事件來完成
搜尋關鍵字"css event another"也可以找到一些相關的文章

以下是我的小範例

See the Pen JKbPEg by AllenYu (@allenyjs) on CodePen.

2016年6月16日 星期四

[筆記]網頁schema結構化標記

今天再研究網頁結構化標記  參考了一些資料
在看google的說明時發現了schema.org
說明中有提到schema.org 是由 Google、Microsoft 與 Yahoo! 聯手打造的計劃, 用來幫助解讀網頁中的相關資訊
 (詳細內容參考: https://support.google.com/webmasters/answer/3069489?topic=3070267&hl=zh-Hant&rd=1 )  

 為了怕之後自己忘記做一下簡易說明筆記
說明如下:(詳細版請參考 https://schema.org/CreativeWork )
1. 在 html Tag 中加入 itemscope itemtype=”http://schema.org/WebSite” 
範例:  
<html itemscope itemtype="http://schema.org/WebSite"></html> 

2. 在 head Tag 中加入以下 meta
範例:
<meta itemprop="name" property="og:title" content="結構化範例網頁" /> 
<meta itemprop="keywords" name="keywords" content="關鍵字 1,關鍵字 2,關鍵字 3" /> 
<meta itemprop="description" property="og:description" name="description" content="我的網站超炫超厲害......" /> 
<meta itemprop="url" property="og:url" content="http://allenyjs.blogspot.tw/" /> 
<meta itemprop="image" property="og:image" content="image/sample-logo.png" /> 
<meta itemprop="author" property="og:site_name" name="author" content="資深初心者的部落格">  

3. 在 body Tag 中加入 itemscope="" itemtype=http://schema.org/WebPage
範例:
<body itemscope="" itemtype="http://schema.org/WebPage">  

4. 在<body></body>內層加入一個標題並在此標題的 Tag 中加入 itemprop="name"
範例:
<h1 itemprop="name">結構化範例網頁</h1>

5. 在版權聲明的 Tag 上加入 itemprop="copyrightHolder"
範例:
<footer> 
  <p itemprop="copyrightHolder">某某公司 版權所有 © 2016 All Rights Reserved. </p>
</footer>  

可以利用以下工具協助標記及檢查

結構化資料標記協助工具:
https://www.google.com/webmasters/markup-helper/u/0/

結構化資料測試工具:
https://search.google.com/structured-data/testing-tool/u/0/

當然這只是簡單的標記而已因為太多種了
詳細的說明還是要看https://schema.org/CreativeWork

在Google測試工具中測試的結果大概會長成這樣


最後我的範例請參考:
See the Pen 結構化範例網頁 by AllenYu (@allenyjs) on CodePen.