منبع عالي ترين مقالات طراحي سايت شركتي

Crazy Egg

به طبعً Crazy Egg يك كدام از نمونه‌هايي ميباشد طراحي سايت شركتي كه مسلماً بايستي در چنين ليستي حضور داشته باشد. تمركز ورقه اساسي اين وب سايت به طور انحصاري و خاص اين ميباشد كه بازديدكنندگان را تشويق به درج URL سايتشان براي مشاهده نقشه حرارتي آن نمايد. همينطور يك لينك و پيوند براي عصر مجاني ۳۰ روزه اين ابزار وجود دارااست كه در كنار آن كوشش گرديده با به كارگيري از عبارت Cancel anytime (هر برهه زماني كه خواستيد، آن را كنسل فرماييد) اعتماد بازديدكنندگان جلب گردد.

همينطور در‌اين برگه قسمت “social proof” يا اين كه ثابت اجتماعي هم جاي دارد كه به بازديدكنندگان وبسايت تعداد عده اي را كه به ابزارهاي Crazy Egg اعتماد دارا‌هستند، اعلام مي‌نمايد. در‌صورتي‌كه برگه را به سمت تحت اسكرول فرماييد، در زير نصيب ثابت اجتماعي با محتوايي قابل توسعه روبرو مي شويد.

زماني روي پيوند Learn more كليك مي كنيد، ورقه، بيشتر گشوده مي شود و داده ها بيشتري در رابطه ياري‌هاي Crazy Egg به صاحبان تارنما‌ها جهت ارتقاي نرخ تبديل سايتشان عرضه مي‌نمايد.

Abacus Plumbing

اين ورقه با بقيه نمونه‌هاي روايت شده تفاوت دارااست و سازماندهي و ساختار مطالب در آن بسيار مطلوب و خاص ميباشد.

اين مقاله را هم بخوانيد آيا تفاوت در ميان UX و UI را در ساخت وب سايت مي‌دانيد؟
شايد در صدر اين ورقه يه خرده نامرتب به لحاظ رسد ولي اين كاغذ دربرگيرنده قريه‌ها ثابت اجتماعي ميباشد. نماد جواز BBB[۱]، قسمت ايده ها يوزرها و كلمه ها “You Can Count On Us” (مي‌توانيد روي ما اكانت نمائيد) همه به طور استراتژيك چيده گرديده اند.

يكي از ديگر از موادتشكيل دهنده اعتماد ساز درين ورقه اين ميباشد كه مشتري پيش از وصال تكنسين‌ها قادر است داده ها فردي آن‌ها‌را اخذ نمايد. مطلقاً در‌اين حالت مشتريان احساس اعتماد بيشتري نسبت به تكنسين‌هاي كمپاني خواهند داشت.

trivago

پباده سازي مينيمال يكي‌از پباده سازي‌هاي دوست داستني محسوب ميشود كه مي‌قدرت اعلام‌كرد صفحه آرايي مهم وب سايت trivago يكي مينيمال ترين پباده سازي‌ها ميباشد. اين كاغذ روي يك مقصود تمركز داراست: تشويق بازديدكنندگان به جستجوي يك مقصد، همين!

Century۲۱

درين پباده سازي كلمه و واژه relentless (به معناي پيگير يا اين كه بي وقفه) دقت كاربر را به خويش جلب مي‌نمايد كه خصوصيت مهمي براي يك داد و ستد گر املاك ميباشد.

پباده سازي اين برگه، ديدني و براي مخاطبين قرن ۲۱ بسيار ايده آل ميباشد. همينطور در برگه اساسي تمركز متعددي بر مهيا آوردن قابليت جستجوي املاك وجود داراست البته در عين اكنون قابليت مرور برگه نيز به خير مهيا شده‌است.

Marc Jacobs

پباده سازي كلي وبسايت Mark Jacobs به سيرتكامل‌اي ميباشد كه حتي كساني كه كارشناس مد و فشن نيستند را هم جذب مي‌نمايد. اين پباده سازي به طور همزمان مينيماليستي و پيچيده ميباشد طوريكه تماماً با مخاطبين متبوع تناسب داراست و متن خلاقانه‌ي آن دقت بازديدكنندگان را به خويش جلب مي‌نمايد.

بعلاوه، اعتنا مشتريان بلافاصلهً به توصيه تحويل بدون‌پول در نوار بالايي جلب مي‌گردد. پيوند‌هاي مرور وب سايت هم به خير و خوبي درين شيت جايگذاري گرديده اند.

Laura Worthington Fonts

صفحه آرايي اساسي وب سايت Laura Worthington به سيرتكامل‌اي ميباشد كه شيوه خاص وي در پباده سازي فونت را به تصوير مي كشد. اين طرح زنانه و آكنده از رنگ ميباشد و در عين هم اكنون هيچ زياده روي در آن چشم نميشود.

همينطور المان‌ها نامرتب و در هم ريخته به لحاظ نمي رسند و مي‌اقتدار فورا متوجه شد كه Laura Worthington چه محصولاتي را عرضه مي‌نمايد.

درين نوشته ي علمي اشكال منوي شناور متني و تصويري را فراگيري مي دهيم طراحي سايت شركتي اين فراگيري بر اساس Css ميباشد و از جاوا در ساخت و ساز كد استعمال نشده ميباشد.يادگرفتن ساخت سايت منوي شناوردرين يادگرفتن طرز ساخت‌و‌ساز منوي شناور در Css را يادگرفتن مي دهيم
مقدمات منوي شناوريك باكس شناور ساخت‌و‌ساز فرمائيد كه هنگاميكه موشواره را روي آن قرار مي‌دهد الماني را به اكران بگذارد.
نمونه:



Mouse over me
Hello World!




مشاهده سود
 توضيح نمونهHtml : قادر است از هر الماني براي ساخت يك محتواي شناور استعمال نمايد.بعنوان نمونه المان هايي مانند a , span , button  
از يك المان محافظ مانندبراي ساخت و ساز يك محتواي شناور استعمال نماييد و المان هاي ديگر را داخل آن قرار دهيد.
تگرا در روي المان هاي ديگر قرار دهيد تا بتوانيد به محتواي شناور استايل و جاي صدق بدهيد.
Css: كلاس dropdown. از خصوصيت position:relative به كارگيري ميكند، اين خصوصيت وقتي كاربرد داراست كه بخواهيم محتواي شناور فورا پس از دكمه شناور قرار گيرد (به كارگيري از position:absolute).
كلاس dropdown-content. محتواي شناور را در خويش نگه مي دارد. اين محتوا بطور پيشفرض نهفته ميباشد و با قرار دادن موشواره روي دكمه به اكران در مي‌آيد. نكته خصوصيت min-width كه بر روي 160px تهيه شده‌است مي‌تواند بصورت ازروي اراده تغيير‌و تحول نمايد. نكته : در شرايطي كه شما مي خواهيد كه پهنا محتواي شناور به اندازه دكمه شناور باشد خصوصيت width را هم اندازه 100% و overflow:auto را براي صفحات كوچك اضافه فرماييد.
بجاي به كارگيري از بردار و فريم ما از خصوصيت CSS3 به اسم box-shadow به كارگيري كرده ايم تا منوي شناور مانند يك كارت به لحاظ رسد.
خصوصيت hover: كه تحت عنوان شبه كلاس مي‌شناسيم براي اكران محتواي شناور در هنگام قرار دادن ماوس روي دكمه شناور به فعاليت ميرود.
منوي شناورتوليد يك منوي شناور كه به يوزرها اذن گزينش در بين آيتم هاي مو جود در ليست را مي دهد:
نمونه ذيل مانند نمونه بالا ميباشد با اين تفاوت كه ما ليستي از لينك و پيوند ها را درون منوي شناور قرار داده ايم و به آن ها استايل مطلوب براي مساوي بودن با دكمه شناور را اضافه كرده ايم.
نمونه:



Dropdown
Link 1Link 2Link 3


مشاهده سود
 
در حالتي كه مي خواهيد كه منوي شناور از راست به چپ باشد. بجاي اينكه از چپ به راست باشد از خصوصيت ;right: 0 استعمال نماييد:
نمونه:
.dropdown-content {right: 0;} 
مشاهده فيض
 
نمونه هاي بيشترتصاوير شناور
چگونگي اضافه كردن يك عكس و ديگر محتواها داخل يك منوي شناور
مشاهد كد
 
ساخت‌و‌ساز منوي شناور
روش اضافه كردن منوي شناور داخل نوار منو

