Лидерите се научат да изгради сайтове за iphone

Както обещах, ще от време на време да споделят обучение. Училище за Engage Interactive. посветен на всичко, което се срещнат в интернет, е: да научите как да се създаде уеб сайт, който се фокусира конкретно върху iPhone.

Също като всяка друга уеб браузър, Safari има нужда от всички стандартни HTML-код в горната и долната част на страницата, и все още няма да е лошо да се добавят няколко ключови думи, за които Google ще може да следи съдържанието на вашия сайт. В допълнение, има някои специални мета тагове iPhone, с които ще бъдат в състояние да управлява предоставянето на съдържание. Имам един пример за това как трябва да изглежда кода в обхвата на "глава".

Ако се вгледате в редове 3.4 и 6, ще забележите, че никога не са срещали такъв текст.

Преди да стигнем до й # 097; vascript и CSS, трябва да бъде поставен върху идентификационните номера на съдържание и да зададете стилове по подразбиране, така че да не може да види всичко наведнъж преди мястото да се зареди напълно.

На първо място, ние се нуждаем от обвивка, която е на цялото съдържание на страницата. Това е много важно, тъй като й # 097; vascript ще се промени класове тази черупка, която ще се отрази на броя на елементите в нея.

На следващо място, мога да добавя лого. Това, разбира се, по избор, но тук е пример за съдържание, което винаги се вижда, независимо от ориентацията, която искате.

Параметри "дисплей: няма", ще бъдат изложени на тези райони и "дисплей: блок", за да се избегне евентуално объркване повече от просто фонов цвят / и размера на изображението. Оставете всичко на съдържанието в рамките на региона.

Тези стилове просто определени цвета и размера на шрифта за няколко елемента, както и стила на логото и на страницата на обвивката. Вероятно сте забелязали, че аз използвах шрифта Helvetica. Този шрифт присъства в iPhone, и мисля, че е забележителна, и поради това се прилага. Няма повече не Arial!

С помощта на "преливане: Auto" да "#page_wrapper" Ние се отбележи, че нито един от плаващия елемент не прелее му съдържащ Разделение. Това е най-добрата алтернатива на маркера "
".

CSS следния код ще контролирате кои блокове са показани и които са скрити, която ще бъде контролирана от к # 097; vascript, към която скоро ще получите.

Да започнем с това, ние трябва по подразбиране да се скрие нещо там. Това ще се уверете, че ние сме, че не изглежда различно съдържание, което е след това изведнъж изчезва при зареждането на страницата.

Освен това, ширината ще бъдат определени блокове. Ако разработването на уеб сайт, който ще се удължи до размера на екрана, най-вероятно ще искате да определите височината и др.

И накрая, умен малко (всъщност не е толкова умен). Той просто показва блоковете, ако "#page_wrapper" правилния клас. Тези класове са обозначени с J # 097; vascript. Това би било възможно да се направи всичко това, като й # 097; vascript, ако го направя Engage сайт с някои трикове на правилните места, където класове трябваше да бъдат връзка стилове.

- Тържествен край: Определяне на ориентация (и още един полезен трик)

Това е наистина умен малко! Но трябва да призная, че не всички от тях е написана от мен, някои части са взети от различни примери в мрежата. Донесох малък списък с ресурси, използвани в края на статията. Концепцията, обаче, е изцяло собственост на Engage Interactive.

Първият ред инициализира промяна в ориентацията. Без него, ориентацията ще се определя при стартиране, с изключение на това, когато е за първи път да се промени.

Това е функция, която прави промени в страницата, която ви позволява да показвате различно съдържание. Нека да разгледаме това стъпка по стъпка:

Ловко, нали?

Тук сме използвали и друг малък трик, който е за завършване на програмата използва голям и красив iPhone екран.

к # 097; vascript очакване на пълно изтегляне на страницата и след това да ни се премества на име елемент. В този случай, "page_wrapper". Това веднага се скрие лентата за местоположение, вместо ние го направи ръчно. Това е много удобно, ако се направи една страница, която точно се протегна към екрана iPhone.

Щракнете с десния бутон и запишете файла:

* Всички наведнъж в архив: source.zip - source.zip [6,11 Kb] (Count: 113)

Така че, всичко това е техническата страна на процеса на създаване на сайта, хвърлен в затвора за iPhone и т.н., можете да продължите да създадете своя собствена. Аз също събира някои полезни връзки към източници, които могат да ви бъдат от полза.

- Нещата, които са си струва да припомним

Преди да отидете на собствения си уебсайт за iPhone, ще бъде на стойност да се помни няколко неща:

Apple любезно предоставени цялата необходима информация за хората, че те могат безопасно да използват, когато започне да доставя за iPhone уеб приложения. Аз съм избран най-важните страници, скрити под няколко слоя на полезна информация и съвети (но за тях ще трябва да се регистрирате):

Най-малкото, тези справки са на разположение по време на това писание, но съм забелязал, че Apple изглежда да актуализират информацията на интервали от една седмица. Така че, ако откриете нещо интересно днес, следващата седмица, че може мистериозно изчезват. Те имат голям търсачката на сайта, така че можете да намерите това, което ви трябва лесно.

- И да, как мога да забравя!

Този малък скрипт ще определи iPhone или лаптоп лампа и се движите към изискван страница.