HTML | 酷 壳 - CoolShell https://coolshell.cn 享受编程和技术所带来的快乐 - Coding Your Ambition Thu, 19 Jan 2017 13:23:08 +0000 zh-CN hourly 1 https://wordpress.org/?v=6.2 Chrome开发者工具的小技巧 https://coolshell.cn/articles/17634.html https://coolshell.cn/articles/17634.html#comments Thu, 19 Jan 2017 12:25:55 +0000 http://coolshell.cn/?p=17634 Chrome的开发者工具是个很强大的东西，相信程序员们都不会陌生，不过有些小功能可能并不为大众所知，所以，写下这篇文章罗列一下可能你所不知道的功能，有的功能可能...

Read More Read More

The post Chrome开发者工具的小技巧 first appeared on 酷 壳 - CoolShell.]]> Chrome的开发者工具是个很强大的东西，相信程序员们都不会陌生，不过有些小功能可能并不为大众所知，所以，写下这篇文章罗列一下可能你所不知道的功能，有的功能可能会比较实用，有的则不一定，也欢迎大家补充交流。

话不多话，我们开始。

代码格式化

有很多css/js的代码都会被 minify 掉，你可以点击代码窗口左下角的那个 { }  标签，chrome会帮你给格式化掉。

强制DOM状态

有些HTML的DOM是有状态的，比如<a> 标签，其会有 active，hover， focus，visited这些状态，有时候，我们的CSS会来定关不同状态的样式，在分析网页查看网页上DOM的CSS样式时，我们可以点击CSS样式上的 :hov 这个小按钮来强制这个DOM的状态。

 

 

动画

现在的网页上都会有一些动画效果。在Chrome的开发者工具中，通过右上角的菜单中的 More Tools => Animations 呼出相关的选项卡。于是你就可以慢动作播放动画了（可以点选 25% 或 10%），然后，Chrome还可以帮你把动画录下来，你可以拉动动再画的过程，甚至可以做一些简单的修改。

 

直接编辑网页

在你的 console 里 输入下面的命令：

document.designMode = "on"

于是你就可以直接修改网页上的内容了。

P.S. 下面这个抓屏中还演示了一个如何清空console的示例。你可以输入 clear() 或是 按 Ctrl+L（Windows下），CMD + K (Mac下)

 

网络限速

你可以设置你的网络的访问速度来模拟一个网络很慢的情况。

 

复制HTTP请求

这个是我很喜欢 的一个功能，你可以在 network选项卡里，点击 XHR 过滤相关的Ajax请求，然后在相关的请求上点鼠标右键，在菜单中选择： Copy => Copy as cURL，然后就可以到你的命令行下去 执行 curl 的命令了。这个可以很容易做一些自动化的测试。

 

友情提示：这个操作有可能会把你的个人隐私信息复制出去，比如你个人登录后的cookie。

抓个带手机的图

这个可能有点无聊了，不过我觉得挺有意思的。

在device显示中，先选择一个手机，然后在右上角选 Show Device Frame，然后你就看到手机的样子了，然后再到那个菜中中选 Capture snapshot，就可以抓下一个有手机样子的截图了。

我抓的图如下（当然，不是所有的手机都有frame的）

 

设置断点

除了给Javascript的源代码上设置断点调试，你还可以：

给DOM设置断点

选中一个DOM，然后在右键菜单中选 Break on … 你可以看到如下三个选项：

给XHR和Event Lisener设置断点

在 Sources 面页中，你可以看到右边的那堆break points中，除了上面我们说的给DOM设置断点，你还可以给XHR和Event Listener设置断点，载图如下：

关于Console中的技巧

DOM操作
  • chrome会帮你buffer 5个你查看过的DOM对象，你可以直接在Console中用 $0, $1, $2, $3, $4来访问。
  • 你还可以使用像jQuery那样的语法来获得DOM对象，如：$("#mydiv")
  • 你还可使用 $$(".class") 来选择所有满足条件的DOM对象。
  • 你可以使用 getEventListeners($("selector")) 来查看某个DOM对象上的事件（如下图所示）。

  • 你还可以使用 monitorEvents($("selector")) 来监控相关的事件。比如：

monitorEvents(document.body, "click");

Console中的一些函数

1）monitor函数

使用 monitor函数来监控一函数，如下面的示例

2）copy函数

copy函数可以把一个变量的值copy到剪贴板上。

3）inspect函数

inspect函数可以让你控制台跳到你需要查看的对象上。如：

更多的函数请参数官方文档 – Using the Console / Command Line Reference

Console的输出

我们知道，除了console.log之外，还有console.debug，console.info，console.warn，console.error这些不同级别的输出。另外一个鲜为人知的功能是，console.log中，你还可以对输出的文本加上css的样式，如下所示：

console.log("%c左耳朵", "font-size:90px;color:#888")

于是，你可以定义一些相关的log函数，如：

console.todo = function( msg){
  console.log( '%c%s %s %s', 'font-size:20px; color:yellow; background-color: blue;', '--', msg, '--');
}
console.important = function( msg){
  console.log( '%c%s %s %s', 'font-size:20px; color:brown; font-weight: bold; text-decoration: underline;', '--', msg, '--');
}

关于console.log中的格式化，你可以参看如下表格：

指示符 输出
%s 格式化输出一个字符串变量。
%i or %d 格式化输出一个整型变量的值。
%f 格式化输出一个浮点数变量的值。
%o 格式化输出一个DOM对象。
%O 格式化输出一个Javascript对象。
%c 为后面的字符串加上CSS样式

 

除了console.log打印js的数组，你还可以使用console.table来打印，如下所示：

var pets = [
  { animal: 'Horse', name: 'Pony', age: 23 },
  { animal: 'Dog', name: 'Snoopy', age: 13 },
  { animal: 'Cat', name: 'Tom', age: 18 },
  { animal: 'Mouse', name: 'Jerry', age: 12}
];
console.table(pets)

 

关于console对象

  • console对象除了上面的打日志的功能，其还有很多功能，比如：
  • console.trace() 可以打出js的函数调用栈
  • console.time() 和 console.timeEnd() 可以帮你计算一段代码间消耗的时间。
  • console.profile() 和 console.profileEnd() 可以让你查看CPU的消耗。
  • console.count() 可以让你看到相同的日志当前被打印的次数。
  • console.assert(expression, object) 可以让你assert一个表达式

这些东西都可以看看Google的Console API的文档。

其实，还有很多东西，你可以参看Google的官方文档 – Chrome DevTools

关于快捷键

点击在 DevTools的右上角的那三个坚排的小点，你会看到一个菜单，点选 Shortcuts，你就可以看到所有的快捷键了

如果你知道更多，也欢迎补充！

（全文完）

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post Chrome开发者工具的小技巧 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/17634.html/feed 63 HTML6 展望 https://coolshell.cn/articles/12206.html https://coolshell.cn/articles/12206.html#comments Sat, 06 Dec 2014 04:41:34 +0000 http://coolshell.cn/?p=12206 HTML5 概述 HTML5 是 HTML 语言最受欢迎的版本之一，它支持音频和视频、离线存储、移动端、和标签属性等等。还提供了<article>,...

Read More Read More

The post HTML6 展望 first appeared on 酷 壳 - CoolShell.]]>

html6

HTML5 概述

HTML5 是 HTML 语言最受欢迎的版本之一，它支持音频和视频、离线存储、移动端、和标签属性等等。还提供了<article>, <section>, <header>这样的标签来帮助开发者更好地组织页面内容。然而 HTML5 规范仍然没有最后定稿，并且它并不是一个真正意义上的语义标记语言。

HTML6 展望

你有没有曾经希望能在 HTML 中使用自定义标签？比如：使用<logo>来显示你的网站logo，还有使用<toolbar>来显示工具栏等等。我们经常使用<div id=”container”>和<div id=”wrapper”>来组织页面，在 HTML6 里我们希望可以直接使用象<container>和<wrapper>这样的自定义标签。

和 XML 一样，HTML6 应该支持 namespace（命名空间），如：xmlns:xhtml=”http://www.w3.org/1999/xhtml”

HTML6 代码样例：

<!DOCTYPE html>
 <html:html>
 <html:head>
 <html:title>A Look Into HTML6</html:title>
 <html:meta type="title" value="Page Title">
 <html:meta type="description" value="HTML example with namespaces">
 <html:link src="css/mainfile.css" title="Styles" type="text/css">
 <html:link src="js/mainfile.js" title="Script" type="text/javascript">
 </html:head>
 <html:body>
 <header>
 <logo>
 <html:media type="image" src="images/xyz.png">
 </logo>
 <nav>
 <html:a href="/img1">a1</a>
 <html:a href="/img2">a2</a>
 </nav>
 </header>
 <content>
 <article>
 <h1>Heading of main article</h1>
 <h2>Sub-heading of main article</h2>
 <p>[...]</p>
 <p>[...]</p>
 </article>
 <article>
 <h1>The concept of HTML6</h1>
 <h2>Understanding the basics</h2>
 <p>[...]</p>
 </article>
 </content>
 <footer>
 <copyright>This site is © to Anonymous 2014</copyright>
 </footer>
 </html:body>
 </html:html>

在上面的代码中，你也许注意到了一些奇怪的<html:x>标签，它们是 W3C 和 HTML6 规范中在命名空间里定义的标签。例如：<html:title>负责设定你浏览器的标题栏文字，<html:media>负责显示图片等等。用户可以自己定义标签以便 JavaScript 和 CSS 识别和处理，这样页面代码会更易读，语义更清晰。

HTML6 APIs

HTML6 的标签前带有命名空间，如：<html:html>, <html:head>等等。

1. <html:html>

<!DOCTYPE html>
 <html:html>// this is equivalent to <html> tag written in previous HTML versions
 <!-- sample of HTML document -->
 </html:html>

2. <html:head> 和 <head> 标签一样。

<!DOCTYPE html>
 <html:html>
 <html:head>
 <!-- Main content would come here, like the <html:title> tag -->
 </html:head>
 </html:html>

3. <html:title> 和 <title> 标签类似。

<!DOCTYPE html>
 <html:html>
 <html:head>
 <html:title>A Look Into HTML6</html:title>
 </html:head>
 </html:html>

4. <html:meta> 和 <meta> 标签类似，不同之处在于，在 HTML5 中你只能使用标准的元数据类型，如：”keywords”, “description”, “author”等，而在 HTML6 中你可以使用任何元数据类型。

<!DOCTYPE html>
 <html:html>
 <html:head>
 <html:title>A Look Into HTML6</html:title>
 <html:meta type="description" value="HTML example with namespaces">
 </html:head>
 </html:html>

5. <html:link> 和 HTML6 之前版本的 <link> 标签类似。

<!DOCTYPE html>
 <html:html>
 <html:head>
 <html:title>A Look Into HTML6</html:title>
 <html:link src="js/mainfile.js" title="Script" type="text/javascript">
 </html:head>
 </html:html>

