CSS 可以做很多事情,但开发者更习惯的是变量、常量和一般的更快速的语法,而 CSS 本身是不支持的。本文介绍了 10 个 CSS 预处理器,让 CSS 支持一些简单的编程语法。
Compass

Compass 是一个开源的 CSS 制作框架。
CSS Cacheer

这是一个很棒的 CSS 预处理器,让开发者可以制作插件,要求 PHP 以及 Apache (mod_deflate 和 mod_rewrite)
CSScaffold

CSScaffold是一款帮助CSS开发者快速进行开发的框架,使用PHP编写而成- Simple, but powerful !
不同于许多CSS框架,它必须依靠PHP与Apache的mod_rewrite来执行,但也因为需要这两种东西,让CSScaffold变得很神奇、很方便,写起CSS来又快又轻松!
Sass

Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码,易于组织和维护。
Less CSS

Less CSS 是一个使用广泛的 CSS 预处理器,通过简单的语法和变量对 CSS 进行扩展,可减少很多 CSS 的代码量。
Turbine

这是 PHP 爱好者的框架,提供最小化的语法、自动的 gzip 压缩以及多css文件的合并,修复跨浏览器支持问题等。
Switch CSS

Switch 是一个全功能的稳定的 CSS 预处理器,基于 Apache 和 mod_python 下运行,也提供命令行处理工具。
CSS Preprocessor

CSS Preprocessor 采用 PHP5 编写,有预处理器的常见功能,外,支持 CSS 表达式,如:margin-left: (200px * 3/2 – 10px);
DT CSS

DtCSS 是一个 PHP 脚本,用来对 CSS 文件进行预处理。DtCSS 可通过扩展 CSS 的特性来加速 CSS 编码。例如嵌套选择器、颜色混合等等。DtCSS 读取 CSS 文件并对特殊语法进行处理,然后输出标准 CSS。DtCSS 包含一个智能的缓存系统。
CSS PP

