TDK dolgozat Korszerű Webfejlesztési Technológiák
Témavezető: Barabás Péter Szerzők: Molnár Márta Nagy Dominik Szilágyi Szabolcs Veit Eszter
1
2011
Tartalomjegyzék Bevezetés Célok kitűzése, elvárások Weboldal szerkezeti megvalósítása Alkalmazott technológiák Wordpress CMS HTML5 Google Web Fonts Felhasznált új tag-ek CSS3 Közösségi oldalak funkcióinak integrálása Facebook Térkép az egyetemről Böngészők támogatása Dinamikusság megvalósítása Alkalmazott technológiák A menü animálása A hír folyam megjelenítése Galéria Webes ergonómia Menü felépítése Admin felület Teljesített célok Források
2
2011
Bevezetés A Miskolci Egyetem beiskolázási weblapjának a fejlesztése. A leendő diákoknak az egyetem bemutatása a korszerű webes technológiák segítségével. Az egyetem minden napjairól és különleges eseményeiről egy átfogó képet fog adni a weblap. Fiatalos megjelenésben és kihasználva a közösségi szolgáltatások lehetőségeit.
Célok kitűzése, elvárások A felvételi előtt álló diákoknak egy informális weboldal készítése, amely segítséget nyújt az egyetem megismerésében. Célok: ● Fiatalos megjelenés ● Informális ● Az egyetemi élet bemutatása ● Karok ismertetése ● Korszerű technológiák használata ● A közösségi oldalak bevonása
Weboldal szerkezeti megvalósítása Alkalmazott technológiák Wordpress CMS “A WordPress egy webes szoftver amit gyönyörű web oldalak és blogok készítésére használnak. Szeretjük azt mondani, hogy ingyenes, de mégis megfizethetetlen egy időben.”[1] A fentebbi idézet jól mutatja hogy miért választottuk ezt a CMS (Content Managment System) rendszert a weboldalhoz. Egy nagyon könnyen alakítható és kiegészítőkkel testre szabható tartalom kezelő rendszer. PHP nyelven íródott maga a Wordpress és a MySQL adatbázissal működik együtt. Az általunk beépített és használt kiegészítők pontos felsorolása: ● Photosmash Galleries[2], segítségével minden egyes oldalon egyedi galériát tudunk megjeleníteni. Admin oldalon pedig a wordpress rendszerével együtt működően kezelni tudjuk ezeket a galériákat. ● Subpage Navigation[3], segítségével azon látogatók akik letiltották a Java Script használatát és egy olyan menü pontra kattintanak melyhez almenü pontok tartoznak, de nem nyílik le az almenü a Java Script tiltása miatt, akkor ők egy aloldalra kerülnek ahol kilistázásra kerültek az almenü pontok. HTML5 Eleget téve a korszerű technológiák alkalmazásának, választásunk a HTML legújabb verziójára esett amely elősegíti az információk könnyebb eljuttatását a felhasználókhoz. “Ez a részletes leírás meghatározza a World Wide Web alapnyelvének az 5. legfontosabb
3
2011
módosítását: Hypertext Markup Language (HTML). Ebben a verzióban új tulajdonságokat mutatnak be hogy segítsék a Webes alkalmazások szerzőit, új elemeket mutatnak be kutatásokra alapozva és különleges figyelmet adtak a tiszta egyezés ismertető jeleinek definiálásáról a felhasználói közvetítőknek, annak érdekében, hogy javítsanak az együtt működési képességen..”[4] Google Web Fonts A felhasználói élmény javításának érdekében az alapvető weben alkalmazható betűtípusok helyett egy a Google[5] által szolgáltatott betűtipust használunk, amely a Times New Roman betűtipus családjába tartozik de sokkal modernebb megjelenésű. Ez a betűtipus pedig a Poly elnevezésű. Felhasznált új tag-ek ● header “Egy dokumentum fejlécét vagy egy részét reprezentálja. A fejléc elemet jellemzően arra használják, hogy csoportosítson egy készlet h1–h6 elemet, hogy felépítse egy oldal címét annak feliratával vagy tagline-jával. A fejlécelemek mindazonáltal többet tartalmazhatnak mint csak a rész címsor és az alcím.”[6] ● nav “Egy dokumentum navigációját reprezentálja. A NAV elem egy rész, amely tartalmazza a hivatkozásokat további dokumentumokhoz vagy az aktuális dokumentumon belüli részekhez. Nem minden hivatkozásból álló csoportot muszáj NAV elemben deklarálni egy oldalon — csak az elsődleges navigációs linkeket tartalmazó csoportot. Gyakori a láblécnél, hogy tartalmaz egy listát a hivatkozásokról, melyek különféle kulcsfontosságú részekhez navigál az oldalon, de a lábléc elem ilyen esetekben jobban megfelel.[6] ● article “Reprezentálja egy oldal részét, amely leképezi egy független részét egy dokumentumnak, oldalnak, vagy weboldalnak. Ez lehetne egy fórum hozzászólás, egy magazin, vagy újságcikk, egy Web log beléptető, egy felhasználó által benyújtott hozzászólást, vagy a tartalom bármilyen másik független tételét.”[6]
● section “Egy általános dokumentumot vagy egy alkalmazási részt reprezentál. Ebben a kontextusban egy rész (section) a tartalom egy tematikus csoportosítása, jellemzően egy fejléccel, esetleg egy lábléccel. Egy internetes oldal kezdő lapját részekre lehet vele bontani, bemutatás, újság cikk és elérhetőségi adatok megosztásának céljából.”[6] ● footer “Egy dokumentum lábjegyzetét vagy fejezetét reprezentálja. A lábjegyzet általában meta adatokat tartalmaz a mellékelt részről, olyanokat mint például, hogy ki írta, hivatkozások a kapcsolódó dokumentumokhoz, szerzői jogokhoz, stb. A részhez adott elérhetőségi adatok fel kell hogy legyenek tüntetve a lábjegyzetben címelemet használva.”[6]
4
2011
CSS3 A legújabb HTML/XHTML-hez tartozó stílus leíró nyelvet alkalmaztuk a CSS3[7]-at, hogy ne csak szerkezetileg hanem megjelenésre is modern legyen a weboldal. Ez azt jelenti, hogy a modern böngészők már natívan képesek megjeleníteni a szín átmeneteket, az árnyékolást egy elemen vagy a szövegen, elemek sarkainak a lekerekítését és animációk kezelését képesek elvégezni. Ez azt jelenti hogy a webloldal legtöbb grafikai elemét nem mint kép kellet létrehoznunk, hanem bizonyos parancsok, stílus formázások megadásával, ezáltal a weblap mérete jelentősen csökkent.
Közösségi oldalak funkcióinak integrálása Facebook A legfontosabb beállítás a META[8] tag-ek megadása, ahhoz hogy a Facebook-on a weboldal ne csak egy hivatkozásként jelenjen meg hanem további információt is szolgáltasson az emberek számára. Így az általános információkon felül megadtuk az egyetem földrajzi koordinátáit és postai címét is.
5
2011
A Facebook-on megjelenő adatok az oldal megosztásakor
A Facebook legkedveltebb szolgáltatása a “Like”[9]. Amely segítségével nyílvánosságra adhatja egy látogató hogy “Tetszik”-neki az oldal, az egyetem. Ezt az elemet úgy helyeztük el, hogy minden egyes oldalon megjelenjen, így növelve a “rajongók” számát. A weboldal hírfolyama közvetlenül a Facebook egyetemi oldalának a faláról érkező bejegyzéseket tartalmazza. Így könnyítve meg az adminisztrációs munkát és így válik a weboldal teljesen közösségivé.
Térkép az egyetemről Az egyetemről a térképet a Google Maps[10] segítségével készítettük, ahol bejelöltük az egyetem legfontosabb pontjait, ami segítséget nyújthat egy jövendőbeli hallgatónak a tájékozódásban.
6
2011
A Miskolci Egyetem térképe
Böngészők támogatása Az alábbi kép[11] mutatja, hogy miért volt indokolt és miért mertük használni a legújabb webes technológiákat. Ugyan is jól látszik, hogy a modern böngészők már több mint 75%-ban támogatják ezen technológiákat és a legfontosabb hogy a maradék 25% olyan technológia amely speciális eseteknél használandók. Mi törekedtünk arra, hogy a legrosszabbul teljesítő Internet Explorer 53%-os támogatásával is élvezhető és kényelmes weboldalt készítsünk. Felkészítettük a weboldalt a lenti felsorolásban lévő összes böngészőre még a mobil eszközökön lévő böngészőkre is.
Dinamikusság megvalósítása Alkalmazott technológiák
7
2011
A dinamikus elemeket JavaScript nyelvben írtuk meg a jQuery[12] library használatával. Így a bonyolultabb natív JavaScript kódok helyett egy egyszerűbb és “könnyebb” kódot tudtunk létrehozni. Ezzel a technológiával oldottuk meg a menü animálását, a galéria megjelenítését és azt a funkciót amely az “Ide fogok járni! Miskolci Egyetem” feliratot kiírja az adott látogató Facebook oldalára ha rákattint az adott banner-re.
A menü animálása A menü megjelenésénél animálást használtunk, amivel megőriztük az egyszerű és letisztult kinézetett és növeltük a felhasználói élményt. A fő menü pontokra kattintva az alatta található almenük lenyílnak és így láthatóvá vállnak. Az almenük segítségével navigálhatunk az oldalon, sok hasznos információt innen érhet el a felhasználó. Ügyeltünk arra is, hogy az oldal böngészése közben ne legyen zavaró a lenyíló menü, ezért ha nincs rá szükség automatikusan visszazárul (ha nem áll rajta a cursor). A karok menü nyitott állapotban
folyam megjelenítése A hírfolyam megjelenésénél a fő szempont az volt, hogy a folyamatosan frissülő, új hírek egy helyen megtalálhatók legyenek. Azt is figyelembe kellett vennünk, hogy a weblap áttekinthetősége és informalitása ne vesszen el amiatt, hogy egy összefüggő hírfolyam jelenik meg a felhasználó előtt. Ezért esett a választásunk egy olyan megoldásra, ami manapság egyre kedveltebb, hogy minden egyes hír egy “dobozban” jelenik meg, amik között a jobbra és balra nyilak segítségével navigálhatunk. A doboz mérete fix, ezért a túl hosszú hírek külön is megtekinthetők a Folytatás gombra kattintva. Mindig az aktuális hír jelenik meg a kezdő lapon, de régebbi hírekhez is visszaléphetünk.
8
2011
hírek megjelenése
Galéria A galériánál a fő cél az volt, hogy bármely aloldalba beilleszthető legyen ezzel is bemutatva az egyetemi életet. A moduláris szerkezet mellett biztosítottunk az admin oldali szerkeszthetőséget is, mellyel folyamatosan frissíthető a képtár.
Webes ergonómia Fontos hogy a felhasználó átlássa, érdekesnek találja az oldalt és természetesen ne tartson sok időbe a kívánt információ megtalálása. Továbbá hogy lássa mire lehet kattintani, mik tartoznak logikailag egymáshoz. Célszerű ezeket az információkat feltűnőbbé tenni. Az alábbi képen látható a menük kiemelése a környezetből, illetve a hír folyam navigálására szolgáló nyilak sötétebb színe is a fontosság benyomását keltik.
9
2011
A kezdő oldal
Továbbá az oldalon jól látszik az információk elkülönülése, például a színekkel, az árnyékolással. A felhasználó szemszögéből az is fontos, hogy a weblap ne legyen túlzsúfolt. Ennek érdekében csak a főmenük jelennek meg, ezért fontos szempont hogy elnevezésük utaljon a hozzájuk tartozó almenükre is. A hírfolyam slideshow-ban való megoldása is ebből az okból történt, így a felhasználó kedvére lapozgathat , anélkül hogy az oldalnak újra be kéne töltődnie. A gyors információ szerzés érdekében az összes oldal alján megtalálható az egyetem elérhetősége valamint a Facebook funkciói is.
Menü felépítése
A főmenü pontok
Az egy sorban elhelyezkedő főmenük lehetővé teszik a weblap átláthatóságát és jelentősen csökkentik az általuk foglalt helyet. A hozzájuk tartozó almenük rejtve vannak mindaddig amíg a felhasználó kattintással láthatóvá nem teszi őket. Automatikusan
10
2011
eltűnnek amint nincsenek fókuszba , vagy másik főmenüre kattint az oldal látogatója. A menük sorrendje is fontos, balról jobbra haladva, a legfontosabbal kell kezdeni, hiszenelőször ez fog előtérbe kerülni.
Admin felület A Wordpress egy igen fejlett admin felülettel rendelkezik, ahonnan a teljes weblapot felügyelhetjük. Új bejegyzést írhatunk, régit módosíthatunk ami a mi weblapunknál megfelel a hírfolyamnak. Új oldalt hozhatunk létre, régit módosíthatjuk és a legnagyobb előnye a rendszernek, hogy ha tartalmat szeretnénk felvinni akkor egy Microsoft Office Word szerű kinézettel találkozunk ami megkönnyíti a laikus használó munkáját is. Új menü elemeket is létre hozhatunk és a galériát is innen, az admin felületről tudjuk kezelni.
A Wordpress admin felülete
11
2011
A Wordpress wysiwyg szerkesztője
Teljesített célok A weblapot elkészítettük szerkezetileg és megírtuk a szükséges funkciókat is. A kitűzött célokat teljesítettük, a weblap használatra kész. Jelenlegi állapotában már csak tartalommal kell feltölteni és az uni-miskolc.hu oldalán az felvételi oldalt meghírdetni.
12
2011
Források [1] WordPress, Blog Tool and Publishing Platform; http://wordpress.org/ [2] Photosmash Galleries; http://smashly.net/photosmash-galleries/ [3] Subpage Navigation; http://wordpress.org/extend/plugins/subpage-navigation/ [4] W3C HTML5 dokumentációja; http://dev.w3.org/html5/spec/Overview.html [5] Google Web Fonts; http://www.google.com/webfonts [6] HTML5 Doctor, Element Index; http://html5doctor.com/element-index/ [7] W3C CSS3 dokumentációja; http://www.w3.org/TR/css3-text/ [8] Open Graph Protocol; https://developers.facebook.com/docs/opengraph/ [9] Facebook Like Button; https://developers.facebook.com/docs/reference/plugins/like/ [10] Google Maps; http://maps.google.com/ [11] When can I use... Support tables for HTML5, CSS3, etc ; http://caniuse.com/ [12] jQuery: The Write Less, Do More, JavaScript Library; http://jquery.com/
13
2011
