vv net demek teorija

HTML (WEB) страна - документ кој може да содржи текст, графика и покажувачи кон други документи;
                                           - чиста текстуална датотека во која е сместен текстот кој треба да се прикаже и форматирањето на визуелната информација.

HTML (HyperText Markup Language) - описен јазик за означување кој опишува како треба да бидат форматирани документите при нивниот приказ.
- Дефиниран е со помош на мета јазик (јазик за дефинирање на јазици)- SGML (Standard Generalized Markup Language).
- Семантички ја опишува страната со насоки за нејзина презентација, што го прави описен а не програмски јазик.

Улогата на веб-прегледувачот е да чита HTML документи и да ги прикаже како веб страници. Прегледувачот не ги прикажува HTML ознаките (таговите) туку ги користи за толкување на содржината на страната. Командите за форматирање овозможуваат кој било WEB прегледувач да може да ја прочита и реформатира страната според своите специфики (големина на дисплеј, кориснички интерфејс, итн.)

HTML документот претставува обична текстуална датотека во која покрај текстот кој треба да се прикаже, се вметнати и таговите кои го опишуваат форматирањето на документот.

Таговите се вметнати во текстот а се ограничени со аглести загради. Зборчињата кои се наоѓаат измеѓу нив се нарекуваат директиви.

Повеќето тагови се користат за да означат почеток и крај на нешто. Скоро сите HTML тагови се употребуваат во пар: <tag> за почеток и </tag> за крај.

Некои од таговите имаат именувани параметри наречени атрибути.
<img src=”abc” alt=”foobar”>

За да означиме дека дел од текстот сакаме да биде прикажан како нов параграф, треба да вметнеме таг. Тагот за нов параграф е <p>.
Текстот помеѓу таговите <b> и </b> ќе биде прикажан здебелено.
Текстот помеѓу таговите <i> и </i> ќе биде прикажан со курзивно писмо.
Бидејќи знаците < и > имаат специјално значење и се интерпретираат на посебен начин, доколку сакаме да ги вклучиме како составен дел од текстот кој ќе биде прикажан, мора да ги кодираме како:
< - &it;
< - &gt;
& - &amp;
"" - &quot;
Секој HTML документ се состои од глава (HEAD) и тело (BODY). Може да содржи и декларација за типот на документот DTD (Document Type Definition), со што се означува како документ прилагоден за одредено ниво од HTML.
Предформатиран текст со тагови <pre> </pre> - Текстот ќе биде прикажан потполно исто како што е напишан. _________________________________________________________________________________________________
_________________________________________________________________________________________________


Листи:


Вметнување на слики
<dl>
<dt> <img src=”link.gif”> tekst
<dd> opis
</dl>
Дозволени се GIF и JPG слики
Хиперлинкови
<a href=”link”>tekst</a>

Релативен линк – води кон страна која постои во истиот директориум во кој е и страната која референцира кон неа.
<a href=”druga_strana.html”>link kon strana </a>
- Релативните линкови можат да претставуваат и релативна патека до саканата страна
<a href=”folder/strana.html”>link kon strana </a>
<a href=”.../glavna_strana.html”>link kon strana </a>

Апсолутен линк – води кон страна наведувајќи ја целосната патека на системот до страната.
<a href=”/papka/papka/strana.html”>link kon strana</a>

Екстерен линк – води кон страна на (друг) сајт наведувајќи го комплетниот URL на страната.
<a href=http://www.finki.ukim.mk/mk/studies....html> link kon strana </a>

HTML коментари – прегледувачот ги игнорира, немаат форматирачка
Функција. <!—komentar -->
BASE – дефинира појдовен директориум за одредување на релативните линкови, кој овозможува да се премести страната во друг директориум или дури и друг сајт.
<BASE=”http://www.finki.ukim.mk/mk...>

META – се користи за дефинирање на име/вредност парови на т.н. мета променливи кои се користат за индексирање и пребарување.


LINK – се употребува за дефинирање на релација со останати документи


Anchors (Сидра) - се специјални локации во документот на кои може да се референцира со линк од истиот или друг документ. Сидрата овозможуваат скок на произволна позиција во документот.
Доколку линкот се наоѓа на друга страница:
<a href=”linkot#podnaslovot></a>



Поставување слики:
1 слика: <img src=”blabla.jpg” align=middle width=400>
2 слика: <img src=”blabla.jpg” align=middle width=50%>

Имплицитни HTML тагови
<strong></s> = <b> </b>
<em></em> = <i> </i>
<tt> </tt> = непропорционален фонт
<del></del> = <strike> </strike>
<ins></ins> = <u> </u>
<big> = со секоја употреба се зголемува големината на фонтот за 1 (max=7, default=3)
<small> = со секоја употреба се намалува големината на фонтот за 1 (min=1, default=3)
<sub>= подреден текст А5
<sup> = надреден текст А5

