Yleistä keskustelua webdevauksesta

[Rantakemisti]

En tiedä, tarkoititko sitä itse nappulaa vai niitä linkkejä menussa, mutta jotain tällaista:

.dropdown-menu a:hover {
  background: red !important;
}

.dropdown-toggle:hover {
  background: red;
}

Voit sitten käyttää ID-attribuutteja, jos haluat kohdistaa muutokset vain johonkin tiettyy dropdowniin.

Ihan sivuhuomautuksena suosittelen aina käyttämään luokkia muutosten tekemiseen. Sillä monesti voi tulla tarve kohdistaa sama muutos useampaan pudotusvalikkoon ja semanttisesti on väärin käyttää samaa ID:tä useassa eri elementissä. Useimmat selaimet eivät välitä tästä ja pahin ongelma on vain W3C Validatorin errorit. Olen kuitenkin törmännyt Safarin aiheuttamiin ongelmiin kun samaa ID:tä on käytetty useamman kerran samalla sivulla ja tämä on hajottanut sivuston layoutin kunnolla.

 

[Paapaa]

Ja speksikin taitaa kieltää käyttämästä samaa id:tä muuhun kuin yhteen elementtiin. Voi siis tulla kaikenlaista outoa bugia, jos tätä yrittää kiertää.

 

[Gize]

Ihan sivuhuomautuksena suosittelen aina käyttämään luokkia muutosten tekemiseen. Sillä monesti voi tulla tarve kohdistaa sama muutos useampaan pudotusvalikkoon ja semanttisesti on väärin käyttää samaa ID:tä useassa eri elementissä.

Juu tässä teinkin tosiaan muutoksia juurikin kaikkiin (kahteen) dropdowniin

Tässä oli vielä se toinen juttu mitä hain eli dropdownissa olevan aktiivisen sivun backround color, laitetaan nyt näkyville jos joku etsii joskus samaa:

ul.dropdown-menu>li.active>a:hover{
    background: #419641 !important;
}

ul.dropdown-menu>li.active>a{
    background: #51AB51 !important;
}

Navimuutokset sainkin nyt siten tehtyä "tilaajan" toiveiden mukaiseksi

Ajoin validatorin ja siellähän tulee näistäkin varoituksia:

Line 771, Column 4: NET-enabling start-tag requires SHORTTAG YES
<br/>

Onko noilla varoituksilla mitään merkitystä? En muista minkä ajon myötä ne tuonne ilmestyi, olikohan joku googlen metatietojuttu Helpollahan tuosta selviää mutta ei vaan jaksaisi turhanpäiten karsia, olen jopa kuullut että moni tarkoituksella päättää myös br-tagin

 

[Rantakemisti]

Juu tässä teinkin tosiaan muutoksia juurikin kaikkiin (kahteen) dropdowniin

Tässä oli vielä se toinen juttu mitä hain eli dropdownissa olevan aktiivisen sivun backround color, laitetaan nyt näkyville jos joku etsii joskus samaa:

ul.dropdown-menu>li.active>a:hover{
    background: #419641 !important;
}

ul.dropdown-menu>li.active>a{
    background: #51AB51 !important;
}

Navimuutokset sainkin nyt siten tehtyä "tilaajan" toiveiden mukaiseksi

Ajoin validatorin ja siellähän tulee näistäkin varoituksia:

Line 771, Column 4: NET-enabling start-tag requires SHORTTAG YES
<br/>

Onko noilla varoituksilla mitään merkitystä? En muista minkä ajon myötä ne tuonne ilmestyi, olikohan joku googlen metatietojuttu Helpollahan tuosta selviää mutta ei vaan jaksaisi turhanpäiten karsia, olen jopa kuullut että moni tarkoituksella päättää myös br-tagin

Tarkoitin tuolla luokkien käyttämisellä, että teet tuota tarkoitusta varten oman luokan etkä yliaja Bootstrapin omaa luokkaa. Teet vaikka luokan nimeltä "dropdown-menu-green" ja lisäät sen kaikkiin pudotusvalikoihin joiden väriä haluat muuttaa. Eli samalla ajatuksella kuin Bootstrapin omat btn-primary, btn-danger ja vastaavat tyylittelyt. Tämä on jatkokehityksen kannalta huomattavasti siistimpi ratkaisu kuin yliajaa oletusasetuksia ja älä varsinkaan yliaja niitä "!important"-säännöllä!

Nyt jos haluaisitkin tehdä toisesta pudotusvalikosta punaisen ja loisit sille luokan "dropdown-menu-red" sekä asettaisit taustaväriksi punaisen niin pudotusvalikko olisi silti vihreä. Nyt tuo aikaisempi !important pitäisi yliajaa toisella !important-käskyllä ja CSS-tyylitiedostostasi tulee jatkuvasti vaikeampi hallita.

Jos taas teet omat luokat niin voit niiden perusteella määrittää taustavärin ja jos joskus haluat tehdä pudotusvalikon Bootstrapin oletustaustavärillä niin sekin onnistuisi. Yksi vaihtoehto on kustomoida koko Bootstrap (Customize and download · Bootstrap) ja tämä on hyvä ratkaisu jos haluat muuttaa kunnolla Bootstrapin oletustyylejä.

Pari kertaa olen joutunut siistimään tyylitiedostoja, joissa Bootstrapin tai jonkun muun frameworkin oletusasetuksia on sorkittu sieltä täältä ja se ei ole ollut kivaa kun joutuu arvailemaan, minkä takia esim. "row"- tai "btn"-luokat eivät toimi oletetusti. Lopputuloksena joutuu kirjoittamaan sata riviä tyylitiedostoa uusiksi jonkun pienen muutoksen takia.

tl;dr Käytä omia luokkia, jolloin jo HTML-koodista näkee minkä takia jokin pudotusvalikko on vihreä ja jokin toinen on vaikka punainen. Vaihtoehtoisesti kustomoi koko Bootstrap-tyylitiedosto, jolloin kaikilla elementeillä on yhtenäinen linja.

 

