МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ «ЛЬВІВСЬКА ПОЛІТЕХНІКА» Інститут комп'ютерних технологій, автоматики та метрології Кафедра «Електронні обчислювальні машини» Конструктор сайтів WIX.com Методичні вказівки до лабораторної роботи №1 з дисципліни «Глобальні інформаційні мережі» для студентів базового напряму 6.050102 «Комп'ютерна інженерія» Затверджено на засіданні кафедри «Електронні обчислювальні машини» Протокол № 7 від 11 березня 2014 р. на засіданні методичної ради ІКТА Протокол № 11 від 25 березня 2014 р. Зареєстровано в НМУ НУ «ЛП» № 5591 від 05.05.2014 Львів-2014 2 Конструктор сайтів WIX.com. Методичні вказівки до лабораторної роботи № 1 з дисципліни «Глобальні інформаційні мережі» для студентів базового напряму 6.050102 «Комп'ютерна інженерія»/Укл. [ім’я автора приховано], [ім’я автора приховано] - Львів: Національний університет «Львівська політехніка», 2014. – 9 с. Укладачі: [ім’я автора приховано], канд. техн. наук, доцент [ім’я автора приховано], канд.. техн.. наук, доцент Відповідальна за випуск: [ім’я автора приховано], канд. техн. наук, доцент Рецензенти: Голембо В.А., канд. техн. наук, доцент каф. ЕОМ Різник О.Я., канд. техн. наук, доцент каф. ІТВС 3 Мета роботи. Ознайомитися і набути практичних навичок роботи з конструктором сайтів WIX. Платформа WIX може використовуватися не лише для створення повноцінного і багатофункціонального сайту, але і як блог-платформа, веб-форум, інтернет-магазин тощо. Wix.com - безкоштовний функціональний конструктор для створення сайтів З появою і швидким розвитком мережі Інтернет перед користувачами відкрилося багато нових можливостей, зокрема, можливість спілкування. Тепер можна обговорювати різні теми на форумах і отримувати цінні поради, розповідати про себе у блозі, знаходити давніх друзів за допомогою соціальних мереж і багато іншого. Значно ширше поле для діяльності відкриває для користувачів наявність власного сайту. Це можливість заявити про себе, свої захоплення, роботу, компанію. Але створення навіть простого за дизайном чи функціоналом сайту потребує базових знань мови HTML та JavaScript, навичок обробки зображень та розміщення веб-документів на серверах Інтернету. На сьогодні доволі популярним є використання конструкторів сайтів, що надають засоби для створення сайтів без відповідного підґрунтя. В існуючих сервісах є власні особливості, переваги, але, одним з кращих проектів в своїй сфері є безкоштовний сервіс Wix.com. Wix.com – функціональний конструктор для створення сайтів з нуля, який буде значною допомогою для користувачів, які не мають досвіду у створенні веб-документів. Весь процес проходить максимально просто, невимушено і інтуїтивно зрозуміло - за допомогою механізму Drag and Drop можна легко перетягувати елементи веб-сторінки, а підбірка налаштувань допоможе змінити базовий шаблон відповідно до завдання сайту. Для початківців користувачів Wix.com надіє довідкову і навчальну підтримку, що допоможе створити власний сайт. На форумі можна задати питання. Відео курс (https://www.youtube.com/watch?v=anWVpxhzPso) Навчальний Центр (http://ru.wix.com/support/main/html5/) На головній сторінці (рис.1) сайту перелічено основні можливості: Для використання конструктора не потрібні знання програмування та інші спеціальні навички, надані інструменти дозволяють розробити Flash або Html5 сайт різної складності. Сотні унікальних дизайнів під різні формати проектів (від портфоліо до сайту-візитки ) або варіант створення сайт з нуля. Створення мобільних сайтів, сторінок Facebook або блогів. Багато налаштувань для зміни зображень, кольорів і шрифтів сайту надають 4 можливості для зміни базового шаблону. Всі елементи веб-сторінки легко редагуються, переміщаються і налаштовуються. Підтримка SEO параметрів для індексації в пошукових системах. Базові опції конструктора є безкоштовними. Для розширення функціональності сайту надаються платні тарифи. Рис.1. Головна сторінка сервісу Wix.com Створення сайту Крок 1. Реєстрація та вибір шаблону Для того, щоб користуватися конструктором Wix.com потрібно пройти нескладну процедуру реєстрації, де вказати лише е-майл і пароль. Після цього користувач може відразу створювати сайт, вибравши відповідну тематику (рис.2): 5 Рис. 2. Вибір тематики для майбутнього сайту Сервіс Wix.com надає широкий вибір тем для оформлення: від фотографії, дизайну, арту до бізнесу, послуг і ресторанів. Кожна тема містить професійні шаблони, що розподілені по категоріях (рис. 3). Наприклад, в темі "Музика і розваги" розміщено шаблони сайтів для акторів, театру, кіно, танців, заходів, музикантів тощо. Часто шаблони між собою перетинаються в різних категоріях. Рис. 3. Вибір шаблону для майбутнього сайту На цій же сторінці є можливості для впорядкування дизайнів окремо Flash і Html5, а також можливість переглянути новітні або найпопулярніші роботи. Біля кожного макета 6 є кнопка "Перегляд" за допомогою якої можна побачити як виглядатиме майбутній Інтернет проект після завершення роботи. У разі, якщо користувач хоче застосувати власний дизайн присутній варіант "Порожні", де можна вибрати структуру розташування елементів і меню на майбутньому сайті, решта елементів додається вручну (рис.4). Рис.4. Вибір шаблону структури сторінки КРОК 2. Редагування та налаштування шаблону Після вибору базового макету для сайту, потрібно натиснути кнопку "Редагувати", щоб перейти до внесення власних змін у готовий дизайн. Конструктор переходить в режим редагування, де для користувача надано багато опцій і налаштувань. Готовий шаблон можна змінити в один із способів: Клікнути по елементу, що потребує змін. Скористатися лівим бічним меню, що складається з чотирьох пунктів. Кожен пункт містить підменю, між якими можна перемикатися та редагувати. Ліве бічне меню складається з чотирьох пунктів : Сторінки – опції призначені для роботи з сторінками сайту. Їх можна переміщати, редагувати, додавати і видаляти. Підтримується ієрархія сторінок у вигляді випадного меню. Також можна вказувати МЕТА дані для кожної зі сторінок сайту. Дизайн – опції дозволяють змінювати фон сайту, колірну гамму, а також шрифти. Додати - розділ з віджетами, які можна розмістити на веб-сторінці. Зокрема, це текст, фото, галерея, медіа, форми і лінії, кнопки і меню, соціальні мережі, Інтернет магазин і додатки. Налаштування – тут можна задати адресу сайту, додати фавіконки, встановити SEO- параметри для пошуковиків, налаштувати статистику. На рис. 5 наведено приклад, як в обраному шаблоні змінювати опції. Поступово 7 відкривається відразу три різних вікна з параметрами - спочатку загальні, потім деталізовані. Рис.5. Використання меню для зміни шаблону Для уставляння віджетів не потрібні знання програмування, установка плагінів тощо (рис.6). У відповідному пункті меню, слід вибрати відповідний віджет і простим перетягуванням розмістити елемент на сторінці. В залежності від налаштувань, відмет може відображатися на одній або на всіх сторінках сайтах. Рис.6. Уставляння віджетів на сторінку Функції, яких немає в конструкторі, можна додати за допомогою HTML коду. Але навіть без 8 цього є достатньо наявних елементів для стандартного повноцінного сайту. Всі елементи сторінки надаються до налаштувань за потребами користувача. Крок 3. Фініш. Власний домен і преміум-тарифи Праворуч зверху в редакторі Wix.com є кнопки для збереження змін і перегляду створених сторінок. Пункт "Публікація" дозволяє розмістити сайт на сервері і зробити його доступним для всіх користувачів Інтернету. Оскільки сервіс Wix.com є безкоштовним, тому, введено обмеження на доменну адресу, яка буде мати вигляд: http://ваш_логин.wix.com/назва_сайту Це, звичайно, не найкраще рішення, тому має сенс підключити свій домен для проекту. На жаль, для цього доведеться перейти від безкоштовного аккаунту до преміям-тарифів. В Wix.com є кілька варіантів платного пропозицій (рис.7.): Рис.7. Преміум-тарифи ресурсу Wix.com Переваги платного акаунту Отримання якісного дизайну, що повністю налаштовується. Додається адміністративна сторінка з налаштуваннями і можливістю змінювати вміст сайту легко, просто без специфічних знань. Присутня SEO функціональність і багато корисних віджетів. Підтримку сайту можна робити власноруч або звернутися в технічну підтримку Wix.com. Як бонус за преміум-тарифи, домен надається безкоштовно. Також надаються купони на рекламу в Google і Facebook - що є важливим для старту власного бізнесу в 9 мережі. Wix.com пропонує вигідні пропозиції для веб-розробників. Можна стати партнером і заробляти гроші за рахунок доходу отриманого з власного сайту. Для творчих людей пропонують роботу дизайнеру Wix.com. Вони отримують доступ до Каталогу Професіоналів (Wix Pro), куди адміністрація сервісу направляє клієнтів, які шукають виконавців. Порядок роботи 1. Ознайомитися з системою Wix.com (http://www.wix.com). 2. Обрати відповідний до тематики шаблон і створити тестову сторінку. 3. Ознайомитися з адміністративною панеллю. 4. Додати/забрати наявні сервіси до сайту. 5. Опублікувати сайт в Інтернеті. Зміст звіту 1. Назва та мета виконання лабораторної роботи. 2. Скріншоти послідовності створення сайту з коротким описом кожного з етапів. Вказати доменну адресу створеного сайту. 3. У висновку оцінити зручність використання конструктора і адміністративної панелі. Використані джерела 1. Про систему WIX http://ru.wix.com/ 2. Wix.com в Твиттере https://twitter.com/Wix 3. Wix.com – бесплатный функциональный конструктор http://tods-blog.com.ua/web- development/wix/ 10 11 12