顯示具有 Google Chart 標籤的文章。 顯示所有文章
顯示具有 Google Chart 標籤的文章。 顯示所有文章

2019年8月13日 星期二

ASP.NET 教學 - 前端特效輕鬆學 - 只要「複製＋貼上」就能學 (9.9小時)


課程介紹   (RWD Bootstrap + jQueryUI + fancyBox + CKeditor + Google Chart)


零基礎輕鬆上手

Unity 2D Tang course
不需任何基礎就能輕鬆學會網頁特效，你也做得到！就算您沒有學過 JavaScript、jQuery、CSS，只要會「複製、貼上」就能套用各種網頁特效，讓初學者從零開始無痛入門。
課程中老師也會分享他的「自學」密技，教您知道如何閱讀原廠網站的說明，就能套用這些網頁特效。只要學會這個方法，往後自學也能直接上手！

同時學習後端程式

本課程的所有特效，均提供 ASP.NET 兩種後端程式（Web Form 與 MVC）搭配解說。讓您在學習「前端網頁特效」的同時，也順便學會了 ASP.NET 兩種後端程式！


課程內容    

Bootstrap
Unity 2D Tang course
最熱門的 RWD 網頁特效，可以讓網頁瞬間偵測觀賞者的螢幕大小，自動排版並提供最佳解析度與瀏覽體驗。包含：Carousel、旋轉木馬、輪播（動態投影片）、三段式圖文呈現的樣版等等。

jQueryUI
Unity 2D Tang course
針對撰寫 HTML 表單（Form）的前端網頁提供各種變化，例如：日曆（datepick）以挑選日期取代文字輸入，避免日期格式錯誤。手風琴特效（Accordion）最適合手機螢幕的觀賞與點選。頁籤（Tabs）在各大網站的首頁。這些皆是必備特效，不得不學！


fancyBox
Unity 2D Tang course
Unity 2D Tang course
以圖層（Layout）、燈箱的特效來展示多媒體圖片、影片。是如今每個網站必備且不可缺少的效果。


CKeditor
Unity 2D Tang course
讓您的網頁在輸入長篇文章時，就能直接套用 HTML 效果，如同在網頁上安裝了 DreamWeaver 網頁編輯器一樣，而且是直接在瀏覽器上面執行。


Google Chart
Unity 2D Tang course
Unity 2D Tang course

無所不能的網頁圖表產生器，除了基本的長條圖、圓餅圖、折線圖之外，Google Map 的地圖呈現更是一絕，使用 Google Chart 來繪製網頁圖表，不僅能提升自己網站的效能，繁多的圖表種類更是可以讓人挑到手軟！


學員上課後會學到什麼或能做什麼

  • 了解「直接套用」特效以後，跟原本的網頁有何不同。
  • 後續可以銜接前端技術或是CSS課程。
  • UI畫面走「後端」技術搭配資料庫。
  • 有別於其他課程，需要學會CSS與前端技術，才能寫出作品。
  • 「無須基礎、直接套用」也能做出各種網頁效果。

學員上課前需具備哪些軟、硬體設備或常識

  • 會使用瀏覽器觀看網頁、會複製程式碼並貼上。直接「套用」就能學起，立即看見成果。
  • 基礎的 HTML網頁能力。
  • Visual Studio 2015、2017 或後續新版，請下載社群版（Community版）。
  • 建議使用 Windows 作業系統。因為 Visual Studio Code 與 Visual Studio for Mac 與教學畫面仍有許多差異。

課程適合對象

  • 需要撰寫網頁系統（網頁的前端設計師）、或對於網頁開發有興趣者。
  • 對網頁前端有興趣，卻無任何基礎者。


Unity 2D Tang course

最後也提供範例，讓您把 ASP.NET 後端程式（Web Form 與 MVC）與前端網頁特效結合在一起。讓您在本課程中一併學會前、後端整合的基礎能力！

課程特色

  • 以實作優先：減少理論說明，大量練習範例，講求從做中學。
  • 錯誤學習法：透過錯誤的範例從中學習，並找出自己的盲點。

學員見證

