Tyylikehys verkkokehittäjille

Abstract

Insinöörityön tavoitteena oli tehdä verkkokehittäjille tyylikehys, joka on helppo ja nopea opetella. Työn toisena tavoitteena oli, ettei kehys sisältäisi lainkaan verkkosivujen ohjelmointikieltä.

Insinöörityö sisälsi vaiheet tyylikehyksen suunnittelusta aina toteutukseen saakka. Tyylikehyksen sisältö määrittyi tutkimalla muita kehyksiä, sekä aikaisempien projektien myötä. Tyylikehyksen ominaisuuksia ovat muun muassa responsiivisuus, Parallax-rullaus ja valikot, jotka rakennettiin kaikki erillisinä osioina. Myöhemmin nämä osiot yhdistettiin yhdeksi kokonaisuudeksi. Työssä käytettiin CSS- ja HTML-merkintäkieliä, joiden avulla muodostettiin esimerkit tyylikehyksen osioista. Tyylikehyksen esimerkkisivu on rakennettu Wordpress-nimisen sisällönhallintajärjestelmän päälle.

Insinöörityön tuloksena syntyi toimiva tyylikehys, joka helpottaa kaikkia web-kehittäjiä tekemään työläitä osioita ilman omia tyylisääntöjä. Projektin aikana opittiin paljon kehysten tekemiseen vaadittavasta työstä ja huolellisesta suunnittelusta. Insinöörityön tuloksista ilmeni, että uuden tyylikehyksen luominen vaatii sen tekijältä runsaasti aikaa ja paneutumista. Projektin aikana ilmenivät myös oman tyylikehyksen rakentamisen edut ja mahdolliset haitat.

Tyylikehyksen oltua pidempään käytössä voidaan ymmärtää sen lopullinen merkitys ja hyöty. Tyylikehys ei todennäköisesti koskaan ole täysin valmis, vaan sitä voidaan kehittää jatkuvasti. Kehykseen voidaan lisätä uusia ominaisuuksia, jotta siitä on hyötyä kehittäjille myös tulevaisuudessa.

The goal of the study was to make a front-end framework for web developers that is easy to use and fast to learn. The second goal of the study was that the framework would not include any programming language like JavaScript.

The thesis describes all stages from planning to execution. The content of the front-end framework was made by investigating other frameworks and by combining recent projects combined. A few of these features are responsiveness, Parallax-scrolling and menus. All of these features were made separately and combined later on. The front-end framework was made by using the CSS and HTML markup languages. Also the examples were made by using these markup languages. The example page of the front-end framework was made on top of a content management system called Wordpress.

As a result, a working front-end framework was created, which makes the work of web developers easier without creating any own rules to the style sheet. During the project a lot was learned about making a framework and about careful planning. The results indicate that making a new front-end framework requires a lot of time and commitment. The project also showed what the benefits and the possible disadvantages of making one’s own framework are.

When the front-end framework has been in use for a longer time, its final purpose and benefits can be understood. The framework will probably never be fully completed, but it can be developed continually. More features can be added to the framework, so that it will be useful to developers in the future.