Archive for the 'HTML JS' Category

如何做好ICON?

在网页中、APP中icon是一个辅助理解的可视化符号,为了适应各种不同的平台,有时候需要做各种尺寸的icon,例如安卓要求的drawable-xxxhdpi、drawable-hdpi等等不同规格,这部分工作可以归结为无脑力气活,当然也可以让工程师写程序自动生成。但是,以后有了更大分辨率的屏幕(例如Retina),又需要再做drawable-xxxxhdpi,那到底要加多少个x才是头?

本文旨在为寻找一个app和web开发中icon的设计、使用的范式。

不管是UI,还是程序员,都早已厌恶了这种生成不同尺寸icon的重复无趣的工作,于是,有偷懒的UI直接给出一个最大的尺寸,所有屏幕都用一个吧!不乏一些大公司也是这么做的。这很显然是一个不负责任的做法,大的icon会增加程序运行时的内存和下载时的带宽,大的icon在缩小时也会失真,常发生的就是圆圈不圆的问题。

那么,怎样做才能使得不同的屏幕都具有清晰的icon,又不用部署那么多重复的尺寸?
UI也许要问:为什么不直接用矢量icon?svg矢量格式是w3c标准推动的格式,但是,仍然有很多浏览器不支持svg,Android OS层面也不支持直接渲染svg。
UI二问:为什么文字可以随意缩放而那么清晰?That’s the point! 如果icon也能像文字一样设置一下字体大小,自己就可以缩放多好。于是乎,icon font来了。

几年前,随着扁平化风格的流行,在web领域就开始流行使用icon font来制作网页图标。代表有 Glyphicons,国内有阿里UE团队开放的 iconfont。但是在app领域,还没有普及开来,大部分的app,仍然使用不同尺寸的png作为icon。

icon font在web和app领域已经具备推广使用的条件,我们认为做好icon的步骤是:

  1. UI使用矢量工具绘制ICON
  2. 创作icon 字体文件,将制作的icon矢量svg文件上传到iconfont,制作字体文件后下载,也可使用FontCreator手动创建。
  3. 程序员使用icon font

本文旨在寻找一种范式,由于阿里iconfont已经讲述非常清楚,本文不再重复赘述,再给出一篇详细的iconfont创作过程

手机网页用Bootstrap还是jQuery Mobile

很多新手纠结这个问题?两个框架都能够支持做手机网页,那么它们的区别是什么呢,适用场景是什么呢?下面我们从这几个方面比较这两个框架:解决问题、功能、适用场景。

解决问题

Bootstrap是一个css框架,针对解决的问题有:

  • 跨设备的网页响应式布局问题。随着手机、平板、各分辨率屏幕的出现,如何能够一套前端在所有设备上自由适应?
  • 多人合作的前端布局和样式的规范问题
  • 常用前端css组件,如按钮、连接、表单、表格、分页组件、下拉菜单、导航栏、ICON等等
  • 常用JS前端组件(需要扩展js支持),如表单验证、Tips、Popup等等

jQuery Mobile是移动前端框架,包含js、html、css,提供一套完整的移动前端开发组件,可以比喻成Android开发框架,尽可能提供移动APP所具有的所有功能,针对解决的问题有:

  • 移动网页APP所常用的组件,例如:手机导航栏、选项卡、底部菜单、列表、表单等各种组件,而这些与Bootstrap提供的组件有很大区别,jQuery Mobile提供的是类似手机APP的组件,只用于移动网页,而Bootstrap提供的是面向所有设备的组件,并没有对移动设备专门考虑,与移动APP的组件体验不一样。
  • 网页页面之间转换效果
  • 异步数据加载

继续阅读 [ 手机网页用Bootstrap还是jQuery Mobile ]

前端学习日记5:css框架调研3

已经开始看node.js,前端已经绕不过node这座山峰了,迟早都要看的,今天也算是把那本node入门看完了,虽然是2000多star的书,但是太浅,还是要继续学习。而且了解node之后对自己的过去一些思路有了更深的理解。回到正题,我的css框架应该什么样子。
继续阅读 [ 前端学习日记5:css框架调研3 ]

前端学习日记4:css框架调研2

今天发现了国内流行的框架,据说上架两个月github上的star数已经超过2000,特意查了一下,感觉与bootstrap还是有差距的,bug目测还不少,差评较多,看demo发现弹出框卡住了。。回头想想,原来我搜索“前端框架” amazeui 关键词时候,是作为百度竞价排名的广告出现的。国内开源项目的宣传可能也很有中国特色。当然,项目肯定是很好,每个项目都是一点一点成长起来的,我个人真的是抱着支持态度的!
继续阅读 [ 前端学习日记4:css框架调研2 ]

前端学习日记3: css框架调研1

