澳门微尼斯人手机版 18. Font Dragr

Ryan Seddon开发的font
dragr帮助开发者在浏览器中预览自定义字体,用户只用将字体文件拖入font
dragr或是在列表中选择一个字体就能直接看到字体的样式了。更棒的是,使用一个CSS选择器选中相应的字体,你就可以用font
dragr书签改变任何一个网站的字体了。用户可以快速使用 @font-face 预览和比较各种字体,甚至无需修改代码。

它使用了HTML5的最新元素:Drag和Drop API,the History
API,contenteditable属性,以及localStorage。它还准备支持Google Web
Fonts。Ryan表示localStorage用于“在交互式请求中获取视图html,在DOM中替换它,并在localStorage中缓存视图HTML”。关于HTML5,Ryan只是简单地表示“它还在计划中”。

 

React Native基础&入门教程:初步使用Flexbox布局

2018/07/04 · JavaScript
· React Native

原文出处:
葡萄城控件   

在上篇中,笔者分享了部分安装并调试React
Native应用过程里的一点经验,如果还没有看过的同学请点击React
Native基础&入门教程:调试React
Native应用的一小步》。

在本篇里,让我们一起来了解一下,什么是Flexbox布局,以及如何使用。

一、长度的单位

在开始任何布局之前,让我们来首先需要知道,在写React
Native组件样式时,长度的不带单位的,它表示“与设备像素密度无关的逻辑像素点”。

这个怎么理解呢?

我们知道,屏幕上一个发光的最小点,对应着一个pixel(像素)点。

假设下面三个矩形,代表三个屏幕大小一样的设备,但是,它们拥有的分辨率(resolution)不同:

澳门微尼斯人手机版 2

图1.相同尺寸的设备 不同的分辨率

图上的每一个小格子,其实就代表了一个像素(pixel)。可以看到,一个像素点的大小,在这个三个物理尺寸一样但拥有不同分辨率的设备上,是不一样的。

如果我们以像素为单位来设置一个界面元素的大小,比如说2px的高度,那么这2px的长度上面的设备中就会是下面这个样子:

澳门微尼斯人手机版 3

图2.不同分辨率下的2px实际高度

它们真实显示出的长度是不一样的。

我们想要一种长度单位,在同样物理尺寸大小的屏幕上(不论分辨率谁高谁低,只要物理尺寸大小一样即可),1个单位的长度所代表的物理尺寸是一样的。这种单位就应该是独立于分辨率的,把它起一个名字叫做
density-independent
pixels,简称dp。这其实就是Android系统中所使用的长度单位。

举例来说,2dp宽,2dp高的内容,在不同分辨率但屏幕尺寸一样的设备上所显示出的物理大小是一样的。(一个题外话:有些Android开发者建议所有可点击的按钮,宽高都不应该少于48dp。)

澳门微尼斯人手机版 4

图3. 2dp * 2dp大小的内容 在同样尺寸的屏幕中所占据的物理大小一致

Android中字体大小使用另外一个单位,叫做scale independent
pixels,简称sp。这个单位和dp很类似,不过它通常是用在对字体大小的设置中。通过它设置的字体,可以根据系统字体大小的变化而变化。

pixel与dp存在一个公式:px = dp * (dpi/160)。

dpi表示dot per
inch,是每英寸上的像素点,它也有个自己的计算公式,具体这里就不展开了。只需要知道我们之所以要使用一个独立于设备分辨率的单位,主要是为了让应用在不同分辨率的设备中,看起来一致。

在RN中,同样也拥有一个类似于dp的长度单位。如果我们想知道自己的屏幕以这种长度的计量下是多少单位,可以通过引入react-native包中的Dimensions拿到,同时还可以查看本机的像素比例是多少。

import {   Text,   View,   Dimensions,   PixelRatio } from
‘react-native’; const { height, width } = Dimensions.get(‘window’);
const pxRatio = PixelRatio.get(); <View style={styles.container}>
  <Text style={styles.welcome}>     {`澳门微尼斯人手机版,width: ${width},
height: ${height}`}   </Text>   <Text
style={styles.welcome}>     {`pixel radio: ${pxRatio}`}
  </Text> </View>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import {
  Text,
  View,
  Dimensions,
  PixelRatio
} from ‘react-native’;
const { height, width } = Dimensions.get(‘window’);
const pxRatio = PixelRatio.get();
 
