Harjoitustyö 2: Verkkosivujen rakenne ja ulkoasu (HTML ja CSS)

Koko: px

Aloita esitys sivulta:

Download "Harjoitustyö 2: Verkkosivujen rakenne ja ulkoasu (HTML ja CSS)"

Annika Alanen
7 vuotta sitten
Katselukertoja:

1 Harjitustyö 2: Verkksivujen rakenne ja ulkasu (HTML ja CSS) Kurssin tisessa harjitustyössä tutustutaan verkksivujen rakenteen ja ulkasun määrittelemiseen HTML:n ja CSS:n avulla. Harjitustyön tarkituksena n tteuttaa verkksivust ryhmän teeman ympärille tukemaan tteutettavaa kampanjaa. Verkksivustn kehitystä jatketaan tulevien harjitustöiden yhteydessä. Harjitustyö tehdään itsenäisesti. Harjitustyötä varten n kurssille määritelty kaksi luenta ( ja ) sekä yksi viikkharjitus ( ). Yleisesti ttaen luennt tarjavat kattavan tietpaketin harjitustyöaiheeseen. Viikkharjituksissa pulestaan piskelijat vivat tehdä harjitustöitä sekä tarvittaessa kysyä neuva assistenteilta, mikäli harjitustöiden kanssa ilmenee ngelmia. Js et pääse paikalle harjituksiin, assistentteihin vi ttaa yhteyttä myös sähköpstitse etunimi.sukunimi@aalt.fi. Perustehtävien vaatimukset (0-3 pistettä) Harjitustyön perustehtävien vaatimukset n jaettu kahteen saan: HTML ja CSS. Tarkituksena ei le ensin tteuttaa kaikkia HTML-san vaatimuksia ja vasta sen jälkeen CSS-san vaatimuksia, vaan vaatimuksia kannattaa tteuttaa samanaikaisesti mlemmista sista. Myös bnustehtävään kannattaa tutustua ennen alittamista, sillä sen vaatimuksia vi halutessaan tteuttaa perustehtävien hessa. HTML (0-1p) HTML:n avulla määritellään verkksivustn rakenne ja semantiikka. Alla vaatimuslista: Verkksivustn rakenne: Etusivu (index.html), jsta käy selkeästi ilmi valittu teema. Muita teemaan liittyviä verkksivuja (esim. news.html tai cntact.html) infrmaatin jattelemiseksi. Spiva määrä n kappaletta. Verkksivustn semantiikka: <header>, jssa määritellään verkksivustn tsikk. Tänne vit myös lisätä muuta hyödyllistä tieta, kuten lgn ja/tai slganin. <nav>, jssa määritellään verkksivustn navigaatipalkki. Navigaatipalkin kautta pitää pystyä siirtymään ainakin Verkksivustn rakenne khdassa vaadituille verkksivuille. Lisäksi navigaatipalkista pitää selkeästi käydä ilmi, millä verkksivulla käyttäjä kullinkin n. <sectin> ja <article>, jiden avulla määritellään verkksivustn sisällön rakennetta. 1 Verkksivustn saa tteuttaa myös Single Page Applicatin periaatteella.