در جي كوئري مي‌توانيد تگهاي HTML را تعيين و به آنان افكت دهيد.
تابع اساس در جي كوئري بصورت $(selector).action() است. طراحي سايت شركتي  يك $ نماد دلار دسترسي جي كوئري را تعريف‌و‌تمجيد مي نمايد.يك (Selector) براي اعمال كوئري به يك المان Html بكار ميرود.يك اكشن جي كوئري بصورت action() واقعه و يا اين كه افكتي را به تگ اعمال مي نمايد.
مثالها:$(this).hide() - تگ حاضر را نهفته مي نمايد.$("p").hide() - همگي تگ هاي P را نهفته مي نمايد.$(".test").hide() – همگي تگ هاي دارنده كلاس test را پنهان ميكند.$("#test").hide() – تگي را كه داري Id=”test” ميباشد را نهفته مي نمايد.نكته :Selector ها در سراسر اينترنت از Css تا جاوااسكريپت از يك قاعده پيروي مي نمايند و يادگيري يكي‌از آن ها براي كل پلتفرم هاي زير اينترنت كفايت مي نمايد.
حادثه Document Readyشما ممكن ميباشد متوجه گرديده باشيد كه در مجموع نمونه هاي ما متد هاي جي كوئري در باطن اتفاق افتاد document ready قرار داشته اند.
$(document).ready(function(){
// jQuery methods go here...
});
اين اتفاق افتاد قابليت اجراي كدهاي جي كوئري را فورا پس از آخر لود شيت ممكن مي نمايد.
اگركه كوشش فرماييد كدهاي خويش را پيش از بارگزاري بدون نقص برگه به اكران بگذاريد، ميوانيد با اشتباهات پايين مواجه گرديد.
كدي را براي پنهان كردن الماني توليد نمائيد ، درحاليكه خويش المان هنوز ساخت نشده ميباشد.
كدي براي اخذ سايز عكسي ساخت و ساز نمائيد، درحاليكه عكس هنوز لود نشده ميباشد.
نكته : در جي كوئري شما مي توانيد با خط دستوري ذيل به جي كوئري اعلام نمائيد كه بعداز لود بي نقص كاغذ اجرا خواهد شد . اين كد از كد بالا كوتاه خيس ميباشد:
$(function(){
// jQuery methods go here...
});
از دستوراتي به كارگيري نماييد كه كاربري آن برايتان بي آلايش خيس باشد . فرمان Document Ready بسيار معني خيس از عبارت function مي باشد.

آيا مي‌دانستيد كه ۳۰٪ از مجموع اينترنت ‌تارنما‌ها بوسيله سيستم مدير محتواي وردپرس، ساخت گرديده‌اند. اين مقدار نسبت به تعداد CMS‌هاي جانور درصد نسبتا بالايي ميباشد طراحي سايت شركتي  و در حالتي‌كه هنوز از وردپرس به كارگيري نكرده‌ايد، احتمالا اين مسئله برايتان پاره اي تعجب‌آور خواهد بود.

همگي‌ي ما وردپرس را تحت عنوان يك پلتفرم وب لاگ‌نويسي مي شناسيم، ولي با سپري شد سال ها اين CMS توسعه و گسترش پيدا كرد و تماما فراگير شد و اين قابليت و امكان را براي يوزرها ساخت نمود تا وب سايت‌هاي عملياتي جامعي را در هر دسته موضوعي توليد نمايند. اين پلتفرم يك نرم افزار متن‌گشوده ميباشد و به طور بدون پول در چنگ تمامي قراردارد.
علاوه بر اينكه وردپرس معمولي به لحاظ ميرسد، ولي يكسري خصوصيت جالب در آن وجود دارااست كه‌اين پلتفرم را براي ساخت سايت ‌تارنما‌ها ديدني مي‌سازد.
به‌دنبال به طور اجمالي به پرسش ‌«چرا وردپرس شايسته ترين CMS مهيا‌ي شرايط كنوني دنياست»  جواب خوا هيم بخشيد.دوست‌دار بهينه سازي (سئو)سخت نبودن سفارشي‌سازي اين پلتفرم(حتي در حالتي كه طراح اينترنت‌ وبسايت هم نباشيد).وجود پوسته‌ها و افزونه‌هاي زياد براي وردپرسپوسته‌ها و افزونه‌هاي وردپرس بدون پول در قبال پريميومبا صرفه‌سازي براي تلفن همراه(ريسپانسيو)امنيت در وردپرسيكدست‌سازي با ابزارهاي قابل انعطاف‌افزاري ديگرجامعه‌ي وردپرس در حالا پرورش ميباشددوست‌دار seo (سئو)وسعت زياد ترافيك اينترنت‌ تارنما‌ها به واسطه كساني ميباشد كه از موتورهاي كاوش همچون گوگل، ياهو و بينگ به كار گيري مي‌نمايند. مرتبه‌بندي صفحه ها حاصل كاوش، هزاران استفاده كننده را روزمره به اينترنت‌تارنما‌ها هدايت مي‌نمايد.
به همين عامل ميباشد كه صاحبان اينترنت‌ وب سايت‌ها براي ارتقا ترافيك تارنما‌شان با يكديگر رقابت دارا هستند و نگران باصرفه‌سازي موتور كاوش (seo) مي‌باشند.
اين پروسه نقش بسيار مهمي در جذب يوزرها تازه دارااست. گوگل و موتورهاي جستجوي ديگر دارنده پارامترهاي پيش‌بيني گرديده‌اي مي‌باشند كه به صاحبان سايت امداد مي‌نمايد تا به مرتبه‌بندي تارنما‌ها بپردازند و پلتفرم وردپرس بطور موثرتري به مدير اين پارامترها پرداخته‌ميباشد.
وردپرس از به عبارتي در آغاز قابليت و امكان با صرفه‌سازي موتورهاي كاوش به‌ويژه باصرفه‌سازي صفحه ها را در مشت شما قرار مي دهد. اين پلتفرم از اكثري از مولفه‌هاي مهم اينترنت ‌تارنما‌ها همانند دست اندركاران ذيل پشتيباني مي‌نمايد:
علامت‌گذاري ظريف صفحه ها اچ تي ام ال(HTML): علامت‌گذاري اچ تي ام ال به موتورهاي كاوش امداد مي‌نمايد كه الگوي اينترنت ‌وب سايت و قالب‌هاي محتوا را معمولي‌خيس ادراك نمايند و اكنون كدهاي HTML بعضا از جديدترين پوسته‌هاي وردپرس به طور بهيه و سازگار با موتورهاي كاوش درج شده ميباشد كه عمل را شناسايي ربات‌هاي موتور جستجوي گوگل ريلكس‌خيس و باصرفه‌خيس نموده است.

بازدهي ساخت و ساز محتوا: محتوا مورد قابل قبولي براي معرفي اينترنت‌ تارنما‌ به موتورهاي كاوش ميباشد. با دقت به سوابق پلتفرم وردپرس در موضوع وب لاگ‌نويسي، اين پلتفرم براي ساخت و ساز محتوا در قضيه وب لاگ‌نويسي، رسانه، خبرها و مورد ها ديگر كاربرپسندتر ميباشد.

پيوند‌هاي مستمر اثر گذار براي با صرفه‌سازي موتور كاوش: پرمالينك به معناي پيوند‌‌هاي هميشگي ميباشد و وقتي دارنده بيشترين كاربرد ميباشند كه دربردارنده كليد كلمه‌هاي مربوط به محتوا باشند، پلتفرم وردپرس منجر مي‌گردد كه سفارشي‌سازي اين محتوا بي آلايش‌خيس به لحاظ رسد. تحت عنوان مثال:
لينك و پيوند “https://example.com/layout/best-cms-wordpress-2020” براي يوزرها و موتورهاي كاوش بسيار مفيدتر از لينك و پيوند “https://example.com/layout/?p3-1” ميباشد.

با صرفه‌سازي تصاوير: تصاوير حائز اهميت متعددي در اينترنت ‌وبسايت‌‌‌ها ميباشند و وردپرس كل كوشش خويش را مي‌نمايد ‌تا به شايسته ترين نحو به باصرفه‌سازي تصاوير بپردازد. ويرايشگر تصاوير اين قابليت را براي شما مهيا مي‌سازد تا تصاوير را به يار تگ‌هاي جابه‌جايي، توضيحات، كپشن‌ها و بُرش تصاوير  با صرفه و فردي‌سازي فرماييد.
مشقت بار نبودن سفارشي‌سازي اين پلتفرم(حتي در صورتيكه طراح اينترنت‌ وبسايت هم نباشيد).وردپرس ميليون‌ها تارنما را در سرتاسر عالم زير پوشش قرار داده ميباشد. آيا اين بدان‌معناست كه مجموع افرادي كه از اين پلتفرم به كار گيري مي‌نمايند، طراحان يادگرفتن‌چشم‌ ميباشند؟ مطلقا نه.استدلال آن رابط كاربري بي آلايش، آيتم‌هاي قابل فهم، و ابزارهاي جانور در ميزكار اين پلتفرم ميباشد.
كليه ميتوانند از اين پلتفرم حتي فارغ از داشتن علم كدنويسي و به جهت وجود گروه پوسته‌هاي وردپرس، افزونه‌‌ها و ابزارهاي ديگر فعاليت نمايند.رئيس وب سايت حتي بعد از پباده سازي و ساخت‌و‌ساز آن، معمولي‌خيس به لحاظ مي رسد. وردپرس دائما در درحال حاضر نشر بروزرساني مربوط به پوسته‌ها، ابزارهاي نو، و افزونه‌‌هاي تازه ميباشد كه با يك كليك روي موشواره ميتوانيد آنان را نصب و فعال كنيد.