[SweeneyTodd]

Tarkoitin tuolla luokkien käyttämisellä, että teet tuota tarkoitusta varten oman luokan etkä yliaja Bootstrapin omaa luokkaa.

Erittäin hyvää tekstiä koko viesti.

Voisin tätä täydentää sillä, että tee nämä omat css-täydennykset vielä erilliseen tiedostoon, niin hallinta ja bootstrapin päivitykset on vielä helpompia.

 

[Gize]

Tarkoitin tuolla luokkien käyttämisellä, että teet tuota tarkoitusta varten oman luokan etkä yliaja Bootstrapin omaa luokkaa. Teet vaikka luokan nimeltä "dropdown-menu-green" ja lisäät sen kaikkiin pudotusvalikoihin joiden väriä haluat muuttaa. Eli samalla ajatuksella kuin Bootstrapin omat btn-primary, btn-danger ja vastaavat tyylittelyt. Tämä on jatkokehityksen kannalta huomattavasti siistimpi ratkaisu kuin yliajaa oletusasetuksia ja älä varsinkaan yliaja niitä "!important"-säännöllä!

Nyt jos haluaisitkin tehdä toisesta pudotusvalikosta punaisen ja loisit sille luokan "dropdown-menu-red" sekä asettaisit taustaväriksi punaisen niin pudotusvalikko olisi silti vihreä. Nyt tuo aikaisempi !important pitäisi yliajaa toisella !important-käskyllä ja CSS-tyylitiedostostasi tulee jatkuvasti vaikeampi hallita.

Kiitos hyvästä kirjoituksesta

Tuo "!important" jäikin tosiaan copypastena suoraan stackoverflowsta josta sen pätkän löysin

Jatkokehitys onkin tämän sivuston kohdalla mielenkiintoista, kun sivu on luotu muistaakseni jo 2009 Helpointa olisi tehdä koko sivusto uusiksi ja siihen varmaan myös päädytään jossain vaiheessa, nyt on vain tekohengitelty tälle vuosikymmenelle ja optimoitu puhelimille jne., katsotaan mihin aika (ja into) riittää kun en näitä ammatikseni tee. Hauskaa hommaahan tämä vieläkin on ja onnistumisen tunnekin on parempi kuin onnistuneessa autoremontissa, ne kun ovat melko helppoja

Sikäli homma onnistuu melko helposti vielä tuossa sivustossa kun ilmeen pitäisi olla yhtenäinen joka sivulla, ja etenkin kokonaisuutena mahdollisimman yhtenäinen eli kaikki dropdownit, linkit yms. noudattaisi samaa linjaa, mutta ymmärrän kyllä pointtisi, etenkin jos olisi isompi sivusto kyseessä

Jos taas teet omat luokat niin voit niiden perusteella määrittää taustavärin ja jos joskus haluat tehdä pudotusvalikon Bootstrapin oletustaustavärillä niin sekin onnistuisi. Yksi vaihtoehto on kustomoida koko Bootstrap (Customize and download · Bootstrap) ja tämä on hyvä ratkaisu jos haluat muuttaa kunnolla Bootstrapin oletustyylejä.

Kiitos, hyvä vinkki

Jatketaan harjoituksia

 

[mopnex]

Jos Bootstrappia on pakko käyttää, niin fiksuinta on yliajaa nuo väriarvot LESS/SASS puolella, ja ottaa käyttöön vain se osa mitä tulee oikeasti käytettyä. Bootstrap on kyllä suhteellisen paisunut teos sellaisenaan.

 

[Fanboys Suck]

Teet vaikka luokan nimeltä "dropdown-menu-green"

Ei ole paras tapa laittaa luokan nimeen väriä tms. koska ensi vuonna se väri ei ehkä olekaan enää vihreä.

 

[Gize]

Tämähän meni nyt mielenkiintoiseksi, minulla on nyt indextestisivu.html, jossa pätkä koodia:

 <link rel="stylesheet" href="css/bootstrap.min.css">
    
     <link rel="stylesheet" href="css/tyyli2.css">

Sitten minulla on kaksi .css jotka ovat täysin identtiset (tyyli ja tyyli2).

Kuitenkin navbar on erinäköinen näillä filuilla, siis tyyli ja tyyli2

Kysynkin, että miten tämä on edes mahdollista?

Ongelman olen varmentanut useasti, tyyli2 on se mitä hain. Kuitenkin tyyli2, ctrlA, ctrlC -> tyyli.css ctrlA ctrlV ctrlS ->indexistä 2 pois = tyyli.css +ctrlS ja tyyli vaihtuu vaikka otan css sisällön suoraan copypasteamalla

Eihän siinä mitään, homma toimii jos käytän tuota tyyli2.css mutta miten hemmetissä tämä on mahdollista???

 

[Rantakemisti]

Jos Bootstrappia on pakko käyttää, niin fiksuinta on yliajaa nuo väriarvot LESS/SASS puolella, ja ottaa käyttöön vain se osa mitä tulee oikeasti käytettyä. Bootstrap on kyllä suhteellisen paisunut teos sellaisenaan.

@Gize n tapauksessa nuo CSS preprocessorit menee varmaan vähän turhaksi kikkailuksi, mutta se on totta että tuo Bootstrap on turhan paisunut kikkare. Melkein kannattaa kustomoida ja valkata vain ne komponentit joita oikeasti tarvitsee (Customize and download · Bootstrap).

Ei ole paras tapa laittaa luokan nimeen väriä tms. koska ensi vuonna se väri ei ehkä olekaan enää vihreä.

Ihan totta ja tässä se olikin vain esimerkkinä.

Kysynkin, että miten tämä on edes mahdollista?

Ei tuon pitäisi olla mitenkään mahdollista jos tyylitiedost ovat identtiset. Kannattaa tsekata että se tyyli.css oikeasti löytyy.

 

