Ⅰ web前端開發和app開發，哪個發展前景比較好
個人感覺WEB要更好些，就算是現在或者將來，很多APP還是需要WEB來提供數據的，而且這也是將來的一個趨勢，WEB應用或者基於web端的APP。
Ⅱ web app和 原生app的區別
web app和原生app有三種區別：
1.開發方面有區別：
（1）原生APP：每一種移動操作系統都需要獨立的開發項目，iphone版本、Ipad版本、安卓版本。每種平台都需要獨立的開發語言。Java(Android), Objective-C(iOS)等等。需要使用各自的軟體開發包，開發工具以及各自的控制項。
（2）開發成本高、開發速度慢、維護成本高。三個平台（IOS、安卓、windows）的規則、推廣、運營都不相同。官方應用商店對APP上線審核流程比較復雜而且很慢，會嚴重影響APP的發布上線。
（3）Web App ：因為運行在移動設備的瀏覽器上，所以只需要一個開發項目。可以通過HTML、 CSS或者JavaScript來進行Web APP的開發。開發成本低、開發速度快。
2.功能有區別：
（1）原生App：原生APP是一個系統性的應用程序，可以類比於電腦上的軟體。原生app可以調用移動終端的硬體設備， 比如：麥克風、攝像頭、簡訊、GPS、藍牙、重力感應等。實現功能豐富
（2）Web App：Web APP可以類比於電腦上的網頁。Web APP更多是頁面展示類的APP。只能使用有限的移動硬體設備功能。更多用於頁面展示，側重於簡單的交互，無法使用很多硬體設備獨特的功能。
4.版本控制有區別：
（1）原生App：用戶可以自由地選擇是否更新軟體版本，所以會出現不同用戶同時使用不同版本的情況。同時也會導致維護成本比較高。使用舊版本的用戶無法體驗新版本的完整功能。
（2）Web App：所有的用戶都是用同樣的版本，所有用戶獲得的功能都是相同的。版本更新比較方便，直接在伺服器側更新數據即可。一個功能做好了就能上線，一天更新幾十次都毫無壓力。如果客戶端只是個瀏覽器，那一切都會變得很簡單。
（3）另外web統一性高，跨平台適用時開發量少。由於其入口不明顯（瀏覽器導航或者隨意點擊鏈接進入），讓用戶記住的門檻也隨之拔高，每次推廣導入的流量都可能淪為一次性努力，用戶留存率低。
Ⅲ web app如何開發
最近在廣州app開發公司啟匯網路官網上面看到這么一則新聞：微軟在IOS平台上針對Office 365企業用戶推出了Outlook Web App的原生應用，將更好的企業Exchange服務推進到了IOS中。
這款應用有分別針對手機與平板,是微軟針對企業用戶推出的在線電子郵件服務，與一般消費者使用的Outlook.com是不同的。這次推出的OWA for iOS本地應用提供Web版本原來就支持的功能，保留了Web 版的Modern UI體驗。
同時，相對於Web版本，本地應用還有新郵件的推送提醒，聯系人同步，離線使用，語音命令，管理員遠程刪除數據等優勢。
其實，Webapp開發說白了就是一個針對Iphone、Android優化後的web站點，它使用的技術無非就是HTML或HTML5、CSS3、JavaScript，服務端技術JAVA、PHP、ASP。
據介紹，網頁應用中心即移動Web App應用商店，UC瀏覽器引入app開發者開發這個版本，用戶可以在瀏覽器上直接調取使用。目前UC網頁應用中心的月活躍用戶數已經超過4700萬，Web App積累添加次數已超過1.8億次，收錄20大類超過1500款Web App，國內超過90%的app開發者都會通過UC網頁應用中心推廣他們的Web App。
顯而易見，Web App開發已被各大企業重視，再從app開發公司角度看下它究竟擁有怎樣的魅力呢？
其實Web app開發效果可以和電子表格，文檔編輯器一樣復雜，也可以和待做事項管理器一樣簡單。不管它是什麼，它都必須完成某些事情。
如今web已經成了網站和應用的混合。那麼，我們該怎麼區分web app和網站呢？有以下三點要素：
1.一個提供了很好的用戶體驗，讓用戶能很容易地完成任務，並利用了設備本地的一些性能。
2.一個web應用提供了豐富的視覺體驗，又不會分散人的注意力；它注重美學，使用和本地應用一樣的設計模式，又不失易用性。
3.一個web應用非常注重用戶的交互、參與和完成任務，而不是讓他們僅僅瀏覽網頁。應用程序是自包含的（self-contained），也即用戶不用導航到其他站點或者應用來完成任務。
一個web app開發應用鼓勵用戶交互、參與並完成任務，而不是消極瀏覽，比如購買電影票、寫文檔或者與朋友分享照片、視頻。不像網站，它給用戶提供了一種主人翁的感覺，他們可以和內容或其他人進行交互。
那麼，相對於Native App，Web App開發又有哪些優勢呢？
1、app開發成本較低，只要使用web開發技術就可以輕松的完成web app開發
2、app升級較簡單。升級不需要通知用戶，在服務端更新文件即可，用戶完全沒有感覺
3、和一般的web一樣，維護比較簡單，它其實就是一個站點
很多app開發公司看中web的未來發展是基於它的靈活性——既擁有在web上完成任務的一切優點，又能在離線的時候完成這些任務。支持離線應用現在已經是可以實現的了——HTML5提供了例如應用緩存和客戶端存儲（比如，本地存儲，索引資料庫）等性能，這樣你的應用就能在沒有網路聯接的時候也可以工作了。
Tag：webapp開發，手機web app開發，html5 web app開發
Ⅳ 包含web和app的系統
web app：web app是由html5所做的網站通過一些打包平台或者使用工具打包而成的軟體。
web app：web app開發成本低，不需要使用單獨的開發工具進行開發。
web app兼容適配移動設備，流暢度相對較低。
(4)基於webapp擴展閱讀：
基於Web網頁的系統和應用，有點類似於垂直發展的社群，其作用是在拓展業務發展范圍，面向廣大用戶。webAPP一般是基於網頁上的，但是出於用戶體驗會將webAPP的UI界面向原生APP的UI設計感覺界面靠攏。類似網頁編輯器，qq空間，網路新聞、網路視頻、網路圖片等都算是web APP。
Ⅳ 什麼是webapp
webapp是一個可以實現用戶需要的功能的網頁，因此可以理解為是基於網頁端的APP。懂前端技 術的人可以自己敲代碼寫一個webapp，不懂技 術的話也有辦法創建webapp，只需利用網上的webapp開發平 台，例如咫尺微頁的webapp開發平台即速應用就不錯，新手也蠻容易上手的
Ⅵ web app是什麼
你好，朋友！
WebApp是指基於Web的系統和應用，其作用是向廣大的最終用戶發布一組復雜的內容和功能。
Ⅶ 如何用jQuery來創建一個基於移動設備的Web App
在本文中，Jake Rocheleau將為我們展示如何用jQuery來創建一個基於移動設備的Web App。在開發過程中，我們將使用CSS3的媒體查詢功能來找出當前移動設備屏幕的的最大解析度，根據不同的解析度使用不同CSS。此外，Media Queries還可以幫助我們在小屏幕上隱藏導航菜單以展示更多的內容。我們還會使用jQuery來幫助我們使用Ajax.Load()，以便激活菜單欄和載入外部頁面內容。
LIVE DEMO
SOURCE CODE
1. 定義頁面布局
首先，我們先要查看HTML頁面，並且使用CSS樣式來確定頁面的樣式。在開頭我會跳過許多不常見的Meta標簽（對所創建的Web App沒有直接的影響）。但是我們仍然要注意一些代碼片段（在下面我已經列舉出來）。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
X-UA-Compatible是用來描述文件在某些瀏覽器上的渲染程度。不得不說， 在HTML5編程過程中這是一個非常有趣的事情。所以我不用太擔心這個問題。但重要的是，如果我們恰當地使用Meta標簽，它會給我們許多意想不到的幫助。例如加入關鍵字會被大型搜索網站自動搜集，可以設定頁面格式及刷新和讓網頁自動適應移動瀏覽器大小等。
內容主體
在BODY中，我通過ID#w創建了一個Wrapper Div。在其中我將頁面布局分成了#pagebody和#navmenu兩個部分。整個頁面的寬度為640px，所以#pagebody和#navmenu的寬度可以精確地計算。
我給導航菜單賦了一個較低的z-index值來保證#pagebody總能在最頂部面顯示。
<div id="pagebody">
<header id="toolbarnav">
<a rel="external" href="#navmenu" id="menu-btn"></a>
<h1>HK Mobile</h1>
</header>
<section id="content" class="clearfix">
<h2>Welcome to the Mobile Site!</h2>
</section>
</div>
<div id="navmenu">
<header>
<h1>Menu Links</h1>
</header>
<ul>
<li><a rel="external" href="#homepage.html" class="navlink">Home</a></li>
<li><a rel="external" href="#about.html" class="navlink">About Us</a></li>
<li><a rel="external" href="#advertise.html" class="navlink">Advertise</a></li>
<li><a rel="external" href="#write.html" class="navlink">Write for Us</a></li>
<li><a rel="external" href="#contacts.html" class="navlink">Contacts</a></li>
<li><a rel="external" href="#privacy.html" class="navlink">Privacy Policy</a></li>
</ul>
</div>
我在每個.html頁面前都添加了井字元（#）。每當點擊一個鏈接時，URL欄都會出現和下推主體內容。當引用的ID沒有被重載時，我們只能通過JavaScript來重新調用它。
2. CSS定位
我們CSS代碼中並沒有太多復雜的內容。大多數的定位工作都是通過手動完成的，完成之後才會交由jQuery來操作。同樣，這里也有一些我們要注意的代碼片段。
/** @group core body **/
#w #pagebody {
position: relative;
left: 0;
max-width: 640px;
min-width: 320px;
z-index: 99999;
}
#w #navmenu {
background: #475566;
height: 100%;
display: block;
position: fixed;
width: 300px;
left: 0px;
top: 0px;
z-index: 0;
}
上面的這段代碼分別定義了頁面中兩個部分的樣式。導航菜單的寬度為300px，這樣一來，就為我們瀏覽頁面內容留下了一點空間，打開和關閉菜單按鈕也固定在左側。這里最重要的部分就是導航菜單的z-index的屬性值和位置（z-index: 0；position: fixed）。
我們頂部欄標題也是一個有趣的部分。它被放置在一個固定的位置，會隨著頁面內容的滾動而滾動，大多數的iOS App上都有這個效果。
/** @group header **/
#w #pagebody header#toolbarnav {
display: block;
position: fixed;
left: 0px;
top: 0px;
z-index: 9999;
background: #0b1851 url('img/tabbar-solid-bg.png') top left no-repeat;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-bottom-right-radius: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
-webkit-border-bottom-left-radius: 0;
height: 44px;
width: 100%;
max-width: 640px;
}
#w #pagebody header#toolbarnav h1 {
text-align: center;
padding-top: 10px;
padding-right: 40px;
color: #e6e8f2;
font-weight: bold;
font-size: 2.1em;
text-shadow: 1px 1px 0px #313131;
}
移動規則
很容易注意到，在背景上我使用了藍色的橫條作為標題欄。這個標題欄的大小為640x44px，從而能夠與頁面的布局保持吻合。不僅如此，我還為iPhone/iPad視網膜顯示屏設計了一張@2x圖片。大家可以從上圖看到這些圖片，或者從SOURCE CODE中獲取。
{System}/demo/img/[email protected]
{System}/demo/img/[email protected]
/** retina display **/
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
#w #pagebody header {
background: #0b1851 url('img/[email protected]') top left no-repeat;
background-size: 640px 44px;
}
#w #pagebody header #menu-btn {
background: url('img/[email protected]') no-repeat;
background-size: 53px 30px;
}
}
菜單箭頭的設計
在導航菜單方面，我為每個菜單鏈接的右側設計了一個指向右方的箭頭圖標。相信大多數CSS3的愛好者都會喜歡這么做，這確實是一個不錯的創意。
我使用transform變數在導航內容後面創建一個小邊框，所以我們可以在左邊的框架內任意的移動，除此之外，在懸停狀態下我們可以很方便地改變邊框的顏色和樣式。更令人驚嘆的是，你只需要使用基本的HTML5和CSS3樣式就可以完成這些邊框地設計。
但首先，我們要進入JavaScript編碼世界。
#w #navmenu ul li a::after {
content: '';
display: block;
width: 6px;
height: 6px;
border-right: 3px solid #d0d0d8;
border-top: 3px solid #d0d0d8;
position: absolute;
right: 30px;
top: 45%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#w #navmenu ul li a:hover::after { border-color: #cad0e6; }
3. jQuery動畫設計
在編寫這些自定義代碼過程中，我新建了一個script.js文件。大家可以根據自己的需要來直接編寫<script> 標簽，也可以從SOURCR CODE中直接下載我的模板。
$(document).ready(function(){
var pagebody = $("#pagebody");
var themenu = $("#navmenu");
var topbar = $("#toolbarnav");
var content = $("#content");
var viewport = {
width : $(window).width(),
height : $(window).height()
};
// retrieve variables as
// viewport.width / viewport.height
在開始之前，我設置一些頁面變數，如此一來，我們就可以更為方便地引用文檔中的變數。我從沒用過視口值，但是如果你想調整動畫階段，設置視口值可以幫你一個大忙。例如：通過視口值，你可以檢查當前瀏覽器的寬度，並能夠的對你的菜單欄進行相應地縮放。
function openme() {
$(function () {
topbar.animate({
left: "290px"
}, { ration: 300, queue: false });
pagebody.animate({
left: "290px"
}, { ration: 300, queue: false });
});
}
function closeme() {
var closeme = $(function() {
topbar.animate({
left: "0px"
}, { ration: 180, queue: false });
pagebody.animate({
left: "0px"
}, { ration: 180, queue: false });
});
}
接下來，我為打開和關閉菜單定義了兩個重要的函數。除非我們確實需要兩種截然不同的動畫元素，否則我們可以在一個單一的函數和回調切換中完成此項設計，但不幸的是， jQuery並不能幫助我們解決這個問題，所以我們需要求助於其它的替代語法。
這兩個函數我暫且命名為topbar和pagebody。內容區域的白色背景就是pagebody；我們把標題欄放置在頁面的頂部。這就意味著每當我們點擊打開或者關閉按鈕時，我們需要把topbar和pagebody向左和向右平移290px。
4. 載入動態內容
理論上，上述代碼基本上就能滿足大部分人創建一個簡單移動的需求，但是，在這里我還想添加一些另外的東西。
每當用戶點擊一個菜單鏈接，頁面會自動關閉當前的導航欄目和顯示一個載入的GIF圖像。當頁面內容載入完成時，頁面會去除GIF圖片，並且顯示已載入好的內容。通過使用static .htm，我們可以很輕松的完成這項工作，從而避免了PHP、Ruby、Perl或者任何後端語言所帶來的困擾。
點擊設置
首先，我們需要測試導航按鈕。當用戶點擊導航按鈕，頁面會停止href的正常載入，此時，我們可以利用函數來顯示外部內容。
// loading page content for navigation
$("a.navlink").live("click", function(e){
e.preventDefault();
var linkurl = $(this).attr("href");
var linkhtmlurl = linkurl.substring(1, linkurl.length);
var imgloader = '<center style="margin-top: 30px;"><img src="img/preloader.gif" alt="loading..." /></center>';
通過上段代碼，每當用戶點擊導航菜單鏈接時，我們會停止當前頁面載入並且設置一個完整的URL變數。此外，我還創建一個包含標准圖像Loader的HTML變數。如果你想定製自己的圖像載入方式，Ajaxload會是一個很不錯的助力。
Ajax.Load()
要實現這個功能我們需要兩段不同的代碼，下面這段代碼不僅能幫助我們關閉導航菜單和滑動文檔窗口，而且還能幫助我們使用一個較小的載入動畫來替代當前頁面內的主體內容。
closeme();
$(function() {
topbar.css("top", "0px");
window.scrollTo(0, 1);
});
當外部頁面的內容載入完成時，我們要用外部的載入頁面來取代頁面上的載入動畫。通常情況下，這將只需要幾百毫秒甚至更快，所以我設置了超時功能。
content.html(imgloader);
setTimeout(function() { content.load(linkhtmlurl, function() { /* no callback */.}) }, 1200);
Ⅷ 什麼是web app
WebApp是指基於Web的系統和應用，其作用是向廣大的最終用戶發布一組復雜的內容和功能。
從一個簡單的幫助消費者計算汽車租借費用的網頁，到為商業人員和度假者提供全套旅遊服務的大型復雜的WEB站點，都是WebApp。它包括一些完整的WEB站點，WEB站點的專門功能以及在Internet、Intranet或ExtraNet上的信息處理應用。
webapp 框架是一種簡單的與WSGI兼容的網路應用程序框架，可以與 App Engine 配合使用。不必為了使用 App Engine 而使用 webapp：網路伺服器支持任何使用 CGI 的 Python應用程序。webapp 提供一種簡單的方式來開始為 App Engine 開發應用程序。
響應式網頁設計的大部分技術，是可用在WebApp開發中的。
移動端Web App和WAP有什麼不同？最直接的區別就是功能層面。WAP更側重使用網頁技術在移動端做展示，包括文字、媒體文件等。而Web App更側重「功能」，是使用網頁技術實現的App。總的來說，Web App就是運行於網路和標准瀏覽器上，基於網頁技術開發實現特定功能的應用。
Ⅸ WEB手機App有什麼優點
WebAPP是指基於Web的系統和應用，其作用是向廣大的最終用戶發布一組復雜的內容和功能。
開發優勢：
站點的專門功能以及在Internet、Intranet或ExtraNet上的信息處理應用。
框架是一種簡單的與WSGI兼容的網路應用程序框架，可以與 APP Engine 配合使用。
網路伺服器支持任何使用 CGI 的 Python應用程序。
中的來說WAP更側重使用網頁技術在移動端做展示，包括文字、媒體文件等。而WebAPP更側重「功能」，是使用網頁技術實現的APP。
Ⅹ web app開發和原生app開發 哪個好
1.開發方面
原生APP：每一種移動操作系統全部須要獨立的開發項目，iphone版本、WP版本、安卓版本。每種平台全部須要獨立的開發語言。Java(Android), Objective-C(iOS)等等，必須要使用各自的軟體開發包，開發工具乃至各自的控制項。開發費用高、開發速度慢、維護費用高。三個平台（IOS、安卓、windows）的規則、推廣、運營全部不一樣。官方應用商店對APP上線審核過程相對復雜並且慢長，嚴重影響APP的發布上線。
Web App ：因為運行在移動設備的瀏覽器上，於是只須要一個開發項目。能夠通過HTML、 CSS或許JavaScript來實行Web APP的開發。開發費用低、開發速度快。
2.功能方面
原生App：原生APP就是一個系統性的應用程序，能夠類比在電腦上的軟體。原生app能夠調用移動終端的硬體設備， 好比：麥克風、攝像頭、簡訊、GPS、藍牙、重力感應等。完成功能豐富
Web App：Web APP能夠類比在電腦上的網頁。Web APP很多就是頁面展示類的APP。只可以使用有限的移動硬體設備功能。很多用來頁面展示，側重在簡單的交互，沒辦法使用很多硬體設備獨特的功能。
3.應用安裝使用方面
原生App：須要通過應用商店會原生app下載到手機上或移動終端上。以獨立的應用程序運行，用戶必需手動去下載並安裝這些原生App，原生應用能夠節約寬頻費用，能夠訪問本地資源、緩存。
Web App：通過移動設備上的瀏覽器訪問，軟體更新只須要更新伺服器就夠了，用戶層面不須要做一切操作。不須要安裝客戶端，能夠節省手機終端的內存空間。
4.版本控制方面
原生App：用戶能夠自由地選取能否更新軟體版本，於是能顯現不一樣用戶一起使用不一樣版本的狀況。一起同樣能引起維護費用相對比較高。使用舊版本的用戶沒辦法體驗新版本的完整功能。
Web App：全部的用戶全部就是使用同樣的版本，全部用戶得到的功能全部就是一樣的。版本更新相對比較便利，馬上在伺服器側更新數據就可以。一個功能做好了就可以上線，1天更新幾十次全部毫無壓力。假如客戶端不過是個瀏覽器，那所有都會變得非常簡單。其它web統一性高，跨平台實用時開發量少。因為其入口不顯著（瀏覽器導航或許隨意點擊鏈接進入），令用戶記住的門檻同樣隨之拔高，每次推廣導入的流量全部也許淪為一次性努力，用戶留存率低。
5.載入速度方面
原生App：原生APP由「雲伺服器數據+APP應用客戶端」兩個別構成，APP應用全部的UI元素、數據內容、邏輯框架均安裝在手機終端上。訪問的時刻，不須要重新下載載入應用頁面框架，只須要載入數據就可以。於是載入速度更快，頁面響應更快。
Web App：而Web APP開啟一個頁面，全部需要重新載入頁面的全部元素，訪問速度受手機終端性能與網路環境的限制，引起載入速度慢，並且操作頻繁容易卡死。
總結
原生App偏向在交互，注重用戶體驗（導航切換、勾選選項、相片、視頻等操作），Web APP偏向和瀏覽與簡單的交互。 一些功能須要訪問硬體（攝像頭、感測器等），使用原生App, Web APP用來信息展示。 費用有限時，中心的功能使用原生APP，周邊輔助的功能能夠使用Web App。
現狀：相對比較流行的技巧便是會原生App 和Web App實行融合，就是說應用大的框架就是原生的，其餘詳細的內容就通過網頁封裝，如此做的好處便是在方便更新的時候，同樣可以確保中心功能的交互體驗。
商領雲可以定製開發APP以及h5網站，也可以入駐商領雲SAAS+paas系統進行在線製作APP、小程序、移動網站和微商城等。