Учебни записки

Сайт: Онлайн курсове
Курс: Интернет технологии за професията архитект - факултативна учебна дисциплина за ВСУ
Книга: Учебни записки
Разпечатано от: Потребител гост
Дата: неделя, 9 август 2020, 05:32

Съдържание

1. Основи на Интернет

Какво е Интернет?

Интернет се нарича глобалната компютърна мрежа. В тази мрежа може да се включи всеки компютър или друго устройство и така това устройство получава възможност да обменя информация с всяко друго, включено в Интернет достъпно устройство.

Вижте: Интернет - статия в bg.wikipedia.org

Устройство, чието основно предназначение е да предоставя информация на други устройства от мрежата се нарича сървър, а устройство, което е предназначено да получава информация се нарича клиент. Казва се още, че сървърите предоставят, а клиентите ползват, съответен тип интернет услуга. За простота говорим за "устройства", но понеже се имат пред вид програмируеми устройства, по-точно, клиент и сървър са функции, които се изпълняват чрез съответен софтуер. Софтуер, който изпълнява функция на сървър, както и софтуер, който изпълнява функция клиент, може да има и на един и същи компютър. Така че, идеята за комуникация между клиент и сървър е идея за комуникация между софтуерни приложения. Клиент е приложение, което изпраща заявка, до друго приложение, наречено сървър и получава от сървъра отговор на своята заявка.

Една от основните услуги в Интернет е услугата по предоставяне на достъп до документи,  съдържащи текст, изображения, звукова и видео информация, и хипервръзки към други документи. Този вид документи се наричат още интернет страници или уеб страници, а мрежата, която те съставляват благодарение на свързаността помежду си чрез хипервръзки, се нарича Уеб. (World Wide Web) Интернет страниците се наричат още и хипертекстови документи.

Обменът на информация между приложения, изпълнявани върху свързаните в Интернет устройства се осъществява посредством спазването на стандартни набори от правила наричани протоколи. Протоколите определят подробностите относно начина на представяне и пренасяне на информацията. Предмет на настоящият курс е създаването на интернет страници (хипертекстови документи) и затова ще споменем само протоколите, използвани именно за тази цел.

Организацията, която подготвя, обсъжда и публикува стандартите за Уеб е консорциума World Wide Web Consortium (W3C), на чиито сайт  w3.org може да се намери информацията за тези стандарти.

1.1. Браузър, страница, URL

Разглеждането на хипертекстови документи (уеб страници) се осъществява със софтуерни приложения, наричани браузъри. (Вижте: Браузър - статия в bg.wikipedia.org) Известни браузъри са Internet Explorer (Edge), FireFox, Google Chrome, Safari, Opera и др. Посочените браузъри имат версии за настолни и преносими компютри, и за мобилни устройства.

За да се отвори в браузър дадена страница, в специално поле за адрес, каквото има във всеки браузър, се попълва адрес на страницата, например, адресът на настоящата страница е:

https://vanyog.com/moodle/mod/book/view.php?id=315&chapterid=99

Адресите на страниците, представляват унифицирани локатори на ресурси (URL) и тяхната структура е предмет на стандарта RFC 3986.

Всеки унифициран локатор на ресурс се състои от няколко части. Нека да представим честите, от които се състои адресът на настоящата страница:

https - е идентификатор на протокол за пренос на данни. В случая това е протокол за шифрован пренос на хипертекстов документ HTTPS. Други възможни протоколи са: протоколът за пренос на хипертекст HTTP, протоколът за пренос на файлове FTP, протоколът за пренос на аудио и видео в реално време RTP и др.

:// - разделител между идентификатора на протокола и останалата част на адреса

vanyog.com - име на сайт (домейн). Понятието интернет сайт е свързано именно с тази част от адресите на страниците. Сайт се нарича група от страниците, които имат в адресите си един и същи домейн. (Повече за домейните - в следващата глава)

/moodle/mod/book/view.php - път до страницата в рамките на сайта. Прилича на абсолютен път до файл, във файловата система, и в много случаи е именно това.

?id=315&chapterid=99 - параметри. Множеството от параметри се отделя от останалата част от адрес със символа ?. Параметрите имат имена и стойности, свързани със знак =. Например: id=315 е параметър с име id и стойност 315. Параметрите се отделят един от друг със знак &. 

Унифицираните идентификатори на ресурси (URL) се използват не само за идентифициране на хепертекстови документи, но и за други, достъпни в Интернет: файлове, сайтове или конкретни места в документи. Затова в термина се използва думата ресурс, която има по-общ смисъл от думите: страница или файл.

Нека да посочим още примери за URL-и:

Сайтът на Google има URL: https://www.google.com
Файлът с логото на Google: https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png
Мястото на посветената на историята на Internet част от статията за глобалната мрежа в Wikipedia: https://en.wikipedia.org/wiki/Internet#History

Обърнете внимание в последния URL има част, отделена със знака #. Именно идентификаторът History след този знак, насочва браузъра да "превърти" страницата до конкретното място (нарича се още фрагмент).

В стандарта за съставяне на URL са предвидени и други части, които, ако има нужда, ще разгледаме, когато се наложи да ги използваме.

1.2. Име на сайт, домейн

Съществена част от унифицираният локатор на ресурси е домейнът. Например, за настоящата страница, с адрес https://vanyog.com/moodle/mod/book/view.php?id=315&chapterid=100 домейнът е: vanyog.com Домейнът се състои от, разделени с точка части, които също се наричат домейни, съответно от първо, второ и трето ниво, изброени от дясно наляво. Счита се, че домейните образуват йерархична структура, като домейните от по-високите нива са под-домейни на домейните от по-ниските нива. Така, например, vanyog се явява под-домейн от второ ниво на домейна от първо ниво com.

Домейните от първо ниво (com, org, biz, bg и др.) са ограничен брой и се определят от  Интернет корпорация за присвоени имена и адреси (ICANN). Пълният списък на домейните от първо ниво може да видите тук. На английски тези домейни се наричат  top-level domain или се означават със съкращението TLD. Най старите домейни от първо ниво се наричат Generic top-level domains - gTLD.

Домейните от второ ниво представляват комерсиален интерес и са обект на покупко-продажби, макар, че има възможности и за ползване на безплатни такива. При регистриране на домейн от второ ниво бъдещият собственик на домейна избира в кой домейн от първо ниво, предпочита да постави своя домейн от второ ниво и съставя подходящо за своите цели име, (име на фирма, инициали, име на продукт и т.н.) Избраното име не може да съвпада с името на друг домейн в същия домейн от първо ниво.

Домейните от трето ниво се задават от собствениците на домейни от второ ниво. Те не са задължителни и се създават с цел удобство.

Посочваме домейна като част от адреса на интернет страница, но домейни се използват не само за уеб, но и при други интернет услуги, електронна поща, обмен на файлове и др.

Вижте: Домейн и Домейн от първо ниво - статии в bg.wikipedia.org, Домейни от първо ниво (TLD) – общи и регионални домейни (видео)

1.3. Слоен модел на Интернет

Интернет представлява компютърна мрежа и като такава е изградена на техническите принципи за изграждане на компютърни мрежи.

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

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

Съществува стандартен абстрактен модел на компютърна мрежа, наречен OSI (Open Systems Interconnection) модел. При този модел се различават седем абстрактни слоя, през които информацията преминава за да се пренесе от едно приложение до друго. Всяко от приложенията комуникира с най-горния, наречен 7. приложен слой.  През приложният слой, претърпявайки различни обработки във всеки следващ слой, информацията се предава от приложението изпращач, към слоевете надолу, съответно: 6. представителен, 5. сесиен, 4. транспортен, 3. мрежов, 2. канален и 1. физически слой.  След което, за да достигне до приложението получател, преминава обратно преработки до връщане в приложния слой и приложението получател.

Предаването и извличането на информация към и от всеки мрежов слой се извършва от стоящия непосредствено над или под него слой при спазване на определени, също стандартизирани, системи от правила, наричани мрежови протоколи.

Интернет се базира на модела на семейство от Интернет протоколи (Internet protocol suite), известен със съкращението TCP/IP (Transmission Control Protocol / Internet Protocol).  При този модел се различават четири слоя: 4. приложен, 3. транспортен, 2. интернет и 1. физически. Има строго съответствие между тези слоеве и слоевете на OSI модела:

OSI TCP/IP
7. приложен
6. представителен     
5. сесиен
4. приложен слой
4. транспортен 3. транспортен
3. мрежов 2. интернет
2. канален
4. физически
1. физически

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

1.4. IP адреси и портове

Всяко, свързано с Интернет устройство, при своето присъединяване към мрежата получава уникален цифров идентификатор, наречен интернет протоколен адрес или IP адрес. Съществуват две системи за съставяне на IP адреси: IPv4 - от 32 битови адреси и IPv6 - от 128 битови адреси.

За нагледно възприемане от хора адресите IPv4 се представят с четири цели числа, разделени с точка, например:

192.168.13.1
127.0.0.1
164.138.218.89

Адресите IPv6 се представят с осем четирицифрени шестнадесетични числа, разделени с двоеточие, например:

1080:0:0:0:0:800:0:417A

По-голямо разпространение в момента има използването на IPv4, докато IPv6 е в процес на навлизане във все по-широка употреба. Статистика на разпространението на IPv6 по държави вижте тук.

