随笔分类 - Web App
摘要：公司简介：深圳市彩讯科技有限公司公司网址：http://www.richinfo.cn/index.php公司产品：http://www.richinfo.cn/products.php岗位职责：参与负责中国移动139邮箱WEB标准版、企邮邮箱WEB标准版、邮箱WEBAPP版本的前端页面构建。任职资格：1、精通(X)HTML和CSS，对语义化、模块化、分离有深刻的理解;2、精通WEB标准页面开发，并实现兼容多终端和平台的用户界面；3、熟悉网页性能优化和站点速度优化，能运用重构技术来提升用户体验；4、熟悉HTML5,CSS3,能时刻关注新技术应用，并转化为实际生产力；5、能始终把"用户
阅读全文
摘要：深圳彩讯科技 用户体验室 页面重构组 招页面重构师！！！岗位职责：负责中国移动139邮箱WAP版、HTML5版、PAD版、WEB版等网页重构。任职资格：1、精通(X)HTML和CSS，对语义化、模块化、分离有深刻的理解;2、精通WEB标准页面开发，并实现兼容多终端和平台的WEB用户界面；3、熟悉网页性能优化和站点速度优化，能运用重构技术来提升用户体验；4、熟悉HTML5,CSS3,能时刻关注新技术应用，并转化为实际生产力；5、能始终把"用户至上"、"细节决定成败" 的思想贯穿于实际行动中；6、熟悉手机网站的重构优先考虑；7、熟悉对象模型与脚本语言Java
阅读全文
摘要：原文：CSS的未来：一些试验性CSS属性译自：The Future Of CSS: Experimental CSS Properties请尊重版权，转载请注明来源，多谢！尽管现代浏览器已经支持了众多的CSS3属性，但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性，如border-radius、box-shadow或者transform等。它们有良好的文档、很好的测试并且最常用到，所以如果你最近在设计网站，你很难能脱离它们。但是，隐藏在浏览器的大宝库中是一些高级的、被严重低估的属性，但是它们并没有得到太多的关注。或许它们中的一些应该这样(被无视)，但是其它的属性应该得到更多的认可
阅读全文
摘要：最近准备做ipad web app 读到此文故收之。大部分的用户都并非对体验与设计有深入研究，而是从“看着舒服、用着好用”的角度来衡量一款产品，据笔者观察一些网页设计与数码设计，发现两者之间有着异曲同工之妙，他们对用户的研究、设计发展趋势几乎是共通的，例如苹果著名的COVERFLOW，和网站设计首页焦点图展示的效果。因此，我们常提的CROSSOVER思维可以用上了，互联网与传统数码的视觉设计与交互体验可互为灵感参考。前言为什么蓝魔的设计感觉“山寨”，而苹果的设计却被无数人追捧为“艺术品”？为什么很多国产品牌模仿国际品牌，作品仍然缺乏吸引力？笔者认为，很大的原因是因为他们都缺少自己的设计理念。好
阅读全文
摘要：全新iPad的发布，不少朋友对新的分辨率（2048x1536像素）产生各种担心。比如担心设计全新iPad应用程序的界面时，是否需要为设计师配备更大的显示设备。又比如因为要处理分辨率的适配而担心开发难度增高。种种担心，丝毫不亚于我们常常听到的对Android设备存在多种分辨率而发出的各种抱怨。为超高或多种分辨率的设备设计界面，真的有那么可怕吗？我们先来一起了解一下屏幕尺寸与分辨率之间的关系吧。有条件的朋友也可以动手试一试。一台22英寸显示屏与一台15.4英寸的显示屏，分辨率都是1680x1050像素。它们要显示相同的内容：一个100x48像素大小的方块。通过对比可以发现，方块在15.4英寸显示屏
阅读全文
摘要：如果你是一名前端er,又想在移动设备上开发出自己的应用，那怎么实现呢？幸好，webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了，现把一些技巧分享给大家 ：1. viewport：也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;实际上我们可以操作的属性有4 个：?width - // viewport 的宽度 （范围从200 到10,000，默认为980 像素）height
阅读全文
摘要：印象当中，最近这些年的春天总是会带来让人觉得真心别扭的气候体验，雨和冷风就像催化剂一样，让生活和工作当中的人和事也变得异常凌乱，仿佛一团被咀嚼到完全失去味道的槟榔。November Rain前奏当中的钢琴旋律多少可以让心安然一些，一旦摘下耳机便又是个令人想要把自己的脑袋拧下来吃掉的世界。 可脑袋一旦被拧下来，就什么也无法吃的样子了，不是吗。说正事儿吧。Designing for touch，关于这个话题及相关的文章，最近貌似已然铺到大街上了，不过我还是做我的吧。在标题里加了个不伦不类的“又是”二字，以示区分。内容方面应该会有些交集，但这是我自己的。 Josh Clark老师最近蛮活跃的。在..
阅读全文
摘要：注意：以下所说的“大多数”是指在我们测试过的机型中，发生此类状况的手机占比达50%及以上，“部分”为 20%到50%；“少数”为20%及以下。而这个概率也仅仅只限于我们所测试过的机型，虽然我们采集的样本尽量覆盖各种特征的手机，但并不代表所有手机的情况。XHTML部分大多数手机不支持的：表单元素的“disable”属性部分手机不支持的：“button”标签“input[type=file]“标签“iframe”标签。虽然只有部分手机不支持这几个标签，但因为这些标签在页面中往往具有非常重要的功能，所以属于高危标签，要谨慎使用。少数手机不支持的：“select”标签：该标签如果被赋予比较复杂的CSS
阅读全文
摘要：HTML, 从HTML文档的开始到结束排列:<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/> 让内容的宽度自适应为设备的宽度, 在做Mobile Web时必须加的一条<meta name=”format-detection” content=”telephone=no”]]> 禁用手机号码链接(for iPhone)<link rel=”apple-touch-icon” href=”icon.png”/> 设置你网页的图标, 尺寸为57X57 px<!– i
阅读全文
摘要：本文详细分析了Web App和Native App的优势和劣势，指出Web只是我们作为设计者和开发者所期待的一种理想化结果，是一种趋势，将会是一个相当久的过渡阶段，对复杂产品来说，Native App + Web App也许是个不错的解决方案。AD：未来是Web App的天下，还是Native App的天下？作为设计师，我们是应该努力把客户端的体验提升到最优，还是在网页应用层面上做更多的设计？这个一直是大家关心的话题。那么，我们首先应该立体的认识一下Web App和Native App。一、Web AppWeb无需安装，对设备碎片化的适应能力优于App，它只需要通过XHTML、CSS和Java
阅读全文
摘要：移动web开发之道（Android与Iphone） 1、javascript篇 （1）使用querySelector和querySelectorAll这两个方法获取文档对象中DOM节点的引用 由于这两个方法都是本地方法，因此在执行效率上比较理想//获得一个id为masthead的对象的引用：var masthead = document.querySelector( "#masthead ");//获得id为banner的UL元素下面最后一个LI元素下的A标签的引用：var anchor = document.querySelector( "#banner >
阅读全文
摘要：本文会告诉你目前所出现的18中手机浏览器的细节，更多信息可以参见http://quirksmode.org/mobile/mobilemarket.html手机浏览器被分为全浏览器和简化版浏览器safari浏览器受欢迎度:非常好供应商:apple操作系统:IOS(及苹果手机操作系统)渲染引擎:webkit文档：http://developer.apple.com/safari/library/navigation/index.html#section=Resource%20Types&topic=Reference版本：参照iphone os版本，iphone用户一般都会非常勤劳的去更
阅读全文
摘要：iPad开发的局限性在iPad上使用Safari浏览普通网站网页的时候，网页因为太大而导致需要手动放大缩小或者滑动，虽然这种滑动行为在iPad上市之初的各种宣传中被津津乐道，但时间久了我们还是会发现这样做并不方便，给用户带来的感受并不十分好。不支持Flash在没有越狱的iPad Safari中，网站的Flash都是无法显示的，但可以通过第三方软件或插件或者浏览器来解决，不过，即使不能显示Flash，你一样能够用HTML5和CSS3实现同样的效果。没有鼠标光标这意味着鼠标属性，例如鼠标悬停属性是不可能有的。你或许可以为这个找到一些变通的办法，但是到你的用户那里这些该如何工作将会是困难的事。滚动条
阅读全文
摘要：与众多优秀的产品相同，iPad应用的成功也取决于产品核心价值以及用户体验模式等诸多方面的因素。除了游戏之外，多数类型的应用都必需能够在一定的上下文环境中帮助用户解决某些特定的问题。它应该足够的简单易用，使用户不需要进行复杂的设置和学习就可以顺利上手。而产品在视觉外观、交互方式、情感联接等方面的表现更会直接影响到用户对于应用的体验满意度。在本文中，我们将共同了解一些你在设计工作中需要认真考虑与贯彻的指导准则。我们不会对创建iPad应用的完整设计流程进行讲解，也不会将时间花费在几乎任何一篇移动应用设计文章都会提到的那些细节当中的小方法小窍门上。本文的主要目的是帮助你在实际的iPad应用项目中制定更
阅读全文
摘要：接触Mobile WEB前端开发将近一年时间了，在这不算短的时间里，通过吸取圆心、沉鱼等前辈们的经验以及不断的摸索和实战，总结出一套自己的Mobile WEB“研发流程”。为什么叫“研发”流程而不是“开发”流程，在下文中会进行解释。首先我们来看一下“研发”的流程图：1. 为什么要叫“研发”流程？我们知道，对于传统的WEB前端开发，一般情况下我们需要关注的操作系统/浏览器情况如下：操作系统：Windows/MacOS浏览器：IE(6、7、8)/Firefox/Safari/Opera/Chrome这些操作系统和浏览器的基本状况如下：市场占有率和使用分布情况相对稳定比较开放，厂商对开发人员的支持较
阅读全文
摘要：您或许正在或准备参与一个WepApp项目，您或许正在Google搜索mobile development相关的文章，您或许是一名专业的WEB前端工程师，您或许想学习Mobile前端开发方面的技术，如果您被我说中了，呵呵那么这篇文章将为您带来意想不到的惊喜！当您看到这篇文章时，哥已经默认认为您是一名资深的WEB前端工程师，如果您不是，可能您会遇见许多不理解或听不懂的专业术语或前端技术（包括WEB、Mobile）。但是这没有关系，给自己一点信心吧，用心的阅读下去……自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应
阅读全文
摘要：误区一：手机用户一直忙忙碌碌，并且注意力是比较分散的yixieshi 错。手机不只是在旅途中使用，我们在沙发上也会使用手机，在厨房里也会，当我们在外面临时逗留时更会使用手机。在使用手机的时候，我们可能在处理一些琐碎的工作，也可能百无聊赖，但这时我们的注意力更有可能集中在手机上。 误区二：移动意味着更少 错。移动网页设计并不轻松。设计人员对手机屏幕大小做了太多假设。说移动网页设计应该更少，就像认为平装书的页面比较小、应该删除一些章节一样可笑。yixieshi 误区三：避免复杂 错。丰富的功能让我们的生活更有质感。手机网页设计人员不应该将复杂性和麻烦混为一谈。他们需要好好面对复杂性，...
阅读全文
摘要：Media Queries最近比较火的一个话题，通常用于响应式布局设计，它可以让浏览器根据当前窗口尺寸自动在样式表中选择一种样式并使用。我们知道，在不同的设备中，浏览器的窗口尺寸可能是不同的。如果只针对某种窗口尺寸制作不同的网页，在其它设备中呈现该网页时就会产生很多问题；如果针对不同的窗口尺寸制作不同的网页，则要制作的网页就会太多。为了解决这个问题，CSS3 中单独增加了Media Queries模块，使用这个模块，网页制作者只需要针对不同的浏览器窗口尺寸来编写不同的样式，然后让浏览器根据不同的窗口尺寸来选择使用不同的样式即可。格式：@media 设备类型 and (设备特性) {样式代码}
阅读全文
摘要：着通信业、移动设备产业、互联网产业的快速发展，如今我们已经可以明显地感受到，我们身边的移动设备越来越多，越来越智能，价格越来越低，也越来越与我们的生活密不可分。去年底在支付宝做分享时，我曾说过一句“Mobile WEB风暴，即将席卷中国”，现在看来，我们似乎已经开始接受风暴的洗礼了吧。Mobile WEB，曾经或者现在，我们或许习惯性地称之为“WAP”，其实叫什么不重要，充其量只是个名字而已——就像Brian Suda在《Introduction to the mobile web》所说的那样——重要的是，我们到底该如何看待它，以及进行哪些思考。如今的“WAP”，早已不是当初只有一些超链接和一
阅读全文
浙公网安备 33010602011771号