MoreCSS: 用CSS来运行JS


MoreCss是一个很小的JavaScript库,可以让你创建各种网页效果,比如弹出效果,Tab选欺项菜单,表格并且拥有斑马风格,最特别的是,你可以在引用MoreCSS.js以后,在外部样式表里面用CSS代码的写法来定义这些效果事件。比如我们看下面这段代码:

a {  target:popup;  target-width:640px;  target-height:640px;  }

调用了morecss.js以后,上面这段代码将可以让你的链接在你一个640 × 640像素的窗口中打开。这的确让人惊喜,查看MoreCss,看看它还能实现多少特别的效果。
 

Linux杂志

今天突然想起来先看一下Linux的杂志于是乎在网上搜,搜了老半天也没找到很多,国内的Linux发展还是很欠缺的。
我找到的Linux杂志:(停刊的没有在下面的列表)

Linux+     一本国外的Linux杂志,听说内容很详细,是本不错的Linux杂志,国内没有发行!       http://www.lpmagazine.org/en/

开源           Linux宝库的电子版Linux杂志                                  http://bbs.linuxpk.com/forum-101-1.html
Linuxer      这也是过你的Linux杂志                                          http://www.linuxer.cn/
LinuxPilot    http://www.linuxpilot.net.cn/
停刊的Linux杂志:
《开放系统世界》   也是一本Linux杂志,也不错。

做Linux杂志不容易,支持这些在Linux杂志。
 

Slackware Linux-12


Slackware Linux 已于4月4日释出了新的 12.1 RC1 版以供其用户测试。此版本采用 Linux 内核 2.6.24.4,并包含 glibc 2.7 和 GCC 4.2.3。其默认桌面环境使用 KDE 3.5.9,带有 xorg-server 1.5 开发版、Firefox 2.0.0.13、Apache web server 2.2.8 等等。

Slackware Linux 12.1 RC1 也解决了 CUPS 的安全问题,并包含其他一些次要的更新。更加详细的更改内容可以查看这里。如果你对 Slackware Linux 12.1 RC1 的测试感兴趣,那么可以到这里下载 CD 或 DVD 安装映像
 

网站开发和设计者需要注意的10个问题

写在前面

我也是个Web开发者,看到这篇文章,挺有感触Chrys Bader,这篇文章适合已经学习过相关网站设计的朋友,以及正在从事此项工作的开发者,看一下这些,开发时注意以下这些东西,你的Web将会更加符合Web标准,也会使你的Web更受欢迎,当然也包括搜索引擎。

作者:Chrys Bader
翻译:htmlor

1. 使用Firefox

Firefox是你触手可及的最重要的平台,网站开发时必不可少。并不是说你非得把它作为默认浏览器――平时上网时,你想用哪个都行。

自Firefox问世,就有一些居家旅行必备扩展随之产生。如果你想事半功倍立竿见影,快用它们。
必备扩展

Web Developer (Chris Pederick)

这个扩展有很多功能,虽然多数已被FireBug(下文会谈到)涵盖,还是有一些颇为好用的。其中包括:

   * 缩放浏览器窗口
      简单迅速的缩放窗口,800×600、1024×768… 任何指定的尺寸。使用此功能,可以查看各种分辨率下网站的表现。到你的Google Analytics帐户里看看哪种分辨率的访问者最多吧,然后重点为它设计。(FireBug没这个功能)
      My Visitors' Resolutions
    * 编辑CSS/HTML无需刷新
      使用此功能,不必刷新页面即可修改CSS,并将结果实时呈现于页面。太节省时间了。(Firebug里有类似功能,但没这么方便)
      (htmlor注:靠,用了这么久居然都没发现这个好东西,真是太逊了~)
    * 查看页面加载的所有Javascript
      使用此功能,可以在一个页面内查看所有已加载的JS。查看自己或别人的JS代码,方便的很。(Firebug能显示出所有JS名称,但代码没有摆在一起,不方便查询)
    * 查看生成的源代码
      如果你有用AJAX或者Javascript改变页面内容,此功能绝对实用。因为通常的“查看源文件”模式下,是看不到动态生成的HTML代码的。(Firebug也有此功能)

