IT2 Digitaalinen julkaisu

ITSEARVIOINTI

Kopioi kysymykset ja vastaa merkintänä.

1. Mitä ajatuksia tai odotuksia sinulla oli ennen IT2-opintojakson alkua?
2. Mikä oli periodin aikana haastavinta?
3. Mikä oli työläintä?
4. Mistä nautit eniten?
5. Missä tietoteknisessä asiassa olet hyvä?
6. Missä asiassa onnistuit ylittämään itsesi opintojakson aikana?
7. Mitä olisit halunnut lisää IT2-opintojaksolle?
8. Minkä arvosanan antaisit itsellesi digitaalisen julkaisun perusteella? Perustele.
9. Entä koko opintojakson töiden perusteella? Perustele.
10. Minkälaisen digitaalisen julkaisun tekisit seuraavaksi?
  • Palauta merkintä

Sinulla ei ole tarvittavia oikeuksia lähettää mitään.

KURSSIN TAVOITTEET JA SISÄLLÖT

Opintojaksolla tutustutaan digitaalisen julkaisun sisällöntuotantoon, esimerkiksi oman blogin tai portfolion muodossa.

Yleiset tavoitteet

Opintojakson tavoitteena on, että opiskelija

  • syventyy sisällöntuotantoon (teksti ja kuva)
  • osaa rakentaa mielekkään kokonaisuuden jollain julkaisujärjestelmällä (esim. WordPress)
  • tutustuu HTML-kielen perusteisiin
  • osaa käyttää kuvanrakentamisen perusteita suunnittelussaan (esim. väripaletti, valo, sommittelu, kuvakulmat, kehystäminen, negatiivinen tila, taustan/etualan sumentaminen)
  • osaa käyttää kuvankäsittelyn perusteita (esim. rajaus, valotus, kirkkaus, kontrasti, kylläisyys, valkotasapaino, filtterit, kuvan koko, tallennusmuoto)

Keskeiset sisällöt

  • HTML-kielen perusteet
  • julkaisujärjestelmät
  • julkaisupainotteinen sisällönhallinta (tekstin ja kuvan suhde)
  • digitaalisen julkaisun perusrakenteet ja –vaatimukset

Numeroarviointi

Alkukartoitus

1. Oletko aiemmin tehnyt kotisivuja tai pitänyt blogia?
2. Jos olet, niin millä tavalla? Koodilla vai jollain editorilla/alustalla? Millä?
3. Onko wordpress tuttu alusta? Jos on, mitä olet tehnyt sen kanssa?
4. Osaatko HTML-perusteet?
5. Oletko tehnyt kuvankäsittelyä? Millä ohjelmalla?
6. Onko taittaminen tuttua?
7. Toiveita Digitaalinen julkaisu –kurssille?
  • Palauta merkintä

Sinulla ei ole tarvittavia oikeuksia lähettää mitään.

PAKOLLINEN TEHTÄVÄ 1: TUTKI INTERNETIN HISTORIAA


  • Milloin ja miksi internet kehitettiin?Mico, Oiva
Internetti perustettiin 1960-luvulla yhdysvalloissa ARPANET-projektiin. Projektin tavoitteena oli luoda tietoliikenneverkko, joka on ydiniskun kestävä viestintäjärjestelmä armeijalle.
  • Miten se on kehittynyt vuosikymmenten aikana?Veera
Internet on kehittynyt ARPANET-projektista nykyiseksi maailmanlaajuiseksi verkoksi. Ensin verkkoon liitettiin yliopistoja, jonka jälkeen se alkoi yleistyä myös muualla.
  •  Mitkä olivat merkittäviä virstanpylväitä (esim. WWW, sosiaalinen media, mobiiliteknologia)?Topi, Olavi
  • 2000-luku sosiaalinen media (Facebook 2004, Youtube 2005, Twitter 2006, Instagram 2010).
  • 2020-luku tekoäly (ChatGPT)

  • Miten internet on muuttanut ihmisten arkea, viestintää ja oppimista?Malva, Iina
Tiedon hakeminen ja jakaminen on helpompaa. On tuonut viihteen ja sosiaaliset kontaktit lähemmän arkea. Esim. pelit Helpottaa arjen asioita, esim. pankkipalvelut. Antaa paljon mahdollisuuksia opettajan ja oppilaiden väliseen vuorovaikutukseen, esim. diaesitykset ja videot.
  • Milloin ensimmäinen sähköposti lähetettiin ja kuka sen lähetti?  Niilo
