Mikseri.net

#2 kirjoitettu 30.12.2019 19:52

Aloitin aikanaan kotisivujen tekemisen opettelemalla HTML:ää, eli "hötömölöä". Myöhemmin opettelin CSS:ää ja JavaScriptiä ja myöhemmin opiskelin ihan kunnon ohjelmointia mm. PHP:llä. Tietokantojakin olen tehnyt MySQL:llä. Muutama sivu tuli pelkästään näillä tehtyä. Sitten olen myös CMS:ä käyttänyt eli Joomla ja Wordpress.

Nyt jos pitäisi jotkut sivut tehdä, niin varmasti aloittaisin asentelemalla Wordpressin ja etsimällä jonkin ilmaisen templaten.

On tietenkin monia lähestymistapoja. Olen myös kokeillut PHP:n frameworkeja, kuten Symfony ja CodeIgniter, joista yhdessä projektissa olin opiskeluaikana mukana, jossa käytettiin tuota Symfonyä.

Javalla tai Pythonillakin voi sivut koodata. Niitä en ole käyttänyt itse.

Front-End puolella on nykyään vaatimuksena osata jokin JavaScript-sovelluskehys eli React, Vue tai Angular tietysti vankan HTML ja CSS osaamisen lisäksi. Back-End elää tietokannoissa ja selainpuolen toiminnoissa eli on osattava MySQL tai vastaava ja Node.js on myös tarpeellinen.

Webbisaitin voi myös tehdä ihan ilman koodia. Weebly tai Wix ovat tällöin vaihtoehtoina. Aloittelevalle web-suunnittelijalle sopii myös aiemmin jo mainittu WordPress.

Täydentäkää ja korjatkaa, jos on parempaa tietoa. Miten siis itse aloittaisit?

#3 kirjoitettu 31.12.2019 08:08

Aihe on aina kiinnostava ja olen itsekin ko. maailmassa kokeillut.
Ihan ekaks - oisko tästä 10-15 vuotta aikaa - yx kaveri laittoi bändiä pystyyn ja auttaakseni lupasin yrittää, josko saisin jtn kotisivujen tapaista aikaiseksi. Silloin oli vähän erilaista se tekeminen ku nykyään. Vaihtoehtona oli tosiaan "opetella se koodaus", tai sitten "oikotie onneen". Eli mähän tein ihan pokkana sillai, että etsin netistä kotisivut, joiden ulkoasu vastasi sitä, mitä itse hain. (Saattoi olla jonku kotimaisen kirjailijan sivut) Sit mä latasin ne sivut omalle koneellle ja aloin tutkimaan sitä sen koodin sisältöä. Laitoin alkuperäisten sivujen tekstin paikalle omia juttuja ja vaihdoin kuvien tilalle kaverin ja sen bändin kuvia. Opin muuttamaan värejä ja muita asioita myös. Jostain löysin kävijälaskurinkin ja kun sivut alkoi olla kuosissa, kaveri hankki jostain parilla kympillä serverin nurkkaa jonne ne saattoi tiputtaa. Sit mä vaan jatkossa päivittelin sitä. Ei se kauheen hankalaa ollut, mutta pirun kiinnostavaa. Sit se sen touhu vähän niinku kasvoi ja tarpeetkin ehkä muuttui, mun mielenkiinto ei jaksanu riittää ja annettiin sivut toiselle hoidettavaksi. Se oli mun ensikosketus näihin.

Sittemmin oon tehnyt ja ylläpitänyt kolmea eri saittia ja näiden tekoon oon käyttänyt Googlen kotisivukonetta. Se on ilmainen, osoite ei oo ihan paras ja vaimon mielestä "sivut näyttää kököiltä" (voi johtua enempi tekijästä), mutta sivut on ajaneet asiansa. Tekeminen / editointi on suht helppoa - vähän niinku word-dokumenttia päivittelis. Ei välttämättä skaalaudu aina parhain päin esim mobiililaitteisiin, mutta en oo ottanu paineita.
Kipinä tähän tuli tällä kertaa siitä, että yhdestä ravintelista "keikkaa kysellessä" sanottiin, että "he ottavat bändejä vain ohjelmatoimistoilta". Tekaisin sitten sellaiset sivut, jotka saattaisivat näyttää ohjelmatoimiston sivuilta, jotta vastaavassa tilanteessa homma saattaisi hoituakin. Jos nyt ketä sitten täällä kiinnostaa, että miltä ne näyttää, niin kai tähän on pakko linkki laittaa:
https://sites.google.c...

