МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ «ЛЬВІВСЬКА ПОЛІТЕХНІКА» Інститут комп'ютерних технологій, автоматики та метрології Кафедра «Електронні обчислювальні машини» Онлайн редактори і генератори Методичні вказівки до лабораторної роботи №3 з дисципліни «Глобальні інформаційні мережі» для студентів базового напряму 6.050102 «Комп'ютерна інженерія» Затверджено на засіданні кафедри «Електронні обчислювальні машини» Протокол № 7 від 11 березня 2014 р. на засіданні методичної ради ІКТА Протокол № 11 від 25 березня 2014 р. Зареєстровано в НМУ НУ «ЛП» № 5593 від 05.05.2014 Львів-2014 2 Онлайн редактори і генератори. Методичні вказівки до лабораторної роботи № 3 з дисципліни «Глобальні інформаційні мережі» для студентів базового напряму 6.050102 «Комп'ютерна інженерія»/Укл. [ім’я автора приховано], [ім’я автора приховано] - Львів: Національний університет «Львівська політехніка», 2014. – 15 с. Укладачі: [ім’я автора приховано], канд. техн. наук, доцент [ім’я автора приховано], канд.. техн.. наук, доцент Відповідальна за випуск: [ім’я автора приховано], канд. техн. наук, доцент Рецензенти: Голембо В.А., канд. техн. наук, доцент каф. ЕОМ Різник О.Я., канд. техн. наук, доцент каф. ІТВС 3 Мета роботи. Ознайомитися та набути практичних навичок роботи з засобами, що генерують різноманітні елементи веб-сторінки: HTML та CSS структури веб-сторінок, іконки, фони, банери, логотипи тощо. Даними он-лайн програмами можуть користуватися веб- розробники різного рівня фаховості. Онлайн редактори і генератори Для того, щоб розробник відчував себе максимально комфортно при розробці нового проекту, окрім робочого місця і персонального комп'ютера йому необхідно мати певний набір програмного забезпечення, базовий інструментарій, без якого розробнику сайту просто не обійтися. Розробнику-початківцю важко зорієнтуватися у всьому різноманітті найменувань існуючих програм, і навіть в списку застосувань, мінімально необхідних для роботи. Нижче запропоновано мінімальний перелік засобів, які повинні мати розробники в своєму розпорядженні перед тим, як братися за розробку Інтернет проекту. Дані програми розраховані на використання під управлінням операційної системи Windows. Для повноцінної роботи веб-дизайнеру необхідно: 1. HTML-редактор, рекомендується Adobe DreamWeaver. 2. Графічні редактори: o Редактор растрової графіки та GIF-анімації, рекомендується Adobe Photoshop. o Редактор для створення анімованої графіки, рекомендується програма Adobe Flash. Ці редактори розроблено професійними компаніями і їх використання є платним, що не завжди є прийнятним для розробників-початківців. В цьому випадку, популярною альтернативою є безкоштовні онлайн редактори, які, можливо, і мають меншу функціональність, але є цілком придатними для роботи над веб-проектом. Переваги онлайн редакторів: 1. Не потрібно встановлювати на комп'ютер дороге ліцензоване програмне забезпечення, всі програми працюють у вікні браузера. 2. Зазвичай, немає проблеми сумісності між програмою і операційною системою на комп'ютері користувача. 3. Немає необхідності відслідковувати оновлення, онлайн-сервіси переважно оновлюються автоматично і користувач завжди працює з актуальною версією програми. 4. Оnline-сервіси не прив'язані до конкретного комп'ютера і є доступними завжди та в любому місці, де є під’єднання до Інтернету. 4 Графічний редактор Pixlr Pixlr є безкоштовним сервісом для створення і редагування зображень. Завдяки швидкості, простоти і багатофункціональності, даний веб-сервіс є популярним онлайновим редактором зображень у світі (рис. 1.). Рис.1. Стартове вікно редактора Pixlr Даний сервіс створено для непрофесіоналів та професійних користувачів, що бажають редагувати зображення в браузері, а не встановлювати на комп'ютер спеціальні програми з редагування зображень. Для зручності роботи з сервісом можна встановити розширення від Pixlr в браузери Firefox і Chrome. Також, можна інтегрувати Pixlr в свій сайт, що дозволяє користувачам сайтів отримувати доступ до Pixlr для редагування зображень. Pixlr має мінімально-необхідний набір інструментів, фільтрів і ефектів для швидкого редагування невеликих зображень, є підтримка шарів і прозорості. Pixlr є простим у використанні, а також значно легшим і дешевшим, ніж Photoshop. http://pixlr.com/ Компанія розробник http://pixlr.com/editor/ Онлайн редактор Pixlr Editor http://pixlr.com/app/ Флеш-версія Pixlr Editor 5 Сервіси для створення скріншотів Часто розробнику, як приклад, потрібна картинка зовнішнього вигляду певної веб-сторінки (скріншот), щоб згодом цей приклад був в бібліотеці розробника. Як відомо користувачам ОС Windows, при натисканні клавіші «Print Screen» в буфер обміну копіюється зображення екрану. Якщо при цьому натиснути і утримувати клавішу «Alt», в буфер обміну запишеться зображення активного вікна. В ОС Vista i Windows 7 з'явилася нова комбінація клавіш - Win + PrtScr. По натискання цієї комбінації в папці «Pictures» автоматично створюється папка «Screenshots» і туди записується знімки всіх екранів у вигляді png-файлів. Програма Snipping Tools, що з'явилася в Windows 7 і присутня в поставці Windows 8, однак з її допомогою можна зробити скріншот тільки десктоп-додатків. Для створення скріншотів веб-сторінок існує достатня кількість безкоштовних онлайн сервісів, які є легкими у використанні і мають нескладні функції налаштування (рис. 2). Ctrlq.org S-shot.ru Thumbalizr.com Рис. 2. Головне вікно сервісу http://ctrlq.org 6 Генератори структури HTML-сторінки Зазвичай, процес створення сайту починається зі створення макету сторінки. Макет дозволяє створити цілісну картину елементів сторінки, єдність та відчуття неподільного образного ряду. Веб-сторінка фактично розглядається як набір прямокутних блоків, які складаються в певному порядку. Завдання макетування полягає у гармонійному розташуванні різноманітних текстових та графічних блоків майбутньої сторінки (рис.3). В верхній частині сторінки (шапка, хедер, header) містяться: Логотип. Заголовок. Слоган. Телефон. Вибір мовної версії. Меню навігації (по сайту). В середній (основній) частині сторінки: Меню навігації по тематичних розділах сайту. Основна інформація. Реклама, банери. В нижній частині сторінки (підвал, футер, footer): Додаткове меню навігації (по сайту, по розділах сайту). Копірайти. Адреси, телефони. Лічильники і банери. Рис. 3. Розподіл інформації в стандартному макеті веб-сторінки Макет впорядковує структуру сторінки і є основою для верстки HTML-шаблону. Рис. 4. Типова структура сторінки для кодування HTML4 7 Рис. 5. Типова структура сторінки для кодування HTML5 Для спрощення створення стандартної структури сторінки великим попитом користуються генератори шаблонів. Сервіси є корисними для розробників, які мають певні навички роботи з технологіями HTML і CSS, але створення базової структури сторінки (що складається з таких елементів, як "шапка", колонка з контентом, бічні колонки (сайдбар) і "підвал") викликає певні труднощі. CssTemplater.com http://csstemplater.com/ Генератор HTML та CSS шаблонів (макетів) - це онлайн-сервіс, який генерує архів, що містить 2 файли: HTML і CSS, що мають базову розмітку (каркас) для майбутнього сайту. Рис. 6. Генератор макетів веб-сторінки CssTemplater.com 8 В генераторі (рис. 6) є можливість вибору версій HTML і CSS, тип обнуління стилів, що задані за замовченням, вибір ширини та позиціонування сторінки. У всіх макетах використовується тільки блокова (DIV) верстка. Макети, що пропонує Генератор HTML та CSS шаблонів, є протестованими і коректно відображаються в сучасних браузерах. CSS Layout Generator http://csscreator.com/version2/pagelayout.php Генератор CSS Layout Generator (рис. 7) підтримує теги HTML5, і надає можливості обрати розташування, розміри і кольори блоків. На форумі сайту обговорюються важливі теми і можливості реалізації різних елементів сторінки. Рис. 7. Генератор макетів веб-сторінки CSS Layout Generator CSS3 генератори Часто веб-розробники мають прописувати різні CSS стилі для блоків, кнопок, таблиць. Запам'ятати різноманіття властивостей сучасної версії CSS3 доволі складно, до того ж з врахуванням того, що іноді різні браузери вимагають власних конструкцій. Для економії часу або у разі недостатнього досвіду, можна скористатися онлайн генераторами CSS3. Ці інструменти дозволяють отримати CSS3 код, після наочного онлайн налаштування зовнішнього вигляду елемента. 9 Рис. 8. Генератор стилів CSS 3.0 Maker http://www.cssportal.com/ CSS Portal http:/css3maker.com/ CSS 3.0 Maker http:/www.css3generator.com/ CSS3 Generator http:/westciv.com/tools/gradients/ Westciv CSS3 Sandbox http:/css3.mikeplate.com/ CSS3 Playground http:/www.css3.me/ CSS3.me http:/css3button.net/ CSS3 Button Generator Редактор анімацій HTML5Maker.com http://html5maker.com/ HTML5 Maker - це Інтернет-сервіс для створення інтерактивного контенту з використанням HTML, HTML5, CSS і JavaScript. Він простий у використанні, надає можливості для створення анімацій, презентацій та слайд-шоу, а також можливості для розміщення проектів на хмарних серверах (рис. 9). HTML5 Maker ідеально підходить для користувачів любого рівня підготовки: досвідченого веб-дизайнера або новичка у веб-анімації. Для того, щоб почати працювати з HTML5Maker потрібно зареєструватися. При створенні аккаунту, користувач може зберегти свою роботу на сервері і повернутися до неї для внесення змін в будь-який час. Також, можна створювати анімацію і без реєстрації. Мультимедійний контент, який створено в HTML5 коді може бути інтегрований в код сторінки або завантажений у вигляді архіву для подальшого використання. 10 Рис. 9. Редактор анімацій HTML5Maker.com Редактор банерів Google Web Designer http://www.google.com/webdesigner/ Компанія Google виклала у вільний доступ програму Google Web Designer (бета): HTML- редактор коду з вбудованим графічним редактором для створення рекламних банерів (рис. 10). Редактор орієнтовано на адаптивний дизайн, який забезпечує доцільний вигляд сторінки на екранах різного розміру. Рис. 10. Редактор банерів Google Web Designer Створення банерів - одна з ключових функцій редактора. Підтримуються шаблони зі всіма стандартними форматами і розмірами AdMob і DoubleClick. Програма працює під Windows 7 11 або 8, Max OX 10.7 і більш старших версій. Підтримується робота і в графічному режимі, і в текстовому редакторі коду. Можна навіть створювати графічні 3D-ефекти, не набравши жодного рядка CSS3. У «просунутому» режимі (Advanced mode) зручно робити більш складні анімовані банери, з різними ефектами. HTML редактори Для написання коду веб-сторінок використовують спеціалізовані HTML-редактори, які різняться за способом створення коду: текстові та візуальні. Візуальні HTML-редактори Для розробника початківця самим кращим варіантом буде застосування візуальних HTML- редакторів. Вони лояльно відносяться до незнання мови HTML і сприяють її вивченню, полегшують процес створення сайту і надають можливість миттєвого перегляду результату дій. Визнаним лідером серед візуальних HTML-редакторів є Adobe Dreamweaver, завдяки дружньому інтерфейсу, генерації мінімально надлишкового коду, автоматичній генерації скриптів і багатьох зручностей. Втім, в якій програмі створювати сайт, вирішує розробник: можна скористатися безкоштовними офлайн та онлайн програмами. Візуальні редактори сприяють вивченню мови HTML. Достатньо виділити певний елемент на сторінці (графічний елемент, текст, таблицю) і перемкнутися на вікно з кодом, там буде підсвічено частину коду, що відповідає цьому елементу. Певні незрозумілі моменти можна з'ясувати у підручнику. З іншого боку, результат написаного коду буде відображено як візуальний елемент сторінки. Визуальний (WYSIWYG) online HTML-редактор http://www.vwhost.org/editor Редактор Vwhost.org надає можливість реалізовувати багато функцій, наприклад, підбір розміру шрифту, розташування різних елементів на сторінці (графіка, меню навігації тощо) без особливих зусиль з боку розробника. Відповідно до дій розробника у вікні візуального редагування, програма автоматично генерує HTML-код. Іноді код може бути не таким якісним чи надлишковим, ніж у разі написання людиною. Тому, в процесі створення сайту бажано регулярно переглядати код, що генерується програмою, на предмет його коректності. 12 Рис. 11. Візуальний online HTML-редактор Vwhost.org Текстові HTML-редактори Створення сайту в текстових редакторах є доцільним, якщо розробник знайомий з мовою HTML і володіє нею на належному рівні. Є достатньо велика кількість текстових HTML- редакторів, що використовуються розробниками різного рівня фаховості, втім, написати код можна і в звичайному Блокноті, який є на кожному комп'ютері. До позитивних особливостей текстових редакторів потрібно віднести те, що розробник власноруч пише код всіх сторінок майбутнього сайту. Звичайно, в багатьох текстових редакторах є і підсвічування синтаксису, і уставляння стандартних фрагментів коду, і багато інших корисних функцій, але редактор не додасть жодного рядка без відома розробника, на відміну від візуальних редакторів. Тому, код сайту буде зрозумілим і позбавленим надлишковості. Розробник точно буде знати призначення того чи іншого фрагмента HTML- коду і за потреби, може легко внести зміни. Недоліки текстових HTML-редакторів: Відсутність можливості бачити результат безпосередньо під час написання коду сторінки. Для цього потрібно відкривати браузер і в ньому дивитися вигляд сайту на даному етапі. Обов'язкове знання мови HTML. Без попереднього вивчення HTML працювати буде врай складно. Тому, потрібно придбати підручник з мови HTML і лише після його прочитання приступати до створення сайту в текстовому редакторі. 13 Notepad++ http://notepad-plus-plus.org/ Notepad++ це безкоштовний редактор текстових файлів з підтримкою синтаксису великої кількості мов програмування (рис.12). Рис.12. Текстовий редактор Notepad++ Програма має широкий набір опцій і відрізняється мінімальним споживанням ресурсів процесора. Користувач може самостійно визначити синтаксис мови програмування. Є можливість налаштувати режим підсвічування. Доступно виділення кольором директив та операторів мови програмування. Серед корисних опцій Notepad++ - опція підсвічування тексту і можливість згортання блоків, згідно синтаксису мови програмування. Notepad++ забезпечує можливість одночасного перегляду та редагування кількох документів. Можна переглядати та редагувати в двох вікнах відображення один документ в різних місцях. Зміна вмісту документа в одному вікні перегляду буде автоматично внесено в друге вікно перегляду. Aptana Studio http://www.aptana.com/ Aptana Studio - кроссплатформенне, вільне, інтегроване середовище розробки додатків (IDE) c відкритим вихідним кодом для створення динамічних веб-додатків. Містить в собі такі функції як автодоповнення конструкцій для коду JavaScript, HTML, і CSS, виділення кольором JavaScript, HTML і CSS коду, попередження про помилки і можливість для налаштування і розширення користувацького інтерфейсу (рис.13). За допомогою додаткових плагінів Aptana Studio підтримує розробку для наступних мов і платформ: Ruby on Rails, PHP, Python, Adobe Air і Apple iPhone. Окрім самостійних версій для Windows NT, Mac OS і Linux, Aptana доступна в якості плагіна для платформи Eclipse. 14 Рис. 13. Середовище розробки додатків Aptana Studio Порядок роботи 1. Ознайомитися з наданими графічними редакторами. Створити певний елемент майбутнього сайту - логотип, банер, фотоколаж. 2. Зробити скріншот сторінки, яка містить цікаві елементи чи дизайнерське рішення, які можна взяти за зразок. 3. За допомогою генератора структури створити початковий макет сторінки. Ознайомитися із згенерованими тегами та стилями. Внести власні зміни щодо розмірів, кольорів, наповнення. 4. За допомогою HTML-редактора поставити створені графічні елементи у відповідні місця сторінки. Зміст звіту 1. Назва та мета виконання лабораторної роботи. 2. Скріншоти послідовності виконаних робіт з коротким описом. 3. У висновку оцінити зручність використання та можливості редакторів. Використані джерела 1. Найкращі он-лайн HTML-редактори в режимі реального часу http://www.coolwebmasters.com/tools/1202-best-online-real-time-html-editors.html 2. 10 кращих WYSIWYG-редакторів тексту и HTML для ваших проектів http://www.coolwebmasters.com/codes-and-scripts/691-10-best-wysiwyg-text-and-html- 15 editors.html 3. Кращі безкоштовні HTML-редактори для ОС Linux http://www.coolwebmasters.com/tools/2257-free-linux-html-editors.html 4. 20 професійний безкоштовних онлайн редакторів зображень http://www.coolwebmasters.com/web-applications/511-online-professional-image-editors- and-drawing-applications.html 5. 15 Онлайн редакторів зображень http://www.lookatme.ru/flow/posts/internet/60314-20- onlayn-redaktorov-izobrazheniya 16