Ensimmäinen sähköposti lähetettiin vuonna 1971. Insinööri Ray Tomlinson lähetti viestin "QWERTYUIOP" itselleen ARPANET tietokoneverkossa.

PAKOLLINEN TEHTÄVÄ 3: OLEN VOITTAJA! -KUVANKÄSITTELYÄ

Lataa itsellesi alla oleva tehtävä sekä tehtävässä käytettävät kuvat (punainen_tyyppi ja tuoli). 

Tehtävässä käytetään sekä Photopea-ohjelmaa että Krita-ohjelmaa (vaihtoehtoisesti pelkästään Adoben Photoshopia). Photopea löytyy selaimesta ja Kritan voit ladata koneellesi https://krita.org/en/

Liitteet:

tuoli.png
punainen_tyyppi.png
photopea_krita_tehtävä_ict2.pdf

PAKOLLINEN TEHTÄVÄ 4: MAINOKSEN TAITTO PHOTOPEALLA/PHOTOSHOPILLA

Photopea on ilmainen online kopioversio Photoshopista.

Tee alta löytyvän tehtävänannon mukainen mainos Photopealla tai Photoshopilla. 

Ilmaiskuvapankkeja:
www.unsplash.com
www.pexels.com
www.pixabay.com
Muista kopioida työhösi tekijän nimi ja kuvapankki.



Mainoksen taitto Photopealla IT2

Taitolla tarkoitetaan jonkin julkaisun, esimerkiksi lehden tai nettisivun, elementtien sommittelua ja tyylittelyä haluttuun muotoon. Hyvän taiton tunnusmerkkejä ovat informatiivisuus, puhuttelevuus, mielenkiintoisuus ja helppolukuisuus. (www.graafinen.com)

Mainoksen aihe: Ajankohtainen tapahtuma Raumalla (tuleva)

  1. Avaa Photopea ja tee A4-kokoinen pohja.
  2. Valitse kuvapankeista yksi kuva, jota käytät mainoksen pohjalla. Kannattaa valikoida kuva, jossa on riittävästi tyhjää tilaa tekstille ja se luontevasti liittyy valitsemaasi tapahtumaan Raumalla. Kopioi kuvapankin tarjoama tekijä+kuvapankki -teksti, jotta voit liittää sen mainokseesi ja toimit tekijänoikeuksien mukaisesti.
  3. Muuta A4-kokoinen pohja tarvittaessa vaakaan tai pystyyn valitsemasi kuvan perusteella ja liitä kuva pohjaan. Liitä myös tekijä+kuvapankki -teksti.
  4. Lisää mukaan kaikki tarvittava tieto tapahtumasta. Käytä kuvan värejä jossain kohtaa tekstejä. Varmista, ettei tekstiä ole liikaa ja se on luettavaa (tausta ei liian epätasainen ja haastava).
  5. Käytä jotain perusmuotoa osana taittoa (esim. suorakulmio, ympyrä, paksu viiva) työkalupakin suorakulmio-työkalun alta. Muodon väri voi olla kontrastinen suhteessa kuvaan/taittoon tai voit hyödyntää valitsemasi kuvan värejä. Voit käyttää muotoa tekstin alla tai erillään jakamaan kuvapintaa.
  6. Voit lisätä muita taitollisia elementtejä (esim. lisää muotoja, sumennusta, kehyksiä).
  7. Tallenna PNG-muodossa (Tiedosto - Vie muodossa - PNG)

PAKOLLINEN TEHTÄVÄ 5: Adoben Firefly ja tekoälykuvat

Käytä Adoben Firefly-tekoällyohjelmaa sekä tarvittaessa Copilotia (tehtävä 4 - muista kuitenkin tarkistaa faktat!).

TEHTÄVÄ 1: PROMPTAA MEIDÄN LUOKKAHUONE​
TEHTÄVÄ 2: ​PROMPTAA ITSESI​
TEHTÄVÄ 3: PROMPTAA TAIDETEOS, JONKA HALUAISIT RIPUSTAA SEINÄLLESI
TEHTÄVÄ 4: PROMPTAA 4-5 KUVAN SARJA, JOKA KUVAA VALITSEMAASI TEKOÄLYN HAASTETTA ​(liitä mukaan prompti/kehote, jolla sait kuvasarjan aikaan)

