Як аптымізаваць Joomla пад Ipad

1. Настройка шаблону.
2. CSS для IPad
3. Партрэтны і альбомны рэжым
4. Як я гэта зрабіў
5. Выкарыстоўвайце Firebug!
6. Даданне абразкі спецыяльна для IPad
7. Ідзіце і зрабіце гэта!

Раней у гэтым годзе я (Апавяданне ў дадзеным артыкуле вядзецца ад асобы Кристоффера Сандвена (Kristoffer Sandven)) на пару дзён наведаў Лондан. І як адданы фанат Apple я павінен быў наведаць мясцовы Apple Store. Першы які я наведаў знаходзіцца на Рыджэнт-стрыт, і правёўшы там некаторы час я вырашыў купіць IPad. Несумненна, я ўжо думаў аб куплі, але апынуўшыся ўнутры крамы я вырашылася канчаткова. Я гэтак жа пабываў у новым краме на Ковент-Гарден і купіў некалькі дадатковых аксесуараў для IPad. Дарэчы крама проста пышны, ён велізарны, добра спраектаваны і там вельмі прыязныя і кваліфікаваныя супрацоўнікі. Крама быў забіты людзьмі якія прыйшлі за новымі IPhone 4 (тады ён толькі выйшаў - заўв. Пер.). Дык пра што то я ... ах так! Калі я пачаў гуляцца з IPad я зразумеў, што ён мае велізарны патэнцыял для вэб распрацоўкі. Стварэнне зручнага сайта для IPad і іншых мабільных прылад важней з кожным днём. Я і раней аптымізаваў сайт пад IPhone, але пасля куплі IPad я пачаў гэта ўсур'ёз, бо ён адкрывае вялізныя магчымасці для вэб распрацоўніка.

Я правёў некалькі эксперыментаў па аптымізацыі свайго блога пад IPad. У гэтым артыкуле я пакажу на прыкладзе канкрэтнага блога, як аптымізаваць свой сайт.

Настройка шаблону.

Першым і самым відавочным крокам будзе даданне мета тэга ў head вашага шаблону (звычайна ў index.php вашага макета).

Гэты тэг паказвае браўзэру, што ён павінен цалкам запаўняць экран прылады па шырыні.

Ліліян Рыга ў блогу на TemplateMonster напісаў артыкул на гэтую тэму пад назвай "Web design for iPad - WTF og FTW?", я не бачу сэнсу вынаходзіць кола таму проста вставлю сюды цытату:

Любы сайт, які больш шырыні экрана IPad будзе маштабавацца і паменшацца, калі ж ваш сайт менш, то тады могуць узнікнуць непрыемныя пустыя паласы па баках. Кантэнт павінен пашырыцца для таго што б запоўніць сабой усю бачную прастору экрана.

Пры вёрстцы шаблону пад IPad рэкамендуецца выкарыстоўваць сетку 960gs. Гэтая сетка стала вельмі папулярнай дзякуючы таму, што яна падыходзіць большасці сучасных экранаў, і калі вы яе выкарыстоўваеце, то ваш сайт цалкам запоўніць IPad, з ім не будзе не якіх праблем. У цэлым зробіць вашыя старонкі «бясшвоўнымі» як у партрэтным, так і ў альбомным рэжыме. Заўвага, Safari (асноўны браўзэр у IPad) заўсёды вылічаць шырыню прылады на аснове партрэтнай арыентацыі. Калі вы павернеце прылада то сайт не «пересоберется» а проста расцягнецца.

CSS для IPad

Калі вы плануеце шырокую мадыфікацыю свайго сайта пад IPad, то вам магчыма прыйдзецца дадаць асобную табліцу стыляў. Я ж хацеў унесці толькі некалькі налад, таму дадаў код прама ў custom.cssв сваім шаблоне ад YooTheme. Што б даведацца ў якой файл вам дадаваць код, вывучыце дакументацыю да вашага шаблоне, звычайна гэта файл template.css.

Што б стварыць асобны стыль для IPad выкарыстоўвайце наступны код:

@media only screen and (max-device-width: 1024px) {/ * Спецыяльна для IPad * / div.right {display: none; }}

Партрэтны і альбомны рэжым

Цікавай асаблівасцю iOS з'яўляецца магчымасць задаваць розныя стылі ў залежнасці ад арыентацыі прылады. Такім чынам, вы можаце адлюстраваць розныя блокі ў партрэтным рэжыме і ў альбомным.

Што б выкарыстоўваць розныя стылі для рознай арыентацыі экрана выкарыстоўвайце наступны код:

партрэтны:

@media only screen and (max-device-width: 1024px) and (orientation: portrait) {}

альбомны:

@media only screen and (max-device-width: 1024px) and (orientation: portrait) {}

Калі ў вас ёсць IPad то вы можаце ўбачыць змены на сайце joomlablogger.net. Вось як гэта выглядае:

Звярніце ўвагу, што на сайце прысутнічае правая калонка.

