創作內容

127 GP

覆寫網頁原生物件可能引發的問題

作者:深海異音│2018-07-16 01:24:03│贊助:2,592│人氣:2031

好像有些人誤以為這篇是在嗆巴哈工程師
不過這真的只是在介紹網頁前端工程師容易忽略的問題
也沒有說全部用原生物件就一定好,要視情況而定

發這篇文單純的想讓剛入門網頁設計的開發者了解,網頁原生的物件具備哪些特定
像是很常有那種遊戲官網的介紹,使用圖片取代文字,這樣在搜尋引擎就搜尋不到這些文字
要先知道原生網頁具備什麼特性,才不會搞半天結果事倍功半





巴哈最近改版頻繁,界面跟功能有著大幅度的進步

眼尖的人可能注意到了
圖片上傳的小視窗已經俏俏改版,不再是那個陽春的界面

舊版的


新版的




有學過網頁設計的人一定一眼就能看出,舊版的那是原生的網頁物件
只要一行「<input type="file">」就能產生上傳檔案的網頁物件

這個上傳檔案的物件並不能進行太多樣式的修改
所以這時候很多經驗不足的設計師就會犯下一個致命錯誤
不使用原生物件,而是製作一個具有相同功能的物件來取代

這聽起來很容易,實際上非常困難
每個瀏覽器解析出來的網頁都會有些許差異,甚至現在還有行動裝置,要完美實現「原生物件的所有功能」是非常困難,而且非常容易出現BUG的「挑戰」





以巴哈做例子,新版的界面導致「拖曳上傳」的功能失效了
網頁原生的檔案上傳物件是支援拖曳上傳的

像是這樣,把檔案直接拖拉到框裡面即可上傳
在這巴哈新版的界面辦不到






還有另一個初學者常犯的錯誤
覆寫網頁捲軸

這是 北京故宮 的網站
http://www.dpm.org.cn/Home.html

界面做的非常漂亮,但對我而言使用者體驗非常糟糕
糟糕到我一個字都看不下去,就只因為他覆寫了原生的網頁捲軸
當使用者捲動網頁的速率與一般網頁不一樣,就會認定「這個網頁很LAG」