6. <html:body> 和 <body> 标签一样。

<!DOCTYPE html>
 <html:html>
 <html:head>
 <html:title>A Look Into HTML6</html:title>
 </html:head>
 <html:body>
 <!-- This is where your website content is placed -->
 </html:body>
 </html:html>

7. <html:a> 和 <a> 标签类似，区别是 <html:a> 只有 “href” 一个属性。

<!DOCTYPE html>
 <html:html>
 <html:head>
 <html:title>A Look Into HTML6</html:title>
 </html:head>
 <html:body>
 <html:a href="http://siteurl">Go to siteurl.com!</html:a>
 </html:body>
 </html:html>

8. <html：button> 和 <button> 及 <input type=”button”> 一样。

<!DOCTYPE html>
 <html:html>
 <html:head>
 <html:title>A Look Into HTML6</html:title>
 </html:head>
 <html:body>
 <html:button>Click Here</html:button>
 </html:body>
 </html:html>

9. <html:media> 涵盖 <img>, <video>, <embed> 等标签的所有功能。<html:media> 的好处是你不用根据不同的媒体文件类型使用不同的标签，媒体的类型由浏览器从文件内容（类型属性，扩展名，和MIME type）中来判断。

<!DOCTYPE html>
 <html:html>
 <html:head>
 <html:title>A Look Into HTML6</html:title>
 </html:head>
 <html:body>
 <!-- Image would come here -->
 <html:media src="img1/logo.jpg" type="image">
 <!-- Video doesn't need a type -->
 <html:media src="videos/slide.mov">
 </html:body>
 </html:html>

标签类型(Tag types)概述

和 HTML5 一样， HTML6 也有两种标签类型：单标签（single tag) 和双标签（double tag）

<html:meta type="author" content="single tag">
 <html:meta type="author" content="double tag" />

单标签不需要结束符’/’

结语

HTML6 规范还未发布，本文原作者 Oscar Godson 只是为我们提供了一个对 HTML6 规范的展望，或者说他希望 HTML6 能够支持的一些新特性。

原文链接：A Look Into HTML6 – What Is It, and What Does it Have to Offer?

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post HTML6 展望 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/12206.html/feed 39 浏览器的渲染原理简介 https://coolshell.cn/articles/9666.html https://coolshell.cn/articles/9666.html#comments Wed, 22 May 2013 00:17:47 +0000 http://coolshell.cn/?p=9666 看到这个标题大家一定会想到这篇神文《How Browsers Work》，这篇文章把浏览器的很多细节讲得很细，而且也被翻译成了中文。为什么我还想写一篇呢？因为两...

Read More Read More

The post 浏览器的渲染原理简介 first appeared on 酷 壳 - CoolShell.]]> 看到这个标题大家一定会想到这篇神文《How Browsers Work》，这篇文章把浏览器的很多细节讲得很细，而且也被翻译成了中文。为什么我还想写一篇呢？因为两个原因，

1）这篇文章太长了，阅读成本太大，不能一口气读完。

2）花了大力气读了这篇文章后可以了解很多，但似乎对工作没什么帮助。

所以，我准备写下这篇文章来解决上述两个问题。希望你能在上班途中，或是坐马桶时就能读完，并能从中学会一些能用在工作上的东西。

浏览器工作大流程

废话少说，先来看个图：

从上面这个图中，我们可以看到那么几个事：

1）浏览器会解析三个东西：

  • 一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。
  • CSS，解析CSS会产生CSS规则树。
  • Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.

2）解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。注意：

  • Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
  • CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。
  • 然后，计算每个Frame（也就是每个Element）的位置，这又叫layout和reflow过程。

3）最后通过调用操作系统Native GUI的API绘制。

DOM解析

HTML的DOM Tree解析如下：

<html>
<html>
<head>
    <title>Web page parsing</title>
</head>
<body>
    <div>
        <h1>Web page parsing</h1>
        <p>This is an example Web page.</p>
    </div>
</body>
</html>

上面这段HTML会解析成这样：

下面是另一个有SVG标签的情况。

CSS解析

CSS的解析大概是下面这个样子（下面主要说的是Gecko也就是Firefox的玩法），假设我们有下面的HTML文档：

<doc>
<title>A few quotes</title>
<para>
  Franklin said that <quote>"A penny saved is a penny earned."</quote>
</para>
<para>
  FDR said <quote>"We have nothing to fear but <span>fear itself.</span>"</quote>
</para>
</doc>

于是DOM Tree是这个样子：

然后我们的CSS文档是这样的：

  /* rule 1 */ doc { display: block; text-indent: 1em; }
/* rule 2 */ title { display: block; font-size: 3em; }
/* rule 3 */ para { display: block; }
/* rule 4 */ [class="emph"] { font-style: italic; }

于是我们的CSS Rule Tree会是这个样子：

注意，图中的第4条规则出现了两次，一次是独立的，一次是在规则3的子结点。所以，我们可以知道，建立CSS Rule Tree是需要比照着DOM Tree来的。CSS匹配DOM Tree主要是从右到左解析CSS的Selector，好多人以为这个事会比较快，其实并不一定。关键还看我们的CSS的Selector怎么写了。

注意：CSS匹配HTML元素是一个相当复杂和有性能问题的事情。所以，你就会在N多地方看到很多人都告诉你，DOM树要小，CSS尽量用id和class，千万不要过渡层叠下去，……

通过这两个树，我们可以得到一个叫Style Context Tree，也就是下面这样（把CSS Rule结点Attach到DOM Tree上）：

所以，Firefox基本上来说是通过CSS 解析 生成 CSS Rule Tree，然后，通过比对DOM生成Style Context Tree，然后Firefox通过把Style Context Tree和其Render Tree（Frame Tree）关联上，就完成了。注意：Render Tree会把一些不可见的结点去除掉。而Firefox中所谓的Frame就是一个DOM结点，不要被其名字所迷惑了。

注：Webkit不像Firefox要用两个树来干这个，Webkit也有Style对象，它直接把这个Style对象存在了相应的DOM结点上了。

渲染

渲染的流程基本上如下（黄色的四个步骤）：

  1. 计算CSS样式
  2. 构建Render Tree
  3. Layout – 定位坐标和大小，是否换行，各种position, overflow, z-index属性 ……
  4. 正式开画

注意：上图流程中有很多连接线，这表示了Javascript动态修改了DOM属性或是CSS属会导致重新Layout，有些改变不会，就是那些指到天上的箭头，比如，修改后的CSS rule没有被匹配到，等。

这里重要要说两个概念，一个是Reflow，另一个是Repaint。这两个不是一回事。

  • Repaint——屏幕的一部分要重画，比如某个CSS的背景色变了。但是元素的几何尺寸没有变。
  • Reflow——意味着元件的几何尺寸变了，我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化。这就是Reflow，或是Layout。（HTML使用的是flow based layout，也就是流式布局，所以，如果某元件的几何尺寸发生了变化，需要重新布局，也就叫reflow）reflow 会从<html>这个root frame开始递归往下，依次计算所有的结点几何尺寸和位置，在reflow过程中，可能会增加一些frame，比如一个文本字符串必需被包装起来。

下面是一个打开Wikipedia时的Layout/reflow的视频（注：HTML在初始化的时候也会做一次reflow，叫 intial reflow），你可以感受一下：

Reflow的成本比Repaint的成本高得多的多。DOM Tree里的每个结点都会有reflow方法，一个结点的reflow很有可能导致子结点，甚至父点以及同级结点的reflow。在一些高性能的电脑上也许还没什么，但是如果reflow发生在手机上，那么这个过程是非常痛苦和耗电的。

所以，下面这些动作有很大可能会是成本比较高的。

  • 当你增加、删除、修改DOM结点时，会导致Reflow或Repaint
  • 当你移动DOM的位置，或是搞个动画的时候。
  • 当你修改CSS样式的时候。
  • 当你Resize窗口的时候（移动端没有这个问题），或是滚动的时候。
  • 当你修改网页的默认字体时。

注：display:none会触发reflow，而visibility:hidden只会触发repaint，因为没有发现位置变化。

多说两句关于滚屏的事，通常来说，如果在滚屏的时候，我们的页面上的所有的像素都会跟着滚动，那么性能上没什么问题，因为我们的显卡对于这种把全屏像素往上往下移的算法是很快。但是如果你有一个fixed的背景图，或是有些Element不跟着滚动，有些Elment是动画，那么这个滚动的动作对于浏览器来说会是相当相当痛苦的一个过程。你可以看到很多这样的网页在滚动的时候性能有多差。因为滚屏也有可能会造成reflow。

基本上来说，reflow有如下的几个原因：

  • Initial。网页初始化的时候。
  • Incremental。一些Javascript在操作DOM Tree时。
  • Resize。其些元件的尺寸变了。
  • StyleChange。如果CSS的属性发生变化了。
  • Dirty。几个Incremental的reflow发生在同一个frame的子树上。

好了，我们来看一个示例吧：

[javascript]var bstyle = document.body.style; // cache

bstyle.padding = "20px"; // reflow, repaint
bstyle.border = "10px solid red"; //  再一次的 reflow 和 repaint

bstyle.color = "blue"; // repaint
bstyle.backgroundColor = "#fad"; // repaint

bstyle.fontSize = "2em"; // reflow, repaint

// new DOM element – reflow, repaint
document.body.appendChild(document.createTextNode(‘dude!’));[/javascript]

当然，我们的浏览器是聪明的，它不会像上面那样，你每改一次样式，它就reflow或repaint一次。一般来说，浏览器会把这样的操作积攒一批，然后做一次reflow，这又叫异步reflow或增量异步reflow。但是有些情况浏览器是不会这么做的，比如：resize窗口，改变了页面默认的字体，等。对于这些操作，浏览器会马上进行reflow。

但是有些时候，我们的脚本会阻止浏览器这么干，比如：如果我们请求下面的一些DOM值：

  1. offsetTop, offsetLeft, offsetWidth, offsetHeight
  2. scrollTop/Left/Width/Height
  3. clientTop/Left/Width/Height
  4. IE中的 getComputedStyle(), 或 currentStyle

因为，如果我们的程序需要这些值，那么浏览器需要返回最新的值，而这样一样会flush出去一些样式的改变，从而造成频繁的reflow/repaint。

减少reflow/repaint

下面是一些Best Practices：

1）不要一条一条地修改DOM的样式。与其这样，还不如预先定义好css的class，然后修改DOM的className。

[javascript]// bad
var left = 10,
top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";

// Good
el.className += " theclassname";

// Good
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";[/javascript]

2）把DOM离线后修改。如：

  • 使用documentFragment 对象在内存里操作DOM
  • 先把DOM给display:none(有一次reflow)，然后你想怎么改就怎么改。比如修改100次，然后再把他显示出来。
  • clone一个DOM结点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。

3）不要把DOM结点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。

4）尽可能的修改层级比较低的DOM。当然，改变层级比较底的DOM有可能会造成大面积的reflow，但是也可能影响范围很小。

