Уеб системи и технологии

Анотация на курса

Интернетът е навлязъл трайно в живота на хората. Първоначалната идея на World Wide Web за представяне на статична информация вече е коренно различна. Към настоящият момент тази идея не е достатъчна, тъй като потребителите могат да комуникират помежду си, използват обекти и създават такива в реално време. Скоростта за предаване на информацията също е важен фактор, който трябва да бъде добре прецезиран. В настоящия курс ще се разглежда основите технологии за съвременния уеб. Освен това той обхваща изграждането и управлението на важни уеб базирани услуги, технологиите за програмиране в уеб, поддръжка, сигурност и управление на уеб системи. Разглеждат се историческото развитие на World Wide Web (WWW) и протоколите използвани за пренос на данни в мрежите. Курсът е своеобразно въведение в скриптовите езици HTML, XTHML, CSS и JavaScript. Той ще запознае студентите с принципите и уменията за създаване на уеб приложения и използването на бази от данни.

Курсът приключва с авторски разработки на самостоятелен курсов проект и тест.

Извънаудиторната заетост по дисциплината включва работа в библиотека, работа в Интернет и разработване на курсова задача.

Цели, задачи и очаквани резултати

Цел: Целта на изучаваната тематика е студентите да добият комплексна представа за съвременните уеб системи и технологии и възможностите на езиците HTML, DHTML и CSS.
Задачи:
1. Да се представят основните концепции и стандарти на съвременните уеб технологии.
2. Да се обяснят принципите при изграждане на уеб сайтове и приложения.
3. Да се разгледат актуалните среди за разработване на уеб сайтове и уеб приложения.
Очаквани резултати:
След завършване на курса се очаква студентите да могат:
1. Да познават съвременните технологии за изграждане на уеб приложения.
2. Да разбират изискванията и принципите при изграждане на уеб приложения.
3. Да познава и използва езика HTML.
4. Да познава и използва езика за оформяне на стилови шаблони CSS.
5. Да познава актуални среди и похвати за разработване в уеб.
6. Да умее да съставя спецификация за разработване, концептуален модел и да извърши цялостна разработка на уеб сайт.
7. Да умеят да използват бази от данни в уеб.


Семинарни и лабораторни занятия

1. Въведение в уеб технологиите.

Цели: Да се представят основните положения в съвременните уеб системи и технологии. Да се разгледат езиците за програмиране в уеб и езиците използвани за представяне на съдържание в уеб. Да се разгледат различни системи за управление на съдържанието в уеб. Да се разгледат технологиите за споделяне на мултимедийно съдържание. Да се представят езиците използвани са изграждането на статични и динамични уеб сайтове и уеб системи: HTML, CSS, JavaScript, ASP.Net, AJAX, PHP.

Резултати: Да се наясно с основната терминология свързана с уеб системите и технологиите използвани за изграждане на уеб системи. Да са запознати с инструментариума необходим за изграждане на уеб съдържание.

Задача 1. Да се изготви сравнителен доклад в рамките на 2-3 страници с формат А4 за поне две системи за управление на съдържанието в уеб, като се разглеждат следните критерии:
  • Производител;
  • Година на създаване;
  • Лиценз;
  • Гъвкавост;
  • Използвани езици;
  • Мнения на потребителите;
  • Достъпност.

2. Управление на съдържанието в уеб.

Цели на темата: Да се разгледат:
- Жизненият цикъл на един уеб сайт.
- Начини за публикуване на уеб съдържание.
- Видове уеб съдържание.
- Статични и динамично уеб съдържание.
- Системи за управление на уеб съдържание.
Цялата лекция може да бъде свалена от този линк.

Задача 1. Да се проектира концептуален модел на уеб сайт.

Задача 2. Да се проектират ескизи на три уеб страници: Начална, Информативна (със съдържание по избор на студента), За контакти.

Задача 3. Да се създаде статичен уеб сайт с помощта на Microsoft Word.

Задача 4. Да се разгледат възможностите на една система за управление на съдържанието в уеб.

Файлът с указанията за реализирането на тези задачи се намира на този линка.

