Oldal szerkesztése HTML nézetben: előnyök és korlátok

Az LMS rendszerekben a tartalom beillesztésekor nagyon gyakran a beépített szövegszerkesztő felületet használjuk, amelyen elérhetőek a tipikus formázási lehetőségek (pl. félkövér, dőlt stílus, bekezdés igazítások, felsorolások, táblázatok beszúrása stb.). Ugyanakkor arra is lehetőségünk van, hogy a tartalmat és annak kinézetét közvetlenül a HTML és CSS nyelvek segítségével adjuk meg.

Ez főként akkor lehet előnyös, ha a tartalom már rendelkezésre áll ilyen formában, ezért egyszerűbb a kódot felhasználva előállítani a tartalomoldalakat, mint újraformázni a teljes szöveget. Emellett olyan formázásokat, vagy akár akadálymentesítési technikákat is megvalósíthatunk, amelyet a keretrendszer szerkesztőfelülete alapesetben nem támogat.

Ismerkedés a HTML és a CSS nyelvekkel

Cikkünknek nem célja, a HTML és CSS nyelv részletes bemutatása. Aki szeretné megismerni ezen nyelveket, „A weblapkészítés technikája (HTML5, CSS3) és ergonómiája” című, szabadon elérhető digitális tananyagunk segítségével megteheti. A tananyagban interaktív, átírható kódok segítik a HTML leírónyelvvel és megjelenésért felelős stíluslapokkal (CSS) való ismerkedést.

Kód nézet használata a Moodle, illetve a Canvas rendszerekben

Lássuk, hogy az ELTE-n használt LMS rendszerekben a tartalom szerkesztésekor hogyan válthatunk át kódnézetbe!

A Canvas rendszerben a HTML szerkesztő hivatkozásra kattintva egy egyszerű szövegdoboz jelenik meg, ahova bemásolhatjuk, vagy beírhatjuk a kódot. A vizuális szerkesztőre való visszaváltáshoz a Vizuális szövegszerkesztő linkre kell kattintani.

1. ábra: Szerkesztőfelület a Canvas LMS rendszerben

A Moodle rendszerben a szerkesztőfelület utolsó, HTML ikonjára kattintva jelenik meg a kód felület. A visszaváltáshoz még egyszer rá kell kattintanunk az ikonra.

2. ábra: A Moodle szerkesztő felülete

Korlátozások kód nézetben

Egy LMS rendszerben jellemzően korlátozva van az, hogy milyen HTML címkéket és paramétereket lehet használni a kódban. Emiatt előfordulhat az, hogy az oldal mentésekor bizonyos címkék eltávolításra kerülnek a kódból. Ezért fontos, hogy előzetesen tájékozódjunk arról, hogy a rendszer milyen címkéket támogat.

A különböző scriptek beágyazását például jellemzően tiltják az LMS rendszerek, mert azzal akár kártékony kódot is társítani lehetne egy tartalomoldalhoz.

A Canvas rendszer korlátozásai

A Canvas rendszer az alábbi címkék, attribútumok és stílusbeállítások használatát teszi lehetővé.

Támogatott HTML címkék:

a, b, blockquote, br, caption, cite, code, col, hr, h2, h3, h4, h5, h6, h7, h8, del, ins iframe, colgroup, dd, div, dl, dt, em, i, img, li, ol, p, pre, q, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, u, ul, object, embed, param.

Támogatott attribútumok

• minden elem esetén: style, class, id

• a: href, title, target, name

• blockquote: cite

• col: span, width

• colgroup: span, width

• img: align, alt, height, src, title, width

• iframe: src, width, height, name, align, frameborder, scrolling

• ol: start, type

• q: cite

• table: summary, width, border, cellpadding, cellspacing, center, frame, rules, dir, lang

• tr: align, valign, dir

• td: abbr, axis, colspan, rowspan, width, align, valign, dir

• th: abbr, axis, colspan, rowspan, width, align, valign, dir, scope

• ul: type

• param: name, value

• object: width, height, style, data, type, classid, codebase

• embed: name, src, type, allowfullscreen, pluginspage, wmode, allowscriptaccess, width, height

Támogatott stílus beállítások: background, border, clear, color, cursor, direction, display, float, font, height, left, line-height, list-style, margin, max-height, max-width, min-height, min-width, overflow, overflow-x, overflow-y, padding, position, right, text-align, table-layout, text-decoration, text-indent, top, vertical-align, visibility, white-space, width, z-index, zoom.

Támogatott címkék és stílusok a Moodle rendszerben

A Moodle dokumentációjában azt olvashatjuk, hogy a rendszer csaknem minden címkét támogat, de itt is igaz az, hogy a scriptek beszúrásáért felelős címkék eltávolításra kerülnek.

A tesztelés fontossága

Amennyiben kódnézetben szerkesztjük az oldalakat, rendkívül fontos, hogy mentés után teszteljük le az oldalakat! Az egyes LMS rendszereket az intézmények is testreszabhatják úgy, hogy a használható címkék, stílusbeállítások módosításra kerülnek, így az eredeti dokumentációhoz képest eltérések mutatkozhatnak.

A szerkesztés során érdemes átváltani vizuális nézetre és visszaváltani kódnézetre, mert ez a művelet sokszor eltávolítja a nem megengedett címkéket, illetve egyéb beállításokat.

Kódrészletek egyszerű beillesztése

Cikkünk folytatásában (Kódrészletek egyszerű beillesztése a Canvas LMS oldalaiba c.) egy olyan Canvas kiegészítőt mutatunk be, amely megkönnyíti a kódrészletek tartalomba történő beillesztését. A Canvas LMS rendszer működéséről további információkat tudhat meg a Canvas kézikönyvből, a Gyakran Ismételt Kérdések listájából, valamint képzéseinken.