iPad 웹디자인과 개발 도구상자

[원문] http://iphone.appstorm.net/roundups/developer/the-ipad-web-design-development-toolbox/

시작해보기

이 글의 주된 내용은 아이패드를 위한 웹사이트 디자인과 관련된 것이다. The entry barrier to this type of development is virtually non-existant.

That said, if you’re wanting to develop a native application, there’s a considerably more complex process. As with the iPhone, you’ll need to enrol on the iPhone Developer Program. This gives you full access to all Apple’s resources, the SDK, and the latest beta builds of the software for your iPhone and iPad.

You can either register for free if you’d like just the basic access to Apple’s SDK, or pay $99 per year to have the ability to test applications on your iPad itself, and submit them to the App Store.

Once you’ve done one of the above, you’re ready to get started! Download the SDK, and take a look at our iPhone developer tookbox for a whole range of resources that are still perfectly suited to iPad development.

애플의 자원

Though focused primarily on native app development, Apple do have a few great documents that relate to web design – or interface design in general. These make for a good initial port of call:

• 아이패드를 위한 웹 컨텐츠 준비하기 – This article talks through details of the user agent code for Mobile Safari on the iPad, why you should use W3C standard web technologies instead of plug-ins (Flash is, of course, not supported), and how you should modify CSS code previously targeting the iPhone. There are also a few useful tips relating to the challenges of developing for a touch device – there’s no hover or mouse-over state, for instance.
• Human Interface Guidelines – This is a mammoth document, and essentially outlines Apple’s “best practices” for designing iPad interfaces. Although primarily aimed at native apps, if you can implement these standards in your web application you’ll be on the road to offering a great experience for the user.
• 사파리 웹컨텐츠 안내 – A guide on how to ensure your web design works well in Safari (whether on the desktop, iPhone, or iPad), and tips on extra events and handlers you can use with the touch interface.

인터페이스와 Wireframing 디자인 킷들

One of the most important things to consider when designing for the iPad is how you’re going to structure the interface of your application. It’s all about touch, and it needs to be obvious for the user as to how and when to interact with your website or web application.

Wireframing your design from an early stage is a great move, and there are a few handy resources below:

• iPad Wireframe EPS – A great illustrator file that provides everything you need to create accurate wireframes for the iPad. The rest of Sarah’s blog is pretty brilliant as well, and she’s an incredibly talented interface designer.
• iPad Stencil Kit – Something a little bit different, this metallic stencil kit is perfect for wire framing on paper (often the best place to start). There are also kits available for the iPhone if you’d like to try them out.
• iPad GUI PSD – For the actual iPad interface elements themselves, this PSD kit is one of the best options to experiment with. It contains everything from buttons to toolbars and pop-over windows.

일반적 아이패드 디자인 글들

For general design principles, we’ve rounded up a few other articles below that will give you a little guidance:

• D아이패드 앱에대한 디자인 팁 – The tips shared here aren’t just relevant to the iPad, but design in general. Focus on knowing who your user is, keep it minimal, and experiment with every orientation.
• 엠베의 아이패드 분류 – Ember is packed with iPad interface screenshots, snippets and information. Browsing through here will give you no end of ideas for designing something that looks great.
• 아이패드를 위한 디자인하기: 사실 점검 – A fantastic, rambling, in-depth article looking at all manner of different design aspects. From typography to interaction, there are some really interesting thoughts here.
• 아이패드가 어떻게 우리가 웹사이트 디자인할때의 방향에 영향을 미치나? – Another fairly general walkthrough of a few design decisions that you might want to make.
• 빠르고 (그렇지 않거나) 지저분한 아이패드 사용자 검사 – A fun look at how you can emulate the experience, size, and feel of the iPad if you’re yet to purchase one but still want to perform some testing.

개발과 코딩

From a technical point of view, you’ll need to detect that a reader is using an iPad in order to show them a particular version of your site. You’ll also want to know all about the interesting things you can do on an iPad that aren’t possible on the desktop!

Here are some great pieces of advice:

• PHP와 JS를 이용한 아이패드 감지 – Three code snippets are offered here, to detect the iPad using PHP, JavaScript, or a .htaccess file. This lets you easily redirect the user to a different design (be sure to let them easily view the original site though!)
• iPad Orientation CSS – Unfortunately, you can’t pick up your computer monitor and turn it portrait. You can with the iPad, and it’s important to have CSS that accommodates both orientations. These rules will let you do just that.
• Device 크기와 CSS에서의 Orientation 감지 – A slightly more in-depth look at how you can target the iPad using CSS.
• 아이패드 웹개발 팁 – Working through a number of different CSS/JS techniques, and explaining why the browser really isn’t all that different from the desktop.