<View style={styles.container}>
  <Text style={styles.welcome}>
    {`width: ${width}, height: ${height}`}
  </Text>
  <Text style={styles.welcome}>
    {`pixel radio: ${pxRatio}`}
  </Text>
</View>

显示如下:

澳门微尼斯人手机版 5

图4. 当前手机的屏幕信息

它反映出,当前手机屏幕的宽度占据360个单位,高度占据640个单位。像素比例是3,实际上这就是一个
1080 * 1920 像素的手机。其中1080 = width * pixelRadio, 1920 = height
* pixelRatio

二、Flexbox布局

Flexbox布局,也就是弹性盒模型布局。也许有Android开发经验的朋友还对LinearLayout,RelativeLayout,FrameLayout等布局方法记忆犹新,但是对于更了解CSS的Web开发者而言,使用flexbox布局肯定会让他感受到更加顺手的开发体验。

RN中的flexbox布局,其实源于CSS中的flexbox(弹性盒子)布局规范。其实它在CSS中还处于Last
Call Working
Draft(最终征求意见稿)阶段,但是主流浏览器对它都有了良好的支持。在RN中,几乎完全借鉴了其中的布局语义,同时更没有浏览器兼容的烦恼,用起来是很方便的。RN中只是把CSS的属性用camelCase写法代替连字符写法。后面还还会看到,默认的flex方向也不同。

理解弹性盒模型布局,首先要知道四个最基本的概念:Flex
Container(容器),Flex Item(项),Flex Direction(方向)和Axis(轴)。

1.Flex Container

就是包裹内容的容器,需要把它的display设置为‘flex’(或者’inline-flex’)。

以下6个属性设置在容器上。

  1. alignItems 指定item在侧轴上的对齐方式
  2. alignContent 指定item在多条轴上的对齐方式
  3. flexDirection 指定主轴方向
  4. flexWrap 指定item在主轴方向如何换行
  5. flexFlow flexDirection属性和flexWrap属性的简写形式
  6. justifyContent 指定item在主轴上的分布方式

2.Flex Item

容器做直接包裹的元素。所谓弹性盒布局,通常想要布局的东西就是它们。

以下6个属性设置在项目上。

  1. alignSelf 每个item可以单独设置对齐方式 覆盖Flex
    Container给设置的alignItems
  2. order 指定item排列顺序 数字越小越靠前
  3. flexGrow 指定item的拉伸比例
  4. flexShrink 指定item的压缩比例
  5. flexBasis 指定item在分配多余空间之前,占主轴的大小
  6. flex 其实是 flexGrow flexShrink flexBasis的简写

3.Flex Direction and Axis

在弹性盒子中,项目默认沿着main axis(主轴)排列,和主轴垂直的轴叫做cross
axis,叫做侧轴,或者交叉轴。

在盒子中,排列项目又四个方向:水平的正反两个,垂直的正反两个。

结构代码:

<View> <View style={styles.row}> <Text
style={styles.item}>1</Text> <Text
style={styles.item}>2</Text> <Text
style={styles.item}>3</Text> </View> <View
style={styles.rowReverse}> <Text
style={styles.item}>1</Text> <Text
style={styles.item}>2</Text> <Text
style={styles.item}>3</Text> </View> <View
style={styles.column}> <Text style={styles.item}>1</Text>
<Text style={styles.item}>2</Text> <Text
style={styles.item}>3</Text> </View> <View
style={styles.columnReverse}> <Text
style={styles.item}>1</Text> <Text
style={styles.item}>2</Text> <Text
style={styles.item}>3</Text> </View> </View>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<View>
    <View style={styles.row}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
    <View style={styles.rowReverse}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
    <View style={styles.column}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
    <View style={styles.columnReverse}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
</View>

样式代码:

row: { backgroundColor: ‘#ffe289’, flexDirection: ‘row’ }, rowReverse:
{ flexDirection: ‘row-reverse’ }, column: { backgroundColor: ‘#ffe289’,
flexDirection: ‘column’ }, columnReverse: { flexDirection:
‘column-reverse’ },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
row: {
backgroundColor: ‘#ffe289’,
flexDirection: ‘row’
},
rowReverse: {
flexDirection: ‘row-reverse’
},
column: {
backgroundColor: ‘#ffe289’,
flexDirection: ‘column’
},
columnReverse: {
flexDirection: ‘column-reverse’
},

澳门微尼斯人手机版 6

图5. flexDirection

由于网上关于flex布局讲解的资源挺丰富的,读者可以参考最后给出的连接,或者自行上网搜索,CSS中的和RN是相通的。

这里主要分享个人在学习过程中,觉得容易引起混淆的两个小点。

首先,justify-content和align-content这两个属性,可能比较容易搞错它们作用的方向。

其中,justify-content是设置items沿着主轴上是如何分布的。align-content是设置items沿着侧轴如何对齐的。

还是拿之前的例子,默认情况下,flex的方向是column(这个与移动端与web页面不同,在web页面用CSS设置flex布局,默认的fiex-direction是row,即水平从左往右)。

在移动端,主轴默认是垂直方向,从上往下。让我们把它的高度设置高一点,放3个item在里面:

结构代码:

<View> <View style={styles.defaultFlex}> <Text
style={styles.item}>1</Text> <Text
style={styles.item}>2</Text> <Text
style={styles.item}>3</Text> </View> </View>

1
2
3
4
5
6
7
<View>
    <View style={styles.defaultFlex}>
        <Text style={styles.item}>1</Text>
        <Text style={styles.item}>2</Text>
        <Text style={styles.item}>3</Text>
    </View>
</View>

样式代码:

defaultFlex: { height: 300, backgroundColor: ‘#ffe289’, display: ‘flex’
}

1
2
3
4
5
defaultFlex: {
height: 300,
backgroundColor: ‘#ffe289’,
display: ‘flex’
}

澳门微尼斯人手机版 7

图6. 默认的flex

justify-content设置items在主轴方向的如何分布,比如,如果我们加上justifyContent:
‘space-between’

defaultFlex: { height: 300, backgroundColor: ‘#ffe289’, display:
‘flex’, justifyContent: ‘space-between’ }

1
2
3
4
5
6
defaultFlex: {
height: 300,
backgroundColor: ‘#ffe289’,
display: ‘flex’,
justifyContent: ‘space-between’
}

items就沿主轴分开了。

澳门微尼斯人手机版 8

图7. justifyContent: ‘space-between’

如果我们设置alignItems:
‘center’,项目就沿侧轴(这里就是水平轴)居中了。注意这两个属性是可以同时起作用的。

澳门微尼斯人手机版 9

图8. justifyContent: ‘space-between’ 以及 alignItems: ‘center’

然后,值得指出的是,flex这个属性,其实是flexGrow, flexShrink,
flexBasis(对应的CSS属性flex-grow,
flex-shrink和flex-basis)三个属性的结合。

我们通常在移动端看到的flex:1这个设置,其实是对flex-grow的设置。后者的默认值为0。使用把flex-grow设置为正整数的方法,可以让item按比例分布,或者在其他item为固定大小时撑满剩余的盒子空间,就仿佛具有弹性一样。

结构代码:

<View style={styles.container}> <View
style={styles.flex1}></View> <View
style={styles.flex2}></View> <View
style={styles.flex3}></View> </View>

1
2
3
4
5
<View style={styles.container}>
    <View style={styles.flex1}></View>
    <View style={styles.flex2}></View>
    <View style={styles.flex3}></View>
</View>

样式代码:

container: { flex: 1 }, flex1: { // height: 99, flexGrow: 1,
backgroundColor: ‘orange’, }, flex2: { flexGrow: 2, backgroundColor:
‘lightblue’, }, flex3: { flexGrow: 3, backgroundColor: ‘green’, },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
container: {
flex: 1
},
flex1: {
// height: 99,
flexGrow: 1,
backgroundColor: ‘orange’,
},
flex2: {
flexGrow: 2,
backgroundColor: ‘lightblue’,
},
flex3: {
flexGrow: 3,
backgroundColor: ‘green’,
},

澳门微尼斯人手机版 10

图9. 按比例分布

需要注意的是,如果父容器的尺寸为零(即没有设置宽高,或者没有设定flex),即使子组件如果使用了flex,也是无法显示的。

所以这里最外层的使用了flex布局的,flex:1,表示让它占据了垂直的整个空间。

三、小小实战演练

让我们来简单使用flex布局,对之前的例子稍加调整,实现一个头部,底部固定高度,中间内容占满剩下的屏幕的布局:

第一步,调整结构:

<View style={styles.container}> <View
style={styles.header}></View> <View
style={styles.body}></View> <View
style={styles.footer}></View> </View>

1
2
3
4
5
<View style={styles.container}>
    <View style={styles.header}></View>
    <View style={styles.body}></View>
    <View style={styles.footer}></View>
</View>

调整样式:

container: { flex: 1 }, header: { height: 60, backgroundColor: ‘orange’,
}, body: { flexGrow: 1, backgroundColor: ‘lightblue’, }, footer: {
height: 60, backgroundColor: ‘green’, }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
container: {
flex: 1
},
header: {
height: 60,
backgroundColor: ‘orange’,
},
body: {
flexGrow: 1,
backgroundColor: ‘lightblue’,
},
footer: {
height: 60,
backgroundColor: ‘green’,
}

澳门微尼斯人手机版 11

图10. 有头尾的布局

第二部,给header添加标题。

我们让头部的分成3部分,左边模拟一个返回按钮,中间显示标题文字,右边模拟一把小叉:

<View style={styles.header}> <Text
style={styles.back}>返回</Text> <Text
style={styles.title}>这是一个标题</Text> <Text
style={styles.exit}>×</Text> </View>

1
2
3
4
5
<View style={styles.header}>
    <Text style={styles.back}>返回</Text>
    <Text style={styles.title}>这是一个标题</Text>
    <Text style={styles.exit}>×</Text>
</View>

需要把header的flexDirection设置为水平方向:

header: { height: 60, backgroundColor: ‘orange’, flexDirection: ‘row’,
alignItems: ‘center’ }, back: { color: ‘white’, marginLeft: 15 }, title:
{ flexGrow: 1, fontSize: 20, color: ‘white’, textAlign: ‘center’ },
exit: { marginRight: 20, fontSize: 20, color: ‘white’ }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
header: {
height: 60,
backgroundColor: ‘orange’,
flexDirection: ‘row’,
alignItems: ‘center’
},
back: {
color: ‘white’,
marginLeft: 15
},
title: {
flexGrow: 1,
fontSize: 20,
color: ‘white’,
textAlign: ‘center’
},
exit: {
marginRight: 20,
fontSize: 20,
color: ‘white’
}

澳门微尼斯人手机版 12

图11. header有了标题

第三步,我们可以把footer三等分,模拟成菜单的样子:

<View style={styles.footer}> <Text
style={styles.firstMenu}>添加</Text> <Text
style={styles.menu}>删除</Text> <Text
style={styles.menu}>修改</Text> </View>

1
2
3
4
5
<View style={styles.footer}>
    <Text style={styles.firstMenu}>添加</Text>
    <Text style={styles.menu}>删除</Text>
    <Text style={styles.menu}>修改</Text>
</View>

添加样式:

footer: { height: 60, backgroundColor: ‘green’, flexDirection: ‘row’,
alignItems: ‘center’ }, menu: { flexGrow: 1, textAlign: ‘center’,
borderColor: ‘white’, borderLeftWidth: 1, color: ‘white’ }, firstMenu: {
flexGrow: 1, textAlign: ‘center’, color: ‘white’ },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
footer: {
height: 60,
backgroundColor: ‘green’,
flexDirection: ‘row’,
alignItems: ‘center’
},
menu: {
flexGrow: 1,
textAlign: ‘center’,
borderColor: ‘white’,
borderLeftWidth: 1,
color: ‘white’
},
firstMenu: {
flexGrow: 1,
textAlign: ‘center’,
color: ‘white’
},

澳门微尼斯人手机版 13

图12. footer三等分 模拟菜单

最后,让我们在body里也填入几个带按钮的输入框。

引入TextInput和Button组件,然后把它们分三组放入body中,

JavaScript

<View style={styles.body}> <View style={styles.inputRow}>
<TextInput style={styles.textInput}></TextInput> <Button
style={styles.btn} onPress={() => {}} title=”确定”></Button>
</View> <View style={styles.inputRow}> <TextInput
style={styles.textInput}></TextInput> <Button
style={styles.btn} onPress={() => {}}
title=”非常确定”></Button> </View> <View
style={styles.inputRow}> <TextInput
style={styles.textInput}></TextInput> <Button
style={styles.btn} onPress={() => {}}
title=”确定一定以及肯定”></Button> </View> </View>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<View style={styles.body}>
    <View style={styles.inputRow}>
        <TextInput style={styles.textInput}></TextInput>
        <Button style={styles.btn} onPress={() => {}} title="确定"></Button>
    </View>
    <View style={styles.inputRow}>
        <TextInput style={styles.textInput}></TextInput>
        <Button style={styles.btn} onPress={() => {}} title="非常确定"></Button>
    </View>
    <View style={styles.inputRow}>
        <TextInput style={styles.textInput}></TextInput>
        <Button style={styles.btn} onPress={() => {}} title="确定一定以及肯定"></Button>
    </View>
</View>

添加样式:

body: { flexGrow: 1, backgroundColor: ‘lightblue’, }, inputRow: {
flexDirection: ‘row’, alignItems: ‘center’, marginLeft: 10, marginRight:
10 }, textInput: { flex: 1 }, btn: { minWidth: 60 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body: {
flexGrow: 1,
backgroundColor: ‘lightblue’,
},
inputRow: {
flexDirection: ‘row’,
alignItems: ‘center’,
marginLeft: 10,
marginRight: 10
},
textInput: {
flex: 1
},
btn: {
minWidth: 60
}

澳门微尼斯人手机版 14

flex布局的一个常用实践是,部分内容固定宽高,让剩下的内容自适应。

像上面这样,我们给Button有一个最小宽度,且TextInput的flexGrow为1,这样的做法可以实现,TextInput总是占满剩下的宽度,且可伸缩。

看了上面的例子,是否觉得在React Native中使用Flexbox布局也挺简单呢?

希望这是个不错的开始。

1 赞 收藏
评论

澳门微尼斯人手机版 15

浅谈SVG Sprite

2016/03/06 · HTML5 ·
SVG

原文出处:
携程设计委员会   

随着前端技术的发展,有越来越多的方法实现icon的制作,同时为了满足市面上各种大屏幕分辨率,字体图标icon
font应运而生,字体图标的制作也是一种全新的设计方式,但是icon font
在windows系统下,字体较小时,锯齿问题比较严重,那么今天要讲的svg
sprite,不仅可以随意改变图标大小不会产生锯齿,还能随心所欲的填充颜色。

下面来来介绍一下矢量图形SVG Sprite在页面中的应用。

第一步:制作SVG图标
首先的准备一套SVG图标,我们直接到icomoon.io上下载。

1.选中图标

澳门微尼斯人手机版 16

2.点击Generate

澳门微尼斯人手机版 17

3.下载

澳门微尼斯人手机版 18

然后我们可以在解压文件中,找到对应的svg图标文件夹。

澳门微尼斯人手机版 19
澳门微尼斯人手机版 20

第二步:合并SVG图标
准备好svg图标后,我们需要把多个svg图标整合到一个svg文件中。
这里需要用到自动化合并工具(grunt),grunt有个名为svgstore的插件。
关于grunt环境的安装,就不在这阐述 。

环境安装好后,在项目目录下执行下面的命令,安装插件:

澳门微尼斯人手机版 21

安装好后,可以看到grunt-svgstore文件夹里有个Gruntfiles.js配置文件。
我们加入以下两段代码:

澳门微尼斯人手机版 22

澳门微尼斯人手机版 23

了解更多配置项:

配置好以后,我们需要把第一步下载下来的svg图标,放到sprites文件夹中,如下图:

澳门微尼斯人手机版 24

到这为止,一切准备就绪,只需进入到 grunt-svgstore目录,执行命令:

澳门微尼斯人手机版 25

运行命令后,可以看到成功创建了sprite.svg文件

澳门微尼斯人手机版 26

第三步:应用

我们来看下生成文件的源代码:

澳门微尼斯人手机版 27

再来看看浏览器里页面的效果~~~

澳门微尼斯人手机版 28

到这里svg sprite 图标就已经完成了。

兼容性:

澳门微尼斯人手机版 29

对于ie8以下,我们可以添加一个标签,使用css sprite:

为避免其他浏览器加载,可以加上条件注释。

澳门微尼斯人手机版 30

这样就完美啦~

 

2 赞 5 收藏
评论

澳门微尼斯人手机版 15

1. HTML5的Web开发人员版本

将HTML5的Web开发人员版本列举在这可能有点奇怪,因为它只是一个HTML5标准的版本。一直以来W3C的标准有点让人费解,因为它是为web浏览器开发人员编写的,而不是网站。但是HTML5标准出人意外的具有非常好的可读性,并且里面列举了大量的实例。如果你以前有过阅读W3C标准的痛苦经历,或许HTML5的标准会让你喜出望外。

HTML5的Web开发人员版本是由Ben
Schwarz 和同行一起制定的,诣在“为web开发人员提供基础的标准指南”。它是对浏览器提供商版本标准的修改,更适合web开发人员阅读。除了印刷风格具有更好地可读性外,还提供了许多HTML5的附件。它使用了Offline
Cache,能够支持浏览器使用<progress> 和AppCache
API。search-as-you-type功能也支持离线访问,搜索框使用type="search"

它告诉人们怎么做一些了不起的工作。Ben将这个作为一个志愿项目,并且可以在GitHub上找到所有的资源。web开发人员能够借助这些资源开发各种HTML5应用。

7. Dabblet

Dabblet 席卷了Lea
Verou的最新工具——一个完全在客户端运行的CSS
sandbox。

它大量采用了HTML5和相关工具,包括CORS (cross-origin resource
sharin),localStorage,History API,Selectors
API,data-*,contenteditable和内联的SVG。Lea正考虑未来还要使用Drag &
Drop API嵌入资源,并利用Offline API,但据说“offline
API相当麻烦”。她曾尝试使用Web
Workers凸显异步语法,但是这使得应用变得更慢了。她还想使用UndoManager实现“dabblet的代码的Undo/Redo功能”

它还使用了Lea的具有争议的-prefix-free库自动处理CSS
vendor
prefixes的问题。Lea正考虑提供一个no-prefix-free选择,或是增加一些类似LESS的元素。虽然Eric
Meyer曾极力为vendor
prefixes辩护,但Divya
Manian,Henri
Sivonen,和Lea都表示目前vendor
prefixes使用(赋值,粘贴)存在着问题。这不仅仅是HTML5的问题,它还关系到了我们应该如何工作这类原则性的问题,CSS
Working
Group更青睐于使用www-风格的输入。

因为目标人群是web开发者,所以Lea并不担心向后兼容性的问题,“对技术不太熟悉的用户可能会继续使用IE访问网站,但是在IE上也能使用HTML5,只是需要一些辅助工具并采取降级措施。”关于HTML5,Lea表示“对于开发者来说,HTML5意味着三件事:速度,通用性,以及开放性。开发工作正变得越来越容易了”。

12. Peoplemovin

Peoplemovin是Carlo
Zapponi开发的一个个人项目,网站中使用了大量的图表(受到Sankey图表的启发)来展示世界各地的移民情况。全世界有超过3%的人口,也就是多于2.15亿人不在自己出生的国家生活。在Peoplemovin上可以方便地查到各个国家的移民状况,可以非常直观地看到各种统计数据。

Carlo说到“这个网站的基础元素就是canvas,所有的交互和可视化都是用canvas实现的,并且能够方便地勾画出各个国家之间的连接路线。在网站中还采用了CSS3实现一些圆角、阴影、光效和字体的风格设置。”它不仅能在最新的浏览器上运行,还能在智能手机和平板电脑上运行。Carlo最后使用了一个自定义的开源工具包实现了这些效果,他将这个工具命名为DataMovin,并打算后期发布这个工具(在此期间会对代码做进一步的检查)。

Carlo对HTML5的描述是“HTML5最棒的地方就是它是一个滋生创造性的平台。你有了一个非常疯狂的新想法?那太好了!你能以前所未有的速度将这个想法在浏览器中实现,而不用另起炉灶。”

澳门微尼斯人手机版 32Audio

澳门微尼斯人手机版 33

2011年回顾:改变游戏的20个HTML5网站

2011/12/23 · HTML5 ·
HTML5

英文原文:2011 in review: 20 HTML5 sites that changed the
game,编译:webapptrend

今年HTML5确实给我们带来了很大的冲击。HTML5
Doctors,Oli
Studholme评选出了20个最佳网站,它们涵盖了语义、音频、客户端web
apps、canvas以及SVG和WebGL,这些网站预示了未来web的发展方向。

对HTML5和web来说,今年是收获丰富的一年。HTML5在不断成熟,今年5月HTML5进入了Last
Call阶段,并计划在2014年完成标准制定。WHATWG不仅大力提升了HTML5现有的功能,还加入了诸如WebVTT这样的一些新功能。在浏览器上的进展也在逐步推进,目前正与五大提供商积极推进相关工作。还有很多的工作需要去做!

在内容方面,你能深切感受到这一年似乎真的就是HTML5的一年,CSS3和JavaScript
web
stack的时代已经到来。HTML5现在已经成为许多开发者的首选,有关HTML5新功能的探索工作也在积极展开。下面列举了一些特别突出的HTML5网站。其中许多网站会让人惊呼“这根本不可能在native
web上实现”。

澳门微尼斯人手机版 34

将来/现在

Web中还加入了许多了不起的元素。WebRTC (实时通讯) 标准
(getUserMedia)就是其中之一。它能够实现“交换实时的交互多媒体信息,其中包括音频和视频”,常被用于浏览器上的视频聊天。Opera还尝试在桌面和移动设备的开发工具中加入对getUserMedia 的支持。

澳门微尼斯人手机版 3517. WebGL Shader — Travelling wave fronts tech demo

The travelling wave fronts tech
demo是一个“有规则的8bit扩散系统,里面加入了波形动画和像素衰退效果”。看起来相当迷幻。

澳门微尼斯人手机版 365. SoundCloud

SoundCloud 提供了声音录制和共享服务,大受艺术家和DJ们的欢迎,他们能够使用SoundCloud分享自己的合成音乐并且吸引更多的粉丝。它也是一个很好的HTML5教学实例。在桌面web
app上通常用Flash播放音频,而现在还可以选择使用HTML5
Audio。这样SoundCloud还能在iPad上运行,最近发布了一个基于HTML5的工具。

除了使用<audio> 和 Audio
API外,他们还在许多地方使用了data-*属性,以及Canvas,SVG和LocalStorage。Matas
Petrikas表示“我认为我们使用Canvas渲染波形部件是一个非常明智的选择,相比于Flash,它极大的减轻了CPU的占用率”。不幸的是,还是有一些用户对此嗤之以鼻(虽然确实存在一些客观原因),不愿意使用HTML5的新元素和属性(虽然这一现象正在逐渐改变)。

然而,HTML5音频并不是唯一的选择,正如Matas所说的“HTML5 Media
API在web浏览器中的实现状况不佳”。为了解决这个问题,Tomás
Senart和Yves Van
Goethem做了一套“Are We Playing
Yet?”的音频测试工具。Matas表示“大家的反应非常棒,几乎所有的浏览器提供商都参与了进来,我们对2012年充满信心!”

移动设备上还存在一些其他的问题,如:声音录制问题,缺乏广泛的position:fixed 的UI支持,移动浏览器的更新不够及时——Android
WebKit正逐渐变为现代的IE6。因此,SoundCloud大力提升了它在iOS和Android上的native
apps。Matas说“我们希望能够尽可能为用户提供最好的体验,但现在移动浏览器还没能跟上”。但是他未来仍然充满信心:“我们非常看好即将推出的设备API(getUserMedia),我们希望将来能够不依赖Flash直接在浏览器上处理声音”。

虽然目前的规范和浏览器还存在这样或是那样的问题,但是毫无疑问,这些问题肯定会很快得到处理。比如Mobile
Safari现在已经能够支持背景声音GeoLocation以及速度感应器了。虽然目前还存在这些问题,但Matas认为,与Flash相比,“HTML5版本的开发是一个相当快的过程。调试和优化都简单得多。这使得我们能够更轻松地开发或者重建应用,而最终的用户也会从中获益!”

6.The Wheels Of Steel

Scott Schiller开发的The Wheels Of
Steel由两个唱片和一个混音器构成,可以在浏览器中运行。在浏览器支持的情况下它优先选用HTML5
Audio,在不支持的环境中它会通过Scott的JavaScript库SoundManager
2使用Flash替代。它还使用了一些其他的有趣元素,包括使用<input type="range"> 实现唱片的平滑转换和本地存储,使用CSS3提升应用的视觉效果。Scott的The
Wheels Of Steel: An Ode To Turntables
(HTML)介绍了更多细节问题。里面说到“网页能够实现优雅的降级,即使在不支持JavaScript的环境中,应用的核心UI和内容也能够很好地显示。如果浏览器不支持JS网页就无法正常显示或变得模糊不清,这就是网站开发者的失职”。

发表评论

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