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 infók és vezérlés tartalom
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
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, Somogyvámos határában található. 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.
HTML
Táblázatok
Dátum
Esemény
Június 13.
Június 14.
Ganga Puja
Pandava Nirjala Ekádasi
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: ●
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
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
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)
Általános használat A CSS lapot külön file-ban tároljuk A HTML fileban a részben kell belinkelnünk 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)
A HTML változtatása nélkül teljesen vagy részben más kinézet elérése 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)
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ó
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 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
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