#4 kirjoitettu 31.12.2019 12:49

Tämä Snakepit-template sopisi hyvin pienlevy-yhtiön kotisivuiksi ja on siten aika toimiva.

https://demos.wolfthem...

Hommahan menee niin, että ensin tarvitset palvelimen joka voi olla ilmainen tai maksullinen. Sitten asennat WordPressin siihen. Opettelet vähän käyttämään sitä. Lisäilet valikoita ja mietit, mitä sisältöä sinne halutaan.

Enpäs selitäkkään enempää templateista. Tässä sensijaan hyvä suomenkielinen linkki WordPress-kehitykseen:

https://wpopas.fi/videot/

En malta olla sanomatta, että template siis muodostaa web-sivuston käyttöliittymän sekä graafisen ulkoasun. Sisältö, esim. kuvat ja tekstit, tuodaan siihen, jolloin sivustosta tulee tarkoituksen mukainen. Tuolta WordPressin sisältä löytyy kohta, josta voi vaihtaa templaten toiseen.

#5 kirjoitettu 31.12.2019 12:54

jarpat kirjoitti:
Laitoin alkuperäisten sivujen tekstin paikalle omia juttuja ja vaihdoin kuvien tilalle kaverin ja sen bändin kuvia. Opin muuttamaan värejä ja muita asioita myös. Jostain löysin kävijälaskurinkin ja kun sivut alkoi olla kuosissa, kaveri hankki jostain parilla kympillä serverin nurkkaa jonne ne saattoi tiputtaa. Sit mä vaan jatkossa päivittelin sitä. Ei se kauheen hankalaa ollut, mutta pirun kiinnostavaa. Sit se sen touhu vähän niinku kasvoi ja tarpeetkin ehkä muuttui, mun mielenkiinto ei jaksanu riittää ja annettiin sivut toiselle hoidettavaksi. Se oli mun ensikosketus näihin.



Tuo on ihan hyvä tapa vähän opetella asioita, että ottaa jonkun valmiin jutun ja muokkaa sitä. Itse tein tällä periaatteella web-sivuja, kun aloin opetella Joomlaa, tais olla 2012. Otin valmiin Joomlalla tehdyn sivun ja vaihtelin värejä CSS-koodissa ja lisäilin omia kuvia. Sain ihan miellyttävän näköiset sivutkin aikaiseksi.

Nyt on vaan ollut ajatuksena mahdollisimman paljon opetella tekemään itse ihan alusta asti.

#6 kirjoitettu 31.12.2019 12:57

Täs on vielä teemoista, eli just se, mitä IT kyseli, niin lyhyt video:

https://wpopas.fi/vide...

#7 kirjoitettu 03.01.2020 08:01

Web-sivujen suunnittelu, ihan kuin minkä muunkin ohjelman, aloitetaan määrittelemällä mitä sillä tehdään, miten käyttäjät ovat vuorovaikutuksessa sen kanssa (käyttöliittymä) sekä mitä tietoa se sisältää. Mikä on esim. web-sivuston perimmäinen tarkoitus.

Ei saittia välttämättä WordPressillä tarvitse toteuttaa, mutta se on helpompi tapa. Kun olen tehnyt sivustoja käyttäen vain HTML:ää ja CSS:ää olen kohdannut hieman ongelmia esim. responsiivisuuden kanssa (johon auttaa toki BootStrap).

Usein web-sivuilla on paljon korkealaatuisia kuvia. Tämä on tuoreempi trendi, kun kymmeniä vuosia sitten jouduttiin pakkaamaan kuvia enemmän.

Sopivan templaten valitseminen on sitten Front-End-suunnittelijan ja henkilön, jolle sivut tehdään, päätettävissä. Usein tehdään prototyyppejä ja erilaisia vaihtoehtoisia sivuston ulkoasuja.

En vaan oikeen pysty miettimään, että mikä olisi hyvä template...mikä olisi huono...muuten kuin, että ottaisi muutaman vaihtoehdon ja vertailisi, että mitä eroavaisuuksia jne. Se selviää sitten pikkuhiljaa käyttäjän kanssa testatessa ja kehitellessä sitä web-sivustoa.

