L

Gyorsítsunk az oldal betöltésen

A közösségi portálok gyors és egyszerű kódokkal segítik a szolgáltatásaik beágyazását weboldalunkba. Egyszerű copy-paste (másolás-beillesztés) az egész. De ezzel van egy aprócska probléma. Minden ilyen közösségi oldal JavaScript kódot használ, ennek a "gördülékeny" megoldásához. Persze van lehetőség iframeben beilleszteni vagy egyéb finomságokkal játszani, de vegyük az átlagos esetet, mikor egyszerűen a Facebook HTML5 kódját használjuk. Tehát ehhez mindenképp kelleni fog egy JS kód is.

A JavaScript használata egyetlen gondot fog nekünk okozni, mégpedig, újabb lekéréseket fog indítani a céloldal felé. Ezzel növeli a betöltési időt, még több HTTP lekérést indít. Tehát egyetlen szóval: rossz.

Mi a jó megoldás? Használjuk helyette a megosztás linkeket.

Miért jó ez nekem? Most persze szintén a Facebookból indulok ki, és a saját megfigyeléseimből. Tehát, ha megosztasz valamit a Facere, akkor az a hírfolyamodban egyből megjelenik, hogy "XY shared a link". Végig görgetem a hírfolyamot és sehol sem látok olyat, hogy "XY liked a link", ez persze a chat felett jelenik meg a Tickerben. Arra nagyjából hetente 1x nézek rá, amikor az online ismerőseim között keresem azt, akire rá szeretnék írni.

Egyperces: I am The Fold

Pont múltkor beszélgettem egyik ismerősömmel, aki olyan megrendelést kapott, hogy az oldal tetején és alján is maradjon egy sáv, de a teljes szélesség ki legyen töltve.

Már akkor ráztam a fejem, hogy ez egy nagy baromság. Az emberek ész nélkül nyomkodják a Windowsos telepítéskor a Next gombot, feltelepítve ezzel 2000 toolbart és 42000 vírust. Nem is ezzel van a baj.

A fő kérdés inkább az, hogy ezt szépen, hogyan lehet megoldani? Egy tapasztalatlan, Next-nyomkodó felhasználónál egy csík marad az oldalból? Hogy fog ez egyáltalán jól működni?

Ha belegondolunk abba, hogy a monitorok sem ugyanakkorák, sőt a régi CRT-ket lehetett orrba-szájba állítgatni. Ha nem zavart a 60Hz, akkor egy 14colosból ki lehetett hozni 1280×1024-es felbontást is, holott a normális működés, 85Hz-n 1024×768 volt.

Bootstrap vs. Foundation

A Bootstrap és a Foundation talán mondhatjuk, hogy a legelterjedtebb CSS-keretrendszerek a weben. Személy szerint eddig a Bootstrapet támogattam, mivel már a 2.3.2 idején, vagy még lehet előtte, megismerkedtünk. Aztán, mikor kijött a 3-as, első körben baromira nem jött be. Még a Google+ fiókoman is hangot adtam ennek, pedig ritkán szoktam bármit is posztolni.

Persze, csak a már megszokott 2.3.2 miatti kirohanás része volt. Egyszerűen nem láttam át az új gridet. De még utána max 1-2 oldal készült 2-ben. Szépen lassan megszoktam a 3-at, sőt...

Tehát, elkezdtem tanulmányozgatni a 3-as Bootstrapet, de valahogy mindig kevésnek bizonyult. Akárhogy designolod, mindig megvan az a tipikus, 1-2 kattintás után érezhető Bootstrap-feeling. Elkezdtem vadászni a neten és ekkor találtam rá a Foundation-re. A ZURB által készített keretrendszer első ránézésre kicsit többet adott, mint a konkurencia. Tehát akkor kicsit összefoglalom, hogy melyik rendszer pontosan mit ad hozzá az élményhez. Persze, mint mindennek ezeknek is megvan a saját előnye és hátránya. Egyik rendszerhez sem húzok igazán, így talán reálisabb képet tudok felállítani.

Mit takar a "vh" és a "vw"?

Mint azt az előző bejegyzésemben is bemutattam van néhány újabb mértékegységünk, amit használhatunk a sitebuild során.