目前还是 alpha 版本状态,支持 PHP、Python 和 Ruby。
PHP的开源世界可谓相当精彩,其中大家也接触的不少著名的PHP开源项目,比如Drupal、Sugar CMS、Joomla等等,但在本文中,笔者将选取9个最新知名度不是太高,但可在某些方面很实用,目前还在发展阶段,很有潜力的PHP开源项目。相信各 位读者看了之后会惊叹:原来PHP还能干这么多事情。
1、PHP FOR Android
现在,iphone和Android大行其道,拥有它们已经成为一种潮流。而Android的市场份额也变的越来越大。
而现在除了可以用JAVA来编写Android应用外,还多了一种选择,那就是可以使用PHP去编写相关的Android应用了,这都要归功于一个开源 项目Php For Android(http://phpforandroid.net/)。它实际上是利用了另外一个开源项目Scripting Layer for Android(SL4A)( http://code.google.com/p/android-scripting/)提供的Android接口API去实现的,任何支持SL4A 的脚本语言(比如Javascript,Ruby, Perl,PHP,和Python)都能够通过接口直接跟操作系统打交道,编写应用。
如果想了解这个项目,可以阅读如下的这篇文章《Build Your First PHP for Android Application》。
2、PL/PHP
某些数据库任务涉及很复杂的逻辑计算,而不是简单使用几句SQL语句就可以解决问题。为了降低其复杂性,许多数据库的解决方案中提供了存储过程,它在一个子程序中封装了要完成任务的逻辑,这些子任何的功能其实就象PHP中的函数一样。
存储过程可以用相应的SQL去编写的,如微软的存储过程使用T-SQL,Oracle则采用PL-SQL。比如PostgreSQL数据库能执行由 C,C++,Java,Ruby,Perl,Python编写的存储过程,而有了PL/php 开源项目(https://public.commandprompt.com/projects/plphp/wiki),现在你可以使用PHP去编写 存储过程了。
当安装了PL/PHP项目后,你就可以在PostgreSQL下执行使用PHP编写的存储过程了,可以使用你熟悉的PHP语法,十分简单。
3、PHP-QT
PHP-QT项目(http://developer.berlios.de/projects/php-qt/)允许你使用PHP语言去编写实现QT 的功能,也就是说,可以使用PHP-QT去编写一些功能强大的桌面应用。所谓QT是一个跨平台的C++图形用户界面应用程序框架。它提供给应用程序开发者 建立艺术级的图形用户界面所需的所用功能。Qt是完全面向对象的,很容易扩展,并且允许真正地组件编程。
但有点遗憾的是,这几年这个项目的发展有点迟缓了,如果确实有兴趣的话,建议也去研究下PHP-GTK这个项目(http://gtk.php.net/)
4、Phuby
最近,Ruby核心团队成员Aaron Patterson完成了phuby,它可以在Rails应用下运行php应用程序。项目的地址在https://github.com /tenderlove/phuby,尽管项目主持人Aaron发布了几个视频去证明phuby能让php在Rails下运行,但实际上在Rails社区 中,估计phuby也只是一个实验品而已。
5、另外一个phuby
Sean Huber也发布了另外一个同名的项目,居然也叫phuby,但这个跟上面介绍那个是完全没任何关系的。项目地址在https://github.com /huberry/phuby。这个项目为php增加了几个有趣的功能,而只需要在php中设置include_path指向phuby的库位置就可以 了。虽然该项目还是处在比较初级的阶段,但其实它已经是综合了php和ruby的一些特点了。
6、Objective-PHP and Moka
Objective-PHP and Moka are two ambitious projects headed by Stephen Lerodiaconou. TObjective-PHP(https://github.com/stevegeek/moka)和Moka(https: //github.com/stevegeek/moka)这两个项目是由Stephen Lerodiaconou.带领研发的很有野心的项目,他们为PHP语言增加了Object-C语言和Cocoa framework(注:Cocoa是 Mac OSX操作系统开发语言)。它们项目中的文档宣称这些新特性能吸引原来的Capucchino开发者。
你可以观看这个视频(http://vimeo.com/9838953)去了解这两个框架。
7、Php-serial
你想通过编写php语言去操纵如视频,音频或计算机的串并口设备?现在是可以变成现实了。使用php-serial这个开源项目 (http://code.google.com/p/php-serial/),可以很容易地去实现。比如只需要调用deviceSet()方法,将串 口名传递进去就可以了,接着就可以使用简单的读和写的方法了,比如:
8、Apns-PHP
在苹果的操作系统3.0以上,你可以享受到苹果的推送信息的服务,简称Apple Push Notification Service(APNS),及时获得各类有用的资讯。
现在,你可以使用PHP去实现这个功能了,apns-php项目提供了这个功能,项目的地址在http://code.google.com/p /apns-php/,该项目的文档宣称APNS API在2010年的12月17日已经完成了,可以提供自定义提醒图片和本地化的按钮等新特性。
有一篇很好的入门导学文章指导你对apns-php的学习(http://blog.boxedice.com/2009/07/10/how-to- build-an-apple-push-notification-provider-server-tutorial/)
9、CFPropertyList
cocoa框架使用属性列表来管理序列化数据。这些属性列表可以通过Apple的如plutil等工具进行设置。然而有的开发者希望用他们熟悉的方式去管理这些数据,目前有不少开源项目可以实现这个目的,比如CFPropertyList就是其中之一,项目地址在:
https://github.com/rodneyrehm/CFPropertyList,它允许PHP开发者可以创建属性列表,之后发送到iPhone应用。
“^\d+$” //非负整数(正整数 + 0)
“^[0-9]*[1-9][0-9]*$” //正整数
“^((-\d+)|(0+))$” //非正整数(负整数 + 0)
“^-[0-9]*[1-9][0-9]*$” //负整数
“^-?\d+$” //整数
“^\d+(\.\d+)?$” //非负浮点数(正浮点数 + 0)
“^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$” //正浮点数
“^((-\d+(\.\d+)?)|(0+(\.0+)?))$” //非正浮点数(负浮点数 + 0)
“^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$” //负浮点数
“^(-?\d+)(\.\d+)?$” //浮点数
“^[A-Za-z]+$” //由26个英文字母组成的字符串
» Read More
Userfly
Userfly可以提供免费的网页访客动作记录服务。只需要在网页中添加一段简单的Javascript代码,就可以记录访客从打开该网页到关闭整 个过程中的动作。 Userfly能够记录的内容包括鼠标的移动、点击以及键盘输入等动作。下面这个视频很好的讲解了Userfly的使用方法和主要的功能http://userfly.com
免 费用户每个小时记录10位用户(10个IP)的动作。Userfly也提供收费服务,除了可以记录更多的用户外,还支持身份验证和网页加密。对于网站拥有 者来说,Userfly可以很方便的对用户行为进行检测和分析,通过A/B Testing等方法为网站UI/UE提供非常有价值的信息。但是对于很多网页访问者来说,如果知道他们所浏览的网页有这样的功能,可能就会敬而远之了。
点击这里马上体验
Mouseflow
mouseflow是一款在线分析工具,它能对访客的浏览习惯和鼠标操作行为进行跟 踪,从而获取人们对页面的关注范围和操作习惯,为你对页面进行优化提供了重要依据。它将汇总分析人们在页面上的鼠标操作动作,并以直观的“热区图”形式反 映出来。
打个比方:大家都见过baidu和google的页面热区图,从图中可以看出用户对于页面最点击最多,也就是最关注的区域。那么,如果你的站出 现在红、黄色区域中,将收到的点击次数也将是最多的。
在自己的站上分析出热区图数据,把访客最关注的内容放到热区范围内,形成对网站内容和布局层面的优化。我们就用mouseflow来完成这项工作。首先需 要在你的网站上部署mouseflow跟踪代码。去http://mouseflow.com注册,然后添加需要进行鼠标动作跟踪的网站之后就能得 到跟踪代码,把它部署到你网站中。然后mouseflow就可以为你记录鼠标动作了。但给出分析数据需要等几个小时的时间。当然,时间越长,记录的鼠标数 据也越多,分析出来的数据也越准确。等待几天后再登陆mouseflow,就可以看到mouseflow详尽的统计数据了。点击View stats,可以查看网站的状态数据。mouseflow可以为免费帐户每月保存并分析100条操作数据。在这个页面里还有:页面浏览量、平均访问深度、 平均访问时长、web页面情况、最流行页面、最热页面等统计数据。便于对网站的整体情况有一个大致了解。
接下来是查看跟踪记录。在这个页面中我们可以查看到访客情况信息。如访客的地理位置,来源链接,进入页面,浏览页面量,停留时间,浏览器等。最 酷的是,点击绿色播放按钮,还可以回放某访客在你页面上的每一次鼠标操作动作。看看他在浏览你的页面时做了怎样的操作。比如鼠标在哪里点击了,并且完整地 回放是怎样浏览你的页面的。
然后就是重点中的重点了:热区分析。mouseflow可以分析你的每一个页面数据。比如一个页面的的鼠标点 击热区,以及视觉热区,红色为热,蓝色为冷。
ClickTale
ClickTale是一家国外的免费网站统计服务网站,但ClickTale并不以流量统计见长,它是对你的网站访客浏览行为进行分析的一个工具, 以类似视频的方式将访问者在你的网站上进行的操作全部记录下来,你可以在线观看也可以下载到电脑上。利用ClickTale的访客行为视频记录,可以帮你 更好的布局你的网页,给访问者带来更好的用户体验,以使你的网站回头客越来越多!有点类似Free8之前介绍的CrazyEgg,不过ClickTale 提供的是访客动态行为记录,CrazyEgg提供的是网页热点分析图像,各有所长,可同时使用,相互参考。
网址:http://www.clicktale.com
好东西,备用,原文:http://www.cssrain.cn/article.asp?id=1457
俗话说,“工欲善其事,必先利其器”。对于前端开发工程师来说,基于Firefox丰富的Web开发辅助插件无疑就是最好的利器。下面就与大家分享24款武装Firefox的Web开发插件。
开发工具
1. Web Developer 1.1.8
https://addons.mozilla.org/en-US/firefox/addon/60
以工具栏的形式对网页的(X)HTML、脚本、多媒体、CSS、缓存、图象等多方面的实用工具。使我们能轻易的获得网页的更多信息,使我们进一步的了解当 前所浏览的网页。
说明:超强的web分析工具,开发人员必装。
2. Firebug 1.5.0
https://addons.mozilla.org/en-US/firefox/addon/1843
Firebug是firefox下的一个插件,能够调试所有网站语言,如Html,Css等,但FireBug最吸引我的就是javascript调试 功能,使用起来非常方便,而且在各种浏览器下都能使用(IE,Firefox,Opera, Safari),简直难以置信。除此之外,其他功能还很强大。比如html,css,dom的察看与调试,网站整体分析等等。总之就是一整套完整而强大的 WEB开发工具。
说明:查看,编辑,Debug页面的CSS,HTML,JavaScript。超强的开发调试的工具,开发人员必装。
3. LinrLightWeb 0.2.1
https://addons.mozilla.org/en-US/firefox/addon/14068
安装前,请确认您已安装Firebug插件,获取Firebug请访问:http://getfirebug.com/
1. 开启网页编辑模式,随意编辑网页——Fiddler的好搭档;
2. 超强Selector,查找操作标记;
3. 刷新CSS,无需刷新整页;
4. 快速设置CSS Sprites背景,鼠标拖移即可得到位置;
5. 保持登录状态,Session不过期;禁用
6. 同步发行IE版,Chrome版。
说明:非常强的web开发工具。
更多基于firebug的插件可以参考这篇文章:用来武装Firebug的十三款Firefox插件
4. View Source Char 2.7
https://addons.mozilla.org/en-US/firefox/addon/655
画一个 Color-Coded 的图表的 Web 页的源代码。
说明:显示非常好看的源码, 分级缩进, 不同颜色区分。
5. Tamper Data 11.0.0
https://addons.mozilla.org/en-US/firefox/addon/966
Tamper Data 的真实含义,即“篡改数据”(或者说定制 HTTP 请求):截取浏览器发出的每一个 HTTP 请求,提示我们选择是要进行定制,还是不做定制而直接提交请求,还是终止当前被截取的请求,然后根据我们的选择决定是打开定制窗口,还是直接向 WEB 服务器提交请 求,还是终止当前的请求。
说明:查看 firefox 收发请求的 header, 特别是在发出请求前, 可以修改 header。
6. JavaScript Debuger 0.9.87.4
https://addons.mozilla.org/en-US/firefox/addon/216
Venkman 作为Mozilla的调试器,是针对Mozilla(Firefox)的自由工具
说明:firefox 环境下的 JavaScript Debugger, 强大的脚本调试工具。
7. Live Http Headers 0.15
https://addons.mozilla.org/en-US/firefox/addon/3829
可以用来实时监测发起的http请求和响应,也可以修改请求参数之后重新发起请求。
说明:浏览页面同时记录所有 HTTP headers 。
8. Add N Edit Cookies 0.2.1.3
https://addons.mozilla.org/en-US/firefox/addon/573
查看和修改本地的Cookie,Cookie欺骗必备。
说明:查看并且修改 cookies, 不方便的地方是显示所有浏览器的 cookies 而不仅是当前页。
9. XPath Checker 0.4.1
https://addons.mozilla.org/en-US/firefox/addon/1095
这个工具没什么好多说的,就是安装后可以直接用,在网上看了使用方法,开始没看明白,后来才知道是在页面上点鼠标右键,下面有个view xpath,点击就可以了。
说明:据说可以调试 XPath。
10. YSlow 2.0.6
https://addons.mozilla.org/zh-cn/firefox/addon/5369
YSlow分析网页,并提出如何提高其性能的基础上一套规则,高性能的网页。
说明:能够帮我们分析web页面比较慢的原因,它是基于 Firebug的,也能分开浏览web页面的元素,比如js,css.
HTML验证
11. HTML Validator(based on CSE HTML Validator)1.2.3
https://addons.mozilla.org/en-US/firefox/addon/887
HTML Validator是一个Firefox扩展,它能查找并标志出HTML页面上的错误。HTML Validator以Tidy为基础,Tidy最初是W3C为验证HTML代码开发的一个工具。
说明:著名的 CSE HTML Validator 引擎。
12. Relaxed the HTML Validator 0.9.5
https://addons.mozilla.org/en-US/firefox/addon/3939
Relaxed the HTML Validator 0.9.5 这是一个做html验证的小插件,可以很容易的检测出页面的错误的html代码。
说明:直接在当前页面上进行 HTML validation, 界面清晰直观。
13. Total Validator 6.2.0
https://addons.mozilla.org/en-US/firefox/addon/2318
这软件帮 助你检查你的网页是否符合标准,结果将帮助你迅速地解决问题。
说明:把当前页面在 http://www.totalvalidator.com 做HTML Validation,输出结果用红字进行了语法修正, 比较友好。不过由于通过其他网站验证, 速度有点慢, 并且结果不易保存。
页面设计
14. MeasureIt 0.3.92
https://addons.mozilla.org/en-US/firefox/addon/539
通过可以绘制在页面任何地方的刻度尺来显示以像素(px)计算的宽度、高度、元素缩进量。
说明:可以测量页面上任何选择区域的长宽, 对界面设计人员非常有帮助。
15. ColorZilla 2.0.2
https://addons.mozilla.org/en-US/firefox/addon/271
利用ColorZilla 您可以从浏览器中的任一点读取色彩值,快速调节颜色并粘贴到其他应用程序。您可以缩放正在查看的页面或测量页面任意两点之间的距离。
说明:从 页面, 或者调色板上取色, 同时可以缩放页面。
SEO广告
16. RankQuest SEO Toolbar 3.9.2
https://addons.mozilla.org/en-US/firefox/addon/1471
检查网站在搜索引擎和alexa的状态
说明:SEO 工具插件, 访问一个页面时, 显示此页面的各种排名及 SEO 信息。
17. Adsense Preview 1.5
https://addons.mozilla.org/en-US/firefox/addon/2132
将谷歌广告放到你的网页上
说明:在当前页面上显示 Google ADs 帮助确定广告位置。
其他工具
18. HackBar 1.4.2
https://addons.mozilla.org/en-US/firefox/addon/3899
包含一些常用的工具。(SQL injection,XSS,加密等)
说明:快速对字符串进行各种编码的工具, MD5, Base64, URLencode, URLDecode。
19. Document Map 0.6.1
https://addons.mozilla.org/en-US/firefox/addon/475
显示当前页的标题结构中侧栏让之间快速导航…
说明:提供页面资源结构信息.。
20. IE View Lite 1.3.5
https://addons.mozilla.org/en-US/firefox/addon/1429
IE View 简装版,将选项集成到了右键关联菜单中,同时增加了一个工具栏按钮。
说明:点右键可以选择在 IE 中打开页面, 有助于跨浏览器调试。
21. TimeStamp Converter 2.0.0
https://addons.mozilla.org/en-US/firefox/addon/2063
将转换日期和 timestamps.Context 菜单选项将所选的时间戳转换为日期。
说明:除去从上下文中转换, 还可以手动将 timestamp 时间戳与 date/time 转换。
22. TimestampDecode 0.1.8
https://addons.mozilla.org/en-US/firefox/addon/3208
将所选的编号视为一个时间戳并显示一个已解码的日期/时间。
说明:将选中的数字作为 timestamp 时间戳转换为 date/time。
23. Fire Encrypter 4.0
https://addons.mozilla.org/en-US/firefox/addon/2063
说明:将文字加密成各种算法的密文, 甚至包括摩尔斯码。
24. Add-in-one Sidebar
https://addons.mozilla.org/en-US/firefox/addon/1027
全方位多功能侧边栏。
说明:在浏览器左侧增加打开书签, 历史, 插件等的工具条。