手機網頁入門過程的總結

時間：2023-05-25 18:33:02 | 來源：網站運營

時間：2023-05-25 18:33:02 來源：網站運營

手機網頁入門過程的總結：第一次做手機網頁的全過程的總結



制作背景：本人是設計者專業(yè)程序也是從這個網站開始入門的，這個網站是單純是一個畢業(yè)設計不喜勿噴。

寫作目的：希望和我一樣的小伙伴少走點彎路，其次是自己做個總結（聽說這是一個里程碑因為我想去玩玩ios了 嘻~）

在完成之前有人說我給自己挖了很大一個坑，因為幾乎是很難在2個多月完成所有工作的，況且我是零基礎的藝術類小白，也有人說這樣一個應用包含了策劃、文案、設計、程序好幾個部門的工作一個人是做不完的。確實，我沒能夠做完但至少做的差不多。（數(shù)據(jù)庫部分，沒能在畢業(yè)前做完是一個很大的遺憾）

由于我是程序小白所以在學著入門時 確實繞了不少彎，說不準現(xiàn)在還在哪個彎道上，不過就我的學習過程而言，書是很很重要的，在你選擇用什么軟件之前一定要先選好相應的書?；蚴窃诰W上找到一篇完整的文章，一定要完整。關于書我的建議是一定要新，14年之前的就不考慮了。然后在閱讀方面不用全讀看個概況就好，然后有問題的時候翻書，翻到下一個步驟的關鍵詞就好去百度谷歌必應了。重要的是關鍵詞。那是你進入下一個level的KEY。


————（我是一條可愛的分割線）————



前期準備

要做這樣一個設計，前期準備很重要但不是所謂的線框圖，不是流程圖，不需要準備少項所謂的專業(yè)技能。唯一要做的是考慮你準備做一款什么樣的軟件在有什么功能幾個功能之間有些什么邏輯關系這就夠了。其他的都可以邊做邊學。（當然最好你是個學設計這樣你至少有一定圖形圖像的基礎知識比如PS,AI還有什么是矢量，像素什么的）

• 配置本地環(huán)境：
  

個人不太用DW其實txt文檔就可以寫程序了，不過我還是推薦Sublime Text切手動檔寫代碼的時候十分方便。然后是瀏覽器Chrome+Firefox都準備起來，很多時候一些基本錯誤我都是用chrome的超能力來排錯，然后用firefox看實際效果。

如果有數(shù)據(jù)庫需要的話 XAMPP+MYSQL+phpmyadmin還不錯，當然如果暫時用不到什么數(shù)據(jù)庫就可以不考慮了。（就是用戶數(shù)據(jù)什么的，如果占很少一部分就用JS或其他辦法解決吧）


最后是GIT，這個是一個關于習慣的問題.git可以記錄你的所有的改動，有必要的時候用git提交一下以后有問題可回過頭來找對比不同時間段的文件。git會讓你的桌面項目文檔變得整潔有序。

• 配置遠程環(huán)境

遠程環(huán)境的配置看你個人具體的需求吧，因為我們學校要布展所以我弄了一個阿里云服務器（大學期間9.9一個月）灰常實惠，服務器的配置LAMP. linux+apache+mysql+php、書上推薦的是mariaDB（非Oracle）但是我用的是mysql（Oracle）其實是差不多的。具體的配置其實找到一篇完整的文章就照著做就很快完成了。之后就可以用FTP了（我用的是CuteFTP 9)書籍推薦

1. 《PHP和Mysql Web 開發(fā)從新手到高手》[澳]Kevin Yank,里面包含了在不同環(huán)境下配置本地環(huán)境，還有Mysql，php的基本知識。
   
2. 《Ubuntu Server 最佳方案》第二版 冷罡華，這邊書是關于遠程環(huán)境的配置，也就是配置服務器的所需要的大部分知識。

進入狀態(tài)