除了捲動看起來卡頓外,這還會讓使用者沒辦法按下滑鼠中間的滾輪來快速捲動網頁
(這個功能在MAC或一些Linux上面似乎沒有



其他還有很多,像是

覆寫超連結,改用JavaScript來切換網頁
原生的超了連接具備了以下功能:
  • 超連結點過後會改變顏色,因為有安全性限制,js或css都沒辦法模擬此功能
  • 增加在搜尋引擎的曝光率,也就是所謂的SEO
  • 按著Ctrl點擊超連結,會使用新分頁打開
  • 用滑鼠中間的滾輪點擊超連結,會使用新分頁打開


覆寫img標籤,使用DIV的背景圖來顯示圖片
原生的img具備以下功能:
  • 增加在搜尋引擎的曝光率,設定title屬性的話可以二次增加
  • 使用者可以直接拖拉圖片到桌面或資料夾裡面,來進行儲存圖片
  • 使用者可以把圖片拖拉到瀏覽器上方分頁的位置,就會用新分頁開啟圖片
  • 電腦可以右鍵儲存圖片,手機可以長按儲存圖片


使用圖片或其他物件替代文字
文字具備以下功能:
  • 增加在搜尋引擎的曝光率
  • 使用者可以透過瀏覽器的設定修改文字大小或字體
  • 使用者可以選取複製文字
  • 因為有 ClearType 之類的技術,所以在螢幕看起來會比較舒服

1為ClearType線
2是普通的反鋸齒線
3和4分別為1和2的四倍放大圖
5是1實際顯示在液晶顯示器上的放大示意圖。如圖所示,ClearType充分利用LCD色條排列特性,顯示出更為完美的斜線





補充

我在 js深色主題 裡面有幫巴哈修復了圖片不能拖曳上傳的問題
https://forum.gamer.com.tw/C.php?page=1&bsn=60076&snA=2621599




原理其實很簡單讓原本的<input type="file">變成透明的
然後覆蓋在新版的『檔案上傳物件』上面就行了

也就是說,使用者操作的是『原生的檔案上傳物件』
但因為『原生物件』設定成透明的,所以使用者看到的是在下面的『新版的檔案上傳物件』
如此一來就能同時具備原生功能與漂亮外觀

.dialogify .uploadimage-old {
  position: relative;
}
.dialogify .uploadimage-old input[type="file"] {
  display: block;
  position: absolute;
  left: -320px;
  top: 0px;
  opacity: 0;
  width: 310px;
  height: 35px;
}


引用網址:https://home.gamer.com.tw/TrackBack.php?sn=4059207
All rights reserved. 版權所有,保留一切權利

相關創作

留言共 20 篇留言

jerry1234
覺得你似乎比所有巴哈的網頁設計師都還要厲害XD
巴哈都沒有邀請你加入他們之類的嗎XD

07-16 01:37

深海異音
我覺得巴哈的工程師自己並沒有很常用巴哈姆特,感覺就像是接到工作然後完成他僅此而已,沒有很用心在優化使用者體驗07-16 01:46
luilo
先給gp以免別人以為小弟看不懂

07-16 01:37

R.V-卡特
簡單來說,巴哈又搞砸了w

07-16 01:41

奈津
考慮在站務版發一篇?

07-16 01:43

深海異音
我沒在那邊發過文,不知道會不會觸犯什麼規定,感覺好麻煩....07-16 01:55
GG
好膩害

07-16 01:53

呆皮的同學
可能設計的人根本ㄅ知道有那種東西

07-16 01:54

奈津
還是我幫你轉?

07-16 02:03

深海異音
好啊,那就麻煩你了07-16 02:06
悠麵@愛的散佈大使
大大真的好用心,雖然我一直都用imgur上傳,再貼網址回來,完全沒發現這件事

07-16 06:22

(๑•́ ¸•̀)〈影ヨ⁆
也就是說, 深海 在「深色主題js」內,重新把原生的檔案上傳物件寫進去;且讓它透明化?(不懂這方面的,所以只是問問而已。 [e29] )

07-16 06:49

戰讚顫-__点占占人
所以這樣的巴哈
連管理面都有問題了
網頁設計也不良
還有人花錢支持我也是笑笑(・ัω・ั)

07-16 07:25

(๑•́ ¸•̀)〈影ヨ⁆
樓上,正解。 XDD

07-16 08:06

CToID
異音出品,必屬精品

07-16 08:39

你剛剛說什麼
你真的好棒,愛死你了

07-16 09:43

奈津
文章在這邊

【心得】對自己技術沒自信,就不要覆寫網頁原生物件
https://forum.gamer.com.tw/C.php?bsn=60404&snA=29861

07-16 10:06

新手方
所以我工作上維護的網站上直接使用bootstrap。直接套class省去一堆功夫

07-16 22:19

艾卡多‧狄亞席斯
做網頁很簡單 但是要把網頁一次優化好真的很難 常常一不注意就跑板、CSSorJs過於肥大或者哪個code沒弄好 只能期望巴哈工程師們能持續改進小細節吧

07-17 09:03


不明覺厲

11-18 20:58

挺身而出的皮克西斯
博士是聰明der

07-09 00:31

點子-庫洛米庫洛米
就像動朋二覆寫動朋一世界觀後,產生大量問題一樣

07-09 00:53

小刀
我覺得你超棒ㄉ
然後我4覺得喇使用者的意見一定會超過開發者
畢竟天天在使用 看劇也是一樣的道理
有反思的消費者對產品的意見往往比開發端具有見地

我的論點是因為使用者使用次數>開發者
(電影重刷的比導演多次 儘管對幕後一無所知 大概也能有點見解)

09-11 03:10

我要留言提醒:您尚未登入,請先登入再留言

127喜歡★hbl917070 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:【asp.net】原始碼... 後一篇:自己的玩具用學校的設備做...

追蹤私訊

作品資料夾

x87945412廣告廣告
廣告廣告廣告廣告廣告廣告廣告廣告廣告廣告廣告看更多我要大聲說昨天17:42


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】