Kotisivut edullisesti yksityiselle tai yritykselle | Kulmaus Verkkopalvelut http://www.kulmaus.com Verkkopalvelut edullisesti, referenssit ja blogi Fri, 03 Feb 2012 19:11:23 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 HTML5 Ominaisuudet http://feedproxy.google.com/~r/Kulmaus/~3/pIMu9tKcM4k/ http://www.kulmaus.com/2012/01/10/html5-ominaisuudet/#comments Tue, 10 Jan 2012 12:31:18 +0000 Sami http://www.kulmaus.com/?p=485 Uusi HTML5 tuo mukanaan yksinkertaisemman merkkauksen ja mahdollistaa Canvasin avulla jopa Flashin korvaamisen.

Voinko käyttää jo HTML5 ja CSS3-ominaisuuksia?

Kyllä. Itse aloitin uusien ominaisuuksien käytön projekteissani viime vuoden alkupuolella ja nykyään monet selaimet osaa tulkita merkkauksen oikein. W3C -validaattori ei vielä täysin tue HTML5:sta, mutta sillä voi kuitenkin tarkistaa sivut virheiltä. Varsinkin CSS-validaattori herjaa virheellisesti ja sen herjaukset on helposti ohitettavissa laittamalla kaikki CSS3-määritykset erilliseen .css -tiedostoon. Itse en ole kyseistä ohitusta harrastanut, koska en näe siinä mitään väärää jos validaattori herjaa CSS3-ominaisuuksista.

Mitä uusi HTML5-tuo mukanaan?

Ensimmäisenä www-sivujen tekijä törmää uudistuneeseen dokumentin määrittelyyn, mikä hoidetaan vain kahdella sanalla aikaisemmin tehdyn parin rivin sijaan. Seuraavassa koodinpätkässä on normaali HTML4-sivuston rakenne ja sen jälkeen on uusi HTML5-määrittely.

Vanha HTML määrittely

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>HTML4 -sivu</title>

<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/scripti.js"></script>

</head>

<body>

</body>
</html>

Uusi HTML5-määrittely

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML 5 - Testisivu</title>

<link rel="stylesheet" href="style.css" />
<script src="js/scripti.js"></script>

</head>

<body>

</body>
</html>

Kuten esimerkeistä näkee, on uusi HTML5 paljon yksinkertaisempi ja nopeampi tapa tehdä sivuja. Tyylitiedostot eivät enää tarvitse tietoa “type=text/css” ja javascriptin voi liittää ilman “type=text/javascript” määrittelyä. HTML5 mahdollistaa myös sivuston alueiden nimeämisen, ilman <div id=”…”>. Yleensä on käytetty esimerkiksi seuraavia määrittelyjä:

<div id="header"></div>
<div id="post"></div>
<div id="footer"></div>

Uusi HTML5 mahdollistaa alueiden määrittelyn ilman divejä, tosin CSS-tiedostoon täytyy laittaa vielä ylimääräinen tyyli, sekä sivuilla pitää käyttää javascriptiä, jotta sivusto näkyy oikein kaikissa selaimissa. Uudet määritykset voi tehdä seuraavasti:

...
<title>HTML5 - Testisivu</title>

<!--[if IE]><!--Ladataan HTML5-skriptitiedosto korjaamaan Internet Explorer-->
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<header>Otsikkoteksti</header>

<nav>Navigaatio</nav>

<section>Sisältöä...</section>
<article>Artikkeliosa</article>
<footer>Alaosa, vaikka copyright</footer>
...

HTML-tiedostoon täytyy liittää html5.js javascriptitiedosto ja tyylitiedostoon täytyy laittaa seuraavat asetukset, jotta yllä mainitut määrittelyt näkyvät selaimissa oikein.

header, nav, section, article, footer {display:block;}

Näin on perustiedot käsitelty uudesta HTML5-merkkauksesta ja läpi käydyt esimerkit ovat hyödyllisiä. Kaikkia ei tarvitse käyttää, mutta suosittelen ainakin käyttämään uutta HTML5-sivuston määrittelyä. Lisää oppaita löytää verkosta helposti esimerkiksi googlettamalla “HTML5″. hyvä HTML5-pohja löytyy sivulta http://html5boilerplate.com/. Suosittelen myös kirjaa HTML5 For Webdesigners (eng).

