“从头开始”的单页应用程序

"single page app from scratch"

本文关键字：从头开始 应用程序 单页      更新时间：2023-09-26

我一直在做一个单页应用程序(想想TiddlyWiki)

我已经有一段时间没有认真做网页设计了。上次我建一个大网站的时候，还没有css，没有javascript，没有html5，也就是说，HTML加上很多cgi脚本，在我的情况下，主要是用PHP。这些年来，我学过一些新技术的片段，但都不是有组织的。

我认为是时候回到原点，通过一系列越来越复杂的页面/网站- HTML -> HTML+CSS -> Javascript -> HTML5函数.....

这让我想知道是否有任何类似于"从头开始的Linux"的教程-但专注于"从头开始的网站?"或者至少是一系列从HTML hello world开始，然后逐步以逻辑方式添加功能的教程?

谢谢!

我个人建议你正确地学习HTML和CSS，在考虑javascript(特别是在考虑spa之前)之前让它们正常工作。这是我最近为某人写的一个小指南，可能对你有帮助:

因此，有几件事你必须考虑，并理解，成为一个CSS大师(在我的意见的重要性排序):

    <
  1. 选择器/gh>
  2. 级联
  3. 特异性
  4. 框模型
  5. 定位/浮动

选择器允许您定位页面上的元素，如果没有选择器，您可以做的事情很少(除了向内联元素添加样式规则—这是不好的做法!)，因此它是一个很好的起点。理解选择器是如何工作的以及它们的支持。

  • http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

接下来要理解的是最重要的主题之一，它将避免你编写太多不必要的CSS -级联!

  • http://reference.sitepoint.com/css/cascade

专用性决定哪些规则应用于给定的元素。大多数时候，它是可以避免的，你可以继续无知，但理解它将驯服你的选择器，并阻止你与自己进行军备竞赛，为选择器添加更多和id来应用你的样式(如果这没有意义，你不理解特异性，请继续阅读!)

  • http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

每当我和人们谈论CSS时，大多数人都能理解字体样式、背景等等。这是因为它是简单的东西;-)人们似乎总是在理解定位和浮动方面遇到麻烦。这些都是与框模型绑定的，所以首先要学习的是，然后转到定位和浮动:

  • http://css-tricks.com/the-css-box-model/
  • http://www.alistapart.com/articles/css-floats-101/
  • http://www.alistapart.com/articles/css-positioning-101/

如果你在这一点上有点头脑混乱，不要担心，它们是相当令人困惑的概念!

但是没有标记的CSS是什么?或者说，如果没有好的HTML，那么好的 CSS又有什么用呢?我认为，对CSS有一个很好的理解就是对HTML有一个很好的理解。以下网站包含大量关于HTML的信息:

  • http://diveintohtml5.info/
  • http://www.html5rocks.com/en/<——这可能有点硬核/前卫
  • http://html5doctor.com/

对于第一次学习它们可能有点太深了，所以我也强烈建议 以下书:

  • http://simplebits.com/notebook/2009/06/09/wssse/
  • http://easy-readers.net/books/adaptive-web-design/

它们都向你展示了如何用CSS编写良好的语义标记和样式来创建出色的结果。我知道，在这个有互联网的时代，谁还需要书呢?这些书太棒了，百分百物有所值。

一些不太有针对性的建议，但对于一般的CSS/HTML学习很好的资源:

  • http://www.alistapart.com
  • http://www.smashingmagazine.com
  • http://www.css-tricks.com

最后一件事——也是web的一大优势——是所有的网站都是有效的开源的*，因为你可以查看一个网站的所有 CSS/HTML/JS。下次你看到有趣的东西时，只要打开firebug，试着理解发生了什么，改变值，看看它有什么效果。看看其他人如何组织他们的标记，他们如何设计东西，他们将哪些功能委托给javascript而不是CSS等等。

在理解了以上所有内容之后，您可能会想要尝试一些尖端的CSS。关于一些CSS3技术的方便网站:

  • http://css3please.com/
  • http://www.colorzilla.com/gradient-editor/

这就是我现在能想到的一切!当然，和掌握任何东西一样，关键不在于你读了多少书，而在于你练习了多少。只有当你在实践中与这些事情斗争时，你才能真正获得洞察力，并加强你自己的思维模式。

至于JavaScript，假设你知道一些编程(考虑到你提到了CGI和PHP)，我衷心建议你看一些Douglas Crockford的视频，可以在这里找到:

  • http://javascript.crockford.com/

Crockford是JavaScript的大师，并负责一些重大进展(他发明了JSON并创建了JSLint)。YUI剧院的视频特别出色，非常详细:)

对于一些工具和'调试'，看看你的东西是否工作，我会使用:JSfiddle

同时，w3schools对于这些概念的基本理解是很好的。

CodeAcademy的HTML5和Javascript课程也可能对你有所帮助。

http://www.codeavengers.com/

很多还是一样的，只是CSS和JS增加了更多的功能，HTML5增加了更多的元素标签。

我在你的地方要做的是做一个基本的网站，然后慢慢地添加新的功能，同时跟随教程，尝试使它成为你自己的。

我也要加上我的2美分。这里有一些很好的系列学习HTML, CSS，整体网站编码/设计过程和其他有用的信息，我认为真的很好:

    HTML&CSS新手指南HTML&CSS高级指南
  • 30天学习不仅仅是HTML&CSS
  • Web开发人员检查表
    • 学习CSS布局
  • 杂志棒极了!

我可以发更多，但为什么要这样-这些已经足够让你保持身材了。我建议你从他们开始，你会在路上找到更多的资源。

如果你想做一个SPA，让我建议一个完全不同的方法，你不一定要从HTML/CSS级别开始:www.amber-lang.net

"Amber语言深受Smalltalk的启发。它旨在使客户端开发更快、更容易。Amber包含一个实时开发环境，包括类浏览器、工作区、单元测试运行器、脚本、对象检查器和调试器。

Amber是自己编写的，包括编译器，并编译成高效的JavaScript，与JS对等的一对一映射。"

看看，真的很酷。

如果您还在寻找2020年的起点，我最近写了从头开始构建Web应用程序时要考虑的事情。

不完全是你想要的，但我认为这是一个更新的好起点。

最好的,马克斯,

相关文章：