[Gize]

Ei tuon pitäisi olla mitenkään mahdollista jos tyylitiedost ovat identtiset. Kannattaa tsekata että se tyyli.css oikeasti löytyy.

No ei minustakaan Ajattelin että voisi olla jokin merkistökoodaus tmv. juttu Ja olin siis testannut myös niin että olen kopioinut molemmat identtisiksi ja lähettänyt palvelimelle, sitten lähettänyt palvelimelle index1 ja index2 joista toinen käyttää tyyli ja toinen tyyli2, ja lopputulos eri, mitähän veetua

Jaetaanpa vielä kokemuksia kun luulen asian selättäneeni:

Nyt testasin vielä lisää, otin suoran kopion toimivasta tyyli2 ja nimesin tyyli3, meni vielä erilaiseksi

Seuraavaksi ajattelin että nyt on jotain tallennusmetodissa tmv. vikaa, käytössä siis perus Notepad++. Otin vielä toimivasta tyyli2 kopion, ja huolella tallensin nimellä tyyli4, enkä laittanut päätettä ollenkaan käsin vaan erikseen valitsin valikosta .css, ja nyt siitä tulikin identtinen tyyli2 kanssa Ongelma on ilmeisesti siinä että Notepad++ oletus on .txt, ja vaikka suoraan lyöt perään .css niin homma ei toimi niinkuin pitäisi. Homma ei myöskään korjautunut vaikka uudestaan otin tyyli.css, tallenna nimellä, valitse .css, vaan virhe pysyi. Vielä palvelimelle siirto voinee mutkistaa tätä koska eri versioita tuli lopulta kolme, joista siis yksi oli oikea Ongelmaahan ei ollut kun omalla koneella aluksi tämän tein, vaan leiska muuttui vasta palvelimelle päästyään

Halusin todentaa vielä ongelman ratkaisun käytännössä, joten otin tyyli1:stä kopion, joka aiemmin teki väärännäköistä, ja nimesin tyyli7, tarkasti valiten ensin muodoksi .css ja toimii kuten pitäisikin

Tähän väliin vielä versiot mitä tuli aikaiseksi tästä sekoilusta, tyyli.css, tyyli2.css (haluttu), tyyli3.css:

Mikään ei siis muuttunut itse sivussa, eikä css koodissa, vain eri lailla tallennettu by Notepad++

Toivottavasti joku vielä löytää tämän ketjun googlella tulevaisuudessa, hakusanoja esim. Notepad++ CSS tallennus sekoilut, ettei tullut vain omaksi iloksi harrasteltua

Valistuneemmat devaajat sais kyllä heittää mielipidettä, @Rantakemisti onko heittää kommenttia? Loppukaneettina vielä testasin kaikki tyylit nyt vielä omalla koneella, ei muutoksia, mutta tosiaan palvelimelle pääsyn jälkeen lopputuloksia oli erilaisia kuten kuvassa yllä, ja ainoa ero oli tyylissä tallentaa

EDIT: kuvassa valkoinen on vaan paintin pohjaa

 

[eiltanen]

Kannattaa tsekata merkistötkin, windows käyttää ANSIa vieläkin oletuksena....

Mutta ite asiaan, selaimesta devtools auki ja sieltä näät elementeistä suoraan mistä tiedostoista tyylejä ladataan. Jos ne on identtiset, viimeistä pitäis käyttää.

Helposti ryssii vaikka edellisiltä riveiltä } pois tms.

Toinen yleinen syy on että selain tarjoaa välimuistista vanhempaa versiota.

 

[mopnex]

Kannattaa ehkä siirtyä käyttämään Atom / Visual Studio Code / SublimeText / Lighttable tai vastaavia editoreita jos meinaat jatkossa enemmän tehdä juttuja. Noissa on usein fiksut oletukset tallennuksen suhteen (merkistö, rivinlopetusmerkki jne..).

 

[Gize]

Kannattaa ehkä siirtyä käyttämään Atom / Visual Studio Code / SublimeText / Lighttable tai vastaavia editoreita jos meinaat jatkossa enemmän tehdä juttuja. Noissa on usein fiksut oletukset tallennuksen suhteen (merkistö, rivinlopetusmerkki jne..).

Kiitos suosituksista täytyy laittaa kokeiluun jossain vaiheessa

On mulla tuo Dreamweaver myös mutta oli niin pikkuhommista kyse että en jaksanut sitä avata kun olin (tehottomalla) läppärillä

 

[jhalmu]

Atomilla koetin ruveta, mutta vscode kuitenkin voitti. Emmet — the essential toolkit for web-developers tuo plugini siihen niin avot!

 

[eiltanen]

Tää ei sovi isoihin projekteihin välttämättä mutta GitHub - ZevanRosser/ztxt: A browser based code editor that uses codemirror on aika kiva. Vähän kuin jsfiddle jne. Lähes kaikki php+mysql+css+html+js -häröilyt tulee tehtyä tolla.

 

[Karte]

Nyt tulee hieman tyhmiä kysymyksiä vagrant/virtualbox setupista.

Tällä hetkellä testikäytössä on ubuntu/trusty64, johon olen kopioinut netistä löytämiä vagrantfilejä ja provisioneja, mutta kokonaisuus ei toimi halutulla tavalla. Nykyisellä setupilla ajan lähinnä php-skriptejä shellissä, mutta testiympäristöön pitäisi pystyttää kunnon serveri, jossa aja web-sivuja/sovelluksia.

En kuitenkaan ymmärrä serveripäästä ihan hirveästi ja linuxia on tullut käytettyä liian vähän, joten tarvitsisin pientä jeesiä vagrantfilen ( ja bootstrap.sh ym.) konffaamiseen.