۵۹.۹ درصد از كل اينترنت‌ تارنما‌هايي كه ما سيستم رئيس محتوايشان را مي‌‌شناسيم، از پلتفرم وردپرس استعمال مي‌نمايد. اين مقدار نشان‌دهنده ۳۱.۴٪ از مجموع اينترنت‌ وبسايت‌ها ميباشد.
رقباي آن يعني پلتفرم جوملا و دروپال در ادامه وردپرس و به ترتيب با ۵.۹٪ و ۳.۹٪ از نظر كاربرد قرار دارا‌هستند و اين نشان مي دهد كه چقدر وردپرس در مقايسه با رقباي خويش دارنده برتري ميباشد.
وجود پوسته‌ها و افزونه‌هاي زياد براي وردپرسوردپرس دارنده پوسته‌هاي پيش‌ساخته متعددي ميباشد، به‌علاوه طراحان و بسط‌دهندگان، هر روزه پوسته‌هاي تازه را ارائه مي دهند. ارتقاء تجهيزات و باصرفه‌سازي موتور كاوش، سبب ساز شده‌است كه اينترنت‌وب سايت‌ها از روش كامپيوترهاي روميزي، تلفن‌هاي هوشمند، و امكانات ديگر پوياتر و كاربرپسندتر شوند.
با اعتنا به كل اين مورد‌ها ميتوانيد اينترنت ‌وب سايت خويش را به عبارتي‌سيرتكامل كه مي خواهيد پباده سازي فرماييد. شما حتي ميتوانيد پوسته‌هاي خويش رابر حسب نيازتان در مورد‌هاي متعدد مثل تجارت، سهام، كسب و فعاليت و يا اين كه مورد ها ديگر تعيين نمائيد.

صحيح مانند گروه پوسته‌هايي كه وردپرس ارائه مي دهد، اين پلتفرم به ارائه افزونه‌ها بر حسب نيازتان ميپردازد و به همين ادله ميباشد كه اكثري از عموم پلتفرم وردپرس را ديدني مي دانند.
افزونه‌ها تحت عنوان روشي معمولي‌ براي اضافه كردن تجهيزات مازاد به وبسايت وردپرس مي باشند. بعضا از دوست داستني‌ترين  افزونه‌ها عبارتند از: Yoast سئو، Jetpack، W3 Total Cache، WooCommerce،Google XML sitemap، Google Analytics و مورد ها ديگر.بسط‌دهندگان اين افزونه‌ها معمولا بسيار فعال مي باشند و به تكثير موردها بروزرساني طبق روال ميپردازند.
اين بروزرساني‌ها تجهيزات بيشتري را در دست تارنما‌ها قرار ميدهند و سعي آن ها را بالا مي برند.صحت دارد كه اكثر افزونه‌ها موثر به لحاظ مي‌رسند و منجر ارتقا تجهيزات اينترنت‌ وب سايت مي شوند، ولي گهگاه وب سايت را نمايد كرده و منجر از فعاليت افتادن تارنما مي گردند.
براي اينكه اطمينان نتايج نماييم كه چنين مواقعي فيس نمي‌دهد، وردپرس اين قابليت و امكان را در اختيارتان قرار مي دهد تا در طي نياز اين افزونه‌ها را غيرفعال يا اين كه بي‌اثر فرماييد و اين به شما امداد مي‌نمايد تا تارنما‌ خويش را در همگي مواقع باصرفه‌سازي نمائيد.

در‌اين قسمت با مفاهيم Html ، تگ ها، توليد يك كاغذ اينترنت ، طراحي سايت شركتي گزاره، پيوندها و لينك و پيوند هاآشنا مي‌شويد.
سازمان جهاني اينترنت  ( World Wide Web Consortium )اين سازمان مسئوليت استاندارد سازي گويش هاي اپليكيشن نويسي و همگي اجزاء تشكيل دهنده صفحه ها اينترنت و اينترنت سايتها را به عهده دارااست. خويش آموز تحت مبتني بر استانداردهاي اين سازمان درج شده ميباشد.
Html چه مي باشد ؟
Hyper Text Markup Languageهف
يا اين كه لهجه علامت گذاري فوق متن يك گويش اپليكيشن نويسي وجود ندارد بلكه اين گويش يك لهجه براي علامت گذاري عنصرها يك شيت اينترنت ميباشد به نحوي كه يك مرورگر مانند Internet Explorer بتواند آن شيت اينترنت را به عنصرها قابل رويت ترجمه نمايد و روي كاغذ نمايشگر شما نشان بدهد.
يك گويش علامت گذاري از موادسازنده نشانه گذاري (Tag ) تاسيس شده است.
HTML از عنصرها آرم گذاري و يا اين كه تگ ها براي توضيح يك شيت اينترنت استعمال مي نمايد.
يادگيري اين كدهاي نماد گذاري تحت عنوان اساس اي براي يادگيري تمامي لهجه هاي اپ نويسي پايين اينترنت و يا اين كه پباده سازي صفحه ها اينترنت الزاميست.
اين نكته را فراموش نكنيد كه واحد سنجش يادگيري شما با واحد سنجش علت شما ارتباط بي واسطه دارااست.
همت كرده ايم در ذكر مطالب از معمولي ترين طرز ها و بيان كننده ترين لغات به كارگيري كنيم تا براي كليه دوست داران قابل به كارگيري باشد.
فراگيري Html - بخش اوليه
تگ چه مي‌باشد ؟
تگها كلماتي ميباشند كه بوسيله يك جفت نماد <> اشراف گرديده اند مانند .
تگها معمولا به طور يك جفت هستند مانند و .
او‌لين تگ ( تگ ابتدايي) و دو‌مين ( تگ انتهايي) ناميده مي گردند.
تگ ابتدايي تگ آغاز ويا تگ گشوده و تگ انتهايي تگ آخر ويا تگ بسته نيز ناميده ميشوند.
يك گروه كد html يك شيت اينترنت را شرح مي دهد . يك برگه اينترنت بوسيله تيم اي از تگهاي html و متون تشكيل مي‌گردد. در واقع يك شيت اينترنت متساوي ميباشد با يك شيت html.
مراد از يك مرورگر اينترنت مانند Internet Explorer و يا اين كه FireFox وسيله ايست براي قرائت كدهاي html و ترجمه ونمايش آنان به طور صفحه ها اينترنت .يك مرورگر تگها را نشان نمي دهد بلكه از آن ها براي ترجمه كاغذ اينترنت به كارگيري مي نمايد.
در تحت مي توانيد مثال اي از كدهاي html را مشاهده كنيد :


My First Heading
My first paragraph



متن در بين و برگه اينترنت را مشخص و معلوم مي نمايد.
متن دربين و نصيب قابل رويت يك برگه اينترنت را نشان مي‌دهد.
متن در بينوبه طور يك راز فصل نشان داده ميشود.
متن ميانو
به طور
يك جمله نمايش داده ميشود.
چه چيزي احتياج داريد؟
شما براي استارت يادگيري html احتياج به هيچ اپليكيشن پيچيده و يا اين كه يك تارنما نداريد. درين خويش آموز ما از اپليكيشن Notepad مو جود در windows براي تايپ كردن و بازنويسي كدهاي html به كار گيري مي كنيم و اعتقادوباور داريم كه‌اين شايسته ترين منش براي يادگيري html ميباشد.
كد نويسان و طراحان ماهر از قابل انعطاف افزارهايي مانند Front Page و Dream Weaver براي ساخت صفحه ها اينترنت به كار گيري مي نمايند.

Positioning اين قابليت را به شما خواهد اعطا كرد تا حالت يك عنصر را در دكورا سيون شيت وبسايت گزينش نماييد . اين ويژگي به شما قابليت خواهد اعطا كرد طراحي سايت شركتي يك عنصر را بر روي موادسازنده ديگر قرار دهيد و يا اين كه گزينش نمائيد چه اتفاقي چهره دهد هنگامي محتواي يك عنصر بسيار پهناور باشد .با انتخاب عنصرها top , right , bottom , left مي‌توانيد حالت يك عنصر در كاغذ را انتخاب نمائيد . گزينش اين مقادير به تنهايي عمل ساز نخواهند بود و مي بايست نوع اين انتخاب شرايط نيز مشخص و معلوم خواهد شد .
انتخاب حالت عنصرها در شيت ( CSS Positioning ) دارنده چهار مقدار و طريق ( static , absolute , relative , fixed ) متعدد ميباشد كه در تحت به توضيح اين روشها و طرز به كارگيري از آن‌ها خوا‌هيم پرداخت .

گزينش شرايط ايستا ( Static )همگي عنصرها Html به طور پيش فرض دارنده نوع حالت ايستا ( static ) ميباشند . عنصرها با نوع شرايط ايستا به طورمعمول با دقت به جريان طبيعي ورقه و طرز قرارگيري موادسازنده در كنار يكديگر گزينش حالت مي گردد . خصوصيت top , right , bottom , left , z-index بر روي حالت اينگونه موادسازنده تاثيري ندارند و نمي‌توانند سبب تغييرمكان اين عنصر شوند.


چهار عنصر با نوع حالت static در كنار يكديگر قرار دارا هستند . همگي عنصرها به صورت پيش فرض دارنده نوع وضعيت static ميباشند
گزينش وضعيت اثبات ( Fixed Positioning )يك عنصر با نوع وضعيت اثبات ( fixed ) نسبت به پنجره مرورگر گزينش وضعيت شود . اين عنصر با تكان شيت به بالا و تحت و حتي چپ و راست ( scroll ) تغيير‌و تحول وضعيت نخواهد اعطا كرد . نوع شرايط اثبات عنصر را از جريان طبيعي كاغذ جداگانه خواهد كرد و حالت اين عنصر تاثيري در دكوراسيون و جريان طبيعي ورقه نخواهد داشت و از دكورا سيون شيت حذف گردد . يك عنصر با نوع وضعيت اثبات ميتواند بر روي ديگرعناصر قرار گيرد .
1div {position:fixed;top:50px;right:50px;}

