聯成電腦-讓你價值連城

聯成電腦痞客邦官方BLOG學習電腦必備秘笈，提供各種學電腦課程作品及聯成電腦評價，學員對電腦課程的學習心得包含手機app 、工業設計、室內設計及電腦證照考試等,是您學電腦課程最佳範本。

部落格全站分類：電玩動漫

May 10 Tue 2022 10:00
聯成電腦分享：【Excel教學】什麼是資料剖析？分欄整理成整齊的表格

article_main_img

文、意如老師

首先看一下原始資料，是一個整理好的表格資料

姓名	報名	地址	電話
賴驗新	基隆	和平東路三段一巷一號	029461234
蔡小燕	公館	博愛路一三一號	039124785
鄭新明	板橋	五權南路九十九號	039112356
陳智與	三重	民權路一二七號	029213652
黃麗倩	忠孝	南路一段一二四號	039123456
沈樂豐	板橋	五權南路九十九號	039112356
周凱明	忠孝	南路一段一二四號	039123456
吳美足	三重	民權路一二七號	029213652

👉 推薦課程：Excel財務試算表應用

但是有時候我們為了保存或交換資料，所以會將一些資料存成文字檔，例如在Excel另存新檔中（如下圖），可以選擇文字檔（Tab 字元分隔）

存成文字檔後的文件如下：

或者使用其它軟體，轉成文字檔，所以有些是使用逗號(,)或者空白( )或者其它符號去分隔。

所以當我們收到這種有規律的資料，要如何將它整理成整齊的表格呢？

如果是用Tab件或空白鍵來做分隔的話就比較簡單處理，直接開啟文件後全選複製到Excel就完成了。

步驟如下：

步驟1、全選（Ctrl+A），接著複製（Ctrl+C）或者按下右鍵複製文字

步驟2、開啟空白Excel，選擇A1儲存格

步驟3、貼上（Ctrl+V），完成了

但是如果資料為逗號(,)或其它符號為分隔的話就沒那麼簡單囉，因為貼上後全部內容都會被存在A欄儲存格中，如下圖

這時候就要靠Excel中的資料剖析方式，將它整理成整齊的表格。

步驟如下：

步驟1、先全選資料

步驟2、點選工具列中的資料>>資料剖析

接著會跳出資料剖析精靈的彈窗，點選分隔符號選項後，確認預覽選取的資料沒問題後，再點選下一步。

步驟3、根據自己的資料選擇相對應的分隔符號，以此範例是使用逗號為分隔符號，點選後再次確認預覽分欄後的結果，沒問題後按下一步

再次確認每一欄都沒問題後按下一步

按下完成鈕後已經成功將資料轉為整齊的表格囉！如下圖

接下來如果想將姓名欄位再細分為姓跟名兩個欄位的話要怎麼做呢?

步驟如下：

步驟1、全選B欄按下插入

這時候會在A欄旁多出一欄空的B欄，如下圖：

步驟2、

1. 全選A欄

2. 資料

3. 資料剖析

步驟3、跳出資料剖析精靈時，點選固定寬度，按下一步

接著在姓跟名中間點一下，這時候會出現一條長箭頭把姓跟名分割，接著按下一步。

預覽分欄結果後，就可以點選完成。

這時可以發現我們已經成功將姓跟名分開囉！完成檔如下：

(繼續閱讀...)

聯成電腦發表在痞客邦留言(0) 人氣()

個人分類：講師技術文

May 05 Thu 2022 10:00
聯成電腦分享：【CSP教學】Ｑ版角色繪製

article_main_img

文、Andy老師

大家好，今天要示範的是Ｑ版角色繪製，共分兩篇，第一篇是描線篇，就是這一篇，以下就是完成的彩圖，效果如下圖。

👉推薦課程：Comic數位漫畫創作

好，首先為了快速畫出草圖，這裡我使用3D人偶來製作草圖，先從3D人偶素材視窗，選中女性素體，並拖曳至畫布上，效果如下圖。

