Vaihda tyyliä

CSS tyylien väliaikainen muokkaaminen selaimessa

Avaa selaimesi "Inspect" työkalu (suomeksi "Tarkastele"). Se löytyy valikosta Työkalut → Selaintyökalut
Avautuneen työkalun vasemmassa yläkulmassa on pieni kuvake jossa on hiiri neliön sisässä. Klikkaa sitä ja sitten jotain elementtiä valitsemallasi sivulla.
Muuta, lisää tai poista sivun tyylejä työkalun CSS näkymästä.
Voit myös poistaa elementtejä valitsemalla ne ensin ja sitten poistaa se delete/backspace näppäimellä.
Voit myös muuttaa tekstisisältöä tuplaklikkaamalla tekstiä HTML lähdekoodinäkymässä.

Huom! Jos päivität/suljet sivun niin tekemästi muutokset katoavat.

Minkä yksittäisen tyylin muutos vaikuttaa sivuun eniten?
Voisitko muuttaa, lisätä tai poistaa tyylejä niin että sivusta tulisi mielestäsi parempi tai käytettävämpi?

⫘

CSS tyylien poisto

Rakenteet esiin

Kaikki maailman sivut ovat oikeastaan simppeleitä HTML dokumentteja jotka usein noudattavat samaa kaavaa. CSS:n avulla sivut voidaan tehdä hyvinkin eri näköisiksi ja toisistaan poikkeaviksi. Pienellä koodipätkällä voimme nähdä miltä eri sivustot näyttävät jos poistamme niistä kaikki tyylit. Vieraile muutamalla sivustolla ja tee seuraava:

Kopioi seuraava pätkä leikepöydälle:

document.querySelectorAll('[style]').forEach(el => el.removeAttribute('style'));
document.querySelectorAll('link[rel="stylesheet"]').forEach(el => el.parentNode.removeChild(el));
document.querySelectorAll('style').forEach(el => el.parentNode.removeChild(el));
Avaa selaimesi "Inspect" työkalu (suomeksi "Tarkastele"). Se löytyy valikosta Työkalut → Selaintyökalut
Klikkaa "Console" välilehteä ja liitä kopioitu koodinpätkä avautuneeseen kenttään.
Paina Enter ja katso kun sivun tyylit katoaa!

Pystyisitkö käyttämään sivua ilman tyylejä?
Mitä elementtejä sivulle saattaa ilmaantua jota tyylien kanssa ei näkynyt?
Onko tyylittömässä sivustossa jotain parempaa (käytettävyys? luettavuus? selkeys? johdonmukaisuus?)?

⫘

Linkkilista

Kurssin aikana surffataan "kauppakeskuksen" ulkopuolisessa maailmassa:

Surffailu alkaa seuraamalla jotain linkkiä linkkilistojen listalta

Kerätään mielenkiintoisia linkkejä / "paikkoja" tekstitiedostoon.

Tekstitiedoston pohjalta omaan kotikansioon tehdään HTML pohjainen "linkkilista" sivu.

HTML tiedostoa tehdessä seurataan https://learn.sadgrl.online/section-i-html/ tutoriaalia

Jokaisesta linkistä tai "paikasta" kirjoitetaan pieni 1-2 lauseen muistiinpano siitä mikä se linkki on ja miksi sen on tallentanut.

Linkkilista toimii henkilökohtaisena osoitekirjana netin maailmaan, mutta myös "resurssipankkina" johon voi tallentaa itselleen hyödyllisiä resursseja.

Yritä surffailla joka päivä ja päivitä linkkilistaa vähintään kerran viikossa.

⫘

Elämä kauppakeskuksen ulkopuolella

⫘

Nettisivu lahjana

Lähestulkoon kaikki nettisivut vaativat sinulta jotain

HYVÄKSY KEKSIT
REKISTERÖIDY
ANNA PUHELNNUMEROSI, KATUOSOITTEESI, KENGÄN KOKOSI
OSTA TÄMÄ TUOTE
POSTAA SELFIE
KLIKKAA TÄSTÄ
OSTA MYÖS TÄMÄ TUOTE!!!
KOMMENTOI
EIKU HYVÄKSY NYT NE KEKSIT
SEURAA MYÖS NÄITÄ TILEJÄ
OLET KIINNOSTUNUT MYÖS TÄSTÄ TUOTTEESTA, OSTA SE.
SEIS! TILAA UUTISKIRJE

pidemmän päälle tämä on hirveän väsyttävää. Voitaisiinko välillä vain olla?

Kurssin aikana tehtävänäsi on suunnitella ja toteuttaa pikkuruinen nettisivu joka ei vaadi yhtään mitään. Päin vastoin, se annetaan lahjana toiselle.

Kurssin loppupuolella kaikki laittavat tekemänsä nettisivu-lahjan osoitteen hattuun. Osoitteet sekoitetaan ja jaetaan satunnaisesti opiskelijoiden kesken. Kaikki siis sekä antavat että saavat yhden (nettisivu)lahjan. Et siis tiedä etukäteen kuka lahjan saa, joten voit keskittyä vain tekemään kivan asian.

Mitä nettisivu lahjana voisi sitten olla? Tässä muutamia ehdotuksia:

…maaliton maalaus
…haamun jälki
…puutarha asioita
…turvallinen sopukka
…hauska e-kortti
…huonekasvisi päiväkirja
…kokoelma lempilaulujasi
…kuvakollaasi lemmikistäsi
…rakkauskirje
…kasa aarrekiviä
…salaisuus
…tarina
…runo
…museo pikku helyjä
…sarjakuva
…tai jotain

