ژ.ب ٥٤٤٤

دیزاینی بزۆک، Responsive web design


چەند ساڵێک پێش ئێستا کە ماڵپەڕێکمان دادەڕێژی پێویستی دەکرد کە دڵنیا بین بە تەواوی لە چوارچێوەی وێبگەڕی Internet Explorer کار دەکات، چوونکە ئەو کات وێبگەڕی ناوبراو بەناوبانگترین بوو.

دواتر Mozilla Firefox و Google Chrome ئەو وێنەیان گۆڕی و لە وێبی ئەمڕۆدا دەبێت بیر لە ٣ وێبگەڕی سەرەکی بکەینەوە لە کاتی داڕشتن و دڵنیا بین پرۆژەکەمان بە درووستی لەسەر هەموو ٣ وێبگەڕی ناوبراو دەردەکەوێت و کار دەکات.

لە دواترین ساڵدا لایەنێکی دیکە زۆر بووە و کاری ئێمەی وێبداڕێژ ئالۆزتر دەکاتەوە، ئەوەش مۆبایلە. ئەمڕۆ کە ماڵپەڕێک دادەڕێژین دەبێت بیر لە ٣ گەورەترین وێبگەڕ بکەینەوە، هەروەها دڵنیا بین کە بەکارهێنەرانی مۆبایل لە بیر ناکەین. بەکارهێنەرانی مۆبایل ڕۆژ دوای ڕۆژ لە زۆربوون دان، مەزەنە دەکرێت چەند بەرانبەری ژمارەی ئێستا زۆرتر بن لە داهاتوویەکی نزیکدا. داڕشتنی ماڵپەڕێک کە هاوڕێی بەکارهێنەری مۆبایل بێت گرینگە، لە ڕاستیدا شتێکی پێویستە و دەبێت هەموو وێبداڕێژ هەوڵی جێبەجێکردنی بدات.

چەندین شێواز هەیە بۆ داڕشتنی وەشانێکی ماڵپەڕ بۆ بەکارهێنەرانی مۆبایل، لە ئەم بابەتە شێوازی Responsive ڕوون دەکەمەوە و بە کورتی شێوازەکانی دیکەش ئاماژە پێدەدەم.

Responsive Website Design دەبێتە دیزاینی ماڵپەڕێک کە لەگەڵ ئامێری بەکارهێنەر ناوەڕۆک و پێکهاتەی پەڕە دەگوونجێنێت. ئێمەی وێبداڕێژ تەنیا یەکجار کۆدەکان دەنووسین و ماڵپەڕ لە کاتی پێویست خۆی بۆ ئامێری پێویست دەگوونجێنێت.

ئەگەر بەکارهێنەرێک لە کۆمپیوتەرێکی ئاساییەوە ماڵپەڕەکە چاو لێبکات بە شێوازێک پەڕەی ناوبراو دەبینێت کە بۆ کۆمپیوتەری گوونجاو بێت. لە هەمان کاتدا بەکارهێنەری دیکە کە بە سیستەمێکی مۆبایلیی وەک iOS, Android و هتد... ماڵپەڕەکە دەکەنەوە و قەبارە ڕوومەتی ئامێرەکانیان بچووکترە بە شێوەیەک ماڵپەڕەکە دەبینین کە لەگەڵ ئامێرەکانیان بگوونجێت و بە باشترین شێواز دەربکەوێت. بەبێ ئەوەی پێویست بکات بەکارهێنەر بنێردرێتە پەڕەیەکی تایبەت داڕێژراو بۆ مۆبایل.

CSS بناغەیەکی داڕشتنی ئەو ماڵپەڕە دەبێت، نموونەی ئەم بابەتە سادە دەبێت بەڵام هەمان هەنگاو و شێواز بۆ ماڵپەڕی گەورەتر/بچووکتر کار جێبەجێ دەکات.

لە نموونەکە دا پەڕگەکانی خواروە درووست دەکەین،
index.html بۆ لە خۆگرتنی کۆدەکانی HTML.
style.css بۆ لە خۆگرتنی مەرجەکانی CSS.

