Web-sivujen kirjoittamiseen ei välttämättä tarvitse mitään erityisiä ohjelmia. Tavalliselta Windows-käyttöjärjestelmällä varustetulta PC-tietokoneelta löytyy useimmiten Internet Explorer -selain, sekä tekstieditori Muistio (Notepad). Vakavampaa käyttöä varten kannattaa kuitenkin asentaa paremmin Web-standardeja tukeva selain, sekä tekstieditori joka osaa ainakin värittää koodia. Tällä kurssilla käytetään selaimena Mozilla Firefoxia, ja editorina Crimson Editoria. Olen koonnut alle myös muita maksutta käytettävissä olevia ohjelmia verkkosivujen suunnitteluun.
Internet-selain
Työvaiheessa sivujen esikatseluun kannattaa käyttää mahdollisimman edistynyttä selainta. Mozilla Firefox tukee web-standardeja hyvin, lisäksi siihen on saatavilla web-ohjelmointia helpottavia lisäosia. Myöhemmin sivuja on syytä testata ensi alkuun myös Internet Explorerilla (versiolla 6 ja 7), sekä mahdollisimman monella muulla.
Tavallisia Windows-selaimia
- Mozilla Firefox
- Suomenkielisen version lataussivu.
- Internet Explorer
- Internet Explorer -selaimen kotisivut.
- Opera web browser
- Internet-selain. Huom! Valinnalla View > Small Screen voi testata miltä sivut näyttävät Operan puhelinversiossa.
- Google Chrome
- Googlen selain.
Selaimia web-ohjelmoijalle
- Browsershots
- Ilmainen verkkosivujen testaus eri selaimilla, eri käyttöjärjestelmissä.
- BrowserCam
- Palvelussa voi testata sivun toiminnan eri selaimilla, eri käyttöympäristöissä. Ilmainen 24h koekäyttö vaatii rekisteröitymisen.
- Install multiple versions of IE on your PC
- Vanhempien Internet Explorer -versioiden asentaminen jo asennetun IE7:n rinnalle. Mikäli ehdolliset kommentit eivät toimi oikein, ks. Taming Your Multiple IE Standalones.
- IEs4Linux
- Internet Explorerin versiot 6, 5.5 ja 5 Linuxille sivujen testausta varten.
- Developer Tools in Internet Explorer 8 Beta 2
- IE8:aan on sisäänrakennettu joitakin kehitystyökaluja.
Tekstieditori
XHTML:n ja CSS:n kirjoittamiseen soveltuu aivan mikä tahansa tavallinen tekstieditori, kuten Windowsin oma Muistio (Notepad). Kannattaa kuitenkin ladata ja asentaa ilmaiseksi saatava Crimson Editor, joka värittää koodia lukemisen helpottamiseksi.
- Crimson Editor
- Ilmainen teksti- ja html-editori.
- Notepad++
- Erinomainen tekstieditori joka värittää koodia.
- NoteTab Text Editor
- HTML-editori, erittäin hyvä ilmaisversio NoteTab Light.
- HTML Kit
- Ilmaisista editoreista kaikkein eniten toimintoja.
- Real-time HTML Editor
- Eräänlainen editori, ehkä hyödyksi alkeita opetellessa.
- CSS Editors Reviewed
- CSS-editoreja, lähinnä Windows/Mac.
Linuxilla peruseditorina toimii hyvin Gedit ihan sellaisenaankin. Tässä lisäohjeita.
Tiedonsiirto
Tiedonsiirtoon työkansion ja verkkosivupalvelimen välillä tarvitaan useimmiten erillinen ohjelma.
- FileZilla
- Ilmainen FTP-tiedonsiirto- ja palvelinohjelma. Englanninkielinen asennusohje.
- SSH Secure Shell 3.2.9 non-commercial
- Ilmainen versio SSH-tiedonsiirto-ohjelmasta.
Kuvankäsittely
Kuvien käsittelyyn tarvitaan. Linuxille kehitettävä GIMP on saatavilla myös Windowsille.
- GIMP
- Ilmainen avoimen lähdekoodin kuvankäsittelyohjelma vaativaan käyttöön. Ohjelmasta enemmän GIMP-oppaassa.
- Inkscape
- Ilmainen vektorigrafiikkaohjelma.
- OpenOffice.org
- Toimisto-ohjelmistopakettiin kuuluvalla OpenOffice.org Draw -ohjelmalla voi piirtää vektorigrafiikkaa.
Firefox-lisäosat
Mozilla Firefox selaimen mukavuuksia on mahdollisuus asentaa vapaasti saatavilla olevia lisäosia. Alla muutamia web-ohjelmoinnin avuksi.
- 15 Helpful In-Browser Web Development Tools
- Selaintyökaluja verkkkosivujen kehittämiseen, ja linkkejä oppaisiin niiden käyttämiseksi.
Perustyökalut
- Firebug
- Todella monipuolinen työkalu XHTML:n, CSS:n ja JavaScriptin muokkaamiseen ja testaamiseen. Katso myös Debug and tune applications on the fly with Firebug.
- Web Developer
- Erittäin suositeltava lisätyökalurivi web-ohjelmoijalle. Poimii erilaisia tietoja sivusta, helpottaa validointia.
Selainten testaus
- Fangs - the screen reader emulator
- Toimii kuvaruudunlukijan tavoin. Saavutettavuuden testaamiseen.
- IE Tab
- Avaa Firefox-sivun IE-versiona Firefoxissa tai erillisessä IE-ikkunassa.
- OperaView
- Avaa Firefoxissa avoinna olevan sivun Operassa.
- Safari View
- Firefox-lisäosa Macille. Avaa avoinna olevan Firefox-sivun Safarissa.
Värit
- ColorZilla
- Monipuolinen työkalu web-sivun värien analysointiin.
- Palette Grabber
- Poimii websivun väripaletin.
Ulottuvuudet
- MeasureIt
- Tällä voi mitata minkä tahansa sivun kohdan pikselikoon.
Tiedonsiirto
- FireFTP
- FTP-tiedonsiirto selainikkunassa.
- Server Switcher
- Lisää osoiteriville painikkeen näkymän nopeaksi vaihtamiseksi julkaistun kotisivun ja esim. paikallisen koneen työkansion/testipalvelimen välillä.
Optimointi
- Dust-Me Selectors
- Näyttää avoinna olevalla sivulla käyttämättömät CSS-valitsimet.
- Html Validator for Firefox and Mozilla
- Validoi web-sivut selaamisen yhteydessä. Tilarivin oikeaan reunaan sijoittuvaa kuvaketta klikkaamalla saa esille tarkat tiedot virheistä. Html validator on kätevä apuväline ainakin aluksi, mutta siltä jää virheitä huomaamatta.
- Live HTTP Headers
- Palvelimen lähettäminen HTTP-otsakkeiden tarkistamiseen.
- YSlow for Firebug
- YSlow testaa erilaisia sivun latausnopeuteen liittyviä tekijöitä, antaa vihjeitä niiden huomioimiseksi. Vaatii Firebug-lisäosan.
Lisää Firefox-lisäosista Internet-oppaan Firefox-sivulta.
Internet Explorer -lisäosat
- Internet Explorer Developer Toolbar
- Firefoxin Firebug ja Web Developer -työkalujen tyyppinen verkkosivun analysointityökalu IE:lle. Katso myös An Introduction to the Internet Explorer Developer Toolbar