【问题标题】:Approach to building a GUI for a web application为 Web 应用程序构建 GUI 的方法
【发布时间】:2014-11-15 03:15:06
【问题描述】:

首先,简短的免责声明。我对 Web 应用程序几乎一无所知。我来自 iOS 背景,专门编写原生代码,所以如果你写你的答案就像我对浅层部分一无所知,那就太好了。

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

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

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

【问题讨论】:

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


    【解决方案1】:

    我可以简短地回答说(从技术上讲)您可以设计网页而无需使用 HTML 或 CSS 甚至 Javascript 进行编码 - 尽管您的创意能力和应用程序会受到一定限制。

    你可以在this link阅读关于所见即所得的html编辑器,或者试试ckeditor(有人说很好)...

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

    这里是:


    长答案


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

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

    就像在 iOS 中一样,这些中的每一个都可以(但不是必须)分解为子 MVC 系统。

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

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

    虽然不是那么明确,但这样的想法有助于我练习更好、更清晰的编码。

    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)。

    这些天来,这个问题已经不像以前那么严重了……只是有些人不更新他们的电脑……

    所见即所得网络编辑器

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

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

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

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

    总结

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

    为了编写 web 应用的控制器和模型,我们使用其他工具(如 Ruby、PHP、js.node、MySQL 等)。

    编写 HTML 和 CSS 并不像您想象的那么难,尽管它可能比我提出的要难。

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

    【讨论】:

      猜你喜欢
      • 2013-08-30
      • 2012-02-09
      • 2011-03-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-06-17
      相关资源
      最近更新 更多