Централна роля при разпределянето на IP адреси между потребителите на Интернет играе Служба за присвояване на имена и адреси в Интернет, същата организация, която регистрира и домейните от първо ниво. Тя разпределя множества от IP адреси между 5, географски обособени, регионалните разпределители (RIRs). От твоя страна регионалните разпределители определят IP адреси на националните разпределители (NIRs), а националните - на локални разпределители (LIRs) и последните - на доставчици на Интернет (ISPs).

Всяко устройство, получава променлив или постоянен IP адрес, при установяване на връзка с мрежата на доставчика на Интернет.

Портове

Установяването на връзка с устройството, което има даден IP адрес, може да преследва различни цели, например: изпращане към това устройство на URL на ресурс с цел получаване на този ресурс, или изпращане на електронно съобщение, или установяване на връзка за обмен на файлове и т.н. Всяка от тези цели се постига чрез използване на отделни абстрактни канали, наричани мрежови портове. Всеки порт има свой номер и портове с различни номера са предназначени за различни цели, например: порт 21 - за файлов транспортен протокол (FTP), 80 - за Уеб и т.н. Пълен списък на портовете и имената на услугите, които се осъществяват чрез тях: Service Name and Transport Protocol Port Number Registry.

1.5. DNS - Система за имена на домейните

Домейните са въведени с цел удобство на потребителите на Интернет, (хората по-лесно запомнят домейни вместо IP адреси), но технически за комуникацията между устройствата в Интернет се използват IP адреси. Ето защо в Интернет съществува разпределена база данни, която определя на всеки домейн кой IP адрес съответства. Тази база данни се състои от записи, всеки от които съдържа домейн и съответен IP адрес. Записите за различните домейни се намират на различни сървъри, наричани DNS сървъри, свързани в обща система, известна като система за имена на домейните (Domain Name System, или съкратено: DNS)

Основна задача на системата за имена на домейните е бързото и безпроблемно подаване на информация кой е IP адресът на даден домейн, към всяко приложение, което заяви, че се нуждае от такава информация. Освен DNS сървъри в системата за имена на домейните участва и софтуер, чиято задача е да открие кой сървър пази записа на съответния домейн и да получи от него IP адреса.

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

На върха на йерархията от DNS сървъри са 13  коренови сървъри за имена (Root name server - en.wikipedia.org, IANA - Root Servers), отговорни за домейните от първо ниво. При получаване на заявка за някой домейн тези сървъри връщат като резултат списъците на други DNS сървъри отговорни за конкретен домейн от първо ниво. Сървърите, отговорни за иманата от първо ниво, връщат като отговор списък с имена на други DNS сървъри, отговорни за конкретния домейн от второ ниво и така нататък, докато се стигне до DNS сървъра разполагащ със записа на конкретния домейн, който връща като резултат съответния IP адрес.

Работата на всеки DNS сървър се състои в това да получава  домейни по заявки от клиенти и да връща информация кои са IP адресите на тези домейни или да посочи други сървъри, които са отговорни за тази информация. 

Установяването на IP адреса на даден домейн се осъществява от специален софтуер, наричан DNS резолвър, осигурен от операционната система в компютъра на клиента. Към този софтуер се обръща всеки браузър или друго приложение, използващо домейни. Първият източник на информация, който се проверява от този софтуер, е текстов файл с име hosts, който се намира на самото устройство и съдържа редове, подобни на следния:

127.0.0.1 localhost

(Всеки ред съдържа IP адрес и съответстващ на този адрес домейн.) Ако в този файл е посочен IP адресът на заявения домейн, то той се подава като отговор към приложението клиент, но ако там не фигурира заявеният домейн, то заявка за получаване на IP адрес се подава към най-близкия DNS резолвър, обикновено осигурен от доставчика на Интернет.

Локалният (в компютъра на клиента) софтуер за установяване на IP адреси (DNS резолвър) поддържа кеш, на скоро заявените домейни, с което се спестява обръщането към DNS сървъри и се осигурява бързодействие. Кешът представлява временна таблица, от която бързо се извличат данни, вместо тези данни да се получат чрез, отнемаща по-дълго време заявка. Всеки запис в кеша се съхранява само определено време, след изтичане на което, се прави нова заявка и записът в кеша се обновява. Ако през времето, когато се използват данните от кеша настъпи промяна във "външните" данни, то това се забелязва чак при следващото обновяване на кеша. Такъв механизъм за пазене на данни в кеш се използва и от разположените на сървъри DNS резолвъри и това осигурява бърза доставка на IP адресите и малък брой на заявките до DNS сървърите.

Друго описание на процеса вижте на страницата DNS проверка.

1.6. Регистриране на домейн

Технически, регистрирането на домейн означава добавяне на запис в зоната на някой DNS сървър.

DNS сървърите са собственост на доставчиците на Интернет и регистрирането на домейн от второ ниво се предлага от тях като платена услуга. Цената на тази услуга зависи от времето, за което се ангажира домейна (в месеци или години), но е различна, също така, и за различните домейни от първо ниво.

Домейните от първо ниво (bg, ru, mk и др.), които съвпадат с кодове на държави по стандарта ISO-3166, са обект на специална регулация и се регистрират от (обикновено единствен за всяка държава) регистратор. (Вижте: Country code top-level domain - ccTLD) Регистратор на домейните bg e register.bg.

Останалите домейни от първо ниво, традиционно имат някакво смислово значение за характера на дейността на своя собственик:

com - се предпочита за сайтове на фирми с търговска дейност,
biz - сайтове за за бизнес,
info - информационни сайтове,
org - организации, обикновено с идеални цели,
edu - образователни институции,
net - интернет услуги и т.н.

Цените за домейни от второ ниво се различават в различните домейни от първо ниво. Например, вижте тук

Регистрирането на домейн от второ ниво се извършва дистанционно, през Интернет и преминава през няколко стъпки:

  1. Проверяване дали името, което собственикът желае да постави на своя домейн от второ ниво, не е вече регистрирано в избрания домейн от първо ниво. Ако избраното име е заето, то може да се избере друг домейн от първо ниво или да се промени името на друго, което още не е заето.
  2. Ако избраното име е свободно се преминава към попълване на три типа данни за контакт, които са задължителни за всеки домейн: данни за собственика, данни за администратор и данни за технически контакт. И трите групи данни включват: име на организация, име и фамилия на лице, адрес, град, пощенски код, имейл и телефон.
  3. Извършва се плащане по електронен път.

Обикновено, няколко минути след като  плащането бъде завършено от системата за плащане по електронен път, новият домейн влиза в действие и при отваряне с браузър се вижда тестова интернет страница.

Съществуват няколко домейна от първо ниво (cf, ga, gh, ml, tk), в които може да се регистрира безплатно домейн от второ ниво. Регистрацията се извършва през сайта: freenom.com (Виже указания).

При регистриране на домейн, на сайта, през който се извършва регистрацията, се създава клиентски профил на собственика. В бъдеще собственикът на домейна, може да влезе в профила си със зададените при регистрирането потребителско име (най-често това е имейл адресът) и парола. Това му дава достъп до контролния панел на клиентския профил. През контролния панел на клиентския профил се управлява платеният домейн; може да се заявят други платени услуги (например хостинг); да се променят лични данни; да се извършват плащания и получават счетоводни документи; да се поиска техническа помощ и т.н.

1.7. Управляване на домейн

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

  1. Задаване кои са DNS сървърите, в зоната на които се намира домейна. (Извършва се през клиентския профил при регистратора на домейна)
  2. Редактиране на DNS записите за домейна. (Обикновено през клиентския профил при доставчика на хостинг)
  3. Редактиране на данните за контакт на собственика, администратора и техническото лице. (При регистратора на домейна)
  4. Трансфер на домейн - преместване на данните за домейна от един регистратор към друг. След трансфер, плащанията за абонамент се прехвърлят към новия регистратор. (През двата профила - при стария регистратор и при новия регистратор)

1.8. Хостинг

Регистрирането на домейн в системата за имена на домейни само осигурява едно съответствие между, регистрирания домейн и IP адрес на приложение сървър, което трябва да изпълнява заявките за ресурси в чиито URL-и се използва този домейн.

Следващият важен аспект при създаването на уебсайт е осигуряване на хардуер и софтуер, които приемат и изпълняват заявки от клиенти до съответния IP адрес. Хост (домакин) се нарича приложението сървър, което реагира на заявките към конкретен IP адрес. Услугата, състояща се в осигуряване на  хост за даден домейн от второ ниво се нарича хостинг. Хостингът е услуга, обикновено платена, извършвана от фирми и лица, които най-общо ще наричаме компании за хостинг.

Има няколко вида хостинг:

Споделен хостинг

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

Предлаганите безплатно хостинг услуги са от вида споделен хостинг. Регистриране за безплатен хостинг, може да се направи, например, през сайтовете: infinityfree.net (вижте указания), bul.net, zettahost.bg и др.

Хостинг в персонален виртуален сървър (VPS)

Виртуалните сървъри представляват файлове, които съхраняват информация, използвана от специален софтуер за виртуализация. Софтуерът за виртуализация по записаната в тези файлове информация имитира функционирането на свързани в Интернет отделни компютри. Под виртуален сървър, всъщност, се разбира именно такава имитация на компютър, който притежава: собствено дисково пространство, операционна система, процесор със зададен брой ядра, оперативна памет, съответен на операционната система, инсталиран от собственика софтуер за обслужване на пристигащи от клиентите заявки и т.н.

Колокация

