某人的栖息地 » html http://www.ooso.net Linux + Apache + Mysql + Php + Flash Thu, 19 Jan 2012 01:21:44 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Adobe AIR教程for HTML/JAVASCRIPT开发者 http://www.ooso.net/archives/354 http://www.ooso.net/archives/354#comments Mon, 24 Mar 2008 00:52:15 +0000 Volcano http://www.ooso.net/?p=354 阅读全文（1679字）]]> 最近不是太有空，加上泡网络时间太长，对新鲜事物的敏感度有所下降。因此当Adobe出了个AIR，我还是兴趣缺缺，没功夫去试用。

但是兴趣这玩意可能也有些生理周期，前几天突然来了神把这个AIR好好端详一番，却发觉网上暂时没有适合我这种初级新手看的AIR教程，鼓捣了几天，仍然是毫无进展，我甚至连个hello world之类的简单air package都打不出来。也许小时候特意去踩过狗屎，因此现在我又走上狗屎运，在即将放弃的前一刻找到了一篇比较细致的AIR教程，记录下来，好记性不如烂键盘。

俺目前的情况是，没有安装Dreamweaver，Flash之类的软件，只用一些免费软件，所以我只打算写html/javascript之类的代码，flash方面的暂时不涉及，另外adobe提供的dreamweaver air sdk也是用不上，可谓一穷二白。

第一步 — 安装Adobe AIR和Adobe AIR SDK

如果你还没装，可以去网站上下载Adobe AIR Runtime和Adobe AIR SDK.

装完Adobe AIR SDK以后，为了方便，你还需要把它的bin目录添加到系统的path变量下，这样你可以直接运行它的打包和debug工具。

第二步 — 创建一些目录

接下来创建一些目录来放置代码，比如：

/appname/
/appname/source/
/appname/source/icons/
/appname/build/

第三步 — 创建一个Application Descriptor

AIR需要一个Application Descriptor来描述它的内容和属性，这是一个XML格式的文件。

它的文件名是application.xml，放置在/appname/source/目录。

<application xmlns="http://ns.adobe.com/air/application/1.0">
  <id>com.example.appname </id>
  <version>1.0 </version>
  <filename>AppName </filename>
  <initialWindow>
    <content>index.html </content>
    <visible>true </visible>
    <width>600</width>
    <height>600</height>
  </initialWindow>
  <icon>
    <image16x16>icons/appname-16.png</image16x16>
    <image32x32>icons/appname-32.png</image32x32>
    <image48x48>icons/appname-48.png</image48x48>
    <image128x128>icons/appname-128.png</image128x128>
  </icon>
</application>

这个xml文件很有些复杂，也很有一些历史，最可恶的是AIR beta1到后来的beta2乃至最后的1.0，从来就没统一过，变了又变，所以我在网上找到的一些教程都失效了，只能针对早期的beta版使用。

关于它的详细内容，可以参考模板，在adobe sdk安装目录下的templates/descriptor-template.xml.

第四步 — 创建你的应用

下一步，创建一个index.html.

<html>
<head>
  <title>My Window Title</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

如果需要添加css,javascript以及图片，可以在/appname/source/下创建子目录放进去，就像平常写web应用那样。

第五步 — 测试你的应用

如果你已经配置好了path环境变量（见第一步,需要重启电脑），下面很简单，首先打开一个命令行窗口，进入/appname/source/目录，然后运行：

adl application.xml

一切顺利的话，你的应用应该已经跑起来了，一个弹出的AIR应用窗口好不容易的展示它的第一次。

第六步 — 打包你的AIR应用

在很多磕磕碰碰，反复调试之后，你可能已经完成了应用，现在你准备向朋友或者网上的菜鸟炫耀一下你的处女作。那么我们开始打包，这一步其实比我想象的要简单。

首先需要生成一个签名Certificate，并放置在应用的根目录/appname/

adt -certificate -cn SelfSign -ou Dev -o “Example” -c US 2048-RSA cert.pfx 换成你的密码

然后就是进入source目录打包：

adt -package -storetype pkcs12 -keystore ../cert.pfx ../build/AirTest.air application.xml .

不出意外的话，会当场生成一个AppName.air文件，你可以安装一下感受亲手做的第一个Air应用。

