SJIWP

LV01:Web preglednici i web pretraživači

1.      Što su web preglednici? Navedite sve koje imate instalirane na računalu zajedno sa inačicom.

Web preglednici su programske aplikacije dizajnirane za pregledavanje World Wide Weba (WWW) ili internetskog sadržaja.

Google Chrome (verzija: 80.0.3987)

Firefox (72.0.2)

Microsoft Edge (44.17763.831.0)

Explorer (11.00.17763.771)

2.  Što su web pretraživači (tražilice)? Navedite pet različiti. Objasnite im mogućnosti, odnosno razlike.

Web pretraživači su internet stranice koje omogućuju pretragu informacija na Internetu.

1.       Google

2.       Bing

3.       Yahoo

4.       Metacrawler

5.       Yandex

1. WEB preglednici

A.Što rade i za što se koriste web preglednici, čemu sve veću važnost pridaju suvremeni preglednici? ( https://www.techopedia.com/definition/288/web-browser)

Web preglednici su programi i oni pristupaju web pretraživačima preko kojih se dolazi do informacija. Uglavnom preko njih pristupamo internetskim stranica. Danas preglednici najvežu pažnju posvećuju sigurnosti na Interentu tj. bore se protiv cyber napada.

B. Što su plug-in-ovi, što omogućuju i kako se dodaju pregledniku? Navedite primjere

Plug-in-ovi su nešto što svaki preglednik podržava i omogućuju razne datoteke. Mogu omogućivati dodatnu sigurnost ili neke dodatke na određenim stranicama. Na primjer, dodatak na Chrome-u, E-dnevnik+ omogućuje grafički prikaz kalendara sa ispitima i još mnogo toga.

C. Koji su koraci u radu preglednika nakon upisa URL-a?

Prvo će se stranica pingati. Ako postoji učitat će se, a ako dođed o greške ta greška će se ispisati na ekranu. Ako stranica ne postoji onda će se ispisati da stranica ne postoji.

D. Skicirajte shematski prikaz preglednika

E. Što je cross browser testing i zašto je važno?

Cross browser testing je uspoređivanje i analiziranje kako se neka internet stranica ponaša u različitim okruženjima preglednika. Omogućuje optimalno korištenje internet stranica.

3.      WEB Pretraživači

A.  Objasnite općenito kako rade tražilice. Odaberite neku od predloženih i objasnite kako rade njihovi algoritmi (Google, Bing, Youtube, DuckDuckGo i sl.)

Indeksiranje: tražilice šalju alate za indeksiranje , također poznate kao roboti ili pauci, da pregledaju sadržaj web stranice.

Indeks: Nakon što je web stranica pretražena, tražilice moraju odlučiti kako organizirati informacije. Proces indeksiranja je kada oni pregledavaju podatke web stranice radi pozitivnih ili negativnih signala rangiranja i pohranjuju ih na ispravno mjesto na svojim poslužiteljima.

Rang: Tijekom procesa indeksiranja, tražilice počinju donositi odluke o tome gdje prikazati određeni sadržaj na stranici s rezultatima tražilice (SERP).

 Google tražilica:

​

1.Query meaning: pokreće se algoritam koji pronalazi ono što korisnik želi to jest najbolje rezultate za to

2.Web page relevance: ovdje se web stranice slažu po relevantnosti

3.Content quality: provjerava se kvaliteta pojedinih rezultata i njihovih sadržaja

4.Web page usability: Google daje prednost stranicama koje se lakše koriste

5.Additional context and settings: provjeravaju se posebne postavke.

​ B. Objasnite zašto je važno znati kako rade web pretraživači.

Važno je znati kako rade web pretraživači kako bi mogli odabrati nog koji nama najviše odgovara te da znamo koji je najsigurniji i najbolji.

C. Na koje se načine ostvaruje upotrebljivost tražilice?

Upotrebljivost tražilice se ostvaruje na osnovu brzine mogućnosti korištenja na mobilnom uređaju. Nitko ne želi dugo čekati da se stranice učitavaju i tbog toga se stranuice poredaju po brzini učitavanja. Također je važna i mobilna verzija tj. sinkronizacija između mobilne i desktop verzije.

​

D. Što podrazumijeva personalizacija tražilica?

​ Personalizacija tražilice podrazumijeva neke informacije kao što je vaša lokacija. Ako tražite restorane za ručak tražilica će na osnovu vaše lokacije ponuditi najbliže i najbolje ocjenjene. Također možemo personalizirati i izgled tražilice (boje, font...)

E. Objasnite SEO (Kako funkcionira i zašto je važno?)

SEO je proces optimizacije internetskih stranica za tražilice, odnosno skup tehnika čiji je cilj organsko povezivanje prometa određenog internetskog sjedišta, kao i povećanje kvalitete samog internetskog sjedišta.

LV02: SKRIPTNI JEZICI NA INTERNETU

Ivan Bilkić i Leon Madunović

1.Napišite definiciju skriptnih jezika

Skriptni jezici su programski jezici više razine za izvršavanje kratkih programa bez prethodne kompilacije. Koriste se za automatizaciju zadataka, uključujući web razvoj i administraciju sustava. Primjeri uključuju Python, JavaScript, Ruby i Shell skripte poput Bash-a i PowerShell-a.

2.Navedite primjere skriptnih jezika

Python, JavaScript, Ruby, Perl, Bash, PowerShell, PHP, Lua, R.

3. Napišite definiciju markup jezika.

Markup jezik je jezik za označavanje teksta ili medija pomoću oznaka (tagova) radi strukturiranja i oblikovanja sadržaja. Primjeri uključuju HTML za web stranice, XML za podatke i Markdown za formatiranje teksta. Oznake opisuju strukturu i značenje sadržaja te kontroliraju prikaz ili obradu.

4. Navedite primjere markup jezika.

HTML (HyperText Markup Language), XML (eXtensible Markup Language), LaTeX, Markdown, SGML (Standard Generalized Markup Language), YAML (YAML Ain't Markup Language), JSON (JavaScript Object Notation).

IZVOĐENJE VJEŽBE

A,B.

Naziv

Definicija i/ili opis

Kratki primjer koda

Bash

Bash skriptni jezik je programski jezik i ljuska (shell) za Unix-like operacijske sustave, koji se koristi za automatizaciju naredbi i zadataka.

```bash

#!/bin/bash

echo "Hello, World!"

```

JavaScript

JavaScript je visokonivojski programski jezik za interaktivnost na web stranicama.

console.log("Hello, World!");

Ruby

Ruby je jednostavan i produktivan programski jezik s fokusom na čitljivosti i objektno orijentiranom programiranju.

puts "Hello, World!"

Phython

Python je popularan programski jezik poznat po čitljivosti i fleksibilnosti.

print("Hello, World!")

Perl

Perl je visokonivojski programski jezik posebno dizajniran za obradu teksta i automatizaciju.

print "Hello, World!\n";

PHP

PHP je popularni skriptni jezik za izradu dinamičkih web stranica i aplikacija.

<?php

  echo "Hello, World!";

?>

VBScript

VBScript je Microsoftov interpretirani skriptni jezik za automatizaciju zadataka i interakciju s Windows komponentama te web preglednicima.

MsgBox "Hello, World!"

C. Nabrojite i ukratko objasnite četiri prednosti skriptnih jezika.

Prednosti skriptnih jezika uključuju:

1. Brza razvojna vremena: Skriptni jezici često imaju jednostavnu i čitljivu sintaksu, što omogućava brzo pisanje i testiranje koda. To je posebno korisno za prototipiranje i razvoj aplikacija s kratkim rokovima.

2. Univerzalna primjenjivost: Skriptni jezici se mogu koristiti u različitim kontekstima i za različite svrhe, uključujući web razvoj, administraciju sustava, analizu podataka i automatizaciju. To ih čini svestranim alatima.

3. Laka čitljivost i održavanje: Većina skriptnih jezika dizajnirana je tako da olakšava razumijevanje koda. Ovo čini lakšim održavanje i suradnju između različitih programera.

4. Dinamičko tipiziranje: Skriptni jezici obično podržavaju dinamičko tipiziranje, što znači da nije potrebno eksplicitno deklarirati tipove varijabli. To olakšava fleksibilnost i brže pisanje koda, ali može zahtijevati pažljivije testiranje kako bi se izbjegle greške.

D. Nabrojite četiri primjene skriptnih jezika.

Primjene skriptnih jezika uključuju:

1. Web razvoj

2. Administracija sustava

3. Analiza podataka

4. Automatizacija zadataka

E. Što je Node js?

Node.js je open-source okruženje za izvođenje JavaScript koda na strani poslužitelja, omogućujući brzo izvršavanje i skalabilnost aplikacija.

F. Što je V8 JavaScript Engine?

V8 JavaScript Engine je brz i otvoren JavaScript engine razvijen od strane Google-a, korišten u Google Chrome i mnogim drugim aplikacijama.

G. Navedite prema popularnosti od najviše do najniže pet skriptnih jezika sa postotcima. Pronađite što relevantnije podatke.

Python- 14.16%, C-11.27%, C++-10.65%, Java-9.49%, C#-7.31%

 https://www.tiobe.com/tiobe-index/

Iz Listopada 2023.godine

2.MARKUP JEZICI

A. Što znači riječ markup u današnjoj, elektroničkoj eri?

Markup u elektroničkoj eri znači označavanje i oblikovanje digitalnog sadržaja pomoću oznaka kako bi se definirala struktura, stil i interpretacija sadržaja, uključujući web stranice, dokumente i podatke.

B. Markup jezici su statični. Što to znači?

Markup jezik je statičan jer ne koristi algoritme. Ne koristi se baza podataka - u praksi to znači da jedini način uređivanja sadržaja stranice zahtijeva uređivanje HTML oznaka. U slučaju markup jezika, podaci su predstavljeni u određenom formatu tako da dotični softver zna što s njima treba učiniti.

C.

Naziv jezika

Opis

Primjer koda

SGML(Standard Generalized Markup Language)

SGML (Standard Generalized Markup Language) je standardizirani jezik za označavanje teksta i strukturiranje elektroničkih dokumenata.

<document>

  <title>This is the Title</title>

  <content>

...

  </content>

</document>

HTML(HyperText Markup Language

HTML (HyperText Markup Language) je jezik za označavanje i strukturiranje web sadržaja, koristi oznake za definiranje elemenata na web stranicama.

<!DOCTYPE html>

<html>

<head>

  <title>Primjer HTML-a</title>

</head>

<body>

  <h1>Dobrodošli na web stranicu</h1>

  <p>Ovo je primjer HTML-a.</p>

</body>

</html>

XML(Extensible Markup Language

XML (eXtensible Markup Language) je jezik za označavanje podataka u obliku teksta, omogućuje strukturiranje i razmjenu podataka između aplikacija i sustava.

<person>

  <name>John Doe</name>

  <age>30</age>

  <city>New York</city>

</person>

D. Objasnite što je hypertext.

Hypertext je način organizacije i povezivanja informacija putem linkova, omogućujući interaktivnu i nestrukturiranu navigaciju na webu i drugim digitalnim medijima.

E. Ukratko objasnite što je HTML DOM

HTML DOM je programski način predstavljanja strukture web stranica, omogućujući programerima da pri stupaju, mijenjaju i reagiraju na elemente web stranica, čime se omogućava dinamičko programiranje i interaktivnost. Struktura HTML DOM-a je hijerarhijska, prikazana kao stablo elemenata.

LV:03 NAZIV VJEŽBE:DEFINIRANJE I PROCES RAZVOJA MREŽNOG SJEDIŠTA 

AUTORI: IVAN BILKIĆ I LEON MADUNOVIĆ 

PRIPREMA ZA VJEŽBU 

1. Nabrojite korake (u literaturi ih je obično pet do osam) u procesu dizajna i razvoja mrežnog sjedišta. Opišite u nekoliko rečenica karakteristike svakog koraka. 

a) Istraživanje – Prvi korak u dizajniranju uspješne web stranice je prikupljanje informacija. 

Svrha – Koja je svrha stranice? Želite li pružiti informacije, promovirati uslugu, prodati proizvod itd. 

Cilj – Što se nadate postići izgradnjom ove stranice? Dva uobičajena cilja su zaraditi novac ili razmijeniti informacije. 

Ciljana publika – Postoji li određena skupina ljudi koja će vam pomoći da ostvarite svoje ciljeve? Korisno je zamisliti svog idealnog kupca. Uzmite u obzir njihovu dob, spol ili interese – to će pomoći u određivanju najboljeg stila dizajna za vašu web-lokaciju. 

Sadržaj – Kakve će informacije ciljana publika tražiti na vašoj stranici? Traže li određene informacije, određeni proizvod ili uslugu itd. 

b) Planiranje – Koristeći prikupljene informacije potrebno je sastaviti plan o izradi web-stranice. Ovdje također odlučujemo koje tehnologije treba implementirati. 

c) Dizajn – Na temelju informacija prikupljenih do ovog koraka, određujemo izgled i dojam stranice. 

d) Razvoj stranice – Ovdje nastaje sama funkcionalna web stranica. 

