Розробка адаптивного интерфейсу

ВСТУП

У наш високотехнологічний час, навряд чи хтось із нас може уявити себе і своє життя без мобільного пристрою, будь-то: телефон, смартфон, планшет або ноутбук. Погодьтеся, варто одного разу забути свій гаджет де б то не було, як з'являється відчуття повної ізоляції від світу. Сучасні портативні пристрої зберігають у собі величезний функціонал, починаючи від горезвісних заміток і закінчуючи редакторами фото і відео зображень, Інтернет браузерами, та іншими додатками.

Високошвидкісний і зручний доступ до Інтернету, пошук інформації, можливість отримувати і відправляти документи, оперативно реагувати на будь-які зміни у сфері бізнесу, відстежуючи зміни тактичних прийомів конкурентів - все це здається, вже буденним, але це дає велику перевагу, що забезпечує компанії інтерактивну, більш продуктивну і швидку роботу.

Однак, у будь-якого мобільного пристрою, розширення, дозвіл і формат екрану, свої, і веб-сайт може, відображатися на ньому некоректно, незручно, а то й зовсім не працювати. І ось оскільки ця особливість часто дуже ускладнює повноцінну роботу сайту, був розроблений і активно застосовується адаптивний веб-дизайн.

Адаптивний інтерфейс - це технологія створення веб-сайтів, що забезпечує правильне сприйняття на різних мобільних пристроях. Це дозволяє створювати універсальний сайт для всіх видів пристроїв. У адаптивному дизайні, відображення сайту не прив'язується до конкретного типу пристрою або до його розділової здатності, цим і забезпечуючи універсальність таких ресурсів.

На даний момент, науково-технічний процес розвивається і прогресує з немислимою швидкістю, щодня створюються нові пристрої з можливістю підключення до всесвітньої мережі, починаючи з телефонів і закінчуючи телевізорами і багатьом іншим. У всіх цих пристосувань своя специфіка зображення і розділова здатність дисплея, яку необхідно враховувати в проекті створення сайту. Адаптивний дизайн сайту підлаштовується під пристрій таким чином, щоб контент на ресурсі відображався красиво, а головне правильно. Крім того, є ще один позитивний момент, полягає він у тому, що відпадає необхідність у створенні мобільної версії сайту.

1 ВИКОРИСТАННЯ АДАПТИВНОГО ІНТЕРФЕЙСУ

1.1 Основні відомості

Адаптивний інтерфейс - це технологія створення веб-сайтів, що забезпечує правильне сприйняття на різних мобільних пристроях. Це дозволяє створювати універсальний сайт для всіх видів пристроїв. У адаптивному дизайні, відображення сайту не прив'язується до конкретного типу пристрою або до його розділової здатності, цим і забезпечуючи універсальність таких ресурсів.

Переваги адаптивного дизайну:

- Економія. Веб розробка не вимагає створення різних версій сайту для різних портативних пристроїв, як підсумок, істотна економія на витратах при виготовленні проекту.

- Ергономіка. Користувачам буде зручніше орієнтуватися зі звичним доступом на сайт, як результат, збільшення відвідуваності.

- Конверсія. Одним з важливих переваг є взаємодія користувача з ресурсом. Це дозволить підвищити відсоток конверсії.

- Легкість супроводу і менше витрат на обслуговування сайту. Оновлювати або редагувати контент набагато простіше на одному сайті, ніж на десятку його копій.

- Просування. Витрати на просування сайтів та оптимізацію сайту з

адаптивним дизайном набагато нижче, ніж на аналогічні заходи для кількох дубльованих під різні дозволи ресурсів. Тим більше, що присутність кількох ідентичних сайтів ускладнює просування в пошукових системах.

Припустимо, є якийсь інтернет-ресурс, на якому, розміщено статтю з розділеними на кілька колонок картинками великого розміру. Як виглядатиме такий сайт, з адаптивним дизайном, на різних мобільних пристроях? На стандартному і широкоформатному дисплеї, картинки будуть відображатися ідентично, на планшетах вони стануть трохи менше, кількість колонок скоротиться, а стаття буде звужена. На дисплеї мобільного телефону, стаття разом із зображеннями будуть розміщені в одну колонку.

1.2 Статистика використання мобільних пристроїв, платформ і додатків

Ми спостерігаємо стрімке зростання користувачів смартфонів на базі Android, а також збільшення кількості планшетів. Сьогодні iPhone або iPad - наші звичні помічники в справах. Коли людина захотіла щось купити, він може не бути біля комп'ютера, але з ним завжди і всюди - мобільний телефон. Якщо раніше мобільні були просто засобом зв'язку, в деяких можна було налаштувати pop і smtp сервера для збору робочої пошти, або WAP для доступу до деяких сайтів і сервісів, то зараз серфінг в Інтернет через мобільні девайси став по-істині безмежним! Будь-який сайт, навіть не настроєний під смартфони, цілком можна переглядати, додавати закладки, заповнювати та надсилати форми, скачувати файли. Тепер, як тільки Ви захотіли щось купити - у Вас є можливість знайти і замовити товар з мобільного девайса і ця практика стає все більш популярною. І справді, навіщо чекати коли Ви приїдете додому або на роботу, де є комп'ютер, коли вже зараз у дорозі Ви можете перебирати магазини та товари та оформляти замовлення. Тут і зараз, коли бажання і емоції максимальні. Не секрет, що більшість покупок оформляються на емоційному злеті, коли проходить час, ідея може погаснути, забутися і розвіється.

За даними статистики, яку привів на літній конференції Yandex в Одесі директор українського Yandex Сергій Петренко, сьогодні тільки 25% українців користуються смартфонами, і лише 8% виходить в Інтернет з мобільного телефону. Здавалося б, про який розвиток мобільної електронної комерції можна говорити в таких умовах.