Ja vieläpä...on paljon noita käyttöliittymien standardeja. Nyt edessäsi olevassa web-selaimessasikin on käytetty niitä. Nehän ovat siis valmiita painikkeita, valikkoja ja muita elementtejä, kuten vaikkapa tuo oikealla selaimessa oleva "vierityspalkki".

Web-sivuston ulkoasun suunnittelussa auttaa alkuvaiheessa muuten yksi hyvä ilmainen ohjelma, joka on nimeltään Pencil.

Minähän olen näitä opiskellut...ei nää välttämättä aukea, ainakaan heti. Innostuin kirjoittamaan aika pitkälti, mutta...

#8 kirjoitettu 04.01.2020 16:04

Voisin vähän kertoa vielä kokemuksiani ja mitä olen oppinut niistä liittyen web-sivujen ja -sovellusten tuottamiseen. Hommahan alkaa siitä, että joku taho haluaa itselleen internettiin omat kotisivut, tai voihan ne olla intranet-sivut, jolloin ne on tahon omat eivätkä siis julkiset, mutta...Otetaan esim. haastattelemalla selvää mitä halutaan eli minkälaisia asioita, mitä toiminnallisuuksia (esim. palautteen lähettäminen lomakkeen kautta, mahdollisuus keskustella foorumilla tai vain yhteystietojen esittäminen). Voidaan myös kysyä jotain ulkoasuun liittyvää eli jos on jotkin yrityksen ns. värit, niin käytetään niitä tai jotain valokuvia. Tästä siis lähdetään liikkeelle.

Seuraavassa vaiheessa tehdään kaavioita ja kirjataan ylös toiminnallisuudet eli sen mitä sivun toivotaan tekevän. Mietitään käyttöliittymä ja mahdolliset valikot. Tässä vaiheessa alkaa jo jakautua työ fronttiin ja bäckiin eli tietokantaa aletaan suunnitella sekä myös frontend-devaaja alkaa kelailemaan käyttöliittymää ja graafista ulkoasua.

Tehdään piirrustukset, esim. ohjelmalla Pencil. Voidaan tehdä prototyyppi ja testata sitä ihmiskäyttäjien kanssa. Voidaan kirjoittaa ohjelmistotestaukseen myös koodinpätkiä. Testaus on tärkeä osa ja se paljastaa usein virheitä käyttöliittymässä ja sovelluksen toiminnassa. Toiset tykkää pitää ohjelmisto- ja käyttäjätestauksen lähellä ohjelman kehitystyötä. Se onkin ihan hyvä ajatus.

Nyt ollaan jo pitkällä ja täydessä työn touhussa. Nykyään tällaista ohjelmistokehitys-projektia viedään läpi "ketterillä menetelmillä" eli esim. Scrummia käyttäen. Tämä tarkoittaa käytännössä, että viikon tai kahden välein pidetään palaveri jossa katsotaan täyttyikö edellisen "sprintin" eli sen kahden/yhden viikon ajalle asetetut tavoitteet. Jos täyttyi, niin jatketaan ja asetetaan seuraavalle sprintille tavoitteet. Työt jaetaan Scrum-masterin toimesta. Useammalla tiiminjäsenellä voi olla samaa tehtävää. Toimitaan kaikin tavoin tiiminä.

Sitten, kun saadaan kehitystyö valmiiseen kuosiin, testataan sitä vielä käyttäjän kanssa. Eikä se porjekti usein lopu julkaisuun. Koska sinne jää bugeja ja muuta korjattavaa, joka huomataan vasta, kun tuotetta käytetään. Ajatellaanpa vaikka videopelejä, niin kyllä sinne tulee julkaisun jälkeen paljon niitä "patchejä".

Tää on lyhyesti kuvattuna koko prosessi. Ja mä oon ollu vaan yhden käden sormilla laskettavissa olevan summan verran tällaisissa projekteissa mukana. Mut kiinnostaviahan nämä ovat. Sekin, kun miettii, että kuka jossain tiimissä olisi paras tekemään sivun grafiikat ja ulkoasun eli frontendin...kuka taas duunaa tietokannat, kuka olisi paras haastattelemaan loppukäyttäjää.

Kokemuksiani siis yllä olevassa. Olen miettinyt, mitä opettelisin ja halusin vähän aktivoida muitakin kelailemaan ja tutustumaan aihepiiriin. Hyville kotisivuja tekeville devaajille on töitä, mutta firmoihin on, varsinkin ilman näyttöä, vaikea päästä.

#9 kirjoitettu 09.01.2020 01:16