原文：Adobe AIR Tutorial for HTML / JavaScript Developers

]]> http://www.ooso.net/archives/354/feed 34 可以用button代替input type=”submit”吗 http://www.ooso.net/archives/352 http://www.ooso.net/archives/352#comments Mon, 16 Jul 2007 23:37:24 +0000 Volcano http://www.ooso.net/index.php/archives/352 阅读全文（391字）]]> 在ie下，<button>标记恐怕还存在几个不大不小的问题。

  1. 在一个表单里，如果有一个以上”submit”类型的<button>标签存在，在表单被提交时，不管你点击哪个<button>，所有<button>的值都会被post/get。
  2. <button>的缺省type属性被设置为”button”，但是在A级别浏览器下，应该设置为”submit”才对
  3. 如果你用javascript去访问<button>的value属性，IE却返回了<button>的innerHTML属性，很让人恼火。 (可以使用”getAttributeNode”方法来避免.)

例如，一段HTML:

<form>
<button type="submit" value="1" name="action-1">text 1</button>
<button type="submit" value="2" name="action-2">text 2</button>
</form>

在IE下，上面两个button的数据都会被提交。并且ie会提交这两个button的innerText而不是value。而其它浏览器仅仅提交你点击的那个button。

以上，应该尽量避免使用button标记。

]]> http://www.ooso.net/archives/352/feed 11 html里各种link标签的作用 http://www.ooso.net/archives/329 http://www.ooso.net/archives/329#comments Mon, 02 Jul 2007 00:03:17 +0000 Volcano http://www.ooso.net/index.php/archives/329 阅读全文（381字）]]> 在打开wordpress页面的html源代码以后，能看到head标签里面有各式各样的link标签，想找到它们的确切作用以及出处，一直没有找到明确的说法，很是郁闷。

下面做个记录先：

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.feedburner.com/ooso" />
<link rel="alternate" type="text/xml" title="RSS .92" href="http://www.ooso.net/index.php/feed/rss" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://www.ooso.net/index.php/feed/atom" />

这个看来是记录的博客RSS 2.0 / RSS 0.92 URL，在firefox中打开能看到地址栏最后面出现Feed图标，据说搜索引擎也会根据这个标签自动去爬行博客的RSS。但是我没找到这个标签的详细说明，仅仅在wikipedia上找到子言片语。

<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />

地址栏最前面的小图标…大家好像都认识的说

<link rel='archives' title='2007年7月' href='http://www.ooso.net/index.php/archives/date/2007/07' />
........
<link rel='archives' title='2000年1月' href='http://www.ooso.net/index.php/archives/date/2000/01' />

blog的归档url，估计是供Search Engine爬行用的，曾经想把这段东东删掉…嘿嘿。

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.ooso.net/xmlrpc.php?rsd" />

供livewriter之类的离线编辑器使用的？

<link rel="stylesheet" href="http://www.ooso.net/wp-content/plugins/ig_syntax_hilite/css/syntax_hilite_css.css" type="text/css" media="all" />

样式表，不用说了。

以上标记俺目前都只是凭揣测来解释它的作用，如有路过的达人给出具体含义，感激不尽。

UPDATE

关于link标签里rel属性的作用

]]> http://www.ooso.net/archives/329/feed 15 小日本果然BT http://www.ooso.net/archives/340 http://www.ooso.net/archives/340#comments Wed, 27 Jun 2007 01:42:43 +0000 Volcano http://www.ooso.net/index.php/archives/340 你可能不知道，table还能这样用…

]]> http://www.ooso.net/archives/340/feed 16 Firefox下的自动跟随滚动css样式 http://www.ooso.net/archives/238 http://www.ooso.net/archives/238#comments Mon, 28 Aug 2006 12:41:39 +0000 Volcano http://www.ooso.net/index.php/archives/238 阅读全文（491字）]]> 今天写一个小页面，页面上有几个小button需要自动跟随页面滚动。这应该是很成熟的技术了，我想。一点html搭配上几行javascript,或许还有一些样式表，就能搞定这个功能。

首先是用css,一个expression完成。

<style>
#scrollDiv{position:absolute;right:0px;top:expression(eval(document.body.scrollTop));}
</style>
<div id="scrollDiv">请让俺自动滚动</div>

在IE下，正常运作，在Firefox下却是毫无动静。然后我尝试用javascript，每30毫秒运行一次，试图让scrollDiv自动跟随，效率低下不说，关键是根本没能奏效。搜索了一番，换回css解决方式：

<style>
#scrollDiv{position:fixed;right:0px;top:0px;}
* html #scrollDiv{top:expression(eval(document.body.scrollTop));} /*ie 5.5+认识俺*/
</style>
<div id="scrollDiv">请让俺自动滚动</div>

上面html就能工作了。

平常专心写php,还真没留意样式表还有这么多花样。向你致敬，一贯支持工作的美工大人！！

]]> http://www.ooso.net/archives/238/feed 8