Nettisivuntekijän apuohjelmat

Kevätsiivous

Viimein sain itseäni niskasta kiinni ja kävin jälleen läpi useita satoja kirjanmerkkejä sisältävän Opera-selaimeni, joka on toiminut ykkösselaimenani jo suht pitkään*. Ja kuten olettaa saattaa, ainakin kolmannes läpikäymistäni bookmarkeista onkin nykyään joko lakannut tyystin olemasta tai käynyt hyödyttömäksi. Siitä, mitä jäljelle jäi, poimin nettisivujen teon parhaat apuohjelmat tähän kirjoitukseen.

Arvelin, että löytämistäni linkeistä saattaisi kenties olla hyötyä nettisivujen parissa työskenteleville hipstereille tai vaikkapa jonneille, jotka vasta alalle opiskelevat. Kaikki listatut ovat tietysti ilmaisia web-sovelluksia.

* Vanhimmat kirjanmerkit selaimen kansioissa on päivätty vuodelle 2002!

 

Apuohjelmat ilman laitteistorajoituksia

Kaikki listatut ohjelmat ovat verkossa toimivia sovelluksia, joten voit käyttää niitä millä tahansa tietokoneella nettiselaimessa. Mobiilitoimivuudesta en tiedä. Listassani osa on ladattavia tiedostoja, joiden pitäisi kyllä aueta myös joka tietokoneella.

 

HTML5 Boilerplate

Olbedesign kevätsiivous: Web designerin apuohjelmat
HTML5 Boilerplate on mainio starttipaketti sivuston rakennuksen pohjaksi.

 

Tämä on yksi aivan ylivoimaisesti parhaista aloituspohjista, joka ei rajoita sivuston suunnittelijan vapauksia. Boilerplate antaa vain valmiit aloitusdokumentit, joissa on satoja rivejä kymmenien ammattilaisten hyväksi havaitsemia fiksauksia ja ominaisuuksia.

Linkki: http://html5boilerplate.com/

 

 Initializr

Olbedesign kevätsiivous: Web designerin apuohjelmat
Initializr on Boilerplateen pohjautuva paketti responsiivista sivustoa varten.

 

Mikäli haluat ajan hengen mukaisesti pykäistä responsiivisen, eli myös mobiiliruudulle luontevasti mukautuvan sivuston, kannattaa kääntää katse Boilerplateen pohjautuvaan Initializr:iin. Kustomointivaihtoehtoja on useampia kulloistenkin tarpeidesi mukaan.

Linkki: http://www.initializr.com/

 

 960 Grid System

Olbedesign kevätsiivous: Web designerin apuohjelmat
960 Grid System on hyvä apuri kun haluat sivun, jonka elementit asettuvat siististi.

 

Mikäli haluat toteuttaa sivustot nykyaikaisesti, mutta kuitenkaan säälittävästi responsiivisuuteen vajoten, otat käyttöön 960 Grid Systemin, eli tuttavallisemmin 960gs:n. Tämän avulla pystyt asettelemaan sisällön ja elementit napakasti palstoihin, mikä auttaa esimerkiksi pitkien tekstien selkeässä esittämisessä.

Elementtien välit ja leveys on määrätty CSS-pohjaan, josta poimit vain luokkamääritykset kullekin elementille ja ne lupsahtavat nätisti paikoilleen. Helppoa ja hauskaa. Ellet mokaile. Tarvittaessa voit hienosäätää sivuston omassa CSS-tiedostossa palstavälistysten margin-arvoja ja sen sellaista. Taustalla ladattuun 960gs-CSS-tiedostoon ei välttämättä kannata koskea ettet särje sitä. Sitten ei kyllä toimi.

Pohjaa on saatavilla 12, 16 ja 24 palstan versiona, valitse sopiva sen mukaan minkälaista asettelua suunnittelet. Maksimileveys on aina 960 pikseliä.

Linkki: http://960.gs/

 

 Gridulator

Olbedesign kevätsiivous: Web designerin apuohjelmat
Gridulaattorilla pykäät nätit apuviivat suunnittelua varten.

 