Але давайте подивимося на інші цифри, озвучені Сергієм Петренко.58% українців вибирають товари і послуги в Інтернеті (чого, правда, не можна сказати про покупки туристичних путівок і турів он-лайн). При цьому кожен четвертий молодий чоловік у віці від 16 до 24 років та кожен десятий - у віці від 25 до 34 років - використовують свої мобільні для доступу в Інтернет. Трохи нижче рівень використання мобільного доступу в Інтернет у віковій категорії від 35 до 44. Абсолютно не користуються мобільним Інтернетом тільки люди старше 55 років.

Переважання молоді серед мобільних користувачів визначає способи використання мобільних пристроїв: в основному це фото-або відеозйомка, пересилання SMS-та MMS-повідомлень і використання мобільного телефону або смартфона в якості мр3-плеєра. Однак більше чверті власників мобільних займаються мобільним шопінгом через програми і майже 40% - переглядають мобільну рекламу. Ще вище ці показники серед власників смартфонів.

З точки зору каналів поширення реклами цікавий ще один спосіб використання мобільних пристроїв - майже 50% власників мобільних телефонів користуються своїми девайсами для доступу до сайтів або додаткам електронних видань на зразок газет і журналів. Серед власників смартфонів цей показник також очікувано вище і наближається до 60%. Очікуване розвиток цього тренда - поступове перетікання реклами з друкованої преси в її цифровий аналог.

Більш глибокий аналіз ринку мобільного Інтернету показує, що потенційний мобільний клієнт сьогодні - це власник смартфона з сенсорним екраном, який виходить в Інтернет на ходу через GPRS/3G. Якщо говорити про те, за допомогою якого програмного забезпечення потенційний мобільний покупець здійснює пошук потрібних товарів або послуг, то переважна більшість досі віддає перевагу браузеру. Лише десята частина користувачів здійснює пошук товарів за допомогою додатків.

Тим не менш, фахівці явно віддають перевагу саме мобільним додаткам, як більш перспективному способом взаємодії з мобільним споживачем. Додатки вже з успіхом освоїли власники iPad і iPhone, які вважаються одними з найбільш просунутих і, головне, платоспроможних мобільних користувачів (що на 200% справедливо для України). На черзі - прихильники Android і Windows Mobile.

Мобільний Інтернет і божевільне зростання популярності різних пристроїв виходу в нього дають брендам великі маркетингові можливості. Тільки протягом перших місяців 2012 року аудиторія мобільного Інтернету зросла з 10 млн. до 11 млн.

Рисунок 1.1 – Загальна кількість користувачів мобільних пристроїв та мобільного Інтернету в світі, кількість користувачів заходять на сайти з мобільних, динаміка зростання аудиторії мобільного Інтернету.

1.3 Головні проблеми адаптивного інтерфейсу. Як їх уникнути.

Незважаючи на те, що адаптивний дизайн існує вже більше 2х років, але в багатьох випадках він продовжує залишатися молодою методологією. Дизайнери постійно зустрічаються з новими пристроями з самими різними екранами, кодами структур і скриптами, а також з необхідністю по-новому працювати з клієнтами.

Так що давайте розглянемо найбільш «популярні» проблеми, які були відзначені опитаними дизайнерами:

- Необхідність пояснювати клієнтам, що таке АВД

- Брак статичної стадії розробки

- Навігація

- Зображення

- Таблиці

- Складнощі перетворення старих «нерухомих» сайтів (з фіксованою шириною)

- Обслуговування користувачів старих версій IE

- Тестування часу та вартості

Проблема 1: Необхідність пояснювати клієнтам, що таке АВІ

«Старий» процес проектування веб-сайтів досить лінійний, що робить його дуже простим для розуміння. Клієнти спочатку проходили стадію інструктажу, потім стадію файрфреймінга і структурного планування, потім вони отримували ряд добре промальовані сторінок, з яких можна вибрати найкращий варіант. Тільки коли все це стверджувалося, сайт був практично готовий.

Є одна річ, з якою борються багато дизайнерів: як пояснити клієнтам, що «візуального етапу» більше немає. Адаптивний дизайн є більш гнучким процесом і вайрфреймінг, малювання ескізів, моделювання, як правило, більш потужні інструменти.

Вирішення цього - це показати його «у справі». Не заводьте розумних розмов про контрольних точках, медіа-запитах і багатофункціональності. Така інформація швидко забувається, навіть якщо і звучить дуже переконливо. Найкращий приклад - демонстративний. Якщо у вас є доступний лептоп, планшет і телефон, на зустрічі з клієнтом ви можете продемонструвати йому, як сайт (можливо, той, який ви тільки що створили для іншого клієнта) поводиться з різними екранами. Це просто і ефективно, а якщо ви ще приведете порівняння з тим, як поводяться з різними девайсами неадаптівні сайти, буде ще краще.

Проблема 2: Недолік статичної фази створення дизайну

Як я помітив раніше, одна з найбільших проблем, полягає в тому, що зміни в «старому» процесі створення дизайну - це те, що потрібно для адаптивного сайту. Нехтуючи статичними скріншотами, дизайнери більше, ніж будь-коли, покладаються на швидкі начерки, вайрфреймінг і зроблені на швидку руку HTML і CSS прототипи.