Sivulta http://www.cuttherope.ie/ löytyvä peli on tehty HTML5:lla käyttäen Canvasia.

]]> http://www.kulmaus.com/2012/01/10/html5-ominaisuudet/feed/ 0 http://www.kulmaus.com/2012/01/10/html5-ominaisuudet/ Kotisivujen suunnittelu ja toteutus http://feedproxy.google.com/~r/Kulmaus/~3/O-KdUGFAFhc/ http://www.kulmaus.com/2012/01/09/kotisivujen-suunnittelu-ja-toteutus/#comments Mon, 09 Jan 2012 14:10:55 +0000 Sami http://www.kulmaus.com/?p=457 Kotisivujen suunnittelu ei ole mitään rakettitiedettä. Tärkeintä on muistaa, että sivuilla oleva sisältö on esitetty selkeästi ja sivuston sisältöä on helppo lukea, eikä haetun tiedon löytäminen ole kymmenien linkkien takana. Seuraavassa lyhyesti oma suunnittelutapani.

1. Vaihe: Inspiraatio ja mallit

Tämä vaihe voisi vaihtaa paikkaa toisen vaiheen kanssa, mutta mielestäni on helpompi ensin selata muita sivustoja ja niiden avulla suunnitella rautalankamalli. Yleensä aloitan avaamalla Dribbble-sivuston ja selailen grafiikoita, sekä muutamia siellä näytettyjä sivuprojekteja. Toinen erittäin paljon käyttämäni sivusto on Awwwards.com, missä valitaan päivittäin yksi “päivän sivusto” perustuen useampien arvostelijoiden antamiin ääniin. Uusin tulokas inspiraation lähteisiini on HTML5 Gallery, missä on listattu HTML5:sta käyttäviä sivustoja.

Näiden lisäksi on monia muitakin sivustoja, mutta edellä mainitut kolme sivustoa ovat suosikkejani ja niistä löytyvillä töillä saa jo paljon ideoita.

2. Vaihe: Rautalankamalli

Monet sivujen tekijät ohittavat tämän vaiheen ja siirtyvät suoraan Photoshopiin tai HTML-version tekemiseen. Suosittelen tekemään ensimmäisen vaiheen jälkeen paperilla tai jollain ohjelmalla yksinkertaisen rautalankamallin. Hyvä opas rautalankamalleihin ja ohjelmiin löytyy Six Revisions-sivuston artikkelista. Tämä vaihe voi tuntua ajan tuhlaamiselta, mutta kunhan teet ensimmäisen kerran rautalankamallin, huomaat varmasti miten paljon rautalankamalli nopeuttaa sivun valmistumista ja helpottaa sivuston erilaisten osien hahmottamista.

3. Vaihe: Photoshop tai HTML

Kun sivuston suunnittelu on saatu siihen vaiheeseen, että voidaan aloittaa toteutus on valittavissa kaksi vaihtoehtoa: Photoshop tai HTML-versio. Yleensä olen tehnyt suoraan Photoshopin kautta ensin suunnitelman piirustusten mukaan ja sen jälkeen leikannut kuvat ja alkanut tekemään merkkausta. Photoshop on hyvä jos tekee sivustoa itselleen, tai tietää mitä asiakas haluaa. Ongelmia tulee siinä vaiheessa jos asiakas haluaakin nähdä esimerkiksi pyöristetyt reunat terävinä kulmina, tai vaihtaa linkkien väriä. Silloin joutuu tekemään uudestaan kaikki kohdat, missä on pyöristetyt kulmat ja etsimään muokattavat linkit.

Jos tekisi suoraan HTML-version, niin siihen on helpompi tehdä asiakkaan haluamat muutokset, sekä siitä näkee paremmin kaikki linkkien värit ja sivuston yleisilmeen.

4. Testaus ja julkaisu

Viimeinen vaihe on tietenkin sivuston testaus ja julkaisu. Ennen julkaisua on hyvä tarkistaa, että sivusto on todellakin valmis ja valmiina julkaistavaksi. Sivusto kannattaa testata Internet Explorerilla (versiot 7-10), Google Chromella, Mozilla Firefoxilla, Operalla ja Safarilla. Hyvä tarkistuslista löytyy osoitteesta http://lite.launchlist.net/ (englanninkielinen).

Minkälainen tapa Sinulla on tehdä verkkosivuja? Olisi mielenkiintoista tietää muiden velhojen työtapoja.

]]> http://www.kulmaus.com/2012/01/09/kotisivujen-suunnittelu-ja-toteutus/feed/ 0 http://www.kulmaus.com/2012/01/09/kotisivujen-suunnittelu-ja-toteutus/ Hyvää Joulua ja Uutta Vuotta 2012 http://feedproxy.google.com/~r/Kulmaus/~3/BdjC0NVWr6s/ http://www.kulmaus.com/2011/12/22/hyvaa-joulua-ja-uutta-vuotta-2012/#comments Thu, 22 Dec 2011 17:04:33 +0000 Sami http://www.kulmaus.com/?p=517 On aika tullut kiittää kuluneen vuoden projekteista kaikkia asiakkaita ja toivottaa hyvää Joulua ja Uutta Vuotta 2012. Jatketaan hienojen nettisivujen valmistamista ensi vuonnakin.

