مشاوره رایگان
دریافت لینک های دانلود
دریافت پستی درب منزل
مبلغ کل:
تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید
طراحی آیکون های اشتراک گذاری در شبکه های اجتماعی
طراحی آیکون های اشتراک گذاری در شبکه های اجتماعی
مشکل دکمه های اشتراک گذاری فیس بوک و دکمه های مشابه اشتراک گذاری جاوا اسکریپت یا سرویس هایی مانند SumoMe این است که آنها هنگام بارگیری صفحه توسط کاربران درخواست های HTTP زیادی را به سایت اضافه می کنند و می توانند سرعت بارگیری سایت شما را به میزان قابل توجهی کاهش دهند.
در آموزش امروز ، می خواهم به شما نشان دهم که چگونه مجموعه ای از آیکون های سبک را برای اشتراک گذاری در شبکه های اجتماعی برای وب سایت خود ایجاد کنید. به شما آموزش می دهم که چگونه آیکون های مدرن زیبا ایجاد کنید و چگونه می توانید بدون کاهش کارایی سایت توسط درخواست های اضافی ، عملکردهای لازم را به آنها بیفزایید.
قبل از شروع ، می توانید به نسخه ی نمایشی نگاهی بیندازید تا نتیجه کار را ببینید.
الگوی HTML
طبق معمول ، ما با طراحی الگو برای فایل اصلی HTML شروع می کنیم. هر نامی می توانید به این فایل بدهید ، من در این مثال نام آن را index.html گذاشته ام.
از آنجا که این الگو به شکل یک صفحه ساده دارای یک مقاله است ، چیز زیادی برای توضیح نیست. اما مواردی که نباید فراموش کنید ، فایل های custom.css و custom.js است که از آنها برای تعریف ظاهر و رفتار نمادهای اشتراک گذاری استفاده خواهیم کرد.
برای نماد های شبکه های اجتماعی ، از یک فونت آیکونی به نام Socicons استفاده خواهیم کرد و پیوندی به فایل استایل آن را نیز از طریق CDN قرار خواهیم داد. دلیل اینکه من این مجموعه آیکون را انتخاب کردم به روز بودن و گستردگی آن است. این مجموعه شامل گزینه های بسیار گسترده ای از آیکون ها است. در ابتدا می خواستم از FontAwesome استفاده كنم اما به دلیلی نامعلوم ، آیكونی برای Buffer ندارد.
برای اهداف آزمایشی ، فایل های CSS و JS بوت استرپ همچنین یک فونت وب Roboto و برخی از متن های ساختگی نیز به فایل الگو اضافه کردم.
<!DOCTYPE html>
<html>
<head>
<title>Share Icons</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700,900' rel='stylesheet' type='text/css'>
<link href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css" rel="stylesheet">
<link href='custom.css' rel='stylesheet' type='text/css'>
<meta property="og:title" content="Share Icons Tutorial">
<meta property="og:site_name" content=" ">
<meta property="og:image" content="template-homepage.png">
<meta property="og:description" content="This is a demo for our tutorial showing you how to nice custom share icons to your website.">
<meta name="twitter:card" content="summary">
<meta name="twitter:creator" content=" ">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h1>Clicksite <a href="mailto:clicksite.ir@gmail.com">clicksite.ir@gmail.com</a></h1>
<p class="lead">This is a demo for our tutorial showing you <strong>how to create nice custom share icons</strong> for your website.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="custom.js"></script>
</body>
</html>
کد HTML آیکون ها
اکنون ، می توانیم به کد HTML آیکون های اشتراک گذاری خود بپردازیم.
ما با <"p class="social> کار می کنیم که در آن پیوندهای مربوط به هر یک از سرویس های اشتراک گذاری را قرار می دهیم.
خود پیوند شامل یک نماد <i> و همچنین یک عنصر <"span class="sr-only> است که برای کاربرانی که از ابزار کمکی صفحه خوان استفاده می کنند (مثلاً کم بینایان) مفید است و صفحه خوان متن داخل این تگ را برای آنها می خواند.
تگ <"p class = "social> را پس از پاراگراف آخر در الگوی خود قرار خواهیم داد. لیست آیکون های موجود از مجموعه Socicons را می توانید در داخل این تگ ، پیدا کنید.
همانطور که مشاهده می کنید ، قالب و تعداد پارامترهایی که باید به آدرس اینترنتی شبکه اجتماعی منتقل کنید متفاوت است. در ادامه مقاله برخی از آنها را شرح خواهم داد. همچنین ، از کلاسهای پیوندها (به عنوان مثال "class = "facebook) در بخش های بعدی این آموزش استفاده می شود.
هنگام استفاده از این کد در سایت خود ، فراموش نکنید که URL ها و سایر پارامترها را با آدرس خود جایگزین کنید. اگر از آن در یک وب سایت کوچک استفاده می کنید ، می توانید به صورت دستی ویرایش کنید ، در غیر این صورت ایده خوبی است که به عنوان مثال با کمک PHP آن را به صورت برنامه نویسی شده با متغیر ها جایگزین کنید.
<p class="social">
<a href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Famanyio.github.io%2Fbootstrap-share-icons" class="facebook">
<i class="socicon-facebook"></i><span class="sr-only">Share on Facebook</span>
</a>
<a href="https://plus.google.com/share?url=https%3A%2F%2Famanyio.github.io%2Fbootstrap-share-icons" class="gplus">
<i class="socicon-googleplus"></i><span class="sr-only">Share on G+</span>
</a>
<a href="https://twitter.com/intent/tweet?text=Share%20Icons%20Tutorial;url=https%3A%2F%2Famanyio.github.io%2Fbootstrap-share-icons;via=bootstrap" class="twitter">
<i class="socicon-twitter"></i><span class="sr-only">Share on Twitter</span>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Famanyio.github.io%2Fbootstrap-share-icons;summary=Check%20out%20this%20nice%20tutorial&source=https%3A%2F%2Famanyio.github.io%2Fbootstrap-share-icons" class="linkedin">
<i class="socicon-linkedin"></i><span class="sr-only">Share on LinkedIn</span>
</a>
<a href="https://buffer.com/add?url= https%3A%2F%2Famanyio.github.io%2Fbootstrap-share-icons;text=Share%20Icons%20Tutorial" class="buffer">
<i class="socicon-buffer"></i><span class="sr-only">Save to Buffer</span>
</a>
<a href="https://getpocket.com/edit?url=https%3A%2F%2Famanyio.github.io%2Fbootstrap-share-icons" class="pocket">
<i class="socicon-pocket"></i><span class="sr-only">Save to pocket</span>
</a>
</p>
کد CSS آیکون ها
حالا باید نگاهی به استایل های CSS برای نمادهای اشتراکی بیندازیم و به آنها ظاهری خوب و مناسب بدهیم. این شیوه نامه را custom.css نامگذاری کنید و آن را در همان پوشه در کنار فایل قالب html ذخیره کنید.
اگر می خواهید این استایل ها را در صفحه ای که از چارچوب Bootstrap استفاده می کند، بکارببرید ، می توانید اولین استایل مربوط به کلاس sr-only را حذف کنید ، زیرا این استایل بخشی از CSS درون Bootstrap است.
فکر می کنم کد خودش کاملاً واضح است ، بنابراین من فقط به طور خلاصه نتیجه کار را شرح می دهم:
من پیوندهای p.social را به صورت بلوکهای گرد inline با عرض و ارتفاع 3em قالب بندی کردم.
وقتی نشانگر موس روی پیوند قرار نگیرید ، پیوند حاشیه خاکستری خواهد داشت ، همچنین نماد به رنگ خاکستری خواهد بود. وقتی نشانگر موس روی آن حرکت کند ، حاشیه و رنگ متن به آبی تیره تغییر می کند.
به راحتی می توانید رنگ hover را با جایگزینی رنگ های آبی تیره در کد ، تغییر دهید.
/* اگر از بوت استرپ استفاده می کنید می توانید این کد را حذف کنید */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
/* آیکون های اشتراک گذاری تکرنگ */
p.social a {
display: inline-block;
margin: 0 10px 10px 0;
color: #fff;
width: 3em;
height: 3em;
border-radius: 1.5em;
line-height: 3em;
font-size: 1.2em;
vertical-align: bottom;
text-align: center;
border: solid 1px #ccc;
color: #ccc;
transition: all 0.2s ease-out;
}
p.social a:hover, p.social a:focus {
color: darkblue;
border-color: darkblue;
text-decoration: none;
}
p.social a I {
vertical-align: middle;
}
p.social a i:before {
line-height: 3em;
}
کد جاوا اسکریپت آیکون ها
ما می توانیم بدون جاوا اسکریپت نیز کار را تمام کنیم ، اما در اینصورت باید پیوندها را در همان برگه و یا تب جدید مرورگر باز کنیم. با استفاده از این کد کوچک جاوا اسکریپت ، هنگامی که کاربر روی پیوند اشتراک گذاری کلیک می کند ، پیوند به راحتی در یک پنجره کوچک بدون نوار پیمایش ، نوار ابزار و غیره باز می شود.
$(function () {
$('.social a').on('click', function (e) {
e.preventDefault();
window.open($(this).attr('href'), 'shareWindow', 'height=450, width=600, top=' + ($(window).height() / 2 - 275) + ', left=' + ($(window).width() / 2 - 300) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
});
});
نتیجه
نتیجه به صورت تصویر زیر است همچنین می توانید نتیجه را در اینجا نیز ببینید.
پارامتر های اشتراک گذاری
پیوندها در نمادهای اجتماعی ما به اسکریپتهای API در شبکه اجتماعی مقصد منتهی می شود که عمل اصلی اشتراک گذاری را انجام می دهند. تعداد پارامترها برای شبکه های اجتماعی مختلف متفاوت است ، اما اکثر آنها به URL ای که می خواهید اشتراک بگذارید نیاز دارند و در برخی از آنها می توانید پارامترهای اضافی را نیز اضافه کنید تا تجربه بهتری در اشتراک گذاری برای کاربر ارائه دهید.
ذکر این نکته نیز مهم است که تمام پارامترهای موجود در URL باید با کد گذاری URL باشند. اگر از اشتراک گذاری در وب سایتی فقط با کد HTML استفاده می کنید ، می توانید به صورت دستی با این ابزار کد گذاری کنید ، اگر از PHP استفاده می کنید می توانید پارامترها را با استفاده از عملکرد urlencode در PHP رمزگذاری کنید.
اکنون ، برخی از سرویس های اشتراک گذاری را بررسی کوتاهی خواهیم کرد تا بررسی کنیم که به چه پارامترهایی نیاز دارند:
<a href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Famanyio.github.io%2Fbootstrap-share-icons" class="facebook">...</a>
پارامتر های مورد نیاز:
- u : آدرس URL کد گذاری شده برای اشتراک گذاری
+G
<a href="https://plus.google.com/share?url=https%3A%2F%2Famanyio.github.io%2Fbootstrap-share-icons" class="gplus">...</a>
پارامتر های مورد نیاز:
- url : آدرس URL کد گذاری شده برای اشتراک گذاری
<a href="https://twitter.com/intent/tweet?text=Have%20a%20look%20at%20this%3A&url=https%3A%2F%2Famanyio.github.io%2Fbootstrap-share-icons;via=bootstrap" class="twitter">...</a>
پارامتر های اختیاری:
- url : آدرس URL کد گذاری شده برای اشتراک گذاری
- via : آیدی حساب برای ذکر در توییت به عنوان منبع
- text : متن توییتی که آدرس های URL داخل آن قبلاً کد گذاری شده
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Famanyio.github.io%2Fbootstrap-share-icons;summary=Check%20out%20this%20nice%20tutorial&source=https%3A%2F%2Famanyio.github.io%2Fbootstrap-share-icons" class="linkedin">...</a>
پارامتر های مورد نیاز:
- url : آدرس URL کد گذاری شده برای اشتراک گذاری
- mini : باید برابر true قرار داده شود
پارامتر های اختیاری:
- summary : متن خلاصه که آدرس های URL داخل آن قبلاً کد گذاری شده
- source : آدرس صفحه اصلی وب سایت شما
Buffer
<a href="https://buffer.com/add?url=https%3A%2F%2Famanyio.github.io%2Fbootstrap-share-icons;text=Check%20out%20this%20nice%20tutorial" class="buffer">...</a>
پارامتر های مورد نیاز:
- url : آدرس URL کد گذاری شده برای اشتراک گذاری
پارامتر های اختیاری:
- text : متن خلاصه که آدرس های URL داخل آن قبلاً کد گذاری شده
<a href="https://getpocket.com/edit?url=https%3A%2F%2Famanyio.github.io%2Fbootstrap-share-icons" class="pocket">...</a>
پارامتر های مورد نیاز:
- url : آدرس URL کد گذاری شده برای ذخیره
جمع بندی
این می تواند به راحتی پایان این آموزش باشد. اکنون باید مجموعه ای از آیکون های مناسب برای اشتراک گذاری وب سایت تان در شبکه های اجتماعی داشته باشید که هیچ تأثیر منفی نیز بر عملکرد و سرعت سایت شما نداشته باشد.
به عنوان یک مرحله اضافی برای شما ، من ظاهر دیگری هم برای آیکون ها آماده کرده ام - اکنون با رنگ بیشتری. در کدی که قبلاً دیدید تغییر بزرگی ایجاد نخواهد شد ، اگر می خواهید آیکون رنگی تری داشته باشید ، ادامه مقاله را ببینید:
رنگی کردن آیکون ها
- کد HTML :
ما تغییرات را بیشتر از طریق استایل های شیوه نامه اعمال خواهیم کرد ، بنابراین تمام کاری که باید در فایل HTML خود انجام دهیم این است که "class = "social-color را به <"p class = "social> در کد html اضافه کنیم.
<p class="social social-colour">...</p>
- کد CSS :
برای رنگ آمیزی آیکون های خود ، از کلاس های زیر که در یکی از اولین مراحل به کد html اضافه کردیم استفاده خواهیم کرد. برای هر یک از کلاس ها ، یک رنگ برای پس زمینه و حاشیه بر اساس رنگ برند هر سرویس اعمال خواهیم کرد ، مثلاً یک پس زمینه و حاشیه آبی برای نماد فیس بوک ، یک رنگ قرمز برای +G و غیره.
/* آیکون های رنگی اشتراک گذاری */
p.social-colour a {
color: #fff;
}
p.social-colour a:hover, p.social-colour a:focus {
color: #fff;
}
p.social-colour a.facebook, p.social-colour a.facebook:hover, p.social-colour a.facebook:focus {
background-color: #4460ae;
border-color: #4460ae;
}
p.social-colour a.gplus, p.social-colour a.gplus:hover, p.social-colour a.gplus:focus {
background-color: #c21f25;
border-color: #c21f25;
}
p.social-colour a.twitter, p.social-colour a.twitter:hover, p.social-colour a.twitter:focus {
background-color: #3cf;
border-color: #3cf;
}
p.social-colour a.instagram, p.social-colour a.instagram:hover, p.social-colour a.instagram:focus {
background-color: #cd4378;
border-color: #cd4378;
}
p.social-colour a.buffer, p.social-colour a.buffer:hover, p.social-colour a.buffer:focus {
background-color: #000;
border-color: #000;
}
p.social-colour a.pocket, p.social-colour a.pocket:hover, p.social-colour a.pocket:focus {
background-color: #f04056;
border-color: #f04056;
}
p.social-colour a.linkedin, p.social-colour a.linkedin:hover, p.social-colour a.linkedin:focus {
background-color: #0373b4;
border-color: #0373b4;
}
نتیجه
نتیجه این چند تغییر کوچک در استایل ها باید مانند تصویر زیر باشد. همچنین می توانید نتیجه را در اینجا نیز ببینید.
امیدوارم این آموزش کوچک به شما کمک کرده باشد و به زودی از آن در وب سایت خود استفاده کنید.
فصلِ:
5
,
تعداد قسمت ها:
176
,
سطح:
صفر تا صد
این فصل در یک نگاه:
در این فصل پس از بررسی سیستم مسیریابی و طراحی صفحه نمایش ویدیو ها، به سراغ پنل کاربری خواهیم رفت و مباحث Model Binding و…
توجه: این دوره آموزشی به صورت پیوسته بر اساس آخرین نسخه ی ASP.NET Core بروزرسانی خواهد شد. آموزش صفر تا صد طراحی سایت اشتراک ویدیو مشابه آپارات با استفاده از ASP.NET CORE MVC 3.0 و V…
فصلِ:
5
,
تعداد قسمت ها:
135
,
سطح:
صفر تا صد
این فصل در یک نگاه:
…
توضیحات کلی مجموعه: در این مجموعه آموزشی، با استفاده از جدیدترین تکنولوژی ها و ابزار های مایکروسافت (دات نت)، به یک پروژه جذاب مدیریت آگهی مشابه دیوار می پردازیم. این آموزش در دو بخش کلی و…
فصلِ:
2
,
تعداد قسمت ها:
13
,
سطح:
صفر تا صد
موضوعات:
آموزش Bootstrap
این فصل در یک نگاه:
مباحث ریسپانسیو سازی شامل نقاط شکست مختلف - گرید سیستم - فلکس باکس - …
توجه : این دوره هیچ پیش نیازی ندارد و تمام مطالب از صفر آموزش داده شده است. از این رو شما برای شروع این دوره به هیچ مقدمه یا دوره دیگری نیاز ندارید. ویژگی های دوره آموزش بوت استرپ ۵ : - آم…
فصلِ:
6
,
تعداد قسمت ها:
23
,
سطح:
صفر تا صد
موضوعات:
آموزش Bootstrap
این فصل در یک نگاه:
فصل ششم: پروژهپروژه ا : ساخت یک قالب واکنشگرای گروه موسیقیپروژه 2 : ساخت قالب واکنشگرای سایت 5040…
سرفصل دوره آموزش فریم ورک بوت استرپ فصل اول : معرفی بوت استرپ طراحی واکنشگرا ( Responsive Design ) چیست ؟ با مفهوم طراحی واکنشگرا آشنا خواهید شد و تفاوت بین سایت واکنشگرا و سایت نسخه ی …
فصلِ:
4
,
تعداد قسمت ها:
78
,
سطح:
متوسط
موضوعات:
آموزش ASP.NET
آموزش ASP.NET MVC
آموزش JQUERY
آموزش HTML5
آموزش Ajax
آموزش Bootstrap
آموزش JAVASCRIPT
این فصل در یک نگاه:
…
در این دوره آموزشی، وبسایت ورزش3 را با استفاده از ASP.NET Core پیاده سازی می کنیم و همچنین اپ اندروید آن را هم با Xamarin متصل به سرور سایت طراحی و در نهایت نحوه انتشار آن در مارکت هایی مثل …
فصلِ:
4
,
تعداد قسمت ها:
240
,
سطح:
صفر تا صد
موضوعات:
آموزش PHP
آموزش Bootstrap
آموزش CSS
آموزش JQUERY
آموزش HTML
آموزش PHP MVC
آموزش Ajax
آموزش HTML5
این فصل در یک نگاه:
طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…
توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ:
5
,
تعداد قسمت ها:
201
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش Bootstrap
آموزش برنامه نویسی آندروید
این فصل در یک نگاه:
ایجاد پروژه آژانس مسافرتی.....…
فصل اول: آشنایی با مبانی برنامه نویسی اندروید آشنایی با معماری برنامه های اندرویدی ساخت شبیه ساز جهت تست پروژه اندروید آشنایی با دستور Toast و حلقه for در برنامه های اندروی…
فصلِ:
1
,
تعداد قسمت ها:
2
,
سطح:
متوسط
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش PHP
آموزش Ajax
آموزش Bootstrap
آموزش Laravel
آموزش PHP MVC
آموزش ایمیل مارکتینگ
آموزش وردپرس
این فصل در یک نگاه:
بهترین و پر بازده ترین روش تبدیل بازدیدکننده سایت به مشتری تبلیغات هدفمند و برند سازی هوشمندانه با ایمیل می باشد. ایمیل…
وبینار(سمینار آنلاین) آموزش تکنیک های ایمیل مارکتینگ اگر تا انتها این متن را مطالعه کنید نظر شما در مورد ایمیل مارکتینگ 180 درجه عوض می شود!! بر هیچکس پوشیده نیست که از سال 1972 که ای…
فصلِ:
4
,
تعداد قسمت ها:
368
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش ساخت فروشگاه اینترنتی
آموزش Bootstrap
آموزش Laravel
این فصل در یک نگاه:
مباحث تکمیلی فریم ورک لاراول…
فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ:
1
,
تعداد قسمت ها:
155
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش NodeJs
آموزش Bootstrap
آموزش Laravel
آموزش Symphony
این فصل در یک نگاه:
مباحث مقدماتی فریم ورک react.js…
توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
