Онлайн редактори і генератори

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

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

Для повноцінної роботи веб-дизайнеру необхідно:

• HTML-редактор, рекомендується Adobe DreamWeaver.
• Графічні редактори:
  • Редактор растрової графіки та GIF-анімації, рекомендується Adobe Photoshop.
  • Редактор для створення анімованої графіки, рекомендується програма Adobe Flash.

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

Переваги онлайн редакторів:

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

Онлайн редактори для роботи HTML-кодом

Генератор структури HTML-сторінки CssTemplater.com

Генератор HTML та CSS шаблонів (макетів) - це онлайн web 2.0 сервіс, який генерує архів, що містить 2 файли: HTML і CSS, які мають базову розмітку (каркас) для майбутнього сайту.

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

У всіх макетах використовується тільки блокова (DIV'овая) верстка. Макети, пропоновані Генератором HTML та CSS шаблонів, протестовані і коректно відображаються в сучасних браузерах.

Генератор структури HTML-сторінки CSS Layout Generator

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

Типова структура сторінки для HTML4

Типова структура сторінки для HTML5

CSS3 генератори

Часто доводиться прописувати різні CSS3 стилі для всяких блоків, кнопок, таблиць. Запам'ятати всі ці властивості не так вже й складно, навіть з врахуванням того, що для різних браузерів доводиться писати свій варіант.

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

HTML5-редактор Google Web Designer

Компанія Google виклала у вільний доступ програму Google Web Designer (бета): HTML-редактор коду з вбудованим графічним редактором для створення рекламних банерів. Редактор орієнтованj на адаптивний дизайн, щоб сайти добре виглядали на екранах різного розміру.

Створення банерів - одна з ключових функцій редактора. Підтримуються шаблони зі всіма стандартними форматами і розмірами AdMob і DoubleClick. Програма працює під Windows 7 або 8, Max OX 10.7 і більш старших версій.

Підтримується робота і в графічному режимі, і в текстовому редакторі коду. Можна навіть створювати графічні 3D-ефекти, не набравши жодного рядка CSS3.

У «просунутому» режимі (Advanced mode) зручно робити більш складні анімовані банери, з різними ефектами.

Редактор анімацій HTML5Maker.com

HTML5 Maker це Інтернет-сервіс інструмент для створення анімації чи інтерактивного контенту з використанням HTML, HTML5, CSS і JavaScript. Він простий у використанні, надає можливості для створення анімацій, презентацій та слайд-шоу, а також можливості для розміщення проектів на хмарі.

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

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

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

Редактори для роботи з графікою

Колекції безкоштовних шаблонів

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

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

Графічний редактор Pixlr

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

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

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

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

Сервіси для створення скріншотів

Часто розробнику як приклад потрібна картинка зовнішнього вигляду певної веб-сторінки. І краще за все зробити знимок потрібної сторінки, щоб згодом цей приклад був в бібліотеці розробника. Як відомо користувачам ОС Windows, при натисканні клавіші «Print Screen» в буфер обміну копіюється зображення екрану. Якщо при цьому натиснути і утримувати клавішу «Alt», в буфер обміну запишеться тільки зображення активного вікна.

В ОС Vista i Windows 7 з'явилася нова комбінація клавіш - Win + PrtScr. По натискання цієї комбінації в папці «Pictures» автоматично створюється папка «Screenshots» (якщо така папка не існувала) і туди записується знімок всіх екранів у вигляді png-файлу. Програма Snipping Tools, що з'явилася в Windows 7, також присутня і в поставці Windows 8, однак з її допомогою можна зробити скріншот тільки десктоп-додатків.

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

Ctrlq.org

S-shot.ru

Інструменти для зменшення розмеру файлів jpeg, png, gif и svg

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

Стиснення jpeg і png також може виконуватися в режимі lossless. У робочих механізмах Compressor.io використовуються інструменти pngquant і JpegOptim. Відмінність полягає в тому, що додаток в автоматичному режимі вибирає найкращі методи стиснення.

Як тільки файл буде зменшено в розмірах, його можна завантажити в Google Drive, Dropbox або на твердий диск. Є можливість порівняти дві половини зображення. На сьогоднішній день зображення можна завантажувати лише по черзі, що вимагає додаткового часу. Більш того, завантаження обмежено 10мб на файл.

TinyPNG надає можливість швидко конвертувати повноколірні PNG24 в індексні PNG8 із збереженням альфа-прозорості. Сайт працює на відомих open source утілітах. Розробники TinyPNG використовують для квантування утиліти pngquant, optiPNG і advpng. Отримані файли коректно відображаються у всіх браузерах, прозорість PNG зберігається навіть в IE6.

JPEGmini - це програма, яка зменшує розмір файлу фотографії до 5 разів, при цьому зберігаючи їх оригінальні роздільність, якість і формат JPEG. Особливості програми «JPEGmini»: Підтримка фотографій в будь-якій роздільності до 28 мегапікселів; Зручний перегляд превью; Лічильник звільненого місця; Підтримка нових MacBook Pro з Retina дисплеєм; Інтеграція з Facebook і Twitter.

UI kits. Набори для користувацького інтерфейсу

UI Kits (User Interface Kits – Набори для користувацького інтерфейсу) - це файл (або кілька файлів), який містить у собі елементи інтерфейсу, витримані в єдиному стилі.

Переваги UI Kits для дизайнера

1. Це пришвидшення розробки інтерфейсу. Знайти потрібний набір, вставити в потрібне місце і готово.
2. Хороші набори зроблено «прошарками», тобто можна розібратися у ефектах чи стилях і значно підняти свій професійний рівень.
3. Ці набори можуть надихати на власний дизайн.

UI Kits як «фреймворк»

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

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

Використання фреймворків в розробці і UI kits в дизайні - як раз той випадок, коли не потрібно винаходити велосипед. В рамках авторських прав, звичайно.

Генератори іконок FavIcon

Favicon - це невелика картинка (іконка) у спеціальному форматі ICO, яка для відповідного сайту відображається на вкладці браузера, в адресному рядку браузера, в "Вибраному" або в "Закладка", в сторінці видачі результатів пошукової системи замість стандартної іконки, загальною для всіх. Основний формат картинки для favicon.ico - 16х16 пікселів, 256 кольорів або TrueColor.

Для створення іконки можна використати кілька підходів:

Створити картинку в форматі JPG,PNG,GIF і конвертувати у формат ICO.

http://www.icoconverter.com/

http://converticon.com/

http://www.convertico.com/

Скористатися онлайн редактором створення іконок.

http://www.favicongenerator.com/

http://favicon.ru/

http://www.favicon.cc/

Завантажити готову іконку, які поширюються безкоштовно

http://www.iconsearch.ru/

http://www.freefavicon.com/

http://faviconka.ru/

Генератори фонів

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

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

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

Щоб браузери показували іконку, її потрібно покласти в кореневу чи іншу папку сайту і додати в секцію <head> одне з двох посилань:

• <link rel="icon" href="/favicon.ico" type="image/x-icon">
• <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

Генератори логотипів, кнопок, стікерів

Генератори логотипів, кнопок, шрифтів

http://cooltext.com/

http://creatr.cc/creatr/

http://www.simwebsol.com/ImageTool/

Генератор індикатора завантаження

http://preloaders.net/ru

http://onlinegenerator.net/

http://ajaxload.info/

loadinfo.net

http://www.webscriptlab.com/

Десктопні HTML редактори

Програми для створення сайтів є двох категорій - текстові та візуальні HTML-редактори.

Текстові HTML-редактори

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

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

Недоліки у текстових html-редакторів:

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

Обов'язкове знання мови HTML. Без попереднього вивчення HTML працювати буде врай складно. Тому, потрібно придбати підручник з мови HTML і лише після його прочитання приступати до створення сайту в текстовому редакторі.

Текстовий html-редактор Notepad++

Notepad + + це безкоштовний редактор текстових файлів з підтримкою синтаксису великої кількості мов програмування.

Програма має широкий набір опцій і відрізняється мінімальним споживанням ресурсів процесора. Серед просунутих опцій Notepad + + - опція підсвічування тексту і можливість згортання блоків, згідно синтаксису мови програмування. Користувач може самостійно визначити синтаксис мови програмування. Є можливість налаштувати режим підсвічування. Доступно виділення кольором директив та операторів мови програмування.

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

Текстовий html-редактор Aptana Studio

Aptana Studio - кроссплатформенне, вільне, інтегроване середовище розробки додатків (IDE) c відкритим вихідним кодом для створення динамічних веб-додатків. Містить в собі такі функції як автодоповнення конструкцій для коду JavaScript, HTML, і CSS, виділення кольором JavaScript, HTML і CSS коду, попередження про помилки і можливість для налаштування і розширення користувальницького інтерфейсу.

За допомогою додаткових плагінів Aptana Studio також підтримує розробку для наступних мов і платформ: Ruby on Rails, PHP, Python, Adobe Air і Apple iPhone.

Крім самостійних версій для Windows NT, Mac OS і Linux, Aptana доступна в якості плагіна для платформи Eclipse.

Візуальні HTML-редактори

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

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

Визуальний (WYSIWYG) HTML-редакторAdobe Dreamweaver

Програмне забезпечення Adobe Dreamweaver - потужне програмне забезпечення для веб-дизайну і створення візуальних проектів. Програма Adobe Dreamweaver допомагає розробляти реалістичну середу для інтерактивного перегляду, управляти проектами на рівні пікселів або за допомогою спеціально створеного коду. Вбудовані підказки в Adobe Dreamweaver дозволяють більш точно створювати код в HTML, JavaScript, Ajax, Spry, jQuery і Prototype.

Adobe Dreamweaver CS6 пропонує «гумові» макети і панель «багатоекранної перегляд» в цілях одночасного створення проектів для телефонів, планшетних пристроїв і комп'ютерів. Dreamweaver повністю підтримує HTML5, а це дає нові можливості у використанні онлайн-відео, анімації, що, у свою чергу, додасть унікальність будь-якому сайту. До програми приєднано jQuery, отже користувач з легкістю може використовувати Java-скрипти при створенні веб-сторінки.

Для початківців Dreamweaver - просто знахідка! При створенні перших сайтів він здатний значно полегшити навчання. Є сервіс підказок і пристойну кількість шаблонів, елементів оформлення, скриптів - за допомогою всього цього легко, як кажуть, «набити руку». Дуже прості сторінки не заберуть у користувача багато часу і сил.

Досвідчені веб-розробники, використовуючи Dreamweaver, мають значно більше можливостей. Розширена підтримка jQuery Mobile і Adobe PhoneGap дозволяє розробляти сторінки під різні операційні системи (iOS і Android) і додатки. Є унікальна панель «багатоекранного перегляду», за допомогою якої можливо оптимізувати сайт під різні пристрої, не залежно від розмірів їх екранів (аж до мобільних телефонів) і при цьому сайт буде виглядати так, як потрібно.

Dreamweaver підтримує відомі движки, такі як WordPress і Joomla. Зміни можна вносити безпосередньо в код сайту, що покращує оптимізацію.

Порядок роботи

1. Ознайомитися з наданими графічними редакторами. Створити ескіз та певний елемент майбутнього сайту - логотип, банер, фотоколаж.
2. Зробити скріншот сторінки, яка містить цікаві елементи чи дизайнерське рішення, які можна взяти за зразок.
3. За допомогою генератора структури створити початковий макет сторінки. Ознайомитися із згенерованими тегами та стилями. Внести власні зміни щодо розмірів, кольорів, наповнення.
4. За допомогою HTML-редактора поставити створені графічні елементи у відповідні місця сторінки.
5. Завантажити створену сторінку на зареєстрований хостинг.

Зміст звіту

1. Назва та мета виконання лабораторної роботи.
2. Скріншоти виконаних робіт.
3. Зазначити Інтернет-адресу та скріншот створеної тестової сторінки.
4. У висновку оцінити зручність використання та можливості редакторів.