« 类别 HTML5&CSS3 下的文章

基于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的底部菜单区域,通常用以展示底部频道菜单、筛选项、价格结算栏等,固定展示;

»阅读全部

[置顶]

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

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

web app/mobile web开发指南入门教程

基础知识篇—–摘自:webkit webApp 开发技术要点总结
1. viewport:
也就是可视区域。对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域,这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;
实际上我们可以操作的属性有4 个:

1
2
3
4
5
6
width -             //  viewport 的宽度 (范围从200 到10,000,默认为980 像素)
height -            //  viewport 的高度 (范围从223 到10,000)
initial-scale -     //  初始的缩放比例 (范围从>0 到10)
minimum-scale -     //  允许用户缩放到的最小比例
maximum-scale -     //  允许用户缩放到的最大比例
user-scalable -     //  用户是否可以手动缩 (no,yes)

那么到底这些设置如何让Safari 知道?其实很简单,就一个meta,形如:

»阅读全部