Yleistä keskustelua webdevauksesta

Viestiketju alueella 'Ohjelmointi, pelikehitys ja muu sovelluskehitys' , aloittaja aittis, 17.10.2016.

  1. nnaku

    nnaku I'm object-oriented! Tukijäsen

    Viestejä:
    729
    Rekisteröitynyt:
    28.11.2016
    @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.
     
    Vispersson ja Xiyng tykkäävät tästä.
  2. Zvona

    Zvona

    Viestejä:
    184
    Rekisteröitynyt:
    18.10.2016
    Jatkan hyvin alkanutta keskustelua tässä kontekstissa:

    1. yleinen virhe, minkä henkilökohtaisesti koen (etenkin aloittelevien) kehittäjien tekevän on frameworkin / kirjaston valitseminen web-sivustojen tekemiseen. Eli tehdään sovelluskehitykseen sopivalla kikkaleella fancyt kotskasivut. Tämä, kun ei ole esim. Reactin / Angularin / Vuen tarkoitus, että "käyntikorttimaiset" kotisivut tehtäisiin niillä.

    2. lisäksi HTML:n ja CSS:n perusteellinen osaaminen on monesti aliarvostettua. Sitä näkee vaikkapa triviaalien animointien olevan toteutettu JS:llä (ja apuna n+1 riippuvuutta aina PopMotioniin saakka), vaikka saman saa tehtyä CSS:llä.

    3. semanttinen osuus "Markup Language":sta on jäänyt monilta pois ja 90% sisällöstä survotaan kylmästi divien sisään. Tällähän ei loppukäyttäjän näkökulmasta ole varsinaista merkitystä, mutta pitää muistaa myös, että sivuston rakenteen tulkinta on monesti selainten ja niille tehtyjen lisäosien vastuulla.

    4. mobiililaitteet edustavat yleensä vähintään 50% vierailukerroista. Tämä kannattaa ottaa huomioon - ei niinkään opettelemalla "responsive web design" -huttua vaan aidosti tutustumalla CSS:n täysin käyttökelpoisiin ominaisuuksiin (esim. flexbox, gridit, media queryt).

    "Mobile first" on myös fraasi jota hoetaan ja se toki pitää paikkansa. Mutta itse en jättäisi hyvin alkanutta kehitystä kesken vain siksi, että serkun tyttöystävän kolme vuotta vanha android ei rendaa sivustoa täydellisesti. Eli kannattaa valita taistelunsa responsiivisuuden suhteen. Ja "RWD" on aika 2013 juttua - itse kutsun tätä aluetta "Adaptive User Interface Designiksi" - eli koko käyttöliittymän tulee mukautua niin päätelaitteen kuin myös muiden käyttäjän ominaisuuksien mukaan. Tämä tarkoittaa siis paljon muutakin kuin ärsyttäviä hampurilais-menuja.

    5. palvelinpuoli (johon alkuperäisessä kysymyksessä viitataan) on kokonaan toinen osio. Mielestäni käytetyt kielet, kirjastot ja konventiot riippuvat monesti kokonaistoteutuksesta. Nyt, kun kyseessä on web-sivusto, niin itse teen aina node+express endpointit, johon "mockaan" oikeat, sivuilla näytettävät tiedot esim. JSON-tiedostoina, jotka populoidaan pug:illa (ex-Jade). Vasta tämän jälkeen alan harkita - ihan jo ylläpidettävyyden näkökulmasta - josko tarvittaisiin (dokumentti)tietokanta. Ehkä voisit harkita tämän toisentamista Pythonilla ja lähteä siitä liikkeelle?

    Suosittelen miettimään, miten hakee tietoa netistä. Viitaten vaikka kohtaan #2: kun halutaan kaunis transitio etusivun kuville, niin kannattaa esim. hakea "image transitions with css" eikä "bleeding edge javascript library for animations".

    Ja kun tulee ensimmäisen JS:ää vaativan toimenpiteen aika, niin silloin pitää hahmottaa asia (joka jo mainittiinkin) että kirjoitetaanko JavaScriptiä sellaisenaan vai käyttääkö sitä DOMin sörkkimiseen. Tässä karrikoitu esimerkki:
    Koodi:
    // JS:ää:
    const numbers = "0123456789".split("");
    
    // JS:ää:
    const classNames = numbers.map((number) => `className-${number}`);
    
    // DOM-manipulointia (tai sen valmistelua):
    const elements = document.querySelectorAll('div');
    
    // DOM-manipulointia:
    Array.from(elements).forEach((element) => element.classList.add(classNames.shift()));
    
    Harras mielipiteeni on, että mitä enemmän joudut manipuloimaan DOMia, niin sitä todennäköisemmin teet jotain väärin.

    Myös se kannattaa muistaa, että paperilla moni asia voi näyttää hyvältä. Mutta kun pääsee aidosti kokeilemaan sitä ruudulla / päätelaitteella, niin tilanne saattaa kääntyä päälaelleen. Siksi "fail fast, fail often" on hyvä ideologia jota seurata. Siinä vaiheessa, kun koko leiska on jo taitettu kasaan ja tajutaan, että sekä leipäteksti että kaikki call to action -elementit ovat liian pieniä, niin homma lähtee valitettavasti käytännön nollasta. Eli konsepti- ja UI-suunnittelu on hyvä startti, mutta varsinainen UX asettuu uomiinsa vasta sitten, kun tekelettä pääsee ensimmäisen kerran kokeilemaan.
     
    Rantakemisti, Vispersson ja nnaku tykkäävät tästä.
  3. Vispersson

    Vispersson

    Viestejä:
    59
    Rekisteröitynyt:
    20.06.2018
    Tuli nyt sitten mentyä vähän ojasta allikkoon tässä kun lähdin googlettelemaan, että mitäs käytännön eroja noilla frameworkeillä ja itse js:llä, css:llä yms. on :D Jätin nyt kuitenkin Djangon väliin ja lähdin opettelemaan JavaScriptiä javascript.info:n avulla. Eli jos nyt jotain oikein ymmärsin niin tämänkö ohella olisi hyvä lähteä opettelemaan css:n käyttöä?

    Minulla ei tällä hetkellä ole suurempaa visiota kotisivun käyttötarkoituksesta tai päämäärästä, mutta jotain suhteellisen simppeliä olisi tarkoitus vuoden aikana kehitellä omalle domainille. Käyttäjäystävällisyys on kuitenkin ollut omissa projekteissa aina ensisijalla, hyvä kun otitte sen esille. Omalla kohdalla ideaalinen toteutus olisi tuo, että tekisin datan pyörittelyn nettisivun ulkopuolella pythonilla ja json-tiedostoina.

    Vähän on vielä hakusessa termit ja mitä tällä kaikella nyt tehdään ja mitä ne tarkoittaa palvelimen toiminnan kannalta, mutta eiköhän tämä tästä.
     
  4. nnaku

    nnaku I'm object-oriented! Tukijäsen

    Viestejä:
    729
    Rekisteröitynyt:
    28.11.2016

    HTML on siis markup jolla määritellän DOM (Document Object Model) puu, eli sivun runko!
    CSS (Cascading Style Sheets) on stylesheet eli pitää sitällään tyyli viittauksia DOM puun elementteihin.

    Selain muodostaa ensin HTML tiedostosta DOM ja CSSOM puut
    Joista se sitten muodostaa Renderöinti puun, jonka se piirtää näytölle.

    CSS siis pitää sisällää vain staattisia viittauksia DOM elementteihin!

    JavaScriptillä taas tuotetaan kaikki interaktiivinen sisältö! Kuten vaikkapa listojen järjestys a-ö ja ö-a, tai datan hakeminen palvelimelta. TAI elementin tyylin muokkaaminen mikäli CSS ei siihen pysty ja silloinkin yleensä muutetaan elementin selectoreita, kuten id tai luokkaa.

    huomaa että #id tulisi olla uniikki kun taas .luokkaa voidaan käyttää usealle eri elementille joille halutaan sama tyylit.

    HTML:
    <!DOCTYPE html>
    <html>
      <head>
        <title>Document</title>
        <style>
          /* # id */
          #container {
            min-height: 100vh;
            position: relative;
          }
          header {
            background: tomato;
            padding: 10px;
          }
          main {
            padding: 10px;
            padding-bottom: 60px; /* footerin korkeus */
          }
          footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 60px; /* footerin korkeus */
            background: seagreen;
          }
          /* . luokka */
          .code {
            font-weight: 600;
            text-decoration-line: underline;
          }
        </style>
      </head>
      <body id="container">
        <header>
          Ylätunniste, usein headerissa on jonkinlainen sivuston navigointi.
        </header>
        <main>
          <h1>Otsikko</h1>
          <p>
            Sivun näkyvä sisältö määritellään <span class="code">body</span> tägien
            sisään. <span class="code">p</span> on paragraafi joka on tarkoitettu
            leipätekstille.
          </p>
        </main>
        <footer>Tämä on sivun alatunniste</footer>
      </body>
    </html>
    
    
    Eli seuraavan lainen html documentti piirtyy selaimessa näin.
    upload_2018-12-11_4-56-32.png


    Suosittelen aloittamaan iha siitä staattisen sivun räpellyksestä! Ja sitten kun, nälkä kasvaa syödessä on hyvä lähteä laajentamaan osaamista valmiisiin työkaluihin, kirjastoihin ja kokonaisiin frameworkkeihin.

    Kirjastoilla ( esim. ReactJS ) ja frameworkeillä ( esim Vue ja Angular ) yleensä rakennettaan hieman monimutkaisempia ja laajempia ratkaisuja, kuin jokin perus staattinen sivu.

    Nuo kolme edellämainutta pytkivät pilkkomaan koodin muduleiksi joita voidaan helposti uudelleen käyttää. Nämä modulit myös sitten toimitetaan javascriptin avulla selaimen renderöitäväksi riippuen käyttäjän käyttäytymisestä sivustolla/sovelluksessa. Näiden DOM pitää sisällää tasan pakolliset meta tiedot ja ns. bundle.js tiedoston jonka kautta kaikki sisältö toimitetaan.
     
    Viimeksi muokattu: 11.12.2018
    Vispersson tykkää tästä.
  5. Uhanalainen

    Uhanalainen

    Viestejä:
    114
    Rekisteröitynyt:
    17.10.2016
    Lähde nyt yhdestä liikkeelle, turha niitä kaikkia on sekaisin yrittää opetella, menee vaan aivot umpisolmuun turhaan. HTML:ssä nyt ei kauaa mene kun sen sisäistää, CSS:ään voikin käyttää enemmän aikaa.

    Sitten kun ne on hallussa, alat tutustumaan JS:ään kunnes alkaa tuntua siltä että hallitset jotenkuten (tai osaat googlata). Sitten yhdistelet palaset jossain isommassa projektissa.
     
    Xiyng ja Vispersson tykkäävät tästä.
  6. Karhukainen

    Karhukainen

    Viestejä:
    16
    Rekisteröitynyt:
    27.10.2016
    Katso Flask-tutorialeja, sillä on hyvä lähteä liikkeelle mitä palvelinpuoleen tulee.
     
  7. Kautium

    Kautium IOdootti

    Viestejä:
    6 500
    Rekisteröitynyt:
    16.10.2016
    En ole koskaan kovinkaan syvällisesti tutustunut HTML/CSS:n logiikkaan ja nyt kun näitä on pitänyt vähän enemmän tavailla, niin eipä tule äkkiseltään mieleen mitään yhtä kömpelöä kokonaisuutta.

    Pakko sanoa tämä perinteinen, eli että kuussa on käyty 50v sitten ja edelleen webbisivuja askarrellaan jollakin Notepad++:lla ja arvotaan erillisessä tyylitiedostossa, että mikähän asetus/attribuutti voisi vaikuttaa minnekin ja milläkin tavalla. Tuossa oli mm. sellainen tilanne, että piti rakennella sivu, jossa on ensin header, alla pari palstaa ja niiden alla footer, mutta eihän tällaista perusleiskaakaan ole mahdollista luoda kuin kikkailemalla sinne väliin jotain kelluvia elementtejä, jotta palstat saadaan edes jotenkin siististi rinnakkain. Ja siinä vasta hiukset harvenevatkin, jos haluaa mitään edistyneempää.

    On kyllä totaalisen perverssi systeemi ja muistui aika nopeasti mieleen, miksi ei ole aihe koskaan liiemmin kiinnostanut.

    Millä työkaluilla porukka näitä hommia oikein tekee, jotta pää kestää? Ainakaan mitään kunnollisia wysiwyg-työkaluja ei taida olla olemassa, että saisi nopeasti edes jonkinlaista pohjaa aikaiseksi ja voisi sitten viilata sitä koodia säätämällä tarkemmaksi?
     
  8. hsalonen

    hsalonen

    Viestejä:
    8 485
    Rekisteröitynyt:
    17.10.2016
    Kannattaa opetella joku yleisesti käytössä oleva kirjasto, esim. Bootstrap:
    Bootstrap
     
  9. oselotti

    oselotti

    Viestejä:
    358
    Rekisteröitynyt:
    02.11.2016
    Eri selainten kehittäjätyökaluilla voi käpistellä sivun tyyliä suoraan lennossa. Etenkin Chromessa on erinomaiset työkalut kehittäjille.
    Kts. Lisää työkaluja -> Kehittäjän työkalut -> Elements
     
  10. Paapaa

    Paapaa

    Viestejä:
    2 866
    Rekisteröitynyt:
    17.10.2016
    Jos "kelluvilla elementeillä" tarkoitat floateaja, niin ei onneksi tarvitse. Nykyään leiskat/palstat tehdään flexboxeilla tai vielä paremmin uudemmilla grideillä. Ei mene enää niin pahasti hermo asemoinnin kanssa. IE:tä lukuunottamatta grid on hyvin tuettu.

    Usein kun tekee sivuja, on käytössä joku dev-server/hot-loader, joka uudelleenlataa ja näyttää muutokset, kun tallentaa jonkun projektin tiedoston. Voi siis pitää selainta auki ja muutokset näkyvät ns. reaaliajassa. Helpoiten tällaisen saa käyttöön esim. suunnitelemalla leiskaa täällä:

    CodeSandbox: Online Code Editor Tailored for Web Application Development

    Muitakin vastaavia on. Wysiwygejä en ole koskaan käyttänyt.
     
  11. Kautium

    Kautium IOdootti

    Viestejä:
    6 500
    Rekisteröitynyt:
    16.10.2016
    Höh, kaikki ohjeet mitä löysin aiheesta, ohjeistivat käyttämään juuri floatteja. Ei vissiin ole tieto mahdollisesti paremmista menetelmistä tavoittanut kaikkia.

    Tuo Codesandbox vaikutti ihan mielenkiintoiselta, pitääpä tutkia. Ei sillä että sekään auttaisi siihen vaivaan, että tietää mitä haluaa, mutta ei tiedä millä menetelmillä se kannattaisi toteuttaa. Joku wysiwyg-työkalu olisi tällaiseen tarpeeseen kätevä, kun sillä voisi tehdä näppärästi leiskan pohjan ja lisäillä kuvat ja niiden ominaisuudet jne ja loppu hienosäätö ja koodin siistiminen sitten suoraan css-tiedostoon manuaalisesti.
     
  12. Paapaa

    Paapaa

    Viestejä:
    2 866
    Rekisteröitynyt:
    17.10.2016
    No, netti säilyttää ne 10v vanhat ohjeet myös ja Google saattaa niitä tarjota. Lähtökohtaisesti et tarvitse tai halua floateja mihinkään moderneilla selaimilla. Niitä saattaa olla esimerkeissä selaintuen takia, mutta moderneilla selaimilla toimivat pelkillä grideillä/flexboxeilla, joiden avulla asemointi on paljon helpompaa ja monipuolisempaa.

    Codepen on toinen näppärä työkalu pikkukokeiluun. Pointti on se, että ei tarvitse asentaa ja käynnistää mitään, voi suoraan kirjoittaa koodin/markupin ja nähdä tulos.
     
  13. Kautium

    Kautium IOdootti

    Viestejä:
    6 500
    Rekisteröitynyt:
    16.10.2016
    Toki vanhaakin kamaa löytyy, mutta nämä olivat alle vuoden vanhoja ohjeita. Ja jotenkin naiivisti kuvittelin että edes w3schools.comissa olisi uusinta tietoa, mutta ei (kliks).

    Mikähän olisi järkevä näitä vastaava paikallisesti asennettava sovellus?
     
  14. Zigh

    Zigh

    Viestejä:
    1 126
    Rekisteröitynyt:
    17.10.2016
    No onhan tuossakin esitelty: "A modern way of creating two columns, is to use CSS Flexbox."

    Tosin se voisi nykyisin olla tuon float esimerkin tilalla ja floatit sitten "tee näin jos haluat tukea vanhaa IE:tä".
     
  15. Paapaa

    Paapaa

    Viestejä:
    2 866
    Rekisteröitynyt:
    17.10.2016
    Kieltämättä hassua, että floateja mainitaan, mutta ehkä noita ei päivitellä kovin usein. Gridit on se modernein tapa, flex semi-tuoretta.
     
  16. Fanboys Suck

    Fanboys Suck

    Viestejä:
    142
    Rekisteröitynyt:
    17.10.2016
    Flexbox sopii jos tarvitse sarakkeita/rivejä yhteen suuntaan, eli joko vaakaan tai pystyyn, gridboxit sopii jos haluat vaakaan ja pystyyn tai vaakaan tai pystyyn. Eli gridit on se mitä kannattaa ehkä käyttää layoutteihin, ja flexboxit sitten grideihin sijoittuviin laatikoihin jne.

    Floateille on paikkansa, mutta sen takia CSS kehittyy että tulee parempia tapoja tehdä asioita.

    Se ettei osaa tehdä jotain tai ei ymmärrä ei tee siitä teknologiasta huonoa.
     
  17. Kautium

    Kautium IOdootti

    Viestejä:
    6 500
    Rekisteröitynyt:
    16.10.2016
    No jaa, huono ja huono. Kyllähän tuo webbisivujen leiskan rakentaminen aika toivottoman kömpelöä säätämistä on CSS:n kanssa. Ongelma on siinä, ettei parempaakaan ole ja syy tähän on varmaankin siinä, että kaikki on rakennettu tuon himmelin varaan, eikä yhteensopivuutta voi yhtäkkiä mennä muuttamaan. Jotenkin sitä voisi kuvitella, että tarjolla olisi edes tehokkaampia/kätevämpiä työkaluja, mutta aika vaatimatonta on meno silläkin puolella.
     
  18. Joonikko

    Joonikko

    Viestejä:
    41
    Rekisteröitynyt:
    17.04.2017
    CSS Gridillä saa tehtyä pohjan helposti ja samalla pystyy erottamaan HTML tiedoston rakenteen sivun visuaalisesta rakenteesta. grid-template-areas ja @media kyselyillä sivusta saa myös responsiivisen. Bootstrap CSS-kirjastolle löytyy myös visuaalinen työkalu ja CSS grid-pohjalle myös.

    Esimerkiksi tälläisen perus asetelman saa tehtyä helposti:

    Koodi:
    ┌─────────────────────────────┐
    │Header                       │
    ├────────┬────────────────────┤
    │Sidebar │Content             │
    │        │                    │
    ├────────┴────────────────────┤
    │Footer                       │
    └─────────────────────────────┘
    CSS:
    Koodi:
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr;
      grid-template-areas: "Header Header Header Header"
                           "Sidebar Content Content Content"
                           "Sidebar Content Content Content"
                           "Footer Footer Footer Footer";
    }
    
    .Header { grid-area: Header; }
    .Content { grid-area: Content; }
    .Sidebar { grid-area: Sidebar; }
    .Footer { grid-area: Footer; }
    HTML:
    Koodi:
    <div class="grid-container">
      <div class="Header"></div>
      <div class="Content"></div>
      <div class="Sidebar"></div>
      <div class="Footer"></div>
    </div>
    Noissa WYSIWYG-editoreissa tulee niin nopeasti rajat vastaan ja niitä on suhteellisen vaikea hyödyntää mihinkään suurempaan web-sovelluksen kokonaisuuteen.
     
  19. Fanboys Suck

    Fanboys Suck

    Viestejä:
    142
    Rekisteröitynyt:
    17.10.2016
    No mikä olisi vaihtoehto mielestäsi? html ei ole tarkoitettu pikselintarkkaan julkaisuun. HTML ei edes sisällä mitään ulkonäköön liittyviä määrittelyjä, vain rakenteeseen liittyviä. Se mitä ilmeisesti kaipaat on flash ja silverlight. Deklaratiiviset sivunkuvauskielet ei myöskään takaa samaa ulkonäköä kaikissa laitteissa. CSS:n ongelma on ollut se ettei kaikki ohjelmat ole tulkinneet sitä samalla tavalla, ja business ym. syistä johtuen ovat tehneet siitä "oman" tulkintansa.
     
  20. nnaku

    nnaku I'm object-oriented! Tukijäsen

    Viestejä:
    729
    Rekisteröitynyt:
    28.11.2016
    Taitaa olla joku tekstieditori ja siihen sopiva plugari. Esim vscode ja liveserver. Ja tämä on siis todellinen WYSIWYG, koska voit avata lopputuoteet millä tahansa selaimella tai laitteella haluat.


    [​IMG]