什么是前端

今天看了一篇关于前端的诠释,前端们可以对照一下自己都具备了哪些,呵呵,原文如下: 随着互联网的迅猛发展和普及,一个新型的行业和新兴的职位正在上升到技术的层面:web前端开发工程师。 Web前端开发工程师,主要 职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。制作标准优化的代码,并增加交互动态 功能,开发JavaScript以及Flash模块,同时结合后台开发技术模拟整体效果,进行丰富互联网的Web开发,致力于通过技术改善用户体验。 工程师的职责 为网站上提供的产品和服务实现一流的Web界面,优化代码并保持良好兼容性    Web前端表现层及与前后端交互的架构设计和开发    JavaScript程序模块开发,通用类库、框架编写    利用各种Web技术模拟开发产品原型    配合后台开发人员实现产品界面和功能    Web新技术调研和资讯整理   精通HTML/XHTML、CSS,熟悉页面架构和布局,对Web标准和标签语义化有深入理解    精通Ajax、JavaScript(或者ActionScript)、DOM等前端技术,掌握面向对象编程思想    熟悉一种以上后台开发语言(如PHP/Java或C/C++/.NET)以及一种数据库(如MySQL/Oracle) web前端开发工程师需要长期的web开发经验 例如: 对Web技术创新及丰富互联网应用开发(Rich Internet Applications)有浓厚兴趣    对用户体验、交互操作流程、及用户需求有深入理解 工程师要掌握的基本技术 对常用的一些JS框架了解,如Jquery、jast等。   会最基本的JS计算方法编写。   对目前互联网流行的网页制作方法(Web2.0)DIV+CSS,以及各大浏览器兼容性有很大的了解。   对前沿技术(html5+CSS3)等的了解

IE浏览器版本的判断语句简述

各浏览器2012年1月市场份额比例

很多人想必都被IE给坑了N多年,虽然现在Microsoft已明确放弃IE6,可是对于中国的市场占有率实在是让人不得不汗颜,截至2012年1月份国内主浏览器市场份额排行榜,IE6的份额仍居高临下。 OK,进入主题,对于项目的分析,可能我们需要考虑更多的迎合IE6的潜在用户人群,所以大部分时间苦逼的前端都会尽各种hack方法去兼容各主流浏览器名加可恶的IE6以及IE一系列,尽力把项目完美的呈现给用户。[致敬] 首先我们来了解我接下判断语句中不可或缺的5个元素: lte : 全称为less than equal to,中译为 小于或等于; lt : 全称为less than, 中译为 小于; gte : 全称为greater than equal to, 中译为 大于或等于; gt : 全称为greater than ,中译为 大于; ! : 非,这个大家懂的。 有了这些,下面我们就可以自由的兼容特定的IE浏览器了。 下面以CSS样式表为例: 1、不在IE6下显示 2、小于等于IE6 3、小于IE6 4、等于IE6 以此类推大于等于、大于…[此处省略] …

继续阅读 »

使XAMPP支持运行ASP.net程序

windows支持方法如下 1.下载并安装aspdotnet http://sourceforge.net/projects/mod-aspdotnet/ 2.进入xampp\apache\conf\extra 修改httpd-xampp.conf “/My Dropbox/xampp/htdocs/” 为apache配置的文件目录 把下面这段代码添加在里面 注意插入点必须在完整的标签之外,建议在 Alias /licenses “C:/xampp/licenses/” Options +Indexes DirectoryIndexTextColor “#000000″ DirectoryIndexBGColor “#f8e8a0″ DirectoryIndexLinkColor “#bb3902″ DirectoryIndexVLinkColor “#bb3902″ DirectoryIndexALinkColor “#bb3902″ 这个代码块之后。作者尝试过放在前面,结果访问http://localhost/时出现HTTP-403错误。 #asp.net LoadModule aspdotnet_module “modules/mod_aspdotnet.so” AddHandler asp.net asax ascx ashx asmx aspx axd config cs …

继续阅读 »

Ajax Post数据加号变空格

今天同事通过ajax方式post交互数据,结果发现数据里所包含的”+”被和谐了,全被过滤替换成空格“ ”,经谷歌一番解决问题。 分析原因: 采用Ajax传递数据(BASE64编码)时,通常会将数据整理为data=”var1=abc&var2=def”。而当数据中存在加号(+)或是连接符(&)时,服务器端接收数据时会有部分数据丢失现象。 分析一下Ajax传递数据的格式与Javascript的语法不难发现: 1. “+”号:JavaScript解析为字符串连接符,所以服务器端接收数据时”+”会丢失。 2. “&”:JavaScript解析为变量连接符,所以服务器端接收数据时&符号以后的数据都会丢失。   解决方法(只需要为+与&符号编码即可): //使用post方式发送 function doRequestUsingPOST() { createXMLHttpRequest(); var retCode = document.getElementById(“retCode”).value; var data = document.getElementById(“data”).value; data = data.replace(//+/g, “%2B”); data = data.replace(//&/g, “%26″); var queryString = “retCode=”+retCode+”&data=”+data; var url=”backSealServlet” ; //使用URL向后台传值 …

继续阅读 »

【W3 Total Cache】WordPress缓存插件详细配置流程

