Web programozás I. tantárgyi információk
Nagy Gusztáv honlap: http://nagygusztav.hu jegyzet e-mail: nagy.gusztav@gamf.kefo.hu tantárgy honlapja: http://webprog.hu/ tantárgyi hírek (nem ETR kurzusfórum!) 2
Tantárgykiírás elérhető körbe adom GAMF honlapon 3
Számonkérés egy dolgozat az utolsó héten sok rövid kérdés (hasonlóak, mint a jegyzetben) 4
Tantárgyi programleírás szerver környezet kialakítása, a webfejlesztés alapjai HTML, XHTML, CSS JavaScript PHP adatbázis alapú alkalmazások sablonrendszerek alkalmazása 5
Jegyzet PDF jegyzet, kb. 250 oldal 0.7-es verzió ellenőrző kérdések és gyakorló feladatok a dolgozatra készüléshez (nem teljes) Creative Commons Nevezd meg! - Ne add el! 2.5 Magyarország http://nagygusztav.hu 6
Kérdések? 7
Fejlesztőkörnyezet kialakítása [a félév második felénél nélkülözhetetlen] 8
Szerver operációs rendszer 1 Linux a legtöbb disztribúció alapból tudja (kivéve elsősorban desktop, pl. UHU) régi gépre is fel lehet tenni (korábbi disztribúció vagy direkt ilyen disztribúció) Virtual PC vagy VMWare alatt is elfut BSD kevesen ismerik, a megszállottak dícsérik (stabil, biztonságos) 9
Szerver operációs rendszer 2 Windows élesben ritkán találkozni vele otthoni tanulásra a legkézenfekvőbb az állománynevekre, elérési utakra nagyon figyelni kell 10
Szerver alkalmazások Integrált telepítő csomagok (nagyon könnyű telepíteni, de ha nem megy, nem sok mindent lehet tenni) külön-külön bütykölés (nehezebb a kezdet, de a hibaelhárításnál van remény) 11
XAMPP for Windows 1.7.3. alap verzió Apache 2.2.14 + OpenSSL 0.9.8l, MySQL 5.1.41 + PBXT engine, PHP 5.3.1, phpmyadmin 3.2.4, Perl 5.10.1, FileZilla FTP Server 0.9.33, Mercury Mail Transport System 4.72 van Lite változat vannak további Plug-in-ek 12
Fejlesztőeszközök Ízlés, megszokás kérdése Jegyzettömb, Context, Notepad++, Komodo Edit Word, FrontPage,... 13
Grafikus programok alapvetően a dizájn darabolása Mentés GIF, JPG és PNG formátumban. Átméretezés Kivágás Korrekciók Szűrés pl. Paint.NET (+Honosító Műhely) 14
Web alapismeretek 15
Alapfogalmak webböngésző böngészőmotor webszerver webtárhely HTTP protokoll (HTTPFox) FTP protokoll webcím (URL) Munkamenet (session) 16
Alapfogalmak 17
HTTP protokoll Kérés (request) GET /images/logo.gif HTTP/1.1 Accept: text/plain,text/html Accept-Language: en Metódusok HEAD GET POST PUT DELETE TRACE OPTIONS CONNECT Válasz (response) HTTP/1.1 200 OK 18
Státusz kódok 1xx: Informatív Kérés megkapva. 2xx: Siker A kérés megérkezett; értelmezve, elfogadva. 3xx: Átirányítás A kérés megválaszolásához további műveletre van szükség. 4xx: Kliens hiba A kérés szintaktikailag hibás vagy nem teljesíthető. 5xx: Szerver hiba A szerver nem tudta teljesíteni az egyébként helyes kérést. 19
Webdizájn (vallásháborúk) Nyúló vagy fix elrendezés Flash Keretek CSS vagy táblázatok A vakbarát honlap A szép honlap és a működő honlap SEO hitek és tévhitek 20
A web szabványai a webfejlesztő nem (kellene hogy) anarchista (legyen) a szabványoknak céljuk van, nem köti meg a kezünket Microsoft nem törekszik a szabványkövetésre (visszafele sült el, lsd. FF sztori) az Explorer mostanában belehúzott 21
World Wide Web Consortium (W3C) Tim Berners-Lee, 1994 óta célja, hogy a webből a lehető legtöbbet lehessen kihozni tevékenysége a web szabványok kidolgozása tagjai: IBM, Microsoft, America Online, Apple, Adobe, Macromedia, Sun Microsystems 22
Validátorok honlapunk szabványossága (szabványnak való megfelelése) tesztelhető a hibák mellett sokszor segítséget is kapunk w3c.org-on további infók 23
HTML 24
HTML Hyper Text Markup Language szövegállomány tagokkal html kiterjesztés 25
Minimális oldal [DEMO] html - teljes oldal head - fejrész body - törzs b - félkövér Tesztelés: böngészőben közvetlenül, fájlként webszerveren keresztül 26
Tagok a < és > írásjelek veszik körül (lsd. Context) a tagok jelölik ki a HTML elemeket általában párban vannak pár első tagja a kezdő, a második a záró tag a tartalom (szöveg és további tagok) a kezdő és a záró tag között helyezkedik el a HTML tagok kis-, és nagybetűvel is írhatók 27
Tulajdonságok (attribútumok, jellemzők) járulékos információk az elem egészére nézve mindig a kezdő tag tartalmazza használjunk mindig idézőjelet [DEMO: img+src,alt] 28
Címek 6 szintet alkalmazhatunk a címek hierarchiáját érdemes betartani használjuk a címeket (!) [DEMO] 29
Bekezdés folyó szöveget bekezdésekre érdemes tagolni nem közbetlenül a body-ba tenni (!) (majdnem) csak a body tartalmazhatja az elválasztó karakterek nem úgy működnek, mint várhatnánk [DEMO] 30
Sortörés az ENTER nem jó \n sem br igen (bár legtöbbször jobb megoldás is van 31
Hogy nézzük meg egy oldal HTML kódját? Nézet menü, majd Forrás, vagy Oldal forrása Tidy HTML Validator View Source Chart FireBug [DEMO] 32
Formázás a formázást többnyire nem HTML-ből végezzük (b), (big), em, (i), (small), strong, sub, sup, ins, del, (font) inkább szemantikusságra érdemes törekedni speciálisabb tagok: code, (pre), abbr, acronym, address, blockquote, q, cite, dfn [DEMO] 33
CSS 34
Mi a CSS? Cascading Style Sheets: egymásba ágyazható, több lépcsős stíluslapok a HTML tartalom vizuális megjelenítését befolyásolja könnyen szét lehet választani a tartalmat és a dizájnt külön állomány css kiterjesztéssel lehet több stíluslap is eredetileg a Microsoft, majd W3C 35
Kedvcsináló http://www.csszengarden.com/tr/magyar/ 36
37
38
39
Növekvő priorinás több stílus-információ is hatással lehet egy elemre a böngésző alapbeállítása külső stíluslap head elemben definiált stílus soron belüli stílus 40
A CSS nyelvtana kiválasztó {tulajdonság: érték} a { color:#df7000; } idézőjel: többféle tulajdonság: p {font-family: "sans serif"} body { text-align:center; font-family:verdana; } több kiválasztó: #pagewrapper,#page { width:760px; margin:auto; text-align:left; display:block; } 41
Osztály kiválasztó.bcol { color:#fb9622; } p.bcol { color:#fb4422; } p { color:#fb8822; } 42
Azonosító alapú kiválasztás #left { width:25%; float:left; margin:10px; } id="left" 43
Megjegyzés csak a /* */ használható /* CSS Document */ 44