`
前端开发编程人员
  • 浏览: 4690 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

七种有前景的Web技术

阅读更多

 

原文链接:http://www.gbtags.com/gb/share/9420.htm

 

网站开发领域飞速发展。仿佛每一天都有新的框架或者设计工具问世。本文会概括介绍网页设计和开发领域的七种新兴技术。借助这些技术就可以轻松方便地搭建一个美观、实用的网站和web程序。让我们开始吧!

Meteor: 处处都在用JavaScript

Meteor是个相当不错的编写和部署Web程序的新平台。据称会成为未来几十年内构建应用程序的主要平台!相当大胆的说法,说不定成真了呢。

回顾历史,网站工作原理大都是“在服务器上处理东西,然后把HTML发送给呆萌的浏览器”。Meteor开发小组质疑这种技术已经过时。现代浏览器能做的远不止自行运行程序,比如从服务器或者随便什么地方的Web服务获取数据。固守”所有的东西都交给服务器处理“的旧模式完全不合情理。让浏览器自行请求所需数据,甚至是通过多个来源获取数据,然后构建自己的标记语言来显示应用程序接口的新模式显然更有意义。

编写Meteor应用只会用到HTML,CSS和JavaScript。Meteor的一大特点是,JavaScript既可以运行在服务器上(用Meteor服务器和Node.js)也可跑在浏览器里。服务器端的Meteor负责打包客户端JavaScript和其他资源,然后把它们当作一个缩小的捆绑包发送到浏览器。

Meteor采用响应式编程,也就是只要更新数据,网页元素就会自动更新。这意味着程序员的工作量大大减轻,同时用户界面会更加强大。

Meteor还有需要不错的特性,包括多种模板引擎支持,跨服务器和浏览器的数据库拷贝带来的超高速数据库访问。部署应用程序也非常方便,既可以用自己的服务器也可以用meteor.com免费提供的服务器。

用Meteor可以优雅地打造现代Web应用。我迫不及待想亲自尝试一下。该平台还处在“早期预览”阶段,1.0版本会在几个月后发布。你可以参考一下萨沙格莱夫写的这篇介绍文章,作者只用了四十五分钟就搞定了基于Meteor的软件开发。

Tumult Hype 2.0: 再见了,Flash

Tumult Hype 的Mac软件已经出来了好几年了,但是直到最新的2.0版本才真正显示出自己的价值。Hype让你能够用绘图工具和时间线来设计并构建交互式Web内容和关键帧动画。然后只需轻点几次鼠标,就可以把工作成果导出为符合标准的HTML5,CSS,JavaScript和图像,而且可以同时在桌面端和移动端上运行。这就像是用Adobe公司的Flash Professional制作HTML5,费用却少了不少。

这几周我一直在陆陆续续使用Hype 2.0,尽管和Flash Professional比起来的确少了一些特性,但是用来为网站创建具有专业外观的交互式内容是完全够用的。不妨来看看这些用Hype制作的游戏和信息图表 。

Hype 2.0还有一些新特性,比如Hype Reflect,一款免费的iOS应用,可以用来在iPhone或者iPad上即时预览你的作品。其他特性还有:更出色的移动端内容支持,更强大的音频支持以及对曲线形运动路径的支持。Macworld对这些新特性做了不错的总结,值得看看。 

Bohemian Sketch: 网页设计师的梦幻工具

虽然不少网页设计师选择Photoshop,还有许多人在寻找更精简,更便宜同时更适合网页设计的替代品。

Bohemian Coding出品的Sketch由此应运而生。和Hype相仿,Sketch也是Mac软件,也经历了从相对简单的设计工具到针对网页交互设计进行强化的全功能软件的进化。Sketch的独特特性包括:

  • 基于矢量的精确、非破坏性编辑操作和与分辨率无关的结果
  • 内置网格支持
  • 在单个Sketch文档中使用多个页面和画板
  • 简单的切片操作自动图像裁切
  • 使用图层样式轻松添加各种效果,比如填充,边框和阴影

我们网站的西蒙这几天的网页设计的工作基本上都是用Sketch完成的。看看这篇今年早些时候他写的关于Sketch的文章

LiveStyle:实时双向CSS编辑

Emmet LiveStyle是一个近乎神奇的全新浏览器插件,可以实现CSS实时编辑。

你可能听说过诸如LiveReload的插件,可以监控本地的CSS文件的更改。只要修改并保存了CSS文件,插件就会自动刷新浏览器,这样就可以直观展示修改的效果。

LiveStyle在此基础上更进了一步。启用LiveStyle之后,甚至不需要保存CSS文件!只要用文本编辑器对CSS文件做出修改,修改的结果立即会在浏览器上呈现,甚至都不需要重新载入页面。编辑操作甚至可以是反方向的,也就是说:在浏览器上通过元素审查来编辑页面CSS的时候,LiveStyle就会自动更新文本编辑器中的CSS文件。

你可以用这种方法编辑任何页面的CSS,哪怕没有CSS文件的本地拷贝,甚至CSS被压缩也可以!这里有个演示视频展示了如何使用LiveStyle来实时编辑Facebook和Google的首页。

这一切之所以能够实现是因为LiveStyle能够在结构层面分析CSS的变化,从而在浏览器和文本编辑器之间双向传递那些真正发生变化的部分。真的非常赞。该插件还处在公测阶段,而且暂时只支持Sublime Text编辑器。最终的付费版据称会马上到来,届时会支持更多的编辑器。

Bootstrap 3:对移动端友好的现代化前端框架

Bootstrap是一个最近广受关注的Web前端框架。Bootstrap最初由Twitter开发,现在是一个发展迅速的开源项目。

今年发布的第3版带来了一系列非常可爱的新特性,主要有:

  • 移动端优先 :你现在可以先为移动端设计网站,随后再将内容放大从而适配桌面端更大的屏幕。框架是完全响应化设计的,所以网站可以自动适配各种大小的屏幕。
  • 超赞的网格系统 :网格非常易于使用,而且对手机、平板电脑、桌面显示器以及超大桌面显示器都有相应的断点系统。
  • 可爱的可选主题 :默认情况下Bootstrap搭建出来的网站外观都不怎么样,现在你可以在一些超美的主题的基础上开发网页了。看看这些赏心悦目的色彩!
  • 全新的自定义程序 :使用自定义程序来调整Bootstrap的方方面面。现在可以根据自己的品味来构建自定义版本了。这一切都在浏览器中即时编译,可以直接下载到本地计算机让部署网站变得更简单。

我爱Bootstrap!现在让我从头搭建一个网站的话,它一定是我的第一选择。要进一步了解Bootstrap都能做些什么,不妨看看这些例子 。

Macaw:真正理解代码的图像编辑器

虽然网页设计师都应该对HTML和CSS略知一二,还有很多人更倾向于纯设计,而不是敲代码。如果设计工具可以利用设计师给的设计稿生成相应的HTML和CSS的话,生活会多美好啊。

诸如Firewords的众多图像编辑器已经可以直接输出HTML和CSS了,但是实际结果往往比较糟糕,HTML代码写得繁琐差劲,CSS类也没有语义可言。

用一下Macaw 吧。这是一款懂代码的设计软件,宣称可以在语义层面理解设计元素,其生成的HTML和CSS代码简洁易懂,非常接近前端程序员亲自编写的效果。

Macaw的杀手级特性包括:

  • 全局类 :将常用的风格保存成一个全局类。这样做的好处是只需要修改这个全局类,就可以轻松修改使用这个类的所有元素的风格。
  • 整合:Macaw的Alchemy引擎能够用最简洁、最高效的方式组织CSS选择器,从而生成精美、易于阅读的CSS代码。
  • 绝对定位转换为静态定位 :使用Macaw设计网页的布局就像使用绝对定位一样。Macaw通过合理使用margin, padding和float,自动将元素的定位方式转换为浏览器中的标准静态定位
  • 流式网格和响应式布局 :Macaw使用支持流式网格的可调整画布,可以设置响应式断点并据此调整CSS属性以适应不同的视见区宽度。
  • 输出风格指南 :Macaw可以自动生成一个风格指南页面,可以充分展示你的设计中使用的字体、颜色、网格和类。非常赞!

Macaw目前尚未发布,不妨先看看这个视频。值得一看!

Famo.us:顺滑的Web界面得以成真

我们最后要介绍的工具同样非常重要。Famo.us是一个出色的JavaScript渲染引擎,有望彻底改变web应用程序及其用户界面。从原理上讲,Famo.us绕过了浏览器渲染3D动画的传统方式,而是直接使用GPU,从而带来了超流畅、硬件加速的3D图像。

这样做真正的好处在于,这一切都是用JavaScript实现的。也就是说,JavaScript,CSS和DOM的强大功能触手可及。而这些对开发者完全是免费的(Famo.us公司主要通过和硬件厂商的合作来盈利)。Famo.us可以在众多浏览器上流畅运行,从现代台式电脑到iPhone 3GS无不如此,这一点令人印象深刻。

我觉得对于Famo.us的实际使用场景大家还有很多误解。从他们的演示来看,Famo.us好像是专门为创建3D图形(尽管是超光滑图形)而设计的,用来可以取代Flash。实际上它同样适用于2D界面,而我认为短期内这都会是Famo.us的主要使用场景。想想我们在iOS7上看到的那些有趣的、有触控交互动画的应用程序接口吧。下面这个视频(使用iPad)充分展示了这项技术的可能性。

https://www.youtube.com/watch?v=NdAvOE3SyrU

我已经迫不及待地期待开发者利用这项技术开发出流畅性可以和原生应用相媲美的web软件了。多么激动人心呀!

有什么让你惊喜的新技术吗?

有什么让你感到惊喜的新技术、新框架或者软件吗?或许本文介绍的一些技术你已经在用了?欢迎在评论区留下反馈。

 
 
 原文 via http://www.elated.com/articles/7-exciting-up-and-coming-web-technologies/
 
分享到:
评论
1 楼 嘟嘟哒哒 2015-12-17  
没有想到前端技术在将来会发展的如此自动化

相关推荐

    基于Python的Web技术

    基于 Python 的 Web 技术具有广泛的应用前景和潜力。Python 语言的优点,如简洁易学、开发效率高、可读性强等,能够满足各种 Web 开发需求。因此,我们建议采用 Python 作为 Web 开发的首选语言。

    大工论文 基于Web的分页技术的研究与实现.docx

    本文首先对实现分页技术的必要技术前提进行了概要介绍,即HTML、ASP、数据库等,这些都是实现分页必须要用的技术,同时也是当今众多Web技术使用比较普遍的技术。 HTML是超文本标记语言,是一种标准通用标记语言,...

    基于Java的Web开发技术.pdf

    因此,在Web技术发展过程中,Java技术的应用不仅有助于Web技术在数据处理方面的提升,还加快了Web技术的处理速度。 综上所述,Java技术在Web开发中的应用是非常广泛的。它不仅能够提供强大的数据处理能力,而且还...

    一种新型的Web页面标注技术.pdf

    目前有很多种Web页面标注工具,例如W3C的AMAYA浏览器、北京超星伟业公司的超星阅览器、Acrobat公司的AcrobatReader等,这些工具都可以实现对Web页面的标注功能。 然而,这些工具都存在一些缺陷。例如,标注信息的...

    基于Java技术的分布式异构数据库Web访问技术.pdf

    最后,文章提到了Web访问技术的实现,强调了Java技术在服务器端的应用能够充分发挥其优势,取代传统的技术手段,并与其他新型技术相结合,为基于Web的应用系统开发提供了坚实的基础,具有广阔的发展前景。...

    Web3D技术总结

    Web3D技术是一种将三维图形渲染和交互功能引入到网页中的技术,它使得用户无需借助额外的软件或插件即可在浏览器中体验丰富的三维视觉效果。随着互联网的发展,Web3D已经成为网页设计、游戏开发、虚拟现实应用等领域...

    基于SVG/WEB SERVICE的WEB监控技术在EMS中的应用.rar

    《基于SVG/WEB SERVICE的WEB监控技术在EMS中的应用》 在现代电力系统中,能量管理系统(EMS)扮演着至关重要的角色,它负责实时监控、调度自动化以及优化电网运行。随着信息技术的飞速发展,传统的EMS已经无法满足...

    web前端开发行业前景分析.docx

    HTML5 和 CSS3 是 Web 前端开发的最新技术,了解这两种技术对于 Web 前端开发非常重要。浏览器兼容也是一个非常重要的技能,懂 web 标准,熟练手写 XHTML 和 CSS3 并符合 W3C 标准,代码能兼容主流浏览器 Firefox、...

    使用Web技术实现文献管理

    综上所述,《使用Web技术实现文献管理》一文介绍了基于Web技术的文献管理系统在实际科研项目中的成功应用案例,该系统不仅解决了传统文献管理中的诸多问题,而且具有广阔的前景和发展潜力。随着技术的不断进步和完善...

    Web3D,WebGL,WebGUP,Web3D是一种利用Web技术创建和展示3D场景和模型的技术

    总之,Web3D技术结合WebGL为Web应用带来了丰富的3D交互体验,虽然学习起来有一定难度,但其潜力和广泛应用前景使得投入学习和掌握这项技术变得尤为重要。随着技术的不断进步,我们可以期待Web3D在更多领域发挥更大的...

    互联网上的三维技术:Web3D.pdf

    Web3D技术的发展前景虽然充满潜力,但也面临着一些挑战和问题。首先,网络带宽是Web3D技术的主要瓶颈。目前的网络速度虽然有所提升,如Cable modems和DSL连接的普及,但仍然不足以流畅地处理大容量的3D模型文件。...

    大学毕业论文-—基于xml的web查询技术研究.doc

    基于 XML 的 WEB 查询技术研究 本文主要研究基于 XML 的 WEB 查询技术,旨在解决当前 WEB 查询技术中存在的一些问题,如查询效率低、查询结果不准确等...本文的研究结果可以为 WEB 查询技术的发展提供有价值的参考。

    基于Web的信息技术网站开发与设计答辩ppt

    传统的教学方式无法满足学生的需求,基于Web的信息技术课程网站成为了一个非常有前途的选择。该网站可以为教师和学生提供一个便捷的学习平台,实现远程教学、在线学习、资源共享等多种功能。 系统总体结构设计 ...

    基于python的WEB数据挖掘技术实现与研究.pdf

    文章还指出了WEB数据挖掘技术在未来技术发展中的广阔前景,预测了它将进入更理想的状态,通过不同技术之间的相互结合,达到数据的高效定位和信息的安全、便捷传输。这些技术的结合不仅体现在数据采集和分析过程中的...

    web数据采集核心技术分享系列

    在Web数据采集的过程中,验证码是一种常见的安全机制,用于防止自动化脚本或机器人进行非法操作。要高效地采集Web数据,理解并能够破解验证码是必不可少的技术环节。本篇文章将探讨验证码的破解核心,主要关注如何...

    基于Web系统的大数据搜索技术的实现和优化.pdf

    本文提出了一种基于Web系统的大数据搜索技术,它通过利用Axios技术跨域请求后台数据,并将获取的数据存储在Web内存中。接着利用Element-UI组件库搭建用户搜索界面,将后台数据渲染到Web界面中,并通过KMP算法实现...

    Web前端开发技术以及优化方向.pdf

    同时,也需要不断地探讨和研究Web前端开发技术的发展方向,例如,探讨Web前端开发技术在物联网、人工智能、云计算等领域的应用前景和发展方向等。 Web前端开发技术是一个非常重要的技术领域,对于互联网技术的长期...

    Web页面中元素间交互技术研究.pdf

    随着Web技术的飞速发展,Web页面中的元素种类也趋于多样化。这些元素之间的交互是实现复杂Web应用程序的关键。 Web页面中的元素可以分为多种类型,如HTML、Java Applet、ActiveX控件等。这些元素之间的交互可以通过...

Global site tag (gtag.js) - Google Analytics