3. Въведение в езика HTML. Структуриране на HTML документ.

Цели на темата:
- Да се разгледа историческото развитие на HTML.
- Да се посочат основните характеристики на езика.
- Да се представи конструкцията на HTML документа.
- Да се въведе основната терминология в изграждането на уеб страница с HTML.
- Да се посочат възможните текстови редактори и среди за разработване на уеб документи.

Очаквани резултати: Студентите да могат да създадат HTML документ, да разбират понятията таг, атрибут, свойство и да могат свободно да ги използват.

Цялата лекция може да бъде свалена от този линк

Задача 1. По време на лабораторните упражнения да се разработят три страници представящи основната конструкция на документите написани на HTML5, HTML 4.01 и XHTML5

Решение на задача 1. Подробно описание на изпълнението на тази задача се намира на следния линк.

4. Работа с каскадни стилови шаблони CSS. Начини на използване на CSS в HTML документи.

Цели на темата: Да се въведе и обясни терминологията свързана с каскадните стилови шаблони (Cascading Style Sheet). Да се изложат нововъведенията в последната версия на езика CSS. Да се опишат ползите и необходимостта от използване на стилови шаблони. Да се посочат различните начини за включването им към обикновените HTML документите и към различните уеб приложения.

Очаквани резултати: Студентите да могат да конструират и използват стилов шаблон по различен начин. Да са наясно с терминологията свързана с CSS.

Цялата лекция може да бъде свалена от този линк

Задача 1. По време на лабораторните занимания да се демонстрира използването на вградени, прикрепени и външи стилови шаблони. Както и да се демонстрира вграждането на стилов файл към друг стилов файл.

Решение на задача 1. Подробно описание на изпълнението на тази задача се намира на следния линк.
За успешното решаванена на задачата, може да се използват ресурсите от този линк.

5. Видове символи и тяхното форматиране. Структуриране и оформяне на текстове. Списъци.

Цели на темата: В тази тема ще се наблегне изцяло на начините за добавяне на текстови елементи към уеб страница. Поетапно се разглеждат заглавията, параграфите, редовете в текущия параграф, различните видове списъци и някои тагове за добавяне на специален текст, като адрес, електронен адрес, коментар, форматиран текст и цитат. За всички тях се разглежда различните начини за форматиране и CSS шаблоните, които могат да се прилагат.

Очаквани резултати: Студентите да умеят да използват различните тагове за добавяне на текстове към уеб страницата и свободно да използват подходящи стилови шаблони за тяхното добро представяне.

Цялата лекция може да бъде свалена от този линк

По време на лабораторните занятия да се реализират следните задачи:

Задача 1. Да се тества пример, свързан с демонстрация на начина на използване на различните тагове за работа с текст. Помощни материали за реализиране на това упражнеине, можете да намерите на този линк. Реализацията на тази задача е подробно описана в документа по-долу

Задача 2. Да се представи откъс от текста от романа за деца "Ян Бибиян" на Елин Пелин в уеб документ с име еx4.html, който да изглежда по начина показан в документа с упражненията по-долу. Всички стилови шаблони да бъдат отделени в отделен файл с име styleEx4.css.

Решения Подробно решение на задача 1 и указания за разработване на задача 2 има на следния линк.

6. Използване на мултимедийни обекти в HTML и форматиране с CSS. Проектиране на лого.

Цели на темата: Разглеждат се таговете за добавяне на мултимедийни обекти в уеб страниците. Представят се начините за използване на CSS шаблони към тях. Представяне на съвместимостта на мултимедийните обекти с различните видове уеб браузъри, проблемите, които възникват с тяхното използване и начините за тяхното разрешаване. Разглеждат се различните видове формати на мултимедийните обекти. Демонстрират се различни софтуерни продукти за редактиране и създаване на изображения, и различни колажи.

Очаквани резултати: Да са придобити умения за правилно използване на мултимедийни обекти в уеб документи.

Материали за темата: На този линк можете да намерите необходимата информация за таговете, свързина с използване на мултимедийни обекти в уеб и решението на първа задача от лабораторните занятия.