Хардуерът и софтуерът, принадлежащи на различни собственици се намират в място, осигурено от доставчик на услугата. Всеки собственик осигурява сам обслужване на своя хардуер, а доставчикът на услугата гарантира непрекъсваемо захранване, постоянна връзка с Интернет и подходящи за хардуера атмосферни условия, физическа охрана и опазване.

Облачен хостин

При този вид хостинг организацията или човекът - клиент на доставчика на хостинг, ползва множество услуги, които са необходими за присъствие в Интернет, например: споделено хостване на интернет приложение, съхраняване на файлове, база данни и т.н. Всяка от тези услуги има определени измерими параметри: използван трафик, дисково пространство, сумарно време на ползване и т.н. Цената, която се заплаща на доставчика на облачния хостинг е пропорционална на реално използваните от клиента ресурси. Доставчици на такъв вид хостинг са големи, известни компании като: Google, Microsoft, Amazon, IBM и др.

Локален хостинг

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

Форма на локален хостинг имаме например, когато на своя компютър, разработчикът на нов сайт, стартира виртуален сървър или софтуерни сървъри, върху които тества всеки етап от работата си по новия сайт.

1.9. Връзка домейн-хостинг

Регистраторите на домейни имат задължението да поддържат в актуален вид информацията за всеки регистриран при тях домейн. Тази информация включва: имена, имейл адреси, телефони и др. на собственика, на техническото лице и на лицето за счетоводно обслужване; адресите на DNS сървърите, на които се намират записите на домейна; срокът, за който е ангажиран домейна от настоящия собственик и др.

Най-често DNS сървърите със записи относно даден домейн са собственост и се намират при доставчика на хостинг. Ето защо за да се настрои функционирането на един сайт е необходимо:

  1. при регистратора на домейна, да се посочат DNS сървърите на хостинг доставчика
  2. при хостинг доставчика да се укаже на сървърния софтуер, че той следва да обслужва заявките за съответния домейн.

Вижте как се прави това при регистриране на домейн в freenom.com и на хостинг в infinityfree.net.

1.10. Уебсайт

Уебсайт или просто сайт наричаме множество от хипертекстови документи (интернет страници), които имат общ домейн.

Уебсайтът представлява интелектуален продукт, обект е на интелектуална собственост. Сайтът е резултат от творческа дейност на един човек или на повече хора.

Създаването и поддържането на сайт се състои в упражняване на различни по същината си дейности:

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

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

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

Сайтът като цяло или отделни негови детайли имат конкретни автори и те разполагат с авторски права върху всеки детайл. Върху съдържанието на сайтовете в Интернет има авторски права! Това, в повечето случаи, означава, че копирането и разпространяването на това съдържание, без поискано разрешение от конкретния автор, освен за лична употреба е забранено.

Вижте повече в глава Задължителни изисквания.

Посочването на конкретно съдържание от конкретен сайт, чрез публикуване на хипервръзка, която води към това съдържание и сайт, например, в социалните мрежи или на други сайтове, не представлява копиране и е желано от авторите, защото това насочва повече хора към тяхното съдържание, прави ги известни, а това е целта на всяко присъствие в Интернет. 

1.11. Видове уебстраници и сайтове

Според поведението, което имат уебстраниците при показване в браузър ще различаваме следните видове:

  • Статични страници ще наричаме страници, които съдържат само неподвижен текст и изображения.
  • Активни страници ще наричаме страници, в които настъпват промени при различни действия на потребителя. Например: при преминаване на курсора на мишката над даден текст, се променя цвета на фона, сменя се някое изображение, появява се нова част от страницата, започва движение и т.н.; при щракване с мишката се случват други промени и прочее.
  • Динамични или интерактивни страници са тези, чието съдържание зависи от извършеното от потребителя на предишната страница. Например: в сайта на онлайн магазин на предишната страница потребителят е избрал няколко артикула, а на заредената след това страница се показват само тези артикули и общата им цена.

Най-просто е създаването на статични страници. За целта само се избира и сглобява тяхното съдържание. При тях не е необходимо програмиране.

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

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

2. HTML

Какво е HTML?

Уебстраниците са хипертекстови документи, т.е. документи, които съдържат хипертекст.

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

Съставянето и вмъкването на тази допълнителна информация сред обикновения текст, се извършва на език, наричан език за маркиране (отбелязване, на английски Markup Language).

Езикът за съставяне на хипертекстови документи се нарича хипертекстов език за маркиране (на английски HyperText Markup Language или съкратено HTML).

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

От своето създаване до сега HTML е претърпял многогодишно развитие и промени, преминал е през няколко версии, последната от които се означава като HTML5. В настоящия курс ще използваме именно тази, последна, прилагана в момента за създаване на нови сайтове, версия.

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

2.1. Основи на HTML

HTML е език за отбелязване, коя част от даден текст каква роля играе. За целта началото и края на всяка част, която трябва да се отдели за дадена роля, се отбелязват със специални маркери, наречени тагове.

Например, за отбелязване, че думите "Основи на HTML" са заглавие, пишем:

<h1>Основи на HTML</h1>

Тагът, който отбелязва началото се нарича отварящ таг (в примера <h1>), а този който отбелязва края на част от текст се нарича затварящ таг (в примера </h1>).

Част от хипертекстов документ, която започва с отварящ таг и завършва със съответния му затварящ таг се нарича елемент от този документ.

Елементите трябва да са вложени един в друг. Това означава, че когато един елемент започва във вътрешността (след отварящия таг) на друг елемент, той е вложен елемент и следва да свърши преди края на елемента, който го съдържа. Затварящ таг на вложения елемент трябва да се намира преди затварящия таг на съдържащия го елемент. Например:

<h1>Основи на <span>HTML</span></h1> - правилно

<h1>Основи на <span>HTML</h1></span> - неправилно

Всеки таг започва със знак < (по-малко) и завършва със знак > (по-голямо). Тази двойка знаци < >, понякога, се нарича ъглови скоби.

Отварящият таг и затварящият таг, който му съответства, имат еднакви имена. В примера името е h1.

Името на таг означава каква е ролята на елемента (текста, заграден с двойката от отварящ и затварящ таг). Името в отварящия таг се намира непосредствено след знака <. В затварящият таг пред името има знаци </.

В случая h1 е името на таг за главно заглавие. h2 е име на таг за подзаглавие. h3 - за под-подзаглавие и т.н. до h6. Частите от текста, отбелязани с тагове за заглавие се показват от браузъра с по-едър, получер шрифт, отделени с известно разстояние, отгоре и отдолу.

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

<p>Това е един абзац.</p>

<p>А това е друг абзац.</p>

Някои тагове, нямат нужда от затваряне. Това са тагове, който означават, че на тяхното място трябва да се вмъкне нещо. Например: <br> е таг за вмъкване на нов ред. Където срещне този таг браузърът прекъсва текущия ред букви и започва да изобразява следващите след този таг букви на нов ред.

Понякога тагове се затварят не чрез добавяне на отделен затварящ таг, а с добавяне на обратна наклонена черта преди знака >. Например:

вместо: <br></br> се пише: <br />

(Да се пише <br /> е задължително във версията на HTML означена като XHTML, но в HTML5 използваме просто <br>).

В отварящия таг, между ъгловите скоби, може да се вмъкнат атрибути, които дават на браузъра допълнителна информация. Например, в тага за хипервръзка с име a се вмъква атрибут, който съдържа URL-а, към който сочи хипервръзката. Например: хипервръзка с текст "Сат на ВСУ" се съставя така:

<a href="http://www.vsu.bg">Сайт на ВСУ</a>

Атрибутите имат имена и стойности. Името на атрибута се отделя от неговата стойност със знак =, а стойността се загражда в двойни кавички "". В примера, атрибутът за URL носи име href и има стойност http://www.vsu.bg.

Текстът, предназначен за четене от хората преглеждащи дадена страница, с вмъкнатите в него HTML тагове се нарича HTML код на тази страница. Сървърът изпраща като отговор на заявките от браузърите именно HTML код. Този код може да е приготвен предварително, да се съхранява във файлове (html файлове) и работата на сървъра да се състои само в изпращане на съдържанието на тези файлове (когато имаме статични страници), но HTML код може да се генерира и в момента на изпращане (при динамичните страници).

Още тагове вижте на страница: Основни тагове, или на английски: по-дълъг списък тагове, и списък атрибути.

Още за HTML, може да научите от страница Основи на HTML

Специфичното за HTML5 - в учебника HTML5 Introduction (на английски)

Формалната, публикувана от консорциума W3C спецификация: HTML 5.2.

2.2. Писане на HTML

Статични уебстраници се създават, като техният HTML код се пише предварително и се запазва в текстови файлове, които се качват във файловата система на сървър. Обикновено тези файлове имат разширение .html или .htm.

За писане на HTML код може да се използват, най-простите редактори за текст, които не използват форматиране на текста. В операционната система Windows, такива редактори са Notepad и WordPad, които са част от операционната система и са налични на всеки компютър с Windows.

Съществуват и редактори, предназначени специално за писане на HTML код, които имат специфични функции улесняващи, създаването на такъв код. За целите на този курс препоръчваме работната среда за създаване на приложения за интернет Aptana Studio 3. Важна първоначална информация за този продукт може да намерите на страница Aptana Studio 3.

За по-бързо отваряне и нанасяне на промени в текстови файлове удобен за операционна система Windows е и редакторът Noteped++. Студентите, желаещите да се запознаят и с този редактор, може да си инсталират и него.

2.3. Стартиране създаването на сайт с Aptana Studio 3

