Web programozás I. tantárgyi információk

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "Web programozás I. tantárgyi információk"

Lajos Varga
8 évvel ezelőtt
Látták:

1 Web programozás I. tantárgyi információk

2 Nagy Gusztáv honlap: jegyzet tantárgy honlapja: tantárgyi hírek (nem ETR kurzusfórum!) 2

3 Tantárgykiírás elérhető körbe adom GAMF honlapon 3

4 Számonkérés egy dolgozat az utolsó héten sok rövid kérdés (hasonlóak, mint a jegyzetben) 4

5 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

6 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 6

7 Kérdések? 7

8 Fejlesztőkörnyezet kialakítása [a félév második felénél nélkülözhetetlen] 8

9 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

UHU) régi gépre is fel lehet tenni (korábbi disztribúció vagy direkt ilyen

10 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

11 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

sok mindent lehet tenni) külön-külön bütykölés

12 XAMPP for Windows alap verzió Apache OpenSSL 0.9.8l, MySQL PBXT engine, PHP 5.3.1, phpmyadmin 3.2.4, Perl , FileZilla FTP Server , Mercury Mail Transport System 4.72 van Lite változat vannak további Plug-in-ek 12

4, Perl 5.10.1, FileZilla FTP Server 0.9.

13 Fejlesztőeszközök Ízlés, megszokás kérdése Jegyzettömb, Context, Notepad++, Komodo Edit Word, FrontPage,... 13

14 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

15 Web alapismeretek 15

16 Alapfogalmak webböngésző böngészőmotor webszerver webtárhely HTTP protokoll (HTTPFox) FTP protokoll webcím (URL) Munkamenet (session) 16

17 Alapfogalmak 17

18 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 18

19 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

3xx: Átirányítás A kérés megválaszolásához további műveletre van szükség.

20 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

21 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

22 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

23 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

24 HTML 24

25 HTML Hyper Text Markup Language szövegállomány tagokkal html kiterjesztés 25

26 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

27 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

28 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

29 Címek 6 szintet alkalmazhatunk a címek hierarchiáját érdemes betartani használjuk a címeket (!) [DEMO] 29

30 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

31 Sortörés az ENTER nem jó \n sem br igen (bár legtöbbször jobb megoldás is van 31

32 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

33 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

34 CSS 34

35 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

36 Kedvcsináló 36

37 37

38 38

39 39

40 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

41 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

42 Osztály kiválasztó.bcol { color:#fb9622; } p.bcol { color:#fb4422; } p { color:#fb8822; } 42

43 Azonosító alapú kiválasztás #left { width:25%; float:left; margin:10px; } id="left" 43

44 Megjegyzés csak a /* */ használható /* CSS Document */ 44

Hasonló dokumentumok

Olyan eszközre van szükség, amelynél a webszerkesztés folyamatát a fejlesztő, nem pedig a program vezérli

Fejlesztőeszközök Olyan eszközre van szükség, amelynél a webszerkesztés folyamatát a fejlesztő, nem pedig a program vezérli Szerkesztők 2 alapvető szolgáltatása: kódszínezés, kódkiegészítés Alapvetően