Webdealer

A Google piacra dobta az első telefonját, a Nexus One elnevezésű mobilt. Miért érdekes ez fejlesztők számára? Köztudott, hogy bármit is csinál az óriáscég legyen az jó vagy elképzelhetetlen, azt emberek milliói akarják azonnal. A telefonon nyílt forráskódú Android v2.1 operációs rendszert használja. Jelenleg "alig" 15 000 aplikáció található erre a platformra - szemben az iPhone 160 000-es számához képest. Itt a lehetőség, hogy feltaláljuk a spanyol viaszt.

Rákerestem a témára, és a hivatalos oldalon kívül találtam, első lépésekhez segítséget (sok link!). Van egyébként hazai androidos hírportált, remélem találtok elég infót az induláshoz.

Nem tudtam kihagyni, hogy ne posztoljam ide is ezt a gyönyörű órát.

Eszméletlen szép megoldás szerintem. A háttérképet folyamatosan forgatják CSS segítségével, itt a példa Firefox esetén: -moz-transform: rotate(); Webkit alatt is működik: -webkit-transform: rotate() És még IE7-8 alatt is! filter: progid:DXImageTransform.Microsoft.Matrix();Megjegyezném halkan, míg a FF és Webkitet használó böngészők alatt 1 sornyi kódot jelent IE esetében komolyabb Cos, Sin számításokat kell elvégezni.

Demót itt lehet megtekinteni.

Ma 7 órakor fog megjelenni a Firefox 3.6, amihhez már kész is a kompatibilis Firebug 1.5. Ahogy azt már megírta Ajaxian is, nincs többé "megjelent az új fájörfox és nincs működő fájörbug hozzá".

Megjelent a jQuery 1.4-es verziója. Jelentős sebességnövekedést értek el. Erről Bartházi András készített egy nagyon jó kis slideshowt a webakadémián.

Visszafelé kompatibilis nagyjából, így mindenképpen megéri váltani, a változások átnézése után.

Manapság több, nagy számban elterjedt böngészőről beszélhetünk (legalábbis eltérő verziószámúakról). Internet Explorer család (6, 7 és 8), Firefox (2, 3.0, 3.5). Ezek után jönnek az 1-2%-ot birtokoló böngészők: Google Chrome, Safari és Opera. Mind más és máshogy renderelik az oldalakat, így ugyanazon kódból eltérések jelentkezhetnek. Lassacskán kifog halni az IE6 használók tábora, miután a Windows XP eladások (ahol integrált volt ez a böngésző) mára már leálltak, a support pedig 1-2 éven belül felhagy a további támogatásokkal. Így a net fellendülése várható, a hátráltató tényezők megszűnésével. Nade vissz az eredeti témához: A különböző szabványokat követő böngészőkhöz kell minden fejlesztőnek egy CSS, Ajax, HTML, DOM debugger. Amellyel könnyedén tudunk belemódosítani a kódba, így tökéletesíteni weboldalunkat. Ehhez szeretnék kis segítséget nyújtani, A főbb böngészőkön végigmegyek és ajánlok 1-1 (máramennyire) használható hibakeresőt.

Firefox 2 - 3.5

Talán ehhez  böngészővel a legegyszerűbb a dolgunk. Egyszerű telepítés, kis méret és hatalmas tudástár. A firebugban van HttpRequestektet figyelő, javascript, css és html manipuláló, Net sebességmérő, és DOM objektumkezelő rendszer is. Ezen felül nagyon sok erre épülő modult találhatunk, amiből egyet-kettőt a későbbiekben be fogok mutatni.
Letölteni a FireBug legújabb verzióját innen lehet.

Internet Explorer 6-7-8

Talán erre a böngészőre a legnehezebb optimalizálni, ugyanis verziói között is hatalmas eltérések vannak CSS és Javascript terén is. Egy valamennyire használható debuggert találtam idáig hozzá, az IE Developer Toolbart. Mindegyik IE alatt működik (6-os verzió felett), főleg CSS és HTML manipulációra használható.

Meglepő lehet, de IE alá is (és Safari ill. Opera alá is) fel lehet erőltetni a FireBugot, ezt azonban nem próbáltam, körülményes telepítése miatt. Akit mégis érdekelne, itt megtekintheti.

Opera

Ezt sajnos még nem állt módomban kipróbálni, de ígéretesnek hanzik a leírás alapján. A firebugot megírták Opera alá. Css, javascript, DOM, http kérések debuggolása. Aki kiszeretné próbálni, itt érheti el.

Chrome

Bár a Chrome rendelkezik saját, beépített hibakezelővel, ezt korán sem hívhatnánk tökéletesnek. Külső alkalmazást viszont nem találtam még hozzá, így csak reménykedni tudunk, hogy hamarosan megjelenik valami ehhez a böngészőhöz is.

Ez az ingyenes és általam is sűrűn látogatott oldalon rengeteg jó és ténylegesen használható patternre találhatunk, nem lesz gond többé a hátterekkel. Regisztráció nélkül használható.