再來按下浮動面板最右邊的圖示，來調整體型，效果如下圖。

首先先調整頭身比，Ｑ版比例，我用2.5頭身，先點選全身左邊的直條圖，再輸入右邊的頭身比數值，效果如下圖。

再來將身體縮短，選中身體部位，在用右邊的局部縮放面板調整身體長度，效果如下圖。

接著再選取身體姿勢，我選小跑步姿勢，並拖曳至畫布上的女性素體，女性素體姿勢就會變成小跑步姿勢，效果如下圖。

同時調整人偶攝影機的角度，攝影機在人偶左上，最左邊三個，即可調出你想畫的人偶角度，效果如下圖。

再來需畫出臉部五官比例位置，以人偶的鼻子長度，當作眼睛的長度與位置，另外只要調整3D人偶圖層的透明度，即可讓3D人偶圖層變淡，就可以當成草圖使用，效果如下圖。

再來畫出臉型與嘴巴位置，而臉型的轉折處即是嘴巴的位置，再來Ｑ版角色多半下巴是圓的，鮮少化成尖下巴，因圓下巴比較可愛，另外頭髮要大於頭型，同時畫上頭部側面的轉折線，效果如下圖。

接著即可畫出角色衣服，而衣服務必要順著身體結構與起伏來繪製，在此就可以畫出要描線的線稿，就可以省去草圖部分，因為已經有3D人偶當草圖，描線我使用向量圖層，並用沾水筆的G筆畫線，效果如下圖。

再來關掉人偶圖層即可顯示線稿，效果如下圖。

下一篇我們就可以來上色了！謝謝觀賞。

(繼續閱讀...)

聯成電腦發表在痞客邦留言(0) 人氣()

個人分類：講師技術文

May 03 Tue 2022 10:00
聯成電腦分享：最熱門的網頁前端框架，從零開始學Vue.js 安裝篇

article_main_img

Photo credit：Pexels

文、意如老師

什麼是Vue.js？

Vue.js是現在正當紅的網頁前端框架之一，主要程式語言為javascript，無論你是想寫一些簡單的網頁或者一個大型複雜的專案網站都可以快速使用Vue框架，來達到良好的開發效率。

我們直接先實作把Vue.js安裝到電腦上吧！

本篇會介紹3種比較常用的安裝方式。

方式1：下載回來至本機

方式2：使用CDN方式引入

方式3：使用command 下指令安裝

方式1：下載回來至本機

步驟如下：

首先把vue.min.js下載回來到本機，

https://vuejs.org/js/vue.min.js

點選網址開啟網頁，按下右鍵另存新檔後備用。

先在本機建立一個網站資料夾Test1，再建立一個名為javascript的資料夾，再到javascript資料夾內放入剛剛下載回來的vue.min.js。

接下來只要在網頁中使用<script>標籤將vue.min.js引入，就可以自由的使用Vue.js了

直接先來簡單測試一下看有沒有下載並套用成功，首先再建立一個空的檔案名為：testpage1.html

接下來開始輸入程式碼

testpage1.html

<html>

<head>

<meta charset="utf-8">

<title>Vue測試</title>

<script src="javascript/vue.min.js"></script> <!—這邊記得要引入vue.min.js -->

</head>

<body>

<div id="info">

<h3>{{message}}</h3> <!—測試Vue.js是否套用成功-->

</div>

</body>

</html>

<script>

new Vue({

el:'#info',

data:{

message:'My data Info Message'

}

})

</script>

如成功套用在網頁中時出現的文字會是” My data Info Message”，如套用失敗文字則會顯示{{message}}

方式2：使用CDN方式引入

CDN是什麼？

就是將主要元件Vue.js 檔案是放在官方雲端中，如果我們要快速使用它時，不需安裝任何，直接加上一行程式碼即可。

例如：

<script src="https://unpkg.com/vue/dist/vue.js"></script>

完整程式碼如下:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<html>

<head>

<meta charset="utf-8">

<title>Vue測試</title>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>

<body>

<div id="info">

<h3>{{message}}</h3>

