Дигитални текст 2

Ранији назив предмета: Интернет и веб технологије

Обавештења

Пријава за праксу (до 11. III 2024. године)

Студенти који прате Дигитални текст 2 у школској 2022/2023. години и још увек се нису пријавили за обавезну праку у Универзитетској библиотеци Светозар Марковић, или су пратили предмет у некој од ранијих школских година, а нису похађали обавезну праксу у Универзитетској библиотеци Светозар Марковић, треба да се јаве предметном наставнику најкасније до понедељка 11. III 2024. године. Студенти који први пут слушају Дигитални текст 2 у школској 2023/2024. години аутоматски су пријављени за праксу и не морају се посебно пријављивати, осим у случају када хоће да се изјасне да неће похађати праксу у текућој школској години.

Задржавање предиспитних обавеза (до 11. III 2024. године)

Сви студенти који поново слушају неки од информатичких предмета аутоматски задржавају раније остварене предиспитне обавезе (ПО) и не треба да се јављају предметном наставнику да би то потврдили. Само студенти који не желе да задрже неке или све ПО, већ им је намера да понове одређени тест или семинарски рад, морају да се јаве на адресу misko at fil_bg_ac_rs до 11. III 2024. године и прецизно назначе шта од ПО понављају.

О предмету

Литература:

W3schools материјали

  1. Html 5 Reference (w3schools).
  2. CSS Reference (w3schools).
  3. W3C HTML Color Names
  4. W3C HTML Color Picker

Материјали са предавања

  1. Cvetana Krstev: Internet. Materijal sa predavanja za predmete Internet i veb tehnologije i Digitalni tekst 2 (2007-2014). Beograd : Filološki fakultet, 2014.
  2. Милош Утвић: Сервиси интернета (Клијент-сервер архитектура. Неки важнији примери сервиса интернета. Адресирање уређаја на интернету. URL и URI).
  3. Cvetana Krstev: Oživljavanje prezentacije s JavaScript-om (skripta za stari program, 1995-2005)

Књиге

  1. Jovan Popović, Vida Popović: jQuery i napredne web tehnologije. Beograd: Kompjuter biblioteka, 2013 (poglavlja 2 i 3, str. 21-108). COBISS.SR
  2. Laura Lemay, Rafe Colburn, Jennifer Kyrnin: HTML5, CSS3 i JavaScript za razvoj veb strana. Beograd : Kompjuter biblioteka, 2016. COBISS.SR
  3. Ben Frain: HTML5 i CSS3 : prilagodljiv web dizajn. Beograd : Kompjuter biblioteka, 2014. COBISS.SR

Пушкице

  1. Chris Hanscom: Quick Reference Guide: Cascading Style Sheets (CSS 3) (CSS пушкице за писмени). South Carolina : Veign, 2009.
  2. Chris Hanscom: Quick Reference Guide: HTML 5 - (овај подсетник није дозвољен на испиту!). South Carolina : Veign, 2009.
  3. Eric Gomez: The Flexbox One Page Cheat Sheet (CSS Flexbox пушкице за писмени, локална PDF верзија)