Задача 1. Да се разработи уеб документ, в който да се представят различните начини за визуализация на изображения, аудио и видео файлове. Уеб страницата де се нарече studyEx5.html и за нейното форматиране да се използва стиловия документ studyStyleEx5.css. Всички необходими файлове за реализирането на тази задача се намират във файла ex5_1.zip.
Html кода за представяне на лого написано на SVG, може да се свали от този линк.
Html кода за представяне на картата-изображение, може да се свали от този линк.

Задача 2. Да се разработи уеб документ, който да съдържа карта-изображение на България, на която да са отбелязани като горещи точки, следните университета: Югозападен-университет, Софийски университет, Пловдивски университет и Технически университет-Габрово. Освен това тук да се създаде авторско изображение, на софтуер по избор. То да бъде съхранено в следните формати png, jpg и gif. Така получените изображения да се добавят към страницата. Към същата страница да се вгради видео от YouTube или от vbox7.com. Страницата да се форматира подходящо и да има завършен вид (дизайн).

7. Създаване и оформление на таблици с HTML и CSS.

Цели на темата: Разглеждат се таговете свързани със създаването на таблица в HTML документ и шаблоните, които могат да бъдат използвани за форматирането й с CSS. Разглеждат се обединяване на клетки по редове и колони, прилагане на форматиране както върху редове, така и върху групи от колони. Изтъква се разликата на начина на създаване на таблица в HTML и в XHTML.

Очаквани резултати: Студентите да умеят да създават и форматират различни таблици в HTML, XHTML и CSS.

Задачи. Да се разработят уеб документи, описани в този документ.

8. Работа с контейнери. Позициониране на обекти. Подравняване на обекти.

Цели на темата: Да се представи тага <div>, <span> и <iframe> за създаване на уеб дизайн основан на контейнери. Използване на различни стилови шаблони за създаване на различни дизайни за един и същи html документ. Разглеждане на възможностите за подравняване на обекти в уеб страницата. Представяне на правилата в изграждане на дизайн на уеб сайт. Подбор на дизайн съобразно резолюцията на екрана.
Очаквани резултати: Студентите да могат да умеят да създават красив дизайн с подходящо подравняване на обекти.
Задачи. Да се разработят уеб документи, описани в този файл.
Всички необходими файлове за реализирането на първата задача се намират във файла image.zip.

9. Подбор на цветове. Цветови схеми. Шрифтове и типография. Текстури.

Цели на темата: Да се разгледа начина на представяне на цветовете в уеб пространството. Психология на цветовете. RGB или CMYK. Да се разгледат различните текстури и начина им на използване в съвременния уеб дизайн. Пропорция и дълбочина на цветовете и обектите. Светлини и сенки. Подбор на подходящи шрифтове за изграждане на уеб дизайн. Разстояние между букви, редове и думи. Представяне на специални стилови шаблони за изграждане на атрактивен уеб дизайн.
Очаквани резултати: Студентите да придобият умения за използването на подходящи цветове, шрифтове и текстури при изграждане на добър дизайн на уеб сайтове и приложения.
Задача 1.

Да се създаде страница с галерия от изображения. Дизайна на тази страница е показан на изгледа по долу.
Страницата е с име imageGallery.html, а стиловия файл за форматиране на съдържанието й е с име ssImageGallery.css. За създаването на страницата са необходими изображения, които могат да намерят във файла imagesWST8.zip.

Задача 2.

Създайте страница с ваш дизайн, като в нея трябва да има меню, заглавен пенл, панел с инфо за разработчика и добавете като основно съдържание на страницата галерията, която разработихте в първата задача. За помощен дизайн може да се използва файла от задача 1, упражнение 7.

За разработването на тези задачи, може да се използват описанията в този документ.

10. Създаване на уеб форми.

Цели на темата: Да се разгледат различните тагове и техните атрибути за създаване на форма в HTML и тяхното форматиране със стилови шаблони CSS. Да се разгледат различни примери за формуляри, използвани най-често в уеб системите. Разглеждане на методите Get и Post. Валидиране на потребителските данни.

Очаквани резултати: Студентите да могат да създават уеб формуляр.