Firebug (Joe Hewitt)

在办公室里,我们常常会问:“还记得没有Firebug时怎么过么?”它确实改变了我的生活。其主要好处如下:

    * 检阅DOM
      点击“Inspect”,然后鼠标放到页面元件上,就能看到此元件的HTML和CSS代码。
    * 显示样式继承的实时CSS编辑
      简直就是钱啊――这大大节省了布局设计的时间。例如,在Firebug 里可以选择一个DIV标记,点击margin属性后手工调整,上下键为加减1个像素,上下翻页键为加减10个像素。(htmlor注:任何数值属性都可以这样调整)还可以在当前样式添加新属性。效果满意之后,再把修改的CSS代码贴到实际文件中去。
    * 详尽的Javascript调试
      这里的JS控制台比Firefox自带的稍好。它更详尽,是默认控制台不错的替代品。
    * 查看页面加载的所有文件及总字节数
      对于优化站点加载时间来说,这很关键。你可以测试单个文件会加载多久,图片,JS文件,AJAX调用等。在“Net”部分的最后一行,可以看到页面加载文件的总字节数。

2. 保持兼容性

保持跨浏览器的兼容性很重要。对我来说,这是不怎么好玩的一件事。我之前说过最好在Firefox下开发,但也别忘了检查一下页面在IE6、 IE7、Safari(或者还有Opera)中的表现。还有,到Google Analytics里看看你的访问者都用什么浏览器。他们用哪些,你就得重点照顾哪些。

My Visitors' Browsers

在自己网站的Google Analytics帐户里,我亲眼目睹了IE6占浏览器比例的下滑,持续下滑。等到哪天它跌破5%时,我会开个party庆祝一下――因为再也用不着支持它了。

想要不那么费事的实现兼容,那就简单一点。比如你为了某种效果在一个浏览器里百般调试、费尽周折,它却很可能在另外的浏览器里不好好表现。这就要说到下一建议:少即多。

3. 少即多

把握好分寸。图形设计,编程,页面布局,任何事情都需如此。简单一点。

    * 图形设计
      现在有一种滥用渐变、斜角和阴影的态势。有时候事情如果没搞好,很可能是东西太多了。简简单单、大方得体就好。
   * 花哨的Javascript
      用一些很酷的JS效果增强用户界面很好,不过另一方面,它会造成用户的负担,尤其是那些没有像你一样拥有超级电脑的用户。此外,还有跨浏览器不兼容的麻烦。再强调一次,不要对JS倚重太过,什么事都靠它。如果实在想用JS,我强烈推荐jQuery

4. Javascript?就用jQuery

Javascript用来显示/隐藏信息很棒,它让页面空间开阔,不会挤成一堆。想以一种更新更酷更简单的方式操控JS?一定要试试jQuery
jQuery

jQuery的主要优点之一:兼容性已广受各大浏览器的考验。也就是说,其所有方法都能保证正常运行。优点之二:极其易用。

jQuery使用CSS的选择器操作对象,让你随心所欲的控制它们,一切尽在掌握。例如:

隐藏id为myDiv的DIV里所有的段落

$('#myDiv p').hide();
$('#myDiv p').hide('slow'); // 动画效果隐藏
$('#myDiv p').toggle(); // 点击显示,再点击隐藏

从这里了解更多jQuery。

其他类似的Javascript库也不少,有mootoolsprototypescriptaculous等。

5. AJAX要因地制宜

Web 2.0大潮中,AJAX炙手可热。很多人都问我“你懂AJAX吗?”,好像它是种独立的编程语言似的。说白了,AJAX只是一种手段而已,它通过与服务器端交互,无需刷新页面就能获取和更新数据。

