學(xué)校手機版網(wǎng)站的開發(fā)實踐

編者按：隨著網(wǎng)絡(luò)技術(shù)的快速發(fā)展和智能手機的普及，互聯(lián)網(wǎng)和通訊網(wǎng)絡(luò)之間的聯(lián)系密不可分。智能手機既是一個通信工具，更是一個網(wǎng)絡(luò)工具，利用智能手機可以快速的上網(wǎng)瀏覽查詢相關(guān)內(nèi)容。因此，開發(fā)適合手機瀏覽的網(wǎng)站建設(shè)十分必要。本文以學(xué)校網(wǎng)站為例，簡述手機移動版網(wǎng)站的開發(fā)方式和開發(fā)技術(shù)。

筆者在日常工作中發(fā)現(xiàn)，在PC版網(wǎng)站基礎(chǔ)上，通過HTML5+CSS+Jav aScript技術(shù)開發(fā)移動手機版網(wǎng)站，既方便又實用，而且還能共享PC網(wǎng)站的數(shù)據(jù)與信息。

手機版網(wǎng)站的特點

手機網(wǎng)站就是手機能訪問的網(wǎng)站，它是面向手機用戶為方便手機訪問而建立的網(wǎng)站，也被稱為WAP網(wǎng)站。手機網(wǎng)站的開發(fā)不同于PC網(wǎng)站，需要考慮以下幾個因素：一是屏幕大小問題，由于目前手機型號和屏幕尺寸不同，以及有豎屏、橫屏閱讀兩種方式，這就對網(wǎng)頁排版、美工要求較高,既要適應(yīng)窄屏閱讀又要適應(yīng)寬屏閱讀，且顯示界面小，輸入輸出不那么方便。因此，要求開發(fā)的網(wǎng)站要操作簡化、內(nèi)容簡潔和應(yīng)用簡單。另外，手機網(wǎng)站的用戶群相對比較特定，都是手機用戶，而要做到移動訪問手機網(wǎng)站，需要有通信信號WLAN或4G信號，在4G或3G模式下，還要考慮到流量和上網(wǎng)速度的影響。

手機版網(wǎng)站開發(fā)方式

手機版網(wǎng)站的開發(fā)與PC版類似，需要考慮操作系統(tǒng)、數(shù)據(jù)庫、編程語言等問題，還需要考慮網(wǎng)站是獨立開發(fā)還是與PC版網(wǎng)站兼容設(shè)計。因此，手機版網(wǎng)站開發(fā)一般有以下幾種模式。

1.網(wǎng)頁模式獨立開發(fā)手機網(wǎng)站

這種方式就是完全獨立開發(fā)設(shè)計手機版網(wǎng)站，將手機網(wǎng)站和電腦網(wǎng)站是區(qū)分開的，需要獨立的后臺服務(wù)器和數(shù)據(jù)庫，仍然用HTML技術(shù)開發(fā)。這種模式可以將手機網(wǎng)站和電腦版設(shè)計不同的功能欄目和信息，但缺點是手機網(wǎng)站里面的資料信息也需要單獨通過手機網(wǎng)站后臺添加管理，對同一內(nèi)容需添加兩次，人力管理與維護成本比較高，開發(fā)成本也高。

2.APP模式開發(fā)手機網(wǎng)站

APP是針對手機開發(fā)的軟件。隨著手機智能化程度的提高，針對手機開發(fā)的APP技術(shù)也日趨成熟，因此有些手機網(wǎng)站是通過APP模式開發(fā)設(shè)計。但APP開發(fā)的技術(shù)要求和成本高，開發(fā)周期長，而且APP一般側(cè)重于即時性強的新聞信息推送。如果全站采用APP開發(fā)設(shè)計還是比較復(fù)雜的，用APP開發(fā)的手機網(wǎng)站一般與PC網(wǎng)站的數(shù)據(jù)與信息共享也比較困難，仍然相當于獨立的兩個網(wǎng)站。

3.網(wǎng)頁模式兼容PC網(wǎng)站欄目數(shù)據(jù)搭建手機網(wǎng)站

這種方法是在原有PC網(wǎng)站的基礎(chǔ)上，只要開發(fā)一個針對手機終端顯示信息的頁面程序，顯示的內(nèi)容是調(diào)用電腦PC網(wǎng)站數(shù)據(jù)信息，共用一個管理后臺。

好處就是在電腦網(wǎng)站上添加了信息，在手機端就會即時的完整呈現(xiàn)，不需要添加兩次。這樣的網(wǎng)站可以自動適應(yīng)電腦和手機移動端訪問，也就是常說的HTML5網(wǎng)站開發(fā)。

