Kategória: HTML

Responsive weboldal, azaz a megjelenés illeszkedik a kijelző méretéhez, első oldalam.

Az utóbbi másfél évben rohamosan terjednek el a Tablet-ek, Okostelefonok, amíg 2-3 évvel ezelőtt a Laptop volt a menő eszköz ma már hála Steve Jobs-nak és sok ügyes termékfejlesztőnek minden háztartásban jelen van egy Okostelefon vagy Tablet. Ezen eszközöknek köszönhetően, már egyre kevesebbet kapcsoljuk be otthoni számítógépünket is. A mobilinternet széleskörű elterjedés és a sok ingyenes Wifi pont által, szinte bárhonnan tudunk ezekkel az eszközökkel a neten böngészni.

Mint PHP programozó, webfejlsztő látva a technikai újdonságok gyors elterjedését szerény véleményem szerint, ha valaki egy weboldalt szertne készítettni akar annak már gondolnia kell az új eszközökre is. Most írathatnánk Windows, Android, IOS App-ot ezen eszközökre, de első körben szerintem felesleges pénzkidobás lenne. Egy profibb weboldal ezen eszközökön is simán elfut.

Aki nem akar lemaradni és ezzel versenyhátrányba kerülni, annak mindenképpen érdemes – főleg ha a meglévő oldal átalakításán vagy új weboldal készítésén – gondolkodik, akár egy kicsivel nagyobb költségkeretet, vagy egyes funkciók elhagyásának kárára olyan weboldalt készíteni, ami remekül elfut a jelenlegi technika új eszközein is.

Ezen felbuzdulva próba képpen, egy olyan HTML + Javascript keretrendszert kezdtem el használni, ami valamiféle útmutatást és eszköztárat ad arra, hogyan érdemes felépíteni egy ilyen weboldalt. Az első és leglátványosabb ilyen munkám, a saját tulajdonú online képeslapküldő rendszer a http://happybon.eu lett. Ezen az oldalon a Bootstrap keretrendszerben rejlő megoldásokat használtam kis átszínezéssel és így egy könnyen használható, egyedi, okostelefonról és tabletről is működő képeslap küldő rendszert sikerült összeraknom. Pár kattintással, akár ebéd közben a telefont nyomkodva 1 perc alatt egy egyedi ajándékkal tudod meglepni ismerősödet.

CodeIgniter layout és nézetek (views) kezelése

A CodeIgniter szerencsére, egy gyors könnyen testreszabható kis keretrendszer. Most egy példát mutatunk arra, hogyan lehet egy dinamikus weboldalt különböző elrendezések alapján felépíteni. Az elrendezés(layout) kialakítása sokkal egyszerűbbnek tűnik mint Zend Framework használatával. Kevesebb a megkötés szabadabb a fejlesztő.

Működési elvét tekintve megegyezik a legtöbb MVC felépítéssel bíró PHP-s keretrendszerrel, a Vezérlők(Controller), Események(Action), Nézetek(Views) itt is megtalálhatóak, és ugyanazon elv szerint működnek mint bármelyik hasonló keretrendszerben.

De mi is ez működési elv?

Az összes szerverhez érkező kérést a public_html könyvtárban található .htaccess fájllal az  index.php fájlra irányítjuk.

A public_html fájlban található .htaccess tartalmát módosítsuk erre:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond $1 !^(index\.php|images|robots\.txt)
RewriteRule ^(.*)$ index.php?$1 [L]

Ehhez Apache szerverünkön a mod_rewrite modulnak természetesen be kapcsolt állapotban kell lennie.

Ha meghívjuk a http://ci.tld/welcome URL címet, akkor a Welcome vezérlő Index eseménye kerül meghívásra azaz ez a kérés: http://ci.tld/welcome/index kerül kiszolgálásra. A kérés hatására betöltődik a welcome vezérlő index eseményében meghatározott nézet, alapesetben ez:

$this->load->view(‘welcome_message’);

azaz a CodeIgniter betölti a views könyvtárunkban található welcome_message.php nevezetű fájl tartalmát. Ha minden egyes eseményhez elkészítünk egy ilyen nézetet, akkor egy szál híján visszatérünk a statikus oldalak világába. “CodeIgniter layout és nézetek (views) kezelése” Tovább olvasása

jQuerytools Scrollable és Fancybox Galéria

A jquerytools.org egy a legfontosabb építő elemként tünteti fel magát a modern weboldalak működéséhez. Ennek a gyűjteménynek van egy úgynevezett scrollable eszköze, amely divek görgetését hivatott elvégezni, horizontális vertikális irányban, illetve a jquerytools további eszközeivel egyéb érdekes megoldások elkészítésére is alkalmas. Egy projektemben azonban ezt a görgető elemet kellett összehoznom, a Fancybox Galériával.

Az alapfeltevés, hogy a scrollable-ben a diveket egyesével szeretnénk mozgatni jobbra illetve balra és mindezt automatikusan körbe azaz circular paramétert true-ra állítva. Mivel egyszerre egy divet és nem egy teljes nézetet(3-4 divet ami egyszerre látszik) szeretnénk mozgatni ezért a weben található clone módszerrel oldjuk ezt meg: “jQuerytools Scrollable és Fancybox Galéria” Tovább olvasása

