2014-09-20 57 views
0

首先,一個簡短的免責聲明。我幾乎沒有關於Web應用程序的知識。我來自iOS背景,我專門編寫了本地代碼,所以如果你寫下你的答案,就像我在淺層部分以外什麼都不知道,那就太好了。構建Web應用程序的GUI的方法

我有興趣學習一個堆棧來開發Web應用程序,但我不確定構建GUI的正確方法是什麼。我知道一個web前端由html和CSS組成,用於創建顯示和javascript作爲後端和GUI之間的橋樑,但我不知道將某些東西放在一起的最佳方式。

我知道在iOS中,您可以使用Interface Builder(xcode的一部分,它可以圖形化地創建描述顯示的xml)來創建GUI,而無需iOS將xml轉換爲某種渲染的知識,甚至可以寫在你的xml文件中。 Web前端有沒有類似的東西?

我主要只是尋找一個可接受的方式來開發一個Web應用程序的GUI的列表。如果我必須學習HTML和CSS,那就這樣做吧,但是我想知道我的選擇以及它們之間的權衡。

回答

0

我可以簡短地回答說(技術上),您可以設計網頁,而無需在HTML或CSS或甚至Javascript中編碼 - 但是,您的創意能力和應用程序會受到某種程度的限制。

您可以在this link瞭解所見即所得的HTML編輯器,或嘗試ckeditor(有人說這是很好的)......

...我覺得有點背景將幫助你達到一個正確的決定......

所以這裏有雲:


長的答案


我會首先嚐試將網絡編程和設計的世界融入與iOS編碼相關的概念。

如果我們從MVC的角度來看整個Web應用程序,那麼瀏覽器就是視圖,服務器就是控制器,數據庫就是模型......儘管這非常簡單。

就像在iOS中一樣,它們中的每一個都可以(但不一定是)分解爲子MVC系統。

就像MVC中的任何模型一樣,視圖(瀏覽器)可以與模型(數據庫)交談,但實際上它不應該。這只是不好的做法。

如果我們將主視圖(瀏覽器)分解爲子MVC系統,我會考慮將HTML作爲模型,將CSS作爲視圖並將瀏覽器(通過鏈接和JavaScript)作爲控制器。

這並不是所有明確的指示,但是這樣的思考可以幫助我練習更好,更簡潔的編碼。

HTML是視圖的Web應用程序模型 - 它包含要顯示或使用的數據。

HTML是XML格式的變體,它包含以類似於XML文件的方式組織的數據。

基本的HTML文件將包含:

<html> 
    <head> 
    </head> 
    <body> 
    </body> 
</html> 

這應該很熟悉你,如果你看過任何XML。

CSS(級聯樣式表)是視圖 - 它說明了如何顯示html數據。

如果您的web應用程序沒有任何CSS,它將使用瀏覽器的默認CSS /樣式應用於HTML中的數據。

這種「語言」讓我更多地思考iOS中的字典(我認爲這就是它們在Objective C中所稱的)。它們具有確定HTML數據如何顯示(如果顯示)的屬性和值(如鍵值對)。

他們可能是這個樣子:

body 
{ 
    color: white; 
    background-color: black 
} 

瀏覽器是網絡應用程序的視圖的控制器 - 它使所有的工作在一起,提供它在屏幕上。

Javascript和鏈接幫助我們告訴控制器我們想要它做什麼,但它是瀏覽器行爲(並且有時會故意)。

您可以使用僅使用鏈接提供的默認操作來執行不使用JavaScript的整個Web應用程序 - 在這種情況下,瀏覽器通常會要求服務器(主控制器)執行什麼操作。

通過允許我們爲我們的視圖提供一個「更智能」的控制器,就像在iOS中一樣,Javascript幫助我們將一些從服務器到服務器的移植工作移到客戶端。

出錯的主畫面/瀏覽器

並不是所有的觀點相同的問題,而不是所有的瀏覽器都一樣。

由於瀏覽器被用作Web應用程序視圖的控制器,並且由於某些瀏覽器的行爲與其他瀏覽器不同,所以我們Web代碼存在解決別人關於我們的視圖控制器應該如何表現的想法的問題。

您可能會看到我們抱怨了很多(特別是抱怨Internet Explorer)。

這些天來,這個問題是不是一個大問題,因爲它曾經是...它只是有些人沒有更新自己的電腦...

所見即所得的網頁編輯器

有一些網站建設者和編輯人員嘗試像X-Code一樣工作,通過允許我們構建網站,就像編寫Word文檔一樣。

但是,與只編碼視圖的圖形界面的X代碼不同,這些網站建設者也編寫模型,並且通常將javascript添加到混合中。

當我們使用這些工具時(我避免了),整個MVC模型分開。

我們可以將它們作爲髒工作的起點,然後我們將它們的代碼分開,並根據我們的需要進行調整 - 通常通過獲取視圖所需的代碼(CSS)並將其應用到我們需要的位置(並且放棄他們添加到代碼和HTML中的大部分廢話)。

總結

正如你所知道的,HTML和CSS(和JavaScript)只是一個web應用程序的一小部分 - 因爲它們都涉及到Web應用程序的主視圖。我們使用其他工具(例如Ruby,PHP,js.node,MySQL等)爲Web應用程序編寫控制器和模型。

對HTML和CSS進行編碼並不像您想象的那麼困難,但可能會比較困難,然後將其呈現出來。

您可以避免爲web應用程序編寫代碼,並使用提供所見即所得(即所見即所得)的應用程序,但這會限制您的能力,並且會失去對您想要創建的控件的控制權。