يك عنصر با نوع حالت fixed در كنار سه عنصر با شرايط static يا اين كه نرمال


عنصر با نوع حالت fixed از جريان برگه مستقل شده‌است و با تكان ورقه در مكان خويش اثبات باقي ميماند و مكان خويش را نيز در شيت از دست داده ميباشد
گزينش شرايط نسبي ( Relative Positioning )يك عنصر با نوع وضعيت نسبي ( relative ) مي‌تواند نسبت به وضعيت طبيعي خويش تغيير‌و تحول جاي دهد و يا اين كه بر روي ديگر موادتشكيل دهنده قرار گيرد . اين عنصر از جريان طبيعي شيت كاملا بيرون نخواهد شد و با عنصرها ديگر در ورقه در رابطه خواهد بود . نكات اصلي در‌اين نوع تغيير و تحول شرايط باقي ماندن محيط و تاثير اين عنصر در دكوراسيون و جريان طبيعي شيت و همينطور تغيير تحول وضعيت نسبت به شرايط طبيعي ميباشد .از عنصرها با شرايط نسبي ( relative ) تحت عنوان محافظ و محدود كننده موادتشكيل دهنده با نوع شرايط اثبات ( absolute ) به كارگيري مي گردد كه توضيحات بيشتري دراين باره ارائه شود.
1div {position:relative;left:-20px;bottom:30px;}

يك عنصر با نوع حالت relative در كنار سه عنصر با حالت static يا اين كه نرمال


يك عنصر با نوع حالت relative نسبت به جاي طبيعي خويش تغيير‌و تحول جاي داده ميباشد و اثر خويش را در ورقه نگهداري كرده


با تكان ورقه عنصر با نوع وضعيت relative از جريان طبيعي برگه جداگانه نشده ميباشد
انتخاب حالت مطلق ( Absolute Positioning )يك عنصر با نوع حالت مطلق ( absolute ) از جريان طبيعي ورقه بيرون گردد . اين موادتشكيل دهنده نسبت به او‌لين عنصر بالا محرمانه خويش ( parent ) كه دارنده خواص و نوع موقعيتي غير ازموقعيت ايستا ( static ) مي باشند تغيير و تحول شرايط خواهند اعطا كرد . در شرايطي‌كه كه هيچ كدام از عنصرها بالا محرمانه دارنده نوع شرايط مختلف با شرايط طبيعي ( ايستا ) نباشند اين موادسازنده نسبت به عنصر html تغيير‌و تحول شرايط ميدهند .موادسازنده با وضعيت مطلق ميتوانند بر روي ديگر موادسازنده قرار گيرند ( overlap )
1div {position:absolute;left:0px;top:0px;}

يك عنصر با نوع شرايط absolute از جريان برگه غير وابسته شده‌است و نسبت به html گزينش حالت ميگردد


با جنبش برگه عنصر با نوع وضعيت absolute در مكان خويش باقي‌مانده و از جريان كاغذ مستقل شده‌است . اين عنصر نسبت به محدوده تگ html انتخاب حالت شده‌است . تفاوت در بين يك عنصر absolote و fixed در تكان كاغذ ميباشد . عنصر fixed در هنگام تكان شيت در مكان خويش باقي مي‌ماند البته عنصر absolute از جريان برگه مجموعاَ بيرون مي گردد و در هنگام جنبش برگه نيز در مكان خويش اثبات ميماند .
قرار دريافت كردن روي هم ( Overlapping Elements )زماني كه موادتشكيل دهنده از شرايط معمولي و نوع حالت ايستا ) static ) بيرون مي‌شوند و مقدار متفاوتي براي آن‌ها معين مي‌گردد ( fixed , relative , absolute ) اين توان را خواهند داشت تا بر روي ديگر عنصرها قرار گيرند .
1234div.a {position:absolute;left:20px;top:20px;z-index:0;}div.b {position:absolute;left:30px;top:30px;z-index:1;}div.c {position:absolute;left:40px;top:40px;z-index:2;}div.d {position:absolute;left:50px;top:50px;z-index:3;}    

موادتشكيل دهنده با نوع وضعيت absolute بر روي يكديگر قرار گرفته اند و به ترتيب حق تقدم z-index اكران داده ميگردند
براي در دست گرفتن و طرز قرار گيري و حق تقدم در قرارگيري اين موادتشكيل دهنده بر روي يكديگر از مقدار z-index استعمال ميشود . چندين عنصر مي‌توانند به طور هم‌زمان بر روي يكديگر قرار گيرند و با انتخاب مقدار z-index مي قدرت حق تقدم در قرار گيري اين عنصرها را انتخاب نمود . عنصرها با z-index بيشتر نسبت به عنصرها با مقدار z-index كمتر فراتر قرار خواهند گرفت . اين عنصرها مانند چندين لايه بر روي يكديگر قرار خواهند گرفت .

