注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

Web前端开发技术汇总 【转】  

2012-06-05 17:23:56|  分类: web标准 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

之前写的一篇很粗浅的《做网站都需要学什么》,分享了一点经验和我个人的理解,不足之处还望朋友们多提意见,今天刚刚读到一份Web前端开发技术的列表,就是网页设计和开发人员需要掌握的技术,但只是简单的罗列,我觉得很有些参考价值,所以转过来,并附上简单的介绍,以供朋友们选择和借鉴。


什么是Web前端(Front-end)开发?

Web开发分前端(Front-end)和后端(Back-end),后端指的是程序、数据库和服务器层面的开发,而前端指的则是直接与用户接触的网页,比如布局、特效、交互等等,前端和后端就好比舞台上的演员和后台工作人员。

HTML、CSS、JavaScript这些常见的名词都属于前端范畴,以及平面设计、美工、搜索引擎优化等也是这一类的。随着网站开发行业的发展成熟,各领域的划分也越来越明确和细致,传统的掌握Dreamweaver就能做网页的认识已经不能适应当前和未来的趋势,那么作为一名前端人员,就应该掌握更多、更有针对性的技术和知识。

Web开发技术种类繁多,而且层出不穷,选择恰当的语言和技术不仅能提高效率,也可以更好的适应未来的发展。


Web前端开发技术汇总
XHTML / HTML5
网页的骨骼,基础标记语言,用于定义网页元素类型和之间的关系。HTML5是HTML的一个版本,但因为加入了许多新特性加之业界的广泛关注和支持,现在已经成为下一代Web技术的核心概念。
CSS2.1 / CSS3
网页样式标记,用于定制外观表现。
JavaScript / Ajax
网页上的编程语言,用于定义元素和浏览器行为。Ajax本身不是语言,而是三者的融合。以上三项是开发人员必备的技术。
jQuery
最著名、应用最广泛的JavaScript库,简化JS操作、提高效率。
HTML5 Boilerplate
HTML5 Boilerplate是一个基于HTML5/CSS/JS的快速、健壮且适应性强的模板,主要解决开发效率和兼容性等Web常见问题。
Modernizr
Modernizr和jQuery一样也是一个JavaScript库,但主要用于创建HTML5和CSS3网站,确保新技术的实现。
YUI Library
来自雅虎的JavaScript库,用于创建高级交互界面。
面向对象的CSS
可能让你感觉很奇怪,因为CSS并不是编程语言,但它确实存在。
CSS网格布局
其他的同类选择还有960.gs和blueprint等。
CSS 框架/重置
CSS框架可以理解为CSS版的jQuery,都是为了提高开发效率,刚才提到的960gs和bluerpint都属于CSS框架。重置就是在开始应用样式之前设定一些基础属性,便于后面的控制和管理。
渐进增强/平稳退化
这里有篇文章可以解释: http://ued.taobao.com/blog/2008/10/09/understanding-progressiveen-hancement-chs-translation/
HTML和CSS的W3C标准
用户体验和可用性
这不是技术,而是说你应该学着把网站做的更好用。
网站速度优化
学习如何提高网站速度。
调试工具
如Firebug、Web Developer等,两个都是Firefox插件。
Dojo / MooTools / Prototype
与jQuery同类的JavaScript库,但用途不尽相同。
Responsive Web Design(适应性/响应性/弹性网页设计)
这个词的翻译还没有最终确定,指的就是一种布局可以适应多种浏览器窗口和分辨率,而不是之前流行的为不同环境创建不同的界面。
移动Web开发
主要针对智能手机和平板电脑等移动设备和系统。
移动Web性能。
跨浏览器/跨平台开发
访问你网站的用户可能使用各种浏览器、设备和系统,都要保证正常运行和现实。
文档对象模型 (DOM)
DOM是一种将HTML文档作为树状的对象结构的编程接口,DOM主要还是和其他技术比如JS结合使用。
跨浏览器的bug和兼容问题
如果你不是第一天学Web的话,相信很快就能反映过来,这一条是指着IE说的。
CSS预处理
常见的有SASS和LESS,主要是简化CSS编写,提高效率,并且还可以运用变量等CSS没有的特性。两个网站上的代码一看就知道怎么回事了。
版本控制
版本控制主要应用于团队开发,多人同时编辑一个文件或项目时可以有效避免冲突。常用的工具有Git / GitHub / CVS / Subversion等。
HTML5 API
HTML5两大块内容,一个语义化标签,纯粹是HTML4的升级版,再一个就是时下广为传颂的API。当你听说某某站是一个HTML5网站,那么它很可能就用了HTML5 API。
面向对象编程
这里更多指的还是面向对象的理念和思维方式。
后台语言/技术
虽然前端不必精通后台开发技术,但你懂的越多,就越容易与后台人员沟通、协作。
MySQL
最流行的网站数据库,与PHP是黄金搭档。
可访问性
也有翻译成可用性的,但与好用不同,这一条指的是应该考虑哪些感官有障碍的用户,比如视觉/听觉上不太好、色彩辨析能力不太好的等等,让他们也尽可能地使用网站。
WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Applications)
很多网页会利用JS等技术动态生成内容及交互操作,这不仅对搜索引擎不友好、对上面提到的感官有障碍需要依赖解析器的用户也不友好,WAI-ARIA就是为了解决这类可用性问题而制定。
微数据/微格式
微格式是利用HTML标签的属性来渗透一些具有特殊意义的值,比如<div class=”tel”>,很简单的一个类定义,而对于微格式来说,这个标签里的内容就是一个电话号码(telephone),而不支持微格式的浏览器则正常作为class来处理。
HTML5/CSS3 Polyfills
Polyfill指的是一段代码或一个插件,作用是让那些老版本的浏览器支持它本来不支持的特性,比如让IE通过Silverlight模拟<canvas>等,可以认为是一种逆向增强。
CMS
内容管理系统,如WordPress、Drupal和Joomla!等,国内的还有dede、ecshop等,论坛程序也属于CMS。CMS就相当于网站的操作系统。
功能性的编程
这个意思就是前端人
数据格式
XML、JSON等
国际化/本地化
通俗的说就是支持多国语言和使用习惯。
内容策略
为网站开发项目制定的适用于所有内容编辑(创建、传播和管理)的策略。
离线Web App
正则表达式
.htaccess基础知识
用于配置Apache服务器。
SVG
一种可用于网页的矢量图格式
图形图像软件
Photoshop、Illustrator、Fireworks等。
Web字体
中文意义不大。
SEO基础知识
搜索引擎优化。
  评论这张
 
阅读(3346)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017