A weboldalon színre és formára(!) is lehet szűrni, a grafika meg nagyon tetszetősre sikeredett és mégsem veszít emiatt a használhatóságából. Ötletes a "Kill the fly" :) Egyszóval megéri benézni erre a weboldalra.

Nem lenne fair, ha nem mutatnám be a prototype egyik legnagyobb ellenfelét, a jQuery framework-t. A legújabb verziója mindösszesen 19 Kb tömörítve és gzippelve. Ebben is sok használható és jó osztály bekerült, mint például ajax, effects és events.

Utóbbiból érdemes kiemelni pár apróságot amely - szerintem - jobban sikerült mint a Prototypeban.

$(document).ready(function () {
    $("p").text("DOM betöltődött, módosításra kész.");
});

Mint az előbbi kódpéldából láthatjátok, oldalbetöltődés után a body > p elemének tartalmát ilyen egyszeráen lehet lecseréli.

$("p").live("click", function(){
     $(this).after("<p>Beszúrja ezt az elemet ill. szöveget a <P> után.</p>");
});


Az e feletti kódban a body > p elemre tettünk egy eseményt, amire ha rákattintunk lefut kódunk. Nem túl bonyolúlt, csak az aktuális elem után $(this) beszúr egy tetszőleges html szöveget.

Természetesen a live function első paraméterét lecserélhetjünk rengeteg másra is: mousedown, scroll, submit, resize, unload, stb.

Mérete miatt, mostanában azt beszélik ez lett a leggyorsabb Javascript könyvtár kategóriáján belül. Ennek utána fogok járni nem sokára.

Mindenesetre, aki most kezdi az ismerkedést egy nagyon jó alternatívát ismerhet meg jQueryben. Gyors és egyszerű, ahogy azt már megszokhattuk. Rengeteg könyvet írtak róla, így még könyebben sajátíthatjuk el ezek segítségével a használatát. Fontos megemlíteni, hogy talán ehhez találni a legtöbb ingyenes extension (kiegészítést), minden kategóriában. Effektektől kezdve, CSS manipulálásig.

Aktuális verziója 1.3.2 amit innen tudtok letölteni, online dokumentációt itt találtok hozzá.

Ez lesz az első design bemutató az oldalon. Itt már naprakészebb verziókkal tudok szolgálni - ígérem a kódolásban is befogom hozni a lemaradást, csak nem szeretném kihagyni az "alapokat".

(Teljes méret)

A fenti layout, igen csak színesre sikeredett webdesign. Színes webkettes mégis elegáns kinézetet kölcsönözhetünk oldalunknak vele. A tutoriált itt tudjátok megtekinteni.

Ez egy Javascript könyvtár, amely egy nemrégiben bemutatott könyvtárra épül, a prototypera.

Alapvetően ez a kiegészítő segít a HTML elemek mozgatásában, átalakításában, megváltoztatásában. Természetesen itt még nem fogy ki tudásának tárháza: Drag & Drop, DOM segédprogram, Ajax szabályozás és Unit test - kódfutás mérő.

Nagyszerű online dokumentációnak hála, pillanatok alatt elkészíthető az Effect objektum használatával szinte bármilyen animáció. Felhívnám a figyelmet a beépített Ajax.Autocompleterre (automatikus mezőkitöltés töredékszóból), a sorrendezhető elemekre (Sortable elements) és nem utolsó sorban a Builder osztályra.

Utóbbit kicsit kiemelném, egyszerűsége miatt. HTML elem létrehozása, talán nem volt még ilyen egyszerű:

var gyermek_elem = Builder.node('a', { src: '#' }, 'Link');
var uj_elem = Builder.node('div', { id: 'elem_azonosito_id', className: 'valamilyen_class' }, gyermek_elem);
$('celpont').appendChild(uj_elem);


Ezzel már létre is holtunk egy DIV elemet, amelyben van egy A tag. Utolsó sorban pedig elhelyezzünk a 'celpont' azonosítójú elembe.

Azért ha már a Builderre írtam egy kis bemutató kódot, írnék az Effect osztályhoz is. Ahogy az  a dokumentumban is megtalálható, itt is létrehozok egy egyszerű mozgatható div-et.

new Effect.Move('object', { x: 20, y: -30, mode: 'relative' });

A fenti kódhoz hasonlóan működik az összes effekt.

A legutolsó verziót már rég adták ki, de mint hamarosan ki fog derülni, a háttérben nem álltak meg a fejlesztések. Addig a scriptaculous 1.8.2-t innen lehet letölteni, a dokumentumtárat meg itt találjátok.

Ez egy adatbázis kezerő könyvtár, megy PHP és Python nyelvekhez nyújt nagy segítséget. Egyszerűen használható, több adatbázis típust is támogat: MySQL, MySQLi, PostgreSQL,  SQLite, MS SQL, LDAP, Oracle, hogy csak az ismertebbeket soroljam fel. Teljes lista itt található.