Рішення цього є перед розглядом можливих рішень, слід зазначити, що у різних дизайнерів технологічні процеси можуть відрізнятися. Я великий фанат використовувати те, що колись дало хороший результат. Так що дотримуйтеся того, що працює для ваших клієнтів. Особисто я вважаю за краще використовувати звичайний папір, щоб перевірити, як мої ідеї працюють в різних розмірах. Це швидко і просто, особливо, якщо ви ознайомитеся з пропозиціями Сема Хардкера для адаптивних ескізів. Також я рекомендую, якомога раніше, проектувати в браузері і працювати з HTML, а потім використовувати Fireworks або Photoshop для створення активів, а не повних макетів.

Проблема 3: Навігація

У минулому, навігація сайтів зазвичай була горизонтальною уздовж верху сторінки і іноді внизу зліва сторінки. Зараз навігація вимагає більш детальний підхід. Багато респондентів відзначили, що навігація сайту - це складна проблема, для якої, на жаль, немає готового рішення.

Рішення: використовувати хороший послідовний дизайн. Вибір навігаційної стратегії є широкомасштабним справою, і повинен бути заснований на контенті вашого сайту разом з конструктивними міркуваннями. Замість того, щоб просто завантажувати скрипт або демо, спершу я підштовхну вас оцінити, як це працює і чому саме так, і, найважливіше, - як це працює для сайту, який ви створюєте.

Проблема 4: Зображення

Як і навігація, набір функцій доступний для обробки зображень в адаптивному дизайні є надто фрагментованим. Поки ще W3C community group не підтримала специфікації, так що нам доводиться особисто вибирати з широкого кола скриптів, щоб заповнити відсутню функціональність і поставити відповідні активи на пристрої. Також дизайнери повинні завжди думати про наступне покоління дисплеїв з високою щільністю пікселів, наприклад: про новий iPad і Macbook Pro і інший техніці не з кола Apple. Такі речі, як код, зображення, іконки повинні бути гнучкими, щоб графіка на екранах з високою щільністю пікселів не виглядала розмитою, через те, що вони були погано розширені.

Рішення: скрипти, SVG і символьні шрифти. Поки ще немає «офіційних» рішень для адаптивних зображень, зате є пару відмінних із серії «неофіційних», які дають позитивні результати без необхідності вдаватися до зломів і «обходам» кодів.

Проблема 5: Таблиці

Частина опитаних респондентів помітили, що таблиці даних створюють великі проблеми, особливо, якщо вони містять комплексну інформацію або просто велика кількість рядків і стовпців. «Утискання» всієї цієї інформації в маленький екран - аж ніяк не вирішення проблеми. Тим не менш, деякі обнадійливі кроки вже зроблені.

Рішення: вибирайте різні варіанти. Кріс Койєр у своєму блозі виклав ряд хороших порад для адаптивних таблиць. Кілька років я працював з сайтами подорожей, містять великі і деталізовані таблиці, і я можу сказати, що жодне з розглянутих Крісом рішень повністю не відповідає цим вимогам. Однак, якщо говорити в цілому, я впевнений, що там є хоч один варіант, який підходить для вашого сайту.

Проблема 6: Складнощі перетворення старих сайтів з фіксованою шириною

За результатами опитування було виявлено, що одна з найбільших проблем це оновлення бази коду старого «нерухомого» для того, щоб зробити його адаптивним. Як я помітив вище, процес створення адаптивного дизайну дуже відрізняється від «старого» процесу, де код спроектований менш гнучким шляхом. Так що коли стикаєшся з оновленням старого сайту, перед тобою відразу постає питання: переробляти існуючі шаблони і стиль або все робити з нуля?

Рішення: будуйте з нуля. Всі опитані, без винятку, заявили, що в таких ситуаціях вони вибирали відновлення з нуля. І тільки в крайніх випадках, коли не було іншого вибору, вони просто перепроектували код.

Проблема 7: Як обслуговувати користувачів старих версій IE

Я просто впевнений, що ви всі чекали того моменту, коли буду говорити гидоти про Internet Explorer. Звичайно, я підтверджую, що працюючи з старими версіями браузера (IE8 і більш ранні), головна проблема виникає в нестачі підтримки медіа-запитів CSS. Це означає, що якщо ви працюєте з першими мобільного технікою, такий як 320 and Up, ваші медіа-запити не будуть зламувати, і ваш макет не буде належним чином відбиватися на настільних браузерах, так що в кінцевому підсумку ви отримаєте маленький макет на великому екрані.

Рішення: Polyfill'и або партеся. Сумно те, що незважаючи на бажане бачення світу дизайну (і фактичний прогрес Microsoft), ми все ще повинні розглядати більш старі версії Internet Explorer (особливо 8), коли плануємо створювати сайт. Але з іншого боку, у нас є потужні опції для підтримки адаптивними сайтами старих версій IE. Якщо ви прагнете до того, щоб ваш макет підтримувався максимально великою кількістю версій IE, розгляньте respond.js polyfill на ваших сторінках. Для більш повного пояснення варіантів, я рекомендую прочитати Методи Витонченою деградації медіа-запитів Льюїса Наймен. Якщо ви хочете відмовитися від підтримки старих версій браузера і зберегти контент доступним, то в цьому випадку, краще всього нічого не робити. Якщо ви конструювали сайт для першого мобільного і не включали скрипт respond.js, ваші юзери старих версій IE будуть бачити ваш мобільний варіант. Це, звичайно, не ідеальний варіант для великого монітора, але, принаймні, контент залишиться доступним. В іншому випадку, ви могли б розглянути простий умовний стиль IE і додати деякий рудиментарний стайлінг, тому що простий лінеарний вигляд може бути не кращим для багатьох користувачів. І все-таки, як не крути, питання обслуговування користувачів старих версій Internet Explorer, зводяться до вимог ваших клієнтів. Як кажуть, бажання клієнта – закон.

Проблема 8: Тестування часу і ціни