</div>

</body>

</html>

<script>

new Vue({

el:'#info',

data:{

message:'My data Info Message'

}

})

</script>

使用CDN的優點是大家都可以自由使用不須額外安裝，而缺點是如果今天雲端伺服器突然當機，那麼只要使用CDN方式引入的網頁全都會出現跑版等等其他錯訊，所以如果要開發大型專案時盡可能使用第1種方式會較好，而如果只是要測試小程式的話就可以使用第2種方式。

方式3：使用command 下指令安裝

這邊會使用npm指令來安裝專案，先確認自己的本機是否有安裝npm，先開啟cmd(命令提示字元)。

接下來打入npm-v 來查詢自己的npm是什麼版本，如果沒有安裝的話會顯示”找不到檔案”，這時你就會需要安裝一下npm套件了，再裝npm前記得必須先安裝node.js，才會有npm。

步驟如下：

查看npm版本號

npm -v

更新到最新版的npm：

npm install npm -g

接下來安裝: vue-cli

vue-cli 是可以快速將 vue.js 專案的整體架構建置起來的工具

npm install --global vue-cli

初始化專案

vue init [template] [project_name]

[template] 可以採用官方提供的幾種template，若不知道有什麼template，可以下指令查看

#查看官方提供的template與說明

$ vue list

目前使用webpack模板

vue init webpack yrtest1

接下來會遇到幾個問題，直接按下ENTER即可

? Project name vue-project-base //專案的名稱

? Project description A Vue.js project //專案的描述

? Author GuaHsu <guaswork@gmail.com> //專案的所有者 (通常是你自己)

? Vue build standalone //詳見備註1

? Install vue-router? Yes //vue 的 route 意即專案路由

? Use ESLint to lint your code? Yes //規範 coding style 的工具

? Pick an ESLint preset Standard //好幾種規則, 這邊是選 Standard

? Set up unit tests Yes //是否設定單元測試

? Pick a test runner jest //使用單元測試的工具，這裡選 jest

? Setup e2e tests with Nightwatch? //e2e 測試的工具

? Should we run `npm install` for you after the project has been created? (recommended) npm //幾種 install 的方式，這裡是用預設的 npm

接下來就會開始安裝

按照指示：

cd yrtest1

npm run dev

開啟瀏覽器打入

http://localhost:8080

安裝成功畫面如下：

下一篇將帶大家了解Vue.js的目錄結構以及整個程式的流程架構

(繼續閱讀...)

聯成電腦發表在痞客邦留言(0) 人氣()

個人分類：講師技術文

Apr 28 Thu 2022 10:00
聯成電腦分享：將所有的網站導入GoogleFirebase一起分析數據

article_main_img

Photo credit：Pexels

文、意如老師

續上一篇：聯成電腦分享：你的網站GA了嗎？Google Analytics網站分析教學

上一篇我們使用Google Analytics只是針對一個網站來做分析，但是如果我們有很多網站很多專案是否可以導入一起分析呢？

答案是可以的，本篇將實作把所有的網站導入GoogleFirebase一起分析數據

建立專案：

首先到下列網址：

https://console.firebase.google.com/u/0/

點選建立專案按鈕

先輸入專案名稱：

取一個跟專案有相關的名字後，看完並接受Firebase條款後按下繼續按鈕。

了解將Firebase新增至GoogleCloud專案時的注意事項，並按下繼續按紐。

設定GoogleAnalytics 分析的帳戶，選擇或建立（可參考上一篇文章）

選擇帳戶或建立帳戶完成後按下繼續按鈕，即可看到Firebase的後台

新增應用程式：

接著開始新增應用程式，點選</>按鈕

接下來將Firebase新增至你的網頁應用程式，需要填一些註冊應用程式需要的資料。

填完暱稱，並勾選ㄧ併為這個應用程式設定Firebase代管功能後，按下註冊應用程式。

第2步驟就可以新增FirebaseSDK到你的網頁應用程式