У партрэтным рэжыме я адключыў яе, гэтак жа я павялічыў памер загалоўкаў і тэкст, гэта павышае чытальнасць ў гэтым рэжыме, пад асноўнае меню я дадаў банэр:

Як я гэта зрабіў

У першую чаргу вы павінны вырашыць, што ж вы хочаце зрабіць з свайго сайт. У маім выпадку гэта было даволі проста. Я хацеў бы палепшыць чытэльнасць майго блога, таму я выдаліў правую калонку. У месцы з ёй я прыбраў усе аб'явы і рэкламу што не добра, таму я вывеў асобны банэр уверсе старонкі, ён размяшчаецца ў пазіцыі top майго шаблону. Бо я не выкарыстоўваю яго не для чаго больш я вырашыў схаваць гэтую пазіцыю па-змаўчанні з дапамогай наступнага CSS:

div # top {display: none; }

Цяпер я павінен быў стварыць для iPad канкрэтныя стыляў, што б выдаліць лішнія элементы і дадаць тыя, што мне патрэбныя ў партрэтным рэжыме:

/ * Спецыяльна для iPad * / @media only screen and (max-device-width: 1024px) and (orientation: portrait) {div # banner {display: none; } // выдаліла банеры div # right {display: none; } // Выдаляны правую калонку div # main-shift {margin-right: 0; } // Прыбіраны водступы ў сярэдняй калонцы div # middle-expand {width: 200%; } Div # content p {font-size: 120%; } // Павялічваем памер тэксту h1 {font-size: 32px; } // Павялічваем памер загалоўкаў div.joomla h1.title {width: 100%; } // Разгортваем загалоўкі старонкі ва ўсю шырыню div # top {display: block; } // Выводны банер па цэнтры зверху}

Тое ж самае тычыцца і альбомнага рэжыму, але ў дадзеным выпадку я проста хачу выдаліць банэр у правай частцы.

@media only screen and (max-device-width: 1024px) and (orientation: landscape) {div # banner {display: none; } // Выдаляны банер}

Такім чынам, вось у асноўным і ўсё. Пэўныя стылі, вам трэба дадаць залежыць ад шаблону, які вы выкарыстоўваеце. Калі вы не знаёмыя з CSS, я рэкамендую вам прачытаць мой артыкул Joomla CSS for beginners .

Выкарыстоўвайце Firebug!

Я настойліва рэкамендую вам выкарыстоўваць Firefox і Firebug для таго, каб высветліць якія стылі вам трэба змяніць для IPad. Firebug гэта пашырэнне для Firefox, якая дае вам шмат інфармацыі аб CSS і HTML структуры вэб-старонкі. Калі ў вас усталяваны Firebug, можна правай кнопкай мышы націснуць на элеменце і выбраць «Аналізаваць элемент» і тады з'явіцца акно ў ніжняй частцы экрана. Цяпер вы можаце ўбачыць структуру HTML злева і CSS справа (гл. Ніжэй). З дапамогай Firebug можна рэдагаваць табліцы стыляў у вэб-аглядальніку і адразу ўбачыць змены. Такім чынам, вы можаце эксперыментаваць да зьменаў змяненняў у CSS. Эканоміць шмат часу.

Ніжэй у прыкладзе я дадаў display: none для div з id = "right" што б паглядзець што адбудзецца. Калі я зрабіў гэта, я зразумеў, што яшчэ мне трэба прыбраць водступ ў асноўнай часткі сайта што б запоўніць кантэнтам ўсю вобласць прагляду.

Даданне абразкі спецыяльна для IPad

Гэта самыя вяршкі. Дадаючы абразкі для IPad дазволіць выкарыстоўваць яе як ярлык пры даданні вашага сайта на хатні экран IPad (або iPhone).

Гэты значок павінен быць у фармаце PNG або JPG і памерам не больш 114px на 114px

Я стварыў гэты значок для JoomlaBlogger.net:

Дадайце значок у тэчку з шаблонам, затым дадайце мета тэг у Head спасылаючыся на яго:

<Link rel = "apple-touch-icon" href = "/ templates / ВАШ_ШАБЛОН / apple-touch-icon.png" />

Цяпер, калі вашы карыстальнікі дададуць ваш сайт на хатні экран, яны ўбачаць спецыяльны значок.

У мабільным Safari націсніце на значок + і выберыце «Add to Home Screen»

Выбар назвы для значка

Абразок на хатнім экране

Ідзіце і зрабіце гэта!

Я спадзяюся, што гэты артыкул натхніла вас паспрабаваць аптымізаваць ваш сайт пад iPad / iPhone. На мой погляд падобныя паляпшэння працуюць лепш за ўсё, калі яны празрыстыя для карыстальніка. Г.зн. карыстальнік не заўважае розніцу адразу ж, яму проста больш зручней працаваць з вашым сайтам.

Вы аптымізавалі ваш Joomla сайт пад IPad і IPhone? Раскажыце нам пра гэта ў каментарах ніжэй!