Опитані дизайнери відзначили, що часто проблематичним стає питання, як тестувати, за допомогою яких пристроїв проводити тестування і як виміряти потенційний розмір ціни проектування випробувального набору пристроїв.

Для багатьох дизайнерів, особливо фрілансерів, дуже складно створити набір випробувальних пристроїв, крім тих, що вони мають в особистому користуванні. Багато примудряються здійснювати огляд в браузері і переміщення вікна, а також тестування на особистому телефоні або планшеті. Природно, цей варіант далекий від ідеалу. Розробка навіть самої скромної колекції девайсів, на даний момент, є стандартними бізнес-витратами. Тестування часу - також проблематично. Час, необхідний для тестування сайту, безумовно, зросла, але частина цього відшкодовується більш кращим проектуванням в браузері і меншим полаганіем на статичні, фіксовані візуальні ефекти.

Рішення: застосовуйте пристрою і змінюйте розміри. Радує той факт, що з'являється все більше агентств, таких як Clearleft, які готові поділитися своєю величезною колекцією випробувальних пристроїв з усіма, хто хоче відвідати їхній офіс. Поки що це не так поширене, але я впевнений, що ця ініціатива не залишиться без прихильників.

РОЗРОБКА АДАПТИВНОГО ИНТЕРФЕЙСУ

2.1 Підготовка до адаптації сайту

З урахуванням зростання кількості Інтернет користувачів мобільних пристроїв в порівнянні з користувачами стаціонарних комп'ютерів, а також з урахуванням зростання популярності планшетів, і навіть онлайн-телебачення, компаніям непогано б задуматися про забезпечення гідного досвіду взаємодії користувачів їх ресурсів в незалежності від того, яким пристроєм вони користуються. Яким чином адаптивний дизайн може нам допомогти в цьому випадку? Перш за все, він дозволяє створювати сайти, які автоматично підганяються під розмір екрану. За допомогою гнучких сіток і «розумних» стилів, він може відображати той же вміст сайту, але у форматі, який вписується в ширину екрану пристрою. Коли нам потрібно створити мобільний сайт, можна розглядати величезну кількість варіантів здійснення цього завдання, і вибір рішення залежить тільки від вимог і бюджету. Але також важливо врахувати всі можливі рішення, а також сайти, які у нього вже є. Створення адаптивного сайту не є повноцінною стратегією розробки мобільного ресурсу, але якщо вам належить створити сайт з нуля, цей варіант особливо слід розглядати як вельми серйозне рішення.

Якщо починаємо з нуля. Розробка нового сайту або Інтернет-програми - це досить складний процес. Ви не впізнаєте наскільки успішним може бути ваш сайт, поки не запустите його, тому створення окремого мобільного сайту або мобільного застосування на додаток до основного проекту сайту може виявитися марною тратою часу і грошей. Було б краще для початку домогтися того, щоб сайт працював належним чином, а потім вже створювати додаткові мобільні сайти і додатки.

Якщо хочемо заощадити. Швидко реагуючі рішення потребують додаткового дизайні і розробці інтерфейсу, але не вимагає розробки додатків. Створення адаптується сайту займе у вас на 20–30% більше часу, але все ж це набагато швидше, ніж розробка окремого мобільного сайту або програми. Також, створення подібного сайту означає, що вам потрібно буде розробляти, налаштовувати і підтримувати роботу тільки одного сайту, а це значно знижує витрати. Якщо хочемо, щоб сайт працював на нових пристроях, які тільки випустили, то будь-який мобільний сайт повинен розпізнавати пристрій, з якого заходить користувач. У разі виходу нових пристроїв, сайт потрібно оновлювати. У той же час, адаптивного сайт розпізнає тільки ширину браузера, тому він не потребує додаткових оновленнях. Таким чином, він залишається більш прогресивним і гнучким.

2.2 Використовувані мови програмування

HTML (від англ. HyperText Markup Language - " мова розмітки гіпертексту") - Стандартна мова розмітки документів у Всесвітній павутині. Більшість веб-сторінок створюються за допомогою мови HTML (або XHTML). Мова HTML інтерпретується браузерами і відображається у вигляді документа в зручній для людини формі. HTML є додатком («окремим випадком») SGML (стандартної узагальненої мови розмітки) і відповідає міжнародному стандарту ISO 8879. XHTML ж є додатком XML. Мова HTML був розроблений британським вченим Тімом Бернерс-Лі приблизно в 1986-1991 роках у стінах Європейського Центру ядерних досліджень в Женеві (Швейцарія). HTML створювався як мова для обміну науковою і технічною документацією, придатний для використання людьми, які не є фахівцями в області верстки. HTML успішно справлявся з проблемою складності SGML шляхом визначення невеликого набору структурних і семантичних елементів - дескрипторів. Дескриптори також часто називають «тегами». За допомогою HTML можна легко створити відносно простий, але красиво оформлений документ. Крім спрощення структури документа, в HTML внесена підтримка гіпертексту. Мультимедійні можливості були додані пізніше.