直接複製firebaseSDK中的程式碼，複製到自己網站<Body>標記的最下方處即可，也可參考下列網址設定：

https://firebase.google.com/docs/web/setup?authuser=0

https://firebase.google.com/docs/reference/js/?authuser=0

https://firebase.google.com/docs/samples/?authuser=0

最後按下ㄧ步安裝FirebaseCLI，即可自動部署至Firebase代管。

完成後會回到主控台於下列網址：https://console.firebase.google.com/

專案設定：

點選左上角專案總覽的專案設定

找到Firebase SDK snippet >> CDN

複製程式碼到我們網頁全域的地方

接下來只要在有需要收集數據的每一張網頁都引入

只要在你有需要的網頁中引入後此頁程式碼後，就可以到後台中查看瀏覽的數據了。

設定按鈕事件：

在Firebase中也可以設定按鈕事件，到後台點選Events>在現有的事件中增加事件

接下來到程式碼中，找到按鈕元件後加入點擊事件，例如先建立一個下載按鈕。

<button id = "btn-download">下載</button>

再來幫這個下載按鈕添加事件，只要加上下列這行程式碼即可

firebase.analytics().logEvent('nnnnhihi');

完整程式碼如下：

<button id = "btn-download">下載</button>

<script>

var btnDownload = document.getElementById('btn-download');

btnDownload.addEventListener('click', function() {

alert("hi");

firebase.analytics().logEvent('nnnnhihi');

}, false);

</script>

程式碼加入參考示意圖：

新增轉化事件：

程式碼設定完成後，再回到主控台 >> Conversions，新增轉化事件，事件名稱為剛剛放在logEvent('')中的字串’nnnnhihi’按下保存及完成設定。

回到到主控台（Dashboard）即可看到所有目前事件的數據已經開始跑了。

事件加上參數：

如果想要更進階的設定一些事件例如幫你的按鈕再加上一些參數，例如產品名稱標題，價錢等等…可以再回到轉化（conversions）設定

在程式碼中將按鈕事件寫入firebase.analytics().logEvent()並帶入參數。

程式碼解析：

參數類型的值可以是一個字串，例如按鈕內容名稱可以以事件來命名

firebase.analytics().logEvent(‘我要購買ABC’) ;

也可以有key 跟 value，例如按鈕內容的類型跟id

firebase.analytics().logEvent(

{

content_type:'event_buy',

content_id:'myid_a001',

})

如果資料很多，參數也可以帶入陣列類型，例如

firebase.analytics().logEvent(

items:[{

goodname:'購買abc',

price:123,

}]

)

參數帶入時也可混合所有類型的值非常彈性方便，例如

firebase.analytics().logEvent(

'我要購買ABC',{

content_type:'event_buy',

content_id:'myid_a001',

items:[{

goodname:'購買abc',

price:123,

}]

了解了以上參數帶入方法後，最後整合至程式碼中。

程式碼如下：

<button id = "eventlog">我要購買ABC</button>

<script>

var eventlog=document.getElementById('eventlog');

eventlog.addEventListener('click',function(){

alert("紀錄事件:我要購買ABC");

firebase.analytics().logEvent('我要購買ABC',{

content_type:'event_buy',

content_id:'myid_a001',

items:[{

goodname:'購買abc',

price:123,

}]

});

},false);

</script>

同時在Analytics（分析）同步更新

結論：

假設你只有一個專案的話你可以使用Google Analytics，但如果我們同時有很多網站或很多專案就可以直接導入GoogleFirebase（可以把多個專案Google Analytics導入進去）一起使用GoogleFirebase來統一管理分析數據。

聯成電腦發表在痞客邦留言(0) 人氣()

個人分類：講師技術文

«1 ...16 1718 19 20 ...662 »

最新文章

聯成電腦網站全部圖文係屬聯成電腦版權所有Copyright© 2021 by lccnet.all Rights Reserved文中所提及之產品名稱，分別隸屬該註冊公司

回到頁首回到主文免費註冊客服中心痞客邦首頁 © 2003 - 2024 PIXNET