A webfejlesztés alapjai

HTML - CSS

A webfejlesztés alapjai Miért készülnek weboldalak? Valamit nyújtani szeretnénk a felhasználónak. A webfejlesztés során elsősorban a felhasználók igényeit vesszük figyelembe. Nevezhetjük az önkifejezés eszközének, egyesek már-már művészeti ágnak tartják. A webfejlesztés egy összetett feladat. A weboldal egy multimédiás eszköz, több médiumot is magában hordoz (foglal): szöveg, kép, mozgókép, hang, animáció

Tervezési fejlesztési szempontok Egy színvonalas weboldal elkészítését komoly tervezés előzi meg. Végcél: felhasználók kiszolgálása, ezért is fontos az előbb már említett felhasználók igényeinek kielégítése. A fejlesztés során 7 fontos dologra kell figyelni: 1. Honlaptervezés 2. Navigációs struktúra 3. Oldaltervezés 4. Figyeljünk a látogatók visszajelzéseire 5. Milyen monitort használnak a látogatók 6. Milyen böngészőt használnak a látogatók 7. Az oldal akadálymentesítése, sérültek

1. Honlaptervezés Célok megfogalmazásával kezdődik: kinek szól, mit szeretnénk közölni, mit szeretnénk átadni, a felhasználónak van-e lehetősége interakciókra Látogató fejével gondolkodjunk, kérjünk segítséget (véleményt) ismerőseinktől a tervezés során. Pl.: egy oktatási célú weblap (információ), egy kormányzati oldal (struktúra) vagy pl. egy webáruház között lényeges eltérés van Pl.: egy főiskolai, egyetemi oldal kialakítása során fontos szempontok: Szervezeti felépítés Letölthető dokumentumok Események Hallgatói információk Stb. Jól látható, hogy egy ilyen általános oldal tervezése a legnehezebb

2. Navigációs struktúra Az egyik legfontosabb szempont a tartalmi szerkezet, az oldalak közötti navigáció és az egyes oldalakon belüli navigációs lehetőségek egységet alkossanak. Legyen letisztult és egyszerű, könnyen nyomon követhető. Zavaros struktúra: Célszerű a faszerkezetű struktúra kialakítása:(egyszintű felépítés)

2. Navigációs struktúra Azonban ezzel is vigyázni kell:(többszintű felépítés) Pl. a blog oldalak egyrészt azért is olyan népszerűek, mert ott egy oldalon belül többféle navigáció is megtalálható

2. Navigációs struktúra Fontos többirányú navigáció az oldal rugalmas használatához: Hibás navigáció: Egy lehetséges navigáció: Gondoskodni kell tehát a vízszintes és függőleges mozgás lehetőségéről!

3. Oldaltervezés Ha az eddigi szempontok körvonalazódtak, az egyes oldalakra helyeződik át a hangsúly (részleteire bontás) Az olvasók pásztáznak: a felhasználók kevés időt töltenek az oldalon, amennyiben valami megragadja őket, akkor maradnak. Ezért is fontos az egyértelmű felépítés, és az egyes oldalak lényegre törősége.

3. Oldaltervezés Mi segíti az oldal gyors áttekintését: Kifejező fő és alfejezetcímek Rövid összefoglaló a cím után (ezt a részt szokás kiemelni: félkövér, dőlt) Linkekkel és egyéb jelölésekkel kiemelt kulcsszavak, gondolatok A bekezdéseink legyenek rövidek és lényegre törők A fejezetek legyenek rövidek és áttekinthetők Hagyjunk megfelelő távolságot az egyes bekezdések, fejezetek és címek között A sorok ne legyenek túl zsúfoltak Amennyiben hosszú az oldalunk, segítsük a navigációt linkekkel, kiemelésekkel

3. Oldaltervezés / oldalnavigáció A honlap minden oldalán jól áttekinthető és egységes menürendszer legyen. Ezt általában jól látható helyre rakjuk, az oldal tetejére vagy valamelyik oldalsó részen. Ez az egyes oldalakon ne változzon! Szokás némely esetekben egy helyzetjelző felirat megjelenítése, amely a főoldaltól viszonyított utat írja le, ezt nevezik halszálkás menünek.