اين روز ها ابزارهاي ساخت سايت فوق‌ العاده ‌اي تشكيل شده‌ اند. طراحي سايت شركتي  فرقي نمي‌ نمايد قصد حل چه مشكلي را در جريان كاري طراحي سايت ‌داريد؛ بالاخره ممكن ميباشد بتوانيد يك ابزار ابزاري جداگانه يا اين كه يك امكان تعبيه ‌گرديده در يك نرم‌افزار گسترده‌ خيس براي آن پيدا نماييد. اگرچه جامعه طراحي سايت نسبت به‌روزهاي اول دستخوش تغييراتي گرديده البته هنوز هم روحيه‌ به اشتراك ‌گذاري امور در اشخاص زنده باقي مانده ميباشد؛ پس بيشتر اين ابزارهاي جايگاه ‌يك مجاني ‌اند.
تعدد ابزارها مزيتي عالي محسوب مي ‌خواهد شد البته عيبش اين ميباشد كه مي ‌تواند موجب سردرگمي در گزينش گردد چراكه طريق ‌هاي مختلفي براي انجام يك عمل شبيه وجود داراست.
در‌اين نوشته ي علمي فهرستي از ابزارهايي را تهيه و تنظيم ‌كرده ‌ايم كه ازنظر ما اكنون شايسته ترين ‌هاي موجودند. اگرچه ليست ما بدون نقص وجود ندارد ولي اميد‌وار‌يم با مختصر و موثر كردن آن بتوانيم عمل گزينش ابزار مطلوب براي جريان كاري شما‌را ريلكس ‌خيس كنيم.
ازآنجايي‌كه‌اين فهرست نسبتاً طولاني ميباشد، ابزار ها را دسته‌ بندي كرده‌ ايم تا شل ‌خيس بتوانيد اپ مدنظر خويش را پيدا نماييد. در نصيب نخستين به معرفي قابل انعطاف ‌افزارهاي جامع طراحي وب سايت مي ‌پردازيم؛
آن گاه در خصوص ابزارهاي مقدماتي وايرفريمينگ، كادر ‌ورك ‌هاي طراحي وب سايت و كتابخانه‌ ها توضيح مي ‌دهيم. در بخش دوم ابزارهاي كوچك ‌خيس و تخصصي ‌خيس براي انجام تمامي امور از عمل با تصاوير گرفته تا ورود به فضاي حقيقت افزوده (AR) را پيدا خواهيد كرد.
جدول محتويات
1 ابزارهاي پباده سازي جامع1.0.1 اينويژن استوديو (InVision Studio)1.0.2 اسكچ (Sketch)1.0.3 ادوبي اكس دي (Adobe XD)1.0.4 ماروِل (Marvel)1.0.5 فيگما (Figma)1.0.6 افينيتي ديزاينر (Affinity Designer)1.1 موكاپ‌ها (mock up) و مثال‌هاي اول1.1.1 يواكس پين (UXPin)1.1.2 پروتو دات آي وي (io)1.1.3 بالساميك (Balsamiq)1.1.4 پروتوپاي (ProtoPie)1.1.5 ماك فلو (MockFlow)1.1.6 ادوبي كامپ (Adobe Comp)1.1.7 فلينتو (Flinto)1.1.8 آكژور (Axure)1.1.9 جاستينمايند (Justinmind)1.1.10 فلويد (Fluid)1.1.11 اينترپلي (Interplay)ابزارهاي پباده سازي جامعاينويژن استوديو (InVision Studio)مقصود اينويژن استوديو (InVision Studio) پايين پوشش قرار دادن كل مقر ‌ها ميباشد و صرفا ابزار رابط كاربري (UI) ميباشد كه به آن نياز پيدا خواهيد كرد. اين ابزار خصوصيت ‌هاي بسيار متعددي دارااست كه به شما در خلق و خوي رابط‌ هاي تعاملي خوشگل ياري مي ‌نمايد.
اين خصوصيت ‌ها مشتمل بر ابزارهايي براي مثال‌ سازي اول سريع، پباده سازي پاسخگو و مشاركتي و همينطور فعاليت با سيستم‌ هاي پباده سازي ميباشد.
در حالتي‌كه شما به يار و همدم اينويژن از ابزارهايي مثل اسكچ (sketch) به كارگيري مي ‌فرماييد مي بايست بدانيد كه بعضي از خصوصيت ‌هايشان شبيه ‌اند. اگرچه اقتدار اينويژن استوديو (InVision Studio) در قسمت مثال‌ سازي اول ميباشد به‌ ويژه درصورتي كه طرح شما دربرگيرنده پويانمايي نيز باشد.
مثال ‌سازي نخستين سريع به شما اذن مي ‌دهد ترنزيشن‌ هاي پيچيده و تخيلي خلق و خوي نمائيد و شمارا حاذق مي ‌سازد تا بتوانيد پويانمايي را متناسب با به عبارتي سطحي خوي نمائيد كه مي ‌خواستيد.
تنها مشخص و معلوم فرمائيد مي ‌خواهيد رابط كاربري ‌تان (UI) در اولِ ترنزيشن خويش چه‌گونه باشد و آنگاه سود ‌ي آخرين را پباده سازي نماييد. اينويژن استوديو (InVision Studio) ساير امور را برايتان انجام مي ‌دهد.
به‌علاوه مي ‌توانيد اين پويانمايي ‌ها و ترنزيشن‌ هاي سفارشي را از روش انجام حركات و تعاملاتي مثل كشيدن، كليك كردن و بردن ماوس روي مورد متبوع خلق و خوي نمائيد.
هنگامي كليه امور را انجام داديد از روش اينويژن از مثال ‌ي نخستين خويش خروجي بگيريد و از ساير افراد براي شركت كردن دعوت به فعاليت ‌آوريد. مي‌ توانيد پروژه خويش را در پلتفرم مقصود به اكران بگذاريد كه طرز خيلي نيكي براي آناليز و تست طرح‌ تان ميباشد. بعداً مشتري ‌ها مي ‌توانند دقيقاً روي طرح حيث دهند.
به ‌علاوه ديگر ما يحتاج وجود ندارد فكرتان را مشغول رفتار بُرد هاي هنري مختلف براي يك سري دستگاه (پلتفرم) متعدد فرمائيد؛ موتور چينش اينويژن استوديو (InVision Studio) طرح شما‌را به ‌طور اتومات متناسب با كليه ‌ي پلتفرم‌ها تغيير و تحول مي ‌دهد.
اين خصوصيت كه منجر صرفه‌ جويي در حين مي گردد به شما فضاي كافي مي ‌دهد تا بتوانيد بيشتر از پيشين درخصوص طرح خويش تصور كنيد.
اسكچ (Sketch)اپ اسكچ (Sketch) كه وابسته به كمپاني بهميان كدينگ (Bohemian Coding) ميباشد يكي‌از پركاربردترين پلتفرم‌ هاي ساخت سايت ميباشد؛ ابزار بر پايه ي وكتور بسيار قدرتمندي ميباشد كه براي ساخت و ساز رابط ‌ها و مثال‌ هاي اول به صورت مشاركتي كاربرد داراست.
اسكچ (Sketch) به‌طور ويژه براي ساخت‌و‌ساز اينترنت ‌وب سايت و نرم افزار ساخته شد؛ پس خصوصيت‌ هاي غيرضروري نيست كه بخواهد رابطتان را نامرتب نمايد. همينطور سريع‌خيس و مؤثرتر از قابل انعطاف‌افزاري ميباشد كه حوزه‌ ي كاربردي پهناور ‌تري داراست.
رُري بري (Rory Berry)، رئيس پروژه در كمپاني سوپرب (Superb)، در سال 2017 به اسكچ (Sketch) روي آورد و به ‌شدت به كارگيري از آن را به ساير افراد پيشنهاد مي‌ نمايد.
وي مي ‌گويد: «در مقايسه با فتوشاپ ترتيب كردن كل ورقه ها و انجام اصلاحات در اسكچ (Sketch) بسيار سهل وآسان ‌خيس ميباشد. اسكچ (Sketch) سندهاي كوچكي داراست درحالي‌كه فتوشاپ سندهاي بزرگي داراست.
از اين‌ جهت كه‌اين قابل انعطاف ‌افزار بر اساس وكتور ميباشد، اندازه ‌ي پوشه‌ها نسبت به فتوشاپ بسيار تحت ‌خيس ميباشد.»
اين ‌ها تمامي‌ي حقايق نيستند. «سيستم گريد (Grid System) تعبيه‌گرديده در اسكچ (Sketch) عالي ميباشد و پباده سازي رابط را بسيار بي آلايش‌خيس مي‌نمايد.
تفكر مي ‌كنم پباده سازي كلي رابط كاربري (UI) و نبود خصوصيت‌ هاي غير ضروري منجر گرديده بتوان با آن پباده سازي تميزتري انجام بخشيد. فتوشاپ در مقايسه با اين اپ خيلي پيچيده ميباشد.»
جامعه اين قابل انعطاف ‌افزار صدها افزونه اسكچ (Sketch) ارائه مي ‌دهد تا پروسه انجام كارتان سواي دردسرتر و ريلكس ‌خيس پيش رود.
عيب اسكچ (Sketch) اين ميباشد كه تنها براي سيستم ‌استدلال مك در دسترس ميباشد و هيچ نرم‌افزار ‌اي براي پشتيباني از ساير سيستم ‌برهان‌ ها نيست.
اين تبديل به خلل گرديده زيرا طراحان بيشتر مايل ‌اند فولدر ‌هاي «.sketch» خويش را با نرم‌افزار ‌نويساني كه از ويندوز به كار گيري مي ‌نمايند به اشتراك بگذارند.
خوشبختانه موقتيً يك برنامه «اسكچ (Sketch) براي ويندوز» به اسم «Lunacy» وجود داراست كه با به كار گيري از آن مي‌ قدرت فولدر ‌هاي «.sketch» را گشوده و بازنويسي كرد و بخش اعظم اين اختلال را حل كرد.
ادوبي اكس دي (Adobe XD)ادوبي اكس دي (Adobe XD) شايسته ترين فضا را براي پروژه ‌هاي ديجيتالي ارائه مي ‌دهد و پايين گروه‌ ي «Adobe Creative Cloud suite» عمل مي ‌نمايد.
در حالتي كه از يوزرها مشتاق كمپاني ادوبي (Adobe) مي‌باشيد البته با اكس دي (XD) كارنكرده‌ ايد در آستانه فعاليت احتمالاً متوجه گرديد كه رابط آن خيلي مشابه رابط ديگر قابل انعطاف ‌افزارهاي ادوبي (Adobe) وجود ندارد.
اگرچه در رقابت با ديگر ابزارهاي عظيم جان دار عقب نمي ‌ماند. در‌صورتي‌كه مدتي با فتوشاپ پباده سازي كرده باشيد كه خيلي بهتر ميباشد ولي براي پباده سازي رابط كاربري (UI) بها زماني را كه صرف مي ‌نمائيد داراست.
اين ابزارِ پباده سازي وكتور و وايرفريمينگ (wireframing) با افزودن خصوصيت‌ هايي مثل پشتيباني از مثال ‌سازي اول صوتي كه سبب مي ‌خواهد شد اين ابزار با آخري به‌روزرساني ‌هاي جان دار در حوزه‌ ي تجربه ‌ي مخاطب (UX) منطبق داشته باشد روزبه‌ روز بهتر مي ‌خواهد شد.
اكس دي (XD) دارنده ابزارهاي پباده سازي، ابزارهايي كه به شما اذن مي ‌دهند تعاملات غير ايستا را تعريف و تمجيد فرماييد، پيش ‌اكران تلفن همراه و دسكتاپ و همينطور ابزارهاي به اشتراك‌ گذاري به مراد دادن برخورد درخصوص طرح ‌ها ميباشد.
اين ابزار به شما اذن مي ‌دهد براي استارت يك پروژه اندازه ‌ي پيروزي هنري مختص دستگاه مدنظر خويش را تعيين نماييد؛ حتي مي‌ توانيد يك كيت رابط كاربري دوست داستني به عنوان مثالً متريال صفحه ارايي (Material Design) گوگل- را وارد اپ (import) نمائيد.
از كليه مهتر اينكه ادوبي اكس دي (Adobe XD) با ديگر قابل انعطاف‌افزارهاي «Creative Cloud» يك دست مي ‌خواهد شد؛ بدين مفهوم كه مي ‌توانيد به ‌راحتي «asset»هاي فتوشاپ يا اين كه ايلاستريتر (Illustrator) را وارد اين نرم افزار (import) كرده و با آن‌ ها كاركنيد.
چنانچه با ديگر نرم‌افزار ‌هاي ادوبي (Adobe) كاركرده باشيد، رابط كاربري (UI) به نظرتان آشنا ميباشد و يادگيري روش‌ ي فعاليت با آن خيلي طاقت فرسا وجود ندارد. آندره رابو (Andrei Robu)، مديريت پباده سازي كمپاني رابو استوديو (Robu Studio) در شهر بارسلون، ميان طرفدارانش مي‌ گويد: «براي ساخت و ساز سريع موكاپ (mock up) عالي ميباشد.
رابط خيلي سبكي ميباشد كه عكس ‌هاي متعددي در آن بار گذاري گرديده‌ اند و براي بوم ‌هاي مخلوط‌ بندي (moodboards) عالي ميباشد.
مثال ‌سازي اول خيلي موءثر ميباشد زيرا مي ‌قدرت به مشتري ‌ها نشان بخشيد اجزاء پروژه چه طور فعاليت مي‌نمايند؛ به ‌ويژه براي اين خوب ميباشد كه مي ‌توانيد محتواها را در ديده بر هم زدني به‌ شكل آنلاين منتشر نمائيد.»
اليس راجرز (Ellis Rogers)، طراح گرافيك در كمپاني ريسپشنال بامسئوليت محدود (Receptional Ltd) هم به كار گيري از اين قابل انعطاف ‌افزار را پيشنهاد مي ‌نمايد: «زماني فعاليت پباده سازي/ مثال ‌سازي نخستين يا اين كه وايرفريمينگ (wireframe) به اتمام رسيد، ادوبي اكس دي (Adobe XD) به شما اذن مي ‌دهد خيلي سريع موادسازنده را گزينش كرده و ترنزيشن صفحه هاي را براي مثال نخستين اجرايي اخلاق نماييد كه مي ‌اقتدار آن را بوسيله يك پيوند به اشتراك گذاشت.»
بعد از آن اين ‌طور توضيح مي‌ دهد: «اين پيوند به شما اذن مي ‌دهد بازخوردها را به ازاي هر كاغذ عده‌ آوري كرده و همگي ‌چيز را سازمان ‌دهي فرمائيد. اين لينك و پيوند را مي ‌اقتدار باطن ادوبي اكس دي (Adobe XD) به‌ روزرساني كرد تا مشتري همواره نهايي ورژن را ببيند و نگران اخذ ورژن ‌هاي به‌روزرساني نشده نباشد. اين خصوصيت لذت انجام فعاليت را دوچندان مي ‌نمايد.»
ماروِل (Marvel)مارول (Marvel) ابزاري ديگر براي طراحي سايت ميباشد كه براي ساخت و ساز سريع ايده‌ ها، اصلاح يك رابط به به عبارتي شكلي كه شما مايليد درآيد و ساخت و ساز مثال ‌هاي اول بسيار مطلوب ميباشد.
مارول (Marvel) در توليد صفحه هاي از روشي بسيار منظم به كارگيري مي‌نمايد و به شما اذن مي ‌دهد طرح خويش را از روش يك مثال نخستين مشابه ‌سازي فرماييد.
آيتم ‌هاي يك دست‌ سازي فوق ‌العاده ‌اي براي درج پباده سازي ‌هايتان در جريان كاري پروژه وجود دارااست. ديدني اينكه خصوصيت تست مخاطب در آن تركيب ‌شده‌است كه استعمال از آن اينك در منطقهي ابزارهاي طراحي وب سايت پاره اي غيرمعمول ميباشد. همگي‌ چيز آنلاين ميباشد پس‌ نيازي به دانلود هيچ‌ چيز وجود ندارد.
فيگما (Figma)فيگما (Figma) ابزاري براي پباده سازي رابط ميباشد كه اذن مي‌ دهد يكسري طراح بتوانند به‌طور هم ‌برهه زماني در آن شركت كردن داشته باشند. اين امكان هنگامي چندين ذينفع در پروژه وجود دارا‌هستند كه كليه در صورت‌ دهي به فيض پاياني دخالت دارا هستند بسيار مؤثر ميباشد.
اين ابزار در مرورگر يا اين كه ويندوز، مك يا اين كه لينوكس در دسترس ميباشد. بسته به غرض شما از به‌كارگيري اين ابزار مي ‌توانيد به آن به‌شكل بدون‌پول و غير بدون‌پول دسترسي داشته باشيد. در پي به ذكر برخي از خصوصيت ‌هاي پررنگ آن مي ‌پردازيم.
بنيامين ريد (Benjamin Read)، طراح سمت استفاده كننده توضيح مي ‌دهد: «فيگما (Figma) دارنده يو ‌اس ‌پي (USP) شبيه اسكچ (Sketch) ميباشد؛ فقط تفاوتي كه دارااست اين ميباشد كه در چندين پلتفرم مي ‌قدرت از آن بهره مند شد.
هنگامي از آن براي ساخت و ساز يك سري آيكون به كار گيري كردم ديدم كه جريان كاري حقيقتاً سواي نقص‌ پيش مي ‌رود. خيلي سريع آن را حافظه گرفتم و مزيت اضافه‌ ي مشاركتي بودن هم در دسترس اينجانب بود: مي ‌توانيد درون نرم‌افزار با ديگر افراد به اشتراك گرافيك هم بپردازيد.»
وي اضافه كرد: «اينجانب كارايي كردم براي كارم از لينوكس استعمال كنم؛ گهگاه هم از ويندوز به كار گيري مي ‌كنم. فيگما (Figma) ازنظر كاربردي براي اينجانب خوب ميباشد زيرا در يك سري سيستم‌ دليل در دسترس ميباشد.»
ديويد ايستوود (David Eastwood)، محتوا نويس و آفريننده‌ ي شغل هاي هنري آزادكار نيز ايده ها خير در باب فيگما (Figma) داراست: «همينطور هنگامي موردنياز بود به سرعت MVTها را با اندازه بي نقص سبك ‌سازي كنيم حقيقتاً اثرگذار بود؛
گهگاه موردنياز ميباشد به طرح فعلي يك‌سري چيز كوچك اضافه گردد. اينكه مي ‌قدرت با‌گاز براي دسكتاپ، تبلت و گوشي پباده سازي انجام اعطا كرد را خيلي دوست داريم.»
افينيتي ديزاينر (Affinity Designer)دن ادواردز (Dan Edwards)، طراح مال، مي ‌گويد: «بعضا به افينيتي ديزاينر (Affinity Designer)، جنس كمپاني سريف (Serif)، كنيه «قتل كننده فتوشاپ» را داده‌ اند و برهان آن بسيار شفاف ميباشد.
چندين خصوصيت در آن بود كه حقيقتاً دوست داشتم. اين خصوصيت ‌ها مشتمل بر لايه‌ هاي قابل تهيه و غير مخرب بود؛ بدين معنا كه مي ‌توانيد تصاوير يا اين كه وكتورها را فارغ از اينكه به آن‌ ها جراحت بزنيد تهيه و تنظيم فرماييد.»
«امكان پهناور ‌نمايي يك ‌ميليون درصدي انتها تجهيزات بود! به‌ ويژه هنگامي با شغل هاي هنري بر طبق وكتور فعاليت مي ‌نمائيد خيلي به درد مي ‌خورد زيرا مي ‌توانيد حقيقتاً در آن ظريف گرديد.
خصوصيت ‌هاي بازگرداندن فعاليت انجام‌گرديده (Undo) و تاريخچه حقيقتاً كاربردي ميباشد: افينيتي (Affinity) به شما اذن مي ‌دهد تا 8000 مرحله عقب برويد!»
«رابط كاربري (UI) در پباده سازي اصطلاح شناخت ميباشد. به لحاظ مي ‌برسد هركسي كه مي ‌خواهد به‌ مكان فتوشاپ از قابل انعطاف ‌افزار ديگري استعمال نمايد مي ‌خواهد تمامي ‌چيز شبيه باشد كه حقيقتاً معضل ‌برانگيز ميباشد.

