[置顶]

基于H5的webapp开发实践系列总结(索引)

时间飞快,转眼间接触H5项目到开发WEBAPP已经有一年半的时间了,新的项目上线,终于可以有一些空余的时间来整理一下这一年多走过的路,虽然艰辛,但收获颇多!总结不容易,尤其是能够清晰描述出来更难,知易行难,希望将经验传递给更多志同道合的来者!接下来将会陆续讲过往遇到的问题及思考写在这个博客里,敬请期待(按时间归档)。

基于CSS3的WEBAPP横向滑动模式演化

前言

随着移动网络速率和设备硬件水平的不断提升,webapp的发展更加的native化,其表现效果和性能也会越来越好,在可预计的未来很有可能替代native或者平起平坐,那么我们研究更好的交互体验是非常有必要的。

目前我们所常见的webapp越来越多的是以SPA(single page application)的模式进行开发,同时嵌套在android或者ios本地壳里面,也就是hybrid应用,这种开发方式所带来的优势就不多讨论,本文研究的重点是在SPA模式中,页面间横向滑动切换场景时模式是怎样设计的。在这篇文章里,笔者将展示并阐述四种横向滑动模式的架构布局及CSS设计方案,供大家参考(多图请耐心加载)。

一、容器整体滑动(DEMO只演示A-B-C-B,下同)

模拟动画效果见下图(上),滑动分解见下图(下):

容器整体滑动

整体容器滑动

DEMO地址:http://nirvana.sinaapp.com/demo_slider/slider_1.html 

»阅读全部

WEBAPP实践之H5架构布局篇

一个合理的单页WEBAPP的布局如何诞生

俗话说千里之堤毁于蚁穴,根基不稳,大厦再高也终究会倒,可见好的基础是多么重要,对于一个WEBAPP项目来说,HTML结构就是基础,那么一个好的HTML结构是要支撑起整个项目的推进及交互代码的迭代的,它首先要满足整个项目的需求,既然是要替代native的产品,那么它的设计就应该朝着native app的目标去实现所有功能和交互,首先来看一个典型的页面:

A区域:APP的头部导航区域,即navigation,由页面标题、返回、回首页、切换等功能按钮组成,固定不滚动;

B区域:APP的主体内容区域,展示内容及列表等,可滚动;

C区域:APP的底部菜单区域,通常用以展示底部频道菜单、筛选项、价格结算栏等,固定展示;

»阅读全部

IOS、Android、WP移动平台浏览器下常用字体支持度研究

做了近一年的无线项目,总觉得少了点什么,对,是总结和研究,一直在追随前人的脚步,在他人的经验中获取认知,恐怕做得越多只会觉得得过且过的感觉越深刻,最近终于有空闲的时间来做一些研究和总结了。

webapp风行了很久,但是最近一年才真正实际的应用起来,尤其是混合型的app开发深的企业的青睐,那么作为一名前端工程师,要做的事情就是要把移动端app以web的形式表现出来,自然字体是不可避免的因素,长久以来对三大移动平台的可用常用字体具体怎么定义和表现含糊不清,也出现了很多情况下无法向交互和视觉设计师们解释,故来做怎么一个研究和整理。

研究过程如下:

1. 确定目标范围。

   首先我们不是要研究移动端的设备具体可以支持什么字体,那样毫无意义,我们想要得到的是我们在WEB里常用的字体和类型在移动端的支持度和具体表现。

»阅读全部

Adobe Edge Inspect跨平台浏览器调试工具使用教程

最近一直在搞WEBAPP项目,找到一个跨浏览器联调的工具,试了一下还是蛮爽的,可惜免费版一次只能连接一个设备,废话不说直接切入正题。

Edge Inspect是Adobe出品的一款联调工具,是基于chrome的一款调试工具,在移动开发中联机调试很有效。

本文介绍一下此软件的下载安装使用方法,希望对热衷于移动端开发的前端工程师有一点帮助。

»阅读全部

ecshop在Win2008IIS7.5下可用的伪静态规则