5）为动画的HTML元件使用fixed或absoult的position，那么修改他们的CSS是不会reflow的。

6）千万不要使用table布局。因为可能很小的一个小改动会造成整个table的重新布局。

In this manner, the user agent can begin to lay out the table once the entire first row has been received. Cells in subsequent rows do not affect column widths. Any cell that has content that overflows uses the ‘overflow’ property to determine whether to clip the overflow content.

Fixed layout, CSS 2.1 Specification

This algorithm may be inefficient since it requires the user agent to have access to all the content in the table before determining the final layout and may demand more than one pass.

Automatic layout, CSS 2.1 Specification

几个工具和几篇文章

有时候，你会也许会发现在IE下，你不知道你修改了什么东西，结果CPU一下子就上去了到100%，然后过了好几秒钟repaint/reflow才完成，这种事情以IE的年代时经常发生。所以，我们需要一些工具帮我们看看我们的代码里有没有什么不合适的东西。

  • Chrome下，Google的SpeedTracer是个非常强悍的工作让你看看你的浏览渲染的成本有多大。其实Safari和Chrome都可以使用开发者工具里的一个Timeline的东东。
  • IE下你可以用一个叫dynaTrace的IE扩展。

最后，别忘了下面这几篇提高浏览器性能的文章：

参考

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post 浏览器的渲染原理简介 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/9666.html/feed 155 CSS 布局:40个教程、技巧、例子和最佳实践 https://coolshell.cn/articles/6840.html https://coolshell.cn/articles/6840.html#comments Mon, 19 Mar 2012 00:25:46 +0000 http://coolshell.cn/?p=6840 【感谢 Neo 投递本文 – 微博帐号：_锟_ 】 前言： 布局是WEB开发一个重要的课题，进入XHTML/CSS后，使用TABLE布局的方式逐渐淡出，CSS布...

Read More Read More

The post CSS 布局:40个教程、技巧、例子和最佳实践 first appeared on 酷 壳 - CoolShell.]]> 【感谢 Neo 投递本文 – 微博帐号：_锟_ 】

前言： 布局是WEB开发一个重要的课题，进入XHTML/CSS后，使用TABLE布局的方式逐渐淡出，CSS布局以众多优点成为主流，本文将介绍40个基于CSS的web布局的资源和教程。文章的出处在http://www.noupe.com/css/css-layouts-40-tutorials-tips-demos-and-best-practices.html。文中的不少的例子在一本经典的CSS书籍《CCS: The Missing Manual, 2nd Edition》中都可以找到，据我所知，第二版在中国没有翻译出版。你可以从这里下载英文版（不过需要注册个用户名）

正文
基于CSS的布局能提供更灵活布局方式和更强的用户视觉体验。一些重要技巧和关键点可以帮助初学者理解CSS布局的基础和本质。这也是本文成文的原因 ——找到那些完美的布局，完全灵活的，等高栏和工作完美的布局。
因此下面这个列表就是我们整理了网络上关于基于CSS布局的一些技巧，教程和最佳实践的列表。
当然你也可能对下面这些和CSS相关的主题有兴趣：

The 7 CSS Hacks that we should use
Using CSS to Do Anything: 50+ Creative Examples and Tutorials
Using CSS to Fix Anything: 20+ Common Bugs and Fixes

CSS 布局教程

1-使用CSS完成三栏固定布局结构– 这篇文章解释了如何实现一个基于的HTML/CSS来设计一个简单的带有基本要素（顶部的logo条，导航条，文本区，定义分类的中部栏，右边侧栏插入google的120X600的广告区）的固定三栏页面布局。

2-使用CSS设计页面布局– 如何使用CSS文件来为你的站点设计页面布局。

3-如何创建一个水平布局的站点– 创建不同于常规的水平布局的站点技术（译者注：水平布局，客户体验也就仁者见仁了）


例子查看这里 |下载

4-超级简单的两栏布局– 创建不同于常规的水平布局的站点技术（译者注：这里是原作者笔误吧和上面的内容一样）.

例子查看这里 下载

5-简单两栏CSS布局– 这是一个创建简单两栏布局的教程。这种布局包含了一个标题区，一个水平导航条，主内容区，边侧栏，和页脚区。并且这个布局是水平居中的。

例子查看这里

6-圣杯布局(The holy grail layout) – 3栏布局会有一些问题 ，这篇文章讨论了一种三栏布局——两栏固定宽度边侧栏加上一栏变宽中栏布局，保证了页面的良好结构和清晰。

例子查看这里

7-CSS居中101– 如何使用CSS完成居中一个固定宽度的布局

使用CSS，通过下面两条规则完成对id为container的DIV所包含的内容居中

<body>
 <div id="container"> ...entire layout goes here...
</div>
</body>

body {
    text-align: center;
}
#container {
    margin: 0 auto;
    width: xxxpx;
    text-align: left;
}

8-从头创建CSS布局– 这个指南通过创建一个全功能的 CSS布局来一步步教你入门CSS布局。

9-非主流！多栏布局– 多栏布局，等高栏（每一列的高度都相等），固定或变宽中央区，简洁标记，CSS 。(译者注：原文作者的图配的和上图一样)

例子查看这里

10- 创建天下无双的CSS布局– 高灵活性布局,等高栏，跨栏垂直摆放元素。本文告诉你通过何等手段完成这些目标，并使用它们创建天下无双的CSS布局（译者注:原文是One True Layout ，不知道怎么翻译，就天下无双吧。）

查看这里

11-从PSD到HTML，手把手完成WEB设计-从Photoshop到完整HTML，全过程手把手教会你。

例子查看这里 | 下载

12- 5个XHTML/CSS技巧 – 5个CSS技巧帮助你完成从基于表格的布局到基于CSS的布局。

13-设计一个基于CSS的模板 – 这是一个教你创建基于CSS的模板页的基础教程。这个教程由下面几个部分构成：第一部分覆盖了在Photoshop CS*中的创建导航条按钮，第二部分：创建背景接下来的清单是标题和页面布局，最后的部分在XHTML和CSS中实现。

下载

14-使用CSS布局跳出常规布局– 如果你理解了基于表格布局的工作方式，你能通过合并或拆分表格创建你随心所欲的布局。就这个目标（同时支持灵活性和可维护性），CSS能够提供比基于表格更多地东西。Jina Bolton的教程解释如何达到这个目标。

15-高级CSS教程:手把手– 这个教程的终极目标创建一个CSS布局，这个CSS布局精确地重组了原有使用table的WebReference.com的布局。

16-了解CSS布局的6个关键要素-本文讲述了6件基于CSS布局需要了解的事情：盒模型(Box Model)，浮动栏(Floated Columns) （译者注：float是WEB布局最重要的一个属性了）。使用Em来设置尺寸（Sizing Using Ems），图片替换（Image Replacement）,浮动导航和Sprintes。

17-你会犯这些常见的博客布局错误吗？-讨论4个博客布局中常见而且易修复的错误。

18-页面布局-CSS页面布局中的浮动元素和定位元素实践指导。

你可以查看这些例子：Absolute Position within a relative box two floated boxes和 using a border to provide the background for a column

19-Site in an Hour– 使用复杂CCS布局完成简单的工作。

关于布局的最佳资源

下面的大多数这些资源不需要许可就能直接使用，然而，其中的一些需要先发邮件确认一下是否可以使用这些资源。因此，在使用之前最好先检查资源的版权信息。

20-简单CSS页面布局– 这里有一套2栏和3栏的CSS布局。

你可以通过这里查看这些样例 Liquid three column layout, Left aligned, set width and Liquid insanity.

21-完美的三栏变宽布局（百分比定宽度）The Perfect 3 Column Liquid Layout (Percentage widths)– 没有CSS hack（译者注：不知道怎么翻译，点击这里查看解释）. 良好地收索引擎优化.无图. 无Javascript. 跨浏览器 和IPHONE设备兼容

你可以通过这里查看样例 Liquid three column layout, Left aligned, set width 和 Liquid insanity. (译者注：这里的链接和上面重复了，哎，原文的错误吧)

22-CSS模板和样例

你可以通过这里查看这些样例 3 columns fixed centered, fixed Box totallycentered and 3 columns, alldynamic

23-IM 布局– IM 布局是一种简单地的CSS布局系统，IM布局提供了全A级的浏览器的支持。

你可以通过这里查看这些样例: The Holy Grail 3 Column Layout, The Classic Blog Layout 和 The Multi Column Layout.

24-CSSplay – CSS布局列表

你可以通过这里查看这些样例:Cross browser FIXED, Three columns and CSS Frame – The Holy Grill.

25-Layoutgala – 基于同样的的标记l得到最大数量的不同的布局方式。没有CCS hack，没有CSS workaround ，良好的浏览器兼容性。40种不同布局。

你可以通过这里查看这些样例:Three fixed Columns, Three percentage columns and Liquid, three columns, hybrid widths (吐槽：没有等高，不好看).

26-Glish– 许多有用的跨浏览器布局技术

你可以通过这里查看这些样例: 3 columns, the holy grail, 2 columns, ALA style and 3 columns, all fluid

27-Thenoodleincident– CSS 从简单的单盒到3盒并增加一个顶部条，所有都是变宽。

28-The Layout Reservoir– 很多有用的CSS布局技术

你可以通过这里查看这些样例: 2 columns – left menu, 3 columns – flanking menus和 Auto-width Margins .

29-The only CSS layout you need– 在这篇文章中将会为你展现10个基于同一的HTML的不同的的布局。

你可以通过这里查看这些样例: Three column CSS layout – left and right menu, Two column CSS layout – top and left menu 和 Three column CSS fluid layout: 100% width

30-另一个多栏布局-是一个创建当代流行的变宽的浮动布局的XHTML/CSS框架。这是一个多功能实用的布局。

点击这里下载.

31-Liquid Designs– 使用XHTML和CSS的变宽设计库。

最佳实践

如果你需要寻找一些布局灵感，你可以从下面的网站链接中找到。这些站点演示了CSS布局如何应用于不同类型的网站。查看这些网站是如何分成2栏或3栏，或混合宽栏和窄栏布局。

32-Helldesign

33-Silverbackapp

34-OS communications informatiques

35-Rockatee

36-Darrenhoyt

37-Makebetterwebsites

38-Elitetheme

39-Studio7designs

40-Brightcreative

(全文完)

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post CSS 布局:40个教程、技巧、例子和最佳实践 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/6840.html/feed 31 一些文章资源和趣闻 https://coolshell.cn/articles/5537.html https://coolshell.cn/articles/5537.html#comments Thu, 24 Nov 2011 04:39:04 +0000 http://coolshell.cn/?p=5537 下面是我这段时间来收集的一些有意思的东西。本站这样的文章还很多，如这个，这个，这个。 Javascript Garden，这是学习Javascript最好的网站...

Read More Read More

The post 一些文章资源和趣闻 first appeared on 酷 壳 - CoolShell.]]> 下面是我这段时间来收集的一些有意思的东西。本站这样的文章还很多，如这个，这个，这个。

