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

Méret: px
Mutatás kezdődik a ... oldaltól:

Download "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" "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>

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

55

56 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; }

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('http://web.1108.cc/img/hatter.jpg'); } 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" "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

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 295 $ Zend Studio 399 $ Linux? Windows Fizetős editorok Dreamweaver 399 $ 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

Web programozás. 3. előadás

Web programozás. 3. előadás Web programozás 3. előadás Űrlapok form label for input type select, option value szöveges mező: text textarea jelszó: password rádiógomb: radio jelölőnégyzet: checkbox küldés gomb: submit Web programozás

Részletesebben

(statikus) HTML (XHTML) oldalak, stíluslapok

(statikus) HTML (XHTML) oldalak, stíluslapok (statikus) HTML (XHTML) oldalak, stíluslapok Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok CSS Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok

Részletesebben

Webszerkesztés stílusosan. Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján

Webszerkesztés stílusosan. Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján Webszerkesztés stílusosan Készítette: Csécsy László Virgina DeBolt hasonló c. könyve alapján Tartalom HTML és CSS HTML vs. XHTML, CSS mi micsoda? XHTML nyelvtan: címkék, egyéb követelmények CSS nyelvtan:

Részletesebben

2008/09 ősz 1. Word / Excel 2. Solver 3. ZH 4. Windows 5. Windows 6. ZH 7. HTML - CSS 8. HTML - CSS 9. ZH 10. Adatszerkezetek, változók, tömbök 11. Számábrázolási kérdések 12. ZH 13. Pótlás Alapfogalmak

Részletesebben

Memória játék. Felhasználói dokumentáció

Memória játék. Felhasználói dokumentáció Memória játék Felhasználói dokumentáció Feladat: JavaScript segítségével, olyan programot írni, mely összekeveri a lapokat, majd a felhasználónak kell párosítani. HTML oldalba ágyazva és CSS-el formázva.

Részletesebben

Lenyíló menük készítése. Összetett programok készítése

Lenyíló menük készítése. Összetett programok készítése Lenyíló menük készítése Összetett programok készítése webprogramozó Akkor érdemes használni, ha a webhelyünk túl sok lehet séget tartalmaz ahhoz, hogy azok kényelmesen elférjenek egy oldalon. Pár oldal

Részletesebben

HTML ÉS PHP AZ ALAPOKTÓL

HTML ÉS PHP AZ ALAPOKTÓL 1 HTML ÉS PHP AZ ALAPOKTÓL Bevezetés a HTML és a CSS világába Before we start 2 A kurzus blogja: http://bcecid.net/tag/php-kurzus-2011-12-tavasz A példaprogramok innen lesznek letölthetők Könyvek HTML

Részletesebben

5-ös lottó játék. Felhasználói dokumentáció

5-ös lottó játék. Felhasználói dokumentáció 5-ös lottó játék Felhasználói dokumentáció Feladat: JavaScript és CSS segítségével 5-ös lottó játék készítése. Futtatási környezet: A http://10.0.0.101/~szabby/ linkre kattintva megjelenik az oldal. Az

Részletesebben

WEBSZERKESZTÉS ELMÉLETI VIZSGAKÉRDÉSEK

WEBSZERKESZTÉS ELMÉLETI VIZSGAKÉRDÉSEK ECDL Webszerkesztés, syllabus 2.0 WEBSZERKESZTÉS ELMÉLETI VIZSGAKÉRDÉSEK 1. Mi az FTP? a) Az FTP a multimédiás dokumentumok leíró nyelve. b) Az FTP a weboldalon lévő kattintható elem, amellyel egy másik

Részletesebben

Internet, Az internet főbb szolgáltatásai web keresőszolgáltatásokkal Keresőrendszerek: Kulcsszavas 2) Egyéb keresők: Metakeresők gyűjtőkörű keresők

Internet, Az internet főbb szolgáltatásai web keresőszolgáltatásokkal Keresőrendszerek: Kulcsszavas 2) Egyéb keresők: Metakeresők gyűjtőkörű keresők Web alapok Az Internet, számítógépes hálózatok világhálózata, amely behálózza az egész földet. Az internet főbb szolgáltatásai: web (www, alapja a kliens/szerver modell) elektronikus levelezés (e-mail)

Részletesebben

1. fejezet Bevezetés a web programozásába (Balássy György munkája)... 11 Az internet működése... 11

1. fejezet Bevezetés a web programozásába (Balássy György munkája)... 11 Az internet működése... 11 Tartalomjegyzék 1. fejezet Bevezetés a web programozásába (Balássy György munkája)... 11 Az internet működése... 11 Géptől gépig... 11 Számok a gépeknek... 13 Nevek az embereknek... 14 Programok egymás

Részletesebben

Az image objektum. Az image eseménykezel i. Képek el zetes betöltése. Feladat. Váltóképek készítése

Az image objektum. Az image eseménykezel i. Képek el zetes betöltése. Feladat. Váltóképek készítése Az image objektum Multimédiás alkalmazások készítése JavaScript segítségével webprogramozó a document leszármazottja az images tömbön keresztül érhet el complete : teljesen letölt dött-e? height, width

Részletesebben

(statikus) HTML (XHTML) oldalak, stíluslapok

(statikus) HTML (XHTML) oldalak, stíluslapok (statikus) HTML (XHTML) oldalak, stíluslapok Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok CSS Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok

Részletesebben

WEB TECHNOLÓGIÁK 2.ELŐADÁS

WEB TECHNOLÓGIÁK 2.ELŐADÁS Dr. Pál László, Sapientia EMTE, Csíkszereda WEB TECHNOLÓGIÁK 2.ELŐADÁS 2014-2015 tavasz A HTML nyelv alapjai Mi a HTML? A HTML (angolul: HyperText Markup Language=hiperszöveges jelölőnyelv) Leíró nyelv,

