图片 18

Canvas画一张笑脸,页面制作之开发调试工具

扎克伯格:押注 HTML5 是大错 现以移动为重

2012/09/12 · HTML5 ·
HTML5

(来源:郑峻@新浪科技)北京时间9月12日上午消息,Facebook联合创始人、CEO马克·扎克伯格(Mark
Zuckerberg)今日在Techcrunch
Disrupt大会上表示,公司股价下跌令人失望,最大的错误是押注HTML
5,但公司已经改变战略,目前一切以移动为重。他看好未来移动领域的盈利前景。

这是28岁的扎克伯格在Facebook上市后首次接受公开访谈,而采访者则是Techcrunch创始人迈克尔·阿灵顿(Michael
Arrington)。后者是硅谷科技博客圈著名的铁嘴,以采访直接尖锐而著称。

鉴于扎克伯格极少接受访问,而目前Facebook又处在媒体关注的焦点。新浪科技在现场看到,今日会场拥挤程度超过以往,会场前排地上已经坐满了人。继昨日Twitter联合创始人兼董事长杰克·多西(Jack
Dorsey)发表主题演说后,目前硅谷最为知名的两位创业者都出席了此次
Techcrunch 大会。

扎克伯格此次亮相依然是标志性的衣着:灰色圆领t恤、美津浓球鞋和牛仔裤。有趣的是,他的左手并没有佩戴婚戒。今年5月底,Facebook上市后,扎克伯格和相恋多年的华裔女友普利西亚·陈举行了小规模的婚礼。

阿灵顿的第一个问题就是Facebook股价,扎克伯格显然对此早有准备。他坦率承认,对Facebook上市后股价走低确实感到失望,公司上市后需要关注股东价值,(股价走低)或许是Facebook创办以来遭遇的第一个挫折。

图片 1

 

但他强调,这也是一个机遇,市场低估了Facebook在移动领域的基本面前景,越来越多的用户通过移动设备登录Facebook,他看好移动广告的未来,公司会取得比桌面领域更加出色的盈利业绩。

移动问题是Facebook目前面临的最大挑战。扎克伯格透露,通过移动网页使用Facebook的用户数量超过了使用iOS和Android应用的用户数,但“移动网页并不是未来”。

扎克伯格说公司最大的错误就是在HTML
5技术上押注过大,在移动平台浪费了两年时间,但目前已经改变战略,着力于改善移动应用的用户体验。Facebook上月发布了全新的苹果应用,“Android应用很快就会发布”。

“我们现在是一家移动公司,所有代码都为了移动而写,”扎克伯格说。

他还透露,今年4月收购的Instagram用户刚刚突破了1亿人,这是个伟大(Amazing)的产品。“我们希望帮助他们拥有数亿用户,但不打算将他们完全纳入Facebook,而会继续把他们当做Open
Graph伙伴来对待。”

扎克伯格再次谈到了他的使命理论:创办Facebook不是为了钱,公司挣钱是为了给用户更好的服务,而未来20年后,人们会发现
Facebook带来的遗产,会发现目前低估了公司的价值。“每家伟大公司在发展过程中都有低落,而在这样的周期,我宁愿Facebook被低估。”

今天扎克伯格讲话语速非常快,脸上一直挂着标志性笑容,看得出他在股价与移动等问题上做了充分的准备,但谈到手机和搜索问题上,扎克伯格还是有所停顿。与杰克·多西前日充满自信、语速缓和的讲话相比,扎克伯格依然显得年轻,或者可以说缺乏气场,他并不善于这种场合。

Facebook自今年5月上市以来,股价从28美元的招股价一路走低。扎克伯格访谈前,Facebook股价报18.98美元,而讲话后截止美国太平洋时间3点30分,股价升至20.06美元,涨幅3.24%,市值在半小时内增长了17亿美元。

 

 

赞 收藏
评论

图片 2

页面制作之开发调试工具(1)

2015/04/14 · CSS,
HTML5,
JavaScript ·
调试

原文出处:
jingwhale   

用HTML5 Canvas画一张笑脸

2015/02/24 · HTML5 · 2
评论 ·
Canvas,
HTML5

本文由 伯乐在线 –
cucr
翻译,JustinWu
校稿。未经许可,禁止转载!
英文出处:code.tutsplus.com。欢迎加入翻译组。

图片 3