Javascript Garden，这是学习Javascript最好的网站了。http://bonsaiden.github.com/JavaScript-Garden，这个文档由两具StackOverflow的人写成, Ivo Wetzel(Writing) 和 Zhang Yi Jiang (Design)，表示敬意。

想看看Web开发有哪些技术吗？你得看看这个网站：http://stackparts.com/，他对目前几乎所有Web上用得到的技术都分了个类。下面是个抓图。

Mozilla的安全编程规范 https://wiki.mozilla.org/WebAppSec/Secure_Coding_Guidelines Downloads associated to Software development

PHP,Perl, Ruby, Python语法比较http://hyperpolyglot.org/scripting?utm_source

图形游戏编程的电子书 http://ploobs.com.br/?p=766

图形编程黑皮书：http://drdobbs.com/high-performance-computing/184404919

Black Art of 3D Game Programming: Writing Your Own High-Speed 3D Polygon Video Games in C 

想学设计模式吗？这是一个非常好的网站：http://www.vincehuston.org/dp/ 以元素周期表的形式把23个经典模式列出来，让我想到了这几天在看的美剧Breaking Bad，呵呵。

Learn C the Hard Way http://c.learncodethehardway.org/book/

Learn Ruby the Hard Way http://ruby.learncodethehardway.org/book/

Learn Python the Hard Way http://learnpythonthehardway.org/

Learn SQL the Hard Way http://sql.learncodethehardway.org/book/

Linux基础学习：

相了解GIF吗？这里有篇不错的文章：http://matthewflickinger.com/lab/whatsinagif/bits_and_bytes.asp
如何在PC上通过VirtualBox装一个Android操作系统。 http://www.javacodegeeks.com/2010/06/install-android-os-on-pc-with.html 不过这篇文章有点老了，是去年的，最新的方式是使用Android-x86这个项目。

一些你可能不知道的git的tips：http://mislav.uniqpath.com/2010/07/git-tips/

一个给C/C++程序员用的Vim Plugin，我试用了一下，不是很好用。不过也许你会喜欢：http://www.fortystones.com/vim-plugins-c-cplusplus-developer/

数独游戏的程序算法，140个字节的一段javascript程序： https://gist.github.com/1230481/95f6facb74f51d089bea87eba0f470cf3bbed83a

一个教你用HTML5做一个画图版的教程：http://www.primaryobjects.com/CMS/Article134.aspx 其示例在这里 http://www.primaryobjects.com/paint/

这里又是一个HTML5的演示 http://www.spielzeugz.de/html5/sticky-thing/，一个物理的会粘在浏览器边框上的小方块，在iPad里演示相当有意思。只是其代码好像被搞得非常地不易读，不过，你可以试试这个工具来整理代码：http://jsbeautifier.org/，但是变量命名还是会让你毫无头绪。

HTML5的一个很炫的示例：http://lights.elliegoulding.com/  你可以用鼠标巡航，点左键加速（另，那位朋友知道其背景音乐？）

想用HTML5做股票图吗？看看这个库：http://www.rocketcharts.com/

一个7K的js，可以让你的HTML的列表很灵活的分类，排序，搜索，过滤：http://listjs.com/

一个OOP的PHP处理图片的类库：http://imagine.readthedocs.org

一个Javascript实现的H.264解码器。https://github.com/mbebenita/Broadway （演示地址 – 请用firefox打开，download速度可能很慢）不过，其是用Android C实现的，然后把C转成Javascript的代码。如果你想知道如何把C代码转成Javascript，你可以看看这个项目：https://github.com/kripken/emscripten – LLVM-to-JavaScript compiler。（变态！）

一个可以画流程图的Javascript lib – WireIt：http://neyric.github.com/wireit/

这是一个网站，仅用CSS，没有JS，没有图片做的N多公司的logo。但其可以用纯CSS做个动画，你可以看看：http://www.ecsspert.com/atari.php 研究了一下发现其用到了  -webkit-animation。

一个用bash处理JSON的脚本：https://github.com/rcrowley/json.sh

微软VS中的Debug Canvas,相当的不错啊。http://msdn.microsoft.com/en-us/devlabs/debuggercanvas，可惜只在 Visual Studio Ultimate里。

介绍一下很有意思的Firefox插件 Titl 3D，其项目主页在 https://github.com/victorporof/Tilt。这个插件使用WebGL可以3D地显示网页，安装好插件后，简单地按一下Ctrl+Shift+M就可以了。下面我用其显示了新浪微博和WebQQ。目前的功能不是很多，但是这个插件简直是太cool了——可以大胆的设想一下以后会不会有3D的网页。

最后，在网上看到一个笑话，如下：

这是给程序员们女朋友的建议。如果某程序员要和你分手，你可以参照这位国外程序员女友的作法——“你可以在facebook和twitter上拉黑我，也可以不回我的短信，但是，你永远不可能阻止我对你在Reddit上发的所有的贴投反对票！FUCK YOU ！”

就这些，希望对你会喜欢。

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post 一些文章资源和趣闻 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/5537.html/feed 81 那些曾伴我走过编程之路的软件 https://coolshell.cn/articles/5576.html https://coolshell.cn/articles/5576.html#comments Fri, 14 Oct 2011 05:58:40 +0000 http://coolshell.cn/?p=5576 收家的时候发现了一张VC++6.0的光盘，实然引发了我的怀旧情结。于是在微博上感叹了一下，看到一些朋友的回应，还有朋友提到了Turbo C 2.0，于是更回放大...

Read More Read More

The post 那些曾伴我走过编程之路的软件 first appeared on 酷 壳 - CoolShell.]]> 收家的时候发现了一张VC++6.0的光盘，实然引发了我的怀旧情结。于是在微博上感叹了一下，看到一些朋友的回应，还有朋友提到了Turbo C 2.0，于是更回放大了我的怀旧情绪，让我回想了很多N年前伴我走过编程之路的软件。现在看下来，有些感叹，又有些可笑。感叹的是技术发展的变迁，可笑的是当时的一些想法。（Unix/Linux是在大四和毕业的时候接触的，虽然这是我的强项，但是这下面的编程这么多年来没什么变化，所以就不提了）注：图片较多，请稍等。

还记得第一次接触编程是在高中的时候，用中华学习机学Basic程序，后来到了大学，虽然学校的课程没有教Basic语言，但是DOS下有一个叫Quick Baisc的东西让我把高中时的知识又捡了回了。

大学里学的第一门语言是Pascal，所以，用的编程软件也就是Turbo Pascal，还记编译起来巨快无比，尤其是那个只有软盘和640K的基本内存的时代。

在这里还需要提一点的是当时的一个学习打字指法的软件，TT，呵呵。还记得当时整日整夜的去机房练打字，练指法速度。还记得当时能打到38分就算是相当的NB了。

这是当时TT中的一个游戏，很好玩。

然后开始学C语言，于是Turbo C 2.0成为了那个时代的经典，我还记得当时学校里的386电脑没有内存，没有硬盘，只有两个软驱，一个是3寸的，一个是5寸，而Turbo2.0的大小太大（2M多）所以，得把所有的头文件和lib文件放在3寸盘上，而主程序员放在5寸盘上，A盘和B盘同时来编译我的C程序，编译的时候，那叫一个慢啊，那是一个听着软驱咯吱咯吱的声音的时代。

后来，用Turbo C 的图形库在DOS下画各种菜单，按钮，被支持鼠标等等，非常欢乐。（注：那时能写一个支持鼠标的程序是相当拉风的）

当时，Turbo C还是不足开发企业级应用，企业级的MIS系统需要数据库的支持，Foxbase是当时在学校里学的第一个和数据库有关的东西，现在完全忘 了。我还记得foxbase是当时计算机水平考试里的一个很重要的一环。

foxbase很快就淘汰了，举而代之能开发企业级应用的是FoxPro，看到FoxPro的强大，尤其是对菜单，表单，按钮等的支持，当时觉得这是世界上最NB的编程工具了。还跟着老师开发了一些MIS系统。后来听老师说，他们给昆明车管所使用foxpro来管理昆明的自行车，因为数据量太大，FoxPro经常崩溃。这可能是我听说过最早的电子政府系统了。

Win3.2/Win95下的Foxpro更不用说了，NB啊。当时的神器啊。

进入Win95图形界面时代Borland C++也是需要提一下的，只是当时学校没有C++的课程，所以完全不懂，而且因为Foxpro和其些如VB，Powerbuilder的RAD编程工具的泛滥，甚至觉得Borland C++和VC++完全没戏。呵呵。

PowerBuilder掀开了另一个企业级应用的时代，C/S结构。太强了，在大三大四的时候，在老师开的公司里用这个东西为丽江三合酒店，一个送水公司，还有云南省外事办公室开发过其MIS系统。使用PowerBuilder一直到2002年，交行总行国业务系统的前端，还有上海电信系统。今天还有人在用这个东西开发软件么？

VB也是一个划时代的产品，不过好像从来都是一个编程初学者的玩具，当时我学过VB，感觉其把编程搞成了一个搭积木的过程。我在当时草草地使用了VB，因为那时出了一个叫VB killer的东西——Delphi。

Delphi的时代是相当生猛的一个时代，企业级开发，自带数据库，可以制作各咱小工具软件和网络软件，等等，到后来的Delphi7还支持多层结构和分布式，在Delphi的时代，我记得那时的狂热，网上有很多超NB的控件可以让你开发出相当炫的界面。

还记得C++ Builder吗？搞得跟Delphi一模一样，但是编译的速度慢得实在是不行。

VC++的时代应用是从北大的《Windows编程设计》一书发布时开始的，这才是真正的SDK编程。于是我开始喜欢使用VC++了。一直到今天。VC++6.0是一个经典，直到今天的VS2008，我还是要把热捷和界面搞成VC6.0的风格。呵呵。

刚参加工作的时候，单位里用Lotus Notes做办公自动化软件的平台，于是我学习了怎么在Notes下开发应用。后来还用这个玩意给一些银行开发过一些办公自动化流程的应用。我有一个同学相当痴迷于这个平台。现在看来，有点非主流了。

在大三的时候，Java和WEB出现了，系上接到了一个项目，需要用HTML+Java的方式做一些在线的教学课件。但是，当时连一本HTML的书都没有，又上不了网，我只能在看一些盗版光盘里的HTML的文件的例子来学习。那时，基本上是用notepad来写HTML，这让我对HTML打下了非常扎实的基础。后来知道有一个叫HotDog的专门用来写HTML的软件，用了一段时间。

但最终还是使用了微软的FrontPage多一些，直到Dreamweaver的出现。

当时的开发环境用的是NetScape，就是下面这点鸟样的东西了。

在大三大四做那个操作系统的教学课件的时候，开发Java Applet的IDE主要是用Cafe，Java Workshop。当时用这些东西开发了一些Applet用来演示UNIX操作系统内存分配，进程调度，文件存储等算法的动画。还得了个大学生挑战者杯的鼓励奖。现在想想，如果当时有Flash的话，可能做这些演示动化就不用那么麻烦了。

