iPad CSS – Any New Approach in Creating Layouts?

Being a salvation for Apple geeks, the iPad caused a painful headache for web designers that faced the layout issues. And some time ago we’ve started thinking on this and highlighted web design issues that might occur with developing websites for the iPad. In general creating website layout with the help of CSS is not really that much of a challenge for the experienced web designer. But the whole nature of the iPad will surprise with some small problems that will cause a real pain in you-know-where while trying to fix them. So while a creating website or optimizing it for iPad you should remember several important things about CSS and the iPad.

Links and Hover effects

Yes, the iPad has a touch screen and you have to use what appears to be a totally different technique for placing and displaying links at your website. It means that you have to avoid links in text placing them aside and marking them out to make them larger (actually it also concerns all other interactive elements of your website). Such great CSS effect as hover will not be user-friendly for touch screen and you should consider that too. And don’t forget that jQuery mouse events are not for iDevices either, so you’ll gain some extra problems along with them (for example you have to click the link twice, first time will show you a hover, second time will actually click the link).

Fixed position

If you want to use such CSS property as
More

Some HTML5 and CSS3 demos

以下网站推荐使用Safari或者Chrome查看

HTML5 Demos

Apple HTML5 Demos:

http://www.apple.com/html5/

http://developer.apple.com/safaridemos/

Google HTML5 Demos:

http://www.html5rocks.com/被Gov墙了,需代理访问,可以访问下面的网址。

http://code.sh/man/html5rocks/slides.html5rocks.com/html5.html

Other Demos:

http://html5demos.com/

CSS3 Demos

47 Amazing CSS3 Animation Demos

CSS3 Demos

CSS3 demos and tools

CSS3 Library

Some CSS3/HTML5 demos

10 Interesting CSS3 Experiments and Demos

JS Library on Mobile

Sencha Touch Examples

jQTouch Demos

Kiva Touch Demos

Getting started with HTML5

Web Development For The iPhone And iPad: Getting Started

博主按:国外博客的文章都很全面和详实,但具体的技术方案要根据自己的实际情况去选择,仅供参考和备份。

According to AdMob, the iPhone operating system makes up 50% of the worldwide smartphone market, with the next-highest OS being Android at 24%. Sales projections for the Apple iPad run anywhere from one to four million units in the first year. Like it or not, the iPhone OS, and Safari in particular, have become a force to be reckoned with for Web developers. If you haven’t already, it’s time to dive in and familiarize yourself with the tools required to optimize websites and Web applications for this OS.

Thankfully, Safari on iPhone OS is a really great browser. Just like Safari 4 for the desktop, it has great CSS3 and HTML5 support. It also has some slick interface elements right out of the box, which sometimes vary between the iPhone and iPad. Lastly, because the iPhone OS has been around for quite some time now, a lot of resources are available.

I know that most discussion about the iPhone OS platform centers on native applications. But you can still create powerful, native-looking applications using HTML, JavaScript and CSS. This article focuses on three phases of building and optimizing your website: design, coding and testing.

Before we get into the three phases, let’s look at some of the advantages and disadvantages of building a Web app rather than a native app.
More

Develop for iPad with HTML5: Trial and Error

At Apple’s Worldwide Developer Conference (WWDC) , Apple CEO Steve Jobs told developers that it supported two development platforms for its various iDevices: the App Store, and web applications written with HTML5, CSS, and JavaScript.

Though there are certainly practical limits on what may be achieved with web applications targeted for these devices, ambitious developers like Thomas Fuchs (of script.aculo.us fame) are pushing those limits to see what is possible.

screenshot of the Every Time Zone app running on iPad

More

惹恼程序员的十件事

程序员应该是一个比较特殊的群体,他们因为长期和电脑打交道所养成的性格和脾气也是比较相近的。当然,既然是人,当然是会有性格的,也是会有脾气的。下面,让我来看看十件能把程序惹毛了的事情。一方面我们可以看看程序员的共性,另一方面我们也可以看看程序员的缺点。无论怎么样,我都希望他们对你的日常工作都是一种帮助。

第十位 程序注释

程序注释本来是一些比较好的习惯,当程序员老手带新手的时候,总是会告诉新手,一定要写程序注释。于是,新手们当然会听从老手的吩咐。只不过,他们可能对程序注释有些误解,于是,我们经常在程序中看到一些如下的注释:

r = n/2;  //r是n的一半

//循环,仅当r- n/r不大于t
while ((r-n/r) <=t){
… …
r = 0.5 * (r-n/r); // 设置r变量
}

每当看到这样的注释——只注释是什么,而不注释为什么,相信你一定会被惹火,这是谁写的程序注释啊?不找来骂一顿看来是不会解气了。程序注释应该是告诉别人你的意图和想法,而不是告诉别人程序的语法,这是为了程序的易读性和可维护性,这样的为了注释而注释的注释,分明不是在注释,而是在挑衅,惹毛别人当然毋庸置疑。
More

十条不错的编程观点

Stack Overflow上有这样的一个贴子《What’s your most controversial programming opinion?》,翻译成中文就是“你认为最有争议的编程观点是什么?”,不过,在400多个主回贴,以及千把个子回贴中,好像并不是很有争议,而是令人相当的茅塞顿开,下面罗列一些,并通过我自己的经历和理解发挥了一些,希望对你有帮助。