Спочатку мова HTML був задуманий і створений як засіб структурування та форматування документів без їх прив'язки до засобів відтворення (відображення). В ідеалі, текст з розміткою HTML повинен був без стилістичних та структурних спотворень відтворюватися на обладнанні з різною технічною оснащеністю (кольоровий екран сучасного комп'ютера, монохромний екран органайзера, обмежений за розмірами екран мобільного телефону або пристрою та програми голосового відтворення текстів). Проте сучасне застосування HTML дуже далеко від його початкової задачі. Наприклад, тег < TABLE>, кілька разів використаний для форматування сторінки, яку ви на даний момент читаєте, призначений для створення в документах самих звичайних таблиць, але, як можна переконатися, тут немає жодної таблиці. З плином часу основна ідея платформонезалежних мови HTML була принесена в жертву сучасним потребам у мультимедійному і графічному оформленні. Текстові документи, що містять розмітку на мові HTML (такі документи традиційно мають розширення. html або. htm), обробляються спеціальними додатками, які відображають документ у його форматованому вигляді. Такі додатки, звані «браузерами» або «інтернет-оглядачами», зазвичай надають користувачеві зручний інтерфейс для запиту веб-сторінок, їх перегляду (і виведення на інші зовнішні пристрої) і, при необхідності, відправки введених користувачем даних на сервер. Найбільш популярними на сьогоднішній день браузерами є Google Chrome, Mozilla Firefox, Opera, Internet Explorer і Safari. В даний час Консорціум всесвітньої павутини розробляє HTML версії 5. Чорновий варіант специфікації мови з'явився в Інтернет 20 листопада 2007 року.

Співтовариством WHATWG (англ. Web Hypertext Application Technology Working Group), починаючи з 2004 року, розробляється специфікація Web Applications 1.0, часто неофіційно звана «HTML 5», яка розширює HTML (втім, маючи і сумісний з XHTML 1.0 XML-синтаксис) для кращого подання семантики різних типових сторінок, наприклад форумів, сайтів аукціонів, пошукових систем, онлайн-магазинів і т. д., які не дуже вдало вписуються в модель XHTML 2.

CSS (англ. Cascading Style Sheets - каскадні таблиці стилів) - формальна мова опису зовнішнього вигляду документа, написаного з використанням мови розмітки. Переважно використовується як засіб опису, оформлення зовнішнього вигляду веб-сторінок, написаних за допомогою мов розмітки HTML і XHTML, але може також застосовуватися до будь-яких XML-документами, наприклад, до SVG або XUL.

Мета створення CSS. CSS використовується творцями веб-сторінок для завдання кольорів, шрифтів, розташування окремих блоків та інших аспектів представлення зовнішнього вигляду цих веб-сторінок. Основною метою розробки CSS було розділення опису логічної структури веб-сторінки (яке проводиться за допомогою HTML або інших мов розмітки) від опису зовнішнього вигляду цієї веб-сторінки (яке тепер проводиться за допомогою формальної мови CSS). Такий поділ може збільшити доступність документа, надати велику гнучкість і можливість управління його поданням, а також зменшити складність і повторюваність в структурному вмісті. Крім того, CSS дозволяє представляти один і той же документ в різних стилях або методах виведення, таких як екранне уявлення, друковане подання, читання голосом (спеціальним голосовим браузером або програмою читання з екрану), або при виведенні пристроями, що використовують шрифт Брайля. Способи підключення CSS до документа. Правила CSS пишуться на формальному мові CSS і розташовуються в таблицях стилів, тобто таблиці стилів містять в собі правила CSS. Ці таблиці стилів можуть розташовуватися як у самому веб-документі, зовнішній вигляд якого вони описують, так і в окремих файлах, які мають формат CSS. (По суті, формат CSS - це звичайний текстовий файл. У файлі. Css не міститься нічого, крім переліку правил CSS та коментарів до них.)

Тобто, ці таблиці стилів можуть бути підключені, впроваджені в описуваний ними веб-документ чотирма різними способами:

- коли таблиця стилів знаходиться в окремому файлі, вона може бути підключена до веб-документу за допомогою тега < link>, розташованого в цьому документі між тегами < head> і < / head>. (Тег < link> буде мати атрибут href, що має значенням адресу цієї таблиці стилів). Всі правила цієї таблиці діють протягом усього документа;

- коли таблиця стилів знаходиться в окремому файлі, вона може бути підключена до веб-документу за допомогою директиви @ import, що розташовується в цьому документі між тегами < style> і < / style> (які, у свою чергу, розташовуються в цьому документі між тегами < head > і < / head>) відразу після тега < style>, яка також вказує (у своїх дужках, після слова url) на адресу цієї таблиці стилів. Всі правила цієї таблиці діють протягом усього документа;

- коли таблиця стилів описана в самому документі, вона може розташовуватися в ньому між тегами < style> і < / style> (які, у свою чергу, розташовуються в цьому документі між тегами < head> і < / head>). Всі правила цієї таблиці діють протягом усього документа;

- коли таблиця стилів описана в самому документі, вона може розташовуватися в ньому в тілі якогось окремого тега (за допомогою його атрибуту style) цього документа. Всі правила цієї таблиці діють тільки на вміст цього тега.

Ієрархія елементів усередині документа. Як відомо, HTML-документи будуються на підставі ієрархії елементів, яка може бути наочно представлена ​ ​ в деревовидної формі. Елементи HTML одне для одного можуть бути батьківськими, дочірніми, елементами-предками, елементами-нащадками, сестринськими. Елемент є батьком іншої елемента, якщо в ієрархічній структурі документа він знаходиться відразу, безпосередньо над цим елементом. Елемент є предком іншого елемента, якщо в ієрархічній структурі документа він знаходиться десь вище цього елемента. Нехай, наприклад, в документі присутні два абзаци p, що включають в себе шрифт з напівжирним зображенням b. Тоді елементи b будуть дочірніми елементами своїх батьківських елементів p, і нащадками своїх предків body. У свою чергу, для елементів p елемент body буде тільки батьком. І крім того, ці два елементи p будуть сестринськими елементами, як мають одного і того ж батька - body.

У CSS можуть задаватися за допомогою селекторів не лише поодинокі елементи, але й елементи, що є нащадками, дочірніми або сестринськими елементами інших елементів.