Изпълняването на тези указания е възможно след изтагляне и инсталиране на Aptana Sudio 3. Хипервръзки към сайтовете за изтегляне ще намерите на страница Необходим софтуер и документация.

  1. Стартираме Aptana Studio 3


  2. Щракваме върху командата за стартиране на нов Web Project:


  3. Избираме Basic Web Template и щракваме бутон Next.



  4. Попълваме име на проекта, например, FirstSite и щракваме бутон Finish


  5. Щракваме двойно върху името на новия проект, за да се видят неговите файлове.


  6. Щракваме двойно върху името на файл index.html за да го отворим


  7. Копираме от тук следния HTML код:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

  1. В прозореца с HTML кода на файл index.html селектираме целия код с Ctrl+A и на негово място поставяме с Ctrl+V копирания код.

  2. Щракваме бутон Run As, за да видим резултата в браузър.


  3. Ако преди това не сме запазили файла, щракваме Save в прозореца, който се показва


  4. Показва са прозореца на FireFox със отворена в него страница.

2.4. Улеснения при работа с Aptana Studio

Aptana Studio 3 има редица функции, които улесняват работата с HTML код:

При спиране на курсора над някоя част от html таг се показва информация за тази част:

При натисване на знак < с цел започване писането на нов таг се показва списък на възможните тагове:

След изписване на 1-2 букви, в този списък остават да се показват само имената на възможни тагове, започващи с тези букви:

Когато с мишката се щракне върху име на таг от списъка, вдясно се показва информация за ролята на таговете с такова име.

Двойното щракване с мишката върху име на таг дописва цялото име.

Натискането на клавиш Enter дописва не само името избрано от списъка, а вмъква автоматично и затварящ таг. Например:

Ако все още нещо липсва в така съставената двойка от отварящ и затварящ таг, пред номера на реда се показва удивителен знак.

При въвеждане на интервал след името на таг се появява списък на възможните имена на атрибути:

Натискането на клавиш Enter, след като от списъка е избрано име на атрибут, дописва името на атрибута, знак = и две кавички, между които се очаква да бъде написана стойността на атрибута.

За завършване на HTML кода на хипервръзката от примера, остава да се допише или постави с copy-paste адресат, към който сочи хипервръзката и текстът, който ще се вижда като хипервръзка. Например:

Когато отварящият таг започва на един ред, а съответният му затварящ таг се намира на друг ред. Пред номера на реда с отварящия таг има знак - (минус).

Ролята на този знак е да позволи "сгъване" на HTML кода, заграден между отварящия и затварящия тагове. Щракването на знака минус предизвиква скриване на редове, например така:

Щракването върху знака + в останалият, нескрит, първи ред извършва обратно "разгъване" и показване на всички редове. 

Посоченото "сгъване"-"разгъване" е полезно при работа с големи и сложни html документи.

2.5. Преглеждане на HTML кода

В Aptana Studio като браузър за демонстриране на създаваните сайтове се използва FireFox. Ето защо на компютъра, на който инсталираме Aptana Studio е добре предварително да има инсталиран браузър FireFox.

Във FireFox може да се разгледа HTML кода на цялата страница или на селектирана част от страница. Ако с щракване на десния бутон на мишката се избере команда Viеw Page Source се показва HTML кода на цялата страница. Ако с влачене на мишката селектираме чест от страница, то при щракване с десния бутон на мишката и избиране на команда View Selection Source се показва HTML кода само на селектираната част от страницата.

HTML кодът, който се показва от браузъра с тези команди, може да се различава от реално пристигналия в браузъра HTML код, защото браузърите  правят свое "тълкуване" и преподреждане на получения код. Това е една от причините да се налага да преглеждаме HTML кода, който пишем и в браузър.

Друг повод за разглеждане на HTML кода в браузър е да научим как чрез HTML е направена някоя част от страница, която разглеждаме. Това ще ни подскаже идеи, как и ние да пишем своя код.

Версиите на съвременните браузъри за настолни и преносими компютри включват специални инструменти, предназначени за разработващите уебсайтове. Във FireFox това са инструментите от подменю Web Developer. Ще разгледаме някои от тези инструменти, когато възникне повод да ги използваме.

2.6. Валидиране на HTML код

Валидиране на HTML кода се нарича проверяването на този код за наличие на грешки, допуснати при писане на HTML таговете. (Това не включва правописна проверка!) Валидиране се извършва от специален софтуер нарачен HTML валидатор (HTML  Validator).

Съществуват валидатори, работещи върху уебсървъри, които наричаме онлайн валидатори. Например, валидаторите с домейни: validator.w3.org, validator.nu и др.

С такива валидатори може да се провери HTML кода на всяка, публикувана вече в Интернет страница, но не можем да проверяваме файлове намиращи се на локален компютър.

За проверяване на кода на локални файлове, може да се използва, например, валидатор, добавка към FireFox. Инсталирането на добавката се извършва ако страницата й в Интернет се отвори с FireFox и се щракне бутона "Добавяне към FireFox". След инсталиране, в прозореца на FireFox се показва бутон: , който обикновено е оцветен в сиво и това означава, че е неактивен и не се извършва валидиране. За да се валидира кода на отворената във FireFox страница трябва да се отвори прозореца на инструментите за разработване, което става с клавишна комбинация Ctrl+Sift+I или с команда от менюто: Web Developer - Toggle Tools и после да се щракне върху инструмента HTML validator. Резултатът от проверката се вижда в този прозорец.

Този валидатор по подразбиране проверява правилността на кода според изискванията на версия 4.01 на HTML, но ако написания код е HTML5 съобщенията за грешки може да са фалшиви. Тогава трябва да се щракне бутона "w3c Online", което ще изпрати HTML кода за проверка към онлайн валидатора. Онлайн валидаторът автоматично разпознава използваната версия HTML и показва резултат и за HTML5.

3. Транспорт на файлове (FTP)

Стартирайки създаването на уебсайт, ние създаваме структура от директории и файлове, съдържащи ресурсите за този сайт. - Когато се създават статични страници, HTML кодът на тези страници се съхранява в .html файлове. Във файлове с разширения, като .jpg, .png, .pdf и други, запазваме изображения и документи, които също сме решили да направим достъпни на сайта.

Разглеждането на .html файлове, с цел да се види как ще изглеждат като страници става чрез отваряне на съответния .html файл с браузър.

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

Пренасянето на файлове между файловите системи на две, свързани в Интернет устройства се извършва най-често според протокола за транспорт на файлове (File Transport Protocol - FTP) с помощта на приложения за осъществяване на този транспорт, които се наричат FTP клиенти.

В настоящият курс ще използваме FTP клиентът FileZilla FTP Client.

След изтегляне, инсталиране и стартиране на това приложение виждаме главния му прозорец, който е разделен на две половини: лявата половина представя файловата система на нашия компютър, а дясната - файловата система на друг компютър, на който има сървър за транспорт на файлове (FTP сървър).

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

URL или IP адрес на сървъра
номер на използвания порт
потребителско име и
парола

Комбинацията от потребителско име и парола идентифицира FTP потребител. Всеки FTP потребител има достъп до определена директория от файловата система на FTP сървъра, има делегирани права и др. настройки. Администраторът на хостинга има възможност да създава нови и да изтрива FTP потребители, както и да променя настройките.

За да не се налага многократно въвеждане на данните за връзка с FTP сървърите, във FileZilla Client е предвидено създаване на директории с данните на сървърите, с които влизаме във връзка. Прозорец със запазените данни (Site Manager) се отваря при щракване на бутона:

За въвеждане на данни за нов FTP сървър се щраква бутона:

В прозорчето, което се отваря се попълва име на данните за достъп. Добра идея е това име да съвпада с домейна на сайта.

Данните за достъп, които трябва да са съвсем точни се попълват в полетата вдясно на прозореца Site Manager:

Друга настройка, която ще ускори работата ни с дадения сървър, е да щракнем подстраница Advanced и да зададем с щракване на бутона Browse... директорията от нашия компютър, на която съхраняваме файловете от сървъра (Default local directory) и директорията на сървъра, в която най-често се налага да качваме и изтегляме файлове (Default remote directory).

Щракването на бутона Connect стартира опит за осъществяването на връзка между нашия компютър и FTP сървъра.

Преди осъществяване на връзка, се показва запитване, дали искате паролата да се запази. Нормално е да я запазите, но ако до FileZilla на компютъра ще имат достъп и други хора, които не искате да стигат до файловата система на сайта, може да отмените запазването и да я въвеждате на ръка преди всяко свързване със сървъра.

При опита за осъществяване на връзка може да се покаже съобщение относно валидността на сертификата за шифроване:

В този прозорец се поставя отметката Allways trust certificate in future sessions, за да се прескача показването на този прозорец при следващи свързвания с FTP сървъра.

След осъществяване на връзката в дясната половина на прозореца на FileZilla се показва файловата система на FTP сървъра - директориите и файловете на сървъра.

Най-честите действия, които изпълняваме с FiliZilla са:

качване (upload) на избрани файлове от нашия компютър на FTP сървъра и

изтегляне (download) на избрани файлове от сървъра на нашия компютър.

Файлове и директории се избират от съответния прозорец с щракване на мишката и използване на комбинации Shift+click и Ctrl+click за добавяне към избраните на още файлове и директории. След това с щракване на десен бутон на мишката се избира съответна команда upload от нашия компютър към сървъра или download от сървъра към нашия компютър.

4. CSS

Езикът за маркиране HTML служи за отбелязване на ролята на отделните части на един  хипертекстов документ (уебстраница) и не дава информация за форматирането на тези части.