总体来说，Java Workshop也不好用。还是更多的使用Cafe写Java程序。

毕业两年后在工作上因为要做IBM?Websphere上的应用，于是使用了IBM的Visual Age for Java，现在看来，这些IDE真是太土了。

关于Java的开发工具还有两个东西，一个是Microsoft的J++，另一个是Borland的JBuilder。J++ 就像是一个笑话，非标准的，据我所知没有人用。

JBuilder流行了很多年，还得了很多奖，几乎成了Borland的最后一个支柱产品，不过当时因为我皈依Linux/C/C++了，所以，也就没有搞Java了，不过这个IDE还是相当的优秀。不知道现在还有没有人用。不过，现在的Java IDE被Eclipse 一统山河了。

好了，上面是一些关于编程方面的，还有一些比较经典的软件如下。

一个是汉字平台，香港金山公司的UC-DOS，和WPS，当时的我还纳闷，为什么香港人也用简体中文了。对此，我心中对祖国的热爱小小的升华了。

还有杀毒软件，KV300和kill

帮朋友修电脑用得最多的就是PC Tools

玩游戏的必备——FPE

有谁还记得这个看图软件——SEA？

Zmud——当时的网游戏。也是需要练级。在大四和刚工作头一年疯玩过Zmud，之后，对于今天的这些大量的网游没有什么兴趣了。

还有当时用猫上网的年代，NetAnt成了下载软件的装机必备。下载速率平均只有3k-4kBps，这种生活是怎么过来的啊。哈。

相信你也有你自己的怀旧的故事，不妨分享一下。

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post 那些曾伴我走过编程之路的软件 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/5576.html/feed 157 一些文章和各种资源 https://coolshell.cn/articles/5224.html https://coolshell.cn/articles/5224.html#comments Tue, 20 Sep 2011 00:32:52 +0000 http://coolshell.cn/?p=5224 下面是近期收录的一些文章和资源，希望对你有用。 系统方面 印度的电子商务网站flipkart的性能扩展（PPT） http://www.slideshare.n...

Read More Read More

The post 一些文章和各种资源 first appeared on 酷 壳 - CoolShell.]]> 下面是近期收录的一些文章和资源，希望对你有用。

系统方面

Mozilla's Gecko rendering engine main flow
Mozilla's Gecko rendering engine main flow

各种教程


  • SQL注入口袋书（Google Doc 需翻墙），涵盖MySQL, MSSQL和Oracle，我觉得可以用来做你的程序的安全测试。
  • 一个超有意思的学习Javascript的在线课件了。下面的这个网页上有一个Web的命令行，你可以跟着他的提示去输入一些命令，并以此来学习Javascript，这个创意真是太好了，我觉得这应该推广到我们的学校中去，不是只听老师讲，还需要大家一起来动作。 http://www.codecademy.com/

Web库

django-google-charts

  • 一个新的HTML5+CSS3的JS库Kendo UI：http://demos.kendoui.com/ 这样的JS库有很多，如比较经典的ExtJS, YUI 和 jQuery。不过大家可以试试这个库。其支持移动设备。

AeroViewr

HTML 5

 编程规范

其它

  • 声讨PHP的一个slids http://zakx.de/phprant-en.pdf， 前面说到的两个网站都是使用PHP做到，不过，你可以通过这个PDF了解一下PHP有哪些地方不好。

—— 更新 2011.9.20  21:00 ——

@xzhaoyang 在留言中问我有没有C写CGI的文章，我看过最好的一篇是下面这篇：

http://www.tutorialspoint.com/cplusplus/cpp_web_programming.htm （注意翻墙）

（全文完）

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post 一些文章和各种资源 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/5224.html/feed 43 开源中最好的Web开发的资源 https://coolshell.cn/articles/4795.html https://coolshell.cn/articles/4795.html#comments Wed, 08 Jun 2011 00:28:52 +0000 http://coolshell.cn/?p=4795 文章来源：Best “must know” open sources to build the new Web。个人感觉这个收集贴收集成相当的全。 学习HTML...

Read More Read More

The post 开源中最好的Web开发的资源 first appeared on 酷 壳 - CoolShell.]]> 文章来源：Best “must know” open sources to build the new Web。个人感觉这个收集贴收集成相当的全。

学习HTML 5编程和设计

服务器端的软件

  • ★ Node.js 是服务器端的 JavaScript 环境，其使用了异步事件驱动模式。其让Node.js在很多互联网应用体系结构下获得非常不错的性能。 源码 和 实时演示。
  • PhantomJS 也是一个服务器端的 JavaScript API的WebKit。其支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG
  • Lighttpd 一个轻量级的开源Web服务器。新闻，文档，benchmarks, bugs, 和 download. Lighttpd 支撑了几个非常著名的 Web 2.0 网站，如：YouTube, wikipedia 和 meebo.
  • NGinx, 性能巨高无比的轻量级的Web服务器。比Apache高多了。花了6年的时间，终于走到了1.0版。
  • Apache HTTP Server 是一个很流行的并支持多个流行的操作系统的Web服务器。
  • ★ PHP 可能是最流行的服务器端的Web脚本动态处理语言。
  • 当然，还有 Ruby, Python, Erlang, Perl, Java, .NET, Android, C++, Go, Fantom,CoffeeScript, D, …

PHP 框架和工具

  • ★ WordPress 是一个基于博客系统的开源软件。参看《WordPress是怎么赢的？》
  • Drupal 是一个内容管理系统 (CMS).
  • Centurion 是一个新出现的开源 CMS ，一个灵然的 PHP5 Content Management Framework. 使用 Zend Framework, 其组件坚持通用，简单，清楚和可重用的设计原则。
  • phpBB 一个开源的论坛（国内的Discuz！更多）
  • ★ SimplePie : 超快的，易用的,  RSS  和 Atom feed PHP解析。
  • ★ PHPthumb, PHP 图片处理库
  • ★ PHPMailer 强大的全功能的PHP邮件库
  • PubSubHubbub协议，一个简单，开放， server-to-server 的 pubsub (publish/subscribe) 协议——Atom and RSS的扩展。
  • 更多的请参看 – 20个你应该知道PHP库 和 9个强大免费的PHP库

数据库

  • ★ Apache CouchDB 是一个面向文档的数据库管理系统。它提供以JSON 作为数据格式的REST 接口来对其进行操作，并可以通过视图来操纵文档的组织和呈现。.源码.
  • MonoQL 是一个采用PHP+ExtJS开发的MySQL数据库管理工具。界面极像一个桌面应用程序，支持大部分常用的功能包括：表格设计，数据浏览/编辑，数据导入/导出和高级查询等。
  • MariaDB 是MySQL的一个分支，由MySQL 创始人Monty Widenius 所开发。GPL，用来对抗Oracle所有的MySQL的license的不测。自Oracle收购SUN以来，整个社区对于MySQL前途的担忧就没有停止过。
  • ★ SQLite 不像常见的客户端/服务器结构范例，SQLite引擎不是个程序与之通信的独立进程，而是连接到程序中成为它的一个主要部分。所以主要的通信协议是在编程语言内的直接API调用。这在消耗总量、延迟时间和整体简单性上有积极的作用。整个数据库（定义、表、索引和数据本身）都在宿主主机上存储在一个单一的文件中。它的简单的设计是通过在开始一个事务的时候锁定整个数据文件而完成的。库实现了多数的SQL-92标准，包括事务，就是代表原子性、一致性、隔离性和持久性的（ACID），触发器和多数的复杂查询。不进行类型检查。你可以把字符串插入到整数列中。某些用户发现这是使数据库更加有用的创新，特别是与无类型的脚本语言一起使用的时候。其他用户认为这是主要的缺点。
  • SQL 在线设计编辑器，这一节的那个图片就是这个在线编辑器的样子了。一个画数据库图表的在线工具。很强大。

API 和 在线数据

在线代码和媒体编辑器

  • ★ CodeRun Studio一个基于JavaScript语言开发的跨平台的集成开发环境，它立足于云计算的设计思路，方便开发者在浏览器端便可以轻松开发、调试和部署网络应用程序。（参看《Coderun.com 在线开发IDE》）
  • Cloud9 IDE – 一个基于Node.JS构建的JavaScript程序开发Web IDE。它拥有一个非常快的文本编辑器支持为JS, HTML, CSS和这几种的混合代码进行着色显示。
  • ★ jsFiddle – Javascript的在线运行展示框架，这个工具可以有效的帮助web前端开发人员来有效分享和演示前端效果，其简单而强大 (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)
  • Akshell，一种云服务，它使用服务端的JavaScript和在线的IDE帮助开发者进行快速应用程序开发。 它还提供云托管，所以部署是即时的。
  • JSONeditor, 一个好用的JSON 编辑器
  • ★ TinyMCE 一个轻量级的基于浏览器的所见即所得编辑器，支持目前流行的各种浏览器，由JavaScript写成。
  • Ext Designer 是一个桌面应用工具，帮助你快速开发基于ExtJS 的用户界面。
  • ★  LucidChart，一款基于最新的html5技术的在线图表绘制软件，功能强大，速度快捷，运行此软件需要支持html5的浏览器。
  • Balsamiq Mockups, 产品设计师绘制线框图或产品原型界面的利器。
  • Color Scheme Designer 3 – 一个免费的线上调色工具
  • ★ Pixlr, 是一个来自瑞典基于Flash的免费在线图片处理网站。除了操作介面和功能接近Photoshop，还是多语言版本，支持简体中文。（以前酷壳介绍过）
  • Aviary, 是一个基于HTML5 的在线图片处理工具，可以很容易的对图片进行后期处理。 Aviary API
  • Favicon Generator, 线上favicon(16×16)制作工具。

代码资源和版本控制

  • ★ GitHub 是一个用于使用Git版本控制系统的项目的基于互联网的存取服务。
  • Git 是一个由Linus为了更好地管理linux内核开发而创立的分布式版本控制／软件配置管理软件。其巨快无比，高效，采用了分布式版本库的方式，不必服务器端软件支持，使源代码的发布和交流极其方便。
  • Google Code 谷歌公司官方的开发者网站，包含各种开发技术的API、开发工具、以及开发技术参考资料。
  • Google Libraries API Google 将优秀的 JavaScript 框架部署在其 CDN 上，在我们的网站上使用 Google Libraries API 可以加速 JavaScript 框架的加载速度。
  • Snipplr 一个开放的源代码技巧分享社区，号称Code 2.0。和一般的源码分享网站不同，它针对的并不是大型网站源码，而是一些编程的代码技巧。