Правила побудови CSS. У перших трьох випадках підключення таблиці CSS до документа (див. вище) кожне правило CSS з таблиці стилів має дві основні частини - селектор і блок оголошень. Селектор, розташований у лівій частині правила, визначає, на які частини документа поширюється правило. Блок оголошень розташовується в правій частині правила. Він поміщається у фігурні дужки, і, у свою чергу, складається з одного або більше оголошень, розділених знаком «;». Кожне оголошення являє собою поєднання властивості CSS і значення, розділених знаком ": ". Селектори можуть групуватися в одному рядку через кому. У такому випадку властивість застосовується до кожного з них. У четвертому випадку підключення таблиці CSS до документа (див. список) правило CSS (є значенням атрибута style тега, на який воно діє) являє собою перелік оголошень («властивість CSS: значення»), розділених знаком «;».

2.3 Процес створення адаптивного інтерфейсу

Давайте розглянемо безпосередньо сам процес створення підлаштовують сайту на прикладі веб-сайту готелю. У вересні минулого року Equator запустив новий сайт для Macdonald Hotels. Macdonald Hotels - це британська готельна мережа, що складається з 47 готелів і курортів на території Великобританії та Іспанії. Для них було створено новий сайт, що включає нову структуру, розширений опис готелю і новий движок для бронювання номерів. Далі я опишу кроки які доведеться пройти, а також кілька моментів, які варто врахувати при розробці адаптивного інтерфейсу.

Ключові моменти процесу:

- Збір інформації: Визначення додаткових вимог для адаптивного сайту

- Створення каркасу: Побудова сітки і макету сайту з урахуванням різних форматів екранів

- Зовнішній вигляд: Оформлення сайту

- Побудова сайту: Кілька моментів, що стосуються HTML і CSS

Збір інформації.

Збір інформації - це один з найбільш важливих моментів у розробці, тому необхідно приділити більше уваги цільової аудиторії і використовуваним нею різних пристроїв. Усвідомлення того, яким чином ці користувачі хочуть використовувати ваш сайт на різних пристроях, допоможе вам визначитися з пріоритетами проекту.

Визначення цілей користувачів з різними пристроями.

Це питання найбільш характерний для нашої ситуації. Раніше можна було припустити, що користувач мобільного пристрою керується тільки наявної завданням, тобто «Мені треба знайти адресу готелю» або «Мені треба швидко зарезервувати номер». Але сьогодні, незважаючи на клас пристрою, користувачі не поспішаючи переглядають сайти начебто їм більше не потрібно терміново виконати певне завдання. Варто враховувати, що такий тип мислення користувача може допомогти вам оптимізувати вміст сайту, незважаючи на те, яким пристроєм користується відвідувач.

Облік технічного боку.

Давайте подумаємо про те, як різні складні функції сайту будуть працювати на різних пристроях. Незважаючи на те, що адаптивний інтерфейс всього лише змінює CSS в залежності від розміру екрану, якщо на сайті є складні елементи, реалізовані на JavaScript, цілком імовірно, що вони можуть неправильно відображатися на маленькому екрані, і можливо, цього варто уникнути.

Створення каркаса.

Зазвичай дуже важко визначити логіку, згідно з якою повинен змінюватися стиль сайту, і як повинен бути побудований сайт, але нам потрібно з чогось почати визначення відмінності форм сайту залежно від ширини екрана. Для цього ми вибрали три типи екрану - настільний комп'ютер, iPad і iPhone. Як нам здалося, параметри цих пристроїв прекрасно підходять під наші вимоги, але коли ви продумуєте власний проект, краще врахувати які параметри екранів підходять саме для вашого сайту. Цілком імовірно, що вам доведеться взяти до уваги навіть параметри великих телеекранів.

Вже на цьому етапі проекту необхідно визначитися з основними шаблонами, які треба підігнати під різні екрани, але це не означає, що вам доведеться підганяти всі наявні шаблони. Тут головною метою є правильно визначити принцип, за яким CSS буде змінювати зовнішній вигляд сайту, тому приділіть особливу увагу сторінкам з різними розмітками. Для нашого сайту, ми вибрали домашню сторінку, всі сторінки процесу резервування номера, сторінки готелів, а також кілька стандартних розміток. Кожна з цих сторінок має різне розташування колонок, тип контенту та функції.

