2012年6月27日 星期三

寫jQuery Mobile好工具–WebMatrix 2


發現寫jQuery Mobile好工具–微軟免費的 WebMatrix 2,要測試時比使用Visual Studio 2012好用一點點 ,因為多了一堆模擬器可以使用啊。
  • 先下載 WebMatrix 2來玩玩
image
安裝相關軟體
image
image
image
  • 安裝完建立一個範本看看
image
  • 建立Empty Site
image
image
  • 在預設的index.html寫網頁
image
  • 不知是否原電腦就裝了windows Phone模擬器的關係,一開始就可以直接選取在windows Phone模擬器執行
image
  • 執行結果
image
  • 最好用的是這個,Open in all選項,會一次將ie, firefox ,chrome與windows Phone 7全部run起來,可以檢視在各種browser上執行的結果
image
  • 也可以新增iphone或iPad模擬器
image
image
image
  • 這樣選了Open in all之後….啊…畫面好亂啊…但這功能真不錯,為何Visual Studio 2012 RC沒有??
image
  • 若要使用Visual Studio 功能,也可以馬上切到Visual Studio來編輯。
image

Q & A:資料庫是放在App_Data下要如何發行至Server

Q:如果資料庫是放在App_Data下要如何發行至Server啊?? 資料庫連線要如何修改!!

A:嗯, publish完就沒事了…

如果有特殊權線或Profile問題,參考 這篇

開發工具:Visual Studio 2010
OS:Windows 7 + IIS 7.5

Web Service和ASP.NET運作方式應該相同,以ASP.NET專案測試,測試步驟:

  • 新建Web Site

image

  • 加DB

image

  • 放App_Data

image

  • 建table

image

  • Add Field

image

  • Add Data

image

  • Add Entity Framework

image

  • From DB

image

image

image

  • 加網頁

image

  • 選Entity (嗯,因為電腦混裝 Visual Studio 2012,精靈的畫面被改掉了)

image

  • 選Entity

image

image

產生的connection String:

<connectionStrings>
    <add name="ApplicationServices" connectionString="data source=.\SQLEXPRESS;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnetdb.mdf;User Instance=true"
      providerName="System.Data.SqlClient" />
    <add name="DatabaseEntities" connectionString="metadata=res://*/App_Code.Model.csdl|res://*/App_Code.Model.ssdl|res://*/App_Code.Model.msl;provider=System.Data.SqlClient;provider connection string=&quot;data source=.\SQLEXPRESS;attachdbfilename=|DataDirectory|\Database.mdf;integrated security=True;user instance=True;multipleactiveresultsets=True;App=EntityFramework&quot;"
      providerName="System.Data.EntityClient" />
    <add name="DatabaseConnectionString1" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True"
      providerName="System.Data.SqlClient" />
  </connectionStrings>
  • 在ASP.NET Web Development Server 試run,OK

image

  • Publish到iis

image

image

  • DB也自動複製過來了

image

  • 在IIS試run

image

  • OK

image

2012年6月22日 星期五

jQuery Mobile初體驗


工具: Visual Studio 2012 RC
OS: Windows 8
測試在Window8 RC 上使用Visual Studio 2012 RC來開發支援JQuery Mobile的 ASP.NET Web Form。
  • 新建一個空網站
image
  • 從以下網站下載 jquery.mobile-1.1.0.js
http://jquerymobile.com/
image
image
  • 將下載的 js 檔加入Visual Studio 2012 專案中
image
  • 新增webform
image
  • code
<%@ Page Language="C#" %>
<!DOCTYPE html>
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>   
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="script/jquery.mobile-1.1.0.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div data-role="page">
        <div data-role="header">
            <h1>jQuery Mobile Demo</h1>
        </div>
        <div data-role="content">
            <p>第一個jQuery Mobile 程式</p>
        </div>
    </div>
    </form>
</body>
</html>
  • Run
image

微軟發佈MCSD HTML5認證考試

考試代號 Exam 70-480: Programming in HTML5 with JavaScript and CSS3
預定開始考試日期:2012/08/14

為以下認證之必考科目:
•MCSD: Web Applications
•MCSD: Windows Metro style Apps using HTML5

參考資料來源

2012年6月13日 星期三

使用Modernizr判斷是否支援HTML 5功能

 

如過要在JavaScript程式中判斷瀏覽器是否有支援HTML 5的某些功能,可以利用Open Source的Modernizr,先下載 modernizr-2.0.6.js,然後在網頁中引用,例如以下透過Modernizr判斷是否有支援HTML 5的canvas功能:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>  
    <script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="scripts/modernizr-2.0.6.js"></script>
    <script type="text/javascript">
        $(function () {
            if (Modernizr.canvas)
                $("#result").text("你的瀏覽器支援canvas");
            else
                $("#result").text("你的瀏覽器不支援canvas");           
        });
    </script>
  
</head>
<body >
   <div id="result"></div>
</body>
</html>

 

如果不想下載Modernizr,也可以將source指向 Microsoft Ajax Content Delivery Network,例如;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>  
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>
    <script type="text/javascript">
        $(function () {
            if (Modernizr.canvas)
                $("#result").text("你的瀏覽器支援canvas");
            else
                $("#result").text("你的瀏覽器不支援canvas");           
        });
    </script>
  
</head>
<body >
   <div id="result"></div>
</body>
</html>

2012年6月11日 星期一

在JavaScript使用Reference註解提供IntelliSense支援

 

開發工具:Visual Studio 2010

一般在Visual Studio撰寫含jQuery的 Java Script程式時,Visual Studio 的專案範本中會包含一個xxxx.vsdoc.js檔案,提供撰寫程式時的IntelliSense支援。

不過若在一個JS檔案中,撰寫程式時,例如下圖,預設看不懂$符號,所以無法提供任何support

image

你可以在js檔案中,使用reference,從Solution Explorer拖曳XXX.vsdoc.js檔案到js檔上方,就會自動產生Reference標記,以三個/線開始:

image

後續在輸入程式碼時,就看的懂$號了

image

也會提供一些jQuery相關的提示:

image

2012年6月8日 星期五

測試瀏覽器是否支援HTML5功能

 

最近在測試HTML5的一些程式碼時,發現有些標籤或屬性,不同版本的瀏覽器的支援程度差很大,google了一下,找到很多人推薦的網站可以提供功能測試 :

http://html5test.com/

例如要查詢HTML設計Drap Drop功能時,有一個dropzone attribute,但程式跑在Firefox (versin 13) 時行為很怪異,原來是不Support

使用Firefox連上此網站,得分330

image

往下細看報告,原來dropzone attribute是不support的,難怪試了半天一直怪怪的。

image

 

換Chrome 19 看看,分數很高

image

有support dropzone

image

最後是ie9

image

支援程度差了些

image

總網頁瀏覽量