Nyt pidän lyhyen tauon projekteista ja jatkan nettisivujen parissa ensi vuonna. Tässä kuussa yritän vielä saada julkaistuksi Joomla-teeman, mutta en lupaa varmaksi. Kyseessä on vapaa-ajan projekti, joten voi olla ettei kyseinen homma paljoa saa aikaa Joulun ja uuden vuoden aikana.

- Sami

]]> http://www.kulmaus.com/2011/12/22/hyvaa-joulua-ja-uutta-vuotta-2012/feed/ 0 http://www.kulmaus.com/2011/12/22/hyvaa-joulua-ja-uutta-vuotta-2012/ Paljon tekemistä, vähän aikaa http://feedproxy.google.com/~r/Kulmaus/~3/xA6HJbms6jU/ http://www.kulmaus.com/2011/09/18/paljon-tekemista-vahan-aikaa/#comments Sun, 18 Sep 2011 11:26:17 +0000 Sami http://www.kulmaus.com/?p=496 En ole viikkoihin bloggaillut, mutta se ei johdu kyllästymisestä vaan yksinkertaisesti siitä, että olen saanut kuluneen kuukauden aikana useita uusia projekteja ja kävin tällä viikolla ensimmäistä kertaa kertausharjoituksessa Karkialammella sitten 2006 intistä kotiutumisen jälkeen. Vettä satoi jokaisena päivänä, paitsi perjantaina kun lähdettiin pois.

Kertausharjoitus hieman aiheutti kiireitä ja pieniä aikataulumuutoksia projektien osalta, mutta asia korjaantuu seuraavien viikkojen aikana ja toivottavasti pääsen bloggaamaankin enemmän. Tein viime kuun alussa hieman isomman projektin FM Suomi-sivuston kanssa, tekemällä heille Joomla-teeman, sekä foorumin ulkoasun.

Ensi viikon aikana saan valmiiksi toisen Joomla-projektin, sekä foorumiulkoasun. Projektista lisää sivuston valmistumisen jälkeen. Projektien lisäksi minulla on sivuilleni kymmeniä erilaisia uusia ideoita, joita ajattelin kokeilla lähipäivien aikana.

]]> http://www.kulmaus.com/2011/09/18/paljon-tekemista-vahan-aikaa/feed/ 0 http://www.kulmaus.com/2011/09/18/paljon-tekemista-vahan-aikaa/ Vakava tietoturva-aukko Timthumb-skriptissä http://feedproxy.google.com/~r/Kulmaus/~3/W8usWA-4xdA/ http://www.kulmaus.com/2011/08/04/vakava-tietoturva-aukko-timthumb-skriptissa/#comments Thu, 04 Aug 2011 07:48:01 +0000 Sami http://www.kulmaus.com/?p=462 Keskiviikkoaamuna huomasin Twitterissä ilmoituksen, missä kerrottiin Timthumb.php kuvankäsittelyskriptin sisältävän vakavan tietoturva-aukon, mikä mahdollistaa ulkopuolisen käyttäjän pääsyn ajamaan PHP-koodia Timthumbin “cache” -kansiosta. Tämä ei koske vain WordPress-sisällönhallintaohjelmia, vaan kaikkia sivuja missä on käytössä kyseinen skripti. Useissa verkosta ostettavissa teemoissa on mukana Timthumb ja useimmiten vielä erittäin vanhakin versio. Kyseinen kirjoitus löytyy Mark Maunderin blogista.

Yksi korjausvaihtoehto on poistaa kaikki ulkpuoliset sivuosoitteet Timbthumb.php-tiedoston kohdasta $allowedSites.
Toiseksi kannattaa tarkistaa, että kohta define ('ALLOW_EXTERNAL', FALSE); on laitettu FALSE, eikä TRUE muotoon.

PHP-skriptistä löytyy monien mukaan muitakin mahdollisia aukkoja, joten suosittelen seuraamaan viimeisimpiä päivityksiä Timthumbin Google Project -sivulla. Lataamalla viimeisimmän version (4.8.2011 klo 10.40:  r148) ja korvaamalla palvelimella olevan tiedoston uusimmalla versiolla voi parantaa skriptin tietoturvaa. Toinen vaihtoehto on etsiä toinen samanlainen skripti, joita voi ehdotella kommentoimalla.

]]> http://www.kulmaus.com/2011/08/04/vakava-tietoturva-aukko-timthumb-skriptissa/feed/ 0 http://www.kulmaus.com/2011/08/04/vakava-tietoturva-aukko-timthumb-skriptissa/