e) Testiranje i isporuka – Ovdje se bavimo posljednjim detaljima i testiramo vašu web stranicu. 

f) Održavanje – Jednom kada je vaša stranica pokrenuta, to ne znači da je sav posao gotov. 

Jedan od načina da dovedete ponovljene posjetitelje na svoje web mjesto je redovito nuditi ažurirani sadržaj. 

2. Nabrojite najmanje pet različitih tehnologija koje pomažu u procesu razvoja mrežnog sjedišta. 

Napišite im kratice i ukratko opišite čemu služe. 

HTML- HTML je prezenracijski jezik za izradu web stranica. Služi za strukturiranje web stranice i njezinih sadržaja  

CSS – CSS je korišten za stiliranje i layout web stranica npr. Mijenjanje fonta, boje, veličine…  

JS – JavaScript se koristi za kreiranje dinamičkih i interaktivnih web sadržaja  

AJAX – AJAX dopušta asinkronično ažuriranje web stranica izmjenjivanjem podataka sa serverom  

JSON – JSON se koristi izmjenjivanje strukture podataka preko mređe, obično između servera i web aplikacija  

3. Što je, odnosno što opisuje vremenski plan razvoja mrežnog sjedišta? Navedite tri različita alata koji mogu pomoći u pisanju vremenskog plana. Pronađite bar jedan besplatan. 

