1. Verkkosivustojen kehittäminen »
  2. JavaScript: DOM, tapahtumat, objektit (harjoitustyö) »
  3. WebDev-tiekartta

WebDev-tiekartta

  • Harjoituksessa 3.1 luit ja tiivistit artikkelin verkkokehityksestä.

  • Harjoituksessa 4.7 vertasit opiskelutoverisi artikkelitiivistelmän ja saanut palautetta omasta yhteenvedostasi.

Jatketaan näiden pohjalta.

Tehtävän kuvaus

Ota yhteenveto ja saamasi palaute ja luo HTML-dokumentti “WebDev-tiekartta”, joka yrittää vastata ainakin seuraavaan kysymyksiä:

  1. Mitkä tekniikat ovat hyödyllisimpiä verkkokehittäjälle opeteltavana ja miksi?

  2. Mitkä ovat parhaat tavat oppia verkkokehitystä?

  3. Miten tekoäly muuttaa tulevaa verkkokehitystä?

Tämän harjoituksen voi lähettää joko yksin tai 1-3 hengen ryhmissä.

Vaatimukset

Asiakirjalla on seuraavat vaatimukset:

  1. HTML-koodin on läpäistävä vahvistus (virheitä ei sallita)

  2. Semanttisia merkintöjä on käytettävä, vähintään <main>, <section> ja <footer> elementtien tulee näkyä asiakirjassa.

  • Jaa sisältösi erillisiin osiin, jos se on järkevää

  • Sekä <main> että <footer> voivat sisältää niin monta osiota kuin on tarpeen

  1. Asiakirjan on läpäistävä saavutettavuustarkistus. Ei kriittisiä tai vakavia virheitä.

  • Katso lisätietoja alta

  1. Asiakirjan pääsisällön (sisällön <main> sisällä) tulee olla vähintään 500 sanaa pitkät.

  • Sisältö tulee jakaa erillisiin osiin, kappaleet, luettelot, taulukot jne. tavalliseen tapaan.

  1. Kaikki ulkoiset viitemateriaalit on lueteltava ja linkit niihin on annettava verkkoresursseja.

  • Asiakirjan tulee sisältää APA-tyyli https://www.mendeley.com/guides/apa-citation-guide/ viiteluettelo. (Katso tarkemmat tiedot alta)

  • Luettelon on oltava <article id=”references”>-tunnisteen sisällä

  • Vähintään kaksi (2) viitettä tulee olla linkkeineen niihin.

  1. Merkitse tekoälyn luoma sisältö selkeästi ja näkyvästi.

Esteettömyystarkistus

Automaattiarvostelija (grader) käyttää Axe® Accessibility Testing Tools -työkalua jolla voi arvioida sivun ja sen HTML-koodin saavutettavuutta.

Voit asentaa sen myös selainlaajennukseksi Tarkista saavutettavuus ennen asiakirjan lähettämistä. Laajennus voi olla löytyy omalta välilehdeltä selaimen kehittäjätyökalujen sisällä.

Tarkista saavutettavuus Axen avulla ja korjaa kaikki kriittiset ja vakavat ongelmat työkaluraportit HTML-tiedostossasi.

APA-tyyliviiteluettelo

Kuvassa on esimerkki APA-tyyliviittausluettelosta ja taulukossa kuvataan HTML-rakenne, vaaditut elementit ja niiden attribuutit.

Grader edellyttää, että luettelossa on oltava vähintään kaksi olemassa olevaa viittauksia ja linkkejä niihin.

../../_images/references.png
APA Style Reference List in HTML
Tag Parent Required attributes Description
<article> N/A id="references" (required by the grader) Represents a self-contained piece of content, such as a blog post or an article
<h2> <article> N/A Heading level 2 for the title of the reference list
<ul> <article> class="ref-apa" Unordered list representing the reference list, with class "ref-apa" for styling
<li> <ul> N/A List item containing each reference
<em> <li> N/A Italicizes text within the list item, such as journal names and volume numbers
<a> <li> data-retrieved-url="true" Anchor tag for URLs of online resources

Attention

ChatGPT:n ja muiden AI-bottien käyttö on sallittua, mutta sinun on merkittävä kaikki tekoälyt luonut sisältöä selkeästi ja näkyvästi.

Harjoituksen voi tehdä yksin tai 1-3 hengen ryhmissä.

A+ esittää tässä kohdassa tehtävän palautuslomakkeen.