PAKOLLINEN TEHTÄVÄ 6: VÄRIT

Tee yhden sivun selkeä esitys annetuista käsitteistä. Tehtävässä EI saa käyttää tekoälyä.

Käsitteet:

  1. CMYK-värit
  2. RGB-värit
  3. Heksadesimaalivärit

Liitä mukaan kuvia ja tekstiä (+lähteet). Tee esityksestä sellainen, että aiheesta tietämätön ymmärtää helposti sisällön. Voit itse valita millä ohjelmalla teet. Tallenna lopullinen esitys PDF-muotoon.

TEHTÄVÄ 7: VÄRITÄ KUVA

Väritä alla oleva kuva seuraavin värein:

C31 M48 Y71 K27
C33 M13 Y18 K1
C18 M0 Y35 K0
#f0e5bd
#f4450f
#f7eb88
#8ef3ef
#9cacfe
R167 G143 B111
R46 G167 B34
R32 G32 B228
R213 G23 B23

HTML-komentoja

Kokeile HTML-komentoja täällä.

Luo tekstimassaa käyttämällä puppulausegeneraattoria.

Käytä ainakin näitä komentoja:

  • Lihavointia <b> (nykyisin yleensä käytään <strong> </strong> -komentoa)
  • Kappalejakoa <p>
  • Yläotsikon luontia <h1>
  • Alaotsikon luontia <h2>
  • Numeroitu lista <ol> ja <li> yksittäinen rivi luettelossa


https://www.w3schools.com/tags/tag_comment.asp
http://jyti.net/dat16/j1_perus_komennot.html

PAKOLLINEN TEHTÄVÄ 8: SELITÄ HTML-KOMENNOT

Lataa itsellesi tehtävä (selita_html.docx -dokumentti).

ESIMERKKI:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Tämä dokumentti noudattaa selaimessa sisäisesti määriteltyä html 4.01 kielioppia.

<HTML>

Tämä tagi aloittaa HTML-dokumentin.

<HEAD>

Tähän osaan sijoitetaan mm. dokumentin otsikko-osa ja kielioppimääritykset.

<TITLE></TITLE>

Tämä on dokumentin otsikko, joka kirjoitetaan Title-tagien väliin. Tähän dokumenttiin ei ole määritelty otsikkoa.

</HEAD>

Tämä päättää otsikko-osan.

<BODY TEXT="black" BGCOLOR="white" LINK="blue" VLINK="yellow" ALINK="red">

Tämä on dokumentin runko, joka näkyy käyttäjälle. Siihen on määritetty tekstin väriksi musta, taustaväriksi valkoinen, hyperlinkin väriksi sininen, vieraillun hyperlinkin väriksi keltainen sekä aktiivisen hyperlinkin väriksi punainen.

<H1>TURREN TURINAT</H1>

Tämä on H1-tason otsikko, pääotsikko.

<P><IMG SRC="lemmikkini.png" HEIGHT=217 WIDTH=190 ALIGN=BOTTOM></P>

Tämä on 217 x 190 kokoinen lemmikkini.png - kuva, joka on keskitetty alas. Kuva on sijoitettu omaan kappaleeseen.

</BODY>

Tämä päättää dokumentin näkyvän osan.

</HTML>

Tämä on loputuskomento, joka päättää HTML-dokumentin.

Liitteet:

selita_html.docx

Palauta PDF-muodossa

  • Palauta kuva tai muu tiedosto

Sinulla ei ole tarvittavia oikeuksia lähettää mitään.

PAKOLLINEN TEHTÄVÄ 9: HTML-PIPARKAKUT

Opiskelupuolella Gedit:
  • Valitse Tiedosto → Tallenna nimellä
  • Anna tiedostolle nimi,  reseptisivu.html
  • Varmista, että tiedostopääte on .html
  • Valitse tallennuspaikaksi esim.  Työpöytä
  • Siirry tiedoston tallennuspaikkaan
  • Kaksoisklikkaa tiedostoa → avautuu selaimessa (esim. Firefox, Chrome, Safari)

Opiskelupuolella LibreOffice Writer:
  • Tiedosto - lähetä - luo HTML-asiakirja - tallenna
  • Näytä - HTML-lähdekoodi
