html5/css3 - 随笔分类 - shawn.xie

【html5构建触屏网站】之网站尺寸

摘要：本文分为两个部分，第一部分讨论跨平台网站的可行性，第二部分讨论viewport是如何设置的开发跨平台网站？靠标签的自适应宽高实现多尺寸通用！？标签宽高可以自适应没错，我们很早就可以这么做了。但是你会发现很多pc端的传统网站还是会把宽度固定。（淘宝采用1000px宽度，搜狐950px...）为什么我们不让网站自适应宽高呢？那是因为，如果我们听任标签宽度被浏览器任意拉伸，将导致极差的体验：你不会希望当浏览器被缩放到100px时，你的左边栏变成了面条；也不会希望当浏览器被过度拉伸时，你的网站看起来像小学生的横格本。所以，靠标签的自适应来实现跨平台，是不现实的，是以牺牲用户体验为代价的。很多时候我们必阅读全文

posted @ 2012-12-19 12:29 shawn.xie 阅读(9517) 评论(1) 推荐(2) 编辑

移动终端web开发必备知识

摘要：来源：腾讯 ISUX移动设备的用户越来越多，每天android手机的激活量都已经超过130万台，所以我们面向移动终端的WebAPP也开始跟进了。本文主要介绍webapp的开发与调试的相关知识和经验，以及给出几种可选的解决方案。一、基本概念（1） CSS pixels与device pixelsCSS pixels：浏览器使用的抽象单位，主要用来在网页上绘制内容。device pixels：显示屏幕的的最小物理单位，每个dp包含自己的颜色、亮度。等值的 CSS pixels在手机屏幕上占多大的位置，这不是固定的，这取决于很多属性。经过分析和总结，我们可以得出这么一条公式： 1 CSS pi 阅读全文

posted @ 2012-12-10 13:07 shawn.xie 阅读(12261) 评论(0) 推荐(1) 编辑

【html5构建触屏网站】之touch事件

摘要：一个触屏网站到底和传统的pc端网站有什么区别呢，交互方式的改变首当其冲。例如我们常用的click事件，在触屏设备下是如此无力。手机上的大部分交互都是通过touch来实现的，于是，对于触屏的交互式网站，触摸事件是相当重要的。 Apple在iOS 2.0中引入了触摸事件API，Android正迎头赶上这一事实标准，缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范。阅读全文

posted @ 2012-12-07 12:15 shawn.xie 阅读(57782) 评论(1) 推荐(3) 编辑

【three.js详解之一】入门篇

摘要：开场白webGL可以让我们在canvas上实现3D效果。而three.js是一款webGL框架，由于其易用性被广泛应用。如果你要学习webGL，抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。博主目前也在学习three.js，发现相关资料非常稀少，甚至官方的api文档也非常粗糙，很多效果需要自己慢慢敲代码摸索。所以我写这个教程的目的一是自己总结，二是与大家分享。本篇是系列教程的第一篇：入门篇。在这篇文章中，我将以一个简单的demo为例，阐述three.js的基本配置方法。学完这篇文章，你将学会如何在浏览器中绘制一个立体图形！准备工作在写代码之前，你首先要去下最新的three.js框架包，阅读全文

posted @ 2012-08-16 16:17 shawn.xie 阅读(152057) 评论(42) 推荐(25) 编辑

phoneGap-Android开发环境搭建

摘要：一.安装在安装PhoneGap开发环境之前，需要按顺序安装以下工具：1.Java SDK java sdk，不安装的话不能正常安装Android SDK。安装成功检测：启动DOS窗口start-->run-->cmd，在DOS窗口中键入：java -version，如能显示版本信息说明安装正常。2.Eclipse java开发工具，这我就不用多说了，推荐装classic版的。3.Android SDK 下下来安装完之后是一个Android SDK Manager，你需要下载以下组件，可能需要较长时间：4.ADT Plugin 这是一个Eclipse插件，作用是关联Android 阅读全文

posted @ 2012-08-15 20:04 shawn.xie 阅读(24186) 评论(7) 推荐(4) 编辑

前端福音——移动app轻量级后台parse

摘要：对很多前端工程师而言，不懂后台的确是一件很痛苦的事情。就像一个装修师傅，只会做门面，不会盖房子，落了单就做不成独立的产品。纵然js的功能越来越强大，若要做一个独立的app，很多时候我们不可避免地要用到后台数据库。于是我们很苦逼地去翻看php，.net，sql，纵使我们产品的规模可能很小很小。有没有一种轻量易用的简易后台数据库呢？Parse 是由YC孵化出来的、专为移动应用提供后台服务的云计算平台，为开发者包办繁琐的后台服务，让开发者只需专注于具体的开发工作。借助Parse的服务，应用开发时间可降低10倍 – 100倍。原本可能需要数个星期才能做出来的应用现在只需数个小时即可完成。因为针对移动a 阅读全文

posted @ 2012-08-08 15:01 shawn.xie 阅读(8333) 评论(3) 推荐(5) 编辑

css3 内贴图 360度环绕视角

摘要：之前经常看到有人发用css3做立方体的博文，心想如若能把视角拉到立方体里面，岂不是就能做一个环绕的视角效果了么。今天试着做了一下，发现这个视角还真不是那么好调的，毕竟标准制定的时候应该没人想到有人会这么玩的。chrome下显示不正常，safari下基本正常，但是景深还是有问题，仔细观察上图你会发现有扭曲~~~~代码分享如下，求完美解决方案：（测试图片可以在相册内下载，6张）<!doctype html><html><head> <title></title> <meta charset='utf-8' /> 阅读全文

posted @ 2012-07-11 18:04 shawn.xie 阅读(2198) 评论(3) 推荐(0) 编辑

基于html5 input API和css3 颜色渐变的颜色渐变调节器

摘要：老师课下布置的作业，做的扩展性不错，代码分享如下：<!doctype html><html><head> <title>颜色渐变调节器</title> <meta charset='utf-8' /> <style type="text/css"> #canvas{height:100px;width:980px;border:2px black solid;border-radius:10px;} form{padding:20px;} form div{padding:1 阅读全文

posted @ 2012-07-03 14:28 shawn.xie 阅读(3960) 评论(0) 推荐(0) 编辑

小扣钉

随笔分类 - html5/css3