A Bootstrap használata - 1. rész

A Bootstrap használata - 1. rész

Az előző elképzelésem szerint az eredeti Bootstrap leírást - kicsit kibővítve - szerettem volna feltölteni az oldalra bejegyzésenként. Sokat törtem rajta a fejem, hogy ez jó megoldás-e.

Nem szeretnék csak szimpla magyarosításokat gyártani, ettől kicsit többet akartam kihozni a sorozatból. Így én más szemszögből közelítettem meg a dolgot. Megkértem egy régi barátomat, aki természetesen szeretné elsajátítani a Bootstrap használatát, hogy tegye fel a kérdéseit, ami jelen pillanatban, mint kezdő foglalkoztatja. A bejegyzést a lehető legalapabbra terveztem, szóval ha haladó vagy a témában, nem sok újat fogok mondani.

Teljes bejegyzés
Bootstrap használata - Alapok

Bootstrap használata - Alapok

Elég kevés leírás található magyar nyelven a Bootstrap használatáról, így most úgy döntöttem, hogy részben a Bootstrap hivatalos leírásából, részben saját tapasztalatokból, elkezdek egy Bootstrap sorozatot.

Ez nem lesz túlságosan élménygazdag azoknak, akik már ismerik, sőt... Nekik kifejezetten semmit sem fog mondani. De a kezdőknek, és kevésbé angolos "bajtársaknak" remélem, sokat segít.

Teljes bejegyzés
Gyorsítsunk az oldal betöltésen

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.

Teljes bejegyzés
Egyperces: I am The Fold

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.

Teljes bejegyzés
Egyperces: CSS - object-fit

Egyperces: CSS - object-fit

Elég sokat gondolkodtam rajta, hogy mikor mondjuk csinálok egy képgalériát, vagy csak simán egy webshop termék oldalát, meg tudom-e oldani valahogy, hogy a programnak ne kelljen 1000 különböző képet létrehoznia.

Volt egy oldal, ahol a grafikai tervek miatt 16 különböző méretarányú képet kellett használni. Tehát írtam egy php scriptet, ami mindig legenerálja - ha nem létezik - a megfelelő méretű képet. Ezzel eddig nincs is gond, mert a képek a méretezés miatt csak néhány KB helyet foglalnak, de azért sok kicsi sokra megy.

Most találtam rá nemrég a CSS egyik szolgáltatására az object-fitre.

Teljes bejegyzés
Egyperces: CSS mértékegységek

Egyperces: CSS mértékegységek

Már írtam hosszabban néhány relatív mértékegységről, mint például a vh és vw használatáról vagy a rem-ről.

Sokan bele sem gondolunk szerintem, hogy hány különböző méretezési lehetőség van a CSS-ben. Én is a napokban futottam bele egy érdekes oldalba, ahol összeszedték és vizuálisan ábrázolták is mindegyiket.

A CSS Ruler névre keresztelt oldalon megtaláljuk ábrázolva az összes relatív, abszolút és látótérhez százalékos mértékben számolt értékeket és akár játszhatunk is vele:

Teljes bejegyzés
Bootstrap vs. Foundation

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.

Teljes bejegyzés
Mit takar a

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

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.

Teljes bejegyzés
Tejüveg (frosted glass) effekt SVG-vel

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ó.

Teljes bejegyzés
Szöveg textúrák CSS maszkolással

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ó.

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

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.

Teljes bejegyzés
Miért látszik folyamatosan a YouTube videó?

Miért látszik folyamatosan a YouTube videó?

Sok embernek okoz gondot, hogy egy beépített YouTube videó mindig az elemek fölé kerül. Így jártam jelen pillanatban én is.

Egy admin felületen vizuális panelszerkesztő felületet csinálok, ahol az oldal elemeit valós időben lehet szerkeszteni. YouTube panel, slideshow, szövegbox. Bármit hozzáadhat az admin… A panelekről információt kérhetünk le, egy kis “i” gombra kattintva, ami egy beúszó ablakban jön be.

Eleinte fel sem tűnt, hogy a YouTube videók megpróbálnak minden elem fölé kerülni. Egy darabig ez nem is zavart, csak mikor egy teljes szerkesztő felületen lett az inputok és gombok helyén YouTube video részlet. Először próbálkoztam azzal, ami ilyenkor elsőként eszembe jut, z-index az elemen. Jó pár 9-es után sem javult a helyzet, így ismét Gugliztam kicsit.

Teljes bejegyzés
A flash és a Google

A flash és a Google

Érdemes-e feláldozni oldalunkat a speciális effektusok és csilli-villi oldal miatt? Azaz mennyire haználhatjuk a weben a régi flash alapú oldalainkat? A flash tartalomnál felmerül a kérdés, hogy érdemes-e használni a weboldalon, hiszen a Google elég szegényesen indexeli. Nem a flash technológiát kell ezért vádolni, hiszen dekoratív, látványos elemeket tudunk vele oldalunkba építeni. A flash semmivel sem rosszabb a keresők számára, mint az AJAX. Ésszel használva, nem kell eltemetnünk a keresőkben való megjelenésünket.

Teljes bejegyzés