Ebben a cikkben olyan eszk\u00f6z\u00f6ket list\u00e1zunk, ami seg\u00edthet a weboldal k\u00e9sz\u00edt\u00e9sben, designban \u00e9s m\u00e1s kreat\u00edv feladatok hat\u00e9kony elv\u00e9gz\u00e9s\u00e9ben. Hasznos cikk grafikusoknak, fejleszt\u0151knek \u00e9s hobbi weboldal-k\u00e9sz\u00edt\u0151knek is.<\/p>\n\n\n\n
Rend a lelke mindennek. A munk\u00e1t az \u00fagynevezett wireframe elk\u00e9sz\u00edt\u00e9s\u00e9vel \u00e9rdemes kezdeni. Ez nem m\u00e1s, mint a weboldal v\u00e1zlata. Ak\u00e1r egy A4 pap\u00edr is lehet a fel\u00fclet, amire a v\u00e1zlatot felviszed, hiszen a c\u00e9l, hogy m\u00e9g a tervez\u00e9s sor\u00e1n kider\u00fcljenek a kih\u00edv\u00e1st jelent\u0151 feladatok. A wireframe c\u00e9lja, hogy mindenki sz\u00e1m\u00e1ra vil\u00e1gos legyen mi hov\u00e1 ker\u00fcl majd az oldalon. Ha pap\u00edr nincs a k\u00e9zn\u00e9l, akkor az al\u00e1bbi online eszk\u00f6z\u00f6k valamelyike seg\u00edthet.<\/p>\n\n\n\n
N\u00e9h\u00e1ny elterjedt UI \u00e9s UX tool:<\/p>\n\n\n\n
A mockup m\u00e1r j\u00f3val r\u00e9szletesebb mint a wireframe. \u00c1ltal\u00e1ban sz\u00ednes-szagos, visszaadja a v\u00e9gs\u0151 oldal (vagy applik\u00e1ci\u00f3) hangulat\u00e1t. Ugyanakkor a tervez\u00e9si f\u00e1zis r\u00e9sze, teh\u00e1t statikus, nem kattinthat\u00f3. <\/p>\n\n\n\n
Mockup k\u00e9sz\u00edt\u00e9sre is sz\u00e1mos szoftver \u00e9s eszk\u00f6z \u00e1ll rendelkez\u00e9sre, a legt\u00f6bb k\u00f3dol\u00e1si tud\u00e1s n\u00e9lk\u00fcl is haszn\u00e1lhat\u00f3. Az al\u00e1bbi linkeken k\u00fcl\u00f6nb\u00f6z\u0151 sablonokat tal\u00e1lsz:<\/p>\n\n\n\n
A protot\u00edpus abban k\u00fcl\u00f6nb\u00f6zik a wireframet\u0151l, hogy az m\u00e1r t\u00f6bb mint egy v\u00e1zlat, \u00e9s nagyon hasonl\u00edt a v\u00e9gs\u0151 weboldalra. \u00c1ltal\u00e1ban a linkek is m\u0171k\u00f6dnek rajta, \u00e9s val\u00f3s tartalom szerepel benne. Ugyanakkor HTML, CSS, JS k\u00f3dot nem tartalmaz, mivel a protot\u00edpus c\u00e9lja a design tesztel\u00e9se, az oldal v\u00e9gs\u0151 hangulat\u00e1nak \u00e1tad\u00e1sa, \u00e9s az esetleges logikai hib\u00e1k felder\u00edt\u00e9se. <\/p>\n\n\n\n
Az Adobe Photoshop tal\u00e1n a vil\u00e1g legismertebb k\u00e9pszerkeszt\u0151 eszk\u00f6ze, ugyanakkor grafikai elemek \u00e9s weboldalak tervez\u00e9s\u00e9re is kiv\u00e1l\u00f3an alkalmas. (Vektorgrafika k\u00e9sz\u00edt\u00e9s\u00e9hez ink\u00e1bb az Adobe Illustratort szokt\u00e1k haszn\u00e1lni, de vannak m\u00e1s hasonl\u00f3an j\u00f3 programok a piacon.) A tervez\u00e9st nagyban seg\u00edtik a k\u00fcl\u00f6nb\u00f6z\u0151 sablonok, amelyeket azt\u00e1n a projekted ig\u00e9nyeinek megfelel\u0151en alak\u00edthatsz. <\/p>\n\n\n\n
Az al\u00e1bbi oldalakon nagy a v\u00e1laszt\u00e9k PSD sablonokb\u00f3l:<\/p>\n\n\n\n
A design egyik kulcsa az \u00e1tgondolt \u00e9s tudatos sz\u00ednhaszn\u00e1lat. Ez sokszor nem k\u00f6nny\u0171 feladat, pl\u00e1ne ha valaki \u00fagy \u00e9rzi, nincs erre szeme \u00e9s \u00e9rz\u00e9ke. Szerencs\u00e9re m\u00e1r a sz\u00ednek kiv\u00e1laszt\u00e1s\u00e1ra is sz\u00e1mos oldal specializ\u00e1l\u00f3dott. Ezek az oldalak seg\u00edtenek egy olyan sz\u00ednpalett\u00e1k megalkot\u00e1s\u00e1ban \u00e9s kiv\u00e1laszt\u00e1s\u00e1ban, ahol a k\u00fcl\u00f6nb\u00f6z\u0151 sz\u00ednek egym\u00e1st er\u0151s\u00edtik. <\/p>\n\n\n\n
Az oldalad k\u00fcl\u00f6nb\u00f6z\u0151 k\u00e9pekkel \u00e9s illusztr\u00e1ci\u00f3kkal is fel tudod dobni. A stock k\u00e9pek kiv\u00e1laszt\u00e1sakor azonban \u00e9rdemes ker\u00fclni a semleges hangulat\u00fa, m\u00e9r ezerszer l\u00e1tott k\u00e9peket, hogy ne legyen unalmas a weboldal. Egyes stock oldalakon sz\u00edn szerint is lehet keresni, \u00edgy az egyszer\u0171bb lesz az oldal hangulat\u00e1nak megfelel\u0151 k\u00e9pek megtal\u00e1l\u00e1sa.<\/p>\n\n\n\n
A sz\u00ednek \u00e9s a k\u00e9pi vil\u00e1g mellett egy m\u00e1rk\u00e1t \u00e9s weboldalt a rajta tal\u00e1lhat\u00f3 szimb\u00f3lumok, \u00e9s bet\u0171t\u00edpus alapj\u00e1n is egyediv\u00e9 tehet\u00fcnk. Az al\u00e1bbi oldalakon bet\u0171t\u00edpusok sz\u00e9les v\u00e1laszt\u00e9ka \u00e1ll rendelkez\u00e9sre. <\/p>\n\n\n\n
A weboldal k\u00e9sz\u00edt\u00e9s\u00e9nek egyik legfontosabb l\u00e9p\u00e9se a n\u00e9v megtal\u00e1l\u00e1sa. Ez sokszor adott, p\u00e9ld\u00e1ul c\u00e9gnevek, vagy projektnevek eset\u00e9n. M\u00e1skor azonban kis keres\u00e9sre \u00e9s kutat\u00e1sra van sz\u00fcks\u00e9g. Nem mindegy a domain kiterjeszt\u00e9se sem, p\u00e9ld\u00e1ul .hu, .com, vagy ak\u00e1r egzotikus .party, .yoga is v\u00e1laszthat\u00f3 egyebek mellett. El\u0151fordulhat, hogy a kiv\u00e1lasztott domain m\u00e1r foglalt, ekkor \u00e9rdemes speci\u00e1lis keres\u0151ket haszn\u00e1lni: <\/p>\n\n\n\n
A keretrendszerek \u00e9s k\u00f6nyvt\u00e1rak t\u00e9mak\u00f6re t\u00fal nagy ahhoz, hogy ebben a cikkben t\u00e1rgyaljuk. Ugyanakkor a lenti linkek betekint\u00e9st k\u00edn\u00e1lnak a legn\u00e9pszer\u0171bb eszk\u00f6z\u00f6k vil\u00e1g\u00e1ba, ha webfejleszt\u00e9sr\u0151l van sz\u00f3. Alapvet\u0151en a CSS seg\u00edt az oldalak st\u00edlus\u00e1ban \u00e9s a reszponz\u00edv, mobilbar\u00e1t oldalak k\u00e9sz\u00edt\u00e9s\u00e9ben. A Javascript pedig az egyik legelterjedtebb nyelv dinamikus weboldalak \u00e9s webalkalmaz\u00e1sok fejleszt\u00e9s\u00e9hez.<\/p>\n\n\n\n
N\u00e9pszer\u0171 CSS keretrendszerek:<\/em><\/p>\n\n\n\n N\u00e9pszer\u0171 Javascript keretrendszerek:<\/em><\/p>\n\n\n\n A snippet tulajdonk\u00e9ppen egy m\u00e1r egy k\u00e9sz CSS elem. \u00c1ltal\u00e1ban olyan ingyenesen el\u00e9rhet\u0151 komponensekr\u0151l van sz\u00f3, amit m\u00e1r kor\u00e1bban valaki kifejlesztett, \u00edgy szabadon beilleszthet\u0151k m\u00e1s projektekbe is. A Bootstrap snippet az egyik legelterjedtebb. Arra c\u00e9lszer\u0171 figyelni, hogy az egyes komponensek milyen Boostrap verzi\u00f3val kompatibilisek. P\u00e9ld\u00e1ul a Boostrap 5 verzi\u00f3j\u00e1b\u00f3l kiker\u00fclt a JQuery \u00e9s az Internet Explorer t\u00e1mogat\u00e1s. <\/p>\n\n\n\n Ha m\u00e1r \u00fagy \u00e9rzed k\u00e9sz a weboldalad, akkor \u00e9rdemes ellen\u0151rizni egyes r\u00e9szeit. Erre szolg\u00e1lnak az \u00fagynevezett valid\u00e1torok, amelyek azt ellen\u0151rzik, hogy az oldalon szerepl\u0151 k\u00f3d, megfelel-e a fejleszt\u00e9sben bevett szabv\u00e1nyoknak \u00e9s szok\u00e1soknak.<\/p>\n\n\n\n Ebben a cikkben olyan eszk\u00f6z\u00f6ket list\u00e1zunk, ami seg\u00edthet a weboldal k\u00e9sz\u00edt\u00e9sben, designban \u00e9s m\u00e1s kreat\u00edv feladatok hat\u00e9kony elv\u00e9gz\u00e9s\u00e9ben. <\/p>\n","protected":false},"author":78,"featured_media":7374,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39],"tags":[],"class_list":["post-7377","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tippek"],"yoast_head":"\nSnippets<\/strong><\/h3>\n\n\n\n
Ellen\u0151rizd a k\u00f3dot<\/strong><\/h3>\n\n\n\n