Дефинирање на фонтови
<font face = “Arial, Helvetica” size=”3” color=”red”> blabla </font>



Табела
Сместена е меѓу <table> </table> таговите, секој ред во табелата е меѓу <tr> </tr> таговите, а секоја ќелија меѓу <td> </td> таговите. Во рамките на ќелијата е дозволено секакво форматирање, вклучувајќи и вметнување цела нова табела. Постојат и повеќе атрибути со кои може да се одреди порамнувањето, бојата на позадината, постоењето и дебелината на рамки, растојанието помеѓу ќелиите, широчината на табелата и др.

Видови на табели:






<blink></blink> = текст што трепка
<marquee></marquee> = текст што се шета



Под мултимедија се подразбира медиум или содржина која користи комбинација од повеќе различни изразни формати.
Мултимедијални податоци претставуваат податоците запишани со повеќе медиуми во кои се содржани: текст, слика, звук и видео.
Интерактивност - контрола од страна на корисникот.
Дигитализација на звук
ADC - конверзија од аналогно во дигитално
DAC -конверзија од дигитално во аналогно
Одмерување – sampling; Квантизација – временска и вредносна; Кодирање

ADC конверзија



Компресија на звук
    • Некомпримиран
- 44100 одбироци/секунда x 16 бита x 2 канала (за стерео) = 176400 бајти/секунда  (WAV, AIFF, AU or raw header-less PCM)
- ... или за една песна од 3 минути со CD квалитет - околу 31MB
    • Koмпримиран