Задачи.

Да се разработят примерни страници, демонстриращи използването на таговете за създаване на уеб форма.

Подробно описание на примерите и техния сорс-код, може да се намери на следния линк файл.

11. Хипервръзки. Карти на изображения. Котви. Менюта.

Цели на темата: Да се разгледа тага двойния таг за създава не на връзка към текущ документ или към друг документ. Да се представи бърз начин за създаване на карта на изображение, с помощта на софтуера Gimp. Да се обясни необходимостта от карти на изображения и тяхното приложение. Да се представи начин за изграждане на меню с помощта на HTML и CSS. Да се посочат предимствата и недостатъците на този тип меню.

Очаквани резултати: Да се добият умения за създаване на хипервръзки, карти на изображения, котви и менюта.

Задача 1.

Да се създаде уеб страница, в която се демонстрира използването на хиперлинкове.
Необходимите файлове се намират на този линк.

Задача 2.

Да се създаде уеб сайт, която използва вертикално меню и се състои от две страници. За организиране на уеб сайта е използван тага iframe.
Необходимите файлове се намират на този линк.

Задача 3.

Да се създаде уеб страница, в която се демонстрира всички знания получени до момента.
Необходимите файлове се намират на този линк.

Подробно описание на примерите и техния сорс-код, може да се намери на следния линк файл.

12. JavaScript и JQuery. XML.

Цели на темата: Да се представят основни елементи и начина им на използване на скриптовите езици JavaScript и JQuery, и използването им при изграждане на уеб страници и приложения.

Очаквани резултати: Студентите да умеят да използват готов код написан на JavaScript или JQuery при изграждане на уеб страници.

По време на лабораторните занятия ...

13. Създаване на уеб графика в браузър.

Цели на темата: Ще бъде представен начина на използване и създаване на уеб графики с помощта на SVG (Scalable Vector Graphics). Ще бъдат разгледани основните тагове и представени плюсовете и минусите спрямо чертането с JavaScript в уеб браузър.

Очаквани резултати: Студентите да умеят да създават и използват графики чертани с SVG.

По време на лабораторните занятия ...

14. Адаптивен уеб дизайн. Принципи при проектиране на уеб интерфейс.

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

Очаквани резултати: Студентите да са запознати с терминологията за адаптивен уеб дизайн. Да са наясно с принципите при проектиране на уеб интерфейс.

По време на лабораторните занятия ...

15. Уеб услуги, блогове и социални мрежи. Бази от данни в уеб.

Цели на темата: Да се представи архитектурата при изграждане на уеб приложения като социални мрежи и блогове. Да се разгледа идеологията използвана при изграждането на уеб услугите. Да се въведе основната терминология използвана в облачните мрежи и технологии.

Очаквани резултати: Студентите да са запознати с възможностите на съвременния уеб.

По време на лабораторните занятия ...

16. Семантичен уеб и метаданни.

Цели на темата: Да се представи начина на създаване на уеб съдържание, което е машинно четимо. Да се разгледат възможностите за създаване на речници, онтологии, и различни анотации, които подпомагат обработката на документите в уеб, с цел повишаване на възможностите за търсене в уеб. Да бъдат разгледани начините за машинно четене на анотирани метаданни и семантично смислени атрибути. Да бъдат представени основните правила и стандарти в семантичните уеб технологии. Да се разгледат начините за структуриране на данни.

Очаквани резултати: Студентите да са наясно с основната терминология, правила и концепции в семантичния уеб.

По време на лабораторните занятия ...


Важни дати
Защита на курсовите проекти: 11.01.2019 г.
Контролно за освобождаване от изпит: 18.01.2019 г.


Конспект

