Analóg óra készítése Photoshop és Flash segítségével

Írta: | 2011. június 26. | kategóriák: Photoshop | Nincs megjegyzés

Ebben a 3 részes írásban egy analóg órát fogunk elkészíteni, muködésre bírni valamint, beilleszteni weboldalunkba. Az elso részben elkészítjük magát az órát Photoshop CS3-ban. A második részben “beindítjuk” Flash CS3-ban, és végül beillesztjük egy html oldalba SWFObject segítségével.

I. rész Photoshop

Amit elkészítünk.

A kész óra

Elolvasom a teljes bejegyzést »

jQuery: Alapok

Írta: | 2011. március 26. | kategóriák: Alapok, JavaScript, Programozás | 4 megjegyzés

Miután sikeresen letöltötted a jQuery keretrendszert, itt az ideje, hogy tovább lépj! Mint minden más JavaScript állományt, ezt is a <script type=”text/javascript”></script> tag-ekkel tudod a HTML oldaladba ágyazni.

Kezdjük azzal, hogy mivel amíg a DOM nincs felépítve nem szabad JavaScript kódot futtatni, mert elronthatja az oldal szerkezetét, ha a félig felépített DOM-ot akarod szerkeszteni (vagy egyszerűen JavaScript hibát ad, ha például egy elemet elszeretnél rejteni, de az még nincs a DOM-ba bekerülve, így nem található). Ez egy általános JavaScript probléma, a jQuery megoldása viszont egyszerű!

$(document).ready(function(){ alert('igen!'); });

Elolvasom a teljes bejegyzést »

jQuery: A Framework

Írta: | 2011. január 09. | kategóriák: Alapok, JavaScript, Programozás | Nincs megjegyzés

A jQuery keretrendszer 2006 januárjában látott először napvilagot a BarCamp elnevezést viselő rendezvényen, New Yorkban. A bemutató John Resig volt. Jelenleg a legelterjedtebb JavaScript framework úgy a nagy és elismert, mint a kissebb és kevésbé neves weboldalak esetében. A keretrendszer ingyenes és nyiltforráskodú.

Elolvasom a teljes bejegyzést »

jQuery: JavaScript Framework alapok

Írta: | 2010. december 11. | kategóriák: Alapok, JavaScript, Programozás | Nincs megjegyzés

A JavaScript nyelv önmagában is egy nagyon jól és könnyedén használható, erőteljes programozási eszköz. Rengeteg dolog egyszerűen megoldható vele, de nem előnyös a kódot mindig ismételni, mivel az több gondot is okozhat (hibajavítás, rendbentartás, továbbfejlesztési nehézségek, stb.). További szükség a JavaScript könyvtárak/keretrendszerek létrehozására, hogy az alapokat nem feltétlenül ismerő felhasználók is gyorsan és egyszerűen tudjanak cross-browser animációkat, AJAX lekéréseket és egyéb dolgokat végezni. Mára már szinte nélkülözhetetlen egy jó framework a gyors, bővíthető, megbízható fejlesztéshez.

A legtöbb framework cross-browser akár több, mint 10 évre visszamenőleg is (a Rico keretrendszer az Internet Explorer 5.5-öt is támogatja). Közös pontjaik közé tartoznak a AJAX lekérések, a JSON feldolgozása, drag and drop, egyszerű és komplex animációk, event handling (esemény kezelés), űrlap validálás és űrlap elem kiegészítés (pl. naptár), illetve beépített szövegszerkesztő.

Elolvasom a teljes bejegyzést »

jQuery: Bevezető

Írta: | 2010. december 05. | kategóriák: Alapok, JavaScript, Programozás | 9 megjegyzés

Bizonyára többen használtatok már JavaScript-et és JavaScript keretrendszereket. Ez a leírás sorozat főként azoknak szól, akik még nem vagy keveset használtak JavaScript Framework-okat. A fókusz a jQuery-re esett, mivel ez az egyik legelterjedtebb és legerőteljesebb keretrendeszer, ami a JavaScript-re épül.

A leírás sorozat az alapoktól indulva a haladó témákig próbál különböző területeket érinteni. A követlező témákról lesz szó:

  1. JavaScript Framework alapok
  2. A Framework
  3. Alapok
  4. Szelektorok és DOM bejárás
  5. Mark-up módosítás
  6. Stílus módosítás
  7. Egyéni adat kezelés
  8. Effektek
  9. Események (event)
  10. AJAX
  11. Űrlapok
  12. Plug-in készítése
  13. Legjobb 15 kiegészítő
  14. jQueryUI
  15. jQueryMobile

Elolvasom a teljes bejegyzést »

Űrlapok készítése és formázása: CSS és jQuery trükkök

Írta: | 2010. augusztus 21. | kategóriák: (X)HTML, CSS, JavaScript, Speciális | 10 megjegyzés

