为Web应用程序构建GUI的方法

时间:2014-09-20 19:07:00

标签: html css user-interface web-applications frontend

首先,简短的免责声明。我几乎不了解Web应用程序。我来自iOS背景,我专门编写本机代码,所以如果你写的答案就像我在浅层部分之外什么都不知道那样,那就太好了。

我有兴趣学习堆栈来开发Web应用程序,但我不确定构建GUI的正确方法是什么。我知道web前端由html和CSS组成,用于创建显示和javascript作为后端和GUI之间的桥梁,但我不知道将某些东西组合在一起的最佳方式。

我知道在iOS中,你可以使用Interface Builder(xcode的一部分,让你以图形方式创建描述显示的xml)创建GUI,而不知道iOS如何将xml转换为某些渲染,甚至是什么写在你的xml文件中。网络前端有什么模拟?

我主要只是寻找为Web应用程序开发GUI的可接受方法列表。如果我必须学习HTML和CSS,那就这样吧,但我想知道我的选择是什么以及它们之间的权衡。

1 个答案:

答案 0 :(得分:0)

我可以很快回答说(从技术上讲)你可以设计网页而不用HTML或CSS编码,甚至是Javascript - 尽管如此,你的创作能力和应用程序会受到限制。

您可以在this link上阅读WYSIWYG html编辑器,或试用ckeditor(有人说这很好)......

......我认为一些背景知识可以帮助您做出正确的决定......

所以这里:


长答案


我首先尝试将网络编程和设计的世界放入与iOS编码相关的概念中。

如果我们从MVC的角度来看整个Web应用程序,那么浏览器就是视图,服务器就是控制器而数据库就是模型......虽然这很简单。

就像在iOS中一样,每个都可以(但不一定)分解为子MVC系统。

就像MVC中的任何模型一样,视图(浏览器)可以与模型(数据库)对话,但实际上它不应该。这只是不好的做法。

如果我们将主视图(浏览器)分解为子MVC系统,我会将HTML视为模型,将CSS视为视图,将浏览器(通过链接和javascript)视为控制器。 / p>

这并不是那么明确,但这样的思考有助于我练习更好,更清晰的编码。

HTML是网络应用的视图模型 - 它包含要显示或使用的数据。

HTML是XML格式的变体,它包含以与XML文件类似的方式组织的数据。

基本HTML文件将包含:

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

如果您阅读任何XML,这对您来说应该很熟悉。

CSS(级联样式表)是视图 - 它说明应该如何显示html DATA。

如果您的网络应用没有任何CSS,它将使用浏览器的默认CSS /样式应用于HTML中的数据。

这种“语言”让我更多地考虑iOS中的词典(我认为这就是他们在Objective C中所称的词典)。它们具有属性和值(如键值对),用于确定HTML数据的显示方式(如果显示)。

它们看起来像这样:

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

浏览器是网络应用程序视图的控制器 - 它使所有内容协同工作并将其提供给屏幕。

Javascript和链接可以帮助我们告诉控制器我们想要它做什么,但它是行动的浏览器(并且有时是故意的)。

你可以拥有一个没有javascript的整个网络应用程序,只使用链接提供的默认操作 - 在这种情况下,浏览器通常会询问服务器(主控制器)该做什么。

Javascript帮助我们将一些工作从服务器移动到客户端,允许我们为我们的视图设置一个“更智能”的控制器 - 就像在iOS中一样。

错误的主视图/浏览器问题

并非所有视图都是相同的,并且并非所有浏览器都相同。

因为浏览器被用作网络应用程序视图的控制器,并且因为某些浏览器的行为与其他浏览器不同,所以我们的网络编码人员遇到了解决其他人对视图控制器应该如何表现的想法的问题。

您可能会看到我们抱怨它很多(尤其是抱怨Internet Explorer)。

现在,这个问题并不像以前那么大......只是有些人没有更新他们的电脑......

WYSIWYG网络编辑

有些网站建设者和编辑者试图像X-Code一样工作,允许我们像编写word文档一样构建网站。

但是,与仅编码视图图形界面的X-Code不同,这些网站构建者也会编写模型,并且通常会将javascript添加到组合中。

当我们使用这些工具(我避免使用)时,整个MVC模型就会分崩离析。

我们可以将它们作为脏工作的起点,然后我们将它们的代码分开并根据我们的需要进行调整 - 通常是通过获取视图所需的代码(CSS)并将其应用到我们需要的地方(并丢弃他们添加到代码和HTML中的大部分废话。

总结

正如您所知,HTML和CSS(以及Javascript)只是Web应用程序的一小部分 - 因为它们都与Web应用程序的主视图相关。

要编写Web应用程序的控制器和模型,我们使用其他工具(如Ruby,PHP,js.node,MySQL等)。

编写HTML和CSS并不像你想象的那么难,虽然它可能比我提出的更难。

您可以避免为Web应用程序编写代码并使用提供WYSIWYG(所见即所得)的应用程序,但这会限制您的能力,并会使您无法控制您想要创建的内容。