- Lossless (без загуба на информации); компресија од околу 2:1 [FLAC, Monkey's Audio (APE), WavPack (WV), TTA, ATRAC Advanced Lossless, Apple Lossless (m4a), MPEG-4 SLS, MPEG-4 ALS, MPEG-4 DST, Windows Media Audio Lossless (WMA Lossless), Shorten (SHN)]
- Lossy (со контролирана/селективна загуба на информации) [варијабилна компресија зависно од компромис кон загуба на квалитет - MP3, Vorbis, Musepack, AAC, ATRAC and Windows Media Audio Lossy (WMA lossy), Real Audio (RA).

Други формати на звук
- Нотен запис - MIDI (mid)
- Повеќеканален звук (5.1, 7.1) просторно распределен (5.1 - лев и десен преден, лев и десен заден, централен и длабоки тонови)
- Recorded vs. streamed
- RTSP (Real Time Streaming Protocol)
- Комплексност на компресија/декомпресија (симетрична/асиметрична)

Графички формати
    • Растерски формат
Растерската графика или слика (бит- мапа) е податочна структура која генерално претставува правоаголна матрица од обоени точки (пиксели) која може да биде прикажана на некој медиум.
    • Векторски формат
Векторската графика претставува употреба на примитиви како точки, линии, криви и фигури или многуаголници, сите засновани на математички равенки, со цел да се претстават слики и сметачка графика.

Растерски графички формати
Дигитализација на слика (скенирање, фотографирање)
- Одбирање по 2 димензии (просторна квантизација)
- Квантизација (осветленост, бои)


BPP (Bits per Pixel) - резолуција


BPP (Bits per Pixel) – colour depth
Прегледувачите ги поддржуваат растерските формати: GIF (Compuserve Graphics Interchange Format 1989); JPEG (Joint Photographic Experts Group); PNG (Portable Network Graphics) и (поновите) векторскиот формат: SVG (Scalable Vector Graphics)

Компресија на графика


Графичкиот формат GIF
- Отворен platform independent формат воведен на Compuserve
- две верзии: GIF87а и GIF89a
- вградена LZW (Lempel-Ziv Welch) компресија без загуба на информации
- поддржува слики со најмногу 256 различни бои (од палета од 224 бои) и големина до 65536 x 65536 пиксели.
- овозможува сместување на повеќе (под)слики во една датотека и нивно секвенцијално појавување (анимација!)
- овозможува сместување на дополнителни текстуални податоци
- овозможува дефинирање на проѕирна боја
- овозможува преплетено/прогресивно кодирање
- погоден за сместување слики со мал број на бои и остри граници меѓу боите – текстови, шеми, дијаграми (непогоден за фотографии)

Графичкиот формат PNG
- сличен на GIF со друг алгоритам за компресија

Графичкиот формат JPG
- Предложен од Joint Photographic Experts Group 1992 година дефинира неколку различни шеми на компресија и кодирање на сликите претежно наменет за чување на фотографии (компресија со контролирана загуба на податоци, разложување на луминанта/хроминанта и DCT компресија)
- овозможува преплетено/прогресивно кодирање како и мод на компресија без загуби
- далеку покомплексна компресија/декомпресија, не поддржува провидна боја ниту анимација
- далеку подобар од GIF за сместување на фотографии (голем број на бои, полутонови, благи премини меѓу боите)

Графичкиот формат PNG
Графички формат сличен на GIF но, со имплементирана компресија без загуби со слободен алгоритам  1996 – прва верзија,
- 2004 -ISO стандард поддржува поголем број на бои од GIF (палета)
- (најчесто) подобра компресија од GIF
- повеќе можности за транспарентност
- подобра можност за преплетено прикажување
- НЕ ПОДДРЖУВА анимација (за разлика од GIF)
- MNG и APNG не се широко поддржани
- не е широко поддржан како GIF

Графичкиот формат SVG
- Scalable Vector Graphics – спецификација за опишување на 2-димензионална векторска графика кој се развива од 1999 година
- Векторски формат – содржи информации (команди) како да се нацрта одредена слика со помош на линии, бои и други примитивни објекти
- Не зависи од резолуцијата
- Во SVG може да има: Векторска графика; растерска графика; текст

Видео формати - во основа временска низа од слики кои се менуваат.
- Важи се’ што важеше за растерските слики + темпорална обработка (компресија).
- Контејнери во кои се преплетени текови за подвижни слики, звук (повеќе канали) и други информации (субтитл), ...
- Популарни формати: AVI, WMV, MPG, MP4, MKV, MOV, ...

Динамички WEB страници - Технологија која овозможува динамичко генерирање на содржината на web страната во моментот на нејзиното испорачување од серверот (server-side), или во моментот на нејзиното прикажување во web прегледувачот (client-side).

Server-side
- На страната на серверот (server-side) – генерирање на содржината на страницата во лет, преземање и обработка на податоците внесени од корисникот во формите:
- CGI (Common Gateway Interface)
- PERL, Python, Ruby, C, C++, …, (скоро) било кој програмски јазик, UNIX скрипти
- PHP (open source) (PHP: Hypertext Preprocessor) (+MySQL)
- ASP (Microsoft) (Active Server Pages) (+MSSQL)
- ASP.NET (Microsoft) (+MSSQL)
- JSP (Sun) (Java Server Pages) J2EE
- ColdFusion (Macromedia ја купи Adobe)

Client-side
- На страната на клиентот, манипулирање и промена на приказот на веќе прочитаната web страна во самиот прегледувач – подржано од самиот прегледувач.
- JavaScript, Jscript, VBScriptDHTML, AJAX (Asynchronous JavaScript and XML)
- Подржано од екстерна апликација (преку helper) или како plug-in:
- Java Applets
- Flash (Adobe, Shockwave Flash)
- ActiveX plug-in (IE only)
- SilverLight (Microsoft)

WEB страна која овозможува внесување на податоци од страна на корисникот кои типично се испраќаат на серверот на процесирање и кои визуелно потсетуваат на хартиените формулари.

CGI (Common Gateway Interface) - може да биде било каква програма која се извршува на серверот. Таа е поттикната од барањето во прегледувачот и вообичаено претставува врска помеѓу серверот и некоја друга програма.
- CGI дефинира стандарден начин на кој информациите можат да бидат испратени кон и од серверот.
- Било која програма или скрипта која е во состојба да ги обработува информациите според CGI спецификацијата, може да се употреби за кодирање на CGI скрипта.
Улога на CGI скриптата е: да ги прифати податоците кои корисникот ги внел; да ги обработи; да прати договор до корисникот.

Корисникот внесува информации  Серверот ги обработува податоците  Корисникот добива одговор CGI програма се извршува на серверот

Како работи една CGI скрипта?
CGI скриптите ги повикува WEB серверот на основа на барење од некој пребарувач.
1. Откога ќе се кликне на линк на некоја страна кој покажува кон CGI скрипта, прегледувачот упатува барање до серверот за бараниот URL исто како и за било која друга web страна.
2. Серверот откако ќе го прими барањето забележува дека URL покажува кон скрипта на основа на нејзината локација во соодветен директориум на серверот или на екстензијата и ја извршува.
3. Скриптата извршува некоја акција на основа на евентуалните влезни податоци кои и ги проследува серверот. Акцијата може да биде читање или запишување на податоци во база, пресметка, читање на вредности од поврзани инструменти или едноставно повикување на друга програма.
4. Скриптата го издава својот резултат во форма која може да ја разбере WEB прегледувачот (серверот).
5. WEB серверот го прифаќа резултатот од скриптата и го проследува до прегледувачот кој го форматира и го прикажува на екранот.

Пишување на CGI скрипта - се извршува на серверот, секоја инстанца зафаќа меморија и процесорско време и може да го преоптовари серверот.
- Потребна е особена внимателност при пишување и тестирање на CGI скриптите од безбедносни причини.
- Мора да задоволи некои барања околу форматот на излезот кој ќе го понуди.
- Излезот од скриптата мора да почне со HTTP header.
- Постојат три вида на заглавија кои може да се произведат со скрипта:
Content-type; Location; Status.

Content-type header - специјален код кој ја опишува „датотеката“ која се испраќа и задолжително еден празен ред.
По испраќањето на Content-type заглавието (и еден празен ред зад него), остатокот се податоците кои скриптата сака да ги испрати до прегледувачот.

Излез од CGI скрипта - CGI скриптите можат да бидат така напишани да пренасочуваат кон друг статички документ (Location header) или самите да го отворат документот и да го проследат на стандардниот излез односно преку серверот до прегледувачот.
- Може да се напише CGI скриптата која ќе чита статички документ и при проследувањето ќе додаде нешто на неговиот почеток или крај или дури во лет при проследувањето ќе го измени или ќе вметне дополнителни информации во документот.
- Доколку скриптата заклучи дека не може да даде валиден излез, истата може да проследи Status header со соодветен код за грешката: Status: 204 No Response


Интеракција со корисникот - форми
Формите овозможуваат интеракција со корисникот. Оваа интеракција се состои во презентирање на корисникот на информациите во вид на формулар. Корисникот може да внесе податоци во формуларот, кои по кликање а копчето за испраќање ќе бидат проследени до серверот. Постојат 2 основни начини за проследување на внесените информации кон серверот.
Top of Form






<input type=”file”...- форма за внесување текст заедно со копче кое го отвора дијалогот за избор на датотека на локалниот систем

<input type=”reset”…-копче за враќање на вредностите во формата на нивните подразбирани вредности


Каскадните стилови (Cascading Style Sheets – CSS) се воведени во 1996 година (CSS1, 1998 CSS2, CSS3 е во draft) со цел да овозможат креирање побогато дизајнирани Web страни.


Предности на стиловите:
- Одвојување на содржината од презентацијата; Адаптирање на презентацијата во зависност од можностите на пребарувачот/екранот или желбите на корисникот; Промена на изгледот со промена на само едно место; Поголема флексибилност на презентациските ефекти

Дефиницијата на стилот се состои од множество правила кои му кажуваат на прегледувачот како да биде прикажан документот.

Вградени (embedded) стилови
Стиловите се дефинираат во style тагот во head секцијата. Имаат предност над екстерните стилови. Правилата за форматирање во стиловите се состојат од селектори и декларации. Секој HTML елемент е можен CSS селектор. Декларациите се состојат од атрибут : вредност парови одвоени со ;.


Вметнати (inline) стилови
Примена на стилот „во лет“ на одреден параграф. Има приоритет над екстерните и вградените стилови.


Екстерни стилови
Стиловите се дефинираат во посебна (css) датотека која потоа се вклучува во html документот со link тагот.
Предности: само неколку дополнителни линии код во секој html документ, повеќе документи може да употребуваат стилови од иста датотека со дефиниции, централизирана промена на стилот на едно место (во css датотеката).

Класи на стилови
За селекторот може да се дефинираат класи, односно истиот HTML елемент да има различни стилови. Атрибутот class се употребува за да се означи класата на елементот.

Може да се дефинира и независна класа и истата да се примени на делови од документот без специфичен таг, на пример за дел од параграф. За тоа се користат span и div таговите кои немаат друго форматирачко дејство.




Псевдо-класите и псевдо-елементите се специјални класи и елементи кои автоматски се препознаваат од прегледувачите кои поддржуваат CSS, а одредуваат повеќе различни типови на елементи.

Во случај на повеќе контрадикторни правила за примена на стиловите, пропишан е механизам за нивно разрешување (приоритети). (! important, пресметување на специфичност).




Пребарувачите стиловите ги гледаат на 3 начини:
- Перзистентни стилови – се применуваат независно од корисничките поставки во прегледувачот.
- Подразбирани стилови – се применуваат по вчитувањето на страницата, но можат да бидат исклучени од страна на корисникот.
- Алтернативни стилови – се применуваат кога на корисникот му е дадена опција да биде променет стилот.

CSS Properties
- Font Properties (Font Family, Font Style, Font Variant, Font Weight, Font Size, Font)
- Color and Background Properties (Color, Background Color, Background Image,
- Text Properties (Word Spacing, Letter Spacing, Text Decoration, Vertical Alignment, Text Transformation, Text Alignment, Text Indentation, Line Height)
- Box Properties (Top Margin, Right Margin, Bottom Margin, Left Margin, Top Padding, Right Padding, …, Top Border Width, …, Width, Height, …)
- Classification Properties (Display, Whitespace, List Style Type, List Style Image, List Style Position, List Style)
- Units (Length Units, Percentage Units, Color Units, URLs)