1. Въведение в уеб технологиите. [1, 2, 5, 6]
2. Въведение в езика HTML. Структуриране на HTML документ. [1, 3, 4, 5, 6, 7]
3. Работа с каскадни стилови шаблони CSS. Начини на използване на CSS в HTML документи. [3, 4, 5, 7, 10]
4. Видове символи и тяхното форматиране. Структуриране и оформяне на текстове. Списъци. [3, 4, 5, 10]
5. Използване на мултимедийни обекти в HTML и форматиране с CSS. Проектиране на лого. [4, 7, 8, 10, 11]
6. Създаване и оформление на таблици с HTML и CSS. [4, 8, 10]
7. Работа с контейнери. Позициониране на обекти. Подравняване на обекти. [4, 8, 7, 9]
8. Подбор на цветове. Цветови схеми. Шрифтове и типография. Текстури. [8, 9, 12 ]
9. Създаване на уеб форми. [4, 7, 13]
10. Хипервръзки. Карти на изображения. Котви. Менюта. [4, 7]
11. JavaScript и JQuery. XML. [13, 15 ]
12. Създаване на уеб графика в браузър. [13, 15]
13. Адаптивен уеб дизайн. Принципи при проектиране на уеб интерфейс. [1, 5, 8, 9]
14. Уеб услуги, блогове и социални мрежи. Бази от данни в уеб. [13, 14]
15. Семантичен уеб и метаданни. [5]

Литература

Основна литература

1. Bill Scott, Theresa Neil (2009) Designing Web Interfaces, O'Reilly Publishing
2. O'Reilly (2005) What Is Web 2.0, Design Patterns and Business Models for the Next Generation of Software, 09/30/2005, http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
3. Ian Pouncey, Richard York (2011) Beginning CSS. Cascading Style Sheets for Web Design, Wiley Publishing
4. Jennifer Niederst Robbins (2012) Learning Web Design, Fourth Edition, A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics, O'Reilly Media
5. Leslie F. Sikos (2013) Web Standars. Masterig HTML5, CSS3, and XML, Apress
6. Brain P. Hogan (2009) Web Design for Developers. A Programmer’s Guide to Design Tools and Techniques, The Pragmatic Bookshelf
7. Michael Bowers, Dionysios Synodinos, Victor Sumner (2011) Pro HTML5 and CSS3 Design Patterns, Apress
8. Benjamin LaGrone (2013) HTML5 and CSS3 Responsive Web Design Cookbook, Packt Publishing
9. Jason Beaird (2010) The Principles of Beautiful Web Design, SitePoint
10. Peter Gasston (2015) The book of CSS3, 2nt Edition, No Starch Press
11. Sandro Paganotti (2013) Design Next Generation Web Projects with CSS3. A practical guide to the usage of CSS3 - a journey through properties, tools and techniques to better understand CSS3, Packt Publishing
12. Antonio Pratas (2014) Creating Flat Design Websites. Design and develop your own flat design websites in HTML, Packt Publishing
13. Brian P. Hogan (2013) HTML5 and CSS3. Second Edition. Level Up with Today's Web Technologies, The Pragmatic Bookshelf
14. Mark D. Hawker (2011) The Developer's Guide to Social Programming. Building Social Context Using Facebook, Google Friend Connect, and the Twitter API, Addison-Wesley
15. W3Schools, http://www.w3schools.com/

Допълнителна литература

1. W3C: HTML 5.1; http://www.w3.org/html/wg/drafts/html/master/
2. Aidan Temple (2013) HTML5 2D. Learn how to develop a 2D HTML5 platformer that is capable of running in modern browsers, Packt Publishing
3. Jason Gonzales (2013) Mobile First Design with HTML5 and CSS3. Roll out rock-solid, responive, mobile first designs quickly and reliable, Packt Publishing
4. Lara Callender Hogan (2015) Designing for Performance, O'Reilly Media
5. Tom Barker (2015) High Perfomance Responsive Design, O'Reilly Media
6. Сайт с учебни материали по дисциплината Уеб системи и технологии

Оценяване на студентите

Текущ контрол
Текущият контрол се осъществява по време на лабораторните занятия чрез разработването на отделни упражнения У1, …, У13 през семестъра и чрез защита на изготвен курсов проект – КП, чийто разработване започва през последните два часа от лабораторните занятия и се продължава в извън аудиторната заетост на студента. Оценките от проекта и осреднената от упражненията са с еднаква тежест.
Оценката от текущ контрол (Отк) се изчислява по формулата:

Отк = 0,5*KП + 0,5*(У1+У2+ … + У13)/13
Студентите, които нямат минимална оценка среден /3/ от текущ контрол не се допускат до изпит на редовната сесия. Те трябва да представят допълнителни разработки и след получаване на оценка поне среден /3/ се допускат до писмен изпит на поправителна или ликвидационна сесия.

Крайна оценка
Окончателната оценка (Оок) отчита резултатите от текущия контрол и оценката от писмения изпит (отворен тест) (Оиз) в съотношение 1:1 съгласно формулата:

ОК = 0.50* Отк + 0.50*КТ

Окончателната оценка, изпитната оценка и оценката от текущ контрол се дават по шестобалната система – 2, 3, 4, 5, 6.

Оценяването на постигнатите резултати в процеса на обучението е съобразено с изискванията на ЗВО и Наредба №21 на МОН от 30 септември 2004 г. за прилагане на система за натрупване и трансфер на кредити.

Общият кредит на дисциплината „Уеб системи и технологии“ е 4,5 кредита. Присъствието и работата по време на семинарните и лабораторни занятия присъжда на студентите 1,5 кредит от аудиторната заетост и 3 кредит от извънаудиторна под формата на самостоятелна работа (разработване на курсов проект и подготовката за крайния тест).

Кредити се присъждат само ако семестриалната (окончателната) оценка е равна или е по-висока от Среден 3.00, съгласно системата за натрупване и трансфер на кредити.

Курсов проект

Пример за теми за курсов проект:
Основната цел на курсовият проект е демонстриране на знания и умения при разработването на уеб сайтове от страна на студентите. • Тема 1: Да се разработи уеб сайт за исторически паметник в родната страна на студента.
• Тема 2: Да се разработи уеб сайт за природна или историческа забележителност с национално значение в родната страна на студента.
• Тема 3: Да се разработи уеб сайт за национален или природен парк в родната страна на студента.

Изисквания към курсовата работа:
Курсовата разработка трябва да отговаря на конкретната тема;
• Да е логически и съдържателно добре структурирана;
• Да обхваща основните аспекти на разглежданата проблематика;
• Да съдържа коректно цитиране на използваната литература;
• Да бъде предадена на хартиен и цифров носител.

По тази дисциплина курсовият проект е уеб сайт, който трябва да бъде написан на HTML5 и CSS3. Темата на курсовият проект в една от посочените по-горе, като забележителността може да бъде всяка планина, национален парк, национален паметник, музей, галерия, зоопарк и т.н.

Сайтът трябва да се състои от поне пет страници:
• Начало (index.html),
• География (географско местоположение, демографски особености, ако са важни за обекта),
• История (ако забележителността е с историческа стойност, да се опише по подборно, ако ли не, кога е създадена или основана, от кой и т.н.),
• Галерия
• За автора (Трите имена, факултетен номер, курс, специалност, организирани във вид на таблица и форма за контакти).

Използвани HTML елементи:
• Таблици
• Списъци
• Изображения
• Работещи линкове
• Специални символи
• Форма, заедно с принадлежащите й елементи.
Задължително използване на стилови файлове за организиране и определяне на начина на визуализиране на съдържанието.

Курсовият проект трябва да бъде представен преди самата защита. Той трябва да бъде изпратен на електронната поща на преподавателя. Хартиената част се състои от начална страница, на която е написано КУРСОВ ПРОЕКТ ПО УЕБ СИСТЕМИ И ТЕХНОЛОГИИ и данните на студента, а останалата част се състои от скрийншоти на съответните екрани от сайта и сорса, който трябва да бъде форматиран с шрифт Courier New 8pt.

Софтуерни продукти

Тук са поместени линкове към софтуерни продукти, които могат да бъдат използвани за разработване на курсовите проекти по дисциплината "Уеб системи и технологии":

Допълнителни материали

Тук са поместени някои галерии от изображения, галерии от CSS скриптове, хранилища на цели проекти, които могат да бъдат използвани за разработване на курсовите проекти по дисциплината "Уеб системи и технологии":

Безплатни шрифтове: