极客无极限 一行HTML5代码引发的创意大爆炸

标签: HTML5&CSS3 前端观察 contenteditable HTML5 极客 | 发表时间:2013-03-02 08:30 | 作者:小魁天下
出处:http://www.csscoo.com
一行HTML5代码能做什么?国外开发者Jose Jesus Perez Aguinaga写了一行HTML5代码的文本编辑器。这件事在分享到Code Wall、Hacker News之后,引起了众多开发者的注意,纷纷发表了自己的创意。 这是最初的HTML5代码,它可以运行在最新的Chrome和Firefox中,只需在浏览器地址栏输入如下代码:
  data:text/html, <  html   contenteditable>
但是功能十分有限,甚至没有保存功能,样式也非常简陋。 于是,网友Montas修改了他的代码,使用textarea标签代替html标签,可以添加自己喜欢的样式:
  data:text/html, <  textarea   style  =  "font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none"   autofocus />
网友jecxjo希望能有存储功能:
  data:text/html,<  button   onClick  =  "SaveTextArea()"  >Save</  button  > <  script   language  =  "javascript"   type  =  "text/javascript"  > function SaveTextArea() { window.location = "data:application/octet-stream," + escape(txtBody.value); } </  script  > <  textarea   id  =  "txtBody"   style  =  "font-size: 1.5em; width: 100%; height: 100%; boarder: none; outline: none"   autofocus> </  textarea  >
但上面的代码是以文件形式存储,samsonjs觉得不够方便,而且需要点击按钮,于是添加了自动保存功能:
  data:text/html,<  html   lang  =  "en"  ><  head  ><  style  > html,body { height: 100% } #note { width: 100%; height: 100% } </  style  > <  script  > var note, html, timeout; window.addEventListener('load', function() { note = document.getElementById('note'); html = document.getElementsByTagName('html')[0]; html.addEventListener('keyup', function(ev) { if (timeout) clearTimeout(timeout); timeout = setTimeout(saveNote, 100); }); restoreNote(); note.focus(); }); function saveNote() { localStorage.note = note.innerText; timeout = null; } function restoreNote() { note.innerText = localStorage.note || ''; } </  script  > </  head  ><  body  ><  h1  >Notepad (type below, notes persist)</  h1  > <  p   id  =  "note"   contenteditable  =  ""  ></  p  > </  body  ></  html  >
现在可是云时代!仅仅这样怎能让开发者止步?minikomi使用了第三方API打造了一个在线编辑器:
data:text/html,
<style type="text/css">
#e {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
font-size:16px;
}
</style>
<div id="e"></div>
<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js"></script>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
var myKey="SecretKeyz";
$(document).ready(function(){
var e;
var url = "http://api.openkeyval.org/"+myKey;
$.ajax({
url: url,
dataType: "jsonp",
success: function(data){
e = ace.edit("e");
e.setTheme("ace/theme/tomorrow_night_eighties");
e.getSession().setMode("ace/mode/markdown");
e.setValue(data);
}
});

$("#e").on("keydown", function (b) {
if (b.ctrlKey && 83 == b.which) {
b.preventDefault();
var data = myKey+"="+encodeURIComponent(e.getValue());
$.ajax({
data: data,
url: "http://api.openkeyval.org/store/",
dataType: "jsonp",
success: function(data){
alert("Saved.");
}
});
}
});
});
</script>
没有代码高亮功能的编辑器终究不适合程序员,Rails开发者jakeonrails又定制了Ruby代码高亮功能:
  data:text/html, <style type=  "text/css"  >  #e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="   http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script>
效果如下图: 实际上,如果minikomi的代码已经支持多种语言高亮,如Python,只需要把“markdown”换成“python”,效果如下: 你以为到此为止了?中国开发者assassindesign觉得只是文本编辑器就太无聊了,又提供了涂鸦版本:
  data:text/html, <  body  ><  canvas   id  =  "dyDraw"  >你的浏览器不支持HTML5 Canvas</  canvas  ></  body  ><  script  >function $(id){return document.getElementById(id);} $('dyDraw').width=document.body.clientWidth;$('dyDraw').height=document.body.clientHeight;if(window.addEventListener){window.addEventListener('load',function(){var canvas,canvastext;var hua=false;function dyDrawing(){canvas=$('dyDraw');canvastext=canvas.getContext('2d');canvas.addEventListener('mousedown',canvasMouse,false);canvas.addEventListener('mousemove',canvasMouse,false);window.addEventListener('mouseup',canvasMouse,false);} function canvasMouse(dy){var x,y;if(dy.layerX||dy.layerX==0){x=dy.layerX;y=dy.layerY;}else if(dy.offsetX||dy.offsetX==0){x=dy.offsetX;y=dy.offsetY;} x-=dyDraw.offsetLeft;y-=dyDraw.offsetTop;if(dy.type=='mousedown'){hua=false;canvastext.beginPath();canvastext.moveTo(x,y);hua=true;}else if(dy.type=='mousemove'){if(hua){canvastext.strokeStyle="rgb(255,0,0)";canvastext.lineWidth=9;canvastext.lineTo(x,y);canvastext.stroke();}}else if(dy.type=='mouseup'){hua=false;}} dyDrawing();},false);}</  script  >