今天,你将学习一项称为Canvas(画布)的web技术,以及它和文档对象模型(通常被称为DOM)的关联。这项技术非常强大,因为它使web开发人员能够通过使用JavaScript访问和修改HTML元素。

现在你可能想知道为什么我们需要大刀阔斧地使用JavaScript。简而言之,HTML和JavaScript是相互依存的,一些HTML组件,如canvas元素,并不能脱离JavaScript单独使用。毕竟,如果我们不能在上面绘图,那canvas能派什么用处呢?

为了更好地理解这个概念,我们一起通过一个示例项目来尝试画一个简单的笑脸。让我们开始吧。

开发工具介绍

开发工具一般分为两种类型:文本编辑器和集成开发环境(IDE)

常用的文本编辑器:Sublime Text、Notepad++、EditPlus等

常用的IDE:WebStorm、Intellij IDEA、Eclipce等

我们这里主要介绍如何使用Sublime
Text编辑器,它基本满足我们对前端开发工具的需求。

开始

首先创建一个新目录来保存你的项目文件,然后打开你最喜欢的文本编辑器或web开发工具。一旦你这样做了,你应该创建一个空的index.html和一个空的script.js,之后我们将继续编辑。

图片 4

接下来,我们来修改index.html文件,这不会涉及很多东西,因为我们项目的大部分代码将用JavaScript编写。我们需要在HTML中做的是创建一个canvas元素和引用script.js,这相当直截了当:

XHTML

<!DOCTYPE html><body> <canvas id=’canvas’ width=’640′
height=’480′></canvas> <script type=’text/javascript’
src=’script.js’></script> </body></html>

1
2
3
4
5
6
<!DOCTYPE html><body>
 
   <canvas id=’canvas’ width=’640′ height=’480′></canvas>
   <script type=’text/javascript’ src=’script.js’></script>
 
</body></html>

这么解释,我使用一组标记< html >和<
body>,这样,我们可以通过body为文档添加更多的元素。抓住这个机会,我完成了一个id属性为canvas的640*480的canvas元素。

这个属性只是简单地为元素加上一个字符串,目的是为了唯一识别,稍后我们将利用这个属性,在JavaScript文件中定位我们的canvas元素。接下来,我们再使用<script>标记引用JavaScript文件,它指定JavaScript的语言类型和script.js文件的路径。

一、Sublime Text的特点:

跨平台、启动快

多行选择

各种实用插件

Snippets

支持VIM兼容模式

Sublime Text获取地址:

操作DOM

如其名称“文档对象模型”,我们需要通过使用另一种语言,调用接口访问HTML文档,在这里,我们使用的语言是JavaScript。为此,我们需要在内置文档对象上的布置一个简单引用。这个对象直接对应于我们的<
html
>标记,类似的,它是整个项目的基础,因为我们可以通过它来获取元素,执行变化。

JavaScript

var canvas = document.getElementById(‘canvas’);

1
var canvas = document.getElementById(‘canvas’);

还记得我们如何使用id
=“canvas”来定义一个canvas元素吗?现在我们使用document.getElementById方法,从HTML文档获取这个元素,我们简单地传递匹配所需元素id的字符串。现在我们已经获取了这个元素,接下来就可以用其进行绘画工作了。

为了使用canvas进行绘画,我们必须操作它的上下文。令人惊讶的是,一个canvas不包含任何绘图的方法或属性,但是它的上下文对象有我们需要的所有方法。一个上下文定义如下所示:

JavaScript

var context = canvas.getContext(‘2d’);

1
var context = canvas.getContext(‘2d’);

每一个canvas有几个不同的上下文,根据程序的目的,只需要一个二维的上下文就足够了,它将获得我们需要创建笑脸的所有绘图方法。

在我们开始之前,我必须告知您,上下文存储了两种颜色属性,一个用于画笔(stroke),一个用于填充(fill)。对于我们的笑脸,需要设置填充为黄色,画笔为黑色。

JavaScript

context.fillStyle = ‘yellow’; context.strokeStyle = ‘black’;

1
2
context.fillStyle = ‘yellow’;
context.strokeStyle = ‘black’;

设置完上下文所需的颜色后,我们必须为脸画一个圆。不幸的是,上下文中没有圆的预定义方法,因此我们需要使用所谓的路径(path)。路径只是一系列的相连的直线和曲线,路径在绘图完成后关闭。

JavaScript

context.beginPath(); context.arc(320, 240, 200, 0, 2 * Math.PI);
context.fill(); context.stroke(); context.closePath();