Nagy teljesítményű, jól struktúrált és dokumentált, így nevetve lehet elsajátítani a használatát. Nagyobb portálokban ez sem hiányozhat. Így egy adatbázis váltásnál nem kell újraírni az egész kódot, elég csak az entitásokat.

 Példa egy egyszerű csatlakozáshoz:

$db = NewADOConnection("mysql://$user:$pwd@$server/$db?persist");

Tetszőleges SQL kód futtatása, behelyetesítő értékekkel:

$ok = $DB->Execute("UPDATE table SET col1=? WHERE key=?", array($colval, $key));
Adatok lekérése az adatbázisból:

$val = $DB->GetOne($sql);
$row = $DB->GetRow($sql);
$arr = $DB->GetAll($sql);

// Asszociatív tömbbel tér vissza ($key=>$col)
$arr = $DB->GetAssoc("SELECT key, col FROM table");Gyorsítótárazás lekérdezésnél. Így tud méggyorsabb teljesítményt elérni az AdoDB, ugyanis a már gyorsítótárazott sorokat / lekérdezéseket újrafelhasználja.

$rs = $DB->CacheExecute(3600, "SELECT * FROM users WHERE  user='webdealer'");


A fenti példa 3600 másodpercre kesseli el a lekérdezett adatokat. Természetesen több lekérdezési módszer is rendelezésünkre áll:

• CacheGetOne
• CacheRow
• CacheGetAll
• stb.

A legfrissebb verzió az 509a, csak PHP 5-t támogatja, amelyet letölteni itt tudtok. PHP 4 support már megszünt majdnem 1 éve. Online (up2date) dokumentációt itt találhattok hozzá.

Egy nagyobb weboldalnál az átláthatóság és a gyorsabb továbbfejleszthetőség / módosítás érdekében, elengedhetetlen a sablonok használata, ebben segít nekünk a Smarty.

A sablonozás rém egyszerű: html fájlokban történik a kód kialakítása, HTML és speciális karakterek használatával (nincs többé inline php kód html fájlokban), amelyet a Smarty fog feldolgozni (átalakítani), majd gyorsítótárazni - amennyiben szeretnénk. Ekkor a megírt templéteket PHP fájlokká alakítja, így biztosítva a beépülő modulok és kiegészítők, a későbbiekben való módosíthatóságát / felhasználhatóságát. Sablonok használatával a kód újrafelhasználhatósága nagy számban javulhat. Sokat segíthet még a fejlett debug funkciói is.

{* Smarty *}
{foreach from=$data item="entry"}
   <div bgcolor="{cycle values="#dedede,#eeeeee" advance=false}">
     {$entry.Name|escape} - {$entry.EntryDate|date_format:"%e %b, %Y %H:%M:%S"}
   </div>
   <div>
      {$entry.Comment|escape|default:"Üres hozzászólás"}
   </div>
{foreachelse}
   <div>Nincsenek sorok</div>
{/foreach}

A fenti kódban találhattok egy foreachet, benne egy soronként váltakozó értékű bgcolort, pár változót, amelyeket escapelünk, dátumot formázunk vagy éppen alapértelmezett (default) értéket adunk meg nekik.

Támogatja a PHP 4-5 is. Utolsó stabil verziója a 2.6.26-os, amit 2009. június 26-n adtak ki.

Letölteni innen lehet, online dokumentációt itt találtok róla.

Egy régi, de még mindig fejlődő Javascript library, amely nélkül a JS kódolás már elképzelhetetlen számomra. Pofon egyszerű Ajax kérések, böngészőfüggetlen megoldások, DOM elem kezelés és persze ami még számottevőbb: kevesebb kódírás szükséges.

Pár egyszerű példa:

Kiemelném még az eseménykezelését, amely az Event osztályba van bezárva.

$('pelda').observe('click', esemenyKattintasnal);

Kiszeretnék emelni még pár nagyon jó osztályt, amelyeket jómagam is minden nap használok: Ajax, Form, Object.

Jelenleg az 1.6.1-es verziója a legújabb, amely 2009. szemptember 1. napján vált elérhetővé. Legutóbbi verzióban további teljesítménynövekedést tudtak elérni. Mérete kissé nagy, de tudása mellett eltörpül.

Letölteni innen lehet, online dokumentációt itt találtok hozzá, offlinet pedig itt, kérdések és észrevételek a hozzászólásokba jöhetnek.

Az oldalt megpróbálom a legérdekesebb és leghasznosabb webes témákkal feltölteni.

Munkám és hobim a webfejlesztés, emiatt jött létre ez a blog. Szeretném olvasóimnak bemutatni a legújabb és/vagy leghasználhatóbb könyvtárakat, nyílt forráskódokat vagy éppen a legtrendibb web 2.0-es dizájnokat, ötleteket, elképzeléseket.

Kritikákat várom a kommentek formájában.