Pähkinänkuoressa virtuaalikoneen pitäisi toimia testiympäristön apache2 -serverinä. Ubuntun /var/www/<projekti>/<nettisivu>/public_html olisi kansiorakenne, jossa <projekti> symlinkattaisiin Win 10 isäntäkoneeseen. Nettisivuja pitäisi pystyä lisäämään useampia projektiin ja selaimessa olisi IP-osoitteen sijaan <nettisivu> (tai <projekti>/<nettisivu>).

Nettisivujen tulisi toimia esim. wordpress-mysql -kombolla ja vastaavilla.

 

[asikainl]

Mulla on seuraavanlainen ongelma yhdellä omalla harrastesaitilla. Saitti on tehty v.2008 wordpressin päälle ja silloinen kehittäjä rakensi saitin custom teemalla. Saitilla on paljon eräänlaisia laskureita/työkaluja, joissa osassa on mukana ihan yksinkertaisia pieniä graafisia elementtejäkin (siirtyvät toki mukana kun ottaa koko saitista kopion vaikkapa käyttämälläni plugarilla, eli se ei ole ongelma). Nämä työkalusivut on rakennettu siis custom .php-templaattien päälle. Templaateissa on sisässä kaikki laskurien käyttämä koodi (javascripitiä osassa seassa). Kyseisillä sivuilla ainoa HTML on tekstiä ennen laskuria, kaikki muu sisältö/toiminnallisuus tulee .php-templateista.

Nyt on tarkoitus siirtää koko saitti Impreza-teeman päälle, jotta saitista saa responsiivisen ja muutenkin mukavan itselle päivitellä (tuttu teema itselle työpaikalta) ja vähän tehdä samalla kaikenlaista upgradea saitille pikkuhiljaa jne.

Ongelmaksi on muodostunut se, että osa noista .php-templaattien päälle rakennetuista sivuista menee rikki, vaikka siirtää koko templaatin yksi yhteen uuden Impreza-teeman päälle. Eli puhtaana copy/pastena.

Tarvitsisinkin nyt jonkun henkilön apua, joka osaisi tässä ongelmassa auttaa, sovittavaa korvausta vastaan toki, riippuen kuin työläs homma. Veikkaisin että joku joka osaa kyseisiä php-templaatteja vähän lukea / tulevia virheilmoituksia (function error on row XYZ jne.) mitä noi antaa, niin homma voi olla parhaimmillaan jopa tyyliin 10 minuutin "sormien näpäytys" sellaiselle henkilölle.

En voi laittaa templaattien koodia jakoon esim. tänne, koska ne ovat tekijänoikeuden alaisia (eli minulla on oikeus käyttää ks. templaattien koodia saitilla, mutta ei oikeutta levittää koodia eteenpäin). Eli siksi asia pitää hoitaa jonkun kanssa one-on-one.

Löytyisiköhän jotakuta, joka luulisi olevan kykeneväinen auttamaan? Ota yhteyttä vaikka ykskärillä! Vielä parempi, jos olet jostain Tampereen seudulta tai kohtuullisen ajomatkan päässä, niin voitaisiin katsoa asiaa face-to-face.

Kaikki muut "perussivut" ja noista siirrettävistä laskureista simppeleimmät toiminnalisuuksiltaan eivät mene rikki siirrossa ja toimivat hyvin uuden teeman päällä. Rikki meneviä sivuja on yhteensä 4.

Kiitoksia! Jos homma ratkeaa jonkun avulla ja ks. henkilö on halukas mahdollisesti tekemään muutakin hommaa saitin siirtoon uuden teeman päälle liittyen (ulkoasun hiontaa ja vastaavaa "perushommaa"), niin juttu voi poikia pientä lisäduuniakin. Sopii siis esim. alan opiskelijalle tms.

 

[IDDQD]

Noista editoreista vielä, itse olen tykännyt Bracketsista, plugareitakin löytyy melkoinen määrä

 

[Gize]

Onkos porukalla kokemuksia Hotjarista (kuulostipa homolle ) tai vastaavaa parempaa heti suositella? Hotjar - Heatmaps, Visitor Recordings, Conversion Funnels, Form Analytics, Feedback Polls and Surveys in One Platform

 

[PHPaska]

Nykyisellä setupilla ajan lähinnä php-skriptejä shelliss

PHP on kasa paskaa. Tee mielummin vaikka pythonilla

 

[Stanley H. Tweedle]

PHP on kasa paskaa. Tee mielummin vaikka pythonilla

Hieno altteri, jolla syntyy varmasti paljon loistavaa keskustelua.

 

[orakk]

Kokeillaan tätä lankaa kysymykseen. Tarkoitus olisi tehdä pienimuotoinen sivusto (tai varmaan NS. yhden sivun leiskalla varustettu sivu) projektin tarpeisiin. Sivustolle tullaan luomaan jonkinlainen sisältö aluksi ja projektin aikana sisältöä tullaan lisäämään jonkin verran. Tarve sivustolle tulee olemaan hieman yli vuoden verran. Mitään kauhean monimutkaisia toimintoja sivuille ei ole tarkoitus toteuttaa ja mitään pitkiä artikkeleita sinne ei tule. Sisältönä lähinnä tekstiä ja kuvia. Mahdollista on myös, että sisältöön tulee joitakin taulukoita. Sivuston pitäisi luonnollisesti olla käytettävissä tietokoneilla, tableteilla ja puhelimilla.

Varsinainen kysymys kuuluukin, että kannattaako tällaista pientä sivua lähteä toteuttamaan jonkin CMS:n päälle vai onko järkevämpää tehdä toteutus ihan HTML5+CSS3(mahdollisesti frameworkilla varustettuna) ja tarvittaessa lisänä JS (Angular, Reactor tms.).

 

[Stanley H. Tweedle]