Предвидено е информацията за форматиране, което означава: как се подреждат частите текст, с какъв шрифт, цвят и размери на буквите, сенки, рамки, анимация и др. ефекти да се описват с помощта на друг език, означаван със съкращението CSS (Cascading Style Sheets - каскадни стилови листове).

CSS се състои от декларации за стойностите на свойствата на елементите. Тези свойства се отнасят до начина на изобразяването им. Например: декларациите:

width:200px; height:100px;

определят, че размерите на елемента, за който се отнасят, са ширина - 200 пиксела и височина - 100 пиксела.

Декларациите се състоят от две части: име на свойство и стойност на свойството, разделени с двоеточие. Всяка декларация завършва с точка и запетая.

Декларации може да се намират на три различни места:

1. В атрибута style, в HTML тага на елемента

Пример:

<p style="color:red;">Абзац с червен такст</p>

2. Между тагове <style></style> на HTML кода на страницата

Пример:

<style>
h1 { font-size: 15pt; }
</style>

В този случай декларациите се поставят в CSS правила. Едно CSS правило се състои от селектор и заградени в скоби { } декларации. Селекторът определя за кои елементи от документа се отнасят поставените в скоби след него декларации. В примера селекторът е име на таг h1. (Таговете с такива имена, вече знаем, отбелязват заглавието на документа.) Следователно, правилото от примера задава, заглавието на документа да се изобразява от браузърите с размер на шрифта (свойство font-size) 15 точки.

С използването на правила, поставени между тагове <style></style>, се избягва многократното писане на едни и същи декларации. Така писането на html код става по-бързо и много по лесно се правят промени, засягащи много елементи от документа, а и самия html е по-кратък, лесен за четене и разбиране.

3. В отделен файл

CSS правила може да се напишат и запазят в отделен файл, тогава в html кода на страницата, към която искаме да се приложат тези правила, посочваме адреса на този файл с помощта на таг с име link, който се поставя в служебната заглавна част на документа, заградена с тагове <head></head>, например:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Тагът с име link има атрибути с имена: 

rel - означава какво е отношението на посочения файл към текущия документ, в случай стойността "stylesheet" означава, че се явява списък от приложими CSS правила

type - формат на съдържанието на файла, в примера "text/css" означава текстов формат, съдържа CSS правила

href - URL на файла.

Използването на CSS правила от отделни файлове позволява едни и същи правила да се използват на много от страницата на сайта. Така се спестява работата по писане на тези правила във всяка страница, а и прави възможно чрез промяна  на тези правила да се променя външния вид на много или на всички страници на сайта.

Вижте:  CSS - статия в bg.wikipedia.org, CSS Tutorial

4.1. Инспектиране и експериментиране с HTML елементите

Браузърите могат да покажат какви CSS декларации и правилата са приложени на всеки елемент, който те изобразяват. За целта върху даден елемент от уебстраница трябва да се щракне десния бутон на мишката и да се избере команда Inspect Element.

Показва се прозорецът с инструменти за разработка на сайтове, който се състои от три части.

В лявата част се показва HTML кода на страницата, като тагът на щракнатия елемент е оцветен (селектиран).

В средната част се показват CSS правилата, приложени върху селектирания елемент.

В дясната част се показват стойностите на различни свойства на елемента, установили се в следствие на прилагането на правилата.

При преминаване на курсора на мишката над таговете на даден елемент в лавата част, в прозореца със страницата, около елемента се визуализират трите рамки на кутиения модел. Показват се също и размерите в пиксели.

При щракване върху таг в лявата част, в средната и дясната части се показват съответно правилата, приложени над този елемент, и стойностите им.

И в трите части на прозореца с инструменти за разработка може да се редактира, като направените промени се виждат веднага в страницата.

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

4.2. Кутиен модел (Box model)

Кутиен модел (Box model) се нарича основна идея в CSS която означава, че когато софтуерът извършва подреждане на елементите на една страница, за всеки елемент заделя някакво пространство с форма на правоъгълник (кутия) и след това подрежда тези кутии от ляво надясно. Правоъгълникът, за който вече няма място на започнатия ред се поставя на следващ ред и т.н. Този процес на подреждане на английски се нарича render.

Кутиите на някои елементи имат ширина колкото да поместят съдържанието им, тези елементи се наричат вътрередови или inline елементи. Такива елементи се поставят вдясно от предхождащия ги елемент или се пренасят на нов ред, ако не се вместват в оставащото до края на реда място.

Кутиите на други елементи пък винаги получават ширина, колкото е ширината на елемента, в който са поставени и се подреждат една под друга. Тези елементи се наричат блокове или block елементи.

Таговете с едни имена по подразбиране са inline елементи (a, img, span), а други по подразбиране са block елементи (h1, ... h6, p, div), но типът на елемента може и да се зададе изрично с CSS деклараците display:inline; и display:block; съответно.

Кутиения модел предполага и съществуването на три рамки около правоъгълното пространство заето от всеки елемент, всяка със своя ширина.

След първоначалното определяне на правоъгълника, в който трябва да се вмести даден елемент, той се поставя навътре в този правоъгълник на разстояние, което се нарича вътрешно отстояние или padding. Около заделения за елемента правоъгълник може да се очертае рамка или border, а около тази рамка следва пространство, в което не трябва да попадат други елементи, наречено външно отстояние или margin. Ширините на тези рамки може да бъдат различни за всяка от страните, тогава към името на съответното разстояние се добавя и посоката, например: patting-left, padding-top, border-right, margin-bottom и т.н. във всички възможни съчетания на padding, border, margin и top, right, bottom, left.

4.3. CSS селектори

Селекторите в CSS служат да дадат информация на браузъра, за кои елементи е предназначено правилото, следващо след селектора.

Селектори се използват само за декларациите, които се поставят между тагове <style></style> или в отделни файлове. За декларациите, намиращи се в стойностите на атрибута style на елементите, селектори не са необходими, защото тези декларации е ясно, че трябва да се приложат само върху съответния елемент.

Селектор по име на таг

Този селектор съвпада с име на таг. Например:

body { background-color: yellow; }
p { text-align: justify; }

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

Селектор по клас

Клас е понятие от HTML. Клас е група от елементи. Принадлежността на даден елемент към някой клас се посочва с атрибута с име class. Например:

<h1 class="a">Заглавие от клас "a"</h1>

<p class="a">Абзац от клас "a".</p>

<p class="b">Абзац от клас "b".</p>

<p class="a b">Абзац, който попада и в клас "a", и в клас "b".</p>

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

.a { border: solid 1px; }
h1.a { border-width: 2px; }
.b { border-radius: 5px; }

В този пример: първото правило налага всички елементи от клас a да имат рамка с дебелина 1 пиксел; второто - всички заглавия h1 от клас a да имат дебелина на рамката от 2 пиксела; а третото - всички елементи от клас b да имат заоблени ъгли с радиус 5 пиксела.

Селектор по идентификатор

Идентификаторът е атрибут с име id, който се поставя на определени елементи. Целта е съответният елемент да се идентифицира единствено по стойността на своя идентификатор. Правилно е в HTML кода на една страница стойностите на идентификаторите да не се повтарят. (Всеки идентификатор да е уникален!). Имената на идентификаторите се измислят от автора на HTML кода. Пример:

<p id="important">Абзац с идентификатор.</p>

Абзацът в примера има идентификатор important. За да се приложи CSS правило към елемента, носещ съответния идентификатор се използва селектор, който съдържа знак #, следван от стойността на идентификатора. Пример:

#important { text-weight:bold; color:red; }

Това правило ще направи абзаца текст с идентификатор important да се изобрази с получер шрифт в червен цвят.

Справочник на селекторите вижте в: CSS Selector Reference

5. JavaScript

JavaScript е език за програмиране. (Не го бъркайте с езика Java!)

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

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

Редове програмен код на езика JavaScript може да се вмъкват в HTML кода, по три начина:

1. В рамките на стойността на атрибут, на HTML таг

Съществуват атрибути на html таговете, предвидени да указват какви действия да се извършат над съответния елемент при определени събития. Събитията са неща които може да се случат или не по време на зареждането или разглеждането на уебстраница. Всяко събитие носи определено име, започващо с представката on. Примери за имена на събития:

onload - събитие, което настъпва щом приключи зареждането на страницата,
onchange - настъпване на промяна в съдържанието на поле за попълване,
onclick - случва се, когато потребителят щраква с мишката (докосва с пръст върху чувствителен на допир екран) елемента,
onmouseover - курсорът на мишката навлиза в рамките на елемента,
onmouseout - курсорът на мишката напуска рамките на елемента,
onkeydown - потребителят е натиснал клавиш от клавиатурата.

Имената на събитията се използват като имена на атрибути, които се вмъкнат в отварящия таг на елемента. Стойностите на тези атрибути са програмен код на Javascript, който описва какво да се изпълни от браузъра при съответното събитие.

Пример за вмъкване на JavaScript, в атрибута на елемент:

<p onmouseover="this.style.color='red';" onmouseout="this.style.color='green';">Този абзац става червен при навлизане на курсора в него и зелен - при напускане.</p>

2. В рамките на таг <script></script>

В рамките на стойността на атрибут не е удобно да се пише дълъг програмен код, ето защо е предвиден специален HTML таг, в който може да се направи това. Изнасянето на по-дълъг код извън атрибутите на таговете, освен че създава удобство, позволява един и същи код да се изпълнява при събития настъпващи в различни елементи. Пример, при който с помощта на таг <script> се постига поведение като в предишния пример в два абзаца текст:

<script>
function redColor(a){
a.style.color="red";
}
function greenColor(a){
a.style.color="green";
}
</script>

<p onmouseover="redColor(this);" onmouseout="greenColor(this);">Абзац 1<p>

<ponmouseover="redColor(this);" onmouseout="greenColor(this);">Абзац 2<p>

3. В отделни файлове

Скриптов програмен код може да се предостави за изпълняване в различни страници на сайта, като се запази в отделен файл и в HTML кода на страниците се вмъква таг с име script, който посочва този файл. Например:

<script src="myScript.js"></script>

Атрибутът с име src на този тага с име script, посочва URL-а на файла, съдържащ програмен код на език JavaScript.

 

Вижте повече в: JavaScript Tutorial

6. Отзивчив и адаптивен дизайн

Разглеждането на уебстраници в днешни дни става през голямо разнообразие от устройства, имащи различни размери и резолюция на екраните. Това поставя пред дизайнерите на уебстраници задача да направят така, че дадена страница да изглежда добре и да се ползва удобно на всяко от тези устройства.

Дизайн, който е един за всички устройства, но направен така, че страниците да изглежда различно върху различни по размер екрани, т.е. да се приспособяват чрез скриване на част от съдържанието, размествания и промяна на размерите на детайлите, се нарича отзивчив дизайн (на английски.- Responsive Web Design RWD).

Адаптивният дизайн (на английски - Adaptive Web Design - AWD) е вид уеб дизайн, който се променя автоматично и е различен за устройствата с различни размери на екрана.

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

Вижте: Firefox Responsive Design Mode

Съществуват и онлайн тестове, за проверка доколко дадена страница е удобна за ползване на мобилни устройства, например:  Mobile Friendly Test

7. Потребителско изживяване

Посещаването и преглеждането на една уебстраница е вид преживяване за посетителя. Това преживяване включва: рационална оценка на съдържанието по отношение на неговата полезност, пълнота и съответствие с целта на посетителя; емоции: радост или тъга, възторг или яд и др.; естетическа оценка: красиво-грозно, оригинално-банално и пр.

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

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

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

Потребителско изживяване - статия в bg.wikipedia.org

8. Задължителни изисквания

Към всеки сайт има редица изисквания, които е задължително да се спазват от създателите на сайта:

1. Спазване на законите

на страната, в която е създаден, както и на страните, от които има достъп до този сайт. Това означава, сайтът да не се използва за забранени от законите (криминални) дейности.

Има законови изисквания, които силно засягат Интернет като: защита на авторските права, защита на личните данни и защита на потребителите

Авторски права

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

Има случаи, когато авторите на някои материали сами са разрешили, публикуваните от тях материали да се копират и използват без да се иска тяхното разрешение. Това се разбира от оставена от автора бележка относно авторските права.

Добре е на всеки сайт да има специална страница, посветена на въпроса с авторските права. До тази страница трябва да може да се стига лесно и бързо. Хипервръзка към към тази страница е добре да има от всяка друга страница на сайта. На тази страница трябва да е представена информация относно желанието на авторите на сайта за спазване на авторското им право. Типични примери за такива страници: canon.bgbotanica.gallerypublications.europa.eu.

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

Защите на личните данни

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

В тази връзка, при използване на "бисквитки", следва да се обяви това и да се поиска съгласието на посетителя.

Защита на потребителите

Изискванията на законите за защита на потребителите засяга преди всичко сайтове, предназначени за електронна търговия.

2. Изисквания за достъпност

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

3. Изисквания за информационна сигурност

Информационна сигурност или сигурност на информацията в Интернет на практика означава, че представяната на даден сайт информация може да се публикува, обработва и променя само по предвидените от създателите на сайта начини. Това означава, че достъп до инструментите за публикуване и редактиране имат само определени от тях лица и тези лица имат възможности да извършват само предварително предвидени действия. (Вижте в bg.wikipedia Информационна сигурност)

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

За постигане на сигурност на информацията достъп до инструментите за публикуване и редактиране на съдържание се получава само след удостоверяване (автентикация Autetication) на лицето, което ще използва тези инструменти. Удостоверяването е процес на сигурно идентифициране на лецето получаващо достъп (удостоверяване, че това е точно лицето на когото е дадено право да публикува и редактира).

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

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

9. Оптимизиране за търсачки

За разрастването на мрежата Уеб и превръщането и в полезен, масово използван източник на информация голяма роля са изиграли търсещи машини, популярно наричани търсачки.

Търсещите машини, използват специален софтуерни приложения, наречени уебпаяци или ботове. Този софтуер проверява съдържащите се във всяка уебстраница текстове и извършва индексиране на страниците. Индексирането означава попълване на голяма база данни с информация, коя дума на коя страница в Интернет се среща. Тази информация позволява на търсачката, при заявки за търсене на посочени от потребителите думи, търсачката да върне като отговор адресите на страници, в които се срещат тези думи.

Друго действие на ботовете е да намерят всички хипервръзки, които се срещат във всяка страница и по тях да стигнат до други страници, които също да индексират. Така те стигат до всички страници в Уеб, към които има хипервръзки, в други, вече индексирани страници.

Всяка търсачка има уебсайт, в който потребителите попълват думи, отнасящи се до информацията, която искат да открият и виждат резултатите, които търсачката им връща. Такива сайтове са: google.bg, bing.com, yahoo.com, yandex.ru и още много други.

Услугите на търсачки се ползват и без да се посещава специално такъв сайт. Съвременните браузъри се обръщат към търсачки автоматично, когато в адресното им поле потребителят напише обикновени думи вместо URL.

Всеки собственик на уебсайт би искал неговия сайт да се показва на първите места в резултатите, които търсачките показват. Тогава сайтът е откриваем от посетителите и щраквайки върху хипервръзката, показвана от търсачката, посетителите стигат до него.

Правенето на един сайт по такъв начин, че той да е откриваем от търсачките е специализирана дейност която се нарича оптимизиране за търсачки (или на английски search engine optimization, SEO)

Без дълбоко навлизане в областта на оптимизирането за търсачки, нека да посочим, че минималното условие за откриването на даден сайт от търсачките е към този сайт да има хипервръзки в други, известни вече на търсачките сайтове. Такива сайтове са, например, така наречените сайтове директории. Вижте Списък с важни БГ уеб директории за добавяне на сайтове Необходима стъпка е подаването на информация за всеки нов сайт в достатъчно на брой, директории с висок рейтинг.

Вместо това може да се използват инструментите за създатели на сайтове на различните търсачки: search.google.com/search-console, bing.com/toolbox/webmaster, webmaster.yandex.com и т.н.

Вижте:  Оптимизация за търсачки - статия в bg.wikipedia.org

10. Уебсървър и сървърен софтуер

Уебсървър наричаме софтуерно приложение, което приема и отговаря на заявките, за ресурси, съответстващи на URL-и. Най-известни такива приложения са: Apache, IIS (Internet Information Services), nginx и др.

При съставянето на отговора, който трябва да се изпрати на клиента (браузъра), в динамичните уебсайтове може да участва и друг софтуер, написан специално за нуждите на конкретния сайт. Ще наричаме този софтуер сървърен софтуер. Този софтуер може да бъде изключително разнообразен по отношение на езика за програмиране, на който е написан; по отношение на начина на изпълнение и формата, в която се съхранява от операционната система на машината, в която се изпълнява; по отношение на задачите, които решава на дадения сайт.

Когато към уебсървъра, постъпи заявка за URL на статичен ресурс, съхраняван като готов файл, уебсървърът прочита този файл и изпраща неговото съдържание на клиента без друга обработка.

Когато заявката е за динамично съдържание, сървърът препраща заявката на друг софтуер, предназначен да генерира това съдържание, получава отговора на този софтуер и го препраща на клиента.

Съществуват два начина за генериране на HTML код, който да се изпрати като отговор: 1. използване на общ интерфейс за шлюз (Common Gateway Interface - CGI) и 2. вмъкване на скриптов език във файлове с HTML код.

При използване на CGI, заявката се препраща от уебсървъра на друг софтуер. Този софтуер може да бъде написан на всеки език за програмиране (С, Perl, Python и др.). Той трябва изцяло да извърши анализ на заявката и да генерира HTML код за отговор съгласно правилата на HTTP протокола. Обикновено изпълнимите файлове с такъв софтуер се намират в предназначена за целта директория, най-често с име: cgi-bin. Името на тази директория и пътя до конкретното приложение са част от поискания URL.

Има езици за програмиране (JavaScript, PHP, VBScript, Java), при които програмния код може да се вмъква във файловете, съдържащи HTML код. На файловете с HTML код се слагат разширения на имената, съответстващи на езика на вмъкнатия в тях скриптов програмен код. Например: при език PHP - разширението е .php, при VBScript - .asp, при Java - .jsp. Уебсървърът изпраща такива файлове за обработка от софтуер, интерпретатор на съответния език за програмиране, а интерпретаторът открива вмъкнатия програмен код, изпълнява го и замества на съответните места програмния код с резултата от неговото изпълнение. Получилият се в резултат на това замесване HTML код се връща на уебсървъра, който го препраща като отговор на клиента.

11. Инсталиране и настройване на локален сървър

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

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

Такъв пакет, който съдържа уеб сървър Apache, интерпретатор на PHP и Perl, сървър за база данни MySQL, и FTP сървър е XAMPP. Този пакет ще използваме в нашия курс.