1
2
3
4
5
context.beginPath();
context.arc(320, 240, 200, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.closePath();

这样解释,我们运用上下文开始一个新的路径。接下来,我们在点(320、240)上创建一个半径为200像素的圆弧。最后两个参数指定构建圆弧的初始和最终角度,所以我们传递0和2
*Math.PI,来创建一个完整的圆。最后,我们运用上下文基于我们已经设置的颜色进行填充并画出路径。

尽管关闭路径不是脚本的功能所必须的,但我们还是需要关闭路径,这样就可以开始绘制笑脸中新的眼睛和嘴。眼睛可以通过同样的方式完成,每个眼睛需要较小的半径和不同的位置。但首先我们必须记住设置填充颜色为白色。

JavaScript

context.fillStyle = ‘white’; context.beginPath(); context.arc(270, 175,
30, 0, 2 * Math.PI); context.fill(); context.stroke();
context.closePath(); context.beginPath(); context.arc(370, 175, 30, 0, 2
* Math.PI); context.fill(); context.stroke(); context.closePath();

1
2
3
4
5
6
7
8
9
10
11
12
13
context.fillStyle = ‘white’;
 
context.beginPath();
context.arc(270, 175, 30, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.closePath();
 
context.beginPath();
context.arc(370, 175, 30, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.closePath();

以上是关于眼睛的所有代码。现在嘴巴很相似,但这次我们不会填满圆弧,我们的角度将配置为一个半圆。要做到这一点,我们需要设置起始角度为零和结束角度为-1
* Math.PI。请记住,不要忘记将画笔的颜色设置为红色。

JavaScript

context.fillStyle = ‘red’; context.beginPath(); context.arc(320, 240,
150, 0, -1 * Math.PI); context.fill() context.stroke();
context.closePath();

1
2
3
4
5
6
7
context.fillStyle = ‘red’;
 
context.beginPath();
context.arc(320, 240, 150, 0, -1 * Math.PI);
context.fill()
context.stroke();
context.closePath();

二、常用的插件

Package Control:安装其他插件之前,首先先安装Package Control

Emmet:Web开发者的工具包,可以大大提高你的HTML和CSS的工作流程

SublimeCodeIntel:代码提示

DocBlocker:对js代码进行注释

JSFormat:格式化js代码

Terminal:使用vim命令

祝贺

干的不错。你已经完成了本教程,你做了一个很棒的笑脸,同时学习了更多关于Canvas、HTML、JavaScript,和文档对象模型的知识。如果你有任何问题,请留言。

点击这里查看程序的运行状况.

赞 2 收藏 2
评论

2.1 Package Control

安装其他插件之前,首先先安装Package Control,具体步骤如下:

使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令行,

Sublime text3粘贴如下代码:

JavaScript

import urllib.request,os; pf =
'PackageControl.sublime-package'; ipp =
sublime.installed_packages_path();urllib.request.install_opener(
urllib.request.build_opener(urllib.request.ProxyHandler()) );
open(os.path.join(ipp,
pf),'wb').write(urllib.request.urlopen(
'; +
pf.replace('','%20')).read())

1
import urllib.request,os; pf = &#039;PackageControl.sublime-package&#039;; ipp = sublime.installed_packages_path();urllib.request.install_opener( urllib.request.build_opener(urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf),&#039;wb&#039;).write(urllib.request.urlopen( &#039;http://sublime.wbond.net/&#039; + pf.replace(&#039;&#039;,&#039;%20&#039;)).read())

Sublime text2粘贴如下代码:

JavaScript

import urllib2,os; pf='PackageControl.sublime-package'; ipp
= sublime.installed_packages_path(); os.makedirs(ipp ) if not
os.path.exists(ipp) else None;
urllib2.install_opener(urllib2.build_opener( urllib2.ProxyHandler(
))); open( os.path.join( ipp, pf),'wb' ).write(
urllib2.urlopen( '; +pf.replace(
'','%20' )).read()); print( 'Please
restart Sublime Text to finishinstallation')

1
import urllib2,os; pf=&#039;PackageControl.sublime-package&#039;; ipp = sublime.installed_packages_path(); os.makedirs(ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf),&#039;wb&#039; ).write( urllib2.urlopen( &#039;http://sublime.wbond.net/&#039; +pf.replace( &#039;&#039;,&#039;%20&#039; )).read()); print( &#039;Please restart Sublime Text to finishinstallation&#039;)

如果顺利的话,此时就可以在Preferences菜单下看到Package Settings和Package
Control两个菜单了。

可能由于各种原因,无法使用代码安装,那可以通过以下步骤手动安装Package
Control:

a.Package
Control下载地址:
b.点击Preferences>BrowsePackages菜单
c.进入打开的目录的上层目录,然后再进入Installed Packages/目录
d.下载Package Control.sublime-package并复制到Installed
Packages/目录
e.重启SublimeText。

关于作者:cucr

图片 5

新浪微博:@hop_ping
个人主页 ·
我的文章 ·
17

图片 2

2.2 Emmet

Emmet是一个Web开发者的工具包,可以大大提高你的HTML和CSS的工作流程。

基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为“片段”。虽然片段能很好地推动你得生产力,但大多数的实现都有这样一个缺点:你必须先定义你得代码片段,并且不能再运行时进行拓展。Emmet把片段这个概念提高到了一个新的层次:你可以设置CSS形式的能够动态被解析的表达式,然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML
和 CSS 代码的前端开发人员,但也可以用于编程语言。

图片 7

2.2.1 安装Emmet

a、通过快捷键组合ctrl+shift+P唤出命令面板
b、在面板中输入“install package”后回车
c、接着输入“Emmet”,等待安装完成。

2.2.2 使用Emmet
1) html初始化

输入“!”或“html:5”,然后按Tab键:

图片 8

html:5 或!:用于HTML5文档类型
html:xt:用于XHTML过渡文档类型
html:4s:用于HTML4严格文档类型

2) head标签内操作

引入外部样式表:link:css+tab

CSS

<link rel=”stylesheet” href=”style.css”>

1
<link rel="stylesheet" href="style.css">

引入内部样式表:style+tab

CSS

<style></style>

1
<style></style>

引入外部js文件:script:src+tab

JavaScript

<script src=””></script>

1
<script src=""></script>

引入内部js文件:script+tab

JavaScript

<script></script>

1
<script></script>

添加网站图标:link:favicon+tab

CSS

<link rel=”shortcut icon” type=”image/x-icon” href=”favicon.ico”>

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

设置字符编码:meta:utf+tab

XHTML

<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″>

1
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

设置兼容模式meta:compat+tab

XHTML

<meta http-equiv=”X-UA-Compatible” content=”IE=7″>

1
<meta http-equiv="X-UA-Compatible" content="IE=7">

演示如下:

图片 9

3)  body体内容编辑

●标签:标签名(+tab)

●id:标签名#+类名称(+tab),可以跟多个类

类:标签名.+id名称(+tab),仅可以跟一个id

图片 10

只输入.item,则Emmet会根据父标签进行判定,一般为div。比如在<ul>中输入.item,就会生成<li></li>。

图片 11

下面是所有的隐式标签名称:

li:用于ul和ol中
tr:用于table、tbody、thead和tfoot中
td:用于tr中
option:用于select和optgroup中

●标签的内容:标签名{内容}

标签内的属性:标签名[属性名=属性值],如:a[href=www.baidu.com]

图片 12

补充:

表单method属性

form:post(get)

input属性添加缩写(部分)

input->inp input:hidden->input:h input:text->input:t
input:password->input:p
input:checkbox->input:c
input:radio->input:r
input:submit->input:s input:button->input:b

●嵌套

>:子元素符号,表示嵌套的元素
+:同级标签符号
^:可以使该符号前的标签提升一行

图片 13

●分组()
可以通过嵌套和括号来快速生成一些代码块,比如输入(.foo>h1)+(.bar>h2),会自动生成如下代码:

图片 14

●定义多个元素***
要定义多个元素,可以使用
**符号。比如,ul>li\3可以生成如下代码

图片 15

●计数器 $
在我们做”轮播“时,给元素的命名(id或者class),都会有一个计数位,这个时候,我们就可以使用
$ 它来实现了,如下:

图片 16

可以合理组合各种操作来写出复杂样式的代码块。

2.2.3 CSS缩写
1).  值

比如要定义元素的宽度,只需输入w100,即可生成

CSS

width: 100px;

1
width: 100px;

图片 17
除了px,也可以生成其他单位,比如输入h10p+m5e,结果如下

CSS

height: 10%; margin: 5em;

1
2
height: 10%;  
margin: 5em;

单位别名列表: p 表示%、e 表示 em、表示 ex

2).  附加属性

@f+

图片 18

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:, ,
网站地图xml地图