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

Web programozás I.

tantárgyi információk

Nagy Gusztáv ●

●

honlap: –

http://nagygusztav.hu

–

jegyzet

e-mail: –

●

[email protected]

tantárgy honlapja: –

http://webprog.hu/

–

tantárgyi hírek (nem ETR kurzusfórum!)

Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, tavaszi félév

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

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

Recommend Documents