Részletesebben

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

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

Részletesebben

Tartalom. Alapelemek. Célok. Eszközök. Szerkezet. Alapelvek. Prezentáció. Folyamat

Tartalom. Alapelemek. Célok. Eszközök. Szerkezet. Alapelvek. Prezentáció. Folyamat WEBLAPFEJLESZTÉS Tartalom Alapelemek Célok Eszközök Szerkezet Alapelvek Folyamat Prezentáció Célok Weboldalakkal szemben állított követelmények: - vonzó, egyszerű, igényes, harmonikus színvilág - felhasználóbarát

Részletesebben

HTML alapok 1. Minimális HTML file: cím ... Formátum parancsok:

HTML alapok 1. Minimális HTML file: <HTML> <HEAD> <TITLE> cím </TITLE> </HEAD> <BODY>... </BODY> </HTML> Formátum parancsok: HTML alapok 1 Minimális HTML file: cím ... Formátum parancsok: dőlt szöveg félkövér aláhúzott új sor vízszintes vonal

Részletesebben

Webshop készítése ASP.NET 3.5 ben I.

Webshop készítése ASP.NET 3.5 ben I. Webshop készítése ASP.NET 3.5 ben I. - Portál kialakíása - Mesteroldal létrehozása - Témák létrehozása Site létrehozása 1. File / New Web site 2. A Template k közül válasszuk az ASP.NEt et, nyelvnek (Language)

Részletesebben

HTML ALAPOK. Abonyi-Tóth Andor, ELTE IK

HTML ALAPOK. Abonyi-Tóth Andor, ELTE IK HTML ALAPOK Abonyi-Tóth Andor, ELTE IK Fontos szabványok HTTP protokoll Protokoll = szabályrendszer HTTP HyperText Transfer Protocol (Hiperszöveg Átviteli Protokoll) a webböngésző (kliens) adatokat kérhet

Részletesebben

Internet alkamazások Készítette: Methos L. Müller Készült: 2010

Internet alkamazások Készítette: Methos L. Müller Készült: 2010 Internet alkamazások Készítette: Methos L. Müller Készült: 2010 Tartalomjegyzék - Tartalomkezelő rendszerek Miért jó a CMS alapú website? CMS rendszerek - Mi szükséges ezen CMS-ekhez? - Információ építészet

Részletesebben

Készítette: Gál Tamás. A tananyag programozott változata itt érhető el: Webfejlesztés

