2014-09-20 60 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应用程序编写代码,并使用提供所见即所得(即所见即所得)的应用程序,但这会限制您的能力,并且会失去对您想要创建的控件的控制权。