Search

Većina modernih web stranica današnjice ima složeni dizajn, privlačan i interaktivan sadržaj, koji uključuje mnoge značajke i usluge, uklapajući se pritom na svim trenutnim zaslonima i web preglednicima. Jedna od takvim usluga koja je ostvarila ubrzani rast i nije dosegla svoj vrhunac je i „E-trgovina”. E-trgovina predstavlja jednu od poslovnih metoda koja iskorištava prednost nadolazeće tehnološke ere. Navedeni diplomski rad u prvom dijelu opisuje proces planiranja i definiranja sadržaja i dizajna web stranice ili aplikacije kako bi se prilagodio svim uređajima i preglednicima današnjice. Objašnjavaju se pojmovi „mobile-first“ i „desktop-first“ te razlika između njih. Opisuje se razlika između responzivnog i adaptivnog web dizajna, te općenita razlika između web dizajna i UI/UX dizajna. Uvode se koncepti i nove tehnologije u izradi kao što su predprocesori SASS, LESS i trenutno novi PostCSS, te ES6+ javascript i CSS4 koji predstavljaju tehnologije weba u budućnosti. U drugom dijelu diplomskog rada definira se pojam e-trgovina na primjeru Sylius platforme. Analizira se Sylius-ova arhitektura te način rada razvojnog programera (frontend) na navedenoj platformi. Definiraju se sve točke procesa tehnološke izrade počevši od kreiranja vlastite teme pa sve do realiziranog konkretnog rješenja. Most modern web sites today have complex design, appealing and interactive content, which includes many features and services, adaptable to all current screens and web browsers. "Ecommerce" is the one of those services that has rapid growth and has not reached its culmination. E-commerce is one of the business methods that takes advantage of the upcoming technological era. This graduate paper describes the process of planning and defining the content and design of a website or application to adapt to all devices and browsers of today. The terms "mobile-first" and "desktop-first" are explained and the difference between them. Main difference between terms responsive and adaptive web design, and the general difference between web design and UI / UX design. Explanation of concepts and new technologies that are being developed with the predprocessors like SASS, LESS and the current new PostCSS, ES6 + javascript and CSS4, which represent the technology of the web in the future. In the second part of this graduate paper, the term e-commerce is defined with the practical example of Sylius e-commerce platform. Analysis of Sylius architecture and workflow of web developer is being described. All points process of technological development is defined starting from creating own unique theme until final project realization.

Svrha ovog završnog rada je obraditi i objasniti LESS.js te na kraju za praktični rad napraviti internetsku stranicu o LESS-u sa svrhom učenja tog CSS pred-procesora. LESS, odnosno CSS pred-procesori su nezaobilazni programski jezici u svijetu izrade internetskih stranica. Svatko bi morao početi koristiti neki od pred-procesora nakon što dobro savlada CSS. Vrlo ih je lako naučiti zbog sličnosti u sintaksi koja se ne razlikuje ili se razlikuje vrlo malo što je važno za početnike. Oni proširuju stilski jezik i daju mu razne mogućnosti poput varijabli, nestinga, operacija i funkcija koje je vrlo lako shvatiti i koristiti. Koriste ih većina front-end developera, odnosno ljudi koji izrađuju internetske stranice kako se ne bi ponavljali kod pisanja koda. LESS je poznatiji pred-procesor i vrlo zastupljeni među programerima. Praktični dio završnog rada napravljen je kako bi početnicima pomogao savladati LESS. Napravljena je internetska stranica, odnosno 6 .html datoteka koje uz definicije i primjere kodova objašnjavaju najvažnije značajke LESS pred-procesora. The purpose of this final paper is to explain LESS.js and on the end of the paper make a LESS web site for the purpose of learning this CSS preprocessor. LESS, or CSS preprocessor are inevitable programming languages in the world of front-end development. Once we master CSS, everyone would have to start using some of the preprocessor. It is very easy to overcome them because of similarities with CSS in syntax that is not different or varies very little and that is very important for beginners. They extend the CSS style language and give it various features like variables, nesting, operations and functions that are easy to understand and use. They are used by most front-end developers because they don't want repeat code writing. The practical part of the final work is made to help beginners overcome the LESS. An web site or 6 .html files have been created that, along with definitions and code examples, explain the most important features of the LESS preprocessor.

Rad CSS procesori i metodologije za cilj ima približiti svrhu postojanja alata za procesiranje CSS-a početniku u svijetu razvoja internetskih aplikacija. Opisana su četiri glavna predstavnika alata za procesiranje CSS-a – SASS, LESS, Stylus te PostCSS. Uz to, dan je kratki pregled povijesti razvoja Cascading Style Sheets-a i njegovih ograničenja koja su posljedično dovela do razvoja alata za procesiranje CSS-a. Prikazani su osnovni primjeri koristeći navedene alate te su izdvojene razlike i prednosti, odnosno nedostatci među njima. Osim toga, opisane su metodologije pisanja CSS koda koje doprinose čitljivosti i pravilnoj strukturi koda. Uz sve nabrojano, izvršena su mjerenja brzine obrađivanja koda koristeći svaki od obrađenih alata te su izdvojene njihove prednosti i nedostatci. Ovaj rad pruža generalni pregled glavnih dostupnih alata koji omogućavaju lakši rad s CSS-om, ali za detaljniju se analizu preporuča iscrpna dokumentacija svakog pojedinačnog alata od navedenih. Na posljetku, poglavljem Budućnost CSS-a i alata za procesiranje CSS-a pokušava se predvidjeti daljnji razvoj alata odnosno hoće li u budućnosti uopće biti i potrebni. Thesis “CSS processors and methodologies” aims to familiarize beginners in a world of web development with CSS processors and their purpose. Four of the main representatives have been described, namely SASS, LESS, Stylus, and PostCSS. Also, CSS’s history has been summarized together with its shortcomings which ultimately led to development of CSS processors. Simple code examples written in each of the aforementioned tools are provided which highlight differences, advantages and disadvantages among them. Main methodologies for writing CSS code have been described, all of which help with readability and proper code structure. Furthermore, using each of the covered tools, speed test for compiling code have been created which showcase their strong and weak points. This thesis’ main goal is a high-level overview of all main CSS processors which can help with writing CSS, but for a deeper insight in the each tool a look in its detailed documentation is advised. Finally, the chapter titled Future of CSS and CSS processing tools tries to paint a picture of a further development of the CSS processing tools and will their assistance even be necessary in the near future.

Ovaj rad istražuje problematiku brzog razvoja web-aplikacija temeljenog na jeziku JavaScript. U sklopu toga uspoređene su metode razvoja poput Scruma, Leana i Ekstremnog programiranja, te dostupni alati za brzi razvoj poput razvojnih okolina, baza podataka, itd. Istraženi su programski okviri i rješenja za razvoj web-aplikacija na klijentskoj i poslužiteljskoj strani te prikazane njihove prednosti i mane. Na kraju rada je opisan primjer implementirane web-aplikacije kroz primjenu istraženih alata. This paper researches the issue of rapid web-application development with JavaScript. It compares the methods for rapid development such as Scrum, Lean and Extreme Programming and there is a comparison between the tools available such as development environments, databases, etc. A research has been done on frameworks and solutions for front- and back-end development and their pros and cons have been shown. The end of the paper describes the implemented web-application developed with tools on which the research was conducted.