advertisement

Swap Skills I Phone

50 %
50 %
advertisement
Information about Swap Skills I Phone
Technology

Published on March 14, 2009

Author: swapskills

Source: slideshare.net

Description

i-phoneの制作方法をご紹介しています。
advertisement

iPhoneのウェブ 2008/12/20(Sat) SwapSkill version

SwapSkills x allWebクリエイター塾

Agenda 1. iPhoneの与えたもの。 2. iPhoneを知る 3. iPhoneの便利な機能を 最大限に生かすXHTMLマークアップ 4. safariの先進的なCSS3を利用した 使いやすくて実用的なWEB

7月11日 発売されました。

iPhone の あたえたモノ

市場最強の アプリ

Web

Safari3.1 iPhone2.0

iPhone を知る!

Orientation

portlait

landscape

viewport

950px ??

仮想スクリーン

マルチタッチ

pinch in

pinch out

double tap

指≠マウス

mobile web design

どんなサイト ?

 Facebook

サイトを 作る環境

10.4.7

SDK ASPEN SIMULATOR

ver5.0

1.指でも使いやすい 2.見やすいデザイン 3.liquid design 4.Safariの為のデザイン

XHTML

HTML4.01 XHTML1.0

指でもつかいやすい 画面サイズ

320px,480pxでも 画面サイズが ブレない!

viewport

<meta />

<meta name=quot;viewportquot; id=quot;iphone- viewportquot; content=quot;width=980, initial-scale=1.0, user-scalable=yes, maximum-scale=3.0quot; />

.default .640px .480px

default

width=quot;640quot;

width=quot;480quot;

<meta name=quot;viewportquot; id=quot;iphone- viewportquot; content=quot;width=480, user-scalable=no, maximum-scale=0.6667quot; /> 480 x 0.6667=320.016

指でもつかいやすい ハイパーリンク

<a href=quot;mailto:mantangs@gmail.comquot;> Takashi. Kikuchi </a>

指でもつかいやすい ハイパーリンク

<a href=quot;http://maps.google.com/maps? q=cupertinoquot;> Cupertino </a>

アップルストア銀座 ?

http://maps.google.com/maps? q=アップルストア銀座

CSS

CSS2.1 CSS3.0

CSS ↓ iPhone

<link />

<link media=quot;handheldquot; href=quot;ipodtouch.cssquot; type=quot;text/cssquot; rel=quot;stylesheetquot; />

<link media=quot;screenquot; href=quot;pc.cssquot; type=quot;text/cssquot; rel=quot;stylesheetquot; />

handheld

handheld

php?

php?

CSS3

media query

iPod<480px PC>481px

<link media=quot;only screen and (max-device-width:480px)quot; href=quot;ipodtouch.cssquot; type=quot;text/cssquot; rel=quot;stylesheetquot;/>

<link media=quot;screen and (min-device-width:481px)quot; href=quot;pc.cssquot; type=quot;text/cssquot; rel=quot;stylesheetquot;/>

IE ?

<!--[if IE]> <link rel=quot;stylesheetquot; type=quot; text/cssquot; href=quot;ie.cssquot; /> <![endif]-->

Portlait ,landscape でも使える liquid design

800px 800px 800px

width:100%

100% 100% 100%

CSS3

見やすいデザイン テキストサイズ

html{ -webkit-auto-text-size-adjust: none; }

見やすいデザイン 行 間

html{ line-height: 1.8; }

指でもつかいやすい デザイン

padding は多目に

margin も多目に

指でもつかいやすい ハイパーリンク

:hover

a{ -webkit-tap-highlight-color: rgba (00,33,99,0.60); }

John Allsop http://westciv.com/iphonetests/

http://westciv.com/browsers/index.php5? title=Main_Paghttp://westciv.com/browsers/index.php5? title=Main_Pagee

CSS3 selectors

a[href^=quot;mailto:quot;] { background-image: url(email. gif); } a[href$=quot;.pdfquot;] { background-image: url(pdf.gif); }

a[href^=quot;http:quot;] { background: url(images/externalLink.gif) no- repeat right top; padding-right: 10px; } a[href^=quot;http://www.yoursite.comquot;], a[href^=quot;http:yoursite.comquot;] { background-image: none; padding-right: 0; }

text-shadow

CSS2・・・

h1{ text-shadow: #bbb 2px 2px 2px }

text-stroke ?

h1{ -webkit-text-stroke: 1px #990e95; }

border-radius

div#mixi{ -webkit-border-radius:10px; }

multiple- background

.box { width: 20em; background: #effce7 url(images/bottom- left.gif) norepeat left bottom; } .box-outer { background: url(images/bottom-right.gif) no-repeat right bottom; padding-bottom: 5%;}

.box { background-image: url(top-left.gif), url(topright.gif), url(bottom-left. gif), url(bottomright.gif); background-repeat: no-repeat, no-repeat, norepeat,no-repeat; background-position: top left, top right, bottomleft, bottom right; }

以上 を踏まえると

iPhone  User Interface

ver5.0

one more thing

flickr http://www.flickr.com/photos/lightsportnews/386173917/ http://www.flickr.com/photos/yasmapaz/1639244955/

EOS

#bbb presentations

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

The top 10 swap websites | Technology | The Guardian

The top 10 swap websites Saturday ... www.letslinkuk.net Community networks which link people who want to swap their skills and goods. www.staffshare.co.uk ...
Read more

Phone Swap - Wikipedia, the free encyclopedia

Phone Swap is a 2012 Nigerian romance comedy drama film written by ... Dami Elebe commended the acting skills of the two lead actors in the ...
Read more

Swap Skills with Your Neighbors - Better Homes & Gardens

Setting up a "skill swap" allows neighbors to trade services, ... Swap Skills with Your Neighbors. ... phone numbers, ...
Read more

Forex Swap Pdf - Forex - Binäre Optionen - daily forex ...

forex swap pdf Es ist leicht zu Forex trading mit City Index zu beginnen. forex swap pdf Jeder einzelne von ihnen gelernt, was sie jetzt nutzen, um Handel ...
Read more

Swap.com - The Largest Online Consignment & Thrift Store

Swap.com is the largest online consignment and thrift store for women's and men's apparel, baby, kids' items and accessories. 100% Satisfaction Guarantee.
Read more

Swap skills - Classifieds - Peru this Week

Address:Los Olivos E-mail:martina_1974@live.ca Phone:5233666. Summary. Hi I’m friendly, educated and professional person, I’m interested in reading ...
Read more

Skills & Language Swap in London | Gumtree communities

Are you interested in Skills & Language Swap? On Gumtree you'll find over 338 ads of people in London who have what you need.
Read more

Swapz

Swapz is the UK's biggest, most established and original marketplace where you can swap, ... Porcelain & Glass Properties Skills & Trades Sports Stamps ...
Read more

Swap skills at the ACT | UJ Arts & Culture Conference

Swap skills at the ACT ... barter their creative knowledge and skills at the Night Owls Skill Swap ... and phone number and be like a ...
Read more