Drupal - Monikanavajulkaisu

 

Drupal

 

Drupal installointi

 

  1. xampp portable installointi
    1. http://portableapps.com/apps/development/xampp
    2. > XAMPP Portable Lite 1.8.1 > ZIP
  2. pura ZIP erilliselle levyasemalle tai tikulle: (vaatii väh 300 MB tilaa)
  3. siirrä kansion sisältö niin, että xampp on suoraan levyaseman juurihakemistossa
  4. kansiossa D:\xampp\
    1. aja setup_xampp.bat
    2. aja apache_start.bat
    3. aja mysql_start.bat
  5. tarkista näkyykö selaimessa http://localhost

Drupal installointi paikalliselle kehityspalvelimelle:

  1. http://drupal.org/download
  2. kopioi purettu drupal kansio kansioon:
    D:\xampp\htdocs
  3. drupal kansion nimen voi muuttaa: esim: D:\xampp\htdocs\omanimi_portfolio\
  4. phpmyadminissa luo uusi tietokanta ja käyttäjä phpmyadminissa
    1. http://localhost/phpmyadmin/ > Databases
    2. esim nimellä: omanimi_portfolio (ei ääkkösiä tai välilyöntejä)
    3. luo käyttäjätunnus tietokannalle:
    4. valitaan tietokanta > priviledges > add user
    5. tietokantanimi: omanimi_portfolio
      käyttäjänimi esim: portfolio_user
      host: localhost
      salasala: *********
    6. valitaan Grant all privileges on database "jukan_portfolio" valittu
    7. add user
  5. installoidaan drupal:
    selaimessa:
    1. localhost/omanimi_portfolio/install.php

Drupal sivuston hallinnan perusteet:

  • hallintapaneeli: dashboard, content, structure jne.
  • modulit
    • esim. backup and migrate
  • teemat
    • Bartik, Garland, Marinelli, jne.
  • päivitys

 

Iltapäivän tehtävät 26.2.

 


1. katso läpi netistä verkkojulkaisuja:
miten käyttöliittymä, navigaatio, ulkoasu jne toteutettu
tekniset huomiot: onko responsive?, html5?, cms?
2. drupal: kokeile erilaisia teemoja omalla harjoitussivulla, ja teemojen asetusten säätöjä

 

Drupal sisällön hallinta 27.2.

  • modulien käyttöönotto
  • node
  • sisällön lisääminen

 


Paikallisen kehityskopion teko palvelimen drupal installaatiosta:

1. varmuuskopioi tietokanta: backup and migrate modulilla
2. Lataa drupal core 7.x ja pura xampin htdocsiin
ja vaihda kansion nimi:
esim: I:\xampp\htdocs\maecenas


3. a) kopioi: Y:\Käpylä\AV-Viestinta_2\11D\MONIKANAVAJULKAISU

\WEB_JULKAISU\sites (3).zip


b) pura zip
c) poista coren mukana tullut sites kansio
d) kopioi purettu sites kansio poistetun tilalle

4. luo paikalliseen palvelimeen tietokanta ja käyttäjä (phpmyadmin)
tietokantanimi, käyttäjänimi ja salasana
ks. tiedot: sites\default\settings.php
5. import varmuuskopioitu tietokanta (phpmyadminilla)
6. kokeile installaatiota: selaimessa osoitteessa:
esim.
localhost/av-stadi/maecenas (tai jokin muu joka vastaa htdocsin

sisällä olevaa kansiorakennetta)

 

Moduleja:

Teknistä

Drupal coren päivitys: http://drupal.org/taxonomy/term/34882

 

Sisältötyypin luominen

Luo uusi sisältötyyppi esim. "juttu"
Omaan paikalliseen xampp palvelimeen

structure > content types > add content type

uusia field elementtejä jostain näistä sisältö elementeistä:

ingressi tekstin lihavointi
tietoboxi / vinkit boxi
tekijät teksti
kuvat

 

xampp palvelimen käynnistäminen ja paikalliseen drupaliin kirjautuminen

  1. avaa xampp kansio
    käynnistä apache ja mysql
  2. avaa sivusto osoitteesta:
  3. localhost/kansionimijulkaisuun/
  4. ks. htdocs kansiosta kansiorakenne
  5. kirjaudu sisään

 

Teeman toteutus

Kaksi menetelmää:

  1. luodaan tyhjästä uusi teema
  2. tehdään "aliteema" (sub theme) jo olemassa olevasta teemasta
  3.  

Teemojen koodauksessa : clear caches!

  • configuration > performance > clear caches
  • tai: aktivoi Administration menu(jos aktioit poista Toolbar käytöstä), josta löytyy pikavalikko "flush all caches" toiminto