کۆدی بنەڕەتیی نێو index.html،

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<header>
<div class="pixel"></div></header>
<div class="logo"></div><div class="deq">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<br /><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>

</html>

لە CSS تایبەتمەندی media هەیە کە بەکاردەبرێت بۆ پێناسکردنی مەرج لە پەیوەندی لەگەڵ قەبارەی ڕوومێزی ئامێر، بۆ نموونە،
ئەگەر بمانەوێت مەرجێک بنووسین کە تەنیا بۆ ئەو ئامێرانە دەربکەوێت قەبارەی ڕوومێزیان کەمترە لە ٦٤٠ پیکسڵ، دەنووسین:

@media screen and (max-width: 640px) {    
............
}

دواتر لە نێو ئەو مەرجەدا ژێر مەرجەکانی دیکە دەنووسین کە تایبەت بێت بە ئەو قەبارە.

لە نێو style.css چەند مەرجێکم نووسیووە:

body {
width:95%;
}
.deq {
width:80%;
margin:auto;
border:2px #CCCCCC solid;
padding:15px;
column-count:3;
-webkit-column-count:3;
-moz-column-count:3;
}
header{
width:80%;
margin:auto
}
.logo {
background-position: center;
background-repeat: no-repeat;
background-image: url('https://www.webchin.org/Meko/style/Oxygen/logo_new_09.png');
height:120px;
display:table;
min-width:80%;
}
.pixel:before {
content: "شێواز بۆ قەبارەی گەورەتر لە ٧٨٠ پیکسڵ";
display: table;
}

@media screen and (max-width: 780px) {    
.deq {
column-count:2;
-webkit-column-count:2;
-moz-column-count:2;

}
.logo {
background-position: center;
background-repeat: no-repeat;
background-image: url('https://www.webchin.org/css-js/logo.png');
width:130px;
height:75px;
display:table !important;
clear:both;
}
.pixel:before {
content: "شێواز تا قەبارە لە ژێر ٧٨٠ پیکسڵ دەبێت";
display:table;
}
}

@media screen and (max-width: 640px) {    
.deq {
column-count:1;
-webkit-column-count:1;
-moz-column-count:1;

}
.pixel:before {
content: "شێواز تا قەبارەی لە ژێر ٦٤٠ پیکسڵ دەبێت";
display:table;
}

}

لە سەرەتا بە مەرجێک بۆ body دەست پێدەکات کە قەبارەی body دەستنیشان کراوە کە ٩٥% لە ڕوومەتی پەنجەرەی وێبگەڕ داگیر بکات. هەندێک بۆشایی پێویستە بۆ Scrollbar و هتد...

تێبینی: بۆ درووست کارکردنی و Responsive بوونی پەڕەی ناوبراو پێویستە قەبارەی پانیی body بە ڕێژەی سەدی ئاماژە بکرێت نەک بە پیکسڵ، ئەگەر بە پیکسڵ دەستنیشان بکرێت هەموو مەبەستی Responsive بوون هەڵدەوەشێنێتەوە.

قەبارەی پانیی body ٩٥% ی ڕوومەتی پەنجەرەی وێبگەڕ داگیر دەکات بەبێ لە بەرچاوگرتنی ئەوەی کە ئایا ئامێرەکە کۆمپیوتەری ئاساییە یان مۆبایلە.

نموونەی قەبارەی گەورە بۆ کۆمپیوتەری ئاسایی،
https://www.webchin.org/v3-images/babet … -large.png

پەڕەی index.html لەسەر وێبگەڕێک کە قەبارەی پانیی پەنجەرەکەی پانتر بێت لە ٧٨٠ پیکسڵ بە ٣ ستوون دەردەکەوێت، لۆگۆیەکی تایبەت بە ئەو قەبارەی هەیە و هەروەها لە سەرەوەی لۆگۆ ئاماژە بە قەبارەی شێواز دراوە.