1) The only “best practice” you should be using all the time is “Use Your Brain”.

唯一的“Best Practice”并不是使用各种各样被前人总结过的各种设计方法、模式,框架,那些著名的方法、模式、框架只代码赞同他们的人多,并不代表他们适合你,你应该更多的去使用你的大脑,独立地思考那些方法、模式、框架出现的原因和其背后的想法和思想,那才是“best practice”。事实上来说,那些所谓的“Best Practice”只不过是限制那些糟糕的程序员们的破坏力。

2)Programmers who don’t code in their spare time for fun will never become as good as those that do.

如果你对编程没有感到一种快乐,没有在你空闲的时候去以一种的娱乐方式去生活,无论是编程,还是运动,还是去旅游,那么你只不过是在应付你的工作,无时无刻不扎在程序堆中,这样下来,就算是你是一个非常聪明,非常有才华的人,你也不会成为一个优秀的编程员,要么只会平平凡凡,要么只会整天扎在技术中成为书呆子。当然,这个观点是有争议,热情和能力的差距也是很大的。不过我们可以从中汲取其正面的观点。
More

PastryKit

Daring Fireball网站近来的主题之一是 iPhone OS 上的网页程序——为 iPhone 和 iPod touch 而做的程序,但只使用 HTML,CSS 和 JavaScript。我也谈了 iPhone 网页程序能提供什么程度的用户体验和相比原生 Cocoa Touch 程序的开发难度。
iPhone 网页程序在滚动方面尤逊原生应用。拿长列表来说,比如所有联系人的地址,或者 iPod 程序中里的所有歌曲,当你滚动这些列表的时候,手指一扫,列表会快速滚动。这种效果很像滚动一个阻力极小的轮子。虽然你可以做一个外表非常相似,甚至与 iPhone 原生程序中的列表一摸一样的网页程序,但是却无法做到上述效果。在 iPhone 上浏览网页的感觉像是有很大的滚动阻力。
这种阻力的存在对于在小屏幕上显示常规网页的 iPhone 是合理的,我所指的「常规」意思是「没有为在 iPhone 上显示而特别优化过的网页」,但这种阻力在为 iPhone 优化过的网页程序上却显得缓慢而阻塞。
More

能承载移动 Web 应用的唯一浏览器: Mobile Safari

最近拿 iPhone 、 Android 、 Windows Mobile 这三个平台上的内置浏览器来做了一番对比,结果是只有 iPhone 的 Mobile Safari 能够承载现代化的移动 Web 应用,其他移动浏览器的设计思路还停留在上个世纪──能看网页就行,不存在移动应用一说。

我用来做对比的平台是 iPhone 2.0 、 Android 2.0 、 Windows Mobile 6.5 。 iPhone 之所以选择 2.0 ,是因为 3.0 的浏览器跟 2.0 是一样的,尽管我的测试是在 3.0 上做的,但对 2.0 来说也是适用的。 Windows Mobile 6.5 则是在 Windows Mobile 系列中的唯一选择,因为只有它的浏览器是 IE6 内核的,再往前的 Windows Mobile 6.1 都是 IE4 内核的。

拖放

iPhone 对拖放的支持是完美的,使用 touch 系列事件监控触击及拖动,然后使用 preventDefault 禁用浏览器的默认行为(也就是拖动页面显示区域),这就搞掂了。
More

Getting Started with iPhone Web Apps

An iPhone web application—or iPhone web app—uses Web 2.0 technologies to deliver a focused solution that looks and behaves like a built-in iPhone application. iPhone web apps run in Safari on iPhone, the unique implementation of Safari that provides full-featured web browsing on iPhone OS–based devices and responds to touch-based gestures.

Start Here

To develop a great iPhone web app you need to:

  • Optimize your web content for Safari on iPhone
  • Design a user experience and user interface that follows Apple’s guidelines

Choose next how you want to get started—by reading about the basics, getting your hands on some code, or diving into specific technologies.
More

如何通过Nicholas C. Zakas的面试

Original Post:Surviving an interview with me
Nicholas C. Zakas,2007年3月27日
翻译完成:2010年1月9日,最后更新:2010年1月10日

早就打算写这篇文章了,但时至今日才决定动笔。如果你投了简历,那么应该会在面试你的人名单里找到我的名字。你现在就有点紧张了,(好啦,别不好意思)面试总会让人感觉有点不舒服。作为面试官,我其实并不算难对付,但如果你想在我们谈话之后让我放你过关,你确实得做一些必要的准备。

  • 回答问题。我问你一个问题,你必须要回答它。我遇到应聘者在回答我问题时顾左右而言他的情况太多了。我知道你会有些紧张,说几句不着边际的话可能有助于缓解,但请你不要喋喋不休,要赶快回到正题上来。我不想知道你的宠物猫最近又出了什么新状况,我只想听到你的回答。假如你没有听明白我问的是什么,可以要求我再解释一下,重复几遍问题或者换一种问法,对我而言没有什么。

More

Previous Older Entries