JavaScript 桌面应用框架

  • ★ jQuery 是一个快速、简单的JavaScript library， 它简化了HTML 文件的traversing，事件处理、动画、Ajax 互动，从而方便了网页制作的快速发展。  源码, API, API浏览, 很不错的文档.
  • ★ 官方的 jQuery User Interface (UI) library (演示和文档). 源码,Themes Roller, Download.
  • YUI 2 — Yahoo! User Interface Library
  • Mootools, 一个超级轻量级的 web2.0 JavaScript framework
  • Prototype 提供面向对象的Javascript和AJAX
  • Dojo The Dojo Toolkit，一个强大的无法被打败的面向对象JavaScript框架。主要由三大模块组成：Core、Dijit、DojoX。Core提供Ajax,events,packaging,CSS-based querying,animations,JSON等相关操作API。Dijit是一个可更换皮肤，基于模板的WEB UI控件库。DojoX包括一些创新/新颖的代码和控件：DateGrid，charts，离线应用，跨浏览器矢量绘图等。
  • ★ Ext JS 4, 业内最强大的 JavaScript framework。
  • PHP.js, 一个开源的JavaScript 库，它尝试在JavaScript 中实现PHP 函数。在你的项目中导入PHP.JS 库，可以在静态页面使用你喜欢的PHP 函数。

JavaScript 移动和触摸框架

  • ★ jQuery Mobile : 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。我们将尽全力去满足这样的需求。 Sources.
  • Zepto.js Zepto.js 是支持移动WebKit浏览器的JavaScript框架，具有与jQuery兼容的语法。2-5k的库，通过不错的API处理绝大多数的基本工作。 Sources.
  • MicroJS : Microjs网站应用列出了很多轻量的Javascript类库和框架，它们都很小，大部分小于5kb。这样你不需要因为只需要一个功能就要加载一个JS的框架。
  • ★ PhoneGap :是一款开源的手机应用开发平台，它仅仅只用HTML和JavaScript语言就可以制作出能在多个移动设备上运行的应用。 Sources.
  • ★ Sencha Touch Sencha Touch 是一个支持多种智能手机平台（iPhone, Android, 和BlackBerry）的 HTML5 框架。Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备。
  • JQtouch, 是一个jQuery 的插件，主要用于手机上的Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的JavaScript 库。 Sources.
  • DHTMLX Touch 针对移动和触摸设备的JavaScript 框架。DHTMLX Touch基于HTML5，创建移动web应用。它不只是一组UI 小工具，而是一个完整的框架，可以针对移动和触摸设备创建跨平台的web应用。它兼容主流的web浏览器，用DHTMLX Touch创建的应用，可以在iPad、iPhone、Android智能手机等上面运行流畅。

jQuery 插件

  • Waypoints 是一个jQuery 用来实现捕获各种滚动事件的插件，例如实现无翻页的内容浏览，或者固定某个元素不让滚动等等。支持主流浏览器版本。
  • Lazy loader 插件可以实现图片的延迟加载，当网页比较长的时候，会先只加载用户视窗内的图片，视窗外的图片会等到你拖动滚动条至后面才加载，这样有效的避免了因图片过多而加载慢的弊端。
  • TweenJS : 一个简单和强大的 tweening / animation 的Javascript库。
  • Easings 类Css3的jQuery 动画插件
  • Spritely 这个插件可以创建出如flash一样的动画效果，比如：在页面上有一只飞动的小鸟，一个动态滚动的背景等。
  • File Upload, jQuery 文件上传插件4.4.1
  • Slideshow/Carousel 插件. Sources.
  • Supersized – 全屏式的背景/幻灯片插件
  • Masonry i一款非常酷的自动排版插件，这款jQuery工具可以根据网格来自动排列水平和垂直元素，超越原来的css. Sources.
  • jQuery 简单 Layout 演示，管理各种边栏式，可改变大小式的布局。
  • Flexigrid – jQuery 数据表插件
  • Isotope绝对是一个令人难以置信的jQuery插件，你可以用它来创建动态和智能布局。你可以隐藏和显示与过滤项目，重新排序和整理甚至更多。
  • Super Gestures jQuery 插件可以实现鼠标手势的功能。
  • MouseWheel 是由Brandon Aaron开发的jQuery插件，用于添加跨浏览器的鼠标滚轮支持。
  • AutoSuggest jQuery 插件可以让你添加一些自动完成的功能。
  • qTip 一个漂亮的jQuery 的工具提示插件，这个插件功能相当强大。
  • jQuery Charts and graphic 用来制作图表。
  • jQuery Tools– The missing UI library

其它 jQuery 资源

HTML5 视频播放器

  • ★ Popcorn.js 是一个HTML5 Video框架，它提供了易于使用的API来同步交互式内容，让操作HTML5 Video元素的属性，方法和事件变得简单易用。 (来自Mozilla)
  • LeanBack Player HTML5视频播放器,没有依赖任何JavaScript框架。支持全屏播放，音量控制，在同一个页面中播放多个视频。 (来自Google)
  • Vid.ly 为你上传的视频提供转换功能，并且为转换后的视频创建一个短网址。通过Vid.ly，让你的视频可以在14种不同的浏览器和设备上播放，不需要再去考虑将要浏览视频的人使用什么设备了，以避免各各软件巨头之间的利益之争带来了不兼容，给用户带来了巨大的困扰，短网址让你可以通过Twitter、Facebook等方式方便分享视频。Vid.ly还可以通过html代码嵌入到其他网页中。Vid.ly免费帐户空间为1GB，免费帐户也没有播放或浏览限制。

JavaScript 音频处理与可视化效果

  • ★ 使用HTML5 和 Flash, SoundManager V2 只用单一API的提供了可靠，简单和强大的跨平台的音频处理。
  • DSP, JavaScript的声音Digital Signal Processing
  • The Radiolab Hyper Audio Player v1, 带给你 WNYC Radiolab, SoundCloud 和 Mozilla Drumbeat
  • jPlayer, 一个 jQuery HTML5 音频/ 视频库，功能齐全的API

JavaScript 图形 和 3D

  • ★ Processing.js是一个开放的编程语言，在不使用Flash或Java小程序的前提下, 可以实现程序图像、动画和互动的应用。其使用Web标准，无需任何插件。
  • ★ Javascript 3D 引擎: ThreeJS 由 Mr Doob 开发，一个轻量级的 3D 引擎，不需要了解细节，傻瓜都能使用。这个引擎可以使用<canvas>, <svg> 和 WebGL.
  • Shader Toy, 一款使用WebGL的在线着色器编辑器(2D/3D). 基于在线的应用架构使您无需下载任何软件即可开始体验. Shader Toy包含大量实用着色器, 诸如光线追踪, 场景距离渲染, 球体, 隧道, 变形, 后期处理特效等.
  • PhiloGL, Sencha的PhiloGL是首个WebGL开发工具之一，提供了高水准的功能，来构建WebGL应用。Sencha创建了几个演示，来描述框架交互式3D虚拟化的能力，比如3D view of global temperature changes。
  • WebGL Inspector 你就Firebug等Web调试工具一样，这个是 WebGL的调试工具。
  • WebGL frameworks 由 Khronos Group 收集的一个WebGL框架列表。
  • EaselJS, 一个使用html5的canvas的 JavaScript 库. Sources.
  • JavaScript Game Frameworks 免费的JS游戏框架列表。另，可参看 JS游戏框架列表。
  • Raphaël是一个小型的JavaScript 库，用来简化在页面上显示向量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。参看Javascript向量图Lib–Raphaël
  • jQuery SVG 插件让你可以了 SVG canvas 进行交互。
  • Google chart tools –  参看本站的使用Google API做统计图
  • Arbor.js, 是一个利用webworkers和jQuery创建的数据图形可视化JavaScript框架。它为图形组织和屏幕刷新处理提供了一个高效、力导向布局算法。

JavaScript 浏览器接口 (HTML5)

  • ★ Modernizr – 是一个专为HTML5 和CSS3 开发的功能检测类库，可以根据浏览器对HTML5 和CSS3 的支持程度提供更加便捷的前端优化方案.Sources. 一个有用的列表 cross-browser Polyfills
  • HTML5Shiv : 该项目的目的是为了让IE 能识别HTML5 的元素。
  • Polyfills : 这个项目收集了一些代码片段其用Javascript支持不同的浏览器的特别功能，有些代码需要Flash。
  • YepNopeJS : 一个异步的条件式的加载器。Sources.
  • jQuery CSS3 Finalise : 是否厌倦了为每一个浏览器的CSS3属性加前缀？
  • ★ Amplify.js :一套用于web应用数据管理和应用程序通讯的 jQuery 组件库。提供简单易用的API接口。Amplify的目标是通过为各种数据源提供一个统一的程序接口简化各种格式数据的数据处理。Amplify的存储组件使用localStorage 和 sessionStorage标准处理客户端的存储信息，对一些老的浏览器支持可能有问题。Amplify’为jQuery的ajax方法request增加了一些额外的特性。 Sources.
  • History.js 优美地支持了HTML5 History/State APIs
  • Socket.IO Web的socket编程。

JavaScript 工具

  • ★  {{mustaches}} 小型的 JavaScript 模板引擎。
  • json:select(), CSS式的JSON选择器
  • HeadJS, 异步JavaScript装载。其最大特点就是不仅可以按顺序执行还可以并发装载载js。
  • JsDoc Toolkit是一款辅助工具，你只需要根据约定在JavaScript 代码中添加相应的注释，它就可以根据这些注释来自动生成API文档。
  • Responsive image, 一个试验性的项目，用来处理responsive layouts 式的图片。
  • UglifyJS是基于NodeJS的Javascript语法解析/压缩/格式化工具，它支持任何CommonJS模块系统的Javascript平台。
  • Dhteumeuleu, 交互式的 DOM 脚本和DHTML 的开源演示。
  • Backbone是一个前端 JS 代码 MVC 框架，被著名的 37signals 用来构建他们的移动客户端。它不可取代 Jquery，不可取代现有的Template 库。而是和这些结合起来构建复杂的 web 前端交互应用。如果项目涉及大量的 javascript 代码，实现很多复杂的前端交互功能，首先你会想到把数据和展示分离。使用 Jquery 的 selector 和 callback 可以轻松做到这点。但是对于富客户端的WEB应用大量代码的结构化组织非常必要。Backbone 就提供了 javascript 代码的组织的功能。Backbone 主要包括 models, collections, views 和 events, controller 。

客户端和模拟器

CSS3 和 字库