لە نێوان دێڕی ٢٦ تا ٤٤ مەرجێکی دیکە هەیە کە بەکار دەبرێت ئەگەر قەبارەی پەنجەرەی وێبگەر کەمتر بێت لە ٧٨٠ پیکسڵ.
ئەگەر مەرجی سەرەوە دەستەبەر بوو، چەند گۆڕانکارییەک ڕوودەدات،

١، لۆگۆ لە سەرەوە دەگۆڕدرێت بۆ لۆگۆیەکی بچووکتر.
٢، دەقێک دەردەکەوێت کە ئاماژە بە پانیی ئەو شێوازە دەکات.
٣، هەروەها ستوونەکانی پەڕە کەمتر دەبنەوە بۆ ٢ ستوون.

نموونەی قەبارەی تا ٧٨٠ پیکسڵ،
https://www.webchin.org/v3-images/babet … medium.png

لە مەرجی کۆتاییدا بۆ قەبارەی کەمتر لە ٦٤٠ پیکسڵ،
١، هەمان لۆگۆی قەبارەی ٧٨٠ پیکسڵ بەکار دەبرێت، بە ئەو شێوازە پێویست بە درووبارە پێناسکردنی Class ی logo ناکات، بەڵکوو نرخەکانی دواترن جار بەکار دەبرێت کە بۆ Class ی ناوبراو دەستنیشان کراوە.
٢، ستوونەکان کەمتر دەکرێنەوە بۆ تەنیا ١ ستوون.
٣، دەقی سەرەوە قەبارەی شێوازی پەیوەندیدار پیشان دەدات.

نموونەی قەبارەی بچووک،
https://www.webchin.org/v3-images/babet … -small.png

ئەنجامی کۆدەکانی سەرەوە، پەڕەیەکی وێبە کە بەپێی قەبارەی پەنجەرەی وێبگەڕ خۆی دەگوونجێنێت بەبێ ئەوەی پێویست بە دووبارە درووستکردنەوەی وەشانێکی تایبەت بکات بۆ هەر قەبارەیەک، وەک وێبداڕێژ دڵنیا دەبیت کە ماڵپەڕەکەت بە شێوازی درووست بۆ وێبگەڕ و قەبارەی درووست دەردەکەوێت. هەروەها ئەگەر پێویست کرا گۆڕانکارییەک پێکبێنیت تەنیا یەکجار گۆڕانکاری پێویست جێبەجی دەکەیت و دەتوانرێت لە هەموو شێوازەکانی ماڵپەڕ دەربخرێت.

دوو شێوازی دیکەی بەناوبانگ بۆ چارەسەرکردن و گوونجاندنی وەشانێکی تایبەت بە ماڵپەڕ بۆ بەکارهێنەرانی مۆبایل بریتین لە،
١، درووستکردنی App ـێکی تایبەت بۆ بەکارهێنەرانی مۆبایل Native App، کێشەیەکی سەرەکی ئەم شێوازە ئەوەیە دەبێت وەشانێک درووست بکەیت کە بە تەواوی جیاواز بێت لە شێواز و روومەتی ئاسایی ماڵپەڕ. بۆ نموونە داڕشتنی پرۆگرامۆکەیەک بۆ سیستەمی iOS و مۆبایلەکانی ئایفۆن، هەروەها ئەگەر پێویستی کرد وەشانێکی دیکە بۆ ئایپاد. بە هەمان شێواز داڕشتنی وەشانێکی تایبەت بە سیستەمی Android و هەموو ئامێرە جیاوازەکانی.

