Web технологии Учебник за бакалаври по специалностите „Информатика“ и „БИС“
проф. д.ик.н. Румен Върбанов доц. д-р Стефан Дражев доц. д-р Павел Петров ас. Радка Начева
Издателство на ИУ-Варна ISBN 978-000 000 000 2013
1
WEB ТЕХНОЛОГИИ
Съдържание Анотация ............................................................................................................. 5 Въведение ........................................................................................................... 6 РАЗДЕЛ ПЪРВИ. БАЗИСНИ WEB ТЕХНОЛОГИИ ........................................................ 7 Глава 1. Поява и еволюция на Web. .................................................................... 7 1.1.Еволюция на Web технологиите ................................................................ 7 1.2.Първо поколение Web ................................................................................ 8 1.3.Второ поколение Web .............................................................................. 10 1.3.Трето поколение Web .............................................................................. 12 Глава 2. Основни елементи на World Wide Web ................................................ 17 2.1. Информационна система World Wide Web .............................................. 17 2.2. Хипертекстов език HTML ......................................................................... 18 2.3. HTTP протокол за предаване на хипертекст .......................................... 19 2.4. Web сървър.............................................................................................. 20 2.5. Web сайт.................................................................................................. 20 2.6. Web страница .......................................................................................... 22 2.7. Браузър (Web клиент, клиентски софтуер) .............................................. 22 2.8. Адресиране на ресурсите в Интернет .................................................... 24 Глава 3. Система Web 2.0. ................................................................................ 30 3.1. Основни компоненти на Web 2.0. ........................................................... 30 3.2. Web услуги .............................................................................................. 30 3.3. Подкастинг (Podcasting).......................................................................... 31 3.4. Блогове (Blogs) ........................................................................................ 32 3.5. Маркиране (Tagging) ............................................................................... 34 3.6. RSS разпространение на новини ............................................................. 34 3.7. Социални мрежи (Social networking)....................................................... 35 3.8. Технология AJAX ..................................................................................... 38 3.9. Wiki технология ...................................................................................... 38 WWWW
2
3.10. BitTorrent технология ........................................................................... 40 Глава 4. Търсене в Интернет. ............................................................................ 43 4.1. Технологии и инструменти за търсене в Интернет ................................ 43 4.2. Машини за търсене ................................................................................. 43 4.3. Ръчно построени директории ................................................................. 49 4.4. Метатърсачки .......................................................................................... 50 Глава 5. Web технологии за изграждане и поддържане на блогове ................ 52 5.1. Стуктуриране на блоговете .................................................................... 52 5.2. Програмни платформи за изграждане на блогове ................................. 55 Глава 6. Web технологии за синдикиране на информацията в Интернет. ....... 59 6.1. Синдикиране на информацията в Интернет ........................................... 59 6.2. Агрегатори за синдикиране на информацията в Интернет .................... 66 Глава 7. Web технологии за кооперирана обработка на информацията. ......... 70 7.1. Програмни платформи за кооперирана обработка ................................ 70 7.2. Сценарии за работа с Wiki-платформа .................................................. 73 РАЗДЕЛ ВТОРИ. СТАНДАРТНИ СРЕДСТВА ЗА ИЗГРАЖДАНЕ НА WEB САЙТОВЕ ..... 79 Глава 8. HTML – стандарт за изграждане на Web страници.............................. 79 8.1. Въведение в HTML ................................................................................... 79 8.2. Основни HTML5 тагове, елементи, атрибути и свойства ....................... 79 8.3. Преход от HTML4 към HTML5 ................................................................. 89 Глава 9. Web формуляри – методи и средства за реализация. ......................... 91 9.1. Разработване на формуляри ................................................................... 91 9.2. Програми генератори на формуляри ..................................................... 99 Глава 10. CSS3 – основи на каскадното форматиране на Web страници........ 108 10.1. Същност, основни понятия и синтаксис на CSS .................................. 108 10.2. Включване на CSS правила в Web страница ........................................ 111 10.3. Селектори, наследяване и каскадност................................................ 113 10.4. Свойства за оформяне на текст .......................................................... 116 WWWW
3
WEB ТЕХНОЛОГИИ
10.5. Свойства за списъци ........................................................................... 119 10.6. Свойства за таблици ........................................................................... 120 10.7. Свойства за кутията ............................................................................ 121 Глава 11. JavaScript и AJAX - Синхронно и асинхронно програмиране на Web страници. ........................................................................................................ 127 11.1. Обща характеристика. Вмъкване на програмен код на JavaScript в Web страница ...................................................................................................... 127 11.2. Синтаксис и разлики спрямо C/C++ .................................................. 128 11.3. Глобални функции .............................................................................. 130 11.4. Потребителски функции ..................................................................... 132 11.5. Масиви ................................................................................................ 133 11.6. Вградени класове Date, Math, Number, String, Boolean, RegEx ........... 133 11.7. Прихващане на събития ...................................................................... 135 11.8. AJAX - Asynchronous JavaScript And XML ............................................. 140 РАЗДЕЛ ТРЕТИ. ПРОГРАМНИ ПЛАТФОРМИ ЗА ЕФЕКТИВНО СЪЗДАВАНЕ И ПОДДЪРЖАНЕ НА WEB САЙТОВЕ ........................................................................ 144 Глава 12. Joomla платформа за изграждане на Web сайтове. ......................... 144 12.1. Въведение в Joomla ............................................................................. 144 12.2. Инсталиране и конфигуриране на Joomla .......................................... 145 12.3. Основни администраторски задачи. Работа с контролния панел....... 150 12.4. Примери за административна работа ................................................ 154 12.5. Промяна на външния вид на сайта чрез инсталиране на нов шаблон 155 12.6. Инсталиране на добавки..................................................................... 156 Глава 13. Adobe платформи за изграждане на Web сайтове. ......................... 158 13.1. Въведение в програмните продукти на Adobe CS .............................. 158 13.2. Платформа Adobe Dreamweaver ......................................................... 159 13.3. Платформа Adobe Muse ...................................................................... 166 Глава 14. Платформи за мобилни Web приложения. ...................................... 173 14.1. Въведение в Android ........................................................................... 174 WWWW
4
14.2. Android инструменти за разработване на софтуер (SDK) ................... 177 Литература. ..................................................................................................... 185 Задължителна литература ............................................................................ 185 Препоръчителна литература ........................................................................ 185 Web адреси на справочни материали ............................................................. 186 Приложения .................................................................................................... 188 Приложение 1. Задания по дисциплината Web технологии........................ 188 Приложение 2. Курсова работа по дисциплината Web технологии – разработване на бизнес Web сайт ............................................................... 189
WWWW
5
WEB ТЕХНОЛОГИИ
Анотация Учебникът “Web технологии“ е предназначен за студентите на ИУ-Варна от специалностите „Информатика“ и „Бизнес информационни системи“, изучаващи дисциплината “Web технологии“. Включва 3 раздела с 14 глави, които последователно описват както историята на Word Wide Web, така и съвременните програмни средства и платформи за проектиране, изграждане и поддържане на Web сайтове. Акцентира се на прехода от Web 2.0 към Web 3.0 (Semantic Web), от HTML4 към HTML5, от прилагане на HTML и CSS към платформи като Joomla и Muse. Участието на авторите в създаването на учебника е както следва: - проф. д.ик.н. Румен Върбанов от СА „Д.А.Ценов“-Свищов: раздел 1 - глави 1, 2, 3 и 4; - доц. д-р Стефан ИУ-Варна: раздел 1 - глава 7; раздел 2 – глава 8 и 9; раздел 3 – глава 13; - доц. д-р Павел Петров, ИУ-Варна: раздел 2 – глава 10 и 11; раздел 3 – глава 12; - ас. Радка Начева, ИУ-Варна: раздел 1 – глава 5 и 6; раздел 3 – глава 14. Разработването на учебника „Web технологии“ е съобразен с учебната програма и целите на едноименната дисциплина, преподавана на студентите от бакалавърската степен по специалностите „Информатика“ и „Бизнес информационни системи (БИС)“ на ИУ-Варна. Авторите ще приемат с благодарност предложенията, свързани с подобряване на изложението в учебника, изпратени на техните и-мейл адреси (вж сайтовете на съответните учебни заведения).
WWWW
Въведение
Въведение Дисциплината “Web-технологии“ има за цел да даде необходимите знания и умения в областта на проектиране, изграждане и поддържане на съвременни Web сайтове. Лекционият материал и лабораторните занятия формират следните знания, условия за разбиране и умения: Знание и разбиране: В края на обучението студентът трябва да: • Демонстрира задълбочени знания по съвременните програмни средства и технологии за създаване на Web сайтове; • Прилага методи за анализ на динамичната бизнес информация и нейното представяне в Интернет; • Демонстрира знания за динамична актуализация на Web базирани бизнес електронни документи; • Оценява възможностите на различни програмни платформи за създаване на Web сайтове и избира оптимални средства за дадена категория сайтове. Приложение на знанията и уменията: • Умее да анализира обема на въвежданата Web-информация; • Проектира онлайн формуляри и структурата на сайта; • Вземане на оптимални решения при проектиране и програмиране на сайта; • Познава национални и международни документи за публикуване на дигитално съдържание. Способност за разширяване на знанията и формиране на нови умения: Работи в екип и координира своите задачи по създаване и поддържане на Webсайтове. Усъвършенства своите умения чрез непрекъснато обучение. Взема решения в стандартни и относително неопределени ситуации. Учебната дисциплината „Web технологии“, както всяка друга съвременна дисциплина, свързана с информационните и комуникационни технологии, е много динамична, търпи непрекъснати промени. За целта авторите са изградили и поддържат образователни сайтове, на които периодично се актуализира учебното съдържание.
WWWW
6
7
WEB ТЕХНОЛОГИИ
РАЗДЕЛ ПЪРВИ. БАЗИСНИ WEB ТЕХНОЛОГИИ Глава 1. Поява и еволюция на Web. 1.1.Еволюция на Web технологиите
В края на първото десетилетие на 21 век, макар и условно, може да се говори за три поколения в еволюцията на Интернет – Web 1.0, Web 2.0 и Web 3.0, а според някои автори към 2020-2030 г. ще се пристъпи към използване на четвъртото поколение Web. На фиг.1.1 са показани времевите порядъци на поколенията Web, в контекста на еволюцията на ИТ технологиите и системите.
Фиг. 1.1. Еволюция и основни технологии на поколенията Web В еволюцията на Web условно се очертават няколко поколения: Първо поколение - Web 1.0 (1990-2000 г.); Второ поколение - Web 2.0 (2000-2010 г.); Трето поколение - Web 3.0 (2010-2020 г.); Четвърто поколение - Web 4.0 (2020-2030 г.); Всяко от поколенията Web има специфични особености, използва определени технологии и води до определени последици за потребителите и компаниите. На фиг. 1.2. са посочени особеностите и някои от технологиите на трите поколения Web.
WWWW
Глава 1. Поява и еволюция на Web.
Web 1.0 (1990-2000) Сравнително малко хора създават Web страници за голям брой потребители. Като резултат потребителите получават информация, след като непосредствено посетят съответната страница-източник. Основни характеристики: използване на езика HTML, лични Web страници, поддържане на корпоративни портали, клиент-сървър организирани ресурси, използване на система за управление на съдържанието, публикуване на съдържание, статични сайтове.
Технологи: TCP/IP, Web, http, Hiperlink...
Web 2.0
Web 3.0
(2000-2010) Контентът се генерира от самите потребители. Информацията е разделена на микрочастички, които може да са разпределени на десетки домейни. Мрежата от документи се трансформира в Мрежа от данни. Потребителите повече не търсят старите източници на информация: в Web 2.0 те се опитват да намерят инструмент, който да групира микрочастиците информация в удобен за възприемане вид.
(2010-2020) Семантичен Web – специализирани системи, в които компютрите взаимодействат помежду си без участието на хората, а приложенията са способни да разпознават информацията. Всеки документ или Web страница в семантичния Web 3.0 ще включва метаданни, които ще показват кога и от кой е създаден файлът, как е форматиран, за какво е предназначен и редица други характеристики.
Технологи: Ajax, RSS, Wiki, APIs, Glogalization, Web as a Platform...
Технологи: Семантични мрежи, Адаптивни системи за извличане на данни, Електронни слоеве с изкуствен интелект...
Фиг. 1.2. Сравнение на възможности за създаване и използване на информация в Web 1.0, Web 2.0 и Web 3.0. В следващото изложение ще разгледаме кратко същността и особеностите на всяко едно от поколенията Web. 1.2.Първо поколение Web
Във вида, в който днес познаваме Интернет, мрежата съществува от средата на 90-те години с развитието на WWW, Web браузърите и другите Web технологии. World Wide Web (Web или WWW) е глобална информационна система в Интернет, която осигурява на потребителите достъп до мултимедийни документи чрез хипертекстови връзки. Обхваща съвкупност от информация в Интернет, свързана с връзки, които позволяват преминаването между различни документи (страници). Web страниците се разглеждат със специална програма, наречена браузър. Разпределената информационна система WWW дава бърз и лек достъп до милиарди документи по целия свят. Мултимедийната реализация на голяма част от тях ги прави особено атрактивни за преглед на различни новини, музика, нови филми, графика, анимация и много други. Проектът на хипертекстовата система WWW (World Wide Web – световна паяжина) е предложен от Тимоти Бърнарс-Лий през 1989 г. Той е автор и на технологиите HTTP, URI/URL и HTML. По това време работи в Европейската организация за ядрени изследвания (CERN) в Женева като консултант по програмно осигуряване. Намерението му е било общността на термоядрените физици да може да използва хипертекстови документи, свързани помежду си с препратки за визуални комуникация и поделяне на данни и решаване на проблема за обработката и предоставяне на резултати от научни изследвания в реално време. Тимоти Бърнардс Лий предлага създаването на графичен потребителски интерфейс (hypertext GUI), който да използва наличната Интернет технология, като добави графична част към съществуващата структура, което трябвало да направи мрежата по-лесна за използване и управление. За осъществяване на проекта той изобретява идентификаторите URI, протокола HTTP и езика HTML. В периода 1991 – 1993 г. усъвършенства техническите WWWW
8
9
WEB ТЕХНОЛОГИИ
спецификации на тези стандарти и ги публикува. В рамките на проекта той написва първия в света Web сървър (CERN httpd) и първия в света хипертекстов браузър, наречен «WorldWideWeb» (декември 1990 г.). Тим Бърнардс Лий създава първият в света Web сайт и го публикува на адреса http://info.cern.ch/ на 6.VIII.1991 г. В него се описва какво е WorldWideWeb, как да се използва браузър, как да се инсталира Web сървър и т.н. WWW е реализиран за пръв път в Европейския център за ядрени изследвания CERN през декември 1990 г. През лятото на 1991 г. програмата WWW е вградена в Интернет чрез сайта на Тим Бърнардс Лий, а през 1992 г. CERN публикува целият проект WWW1. Още на следващата 1993 г. вече работят 100 Web сървъра в Интернет. През 1991 г. Световната паяжина става общодостъпна в Интернет, а през 1993 г. се появява първият масово използван Web браузър Mosaic. Към 1995 г. Световната мрежа Web става основен доставчик на информация в Интернет, надминавайки трафика на протокола за предаване на файлове FTP. По същество Световната паяжина преобразява Интернет и създава неговия съвременен облик. След 1996 г. WWW почти изцяло заменя понятието „Интернет”. Към 1997 г. в Интернет вече има 10 млн. компютри, регистрирани са над 1 млн. имена на домейни и Мрежата се превръща в най-популярното средство за обмен на информация. Web има много важно значение за бизнеса, като дава нови възможности за използване от компаниите и стимулира бизнеса да инвестира в Интернет. Под въздействието на Web, годините от средата на 90-те на 20 век са периода на комерсиализиране на Интернет, бум на dot-com проектите и бързо развитие на електронния бизнес.2 Появяват се първите онлайн магазини и компании, чиито бизнес модел изцяло е базиран на работа в световната мрежа. Бизнесът започва да инвестира огромни средства и само за няколко години частния сектор съдействува за формирането на мощна жизнеспособна мрежа. След 1995 г. Интернет решително се преориентира от областта на научните изследвания към бизнеса и търговската сфера. Мрежата се превърна в среда за работа, представяне и продаване на информация, стоки и услуги. Интернет медията е доказала своите маркетингови предимства и за всяка компания присъствието в Интернет става жизнена потребност. Днес Интернет е неотделима част от много бизнес процеси. Мрежата е място и едновременно средство за взаимодействие на субектите на пазарни отношения – производители, продавачи и купувачи. На тази основа се формира и т. нар. „Интернет икономика“, чийто дял непрекъснато расте. Web се превърна в движеща сила на икономиката и доведе до фундаментални промени в бизнес сферата - създаване на съвършено нови продукти, поява на нови бизнес модели, възникване на множество млади технологични компании, все по-осезаемо влияние върху измененията на икономическата среда в близките десетилетия. 1
6 август 1991 г. се смята за официална дата на раждането на World Wide Web. На този ден Тим Бърнърс-Лий заедно с колегите си, работещи в Европейския център за ядрени изследвания (CERN), публикували в Интернет първия Web сайт. Тим Бърнардс Лий написва първият Web сървър и първия клиент WISIWIG браузър в средата на NEXTstep. Той създава и спецификациите за HTTP, URL и HTML. 2 Опитите за комерсиализиране на NSFNET започват с усилията на правителството на САЩ чрез специален законодателен акт, приет в началото на 1993 г. в САЩ мрежата на Националния научен фонд (NSFNET) да се предостави за търговско използване.
WWWW
Глава 1. Поява и еволюция на Web.
При сравняване на възможностите на трите етапа в развитието на Web, може да се посочат още няколко важни особености на Web 1.0 като система, ориентирана предимно към четене на публикуваните материали (контент): 1. Собственик на съдържанието обикновено е собственикът на сайта. 2. Целевата аудитория при първото поколение Web е преди всичко компанията. 3. Базовата структура на данните е представена във вид на домашни Web страници. 4. Основен източник на знания са енциклопедии и онлайн справочници, напр. Britannica Online. 5. Технологиите са представени главно чрез езика НТML и Web порталите. 6. Брой на потребителите - 45 млн. (1996 г.). 7. Представянето на ресурсите става чрез стандартни Web форми. 8. Систематизация – дървовидна по каталози (директории), таксономическа. 9. Статистиката на заявките и посещенията е по Web страници. 10. Оптимизация на сайта и привличане на посетители (онлайн маркетинг) става чрез явна реклама (съотношението на различни методи за реклама в Мрежата – банерна реклама, оптимизация на сайта за търсещи системи, контекстна реклама и т.н.). 11. Статични страници вместо генерирано от потребителите динамично съдържание (контент). 1.3.Второ поколение Web
Терминът Web 2.0 беше въведен и дефиниран през 2004 г. от Тим О'Рейли.3 За много кратък период Web 2.0 се превърна в доминираща платформа за разработване на множество успешни и популярни приложения. «Web 2.0 e методика за проектиране на системи, при които с отчитане на мрежовите взаимодействия стават толкова по-добри, колкото повече хора ги използват. Web 2.0 е бизнес революция в областта на компютърната индустрия, предизвикана от превръщането на Интернет в платформа, и от опита да се разберат правилата за успех в тази нова платформа”4. Очевидно Web 2.0 е термин, който характеризира второ поколение услуги, разположени в Интернет, които позволяват на потребителите съвместно да работят и да обменят информация. Приложенията Web 2.0 представляват комбинация от технологии, разработени в края на 20 век. Те осигуряват възможности за работа с масови публикации (на базата на Web приложения, които се наричат социални сервизи, напр. блогове, уикита, социални мрежи. Подходът, базиран на концепцията Web 2.0, означава много по-висока потребителска активност, ориентирана към участие в създаването на съдържанието на съответния ресурс. Освен това в процеса на развитие
3
Все още няма точно и общоприето определение на Web 2.0. За пръв път този термин е използван от Тим О'Рейли (компанията O'Reilly Media) за определение на понятието сайтове от второ поколение, които започват да се появяват след крушението на ИТ пазара от 2000 г. (крахът на първата вълна дотком компании). Така с термина Web 2.0 Тим О'Рейли характеризира голям брой интернет сайтове, обединени от общи принципи и имащи сходни тенденции към възникването на различни мрежови общества. 4
Tim O'Reilly. What Is Web 2.0. Design Patterns and Business Models for the Next Generation of Software. http://oreilly.com/web2/archive/what-is-web-20.html, Октомври 2013
WWWW
10
11
WEB ТЕХНОЛОГИИ
на Web 2.0 услугата се отчита опитът и мненията на потребителите, които я ползват. По този начин ресурсите на новия Web стават много по-интерактивни, поинтелигентни и даващи пълна възможност за самоизразяване и оценка. Една от най-важните отличителни черти на Web 2.0 е атомизацията на Web съдържанието - все повече заявки за получаване на информация и нейната обработка се извършват не от хора, а от други компютърни програми. Най-големите портали Google, Yahoo и MSN и още много други сайтове се превръщат в доставчици на компоненти (API) за създаване на пълноценни продукти, каквито са Web услугите, т.е. Web услугите се очертават като най-перспективната технология, около която се формират всички виждания и разсъждения за използването на Web 2.0. Web 2.0 в основни линии той обединява в себе си Web базираните услуги от второ поколение, към които могат да се причислят социалните мрежи, wiki сайтовете, блоговете, най-различните инструменти за комуникация и още много други услуги. В основата на всички тях е съвместната работа, онлайн сътрудничеството и споделянето между потребителите. Подобно на всяка нова технология, така и Web 2.0 не само добавя множество нововъведения, но и налага промяна на доста стандарти и, по-точно, води до промяна в начина, по който тези стандарти се използват. Мрежата вече служи като технологична платформа за разработка на най-различни приложения, които промениха начина на общуване между хората и възможностите за изпълнение на различни бизнес процеси. Много важна особеност на Web 2.0 е ориентацията към максимална свобода на общуването между потребителите («the wildly read-write web» (неконтролируема мрежа за четене/запис на информация от различно естество). Могат да се посочат още няколко важни характеристики на Web 2.0: 1. Рязко повишаване броя на потребителите, като резултат от технологичните удобства, които дава Web 2.0 и чисто човешката черта лесно да се комуникира в групови общности. 2006 г. – над 1 млрд. потребители, 2011 г. – 2,3 млрд. потребители, юни 2012 г. – 2 405 518 376 (34,3% от населението на Земята).5 2. Насоченост към виртуални групи, съобщества от потребители. 3. Структура на данните – блогинг. 4. Съдържанието се формира основно от потребителите. 5. Основен източник на знания - Wikipedia. 6. Базови технологии - XML, RSS. 7. Основни ресурси – Web приложения. 8. Принцип за класификация на информацията – тагинг (фолксономия , т.е. класификацията е съвместна, формирана от самите потребители). 9. Ефективност на рекламата – измерва се с количество кликвания и количество показвания на банера (импресия). 10. Маркетинг – доминиращ е „маркетинг от уста на уста“ (word of mouth) и отказ от масова платена и нежелана реклама. Съсредоточаване в създаването на уникален продукт, който дава повод на хората да говорят и стимул да го ползват.
5
http://www.internetworldstats.com/stats.htm
WWWW
Глава 1. Поява и еволюция на Web.
Към ресурсите, използващи максимално възможностите на концепцията Web 2.0 могат да се отнесат: Facebook, YouTube, Flickr, Wikipedia, Twitter, WordPress, Blogger, IMDB, Photobucket, Tumblr, eHow, Yelp*, TypePad, HubPages, Reddit и др.
Web 2.0 налага нови правила и модели за водене на бизнес. И това е така, защото блоговете, персоналните профили и уикита (wiki) предоставят прости инструментални средства за комуникация, позволяващи на хората да общуват помежду си без да се интересуват от конкретните Web технологии и браузъри. Използвайки ги, те могат да споделят своите интереси и опит и да създават съвместно съдържание (content). Все по-голяма част от бизнес аудиторията започва да се отнася сериозно към Web 2.0 технологиите и да ги използва в бизнеса, надявайки се на това, че те съдържат голям потенциал за развитие. Въпросът „Може ли да се смята, че базираните на платформата Web 2.0 сайтове са конкурентоспособен модел за правене на бизнес” днес има определено положителен отговор. Всички сайтове, които са лидери в електронната търговия или генерират най-голям трафик, усилено въвеждат новите идеи, съдържащи се в концепцията Web 2.0 и се радват на насърчителни резултати. Много изследвания от последната година показват, че внедряването на нови интерактивни модули, съвременен каталог на продуктите и налагането на по-добро общуване с потребителите рязко увеличава интернет продажбите.6 1.3.Трето поколение Web
Третото поколение Web (Web 3.0 или семантичен Web) обхваща специализирани системи, в които компютрите взаимодействат помежду си без участието на хората, а приложенията са способни да разпознават информацията. Web 3.0 включва семантични мрежи, адаптивни системи за извличане на данни, електронни слоеве с изкуствен интелект. Тези ресурси ще бъдат интегрирани в съществуващите социални мрежи. Специални тагове по подобие на лексическите елементи в езика HTML, които ще дават указания на компютрите как точно да обработват информацията, са в основата на семантичните мрежи. Тази технология ще може поинтелигентно да анализира и да отговаря на заявките на работещите в Web. Очаква се семантичният Web да се състои от три основни компонента: механизъм за описания на ресурсите RDF Framework); онтологичен език OWL (Web ontology Language); език за запитвания SPARQL.
(Resource
Definition
Първото определение на Web 3.0 е дадено през 2007 г. от Джейсън Калаканис: „Web 3.0 e творение с висококачествено съдържание и услуги, създадено от способни хора (талантливи професионалисти), които използват технологията на Web 2.0 като осигуряваща платформа“.7 Неговата идея е, че на базата на Web 2.0 трябва да възникне нова платформа – не толкова технологична, колкото социокултурна,
6
Вж. по-подробно: Върбанов, Р. Бизнес в средата на Web 2.0. (Web 2.0, Enterprise 2.0, Cloud Computing, SaaS). Библиотека „Стопански свят”, АИ Ценов, Свищов, 2011, №111, 243 с. ISSN 1310-2737. 7 Web 3.0, the "official" definition. http://calacanis.com/2007/10/03/web-3-0-the-official-definition/ [10.10.2013]
WWWW
12
13
WEB ТЕХНОЛОГИИ
използвана от професионалисти за създаване на интересно, полезно и качествено съсъдржание. Определението се базира на фундаменталното положение, че Web 2.0 по същество е технологична платформа, върху която безплатно се разработват множество услуги. Но открития характер и лесната достъпност доведе до появата на огромно количество еднотипни ресурси, което рязко намали ценността на някои от тях. Ето защо технологичната платформа на Web 2.0 се замества от третото поколение Web, т. нар. културна версия на Web, която се използва от професионалисти за създаване на ново по-интересно и по-полезно съдържание. Основната идея на Web 3.0 се изразява в това, че потребителят, който досега еднолично е въвлечен в процеса на формиране на съдържанието, започва да твори колективно със своите партньори. Освен това, наред с редовите потребители вече има и експерти (мениджъри на знания) в отделните направления, а статуса на потребителя може да бъде променен на експертен. Експертът се оформя като своеобразен модератор на публикуваното съдържание. В новите условия не е изключено и сътрудничество срещу заплащане, но много по-съществен момент и появата на «колективния разум» в Web 3.0 формат. Очевидно Web 3.0 предполага появата и развитието на тясноспециализирани ресурси, където ще се извършва агрегация на всички необходими на потребителя услуги и професионални инструменти и ще се осъществява публикуване на експертно модерирано съдържание в определена област на знанието. Нов момент е създаването на семантична паяжина. В сегашния модел на световната паяжина, където връзките са осъществявани чрез хипертекст няма семантика, т. е. не се описва смисъла на връзката. Предназначението на семантичната мрежа е в това да опише взаимовръзките на обектите, а не допълнителна информация в предметната област. Човекът може да се ориентира дали и защо му е нужна една или друга хипервръзка, но за компютъра тази връзка е непонятна. Понастоящем страниците, свързани с хипервръзки са документи, които описват обикновено някаква проблемна ситуация като цяло. При семантичната мрежа върховете, които свързват отношения са понятия или обекти от реалния свят. Създаването на семантична мрежа на базата на Световната паяжина се нарича семантична паяжина (Semantic Web). 8 Концепцията за семантична паяжина предполага използването на езика RDF (Resource Description Framework), който е базиран на синтаксиса на XML и използва идентификатори URI за обозначение на ресурсите. В този смисъл RDF е система за описание на мрежовите ресурси, понятна за компютъра и трябва да придаде на хипервръзките определен смисъл, който да е разбираем за компютърната система. По този начин Интернет ще може да се превърне в разпределена база от знания с глобален мащаб.
8
Терминът «семантична паяжина» за пръв път е използван от Тим Бърнардс (изобретателя на WWW) през май 2001 г. в списание «Scientific American», и е наречен от него «следваща стъпка в развитието на Светвната наяжина». По-късно той предлага като синоним термина Гигантски Глобален Граф (Giant Global Graph, GGG, по аналогия с WWW). Впоследствие концепцията за семантична паяжина е възприета и развита от Консорциума на Световната мрежа (W3C).
WWWW
Глава 1. Поява и еволюция на Web.
Главната идея на концепцията за семантична паяжина се базира на въвеждането на метаезик, описващ съдържанието на сайтовете за организиране на автоматичен обмен между сървърите. Описателните механизми на семантичната паяжина в основни линии вече са разработени (RDF, DAML, OIL, OWL), но на етап обработка и извеждане на информация, възникват няколко сериозни проблеми: Необходимост от допълнителни разходи за създаване на семантична версия на всеки сайт, което засега ограничава достъпа до новата технология;
Липса на гаранции за адекватно описание от Web мастърите на собствените ресурси (аналогично с историята по използването на тагове на ключови думи;
Невъзможност да се възприеме единен формат за описание свойствата на ресурсите в условията на съществуващата конкуренция поради корпоративнорекламната политика на създателите на ресурса и наличието на множество възможности за манипулиране на описателните механизми;
Как ще се внедрява и функционира Web 3.0 – дали ще замени съществуващия Web или ще функционира като отделна мрежа;
Как ще се привличат експерти, които имат ключова роля в концепцията за
Web 3.0; Какво ще се прави с вече натрупаната недостоверна информация в Интернет, защото прочистването на мрежата е изключително трудоемка задача.
Web 3.0, като следващ стадий в еволюцията на Интернет, има редица съществени предимства. Базовият Web или Web 1.0 е организиран така, че ИТ професионалисти създават съдържание срещу заплащане. При Web 2.0 съдържанието се създава от непрофесионалисти без никакво заплащане, т.е. обикновени потребители са едновременно създатели и потребители на съдържанието. Web 3.0 отбелязва следващия етап, при който непрофесионалните потребители ще получават пари за Интернет активност и сертифициране на съдържанието. Това е огромен скок напред в еволюцията на Web – дълго време беше валидно схващането, че информацията първо трябва да се филтрира и едва след това да се публикува. При Web 3.0 е точно обратното – първо съдържанието се публикува, защото това е много евтино и достъпно, и едва след това се подлага на експертна оценка, сертифицира се в съответствие с определени изисквания и предпочитания и накрая на всеки се предлага, това което му е интересно и полезно. Могат да се очертаят някои важни характеристики на Web 3.0:
Строго модерирано съдържание.
Ориентация към удовлетворяване нуждите на потребителите и като следствие, съчетаване на on-line и off-line услуги.
Натрапчивото предлагане на стоки и услуги е заменено от система от квалифицирани посредници, които помагат да се направи оптимален избор.
Разширяване на границите за общуване чрез появата на роботизирани превеждащи програми със степен на адекватност на превода над 95%.
WWWW
14
15
WEB ТЕХНОЛОГИИ
Според много анализатори Web 3.0 не е просто нова технология за създаване и обслужване на Интернет приложения. Тя може да стане пълноценен личен помощник, който ще знае практически всичко за вас и ще разполага с нужната информация в Web за отговор на поставени въпроси. Често пъти Web 3.0 се сравнява с гигантска база данни. Докато Web 2.0 използва глобалната мрежа за обединяване на хората, то Web 3.0 се прилага за създаване на връзки между данни. Все по-очевидно е, че философията на Web 3.0 е крачка към качествена промяна на Интернет – превръщането й от място за търсене и сваляне на информация в отлично организирана система от знания. В заключение може да се обобщят най-важните особености на Web 3.0, които го отличават от първите две поколения:9 1. Фокусиране – върху индивида, човека (преносим или персонален Web). 2. Структура на данните – използва се принцип лайфстрим (lifestream, събития на живо в Интернет), т.е. съдържанието във формата на дневник-календар. 3. Концепция за данните – динамично обединяване в структурни взаимовръзки. 4. Основен източник на информации и знания - Интернет. 5. Технологии – Drag-and-Drop технологията (влачене и пускане) и mashups (набори от данни с различни формати). 6. Класификация на информацията – поведенческа (напълно зависимо от предпочитанията на конкретния потребител). 7. Механизми за извличане и представяне на данни - iGoogle, NetVibes. 8. Стойност на рекламата – определя се от активността на потребителите. 9. Маркетинг – advertainment (ненатрапчива косвенна реклама, представена атрактивно и чрез развлекателни акции). Към услугите, реализиращи концептуалните основи на технологията Web 3.0 могат да се отнесат: Търсачката Google, която съхранява история на търсенето на всеки потребител и отчита неговите предпочитания; Проекта за създаване на модели на машиночитаеми домашни страници и социални мрежи FOAF (friend of a friend); Социалната търсеща система Wink; Микроблогинговата социална мрежа Twitter; multi-touch - технологията сензорни екрани на устройствата Surface; Системата OpenID, осигуряваща единна авторизация на потребителя в цялата световна мрежа. Web 3.0 отбелязва нов етап в еволюцията на Световната паяжина WWW и отбелязва епохата на софтуерни програми с изкустен интелект чрез семантична ориентация на данните. Проект за Semantic Web предполага създаване и използване на 9
http://www.e-xecutive.ru/wiki/index.php/%D0%92%D0%B5%D0%B1_3.0 [10.10.2013]
WWWW
Глава 1. Поява и еволюция на Web.
системи с изкуствен интелект. В такава система компютрите ще могат да взаимодействат помежду си без участието на човека, а приложенията ще се научат да разпознават информацията. Това предполага внедряване във всички документи, Web страници и файлове на специални метаданни, указващи за това кога, къде и кой е създал даден файл, как е форматиран файла, за какво е предназначен и т.н. По този начин приложенията ще станат по «съобразителни», за да могат по-добре да служат на хората (става дума за семантично търсене на естествен език, поддържане на системи за препоръки и подсказки и т. н.). Контролни въпроси 1. Колко поколения Web познавате? 2. Кои са основните различия между Web 2.0 и Web 3.0? 3. Защо е необходимо да изграждаме семантичен Web? Дайте примери.
WWWW
16
17
WEB ТЕХНОЛОГИИ
Глава 2. Основни елементи на World Wide Web 2.1. Информационна система
World Wide Web
Чрез проекта World Wide Web, основан от Бърнърс-Лий, се преследва целта Интернет мрежата да стане достъпна и за неспециалисти. Идеята се състояла в това, да се уеднакви достъпът до разнотипни ресурси, за което били изобретени три ключови механизма: протокол за предаване на хипертекстови документи http, система от универсални адреси URL и езикът за маркирането на хипертекст HTML. Приложени като набор от програми (Web сървър, Web браузър и редактор за Web страници), тези механизми предизвикват своеобразна революция. Простотата и универсалността на новата технология водят до експлозивно нарастване на популярността на Интернет - през първите 10 години броят на Web сайтовете се удвоявал на всеки 3-6 месеца. Освен това от средата на 90-те започва комерсиализацията на киберпространството: наличието на собствен сайт става задължително за компаниите, независимо от техния размер.10 Световна паяжина11 или WWW е само един от ресурсите на Интернет, най-бързо развиващата се част на Мрежата. WWW съдържа множество Web сайтове и Web страници. Тази глобална информационна система в Интернет осигурява на потребителите достъп до мултимедийни документи чрез хипертекстови връзки. Web е базирана на хипертекст (hypertext) технология. Една дума в хипертекстов документ може да служи като указател (hyperlink, препратка) към друг документ, в който да се намери информация, свързана с думата указател. В съвременните Web документи лесно се комбинират хипервръзки, аудио и видео фрагменти, графични икони и изображения, което ги превръща в хипермедийни. Могат да се систематизират няколко основни характеристики на първото поколение Web (Web 1.0): Web e услуга, само част от Интернет (като E-mail, FTP, chat, IP TV, DNS и др). Web съдържа милиарди документи (и други ресурси) разположени по различни Web сървъри. Те са достъпни през стандартни протоколи като HTTP, HTTPS и FTP по техния URL. WWW работи по модела клиент-сървър и използва Интернет, за да транспортира информация. Протоколът HTTP е фундаментален за WWW. 10
Вж. по-подробно в: Върбанов, Р. Интернет технологии в бизнеса и мениджмънта. Изд. “Faber”, В. Търново, 2012, 415 с. ISBN 978-954-400-136-0; Върбанов, Р. Основи на електронния бизнес. Свищов, АИ “Ценов”, 2007, 336 с. ISBN: 978-954-23-0334-3; ISBN: 978-954-21-0446-9. 11 Проектът на хипертекстовата система WWW (World Wide Web – световна паяжина, Web, The Web) е предложен от д-р Тим Бърнардс Лий през 1989 г. Тим Бърнардс Лий написва първия Web сървър и първия клиент WISIWIG браузър в средата на NEXTstep. Той създава и спецификациите за HTTP, URL и HTML (вж.: http://www.cern.ch, http://dc.smu.edu/Kilby/Berners.html или http://www.w3c.com).
WWWW
Глава 2. Основни елементи на World Wide Web
Web сървърите предоставят Web съдържание (документи) при заявка от Web клиент (браузър). Web браузърите интерпретират хипервръзки, осъществяват връзка със сървърите и показват хипертекстови страници. Web формира глобално информационно пространство в Интернет. Системата Web работи върху стандартни мрежови протоколи (TCP/IP, DNS, HTTP, …). Никой не е собственик на Web. Мрежата може да се характеризира като свободно организирано взаимодействие от автономни, но свързани мрежи, осигуряващи комуникация от типа компютър-компютър, чрез доброволно използване на Интернет протоколи и процедури. И в този смисъл Мрежата не се притежава от никого, т.е. тя е на всички и всеки е свободен да публикува каквото поиска. Стандартите и технологиите за развитие на Web се усъвършенстват от организацията World Wide Web Consortium (W3C).
създават
и
Хипервръзките в Web документите са организирани така, че всеки информационен ресурс в глобалната мрежа Интернет еднозначно се адресира. Документът, който се преглежда в определен момент, може да има препратки към други документи на същия сървър или към документи (или други ресурси и услуги на Интернет) на други компютри в Мрежата. Потребителят не забелязва тези операции и работи с цялото информационно пространство на Интернет като едно цяло. Препратките в WWW са не само към специфичните за Web HTML документи, но и към други информационни ресурси и услуги на Мрежата. Освен това, повечето от програмите клиенти (browsers) не само разбират такива препратки, но предоставят и клиентски софтуер за съответните услуги: електронна поща, социална мрежа, блог, месинджър софтуер, електронен магазин, ftp и др. По този начин програмните средства на WWW са универсални за различните услуги на Интернет, а самата информационна система WWW играе интегрираща роля. Системата WWW като цяло се състои от няколко компонента:
Хипертекстов език HTML;
HTTP протокол за предаване на хипертекст;
Web сървъри,
Web страници и Web сайтове;
Браузъри;
Система за WWW адресиране (URL, URN, URI).
2.2. Хипертекстов език HTML
Всички документи в Web използват езика за маркиране на хипертекст HTML (Hyper Text Markup Language), т.е. HTML е езикът на WWW и по същество е метод за представяне на текстове, картинки, звук и видео, които са свързани помежду си в непоследователна плетеница от връзки. HTML е съвкупност от правила и описания (тагове, етикети) за структурата на даден документ, които се интерпретира и показва WWWW
18
19
WEB ТЕХНОЛОГИИ
от браузъра. Първоначално с доста оскъдни възможности по отношение на стиловото оформление на страниците, към HTML постепенно се прибавят правила и описания за работа с многоколонен текст, математически формули, интернационализация на езика, вграждане на мултимедийни файлове в структурата на HTML документи, поддържане на разнообразни форми за диалог с потребителя, технологии като Java и ActiveX, скриптови езици като JavaScript и VBScript. Самият HTML документ е обикновен текстов файл, в който информацията е структурирана чрез елементите на HTML езика, наречени тагове. В зависимост от начина по който се генерират и какво съдържание имат HTML документите може да разделим Web сайтовете на статични, динамични и динамично генерирани. HTML документите (обикновено текст и тагове) се генерират автоматично чрез HTML редактори за създаване на Web страници, напр. Notepad, Adobe Dreamweaver CS4/5/6, Microsoft Frontpage/Expressionweb и Microsoft Office Publisher. Web е паяжина от мултимедийни документи и хипервръзки (препратки). Езикът HTML позволява да се правят препратки към други страници, към части от същата страница, към файлове, картинки, електронна поща и др. обекти. Тези препратки се наричат хипервръзки (или хиперлинкове). Глава 8 от раздел 3 е посветена на новия стандарт HTML. 2.3. HTTP протокол за предаване на хипертекст
HTTP (Hyper Text Transfer Protocol) e комуникационен протокол за извличане на хипертекстови документи на базата на TCP/IP фамилията протоколи от Web сървъри в Интернет с цел тяхното изобразяване от Web клиенти. Следователно HTTP се грижи за доставянето на документи от Web сървъра до Web клиента. Хипертекстовият протокол просто променя начина, по който компютрите предават и получават информация. В хипертекстов документ може да се щракне с мишката върху оцветените хипертекстови връзки или върху други инструменти за управление на документи (например икони или графики).12 HTTP протокола има няколко важни свойства: работи по модела “заявка – отговор”, използва адресиране чрез URL, не поддържа състояние (stateless), обменя ресурси и метаданни за тях, работи в текстов формат. Освен това HTTP е безсесиен протокол, което означава, че резултата на всяка следваща заявка не зависи от резултата на предишната и така всички клиенти получават равноправен достъп до един и същ ресурс. Взаимодействието между клиента и сървъра чрез HTTP се осъществява по модела „клиент-сървър“ в няколко стъпки: 1. Web клиентът изпраща заявка за връзка с Web сървър чрез неговия IP адрес или символично име. 2. След установяване на връзка със сървъра в неговата информационна база се открива търсената страница. 3. Сървърът прехвърля съдържанието на страницата към адреса на клиента
12
Учените и педагозите са единодушни, че конструкцията на Web е подобна на логиката и естеството на съхранение на човешките познания.
WWWW
Глава 2. Основни елементи на World Wide Web
4. Web клиентът при потребителското РС интерпретира съдържанието на получената страница и я изобразява върху монитора. 2.4. Web сървър
Web сървърът (Web server) е специализиран софтуер, който позволява на даден компютър да предоставя информация на други компютри-клиенти, под формата на страници с хипертекст (HTML документи). Информационната система WWW е изградена от множество информационни сървъри (Web servers), които са постоянно достъпни по мрежата и непрекъснато се променят от гледна точка на съдържанието на информацията, начина на нейното представяне и структуриране. Web сървърът съдържа структурирана информация, разположена на отделни страници. Основната функция на Web сървъра е да обработва и изпълнява получените заявки за достъп от Web клиенти до съдържащата се в неговата структура информация, т.е. сървърът е компютър със специализиран софтуер, който съхранява Web страници и може да предоставя достъп до тях на всеки потребител на Интернет, който има клиентска програма (браузър). Клиентът (Web браузър) предава на Web сървъра заявки за получаване на ресурси, обозначени с URL адреси. (вж. фиг. 2.1) Ресурсите, това са HTML страници, картинки, файлове, видео и т.н. Като отговор сървърът намира необходимия ресурс и го връща към клиента. А за пренасянето на информацията се използва протокола HTTP.
Фиг. 2.1. Технология на работа на Web сървър Много често Web сървърът се използва за предоставяне на информация и в други формати - обикновено това са изображения във форматите PNG, JPEG и GIF; XML документи и др. Най-популярните Web сървъри в Интернет са няколко: Apache (65% от пазара на Web сървъри), Microsoft IIS, Google Web Servegr, Lighttpd. Всеки Web сървър съдържа един HTML проект (или множество проекти), който се нарича Web сайт (Web site) и е реализиран чрез множество Web страници, написани на езика HTML. 2.5. Web сайт
WWWW
20
21
WEB ТЕХНОЛОГИИ
Информацията на Web сървъра е структурирана по отделни теми или задачи, които формират информационна точка (Web site). Web сайтът е съвкупност от Web страници, смислово и навигационно обединени, притежаващи общ адрес (домейн име или IP-адрес) и принадлежащи на различни организации или физически лица. Обикновено всеки сайт има домейн име, което го идентифицира в Мрежата. Сайтовете се разполагат на Web сървъри, а достъпът до страниците на сайта става с протокола HTTP. Главната страница на сайта се нарича заглавна (home page) и осъществява връзки с другите страници.13 Достъпът до всяка страница се контролира от Web сървъра, извличането на съдържанието на страницата става по протокола HTTP, а нейното разглеждане се осъществява при Web клиента (Web browser). Обикновено един Web сайт се идентифицира с определен Web сървър, а самата услуга по съхраняването на страниците на сайта се нарича хостинг. В действителност сървърите могат да бъдат няколко на брой и териториално разделени, но обхващащи единна по своята структура и предназначение информация. В този смисъл терминът “Web сайт” има по-общо предназначение – например в корпоративна мрежова среда отделните поделения на фирмата може да имат свои Web сървъри, които заедно с главния сървър да формират Web сайта на компанията. Това означава, че свързаните HTML страници на един сайт може да са разпределени върху множество сървъри. Обхождането на страниците се извършва по разклонена схема, определена от автора на сайта. Технологията на навигация се реализира чрез различни методи, които могат да бъдат изпълнени с разнообразни средства (напр. менюориентирана техника), но имат едно и също предназначение – да предоставят на потребителя наличната информация в най-удобен за ползване вид. Обикновено на всеки сайт съответства едно домейн име, което се идентифицира в Web средата чрез IP адрес (вж. по-подробно т. 2.8 – адресиране в Интернет). IP адресът е адрес на компютъра, в който е инсталиран въпросният сайт. Този адрес представлява поредица от числа, подобно на телефонен номер (например 213.130.85.5). Ако не съществуваше системата за имената на домейни (DNS), всеки сайт щеше да се намира единствено посредством този цифров адрес. Има различни видове сайтове, според тяхното съдържание и предназначение: персонален (личен), информационен, сайт за Web услуги (напр. търсещи системи, директории, форуми, чатове, интернет магазини, различни архиви, социални медии и т.н.), интернет магазин, правителствен, неправителствен, корпоративен портал, Интернет портал, блог, социална мрежа, wiki сайт, общодостъпен или локален Интранет и т. н.14 13
Първият Web сайт е публикуван онлайн на 6 август 1991 г. и се съхранява на сървъра на ЦЕРН. Той е много семпъл - няколко реда текст с вплетени линкове тук-таме. Сайтът е давал съвети за това как всеки може да си изгради своя страница и как да използва хиперлинковете. Днес страницата не е активна, като се пази само нейн дигитализиран образ (скрийншот) от 1992 г. 14 Според изследване на Netcraft към март 2012 г. в Интернет е имало 644 275 754 активни Web сайтове. (How Many Web Sites Are There?, http://www.businessinsider.com/how-many-web-sites-are-arethere-2012-3), Октомври 2013
WWWW
Глава 2. Основни елементи на World Wide Web
2.6. Web страница
Най-малката логическа единица на Интернет - Web страницата (Web page) е файл (HTML документ), който може да съдържа текст, анимация, изображение, видео, звук и препратки и се съхранява върху Web сървър. Препратките са няколко вида: локални връзки към части от същия документ, връзки към документи от същия сървър и връзки към документи от друг сървър. Достъпът до Web страницата се извършва чрез Web браузър по протокола HTTP. В Web пространството има няколко вида Web страници – динамични (страници, които се генерират от специален компютърен софтуер, съхраняват се в база данни на сървъра и се извличат по заявки от потребителя) и статични (обикновен HTML файл, който се съхранява на сървъра). Всяка Web страница има URL адрес15 (Uniform Resouce Locator – Универсален локатор на ресурси), който задава местоположението й в Web или в Интернет (вж. т. 2.8). 2.7. Браузър (Web клиент, клиентски софтуер)
Браузърът (Web browser) е компютърна програма, която се използва за осъществяване на достъп на потребителите до ресурсите на Интернет. Използва се преди всичко за разглеждане на Web страници. Това е клиентски софтуер, който извлича, съхранява и възпроизвежда при заявка HTML документи и други Интернет или Интранет ресурси, използвайки протокола HTTP, т.е. достъпът до WWW се осъществява чрез програма браузър (Web клиент). Всички браузъри са безплатни. Като цяло браузърите поддържат картинки и текст, а основните формати за картинки са JPEG, PNG и GIF. Поддръжката на някои типове файлови формати в браузърите се добавят чрез плъгини. Комбинацията от HTTP и URL протокол позволяват на дизайнера на Web страница да интегрира анимация, картинки, видео, звук и поточна информация в страницата (мултимедийна информация). Благодарение на браузъра може да се навигира в Интернет, да се работи с ЕП, да се публикува в социални мрежи и блогове, да се купуват стоки онлайн, да се прехвърлят файлове, да се публикуват статии в USEnet новини, да се поддържат комуникации в IRC (Internet relay chat) и т.н. Съвременните браузъри се характеризират с интеграция на услугите, т.е. чрез тях може да се осъществи достъп до всички услуги и ресурси на Интернет, като WWW, е-mail, мрежи за обмен на файлове, блогове, социални мрежи, IP телевизия и др. 15
URL (Uniform Resource Locator - Унифициран Идентификатор на Ресурс). Стандартен начин за идентификация на ресурсите в Интернет. Това е адресът на страниците в Интернет. URL се състои от името на домейна, пътят към страницата на сайта и името на файла в страницата. В повечето случаи, когато се говори за адрес на сайта, се има предвид името на домейна, при въвеждане на което се зарежда началната стартовата страница на сайта.
WWWW
22
23
WEB ТЕХНОЛОГИИ
Работата на браузъра при активиране на хипертекстова връзка или въвеждане адрес на Web страница, може да се опише в няколко стъпки (вж. фиг. 2.2). 1. Формира се заявка за ресурс (URL адрес на страница - Google.com). 2. Браузърът се свързва с DNS базата от данни, за да установи IP адреса, който съответства на URL адрес на страница (Google.com) 3. Браузърът се свързва със сървъра, където се съхранява необходимата страница. 4. Сървърът намира съответната страница и я връща като отговор на потребителската заявка. 5. Браузърът показва страницата върху екрана. Обикновено най-напред се извежда текстът на документа. Изображенията се пазят в отделни URL-адреси, така че могат да се зареждат отделно. Връзките към тях се съхраняват в текста на документа и браузърът знае къде да ги намери.
Фиг. 2.2. Технология на работа на браузър В повечето случаи един екран на браузъра е и една Web страница, която представлява един HTML документ. Но HTML документът е текстов файл, който не съдържа в себе си изображения, анимации и друг тип файлове. И за да може браузърът да показва нещо различно от текст, HTML документът съдържа така наречените връзки (линкове) към различни типове файлове, съдържащи се в страницата. Тези файлове могат да бъдат изображения, фотографии, анимации и дори звуци. Съвсем кратко историята най-популярните браузъри и показана в табл. 2.1. Таблица 2.1. Кратка история на популярните Web браузъри Web браузър World Wide Web Mosaic
WWWW
Кратка характеристика Първият Web браузър е създаден през 1990 г. от Тим Бърнърс-Лий за операционна система) NeXTStep. Браузър, създаден през 1993 г. и предназначен за масово използване. Това е един от първите графични Web браузъри.
Глава 2. Основни елементи на World Wide Web
Netscape Navigator
Представен през 1994 г. от Марк Андерсън и скоро се превръща в найпопулярният браузър от средата на 1990 г.
Internet Explorer1 Mozilla Firefox
Първата версия на браузъра на Microsoft, представен през август 1995 г.
Safari Google Chrome
Браузър с отворен код, създаден от доброволни сътрудници на фондацията Mozilla, известен в тестовата си фаза като Финикс и Mozilla Firebird. Официалната версия на Mozilla Firefox 1.0 стартира през ноември 2004 г. Браузър, пуснат от Apple на 7.01.2003 г. и първоначално работи само за Macintosh. Към средата на 2007 г. се появи версия за Windows XP, Vista и Windows 7. Безплатен браузър на фирмата Google. Софтуерът е създаден чрез продукта с отворен код Webkit . Първоначално Google отрича интереса си за създаване на нов браузър, но на 2.09.2008 г. Google Chrome стартира на 43 езика, радва се на огромен успех и набира непрекъснато все повече потребители.
Най-популярните браузъри към Октомври 2013 г. са следните: Internet Explorer (11.7%), Mozilla Firefox (27.2%), Google Chrome(54.1%), Safari(3.8%) и Opera (1.7%).16 Браузърите еволюират непрекъснато и придобиват облика на комплексен клиентски софтуер за обработка и извеждане на различни компоненти на страниците, а така също и за предоставяне на интерфейс между Web сайта и потребителите. Днес браузърите, родени като вторични по отношение на WWW системата, започват да оказват огромно влияние върху нея. Именно до голяма степен под влиянието на баузърите се появи второто поколение - интерактивният Web 2.0, предлагащ на потребителите обслужване, сравнимо по функционалност с обикновените компютърни програми. Следващата вълна е намаляване на ролята на операционните системи. HTML5-приложенията (както са представени от Kindle Cloud Reader, HTML5заместителят на най-популярните електронни четци), е без значение на каква платформа се изпълняват. Те се нуждаят само от модерен браузър и за предпочитане, достъп до Web.
2.8. Адресиране на ресурсите в Интернет
За да се свържем с компютър или ресурс на Интернет трябва да знаем неговия уникален адрес. В Интернет има два равнозначни формата за адресиране, които се различават по своята форма – IP адрес и DNS адрес (домейн име). Освен това се употребява URL адрес на ресурс и адрес за електронна поща, т. е. използват се няколко вида адреси (вж. табл. 2.2). Таблица 2.2. Възможни адреси в Интернет Адрес IP (Internet Protocol)
16
Формат на адреса xxx.xxx.xxx.xxx 12.105.58.9
Същност и употреба Всяка машина в Интернет има уникален номер, който се нарича IP адрес Чрез IP адресите се направлява прехвърлянето на информация в Мрежата, т.е. те са в
Източник: http://www.w3schools.com/browsers/browsers_stats.asp Октомври 2013
WWWW
24
25
WEB ТЕХНОЛОГИИ
DNS (Domain Name System, Система от Имена на Домейни) URL (Uniform Resource Locator, Универсален Локатор на Ресурс) E-mail (Electronic mail)
Компютър.Мрежа.Домейн
протокол://име на хост[:номер на порт]/път, или: тип на ресурса://DNS адрес Име на потребител@Име на email-сървер
основата на свързването и комуникирането. Уникален буквен адрес на свързан към Интернет компютър (клиентски компютър или сървър) или услуга, който се използва за формирането на URL. DNS сървърите превръща (транслират) домейн имената в IP адреси. Показва местоположението на определен ресурс в Web или в Интернет (URL в Web е същия като URL в Интернет)
Получава се от Интернет доставчик или от Web базирана имейл услуга, след регистриране (абониране).
2.8.1. IP адрес Всеки компютър в Интернет има уникален IP адрес, чрез който се показва мястото му в Мрежата. Чрез IP адресите се направлява прехвърлянето на информация в Мрежата, т.е. те са в основата на свързването и комуникирането на компютрите. IP адресът се състои от четири байта информация (на обща стойност 32 бита), представени като четири числа между 0 и 255, разделени с точки, а четенето става отляво надясно, напр.: 179.211.42.235 A
B
C D
Всеки от четирите блока може да съдържа число от 0 до 255. По тази логика най-малкият адрес е 0.0.0.0, а най-големият е 255.255.255.255. Така се получават повече от 4 млрд. адреса при IPv4. Но понеже част от адресите са резервирани за специални цели, а блоковете се конфигурират според типа на мрежата, фактическото количество адреси е по-малко от 4 млрд. Всеки IP адрес се състои от две части: • мрежова част - отнася се за всяка локална мрежа с поне 2-3- компютъра, свързани чрез кабел или безжичен интерфейс; • host -определя всеки един от възлите в мрежата ин¬ди¬видуално. Има няколко видове IP адреси: статично IP (точно зададено от Интернет доставчика IP за определена машина); динамично IP (временно, променящо се IP); реално IP (уникално IP, което ползва компютърът и с каквото го виждат всички в Интернет; локално IP (IP само за локалната мрежа, т. е. в Интернет компютърът се вижда с адреса на gateway-a си. 2.8.2. DNS адрес Понеже IP адресите се запомнят трудно, вместо тях се използват DNS адреси или имена на домейни (Domain name), т. е. DNS адресът съдържа по-удобни за потребителя буквени съкращения, които също се разделят с точка на отделни информационни блокове (домейни, поддомейни). Имената се четат отдясно наляво. Специализираната услуга DNS (Domain Name System,) осъществява връзката и съответствието между IP адресите и DNS адресите. WWWW
Глава 2. Основни елементи на World Wide Web
Форматът на DNS адреса обикновено включва две или повече части, разделени с точка, които се четат отдясно наляво. Компютър.Мрежа.Домейн, напр.: http://en.wikipedia.org/wiki/Domain_Name_System Система за имена на домейни (DNS) DNS е системата, която превежда (транслира) имената домейни към IP адреси чрез DNS сървъри. Името на домейн 17 е уникално име на свързан към Интернет компютър (клиентски компютър или сървър) или услуга, което се използва за формирането на URL. Името на домейн се състои от части, разделени с точка.18 Всяко име на домейн отговаря на един или повече IP адреса, всеки IP адрес отговаря на едно или повече имена на домейни. Когато за едно име на домейн има повече от един IP адрес, това означава, че на едно и също място има няколко сървъра, които споделят входящите заявки. А ако няколко имена на домейни отговарят на един IP адрес, тогава няколко клиенти споделят един голям Web сървър при доставчиците на Интернет услуги. Йерархичната структура от домейн имена се представя като система от области, наречени домейни и подобласти (събдомейни) на три нива.19 Домейни от най-високо ниво (Top Level Domains, TLD); Домейните от второ ниво (domain.com); Домейните от трето ниво (subdomain.domain.com). Домейнът от най-високо ниво определя категорията, в която може да се постави страницата и с него завършва името. Домейните от най-високо ниво не са много – около 250. Те са два вида – географски и административни (комерсиални). Географските домейни от най-високо ниво служат за двубуквено обозначаване на различни страни, напр.: .at=Aвстрия, .au=Австралия, .be=Белгия, .bg=България20, .ca= Канада, .de= Германия, .eu= Европа, .us= САЩ, .uk= Великобритания и т.н. Административните домейни или домейни на организации от първо ниво са: .ac=Академичен сайт (във Великобритания), .com=Търговска организация, комерсиален сайт, .co=Фирмен или комерсиален сайт (във Великобритания), .edu=Образователна институция, .gov= Правителствена организация, .mil=Военен сайт, .net=Доставчик на Интернет услуги, .org=Организация, .aero=авиационен отрасъл,
17
Домейнът (domain - област, територия, сфера, обсег) е името, под което ще се разположи една Интернет страница, когато бъде създадена и публикувана в световната мрежа. Всеки домейн в мрежата е уникален - не съществуват две напълно еднакви домейн имена. 18 Първият домейн в света е купен на 15 март 1985 година - това е symbolics.com. След това са били нужни цели 15 месеца, за да бъдат купени първите 100 домейна. От 1991 година насам домейните в областите .com, .net и .org се изкупуват масово и затова най-много сайтове използват някой от тях. 19
През 1998 г. от администрацията на президента Бил Клинтън бе създадена Internet Corporation for Assigned Names and Numbers (ICANN), за да контролира адресите в Интернет. Всъщност ICANN контролира само една част от интернет - предоставянето на домейни, и има отговорността да осигури, че те съвпадат само с един-единствен интернет адрес. 20 До 2001 година единствено и само Digsys регистрираха имена в BG домейна. След това отделиха тази част от бизнеса си и я прехвърлиха на новосформираната register.bg.
WWWW
26
27
WEB ТЕХНОЛОГИИ
.biz=бизнес, .coop=кооперативи, .info=обща информация, .name=персонални страници, .museum=музеи и др. Домейните от второ ниво са различни имена на сайтове, при което към домейна от първо ниво се добавя абревиатура на компанията, организацията или частното лице, напр. ford.com или aroma-bg.com/. Така се идентифицират конкретна страница на Web или адрес за електронна поща и нейния собственик. Домейн от трето ниво е името на Интернет провайдър (ISP), посредством който се осъществява достъп до Интернет. Процедурата по получаване име в домейн от най-високо ниво се нарича регистрация. От отчетите на Network Solution се вижда, че международните регистрации непрекъснато се увеличават, а домейнът .com е най-предпочитания в Интернет адресите.21 В Мрежата работят голямо количество DNS сървъри ( Domain Name Servers), които съхраняват данните за всеки един регистриран домейн и всеки IP адрес. DNS сървърите са подредени в строга йерархия, която съвпада с йерархията при домейните. Част от сървърите отговарят за домейните от най-високо ниво (Top Level Domains, TLD) - като .com, .net, .org и т.н. Те са малко на брой и се наричат Root Servers. Други DNS сървъри отговарят за домейните от 2-ро ниво от типа domain.com, а трети - за домейните от 3-то ниво от типа subdomain.domain.com и т.н. 2.8.3. URL адрес Идеята за адресиране в Интернет предполага, че всеки ресурс (HTML страница, снимка, звук и т.н.) притежава свой уникален указател за местоположението. URL (Uniform Resource Locator) е адресът на ресурс в Web, т.е. всеки ресурс на Web или в Интернет има стандартен уникален идентифициращ адрес–URL. Това е топографско понятие, което показва, че необходимият ни ресурс се намира в дадена поддиректория на определена машина и е достъпен чрез даден протокол. URL адресът се състои от три части и има следния формат: protocol://host-name[:port-number]/path, или протокол://име на хост[:номер на порт]/път Значението на отделните части е както следва: 1. Име на протокола, който ще се използва за транспортиране на ресурса върху Web. Най-често е http://, но може да се използват и други протоколи в зависимост от типа на търсения ресурс, напр.: http:// - HTTP протокол за връзка с Web сървър, адрес в WWW. ftp:// - FTP сървър. https:// - кодиран HTTP протокол за защитена връзка с Web сървър. 21
Компанията Verisign управлява .com домейна от 1999 г. насам. .COM домейна е най-популярния интернет домейн от първо ниво, с около 100 милиона. В интернет има общо 220 милиона имена на домейни, регистрирани в 280 области от най-високо ниво. Тези домейни са повече от пет пъти от тези, които са регистрирани във второто най-популярно разширение, което е германското .de.
WWWW
Глава 2. Основни елементи на World Wide Web
News://- новинарска група в UseNet. mailto:// - адрес на електронна поща. Irc:// - Протокол за IRC услуга (Internet Relay Chat) за обмен на съобщения в реално време. 2. Име на хост компютъра, върху който е разположен ресурсът. Втората част на URL е името на хоста (името на Web сървъра, където се намира страницата). Обикновено е цялото или част от името на организация, компания, образователна институция, пра¬ви¬телствена структура, физическо лице и т.н. Обхваща всички символи до единичната дясно наклонена черта. Освен името съдържа и разширение, което се предшества от разделител точка. Обикновено името се състои от няколко части разделени от точки. Разширението е име на домейн от първо ниво. Общоприети са следните два типа означения за разширение: Домейни на държави от първо ниво - .bg, .en, .ro, .ru, .uk, .us и др. Комерсиални домейни от първо ниво - .com, .net, .org, .biz, .ac, .edu, .gov, mil и т.н. 3. Име на самия ресурс, дадено като път. Показва разположението на ресурса във файловата структура на компютъра. Обхваща първата единична дясно наклонена черта и символите след нея. Пътят е списък от директории и поддиректории (ако въобще има такива) и указва мястото, където се съхранява интересуващият ни документ. Някои URL не включват разположение на ресурса. В такъв случай сървърът показва страницата по подразбиране, която обикновено е начална страница на сайта. Пример: URL адресът на страницата на катедра „Бизнес информатика” в СА “Д.А. Ценов” – Свищов. http://www.uni-svishtov.bg/default.asp?page=depart&content=zsd&zwid=12, където: http:// - тип на протокола за връзка, хипертекстов документ или директория. www. – означава документ в World Wide Web. www.uni-svishtov.bg – име на Web сървър (хост компютър). uni-svishtov.bg – име на домейна на СА “Д.А. Ценов”. default.asp?page=depart&content=zsd&zwid=12 – път за достъп (разположение) на документа с информация за катедра „Бизнес информатика”. 2.8.4. E-mail адрес Стана ясно, че с помощта на IP адреса или DNS адреса може да се обърнем към всеки компютър в Интернет. Но за да се изпрати електронно съобщение използването на тези адреси не е достатъчно, понеже целта е съобщението да попадне не само в определен компютър, но и при точно определен потребител. За изпращане на електронни съобщения се използва специалният протокол SMTP (Simple Mail Transfer Protocol). Компютърът, с чиято помощ се предават съобщения на електронната поща се нарича SMTP сървър или мейл сървър. Така електронните писма се доставят до точно WWWW
28
29
WEB ТЕХНОЛОГИИ
указания адрес, благодарение на SMTP протокола и мейл сървъра, като се поставят в електронната пощенска кутия (mailbox) на получателя. За получаване на електронна поща се използват протоколоте POP3 (Post Office Protocol, version 3) и IMAP (Internet Message Access Protocol). Контролни въпроси 1. Направете класификация на адресите в Интернет. 2. Какво е DNS? Дайте примери. 3. Каква е основната идея на „клиент-сървер“ технологията в Интернет
WWWW
Глава 3. Система Web 2.0.
Глава 3. Система Web 2.0. 3.1. Основни компоненти на Web 2.0.
Появата и основните характеристики на Web 2.0 бяха разгледани в първа глава. Тук разгледаме технологиите на тази среда, нейните основни характеристики и проявления. Могат да се посочат някои общи черти на социалните услуги: Необходимост от регистрация на потребителите за получаване на възможности да разполагат информация на сайта. Необходимост от пощенска кутия. Публикация на материали в Интернет. Възможност да се преглежда публикуваната информация от всяко устройство или РС и от всяка точка на света. Съхраняване на информация както в закрит (достъпен само за отделен потребител), така и в открит режим (достъпен за всички потребители). Систематизация и търсене с помощта на тагове (ключови думи). Обсъждане на съществуващите материали. Обединяване в тематични групи. Анализ на популярността на разположените в услугата материали. Списъкът на елементите на Web 2.0 може за бъде доста дълъг 22, но тук ще се ограничим в краткото представяне на няколко ключови технологии, които лесно може да се имплантират в бизнес процесите на организацията, като: 1. Web услуги (Web Services); 2. Подкастинг (Podcasting); 3. Блогове (Blogs); 4. Маркиране (Tagging); 5. RSS разпространение на новини; 6. Социални мрежи (Social Networking); 7. Технология за взаимодействие на браузъра със сървъра без да се презареждат страниците (AJAX); 8. Wiki технология; 9. BitTorrent протокол за обмен на файлове между потребители чрез Интернет; 10. Mashup. Съществува голямо разнообразие от Web 2.0 инструменти, но в центъра на вниманието са хората и софтуерните приложения, които придават нови измерения на социалните взаимодействия. 3.2. Web услуги
Web услугите (Web Services) или Web служби са програми, до които се осъществява достъп чрез протокола HTTP, а обменът на данни става във формат XML (или друг производен от XML). Основната задача на Web услугата е да осигури междупрограмно взаимодействие. За разлика от традиционното Web приложение, при 22
Вж. напр.: http://web2.wsj2.com
WWWW
30
31
WEB ТЕХНОЛОГИИ
Web услугата няма потребителски интерфейс (GUI). Вместо него има програмен интерфейс, които може да бъде извикан дистанционно през Web. Web услугата не е предназначена за крайните потребители – нейната основна задача е да предоставя услуги на други приложения (Web приложения, конзолни приложения, приложения с графичен потребителски интерфейс). Обикновено Web услугата се реализира на сървъра на компанията, която я създава, а за потребителите по всяко време са достъпни най-актуалните данни. Web услугите са платформено независими, понеже инструменти за работа с HTTP и XML има във всеки съвременен език за програмиране. Web услугите имат няколко важни предимства: базирани са на открити стандарти и протоколи, осигуряват взаимодействие на програмни системи независимо от тяхната платформа, използването на протокола HTTP поддържа взаимодействие на компютрите чрез защитна стена, благодарение на използването на XML се постига лесно разработване и тестване на Web услугите. 3.3. Подкастинг (Podcasting)
Изразът „подкастинг“ (podcasting) идва от сливането на думите iPod (MP3 плейър на Apple) и broadcasting (радио разпространение), т.е. процес на създаване и разпространение на видео- и аудиофайлове (подкастове)23 в Мрежата, които оттам се свалят на настолни или мобилни компютри, таблети и смартфони. Подкастингът се отличава от другите начини за достъп до видео- и аудиосъдържание по това, че слушателите му сами се абонират да получават файловете с помощта на технологията RSS. След като потребителят се абонира за подкасти, специален софтуер регулярно се свързва със сайта доставчик и сваля новите файлове. След това файловете могат да се запазят в плейъра и да се прослушат в удобен момент. За прослушване на подкастовете има множество програми, като iTunes, Zune Software, Rhythmbox, gPodder, AmaroK или Banshee. Те следят за обновяване на подкаст-лентите и тяхното автоматично зареждане. Има два режима за достъп до мултимедийни файлове през Интернет: Директно изтегляне, когато се изтегля нещо (филм, клип, песен) на потребителския компютър, за да се гледа по-късно. Стрийминг (поточно видео), когато се гледа нещо на живо (музикални, политически, спортни и др. събития) или видео клип от даден сайт, напр. YouTube. Поддържат се два начина за слушане на подкаст. Първият е директно от сайта чрез натискане на бутона Play до предаването, което искаме да чуем. Вторият начин е чрез абонамент от потребителски компютър за подкастите, които да пристигат
23
Подкастът (podcast) е асинхронно радиопредаване, което се излъчва в Web. Подкастовете са аудиоили видео файлове, достъпни за автоматично сваляне (download) от Интернет чрез софтуера iTunes на iPod (или други програми) с помощта на RSS лента. Потребителите имат избор да ги слушат (гледат видео) на компютъра или на плейър (MP3 player). Това позволява на подкастите да се слушат по всяко време и на всяко място. Удобството на този формат допринася за неговата все по-голяма популярност.
WWWW
Глава 3. Система Web 2.0.
автоматично в личния компютър (таблет, смартфон). При наличие на mp3 плейър, може да се настрои програмата за подкаст да синхронизира подкаста автоматично с плейъра и да се слуша предаването когато и където поиска потребителя. 3.4. Блогове (Blogs)
Блогът (web log) е вид сайт, публичен онлайн дневник с коментари в реално време. Като сайт от по-ново поколение блогът има няколко специфични характеристики, които го отличават от класическите сайтове (1 поколение Web сайтове): Блогът е социален. Всеки блог е съобщество от хора, в определен смисъл. Авторите на блогове (блогъри) образуват също общност от хора, които споделят нещо със своите читатели. Много от читателите познават лично блогъра, следят и коментират неговите постове. В този смисъл блогът е уникален инструмент за информиране и общуване с широк кръг от потребители и за поддържане на обратна връзка. Блогът е личностен, има конкретен автор или група автори – реални хора. Блогът е своеобразен разговор. Хората разговарят за това, което ги интересува или за това, към което имат лично отношение. Това е разликата межде блога и монолога на обикновените новини. Разговорът се води по определена тема или събитие, които интересуват блогъра и неговата аудитория. Всеки блог съществува във времето. Записите се подрежда в обърнат хронологичен вид. Доколкото блогът е свързан с времето, той се стреми в максимална степен да е актуален. А доколкото е личностен, то новите събития се осмислят и получават определена интерпретация. Затова блоговете са благодатна среда за раждане на нови идеи, а социалното измерение на блоговете дава на тези идеи подходяща среда за разпространение и развитие. Виртуалните дневници замениха успешно персоналните Web страници, защото предлагат много по-лесно поддържане и управление, както и още едно изключително важно нещо – динамичност. Освен средство за комуникация с приятелите, всеки блог представлява и медия, с чиято помощ популяризирането на нови проекти или идеи става много лесно и бързо. В повечето случаи този Webсайт се поддържа от един човек и е желателно информацията да бъде обновявана регулярно, за да е актуален. Типичният блог съдържа текстова част, снимки, връзки с други блогове и Webсайтове, които по един или друг начин са свързани с тематиката на блога. Според предназначението могат да се обособят няколко типа блогове: Персонален блог. Съдържа записи за събития, свързани с автора блога. Професионален или специализиран блог. Имиджов блог (бренд блог). Създава се за да утвърждава и поддържа имиджа на компания, продукт или човек. Блог за новини. Корпоративен блог. WWWW
32
33
WEB ТЕХНОЛОГИИ
Корпоративният блог е предназначен за връзки и комуникации с клиенти и бизнес партньори, а така също за по-ефективна организация на работата на служителите в компанията. Създаването, организацията и поддържането на корпоративния блог се извършва от служители на компанията. Може да има две разновидности – публичен и вътрешнокорпоративен блог. Публичният се използва като ежедневен пряк комуникационен канал с целева аудитория и свободно изразяване на мнения по отношение на продуктите и услугите на организацията. Вътрешнокорпоративният блог е ориентиран към подобряване на взаимодействието на служителите, обучение и повишаване на квалификацията и работа в екипи, провеждане на дискусии и размяна на мнения и т.н. Този тип блог има немалко предимства пред традиционните вътрешнокорпоративни комуникации (мейл, телефон, чат програма) и понастоящем много голяма част от организациите го използват успешно като допълнение към корпоративния сайт. Това се дължи на преимуществата и удобствата, които корпоративния блог осигурява – оперативност на публикациите, възможност за свободно коментиране на различни аспекти от дейността на компанията, представяне и защита на алтернативни мнения, подобряване на взаимодействието на служителите и др. Според вида на материалите, които се публикуват в блога, може да има няколко вида блогове. Аудио блог (audio blog). Блог, който представя преди всичко аудиофайлове като музика или подкасти. Много често аудиоблогът се нарича още МР3 блог или музикален блог. Видеоблог или влог (vlog - термин, който е създаден чрез комбиниране и съкращение от видео и блог – video и blog). Това е блог, в който се публикуват основно видеоклипове от различно естество. Фотоблог (photoblogging ). Блог, който се използва предимно за публикуване на снимки и изображения, които се създават от фотоблогъри (photobloggers). Една интересна разновидност са микроблоговете. Микроблогът (micro-blogging, microblog) е аналог на обикновения блог, но с кратки постове или съобщения (100—200 символа). Става популярен през 2007 г. със създаването на Twitter, най-голямата микроблогова система в света. Микроблоговете позволяват на потребителите си да разменят малки елементи от съдържанието на микроблога, като например къси изречения, собствени снимки или видео връзки, да коментират записи на приятели, да се абонират за SMS известяване за нови записи на определени хора и т. н. Съществуват и микроблогове с реклами, които популяризират интернет страници, корпоративни сайтове, услуги и/или продукти и сътрудничество (колаборация) в организация. Микроблоговете може да се разглеждат като допълнение към нормалните блогове, а честотата на обновяване по правило е по-голяма, отколкото при блоговете. В този смисъл може да се приеме, че микроблоговете са нещо средно между блоговете и програмите за чат и изпращане на моментални съобщения (IM). WWWW
Глава 3. Система Web 2.0.
Най-популярният микроблог - Twitter, позволява да се пишат кратки съобщения с дължина 140 символа. Интересното е, че запис (туит) може да се добавя не само чрез Web интерфейс, но и чрез SMS или с помощта на специални програми. Блоговете оформиха специфично пространство, т.нар. блогосфера съвкупността от всички блогове в Интернет. Съществуващите милиони блогове са свързани помежду си, блогърите четат и коментират различни постове 24 в други блогове, и по този начин се формира собствена субкултура. Блогосферата е фокусирана към една от най-характерните черти на блоговете в сравнение със обикновените Web страници и интернет формати – свързаните помежду си блогове могат да формират динамична световна информационна среда. 3.5. Маркиране (Tagging)
Маркирането (Tagging) е добавяне на метаданни (описания с ключови думи и термини) към съдържание или части от него, с цел да се ползват при търсене и разглеждане (browsing) на информация през Интернет. Таговете (кратки ключови думи) може да са свързани с постинг в блог. Всеки таг по-конкретно обяснява информацията, която е написана в съоветния постинг. Таговете може да се използват за организирането на продуктите и при търсене на конкретен продукт. Те се визуализират на продуктовата страница и ако някой от тях бъде натиснат, ще се покаже списък от продукти, които са маркирани с него. Един чудесен пример за такъв тип споделяне е безплатната база данни за връзки, намираща се на адрес http://del.icio.us. Съществуват и браузъри като Flock например, при който с помощта на нови механизми при добавянето на нов сайт към локалния списък с Bookmarks или Favorites той автоматично се изпраща и към персоналната база данни, достъпна онлайн. 3.6. RSS разпространение на новини
В средата на Web 2.0 има възможност за едновременно разпространение на аудио- и видеоинформации на различни страници или web сайтове, като правило, с използване на технологиите RSS или Atom. RSS (Really Simple Syndication, «действително просто обединение (на информация)» e технология (софтуерна програма), извличаща и събираща на едно място новини и информация от различни интернет страници и сайтове. Технологията позволява абониране и получаване едновременно на информация от множество сайтове без те да бъдат директно посещавани. За ползване на услугата е необходимо инсталиране на RSS четец. При използването на RSS не е нужно да се отварят интернет страниците, на които са поместени новините, достатъчно е да се отвори RSS четеца (напр. Google Reader), който ще извлече необходимата и актуална информация. Получените чрез RSS новини се обновяват автоматично, така че потребителите разполагат по всяко време с актуална информация. 24
Постът е отделно взето съобщение във форум по някаква тема, процесът на писане на съобщение. Може да бъде отстранено или редактирано от администратора по свое усмотрение, без предварително предупреждение (обикновено при нарушаване на определени правила). Постът може да се състои от изказвания на автора по някаква тема, коментари или цитати от други потребители.
WWWW
34
35
WEB ТЕХНОЛОГИИ
RSS форматите са специфично форматирани на езика XML и позволяват обединяване и групиране на информация от сайтове, блогове и най-различни други източници. За целта се използват от програми или онлайн услуги, наречени агрегатори, които могат автоматично да получават и показват последните новини от произволен брой информационни канали (rss feeds, т. нар. хранилки). Използвайки технологията RSS, всеки може да следи за нужната му информация едновременно от няколко източника, при това без да е необходимо дори отварянето на браузър. Освен това с нея се предоставя възможност много лесно да се вземе информация от едно място (сайт) и да се визуализира на друго място (друг сайт). Голямо удобство е обстоятелството, че RSS може да бъде визуализиран директно посредством софтуер за четене в друг Web сайт, на екрана на клиентски компютър или на мобилно устрйство (смартфон, медиен плейър или таблет). При използването на RSS има два основни момента: Представяне на съдържанието - реализира се в строго определена форма (съгласно световни стандарти), от интернет сайт, предлагащ RSS на своите потребители (не всички сайтове предлагат RSS). Прочитане на съдържанието - извършва се от потребителите, чрез RSS четец (RSS Reader). Информацията е достъпна чрез адрес (линк), публикуван от интернет сайт. Този линк се записва в RSS четеца, който прочита съдържанието и го предоставя на потребителя в определена форма. По този начин е възможно събирането на линкове от различни страници в RSS четеца. Това спестява време и е удобно за потребителя. Необходимо е единствено да отвори четецът и с едно кликване може да се прочете която и да е новина, от който и да е сайт, за който е абониран конкретният потребител. Има няколко начина за абониране за RSS новини: 1. Използване на Web базиран четец, като например Google Reader (може да се ползва безплатно при наличие на акаунт в Gmail), My Yahoo! и My AOL. В този случай RSS каналите се добавят директно в персоналната потребителска страница. 2. Инсталиране на четец на новини, който показва RSS каналите от Web сайтовете, които сме избрали и позволява да се виждат стотици заглавия наведнъж. След като се инсталира RSS четеца на новини, може лесно да се добавят RSS канали от сайта чрез избор на опцията за абонамент, която се намира в дясно на всяко хедърче на категория (рубрика). 3.7. Социални мрежи (Social networking)
По определение, под социална мрежа се разбират хората, свързани със социални отношения. Когато става дума за Web, то се касае до интерактивен многопотребителски сайт, чието съдържание (контент) се създава от потребителите на мрежата. Така се формира автоматизирана социална Web среда, където могат да общуват големи групи потребители, обединени от общи интереси и предпочитания. Връзката между потребителите се осъществява чрез Web сервиза на вътрешна поща или чрез програми за мигновен обмен на съобщения. WWWW
Глава 3. Система Web 2.0.
Основната идея на “социалната мрежа” е потребителите да споделят интересна информация помежду си, като предлагат линкове към интересни публикации в интернет. Останалите потребители гласуват “по желание” в зависимост от това, до колко интересна им е допаднала публикацията. Колкото повече положителни гласове е събрало дадено предложение, толкова по-напред се издига то в класацията от всички предложения. Тези предложения, които са събрали най-много гласове заслужено си извоюват място на заглавната страница, което означава, че ще бъдат забелязани от наймного потребители. В тези мрежи участниците са свързани помежду си и при проследяване на определени връзки лесно могат да се намерят хора с общи интереси, определени умения или качества. По подразбиране онлайн социалната мрежа предполага използване найчесто на сайтове от тип Web 2.0 и те са известни като „социални” сайтове. Web 2.0 сайтовете функционират като онлайн общество от интернет потребители регистрираните в дадена група потребители споделят общи интереси като новини, хоби, религия или политика или други предпочитани области. Веднъж щом получи достъп до социалната мрежа, човек започва да се „социализира”. Това социализиране може да включва писане на постове, четене на профилите на другите регистрирани потребители и влизане в онлайн или мейл контакт с тях. Социалните мрежи се появяват през 1995 г. с американския портал Classmates.com. Проекта се оказва успешен и провокира появата на няколко десетки аналогични сервизи в следващите няколко години. Като официално начало на бума на социалните мрежи се приема периода 2003—2004 г., когато са пуснати LinkedIn, MySpace и Facebook.25 Социалната онлайн мрежа позволява лесно добавяне на приятели, достъп до множество социални мрежи от цял свят и достъп до нова информация. Освен това всеки потребител получава уникалната възможност не просто да общува и да твори, но и да споделя плодовете на своето творчество с огромна аудитория в реално време. Има няколко типове социални мрежи според вида на информацията: споделяне на отметки, споделяне на хипервръзки, споделяне на видео, споделяне на авторско съдържание (картинки, музика, видео, статии и др.) и за споделяне на лична информация (микроблогове). Социалните мрежи за споделяне на отметки (Social Bookmarking) обхващат Web сайтове, които са отметнати от потребителите като полезни и интересни. Всички Webсайтове са организирани в категории чрез тагове, които са определени от самите потребители. Сайтовете за социални отметки позволяват на потребителите да запазват линковете към определени страници, на които са попаднали и са им допаднали по една или друга причина. Едно от основните предимства на социалните отметки е това, че те не се запазват само локално в браузъра, с който потребителят сърфира в Интернет, а са достъпни по всяко време от всеки един браузър. Полезна опция, която те предлагат, е споделянето на тези отметки с останалите участници в мрежата. Още едно 25
LinkedIn се създава с цел да се установят/поддържат делови контакти. Собствениците на MySpace и Facebook още в началото поставят ударението върху удовлетворяване на човешките потребности от самоизразяване.
WWWW
36
37
WEB ТЕХНОЛОГИИ
предимство е възможността да се свържем с потребители, имащи същите интереси като нас, както и да добавим техните линкове към нашата колекция. Примери: Twitter, Digg, Yahoo!Buzz, Reddit, StumbleUpon и др.26 Медийните социални сайтове са интернет общества, които са построени на базата на споделяне на някакъв тип медия. Като медия се възприемат следните неща снимки и фотоалбуми, музика, блогове, форуми, видеоклипове и др. Споделяне на видео. Позволяват публикуването на видеоклипове от всички потребители, а също така дават и свободен достъп до тези клипове на останалите потребители. Примери: YouTube, Hulu, DailyMotion, MetaCafe, megaVideo и др.27 Споделяне на аудио. Потребителите споделят любима музика от различни жанрове с други хора. Напр. Last.FM съдържа онлайн радио, което може да бъде създадено според предпочитанията на отделните потребители; предоставя информация за изпълнителите и класации на най-слушани песни или изпълнители за даден период; осигурява възможност на тези, които се занимават с музика, да публикуват своите песни. Споделяне на снимки. Снимките се качват на Web сайта, в персоналното пространство на всеки потребител, директно от личния компютър или чрез изпращането на e-mail от мобилния телефон. Снимките могат да се разделят на тематични колекции, според личната преценка и предпочитанията на собственика. Найпопулярният сайт от този тип е Flickr. Интересна разновидност са т. нар. „социални бизнес мрежи“, които позволяват на компаниите да използват предимствата на новата социална среда в интерес на бизнеса. Днес най-правдоподобната информация за дадена компания се намира в социалните бизнес мрежи. Социалната бизнес мрежа предлага различни ползи за компаниите и потребителите. Откриване на нови начина за реклама и печалба; Установяване на «жива» връзка с огромна аудитория от хора, които споделят своите навици, живот, опит и интереси. Още повече, че много от клиентите днес загубиха доверие в традиционните търговски и маркетинг услуги; Изграждане и затвърждаване на положителен имидж за компанията; Потенциален клиент може да установи лесна връзка на ниво личен контакт с дадена организация. Това отстранява усещането за стерилен образ, като се акцентира на индивидуални личности, които се идентифицират с лицето на компанията; Лесно намиране на експерти, които могат да бъдат от помощ в една или друга ситуация. По всяко време потребителите могат да получат ценна информация за даден проблем от професионалисти, които вече са се сблъсквали с него. От друга страна,
26
Вж. Top 15 Most Popular Social Bookmarking Websites | Октомври 2013. http://www.ebizmba.com/articles/social-bookmarking-websites 27 Вж. Top 15 Most Popular Video Websites | Октомври 2013. http://www.ebizmba.com/articles/video-websites
WWWW
Глава 3. Система Web 2.0.
социалната бизнес мрежа помага на професионалистите да се обградят с добри партньори, с които са в състояние да осигурят пълно обслужване на клиента. Сред най-популярните бизнес социални мрежи са: LinkedIn.com, Ecademy.com, Spoke.com, Xing.com и др. 3.8. Технология AJAX
AJAX (Asynchronous JavaScript And XML) е подход към създаването на потребителски интерфейси за Web приложения, при който Web страницата не се презарежда, а асинхронно се зареждат само нужните потребителски данни. Така ресурсите, които са изградени с помощта на AJAX, работят значително по-бързо от другите. Това е възможност на JavaScript да се свързва чрез HTTP заявки с даден сървър, изпълнявайки в същото време друг скрипт и връщайки текст или XML код. Така ресурсите, които са изградени с помощта на AJAX, работят значително по-бързо от другите. Използването на AJAX прави излишно обновяването на браузъра за изпращане или получаване на информация, защото всичко се ъпдейтва автоматично. Технологията лесно спечели голяма популярност 28 , тъй като гарантира удобство на потребителите и способства за намаляване на изразходвания трафик. Също така значително се редуцира броят на операциите, необходими за извършването на транзакции по мрежата, и се създават още много други удобства. Ето няколко от най-важните характеристики на тази технология: AJAX използва XML и HTTP заявки, прави Web страниците по-добри, това е браузърна технология, AJAX е базиран на отворени стандарти (JavaScript, XML, HTML, CSS). Днес всички браузъри поддържат отворените стандарти и свободно интерпретират създадените с тях Web страници. AJAX се утвърди като технология за създаване на по-добри, по-бързи и подинамични Web страници. По-подробно за тази технология – в глава 10. 3.9. Wiki технология
По определение Wiki е технология, предназначена за колективно разработване, съхраняване, структуризация на текст, хипертекст и файлове, вкл. мултимедийни файлове в Web. Wiki е колекция от взаимосвързани помежду си записи, мрежова технология за организиране на свързани помежду си Web страници, всяка от които може да бъде посетена и редактирана от потребителите си по всяко време, защото историята и всички версии на страниците се запазват. За оформлението се използват команди, които са поинтуитивни и по-лесни от съответния код на HTML. Първоначално създателят на технологията Вард Каннингъм нарича това приложение среда за бързо хипертекстово взаимодействие. По-късно се въвежда терминът Wiki-Wiki (Уики-Уики), което на хавайски означава "бързо-бързо" и това е метафора, която отразява скоростта на създаване и обновяване на страниците с помощта на технологията. При работа с Wiki човек може да не се грижи за използване на команди на езика за хипертекст, защото самият текст на всяка страница се интерпретира от програмата като хипертекст. 28
Технологията AJAX стана популярна, след като Google започна да я използва активно при създаването на своите сайтове, като Gmail и Google Maps.
WWWW
38
39
WEB ТЕХНОЛОГИИ
Wiki технологията има няколко важни особености: Wiki е Web сайт, където всеки потребителите може лесно да си сътрудничат и да споделят информация. Wikis са съвместни сайтове. Уики е Web сайт, където потребителите могат да добавят, премахват и редактирате всяка страница с помощта на Web браузър. Wikis е страница или колекция от Web страници, предназначени да позволят на всеки, който има разрешение за достъп да допринесе за създаване или промяна на съдържанието. Wikis са вид социален софтуер, който прави лесно да общуването онлайн. Понеже статиите са лесни за редактиране и четене, Wiki е перфектен инструмент за онлайн сътрудничество, натрупване и обогатяване на знанието. Днес все по-често Wiki се разглежда като алтернатива на старите Web сайтове. Най-характерните черти на тази технология са взаимовръзката на страниците и колективните усилия за създаването им. Така хора от различни географски точки и с разнообразни интереси и знания могат да работят независимо един от друг върху създаването на своите статии. Може да се направи аналогия с реалните библиотеки, но разликата е, че Wiki-тата представляват динамични системи за съвместно публикуване и поддържане на информация, т.е. при тях всеки документ може да бъде модифициран от множество потребители (автори). Най-голямото уики е Wikipedia - свободна многоезична електронна енциклопедия, която поддържа милиони страници и е един от най-посещаваните сайтове в Интернет29. Много показателно за възможностите на тази технология и за надеждите, свързани с нея е мнението на Sunir Shah от 2005 г.30: „Бъдещето в управлението на знанията не е в търсенето на информация или в управлението на хранилища с цифрови обекти: всичко това е наука за мъртвата информация. Бъдещето е в това, как си разказваме истории един на друг, как създаваме от тези истории ново знание и сами се променяме чрез тези действия. Това е активно, мощно и живо бъдеще на Пътя на Wiki (WikiWay)”. Има няколко основни принципа на Wiki технологията. Wiki е отворена база данни от смислови тематични асоциации: връзки към вече налични и още несъществуващи Web страница в рамките на уикито.
29
Проектът Wikipedia (Уикипедия) се появи през 2001 г. и вече навърши 10 години. От самото начало продължава да се пише и редактира на 100% от доброволци, защото никога не са спирали да се присъединяват нови хора към проекта. Всеки може да напише статия за каквото поиска или да допълни и промени чужда статия. Има две основни правила: статията трябва да е неутрална и обективна и нейното съдържание трябва да може да се провери, т.е. да е базирана на вече публикувани материали. Wikipedia продължава да е 100% независима и свободна от реклами. В същото време това е един от най-посещаваните сайтове в света и е № 5, с повече от 400 милиона читатели месечно. Създателят на Wikipedia Джими Уейлс обосновава виждането си за колективния разум по следния начин: "Представете си един свят, където всеки човек на планетата има достъп до цялото човешко познание. Да създам и доставя свободна енциклопедия с най-високо възможно качество до всеки отделен човек на тази планета на неговия собствен език – това съм аз. Това правя. Това е целта на моя живот." Днес Wikipedia се поддържа на повече от 250 езика. 30 Meatball - http://meatballwiki.org/wiki/ [10.10.2013]
WWWW
Глава 3. Система Web 2.0.
Съществува отговорност от страна на редакторите на съдържанието: всяка редакция се съхранява под уникален идентификатор с дата и час, с потребителско име или IP-адрес. Характерна особеност е многопосочния поток на информацията “от много към много”: интерактивност, общностен дух, колективна интелигентност, “мъдрост на тълпите”31. Днес има много примери за приложение на Wiki технологията в различни области: 1. Корпоративни приложения, напр. Управление на проекти, възлагане и отчитане на задачи; Интранет, групова електронна поща; Продуктова документация, “жълти страници”; 2. Приложения в образованието, напр. Електронно обучение и изпитване; Съвместна изследователска и развойна дейност; Споделяне на изчисления и резултати; Дискусии, обмен на идеи, брейнсторминг; 3. Приложения в други области, напр. медицина, биотехнологии, история и т.н.
3.10. BitTorrent технология
Торентът (BitTorrent)32 е специален протокол, предназначен за обмен на файлове мужду потребители. Главната особеност на този протокол е в това, че потребителите прехвърлят файлове не от някакъв сървър, а от директно от своите персонални компютри. Затова BitTorrent е peer-to-peer мрежа (P2P, мрежа от точка до точка), създадена за трансфер на файлове. Потребителите се свързват директно, за да могат да получават и в същото време - да изпращат файлове, докато един център (central tracker) контролира всичко. Участниците в мрежата се наричат пиъри (peers, от peer - същ. равен, на същото ниво, точка от мрежата) и са едновременно "снабдители" и "потребители" на ресурси, за разлика от модела клиент-сървър, където само сървърите поддържат ресурси и услуги, а клиентите (clients) могат само да ползват поделените ресурси на сървъра. BitTorrent разполага с възможност за контролиране на скоростта на качване и изтегляне, с модул за подробна информация относно файловете, които се свалят и тяхното качество, възможност за увеличение на скоростта на изтегляне и много други възможности.
31
Принципът "мъдростта на тълпата" (колективен разум или краудсорсинг) е сравнително нов и доказва, че колективния потенциал на голяма група обикновени хора е по-висок от този на избрани професионалисти или хора от интелектуалния елит. Днес към него има огромен интерес в различни области, вкл. бизнес, политика, култура, образование, наука и т.н. определяща роля за популяризирането на краудсорсинга има появата на Интернета и доступа до нейните ресурси на огромно количество хора. 32
Терминът BitTorrent може да се отнася до: 1.BitTorrent (протокол), peer-to-peer (P2P) комуникационен протокол за споделяне на файлове; 2.BitTorrent (фирма), компания, която разработва и поддържа протокола BitTorrent; 3.BitTorrent (софтуер), оригиналният BitTorrent клиент; 4.BitTorrent DNA (Delivery Network Accelerator).
WWWW
40
41
WEB ТЕХНОЛОГИИ
Един от основните принципи на Web 2.0 проличава най-добре тук, а именно: колкото повече потребители използват дадена услуга, толкова по-добра става тя. Цялата работа се организира от програма BitTorrent клиент. На сървъра с информация за файловете (торент трекер), физически не се съхранява ниво един файл. Всички файлове се съхраняват върху потребителски РС. Сървърът само поддържа списък на предоставяните файлове и координира достъпа до тях. При работа с програма торент всичко протича във фонов режим и не изисква сериозни ресурси от компютъра, т.е. по време на свалянето потребителят може да се занимава с други задачи. Тази технология промени коренно представите за обмен на информация и понастоящем използването на торенти е най-удобния и комфортен начин за обмен на файлове в Интернет.
3.11. Mashup Mash-up (смесване) е услуга, която напълно или частично използва като източници на информация други услуги, предоставяйки на потребителя нова функционалност при работа. Най-общо казано, това са сайтове или програми, които събират съдържание от различни места по определени критерии (ключови думи), а след това наслагват събраната информация една върху друга и по този начин се получава изцяло нова услуга. В крайна сметка тази услуга може да стане нов източник на информация за други Web Mash-up услуги. По този начин се формира мрежа от една от друга услуги, интегрирани по между си. Пример: сайт за търсене на имоти е интегриран с картите на Google Maps и така представя нова, по-удобна услуги, с чиято помощ всеки потребител може веднага да види имота, който го интересува върху картата. Mashup e основна градивна единица на Web 2.0 и се използва за интегриране изходите на различни приложения в едно абсолютно ново приложение, чрез технологиите Open API, RSS синдикация, ATOM, RDF, Web услуги (web services), OPML (Outline Processor Markup Language). 33 Архитектурата на Web Mashup се състои от три части: 1. Провайдер на съдържание - това е източника на данни. Данните са достъпни чрез API и различни Web протоколи, напр. RSS, REST и Web услуги. 2. Mashup-сайт - Web приложение, предлагащо нова услуга, която използва различни източници на данни, различни от тези на конкретния сайт. 3. Браузър на клиента - това е потребителския интерфейс на Mashup-а. Понастоящем има ясно обособени няколко Mash-up услуги: Карти, напр. Chicago Crime. 33
Създаването на Mashup в корпорацията се нарича Enterprise 2.0 (Вж. по-подробно в: Върбанов, Р. Бизнес в средата на Web 2.0. (Web 2.0, Enterprise 2.0, Cloud Computing, SaaS). Библиотека „Стопански свят”, АИ Ценов, Свищов, 2011, №111, 243 с. ISSN 1310-2737.)
WWWW
Глава 3. Система Web 2.0.
Видео и фотоархиви, напр. Flickr - хранилище на изображения, даващи възможност на потребителите да организират своя колекция от снимки и да ги разменят помежду си. Като се използва API Flickr, данните може да се използват за създаване на мешапи. Търсене и пазаруване, напр. Travature - портал за пътешествия, който интегрира авиополетите, гидовете за екскурзии и информация за хотели. Потребителите може да обменят снимки и да обсъждат впечатленията си. Новини, напр. Digg - смесване на различни новинарски Web сайтове, който 100% се контролира от потребителите на ресурса. Контролни въпроси 1. Дайте определение за Web 2.0. 2. Кои са основните технологии в Web 2.0? 3. Кои социални мрежи за професионалисти познавате?
WWWW
42
43
WEB ТЕХНОЛОГИИ
Глава 4. Търсене в Интернет. 4.1. Технологии и инструменти за търсене в Интернет
В Мрежата се съхранява огромно количество най-разнообразна информация и всеки ден се добавят хиляди нови страници. Търсенето е една от най-често изпълняваните дейности, наред с електронната поща, чатенето и комуникацията в социалните мрежи. Има няколко начини за търсене на информация в Интернет: чрез посочване адреса на страницата; чрез придвижване с помощта на хипервръзки; използване на онлайн енциклопедия; абониране за интересуващата ни тема; запитване във форум, блог или социална мрежа; използване на търсеща система. Най-предпочитаният и универсален начин да се намери нещо в Интернет, е да се използва някоя от многобройните търсещи системи. Услугите за търсене в милионите Web сайтове са именно основополагащото звено на Web. Без Google, Yahoo, MSN и многото други привични днес търсачки, броденето на потребителя в Интернет по скоро би приличало на лутане на заблуден пътник в гората в тъмна нощ. Значимостта на търсещите системи е огромна и не случайно много потребители в качеството на стартови страници посочват адресите на търсачките (Google, MSN Bing, Yahoo, AOL, Ask) и именно от тях започват сърфирането си в Мрежата. Реално основният обем навигация в Web се извършва чрез търсачките и техните ботове и роботи за търсене (crawlers). Претърсването на Web отнеме много време и усилия и за да се намери полезната и необходимата информация, трябва да се научим как да търсим и къде да я търсим, да познаваме възможностите на подходящите средства и технологии. Едновременно с експлозивното развитие на Интернет, непрекъснато се усъвършенстват и инструментите за търсене. Технологиите за търсене в Интернет се делят на няколко големи групи:34 • Машини за търсене (търсачки), използващи ботове (паяци); • Директории (най-често са каталози, поддържани от хора); • Мета търсачки, които използват резултатите от други търсещи машини. 4.2. Машини за търсене
Търсачка или търсеща машина (Web search engine) е специализиран софтуер за извличане на информация, която се съхранява в компютърна система, корпоративна мрежа или Интернет пространството.
34
По-малко популярни са търсачките, базирани на принципа „pay per performance“ и добавящи сайтове срещу заплащане. Характерно за тях е това, не предлагат друг начин за включване на даден сайт в техните бази данни (индекси), освен посредством заплащане от страна на собственика му. Таксата обикновено е еднократна (при подаването на заявката за включване) и гарантира включване, редовно обхождане на Web съдържанието от паяк (бот) или високи позиции на сайта за ключова дума по избор от рекламодателя. Има много малко изцяло платени търсещи машини, но повечето от найпопулярните търсачки предлагат и такава опция като част от тяхната система за индексиране и оценяване.
WWWW
Глава 4. Търсене в Интернет.
Машините за търсене се основават на автоматично индексиране на страници и осигуряват възможности за едновременно търсене в съдържанието на милиони Web страници.35 Те са Web сайтове, които използват интерактивни Web страници и позволяват да се правят заявки на обикновен език към бази данни. Целесъобразно е използването им когато се търси информация за специфичен обект или информация, която трудно може да се категоризира (конкретно название на нещо в Web страницата). Всяка машина за търсене се състои от три елемента: • паяк (робот); • база от данни (индекс); • софтуер (програма) за търсене и класиране на резултатите. Основният компонент на всяка търсачка са програмите роботи (spiders, паяци), които пълзят непрекъснато из Web и проследяват всяка връзка от дадена страница и всяка връзка от новополучените страници, като предоставят всяка открита страница за автоматично индексиране и я добавят в огромно хранилище, наречено индекс или база данни. Те преглеждат страниците и записват детайли като име на страницата, съдържание на първите й редове и т.н. По този начин се организира и поддържа собствена база данни с Web страници, разположена на сървъра на търсещата машина. При положение, че се промени съдържанието на сайта и след това паякът го посети отново, начинът, по който се появява в листинга на търсачката, ще се промени. Ако сайтът е достатъчно „гостоприемен“, паякът ще се завръща по-често и ще го поставя на начални позиции в списъците си. Някои от търсещите машини дават възможност да бъдат "поканени" да посетят даден сайта. Базата от данни (индекс) съдържа копие от всяка страница (пълният текст или сведения за заглавие, ключови термини и др. информация), обходена от робота. Има търсачки, които индексират пълния текст на документа, т.е. всяка дума от този текст може да бъде търсеща – ако се зададе в полето на търсене, този документ ще бъде повикан в резултатите (Google, Excite, Alta Vista, HotBot, Infoseek, WebCrawler). При други търсачки роботите регистрират само заглавие, данни за подзаглавията, анотации, или просто първите няколко реда от текста, които носят информация за темата на документа (Magelan, Lycos, ALIWEb, Galaxy, WWW search). Всъщност, при работа с индивидуална търсачка не се преглежда цялото Web пространство или Интернет, а само част от Web, която се съдържа в нейната база от данни. Обикновено базите от данни на отделните търсачки се припокриват до 60%,
35
Първата търсеща машина е Archie, създадена през 1990 г. от Алан Емтеж (Alan Emtage), по това време студент в McGill University, Монреал. След три години, през 1993 г. University of Nevada System Computing Services представя втората търсачка – Veronica, която се радва на огромен успех.
WWWW
44
45
WEB ТЕХНОЛОГИИ
а около 40% от съдържанието им не се повтаря в останалите. Колкото и мощни да ни изглеждат търсачките, извиквайки хиляди документи по една тема, реално те не регистрират дори половината от наличните документи в Web. Софтуерът за търсене и класиране претърсва огромната база от данни със запазени Web страници в базата данни на търсачката, за да намери онези от тях, които съответстват най-добре на заявката, след което ги класира по значимост и ги връща към клиента. По този начин най-релевантните ресурси са в началото на списъка и точно те преди всичко ще бъдат прегледани от потребителя. Ето защо всеки собственик на сайт трябва да се стреми към това, щото търсачката да отбележи неговия ресурс като найрелевантен по отношение на определени ключови думи. За целта се използват специални полета в страницата, наречени тагове или метатагове 36 или се търсят услугите на специалисти в областта на SEO оптимизацията за търсачки (search engine optimization, SEO). Последните могат да помогнат за оптимизиране на Web страниците и тяхното индексиране от Google и другите големи търсачки чрез подбиране на подходящи ключови думи и заемане на челните места в търсачките. Целта е максимално добро позициониране на един Web сайт в органичните резултати при търсене, защото сайтовете, които се показват по-напред в резултатите на търсачките, са по-често посещавани и в резултат на това се радват на по-голям трафик. По същество всяка търсачка изпълнява 4 основни задачи. Проучване на мрежата. Търсачките изпращат автоматични компютърни програми (наричани bots, или "паяци"), които използват хиперлинк структурата на Web, като преминават през съдържанието на страниците в мрежата. Според експертни изчисления, роботите на търсачките са преминали през почти половината от всички страници, които съществуват в мрежата. Индексиране на документите. След като паяците преминат през дадена страница, съдържанието й се поставя във формат, който трябва да позволи лесното изтегляне на информация, за съответния сайт, когато потребителите правят своите проучвания. Поради това страниците се съхраняват в огромна, добре управлявана база от данни, която съставлява индекса на търсачката. Индексите съдържат милиарди документи, които се доставят на потребителите за части от секундата като отговор на клиентските заявки за търсене. Обработка на запитванията. Когато потребителят прави своето запитване в търсачката, което се случва стотици милиони пъти на ден, машината преглежда документите в своя индекс, които отговарят най-добре на търсенето. Запитвания, които изглеждат по един и същи начин, могат да дадат различни резултати и затова всяка търсачка има определени правила за оптимално търсене. Класиране на резултатите. След като бъдат намерени всички страници, които съответстват на заявката, е необходимо е да се определи начин, по който да се реши кой сайт или документ ще се покаже на челните позиции. За целта търсачката прилага
36
Метатаговете са маркери, които се поставят в заглавната част на страниците и дават представа за съдържанието им. Те обхващат заглавието на страниците, ключовите думи, описанието и др. Метатаговете са основния източник на информация на търсещите машини за сайтовете, които посещават.
WWWW
Глава 4. Търсене в Интернет.
алгоритъм37 за да изчисли кои от резултатите са най-близки до търсенето/запитването на потребителя. В низходящ ред се посочват всички останали резултати. Обикновено класирането (ранжиране) зависи от количеството думи в заявката, честотата на тяхното използване в документа, количеството препратки и някои други частни алгоритми, които са специфични за всяка търсеща машина. Очевидно потребителят трябва да знае как да съкрати милионния списък с намерени документи чрез определяне на контекста или уточняване значението на думите в заявката за търсене. При първото поколение търсачки подреждането на страниците в списъка става най-често според честотата на срещане на думите от запитването. Във второто поколение търсещи машини резултатите обикновено се подреждат по честота на посещаемост от други потребители и по брой на направени хипервръзки към тях. Най-отгоре в списъка ще появят най-популярните и посещавани сайтове, към които са направени най-много препратки.38 За разлика от директориите, търсещите машини обхващат много по-голяма част от Web, понеже не изискват намеса на хора. През последните години всички машини за търсене добавят допълнителни възможности и се превръщат в портали, които могат да се използват като входни точки към Интернет. Целта е да се привличат колкото се може повече посетители ежедневно и да се продава рекламно пространство на рекламодатели. Средствата, които се използват, са много и разнообразни: претърсване на Web, безплатна пощенска кутия с определен размер, получаване на новини, достъп до места за електронна търговия, указатели с препратки, разговори в реално време, персонализиране на информацията, безплатен софтуер за моментално изпращане на съобщения и др.39 Най-използваните 10 търсачки към средата на 2012 г. са: 40 Google, Bing, Yahoo, Ask, Aol, Lykos, Dogpile, WebCrawler и Info, като абсолютно доминираща е Google с 67% от всички заявки за търсения. В България по неофициални данни търсачката на Google се ползва от 95% от потребителите. Машините за търсене непрекъсната се увеличават и техният брой надхвърля 3000. Обикновено се разграничават няколко големи групи търсачки: • • • • •
Универсални; Специализирани; Метатърсачки; Регионални; Национални;
37
Официалният сайт на Google с подробности около механизма на търсене и съвети за ефективно използване на търсачката: http://www.google.bg/intl/bg/insidesearch/howsearchworks/index.html [7.10.2013] 38 Във връзка с това бързо се разви технологията SEO (Search Engine Optimization - Оптимизация на сайт за търсачки) като съвкупност от действия и техники, свързани с даден сайт, които ще доведат до по-доброто класиране на този сайт в търсачките, при търсене за определени (ключови) думи. Днес SEO-оптимизацията се счита за една от най-добрите и най-бързо развиващи се маркетингови стратегии в епохата на електронния бизнес. 39 Вж. по-подробно: Върбанов, Р. Интернет технологии в бизнеса и мениджмънта. Изд. “Faber”, В. Търново, 2009, 414 с. ISBN 978-954-400-136-0. 40 Top 15 Most Popular Search Engines | May 2012. http://www.ebizmba.com/articles/search-engines [9.09.2013).
WWWW
46
47
WEB ТЕХНОЛОГИИ
• •
Корпоративни; Лични и мобилни търсачки.
Универсалните търсачки предоставят възможност за търсене във всички области на знанието и по различни категории. Това са най-добрия тип търсачки за обикновено търсене. Днес всички големи търсачки като Google, MSN,Bing, Yahoo, Ask и други предлагат така нареченото Универсално Търсене (Universal Search Optimization). На базата на жестоката конкуренция, компаниите са се насочили към показване на максимално възможните резултати от заявка за търсене, с което се опитват да предложат по-добро обслужване. По този начин търсачките се надяват да спечелят посетителите и да ги накарат се задържат само при тях. Универсалността намира израз и в показването на смесени резултати от търсенето – наред с традиционния лист от търсенето търсачките прилагат и показване на други приложения, свързани с търсения резултат, като например видео, музика, снимки, карти, блог публикации, автоматични преводачи, форум вписвания, продуктови ревюта и последните резултати, новини и т.н.41 Така се получава една много по-пълна и детайлна картина на всяко търсене. Напр., ако се търси информация за даден музикант, ще се изведат линкове към музиката му, клиповете му, както и разбира се - към биографията и албумите му, а така също и най-актулното около това търсене в различни медии и среди. Обикновено търсачката (напр. Google) сама преценява кои категории и услуги, предлагани от компанията, са подходящи за всяко клиенско търсене. Специализираните търсачки обхващат детайлно пространството в определена предметна област (наука, техника, образование, свободни работни места, икономика, екология и т.н.). Те търсят в бази от данни по определена тема или по специфичен отрасъл. Специализираните търсачки индексират по-малко количество страници и техните методи за подбиране на ресурси са доста спорни. Но в тези търсещи системи има едно безспорно преимущество – те предлагат нещо ново, различно от общоприетите стандарти. Тъй като алтернативните търсачки използват друг подход към подбора на ресурси, съответстващи на въпроса, резултатът от търсенето ще бъде съвсем друг, отколкото при системите, с които сме свикнали. Често те използват за събиране на резултати един или няколко списъка с линкове, които са намерени от Google, Yahoo и другите големи системи. Тези резултати се филтрират, избира се найдоброто и се визуализира с помощта на диаграми, карти на сайтове, облаци от тагове и т.н. По този начин увеличават възможността за намиране на релевантна информация в дадена област, защото каталогизират информация, която не се улавя от общите машини.42 В табл. 4.1 е показан списък на някои от най-популярните специализирани търсачки. Таблица 4.1. 41
Това оптимизиране на търсачките добавя Web 2.0 възможности и разширява територията на търсещите машини. 42 Подробен тематичен указател на специализирани търсaчки може да се намери на адрес: http://www.beaucoup.com/ и на http://www.refdesk.com/newsrch.html – вж. “ Search engines by type”.
WWWW
Глава 4. Търсене в Интернет.
Списък на някои от най-популярните специализирани търсачки. Eyeplorer.com (http://eyeplorer.com/). Търсене в онлайн енциклопедия Gnod.net (http://gnod.net/). Подбира музика, книги и филми по собствен вкус. Taggalaxy.de (http://taggalaxy.de/). Средство за търсене на изображения на Flickr.com с тяхното предварително преглеждане. Searchedu.com (http://www.searchedu.com). университетски и образователни сайтове:
Обхожда
информацията
в
над
20
милиона
TechWeb (http://www.techweb.com). Търси информация от сървъри, съхраняващи техническа информация Employment search engines (http://www.refdesk.com/emplsrch.html). Указател на търсачки, специализирани за търсене на работа. Monster.com (http://www.monster.com/). Най-посещаваната машина за търсене на работа CаreerPath (http://www.careerpath.com/). Популярна търсачка за намиране на работа. Scirus (http://www.scirus.com/). Специализирана търсеща машина за научни изследвания. Роботът й обхожда само сървъри с име на домейн “edu” (образование ). FindSounds (www.findsounds.com/). Търсене на аудио файлове в най-популярните формати - AIFF, Wave, MP3, AU. Blinkx (www.blinkx.com/). Търсене на видеофайлове.
Регионалните търсачки обхващат виртуалното пространство на определен географски регион, напр. континент: Европа – searcheuro.com).
EuroSeek
(http://www.euroseek.com), Search Euro
(http://www.
Азия - Orientation Asia (http://as.orientation.com), 1001sites (http://www.1001sites.com), Arab Net (http://www.arab.net), Asiaco (http://www.asiaco.com), Search Dragon (http://www.searchdragon.com). Африка - Orientation Africa (http://www.af.orientation.com ) Националните търсачки са характерни за всяка страна и най-пълно обхващат националното Интернет пространство. Използването им е най-ефективно при търсене на материали, разположени върху сървърите на определена страна. България – Dir, Search, Info, Index, All, Top и др. Германия - Aladin (http://www.aladin.de), Crawler.de, Web.de (http://web.de) и др.
Bellnet (http://www.bellnet.com),
Франция Ecila (http://ecila.ceic.com), Lokace (http://www.lokace.com), Nomade (http://www.nomade.fr), Carrefour.net (http://carrefour.net) Русия - Aport (http://www.aport.ru), List.ru (http://www.list.ru), Rambler (http:// www.rambler.ru), Russia on Net (http://www.ru), Stars (http://www. stars.ru) и др. Машините за корпоративни търсачки се смятат за изключително перспективно направление в търсещите технологии. За разлика от Web търсенето, при корпоративното търсене вниманието е насочено към Интранет търсене и управление на знанието в компанията. Това дава възможност на служителите в една фирма да търсят данни, да ги анализират, да сглобяват комплексна картина на информацията, която е натрупана на множество различни места в корпоративната мрежа. По този начин информацията може да бъде използвана многократно, водейки до по-добра WWWW
48
49
WEB ТЕХНОЛОГИИ
производителност и ускоряване на иновативните процеси. Следващите стъпки в тази посока са решения за търсене в корпоративни Web-портали, анализ, потребителски услуги, онлайн-магазини, B2B електронна търговия, онлайн публикуване. Системи за корпоративно търсене се разработват както от ИТ гигантите Google (Google Mini Search Appliance) и Microsoft (комплексни решения за работа с корпоративна информация реализирани в три категории бизнес търсачки - обикновени (commodity); специализирани от високо ниво системи и сервизи от средно ниво (true enterprise services), така също и от други компании, напр. SAP, (чиято корпоративна търсачка е тясно интегрирана с процесите на документооборота), IBM, Oracle. 4.3. Ръчно построени директории
Директориите са сбор от тематични области с връзки към Web места. 43 Те поддържат списъци от сайтове, подредени по категории, в зависимост от определени критерии (Компютри, Бизнес, Развлечения, Спорт и др.). Обикновено директориите съдържат особено точна информация в съответните области. За да се включи дадена страница в директория, собственикът й трябва да прецени коя е най-подходящата категория, да направи кратко описание на сайта и да посочи ключовите думи в специална заявка до администрацията на директорията. За разлика от търсещите машини, тук подреждането на сайтовете в различните категории се извършва от хора, които се наричат редактори или медиатори. Те разглеждат предложените страници и преценяват дали да ги добавят към съответната категория или да откажат. В този смисъл, редакторът избира каква и колко информация да публикува за всеки сайт и как точно ще стане това. В някои случаи може да е необходимо заплащане за включване на сайт в директория или поддиректория.44 Директориите обхващат само малка част от Web страниците и са най-подходящо средство за търсене по някоя по-обща тема. По-голямата част от директориите включват кратко описание на всяко място и водят до главната страница на Web сайта, а не до специфични страници от него. Важна особеност на директориите е, че предоставят цели сайтове, а не отделни страници, както постъпват търсачките. Подчинените директории са йерархически организирани индекси на подчинени категории, които позволяват претърсването на Мрежата да премине през списъци на Web сайтове по търсене на уместна информация. Те са компилирани и поддържани от хора и много често включват машина за търсене в своята собствена база от данни. Разликата между директории и търсачки се проявява в няколко посоки:
43
Първият аналог на Web директория, попълвана от редактори или от собственици на сайтове ALIWEB и първият автоматизиран търсещ робот World Wide Web Wanderer, са създадени през есента на 1993 год. Същата година се появяват и първите паяци (spiders) - JumpStation, World Wide Web Worm и Repository-Based Software Engineering, които се смятат за прародители на съвременните популярни търсачки, като Google или Yahoo.(http://galaxy.com/info/history2.html) [10.10.2013]. 44
Разходите за регистрация на сайт в Yahoo! е $299 годишно, а от Yahoo адресна регистрация (или в отворен DMOZ директория проект) има преки ползи - повишен линк популярност, произтичащи от един начин връзки от качеството директории и повече трафик от включване в групови директории, които всеки ден се търсят от много хора.
WWWW
Глава 4. Търсене в Интернет.
Базите от данни на директориите са по-малки отколкото онези на търсачките, което води до това, че и списъците на резултатите са по-малки. Докато търсещите машина индексират всяка страница при даден Web сайт, подчинената директория по-вероятно осигурява връзка само към главната страница. Понеже организирането на директориите включва човешко вмешателство, подчинените директории много намаляват вероятността за възпроизвеждане на резултати извън контекста. Понеже подчинените директории са подредени по категории, и тъй като те обикновено връщат връзки към най-горното ниво на Web сайта, вместо на индивидуални страници, те дават най-добри резултати при търсене на информация относно общ предмет, вместо за специфично парче информация. Сред най-популярни Web директории са Yahoo! (http://www.yahoo.com/), Infomine (http://infomine.ucr.edu/), Librarian's Index to the Internet (http://www.lii.org/), LookSmart (http://www.looksmart.com), Open Directory (http://dmoz.org), Best of the Net, SearchBoss, About.com и др. Сред най-използваните български директории и портали са: dir.bg, gbg.bg, search.bg, bgtop.net, all.bg, start.bg, info.bg, top.portal.bg, bulgariantop.com, topbloglog.com, които вече са заменени с една търсачка на Google. Ако сайтът представлява фирмена страница, препоръчително е да се намерят бизнес директории и "жълти страници" (yellow pages), където да се добави. Ако сайтът (Web страница) съдържа информация само на една определена тематика е целесъобразно да се намерят директории и търсачки, специализирани само за сайтове с такова съдържание.
4.4. Метатърсачки
Метатърсачката не използва роботи за събиране на информация и няма собствена база данни (индекс), а използва събраната информация в базите от данни на няколко обикновени търсачки, т. е. налице е така нар. multi-threaded search engines (търсенето става в базите от данни на няколко търсачки едновременно). Метатърсачката обединява така получените резултати в един единствен общ списък. Следователно, метатърсачката е търсачка, която взима информация от две или повече други търсачки, вместо да използва собствените си ресурси и средства. По този начин потребителите могат да търсят в многочислени бази от данни едновременно през единствен интерфейс. Метатърсачките не предлагат същото ниво на контрол над интерфейса на търсенето и логиката му, както машините за индивидуално търсене. Днес способностите на метаинструментите са подобрени и включат такива полезни отличителни черти като способността да сортират резултатите по място, по тип на ресурсите, по област, способността на избор в кои търсещи машини да се включат и способността да модифицират резултатите. Тези модификации са многократно увеличили ефективността и полезността на метатърсачките и те се радват на голям интерес.
WWWW
50
51
WEB ТЕХНОЛОГИИ
Обикновено инструментите на метатърсене се разделят на две групи: програми, напр. http://copernic.com и онлайн услуги (Dogpile, Gahoo!Yoogle). Към най-популярните метатърсачки могат да се отнесат: Mother of all Search Engines (http://www.mamma.com/). MetaCrawler (http://www.metacrawler.com). MetaCrawler черпи резултатите си от 7 от най-популярните търсачки (в това число AltaVista и Lycos) и след това компилира и показва резултатите им в общ списък. Clusty (http://www.clusty.com/). Източници: Ask, GigaBlast, LookSmart, Lycos, Live Search, MSN, DMOZ, специални бази данни (New York Times, AP, Wikipedia) и WiseNut. Dogpile (http://www.dogpile.com/). Източници: Google, Yahoo!, Ask и About. Killer Info (http://www.killerinfo.com/). Източници: AOL, Google, Yahoo!, Live Search, FAST, Lycos, AltaVista, WiseNut, LookSmart and DMOZ. Ez2Find (http://www.ez2find.com/). Източници: Google, AllTheWeb, AltaVista, Live Search, Yahoo! и Ask. Повечето от съвременните търсачки са от смесен тип (хибридни търсачки) - резултатите от търсенето в базата от данни на търсещата машина се допълват с данни от различните категории (директории). В този случай търсачката има и интегрирана директория. Те съдържат Web сайтове, които вече са били дискутирани или оценявани. Когато се отправи запитване към една хибридна търсачка, сайтовете, които вече са оценени, обикновено не се сканират за съвпадения – потребителите трябва изрично да ги изберат. Въпреки, че Yahoo и Google, бяха споменати в предишните статии като типични представители съответно на директория и бот базирана търсачка, в същността си те са хибридни търсещи машини. Такива са и повечето популярни търсачки в днешно време. Като правило, хибридните търсачки предпочитат едни типове списъци пред други. Например, Yahoo предпочита да се “допитва” до своята директория (списък сайтове, добавяни от хора), докато Google предпочита да се доверява на своите ботове. Засега съществуващия подход за търсене – чрез думи и изрази, изисква големи разходи на време и сили, за да се намери нужната информация. Тези разходи са право пропорционални на количеството информация в мрежата. Интернет ресурсите нарастват с огромна скорост и потребителите са принудени да разходват все повече време за намиране на необходимата информация. Има и други ограничения на сегашните търсещи технологии, напр. липсата на персонализация и на инструменти, които позволяват да се отделят комерсиалните препратки от некомерсиалните. Независимо от огромния интерес към социалните мрежи през последните години търсенето си остава един от най-успешните и печеливши бизнеси онлайн. Причината се крие в това, че то предлага основа за разпространяване на реклами, които са далеч по-ефективни от тези в медийните сайтове или социалните мрежи. Над 90% от приходите на Google са от интернет бизнеса на компанията, собствени и на
WWWW
Глава 5. Web технологии за изграждане и поддържане на блогове
партньорски сайтове, и въпреки икономическата криза имат тенденция към постоянно увеличение.45 Контролни въпроси 1. Кои са най-популярните търсачки в Интернет? 2. Как се нарича технологията за популяризиране на сайтове в Интенрет? 3. За какво се използват метатаговете в Интернет?
Глава 5. Web технологии за изграждане и поддържане на блогове 5.1. Стуктуриране на блоговете
Примерна структура на личен блог За разлика от Web сайтовете, блоговете не следват йерархична структура и определен ред. Но все пак един типичен блог може да съдържа следното: 1. Заглавна част, съставено от лого и наименование на блога; 2. Страница, на която се появяват новите публикации с линкове към целия текст – обикновено това е началната страница, но някои платформи позволяват промяна на страницата за публикации; 3. Архив на блога – регистър на публикациите, разделен по дни, месеци и години; 4. Всяка публикация се появява на самостоятелна страница; 5. Дата и час на публикуване и/или на последна редакция; 6. Автор на публикацията (особено ако блога се поддържа от повече хора); 7. Страница с информация за автора на блога. Незадължителни, но може да се каже много често включвани, са следните елементи: 1. Изображения; 2. Видео материали; 3. Категории – темите, в които могат да се групират публикациите. В някои платформи тази опция отсъства; 4. Етикети ("тагове" или още tags) – ключови думи, с които може да се опише дадена публикация. Те спомагат за по-лесната навигация в блогове с многобройни публикации. Срещат се още под наименованието „етикети“. 5. Коментари - от други потребители и от автора на материала; 6. Връзки към други блогове – следени от автора или препоръчвани от него. Това е така наречената Blogroll секция; 7. Връзки с други сайтове; 8. Връзки към профили в социални мрежи; 45
Обикновено това става с Google AdSense - безплатна програма, която дава възможност на издателите в интернет да печелят, като показват подходящи реклами в разнообразно съдържание, вкл. онлайн. За целта се използват няколко канала: резултати от търсенето в сайта (Добавяне на лесно персонализирана търсачка в сайта и генериране на доходи от реклами на страниците с резултати от търсенето), Web сайтове (Показване в Web сайта си реклами, подходящи за интересите на целева аудитория, генериране на приходи от валидни кликвания или импресии).
WWWW
52
53
WEB ТЕХНОЛОГИИ
Търсачка и други според платформата.
9.
Таблица 5.1. Сравнителна характеристика между традиционен Web сайт и блог Съдържание
Web сайт Не се обновява често
Структура
Йерархична
Навигация
Менюта
Език
Формален / професионален
Начин на комуникация с посетителя
Еднопосочно представяне на информацията
SEO оптимизация
Осъществява се сравнително бавно.
Блог Регулярно се обновява Липсва йерархия на страниците. Информацията се показва в обратен хронологичен ред. Категории / тагове (етикети) Неформален Предоставя се възможност на посетителите да коментират публикациите Поддържа позиции в търсачките благодарение на честото обновяване на съдържанието
Примерна структура на корпоративен блог Както бе споменато по-горе, фирмите създават и поддържат блогове с цел засилване позициите им на пазара, а именно чрез увеличаване на доверието у потребителите. Освен споменатите структурни елементи на личен блог, корпоративния може да включва: 1. Публикации с преглед (review) на продукти / услуги; 2. Статии със съвети на определена тематика според дейността на фирмата; 3. Страница с информация за контакт – форма за обратна връзка, адреси, карта с местоположението на фирмата; 4. Връзка към фирмения Web сайт и други според дейността на фирмата.
WWWW
Глава 5. Web технологии за изграждане и поддържане на блогове
Фиг. 5.1. Примерна структура на блог Съвети за стартиране на успешен блог За да се привлекат посетители на блога, е необходимо да се следват някои прости правила преди и по време на изграждането му. В следващите няколко точки обобщаваме съвети за начинаещи блогъри, които са приложими, както за лични, така и за фирмени блогове. 1. Планиране – това е може би най-важната стъпка, която предшества реалното изграждане. Първоначално е необходимо да се изяснят целите, с които ще се създаде блога. Например, дали той ще е средство за споделяне на идеи и опит, за промотиране на личност / фирма или само за забавление. След това трябва да се пристъпи към избор на тема. Когато блогът е корпоративен, темата е свързана с дейността на фирмата. Когато е личен, темата е свързана с интересите на дадената личност. Препоръчително е да се пише на тема, по която блогърът има опит и познания. Само така ще може да предложи нещо ценно на аудиторията. 2. Проучване – след като темата е уточнена, се пристъпва към проучване на конкурентни блогове. Проучването на конкуренцията е важна стъпка преди започването на каквото и да било начинание. Необходимо е да се знае какво предлагат другите, за да предложим нещо по-добро от тях и да привлечем повече читатели и последователи. Интернет изобилства от блогове на конкретни теми, като например кулинария, затова, ако решим да пишем да тази тема, е необходимо да предложим наистина нещо оригинално, за да имаме успех. 3. Съдържание, стил на писане и отношение – подборът на конкретно съдържание в блога е следващата важна стъпка. То трябва да е съобразено с целевата аудитория, да е поднесено достъпно и същевременно атрактивно (подкрепено с изображения и видео). Публиката се нуждае от често обновяване на съдържанието и предлагане на нещо ново, различно. Блогове, които не са полезни за целевата група, WWWW
54
55
WEB ТЕХНОЛОГИИ
нямат успех. Например, ако блогът има за цел споделяне на професионален опит, то статиите би могло да бъдат от типа „step by step“, тъй като се усвояват лесно от аудиторията. Стилът на писане трябва да се отличава с естественост, доброжелателност и простота. Предимството на блоговете пред обикновените сайтове е неформалният език. Авторите могат да разнообразят начина си на изразяване, но в никакъв случай да бъдат груби или дори нападателни. Такива обикновено са блоговете на политическа тематика. Нетолерантното отношение към публиката може да коства много на авторите на подобни блогове – нещо повече от закриване на блога. Поради тази причина е много важно блогърът да има добро отношение към читателите си. Дори и те да са нападателни, изграждането на добър имидж изключва авторът да се отклонява от добрия тон и отношение. 4. Външен вид – в повечето случаи изграждането на блог се реализира посредством шаблони, които позволяват редактиране на определени части. Понякога е достатъчно само да персонализираме заглавната част, за да разнообразим и приспособим шаблона към дадена тема. Препоръчително е дизайнът да е изчистен, ненатоварващ окото при продължително четене и да отговаря на конкретната тема. Т.е. един красив хедър, съчетан с опростен дизайн и интересни шрифтове за заглавията, би пожънал много по-голям успех, отколкото претрупаната и сложно изградена визия. 5. Креативност – както споменахме вече, оригиналността на съдържанието е водеща за успеха на даден блог. „Уникалният стил на писане се превръща в запазена марка на всеки автор. Аудиторията се интересува от мнението на блогъра, от неговата гледна точка.“ 46 Когато искаме да използваме чужди думи, е необходимо да спазим правилата за цитиране, като посочим източника, от който сме копирали дадено съдържание. 6. SEO–съдържанието трябва да е оптимизирано за търсещи машини, а именно - да са подбрани подходящи ключови думи, описващи съдържанието на публикациите, които да се съдържат и в заглавията. 7. Реклама – не трябва да се подценява нейната сила. Различните специалисти използват различни трикове, за да рекламират сайтовете си, в частност блоговете. Един от тях е участие в други блогове на сходна тема и оставяне на препратка към техния. Актуален похват се явява напоследък и засилена рекламна кампания в социалните мрежи. Рекламата в интернет се смята вече за по-ефективна от тази в традиционните медии. Поради тази причина все по-често специалистите по маркетинг залагат на т.нар. Digital Marketing47. Обобщение. За да имате успешен блог, е необходимо да предложите нещо ново/актуално на читателите, т.е. да бъдете оригинални. Публикувайте често. Бъдете винаги приветливи. Отговаряйте редовно и учтиво на коментаритe. 5.2. Програмни платформи за изграждане на блогове
Платформите, които заемат челните места по популярност, са WordPress и Blogger:
46
Как да избягваме най-често срещаните грешки на блогърите: http://www.wikihow.com/Avoid-CommonBeginner-Blogger-Mistakes 30.05.2013 г. 47 Определение на понятието „дигитален маркетинг“: http://www.businessdictionary.com/definition/digitalmarketing.html, 30.05.2013 г.
WWWW
Глава 5. Web технологии за изграждане и поддържане на блогове
1. WordPress - е приложение с отворен код за създаване и публикуване на блогове, базирано на PHP и MySQL, което може да се използва като система за управление на съдържанието. WordPress включва plugin архитектура и темплейт система. Приложението се инсталира и конфигурира сравнително лесно. Административният панел се отличава с интуитивен интерфейс, за който не са необходими специални технически умения. Поддържат се множество шаблони, които в не малка част са безплатни. Като предимство може да се изтъкне и наличието на безплатен хостинг на wordpress.com. Така само с една регистрация потребителите, които се нуждаят единствено от средство за изразяване на идеите си онлайн, могат да създадат лесно и бързо собствен блог. Тази версия на системата е с далеч по-малко функционалности, особено от гл. т. на броя плъгини и възможността за безплатна редакция на шаблона, но е удобен вариант за хора, които не разполагат с личен хостинг, домейн и време за инсталация и конфигуриране. Един блог може да се редактира и / или администрира от повече от един потребители. Мястото, което заема WordPress.com в класацията на Alexa48 към месец април 2013 г., е 21-во, а WordPress.org – 103-то49 . 2. Blogger – безплатна платформа с отворен код за създаване на блогове, собственост на Google от 2003-та година. Преди това системата е била собственост на Pyra Labs. Със системата се работи интуитивно. Лесен за усвояване интерфейс. Предимство за българските потребители е поддържането на интерфейс на български език. Предпочитана е сред начинаещи блогъри с не особено добри технически умения. Като предимство може да се изтъкне поддържането на drag-and-drop модел на редакция и поддържането на завиден брой притурки (джаджи / приложения), които могат да се използват и които са създадени от екипа на Google и от сътрудници на компанията. Също така, ако потребителите разполагат вече с Google акаунт, то не е необходимо отново да се регистрират, за да получат достъп и до тази услуга. Blogger поддържа директна връзка с Google + и YouTube. Предоставена е възможност, както за визуална редакция на шаблона, така и за промяна на HTML кода. Един блог може да се редактира и / или администрира от повече от един потребители. Мястото, което заема Blogger в класацията на Alexa, е 55-то50 към месец май 2013 г. 3. Twitter – представлява безплатен инструмент за създаване на микроблогове и същевременно социална мрежа. Публикациите, наречени още туитове (от англ. tweets), са съобщения, състоящи се от максимум 140 символа. Обикновено потребителите споделят моментното си физическо / психическо състояние, промяна в местонахождението (например, излизат от офиса / дома, отиват на среща, отиват на разходка / екскурзия), линкове към Web сайтове. Предоставена е възможност за създаване и добавяне на приложения (джаджи – от англ. widgets). Интерфейсът е
48
Интернет компания, осигуряваща информация за трафика на Web сайтовете в световен мащаб. Поддържа статистики и за потреблението от конкретна страна. Официален сайт: http://www.alexa.com Определение на понятието „дигитален маркетинг“: http://www.businessdictionary.com/definition/digitalmarketing.html, 30.05.2013 г. 49 За повече актуална информация: http://www.alexa.com/siteinfo/wordpress.com и http://www.alexa.com/siteinfo/wordpress.org Определение на понятието „дигитален маркетинг“: http://www.businessdictionary.com/definition/digital-marketing.html, 30.05.2013 г. 50 За актуална справка: http://www.alexa.com/siteinfo/blogger.com
WWWW
56
57
WEB ТЕХНОЛОГИИ
изграден интуитивно. Публикация в The Next Web51 сочи, че най-активни потребители в Twitter се явяват китайците, следвани от индийци, американци и бразилци. От услугите на Twitter в световен мащаб се възползват политици, музиканти, актьори, спортисти и други известни личности с цел изграждане и поддържане на публичен имидж, който ги държи близо до конкретната целева аудитория. Не малък е и списъкът с фирми, които провеждат маркетинговите си кампании и държат информирани потребителите си чрез кратки съобщения по всякакви въпроси – от излизането на нов продукт до проблемите им в офиса, като спиране на тока или повреда в сървъра. За целта, ако даден потребител се интересува от дадена известна личност и/или фирма, то той може да им стане последовател и така ще може да „проследи“ ежедневието им. Изпращачът на съобщенията може да ограничи достъпа до тях или да ги направи обществени. Туитовете могат да бъдат изпращани през Web страницата на Twitter или с SMS, който се таксува от мобилния оператор. Екипът на Twitter прави ежегодно класации на най-популярни туитове, събития, теми и нови потребители 52. Световният ранг на Twitter към май 2013 г. според Alexa.com е 1253. 4. tumblr. – представлява микроблог платформа, при която акцентът пада върху публикуването на мултимедия. Използва се и като социална мрежа, тъй като всеки потребител може да стане последовател на блоговете на други. Блоговете могат да имат ниво на достъп, а именно да са публични или частни. Като предимство може да се изтъкне и предоставената възможност за редакция на HTML кода на темата. Като всеки блог, така и tumblr. има вградена възможност за тагване на публикациите (въвеждане на етикети, които ги описват). Световният ранг на tumblr. според Alexa.com е 32-ро54 към месец май 2013 г. С активното развитие на мобилните технологии в последно време съвсем естествено се появява и необходимостта всяка една от споменатите платформи да се използва и през мобилно устройство. Всяка от тях поддържа мобилна версия с цел обхващане на възможно най-голям кръг от потребители и привличане на нови. Списъкът със софтуер за блогове е дълъг и едва ли може да бъде обхванат напълно. На адрес http://tentblogger.com/blogging-platforms/ могат да бъдат разгледани над 100 безплатни и платени платформи. От различни източници могат да бъдат прегледани и класации на платформи за създаване на блогове, като първите две места се заемат винаги от WordPress и Blogger. Поради тази причина в учебника сравняваме и разглеждаме подробно точно тези две платформи. Сравнителни характеристики на WordPress и Blogger Сравнението, което извършваме, обхваща няколко основни пункта: интуитивен интерфейс, многоезичен интерфейс, потребителско донастройване на темата (визуално и чрез HTML кода), създаване на потребителски менюта, поддържане на плъгини / 51
Report: Twitter’s most active country is China (where it is blocked): http://thenextweb.com/asia/2012/09/26/surprise-twitters-active-country-china-where-blocked/ 52 Класацията от 2012-та година може да се разгледа на адрес https://2012.twitter.com/. 53 Актуално място на Twitter в класацията на Alexa: http://www.alexa.com/siteinfo/twitter.com Определение на понятието „дигитален маркетинг“: http://www.businessdictionary.com/definition/digital-marketing.html, 30.05.2013 г. 54 За повече актуална информация: http://www.alexa.com/siteinfo/tumblr.com, 30.05.2013 г..
WWWW
Глава 5. Web технологии за изграждане и поддържане на блогове
тагове / категории на публикациите / джаджи, инсталиране на собствен хостинг, поддържане от повече автори, водене на статистика на посещенията, технически възможности на редакторите на страници и публикации и антиспам защита. Таблица 5.2. Сравнителна характеристика между WordPress и Blogger Критерий Интуитивен интерфейс Многоезичен интерфейс Визуална редакция на темата Редакция на темата чрез HTML кода Потребителски менюта Плъгин система Джаджи / притурки Технически възможности на редактора на публикации55 Категоризиране на публикациите Поставяне на тагове към публикациите Поддържане от много автори, разделени по роли Инсталиране на собствен хостинг Статистика на посещенията Антиспам защита
WordPress Стандартни
Стандартни
Blogger
Както може да се забележи от таблицата, и двете системи се отличават с лекота на употреба, интуитивни са за работа, което е най-важното за техните потребители. Поддържат се основните изисквания към блог платформите. В Blogger понятията категории и тагове са обединени в едно – етикети. Разделението на понятията в Wordpress осигурява допълнителна възможност на потребителите да навигират из съдържанието на блога. Дава им свобода да изберат как да достигнат до желаната информация. Изборът на конкретна платформа зависи от нагласата на потребителя и неговите изисквания. Контролни въпроси 1. 2. 3. 4. 5. 6. 7.
Какво е блог? Колко вида блогове познавате от гледна точка на използваната медия? Дайте пример за типично съдържание на личен блог. Какво е архив на блога? Какво е blogroll? Какво е микроблог? Дайте определение за промоционален блог?
55
Под „Стандартни“ се има предвид промяна на типа, размера, удебеляването, наклона, цвета и подравняването на шрифта, вмъкване на списъци и HTML код.
WWWW
58
59
WEB ТЕХНОЛОГИИ
8.
Какви стъпки е важно да предприеме всеки блогър преди за създаде блога си?
Глава 6. Web технологии за синдикиране на информацията в Интернет. 6.1. Синдикиране на информацията в Интернет
Всеки от нас се нуждае от различна по тип и обем информация. С напредването на технологиите се увеличават и възможностите за правилното, ефективното, бързото и удобното й обединяване, интегриране, синдикиране. Съществуват различни програмни инструменти (платени и безплатни), чрез които това може да бъде постигнато. В настоящата глава от учебника даваме определения за понятия като Web синдикиране, RSS, Atom, агрегатори и др. Разглеждаме също различни безплатни инструменти, с които всеки потребител може да интегрира на едно място цялата необходимата му информация. Даваме и полезни съвети как се изгражда RSS канал. Синдикирането на информацията в Интернет (или опростено „Web синдикиране“) може да се определи като предоставяне на Web съдържание за свободно или платено ползване от хора или други Web сайтове. В първия случай информацията се предоставя в обобщена форма, удобна за четене от софтуер (десктоп или Web базиран), наречен на английски „feeds reader“ или на български – „четец на новини“. Така потребителите проследяват едновременно последните публикации в няколко сайта и не се налага да ги достъпват поотделно. По този начин спестяват време и се информират своевременно по интересуващите ги теми. Обобщената форма, която се използва, е XML-базиран файл, съдържащ, в общия случай, заглавие, дата на публикуване, съдържание (пълно или съкратено) и линк към източника на публикацията. Публикациите могат да бъдат новини, постове в блогове, постове във форуми, информация за нови продукти и др. в зависимост от Web сайта. Във втория случай един сайт предоставя информация, а други (партньорски сайтове) я използват, като по този начин незабавно добавят голямо количество информация към страниците си, което ги прави атрактивни за потребителите. Определението за Web синдикиране, дадено от Internet Content Syndication Council (ICSC), е следното: “Контролирано разполагане на едно и също съдържание в множество партньорски дестинации в Интернет.” Под „контролирано разполагане“ се има предвид, че съдържанието само по себе си се разполага на сайтове - ползватели, но има препратки към източниците. Разполагането на съдържанието на „множество дестинации“ се използва за увеличаване на приходите и за увеличаване на аудиторията56. Най-общо, синдикирането на информация в Интернет може да има следните форми: проследяване на последните публикации от конкретна тема (от множество потребители) или събиране на информация от различни източници с конкретна или
56
„Internet Content Syndication. Content Creation and Distribution in an Expanding Internet Universe”, A White Paper, May 2008
WWWW
Глава 6. Web технологии за синдикиране на информацията в Интернет.
различна насоченост на едно място с цел генериране на висока посещаемост за предоставящия и ползващия Web съдържанието. Сайтовете, които ползват (синдикират) съдържание, в това число и софтуерът за четене на новини, се наричат агрегатори. На фиг. 6.1. е отразено взаимодействието между предоставящ Web съдържание сайт, агрегатори и потребители.
Фиг. 6.1. Синдикиране на съдържание Фигура 6.1. показва, че към агрегаторите се изпраща съдържание директно от източника и това им гарантира то да е винаги актуално. От своя страна, те поддържат обратна връзка с източника, като генерират трафик към него. Обменът на съдържание се използва доста често с маркетингови цели. Съществуват някои стратегии, при които фамилия от сайтове обменят помежду си съдържание и така увеличават посещаемостта си. Предлагат информация и услуги от различен характер, като по този начин се стремят да обвържат повече потребители с ползването им. Увеличават посещаемостта си и съответно популярността си сред различни целеви групи. Компании от този тип привличат партньори, чрез които допълнително генерират нови посещения и съответно се рекламират. Някои фирми предоставят услуги, чрез които създатели и ползватели на съдържание могат лесно да установят връзка и да управляват процеса на синдикиране на информация. Пример за такава фирма е SharedVue57. Във връзка със синдикирането на съдържание възниква необходимостта да бъде обяснено още едно понятие – дистрибуция на Web съдържание. При нея един или няколко сайта играят ролята на посредници между източника на информация и ползвателите й. В този случай на ползвателите не може да се гарантира, че 57
Официален Web сайт на фирмата: http://sharedvue.com/
WWWW
60
61
WEB ТЕХНОЛОГИИ
съдържанието ще е винаги навременно обновено. Те от своя страна не генерират трафик към източника. Това означава, че потокът е еднопосочен и съответно липсва обратната връзка между страните. На фигура 6.2. е отразена дистрибуцията на съдържание.
Фиг. 6.2. Дистрибуция на съдържание Синдикирането на Web съдържание може да бъде следните типове: 1. Платено – партньорите заплащат определена такса, за да доставят съдържанието до крайния потребител. От своя страна, достъпът на потребителите до партньорските сайтове може също да е заплатен или с възможност за определен период безплатно ползване. Сферите, в които най-често се прилага този тип синдикиране, са радио, телевизия, право, финансови институции, наука и по-точно академични библиотеки. Предоставя се линк към създателя на съдържанието. Например, Newstex предлагат платено синдикиране на съдържание58. 2. Спонсорирано – съдържанието се предоставя с вградена реклама (лого на фирма / препратка към сайта източник / друго). Например, Demand Media Studios предлагат спонсорирано синдикиране.59 3. Свободно (безплатно) – обикновено се основава на бартерен принцип, при който ползите за създателите на съдържание са генериране на трафик и безплатна реклама. Основните формати, които се използват за синдикиране на съдържанието, са RSS и Atom. RSS е XML-базиран формат за предоставяне на съдържанието на даден сайт в обобщена форма. Разширението на файла може да е rss, xml, php. Съдържанието на RSS файловете може да бъде разделено условно на две части – глобална (на англ. channel part) и информационна. В първата се съдържа информация за канала, а във втората - същинското съдържание на канала, разделено на информационни единици. В първата част намират място следните задължителни елементи: заглавие, описание и адрес на канала. Други, незадължителни, елементи са изображение, език на съдържанието, категория на съдържанието и др. Списък с описание на елементите е включен в таблица 6.1. Списъкът не е пълен. Включени са само задължителните
58
Повече информация може да бъде открита на официалния сайт на Newstex: http://newstex.com/are-youa-blogger-or-a-content-publisher/, Октомври 2013 59 Повече информация на официални Web сайт на фирмата: http://www.demandstudios.com
WWWW
Глава 6. Web технологии за синдикиране на информацията в Интернет.
елементи и част от опционалните, които се използват най-често. Повече информация може да бъде открита на следните адреси: http://www.w3schools.com/rss/rss_channel.asp както и на адрес: http://cyber.law.harvard.edu/rss/rss.html. Във втората част се намира самото съдържание на канала или това са отделните новини. Всяка единица има заглавие, резюме, линк към източника, дата на публикуване и др. Таблица 6.2. отразява елементите, които формират една информационна единица.
Таблица 6.1. Описание на елементите, оформящи глобалното съдържание на RSS-канал Наименование Наименование канала Адрес
Таг на <title> <link>
Описание
<description>
Език
<language>
Изображение
<image>
Авторски права
<copyright>
Категория
<category>
Дата на публикуване
<pubDate>
Webmaster
webMaster
Предназначение Дефинира заглавието на канала Хиперлинк към адреса на сайта или на конкретния канал. Срещат се и двата варианта. С няколко думи се дава описание на RSS канала Определя езика, на който е написан документа. За български език кодът е bg.60 GIF, JPEG или PNG, която се показва с канала. Обикновено това е логото на сайта. Този елемент може да включва следните задължителни опции: <url> на изображението, <title> алтернативен текст при отсъствие на изображението и <link> към сайта на канала. Могат да са включени и опционално ширина, височина и описание към изображението. Дава информация за собственика на авторските права на канала. Определя категорията, на която принадлежи съдържанието. Например, Литература, Технологии и т.н. Задава датата на последната публикация в канала.61 Email адресът на отговорника по техническата поддръжка на канала.
Таблица 6.2. Описание на елементите, оформящи информационното съдържание на RSS-канал Наименование
Таг
Предназначение
60
Списък с кодовете за различните езици може да бъде прочетен на адрес http://www.rssboard.org/rsslanguage-codes. 61 На адрес http://asg.web.cmu.edu/rfc/rfc822.html#sec-5 е публикувана спецификация за кодиране на датата и часа.
WWWW
62
63
WEB ТЕХНОЛОГИИ
Наименование
<title>
Адрес
<link>
Чрез този таг се задава заглавието на съответната информационна единица. Линк към оригиналната новина / статия.
Описание
<description>
Резюме на единицата.
Автор
<author>
Категория
<category>
Име или email адрес на автора на статията / новината. Категория на съдържанието.
Коментари
<comments>
Дата на публикуване
<pubDate>
ID
<guid>
Източник
<source>
Медия
<enclosure>
URL на страницата с коментари към статията / новината. Дата, на която е публикувана. Може да послужи на агрегаторите да филтрират информацията по дати и да не показват по-старите, например. Уникален идентификатор на единицата. Специфицира източника на съдържанието, ако то е предоставено от трета страна. Задава медийно съдържание, което е прикрепено към информационната единица.
На фигура 6.3. е отразена примерна структура на RSS файл:
Фиг. 6.3. Примерна структура на RSS файл WWWW
Глава 6. Web технологии за синдикиране на информацията в Интернет.
Атом Атом (Atom) е другият основен формат за синдикиране на Web съдържанието. Той също е базиран на XML. Таговете, които се използват при Atom, са различни от тези при RSS. Създаден е като алтернатива на RSS. „Atom e: 100% независим от разпространителя на съдържанието, изпълним от всеки четец, с дефиниция, разширяваща се свободно и от всеки и ясно специфициран.“62 Разширението на файла може да е atom, xml. Разширена структура е показана на фигура 6.4.
Фиг. 6.4. Примерна структура на Atom файл Съдържанието на Atom файла може да се раздели условно на две части – глобална и информационна. Подобно на RSS каналите, в глобалната част (на англ. feed part) се съдържа информация за канала, а в информационната (на англ. entry part) се съдържа информация за разпространяваното съдържание, разделено на части информационни единица. Всяка единица е съставена основно от заглавие, линк към оригинала, уникален идентификатор, текст и дата на публикуване. В таблица 6.3. се намира списък с тагове. Пълната спецификация може да се намери на официалния й сайт http://tools.ietf.org/html/rfc4287.
62
Project Roadmap: http://www.intertwingly.net/wiki/pie/RoadMap
WWWW
64
65
WEB ТЕХНОЛОГИИ
Съдържанието се намира в контейнера <feed>…</feed>. Таблица 6.3. Наименование
Таг
Предназначение
Наименование
<title>
Подзаглавие
<subtitle>
Дата на обновяване
<updated>
Адрес
<link>
Права
<rights>
Чрез този таг се задава заглавието на канала / единицата. Задава заглавие на канала / информационната единица. Задава последната дата, на която е обновен каналът / информационната единица. Линк към външна препратка, който може да е от feed Обозначава кой е собственик на канала.
ID
<id>
Уникален идентификатор на канала / единицата.
Информационна единици Дата на публикуване
<entry>
Съдържание на една информационна единица.
Автор
<author>
Авторът може да има име, email адрес, Web сайт.
Участник
<contributor>
Съдържание
<content>
Някой, който има заслуги за съдържанието на канала / единицата. Съдържание на единицата, в което могат да намерят място HTML тагове.
Кога е публикувана съответната единица.
Както може да се забележи от фигури 6.3. и 6.4., разликата между двата формата е в таговете. Но това не е основната разлика. По-съществената се отнася до модела на съдържанието. Докато в RSS се избягва зареждането на чист HTML, то при Atom се включват и HTML, XTML, XML тагове. Синтаксисът на Atom е направен така, че да може да се преизползва извън неговия контекст. За идентифициране на местоположението на RSS канала, се предлагат различни икони или директно изписан текст (обикновено RSS). Примери са дадени на фигура 6.5.
Фиг. 6.5. Набор от икони RSS Най-масово използван вариант за RSS / Atom новини е
WWWW
.
Глава 6. Web технологии за синдикиране на информацията в Интернет.
6.2. Агрегатори за синдикиране на информацията в Интернет
Едни от най-известните агрегатори на нови63 са: news.google.com, news.yahoo.com, fark.com, reddit.com. А тези за блог-агрегатори - technorati.com, techcrunch.com, bloglines.com и др. Софтуерът за четене на новини може да бъде Web базиран или десктоп. Най-известният Web базиран софтуер е Google Reader, който прекрати работа си на 1 юли 2013 г. 64 Други подобни агрегатори са: NewsBlur 65 , The Old Reader 66 , Feedspot67, feedly.com, FeedShow68, GoodNoows.com69 и т.н. Основната функция на изброените агрегатори е четене на новини, т.е. потребителят може да потърси и да добави канал с новини. За привличане на аудитория, разработчиците на първите три продукта дават възможност за импорт на съдържание от Google Reader. Следвайки конвенциите на Web 2.0, потребителите могат да създават мрежа от контакти, като стават последователи на свои приятели от социални мрежи или на други потребители или пък самите те да бъдат следвани. На фиг. 6.3. може да се види един от тези четци на новини.
Фиг. 6.3. Общ изглед на екрана (табло) за управление на NewsBlur Като атрактивни Web базирани представители на агрегаторите можем да посочим т.нар. табло или dashboards. Те предоставят инструменти за наблюдение на профили в социални медии, за четене на новини, за съставяне на отчети, графики и други според платформата. Използват се и като персонализирани страници. Всеки 63
Допълнителна справка може да се направи от класацията 10 Best Aggregator Websites към 20.10.2013 г.: http://www.topsite.com/best/aggregator 64 Powering Down Google Reader: http://googlereader.blogspot.com/2013/03/powering-down-googlereader.html 65 Официален Web сайт на web базирания софтуер NewsBlur: http://www.newsblur.com/ 66 Официален Web сайт на web базирания софтуер The Old Reader: http://theoldreader.com 67 Официален Web сайт на web базирания софтуер Feedspot: http://feedspot.com 68 Официален Web сайт на web базирания софтуер FeedShow:http://reader.feedshow.com/ 69 Официален Web сайт на web базирания софтуер GoodNoows: http://goodnoows.com/
WWWW
66
67
WEB ТЕХНОЛОГИИ
потребител може да създава едно или няколко табла с един акаунт според нуждите и интересите си. Към всяко табло могат да се добавят модули (наричат се още джаджи или на англ. ез. gadgets, widgets), които могат да са безплатни или платени. Достъпът до агрегаторите също може да е безплатен или платен. Предназначението на този тип агрегатори е централизиране на множество услуги с цел използването им на едно-единствено място. Такива могат да бъдат, електронна поща, новинарски сайтове, модули, достъпващи сайтове за видео споделяне, на социални мрежи и т.н. Примери за табла са: Netvibes 70 , HootSuite 71 , Pinterest 72 , Scoop.it! 73 , TodayLaunch74, Pageflakes75. Някои от тях се различават значително по предназначение, но се причисляват към категорията на агрегаторите. Например, Netvibes можем да сравним със закритата от 1 ноември 2013 г. услуга на Google – iGoogle76. Web базирано приложение, което съвместява всичко необходимо за ежедневието. Регистрацията е безплатна. Поддържат се джаджи, синдикиращи съдържание от различни партньорски сайтове, като Google News, The New York Times, TechCrunch.com, Kaldata.com и много други. Основно предимство на Netvibes е поддържането на възможност за многократно създаване на табла, което спомага за разграниченото проследяване на различни профили. Например, може да се създаде табло, в което да се добавят модули за наблюдение на профили в социални мрежи. Друго табло може да зарежда RSS емисии от сайтове според интересите на потребителя. Трето табло може да съдържа инструменти, като бележник, модул с времето, калкулатор, управление на отметки и други. Предлага се VIP и Premium версия77, които дават достъп до по-специализирани услуги78. За сравнение, табла, като HootSuite и TodayLaunch са ориентирани към социалните медии. Не се поддържа връзка с email. Това са т.нар. social media dashboard tools или на бълг. ез. табла за управление на профили в социални медии. Поддържат връзка с Facebook, LinkedIn, Twitter, WordPress. HootSuite има връзка и с Tumblr, YouTube, Blogger и много други, част от които са платени. Предлага безплатна възможност за съставяне на отчети, базирани на активността в добавените профили. Приложения, като Pinterest и Scoop.it! са базирани на медийно съдържание, наприемр, изображения и видео. Посочва се източникът на съдържанието, което се появява под формата на секции (фигури 6.4. и 6.5.).
70
Официален Web сайт на табло Netvibes: http://netvibes.com Официален Web сайт на табло HootSuite: https://hootsuite.com 72 Официален Web сайт на табло Pinterest: http://pinterest.com 73 Официален Web сайт на табло Scoop.it!: http://www.scoop.it/ 74 Официален Web сайт на табло TodayLaunch: http://todaylaunch.com 75 Официален Web сайт на табло Pageflakes: http://www.pageflakes.com/ 76 Официалната позиция на Google, 13.07.2013 г.: http://googleblog.blogspot.com/2012/07/spring-cleaning-insummer.html 77 Адрес, на който са публикувани плановете за Netvibes: http://www.netvibes.com/en/pricing 78 Списък с предимствата на таблото Netvibes: http://www.netvibes.com/en/featureslist 71
WWWW
Глава 6. Web технологии за синдикиране на информацията в Интернет.
Фиг. 6.4. Табло Pinterest
Фиг. 6.5. Табло Scoop.it!
И при Pinterest, и при Scoop.it! потребителите могат да оставят коментари под избраното от тях съдържание и да го споделят. Синдикирането на информация се осъществява като потребителите добавят към собствените си табла избрано съдържание. Могат да търсят по ключови думи или директно да избират определена тематична категория. Изборът на табло зависи от интересите и нуждите на съответния потребител. Ако целта му е да организира личните и служебните си ангажименти, като създаде персонализирана страница, то Netvibes би бил правилният избор. Ако таблото ще се използва само за проследяване на активността в социални мрежи, то всяко едно от таблата Netvibes, HootSuite и TodayLaunch може да бъде полезно. От посочените единствено HootSuite предлага безплатно създаване на отчети, докато при Netvibes тази услуга е безплатна само за 14-дневен срок. Десктоп агрегаторите могат да са самостоятелни приложения, чиято функция е четене на новинарски емисии. Например, RSSBandit и FeedDemon са сред найизвестните четци. Другият тип са приложения, които съдържат в себе си модул за четене на новини, но основната им функция е съвсем различна. Пример за такива приложения са т.нар. „лични органайзери“, като например Microsoft Office Outlook. Сравнявайки двата типа четци на новини – Web базирани и десктоп, като основна разлика можем да изтъкнем, че първите могат да се използват от всяко място с достъп до Интернет, докато вторите само на персоналния компютър. Разпространение на съдържание Разпространението на последователност:
съдържание може да се осъществи в следната
WWWW
68
69
WEB ТЕХНОЛОГИИ
1. Създаване на RSS / Atom файл, който да извлича съдържанието от базата данни на сайта. Това може да стане чрез PHP скрипт или чрез плъгин, който е част от системата за управление на съдържанието, която се използва. Като примери за скриптове можем да посочим универсалните генератори PHP Universal Feed Generator 1.0 79 , Universal Feed Generator 80 и Atom feed in PHP 81 . Различни платформи, като Zend Framework например, предлагат също разширения, които могат да се използват за тази цел.82 Създаването на такъв файл може да се осъществи и чрез редактор на новини (feeds editor). Чрез този тип софтуер съдържанието, което ще се разпространява, директно се добавя към XML файл, който може да се публикува чрез вграден FTP клиент. Може да се използва за лесно генериране на RSS/Atom канал от хора, които нямат познания в областта на IT технологиите или в случаи, в които съдържанието се разпространява само чрез канал. Примери за подобен род инструменти за синдикиране са RSS Builder83 и Jitbit RSS Editor84. 2. След като файлът е създаден и наименуван подходящо, се преминава на следващ етап. Това е валидиране на XML файла. Съществуват различни валидатори, които са безплатни и Web базирани, като http://validator.w3.org/feed/, http://feedvalidator.org/, http://www.validome.org/rss-atom/validate и много други. 3. RSS / Atom каналът трябва да се публикува на хостинг. 4. След това трябва да се разпространи чрез специализирани директории за Web синдикиране, като например, http://www.feedage.com/, http://www.newsisfree.com/, http://www.rssfeeds.com/ и т.н. 5. За да е ефективно синдикирането и за да се завърши процеса по публикуване на съдържание, то създаденият канал трябва да се регистрира в най-често използваните търсачки, като:: Google- http://www.google.com/submityourcontent/website-owner/, Bing - http://www.bing.com/toolbox/submit-site-url, Yahoo! - https://partnerinsights.yahoo.com/frss_guide/fsubmit.php. Ако се използва скрипт или вграден в използваната CMS плъгин, RSS / Atom каналът ще се обновява автоматично, като извлича съдържанието директно от базата данни. Тези варианти препоръчваме, тъй като съдържанието ще е видимо и на дадения сайт, и в канала.
79
Адрес на генератора: http://ajaxray.com/blog/php-universal-feed-generator-supports-rss-10-rss-20-and-atom Адрес на генератора: http://www.phpclasses.org/package/4427-PHP-Generate-feeds-in-RSS-1-0-2-0-anAtom-formats.html 81 Creating an Atom feed in PHP. Easy syndication with PHP and MySQL: http://www.ibm.com/developerworks/library/x-phpatomfeed/ 82 Zend_Feed е разширение на Zend Framework, което се използва за създаване на RSS / Atom канали: http://framework.zend.com/manual/1.12/en/zend.feed.introduction.html 83 Продуктът е безплатен и може да бъде открит на адрес http://home.kpn.nl/bsoft/rssbuilder/. 84 Официален Web сайт на редактора: http://www.rsseditor.net/rss-feed-creator/ 80
WWWW
Глава 7. Web технологии за кооперирана обработка на информацията.
Недостатъкът на софтуера за създаване на канали се изразява в това, че потребителят ръчно въвежда съдържанието. Към който и вариант да се насочи потребителят, важно е съдържанието да бъде разпространено по предложения начин, за да достигне до по-голяма аудитория. Контролни въпроси 4. Дайте определение за синдикиране на информацията в Интернет. 5. Колко вида формати за синдикиране познавате? Какви са основните разлики между тях? 6. Какво е агрегатор? Дайте примери. 7. Какво е персонализирано табло? Дайте примери.
Глава 7. Web технологии за кооперирана обработка на информацията. 7.1. Програмни платформи за кооперирана обработка
Повсеместният Интернет предоставя една нова технологическа платформа на географски разпръснатите потребители – съвместна, споделена, колективна, групова (Groupware) или по-точно (според нас) – кооперирана обработка на информацията в реално време. Кооперираната обработка на информацията е израз на демократичния характер на Интернет – свободата (и отговорността, разбира се) да се публикува информацията; свободата всеки да може да модифицира (редактира) тази информация или свободата за повторно използване на тази информация. Ние разширяваме понятието кооперирана обработка на информацията в посока към кооперирана интелигентност. Съвременните информационни и комуникационни технологии позволят на даден специалист по-добре да събира и анализира данни; да се опира на становищата на свои колеги, членове на неговата професионална група; да взима правилни решения в реално време като ползва прецеденти, регистрирани и доказали своята ефективност в дигитални онтологии по предметни области. Под кооперирана интелигентност ще разбираме симбиоза на три основни мрежи: 1. Социална мрежа (професионални образувания на специалисти); 2. Многомашинни компютърни мрежи; 3. Семантични мрежи или мрежи, които осигуряват достъпа до релевантна информация и знания по дадена проблематика. Изгражданата „супер” мрежа има за цел ефективен обмен на знания, личен опит и информация между специалисти. Съвкупността от работни места на специалисти, свързани в реално време, имащи достъп както до технически устройства в мрежата, така и до специализирани дигитални архиви, онтологии, които, от своя страна, са изградени чрез семантични мрежи, е средата за реализиране на кооперираната интелигентност, кооперирана обработка на информацията. WWWW
70
71
WEB ТЕХНОЛОГИИ
От друга страна, ние разглеждаме три форми на кооперираната, съвместна дейност, които са следните: -
Кооперирането като форма на споделяне на информация и знания: тази форма на коопериране стои в основата на прехода от асиметрична към симетрична информация и знания.
-
Кооперирането като форма на обща координация: достигането на предварително поставена цел изисква обща координация на усилията, формиране на критична маса от специалисти по даден проблем, съвместно обсъждане и приемане на оптимално решение, съвместно създаване на иновативни продукти.
-
Кооперирането като процес на интеграция: при интеграцията на специалисти, групи и институции; при превръщането им в общност се създават предпоставките за развитие на формите на кооперативна интелигентност.
За да класифицираме средите, платформите и програмните средства за кооперирана обработка, в таблица 7.1. ще направим опит за изграждане на матрицата на дейностите. Таблица 7.1. Матрица на дейностите Синхронно извършвани
Asинхронно извършвани
дейности
дейности
(в един и същ момент)
(в различни моменти)
На едно и също физическо място (ко-локация)
Коопериране тип
Изпълнявани във времето задачи
„Лице в лице“
Управление на проекти
В различни географски места (отдалечен достъп)
Отдалечено взаимодействие
Асинхронна комуникация и отдалечено взаимодействие при коопериране на дейности
Пространствено-времеви характеристики
Видеоконференции, Онлайн редактиране на документи
Wiki
От таблица 7.1. се вижда, че съвременните технологии ни позволяват да осъществяваме отдалечено взаимодействие при двупосочна (асинхронна) комуникация. Интернет базираните социални мрежи са една от формите на кооперирана обработка на информацията. Както се посочва в глава 3 на раздел 1, първата популярна платформа за кооперирана обработка носи наименованието Wiki. Нейната поява е от 25 март 1995
WWWW
Глава 7. Web технологии за кооперирана обработка на информацията.
г.85 При отбелязване на 10-годишното й съществуване се отчита, че са създадени 30690 Wiki-страници. В самата реализация на Wiki е заложена идея, формирана още през 1972 г. от група изследователи в университета на Карнеги-Мелън. Те разработват платформа за достъп до база от данни на множество потребители (ZOG database system). По-късно двама от изследователите – Донал Макракен (Donald McCracken) и Робърт Ейксин (Robert Akscyn), разработват система за управление на знания, Knowledge Management System, която използва графически интерфейс и Web браузър. Така се поставя началото на множество платформи за кооперирана обработка на информацията, които към момента са повече от 4086. При класификацията на платформите за кооперирана обработка ще използваме за отправна точка дали са свободни (Open/Free Software) или платени прорамни системи. С цел практически познания от страна на студентите ни, превес даваме на свободните платформи (някои от които имат и платени версии). Разбира се, трябва да се отбележи платформата на Microsoft под наименованието SharePoint, която намира все по-голямо приложение в реализацията на платени (лицензни) бизнес решения. Самото развитие на един от най-популярните приложни програмни продукти на Microsoft - MS Office претърпя трансформация от локална към онлайн кооперирана платформа - MS Office 365. Не прави изключение и Google – фирмата премина от технологията Google Docs към Google Drive или споделени документи в облака на Google. В таблица 7.1. са посочени основните данни за някои от най-използваните платформи за кооперирана обработка на информация. Таблица 7.2. Платформи за кооперирана обработка (Open/Free) Наименование
Година на
HTML
Качване на
Добавяне на
Примери на
създаване
редактиране
файлове
модули
приложение
WikiWikiWeb
1996
Не
-
-
Hypper Cards
PBworks
2005
Да
Да
Система за обучение87
MediaWiki
2002
Да
Да
Wikipedia
MojoMojo
2007
Да
Да
Йерархически стрктурирани системи
TikiWiki
2002
Да
Да
Интегрирани системи (CMS+Groupware)
85
Историята на Wiki - http://c2.com/cgi/wiki?WikiHistory Сравнение на Wiki софтуерните платформи - http://en.wikipedia.org/wiki/Comparison_of_wiki_software 87 Система за обучение по дисциплините, преподавани от Стефан Дражев http://1styearinfo.pbworks.com/w/page/7582367/WebPro 86
WWWW
72
73
WEB ТЕХНОЛОГИИ
В таб. 7.2. са включени само една малка част от известните Wiki-платформи. Отбелязва се първоизточника - WikiWikiWeb, както и някои от съвременните разработки като MediaWiki (за интегриране на мултимедийна информация), използвана в друг по-голям проект –WikiPedia, безплатен и свободен вариант на Encyclopaedia Britannica, TikiWiki – една от най-успешните реализации на система, която интегрира система за управление на съдържанието (CMS) и система за групова кооперирана обработка на информацията. Включена е и една от последните реализация на системата MojoMojo 88 . Основната идея, реализирана в MojoMojo, е изгражданата дървовидна структура на свързаните Web-страници. Всяка Web страница включва множество от йерархически свързани страници (по подобие на дървовидната структура на външните дискове). Някои от популярните платформи, включени в таблицата са следните: MediaWiki – използва се в проекта WikiPedia, която е една от най-популярните Wiki платформи (изградена е чрез PHP and MySql). TikiWiki CMS+Groupware – Система, която освен че е изградена на принципите на „open source, multilingual“, включва и триадата Wiki+CMS+Groupware – Web базирана система за кооперирана обработка и управление на съдържанието. MojoMojo – Реализирна е като съвременна система за кооперирана обработка. Използван е универсланият програмен език Perl и среда за разработка CatalystFramework. Поддържа йерархическа система управление на данните.. 7.2. Сценарии за работа с Wiki-платформа
За бърза реализация на Wiki-платформа, която ще използвате за кооперирано публикуване, обработка и актуализация на информацията в дадена социална група, следвайте следния сценарий: 1. Изберете платформата, която отговаря на вашите изисквания. За целите на учебния процес ние сме избрали платформата Pbworks http://pbworks.com/education. Чрез Pbworks са реализирани над 300000 образователни приложения в целия свят. 2. Регистрирайте се на адрес: http://pbworks.com/signup . Самата регистрация включва следните стъпки:
88
Наименование на организацията (на латиница – това ще е и вашият поддомейн на Web адреса ви в Интернет);
Текуща информация за MojoMojo - http://search.cpan.org/~mramberg/MojoMojo-1.10/
WWWW
Глава 7. Web технологии за кооперирана обработка на информацията.
Фиг. 7.1. Начална регистрация в PBworks
Въвеждане на информация за регистратора на платформата.
Фиг. 7.2. Въвеждане на лична информация за регистратора След успешна регистрация системата PBworks генерира началния екран (front page) на вашия сайт за кооперирана обработка на информацията. Обърнете внимание, че можете да използвате български език, както е напривил авторът при създаване на сайт за съвместно обучение.
WWWW
74
75
WEB ТЕХНОЛОГИИ
Фиг.7.3. Начална страница на сайт за кооперирана обработка в PBworks
Кликнете на таба <Edit> за да преминете в режим на редактиране на страницата. На екрана ще се изведе лентата с инструменти за форматиране на страницата.
Фиг. 7.4. Лента с инструменти за редактиране на страницата Можете да включите линкове към страниците или споделенените файлове в дадената система. PBworks използва специфичен дизайн на дадена страница, който включва странична лента – SideBar. Обокновено страничната лента е от дясната страна на страница.
WWWW
Глава 7. Web технологии за кооперирана обработка на информацията.
Фиг. 7.5. Вмъкване на хипервръзка (линк) в страницата (ForontPage) или в страничната лента (SideBar) Можете да включите добавки (Plug-ins) чрез кликване на бутона Insert Plugin и избор на календар, фотогалерия, chat-диалози, видео, както и елементи, наречени PBwiki Magic – брояч на посетителите на сайта, скриптове, таблица-съдържание и др. под.
Фиг. 7.6. Варианти на добавяни елементи в дадена страница След като приключите с редактирането на страницата, кликнете на бутона Save за да съхраните промените. Една добра практика е да записвате коментари в съответното поле, които да използвате като история на промените в сайта. WWWW
76
77
WEB ТЕХНОЛОГИИ
Създаването на нова страница преминава през три основни стъпки: 1. Кликнете на бутона за създаване на нова страница.
Фиг. 7.7. Бутон за създаване на нова страница 2. Наименовайте новата страница. 3. Кликнете отнова на „Създай нова страница – Create New Page” за да се изгради физически в сайта. Кооперираната обработка на информацията предполага работа в екип на специалисти с различни компетенции и пълномощия. За целта, отивайки на таба Settings, определяме различни роли на потребителите на сайта (User levels):
Фиг. 7.8. Категории потребители на сайта за кооперирана обработка Обикновено, сайтът има един администратор, който е и неговия създател. Другите активни потребители биха могли да имат права като редактор (Editor), дописник (Writer) или само на читател (Reader). Във всеки един момент можете да включите нов член в групата за кооперирана обработка. Необходимо е само да добавите адреса на неговата електронна поща.
WWWW
Глава 7. Web технологии за кооперирана обработка на информацията.
Фиг. 7.9. Категории потребители на сайта за кооперирана обработка Страничната лента, изобразявана вдясно във всеки един екран, е много полезен инструмент. В лентата са включени като бързи връзки към останалите страници в сайта, така и връзки към споделените файлове между членовете на дадена група.
Фиг. 7.10. Странична лента в сайта за кооперирана обработка Като съчетаваме работата с PBworks и услугата за асинхронна видео комуникация Hangouts на Google можем да изградим високотехнологична платформа за кооперирана обработка на информацията. Контролни въпроси 1. Каква е раликата между „кооперирана обработка“ и mashup? 2. Коя Wiki платформа включва въможности за изграждане на CMS? 3. Кои са основните предимства на Pbworks?
WWWW
78
79
WEB ТЕХНОЛОГИИ
РАЗДЕЛ ВТОРИ. СТАНДАРТНИ СРЕДСТВА ЗА ИЗГРАЖДАНЕ НА WEB САЙТОВЕ Глава 8. HTML – стандарт за изграждане на Web страници. 8.1. Въведение в HTML
Езикът HTML e стандарт за структуриране и представяне на съдържанието в дадена Web страница. На фиг. 8.1. е представена базисната структура на примерна HTML страница. Ако направим аналогия с човешката фигура, то всяка страница има глава (заглавен таг - <head>) и тяло (основен таг – <body>). Както всеки човек и HTML страницата има име - <title>. Отварящите тагове, по подобие на отварящите скоби в математиката, имат затварящи тагове. Отварящият таг <body> има затварящ </body>.
Фиг. 8.1. Базисна структура на HTML страница 8.2. Основни HTML5 тагове, елементи, атрибути и свойства
HTML5 ни позволява да изграждаме разнообразно Интернет съдържание без да прибягваме към включване на добавки (plug-ins) или приложен интерфейс, предоставян от други производители (third party APIs). HTML5 е в процес на стандартизиране като към момента е в работен предварителен вариант. В много аспекти реализацията е стабилна, но официално стандартът влиза в сила през 2014 г. Дефиниция на HTML таг и HTML елемент Определени HTML-тагове (tag) се представят като поредица от елементи в даден HTML-документ. Начален таг или празен таг съдържа знака „по-малко“- <, WWWW
Глава 8. HTML – стандарт за изграждане на Web страници.
Наименование на елемента, един или повече атрибути по избор, образувани от двойката наименование/стойност, отделенени с знака чрез интервал и завършващ със знака „по-голямо - > или с двойката символи />. Елементът е обект в йерархическия модел на документа. Винаги има наименование и може да съдържа определени свойства (properties) и/или онаследени елементи. Разликата между елемент и таг се състои в това, че "елемент" e поабстрактно представяне на „възел“ в йерархическата структура на HTML документа. Дефиниция на HTML атрибут и на HTML свойство Разликата между атрибут и свойство (attribute и property) е аналогична на тази между таг и елемент. HTML атрибут е наименовано свойство, асоциирано с даден елемент, включен в HTML документ. Програмният код на HTML атрибут винаги включва наименование, символа „равно“ (=) и присвоена стойност, заключена в кавички (“). Свойството (property) е наименована характеристика на даден обект във вътрешния модел на HTML документа. Стойността (значението) на дадено свойство може да бъде инициализирано чрез атрибута на елемента, онаследен от йерархически свързан елемент на модела на документа или да приема значение по подразбиране. HTML тагове89 Таг
Описание
<!--...-->
Дефинира коментар
<!DOCTYPE>
Дефинира типа на документа
<a>
Дефинира хипервръзка (линк)
<abbr>
Дефинира съкращение (абревиатура)
<address>
Дефинира инфромация за връзка с автора на документа
<area>
Дефинира поле в рамките на дадено изображение (image-map)
<article> Нов
Дефинира статия (част от документ – заглавие и параграф/и)
<aside> Нов
Дефинира съдържание встрани от това на дадена страница
<audio> Нов
Дефинира аудио-съдържание
<b>
Дефинира удебелен текст
<base>
Задава базисния URL-адрес за всички релативни URL-адреси в документа
<blockquote>
Дефинира секция, която се цитира от друг източник
89
Заб. С „Нов“ се маркира нов таг в стандарта HTML5.
WWWW
80
81
WEB ТЕХНОЛОГИИ
<body>
Дефинира основната област на документа (body)
<br>
Дефинира преход на нов ред
<button>
Дефинира бутон за избор (clickable button)
<canvas> Нов
Използва се за създаване на графически обекти (обикновено чрез JavaScript)
<caption>
Дефинира заглавие на таблица
<cite>
Дефинира заглавие на дадено произведение (монография, статия)
<code>
Дефинира част от компютърна програма (код)
<col>
Дефинира свойства на дадена колона (за всяка колона от <colgroup> елемент)
<colgroup>
Дефинира група от една или повече колони за форматиране в таблица
<command> Нов
Дефинира команден бутон, който се активира от потребителя – напр. елемент на меню
<datalist> Нов
Задава списък от предварително описани полета за избор при въвеждане на данни
<dd>
Задава списък от полета и тяхното описание
<del>
Дефинира текст, който би трябвало да се изтрие от документ
<details> Нов
Дефинира допълнителни детайли, които потребителят може да види или скрие
<dfn>
Дефинира определен термин
<dialog> Нов
Дефинира диалогова кутия или прозорец
<div>
Дефинира част/секция от документ
<dl>
Задава списък от полета и тяхното описание (по аналогия с <dd>)
<dt>
Задава списък от полета и тяхното описание (по аналогия с <dd>)
<em>
Дефинира подчертаем текст (emphasized text) в комбинация с каскадно форматиране CSS3
<embed> Нов
Дефинира контейнер за включване на външни (не-HTML) приложения
<fieldset>
Група от елементи във формуляр за въвеждане на данни
WWWW
Глава 8. HTML – стандарт за изграждане на Web страници.
<figcaption> Нов
Дефинира заглавие на елемент тип <figure>
<figure> Нов
Задава илюстрации/фигури в документа
<footer> Нов
Дефинира секция в долния край на документа (footer)
<form>
Дефинира HTML-формуляр за въвеждане на данни
От <h1> до <h6>
Дефинира HTML заглавни редове
<head>
Дефинира заглавната част на документа
<header> Нов
Дефинира header на документ или секция; като част от <article>
<hgroup> Нов
Групови заглавни (от <h1> до <h6>) елементи
<hr>
Дефинира тематична смяна на форматирането в дадена част от документа
<html>
Дефинира начален таг на HTML документ
<i>
Дефинира изобразяване на текста чрез наклонени букви (Italic)
<iframe>
Дефинира включване на външен документ в дадения
<img>
Дефинира изображение
<input>
Дефинира входен контрол
<ins>
Дефинира текст, който ще бъде включен в документ
<kbd>
Дефинира вход от клавиатурата
<keygen> Нов
Дефинира поле-ключ за защита на данните при тяхното въвеждане
<label>
Дефинира наименование (label) за даден <input> елемент
<legend>
Дефинира заглавие за елементи от вида <fieldset>, < figure> или <details>
<li>
Дефинира елемент от подереден или неподреден списък
<link>
Дефинира връзка между документ и външен ресурс (много често използван за връзка с CSS)
<map>
Дефинира области/части от дадено изображения и действия с тях (image-map, mouse over)
<mark> Нов
Дефинира маркиран текст
<menu>
Дефинира списък/меню от команди WWWW
82
83
WEB ТЕХНОЛОГИИ
<meta>
Дефинира метаданни за даден HTML документ
<meter> Нов
Дефинира метрични единици за измерване
<nav> Нов
Дефинира навигационна връзка
<object>
Дефинира включването на външен обект
<ol>
Дефинира подреден списък
<optgroup>
Дефинира група от свързани опции в извеждан списък (dropdown list)
<option>
Дефинира опции в извеждан списък (drop-down list)
<output> Нов
Дефинира резултата, който се получава след изчисления
<p>
Дефинира параграф
<param>
Дефинира параметър за даден обект
<pre>
Дефинира предварително форматиран текст
<progress> Нов
Представя състоянието на дадена изпълнявана във времето задача
<q>
Дефинира кратка форма на цитиране
<s>
Дефинира текст, който вече не е релевантен (но все още не е изтрит)
<samp>
Дефинира примерен изход от изпълнението на дадена програма
<script>
Дефинира програмен код, изпълним на клиентския компютър (client-side script)
<section> Нов
Дефинира секция в документ
<select>
Дефинира a drop-down list
<small>
Дефинира текст с по-малък размер на шрифта
<source> Нов
Дефинира мултимедийни ресурси (<video> и <audio>)
<span>
Дефинира секция в документ (обикновено оцветена раззлично)
<strong>
Дефинира важен текст
<style>
Дефинира информация за стила на форматиране на документа
<sub>
Дефинира индексен текст (subscripted text)
WWWW
Глава 8. HTML – стандарт за изграждане на Web страници.
<summary> Нов
Дефинира изобразявано заглавие за елемент <details>
<sup>
Дефинира повдигнат текст (superscripted text)
<таблица>
Дефинира таблица
<tbody>
Групира съдържанието в основната област на дадена таблица (body content)
<td>
Дефинира клетка в таблица
<textarea>
Дефинира многоредова област на входен формуляр (text area)
<tfoot>
Групира съдържанието в долната част (footer content) на дадена таблица
<th>
Дефинира заглавна клетка в таблица
<thead>
Групира съдържанието в заглавната част (header content) на дадена таблица
<time> Нов
Дефинира дата и час (date/time)
<title>
Дефинира титулен ред в документ
<tr>
Дефинира ред в таблица
<track> Нов
Дефинира текстови писти за мединйни елементи (<video> и <audio>)
<u>
Дефинира подчертан текст
<ul>
Дефинира неподреден списък
<var>
Дефинира променлива
<video> Нов
Дефинира видео или филм
<wbr> Нов
Дефинира възможно прекъсване на даден ред
Кои браузъри поддърхат даден HTML5-таг/атрибут ?
Internet Explorer
Mozilla Firefox
Opera
Google Chrom
Apple Safari
Преди да използвате даден HTML5 таг/атрибут, проверете дали се поддържа от популярните браузъри. Повече информация можете да намерите на един от найпосещаваните справочни сайтове - http://w3schools.com/tags/ . WWWW
84
85
WEB ТЕХНОЛОГИИ
Тагове, които се изпозлват за структуриране на документа. <html> таг. <html> тагът е начален таг във всеки HTML документ и маркира целия включен в докемента HTML програмен код. Само HTML декларации и HTML коментари могат да се срещат извън html тага. <head> таг. Единичен <head> таг маркира включените в документа метаданни (metadata). Тези данни не се визуализират за потребителя, а се използват от HTML бразузърите. <body> таг. Единичен <body> таг маркира съдържанието, което ще се визуализира в HTML документа. Следният пример (генериран при стартине на DW CS6) илюстрира структурните тагове в даден документ: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Ненаименован документ</title> </head> <body> <!— Тук се въвежда програмния HTML код, визуализиран в документа --> </body> </html> Тагове, които се изпозлват за секциониране на документа. Секционирането на документа ни позвалява да приложим технологията „Семантичен Web”. В следният пример са представени секционни тагове: <div id="content"> <article> <h2>Как да използваме секционни тагове</h2> <section id="disclaimer"> <h3>Уточнение</h3> <p>Не приемайте примерите буквално...</p> </section> <section id="examples"> <h3>Примери</h3> <p>Те само дават указание за един от начините на прилагане...</p> </section> <section id="closing_notes"> <h3>Закл. бележки</h3> <p>Това е само примерно използване</p> </section> </article> </div> WWWW
Глава 8. HTML – стандарт за изграждане на Web страници.
За да илюстрираме използването на HTML 5 при изграждане на интерактивни технологии в Интернет, прилагаме следния пример за редактиране на текстово съдържание в Web браузъра. <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8> <meta name="viewport" content="width=620"> <title>HTML5 Demo: ContentEditable</title> <link rel="stylesheet" href="css/html5demos.css"> <script src="js/h5utils.js"></script></head> <body> <section id="wrapper"> <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/14060/azcarbon_2_1_0_VERT"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div> <header> <h1>Редактируемо съдържание</h1> </header> <article> <section> <p>Всеки елемент, <code>contenteditable</code> оцветен в сиво, може да бъде редактиран. Използва се локалната памет за осъществавяне на редактирането.</p> </section> <section id="editable" contenteditable="true"> <h2>Този текст може да бъде редактиран по ваш избор!</h2> <p>Това е един елемент - параграф</p> <ol> <li>А тук започва списък,</li> <li>който съдържа само</li> <li>три елемента.</li> </ol> </section> <div> <input type="button" id="clear" value="Изтрийте промените" /> </div> </article> <script> ... </body> <html> В HTML 5 са доразвити технологиите за представяне на аудио- и видеоинформация. Един типичен пример е интегрирането (embedded) на Youtube-видео във WWWW
86
87
WEB ТЕХНОЛОГИИ
ваша Web страница. При старата технология се използва тага <object>, докато при новата - <iframe>. Ето и един конретен пример за това: Стара технология за интегриране (embedded) на Youtube-видео: <object width="640" height="390"> <param name="movie" value="http://www.YouTube.com/v/GGT8ZCTBoBA?fs=1&hl=en_US"/> <param name="allowFullScreen" value="true"/> <param name="allowscriptaccess" value="always"/> <embed src="http://www.YouTube.com/v/GGT8ZCTBoBA?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="390"/> </object> Нова технология за интегриране (embedded) на Youtube-видео: <iframe class="youtube-player" width="640" height="480" src="http://www.YouTube.com/embed/GGT8ZCTBoBA"></iframe> Не е трудно да се забележи, че при новата технология кодът е много по компактен и от тук – времето за неговото изпълнение е по-малко. Основни категории елементи Всеки HTML5-елемент се включва в една или повече основни категории. разглеждаме следните седем категории:
Ние
Категория „Метаданни“ (Metadata content). Категория „Основни елементи“ (Flow content). Категория „Секционни елементи“ (Sectioning content). Категория „Заглавни елементи“ (Heading content). Категория „Фразеологични елементи“ (Phrazing content). Категория „Интегриращи елементи“ (Embedding content). Категория „Интерактивни елементи“ (Interactive content).
Категория „Метаданни“ (Metadata content) дефинира HTML съдържание, което задава начин на представяне или поведение на останалото съдържание в документа. Други възможни проевления са свързани с релациите между дадения и външните документи, както и друга информация (например, скиптове). Включва елементите base, link, meta, script, noscript, style и title. Категория „Основни елементи“ (Flow content) обединява тагове/елементи, включени в <body>, в тялото, в основната част на HTML документа. Те са следните: a, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, data, datalist, del, details, dfn, dialog, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, link, main, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, WWWW
Глава 8. HTML – стандарт за изграждане на Web страници.
samp, script, section, select, small, span, strong, style, sub, sup, svg, table, textarea, time, u, var, video, wbr, text. Категория „Секционни елементи“ (Sectioning content) е съдържание, което се дефинира в заглавната и долната част на документа. Включват се article, aside, nav и section. Категория „Заглавни елементи“ (Heading content) обединява тагове/елементи за създаване на заглавни редове като h1, h2, h3, h4, h5, h6 и hgroup. Категория „Фразеологични елементи“ (Phrazing content) е множество от следните елементи: a, abbr, area, audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, link, map, mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, u, var, video, wbr, text. Категория „Интегриращи елементи“ (Embedding content) елементите audio, canvas, embed, iframe, img, math, object, svg и video.
обединява
Категория „Интерактивни елементи“ (Interactive content) обединява елементите а, audio, button, details, embed, iframe, img, input, keygen, label, object, select, textarea и video. С популяризирането на HTML5 и на идеята за семантичен Web, към изброените категории бихме могли да добавим и тези, наричани от някои автори „разширение на HTML5“ – категория „Микроданни“. Една от основните цели на категорята „Микроданни” е да стркуктурира по-добре електронните документи и да доближи Web документите до традиционните читатели. Категорията „Микроданни” включва такива форматни елементи (тагове) като persons, books, products, recipes, videos, music и др, като и свойства (properties) като itemprop, itemscope, itemtype. Следващият пример илюстрира използването на микроданни в HTML5 документ90: <article itemscope="itemscope" itemtype="http://data-vocabulary.org/Recipe"> <h1 itemprop="name">Шоколадов сладкиш</h1> <section> <h2>Продукти</h2> <ul> <li itemprop="продукти" itemscope="itemscope" itemtype="http://data-vocabulary.org/RecipeIngredient"> <span itemprop="количество">8 oz.</span> <span itemprop="name">кондензирано мляко</span> </li> <li itemprop="продукти" itemscope="itemscope" itemtype="http://data-vocabulary.org/RecipeIngredient"> <span itemprop="количество">12 oz.</span> <span itemprop="name">натурален шоколад</span> </li> ...
90
По-подробна информация на следния адрес: http://www.html-5.com/microdata/
WWWW
88
89
WEB ТЕХНОЛОГИИ
</ul> </section> ... </article> Идеята за приложениена микроданните и съответните формати е реализирана в социалната мрежа Facebook. Чрез тях се тагира (форматира) даден потребител и релациите му както с останалите потребители, така и с дигиталното съдържание в мрежата, което създава или ползва. 8.3. Преход от HTML4 към HTML5
Преход към семантичен Web дизайн Много от съвременните промени в HTML са свързани с развитието на концепцията, наречена semantic web design или как да изграждаме страници, използвайки елементи за структурирането на дадена Web страница. Например, въведените нови тагове/елементи като <article>, <section>, <header> и <footer> имат за цел да обособят както определени области от дадена страница, така и да уточняват нейното съдържание. Тези промени са свързани с бъдещото развитие на Интернет съдържанието, с поддържането на Web сайтовете и достъпа до дигитално съдържание в световната мрежа. Използвайки семантичния Web можем да свързваме съдържане от други страници и сайтове съобразно контекста и значението на даден израз или фраза. Машините за търсене в Интернет осигурява по-добро индексиране на съдържание, което отговаря на изискванията semantic web design. Първоначално HTML се изгражда като инструмент за представяне на информацията в Интернет. Едва сега се акцентира на средствата за семантично дефиниране на съдържанието, което циркулира в мрежата. В несемантичните версии на HTML, използването на тага <header> просто изобразява дадено заглавие, изписвано с удебелени букви и по-голям размер на шрифта, но не семантичната връзка между заглавието и тялото, основното съдържание на документа. В HTML5 са добавени тагове като <header>, <footer>, <article> и <section>, които ни позволяват да дефинираме специфично съдържание, без да добавяме допълнителни атрибути като <div class="header">...</div>. Крайният резултат е опростен и минимизиран програмен код. Но преди всичко – семантичните означения ни позволяват да имаме достъп до външно сходно съдържание, от една страница в друга на Web пространството. Преход към нови технологии HTML5 ревизира възприетата практика, ако дадено свойство липсва в езика, то тогава да се търсят добавки (plug-ins), програмирани от трети фирми. Развитието на HTML5 ни позволява да включваме видео филми вместо с използване на традиционните Adobe Flash добавки и подлагайки на риск даден сайт, то да изградим HTML5 секция в Web странциата „Video Player“: <!—Включете този код в head-a --> <link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/4.0/video.js"></script> <style type="text/css"> .vjs-default-skin { color: #942929 } WWWW
Глава 8. HTML – стандарт за изграждане на Web страници.
.vjs-control-bar { font-size: 91% } </style> <!—Включете този код в body-то --> <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="my_video_poster.png" data-setup="{}"> <source src="my_video.mp4" type='video/mp4'> <source src="my_video.webm" type='video/webm'> </video> И накрая, но не и на последно място, преходът към семантично изгражданите сайтове не означава, че всичко, което сме създавали с предходните версии на HTML би трябвало да се унищожи. Напротив – валидният HTML 4 програмен код остава валиден при повторното му използване в обозримо бъдеще. HTML5 ще ни позволи с по-голяма лекота да решаваме нашите задачи, да работим по-ефективно при изграждането на нови сайтове. Контролни въпроси 1. Кои са таговете за форматиране на таблица в Web страница? 2. Кои са таговете за форматиране на подреден списък в Web страница? 3. На всеки „отварящ“ таг отговаря „затварящ“ таг. Има ли изключения?
WWWW
90
91
WEB ТЕХНОЛОГИИ
Глава 9. Web формуляри – методи и средства за реализация. 9.1. Разработване на формуляри
Възможността да се включват формуляри в Web документа е с важно значение за различните бизнес приложения. Основният HTML-таг за изграждане на формуляр в документа, е следният: <form>...</form>. Между тези „скоби“ се включват програмните редове на всеки Web формуляр. Основни тагове, използвани за изграждане на HTML-формуляр. В таблица 9.1. са включени основните тагове за изграждане на HTMLформуляри в Web документ. Таблица 9.1. Списък на таговете, прилагане при създаване на Web формуляри Тагове <button>
<fieldset> <input> <keygen>
<label> <meter> <object> <output> <progress> <select>
<textarea>
Описание Бутон. Винаги е свързан с тага етикет <label>. Резултатът от избора му винаги се включва в данните, които се изпращат като попълнен формуляр. Задава група от полета. Винаги е свързан с тага етикет <label> и е включен в изпращаните данни Генератор на публичен ключ в даден формуляр. Винаги е свързан с тага етикет <label>. Резултатът от генерираното поле винаги се включва в данните, които се изпращат като попълнен формуляр. Задава етикет на асоциаирано с него поле за данни Метрично измерване на дадена област от числови значения. Винаги е свързано с тага етикет <label> Дефиниран обект. Резултатът от избора на обекта винаги се включва в данните, които се изпращат като попълнен формуляр. Изходни данни. Винаги са свързани с тага етикет <label> В процес на изпълнение. Винаги е свързано с тага етикет <label> Избор. with <optgroup> и <option> тагове/регференции на <datalist>. Винаги е свързан с тага етикет <label>. Изборът се се включва в данните, които се изпращат. Област за въвеждане на текстова информация. Винаги е свързана с тага етикет <label>. Попълненият текст винаги се включва в данните, които се изпращат.
Допълниелни HTML5 форматни елементи при въвеждане на данни За да се облекчи работата на прграмиста при създаване на Web формуляри, в HTML5 са включени допълнителни форматни и контролиращи елементи като: WWWW
Глава 9. Web формуляри – методи и средства за реализация.
type=url: за редактиране на единичен абсолютен URL- адрес; type=email: за редактиране на един или повече e-mail-адреси; type=password: задава един ред текст като поредица от разични символи, образуващи парола за достъп; type=number: за инициализиране на дадена числена стойност (число с плаваща запетая); type=range: за инициализиране на дадено число стойност, чиято точна стойност е без значение; type=color: за инициализиране на дадена числена стойност, определяща значението на даден цвят. Елементът <label> или „Етикет“ позволява да се представи връзката между наименованието на дадено поле от Web формуляра и самото поле, в което очаквате потребителят да въведе указаната информация. Например, ако имате етикет на дадено поле „Вашето име“, то вие очаквате потребителят да въведе в полето realname, следващо етика „Вашето име“ и съответните данни – в случая името „Иван Илиев Иванов“: <p><strong>Вашето име</strong><br /> <input type="text" name="realname" size="60" /></p> Елементът <fieldset> ви позволява да групирате сходни данни, въвеждани от потребителя, в определена от вас група (set), например, лични данни: <fieldset> <legend>Лични данни</legend> <p><label for="realname">Вашието име</label><br /> <input type="text" id="realname" name="realname" size="30" /></p> <p><label for="email">E-mail адрес</label><br /> <input type="text" id="email" name="email" size="30" /></p> <p><label for="phone">Телефон</label><br /> <input type="text" id="phone" name="phone" size="30" /></p> </fieldset> Елементът <keygen> позволява да се зададе публичен ключ за генерираната Web форма и да се обвърже със системата за управление на сертификатите (Web-based certificate management systems). Ето и един пример за използването на <keygen>: <keygen name="name" challenge="challenge string" keytype="type" keyparams="pqg-params"> Когато потребителят кликне на бутона „Изпрати“, то системата за управление на сертификатите получава променливата SignedPublicKeyAndChallenge, инициализирана с определено значение, например със следното91: commonname=Ste+Drazhev&email=stedrazhev@gmail.com&org=LogMan+Ассоц+NGO.& orgunit=Bureau+of+Bureaucracy&locality=Anytown&state=California&country=BG&
91
За по-детайлна информация посетете сайта http://mzl.la/11Hnifp , Октомври 2013.
WWWW
92
93
WEB ТЕХНОЛОГИИ
key=MIHFMHEwXDANBgkqhkiG9w0BAQEFAANLADBIAkEAnX0TILJrOMUue%2BPt wBRE6XfV%0AWtKQbsshxk5ZhcUwcwyvcnIq9b82QhJdoACdD34rqfCAIND46fXKQUnb 0mvKzQID%0AAQABFhFNb3ppbGxhSXNNeUZyaWVuZDANBgkqhkiG9w0BAQQFAA NBAAKv2Eex2n%2FS%0Ar%2F7iJNroWlSzSMtTiQTEB%2BADWHGj9u1xrUrOilq%2Fo 2cuQxIfZcNZkYAkWP4DubqW%0Ai0%2F%2FrgBvmco%3D. Елементите <meter> и <progress> обикновено се изполват съвместно. С тяхна помощ се изобразява графически състоянието на изпълнение на даден процес. Наример, ако формулярят включва голям обем информация за изпращане на сървъра, то процесът на изпънение на тази задача може да варира от 0 до 100%. <ul class="compact"> <li> <label>Meter: empty</label> <meter value="0"></meter> <progress max="0" value="0"></progress> </li> <li> <label>Meter: full</label> <meter value="1"></meter> <progress max="1" value="1"></progress> </li> <li> <label>Meter: "a bit"</label> <meter min=".34" max=".41" value=".36"></meter> </li> <li> <label>Preferred usage</label> <meter min="50" max="250" low="100" high="200" value="120"></meter> </li> <li> <label>Too much traffic</label> <meter min="1024" max="10240" low="2048" high="8192" value="9216"></meter> </li> <li> <label>Optimum value</label> <meter value=".5" optimum=".8"></meter> </li> </ul> Програмни средства за защита от СПАМ. При разработване на Web формуляри е много важно да се осигури защита на приложението от СПАМ. CAPTCHA (съкращение от "Completely Automated Public Turing test to tell Computers and Humans Apart"), е технология за идентифициране на процеса на въвеждане на информация в компютъра, извършван от човек, а не от SPAMпрограми. Технологията е регистрирана от универистета Карнеги-Мелон (Carnegie Mellon University).
WWWW
Глава 9. Web формуляри – методи и средства за реализация.
Същността на CAPTCHA се състои в това даден потребител, който въвежда информация в Web формуляр, да разпознае умишлено графически изменени символи и да ги въведе в полето. CAPTCHA проверява доколко правилно са разпознати символите и ако открие съвпадание – приема, че човек е разпознал и въвел тези символи. В противен случай – отхвърля въведената информация във формуляра. На фиг.9.1. са показани варианти на модифициране на текстове, използвани в алгоритмите на CAPTCHA. Може да се използва технологията CAPTCHA при разработване на Web форми като се прилагат безплатните ресурси, предоставяни от проекта reCAPTCHA на адрес http://www.google.com/recaptcha/learnmore. В програмирането на reCAPTCHA са използвани скриптове както от страна на клиента, така и от страна на сървъра. Скриптовете са на различни езици като PHP, Perl, Python и др. Ето един пример за програмиране от страна на клиента: <!-- ... вашето HTML съдържание ... --> <form action="" method="post"> <!-- ... your form code here ... --> <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=your_public_key"> </script> <noscript> <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key" height="300" width="500" frameborder="0"></iframe><br> <textarea name="recaptcha_challenge_field" rows="3" cols="40"> </textarea> <input type="hidden" name="recaptcha_response_field" value="manual_challenge"> </noscript> <!-- ... други полета от вашия Web формуляр ... --> </form> <!-- ... още от вашето HTML съдържание... --> Заменете your_public_key с кода, който ще получите при регистрация в recaptcha (API key). Ето и един пример за програмиране от страна на сървера чрез PHP: <?php require_once('recaptchalib.php'); $privatekey = "your_private_key"; $resp = recaptcha_check_answer ($privatekey, $_SERVER["REMOTE_ADDR"], $_POST["recaptcha_challenge_field"], $_POST["recaptcha_response_field"]); if (!$resp->is_valid) { // What happens when the CAPTCHA was entered incorrectly die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." . "(reCAPTCHA said: " . $resp->error . ")"); } else { WWWW
94
95
WEB ТЕХНОЛОГИИ
// Your code here to handle a successful verification } ?> Аналогично на променливата your_public_key (вашият публичен ключ за защита) в reCAPTCHA се използва и your_private_key (вашият частен ключ за защита). Ключовете се генерират след успешна регистрация на адрес http://bit.ly/14ycdP9. Ето един пример за генерирани кодове: вашият публичен ключ за защита
6LcMx-ISAAAAAFfJgTy5gHX2Pxev5qfЬЬЬЬЬЬЬЬ
вашият частен ключ за защита
6LcMx-ISAAAAABNO-7TwpNQzQwh09ЬЬЬЬЬЬЬ
Фиг. 9.1. Модели на CAPTCHA изображения за разпознаване от потребителя
Фиг. 9.2. Варианти на диалог с използване на CAPTCHA Програмиране на формуляр „Обратна връзка с потребител“. Програмният код на показания на фиг. 9.3. формуляр има следното съдържание: WWWW
Глава 9. Web формуляри – методи и средства за реализация.
Фиг. 9.3. Web формуляр за обратна връзка с потребител <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Станете член на нашата група</title> </head> <body> <form action="http://www.yourdomain.com/cgi-bin/FormMail.cgi" method="post"> <p><strong>Вашето име</strong><br /> <input type="text" name="realname" size="60" /></p> <p><strong>E-mail адрес</strong><br /> <input type="text" name="email" size="60" /></p> <p><strong>Телефон</strong><br /> <input type="text" name="phone" size="60" /></p> <p><strong>Изучавате ли Web технологии?</strong><br /> <input type="radio" name="designer" value="yes" /> Да | <input type="radio" name="designer" value="no" /> Не</p> <p>С каква ОС работите?<br /> <select name="platform"> <option selected="selected">Windows</option> <option>Mac</option> <option>Linux</option> WWWW
96
97
WEB ТЕХНОЛОГИИ
<option>Other</option> </select></p> <p><strong>Вашият коментар</strong><br /> <textarea name="message" rows="5" cols="60"></textarea></p> <p><input type="submit" name="SUBMIT" value="ИЗПРАТИ" /></p> </form> </body> </html> Формуляр „Разплащане по Интернет“ С навлизането на електронния бизнес в нашето ежедневие и със стремежа на малките български фирми да намерят реализация в Интернет все по-важно значение придобива възможноста за разработване на Web формуляри за електронни разплащания. Ето и един конкретен пример за подобна реализация, визуализиран на фирг. 9.4.:
Фиг. 9.4. Web форма за разплащане по Интернет <form id=payment> <fieldset> <legend>Your details</legend> <ol> <li> WWWW
Глава 9. Web формуляри – методи и средства за реализация.
<label for=name>Name</label> <input id=name name=name type=text placeholder="First and last name" required autofocus> </li> <li> <label for=email>Email</label> <input id=email name=email type=email placeholder="example@domain.com" required> </li> <li> <label for=phone>Phone</label> <input id=phone name=phone type=tel placeholder="Eg. +35900000000000" required> </li> </ol> </fieldset> <fieldset> <legend>Delivery address</legend> <ol> <li> <label for=address>Address</label> <textarea id=address name=address rows=5 required></textarea> </li> <li> <label for=postcode>Post code</label> <input id=postcode name=postcode type=text required> </li> <li> <label for=country>Country</label> <input id=country name=country type=text required> </li> </ol> </fieldset> <fieldset> <legend>Card details</legend> <ol> <li> <fieldset> <legend>Card type</legend> <ol> <li> <input id=visa name=cardtype type=radio> <label for=visa>VISA</label> </li> <li> <input id=amex name=cardtype type=radio> <label for=amex>AmEx</label> </li> <li> <input id=mastercard name=cardtype type=radio> WWWW
98
99
WEB ТЕХНОЛОГИИ
<label for=mastercard>Mastercard</label> </li> </ol> </fieldset> </li> <li> <label for=cardnumber>Card number</label> <input id=cardnumber name=cardnumber type=number required> </li> <li> <label for=secure>Security code</label> <input id=secure name=secure type=number required> </li> <li> <label for=namecard>Name on card</label> <input id=namecard name=namecard type=text placeholder="Exact name as on the card" required> </li> </ol> </fieldset> <fieldset> <button type=submit>Buy it!</button> </fieldset> </form> 9.2. Програми генератори на формуляри
За бързо и ефективно прототипиране на формуляри в ежеднавната ни работа се използват две от най-популярните платформи: - JotForm - http://www.jotform.com/ - Wufoo - http://www.wufoo.com/ Бихме могли да посочим и още няколко от безплатните онлайн генератори като pForm (http://www.phpform.org/ ), HTMLform (http://htmlform.com/form_builder/ ) и Reformed (http://www.reformedapp.com/#create ), но ще проследим сценариите за работа с JotForm. Сценарий за редактиране на предаврително разработен формуляр Стъпка 1. Регистрирайте се на адрес http://www.jotform.com/. Стъпка 2. Кликнете на бутона MyForms и изберете Web формата Contact Us. Извежда се предварително генерирания формуляр за контакти (показан на фиг.9. 5.).
WWWW
Глава 9. Web формуляри – методи и средства за реализация.
Фиг. 9.5. Формуляр за контакти в JotForm Стъпка 3. Кликнете на бутона Embed Form и изберете метод за вграждане на формуляра в тялото на ваш документ (фиг.9. 6.). От този екран кликваме на иконата на Adobe Dreamweaver и получваме генерирания от JotForm програмен код на формуляра. <form class="jotform-form" action="http://submit.jotformeu.com/submit/20883633007350/" method="post" name="form_20883633007350" id="20883633007350" accept-charset="utf8"> <input type="hidden" name="formID" value="20883633007350" /> <div class="form-all"> <ul class="form-section"> <li id="cid_18" class="form-input-wide"> <div class="form-header-group"> <h2 id="header_18" class="form-header"> Contact Us </h2> <div id="subHeader_18" class="form-subHeader"> Please fill out this form and we will get in touch with you shortly. </div> </div> WWWW
100
101
WEB ТЕХНОЛОГИИ
Фиг. 9.6. Екран за озбор на метод за вграждане на JotForm </li> <li class="form-line" id="id_15"> <label class="form-label-top" id="label_15" for="input_15"> Име </label> <div id="cid_15" class="form-input-wide"><span class="form-sub-labelcontainer"><input class="form-textbox" type="text" size="10" name="q15_15[first]" id="first_15" /> <label class="form-sub-label" for="first_15" id="sublabel_first"> Лично Име </label></span><span class="form-sub-label-container"><input class="form-textbox" type="text" size="15" name="q15_15[last]" id="last_15" /> <label class="form-sub-label" for="last_15" id="sublabel_last"> Фамилия </label></span> </div> </li> <li class="form-line" id="id_20"> <label class="form-label-top" id="label_20" for="input_20"> Click to edit </label> <label class="form-sub-label" for="hour_20" id="sublabel_hour"> Hour </label></span><span class="form-sub-label-container"><select class="form-dropdown" id="min_20" name="q20_clickTo20[min]"> <option> </option> <option value="00"> 00 </option> ... </select> WWWW
Глава 9. Web формуляри – методи и средства за реализация.
<label class="form-sub-label" for="min_20" id="sublabel_minutes"> Minutes </label></span><span class="form-sub-label-container"><select class="form-dropdown" id="ampm_20" name="q20_clickTo20[ampm]"> <option selected="selected" value="AM"> AM </option> <option value="PM"> PM </option> </select> <label class="form-sub-label" for="ampm_20"> &nbsp;&nbsp;&nbsp; </label></span></span><span class="form-sub-label-container"><img class="showAutoCalendar" alt="Pick a Date" id="input_20_pick" src="http://cdn.jotfor.ms/images/calendar.png" align="absmiddle" /> <label class="form-sub-label" for="input_20_pick"> &nbsp;&nbsp;&nbsp; </label></span> </div> </li> <li class="form-line" id="id_19"> <label class="form-label-top" id="label_19" for="input_19"> Address </label> <div id="cid_19" class="form-input-wide"> <table summary="" class="form-address-table" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"><span class="form-sub-label-container"><input class="formtextbox form-address-line" type="text" name="q19_address[addr_line1]" id="input_19_addr_line1" /> <label class="form-sub-label" for="input_19_addr_line1" id="sublabel_19_addr_line1"> Street Address </label></span> </td> </tr> <tr> ... <td><span class="form-sub-label-container"><select class="form-dropdown formaddress-country" name="q19_address[country]" id="input_19_country"> <option value="Bulgaria"> Bulgaria </option> <option value="Russia"> Russia </option> .... <option value="other"> Other </option> </select> <label class="form-sub-label" for="input_19_country" id="sublabel_19_country"> Country </label></span> </td> </tr> </table> </div> </li> <li class="form-line" id="id_16"> <label class="form-label-top" id="label_16" for="input_16"> Your E-mail Address </label> <div id="cid_16" class="form-input-wide"> <input type="email" class=" form-textbox validate[Email]" id="input_16" name="q16_yourEmail16" size="20" /> </div> WWWW
102
103
WEB ТЕХНОЛОГИИ
</li> <li class="form-line" id="id_17"> <label class="form-label-top" id="label_17" for="input_17"> Your Message </label> <div id="cid_17" class="form-input-wide"> <textarea id="input_17" class="form-textarea" name="q17_yourMessage" cols="60" rows="9"></textarea> </div> </li> <li class="form-line" id="id_24"> <label class="form-label-top" id="label_24" for="input_24"> Click to edit </label> <div id="cid_24" class="form-input-wide"> <input type="range" class="form-textbox" id="input_24" name="q24_clickTo24" /> </div> </li> <li class="form-line" id="id_23"> <label class="form-label-top" id="label_23" for="input_23"> Click to edit </label> <div id="cid_23" class="form-input-wide"> <input type="range" class="form-textbox" id="input_23" name="q23_clickTo23" /> </div> </li> <li class="form-line" id="id_21"> <label class="form-label-top" id="label_21" for="input_21"> Enter the message as it's shown<span class="form-required">*</span> </label> <div id="cid_21" class="form-input-wide"> <div class="form-captcha"> <label for="input_21"> <img alt="Captcha - Reload if it's not displayed" id="input_21_captcha" class="form-captcha-image" style="background:url(http://cdn.jotfor.ms/images/loader-big.gif) no-repeat center;" src="http://cdn.jotfor.ms/images/blank.gif" width="150" height="41" /> </label> <div style="white-space:nowrap;"> <input type="text" id="input_21" class="form-textbox validate[required]" name="captcha" style="width:130px;" /> <img src="http://cdn.jotfor.ms/images/reload.png" alt="Reload" align="absmiddle" style="cursor:pointer" onclick="JotForm.reloadCaptcha('input_21');" /> <input type="hidden" name="captcha_id" id="input_21_captcha_id" value="0" /> </div> </div> </div> ... </form> Забележете, че в програмния текст на формуляра се съдържа и метода за защита от СПАМ - div class="form-captcha". Дори само този аргумент е достатъчен за да демонстрираме ефективността на работа с безплатната версия на JotForm. Сценарий за разработване на нов формуляр Стъпка 1. Регистрирайте се на адрес http://www.jotform.com/.
WWWW
Глава 9. Web формуляри – методи и средства за реализация.
Стъпка 2. Кликнете на бутона Form Templates – или създаване на нов формуляр по модел. Изберете подоходящия модел за работа, например – Hotel Booking Form. Стъпка 3. Кликнете на етикета (Label) на дадено поле и го редактирайте. В нашия пример – преведете го от английски на български език, тип на стаята. И така - за всички полета във формата.
Фиг. 9.7. Редактиране на формуляр в JotForm Стъпка 4. Кликнете на иконата SAVE и съхранете формуляра. Стъпка 5. Кликнете на елемента от менюто в лявата зона на екрана Power Tools и плъзнете Captcha в тялото на вашия формуляр – така ще включим анти-спам технологията в хотелския регистрационен формуляр. Стъпка 6. Кликнете на иконата Preview и вижте формуляра как ще се изобрази във вашия браузър. Ако всичко е наред, затворете Preview прозореца и кликнете на бутона Embed Form и изберете метод за вграждане на формуляра в тялото на ваш документ (фиг.9. 6.). Избираме директна връзка към формуляра на адрес: https://secure.jotformeu.com/form/31632283859360 И нашият регистрационен формуляр за настаняване в хотела работи! Стъпка 6. Кликнете на бутона Thank you. Извежда се екран за редактиране на съобщение, което се изпраща до даден потребител, който е попълнил и изпратил формуляра си. Едно примерно съобшение е показано на фирг. 9.8.
WWWW
104
105
WEB ТЕХНОЛОГИИ
Фиг. 9.8. Екран за потвърждение на изпратената форма Попълнените данни във формулярите от различните потребители могат да се съхраняват и обработват чрез използване на различни Web технологии като Dropbox, Facebook, електронни таблици на Google или Google Drive (фиг. 9.9.) или чрез изпращане по и-мейл.
Фиг. 9.9. Платформи за обработка на данните от въведените формуляри WWWW
Глава 9. Web формуляри – методи и средства за реализация.
Ако изберем платформата за облачни изчисления Google Drive, изпълняваме следния сценарий: Стъпка 1. Кликнете на иконата Google Drive (фиг. 9.9). Избор на работа с Google Drive. Стъпка 2. Разрешете достъп на JotForm до регистрационните ви права в Google (Please authenticate your Google account.). Кликнете на бутона „Разрешаване на достъпа“. Получава се съобщение, че достъпът е разрешен: Authorization successful! Click next to continue. Стъпка 3. Задайте наименование на папката в Google Drive, в която ще се съхраняват попълнените регистрационни формуляри (фиг. 9.10.)
Фиг. 9.10. Задаване наименование на папка за съхраняване на формуляри
Стъпка 4. Получване на потвърждение за успешна интеграция между JotForm и Google Drive за съхраняване на получените формуляри. Стъпка 5. Извеждане на информацията за дадена регистрация от Google Drive (фиг.9.11.).
WWWW
106
107
WEB ТЕХНОЛОГИИ
Фиг. 9.11. Извеждане на информацията за съхраняване на формуляри от Google Drive
Контролни въпроси 1. Кои са основните тагове при създаване на формуляри? 2. Можем ли да проверяваме валидността на въвеждания от потребителя email в поле от формуляр? 3. Задължителни ли са етикетите на полетата във формуляра? 4. Какво е CAPTCHA?
WWWW
Глава 10. CSS3 – основи на каскадното форматиране на Web страници.
Глава 10. CSS3 – основи на каскадното форматиране на Web страници. 10.1. Същност, основни понятия и синтаксис на CSS
CSS е описателен език, чрез който се създават правила, които указват как един HTML-елемент 92 трябва да изглежда при визуализиране в Web страница. Основен момент е, че всеки HTML-елемент се визуализира в правоъгълна област, наречена кутия. Къде да е разположена тази кутия и как да изглежда съдържанието в кутията шрифт, размери, цвят, фон, рамки, отстъпи и прочие се описва с тези правила. Съдържанието на една кутия в повечето случаи е текст разположен в един параграф, но може да бъде и отделна буква, дума, хипервръзка, списък, таблица, клетка от таблица, графично изображение, поле от формуляр и т.н. елементи, разположени между съответни HTML-тагове. Изучаването на CSS е добре да се извършва в следната последователност: усвояване на това как се пишат CSS правила (какъв е синтаксиса); изучаване на различните свойства, които се използват при оформянето (обем); усвояване на CSS фреймуорк. HTML-елементите могат да се разделят на два основни вида по отношение на това къде се намират сред други елементи на вътрешноредови и блокови елементи. 1. Вътрешноредови елементи Вътрешноредовите (inline) елементи се разполагат на същия текстов ред, на който се намират съседните им елементи. Пример за тагове, които задават вътрешноредови елементи са: <img>, <a>, <b>, <i> и др. Обикновено те се разполагат вътре в един параграф и целта не е с тях да започва нов ред или както още се казва нов параграф. Групиране или обозначаване на текст като вътрешноредов елемент се задава с тага <span> и така може да се контролира неговото визуализиране чрез CSS, като за целта най-често се задават и атрибути class или id. Например: Код 1 <p>В началото на ХХ в. гр. Варна се утвърждава като един от <span class="important">основните търговски центрове</span> на България.</p> По този начин се групира част от текста, който не е заграден с други тагове, които да спомогнат тази част да се идентифицира от останалия текст и става възможно един и същи стил на оформление да бъде приложен и върху други вътрешноредови елементи, имащи същата стойност на атрибута class. 2. Блокови елементи 92
Под HTML-елемент разбираме един компонент от Web страница, който в общия случай се състои от отварящ HTML-таг, съдържание и затварящ HTML-таг. Този компонент може да се състои от други компоненти, както и да е част от други компоненти чрез влагане.
WWWW
108
109
WEB ТЕХНОЛОГИИ
Блоковите елементи винаги започват на нов ред, т.е. те са подобни на параграфите и заемат 100% от ширината на своя родителски елемент (т.е. в който са вмъкнати). Примери за блокови елементи са: <p>, <li>, <h1> - <h6> и др. Групиране или обозначаване на блоков елемент може да се задава с тага <div> и най-често така се групират отделните логически части (секции) на една страница. Например страница от един блог може да се раздели на заглавна секция (хедър), съдържаща лого и навигационно меню; статия, съдържаща публикация от автора на блога заедно с изображения и друга мултимедийна информация; секция за коментари от посетители на блога; и накрая завършваща секция (фуутър) със служебни връзки за вход/изход, декларации, авторски права, данни за контакти и прочие. Използването на атрибути class или id, в този случай дава възможност да се зададат специфични CSS правила, къде трябва да е разположена всяка секция на Web страницата как точно да изглежда. Тъй като е възможно да има множество тагове <div> разположени един в друг, добра практика е, освен отстъпи, да се използват коментари, които да маркират отделните секции. Например: Код 2 <div id="header"> <div id="logo"> <a href="?page=1000"><img src="/images/logo.jpg" alt="ИУ - Варна" /></a> </div><!-- end of logo --> <div id="search"> <form method="get" action="http://www.google.bg/search"> <input type="hidden" name="sitesearch" value="ue-varna.bg" checked="checked" /> <input type="text" name="q" size="20" maxlength="255" value="" /> <input type="submit" class="search_submit" /> </form> <a href="index.php?page=19">Разширено търсене</a> </div><!-- end of Google Search --> <div id="menu"> <ul> <li><a href="/">Начало</a></li> <li><a href="/bg/index.php?page=100">За ИУ - Варна</a></li> <li>История</li> </ul> </div><!-- end of menu --> </div><!-- end of header --> WWWW
Глава 10. CSS3 – основи на каскадното форматиране на Web страници.
С помощта на CSS стилови правила може да се контролира начина, по който всяка секция разположена в кутия се визуализира. Например за една кутия най-често се задават правила за: разполагане в Web страницата (позиция), размер (ширина и височина), наличие на рамка (дебелина, цвят и стил), цвят или изображение за фон; за текста в кутията - име на шрифт, цвят, размер, изглед (наклонен, удебелен, подчертан), малки/големи букви. За задаването на оформлението на списъци, таблици и формуляри също се използват правила. Общия синтаксис на CSS стиловите правила е следния: СЕЛЕКТОР_1 [, СЕЛЕКТОР_N...] {
селекторна част
СВОЙСТВО_1:СТОЙНОСТ[!important];
декларативна част
[, СВОЙСТВО_N:СТОЙНОСТ[!important];...] декларация } Когато браузърът зареди Web страница, се осъществява свързване на CSS правилата с HTML таговете. Правилата указват как да бъде визуализирано съдържанието на конкретен таг и се състоят от две части: селекторна част и декларативна част. Селекторната част указва за кои тагове се отнася правилото, чрез използването на т.нар. селектори. Селекторът най-често описва множество от тагове и по рядко един единствен конкретен таг в Web страницата. Едно правило може да се отнася за множество различни селектори, когато те се изброят разделени със запетайка. Декларативната част указва начина на визуализация на таговете, указани в селекторната част. Тя се поставя във фигурни скобки и се състои от множество декларации, разделени с ";". От своя страна една декларация се състои от две части: свойство и стойност, разделени с ":". Свойствата се отнасят за отделни параметри на външния вид, като цвят, височина или рамка, а стойността се задава качествено (в думи) или количествено (в цифри) в най-различни мерни единици. За Код 1 например може да се зададе следното правило: span.important {color:green; font-weight:bold;} За Код 2 може да се зададат следните правила: div#header {width:780px; height:106px; background:#6e0404;} div#logo {width:461px; float:left;} div#search {margin:5px 10px 0 0; clear:both;} div#menu {margin-bottom:15px;} div#menu li {margin:8px;} div#menu ul {list-style-image:url(bullet.gif) no-repeat;} div#menu a:link {color:#000000; text-decoration:none;} div#menu a:visited {color:#000000; text-decoration:none;} WWWW
110
111
WEB ТЕХНОЛОГИИ
div#menu a:hover {color:#7a0606; text-decoration:none;} .search_submit {text-indent: -9999px;} Коментари между стиловите правила може да се задават с /* ... */, като по този начин по-добре се организират правилата в отделни неформални секции. 10.2. Включване на CSS правила в Web страница
Съществуват три варианта за включване на стилови правила в Web страница вграждане в таг, вътрешни стилови таблици и външни стилови таблици. Тези варианти могат да се използват както самостоятелно, така и комбинирано. 1. Вграждане на стилови правили в HTML таг Голяма част от таговете имат атрибут "style". Правилата, зададени като стойност на този атрибут, се отнасят само за един таг и в този случай очевидно няма нужда от задаване на селектори. Например, по следния начин може да се промени цвета на един параграф и текста да се центрира: <p style="color:red;text-align:center;"> Този начин на работа следва да се избягва, тъй като се обезсмисля концепцията за разделяне на съдържание от външно представяне. Добра практика е винаги, когато е възможно да се отделя съдържанието на един сайт от стиловите правила, които определят външния му вид. Отклонение от добрите практики е добре да има в редки случаи, като например, ако става въпрос за Web сайт състоящ се само от една Web страница или ако става въпрос за Web страница от сайт, в която трябва да има няколко специфични допълнителни стилови правила. 2. Вътрешни стилови таблици Стиловите правила могат да се зададат вътре в Web страница чрез поставяне в таг <style>, който от своя страна обикновено се разполага в тага <head>. Една Web страница може да има множество тагове <style>. В <style> се задава като атрибут "type", чиято стойност задава MIME типът на стиловата таблица - засега като стойност се използва само "text/css". <!DOCTYPE html> <html> <head> <title>История</title> <style type="text/css"> body {font-family:arial; background-color:#FFFF00;} h1 {color:rgb(255,255,255);} p {color:blue;} span.important {color:hsla(250,65%,75%,0.7); font-weight:bold;} </style> </head> WWWW
Глава 10. CSS3 – основи на каскадното форматиране на Web страници.
<body> <h1>История</h1> <p>Преди повече от сто години, на 1 октомври 1888 г., в България се открива първото висше училище - <span class="important">Висш педагогически курс</span>.</p> </body> </html> 3. Външни стилови таблици Когато се създава сайт с повече от една Web страница е добре да се използва външна стилова таблица, съхранявана в отделен файл, която да използват всички Web страница на сайта. Предимствата на този подход са, че се избягва дублирането на едни и същи стилови правила в множество файлове, съдържанието е отделено от визуализирането и като резултат - лесно може да се променя външния вид на целия сайт, чрез промени само в един файл. С използване на външни стилови таблици се повишава и скоростта на зареждане на отделните страници на един сайт, тъй като след като веднъж браузъра свали файла със стиловете правила, той обикновено го кешира и следващите страници от сайта ще ползват кешираното копие на файла и съответно ще се зареждат по-бързо. Тагът <link /> се използва, за да се укаже CSS файлът със стиловите правила. Може да се разполага само в таг <head> и да се повтаря многократно, т.е. да се включват множество външни файлове със стилови правила. Атрибутите на <link /> type и rel трябва да имат стойности съответно "text/css" и "stylesheet", а href - URL-адрес на CSS файл. Обикновено всички CSS-файлове на един сайт се поставят в отделна директория с име styles или css. При по-сложни сайтове в едни CSS файлове се съхраняват правилата, които отговарят за това как да изглеждат елементите (като цвят и шрифт), а в други - правилата, отговарящи за разположението им в Web страницата (позицията). Пример: Файл style.css: body {font-family:arial; background-color:#FFFF00;} h1 {color:rgb(255,255,255);} p {color:blue;} span.important {color:hsla(250,65%,75%,0.7); font-weight:bold;} Файл style.html: <!DOCTYPE html> <html> <head> <title>История</title> <link href="style.css" type="text/css" rel="stylesheet" /> </head> <body> WWWW
112
113
WEB ТЕХНОЛОГИИ
<h1>История</h1> <p>Преди повече от сто години, на 1 октомври 1888 г., в България се открива първото висше училище - <span class="important">Висш педагогически курс</span>.</p> </body> </html> Друг начин за вмъкване на външна стилова таблица е да се използва специалното стилово правило @import, чрез което се вмъкват правилата от външен файл между вече зададените правила. Например: p {color:blue;} @import "styles.css"; span.important {color:hsla(250,65%,75%,0.7); font-weight:bold;} Въпреки удобствата, които предлага @import, свързани главно с възможността от един CSS-файл да може да се включва друг CSS-файл, употребата му не се препоръчва, тъй като браузърът не може едновременно да свали всички необходими за визуализацията файлове. Ако в един CSS-файл има правило @import, с което се вмъква втори CSS-файл, то втория файл ще започне да се сваля, чак когато първия файл се свали и обработи, което ще доведе до забавяне при визуализацията на страницата. Правилото @import може да се използва в ситуации, когато много страници от един сайт включват един общ CSS-файл. Ако се наложи във всички страници да се включи още един CSS-файл, то редактирането на всички страници ще е много трудоемко. С използването на @import новия CSS-файл може да се вмъкне в първия много по-лесно. 10.3. Селектори, наследяване и каскадност
Съществуват голям брой видове селектори93, с които могат да се описват найразлични множества от тагове. Когато в селектор се използва клас, идентификатор, имена и стойности на атрибути, се прави разлика между малки и големи букви, т.е. изписването трябва да е точно. При изписване на имена на тагове и атрибути не се прави разлика за регистъра на буквите.
Таблица 9.1. Базови селектори СЕЛЕКТОР * [*|ТАГ].КЛАС [*|ТАГ]#ID ТАГ 93
ОПИСАНИЕ Всички елементи, т.е. с какви да е тагове в страницата. Всички елементи с атрибут class="КЛАС". Може да се укаже и конкретен таг. Всички елементи с атрибут id= "ID" Всички елементи с таг <ТАГ>
Виж Selectors Level 3, W3C Recommendation 29.09.2011, http://www.w3.org/TR/2011/REC-css3-selectors20110929/
WWWW
Глава 10. CSS3 – основи на каскадното форматиране на Web страници.
ТАГ_1, ТАГ_2 ТАГ_1 ТАГ_2 ТАГ_1>ТАГ_2 ТАГ_1+ТАГ_2
ТАГ_1~ТАГ_2 [АТРИБУТ] [АТРИБУТ=СТОЙНОСТ] [АТРИБУТ~=СТОЙНОСТ]
[АТРИБУТ|=СТОЙНОСТ] [АТРИБУТ^=СТОЙНОСТ] [АТРИБУТ$=СТОЙНОСТ] [АТРИБУТ*=СТОЙНОСТ]
Всички елементи с тагове <ТАГ_1> и <ТАГ_2> Всички елементи с <ТАГ_2>, които са вътре в <ТАГ_1> Всички елементи с <ТАГ_2>, чиито пряк родител е <ТАГ_1> Всички елементи с <ТАГ_2>, които са поставени веднага (непосредствено) след <ТАГ_1>, т.е. само първият елемент с <ТАГ_2>, който е след <ТАГ_1>. Всички елементи с <ТАГ_2>, които са след <ТАГ_1>. <ТАГ_2> не трябва да е вмъкнат в <ТАГ_1>, а двата да са на едно и също ниво в йерархията. Елементи, които имат дадения атрибут АТРИБУТ. Елементи, на чиито АТРИБУТ има същата СТОЙНОСТ. Елементи, на чиито АТРИБУТ съдържа (среща някъде в себе си) СТОЙНОСТ сред множество от разделени с интервали стойности. Елементи, на чиито АТРИБУТ започва със СТОЙНОСТ сред множество от разделени с тирета стойности. Основно се използва във връзка с избор на различни диалекти на езици. Елементи, на чиито АТРИБУТ започва със СТОЙНОСТ. Елементи, на чиито АТРИБУТ завършва със СТОЙНОСТ. a[src$=".gif"] Елементи, на чиито АТРИБУТ съдържа подниза СТОЙНОСТ.
Таблица 9.2. Псевдоелементи, използвани в комбинация с базов селектор (БС) ПСЕВДОЕЛЕМЕНТ a:link a:visited a:active БС:hover :focus :first-letter :first-line :first-child :before, :after :lang(ЕЗИК)
ОПИСАНИЕ Елементи, които са непосетени хипервръзки Елементи, които са посетени връзки Елемент, който е активирана в момента връзка Елемент, който е посочен с мишката. Може и да не е хипервръзка. Елемент <input />, който е активен в момента (има фокуса, т.е. приема действията от клавиатурата) Първата буква на съдържанието на елементите Първия ред на съдържанието на елементите Първия вмъкнат елемент в елементите Обозначава позиция пред/след елемент. Използва се за вмъкване на съдържание преди/след елементи. Вмъкнатото съдържание се задава в свойство content. Елементи, чиито атрибут lang започва с ЕЗИК WWWW
114
115
WEB ТЕХНОЛОГИИ
:first-of-type, :last-of-type :only-of-type :only-child :first-child, :last-child :nth-child(n), :nth-lastchild(n), :nth-of-type(n), :nthlast-of-type(n)
Елементи, които са първи/последни вмъкнати елементи от този тип в друг родителски елемент (т.е. преди/след тях може да има елементи от друг тип) Елементи, които са единствени от този тип вмъкнати елементи в друг родителски елемент Елементи, които са единствен вмъкнат елемент (единствено дете) в друг родителски елемент Елементи, които са първи/последен вмъкнат елемент (дете) в родителски елемент. Елементи, чиято поредност отговаря на зададеното в скобите условие
Елемента, който е на върха на йерархията (корена) на страницата Елементи, които са празни - нямат съдържание или :empty вмъкнати елементи Елемент, който е котва вътре в страницата, зададена в :target URL-адреса Елементи <input>, които съответно са достъпни, :enabled, :disabled, :checked недостъпни или отметнати (за чекбокс и радиобутон) :not(СЕЛЕКТОР) Елементи, които не съвпадат със СЕЛЕКТОР Прилагането на CSS правилата се базира на принципите на наследяване и каскадност. Наследяване означава, че някой правила декларирани за родителски елементи важат и за вмъкнатите в тях елементи (децата). Например вмъкнатите елементи в тага <p> наследяват правилата за шрифт (font-family или color), но не наследяват правилата за рамка и фон (border и background-color). Каскадност означава, че ако има две или повече правила, които се отнасят за един и същ елемент, се използва правилото, което има приоритет пред останалите. :root
Познаването на механизма на наследяване и каскадността дава възможност да се пишат по-прости и кратки стилови таблици, чрез задаване на общи правила, които да се отнасят за повечето елементи и предефиниране на някой от тях за точно определени елементи, които трябва да изглеждат различно. С най-нисък приоритет са правилата, вградени в браузърите от техните разработчици които описват как да се визуализира всеки елемент. Тези правила могат да се променят от потребителя чрез настройки на браузъра. Тези вградени настройки могат да се променят чрез външни стилови таблици (от външен файл), вътрешни стилови таблици (намиращи се в самата страница) и чрез вграждане на стилови правила, като приоритета на правилата нараства в същия ред, в който са изброени тук, т.е. вградените в таговете стилови правила са с най-висок приоритет. Ако два селектора са еднакви и са дадени на едно и също място, втория ще е с предимство. Това е така, защото при обработката правилата на втория ще се изпълнят последни и ще препокрият тези на първия. Ако един селектор е по-специфичен от друг, неговия приоритет е по-голям от този на по-общия селектора. Например p е по-специфичен от *, а p#note е поспецифичен от p. WWWW
Глава 10. CSS3 – основи на каскадното форматиране на Web страници.
Наследените правила са с най-нисък приоритет. Стойностите, след които има !important са по-важни от останалите правила, които се прилагат за същия елемент. CSS * {font-family: Arial, Verdana, sans-serif;} h2 {font-family: "Courier New", monospace;} i {color: blue;} i {color: pink;} b {color: green;} p b {color: violet !important;} p b {color: red;} p#intro {font-size: 150%;} p {font-size: 75%;} HTML <h2>CSS</h2> <p id="intro">There are <i>many</i> <b>CSS</b> rules.</p> <p>But they are not hard to learn.</p> Следва да се има предвид, че различните видове браузъри и техните различни версии, поддържат различно множество от възможностите на CSS. Спецификацията на CSS1 е от 1996 г., CSS2 е от 1998 г. и в момента се работи върху CSS3, като приемането на новата спецификация става на части, а не цялостно и наведнъж. Голяма част от дизайнерите тестват направеното от тях на различни браузъри, за да проверят дали има разлики. Възможно е да се ползват онлайн средства, за да се види как една страница би изглеждала в различни браузъри, но повечето изискват платен абонамент. Тестове се извършват на различни ОС (Windows, Linux, Mac), нови и стари версии на най-популярните Web браузъри (IE, Firefox, Chrome, Opera), като се следи дали всички елементи изглеждат по начина, по който се очаква. Популярно място във връзка с разликите между браузърите е quirksmode.org. 10.4. Свойства за оформяне на текст
По-долу са представени свойствата за оформяне на текст94, като след свойствата, които са по последния документ за CSS395, в скоби е поставено "(3)". Голяма част от тях все още не се поддържат от всички браузъри, но в дългосрочен план ще бъдат приети. font-family - задава шрифт и фамилия от шрифтове. Браузърът може да няма инсталиран конкретен шрифт и затова се препоръчва освен конкретния шрифт, да се зададе и по-обща фамилия от шрифтове, която може да е: serif - серифен шрифт (Georgia, Times, Times New Roman). Стандартен шрифт, с украшения; sans-serif несерифен шрифт (Arial, Verdana, Helvetica). Препоръчва се при по-малки букви, тъй като дизайна е по-изчистен; monospace - шрифт, при който ширината на всички символи е еднаква (Courier, Courier New). Използва обикновено се при разпечатки на
94
Всички свойства могат да приемат стойност inherit, която указва, че стойността трябва да се наследи от родителския елемент. В описанието на свойствата по-долу това е пропуснато, с цел по-кратко изложение. 95 CSS Text Module Level 3, W3C Working Draft 13.11.2012, http://www.w3.org/TR/css3-text/
WWWW
116
117
WEB ТЕХНОЛОГИИ
кодове, тъй като програмните редове се подравняват по подходящ начин; cursive курсивен шрифт (Zapf-Chancery); fantasy - декоративен шрифт (Western). Браузърите би трябвало да поддържат поне по един шрифт от всяка от изброените фамилии от шрифтове. Обикновено се посочват два шрифта и фамилия от шрифтове. Когато името на шрифта се състои от няколко думи, разделени с интервал, то се поставя в кавички. За текст изписан с по-специфичен шрифт може да се създаде графика. Препоръчва се от естетическа гледна точка в една страница да не се използват повече от три различни шрифта. body { font-family: Times, Georgia, serif; } p#note { font-family: Arial, Verdana, Helvetica, sans-serif; } p.code { font-family: "Courier New", Courier, monospace; } font-size - задава размера на шрифта. Могат да се задават най-различни стойности - абсолютни и относителни. Абсолютните могат да се задават с текстови константи: xx-small, x-small, small, medium, large, x-large и xx-large; и с числа в найразлични мерни единици: in (инч, 1in = 2,54cm), cm ( сантиметри), mm (милиметри), pt (поинт/пункт, 1pt = 1/72in), pc (пика, 1pc = 12pt), px (пиксел, 1px = 0,75pt). Относителните стойности се задават с числа, последвано от % (процент), em (ширината на буквата "m") или ex (височината на буквата "x"). Тези мерни единици могат да се използват не само в това свойство, а навсякъде където трябва да се задават размери. За стандартен размер на шрифта се приемат размерите 8, 9, 10, 11, 12, 14, 18, 24, 36, 48, 60 и 72 pt. Тези размери и пропорции типографите считат, че са найблагоприятни за човешкото окото. Популярна практика през последните години е за стандартен текст да се използва шрифт с размер 16px (около 16pt) и останалите размери да са пропорционални на него. В началото подобен шрифт изглежда голям, но четенето е по-лесно и в последствие шрифт от 12 px (около 12 pt) изглежда много малък. p#16 { font-size: 16px; } p.em { font-size: 1.2em; } font-style - може да задават следните стойности: normal, italic и oblique. Разликата между italic и oblique е, че при italic се използва специално калиграфско изписване на шрифта, а при oblique ще се използва нормалния шрифт, наклонен под някакъв ъгъл. В повечето случаи, ако браузърът не намери italic версия на някой шрифт, той ще наклони нормалната версия, т.е. ще се използва oblique. font-weight - задава дебелина на символите, чрез някой от константите: normal, bold, bolder, lighter или числа от 100 до 900 със стъпка 100, като с нарастване на числото, нараства и удебеляването. Стойностите bolder и lighter са спрямо наследената от родителя дебелина. Стойността normal се обикновено се използва, за да се "изключи" удебеляването, наследено от родителски елемент. p { font-weight: normal } /* 400 */ h1 { font-weight: 700 }
/* bold */
strong { font-weight: bold } WWWW
Глава 10. CSS3 – основи на каскадното форматиране на Web страници.
font-variant - променя изписването на буквите, така че да изглеждат като големи букви, но с по-малък размер. Стойностите са normal и small-caps. Може да се прилага на всички елементи и се наследява. font - може да се задават стойности за всичките предишни свойства на едно място. Реда на задаване на стойностите трябва да е: font-style, font-variant, font-weight, font-size, line-height и font-family, като някой стойности може да се пропускат. p { font: 12px/14px sans-serif } p { font: 80% sans-serif } p { font: x-large/110% "New Century Schoolbook", serif } p { font: bold italic large Palatino, serif } p { font: normal small-caps 120%/120% fantasy } text-align - задава хоризонталното подравняване на текста. Възможни стойности са: left, right, center и justify. text-indent - задава отстъп/надстъп на първия ред. Стойността може да се задава в абсолютни и относителни единици. Отрицателни стойности задават надстъп (редът излиза навън). .normal_text { text-indent: 5em; }
text-decoration - задава различни ефекти. Възможни стойности са: overline (линия отгоре), line-through (зачертаване), underline, blink (мигане) и none. text-transform - задава регистър на буквите. Възможните стойности са: capitalize (всяка дума започва с главна буква), uppercase (главни букви), lowercase (малки букви), none. @font-face (3) - задава файл-шрифт (различен от инсталираните при потребителя), който да се свали и използва от браузъра. Голяма част от шрифтовете се използват срещу заплащане. Има и такива, които могат да се използват свободно. Например: www.google.com/fonts, www.fontex.org, www.openfontlibrary.org, www.fontsquirrel.com и др. Трябва да се има впредвид, че различните браузъри използват различни файлови формати за шрифтове - .eot, .woff, .ttf, .otf, .svg и това усложнява самостоятелната реализация. Пример за вмъкване на шрифт Noto Sans от контент сървърите на Google: <link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'> <!-- или --> @import url(http://fonts.googleapis.com/css?family=Noto+Sans); h1 { font-family: 'Noto Sans', sans-serif; } vertical-align - задава вертикално подравняване на вътрешно редови елементи (като <img> или <strong>) с константите baseline - подравняване на базовата линия на реда (по подразбиране), sub - подравняване като долен индекс, super - подравняване като горен индекс, top - подравняване по горната граница на реда, text-top подравняване по горната граница на най-високите букви в реда, middle - подравняване WWWW
118
119
WEB ТЕХНОЛОГИИ
по средата на реда, bottom - подравняване по долната граница на реда, text-bottom подравняване по най-долната граница на буквите в реда. Не се използва за подраняване на блокови елементи, с изключение на съдържанието на <td> и <th>. Други свойства: letter-spacing - задава разстоянието между буквите; wordspacing - задава разстояние между думите; line-height - задава височина на реда; textshadow (3) - задава сянка; white-space - задава как да се представят празните символи; direction - задава посоката на изписване; unicode-bidi - използва се заедно с direction; font-size-adjust (3) - задава какъв размер на шрифта да се използва, ако първия зададен шрифт не може да се използва (не е инсталиран); font-stretch (3) - задава промяна в ширината на символите. cursor - задава вида на курсора на мишката, намиращ се над посочения елемент. Възможни стойности: default, crosshair, help, move, pointer, progress, text, wait, n-resize, ne-resize, e-resize, se-resize, s-resize, sw-resize, w-resize, nw-resize. Възможно е и да се зареди курсор от външен файл. a { cursor:url("cursor.gif"); } a.help { cursor:help; } 10.5. Свойства за списъци
Свойствата за списъци, зададени в спецификациите на W3C,96 са следните: list-style-type - задава символа-маркер, който се поставя пред всеки елемент на списъка. За неподредени списъци се задават следните стойности: disc - плътен кръг; circle - кръг; square - квадрат. За подредени (номерирани) списъци се задават: decimal цифрова номерация; decimal-leading-zero - числа с водеща нула (01, 02 и т.н.); loweralpha или lower-latin - малки латински букви; upper-alpha или upper-latin - големи латински букви; lower-roman/upper-roman - малки/големи римски цифри (i, ii, iii, iv, v.../I, II, III, IV, V...). Възможно е да се зададат и най-различни, специфични за всяка националност и култура, номерации, като в CSS3 е предложен универсален механизъм за генериране на подобни номерации. Възможно е да се зададе и стойност none - да не се извежда нищо пред елемента от списъка. list-style-image - задава изображение, което да се показва вместо символа пред всеки елемент от списъка. ul { list-style-image:url('green_mark.gif'); }
list-style-position - задава дали символа-маркера да е изнесен извън съдържанието, или да е подравнен, заедно с него. Стойности: outside - маркерът е извън съдържанието; inside - маркерът е подравнен заедно с многоредово съдържание. list-style - задава всички свойствата на списъците в следния ред list-style-type, list-style-position, list-style-image. Стойностите се разделят със запетайка.
96
Използвани са спецификация на W3C от 07.11.2011 на Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) http://www.w3.org/TR/CSS2/ и последната редакция от 24.05.2011 на CSS Lists and Counters Module Level 3, http://www.w3.org/TR/css3-lists/
WWWW
Глава 10. CSS3 – основи на каскадното форматиране на Web страници.
10.6. Свойства за таблици
Свойствата за таблици дават големи възможности за оформяне на външния вид на таблиците. border-collapse - задава как да се визуализира рамката на една клетка - дали самостоятелно, т.е. всяка клетка да си има своя рамка, или като обща рамка със съседни клетки или рамката на таблицата. Възможните стойности са: separate - всяка клетка има собствена рамка, при което между съседната клетка или края на таблицата ще има две рамки; collapse - рамката е обща. table { border-collapse:collapse; } border-spacing - задава разстоянието между рамките на две клетки. Първо се задава хоризонталното, а след това вертикалното разстояние. Ако се зададе само едно число, разстоянието по хоризонтала и вертикала ще е еднакво. Свойството bordercollapse трябва да е separate. table { border-collapse:separate; border-spacing:10px 20px; } table-layout - задава как да се оразмеряват колоните чрез стойностите: auto ширината на колоните се определя на база съдържанието на клетките им; fixed ширната на колоните не зависи от съдържанието, а се определя от ширината на таблицата и зададените стойности. table { table-layout:fixed; } caption-side - задава къде да се извежда заглавието на таблицата, т.е. съдържанието на тага <caption>, чрез стойностите top - отгоре; bottom - отдолу на таблицата. table#myTable { caption-side:top; } empty-cells - задава дали да се показват празните клетки от таблица, чрез стойности: show - фона и рамката се визуализират; hide - фона и рамката не се визуализират. table { border-collapse:separate; empty-cells:hide; } По-долу е даден комплексен пример за таблици, в който се спазват добрите практики: да се задава вътрешен отстъп на клетките, за да не се допира съдържанието в WWWW
120
121
WEB ТЕХНОЛОГИИ
рамката; заглавния ред се отличава от останалите по размер, фон, по-дебела линия, изписване; през ред се сменя фона на реда, с цел по-добра ориентация; цифровите стойности за подравнени вдясно, така че по-лесно се различават по-големите от помалките стойности. body { font-family: Arial, Verdana, sans-serif; color: #111111; } /* задаване на ширина на таблицата */ table { width: 600px; } /* задаване на вътрешни отстъпи на клетките */ th, td { padding: 7px 10px 10px 10px; } /* задаване на свойства, така че заглавието да се откроява */ th { text-transform: uppercase; letter-spacing: 0.1em; font-size: 90%; border-bottom: 2px solid #111111; border-top: 1px solid #999; text-align: left; } /* задаване на друг цвят на фона на четните редове */ tr.even { background-color: #efefef; } /* задаване при посочване на клетка, цвета на фона да се сменя */ tr:hover { background-color: #c3e6e5; } /* задава паричните стойнсоти да са подравнени вдясно */ .money { text-align: right; } <h1>Used Cars List</h1> <table> <tr> <th>Model</th><th>Year</th><th class="money">Price</th> </tr> <tr> <td>Fiat Punto</td><td>2002</td><td class="money">1500$</td> </tr> <tr class="even"> <td>Ford Fiesta</td><td>1998</td><td class="money">1200$</td> </tr> <tr> <td>Lada 1600s</td><td>1990</td><td class="money">600$</td> </tr> <tr class="even"> <td>Skoda Oktavia</td><td>2004</td><td class="money">1300$</td> </tr> </table> 10.7. Свойства за кутията
WWWW
Глава 10. CSS3 – основи на каскадното форматиране на Web страници.
Както вече беше казано, всеки HTML елемент се визуализира в правоъгълна област, наречена кутия и тази кутия има редица свойства, които определят външния й вид (виж фиг.9.1).
Фиг.10.1 Елементи на кутията97 Свойства за задаване на цвят на текста и фон: color - задава цвят на текста. Цвета може да се зададе като шестнадесетично число, с име (147 именувани цветове) и с функции rgb(), rgba(), hsl() или hsla(). background-color - задава цвят на фона. background-image - задава фоново изображение. По подразбиране изображението се повтаря, за да запълни цялата кутия. Използват се различни текстури. p { background-image: url("images/pattern.gif"); } background-attachment - задава дали изображението, използвано за фон да се превърта заедно със съдържанието. Стойности: fixed - фоновото изображение е неподвижно; scroll - фоновото изображение се превърта заедно със съдържанието. body { background-image: url("flower.gif"); background-attachment: fixed; } background-position - задава позиция на фоновото изображение, когато то не се повтаря. Задават се две стойности - за хоризонтална и за вертикална позиция. Могат да се използват качествени и количествени стойности. Качествените се формират от left, 97
HICKSDESIGN, "3D CSS Box Model" (Creative Commons License), http://www.hicksdesign.co.uk/boxmodel /, <04.10.2013>
WWWW
122
123
WEB ТЕХНОЛОГИИ
center или right, последвано от top, center или bottom. Ако се зададе само една стойност, другата се приема, че е center. Количествените стойности се задават като двойки числа в абсолютни стойности в различни мерни единици или относително в проценти. Горния ляв ъгъл е на позиция 0 0. body { background-image: url("flower.gif"); background-repeat: no-repeat; background-position: center top; /* или друг вариант: */ background-position: 50% 50%; } background-repeat - задава как фоновото изображение да запълва елемента. Стойности: no-repeat - без повторение; repeat-x - изображението се повтаря само хоризонтално (надясно); repeat-y - изображението се повтаря само вертикално (надолу); repeat - изображението се повтаря и хоризонтално и вертикално; body { background-image:url('sunset.jpg'); background-repeat:repeat-y; } background - задава едновременно свойствата background-color, backgroundimage, background-repeat, background-attachment и background-position в същия ред. Някой от стойностите може да се пропуснат. background-size (3) - задава размера на фоновото изображение. Стойности: cover - мащабира пропорционално фоновото изображение така че да покрива фоновата област (възможно е част от изображението да не се вижда); contain - мащабира непропорционално фоновото изображение така че то да запълва цялата фонова област. Освен тези качествени стойности, могат да се задават и абсолютни и относителни стойности за хоризонтален и за вертикален размер. body { background-image:url('sunset.jpg'); background-size:80px 60px; } background-origin (3) - задава какво да обхваща фоновата област когато се използва фоново изображение. Стойности: border-box - от външната страна на рамката; padding-box - от вътрешната страна на рамката, т.е. външната на отстъпа; content-box фоновата област е областта, където е съдържанието (текста). background-clip (3) - задава какво да обхваща фоновата област когато се използва цвят. Стойности: border-box - от външната страна на рамката; padding-box - от
WWWW
Глава 10. CSS3 – основи на каскадното форматиране на Web страници.
вътрешната страна на рамката, т.е. външната на отстъпа; content-box - фоновата област е областта, където е съдържанието (текста). opacity - задава прозрачност на целия елемент (а не само на фона). Стойности: от 0.0 (пълна прозрачност) до 1.0 (пълна непрозрачност). #myDIV { background-color:lightblue; width:200px; height:100px; opacity:0.5; } Всяка кутия има рамка, която може и да не се вижда, ако дебелината и е 0px. Свойства за рамката border - задава всички свойства на рамката с една декларация border-top, border-right, border-bottom, border-left - задават всички свойства съответно на горна, дясна, долна и лява рамка с една декларация border-color - задава с една декларация цвят на четирите страни на рамка border-top-color, border-left-color, border-bottom-color, border-right-color задават цвят съответно на горна, дясна, долна и лява рамка border-style - задава с една декларация типа на четирите страни на рамка. Стойности: none - без рамка; hidden - подобно на "none", т.е. без рамка, но със специфично поведение, когато се прилага към таблица; dotted - рамка с точки; dashed пунктирана линия; solid - непрекъсната единична линия; double - двойна непрекъсната линия; groove - вдлъбната рамка; ridge - изпъкнала рамка; inset - рамката създава впечатление, че оградената област е вдлъбната; outset - рамката създава впечатление, че оградената област е изпъкнала (игра със светлосенките). border-top-style, border-right-style, border-bottom-style, border-left-style задава стил съответно на горна, дясна, долна и лява рамка border-width - задава с една декларация дебелина на четирите страни на рамка. Стойностите могат да бъдат качествени и количествени. Качествените са: thin - тънка рамка, medium - средно дебела рамка и thick - дебела рамка. border-top-width, border-right-width, border-bottom-width, border-left-width задава дебелина съответно на горна, дясна, долна и лява рамка. outline - задава всички свойства на външната линия с една декларация. Външната линия се намира извън външния отстъп, т.е. тя е извън рамката и я обхваща. outline-color, outline-style, outline-width - задава на външната линия поотделно съответно цвят, стил и дебелина. border-radius (3) - задава заобленост на всичките четири ъгъла на рамката
WWWW
124
125
WEB ТЕХНОЛОГИИ
border-top-right-radius (3), border-bottom-right-radius (3), border-bottom-leftradius (3), border-top-left-radius (3) - задава заобленост на рамката съответно на горендесен, долен-десен, долен-ляв и горен ляв ъгъл. border-image (3) - задава всички свойства за изображение за рамката с една декларация в реда border-image-source, border-image-slice, border-image-width, borderimage-outset и border-image-repeat. Изображението се разрязва на девет части с два хоризонтални и два вертикални сряза. Четирите ъглови части се използват за ъглите на рамката, четирите странични части - за страните на рамката. Средният елемент обикновено не се използва, но може да се показва. Свойствата за външен и вътрешен отстъп задават разстояния отвън и вътре в рамката. Външните отстъпи се задават общо със свойството margin или поотделно с margin-top, margin-right, margin-bottom и margin-left. Външния отстъп е извън рамката и създава пространство между рамките на две съседни кутии. Вътрешните отстъпи се задават общо със свойството padding или поотделно с padding-top, padding-right, padding-bottom и padding-left. Вътрешния отстъп е разстоянието между рамката и съдържанието и наличието на празно пространство подобрява читаемостта на съдържанието. Обикновено стойностите се задават в пиксели. Между външния отстъп и вътрешния отстъп е разположена рамката. Тя по подразбиране е с дебелина нула и не се вижда. margin - задава еднакъв външен отстъп от всички страни на кутията. margin-top , margin-right, margin-bottom, margin-left - задават външен отстъп съответно отгоре, отдясно, отдолу и отляво. Стойността по подразбиране е auto. Тези свойства не се наследяват. padding - задава еднакъв вътрешен отстъп от всички страни на кутията. padding-top, padding-right, padding-bottom, padding-left - задават вътрешен отстъп съответно отгоре, отдясно, отдолу и отляво. Стойността по подразбиране е auto. Тези свойства не се наследяват. По подразбиране кутията се оразмерява автоматично да е толкова голяма, че да събере цялото съдържание. Изричното задаване на размери за височина и ширина обикновено се извършва в пиксели, проценти или в em. Пикселите позволяват точно да се задават размерите. Когато се използват проценти, размера е спрямо прозореца на браузъра или спрямо друга кутия, в която те е вмъкната. Em дава възможност за оразмеряваме спрямо текста в кутията. Ако потребителя променя размерите на прозореца на браузъра, дизайнера може да осигури минимален размер на елемента, за да се избегне ситуация, при която например на един ред има само една дума или буква, или да осигури максимален размер на елемента, така че един ред да не е прекален дълъг. width - задава ширина на кутията (използва се и за <img>). min-width, max-width - задава минимална/максимална ширина height - задава височина на кутията (използва се и за <img>). WWWW
Глава 10. CSS3 – основи на каскадното форматиране на Web страници.
img.small { width: 100px; height: 100px; } min-height, max-height - задава минимална/максимална височина. td.description { min-width: 450px; max-width: 650px; text-align: left; padding: 5px; margin: 0px; } overflow - задава какво да се прави със съдържанието, което не се побира в кутията чрез две стойности: hidden - скрива съдържанието, което е извън кутията; scroll - прибавят се ленти за превъртане. display - задава дали елемента да има характеристиките на вътрешноредов или на блоков елемент или да бъде скрит. Стойности: inline - елемента става вътрешноредов; block - елемента става блоков; none - скрива елемента, все едно че го няма в страницата. Промяната на това блоков елемент да изглежда като вътрешноредов се използва много често при създаване на хоризонтално меню, чрез списък, чиито елементи за блокови по подразбиране. li { display: inline; margin-right: 10px; } li.coming-soon { display: none; } <ul> <li>Home</li> <li>Products</li> <li class="coming-soon">Services</li> <li>About</li> <li>Contact</li> </ul> visibility - задава дали даден елемент да е видим или невидим. Ако е невидим, на неговото място се вижда празно пространство (за разлика от display: none;). Стойности: hidden - скрива елемента; visible - елемента се вижда. box-shadow (3) - задава сянка на кутията, чрез стойности за: хоризонтално отместване на сянката; вертикално отместване на сянката; разстояние на размазването; размери на сянката - положителни стойности я разширяват във всички посоки, а отрицателни я намаляват; цвят. div { box-shadow: 10px 10px 5px #888888; } WWWW
126
127
WEB ТЕХНОЛОГИИ
Понякога се налага кутия да се разположи посредата на страница или посредата в друг елемент. В този случай, на кутията трябва да се зададе определена ширина, а левия и десния външен отстъп да се зададат auto. p.centered { width: 300px; padding: 50px; border: 20px solid #0088dd; margin: 10px auto 10px auto; } Контролни въпроси 1. Кои са основните своиства за оформяне на текст чрез CSS3? 2. Кои са основните своиства за оформяне на таблици чрез CSS3? 3. За какво се използва свойството background-position в Web-страница
Глава 11. JavaScript и AJAX - Синхронно и асинхронно програмиране на Web страници. 11.1. Обща характеристика. Вмъкване на програмен код на JavaScript в Web страница
JavaScript е интерпретаторен език за програмиране, създаден през 1995 г. от компанията Netscape с цел да се използва в техния браузър. Към настоящия момент интерпретатор на JavaScript се вгражда в почти всички браузъри. Налични са и самостоятелни интерпретатори, които дават възможност за създаване на сървърни приложения (например Node.js), създаване на приложения с графичен потребителски интерфейс (например Adobe AIR) и вграждане в приложения (PDF Acrobat Reader). Вграденият в браузърите интерпретатор на JavaScript има достъп до т.нар. документен обектен модел (Document Object Model, DOM) на Web страницата, при което тя се представя като съвкупност от обекти със свойства и методи, които могат да бъдат управлявани по програмен път. Допълнителен принос за засилване на интерактивността на Web страницате има технологията Ajax (Asynchronous JavaScript and XML), която дава възможност за асинхронен обмен ("на заден план") на данни между браузъра и сървъра, без да се презарежда цялата страница. Развитието на езика JavaScript се подчинява на спецификациите на ECMA International за ECMAScript 98 и през годините езика се е развивал динамично и ще продължава да се развива и в бъдеще. Всички производители на интерпретатори се стремят да спазват последния приет за стандарт вариант на спецификацията Ecma-262, но тъй като потребителите могат да използват по-стари браузъри, то няма гаранции, че 98
Към 2013 е актуална спецификацията за JavaScript 1.8.5, ECMA-262, edition 5, http://www.ecmainternational.org/publications/standards/Ecma-262.htm
WWWW
Глава 11. JavaScript и AJAX - Синхронно и асинхронно програмиране на Web
ще могат да се изпълняват програми написани по най-актуалните спецификации. За избягване на тези проблеми, обикновено се пишат програми с цел да се изпълняват безпроблемно на възможно най-голям брой устройства и компютри. Обикновено с JavaScript се реализира следната функционалност в една Web страница: динамично генериране на съдържание - изцяло генерирана Web страница или на отделни части от нея; създаване на анимационни ефекти и интерактивност, чрез прихващане на събития и работа с таймери; проверка на данни в Web форма преди изпращането им към сървъра; работа със съхранените данни в бисквитки (cookies) в браузъра; изпращане на данни без презареждане на Web страница чрез AJAX. Програмите на JavaScript могат да бъдат във външни файлове или да бъдат поставяни в частта head или в частта body на една Web страница. Всички програмни редове, които не са в тялото на функция представляват главната програма, която се изпълнява веднага след зареждане на страницата. Програмните редове на главната програма могат да се прекъсват от дефиниции на функции и да бъдат разположени на различни места, т.е. понякога проследяването на главната програма може да е затруднено. Пример за вмъкване на JavaScript в Web страница и динамично генериране на съдържание: Във файл f.js: document.write("1"); Във файл на Web страница: <html> <head> <script type="text/javascript" src="f.js"></script> <script type="text/javascript"> document.write("2"); </script> </head> <body> <script type="text/javascript"> document.write("3"); </script> <h1>Hello!</h1> <script> for(i = 4; i < 10; i++) document.write(i+", "); </script> </body> </html> Резултат в браузъра: 123 Hello! 4, 5, 6, 7, 8, 9,
11.2. Синтаксис и разлики спрямо C/C++ WWWW
128
129
WEB ТЕХНОЛОГИИ
Синтаксисът на JavaScript наследява този на C/C++/Java. Влиянието на Perl също е значително. Ще се спрем по-подробно само на тези моменти в езика, които са нови спрямо C/C++. Правилата за образуване на идентификатори - имена на променливи и функции са същите, т.е. първият символ трябва да е латинска буква или _; следващите символи може да са латински букви, _ или цифри; малки и големи букви са от значение. Нови моменти са: 1. Ключовите думи, които не могат да се използват за идентификатори, са (пълен списък в азбучен ред): break, case, catch, continue, debugger, default, delete, do, else, false, finally, for, function, if, in, instanceof, new, return, switch, this, throw, true, try, typeof, var, void, while, with. За бъдещи нужди са запазени и също не могат да се използват: class, const, enum, export, extends, implements, import, interface, let, package, private, protected, public, static, super, yield. 2. Локални променливи (в тялото на функция или между {...}) може да се декларират с var, но може и предварително да не се декларират - при първото срещане на променливата, се заделя памет за нея. При глобалните променливи няма значение, дали те ще се декларират с var или не. Ако имаме глобална променлива и в програмен блок имаме локална променлива декларирана с var и със същото име, то локалната ще скрие глобалната променлива. 3. Не се задава типа на данните, съхранявани в една променлива и тя може да приема различни типове данни по време на изпълнение на програмата. Всъщност всяка стойност, която може да приема една променлива е обект. Най-често тя е от някой от системните класове (наричани в JavaScript вградени обекти): Undefined (стойност undefined), Null (стойност null), Object (съвкупност от променливи, някои от които съхраняват указател към функция), Function (съхранява указател към функция), Array (динамичен масив), String (символен низ в кодировка UTF-16), Boolean (стойности true и false), Number (64 битово число - цяло или с плаваща запетая, NaN или +/-Infinity), Math, Date, RegExp, JSON и Error (за грешки има допълнително и класовете EvalError, RangeError, ReferenceError, SyntaxError, TypeError и URIError). Операторът typeof връща типа на съхраняваните данни в една променлива като низ: "undefined", "object", "boolean", "number", "string", "object" или "function". 4. Символните низове могат да се ограждат с кавички или апострофи като смисъла е един и същ. Аритметично-логическите оператори, както и тези за присвояване са същите: +, , *, /, %, ++, --; ==, !=, <, >, <=, >=; &&, ||, !; <<, >>; &, |, ^, ~; ?:; =, +=, -, =, *=, %=, <<=, >>=, &=, |=, ^=. Нови моменти при операторите са: 1. Оператори ===, !== - сравнение за равенство (неравенство) по стойност и тип 2. Оператори >>>, >>>= - двоично преместване на битовете надясно със запълване с нулев бит отляво, т.е. не се запазва знака на числото. WWWW
Глава 11. JavaScript и AJAX - Синхронно и асинхронно програмиране на Web
3. Оператор + - когато единият от операндите е низ, оператора работи като конкатенация, слепване на низове. Ако другия операнд не е низ, той се преобразува в низ. Примери за работа с основните (простите) типове данни: //числа x = -123; x = 3.14159; x = 5.6E7; //низове x = "низ1"; x = 'низ2'; x = "Той каза 'здравей'"; x = 'Той каза "здравей".'; x = ""; //логическа стойност x = true; x = false; Вмъкването на коментари в програмен код става по същия начин: // - коментар до края на реда; /* ...*/ - многоредов коментар. Управляващите оператори за разклонение - if, if...else, if...else if...else, switch...case...default...break - са същите. Управляващите оператори за повторение - for, while, do...while, както и break и continue - са същите. Нови моменти са: 1. Липсва оператор goto. След break и continue може да се слага етикет и те да се използват подобно на goto в C/C++ при вложени програмни цикли. 2. Има допълнителен вариант на for, с който могат да се обхождат всички елементи на един масив - for-in: for(ПРОМЕНЛИВА in МАСИВ) В този случай индексите на елементите на масива последователно се присвояват на ПРОМЕНЛИВА. Пример: <script> a = [1,2,3,4,5]; //масив for (x in a) { document.write("<p>"+x+"^2="+x*x+"</p>"); } </script> 11.3. Глобални функции WWWW
130
131
WEB ТЕХНОЛОГИИ
В JavaScript има няколко глобални функции, които са вградени в езика. Таблица 11.1
Глобални функции, членове на глобалния обект Global ФУНКЦИЯ parseInt (НИЗ, БРОЙНА_СИСТЕМА) parseFloat (НИЗ) isFinite (ЧИСЛО) isNaN (СТОЙНОСТ) encodeURL(НИЗ), escape(НИЗ), encodeURLComponent(НИЗ), decodeURL(НИЗ), unescape(НИЗ), decodeURLComponent(НИЗ)
eval (НИЗ)
ОПИСАНИЕ преобразува НИЗ, в който има число записано в БРОЙНА СИСТЕМА в цяло число. При неуспех се връща NaN. преобразува НИЗ в число с плаваща запетая . При неуспех се връща NaN. връща дали ЧИСЛО е крайно и валидно число, т.е. може да участва в изрази. връща дали аргумента низът, подаден като параметър не е число. Ако низът не е число, функцията връща резултат истина, а в противен случай връща резултат лъжа. преобразуват НИЗ в специален формат и обратно, за да може да се кодират/декодират данни в/от URL адреси99. Не препоръчваме да се използват escape и unescape, тъй като вече не са в основния текст на новите спецификации за ECMAScript. изпълнява НИЗ като програма на JavaScript и връща резултат. Пример: <script> s = prompt("Въведете число", ""); x = eval("(" + s + "*2)"); alert(s + " x 2 = " + x); </script>
Членовете на обекта window от Документния обектен модел - променливи, функции и обекти, също са включени в глобалното именовано пространство, т.е. може да се използват без да се пише "window.". Често използвани са методите (които могат да се извикват като глобални функции) за диалогови изскачащи (popup) прозорци: alert(НИЗ) - за извеждане на съобщение, confirm(НИЗ) - за потвърждение (връща true или false) и prompt(НИЗ, ПЪРВОНАЧАЛНА_СТОЙНОСТ) - за въвеждане на данни (връща въведеното или null, ако е избран Cancel). Списъкът на глобално достъпните членове на window, които се поддържат от най-разпространените браузъри е следния:
99
Когато данни се изпращат чрез методи GET (двойки ключ-стойност след URL) и POST (в тялото на заявката), те се кодират във формат x-www-form-urlencoded (кодиране с процент) - интервала се замества с +, всички символи различни от a-z, A-Z, 0-9 и _ се кодират с %, последвано от две шестнадесетични цифри, които отговарят на ASCII кода на символа. UTF-8 символите първо се преобразуват в байтове и след това се кодират по този начин. Виж RFC 1738 (1994) Uniform Resource Locators (URL), RFC 2396 (1998) Uniform Resource Identifiers (URI) и RFC 3986 (2005) Uniform Resource Identifiers (URI).
WWWW
Глава 11. JavaScript и AJAX - Синхронно и асинхронно програмиране на Web
1. Свойства (глобални променливи): closed, frames, innerHeight, innerWidth, length, name, opener, outerHeight, outerWidth, pageXOffset, pageYOffset, parent, screenX (screenLeft за IE), screenY (screenTop за IE), self, status, top. 2. Методи (глобални функции): .alert(), .blur(), .clearInterval(), .clearTimeout(), .close(), .confirm(), .createPopup(), .focus(), .moveBy(), .moveTo(), .open(), .print(), .prompt(), .resizeBy(), .resizeTo(), .scroll(), .scrollBy(), .scrollTo(), .setInterval(), .setTimeout(). 3. Обекти (глобални обекти): document, history, location, navigator, screen. 11.4. Потребителски функции
Дефинирането на потребителски функции може да се извърши във външен файл, в секцията head и в секцията body на Web страницата. Указва се с ключовата дума function. Ако функцията трябва да върне стойност, това става с оператора return. Не се задава тип на връщана стойност или типа на формалните параметри в декларативната част. Определянето на това кои аргументи се предават "по стойност" и кои "по адрес" се извършва неявно, в зависимост както от типа на предаваните данни, така и от действията, които се извършват с тях. Простите типове данни (числа и низове) винаги се предават "по стойност" като аргументи, т.е. във функцията се работи с тяхно копие. Сложните типове данни, като масиви и обекти се предават "по адрес", т.е. при промяна на елементи на масиви или свойства на обекти, се променя предавания масив или обект. Ако обаче на формалния параметър, който сочи към масив или обект се зададе друга стойност (друг масив или обект), то тази промяна не се отразява на предаваната стойност, т.е. има предаване "по стойност". Пример: <script> function f(n, s, a1, a2, o1, o2) { n = 999; //по стойност s = "zzz"; //по стойност a1[0] = 999; //по адрес a2 = new Array (888, 777); //по стойност o1.n = 999; //по адрес o2 = {n: 999}; //по стойност } _n = 111; _s = "aaa"; _a1 = new Array(111, 222); _a2 = new Array(333, 444); _o1 = new Object(); _o1.n = 111; _o2 = new Object(); _o2.n = 111; f(_n, _s, _a1, _a2, _o1, _o2); alert(_n+"|"+_s+"|"+_a1[0]+"|"+_a2[0]+"|"+_o1.n+"|"+_o2.n); </script> В диалогов прозорец се извежда: 111|aaa|999|333|999|111 WWWW
132
133
WEB ТЕХНОЛОГИИ
11.5. Масиви Масивите в JavaScript са обекти от клас Array. Характерно за тях е, че те са динамични масиви, които могат да променят размера си по време на изпълнение на програмата и, че съхраняваните стойности може да са от различен тип. Друга особена черта е, че масивът е всъщност асоциативен масив, т.е. вместо индекси-числа, могат да се задават и използват ключове-низове за достъп до елементите му, т.е. до съхраняваните стойности. Пример за създаване и обхождане на динамичен масив: а = new Array(3); а[0] = 3; а[1] = "4"; а[2] = 5.7; //или а = new Array(3,"4",5.7); //или a = [3,"4",5.7]; for(x in a) { document.write("<p>" + a[x] + "</p>"); } for(x=0; x<a.length; x++) { document.write("<p>" + a[x] + "</p>"); } Пример за работа с асоциативен масив var a = new Array(); a["ivan"] = 3; a["Ivan"] = "4"; a["IVAN"] = 5.7; a[10] = 10; for (x in a) { document.write("<p>" + a[x] + "</p>"); } Класът Array има една член-променлива - .length, в която се съхранява колко е брой на елементите на масива. Методите на Array са: .concat( МАСИВ [, МАСИВ...] ), .indexOf( ЕЛЕМЕНТ [, НАЧАЛЕН_ИНДЕКС] ), .join( [РАЗДЕЛИТЕЛЕН_НИЗ] ), .lastIndexOf( ЕЛЕМЕНТ [, НАЧАЛЕН_ИНДЕКС] ), .pop(), .push( ЕЛЕМЕНТ [, ЕЛЕМЕНТ...] ), .reverse(), .shift(), .slice( НАЧАЛЕН_ИНДЕКС [, КРАЕН_ИНДЕКС] ), .sort( [ФУНКЦИЯ_ЗА_СОРТИРАНЕ] ), .splice( НАЧАЛЕН_ИНДЕКС, БРОЙ_ЕЛЕМЕНТИ [, ЕЛЕМЕНТ...] ), .unshift( ЕЛЕМЕНТ [, ЕЛЕМЕНТ...] ). 11.6. Вградени класове Date, Math, Number, String, Boolean, RegEx
Обекти от класа Date се използват за работа с дати и време. Вътрешно времето се представя като едно число - брой милисекунди от началото на т.нар. UNIX епоха 01.01.1970 00:00:00 GMT. WWWW
Глава 11. JavaScript и AJAX - Синхронно и асинхронно програмиране на Web
Създават с някой от вариантите с конструктори: d = new Date(); //днешна дата d = new Date(UNIX_ms); //милисекунди от 01.01.1970 d = new Date(ДАТА_КАТО_НИЗ); //"May 23, 2013 11:13:00" d = new Date(y, m, d, h, m, s, ms); Годините се задават с четири цифри, месеците с числа в диапазона от 0 до 11, дните с числа в диапазона от 1 до 31, часове - от 0 до 23, минути и секунди - от 0 до 59, милисекунди - от 0 до 999. Възможно е да се задават и по-големи стойности от дадените диапазони, както и отрицателни числа, при което се променя по-старшия разряд на датата и времето. Методите са: .getDate(), .getDay(), .getFullYear(), .getHours(), .getMilliseconds(), .getMinutes(), .getMonth(), .getSeconds(), .getTime(), .getTimezoneOffset(), .getUTCDate(), .getUTCDay(), .getUTCFullYear(), .getUTCHours(), .getUTCMilliseconds(), .getUTCMinutes(), .getUTCMonth(), .getUTCSeconds(), .parse( ДАТА_КАТО_НИЗ ), .setDate( ДЕН_ОТ_МЕСЕЦА , .setFullYear(y, [,m [, d]]), .setHours(h, [,m [, s [, ms]]]), .setMilliseconds(ms), .setMinutes(m [, s [, ms]]), .setMonth(m [, d]), .setSeconds(s [, ms]), .setTime(UNIX_ms), .setUTCDate( ДЕН_ОТ_МЕСЕЦА ), .setUTCFullYear(y, [,m [, d]]), .setUTCHours(h, [,m [, s [, ms]]]), .setUTCMilliseconds(ms), .setUTCMinutes(m [, s [, ms]]), .setUTCMonth(m [, d]), .setUTCSeconds(s [, ms]), .toDateString(), .toISOString(), .toJSON(), .toLocaleDateString(), .toLocaleTimeString(), .toLocaleString(), .toTimeString(), .toUTCString(), .UTC(y, m, d [, h, [,m [, s [, ms]]]]). За изпълнение на отложени или повтарящи се действия се използват функции за управление на таймери от обекта window: Еднократно задействане на таймера: var t; t = setTimeout(ФУНКЦИЯ, ИНТЕРВАЛ_ms); clearTimeout(t); Многократно задействане на таймера var t; t = setInterval(ФУНКЦИЯ, ИНТЕРВАЛ_ms); clearInterval(t); Вградения клас Math дава възможност за работа с математически константи и фукции. Пример: x = Math.PI; x = Math.sqrt(4); x = Math.random(); x = Math.sin(0.5); Членове-константи на класа Math: .E, .LN2, .LN10, .LOG2E, .LOG10E, .PI, .SQRT1_2, .SQRT2 WWWW
134
135
WEB ТЕХНОЛОГИИ
Методи на класа Math: .abs(x), .acos(x), .asin(x), .atan(x), .atan2(y,x), .ceil(x), .cos(x), .exp(x), .floor(x), .log(x), .max(x,y,z,...,n), .min(x,y,z,...,n), .pow(x,y), .random(), .round(x), .sin(x), .sqrt(x), .tan(x) Вградения клас Number представлява типа данни число. Пример: x = new Number("3.1415"); Член-константи на класа Number: .MAX_VALUE, .NEGATIVE_INFINITY, .NaN, .POSITIVE_INFINITY
.MIN_VALUE,
Методи на класа Number: .toExponential(x), .toFixed(x), .toPrecision(x). Вградения клас String представлява типа данни низ. Пример: s = new String("text"); s = "text"; Член-променливи на класа String: .length Методи на класа String: .charAt(ИНДЕКС), .charCodeAt(ИНДЕКС), .concat( НИЗ [,НИЗ...] ), .fromCharCode( ЧИСЛО [,ЧИСЛО...] ), .indexOf( НИЗ_ЗА_ТЪРСЕНЕ [,НАЧАЛНА_ПОЗИЦИЯ] ), .lastIndexOf( НИЗ_ЗА_ТЪРСЕНЕ [,НАЧАЛНА_ПОЗИЦИЯ] ), .match( РЕГУЛЯРЕН_ИЗРАЗ ), .replace( НИЗ_ЗА_ТЪРСЕНЕ, НИЗ_ЗА_ЗАМЯНА ), .search( НИЗ_ЗА_ТЪРСЕНЕ ), .slice( НАЧАЛНА_ПОЗИЦИЯ [, КРАЙНА_ПОЗИЦИЯ] ), .split( [СИМВОЛ|РЕГУЛЯРЕН_ИЗРАЗ, [МАКС_БРОЙ_ЕЛЕМЕНТИ]] ), .substr( НАЧАЛНА_ПОЗИЦИЯ [, ДЪЛЖИНА] ), .substring( НАЧАЛНА_ПОЗИЦИЯ [, КРАЙНА_ПОЗИЦИЯ] ), .toLowerCase(), .toUpperCase(). Вградения клас Boolean представлява логически тип данни за работа с логически стойности true и false. Вградения клас RegExp дава възможност за работа с регулярни изрази шаблони, описващи поредица от символи. Теорията на регулярните изрази не може да се изложи в рамките на тази тема. 11.7. Прихващане на събития
Действията, които извършва потребителя с мишката или клавиатурата докато работи с една Web страница, генерират събития. Тези събития могат да се прихващат и да се изпълнява определен програмен код. Прихващането става чрез т.нар. манипулатори, на които се присвоява като низ програмния код, който трябва да се изпълни. Обикновено в низа не се пишат много програмни редова, а се извиква само една функция, като тези функции специално се предвиждат да се изпълняват след точно определно действие, като например кликване върху някой елемент и този начин на програмиране е известен като събитийно програмиране. Манипулаторите, които прихващат събития се записват като параметри на таговете. Различните тагове поддържат различно множество от събития и този модел е стандартизиран от W3C под формата на технически доклади (виж Document Object Model (DOM) Level 2 Events Specification, 13.11.2000, http://www.w3.org/TR/2000/RECDOM-Level-2-Events-20001113/events.html). Общият вид на прихващане на събитие е: WWWW
Глава 11. JavaScript и AJAX - Синхронно и асинхронно програмиране на Web
<ТАГ onСЪБИТИЕ="ПРОГРАМЕН_КОД"> Например: <h1 onclick="alert('Hi!');" onmouseout="alert('Bye!');"> Hello </h1> Събития, генерирани от мишката - onclick, onmousemove, onmouseover, onmouseout, onmouseup.
ondblclick,
onmousedown,
Събития, генерирани от клавиатурата - onkeydown, onkeypress, onkeyup Събития, генерирани от прозорци, фреймове и други обекти - onabort, onerror генерира се при грешка в скрипта, onload - генерира се при завършване на зареждане на страницата, onresize, onscroll, onunload. Събития, генерирани от формуляри и полета в тях - onblur - генерира се при напускане на обект, onchange - генерира се когато се промени съдържанието на обекта, onfocus - генерира се когато обекта е на фокус, onreset, onselect - генерира се при маркиране на текст, onsubmit - генерира се при изпращане на формуляр. Най-често данните във формулярите се проверяват дали са попълнени всички задължителните полета, дали въведените данни са валидни - валиден имейл адрес, въведен ли е текст в цифрови полета, дати и т.н. Пример за картинна галерия. <!DOCTYPE html> <html> <head> <title>Картинна галерия</title> </head> <body> <center> <h1>Нашата галерия</h1> <a href="http://www.ue-varna.bg/images/galery/img_1.jpg" target="if1">1</a> <a href="http://www.ue-varna.bg/images/galery/img_2.jpg" target="if1">2</a> ........ <a href="http://www.ue-varna.bg/images/galery/img_15.jpg" target="if1">15</a> ................ <a href="http://www.ue-varna.bg/images/galery/img_49.jpg" target="if1">49</a> <hr /> <iframe src="" width="150" height="120" name="if1" frameborder="0"></iframe> <hr /> <script> for(i=1; i<=49; i++) { s = '<a href="http://www.ue-varna.bg/images/galery/img_' + i + '.jpg" target="if1">'; s = s + i; s += "</a> "; // s = '<a href="http://www.ue-varna.bg/images/galery/img_' + i + '.jpg" target="if1">' + i + '</a> '; WWWW
136
137
WEB ТЕХНОЛОГИИ
document.write(s); } </script> <hr /> <button type="button" onclick="prev();">предишна</button> <button type="button" onclick="next();"><img src="next.jpg" /></button> <script> var index = 1; function prev() { index--; if(index < 1) index = 49; window.frames['if1'].location="http://www.ue-varna.bg/images/galery/img_" + index + ".jpg"; } function next() { index++; if(index > 49) index = 1; window.frames['if1'].location="http://www.ue-varna.bg/images/galery/img_" + index + ".jpg"; } </script> <hr /> <button type="button" onclick="start();">старт</button> <button type="button" onclick="stop();">стоп</button> <script> var t; function start() { t = setInterval( function() {next()} , 1000); } function stop() { clearInterval(t); } </script> <hr width="70%" /> <script> for(i=1; i<=49; i++) { s = '<img src="http://www.ue-varna.bg/images/galery/img_' + i + '.jpg" /> '; document.write(s); if((i%5)==0) document.write("<br />"); } </script> </center> </body> </html> Програмен фрагмент - пример за промяна цвета на фона на посочен елемент от хоризонтално меню, чрез прихващане на събития onmouseover и onmouseclick. <table border="0" align="center" cellspacing="0" bgColor="#FFFFCC"> <tr> <td width="10"></td> WWWW
Глава 11. JavaScript и AJAX - Синхронно и асинхронно програмиране на Web
<td id="1" onmouseover="changeBg('1','#FFFF00');" onmouseout="changeBg('1','');"> <a href="#">Меню1</a> </td> <td width="10"></td> <td id="2" onmouseover="changeBg('2','#FFFF00');" onmouseout="changeBg('2','');"> <a href="#">Меню2</a> </td> <td width="10"></td> <td id="3" onmouseover="changeBg('3','#FFFF00');" onmouseout="changeBg('3','');"> <a href="#">Меню3</a> </td> <td width="10"></td> </tr> </table> <script> function changeBg(id, color) { document.getElementById(id).bgColor=color; //или така: //document.getElementById(id).style.backgroundColor=color; } </script> Програмен фрагмент - пример за ефект на послесветене на посочен елемент от вертикално меню, чрез използване на таймер <table border="0" align="center" cellspacing="5" bgColor="#FFFFCC"> <script> menu = new Array(); url = new Array(); menu[0] = "Меню&nbsp;1"; url[0] = "#"; menu[1] = "Меню&nbsp;2"; url[1] = "##"; menu[2] = "Меню&nbsp;3"; url[2] = "###"; menu[3] = "Меню&nbsp;4"; url[3] = "####"; menu[4] = "Меню&nbsp;5"; url[4] = "#####"; t = ''; for(i=0; i<menu.length; i++) { t += '<tr><td id="VT' + i + '" '; t += "onmouseover=\"chBgVT('VT" + i + "','#00CC00');\" "; t += "onmouseout=\"timeVT('VT" + i + "','');\">"; t += '<a href="' + url[i] + '">' + menu[i] + '</a>'; t += '</td></tr>'; } document.write(t); function chBgVT(id, color) { document.getElementById(id).bgColor=color; } function timeVT(id, color) { code = "chBgVT('" + id + "', '" + color + "')"; setTimeout(code, 500); document.getElementById(id).bgColor="#66FF66"; WWWW
138
139
WEB ТЕХНОЛОГИИ
} </script> </table> Програмен фрагмент - пример за работа с многомерни масиви, обхождане с for...in, функция clearTimeout(), innerHTML. <div align="right"><input type="checkbox" onclick=" document.getElementById('tableSMHT').border=this.checked?1:0;" /> Линии между клетките на таблицата</div><br /> <table id="tableSMHT" border="0" align="center" cellspacing="0" style="border-collapse: collapse;" onmousemove="clearTimeout(timerSMHT);" onmouseout="clearTimeout(timerSMHT); timerSMHT=setTimeout('clearSubmenuHT();',300);"> <script> timerSMHT = 0; menuSMHT = [ ['Меню&nbsp;0', ['Подменю&nbsp;01', 'URL01'], ['Подменю&nbsp;02', 'URL02'], ['Подменю&nbsp;03', 'URL03'] ], ['Меню&nbsp;1', ['Подменю&nbsp;11', 'URL11'], ['Подменю&nbsp;12', 'URL12'] ], ['Меню&nbsp;2', ['Подменю&nbsp;21', 'URL21'], ['Подменю&nbsp;22', 'URL22'], ['Подменю&nbsp;23', 'URL23'] ] //... copy & paste Menu ... // ВНИМАНИЕ ЗА --> , <-- ЗАПЕТАЙКИТЕ! ]; for(i=1; i<7; i++) { menuSMHT[i] = ['Меню&nbsp;' + i]; br = 2 + i%4; for(j=1; j<=br; j++) { menuSMHT[i][j] = ['Подменю&nbsp;' + i + j, 'URL' + i + j]; } } r0 = '<tr bgcolor="white" height="7"><td width="10"></td>'; r1 = '<tr bgcolor="#FFFFCC"><td width="10"></td>'; r2 = '<tr bgcolor="white" height="5"><td width="10"></td>'; r3 = '<tr bgcolor="white"><td id="SMHTr3" align="center" '; r3 += 'colspan="' + (1+menuSMHT.length*2) + '"></td></tr>'; for(i=0; i<menuSMHT.length; i++) { r0 += '<td id="SMHTr0' + i + '"></td>'; r0 += '<td width="10"></td>'; r1 += '<td id="SMHTr1' + i + '" '; r1 += "onmouseover=\"showSubmenuHT('" + i + "');\">"; WWWW
Глава 11. JavaScript и AJAX - Синхронно и асинхронно програмиране на Web
r1 += menuSMHT[i][0] + '</td><td width="10"></td>'; r2 += '<td id="SMHTr2' + i + '"></td>'; r2 += '<td width="10"></td>'; } document.write(r0 + '</tr>' + r1 + '</tr>' + r2 + '</tr>' + r3); function clearSubmenuHT() { for(i in menuSMHT) { document.getElementById('SMHTr0'+i).bgColor = ''; document.getElementById('SMHTr1'+i).bgColor = ''; document.getElementById('SMHTr2'+i).bgColor = ''; } document.getElementById('SMHTr3').bgColor = ''; document.getElementById('SMHTr3').innerHTML = ''; } function showSubmenuHT(m) { color = '#66FF66'; clearSubmenuHT(); document.getElementById('SMHTr0'+m).bgColor = color; document.getElementById('SMHTr1'+m).bgColor = color; document.getElementById('SMHTr2'+m).bgColor = color; document.getElementById('SMHTr3').bgColor = color; t = ''; for(i=1; i<menuSMHT[m].length; i++) { t += '<a href="' + menuSMHT[m][i][1] + '">'; t += menuSMHT[m][i][0] + '</a>&nbsp;'; } document.getElementById('SMHTr3').innerHTML = t; } </script> </table> 11.8. AJAX - Asynchronous JavaScript And XML
Технологията AJAX е съвременен начин за създаване на интерактивни разпределени Web приложения. Този подход преди 2004 г. се е реализирал със скрити фреймове в Web страница (описани през 2002 г. в developer.apple.com и реализирани в практиката например в love.bg през 2003-2004 г.), а след 2005 г. с клас XMLHttpRequest, като популярността й нараства с широкото й използване в Web сайта на Google - Mail и Maps. При класическия модел Web браузърът зарежда цяла Web страница, изчаква действие от потребителя и зарежда друга Web страница. При използване на AJAX, докато една страница е заредена, на заден план (най-често асинхронно) се изпращат заявки, без да се презарежда цялата страница. AJAX е съкращение на Asynchronous JavaScript and XML, но това име не отразява точно същността на технологията: "Asynchronous" - всъщност заявките може да се изпращат и синхронно; "JavaScript" може да се използва и друг език за програмиране, например VBScript за IE; "XML" данните може да се предават и други формати - TXT, HTML, JSON.
WWWW
140
141
WEB ТЕХНОЛОГИИ
Използването на класа XMLHttpRequest е в основата на AJAX. Документът, който го специфицира е XMLHttpRequest W3C Working Draft, 06.12.2012, http://www.w3.org/TR/XMLHttpRequest/ Примерът "If you just want to log a message to the server."100 показва как може без презареждане на Web страницата да се изпрати заявка по метода POST: function log(message) { var client = new XMLHttpRequest(); client.open("POST", "/log"); client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8"); client.send(message); } Създаването на обект от класа XMLHttpRequest става с един подразбиращ се конструктор по следния начин: client = new XMLHttpRequest() ; След създаване на обекта, ако желаем да съхраним отговора от Web сървъра (в предния пример това не се прави), трябва да се присвои на член-променливата .onreadystatechange функция, която да се извиква при промяна на състоянието на HTTPвръзката със сървъра. Функцията може да е и анонимна, т.е. задава се само програмният й код на същия програмен ред. Функцията трябва да проверява съдържанието на член-променливата readyState, която е описана в спецификацията по следния начин: readonly attribute unsigned short readyState; Съдържанието на член-променливата readyState е една от следните константи: const unsigned short UNSENT = 0; const unsigned short OPENED = 1; const unsigned short HEADERS_RECEIVED = 2; const unsigned short LOADING = 3; const unsigned short DONE = 4; Описанието на метода open, в който задължително трябва да се задават метода за изпращане на данните и URL адреса, според спецификацията е следната: void open(DOMString method, DOMString url); void open(DOMString method, DOMString url, boolean async); void open(DOMString method, DOMString url, boolean async, DOMString? user); void open(DOMString method, DOMString url, boolean async, DOMString? user, DOMString? password); Описанието на метода setRequestHeader, който формира заглавната част на HTTP-заявката е следната: 100
http://www.w3.org/TR/XMLHttpRequest/
WWWW
Глава 11. JavaScript и AJAX - Синхронно и асинхронно програмиране на Web
void setRequestHeader(DOMString header, DOMString value); Методът send, изпраща заявката и може и да зададе тяло на HTTP-заявката (използва се при метод POST) void send(); void send(Document data); void send([AllowAny] DOMString? data); С методът abort може да се прекъсне HTTP-връзката: void abort(); Отговорът, който връща Web сървъра на заявката на браузъра записва стойности в няколко член-променливи и могат да се получат отделни части от него чрез различни методи: readonly attribute unsigned short status; readonly attribute DOMString statusText; DOMString getResponseHeader(DOMString header); DOMString getAllResponseHeaders(); readonly attribute DOMString responseText; readonly attribute Document responseXML; Комплексен пример - "Подсказки при въвеждане", илюстриращ работа с AJAX е даден по-долу. Необходими са три файла - Web страница, програма на PHP, и текстов файл с данни. Данните (съдържанието на поле от Web формуляр) се изпращат от браузъра по метода GET. Файл hint.html <form> <input type="text" onkeyup="hint(this.value)" /> </form> <span id="hint"></span> <script type="text/javascript"> function hint(s) { if (s == "") { document.getElementById("hint").innerHTML = ""; /* innerHTML - член-променлива съдържаща текста между отварящия и затварящия HTML таг */ return; } client = new XMLHttpRequest(); client.onreadystatechange = function() { if (client.readyState==4 && client.status==200) document.getElementById("hint").innerHTML = client.responseText; } client.open("GET", "hint.php?q="+s, true); client.send(); } </script> WWWW
142
143
WEB ТЕХНОЛОГИИ
Файл hint.php <?php $a = file('hint.txt'); $q = $_GET['q']; $hint = ''; if(strlen($q) > 0) { for($i=0; $i<count($a); $i++) if( !strncasecmp($a[$i], $q, strlen($q)) ) $hint .= $a[$i] . '<br />'; } echo "<hr />$hint<hr />"; ?> Файл hint.txt Ana Anelia Aneta Angel Asen Atanas При по-долния вариант на примера "Подсказки при въвеждане", данните се изпращат към сървъра по метода POST. Файл hint.html по метод POST <input type="text" onkeyup="hint(this.value)" /> <span id="hint"></span> <script> function hint(s) { if (s == "") { document.getElementById("hint").innerHTML = ""; return; } client = new XMLHttpRequest(); client.onreadystatechange = function() { if (client.readyState==4 && client.status==200) document.getElementById("hint").innerHTML = client.responseText; } client.open("POST", "hint.php", true); client.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); client.send("q="+s); } </script> Файл hint.php по метод POST <?php $a = file('hint.txt'); $q = $_POST['q']; $hint = ''; if(strlen($q) > 0) { for($i=0; $i<count($a); $i++) WWWW
144
if( !strncasecmp($a[$i], $q, strlen($q)) ) $hint .= $a[$i] . '<br />'; } echo "<hr />$hint<hr />"; ?> При създаване на програми на JavaScript трябва да се има в предвид, че различните браузъри поддържат различно множество от версии на HTML, CSS, JavaScript и DOM, което затруднява съвместимостта, т.е. една Web страница да изглежда и да се държи по един и същ начин при разглеждане с различни браузъри. За решаване на тези проблеми през последните години се използват JavaScript фреймуорк/библиотеки, които включват множество от средства и функции, които улесняват: създаването на съвместим с множество браузъри код; писането на код, който обхожда, търси, променя, добавя и премахва DOM елементи (таговете), както и тяхното съдържание; промяна на CSS стилове; прихващането на събития - натискане на клавиши, маркиране на обекти и т.н.; поддръжка на Ajax и др. Контролни въпроси 1. Кои са основните възможности на JavaScript? 2. Кои са основните особености на AJAX? 3. Какво е DOM?
РАЗДЕЛ ТРЕТИ. ПРОГРАМНИ ПЛАТФОРМИ ЗА ЕФЕКТИВНО СЪЗДАВАНЕ И ПОДДЪРЖАНЕ НА WEB САЙТОВЕ Глава 12. Joomla платформа за изграждане на Web сайтове. 12.1. Въведение в Joomla WWWW
145
WEB ТЕХНОЛОГИИ
Joomla е Web сървърно приложение от тип система за управление на съдържанието (CMS, Content Management System). Този тип системи дават възможност за създаване на динамични Web сайтове, в които лесно се публикува, добавя, редактира и изтрива съдържание - текст, снимки и мултимедийна информация. Много Web сайтове използват подобни приложения, тъй като те не изискват задълбочени познания по HTML, CSS, JavaScript, бази от данни, сървърно програмиране и т.н. В повечето случаи системите имат административни модули с опростен интерфейс, с който се работи сравнително лесно, който дава възможност да се избере коя страница от Web сайта да бъде редактирана и с визуален текстов редактор да се направят съответните промени, както на съдържанието, така и на неговото оформление. Всички последващи дейности по генерирането на Web страницате на Web сайта са автоматизирани, включително поставянето на навигационни менюта или вмъкването на друго съдържание. Голяма част от системите за управление на съдържанието имат допълнителни модули, които разширяват възможностите на Web сайта с форум, социална мрежа, онлайн магазин и прочие. Възможно е също така и интеграция с други системи, които да използват системата за управление на съдържанието като своя подсистема. В последните години като една от най-популярните системи за управление на съдържанието се е наложила системата Joomla, която се разпространява като свободен софтуер под общия публичен лиценз GNU. За модулите, които разширяват възможностите на системата, лицензът може да е друг и при някой от тях може да се иска заплащане. В исторически план Joomla е създадена през 2005 г. като разклонение на друга система за управление на съдържанието - Mambo. Името Joomla произлиза от дума на африканския език суахили и означава "всички заедно". Както повечето програмни продукти и при Joomla постоянно излизат нови версии. Стратегията за развитието на версиите включва версии с краткосрочна поддръжка (STS, short term support) за период от 7 месеца, до следващото излизане на нова версия и дългосрочна поддръжка (LTS, long term support) за период от 27 месеца, след който следва съществено подобрена и променена версия. Преминаването от една версия към по-горната се извършва лесно - обикновено с едно натискане на бутон, но ако има инсталирани модули, които не са съвместими с новата версия, процеса се усложнява. Версиите с дългосрочна поддръжка са 1.5 (), 2.5 (до IX.2013) и 3.5 (IX.2013 - III.2015)101. 12.2. Инсталиране и конфигуриране на Joomla
Инсталирането и конфигурирането на Joomla протича в няколко стъпки: От официалния сайт се сваля като архивен файл последната най-нова версия на системата за управление на съдържанието Joomla: (http://www.joomla.org/download.html). Системните изисквания ги има на същия сайт. 1.
101
Release and support cycle, http://docs.joomla.org/Release_and_support_cycle
WWWW
Глава 12. Joomla платформа за изграждане на Web сайтове.
Фиг.12.1 Екран за обща конфигурация на английски език
2. Изтегления файл се разархивира и цялото му съдържание се поставя в нова публично достъпна директория, обслужвана от Web сървъра (най-често поддиректория на htdocs - при собствена инсталация на Web сървър Apache или public_html - при споделен хостинг). 3. Създава се нова база от данни и потребител, който да има съответни права върху нея. Ако се ползва споделен хостинг е възможно да не можем самостоятелно да осъществим тези действия. 4. Чрез браузър се зарежда URL адреса на директорията, в която е Joomla. Показва се модула за инсталиране и конфигуриране (Фиг.12.1). 5. Избира се език на инсталацията, въвеждат се име за сайта, описание, имейл адрес и потребителско име на администратора, парола (Фиг.12.2).
WWWW
146
147
WEB ТЕХНОЛОГИИ
Фиг.12.2 Екран за обща конфигурация на български език
6. Въвеждат се данните за връзка с базата от данни - потребителско име и парола, име на БД. Ако сървърът на БД е на същия хост, където работи и Web сървъра, в полето за име на хоста (hostname) трябва да остане "localhost", в противен случай се задава IP адреса или името на хоста, където работи сървърът на БД. Ако се ползва споделен хостинг е възможно тези данни предварително да са ни зададени. При успешна връзка със сървъра в БД се създават съответните таблици и инсталацията продължава (Фиг.12.3).
WWWW
Глава 12. Joomla платформа за изграждане на Web сайтове.
Фиг.12.3 Екран за настройки за връзка със СУБД. 7. Избира се дали да има създадено някакво примерно съдържание на Web сайта - блог или фирмен сайт (Фиг.12.4).
Фиг.12.4 Екран за преглед на настройките
8. Изтрива се или ръчно се преименува инсталационната директория "installation". Може да се инсталират и допълнителни езици, освен английския за интерфейса на системата (Фиг.12.5). WWWW
148
149
WEB ТЕХНОЛОГИИ
Фиг.12.5 Екран за край на инсталацията. 9. Зарежда се главната страница на Web сайта или административния контролен панел. Различни варианти на външния вид и примерни данни са дадени на фигури 12.6 и 12.7.
Фиг.12.6 Макетен (празен) сайт.
WWWW
Глава 12. Joomla платформа за изграждане на Web сайтове.
Фиг.12.7 Вариант на сайт с примерни данни.
12.3. Основни администраторски задачи. Работа с контролния панел.
Контролният панел се намира в поддиректория "administrator" в пътя на URL адреса. Въвеждат се потребителското име и паролата, въведени при инсталирането. Основната страница на контролния панел представлява табло, което дава възможност за бърз достъп до всички администраторски задачи на системата. Връщането в това табло става при избиране на иконата на Joomla в горния ляв ъгъл (Фиг.12.8).
WWWW
150
151
WEB ТЕХНОЛОГИИ
Фиг.12.8. Основно табло на контролния панел.
Категории и статии В повечето случаи основното съдържанието на един Web сайт представлява отделни Web страница, във всяка от които има разположена една статия. Статията е основна логическа структурна единица на цялото съдържание на Web сайта, в която се разполага текстова, графична и мултимедийна информация. Тя има и други характеристики като заглавие, автор, дата на публикуване и др. Няколко статии по сходна тематика могат да се групират в категория. Образно можем да си представим, че категорията съответства на една папка, а статията на един лист в тази папка. Всяка статия може да принадлежи само на една категория. Категорията от своя страна може да съдържа други категории, като по този начин се реализира йерархична структура от много нива. Съществува служебна категория "Uncategorised", която се използва за статиите, които нямат категория. За малки сайтове е оправдано статиите да нямат категория, но това се счита за лоша практика за големи сайтове. От меню "Статии" ( фиг. 12.9) се работи със статии и категории. При добавяне на нова статия има възможност за задаване на много настройки свързани с публикуване, права за достъп, метаданни и прочие. Добавянето на категории е аналогично, но възможностите за настройки са по-малко. Подменю "Медия" зарежда файлов мениджър, който дава възможност за създаване на директории, качване и изтриване на файлове, най-често съдържащи мултимедийна информация. От тук се качват файлове, които впоследствие се включват в статии или се използват за системни цели - модули, шаблони, добавки и т.н. За разлика от мултимедийните файлове, които се съхраняват като файлове за директен достъп във файловата система, съдържанието на статиите се съхраняват в базата от данни.
WWWW
Глава 12. Joomla платформа за изграждане на Web сайтове.
Подменю "Избрани статии" дава възможност за работа с определени препоръчвани за четене статии, които да се показват на главната страница или на други места. Навигационно меню Меню "Менюта" дава възможност за работа с навигационни менюта. Една статия, за да бъде достъпна, към нея трябва да има поне една хипервръзка. Най-често връзките към статии се реализират чрез меню, в което се групират близки по тематика статии. Настройките за менютата се извършват отделно от тези на статиите и е възможно една статия да бъде включена в различни менюта.
Фиг.12.9. Добавяне на нова статия.
При създаване на ново меню, задължително се задават: "Вид на менюто" - към какъв ресурс ще сочи връзката (например връзка към статия или връзка към друг сайт); "Заглавие на менюто" - текста, който ще се вижда; "Меню" - на кое от главните менюта принадлежи тази връзка.
WWWW
152
153
WEB ТЕХНОЛОГИИ
Фиг.12.10. Създаване на нова връзка в меню. Допълнително могат да се зададат: "Име в адрес" - URL адрес на статията, който да улеснява търсещите машини при индексацията; "Достъп" - коя група потребители да могат да вижда връзката; "Целеви прозорец" - в кой прозорец да се отваря връзката - в същия или в нов прозорец, с и без навигация; и др. Потребителски групи и потребители От меню "Потребители" се администрират потребителите, потребителските групи и нивата на достъп. Обикновено един потребител принадлежи на една и няколко потребителски групи, които имат определени права по отношение на това до каква част от сайта имат достъп (например кои статии могат да виждат) и какви действия могат да извършват с него (например да го редактират или изтриват). По подразбиране са зададени следните групи потребители: Public, Guest, Manager - Administrator, Registered - Author - Editor - Publisher, Super Users. Самите права, които да имат тези групи потребители се задават Система/Настройки/Права. Могат да се създават неограничено допълнителни групи, както и да се прибавят потребители. Приложения Системата Joomla е изградена на модулен принцип, при което отделни компоненти, отговарящи за съдържание, външен вид и функционалност работят относително независимо и могат лесно да се променят, добавят, изтриват, активират или деактивират, без това да нарушава функционирането на Web сайта. От меню "Приложения" се управляват тези компоненти, които са: Модули - визуални компоненти, които се разполагат на определени места в страниците на Web сайта. Например меню, формата за вход, последни новини, потребители и др. Минимално необходимия модул е менюто. Добавки - компоненти, които добавят нова функционалност към един сайт. Например антиспам защита, търсене, рейтинг на статиите и др. Шаблони - компоненти, които задават външния вид на сайта - цвят, икони, шрифт чрез множество файлове с HTML и CSS код. WWWW
Глава 12. Joomla платформа за изграждане на Web сайтове.
Езици - компоненти, които задават езика на системните съобщения и надписи, както за потребителската, така и за административната част. Инсталирането на нови приложения не е сложен процес и най-често се реализира чрез качване на предварително свален архивен файл или чрез задаване на URL адрес, от който да се свали архивен файл, който после да се инсталира автоматично. След инсталацията, в менютата на административния панел се появяват нови опции, чрез които се извършват настройките. Други компоненти Освен меню и статии, страниците на сайта могат да съдържат и друга информация, като например банери, съобщения, външни новини, полезни връзки и др. От меню "Компоненти" се извършва управлението на тези допълнения, които насищат една Web страница и тя става по-информативна.
12.4. Примери за административна работа
Поставяне на съдържание на главната страница Първоначално сайта е празен. Нека да поставим съдържание на главната страница. На главната страница се разполагат статии от категория "Избрани статии". 1. Избираме от менюто Статии/"Избрани статии", бутон Добавяне и въвеждаме заглавие и съдържание. Избираме бутон "Запис§Затваряне". Следващата важна стъпка е да маркираме статията като "Избрана статия" чрез бутона със звездичка. 2. Настройваме каква допълнителна информация да се извежда заедно със статията. Избираме от менюто Менюта/"Main menu", от списъка избираме Home, после от хоризонталния таб избираме "Разширени настройки". От акордеонния вертикален таб избираме "Настройки на статията". От там задаваме каква информация да се показва. Избираме бутон "Запис§Затваряне". В резултат сайтът вече има съдържание на главната страница. Добавяне статия и елемент към навигационното меню Първоначално менюто има само един елемент. Нека да добавим връзка "За нас", която да води към статия, в която има информация за създателя или собственика на сайта. 1. Избираме от менюто Статии/Статии/"Нова статия" и въвеждаме заглавие "За нас" и съдържание. Избираме бутон "Запис§Затваряне". 2. Добавяме елемент към навигационното меню, който да зарежда статията. Избираме от менюто Меню/"Main Menu"/"Нов запис в меню". На полето "Вид на менюто" натискаме бутона "Изберете" и от акордеонния вертикален таб избираме Статии/Единична статия. От полето "Изберете статия" избираме статията с име "За нас". В полето "Заглавие на менюто" въвеждаме какво да пише в менюто, тъй като заглавието на статията и текста на връзката в менюто може да са различни. В случая WWWW
154
155
WEB ТЕХНОЛОГИИ
въвеждаме отново "За нас". От хоризонталния таб от "Разширени настройки" можем да укажем каква допълнителна информация да се извежда, както в предходния пример. Накрая избираме бутон "Запис§Затваряне". В повечето случаи допълнителната информация за това кой, кога е написал статията и колко пъти е била прегледана е излишна за целите на сайта и в такива случаи може да се изключи глобално за всички статии като се избере от менюто Система/Настройки и от списъка с компоненти се избере "Статии". Добавяне на подменю Нека да добавим в менюто нов елемент "Контакти", който да има подменю от което да се избира град, в който имаме офиси. 1. Създаваме нова категория. Избираме от менюто Статии/Категории/"Нова категория". Задаваме за заглавие "Контакти". Избираме бутон "Запис§Затваряне". 2. Създаваме две нови статии със заглавия Варна и Бургас, и задължително на полето Категория задаваме, че са от "Контакти", Въвеждаме подходящо съдържание. 3. Създаваме нов елемент в менюто с име "Контакти". Избираме Менюта, на полето "Вид на менюто" задаваме Статии/"Блог категория", на полето "Изберете категория" задаваме Контакти, на полето "Заглавие на менюто" задаваме Контакти. Избираме бутон "Запис§Нов". 4. Създаваме нов елемент в менюто с име "Контакти". Избираме от менюто Меню/"Main Menu"/"Нов запис в меню". На полето "Вид на менюто" задаваме Статии/"Блог категория" - това ще осигури зареждане на всички статии от категорията, в случай, че потребителя избере тази връзка, а не някоя от подменюто. На полето "Изберете категория" задаваме Контакти, на полето "Заглавие на менюто" задаваме Контакти. Избираме бутон "Запис§Нов". 5. Създаваме нов елемент като подменю менюто" задаваме Статии/"Единична статия", на Варна, на полето "Заглавие на менюто" задаваме запис" от падащия списък задаваме Контакти Избираме бутон "Запис§Нов".
в "Контакти". На полето "Вид на полето "Изберете статия" задаваме "Офис Варна". На полето "Основен така този елемент става подменю.
6. Повтаряме предходните действия и за статията за офиса в Бургас. Промяна на позицията на менюто и превръщането му в хоризонтално меню 1. Избираме от менюто Приложения/Модули. От списъка избираме "Main Menu". От таба Данни, на полето Позиция задаваме position-1 (Protostar/Навигация [position-1]). Различните стойности задават къде да се показва менюто. 2. От таба "Настройки", акордеонно вертикално меню "Базови опции", на поле "Показвай под-менютата" задаваме Да. 3. От акордеонно вертикално меню "Разширени опции", на поле "Суфикс на класа на менюто" задаваме " nav-pills" или " nav-tabs". Важно е текста да се изпише точно и с един празен интервал отпред. Избираме бутон "Запис-Затваряне". 12.5. Промяна на външния вид на сайта чрез инсталиране на нов шаблон WWWW
Глава 12. Joomla платформа за изграждане на Web сайтове.
1. Търсене и сваляне на нов шаблон. Трябва да се инсталират само шаблони, които са съвместими с използваната версия на Joomla. Всичко необходимо за инсталацията е в ".zip" файл и само той трябва да се свали и качи за инсталиране. Joomla 3 по подразбиране е с шаблон Protostar. Съществуват множество сайтове, които предлагат професионално разработени шаблони срещу заплащане, като например joomlart.com, rockettheme.com, joomshaper.com, siteground.com и др. Същите производители на шаблони предлагат и безплатни шаблони. На много места освен изтегляне на шаблона, се предлага и изтегляне на "QuickStart" пакет, който представлява цял Joomla сайт, който е точно като демонстрирания на сайта на производителя, заедно с примерните данни, съответните настройки и допълнения. При използване на такъв "QuickStart" пакет отново се минава през етап инсталиране и конфигуриране, т.е. файлът не се качва в Joomla. 2. Избираме да инсталираме шаблона Helix-II. От http://www.joomshaper.com/joomla-templates/helix-ii, от бутона Download, избираме "Bundle installer for joomla 2.5 and 3.0" и сваляме файла: shaper_helix_ii_bundle_j25_j3.zip. 3. От менюто Приложения/Приложения от таба "Качване на пакет" качваме файла. Той автоматично се разархивира и инсталира. 4. От вертикалното меню вляво избираме Управление, и активираме всички модули, свързани с Helix. Допълнително можем да ги обновяваме до последна версия от бутона Обнови. 5. От менюто Приложения/Шаблони, от списъка избираме shaper_helix_ii да стане шаблон за сайта. По подобен начин могат да се инсталират и други шаблони и периодично да се сменя дизайна на сайта. 12.6. Инсталиране на добавки
Добавките разширяват функционалните възможности на сайта. Една от популярните добавки е K2, която превръща един сайт на Joomla в пълнофункционалнен блог, като добавя възможности под статиите да се пишат коментари, налични са бутони за споделяне в социални мрежи - twiter, facebook, google+; задаване на рейтинг на статията; вмъкване на клипчета; галерии; тагове; агрегиране на съдържание от други сайтове и др. 1. От сайта на K2 - http://getk2.org/ копираме в клипборда адреса на файла за сваляне (в случая http://getk2.googlecode.com/files/K2_v2.6.6.zip). От менюто Приложения/Приложения, избираме от хоризонталния таб "Инсталиране от URL" и в полето "URL за инсталиране" вмъкваме адреса, който е в клипборда, избираме бутон "Инсталиране". Този вариант за инсталиране е много удобен, но е приложим само ако разполагаме с бърза връзка и мощен компютър, защото свалянето и инсталацията трябва да завърши за определено време, в противен случай се генерира грешка. Ако този вариант на инсталиране не е подходящ за нас, то може да се приложат WWWW
156
157
WEB ТЕХНОЛОГИИ
процедурите от предния пример, т.е. в няколко стъпки - сваляне на файла на локалния компютър, качване в Joomla и инсталиране. 2. След инсталиране на K2, нови статии и категории трябва да се добавят чрез неговото ново подменю, което е добавено в меню Компоненти или от главната страница на контролния панел. Тук не се допуска статиите да нямат категория, така че първоначално трябва да се създадат няколко категории, а след това статиите. При инсталиране на добавки е възможно да няма превод на български език на новите текстове, които се появяват в сайта и да се наложат допълнителни действия, за да се приведе дизайна в желаното състояние.
Фиг.12.11. Промяна на външния вид на сайта чрез нов шаблон. Някой много популярни добавки като например VirtueMart за направата на електронен магазин е възможно да нямат подходящи версии, които да работят с найновата версия на Joomla. В такъв случай се налага да се използва тази версия, която се поддържа от добавката, което не е много удобно в дългосрочен план, тъй като тя може вече да не се поддържа или поддръжката да изтече в близко време и да се наложи обновяване. На следващите фигури (12.11 и 12.12) са посочени някои от основните Joomla-екрани за поддръжка.
Фиг.12.12. Промяна на външния вид на сайта чрез нов шаблон - 2. WWWW
Глава 13. Adobe платформи за изграждане на Web сайтове.
Контролни въпроси 1. Кои са основните предимства на Joomla при изграждане на CMS? 2. Как могат да се инталират добавки в Joomla? 3. Как можем да предотвратим спама при регистрация на нов потребител?
Глава 13. Adobe платформи за изграждане на Web сайтове. 13.1. Въведение в програмните продукти на Adobe CS
С придобиването на компанията Macromedia на 18 април 2005 г. фирмата Adobe се превърна в лидер на Web-базираните приложения и на дигиталния печат. Обединяването на двете фирми доведе до изграждането на комплекти от програмно осигуряване за графически дизайн, редактиране на видео файлове, на звукови файлове, на Web приложения и публикуване на дигитални издания, наречени Creative Suite (последната известна версия е Adobe CS6). Adobe CS6 се предлага в следните разновидности:
Adobe Creative Suite 6 Master Collection – пълен комплет от програмно осигуряване, обхващат цялото множество от възможности; Adobe Creative Suite 6 Production Premium - комплет от програмно осигуряване, насочен към онлайн видео продуциране; Adobe Creative Suite 6 Design & Web Premium - комплет от програмно осигуряване, насочен към дизайн и Web приложения; Adobe Creative Suite 6 Design & Web Premium - комплет от програмно осигуряване, насочен към графически дизайн.
Фиг. 13.1. Емблеми на продукти в Adobe Creative Suite 6
WWWW
158
159
WEB ТЕХНОЛОГИИ
Според официална информация на Adobe от 6 Май 2013 г. 102 , фирмата прекратява поддържането на нови версии на CS и преминава към месечно абонаментно обслужване на Adobe Creative Cloud. Creative Cloud осигурява онлайн достъп до целия комплект от програмни продукти на Adobe срещу сумата от 50 долара на месец (при заплащане на цялата годишна такса в САЩ). Абонаментът включва и услуги като споделяне на файлове, кооперирана обработка на информацията и публикуване на сайтове (file sharing, collaborating, Web publishing). 13.2. Платформа Adobe Dreamweaver
Dreamweaver (както и съвременната версия – Dreamweaver CC или Creative Cloud) е интегрирана платформа за web дизайнери и web разработчици за изграждане на web сайтове и мобилни приложения чрез HTML, CSS и JavaScript. Някои от основните предимства на платформата са следните:
Пълнo осигуряване на новия стандарт HTML5, включително аудио- и видеострийминг. Fluid Grid Layout – Изграждане на гъвкава структура на дадена Web страница, изобразявана на устройства с различни размери на екрана като персонални компютри, мобилни телефони и таблети. Интуитивно визуално проектиране на страниците чрез използване на CSS3. Разработване на динамични Web страници като в процеса на програмиране се откриват и оцветяват ключови думи и проверява синтаксиса; позволява интеграцията на CMS-системите Joomla и WordPress. Поддържане на jQuery и jQuery Mobile като по този начин разработчиците изградат приложения (Apps) за iOS и Android (вж гл. 14). PhoneGap Build – поддържа възможността за конвертиране на всяка Web страница към изискванията на мобилните устройства; тестване на тези страници чрез мобилни емулатори преди тяхното публикуване. Интериране на DW-приложенията с тези на другите продукти от CS/CC. По-подробна информация за Dreamweaver CC можете да намерите на адрес: http://www.adobe.com/bg/products/dreamweaver/features.html Създаване на нов HTML файл в Dreamweaver Нов HTML файл може да се създаде във всеки един текстов редактов. Логичният въпрос, който можете да си зададе, е „Защо тогава трябва да използваме Dreamweaver?” Пълният отговор изисква подробно обяснение (в някои ръководства за работа с Dreamweaver отговорът заема цели 13 глави 103 ). Ние ще започнем с кратка демонстрация на възможностите на Dreamweaver (DW). Създаване на нов файл от „празна“ страница 1. Стартирайте Dreamweaver. 2. Изпълнете команди File > New. 3. В прозореца „New Document“ изберете от първата колона „Blank Page“. 102 103
Официално изявление, цитарно в http://cnet.co/18pRMWf Adobe Dreamweaver CS6. Classroom in a Book.
WWWW
Глава 13. Adobe платформи за изграждане на Web сайтове.
4. От колоната „Page Type“ изберете HTML и <none> от колоната „Layout“. Кликнете на бутона „Create“. Dreamweaver отваря нов прозорец за работа с HTML документ. Новият прозорец може да изобразява информацията в един от трите режима: Code – показва съдържанието като преграмен код; Design – визуализира графически създаваната страница; или Split - разделя екрана и показва съдържанието както в програмен код, така и като дизайн. 5. Преминаването от един в друг режим на визуализиране се извършва чрез кликване на съответния таб от горния ляв ъгъл на екрана; например, чрез кликване на Code ще изберем режима на изобразяване на програмния текст в документа. Една от причините да използваме Dreamweaver се състои в това, че платформата е „приятелски“ ориентирана. Дори когато мислим, че започваме от празна страница, Dreamweaver ни осигурява основната структура и основните тагове в документа - root, head, body и title (вж фиг. 13.2). Вие добавяте останалото съдържание в документа.
Фиг. 13.2. Начален екран за създаване на HTML файл в DW 6. Кликнете с курсора след отварящия таг <body> и напишете „Добре дошли в моята Web страница“ след тага. DW трбва да форматира този ред като първи заглавен ред (heading 1, h1). 7. Преместете курсора пред началото на такста „Добре дошли в моята Web страница“ и въведете знака „<“ (начало на таг) за да формирате <h1> заглавен елемент. Забележете как Dreamweaver автоматично отваря изкачащо меню-списък (dropdown list) от съответни кодиращи елементи. Това е една от функциите на Dreamweaver WWWW
160
161
WEB ТЕХНОЛОГИИ
за автоматично намиране на ключови думи (вж фиг. 13. 3.). Подобна техника е приложема при програмиране на HTML, CSS и JavaScript. 8. Въведете „h“ и претърсете изказащото меню (Code hint window).
Фиг. 13.3. Система за контекстно намиране на ключови думи в DW Dreamweaver филтрира въведения от вас символ и показва всички елементи, които започват с „h“. 9. Кликнете два пъти на „h1“ за да го въведете; затворете тага с „>“. 10. Преместете курсора в края на текста. Напишете </ в края на изречението. Въведете следващото съдържание в документа по следния начин: 11. Задръжте Shift и натиснете клавиша Return за да преминете на нов ред (line break). Въведете знака „<“. 12. Напишете „p“ и натиснте клавишите Enter/Return за да вмъкнете нов елемент – параграф (paragraph element). Въведете знака „>“ за да затворите тага. 13. Напишете: „Създаването на страница в Dreamweaver е много лесно!“ След това се въвежда „</“ за да затворите елемента <p>. Ако сте се отегчили от въвеждането на кода, нека да ви подскажем, че Dreamweaver предлага множество сценарии за форматиране на съдържанието в документа. 14. Изберете думите “Добре дошли”. В командния прозорец на Property inspector кликнете на бутона „B“ и след това на бутона „I“. Така сте приложили форматните елементи <strong> и <em> - удебелен и наклонен текст на двете думи: “Добре дошли”. Създаване на HTML файл по макет (template)
WWWW
Глава 13. Adobe платформи за изграждане на Web сайтове.
Dreamweaver разполага със средства за бързо прототипиране на даден Web сайт. Платформата ви предоставя възможност да изградите ваш сайт като изберете макетирани страници (templates). Изпълнете следния сценарий:
Стартирайте Dreamweaver. От средната колона на началния прозорец кликнете на бутона “More…”. Появява се нов прозерец; кликнете на „Blank Page“ от първата колона вляво. От втората колона изберете с кликване „HTML Template“ – изграждане на сайт от макет (фиг. 13.4).
Фиг. 13.4. Създаване на HTML документ от макет
В третата колона са зададените различните варианти за избор на дизайн на дадена Web страница. В примера избираме страница, съставена от три фиксирани колони, заглавна зона (header), долна зона (footer) и работа с HTML5 (фиг. 13.4). Кликнете на бутона „Create“ и стартирайте работата с челната страница на новия Web сайт.
WWWW
162
163
WEB ТЕХНОЛОГИИ
Фиг. 13.5. Работна площ при създаване наHTML документ от макет Преди да съхраните създаваните документи е необходимо да укажете кои области от документа ще бъдат редактируеми, т.е. в кои ще се извърват промени, различни от предварително зададените в макета. За целта изпълнете следния сценарий:
Позиционирайте курсора в областта, която сте определили като редактируема (на фиг. 13.6. е указана редактируема област 3). Кликнете на команда Insert. От изкачащото меню кликнете на Template Objects. От новото изказащо меню изберете Editable Region (или чрез „горещи“ клавиши - Ctrl+Alt+V). Сега можете да съхраните документа като кликнете на File-Save as и зададете име на документа.
WWWW
Глава 13. Adobe платформи за изграждане на Web сайтове.
Фиг. 13.6. Генериране на област за редактиране в макетиран документ Работата в режим HTML Template позволява да се съкрати времето за изграждане на Web сайтове като разработчиците се концентрират върху въвеждането на конкретно динамично съдържание в даден HTML документ. На фиг. 13.7. е представен общия вид на генерирания сайт от макет.
Фиг. 13.7. Генериран сайт по макет (Template) Друга, не по-малко важна възможност за ефективно изграждане на сайтове чрез Dreamweaver, е прилагането на технологията Spry. Чрез тази технология в тялото на документа се включват често използвани елементи (Widgets). Програмният код включва HTML, CSS и AJAX, както и необходимите графически елементи. Някои от най-често използваните Widgets-елементи са следните: - програмни елементи за обработка на данни в реално време; - програмни елементи за изграждане на хоризонтално или вертикално меню; - програмни елементи тип „Акордеон“ – изкачащи списъци и подсписъци; - програмни елементи за проверка валидността на дадена парола и др. Изграждане на менюта Spry Menu Bar в Dreamweaver За вграждане на Spry Menu Bar в съществуващ документ изпълняваме следния сценарий:
Съхраняваме документа, с който текущо работим – File-Save. Позиционираме курсора в мястото, къдете желаем да се появи менюто. Избираме команда Insert. От изкачащото меню избираме Spry. При избора на Spry изкача ново меню, от което избираме Spry Menu Bar .
WWWW
164
165
WEB ТЕХНОЛОГИИ
Фиг. 13.8. Избор на функция „Бързо изграждане на меню (Spry Menu Bar)
Появява се прозорец, от който трябва да изберем какъв вид меню желаем: хоризонтално или вертикално. Чрез кликване в радио-бутона избираме „Хоризонтално”.
Фиг. 13.9. Избор на хоризонтално Spry Menu
Генерира се програмният код за изграждане на хоризонтално меню (фиг. 13.10). В долния край на прозореца „Свойства“ (Properties) са изобразени елементите на менюто. Тук можете да добавяте (чрез кликване на знака „+“) или премахвате (чрез кликване на знака „-“) йерархически елементи в менюто.
WWWW
Глава 13. Adobe платформи за изграждане на Web сайтове.
Фиг. 13.10. Генериран програмен код на Spry Menu
Чрез промени в CSS-стиловете на Spry Menu Bar можете да промените цветовата гама на менюто и под-менютата, вида и размера на шрифта, неговото оцветяване и др.
На фиг. 13.11. е показан резултатът от вмъкването на стандартно Spry Menu Bar в тялото на документа. Изобразен е избор на трето ниво – Item 3.- Item 3.1- Item 3.1.1.
Фиг. 13.11. Изобразаване на Spry Menu в браузъра
13.3. Платформа Adobe Muse
Adobe Muse ни позволява да изградим, редактираме и публикуваме динамичен Web сайт, съдържащ богато Интернет съдържание, без да програмираме. Нашите усилия са насочени към графическото оформление на съдържанието в страниците, изграждане на интерактивност като фотогалерии, географски карти с линкове към населени места, поддържане на бази от данни чрез Web форми за въвеждане на потребителски данни, включване на много готови елементи (widgets) като календари, видео и музика, бутони за връзка със социлани мрежи и мн.др. WWWW
166
167
WEB ТЕХНОЛОГИИ
След стартитане на програмата се отваря прозорец с две възможности – създаване на нов сайт или работа със съществуващ сайт (фиг.13.12.).
Фиг.13.12. Стартиране на Adobe Muse Режими на работа на Adobe Muse Adobe Muse 104 работи в три режима: Plan modе или режим на работа по подразбиране; Design mode – режим на работа проектиране и графическо оформление на сайта; Режим на работа Plan modе Когато отворите даден файл (.muse site file), Muse работи по подразбиране в Plan mode. Думата Plan в горния ляв ъгъл на екрана е маркирана в синьо. Plan mode показва текущата структура на вашия сайт (site map).
104
По-подробна информация за работа с продукта бихте могли да намерите в книгата Adobe Muse Clаssroom in а book.
WWWW
Глава 13. Adobe платформи за изграждане на Web сайтове.
Фиг. 13.13. Режим на работа Plan mode (site map) на Adobe Muse
Режим на работа Design mode Когато кликнете на Design mode в горния ляв ъгъл на екрана, системата преминава в режим на изобразяване на първата Web страница на вашия сайт. Design mode е режимът, при който изграждате структурата и графическото изибразяване на дадена Web страница.
Фиг. 13.14. Режим на работа Design mode на Adobe Muse
Режим на работа Preview mode В режим на работа Preview mode имате възможност да видите как създаваната от вас Web страница ще се изобразява в даден браузър. Можете да тествате както дадената страница, така и изграждания сайт, изпълнявайки ролята на потребител. Панел за управление на Adobe Muse (Control panel) Панелът за управление (Control panel) осигурява бърз достъп до различните фукции при работа с Muse. По подразбиране, Muse извежда панела хоризонтално в горната част на работния прозорец. В лявата част на първия хоризонтален ред на панела са изписани последователно трите основни режима на работа на Muse: Plan, Design и Preview.
Фиг. 13.15. Панел за управление на Adobe Muse WWWW
168
169
WEB ТЕХНОЛОГИИ
Изграждане на нов сайт При изграждане на нов сайт се появява панела, показан на фиг. 13.16. чрез който определяме:
Фиг. 13.16. Панел за изграждане на нов сайт чрез Adobe Muse
- размера на Web страницата (в примера – 960 ширина и 800 пиксела минимална височина), която ще се изобразява центрирано и ще се включва основното съдържание (content); - дизайн на страницата – разделена на три колони с ширина 270 пиксела и разстояние между колоните 20 пиксела; - оразмеряване на полетата (margin - горно и долно, ляво и дясно, в пиксели); - пространство между основното съдържание и рамката на документа (padding горно и долно, ляво; забележете, че когато сте центрирали страницата, параметърът left padding не е допустим).
Фиг. 13.17. Визуално представяне на основните параметри при изграждане на нов сайт чрез Adobe Muse След извършените настройки на посочените параметри, системата отваря нов сайт в режим на работа Plan mode. Кликнете на команда File-Save Site as и задайте WWWW
Глава 13. Adobe платформи за изграждане на Web сайтове.
наименование на сайта от вида my_new_site.muse. Сега можете да преминете към генериране структурата на сайта, т.е. колко Web странци и в каква йерархиеска последователност образуват вашия нов сайт (site map). Структурата на сайта е свързана и с менюто за неговото управление, както е показано на приложения пример:
Структура на сайта
Автоматично генерираното меню на сайта
Категории Web страници в Muse сайт Adobe Muse осигурява две категории Web странци – главни страници (Master Pages) и базисни страници. Master Pages страниците са разположени в долната част на екрана при режим на работа Plan mode, Master Page Tab. Всяко създаване на нов сайт започва с изграждане на нова Master Pages страница. В следния пример са създадени три Master Pages страници. Нова Master Pages страница се създава при изпълнение на следния сценарий:
Изберете режим на работа Plan mode; В този режим изберете команда Page – Add New Master Page; Muse създава нова Master Page страница; Наименовайте новата Master Page страница; Кликнете два пъти върху умаленото изображение на новата Master Page страница и преминете в режим на работа Design mode ; Редактирайте и съхранете промените чрез File – Save.
Тази категория страници изпълнява ролята на моделни страници (templates), които многократно се използват при генериране на нови базисни страници. Генерирането на нова страница се постига чрез клилване на знака „плюс“ (+) в десния край на умаленото изображение на дадена страница.
Фиг. 13.18. Категория Web странци Master Pages
WWWW
170
171
WEB ТЕХНОЛОГИИ
В процесът на редактиране и съхраняване със зададено от вас наименование, дадена главна страница (Master Page) се конвертира в базисна страница и изгражда йерархията от страници в даден сайт. Една от основните технологии в Adobe Muse е включване и редактиране на меню в дадена страница (menu bar, menu widget). Всеки път, когато добавяте страница от първо ниво (top level page), в менюто се вклюва нов елемент. Adobe Muse позволява да се редактират основните меню параметри, както е показано на следната фигура: • Menu Type: All Pages – включване на всички генерирани страници в менюто; • Direction: Horizontal (по подразбиране) – хоризонтално извеждане на менюто; • Edit Together: Selected (по подразбиране) – едновременно редактиране на всички елементи в менюто; • Item Size: Uniform Width – уеднаквена ширина на елементите в менюто; • Show Left Icon: Deselected (по подразбиране) – изобразяване на икона в лявата част на елементите в менюто (изключено); • Show Label: Selected (по подразбиране) – показване на текстовото описание в елементите на менюто; • Show Right Icon: Off - изобразяване на икона в дясната част на елементите в менюто; • Parts Positioning: Horizontally; Center-Aligned (по подразбиране) позициониране на елементите на подменюто - хоризонтално, центрирано.
–
Фиг. 13.19. Параметри на меню в дадена Web страница Реактирането на менюто се извършва в режим на работа Design mode на Master Page страницата. Чрез Adobe Muse можете бързо и лесно да създадете сайт за мобилни приложения. Следвайте урока на адрес http://bit.ly/15TJ4gf и не само ще усвоите основни техники за отделно програмиране на десктоп и мобиланата версия на дадена WWWW
Глава 13. Adobe платформи за изграждане на Web сайтове.
сайт, но ще получите информация за сайтове, от които можете да изтеглите софтуер за тестване на приложенията (Stendalone applications, незазвисими от хардуера приложения) за iOs и Android като http://mobilewebbestpractices.com/resources/ . Можете да посещавате и страницата за сайт на деня - Adobe Muse Site of the Day, http://muse.adobe.com/site-of-the-day . Контролни въпроси 1. Кои са основните програмни продукти на Adobe в CS6? 2. Опишете сценария за създаване на ваша Web страница от моделна в Dreamweaver. 3. В какъв режим на работа на Muse можете да редактирате дадена Web страница?
WWWW
172
173
WEB ТЕХНОЛОГИИ
Глава 14. Платформи за мобилни Web приложения. Безспорно мобилните устройства се превръщат в ежедневна необходимост, дори в някои случаи – на ежедневен аксесоар за все повече хора по света. Благодарение на съвременните мобилни технологии, връзката с Интернет е постоянна. Поради нарастващия интерес към тях, се увеличават и изискванията към мобилните операционни системи. Компаниите са в непрекъснато съревнование помежду си. Предлагат какви ли не възможности на операционните системи, с които работи всяко мобилно устройство. Различни изследвания105 и класации на мобилни операционни системи показват, че лидери на пазара се очертават Google Android и Apple iOS. Именно поради тази причина в настоящата глава от учебника ще обърнем внимание на тези две операционни системи и предимно на Android. В таблица 14.1. сравняваме посочените операционни системи по няколко основни показателя: стабилност, бързодействие, многозадачност, сигурност, хардуер, приложени. Таблица 14.1. Сравнение на най-популярните ОС за мобилни приложения Показател Език, с който е разработена ОС ОС, на която е базирана Модел на сорс кода Възможност за модифициране Стабилност106 Бързодействие Многозадачност
105
C, C++, java
Android
iOS C, C++, Objective-C
Linux
OS X
С отворен код
Затворен, с компоненти с отворен код единствено на ядрото
ядро, потребителски интерфейс, някои приложения 1.5% провали на приложенията 1.15% провали на приложенията Зависи от характеристиките на хардуера и версията на ОС, но при тестове с мобилни телефони със сходни характеристики и при отваряне на приложения с еднакво предназначени, Android се справя по-бързо с поставените му задачи.
Като пример можем да посочим две от тези изследвания. Първото е публикувано под заглавие “Who’s Winning, iOS or Android? All the Numbers, All in One Place” на адрес http://techland.time.com/2013/04/16/ios-vs-android/#ixzz2UTWHl1LJ. Датата на публикуване е 16.04.2013 г. Второто изследване сравнява дела в глобален мащаб на някои мобилни операционни системи, като проследява и промените, настъпили от 2012 до първото полугодие на 2013 г. Резултатите от изследването са публикувани на 7.08.2013 г. на адрес http://techcrunch.com/2013/08/07/android-nears-80-market-share-inglobal-smartphone-shipments-as-ios-and-blackberry-share-slides-per-idc/ . 106 При определянето й се взема предвид и стабилността на приложенията. Сравнява се поведението на отделни приложения с еднакво предназначение за версии на операционните системи с приблизително еднаква дата на излизане на пазара. От значение също са и характеристиките на хардуера. Т.е. стабилността е параметър с нееднозначно определяне. Показаните в таблица 14.1. данни се базират на сравнителна характеристика между Android Jelly Bean и iOS6, извършена от Forbes: http://www.forbes.com/sites/tomiogeron/2013/02/07/app-data-crash-off-android-jelly-bean-vs-ios6/.
WWWW
Глава 14. Платформи за мобилни Web приложения.
Сигурност
Хардуер
Интерфейс Потребителски настройки Гласови команди Приложения
Други вградени екстри Развитие
Приложенията искат специално разрешение за достъп до системните ресурси, което намалява риска от прихващане на вируси. Множество таблети и телефони, като например, Samsung, LG, HTC, Prestigio и много други Touch screen с възможност за почти пълна модификация Google Now (и по-нови версии) Google Play – над 800, 000 приложения, разработени от Google и сътрудници Google Maps, Gchat, Google Chrome Често обновяване, но промените в някои случаи могат да не достигнат до потребителите, закупили устройства от производители, които са решили да не обновяват софтуера.
Прави се проверка на приложението и на самоличността на разработчика. Продукти на Apple: iPhone, iPod Touch и iPad Touch screen Ограничена модификаци, в изключение на jailbroken Siri Apple app store – над 775,000 приложения Apple Maps, iMessage, Facetime, Safari Софтуерът се обновява често и промените стават веднага достъпни за потребителите, тъй като техните устройства също са разработени от Apple.
От таблица 14.1. можем да направим извода, че ОС Android има значително поголямо преимущество пред iOS що се отнася до хардуера, с който се разпространява, възможността за модификация, бързодействието и многозадачността. Предимството на iOS пред Android е, че обновяването на софтуера не се забавя поради факта, че се поддържа затворен цикъл на производство – ОС и устройствата са на един и същи производител. Също така, според посочените изследвания на Forbes, iOS е с подобрена стабилност пред Android. Да не забравяме, че някои от посочените в таблица 14.1. показатели са много относителни. Все пак и двете операционни системи имат много версии, разработени по различно време и управляващи различни устройства с различни характеристики. Изборът на операционна система се предхожда от избора на хардуера – дали ще е смартфон или таблет, например. Какви са параметрите на съответното устройство? Кой е неговият производител? Каква е цената? Т.е. при избора на мобилно устройство се ръководим от съвкупност от съображения, а не единствено от това с коя ОС ще работим. 14.1. Въведение в Android
Както споменахме вече, ще се спрем подробно на ОС Android, тъй като приложението й е значително по-широко в сравнение с iOS. Основните точки, на които сте спираме, са архитектура на ОС, особености в разработката на мобилни приложения, инструменти на Android за разработване на приложения и платформи за разработване на Android-базирани приложения. За да онагледим теоретичните постановки, даваме и пример за разработване на просто приложение за Android. Архитектура на ОС
WWWW
174
175
WEB ТЕХНОЛОГИИ
Всеки разработчик на мобилни приложения, който се е насочил към Android операционна система, трябва да е запознат с нейната архитектура. Операционната система е базирана на Linux. Както може да се види на фигура 14.1. в основата й стои ядрото на Linux, което осигурява основната системна поддръжка, като управление на процесите, паметта, сигурността, мрежовите връзки и т.н.
Фиг. 14.1. Архитектура на операционна система Android107 Непосредствено над ядрото се намира т. нар. "Runtime Environment", която съдържа най-важните библиотеки, както и виртуалната машина Dalvik (на англ. Dalvik Virtual Machine108 или съкратено DVM). Библиотеките са на C/C++/Java. Използват се за поддръжка на: аудио, видео, (Media Framework); графика (OpenGL | ES, SGL); криптиране (SSL); възпроизвеждане на HTML (WebKit); база данни, която съхранява и споделя данни за приложения (SQLite); шрифтове – векторни и пикселни (FreeType) и др. Ключовият компонент на платформата Android е DVM, която е оптимизирана за мобилни устройства с малко памет. Developer.android.com обяснява предназначението на виртуалната машина по следния начин: - Всяко приложение на Android стартира собствен процес със собствена инстанция на виртуалната машина Dalvik. Dalvik е написана така, че устройствата могат да стартират ефективно множество виртуални машини. DVM изпълнява файловете във формат Dalvik Executable (.dex), който е оптимизиран да заема минимално количество памет. Виртуалната машина е базирана на регистър и стартира
107 108
Източник: http://developer.android.com/ Софтуер с отворен код, създаден от Дан Борнщайн.
WWWW
Глава 14. Платформи за мобилни Web приложения.
класове, компилирани от компилатора на езика Java, който е трансформиран във формат .dex с включен инструмент “dx”. На следващо ниво в архитектурата на ОС се намира приложният фреймуърк (Application Framework), който осигурява услуги на високо ниво под формата на Java класове. Предлага се приложно-програмен интерфейс за разработчиците на приложения за Android. На най-високо ниво в софтуерния стек стоят приложенията, които могат да експортират функционалност и да я предлагат на други приложения, като по този начин се осигурява многократно използване на софтуера. Това е още едно от ключовите предимства на Android – споделяне на функционалности. С тази комбинация от слоеве, Android се различава от стандартната Linux ОС. Осигурена е също висока гъвкавост и възможност за модифициране. Особености в разработката на мобилни приложения Мобилните приложения се отличават значително от десктоп еквивалентните им не по предназначение, а основно по начина, по който потребителят взаимодейства с тях. Всеки разработчик на подобни приложения е добре да вникне в същината на ключовите принципи на тяхната работа. Мобилните приложения се различават и по дизайн, и по начин на разработка от десктоп приложенията. Дизайнът трябва да е атрактивен, а взаимодействието – интуитивно и гъвкаво. Фактът, че потребителят трябва да навигира бързо и ефективно чрез малки по големина набори от компоненти, говори за основното предизвикателство, пред което са изправени разработчиците. Те трябва да проектират и изградят така своите приложения, че едновременно да осигурят тяхната използваемост, удобство и функционалност, като същевременно избягват да ги приравняват на десктоп приложения. Размерите на екраните на мобилните устройства са много по-малки в сравнение с мониторите и поради тази причина изгледът на данните, които трябва да се показват на малките екрани, е „мобилен“, т.е. изграден специално за тези устройства. В следващите няколко точки обобщаваме ключовите моменти, на които е добре всеки начинаещ да обърне внимание. 1. Удобство – много важно за новите потребители на дадено приложение, не само мобилно, е то да бъде изградено така, че те да се ориентират лесно, т.е. да следва препоръките за ползваем дизайн. Също така е добре да се обърне внимание на детайли, като икони например, които са се наложили при даден тип приложения едва ли не като стандартни. Целта е потребителите да прилагат опита си с други сходни приложения. За пример можем да посочим иконата за търсене, която често сме свикнали да виждаме като лупа или пък иконата за съхраняване, която често е под формата на дискета. Удобството не засяга само дизайна, а и съдържанието. То също трябва да се представи по удобен и лесен за навигация начин. 2. Атрактивност – мобилните приложения са не само удобни за употреба, но и атрактивни. Не е достатъчно да се разработят със стандартен интерфейс, който да е сходен с интерфейса на аналогично приложение, а да се предложат нови възможности на потребителя. Да се предложи интересен външен вид, комбиниран с по-добра WWWW
176
177
WEB ТЕХНОЛОГИИ
функционалност на подобните и работа на няколко нива, преходът между които да е бърз и лесен. Предлагането на новости, съчетани с някои стандартни детайли, е още един от ключовите моменти, на които трябва да наблегне всеки разработчик. Това се отнася не само до мобилните приложения, а до всеки софтуерен продукт. Целта, която е препоръчително да се преследва, е съревнование с конкуренцията по начин, по който потребителят да бъде стимулиран да избере новото приложение. 3. Връзка с Интернет – удобството на мобилните устройства се крие в това те да се използват от всяка точка. Интернет е вече част от живота на новото поколение, което „живее“ със социалните мрежи. Поради тази причина връзката с Интернет позволява на потребителите да осъществяват лесен достъп до данните си онлайн, да осъществяват бърз трансфер и други операции според приложението. 4. Персонализация – това е поредната ключова характеристика на мобилните приложения. Потребителят вече е свикнал да настройва приложенията си според личните си нужди. Възможността за детайлна персонализация създава усещането, че това приложение се използва от конкретния му ползвател, т.е. усещането за нещо свое. Например, промяна на цветовата гама на интерфейса, включване и изключване на дадени специфични за приложението настройки, промяна на фона на приложението, съхраняване или не на специфични данни, достъп до системните ресурси и т.н. Чрез предлагане на подобни възможности се създава усещането за контрол от страна на потребителя, което е и част от удобството за работа, не само на мобилни приложения, а и на всякакъв род софтуерни продукти. Реакцията при ограничена възможност за контрол над работата на приложенията обикновено води до негативно отношение и загуба на интерес. 5. Сигурност – във времена на засилваща се кибер престъпност е нормално да се обърне и внимание на сигурността на трансфера на предаваните по мрежата данни. Препоръчително е те да са криптирани, особено ако става въпрос за парични преводи и други операции с парични средства или пък с лични данни. Изброените ключови моменти засягат мобилните приложения като цяло. Според избраната платформа могат да се появят и допълнителни изисквания към разработчиците, които е добре да бъдат съобразени. На адрес http://developer.android.com/design/ Google предоставят напълно безплатно и свободно подробни съвети относно процеса на разработка на мобилни приложения, като съобразяват изискванията за Android.
14.2. Android инструменти за разработване на софтуер (SDK)
Съкращението SDK произлиза от английското software development kit и означава набор от инструменти за разработване на софтуер. Представлява „пакет, който подпомага програмистите при разработване на приложения за специфична платформа.
WWWW
Глава 14. Платформи за мобилни Web приложения.
Обикновено включва един или повече приложни програмни интерфейса (API), документация и инструменти според платформата.“109. От определението следва, че Android SDK е набор от инструменти за разработване на приложения на Android платформа. Android SDK съдържа всички необходими инструменти за създаване, компилиране и пакетиране на приложения за ОС Android. Включена е също тестова среда, която симулира изпълнение на приложението на мобилен телефон без да е необходим реален такъв. Чрез Android SDK могат да се създават виртуални устройства за Android, които да се стартират чрез този симулатор. В Android SDK се съдържа и инструмента Android debug bridge (adb), чрез който се осъществява връзката между реално или виртуално устройство. Това е клиентсървър програма, чиито компоненти са: команди;
клиент, към който обръщението към клиента се осъществява чрез
сървър, който се стартира на заден фон. Той управлява комуникацията между клиента и демон процеса, стартиран на симулатора или устройството; демон (daemon), който се стартира като фонов процес на всеки симулатор или инстанция на устройство. ADT Google осигурява набор от средства за разработване на приложения за Android или това са т. нар. Android Development Tools (ADT). Компанията препоръчва на официалния си сайт на Android използване на средата за разработка Eclipse. ADT представлява набор от компоненти (plug-ins), които разширяват Eclipse с възможности за разрабтка на Android-базирани приложения. ADT съдържа всички задължителни функционалности за създаване, компилиране, отстраняване на грешки и други в процеса на разработка на Android приложения чрез средата Eclipse. ADT също дава възможност за създаване и стартиране на виртуални устройства за Android. Налични са специализирани XML редактори, които могат да превключват между интерфейсен изглед и код. Изчерпателна информация по въпроса може да се прочете на официалния сайт с помощна информация на Google - http://developer.android.com/tools/help/adt.html. Интегрирани среди за разработка на Android-базирани приложения Най-често използваната интегрирана среда за разработка е Eclipse, която се препоръчва официално и от Google. Това не означава, че е единствена. Като конкуренти на Eclipse се явяват IntelliJ IDEA и NetBeans. За да се придобие по-ясна представа за предимствата и недостатъците на всяка една, предлагаме кратка характеристика на всяка от тях. Eclipse
109
Какво е SDK?, 30.05.2013 г.: http://www.webopedia.com/TERM/S/SDK.html
WWWW
178
179
WEB ТЕХНОЛОГИИ
Eclipse представлява интегрирана среда за разработка на приложения на различни програмни езици, написана на Java. Може да се каже, че това е среда за цялостно разработване на приложения, която поддържа и plug-in система. Eclipse е безплатен софтуер с отворен код. Езиците, които се поддържат са, например, Ада, C, C++, COBOL, Perl, PHP, Python, Ruby, Scala и Scheme. Интегрираната среда за разработка се нарича още Eclipse ADT за Ада, Eclipse CDT за C/C++, Eclipse JDT за Java и Eclipse PDT за PHP. Операционните системи, под които може да работи, са Linux, Mac OS X, Solaris, Windows. Средата поддържа богат набор от разширения, като например pydev за Python, Android ADT за Android приложения, e(fx)clipse за JavaFX и т.н. Според нуждите на съответния разработчик, в Eclipse Marketplace (http://marketplace.eclipse.org/) могат да бъдат открити и други плъгини. Intellij IDEA IntelliJ IDEA е интегрирана среда за разработка, написана на Java и разработена от JetBrains. Поддържа се в различни версии – безплатна с отворен код и комерсиална, като всяка от тях има различни възможности. Безплатната версия се нарича още Community Edition. Тя поддържа разработката на приложения за езиците Java, Scala — включително чрез безплатен плъгин ScalaTest, specs2, Groovy, Clojure — чрез безплатен плъгин, XML, XSD, DTD Разполага също с редактор на код, поддържащ рефакторинг, пълна поддръжка на Java 8, инспектиране на кода и други предимства. Поддържат се също инструменти, като Maven, Gradle, Ant и Gant. Безплатно се предоставя и възможност за създаване на Google Android приложения с включена поддръжка на последната версия на Android SDK. Платената версия на средата се нарича още Ultimate Edition и включва всички инструменти, налични в безплатната, като се добавя още поддръжка инструменти и технологии за разработване на web приложения, UML Designer, инструменти за управление на бази от данни. Налична е поддръжката на езици, като PHP, Python, Ruby, SQL, включително PostgreSQL, MySQL, Oracle, SQL Server и други диалекти. NetBeans NetBeans е интегрирана среда за разработка на софтуер на множество езици, като Java, JavaScript, PHP, Python, C/C++, др. NetBeans се използва и като платформа за разработване на десктоп приложения на Java. Самата среда е написана на Java. Съвместима е с операционни системи, като Microsoft Windows, Mac OS X, Linux и Solaris, при условие, че е инсталирана Java виртуална машина. За разработване на Java приложения се изисква инсталиране на Java Development Kit. За разработването на приложения се използват компоненти, наречени модули. Съществува отделен модул за реализиране на различна функционалност, като редактиране, управление на версиите, поддръжка Java/CVS. Приложенията, разработени с тази среда, могат да бъдат разширявани от трети страни, т.е. те са с отворен код. Това важи и за самата среда, с която са създадени. NetBeans IDE предлага редактори и инструменти за XML, HTML, PHP, Groovy, Javadoc, JavaScript, и JSP. Разработването на Android приложения се осъществява чрез разширяване на средата от специален плъгин – NBAndroid. Eclipse, IntelliJ IDEA и NetBeans IDE са най-широко използваните среди за разработка на приложения на Java. Техните редактори, които са и най-важният им компонент, се отличават с високо качество. Eclipse и NetBeans IDE са безплатни с WWWW
Глава 14. Платформи за мобилни Web приложения.
отворен код, а IntelliJ IDEA също има безплатна версия с отворен код - IntelliJ IDEA Community Edition. И трите среди, поддържат разработване на мобилни приложения и по-специално на Android-базирани, като за целта се изисква инсталиране на допълнителни разширения. Този факт ги прави конкуренти в областта на разработката на мобилни приложения. Не можем да се ангажираме с препоръки към конкретна среда, тъй като и трите имат своите предимства по отношение на цялостния процес на разработка на приложения и то на широк кръг от езици за програмиране. Изборът е изцяло в ръцете на съответния разработчик и неговите изисквания. Пример за разработване на Android-базирано приложение с Eclipse Eclipse е средата, на която се базират редица други, като Adobe Flash Builder, Adobe ColdFusion Builder, Aptana, Kalypso, IBM Rational Software Architect, IBM Rational Software Modeler и много други. Поради тази причина нейният интерфейс би бил познат на разработчиците, които имат опит с посочените среди за разработка, и те биха се ориентирали много по-лесно. Това, разбира се, не би трябвало да обвързва начинаещите разработчици на мобилни приложения с конкретната среда, а само да им послужи като пример. Първата стъпка е инсталиране на конкретната среда. След това е необходимо да се инсталира Android ADT плъгин и последните версии на SDK инструменти и платформи чрез SDK Manager. За съвсем начинаещи в програмирането от Google предоставят пакет, наречен ADT Bundle, в който е включено всичко необходимо, дори и Eclipse. След като се стартира средата, се създава нов проект на Android: File -> New … -> Android Application Project:
Фиг. 14.2. Създаване на нов проект за мобилни приложения Попълват се данните, които се изискват от появилия се прозорец, като име на проекта, име на приложението, име на пакета, минимално изисквана ОС, под която ще се стартира приложението, ОС, за която е предназначено. След като се попълнят тези данни, се натиска бутон Next за продължение:
WWWW
180
181
WEB ТЕХНОЛОГИИ
Фиг. 14.3. Въвеждане на основни данни за проекта Избира се местоположението на файловете (директориите) на проекта или се избира опцията да се създаде в текущото работно пространство:
Фиг. 14.4. Задаване директорията на проекта След това се избира иконата на приложението, която може да се стилизира от наличните опции на екрана. Те позволяват да се запази в текущия си вид, да бъде квадратна или кръгла, да има фон. Иконата може да е само текст или пък да се използва изображение от библиотеката (Clipart):
WWWW
Глава 14. Платформи за мобилни Web приложения.
Фиг. 14.5. Избор на икона за приложението После се избира начинът, по който ще изглежда интерфейса и по-конкретно, ще се осъществяват отделните действия с приложението. Ще изберем Blank Activity. За да се направи разликата, могат да се прегледат и останалите възможности:
Фиг. 14.6. Избор на икона за приложението След това се създава виртуалното устройство, което ще възпроизвежда приложението. Това става от меню Window –> Android Virtual Device Manager, след което се натиска бутон New. Избират с е характеристиките на конкретното хардуерно устройство, като се препоръчва да се имат предвид, че Windows може да откаже да WWWW
182
183
WEB ТЕХНОЛОГИИ
провали изпълнението на виртуално устройство с RAM по-голяма от 768 МВ. Трябва задължително да се избере отметката Use Host GPU. Чрез нея се активира възможността виртуалното устройство да работи по-бързо, тъй като използва ресурсите на графичната карта на компютъра.
Фиг. 14.7. Задаване на виртуално устройство
Фиг. 14.8. Характеристики на виртуалното устройство
След задаване на виртуалното устройство се преминава към тестване на направеното до момента. Това се осъществява по няколко начина. Единият от тях е да се натисне десен бутон върху проекта в Package Explorer и да се избере опция Run as -> Android Application. Може да отнеме известно време до стартиране на приложението на виртуалното устройство. Резултатът е показан на фиг. 14.9.
WWWW
Глава 14. Платформи за мобилни Web приложения.
Фиг. 14.9. Тестване на проекта Web сайтът http://mobile.tutsplus.com/ предлага множество безплатни и платени уроци, които биха били полезни за всеки начинаещ разработчик на мобилни приложения. Други помощни материали могат да бъдат намерени на http://www.creativebloq.com/app-design/how-build-app-tutorials-12121473 и 110 http://www.lynda.com/Mobile-training-tutorials/55-0.html. Контролни въпроси 1. Дайте определение за понятието SDK. 2. Посочете 3 съществени разлики между Android и iOS. 3. От колко слоя е изградена ОС Android? Направете кратко описание на всеки един. 4. Какво е ADT и какво включва? Потърсете детайлна информация от официалния сайт на Google. 5. Посочете най-важните, според Вас, особености при разработката на мобилни приложения. Обосновете отговора си.
110
Web сайтовете са достъпни към октомври, 2013 г.
WWWW
184
185
WEB ТЕХНОЛОГИИ
Литература. Задължителна литература
1. Върбанов, Р. Бизнес в средата на Web 2.0. (Web 2.0, Enterprise 2.0, Cloud Computing, SaaS). Библиотека „Стопански свят”, АИ Ценов, Свищов, 2011, №111, 243 с. ISBN 1310-2737. 2. Върбанов, Р. Интернет технологии в бизнеса и мениджмънта. Изд. “Faber”, В. Търново, 2009, 414 с. ISBN 978-954-400-136-0. 3. Върбанов, Р. Корпоративни мрежови архитектури и технологии. Изд. “Faber”, В. Търново, 2009, 379 с. ISBN: 978-954-400-028-8. 4. Соколов С., CSS 3 в примери, Асеневци, 2009 [B74113] 5. Adobe Muse Clаssroom in а book. Adobe Press 6. Adobe Dreamwiever Clаssroom in а book. Adobe Press 7. Haverbeke M., Eloquent JavaScript, E-book, http://eloquentjavascript.net/ 8. Burnette, Ed, “Hello, Android: Introducing Google's Mobile Development Platform (Pragmatic Programmers)”, Pragmatic Bookshelf; Third Edition edition (August 4, 2010) 9. Steele, J., “The Android Developer's Cookbook: Building Applications with the Android SDK: Building Applications with the Android SDK (Developer's Library)”, Addison-Wesley Professional; 1 edition (October 27, 2010) 10. Darcey, L., “Sams Teach Yourself Android Application Development in 24 Hours (2nd Edition)”, Sams Publishing; 2 edition (August 7, 2011) 11. Gunelius, S., “Google Blogger For Dummies”, For Dummies; 1 edition (February 3, 2009) 12. Nixon, R., “Learning PHP, MySQL, JavaScript, and CSS: A Step-by-Step Guide to Creating Dynamic Websites”, O'Reilly Media; Second Edition edition (September 3, 2012) 13. Сайт за обучение на студентите по дисциплината Web технологии http://1styearinfo.pbworks.com/w/page/774038/FrontPage
Препоръчителна литература
1. Върбанов, Р. България в европейското информационно пространство. Библиотека „Стопански свят”, Свищов, АИ Ценов, 2007, № 88. 192 с. ISBN1310-2737 2. Върбанов, Р. Електронен бизнес и електронна търговия в малки и средни предприятия. Автореферат на дисертационен труд за получаване на научната степен „Доктор на икономическите науки” по специалност 05.02.08 – „Приложение на изчислителната техника в икономиката”, защитена на 15 февруари 2010 г., Изд. „Д. А Ценов”, Свищов, 2010, 53 с. 3. Joomla Tutorials, http://www.joomlatutorials.com/ 4. Помощен сайт на Google с информация за разработване на Android приложения: http://developer.android.com/ 5. HTML - Living Standard — Last Updated 4 June 2013. http://www.whatwg.org/specs/ 6. WordPress.com Support: http://en.support.wordpress.com/
WWWW
Web адреси на справочни материали
Web адреси на справочни материали 1. Спавочни карти по основните теми - Cheat-Sheets.org - http://www.cheat-sheets.org/ , Октомври 2013 г 2. HTML Reference - (HTML5 Compliant) - http://www.w3schools.com/tags/, Октомври 2013 г 3. Сайт в Google https://sites.google.com/a/bultima.net/kair4u/home/ontology/html5primerhttps://sites.g 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31.
32.
oogle.com/a/bultima.net/kair4u/home/ontology/html5primer http://www.w3schools.com/js/default.asp Октомври 2013 г Помощен сайт на Google с информация за разработване на Android приложения: http://developer.android.com/ , Октомври 2013 г BlogBooker: http://www.blogbooker.com/ , Октомври 2013 г Персонализирано табло: http://netvibes.com , Октомври 2013 г г Project Roadmap: http://www.intertwingly.net/wiki/pie/RoadMap, Октомври 2013 г RSS 2.0 Specification: http://cyber.law.harvard.edu/rss/rss.html, Октомври 2013 г Четец на новини NewsBlur: http://www.newsblur.com/, Октомври 2013 г Четец на новини The old Reader: http://theoldreader.com, Октомври 2013 г Четец на новини: http://feedspot.com, Октомври 2013 г Четец на новини:http://reader.feedshow.com/, Октомври 2013 г Четец на новини:http://goodnoows.com/ , Октомври 2013 г Персонализирано табло: https://hootsuite.com, Октомври 2013 г Персонализирано табло: http://pinterest.com, Октомври 2013 г Персонализирано табло: http://www.scoop.it/, Октомври 2013 г Персонализирано табло: http://todaylaunch.com, Октомври 2013 г Персонализирано табло: http://www.pageflakes.com/, Октомври 2013 г Адрес на генератора на новини: http://ajaxray.com/blog/php-universal-feed-generatorsupports-rss-10-rss-20-and-atom, Октомври 2013 г Генератор на новини: http://www.phpclasses.org/package/4427-PHP-Generate-feeds-inRSS-1-0-2-0-an-Atom-formats.html, Октомври 2013 г Creating an Atom feed in PHP. Easy syndication with PHP and MySQL: http://www.ibm.com/developerworks/library/x-phpatomfeed/, Октомври 2013 г Zend_Feed - разширение на Zend Framework за създаване на RSS / Atom канали: http://framework.zend.com/manual/1.12/en/zend.feed.introduction.html, Октомври 2013 г RSS Builder: http://home.kpn.nl/bsoft/rssbuilder/., Октомври 2013 г RSS редактор: http://www.rsseditor.net/rss-feed-creator/, Октомври 2013 г http://www.feedage.com/, Октомври 2013 г http://www.newsisfree.com/, Октомври 2013 г http://www.rssfeeds.com/, Октомври 2013 г Web Content Syndication: http://ec.europa.eu/ipg/standards/markup/web-contentsyndication/, Октомври 2013 г The Atom Syndication Format: http://tools.ietf.org/html/rfc4287, Октомври 2013 г Top 15 Android-Ready Application Development Frameworks: , Октомври 2013 г https://www.linux.com/news/embedded-mobile/mobile-linux/612366-15-android-readyapplication-development-frameworks-, Октомври 2013 г http://rss-tutorial.com/rss-website-feed-services.php, Октомври 2013 г WWWW
186
187
WEB ТЕХНОЛОГИИ
33. Four Syndication Technologies for Website Content: http://www.dummies.com/howto/content/four-syndication-technologies-for-website-content.html, Октомври 2013 г 34. How to Write an App for Android: http://www.geeknaut.com/how-to-write-an-app-forandroid-11199866.html, Октомври 2013 г 35. RSS Directories: http://vandelaydesign.com/rss/rssdirectories.htm, Октомври 2013 г 36. Crittercism - Mobile App Performance Management Platform: , Октомври 2013 г https://www.crittercism.com/, Октомври 2013 г 37. Wordpress: https://wordpress.com, Октомври 2013 г 38. Wordpress: https://wordpress.org, Октомври 2013 г 39. Blogger: https://blogger.com, Октомври 2013 г 40. Twitter: https://twitter.com/, Октомври 2013 г 41. Getting Started with Android Development: http://confluence.jetbrains.com/display/IntelliJIDEA/Getting+Started+with+Android+Deve lopment, Октомври 2013 г 42. A Beginner’s Guide to Blogging Basics: http://www.blogworld.com/2011/11/21/abeginners-guide-to-blogging-basics/, Октомври 2013 г 43. http://www.eclipse.org/, Октомври 2013 г 44. http://www.jetbrains.com/idea/, Октомври 2013 г 45. https://netbeans.org/, Октомври 2013 г 46. http://www.quackit.com/html_5/tags/, Октомври 2013 г 47. The Joomla! Extensions Directory: http://extensions.joomla.org/extensions/coreenhancements/multiple-sites/21935, Октомври 2013 г 48. Create a Template with Joomla: Step by Step: http://net.tutsplus.com/tutorials/sitebuilds/create-a-template-with-joomla-step-by-step/, Октомври 2013 г 49. BitNami: http://bitnami.com/, Октомври 2013 г 50. XAMPP: http://www.apachefriends.org/en/xampp.html, Октомври 2013 г 51. Gantry: http://demo.gantry-framework.org/ , Октомври 2013 г
WWWW
Приложения
Приложения
Приложение 1. Задания по дисциплината Web технологии
Задание 1. Разработване на автобиография (CV) чрез използване само на HTML под формата на таблица. Срок за разработване – до края на втората учебна седмица.
Задание 2. Разработване на автобиография (CV) чрез използване на HTML и CSS3. Срок за разработване – до края на четвъртата учебна седмица.
Задание 3. Разработване на система за навигация чрез използване на Photoshop, HTML, CSS3 и javascript. Срок за разработване – до края на шестата учебна седмица.
Задание 4. Разработване на личен и/или бизнес календар със събития чрез използване на HTML, CSS3 и javascript/AJAX. Срок за разработване – до края на осмата учебна седмица.
Задание 5. Интегриране на зандания 1-4 в бизнес Web сайта (курсовата работа). Срок за разработване – до края на десетата учебна седмица.
WWWW
188
189
WEB ТЕХНОЛОГИИ
Приложение 2. Курсова работа по дисциплината Web технологии – разработване на бизнес Web сайт
Чрез разработената от преподавателския екип система за самооценка на курсовата работа се осигурява: - прозрачност при образуване на семестриалната оценка на обучаваните студенти; - проследяване на основните градивни елементи, използвани при изграждане на прототип на бизнес Web сайт. В приложените таблици са включени описание на разделите на курсовата работа и съответния брой точки за всеки един от тях. Максимален брой точки – 100. 1) 2) 3) 4) 5) 6) 7) 8)
Раздел „Програмиране“ – максимум 20 точки; Раздел „Навигация“ – максимум 10 точки; Раздел „Онлайн бази от данни“ – максимум 20 точки; Раздел „Web структура“ – максимум 12 точки; Раздел „JavaScripts/AJAX“ – максимум 8 точки; Раздел „Графическо оформление на сайта“ – максимум 10 точки; Раздел „Задания“ – максимум 10 точки; Раздел „Активно участие в учебния процес“ – максимум 10 точки. 1. Раздел „Програмиране“
20
HTML програмиране
5
PRO-програмиране
10
XML програмиране PHP програмиране JAVA програмиране dotNet програмиране Framework (DreamWeawer, Flash, ExpressionWeb ...) Порграма-генератор на сайтове
2. Раздел „Навигация“
5
10
Управление чрез авторско меню
7
Управление чрез меню-Template
3
3. Раздел „Онлайн бази от данни“ Работа с Cloud-Docs WWWW
10 3
Приложения
Entry Forms
3
Import External Data
4
4. Раздел „Web структура“
12
Мин 3 нива на йерархия (Home-About-Me)
6
Site Map
2
FAQ (Често задавани въпроси)
2
Форма за обратна връзка
5. Раздел „JavaScripts/AJAX“
2
8
Авторски скриптове
5
Адаптирани скриптове
3
6. Раздел „Графическо оформление на сайта“
10
Собствен Style/CSS
6
Възможност за смяна на оформление
2
Шрифтове/Езици
1
Лого/Слоган на сайта
1
7. Раздел „Задания“
10
Изпратени в срок задания
3
Задания, които отговарят на изискванията
4
Задания, включени в сайта (курсова работа)
3
8. Раздел „Активно участие в учебния процес“
190
10
Участие с демонстрация
2
Участие в изнасянето на дадена лекция
3
Публична защита на сайта
5 WWWW
191
WEB ТЕХНОЛОГИИ
Рецензенти: 1. Доц. д-р Снежана Сълова (основна рецензия) 2. Гл. ас. д-р Иван Куюмджиев (становище) Учебникът „Web технологии“ е обсъден на заседание на катедра „Информатика“ при ИУ-Варна на 30 Септември 2013. Авторският доклад и решението за издаване на учебника са прието на заседание на катедрата на 18 Ноември 2013.
WWWW