Website (FULL) 模板

  • ★ HTML5 Boilerplate 是一个HTML5 / CSS / js模板，是实现跨浏览器正常化、性能优化，稳定的可选功能如跨域Ajax和Flash的最佳实践。 项目的开发商称之为技巧集合，目的是满足您开发一个跨浏览器，并且面向未来的网站的需求。 Sources.
  • HTML5 starter pack 是一个干净的和有组织的目录结构，其可适合很多项目，还有一些很常用的文件，以及简单的Photoshop设计模板。
  • ★ Initializr 是一个HTML5 模板生成器，其可以帮你在15秒内创建一个HTML5的项目。
  • Animated Portfolio Gallery （教程）
  • Slick MobileApp Website 如果通过 jQuery 和 CSS 制作一个手机应用的网站。
  • RSS Reader 如果通过 jQuery Mobile 创建一个RSS Reader
  • ★ Single Page Applications 使用jQuery的朋友们 (Backbone, Underscore, …)创建单一页面。
  • Google TV Optimized Templates, 传统电视已经开始和网路融合，但现阶段产业仍然正在摸索之中，为此将来的网页亦会有结构上的改变。Google TV Optimized Templates是一个用HTML/JavaScript制成的开源软体，一如其名是一个对Google TV作出了最佳化的的网页范本，其特色是以遥控器作为操作的前提，令使用者无需输入任何文字就可以进行控制。未来除了会有专用遥控器外，还会采用智能手机透过W-iFi控制Google TV的方法。Optimized Templates的界面中左方会展示分类，右方会显示该分类下的影片截图，影片播放、切换、全画面表示都可透过键盘上的方向键、Backspace或Enter等键完成，方便今后的网站开发人员借镜。HTML5 版的模板使用了 Google TV UI library, jQuery  和 Closure 。

（全文完）

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post 开源中最好的Web开发的资源 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/4795.html/feed 124 一些有意思的贴子和工具 https://coolshell.cn/articles/3903.html https://coolshell.cn/articles/3903.html#comments Fri, 04 Mar 2011 00:25:39 +0000 http://coolshell.cn/?p=3903 又到了介绍各种杂项的时候了，正如以前的这三篇（这篇，这篇，和这篇）文章一样，本篇文章也给你介绍一些最近出现的一些有趣的东西。希望你能喜欢。 先说找工作吧，电影《...

Read More Read More

The post 一些有意思的贴子和工具 first appeared on 酷 壳 - CoolShell.]]> 又到了介绍各种杂项的时候了，正如以前的这三篇（这篇，这篇，和这篇）文章一样，本篇文章也给你介绍一些最近出现的一些有趣的东西。希望你能喜欢。

先说找工作吧，电影《该页无法显示》里的那个facebook主页上的招聘网页上是列了一堆问题，你可以去看看，你可以使用c/c++，Erlang，Haskell，Java，Perl，Python，PHP，Ruby来解题，不过只接受Unix/Linux下的版本， 不接受Windows的版本。无独有偶，DropBox的招聘网页上也是些算法题，大家可以过去看看，不过需要翻墙。（现在，对于美国互联网企业来说，如果你没有被C2C，说明你根本不存在，如果你没有被墙，说明你还不算成功）

接下来给大家介绍一些文档和教程吧，都是英文的。

  • Java和C#的完整比较。这是一个相当完整的比较Java和C#语言的网页。很有意思，有助于你了解Java和C#的各种特性和不同。
  • SQL 性能调优。这个文档覆盖了IBM DB2, MySQL, Oracle,PostgreSQL 和 Microsoft SQL Server。不过这个电子书还没有写完，你可以使用其RSS, twitter 或 Facebook 来跟踪其进度。
  • Clever Algorithms。这个电子书也是免费的。其主要面向一些AI和面向自然的算法，一共45个。其包括概率随机算法，迭代进化算法，物理算法，可能性算法，蚂蚁蜜蜂式算法，免疫算法，神经算法等。里面大量的高等数学公式对我来说我已经看不懂了。不过，我相信这个电子书非常适合搞理论研究的人，或是需要抄袭一篇论文以顺利毕业的人使用。
  • HTML5 Audio & Video 处理。这是一组在线的幻灯片，请使用键盘光标键翻页。这是一组带着各种演示的幻灯片，对于你要学习HTML5的声音和视频相关的知识很有帮助。
  • C 语言的宏。你想知道C语的宏有哪些有些意思的用法吗？这篇文档不会让你失望的。其由浅入深地向你介绍了宏的各种用法。
  • 物理模拟F#教程。相信你一定玩过那种游戏，画一个任意形状的石头，其会从天上落下以砸下面的一个东西，这个教程用.NET的F#向大家说明了这种东西怎么去做。（演示程序）

  • GNOME开发介绍。这是一个非官方的介绍GNOME应用开发的教程，简单清楚，很适合初学者。
  • 10分钟学会Python。是的，也许你和我一样，很恨这样几天就学好一门语言的书，比如：21天学好C++。这个更夸张，10分钟。TNND。不过，当我看了一下后，我觉得其很适合初学者对Python有一个感性的认识。
  • CSS阴影教程。这是一篇教你种CSS做出种式样式的阴影效果的教程，这里是演示。

下面，再让我给你介绍一些和Web开发相关的开源的库。

  • Photon。这是一个号称高性能的轻量级的PHP应用服务器框架。号称比Zend，Symfony和mod_php快3-10倍。
  • ChemDoodle。这是一个用来画一些化学分子式的基于HTML5的类库和API，支持2D/3D，很强大。兼容于所有产商的支持HTML5的浏览器。
  • Pattern。这是东东很强大，用于做Web挖掘，其有一组工具用来从Google, Twitter, Wikipedia，Web爬虫，HTML上获得数据，并进行文本分析和数据图形化显示。你可以上这里看看相关演示。
  • Titanium Mobile。你想让你的代码同时支持iPhone和Android吗？这是一个跨平台的开发工具。这里有一个教程。
  • CSS3的按钮。这里可以去下载一个CSS3的库，里面有N多的按钮风格，感觉都很酷。

接下来，介绍一些小工具。

  • Web兼容性表。你想看看各种浏览器对HTML5，CSS3，SVG的支持吗？这个网站可以让你看到所有的主流浏览器的兼容表。
  • qgrep。嫌grep不够快吗？试试qgrep吧，支持OSX,  Linux 和 Windows。
  • XKeymacs。你有Emacs情结吗？如果有的话，试试这个工具吧，在windows里到处c-x c-c, c-x c-s, c-p, c-n什么什么的。挺有意思的。好吧，不是有意思，是BT。
  • Sublime Text 2。虽然目前只是Alpha版本，但是这个看上去真的很不错。尤其是用来查看代码。支持Windows, Linux和OSX。
  • VS-Android。这个项目让你可以在Visual Studio 2010的IDE下开发Android NDK C/C++的程序。

其它东西。

  • 脚本语言排名。这个网页不但对所有的脚本语言进行了排名，还对一些操作进行了比较。

就这么多吧，也许没什么意思，那也请你见谅了。

（全文完）

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post 一些有意思的贴子和工具 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/3903.html/feed 24 Web开发人员速查卡 https://coolshell.cn/articles/3684.html https://coolshell.cn/articles/3684.html#comments Wed, 16 Feb 2011 10:59:06 +0000 http://coolshell.cn/?p=3684 无论你是多牛的程序员，你都无法记住所有的东西。而很多时候，查找某些知识又比较费事。所以，网上有很多Cheat Sheets，翻译成小抄也好 ，速查卡也好，总之就...

Read More Read More

The post Web开发人员速查卡 first appeared on 酷 壳 - CoolShell.]]> 无论你是多牛的程序员，你都无法记住所有的东西。而很多时候，查找某些知识又比较费事。所以，网上有很多Cheat Sheets，翻译成小抄也好 ，速查卡也好，总之就是帮你节省 时间的。之前给大家介绍过Web设计的速查卡、25个jQuery的编程小抄，还有程序员小抄大全，今天转一篇开发人员的速查卡，源文在这里。下面的文章我就不翻译了。

HTML Cheat Sheet

CSS Cheat Sheets

Adobe Flash Cheat Sheets

ASP Cheat Sheets


PHP Cheat Sheets

MySQL Cheat Sheets

JavaScript Cheat Sheets

jQuery Cheat Sheets

Unicode Cheat Sheets

XML Cheat Sheets

mod_rewrite and .htaccess Cheat Sheets

（全文完）

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post Web开发人员速查卡 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/3684.html/feed 22 HTML5 logo 发布 https://coolshell.cn/articles/3561.html https://coolshell.cn/articles/3561.html#comments Sun, 23 Jan 2011 00:47:19 +0000 http://coolshell.cn/?p=3561 2011年1月19日，W3C发布了HTML5的log，打开W3C的页面，下在的图片印入眼前。我的第一感觉，就像是看到了小时候看的八一电影制片产的电影。这分明是号...

Read More Read More

The post HTML5 logo 发布 first appeared on 酷 壳 - CoolShell.]]>

2011年1月19日，W3C发布了HTML5的log，打开W3C的页面，下在的图片印入眼前。我的第一感觉，就像是看到了小时候看的八一电影制片产的电影。这分明是号召全世界的无产Web程序员们团结起来，不畏艰难，不怕牺牲，一定要把HTML5的革命事业进行到底！

所以，请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章（关于各个徽章的含义，请参看这里）

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage

更重要的是，在你们的代码里加上这样的注释：

<!--
.... This website is built in HTML5 ....
...       ..... ......... ....... ......
..     MM  MM NMMMMM MMM MMM..MM  . ....
.      MMMMMM...MM ..MMMMMMM..MM. ......
.      MM77MM...MM . MM.M.MM..MM........
.      MM  MM   MM   MM.  MM..MMMMM.....
.             . .   ....................
. . ================================....
.   7777777777777777777777777777777+....
.   7777777777777777IIIIIIIIIIII777.....
.   7777777777777777I77777I7I777777.....
.   7777777777777777I777I7I7I777777.....
. ..777777,,,,,,,,,,.........,7I777.....
. ..=77777,,,,,,,,,,..   .. .+II777...
  ...77777,,,,777777777777777II7777.....
  . .77777,,,,777777IIIIIIIIIIII77? ..
  ...77777,,,,777777IIIIIIIIIIII77:.....
  ...77777:,,,,,,,,,        .I7777.
  ...77777?,,,,,,,,,... ... .II777. ...
  .. 777777777777777IIII=   .II777.  .
  .. I77777777777777IIII....~II777.. .
  ...,77777,,,,77777IIII    III77$   .
. ....77777,,,,77777IIII    III777
. ....77777,,,,,,,,,... ... III77,. ...
. ....77777,,,,,,,,,       .III77.
  ..  7777777777,,,,...=7IIIII777.. ....
  ....$7777777777777IIIIIIIIII777    .
  ....I7777777777777IIIII7I777777.. ....
  .... .7777777777777777777777$~... ....
  ...     ...~$777777777$7. ....... ....
  ...  .  .........+....................
  ...     ............ .  . .. .  . .. .
-->

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post HTML5 logo 发布 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/3561.html/feed 6 JS游戏引擎列表 https://coolshell.cn/articles/3516.html https://coolshell.cn/articles/3516.html#comments Thu, 20 Jan 2011 02:43:08 +0000 http://coolshell.cn/?p=3516 这里有一个网址收集了关于JS游戏引擎开发库的一个列表，转过来。关于使用JS和HTML5做的一些小游戏，可参见《HTML5 小游戏展示》 游戏引擎 Name La...

Read More Read More

