uvod v svetovni splet
1. letnik VS
FERI
UM
Vaja 1 Print

Predpriprava na vaje

Rešite naslednje teste na W3Schools, da preverite vaše poznavanje osnovnih spletnih tehnologij

 

Poznavanje HTML-ja

http://www.w3schools.com/quiztest/quiztest.asp?qtest=HTML

 

Poznavanje CSS-ja

http://www.w3schools.com/quiztest/quiztest.asp?qtest=CSS

 

Poznavanje JS-a

http://www.w3schools.com/quiztest/quiztest.asp?qtest=JavaScript

Vaja 1

Rešitev naloge je potrebno oddati preko sistema SUPZ do 11. 3. 2014, do 23.55. Nalogo bo potrebno zagovoriti na naslednjih vajah (12.3.).

Uporaba knjižnice jQuery je dovoljena.

Implementirajte preprosto spletno aplikacijo za risanje, kot je prikazano na sliki.

 

Uporabniški vmesnik omogoča risanje na mreži dimenzije 16 x 16 celic, kjer lahko celico pobarvamo z eno od 16 sivin, od črne do bele. Barvo določimo s pomočjo palete, kjer je trenutno izbrana barva nakazana z rdečim okvirjem. Barvo celice spremenimo s klikom v celico. Barvo v paleti izberemo s klikom na željeno barvo. Bela barva je v paleti označena z velikim X. Gumb "Napolni" spremeni barvo vseh celic risalne površine na trenutno izbrano barvo, npr. če je v paleti trenutno izbrana bela, potem se po kliku na gumb "Napolni" zbriše narisana slika. Gumb "Preštej" s pomočjo AJAX zahteve pošlje trenutno sliko na strežnik, kjer PHP skripta prešteje število črnih, belih in drugih celic, vrednost pa vrne nazaj na spletno stran, kjer se števila izpišejo, kot je prikazano na sliki spodaj.

 

 

Specifikacije

CSS:

  • vsebina spletne strani je centrirana, tudi naslov, paleta, gumbi in risalna površina
  • v ozadju je slika, ki se ponavlja samo po širini
  • zunanji okvir je širok 420 px
  • naslov je velikost 32px, Tahoma,
  • paleta je generirana s pomočjo JavaScript (v nadaljevanju JS), barve so: #000000, #111111, #222222 ... #EEEEEE, #FFFFFF, bela je označena z veliko sivo črko X
  • trenutno izbrana barva je označena z 1px rdečim okvirjem, celice palete so velikosti 20px x 20px
  • risalna površina zajema 16 x 16 celic velikosti 20px x 20px
  • vsi robovi so srebrne barve

JavaScript:

  • ob nalaganju strani se izriše paleta s prej naštetimi barvami, črna barva je privzeto izbrana
  • ob nalaganju strani se izriše risalna površina s 16 x 16 celicami bele barve,
  • klik na barvo palete spremeni trenutno izbrano barvo, kliknjena celica dobi rdeč rob (prejšnja izbrana barva rob izgubi)
  • klik na celico risalne površine spremeni barvo celice na trenutno izbrano celico
  • klik na gumb "Napolni" spremeni barvo vsem celicam risalne površine na trenutno izbrano barvo
  • klik na gumb "Preštej" pošlje trenutno sliko na strežnik s pomočjo asinhronega klica. Na strežniku se v PHP skripti prešteje število črnih, belih in ostalih celic, podatek pa se pošlje nazaj na spletno stran, kjer se številke izpišejo v pojavnem oknu

PHP

  • prešteje število črnih, belih in ostalih celic
  • če podatek o barvah ni prisoten, potem vrne niz "Ni podatka!"

 

Navedeno morate izdelati in uspešno zagovoriti da dosežete oceno 6. Za višje ocene je potrebno izdelati še dodatne funkcionalnosti.

 

Za oceno 7:

Določanje poljubne dimenzije risalnega polja  (od najmanj 8 do največ 64), pri čemer naj celotna velikost risalnega polja ostane enaka (320px), spreminja naj se le dimenzija celic oz. resolucija.

Menjava monokromatske tabele z izbiro poljubne barve, kjer si uporabnik lahko zbere enega izmed standardnih načinov vnosa barve (rgb, poimenovano, heksadecimalna vrednost )

 

 

Za oceno 8:

Ocena 7 +

Dodajanje orodja za risanje ravne črte, kjer uporabnik izbere začetno in končno točko, celice vmes pa se pobarvajo glede na izbrano barvo.

Za risanje črte uporabite Bersenham-ov algoritem.

 

Ocena 9:

Ocena 8 +

Omogočiti shranjevanje narisanih slike ter njihov priklic s pomočjo local storage ali php.

 

Ocena 10:

Polje celic nadomestite z značko canvas. Omogočite risanje ravne črte ter prosto risanje z držanjem miškinega gumba. Prav tako omogočite izbiro barv, izbiro velikosti risalnega polja ter shranjevanje slike ter njen ponoven prikaz (php ali local storage).

 

 

Vse potrebne datoteke stisnite v datoteko vaja1.zip ter jo oddaje preko sistema SUPZ.