Поточний час:
Сьогодні 21 листопада, вівторокк 2017 рік
Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 2 роки 11 місяців 2 дня

Ваш ip адрес:54.198.210.67

Доброї ночі!
Ви обновили сторінку в 4 : 30
Статистика

Кількість публікацій на блозі: 367
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 17
Кількість міток на блозі: 28

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

zura-blog adjacsПривіт всім відвідувачам Zura – Blog, в сьогоднішній публікації вирішив написати пост, про ще одну технологію яку застосовують у веб дизайні, можна вважати її самою новітньою технологією, яку застосовують у створенні сайтів, ця технологія називається AJAX.

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

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

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

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

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

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

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

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

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

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

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

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


user_97

Демнонстрація галереї


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

Скачати ефект галереї можна тут

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

Отож AJAX переводиться з англійської як Asynchronous JavaScript (асинхронний), яка перевага цієї технології, вона дозволяє сторнікам браузера на клієнтський стороні, точніше прямо з браузера у фоновому режимі звертатись до сервера, і отримувати потрібні дані.

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

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

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

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

Що стосується даної галеї, то не потрібно нічого мудрувати, а тільки скачати архів, розпакувати, і в папках  “thumbs” і “original” поміняти фото, виставивши в своїх фото, ті самі параметри що і в оригінальних фото, це назва фото, назва повинна бути така сама, і розміри фото такі самі.

Для того щоб поексперементувати з цим елементом, або перевірити як він працює, потрібен локальний сервер, адже для роботи галереї  також застосована і мова програмування РНР. Матеріали про те як створити локальний сервер за допомогю пакету програм від Denver і пакету програм від Endels  також можна знайти на Zura — Blog.

На цьому все до зустрічі.

Leave a Reply

Your email address will not be published. Required fields are marked *