2 2 <fter>, jssa määritellään yhteystiedt (ainakin nimi, rganisaati ja vähintään kaksi muuta vapaavalintaista tieta) sekä mahdllisesti muuta yleisinfa. Lisätietja yllä mainituista HTML5-elementeistä: Hyödynnä myös muita elementtejä mnipulisesti, mukaan lukien <img>. Muista myös hyödyntää k. elementin alt, title, height ja width-attribuutteja. Muut vaatimukset: Lu verkksivustlle ma favicn.ic-tunnisteikni. Lisäksi <head>:n pitää sisältää metatietja. Pienennä kaikki verkksivustlla käyttämäsi kuvat (*.jpg, *.png,...) tarvittavan kkisiksi, käyttäen esimerkiksi Phtshpia. Verkksivujen rakenteen pitää validitua ilman virheitä (engl. errrs): Mikäli verkksivuille jää virheitä, pitää niiden lemassal perustella. CSS (0-1.5p) CSS:n avulla määritellään verkksivustn ulkasu sekä elementtien sijittelu ja näkyvyys. Alla vaatimuslista: Yleistä: Verkksivustn ulkasun pitää liittyä Viestintä 2 -kurssin teemaan. Sivustn tulee lla miellyttävä ja helppkäyttöinen. Mieti etukäteen valmiiksi, mihin khtaa verkksivusta spisi uutisikkuna, jka tteutetaan harjitustyössä 3. Tekniset vaatimukset: Yhtenäistä selaimien määrittelemät letustyylit, esim. CSS Resetin tai nrmalize.css:n avulla. Määrittele verkksivustn tyylit ulkisessa tiedstssa (*.css), jka linkitetään verkksivuihin. Hyödynnä tekstien ja taustjen tyyliminaisuuksia (esim. clr, fnt ja backgrund) mnipulisesti. Käytä myös erikisfntteja, esim. Ggle Fnts. Käytä elementtien ulkasun määrityksessä ja sijittelussa apunasi CSS-laatikkmallia (engl. bx mdel). Käytä erilaisia elementtien sijittelutapja (esim. flat, clear ja psitin). Verkksivujen ulkasun pitää validitua ilman virheitä (engl. errrs): Mikäli verkksivuille jää virheitä, perustele niitä palautuksen yhteydessä. Justava verkksivust (0-0.5p) Tee verkksivustsi sivuphjasta mahdllisimman justava (engl. respnsive layut). Tisin sanen muuta esimerkiksi palstjen 2 Yhteystiedt vivat tki sijaita muuallakin kuin <fter>:ssa.

3 leveyksissä käytetyt yksiköt absluuttisista suhteellisiksi sekä aseta sivuphjalle maksimi- ja minimileveys. Tee verkksivustsi mediasisällöstä (esim. kuvat) mahdllisimman justavaa (engl. flexible media). Tisin sanen määrittele esimerkiksi mediasisällöille maksimi- ja minimileveys, jtta ne taittuisivat autmaattisesti justavan sivuphjan mukaan. Tavuta myös tarvittaessa ylipitkät sanat HTML:n tai CSS:n avulla. Tee verkksivuststasi justava myös älypuhelimilla ja tableteilla käytettynä. Tisin sanen määrittele <meta> (HTML) (CSS) asianmukaisesti. Mediakyselyt (Media Queries): Lisää verkksivustsi sivuphjaan murtumispiste CSS-mediakyselyiden avulla, jtta verkksivustn sivuphjan rakenne timisi paremmin eri laitetyyppien (älypuhelimet, tabletit ja tietkneet) kanssa. Tisin sanen svella murtumispisteen khdalle tiettyjä tyylimäärittelyitä (esim. width, display ja fnt-size), jtka yliajavat vastaavat vakityylimäärittelyt. Verkksivustn pitää tarjta vähintään kaksi erilaista sivuphjan rakennetta. Vit itse määritellä murtumispisteiden tarkat khdat. Pienimmässä sivuphjassa navigaati pitää esittää erittäin tiiviissä mudssa, esimerkiksi drp dwn -valikkna. Bnustehtävä - Mbile-first Design (0-1 pistettä) Yleistä Perustehtävänannssa n hjeistus verkksivujen suunnitteluun Desktp-first -tekniikalla. Tämän viikn bnustehtävänä n suunnitella verkksivut sen sijaan Mbile-first -tekniikalla, eli mbiilikäyttäjä etusijalla. Mbile-first -suunnittelulla tarkitetaan suunnittelutyyliä, jssa ensin suunnitellaan verkksivujen mbiiliversi, ja sen jälkeen aletaan laajentamaan niitä ismmille näytöille. Tekniset vaatimukset: CSS-mediakyselyissä (Media-Query) n käytetty murtumipisteen määrittämiseen min-width -minaisuutta. Kdi n jäsennelty niin, että siitä näkee selvästi mbiiliversin lleen etusijalla. (Käytännössä tämä tarkittaa sitä, että js mediakyselyt pistaa, selain ei saa piirtää muuta kuin mbiilinäkymän.) Arvstelussa tetaan myös humin se, miten kattavasti mbiilikäyttäjä n tettu humin sivustn suunnittelussa. Tällaisia aspekteja vat esimerkiksi mbiiliystävälliset valikt, tarpeeksi iskkiset iknit ksketusnäytön käyttöä varten. Testaa lpuksi puhelimella, että mbiiliversisi näyttää miellyttävältä ja timii. Kerr palautuksen yhteydessä, millä mbiililaitteella testasit sivustasi.