Vremenski plan web stranice opisuje nužne korake u izradi i lansiranju web sjedišta.  

Strategije i planiranje(2 do 10 tjedana)  

Dizajn(4 do 12 tjedana)  

Pisanje i slaganje sadžaja(5 do 15 tjedana)  

Kodiranje(6 do 15 tjedana)  

Beta testiranje(2 do 6 tjedana)  

Lansiranje (1 dan do 2 tjedna)  

Alati: Monday.com, Smartsheet.  

4. Što je mapa sjedišta? Pokušajte pronaći alat koji bi vam mogao pomoći u prikazu te mape i navedite njegovo ime. 

Mapa sjedišta je datoteka u kojoj pružate informacije o stranicama, video zapisima i drugim datotekama na vašoj web-lokaciji i međusobnim odnosima. Tražilice poput Googlea čitaju ovu datoteku kako bi učinkovitije indeksirale vašu web stranicu. 

5. Što je mockup (wireframe)? Koji alat ili program možete koristiti da biste ga prikazali? 

Mockup je umjetnički prikaz dizajna ili proizvoda koji prikazuje navedeni proizvod na djelu. Mockup može biti model, slika ili scena predloženog dizajna ili proizvoda, a često se koristi za demonstraciju, obrazovanje ili promociju. 