Указания

Ще изтеглим и инсталираме преносима (portable) версия на XAMPP, в следните стъпки:

Изтегляне

1. На страницата за изтегляне https://www.apachefriends.org/download.html, щракваме хипервръзката "More Downloads".

2. На страницата, която се отваря, щракваме върху хипервръзката "XAMPP Windows".

3. На следващата страница щракваме върху хипервръзката с най-високата налична версия.

4. От предоставените за изтегляне файлове щракваме върху xampp-portable...x64...zip и изтегляме файла.

Инсталиране

5. Отваряме папката, в която е запазен изтегления файл и с щракване на десния бутон на мишката върху името му избираме Extract All...

6. С щракване на бутон Browse избираме устройство C:, щракваме бутон Extract и изчакваме разархивирането да завърши.

Стартиране

7. Отваряме папка C:\xampp и с двойно щракване на мишката стартираме програмата за управление на сървърите xampp-control.exe

8. При показване на съобщение от Windows Defender, щракваме върху надписа More Info.

9. Щракваме бутона Run Anyway.

10.  Избираме езика, на който ще ползваме програмата за управление и щракваме Save.

11.  В прозореца на програмата за управление щракваме бутон Start срещу надписа Apache.

12. Ако се покаже съобщение, че липсва библиотека VCRuntime140.dll, изтеглете и инсталирайте Microsoft Visual C++ 2015 Redistributable (Виже на страница )

13. При успешно стартиране на Apache, надписът в прозореца на програмата за управление се оцветява в зелено, а надписът върху бутона се променя на Stop.

14. При първото стартиране се показва съобщение от защитната стена на Windows, в което щракваме бутон Allow Access. При следващи стартирания на Apache това съобщения няма да се показва повече.

Изпробване

В браузър отваряме адрес http://localhost и се показва главната страница на работещия вече на нашия компютър интернет сървър.

12. Програмиране на PHP

Файловете, които съдържат програмен код на PHP обикновено имат разширение .php. Тези файлове могат да съдържат или само програмен код на PHP, или HTML код, в който на различни места са вмъкнати участъци с PHP програмен код.

Пример за второто:

<h1>Страница с информация за PHP</h1>

<?php phpinfo(); ?>

В този пример имаме заглавие, което е HTML код и участък заграден от знаците <?php и ?>. Този участък именно съдържа програмен код на PHP. В случая - функцията phpinfo(); която показва подробна информация за интерпретатора на PHP на сървъра.

Статичен сайт, състоящ се от хипертекстови документи с разширения .html, може бъро да се превърне в динамичен, базиран на PHP сайт, като първо съмо се преименуват всички файлове - разширението .html се променя на .php и след това се пристъпи към вмъкване на програмен код в някои от файловете.

Срещан проблем при създаването на статични сайтове, изискващ намиране на решение, е необходимоста един и същи html код да се повтаря в много от страниците на сайта. Например: частта от страниците, която предоставя хипервръзки към група от страници, често наричана меню на групата от страници, може да се повтаря на всяка страница от тази група. Ако всяка страница е направена в отделен html файл, то html кодът, представящ навигацията, се повтаря във всеки файл и при възникване на необходимост от корекции в тази навикация се налага отваряне и повтаряне на промените във всички файлове, което изисква работа и отнема време. Повтарянето на едни и същи промени в много файлове може да се избегне, ако повтарящият се html код се постави в отделен файл и съдържанието на този файл се прочита и вмаква, където е необходимо. С използване на php програмен код, този проблем намира лесно решение. Повтарящият се html код се запазва в отделен файл и във всечки файлове, в които трябва да се показва същия код се вмъква:

<?php include 'fileName.php'; ?> 

или само include 'fileName.php'; ако файлът съдържа само програмен код. Естествено, fileName.php трябва да е името на файла, чието съдържание трябва да се вмъкне на това място.

include, include_once, require и require_once са команди от езика за програмиране PHP предназначени за вмъкване и изпълняване на програмен код от други файлове. Разликите в действието на тези команди са, че при командите, съдържащи думата include, ако възникне грешка при вмъкването или изпълняването на програмния код от външния файл, изпълнението на php код се прекратява. Казва се, че грешките се третират като фатални грешки. При командите, съдържащи думата require, в случай на грешка, изпълнението не се прекратява, а продължава с опити да се изпълни следващият по-нататък програмен код. Казва се, че в този случай грешките не се третират като фатални. Думата once означава, че ако кумандата за вмъкване на дадения файл се срещтне и на други места, вмъкването ще се извърши само веднъж, при първото срещане на командата. 

Повече за основите на програмирането на PHP, може да научите от онлайн учебника PHP 7 Tutorial

Справки и пълна информация за различни функции може да намерите в официалната документация PHP Manual

13. Средства за улесняване създаването на сайтове

Диркетното писане на HTML код, CSS правила, програмен код на Javascript, PHP или друг език за програмиране, с цел постигане на желаното съдържание и външен вид на страниците на един сайт е продължителен и трудоемък процес. Този процес може значително да се ускори, ако се използват вече съществуващи, публикувани, свободни за ползване разработки.

Това могат да бъдат:

  • HTML шаблони (HTML templates)
  • CSS рамки за разработка (CSS frameworks)
  • Javascript библиотеки (Javascript libraries)
  • PHP библиотеки и рамки за разработка (PHP libraries, PHP Frameworks)
  • Библиотеки и рамки за други езици за програмиране (Java, Perl, Python)
  • Системи за управление на съдържанието (Content Management Systems - CMS)
  • Онлайн информационни системи за специализирано съдържание (например Moodle - за учебни курсове)
  • Комплексни облачни услуги - "строители" за сайтове (website builders, например: edX, mobirise)

Ще се разгледаме накратко всеки от тези видове разработки.

13.1. Безплатни HTML шаблони

HTML шаблоните са колекции от файлове, съдържащи html код, css и javascript, които представляват няколко примерни страници за сайт. Чрез редактиране на файловете и създаване на още подобни на тях, тези страници могат да се приспособят и използват за други сайтове.

Чрез търсене в Иинтернет с думите "download free html templates" лесно се откриват сайтове, от които може да се изтеглят безплатни шаблони.

13.2. CSS рамки за разработка

CSS рамки за разработка (технологични рамки) са колекции от файлове, съдържащи CSS правила за форматиране на HTML елементи. Използването им спестява писането на такива правила и улеснява постигането на отзивчив външен вид на елементите на страниците. Освен CSS правила, за постигане на някои динамични ефекти, в CSS рамките може да се използва и javascript.

Информация за CSS рамки може да се намери в Интернет с търсене на думите CSS frameworks.

Една от лесните за използване CSS рамки е 3W.CSS, за ползването на която има публикуван учебник W3.CSS Tutorial. Тази рамка се състои от един файл, с URL https://www.w3schools.com/w3css/4/w3.css. Може да се използва само чрез посочване на този адрес или чрез изтегляне и поставяне на този файл на нашия сайт. Във всеки HTML файл, в който искаме да използваме 3w.css, в първия случай, поставяме:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

а във втория случай:

<link rel="stylesheet" href="w3.css">

(Да припомним, че мястото не тези тагове е между <head> и </head> таговете на документа.)

Използването на 3w.css се свежда до задаване в стойността на атрибута class на различни html елементи принадлежност към съответен клас, за който клас е зададено някакво правило за форматиране. Класовете и особеностите на форматирането им са описани в справочника за w3.css W3.CSS Reference.

Например: посочването на клас w3-circle към изображение, прави това изображение да се изреже под формата на елипса.

<img class="w3-circle" src="meeting.jpg" alt="meeting">

13.3. Библиотеки за JavaScript

Ако на даден сайт се използва значително количество програмен код на езика JavaScript, то писането на този код съществено се улеснява с използване на готови, с отворен код библиотеки.

Сайт с връзки към сайтовете на такива библиотеки: javascripting.com

Една от известните, широко използвани Javscript библиотеки е jQuery (вижте: jQuery Tutorial).

Основа на много от тези библиотеки е Node.js (nodejs.org) - интерпретатор на JavaScript езика, който се изпълнява както в браузъра на клиента, така и от сървъра.

13.4. Библиотеки на PHP и други езици

PHP е един от най-използваните езици за програмиране на сървърен софтуер. На този език име огромно количество библиотеки, предоставящи готови решения на създателите на сайтове. Вижте резултат от търсене в Google с думите php libraries.

13.5. Системи за управление на съдържанието

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

В настоящият курс ще разгледаме системата с отворен код WordPress.

13.6. Софтуер за изграждане на сайтове (site builders)

Съществуват и софтуерни решения за бързо изграждане на сайтове, без необходимост от знания по HTML, CSS или програмиране - строители за сайтове (site builders). При работа с такъв софтуер потребителят избира началният шаблон за сайт, попълва някаква първоначална информация и сайтът се създава автоматично от софтуера. След първоначалното създаване на сайт софтуерът дава възможности за редактиране - променяне и добавяне на страници, съдържание и функционалности.

В повечето случаи такъв софтуер работи върху интернет сървър (online) и създаваният сайт веднага става видим в мрежата. Услугата по предоставяне за ползване на такъв софтуер се комбинира и с предлагане на домейн, хостинг и ползване на друг, необходим за функциониране на сайта софтуер. Болшинството доставчици на тази услуга не дават възможност на потребителя да свали файлове със съдържанието на сайта си и да ги качи на друг сървър.