Для початку, треба визначити структуру сітки для кожного екрана. Ми створили три типи сторінок для екранів з шириною 1024х (комп'ютер), 768х (iPad у вертикальній орієнтації) і 320х (iPhone у вертикальній орієнтації), і взялися визначати структуру сітки для кожного.

Рисунок 2.1­ Зображення блоків сайту на різних мобільних пристроях

За допомогою простої сітки з однаковою шириною колонок ми змогли простим чином спланувати положення компонентів при зменшенні ширини екрану.

Створюємо головний шаблон.

При створенні кожного каркаса сайту варто враховувати кількість колонок і як компоненти будуть розташовуватися за умови, що ширина сторінки скорочується. Наприклад, що відбудеться, якщо місця виявиться ще менше. Або якщо зробити 4 колонки контенту. Або якщо скоротити кількість колонок до трьох штук. На всіх етапах розробки дизайнер і проектувальник повинні працювати разом, щоб мати можливість співвідносити всі моменти, що стосуються візуальної зміни сайту і CSS-параметрів.

Починаємо з домашньої сторінки, так як я вважаю що домашня сторінка є найголовнішою, вирішальною. Нижче показаний вже готовий каркас сторінки. Як ви бачите, довжина мобільної версії сайту трохи більше за рахунок того, що вміст розтягується в одну колонку.

Рисунок 2.2­ Зображення головної сторінки на різних пристроях

Основна навігація

Була створена проста горизонтальна верхня панель навігації, ширина якої змінюється залежно від ширини екрана. Зі зменшенням ширини екрану, відстань між пунктами меню зменшується, а при необхідності вони можуть переноситися на наступний рядок. Це відмінно підходить для настільних комп'ютерів, ноутбуків і планшетів, але ми вирішили поліпшити це меню, щоб воно підходило для більшої кількості пристроїв. Вийшло меню, яке в мобільних пристроях згортається до двох колонок.

Рисунок 2.3­ Зображення горизонтальної верхньої панелі навігації на різних мобільних пристроях

Інші елементи заголовків розташувалися праворуч, і просто зсуваються при збільшенні ширини екрану.

Запам'ятайте, що коли ви продумуєте стиль навігації сайту, варто передбачити, як вона буде працювати при зміні розміру екрану. Деякі стилі оформлення, як наприклад, з використанням вкладок, можуть неправильно працювати на вузьких екранах.

Нижня частина сайту, так званий підвал, був зроблений досить простим, достатньо було просто продумати, що і як має виглядати при зменшенні ширини та кількості колонок - в даному випадку елементи просто розташовуються один під одним.

Рисунок 2.4­ Зображення нижньої частини сторінки на різних мобільних пристроях

Інші компоненти.

Наша спрощена сітка дозволила досить просто спланувати розташування компонентів. На головній сторінці ми додали горизонтальну прокрутку, яка одним клацанням прокручує сторінку. Варіант сайту для планшета зберігає цю функцію, але робить видимими тільки три пункти, а в мобільному варіанті ми попросту прибрали цю функцію і розташували всі елементи вертикально. Кожен з компонентів може потребувати окремого підходу, тому продумайте, як користувач зможе користуватися кожним елементом на різних параметрах екранів. Для користувачів мобільних телефонів можливо буде набагато зручніше просто прокручувати сторінку замість того, щоб натискати маленькі кнопки для взаємодії зі сторінкою.

Рисунок 2.5­ Зображення горизонтального прокручування на різних пристроях

Обов'язковим у створенні адаптивного інтерфейсу є тестування того що вже зробили. Як тільки ви створили перший макет, відразу ж протестуйте його на відповідному пристрої. Таким чином, ви побачите як виглядає станиця і перевірите як вона прокручується. Так, ви вже на початковій стадії зрозумієте як працює ваш каркас. За допомогою такої перевірки ми відразу усвідомили що у нас працює, а що ні. Якщо ви подивитеся на наш макет, ви відразу помітите нашу першу проблему.

Переміщаючись по сайту, користувач побачить тільки ці 2 елементи - панель навігації та пошуку. Це означає, що користувач може навіть подумати, що сторінка недовантажити, а також навряд чи зрозуміє, де саме на сайті він знаходиться. Ми вирішили цю проблему, просто оформивши ці пункти у вигляді переховуються панелей, тим самим дозволивши користувачам швидше знаходити потрібний вміст.

Якщо в ході перевірки ви протестуєте сайт на планшеті і мобільному телефоні, це дозволить вам побачити багато чого. Тепер, після того, як ви створили, перевірили, виправили і затвердили свій каркас, пора перейти до того, щоб привести його в пристойний вигляд на всіх типах екранів.

Зовнішній вигляд сайту і візуальні ефекти

Не обов'язково створювати оформлення для кожного окремого каркаса. Ваша основна мета - врахувати всі стилі, необхідні для створення HTML і CSS. У деяких випадках каркаси і зображення будуть перетинатися, а деякі стилі, необхідні для мобільної версії сайту, для початкового макета будуть і зовсім не потрібні.

Стиль сторінки. Врахуйте те, що стиль сторінки для мобільної версії повинен бути простіше - в цьому плюс CSS3, тому що тут вам не потрібно вставляти величезна кількість зображень щоб отримати стильний ефект, але вони все одно будуть довго завантажуватися.

Шрифт. Переконайтеся, що розмір шрифту забезпечує читабельність тексту на будь-якому пристрої. Для мобільних телефонів шрифти повинні бути значно більшими, щоб текст можна було легко прочитати. Також врахуйте, що оформлення може змінитися коли сайт буде запущений. У будь-якому разі, те, як оформлення виглядає в сирому вигляді та на готовому сайті, може відрізнятися.

3 ЗАХОДИ ЩОДО ОХОРОНИ ПРАЦІ

Охорона праці - система законодавчих актів, соціально-економічних, організаційних, технічних, гігієнічних і лікувально-профілактичних заходів та засобів, що забезпечують безпеку, збереження здоров'я і працездатності людини в процесі праці. Науково-технічний прогрес вніс серйозні зміни в умови виробничої діяльності працівників розумової праці. Їх праця стала більш інтенсивним, напруженим, що вимагає значних витрат розумової, емоційної і фізичної енергії. Це зажадало комплексного рішення проблем ергономіки, гігієни й організації праці, регламентації режимів праці і відпочинку.

Охорона здоров'я трудящих, забезпечення безпеки умов праці, ліквідація професійних захворювань і виробничого травматизму складає одну з головних турбот людського суспільства. Звертається увага на необхідність широкого застосування прогресивних форм наукової організації праці, зведення до мінімуму ручної, малокваліфікованої праці, створення обстановки, що виключає професійні захворювання і виробничий травматизм.

Даний розділ дипломного проекту присвячений розгляду наступних питань:

• організація робочого місця програміста;

• визначення оптимальних умов праці програміста.

3.1 Опис робочого місця програміста

Робоче місце - це частина простору, в якому інженер здійснює трудову діяльність, і проводить велику частину робочого часу. Робоче місце, добре пристосоване до трудової діяльності інженера, правильно і доцільно організоване, у відношенні простори, форми, розміру забезпечує йому зручне положення при роботі і високу продуктивність праці при найменшому фізичному і психічному напруженні.

При правильній організації робочого місця продуктивність праці інженера зростає з 8 до 20 відсотків.

Згідно ГОСТ 12.2.032-78 конструкція робочого місця і взаємне розташування всіх його елементів повинно відповідати антропометричним, фізичним і психологічним вимогам. Велике значення має також характер роботи. Зокрема, при організації робочого місця програміста повинні бути дотримані такі основні умови:

• оптимальне розміщення обладнання, що входить до складу робочого місця;

• достатній робочий простір, що дозволяє здійснювати всі необхідні рухи і переміщення;

• необхідно природне і штучне освітлення для виконання поставлених завдань;

• рівень акустичного шуму не повинен перевищувати допустимого значення.

Головними елементами робочого місця програміста є письмовий стіл і крісло. Основним робочим положенням є положення сидячи. Робоче місце для виконання робіт у положенні сидячи організується відповідно до ГОСТ 12.2.032-78.

Робоча поза сидячи викликає мінімальне стомлення програміста. Раціональне планування робочого місця передбачає чіткий порядок і сталість розміщення предметів, засобів праці і документації. Те, що потрібно для виконання робіт частіше, розташовано в зоні легкої досяжності робочого простору.

Моторне поле - простір робочого місця, в якому можуть здійснюватися рухові дії людини.

Максимальна зона досяжності рук - це частина моторного поля робочого місця, обмеженого дугами, що описуються максимально витягнутими руками при русі їх в плечовому суглобі.

Оптимальна зона - частина моторного поля робочого місця, обмеженого дугами, що описуються передпліччями при русі в ліктьових суглобах з опорою в точці ліктя і з відносно нерухомим плечем.

Рисунок 3.1-Зони досяжності рук у горизонтальній площині.

а - зона максимальної досяжності;

б - зона досяжності пальців при витягнутій руці;

в - зона легкої досяжності долоні;

г - оптимальний простір для грубої ручної роботи;

д - оптимальний простір для тонкої ручної роботи.

Розглянемо оптимальне розміщення предметів праці і документації в зонах досяжності рук:

ДИСПЛЕЙ розміщається в зоні а (у центрі);

КЛАВИАТУРА - у зоні г / д;

СИСТЕМНИЙ БЛОК розміщається в зоні б (ліворуч);

ПРИНТЕР знаходиться в зоні а (справа);

ДОКУМЕНТАЦІЯ

1) в зоні легкої досяжності долоні - в (ліворуч) - література і документація, необхідна при роботі;