Алатке

  1. Алатке за валидацију HTML-докумената и CSS-стилова:
  2. JSFiddle, онлајн заједница и интегрисано развојно окружење за дељење, приказ и тестирање одломака кода написаног помоћу комбинације језика HTML + CSS + JavaScript (енгл. fiddle). Омогућава корисницима не само да погледају нечији код, већ и да га директно измене и тестирају (налик игрању у песку на сајту Википедије). Играоница за вебмастере.
  3. Can I Use, ажурни преглед подршке коју веб технологије (HTML, CSS, JavaScript, итд.) имају у различитим верзијама најкоришћенијих веб-читача.
  4. JavaScript Tester. Онлајн тестирање делова кода написаног на JavaScript-у.
  5. XAMPP (Apache + MySQL/MariaDB + (MySQL + PHP + Perl)

Семинарски

Предавања и вежбе: интернет, HTML, CSS и JavaScript

Неопходни програми

За рад су потребни следећи програми:

  1. програм за обраду обичног (чистог) текста (editor) Notepad++
  2. читач веба (web browser): Firefox, Chrome или Internet Explorer.

Notepad и IE (Internet Explorer) су саставни део оперативног система Windows. Последња верзија програма Firefox је доступна на адреси http://www.mozilla.com/firefox/, а програма Chrome — на адреси google.com/chrome.

Упутство за рад на вежбама
  • На почетку сваког часа студенти покрећу Notepad++ и свој омиљени читач веба (енгл. browser): Firefox или IE) и ти програми су активни све време.
  • Уколико каталози C:\g2\iw i/ili C:\g2\iw\prez не постоје, студент је дужан да их креира.
  • У каталогу C:\g2\iw се, поред студентових датотека, налазе и додатни ресурси (слике) који ће бити коришћени током вежби (поткаталози animals, animation, Backgrou, Cartoon, Dots, Punctua, Slike и Symbols). Студенти не смеју да мењају садржај тих каталога. Да би то било осигурано, сви каталози и датотеке које студенти креирају морају се налазити у каталогу C:\g2\iw\prez или у неком од његових поткаталога.
  • Уколико на првом часу вежби поменутих ресурса нема, треба то пријавити наставнику, односно асистенту.
  • Практични рад студената се своди на креирање HTML страница у Notepad++-у, њихово чување у каталогу C:\g2\iw\prez (или неком његовом поткаталогу) и прегледу креираних страница у свом омиљеном читачу веба. Сваки пут кад студент у Notepad++-у промени део странице коју тренутно тестира у читачу веба, да би промене могле да се уоче, неопходно је страницу најпре сачувати у Notepad++-у, а потом ажурирати приказ у читачу веба (кликом на дугме Refresh у IE, односно Reload у Firefox-у).
Refresh и Reload
Теме

(1 час)

  • Интернет.
    Кратка хронологија важнијих догађаја у историји интернета уопште и интернета у Србији

    Историјат интернета (временска линија)

    • Leonard Kleinrock: пакетно пребацивање, 1961. године
    • ARPANET (1969-1990)
      • Први чворови мреже (UCLA, SRI, UCSB, Univerzitet у Јути).
      • Први сервиси интернета:
        • telnet (1969),
        • ftp (1971),
        • е-пошта или имејл (1971. године послат први имејл на ARPANET-у, стандардизован формат имејла 1973. године).
      • Протоколи:
        • NCP (до 1.1.1983)
        • TCP/IP (од 1.1.1983). Адресирање:
          • нумеричко (IP-адресе)
          • симболичко (DNS, 1985)
    • Нове мреже у SAD, мреже у Европи, Азији. Умрежавање школа и универзитета.
    • Комерцијализација и приватни сектор: пружаоци интернет услуге (провајдери, енгл. Internet Service providers, ISP). Умрежавање правних и физичких лица.
    • Tim Berners-Li: веб и први веб-сајт info.cern.ch (1991)
    • Први читачи веба (браузери, енгл. browser): WorldWideWeb (Berners-Li, 1993), Mosaic (1993), Netscape Navigator (1994), Microsoft Internet Explorer (1995), Opera (1996), Apple Safari (2003), Mozilla Firefox (2004), Google Chrome (2008), Microsoft Edge (2016).
    • Веб (www) као сервис интернета (1993). Те 1993. године укупно 130 веб-сајтова и 14 милиона корисника интернета широм света.
    • Право на интернет постаје једно од основних људских права (резолуција УН A/HRC/32/L.20 2016. године)
    • Статистика коришћења интернета: www.internetworldstats.com, www.internetlivestats.com/ (мај 2018. године: преко 1,8 милијарди веб-сајтова и преко 3,9 милијарде корисника интернета).

    Интернет у Србији

    • Универзитет у Београду постаје чвор интернета преко Европске академске истраживачке мреже, EARN (1989).
    • Санкције 1992-1995. године прекидају везу Србије са интернетом.
    • Први ISP у Србији (1995-1996): Opennet, Beotel, EUnet.
  • Преглед веб технологија: HTML, CSS, Javascript
  • Садржина, структура и приказ (изглед, стил, презентација) документа. Раздвајање структуре и приказа.
  • HTML. Верзије (HTML 4 и HTML 5).
  • Основни појмови: етикете, атрибути, елементи, коментари. У даљем тексту важе следећа правила:
    1. Етикете и атрибути, чија се употреба више не препоручује, означени су црвеном бојом.
    2. Обавезни атрибути елемената су означени зеленом бојом.
    3. Референце на примере и домаће задатке су означене бледом плавом бојом.
  • Костур HTML-документа. Елементи html, head, body. Кодна шема документа (meta, charset).
    Костур HTML документа. HTML третира све белине (знаке за нови ред, табулаторе и вишеструке размаке) као један размак
  • Структурирање текста (наслови, пасуси; елементи title, h1-h6, p; atribut align)
  • Ненумерисане (неуређене) листе (елементи ul и li, атрибут type)
    Уводни пример са анотираним насловима, пасусима и листама
    Основни појмови и структура документа

  • У оквиру самосталног рада код куће, студент треба да направи датотеке bio.html и bio-css.html које имају истоветан садржај, тј. треба да садрже произвољне биографске податке (подаци не морају одговарати стварности). Акценат треба ставити на структуру документа, а не на његов садржај.

    Приликом куцања текста користити српску латиничну тастатуру и чувати датотеку у кодном распореду UTF-8.

    Документ мора да има 1 главни наслов (нпр. Moja biografija) и бар 5 поднаслова (нпр. Моје родно место, Детињство, Успомене из школе, Успомене са летовања, Факултет, Хоби итд).

    Сваки поднаслов се односи на бар два пасуса. Приликом приказа документа у читачу веба (browser) сваки пасус мора да има бар 5 линија (дакле, не у текстуалној датотеци, већ приликом приказивања у читачу веба).

    Између главног наслова и првог поднаслова треба навести садржај документа у облику неуређене листе.

    Документ мора да заузме бар 2 екранске слике.

    Документ bio-css.html не сме да користи етикете и атрибуте који се не препоручују (уместо њих ћемо на идућем часу користити CSS), док у датотеци bio.html треба употребити одговарајуће атрибуте тако да сви пасуси буду поравнати уз обе маргине, а наслови центрирани. То су уједно и једине разлике између две датотеке које треба направити.