Sokaknak a mai napig gondot vagy fejtörést okoz az (X)HTML űrlapok készítése. Régen táblázatokkal volt megoldva a formázás, természetesen ez nem helyes szemantikailag. Ha kinézetre nem is feltétlenül változtak a régebbi form-ok, jópár éve már az úgynevezett float-olt technikát használják. Az egyik legnagyobb előnye, hogy az űrlap kódja logikailag is helyes lesz, így az oldalunk elérhetőbb lesz a fogyatékos internetezők számára is (például a látássérülteknek, akik képernyő felolvasót használnak). Ez a leírás megmutatja, hogyan lehet egyszerű és mégis helyes form-okat készíteni, illetve néhány hasznos trükkre is felhívja a figyelmet, ami nem feltétlen a fogyatékos felhasználókat célozza meg, de az átlagfelhasználó életét nagyban megkönnyítheti, felgyorsíthatja annak munkáját.

Elolvasom a teljes bejegyzést »

Hogyan írjunk jó leírást?

Írta: | 2010. április 23. | kategóriák: Alapok, Web | 17 megjegyzés

Ebben a segédletben tíz olyan dologgal ismerkedhetsz meg, ami elengedhetetlen egy sikeres leírás készítéséhez! Kezdjük is az egyik legfontosabbal: legyen használható, amiről írsz!

1. Felhasználhatóság

Amit írsz, az legyen hasznos! Hiába írsz olyasmit, amit az olvasó nem tud újrahasznosítani saját projektjeiben, dolgaiban, vagy amiből nem merít ötletet.

2. Hatás

Figyelj, hogy az elbeszélt dolog tegyen mély benyomást az olvasóra. Két okból is fontos ez a pont: egyrészt megfogod a látogatót és vissza fog járni az oldaladra, másrészt segít, hogy megjegyezze és másoknak is megemlítse, hogy igen, itt és itt nagyon jó ötletet láttam, többször is.

Elolvasom a teljes bejegyzést »

Photoshop tutorial linkgyűjtemény 2.rész

Írta: | 2010. január 06. | kategóriák: Design, Photoshop | 7 megjegyzés

Sziasztok! Ahogy ígértem elkészült a 2. rész is. Remélem sikerült érdekes linkeket összegyűjtenem számotokra. Ezeket az oldalakat is sokszor látogatom, hiszen rengeteg tippet, trükköt, praktikát lehet tanulni belőlük. Talán már egyik-másik link lehet, hogy ismerős számotokra. Nézzétek el nekem, hogy most nem részletezem a linkek tartalmát. Beszéljen helyettem inkább a megtekintett tartalom. Jó böngészést. A tutorialokhoz pedig jó tanulást.

Steven.

  1. Grafpedia
  2. Photoshoproadmap
  3. Myfreetutorials
  4. PSD.tutsplus
  5. 1stwebdesigner
  6. Vandelaydesign
  7. Tutorial9
  8. Good-Tutorials
  9. Noupe
  10. Abduzeedo
  11. Webdesignledger

Photoshop tutorial linkgyűjtemény 1.rész

Írta: | 2009. november 15. | kategóriák: Photoshop | 6 megjegyzés

Photohsop linkgyűjtemény

Mostanában újra elő veszem az Adobe Photoshop CS3 tankönyvemet, hogy ne felejtsem az alaptudásomat. Mióta megjelent a CS4 tankönyv már az alapok nem nyújtanak valami nagy izgalmat, mivel a CS4 verzió igen csak kibővült egy-két újdonsággal köztük a 3D alkalmazással. Ezért nekiestem a témának és kutakodtam a neten, hogy találjak pár jó kis tutorial oldalt. Kiválogattam azokat, amelyek elnyerték tetszésemet (így tettem a Flash linkgyűjteménnyel kapcsolatban is). Bárki könnyedén találhat ilyeneket, de mégis időmet nem kímélve ezt megtettem helyettetek. Remélem tetszeni fognak. Jó tanulást!

Elolvasom a teljes bejegyzést »

Preloader (előtöltő) készítése Flash CS4 Actionscript 3 –al lépésről-lépésre

Írta: | 2009. október 04. | kategóriák: Flash | 8 megjegyzés

Elnézést kérek Steventől és az olvasóktól, hogy csak mostanra sikerült átolvasni a leírást. Azt hiszem, hogy ez a leírás mesterpéldája a részletes, kezdőkre is gondoló, alapos leírásnak: úgy a magyar hálón, mint a nemzetközi tutoriálos oldalakon egyaránt.

Köszönjük szépen!

Steven Flash CS4 preloader tutorial PDF

A leíráshoz tartozó képek letöltése.

A leírás végeredménye és az FLA file letöltése.

A lecke alatt elkészítünk egy előtöltőt, ami lefoglalja a nézőt, míg a flash lejátszója betölti a tartalmat. Jelen példában egy autó képét fogjuk megjeleníteni egy Alpha átmenetes hatással. A leckében megismerkedhetünk a Flash CS4 alapjaival és az Actionscript 3 programozással. A leckét próbáltam minél részletesebben leírni lépésenként képekkel illusztrálva.

Elolvasom a teljes bejegyzést »