4 Yleistä Riittää, että harjitustyö n testattu ja se timii jllain seuraavista selaimista: (1) Ggle Chrme, (2) Mzilla Firefx tai (3) Apple Safari. Mikäli tehtävänannn suhteen n epäselvyyksiä, niin ta yhteyttä kurssin henkilökuntaan jk sähköpstilla tai viikkharjituksissa. Pistejattelu ei le täysin absluuttinen, vaan esimerkiksi ansiituneella visuaalisella tteutuksella vi kmpensida pieniä puutteita teknisissä vaatimuksissa. Ohjelmistt Harjitustyö tehdään asiakaspään web-teknlgiita käyttäen, tarkemmin santtuna HTML- ja CSS-kielten avulla. JavaScriptiä saa käyttää, mutta ei tarvitse (JavaScript käsitellään luennlla 3). Harjitustyön tekemiseen ei saa käyttää palvelinpään hjelmintikieliä (esim. PHP), sillä Github verkkpalvelu ei näitä tue. Lisäksi harjitustyön tekeminen vaatii vapaavalintaisen hjelmintiympäristön tai tekstieditrin (esim. Sublime Text, Brackets tai Ntepad++) käyttämistä. Harjitustyön tekemiseen ei saa käyttää visuaalista editria vaan hjelmakdi n kirjitettava käsin. Arvstelu Harjitustyö arvstellaan asteiklla hyväksytty (1-4 pistettä) tai hylätty (merkittäviä puutteita). Arvstelussa humiidaan ensisijaisesti vaatimusten täyttyminen sekä panstuksen määrä. Tämän lisäksi harjitustyön arvsteluun vaikuttavat sen idea ts. kuinka vahvasti harjitustyö liittyy Viestintä 2 -kurssilla annettuun teemaan sekä sen tekninen ja taiteellinen tteutus. Myöhässä palautetut harjitustyöt arvstellaan samin perustein, paitsi että jkaiselta alkavalta myöhästymisvurkaudelta vähennetään 1 piste. Myöhästynyt työ vidaan päästää läpi hyväksyttynä, vaikka myöhästymissakt tiputtaisivat pisteet nllille, mikäli työ muuten täyttää 1 pisteen mukaiset vaatimukset. Hylätyt harjitustyöt pulestaan uusitaan assistenttien kanssa erikseen svitun aikataulun mukaisesti tai kurssin lpussa järjestettävän rästikierrksen yhteydessä. Uusintapalautetuista harjitustöistä vi saada hyväksyttynä vain 0 pistettä. Palautus Harjitustyö palautetaan GitHub Pagesiin (kats hjeet kurssin MyCurses-sivujen luentmateriaalit -sista löytyvästä GitHubin käyttööntt -tiedststa) viimeistään maanantaina kl mennessä. Palautetun verkksivustn tulisi lla tarkasteltavissa sitteessa Linkkaa verkksivustsi MyCurses-sivujen Harjitustyö-sin palautuskenttään ennen määräaikaa. Kirjita myös kuvaus työstäsi. Kerr harjitustyösi mahdllisista hienuksista/puutteista ja mitkä

5 sit n mahdllisesti tteutettu klmannen sapulen elementein. Kerr myös millä selaimella (+ versi) ja käyttöjärjestelmällä (+ versi) sivustn tulisi timia virheettömästi.

Samankaltaiset tiedostot

MoViE- sovelluksen käyttöohjeet

MoViE- sovelluksen käyttöohjeet MViE- svelluksen käyttöhjeet Yleistä tieta: MViE- palvelua vidaan käyttää mbiililaitteilla jk käyttämällä laitteessa levaa selainhjelmaa tai lataamalla laitteeseen ma MViE- svellus Svelluksen kautta vidaan