Webszerkesztés. Elvek és gyakorlat. - Alapozás -

Átírás

1 Webszerkesztés Elvek és gyakorlat - Alapozás -

2 Témáink 1. CMS 2. HTML 3. CSS 4. Képfeldolgozás 5. Webalkalmazás rétegek 6. Szerver oldal 7. Kliens oldal 8. Egyéb tudnivalók

3 CMS Content Management System Tartalomkezelő rendszer

4 CMS CMS fő a kényelem Mik azok a tartalomkezelő rendszerek? Előnyeik és hátrányaik Alapvető használatuk Wordpress és Drupal Első postunk publikálása

5 CMS Miből áll egy weblap? Információk / tartalom Design / kinézet Technikai háttér a szükséges rossz A tartalomkezelő rendszerek a szükséges rosszat oldják meg helyettünk

6 CMS CMS pro és kontra Előnyök egyszerűvé és kényelmessé teszi a tartalom kezelését nem igényel (semmiféle) szakértelmet automatizált HTML előállítás rugalmasak, biztonságosak és jól támogatottak dinamikus, folyamatosan frissülő arculat Hátrányok folyamatos frissítési igény hordozhatósági gubancok

7 CMS CMS használat Bejegyzés ötlet Admin felület Mindez 2 perc alatt Bármikor szabadon és könnyen módosítható Publikálás Web Feed

8 CMS Wordpress és Drupal Mindkettő jól dokumentált Rugalmas Könnyen kezelhető rendszer A Drupal jóval összetettebb de emiatt lassabban tanulható

9 CMS Első postunk Admin menü / Bejegyzés írása Permalink (url szépítés) Tartalom Kategóriák (elsődleges csoportosítás) Címkék (másodlagos csoportosítás)

10 more

11 CMS Első postunk élesben

12 CMS Gyors infók Ha a tartalmat wordből másoljuk be, akkor tönkreteszi a beállításainkat Képek beillesztésénél figyelni kell, hogy ha túl nagy a kép akkor széteshet miatta az oldal HTML beillesztésénél figyelni kell, hogy a tagok le legyenek zárva Ékezetes betűk és szóközök használata a file nevekben fogszuvasodást okozhat

13 HTML Hypertext Markup Language Hiperszöveg jelölő nyelv

14 HTML HTML a tartalom leírása A weblapok hátterében Szemantikus oldalfelépítés DOM Leggyakrabban használt html parancsok: a, p, div, h*, li, img, table Formok A két fő elem a head és a body <html> <head></head> infók és vezérlés <body></body> tartalom </html>

15 HTML Szemantikus oldalfelépítés A HTML az információknak és azok struktúrájának leírására szolgál A design nem a HTML dolga Szóközökkel, tabulátorokkal és újsorokkal nem tagolható A működés nem a HTML dolga Nem grafikus user agentek A HTML leíró nyelv A DOM

16 HTML DOM Az egyes HTML elemek értelmezhetőek egy fa struktúraként Document Object Model Szülő-, leszármazotti viszonyok CSS-ben és JavaScript-ben egyszerűbben vagy általánosabban hivatkozhatunk az egyes elemekre

17 HTML DOM

18 HTML Leggyakrabban használt parancsok a link <a href= >Krisna</a> h* címsor <h1>a Maha-mantra</h1> img kép <img src= krisna.jpg /> li listák p bekezdés <p>krisna-völgy a Balatontól </p> table táblázatok div általános tároló <div>sokminden</div> Általános szintaxis: parancs + elemtulajdonságok

19 HTML Linkek <a href= >Krisna.hu weblap</a> <a href= target= _blank >Krisna.hu</a> <a href= bemutato.avi >Bemutató videó (20:12 / 80MB)</a> Abszolút és relatív hivatkozások

20 HTML Címsorok <h1>receptek</h1> - fő cím <h2>édességek</h2> - alcím <h3>édességek tojás nélkül</h3> <h3>védikus édességek</h3>

21 HTML Képek <img src= krisna.jpg /> <img src= alt= Krisna egy bocival width= 300 height= 500 />

22 HTML Listák <ul> <li>palacsinta</li> <li>gulab janum</li> <li>málnás srikant</li> </ul> <ol> <li>telepítés</li> <li>beállítás</li> <li>használat</li> </ol> <dl> <dt>dhóti</dt><dd>férfi ruhadarab</dd> <dt>szári</dt><dd>női ruha</dd> <dt>sikha</dt><dd>hajtincs</dd> </dl>