___________________________________________________________________________


Vapaa-ajan tilassa Muistio/notepad: 
  • Kirjoita HTML-koodi → tallenna tiedostona reseptisivu.html
  • Huom: Muista valita "Kaikki tiedostot" tallennusikkunassa ja lisätä .html-pääte
___________________________________________________________________________

ÄÄKKÖSET NÄKYVIIN: <meta charset="utf-8">

___________________________________________________________________________

MAC-koneissa Texturi/TextEdit
Format > Make Plain Text > .html

Liitteet:

Tehtävän alkuosa
Tehtävän loppuosa

Palauta HTML-muodossa

  • Palauta kuva tai muu tiedosto

Sinulla ei ole tarvittavia oikeuksia lähettää mitään.

PAKOLLINEN TEHTÄVÄ 10: OMA JULKAISU

Luo tili wordpress.comiin. Tee kurssin lopputyönä julkaisu, joka voi olla esimerkiksi blogi, kuvaportfolio, jonkin asian (harrastuksen) esittelysivusto. Voit käyttää valmiita wordressin teemoja hyödyksi.

Minimivaatimukset julkaisulle:
  • vähintään 3 sivua (pages)
  • jokaisella sivulla AIHEESEEN LIITTYVIÄ kuvia (rakenteessa ja sisällössä) ja tekstiä 
  • sekä sisäisiä että ulkoisia linkkejä
  • vähintään 8 postausta (tekstiä ja kuvia) blogiin/sama määrä sisältöä muihin julkaisumuotoihin
Muista käsitellä ottamasi digikuvat ennen julkaisuun liittämistä ja liittää tekoälykuviin viittaus "Firefly".

________________________________________________________________________________________

Arvioinnissa kiinnitetään huomiota kuviin ja teksteihin sekä siihen, että kuvat on itse otettuja/muokattuja/tekoälyllä tehtyjä viittauksineen ja teksti itse kirjoitettua. Näiden pitää muodostaa hyvä KOKONAISUUS.
________________________________________________________________________________________

Palauta sivusto LINKKINÄ palautuskansioon, muodossa https://multikashmircraftsrinagar.wordpress.com/

Varmista, että olet julkaissut sivustosi (launch)! Muuten sivusto ei aukea enkä pääse arvioimaan sitä. Kirjaudu wordpressiin, ota vasemmasta valikosta Asetukset - yleinen ja sieltä löydät kohdan launch (tai privacyn kohdalta julkinen). Klikatkaa ILMAISEN kohdista, jos eteen tulee jotain premium-paketteja tai muita maksullisia kohtia. Kokeile omaa osoitettasi vaikka puhelimen selaimella nähdäksesi, että se varmasti toimii.

________________________________________________________________________________________
Ohjeet WordPressiin:


Vaihe 1: Luo tili

  1. Mene osoitteeseen https://wordpress.com
  2. Klikkaa "Get started" tai "Aloita"
  3. Luo käyttäjätunnus sähköpostilla ja salasanalla

Vaihe 2: Luo uusi sivusto

  1. Valitse "Create a new site"
  2. Anna sivustolle nimi (esim. "Emilian taideblogi")
  3. Valitse ilmainen suunnitelma (Free Plan)


Ulkoasun muokkaus

Teeman valinta
  • Valitse ulkoasuteema (Theme), joka sopii sivuston tyyliin
  • Voit myöhemmin vaihtaa teemaa
Sivujen ja valikon muokkaus
  • Lisää sivuja: esim. "Etusivu", "Tietoa minusta", "Galleria"
  • Muokkaa valikkoa: valitse, mitkä sivut näkyvät ylävalikossa

Sisällön lisääminen

Blogikirjoitus tai sivu
  • Klikkaa "Add new post" tai "Add new page"
  • Kirjoita otsikko ja teksti
  • Lisää kuvia: voit ladata omia tai käyttää ilmaisia kuvapankkeja
  • Lisää videoita esim. YouTubesta linkin avulla

Julkaiseminen

  • Kun sisältö on valmis, paina "Publish"
  • Sivusi näkyy nyt verkossa!

Tietosuoja ja asetukset

  • Voit tehdä sivustosta julkisen, yksityisen tai vain linkin kautta näkyvän
  • Muista, että julkinen sivu näkyy kaikille internetissä