我注意到最近有一种趋势:无论干什么都用AJAX。这并不总是明智的选择。原因?

    * 访问量。全盘应用AJAX,会损失掉宝贵的PV。
    * 可用性。这一点会有争议,但我认为大多数用户(可能不包括你)仍旧有个习惯:他们依然把页面刷新当作某些事件(如表单提交、页面跳转等)发生的迹象。

AJAX绝对有用武之地,而且某些情况下非它不可。不过重申一遍,少即多。把握分寸,适度使用Javascript和AJAX就好。
6. 搜索引擎喜欢结构化代码

现在有种风潮,人们想尽办法让自己的关键字在搜索结果中名列前茅。作为开发者,你有责任因势利导,用结构化代码尽可能优化网站以适应搜索引擎。

以下是一些重要的结构化标记:

    * H1 - 最重要的标题,搜索引擎最重视它。
    * H2,H3,H4,H5 - 重要性依次递减的标题。用它们恰当的传递信息,搜索引擎会根据字号给予相应的关照。
    * A - 链接。通常给它个TITLE属性比较好。

      <a xhref="http://blog.htmlor.com/" title="htmlor's blog">htmlor's blog</a>

   * IMG - 古老的图像标记。给它个ALT属性比较好,搜索引擎会把其属性值当作关键字。另外,当图像无法显示时,访问者会看到替代文字。

还有一些重要的标记:

    * TITLE - 此标记会作为搜索引擎查询结果的标题显示,应该认真对待。
    * META - 最好完善一下keywords和description,搜索引擎还是会读取这两项老掉牙的信息的。

      <meta name="keywords" content="编程,设计,武侠,小说,足球" />
      <meta name="description" content="关注新技术,趣文章,足坛风云;偶尔抒抒情,搞搞笑,装装深沉。" />

7. 布局用DIV 别用TABLE

其实这条我们都已习惯了,现在还用TABLE布局是会被人极度鄙视的。在列举表式数据时用用还差不多。

搞定DIV布局需要很多实践,不过一旦你掌握诀窍,它将变得俯首帖耳。由此获得的灵活性,比你能想到的还要多。

其实它非常简单,就好像 float 和 width 一样。

我在Virb写了个很简单的两栏布局教程,有兴趣就看看吧。
8. 少用行内样式

写代码时,通常会直接在元件标记上加几句样式,这比往CSS文件里加个Class或属性简单顺手一点。不过,最好别这么做,因为代码需要可维护性。

某些时候,你将不得不面对自己以前写的代码。自己的床自己得睡,自己犯懒自己遭罪。10年来,我认识到一个道理:现在额外花时间,将来特别省时间。这就说到了下一个建议:代码要考虑将来。

不好的

<p style="font-size:14px;margin-bottom:0;">第一个标题</p>
<p>正文内容</p>
<p style="font-size:14px;margin-bottom:0;">第二个标题</p>

好的

<style type="text/css" media="screen">
p.header{
  font-size:14px;
  margin-bottom:0;
}

</style>
<p class="header">第一个标题</p>
<p>正文内容</p>
<p class="header">第二个标题</p>

9. 代码要考虑将来

要给代码写注释。整洁,有序,别偷懒。如果觉得匆匆忙忙没心思,休息一会儿再回来写。

某些情况下(比如你的网站将来成功了),别人会来看的代码。而有时候,这个人会是你。

几年之后,看到自己当年没有注释、乱做一团的代码,你肯定悔不当初。为了避免将来的自怨自艾,现在就把复杂的代码注释一下吧。

注释也不要太多。那些简单到一目了然的代码根本没必要说明,否则泥沙俱下,真正有用的注释会淹没在重重文字之中。
10. 了解标准,但不必束手束脚

别再使用SMALL、CENTER、FONT等不推荐使用的标记了,这样不好。

听说SMALL标记还没被弃用――不过抱歉,我肯定它没几天了。