(2 часа)

  • Форматирање у HTML-u (вежбамо над датотеком bio.html)
    • Физичко форматирање текста. Елементи b, i, u, tt, s (strike), sub, sup. Фамилија фонта, величина слова. Елемент font (атрибути face, size).
    Елементи, етикете и атрибути за опис стила документа које треба избегавати (користите CSS!)
  • Увод у CSS (вежбамо над датотеком bio-css.html)
    • Синтакса CSS-а. (CSS-)селектори и (CSS-)својства.
    • HTML-елементи као селектори. Својство text-align. Форматирање наслова и пасуса.
    • Унутрашњи CSS. Елемент style.
    Форматирање наслова и пасуса помоћу CSS-својства text-align.
  • Увод у логичко (семантичко) форматирање текста
    Форматирање текста помоћу својстава font-weight, font-style i text-decoration.

  • На основу Примера 2.1 направити датотеку formatiranje-css.html са истоветним садржајем и структуром, али без елемената, етикета и атрибута чија се употреба не препоручује у верзији HTML5, тј. која користи CSS уместо физичког форматирања.

  • Логичко (семантичко) форматирање текста — наставак (вежбамо над датотеком bio-css.html)
    Форматирање текста помоћу својстава font-family, font-size i font-variant. Елементи pre, blockquote i q.
  • Уметнути (линијски) CSS. Глобални атрибут style (за брзо и прљаво експериментисање, али се не препоручује као коначни начин задавања стила документа).

  • Користећи логичко (семантичко) форматирање, у датотеци bio-css.html сва властита имена (имена људи, географских појмова, итд.) форматирати тако да истовремено користе и наглашени фонт и курзив, при чему се користи фонт Calibri величине 14pt. Ако у датотеци нема властитих имена, додати тачно десет властитих имена на различитим местима у тексту.