”Gridulaattori” antaa mukavan suunnitteluavun jo sivuston ulkoasun luonnosvaiheeseen. Tämän avulla luot helposti PNG-kuvan jota voit käyttää luonnoksessa asetteluapuna myöhempää 960gs-asemointia varten.

Linkki: http://gridulator.com/

 

 Instantblueprint

Olbedesign kevätsiivous: Web designerin apuohjelmat
Instantblueprint ei vässyköi apuviivojen kanssa, vaan keskittyy luomaan sinulle hyvän pohjan sivustoa varten

 

Mikäli naurat halveksuen mokomien lapsellisten apuviivojen käyttäjille, uskon sinun värisevän mielihyvästä nähdessäsi Instantblueprintin tarjoamat avut. Pystyt kirjaimellisesti sekunneissa luomaan lennossa peruspohjan sivuston rakentamiselle ilman turhia lisukkeita. No okei, kyllä siinä saa valita halutessaan samaan pakettiin jQueryn ja CSS:n peruspohjat.

Linkki: http://instantblueprint.com/

 

 CSS 3.0 Maker

Olbedesign kevätsiivous: Web designerin apuohjelmat
CSS 3.0 Maker on helppo keino saada tarvittavat tiedot CSS3:n selainkohtaisille ominaisuuksille.

 

Mikäli olet kuten minä, etkä muista aina tarvittaessa jokaisen CSS3-atribuutin oikeanlaista syntaksia eri selaimille, tässä on sinulle siihen puuhaan leppoisa apuri. CSS 3.0 Makerissa on CSS3:n uudet ominaisuudet selkeästi listattuna ja reaaliaikaisella mallikuvalla esitettynä. Oikeassa reunassa näet muuttuvan CSS-koodin, jonka voit saman tien kopioida suoraan omaan tyylitiedostoosi. Tai, mikäli et edusta ihan sitä terävintä kynää penaalissa, voit myös ladata saman tiedon vaivalloisesti erillisenä tekstitiedostona.

Samalla näet myös, tukeeko selaimesi kyseistä ominaisuutta. Itse kun olen pyrkimässä Operan uusimmalla versiolla Gradient-välilehdelle, ilmestyy sivulle hätääntynyt ilmoitus:

”sorry this browser not sapported, plsece check other browser” (sic)

Kyllä siinä kieltämättä itsekin hätääntyy kun yrittää saada selvää, mitä ilmoitus haluaa kertoa.

Linkki: http://www.css3maker.com/

 

HTML5 & CSS3 Support

Olbedesign kevätsiivous: Web designerin apuohjelmat
Erikoisempien kikkailujen kanssa on oltava tarkkana että ne toimivat eri selaimissa.

 

Mikäli epäilet, mahtaako CSS3-tiedostosi uusi hieno laatikon kieputus tai läpinäkyvyysefekti toimia, voit tarkistaa nykyisen toimivuuden eri selainversioissa helposti näistä taulukoista.

Vaihda samalla Internet Explorerisi toisen valmistajan selaimeen. Se on helppoa, klikkaat vain taulukon kuvakkeita ja pääset lataussivulle. Tai päivitä IE:si edes uusimpaan versioonsa. Säästyt monelta harmilta ja tietoturvauhalta.

Linkki: http://www.findmebyip.com/litmus/

 

Samuel L. Ipsum

Olbedesign kevätsiivous: Web designerin apuohjelmat
Samuelin oma Lorem ipsum on toista maata. Samuel ei tue antiikkisia jorinoita. Samuel tahtoo kertoa tarinan.

 

Tämä on juurikin sinulle, joka olet jo totaalisen kyllästynyt iänikuisiin ”Lorem ipsumeihin”, eli ulkoasuluonnosten täyteteksteihin. Tai sinulle, joka haluat hämmentää asiakkaita luonnoksen teksteissä esiintyvillä, kovin Tarantinomaisilla repliikeillä. Halutessasi voit luoda samalla valmiit Header- ja P-tagit html-sivua varten. Samuel L. Ipsum –generaattorilla luot satunnaisesti vaikkapa seuraavanlaisen hersyvän hauskan täytetekstin:

