20 JavaScript Frameworks Worth Checking Out
The number of web applications being created and used has grown rapidly since the new millenium. And importantly, so has the sheer complexity of them — specially on the front end. No more static pages, no sir!
You have a ton of sections each interacting with each other and the server and yes, it’s as complicated as it sounds and just as hard to pull off. Today, I’d like to talk about a few, choice JavaScript frameworks that aim to simplify front end application development.
Why We Need Frameworks Like These
If you think jQuery is the answer, you lose a cookie and get an F grade!
Creating responsive, fluid, and maintainable interfaces for web apps isn’t as easy as one would imagine — there is data to be sent back to the server and the results parsed, data stores to be updated, views to be re-rendered and so much else that needs to be done in the background. Desktop developers have it much easier with robust tools and well defined workflows. Us, poor web devs? We’ve been twiddling DOM elements, creating models by hand and pulling our hair out trying to keep everything synched.
The monstrous rise in the number of web apps being built recently has really made it apparent that we need better tools and frameworks and the devs have responded with a staggering amount of solutions. Today, we’re going to go over just a few of these. A couple of these are quite old but I’m certain you can learn a lot from perusing their code base.
Sure, a few of these may be a little old but their code bases have lots of lessons to teach.
Sproutcore
Sproutcore powers a lot of high profile apps including MobileMe amongst others. Sproutcore has a steeper learning curve compared to the other options but makes up for it with developer productivity once he/she has learned the ropes.
This framework boasts a UI framework, the market standard MVC architecture and well written documentation.
Related links:
- Using SproutCore 2.0 with jQuery UI
- Build a Micro-Blog with SproutCore
- When To Use SproutCore, and When Not To
Cappuccino
Cappuccino was created by the 280North team, now owned by Motorola. This framework gained significant coverage with the release of the 280Slides — built completely with Cappuccino.
This framework varies dramatically from the others in that a developers doesn’t need to understand or work with any of the front end trifecta — HTML, CSS or the DOM. All you need to master is the framework!
Related links:
JavaScriptMVC
Built on jQuery, JavaScriptMVC is a veteran in the front end frameworks battlefield, dating back to 2008. Featuring a familiar, and obvious, MVC architecture, this framework is quite full featured with support for code generators, testing and dependency management.
Related links:
Asana Luna
Luna is one of those hush-hush private frameworks that people have been talking about. And for good reason, I must admit.
The framework features a lot of niceties including an evolved MVC architecture, pubsub, caching, routing and authentication.
Related links:
Backbone.js
Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.
Related links:
qooxdoo
qooxdoo is a universal JavaScript framework that enables you to create applications for a wide range of platforms. With its object-oriented programming model you build rich, interactive applications (RIAs), native-like apps for mobile devices, light-weight traditional web applications or even applications to run outside the browser.
Related links:
Spine
Spine is a lightweight framework for building JavaScript web applications. Spine gives you a MVC structure and then gets out of your way, allowing you to concentrate on the fun stuff, building awesome web applications.
Related links:
ActiveJS
ActiveJS is a JavaScript application framework that provides local and REST based data modeling and pure DOM view construction with back button and history support along with framework agnosticm and lack of external dependencies.
Related links:
Eyeballs
eyeballs.js is a slim javascript library designed to sit on top of a javascript framework, such as jQuery or Prototype. eyeballs.js can sit on top of an already implemented web app with a well thought out object model. It can also be used to build standalone javascript apps, backed by HTML5 local storage or something like CouchDB.
Related links:
Sammy
Sammy.js is a tiny JavaScript framework developed to ease the pain and provide a basic structure for developing JavaScript applications.
Sammy tries to achieve this by providing a small ‘core’ framework and an ever-growing list of plugins for specific functionality.
Related links:
Choco
Choco brings the MVC to the client side! A Choco app consists of only one HTML page, all the interactions are managed by Javascript. Your UI only uses HTML and CSS!
Related links:
Agility
Agility.js is an MVC library for Javascript that lets you write maintainable and reusable browser code without the verbose or infrastructural overhead found in other MVC libraries. The goal is to enable developers to write web apps at least as quickly as with jQuery, while simplifying long-term maintainability through MVC objects.
Related links:
Angular
Angular supports the entire development process, provides structure for your web apps, and works with the best JS libraries. With angular, the view and data model are always in sync — there is no need for manual DOM manipulation.
Angular is small, weighing in at 60kb, is compatible with all modern browsers and works great with jQuery.
Related links:
ExtJS
Ext JS 4 brings a whole new way to build client applications, by introducing the popular model-view-controller pattern to Ext JS. By allowing the separation of data management, logic and interface elements, Ext JS 4 makes it easier for even large development teams to work independently without worrying about stepping on each other’s toes. Ext JS 4 ships with a helpful MVC guide to get started.
Related links:
Knockout
Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.
Related links:
- Into the Ring with knockout.js
- Creating Rich Interactive Web Apps With KnockoutJS
- Build Dynamic Pages with Knockout.js
Jamal
Jamal is a set of conventions and small javascript libraries to archieve a complete separation of html, css and javascript in your web application. Jamal is built on jQuery and inspired by MVC frameworks like Ruby on Rails, CakePHP and its derivatives.
Related links:
PureMVC
PureMVC is a lightweight framework for creating applications based upon the classic Model, View and Controller concept.
Based upon proven design patterns, this free, open source framework which was originally implemented in the ActionScript 3 language for use with Adobe Flex, Flash and AIR, is now being ported to all major development platforms.
Related links:
TrimJunction
The open source Junction framework is a conventions-over-configuration, synchronizing web MVC framework for JavaScript. TrimPath Junction is a clone or port of the terrific Ruby on Rails web MVC framework into JavaScript.
Related links:
CorMVC
CorMVC is a jQuery-powered Model-View-Controller (MVC) framework that can aide in the development of single-page, web-based applications. CorMVC stands for client-only-required model-view-controller and is designed to be lowest possible entry point to learning about single-page application architecture.
Related links:
batman
batman.js is a full-stack microframework extracted from real use and designed to maximize developer and designer happiness. It favors convention over configuration, template-less views, and high performance by simply not doing very much. It all adds up to blazingly fast web apps with a great development process; it’s batman.js.
Related links:
That’s a Wrap!
And we’re done here. The number of options here might border on overdoing things at first glance but each of these are a little different in how they tackle this problem and given a problem, different solutions and choices are always a welcome addition.
As I mentioned earlier, if you think a framework should be here but isn’t, just drop us a line below and we’ll update this roundup accordingly. Thank you so much for reading!
为什么说很多NoSQL的Benchmark是扯淡?
正如原作者所言,本文有标题党之嫌,但确实道出了一个众所周知的问题。就是很多NoSQL产品的官方 benchmark 过高。虽然本人并不完全同意作者的观点,但是其不盲从轻信较劲的态度还是值得学习。
抱歉我用了这么一个标题党的题目做为标题。
写这篇文章只是想引起大家的注意:在选择NoSQL产品时,达到标称性能,需要诸多限制条件,例如本文主要讨论的磁盘I/O。
现在NoSQL的产品已经很多了,很多都宣称“我们的QPS可以达到十万,甚至百万”,但是当我们在生产环境中使用的时候,却明显的感觉到,随着数据文件不断增大,NoSQL的性能却指数下降,问题处在哪里了?
这些NOSQL的Benchmark的量都有一个前提“你得内存足够放下你的全部数据文件”
Case1:有人说,我内存16GB,那只能说明你得数据规模还不够大……我已经经历被无数上百GB的数据库折磨过了。此外,你可能需要在1GB内存的虚拟机上支撑数10GB的数据,比如我现在的情况。
继续讨论,一旦内存放不下全部的数据,会怎么办呢?
有很多策略,但无非都是访问磁盘,将数据Cache到内存中。我们先讨论最坏的情况,假定每条记录的偏移是放在内存中,但所有数据都放在磁盘,我们使用fseek等操作来查询磁盘。
来看下面的测试代码。
#相关代码, [四号程序员] http://www.coder4.com void test_fseek_set() { long offset; FILE*fp = NULL; long i; fp = fopen(FILE_NAME, "r"); if(!fp) { printf("Open file fail.\n"); printf("%s\n",strerror(errno)); exit(-1); } for(i=0; i<TIMES; i++) { //Because random max is 1<<30 - 1 offset = random() * 10 % MAX_FILE; if(fseek(fp, offset, SEEK_SET)) { printf("fseek error.\n"); printf("%ld",offset); printf("%s\n",strerror(errno)); } } fclose(fp); }好了,你猜猜上述随机fseek的程序在一个7200转的硬盘上,针对一个4GB的文件随机访问,能跑多块?
答案是QPS<=80。
有人说你骗人,我跑的能到1XXX,那么请你执行下述命令清空你内存中的磁盘缓存。
#相关代码, [四号程序员] http://www.coder4.com sync; echo 3 > /proc/sys/vm/drop_caches很多时候,之所以我们能在小数据时达到NoSQL官方标称的QPS,而大数据量却指数下降,都是这些缓存在作怪。说白了,我们很Happy的Benchmark半天,实际是在玩系统的缓存,当然快了。
一旦你的数据文件大于内存磁盘缓存,那么速度会马上像我列举的这样,不会多余80QPS,在一个4GB的文件上。
有人说mmap,我曾经也是这样YY的,但根据我的测试,事情不是这样。
我有一个120GB的Tokyo Cabinet数据文件,把内存开满,它默认会用mmap,然后你会发现top中“VIRT”一列,会显示为120GB+(换算后),而我得机器内存却只有32GB。这时,当你访问恰好不在内存中的那部分数据时,操作系统会进行非常耗时的换入换出操作(首先就需要fseek等)。在这台24核、32GB的机器上,QPS勉强能达到3000(这已经远远低于标称的QPS),而一旦清空缓存,QPS会迅速跌落到70左右……可能还会有人说:我没事闲的为啥要自己清空缓存?
机器不是给你一个NoSQL进程服务的,很多系统其他服务都需要访问磁盘,读取文件,渐渐的就会把你Cache起来的内存全部换掉,根据实际测试的情况,一台完全闲置的机器,开TT能达到3000, 闲置放置48小时(不开其他服务), 性能就会骤降到1000左右,再放置72小时左右,就回归到70的qps了,此时Cache已经基本完全换出。
综上,mmap不是神,因为你的内存不够,而其他进程也会争夺内存来做自己的Cache。
如果你想充分发挥NoSQL的性能,建议用支持集群的NoSQL产品,尽量将全部数据放入内存中。
或者你没钱购置很多Moster内存的服务器,像我一样,就不要期望NoSQL能有很惊人的性能了。此时,NoSQL所能带来的提升,只是关系数据库所剪掉的那部分开销,如果你基本没有什么join,那么可能还会不如关系数据库。
分析性能,我们不能仅仅看官方的数据比较,要考虑机器的实际情况和自己的数据规模,最终才能分析出瓶颈出在哪里。
对于原作者的观点,本人提出两点看法:
- 1.要充分发挥NoSQL性能,并不是一定要尽量把所有数据放到内存,实际上只要保证了热数据都能装在内存中就够了。(这里的热数据,包含了索引数据及系统开销)
- 2.作者举例中的程序,主要用了磁盘seek,磁盘的seek速度慢,原本就是磁盘物理结构的硬伤,所以许多NoSQL存储采用了变随机写为顺序写的方式,减少磁盘seek操作,也是提升IO性能的良方。
相关文章: |
Redis并发性能测试benchmark |
LevelDB、TreeDB、SQLite3性能对比测试 |
MongoDB、HandlerSocket和MySQL性能测试及其结果分析 |
来自Riak的LevelDB与InnoDB的性能测试 |
关于NoSQL的思考-为什么我们要优化存储的写性能? |
无觅 |
from NoSQLfan: http://blog.nosqlfan.com/html/3086.html
回答下在bugs.php上的一个问题
- 作者: Laruence( )
- 本文地址: http://www.laruence.com/2011/09/22/2152.html
- 转载请注明出处
今天在bugs.php.net上, 有一个用QQ邮箱的用户发了一个问题(#55731).
他问, 为什么, 如下的代码, 会调用俩遍getter:
<?php class Example{ private $p1; private $p2; function __construct($a){ $this->p1=$a; } function __get($elmname){ echo "Call_get()"; return $this->$elmname; } function __isset($name){ return isset($this->$name); } function __unset($name){ unset($this->$name); } } $example = new Example("v1"); unset($example->p1); echo $example->p1; //输出 //Call_get()Call_get()
一开始, 我只是简单的回答了下, 和他在__get中再次获取$this->elmname有关系. 后来这个同学又要追问原因, 我只好用我那糟糕的英语给他解释.
可能用英语没太讲明白, 我现在用中文解释下吧.
(补充: 文章发出以后, 有不少同学认为我把简单问题搞复杂了, 他们认为unset($example->p1)也会触发一次getter. 所以我先解答下这一点: “非”读”上下文不会触发对__get的调用”. 这一点也很容易验证, 大家可以试试. 要不然我也不会专门写这个文章来讨论这个问题.)
首先. 这个问题的关键原因是, unset掉一个private的变量.
在我们获取一个对象的变量(“读”上下文)的时候, 其实是首先被翻译成ZEND_FETCH_OBJ_R中间指令(opcode), 那么到了真正执行期的时候, 这条opcode会导致最终调用到zend_read_property, 我把关键代码罗列如下:
..... /* make zend_get_property_info silent if we have getter - we may want to use it */ property_info = zend_get_property_info_quick(zobj->ce, member, (zobj->ce->__get != NULL), key TSRMLS_CC); if (UNEXPECTED(!property_info) || ((EXPECTED((property_info->flags & ZEND_ACC_STATIC) == 0) && property_info->offset >= 0) ? (zobj->properties ? ((retval = (zval**)zobj->properties_table[property_info->offset]) == NULL) : (*(retval = &zobj->properties_table[property_info->offset]) == NULL)) : (UNEXPECTED(!zobj->properties) || UNEXPECTED(zend_hash_quick_find(zobj->properties, property_info->name, property_info->name_length+1, property_info->h, (void **) &retval) == FAILURE)))) { zend_guard *guard = NULL; if (zobj->ce->__get && zend_get_property_guard(zobj, property_info, member, &guard) == SUCCESS && !guard->in_get) { /* have getter - try with it! */ Z_ADDREF_P(object); if (PZVAL_IS_REF(object)) { SEPARATE_ZVAL(&object); } guard->in_get = 1; /* prevent circular getting */ rv = zend_std_call_getter(object, member TSRMLS_CC); guard->in_get = 0;
上面的代码解释如下:
1. 首先调用zend_get_property_info_quick, 尝试在对象对应的类(zend_class_entry * zobj->ce)中寻找该属性的声明信息(public, protect, name, hash), zend_get_property_info_quick会在找不到, 或者找到了, 但是不容许访问(外部访问私有,保护变量)的时候, 返回NULL
2. 如果找到对应的属性信息, 则将依照属性信息中的属性名作为接下来查找的属性名(在PHP中, 私有属性的命名为”class_nameproperty_name″, 保护属性的命名为:”*property_name″, 公有属性的命名为”property_name″)
2. 如果没有找到相关的声明信息(未定义属性), 则尝试直接从对象的属性集中寻找(zobj_properties, 这是因为PHP是一个很灵活的语言, 你可以动态的给一个对象则加属性), 如果找到, 成功返回.
3. 如果在对象的属性集合中也没有找到, 则判断对象是否申明了__get魔术方法, 如果没有则报告找不到返回失败.
4. 如果有__get魔术方法, 为了避免发生嵌套递归, 首先查询是否已经存在该属性名的guard, 如果有判断guard->in_get是否为真, 如果为真表示发生递归了,则失败返回. 如果没有, 则设置一个名为属性名的guard(请注意这里), 然后调用__get
5. 调用__get如果找到则成功返回, 否则失败结束.
现在, 让我们来看看文章开头的例子.
1. 调用zend_read_property, zobj是$example, member是p1
2. 调用zend_get_property_info_quick查询p1属性信息, 因为此时的作用域是全局作用域, PHP不容许直接访问对象的私有属性, 所以zend_get_property_info_quick返回NULL
3. 尝试从zobj->properties中寻找p1, 因为p1被unset掉了, 所以不存在, 没找到
4. 发现$example有__get魔术方法.
5. 查找是否有为”p1″设置的guard, 没有.
6. 设置一个名为”p1″的guard, 然后调用$example->__get (输出Call_get())
7. 在$example->__get中, 我们尝试获取$this->p1, 于是再来一次::
8. 调用zend_read_property, zobj是$example, member是p1
9.调用zend_get_property_info_quick查询p1属性信息, 因为此时的作用域是example, 所以zend_get_property_info_quick返回成功
10. 将返回的属性信息中的属性名”examplep1″作为要查询的属性名
11. 尝试从zobj->properties中寻找p1, 因为p1被unset掉了, 所以不存在, 没找到
12. 发现$example有__get魔术方法.
13. 查找是否有为”examplep1″设置的guard, 没有.
14. 设置一个名为”examplep1″的guard, 然后调用$example->__get (输出Call_get())
15. 在$example->__get中, 我们尝试获取$this->p1, 于是再来一次::
然后重复8,9,10,11,12.
16, 查找是否有为”examplep1″设置的guard, 发现有递归产生, 报告错误, 失败返回.
Comments
-
2011/09/22, showframework writes: 没这么复杂吧..
unset($xample->p1);echo $example->p1;
这本身就是两次__get啊
unset语句里面那个语句一次__get
echo 后面一次__get - 2011/09/22, 雪候鸟 writes: @showframework 呵呵,你可以试试unset($example->p1), 看看有没有调用…
- 2011/09/22, wynn writes: 楼上这个说法不对,unset的执行过程中不调用__get的,这一点很容易验证,直接沿用正文这段代码,把__get里面的return那行注释掉就可以用来测试了。
- 2011/09/22, 萝卜青菜 writes: 没细看,对象的定义中有一个变量是用来防止__set,__get方法递归调用的
-
2011/09/22, rainkid writes: 楼主扩展研究太多了,简单的事情搞复杂了。
使用一次$example->p1就调用一次__get方法
unset($example->p1);
echo $example->p1;这里明显使用的两次,当然会输出两次“Call_get”;
- 2011/09/22, 雪候鸟 writes: @rainkid sigh, 发表意见前, 一定动手验证下.
- 2011/09/23, 風之紫色 writes: 楼主说的没错,把unset($this->$name);这行注释掉,就很容易看出来了
Copyright © 2010 风雪之隅 版权所有, 转载务必注明. 该Feed只供个人使用, 禁止未注明的转载或商业应用. 非法应用的, 一切法律后果自负. 如有问题, 可发E-mail至my at laruence.com.(Digital Fingerprint: 73540ba0a1738d7d07d4b6038d5615e2)
Related Posts:
- 我对PHP5.4的一个改进
- PHP的版本发布历程
- Plua进入Pecl
- Zend引擎的优化
- PHP RFC: 让PHP的foreach支持list
- Zend Parameters Parser新增类型描述符介绍
- 如何调试PHP的Core之获取基本信息
- PLua – Lua for PHP
- 在中国PHP技术高峰论坛(2011)上演讲的PPT
- 深入理解PHP原理之Session Gc的一个小概率Notice
from 风雪之隅: http://www.laruence.com/2011/09/22/2152.html
谷歌中国发布 Google 时惠,聚合所有大陆团购网站信息
今天Google时惠开始beta测试(这不是错别字,时惠应该表示的是限时的实惠,虽然这个名字透着点小聪明,但给人感觉并不是很正式),目前汇集了10家大陆的团购网站信息,包括:
在汇集这些团购信息的同时,你也可以按照团购网站、团购分类、价格区间和折扣程度来在众多团购里筛选出符合自己的。团购聚合在国内外都不新鲜了,谷歌现在进来凑热闹还是晚了一步。根据源代码里description字段可以看出这个产品的特点:
Offer Aggregator is to aggregate all the available deals on the market, and provide a friendly interface to
users.优惠聚合是一个聚合了所有市场上优惠信息的网站,并以友好的界面呈现给用户。
虽然 Google 拥有强大的语义分析资源,但面对团购网站的花言巧语也显得力不从心。由于很多景德镇团购网站连 sitemap 都没有提供,所以初期发布的Google时惠尽管过滤比较多,但其索引到的内容精准度还比不上景德镇市场上其它的团购汇聚网站,比如百度团购,因为人家有各个团购网站的专用接口。
当然未来Google可以针对团购网站指定专门的元数据索引规范,并利用富文本摘要形式显示在Google搜索结果里,但这还需要时间。目前Google时惠还在beta测试阶段,也还没有作为第四个Google.cn下面的本地服务出现在Google.cn首页里。
另外这也透露出了一个信息:谷歌中国已经开始关注本地的团购市场,那么Google Offers是否会进入中国呢?
Via TNW
© musiXboy 发表于 谷奥——探寻谷歌的奥秘 ( http://www.guao.hk ), 2011. |
5 条评论 |
永久链接 |
关于谷奥 |
投稿/爆料
Post tags: Google China, Google Offers, Google shihui
from 谷奥——探寻谷歌的奥秘: http://www.guao.hk/posts/google-china-shihui.html
Google+ API 初出茅庐,暂时只专注于公开数据
千呼万唤始出来,今天Google+ API终于揭开了面纱,不过目前这第一步还只专注于公开数据上。
如果你想获得一个人的profile信息,可以发出HTTP请求:
GET https://www.googleapis.com/plus/v1/people/108189587050871927619?key=yourAPIKey
然后即可获得JSON输出:
{ "kind": "plus#person", "id": "108189587050871927619", "displayName": "Chris Chabot", "image": { "url": "https://lh5.googleusercontent.com/-cQNLOQzkGpE/AAAAAAAAAAI/AAAAAAAAEjo/M9_pXL-ra4Q/photo.jpg" }, "organizations": [ { "name": "Google+ Developer Relations", "title": "Developer Advocate & Manager", "type": "work" } ] }
利用类似的方法你可以得到某个人最近的公开信息流:
GET https://www.googleapis.com/plus/v1/people/108189587050871927619/activities/public?key=yourAPIKey
目前你必须注册自己的应用才可以发送请求。另外还有几点:
- 目前的API只支持RESTful HTTP请求,通过JSON返回
- 输出的信息为标准语法(个人信息是PoCo ,活动是ActivityStrea.ms)
- 使用OAuth 2安全而可信的访问用户数据
关于Google+ API的具体信息可以参考:developers.google.com/+。
© musiXboy 发表于 谷奥——探寻谷歌的奥秘 ( http://www.guao.hk ), 2011. |
没有评论 |
永久链接 |
关于谷奥 |
投稿/爆料
Post tags: API, Google Plus, OAuth
from 谷奥——探寻谷歌的奥秘: http://www.guao.hk/posts/getting-started-on-the-google-plus-api.html
报道称广电总局要颁发新版限娱令
《南方周末》报道,有传闻称广电总局将针对卫视娱乐节目颁发“加强版限娱令”。 “限娱令”指的是广电总局历年来针对卫视娱乐节目颁布的限令。比如省级卫视的选秀类节目“原则上每年不超过一项,每项活动播出时间不超过两个月,播出场次不超过10场,不得在黄金时段播出,每场播出时间不超过90分钟”、“电视剧一般不能超过30集(四大名著及其翻拍除外)”等,总共10条。传闻即将颁发的“加强版限娱令”,会从10条变成16条,增加了“17时至22时之间,娱乐节目每周播出不得超过三次”、“邀请港台嘉宾需严格报批手续”等等。
from Solidot: http://hardware.solidot.org/article.pl?sid=11/09/08/0240216&from=rss
iPhone移动电子商务应用盘点
继2010年电子商务出现投资热潮之后,今年移动互联网逐渐进入大众的视线,这个由手机发力、未来具备无限可能的新行业正逐渐渗透到人们生活…
Tags:iPhone 移动应用 电子商务
from 草根网:互联网界的读者文摘: http://www.20ju.com/content/V175729.htm
Photography in Action : Performing Arts
With so much of photography being focused on still life imagery, and using said imagery to evoke emotion, we wanted to shift gears. Turning our focus instead on some of the awesome captures of photography in action. Those perfect pics that freeze a moment, stealing it from its momentum and forward drive, while still carrying so much of that action and energy with it. Welcome to Photography in Action: Performing Arts.
Below is a showcase of some very inspiring photographs by some talented artists who trained their eye on the performing arts to steal moments from. So much life bursting forth from each one that it is hard to not feel their push as you browse through them. Take a look and get inspired.
The Arts in Action
Burn the sky by bast-86
red lights by idiot-drug-hive
In Motion 20’58 by astrsk
Colour of Culture by pace067
Untitled by Thoum
Tango by sedats
7685 by celil
c h o r e f t r i a by tavernofmedusa
UID 445 by eelmikashigaru
Fringed by king-dither
Playing With Fire by dmack
Ciriaco by Padx
Curtidores de Hongos by Mauricioluis
Tippy-Toes by Massayume15
UID 927 by eelmikashigaru
one hundred and fifty four by potato-juice
Window Lit Stretch by HowNowVihao
dancing angel 1 by guitar-hero90
mirror dance by nowaryesblack
Two Dancers by HowNowVihao
Concepts 20’21 by astrsk
Circus Klezmer by PtiteCocci
Nutcracers Ballet Show 12 by solak11
Angels don’t play harps by Obsidian-Fox
To Jocelyn by bittersweetvenom
Event Horizon by Doomsday-Dawn
Ladder by HowNowVihao
Bulresque by lemures-ex
Walking in the air by hipster7
carnival 03 by enomis
Belly Dancer 3 by Dislexik2501
Bruise Violet Fan Dance by photoswithattitude
Misty Venice by p11oto
How Many by the-chipmeister
paramore by the-feel-good-drag
h a r e m by nowaryesblack
Passe la Balle IX by Thoum
728 by lenagn
Dobro by strugg13
Levi Ben Baruch by guyprives
okissi 3 by khurafati
Playing Hard by TimberClipse
(rb)
from Noupe: http://www.noupe.com/photography/photography-in-action-performing-arts.html
Photography in Action : Performing Arts
With so much of photography being focused on still life imagery, and using said imagery to evoke emotion, we wanted to shift gears. Turning our focus instead on some of the awesome captures of photography in action. Those perfect pics that freeze a moment, stealing it from its momentum and forward drive, while still carrying so much of that action and energy with it. Welcome to Photography in Action: Performing Arts.
Below is a showcase of some very inspiring photographs by some talented artists who trained their eye on the performing arts to steal moments from. So much life bursting forth from each one that it is hard to not feel their push as you browse through them. Take a look and get inspired.
The Arts in Action
Burn the sky by bast-86
red lights by idiot-drug-hive
In Motion 20’58 by astrsk
Colour of Culture by pace067
Untitled by Thoum
Tango by sedats
7685 by celil
c h o r e f t r i a by tavernofmedusa
UID 445 by eelmikashigaru
Fringed by king-dither
Playing With Fire by dmack
Ciriaco by Padx
Curtidores de Hongos by Mauricioluis
Tippy-Toes by Massayume15
UID 927 by eelmikashigaru
one hundred and fifty four by potato-juice
Window Lit Stretch by HowNowVihao
dancing angel 1 by guitar-hero90
mirror dance by nowaryesblack
Two Dancers by HowNowVihao
Concepts 20’21 by astrsk
Circus Klezmer by PtiteCocci
Nutcracers Ballet Show 12 by solak11
Angels don’t play harps by Obsidian-Fox
To Jocelyn by bittersweetvenom
Event Horizon by Doomsday-Dawn
Ladder by HowNowVihao
Bulresque by lemures-ex
Walking in the air by hipster7
carnival 03 by enomis
Belly Dancer 3 by Dislexik2501
Bruise Violet Fan Dance by photoswithattitude
Misty Venice by p11oto
How Many by the-chipmeister
paramore by the-feel-good-drag
h a r e m by nowaryesblack
Passe la Balle IX by Thoum
728 by lenagn
Dobro by strugg13
Levi Ben Baruch by guyprives
okissi 3 by khurafati
Playing Hard by TimberClipse
(rb)
from Noupe: http://www.noupe.com/photography/photography-in-action-performing-arts.html
The Future of Mobile Marketing with Smartphones
As the technology for mobile devices grows, so does the opportunity for development. Many companies are not creating their own apps, but instead utilizing HTML5, Javascript and CSS3 to aid in the creation of web apps and mobile websites. Reducing the initial investment, companies can get the most out of the money they are spending and release it to the public themselves on their own terms. Who wouldn’t want to save money and produce a more expandable product?
When building mobile apps with these technologies you no longer have to duplicate efforts for mobile cross-platform flexibility. By implementing the latest technology you can rely on full support (WebKit) by popular devices that use iOS, Android and the experience can be altered or downgraded for others. You will receive the best results if you build for the masses but utilize a specific strategy for your demographic knowing that not everyone owns a smartphone with HTML5 support. With over 120 million iOS devices on market and more than 302 million Android devices sold, there is a large customer base that will only continue to grow.
With the various devices available and variation of screens, developers must consider all user experiences.
Once your idea is in place and you have decided that you want to utilize the mobile platform as your base, you must determine several factors to formulate an effective plan. Whether you are bypassing desktop devices completely and focusing on mobile or just utilizing mobile marketing in your campaign you will need to define a campaign, devices to support and build for mobile devices.
On average, Americans spend 2.7 hours per day socializing on their mobile device. That’s twice the amount of time they spend eating, and over 1/3 of the time they spend sleeping each day. – Microsoft
Defining a Campaign
Before any campaign is launched it must first be defined to help flush out questions that can be detrimental if asked too late. Will you be marketing to anyone with an internet connection or just mobile devices? How will users find your website? What do you expect users to do once they arrive? How will you track behavior? These are some (of many) important questions you should be asking. While each campaign specifically revolves around very unique goals, we can discuss how you can find your own answers to the questions above.
What devices will you support?
If you are marketing to any device with an internet connection you must account for regular resolutions, high resolutions, the more complicated mobile screen trends and various mobile screen resolutions. By narrowing your campaign down to specific mobile devices (eg smartphones) depending on your needs, you can focus on as little as three key screen resolutions. For example if you are utilizing QR Codes or MS Tag (free to use) in your campaign, you can only choose to only support iPhone/iPod Touch, Android and Windows 7 Mobile. This is due to the fact that scanning technology requires a camera and a scanning app before you can be directed to the website being marketed.
If mobile tags were a family, QR codes would be the parents while MS Tags would be the spunky children.
If you are reaching out to a larger base you can utilize a flier, napkin, product package, label, menu, web banner or even a commercial to display these 2d codes for users to scan. Some establishments even place a window sticker on their front door (eg restaurants, store front merchants). If your demographic is much smaller, perhaps you can add a code within a company newsletter, promotion or business card. These methods are most effective with incentives (eg discounts, free gifts) and other methods are more successful with general company promotion. Mobile tags gained extreme popularity as instant entry for contests since personal information can be quickly accessed through a mobile phone and remove the irritation of filling out a form. Mobile tags help users initiate the process rather than delivering a coupon or content by self-engaging.
QR Codes and MS Tags can be used for:
- Content Sampling
- Event Information
- Giveaways
- Hotels/Resorts
- Loyalty Rewards
- Location Based Games
- Product Preview
- Product Reviews
- Realtors
- Retail Stores
- Restaurants
- Scan-to-Pay
- Tourism Attractions
- Tourist Attractions
When users visit your website you should have an immediate call to action. Users can watch a video, vote on a poll, complete a form or even purchase a product. When you immediately engage users you have a better chance of keeping their attention and delivering your message. Usability tests demonstrate that users see and understand less and do not engage unpleasing websites. Get users attention act on their impulses, engage users and complete your goal. Once your campaign gains more focus, it will be easier to determine the project details and make decisions as you continue to plan.
Over 85 percent of new handsets will be able to access the mobile Web. Today in US and W. Europe, 90 percent of mobile subscribers have an Internet-ready phone. – Gartner
Defining Devices To Support
After you have reviewed the resolution information we discussed in the previous section you can decide which delivery methods and mobile devices you will support. This will have a large effect on the images and code you will be developing. A mobile device is not just a smaller computer, but a whole different realm of user interaction and web development. Altering something that works for a desktop user by scaling it down will not work due to the limited screen space and touch technology.
Please note that this is a very limited list, and is by no means complete. What is important to take from this data is that a wide range of screen resolutions are out there, and new devices are introduced constantly. Source
When working with popular mobile devices you have to account for not only standard viewing (portrait) but for adjusted viewing (landscape) with images and content. By looking at the screen resolution image above you can see that the iOS low/high screen resolution and Android low/high screen resolutions are very similar. They are not exact but will help you during development keeping in mind the smallest possible max screen resolution of your mobile website will be 960 x 960 pixels due to the retina display. The lowest screen resolution you will want to develop for would be 320 x 320 for smaller Android devices. All other popular screen resolutions will fit in-between. In the following section we will discuss how to create a flexible site, even when graphic heavy.
The market today contains rapidly changing display dimensions and you will want to be certain you pick the devices you support wisely. Since cell phones enter and leave the market at an average of 18 months you will want to avoid devices that are not widely accepted since this will have an effect on the supported screen resolutions. When you start developing your mobile website you will want to utilize the HTML5 and CSS3 functionality built into these smart browsers and review which features are widely adapted.
Building for Mobile Devices
When you begin building for mobile devices you will need to take into account the small viewing areas, load times and touch screen support. Will you be including a quick launch menu or will your site only be one page? Will you offer multiple types of media or just serve specific information? With screen sizes that vary, providing relatively small viewing areas, you will need to provide quick and simple navigation to any information you are offering. This includes preloaded images, videos and identifying the page load order. With many restrictions on older devices, you cannot meet user expectations for feature rich websites thanks to the new standard people expect due to the iOS and Android systems.
Mobile websites must offer various media types that differ from the desktop but offer a similar experience.
People are used to the simple, flexible interfaces that many apps offer due to the mass offerings of the Apple iTunes store. With that in mind you must be sure to provide a similar experience on your mobile website that common apps are providing users currently. These high expectations will force you as a developer to increase performance, create a dynamic environment, test and test some more. With current HTML5 and CSS3 technology it is easier for developers to support multiple devices and offer a degraded experience for others. There are also many cross-platform mobile development tools available for use.
Many mobile Web users are mobile-only, i.e. they do not, or very rarely use a desktop, laptop or tablet to access the Web. Mobile-only in Egypt is 70 percent, India 59 percent, even in the US it’s 25 percent of subscribers. – On Device Research
Icons
A great feature that has arrived with current smartphones in the ability to save website bookmarks to your home screen and being able to create your own icon that will look like an app. There are Android icon guidelines and iPhone icon guidelines to help you through this process but we will discuss the basics to get you going.
In the past with websites we only had to identify a favicon (16×16 pixels) that would show up in the address bar next to the website URL. You would either link a PNG or ICO file directly and this was all that you needed to do.
<link rel=”icon” href=”/images/favicon.png”/>
<link rel=”shortcut icon” href=”/images/favicon.ico”/>
For mobile devices you have a whole new set of options available to you. Besides the tags mentioned above you can now identify an icon for iPhone, iPod Touch and Android devices.
<link rel=”apple-touch-icon” href=”/images/favicon-ios.png”/>
<link rel=”apple-touch-icon-precomposed” href=”/images/favicon-ios.png”/>
Older Android devices (1.5, 1.6) will see the precomposed icon and newer versions (2.1+) will use the alternate. Apple recommends a 114×114 pixel (high resolution) icon for their retina displays and the same image can be used for Android to achieve a better quality result.
The above code will work seamlessly with iPhone and iPod Touch but will not always display correctly for Android. There are issues when using an SSL certificate that is expired or differs from your domain and HTC phones will only overlay a small version of your icon when saved. You may also want to look into web capable content, status bar style and start up image for further Apple device customization.
<link rel=”Shortcut Icon” type=”image/ico” href=”/images/favicon.ico” />
<meta name=”apple-mobile-web-app-capable” content=”no” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<link rel=”apple-touch-icon” href=”/images/favicon-ios.png” />
<link rel=”apple-touch-startup-image” href=”/images/loading.png” />
Pixel Aspect Ratio
The variety of available display sizes makes for a difficult decision when creating your mobile website. As we discussed before, it’s best to narrow down your customer base and make a decision from there. You can decide to move forward with a fluid layout or create layouts for specific groups of devices. Remember the chart we looked at earlier with the iOS and Android resolutions? Instead of creating a universal layout you can instead design depending on the current device resolution and orientation. With the implementation of CSS3 media queries you no longer have to rely wholly on javascript of detecting user agents.
Compare the slight size resolution differences between pixel aspect ratios for 1, 1.5 and 2.
CSS3 media queries give developers the ability to target devices by using variables for device width, orientation and pixel aspect ratio. You can use these variables to load specific styles when developing for mobile devices. For instance the iPod Touch, iPhone, iPhone 3G and iPhone 3GS (pixel-ratio: 1) all utilize one pixel aspect ratio. You can target all of these devices very simply and target iPhone 4 (pixel-ratio: 2) and Android devices (pixel-ratio: 1.5) separately. If you were trying to create a graphic heavy website with a flexible background image, your CSS may look something like this:
#container { height: 675px; width: 100%; margin: 0 auto; padding-top: 0px; background: url(/images/675x675.jpg) no-repeat left top; background-size: 100%; } @Media only screen and (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 480px) { #container { width: 583px; background: url(/images/640x750.jpg) no-repeat left top; } } @Media only screen and (-webkit-min-device-pixel-ratio: 1.5) { #container { background: url(/images/480x854-70.jpg) no-repeat left bottom; height: 854px; } #main { background: url(/images/bgContent-group.png) no-repeat -20px 5px; } #main #video { padding-left: 61px; } } @Media only screen and (-webkit-min-device-pixel-ratio: 2) { #container { width: 583px; } } @Media all and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2) { #container { width: 950px; } } body.alt { background-repeat: repeat-x; }
The above example may be a bit heavy for starters but it gives you a great idea of the versatility that CSS3 media queries bring to developing for mobile websites. You can alter the container width and serve up different images with a few steps. You don’t want to deliver a different experience on separate devices but rather the same experience, seamlessly across multiple devices. It is also good to remember that that hiding images with media queries doesn’t necessarily mean they won’t be downloaded
Saving Images
When working with mobile devices, fast load times are important more than ever because users are on the go and want content NOW. Because the website resolution is close to a standard desktop for iPhone 4 and Android devices, you want to pay close attention to file size and cut it down whenever possible. A great way to speed up your website is by optimizing your images using Adobe Photoshop. Avoid using “save” or Save as” and instead utilize the diverse “save for the web” feature. This will help you compare image quality, file size and make adjustments where needed. By learning about the different options available, you can optimize images, create presets and drastically change file size.
There are three main formats that you work with when creating a website and they all have specific uses depending on the image being saved.
- .jpg is a commonly used method of lossy compression. The compression levels can be adjusted and works great for photographs.
- .png is a bitmap image format with lossless compression. There is a limited color range but works well with transparency.
- .gif is a bitmap image format with lossless compression. There is a limited color range and .png typically turns out better quality.
You can notice when comparing the images that used the “Save For Web” feature in Photoshop there is little noticeable difference between High quality (36KB) and Medium quality (8KB). There is however, a file size difference of over 28KB (80 percent). The low quality (4KB) image has a noticeable quality difference and does not differ much from the medium quality in file size.
.gif (16KB) and .png (16KB) utilize lossless compression and have a restricted number of colors which produce higher quality graphics for icons and plain graphics. .jpeg (24KB) is best specifically for photography and when comparing quality and file size.
By paying close attention to file size and what images work best for your needs, you can serve up websites faster for mobile phones and on the web. Faster load times will incubate a positive user experience and save server bandwidth. Slow load times can drive away users from a website even if it has valuable content. Speeding up your website is a great way to prevent this. Because mobile devices utilize slower data transfer rates
The avg. download speed between the AT&T, Sprint, T-Mobile, and Verizon 3G networks was 987Kbps. Some providers may throttle users that exceed a monthly data limit to significantly lower data rates (ie: T-Mobile reduces download speeds after customers reach a 5GB limit). – PCWorld & Novarum Inc ’09-’10 Study
Video
When planning on delivering video to a mobile device there are various options available to you, though some devices are limited. If you are creating a one-page promotional mobile website that will only be online for a few months, YouTube would be a great option. If the mobile website will receive many viewers and have an extended life, perhaps streaming via a CDN is your best option. Today most smartphones can play videos from YouTube, Vimeo and even a CDN by streaming them without conflict. Others however, such as the Windows 7 Phone cannot since it is still catching up and uses IE6 as its base browser. To get around this, you must download a low resolution video to the device and play it locally.
In the above example you can see a placeholder image is used instead of immediately displaying a YouTube video.
You can also see an HTML5 embedded video, where the browser is able to display the MP4 file just like it would an image.
<article> <video> <source src="https://lilazhou.files.wordpress.com/368x208-low.mp4"/> <source src="https://lilazhou.files.wordpress.com/368x208-low.ogv"/> <video> <p> <input type="button" id="play" value="play"> <span id="position">00:00</span> / <span id="duration> </p> <article>
Unsupported Devices
If you decide you only want to support specific mobile devices and offer a different experience for others, this can be done easily. For example, you can create a graphic website for smartphones and a text only version for older devices. If you wish, you can even block users from viewing the website via PC or laptops (though not highly recommended). By utilizing the CSS3 media queries as a catch all, you can pass all other visitors into an”unsupported” area with alternate content. If you are interested in utilizing progressive enhancement over degrading gracefully, you should read Where Progressive Enhancement Meets Graceful Degradation and Progressive Enhancement in Mobile Design.
Utilizing a more specific method of detection with user agent (as mentioned user pixel aspect ratio above) you can send users to a specific version of the site (eg unsupported for text only). The user agent refers to the software that someone is using to browse your site (eg iOS iPhone). You can use a script that will identify this and serve up separate content. There are two approaches to using mobile specific style sheets, by including a mobile specific stylesheet in your HTML or by importing mobile specific rules through an existing style sheet.
body.unsupported { background: #01536b; } body.unsupported #container { background: none transparent; width: 480px; margin: 0 auto; color: #002639; text-align: center; height: auto; margin-bottom: 40px; } body.unsupported #container #pageBody { width: 440px; text-align: left; margin-top: 20px; border: 1px solid #fcefa1; background: #fbf9ee; padding: 20px 20px 10px;
Tracking
When working on any marketing campaign, tracking is essential, though often forgotten on the mobile world. With the array of websites that generate a QR Code and MS Tag for free, many do not offer tracking. Why wouldn’t you want to know who is visiting your website? If you decide to go with the old QR Code or new MS Tag, make sure there is built-in tracking! You can always use Google Analytics in your code to track, but I only suggest this as a catch-all backup plan. Tracking is free, offers great insight on your visitors and their devices.
Google Analytics will display visitor browser and OS combinations among other information.
When considering which tag to move forward with, QR Codes have been around since 1994 in Japan and are built-in to Android devices for scanning. MS Tag is fairly new but works on multiple devices just the same. The advantage comes in with size in addition to tracking. If you are planning on placing a code on product packaging, a business card or even the window of an establishment, size is important.
By comparing the size differences above you can see that there is a key advantage in using the 3/4″ MS Tag over the 1″ size. Microsoft displays the QR slightly larger at 1.25″ on its website to sway users perspectives.
Here is the minimum dimensions for each:
- MS Tag (color): 0.75 inch
- MS Tag (b&w): 0.875 inch
- QR Code: 1 inch
Another factor that comes into play over size, is the ability to alter where to send your users with the generated code/tag. Once a QR Code is generated it is permanently linked to whatever has been programmed into the code. Made a mistake and it’s already printed? You can’t change it now! MS Tags can be switched at any time, redirecting users to a new message, website, SMS, video, audio, or phone number. In this fast paced world you can use the same code for a particular client, for multiple campaigns and track them without ever changing the tag. While both tags are free for the time being, Microsoft has mentioned interest in charging in the future.
During the beta period, there is no charge to create and use Tags. And in the event that Microsoft decides to charge publishers to use Tags, any Tags that were created and used during the beta, will continue to work, free of charge, for at least two years. – Microsoft
Example Mobile Campaigns
Sean “Diddy” Combs
Sean “Diddy” Combs a United States music artist launched a social campaign titled the “12 Days of Tag”. This campaign promoted the release of his album Last Train to Paris and a $50,000 donation to charities. Diddy used Twitter to promote an exclusive giveaway to his millions of followers by giving away details on how to find the content, scan the MS Tag and unlock gifts. Participants were given exclusive content and the ability to help decide which five charities to deliver a $10,000 donation to.
Cheeseburger in Paradise
In a national campaign, Cheeseburger in Paradise restaurants partnered with beverage makers to run a promotional campaign using MS Tag. By scanning a flier at one of the restaurants 31 locations, users were directed to a video and additional information on contest entry. By ordering one of two signature drinks or joining in a photo submission contest, participants could win an all-inclusive trip to Cancun, Mexico. In addition, all participants qualify for a free appetizer card in the process.
View mobile-only website
Harrah’s Entertainment
In a national campaign, Harrah’s in partnership with Crown Royal ran a promotional football promotion utilizing MS Tag. They placed a scannable tag on printed table toppers during football game events where guest can see unique content. Guests were treated with a specific location on the Crown Royal website where they were able to look up drink recipes that included the beverage makers product.
Ben & Jerry’s
Ben & Jerry’s partnered with Stickybits in a national retail campaign utilizing barcode scanners on smartphones. Users were encouraged to scan the barcode on a newly launched fair trade ice cream to enter a contest. The first 500 users to scan the new flavors could win free products and a branded T-shirt.
View campaign details
ESET Anti Virus
As a four part scavenger hunt, ESET targeted South by Southwest (SXSW) conference attendees in Austin, TX with a QR Code. Participants scanned various QR Codes that offered up useful clues that brought them to specific locations. Including brand installations at these specific locations, the anti-virus software maker gained maximum exposure. The first 200 participants to complete the four part scavenger hunt were given a free gift (the companies software) and were entered in a contest to win a Sony VAIO laptop.
View campaign case study
Smyth Jewelers
There have been many brazen Christmas promotions seen in the past, but none as forward thinking and bold as the Smyth Jewelers 15 Days, 15 Deals Christmas campaign using a QR Code. This retailer placed a 20×20 banner on their building exterior on that could be seen by passers by at the nearest intersection. Users who scanned the QR Code on the building in addition to their social media promotion were directed to a landing page with their seasonable promotions.
View campaign details
Perhaps the best “15 Days, 15 Deals” special is an autographed official NFL football signed by Baltimore Ravens running back Ray Rice, which comes with the purchase of a TAG Heuer or Breitling watch. Smyth Jewelers is the preferred jeweler of the Ravens and this gift with purchase reinforces that valuable brand tie-in.
Allure Magazine
Allure Magazine utilized their August 2010 issue to giveaway free beauty products to readers. By creating a series of mini sweepstakes with MS Tag, readers signed up for the contest and were notified via SMS about future giveaways. The US fashion publication gave away a total of $725,000 in free beauty products to readers and the mobile tags increased entries by 28 percent.
View campaign details
Wilkinson Sword
Wilkinson Sword launched a country-wide POS campaign in the UK using QR Code. Featuring their new Hydro Razor 5, the encouraged shoppers to scan the code and access product videos and enter into a contest.
View campaign details
Colorado University
Boulder Digital Works of Colorado University launched a mobile scavenger hunt using MS Tag. The University created the game Zombies vs. Hippies to encourage students to scan posters located around campus to participate in various missions.
View campaign news
Boondoggle Lifelabs
Boondoggle Lifelabs launched a country-wide campaign in Belgium, using QR Code. Developing Likify, a service which allows marketers to add mobile tags to products and signage. When people scan the codes with their smartphone it will “like” the scanned item on the associated brand’s Facebook page. Nike used Likify in a campaign to promote their shoes by getting people to “like” different jogging routes.
View campaign details
Conclusion
As you continue to take advantage of new technology, moving with the mobile market and not being left behind is important. Implementing new technology as it hits the market, testing new innovative ideas and saving clients money will be beneficial in the long-term. While some technology may fade away, staying on the cusp of growth will help keep the market thriving and meet users ever expanding expectations of how a device and website should perform together.
Most popular activities on the mobile Web are mobile search, reading news and sports information, downloading music and videos, and email and instant messages. In the future, money transfer; location-based services; m-health and m-payment will be key drivers. – IDC
Whether you are using framework or implementing the code yourself, HTML5 with CSS3 will continue to drive the future of mobile website and application development. As elements and authoring practices for this emerging technology continue to evolve, the adaptation will continue to grow. Have you used HTML with CSS3 to build a mobile website or web application? Sound off in the comments below!
Resources
-
How-To Minimize Load Time for Fast User Experiences
Experienced front-end developers optimize their site to load quickly and display accurately across all modern browsers. Learn how to analyze the bottlenecks preventing websites and blogs from loading quickly and how to resolve them. -
Speed Up Your Website with Better Image Optimization
We all know the importance of load time for faster user experiences and why it’s important to have them. Learn how to optimize images in Photoshop for better web performance. -
5 Cross-Platform Mobile Development Tools You Should Try
Cross-OS platforms for mobile development on the whole are not yet a completely perfect, have-your-cake-and-eat-it-too solution, but many of them offer an excellent alternative to ignoring one mobile OS in favor of another or, perhaps worse, burning serious resources to develop for two or three platforms at once. -
jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets
A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design. -
HTML 5 Resources
This site, the HTML5 Playground, Studio, and Presentation slides are all open source projects. Tweak the code or contribute new guides! -
Estimates of Mobile Phones and Smartphones supporting HTML5
Discover which mobile phones or smart phones support HTML5 and what they are expected to support in the future. -
Future Of Mobile Tagging Report
Mobile tags and QR Codes provide an exciting opportunity to interact with customers in ways not previously available to marketers. This report shines a light on to the work of other marketers to both inspire you and present some mobile tagging options as you consider your next campaign. -
Infographic: Mobile Statistics, Stats & Facts 2011
Microsoft Tag has just released a neat infographic highlighting statistics on how people are using mobile phones in 2011. There is also a video that featured late last year with an array of great mobile “growth” statistics, stats and facts for 2011. -
Global Mobile Statistics 2011
The essential compendium of need-to-know statistics. Beware of media hype and mobile myth – put your mobile strategy on a sound footing with the latest research from credible independent experts. Global mobile subscribers, handset sales, mobile Web usage, mobile apps, mobile ad spend, top mobile operators and mobile financial services. -
Progressive Enhancement in Mobile Design
When designing for the mobile web there are many variables to take in to consideration. Probably one of the biggest hurdles is designing for the such a wide variety of devices. There are the high-end devices like the iPhone, Android and Palm OS devices. Then there are lower level devices that can’t render high-end styles. That’s where progressive enhancement comes in. -
Where Progressive Enhancement Meets Graceful Degradation
Two important web development philosophies are often at odds when it comes to using new or advanced technologies and supporting older browsers or low bandwidth connections. But as is the case with many polemic arguments, the best practice may reside on the middle ground between these two positions. -
Industry briefing Mobile Industry Trends 2011
Predictions and trends for the coming year with an assessment of the market. -
Mobile and HTML5 <video> in Action with Brightcove
Brightcove Smart Players automatically detect playback environments and device capabilities to dynamically deliver the appropriate rendition and format, so you can embed a single Brightcove player to deliver video in both Flash and HTML5.
(rb)
from Noupe: http://www.noupe.com/how-tos/the-future-of-mobile-marketing-with-smartphones.html