The post JS游戏引擎列表 first appeared on 酷 壳 - CoolShell.]]> 这里有一个网址收集了关于JS游戏引擎开发库的一个列表，转过来。关于使用JS和HTML5做的一些小游戏，可参见《HTML5 小游戏展示》

游戏引擎

Name Latest Release License Type Notes
The Render Engine 1.5.3 MIT 跨浏览器; 大规模 API; 开源. 2
gameQuery 0.5.1 CC BY-SA 2.5 和 jQuery 一起使用
gTile 0.0.1 Tile based
Akihabara 1.3 GPL2/MIT Classic Repro 基于JS+HTML5的街机风格的游戏 3
The Javascript 2D Game Engine GPL 注重于重力、物理、碰撞检测方面，使用HTML5 Canvas 和IE的ExplorerCanvas 低CPU消耗. 4
The GMP Javascript Game Engine 1.7.4 (2010-10-31) GPL2/MIT 注重于数度的操作简化，”easy to learn and use” 5
Crafty 0.1 GPL/MIT 轻量级和模块化。 6
Effect Games
PropulsionJS 1.1 MIT 使用 HTML5 Canvas. 7
Flax Apache 2.0 还没有released。使用 GWT 和 HTML5。关注于Linux和Mac OS上的Web游戏开发。8
j5g3 GPLv3 还在开发过程中
cssgameengine 用于初学者。

jsGameSoup v74 LGPLv3
Javascript Gamelib 2.10
Sarien.net interpreter GPL 2D Adventure
jGen Isometric
Isogenic Engine Isometric
GammaJS 1.0 MIT 2.5D Platform
Tom’s Halls 3.0 Platform
Diggy BSD 基于 DHTML, 正在暂停中
Impact Commercial ($99) 2D
Rocket Engine Commercial
Aves Commercial?
Rosewood 2D
Cocos2D BSD 2D
GameJS MIT 2D CommonJs; 可以和 RingoJs server 整合，很像 PyGame; 仅支持Canvas;
xc.js BSD 2D
vegalib LPGL
ClanFX 0.0.1 Tile based
Canvex FPS
bdge Demo
js-verge 2D Demo
FlixelJS 2D Demo Port of Flixel (Flash) to JS. Announcement thread.
Unity3D Commercial (free version too) JS backend

3D 引擎

相比起成熟的游戏引擎来说，这些引擎没有包括诸如AI、声音、游戏逻辑、网络等等功能，不过，你可以使用别的一些JS库来辅助完成这些功能。

Name Latest Release License Notes
Pre3d Demo
three.js MIT
C3DL 2.1 (?) MIT
CopperLicht 1.3.2 (?)
JS3D 0.1a (2007-02-05) GPL
Sandy 3D 由Haxe编辑成 JS
O3D BSD
GLGE 0.5.2
SpiderGL

碰撞检测

动画

Name Latest Release License Notes
sprite.js VIEW Created with goal of having common JS framework for dsktop and web. 1

声音

图形

Canvas

Name Size (KB) License IE SVG Docs Notes
canto.js 56
fabric.js 97 yes yes yes Demo
gury.js 10 yes
CAKE 211
Mootools Canvas Library (MCL) 8
HTML5 Canvas Library 12
Layered Canvas Library (LCL) 21
Artisan.js 17
canvg 78.3 yes no
burst 56 yes 没有维护了
easel.js 33 MIT no no yes 尝试像Flash的DisplayList 一样在 Canvas 上创建图形。
processing.js
toxiclibsjs LPGL2.1 和 processing.js 结合和很好
CAAT MIT
Unveil.js
doodle.js BSD

注意，文件尺寸比较并不一定准确，因为有些lib并没有压缩过。

WebGL

Color

  • color.js – 颜色管理工具。 MIT

Math

其它

  • PlayMyCode – 在线游戏社区。使用 Quby (像Ruby) 编译成JavaScript.
  • Sphere RPG Engine – 为 RPG 游戏设计。使用 JavaScript
  • playtomic – Commercial service providing analytics, leaderboards etc. services for games. Provides HTML5/JS API in addition to AS2/AS3 ones.

(全文完)

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post JS游戏引擎列表 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/3516.html/feed 88 一些有意思的网站和贴子 https://coolshell.cn/articles/3480.html https://coolshell.cn/articles/3480.html#comments Tue, 18 Jan 2011 00:53:24 +0000 http://coolshell.cn/?p=3480 各位朋友，又到了介绍各种杂项的时候了，正如以前的这篇和这篇文章一样，本篇文章也给你介绍一些最近出现的一些有趣的东西。希望你能喜欢。 首先是华尔街的一篇报道，20...

Read More Read More

The post 一些有意思的网站和贴子 first appeared on 酷 壳 - CoolShell.]]> 各位朋友，又到了介绍各种杂项的时候了，正如以前的这篇和这篇文章一样，本篇文章也给你介绍一些最近出现的一些有趣的东西。希望你能喜欢。

  • 首先是华尔街的一篇报道，2011年最好和最不好的工作，其引用了CareerCast.com的数据，其列出了100个工作种类，并根据薪资、工作环境、工作鸭梨、体力消耗和就业前景做了一个排序。结果排第一位的是“软件工程师”，其理由是：高科技产品的需求呈爆炸式增长，以及人们对iPod、平板电脑、和其它科技产品应用软件的喜好，软件工程师被评为最佳职业。软件工程师有弹性工作时间，可以在家办公，而且每个月都有猎头找来。而最差是的则是码头工人。
[bestjobspromo]
  • 接下来是一个叫“Java pass by value”的长贴，楼主说有一天在LinkedIn.com上看到了Java Group里有人讨论Java是pass by value的，长达240+贴子。贴子里说，如果你使用Java的原始类型如int, long，就是传值，如果你用object, array，其实传的是一个引用的拷贝，所以，Java是传值的。呵呵，你觉得有道理吗？于是，成就了这个大讨论战。reddit.com上也有N多的回贴。有空可以看看。

  • 然后是两个网站，不知道你是否还记得我们介绍的那个Windows 3.1的Web网站，用Web来实现一切看来是迟早的问题。下面，让我们来看两个网站：

如果以后的上网设备必然是以移动为主，那么Web开发中的HTML+ Javascript将有可能成为最所有应用都需要去支持的东西。

  • 不知道大家知不知道微软xbox 360上的Kinect？其是XBox的一个硬件插件，有点类似于Wii，不过它的强大之处在于，你只需要用你的肢体动作就可以玩游戏了，不需要手上拿个什么。现在，几乎全世界的程序员都在hack这个东东，有人还用他玩WoW，也是强大。这里有一个教程教你如何通过openkinect.org和C#开发点自己的小玩意。
  • 相试着写一个最简单的操作系统吗？这里有一篇教程教你用x86的汇编做一个操作系统，如果你想走得更远，可以看看MikeOS project。

HTML5 Canvas Cheat Sheet
HTML5 Canvas Cheat Sheet
  • Mono开始支持Android。Mono是一个由Novell公司（先前是Ximian）主持的项目。该项目的目标是创建一系列符合ECMA标准（Ecma-334和Ecma-335）的.NET工具，包括C#编译器和共通語言執行平臺。与微软的.NET Framework不同，Mono项目不仅可以运行于Windows系统上，还可以运行于Linux，FreeBSD，Unix，Mac OS X和Solaris。这个项目叫MonoDroid。

 

  • 最后来一个给力的教程吧，这是一个关于教你如何制作一个3D的LED显示的教程，相当的详细，甚至教你如何上ebay采购相关的电子元件和设备，还有如何编程，有兴趣的朋友可以一读。

Led Cube 8x8x8

 

这回就这么多，希望你喜欢。

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post 一些有意思的网站和贴子 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/3480.html/feed 23 一些杂项资源 https://coolshell.cn/articles/3437.html https://coolshell.cn/articles/3437.html#comments Fri, 31 Dec 2010 05:00:00 +0000 http://coolshell.cn/?p=3437 以前给大家介绍过一些非常有意思的杂项资源，今天再给大家介绍一些。（虽然没有上次的多，也算是一个新年礼物吧） 首先，如果你想在你的web页上做一个小提示，你不妨到...

Read More Read More

The post 一些杂项资源 first appeared on 酷 壳 - CoolShell.]]> 以前给大家介绍过一些非常有意思的杂项资源，今天再给大家介绍一些。（虽然没有上次的多，也算是一个新年礼物吧）

  • 首先，如果你想在你的web页上做一个小提示，你不妨到http://projects.nickstakenburg.com/tipped上看看，各种各样的提示风格，很不错。而且兼容于四大主流浏览器——Chrome, Firefox, IE, Safari。

image_thumb47

  • 如果你想学习Emacs，而又不害怕这样的学习曲线，那么，这里有一篇相当不错的教程供你参考：http://textmate2.com/

Ediff mode screenshot

  • 如果你对2010年的好莱坞电影票房和排行情况想有一个整体的了解的话，这里有一个很不错的图示：http://www.xach.com/moviecharts/2010.html，阿凡达，艾丽斯梦游仙梦，钢铁侠，史端克，幕色，盗梦空间，玩具总动员，哈里波特……可能还有很多你没有看过的电影，你可以上http://www.kickasstorrents.com/上下载看看。

祝大家新年快乐！！

（全文完）

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post 一些杂项资源 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/3437.html/feed 22 流体力学的演示 https://coolshell.cn/articles/3421.html https://coolshell.cn/articles/3421.html#comments Tue, 21 Dec 2010 00:49:35 +0000 http://coolshell.cn/?p=3421 某人用Java搞了一个流体力学的演示。 http://grantkot.com/MPM/Liquid.html 不过，这仅仅是个开始。某同学将其发布上了redd...

Read More Read More

The post 流体力学的演示 first appeared on 酷 壳 - CoolShell.]]> 某人用Java搞了一个流体力学的演示。

http://grantkot.com/MPM/Liquid.html

不过，这仅仅是个开始。某同学将其发布上了reddit.com，于是，全世界的同学们开始给力了——

Flash的开发者首先不服，搞了个 flash版（带源码）：

http://wonderfl.net/c/yxe9

看到了Flash版，Javascript+HTML5的同学们也不干了，于是出现HTML5版（带源码）：

http://www.music.mcgill.ca/~sinclair/content/blog/liquid_simulator_ported_to_canvas

不过性能慢了很多，所以，又有人优化了一下HTML5版的程序:

http://jsbin.com/unovo4

SVG的同学们也不甘寂寞，不过，那真叫一个慢啊。

http://ulo.pe/js-liquid-svg/

这个时候，C/C++同学出来了，使用SDL库也搞了一个：

http://q3k.org/fluidsim.zip

——————

短短几天里，被人重写成各种语言。这个程序写起来真的很简单吗？是我out了吗？

更新- iPhone和iPad版的： http://www.infi.nl/blog/view/id/98/Liquid_on_iPhone_and_iPad

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post 流体力学的演示 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/3421.html/feed 41