网站上的有效XHTMLCSS标志告诉人们,你遵守了某些规则。也许这让你感觉与众不同,但是,网站质量与此无关。去看看哪个成功的大网站能完全通过HTML标准验证? 所谓标准,其实跟不上新方法新技术的发展。

开发网站时,要尽量遵循HTML标准。不过有时候,可能需要跳出标准去实现某个功能,这样才能兼容所有浏览器。对此不必太过介怀,说到底,功能才是网站的根本。

如果实在想的话,可以用W3HTML验证器检查你的代码。
讲完了

考虑一下上述建议吧,我推荐的工具可以开始上手了。祝你好运!

(完)

Ajax+PHP简单基础入门教程


Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。对于Ajax,最核心的一个对象是XMLHttpRequest,所有的Ajax操作都离不开对这个对象的操作。

首先我们来了解怎么在javascript中创建这个对象:
var xmlHttp = new XMLHttpRequest();

这行简单的代码在 Mozilla、Firefox、Safari、Opera 以及基本上所有以任何形式或方式支持 Ajax 的非 Microsoft 浏览器中,创建了 XMLHttpRequest 对象。但是对于市场占有率达到70%的IE来说,这种方法是不行的,而不同的IE版本还有不同的创建方法,所以我们需要在IE下面使用下面两种创建对象的办法:
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//针对较新的浏览器
} catch (err) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//针对较老的浏览器
} catch (err2) {
xmlHttp = false;
}
}

即使这样,我们也无法预料有些浏览器可能无法创建这个对象,所以在创建不成功的情况下,我们还要加上一句:
if (!xmlHttp){
alert("无法创建 XMLHttpRequest 对象!");
}

结合起来就是:
var xmlHttp = false;
try {
xmlHttp = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
xmlHttp = false;
}
}
}
if (!xmlHttp){
alert("无法创建 XMLHttpRequest 对象!");
}

然后,让我们建立一个函数getInfo(),打开异步请求:
function getInfo() {
var num = document.getElementById("num").value;//获得表单的数据
var url = "/ajax/1.php?n=" + escape(num);
xmlHttp.open("GET", url, true);//这里的true代表是异步请求
}

一旦用 open() 配置好之后,就可以发送请求了。虽然可以使用 send() 发送数据,但也能通过 URL 本身发送数据。事实上,在大部分GET 请求中,用 URL 发送数据要容易得多,所以这里用null作为send()的参数就可以了。url地址里面的php文件是被请求来处理所需要数据的php文件,就像我们平时用PHP的时候一样,后面的参数可以加多个,并用&分隔开来。
xmlHttp.send(null);

在发送了数据之后,我们需要用回调方法来获得服务器的状态,所以就用到了onreadystatechange 属性。
xmlHttp.onreadystatechange = updatePage;

此语句已经要放在send()语句前面,这样才会有效,后面的updatePage是处理返回信息的一个函数。完整的getInfo()如下:
function getInfo() {
var num = document.getElementById("num").value;//获得表单的数据
var url = "/ajax/1.php?n=" + escape(num);
xmlHttp.open("GET", url, true);//这里的true代表是异步请求
xmlHttp.onreadystatechange = updatePage;
xmlHttp.send(null);
}

我们还需要在html里面来触发这个函数:
<input name="num" id="num" onblur="getInfo()" type="text" />

下面我们需要来编写updatePage()这个函数:
function updatePage(){
if (xmlhttp.readyState == 4) {
var response = xmlhttp.responseText;
document.getElementById("city").value = response;
}
}

上面这段代码里面的readyState是服务器返回的一个状态,4这个状态表示请求已经发送,并处理完毕。responseText是获得服务器返回的信息,然后通过javascript赋给ID为city的表单。

到此,一个简单的Ajax程序就完成了,完整的javascript代码如下:
var xmlHttp = false;
try {
xmlHttp = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
xmlHttp = false;
}
}
}
if (!xmlHttp){
alert("无法创建 XMLHttpRequest 对象!");
}

