Webszerkesztés Elvek és gyakorlat - Alapozás -
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
CMS Content Management System Tartalomkezelő rendszer
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
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
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
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
CMS Wordpress és Drupal Mindkettő jól dokumentált Rugalmas Könnyen kezelhető rendszer A Drupal jóval összetettebb de emiatt lassabban tanulható
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)
more
CMS Első postunk élesben
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
HTML Hypertext Markup Language Hiperszöveg jelölő nyelv
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>
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
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
HTML DOM
HTML Leggyakrabban használt parancsok a link <a href= http://krisna.hu >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
HTML Linkek <a href= http://krisna.hu >Krisna.hu weblap</a> <a href= http://krisna.hu target= _blank >Krisna.hu</a> <a href= bemutato.avi >Bemutató videó (20:12 / 80MB)</a> Abszolút és relatív hivatkozások
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>
HTML Képek <img src= krisna.jpg /> <img src= http://sehol.se/img/krisna.jpg alt= Krisna egy bocival width= 300 height= 500 />
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>
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= http://somogy.hu/somogyvamos > 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>
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
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ó
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>
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
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
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
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
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>
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ő
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
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
HTML Feladat
CSS Cascading Style Sheets Lépcsőzetes stíluslapok
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
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)
CSS CSS különbségek
CSS csszengarden.com
CSS Box modell Szélesség Padding Border Vizuális szélesség Margin Dokumentumbeli szélesség
CSS Fő css utasítások margin, padding, width background color image repeat color font type size text align decoration float border
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
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;}
CSS Speciális kiválasztók :link :visited :hover :active LoVe and HAte szabály :focus :first-letter :first-line
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%)
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; }
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>
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
CSS Hibakeresés Firebug bemutató IE hibáknál RR (recurring refresh) módszer border (szélesség!) background-color
CSS Feladat Hozzunk létre az alábbi szerkezetű oldalt (FF)
CSS Alap html kód <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/ xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" 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> <!--lehetne az oldalsáv is elől, de így kedvezőbb--> <div id= oldalsav ></div> <div id= lablec ></div> </div> </body> </html>
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; }
CSS Html kiegészítés a teszthez <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" 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>
CSS Css folytatás /*VIEW*/ body{ font-family: 'Lucida Grande', 'Luxi Sans', Geneva, Arial, Verdana, sans-serif; } #fejlec{ background-image: url('http://web.1108.cc/img/fejlec.jpg'); } /*teszt*/ #fejlec, #lablec{ background-color: #dcf; } #tartalom{ background-color: #78f; } #oldalsav{ background-color: #dcf; }
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: 0 0 0 500px; } #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; }
CSS Szépségápolás Körülvevő terület A tartalom rész lyukas A szövegek összefolynak
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; }
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('http://web.1108.cc/img/hatter.jpg'); } A teszt rész a lábléc kivételével eltávolítható
CSS A szövegek összefolynak #tartalom{ float: right; width: 550px; padding: 10px; } #oldalsav{ width: 180px; margin-right: 570px; padding: 10px; }
CSS IE 6 hibák
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
CSS print.css #fejlec, #menu, #oldalsav, #lablec{ display: none; }
Képfeldolgozás
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
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-é
Képfeldolgozás Átméretezés
Képfeldolgozás Levághatunk zavaró részeket Kiemelhetjük a fő témát Megváltozhat a méretarány Vágás
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
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
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)
Webalkalmazás rétegek
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 http://krisnavolgy.hu HTML, képek, CSS, stb
Rétegek Webalkalmazás rétegek Webmester területek Adatbázisok Szerver oldali script Html Böngésző Css Javascript
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 http://krisnavolgy.hu HTML, képek, CSS, stb
Szerver oldal
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
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
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
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
Kliens oldal
Kliens oldal Kliens oldal Böngésző típusok, verziók Monitorok, felbontások JavaScript Speciális kliensek: botok, felolvasók
Kliens oldal Böngészők Káosz 1 Internet Explorer 6, 7 (Win) 50% Firefox 1.4 3 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%
Kliens oldal Monitorok és felbontások Káosz 2 800 * 600 1024 * 768 És bármi más Méretek: Monitor Böngésző Hasznos felület Tartalmi rész
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
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
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
Egyéb tudnivalók
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
Egyebek DTD A html dokumentumok legelső sora a DTD definíció Document Type Definition <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> 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
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
Egyebek Karakterkódolások Magyar ékezetek: iso-8859-2 é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
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
Kettes számú közellenség a hackerek Egyebek E-mail 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)
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
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
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
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
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?
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?
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ő
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
Egyebek Kinek mekkora a szerepe? 4% 6% Tartalom Program Design 90%
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
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 http://gouranga.tv Teljes asztali alkalmazás szerű webes alkalmazásokat építhetünk vele http://what2do.googlecode.com
Egyebek Ingyenes editorok Lin/Mac/Win Komodo Edit http://activestate.com Eclipse http://eclipse.org Linux Quanta http://quanta.kdewebdev.org/ Bluefish http://bluefish.openoffice.nl/ Vim, mcedit, gedit, kedit, gvim stb Windows PSPad http://pspad.com Notepad++ http://notepad-plus.sourceforge.net Mac OS X Xcode http://developer.apple.com/tools/xcode/
Egyebek Lin/Mac/Win Komodo Ide http://activestate.com 295 $ Zend Studio http://www.zend.com 399 $ Linux? Windows Fizetős editorok Dreamweaver http://www.adobe.com/ 399 $ Mac OS X Textmate http://macromates.com 50 $
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
Egyebek VÉGE