3. Oldaltervezés / oldalnavigáció Pl. a weblabor.hu oldalt vizsgálva: A WL logó mindig a kezdőoldalra visz Kétszintű főmenü segíti az eligazodást Halszálkás menü

3. Oldaltervezés Megoszlanak a vélemények az oldal szövegében (tartalmi részében) található linkekről: a fontos dolgok elhelyezkedhetnek a szövegben linkként, vagy legyenek azok is elkülönítve a szövegtől Az oldal aljára fontos hivatkozást ne rakjunk! Alternatív navigáció: blog típusú oldalaknál címkék vagy kulcsszavak használata. A betűméretnek is szerepe van.

3. Oldaltervezés / letöltési sebesség Hiba: fejlesztő saját gépén készíti az oldalt, nem veszi figyelembe az oldal méretét Napjainkban ez már nem olyan nagy probléma, de ezt is figyelembe kell venni. Mobil böngészés egy fontos tényező Egy felmérés szerint a látogatók 7 mp után elhagyják az oldalt, ha az még nem töltődött volna be. Tippek a lassú kapcsolattal rendelkező látogatók megtartásához: Ne használjunk képeket szövegek megjelenítésére, a képek betöltéséig is így olvasható lesz az oldal. Képek méretének megadása az oldal szerkesztésekor Amennyiben táblázatos oldalfelépítést használunk, figyeljünk arra, hogy ne legyen nagy méretű a táblázat, mert az oldal csak a teljes táblázat betöltődésekor fog összeállni.

Oldaltervezés 4. Figyeljünk a látogatók visszajelzéseire Komolyabb weboldalaknál célszerű ilyen lehetőséget biztosítani a felhasználóknak 5. Milyen monitort használnak a látogatók A www.ektf.hu/ oldalt alapul véve, a látogatók 43%-a 1024 x 768-as felbontásban nézi az oldalt, 30%-a 1280 x 1024-es felbontásban, 25%-a 1280 x 960-as felbontásban, a maradék egyéb felbontásban. Ezt is figyelembe kell venni. 6. Milyen böngészőt használnak a látogatók A felhasználók különböző böngészőket használnak: IE (6,7), Firefox, Safari, Opera, stb. Figyelni kell, hogy a különböző böngészőkben megfelelően nézzen ki az oldal

Weblapok ergonómiája Letöltési méret: lélektani határ (<200 KB) Letöltési idő: szakirodalmak szerint < 2 mp Méret nagyságának okai: információk szöveges formában HTML kód mérete: csökkenthető a CSS kiváltásával, táblázatos oldalfelépítés elhagyásával Rögzített oldalszélesség: egy-egy oldalt sokan, sokféle eszközön néznek meg az oldalnak alkalmazkodnia kell a különböző felbontásokhoz Oldalhosszúság: nagy tartalom esetén kategorizáljunk Rögzített méretű szöveg: a méret változtatása miatt se rakjunk szöveget a képekre Keretek használatának hátrányai: Nehéz nyomtatás Nem rugalmas (sok eszközön rosszul jelenhet meg) A webcím nem ír le állapotot (nem lehet címezni az oldalt link)

Irányelvek weboldal kialakításakor (forrás: weblabor.hu) A következő pontok hasonlóak az USA-ban kötelező szempontokhoz az állami weboldalak fejlesztésekor, nagy hangsúlyt fektetnek a vakok, gyengénlátók, színtévesztők segítésére. 1. Kezdőlap kialakítása: kerüljük a Flash,Java,Javascript használatát amennyiben mégis használunk, biztosítsunk lehetőséget a továbblépésre visszatérve az oldalra fárasztó (unalmas) az állandó kikerülés keresőrobotok: legyen HTML link az oldalon, hogy a robotok indexelni tudják a tartalmat

