bevezetés a responsive tervezésbe - 05 eszközök

7/25/2019 Bevezets a responsive tervezsbe - 05 Eszkzk

1/12

Bevezets a responsive tervezsbe EszkzkHTML / CSS (HTTP://CODEGUIDE.HU/WEBDESIGN/HTML_CSS/)LAKI DM (HTTP://CODEGUIDE.HU/PROFIL/LAKIADAM/) 2014. 06. 12.

Ismerkedjnk meg a responsive tervezs vilgval. A sorozatban

tvesszk a tervezsi szemllethez kapcsold fogalmakat,

terleteket.

A responsive tervezs megjelensvel a tervezk szmos j kihvs el

nznek, mivel ez a mdszer egy j fajta szemlletet kvetel atervezskor. A mai open-source kzssgeknek ksznheten rengeteg

eszkz ll a rendelkezsnkre, melyekkel megknnythetjk a

munkkat. A kvetkezkben bemutatok j pr ilyen eszkzt!

Keretrendszerek

A HTML/CSS keretrendszerek segtsgvel meggyorsthatjuk a fejlesztsi

idt. Napjainkban szinte minden hten jelenik meg egy-egy jabb

megolds a piacon. A szmos nagyobb framework mellett tallhatunk

igen karcs megoldsokat, melyek ltalban csak a rcs rendszerre

knlnak megoldst. Ha komolyabb kpet szeretnnk kapni a

(http://codeguide.hu)
http://codeguide.hu/http://codeguide.hu/http://codeguide.hu/profil/lakiadam/http://codeguide.hu/webdesign/html_css/


2/12

keretrendszerek npszersgrl ltogassunk el az albbi oldalra

(http://usablica.github.io/front-end-frameworks/compare.html), ahol egy

kis sszefoglalt tallunk a piacon szerepl rendszerekrl.

Figyelembe kell vennnk - ha gy dntnk, hogy front-end

keretrendszert hasznlunk - hogy szmos j megolds akad. Vlasszuk

azt, amelyik megfelel az ignyeinknek!

Napjainkban elg megosztott a webes kzssg a keretrendszer

hasznlatval kapcsolatban. Sokak szerint felesleges s csak tovbblasstja az oldalunkat. Termszetesen, mindenkinek sajt magnak kell

eldntenie, hogy hasznlja-e ket, vagy sem. Egy prbt mindenkpp

megr, azonban azt tartsuk szem eltt, hogy ezek hasznlatt jl el kell

sajttanunk, ahhoz hogy hasznlhat oldalakat ksztsnk!

Bootstrap
http://usablica.github.io/front-end-frameworks/compare.html


3/12

A rendszer 2-es verzijval mr foglalkoztunk az oldalon

(http://codeguide.hu/2013/01/11/twitter-bootstrap-front-end-

keretrendszer/). Jelenleg a legnpszerbb projekt GitHub-on, nem

vletlenl. Ez volt az els komolyabb keretrendszer. Szinte mindenHTML elemre rendelkezik egyedi formzssal, valamint szmos JS

bvtmnyt tartalmaz. A 3.0 nagyszer elrelpsnek bizonyult, a

rcsszerkezet rengeteget fejldtt. A hivatalos oldalon

(http://getbootstrap.com/) a customize menpont alatt nagyon jl testre

szabhatjuk a letlteni kvnt fjlt, gy gond nlkl kikapcsolhatjuk azokat

a rszeket, amikre nem tartunk ignyt.

A Bootstrap Less-t hasznl, de ltezik egy Sass g is, amit megtallunk

GitHub-on (https://github.com/twbs/bootstrap-sass)!

Foundation

A ZURB (http://zurb.com/) ltal fejlesztett rendszer mltn lett

npszer. A folyamatos fejlesztsnek ksznheten a nagyok kzl taln

ez fejldik a legdinamikusabban. Nem olyan rg jelent meg az ts

verzi, ami nagy elrelpst jelent az optimalizlt kp kezels terletn.

Nagyon hasonl a Bootstrap-hoz, mivel mind kett hasonlan pl fel s

hasonl modulokkal is rendelkezik. A Foundation-ban tallunk egy-kt

olyan modult (intercharge, egyenl oszlop magassg), amit Bootstrap-

ban nem!

Ha rszletes sszehasonltst szeretnnk a Bootstrap-rl s a

Foundation-rl, akkor ltogassunk el az albbi oldalra

(http://responsive.vermilion.com/compare.php)!
http://responsive.vermilion.com/compare.phphttp://zurb.com/https://github.com/twbs/bootstrap-sasshttp://getbootstrap.com/http://codeguide.hu/2013/01/11/twitter-bootstrap-front-end-keretrendszer/


4/12

Gumby

A Gumby (http://gumbyframework.com/) A legfiatalabb a 3 kzl,

azonban mindenkpp emltsre mlt a dinamikus fejldse miatt. Ez is

egy teljes rtk keretrendszer rengeteg elreformzott elemmel,valamint szmos JavaScript kiegsztvel. rdemes vetni r egy

pillantst, htha pont ez az a rendszer, ami a legjobban kzre ll

neknk!

Tervezprogramok

A responsive tervez programok mg gyerekcipben jrnak, de mr gy

is akad j pr hasznlhat, elg komoly megolds a tervezsi problmk

thidalsra.

Adobe Edge Reflow

Egy nagyon fejlett, a kategrijban az egyik els ilyen tervezprogram

(http://html.adobe.com/edge/reflow/). Az Adobe-nl egszen aktvan

fejlesztik, gy fokozatosan kerlnek bele az j funkcik.
http://html.adobe.com/edge/reflow/http://gumbyframework.com/


5/12

Macaw

A Macaw (http://macaw.co/) szintn egy nagyon profi szerkeszt, ami

felveszi a versenyt a Reflow-val. Az ra nem vszes, figyelembe vve,

hogy komplett oldalakat kszthetnk vele!

Webflow

A Webflow (https://webflow.com/) segtsgvel HTML/CSS tuds nlkl

rakhatjuk ssze a responsive oldalunkat (akrcsak az elz kettvel). A

Reflow-hoz hasonlan ehhez is csak havidjas formban juthatunk

hozz!

Tesztels

A tervezs sorn a tesztels fontossga hatvnyozottan fontos, mivel az

ltalunk ksztett oldalt tbb kijelzmretre kell optimalizlnunk!

Hardware-es tesztels
https://webflow.com/http://macaw.co/


6/12

A legalapvetbb teszt eszkz a tnyleges hardware. Ezt sajnos nem

tudjuk elkerlni, legalbb kell egy telefon s egy tablet. A legnpszerbb

bngszknek mind van mobilra optimalizlt verzija. ltalnossgban

elmondhat, hogy a rgi Android bngszt levltjk a modernbngszk, az jabb Android opercis rendszereken mr elre

teleptve megtalljuk a Chrome-ot. A Chrome mellett a Firefox s a

Safari a legnpszerbb mobil eszkzn!

Chrome DevTools

A Chrome fejleszti eszkze rohamosan fejldik. A 4.0-s Android-tl

mr knnyen sszekapcsolhatjuk asztali Chrome bngsznket a

telefonval (https://developers.google.com/chrome-developer-

tools/docs/remote-debugging). Ezzel a megoldssal a szokott mdon

hasznlhatjuk a fejleszti eszkzket mobilon is!

iPhone remote debug

Termszetesen iOS-en is elrhet a tvoli debug funkci bngszbl.

Ehhez az asztali gpre Safari bngszt kell teleptennk, amit aztn

ssze kell ktni a mobil eszkzzel. Lerst itt

(http://moduscreate.com/enable-remote-web-inspector-in-ios-6/) tallsz!

Opera Mobile Classic Emulator

Opera Mobile bngszt tudunk emullni Linux-on, Mac-en, vagy

Windows-on. Remek kis alkalmazs, szmos eltr felbonts kijelzt

szimullhatunk vele. Ezzel az eszkzzel

(http://www.opera.com/hu/developer/mobile-emulator) sikeresen

tesztelhetnk a mobil eszkzkn igen npszer bngszre!
http://www.opera.com/hu/developer/mobile-emulatorhttp://moduscreate.com/enable-remote-web-inspector-in-ios-6/https://developers.google.com/chrome-developer-tools/docs/remote-debugging


7/12

BrowserStack

A BrowserStack (http://www.browserstack.com/) egy online alkalmazs,

mellyel szmtalan eszkzn tudjuk tesztelni az oldalunkat. A program

lnyege, hogy a tesztelt oldalakat vals eszkzkn futtatja le, majd azokkpernykpt kldi vissza, teht nem aktv mdban tesztelnk. A

szolgltats havi 39 dollros ra miatt valszn, hogy csak a rendszeres

fejleszts sorn megengedhet, azonban ezrt a pnzrt a piacon lv

legjobb eszkzt kapjuk a kategrijban.

Remote preview

A Remote Preview egy JavaScript kd, mellyel egyszerre frissthetjk a

klnbz eszkzk bngszjt. Ingyenesen elrhet, rszletes

informci itt (http://viljamis.com/blog/2012/remote-preview/).

Adobe Edge Inspect CC

A program (http://html.adobe.com/edge/inspect/) sajnos csak a teszt

szakaszban volt elrhet ingyenesen, most havi 25 eurrt juthatunk

hozz. Segtsgvel sszekthetjk a bngsznket a mobil eszkzeinket

s frissthetjk ket egyidejleg, a bngsznkbl debugolhatunk,

valamint kszthetnk kpernykpet.

Egyb, hasznos eszkzk
http://html.adobe.com/edge/inspect/http://viljamis.com/blog/2012/remote-preview/http://www.browserstack.com/


8/12

SCREEN SIZE.ES

Ez az oldal (http://screensiz.es/phone) egy nagyon hasznos gyjtemny

a klnbz telefonokrl s azok adatairl (szlessg, magassg, fizikai

szlessg, pixelsrsg, npszersg).

IcoMoonA responsive tervezs egyik legnagyobb kihvsa a kpkezels. A ikon

betkszletekkel ezen segthetnk. A mdszer lnyege, hogy az

ikonjainkat (Facebook, Twitter, egyb), betkszlett alaktjuk, majd

egyszerre betltjk. Elnye: kevesebb HTTP lekrs s mretezhetsg,

hiszen innentl a bngsz vektroknt kezeli, azaz j lesz retina kijelzn

is! Az IcoMoon (http://icomoon.io/) egy ilyen tervezprogram, ahol

pluszban mg vlogathatunk a mr az oldalon meglv ikonok kzl.

MQTest.io

A MQTest (http://mqtest.io/) egy nagyon egyszer alkalmazs, ami pp

az aktulis eszkz, tervezshez szksges adatait krdezi le, majd

jelenti meg!
http://mqtest.io/http://icomoon.io/http://screensiz.es/phone


9/12

sszefoglals

A fenti lista korn sem teljes! A responsive tervezs nem egy trend!

Rengeteg mdszer, megolds s eszkz kztt vlogathatunk, ha gy

gondoljuk, hogy mindezt lehet hatkonyabban is csinlni!

A sorozat tovbbi rszei

Bevezets a responsive tervezsbe Els lpsek

(http://codeguide.hu/2014/02/12/bevezetes-responsive-tervezesbe-elso-lepesek/)

Bevezets a responsive tervezsbe Media Queries

(http://codeguide.hu/2014/03/05/bevezetes-responsive-tervezesbe-media-

queries/)

Bevezets a responsive tervezsbe Rcsszerkezet

(http://codeguide.hu/2014/05/01/bevezetes-responsive-tervezesbe-racsszerkezet/)

Bevezets a responsive tervezsbe Viewport

(http://codeguide.hu/2014/05/21/bevezetes-responsive-tervezesbe-viewport/)

Cimkk: Bootstrap (http://codeguide.hu/tag/bootstrap/), Foundation

(http://codeguide.hu/tag/foundation/), Responsive (http://codeguide.hu/tag/responsive/),

tervezs (http://codeguide.hu/tag/tervezes/)

Megoszts:

Facebook3

(http://codeguide.hu/2014/06/12/bevezetes-responsive-tervezesbe-eszkozok/?share=facebook&nb=1)

Twitter 3 (http://codeguide.hu/2014/06/12/bevezetes-responsive-tervezesbe-eszkozok/?share=twitter&nb=1)

Google (http://codeguide.hu/2014/06/12/bevezetes-responsive-tervezesbe-eszkozok/?share=google-plus-

1&nb=1)

Linkedin (http://codeguide.hu/2014/06/12/bevezetes-responsive-tervezesbe-eszkozok/?share=linkedin&nb=1)

LAKI DM (HTTP://CODEGUIDE.HU/PROFIL/LAKIADAM/)
http://codeguide.hu/profil/lakiadam/http://codeguide.hu/tag/tervezes/http://codeguide.hu/tag/responsive/http://codeguide.hu/tag/foundation/http://codeguide.hu/tag/bootstrap/http://codeguide.hu/2014/05/21/bevezetes-responsive-tervezesbe-viewport/http://codeguide.hu/2014/05/01/bevezetes-responsive-tervezesbe-racsszerkezet/http://codeguide.hu/2014/03/05/bevezetes-responsive-tervezesbe-media-queries/http://codeguide.hu/2014/02/12/bevezetes-responsive-tervezesbe-elso-lepesek/http://codeguide.hu/2014/06/12/bevezetes-responsive-tervezesbe-eszkozok/?share=linkedin&nb=1http://codeguide.hu/2014/06/12/bevezetes-responsive-tervezesbe-eszkozok/?share=google-plus-1&nb=1http://codeguide.hu/2014/06/12/bevezetes-responsive-tervezesbe-eszkozok/?share=twitter&nb=1http://codeguide.hu/2014/06/12/bevezetes-responsive-tervezesbe-eszkozok/?share=facebook&nb=1


10/12

Az rdekldsem kzppontjban fknt a webes technikk llnak, igyekszem minl

tbbet megtudni a CMS rendszerekrl, valamint a kliens s a szerveroldali

programnyelvekrl.

(https://www.facebook.com/laki.madazulu) (https://twitter.com/madazulu)

(https://plus.google.com/u/0/+AdamLaki/posts)

(http://www.linkedin.com/profile/view?id=86470705&trk=nav_responsive_tab_profile)

(http://adamlaki.com/)

Vortex Panda Entertainment FantasyBreaker

Tbbszr elkerlt a ColorZilla,n is ezt hasznlom, de csak azrt mert van

bngsz pluginja, ami nagyban

Best of the Week #58

Krlek! Kiegsztettem ezzelis, hasznos inf! Kszi!

Query Alapok Kijellk

Szia Gbor!Sajnos a kzegnlkl, olyan sokat nem tudok segteni. Haa fenti kdrszletet akarod meghvni,

jQuery Alapok Bevezets

Jqueryhez ajnlom ezt azoldalt:http://www.jquery-plugins.hu/Ritknfrissl, de ltalban jkat dobnak ki.A

0 Hozzszls
http://redirect.disqus.com/url?url=http%3A%2F%2Fcodeguide.hu%2F2014%2F03%2F11%2Fvortex-panda-entertainment-fantasy-breaker%2F%3A3JUnoEVUxJBOetpi5S47b9Jsqlo&imp=7v0stgs22olnjf&prev_imp=7v0sa5jtfejv6&forum_id=2130905&forum=codeguide&thread_id=2748765722&major_version=metadata&thread=2435504145&zone=internal_discoveryhttp://redirect.disqus.com/url?url=http%3A%2F%2Fcodeguide.hu%2F2014%2F05%2F02%2Fbest-week-58%2F%3AjKJokQ8LoESE4r7RXLrZCW2krcw&imp=7v0stgs22olnjf&prev_imp=7v0sa5jtfejv6&forum_id=2130905&forum=codeguide&thread_id=2748765722&major_version=metadata&thread=2653143903&zone=internal_discoveryhttp://adamlaki.com/http://www.linkedin.com/profile/view?id=86470705&trk=nav_responsive_tab_profilehttps://plus.google.com/u/0/+AdamLaki/postshttps://twitter.com/madazuluhttps://www.facebook.com/laki.madazuluhttp://redirect.disqus.com/url?url=http%3A%2F%2Fcodeguide.hu%2F2013%2F07%2F02%2Fjquery-alapok-bevezetes%2F%3AU22ofWViFXPeBiwDduaGXwQoP5s&imp=7v0stgs22olnjf&prev_imp=7v0sa5jtfejv6&forum_id=2130905&forum=codeguide&thread_id=2748765722&major_version=metadata&thread=2387028002&zone=internal_discoveryhttp://redirect.disqus.com/url?url=http%3A%2F%2Fcodeguide.hu%2F2013%2F07%2F02%2Fjquery-alapok-bevezetes%2F%3AU22ofWViFXPeBiwDduaGXwQoP5s&imp=7v0stgs22olnjf&prev_imp=7v0sa5jtfejv6&forum_id=2130905&forum=codeguide&thread_id=2748765722&major_version=metadata&thread=2387028002&zone=internal_discoveryhttp://redirect.disqus.com/url?url=http%3A%2F%2Fcodeguide.hu%2F2013%2F07%2F08%2Fjquery-alapok-kijelolok%2F%3Ayacj-Q_pUdZaMlwNJ8Y95amkZiA&imp=7v0stgs22olnjf&prev_imp=7v0sa5jtfejv6&forum_id=2130905&forum=codeguide&thread_id=2748765722&major_version=metadata&thread=2387109657&zone=internal_discoveryhttp://redirect.disqus.com/url?url=http%3A%2F%2Fcodeguide.hu%2F2013%2F07%2F08%2Fjquery-alapok-kijelolok%2F%3Ayacj-Q_pUdZaMlwNJ8Y95amkZiA&imp=7v0stgs22olnjf&prev_imp=7v0sa5jtfejv6&forum_id=2130905&forum=codeguide&thread_id=2748765722&major_version=metadata&thread=2387109657&zone=internal_discoveryhttp://redirect.disqus.com/url?url=http%3A%2F%2Fcodeguide.hu%2F2014%2F05%2F02%2Fbest-week-58%2F%3AjKJokQ8LoESE4r7RXLrZCW2krcw&imp=7v0stgs22olnjf&prev_imp=7v0sa5jtfejv6&forum_id=2130905&forum=codeguide&thread_id=2748765722&major_version=metadata&thread=2653143903&zone=internal_discoveryhttp://redirect.disqus.com/url?url=http%3A%2F%2Fcodeguide.hu%2F2014%2F05%2F02%2Fbest-week-58%2F%3AjKJokQ8LoESE4r7RXLrZCW2krcw&imp=7v0stgs22olnjf&prev_imp=7v0sa5jtfejv6&forum_id=2130905&forum=codeguide&thread_id=2748765722&major_version=metadata&thread=2653143903&zone=internal_discoveryhttp://redirect.disqus.com/url?url=http%3A%2F%2Fcodeguide.hu%2F2014%2F03%2F11%2Fvortex-panda-entertainment-fantasy-breaker%2F%3A3JUnoEVUxJBOetpi5S47b9Jsqlo&imp=7v0stgs22olnjf&prev_imp=7v0sa5jtfejv6&forum_id=2130905&forum=codeguide&thread_id=2748765722&major_version=metadata&thread=2435504145&zone=internal_discoveryhttp://redirect.disqus.com/url?url=http%3A%2F%2Fcodeguide.hu%2F2014%2F03%2F11%2Fvortex-panda-entertainment-fantasy-breaker%2F%3A3JUnoEVUxJBOetpi5S47b9Jsqlo&imp=7v0stgs22olnjf&prev_imp=7v0sa5jtfejv6&forum_id=2130905&forum=codeguide&thread_id=2748765722&major_version=metadata&thread=2435504145&zone=internal_discovery


11/12

Szakmai cikkek webfejleszts, webdesign, programozs, android s mg sok rdekes tmban! A

codeguide egy fiatal szakmai oldal, mely igyekszik minl tbb ismeretet egy helyensszegyjteni.

Tudj meg rlunk tbbet! (http://codeguide.hu/rolunk/)

(https://www.facebook.com/codeguide) (https://twitter.com/codeguidehu)

(https://plus.google.com/u/0/b/102643931861084876821/+CodeguideHu/posts)

(http://codeguide.hu/feed/)

Apache (http://codeguide.hu/tag/apache/) AdRotate (http://codeguide.hu/tag/adrotate/)

Ant (http://codeguide.hu/tag/ant/) begyazs (http://codeguide.hu/tag/beagyazas/)

adapter (http://codeguide.hu/tag/adapter/) AndAR (http://codeguide.hu/tag/andar/)

Activity (http://codeguide.hu/tag/activity/) AR (http://codeguide.hu/tag/ar/)

animci (http://codeguide.hu/tag/animacio/) Best of the Week (http://codeguide.hu/tag/best-of-the-week/)

Augmented Reality (http://codeguide.hu/tag/augmented-reality/) algoritmus (http://codeguide.hu/tag/algoritmus/)

AdBlock (http://codeguide.hu/tag/adblock/) apk (http://codeguide.hu/tag/apk/) Best of (http://codeguide.hu/tag/best-of/)

API (http://codeguide.hu/tag/api/) 3D (http://codeguide.hu/tag/3d/) Android (http://codeguide.hu/tag/android/)

.htaccess (http://codeguide.hu/tag/htaccess/) .htpasswd (http://codeguide.hu/tag/htpasswd/)

Cikkek (http://codeguide.hu/)

Kdrszletek (http://codeguide.hu/kodreszletek/)

Aktulis (http://codeguide.hu/aktualis/)lls (http://codeguide.hu/allas/)
http://codeguide.hu/allas/http://codeguide.hu/aktualis/http://codeguide.hu/kodreszletek/http://codeguide.hu/http://codeguide.hu/tag/htpasswd/http://codeguide.hu/tag/htaccess/http://codeguide.hu/tag/android/http://codeguide.hu/tag/3d/http://codeguide.hu/tag/api/http://codeguide.hu/tag/best-of/http://codeguide.hu/tag/apk/http://codeguide.hu/tag/adblock/http://codeguide.hu/tag/algoritmus/http://codeguide.hu/tag/augmented-reality/http://codeguide.hu/tag/best-of-the-week/http://codeguide.hu/tag/animacio/http://codeguide.hu/tag/ar/http://codeguide.hu/tag/activity/http://codeguide.hu/tag/andar/http://codeguide.hu/tag/adapter/http://codeguide.hu/tag/beagyazas/http://codeguide.hu/tag/ant/http://codeguide.hu/tag/adrotate/http://codeguide.hu/tag/apache/http://codeguide.hu/feed/https://plus.google.com/u/0/b/102643931861084876821/+CodeguideHu/postshttps://twitter.com/codeguidehuhttps://www.facebook.com/codeguidehttp://codeguide.hu/rolunk/


12/12

Publiklj! (http://codeguide.hu/publikalj/)

Rlunk (http://codeguide.hu/rolunk/)

Impresszum (http://codeguide.hu/impresszum/)

Publiklj! (http://codeguide.hu/publikalj/)

Nhny jog fenntartva CodeGuide 2013 - 2014
http://codeguide.hu/publikalj/http://codeguide.hu/impresszum/http://codeguide.hu/rolunk/http://codeguide.hu/publikalj/http://codeguide.hu/2013/02/20/100-dolog-amit-minden-tervezonek-tudnia-kell-az-emberekrol/http://codeguide.hu/2013/10/04/settings-screen-beallitasok/http://codeguide.hu/2013/08/02/best-of-the-week-29/http://codeguide.hu/2013/11/14/dribbble-meghivot-szeretnel-itt-az-alkalom/

bevezetés a responsive tervezésbe - 05 eszközök

Documents