服务器环境如下:
OS:Win2008 R2 64BIT
Web 服务器:Microsoft-IIS/7.5
Fastcgi模式
URL Rewrite Module 2.0(下载地址:http://www.iis.net/download/URLRewrite
PHP 版本:5.3.24
ECShop 版本:v2.7.3 RELEASE 20120411
编码:UTF-8

因为懒,就在网上找了N次方个规则,结果没有一个能正常使用的(包括EC安装包里的静态规则,在以上的环境中也无法正常使用)。看来还是需要自己动手,才能丰衣足食。

iis7.5的站点都有web.config,将以下规则拷贝过来,在后台开启伪静态再清除缓存,代码如下: »阅读全部

Windows 2008R2+IIS7.5+PHP+Mysql+Wincache+URL伪静态环境搭建教程

这段时间安装了一台win2008的主机来跑ECSHOP,遇到了不少麻烦,其中也牵涉到PHP配置性能优化以及伪静态的问题,最后都在摸索中解决,这篇文章给了我很多启示,索性转载过来!

安装需求前言
由于种种原因,服务器一直都用Windows 2003,之前www.zhaoipad.com有感于Processed in一直都高于2.0,于是不得已痛下决心,预计花费一天时间等待机房技术帮安装Windows 2008操作系统,中途还是比较周折,刚开始由于没有说明机房技术安装的是Windows 2008 32位的。一想这怎么行呢,有64位不用我干嘛整那32位的呢,于是在一小阵子纠结后果断又安排机房技术重新给安装Windows 2008 R2,顺便说一下,Windows 2008 R2没有32位的,只有64位一个版本。以后别傻了,要记住教训,若不是机房技术人品好,恐怕来回让你折腾烦了,给你一拖再拖,网站瘫痪在那时间一久伤不起啊。

下面还是进入正题吧,首先我们来讲一下我们看完此教程后需要完成的目标:
Windows 2008R2+IIS7.5+PHP+Mysql+Wincache+Memcache+URL伪静态环境搭建+并做适当的Discuz优化

整个环境的搭建与测试大致可以分为十部分来.
第一步:我们需要安装好一个Windows 2008 R2 操作系统,这一步我想不是我们这个阶段所要考虑的事情,因为很多东西需要机房的技术来配合你来完成。你想做也无法做,所以此步略过! »阅读全部

百度迎来算法新时代-“绿萝”正式上线

今天收到很多朋友反映,网站排名出现异常情况,有的全面中招排名消失,有的则大幅上升,关注了一下才发现百度昨天有大动作了~
百度明天(2月20号)推出名为绿萝的反作弊算法。百度站长平台公告指明这个算法目的是打击链接买卖,受影响的网站类型将会是:超链中介,出卖链接的网站,购买链接的网站。

这是去年10月百度反超链作弊算法之后又一次更明确对付买卖链接的动作。
»阅读全部

微信公众平台「订酒店」的订房功能是如何实现的,运用什么原理?

好吧,最近被很多人问起了这个事情,我来揭秘一下:这个公号是我们1个工程师用了半天时间完成的。这是一个“一句话需求产品”,即通过微信告诉我们你的位置,我们告诉你附近的信息。

在微信出现可以共享位置功能的时候,我们就在思考,如何将快捷酒店管家与微信联合起来。快捷酒店管家是一个基于位置的快捷酒店预订应用,解决的主要问题是基于位置查找并预订快捷酒店。
通常,会有很多人出差到一个陌生的地方的时候找不到附近的酒店,即使找到了也不知道如何去,打电话到前台问了半天也是一头雾水。我们就想,如果能结合微信的位置功能来解决这个痛点是最好的了。
于是,9月份的时候我发了一个原型到微博上: http:// weibo.com/79791167 /yCjw7oa8w .

后来,微信出了分享到微信的功能,一定程度上解决了这个痛点。就是你告诉你的好友如何去你出差所在的酒店找你。(在快捷酒店管家酒店详情页面点击分享到微信即可)
»阅读全部

Shanghai Art Fair 2012见闻

开篇:2012(第十六届)上海艺术博览会作为国内及亚洲规模最大、历史最久、国际化程度最高的艺术品交易盛会,将延续去年的规模与声势,于2012年11月1日至4日在上海世贸商城倾情上演,再次为海内外收藏家献上阵容华丽的艺术盛宴。
以前总觉得跟自己艺术有点灵通,也曾梦想着有一天会成为一个艺术家或者设计师,可惜自己天赋绝非异禀,艺术家是当不成了,但是艺术却可以存在于普通的生活之中,正像此博客一样,我希望代码也能是一种艺术的形式?你觉得呢?
先来晒下今天的战果吧,哈哈,画是没有买一张(太贵%>_< %买不起...),画册和小样手机一大堆,还不错哦!
上海艺博会战果-画册,小样
还有一张很有趣的图哦。。
»阅读全部