function getInfo() {
var num = document.getElementById("num").value;//获得表单的数据
var url = "/ajax/1.php?n=" + escape(num);
xmlHttp.open("GET", url, true);//这里的true代表是异步请求
xmlHttp.onreadystatechange = updatePage;
xmlHttp.send(null);
}

function updatePage(){
if (xmlhttp.readyState == 4) {
var response = xmlhttp.responseText;
document.getElementById("city").value = response;
}
}

这里还缺一个php文件,由于处理的方式不一样,写法也不一样,而且这不是Ajax的主要部分,所以这里就不放代码了。只要记住php是输出并返回所需要的数据就可以了。

这教程,对初学者挺适合.

最常用的25个PHP模板引擎

为了找到一个好的模板引擎,我在GOOGLE上进行搜索,对他们进行了整理,以便于大家比较选择:

Smarty
Smarty的特点是将模板编译成PHP脚本,然后执行这些脚本。很快,非常灵活。

Heyes Template Class
一个非常容易使用,但功能强大并且快速的模板引擎,它帮助你把页面布局和设计从代码中分离。

FastTemplate
一个简单的变量插值模板类,它分析你的模板,把变量的值从HTML代码中分离处理。

ShellPage
一个简单易用的类,可以让你的整个网站布局基于模板文件,修改模板就能改变整个站点。

STP Simple Template Parser
一个简单、轻量级并且易于使用的模板分析类。它可以从多个模板中组装一个页面,把结果页面输出到浏览器或者文件系统。

OO Template Class
一个你可以用在自己程序中的面向兑现的模板类。

SimpleTemplate
一个可以创建和结构化网站的模板引擎。它可以解析和编译模板。

bTemplate
短小但是快速的模板类,允许你把PHP逻辑代码从HTML修饰代码中分离。

Savant
一个强大且轻量级的PEAR兼容模板系统。它是非编译型的,使用PHP语言本身做为它的模板语言。

ETS - easy template system
可以使用完全相同数据重组模板的模板系统。

EasyTemplatePHP
适用于你的站点的一个简单但是强大的模板系统。

vlibTemplate
一个快速、全能的模板系统,它包含一个缓存和调试类。

AvanTemplate
多字节安全的模板引擎,占用很少系统资源。它支持变量替换,内容块可以设置显示或隐藏。

Grafx Software’s Fast Template
一个修改版本的Fast Template系统,它包括缓存功能,调试控制台以及沉默去除为赋值块。

TemplatePower
一个快速、简单、功能强大的模板类。主要功能有嵌套的动态块支持,块/文件包含支持以及显示/隐藏未赋值的变量。

TagTemplate
这个库的功能被设计来使用模板文件,同时允许你从HTML文件检索信息。

htmltmpl: templating engine
一个适用于Python和PHP的模板引擎。它面向希望在项目中分离代码和设计的web应用开发人员。

PHP Class for Parsing Dreamweaver templates
一个分析Dreamweaver模板的简单类,被用于Gallery 2 和WordPress的自定义模块中。

MiniTemplator (Template Engine)
针对HTML文件的一个紧凑型模板引擎。对于模板变量和块定义它具有简单的语法。其中块可以嵌套。

Layout Solution
简化网站开发和维护。它拥有常用的变量和页面元素使你不需要重复做页面布局工作。

Cached Fast Template
它已经纳入 FastTemplate ,允许你缓存模板文件,甚至可以在分离的块内容上缓存不同的规格。

TinyButStrong
一个支持MySQL, Odbc, Sql-Server和ADODB的模板引擎。它包含7个方法和两个属性。

Brian Lozier’s php based template engine
只有2K大小,非常快并且是面向对象设计。

WACT
一个从设计中分离代码的模板引擎。

PHPTAL
一个PHP下面的XML/XHTML模板库。

国内好像在这方面发展的不够,相信通过一段时间的发展,国内的LAMP