(1 час)

  • Адресирање, I део: адресирање на локалној машини. Елемент a, атрибути name, id и href.
    • Увод у хипервезе (енгл. link). Сидра (енгл. anchor или bookmark) и унутрашње хипервезе (хипервезе у оквиру самог HTML-документа)
    • Релативне хипервезе.
    Сидра. Семантичко форматирање текста помоћу класа.

  • Током последњег часа је у склопу релативног адресирања урађено следеће:

    • Креиран је поткаталог biografija каталога prez и у њега је копирана датотека са I домаћим, bio-css.html;
    • У датотеци bio-css.html је креирано сидро од првог наслова и последњег наслова, а у садржају су одговарајући елементи листе претворени у хипервезе (линкове) на та сидра.
    • На крају тела (body) датотеке prvi.html направљене су две релативне хипервезе, једна на датотеку bio-css.html, а друга на прво сидро у њој.
    • На крају тела (body) датотеке bio-css.html направљена је релативна хипервеза на датотеку prvi.html.
    У оквиру самосталног рада код куће, студент треба да допуни датотеку bio-css.html (направљену као I домаћи) тако да сваки поднаслов из садржаја на почетку документа буде хипервеза на одговарајући поднаслов у самом документу и обрнуто.
    Допунити датотеку prvi.html релативним хипервезама на сва сидра у датотеци bio-css.html.
    Креирати поткаталог X каталога biografija и у њему датотеку x.html. Датотека x.html треба да садржи релативне хипервезе на датотеке prvi.html, bio-css.html и на први поднаслов у документу (а не у садржају документа) датотеке bio-css.html. Такође, допунити датотеке prvi.html, bio-css.html (на крају тела документа) релативним хипервезама на датотеку x.html.
    Недостаје слика домаћег задатка
    Релативне адресе хипервеза

(2 часа)

  • Сервиси интернета:
    • Клијент-сервер архитектура и протоколи
    • Неки важнији примери сервиса интернета
    • Адресирање уређаја на интернету (IP адреса, симболичка адреса, DNS, портови)
    • Адресирање ресурса (датотека) на интернету (URL и URI).
      Пример веб сервера XAMPP (Apache) на рачунарима у учионици 4а.

      Веб-сервер Apache система XAMPP се користи на следећи начин:

      Покретање система XAMPP и веб-сервера Apache
      1. Најпре се покрене програмски систем XAMPP, тј. XAMPP Control Panel. XAMPP се састоји од више апликација, свакој одговара један ред дугмади (Start, Stop, Config).
      2. Веб-сервер Apache се покреће активирањем одговарајућег дугмета Start.
      3. Приликом инсталације било ког веб-сервера мора се одредити адреса коренског каталога веб-сервера. У случају XAMPP-а, коренски каталог веб-сервера је увек поткаталог хтдоцс каталога где је XAMPP инсталиран. Тачну адресу каталога htdocs можемо утврдити активирањем дугмета Config за Apache и избором прве опције менија, тј. Apache (httpd.conf) чиме се отвара истоимена датотека у Notepad-у. Датотека httpd.conf садржи подешавања веб-сервера Apache и ако у њој потражимо линије које садрже текст DocumentRoot и не почињу тарабом (#), наћи ћемо нешто попут DocumentRoot "C:/Unix/xampp/htdocs". Адреса под наводницима је адреса коренског каталога веб-сервера.
      4. Добијену адресу (C:/Unix/xampp/htdocs) можемо копирати у адресну линију програма My Computer и наћи ћемо се у коренском каталогу веб-сервера.
      5. Своју презентацију (каталог c:\g2\iw\prez) коју желимо учинити јавном (за присутне у 4а) копирамо негде унутар коренског каталога веб сервера (C:/Unix/xampp/htdocs). У нашем случају, у коренском каталогу се већ налази копија каталога iw (c:\g2\iw) на адреси C:/Unix/xampp/htdocs/iw, недостаје само prez од текуће школске године. Ако већ постоји prez у оквиру htdocs/iw, преименујемо га у prez-2019, а онда копирамо каталог c:\g2\iw\prez тако да постане поткаталог каталога C:/Unix/xampp/htdocs/iw.
      6. Неопходно је одредити IP-адресу свог рачунара и разгласити је.
        • Windows 7: Open Network and Sharing Center, Local Area Connection или Ethernet, дугме Details и у отвореном дијалогу очитати поље IPv4 address.
        • Windows 8 и касније верзије: Settings, Network, Connections, View Network Properties, очитати поље IPv4 address.
      7. Последњи корак, да бисте приступили презентацијама корисника на рачунарима у 4а, састоји се у искључивању сурогат-рачунара (заступничког сервера, енгл. proxy) pреко којег мрежа факултета (и 4а) комуницира са интернетом. Mozilla Firefox: Options, Network Settings (најлакше је откуцати proxy у пољу Find in options како би се појавила дугме Settings...), а онда у дијалогу Connection Settings изабрати No proxy).
      8. По завршетку рада потребно је:
        1. вратити стара подешавања proxy-сервера (Use system proxy settings ако је proxy-сервер подешен на нивоу система или Manual proxy configuration, ако желите да подесите proxy сервер само за Firefox; у другом случају се куца 192.168.0.1 у пољу HTTP Proxy и 8080 у пољу Port) и
        2. прекинути рад веб-сервера (одговарајуће дугме Stop у реду дугмади за Apache) pре него што се затвори XAMPP Control Panel.
      Подешавање мреже на систему Windows: Open Network and Sharing Center (LAN / Ethernet) Дијалози Local Area Connection, односно Network Connection Details. Određivanje IP-adrese, polje IPv4 Address Firefox - подешавање proxy-сервера
      Пример апсолутне адресе (URL) датотеке bio-css.html на рачунару у учионици 4а. Пример апсолутне адресе (URL) датотеке bio-css.html на рачунару у учионици 4а
      Пример апсолутне адресе (URL) датотеке iw.html која представља званичну страницу предмета Дигитални текст 2. Пример апсолутне адресе (URL) датотеке iw.html која представља званичну страницу предмета Дигитални текст 2

  • Додати у датотекама prvi.html, bio-css.html и x.html по три апсолутне хипервезе на три различита сајта по сопственом избору (на пример, на познате сајтове као што су Google, Wikipedia, IMDB, итд.).

