Веб-технології та веб-дизайн


Учбовий курс для студентів кафедри систем автоматизованого проектування.
Національний університет "Львівська політехніка"

Розклад занять

Мета учбового курсу

Практичне ознайомлення з принципами створення веб-сайтів, можливостями сучасних веб-технологій і сервісів!


Веб-технології поступово досягли до такого рівня, що у розробників з'явилася можливість створювати веб-вміст нового покоління. Сьогоднішній Інтернет є результатом безперервних зусиль відкритої веб-спільноти, яка допомагає розробляти такі технології, як HTML5, CSS3 та WebGL, і домагається їх підтримки всіма браузерами.

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

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

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

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

Грамотний веб-дизайнер повинен бути знайомий з останніми веб-технологіями і мати відповідні художні якості.

Оцінювання знань


Лабораторні (20 балів)

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

Сайт (20 балів)

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

Екзамен (60 балів)

На екзамен виносяться тестові питання з лекційного курсу (50 балів). Описові питання (10 балів) можуть бути замінені доповідями, які презентовано під час семестру.

Проміжний контроль

Двічі на семестр проводяться контрольні роботи. Доповіді-презентації з новітніх Веб та Інтернет технологій (2014-2015 рр.). Доповідь презентується під час навчання.

Веб дизайн

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


Еволюція веб-технологій

Етапи створення сайту

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


Проектування

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

Розробка дизайну

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

Макетування сторінок

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

Програмування сервісів

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

Публікація сайту, наповнення інформацією

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

Супровід та просування проекту

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

Корисні ресурси

Довідники, підручники
HTML, CSS, JavaScript и jQuery – доступно і детально про сучасні веб-технології
Принципи роботи сучасних веб-браузерів
Марк Пилгрим. Погружение в HTML5
Оригінал
Переклад
Обзор лучших сайтов с применением HTML5
Секретні Двері
Інтерактивний графічний редактор
Створення персонального кліпу
Фільми про історію Інтернет
Загрузка: Подлинная история интернета. Битва браузеров / Download: The True Story Of The Internet. Browser war, 2008
Загрузка: Подлинная история интернета. Мыльный пузырь / Download: The True Story Of The Internet. Bubble, 2008
Загрузка: Подлинная история интернета. Власть народу / Download: The True Story Of The Internet. People Power, 2008
Загрузка: Подлинная история интернета. Google / Download: The True Story Of The Internet. Google, 2008
Настоящая история интернета. Поисковые системы / The True Story of the Internet - Search, 2008
Взгляд изнутри: Google / Inside. Google, 2010

Пираты Силиконовой Долины / Pirates of Silicon Valley, 1999
Джобс: Империя соблазна / jOBS, 2013
Социальные сети / The Social Network, 2010
Кадры / The Internship, 2013

Викладач Юрчак Ірина Юріївна