[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm

https://www.dotblogs.com.tw/mis2000lab/2023/01/30/mis2000lab_MVC_onlineLearning2023

[ASP.NET Core MVC]第一天 免費課程 3小時完整試聽

https://www.dotblogs.com.tw/mis2000lab/2023/01/30/AspNetCore_MVC_First_Day_Free_20230130

從最早的 75小時MVC課程，目前已經延伸到 115小時，也包含了 .NET Core

.NET Core 6 MVC線上教學 - MIS2000Lab 課程大綱 與 試聽

https://dotblogs.com.tw/mis2000lab/2021/07/18/NET_MVC_Online_Free_Learning_mis2000lab 

購買完整MVC課程（一百小時），限時六折優惠並免費加贈兩萬元「.NET Core升級課程」，請直接來信洽詢

（太便宜！太划算，不能公開） mis2000lab (at) yahoo.com.tw ; school (at) mis2000lab.net


課程綱要


前端特效 與 ASP.NET (MVC & Web Form) [上集]
1-1 jQuery UI
  • jQuery UI介紹與成果展示
  • ASP.NET MVC入門，產生一個新增的（輸入）表單
  • MVC搭配 jQuery UI ( 1. DatePicker 日曆)。引用jQuery的錯誤與排除。
  • jQuery UI搭配CSS自訂樣式（Themes、配色與外觀）
  • 搭配 jQuery UI ( 2. Accordion 手風琴)
  • 搭配 jQuery UI ( 3. Tabs 頁籤)
  • Web Form快速入門，前端與後端的區別。
  • 搭配 jQuery UI ( 1. DatePicker 日曆)
  • 搭配 jQuery UI ( 2. Accordion 手風琴)
  • 搭配 jQuery UI ( 3. Tabs 頁籤)
1-2 RWD & Bootstrap
  • 下載與安裝Bootstrap
  • 從官方網站的「Example」學起
  • Start-Template，初學者樣版（Index_RWD_Template動作與檢視）
  • Zero-Template，基本款，Bootstrap共用樣版（Index_RWD_ZeroTemplate動作與檢視）
  • 使用ASP.NET MVC內建的範本，做成RWD效果。
  • 簡介MVC內建的Layout Page -共用 _Layout.cshtml。（Index_RWD_MvcDefault動作與檢視）
  • Carousel，旋轉木馬，輪播（動態投影片）#1（Index_RWD_Carousel動作與檢視）
  • 原廠提供的Carousel效果，不太滿意。如何修正？（Index_RWD_Carousel2動作與檢視）
  • 三段式圖文相框（圖片的圓形外框）（Index_RWD_Carousel3動作與檢視）
  • 50-50%圖文排版（Index_RWD_Carousel3動作與檢視）
  • RWD（自適應、響應式網頁設計）說明與示範
  • 下載與安裝Bootstrap (4.1.2版)
  • Start-Template，初學者樣版
  • Zero-Template，基本款，Bootstrap共用樣版
  • Carousel，旋轉木馬，輪播（動態投影片）#1（檔名WebForm_RWD_Carousel）
  • 原廠提供的Carousel效果，不太滿意。如何修正？（檔名WebForm_RWD_Carousel2）
  • 三段式圖文相框（圖片的圓形外框）（檔名WebForm_RWD_Carousel3）
  • 50-50%圖文排版（檔名WebForm_RWD_Carousel3）

 

前端特效 與 ASP.NET (MVC & Web Form) [下集]
1-3 CKeditor（線上的網頁編輯器）
  • 介紹 CKeditor。安裝與設定。
  • 以ASP.NET MVC為例。
  • 以 ASP.NET (Web Form)為例。
  • 「HTML輸入」可能的危害，如何驗證？ 介紹XSS攻擊與防範
  • 「以ASP.NET MVC為例。
  • 「以ASP.NET (Web Form)為例。
1-4 fancyBox，燈箱、圖層效果
  • 介紹 fancyBox（v2.1.7版、v3.x版）
  • 以ASP.NET MVC為例。
  • 以ASP.NET (Web Form)為例。
1-5 Google Chart，網頁圖表之王
  • 介紹 Google Chart（v2.1.7版、v3.x版）
  • 以ASP.NET MVC為例。
  • 以ASP.NET (Web Form)為例。
1-6 ASP.NET（後端）如何與前端（JavaScript）結合？
  • 介紹 Google Chart（v2.1.7版、v3.x版）
  • 以ASP.NET MVC為例，介紹四種寫法與JavaScriptResult。
  • 以ASP.NET (Web Form)為例。

ASP.NET 教學 - 前端特效輕鬆學 (9.9小時) 

優惠連結 https://9vs1.com/go/?i=323a87a3f716


張貼者： 於 沒有留言:
標籤： , , , , , , , , , , , , , , ,

2016年12月29日 星期四

[台北科大 分享會] Google Chart 網頁圖表產生器 - 2017/1/18（三）19:30

2017/01/18   週三 晚上 19:30~21:00   招生中

課程主題：Google Chart網頁圖表產生器


本次分享會的宗旨：
    「實用」、「簡單明瞭」、「實作」、「即戰力」
    不只是放放投影片混一個小時而已，希望有一個真正的範例作給大家看，您也可以跟著做。
    而且 "入門"範例，可以讓大家感受到 "實用" 且 "學得會"。 自己聽得懂、做得到，才有幫助！

課程大綱 & 內容：  
      （講師： MIS2000 Lab.，微軟MVP 2008~2016）
      （課程約一小時，後續半小時為自由討論、分享、認識人脈的時間）
  1. 為什麼不用 ASP.NET Chart控制項？
  2. 對前端技術不熟悉，15分鐘學得會 Google Chart？
  3.       沒有前端經驗的人，也可以立即「套用」前端的特效。
  4.       學習「看得懂」原廠文件，快速引用網路上各種資源。
  5. 實際範例解說，使用Visual Studio  -- 如何與後端程式結合（以ASP.NET為例）
  6. Q & A，課後討論時間

  7. Bonus 福利 -- 社群分享、認識朋友、工作轉介 (分享.NET的工作機會與職缺)

參與人數：15人（現場沒有電腦教室。請自備NB 或是 兩手空空也行，帶著 輕鬆的心情 過來即可）
      分享會的內容，並非「從零講起」，未必適合毫無基礎的初學者（但如果您堅持要來旁聽，也歡迎）
      希望是業界、現役的工程師一起參與。

地  點：台北科大 育成中心  (捷運 忠孝新生站，鄰近光華商場)  http://incu.ntut.edu.tw/files/15-1036-4233,c929-1.php?Lang=zh-tw
            臺北市大安區忠孝東路三段1號（光華館 3樓）    
         【註】八德路 v.s. 新生南路口側門入校第一棟(光華館)

            感恩 台北科大育成中心＆聖森股份有限公司 提供場地

費用：250元    收取費用的原因：  希望「有決心」的人才來報名，不要報了名卻不來。
 ** 如果人數不足、主辦單位臨時取消或無法成行，開課日前一週告知。將無息、無扣手續費，以ATM退款給您。
 ** 如果確定舉辦，您卻無法參加，費用無法退還、贈品無法寄送。建議您私下將此名額轉讓給別人。
如果收費有盈餘，將補貼講師車馬費與餐費等等。

人數有限，不提供預約。    一律完成繳費才算報名成功！
務必填寫報名表，來信報名 。我會回信通知下列資訊：若非以下資料，皆屬詐騙，請小心！
我的電話是 0975-696-XXX
我的「銀行帳號」--  台北富邦銀行(012)，帳號後六碼 xxx-xxx-388-785
    （怕有詐騙集團出面劫標，我先公佈一部份。請大家留意！）
  
 有任何問題，都請您來信  mis2000lab (at) yahoo.com.tw  或是 school (at) mis2000lab.net
姓名
E-Mail（盡量留自己的，而非公司）
電話方便聯絡的時間
目前所在公司或學校
 **必填**
其他需求，或您想跟我詢問的？
自己：
公司：
家：
手機：

  ****必填 ****



如果您報名時，沒有留下個人資料。臨時有突發狀況（如無法舉辦或颱風假等緊急因素）而無法通知到您，視同您不參與、自動放棄所有權利。
當然也不退費、不補發贈品。
人數有限，不提供預約。    一律完成繳費才算報名成功！
張貼者： 於 沒有留言:
標籤： , , , , , , , , ,

2016年12月21日 星期三

網頁繪製圖表 Google Charts with JavaScript(3).... ADO.NET取得圖表原始資料

前兩篇文章介紹 Google Chart，並且把 "前端"程式 (JavScript) 改寫到ASP.NET (Web Form)後置程式碼

這兩篇文章的內容，都有 YouTube教學影片的簡介
藉此也讓各位看到「實際操作、(影片)教學」會比自己慢慢K書、看文件、K程式碼有效率多了。

黯然銷魂 之 網頁繪製圖表 Google Charts with JavaScript....好強、好簡單啊！太好用了，以後用不到怎麼辦？

http://mis2000lab.blogspot.tw/2016/12/google-charts-with-javascript-1.html

 
 
 
一旦把 "前端"程式 (JavScript) 轉移到「後置程式碼」之後
   （請善用上面第二篇文章介紹的ClientScriptManager類別），就是我們動手腳的好時機
 
「組合字串」、「字串相連」，一直以來都是資料庫程式、網頁程式擅長的作法
   （但也因為動態地「組字串」造成 SQL Injection資料隱碼攻擊、XSS攻擊....等等缺失）
 
請透過「參數」的寫法來避免，詳見以下文章說明：
http://www.dotblogs.com.tw/mis2000lab/archive/2014/08/29/ado.net_parameter_sql_injection_20140829.aspx
 
http://www.dotblogs.com.tw/mis2000lab/archive/2014/11/04/microsoft_anti-xss_v43.aspx
 
首先，我們來看看原始的 Google Chart的資料格式（Raw Data）有哪些？
 
以簡單的圓餅圖（Pie Chart）、地理圖表（GeoChart）為例，
兩者比較就能看出來：
 
  
甚至還能從 "google試算表"取得資料，透過大家熟悉的SQL指令來查詢
 
         //*** 查詢 Google的一份試算表。
         dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
         query: 'SELECT A,D WHERE D > 100 ORDER BY D',
 
這就是我強調：盡量學習「國際標準」的作法，可以避免單一廠商、單一技術改朝換代的威脅
 
寫在 HTML網頁內，前端 JavaScript的資料格式如下：
            // 加入原始資料
            data.addRows([
              ['Mushrooms', 3],
              ['Onions', 1],
              ['Olives', 1],
              ['Zucchini', 1],
              ['Pepperoni', 2]
            ]);
 
 
我們可以看出他的架構，每一筆記錄就是   ['欄位', 值]
類似JSON文件。說穿了並不難。
 
您在後置程式碼，透過ADO.NET或是任何您善用的技術，
把資料庫的數據取出，組合成以上字串格式即可！
 
以下圖為例，我用DataReader來做，會用到兩個方法，取得「欄位名稱」與欄位裡面的「值」
詳見：
http://www.dotblogs.com.tw/mis2000lab/archive/2011/04/14/datareader_fieldcount_getname.aspx
 
 
 
 
料理東西軍！
「Google Chart  V.S.  ASP.NET Chart控制項」，今晚您要選擇哪一項？
 
 
完整內容將會收錄在 -- ASP.NET專題實務 (II) VS 2015版 裡面。 書本請看 http://www.books.com.tw/products/0010705908
----------------------------------------------------------------------------------------------
從最傳統的圖表作法，透過 與的寬度與高度修改，來做最原始的長條圖。
 
然後介紹  ASP.NET Chart控制項 
 （這東西功能很強，但學起來也很費時、後置程式碼來控制要寫很多程式碼、熟悉很多屬性與方法）
 
 最後介紹「前端技術」為主的 Google Chart，讓您的ASP.NET Web Form跟得上時代
----------------------------------------------------------------------------------------------
 
內容是否豐盛？是否比上一本書又多了好多新鮮事？   請拭目以待。
 
 
 
這裡有一份 YouTube線上影片教學，雖然講英文，但應該看影片就會懂 --
 
Google Chart搭配JSON。這篇講得很清楚 
 
Google Chart原廠說明
 
這位網友提供 Google Chart + Web Service的範例（2016年五月補充）
 
 
我將思想傳授他人， 他人之所得，亦無損於我之所有；
猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson
寫信給我--  mis2000lab (at) yahoo.com.台灣  或是  school (at) mis2000lab.net
................   facebook社團   https://www.facebook.com/mis2000lab   ......................
................   Google+   https://plus.google.com/100202398389206570368/posts ........
................  YouTube (ASP.NET) 線上教學影片  http://goo.gl/rGLocQ
張貼者： 於 沒有留言:
標籤： , , , , , , ,

網頁繪製圖表 Google Charts with JavaScript(2)....與ASP.NET網頁結合 (ClientScriptManager.RegisterStartupScript 方法)

網頁繪製圖表 Google Charts with JavaScript (2)....與ASP.NET網頁如何結合在一起？ 
ClientScriptManager.RegisterStartupScript 方法 

JavaScript寫在HTML畫面上，該如何與 AP.NET後置程式碼搭配呢？
上一篇文章提到 Google Charts
http://mis2000lab.blogspot.tw/2016/12/google-charts-with-javascript-1.html


今天上課時，學員都很有興趣。

但是， JavaScript寫在HTML畫面上，該如何與 AP.NET後置程式碼搭配呢？
您可以參考：ClientScriptManager 類別  http://msdn.microsoft.com/zh-tw/library/z9h4dk8y(v=vs.110).aspx

把您的 Google Charts範例（JavaScript程式碼）
沿用上面超連結的寫法，把它（字串相連）寫在後置程式碼裡面，就搞定囉！

============================================================================
============================================================================

上一個範例：
<%@ Page .........


 



    
 
    <!--Load the AJAX API   提醒您  2016/11月起，第一列Script有異動
-->

把上面咖啡色字體（斜體字）放到 "ASP.NET 後置程式碼"裡面
以字串相連來做即可。
您可以參考：ClientScriptManager 類別  http://msdn.microsoft.com/zh-tw/library/z9h4dk8y(v=vs.110).aspx
上一個範例：
 



    ASP.NET如何搭配「Google Charts」的JavaScript
 
    <!--Load the AJAX API
    
 
    //============================================================
    //  這裡全部消失了，寫去「後置程式碼」
    //============================================================
ClientScriptManager.RegisterStartupScript 方法 (Type, String, String, Boolean)

資料來源：http://msdn.microsoft.com/zh-tw/library/z9h4dk8y(v=vs.110).aspx 



本範例 JavaScript碼沿用範例 Google_Chart_00.aspx

-->
   
ClientScriptManager.RegisterStartupScript 方法 (Type, String, String, Boolean)       
                          
本範例 JavaScript碼沿用範例 Google_Chart_00.aspx                      
           後置程式碼：
    protected void Page_Load(object sender, EventArgs e)
    {    //** 資料來源  http://msdn.microsoft.com/zh-tw/library/z9h4dk8y(v=vs.110).aspx
        // Define the name and type of the client scripts on the page.
        String csname1 = "Script1";
        String csname2 = "Script2";
        Type cstype = this.GetType();
        // Get a ClientScriptManager reference from the Page class.
        ClientScriptManager cs = Page.ClientScript;
        // Check to see if the startup script is already registered.
        // 呼叫 IsStartupScriptRegistered 方法，判斷特定索引鍵和型別組的啟始指令碼是否已註冊，避免不必要的指令碼加入嘗試。
        if (!cs.IsStartupScriptRegistered(cstype, csname1))
        {
            String cstext1 = "google.load('visualization', '1.0', { 'packages': ['corechart'] });";
            cstext1 += "google.setOnLoadCallback(drawChart);";
            cs.RegisterStartupScript(cstype, csname1, cstext1, true);
            // 使用 addScriptTags (最後一個)參數，指出 script 參數所提供的指令碼是否包裝在 ");
            cs.RegisterClientScriptBlock(cstype, csname2, cstext2.ToString(), false);
        }
        // 在網頁上的 OnLoad 事件引發之前。 不保證指令碼區塊可以根據其所註冊的順序來輸出。 
        // 如果指令碼區塊的順序很重要，請使用 StringBuilder 物件，在單一字串中一起蒐集指令碼，
        // 然後在單一用戶端指令碼區塊中註冊所有的指令碼。
    }
  
執行後的成果，沒有問題

但請您注意下圖，執行後的網頁「原始成果」
您可以發現 JavaScript放置的為置有點差異
這點請您小心。
請參閱我以前的文章
在伺服端程式碼中，呼叫下表中列出的方法之一。 
方法
說明
將指令碼區塊加入頁面頂端。 您可以字串形式建立指令碼，然後將它傳遞給加入網頁的方法。 您可以使用這個方法將任何指令碼插入網頁。 請注意，在完成所有項目之前指令碼可能就會呈現至網頁。因此您可能無法從指令碼參考網頁上所有的項目。
這個方法類似 RegisterClientScriptBlock 方法，但是會加入參考外部 .js 檔的指令碼區塊。 在以動態方式加入任何其他指令碼之前就會加入這個包含檔。因此您可能無法參考網頁上的某些項目。
將指令碼區塊加入當網頁完成載入，但是在引發網頁的 onload 事件之前，就會執行的網頁。 這個指令碼通常不會建立為事件處理常式或函式。其通常只包含想要執行一次的陳述式。
加入執行以回應網頁 onsubmit 事件的指令碼。 在送出網頁之前就會執行指令碼，並且讓您有機會取消送出動作。

***********************************************************************************
本系列第三篇文章：
如何寫ADO.NET程式，從（後端）資料庫裡面撈出數據，讓「前端」網頁畫Google Chart圖表

黯然銷魂 之 網頁繪製圖表 Google Charts with JavaScript.... ADO.NET取得圖表原始資料

***********************************************************************************
我將思想傳授他人， 他人之所得，亦無損於我之所有；
猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson

寫信給我--  mis2000lab (at) yahoo.com.台灣  或是  school (at) mis2000lab.net
................   facebook社團   https://www.facebook.com/mis2000lab   ......................
................   Google+   https://plus.google.com/100202398389206570368/posts ........
................  YouTube (ASP.NET) 線上教學影片  http://goo.gl/rGLocQ

張貼者： 於 沒有留言:
標籤： , , , , ,
訂閱： 文章 (Atom)