23 HTML Bekezdések <p> Krisna völgy egy maga nemében páratlanul szép és érdekes hely. A jelentős történelmi múlttal bíró kis somogyi falu, <a href= > Somogyvámos </a> határában található. <img src= krisna.jpg /> A 260 hektár területű Indiai Kulturális Központ és Biofarm azzal a céllal létesült, hogy az embereket hozzásegítse egy ősi, lelki kultúra értékeinek, valamint ugyanezen a szellemiségen alapuló természetes életmódnak a megismeréséhez. </p>

24 HTML Táblázatok <table> <tr> <td>dátum</td> <td>esemény</td> </tr> <tr> <td>június 13.</td> <td>június 14.</td> </tr> <tr> <td>ganga Puja</td> <td>pandava Nirjala Ekádasi</td> </tr> </table> Oldalszerkezet kialakítására ne használjuk

25 HTML Div Általános tároló Segítségével kialakíthatunk egyben kezelhető blokkokat Egy-egy ilyen blokk bármit tartalmazhat: Más blokkokat Képeket Bekezdéseket Listákat Stb Oldalszerkezet kialakítására használható

26 HTML Általános elemtulajdonságok Ezek bármely HTML elemre alkalmazhatóak class CSS osztály meghatározása id egyedi azonosító egyedinek kell lennie style in-line stílus title tip megjelenítése egér rámutatáskor <a href= goranga.html class= kiemelt id= gora title= Ide kattints! >GORANGA</a>

27 HTML Hogyan néz ki ez CMS-ben? Listák Linkek Képek Bekezdések Ezek finomítása és más elemek használata kézzel történik

28 HTML Formok Adatok fogadása másoktól Rossz fiúk Form elemek: form input egysoros adatok textarea többsoros adatok radio kiválasztó (egy) checkbox kiválasztó (több) select lenyíló submit elküldés 3. generációs formok

29 HTML Adatok fogadása másoktól A formok a legáltalánosabban használt eszközök arra, hogy a felhasználó a weblappal kommunikálni tudjon Keresés Egyéni tartalom hozzáadása És sok minden más A felhasználóktól jövő adatok egy része szerver oldalon mentésre kerül

30 HTML Rossz fiúk Sosem bízhatunk a bejövő adatokban Mindig szűrni kell XSS támadások Bot támadások Nem odaillő tartalom Moderálás

31 HTML Form elemek <form method="post" action="index.php"> <label for="nev">név:</label> <input type="text" id="nev" value="" size="10" name="nev" /> <label for="recept">recept</label> <textarea id="recept" rows="10" cols="60" name="recept"></textarea> <label for="foetel">főétel</label> <input type="radio" name="csop" id="foetel" value="foetel"> <label for="edesseg">édesség</label> <input type="radio" name="csop" id="edesseg" value="edesseg"> <label for="szuper">szuper</label> <input type="checkbox" name="min" id="szuper" value="szuper" /> <label for="pocsek">pocsék</label> <input type="checkbox" name="min" id="pocsek" value="szuper"/> <label for="edesseg">édesség</label> <select id="edesseg" name="edesseg"> <option value="1">palacsinta</option> <option value="2">gulab janum</option> <option value="3" selected="selected">málnás srikant</option> </select> <input type="submit" value="ment" name="submit"/> </form>

32 HTML Get és post Két módszer van arra, hogy a felhasználó adatokat küldjön a feldolgozó programnak: a get és a post A get esetében minden adat az url-be kerül Könyvjelzőzhető Nem alkalmas bizalmas adatok küldésére A küldendő adatok mérete limitált A post esetében az elküldött adatok láthatatlanok Csak a megcélzott feldolgozó számára érhető el Nem könyvjelzőzhető

33 HTML 3. generációs formok A formok magukban rondák és buták CSS-sel megszépíthetjük őket JavaScripttel kiokosíthatjuk őket

34 HTML HTML forrás megtekintés Minden böngészőben van rá lehetőség Áttekinthetőség szempontjából erősen eltérnek

35 HTML Feladat

36 CSS Cascading Style Sheets Lépcsőzetes stíluslapok

37 CSS CSS a mókus és a patkány Alap elgondolás Box modell Fő css utasítások Css példák Általános használat Kiválasztók: elem, osztály, id, származtatás Css nyomtatáshoz Hibakeresés A design nem minden, fő a tartalom A legszebb design is unalmas harmadszorra