Irányelvek weboldal kialakításakor 2. Keret (frame) mentesség Beléptetés bonyolult (Get, Post változók) Felépítés kusza lesz Webcím nem ír le állapotot 3. Töltelék képek használata nem javasolt Pl. táblázatos oldalszerkezet kialakításánál, helyette CSS használata Használata esetén: alt= tulajdonság felolvasó szoftverek figyelmen kívül hagyják 4. Image map-eket ne használjunk A nem látó felhasználók számára használhatatlan lesz az oldal 5. CSS nélkül is használható oldal (extrém esetekben ) Egyes felolvasó szoftverek nem támogatják a CSS formázó elemeit

Irányelvek weboldal kialakításakor 6. Szabványosság Igényeseknek: CSS 2, XHTML 1.0 7. Képek hozzáférhetősége Képeknél kötelező az alt tulajdonság használata Amennyiben a kép szöveget tartalmaz, azt ide kell beírni. Ha a kép nem elérhető, vagy karakteres böngészőt (Linux: Lynx) használunk, azt alt fog megejelenni 8. Tartalmak alternatív formában való közzététele A Flash videók, PowerPoint bemutatók, stb. szöveges információit tegyük elérhetővé karakteres formában is. Videóknál rövid összefoglaló szöveget írjunk.

Irányelvek weboldal kialakításakor 9. Navigáció Navigációs elemek ne szerepeljenek Flash formában, vagy ne legyen Javascriptes legördülő menü formában 10. Zavaró elemek mellőzése Fényújság (margue), villogó szövegek (blink), egyéb figyelemelterelő ábrák 11. Javascript nélkül is használható oldal 12. Hang nélküli oldal Ne legyen háttérzenéje az oldalnak, vagy hang alapú visszajelzés zavaró, ill. felolvasó szoftvert nem lehet érteni 13. Formázás ne hordozzon információt Az aktív menüt ne csak színnel jelöljük gyengén látók számára valamilyen plusz karakterrel

Irányelvek weboldal kialakításakor 14. Oldalszerkezet Ne csak vizuálisan jelenjenek meg egymás mellett az egymáshoz kapcsolódó tartalmak, hanem a forrást tekintve is kapcsolódjanak 15. Helyes kód Az űrlapelemek logikailag kapcsolódjanak egymáshoz, pl.: <label for="name">név:</label> <input type="text" name="name" id="name"/> A szövegre kattintva a fókusz a beviteli mezőbe ugrik Pl.: példa(munkahelyi adatok megadása) és ellenpélda (szállás) AgriaMedia 16. Oldaltérkép A honlap oldalainak logikai struktúráját szemlélteti 17. Táblázatok Oldal kialakításánál kerüljük táblázatok használatát

A HTML (HyperText Markup Language) nyelv Alapnyelv, amit minden weboldalfejlesztőnek ismernie kell A HTML szabvány mára már elavultnak tekinthető ( felváltotta az XHTML ) A HTML állomány egyszerű szövegállomány ún. jelölő tagokkal A tagok alapján tudja megjeleníteni a böngésző az oldalt A HTML állományok html kiterjesztésűek Szerkesztésére bármilyen szöveges szerkesztővel lehetséges (pl. jegyzettömb) WYSIWYG (what you see is what you get) szerkesztők: pl. FrontPage, Word