كادر ورك Meteor كه با اسم‌هاي Meteor.JS و MeteorJs نيز شناخته مي‌گردد طراحي سايت شركتي بخش‌هاي متفاوت وبسايت شمارا مثلا اپليكيشن نويسي Back-end، رئيس مقر داده، اجراي منطق اپ زير اينترنت شما، رندر كردن Front-end برنامه زير اينترنت شما‌را پشتيباني مي‌نمايد .و شما براي انجام هر مورد از اين فعاليت‌ها ميتوانيد از قاب ورك meteor به كار گيري فرمائيد.

كتابخانه‌ها و كادر ورك‌هاي تلفن همراه و دسكتاپ
در صدر براي ايجاد برنامه‌هاي هر پلتفرم نياز بود گويش‌هاي Native يا اين كه مستقر آن پلتفرم آموخته گردد. معمولا نرم افزار نويسي با آنان ايراد بود. در صورتي‌كه احتياج به توليد نرم افزار براي يك سري پلتفرم بود، گسترش شان هزينه و مدت و نيروي انساني بيشتري مي‌طلبيد. به اين ترتيب نياز به يك لهجه مشترك(كراس پلتفرم) براي يك توشه كد تايپ كردن و اجرا در تعدادي پلتفرم حس شد. اين گويش مشترك جاوا اسكريپت بود!

با به كار گيري از كتابخانه‌ها و قاب ورك‌هاي جاوا اسكريپت شما ميتوانيد با يادگيري يك لهجه نرم افزار نويسي، براي IOS و اندرويد؛ يا اين كه براي ويندوز، مك و لينوكس هم زمان اپليكيشن بنويسيد. در اينجا به معرفي داراي شهرت‌ترين ابزارهاي اپ نويسي جاوا اسكريپتي كراس پلتفرم برنامه‌هاي تلفن همراه و دسكتاپ ميپردازيم.

كادر ورك React Native