Kokeillaan tätä lankaa kysymykseen. Tarkoitus olisi tehdä pienimuotoinen sivusto (tai varmaan NS. yhden sivun leiskalla varustettu sivu) projektin tarpeisiin. Sivustolle tullaan luomaan jonkinlainen sisältö aluksi ja projektin aikana sisältöä tullaan lisäämään jonkin verran. Tarve sivustolle tulee olemaan hieman yli vuoden verran. Mitään kauhean monimutkaisia toimintoja sivuille ei ole tarkoitus toteuttaa ja mitään pitkiä artikkeleita sinne ei tule. Sisältönä lähinnä tekstiä ja kuvia. Mahdollista on myös, että sisältöön tulee joitakin taulukoita. Sivuston pitäisi luonnollisesti olla käytettävissä tietokoneilla, tableteilla ja puhelimilla.

Varsinainen kysymys kuuluukin, että kannattaako tällaista pientä sivua lähteä toteuttamaan jonkin CMS:n päälle vai onko järkevämpää tehdä toteutus ihan HTML5+CSS3(mahdollisesti frameworkilla varustettuna) ja tarvittaessa lisänä JS (Angular, Reactor tms.).

Itse en näe tarvetta CMS:lle. Googleta sopiva responsiivinen HTML5-template ja värkkää siitä helposti ja nopeasti sivut. Päivittäminen klassiseen malliin editorilla + FTP.

(En ole web-ammattilainen)

 

[kjns]

Varmaan kannattaa miettiä sitäkin tarvitseeko sivuston olla Content Management System, eli pitääkö saittia pystyä helposti päivittämään / lisäämään tekstiä, kuvia tai osioita omilla hallintatyökaluilla, vai onko sisältö enemmän staattista. Jos ensinmainittu, niin jonkun CMS enginen käyttö on varmaan helpoin vaihtoehto, mutta jos saitti on tyyliä "set it and forget it" ja riittää, että joku laittaa sinne pari päivitystä vuoden aikana shellin yli niin nopea staattinen saitti kerralla kuntoon voi olla tehokkain tapa toteuttaa homma.

 

[Gize]

Jos päivitystarve tyyliin max. kerran kuussa niin itse tekisin ihan hötömölöllä sivun.

 

[orakk]

Varmaan kannattaa miettiä sitäkin tarvitseeko sivuston olla Content Management System, eli pitääkö saittia pystyä helposti päivittämään / lisäämään tekstiä, kuvia tai osioita omilla hallintatyökaluilla, vai onko sisältö enemmän staattista. Jos ensinmainittu, niin jonkun CMS enginen käyttö on varmaan helpoin vaihtoehto, mutta jos saitti on tyyliä "set it and forget it" ja riittää, että joku laittaa sinne pari päivitystä vuoden aikana shellin yli niin nopea staattinen saitti kerralla kuntoon voi olla tehokkain tapa toteuttaa homma.

Varmaan sivusto tulee olemaan melko staattinen, mutta ehkä joku Facebook ja Instagram plugari sinne voisi tulla. Niiden takia lähinnä mietin, että olisko CMS hyvä ratkaisu, lähinnä WordPress.

 

[KuunoKaakkuri]

Kannattaa tsekata myös staattiset sivugeneraattorit (kuten Jekyll) lävitse. Muuttuva sisältö tekstifaileihin ja Jekylillä muuntaa ne html-sivuiksi.

 

[mopnex]

Jos osaa vähän puukottaa, niin hostaat staattisen sivun jonkun templan päälle kuten ehdotettu. Täältä voi esim. katsella: HTML5 UP

Tuohon sitten liittää Facebookit ja Instagramit. Pääsee todennäköisesti helpommalla kuin WP, sekä tuon voi hostata ihan missä vaan. Esimerkiksi AWS S3 free-tier, ensimmäinen vuosi 0e. Tai Azuressa, tai Google Cloudissa.

Jos staattiset sivubuilderit on oman osaamisen mahdollisuuksien rajoissa, niin kannattaa katsoa Jekyllin lisäksi myös Hugo.

 

[Gize]

Varmaan sivusto tulee olemaan melko staattinen, mutta ehkä joku Facebook ja Instagram plugari sinne voisi tulla. Niiden takia lähinnä mietin, että olisko CMS hyvä ratkaisu, lähinnä WordPress.

Eikös nuo mene suoraan html:äkin suurinpiirtein rivillä koodia?

 

[Stanley H. Tweedle]

Eikös nuo mene suoraan html:äkin suurinpiirtein rivillä koodia?

Ja sen koodin saa valmiina ainakin Facebookista, Instagrammia koskaan käyttänyt...

EDIT: Wordpress on ihan ok ratkaisu, jos ei ole koskaan puukottanut. Puukottamisen ja WP:n haltuunotossa on varmasti sama vaiva.

 

[Gize]

Ja sen koodin saa valmiina ainakin Facebookista, Instagrammia koskaan käyttänyt...

EDIT: Wordpress on ihan ok ratkaisu, jos ei ole koskaan puukottanut. Puukottamisen ja WP:n haltuunotossa on varmasti sama vaiva.

Juu, ja pinterestistä myös, ei ole ig:stä itselläkään kokemusta.

 

[orakk]

Kyllä tuo varmaan on oikea ratkaisu lähteä tekemään HTML5+CSS3 kombolla. Ja ei ole tarkoitus mitään valmiita pohjia käyttää, vaan pyrkiä tekemään itse. Sen verran on pohjia, että ei sormi heti mene suuhun ja jos menee, niin kyllä apuja aina viimeistään Googlen avulla löytää.

 

[SweeneyTodd]

Ja ei ole tarkoitus mitään valmiita pohjia käyttää, vaan pyrkiä tekemään itse. Sen verran on pohjia, että ei sormi heti mene suuhun

En tiedä tietysti miten kova guru olet, mutta suosittelen kyllä jonkun valmiin frameworkin tai templaten käyttöä. Miksi keksiä pyörää uudelleen, kun joku on jo homman tehnyt? Toki onnistuu itsekin, mutta sitten saa nähdä huomattavasti enemmän vaivaa. Noita käyttämällä voi laittaa paukut siihen ulkoasun ja sisällön suunnitteluun sen pohjakoodin kirjoittelun sijaan.

 