38 CSS Alap elgondolás A tartalom és a megjelenítés szétválasztása Jobban átlátható, azaz könnyebben fenntartható kód Kisebb file méret Cache Szabványos Könnyebb módosítás Többféle média HTML elemekre alkalmazott formázási utasítások Ha ugyanannak az elemnek ugyanarra a tulajdonságára egynél több definíció van, akkor a későbben definiált nyer Nincsenek fix méretek, minden nyúlékony (nem nyomtatott média)

39 CSS CSS különbségek

40 CSS csszengarden.com

41 CSS Box modell Szélesség Padding Border Vizuális szélesség Margin Dokumentumbeli szélesség

42 CSS Fő css utasítások margin, padding, width background color image repeat color font type size text align decoration float border

43 CSS Általános használat A CSS lapot külön file-ban tároljuk A HTML fileban a <head> részben kell belinkelnünk <link type="text/css" rel="stylesheet" href="stiluslap.css" > Szintaktika: kiválasztó{ tulajdonság: érték; tulajdonság: érték; } Alapértelmezett értékek

44 CSS Kiválasztók Elem h1{color: red;} p{margin: 1em;} Osztály.info{color: red;}.status{background-color:red;} Id #oldalsav{float:left;} #tartalom{margin-left:200px;} Származtatás #oldalsav h3{color: #ffc;} #oldalsav > h3{color: red;}

45 CSS Speciális kiválasztók :link :visited :hover :active LoVe and HAte szabály :focus :first-letter :first-line

46 CSS Mértékegységek Értékek: px pixel, képpont em 1em a betűkészlet m-jének szélessége 16px % normál megjelenítéshez képest %-os érték ex a betűkészlet kis x-jének magassága layout font Színek: Kulcsszó alapján (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, és yellow) RGB kód #00ff00 #0f0 rgb(0, 255, 0) rgb(0%, 100%, 0%)