داڕشتنی Native App لە هەندێک بواردا پێویستە و سوودی زۆرتری هەیە، بۆ نموونە ئەگەر ماڵپەڕەکەت تایبەتمەندی تایبەتی هەبێت کە پێویست بە بەکاربردنی Hardware ی ئامێرەکان بکات، زۆربەی کات پێویست دەکات App ی تایبەت بە سیستەمی پەیوەندیدار دابڕێژیت، جگە لە ئەو دۆخە لە ڕاستیدا داڕشتنی App ی تایبەت وردەکاریی زۆرترت بۆ درووست دەکات وەک وێبداڕێژ، جگە لەوەی کە دەبێت لەگەڵ بڵاوبوونەوەی وەشانی نوێی سیستەمە پەیوەندیدارەکان لەوانەیە پێویست بکات App ـەکەت نوێ بکەیتەوە.

٢، داڕشتنی ڕوومەتێکی تایبەت بۆ بەکارهێنانی مۆبایل و هەروەها بڕیاردان لەوەی چی ببینن. نموونەیەکی زیندوو شێوازی مۆبایلی ماڵپەڕی وێبچن ـە، www.webchin.org/m کە بێگومان سادەیە و تەنیا چەند زانیارییەکی کەم لە خۆ دەگرێت. بە هەمان شێوازی Native App ئەم شێوازەش کاتی تایبەت پێویست دەبێت بۆ نوێکردنەوەی، جێبەجێکردنی گۆڕانکاری، پەرەپێدان و هتد... زۆرجارێک وەک ماڵپەڕێکی دیکە دەژمێردرێت لە نێو ماڵپەڕی سەرەکی. بێگومان ئەم شێوازەش باش نییە.

لە کۆتاییدا جارێکی دیکە ئاماژە دەدەم کە داڕشتن لەسەر بنەمای Responsive Design داهاتوویەکی ڕوون و پتەو بۆ ماڵپەڕ دابین دەکات، بەڕێوەبردن و پەرەپێدانی ئاسانترە و کەمتر کات پێویست دەکات، هەموو ئامێرێکی ئینتەرنێتی وێبگەڕی هەیە و داڕشتن بۆ وێبگەڕ سەرکەوتووترین شێوازە.

کۆتایی.

تكایه‌ هه‌ژمارێك درووست بكه‌ بۆ ئه‌وه‌ی بتوانیت بۆچوون بنووسیت، كرته‌ له‌ ئێره‌ بكه‌ بۆ درووستكردنی هه‌ژمار
aawara2015-05-01

سەرکەوتوبن

شاخەوان2015-05-01

هەربژی!

mhamadb.noori2015-01-22

وه‌ڵا ڕاست ده‌كه‌ین ئێسته‌ به‌رهێنه‌رانی موبایل زیاتر بوون له‌ كۆمپوته‌ر
من نزیكه‌ی 400 هاوڕیم هه‌یه‌ له‌ فه‌یسبووك 250 بۆ 300 یان به‌ موبایل دێنه‌سه‌ر هێڵ

syronz2014-01-05

دەست خۆش زۆر سودمەندە! بەلام ئەمرۆ پێویست ناکات زۆر لەوە بیر بکەینەوە ئەو سایتەی سازی دەکەین لە هەر 3 وێبگەرەکە کار بکات! چونکە لە حالی حازر دا مایکرۆسۆفتیش زیاترینی ستانداردی کۆنسرسیومی W3C قەبول کردۆت و جیاوازی نێوان web-kit  و mozilla , IE زۆر کەم بۆتەوە

Govar_Programer2014-01-03

دەست خۆش بابەتێکی زۆر جوانە

Fabregas2013-11-18

هەڵبەتە ڕوونکردنەوەیەکی جوانە دەست خۆش، بەڵەم دەبوایە ئاماژەش بە min-width بدەیت چون بەبێ هەردووکیان ناتوانرێ بە تەواوی بۆ تابلێت یان مۆبایلی زیرەک ڕێکبخرێت

rojyar2013-06-29

به راستی جووان بووو...........
سپاس کاک ئاسو گیان

ayman_kurd2013-04-24

بابەتێکی زۆر زۆر  بەسوودە
دەستخۆش کاک ئاسۆ

Pshtiwan_952013-04-17

دەست خۆش کاک ئاسۆ بەڕاستى بابەتێکى بەسوودە.