WWW-Sivustojen suunnittelu Miten WWW toimii Web-selain hakee Web-sivun HTML-kielisen kuvauksen Sivuun liittyvät kuvat (jpeg, gif, png) Sivuun liittyvät muut elementit Palvelimen URL-osoite esim. http://www.metropolia.fi Web-palvelin Julkaisu HTML ja muiden tiedostojen siirto palvelimelle Asiakkaan Web-selain Internet, Intranet, Ekstranet Web-sivusuunnittelija Web-editori Kuvankäsittely AV-ohjelmistot Suunnittelun lähtökohdat Suunnitteluvaiheet 1. Konseptisuunnittelu 2. Sisältösuunnittelu 3. Graafinen suunnittelu 4. Web-sivun koostaminen 5. Testaus ja ylläpito Näyttörajoitteet - Otettava huomioon jo suunnitteluvaiheessa - Laitteiden resoluutiot (Apple, Nokia, PC) Liittymänopeuksien kirjo - Kevyemmät sivustorakenteet mobiililaitteille - Kiinteät laajakaistat riittäviä 1
Selainversiot ja sivusuunnittelumetodit Otettava Huomioon eri selaimet ja niiden erot grafiikan piirtämisessä. Ongelmana varsinkin vanhemmat versiot selaimista Yhteiset pelisäännöt hitaasti kehittymässä Staattinen HTML Frame tai taulukkotaito Paikallaan pysyvä Dynaaminen HTML Interaktiivisuus, reaaliaikasuus CSS-tyylimäärittelyt Flash/Silverlight Komponentteja HTMLsivujen joukossa tai itsenäisiä kokonaisuuksia Vektorigrafiikka, video, ääni Tyypillisiä sivustorakenteita HTML sivustoissa on huomattavissa tiettyjä yleisesti toistuvia elementtejä Logo vasemmassa yläkulmassa Vaaleat taustat Isot väripinnat Herätekuva tai video Erillaiset sivut Käytettävyys Brändi Web-hotellit Palvelun tarjoajia jotka maksua vastaan antavat asiakkaan käyttöön tilan ja muita palveluita Hoitavat mahdollisesti Domain-nimen varauksen mikäli asiakkaalla ei vielä semmoista ole tai ohjaavat liikenteen uudelleen vanhalta palvelimelta. Asiakas saa tunnukset joilla ottaa yhteyttä palvelimeen ja julkaista materiaalia verkossa tai vain siirtää omia tiedostojaan palvelimelle. Web-hotellipalvelut - Vaivattomampia kuin omat palvelimet - Tehokkaan verkkoyhteydet - Varmuuskopiointi, tietoturva - Lukuisia palveluntarjoajia - Hinta ei takaa laatua - Tarkista referenssit ja harkitse jos joku tarjoaa liian halvalla tai liian kalliilla tilaa - Huomioi päivitettävyys (esim. suurempi tila tai siirtokapasiteettirajan korotus) 2
HTML-koodaus. Wysiwyg -editorit Graafiset editorit joilla näkee suoraan mikä on lopputulos Lokaali editointi, ei vaadi nettiyhteyttä Yleensä itse siirrettävä verkkoon palvelimelle Helppo luoda perus HTML+CSS -sivuja (myös JavaScript) Esimerkiksi Adobe DreamWeaver Esimerkki Wysiwyg -editorista HTML-koodaus. Muut editorit HTML-koodia voi tuottaa vaikka Notepadilla Avustavat ohjelmat, tarkoitettu koodaamiseen Eivät rajoitu pelkästään web-koodaukseen Ei välttämättä graafista esitystä, siirrettävä tarvittaessa palvelimelle tai pystytettävä lokaali palvelinympäristö Esimerkkejä: Notepad++ Jext Eclipse 3
Esimerkki Notepad++ -editorista Pikseligrafiikka Jpeg, Gif, Png Grafiikka websivuilla Vektorigrafiikka Flash, Silverlight Pikseligrafiikka Gif-kuvat Max 256 väriä, tukee läpinäkyvyyttä. Pienet kuvat tai kuvat joissa vähän värejä. PNG-kuvat 256 väriä (png8) tai milj. värejä(png24), tukee läpinäkyvyyttä Sekä pienet, että isot kuvat Jpeg-kuva Miljoonia värejä, maisema/sävykuviin 4
Vektorigrafiikka Flash Adoben webkehitysympäristö Skaalautuvaa grafiikkaa/animaatiota Tuki omalle ActionScript -skriptikielelle Silverlight Microsoftin vastaava tuote Tuki.NET-kielille ja työkaluille Web-sivuston rakentaminen Sisällönhallinta Sisällönhallinta järjestelmät (CMS) Drupal, Wordpress, Joomla Yleensä helppo ottaa käyttöön Ei tarvitse keksiä pyörää uudelleen. Ennalta määritetyt käyttäjät tuottavat materiaalin Käyttäjätasot esim. vieras, kirjoittaja, julkaisija, admin Ylläpito suorittaa tarkastuksen ja julkaisun 5
Hallittu aloitus 1. Projektin täsmällinen aloitus ja selkeä työnjako 2. Dokumentointi 3. Kehitysympäristön ja web-palvelimen valmistelu 4. Aineiston koostaminen (sivut, kuvat, tekstit) 5. Testaus 6. Tarkka julkaisusuunnitelma Dynaaminen HTML DHTML (Dynamic HTML) sateenkaaritermi tekniikoille, joilla lisätään staattiseen HTMLrakenteeseen toiminnallisuutta. -Wikipedia Yleisimpiä DHTML tekniikoita Client-side Tarkoitus on muuttaa web-sivun sisältöä (koodia) ilman, että sivua ladataan uudelleen suoraan käyttäjän koneella. JavaScript CSS DOM 6
Yleisimpiä DHTML tekniikoita Server-side Palvelimelta tuotettu dynaaminen sivun prosessointi, jolla luodaan käyttäjälle oma sisältö sivulle. PHP.NET framework (useita eri kieliä) Java CSS (Cascading Style Sheets) -tyylit Antaa tyyliohjeet web-sivun eri osille Voi määrittää myös kaikille elementeille yhteisiä tyylejä Selainten väliset erot. Eri renderöintitapa johtaa pieniin eroavaisuuksiin grafiikan esittämisessä. Esimerkki CSS-tyylimäärittelystä body{ } a { } background-color: #ff34f3; font-family: tahoma; font-size:12px; color: #FFF; color:#161616;.luokka { } font-size:20px; padding: 5px; width: 150px; #div{ Background-color: #1115ff; } 7
JavaScript Web-ympäristöön kehitetty kieli, joka soveltuu hyvin dynaamisten toiminnallisuuksien toteuttamiseen. Yksinkertainen JavaScript koodi jossa on luotu nayta_huomio niminen funktio, joka luo alertboxin jossa lukee määritetty teksti. Nayta_huomio funktio ajetaan joka kerta, kun painetaan nappia. DOM Document object model on standardi, joka määrittää HTML objektien käsittelyn ja käytön. Se mahdollistaa muilla ohjelmointi- tai scriptauskielillä pääsyn sivun rakenteeseen ja muutoksien tekemisen. PHP,.NET, Java Ohjelmointikieliä, joita ajetaan palvelimella ja jotka luovat sisältöjä esitettävälle sivulle. Pystyvät hyödyntämään tietokantoja, jolloin pääsy suuriinkin tietovarastoihin. 8
Dynaaminen sivutuotanto Käyttäjä Web-palvelin Tietokantanäkymät PHP-tulkki MySQL tietokanta Hyötynä - Tietojärjestelmäsovitus - Massiiviset sivumäärät MySQL operointiin - Unix-käyttäjille komentokieli - Verkossa käytettävät työkalut esim. phpmyadmin Web-hotelli (ja testipalvelin) - MySQL ja PHP - Tunnukset - Tietokannan nimi - Hallintatyökalut - Web-palvelin - julkaisupaikka Omaan testipalvelimeen - Web-palvelin - PHP-ympäristö - MySQL-tietokanta - Hallintatyökalut Esim XAMP + Eclipse 9