Mun ammattitaito on sellaisessa vaiheessa, että joitakin web-sovelluksia ja pelejä oon tehnyt prototyyppi-asteelle. Yritän kovasti niiden sisältä löytää lisää osaamista. Ja tehdä sen ison läpimurron, jolla irtoaisi palkkatöitä.

#10 kirjoitettu 04.04.2020 16:34

Nyt oon miettinyt taas teknisempiä prokkiksia tällä kotisivu-saralla...

Voisin opetella lisää aiheista:
- JavaScript
- React
- CSS / BootStrap
- PHP (CMS:n syvällisempi ohjelmointi: esim. Wordpress eli omien pluginien tai sivupohjien tekeminen)

Näillä eväillä syntyisi varmasti jonkinlainen kotisivu tai web-sovellus, peli tai jonkinlainen blogin tai keskustelufoorumin alusta. Toisaalta...löytyyhän sitä muutakin tekemistä. Olen myös koodannut jonkin aikaa pientä "to-do"-sovellusta Reactilla.

Tässä prokkis siinä vaiheessa kun se nyt on: https://codepen.io/vil...

En ole mitään CSS:ää siihen ainakaan vielä lisännyt eli ulkoasu on karu.

#11 kirjoitettu 04.04.2020 17:25

Toisaalta on kaikkea muutakin tekemistä kuin koodaaminen, kuten työ, jossa ei oikestaan niin paljon koodata ja kirjoittaminen sekä musiikki, jotka on harrastuksia minulle.

#12 kirjoitettu 13.04.2021 13:30

Mitä muutamassa päivässä oppii web-sivustojen suunnittelusta? Ehkä vain vähän...annan mennä kuitenkin...

Tiesitkö, että jos, 2012 kirjoitetun kirjan mukaan, nettisivun lataaminen kestää 2 sekuntia tai yli, niin selailija vaihtaa kohdetta eli siirtyy sivulle, joka latautuu nopeammin.

Tiesitkö, että nettisivun toteuttamiseen sinun pitäisi osata vähintään se front end -puolen HTML, mielellään HTML5, CSS ja JavaScript? Ja siinäkin on usein vaatimuksena Reactin tai jonkun muun front-end-frameworkin hallinta...

Ulkoasun rakentamiseen tarvitaan graafisen suunnittelijan taitoja ja taas sen back-endin kimppuun tarvitaan ohjelmoija ja tietokanta-osaaja. Lisäksi tarvitset palvelintilaa. Ostamalla saa osaamista, jos itseltä puuttuu...

Kuitennin, aika vaativalta kuulostaa. Ja jos aiot ammattimaisesti tehdä ja palkan tällä ansaita, niin sun pitää osata näitä kaikkia. Kontaktit helpottaa, mutta et pääse yhteistyöhön, jos et osaa tarpeeksi hyvin sitä omaa tonttia...

Toisaalta mun blogi esimerkiksi on rakennettu valmiin "open sourcen" ympärille. Eli en tee itse siinä kaikkea, vaan teen "yhteistyötä".

Joop. Virittelen tässä siis uudestaan keskustelua internetistä ja kotisivuista. Netissähän sitä nyt on kaikki, ainakin täällä...

#13 kirjoitettu 09.06.2021 12:39 Muok:09.06.2021 12:45

geeli kirjoitti:
Kuitennin, aika vaativalta kuulostaa. Ja jos aiot ammattimaisesti tehdä ja palkan tällä ansaita, niin sun pitää osata näitä kaikkia. Kontaktit helpottaa, mutta et pääse yhteistyöhön, jos et osaa tarpeeksi hyvin sitä omaa tonttia...

Toisaalta mun blogi esimerkiksi on rakennettu valmiin "open sourcen" ympärille. Eli en tee itse siinä kaikkea, vaan teen "yhteistyötä".


Aloitusviestin perusteella voin todeta, että oma tausta on hyvin samankaltainen, eli teinivuosina otin haltuun hötömölöt, css:sät, vähän php:tä ja mysliä. Mutta kun ammatilliset tavoitteet on vieneet lopulta ihan muualle, lähinnä musiikkialalle, on sitä omaa ajankäyttöään optimoidessa pohtinut, kuinka paljon tietojensa ylläpitämiseen ja päivittämiseen kannattaa käyttää energiaa kun sivustohommaa ei tee leipätyökseen vaan ainoastaan sen tueksi. Oppimisalustat on toki kehittyneet parissakymmenessä vuodessa Ohjelmointiputkasta Codeacademyn kaltaisiin harjoitusalustoihin, CSS-puoli nopeutuu moninkertaisesti SCSS:sän myötä ja voisihan sitä bootstrapin ja noita mainitsemiasi JS-kirjastojakin ottaa haltuun.