進入狀態(tài)之前我建議稍微看點CSS html js 的書籍簡單的就好，比如 Jon Duckett的兩把刷子HTML&CSS 和 Javascript&jquery。這兩本好在圖多，案例多，結構清晰 。然后是多看看別人的UI作品 pinterest，花瓣，behance 等等（據(jù)說在微博搜索也會有不錯的發(fā)現(xiàn)）?？醋髌泛苤匾?，因為真的很重要，沒事多看看拯救你的審美水平。不然你就會和我一個下場。嘻嘻先看看我的吧。

這還是改了好多次的成果。

了解完以上內容后就要開始挖礦或者也可以叫撿垃圾去了。

“www.htmleaf.com” jq之家里面有很多CSS JQ JS 動畫的范例拿下來然后改改就是好東西。

然后是懶人圖庫Font Awesome什么的不是所有東西都要自己做也不是所有東西都是撿到都可以直接用的。提前學學js/jq/css就是這個用處改起來能更得心應手

制作部分

在設計方面，我只是初略的話了下草圖（那種線框圖定義位置就好了），然后就用Html開始基本的布局了，然后把各種撿到的垃圾往上懟然后在刪再改。時間多的話可以自己親手擼幾個CSS動畫。在我的印象里移動端對CSS的支持高于JQ動畫 前者更流暢，有精力手動做動畫也可以漲點動畫的基本知識，了解動畫12原則基本上就能上天了，剩下的就是鋪代碼了代碼很簡單就是很繁瑣這是我的體驗。

程序方面：滑動，響應，刷新這幾個是做在做這個畢業(yè)設計時候的三個大頭我試過很多插件。如果你在處理這些問題時遇到問題，可以試試我的解決方案。

1. 滑動我用是iscroll5 使用中有很多不愉快但是還是解決了我的大部分需求。具體你可以去github fork我的項目看看唄。
2. 響應： fastclick如果你的用戶是蘋果手機那這個可能是挺重要的一個插件，按鈕、鏈接點擊會有默認響應時間在PC上算是一個人性的設定但是在移動端就是噩夢了。安卓處理方法比較簡單百度一下就有了好像就是在頭部加條代碼。
3. 刷新：因為是web應用所以我的導航欄不能跟著頁面刷新。所以我用了點AJAX。用JQ在頁面跳轉的時候引入AJAX就好了。實際操作起來有時候比較費心但是只要有耐心就不是問題，呵呵。（之前介紹的 Javascript&jquery 里面有AJAX的橋段可以去看看）

然后是幾個常用的庫 jquery-2.2.1.js（這個是必須的吧），jquery.mobile-1.4.5.js（這個就比較難用了改起來很麻煩），bootstrap.js（我的天，我竟然用了這種插件）fastclick.min.js（這個之前提到了）iscroll.js（對沒錯，滑動全靠他）

我的那個服務器已經已經停了。因為我已經畢業(yè)了。（續(xù)不起費）

所謂的彎路

彎路1 是域名，我買域名后來發(fā)現(xiàn)沒卵用，來回備案花了不少時間。不過在阿里備案的過程還是比較順利的唯一的小tip就是 往回寄核驗單的時候要找一家靠譜的快遞公司。

彎路2 phonegap 這雖然是個好東西 “一次開發(fā)到處使用”對沒錯你的web可以被轉成應用商店的APP我學會了如何使用但是沒派上用處，如果你時間只有2，3個月還是不要走這條路。

彎路3 數(shù)據(jù)庫方面的知識，我學了沒用上，如果你效率夠高我想這應該不是彎路，數(shù)據(jù)庫對你的webapp在體驗上會有很大的提高。

彎路4 視頻教程 視頻教程的適用范圍在設計方面學PS AI 是捷徑，但是程序還是百度、論壇什么的靠譜。什么極X學院 別去了 除非你找不到下一個level的入口。

然后附上我的項目文檔

GitHub - JonLeeds/uuger.cn: 畢業(yè)設計

有問題找我知無不言，嘻嘻。我準備入ios大坑要同行的也請告知。

以下是兩本之前推薦的書的網頁部分

Learn HTML & CSS

Learn JavaScript & jQuery