A webprogramozás alapjai. Óbudai Egyetem Neumann János Informatikai Kar 2018/19/1 szemeszter

1 A webprogramozás alapjai Óbudai Egyetem Neumann János Informatikai Kar 2018/19/1 szemeszter

VI. előadás HTML nyelv fontosabb elemei III. (HTML5 újdonságok) HTML nyelv fontosabb elemei IV. (űrlapok) CSS 3 animációk, a CSS jövője Web ergonómia Böngészők fejlődése

Hol állunk most? 3 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

HTML5 újdonságok I. (Canvas) 4 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

HTML5 újdonságok I. (SVG) 5 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.

HTML5 újdonságok II. (Multimédia I.) 6 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.

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

Űrlapok I. 9 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 formot képviseli, de egy form több űrlapmezőből (input) állhat.

Űrlapok II. (beviteli mező típusok I.) 10 TEXT EMAIL PASS

Űrlapok II. (beviteli mező típusok I.) 11 TEXT EMAIL PASS

Űrlapok II. (beviteli mező típusok II.) 12 CHECK BOX RADIO DATE

Űrlapok II. (beviteli mező típusok III.) 13 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. BUTTON

Űrlapok II. (beviteli mező típusok IV.) 14 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). HIDDEN

Űrlapok II. (beviteli mező típusok IV.) 15 Számos input típus van még, bővebben: https://www.w3schools.com/tags/att_input_type.asp IMAGE COLOR NUMBER RANGE FILE

Űrlapok II. (kód) 16 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.

Ű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 action attribú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 Security előadáson). lekérés feldolgozás kiszolgálás form küldés

Űrlapok IV. (input styling) 19 Hasonlóan a linkek esetében, itt is használhatjuk a :hover valamint :active selectorokat. :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.

Űrlapok IV. (input styling) 20 Ű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. +CSS

Űrlapok V. (extrák) 21 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.

CSS3 animációk 23 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

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. 25 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. translate() rotate() scale() Böngésző támogatottság!!!

CSS3 2D transzformációk II. 26 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() ) 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/ Y rotatex () rotatey() X rotatez()

CSS3 gradiensek I. 28 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)

CSS3 gradiensek II. 29

Böngésző támogatottság I. 30 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!

Böngésző támogatottság II. 31 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ágot mindig könnyen le tudjuk ellenőrizni!

A CSS jövője 32 A flash már nem támogatott. JavaScript segítségével tudunk animálni és egyéb eye-candy dolgot kreálni. CSS-selvalamivel ez egyszerűbb. 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.

Web ergonómia 34 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

Web ergonómia 35 Webergonómia - Jakob Nielsen nyomán

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) 38 Kertész Gábor 2016-os Kutatók Éjszakája előadása alapján

Az első szerver 39 Kertész Gábor 2016-os Kutatók Éjszakája előadása alapján

Böngésző fejlődés (Erwise 92) 40 Kertész Gábor 2016-os Kutatók Éjszakája előadása alapján

Böngésző fejlődés (ViolaWWW 92) 41 Kertész Gábor 2016-os Kutatók Éjszakája előadása alapján

Böngésző fejlődés (Lynx 92) 42 Kertész Gábor 2016-os Kutatók Éjszakája előadása alapján

Böngésző fejlődés (Cello 92-94) 43 Kertész Gábor 2016-os Kutatók Éjszakája előadása alapján

Böngésző fejlődés (Mosaic 93-97) 44 Kertész Gábor 2016-os Kutatók Éjszakája előadása alapján

Böngésző fejlődés (Netscape Navigator 94-2007) 45 Kertész Gábor 2016-os Kutatók Éjszakája előadása alapján

Böngésző fejlődés (IE 95-) 46 Kertész Gábor 2016-os Kutatók Éjszakája előadása alapján

Böngészők manapság 47 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 rengeteget kellett fejlődnie. Újabb és újabb igények jelentek meg: PDF olvasó Ilyen-olyan kiegészítők, add-on-ok, stb.

Böngészők fejlesztői szemmel 48 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)

Böngészők megoszlása 49 http://gs.statcounter.com/

Böngészők megoszlása 50 http://gs.statcounter.com/

Felkészülést segítő kérdések (vizsga) 52 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?

Köszönöm a figyelmet! Kérdés esetén e-mailben szívesen állok rendelkezésre. Sipos Miklós sipos.miklos@nik.uni-obuda.hu