2) у висувних ящиках столу - література, якою не постійно.

При проектуванні письмового столу варто враховувати таке:

• висота столу повинна бути обрана з урахуванням можливості сидіти вільно, у зручній позі, при необхідності спираючись на підлокітники;

• нижня частина столу повинна бути сконструйована так, щоб програміст міг зручно сидіти, не був змушений підбирати ноги;

• поверхня столу повинна мати властивості, що виключають появу відблисків в полі зору програміста;

• конструкція столу повинна передбачати наявність висувних ящиків (не менше 3 для зберігання документації, лістингів, канцелярських приналежностей, особистих речей).

Параметри робочого місця вибираються відповідно до антропометричними характеристиками. При використанні цих даних у розрахунках варто виходити з максимальних антропометричних характеристик (М +2).

При роботі в положенні сидячи рекомендуються такі параметри робочого простору:

• ширина не менше 700 мм;

• глибина не менше 400 мм;

• висота робочої поверхні столу над підлогою 700-750 мм.

Оптимальними розмірами столу є:

• висота 710 мм;

• довжина стола 1300 мм;

• ширина стола 650 мм.

Поверхня для листа повинна мати не менше 40 мм в глибину і не менше 600 мм в ширину.

Під робочою поверхнею повинно бути передбачений простір для ніг:

• висота не менше 600 мм;

• ширина не менше 500 мм;

• глибина не менше 400 мм.

Важливим елементом робочого місця програміста є крісло. Воно виконується відповідно до ГОСТ 21.889-76. При проектуванні крісла виходять з того, що при будь-якому робочому положенні програміста його поза повинна бути фізіологічно правильно обґрунтованої, тобто положення частин тіла повинно бути оптимальним. Для задоволення вимог фізіології, що випливають з аналізу положення тіла людини в положенні сидячи, конструкція робочого сидіння повинна відповідати таким основним вимогам:

• допускати можливість зміни положення тіла, тобто забезпечувати вільне переміщення корпуса і кінцівок тіла один щодо одного;

• допускати регулювання висоти в залежності від росту працюючої людини (в межах від 400 до 550 мм);

• мати злегка увігнуту поверхню,

• мати невеликий нахил назад.

Виходячи з вищесказаного, наведемо параметри столу програміста:

• висота столу 710 мм;

• довжина стола 1300 мм;

• ширина стола 650 мм;

• глибина столу 400 мм.

Поверхня для листа:

• в глибину 40 мм;

• в ширину 600 мм.

Важливим моментом є також раціональне розміщення на робочому місці документації, канцелярських приналежностей, що повинно забезпечити працюючому зручну робочу позу, найбільш економічні руху і мінімальні траєкторії переміщення працюючого і предмета праці на даному робочому місці.

Створення сприятливих умов праці і правильне естетичне оформлення робочих місць на виробництві має велике значення як для полегшення праці, так і для підвищення його привабливості, позитивно впливає на продуктивність праці. Забарвлення приміщень і меблів повинна сприяти створенню сприятливих умов для зорового сприйняття, гарного настрою.