Съществуват и строители за сайтове, които първоначално създават новия сайт локално, върху компютъра на потребителя (offline site builders).

С търсене в Интернет строители за сайтове се откриват лесно по думите:

free online site builder или free offline site builder

14. Бази данни

В компютърните науки бази данни се наричат обемисти колекции от данни, обединени от нуждата за използване с определена цел. Съчетанията от хардуерни и софтуерни средства за организиране съхраняването на бази от данни се наричат системи за управление на бази данни (СУБД). (Вижте статия: База данни в Wikipedia).

Интерактивните сайтове получават данни от потребителите, които данни се съхраняват и използват по-късно за различни цели, например: лични данни за потребителски профили, данни за стоки, поръчки, текстове и изображения за показване на страниците на сайт и др. Запазването и извличането на тези данни се осъществява с помощта на системи за управление на бази данни. Предоставянето за ползване на система за бази данни е услуга, предлагана от компаниите за хостинг. Тази услуга е част от абонаментния план, за който клиентът абонат плаща. Някои безплатни планове за хостинг може също да предлагат възможност за създаване и ползване на бази данни с минимални, непредставляващи търговски интерес параметри.

В настоящият курс ще разгледаме системата за управление на бази данни MySQL, която представлява софтуер с отворен код и е достъпна безплатно. Сървър, който може да изпълнява заявки, отнасящи се до бази данни MySQL е част от пакета XAMPP, чието изтегляне, инсталиране и стартиране описахме. Официалният сайт на MySQL e mysql.com и именно от този сайт може да се изтегли най-нова версия, и официалната документация.

14.1. MySQL в XAMPP

След стартиране на програмата за управление на сървърите от файл C:\xampp\xampp-control.exe, ако в прозореца й се щракне бутона Start и срещу реда с надпис MySQL, то след секунди надписът се оцветява в зелено, което означава, че сървър MySQL вече работи. (Ако сървърът стартира за първи път, се показва съобщение от защитната стена на Windows, в което трябва да се щракне бутона Allow Access.)

Когато сървърите Apache  и MySQL са стартирани и функционират, отваряме с браузър, адреса на локалния сървър http://localhost и щракваме върху хипервръзката phpMyAdmin.

Това отваря страницата на панел за управление на MySQL базите данни phpMayAdmin.

В следващата глава ще разгледаме действия, които се извършват с помощта на phpMyAdmin.

14.2. phpMyAdmin

phpMyAdmin е сървърен софтуер с отворен код, написан на езика за програмиране PHP, който служи за администриране на бази данни от вида MySQL.

Основните действия, които се извършват с phpMyAdmin са:

  • създаване на потребители;
  • създаване на бази данни и таблици в базите данни;
  • редактиране на структурата и на данните в базите данни;
  • архивиране и възстановяване, копиране и др.
Създаване на потребител на база данни

От съображения за сигурност достъпът до данните в една база данни се получава чрез посочване на потребителско име и парола. Информацията отнасяща се до дадено потребителско име и парола, и какви права за достъп се получават с тях, се нарича потребителски профил. Такива профили се създават от администратор на хостинга през съответен панел за управление. На локален хостинг, осигурен с пакета XAMPP, такъв панел за управление е phpMyAdmin.

За стартиране създаването на потребител с phpMyAdmin, на страницата на панела, щракваме върху хипервръзката Server и след това върху хипервръзката User Accounts.

На страницата, която се отваря, се показва таблица-списък на съществуващите потребителски профили. За да стартираме създаването на нов профил щракваме хипервръзката Add user account.

На следващата страница 1. попълваме в полето User name - измислено от нас потребителско име; 2. От падащият списък Host name избираме Local; 3. Щракваме бутона Generate за да се генерира силна парола, която трябва да изкопираме и запазим. (Непременно си запазете паролата на този етап, защото повече няма да я видите освен ако не я смените.)

По-надолу на същата страница щракваме бутоните Data и Structure, с което предоставяме на създавания потребител всички права за достъп и редактиране на базата данни и нейната структура. Препоръчително е да се дават минимум права - само тези, с които дадения потребител ще може да изпълнява функцията си.

Отиваме в най-долната част на страницата и щракваме бутона Go, за да запазим данните за създадения потребител.

За да се уверим, че потребителят е добавен, щракваме хипервръзката User accounts, за да видим таблицата-списък на потребителите и в нея трябва да намерим и новия потребител.

Изтриване на потребител

За да изтрием един или повече потребители, в таблицата-списък поставяме отметки в редовете на потребителите, които искаме да изтрием и след това щракваме бутона Go в карето Remove selected user accounts

Създаване на база данни

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

Ако не е създадена база данни по този начин, то друга възможност е база данни да се създаде ръчно с щракване на хипервръзката Databases

На страницата за създаване на база данни 1. написваме името на базата данни, 2. избираме кодова таблица (добър избор е utf8_bin) и 3. щракваме бутона Create

15. WordPress

WordPress e система за управление на съдържанието, първоначално създадена за сайтове тип блог, но възможностите й са разширени дотолкова, че може да се използва и за сайтове с общо или друго предназначение.

Официалният сайт за разработване на системата е wordpress.org. Сайтът wordpress.com е търговски сайт на фирмата, която поддържа разработването на системата и предлага платени услуги, базирани на WordPress - хостване на WordPress сайтове, платени консултации и помощ, софтуерни разработки и др. Има и български официален сайт, посветен на WordPress: bg.wordpress.org, на който може да се намери преведена на български информация за WordPress.

15.1. Изтегляне и инсталиране

Изтаглянето и инсталирането на WordPress на локален сървър, протича в следните стъпки:

Изтегляне и разархивиране

1. На началната страница на сайта wordpress.org щракваме горе, вдясно, хипервръзката GetWordPress.

2. На следващата страница щракваме бутона Download WordPress 5.1.1

Изтегленият .zip файл съдържа PHP файлове с програмен код, изображения, данни и др. необходими за стартиране на Wordpress.

3. В директорията, в която се запазва изтегления файл, с щракване на десния бутон на мишката върху името на файла, подаваме команда за разархивиране.

Отваряме създадената при разархивирането папка wordpress-5.1.1 и в нея намираме друга папка wordpress.

4. От съображения за сигурност е добре папката wordpress да се преименува, например на wp.

5. Копираме преименуваната папка в C:\xampp\htdocs\FirstSite

Първо стартиране и инсталиране

6. Отваряме в браузър адрес: http://localhost/FirstSite/wp

Показва се страница за избиране на език. Избираме Български и щракваме "Напред".

Следващата страница съдържа кратко обяснение какво се изисква за успешно инстаиране. Трябва предварително да сме създали потребител и база данни. (Вижте: phpMyAdmin)

7. Щракваме бутона "Да действаме!".

8. Попълваме данните, които знаем за базата данни и потребителя и щракваме бутона "Напред".

9. На следващата страница щракваме бутона "Изпълняване на инсталацията".

10. На следващата страница попълваме според своите съображения данните в различните полета и щракваме бутона "Инсталиране на WordPress".

Инсталирането завършва с показване на съобщение:

Ако щракнете бутон "Вход" ще отидете на страницата за влизане в контролния панел за администриране на WordPress,
а ако искате да видите как изглежда току що направеният с WordPress сайт, трябва да отворите адрес: http://localhost/FirstSite/wp

15.2. Сайт или блог?

Веднага след инсталиране WordPres е тогов за използване сайт от тип блог. Това е сайт, в който един или повече автори създават публикации. Най-новата публикация се показва в началото на началната страница, а по-старите, до зададен в настройките брой - по-надолу. Към всяка пубикация, посетителите на сайта могат да пишат коментари. По-стари публикации, които вече не се показват на началната страница, се откриват чрез търсене или по хипервръзките към тях в "Архив".

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

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

За влизане в системата на WordPress с права на администратор или автор, трябва да се отвори директория admin. Например, ако адресът за разглеждане на сраниците на WordPress e http://localhost/FirstSite/wp/ то адресът за влизане на администратор е: 

http://localhost/FirstSite/wp/admin

След влизане с име и парола се отваря панелът за управление, а постоянно, докато сте в профила си, на всички страници, които отваряте се вижда лента за управление.

Едно от първите решения, които трябва да вземете преди да започнете да публикувате съдържание е дали Вашият сайт ще функционира като блог или като обикновен сайт и да направите настройка за съдъжанието на началната страница. Ако сте в таблото за управление, изберете от менюто вляво "Външен вид" - "Настройки"

Ако сте на някоя страница на сайта, щракнете хипервръзката "Настройки" от черната лента за управление над страницата.

От менюто от хипервръзки, които се показват в ляво, щракнете "Настройки на началната страница".

От панела, който се показва в ляво, щраквате бутона, който решите. Ако щракнете "Статична страница", се появяват елементи за избиране на начална страница и на страница за публикации от блога. Ако още няма създадени подходящи страници, може да се щракне хипервръзката "+Нова страница".

При щракване на синия бутон отгоре с надпис "Публикуване" промените настъпват на сайта веднага.

15.3. Навигация с менюта

В горната и долната част на всяка страница, може да се покаже меню от хипрвръзки към други страници. Саздаването и редактирането на менюта става от страница за редактиране на менюта, която се отваря по един от два начина:

1. ако сте на някоя страница ат сайта - от менюто с името на сайта,

2. ако сте в таблото за управление - от "Външен вид" - "Менюта".

В току що инсталиран WordPress няма менюта и следва да се напише име на меню, например: ГлавноМеню и да се щракне бутона "Създаване на меню".

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