[orakk]

En tiedä tietysti miten kova guru olet, mutta suosittelen kyllä jonkun valmiin frameworkin tai templaten käyttöä. Miksi keksiä pyörää uudelleen, kun joku on jo homman tehnyt? Toki onnistuu itsekin, mutta sitten saa nähdä huomattavasti enemmän vaivaa. Noita käyttämällä voi laittaa paukut siihen ulkoasun ja sisällön suunnitteluun sen pohjakoodin kirjoittelun sijaan.

En tokikaan sanonut, että en ole valmis käyttämään frameworkkia, vaan en halua käyttää templatea. Tämänhän voi toki tehdä äärettömän simppelisti käyttämällä valmista templaattia ja vaikka ulkoasuakin tai vaihtoehtoisesti voi samalla yrittää oppiakin jotain. Mikään guru en missään nimessä ole, mutta olen aiemminkin kyennyt tekemään sivuilleni itse leiskan ja näin ajattelin tälläkin kertaa tehdä.

 

[kjns]

Tekemällä oppii parhaiten, jos meinaat ottaa oppimisprojektina niin mahdollisimman paljon koodausta

 

[evakko]

Toteutettavana melko yksinkertaisen tietokannan web-liittymä. Sisältö asiakaskortiston tapainen, ns. päätaulussa nimi, yhteystiedot jne. ja ns. aputauluissa esim. tilaushistoria. Haut kohdistuvat tiettyihin kenttiin ja selaimen läpi tulee voida muokata kaikkea tietoa. Ei siis mitään erikoista, näitähän on tehty webin alkuajoista lähtien. Tästä johtuen tuntuukin jotenkin vanhanaikaiselta alkaa koodata itse tuollaista pakkohan tuohon hommaan on olla valmiita työkaluja. Millä onnistuu? Ehkä joku sellainen että voisi parittaa tietokannan kentät HTML-lomakkeen kenttiin ja määrittää niille pakollinen/valinnainen tms. tiedot ja tarkastukset. Usealla CMS:lläkin saa varmasti tehtyä, mutta ainakin osa tallentaa tiedot omiin tauluihinsa, nyt on tarkoitus pitää tietokanta itsenäisenä että siihen pääsee käsiksi muutenkin kuin webistä sekä koska jos CMS tulee käyttöön niin se valitaan muulla perusteella kuin tämän jutun.

 

[Fanboys Suck]

Toteutettavana melko yksinkertaisen tietokannan web-liittymä. Sisältö asiakaskortiston tapainen, ns. päätaulussa nimi, yhteystiedot jne. ja ns. aputauluissa esim. tilaushistoria. Haut kohdistuvat tiettyihin kenttiin ja selaimen läpi tulee voida muokata kaikkea tietoa. Ei siis mitään erikoista, näitähän on tehty webin alkuajoista lähtien. Tästä johtuen tuntuukin jotenkin vanhanaikaiselta alkaa koodata itse tuollaista pakkohan tuohon hommaan on olla valmiita työkaluja.

Mikä tietokanta? Itse olen mysql:n kanssa käyttänyt yksinkertaisiin CRUD hommiin puukotettua phpmyedit scriptiä. phpMyEdit: Instant MySQL Table Editor and PHP Code Generator (githubista löytyy forkattu versioita vaikka PDO:lle mitä en ole tosin kokeillut) löytyi myös tällainen sivu 10 PhpMyEdit Alternatives 2018 – Top Best Alternatives

 

[evakko]

MySQL hyvinkin. Kiitos, tosiaan phpMyEdit osoittaa että työkaluja on tehty. Tosin ensivaikutelma on että tuolla mennään jopa liiankin lähelle tietokantaa. Mutta täytyy tutusta saako yhdisteltyä yhteen näkymään useampaa taulua ja onko tuossa jonkinlaista template-systeemiä vaikka toki screenshottien tyyppisen ratkaisun voisi pistää läpi että on kuin Exceliä muokkaisi

 

[Zigh]

Toteutettavana melko yksinkertaisen tietokannan web-liittymä. Sisältö asiakaskortiston tapainen, ns. päätaulussa nimi, yhteystiedot jne. ja ns. aputauluissa esim. tilaushistoria. Haut kohdistuvat tiettyihin kenttiin ja selaimen läpi tulee voida muokata kaikkea tietoa. Ei siis mitään erikoista, näitähän on tehty webin alkuajoista lähtien. Tästä johtuen tuntuukin jotenkin vanhanaikaiselta alkaa koodata itse tuollaista pakkohan tuohon hommaan on olla valmiita työkaluja. Millä onnistuu? Ehkä joku sellainen että voisi parittaa tietokannan kentät HTML-lomakkeen kenttiin ja määrittää niille pakollinen/valinnainen tms. tiedot ja tarkastukset. Usealla CMS:lläkin saa varmasti tehtyä, mutta ainakin osa tallentaa tiedot omiin tauluihinsa, nyt on tarkoitus pitää tietokanta itsenäisenä että siihen pääsee käsiksi muutenkin kuin webistä sekä koska jos CMS tulee käyttöön niin se valitaan muulla perusteella kuin tämän jutun.

Vastaava tarve oli itsellänikin tuossa joku aika sitten kun piti Spring Bootilla tehtyyn serveriin saada admin-käli mahdollisimman helposti tehtyä. Mitään valmista sopivaa en kuitenkaan löytänyt, niin päädyin sitten kasaamaan tuon Vaadinilla.
Perus CRUD-näkymien tekemiseen löytyy jotain valmiitakin kilkkeitä, joita en tosin ole kokeillut: Crud UI Add-on | Vaadin Directory | Vaadin
Vaatimuksena tietysti että Java on hallussa.

 

