Verkkosivuston tekeminen 15 osp

Näyttötehtävät

  • Tehtävä 1. Tee portfoliosivu, missä on vähintään kolme sivua (oma esittely, projects ja näytöt (schoolwork)
  • Tehtävä 2. Tee sivu omalle harjoitusyritykselle tai
  • Tehtävä 3. Tee pieni sivusto asiakkaalle 

Esittele näytössä kaksi (2) sivustoa. Lähetä linkki opettajalle, kun valmista. Näytön arvioijia on kaksi (2): joko työelämän edustaja tai yrittäjyyskurssin järjestäjä.

Harjoitusyrityksen perustaminen

Aloitus

Käytä Chrome -selainta

  • Lisää tämä ohjesivu selaimen suosikkeihin (Bookmarks)
  • Valitse hakukentän oikeasta laidasta tähti
  • Valitse pudotusvalikosta kansio -> kirjanmerkkipalkki (Bookmarks bar)
  • Valitse vasemmalta selaimen yläosasta Näytä ja Näytä kirjanmerkkipalkki aina

Luo uusi gmail -tunnus oman harjoitusyrityksen nimellä

  • Luo uusi gmail -tunnus  asiakkaan tai harjoitusyrityksen nimellä kirjautumista varten
  • Jos teet sivut asiakkaalle, luo gmail asiakkaan nimellä (tallenna ja jaa asiakkaalle tunnukset sivujen päivittämistä varten)
  • Omaa portfoliota varten käytä omaa gmail-tunnusta, jotta se toimii valmistumisen jälkeen
  • WordPress ei toimi koulun edu.hel.fi -tunnuksilla (käyttö kielletty kasvatuksen ja koulutuksen toimialalla)

Lataa WordPress Website builder app puhelimeen

  • Lataa helppokäyttöinen WordPress app puhelimeen
  • Sillä voi tehdä postauksia, lisätä kuvia ja päivittää sivuja

Lataa Teams -app puhelimeen etäopetusta varten 

Kirjaudu tietokoneen Chrome -selaimeen koulun edu.hel.fi -tunnuksilla

  • Avaa O365 (Outlook -sähköposti)
  • Outlookin (sähköpostin) vasemman yläkulman ”vohvelista” löytyy Teams
  • Saat linkin Teamsiin Wilmaviestinä noin 10 min ennen opetuksen alkua
  • Asenna Teams -mobiiliapp ja kirjaudu koulun tunnuksilla (etäopetuksessa voi olla kätevä, että ohjeet tulevat eri ”monitorista”)
  • Asenna Teams -mobiiliapp ja kirjaudu koulun tunnuksilla (etäopetuksessa voi olla kätevä, että ohjeet tulevat eri ”monitorista”)

WordPress.com

  • Jos olet koululla: avaa uusi ikkuna selaimeen (selaimesta ylhäältä + ja raahaa ikkuna työpöydälle, kirjaudu ulos koulun tililtä)
  • Kirjaudu uuteen selaimeen omilla  gmail -tunnuksilla: WordPress.com
  • Kirjautuminen menee sekaisin, jos työskentelet samassa ikkunassa kirjautuneena sekä koulun, että omilla tunnuksilla
  • Katso kuvalliset ohjeet aloitukseen
  • Get started

Tehtävä 1. Luo kolme (3) domainia ja sivustoa (Choose your domains). Valitse niille teemat eli sivuston ulkonäkö. 

Sivustot kannattaa ensin luona näillä kolmella toimivalla teemalla (appearance -> themes) ja vaihtaa myöhemmin.

1. Portfolio (etunimisukunimi.wordpress.com), teema Rainfall. Katso malliportfolio

2. Harjoitusyritys (harjoitusyritys.wordpress.com), teema Archeo.  Katso malliportfolio

3. Asiakasyritys (asiakasyritys.wordpress.com) teema. Katso ravintolan malliportfolio

Tehtävä 2. Vaihda teema eli sivuston ulkoasu

  • Sivuston luomisen alussa tarjotaan vain 3-4 ilmaista teemaa, todellisuudessa niitä on kymmeniä
  • Vasemmalta mustasta työkaluvalikosta valitse Ulkoasu (Appearance) –> Themes
  • Yläpudotusvalikosta View: Free 
  • Valitse teema ja Customize
  • Pääset takaisin domaineihin vasemmalta ylävalikosta W-ikonin alta (pudotusvalikko Sites)
  • Valitse hyvännäköinen ulkoasu kaikille kolmelle domainille

Tehtävä 3. Sivu vai postaus? 

  • Jos teeman sivuja ei voi muokata, niin sivu (Page)  on todennäköisesti postaus (Post)
  • Valitse vasemmalta mustasta työkaluvalikosta Posts ja julkaisut tulevat näkyviin muokattaviksi
  • Voit poistaa postaukset ja tehdä uuden valikon luomalla uusia sivua (pages) ei posts

Tehtävä 4. Portfolion sisältö (katso portfoliomalli Rainfall) 

Aloita tekemällä itsellesi yksinkertainen kahden (2) sivun portfoliosivusto. Mallissa on käytetty teemaa Rainfall.

  • Portfolion domain: etunimisukunimi.wordpress.com
  • Etusivu (Home): Nimi, projekteja, yhteystiedot alapalkkiin
  • About me (valokuva, lyhyt esittelyteksit Chat-GBT:llä, koulutuksen nimi, somelinkit, osaamiesi softien nimet, yhteystiedot)
  • Asiakastyöt -posts (näyttötyöt, projektit, tuotannot, päiväkirjat, showreel). Postaa tähän osioon näyttöjä ja työnhakua varten tekemäsi koulutyöt.

Tehtävä 5. Päivätä sivustoa puhelimen WordPress editorilla

  • Nosta kuvien laatua
  • Poista mallipohjasta postausten tekstejä, jotka näkyvät etusivulla

Referenssit. Harjoitusyritys ja yritys.

Design -editori ja ohjauspaneeli (Dashboard) 

  • Sivua voi muokata kahdella editorila:
  • Design -editorilla saat poistettua elementtejä, jotka eivät näy ohjauspaneelissa. Desing-editori on mustassa yläpalkissa
  • Ohjauspaneeli (Dashboard) luo sivuista valikot ja kun avaat sivun, niin pääset muokkaamaan sivun sisältöä Block -editorilla

Pääset editoreihin aina vasemmasta yläkulmasta valitsemalla Home ja ohjauspaneeli (Dashboard)

Ensimmäisellä kerralla (kun luot sivustoa):

  • Unlock Theme eli valitse teema. Jos tarjoaa maksullista ”Decide later”.
  • Sivusto luodaan (älä klikkaa mihinkään)
  • Tallenna (save) ja julkaise (raketti yläpalkissa)
  • Palaa perusnäkymään (musta sivu, työkaluvalikko vasemmalla) valitsemalla vasemmasta yläkulmasta sivuston ikoni
mobiiliversion testaus ikoni ylhäällä oikealla
perusnäkymä, valitse Pages eli Sivut

Tallentaminen ja julkaisu (Launch Site= raketti)

  • Launch Site
  • Skip Purchase (scrollaa aivan sivun alalaitaan, mistä teksti löytyy) 
  • Valitse 0e plan 
  • View site
  • Kopioi URL:n alkuosa ja lähetä se Wilma-ketjuun
  • https://etunimisukunimi.wordpress.com

Sivuston perusasetukset (General Settings) 

  • Sivuston nimi (Give your site a name)
  • Tallenna asetukset (Save changes)
  • Valitse vasemmasta yläkulmasta My Home (mökki)
  • (Launch site, jos et tehnyt sitä aikaisemmin)
Give your site a name
Asiakkaan nimi, slogan ja logo
Sivuston kieleksi suomi

Sivujen eli valikon luominen (Pages)

Design -työkalu kannattaa vaihtaa sivutyökaluun (vasen yläkulma). Jos sivusto menee sekaisin tai on vaikea käyttää, kopioi tekstit ja tee alusta. Domain säilyy samana.

  • Valitse vasemmalta valikosta Sivut (Pages)
  • Vasemmalta valikosta Pages -> Add page
  • Kun saat yhden toimivan ja hyvännäköisen sivupohjan tehtyä, kannattaa kopioida (dublicate) ja muokata siitä uusia sivuja
  • Sivuista muodostuu valikko

Sivuston valikoiden nimet, järjestys ja loppuosan URL

  • Sivun nimi on valikon nimi
  • Valikoiden järjestys tehdään numeroimalla sivut: avaa sivu, oikealla yläkulmassa kolme pistettä (…) ja järjestys
  • Sivun osoite (URL) muokataan avaamalla sivu ja nimeämällä se vasemmalta avautuvasta valikosta (Slug)

Portfolio: Ensimmäinen sivu. Etunimi Sukunimi -sivu ja sivun url (Slug) 

  •  Avaa sivu ja oikealta sivuvalikosta valitse sivu ja Slug. Klikkaa sinistä otsikkoa ja kirjoita siihen etunimisukunimi
  • Oikealta yläkulmasta Tallenna (save) 
  • Lisää sivulle oma valokuva, lyhyt esittelyteksti ja osaamisperusteinen ansioluettelo (projektit eli mitä olet tehnyt)
  • Yhteystiedot (Contact) alapalkissa
  • Someikonit kanaville (LinkedIn ja somekanavat)
  • About Me -sivu  tai etunimisukunimi voi olla valikossa ensimmäisenä tai viimeisenä

Portfolio: Projects

  • Avaa sivu ja oikealta valikosta Slug ja vaihda URL sanaksi projects
  • Showreel (upota YouTubesta videokooste videoista), Kirjoita krediitit sekä YouTube -kanavalle, että showreelin alle.
  • Valokuvakooste esim. Behind-the-Scenes kuvia tuotannosta
  • Omat asiakastuotannot, kuvia ja lyhyt kuvaus

Tavoitteena on koostaa portfolioon asiakastöiden ja omien projektien parhaat versiot.

Portfolio: Tuotantopäiväkirja (muut opinnot)

  • Tee opintojen näyttöjä varten oma sivu, missä kuvailet prosessia
  • esim. jos olit Aallon tuotannossa mukana, tee päiväkirjatyyppinen kuvaus mitä teit tuotannossa, lisää valokuvia ja dokumentteja (salaa tarvittaessa eli linkitä kansioon)
  • Lähetä sivu arvioijalle ennen näyttöä

Editorit ja lohkot (block) 

Sivuston voi koostaa erilaisista lohkoista (block), joiden sisällä on toimintoja

  • Vasemmasta yläkulmasta + (sininen) 
  • Saat lisäelementtejä sivustolle (media, ikonit, teemoja)