HTML5是萬維網(wǎng)的核心語言、標準通用標記語言下的一個應(yīng)用超文本標記語言（第五次重大修改）。HTML5融入了許多新穎的標簽屬性，淘汰了過時或冗余的屬性。它與CSS3樣式結(jié)合，使得網(wǎng)站的頁面更加美觀、炫麗。此外，它與JavaScript結(jié)合運用，還可以使網(wǎng)頁界面更具動感效果。而且HTML5還有一大特點就是它可以通過標簽來控制網(wǎng)站頁面的大小，使得頁面能根據(jù)各類型智能手機的屏幕大小自動調(diào)節(jié)來顯示信息。HTML5網(wǎng)站支持電腦PC端和手機端的訪問，大大方便了網(wǎng)站數(shù)據(jù)的維護。

具體做法是同一個前臺頁面，做兩套不同的css樣式文件，并且自動判斷，當手機訪問時，則自動調(diào)用手機版的css樣式文件。這樣的網(wǎng)站不存在同一條信息兩個網(wǎng)址上顯示的問題，也不存在信息數(shù)據(jù)需要添加兩次的情況。這是現(xiàn)在比較流行的一種搭建手機網(wǎng)站和電腦網(wǎng)站的方式，能提高管理效益與數(shù)據(jù)的一致性。

筆者單位就是用這種模式開發(fā)的，采用了HTML5+CSS3的界面布局方式，采用相同的數(shù)據(jù)庫連接文件conn.asp。同時，適當?shù)奶砑恿薐S腳本來調(diào)用手機的本地用戶數(shù)據(jù)，來提高網(wǎng)頁的加載速度。

手機版網(wǎng)站開發(fā)技巧

由于手機本身結(jié)構(gòu)和配置的特點，在開發(fā)手機網(wǎng)站是必須考慮以下幾個問題。

1.手機網(wǎng)站不同于電腦版網(wǎng)站，由于手機屏幕的局限性，展現(xiàn)的內(nèi)容不多，所以欄目一定要精簡，突出重要內(nèi)容，特別是在導(dǎo)航的布局上，不可像電腦端網(wǎng)站那樣分類很細，則會增加網(wǎng)站負擔，也會增加用戶瀏覽負擔，看起來無序而雜亂。

為了瀏覽方便，可以通過設(shè)置子欄目，點擊一級欄目方式進入子欄目。筆者單位根據(jù)網(wǎng)站內(nèi)容選取了7個頻道內(nèi)容顯示在手機首頁的主欄目上，主要有學(xué)校簡介、校務(wù)管理、家?；?、通知公告、新聞中心、辦學(xué)成果、有情鏈接等，同時在首頁設(shè)置時限性與工作性強，能更好宣傳學(xué)校工作的三個欄目通知公告、新聞動態(tài)、辦學(xué)成果，以頁轉(zhuǎn)換方式顯示在手機版網(wǎng)站首頁。

同時，考慮到信息檢索的便捷性，首頁還設(shè)置了搜索對話框，為了使手機網(wǎng)站活潑靈動，與PC網(wǎng)站一樣，在首頁加入Flash的動畫橫幅。如圖1所示。

2.手機網(wǎng)站的實現(xiàn)，比較簡捷的做法是建立一個文件夾，如mobile，開發(fā)適合于手機顯示和互動的ASP程序代碼，包括樣式文件CSS等，并將開發(fā)的ASP程序代碼文件統(tǒng)一放在此文件夾，然后通過于不同的訪問路徑來訪問手機網(wǎng)站。在瀏覽器訪問首頁，加入一條檢測和判語句，訪問時對終端設(shè)備是手機終端與電腦終端進行識別判斷，如果是移動端則直接跳轉(zhuǎn)到手機網(wǎng)站地址，不需要用戶再主動輸入手機網(wǎng)站地址去訪問，如果是電腦終端，則跳轉(zhuǎn)到PC網(wǎng)站地址。如下代碼：

圖2 首頁APP安裝界面

3.制作發(fā)布一個二維碼。提高手機網(wǎng)站的訪問發(fā)布效率。

智能手機有一個較大的優(yōu)點，即能實現(xiàn)圖像識別，因此，為了方便手機快捷瀏覽，可以制作一個能打開手機瀏覽首頁界面的二維碼，一方面可放單獨將二維碼在朋友圈等渠道進行發(fā)布推廣，也可以放在PC網(wǎng)站首頁，進行掃碼打開。

4.制作一個簡單的APP，整合手機網(wǎng)站的發(fā)布與共享。

雖然APP開發(fā)的技術(shù)要求比較高，但僅開發(fā)一個頁面的快捷鏈接APP還是比較可行的和方便的。因為通過一個簡單的APP，可更方便于發(fā)布與共享，同時通過安裝APP，在手機上可以快速進入手機站的各個頻道模塊。圖2是筆者單位開發(fā)的一個APP程序syzx.apk安裝后界面，這樣通過點擊頁面上的圖標，可以快速進入并打開相應(yīng)的頁面。

5.手機版網(wǎng)站如果對于信息展示發(fā)布比較方便，也可以根據(jù)工作需要開發(fā)相應(yīng)的交互頁面。如果考慮互動交互與輸入，則需要考慮登錄安全的問題。