6. Što se podrazumijeva pod pojmom izgled web sjedišta (web site layout)? 

Izgled web sjedišta je raspored svih vizualnih elemenata na web sjedištu. Sastoji se od početne stranice, kategorija, potkategorija te pojedinačnih postova i stranica. 

7.Proučite sadržaj i svrhu stranica posljednje navedene poveznice. Kakve se smjernice tamo navode i tko ih se treba pridržavati? Koje vam se od njih čine posebno važnima? 

Svrha stranice je definiranje i mjerenje elementa stranice. Na stranici se navode smjernice za upravljanje web projektima što je opisano uz korake za dizajniranje i razvoj web sjedišta. Najvažnijim nam se čine smjernice vezane uz dizajniranje i izradu same web stranice. 

8. Što čini tzv. ROT analizu? 

ROT analiza pomaže identificirati sadržaj koji je suvišan, zastario ili trivijalan. Uspoređivanjem s analitičkim podacima, potrebama korisnika i istraživanjem korisnika, omogućuje glavnim upravama da dodatno analiziraju relevantnost njihovog sadržaja za korisnike. 

IZVOĐENJE VJEŽBE 

1.

2.  

3. Primjer mrežnog sjedišta 

Za zamišljeni projekt razvoja mrežnog sjedišta napravite slijedeće: 

Vremenski plan poštujući tipično vrijeme trajanja 

Mapu mrežnog sjedišta. 

Skicu odabrane stranice zamišljenog mrežnog sjedišta. 

Navedite poveznicu na web sjedište koje bi vam izgledom ili korisničkim sučeljem moglo 

poslužiti kao primjer za vaše zamišljeno sjedište (site). 

https://sites.google.com/view/ivanbilkicfromhr/po%C4%8Detna-stranica

LV 6 

LV 7 

LV 8 

LV 9 

LV 10 

LV 11