A HTML tagok jellemzői Egy html dokumentum felépítése: <html> <head> <title>az oldal címe</title> </head> <body> ez a honlapom </body> </html> A HTML tagot a < és > karakterek veszik körül (így ezek a szövegben nem használhatóak, csak entitással) Vannak páros (pl. <b></b> és egyszeri (vagy üres) (<br>) tagok A HTML-ben a tagok kis és nagybetűvel is írhatók, de célszerű a kisbetűs írásmód (XHTML) Pl.: <b>ez egy félkövér szöveg </b> A tagok tulajdonságokat is tartalmazhatnak (dupla idézőjelekkel): <body bgcolor= red ></body>

Alapvető HTML tagok Címek használatához: <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6> A h1 a legfelsőbb szintű cím, a h6 a legkisebb Bekezdések: <p>ez egy bekezdés</p> A HTML-ben a tördelést nem befolyásolhatjuk a kódban elhelyezett szóközökkel és ENTER-ekkel. Sortöréshez: <br> Vízszintes elválasztó vaonal: <hr> Egyéb elemek: <div></div> : blokk szintű, szerepe oldalkialakításnál van <span></span> : soron belüli Szerepük: CSS tulajdonságokkal való felruházás, ha nem tudunk más tagot használni

Szövegformázó tagok <b></b> : félkövér szöveg <big></big> : nagyobb szöveg <em></em> : kiemeli a szöveget <i></i> : dőlt szöveg <small></small> : kisebb szöveg <strong></strong> : félkövér kiemelés  : alsó index  : felső index <code></code> : forráskódot definiál

Linkek, képek Link: <a href= http://www.weblabor.hu >Weblabor</a> A target= _blank tulajdonsággal az oldal új ablakban jelenik meg Képek: <img src= hatter.jpg > Nincs záró tagja Az src paraméterrel a kép elérési útját kell megadni Az alt paramétert ajánlatos megadni Célszerű megadni width és height tulajdonságot, ezek a kép méretétől eltérőek is lehetnek Képek használata linkként: <a href= index.html > <img src= fooldal.jpg alt= vissza a főoldalra width= 40 height= 40 > </a>

Táblázatok Létrehozása a <table></table> taggal történik, ez páros tag. A táblázaton belül a sorok létrehozása: <tr></tr> A sorokon belül az oszlopok létrehozása: <td></td> Pl. 2 x 3-as táblázat <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> A fejléc sorban az oszlopok megadása <th></th> tagok között Paraméterek: border, bordercolor, stb.

Listák Felsorolások: <ul> <li>alma</li> <li>körte</li> </ul> A felsorolási szimbólum egy fekete karika, ez CSS-sel változtatható Számozások: <ol> <li>alma</li> <li>körte</li> </ol> Definíciós lista: <dl> <dt>alma</dt> <dd>jonatán, sztarking</dd> <dt>szőlő</dt> <dd>kékfrankos, leányka, olasz rizling</dd> </dl>

Fejrész (head) A head elem olyan információkat tartalmaz, amik a HTML dokumentum egészére vonatkoznak <title>cím</title> : a böngésző címsorában megjelenő szöveget definiálja <link> : külső fájlok kapcsolása a dokumentumhoz <meta> : meta információkat definiál, ezeket használják a keresőrobotok <style> : stílusleírás az oldal számára <script> : az oldal interaktív használatát lehetővé tevő programrészek

HTML XHTML XHTML EXtensible HyperText Markup Language-et jelent Célja a HTML felváltása Nagyon hasonló a HTML 4.01 szabványhoz, de az XHTML szigorúbb, letisztultabb Az XHTML W3C (WWW Consortium) ajánlás A legfontosabb különbségek a HTML 4.01-hez képest: Az XHTML elemek egymásba ágyazása szigorúbb: <b><i>szöveg félkövér és dőlt</b></i> ez a kódrészlet hibás Az XHTML elemeket mindig le kell zárni, pl: <img />, <br />, <hr /> Az XHTML elemeknek kisbetűseknek kell lenniük Mindig kell lennie egy gyökérelemnek, ami a <html>, az alap dokumentum struktúra: <html> <head>... </head> <body>... </body> </html>

CSS HTML dokumentumok formázása CSS : Cascading Style Sheets Meghatározza a HTML elemek megjelenését A stílusokat általában külön css kiterjesztésű fájlokban tároljuk Kezdetben : csak dokumentumtartalmat definiáló tagok Aztán : Netscape és Explorer különvált megjelenítést befolyásoló tagok, melyek nem voltak egységesek A W3C adott megoldást a helyzetre : HTML + CSS eszközpáros Azonban még így is vannak nehézségek a fejlesztés területén (IE6) A CSS-sel időt spórolhatunk : több elemhez ugyanazt a stílust rendelve, azt csak egy helyen kell módosítani

A CSS nyelvtana kiválasztó { tulajdonság1:érték1; tulajdonság2:érték2; } body { color:black; text-align: center; } Felsorolás: h1, h2, h3 { color: red; font-weight:bold; } Kiválasztó típusok: osztály (class), azonosító (id), elem alapú Megjegyzés: /* megjegyzés szövege */

Háttér és szöveg tulajdonságok Háttér: background-color: érték; /*háttér színe */ background-image: url(a háttérkép elérése); background-repeat: érték; /*háttérkép ismétlődése */ background-position: érték; /*háttérkép pozíciója */ background-attachment: érték; /*háttérkép ragasztása*/ Minden együtt: background: előbbi értékek szóközzel elválasztva; Szöveg: color: érték; text-align: érték; /*igazítás*/ text-decoration: érték; /* szöveg megjelenése: aláhúzott, áthúzott, stb.*/ font-family: érték; /*betűtípus */ font-size: érték; /*betűméret */ font-style: érték; /*stílus */ font-weight: érték; /*betű vastagsága */

Szegélyek és térközök Szegélyek: border-style: érték; /*solid, dotted, dashed, groove, double, stb. */ border-color: érték; /*keret színe*/ border-width: érték; /*px-ben megadva */ Térközök: külső margó: margin: értékek; /*px, cm, em-ben megadva, sorrend: fel, jobbra, le, balra */ középre igazítás: margin: 0 auto; belső margó: padding: értékek; /*px, cm, em-ben, sorrend ua. mint a margin-nál */

Listák, méretek, megjelenítés Listák list-style-type: érték; /*lista jelének típusa: disc, square, circle, none*/ számozott listák esetén: decimal, lower-roman, upper-roman, lower-alpha list-style-image: url(elérési út); /* listajel helyett kép berakása*/ list-style-position: érték; /*lehet: inside, outside */ list-style: értékek; /*előbbiek közös megadása*/ Méretek width: szélesség; height: magasság; csak blokkszintű elemeknél: <p>,<div>,<h1>,<ul>,<ol>,<table>,stb. Megjelenítés display: érték; /*block, inline, none*/

Lebegtetés, pozícionálás, láthatóság Lebegtetés (pl. hasábos megjelenés, kép körbefuttatása szöveggel) float: érték; /*left, right */ Pozícionálás position: érték; /*static, relative, absolute, fixed */ static: elemek alapértelmezett tulajdonsága relative: megadható top és left tulajdonság, de az elem eredeti helye üres elsz, nem kerül oda elem absolute: hasonló mint a relative, de itt az elem nem tart fenn területet fixed: rögzített, a képernyőhöz viszonyítva állandó a pozíciója Láthatóság visibility: érték; alapértelmezett: visible, de akár el is rejthetjük az elemet: hidden

Linkek Az <a></a> elem helyzetei: Alapértelmezett helyzet: a:link { tulajdonság:érték párok megadása } Már látogatott link: a:visited { tulajdonság:érték párok megadása } A link fölött van az egér: a:hover { tulajdonság:érték párok megadása } A linkre kattintunk az egérrel a:active { tulajdonság:érték párok megadása }

Pszeudo osztályok és elemek Pszeudo osztályok :first-child arra az elemre lesz érvényes, amelyik a szülő elem első olyan gyermeke, pl.: p:first-child { color:red; } a p-t tartalmazó elemen belül az első p elemre lesz érvényes <body> <p>this is some text.</p> //ez lesz piros <p>this is some text.</p> <div> <p>this is some text.</p> //ez lesz piros <p>this is some text.</p> </div> </body> :focus ez csak IE8-tól kezdve Pszeudo elemek :first-line az adott elem első sorára lesz érvényes (csak blokkszintű elemnél) Pl.: p:first-line { color:#ff0000;} :first-letter az adott elem első betűje (csak blokkszintű elemnél) Pl.: p:first-letter {color:#ff0000;font-size:xx-large;} :before az adott elem elé tudunk tartalmat berakni Pl.: h1:before {content:url(smiley.gif);} Pl.: h1:before {content: valami szoveg ;} :after - az adott elem után tudunk tartalmat berakni Egy elem attribútumára az attr(attribútumnév) segítségével hivatkozhatunk, ezt használhatjuk a content esetében!

Egyéb lehetőségek Sablonrendszerek Ezek olyan komplett rendszerek, melyek a fejlesztők munkáját segítik. 2 része van: alkalmazás logika és a megjelenítési rész Előnye: a komponensek változása esetén a másik részhez nem vagy csak kis mértékben kell hozzányúlni A két részen dolgozó szakemberek párhuzamosan dolgozhatnak pl. Smarty Keretrendszerek Olyan kódgyűjteményt jelent, amely a fejlesztés során előforduló gyakori problémákra tartalmaz megoldást. Tipikus funkciók: adatbáziskezelés, munkamenetkezelés, felhasználókezelés, stb. Tanulása időigényes Tartalomkezelő rendszerek (CMS) Kevés(a többihez képest) szaktudást igénylő internetes alkalmazás, mely lehetővé teszi, hogy bárki összetett weboldalt birtokoljon. Legismertebbek és magyarul is elérhető CMS rendszerek: Joomla, Drupal

Képgaléria készítése (thickbox) 1. Készítsük el az oldalt, amin a galéria fog szerepelni: 2. A galériát tartalmazó táblázat beszúrása az oldalba, sorok és oszlopok számának, illetve a thumbnail-ek méretének eldöntése az oldal szélességének függvényében 3. A cellákba a thumbnail képek beszúrása (Insert/Image) 4. A thumbnail képekre a tényleges (nagy) képek hivatkozását beszúrni 5. Az oldal <head></head> részébe illesszük be a következő kódrészleteket: 1. <script type="text/javascript" src=" a jquery.js fájl útvonala"></script> 2. <script type="text/javascript" src="a thickbox.js fájl útvonala"></script> 3. <link type="text/css" rel="stylesheet" href=" a thickbox.css fájl útvonala"/> 6. Ezt követően a thumbnail képek link részéhez (<a ></a>) paraméterként írjuk be a: class="thickbox" rel="a képcsoport neve 7. images/loadinganimation.gif 8. Képeknek cím: title= kép címe paraméter megadásával

Képgaléria készítése (flash) 1. Készítsük el az oldalt, amin a galéria fog szerepelni: 2. Az oldal tartalmazó könyvtárba másoljuk be a gallery.swf és az images.xml fájlokat. 3. Az images.xml fájlba írjuk bele az egyes képek jelemzőit: kép helye, kis kép helye, kép címe, szélessége, magassága. 4. Ezt követően Dreamwaever-ben: Insert/Media/Flash, adjuk meg a gallery.swf fájl elérési útvonalát. 5. Ekkor még nem működik a teljes képernyő a galériában, a működéséhez illesszük be a következő kódrészleteket: az object paraméterei közé: <param name="allowfullscreen" value="true" /> az embed paramétereihez: allowfullscreen="true"

Videó elhelyezése az oldalon 1. Másoljuk be az swfobject.js fájlt a js mappába, és a mediaplayer.swf illetve a lejátszandó flv fájlt (vagy a hangot mp3) a video mappába 2. Azon az oldalon, ahol a videót el akarjuk helyezni, a <head></head> részbe rakjuk be a következő kódot: <script type="text/javascript" src="js/swfobject.js"></script> 3. Majd ahova a videót szeretnénk rakni, helyezzük el a következő kódot: <div id='video1'>ide rakja be a videót!</div> <script type="text/javascript"> var s1 = new SWFObject("video/mediaplayer.swf","mediaplayer","640", "500","8"); s1.addparam("allowfullscreen","true"); s1.addvariable("width","640"); s1.addvariable("height","500"); s1.addvariable("file", lejátszandó flv helye"); s1.write("video1"); </script>