Embed Size (px)
Citation preview
A webprogramozás alapjai Óbudai Egyetem Neumann János Informatikai Kar2018/19/1 szemeszter
1
VI. előadásHTML nyelv fontosabb elemei III. (HTML5 újdonságok)
HTML nyelv fontosabb elemei IV. (űrlapok)
CSS 3 animációk, a CSS jövőjeWeb ergonómia
Böngészők fejlődése
Hol állunk most?• Fontos HTML elemeket ismerjük » weboldal összerakása• Alapvető stílus elemeket ismerjük » weboldal csinosítása• Metaadatokkal tisztában vagyunk » háttérinformációkat meg tudjuk adni• Fejlettebb szövegszerkesztőket ismerünk• Best-practice mappastruktúrát ismerjük
3
HTML5 újdonságok I. (Canvas)• HTML5 nagy újdonságaként jelent meg a canvas, azaz rajzvászon.
• Egy tetszőleges méretű terület, amelyre JavaScript segítségével lehet rajzolni.• Vonal, kör, szöveg, gradiens (színátmenet) (lineáris és körkörös)
• Ehhez már matematikai műveletek szükségesek, illetve minimális vektoros ismeretek.
• Bővebben: https://www.w3schools.com/html/html5_canvas.asp
4
HTML5 újdonságok I. (SVG)• Képek kapcsán elengedhetetlen a kiterjesztésről, azaz a kép típusáról beszélni.• A .svg is egy kiterjesztés, amely a „scalable vector graphics” rövidítésből ered,
azaz skálázható vektor grafika. Skálázhatóság alatt a tetszőleges növelést / zsugorítást értjük. Mivel vektor alapú (amelynek iránya és nagysága van), ezért tetszőleges méretben meg lehet jelentetni, 5 m vagy 5 mm, nem számít,ugyan olyan éles lesz.
5
HTML5 újdonságok II. (Multimédia I.)
• Multimédia kapcsán beszélhetünk audióról valamint videóról. Mind a kettőre van lehetőség a HTML 5-nek köszönhetően, hogy közvetlenül betegyük az oldalra. Ez azért fontos és jó dolog, mert korábban mindenféle lejátszó kellett ahhoz, ha egy videót le szerettünk volna játszani az oldalunkon (ezek többnyire JavaScript-ben voltak írva).• Kerülő: YouTube feltöltés » <iframe> beágyazás az oldalra• Hátrány: ettől a tartalmunk teljesen nyílt lesz a YouTube-on illetve a felhasználót
elkalandoztatja az oldalról (web ergonómia szempontból ez nem jó).• Előny: egyszerű, gyors és felhasználóbarát.
• HTML 5–tel pedig nincs szükség kerülőkre,a böngészők natívan támogatják.
6
HTML5 újdonságok II. (Multimédia II.) 7
• Audio és video fájlok esetén fontos a formátumokkal, előnyeikkel és hátrányaikkal tisztában lenni, erről jó összefoglalást ad: https://www.w3schools.com/html/html_media.asp
VI. előadásHTML nyelv fontosabb elemei III. (HTML5 újdonságok)
HTML nyelv fontosabb elemei IV. (űrlapok)
CSS 3 animációk, a CSS jövőjeWeb ergonómia
Böngészők fejlődése
Űrlapok I.• Abban az esetben, ha nem csak „kifele” szeretnénk kommunikálni, hanem
valamilyen bemenetet is szeretnénk képezni, azt űrlappal tudjuk megtenni.• A weboldalak szintén egy meghatározó része
csakúgy, mint egy kép vagy link!• Elnevezés:• Űrlap• Formanyomtatvány• Form• <form> ... </form>
• A form az, amely magát a formotképviseli, de egy form több űrlapmezőből (input) állhat.
9
Űrlapok II. (beviteli mező típusok I.) 10TEXT
PASS
Űrlapok II. (beviteli mező típusok I.) 11TEXT
PASS
Űrlapok II. (beviteli mező típusok II.) 12CHECKBOX
RADIO
DATE
Űrlapok II. (beviteli mező típusok III.) 13
BUTTON
• Button típusú input elemet főként olyan esetben használunk, ha azzal
valamilyen JavaScript programot szeretnénk lefuttatni. Ez a gomb nem
egyenértékű a form aljára kihelyezett, „submit” típussal!
• Submit típus esetén a szerver oldali php fájlunkban le tudjuk kérdezni, hogy az
adott gomb le lett-e nyomva avagy sem.
Űrlapok II. (beviteli mező típusok IV.) 14
HIDDEN
• Hidden típus esetén olyan input mezőt tudunk létrehozni, amely nem látszik a formon.• Ez akkor lehet hasznos, ha a formot generáltatjuk (mondjuk php-val), mert
ebben az esetben a value-nak meg tudjuk adni, hogy milyen értéke legyen. (Itt a példán Norway van megadva, de php-ban ez bármilyen változó értékét felveheti.)• Ilyen rejtett mezőkön keresztül például át tudjuk adni egy termék
azonosítószámát, amely a felhasználó számára nem szükséges, hogy látszódjon, csupán a belső azonosításhoz kell majd (mondjuk webshop esetén fizetéskor).
Űrlapok II. (beviteli mező típusok IV.) 15
COLOR
• Számos input típus van még, bővebben: https://www.w3schools.com/tags/att_input_type.asp
FILE
IMAGE
NUMBER
RANGE
Űrlapok II. (kód)
• Egyszerű text (=szöveg) típusú beviteli mezőkből álló form, amely alján egy gomb található.
• A gomb lenyomására történik az „akció”, tehát a feldolgozás.
• A feldolgozáshoz PHP ismerete szükséges, amelyet jelen tárgy nem tárgyal, de a menetét ildomos tudni.
16
Űrlapok III. (feldolgozás menete) 17• A form megjelenítése és összerakása már megy, ahhoz csak a HTML (és esetleg
CSS ha formázni is szeretnénk) szükséges.• A beírt adatokat viszont valahogy meg is kell szerezni, feldolgozni és rögzíteni.
E feladat elvégzését szolgálja az action_page.php nevű PHP programunk.
• Az action attribútum után tetszőlegesen tudjuk megadni, hogy mivel szeretnénk feldolgozni a formot, ha esetleg máshogy hívják a mi fájlunkat. (mappaszerk. figyelni)
Űrlapok III. (feldolgozás menete) 18• A kliens lekéri a weboldalt, a szerver elküldi a HTML oldalunkat, amely a
böngészőben megjelenik ezt követően a kliens oldalon.
• A formot a gomb lenyomásával „elküldjük”, vissza a szervernek, ahol az actionattribútum segítségével megadott feldolgoz.php program feldolgozza.
• A feldolgozás több lépcsős folyamat és nagyon sok mindentől függ, hogy mennyire kell megvizsgálni a jött adatokat (erről bővebben a Web Securityelőadáson).
lekérés
kiszolgálás
form küldés
feldolgozás
Űrlapok IV. (input styling)
• Hasonlóan a linkek esetében, itt is használhatjuk a :hover valamint :activeselectorokat.• :hover esetén, tehát amikor az
egérmutatót rávisszük a háttér színe megváltozik• :active esetén, tehát amikor a gomb
lekattintásra kerül, a pozíciója megváltozik, ezzel imitálva a „lenyomás” hatást.
19
Űrlapok IV. (input styling)
• Űrlapokon található beviteli mezőket (text, email, password, stb. típusokat) mind-mind tudunk tetszőlegesen CSS-sel formázni és kedvünkre módosítani.
20
+CSS
Űrlapok V. (extrák)• Van lehetőség különböző megszorításokat tenni az
egyes űrlapmezőknél, a típusoknak megfelelően.• Text esetén tudok úgynevezett placeholder-t megadni,
amely könnyebbé teszi az egyes mezők funkciójának felismerését.• Number vagy range esetén megadhatunk egy
felső/alsó limitet.
21
VI. előadásHTML nyelv fontosabb elemei III. (HTML5 újdonságok)
HTML nyelv fontosabb elemei IV. (űrlapok)
CSS 3 animációk, a CSS jövőjeWeb ergonómia
Böngészők fejlődése
CSS3 animációk• A CSS3 fontos újítása volt, hogy széles körben lehetett animációkat létrehozni vele.
Ezt szokás nevezni „pure CSS” elvnek, ami annyit tesz, hogy nincs szükség egyéb dologra a működéshez - csak a tiszta CSS.• Korábban ehhez vagy flash vagy pedig JavaScript (jQuery függvénykönyvtár) volt
szükséges. A flash mára teljesen ellenjavallott, sőt, a böngészők már nem is támogatják, azaz nem tud működni vele az oldal. Ezek mondhatni bonyolultabb módszerek is voltak, tehát a CSS 3-as verziója sok tekintetben jó, új és izgalmas dolgokat hozott magával.• Animációval rengeteg stílus között tudunk animációt létrehozni, például A stílusból X
stílusba. Ehhez szükséges a @keyframes szabály, amellyel az animációt definiáljuk.• Látványos példák:
• https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation3• https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation_speed
23
CSS3 árnyékok 24• Két alkalmazásra bontható:• Text-shadow » szövegre• Box-shadow » képre, divre, stb.
• Mind a két esetben, meg tudjuk adni, hogy az árnyék X,Y tengely mentén hova legyen pozícionálva, ennek megfelelően más-más hatást tudunk elérni vele. Megadható továbbá az árnyék színe és elmosódása (blur). Ezek megadása pixel (px) formában történik.• Box-shadow generator:• https://www.cssmatic.com/box-shadow
CSS3 2D transzformációk I.• Az animációk mellett a transzformációk is fontos szerepet kaptak, melyek
segítségével lehetőség van fordítani, forgatni, nagyítani-kicsinyíteni és ferdíteni az elemeket. Transzformálás alatt azt értjük, amikor egy elem alakját, méretét és/vagy pozícióját megváltoztatjuk.
25
translate() rotate() scale()Böngésző
támogatottság!!!
CSS3 2D transzformációk II.• A matrix() metódus a különálló, önmagukban létező és működő 2D
transzformációkat tudja kombinálni.• matrix( scaleX() , skewY() , skewX() , scaleY() , translateX() , translateY() )
26
matrix()
CSS3 3D transzformációk 27• A 2D transzformációhoz hasonlóan működik, azonban amíg ott csak síkban
történik a módosítás, úgy itt „térben” is.• Érdekes példák: https://css-tricks.com/almanac/properties/t/transform/
rotateX () rotateY()
rotateZ()X
Y
CSS3 gradiensek I.• A gradiens a matematikában egy skalármezőkre alkalmazható
differenciáloperátor. A gradiens a függvények deriválásának általánosítása többváltozós függvényekre. Ennek vektormező az eredménye, ami azt mutatja, hogy változik a függvény, és megadja a skalármező legnagyobb megváltozásának irányát is.• Ami a mi szempontunkból fontos: gradiens segítségével átmeneteket tudunk
megadni kettő vagy több szín között, ezáltal szép felületeket képezve.• Két fő irány• Lineáris gradiens » fel / le / balra / jobbra• Sugárirányú » kör sugár
• Átlátszóságot is tudunk megadni. (transparency)
28
CSS3 gradiensek II. 29
Böngésző támogatottság I.• Böngésző támogatottságról akkor beszélünk, amikor az egyes (pl.) CSS
tulajdonságokat szeretnénk alkalmazni. Mivel sok böngésző van (bár a
böngészőmotorok nincsenek annyi számban) ezért a fejlesztőknek ezekre
figyelnie kell.
• Bizonyos dolgok egyáltalán nem mennek mondjuk Explorer alatt, ekkor más
megoldáshoz kell nyúlni, például JavaScript használatához.
• Chrome, Firefox és Safari elsőhelyen járnak a naprakészségben így ezekre
érdemes alapozni! De itt is látjuk, hogy bizonyos „prefix”-ek szükségesek az
egyes dolgok működéséhez. (-webkit- és -moz-)
• Ennek főleg komoly rendszerekben van hangsúlyos szerepe!
30
Böngésző támogatottság II.• Példa a CSS3 transition property esetén. Az egyes támogatottságok az interneten
könnyen fellelhetők, a korábban bemutatott generátor programok alapból így generálják le a CSS-t. A https://www.w3schools.com oldalon a támogatottságotmindig könnyen le tudjuk ellenőrizni!
31
A CSS jövője• A flash már nem támogatott.• JavaScript segítségével tudunk animálni és egyéb „eye-candy” dolgot kreálni.• CSS-sel valamivel ez egyszerűbb.
32
CSS fog kiváltani minden ilyen jellegű dolgot, és a pure CSS elv fog dominálni,
ezzel csökkentve a rengeteg programnyelv használatát és ismeretét.
VI. előadásHTML nyelv fontosabb elemei III. (HTML5 újdonságok)
HTML nyelv fontosabb elemei IV. (űrlapok)
CSS 3 animációk, a CSS jövőjeWeb ergonómia
Böngészők fejlődése
Web ergonómia• Minden olyan ismeret, amelyet ahhoz tudunk felhasználni, hogy a felhasználó
számára jobb terméket (weboldalt a mi esetünkben) tudjunk készíteni.• Divatosabb nevén: UX – User Experience (felhasználói élmény)• Számos szempont található:
• Felbontásfüggetlen megjelenítés• Válaszidő• Linkek• Logó, színharmónia• Navigáció• Tartalomtervezés
• Letapogathatóság• Szövegdarabolás
• Multimédia fogyaszthatóság
34
Web ergonómia 35
Webergonómia - Jakob Nielsen nyomán
VI. előadásHTML nyelv fontosabb elemei III. (HTML5 újdonságok)
HTML nyelv fontosabb elemei IV. (űrlapok)
CSS 3 animációk, a CSS jövőjeWeb ergonómia
Böngészők fejlődése
Az első weboldal 37
Kertész Gábor 2016-os Kutatók Éjszakája előadása alapján
Az első böngésző (NeXT)
Kertész Gábor 2016-os Kutatók Éjszakája előadása alapján
38
Az első szerver
Kertész Gábor 2016-os Kutatók Éjszakája előadása alapján
39
Böngésző fejlődés (Erwise ‘92)
Kertész Gábor 2016-os Kutatók Éjszakája előadása alapján
40
Böngésző fejlődés (ViolaWWW ‘92)
Kertész Gábor 2016-os Kutatók Éjszakája előadása alapján
41
Böngésző fejlődés (Lynx ‘92)
Kertész Gábor 2016-os Kutatók Éjszakája előadása alapján
42
Böngésző fejlődés (Cello ’92-’94)
Kertész Gábor 2016-os Kutatók Éjszakája előadása alapján
43
Böngésző fejlődés (Mosaic ’93-’97)
Kertész Gábor 2016-os Kutatók Éjszakája előadása alapján
44
Böngésző fejlődés (Netscape Navigator ’94-2007)
Kertész Gábor 2016-os Kutatók Éjszakája előadása alapján
45
Böngésző fejlődés (IE ’95-)
Kertész Gábor 2016-os Kutatók Éjszakája előadása alapján
46
Böngészők manapság• Több mint pusztán HTML tartalom “megjelenítő”.
• Mivel a “web kinőtte magát”, az ahhoz tartozó elsőszámú eszköznek is rengetegetkellett fejlődnie.
• Újabb és újabb igények jelentek meg:• PDF olvasó• Ilyen-olyan kiegészítők, add-on-ok, stb.
47
Böngészők fejlesztői szemmel• Ahogy fejlődik a web maga…
• HTML és CSS verziók
• PHP verziók
• Kiszolgálók (server)
• …úgy kell lépést tartania a böngészőknek is. Éppen ezért
fejlesztői szemmel fontos tudni és tisztában lenni az
egyes frissítések és újítások mikor hol és hogyan fognak
megjelenni.
• Az egyes frissítések mikor lesznek támogatottak az
egyes böngészőkben.
• Szükséges-e ”plusz kód” írása. (termék készítése)
48
51
Felkészülést segítő kérdések (vizsga)• Soroljon fel 2 darab újdonságot amelyet a HTML5 hozott magával grafikai
témakörben. Mire alkalmazhatóak ezek?• Mit jelent az, hogy van multimédia támogatás a HTML5-ben?• Ismertessen beviteli űrlapmező típusokat, azok funkcióját (5 db)!• Mi értelme egy hidden típusú beviteli mezőnek?• Mi a tipikus feldolgozás menete egy weboldal esetén? (szerver-kliens kapcs.)• Mik azok a placeholder-ek?• Ismertessen 4 db CSS3 újdonságot!• Mit értünk böngésző támogatottság alatt? Miért fontos ez és mi az értelme?• Mik tartoznak a webes ergonómia szempontjai közé?• Melyik a leginkább elterjedt böngésző jelenleg (kb. 60%) és ez milyen előnyökkel jár?
52
Köszönöm a figyelmet!Kérdés esetén e-mailben szívesen állok rendelkezésre.
Sipos Mikló[email protected]
