Työkalut 2008-11-22 14:53

Kuvaus:

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
Luokka:
Avainsanat:, , , , ,
http://raulihaverinen.fi/verkko-opas/?id=95