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

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

Як використовувати масштабування?
По-перше, давайте подивимося, як використовувати переваги масштабування в Internet Explorer 8. В Internet Explorer 7 масштабування було ближче, по своїй суті, до оптичного збільшення, коли кожен елемент на сторінці масштабуватися щодо свого розміру при візуалізації на рівні 100% збільшення або в нормальному режимі. Це призвело до величезної кількості проблем для користувачів і, зокрема, виникнення горизонтальної прокрутки. Новий механізм масштабування в Internet Explorer 8 масштабує елементи, які визначаються абсолютними величинами, такими як пікселі, без впливу на розмір елементів, що визначаються відносними величинами, такими як відсотки. Для повного опису виведення масштабування і поведінки візуалізації в Internet Explorer 8 дивіться цю статтю. Уподобання кожного індивідуального користувача дуже відрізняються, тому ми зробили доступними чотири способи збільшення і зменшення масштабу відображуваних сторінок: за допомогою користувацького інтерфейсу, за допомогою клавіатурних скорочень, за допомогою колеса миші, за допомогою сенсорних жестів (доступно в Windows 7).

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



Не губіться при використанні масштабування
Тестування показало, що багато користувачів IE губилися при використанні масштабування сторінки. Завдяки спільним зусиллям команд Internet Explorer Touch і Windows 7 Touch, ми реалізували так зване масштабування по точці фокусування, яке покликане вирішити цю проблему.

Що таке масштабування по точці фокусування?
Точка фокусу дозволяє Internet Explorer змінювати масштаб сторінки за певним елементу на сторінці. Таким чином, масштабування стає більш інтуїтивним і ви навряд чи загубитеся на сторінці. Припустимо, ви читаєте http://www.msn.com і хочете збільшити сторінку в області вуха президента Обами. Встановимо фокус праворуч від вуха президента, як показано на скріншоті нижче:



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



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

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



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

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



Чим більше ви будете розводити пальці в сторони, тим більше Internet Explorer буде збільшувати сторінку (відсоток масштабування збільшиться), і навпаки, чим ближче ви будете зводити пальці, тим більше Internet Explorer буде зменшувати сторінку (відсоток масштабування зменшиться), використовуючи одну і ту ж точку фокусування. Рівень масштабування прямо пропорційний зміні дистанції щодо актуального рівня масштабування.

Збільшення подвійним натисканням
Друга функція використовує жест натискання двома пальцями з Windows 7 і дозволяє вам швидко збільшити об’єкт на екрані, натиснувши по ньому двома пальцями. У команді IE ми воліємо називати цей жест ударом кобри (від англ. cobra tap). Точка фокусування знову визначається половиною відстані між пальцями, а цільовий елемент визначається, як об’єкт в фокусі. На зображенні вище цільовим об’єктом було обличчя президента. Internet Explorer 8 максимально збільшить цільовий об’єкт так, щоб він не виходив за межі вікна перегляду. Повторний жест на сторінці повернуть масштаб до стандартного значення.

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

Коли масштабування по точки фокусування працює не так, як передбачалося
Є випадки, коли масштабування по точці фокусування працює не так, як ви можете очікувати. Перше, що вам необхідно пам’ятати, – це те, що для того, щоб Internet Explorer 8 міг визначити фокус, на сторінці повинні бути смуги прокрутки. Якщо ви використовуєте низькі рівні масштабування або автор сторінки використовує велику висоту для того, щоб уникнути смуг прокрутки у вікні будь-якого розміру, то Internet Explorer 8 не зможе панорамувати таку сторінку для фіксації точки фокусування через відсутність смуг прокрутки. Одним з прикладів таких сторінок є Wikipedia, де розміри практично всіх елементів вказані у відносних величинах – в процентах. Наприклад, коли розмір елемента визначається відсотками вікна перегляду, то цей елемент як такої ніколи не стане причиною появи смуг прокрутки, які необхідні для правильного панорамування точки фокусування.

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

Узгодження масштабування з високим дозволом в Windows
Щоб досвід перегляду веб-сторінок відповідав досвіду роботи з Windows, Internet Explorer виставляє свої настройки масштабування відповідно налаштувань масштабування в Windows. Якщо, наприклад, масштабування в Windows заставлено на 120 точок на дюйм, тоді Internet Explorer 8 буде масштабувати вміст веб сторінок до 125%, так як масштабування проводиться щодо 96 точок на дюйм, а співвідношення 120/96 еквівалентно 1.25, що і є 125%. За додатковими подробицями про технологію High DPI і Internet Explorer 8 звертайтеся до розділу DPI Scaling у статті Making the Web Bigger на MSDN. Звичайно, якщо ви віддаєте перевагу переглядати сторінки, використовуючи для цього інший рівень масштабування, ви можете його змінити одним із способів, описаних вище в цій статті, і Internet Explorer 8 запам’ятає ваш вибір.

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

Схожі статті:


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

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*