React Native قاب وركي ميباشد كه به وسيله آن مي توانيد با به كارگيري از جاوا اسكريپت به طور كراس پلتفرم اپليكشن تلفن همراه بسازيد. اين به آن شكل وجود ندارد كه برنامه‌هاي React Native قرار ميباشد در باطن يك WebFrame در گوشي اجرا شوند. كامپوننت‌هاي React Native به طور بي نقص به كد Native هر پلتفرم ترجمه ميگردند. همينطور ظواهر كامپوننت‌ها در اندرويد و IOS تماما ساكن ميباشد.

به كار گيري از اين نحوه هزينه‌هاي ساخت و ساز نرم‌افزار را به شدت كاهش مي دهد. همين‌طور بازه توسعه و گسترش اپ به صورت قابل مراعات‌اي معدود مي شود. و بلاخره به جهت به كارگيري از گويش جاوا اسكريپت به مكان جاوا و سوئيف يا اين كه Objective-c فعاليت كدنويسي شل‌خيس ميگردد.

كادر ورك Electron.js

كادر ورك Electron.js ابزاري ميباشد كه با استعمال از آن ميتوانيد به طور كراس پلتفرم نرم افزار‌هاي دسكتاپ منحصربه‌فرد Windows، Mac و Linux بسازيد. ايده ساخت و ساز اين كادر ورك از آنجا بوجود آمد كه قرار بود يك ويرايشگر متن كراس پلتفرم براي كدهاي جاوا اسكريپت، HTML و CSS ساخته خواهد شد. در غايت بعد از ولادت Electron.js در سال 2013، ويرايشگر كد Atom با آن ساخته شد.

رابط كاربري اپ‌هاي درست شده با Electron.js به طور كامل مستقر شده‌است. همينطور با استعمال از Electron.js مي توانيد امكاناتي مانند آپ ديت خودكار، پيغام‌هاي اشتباه و بقيه امكاناتي كه با نرم افزار‌هاي Native از آنها برخورداريد، در نرم‌افزار جاوا اسكريپتي خويش داشته باشيد.

عده‌بندي:

در‌اين نوشته‌ي‌علمي به چك بعضا از معروف‌ترين و دوستداشتني‌ترين كتابخانه‌ها و قاب ورك‌هاي جاوا اسكريپت پرداختيم. با استعمال از جاوا اسكريپت مي توانيم چه براي نرم‌افزار‌هاي اينترنت سمت سرور و سمت كلاينت، چه برنامه‌هاي گوشي و چه اپ‌هاي دسكتاپ نرم‌افزار بنويسيم. نرم افزار تايپ كردن با اين ابزارها هزينه‌هاي مالي، نيروي انساني و وقتي را به شدت كاهش مي دهد. همين‌طور ديباگ كدها به جهت ساختارمندي و استاندارد سازي گرديده بودن آنها معمولي مي شود. در نصيب‌هاي بعدي مسير كلي پيش روي شما براي تبديل به يك اپ نويس جاوا اسكريپت ماهر را معرفي ميكنيم. به حيث شما به كار گيري از جاوا اسكريپت به طور كراس پلتفرم چه مزايا و معايبي دارااست؟

دائما از ما پرسيده مي‌شود كه داشتن يك وبسايت چه مقدار هزينه داراست؟  طراحي سايت شركتي براي استارت فعال سازي يك سايت چه مقدار ميبايست هزينه كنم؟ در‌اين نوشته‌ي علمي صفر تا 100 مخارج پباده سازي و مراقبت تارنما را با شما مرور خوا‌هيم كرد.
بطور روشن مي‌خواهيم در‌اين نوشته‌ي علمي به شما بگوييم كه داشتن يك تارنما  چه مقدار هزينه براي شما خواهد داشت.
در حيث داشته باشيد كه مدام مي‌توانيد به طور تماما بدون پول و سواي نياز به حتي يك ريال هم وبسايت تان را  فعال سازي كرده و كسب و عمل خويش را آغاز نمائيد. احتمالا در دور و بري ها شما افرداي مي باشند كه مي توانند در اين باره به شما ياري بكنند.
ما در‌اين نوشته‌ي‌علمي قصد داريم براي افرداي كه دوست دارا‌هستند قدمي بلند خيس بردارند و بدانند داشتن يك تارنما ماهر چه هزينه هايي داراست مندرج ميباشد. شايد بتوان سواي هزينه هم تارنما داشت ولي كسب سود اثر گذار از آن دستور ديگريست. پس با ما باشيد تا مخارج پباده سازي يك وبسايت ماهر را بدانيد.
درصورتي كه در امر مزايا داشتن وبسايت مطمئن نيستيد مطلقا اين نوشته ي علمي را بخوانيد:
چرا براي خويش وبسايت پباده سازي كنيم؟
همان طور كه گفتيم  براي آنكه كاري را به صورت اصولي استارت فرماييد بهتر ميباشد كمي سرمايه اندك براي شروع اول كارتان كنار بگذاريد.
ليست مواقعي كه قادر است براي داشتن يك وب سايت ماهر هزينه بردار باشد بطور كلي دربرگيرنده موردها پايين ميباشد.
دامنه يا اين كه نشاني تارنماهاست (محل ذخيره سازي وبسايت )هزينه طراحي وبهزينه ايجاد محتوا براي تارنماهزينه seo وب سايتهزينه پشتيباني وبسايتهم اكنون به اختصار درباره‌ي هرمورد از مورد ها بالا و مخارج آن حرف خوا هيم كرد.
1- هزينه دامنه وب سايتدامنه تارنما يا اين كه به عبارتي آدرسي كه به وب سايت شما منتهي مي گردد با پسوند مختلفي شناسايي مي گردد. اين دامنه ها بصورت هر ساله يا اين كه پنج ساله اجاره مي‌شود و تا مادامي كه پرداخت اجاره ارزش را انجام دهيد تارنما وابسته به شماست. چنانچه از پرداخت اجاره در موعد مقرر پرهيز كنيد دامنه مجددا آزاد گرديده و خريدار نو مي تواند صاحب آن گردد.
در جدول پايين هزينه تثبيت دامنه در سال 1398 ( فصل‌تابستان ) درج شده‌است