Nettisivu jonka uskoisit tuovan hymyn huulille!

Toteutus

Toteuta nettisivu käyttäen:

HTML
CSS
(EI JavaScriptiä!)

Kurssilla on käyty perusasioita läpi, mutta tätä tehtävää tehdessäsi joudut myös itse oma-aloitteisesti hakemaan tietoa ja soveltamaan oppimaasi.

Tee nettisivusta ensin suunnitelma:

älä mieti että millaisen nettisivun tekisit tai millainen nettisivun "kuuluisi" olla
aloita miettimällä minkälaisesta lahjasta itse ilahtuisit tai millaisia lahjoja olet saanut joista olet ilahtunut ja listaa nämä ylös (esim mindmap tai vastaava!).
listaa myös ylös tai tee mindmap asioista jotka ilahduttavat sinua päivittäisessä elämässäsi. Nämä voi olla pieniä asioita, esim. raikas syksyinen tuulahdus, oikein hyvät nokoset tai pussillinen karkkia
Löytyykö listaamistasi asioista jotain mitä haluaisit lähteä viemään eteenpäin?
Kirjoita lyhyt kuvailu/konsepti lahjasta jonka haluaisit antaa. Tämän ei tarvitse olla mikään fyysinen asia vaan se voi olla myös jonkinlainen tunne, sensaatio tai muu "abstrakti" asia. Voit tehdä myös visuaalisen luonnoksen konseptisi tueksi.
Kun olet päättänyt minkälaista lahjaa haluat lähteä luomaan, mieti: miten voisin esittää tämän nettisivuna?
Piirrä raakaluonnos nettisivuista: missä kohdin mikäkin asia on? Missä on tekstiä ja minkä kokoisena, missä on kuvia, mikä seuraa mitäkin?
HUOM! Koska emme käytä kurssilla javascriptiä, sisältö ei voi reagoida käyttäjän (lahjan saajan) toimintaan sivulla (paitsi se mitä HTML:llä ja CSS:llä voi saada aikaan, esim hyperlinkit).

Kun nettisivusta on tehty kunnon suunnitelma, on helpompi lähteä kysymään: miten tämä toteutetaan nettisivuna?

Pari sääntöä ja vinkkiä:

Käytä HTML ja CSS tekniikoita monipuolisesti. Lahja ei voi olla esim. pelkkä yksi kuva, vaan sivun on hyödynnettävä useita eri HTML elementtejä ja CSS tyylejä.
Kaikki resurssit (kuvat, fontit, tekstit, yms) pitää olla lokaaleita, eli users.aalto.fi palvelimella. Älä linkkaa mitään resurssia ulkopuolisilta sivuilta.
Sivun täytyy tuntua itse käsin tehdyltä. Älä kopioi netistä kokonaisia leiskoja vaan pyri tekemään itse. Älä pyri kopioimaan jotain nettitrendiä tai sivua jonka olet nähnyt, vaan tee sivu joka tuntuu kivalta ja hauskalta sinun mielestä. Sivun tulee olla persoonallinen.
Jos et tiedä mitä tekisit seuraavaksi: koristele tai lisää tai viilaa yksityiskohtia. Kokeile eri vaihtoehtoja. Mieti miten voisit tehdä sivusta vielä ihastuttavamman.
Voit itse päättää kuinka paljon panostat sivun "teknisyyteen" ja kuinka paljon "luovuuteen", mutta kaikissa sivuissa pitää olla molempia jonkin verran.

Tehtävän deadline on TIISTAI 11.10.2022 klo 9:15

⫘

Olet internet arkeologi

Etsi sinulle kiinnostavia ilmiöitä vanhoilta geocities sivuilta.

Klikkaile linkkejä seuraavilta sivuilta (huom! osa sisällöstä saattaa olla arveluttavaa):

http://www.oocities.org/#gsc.tab=0

https://geocities.restorativland.org/

Mieti selaillessasi seuraavia kysymyksiä:

Mitä kiinnostavaa löydät?
Minkälaisia tavoitteita näillä sivuilla oli?
Miten sivut eroavat nykyisestä?
Minkälaisia ongelmia ne ratkoi ja minkälaisia ongelmia ne loi?
Minkälaisia visuaalisia keinoja silloin käytettiin, mitä ei käytetä enää nykyään?
Mitä yhtäläisyyksiä löydät vanhoista sivuista jotka ovat vieläkin olemassa?

⫘

Picture sarjakuva

Tee HTML sivu jossa käyttäen yhtä picture elementtiä luot (vähintään) 3 kuvan "sarjakuvan" jonka ruudut vaihtuvat selaimen ikkunan kokoa muuttaessa.
Kuvien yhteenlaskettu koko tulee olla alle 1MB
Luo kotikansioon kansio jonka nimi on sarjakuvan nimi (ota huomioon nimeämissäännöt)
Laita luomasi HTML sivu (jonka nimi on index.html) ja sarjakuvan kuvat luomaasi kansioon
Laita kotikansiosi etusivulle linkki sarjakuvaan.

Voit ottaa mallia seuraavasta. Voit lisätä source elementtejä sen mukaan kuinka monta ruutua sarjakuvassasi on, mutta huomioi että vaihdat max-widthin niin että ruudut näkyvät oikeassa järjestyksessä ikkunan koon mukaan.


<section>
  <picture>
      <source media="(max-width: 800px)" srcset="/img/pieni.jpg" />
      <source media="(max-width: 1024px)" srcset="/img/keskikoko.jpg" />
      <img src="/img/iso.jpg" title="Seinä tulee vastaan" />
  </picture>
</section>

⫘