Aliteema:

  1. Luo uusi kansio sites\all\themes kansioon uuden teeman nimellä esim: maeteema
  2. luo .info tiedosto esim maeteema.info
  3. täytä .info tiedostoon seuraavat tiedot
    1. name , description ,
      base theme , core = 7.x
    2. esim:
      name = Mae teema
      description = Maecenas teema joka on Bartik teeman aliteema
      base theme = bartik
      core = 7.x
  4. testaa teeman toimivuus:
    1. Appearance > enable ja set default
    2. näkymän pitäisi olla identtinen base teeman kanssa
    3. jos näkyy notice ilmoituksia kopioi
  5. aliteema journal crunch teemasta:
    1. kopioi journal crunch kansio levyltä Y:\Käpylä\AV-Viestinta_2\11D\MONIKANAVAJULKAISU\WEB_JULKAISU sites/all/themes kansioon
    2. tee aliteema journal crunch teemasta (toista edelliset vaiheet 1-4):
    3. .info tiedoston sisältö:
      • name = journalcrunch subtesti
        description = journalcrunch aliteema testi
        base theme = journalcrunch
        core = 7.x

  6. aliteeman css tiedosto:
    1. luo css kansio
    2. luo css tiedosto esim: maeteema.css
    3. lisää info tiedostoon: stylesheets[all][] = css/maeteema.css
    4. kokeile uusia tyylisääntöjä: esim:
      p {
      color:#202;
      }

    5. div.field-item p {
      font-size:130%;
      line-height:1.2em;
      }
      #content .nodeInner h2 a {
      color: #c3c;
      }
      h1.title {
      color:#00CC99;
      }

 

Aliteema bartik:ista:

ulkoasu säätöjä ja sivun rakennetta:

  1. aliteema bartik teemasta ks. edellinen 1-4
  2. kopioi aliteeman info tiedostoon region ilmoitukset
  3. logo paikalleen
  4. luo css kansio aliteeman kansioon
  5. tehdään colors.css override:
    1. kopioi coren bartik teemasta colors.css
    2. lisää aliteeman info tiedostoon seuraava rivi stylesheets[all][] = css/colors.css
  6. muokataan aliteeman colors.css värejä: esim gradientit, fontit, taustavärit yms.
  7. imagereplacement koodi header tekstille:
    • #header #site-name a {
      font-size:200%;
      display: none;
      margin: 0 0 0 -2000px; }

  8. taustakuva side-bariin
  9. kokeile miltä näyttää logout tilassa?
  10. kokeile siirtää login, search johonkin toiseen regioniin
  11.  

Ulkoasun viimeistelyä aliteeman työtämistä 08.04

 

  1. Aamun teema Snapshot maecenas3 kansio: Y:\Käpylä\AV-Viestinta_2\11D\MONIKANAVAJULKAISU\WEB_JULKAISU\teema0804
  2. google font:in käyttöön otto:
    1. kopioidaan coren modules/system/ kansiosta html.tpl.php template tiedosto teeman kansioon
    2. katso google fontin quick use linkki: link tagi ja tyylisääntö:
    3. lisätään html.tpl.php tiedoston head osioon google font:in link tagi: esim Roboto riville 54:
      • <?php print $scripts; ?>
        <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
        </head>
    4. lisätään font-family sääntö css tiedostoon:
      • font-family: 'Roboto Condensed', sans-serif;
    5. maecenas teeman css tiedostossa maeteema.css esim näin:
      • #main-menu-links li {
        text-transform:uppercase;
        font-family: 'Roboto Condensed', sans-serif;
        font-size:150%;
        }
  3. perusteeman tyylisääntöjen poisto/override:
      1. kopioi bartik style.css aliteeman css kansioon
      2. ilmoita style.css tiedoston käyttö aliteeman .info tiedostossa
      3. muokkaa aliteeman style.css tiedostoa
      4. esim: menuvalikon taustavärien ja efektien poisto poiskommentointi tai deletointi:
        1. #main-menu-links a {
          color: #333;
          /* background: #ccc;
          background: rgba(255, 255, 255, 0.7);*/
      5. reunan pyörityksen poisto:
        1. text-shadow: 0 1px #eee;
          /* -khtml-border-radius-topleft: 8px;
          -khtml-border-radius-topright: 8px;
          -moz-border-radius-topleft: 8px;
          -moz-border-radius-topright: 8px;
          -webkit-border-top-left-radius: 8px;
          -webkit-border-top-right-radius: 8px;
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;*/
      6. Muita muutoksia:
        • #main-menu-links a:hover,
          #main-menu-links a:focus {
          /* background: #f6f6f2;
          background: rgba(255, 255, 255, 0.95);*/

          }
          .featured #main-menu-links li a:active,
          .featured #main-menu-links li a.active {
          /* background: #f0f0f0;
          background: rgba(240, 240, 240, 1.0);*/

          }
      7. colors.css overrides: muokkaa riviltä 12 eteenpäin:
        • #page,
          #main-wrapper {
          background: #efbed2;
          }
          #main-menu-links li a.active,
          #main-menu-links li.active-trail a {
          /* background: #efbed2;*/
          }

  4. fontin lisäys jostain muusta fonttipalvelusta:
      1. lisää fonttipalvelun ohjeiden mukainen link tägi html.tpl.php tiedoston head tagin sisälle
      2. tarkista tarkka teeman css kansion url etusivun lähdekoodista
  5. Lightbox moduli
  6. hienosäätöä:
    1. poistetaan Sisältötyypistä "Display author and date information" ruksi
      • Structure > Content Types > edit > Display Settings