47 CSS CSS példák body{ font-size:1.1em; font-type: Lucida, Luxi sans, Arial, sans-serif color: black; background-color: #fff; margin: 0 1em 1em 1em; padding-left: 0.5em; } h1{ color: #600; }

48 CSS #lap{ margin: 0 auto; width:770px; } #oldalsav{ width: 170px; float:left; margin: 0; } #tartalom{ width: 600px; margin: 0; } CSS példák <div id= lap > <div id= oldalsav > </div> <div id= tartalom > </div> </div>

49 CSS CSS nyomtatáshoz A HTML változtatása nélkül teljesen vagy részben más kinézet elérése <link type="text/css" rel="stylesheet" href="stiluslap.css" media="screen"> <link type="text/css" rel="stylesheet" href="print.css" media="print"> Eléggé sekélyes a támogatás Tüntessünk el mindent amire nyomtatásban nincs szükség: navigáció, stb

50 CSS Hibakeresés Firebug bemutató IE hibáknál RR (recurring refresh) módszer border (szélesség!) background-color

51 CSS Feladat Hozzunk létre az alábbi szerkezetű oldalt (FF)

52 CSS Alap html kód <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns=" lang="hu" xml:lang="hu"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>goraharibol</title> <link rel="stylesheet" type="text/css" href="./hari.css" media="screen" /> <link rel="stylesheet" type="text/css" href="./print.css" media= print /> </head> <body> <div id="lap"> <div id="fejlec"></div> <div id= tartalom ></div>  <div id= oldalsav ></div> <div id= lablec ></div> </div> </body> </html>

53 CSS /*MODEL*/ body{ margin: 0; padding: 0; } #lap{ width: 770px; } #fejlec{ height: 200px; } #tartalom{ float: right; width: 570px; } #oldalsav{ width: 200px; margin-right: 570px; } Alap css kód #lablec{ height: 120px; } /*VIEW*/ body{ font-family: 'Lucida Grande', 'Luxi Sans', Geneva, Arial, Verdana, sans-serif; } /*teszt*/ #fejlec, #lablec{ background-color: #dcf; } #tartalom{ background-color: #78f; } #oldalsav{ background-color: #dcf; }

54 CSS Html kiegészítés a teszthez <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" lang="hu" xml:lang="hu"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>haribol</title> <link rel="stylesheet" type="text/css" href="./hari.css" media="screen" /> <link rel="stylesheet" type="text/css" href="./print.css" media= print /> </head> <body> <div id="lap"> <div id="fejlec"></div> <div id= tartalom > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean convallis. Duis nulla. Donec justo lorem, porta tincidunt, gravida eget... </div> <div id= oldalsav > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean convallis. Duis nulla. Donec justo lorem, porta tincidunt, gravida eget... </div> <div id= lablec ></div> </div> </body> </html>

55

56 CSS Css folytatás /*VIEW*/ body{ font-family: 'Lucida Grande', 'Luxi Sans', Geneva, Arial, Verdana, sans-serif; } #fejlec{ background-image: url(' } /*teszt*/ #fejlec, #lablec{ background-color: #dcf; } #tartalom{ background-color: #78f; } #oldalsav{ background-color: #dcf; }

57 CSS Navigáció HTML <div id="fejlec"> <ul id= menu > <li><a href= /gora >gora</a></li> <li><a href= /hari >hari</a></li> <li><a href= /bol >bol</a></li> </ul> </div> CSS #menu{ list-style-type: none; margin: 0; padding: px; } #menu li{ float: left; margin: 170px 1em 0 1em; } #menu li a{ text-decoration: none; color: #a66; font-weight: bold; padding: 0 0.5em; } #menu li a:hover{ border-top: 2px solid #a66; border-bottom: 2px solid #a66; }

58

59 CSS Szépségápolás Körülvevő terület A tartalom rész lyukas A szövegek összefolynak

60 CSS HTML Körülvevő terület Nincs módosítás CSS /*MODEL*/ #lap{ width: 770px; margin: 0 auto; } /*VIEW*/ body{ font-family:...; background-color: #a22; }

61 CSS A tartalom rész lyukas Vizuális összemosás elve HTML: be kell vezetni egy új div-et ami összefogja a tartalmat és az oldalsávot <div id="to"> <div id="tartalom"> </div> <div id="oldalsav">... </div> </div> CSS #to{ background-image: url(' } A teszt rész a lábléc kivételével eltávolítható

62 CSS A szövegek összefolynak #tartalom{ float: right; width: 550px; padding: 10px; } #oldalsav{ width: 180px; margin-right: 570px; padding: 10px; }

63 CSS IE 6 hibák

64 CSS <div id="tartalom"><div class="iep"> </div></div> <div id="oldalsav"><div class="iep"> </div></div> /*MODEL*/ #tartalom{ float: right; width: 570px; /*padding: 10px;*/ } #oldalsav{ width: 196px; margin-right: 570px; /*padding: 10px;*/ } /*VIEW*/.iep{padding: 1em;} IE 6

65 CSS print.css #fejlec, #menu, #oldalsav, #lablec{ display: none; }

66 Képfeldolgozás

67 Képfeldolgozás Képfeldolgozás Pixel relatív méret Képformátumok: jpg, gif, png Mekkora helyünk van? Képfeldolgozó eszközök Átméretezés Vágás Szűrés Feltöltés és belinkelés Elrendezés

68 Képfeldolgozás Képfeldolgozó eszközök Kis és egyszerű alkalmazások az alap feladatokra (Irfanview, Acdsee, stb) Photoshop Windows és Mac OS X 649 $ Gimp Linux, Windows és Mac OS X Ingyenes A szövegmanipulációs eszközei nincsenek annyira kiforrva mint a PS-é

69 Képfeldolgozás Átméretezés

70 Képfeldolgozás Levághatunk zavaró részeket Kiemelhetjük a fő témát Megváltozhat a méretarány Vágás

71 Képfeldolgozás Szűrés Szkennel képekben általában túlteng a piros Digitális képek sokszor nem elég vagy túl kontrasztosak Kevés fényben készült képek fakóak Levels, szintek

72 Képfeldolgozás Feltöltés és belinkelés Egy FTP programmal feltöltjük a szerverre Total Commander Gftp, Krusader Transmit Felhasználónév és jelszó <img src=./images/krisna.jpg /> Kis és nagybetűk különbözőek Szóköz és ékezetek nem használandók a nevekben

73 Képfeldolgozás Elrendezés Egy kifelé néző kép zavaros összképet eredményez Igazítsuk a képeket egy vonalba Próbáljunk blokkokon belül azonos méreteket alkalmazni Egy vékony keret sokat javíthat az elményen Az igazítás CSS-sel történik (float és margin)

74 Webalkalmazás rétegek

75 Rétegek Böngészőtől böngészőig Mi kell egy oldal megjelenéséhez? Lekérés Nameserver Webszerver HTML előállítás Adatbázis lekérés Szerver oldali script Tartalom küldése Böngésző CSS formázás KÉSZ JavaScript Oldal megjelenítés HTML, képek, CSS, stb

76 Rétegek Webalkalmazás rétegek Webmester területek Adatbázisok Szerver oldali script Html Böngésző Css Javascript

77 Rétegek Böngészőtől böngészőig Webmester területek Lekérés Nameserver Webszerver HTML előállítás Adatbázis lekérés Szerver oldali script Tartalom küldése Böngésző CSS formázás KÉSZ JavaScript Oldal megjelenítés HTML, képek, CSS, stb

78 Szerver oldal

79 Szerver oldal PHP pár szóban PHP Hypertext Preprocessor A legelterjedtebb szerver oldali scriptnyelv A html előállításának eszköze Dinamikus tartalom Egyéb hasznos eszközök: bevásárlókosarak, cms-ek <?php //php utasítások?> Tetszőlegesen keverhető a html kódban

80 Szerver oldal Utak a szerverhez http felhasználói admin felületek https ftp ssh A biztonság minden körülményben fontos szempont

81 Szerver oldal Domain kezelés Domain regisztráció: hu és a többiek Nameserverek Tárhely (webszerver + adatbázis szerver) Adminisztrációs felület FTP elérés Támogatás

82 Szerver oldal Szerver adminisztráció Csak olyasmihez nyúljunk amiről tudjuk biztosan, hogy mi az Adatbázis kezelés: létrehozás, mentés Aldomainek php.ini.htaccess Document root

83 Kliens oldal

84 Kliens oldal Kliens oldal Böngésző típusok, verziók Monitorok, felbontások JavaScript Speciális kliensek: botok, felolvasók

85 Kliens oldal Böngészők Káosz 1 Internet Explorer 6, 7 (Win) 50% Firefox beta (Lin, Win, Mac) 40% Opera 7 9 (Lin, Win, Mac) Safari (Mac) Mozilla család többi tagja (Lin/Win/Mac) És a többiek 5%

86 Kliens oldal Monitorok és felbontások Káosz * * 768 És bármi más Méretek: Monitor Böngésző Hasznos felület Tartalmi rész

87 Kliens oldal JavaScript Káosz 3 A különböző böngészőknek sokszor jelentősen eltér a JavaScript megvalósításuk JS keretrendszerek Prototype + scriptaculous Dojo jquery

88 Kliens oldal Speciális kliensek Káosz 4 Csökkent látóképességű, színtévesztő userek Felolvasó szoftverek Nyomtatók Mobiltelefonok És ezerféle másik

89 Kliens oldal Kliens oldal összegzés A káosz Nem garantálhatjuk A betűtípust A színeket A méreteket Amit garantálnunk kell A látogatók 95%-a használható oldalt kapjon Ebben segítenek a szabványok

90 Egyéb tudnivalók

91 Egyebek Egyéb tudnivalók Szabványok, karakterkódolások, DTD-k, html head, favicon, stb Első számú közellenség az IE Kettes számú közellenség a hackerek Keresőoptimalizálás Levelezési listák, hírcsoportok, RSS Google Mi kell egy jól működő weblaphoz? Alap fejlesztői környezet életre keltése Ha baj van: weblabor.hu, google és a többiek Ajax Editorok Statisztikák

92 Egyebek DTD A html dokumentumok legelső sora a DTD definíció Document Type Definition <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// EN" " A transitional nem annyira szigorú, könnyebb szabványos html-t készíteni A strict-tel több mindenre kell odafigyelni Az IE egy strict-nek jelölt hibás html-t szabványosabban jelenít meg mint egy transitionalnak jelölt hibátlant

93 Egyebek Szabványok HTML 3.2 és 4.01 XHTML 1.0 és 1.1 CSS 1, néhol 2, sehol 3 JavaScript 1.5 és 1.6 RSS és Atom szabványok WCAG 1.0 és 2.0 Döntő többségben ezek csupán ajánlások, ha ezektől eltérünk többé-kevésbé működőképes, elérhető marad a weblap Ez jó mert a kisebb hibák nem teszik tönkre az egész weblapot És rossz mert rossz szokássá alakulhat a szabványok figyelmen kívül hagyása, és ezzel az ördögi kör bezárul

94 Egyebek Karakterkódolások Magyar ékezetek: iso és utf-8 A file-ok milyen karakterkódolással vannak elmentve A html head részben milyen karakterkészletet határozunk meg <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Az adatbázisra, tábláira és oszlopaira milyen kódolás van definiálva Az adatbázis kapcsolatra milyen kódolást állítunk be A webszerver milyen headert küld ki Content-Type: text/html; charset=utf-8

95 Egyebek Első számú közellenség: IE 6 és 7 Súlyos CSS és JavaScript bugok A boksz modell hibás megvalósítása Elemek középre rendezése Nem használható tanuláshoz (sem) Microsoft Script Debugger Rrd gyorsteszt

96 Kettes számú közellenség a hackerek Egyebek gyűjtögetés Hacker programok Hackerek Crackerek CMS Egy nyílt forráskódú CMS-ben a hibák azonnal napvilágra kerülnek, frissíteni kell Egy zárt kódú CMS-t általában kisebb csapat fejleszt több esély van arra, hogy hibák vannak benne Kliens és szerver oldali támadások Samy (18 / 1M)

97 Egyebek Keresőoptimalizálás A google nagy úr Szemantikus oldalfelépítés A tartalom elsődlegessége a formával szemben Kulcsszavak Domain, url Külső linkek A google vak Ingyenesek és fizetősek

98 Egyebek Visszatérő vendégek A visszatérő látogatók érdeklődnek a webhely témája iránt Kapcsolat formák Feedek (RSS és Atom) Hírlevelek Levelezési listák Fórumok Tagok Hozzászólások A tartalom elsődlegessége a formával szemben

99 Egyebek Google Keresés Az internet rendezetlen adathalmaz, az eligazodásban a keresők segítenek A tartalom elsődlegessége a formával szemben Direkt keresés site:krisna.hu Analytics Webmester eszközök AdSence

100 Mi kell egy jól működő weblaphoz? Egyebek 1. Célmeghatározás - mit akarunk elérni? 2. Célközönség - kiket akarunk elérni? 3. Tartalom - stílus 4. Szolgáltatások 5. Megismerhetőség Navigáció Vizuális információk 6. Pénz

101 Egyebek Célmeghatározás, célközönség Mi az általános elv? Mi a weblap témája? Mit akarunk elérni? Mit várunk el? Kik a megcélzott látogatók? Tegezünk vagy magázunk? Mi a stílus?

102 Egyebek Tartalom, szolgáltatások Teljes nyitottság Teljes zártság Rendszeresség A tartalomnak mindig a célt kell szolgálnia Milyen szolgáltatásaink vannak? Kik számára állnak nyitva?

103 Egyebek Megismerhetőség Navigáció Egyszintű menü Maximum 6-8 elemmel Könnyen áttekinthető, egyértelmű Vizuális információk Jelezni kell, a szolgáltatásokat, főleg ha valami újdonságot vezetünk be A usert mindig tudatni kell róla ha a háttérben valami történik Semmi sem egyértelmű vagy magától érthetődő

104 Egyebek A pénz A tárhely pénzbe kerül A minőségi támogatás pénzbe kerül A külföldiek jobbak mint az itthoniak A programozó pénzbe kerül A design pénzbe kerül A hirdetés pénzbe kerül Ha tiszta a cél, jó a szolgáltatás és a felhasználói támogatás akkor sokszorosan megtérül. Google, Flickr, MySpace, stb

105 Egyebek Kinek mekkora a szerepe? 4% 6% Tartalom Program Design 90%

106 Alap fejlesztői környezet életre keltése Egyebek Apache, php, mysql Linux alatt csomagkezelővel Mac OS X alatt apache és php telepítve van, a MySQL macerás lehet Windows alatt XAMPP Firebug

107 Egyebek AJAX Asynchronous JavaScript and XML Az oldal újratöltése nélkül az oldal bármely részletében fogadhatunk adatokat a szervertől Nem darabolódik szét az adatfolyam Google Reader Teljes asztali alkalmazás szerű webes alkalmazásokat építhetünk vele

108 Egyebek Ingyenes editorok Lin/Mac/Win Komodo Edit Eclipse Linux Quanta Bluefish Vim, mcedit, gedit, kedit, gvim stb Windows PSPad Notepad++ Mac OS X Xcode

109 Egyebek Lin/Mac/Win Komodo Ide $ Zend Studio $ Linux? Windows Fizetős editorok Dreamweaver $ Mac OS X Textmate 50 $

110 Egyebek Statisztikák Google Analytics A statisztikák segítenek feltérképezni A látogatók által használt kliens oldali elemeket Leggyakrabban vagy legkevésbé látogatott oldalakat Forgalom forrásait Az ebből kapott információk alapján módosítani tudunk az oldalon, hogy még optimálisabbak legyenek

111 Egyebek VÉGE