(2 часа)

  • CSS-псеудокласе.
    • CSS-псеудокласа :hover
    • CSS-псеудокласе за форматирање хипервеза a:link, a:visited, a:active. Ако се нека наведе у CSS-стилу, препорука је да се све спецификују, а ако се користи и a:hover, онда се мора користити редослед a:link, a:visited, a:hover, a:active (редослед се лако памти помоћу енглеских речи: LoVe HAte; велика слова одређују редослед).
    • CSS-класе и CSS-псеудокласе се могу комбиновати
      (selektor.klasa1.klasa2:pseudoklasa1:pseudoklasa2).
    Псеудокласе a:link, a:visited, a:hover, a:active.
  • Боје: RGB
    • W3C HTML Color Names
    • W3C HTML Color Picker
    • Боја текста произвољног елемента применом CSS-својства color. Постоје и могућности HTML-а које не треба користити: бојење текста на нивоу целог документа (атрибут text елемента body), на нивоу карактера (атрибут color етикете font), као и бојење непосећених, активних и посећених хипервеза (атрибути link, vlink, alink елемента body).
    • Боја позадине произвољног елемента применом CSS-својства background-color. Постоје и могућности HTML-а које не треба користити: атрибут bgcolor елемента body.
    Боја текста и боја позадине (имена боја, функција rgb(), декадно и хексадекадно задавање боја). CSS-својства color и background-color. Линијски и блоковски елементи
  • Слике
    • Слика као позадина произвољног елемента применом CSS-својства background (односно background-image, background-repeat). Постоје и могућности HTML-а које не треба користити: позадина документа помоћу атрибута background елемента body.
    • Унутрашње слике
      • Слика као део документа, елемент img, атрибути src, alt.
      • Глобални атрибути (id, class, title).
      • Димензије слике (ширина и висина). HTML-атрибути width, height. Скалирање и размера слике (енгл. aspect ratio). Ширина и висина слике се могу подесити и помоћу истоимених CSS-својстава width, height. CSS-јединице дужине.
      • Постоје и могућности HTML-а које не треба користити: атрибути align, border, hspace и vspace елемента img.
      • Слика као хипервеза у документу. Атрибут target elementa a и отварање линка у посебном прозору (вредности blank и window).
    • Хипервезе на произвољне ресурсе на интернету: пример са спољашњим сликама.
    Позадинске, унутрашње и спољашње слике. CSS-функција url() Слике као линкови. Онлајн галерије. Атрибут target и отварање линка у посебном прозору.

  • Повезати хипервезама датотеке prvi.html, bio-css.html и x.html тако да хипервезе буду представљене не текстом већ сликама из поткаталога animals каталога prez (тј. hotspot хипервезе треба да буде нека слика).

  • Мапа слика: елемент map, атрибут name; елемент area, атрибути shape, coords, href; атрибут usemap елемента img.
    Мапе слика.

  • Преузети слику виолинског и бас кључа и направити HTML-документ који садржи само ту слику и мапу која омогућава да се кликом било на виолински било на бас кључ отвори одговарајући чланак на Википедији (https://sr.wikipedia.org/wiki/Виолински_кључ, односно https://sr.wikipedia.org/wiki/Бас-кључ). Искористити MS Paint ради одређивања координата одговарајућих области у облику кругова.

    Виолински и бас кључ

(2 часа)

  • Листе
    • Ненумерисане (неуређене) листе (елементи ul и li, атрибут type)
    • Нумерисане (уређене) листе (елемент ol, атрибут type)
    • Форматирање листи помоћу CSS-а. Својства list-style-type, list-style-image.
      Типови ненумерисаних и нумерисаних листа. Својства list-style-type, list-style-image.
    • Описне (дефиниционе) листе (елементи dl, dt, dd)
    • Подлисте
  • Објектни модел документа (DOM). Дрво HTML-документа. Чворови (деца елемента, потомци елемента, родитељски чвор елемента, преци, сиблинзи).
  • CSS-селектори деце и потомака (размак, >)
  • CSS псеудоелементи.
    HTML5 DOM и CSS. Подлисте. CSS-селектори деце и потомака. Псеудоелементи ::before и ::after и симболи ненумерисаних листа.
  • CSS-својства display и visibility: sakrivanje elemenata.
  • CSS-псеудокласа :target
    Дефиниционе листе. CSS-својства display и visibility: сакривање елемената. CSS-псеудокласа :target

  • У оквиру последња два примера детаљно су наведени домаћи задаци које треба урадити.

(1 час)

  • Начини повезивања CSS-а и HTML-а.
    • Линијски CSS (атрибут style)
    • Унутрашњи CSS (елемент style)
    • Спољашњи CSS. Елемент link и атрибути rel, type, href. (Интернет) типови садржаја (раније MIME-типови)
    Начини повезивања CSS-a и HTML-а.
  • Модел кутије (енгл. box model). CSS-својства border/border-*, padding/padding-*, margin/margin-* (овде * замењује било какав низ карактера).
  • CSS-својство display: линијски и блоковски елементи, линијски блокови. HTML-елемент div.
    Линкови као дугмад. Модел кутије. CSS-својства display, border*, margin*, padding*, box-sizing: линијски и блоковски елементи, линијски блокови.

  • У оквиру последња два примера детаљно су наведени домаћи задаци које треба урадити.

(2 часа)

(1 час)

  • Формулари или форме (елемент form, атрибути action и method). Елементи (контроле) формулара:
    • заједнички атрибути свих елемената формулара name и value. Однос атрибута name и глобалног атрибута id;
    • улазни елементи различитих типова (елемент input, атрибут type):
      • текстуелна поља (вредности атрибута type: text, password, hidden). Специфични атрибути size, maxlength.
      • радио дугмад и дугмад за потврду (вредности атрибута type: radio, checkbox). Специфичан атрибут checked.
      • избор броја (вредност атрибута type: number). Специфични атрибути min, max, step.
      • избор датума (вредност атрибута type: date).
      • избор боје (вредност атрибута type: color).
      • дугмад за слање и поништавање (вредности атрибута type: submit, reset).
    • вишелинијско поље за унос текста, елемент (textarea, атрибути rows, cols).
    • падајућа листа или изборни мени (елемент select, атрибути name, multiple и size; помоћни елемент option и атрибут value).
    • груписање елемената (елементи fieldset, legend).
    • ознака елемента (елемент label, атрибут for)
  • Атрибутски CSS-селектори ([], [=], [^=], [$=], [*=], [~=], [|=])
  • Динамичке CSS-псеудокласе :checked, :required, :optional, :valid, :invalid.
    Елементи (контроле) формулара. Атрибутски CSS-селектори. Динамичке CSS-псеудокласе :checked, :required, :optional, :valid, :invalid.

(2 часа)

  • Сигурност на интернету. Видети и Krstev (2014: 39–44)
    • Подсетник — модел комуникације
    • Услови сигурне комуникације
    • Нарушавање сигурности на интернету
    • Мере заштите сигурности на интернету:
      • Шифровање. Симетрично и асиметрично шифровање. Инфраструктура јавног кључа. Дигитални потпис. Дигитални сертификат
      • Механизми ауторизације (лозинке, изазивачи, токени, паметне картице, дигитални сертификати, биометријске технике)
      • Ватробрани (енгл. firewall)
      • Анти-малвер
      • Заступнички сервер (енгл. proxy)
      • Консултанти за сигурност (најбољи консултанти су бивши хакери, типичан пример Кевин Митник који овом поучном причом показује да је човек увек најслабија карика у ланцу заштите сигурности на интернету)