当你的访问数达到一个量的时候,内存会极具上升,如果不加以限制很容易拖垮整台服务器,为了减轻服务器压力,提高WordPress的“适应性”,老手会建议大家安装缓存插件。下面介绍的是W3 Total Cache,比super cache更好的缓存插件。   首先进入你的WP后台,安装插件,可以搜索W3 Total Cache: 点击“现在安装”,然后启用插件。 然后去插件设置 关闭预览模式(测试模式)。 开启以下 一般情况下,使用Disk缓存类型即可,在下拉框里会显示你可选的缓存类型 灰色的表示不可选。 其他类似CDN设置,如果你使用了CDN服务,可以咨询CDN服务商应该怎么设置,不同的CDN设置是不一样的。 设置以上信息之后 保存所有设置即可。 你也可以到子选项进入一些微调 取决于实际需求。 完成之后清理下缓存即可。 然后退出你的WP登录。 回到首页,打开源码查看 出现这些信息表示缓存成功。

【深入分析】Windows 8 消费者预览版

如果大家还有印象的话,Windows 初期的日子并不太光彩。做为架在 DOS 之上的一套软体,它和底下的作业系统是有些脱节的,仿佛随时会从上面垮下来一般– 事实上,这倒还真的蛮常发生的。早年的 Windows 经常要求使用者随着软体的不同,从 GUI 跳到命令列,再跳回来,并不是每个软体都能好好地和 Windows 相处。 早年的 Windows 经常要求使用者随着软体的不同,从 GUI 跳到命令列,再跳回来,并不是每个软体都能好好地和 Windows 相处。 这个情况自 Windows 95 开始改善,经过多年的努力,终于完全摆脱了之前的叠床架屋,让 Windows 成为了唯一且完整的使用环境。为什么现在又开始翻这些老黄历呢?因为 Windows 8 的消费者者预览版又让我们好像又回到了当年那个时代– 虽然 Windows 8 可以说是微软最先进、最现代化的一个作业系统,但却让人觉得里面其实有两个不一样想法、不一样逻辑的系统挣扎着想共存。到底两者能不能手牵手一起迎向未来?接下来看我们的分析吧! 测试配备 我们用的是什么测试配备,想必大家都是想知道的,所以这里先交待一下:软体用的是 Windows 8 消费者预览版,Build 8250 — 目前是最新的(或许也是最好的)一代 Windows …

继续阅读 »

史上最牛逼JS 解决IE6中png图片透明

透明png

直入主题,有图有真相,请看使用JS文件前后png图片效果 下面我们来看看具体操作步骤,首先我们在当前页面里写入如下代码: [codebox 1] 其中src:”…“ 标红处为文件路径(你所存放的绝对or相对路径), DD_belatedPNG.fix(‘.imgs img‘) 标红处为png图片的选择器。 接下来贴上dd_belatedpng.js代码: [codebox 2] 传说中滴 Demo 下载

CSS属性之cursor

记录着每一个足印 有时我们为网页元素定义光标样式时需要用到cursor属性来改变用户浏览器默认的设置,比如你想在没有链接的图像上显示手形……以下为css手册中的说明: cursor设置或检索在对象上移动的鼠标指针采用的光标形状。 此属性的值可以是多个,其间用逗号分隔。假如第一个值不可以被客户端系统理解或所指定的光标无法找到及显示,则第二个值将被尝试使用。依此类推。假如全部值都不可用的话,则此属性不会发生作用。光标不会被改变。 这次我研究两个均用于显示手形的属性值:hand和pointer 很早就知道hand是非标准的,借此机会测试一下,并研究“属性的值可以是多个,其间用逗号分隔”这句话的含意。 测试浏览器:IE5.5、IE6、IE7、Opera9.02、Firefox2.0.0.1 cursor: hand; 结果:除Firefox显示默认光标样式外其它均显示手形。 cursor: pointer; 结果:除IE5.5显示默认样式外其它均显示手形。 cursor: hand; cursor:pointer; 结果:除IE5.5显示默认样式外其它均显示手形。 cursor:pointer; cursor: hand; 结果:都显示手形了。 cursor: hand, pointer; 结果:都显示默认样式,即都不起作用。 cursor: pointer, hand; 结果:都显示默认样式,即都不起作用。 cursor: url(cursor.cur), hand; 结果:Opera显示默认样式,将光标图像换成ani格式也一样。由于url()是IE6以上的IE版本支持的,所以IE5.5显示的也是默认样式。其它浏览器在cursor.cur文件存在的时候显示该光标文件,不存在则显示手形,换成ani格式的文件后Firefox只显示手形。 综上所述,Firefox不支持hand值,不支持ani格式的图像,但支持cur格式的光标图像; Opera支持hand,但不支持cur或ani格式的光标图像(注:.ani是动态效果文件;.cur是静态效果的指针文件); IE6、IE7均支持 hand 和 pointer , …

继续阅读 »

【思维导图】前端工程师应该关注什么

前端工程师关注点

浅析DOCTYPE定义

<!doctype>至HTML5已被大大的减肥了,在HTML5文件首行你将只看见<!doctype html>简简单单一行,因此引起了很多人的质疑,因为在HTML4.0时的定义相比要“标准”很多很多,如:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>,那么这些臭长臭长的定义的意义何在呢?请接着往下看。 text/html内容类型模式的文档的渲染模式基本是怪癖模式(Quirks Mode)、标准模式(Standards Mode)、准标准模式(Almost Standards Mode),当然还有application/xhtml+xml内容类型的模式(XML模式)和非Web模式(Non-Web Modes)。现代浏览器使用doctype嗅探来决定text/html文档的引擎模式,这意味着模式的选择是基于HTML文档开始的文档类型声明,而不适用于XML文档。 在W3school里是这样定义的,doctype 声明不属于 HTML 标签、tag, 它是一条指令,告诉浏览器编写页面所用的标记的版本。在所有 HTML 文档中规定 doctype 是非常重要的,这样浏览器就能了解预期的文档类型。HTML 4.01 中的 doctype 需要对 DTD 进行引用,因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML,因此不需要对 DTD 进行引用,但是需要 …

继续阅读 »