Videokokoussovelluksen käyttöliittymä
<![CDATA[
html_css_basics
|
├── demos
│ ├── ...
│ └── d15
│ ├── index.html
│ ├── style.css
│ ├── video.mp4
│ └── img
│ ├── person1.jpg
│ ├── person2.jpg
│ ├── person3.jpg
│ └── person4.jpg
|
]]>
- Toteuta käyttöliittymä videopalaverisovellukselle
- Tee style.css ja index.html, lisää sivupohja ja linkitä tyylitiedosto headiin
- Lataa mp4 muotoinen video samaan kansioon esim. Pixabaystä
- Mallin video gorilla_128698.mp4
- Tee img kansio, johon lataat kokoukseen osallistujien naamakuvia
esim. osoitteesta thispersondoesnotexist.com
HTML
body
- Lisää bodyn sisälle navigaatio nav ja sen alle pääsisältöalue main
nav
- Tee lista linkkejä käyttäen elementtejä (ul li a)
- Logon/sovelluksen nimen voi lisätä naviin ennen ul-listaa span tagissa
- Viimeinen listaelementti li sisältää napin (button)
main > screen
- Lisää elementti videolle (div jolla on id screen)
- Lisää sen sisälle 'video'-tagi
- Video tagiin voi antaa lisäparametrejä kuten autoplay ja muted
- Videotagin sisällä on 'source'-tagi eli varsinainen video-objekti
- src-parametriksi annetaan videotiedoston nimi tai polku jos video ei ole samassa kansiossa html-tiedoston kanssa
main > people
- Lisää divi jolla on id people. Diviin tulee ihmisten kuvat ja nimet.
- Lisää sen sisälle useita figure-tageja joissa on kuva (img) ja sen alla kuvateksti (figcaption)
main > chat
- Tee chatti-ruutu eli div jolla on id chat
main > chat > messages
- Lisää chatin sisälle div class messages, jossa viestit näkyvät
- Lisää sen sisälle divejä joissa on viesti (keksi keskustelu tai käytä Lorem ipsum)
- Lisää ennen viestiä lähettäjän nimi span-tagin sisällä
- Lisää viestin jälkeen lähetysajankohta span-tagin sisällä
- Siten viestin kirjoittaja ja ajankohta voidaan tyylitellä erikseen CSS:llä
main > chat > addmessage
- Viestiketjun jälkeen tulee viestinkirjoitusruutu div class addmessage
- Lisää sen sisälle syötekenttä (messagebox) ja anna sille id messagebox
- Lisää myös Lähetä-nappi (input type button) ja sille id send
CSS
body
- nolla marginaalit ja aseta tumma taustaväri
- aseta valitsemasi fontti ja tekstin väri
*
- Muuta kaikkien elementtien koon laskentatapa järkeväksi
- *{ box-sizing: border-box;}
nav
- aseta tumma taustaväri
- tee navista flex elementti
- keskitä flex sisältö pystysuunnassa
- lisää justify-content: space-between; jolloin logo (span) ja lista (ul) asettuvat vastakkaisiin päätyihin
- aseta navin korkeus esim 50px
nav span
- muuta logotekstin väri ja lisää padding
nav ul
- tee listasta flex elementti ja poista listapallukat
nav ul li, nav span
- lisää padding ja tee listaelementeistä flex elementtejä
- keskitä flex elementit pystysuunnassa
nav ul li a…
- vaihda linkkien ja myös vierailtujen linkkien väri
- muotoile myös ylävalikon Poistu-nappi
main
- tee mainista flex elementti
- aseta mainin korkeus siten että se täyttää koko ruudun
- käytä calc laskutoimitusta vähentääksesi korkeudesta navigaation korkeuden
#screen
- piilota ylivuoto
- aseta flex:3; jolloin video saa 3/5 osaa ruudun leveydestä
- aseta maksimikorkeus 100%
#screen video
- aseta leveys ja korkeus 100%
- aseta myös object-fit: cover; jolloin ylimenevä video rajautuu pois
#people
- tee ihmisten kuvakkeista flex elementtejä
- tasaa pystysuunnassa flex elementit dvin alkuun (align-content)
- keskitä elementit vaakasuunnassa
- aseta flex: 1; jolloin elementti vie 1/5 osaa ruudun leveydestä
- aseta flex-wrap: wrap; jolloin kuvat voivat mennä allekkain
#people figure
- rajoita kuvia max leveys ja korkeus
- keskitä teksti
#people img
- pyöristä avatarien kulmat
- tee kuvasta 100% leveä jolloin se täyttää parent elementin
.active_speaker
- tee äänessä olevan puhujan luokka, jonka lisäät jollekulle keskustelussa
- aseta ääriviiva ja/tai heittovarjo
#chat
- aseta flex: 1; jolloin elementti vie 1/5 osan ruudun leveydestä
- tee keskusteluruudusta flex elementti
- vaihda flex suunta colum
- keskitä flex elementit (align-items)
- laita flex elementit tasaisin välimatkoin justify-content: space-between;
.messages
- overflow-y: auto; sallii scrollauksen pystysuunnassa
- aseta leveys 100%
- aseta korkeus (käytä calc) 100vh - navin korkeus - viestin kirjoitusruudun korkeus
.messages div
- muotoile viestiruutujen tyylejä
- aseta marginaalit
- aseta taustaväri
- lisää kulmanpyöristystä
- lisää padding
.messages span:nth-child(1)
- muokkaa viestin kirjoittajan nimilaatikon tyylejä
- tee elementistä block (jolloin se vie koko rivin tilaa vaikka normaalisti span on inline-elementti)
- vaihda tekstin väri
- lisää ala-padding
.messages span:nth-child(1)
- tee elementistä block
- vaihda tekstin väri
- lisää ylä-paddingia
- tasaa testin oikealle
.addmessage
- muotoile viestinkirjoituslaatikkoa
- tee elementistä flex
- vaihda flexin suunta column
- keskitä flex elementit pystysuunnassa
- lisää yläreunaviiva
- lisää padding
- määritä elementin korkeus pikseleinä esim. 160px
#messagebox
- vaihda taustaväri
- aseta reunaviiva
- pyöristä kulmat
- aseta minimikorkeus esim. 3em
- vaihda tekstin väri
- aseta leveys 90%
- keskitä elementti margin: 0 auto;
#send
- muotoile Lähetä-nappi
- aseta napin taustaväri
- poista reunaviivat
- lisää padding
- pyöristä kulmat
- lisää marginaalia
- rajoita napin leveys
- lisää hover-pseudo, jossa kursori muuttuu sormeksi ja napin taustaväri vaihtuu
Tallenna demo GitHubiin
Muuta jos ehtii
- Laita botit keskustelemaan keskenään
- Tallenna chat.js samaan kansioon index.html:n kanssa
- Linkitä skripti html tiedostoon script src tagilla ennen body-tagin sulkeutumista
- <![CDATA[<script src="chat.js"></script>]]>
- Tarkista, että skriptin id:t ja classit vastaavat html dokumentissa annettuja