- •Тема 1. Теорія веб-програмування
- •1.Загальне поняття про веб-програмування
- •2. Історія
- •1971-1989 Рік – перший обмін повідомленнями.
- •1995-1996 Рр. Мова програмування JavaScript. Каскадна таблиця стилів. Flash.
- •2000 Рік (травень) – реліз php4.
- •2000 Рік (грудень) – w3c та JavaScript.
- •2005 Рік – упровадження технології web 2.0.
- •3. Засоби веб-програмування
- •4. Система керування вмістом
- •Тема 2. Мова гіпертекстової розмітки html
- •1. Основні поняття мови html.
- •2. Історія розвитку html.
- •3. Розмітка
- •4. Елементи html-документа
- •5. Редактори html-документів
- •Wysiwyg-редактори
- •Редактори, що працюють з вихідним кодом
- •Тема 3. Система управління вмістом Joomla
- •Складові cms-системи
- •2. Системні вимоги до встановлення cms Joomla
- •3. Інсталяція cms Joomla
- •5. Адміністрування cms Joomla
- •Тема 4. Проектування сайтів
- •2. Класифікація web-сайтів (за призначенням)
- •2.1. Класифікація за призначенням
- •2.2 Класифікація сайтів за технологіями, що використовуються
- •Тема 5. Структура процесу розробки web-сайтів та web-додатків
- •1 Структура процесу розробки
- •2 Технічне завдання на розробку
- •2.1. Етапи та терміни створення сайту:
- •Структура сайту інституту
- •Наукові школи
- •Центри та лабораторії
- •Напрями наукових досліджень
- •Конференції та семінари
- •Видавнича діяльність
- •Контакти Тема 6. Ергономічні обмеження та рекомендації при web–дизайні
- •1. Обмеження по кількості елементів керування
- •2 Обмеження по розташуванню елементів керування
- •3. Обмеження по інформаційному наповненню
- •4. Графіка та текст.
- •5. Часові обмеження
- •1. Психогенний вплив
- •2. Колір при Web-дизайні
- •Тема 7. Програмування мовою html 5
- •П'ять речей, які треба знати про html5
- •2. Вам не треба відкидати наявне
- •3. Легко почати
- •4. Це вже працює
- •Перевірка технологій html5
- •10 Порад для створення html5-шаблонів
- •Можливі експерименти з html5
- •Переваги табличної верстки
- •4 Основних недоліка табличної верстки
- •Оптимізація html коду
- •Практичні завдання Розділ і. Лабораторна робота №1. Розробка структури сайту
- •Хід роботи
- •Визначення мети створення сайту та його тематики.
- •2. Визначення структури сайту
- •3. Визначення ключових слів
- •4. Добір доменного імені сайту.
- •Лабораторна робота №2. Основи використання дескрипторів мови html
- •Хід роботи
- •Теги форматування
- •Атрибут тега ul type відповідає за вигляд маркеру:
- •Встановлення кольору фону
- •Лабораторна робота №3. Створення веб-сторінки мовою html.
- •Хід роботи
- •Лабораторна робота №4. Робота з таблицями у html.
- •Хід роботи
- •Елементи таблиці
- •Атрибути елемента table
- •Атрибути елементів рядків і стовпців
- •Колір у таблицях
- •Об'єднання комірок таблиці
- •Контрольні запитання
- •Лабораторна робота №5. Використання зображень та посилань на веб-сторінці.
- •Теоретичні відомості
- •Зовнішні посиланн
- •Внутрішні посилання
- •Завдання: Створити галерею учнів 9 класів.
- •Питання для самоконтролю
- •Лабораторна робота №6. Створення персонального сайту за допомогою системи ucoz
- •Хід роботи
- •(Для завершення реєстрації перейти за цим посиланням:)
- •Індивідуальне завдання
- •Лабораторна робота №7. Налагодження модулів персонального сайту в системі ucoz
- •Хід роботи
- •Індивідуальні завдання
- •Розділ іі.(практичне застосування) Комплекс практичних робіт по створенню веб-сайту за допомогою системи управління контентом «WordPress»
- •Практична робота №1 Тема: Встановлення локального сервера. Встановлення україномовної версії «WordPress».
- •Теоретичні відомості
- •Тема: Налаштування сайту та його адміністративної панелі.
- •Тема: Публікації і сторінки.
- •Тема: Навігація.
- •Тема: Теми та дизайн сайту.
- •Завдання
- •Контрольні запитання
- •Словник термінів
- •Список використаних джерел
- •Навчальне видання
10 Порад для створення html5-шаблонів
Для того щоб створити хороший, якісний шаблон за допомогою HTML5, слід дотримуватися деяких правил і порад, про які й піде мова в цій статті.
1. У першу чергу важливо завжди створювати план створення сайту і всіх елементів його дизайну, перед тим як приступати до його розробки. Завдяки цьому Ви зможете заощадити чимало часу.
2. Після того, як Ви визначилися з концепцією сайту та його призначенням, то потрібно приступати до огляду наявного «матеріалу». А саме до різних доступним шаблонами та програмами, які зможуть Вам у нагоді і полегшити роботу.
3. Коли Ви приступите до роботи з дизайном, то не забувайте про підказки коду, в тому випадку якщо вони передбачені програмою. Що стосується роботи з тегами, то слід завжди уважно стежити за тим, щоб вони всі були закриті. В іншому випадку шаблон може відображатися не зовсім коректно.
4. Той факт, що коментування відіграє велику роль, всім чудово відомий. Якщо для Вас важливо, щоб у Вашому коді крім Вас могли розбиратися і інші люди, то одних слів може не вистачити. Тому можна використовувати скріншоти з пояснювальними підписами.
5. Коли Ви приступаєте до роботи з зображеннями, дуже важливо переконатися в тому, що Ви встановлюєте значення для атрибутів height і width, причому параметри самої картинки їм відповідають. Це відіграє велику роль, тому що якщо висота і ширина вказані вірно, то проблем з масштабуванням не повинно виникнути. Якщо ж встановлені значення більше, ніж розміри реального зображення, то буде відбуватися масштабування. У тому випадку, якщо воно не більше 20%, то це допустимо, в іншому випадку це призведе до спотворення картинки.
6. При роботі з зображеннями необхідно використовувати тег alt. Це буде плюсом для подальшої оптимізації та просування сайту, простіше кажучи, SEO.
7. Що стосується відео, то у плеєра обов'язково повинні бути кнопки управління і користувач повинен мати можливість самостійно управляти переглядом.
8. Посилання на сайті повинні побут інформативними, в такому випадку це буде грати на руку SEO, а значить і просування сайту.
9. Кількість тегів div повинно бути мінімальним.
10. Ну і, звичайно ж, необхідно використовувати валідатор validator.w3.org, який буде перевіряти зовнішній вигляд Вашого сайту в різних браузерах.
Можливі експерименти з html5
Сам по собі HTML5 не можна вважати безпосередньо новим трендом, але прийдешній web-стандарт в 2013 буде сильно впливати на Webdesign. Все, що насправді виходить за межі HTML5 і буде в змозі дати однакові результати і на мобільному пристрої і на Desktop - все це буде робити ці технології цікавими для дизайнера.
Браузер ще краще буде справлятися з HTML5 і в 2013 ми побачимо в області вебдизайну багато несподіваних експериментів. Ці експерименти по-новому виміряють межі можливого, і на традиційних статичних сторінках можна буде побачити багато інтерактивного.
HTML5 буде і далі імплементований в браузери та системи контент -менеджменту, і все далі він буде відсувати межі можливого. Ці експерименти в новому році будуть всюди: інформація стане впізнаваною в повному розумінні цього слова - візуально.
Статичні елементи, звичайно, будуть присутні теж, але чому цікаву інформацію не уявити цікаво, анімаційно ? Прості Hover - ефекти будуть витіснені впізнаваними та живими інтерактивними або продовжені ними. Якщо на певний Triggerpunkt ми вкажемо мишкою, то замість простих Tooltips ми побачимо комплексні вікна .
Окремо потрібно зауважити Parallax Scrolling, як частина еволюції HTML5/CSS3. Одна з цікавих форм представлення інформації називається Parallax Scrolling. При цьому мається на увазі візуальний ефект, який проводиться через два один над одним лежачих рівня, що рухаються з різною швидкістю. Цей цікавий ефект застосовується і сьогодні, але в новому році тенденція буде зростати.
