ICRPredavanje-1.pdf

Interakcija čovek-računar 13:31 1 Organizatori kursa:  Predavanja  Zoran Ćirović, kab. 514  Vežbe  Biljana Bojičić  Martina Nikolić  Nikola Hajder 13:31 2 Provera znanja  Kontinuirana...  Pred...

Interakcija čovek-računar 13:31 1 Organizatori kursa:  Predavanja  Zoran Ćirović, kab. 514  Vežbe  Biljana Bojičić  Martina Nikolić  Nikola Hajder 13:31 2 Provera znanja  Kontinuirana...  Predavanja:  Rad na predavanjima.  Testovi (zatvoreni oblik pitanja).  Vežbe  Obavezne.  Rad na vežbama.  Projekti. 13:31 3 Literatura: 1. Materijali sa predavanja i 2. Materijali sa vežbi  “Dizajniranje korisničkog interfejsa”, Ben Shneiderman, Catherine Plaisant, CET 2006  “Human-Computer Interaction”, A.Dix, J Finlay, G Abowd, R Beale, Prentice Hall 2006  http://ocw.mit.edu/OcwWeb/Electrical-Engineering-and- Computer-Science/ 13:31 4 Organizacija online predavanja  Predavanja će biti snimana i dostupna studentima od termina koji je po rasporedu.  U terminu koji je u rasporedu radićemo online konsultacije gradiva koje po predavanju.  Vreme na predavanju se deli na:  izučavanje gradiva koje obuhvata teorijska znanja  Izučavanje alata koji obezbeđuju predznanje za rad na vežbama i sticanje praktičnih veština iz određenih oblasti  Posebne prezentacije iz nekih aktuelnih oblasti 13:31 5 Organizacija predavanja  Vreme na predavanju se deli na:  izučavanje gradiva koje obuhvata teorijska znanja;  Izučavanje alata koji obezbeđuju predznanje za rad na vežbama i sticanje praktičnih veština iz određenih oblasti;  Posebne prezentacije iz nekih aktuelnih oblasti u dogovoru sa profesorom. 13:31 6 Pitanja? 13:31 7 CSS pretprocesori Proširenje CSS-a 13:31 8 Šta je CSS Pretprocesor?  Pisanje CSS-a može postati prilično ponavljajuće, a mali zadaci kao što su traženje heksadecimalnih vrednosti boje, zatvaranje tagova i slično mogu trošiti mnogo vremena.  CSS pretprocesor je u osnovi skriptni jezik koji proširuje CSS i zatim ga kompajlira u uobičajeni CSS.  Najčešće korišćeni preprocesori su SASS, LESS, Stylus.  Slika: Iako je popularnost sama po sebi daleko od https://www.keycdn.com/blog/sass-vs-less/ pouzdanog kriterijuma, uvek je zanimljivo videti koliko se široko koriste ovi alati. Sass je popularniji - to ne znači da je Less lošija opcija. 13:31 9 Prednosti  Postoje brojne prednosti za korišćenje pretprocesora u odnosu na standradni CSS jezik. Jedna od osnovnih je mogućnost da se ne ponavlja kod, drugim rečima, omogućava važenje koncepta bez ponavljanja koda (eng. Don't Repeat Yourself).  Evo još nekih prednosti.  Čistiji kod sa komandama i varijablama za višekratnu upotrebu.  Štedi vreme.  Lakše za održavanje koda primenom koncepta snippets i biblioteka.  Proračuni i logika.  Organizovanije i lakše za podešavanje. 13:31 10  SASS nije samo najpopularniji CSS pretprocesor na svetu, već je i jedan od najstarijih.  Hampton Catlin ga publikovao ovaj pretprocesor 2006. godine, a kasnije ga razvija Natalie Veizenbaum.  Napisan je na Ruby jeziku. Međutim, precompiler LibSass omogućava Sass-u da se prevodi i pomoću drugih jezika. Sass ima veliku aktivnu zajednicu i široke resurse za učenje dostupne na mreži za početnike. Zahvaljujući svojoj zrelosti, stabilnosti i moćnoj logičkoj spretnosti, Sass se postavio na vrh CSS pretprocesora. 13:31 11  LESS (eng. Leaner Stilesheets).  Objavljen 2009. godine, autor Alekis Sellier. LESS je napisan u JavaScript-u.  LESS je JavaScript biblioteka koja proširuje funkcionalnost izvornog CSS-a (CSS vanila).  Sass vs. LESS  Vođena i vodi se i dalje žestoka rasprava koji je bolji. LESS je najjači konkurent Sass-u i drugi po broju korisnika. Jedan od retkih nedostataka LESS- a, u odnosu na Sass je taj što ne podržava funkcije. LESS koristi @ da deklariše varijable koje mogu izazvati konfuziju sa @media i @keyframes. Međutim, jedna od glavnih prednosti LESS-a nad Sass-om i Stylus-om ili bilo kojim drugim predprocesorom je jednostavnost njegovog dodavanja u projekat. To možete učiniti pomoću NPM-a ili ugradnjom datoteke Less.js. 13:31 12 Primena u Bootstrap-u  Less je zvanična Bootstrap 3 verzija. Međutim, Bootstrap 4 kreiran „od nule“, napisan je u potpunosti u Sass-u. I Less i Sass su kompajlirani u CSS za kreiranje fajla bootstrap.css. Osim toga, kreiraju se i minimizirana verzija bootstrap.min.css i fajlovi mape. To je CSS fajl koji ćemo mi koristiti. Prema tome, nije potrebno da poznajete jezik Sass da biste pratili Bootstrap-a. Međutim, njegovo znanje omogućava bolje razumevanje koncepata i stilizacije u Bootstrap-u radnom okviru, kao i promene u definisanim stilovima.  Kada je bootstrap izbacio LESS u korist Sass-a lansiranjem Bootstrap-a 4, LESS je postao definitivno manje popularan. 13:31 13  SASS Eng. Syntactically Awesome Style Sheets 13:31 14 Uvod Poreklo skraćenice  Sass = Syntactically Awesome Stylesheet.  Sass je proširenje za CSS.  Sass je CSS pretprocesor.  Sass je potpuno kompatibilan sa svim verzijama CSS-a.  Sass ukida ponavljanje CSS koda.  Sass besplatan za preuzimanje i upotrebu. 13:31 15 Kako Sass radi?  Veb čitač ne razume Sass kod, za razliku od CSS koda. Zbog toga je neophodno koristiti dodatni program tj. prevodilac, koji prevodi Sass dokument u standardni CSS dokument. Ovaj program se izvršava pre nego web čitač pristupi sajtu, pa se naziva pretprocesor za prevođenje Sass koda.  Ovaj proces prevođenja naziva se i transpilacija. Dakle, trebate da date transpileru (neka vrsta programa) neki Sass kod, a transpiler kao rezultat vraća odgovarajući CSS kod.  Napomena: eng. Transpiling je izraz za uzimanje izvornog koda napisanog na jednom jeziku i njegovo pretvaranje u drugi jezik.  Sass datoteke imaju određeni datotečni nastavak tzv. ekstenziju. 13:31 16 Sintakse Sass-a  Sass ima dve sintakse. Sintaksa koja se najčešće koristi je poznata kao "SCSS". Ova sintaksa predstavlja ujedno i proširenje sintakse CSS3. To znači da je svaki valjani CSS3 stil, takođe i SCSS stil. SCSS datoteke koriste ekstenziju.scss.  Druga, starija sintaksa, poznata je kao „uvučena“ sintaksa (ili samo „.sass“). Inspirirana je Haml-ovim principom jednostavnosti, namenjena je onima koji više vole sažetost zbog sličnosti sa CSS-om. Umesto zagrade odnosno tačke sa zarezom, koristi se uvlačenje linija za određivanje blokova. Datoteke u ovoj sintaksi koriste ekstenziju.sass. 13:31 17 Uporedni primer dve sintakse $blue: #3bbfce; $blue: #3bbfce $margin: 16px; $margin: 16px.content-navigation {.content-navigation border-color: $blue; border-color: $blue color: darken($blue, 9%); color: darken($blue, 9%) }.border.border { padding: $margin / 2 padding: $margin / 2; margin: $margin / 2 margin: $margin / 2; border-color: $blue border-color: $blue; } 13:31 18 Motivacija $bgColor: #aaa;  Pri razvoju velikih web sajtova CSS stilovi postaju veliki, $fgColor: #333; kompleksni i teški za održavanje. Zato se koriste CSS preprocesori.  Sass dozvoljava upotrebu novih karakeristika u odnosu na CSS. To su pre svih:.main-content {  promenljive, color: $fgColor;  ugnježdena pravila, background-color: $bgColor;  mixins, }  uključivanja (imports),  nasleđivanja,.menu-header {  ugrađene funkcije. background-color: $bgColor; }  Primer jednostavnog Sass koda:  Pretpostavimo upotrebu dve osnovne boje na našem sajtu..main-aside {  Definisanje se obavlja samo jednom. color: $fgColor;  Izmene se vrše na samo jednom mestu. background-color: $bgColor; } 13:31 19 Online transpileri za css preprocesore  https://www.cssportal.com/scss-to-css/  https://www.sassmeister.com/  https://jsonformatter.org/scss-to-css  Napomena: Pristup je važeći za 24.2.2024. 13:31 20 Sass transpileri  Kao Sass transpileri mogu se koristiti različiti programi ili dodaci postojećim programima.  Visual Studio  Instalacija dodatka Web Compiler https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler  Tada nakon kreiranja projekta imamo opciju na // Scss configuration tasks.json koneksnom meniju u prozoru Solution Expolorer { "version": "2.0.0", "tasks": [ da prevedemo ove fajlove. { "label": "Sass Compile", "type": "shell",  Visual Studio Code "command": "node-sass styles.scss styles.css",  https://code.visualstudio.com/docs/languages/css "group": "build" }  Instalacija pomoću npm alata ] }  Kreiranje specificnog zadatka tasks.json, a pokretanje Ctrl+Shift+B. Moguće je korititi i gulp.  Mi ćemo uraditi instalaciju određene ekstenzije 13:31 21 Instalacija samostalnih Sass transpilera - 1 Instalacija pomoću npm alata  Uslov da prethodno imate instaliran npm ili ceo node.js. https://docs.npmjs.com/downloading-and-installing-node-js-and-npm  >npm install npm –g  >npm install sass  Koristeći instalirani alat, radimo prevođenje iz komandne linije, na sledeći način:  sass [options] [output]  Na primer:  sass --watch primer1.scss primer1.css  Prate se promene na scss fajlu i nakon snimanja formira se novi css fajl. 13:31 22 Instalacija Sass transpilera za VSC  Uslov da prethodno imate instaliran Visual Studio Code.  Otvoriti karticu Extenssions.  U polje za pretragu uneti sass a zatim odabrati neki dodatak sa liste. Na slikama je prikazana instalacija „Live Sass Compiler“ dodatka.  Pri snimanju fajla automatski se pokreće prevodilac, koji ako je tačano napisan, prevodi isti u css. Ovo je tzv. watch mode koji se ne mora koristiti tj. pritiskom na skraćenicu ctrl+shift+P pa izborom komande. 13:31 23 Promenljive  Promenljive čuvaju određeni podatak tj. informaciju koja $myWidth: 700px; se, po pravilu, koristi više puta. $myFont: Tahoma, sans-serif; $myColor: green;  Sass koristi simbol $ uz naziv promenljive. Na primer $myFontSize: 1.2em;  $nazivPromenljive: vrednost;  Promenljiva čuva vrednost koja je: div {  string font-family: $myFont; font-size: $myFontSize;  broj color: $myColor;  boja }  boolean #container {  lista width: $myWidth;  null } 13:31 24  h1 { color: green; } $boja: blue; p { Opseg važenja promenljih color: blue; } h1 { $boja: green; Globalne promenljive color: $boja; }  Sass promenljive su važeće u nivou gde su definisane. Preklapanje se može ostvariti promenljivom istog imena na sledećem nivou. p { Pogledajte primer 1: color: $boja;  Podrazumevano preklapanje se može promeniti primenom !global } komande. !global definiše da je promenljiva globalna tj. da joj se može pristupiti sa svih nivoa. Pogledajte primer 2. h1 { color: green ; $boja: blue; } p { color: green ; } h1 { $boja: green !global; color: $boja; } p { 13:31 color: 25 $boja; } Komentari  Sass podržava standardne CSS komentare:  ,  // comment $boja1: #aabbbc; $boja2: #ca3412;.main-header { background-color: $boja1; // linijski komentar } 13:31 26 Skriptovanje  Sass omogućava osnovne funkcije skriptovanja:  Aritmetičke operacije,  Kontrolu toka,  Neke korisne funkcije. $text-size: 25px; $color: rgb(135, 204, 166); p { font-size: $text-size * 1.20; color: $color; // 10% svetlija nijansa, za ranije ver. Moguca je bila aritmeticka promena npr. * 1.10 } 13:31 27 Zadatak za samostalni rad  1. Instalirati Visual Studio Code.  2. Instalirati ekstenziju za SASS.  3. Koristeći neki od prvih primera u lekciji, testirati rad transpilera.  4. Uraditi 2 sopstvena primera:  Formiranje 4 veličine za font  Formiranje 4 boje  Primeniti definisane vrednosti na stilizaciju elemenata po izboru i tako pokazati način primene. 13:31 28