2- هزينه هاست يا اين كه سرور وب سايتدر شرايطي كه بخواهيم راجع به هاست يك توضيح معمولي بدهيم بايستي بگوييم كه هاست قسمتي از يك سرور مدام پر‌نور ميباشد كه به طور 24 ساعته به كانال جهاني وب متصل ميباشد و چنانچه داده ها سايتمون رو بر روي هاست در اختيار بگذاريم سايت ما در سرتاسر عالم در دسترس قرار مي‌گيرد و دوستان و مشتريان ما مي‌توانند با وارد كردن نشاني وب سايت (دامنه) در مرورگر (تلفن همراه يا اين كه كامپيوتر) در هر لحظه از شبانه روز وارد تارنما ما شوند و به مجموع توليد ها و سرويس ها عرضه گرديده بوسيله مادسترسي داشته باشند . با اين تعريف مفهوم هاست مشخص و معلوم شد. حالا يك هاست خوب، امن ، پرسرعت و قالب اعتماد (داده ها ما روي آن زخم نبيد چه هزينه اي دارااست؟
هزينه هاست نيز بصورت ماهيانه و يا اين كه ساليانه به حساب آوردن مي شود.


اين دو خدمت از يكي‌از ارائه كننده گان مطرح هاست مرزو بوم گزينش شده‌است. همان طور كه مشاهده مي‌كنيد گاها ارزش يك هاست مي‌تواند تا بيشتراز 10 برابر ارتقا پيدا نمايد. اين ارزش در فصل تابستان 1398 ارائه شده‌است.
با اين اكانت يك هاست خوب با دقت به كيفيت هاست (تعداد سايتهاي مو جود بر روي سرور) و دست اندركاران گوناگون (نظير مقدار فضاي مايحتاج شما) قادر است از ماهيانه 10 هزارتومان تا بيش تر از 100 هزارتومان براي شما هزينه داشته باشد.
3- هزينه طراحي وب سايتدرخصوص اينكه داشتن يك وبسايت چه هزينه هايي داراست ، بايستي بگوييم كه امروزه طراحي وب سايت با شيوه ها و تكنيك هاي اپليكيشن نويسي مختلفي شكل مي‌گيرد اين اختلاف تكنيك و متد پباده سازي و ولي سوابق يا اين كه مهارت طراح ميباشد كه مي‌تواند در گزينش بها طراحي وب موءثر باشد. ما نمي توانيم درباره ي همگي طراحان و روشهاي نرخ‌گذاري آن ها اعلام لحاظ كنيم البته قادر خواهيم بود ليستي از عواملي كه در ارزش طراحي وب سايت نقش اصلي دارا هستند براي شما ذكر كنيم.
 استعمال از cms هاي مهيا مانند وردپرس و يا اين كه پباده سازي cms مخصوص و سفارشيگرافيك و طراحي صفحه تم يا اين كه به عبارتي قالب وبسايتوجود تجهيزات گوناگونامنيت پباده سازيپشتيباني وب سايتبراي پباده سازي بدليل گستردگي سرويس ها، زمان قيمتي 100 هزارتومان تا 10 ميليون تومان در بازار طراحان وب سايت به چشم ميخورد.
4-هزينه ساخت محتوا براي وب سايتتمامي مي دانند ساخت محتوا پاد شاه ميباشد. يك تارنما سواي محتواي مطلوب و seo گرديده نميتواند في مابين رقبا حرفي براي بيان كردن داشته باشد و از آنان در نزد گوگل پيشي بگيرد. ساخت محتوا مستلزم دانشي ست كه تجربه در آن نقش حياتي داراست. هر وبسايت با اعتنا به نياز خويش مايحتاج ميباشد بصورت منظم به ايجاد محتوا بپردازد. اين محتوا غير وابسته از جذابيت ميبايست اصول نگارشي و سئوي قابل قبولي نيز داشته باشد.
نرخ‌گذاري در ساخت و ساز محتوا با دقت به تلاش و بضاعت و توان متخصص ساخت و ساز محتوا گوناگون ميباشد.
در ذيل دو مثال از ليست سايتهايي كه به ساخت‌و‌ساز محتواي منحصر مي پردازند ارائه مي‌كنيم تا اختلاف ارزش را در آنان مشاهده نماييد.


با مقداري توجه مي‌بينيد كه براي ساخت‌و‌ساز محتواي به طور تقريب يكسان چه اختلاف قيمتي وجود دارااست. 
5- هزينه بهينه سازي تارنماseo داخلي تارنما با دقت به نوع قالب و گويش نرم افزار نويسي و همينطور وسعت و نوع محتوا مي‌تواند هزينه متفاوتي را براي با صرفه شدن بطلبد. ضمن اينكه متخصص seo ممكن ميباشد براي موردها متفاوت مدت متفاوتي صرف نمايد و اين با اعتنا به تجربه متخصص ميتواند هزينه متفاوتي راب راي شما به ارمغان بياورد.
امروزه براي سئوي داخلي وبسايت هزينه اي بالغ بر 250 هزارتومان تا 3 ميليون تومان از مشتري طلب مي‌شود.
6- هزينه پشتيباني وب سايتپشتيباني فني و سئوي وبسايت از مهم ترين هزينه هايي ست كه موردنياز ميباشد در پرداخت خويش احتساب كنيد. هر وب سايت با اعتنا به نوع كار پشتيباني هاي متفاوتي را ميطلبد . مواقعي كه در پشتيباني تارنما شما مفيد ميباشد بطور خلاصه در ذيل آورده گرديده اند.
چك روزمره ، هفتگي و ماهانه گوگلآپ ديت منظم كدنويسي و قالب هامحاسبه خطاهاي وبسايتكانفيگ منظم سرعت و امنيت تارنماچك نقش پيشرفت وبسايت در گوگل و بازديدانتخاب مسير جنبش براي همگي اعضاي وبسايتبراي پشتيباني وبسايت با دقت به وسعت كار و نوع كار وب سايت ممكن ميباشد ماهيانه 250 هزارتومان تا 1 ميليون تومان هزينه پرداخت فرمائيد.
آيا داشتن وبسايت قيمت اين هزينه ها را دارااست؟با اعتنا به توضيحات بالا مي‌توانيد درباره ي مخارج تقريبي يك تارنما يك تقريب تقريبي داشته باشيد. تنها در لحاظ داشته باشيد كه در شرايطي‌كه كمپاني طراحي وب سايت قادر است سايتي براي شما پباده سازي نمايد و يا اين كه سرويسي را ارائه دهد كه سرمايه شما‌را بازمي گرداند براين اساس مخارج برآورد گرديده در ابتدا نبايد سبب ساز برهم ميل كردن تصميم شما بابت داشتن يك وبسايت گردد. پيشنهاد مي كنيم كه اذن ندهيد كه برچسب بها شما‌را از هدفي كه براي خويش مشخص و معلوم نموده ايد، به دور نمايد. در صورتي مقداري نظارت فرماييد متوجه ميشويد كه شما مخارج اكثري در مكان نامناسب (مانند مجلات تبليغاتي چاپي) صرف مي‌كنيد اما ابدا بازدهي موردنياز را از آن اخذ نمي‌كنيد. البته يك وبسايت كسب درآمد بسيار بيشتري از مقدار هزينه داراست.
نكته انتهانكته انتها اينكه سرويس ها ساخت وب سايت وينتو بصورت پكيج همگي مورد ها مطرح گرديده را دربرگيرنده مي گردد. در واقعيت ما بصورت شفاف براي شما هزينه اول تارنما و هزينه ماهيانه مراقبت وب سايت را احتساب مي كنيم تا شما بدانيد هر ماه چه واحد سنجش ميبايست براي وب سايت خويش هزينه فرمائيد.

وقتي كه مشتريان به تارنما شما راز مي‌زنند و پيرو محصولي خاص مي‌شوند بالاي 30 درصد آنان به سراغ بخش جستجوي شما ميروند! حدس بزنيد چرا؟ طراحي سايت شركتي  مشتريان شما به چيزي كه ميخواستند نرسيدند و بجاي اينكه بيشتر پيرو كالا متبوع باشند آنرا در وب سايت شما كاوش مي نمايند؛ پس در صورتي‌كه سرچ وب سايت شما به صدق فعاليت نكند بيشتر مشتريان خويش را از دست خواهيد اعطا كرد.
 
وب سايت شما براي اكران در تلفن همراه seo نشده ميباشد 
يكي مواقعي كه مي بايست به آن توجه نماييد آن ميباشد كه اكثري از يوزرها ديگر از كامپيوتر هاي روميزي و يا اين كه لپ تاپ ها به كار گيري نمي‌كنند و بجاي آن از موبايل هاي هوشمند و يا اين كه تبلت استعمال مي نمايند به همين استدلال پس از ارتقاء نرخ بازديد كنندگان از روش تلفن همراه و تبلت؛ از آخرها سال 2015 بخش اعظمي از صاحبان كسب و عمل هاي اينترنتي به طراحي وب براي موبايل هاي هوشمند روي آوردند تا بتوانند از گنجايش هاي اين بازار به خير افتتاح نمايند.
 
در صورتيكه شما نيز يك دكان اينترنتي داريد بايستي دقت داشته باشيد كه بيشتر مخاطبان شما از تلفن همراه و تبلت مي‌باشند، پس بايستي بدين نكته دقت ويژه اي داشته باشيد.
 
 
 
شما به وب سايت خويش به اندازه كافي اعتنا نداريد 
 
آيا تا به حالا از دكان خويش خريد نموده ايد؟ بخش اعظمي از صاحبان دكان هاي اينترنتي مشتاقانه گوگل انالتيكز و وبمستر را تحليل مي نمايند اما به تدريج اينترنت سات خويش را ارزيابي و از آن خريد مي نمايند.
 
در اكثر اوقات موردها اكثري از اشكالات توسط همين عمل برطرف ميگردد البته از آنجايي كه خلق و خوي مشتري ها با يكديگر متعدد ميباشد. شما ميتوانيد با نظارت خوي مشتريان و همينطور اجراي A/B آزمايش ها، به شايسته ترين برخورد دست پيدا فرمائيد.
 
براي بالا بردن نرخ تبديل مي بايست به موردها تحت توجه نمائيد:
 
در متن هاي خويش خطاهاي نگارشي و گرامري نداشته باشيد و محتواي خويش را با دقت به پرسوناي تارنما تنظيم فرمائيد.پيوند دهي به صفحه ها متعدد در وبسايت ها معمولا به وسيله تصاوير انجام ميگردد؛ مراقب باشيد لينك و پيوند شكسته اي در تارنما شما وجود نداشته باشد و از طرفي ويژگي alt و title تصاوير را نيز به طبع كامل شدن كنيد.هرچقدر وبسايت شما سنگين خيس باشد بازه بار گذاري آن نيز فراتر ميباشد، به همين عامل نبايد از تصاويري با وسعت بالا به كار گيري نماييد.در صورتي‌كه شما در هر مورد از صفحه هاي خويش popup به مشتري خويش اكران مي دهيد؛ مي بايست تخت‌گاز اين فعاليت را متوقف فرماييد چرا‌كه اين فعاليت منجر آزار مشتري گرديده و تارنما شما‌را شكاف خواهد كرد.درصورتي كه ويديو هاي شما به طور خودكار پخش شوند معمولا مخاطبان وب سايت شمارا رخنه‌ خواهند كرد و چنانچه قابليت و امكان متوقف كردن كليپ را در تارنما نگذاشته باشيد معيار ريزش تارنما يك سري برابر نيز گردد (اعتنا داشته باشيد كه پخش اتوماتيك ويديو براي هر سايتي مزيت به اكانت نمي آيد و بايستي مبني بر نياز مشتري خويش اين عمل را انجام دهيد.) 
 
 
سود گيري
 
بخش اعظمي از عموم گمان مي نمايند با خريد يك تم فروشگاهي قشنگ كه دارنده صفحه ها سبد خريد ميباشد يك مغازه دارا‌هستند البته اينطور وجود ندارد. شما مي بايست وبسايت را نسبت به نياز هاي خويش سئو فرمائيد و از اشخاصي بخواهيد تحت عنوان خريدار به تارنما شما بيايند و آنرا از ديد المان هاي تحت ارزيابي نمايند تا بتوانيد مشكل هاي آنرا برطرف نماييد.