[Fanboys Suck]

MySQL hyvinkin. Kiitos, tosiaan phpMyEdit osoittaa että työkaluja on tehty. Tosin ensivaikutelma on että tuolla mennään jopa liiankin lähelle tietokantaa. Mutta täytyy tutusta saako yhdisteltyä yhteen näkymään useampaa taulua ja onko tuossa jonkinlaista template-systeemiä vaikka toki screenshottien tyyppisen ratkaisun voisi pistää läpi että on kuin Exceliä muokkaisi

Sen verran pitää vääntää koodia että tekee "joinit" taulujen välille eli määrittelee mikä liittää taulut ja mikä kenttä näytetään.

Tässä yksinkertainen esimerkki:

$opts['tb'] = 'group_members';

$opts['fdd']['id'] = array(
  'name'     => 'ID',
  'select'   => 'T',
  'options'  => 'AVCPDR', // auto increment
  'maxlen'   => 11,
  'default'  => '0',
  'sort'     => true  
);

$opts['fdd']['gid'] = array(
  'name'     => 'Gid',
  'select'   => 'T',
  'maxlen'   => 6,
  'sort'     => true
);

$opts['fdd']['gid']['values']['table'] = 'groups';
$opts['fdd']['gid']['values']['column'] = 'gid';
$opts['fdd']['gid']['values']['description'] = 'name';
$opts['fdd']['gid']['name'] = 'Group';
$opts['fdd']['gid']['select'] = 'D';

$opts['fdd']['oid'] = array(
  'name'     => 'Oid',
  'select'   => 'T',
  'maxlen'   => 6,
  'sort'     => true
);

$opts['fdd']['oid']['values']['table'] = 'organisers';
$opts['fdd']['oid']['values']['column'] = 'id';
$opts['fdd']['oid']['values']['description']['columns'][0] = 'firstname';
$opts['fdd']['oid']['values']['description']['divs'][0] = ' ';
$opts['fdd']['oid']['values']['description']['columns'][1] = 'lastname';
$opts['fdd']['oid']['name'] = 'User';

eli goup_members taulun rivejä voidaan muokata, formi näyttää ryhmän id:n sijaan ryhmän nimen dropdownissa, organiserista näytetään etunimi ja sukunimi, mutta tauluun talletetaan vain ryhmän ja henkilön gid ja id.

