網頁介紹for Rae

分享至

1.網頁生成建構的過程-慢速撥放

2. script擺放位置詳解

3.網頁loading變慢的主因:

(1)js、css載入資源太多

(2)畫面生成使用太多js (如當初我做的”血x-宣官網”),我用JS的hide()讓區塊隱藏是錯的,應該用css的display:block;隱藏。css效能比js好

(3)一個頁面圖片大小及太多圖片

(4)網頁ajax請求時伺服器端的硬體問題或是後端語言的寫法及是否操作資料庫

(5)使用者網速太慢,手機所在地訊號較差

(6)js套件本身運作較耗時(跑太多程式碼)

4.圖片的優化方式:

(1)利用lazyload.js實現圖片延遲加載加快網站瀏覽速度

(2)利用preload.js處理初始畫面的圖片預先載入時機(1.一次載入所有圖片loading較慢,必要時須設計loading畫面 2.不設計loading畫面的話就要考慮分批預先載入圖片)

(3) CDN介紹

5.動畫優化方式(網頁效能差純CSS一點點又能做豐富動畫):

(1)使用Velocity.js

(2)使用gsap.js

6.利用window.onload做畫面生成 ps.不能重複使用:

以下兩種方法其中一種有瀏覽器版本支援問題,忘了是哪一個

方式1.
window.onload = function() {
  // console.log("window loaded")
};

方式2.
$(window).on("load", function (e) {
    
});

7.RWD:

(1) CSS

(2) JS-jackie獨家開發function

8.API講解 Ajax事件介紹

9.Ajax實際案例講解:

(1)單一請求:

guess1=$("#guess1").val();
guess2=$("#guess2").val();
guess3=$("#guess3").val();
guess4=$("#guess4").val();
var form_data={guess1:guess1,guess2:guess2,guess3:guess3,guess4:guess4};

//請求答題結果=> data回傳: 1.true=>答對  2.false=>答錯
        $.ajax({
            url: "https://test.gametopia.com.tw/art/API/FGO/2021tgsguess2/guess.php",
            type: "POST",
            data: form_data,
            success: function(data){
                
            },
            error: function(){

            }
        });

(2)異部請求:

//↓以下為異部請求
var guess_fun = $.ajax({url:url2,type:'POST',data:form_data});
var getmember_fun = $.ajax({url:url3,type:'POST',data:get});

$.when(guess_fun,getmember_fun).then(function(guess_data,member_data){
       var member_data={member:member_data[0]};


       if(guess_data[0]=="true"){
              emberUpdate(guess_data[0],member_data.member);//修改人數function
        }else if(guess_data[0]=="false"){
               $('#error').modal('show');
        }
},function(){
        //任一請求失敗
        console.log('任一請求失敗!!');
});

詳解:https://note.jackie.com.tw/index.php/2020/12/25/jquery-when-ajax/

10.Ajax技術應用

11. JSON格式, JSON檔: https://j796160836.pixnet.net/blog/post/30530326

12. 二維陣列, 三維陣列

// menu的設定
$menuTypes = Array(
	'網站' => Array(
					'title' => ['編輯網站','作者連結'],
					'pageName' => ['web_update','user_link'],
					'left_m_id'=> ['adminCompany'],
					'left_m_icon'=> ['glyphicon glyphicon-globe']
					),
	'帳號' => Array(
					'title' => ['註冊帳號','修改帳號'],
					'pageName' => ['user_register','user_list'],
					'left_m_id'=> ['adminUser'],
					'left_m_icon'=> ['glyphicon glyphicon-user']
					),
	'廣告' => Array(
					'title' => ['新增廣告','修改廣告'],
					'pageName' => ['ad_insert','ad_list'],
					'left_m_id'=> ['adminAd'],
					'left_m_icon'=> ['glyphicon glyphicon-film']
					),
	'訊息' => Array(
					'title' => ['新增訊息','修改訊息'],
					'pageName' => ['msg_insert','msg_list'],
					'left_m_id'=> ['adminNews'],
					'left_m_icon'=> ['glyphicon glyphicon-envelope']
					),
	'分類' => Array(
					'title' => ['第一分類','第二分類'],
					'pageName' => ['category1_insert','category2_insert'],
					'left_m_id'=> ['adminCategory'],
					'left_m_icon'=> ['glyphicon glyphicon-sort']
					),
	'產品' => Array(
					'title' => ['新增產品','修改產品'],
					'pageName' => ['product_insert','product_list'],
					'left_m_id'=> ['adminProduct'],
					'left_m_icon'=> ['glyphicon glyphicon-th-large']
					),
	'連結' => Array(
					'title' => ['新增連結','修改連結'],
					'pageName' => ['link_insert','link_list'],
					'left_m_id'=> ['adminLink'],
					'left_m_icon'=> ['glyphicon glyphicon-link']
					),
	'SEO' => Array(
					'title' => ['修改SEO'],
					'pageName' => ['seo_update'],
					'left_m_id'=> ['adminSeo'],
					'left_m_icon'=> ['glyphicon glyphicon-pencil']
					)
);

13.陣列的應用

14.防止”盜圖及手機案右鍵可以存圖及PC鎖F12&右鍵”方法。(1) JS (2)伺服器設定

15.seo相關:

(1) google GA

(2) google search console: https://search.google.com/search-console/about?hl=zh-TW

(3) Sitemap網站地圖(.xml): https://ranking.works/%E6%8A%80%E8%A1%93SEO/sitemap

(4) 可以設定網頁不被爬蟲找到

16.php介紹 (伺服器語言優點& GET POST) p.s PHP可以透過用戶來訪或是透過觸發事件獲取用戶IP位置來自哪個國家的哪個程式及電信,可用來做目標族群分析

17.網站架構(靜態網頁、動態網頁)

18. js與php交互運用及聯想(遊戲:邏輯方面php、互動方面js。客戶端:網頁架哪兒相關談判)

19.若怕用js做請求會被看到程式碼,亦可用php對php做請求

20.『網頁做畫面呈現->JS做使用者互動->PHP做功能上的開發&控制台->資料庫存取資料』 = 系統or軟體。 亦可搭配硬體( AR/VR & 攝像機 & 直播 等等….)做各式各樣服務或是網頁遊戲(進階3D引擎網頁遊戲),3D引擎可透過設計師做3D建模再匯入網頁做3D物件操作,網頁特效or遊戲or商品展示or場地瀏覽。

21. 行銷值得研究:

(1) LINE api

(2) FB api

(3) IG api

(4) twitter api

22. Q&A

發表迴響