Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév1 Web programozás I., Web programozás tantárgyi információk

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév2 Nagy Gusztáv ● honlap: – jegyzet (hamarosam), – tantárgyi hírek (nem ETR kurzusfórum!) – Webes tartalomkezelő rendszerek (Drupal, CMS) ● fogadóóra: – kedd – szerda

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév3 Tantárgykiírás elérhető ● körbe adom ● GAMF honlapon

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév4 Számonkérés ● Web programozás I. – két dolgozat (8. előadáson és 12. gyakorlaton) – gyakorlati jegy ● Web programozás: vizsga – egy dolgozat (8. előadáson) – vizsgára bocsájtás: a dolgozat 50%-os teljesítése – jegymegajánlás: a dolgozat 75%-os teljesítése ● lesz plusz pont szerzési lehetőség (hamarosan)

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév5 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

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév6 Jegyzet ● PDF jegyzet, kb. 250 oldal ● hamarosan 0.7-es verzió ● ellenőrző kérdések és gyakorló feladatok a dolgozatra készüléshez (kissé hiányos) ● Creative Commons Nevezd meg! - Ne add el! 2.5 Magyarország ●

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév7 Kérdések?

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév8 Fejlesztőkörnyezet kialakítása [a félév második felénél nélkülözhetetlen]

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév9 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) ● Windows

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév10 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

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév11 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)

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév12 XAMPP for Windows ● Apache 2.2.2, MySQL , PHP PHP pl1 + PEAR, PHP-Switch win32 1.0, XAMPP Control Version 2.3, XAMPP Security 1.0, SQLite , OpenSSL 0.9.8b, phpMyAdmin 2.8.1, ADOdb 4.80, Mercury Mail Transport System v4.01b, FileZilla FTP Server c, Webalizer , Zend Optimizer ● van Lite változat ● vannak további Plug-in-ek

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév13 Fejlesztőeszközök ● Ízlés, megszokás kérdése ● Jegyzettömb, Context, Notepad++, Komodo Edit ● Word, FrontPage,...

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév14 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)

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév15 Web alapismeretek

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév16 Alapfogalmak ● webböngésző ● böngészőmotor ● webszerver ● webtárhely ● HTTP protokoll (HTTPFox) ● FTP protokoll ● webcím (URL) ● Munkamenet (session)

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév17 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/ OK

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév18 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.

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév19 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

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév20 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 lassan kullog ● menni fog a következő verzión: IE7, IE8, FF2, FF3, Chroome...?

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév21 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

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév22 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

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév23 HTML

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév24 HTML ● Hyper Text Markup Language ● szövegállomány ● tagokkal ● html kiterjesztés

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév25 Minimális oldal ● [DEMO] ● html - teljes oldal ● head - fejrész ● body - törzs ● b - félkövér ● Tesztelés: böngészőben

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév26 Tagok ● a í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

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév27 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]

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév28 Címek ● 6 szintet alkalmazhatunk ● a címek hierarchiáját érdemes betartani ● használjuk a címeket (!) ● [DEMO]

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév29 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]

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév30 Sortörés ● az ENTER nem jó ● \n sem ● br igen (bár legtöbbször jobb megoldás is van

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév31 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]

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév32 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]

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév33 CSS

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév34 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

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév35 Kedvcsináló ●

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév36 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

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév37 A CSS nyelvtana ● kiválasztó {tulajdonság: érték} a { color:#DF7000; } ● idézőjel: – p {font-family: "sans serif"} ● többféle tulajdonság: – body { text-align:center; font-family:verdana; } ● több kiválasztó: – #pagewrapper,#page { width:760px; margin:auto; text-align:left; display:block; }

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév38 Osztály kiválasztó ●.bcol { color:#fb9622; } ● p.bcol { color:#fb4422; } ● p { color:#fb8822; }

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév39 Azonosító alapú kiválasztás ● #left { width:25%; float:left; margin:10px; } ● id="left"

Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév40 Megjegyzés ● csak a /* */ használható /* CSS Document */