TAT.sheran 前端开发者不得不知的ES6十大特性
In Web开发 on 2016年03月07日 by view: 21,359
24

        2

ES6(ECMAScript2015)的出现,无疑给前端开发人员带来了新的惊喜,它包含了一些很棒的新特性,可以更加方便的实现很多复杂的操作,提高开发人员的效率。

 本文主要针对ES6做一个简要介绍。 主要译自:  http://webapplog.com/ES6/comment-page-1/也许你还不知道ES6是什么, 实际上, 它是一种新的javascript规范。在这个大家都很忙碌的时代,如果你想对ES6有一个快速的了解,那么请继续往下读,去了解当今最流行的编程语言JavaScript最新一代的十大特性。

 一、远观:认识WAAPI

当我们谈及网页动画时,自然联想到的是CSS3动画、JS动画、SVG动画、APNG动画等技术以及jQuery.animate()等动画封装库,根据实际动画内容设计去选择不同的实现方式。然而,每个现行的动画技术都存在一定的缺点,如CSS3动画必须通过JS去获取动态改变的值,setInterval的时间往往是不精确的而且还会卡顿,APNG动画会带来文件体积较大的困扰,引入额外的动画封装库也并非对性能敏感的业务适用。目前情形对开发者而言,鱼和熊掌似乎不可兼得,既希望获得更强大便捷的动画控制能力,又希望性能和体验上足够流畅优雅,如果能有一种浏览器原生支持的通用的动画解决方案,那将是极好极好的呢。

 React是一个用于构建用户界面的javascript库(官网定义),很多人认为 React 是 MVC 中的 V(视图),React 采用下面几个主要的思想

简单

仅仅只要表达出你的应用程序在任一个时间点应该长的样子,然后当底层的数据变了,React 会自动处理所有用户界面的更新。

声明式 (Declarative)

数据变化后,React 概念上与点击“刷新”按钮类似,但仅会更新变化的部分。

构建可组合的组件

TAT.sheran 手机上的位置传感器
In HTML5,移动 Web 开发 on 2015年08月31日 by view: 3,401
9

位置传感器

 

1 GPS与基站定位

位置传感器通常主要指手机内部的Global Positioning System (GPS)模块,GPS又称全球卫星定位系统,该系统包括太空中的24颗GPS卫星;地面上1个主控站、3个数据注入站和5个监测站及作为用户端的GPS接收机。最少只需其中3颗卫星,就能迅速确定用户端在地球上所处的位置及海拔高度;所能收联接到的卫星数越多,解码出来的位置就越精确。

获取位置信息,核心在于获取经纬度坐标,继而在手机地图中标注出自身坐标,从而确定当前所处的位置。目前手机定位的方式有两种,一种是基于GPS的定位,一种是基于移动运营网的基站的定位。基于GPS的定位方式是利用手机上的GPS定位模块将自己的位置信号发送到定位后台来实现手机定位的。基站定位则是利用基站对手机的距离的测算距离来确定手机位置的。后者不需要手机具有GPS定位能力,但是精度很大程度依赖于基站的分布及覆盖范围的大小,有时误差会超过一公里。前者定位精度较高。

TAT.sheran 手机上的环境传感器
In HTML5,移动 Web 开发 on 2015年06月29日 by view: 1,927
2

手机上的环境传感器,一般包括气压传感器、温度传感器、湿度传感器、光传感器、声音传感器和距离传感器等。气压传感器能通过气压测量,判断手机当前位置的海拔高度,能提高GPS定位的精度,在三星Galaxy Nexus上有配备;温度传感器一方面用来测量气温,判断当前环境是否舒适,一方面也能监测手机内部温度是否异常;而比较普遍的是光传感器和距离传感器,对智能手机来说几乎是标配,并且一般设计位于手机正面上方听筒附近位置。

TAT.sheran 浅谈flexbox的弹性盒子布局
In CSS3,HTML5 on 2015年05月19日 by view: 9,359
17

     flexbox是一个新的盒子模型,当你给一个元素使用了flexbox模块,那么它的子元素就会指定的方向在水平或者纵向方向排列。这些子元素会按照一定的比例进行扩展或收缩来填补容器的可用空间。flexbox有许多很好用的地方,下面就着重讲述一下它的一些使用场景:

 

Example 1: flexbox等分布局

 

      如果你要实现以下所示的样式,你可能首先想到的是用float:

 

         图片1 

 

TAT.sheran 自适应设计与响应式网页设计
In CSS3,HTML5 on 2015年04月14日 by view: 17,586
5

目前非常流行自适应设计与响应式设计,而且经常让人混淆,自适应设计不应与自适应布局混为一谈,它们是完全不一样的概念。

在这先说明下这两者的异同:

自从移动终端飞速发展以来,各种各样的机型突飞猛进,很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone/iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。

于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?

2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。

TAT.sheran 动态与富态
In 用户体验设计 on 2014年12月04日 by view: 13,890
4

一、动态:动画表达的设计应用

”动态“的设计常常能使页面的呈现更加动感,有活力,富有吸引力。具体来说,”动态”的设计在产品应用中常用于以下几种情形:

1.1. 丰富内涵

先试试为这段产品介绍做设计:

  • Dropbox可让您将所有照片、文档和视频随身携带,并轻松进行共享。
  • 您可从您所有的电脑、iPhone、iPad以及网络访问保存在Dropbox的任何文件。
  • 有了Dropbox,您的一切重要记忆资料和工作内容皆触手可及!

首先来看看图片的呈现:

df1

TAT.sheran Web设计基础知识(三)
In Web开发,用户体验设计 on 2013年12月26日 by view: 10,722
2

序:设计对于我们技术人员来说也是一门不可或缺的知识,学习设计就像学习一门新的语言一样,它也有遵从自己的一套规则。知道越多关于设计的知识,你就越能理解设计师的工作和意义,和设计师的交流也会更加畅通无阻。下面主要围绕3个方面给大家介绍设计的基础知识:

1、What is design?
2、What to learn?
3、How to design?

总结起来就是:2W1H

由于文章篇幅较长,所以分成3篇来介绍,分别是:

Web设计基础知识(一)
Web设计基础知识(二)
Web设计基础知识(三)

/***************************接上文  《Web设计基础知识(二)》*****************************/

2) layOUT

1) Layout-布局四原则(principles

1、contrast对比

TAT.sheran Web设计基础知识(二)
In Web开发,用户体验设计 on 2013年12月26日 by view: 9,903
5

序:设计对于我们技术人员来说也是一门不可或缺的知识,学习设计就像学习一门新的语言一样,它也有遵从自己的一套规则。知道越多关于设计的知识,你就越能理解设计师的工作和意义,和设计师的交流也会更加畅通无阻。下面主要围绕3个方面给大家介绍设计的基础知识:

1、What is design?
2、What to learn?
3、How to design?

总结起来就是:2W1H

由于文章篇幅较长,所以分成3篇来介绍,分别是:

Web设计基础知识(一)
Web设计基础知识(二)
Web设计基础知识(三)

/****************************接上文  《Web设计基础知识(一)》**************************/

2、What to learn?

在做好设计之前,首先你需要学习一些基本的知识:Colors(颜色)  +  layOut(布局)

1) Color