html div img vertical-align:middle probléma és egy lehetséges megoldása

Meguntam, hogy minden ilyen vertical-align-os igazítást táblázattal oldok meg. Most megint ebbe a problémába ütköztem és végre rászántam az időt a probléma megoldására.

Az alapprobléma a következő:
Van egy fix méretű divünk és benne egy képi elemet akarunk vertikálisan és horizontálisan is középre igazítani. Ez egy hétköznapi probléma.

Miért írom én most ezt a cikket?
Sok helyen olvastam utána, hol és hogyan érdemes megoldani ezt a problémát. Sok helyen a kérdezőt, oltogatták és céloztak a megoldásra pl.: a weblaboron… olyan kioktatós jellegű hozzászólások voltak nagy számban, persze tisztelet a kivételnek. Nos én ezeket a bejegyzéseket vagy 5 ször átrágtam és nem igazán jutottam el a megoldáshoz, mivel elméleti szinten nagyon jól megmondják, csak példával nincs illusztrálva! Igazán akkor tudja megérteni az ember, ha megkeresi maga a megoldáshoz vezető utat. Nekem ez cirka 10 órámba került…

A feladat:
Adott egy fix méretű div és benne vertikálisan és horizontálisan is középre akarunk helyezni egy képi elemet. “html div img vertical-align:middle probléma és egy lehetséges megoldása” Tovább olvasása

Saját jquery függvényünk elkészítése és meghívása

Weboldal fejlesztés közben, szükségünk lehet egyedi magunk által fejlesztett akár paraméterrel is rendelkező jquery függvényre. Számtalan helyen le van írva,  hogy ha egy click esemény történik akkor, hogyan lehet azt elkapni, és ekkor a kért módosításokat elvégezni, ez mind szép és jó, de ha egy weboldalt generálunk, ahol nem tudjuk előre hány elem és milyen id-vel class-al fog szerepelni, és ezt előre meghatározni nehéz szinte lehetetlen, ekkor én paraméterrel rendelkező függvényt szoktam meghívni ami elvégzi azokat a módosításokat ellenőrzéseket amik szükségesek.

Hogyan néz ki egy paraméterrel rendelkező saját magunk által írt jquery függvény?

Az alábbi példa válasz a fenti kérdésre :

jQuery.fn.fShowElement = function(cid){
if($("#elementid_"+String(cid)).is(':hidden')){
var i = 0;
while($("#elementid_"+String(++i)).length > 0){
$("#elementid_"+String(i)).hide();
}
$("#elementid_"+String(cid)).show();
}
};

A fenti kód annyit csinál, hogy végigfut az oldalon és a #elemntid_1-től amíg létezik az összes ilyen div css display tulajdonságát none-ra állatja majd, a paraméterben kapottat megjeleníti.

Most már van egy függvényünk, ami csinál is valamit, nah de mikor hívjuk meg? Mi azt szeretnénk, hogy ha ez a paraméterrel rendelkező függvény egy bizonyos div-en történő kattintáskor hívódjon meg. Egy bizonyos ez kicsit téves megfogalmazás, ugyanis sejtésünk sincs arra vonatkozóan, hogy a jövőben mindig csak a 3. elem esetén fusson le a függvényünk. Viszont azt tudjuk az oldal generáláskor, hogy ha erre a div-re kattint akkor függvényünket milyen paraméterrel kell meghívni. Így az elemnek definiáljuk az onclick eseményét és hogy mit kell meghívni, ezt a HTML tag onlick eseményében az alábbi módon tehetjük:

onclick="$(this).fShowElement(1);"

Ezzel, egy HTML tag onclick eseményénél megadtuk, hogy hogyan kell meghívni  a saját paraméterrel rendelkező jquery-s függvényünket.

Egyszerűnek tűnik, én is azt gondoltam de több napomba került mire kisilabizáltam, hogyan is kell ezt megvalósítani, mivel szinte sehol sincs leírva ez a hasznos információ.

960 Grid System – tapasztalatok

Sokszor nagyon fontos, hogy egy weboldal grafikai terve és ennek megvalósíthatósága legyen gyors a rövid határidők miatt. Eme megfontolásból, valahogy gyorsítani akartuk a kivitelezést. Grafikus tervező ismerőseim ekkor ajánlották figyelmembe a 960.gc tervezési és kivitelezési lehetőséget. Weboldalak sablonszerű felépítését, tulajdonképpen template építését segíti, ez a tervezési és megvalósítási lehetőség. Titka annyiból áll, hogy a weboldal tartalmi, képi elemeit valamilyen táblázatos(oszlopos) elrendezés szerint alakíthatjuk ki.

A weboldal kiegészítőkkel látja el a grafikai programok szinte mindegyikét, hogy már a tervezéskor illeszkedjen az elkészítendő weboldal az oszlopokra, tulajdonképpen ez a legfontosabb eleme a 960 Grid System használatának. Eme kiegészítő segítségével grafikus már könnyedén tud olyan weboldal grafikát építeni ami illeszkedik az oszlopokra.