MUTTA motivaatiota syö rajusti kun huomaa miten pitkälle Wordpress ja erilaiset WYSIWYG-editorit on tulleet samassa ajassa. 2000-luvun alun Frontpage tuotti toki kammottavan epästandardia ja jähmeästi toimivaa koodia (jonka kautta tuli itsekin aluksi opittua huonoille tavoille) ja viitisen vuotta sitten omat ensikokemukset vaikkapa Wixin ilmaisversiosta oli lähinnä traumaattisia, mutta nyt nuo alustat alkaa olla jo niin hyviä, että ainakin musiikkialalla moni harkitsee aika pitkään, antaako rahansa ammattimaiselle koodarille vai panostaako mieluummin pelkkiin promokuviin ja korkeintaan ammattigraafikon piirtelemään logoon, kun sivut saa väännetyä itsekin.

Mulla on ollut nyt tekemisfilosofiana, että jos päivitän sivuja ainoastaan itse, saatan käyttää jopa bootstrapia suvereenisti hyödyntävää Mobirisea, koska noh, onhan se vaan tolkuttomasti jouhevampaa kun koodin rustailu ja näkyy heti miten sivut taittuu eri alustoille. Kunhan muistaa kuvatiedostot optiomida vaikka tinypng:n kautta ja loppusilauksena käyttää jotain hyvää CDN:nää, niin jopa Googlen PageSpeed Insights antaa sivuille oikein hyvät pisteet.

Heti jos päivittäjiä on useampi, on aiheellista hyödyntää wordpressiä sisällönhallinnassa. Pienellä opiskelulla Mobirise-lähtöisen leiskan muuttaa wordpressin teemaksi. Monet hosting-palvelut tarjoaa nykyään sutjakoita wp-optiomoituja webhotellipaketteja, jotkut jopa Weeblyn kaltaisiaa ihan hyviä kotisivukoneita aloittelijoitte. Eräskin kaveri väänsi lähes olemattomilla digitaidoilla todella selkeät ja näyttävät portfoliosivut, ainoana kuluna Louhen webhotellin vuosimaksu, koska siihen sisältyi tuo weebly.

Hyvää tyylisilmää ei tietenkään saa ilmaiseksi, mutta hyvästä kuvasisällöstä saa paljon materiaalia kauniin leiskan suunnitteluun. Itse tulee määriteltyä koko sivuston värimaailma usein puhtaasti promokuvien ja selkeyden ehdoilla.

Nettisivubisnes vertautuu mun mielessä aika paljon johonkin muusikoiden ja valokuvaajien hääkeikkailuun. Kun palvellaan yksityishenkilöitä eikä isompia lafkoja, voi samassa hintakilpailussa heilua jos jonkinmoista amatööriä ja työllistyä yhtä hyvin tai jopa paremmin huomattavasti heikommalla tietopohjalla. Kolleegapiiristä löytyy ainakin yksi musiikin maisteri, joka tekee käsittääkseni ihan hyvän tilin wordpressin valmisteemohin pohjautuvilla ja netistä kaivetuilla ilmaisilla arkistografiikoilla koristelluilla nettisivuilla. Päälle valokuvauspalvelut ja riittävästi myyntihenkeä ja pokerinaamaa, tulee toimeen. Yleisöä ei pidä aliarvioida, mutta aina välillä sitä kuitenkin havahtuu muistamaan, että samalla tavalla kun hääkeikkayleisö ei välttämättä hahmota puoliakaan paatuneemman musadiggarin arvostamista nyansseista, ei tänäkään päivänä suurin osa kaduntallaajista tajua nettisivujen toiminnasta tuon taivaallista.

Painotus vielä sille, että puhutaan nyt yksityishenkilöiden ja pienempien yritysten palvelemisesta. Toivon, että ainkin käyttämäni pankki ostaa nuo palvelut edelleen mahdollisimman isolla rahalla asiansa osaavilta koodarilafkoilta. Nordea lienee säästänyt noissa aika paljon sovellusten vakaudesta päätellen. Ja entäs sitten joku Vastaamo, herranpieksut...