还等什么呢?赶快试试看吧! 极客的创意的无穷的,你们是否有更好的创意,欢迎跟帖!

相关 [极客 无极 html5] 推荐:

极客无极限 一行HTML5代码引发的创意大爆炸

- - CSS库
国外开发者Jose Jesus Perez Aguinaga写了一行HTML5代码的文本编辑器. 这件事在分享到Code Wall、Hacker News之后,引起了众多开发者的注意,纷纷发表了自己的创意. 这是最初的HTML5代码,它可以运行在最新的Chrome和Firefox中,只需在浏览器地址栏输入如下代码:.

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日,W3C发布了HTML5的log,打开W3C的页面,下在的图片印入眼前. 我的第一感觉,就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来,不畏艰难,不怕牺牲,一定要把HTML5的革命事业进行到底. 所以,请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章(关于各个徽章的含义,请参看这里).

HTML5新特性

- - CSDN博客推荐文章
 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条. 颜色值使用方法和CSS 一样:十六进制数、rgb()、rgba() 和 hsla. 通过 fillRect可以绘制带填充的矩形. 使用 strokeRect 可以绘制只有边框没有填充的矩形. 如果想清除部分 canvas可以使用clearRect.

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div,不过,它的长和宽不能通过css来定义,要使用标签属性:. 或者javascript对象属性设置:. 使用canvas,只有一种操作方式,使用javascript. 获得canvas对象的上下文对象,该对象是操作canvas的主要对象:. 使用canvas画最简单的线, 点击运行示例,结果看起来是这样:.

【转载】HTML5 Messaging

- - HTML5研究小组
HTML5 的Message API能够让HTML5页面之间传递消息,甚至这些页面可以不在同一样域名下. 为了让消息能从一个页面发送到另一个页面,主动发送消息的页面必须拥有另一个页面的窗口引用. 然后发送 页面针对接受页调用 postMessage() 方法. postMessage() 方法中 origin 参数的值必须与页面所在的iframe的域名相匹配.

HTML5漫谈(4)–HTML5应用平台:PhoneGAP

- - HTML5研究小组
(  程宝平 chengbp @gmail.com). http://phonegap.com)按官方说法,是HTML5移动应用平台,它包括两部分:. 1)       应用开发框架:采用Web/HTML5技术编写应用,支持设备能力(如GPS、重力感应等)调用;支持能力插件灵活扩展. 图1 PhoneGAP支持设备能力API列表.

Adobe、标准和HTML5 -HTML5 and CSS3 开发

- - HTML5研究小组
“[提供商之间的]最激烈的竞争将与 标准密切相关. 大部分聪明人的眼睛将紧盯着技术标准. 但在计算机行业,新标准既可能是无限财富的源泉,也可能导致企业帝国的毁灭. 尽管存在着如此多的风险,标准仍然点燃了无限激情”. —The Economist, 1993年2月23日. 在编写这段有关标准化的话时,计算领域的主要争议是Unix是否是一个可行的操作系统(以及是否为IBM、DEC和HP的更多专用操作系统带来了挑战),以及哪个视窗平台(SUN/AT&T还是IBM/DEC/HP)将成为标准.

HTML5新特性之CSS+HTML5实例

- - CSDN博客Web前端推荐文章
1、新的DOCTYPE和字符集. HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. HTML5引入了很多新的标签,根据内容和类型的不同,被分为7大类. 语义化标签可以简化HTML页面设计,并且将来搜索引擎在抓取和索引网页的时候,也会利用这些元素的优势. HTML5的宗旨之一就是存在即合理.

HTML5设计原理

- jessie - 蓝色理想
Jeremy Keith在 Fronteers 2010 上的主题演讲 下载PPT(PDF) 观看视频 今天我想跟大家谈一谈HTML5的设计. 主要分两个方面:一方面,当然了,就是HTML5. 我可以站在这儿只讲HTML5,但我并不打算这样做,因为如果你想了解HTML5的话,你可以Google,可以看书,甚至可以看规范.

HTML5的SEO探索

- Amo - HTML5研究小组
所有现代浏览器对HTML5的支持问题不大. HTML5被智能手机浏览器和越来越多的网站广泛的采用,甚至作为最优的选择. 但是,Googlebot,Bidubot等其他搜索引擎呢. 引擎是否会由于HTML5这任何额外因素,在搜索结果中优先推荐您的网站吗. 另一方面,少数搜索引擎会认为所有这些额外的H1标记的是垃圾网站吗.