Készítette: Gál Tamás. A tananyag programozott változata itt érhető el: Webfejlesztés HLTML 5 formok gyorstalpaló Készítette: Gál Tamás A tananyag programozott változata itt érhető el: Webfejlesztés (http://webfejlesztes.gtportal.eu/) Creative Commons Nevezd meg!-ne add el!-így add tovább!

Részletesebben

BEVEZETÉS A WEBLAPFEJLESZTÉSBE. Kvaszingerné Prantner Csilla, EKF

BEVEZETÉS A WEBLAPFEJLESZTÉSBE. Kvaszingerné Prantner Csilla, EKF BEVEZETÉS A WEBLAPFEJLESZTÉSBE Kvaszingerné Prantner Csilla, EKF A mai haladó technológia 2 http://www.w3schools.com/ http://www.w3schools.com/html/html5_intro.asp http://www.w3schools.com/css3/default.asp

Részletesebben

HTML é s wéblapféjlészté s

HTML é s wéblapféjlészté s HTML é s wéblapféjlészté s 1. Melyik országból ered a hipertext-es felület kialakítása? USA Japán Svájc 2. Webfejlesztéskor ha a site-on belül hivatkozunk egy file-ra, akkor az elérési útnak... relatívnak

Részletesebben

w w w. h a n s a g i i s k. h u

w w w. h a n s a g i i s k. h u Weblapkészítés weblap: hypertext kódolású dokumentumok, melyek szöveget képet linkeket, könyvjelzőket/horgonyokat táblázatokat / szövegdobozokat és más objektumokat tartalmaznak. Kódolásuk HTML (Hypertext

Részletesebben

Webprogramozás HTML alapok 2. 3. előadás

Webprogramozás HTML alapok 2. 3. előadás Webprogramozás HTML alapok 2. 3. előadás Hivatkozások - linkek Link: más webes tartalomra történő irányítás Hivatkozások - linkek abszolút hivatkozás fizika kar weboldala

Részletesebben

Sakk játék. Feladat: JavaScript segítségével olyan programot kell írni, ami egy sakktáblát szimulál. Kiválasztásra változtatják a helyüket.

Sakk játék. Feladat: JavaScript segítségével olyan programot kell írni, ami egy sakktáblát szimulál. Kiválasztásra változtatják a helyüket. Sakk játék Felhasználói dokumentáció Feladat: JavaScript segítségével olyan programot kell írni, ami egy sakktáblát szimulál. Kiválasztásra változtatják a helyüket. Futtatási környezet: A http://10.0.0.101/~hgy/sakk/

Részletesebben

WWW Kliens-szerver Alapfogalmak Technológiák Terv. Web programozás 1 / 31

WWW Kliens-szerver Alapfogalmak Technológiák Terv. Web programozás 1 / 31 Web programozás 2011 2012 1 / 31 Áttekintés Mi a web? / A web rövid története Kliens szerver architektúra Néhány alapfogalom Kliens- illetve szerver oldali technológiák áttekintése Miről lesz szó... (kurzus/labor/vizsga)

Részletesebben

Weblap készítése. Fapados módszer

Weblap készítése. Fapados módszer Weblap készítése Fapados módszer A számítógép beállítása Ha a kiterjesztések nem látszanak, akkor a következőt kell tennünk: A számítógép beállítása Ha a kiterjesztések nem látszanak, akkor a következőt

Részletesebben

Számológép. Bármilyen számítógépen működik, amin található böngésző és Java alkalmazás. Indító képernyő

Számológép. Bármilyen számítógépen működik, amin található böngésző és Java alkalmazás. Indító képernyő Felhasználói dokumentáció Számológép Feladat: JavaScript és CSS segítségével számológép készítése. Futtatási környezet: A http://10.0.0.101/~szabby/szgep.html linkre kattintva megjelenik az oldal. Az oldal

Részletesebben

A HTML Stuktúra. 1. oldal, összesen: 8 oldal. mhtml:file://d:\vizsga\1\html kódok.mht. Betűtípusok, stílusok

A HTML Stuktúra. 1. oldal, összesen: 8 oldal. mhtml:file://d:\vizsga\1\html kódok.mht. Betűtípusok, stílusok <b> <i> <u> <tt> 1. oldal, összesen: 8 oldal főoldal weboldalkészítés kereső optimalizálás HTML kód meta elemek képek beillesztése frame táblázatok XHTML XML CSS szabvány JavaScript vista tudás vista telepítése ingyen

Részletesebben

Bevezetés Működési elv AJAX keretrendszerek AJAX

Bevezetés Működési elv AJAX keretrendszerek AJAX AJAX Áttekintés Bevezetés Működési elv AJAX-ot támogató keretrendszerek Áttekintés Bevezetés Működési elv AJAX-ot támogató keretrendszerek Áttekintés Bevezetés Működési elv AJAX-ot támogató keretrendszerek

Részletesebben

Kövér betűk (bold) 1-es fejléc

Kövér betűk (bold) 1-es fejléc A HTML Stuktúra Amint a bevezetőben olvashattuk, minden HTML formátumú szövegfájl a utasítással kezdődik és a záró utasítással végződik. A dokumentumot a fejlécelemek vezetik be, melyek

Részletesebben

r e l o a d. n o n p r o f i t f o r u m. e u Telepítési útmutató 3. RELOADED

r e l o a d. n o n p r o f i t f o r u m. e u Telepítési útmutató 3. RELOADED r e l o a d. n o n p r o f i t f o r u m. e u Telepítési útmutató 3. RELOADED HUSK 1101/1.5.1/0105 Szoftver Telepítési Útmutató A program a Magyarország-Szlovákia Határon Átnyúló Együttműködési Program

Részletesebben

BEVEZETÉS A WEBLAPFEJLESZTÉSBE. Kvaszingerné Prantner Csilla, EKF

BEVEZETÉS A WEBLAPFEJLESZTÉSBE. Kvaszingerné Prantner Csilla, EKF BEVEZETÉS A WEBLAPFEJLESZTÉSBE Kvaszingerné Prantner Csilla, EKF A mai haladó technológia 2 http://www.w3schools.com/ http://www.w3schools.com/html/html5_intro.asp http://www.w3schools.com/css3/default.asp

Részletesebben

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

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: nagy.gusztav@gamf.kefo.hu tantárgy honlapja: http://webprog.hu/ tantárgyi hírek (nem ETR kurzusfórum!)

Részletesebben

Web programoz as 2009 2010

Web programoz as 2009 2010 Web programozás 2009 2010 Áttekintés A web rövid története Kliens szerver architektúra Néhány alapfogalom Kliens- illetve szerver oldali technológiák áttekintése Áttekintés: miről lesz szó (kurzus/labor/vizsga)

Részletesebben

Képnézeget. Gépigény: Bármilyen számítógépen m ködik, amin található böngész és Internet elérés.

Képnézeget. Gépigény: Bármilyen számítógépen m ködik, amin található böngész és Internet elérés. Képnézeget Felhasználói dokumentáció Feladat: Java Script segítségével, olyan programot írni, mely képnézeget ként szolgál. Legalább 10 képet kell elhelyezni benne. Gombok választásával kell a design-ok

Részletesebben

Internet technológiák

Internet technológiák Szabadkai Műszaki Szakfőiskola Internet technológiák dr Zlatko Čović chole@vts.su.ac.rs 1 XHTML űrlapok 2 XHTML űrlapok Minden űrlap jelölőelem a: form{action, enctype, method} Űrlaptartalom /form jelölőelem

Részletesebben

Nemzeti Fejlesztési és Gazdasági Minisztérium támogatásával megvalósuló KKC-2008-V-08-08-101 számú projekt B2CR ONLINE KOMMUNIKÁCIÓ

Nemzeti Fejlesztési és Gazdasági Minisztérium támogatásával megvalósuló KKC-2008-V-08-08-101 számú projekt B2CR ONLINE KOMMUNIKÁCIÓ ONLINE KOMMUNIKÁCIÓ azaz, hogyan használjuk fel az internet lehetőségeit cégünk sikerei érdekében. MarkCon előadó: Vendler Balázs, ügyvezető TARTALOM (1) Az internetről általában (2) Webes megjelenések

Részletesebben

Internetes böngésző fejlesztése a mobil OO világban

Internetes böngésző fejlesztése a mobil OO világban Internetes böngésző fejlesztése a mobil OO világban Novák György és Pári Csaba Témavezető: Bátfai Norbert Debreceni Egyetem Matematikai és Informatikai Intézet Kitűzött cél A PC-s világban megszokotthoz

Részletesebben

TUDNIVALÓK A WEB-FEJLESZTÉS I. KURZUSRÓL

TUDNIVALÓK A WEB-FEJLESZTÉS I. KURZUSRÓL TUDNIVALÓK A WEB-FEJLESZTÉS I. KURZUSRÓL http://bit.ly/a1lhps Abonyi-Tóth Andor Egyetemi tanársegéd 1117, Budapest XI. kerület, Pázmány Péter sétány 1/C, 2.404 Tel: (1) 372-2500/8466 http://abonyita.inf.elte.hu

Részletesebben

A leírás bemutatja hogy mint minden másra, Favicon készítésre is alkalmas az ingyenes Gimp rajzolóprogram.

A leírás bemutatja hogy mint minden másra, Favicon készítésre is alkalmas az ingyenes Gimp rajzolóprogram. A leírás bemutatja hogy mint minden másra, Favicon készítésre is alkalmas az ingyenes Gimp rajzolóprogram. 1, Készítsünk egy 160 160-as új képet. Azért kell ekkora, hogy kényelmesen elférjünk benne, majd

Részletesebben

Egyszerő vízszintes navigáció készítése CSS segítségével. Ebben a cikkben egy egyszerő módszert fogunk bemutatni, vízszintes menü készítésére.

Egyszerő vízszintes navigáció készítése CSS segítségével. Ebben a cikkben egy egyszerő módszert fogunk bemutatni, vízszintes menü készítésére. Egyszerő vízszintes navigáció készítése CSS segítségével Ebben a cikkben egy egyszerő módszert fogunk bemutatni, vízszintes menü készítésére. A menüt lista elembıl fogjuk elkészíteni. Fogadja szeretettel

Részletesebben

Összesítés. Látogatások száma Oldalak Találatok Adatmennyiség. 11682 (11.08 Oldalak/Látogatás)

Összesítés. Látogatások száma Oldalak Találatok Adatmennyiség. 11682 (11.08 Oldalak/Látogatás) Utolsó frissítés: Jan 28-13:23 Statisztikai időszak: Jan OK Összesítés Statisztikai Hónap Jan időszak Első látogatás Jan 01-01:20 Utolsó látogatás Jan 28-12:55 Egyedi látogató Látogatások száma Oldalak

Részletesebben

Természetesen készíts egy csempe nevű könyvtárat és ide mentsd az index.html állományt.

Természetesen készíts egy csempe nevű könyvtárat és ide mentsd az index.html állományt. Csempe kalkula tor A küldetésünk az, hogy segítsünk kiszámítani egy fürdőszoba csempeszükségletét (felületét). Sőt, ha a kalkulátort használó ügyfél elégedett egyből elküldheti az e-mail címét, hogy a

Részletesebben

Internet TV Broadcaster kézikönyv

Internet TV Broadcaster kézikönyv Internet TV Broadcaster kézikönyv Rövid ismertetető: Az Internet TV broadcaster segítségével flv vagy mp4 videó fájlokat műsorlistába rendezve sugározhatunk Internetes TV adásokat. Annyi a dolgunk, hogy

Részletesebben

ÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK ÁLTALÁNOS HTML KÓDOLÁSI TUDNIVALÓK

ÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK ÁLTALÁNOS HTML KÓDOLÁSI TUDNIVALÓK ÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK HTML dokumentum = weblap = weboldal = webpage Egy HTML dokumentum kiterjesztései: HTM vagy HTML STÍLUSLAP = Egy vagy több HTML utasítás, értékekkel ellátott paramétereinek

Részletesebben

Google Web Toolkit. Elek Márton. Drótposta kft.

Google Web Toolkit. Elek Márton. Drótposta kft. Google Web Toolkit Elek Márton Drótposta kft. Tartalom A GWT általában Java forrás, Web mód, Hosted mód Speciális szolgáltatások History kezelés, távoli eljárás hívás, Külső függvénykönyvtárak GWT-Ext,

Részletesebben

Web-fejlesztés NGM_IN002_1

Web-fejlesztés NGM_IN002_1 Web-fejlesztés NGM_IN002_1 Szindikálás, aggregálás - RSS, Atom Tartalom betáplálás Gyakran frissül! webszájtok Új felhasználói igények el!fizetési igény az új tartalomra a tartalom újrafelhasználása eltér!

Részletesebben

Böngésző kompatibilitás

Böngésző kompatibilitás Böngésző kompatibilitás Konstantinusz Kft. 2009 Tartalomjegyzék 1. Bevezetés...3 2. Témafelvetés...4 3. Általában a honlapkészítésről...5 3.1. A honlap eszközeinek rövid ismertetése...5 3.2 Böngészők bemutatása...6

Részletesebben

Web-fejlesztés NGM_IN002_1

Web-fejlesztés NGM_IN002_1 Web-fejlesztés NGM_IN002_1 Rich Internet Applications RIA Vékony-kliens generált (statikus) HTML megjelenítése szerver oldali feldolgozással szinkron oldal megjelenítéssel RIA desktop alkalmazások funkcionalitása

Részletesebben

XHTML és CSS Holló Csaba 11. A HTML dokumentum

XHTML és CSS Holló Csaba 11. A HTML dokumentum XHTML és CSS Holló Csaba 2 A. Alapfogalmak B. Szövegek C. Hivatkozások D. Képek és multimédia E. Listák és számlálók XHTML és CSS Holló Csaba 3 1. Mi a HTML, XHTML és CSS? 2. Objektumok definíciója 3.

Részletesebben

Miért érdemes váltani, mikor ezeket más szoftverek is tudják?

Miért érdemes váltani, mikor ezeket más szoftverek is tudják? Néhány hónapja elhatároztam, hogy elkezdek megismerkedni az Eclipse varázslatos világával. A projektet régóta figyelemmel kísértem, de idő hiányában nem tudtam komolyabban kipróbálni. Plusz a sok előre

Részletesebben

WEB-FEJLESZTÉS I. KURZUS 2. GYAKORLAT

WEB-FEJLESZTÉS I. KURZUS 2. GYAKORLAT WEB-FEJLESZTÉS I. KURZUS 2. GYAKORLAT Fontos szabványok 1 HTTP protokoll Protokoll = szabályrendszer HTTP HyperText Transfer Protocol (Hiperszöveg Átviteli Protokoll) a webböngésző (kliens) adatokat kérhet

Részletesebben

XHTML és CSS. XHTML és CSS Webszerkesztés stílusosan. A munkamegosztás a weblapon. Érvek 2. (Egy HTML-kód sok CSS-lap) 2006.11.04.

XHTML és CSS. XHTML és CSS Webszerkesztés stílusosan. A munkamegosztás a weblapon. Érvek 2. (Egy HTML-kód sok CSS-lap) 2006.11.04. 2 A munkamegosztás a weblapon XHTML és CSS Webszerkesztés stílusosan Tartalom XHTML (Extentible Hypertext Markup Language) a keresők is ezt olvassák! Megjelenés stíluslapok CSS (Cascading Style Sheets)

Részletesebben

Akadálymentes weboldalkészítés dióhéjban

Akadálymentes weboldalkészítés dióhéjban Akadálymentes weboldalkészítés dióhéjban Készítette: Mezei Ádám Info-kommunikációs Akadálymentességi Műhelykonferencia 2008. november 20 Mi az oka, hogy NEM akadálymentes honlapokat készítünk? 1) Nem gondolunk

Részletesebben

Gazdasági informatika

Gazdasági informatika Gazdasági informatika Nyugat-Magyarországi Egyetem Faipari Mérnöki Kar Informatikai és Gazdasági Intézet Soós Sándor 2007. november 22-23. Internet - HTML Gazdasági informatika I. Soós Sándor 1 Napjaink

Részletesebben

2009.11.20. Weboldalkészítés sablonok segítségével Nyitrai Erika. Miről lesz szó? WEBOLDALKÉSZÍTÉS SABLONOK SEGÍTSÉGÉVEL. Saját honlapot szeretnék

2009.11.20. Weboldalkészítés sablonok segítségével Nyitrai Erika. Miről lesz szó? WEBOLDALKÉSZÍTÉS SABLONOK SEGÍTSÉGÉVEL. Saját honlapot szeretnék Miről lesz szó? ELTE IK Algoritmusok és Alkalmazásaik Tanszék WEBOLDALKÉSZÍTÉS SABLONOK SEGÍTSÉGÉVEL Mit tehetek, ha szeretnék egy saját honlapot vagy blogot? Mik a főbb problémák? Milyen megoldások születhetnek?

Részletesebben

11. Tétel. A színválasztásnak több módszere van:

11. Tétel. A színválasztásnak több módszere van: 11. Ön részt vesz egy túlnyomórészt szövegalapú információs portál fejlesztésében. Milyen tipográfiai és ergonómiai szempontokat kell figyelembe vennie a portál arculatának, navigációs rendszerének tervezése

Részletesebben

DRUPAL 7. újdonságai. Hojtsy Gábor Drupal Hétvége, Budapest - 2009. november 14. Angela Byron fóliái alapján

DRUPAL 7. újdonságai. Hojtsy Gábor Drupal Hétvége, Budapest - 2009. november 14. Angela Byron fóliái alapján A DRUPAL 7 újdonságai Hojtsy Gábor Drupal Hétvége, Budapest - 2009. november 14. Angela Byron fóliái alapján MIKOR JELENIK MEG? Itt vagyunk! MIKOR JELENIK MEG? Itt vagyunk! Dec 1, 2009 KINEK KÖSZÖNHETJÜK?

Részletesebben

Weboldal grafika készítés elméleti síkon Grafikából szabáványos CSS és XHTML sablon

Weboldal grafika készítés elméleti síkon Grafikából szabáványos CSS és XHTML sablon Az elméleti rész után jöhet a gyakorlati megvalósítás. A grafika nem lesz túl bonyolult, hogy egyszerűen reprodukálható legyen bárki számára. A megvalósítási szakasz inkább csak érzékeltetés, hogy mire

Részletesebben

qwertzuiopőúasdfghjkléáűíyxcvbnmq wertzuiopőúasdfghjkléáűíyxcvbnmq wertzuiopőúasdfghjkléáűíyxcvbnmq wertzuiopőúasdfghjkléáűíyxcvbnmq

qwertzuiopőúasdfghjkléáűíyxcvbnmq wertzuiopőúasdfghjkléáűíyxcvbnmq wertzuiopőúasdfghjkléáűíyxcvbnmq wertzuiopőúasdfghjkléáűíyxcvbnmq q HTML szerkesztés elmélet jegyzet 2010. április 4. Sallai András 2010 Készült az Oktatásért Közalapítvány támogatásával. Egressy Gábor Kéttannyelvű Műszaki Szakközépiskola Tartalom 1. Az SGML nyelv...

Részletesebben

web works hungary Rövid technikai tájékoztató Mars (mars.intelliweb.hu) szerverünkkel kapcsolatban meglévő és új ügyfeleink számára.

web works hungary Rövid technikai tájékoztató Mars (mars.intelliweb.hu) szerverünkkel kapcsolatban meglévő és új ügyfeleink számára. web works hungary Rövid technikai tájékoztató Mars (mars.intelliweb.hu) szerverünkkel kapcsolatban meglévő és új ügyfeleink számára. Ebben a tájékoztatóban több helyen hivatkozunk különböző azonosítókra

Részletesebben

WordPress segédlet. Bevezető. Letöltés. Telepítés

WordPress segédlet. Bevezető. Letöltés. Telepítés WordPress segédlet Bevezető A WordPress egy ingyenes tartalomkezelő rendszer (Content Management System - CMS), amely legnagyobb előnye az egyszerű telepítés és a letisztult kezelhetőség és a változatos

Részletesebben

Ingyenes DDNS beállítása MAZi DVR/NVR/IP eszközökön

Ingyenes DDNS beállítása MAZi DVR/NVR/IP eszközökön Ingyenes DDNS beállítása MAZi DVR/NVR/IP eszközökön Fontos Amennyiben egy eszköz interneten keresztüli elérését lehetővé teszi, az illetéktelen hozzáférés megakadályozása érdekében: előtte az alapértelmezett

Részletesebben

Honlapkészítés. 1. Előadás Bevezető, HTML. Paksy Patrik

Honlapkészítés. 1. Előadás Bevezető, HTML. Paksy Patrik Honlapkészítés 1. Előadás Bevezető, HTML Paksy Patrik Miből áll össze egy honlap? Oldal szerkezete Grafika Tartalom Tervezzünk 800*600-as / 1024*768-as képfelbontásra! Ezek a ma használt legkisebb méretek!

Részletesebben

Webtárhely létrehozása a WWW.freeweb.hu helyen. Lépések Teendő 1. Böngészőbe beírni: www.freeweb.hu. 2. Jobb oldalon regisztrálni (tárhelyigénylés).

Webtárhely létrehozása a WWW.freeweb.hu helyen. Lépések Teendő 1. Böngészőbe beírni: www.freeweb.hu. 2. Jobb oldalon regisztrálni (tárhelyigénylés). Lépések Teendő 1. Böngészőbe beírni: www.freeweb.hu Kép 2. Jobb oldalon regisztrálni (tárhelyigénylés). 3. 4. Értelemszerűen kitölteni a regisztrációs lapot, és elküldeni. 5. Postafiókomra érkező levélben

Részletesebben

A WORDPRESS TELEPÍTÉSÉNEK LÉPÉSEI

A WORDPRESS TELEPÍTÉSÉNEK LÉPÉSEI Mgr. Námesztovszki Zsolt A WORDPRESS TELEPÍTÉSÉNEK LÉPÉSEI Eötvös Loránd Tudományegyetem, Pedagógiai és Pszichológiai Kar Oktatásinformatikai rendszerek - szöveggyűjtemény Budapest, 2013. Bevezető A WordPress

Részletesebben

Széchenyi István Egyetem. Műszaki Tudományi Kar. Informatikai és Villamosmérnöki Intézet Távközlési Tanszék. Villamosmérnöki szak HTML

Széchenyi István Egyetem. Műszaki Tudományi Kar. Informatikai és Villamosmérnöki Intézet Távközlési Tanszék. Villamosmérnöki szak HTML Széchenyi István Egyetem Műszaki Tudományi Kar Informatikai és Villamosmérnöki Intézet Távközlési Tanszék Villamosmérnöki szak HTML HTML segédlet számítógép hálózatok tárgy gyakorlatához A jegyzet teljes

Részletesebben

Webes űrlapok és az XForms ajánlás

Webes űrlapok és az XForms ajánlás Debreceni Egyetem Informatikai Kar Webes űrlapok és az XForms ajánlás Témavezető: Dr. Adamkó Attila egyetemi adjunktus Készítette: Hetei György programtervező Informatikus Debrecen 2010 Bevezetés 3 A HTML

Részletesebben

Weboldalak Biztonsági Kérdései

Weboldalak Biztonsági Kérdései Weboldalak Biztonsági Kérdései Kliens szerver modellek Kliens szerver modellek Offline világ Online világ és a programokkal szemben támasztott elvárások helyett... Fejlesztés üteme gyors Előregyártott

Részletesebben

Web programozás I. 4. előadás

Web programozás I. 4. előadás Web programozás I. 4. előadás CSS Pozícionálás http://www.brainjar.com/css/positioning/def ault.asp Design kialakívása http://www.albinoblacksheep.com/livedesign/ http://www.dynamicdrive.com/style/ http://www.opendesigns.org/

Részletesebben

Weblapok szabványossága a példák tükrében

Weblapok szabványossága a példák tükrében Tartalomjegyzék 1. Bevezetı...1 2. A World Wide Web...2 3. A HTML (HyperText Markup Language)...3 3.1. Egy kis történelem...3 3.2. A HTML különbözı verziói...5 3.2.1. HTML 0 szint...5 3.2.2. HTML 1 szint...5

Részletesebben

mikroformátumok avagy a kisbetűs szemantikus web SZÁNTAI KÁROLY Magyarországi Web Konferencia 2008

mikroformátumok avagy a kisbetűs szemantikus web SZÁNTAI KÁROLY Magyarországi Web Konferencia 2008 mikroformátumok avagy a kisbetűs szemantikus web SZÁNTAI KÁROLY Magyarországi Web Konferencia 2008

Részletesebben

Internet marketing, Google hirdetési, analitikai eszközök

Internet marketing, Google hirdetési, analitikai eszközök Internet marketing, Google hirdetési, analitikai eszközök Készítette: Horváth Antal Mimézis Kft. http://www.mimezis.hu A mai napról Varázsszavak Miért is kell és mennyit - fizetnem (tárhely, fejlesztési

Részletesebben

Egy szabadon választott cég weboldalának elemzése (http://educatio.hu)

Egy szabadon választott cég weboldalának elemzése (http://educatio.hu) Egy szabadon választott cég weboldalának elemzése (http://educatio.hu) 1. Vizsgálat az általános webergonómiai alapelvek szempontjából 1.1. Megjelenés, nyitóoldal, menürendszer (navigáció) Az educatio.hu

Részletesebben

Smarty AJAX. Miért jó ez? Ha utálsz gépelni, akkor tudod. Milyen műveletet tudunk elvégezni velük:

Smarty AJAX. Miért jó ez? Ha utálsz gépelni, akkor tudod. Milyen műveletet tudunk elvégezni velük: Smarty AJAX Smarty sablonrendszer fegyverzetét (Funkcióit) igyekszik kiegészíteni, néhány alap AJAX metódussal, amivel a megjelenést, kényelmet vagy a funkcionalitást növelhetjük. A Smarty Ajax függvényeknek

Részletesebben

web works hungary Rövid technikai tájékoztató a webhosting szolgáltatásról. (PLESK - 195.70.38.53 szerver)

web works hungary Rövid technikai tájékoztató a webhosting szolgáltatásról. (PLESK - 195.70.38.53 szerver) web works hungary Rövid technikai tájékoztató a webhosting szolgáltatásról. (PLESK - 195.70.38.53 szerver) Vezérlőpult A webhosting szolgáltatáshoz a világ egyik vezető vezérlőpultját biztosítjuk. A vezérlőpult

Részletesebben

PHP-MySQL. Adatbázisok gyakorlat

PHP-MySQL. Adatbázisok gyakorlat PHP-MySQL Adatbázisok gyakorlat Weboldalak és adatbázisok Az eddigiek során megismertük, hogyan lehet a PHP segítségével dinamikus weblapokat készíteni. A dinamikus weboldalak az esetek többségében valamilyen

Részletesebben

Kedvenc Ingyenes editorok avagy milyen a programozó jobbkeze? PSPAD editor DEVPHP IDE

Kedvenc Ingyenes editorok avagy milyen a programozó jobbkeze? PSPAD editor DEVPHP IDE Kedvenc Ingyenes editorok avagy milyen a programozó jobbkeze? Az Interneten nagyon sok fizetős szoftver gyakorlatilag sz sem ér, ezért mindenkinek azt javaslom mielőtt még gyors költekezésbe kezdene nézzen

Részletesebben

Képek a HTML oldalon

Képek a HTML oldalon Képek a HTML oldalon Utolsó módosítás: 11/22/2004 13:07:28 Háttérkép Ahhoz, hogy az adott oldal háttérképpel rendelkezzen, a részben el kell helyeznünk a background="kep" paramétert, ahol a kép

Részletesebben

Válltáska Ubuntu 8.04 Hardy Heron. A Hardy Heron jelentését feszegető téma: http://ubuntu.hu/blog/szota/a-hardy-heron-az-milyen-micsoda-magyarul

Válltáska Ubuntu 8.04 Hardy Heron. A Hardy Heron jelentését feszegető téma: http://ubuntu.hu/blog/szota/a-hardy-heron-az-milyen-micsoda-magyarul Válltáska Ubuntu 8.04 Hardy Heron A Hardy Heron jelentését feszegető téma: http://ubuntu.hu/blog/szota/a-hardy-heron-az-milyen-micsoda-magyarul Milyen szoftvereket használok Ubuntu Linuxon. Szoftver telepítés:

Részletesebben

Internet programozása. 1. előadás

Internet programozása. 1. előadás Internet programozása 1. előadás Áttekintés 1. Mi a PHP? 2. A PHP fejlődése 3. A PHP 4 újdonságai 4. Miért pont PHP? 5. A programfejlesztés eszközei 1. Mi a PHP? Egy makrókészlet volt, amely személyes

Részletesebben

Webfejlesztés Szempontok

Webfejlesztés Szempontok Webfejlesztés Szempontok A webfejlesztés alapjai Miért készülnek weboldalak? Valamit nyújtani szeretnénk a felhasználónak. A webfejlesztés során elsősorban a felhasználók igényeit vesszük figyelembe. Nevezhetjük

Részletesebben

Mozgásvizsgálati mérések internetes megjelenítése. Zemkó Szonja - Dr. Siki Zoltán

Mozgásvizsgálati mérések internetes megjelenítése. Zemkó Szonja - Dr. Siki Zoltán Mozgásvizsgálati mérések internetes megjelenítése Zemkó Szonja - Dr. Siki Zoltán Áttekintés Az ötlet megszületése Nyílt szabványok és nyílforrású szoftverek A rendszer komponensei Bemutató Az ötlet megszületése

Részletesebben

Google App Engine az Oktatásban 1.0. ügyvezető MattaKis Consulting http://www.mattakis.com

Google App Engine az Oktatásban 1.0. ügyvezető MattaKis Consulting http://www.mattakis.com Google App Engine az Oktatásban Kis 1.0 Gergely ügyvezető MattaKis Consulting http://www.mattakis.com Bemutatkozás 1998-2002 között LME aktivista 2004-2007 Siemens PSE mobiltelefon szoftverfejlesztés,

Részletesebben

Információ és kommunikáció

Információ és kommunikáció Információ és kommunikáció Tanmenet Információ és kommunikáció TANMENET- Információ és kommunikáció Témakörök Javasolt óraszám 1. Az internet jellemzői 25 perc 2. Szolgáltatások az interneten 20 perc

Részletesebben

Mobilizálódó OSZK. A nemzeti könyvtár mobileszközöket célzó fejlesztései az elmúlt időszakban. Garamvölgyi László. Networkshop, 2013.

Mobilizálódó OSZK. A nemzeti könyvtár mobileszközöket célzó fejlesztései az elmúlt időszakban. Garamvölgyi László. Networkshop, 2013. ORSZÁGOS SZÉCHÉNYI KÖNYVTÁR WEBTARTALOM KOORDINÁCIÓS OSZTÁLY Mobilizálódó OSZK A nemzeti könyvtár mobileszközöket célzó fejlesztései az elmúlt időszakban Garamvölgyi László Networkshop, 2013. Okostelefonok

Részletesebben

Bemutatkozás. Heilig Szabolcs cece@phphost.hu Hojtsy Gábor goba@php.net Illés Szabolcs illes.szabolcs@netkey.hu Palócz István pp@phpconf.

Bemutatkozás. Heilig Szabolcs cece@phphost.hu Hojtsy Gábor goba@php.net Illés Szabolcs illes.szabolcs@netkey.hu Palócz István pp@phpconf. Bemutatkozás Heilig Szabolcs cece@phphost.hu Hojtsy Gábor goba@php.net Illés Szabolcs illes.szabolcs@netkey.hu Palócz István pp@phpconf.hu Második Magyarországi PHP Konferencia 2004. március 27. Tartalomjegyzék

Részletesebben

Statisztikai alap kia.hu (2009) - main

Statisztikai alap kia.hu (2009) - main Statisztikai alap kia.hu () - main https://admin.foek.hu/stats-cgi/awstats.pl?month=all&year=&output=main&con... Page 1 of 6 Utolsó frissítés: 2010 Jan 04-06:32 Statisztikai idıszak: - Év - 6 6 OK Statisztikai

Részletesebben

ECDL képzés tematika. Operáció rendszer ECDL tanfolyam

ECDL képzés tematika. Operáció rendszer ECDL tanfolyam Operáció rendszer ECDL tanfolyam Alapok A Windows áttekintése Asztal Tálca Start menü Lomtár használata Súgó használata Felhasználói fiókok kezelése Kijelentkezés, felhasználóváltás Fájlok és mappák Sajátgép

Részletesebben

WEBFEJLESZTÉS 2. ADATBÁZIS-KEZELÉS, OSZTÁLYOK

WEBFEJLESZTÉS 2. ADATBÁZIS-KEZELÉS, OSZTÁLYOK WEBFEJLESZTÉS 2. ADATBÁZIS-KEZELÉS, OSZTÁLYOK Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány Péter sétány 1/C, 2.420 Tel: (1) 372-2500/1816 2 Ismétlés Ismétlés 3 Fájl/Adatbázis 3 4 Szerver 2 CGI

Részletesebben

Flash és PHP kommunikáció. Web Konferencia 2007 Ferencz Tamás Jasmin Media Group Kft

Flash és PHP kommunikáció. Web Konferencia 2007 Ferencz Tamás Jasmin Media Group Kft Flash és PHP kommunikáció Web Konferencia 2007 Ferencz Tamás Jasmin Media Group Kft A lehetőségek FlashVars External Interface Loadvars XML SOAP Socket AMF AMFphp PHPObject Flash Vars Flash verziótól függetlenül

Részletesebben

TEXTAREA++ a JavaScript ereje

TEXTAREA++ a JavaScript ereje TEXTAREA++ a JavaScript ereje Bártházi András email: andras@barthazi.hu web: http://barthazi.hu tevékenységek: Weblabor szerkesztő NJSZT-WFSZ titkár stb. :) Fejlődő web A JavaScript a reneszánszát éli

Részletesebben

Dokumentumformátumok Jelölő nyelvek XML XML. Sass Bálint sass@digitus.itk.ppke.hu. Bevezetés a nyelvtechnológiába 2. gyakorlat 2007. szeptember 20.

Dokumentumformátumok Jelölő nyelvek XML XML. Sass Bálint sass@digitus.itk.ppke.hu. Bevezetés a nyelvtechnológiába 2. gyakorlat 2007. szeptember 20. XML Sass Bálint sass@digitus.itk.ppke.hu Bevezetés a nyelvtechnológiába 2. gyakorlat 2007. szeptember 20. 1 DOKUMENTUMFORMÁTUMOK 2 JELÖLŐ NYELVEK 3 XML 1 DOKUMENTUMFORMÁTUMOK 2 JELÖLŐ NYELVEK 3 XML DOKUMENTUMFORMÁTUMOK

Részletesebben

1. A HTML leíró nyelv. 2. Stíluslapok - CSS. 3. HTML sablonok. Tartalom

1. A HTML leíró nyelv. 2. Stíluslapok - CSS. 3. HTML sablonok. Tartalom 1. A HTML leíró nyelv 2. Stíluslapok - CSS 3. HTML sablonok Tartalom 1. A HTML leíró nyelv...1 2. Stíluslapok - CSS...1 3. HTML sablonok...1 1. A HTML megjelenítő nyelv...3 1.1. Bevezető...3 1.1.1. HTML

Részletesebben

ENTERPRISE PORTAL. Egy modern portál esetén

ENTERPRISE PORTAL. Egy modern portál esetén ENTERPRISE PORTAL ENTERPRISE PORTAL OpenSource eszközök alkalmazásával robosztus, költséghatékony web portálok kialakítására van lehetőség. Igény esetén piacvezető, licenc díjas termékek is alkalmazhatók.

Részletesebben

WAP. A Wireless Application Protocol (WAP) a vezetéknélküli eszközök (pl. mobiltelefonok, PDA-k) számára készített alkalmazások nemzetközi szabványa.

WAP. A Wireless Application Protocol (WAP) a vezetéknélküli eszközök (pl. mobiltelefonok, PDA-k) számára készített alkalmazások nemzetközi szabványa. WAP A Wireless Application Protocol (WAP) a vezetéknélküli eszközök (pl. mobiltelefonok, PDA-k) számára készített alkalmazások nemzetközi szabványa. A WAP lehetővé tette, hogy a mobiltelefon tulajdonosok

Részletesebben

1, Megnézzük a grafikát és megtervezzük az összerakáshoz szükséges blokkokat. Megkeressük, mi a fix elem és mi fog ismétlődni.

1, Megnézzük a grafikát és megtervezzük az összerakáshoz szükséges blokkokat. Megkeressük, mi a fix elem és mi fog ismétlődni. A kész Gimppel rajzolt grafikát összerakjuk CSS és XHTML sablonként. Az előzményekből egy állományra lesz szükség a veglegesweblap-sablon.xcf állományra. A fájlt kapjon egy m_ (m_vegleges-weblap-sablon.xcf)

Részletesebben