Niin joo, header.html ja footer.html on ihan html:ää mitä voi muokata miten haluaa. Se scriptin tekemä dynaaminen taulu ja formi tulee vaan niiden väliin. Ulkonäköä olen muokannut vaikka tähän tapaan:

    hr.pme-hr            { border: 0px solid; padding: 0px; margin: 0px; border-top-width: 1px; height: 1px; }
    table.pme-main       { border: #004d9c 1px solid; border-collapse: collapse; border-spacing: 0px; width: 100%; }
    table.pme-navigation { border: #004d9c 0px solid; border-collapse: collapse; border-spacing: 0px; width: 100%; }
    td.pme-navigation-0, td.pme-navigation-1 { white-space: nowrap; }
    th.pme-header        { border: #004d9c 1px solid; padding: 4px; background: #add8e6; }
    td.pme-key-0, td.pme-value-0, td.pme-help-0, td.pme-navigation-0, td.pme-cell-0,
    td.pme-key-1, td.pme-value-1, td.pme-help-0, td.pme-navigation-1, td.pme-cell-1,
    td.pme-sortinfo, td.pme-filter { border: #004d9c 1px solid; padding: 3px; }
    td.pme-buttons { text-align: left;   }
    td.pme-message { text-align: center; }
    td.pme-stats   { text-align: right;  }

 

[rehtori]

Väärä lanka.

 

[PalleX]

Minkä frameworkkien päälle lähtisit juuri nyt kehittämään uutta web-sovellusta (SPA)? Olisi yksi isohko projekti, missä voisi aloittaa ihan tyhjältä pöydältä, mutta teknologiat pitäisi olla ehdottomasti tätä päivää. PHP Laravel ollut aikaisemmin pohjalla, mutta nyt alkaa kiinnostaa enemmän Javascript frameworkit. Adonis(backend) ja Vue(frontend) tällä hetkellä vaikuttavat kiinnostavilta. Angular?. Vue vs. React keskustelua olen jonkin verran seurannut ja Vuella saisi nopeammin asioita aikaiseksi ja vaikuttaa ihan pätevältä elinkaartakin ajatellen. Adonis on hieman kysymysmerkki, koska se ei ole vielä ottanut suuria tuulia alleen.

 

[Fanboys Suck]

Minkä frameworkkien päälle lähtisit juuri nyt kehittämään uutta web-sovellusta (SPA)? Olisi yksi isohko projekti, missä voisi aloittaa ihan tyhjältä pöydältä, mutta teknologiat pitäisi olla ehdottomasti tätä päivää. PHP Laravel ollut aikaisemmin pohjalla, mutta nyt alkaa kiinnostaa enemmän Javascript frameworkit. Adonis(backend) ja Vue(frontend) tällä hetkellä vaikuttavat kiinnostavilta. Angular?. Vue vs. React keskustelua olen jonkin verran seurannut ja Vuella saisi nopeammin asioita aikaiseksi ja vaikuttaa ihan pätevältä elinkaartakin ajatellen. Adonis on hieman kysymysmerkki, koska se ei ole vielä ottanut suuria tuulia alleen.

Vue.js backendi sitten millä vaan kätevimmin hoituu, django, laravel, joku nodehärdelli? Mutta vue on ainakin itselleni tarpeeksi perinteinen eikä tarvitse opetella täysin alusta kaikkea ja sitoutua täysillä johonkin tiettyyn frameworkkiin (angular...)

 

[©©©]

Backendin toteutus kans riippuu vähän sovelluksen kompleksisuudesta ja luonteesta että kannattaisiko tehdä se mikropalveluilla. Esim. monta Flask-palvelua kuin yksi Django-monoliitti. Go on kyllä kans tehokas kieli REST API:n toteutukseen ja soveltuu mikropalveluihin hienosti, kuten Node+Express jos siitä kuviosta pitää. Miksi ei PHP:kin ja varmaan Laravel frameworkeistä se paras. Jotenkin vaan tuntuu, että noi monoliitti-frameworkit on aikansa eläneitä. Itse en varmaan tekisi Javalla tai ASP.NET:llä, tosin saattaahan näistäkin joku pitää, makukysymyksiä.

Sitten tietenkinkin mikropalvelut pitää laittaa Containereihin ja herää kysymys millä orkestroit, itse tekisin Kuberneteksella joka taas herättää kysymyksen missä hostaat, varmaan GCP olisi luontevin. Missäs tietokanta ja onko se SQL vai dokumenttitietokanta? Varmaan SAAS-palveluna pilvestä kuitenkin. Monia on mahdollisuuksia

Itse tekisin kans frontin Vuella.

 

[nnaku]

Minkä frameworkkien päälle lähtisit juuri nyt kehittämään uutta web-sovellusta (SPA)? Olisi yksi isohko projekti, missä voisi aloittaa ihan tyhjältä pöydältä, mutta teknologiat pitäisi olla ehdottomasti tätä päivää. PHP Laravel ollut aikaisemmin pohjalla, mutta nyt alkaa kiinnostaa enemmän Javascript frameworkit. Adonis(backend) ja Vue(frontend) tällä hetkellä vaikuttavat kiinnostavilta. Angular?. Vue vs. React keskustelua olen jonkin verran seurannut ja Vuella saisi nopeammin asioita aikaiseksi ja vaikuttaa ihan pätevältä elinkaartakin ajatellen. Adonis on hieman kysymysmerkki, koska se ei ole vielä ottanut suuria tuulia alleen.

Vue.js on kyllä ihan tautisen helppo framework , jos kaipaat vaikkapa hakukoneissa näkyvyyttä niin Nuxt.js voit askarrella staattisen (server rendering) Vue apin ja eteneminen on yhtä helppoa kuin singlefile vuessa. Bäkeistä jo tossa mainittiinkin että aikalailla softan luonteesta ja omista mieltymyksistä kiinni, mutta en nyt heittämällä tyrmäis esim. Javaa sillä Maven paketoi Spring-boot softan kätevästi vaikkapa dockeriin mikropalveluksi.

 

[PalleX]

Kiitos kommenteista. Ideaali tilanne että koko roska olisi tehty yhdellä kielellä, mikä nyt frontin vuoksi olisi Javascript. Ihan vaan jatkokehityksen ja tiimin skill settien vuoksi olisi kiva juttu. Sovellus olisi SQL:n kyljessä, ehkäpä MariaDB/MySQL. SEO ei ole oleellinen tässä tapauksessa, joten SSR ei välttämättä tarpeen. Adoniksella yksinäänkin onnistuisi Fullstack, mutta Vue kyllä vaikuttaa hyvin kiinnostavalta ja jatkoprojektien kannalta siihen kannattaisi panostaa. Olisihan tuossa tarjolla ihan mielenkiintoinen boilerplate nuxt-community/adonuxt-template, mikä miksaa Adoniksen ja Nuxt.js:n.

 

[Vispersson]

Millä kielellä kannattaisi lähteä harjoittelemaan nettisivujen tekemistä? Pythonista kokemusta aika paljonkin, muiden kielien lukeminen ja opettelu onnistuu kohtalaisesti. Itse olen kuullut vain Djangosta, onko se hyvä? Ei ole siis käytännössä mitään hajua miten nettisivujen käyttäjälle näkyvä puoli toteutetaan.

 

[Xiyng]

Millä kielellä kannattaisi lähteä harjoittelemaan nettisivujen tekemistä? Pythonista kokemusta aika paljonkin, muiden kielien lukeminen ja opettelu onnistuu kohtalaisesti. Itse olen kuullut vain Djangosta, onko se hyvä? Ei ole siis käytännössä mitään hajua miten nettisivujen käyttäjälle näkyvä puoli toteutetaan.

En tiedä, josko joku framework tarjoaa mahdollisuuden ohittaa tämä, mutta todennäköisesti HTML ja CSS pitää ainakin osata ainakin perustasolla ennen kuin on järkeä lähteä tekemään muuta päälle. Vaikka niiden ohittaminen olisikin mahdollista jollain konstilla, silti luultavasti kannattaa ne osata ainakin perustasolla. Sen jälkeen loppu riippuneekin sitten siitä, mitä tarkalleen haluat tehdä - nettisivu kun on aika ympäripyöreä termi nykyään, koska se voi tarkoittaa mitä tahansa staattisesta nettisivusta monimutkaiseen web-sovellukseen.

 

[nnaku]

Millä kielellä kannattaisi lähteä harjoittelemaan nettisivujen tekemistä? Pythonista kokemusta aika paljonkin, muiden kielien lukeminen ja opettelu onnistuu kohtalaisesti. Itse olen kuullut vain Djangosta, onko se hyvä? Ei ole siis käytännössä mitään hajua miten nettisivujen käyttäjälle näkyvä puoli toteutetaan.

@Xiyng sen hyvin tossa sanoikin.

Nykypäivänä javascriptiä tuskin voi ohittaa puhuttaessa web devauksesta. Ja siitä voisin sanoa että, unohda jQuery ja muut kirjastot kokonaan ainakin niin pitkään että, perus JS (es5) lähtee edes jotenkuten. Näillä teet vain itsellesi hallaa tulevaisuutta ajatellen.

DOM perehtyminen, document api ja http metodit voisi olla sen Hello Worldin jälkeen seuraavat luonnolliset askeleet.

Sitten alkaa olla vuorossa ne omat kiinnostuksen kohteet oppimisessa.