最近在参考trello学习前端,基本完成了大体框架,也是进一步了解了利用框架和组件的优势,于是考虑尝试下建立自己的小型的前端框架,或许不那么优秀,但自己用着舒服,想归想,我是这样子做的:

一.重复造轮子有意义么?

其实用自己的而不用已经写好的强大的框架并不是因为自己写的要更优秀。
一是自己写的更加熟悉,无论是扩展还是应用,可能都更容易使用。
二是可以提升自己对整套前端结构的认识,并且总结归纳。
三是框架层出不穷,熟悉一个又一个框架的时间成本可能也会越来越多。
继续阅读 [ 前端学习日记3: css框架调研1 ]

前端学习日记2:基础工具+简单规范

一. 基础工具——磨刀不误砍柴工

限于水平,个人觉得基础的工具只需要有一个好的编辑器就行了,原来一直都使用notepad++的,最近用了一下Sublime Text,比notepad是好了n多倍,提高了不止一倍的效率,所以工具还是很重要的,这里简单介绍下:Sublime Text 2 – 性感无比的代码编辑器

而且W3Cfuns提供了一个前端工具箱-神奇,非常的方便:前端工具箱

还有一些知道但暂时没有充分利用的: 工具合集
继续阅读 [ 前端学习日记2:基础工具+简单规范 ]

前端学习日记1

最近在集中精力的学习前端,所谓进阶,必须要描述一下我现在所处的阶段:从正式开始学习前端,到现在刚好过了一个学期,惭愧的是由于学业重外加个人的执行力等方方面面的原因,只是进行了基础的css, html, javascript的学习。其中css和html的学习方式就是利用codecademy——一个非常棒的入门学习方式,javascript也是错略看了一下javascript高级程序设计中基础和DOM部分。并且了解了基础的bootstrap和jquery,而且应用它们写了一点练习的静态界面,顺便还买了域名和服务器,尝试wordpress搭建了一个小博客。空闲时间也做了一个图书管理系统的简单的界面,虽然做的非常之差。

继续阅读 [ 前端学习日记1 ]

微信浏览器禁止app下载链接怎么办

通过扫描二维码下载APP已成为一个非常方便的方式,微信也成为扫描二维码重要的工具,但是扫描后微信浏览器会对APK和appStore的链接进行屏蔽,导致用户无法正常下载。本文提供两个迂回的解决方案:1.使用腾讯应用宝;2.提示用户使用浏览器打开。
继续阅读 [ 微信浏览器禁止app下载链接怎么办 ]

苹果官网对字体的css

苹果对于细节的追求值得我们学习,其官网的前端代码也是非常出色,在字体上让人有很强的艺术感。那么让我们来看看它是怎么处理的css的?
对于apple.com美国官网其字体看起来是这样的:
apple-font
对于apple.com.cn苹果大陆网站字体看起来是这样的:
apple-font2
分析来看,其CSS是这么设置的:
对于英文站点

body{
color: #333;
font-style: normal;
font-family: "Myriad Set Pro","Lucida Grande","Helvetica Neue","Helvetica","Arial","Verdana","sans-serif";
font-size: 18px;
line-height: 1.45;
font-weight: 400;
}

对于中文站点

html[lang="zh-CN"] body {
    font-family: "PingHei","Lucida Grande","Lucida Sans Unicode","Helvetica","Arial","Verdana","sans-serif";
}

我们看到苹果中文站点使用了“PingHei”这个字体,“PingHei”有人称之为“平黑”,据传是苹果向华文定制的黑体,其比划表现非常细腻圆滑。但是,平黑并不在Mac Os和Windows被内置,而我们又如何在苹果官网看到这个字体的呢?

CSS3 通过 font-face 实现的 Web Fonts 技术能够下载字体文件解释网页内容,但是中文字体一般都非常庞大,少则几兆,下载耗时太长,因此苹果使用字体子集,将需要的字体打包到字体文件中,因此文件量大大降低。另外,借助CDN加速提升访问速度。

更多关于苹果官网的字体可阅读 如何评价 2014 年 9 月 10 日苹果官网 Apple.com 的改版?

浏览器端JS导出EXCEL

很多表格业务需要将表格数据导出为Excel,通常使用后台语言java或者php实现数据查询组织Excel文件,提供下载。如果使用客户端JS导出Excel的话,可以减轻服务器端的运算压力,并且能够快速响应。
早期浏览器端导出excel都是借助IE的ActiveX,需要调整浏览器的安全级别,且只能再IE浏览器下使用。我们需要一种跨平台的解决方案。
而Flash具有强大的客户端处理能力,其FileReference类可以从浏览器向本地存储数据。随着Html5的发展,File API也支持浏览器读写本地文件。因此本文主要提供两种浏览器端JS导出EXCEL文件的解决方案:

1. JS FileSaver.js
2. Flash Downloadify

你可以先查看

Demo

通过查看源码,了解实现思路。
继续阅读 [ 浏览器端JS导出EXCEL ]