”No, motherfucker!
Look, just because I don’t be givin’ no man a foot massage don’t make it right for Marsellus to throw Antwone into a glass motherfuckin’ house, fuckin’ up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, ’cause I’ll kill the motherfucker, know what I’m sayin’?”

Ja ei sitten muuta kuin Slipsuttelemaan!

Linkki: http://slipsum.com/

 

 Font Squirrel

Olbedesign kevätsiivous: Web designerin apuohjelmat
Font Squirrel tarjoaa web-julkaisukäyttöön ilmaisia, käsin poimittuja fonttiperheitä.

 

Ja, jotta Slipsumilla luomasi tekstit eivät olisi pelkästään 90-lukulaista Arialia, voit maustaa sivustosi ulkoasua nettikäyttöön räätälöidyllä (ja lisensoidulla) fonttipaketilla.

Tähän hommaan Font Squirrel on paras. Se kertoo olevansa ammattilaisille tehty palvelu, jonne on käsin poimittu freeware-lisenssin alaisia, suht laadukkaita fontteja. Niitä on myös melko monta.

Vain yksi pieni mutta: fonttipaketit ovat käytettävissä vain nettijulkaisussa, eli käytännössä et voi asentaa niitä koneellesi ellei toisin mainita. Työasemakäyttöönkin monet niistä on saatavilla, mutta siitä pitää maksaa jonkinmoinen lisenssimaksu. Tämä tietysti hankaloittaa suunnittelupuolta, mutta monesti olen käyttänyt luonnoksessa mieleistäni fonttia ja sitten löytänyt tuolta lähes vastaavan suunnitelmani toteuttamiseksi.

Fontit voi ladata helppona pakettina itselleen (Webfont kit), jossa mukana tulee valmis CSS-tiedosto määritteineen. Voit myös luoda omasta fontista web-yhteensopivan version, mutta tässä kohden on hyvä tarkistaa kirjasimen/kirjasinperheen lisenssiehdot, kaupalliset tahot eivät yleensä salli tätä.

Linkki: http://www.fontsquirrel.com/

 

 Piknik

Olbedesign kevätsiivous: Web designerin apuohjelmat
Piknikin toteutus on äärimmäisen minimaalinen. Hiirtä liikuttelemalla saat väriarvot koodeina, jotka voit syöttää käyttämääsi ohjelmaan.

 

Ja vielä lopuksi hulvattoman hauska värilelu Piknik. Minimalismin äärimmilleen vievän ohjelman toimintaidea on naurettavan helppo. Hiirtä liikuttamalla voit valita muuttuvista väreistä, ja kopioida tiedot muun muassa web-suunnittelussa tarvittavassa HEX-muodossa. Ja kyllähän tämän kanssa hetki työaikaakin kuluu rattoisasti.

Linkki: http://color.aurlien.net/

 

 

Lisättävää?

Näin. Kyllähän tässä alkaa olemaan jo ihan kelpo kotisivupojan starter-paketti esiteltynä. Paljon vielä jäikin ja sivuutin tyystin Googlen fontit ja muut palvelut, jQueryt ynnä muuta sellaista. Mikäli tästä on iloa lukijoille / tekijöille, jatkan myöhemmin lisää aiheen parissa. Kannattaa siis kommentoida ja pistää palautetta jos tämä osoittautui hyödylliseksi.

Onko sinulla kenties tiedossa jotakin nerokkaita palveluita, jotka ehdottomasti puuttuvat listastani?

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Huomaathan, että arvostan omalla nimelläsi jättämääsi vastausta hassunhauskojen nimimerkkien takaa huutelemista korkeammalle. Sähköpostiosoitettasi ei julkaista eikä paljasteta NSA:lle, mutta se mahdollistaa yhteydenottoni tarvittaessa — jospa kommentissasi olisi uuden jutun aihetta? Tarkistan ensimmäisen viestisi aina käsin roskapostin ja laittomuuksien varalta, mutta pääsääntöisesti kaikki kommentit kyllä julkaistaan sisällöstä tai mielipiteestä riippumatta kun vain maltat odottaa. Relax.