Az oldal lehetőséget biztosít az egyedi grafika által megadott szélesség és a tervezéskor figyelembe vett oszlopszám alapján legenerálni a sitebuilder számára egy css-fájlt, aminek használatával, a weboldal felépítése is gyorsabbá válik.

Én a napokban próbáltam elkészíteni az első ilyen weboldalt. Hát mint mindennek, ennek a technikának is vannak hátrányai. Ha a grafikus szereti a blokkokat függőleges vonalakkal elválasztani, akkor ez a technika szinte használhatatlan, ugyanis ebben az esetben elveszik minden előnye.

Nézzünk egy példát:

Vegyünk:  70px oszlopszélességet

10px eltartást az oszlopon belül, így a weboldal bal jobb oldalán 10px eltartás lesz míg az oszlopok között tehát a belső részeken 20px.

Számoljunk 12 oszloppal.

A technika előnye abban rejlik, hogy a blokkoknak valamilyen háttérszínt adhatunk meg, így különülnek el egymástól könnyedén. Az eltartás az oszlopok között margin css tulajdonsággal adják meg, ennek hátránya, hogy ez a háttérképekre színekre, vonalakra tartalomra, egyszóval mindenre hatással van. Van két css osztály “alpha, omega”, előbbi az oszlop előtti eltartást redukálja 0-ra míg az utóbbi az oszlop utánit. Gondolnánk hoho nincs akkor probléma, de van hiszen az oszlopok szélességei fixek, így az alpha omega css osztály div-hez rendeléssel tulajdonképpen, az eltartást vettük 0-ra de ettől még az oszlop szélessége nem nő meg 10- 10 pixellel. A border tulajdonságnak egy hátránya van, hogy számít a szélessége, így ha két ilyen grid systemes blokkot vonallal szeretnénk elválasztani, ott vagyunk ahol  a part szakad, jöhet a fejszámolás a pixelek tologatása és a weboldal kivitelezése is lassul.

Egy szó mint száz, 960 Grid Systemmel csak akkor érdemes weboldalt, vagy weboldal templatet tervezni, ha egy egyszerű a tartalmi blokkokat egymástól nem vonallal elválasztó weboldalt szeretnénk megvalósítani, ugyanis ilyen esetekben a weboldal elkészítése nem gyorsul sőt inkább lassul mert időközben felül kell írni a Grid System által beállított szélességeket.

Minden más esetben optimális lehet használata, főleg ha a megszerkesztett grafika is illeszkedik hozzá. Ha van 12 oszlopunk  akkor az egymás után következő 3 divnek a grid_4 css osztályt állítjuk be akkor az nem más mint egymás mellett 3 oszlop 20-20 pixel eltartással és 310px tartalmi szélességgel. A weboldal jobb és bal oldalától pedig 10-10 pixel eltartás.

Facebook cacheből hozza a bélyegképet az oldalról, ennek frissítése

A napokban, egy érdekes problémával találtam magam szembe:

Korábban elkészítettünk egy weboldalt, amiben megadtuk, hogy milyen bélyegkép jelenjen meg a facebookon, ha megosztja valaki. Ennek akkor nagyon örültünk, működött minden rendben. A minap ennek a weboldalnak egy friss tartalomdús új változata került élesítésre, ezen a weboldalon már más bélyegkép(ek)et állítottunk be, mint a korábbin. Azonban amikor ügyfelünk megakarta osztani rajongóival az örömhírt, a facebook még mindig a régi képet hozta bélyegképként, elsőre nem értettük mi a probléma, hiszen mi teljesen mást adtunk meg.  Kitöröltük a korábbi képet a szerverről, nah mi történt ennek hatására?

Semmi.

Még mindig a régi kép jött fel, megosztáskor 😦

A “Hiba” oka cache, a facebook letárolja az egyszer megosztott weboldalról az információkat lementi,és minden egyes megosztásnál ezen információk alapján jelennek meg az adatok az oldalról.

Mi lehet a megoldás?

Valahogyan ki kellene töröltetni a facebook-al az eltárolt adatokat és a frisset elmentetni vele. Kis google-zás után erre az oldalra akadtam. Ekkor találtam rá én is erre a hasznos kis eszközre, a lint-re. Ennek a kis eszköz segítségével a facebook rávehető hogy újra olvassa az adatokat a weboldalunkról. Megosztandó bélyegkép, cím egyebek újra letároltatására alkalmas, illetve megmutatja milyen problémák lehetnek a weboldallal a facebook szemszögéből.

Hasznos kis eszköz, gondoltam megemlítem, hátha valaki belefut ugyanebbe a problémába.

Így 2014-ben sem árt frissen tartani az információt, a fent említett eszköznek időközben Facebook Debugger lett  a neve Google-ban rákeresve már könnyebb megtalálni, de itt a direkt link. Be kell jelentkezni Facebookba a használatához.