Web-portfolio HTML5- ja CSS3-tekniikoita käyttäen

Abstract

Internet ja IT-ala kehittyvät jatkuvasti. IT-alan ammattilaisen tulee jatkuvasti opetella uutta ja on pysyttävä ajan hermolla ollakseen ammattilainen. Uudet tekniikat, kuten HTML5 ja CSS3 ovat yleistyneet web-kehityksessä viimeisen vuoden tai kahden aikana, ja standardien kehittyessä sekä yleistyessä tulevat ne käyttöön laajemmin web-sovellusten kehitystyössä. Tekniikoiden uskotaan myös laajenevan ohjelmistokehitykseen, kuten Windows-pohjaisten sovelluksien kehitykseen.

Opinnäytetyön tavoitteena oli rakentaa web-portfolio HTML5- ja CSS3-tekniikoita käyttäen. Opinnäytetyössä ei ole toimeksiantajaa, vaan sivusto kehitetään omaksi taidonnäytteeksi, jota on helppo jakaa ja näyttää esimerkiksi mahdollisille työtilaisuuksien tarjoajille. Lisäksi opinnäytetyön tarkoituksena oli kehittää omaa osaamista ja ammattitaitoa. Sivusto koostuu neljästä erillisestä sivusta joihin kuuluvat etusivu, portfolio-sivu, tietoa-sivu ja yhteyttä-sivu. Tavoitteena oli luoda näyttävä ja toimiva sivusto. Jatkokehitystoimeksi jäivät kustomoidut virhesivut ja sivun kääntäminen englannin kielelle.

Raportissa kuvataan sivuston toteutuksessa käytettyjä uusia tekniikoita, joihin lukeutuvat HTML5 ja CSS3. Lisäksi esitellään muita opinnäytetyössä käytettyjä tekniikoita, kuten jQuery-kieltä sekä web-ohjelmoinnin apuvälineitä, joihin lukeutuvat Google Analytics ja Google Webmaster Tools. Selaimien tukea uusia tekniikoita kohtaan tutkitaan myös tietoperustassa.

Opinnäytetyönä tehty sivusto koodattiin alusta saakka itse puhtaalta pöydältä. Sivuston toteutuksessa käytettiin apuna Adobe Dreamweaver-ohjelmistoa, joka on web-ohjelmoijaa helpottava HTML-koodausohjelma. Grafiikan tuottamiseen käytettiin vuorostaan Adobe PhotoShop-ohjelmaa. Tiedostojen siirtoon palvelimelle käytettiin FireFTP-lisäosaa, joka asennetaan suoraan Mozilla Firefox selaimeen. Näitä ohjelmia käytettiin siksi, koska kyseiset ohjelmat olivat jo ennestään tuttuja, ennen opinnäytetyön aloittamista.

Lopputuloksena opinnäytetyönä toteutettu sivusto on halutun näköinen ja sen toiminnalliset osat toimivat kuten niiden pitäisi. Uudet tekniikat tulivat opinnäytetyötä tehdessä tutuiksi ja ammattitaitoa on näin ollen kehitetty opinnäytetyötä tehdessä. Jatkokehitystehtäväksi sivustolle jäivät sivuston kääntäminen englanniksi ja kustomoidut virhesivut.

The Internet and IT-industry is in continuous development. IT experts will continue to learn about the new technologies and need to be highly up-to-date to be professional. New technologies, such as HTML5 and CSS3 are more prevalent on the web in the last year or two, and in the light of the standards, as well as continue to proliferate, to take them in the wider context of the web development. Also these technologies are believed to become an advocate of software develop-ment technologies, such as a Windows-based application development.

The aim of the work was to build a web portfolio utilizing the HTML5 and CSS3 techniques. The thesis had no client, instead the site was developed to indicate personal skills in the sample that is easy to distribute and display, for example, for potential employers. In addition, the purpose of the work was to develop personal skills and professionalism. The site consists of four separate pages including main page, portfolio page, information page and contact page. The objective was to create an impressive and effective Web site. In addition to what was completed the customized error pages and page translation to English language remains to be done.

The report describes the implementation of the new technologies used in the site, including HTML5 and CSS3. In addition, other techniques are presented as part of the used techniques, such as jQuery-language, and web programming support tools, including Google Analytics and Google Webmaster Tools. Browsers to support new technologies are also discussed in the thesis.

The web pages were coded from scratch. Adobe Dreamweaver software was used as an aid in the coding of the site. This software is a helpful tool for web programmers. The graphics were produced, in turn, with the Adobe PhotoShop program. The transfer of the files to the server was done by FireFTP addition, which is installed directly in the Mozilla Firefox browser. These programs were used because they were already familiar prior to the start of the work of the theses.

The end result was a website, which appearance was as desired, and the functional components on the site work exactly as they should. The new technoloqies used in this thesis became familiar within the work and personal professionalism was increased as a result of this project. Further development of the site involves translation of the key pages in English and creating customized error pages.