Az eddig ismert méretezési egységeink:

  • px
  • em
  • pt
  • rem
  • %

Amit pedig most fogunk kicsit körbejárni:

  • vh
  • vw

Jah és ne hagyjuk ki őket sem:

Font méretezés "rem"-mel

Elég heves viták folynak napjainkban is a megfelelő fontméret egységek kiválasztásában. Sajnos rengeteg előnye és hátránya is van a különböző technikáknak és nem ez az egyetlen felmerülő kérdés velük kapcsolatban.

Két fő technikát használunk/használtunk a CSS3 megjelenéséig.

  • Font méretezés pixelben
  • Font méretezés em-mel

Mielőtt bármibe belekezdenénk vegyük sorra, mik a rég bevált módszerek.

Tejüveg (frosted glass) effekt SVG-vel

A napokban elég sokat olvastam a különböző css effektekről. Sokszor van, hogy a grafikus speciális effekteket pakol egy-egy képre és ezeket meg kellene próbálni a lehető legélethűbb módon visszaadni. Ilyen effekt a mai tejüveg effekt vagy angolul a frosted glass effect.

GIMP alatt készítettem egy mintát, hogy körülbelül milyennek kellene lennie a a végső képünknek.

Nekünk innen az 5 pixelnyi külső keret fog kelleni. Ez is egy olyan effekt, amit legtöbbször a kép túlvágásával érünk el, így ha módosul a háttér, változtatunk a környezeten, akkor a képet ismét körbe kell vágni, és ráadásul pngben kell elmentenünk, ami az átlátszóság miatt jóval nagyobb méretű lesz.

Tehát, most el kell dönteni, hogy mit használunk. Első körben teljesen CSS alapokon akartam megcsinálni blur filterrel és CSS maskkal, de a böngésző támogatottságunk még mindig nem teljes. Canvast is használhatnánk, de ahhoz javascript szükséges. Így marad az SVG, aminek a böngésző támogatottsága is jó.

Szöveg textúrák CSS maszkolással

Vannak olyan helyzetek, amikor egy szöveg baromi jól illeszkedik az oldal designhoz, ha speciális effektek vannak rajta. Ha ezeket az effekteket lehagyjuk, akkor elveszíti az oldal a különleges kinézetét. Ilyenkor természetesen elkezdjük a designból képként kivágni a szövegeket. Ugye mondanom sem kell, hogy ez miért nem jó megoldás.

Első negatívum, hogy minden apró módosításkor, ismét át kell küldeni a grafikusnak, ő áttervezi, visszaküldi, kivágod, felteszed a szerverre. Semmi jó nincs ebben.

Második negatívum, hogy a png alapból jóval több helyet foglal el, mint a sima szöveges információ. Tegyük fel van 10 darab 30 KiloByte-os szöveged, már ott jársz, hogy 300 kiló csak egyetlen oldalon a képek mérete. Ne is beszéljünk arról, hogy ezeket mindet egyesével lekéri a böngésződ a szerverről. Rengeteg plusz idő és ráadásul rengeteg plusz információ.

CSS: Több elem sötétítése hover-re

Elég nehéz értelmes címet adni neki :) tehát amiről szó van. Van egy több boxból álló menü, slide vagy bármilyen panelünk. A feladat, hogy alap esetben minden box legyen világos, ha rávisszük az egeret, az aktuális box világos marad, a többi besötétedik.

A megoldást nemrég még simán jQuery-ben oldottam volna meg, de kicsit filózva rájöttem, hogy CSS segítségével is megoldható a probléma.

Mit is kell végig gondolni? Mi történik? Van egy nagy div, benne több kisebb div.

Leoamros

X

Üdv! Ha még személyesen nem ismerjük egymást, Smajda László vagyok, de szólíts csak egyszerűen Laccának vagy Leoamrosnak. Olyan netbúvároknak osztom az észt, akik szárnyaikat próbálgatják a PHP, MySQL, JavaScript világában, és elakadnak valamelyik folyamat során. Főleg a saját tapasztalatokat írom le, ettől függetlenül kérdezhetsz bátran, lehetőségeimhez mérten válaszolok.

Kategóriák
Címkék
Social Media
Eszközök