MUKAUTUVA WEB-KEHITYS Jari-Matti Seppälä Opinnäytetyö Toukokuu 2014 Tietojenkäsittelyn koulutusohjelma Luonnontieteiden ala KUVAILULEHTI Tekijä(t) Julkaisun laji Päivämäärä Seppälä , Jari-Matti Opinnäytetyö 12.05.2014 Sivumäärä Julkaisun kieli 52 Suomi Verkkojulkaisulupa myönnetty ( X ) Työn nimi MUKAUTUVA WEB-KEHITYS Koulutusohjelma Tietojenkäsittelyn koulutusohjelma Työn ohjaaja(t) Immonen, Jarkko Toimeksiantaja(t) Jyväskylän ammattikorkeakoulu, Tietojenkäsittelyn koulutusohjelma Tiivistelmä Mobiililaitteet yleistyvät kovaa vauhtia ja samaan aikaan Internetiä selataan niillä yhä enemmän. Tämä aiheuttaa haasteita Internet-sivujen kehitykselle, koska eri laitteille halutaan oma räätälöity versio selattavasta sivustosta. Aiemmin perinteisessä web-kehityksessä sivuista on tehty erilliset versiot desktop-päätelaitteille ja mobiililaitteille. Tämän mallin ongelmana on sivuston erillisten versioiden työläs ylläpito ja työmäärä jo sivun kehitysvaiheessa. Nykyisin sivujen kehityksen suuntana on mukautuva web-kehitys, jossa sivusta tehdään vain yksi versio ja tämä sama sivu mukautuu käyttäjän päätelaitteen tai selainikkunan koon mukaisesti hänen näytölleen helposti käytettäväksi. Työssä käytiin läpi mitä mukautuva web-kehitys on. Lisäksi käsiteltiin tekniikoita, joita tarvitaan sivuston toteuttamiseen mukautuvan web-kehityksen periaatteilla. Työn toimeksiantajana toimi Jyväskylän ammattikorkeakoulun tietojenkäsittelyn koulutusohjelma. Uudet opiskelijat osallistuvat opintojensa alkuvaiheessa Web Page Development-opintojaksolle, jossa opetellaan Internet-sivujen tekemistä. Materiaalia mukautuvan web-kehityksen opettamiseen ei ollut kyseisellä opintojaksolla tulevaisuuden kannalta tarpeeksi, ja sen myötä tässä työssä toteutettiin kehittämistyönä Foundation-frameworkin päälle rakennettu tutoriaalisivusto, joka on tarkoitus ottaa opetuskäyttöön Web Page Development -opintojaksolla. Sivusto itsessään toimii esimerkkinä mukautuvasta sivusta, ja siltä löytyy linkkejä tutoriaaleihin. Tutoriaalisivusto todettiin hyväksi keinoksi opetella mukautuvan web-kehityksen perusperiaatteita. Sivuston toimivuutta opetuskäytössä voisi tulevaisuudessa tutkia ja mahdollisesti jatkokehittää sivustoa. Lisäksi voisi tutkia vaihtoehtoisia tapoja opetusmateriaalin toteuttamiseksi. Avainsanat (asiasanat) Web-kehitys, mobiililaitteet, tutoriaalisivusto, responsiivisuus Muut tiedot DESCRIPTION Author(s) Type of publication Date Seppälä, Jari-Matti Bachelor´s Thesis 12052014 Pages Language 52 Permission for web publication ( X ) Title RESPONSIVE WEB DESIGN Degree Programme Business Information Systems Tutor(s) Immonen, Jarkko Assigned by JAMK University of Applied Sciences, Business Information Systems Abstract The number of mobile devices is increasing every day and at the same time the use of those devices for browsing the Internet is increasing rapidly, which causes challenges for developing web -sites because there is a need to show a customized version of the site for different devices used to browse the site. A common style to develop web-sites was to produce different versions of the site for desktop devices and mobile devices. The problem with that technique is the huge workload it takes to develop and maintain the site. Nowadays the trend of developing web-sites is responsive web design. The idea of responsive web design is to make only one version of the site that adapts according to the device used to browse the site or the size of Internet browser and adapting makes the site easier to navigate. This thesis defines responsive web design and discusses what the techniques are needed to develop websites with responsiveness in mind. This thesis was assigned by JAMK University of Applied Sciences, -Business Information Systems. New students take part in Web Page Development course at the beginning of their studies. The goal of the course is to learn how to make websites and so far there has not been enough material for future needs of the course to teach responsive web design. With that in mind this thesis developed a tutorial site on Foundation- framework as a development project and the site is planned to be launched as a teaching tool of the course. The site itself acts as an example of responsive website and it contains links to more tutorials. The tutorial site was found to be a good way to learn the basics of Responsive Web Design. Alternative ways to produce teaching material could be researched in the future and also how well the site works for teaching purposes. The site could be then improved if needed. Keywords Web -development, mobile devices, tutorial site, responsiveness Miscellaneous 1 SISÄLTÖ KÄSITTEET .............................................................................................................. 4 1 JOHDANTO ..................................................................................................... 5 2 TUTKIMUSASETELMA ..................................................................................... 6 2.1 Opinnäytetyön tavoitteet ja rajaukset ...................................................... 6 2.2 Tutkimusmenetelmät ............................................................................... 7 2.3 Tutkimuskysymykset ................................................................................ 8 3 WEB-KEHITYKSEN PIIRTEITÄ ............................................................................ 9 3.1 Web-kehityksen teknologiat ..................................................................... 9 3.2 Perinteinen web-kehitys ......................................................................... 18 3.3 Mukautuva web-kehitys ......................................................................... 22 3.4 Mukautuvan web-kehityksen hyödyt ...................................................... 29 4 OPETUSSIVUSTON TOTEUTUS ....................................................................... 30 4.1 Oppimateriaalin toteuttaminen .............................................................. 30 4.2 Foundation ............................................................................................. 31 4.3 Tutoriaalisivusto ..................................................................................... 32 5 POHDINTA .................................................................................................... 47 5.1 Tavoitteet .............................................................................................. 47 5.2 Tulokset ................................................................................................. 47 LÄHTEET .............................................................................................................. 50 2 KUVAT Kuva 1. JavaScriptin käyttö canvas-elementin sisällä ............................................ 12 Kuva 2. Kuva kiinteällä (fixed width) leveysmäärityksellä ..................................... 20 Kuva 3. Kuva kiinteällä (fixed width) leveysmäärityksellä kavennettussa selainikkunassa .................................................................................................... 21 Kuva 4. Kuva suhteellisella (relative width) määrityksellä iPhonella katsottuna .... 25 Kuva 5. Boston Globe-sivuston alaosa leveällä selainikkunalla .............................. 26 Kuva 6. Sivuston alaosa kapealla selainikkunalla .................................................. 27 Kuva 7. Sulautuva ruudukko sivustolla ................................................................. 29 Kuva 8. Foundationin kansiorakenne .................................................................... 33 Kuva 9. Foundation-pohjan käyttöönotto ............................................................. 34 Kuva 10. Foundationin blogipohja oletuksena ...................................................... 37 Kuva 11. Tutoriaalisivuston etusivu ja yksi pudotusvalikoista täysikokoisella selainikkunalla ..................................................................................................... 38 Kuva 12. Tutoriaalisivuston etusivu ja yksi pudotusvalikoista kapealla selainikkunalla ..................................................................................................... 39 Kuva 13. Tekstin ja kuvan skaalautuminen ........................................................... 40 Kuva 14. Mukautuvan web-kehityksen osa-alueet tutoriaalisivustolla .................. 41 Kuva 15. Ohjeita opiskelijalle media query-osiossa ............................................... 42 Kuva 16. Hääkauppa ............................................................................................ 43 3 Kuva 17. Mukautuva hääkauppa täysikokoisena ................................................... 44 Kuva 18. Hääkaupan yläosan mukautuvuus .......................................................... 45 Kuva 19. Hääkaupan alaosan mukautuvuus .......................................................... 46 4 KÄSITTEET CSS Framework Tyylipohja, jota voidaan hyödyntää sivuston kehityksessä CSS3 Uusin versio WWW-dokumenttien ulkoasun määrittämiseen tarkoitetusta tyyliohje- kielestä Foundation Kokoelma työkaluja web-sivujen ja sovelluksien luomiseen HTML5 Uusi versio verkkosivujen tekemiseen yleisesti käytetystä HTML-merkintäkielestä JavaScript Pääasiassa Web-ympäristössä käytettävä komentosarjakieli Media query CSS:n ominaisuus, jonka avulla voidaan määrittää eri CSS-tyylejä eri mediatyypeille tai ominaisuuksille 5 1 JOHDANTO Perinteisesti web-sivuista on tehty erilliset versiot desktop-päätelaitteille sekä mobii- lilaitteille. Tämä on aiheuttanut kehitykselle haasteita,