طراحی وب- برنامه نویسی

عناصر پایه ای HTML

ا سلام و عرض ادب خدمت شما خوانندگان گرامی روکسو، امروز می خواهیم به عناصر پایه ای HTML بپردازیم.

محیط کدنویسی HTML

برای یادگیری HTML و کدنویسی آن می توانید از ادیتور های پیشرفته مانند PHPStorm یا Visual Studio Code استفاده کنید اما در ابتدای کار بهتر است از ادیتور های متنی ساده مانند notepad خودِ ویندوز استفاده کنید. دلیل این مسئله آن است که ادیتورهای پیشرفته به شما در کدنویسی کمک می کنند و شما مطلب را از خودتان نمی نویسید و فراموشش می کنید.

برای کد نویسی به شکل ساده در notepad ابتدا باید آن را باز کنید و سپس به صورت ساده عناصر زیر را در آن بنویسید:

 



1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html>
<body>
 
<h1>My First Heading</h1>
 
<p>My first paragraph.</p>
 
</body>
</html>

این عناصر تنها یک نمونه هستند تا با کدنویسی در notepad آشنا شویم، بعدا می توانید آن را تغییر دهید. کد هایتان در notepad به این شکل خواهند بود:

کدنویسی ساده HTML در notepad

حالا برای ذخیره سازی این فایل به شکل یک سند HTML باید به این شکل عمل کنید:

ابتدا از سمت بالا و چپ پنجره، گزینه ی File را انتخاب کنید.
سپس گزینه ی Save as را انتخاب کنید.
در پنجره ای که برایتان باز می شود نام فایل را index.html یا index.htm بگذارید (بعدا توضیح می دهیم چرا).
و در آخر نیز Encoding را روی مقدار UTF-8 قرار دهید.

این مراحل را در تصویر زیر می بینید:

ذخیره ی فایل notepad به شکل یک سند HTML

نکات مربوط به مراحل بالا:

شما می توانید پسوند فایل را html یا htm بگذارید و باید بدانید این دو هیچ تفاوتی با هم ندارند. دلیل وجود htm این است که بعضی از سرور ها فایل هایی با پسوند چهار حرفی را قبول نمی کنند. بنابراین htm یک جایگزین برای html است و انتخاب پسوند با شما است.
دلیل اضافه کردن نام index به فایل HTML این است که وب سرور ها فایل هایی با نام index.html و index.htm و … را به عنوان صفحه ی پیش فرض حساب می کنند و آن را خودکار اجرا می کنند. بنابراین معمولا صفحات اصلی سایت ها را به شکل index نام گذاری می کنند تا وب سرور به صورت خودکار آن را برای کاربر اجرا کند.
قرار دادن encoding روی utf-8 به این دلیل است که ما ممکن است از زبان فارسی، شکلک ها و یا کاراکتر های غیر معمول نیز استفاده کنیم. اگر چنین تصمیمی بگیریم (مثلا وب سایت ما فارسی باشد) اما به عنوان utf-8 تنظیم نشده باشد تمام کاراکتر ها بهم خواهند ریخت. البته مسئله فقط زبان فارسی نیست و ممکن است بعضی از کاراکتر ها نیز بدون utf-8 پشتیبانی نشوند بنابراین توصیه می کنیم همیشه تمام فایل هایتان را روی utf-8 قرار دهید.

پس از اینکه فایل را ذخیره کردید می توانید آن را در مرورگر خود باز کنید:

باز کردن فایل ساده ی HTML در مرورگر کروم

اما برای دوره ی ما استفاده از ادیتور هایی مثل notepad ممکن نیست چرا که قرار است همه با هم یاد بگیریم. بنابراین از همان ادیتور آنلاین جاوا اسکریپت استفاده می کنیم که در دوره ی آموزشی جاوا اسکریپت استفاده کردیم. به طور مثال کد زیر را در ادیتور آنلاین اجرا می کنیم:

 



1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html dir='rtl' align='center'>
<head>
<title>این عنوان کل صفحه است</title>
</head>
<body>
 
<h1>این یک تیتر است!</h1>
<p>این یک پاراگراف است.</p>
 
</body>
</html>

برای نمایش این کد در مرورگرتان روی این لینک کلیک کنید.

عناصر پایه ای HTML

اگر در این قسمت با تگ هایی آشنا شدید که قبلا آن ها را یاد نگرفته اید، جای نگرانی نیست. فعلا می خواهیم با عناصر پایه ای HTML آشنا شویم و در جلسات بعد تمام این تگ ها را توضیح خواهیم داد.

ساختار اسناد HTML

همه می دانیم که تمام اسناد HTML با یک declaration (به معنی «اعلان») شروع می شود: <DOCTYPE html!>. پس از آن تگ های <html> و <html/> را داریم که تمام تگ های دیگر در آن ها نوشته می شوند. البته از بین این تگ ها، تنها تگ هایی که بین <body> و <body/> قرار می گیرند برای کاربر قابل مشاهده هستند. مثال زیر را ببینید:

 



1
2
3
4
5
6
7
8
9

<!DOCTYPE html>
<html>
<body>
 
<h1>My First Heading</h1>
<p>My first paragraph.</p>
 
</body>
</html>

Heading ها در HTML

heading ها در واقع تیتر قسمت های مختلف صفحات هستند.

این تیتر ها از <h1> شروع می شوند و تا <h6> ادامه دارند. این تگ ها به ترتیب اهمیت نام گذاری شده اند بنابراین <h1> یعنی مهم ترین و اصلی ترین تیتر و <h6> یعنی فرعی ترین تیتر. به مثال زیر دقت کنید:

 



1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html>
<body>
 
<h1>Thisisheadingمشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


آشنایی با زبان HTML
با سلام و احترام خدمت شما همراهان همیشگی روکسو، با یک دوره ی جدید در خدمت شما هستیم: صفر تا صد HTML. ما در طی این دوره با تمامی مباحث HTML بر اساس استاندارد های جهانی و ارجاعات معتبر آشنا خواهیم شد.
HTML چیست؟Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web. source: wikipedia
 
تعریف بالا صحیح است! HTML مخفف Hyper Text Markup Language به معنی «زبان نشانه‌گذاری فرا متنی» است. این زبان، زبان استاندارد نشانه‌گذاری برای ایجاد صفحات وب می باشد و به همراه CSS و جاوا اسکریپت ظاهر وب سایت های امروزی را می سازد. در واقع HTML و CSS جزء جدا نشدنی دنیای طراحی وب هستند و بدون آن ها امکان ندارد وب سایتی روی پای خودش بایستد.
شاید برایتان سوال پیش بیاید که معنی این نام چیست؟ چرا نشانه‌گذاری؟
باید بدانید که HTML یک زبان برنامه نویسی نیست، بلکه یک زبان نشانه گذاری است و طبق برخی گفته ها دلیل استفاده از کلمه ی نشانه‌گذاری این است که این زبان اعضا و عناصر صفحات وب را با نشانه گذاری به مرورگر می شناساند. به طور مثال از تگ <p> به عنوان یک نشانه استفاده می کند تا به مرورگر بگوید فلان متن یک پاراگراف است. در ضمن باید بدانید که تگ های HTML در مرورگر به نمایش در نمی آیند بلکه روی نحوه ی نمایش محتوا و درک ربات ها از متن و … اثر می گذارند.
مثالی از یک سند HTMLبیایید نگاهی به یک سند ساده ی HTML بیندازیم:
 



1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
 
<h1>My First Heading</h1>
<p>My first paragraph.</p>
 
</body>
</html>



نمایش کد بالا در ادیتور آنلاین JSbin
به عناصر کد بالا دقت کنید:
<DOCTYPE html!> به مرورگر ها/ ربات ها و … اعلام می کند که این سند، از نوع HTML5 است. در طول سال های اخیر نسخه های مختلفی از HTML معرفی شده اند که آخرین نسخه ی آن HTML 5 است و مبنای کار ما در این دوره قرار می گیرد.1
عنصر <html> عنصر اصلی و ریشه ی HTML در هر صفحه ی اچ تی ام ال است.
عنصر <head> دارای اطلاعات meta در مورد سند مربوطه است.
عنصر <title> برای سند ما یک عنوان تعیین می کند.
عنصر <body> شامل محتوای قابل مشاهده توسط کاربر می باشد.
عنصر <h1> یک heading بزرگ را تعریف می کند (در آینده با heading ها آشنا می شویم).
عنصر <p> یک پاراگراف را تعیین می کند.
1- در انتهای این مقاله با نسخه های آن بیشتر آشنا می شویم.
ساختار تگ هاتگ های اچ تی ام ال بین دو عدد angle bracket قرار می گیرند. angle bracket ها همان علامت های کمتر و بیشتری هستند (> یا <). مثال:
<tagname> محتوا در این قسمت قرار می گیرد… </tagname>
تگ های HTML در اکثر مواقع به صورت یک جفت حاضر می شوند مانند <p> و <p/> که به تگ اول start tag یا تگ آغازین و به دومی end tag یا تگ پایانی می گوییم. اگر دقت کنید متوجه می شوید که تگ پایانی دقیقا مانند تگ آغازین نوشته می شود با این تفاوت که یک forward slash (علامت /) نیز دارد.
نکته: ممکن است در اینترنت این تگ ها را با نام های opening tag و closing tag نیز ببینید. این نام ها نیز صحیح هستند.
مرورگرهاوظیفه و فلسفه ی وجودی مرورگرها این است که اسناد اچ تی ام ال را بخوانند و آن ها را برای کاربر نمایش دهند. همانطور که گفتیم، مرورگرها تگ های اچ تی ام ال را نشان نمی دهند بلکه با استفاده از آن ها متوجه می شوند محتوا را به چه شکلی نمایش دهند.
مثالی از یک صفحه ی HTML خالی و ساده در مرورگر Chrome
در واقع ساختار HTML در مرورگر ها به این شکل است:
ساختار HTML در مرورگر های مختلف
تنها قسمتی از تصویر بالا که سفید است (یعنی داخل تگ <body>) در مرورگر به نمایش در می آید و دیگر قسمت ها مخصوص مسائل دیگری هستند که در آینده با آن ها آشنا می شویم.
اعلان <DOCTYPE!>همانطور که گفته شد، اعلان <DOCTYPE!> نوع سند HTML و نسخه ی آن را مشخص می کند تا مرورگر ها بتوانند صفحات وب را به شکل بهتری نمایش دهند. این اعلان تنها یک بار و آن هم بالای صفحه (قبل از تمام تگ های دیگر) نوشته می شود و نسبت به بزرگی و کوچکی حروف نیز غیر حساس است اما به صورت یک قرارداد همه جا به حروف بزرگ نوشته می شود (البته نسخه ی 5). این اعلان در نسخه ی 5 از HTML به شکل زیر نوشته می شود:
 



1

<!DOCTYPE html>



ما در طول این دوره بر اساس HTML 5 کار می کنیم اما جهت آشنایی شما با دیگر declaration ها چند مورد دیگر را نیز آورده ایم:
HTML 4.01
Strict:
 



1
2

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">



XHTML 1.0
Strict:
 



1
2

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
   مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


ساختار و سبک نوشتاری عناصر در HTML
سلام و خسته نباشید خدمت همراهان روکسو، در این قسمت می خواهیم با روش پیشنهادی کدنویسی و ساختار کلی عناصر HTML صحبت کنیم. برخی از موارد زیر جزو قوانین کدنویسی در زبان HTML هستند اما برخی دیگر صرفا پیشنهاد می شوند و دست شما باز است که از آن ها پیروی نکنید.
ساختار عناصر HTML 
هر عنصر HTML یک تگ آغاز و یک تگ پایان دارد و محتوا در بین این تگ ها قرار می گیرد.
شیوه تعریف عناصر HTML به صورت زیر می باشد:
<tagname> محتوا در این قسمت قرار می‌گیرد </tagname>
بنابراین هر عنصر HTML برابر است با تگ آغازین + محتوا + تگ پایانی. مثال:
<p>My first paragraph.</p>
نکته: عناصر HTML ای که دارای محتوا نباشند «عناصر خالی» یا empty element نام دارند و دارای تگ پایانی نیز نیستند. یکی از مثال های بارز این تگ ها، تگ <br> است که معادل اینتر زدن و به خط بعد رفتن در هنگام نوشتن است.
«به خط جدید رفتن» اصطلاح خاص خودش را دارد؛ line break. به مثال زیر توجه کنید:
 



1
2
3
4
5
6
7
8

<!DOCTYPE html>
<html>
<body>
 
<p>Thisisa<br>paragraph withaline break.</p>
 
</body>
</html>



برای مشاهده ی خروجی این کد در مرورگتان روی این لینک کلیک کنید.
در HTML5 نیازی به بستن عناصر خالی ندارید اما اگر دوست دارید کدهایتان را در نهایت استاندارد بنویسید و همچنین کد هایتان توسط تجزیه کنندگان XML قابل خواندن باشد می توانید آن ها را به این شکل ببیندید:
<br />
توجه کنید که در این حالت، تگ ها دو عدد (تگ آغازین و پایانی) نمی شوند بلکه همان تگ اول تغییر شکل پیدا می کند.
عناصر تو در تو (nested) 
عناصر HTML می توانند به صورت تو در تو یا nested قرار بگیرند؛ این یعنی یک عنصر داخل عنصر دیگری باشد.
به طور مثال در کد زیر چهار عنصر HTML وجود دارد:
 



1
2
3
4
5
6
7
8
9

<!DOCTYPE html>
<html>
<body>
 
<h1>My First Heading</h1>
<p>My first paragraph.</p>
 
</body>
</html>



اگر به کد بالا نگاه کنید متوجه می شوید عنصر <html> تمام سند HTML را تعریف می کند و دارای تگ های آغازین و پایانی است. محتوای درون این تگ، یک تگ دیگر به نام <body> است. این عنصر بدنه ی سند را تعریف می کند و مشخصا دارای تگ های آغازین و پایانی است. حالا محتوای خود عنصر  <body> شامل دو تگ <h1> و <p> است، یعنی این قسمت:
 



1
2
3
4
5
6

<body>
 
<h1>My First Heading</h1>
<p>My first paragraph.</p>
 
</body>



حالا تگ <h1> یک تیتر را تعیین می کند و دارای تگ های <h1> و <h1/> می باشد. تگ <p> نیز تعریف کننده ی یک پاراگراف است که شامل تگ های <p> و <p/> می شود. این توضیح ساختار تو در توی بالا بود. حالا می فهمیم معنی تو در تو بودن چیست.
تگ های پایانیزبان HTML مانند دیگر زبان ها آنچنان قوانین سفت و سختی ندارد. منظور من از این حرف چیست؟ منظور من این است که در بسیاری از زبان های برنامه نویسی با جا انداختن کوچک ترین علامت و نوشتار، در اکثر اوقات برنامه از کار می افتد اما در زبان HTML مسئله به شکل دیگری است.
در زبان HTML اگر برخی از قسمت ها را جا بیندازید صفحه تان هنوز هم نمایش داده می شود! به طور مثال:
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


عناوین و تیترها در زبان HTML
ا سلام و احترام خدمت شما همراهان روکسو، در این جلسه قصد داریم در رابطه با Heading ها صحبت کنیم.
Heading چیست؟ 
Heading ها در واقع تیترهایی هستند برای قسمت های مختلف یک صفحه و از <h1> شروع شده و تا <h6> ادامه پیدا می کنند. به صورتی که <h1> مهم ترین عنوان یا تیتر و <h6> کم اهمیت ترین عنوان را مشخص می کند.
به مثال زیر توجه کنید:
 



1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html>
<body>
 
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading6</h6>
 
</body>
</html>



مشاهده ی خروجی در JSBin
همانطور که در خروجی مشاهده کردید، این تگ ها در ظاهر نیز با هم متفاوت هستند و هر چه اهمیتشان بیشتر باشد، بزرگتر می شوند اما اهمیت اصلی آن ها در ظاهرشان نیست چرا که ظاهر را می توان با CSS نیز تغییر داد. اهمیت اصلی در مسئله ی سئو است؛ موتورهای جست و جو از heading ها استفاده می کنند تا ساختار یک صفحه ی وب را ایندکس کنند. بنابراین نباید از ساختار صفحات وب خود غافل شوید.
برای ساختاربندی صحیح توجه کنید که <h1> همیشه باید عنوان اصلی تمامِ صفحه باشد بنابراین نباید در هر صفحه بیشتر از یک عدد <h1> داشته باشیم. سپس به ترتیب اهمیت از تگ های <h2>  و <h3> و … استفاده کنید. برای مشاهده ی ساختار HTML صفحه ی خود می توانید از وب سایت هایی مانند HTML 5 Outliner استفاده کنید. برای مثال ما سایت روکسو را به آن دادیم و نتیجه به شکل زیر بود:
این ساختار، ساختار صحیح و درستی است. همانطور که می بینید هر دسته به همراه زیر مجموعه هایش و بر اساس اهمیت جداسازی شده اند اما اگر شما در سایتتان از heading های صحیح استفاده نکنید دیگر با چنین ساختار مرتبی مواجه نخواهید شد. همیشه به این فکر کنید که کدام مطلب زیر مجموعه ی کدام مطلب دیگر است.
همچنین کاربران سایت نیز صفحات شما را بر اساس heading ها بررسی می کنند تا مطالب مورد نظرشان را پیدا کنند.
 
نکته: مرورگرها به طور خودکار قبل و بعد از یک heading، مقداری فضای خالی اضافه می کنند تا بین عنوان و مطالب مربوطه فاصله ایجاد شود.
 
نکته: هیچ گاه از heading ها برای بزرگتر کردن نوشته ها و پررنگ کردنشان استفاده نکنید. برای این کار باید از CSS استفاده کنیم که در جلسات بعد با آن آشنا خواهیم شد. تنها مورد استفاده ی heading ها عناوین و تیترها هستند!
سوال: اگر بخواهیم heading من اندازه ی بزرگتری داشته باشد چکار کنم؟
پاسخ: همانطور که گفتیم تمام این موارد در CSS نوشته می شود اما برای مثال این مورد را برایتان توضیح میدهم. شما می توانید از font-size استفاده کنید:
 



1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html>
<body>
 
<h1 style="font-size:60px;">Heading1</h1>
 
<p>You can change the size ofaheading with the style attribute,using the font-size property.</p>
 
</body>
</htmlمشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


Attribute ها در زبان HTML
با سلام و احترام خدمت شما همراهان روکسو، امروز می خواهیم در رابطه با Attribute ها و نحوه ی کار آن ها صحبت کنیم.
Attribute ها چه کار می کنند؟همانطور که می دانید هر عنصر HTML می تواند Attribute هایی (به معنی «ویژگی») داشته باشد. کار این Attribute ها ارائه ی اطلاعات بیشتر به این عناصر است و همیشه در تگ آغازین حاضر می شوند. در اکثر مواقع این Attribute ها دارای جفت های “name=”value هستند که در ادامه با مهم ترین آن ها آشنا می شویم.
ویژگیrel="nofollow" hrefلینک ها در زبان HTML با تگ <a> تعریف می شوند و برای آدرس دهی این لینک ها از Attribute ای به نام href استفاده می شود. مثال:
 



1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html>
<body>
 
<h2>The href Attribute</h2>
<p>HTML links are defined with theatag.The link address isspecified inthe href attribute:</p>
 
<ahref="https://roxo.ir/plus">Thisisalink</a>
 
</body>
</html>



همانطور که می بینید آدرس لینک را توسطrel="nofollow" href به تگ <a> داده ایم. در مورد لینک ها و تگ <a> بعدا به شکل مفصل صحبت خواهیم کرد.
ویژگی srcتصاویر در زبان HTML با تگ <img> تعریف می شوند اما این تگ تنها تعریف کننده ی یک تصویر است. اینکه کدام تصویر به نمایش در بیاید به عهده ی src می باشد. این Attribute آدرس فایل تصویری مورد نظر را به تگ <img>  می دهد. به مثال زیر توجه کنید:
 



1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html>
<body>
 
<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag,andthe filename of the image source isspecified inthe src attribute:</p>
 
<img src="https://www.roxo.ir/wp-content/uploads/2019/03/HTML-define-element.jpg"width="800"height="500">
 
</body>
</html>



مشاهده ی خروجی این کد در JSBin
 
اگر به مثال بالا دقت کنید، دو Attribute دیگر نیز می بینید؛ width (به معنی «عرض») و height («طول»). در واقع اینها دو Attribute دیگر هستند که در واحد پیکسل نوشته می شوند بنابراین در تصویر بالا که “width=”800 است منظور این است که عرض تصویر 800 پیکسل باشد.
در مورد تصاویر و Attribute هایشان بعدا به صورت مفصل صحبت خواهیم کرد و اینجا تنها قصد آشنایی با Attribute ها را داریم.
ویژگی altalt متنی را مشخص می کند تا اگر به هر دلیلی تصویر ما به کاربر نمایش داده نشد (مانند حذف شدن تصویر از سرور ما، تحریم شدن تصویر در ایران، ناسازگار بودن مرورگر کاربر با سایت ما و …) به جای آن متنی نمایش داده شود تا کاربر بداند آن عکس چه بوده است. همچنین این نوشته می تواند توسط screen reader ها خوانده شود (دستگاه هایی که محتوای صفحه را برای افراد نابینا می خوانند) تا افراد نابینا یا کسانی که نمی توانند صفحه را ببینند بتوانند آن را بخوانند.
از دیگر فایده های این Attribute کمک کردن به طراحی سایت است. تصور کنید در src آدرس اشتباه یک تصویر را بدهید. زمانی که سایتتان بالا می آید دیگر تصویری در کار نیست و اگر برایش alt تعریف نکرده باشید، ممکن است یادتان رفته باشد که این تصویر چه بوده است. حالا باید بگردید و ببینید این تصویر مربوط به چه پست یا مطلبی بوده اما با alt می توانید به راحتی بفهمید کدام تصویر مد نظر بوده است.
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


پاراگراف ها در زبان HTML
با سلام و عرض ادب خدمت شما خوانندگان گرامی، امروز در رابطه با تگ <p> و مشکلات مربوط به آن مانند white space و یا line break ها صحبت خواهیم کرد.
المان یا تگ <p>عنصر <p> در زبان HTML یک پاراگراف را تعریف می کند:
 



1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html>
<body>
 
<p>اینیکپاراگرافاست</p>
<p>اینیکپاراگرافاست</p>
<p>اینیکپاراگرافاست</p>
 
</body>
</html>



مشاهده ی خروجی در JSBin
اگر به لینک بالا رفته و خروجی را مشاهده کنید، متوجه می شوید که مرورگرها به طور پیش فرض قبل و بعد از هر پاراگراف، کمی فضای خالی (white space) اضافه می کنند تا پاراگراف ها به عناصر پیرامون خود نچسبند.
مسئله ی جالبی که در زبان HTML به آن برمیخوریم مسئله ی حذف شدن فضاهای خالی است. اگر شما به پاراگراف های خود فضای خالی اضافه کنید (به طور مثال استفاده از اینتر و رفتن به خط بعد و یا استفاده از چندین اسپیس) مرورگر تمام این فضاها را حذف می کند و نمایش نخواهد داد!
به مثال زیر توجه کنید (در این مثال توضیحاتی نوشته ام بنابراین خود مثال را نیز مطالعه کنید):
 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
19
20
21
22
23
24
25
26

<!DOCTYPE html>
<html>
<body dir='rtl'>
 
<p>
اینیکپاراگرافاست
کهشاملخطوطزیادیمیشود
اینخطوطوفاصلههادرسورسکدقراردارند
امامرورگرها
آنراحذفمیکنند.
</p>
 
<p>
اینیکپاراگرافاست
کهشامل             فضاهایخالیزیادیاست
که      درسورسکد       قراردارند
امادر    مرورگر
نادیدهگرفتهمیشوند.
</p>
 
<p>
تعدادخطهادرهرپاراگرافبهاندازهیمرورگروصفحهیکاربربستگیدارد.بهطورمثالاگراندازهیمرورگرراکوچکترکنیدتعدادخطهایپاراگرافهایتاننیزبیشترمیشودچراکهبایدمتنرادرصفحهیکوچکتریجابدهندودرنتیجهزودترمیشکنند.
</p>
 
</body>
</html>



اگر دقیقا به این کد دقت کنید متوجه می شوید فضاهای خالی و اینترهای متعددی در آن استفاده شده است. حالا بیایید خروجی آن در JSBin را ببینیم.
در قسمت آخر این مثال گفته ام که با تغییر سایز مرورگر و صفحه ی کاربر (لپتاپ، تبلت، تلفن هوشمند و …)، تعداد خطوط یک پاراگراف تغییر می کند. برای مشاهده ی این مسئله با چشم های خودتان می توانید در JSBin خط وسط صفحه را بگیرید و فضای سمت راست را کوچکتر کنید. می بینید که تعداد خطوط بیشتر می شوند. همچنین می توانید به جای این کار، پنجره ی مرورگر خود را کوچک و بزرگ کنید تا شاهد این مسئله باشید.
توجه داشته باشید که اگر تگ پایانی <p> را فراموش کنید باز هم خروجی به شکل صحیح نمایش داده می شود:
 



1
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


ویژگی Style در زبان HTML
با سلام و عرض ادب خدمت شما همراهان همیشگی روکسو، در این قسمت از سری آموزشی صفر تا صد HTML میخواهیم در رابطه با ویژگی style صحبت کنیم. این ویژگی که در اصل مربوط به CSS است در نحوه ی نمایش محتوای HTML تاثیر دارد.
ویژگی Styleکلمه ی style در لغت به معنی «سبک» یا «طرح» یا همان «استایل» ای است که در فارسی نیز می گوییم. در واقع کار این تگ اعمال دستورات زبان CSS در کد های HTML است. ساختار کلی style به این شکل است:
 



1

<tagname style="property:value;">



در این ساختار، property یک خصوصیت CSS (مانند سایز فونت و …) است و value نیز مقداری که آن خصوصیت می گیرد (مانند 25px و …). در مورد این تگ در دوره ی آموزشی CSS به طور مفصل صحبت خواهیم کرد.
بهترین راه برای یادگیری این ویژگی استفاده از مثال های مختلف است بنابراین چندین مثال از آن را برایتان آماده کرده ایم.
رنگ پس زمینه در HTMLخصوصیت background-color، یک رنگ پس زمینه را برای سند HTML ما و یا یکی از عناصر آن تعیین می کند. در مثال زیر رنگ پس زمینه ی سند HTML را به رنگ powderblue تنظیم کرده ایم. اگر نمی دانید این رنگ چیست می توانید در گوگل جست و جو کنید.
 



1
2
3
4
5
6
7
8
9

<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
 
<h1>Thisisaheading</h1>
<p>Thisisaparagraph.</p>
 
</body>
</html>



مشاهده ی خروجی در JSBin
سوال: من از کجا بدانم چه رنگ هایی می توانم به عنوان value بگذارم؟
پاسخ: جواب این سوال طولانی است اما به صورت خلاصه بدانید که رنگ ها در CSS به دو صورت حرفی (مانند brown به معنی قهوه ای و ) و کُدی (مانند fff#) انتخاب می شوند. در دوره ی CSS با آن ها به طور کامل آشنا خواهیم شد اما برخی از این رنگ ها را به صورت خلاصه به شما معرفی می کنم.


نام رنگ به صورت حرفی
کد HEX

Aqua
#00FFFF

Black
#000000

CadetBlue
#5F9EA0

Coral
#FF7F50

Crimson
#DC143C

Cyan
#00FFFF

DarkOrange
#FF8C00

DeepSkyBlue
#00BFFF

HotPink
#FF69B4

شما می توانید از هر کدام از این رنگ ها که خواستید استفاده کنید. در واقع تعداد این رنگ ها بیشتر از این ها است و جدول بالا تنها مشتی از خروار است! اگر دقت کرده باشید متوجه می شوید رنگ هایی که در جدول بالا آورده ایم هم نام دارند و هم کد. این یعنی در زبان CSS می توانید به جای کد هایشان از نام هایشان استفاده کنید (مانند "style="background-color:powderblue) اما بسیاری از رنگ هایی که ما می خواهیم دارای نام نیستند بنابراین تنها راه استفاده از آن ها تعیین رنگ به وسیله ی کد HEX است.
اگر نیاز به کد رنگ خاصی دارید، می توانید به وب سایت htmlcolorcodes.com یا امثال آن مراجعه کنید.
سوال: آیا رنگ ها فقط در کد HEX هستند؟
پاسخ: خیر رنگ ها در قالب های HSL و HSA و … نیز موجود هستند که در دوره ی CSS مورد بحث قرار خواهند گرفت.
رنگ متونخصوصیت color رنگ متن یک عنصر HTML را تعیین می کند. به مثال زیر توجه کنید:
 



1
2
3
4
5
6
7
8
9

<!DOCTYPE html>
<html>
<body>
 
<h1 style="color:blue;">Thisisaheading</h1>
<pstyle="color:red;">Thisisaparagraph.</p>
 
</body>
</html>



مشاهده ی خروجی در JSBin
فونت متونخصوصیت font-family نوع فونت یک متن را انتخاب می کند. البته بر اساس نحوه ی استفاده، می توانید فونت کل سند HTML را نیز تغییر دهید. مثال:
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


نقل قول و استناد در زبان HTML
با سلام و عرض ادب خدمت شما همراهان گرامی روکسو، در این قسمت قصد داریم در رابطه با مبحث نقل قول و استناد در زبان HTML صحبت کنیم.
نقل قول و استنادبه مثال زیر توجه کنید:
 

 

    




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html>
<body>
 
<p>Here isaquote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world'sleading conservation organization,
WWF works in100countries andissupported by
1.2million members inthe United States and
close to5million globally.
</blockquote>
 
</body>
</html>


مشاهده ی خروجی در JSBin
گروه WWF یکی از گروه های فعال محیط زیستی است که با کمک مردم دنیا سعی در حفظ طبیعت این کره ی خاکی را دارد و متن بالا قسمتی از توضیح وب سایت خودشان در این مورد است. از آن جایی که ما عیناً نوشته ی وب سایت آن ها را برداشته و کپی کرده ایم باید آن را به صورت نقل قول بیاوریم تا مشخص شود که متعلق به ما نیست. اگر به خروجی این کد دقت کنید متوجه می شوید که قسمت نقل قول شده کمی جلوتر از قسمت های دیگر است و این استایل پیش فرض HTML در مورد نقل قول ها است.
بیایید تگ های آن را بررسی کنیم!
تگ <q>تگ <q> مخفف quotation یا نقل قول است و وظیفه اش مشخص کردن نقل قول های مختصر و کوتاه است. اگر از این تگ استفاده کنید معمولا مرورگرها محتوایش را بین دو علامت Quotation (“) قرار می دهند. مثال:
 



1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html>
<body>
 
<p>Browsers usually insert quotation marks around theqelement.</p>
 
<p>WWF'sgoal isto:<q>Buildafuture where people live inharmony with nature.</q></p>
 
</body>
</html>



مشاهده ی خروجی در JSBin
معمولا نقل قول هایی که از این قبیل هستند بسیار کوتاهند (در حد یک جمله یا کمتر) اما اگر بخواهیم قسمت طولانی تری را نقل کنیم چطور؟
تگ <blockquote>تگ <blockquote> در زبان HTML وظیفه ی استناد و نقل قول قسمت کاملی از متن را دارد و مرورگرها معمولا آن را indent (جلوتر قراردادن نسبت به بقیه ی متن) می کنند. مثال:
 



مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


فرمت بندی متون در HTML
با سلام و عرض ادب خدمت همراهان همیشگی روکسو، در این جلسه از سری آموزشی صفر تا صد HTML می خواهیم در رابطه با قالب بندی و فرمت متون در زبان HTML صحبت کنیم.
قالب متنیدر جلسه ی قبل در مورد attribute ای به نام style صحبت کردیم و با هم دیدیم که می توان با آن شکل ظاهری عناصر را در HTML تغییر داد اما وقتی صحبت از متون عادی می شود، HTML موارد خاصی را برای تغییر چهره شان دارد!
<b> متون را bold (پررنگ) می کند.
<strong> نشان دهنده ی یک متن مهم است.
<i> متون را italic (مورب) می کند.
<em> بر متن تاکید می کند.
<mark> متن را علامت گذاری می کند.
<small> متن را کوچک می کند.
<del> نشان دهنده ی متن حذف شده است.
<ins> نشان دهنده ی متن اضافه شده است.
<sub> نشان دهنده ی متن زیروند است.
<sup> نشان دهنده ی متن بالاوند است.
سوال: برخی از این تگ ها متن را به یک شکل نمایش می دهند. چرا برای یک شکل چند تگ مختلف داریم؟
پاسخ: استفاده ی صحیح از این تگ ها بسیار مهم است! اگر بنا بر تغییر ظاهر متن بود، می توانستیم از همان style و زبان CSS استفاده کنیم اما اینجا بحث بر سر برنامه نویسی semantic (معنایی) است. هر کدام از این تگ ها علاوه بر نمایش دادن متن به شکل متفاوت، معنی متفاوتی برای موتورهای جستجو دارند. در ادامه ی این دوره بیشتر در مورد آن ها صحبت می کنیم.
تگ های <b> و <strong>حتما متوجه شده اید که هر دوی این تگ ها متن را bold و پررنگ می کنند و در ذهنتان سوال می کنید که فرقشان چیست؟ باید بگویم که <b> تنها متن را پررنگ می کند و هیچ معنایی فراتر از آن ندارد:
 



1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html>
<body>
 
<p>Thistext isnormal.</p>
 
<p><b>Thistext isbold.</b></p>
 
</body>
</html>



مشاهده ی خروجی در JSBin
اما تگ <strong> علاوه بر پررنگ کردن متن یا کلمه، معنی strong (قوی یا مهم) را به آن متن اضافه می کند. شما در عمل و در کدهایتان هیچ تفاوتی را متوجه نمی شوید اما موتورهای جستجو بین این تگ ها و معانی فرق قائل می شوند. مثالی از تگ strong:
 



1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html>
<body>
 
<p>Thistext isnormal.</p>
 
<p><strong>Thistext isstrong.</strong></p>
 
</body>
</html>



مشاهده ی خروجی در JSBin
تگ های <i> و <em>دقیقا مانند تفاوت تگ های قبلی، تگ <i> در زبان HTML متن مورد نظرتان را مورب می کند و هیچ اهمیت خاص یا معنی دیگری به آن اضافه نمی کند:
 



1
2
3
4
5
6
7
8
9
10

<!DOCTYPE htmlمشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


تغییر شکل سه بعدی عناصر در CSS CSS 3D Transforms
در درس قبل درباره تغییر شکل دوبعدی عناصر در CSS صحبت کردیم و هر آنچه در این زمینه لازم بود، شرح دادیم. امروز با مبحث تغییر شکل سه بعدی عناصر با شما عزیزان هستیم.
تغییر شکل سه بعدی عناصرزبان CSS به شما اجازه می دهد که با استفاده از قابلیت transformation اشیاء مورد نظرتان را به شکل 3 بعدی تغییر دهید.
وضعیت پشتیبانی از این قابلیت در جدول زیر آمده است. توجه داشته باشید که اعداد این جدول نخستین نسخه ای از آن است که از قابلیت transform پشتیبانی کامل می کند و اعدادی که همراه پسوند هایی مانند -ms- و -webkit- و … هستند نشان دهنده ی اولین نسخه ای از مرورگر هستند که فقط با آن پسوند کار می کند:


خصوصیت
کروم
edge
فایرفاکس
سافاری
اپرا

transform
36.0
12.0 -webkit-

10.0
16.0
10.0 -moz-
9.0
4.0 -webkit-
23.0
15.0 -webkit-

transform-origin (حالتی که سه مقدار می گیرد)
36.0
12.0 -webkit-
10.0
16.0
10.0 -moz-
9.0
4.0 -webkit-
23.0
15.0 -webkit-

transform-style
36.0
12.0 -webkit-
11.0
16.0
10.0 -moz-
9.0
4.0 -webkit-
23.0
15.0 -webkit-

perspective
36.0
12.0 -webkit-
10.0
16.0
10.0 -moz-
9.0
4.0 -webkit-
23.0
15.0 -webkit-

perspective-origin
36.0
12.0 -webkit-
10.0
16.0
10.0 -moz-
9.0
4.0 -webkit-
23.0
15.0 -webkit-

backface-visibility
36.0
12.0 -webkit-
10.0
16.0
10.0 -moz-
9.0
4.0 -webkit-
23.0
15.0 -webkit-

متد ()rotateXاین متد عنصر مورد نظر ما را روی محور X میچرخاند. به این مثال دقت کنید:
 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!DOCTYPEhtml>
<html>
<head>
<style>
div {
  width:300px;
  height:100px;
  background-color:yellow;
  border:1pxsolidblack;
}
 
#myDiv {
  -webkit-transform:rotateX(150deg);/* Safari */
  transform:rotateX(150deg);/* Standard syntax */
}
</style>
</head>
<body>
 
<h1>The rotateX()Method</h1>
<p>The rotateX()method rotates an element around itsX-axis atagiven degree.</p>
 
<div>
Thisanormal div element.
</div>
 
<div id="myDiv">
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


Transition ها در زبان CSS
transition در لغت به معنی «تحول» یا «گذر کردن» از یک مرحله به مرحله ی دیگر است اما در زبان CSS زمانی که از transition ها استفاده میکنیم به عنصر اجازه می دهیم که بین دو حالت به صورت نرم و زیبا تغییر کند.
وضعیت پشتیبانی از این خصوصیت در مرورگرهای مختلف به شرح زیر است:


خصوصیت
کروم
edge
فایرفاکس
سافاری
اپرا

transition
26.0
4.0 -webkit-

10.0
16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-

transition-delay
26.0
4.0 -webkit-
10.0
16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-

transition-duration
26.0
4.0 -webkit-
10.0
16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-

transition-property
26.0
4.0 -webkit-
10.0
16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-

transition-timing-function
26.0
4.0 -webkit-
10.0
16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-

ساخت transition در cssبرای ساخت transition در css به دو چیز نیاز داریم:
خصوصیت CSS ای که قرار است افکت ما را بگیرد
مدت زمان اجرای افکت
 
نکته: از آنجا که مقدار پیش فرض برای مدت زمان اجرای افکت 0 است، بنابراین اگر به آن مقدار دیگری ندهید شاهد هیچ تغییری نخواهید بود.
مثال زیر یک عنصر <div> قرمز رنگ با سایز 100px در 100px را نشان می دهد. ما برای این عنصر، یک transition از نظر خصوصیت width و به مدت 2 ثانیه تعیین کرده ایم. به کدها توجه کنید:
 



1
2
3
4
5
6
7

div{
  width:100px;
  height:100px;
  background:red;
  -webkit-transition:width2s;/* Safari */
  transition:width2s;
}



این transition زمانی اجرا شده و قابل نمایش خواهد بود که خصوصیت width در CSS تغییر کند. با استفاده از کد زیر تعیین کرده ایم که اگر کاربر با موس خود روی عنصر رفت چه اتفاقی انجام پذیرد:
 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
19
20
21
22
23
24
25
26
27
28

<!DOCTYPEhtml>
<html>
<head>
<style>
div {
  width:100px;
  height:100px;
  background:red;
  -webkit-transition:width2s;/* For Safari 3.1 to 6.0 */
  transition:width2s;
}
 
div:hover {
  width:300px;
}
</style>
</head>
<body>
 
<h1>The transition Property</h1>
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


CSS چیست؟
 
با سلام و احترام خدمت شما همراهان همیشگی روکسو! قبل از شروع این دوره ممکن است از خودتان بپرسید چرا باید زبان CSS را یاد بگیرم؟ آیا می شود این زبان را کنار گذاشت و یا زبان دیگری به جای آن یاد گرفت؟
یکی از مهم ترین وجهه های دنیای وب نمود و شکل ظاهری صفحات اینترنتی است. این ظاهر زیبا و دلنشین حاصل سال ها تلاش و پیشرفت تدریجی از سوی برنامه نویسان و توسعه دهندگان بوده است و طی یک شب به وجود نیامده است. واضح است که زبان های متعدد و بسیاری در دنیای وب مورد استفاده قرار می گیرند اما ظاهر هر وب سایت نهایتا به دو عنصر اصلی وابسته است که بدون آن ها هیچ صفحه ی اینترنتی در دنیا وجود نخواهد داشت: زبان HTML و زبان CSS.
پس از بیان این نکته، اولین چیزی که در ذهن خواننده شکل می گیرد یک سوال است؛ زبان JavaScript چطور؟ ما منکر نقش کلیدی و اساسی زبان جاوا اسکریپت در صفحات وب امروزی نیستیم اما هر وب سایتی از هر نوعی که باشد به HTML و CSS نیاز دارد. به عبارت دیگر می توان وب سایتی داشت که از زبان جاوا اسکریپت استفاده نکند اما امکان ندارد وب سایتی داشته باشیم که HTML و CSS نداشته باشد؛ وب سایت را مانند یک ساختمان در نظر بگیرید! HTML به منزله ی ساختار و اسکلت آهنی یک ساختمان است و CSS به منزله ی آجر ها و نمای یک ساختمان و غیره. آیا می توان ساختمانی داشت که اسکلت بندی ندارد؟!
از آن جایی که دوره ی آموزشی صفر تا صد HTML را شروع کرده ایم باید دوره ی CSS را نیز شروع کنیم چرا که این دو زبان همیشه با هم کار می کنند، از هم جدا نمی شوند، یادگیری شان به هم وابسته بوده و مطالبشان با هم همپوشانی دارد. بنابراین بدون مقدمه ی بیشتر به سراغ آشنایی با این زبان می رویم.
زبان CSS چیست؟CSS مخفف Cascading Style Sheets است که معنی «صفحات استایل آبشاری» را می دهد!
ترجمه ی این عبارت نیاز به کمی توضیح دارد!
در این معنی کلمات صفحات استایل قابل درک هستند چرا که CSS صفحاتی از کد هستند که به استایل و ظاهر یک وب سایت مربوط اند اما چرا «آبشاری»؟! جناب آقای Håkon Wium Lie (از توسعه دهندگان و سازندگان اولیه زبان CSS) در پایان نامه ی دکترای خود (در این لینک) کلمه ی cascade را به این شکل معنی کرده است:
Cascading:
The process of combining several style sheets and resolving conflicts between them.
آبشاری:
فرآیند ترکیب چندین صفحه ی استایل و رفع ناسازگاری های بین آن ها.
حتما می گویید چه ناسازگاری یا تضادی می تواند بین صفحات CSS وجود داشته باشد که آن ها را برطرف کنیم؟ در ادامه ی این دوره خواهید فهمید که ما می توانیم برای یک عنصر HTML بیش از یک مورد قانون CSS بنویسیم و آن را به چند شکل استایل دهی کنیم؛ به طور مثال در یک دستور CSS رنگ یک متن را قرمز اعلام میکنیم و در دستوری دیگر رنگ همان متن را بنفش انتخاب می کنیم! این قوانین CSS (بسته به نوع ابراز و نوشتار و موقعیتشان) هر کدام دارای درجه ای از اولویت هستند بنابراین می توان آن ها را به عنوان یک آبشار در نظر گرفت که از بالا به پایین می ریزد و قوانین بالای آبشار اهمیت بیشتری دارند. زمانی که ما این آبشار را تعریف کنیم و اهمیت هر نوع قانون را مشخص کنیم، در هنگام مواجهه با ناسازگاری و تضاد می توانیم نتیجه را مشخص کنیم. به طور مثال آن متن قرمز باشد یا بنفش؟ کدام دستور اولویت دارد؟
جدول زیر ترتیب این اولویت ها را نشان می دهد:
 
جدول ترتیب اولویت های آبشاری در CSS
 
شما هنوز با هیچ کدام از موارد آشنا نشده اید بنابراین جای نگرانی نیست، در قسمت های آینده به طور کامل در موردشان بحث خواهیم کرد.
 
نکته: موارد استفاده از CSS تنها به صفحات وب محدود نمی شود بلکه می توان از آن ها برای تعیین ظاهر هر نوع media (پرینت گرفتن کاغذ، ظاهر وب سایت، ظاهر pdf و …) نیز استفاده کرد.
ساختار کلی CSS 
ساختار کلی یک دستور CSS
 
موارد استفاده شده در بالا و نکات اصلی:
selector به «معنی انتخاب کننده» است. همانطور که از نامش مشخص است، کارش انتخاب عنصر یا عناصری است که می خواهید دستورات CSS را روی آن‌ها اعمال کنید. به طور مثال در تصویر بالا گفته ایم تگ های h1 را انتخاب کن (تمام تگ های h1).
declaration به معنی «اعلان» است؛ به عبارت دیگر در این قسمت چیزی را که می خواهید، اعلام می کنید. هر اعلان خود از دو قسمت property و value تشکیل شده است. به طور مثال color که رنگ متن را تعیین می کند یک property یا خصوصیتِ متن است و blue (آبی) مقدار یا value آن است.
در تصویر بالا پس از انتخاب عنصر مورد نظر (تگ های h1) گفته ایم رنگ متنشان آبی (blue) باشد و سپس اندازه ی فونت شان را نیز 12 پیکسل قرار داده ایم.
بعد از هر declaration از علامت نقطه ویرگول استفاده می کنیم.
فضای خالی (white space) در این نوع دستورات اهمیتی ندارد.
به مثال زیر توجه کنید:
 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPEhtml>
<html>
<head>
<style>
p {
  color:red;
  text-align:center;
}
</style>
</head>
<body>
 
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
 
</body>
</html>



مشاهده ی خروجی در JSBin
در کد بالا یک مثال کامل از یک دستور CSS آورده شده است. شما به راحتی می توانید مقادیر آن را تغییر دهید اما از آنجایی که این جلسه صرفا جهت آشنایی با زبان CSS بوده است نیازی به این کار نیست. اگر در این جلسه متوجه مثال ها نمی شوید اصلا جای نگرانی نیست چرا که هنوز در مورد کدنویسی CSS صحبت نکرده ایم، در قسمت های بعدی به سراغ مباحث پیشرفته تر و عملی تر CSS خواهیم رفت.
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


Margin ها در زبان CSS
خصوصیت margin در زبان CSS سعی می کند تا در اطراف یک عنصر فضای خالی ایجاد کند. زمانی که می گوییم اطراف یک عنصر یعنی هر چیزی که وابسته به این عنصر باشد کنارش می ماند (مانند حاشیه ها و …) اما بقیه ی عناصر مجاور کنار می روند. به زبان ساده تر margin یعنی فاصله ی بین یک عنصر و عناصر دور و برش (مانند تصاویر، متن ها و …).
در زبان CSS برای تعیین margin دستتان باز است و می توانید آن را از چهار طرف به صورت جداگانه تعیین کنید:
margin-top
margin-right
margin-bottom
margin-left
مقادیر قابل قبول برای margin ها عبارت اند از:
auto: اگر این مقدار را به margin بدهید، خود مرورگر مقدارش را تعیین می کند.
واحد طول: در این حالت باید مقدار margin را در یکی از واحد های طول پذیرفته شده مانند px یا pt یا cm و … تعیین کنید.
درصد: در این حالت margin بر اساس درصدی از عرض عنصر تعیین می شود.
inherit: در لغت به معنی «به ارث بردن» است. در این حالت margin مقدار خود را از عنصر پدرش به ارث می برد.
 
نکته: مقادیر منفی نیز مجاز هستند! مقادیر منفی به جای ایجاد فضای خالی، آن را کم می کنند و عناصر را به هم نزدیک تر می نمایند.
در مثال زیر برای عنصر div از هر چهار طرف margin تعیین کرده ایم:
 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
19
20
21
22

<!DOCTYPEhtml>
<html>
<head>
<style>
div {
  border:1pxsolidblack;
  margin-top:100px;
  margin-bottom:100px;
  margin-right:150px;
  margin-left:80px;
  background-color:lightblue;
}
</style>
</head>
<body>
 
<h2>Using individual margin properties</h2>
 
<div dir='rtl'>اینعنصرdivدارایmarginبالای100پیکسلوسپسmarginراست150پیکسلوmarginپایین100پیکسلوmarginچپ80پیکسلمیباشد.</div>
 
</body>
</html>



مشاهده ی خروجی در JSBin
دستور خلاصه شده marginتا اینجای کار فهمیدیم که margin را می توان از چهار سمت تعریف کرد:
margin-top
margin-right
margin-bottom
margin-left
اما برای راحتی کار شما شکل خلاصه شده ای از این 4 دستور وجود داشته و از این قرار است:
دستور margin برای مقادیر چهار تایی به صورت ;margin: 25px 50px 75px 100px :
margin بالای عنصر 25px
margin راست عنصر 50px
margin پایین عنصر 75px
margin چپ عنصر 100px
مثال:
 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
19
20
21
22

<!DOCTYPEhtml>
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


کار با Padding ها در CSS
خصوصیت padding در زبان CSS برای ایجاد فضای خالی بین محتوای درونی یک عنصر و محدوده اش (مانند حاشیه و …) استفاده می شود.
شما با استفاده از کدهای CSS بر تمام جوانب padding مسلط هستید از جمله:
padding-top (به معنای padding بالا)
padding-right (به معنای padding  سمت راست)
padding-bottom (به معنای padding پایین)
padding-left (به معنای padding سمت چپ)
برای مقداردهی به این خصوصیت ها می توانید از موارد زیر استفاده کنید:
مشخص کردن padding به صورت دقیق در واحد های px یا pt یا cm و …
مشخص کردن padding به درصدی از عرض عنصر پدر
مشخص کردن padding با کلیدواژه ی inherit. در این حالت مقدار padding از عنصر پدر به ارث برده می شود
 
نکته: برخلاف margin، مقادیر منفی مجاز نیستند.
سوال: تفاوت padding با Margin چیست؟
پاسخ: هر دو فضای خالی ایجاد می کنند اما Margin این فضای خالی را بین عنصر و عناصر دیگر (خارج از هر نوع محدوده ای که عنصر داشته باشد؛ مثل حاشیه ها) اضافه کرده در حالی که Padding این فضای خالی را بین محتوای داخلی عنصر و هر نوع محدوده ای که دارد (مثل حاشیه ها) اضافه می کند. به دو تصویر زیر نگاه کنید:
تصویر شماره 1: تفاوت Padding و Marginتصویر شماره 2: تفاوت Padding و Margin و Border
این دو تصویر تفاوت را به صورت واضح مشخص می کنند. اگر بخواهم خودمانی تر بگویم، می گویم margin برای فاصله با دیگر عناصر و padding برای چاق تر شدن خود عنصر است!
بیایید نگاهی به این مثال بیندازیم:
 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
19
20
21
22

<!DOCTYPEhtml>
<html>
<head>
<style>
div {
  border:1pxsolidblack;
  background-color:lightblue;
  padding-top:50px;
  padding-right:30px;
  padding-bottom:50px;
  padding-left:80px;
}
</style>
</head>
<body>
 
<h2>Using individual padding properties</h2>
 
<div>Thisdiv element hasatop padding of50px,aright padding of30px,abottom padding of50px,andaleft padding of80px.</div>
 
</body>
</html>



مشاهده ی خروجی در JSBin
در این مثال از هر چهار خصوصیت padding (مربوط به چهار جهت اصلی) استفاده کرده ایم و می بینید که در مقایسه با همین مثال که جلسه ی قبل برای Margin آوردیم، عنصر به جای فاصله گرفتن از گوشه های صفحه و دیگر عناصر از حاشیه های خودش فاصله گرفته و به قولی چاق تر شده است!
دستور خلاصه paddingبرای خلاصه و کوتاه تر کردن کد، دستور خلاصه ای وجود دارد که به ما اجازه می دهد تمام این دستورات را یک جا بنویسیم و آن دستور padding است. به این صورت:
padding در قالب چهار مقدار مانند ;padding: 25px 50px 75px 100px 
padding بالا 25 پیکسل می باشد.
padding راست 50 پیکسل می باشد.
padding پایین 75 پیکسل می باشد.
padding چپ 100 پیکسل می باشد.
مثال:
 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


Outline ها در زبان CSS
Outline در زبان CSS به خطی گفته می شود که دور تا دور عنصر (البته خارج از هر نوع مرزی مانند حاشیه هایش) کشیده می شود تا عنصر مورد نظر از نظر ظاهری جلب توجه کند. به تصویر زیر نگاه کنید:
تصویر شماره 1 – جایگاه outline نسبت به حاشیه ها و margin ها و …
نکته ی مهم این تصویر آن است که شما متوجه شوید outline ها کاملا بیرون از مرز ها و حاشیه های یک عنصر قرار می گیرند.
زبان CSS برای کار با outline ها دارای دستورات زیر است:
outline-style
outline-color
outline-width
outline-offset
outline
سوال: با این توصیفات تفاوت outline و border چیست؟
پاسخ: تفاوت outline و border هر چند جزئی است اما مهم است. حاشیه و outline از دو جهت اصلی با هم تفاوت دارند:
outline ها خارج از border های یک عنصر کشیده می شوند و ممکن است با عناصر خارجی دیگر تداخل داشته باشند و روی آن ها قرار بگیرند اما در border ها چنین مسئله ای صحیح نیست.
outline به هیچ عنوان جزو ابعاد (طول و عرض) یک عنصر حساب نمی شود و برخلاف border ها با تغییر دادن outline اندازه ی کلی عنصر ما تغییری نمی کند.
خصوصیت outline-styleخصوصیت outline-style استایل و ظاهر outline را مشخص کرده و می تواند مقادیر زیر را بگیرد:
dotted این گزینه outline را به صورت نقطه چین نمایش می دهد
dashed این گزینه outline را به صورت خط چین نمایش می دهد
solid این گزینه outline را به صورت عادی و خط صاف نمایش می دهد
double این گزینه outline را دو خطی می کند
groove سعی می کند به کمک رنگ بندی outline، به آن حالت 3 بعدی (از نوع شیاری) بدهد
ridge سعی می کند به کمک رنگ بندی outline، به آن حالت 3 بعدی (از نوع لبه دار) بدهد
inset سعی می کند به کمک رنگ بندی outline، به آن حالت 3 بعدی (از نوع فرو رفته) بدهد
outset سعی می کند به کمک رنگ بندی outline، به آن حالت 3 بعدی (از نوع برآمده) بدهد
none عنصر را بدون outline می کند
hidden این گزینه outline را نامرئی می کند
بیایید این موارد را در قالب یک مثال ببینیم:
 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
19
20
21
22
23
24
25
26
27
28
29
30
31

<!DOCTYPEhtml>
<html>
<head>
<style>
p {outline-color:red;}
 
p.dotted {outline-style:dotted;}
p.dashed {outline-style:dashed;}
p.solid {outline-style:solid;}
p.double {outline-style:double;}
p.groove {outline-style:groove;}
p.ridge {outline-style:ridge;}
p.inset {outline-style:inset;}
p.outset {outline-style:outset;}
</style>
</head>
<body>
 
<h2>The outline-style Property</h2>
 
<pclass="dotted">Adotted outline</p>
<pclass="dashed">Adashed outline</p>
<pclass="solid">Asolid outline</p>
<pclass=مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


Interface ها (واسط‌ ها در زبان C#
همانطور که در فصول گذشته مشاهده کردید کلاس‌ها و متدها را می‌توان در طی یک برنامه کنترل و محدودیت‌هایی روی آنها اعمال کرد که معمولا به مجموعه‌ی این عملیات Polymorphism گفته می‌شود. اما طی این آموزش‌ها به کلمه‌ی واسط یا Interface‌ زیاد اشاره کردیم. یکی از مهم‌ترین مباحث در زبان برنامه‌نویسی #C رابط‌ها یا واسطه‌ها هستن که در ساختار کدنویسی با نام Interface شناخته می‌شوند. در این فصل مفاهیمی که در این رابطه پوشش خواهیم داد به صورت زیر می‌باشد:
معرفی مفهوم واسط‌ها یا Interface ها
تعریف یک واسط یا Interface
نحوه‌ی استفاده از یک واسط
نحوه‌ی پیاده‌سازی ارث‌بری (Inheritance) در واسط‌ها (Interface)
واسط یا Interface چیست؟واسط‌ها دقیقا مشابه کلاس‌ها بوده با این تفاوت که پیاده‌سازی نمی‌شوند. یعنی کد خاصی برای اجرای آنها ارائه نمی‌گردد. تنها نکته‌ای که وجود دارد: Interface ها شامل تعاریفی مانند events (رویدادها)، indexers (شاخص‌ها)، methods (متدها) و properties (ویژگی‌ها) هستند. علت اینکه واسط‌ها یا Interface کدنویسی نمی‌شود این است که آنها از کلاس‌ها یا ساختارها (struct) ارث‌بری می‌کنند.
حال که یک تعریف کلی از واسط‌ها ارائه دادیم، ممکن است این سوال برای شما پیش بیاید که interface ها چه کاربردی دارند؟ در پاسخ به این سوال باید بگوییم که interface ها قابلیت پیاده‌سازی چندین ویژگی از چندین interface مختلف را در یک کلاس یا struct در اختیار ما می‌گذارند. در ادامه بیشتر آشنا خواهید شد.
تعریف یک واسط یا interfaceساختار کلی تعریف یک واسط به صورت زیر است:
 



1
2
3
4

{access-modifier}interface{name}
{
    {members}
}



بنابراین در این ساختار داریم:
access-modifier:  جهت تعیین سطح دسترسی می‌باشد.
interface: به عنوان یک کلمه‌ی کلیدی در تعریف واسط بکارگرفته می‌شود.
name: به عنوان نام یک واسط شناخته می‌شود. برای تعریف یک واسط بهتر است از کلمه‌ی I در ابتدای آن استفاده کنید به عنوان مثال IName یا IMessage یا IDatabse
member: مجموعه‌ی متدها و ویژگی‌ها یا در حالت کلی اعضای واسط‌ها در این بخش قرار می‌گیرد. توجه داشته باشید که باید یک تعریف کلی برای هر عضو صورت پذیرد و سطح دسترسی اعضا در حالت عمومی (public) قرار گیرد.
برای تفهیم این موضوع یک مثال ساده می‌زنیم:
 



1
2
3
4
5
6

publicinterfaceINamed
{
    stringName{get;set;}
 
    voidPrintName();
}



همانطور که در مثال فوق مشاهده می‌کنید، سطح دسترسی‌ای برای متد و خصوصیت مشخص نشده است. همچنین متد موجود در interface بدنه ندارد یا به عبارت دیگر فقط حاوی signature است. در ادامه قصد داریم از این واسط استفاده کنیم.
برای استفاده از یک واسط کافیست مانند حالتی که می‌خواهیم یک کلاس فرزند تعریف کرده تا یک سری خصوصیت و متد از کلاس والد به ارث ببرد، عمل کنیم بنابراین داریم:
 



1
2
3
4

publicclassCar:INamed
{
        
}



اما اگر این کد را به همینصورت قرار دهید با خطا مواجه خواهید شد زیرا interface تنها حاوی یک تعریف است و باید آن را در کلاسی که به ارث می‌برد تعریف کنیم:
 



1
2
3
4
5
6
7
8

publicclassCar:INamed
{
    publicstringName{get;set;}
    publicvoidPrintName()
    {
        Console.WriteLine(Name);
    }
}



اما برای استفاده از یک واسط چگونه باید عمل کرد؟ اگر یادتان باشد در محبث مربوط به ارث‌بری مطرح کردیم که اگر کلاس فرزند از کلاس وارث مشتق شود آنگاه تمام خصوصیات و ویژگی‌ها و متدهای موجود در کلاس والد را در اختیار دارد. این موضوع برای واسط‌ها نیز صادق است. در حقیقت می‌توان از واسط‌ها برای ایجاد شیء استفاده کرد:
 



1

INamed namedInstance=newCarمشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


Interface ها (واسط‌ ها) در زبان C#
همانطور که در فصول گذشته مشاهده کردید کلاس‌ها و متدها را می‌توان در طی یک برنامه کنترل و محدودیت‌هایی روی آنها اعمال کرد که معمولا به مجموعه‌ی این عملیات Polymorphism گفته می‌شود. اما طی این آموزش‌ها به کلمه‌ی واسط یا Interface‌ زیاد اشاره کردیم. یکی از مهم‌ترین مباحث در زبان برنامه‌نویسی #C رابط‌ها یا واسطه‌ها هستن که در ساختار کدنویسی با نام Interface شناخته می‌شوند. در این فصل مفاهیمی که در این رابطه پوشش خواهیم داد به صورت زیر می‌باشد:
معرفی مفهوم واسط‌ها یا Interface ها
تعریف یک واسط یا Interface
نحوه‌ی استفاده از یک واسط
نحوه‌ی پیاده‌سازی ارث‌بری (Inheritance) در واسط‌ها (Interface)
واسط یا Interface چیست؟واسط‌ها دقیقا مشابه کلاس‌ها بوده با این تفاوت که پیاده‌سازی نمی‌شوند. یعنی کد خاصی برای اجرای آنها ارائه نمی‌گردد. تنها نکته‌ای که وجود دارد: Interface ها شامل تعاریفی مانند events (رویدادها)، indexers (شاخص‌ها)، methods (متدها) و properties (ویژگی‌ها) هستند. علت اینکه واسط‌ها یا Interface کدنویسی نمی‌شود این است که آنها از کلاس‌ها یا ساختارها (struct) ارث‌بری می‌کنند.
حال که یک تعریف کلی از واسط‌ها ارائه دادیم، ممکن است این سوال برای شما پیش بیاید که interface ها چه کاربردی دارند؟ در پاسخ به این سوال باید بگوییم که interface ها قابلیت پیاده‌سازی چندین ویژگی از چندین interface مختلف را در یک کلاس یا struct در اختیار ما می‌گذارند. در ادامه بیشتر آشنا خواهید شد.
تعریف یک واسط یا interfaceساختار کلی تعریف یک واسط به صورت زیر است:
 



1
2
3
4

{access-modifier}interface{name}
{
    {members}
}



بنابراین در این ساختار داریم:
access-modifier:  جهت تعیین سطح دسترسی می‌باشد.
interface: به عنوان یک کلمه‌ی کلیدی در تعریف واسط بکارگرفته می‌شود.
name: به عنوان نام یک واسط شناخته می‌شود. برای تعریف یک واسط بهتر است از کلمه‌ی I در ابتدای آن استفاده کنید به عنوان مثال IName یا IMessage یا IDatabse
member: مجموعه‌ی متدها و ویژگی‌ها یا در حالت کلی اعضای واسط‌ها در این بخش قرار می‌گیرد. توجه داشته باشید که باید یک تعریف کلی برای هر عضو صورت پذیرد و سطح دسترسی اعضا در حالت عمومی (public) قرار گیرد.
برای تفهیم این موضوع یک مثال ساده می‌زنیم:
 



1
2
3
4
5
6

publicinterfaceINamed
{
    stringName{get;set;}
 
    voidPrintName();
}



همانطور که در مثال فوق مشاهده می‌کنید، سطح دسترسی‌ای برای متد و خصوصیت مشخص نشده است. همچنین متد موجود در interface بدنه ندارد یا به عبارت دیگر فقط حاوی signature است. در ادامه قصد داریم از این واسط استفاده کنیم.
برای استفاده از یک واسط کافیست مانند حالتی که می‌خواهیم یک کلاس فرزند تعریف کرده تا یک سری خصوصیت و متد از کلاس والد به ارث ببرد، عمل کنیم بنابراین داریم:
 



1
2
3
4

publicclassCar:INamed
{
        
}



اما اگر این کد را به همینصورت قرار دهید با خطا مواجه خواهید شد زیرا interface تنها حاوی یک تعریف است و باید آن را در کلاسی که به ارث می‌برد تعریف کنیم:
 



1
2
3
4
5
6
7
8

publicclassCar:INamed
{
    publicstringName{get;set;}
    publicvoidPrintName()
    {
        Console.WriteLine(Name);
    }
}



اما برای استفاده از یک واسط چگونه باید عمل کرد؟ اگر یادتان باشد در محبث مربوط به ارث‌بری مطرح کردیم که اگر کلاس فرزند از کلاس وارث مشتق شود آنگاه تمام خصوصیات و ویژگی‌ها و متدهای موجود در کلاس والد را در اختیار دارد. این موضوع برای واسط‌ها نیز صادق است. در حقیقت می‌توان از واسط‌ها برای ایجاد شیء استفاده کرد:
 



1

INamed namedInstance=newCarمشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


رویدادها (Events) در زبان برنامه‌نویسی C#
با مطالعه‌ی فصل گذشته اطلاعات بسیار دقیقی در زمینه‌ی نماینده‌ها (Delegate) در اختیار شما قرار گرفت و با مثال‌هایی که خدمت شما عزیزان ارائه کردیم تا حد مناسبی این مبحث را پوشش داریم اما یکی از مزایای استفاده از delegateها کنترل و مدیریت رویدادها بر حسب نیاز است. رویدادها یا Event ها به عنوان یک اعلان یا توصیه یا رفتار در طی یک برنامه ظاهر می‌شوند. در این فصل قصد داریم این موضوع را به صورت کامل پوشش داده تا از آموزش دیگری شما را بی نیاز کنیم.
مقدمهدر حالت عادی و زندگی روزمره‌ی خود رویدادهای بسیاری را کنترل می‌کنید. برای درک بهتر با یک مثال در دنیای واقعی شروع می‌کنیم. فرض کنید شما صبح از خواب بیدار می‌شوید و شروع به دست شستن می‌کنید و سپس یک دوش آب گرم گرفته و از حمام بیرون می‌آید. حال معده شما فرمان گرسنگی صادر می‌کند و رویداد «غذا خوردن و آشامیدن آب» باید رخ دهد. یعنی به ازای گرسنگی ای که ناگهان ایجاد شده است شما باید پاسخی مناسب را ارسال کنید. Event ها یا رویدادها دقیقا به همینصورت عمل می‌کنند. یعنی وقتی ما یک Event را تعریف می‌کنیم در واقع به برنامه و نرم‌افزار خود دستور می‌دهیم که در صورت بروز یک اتفاق خاص (مثلا کلیک کردن روی یک گزینه یا دکمه) رویداد مدنظر ما رخ دهد. این عمل را در مجموعه‌ی کدهای فصل گذشته به تعداد بسیار زیادی انجام داده‌ایم. قسمتی از کد شما که می‌نویسید Console.Readkey به صورت متد بوده که منتظر می‌ماند تا کاربر یک دکمه از صفحه کلید را بفشارد. به محض انجام این عمل، صفحه بسته خواهد شد. در واقع Event یا رویداد بسته شدن رخ می‌دهد.
امروزه بسیاری از نرم‌افزارهای مدرن از سیستم متناسب با کنترل رویداد استفاده می‌کنند. در زبان برنامه‌نویسی #C، یک رویداد یا event به عنوان یک عضو کلاس شناخته می‌شود که هرگاه باید از آن استفاده شود، فراخوانی می‌شود. عموما برنامه‌نویسان برای فراخوانی یک رویداد از عبارت fire یا شلیک استفاده می‌کنند. یعنی مثلا یک اتفاق خاص که رخ داد رویداد x فایر یا fire می‌شود.
همچنین رابطه‌ی بسیار نزدیکی بین رویدادها (Events) و نماینده‌ها (Delegates) وجود دارد. که این دو با همکاری یکدیگر یک نرم افزار functionality یا تابع محور را ایجاد می‌کنند.
تعریف یک رویداد یا Eventبرای تعریف یک رویداد یا Event در زبان برنامه‌نویسی #C باید ابتدا یک delegate یا نماینده تعریف کنیم سپس یک رویداد با کلمه‌ی event و از نوع همان delegate‌ای که تعریف کرده‌ایم، ایجاد خواهیم کرد.
بنابراین الگوی ساختاری آن پس از ایجاد یک delegate به صورت زیر است:
 



1

publicevent{delegate data type}{eventname};



delegate data type:‌ در واقع نام همان delegate است که برای این event ایجاد کرده‌ایم.
eventname: نامی که برای آن event در نظر می‌گیریم.
به مثال زیر توجه کنید:
 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

using System;
using System.Drawing;
using System.Windows.Forms;
 
// custom delegate
publicdelegate voidStartdelegate();
 
classEventdemo:Form
{
    // custom event
    publicevent Startdelegate StartEvent;
 
    publicEventdemo()
    {
        Button clickMe=newButton();
 
        clickMe.Parent=this;
        clickMe.Text="Click Me";
        clickMe.Location=newPoint(
            (ClientSize.Width-clickMe.Width)/2,
            (ClientSize.Height-clickMe
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


آموزش LINQ در C# (سی شارپ) – مقدمه
 
با سلام خدمت کاربران عزیز روکسو، در این سری از آموزش ها قصد داریم به آموزش LINQ در C# بپردازیم. دوستان عزیزی که با زبان C# (سی شارپ) آشنایی ندارند می توانند دوره آموزش مقدماتی تا پیشرفته زبان C# (سی شارپ) را از طریق لینک زیر به صورت رایگان دریافت کنند:
آموزش مقدماتی تا پیشرفته سی شارپ (C#)
پیش نیازهامباحث کامل شی گرایی (OOP)
مبانی چند ریختی (polymorphism)
آشنایی کامل با دستورات اولیه (for،while، if،var و…)
Lambda Expressions
آشنایی با دستورات Sql
آشنایی با Interface و delegate
توجه:‌ تمام مواردی که در بخش پیش نیازها ارائه شده است، در دوره آموزش مقدماتی تا پیشرفته سی شارپ (که لینک آن را در بالا قرار دادیم) به صورت رایگان موجود می باشد.
LINQ چیست؟linq مخفف Language-Integrated Query به معنای زبان پرس و جوی یکپارچه است که در دات نت 3.5 معرفی شد و به برنامه نویس اجازه می دهد که داده ها را از هر نوع منبع داده ای بدون نیاز به دانستن یک زبان دیگر پرس و جو کند. پرس و جو فرایند به دست آوردن داده از منبع داده است. linq پرس و جوی داده ای از منابع داده ای مختلف را بسیار راحت کرده است.
قبل از معرفی linq توسط ماکروسافت، برنامه نویسان مجموعه کدهای مختلفی برای منابع داده ای مختلف استفاده می کردند. مثلا برای پرس و جو در دیتابیس از دستورات sql و برای کار با فایل های xml از Xpath استفاده می کردند، اما با استفاده از تکنولوژی LINQ فقط لازم است با کلمات کلیدی LINQ و متدهایی که در دات نت 3.5 معرفی شد آشنایی داشته باشند، در این صورت با استفاده از یک زبان واحد می توان با تمامی منابع داده ارتباط برقرار کرد.
برای کار LINQ باید فضای نام System.linq را در برنامه ی خود using کنید. در این بسته کلاس ها و متدهای extension قرار دارند که با کمک آن ها می توانید با منابع داده ای مخلتلف کار کنید. لازم به ذکر است LINQ در برنامه نویسی های دانت نت دیگر نیز قابل استفاده است مثلا VB.net.
شکل زیر نوع معماری LINQ را نشان می شود .
نمای کلی از معماری LINQ
بر اساس شکل بالا، انواع مختلفی از LINQ وجود دارد که به شرح زیر می باشد:
LINQ to Objects
LINQ to Datasets
LINQ to SQL
LINQ to Entities
LINQ to XML
که در بخش های آینده هر مورد را بررسی خواهیم کرد.
حالا این سوال مطرح می شود چرا باید از LINQ استفاده کنیم؟ چه چیزی در LINQ باعث شده که اکثر برنامه نویسان به سراغ آن می روند؟
طبق گفته ی ماکروسافت LINQ بسیار پایدار، امن، و قابل اعتماد است و در برنامه های بزرگ و پیچیده بسیار قدرتمند عمل کرده است، به همین دلیل اکثر برنامه نویسان به جای یادگیری چند زبان برای کار با داده های مختلف ترجیح می دهند با LINQ کار کنند.
برخی از مزایای مهم LINQ
در ADO.NET کار با پایگاه داده به صورت Query است که مثلا به صورت String نوشته می شود و در صورت داشتن خطا بعد از کامپایل مشخص می شود اما چون LINQ جز دستورات NET. به شمار می رود قبل از کامپایل می توان خطای آن را اصلاح کرد.
به دلیل intellisense بودن تمامی دستورات (تکمیل خودکار)، می توان از غلط های املایی جلوگیری کرد (حدس دستورات توسط IDE).
می توان یک کد پرس و جو را در جاهای مختلف استفاده کرد
با استفاده از NET debugger. می توان آن را اصلاح کرد
از تمامی دستورات مرتب سازی،دسته بندی و جست و جو به راحتی پشتیبانی می کند
مانند هر تکنولوژی، LINQ نیز دارای معایبی می باشد که به شرح زیر است:
برای پرس و جو های پیچیده مقدار کد نوشته شده با LINQ کمی بیشتر از Sql است.
اگر در نوشتن پرس و جو (Query) مهارت کافی نداشته باشید، کد نوشته شده ممکن است ضعیف عمل کند. (کد باید بهینه سازی شود)
برای استفاده از این تکنولوژی در هر پروژه باید فایل های DLL مربوطه به پروژه اضافه شود.
خب در اینجا هم مزایا و هم معایب LINQ بررسی شد اما با توجه به این که مزایای آن بسیار بیشتر معایب آن است، یادگیری و استفاده از آن به تمامی برنامه نویسان پبشنهاد می شود.
در تمامی آموزش ها، توضیحات بر روی مثال ها انجام خواهد گرفت چون توضیحات اضافی ممکن است از بار آموزشی بکاهد.
چند متد ساده در LINQدر ابتدا چند متد ساده را بررسی می کنیم تا با کلیات و شکل LINQ آشنا شوید. در جلسه ی آینده آموزش را با LINQ To Object شروع خواهیم کرد.
توجه کنید که تمامی این متد ها در کلاس Enumerable قرار دارند و از نوع extension هستند و قبل از آن لازم است فضای نام System.linq را به پروژه ی خود اضافه کنید.
متد Min
 
 
 
 
 
C#



1
2

 int[]Num={1,2,3,4,5,6,7,8,9};
intresult=Num.Min();



متد Min کم ترین مقدار آرایه را در متغیر result قرار می دهد.
متد Max
 



1
2

int[]Num={1,2,3,4,5,6,7,8,9};
intMaximumNum=Num.Max();



با استفاده از این متد می توان مقدار Max موجود در آرایه را در MaximumNum قرار داد.
متد Sum
 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

using System;
using System.Collections.Generic;
using System.LINQ;
namespaceLINQtutorials
{
classProgram
{
staticvoidMain(string[]args)
{
int[<
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


اجرای اولین پروژه با زبان برنامه‌ نویسی #C
برای شروع یادگیری زبان برنامه‌نویسی #C باید همواره نرم‌افزارهای مربوط به آنها را روی کامپیوتر شخصی خود نصب کنید. این نرم‌افزارها به دو دسته کلی IDEها و پایگاه داده تقسیم بندی می‌شوند.
IDE مخفف عبارت integrated development environment به معنای سیستم یکپارچه توسعه‌دهنده می‌باشد. IDE مناسب برای زبان برنامه‌نویسی #C نرم افزار ساخت شرکت ماکروسافت به نام Microsoft Visual Studio بوده که آخرین ورژن این نرم‌افزار را می‌توانید از وب سایت شرکت ماکروسافت دریافت نمایید.
همچنین همراه این نرم‌افزار باید یک IDE مناسب برای ارتباط با پایگاه داده (که بعدا مفصل در موردش صحبت خواهیم کرد) در اختیار داشته باشید که مناسب ترین نرم‌افزار، SQL Server 2012 الی SQL Server 2016 (در تاریخ انتشار این مقاله) می‌باشد.
لینک‌های دانلود به شرح ذیل هستند:
دانلود نرم افزار Microsoft Visual Studio
دانلود نرم افزار SQL Server
هنگامیکه وارد لینک‌های فوق می‌شوید نسخه‌های رایگان تا تجاری این نرم‌افزارها در اختیار شما قرار می‌گیرد که می‌توانید اقدام به نصب آنها کنید. نسخه‌هایی که ما برای طراحی وب سایت با کامیپوتر در این مجموعه‌های آموزشی مورد استفاده قرار می‌دهیم، نسخه‌های تجاری (Enterprise) هستند و آخرین ورژن هر یک از نرم‌افزارها شامل ویژوال استودیو ۲۰۱۷ و اس کیو ال سرور ۲۰۱۶ می‌باشد.
شروع برنامه نویسی سی شارپپس از تهیه نرم‌افزارهای فوق و نصب آنها روی سیستم عامل موردنظر خود، نرم افزار Visual Studio را باز کرده و سپس مسیر زیر را جهت ایجاد پروژه جدید طی کنید:
سپس از منوی سمت چپ برنامه روی عبارت #Visual C ایستاده و از منوی سمت راست عبارت Console Application را انتخاب کنید. سپس در انتهای صفحه مشابه آنچه در تصویر زیر مشاهده می‌کنید نام نرم‌ افزار یا پروژه‌ی خود را تایپ نمایید و سپس دکمه‌ی OK را جهت ایجاد پروژه جدید بفشارید.
در اینجا نام نرم‌افزار ما RoxoApplication می‌باشد.
در صفحه‌ای که پیش روی شما باز شده است یک سری کدها به همراه یک ستون در سمت راست ایجاد می‌شود که این ستون Solution Explorer می‌باشد. درون این ستون تمام فایل‌های موردنیاز اجرایی برای نرم افزار شما قرار می‌گیرد.
همانطور که مشاهده می‌کنید، یک فایل با نام Program.cs در این ستون با پسوند cs قرار گرفته که نشان‌دهنده‌ی پشتیبانی از زبان #C است. در واقع این فایل به صورت خودکار ساخته می‌شود و نباید تحت هیچ شرایطی آن را پاک کنید چون لایه‌ی اجرایی برنامه شماست. و محتویات درون آن به صورت زیر است:
 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
 
namespaceRoxoApplication
{
    classProgram
    {
        staticvoidMain(string[]args)
        {
        }
    }
}



همچنین درون این مجموعه فایل‌ها یک فایل به نام App.Config وجود دارد که تنظیمات برنامه‌ی شما را نمایش می‌دهد که در آینده در مورد آن کامل توضیح می‌دهیم.
برای اینکه آموزش خود را شروع کنیم ابتدا به نوشتن یک دستور ما بین متد Main می‌پردازیم. اینکه متد و کلاس چیست و چگونه کار می‌کند و کدهای فوق به چه معنی هستند را در جلسات بعدی مورد بررسی قرار می‌دهیم. اینجا فقط می‌خواهیم اولین دستور زبان سی شارپ را در محیط Console Application ارائه کنیم:
دستور ()Console.WriteLine
این دستور به عنوان یک ابزار برای نوشتن پیام در خروجی نرم‌افزار می‌باشد.
دستور ()Console.ReadKey
با استفاده از این دستور می‌توان مشخص کرد که پس از فشردن دکمه‌ای از صفحه‌کلید نرم‌افزار متوقف شود.
بنابراین کد نهایی ما برای اجرای اولین نرم‌افزار به صورت زیر می‌باشد:
 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
 
namespaceRoxoApplication
{
    classProgram
    {
        staticvoidMain(string[]args)
        {
            Console.WriteLine("Welcome to Roxo Tutorial World"مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


انواع عملگرها‌ در سی شارپ (C#)
با مطالعه‌ی دو فصل گذشته علاوه بر اجرای محیط نرم‌افزاری ویژوال استودیو به معرفی انواع داده در زبان برنامه‌نویسی سی شارپ پرداختیم. در صورتیکه دو فصل گذشته را مطالعه نکرده‌اید از طریق این لینک وارد صفحه دوره آموزشی سی شارپ شده و تمام آموزش‌ها را یکجا مطالعه بفرمایید. در این فصل می‌خواهیم به توضیح علمگرهای ریاضیاتی در زبان برنامه‌نویسی C# بپردازیم.
مقدمهعملگرها در زبان برنامه‌نویسی به عنوان سمبل‌هایی هستند که به کامپایلر اطلاع می‌دهند عملیات ریاضیاتی خاصی را انجام دهد. زبان برنامه‌نویسی سی شارپ مجموعه‌ای از علمگرهای توکار (ساخته شده توسط خود زبان و شرکت ماکروسافت) را ارائه می‌دهد که در تقسیم‌بندی زیر قرار می‌گیرند:
عملگرهای ریاضی
عملگرهای رابطه‌ای
عملگرهای منطقی
عملگرهای بیتی
عملگرهای انتسابی
عملگرهای متفرقه
عملگرهای ریاضیبا ارائه‌ی یک مثال کاربردی این عملگر را توضیح خواهیم داد. فرض کنید مقدار A برابر ۱۰ و مقدار B برابر ۲۰ است آنگاه داریم:
 



1
2
3
4
5
6
7
8
9

Operator Description     Example
+جمع     A+B=30
-تفریق     A-B=-10
*ضرب     A *B=200
/تقسیم     B/A=2
%باقیمانده‌یتقسیم    B%A=0
 
++یکواحدافزایش     A++=11
--یکواحدکاهش     A--=9



 
عملگرهای رابطه‌ای 
 



1
2
3
4
5
6
7

Operator Description         Example
==تساویدومقدار         (A==B)isnottrue.
!=عدمتساویدومقدار(A!=B)istrue.
>         بزرگتر                  (A>B)isnottrue.
<         کوچکتر           (A<B)istrue.
>=              بزرگترمساوی     (A>=B)isnottrue.
<=         کوچکترمساوی            (A<=B)istrue.



 
عملگرهای منطقی 
 



1
2
3
4

Operator Description    Example
&&         AND                (A&&B)isfalse.
||         OR                 (A||B)istrueمشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


کپسوله‌سازی (Encapsulation) و تعیین سطح دسترسی (Access Modifier)
مطالعه‌ی شش فصل گذشته به شما کمک می‌کند تا مقدمات زبان برنامه‌نویسی C# را فراگرفته و در نهایت کدنویسی خود را آغاز کنید. حال در این فصل قصد داریم یک مقدار مباحث آموزشی را تخصصی تر کرده تا قبل از ورود به دنیای بسیار پر رمز و راز برنامه‌نویسی دقت عمل بالایی را کسب کنید تا بتوانید کدهای بهینه و در عین حال قابل دسترس را در اختیار داشته باشید. مفهومی که در این فصل در مورد آن صحبت می‌کنیم پیرامون مبحث کپسوله سازی یا Encapsulation و تعیین سطح دسترسی یا Access Modifier ها در زبان برنامه‌نویسی C# است.
مقدمهکپسوله‌سازی یا Encapsulation در برنامه‌نویسی کامپیوتر مفهومی است که عموما در کلاس‌ها و به عنوان یکی از مبانی و اصول برنامه‌نویسی شیءگرایی (OOP که مخفف عبارت Object Oriented Programming است) می‌باشد.
به صورت روان‌تر و ساده‌تر می‌توان مطرح کرد که کپسوله سازی به معنی دسته‌بندی  (کپسوله کردن) داده‌ها و توابعی (متدها) است که روی این داده‌ها اعمال می‌شوند. به عبارت دیگر با استفاده از کپسوله سازی دسترسی مستقیم برنامه‌نویسان به متدها و سایر المان‌های یک شیء محدود می‌شود.
بالاتر از مفهوم کپسوله سازی با معنی‌ای به نام انتزاع یا Abstraction‌ آشنا می‌شویم.
انتزاع به معنای اجازه دادن به یک کاربر یا برنامه‌نویس برای مشاهده اطلاعات مربوط به یک کلاس یا شیء است و کپسوله سازی به معنای فراهم کردن توانایی یک برنامه‌نویس برای سطح‌بندی کردن این دید انتزاعی نسبت به اشیاء است.
قبل از ورود به مبحث کپسوله سازی باید خدمت شما عزیزان مطرح کنم که در فصل بعدی با مفاهیم کلاس‌ها و اشیاء به تفصیل آشنا خواهید شد و هدف از این فصل اشنا شدن شما عزیزان با مفاهیمی چون کپسوله سازی و Access Modifier ها است. بنابراین اگر کدی برای شما ناملموس است اصلا نگران نباشید زیرا در فصل بعدی به صورت کامل پوشش لازم را خواهیم داشت.
برای اجرای کپسوله سازی یا Encapsulation از تغییردهنده‌های دسترسی یا (Access Modifier) استفاده می‌کنیم. این تغییردهنده‌ها معمولا روی اعضای یک کلاس تاثیر می‌گذارند. زبان برنامه‌نویسی C# از چندین تغییردهنده دسترسی پشتیبانی می‌کند که به شرح ذیل می‌باشد:
دسترسی Public (عمومی)
دسترسی Private (خصوصی)
دسترسی Protected (محافظت‌شده)
دسترسی Internal (داخلی)
دسترسی Protected Internal (محافظت شده‌ی داخلی)
سطح دسترسی عمومی (Public Access Modifier)این سطح دسترسی زمانیکه روی یک کلاس اعمال می‌شود، اعضاء و توابع متغییر آن را در اختیار سایر توابع و اشیاء می‌گذارد. هر عضو عمومی (Public) می‌تواند خارج از آن کلاس نیز در دسترس باشد. به مثال زیر توجه کنید:
 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

using System;
namespaceRectangleApplication
{
   classRectangle
   {
      //member variables
      publicdoublelength;
      publicdoublewidth;
      
      publicdoubleGetArea()
      {
         returnlength *width;
      }
      publicvoidDisplay()
      {
         Console.WriteLine("Length: {0}",length);
         Console.WriteLine("Width: {0}",width);
         Console.WriteLine("Area: {0}",GetArea());
      }
   }//end class Rectangle
   
   classExecuteRectangle
   {
      staticvoidMain(string[]args)
      {
         Rectangler=newRectangle();
         r.length=4.5;
         r.width=3.5;
         r.Display();
         Console.ReadLine(
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


آشنایی با مفهوم برنامه‌ نویسی شیءگرا در C#
در طی این دوره‌ی آموزش به کررات به مفاهیم شی گرایی برخورد کردید بدون آنکه بدانید آنها چه چیزی هستند و چگونه کار می کنند. در یک جمله برنامه نویسی شی گرایی یعنی سطح حرفه ای از کدنویسی که باعث می شود نرم افزارهای شما توسعه پذیر تر باشند. یکی از اصول این حرفه‌ای بودن آشنایی با مفهومی به نام شیءگرایی و زبان برنامه‌نویسی شیءگرا یا Object Oriented Programming است. اما این سوال برای شما پیش می‌آید که شیءگرایی چیست و اصلا مفهوم برنامه‌نویسی شیءگرا در چه مواردی بکار گرفته می‌شود؟ در این فصل قصد داریم به صورت مفصل این مباحث را یکبار برای همیشه مطرح کرده تا شما عزیزان درک دقیقی نسبت به این موضوع پیدا کنید.
تعریف شیءگرایی و برنامه‌نویسی شیءگرادر زبان‌هایی که بر پایه‌ی برنامه‌نویسی شیءگرا هستند معمولا مدلسازی نرم‌افزار و المان‌های آن بر اساس اشیاء انجام می‌شود. یعنی هرآنچه در دنیای پیرامون برنامه‌نویسی وجود دارد به دید یک شیء معرفی می‌شود و هر شیء دارای خصوصیات (Properties) و رفتارها (Behaviors) است.
خصوصیات یا Properties به عنوان مجموعه‌ای از صفات هستند که یک شیء را توصیف می‌کنند. برای مثال یک شیء به نام انسان را در نظر بگیرید. این شیء دارای یک سری صفات مانند رنگ مو، رنگ پوست، وزن، قد و … است. و تمام این موارد آن شیء یعنی انسان را توصیف می‌کنند.
رفتارها یا Behavior به عنوان مجموعه‌ی اعمالی که یک شخص انجام می‌دهد شناخته می‌شود مثلا یک شخص می‌تواند نگاه کند، بنشیند، صحبت کن و راه برود. رفتارها در مجموع به کاری که یک شیء می‌تواند انجام دهد گفته می‌شود.
حال بهتر است با مفاهیم اصلی زبان برنامه‌نویسی شیءگرا آشنا شویم:
Abstraction یا انتزاعدر یک تعریف خلاصه انتزاع به فرآیندی گفته می‌شود که طی آن، در زمان بررسی یک شیء، تنها خصوصیت و رفتارهایی باید در تعریف آن شیء لحاظ شوند که در سیستم مستقیما کاربرد دارند. در واقع انتزاع یا Abstraction مانند یک فیلتر عمل می‌کند که تنها ویژگی‌ها یا خصوصیات و رفتارهایی که مورد استفاده در برنامه است را از آن عبور می‌دهد.
Encapsulation یا کسپوله سازیدر ارتباط با مفهوم کپسوله سازی یک فصل کامل به آن اختصاص داده‌‌ایم که می‌توانید آن را با کلیک روی این لینک مطالعه کنید. اما در یک خط اگر بخواهیم تعریف کامل از کپسوله سازی داشته باشیم بدین صورت است که کپسوله سازی به معنی پنهان کردن فرآیند اصلی اجرای یک برنامه‌ از دید کاربران است. که این اتفاق درون یک شیء رخ می‌دهد.
Inheritance یا ارث‌ بریوراثت یکی از اصلی‌ترین مفاهیم موجود در برنامه‌نویسی شیءگرا است. همانطور که از نام آن مشخص است وقتی یک فرزند متولد می‌شود قطعا خصوصیات و رفتارهایی را از والدین خود به ارث می‌برد. در دنیای برنامه‌نویسی هم دقیقا به همین صورت است وقتی یک کلاس از کلاس دیگری ارث‌بری می‌کند یعنی به خصوصیات و رفتارهای کلاس والد دسترسی دارد. این کار باعث می‌شود تا حجم کدهای نوشته شده به شدت کاهش یابد. در بخش‌های بعدی به توضیح مفصلی در ارتباط با این مفهوم می‌پردازیم.
Polymorphism یا چندریختیبرای درک مفهوم چند ریختی یا پلی مورفیسم در دنیای برنامه‌نویسی مثالی را از دنیای واقعی خدمت شما عزیزان ارائه می‌دهیم. در این کره‌ی خاکی انسان‌های بسیاری وجود دارند که دارای گویش‌های مختلف، زبان‌های مختلف هستند و در شهرهای متفاوت زندگی می‌کنند. اما تمامی این افراد به عنوان یک انسان شناخته می‌شوند. اگر در اینجا انسان را به عنوان یک کلاس والد درنظر بگیریم و انسان ایرانی، آفریقایی، چینی و … را به عنوان کلاس فرزند، متوجه خواهید شد که انسان ایرانی از کلاس والد مشتق شده است. اما انسان ایرانی نحوه‌ی صحبت کردن اش با نحوه‌ی صحبت کردن یک انسان آفریقایی متفاوت است یعنی در واقع دارای رفتار متفاوت هستند. یعنی رفتاری که در شیء والد وجود دارد گاها در شکل فرزند ممکن است تغییر کند. در زبان‌ برنامه‌نویسی شیءگرا به پلی مورفیسم یا Polymorphism تغییر رفتار یک شیء در اشیاء فرزند آن گفته می‌شود. که در زبان برنامه‌‎نویسی #C این تغییر رفتارها به کمک تعریف متدها به صورت virtual و override است و در فصول بعدی به تفصیل آنها را توضیح خواهیم داد.
با مطالعه‌ی مفاهیم فوق دید کلی نسبت به برنامه‌نویسی شیءگرا پیدا کردید که در فصل بعدی (فصل ۱۰) به شما کمک می‌کند تا درک صحیحی از کلاس‌ها داشته باشید.
 
منبع: روکسو

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


معرفی فریم ورک جاوا اسکریپت انگولار ۶
دوستان عزیز سلام. با یک مقاله ی جالب دیگه درباره فریم ورک قدرتمند انگولار در خدمت شما هستیم. در این مقاله قصد داریم ویژگی های فریم ورک انگولار 6 (Angular 6) را برای شما بازگو کنیم تا از تغییرات موجود در این نسخه با خبر باشید.
قبل از هر چیز شمارو دعوت می کنم تا با دیدن قسمت اول ویدیوی موجود در لینک زیر به صورت رایگان اطلاعات کاملی در ارتباط با نرم افزارهای تک صفحه و فریم ورک قدرتمند انگولار بدست آورید.
نرم افزار های SPA یا تک صفحه ای در انگولار چی هستند؟
انگولار 6 یا بهتره بگیم Angular 6 RC به تاریخ 4 آپریل 20 منتشر شد. تیم انگولار از سال 2016 تا به الان یک برنامه ی دو ساله برای نسخه های مختلفی از فریم ورک خود در نظر داشت که یکدفعه از انگولار 2 به انگولار 6 رسید و امسال انگولار 7 هم در انتظار ما خواهد بود.
تمام تلاش تیم انگولار بر این بود که طی هر نسخه جدید، حجم کل فریم ورک کاهش و سرعت آن افزایش پیدا کند.
در حال حاضر آخرین نسخه انگولار 6، نسخه Angular 6 – rc.5 است که در تاریخ 14 آپریل 20 منتشر گردید ولی هنوز نسخه پایدار انگولار 6 در اختیار توسعه دهندگان قرار نگرفته است. اینطور که شرکت گوگل و تیم انگولار اعلام کرده اند، نسخه نهایی تا پایان ماه آپریل (اردیبهشت 1397) منتشر می شود.
در این نسخه باگ ها و خطاهای کامپایلر انگولار، کامپایلر Angular CLI، المان ها (Elements) و پکیج سرویس ها به صورت کلی برطرف شده است.
ویژگی ها انگولار 6افزودن توکن برای مشخص کردن نوع ماژول انیمیشن
در نسخه های قبلی: امکان مشخص کردن وضعیت اجرایی کامپوننت ها درو ماژول های BrowserAnimationsModule یا NoopAnimationsModule وجود نداشت.
در نسخه آپدیت شده: می‌ توان مشخص کرد که کدام نوع انیمیشن درون کامپوننت اجرا شود.
افزودن پشتیبانی از ناوبری (مسیردهی یا Navigation) در آدرس های URL
در نسخه قبلی: با استفاده از پکیج ServerWorker می توانستیم بین درخواست هایی که در هر آدرس بود ریداریکت کنیم.
در نسخه جدید: می توانیم الگوریتم های جدیدی داخل فایل ngsw-config.json ایجاد کنیم تا آدرس های URL شامل کاراکترهای خاصی باشند.
پشتیبانی از زبان برنامه نویسی تایپ اسکریت ورژن 2.7 (البته برای استفاده از این نسخه باید node 8 نصب باشد.)
ارتقاء سطح تست API در نرم افزار
بروزرسانی نسخه Rxjs
استفاده از پکیج رندر lvy (پکیج lvy جهت بهبودی سرعت و عملکرد نرم افزارهای انگولار و کاهش حجم آن استفاده شده است)
پشتیبانی از Component Dev Kit (این قابلیت یا CDK به شما امکان نصب بیش از 30 کامپوننت UI یا رابط کاربری را می دهد تا بدون هیچ مشکلی بتوانید از آنها جهت ساخت رابط کاربری و ارتقاء تجربه کاربری استفاده کنید)
بهبود ویژگی های فرم ها
توجه: دوستان عزیز آموزش ویدیویی انگولار 6 از مقدماتی تا پیشرفته به زبان فارسی را می‌توانید با کلیک روی اینجا یاد بگیرید. (این دوره در حال برگزاری است)
منبع: روکسو


 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


معرفی ۱۰ کتابخانه کلیدی انگولار
اکثر دوستانی که در حال مطالعه این مقاله هستند قطعا با واژه ی انگولار (Angular) به گوش آنها خورده است. اگر نگاهی به تاریخ شمسی ایران داشته باشیم متوجه می شویم که از سال 1394 به بعد فریم ورک های جاوا اسکریپتی در ایران جایگاه مشخصی پیدا کردند و اکثر شرکت ها از دیجی کالا، بامیلو، اسنپ و … گرفته تا شرکت های کوچک سعی بر این داشتند تا سمت کاربر (Frontend) خود را با این فریم ورک های قدرتمند ایجاد کنند تا تجربه کاربری (UX) وب سایت خود را ارتقاء دهند. در این بین آماری که در سال 2017 توسط وب سایت Stackoverflow منتشر گردید که در آن انگولار (Angular) به عنوان محبوب ترین فریم ورک سال شناخته شد. جهت تصدیق این موضوع یک تصویر از آمار این سایت در اختیار شما عزیزان قرار داده ایم:
انگولار یک فریم ورک جاوا اسکریپت است که در سال 2009 الی 2010 تحت عنوان انگولار جی اس (Angularjs) به دنیای برنامه نویسان و توسعه دهندگان راه پیدا کرد. این فریم ورک قدرتمند توسط کمپانی غولی به نام گوگل ایجاد شد تا ساخت نرم افزارهای تک صفحه ای به سادگی هرچه تمام تر انجام شود. در این بین فریم ورک های دیگری چون ری اکت (React) و ویو (Vue) جایگاه مشخصی پیدا کردند و گاها با این فریم ورک مقایسه می شوند. یکی از مشکلاتی که معمولا برنامه نویسان ایرانی با آن روبه رو هستند انتخاب بین فریم ورک هاست و همیشه برای انتخاب آنها دچار سردرگمی می شوند. البته توجه داشته باشید که در این مقاله قصد نداریم هیچ فریم ورکی را با هم مقایسه کنیم بلکه فقط می خواهیم شمارا با فراوانی امکانات انگولار و ارتباط آن با زبان فارسی بیشتر آشنا کنیم.
اما آنچه که در فریم ورک انگولار قابل توجه است جدا بودن فایل های کامپوننت، رابط کاربری (قالب) می باشد. و این ویژگی باعث می شود تا توسعه دهنده بتواند از یک کامپوننت در بخش های مختلف استفاده کند. از طرفی یکی از مهم ترین دلایلی که هر برنامه نویس ایرانی به سمت انگولار کشیده می شود، وجود کتابخانه های فارسی بسیار زیاد این فریم ورک است.
همیشه شما وقت ندارید تا کامپوننت های پیچیده ای را برای پروژه خود بنویسید. بنابراین گاهی نیاز هست تا از ابزارهای کمکی استفاده کرده و در پروژه خود به عنوان یک مرجع یا منبع استفاده کنید. مثلا فرض کنید میخواهید یک ساختار برای صفحه بندی صفحات وب سایت خود انجام دهید. در این حالت کافیست یکی از ابزارهای مرتبط با آن را روی سیستم خود نصب کنید و به سادگی با کدهای از پیش نوشته شده پروژه خود را توسعه دهید. هدف اصلی این مقاله معرفی این ابزارهاست تا نحوه تعامل شما با فریم ورک قدرتمند انگولار را ساده تر کند.
برای کمک بیشتر به شما، 10 ابزار محبوب فریم ورک انگولار را خدمتتان ارائه می دهیم. اکثر این ابزارها با تمام نسخه های انگولار (انگولار 2، انگولار 4، انگولار 5 و انگولار 6) سازگار هستند.
1) Angular Material (انگولار متریال) – سازگار با زبان فارسیابزار انگولار متریال به عنوان یک کتابخانه رابط کاربری یا UI Library توسط کمپانی گوگل معرفی شد. این ابزار با استفاده از زبان برنامه نویسی تایپ اسکریپت ایجاد شده است. در این کتابخانه مجموعه ای از کامپوننت های آماده وجود دارد که شما می توانید در پروژه خود در قالب تگ های HTML استفاده کنید. از ویژگی های این کتابخانه می توان به سرعت بسیار بالا، انعطاف پذیری فوق العاده و بهینه سازی عالی اشاره کرد. مثلا در تصویر زیر نمونه دکمه های از پیش تعریف شده در انگولار متریال را ملاحظه می کنید:
2) NGX Bootstrap ( ان جی ایکس بوت استراپ) – سازگار با زبان فارسیکتابخانه NGX Bootstrap، یکی از کتابخانه های انگولار می باشد که با فریم ورک سی اس اس بوت استراپ نوشته شده است. در این کتابخانه کامپوننت های فراوانی وجود دارد که عملکرد وب سایت در موبایل و دسکتاپ را ارتقاء می بخشد. به عنوان مثال در تصویر زیر یک دکمه رادیویی سه وضعیتی را برای شما به نمایش گذاشته ایم.
3) Prime NG (پرایم ان جی) – سازگار با زبان فارسیبه جرات و بدون اغراق می توان گفت یکی از قدرتمندترین کتابخانه های رابط کاربری انگولار، کتابخانه Prime NG می باشد. این کتابخانه نزدیک به 70 کامپوننت آماده را در اختیار شما می گذارد که تنها با وارد کردن ماژول های آنها و استفاده از تگ های HTML، می توان از آنها بهره برد. یکی از قابلیت های بسیار جالب این کتابخانه قالب های متنوعی است که برای هر سلیقه کاربری در نظر گرفته است. در ادامه یک تصویر از دکمه های این کتابخانه قدرتمند را مشاهده می کنید
4) NG Bootstrap (ان جی بوت استراپ) – عدم سازگاری با زبان فارسیدر صورتیکه با انگولار جی اس (Angularjs) کار کرده باشید حتما اسم کتابخانه angular-ui به گوش شما خورده است. این کتابخانه در نسخه های بعدی انگولار یعنی انگولار 2 به بعد به نام ng-bootstrap تغییر پیدا کرد. کتابخانه NG Bootstrapبا فریم ورک Bootstrap ورژن 4 ایجاد شده است که در اکثر مواقع برای کاربران ایرانی مشکل ساز می باشد. چون هنوز نسخه پایداری از فریم ورک Bootstrap 4 در اختیار توسعه دهندگان قرار نگرفته است. تصویر زیر نمایی از دکمه های موجود در این کتابخانه را نشان می دهد:
5) Onsen UI – عدم سازگاری با زبان فارسیکتابخانه رابط کاربری دیگری به نام Onsen UI وجود دارد که در سایت گیت هاب (Github) نزدیک به 6000 ستاره (Stars) دریافت کرده است. این تعداد ستاره به معنای محبوبیت این کتابخانه در بین توسعه دهنگان می باشد. البته ترجیحا از Onsen UI برای ایجاد نرم افزارهای تحت اندروید و iOS (اپل) استفاده کنید چون طراحی این کتابخانه به صورت فلت (Flat) بوده و کامپوننت های خوبی در اختیار شما قرار می دهد. تصویر زیر مجموعه ای از چند نمای این کتابخانه را نمایش می دهد:
6) NG-ZORRO – عدم سازگاری با زبان فارسیکتابخانه دیگری که با زبان برنامه نویسی تایپ اسکریپت ایجاد شده، NG-ZORRO نام دارد. این کتابخانه توسط افرادی در کشور چین توسعه پیدا کرده و با کلاس هایی که در اختیار شما می گذارد، قابلیت های زیادی به نرم افزار شما اضافه می کند. نزدیک به 2000 ستاره در گیت هاب این کتابخانه ثبت شده است. به تصویر زیر دقت کنید:
7) NG Lighting – عدم سازگاری با زبان فارسیکامپوننت های انگولار برای طراحی سیستم های سبک و بهینه بسیار مناسب هستند. کتابخانه NG Lighting به نرم افزار شما قابلیت هایی اضافه می کند که با استفاده از آنها بتوانید به راحتی موقعیت کامپوننت خود را تغییر دهید بدون اینکه اختلالی در روند اجرایی برنامه بوجود بیاید. یکی از توسعه
8) NG Semantic-UI – عدم سازگاری با زبان فارسیکتابخانه دیگری به نام سیمانتیک (NG Semantic-UI) وجود دارد که نزدیک به 27 کامپوننت آماده در اختیار توسعه دهنده قرار می دهد. این کتابخانه حدود 1000 ستاره در گیت هاب به اسم خود ثبت کرده است. اگر با رابط کاربری سمانتیک کار کرده باشید این کتابخانه بسیار برای نرم افزار شما مناسب خواهد بود.
9) Clarity – عدم سازگاری با زبان فارسیکتابخانه متن باز (open source) کلاریتی (Clarity) به عنوان یک فریم ورک مبتنی بر زبان HTML و CSS معرفی می شود.این فریم ورک یک کتابخانه برای فریم ورک انگولار در نظر گرفته که کامپوننت های فراوانی در آن وجود دارد.
10) NG2 Charts – سازگار با زبان فارسیاگر در پروژه انگولاری خود می خواهید از نمودارها استفاده کنید قطعا یکی از بهترین گزینه ها کتابخانه NG2 Charts می باشد. این کتابخانه بر اساس کتابخانه نموداری قدرتمند Chart.js طراحی و پیاده سازی شده است
امیدواریم این مقاله برای شما عزیزان مفید بوده باشه و شما بتونید با انتخاب درست کتابخانه ها برنامه های انگولاری خودتون رو با قدرت بالاتری تولید کنید.
عزیزان دوره ی ویدیوی آموزش انگولار 5 و 6 در وب سایت آکادمی آنلاین روکسو در حال برگزاری است در صورتیکه هر یک از شما تمایل داشتید تا از 0 تا 100 انگولار رو به صورت کامل و پروژه محور یاد بگیرید بر روی این لینک کلیک کنید.
 
منبع: روکسو

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


آیا برای انگولار ۶ آماده هستید؟
انگولار 6‌ نسخه RC4 هم اکنون در دسترس عموم قرار گرفت و این بدین معنی ست که ورژن نهایی انگولار 6 این روزها منتشر شود. بسیاری از ما در مورد ویژگی های جدیدترین نسخه انگولار صحبت می کنیم و دوست داریم درباره امکاناتی که با این نسخه در اختیار ما قرار می‌ گیرد، بیشتر بدانیم!
آنچه که تیم انگولار 6 به ما قول داده است، سرعت بالا، حجم کم و ویژگی های گسترده است. در این مقاله قصد داریم کمی درباره آنها صحبت کنیم.
المان های انگولار (Angular Elements)
این پکیج در درجه اول برای بهبود بخشیدن به کامپوننت های وب ایجاد شده است که توسط اکثر مرورگرهای مدرن (بغیر از Edge) پشتیبانی می شود. به عبارت دیگر پکیج Angular Elements این امکان را می دهد که یک کامپوننت انگولار را ایجاد و آن را به عنوان یک کامپوننت وب منتشر کنید که در صفحات HTML‌ بسیار قابل استفاده است.
تبدیل کردن یک کامپوننت به یک المان دلخواه یا Custom Element، راه ساده ای برای داینامیک کردن مطالب HTML است.
تایپ اسکریپت 2.8
نسخه انگولار 6 از زبان برنامه نویسی تایپ اسکریپت 2.8 پشتیبانی می کند. در این نسخه از تایپ اسکریپت معرف ها (declaration)، مقدار دهی اولیه کلاس ها، داده های با نوع شرطی و بهبود عملکرد namespace‌ ها، تقویت شده است.
رندرر Ivy‌ یا Ivy Renderer
رندرر Ivy به عنوان یکی از جدیدترین موتورهای رندر و شبیه سازی به حساب می آید که جدیدا معرفی شده است. این موتور رندر سرعت شبیه سازی و بهینه سازی کدها را به شکل حیرت انگیزی افزایش می دهد. در انگولار به صورت پیش فرض این موتور فعال نیست و باید آن را دستی اعمال کنید.
کامپایلر Bazel
در این نسخه از انگولار 6، کامپایلر Bazel اضافه شده است. هنگامیکه شما کدهای خود را کامپایل می کنید تنها کدهایی که دچار تغییرات شده اند و نیاز به بارگذاری مجدد دارند، کامپایل خواهند شد. در این صورت حجم کدها و بهینه سازی آنها به بهترین شکل ممکن صورت می پذیرد.
تغییرات RouterModuleدر حال حاضر در دستوری به نام NavigationStart هیچ راهی وجود ندارد که بدانیم ناوبری یا مسیردهی به صورت اجباری صورت گرفته یا از طریق تغییر محل انجام شده است. یعنی مثلا شما روی یک لینک کلیک کرده اید و نرم افزار را مجبور کرده اید صفحه را تغییر دهد یا اینکه فقط می خواهید موقعیت فعلی نرم افزار را با تغییر مکان نما، دگرگون کنید. با استفاده از ویژگی navigationSource، مرکز و منبع ناوبری مثلا (اسکرول کردن موقعیت یا تغییر URL/URI) مشخص می شود. از طرفی یک ویژگی دیگر به نام restoredState به امکانات ناوبری اضافه شده است که با استفاده از آن می‌توان موقعیت فعلی صفحه ای که درون آن قرار داریم را بدست آوریم. این دو ویژگی routing را در انگولار 6‌ بسیار ساده می کنند.
تغییرات FormsModuleNgModelChange: این رویداد زمانی رخ می دهد که وقتی مقادیر موجود در یک قالب تغییر می کنند یا بروزرسانی می شوند. در ورژن های قبلی این رویداد قبل از آپدیت و بروزرسانی قالب رخ می داد. اما در نسخه انگولار 6‌ شما می توانید تغییرات را اعمال و مقدار value را در فرم کنترل (Form Control) در اختیار داشته باشید.
Form Control statusChanges: در انگولار 6 یک رویداد به نام PENDING هنگامی منتشر می شود (emit) که کلاس کنترل (AbstractControl) به نام markAsPending فراخوانی شود.
بهبود اعتبارسنجی فرم ها بر اساس pattern: قبل از انگولار 6، اعتبارسنجی انگولار بر اساس پترن (pattern) یا الگو خطوط را در بر نمی گرفت. یعنی المان هایی مانند ^ و / یا & و / یا $ را پشتیبانی نمی کرد. اما در نسخه جدید اعتبارسنجی بر روی عبارت های فوق قبل از افزودن آنها صورت می گیرد.
Angular CLI 1.7
ng update: در حال حاضر یک دستور برای بروزرسانی وابستگی های انگولار به صورت خودکار وجود دارد. تمام وابستگی های موجود در */angular@ با استفاده از این دستور به آخرین نسخه پایدار خود بروزرسانی می شوند.
App Budgets: با استفاده از ویژگی می‌توان Angular CLI را به گونه ای محدود کرد که حجم نهایی فایل های جاوا اسکریپت یا bundle را کاهش دهد. می توان به گونه ای این محدودیت را اعمال کرد که در صورت افزایش حجم bundle یک پیغام خطا نمایش داده شود.
توجه: دوستان عزیز آموزش ویدیویی انگولار 6 از مقدماتی تا پیشرفته به زبان فارسی را می‌توانید با کلیک روی اینجا یاد بگیرید. (این دوره در حال برگزاری است)
 
منبع: روکسو

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


معرفی ۱۰ کتابخانه (کامپوننت) کلیدی انگولار
اکثر دوستانی که در حال مطالعه این مقاله هستند قطعا با واژه ی انگولار (Angular) به گوش آنها خورده است. اگر نگاهی به تاریخ شمسی ایران داشته باشیم متوجه می شویم که از سال 1394 به بعد فریم ورک های جاوا اسکریپتی در ایران جایگاه مشخصی پیدا کردند و اکثر شرکت ها از دیجی کالا، بامیلو، اسنپ و … گرفته تا شرکت های کوچک سعی بر این داشتند تا سمت کاربر (Frontend) خود را با این فریم ورک های قدرتمند ایجاد کنند تا تجربه کاربری (UX) وب سایت خود را ارتقاء دهند. در این بین آماری که در سال 2017 توسط وب سایت Stackoverflow منتشر گردید که در آن انگولار (Angular) به عنوان محبوب ترین فریم ورک سال شناخته شد. جهت تصدیق این موضوع یک تصویر از آمار این سایت در اختیار شما عزیزان قرار داده ایم:
انگولار یک فریم ورک جاوا اسکریپت است که در سال 2009 الی 2010 تحت عنوان انگولار جی اس (Angularjs) به دنیای برنامه نویسان و توسعه دهندگان راه پیدا کرد. این فریم ورک قدرتمند توسط کمپانی غولی به نام گوگل ایجاد شد تا ساخت نرم افزارهای تک صفحه ای به سادگی هرچه تمام تر انجام شود. در این بین فریم ورک های دیگری چون ری اکت (React) و ویو (Vue) جایگاه مشخصی پیدا کردند و گاها با این فریم ورک مقایسه می شوند. یکی از مشکلاتی که معمولا برنامه نویسان ایرانی با آن روبه رو هستند انتخاب بین فریم ورک هاست و همیشه برای انتخاب آنها دچار سردرگمی می شوند. البته توجه داشته باشید که در این مقاله قصد نداریم هیچ فریم ورکی را با هم مقایسه کنیم بلکه فقط می خواهیم شمارا با فراوانی امکانات انگولار و ارتباط آن با زبان فارسی بیشتر آشنا کنیم.
اما آنچه که در فریم ورک انگولار قابل توجه است جدا بودن فایل های کامپوننت، رابط کاربری (قالب) می باشد. و این ویژگی باعث می شود تا توسعه دهنده بتواند از یک کامپوننت در بخش های مختلف استفاده کند. از طرفی یکی از مهم ترین دلایلی که هر برنامه نویس ایرانی به سمت انگولار کشیده می شود، وجود کتابخانه های فارسی بسیار زیاد این فریم ورک است.
همیشه شما وقت ندارید تا کامپوننت های پیچیده ای را برای پروژه خود بنویسید. بنابراین گاهی نیاز هست تا از ابزارهای کمکی استفاده کرده و در پروژه خود به عنوان یک مرجع یا منبع استفاده کنید. مثلا فرض کنید میخواهید یک ساختار برای صفحه بندی صفحات وب سایت خود انجام دهید. در این حالت کافیست یکی از ابزارهای مرتبط با آن را روی سیستم خود نصب کنید و به سادگی با کدهای از پیش نوشته شده پروژه خود را توسعه دهید. هدف اصلی این مقاله معرفی این ابزارهاست تا نحوه تعامل شما با فریم ورک قدرتمند انگولار را ساده تر کند.
برای کمک بیشتر به شما، 10 ابزار محبوب فریم ورک انگولار را خدمتتان ارائه می دهیم. اکثر این ابزارها با تمام نسخه های انگولار (انگولار 2، انگولار 4، انگولار 5 و انگولار 6) سازگار هستند.
1) Angular Material (انگولار متریال) – سازگار با زبان فارسیابزار انگولار متریال به عنوان یک کتابخانه رابط کاربری یا UI Library توسط کمپانی گوگل معرفی شد. این ابزار با استفاده از زبان برنامه نویسی تایپ اسکریپت ایجاد شده است. در این کتابخانه مجموعه ای از کامپوننت های آماده وجود دارد که شما می توانید در پروژه خود در قالب تگ های HTML استفاده کنید. از ویژگی های این کتابخانه می توان به سرعت بسیار بالا، انعطاف پذیری فوق العاده و بهینه سازی عالی اشاره کرد. مثلا در تصویر زیر نمونه دکمه های از پیش تعریف شده در انگولار متریال را ملاحظه می کنید:
2) NGX Bootstrap ( ان جی ایکس بوت استراپ) – سازگار با زبان فارسیکتابخانه NGX Bootstrap، یکی از کتابخانه های انگولار می باشد که با فریم ورک سی اس اس بوت استراپ نوشته شده است. در این کتابخانه کامپوننت های فراوانی وجود دارد که عملکرد وب سایت در موبایل و دسکتاپ را ارتقاء می بخشد. به عنوان مثال در تصویر زیر یک دکمه رادیویی سه وضعیتی را برای شما به نمایش گذاشته ایم.
3) Prime NG (پرایم ان جی) – سازگار با زبان فارسیبه جرات و بدون اغراق می توان گفت یکی از قدرتمندترین کتابخانه های رابط کاربری انگولار، کتابخانه Prime NG می باشد. این کتابخانه نزدیک به 70 کامپوننت آماده را در اختیار شما می گذارد که تنها با وارد کردن ماژول های آنها و استفاده از تگ های HTML، می توان از آنها بهره برد. یکی از قابلیت های بسیار جالب این کتابخانه قالب های متنوعی است که برای هر سلیقه کاربری در نظر گرفته است. در ادامه یک تصویر از دکمه های این کتابخانه قدرتمند را مشاهده می کنید
4) NG Bootstrap (ان جی بوت استراپ) – عدم سازگاری با زبان فارسیدر صورتیکه با انگولار جی اس (Angularjs) کار کرده باشید حتما اسم کتابخانه angular-ui به گوش شما خورده است. این کتابخانه در نسخه های بعدی انگولار یعنی انگولار 2 به بعد به نام ng-bootstrap تغییر پیدا کرد. کتابخانه NG Bootstrapبا فریم ورک Bootstrap ورژن 4 ایجاد شده است که در اکثر مواقع برای کاربران ایرانی مشکل ساز می باشد. چون هنوز نسخه پایداری از فریم ورک Bootstrap 4 در اختیار توسعه دهندگان قرار نگرفته است. تصویر زیر نمایی از دکمه های موجود در این کتابخانه را نشان می دهد:
5) Onsen UI – عدم سازگاری با زبان فارسیکتابخانه رابط کاربری دیگری به نام Onsen UI وجود دارد که در سایت گیت هاب (Github) نزدیک به 6000 ستاره (Stars) دریافت کرده است. این تعداد ستاره به معنای محبوبیت این کتابخانه در بین توسعه دهنگان می باشد. البته ترجیحا از Onsen UI برای ایجاد نرم افزارهای تحت اندروید و iOS (اپل) استفاده کنید چون طراحی این کتابخانه به صورت فلت (Flat) بوده و کامپوننت های خوبی در اختیار شما قرار می دهد. تصویر زیر مجموعه ای از چند نمای این کتابخانه را نمایش می دهد:
6) NG-ZORRO – عدم سازگاری با زبان فارسیکتابخانه دیگری که با زبان برنامه نویسی تایپ اسکریپت ایجاد شده، NG-ZORRO نام دارد. این کتابخانه توسط افرادی در کشور چین توسعه پیدا کرده و با کلاس هایی که در اختیار شما می گذارد، قابلیت های زیادی به نرم افزار شما اضافه می کند. نزدیک به 2000 ستاره در گیت هاب این کتابخانه ثبت شده است. به تصویر زیر دقت کنید:
7) NG Lighting – عدم سازگاری با زبان فارسیکامپوننت های انگولار برای طراحی سیستم های سبک و بهینه بسیار مناسب هستند. کتابخانه NG Lighting به نرم افزار شما قابلیت هایی اضافه می کند که با استفاده از آنها بتوانید به راحتی موقعیت کامپوننت خود را تغییر دهید بدون اینکه اختلالی در روند اجرایی برنامه بوجود بیاید. یکی از توسعه
8) NG Semantic-UI – عدم سازگاری با زبان فارسیکتابخانه دیگری به نام سیمانتیک (NG Semantic-UI) وجود دارد که نزدیک به 27 کامپوننت آماده در اختیار توسعه دهنده قرار می دهد. این کتابخانه حدود 1000 ستاره در گیت هاب به اسم خود ثبت کرده است. اگر با رابط کاربری سمانتیک کار کرده باشید این کتابخانه بسیار برای نرم افزار شما مناسب خواهد بود.
9) Clarity – عدم سازگاری با زبان فارسیکتابخانه متن باز (open source) کلاریتی (Clarity) به عنوان یک فریم ورک مبتنی بر زبان HTML و CSS معرفی می شود.این فریم ورک یک کتابخانه برای فریم ورک انگولار در نظر گرفته که کامپوننت های فراوانی در آن وجود دارد.
10) NG2 Charts – سازگار با زبان فارسیاگر در پروژه انگولاری خود می خواهید از نمودارها استفاده کنید قطعا یکی از بهترین گزینه ها کتابخانه NG2 Charts می باشد. این کتابخانه بر اساس کتابخانه نموداری قدرتمند Chart.js طراحی و پیاده سازی شده است
امیدواریم این مقاله برای شما عزیزان مفید بوده باشه و شما بتونید با انتخاب درست کتابخانه ها برنامه های انگولاری خودتون رو با قدرت بالاتری تولید کنید.
عزیزان دوره ی ویدیوی آموزش انگولار 5 و 6 در وب سایت آکادمی آنلاین روکسو در حال برگزاری است در صورتیکه هر یک از شما تمایل داشتید تا از 0 تا 100 انگولار رو به صورت کامل و پروژه محور یاد بگیرید بر روی این لینک کلیک کنید.
 
منبع: روکسو

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


انگولار ۶ هم اکنون در دسترس برنامه نویسان است!
سلام دوستان عزیز، خبر خوب امروز این است که انگولار 6.0.0 همین الان منتشر و در اختیار برنامه نویسان قرار گرفت.  نسخه اصلی انگولار 6 تحت عنوان Angular 6.0.0 در تاریخ 4 می منتشر گردید و دستورهای بسیار جذاب و ساده ای به این نسخه از فریم ورک قدرتمند انگولار اضافه شده است.
در نسخه جدید انگولار تغییرات جالبی در بخشی از پکیج های آن ایجاد شده است. پکیج های angular/core@ و angular/common@ و angular/compiler@ و ابزار Angular CLI و Angular Material (انگولار متریال) عمده ترین تغییرات را داشته اند. این تغییرات بدین معنی نیست که اگر کسی با انگولار 2 یا 4 یا 5 کار می کرده دیگر نمی تواند نرم افزار خود را بروزرسانی کند بلکه به معنای بهبود عملکرد و روند برنامه است و هیچ تداخلی با ورژن های قبلی ندارد. در ادامه به معرفی برخی از ویژگی های نسخه جدید این فریم ورک می پردازیم:
دستور ng updateشوکه شدید؟ بله درست می بینید انگولار در نسخه 6 یک دستور به ابزار CLI خود اضافه کرده که به صورت ng update package نوشته می شود و وظیفه ی آن تحلیل کردن فایل package.json و در نهایت آگاه سازی برنامه نویس از ورژن های جدید این فریم ورک می باشد.
این دستور به شما کمک می کند تا نسخه صحیح و سازگاری از وابستگی های مورد نیاز پروژه خود را نصب کنید، از طرفی دیگر می تواند این وابستگی ها را به نسخه صحیحی بروزرسانی کند. اگر در ساختار وابستگی ها (dependencies) پروژه شما با شماتیک (Schematics) مناسبی طراحی شده باشد به صورت خودکار به نسخه جدید بروزرسانی می شود.
دستور ng update پکیج های شما را بازنویسی (replace) نمی کند بلکه با استفاده از npm یا yarn این پکیج ها را مدیریت کرده و آنها را بروزرسانی می کند. مثلا شما با این وضعیت نباید نگران فایل های قبلی خودتان باشید.
برای مثال دستور ng update @angular/core تمام پکیج های فریم ورک انگولار مانند RxJS و TypeScript را بروزرسانی می کند و تمام ساختار برنامه ی شما را با آخرین نسخه آن تطبیق می دهد.
البته این دستور تا زمانیکه تمام کتابخانه ها و پکیج ها شماتیک مورد نیاز update را درون کدهای خود اعمال نکنند کاربردی ندارد ولی به زودی اکثر آنها به این تنظیمات تغییر مسیر می دهند.
دستور ng addیکی دیگر از دستورهای ابزار Angular CLI، دستور ng add package می باشد که با استفاده از آن قابلیت های جدیدی را می توان به پروژه خود اضافه کرد. دستور ng add برای مدیریت پکیج ها جهت دانلود وابستگی های جدید آنها بکار می رود. به مثال های زیر توجه کنید:
دستور ng add @angular/pwa نرم افزار شما را به یک نرم افزار PWA تبدیل می کند
دستور ng add @ng-bootstrap/schematics پکیج بوت استراپ (ng-boostrsap) را به نرم افزار شما اضافه می کند
دستور ng add @angular/material پکیج انگولار متریال (Angular Material) و قالب های مورد نیاز آن را نصب می کند
دستور ng add @clr/angular@next ابزار Clarity را به پروژه شما اضافه خواهد کرد
و در نهایت دستور ng add @angular/elements امکانات مورد نیاز برای کار با document-register-element.js را به پروژه شما اضافه خواهد کرد.
المان های انگولار یا Angular Elementsاولین نسخه Angular Elements روی ترکیب راه اندازی کامپوننت ها درون یک نرم افزار انگولاری به عنوان یک Custom Elements تمرکز کرده بود. حالا در نسخه جدید این قابلیت به انگولار المنت اضافه شده است که شما می توانید ماژول یا app-root های دلخواه خودتان را در ابتدای شروع برنامه راه اندازی کنید.
کامپوننت های راه انداز (شروع اولیه) انگولار متریالهمانطور که در تصویر زیر ملاحظه می کنید شما می توانید با استفاده از یک خط دستور اولین تگ انگولار متریال خودتان را ایجاد کنید مثلا باز زدن دستور ng generate @angular/material:material-dashboard --name=my-dash می توانید یک تگ به نام my-dash درست کرده که شکل ظاهری آن دقیقا مشابه یک داشبورد صفحه مدیریت است. یعنی فقط با یک دستور، ظاهر کلی یک داشبورد را ایجاد کنید.
در ادامه به بخشی از این تغییرات و امکانات می پردازیم
ویژگی Material Sidenav
با استفاده از این ویژگی می توانید یک سایدبار یا منوی کناری به نرم افزار خودتان اضافه کرده و آن را مدیریت کنید. این کامپوننت از قابلیت رسپانسیو برخوردار است. جهت دسترسی به این سایدبار باید دستور زیر را در خط فرمان یا CMD خود تایپ کنید:
ng generate @angular/material:material-nav --name=my-nav
به تصویر زیر توجه کنید:
ویژگی Material Data Table
با استفاده از این قابلیت شما می توانید یک جدول داده ای منظم برای خود تولید کنید. دستور اجرایی آن به صورت زیر می باشد
ng generate @angular/material:material-table --name=my-table
تصویر زیر بیانگر این ویژگی است:
در صورتیکه می خواهید به تمام این دستورها دسترسی کامل داشته باشید روی این لینک کلیک کنید.
محیط کاری CLI یا CLI Workspacesانگولار 6 از قابلیت CLI Workspace برخوردار است. یعنی شما می توانید با استفاده از این ویژگی پروژه های متعددی با کتابخانه های متنوع به یک پروژه انگولاری با یک CLI واحد، اضافه کنید. در حال حاضر در ورژن 6 انگولار پروژه های CLI به جای فایل angular-cli.json درون فایل angular.json قرار گرفته است.
در مجموعه کدهای زیر نمونه ای از این CLI را مشاهده می کنید:
CLI Workspaces 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
19
20

{
  "projects":{
    "my-project-name":{
      "projectType":"application",
      "architect":{
        "build":{
          "configurations":{
            "production":{},
            "demo":{},
            "staging":{},
          }
        },
        "serve":{},
        "extract-in":{},
        "test":{},
      }
    },
    "my-project-name-e2e":{}
  },
}



 
پشتیبانی از کتابخانهیکی از ویژگی های خیلی کلیدی انگولار 6 کهبسیاری از توسعه دهندگان آن را درخواست کرده بودند، افزودن قابلیت ساخت کتابخانه ها و پکیج ها می باشد. جهت ساخت کتابخانه یا Library برای پروژه خود ابتدا دستور زیر را وارد کرده:
ng generate library <name>
و سپس فایل های مورد نیاز کتابخانه خودتان را ویرایش کنید. با استفاده از این دستور می توانید کتابخانه هایی برای پروژه خودتان ایجاد و آن را در سایر پروژه ها نصب کنید.
تغییر مکان Providers هابرای ساده سازی نرم افزارها در نسخه 6 انگولار موقعیت providers ها یا تهیه کننده ها تغییر پیدا کرد. به عبارت دیگر providers ها از کلاس ماژول به درون سرویس ها مهاجرت کردند. در ادامه مثالی از قبل و بعد این تغییرات ارائه می دهیم:
قبل از تغییر، providers ها به صورت زیر تعریف می شدند:
app.module.ts 



1
2
3
4
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


آموزش کار با فرم ها در انگولار ۷
 در این مقاله قصد داریم کار با فرم ها در انگولار 7 را به شما آموزش دهیم. در این مثال من از فرم های Reactive استفاده می کنم. فرم های Reactive از یک روش مشخص و ثابتی برای مدیریت وضعیت فرم در هر نقطه از زمان استفاده می کند. هر تغییری که در وضعیت فرم اتفاق بیفتد، باعث بوجود آمدن وضعیت جدیدی می شود که اینکار یکپارچگی یک مدل را بین این تغییرات حفظ خواهد کرد.
فرم های Reactive یک مسیر سر راستی را برای انجام تست ارائه می دهد، چون شما اطمینان دارید هنگامی که یک درخواست به وجود می آید، داده های تان ثابت و قابل پیش بینی خواهد بود.
سرفصل های این آموزشنصب انگولار 7 توسط Angular Cli
 نصب بوت استرپ 4 در انگولار
ثبت ماژول Reactive Form
افزودن کلاس FormControl
ثبت کنترل در قالب(template)
کنترل مقادیر فرم
بروزرسانی مقادیر کنترل فرم
1- نصب انگولار 7 توسط Angular Cliدستور زیر را برای نصب انگولار 7 در ترمینال وارد کنید.
 



1
2
3

ng newng7forms
cd ng7forms
ng serve



حال به فولدر ngForms رفته و آن را در ویرایشگر Visual Studio Code باز کنید.
 



1
2

cd ng7forms
code.



 
نصب بوت استرپ 4 در انگولار 7برای نصب بوت استرپ 4 در انگولار، از دستور زیر استفاده کنید.
 



1

npm install bootstrap--save



حال باید بوت استرپ 4 را به آرایه Styles در فایل angular.json اضافه کنید.
 



1
2
3
4

"styles":[
    "./node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
],



فایل را ذخیره کرده و سرور را با دستور زیر راه اندازی کنید.
 



1

ng serve-o



همان طور که می بینید برنامه در آدرس localhost:4200 باز می شود.
ثبت ماژول Reactive Form در انگولار 7برای استفاده از فرم های Reactive باید از ماژول ReactiveFormsModule که در پکیج @angular/forms قرار دارد، استفاده کنیم و آن را به آرایه import در فایل app.module.ts اضافه کنیم.
در زیر این ماژول را به فایل app.module.ts اضافه کردیم.
 



1
2
3
4
5
6
7
8
9
10

// app.module.ts
 
import{ReactiveFormsModule}from'@angular/forms';
 
@NgModule({
  imports:[
    // other imports .
    ReactiveFormsModule
  ],
})



 
افزودن کلاس FormControl در انگولار 7کلاس FormControl یکی از بخش های خیلی مهم در هنگام استفاده از فرم های Reactive است. اگر بخواهیم یک کنترل فرم را ثبت کنیم، باید کلاس FormControl را به داخل کامپوننت مان import کنیم و سپس یک نمونه از form Control برای ذخیره پروپرتی های کلاس ایجاد می کنیم.
حال فایل app.component.ts را مطابق زیر ویرایش کنید.
 



مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


معرفی ساختار انگولار و ویرایش اولین برنامه
با مطالعه‌ی فصل گذشته اطلاعات نسبتا کلی در ارتباط با انگولار و انواع نسخه های آن بدست آوردید. سپس با اعمال یک سری دستور سیستم مدیریت پکیج یا NPM و سیستم مدیریت خط فرمان انگولار تحت عنوان Angular CLI، را نصب کردید. در نهایت پس از انجام تمام این مراحل با وارد کردن آدرس http://localhost:4200 به صفحه اولین پروژه انگولار خود وارد شده و پیام app Works که به معنای کار کردن نرم‌ افزار شماست، را مشاهده کردید.
حال در ادامه به توضیح ساختار پوشه بندی انگولار و همچنین نحوه‌ی ویرایش آنها می‌پردازیم.
فایل‌های انگولارپس از نصب انگولار یک پوشه که نام آن را خودتان مشخص کرده‌ اید در مسیر مورد نظرتان ایجاد می‌گردد. توضیح هر یک از این فایل‌ها به صورت زیر است:
پوشه e2e: به عنوان یک پوشه برای تست کردن پروژه مورد استفاده قرار می‌گیرد که مخفف عبارت End 2 End است.
پوشه src: به عنوان پوشه اصلی نرم‌افزار شما محسوب شده که درون آن فایل‌هایی با فرمت‌های html و ts و … وجود دارند و اصلی‌ ترین فایل آن به نام index.html است که بدنه‌ی اصلی نرم‌ افزار می‌باشد.
سایر فایل‌ها: به عنوان فایل‌های برای تنظیمات نرم‌افزار بوده که اغلب به صورت پیش فرض توسط خط فرمان Angular CLI ایجاد شده است.
محتویات درون پوشه srcاین پوشه شامل یک سری فایل‌های ویژه است که برای اجرای نرم‌ افزار شما مورد استفاده قرار می‌گیرند همانطور که قبلا ذکر کردیم مهم‌ترین فایل موجود تحت عنوان index.html در ریشه یا root این پوشه قرار دارد و با کلیک روی آن می‌توانید محتویات درون آن را ملاحظه بفرمایید. علاوه بر این یک سری پوشه‌های دیگر درون src وجود دارند که شرح هر کدام از آنها به صورت زیر است:
پوشه app: این پوشه به عنوان قلب کنترلی اصلی نرم‌ افزار معرفی می‌شود و شامل کامپوننت‌ های نرم‌افزار شما می‌باشد.
پوشه assets: از این پوشه معمولا برای قرار دادن تصاویر و سایر فایل‌های جانبی استفاده می‌کنند.
پوشه environment: درون این پوشه معمولا متغییرهای مربوط به محیط نرم‌افزار تنظیم می‌شود که به صورت پیش فرض ثابت می‌باشند و در طول این سری از دوره‌ های آموزشی کمتر به آن می‌پردازیم.
کار کردن با محیط انگولاربرای ایجاد یک سری عملیات مقدماتی در پروژه خود نیاز داریم تا تغییراتی را ایجاد کرده و در وهله‌ی اول با محیط ساختاری انگولار آشنا شویم.
هنگامیکه شما آدرس http://localhost:4200 را وارد می‌کنید با عبارت app works روبه‌رو خواهید شد. البته در نسخه‌های جدید این فریم‌ورک یک آرم از انگولار ۴ مشابه تصویر زیر ملاحظه می‌کنید:
برای ایجاد تغییرات روی این صفحه کافی‌ست وارد پوشه‌ی app شده و روی فایل app.component.ts کلیک نمایید. پسوند ts مخفف عبارت TypeScript می باشد که در ادامه بیشتر درباره آن بحث می‌کنیم. بنابراین محتویات فایل app.component.ts به صورت زیر خواهد بود:
 



1
2
3
4
5
6
7
8
9
10

import{Component}from'@angular/core';
 
@Component({
  selector:'app-root',
  templateUrl:'./app.component.html',
  styleUrls:['./app.component.css']
})
exportclassAppComponent{
  title='app';
}



در صورتیکه مقدار عبارت روبه‌روی title را به عبارت roxo App یا هر عنوان دلخواه دیگری تغییر دهید. عنوان بالای آرم انگولار به Welcome to roxo App!! تغییر می‌کند.
چقدر جالب! شما هم به این نکته پی بردید که بدون اینکه صفحه را مجددا بارگذاری کنید به صورت خودکار تغییرات اعمال شده پس از ذخیره کردن فایل خود به خود در صفحه مرورگر نمایش داده می‌شود.
این قابلیت توسط سرور Nodejs برای شما فراهم شده است تا در سریع‌ترین زمان ممکن تغییرات موردنظر خود را به صورت آنلاین و در لحظه مشاهده کنید. در اصطلاح به این حالت watch یا watch-poll گفته می‌شود. یعنی سرور به حالت انتظار می‌نشیند تا پس از اعمال اولین تغییرات در صفحه، سریعا آن را نمایش دهد.
در پوشه‌ app یک فایل دیگر تحت عنوان app.component.html وجود دارد که به عنوان فایل html برای کامپوننت app همواره و در طول برنامه مورد استفاده قرار می‌گیرد. اگر این فایل را باز کنید محتویات آن به صورت زیر خواهد بود:
 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
19

<!--The content below isonlyaplaceholder andcan be replaced.-->
<div style="text-align:center">
  <h1>
    Welcometo{{title}}!!
  </h1>
  <img width="300"src="data:">
</div>
<h2>Here are some links tohelp you start:</h2>
<ul>
  <li>
    <h2><atargetمشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


معرفی چرخه حیات Life Cycle انگولار
با مطالعه‌ی فصل گذشته اطلاعات مفیدی از مقدمات انگولار و زبان تایپ اسکریپت بدست آوردید. حالا وقت آن رسیده است که شیرجه‌ی عمیق‌تری زده و به قلب انگولار نشانه برویم. در این فصل قصد داریم توضیحات عمیق و تکمیلی‌ تری در ارتباط با انواع قسمت‌های فریم‌ورک قدرتمند انگولار  ارائه دهیم. با ما همراه باشید.
روند اجرایی برنامه‌‌ های انگولارهمانطور که با یکدیگر بررسی کردیم اگر صفحه‌ی مربوط به app.component.html را باز کرده و سپس محتویات فایل درون آن را حذف کنیم و در نهایت اقدام به اجرای دستور ng serve‌ نماییم، آنگاه صفحه‌ای سفید و بدون اطلاعات نمایش داده می‌شود.
اما این تصور ذهنی نباید وجود داشته باشد که فایل app.component.html در سرور کامپایل و در صفحه مانیتور اجرا می‌شود بلکه تمام محتویات موجود در کل کامپوننت‌ ها باید در یک فایل به نام index.html خلاصه شود. این بدین معنی‌ست که هر تعداد کامپوننت داشته باشیم با فرخوانی تگ‌های آنها در فایل index.html به قالب ساختاری آنها دسترسی داریم.
بنابراین اگر فایل Index.html را از مسیر src باز کنید مجموعه‌ی کدهایی به صورت زیر در آن قرار گرفته است:
 



1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Learning</title>
  <base href="/">
 
  <meta name="viewport"content="width=device-width, initial-scale=1">
  <link rel="icon"type="image/x-icon"href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>



تمام تگ‌های موجود در این صفحه از نوع html‌ بوده و چنانچه به این زبان تسلط داشته باشید برای شما قابل فهم هستند. اما یک تگ به نام <app-root> وجود دارد که تا به حال به آن برخورد نکردید. این تگ در واقع همان رابط بین کامپوننت app و مشتقات آن با صفحه اصلی وب اپلیکیشن شما است. کامپوننت app در مسیر src -> app‌ موجود می‌باشد.
معرفی فایل app.component.ts در انگولاراین فایل به عنوان یک کنترلر یا مرکز کنترل کامپوننت شما (که در اینجا app نام دارد) انجام وظیفه می‌ کند. محتویات دستورات و اطلاعات موجود در این کامپوننت را با یکدیگر بررسی خواهیم کرد:
 



1
2
3
4
5
6
7
8
9
10

import{Component}from'@angular/core';
 
@Component({
  selector:'app-root',
  templateUrl:'./app.component.html',
  styleUrls:['./app.component.css']
})
exportclassAppComponent{
  title='app';
}



در این فایل یک عبارت با عنوان Component‌ تعریف شده و محتویاتی را برای معرفی مجموعه‌ی خود ارائه می‌دهد. یکی از کلمات کلیدی که درون این کامپوننت استفاده شده است برابر است با selector.
سلکتور به عنوان یک معرف تگ در کامپوننت‌ها مورد استفاده قرار می‌گیرد. یعنی هر آنچه مقابل selector نوشته شود در صفحه index.html یا سایر صفحات قابل دسترسی است.
بنابراین در این فایل که به صورت پیش‌فرض ایجاد شده یک سلکتور برای کامپوننت app‌ به نام <app-root> معرفی شده است.
به عبارت دیگر دستور <app-root></app-root> معرف چهار فایل app.component.ts, app.component.html, app.component.spec.ts و app.component.css‌ است.
حال اگر آدرس http://localhost:4200‌ را باز کنید و روی آن راست کلیک کرده و سپس عبارت view page source را انتخاب کنید با مجموعه‌ی دستورهای زیر روبه‌رو خواهید شد:
 



مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


خطایابی (Debugging) در انگولار
با مطالعه‌ی فصل های گذشته مفاهیم ابتدایی و اولیه‌ی فریم ورک قدرتمند انگولار را فرا گرفتید و کلیاتی از نحوه‌ی اجرا و نصب این فریم‌ورک به همراه کار کردن با کامپوننت‌ها و در نهایت دستورها (Directive) ارائه گردید. حال در این فصل قصد داریم کمی از فضای آموزشی انگولار دور شده و به مبحثی تحت عنوان خطایابی یا Debugging نرم‌افزارهای انگولاری بپردازیم. با ما همراه باشید.
خطایابی یا Debugging چیست؟همانطور که در جریان هستید خطایابی از مهم‌ترین شاخصه‌های یک برنامه‌نویس بوده که دستیابی به این توانایی سرعت اجرای برنامه‌نویسی شما را بسیار بالا برده و در نهایت به شما کمک می‌کند تا نرم‌افزاری تست شده و بدون عیب و نقص تولید کنید.
فریم‌ورک قدرتمند انگولار به دلیل فراگیر شدن دارای افزونه‌ها و ابزارهای مناسبی‌ست که به شما این امکان را می‌دهد تا در هر لحظه برنامه‌ی خود را خطایابی کنید.
خطایابی با استفاده از افزونه مروگر کروم یا موزیلاهنگامی آدرس http://localhost:4200 را وارد کنید صفحه نرم افزاری که در حال اجرا و پیاده‌سازی آن هستید برای شما نمایان می‌شود. در حالت عادی ممکن است هیچ خطایی برای شما نمایش داده نشود. بنابراین باید یک ابزار توسعه در اختیار داشته باشید که گوگل کروم و موزیلا که جزو مرورگرهای محبوب برنامه‌نویسان هستند از این ابزار به قدرت هرچه تمام تر پشتیبانی می‌کنند.
بنابراین جهت فعال‌سازی این ابزار به اختصار دکمه‌ی F12 را بفشارید
زبانه Consoleبا فشردن دکمه‌ی F12 ابزاری جهت تست خطاهای نرم‌افزار شما در اختیار قرار می‌گیرد. در صورتیکه این کار را به درستی انجام داده باشید پیام زیر برای شما نمایش داده می‌شود:
همچنین اگر تحت هر شرایطی خطا داشته باشید قسمت Console تک تک آنها را برای شما بازگو می‌کند.
بنابراین یکی از مفید‌ترین ابزارها برای خطایابی استفاده از Console در مرورگرهاست. نمونه‌ی تصویر زیر یک سری خطا را که بر اثر نگارش کد ایجاد شده را برای شما به تصویر کشیده است:
برای برطرف کردن خطاها ابتدا نام فایلی که در آن خطا ایجاد شده است و سپس در بخش inline-template شماره خطی که خطا دارد و در نهایت در قسمت انتهایی متن پیام خطا در اختیار شما قرار می‌گیرد.
زبانه‌ی Sourceبا استفاده از این ابزار شما می‌توانید به کل منبع اجرایی برنامه‌ی جاوا اسکریپت خود دسترسی داشته باشید.
اگر روی این زبانه کلیک کنید یک سری فایل با پسوند bundle.js. را مشاهده خواهید کرد. این فایل‌ها برای تبدیل و کامپایل زبان تایپ اسکریپت به زبان جاوا اسکریپت ایجاد شده‌اند و اگر روی هر یک کلیک کنید مجموعه‌ای ترکیبی از کدهای جاوا اسکریپت را می‌بینید.
علاوه بر این از این ابزار برای اجرای مرحله‌ به مرحله و خط به خط کدها استفاده می‌شود که در ادامه به نحوه‌ی بکارگیری آن توضیح می‌دهیم.
ابتدا روی زبانه Source کلیک کنید تا صفحه‌ای مشابه تصویر زیر برای شما نمایش داده شود.
سپس روی دکمه‌ی pause (توقف) که با رنگ نارنجی در تصویر مشخص شده است کلیک کنید. در نهایت صفحه‌ی شما به حالت pause تبدیل می‌شود.
در مرحله‌ی بعد فایل main.bundle.js را انتخاب کرده و در بین خطوط آن جستجو کنید تا کد کامپوننت موردنظر را در آن ملاحظه کنید.
در نهایت روی عدد کناری که نمایانگر شماره خط کد است کلیک کنید تا break point یا نقطه‌ی اجرای برنامه مشخص شود. سپس روی دکمه‌ی pause مجددا کلیک کرده تا برنامه اجرا شود.
همانطور که مشاهده می‌کنید روبه‌روی هر عبارت در کنار نقطه‌ی break point مقادیر را به شما نمایش می‌دهد.
توجه داشته باشید که با کلیک روی متن کد مربوط به کامپوننت موردنظر، می‌توانید در صفحه ای جداگانه و با فایلی با پسوند ts کار کنید. این یک ابزار استثنایی است که شما می‌توانید در بین مجموعه‌ای از کدها تنها کامپوننت موردنظر خود را مورد بررسی قرار دهید.
یکی دیگر از راه‌های دسترسی مستقیم به کامپوننت‌ها و فایل‌های تایپ اسکریپت ورود به مسیر موجود در پوشه‌ی webpack‌ است که در تصویر زیر با کادر نارنجی مشخص شده است.
خطایابی با استفاده از ابزار Augury
ابزار Augury به عنوان یکی از حرفه‌ای‌ترین ابزارهای خطایابی انگولار بحساب می‌آید که توسط خود کمپانی گوگل برای مرورگر Chrome تولید و به صورت رایگان در اختیار برنامه‌نویسان گرامی قرار گرفته است. جهت نصب این ابزار روی مرورگر خود ابتدا به لینک زیر مراجعه و سپس روی گزینه install کلیک کنید. در ادامه مرورگر خود را بسته و مجددا اجرا کنید.
دانلود ابزار توسعه Augury
پس از نصب این افزونه یک ابزار بسیار قدرتمند که توانایی ترسیم گرافیکی مدل‌ها کامپوننتها و رابطه‌ی آنها را دارد و همچنین می‌تواند خطایابی نرم‌افزار شما را در بالاترین سطح ممکن انجام دهد،‌ در اختیار شما قرار گرفته است.
برای استفاده از این ابزار باید مجددا دکمه‌ی F12 را بفشارید و سپس روی زبانه‌ی Augury کلیک بفرمایید. در نهایت با صفحه‌ای روبه‌رو خواهید شد که اطلاعات کلی پروژه اعم از: گراف رابطه کامپونت‌ها، ویژگی‌ها، متغییرها و … را در اختیار شما می‌گذارد.
بسیار عالی به شما عزیزان مجددا تبریک می‌گوییم در این فصل توانستید با مقدمات و نحوه‌ی دستیابی به خطاهای برنامه‌ی خود آشنا شوید و در نهایت اقدام به برطرف کردن آنها کنید.
توجه: دوستان عزیز آموزش ویدیویی انگولار 6 از مقدماتی تا پیشرفته به زبان فارسی را می‌توانید با کلیک روی اینجا یاد بگیرید.
 
منبع: روکسو

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


معرفی Encapsulation (کپسوله‌ سازی) در انگولار
در طی تمام مباحثی که در فصل گذشته ارائه شد با مفاهیمی چون styleUrl و templateUrl آشنا شدید که یک قالب و استایل مشخص را برای کامپوننت شما در نظر می‌گیرد. حال در این بخش می‌خواهیم به توضیح مفهوم کپسوله‌ سازی (Encapsulation) در فریم‌ورک قدرتمند انگولار  بپردازیم. با ما همراه باشید.
کپسوله‌ سازی یا Encapsulation چیست؟کپسوله‌سازی به فر‌آیندی گفته می‌شود که طی آن مجموعه‌ی کدهای یک پروژه به صورت دسته‌ بندی شده و در یک ساختار مشخص در دسترس باشند.
کپسوله‌ سازی در انگولار چیست؟
در انگولار کپسوله سازی به معنای جداسازی فایل‌های HTML, CSS و همچنین View کامپوننت موردنظر از سایر کامپوننت‌هاست. تا به اینجای کار نحوه‌ی کپسوله‌ کردن قالب را در فایل‌هایی با پسوند component.html و component.css را یاد گرفتید.
دستور Encapsulation در انگولارکپسوله‌ سازی را می‌توان با تعریف یک ویژگی در مفسر یا دکوراتور ایجاد یا حذف کرد. حذف کپسوله سازی به معنای حذف صفت‌ها (attributes) از کد‌های HTML و در نهایت ساختار قالب می‌باشد. برای روشن‌تر شدن این موضوع مثال قبل را با یکدیگر مرور می‌کنیم.
در حالت عادی اگر بخواهیم کپسو‌له‌ سازی‌ ای صورت نگیرد کافیست فایل app.component.css را باز کرده و در نهایت استایل موردنظر خود را به آن اضافه کنیم و در این حالت کپسوله‌ سازی‌ ای برای کامپوننت‌های فرزند servers و server صورت نپذیرفته و در نهایت استایل آنها با استایل app.component.css برابر می‌باشد.
اما اگر بخواهیم یک کپسوله‌ سازی نرمال انجام دهیم باید فایل server.component.css را باز کرده و کدهای css خود را درون آن قرار دهیم و به همین سادگی کل کامپوننت را منحصر به استایل و قالب خودش کنیم.
حال یک دستور در مفسر Component@ وجود دارد که به شما این امکان را می‌دهد تا نحوه‌ی encapsulation صفحه view خود را به صورت دستی تنظیم و مشخص کنید. برای اینکار کافیست مثلا کامپوننت server.component.ts را باز کرده و در نهایت دستورهای زیر را به آن اضافه کنید:
 



1
2
3
4
5
6

@component{
  ...
  encapsulation:ViewEncapsulation.None
  encapsulation:ViewEncapsulation.Native
  encapsulation:ViewEncapsulation.Emulated
}



همانطور که ملاحظه می‌کنید ۳ حالت مختلف برای کپسوله‌سازی توسط مفسر برای ویژگی Encapsulation در اختیار ما قرار گرفته است. قبل از توضیح این سه حالت توجه داشته باشید که حتما باید متد ViewEncapsulation را در بالای صفحه با دستور زیر فراخوانی کنید:
 



1

import{ViewEncapsulation}from'@angular/core';



حال به توضیح هر یک از روش‌های کپسوله‌سازی می‌پردازیم:
ViewEncapsulation.None: در این حالت هیچگونه استایل و قالبی به صورت اختصاصی برای این کامپوننت درنظر گرفته نمی‌شود.
ViewEncapsulation.Native: در این حالت استایل‌ها به صورت ذاتی از مرورگر شما گرفته می‌شوند و سایر استایل‌هایی که در فایل component.css نوشته خواهد شد در بستر استایل‌های توکار مرورگر رخ می‌دهند.
ViewEncapsulation.Emulated: این حالت به صورت پیشفرض و خودکار فعال بوده و نیازی به نوشتن آن نیست. در این حالت استایل‌ها و قالب‌ها دقیقا از فایل‌های component.css فراخوانی شده و سپس استایل توکار مرورگر را روی آنها لحاظ می‌کند. یعنی تقدم و اولویت با استایل‌هایی است که توسط شما نوشته می‌شوند.
بهترین حالت برای استفاده از این ساختار ViewEncapsulation.Emulated است که به صورت خودکار در تمام کامپوننت‌ها فعال می‌باشد. زیرا در حال حاضر مرورگرهای بسیار کمی هستند که قالبیت native دارند.
بسیار عالی! در این بخش اطلاعاتی در ارتباط با کپسوله‌سازی ظاهر و قالب انگولار خدمت شما عزیزان ارائه کردیم. در بخش بعدی مباحث مربوط به قالب HTML یک کامپوننت را به صورت کامل در اختیار شما عزیزان قرار می‌دهیم.
 
 
 
توجه: دوستان عزیز آموزش ویدیویی انگولار 6 از مقدماتی تا پیشرفته به زبان فارسی را می‌توانید با کلیک روی اینجا یاد بگیرید.
 
منبع: روکسو


 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


آموزش ایجاد افکت مادون قرمز بر روی تصاویر
مادون قرمز در عکاسی و افکت های ویدویی یک گرایش جدید و محبوب در سال 2019 می باشد که از حالت طبیعی خارج و با جلوه های ویژه همراه و ترکیب شده است.
این افکت معمولا هنگامی که می خواهیم تصویری در هنگام تاریکی یا غروب خورشید را با جزئیات کامل به نمایش بگذاریم، به کار گرفته می شود. همان طور که اشاره شد در برخی موارد که نور صحنه کم است، ما می توانیم با استفاده از افکت مادون قرمز سطحی، به جزئیات جلوه دهیم و آن ها را در تصویر مشخص تر کنیم.
در این آموزش شما یاد خواهید گرفت چگونه در فتوشاپ یک افکت مادون قرمز بسازید. خواهید دید که تنها کافیست که از تنظیمات لایه ها (Adjustment Layers) و حالت های ترکیبی (Blending modes) استفاده کنید.
مراحل این آموزش بسیار ساده است و نیاز به تخصص خاصی ندارد و البته که سعی شده تمام جزئیات به طور کامل آموزش داده شود، تا کسانی هم که مبتدی هستند بتوانند به خوبی از این درس استفاده کنند. پس با روکسو همراه باشید.
ابتدا برای درک بهتر موضوع، خیلی خلاصه به این می پردازیم که مادون قرمز و عکاسی مادون قرمز چیست؟
مادون قرمزمادون قرمز یا فروسرخ به قسمتی از طیف امواج الکترومغناطیسی گفته می شود که طول موج آن ها از موج های مرئی بلندتر و از موج های رادیویی کوتاه ترند. این امواج پس از برخورد به جسم موجب گرم شدن آن می شوند و تفاوت آن ها با سایر  امواج در این است که این دسته از امواج، جز موج های نامرئی خورشید هستند. به این جهت به آن ها مادون قرمز گفته می شود که در نمودار بعد از رنگ قرمز و در گروه موج های مرئی که کمترین شکست را دارند، قرار می گیرند.
این امواج در گرامایش تابشی، ریموت دستگاه ها، تلفن های همراه، فیزیوتراپی، ابزارهای دید در شب و همچنین در شناسایی الیاف کاربرد دارند.
عکاسی مادون قرمزهمان طور که گفته شد نور مادون قرمز جزء امواج مادون نامرئی خورشید است، پس قطعا عکاسی مادون قرمز به عکاسی‌ای گفته شده که نورهای مرئی در آن حذف شده و فقط امواج مادون قرمز ثبت می شود.
حالا نکته که وجود دارد این است که دوربین ها مگر توانایی مشاهده امواج نامرئی را دارند؟ پاسخ خیر است! برای عکاسی مادون قرمز لازم است که از فیلتر مخصوص مادون قرمز استفاده شود. این فیلتر نور مرئی را حذف می کند و نور نامرئی را از خود عبور می دهد.
برای درک بهتر به تصویر زیر دقت کنید:
خب حالا که درک درست و کاملی از مفهوم مادون قرمز به دست آوردیم، به ادامه آموزش می پردازیم.
آنچه برای این آموزش لازم دارید
 
تصویری از یک کلبه در دامنه کوه
ما سعی کردیم از تصویری استفاده کنیم که برای یادگیری مناسب تر باشد. شما می توانید از هر تصویر دلخواه دیگری استفاده کنید.
فراهم کردن مقدماتمرحله 1
برای ایجاد یک سند جدید به مسیر File > New بروید. تنظیمات را مطابق زیر وارد کنید:
Width: 3000 px
Height: 2000 px
Resolution: 300 dpi
مرحله 2
به مسیر File > Place بروید و تصویر مورد نظر را به داخل سند بیاورید.
مرحله 3
اندازه تصویر را متناسب با اندازه سند تنظیم کنید. سپس کلید Enter فشار دهید.
خلق افکت مادون قرمزمرحله 1
ابتدا به مسیر Layer > New Adjustment Layer > Invert بروید.
مرحله 2
قسمت Blending Mode را به حالت Color تغییر دهید.
مرحله 3
بعد از این، لازم است که به مسیر Layer > New Adjustment Layer > Channel Mixer در فتوشاپ برویم تا یک لایه تنظیم کننده از نوع Channel Mixer ایجاد کنیم.
مرحله 4
دوباره همانند کاری که در مراحل قبل انجام دادیم، Blending Mode را به Color تغییر می دهیم.
مرحله 5
لایه Channel Mixer را انتخاب کنید و تنظیمات زیر را در آن اعمال نمائید:
Output Channel: Red; Red: +125%
Output Channel: Blue; Blue: +135%
مرحله 6
حالا یک لایه Channel Mixer Adjustment جدید بسازید و Opacity آن را روی 95% تنظیم کنید.
مرحله 7
حالا برای این لایه از تنظیمات زیر استفاده کنید:
Output Channel: Green; Red: +15%; Green: +105%
Output Channel: Red; Red: +115%; Green: +15%
مرحله 8
حالا به مسیر Layer > New Adjustment layer > Exposure بروید و Offset را بر روی +0.300 قرار دهید.
مرحله 9
اکنون لازم است که تعادل رنگ نیم نته را کمی تغییر بدهیم. برای این کار باید به قسمت Layer > New Adjustment Layer > Color Balance بروید.
مرحله 10
تنظیمات زیر را مطابق تصویر، در بخش Color Balance وارد کنید:
Tone: Midtones
Cyan: -15
Magenta: -25
Yellow: -10
Preserve Luminosity: On
مرحله 11
حالا اجازه دهید که آخر لایه را هم به وجود بیاوریم که باعث می شود کانترست تصویر و اثر نهایی تا مقداری افزایش پیدا کند.
بنابراین به Layer > New Adjustment Layer > Black and White بروید.
مرحله 12
Blending Mode را به Overlay تغییر دهید و Opacity را بر روی 15% تنظیم کنید.
پایان کارکار ما تمام شده است. در این درس توانستیم با استفاده از Adjustment Layer و Blending Modes یک افکت مادون قرمز در فتوشاپ ایجاد کنیم.
نتیجه نهایی کار به این شکل است:
امیدوارم از این آموزش لذت برده باشید. اگر شما هم راه و یا حتی اکشن هایی را می شناسید که می توانید با آن افکت مادون قرمز را برای تصاویر در فتوشاپ از بخش نظرات با ما در میان بگذارید.
 
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


افزودن یک لایه نوری زیبا به عکس ها
در این آموزش یاد خواهید گرفت چگونه در فتوشاپ یک لایه نوری ایجاد کرده و آن را بر رو تصویر خود قرار دهید و یک اثر شگفت انگیز ایجاد کنید. سعی ما بر آن بوده است که همه جزئیات را به طور کامل شرح دهیم تا همه بتوانند به خوبی از این آموزش نتیجه بگیرند، حتی اگر اولین بار باشد که برنامه فتوشاپ را باز می کنند! پس با ما همراه باشید.
شروع کارمرحله 1
ابتدا برنامه فتوشاپ را باز کنید.
سپس به تب File بروید و با گزینه Open، یک تصویر دلخواه را که می خواهید نور به آن اضافه کنید، وارد فتوشاپ نمائید.
قبل از این که کار خود را شروع کنیم، لازم است به چند نکته در مورد تصویر خود دقت کنید:
تصویر شما باید در حالت رنگی RGB و وضعیت 8Bits/Channel باشد. برای چک کردن این موارد به Image > Mode بروید.
تصویر شما باید به عنوان لایه پس زمینه یا Background در پنل لایه ها قرار گرفته باشد. اگر چنین نیست به مسیر Layer > New > Background From Layer بروید.
ایجاد انعکاس نور در فتوشاپمرحله 1
در این مرحله می خواهیم یک لایه نوری ایجاد کنیم. برای این کار به مسیر Layer > New > Layer بروید و یک لایه جدید ایجاد کنید.
نام آن را Temp بگذارید.
مرحله 2
کلید D را یکبار فشار دهید تا رنگ های Background و Foreground ریست شوند.
به Edit > Fill بروید. Contents را بر روی Foreground Color و Mode را بر روی Normal و Opacity را بر روی 100% تنظیم کنید.
مرحله 3
به Layer > New Fill Layer > Gradient Fill  بروید تا یک Gradient fill layer جدید بسازید.
نام آن را Gradient_Fill_1 بگذارید و تنظیماتش را مانند تصویر قرار دهید:
رنگ سمت چپ را بر روی e5780b# و رنگ سمت راست را بر روی 000000# قرار دهید.
مرحله 4
بر روی این لایه از تصویر دوبار کلیک کنید.
از ابزار Move استفاده کنید و آن را داخل صفحه اصلی بکشید تا به شکل زیر در بیاید.
مرحله 5
لایه Temp را انتخاب کنید و به Layer > New Fill Layer > Gradient Fill بروید تا یک لایه Gradient Fill جدید بسازید.
نام آن را Gradient_Fill_2 بگذارید و از تنظیمات زیر استفاده کنید:
رنگ سمت چپ را بر روی e5c522# قرار دهید و رنگ سمت راست را بر روی 000000# قرار دهید.
مرحله 6
بر روی این لایه از تصویر نیز دوبار کلیک کنید و از ابزار Move استفاده کنید تا آن را داخل صفحه اصلی بکشید.
مرحله 7
لایه Temp را انتخاب کنید و به Layer > New Fill Layer > Gradient Fill بروید تا یک لایه Gradient fill جدید بسازید.
نام آن را Gradient_Fill_3 بگذارید و از تنظیمات زیر استفاده کنید:

رنگ سمت چپ را بر روی f20c0c# قرار دهید و رنگ سمت راست را بر روی 000000# قرار دهید.
مرحله 8
حالا بر روی این لایه از تصویر دوبار کلیک کنید. از ابزار Move استفاده کنید و آن را داخل صفحه اصلی درگ کنید.
مرحله 9
لایه Gradient_Fill_1 را انتخاب کنید و Blending Mode آن را بر روی Color Dodge قرار دهید.
مرحله 10
کلید Shift را نگه داشته و روی لایه Temp کلیک کنید تا تمامی لایه هایی که بین Temp و Background قرار دارند، انتخاب شوند.
سپس Control+E را نگه دارید و همه لایه ها را ادغام کنید تا تبدیل به یک لایه شوند.
مرحله 11
Blending Mode این لایه را به Screen تغییر دهید.
نام لایه را نیز به Light Leak عوض کنید.
تنظیمات نهاییمرحله اول
در این مرحله، یک سری تنظیمات نهایی را بر روی پروژه اعمال می کنیم.
لایه Background را انتخاب کنید و به Layer > New > Levels بروید تا یک Levels Adjustment Layer بسازید.
نام آن را Photo Brightness قرار دهید.
مرحله 2
دو بار بر روی این لایه کلیک کنید و در  پنل Properties تنظیمات زیر را اعمال کنید:
مرحله 3
لایه Light Leak را انتخاب کنید و به Layer > New Adjustment Layer > Curves بروید و یک Curves adjustment layer جدید بسازید.
نام آن را Color Look قرار دهید.
مرحله 4
دوبار بر روی این لایه کلیک کنید و در پنل Properties تنظیمات زیر را انجام دهید:
نتیجه نهاییتبریک می گویم! توانستید طیف نوری جذابی را بر روی تصویر ایجاد کنید.
نتیجه نهایی به این شکل است:
سخن پایانیامیدوارم این آموزش برای شما کاربردی بوده باشد و بتوانید با استفاده از آن انواع طیف ها و حالت های نوری را ایجاد کنید و جلوه بیشتری به تصاویر خود ببخشید. البته باید به این نکته دقت کنید که از چه رنگ هایی استفاده کنید، برای مثال تصویری که ما در آموزش استفاده کردیم می بایست غروب آفتاب را به رخ می کشید. اگر تصویر شما منظره ای از یک صبح زمستانی است، لازم از ترکیب رنگ های آبی استفاده کنید یا اگر یک منظره بهاری دارید، ترکیب رنگ های سبز مناسب است.
 
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


ایجاد صحنه ای خیالی از سقوط انسان و رعد و برق
 
در این مقاله ی آموزشی می خواهیم به ساخت تصویر خیالی در فتوشاپ بپردازیم که در آن مردی بین زمین و هوا قرار دارد و صاعقه های مختلفی نیز با بدن او در تماسند. برای اجرای مراحل این آموزش به فتوشاپ CS3 یا نسخه های جدیدتر نیاز دارید.
گفتنی است که این آموزش برای افراد مبتدی طراحی نشده است. برای استفاده از آن نیاز به دانش متوسطی از فتوشاپ خواهید داشت.
 
آنچه برای این آموزش لازم دارید:
 
تصویر مرد
آسمان
صحرا
رعد و برق 1
رعد و برق 2
سنگ ها
شروع ساخت صحنه خیالی در فتوشاپمرحله‌ی 1: ابتدا یک سند با مشخصات زیر بسازید:
مرحله‌ی 2: تصویر آسمان را وارد فتوشاپ کرده و با استفاده از ابزار Move و ابزار Free Transform آن را به وسط صفحه بیاورید:
تنظیمات لایه آسمانمرحله‌ی 3: در این قسمت از یک لایه تنظیم (adjustment layer) استفاده می کنیم تا اشباع رنگی (saturation) تصویر را تا حد ممکن پایین بیاوریم. برای این کار به آدرس Layer > New Adjustment Layer > Hue/Saturation بروید:
مرحله‌ی 4: در این مرحله با استفاده از Curves آسمان را تیره تر می کنیم:
حالا با استفاده از یک براش نرم (hardness پایین و رنگ سیاه)، قسمت میانی را از ماسک لایه حذف کنید چرا که نمی خواهیم این قسمت تیره شود:
اضافه کردن صحراهامرحله‌ی 5: تصویر صحرا را به سند خود اضافه کنید و آن را در سمت راست و دقیقا مانند تصویر زیر قرار دهید:
یک ماسک (mask) به این لایه اضافه کنید (دومین دکمه از قسمت پایینی پنل لایه ها در فتوشاپ) و با استفاده از یک براش نرم با رنگ سیاه، قسمت های اضافی از تصویر صحرا را حذف کنید تا به نرمی با آسمان ترکیب شود:
سپس از کل این لایه یک کپی بگیرید (کلیدهای Ctrl + J) و آن را قرینه کنید (آدرس: Edit > Transform > Flip Horizontal).
حالا این قرینه را در سمت دیگر تصویر قرار دهید:
عمق دادن به صحنه و پرداختن به جزئیاتمرحله‌ی 6: در این مرحله از ساخت تصویر خیالی در فتوشاپ برای ایجاد توهم عمق در تصویر باید برای هر لایه از لایه های صحرا که در دو طرف تصویر هستند به آدرس Filter > Blur > Gaussian Blur بروید و مقدار blur را روی 3 پیکسل قرار دهید:
حالا یک براش نرم و سیاه بردارید و با استفاده از لایه ی Mask، افکت blur را از قسمت background یا پس زمینه ی لایه حذف کنید تا فقط در foreground یا پیش زمینه بماند (به تصویر لایه های زیر دقت کنید):
مرحله‌ی 7: یک لایه ی جدید از این لایه بسازید و با استفاده از ابزار Clone (کلید S کیبورد) قسمت هایی از تصویر را clone کنید تا کمی در هم ریختگی و بی نظمی ایجاد شده و دو لایه ی صحرا دقیقا عین هم نباشند:
مرحله‌ی 8: دو لایه ی صحرا را به اضافه ی لایه ی clone شده انتخاب کنید و سپس کلیدهای Ctrl+G را بزنید تا همه را در یک گروه قرار دهید.
سپس حالت گروه یا group mode را از حالت Pass Through روی حالت Normal 100% قرار دهید.
در آخر هم یک لایه ی Curves برای این گروه ایجاد کنید تا قسمت های پس زمینه را روشن تر کنیم:
حالا دوباره با استفاده از یک براش نرم و سیاه رنگ، این افکت را از قسمت های پیش زمینه حذف کنید (یعنی تنها لبه ی انتهایی صحراها روشن تر شود):
مرحله‌ی 9: با استفاده از Curves قسمت های پیشین لایه (ابتدای لایه ی صحرا که به گوشه ها نزدیک تر است) را تاریک تر می کنیم:
از آن جا که این لایه روی تمام تصویر اعمال می شود، باید با یک براش سیاه و نرم، قسمت پس زمینه (لبه های صحرا و آسمان) را دوباره روشن کنیم:
مرحله‌ی 10: در این مرحله باید با استفاده از ابزار Brightness/Contrast مقدار contrast تصویر را بیشتر کنیم:
سپس دوباره با براش نرم و سیاه قسمت، های پسین تصویر (لبه های صحرا و آسمان) را پاک کنید تا تغییر نکنند:
اضافه کردن مرد در حال سقوطمرحله‌ی 11: تصویر مرد را وارد فتوشاپ کرده و آن را دور بُری کنید (فقط مرد را از تصویر خارج کنید) و بین دو صحرا قرار دهید:
از آنجایی که بدن این مرد در حالت ایستاده قرار دارد، برای سقوط آزاد مناسب نیست. با استفاده از ابزار Edit > Puppet Warp دست ها و پاها را کمی از هم باز کنید تا حس سقوط به بیننده القا شود:
مرحله‌ی 12: همانطور که مشخص است مقدار اشباع رنگی مرد بسیار بیشتر از بقیه ی تصویر است. بنابراین با استفاده از ابزار Hue/Saturation (در قسمت Image Adjustments) مقدار saturation را پایین می آوریم:
مرحله‌ی 13: حالا باید با استفاده از Curves مشکل روشن تر بودن مرد را حل کنیم. ابتدا با Curves مرد را تیره تر می کنیم، سپس با یک براش نرم و سیاه، این افکت را از دست ها و بعضی از قسمت های بدنش حذف می کنیم. سعی کنید این حالت سایه تنها روی پشت مرد باقی بماند:
افزودن صاعقه ها به تصویرمرحله‌ی 14: تصویر «صاعقه ی 1» را باز کنید و قسمتی را که دارای صاعقه است، جدا کرده و در سند اصلی خودتان اضافه کنید.
سپس mode تصویر را روی Screen 100% قرار دهید:
 
جدا کردن قسمتی که دارای صاعقه است.
 
با استفاده از یک لایه ی mask و یک براش نرم و سیاه، گوشه های واضح تصویر را حذف کرده و قسمت هایی را که روی لایه های صحرا قرار دارند نیز از بین ببرید:
مرحله‌ی 15: با استفاده از ابزار Lasso (کلید L روی کیبورد) قسمت هایی از صاعقه را انتخاب کرده و گوشه هایش را با یک لایه ی mask حذف کنید. سعی کنید صاعقه را طوری قرار دهید که انگار این مرد آن صاعقه را در دست دارد:
مرحله‌ی 16: یک گروه از این لایه ها بسازید و mode آن ها را روی Screen 100% قرار دهید.
سپس با استفاده از Hue/Saturation مقدار saturation را پایین بیاورید تا با بقیه ی اجزای تصویر هماهنگ باشد:
مرحله ی 17: حالا با استفاده از Levels مقدار contrast را تغییر می دهیم تا صاعقه ها واضح تر شوند:
مرحله‌ی : تصویر «صاعقه ی 2» را باز کنید و با استفاده از Lasso Tool قسمتی از صاعقه هایش را انتخاب کنید.
سپس آن صاعقه را نزدیک پای مرد قرار داده و mode تصویر را روی Screen 100% تنظیم کنید:
حالا با استفاده از براش نرم و سیاه، حاشیه های واضح این لایه را حذف کنید:
مرحله‌ی 19: همان کاری را که برای پای مرد انجام دادیم، دوباره برای دست راست او انجام می دهیم؛ یعنی قسمتی از صاعقه را انتخاب کرده، آن را نزدیک دست راست مرد قرار داده، mode تصویر را روی screen 100% بگذارید و در آخر حاشیه های واضح را با براش نرم و سیاه حذف کنید:
مرحله‌ی 20: این لایه های صاعقه را در یک گروه قرار داده و mode آن ها را روی Screen 100% تنظیم کنید.
سپس با استفاده از ابزار Hue/Saturation مقدار اشباع رنگی (Saturation) را به مقدار لازم پایین بیاورید:
مرحله‌ی 21: با استفاده از Levels، صاعقه ها را نمایان تر می کنیم:
افزودن تکه سنگ هامرحله‌ی 22: تصویر «صخره» را باز کنید و با استفاده از Lasso Tool سنگ های مختلفی را از آن جدا کرده و دور مرد قرار دهید. من از Motion Blur (بین 90 تا 60 درجه ی مثبت و منفی) و Distance (بین 12 تا 25 پیکسل) استفاده کردم که شما می توانید مقادیر دلخواه خودتان را به آن بدهید. این کار باعث القای توهم حرکت به بیننده می شود، انگار که سنگ ها در حال سقوط هستند:
مرحله‌ی 23: سنگ ها را در یک گروه با mode تصویری Normal 100% قرار دهید.
سپس با استفاده از Brightness/Contrast آن ها را کمی روشن تر کنید:
مرحله‌ی 24: برای روشن تر کردن سنگ ها از Levels استفاده کنید:
قسمت هایی را که دوست ندارید تیره شوند، با استفاده از براش نرم و سیاه حذف کنید:
مرحله‌ی 25: یک لایه ی جدید روی این لایه ها بسازید.
براشی سخت (دارای hardness بالا) با اندازه ی 2 تا 5 پیکسل انتخاب کنید تا ذره های ریزی در تصویر ایجاد کنیم. این ذرات مانند خرده سنگ های در حال سقوط خواهند بود:
وهم آلود کردن تصویرمرحله‌ی 26: برای ایجاد حالت نورانی دور مرد، ابتدا یک لایه ی جدید ایجاد کنید.
براشی نرم با رنگ f3f3f3 انتخاب کرده و دور مرد را رنگ کنید.
سپس حالت mode تصویر را روی Soft Light 100% قرار دهید.
اکنون یک لایه ی جدید ایجاد کرده و در قسمت های مورد علاقه ی خود، رنگ های بیشتری اضافه کنید (البته رنگی که نزدیک به f3f3f3 باشد) و mode تصویری را روی Soft Light 100% بگذارید:
یک لایه ی جدید بسازید و با همین براش نقاط نورانی را در کنار بدن مرد ایجاد کنید.
mode آن را روی Dodge 100% تنظیم کنید.
مرحله‌ی 27: در این قسمت باید یک Gradient Map (از قسمت adjustment layer ها) بسازید:
و آن را روی Soft Light 100% تنظیم کنید. نتیجه تصویر زیر خواهد بود:
مرحله‌ی 28: با استفاده از Color Balance رنگ ها را کمی به سلیقه ی خود تغییر می دهیم:
مرحله‌ی 29: دو لایه ی Photo Filter نیز مانند تصویر زیر ایجاد کنید:
مرحله‌ی 30: حالا با استفاده از Levels تصویر را کمی گنگ تر می کنیم تا به حالت خواب و رویا نزدیک تر شود:
روی همین لایه ی mask، از یک براش نرم و سیاه (با opacity برابر با 10 تا 30 درصد) استفاده می کنیم تا افکت ایجاد شده را روی مرد و برخی قسمت های صحرا و آسمان کمتر کنیم:
نتیجه ساخت تصویر خیالی در فتوشاپتصویر نهایی ما به شکل زیر در می آید:
امیدوارم از آموزش ساخت تصویر خیالی در فتوشاپ لذت برده باشید.
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


مرور ۵ دقیقه ای لایه های تنظیم (Adjustment Layers) در فتوشاپ!
ایه‌های تنظیم یا Adjustment Layer در فتوشاپ ، نوع خاصی از لایه ها می باشند که تغییراتی را در لایه های زیرین خود ایجاد می کنند، بدون آنکه خودِ آن لایه دچار تغییر شود! برای مثال شما می توانید با استفاده از Adjustment Layers روشنایی و کنتراست یک عکس را افزایش دهید، بدون این که تصویر اصلی تغییری بکند. قطعا این لایه ها از امکانات اصلی فتوشاپ هستند که در این مقاله بیشتر به آن ها می پردازیم.
پیش از مطالعه این مقاله بهتر است که آشنایی مختصری با پنل لایه ها و ماسک ها در فتوشاپ داشته باشید تا دچار سردرگمی نشوید.
ویرایش غیرمخربیکی از مهم ترین تکنیک هایی که هر فرد باید در فتوشاپ یاد بگیرد، ویرایش غیرمخرب یا همان Non-Destructive Editing است.
ویرایش غیر مخرب یا Non-Destructive Editing به این معنی است که در حین ایجاد تغییرات و ویراش تصویر، هیچ گونه آسیبی به منبع اصلی (تصویر اصلی) وارد نشود.
نکته ای که در این زمینه بسیار مهم است این است که شما هرگز نباید در فتوشاپ عملی را انجام دهید که باعث دستکاری پیکسل های تصویر اصلی شود. برای این کار توصیه می شود که از ابزارها و تکنیک های غیرمخرب استفاده شود که Adjustment Layers یکی از همین ابزارها می باشد.
برای مثال اگر شما بدون استفاده از Adjustment Layers یک تصویر را به شکل سیاه و سفید در بیاورید، تمامی تنظیمات و ترکیبات رنگ تصویر اصلی بهم می خورد و اگر این تصویر را ذخیره کنید، دیگر هرگز نمی توانید آن را به رنگ قبلی خود باز گردانید. ولی اگر به روش Adjustment Layers مرحله به مرحله عکس را سیاه و سفید کنید، حتی پس از ذخیره نیز می توانید عکس را به حالت اولیه خود باز گردانید. بنابراین:
در صورت ویرایش تصویر با Adjustment Layers یا لایه های تنظیم، امکان بازگردانی تصویر به حالت اولیه وجود دارد.
پنل Adjustmentsبرای استفاده از Adjustment Layers ابتدا باید پنل آن را در فتوشاپ خود باز کنید. بدین منظور به منوی Windows مراجعه کرده و گزینه Adjustments را انتخاب نمائید.
در پنل Adjustments می توانید با توجه به نیاز خود یکی از انواع لایه های تنظیم را انتخاب کنید. توجه داشته باشید که هر کدام از لایه های تنظیم، کاربرد ویژه خود را دارند.
لازم است بدانید که هر لایه تنظیم با یک Layer Mask همراه است.
همانطور که در تصویر بالا مشاهده می کنید، لایه های تنظیم یا Adjustment Layer در فتوشاپ ، 16 نوع مختلف هستند که هر کدام تنظیمات ویژه خود را دارند. ما در این مقاله، به 5 مورد از اساسی ترین و پرکاربردترین لایه های تنظیم می پردازیم.
لایه تنظیم Brightness/Contrast
لایه Brightness/Contrast ساده ترین لایه است که برای تنظیمات نوردهی و کنتراست یک تصویر استفاده می شود.
برای افزایش نوردهی کافی است که لغزنده Brightness را به سمت راست بکشید. همچنین با کشیدن لغزنده به سمت چپ و منفی شدن Brightness، همه چیز در تصویر به سمت تاریکی می رود.
تنظیمات مربوط به Contrast نیز دقیقا به همین شکل است. با حرکت لغزنده به سمت راست و چپ، کنتراست، زیاد و کم می شود.
لایه تنظیم Levels
لایه Levels نیز راه دیگری برای تنظیم نوردهی و کنتراست است ولی نکته ای که وجود دارد این است که در این جا با یک هیستوگرام سر و کار داریم که تمام جزئیات کار را برای شما به نمایش در می آورد. عملکرد آن هم بسیار ساده است و همانند لایه قبلی، با حرکت دادن لغزنده می توانید همه چیز را روشن و یا تاریک کنید. البته یک لغزنده خاکستری نیز در وسط نمودار قرار دارد که حد وسط و رنگ طبیعی را نیز معلوم می کند.
گفتنی است در Levels چندین بخش پیشرفته تر برای تنظیم نوردهی وجود دارد ولی استفاده از آن ها را به تازه کارها در فتوشاپ توصیه نمی کنیم.
اگر می خواهید کار با پنل Levels و هیستوگرام را به صورت کامل آموزش ببینید، این مقاله را بخوانید.
لایه تنظیم Curves
لایه تنظیم کننده Curves، یکی از پیشرفته ترین لایه ها در زمینه نوردهی و کنتراست می باشد که بیشتر افراد حرفه ای از آن استفاده می کنند و استفاده از آن به افراد مبتدی اصلا توصیه نمی شود، ولی از آن جهت که در اکثر آموزش های فتوشاپ از آن استفاده می شود بهتر است به توضیح مختصری درباره این لایه نیز بپردازیم.
خط منحنی که بر روی هیستوگرام رسم شده است، نشان دهنده تُن و طیف های نوری تصویر است. با تغییر شیب نمودارها، به راحتی مشخص می شود که تغییرات هر طیف رنگی چگونه بر تصویر تاثیرگذار هستند.
برای اضافه کردن یک نقطه به شیب کافی است روی شیب کلیک کنید و آن را در جهت مورد نظر خود بکشید. شما می توانید نقاط متعددی را به این نمودار بیفزائید و آن نقاط را جابجا کنید. با بالا و پائین کشیدن این نقاط، کنتراست تصویر تغییر می کند.
باز هم تکرار می کنم که استفاده از این ابزار در پروژه های حرفه ای استفاده می شود و نیاز به مهارت دارد. در آموزش های بعدی بیشتر به این لایه تنظیمی خواهیم پرداخت.
تنظیمات Hue/Saturation
لایه Hue/Saturation یک راه بسیار ساده برای تنظیم رنگ در تصویر است. همان طور که می دانید هر رنگ دارای اشباع و مقدار نور مشخصی می باشد که با استفاده از تنظیمات این لایه می توانید کنترل کاملی بر آن ها داشته باشید.
به طور پیش فرض شما می توانید تمام رنگ ها را به صورت کلی ویرایش کنید، همچنین می توانید با استفاده از نوار کشویی و استفاده از گزینه Master، هر کدام از شش رنگ اولیه (قرمز، زرد، آبی، سبز، ارغوانی، فیروزه ای) را انتخاب کنید تا به طور خودکار تنظیم شوند.
لایه تنظیم Black & White
این لایه یکی از بهترین ابزارها در زمینه تبدیل عکس به تصویر سیاه و سفید است و دارای شش لغزنده می باشد که هر کدام مخصوص یکی از شش رنگ اصلی هستند. با کشیدن آن ها به سمت راست می توانیم به سمت روشنی برویم و حرکت به سمت چپ باعث تاریکی می شود.
نتیجه گیریAdjustment Layer در فتوشاپ یکی از بهترین ابزارها برای تغییر و تنظیم رنگ ها است و مهم ترین مزیتش این است که پیکسل تصویر اصلی را تغییر نمی دهد. در نتیجه شما همیشه فرصت جبران دارید! برخی از لایه ها مانند Curves ممکن است کمی پیچیده به نظر برسند ولی ارزش یادگیری دارند زیرا در اغلب پروژه ها حتما باید از آن استفاده شود و تغییرات مهمی را ایجاد می کنند.
 
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


ایجاد یک افکت شیک برای عکس های عروسی
همانطور که می دانید فتوشاپ بزرگترین و معروف ترین نرم افزار ویرایش عکس در جهان است که برای این کار، امکانات و ابزارهای خارق العاده ای دارد. یکی از مهم ترین و محبوب ترین موضوعات در این حوزه، ویرایش و ایجاد افکت عکس عروسی در فتوشاپ است.
در آموزش امروز به این خواهیم پرداخت که چگونه یک افکت مناسب و جذاب برای تصاویر عروسی ایجاد کنیم. مراحل این آموزش در قالب یک اکشن ضبط و ذخیره می شوند و شما می توانید در آینده، تنها با فشردن دکمه Play در پنجره اکشن فتوشاپ، افکت آموزش داده شده در این درس را بر روی هر عکس دلخواهی اعمال نمائید.
آنچه برای این آموزش لازم دارید:
 
عکس یک زوج
مرحله اول
ابتدا اطمینان حاصل کنید که تصویر شما در پنل لایه ها، لایه ای از نوع Background است، اگر این گونه نیست به مسیر Layer > New > Background From Layer بروید.
مرحله دوم
با استفاده از یکی از ابزارهای انتخاب، محدوده ی این دو زوج را مشخص می کنیم. سعی کنید تا حد ممکن در این مرحله دقیق باشید و جزئیات را کاملا رعایت کنید. من برای این مرحله از ابزار (Pen (P استفاده می کنم و همچنین از پنل Refine Edge (مسیر Select > Refine Edge) برای نرم و منعطف کردن لبه ها، بهره می گیرم.
مرحله سوم
یک لایه جدید بسازید و آن را با استفاده از ابزار (Paint Bucket (G با رنگ مشکی پر کنید.
مرحله چهارم
یک لایه جدید زیر این لایه ایجاد کنید.
حالا با استفاده از ابزار Gradient یک طیف رنگی سیاه و سفید در آن ایجاد کنید (رنگ سفید نشان دهنده قسمت هایی است که در ادامه آموزش، افکت Blur را به خود می گیرند و رنگ سیاه نشان دهنده قسمت های ثابت و بدون افکت است).
مرحله پنجم
در یک قسمت دلخواه از این لایه کلیک کنید تا از حالت انتخاب خارج شود.
یک اکشن جدید بسازید و برای آن نامی دلخواه قرار دهید. سپس بر روی آی Record کلیک کنید تا عملیات ضبط اکشن آغاز شود.
مرحله ششم
به سربرگ Channel بروید. بر روی هر جایی از پنل Channel کلیک راست کنید و گزینه Duplicate Channel را انتخاب نمائید.
نام آن را Mask قرار دهید.
دوباره RGB را انتخاب کنید و به سربرگ Layer بازگردید.
مرحله هفتم
هر دو لایه Mask را به حالت پنهان در بیاورید.
یک کپی از لایه Background (با استفاده از کلید ترکیبی Ctrl+J) ایجاد کنید.
به مسیر Filter > Blur > Lens Blur بروید.
در قسمت Depth Map با استفاده از نوار کشویی، مقدار Source را بر روی Mask قرار دهید. توجه داشته باشید که تنظیمات نوار Radius مربوط به ایجاد یک حالت تاری (Blur) می باشد و تنظیمات مربوط به نوار Brightness و Threshold باعث ایجاد افکت بوکه (Bokeh) می شود.
مرحله هشتم
اکنون می خواهیم با درآمیختن چندین لایه تنظیم، یک افکت ایجاد کنیم.
ابتدا یک لایه تنظیم از نوع Gradient Map  اضافه می کنیم.
همانطور که مشاهده می کنید، در سمت چپ تصویر، رنگ های تیره و در سمت راست رنگ های روشن قرار دارند. می توانید یک طیف رنگ دلخواه را به این گرادینت بیفزائید و مقدار روشنایی نواحی مختلف عکس را با اضافه کردن رنگ های مختلف تنظیم کنید. همچنین می توانید با اضافه کردن رنگ های تیره به نواحی روشن عکس، کنتراست تصویر را پائین بیاورید و به یک افکت مدرن و جذاب برسید.
در انتخاب رنگ های این مرحله آزاد هستید ولی اگر می خواهید نتیجه نهایی شما مانند من شود، از این مشخصات برای رنگ های این مرحله استفاده کنید:
#3b1a5c, Location 0%
#698646l ,Location34%
#59edfa, Location 100%
مرحله نهم
مقدار Opacity را کاهش دهید.
مرحله دهم
لایه تنظیم Curves را اضافه کنید.
Channel را بر روی رنگ سبز (Green) قرار دهید و منحنی را کمی به سمت پایین بیاورید تا سبزی بیشتری حاصل شود.
مرحله یازدهم
لایه تنظیم Levels را نیز اضافه کنید.
نشانگر نوار Output را به سمت چپ ببرید تا قسمت های تاریک، روشن تر بشود.
مرحله دوازدهم
بر روی لایه دوبار کلیک کنید تا پنل Blending Option باز شود.
نوار قسمت Blend If را به سمت چپ حرکت دهید تا افکت از قسمت های تیره تصویر حذف شود. با استفاده از کلید Alt نشانگر را تقسیم کنید تا تاثیرگذاری بیشتری داشته باشد.
مرحله سیزدهم
تنظیمات می توانند تنها برای بخش خاصی از تصویر اعمال شوند. به سربرگ Channel بروید، کلید Ctrl را نگه دارید و بر روی Mask کلیک کنید.
به سربرگ Layer برگردید. یک Solid Color اضافه کنید و رنگ آن را آبی قرار دهید. (548cdf#)
مرحله چهاردهم
Blend Mode را بر روی حالت Divide قرار دهید. مقدار Opacity را نیز کاهش دهید تا افکت را نرم تر و ملایم تر کنیم.
مرحله پانزدهم
در نهایت اجازه دهید قسمت های روشن را کمی روشن تر کنیم.
لایه تنظیم Brightness/Contrast را اضافه کنید.
با جابجایی لغزنده های هر دو بخش، سعی کنید تصویر را روشن تر کنید.
مرحله شانزدهم
بر روی لایه دوبار کلیک کنید.
در پنجره Blending Options مقدار Blend If افزایش دهید تا یک افکت روشن تر ایجاد کنید.
اگر روشنایی تصویر مورد نظرتان همچنان کم است، مقدار Opacity را کاهش دهید.
مرحله هفدهم
کار تقریبا تمام شده ولی قصد داریم کمی تصویر را بهبود ببخشیم. مانند آنچه که در مراحل اولیه انجام دادید، محدوده زوج را به حالت انتخاب در بیاورید.
با استفاده از کلید ترکیبی Ctrl+J یک کپی از لایه Background تهیه کنید و آن را بالای تمامی لایه ها قرار دهید.
به مسیر Filter > Other > High Pass بروید. مقدار Radius را به گونه ای تنظیم کنید که در تصویر پیش نمایش، خطوط را بدون درخشندگی مشاهده کنید.
مرحله هجدهم
Blend Mode این لایه را بر روی Linear Light قرار دهید و اگر این می خواهید این تنظیمات بهتر دیده شوند، یک کپی از این لایه تهیه کنید.
مرحله نوزدهم
مراحل تولید افکت عکس عروسی در فتوشاپ به پایان رسیده است و باید مراحل ضبط اکشن را متوقف کنیم. بدین منظور کافیست روی آی Stop Recording کلیک کنید.
حالا شما می توانید این اکشن را برای سایر تصاویر خود نیز استفاده کنید، فقط کافیست لایه ماسک را که آموزش دادیم، ایجاد و سپس اکشن را Play کنید.
 آموزش کامل روتوش و آرایش چهره در فتوشاپ
امیدواریم از آموزش ایجاد افکت عکس عروسی در فتوشاپ استفاده کافی را برده باشید. در ادامه، برخی از تصاویری که با استفاده از این اکشن، ویرایش شده اند مشاهده می کنید:
 
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


Blur یا تار کردن پس زمینه یک عکس در فتوشاپ
یکی از بهترین تکنیک های ویرایش عکس، تار کردن پس زمینه در فتوشاپ می باشد که باعث می شود توجه بیننده به اشیا درون پیش زمینه بیشتر جلب شود. اگر تصویر شما دارای عمق زیاد است، می توانید با استفاده از فتوشاپ پس زمینه را به حالت تار و مبهم در بیاورید.
امروز در این آموزش قصد داریم به این بپردازیم که چگونه پس زمینه یک تصویر را در فتوشاپ مبهم و تار کنید. مراحل آموزش در قالب یک اکشن فتوشاپ ضبط و ذخیره می شوند و شما می توانید بعدا برای هر تصویر دلخواه دیگری از این اکشن استفاده و تنها با یک کلیک، پس زمینه آن را تار کنید.
آنچه برای این آموزش لازم دارید:
 
تصویر مردی در خیابان
مرحله اول
ابتدا تصویر مورد نظر خود را در فتوشاپ باز کنید.
به دلخواه خود با یکی از ابزارهای انتخاب، قسمتی که می خواهید Blur نشود را به حالت انتخاب در بیاورید. من در اینجا از ابزار Magnetic Lasso با گزینه Refine Edge استفاده می کنم. دقت کنید که همین مرحله ابتدایی، یکی از حساس ترین بخش های این آموزش است و مهم است که شما انتخاب دقیقی از سوژه مورد نظر انجام دهید.
مرحله دوم
یک لایه جدید ایجاد کنید و این لایه را با استفاده از ابزار Paint Bucket (کلید میانبر G) با رنگ دلخواه خود رنگ کنید.
مرحله سوم
یک لایه زیر این لایه ایجاد کنید.
با استفاده از ابزار Gradient یک طیف رنگی سیاه و سفید ایجاد کنید (مطابق تصویر زیر). قسمت سیاه، نشانگر بخش هایی است که قرار است ثابت بمانند و به حالت Blur در نیایند. قسمت سفید هم مناطقی را مشخص می کنید که قرار است به حالت Blur در بیایند. ناحیه خاکستری نیز بیانگر مرحله انتقالی بین حالت Blur و منطقه پیش زمینه خواهد بود.
دقت کنید که در تنظیمات این بخش باید زاویه و موقعیت اثر خود را مطابق تصویر هماهنگ کنید.
در نهایت نام این لایه را Mask 2 قرار دهید.
مرحله چهارم
جایی خارج از این لایه کلیک کنید.
سپس پنل Action را از مسیر Windows > Actions باز کنید و بر روی آیی که به شکل کاغذ سفید است، کلیک کنید تا یک اکشن جدید ایجاد کنید. برای آن نام دلخواهی قرار دهید و روی دکمه Record کلیک کنید. از این پس، ضبط اکشن شما آغاز شده است و تمامی اعمال و رفتار شما در فتوشاپ ضبط می شود.
مرحله پنجم
به مسیر Image > Image Size و مقدار Width را بر روی 5000 قرار دهید. این کار باعث می شود که نتیجه تقریبا یکسانی در تمامی عکس ها به دست آوریم.
مرحله ششم
کل بوم طراحی را با استفاده از کلید ترکیبی Ctrl+A انتخاب کنید و سپس به مسیر Edit > Copy Merged بروید (کلید ترکیبی Ctrl+Shift+C).
به سربرگ Channels بروید و با استفاده از آیی که در تصویر مشخص شده است، یک Channel ایجاد کنید و آن را در محل مشخص شده Paste کنید.
به RGB Channel برگردید و به سربرگ Layer بروید. (نام لایه ای که من ایجاد کردم Alpha 1 است)
مرحله هفتم
هر دو لایه ماسک را به حالت پنهان (Hide) در بیاورید.
لایه Background را انتخاب کنید و سپس با استفاده کلید ترکیبی Ctrl+J یک کپی از آن ایجاد کنید.
سپس به مسیر Filter > Blur > Lens Blur بروید. حالا یک پنجره جدید باز خواهد شد. با استفاده از نوار کشویی گزینه Source را بر روی Alpha 1 قرار دهید. شاید خیلی ها گزینه Alpha 1 را مشاهده نکنند، در حقیقت این بخش نام همان لایه جدیدی می باشد که در قسمت channel ایجاد کردیم، پس اگر بخواهم بهتر بگویم مقدار Source را بر روی نام لایه Channel که در  مرحله قبل ایجاد کردید قرار دهید.
مرحله هشتم
پس زمینه به حالت blur درآمده است اما سوژه اصلی ما در پیش زمینه مقداری غیرطبیعی به نظر می رسد. برای رفع این مشکل کلید Ctrl را پایین نگه دارید و همزمان بر روی لایه Mask 1 کلیک کنید تا یک موقعیت خارج از آن به حالت انتخاب درآید. سپس به مسیر Select > Modify > Expand و مقدار Expand by را بر روی 10px تنظیم کنید.
مرحله نهم
لایه کپی Background را انتخاب کنید و برای ایجاد یک کپی دیگه از این لایه، به مسیر Layer > New > Layer via Copy بروید.
سپس به Filter > Blur > Gaussian Blur مراجعه کنید. در این صفحه مقدار Radius را بالا و پایین کنید و همزمان به لبه های سوژه توجه کنید، ما در این مرحله می خواهیم لبه های سوژه با پس زمینه ادغام شوند.
مرحله دهم
دوباره کلید Ctrl را نگه دارید تا یک موقعیت انتخابی از این لایه ایجاد کنید. بعد به مسیر Select > Modify > Contract بروید و مقدار Contract by را بر روی 15 px قرار دهید. اگر کلید Delete را فشار دهید، بیشتر قسمت های Blur را که در اطراف سوژه اضافی بود، حذف می کنید و مخلوطی از آن با پس زمینه ایجاد می شود.
مرحله یازدهم
یک مشکل دیگر هم وجود دارد. این لبه نرمی که ما در مرحله قبل ایجاد کردیم، بر روی تمامی بدن سوژه ایجاد شده است در حالی که نباید چنین باشد و فقط قسمت های خارجی بدن باید به این حالت در بیایند.
برای حل این مشکل لایه Mask 2 را انتخاب کنید و به سربرگ Channel بروید. از کلید Ctrl استفاده کنید تا یک موقعیت انتخابی خارج از RGB Channel ایجاد کنید. سپس به سربرگ Layer برگردید و Mask را به حالت پنهان در بیاورید. یک Layer Mask جدید به Layer 1 اضافه کنید.
مرحله دوازدهم
در نهایت بر روی آی مشخص شده در تصویر کلیک کنید تا ضبط اکشن متوقف شود.
مرحله سیزدهم
اگر می خواهید این اکشن را بر روی سایر تصاویر اعمال کنید، کافیست پس از این که تصویر مورد نظر را در محیط فتوشاپ باز کردید، همه مراحل این آموزش را تا قبل از ضبط اکشن انجام دهید و سپس بر روی Play کلیک کنید تا تمامی تغییرات بر روی تصویر شما اعمال شود.
امیدوارم آموزش تار کردن پس زمینه در فتوشاپ برای شما مفید بوده باشد. اگر در فراگیری این آموزش مشکلی داشتید یا هرگونه سوالی برای شما پیش آمد از بخش نظرات با ما در میان بگذارید.
 یجاد افکت موشن بلور (Motion Blur) در فتوشاپ
 
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


تغییر فونت پیش فرض در فتوشاپ و ایلوستریتور
فتوشاپ و ایلوستریتور دو تا از بهترین نرم افزارها در زمینه گرافیک و طراحی می باشند که هر کدام کارکرد های خاص خود را دارند. درست است که این نرم افزارها همچون Word برای تایپ و نگارش طراحی نشده اند ولی به هرحال اغلب اوقات نیاز به استفاده از ابزار تایپ نیز در این نرم افزارها داریم و وجود آن برای این دو غول گرافیکی بسیار حیاتی است. اگر از فونت پیش فرض این دو برنامه راضی نیستید و یا از آن خسته شده اید، در این آموزش قصد داریم روند تغییر فونت پیش فرض در فتوشاپ و ایلوستریتور را بررسی کنیم و به این بپردازیم که چگونه می توانیم فونت مورد نظر خودمان را به عنوان فونت پیش فرض در این دو برنامه تنظیم کنیم. همراه روکسوپلاس باشید.
تغییر فونت پیش فرض در فتوشاپبرای تغییر فونت پیش فرض در فتوشاپ ابتدا برنامه فتوشاپ را باز کنید.
اگر در حال کار با فتوشاپ هستید، تمامی پروژه های فعال خود را ببنید و در حال اجرای هیچ کاری با فتوشاپ نباشید زیرا خالی بودن فتوشاپ برای تعیین فونت پیش فرض بسیار مهم است.
ابتدا از نوار ابزار فتوشاپ در سمت چپ، ابزار Text را انتخاب کنید. حالا در قسمت بالای نرم افزار، نواری برای تغییر ویژگی های نوشته های شما  ظاهر می شود.
در این نوار، قسمتی مربوط به تغییر فونت است.
در این قسمت، فونت مورد نظر خود را که می خواهید آن را به عنوان پیش فرض تنظیم کنید، انتخاب کنید. همچنین می توانید سایر تنظیمات مانند اندازه و سبک و … را در نوار تنظیمات، انجام دهید.
به همین راحتی! از این به بعد فونت و ویژگی های نوشته های تمامی اسناد و پنجره هایی که در فتوشاپ باز می کنید، به طور پیش فرض همین می باشد که انتخاب کرده اید.
نکته مهمی که در انتخاب فونت پیش فرض فتوشاپ وجود دارد و باید به آن دقت کرد این است که در ابتدا هیچ پنجره و سندی در فتوشاپ باز نباشد و برنامه کاملا خالی باشد.
تغییر فونت پیش فرض در ایلوستریتورمراحل تغییر فونت پیش فرض در ایلوستریتور کمی پیچیده تر است.
ابتدا برنامه را باز کنید و سپس یک سند ذخیره شده را از مسیر File > Open باز کنید.
حالا به مسیر زیر در ویندوز بروید:
\Users\[your Windows username]\AppData\Roaming\Adobe\Adobe Illustrator [version] Settings\[your region edition]\x64\New Document Profiles
اگر از مک استفاده می کنید به این مسیر بروید:
/Users/[your macOS username]/Library/Preferences/Adobe Illustrator [version] Settings/[your region edition]/Adobe Illustrator Prefs
توجه داشته باشید که این مسیرها بر اساس سیستم عامل، زبان و نسخه Adobe شما تغییر خواهد کرد. برای مثال اگر یک کاربر با نام مایکل از نسخه CS6 به زبان انگلیسی استفاده کند، برای او مسیر به شکل زیر خواهد بود:
\Users\Michael\ AppData\Roaming\Adobe\Adobe Illustrator CS6 Settings\en_US\x64\New Document Profiles
در این پوشه فایلی به نام Basic RBG را انتخاب کنید.
با باز کردن مشخصات پیش فرض به مسیر Windows> Type> Character Style بروید.
در صفحه جدید که باز می شود بر روی [Normal Character Style] دوبار کلیک کنید.
در پنجره جدید بر روی Basic Character Style در سمت چپ کلیک کنید. در اینجا می توانید فونت مورد نظر خود، سایز و سبک و سایر تنظیمات منحصر به فرد را انتخاب کنید.
در نهایت برای تکمیل فرانید بر رو OK کلیک کنید.
حالا هر سند جدیدی را در ایلوستریتور باز کنید، فونت انتخابی شما به صورت پیش فرض برای آن اعمال می شود. البته باید توجه داشت که اگر از چندین پروفایل در برنامه ایلوستریتور  استفاده می کنید، باید این تنظیمات و روش را برای تک تک آن ها اعمال کنید.
 
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


آموزش طراحی لوگوی حرف A در فتوشاپ Create a Logo for Letter A
سلام خدمت مخاطبان عزیز. در این مقاله قصد داریم به آموزش طراحی لوگو با فتوشاپ بپردازیم. امیدوارم مورد رضایت شما عزیزان قرار بگیرد.
شروع کاربرای شروع کار ابتدا یک سند در ابعاد 900 در 700 پیکسل (با رزولوشن 300 پیکسل بر اینچ) می سازیم.
ترسیم شکل اولیه لوگوبعد از ایجاد سند، اولین کاری که باید انجام بدهیم انتخاب ابزار Rounded Rectangle می باشد.
در نوار تنظیمات مربوط به ابزار Rounded Rectangle واقع در بالای نرم افزار، مقدار Stroke را صفر و در واقع غیرفعال می کنیم. از قسمت Fill یک رنگ دلخواه انتخاب می کنیم (ما در این آموزش از کد رنگ #959595 استفاده می کنیم).
بصورتی که در شکل زیر مشاهده می کنید، یک مستطیل با گوشه های گرد رسم می کنیم و از قسمت پنل Properties مربوط به ابزار Rounded Rectangle، مقدار زوایه ها را تغییر می دهیم.
نکته: اگر پنجره Properties را در فتوشاپ خود مشاهده نمی کنید، می توانید از منوی Windows آن را ظاهر کنید.
بسیار خب! در این مرحله مستطیلی را که ابتدا و انتهای آن بصورت یک نیم دایره است، می چرخانیم تا بصورتی که در شکل زیر می بینید در بیایید.
نام لایه Rounded Rectangle 1 را به یک نام دلخواه تغییر می دهیم. به عنوان مثال نام این لایه را حرف (A) در نظر می گیریم.
در حالی که لایه A را انتخاب کرده ایم، با زدن کلید میانبر Ctrl+J از لایه A کپی می گیریم و نام لایه جدید را به حرف B تغییر می دهیم.
در این مرحله در حالتی که لایه B در حالت انتخاب است، بر روی شکل راست کلیک می کنیم و گزینه ی Flip Horizontal را انتخاب می کنیم.
مشاهده می کنید که:
رنگ این مستطیل را به یک رنگ دلخواه تغییر می دهیم و آن را به سمت راست (بصورت متقارن و منطبق بر روی مستطیل اول) می کشیم.
در این مرحله، لایه B را به زیر لایه A انتقال می دهیم تا مستطیل دوم در زیر مستطیل اول قرار بگیرد.
در ادامه در بالای لایه A یک لایه جدید می سازیم و نام آن را به حرف C تغییر می دهیم.
ابزار Polygonal Lasso را انتخاب می کنیم.
با استفاده از Polygonal Lasso یک مسیر به صورت زیر می کشیم (توجه داشته باشید لایه C در حالت انتخاب باشد).
سپس با استفاده از ابزار Eyedropper از رنگ مستطیل اول A نمونه برداری می کنیم و ناحیه انتخاب شده را با زدن کلید میانبر Alt+Backspace به رنگ نمونه برداری شده در می آوریم.
لایه B را به حالت انتخاب (Select) در می آوریم و با استفاده از کلید میانبر Ctrl+Shift+I حالت انتخابی را مع (Inverse) می کنیم.
لایه C را انتخاب می کنیم و با استفاده از ابزار پاکن نواحی اضافی را به صورتی که در شکل زیر مشاهده می کنید، پاک می کنیم.
در نهایت با زدن کلید میانبر Ctrl+D ناحیه انتخابی را از حالت (Select) خارج می کنیم.
در ادامه لایه C و A را با نگه داشتن کلید Ctrl بصورت همزمان انتخاب می کنیم و با زدن کلید میانبر Ctrl+E با یکدیگر ادغام می کنیم.
مجددا نام لایه ترکیب شده را به حرف A تغییر می دهیم.
رنگ آمیزی لوگواز این مرحله به بعد باید شروع به رنگ آمیزی طرح اولیه لوگویی که ساخته ایم، کنیم.
برای اینکار ابتدا بر روی لایه A دو بار کلیک می کنیم تا پنجره استایل لایه ها (Layer Style)  باز شود.
از این پنجره به قسمت Gradient Overlay می رویم.
در ادامه، از قسمت Gradient طیف رنگ را مطابق کد رنگ هایی که در تصویر زیر نوشته شده است، انتخاب می کنیم.
سپس با کلیک بر روی OK، به پنجره تنظیمات Gradient Overlay بر می گردیم، زاویه (Angle) را به 40 درجه تغییر می دهیم و بر روی Ok کلیک می کنیم. (توجه داشته باشید استایل بر روی حالت Linear باشد، Blend Mode بر روی حالت نرمال و شفافیت (Opacity) و مقیاس (Scale) هر دو بر روی 100 قرار گرفته باشند)
برای لایه B هم به همین ترتیب عمل می کنیم. کد رنگ هایی را که برای این قسمت انتخاب کردیم، در شکل زیر مشاهده می کنید:
ایجاد سایهبرای تکمیل مراحل طراحی لوگو با فتوشاپ باید یک حالت سایه در زیر شکل اول (لایه A) و بر روی شکل دوم (لایه B) ایجاد کنیم.
برای این کار یک لایه جدید بالای لایه (B) می سازیم و یک نام به دلخواه برای آن می نویسم (مثلا ما نامش را به Shadow  تغییر داده ایم).
سپس لایه A را به حالت انتخاب (Select) در می آوریم و با زدن کلید میانبر Ctrl + Shift + I محدوده انتخاب شده را مع (Inverse) می کنیم.
بر روی  لایه Shadow کلیک می کنیم و در حالتی که این لایه انتخاب شده است، با استفاده از ابزار براش (Brush Tool) با Hardness: 0% و Opacity: 20% و رنگ مشکی به شکل زیر شروع به سایه زدن می کنیم:
همانطور که مشاهده می کنید علاوه بر لایه B در نواحی اطراف آن هم سایه ایجاد شده است. برای پاک کردن قسمت های اضافی به مانند قبل لایه B را به حالت انتخاب و سپس Inverse درمی آوریم و در حالی که لایه Shadow را انتخاب کرده ایم، با زدن کلید Delete کیبورد، نواحی اضافی را به راحتی پاک می کنیم.
ایجاد حالت شیشه ای روی لوگومی خواهیم در این قسمت یک حالت شیشه ای بر روی لوگو ایجاد کنیم. بدین منظور در ابتدا یک لایه بالای لایه A می سازیم و نام آن را به C تغییر می دهیم،.
سپس با استفاده از ابزار Pen چنین مسیری رسم می کنیم:
بعد، با زدن کلید میانبر Ctrl + Enter ناحیه رسم شده را به حالت انتخاب (Select) در می آوریم و با رنگ سفید (با زدن کلید میانبر Alt + Backspace) پر می کنیم. توجه کنید که لبه های کار را می توان با خود ابزار Pen یا ابزار پاکن تمیزتر کرد.
در ادامه، میزان شفافیت لایه C را به 40 درصد کاهش می دهیم. با ایجاد لایه ماسک بر روی لایه C و با استفاده از ابزار Gradient با طیف رنگی سیاه و سفید چنین حالتی را ایجاد می کنیم:
مراحل پایانی طراحی لوگو با فتوشاپتمام لایه ها بجز لایه Background را انتخاب می کنیم و با فشردن کلیدهای Ctrl + G در یک گروه قرار می دهیم.
نام آن را به Logo تغییر می دهیم.
لایه لوگو را انتخاب می کنیم و با استفاده از Transform اندازه لوگو را کوچکتر می کنیم.
مطابق شکل زیر یک لایه جدید زیر لایه لوگو می سازیم با نام D.
با استفاده از ابزار براش با Hardness: 0% و Opacity: 100% و رنگ مشکی و اندازه بزرگ، چنین دایره ی محوی در زیر لوگو رسم می کنیم:
سپس با تغییر شکل، اندازه و شفافیت آن، سایه ای را زیر لوگو ایجاد می کنیم.
محل نوشتن نام لوگو را در زیر سایه ایجاد شده، مشخص می کنیم.
امیدوارم از این آموزش طراحی لوگو با فتوشاپ استفاده کافی را برده باشید. در قسمت های دیگر با آموزش های متنوع تری از طراحی لوگو با شما خواهیم بود.
 کورل یا ایلوستریتور؟ برای طراحی لوگو کدام نرم‌افزار بهتر است؟
 
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


۸ نکته طلایی برای طراحی بهتر یک رابط کاربری
 
طراحان رابط کاربری (UI Designers) باید توانایی حل مسئله داشته باشند و بتوانند دائما پیشنهادها و راهکارهایی ارائه کنند که رابط کاربری سایت ها یا اپلیکیشن هایی را که روی آن ها کار می کنند، ارتقا دهند.
همیشه قوانینی وجود دارد که می توانند به بهبود یک پروژه کمک کنند. هر چند این قوانین در زمان ها و مکان های مختلف تغییر می کنند و برای استفاده از آن ها باید شرایط پروژه را در نظر گرفت، اما به طور کلی در نظر داشتن آنها حین انجام یک پروژه می تواند کمک مهمی در مسیر بهبود طرح محسوب شوند.
 
تصویری از Loren Terveen و Ben Shneiderman در دانشگاه marc smith
 
در ادامه 8 نکته ای را که Ben Shneiderman از آنها به عنوان نکات طلایی یاد می کند و رعایت آن ها را برای طراحی یک رابط کاربری ضروری می داند، با یکدیگر بررسی خواهیم کرد. با ما همراه باشید…
1- انسجام در طراحی بسیار مهم استانسجام در طرح به این معنی است که الگوهای طراحی را در قسمت ها و صفحات مختلف رابط کاربری، به شکل مشابه به کار بگیرید. منظور از الگوها، رنگ ها، فونت ها، آی ها، تایپوگرافی های موجود در صفحات، دستورالعمل ها و حتی منوهاست. به یاد داشته باشید UIهای منسجم باعث می شود که کاربران وظایف و اهدافشان را راحت تر دنبال کنند.
2- برای اعمال تکراری کاربران، کلیدهای میانبر در نظر بگیریدساختار برخی اپلیکیشن ها به گونه ای است که کاربران عمدتا یک سری اعمال را به شکل مداوم در آنها تکرار می کنند. برای اینگونه اعمال که کاربران با هربار استفاده از برنامه باید آنها را تکرار کنند، کلیدهای میانبر در نظر بگیرید تا راحت تر و سریع تر به آنها دسترسی پیدا کنند. استفاده از اختصارات، کلیدهای عملکردی و دستورات پنهان می تواند برای کاربران حرفه ای مفید واقع شود.
3- کاربران را از روند انجام فرایندها آگاه کنیدکاربران باید از هر فرایندی که در هر قسمت از کار با برنامه در حال انجام است، آگاه باشند. برای مثال در صفحه ای از برنامه که آپلود فایل صورت می گیرد، نمایش درصد آپلود فایل به جای بسنده کردن به جمله «فایل در حال آپلود شدن است… لطفا صبر کنید» یک موضوع مهم به حساب می آید.
4- صفحات اطلاع رسانی را متناسب طراحی کنیدهر روندی که در یک برنامه صورت می گیرد، شامل آغاز، ادامه و پایان است.
طراحی فرم ها و صفحات مرتبط با هشدارها باید متناسب با پیام موجود در آن صفحه یا فرم باشد. مثلا فرم هایی که موفقیت آمیز بودن یک وظیفه و یا با خطا مواجه شدن آنرا در پایان به کاربر نشان می دهد.
5- خطاها را سریع نمایش دهیدیک رابط کاربری خوب باید تا حد ممکن از خطاها و اشتباهات احتمالی کاربران در انجام کارها جلوگیری کند. به عبارتی دیگر رابط کاربری باید کار کاربر را در حل مسائل راحت تر و از اشتباهات احتمالی او پیشگیری کند.
در فرم ثبت نامی که در تصویر زیر مشاهده می شود، این کار به خوبی انجام شده است.
6- امکان Undo کردن اقدامات را به آسانی فراهم کنیدگاهی اوقات کاربران در طی کار با برنامه ها، به شکل تصادفی اقدامات ناخواسته ای انجام داده و سریعا به فکر undo کردن آن می افتند. برای مثال هنگامی که فایلی را برای ارسال و یا چیزی را برای حذف انتخاب می کنند، رابط کاربری باید گزینه ای برای عدم انجام آن در صورت پشیمانی کاربر داشته باشد.
7- امکان کنترل فرآیندها را به کاربران بدهیددر رابط کاربری یک برنامه باید به کاربران اجازه داد تا کنترل کارها و مسئولیت خود در سیستم را در دست داشته باشند و کاملا احساس کنند که کنترل کننده ی واقعی برنامه هستند. نباید در برنامه هیچ اتفاقی بدون آگاهی کاربران رخ دهد و اکثر تنظیمات باید به شکل دستی توسط کاربر انجام شود. در مواقعی که تنظیمات به شکل خودکار تغییر می کنند نیز کاربران باید از آن آگاهی داشته باشند.
8- از حافظه موقت برای راحتی کاربران استفاده کنیدزمان ما محدود است و هر چیزی که باعث شود کارهایمان را راحت تر و سریع تر انجام دهیم، یک نقطه قوت محسوب می شود.
رابط کاربری برنامه ها باید ساده و سریع طراحی شود و گزینه هایی را برای بهبود سرعت کارها به کاربران پیشنهاد دهد. برای مثال در رابط کاربری یک برنامه چت یا پیام رسان اجتماعی، ایجاد یک لیست از افرادی که کاربران بیشترین ارتباط را آنها داشته اند در بالای صفحه، مانند تصویر زیر، یک ویژگی بسیار مناسب برای بهبود سرعت و راحتی کار با برنامه محسوب می شود.
جمع بندیشما به عنوان یک طراح رابط کاربری باید همیشه به دنبال ایجاد راه حل هایی برای بهبود رابط کاربری برنامه های مورد نظر خود باشید و از اطلاعات، سلیقه و تجربیات خود در این زمینه استفاده کنید. علاوه بر این، 8 نکته طلایی که در این مقاله بیان کردیم می تواند در بهبود رابط کاربری در هر اپلیکیشن یا وب سایتی بسیار مفید و کارآمد باشد. همانطور که گفتیم این نکات توسط مجرب ترین طراحان UI و بر اساس تجربه های بلند مدت آنها پیشنهاد شده است که امیدواریم مورد استفاده شما عزیزان نیز قرار بگیرد.
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


کدام مانیتور را برای طراحی گرافیک انتخاب کنیم؟ | قسمت اول
به عنوان یک طراح گرافیک، برای ارائه بهترین خروجی از کارتان به کارفرما، باید تکنولوژی ها و ابزارهای مورد استفاده شما نیز مطابق با استانداردهایی باشد. در این مطلب به بررسی مانیتورهای مناسب طراحی گرافیک خواهیم پرداخت.
گرافیست های حرفه ای باید به دنبال مانیتورهایی با حداکثر کارایی و عملکرد ممکن باشند که به بالاترین رزولوشن و جدیدترین امکانات موجود در زمان عرضه آن محصول مجهز باشند. مانیتور گرافیست ها همچنین باید امکاناتی را برای اتصال به سایر ابزارها داشته باشند. (به طور مثال مانیتوری که از کابل HDMI برای اتصال به کامپیوتر پشتیبانی نکند، به هیچ وجه گزینه مناسبی برای خرید توسط یک گرافیست نیست!)
گذشته از این موضوع، مانیتورهای مخصوص امور گرافیکی، محصولاتی نیستند که در هر پاساژ و مغازه محلی بتوان آنها را یافت، چرا که این محصولات با ویژگی های خاص و متفاوت از سایر محصولاتِ شرکت ارائه دهنده، ساخته شده و قیمت گذاری می شوند و بنابراین برخلاف مانیتورهای استاندارد دیگر نباید انتظار داشت به وفور در قفسه های مغازه ها یافت شوند!
موضوع دیگری که در خرید نمایشگر حائز اهمیت است این است که در این برهه زمانی خاص که در حال نوشتن این مطلب هستیم پیشرفت تکنولوژی، مانیتورها را از آنچه که بودند بهتر کرده است. تغییر رزولوشن به 4K از مهم ترین پیشرفت های مانیتورها محسوب می شود که این دسته از مانیتورها را به مورد استقبال ترین دسته برای خرید توسط گرافیست ها مبدل ساخته است. این سطح از بهبود رزولوشن به گرافیست کمک می کند که به خلق ایده های بهتر و با جزئیات بیشتری بپردازند و در کنار آن سایز بزرگتر صفحه نمایش می تواند کار را برای طراح بسیار راحت تر کند.

حال که تمام این پیش زمینه ها را مطرح کردیم، انتخاب های بسیار زیادی پیش روی شما خواهند بود اما در آخرین قسمت این سری مقالات، 10 مورد از بهترین این انتخاب ها را به طراحان گرافیک معرفی می کنیم. اگر آماده اید، بیائید با این موضوع شروع کنیم که چطور باید فهمید، مانیتوری که انتخاب می کنید، بهترین انتخاب برای کار شماست یا خیر؟!
چطور بهترین مانیتور را برای طراحی گرافیک انتخاب کنیم؟قبل از خرید یک مانیتور برای نیازهای طراحی خود، باید به رزولوشن، اندازه صفحه، دقت رنگی، اتصالات، ارگونومی و صد البته قیمت (!) توجه داشت.
رزولوشن (Resolution)همانطور که پیش از این نیز درباره آن صحبت کردیم، در سال های اخیر رزولوشن جدیدی در مانیتورهای موجود در بازار ظهور پیدا کرده که به معنی واقعی کلمه تفاوت آنچه را که در نمایشگر می بینید با واقعیت دشوار می کند!
اگر در حوزه کاری شما، جزئیات از اهمیت زیادی برخوردار هستند و به آنها توجه می کنید، این مورد باید برای شما حائز اهمیت باشد.
بهترین رزولوشن موجود در زمان نگارش این مقاله (Ultra-High-Definition (UHD است که به نام 4K نیز آن را می شناسیم، این مانیتورها بالاترین رزولوشن موجود را یعنی 3,840 در 2,160 پیکسل ارائه می دهند که 4 برابر پیکسل های موجود در مانیتورهای با رزولوشن 1080P می باشد.
بعد از آن، بالاترین رزولوشن متعلق است به مانیتورهای (Wide-Quad HD (WQHD که نسبت پیکسلی معادل 2,560 در 1,440 را ارائه می کنند و با نام 1440P نیز آنها را می شناسیم.
نکته ای که در اینجا باید به خاطر سپرد این است که هر چقدر که رزولوشن مانیتور افزایش پیدا می کند، قیمت مانیتور نیز به همان نسبت افزایش می یابد. یک مانیتور 4k به طور قطع گران تر از یک مانیتور 1080P Full HD معمولی خواهد بود و انتخاب رزولوشن همانطور که در خلال متن هم به آن اشاره شد، بستگی به میزان اهمیت جزئیات تصویر در کار شما خواهد داشت. (به طور مثال برای یک طراح لوگو خرید یک مانیتور 4K توجیه چندانی نخواهد داشت.)
در تصویر زیر رزولوشن های مختلف نمایش داده شده است. توجه داشته باشید که مفهوم رزولوشن با مفهوم سایز صفحه نمایش متفاوت است و اختلاف اعداد در این تصویر وما به معنی اختلاف سایز مانیتورها نخواهد بود.
اندازه صفحه نمایشبله، مهم است. به خصوص زمانیکه در حال کار با تصاویری با جزئیات بالا و رزولوشن Ultra-High هستید. متاسفانه همه ما هنگام انتخاب سایز صفحه نمایش با محدودیت فضا و میز کارمان مواجه هستیم وگرنه چه کسی بدش می آمد یک مانیتور با قطر 55 اینچ روبرویش قرار داشته باشد!
هدف این است که حداکثر اندازه ای را انتخاب کنید که با آن بتوانید به صورت همزمان چندین پروژه را در یک صفحه مشاهده کنید.
اگر قصد انتخاب یک مانیتور UHD یا WQHD را دارید، باید به دنبال سایز 27 و یا 32 اینچ آنها بگردید اما اگر در دفتر کارتان فضای کافی داشته باشید، میتوانید از دو یه تعداد بیشتری مانیتور استفاده کنید.
انتخاب دیگری که دارید این است که به دنبال خرید یک مانیتور 29 اینچ، ultra-wide WQHD باشید که با نسبت تصویر 21:9 بتواند نیاز شما را برآورده کند.
البته در این مورد هم همانند رزولوشن و قیمت، عوامل بعدی محدود کننده خواهد بود، چرا که با افزایش سایز صفحه نمایش قیمت آن نیز افزایش پیدا می کند.
در قسمت بعدی این مقاله به ویژگی های مهم دیگر از جمله دقت، رنگ و مقیاس خاکستری (Gray Scale)، اتصالات ورودی و خروجی، ارگونومی و قیمت خواهیم پرداخت و در انتها 10 مانیتور برتر از نظر ما و بر اساس پارامترهای ذکر شده به همراه جزئیات و ویژگی های برتر هر کدام به شما معرفی خواهد شد.
منبع: روکسو

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


۱۰ نکته مهم و کاربردی در طراحی یک لوگوی خوب + اینفوگرافی
اگر یک سرچ ساده با موضوع «آموزش طراحی لوگو» در گوگل داشته باشید، به انبوهی از دوره های آموزشی مختلف با وعده های آنچنانی برخواهید خورد که حتی تعداد زیادی از آنها با استفاده از نرم افزار فتوشاپ تدریس شده اند!
اما واقعیت این است که جدا از نوع نرم افزار مورد استفاده (که صد البته باید برداری باشد نه پیکسلی!) و دانش فنی کار کردن با این ابزارها؛ طراحی لوگو نیازمند مطالعه بیشتر و رعایت نکات و تکنیک های مختلف است، نکته هایی که به جرات می توان گفت در کمتر دوره آموزشی موجود در اینترنت (حداقل بر اساس تجربه شخصی بنده) به آنها اشاره می شود.
در این مطلب ده تکنیک و نکته کاربردی را که در طراحی لوگو باید مورد توجه قرار داد، برای شما بازگو خواهیم کرد.
نکاتی در اینجا درباره اصول طراحی لوگو ذکر می شوند اگر به خوبی و به شکل استاندارد پیاده سازی شوند، خواهند توانست لوگوی شما را به «یک لوگوی خوب» مبدل کنند.
1. لوگو باید ساده باشدسادگی همواره اصلی اساسی در طراحی یک لوگوی موفق بوده و هست. این سادگی می تواند همان طراحی مینیمال باشد.
 سبک مینیمال یا ساده گرایی در دنیای طراحی گرافیک
سادگی یک لوگو باعث می شود تا مخاطبان پیام آن را ساده تر و بهتر متوجه شوند و در برخوردهای بعدی با آن، لوگو را زودتر و بهتر به یاد بیاورند. این نکته که لوگو در برخوردهای بعدی سریعتر به یاد آورده شود از مهمترین ویژگی های یک لوگو موفق است و می تواند نقشی اساسی در تبلیغات محیطی آن برند ایفا کند.
2. لوگو باید ماندگار باشدیک کسب و کار و بیزینس نیازمند لوگویی است که در طول زمان ماندگار باشد و اصطلاحا با گذر زمان طرح نمیرد!
ممکن است لوگویی که شما طراحی می کنید برای 5 سال، 10 سال و یا حتی بیشتر مورد استفاده قرار بگیرد. تمام اجزای لوگو باید هماهنگ با گرایشات همان عصر باشد، ممکن است این جمله کمی برایتان نامفهوم باشد؛ اجازه بدهید به زبان ساده منظورم را منتقل کنم، یعنی اینکه زبان طراحی مورد اقبال و استقبال در همان سالها در طراحی لوگو رعایت شود و از یک زبان طراحی قدیمی و از مد افتاده برای لوگو استفاده نشود. (تا در آینده ناچار به فرایند سخت و خطرپذیر ریبرندینگ نشویم!)
برای مثال به تاریخچه لوگوی شرکت نفتی Shell در اینفوگرافی انتهای این مطلب توجه کنید، به خوبی می توان دید که زبان طراحی مورد اقبال در سال های مختلف چقدر تغییر کرده است، تا جایی که حتی لوگوی بزرگترین کمپانی ها نیز، نیازمند تغییر و تحول بوده اند.
3. لوگو باید خلاقانه باشدلوگوهایی که در ذهن شما باقی می مانند، همانهایی هستند که قوه تخیل و خلاقیت شما را مورد هدف قرار می دهند. از رنگ گرفته تا طراحی بر اساس تایپوگرافی، هر چیزی که باعث خلاقیت و نوآوری در لوگوی شما شود می تواند به شما اطمینان دهد که لوگو، به یاد ماندنی خواهد بود.
 روانشناسی رنگ ها در طراحی لوگو
4. لوگو باید خوانا باشدیک لوگوی خوب همواره خوانا است. لوگو باید هدف برند مورد نظر را صراحتا به مخاطب ارائه دهد و علاوه بر آن در هر سایز و اندازه ای که چاپ و یا استفاده شد، قابل خواندن باشد.
5. لوگو باید سازگار باشدانعطاف یکی دیگر از مزایا و یا بهتر است بگوییم مومات یک لوگوی خوب است. یعنی اینکه لوگو چه به صورت رنگی، چه سیاه و چه سفید، در هر زمینه ای (حتی به صورت دوخته شده روی پارچه!) قابل مشاهده و تشخیص باشد. البته این به معنی صرفا تک رنگ بودن لوگو نیست بلکه طرح اصلی میتواند از چندین رنگ تشکیل شده باشد و سایه-روشن های متعدد داشته باشد، اما همین لوگو باید قابلیت چاپ تک رنگ را نیز داشته باشد.
6. لوگو باید واکنشگرا باشدمهم نیست چقدر آن را بزرگ یا کوچک می کنید، لوگو باید همان حس و تاثیر را مخاطب داشته باشد. این به این معنی است که شما باید نسخه های مختلفی از لوگویتان را برای زمینه های مختلف داشته باشید. (در مورد طراحی لوگوی ریسپانسیو یا واکنشگرا بحث مفصل تر است، برای مطالعه بیشتر در این مورد می توانید به مطلب آقای امیرحسین محمودی با عنوان «هر آنچه باید درباره لوگوهای ریسپانسیو بدانید» مراجعه کنید.)
7. لوگو باید منحصر به فرد باشدیکتا بودن و منحصر به فرد بودن لوگو همان چیزی است که در تعریف اصلی یک لوگو و تفاوت آن با «آی» ذکر می کنیم! لوگو باید نشان برند شما باشد و شما را از سایر رقبا متمایز کند. یک لوگوی خاص و بی همتا میتواند همان چیزی باشد که دلیل اعتبار و سر پا بودن کسب و کار شماست.
8. لوگو باید مرتبط باشدمهم ترین انتظاری که از طراحی لوگوی شما خواهند داشت این است که بتواند با برند مورد نظر ارتباط برقرار کند. این یک اصل اساسی و تاثیر گذار در وایرال شدن یک لوگو به شمار می رود.
9. لوگو باید هوشمندانه باشدیک لوگوی هوشمندانه، در برگیرنده یک یا چند موضوع به یادماندنی درون خود است. استفاده خلاقانه از فضاهای خالی، یک استایل منحصر به فرد و ساده و یا حتی یک شکل نوشتار (تایپ فیس) درست، می تواند لوگو را هوشمندانه کند.
10. لوگو باید حرفه ای باشدیک لوگوی حرفه ای باید ارزش های برند را منتقل کند و این کار به دقیق ترین شکل ممکن اجرا شود. از آن گذشته تمام اجزا و ویژگی های لوگو به صورت هارمونیک چیده شده باشند.
اینفوگرافیک زیر را که حاوی مثال های عینی و ملموس در اصول طراحی لوگو است، ببینید:
 
منبع: روکسو

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


کدام مانیتور را برای طراحی گرافیک انتخاب کنیم؟ | قسمت دوم
در قسمت قبل درباره وم انتخاب مانیتور صحیح توسط گرافیست ها و طراحان در زمینه های مختلف صحبت کردیم و به توضیح این مهم پرداختیم که در خرید مانیتور باید به کدام ویژگی ها توجه کرد. همچنین درباره رزولوشن و سایز صفحه نمایش ها صحبت کردیم. در این قسمت درباره دقت رنگ (Color Accuracy)، مقیاس خاکستری (Gray-Scale)، اتصالات و … صحبت خواهیم کرد و در قسمت بعدی (آخرین قسمت) لیستی از بهترین مانیتورهای موجود در بازار کنونی (اوایل سال 2019) برای گرافیست ها را به شما ارائه خواهیم کرد و نقاط ضعف و قوت هر کدام را بررسی می کنیم.
دقت رنگ و مقیاس خاکستری (Color Accuracy & Gray-Scale)هر طراح گرافیک و ویرایشگری نیاز دارد، قبل از اینکه پروژه اش را برای چاپ ارسال کند، مطمئن شود که خروجی کار چاپخانه با آنچه که در صفحه نمایش می بیند یکسان است. همانطور که می دانید، رنگ ها در صنعت چاپ از ترکیب چهار رنگ (CMYK) به دست می آیند و مانیتورهایی که همگی ما استفاده می کنیم از پنل هایی استفاده می کنند که متشکل از پیکسل هایی با قابلیت نمایش سه رنگ (RGB) هستند. همین امر برای طراحان تازه کار و کم تجربه مشکلات عدیده ای را به وجود می آورد و هنگام مقایسه خروجی چاپی با پیش نمایش طرح در ماینتور دچار سردرگمی می شوند. واضح است که با تکنولوژی امروزی هنوز امکان مشاهده دقیق مُد رنگی CMYK در مانیتورها به صورت 100% وجود ندارد، اما با تنظیمات صحیح و استفاده از مانیتورهای دقیق و به روز میتوان اطمینان پیدا کرد که این اختلاف رنگ به حداقل می رسد و این دقیقا یعنی نیاز به دقت بالای رنگ ها. امروزه مانیتورهای با تکنولوژی جدید پنل (AH-IPS) این مشکل را حل کرده اند. مانیتوری که برای حل این مشکل نیاز دارید باید دارای (LUT) حداقل 10، 13 یا 14 بیت باشد تا بتواند با کالیبراسیون های مکرر و پوشش حداقل 99 درصدی طیف رنگ های Adobe RGB، پاسخگوی نیاز کار شما باشد.
در بازار امروز مانیتورهای سطح حرفه ای بسیاری وجود دارند که می توانید با استفاده از آنها و بهره گیری از ابزارهای سخت افزاری و نرم افزاری که جداگانه به فروش می رسند، به همین نتیجه برسید. پنل پی اسی (PS) ارزش خرید دارد که به خوبی بتوانند سایه ها و نقاط خاکستری را از نقاط روشن تمیز دهد تا طراح بتواند سطوح مختلف سایه ها و نقاط روشن را به خوبی مشاهده کند. همچنین تکنولوژی PS به شما زوایای دید بازتری را ارئه می دهد.
بگذارید ساده تر بگویم:
پنل های PS، می توانند در هر زاویه ای (بالا، پایین، اطراف)، رنگ های غلیظ و یا رقیق را به همان خوبی زاویه روبرو نشان دهند، بر خلاف پنل های معمولی و قدیمی!
اتصالات ورودی و خروجیبرای کسانی که نمی دانند، منظور از اتصالات ورودی و خروجی، پورت ها و کابل های مانیتور هستند که برای اتصال آنها به کامپیوتر استفاده می شوند. بهترین گزینه در این مورد مانیتورهایی هستند که از پورت های HDMI، dual-link DVI و DisplayPort 1.2 برخوردارند. البته اگر کار شما به گونه ای است که نیاز به اتصال چند مانیتور به یکدیگر دارید، برای راحتی کارتان باید توجهتان را به خرید مدل هایی معطوف کنید که پورت های ورودی و خروجی Thunderbolt و یا DisplayPort 1.2 را دارا باشند.
اگر تمایل دارید که از بهترین مانیتورهای موجود با رزولوشن 4K استفاده کنید، برای دریافت حداکثر رزولوشن این مانیتورها باید ابتدا مطمئن شوید که کارت گرافیک سیستم شما از قابلیت انتقال Multi-Steam و یک DisplayPort 1.2 و یا دو پورت HDMI پشتیبانی می کند. به این طریق شما قادر خواهید بود شانس دریافت بالاترین رزولوشن را با نرخ تصویر 60Hz داشته باشید.
ارگونومیعموما افراد مختلف، استایل و اندازه های بدنی متفاوتی دارند و با این حساب داشتن مانیتوری که پایه آن قابلیت تغییر ارتفاع و یا زاویه مانیتور را با هدف ارائه بهترین زاویه دید برای شما نداشته باشد، مشکل بزرگی محسوب می شود، خصوصا هنگامی که قرار باشد روزانه ساعت ها روبروی آن بنشینید. برای برخی از طراحان، داشتن مانیتوری با پایه متحرک که اجازه چرخش 90 درجه ای را به کاربر می دهد، می تواند کار را بسیار ساده کند؛ چه برای خواندن اسناد طولانی و چه برای راحتی در هنگام کار با وبسایت ها.
مانیتوری که چند پورت USB داشته باشد نیز می تواند فوق العاده باشد، چرا که از طریق آن خواهید توانست مانیتور را به گوشی و یا دیگر گجت های کوچکتر متصل کنید. معمولا این درگاه ها کنار مانیتور تعبیه می شوند تا دسترسی به آنها تا حد امکان راحت باشد. برای گرافیست ها و یا عکاسانی که نیاز دارند عکس هایی را که خودشان گرفته اند، مستقیما در مانیتور مشاهده کنند، یک اسلات کارت حافظه نیز می تواند بی نظیر باشد، شاید این مورد چندان ضروری به نظر نرسد اما اهمیت آن هنگامی است که کامپیوتر شما درگیر باشد و بخواهید بدون اختلال در کار آن تصاویرتان را مستقیما در خود مانیتور مشاهده کنید.
قیمت!قسمتی که برای همه اهمیت دارد. در حالیکه هزینه مانیتوری که انتخاب می کنیم بسیار مورد توجه است، اما حقیقت این است که مانیتورهای نسل جدید گزینه های ارزانی نخواهند بود. به طور مشخص اگر کمی در وبسایت های آنلاین و مراکز خرید جستجو کنید خواهید توانست بهترین مانیتور را از نظر قیمت (نسبت به سایرین) پیدا کنید و به همین دلیل ما در اینجا قیمت مشخصی را برای عموم افراد ذکر نمی کنیم. یک ضرب المثل انگلیسی می گوید «کیفیت کار بسته به ابزار سازنده آن است»، اگر شما طراح گرافیک هستید و پروژه هایی که در دست دارید نیازمند دقت بالا برای رنگ ها، مقیاس خاکستری و یا توجه ویژه به ریزترین جزئیات تصویر دارد، صرفه جویی در هزینه هایتان با خرید یک مانیتور ضعیف، در آینده به شغل شما کمکی نخواهد کرد.
طی این دو قسمت، با ویژگی ها و خصوصیات بارزی از مانیتورها که قبل از انتخاب، نیازمند توجه به آنها هستیم، آشنا شدیم. اکنون باید به این موضوع واقف شده باشید که مانیتور مناسب برای هر طراح گرافیک متناسب با نوع پروژه ها و نیازهای فردی او می باشد و می توان با برقراری تعادل میان آنچه که واقعا نیاز دارید با بودجه ای که در دست دارید، به بهترین انتخاب برسید.
در قسمت بعد به بررسی کامل 10 مانیتور برتر که در بازار کنونی (سال 2019) مناسب ترین گزینه ها و امکانات را برای طراحان گرافیک دارا هستند، می پردازیم و قیمت های هر یک را در بازار های جهانی بررسی می کنیم.
 
منبعک روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


راهنمای جامع استفاده از فونت های Bold
 
امروزه می توان گفت، تایپوگرافی تقریبا بیشترین بار مسئولیت را در یک طرح گرافیکی به دوش می کشد چرا که انتقال پیام در طرح های گرافیکی به واسطه نوشته های موجود در طرح صورت می پذیرد. بدون شک تایپوگرافی باید واضح و دقیق صورت بگیرد تا این امر به بهترین شکل ممکن میسر شود.
حال، در سال 2019 وقت آن شده که از فونت های دست نویس که در سال 2010 مد شده بودند دست بردارید و به انتخاب های جسورانه تری مانند فونت های ضخیم یا Bold Style دست بزنید. به عبارتی دیگر امروزه بیشتر شاهد استفاده از اینگونه فونت ها در عرصه ی طراحی گرافیک هستیم.
فونت های سری sans-serifs مانند Arial و Helvetica همواره در دنیای فونت ها بر تخت سلطنت بوده اند اما طراحان علاقه دارند با استفاده متنوع تر از فونت ها، سرگرمی بیشتری در حین کار داشته باشند و طرح های جذاب تر و متفاوت تری خلق کنند.
در ادامه با ما همراه باشید تا شما را با روند طراحی و تایپوگرافی به واسطه فونت های Bold آشنا کنیم و بهترین نمونه های طراحی را که در زمینه های مختلف توسط برترین گرافیست ها و به کمک این فونت ها ایجاد شده است، با یکدیگر مرور کنیم.
آشنایی با فونت های Bold
سبک ضخیم یا bold در واقع استایل خاصی در برخی فونت ها محسوب می شود، که برای تاکید بر نوشته استفاده می شود و شانس دیده شدن آنرا چند برار می کند. استفاده از اینگونه فونت ها در طرح های گرافیکی، انتخاب جسورانه ای است که برایجلب توجه بیشتر و بالا بردن تمرکز روی تایپوگرافی صورت می گیرد.
استفاده از اینگونه فونت ها ممکن است طرح را از سبک مینیمالیسم خارج کند، هرچند که طرح های مینیمال زیادی می توان یافت که در تایپوگرافی آنها از فونت های bold استفاده شده است. افرادی که از این دسته فونت ها در طرح های مینیمال بهره می برند، بر این باورند که می توان با استفاده از یک فونت ضخیم و جلب توجه بیننده به سمت متن، به عنوان سوژه اصلی طرح، مابقی ترکیب را ساده و تر و تمیز نگه داشت.
 نگاهی به سبک مینیمالیسم یا ساده گرایی در دنیای طراحی گرافیک
فونت های Bold چه کاربردی دارند؟
امروزه ما در دنیایی شلوغ و پر از محرک های رقابتی زندگی می کنیم. در این میان، فونت های درشت تر به ما کمک می کنند پیام یا موضوع مورد نظر را سریع تر متوجه شویم. به عبارتی دیگر مهم ترین نکته درباره فونت های ضخیم این است که شانس دیده نشدن آن در طرح به حداقل می رسد. به طور کلی، فراموش نکنید که فونت بزرگتر پیام واضح تری را به همراه خواهد داشت.
نمونه ای زیبا از طراحی لیبل (برچسب) بطری با استفاده از فونت Bold به سبک مینیمالیسم
چه زمانی که در طرح بسته بندی محصولات برای دیده شدن در قفسه فروشگاه ها استفاده شوند، چه در صفحه اصلی یک وب سایت یا صفحه خوشامدگویی یک اپلیکیشن، به خوبی و با قدرت بالا، عنوان مورد نظر را به بیننده منتقل می کنند. همچنین این سبک از فونت ها از توانایی بیشتری برای انتقال حس اعتماد و اعتبار به بیننده برخوردارند.
فونت Bold در طراحی وب و اپلیکیشنطراحی وب یکی از مستعدترین گزینه ها برای استفاده از فونت های درشت و ضخیم محسوب می شود. در این هنگام، استفاده از یک عکس مرتبط و با کیفیت بالا به عنوان پس زمینه تایپوگرافی، یک طرح قدرتمند خلق کرده که می تواند در زمانی بسیار کم، تاثیر بسیار زیادی روی مخاطبان شما داشته باشد.
در طراحی رابط کاربری اپلیکیشن نیز، وضعیت به همین شکل بوده و به ویژه در صفحه ابتدایی که صفحه خوشامدگویی برنامه نیز به حساب می آید، از این دسته فونت ها برای جلب توجه و تمرکز بیشتر روی عناوین اصلی استفاده کنید. در ادامه نمونه های جذابی از طراحی وب سایت به کمک فونت های bold را با یکدیگر مشاهده می کنیم.
طراحی لوگو با استفاده از فونت های Boldطراحی لوگو با استفاده از فونت های ضخیم کمتر رواج دارد. در عین حال کم نیستند طراحانی که به طراحی لوگو بر اساس چنین فونت هایی می پردازند و طرح های متفاوت و جذابی نیز ایجاد می کنند. ترکیب، چیدمان و اتصال حروف در چنین فونت هایی به مراتبط سخت بوده و نیاز به تمرکز و همچنین تجربه بالایی از سوی گرافیست می باشد.
در ادامه چند نمونه فونت بر پایه فونت های ضخیم را مشاهده می کنید:
طراحی پوستر و کارت ویزیت با فونت های Boldانتخاب فونت های ضخیم در طراحی پوستر همیشه انتخاب غالب بوده است. دلیل آن نیز کاملا واضح است، هدف از طراحی پوستر جلب توجه دیگران به موضوع آن است. بنابراین چه انتخابی بهتر از یک فونت ضخیم؟! از طرفی دیگر پوستر ها باید حداقل از فاصله یک و نیم متری به راحتی خوانده شوند. بنابراین موضوع انتخاب فونت و سایز مناسب در آنها بسیار مهم است.
طراحی بسته بندی با استفاده از فونت های Boldوقتی از فونت های ضخیم در طرح بسته بندی یک محصول استفاده می کنید، به سادگی و وضوح هر چه بیشتر به مردم می‌ گویید که چه چیزی در این بسته بندی وجود دارد و آنها دقیقا دارند چه چیزی را خریداری می کنند!
استفاده از چنین فونت هایی در طرح بسته بندی محصولات، موجب جلب توجه بیشتر به سمت آنها در ویترین یا داخل مغازه ها می شود و این همان چیزیست که در طراحی بسته بندی محصولات بسیار حائز اهمیت است.
طراحی جلد کتاب با استفاده از فونت های Boldدر چند سال اخیر بسیار بیشتر از سال های قبل شاهد استفاده از فونت های ضخیم روی جلد کتاب ها بودیم. به ویژه از زمانی که فروشگاه های آنلاین کتاب نقش پررنگ تری در فروش آنلاین کتاب به خود گرفتند.
هنگامی که در سایت آمازون یا هر فروشگاه اینترنتی دیگری در حال مشاهده لیست کتاب های جدید هستید، کتاب هایی که عنوان آنها با فونت بزرگتری نوشته شده باشد، بیشتر جلب توجه می کنند. این موضوع نیز بدون شک موجب فروش بیشتر محصول خواهد بود. همچنین، علاوه بر فروشگاه های اینترنتی، در سایر کتاب فروشی ها نیز عناوین این کتاب ها راحت تر خوانده شده و توجه افراد بیشتری به سمت آنها جلب می شود.
جمع بندی: فونت های ضخیم تر از سایر فونت ها بهترند!مطالعاتی که بر روی رفتار افراد انجام شده است، نشان می دهد که اکثر افراد به نوشته های ضخیم توجه بیشتری نشان می دهند که البته چیز دور از انتظاری هم نیست! این موضوع باعث شده که در طرح هایی که هدف آنها جلب توجه بیشتر افراد است، فونت های Bold اولویت اول برای تایپوگرافی باشد.
حال که با این موضوع  به خوبی آشنا شدید، نوبت آن است به سراغ طراحی پروژه بعدی خود بروید و اینبار سعی کنید بر روی فونت های Bold تمرکز بیشتری داشته باشید.
منبع: روکسو
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


۹ روش برای ارتقای تجربه کاربری در طراحی وب (قسمت اول)
 
طراحان سایت دقیقا مثل یک معمار هستند که باید طرح یک وب سایت را ایجاد کرده و از نظر زیبایی آنرا برای کاربران به بالاترین سطح ممکن برسانند. از اولین لحظه شروع طراحی یک سایت، طراحان باید کاربرپسند بودن را تحت نظر داشته باشند و فراموش نکنند همه عناصر و المان هایی که در طرح یک وب سایت به کار می روند، اعم از کوچک و بزرگ، بر تجربه کاربری (UX) آن تاثیر می گذارند.
امروزه در سئو و بهینه سازی سایت، هیچ چیز به اندازه تجربه کاربری اهمیت ندارد و موتورهای جستجو این موضوع را مهم ترین معیار برای رتبه بندی سایت ها در نظر گرفته اند.
طبق تحقیقات، 88 درصد از کاربران وب سایت ها و مشتریان فروشگاه های اینترنتی از نسخه موبایلی سایت ها رضایت ندارند. به عبارتی دیگر، ادعا می کنند که هنگام مرورگری اینترنت با موبایل تجربه رضایت بخشی ندارند. همچنین 30 درصد از افراد اذعان می کنند که هرگز به سایت هایی که تجربه کاربری خوبی ندارد، برای دومین بار رجوع نمی کنند. بنابراین دارا بودن تجربه کاربری قوی، می تواند نقشی اساسی در موفقیت کسب و کار آنلاین شما بازی کند.
نکاتی که در ادامه این مقاله نوشته ایم، اولین گام ها را برای طرح بندی مناسب یک وب سایت به شما یاد می دهد و در ادامه نیز چند استراتژی پیشرفته را برای موفقیت شما در زمینه تجربه کاربری به شما ارائه می دهد. با روکسو همراه باشید…
1- قبل از هر چیز تحقیق کنیدقبل از آنکه هر ایده را برای طراحی اجرا کنید، ابتدا در مورد نام تجاری مورد نظر به خوبی مطالعه کنید. هنگامی که شما با مخاطبان و نوع کسب و کاری که قرار است برای آن طراحی کنید آشنا باشید، می توانید تجربه کاربری بهتری را برای مخاطبان آن ایجاد کنید. اگر ندانید برای چه چیزی و برای چه کسانی دارید طراحی می کنید،  ایجاد یک طرح کاربر محور، بسیار دشوار خواهد بود.
بنابراین، قبل از شروع کار نگاهی دقیق به نوع کسب و کار هدف و مخاطبان آن داشته باشید و سعی کنید خصوصیات اخلاقی و شخصیتی مشتریان آن را به خوبی آنالیز کنید. حتی اگر لازم است به موقعیت جغرافیایی آنها نیز دقت کنید. پس از جمع آوری داده های مورد نیاز، نگاهی به رقبا و کسب و کار های مشابه بیندازید و از تجربیات موفق و یا شکست های آنها درس بگیرید.
دقت کنید که مشتریان به چه دلیل ممکن است از برند شما خرید کنند یا از خرید منصرف شوند و طرح نهایی را برای آنها شخصی سازی کنید و یا فیلترهایی را اعمال کنید که مشتریان از طریق آن بتوانند سایت را برای خودشان شخصی سازی کنند. در پایان نیز، هر ایده را که می خواهید آزمایش کنید مطمئن شوید که قبل از شما چه کسانی از آن استفاده کرده اند و حتما عکس العمل مخاطبان نسبت آن چگونه بوده است.
2- بر اساس سلیقه کاربران طراحی کنیدمخاطبان اصلی سایت شما جوانان هستند؟ پس آنرا طوری طراحی کنید که این موضوع را به خوبی منعکس کند!
پس از آنکه کاربران هدف را شناسایی کردید و خصوصات آن ها را مورد بررسی قرار دادید، نوبت به طراحی بر اساس سلیقه آنها می رسد. برای این کار دقت کنید که افرادی مورد نظر، چه انتظاراتی ممکن است از سایت شما داشته باشند. برای مثال اگر مخاطبان سایت مورد نظر را افرادی با میانگین سنی نسبتا بالا تشکیل می دهند، انتظار آنها بدون شک وب سایتی سریع و ساده است به طوری که برای انتخاب منوها و مرور بین صفحات مختلف سایت با مشکلی مواجه نشوند. همچنین  استفاده از رنگ های سنگین و رسمی نیز در چنین سایت هایی اولویت خواهد داشت.
اما اگر اکثر مخاطبان شما را افراد جوان جامعه تشکیل می هند، محدودیت کمتری خواهید داشت. می توانید از پالت های رنگی بیشتری استفاده کنید و اجباری از نظر طراحی هر چه ساده تر منوهای سایت نخواهید داشت. این افراد معمولا در رابط کاربری سردرگم نمی شوند و راه های استفاده از امکانات کامل سایت را راحت تر پیدا می کنند. فراموش نکنید اینگونه افراد بیشتر از موبایل و تبلت برای مرورگری سایت استفاده می کنند بنابراین نمایش سایت در نمایشگر های کوچک باید به خوبی بهینه سازی شده باشد.
در هر حال، باید استفاده از فونت ها، رنگ ها، اشکال، طرح بندی و سایر عناصر (تصاویر، آی ها و…) متناسب با ذائقه مخاطبان باشد. به کنتراست بین رنگ ها دقت کنید تا مطمئن شوید نوشته ها کاملا خوانا هستند. سازگاری منوهای اصلی سایت با نمایشگر موبایل و تبلت را حتما بررسی کنید تا مطمئن شوید کاربران حین گشت و گذار بین صفحات با مشکلی مواجه نخواهند شد.
3- از هدایت بصری و مستقیم استفاده کنیدهنگامی که از ناوبری مستقیم و قابل درک در وب سایت استفاده می کنید کاربران راحت تر آنچه را که به دنبالش هستند پیدا می کنند!
وب سایتی که شما طراحی می کنید 5 تا 10 ثانیه فرصت دارد که مخاطب را تحت تاثیر قرار دهد.
اگر نگاه اولیه مخاطب به سایت شما، چیزی دور از انتظار را در ذهن او ایجاد کند، بدون شک از وب سایت شما خارج خواهد شد. سعی کنید طرحی که برای صفحه اصلی یا صفحه خوشامدگویی استفاده می کنید، چندان متفاوت از سایر سایت ها نباشد تا مخاطب غافلگیر نشود. البته قرار نیست سایتی که طراحی می کنید مشابه سایت های دیگر باشد. تنها منوها و سیستم ناوبری سایت را معمولی طراحی کنید تا در نگاه اول برای مخاطبان گیج کننده به نظر نرسد.
سیستم ناوبری یا به اصطلاح هدایت (Navigation) وب سایت که منوها مهم ترین قسمت آنرا تشکیل می دهند، خود به تنهایی مهم ترین بخش سایت محسوب می شوند. در این زمینه کاربران عادت هایی دارند که اگر در وب سایت شما نیز همانند سایر سایت ها بتوانند از این عادت ها استفاده کنند، تجربه لذت بخشی از سایت شما برایشان رقم خواهد خود. برای مثال اکثر افراد عادت دارند برای ورود به صفحه اصلی سایت از دکمه «خانه» یا «صفحه اصلی» استفاده کنند و همیشه در ابتدای منو اصلی سایت به دنبال آن می گردند. سعی کنید شما این کلید را در منوی اصلی قرار داده و یا در غیر اینصورت بر روی لوگوی سایت، لینک صفحه اصلی را تنظیم کنید تا کاربران با کلیک روی آن به صفحه ابتدایی سایت هدایت شوند.
به طور خلاصه سیستم ناوبری یا هدایت سایت باید به خوبی کاربران را به صفحات مورد نظر هدایت کند تا بهترین تجربه اولیه برای کاربران رقم بخورد.
همچنین وجود دکمه تماس با ما در منو اصلی از اهمیت فوق العاده برخوردار است و اکثر کاربران انتظار دارند این کلید را در منو اصلی وب سایت به راحتی پیدا کنند. همچنین اگر می خواهید از دسته بندی خدمات یا محصولات در منو اصلی استفاده کنید، سعی کنید آن را زیادی شلوغ نکنید و تنها مهم ترین و پرطرفدارترین آنها را در آنجا قرار دهید.
در نهایت دسترسی راحت به بخش جستجو را نیز فراموش نکنید که برای برخی کاربران از اهمیت بالایی برخوردار است چرا که آنها محتوای مورد نیاز خود را انتطار دارند از طریق جستجو در سایت شما پیدا کنند.
4- از نشانه های جهت یابی استفاده کنیداز نشانه های هدایت کننده استفاده کنید تا کاربران بهتر قسمت های مختلف یک صفحه از سایت را پیدا کنند!
وب سایت شما هرچه بیشتر با مخاطبان تعامل داشته باشد، تجربه کاربری آنها را ارتقا داده و این به سود شما خواهد بود. شما باید یاد بگیرید پروژه های طراحی سایت را به شکلی انجام دهید که کاربران را به جاهایی که می خواهید بکشانید و آنها را ترغیب کنید اعمال مورد نظر شما را در سایت انجام دهند. حال این کار می تواند سفارش محصول، خرید خدمات VIP و یا هر کار دیگری باشد.
یکی از راه حل های موثر در این زمینه استفاده از نشانه های جهت یابی است که هم برای شما و هم برای کاربران مفید است. فایده این مورد برای شما در این است که می توانید بازدیدکنندگان را به قسمت هایی از وب سایت که خودتان تمایل بیشتری دارید راهنمایی کنید. از نقطه نظر دوم نیز، این نشانه ها اگر به درستی استفاده شوند، به کاربران در پیدا کردن موضوع مورد نظرشان در وب سایت شما کمک می کنند و مانع از خروج کاربران به علت پیدا نکردن محتوای مورد نظر می شوند. همچنین می توانید از طریق این گزینه مشتریان را به صفحه محصولات جدید و یا پیشنهادات ویژه دعوت کنید چرا که استفاده از کلمات در کنار این نشانه ها نیز اشکالی ندارد!
البته دقت کنید که کاربرد اصلی نشانه های جهت یابی در سایت، انتقال بازدیدکنندگان از یک قسمت از یک صفحه به قسمتی دیگر از همان صفحه است. به عبارتی دیگر، برای هدایت کاربران بین قسمت های مختلف یک صفحه توصیه می شوند و نه انتقال بین صفحات مختلف سایت. توصیه ما برای هدایت بین صفحات مختلف این است که در این صورت حتما از منوهای اصلی استفاده کنید.
 ۹ روش برای ارتقای تجربه کاربری در طراحی وب (قسمت دوم)
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


۹ روش برای ارتقای تجربه کاربری در طراحی وب (قسمت دوم)
 
بهبود تجربه کاربری سایت، یکی از مهم ترین نقش ها را در سئو ایفا می کند، به گونه ای که مهم ترین هدف هر طراح سایتی باید ارتقای تجربه کاربری باشد. در مطلب قبل درباره چهار فاکتور مهم برای ارتقای تجربه کاربری سایت صحبت کردیم و در این مطلب به پنج فاکتور باقی مانده می پردازیم.
5- با مد روز آشنا باشید 
طراحی این سایت با استفاده از سبک ایزومتریک آپدیت بودن خود با مد روز را برای کاربران منتقل می کند.
 
بروز یا به اصطلاح آپدیت بودن به آنچه در میان مردم و فرهنگ ها مد می شود، بخش مهمی از زندگی یک طراح حرفه ای را تشکیل می دهد. شما همواره باید در راس جامعه با تغییرات روز و خواسته های جدید مردم آشنا باشید و در جهت رفع این نیاز ها تلاش کنید. سبک های مختلف طراحی لوگو، شکل های مختلف تایپوگرافی، نحوه استفاده و ترکیب رنگ ها، استفاده از تصاویر با کیفیت استوک و سایر موضوعات در طراحی گرافیک، همواره در حال تغییر و بروز شدن هستند.
مشتریان شما همواره نیاز دارند که هدف اصلی آنها را درک کنید و در جهت رسیدن به این هدف در کنار آنها باشید. مطالب موجود در بلاگ های آموزشی را به طور منظم دنبال کنید و در شبکه های اجتماعی همواره دنبال کننده موضوعات مرتبط با فعالیت خود باشید. این کار کمک می کند با مشکلات مشتریان بیشتر آشنا شوید و برای برطرف کردن آنها راه حل های مناسب پیدا کنید.
6- کمتر همان بیشتر است! 
این تصویر یک طرح مینیمالیست با بیشترین فضای خالی ممکن در طراحی یک وب سایت را نشان می دهد.
 
با طراحی مینیمال تا چه حد آشنا هستید؟ این سبک از طراحی مدت بسیار زیادی است که در دنیای گرافیک مد شده و هم اکنون نیز، طرفداران بسیار زیادی دارد. در این طراحی آنچه که اهمیت دارد، خالی نگه داشتن هرچه بیشتر فضا در طرح است. این کار بدین جهت صورت می گیرد که آنچه که از عناصر و الِمان های ضروری در طراحی مورد استفاده قرار می گیرد، مانند دکمه ها، تصاویر، لینک ها و… همواره بهتر به چشم بیاید و بیشتر نظر مخاطب را به خود جلب کند.
 نگاهی به سبک مینیمالیسم یا ساده گرایی در دنیای طراحی گرافیک
البته کار به همین سادگی هم نیست. باید یاد بگیرید بین فضای مثبت و فضای منفی طرح تعادل برقرار کنید و عناصر مهم و ضروری تر را با قرار دادن فضای سفید در اطراف آن برجسته تر نشان دهید. برای مثال وجود فضای خالی در اطراف تصاویر فروشگاهی در یک وب سایت، باعث می شود توجه بیشتری به سمت عکس محصول جلب شود.
برای طراحی یک وب سایت، تمرکز خود را روی یک یا دو عنصر متمرکز کنید. این دو عنصر یا ویژگی باید نقاط قوت سایت شما باشد و برند شما را هرچه بهتر به مشتری معرفی کند. برای داشتن یک طرح مینیمال تر و تمیز، هر آنچه که از هدف شما در طراحی وب سایت دور است را از طرح خود حذف کنید. تنها عناصر و المان هایی را نگه دارید که احساس می کنید استفاده از آنها برای کاربران و مخاطبان اامی است.
7- برنامه ریزی و آزمایش کنید 
اگر با برنامه پیش بروید، احتمال ارتکاب اشتباهات احتمالی کمتر خواهد بود.
 
برنامه ریزی قبل از شروع پروژه طراحی به شما کمک می کند که در مسیر طراحی از اهداف اصلی خود دور نشوید. همیشه در پروژه های طراحی اشتباهات زیادی وجود دارند که ممکن است طراحان آن ها را مرتکب شوند. برای جلوگیری از به وجود آمدن چنین اشتباهاتی باید طبق یک برنامه از پیش تعیین شده و در مسیر اصلی اهداف مورد نظر پیش بروید. اشتباهات و تجربیات قبلی را فراموش نکنید و هرگاه ایده شما مورد استقبال مخاطبان واقع نشد در برنامه طرح های بعدی آن را تقویت کنید یا سعی کنید دیگر از آن استفاده نکنید.
در نظر داشته باشید وجود برنامه قبل از شروع انجام کار، موجب منظم تر شدن هرچه بیشتر طرح نهایی شده و یک پرسپکتیو خوب یا به عبارتی چشم انداز ایده عالی را از سوی کاربران نسبت به سایت ایجاد می کند.
در پایان نیز کار انجام شده را مورد بازبینی قرار دهید تا مطمئن شوید هیچ ایراد یا مورد مشکوکی تجربه کاربری سایت شما را تهدید نمی کند. سرعت بارگذاری صفحات را چندین بار بررسی کنید و مطمئن شوید تمامی تصاویر مورد استفاده در سایت به درستی و به طور کامل نمایش داده می شوند.
از اهمیت ریسپانسیو بودن غافل نشوید و بررسی کنید که حتما سایت مورد نظر با هر صفحه نمایشی سازگار است. همچنین یک بار فرم های مورد استفاده در وب سایت را پر کنید و آنرا ثبت کنید تا مطمئن شوید با درستی کار می کنند. در نهایت تمامی لینک های موجود در سایت را تست کنید و مطمئن شوید کاربر را به جایی که می خواهید هدایت می کنند. فراموش نکنید که همواره وجود لینک های خراب و صفحات 404 از مهمترین عوامل تهدید کننده یک تجربه کاربری خوب محسوب می شود.
8- قابلیت ها را ارزیابی کنید 
با استفاده از روش های مختلف، عملکرد قسمت های مختلف سایت را تحت نظر داشته باشید.
 
قبل از اینکه کار نهایی را منتشر کنید، نگاهی به عملکرد قسمت های مختلف آن بیندازید تا مطمئن شوید همه قسمت ها به درستی کار می کنند. همچنین دقت کنید که تمامی مخاطبان باید بتوانند به راحتی از امکانات و قابلیت ها استفاده کنند بنابراین مطمئن شوید کار کردن با قسمت های مختلف رابط کاربری شما به ساده ترین شکل ممکن امکانپذیر است. از چند روش ارزیابی زیر نیز می توانید برای بهبود عملکرد خود کمک بگیرید:
ارزیابی اکتشافی: از ابزار های مختلف و متخصصان UI و UX برای پی بردن به مشکلات رابط کاربری کمک بگیرید. همچنین قابلیت گزارش دادن مشکلات فنی به تیم مدیریت را برای کاربران سایت ممکن سازید.
تست A/B: اگر مطمئنید نیستید که یک ویژگی خاص در کدام حالت کاربرپسندانه تر است از این تست استفاده کنید. برای مثال هنگامی که برای انتخاب رنگ، میان دو رنگ مختلف مردد هستید این تست می تواند کمک زیادی برای انتخاب نهایی برای شما محسوب شود. توضیحات کامل درباره این تست را در مطلب زیر مطالعه کنید.
 اصول ارزیابی عملکرد در هک رشد و معرفی تست A/B
پرسشنامه: در مورد تجربه کاربری سایت خود از بازدیدکنندگان سوال کنید. از آنها بخواهید نظرشان را در ارتباط با تجربه ای که در وب سایت شما داشته اند بیان کنند و بگویند چه قسمت های برایشان جذاب است و از چه قسمت هایی متنفر هستند. این کار به شما کمک می کند نقاط ضعف سایت خود را بهتر شناسایی کنید.
9- بازخورد های منظم دریافت کنید 
از فرم های نظرسنجی برای دریافت بازخورد بازدیدکنندگان استفاده کنید.
 
سعی کنید همیشه و در فواصل زمانی منظم برای بازدیدکنندگان فرم های نظرسنجی در داخل سایت قرار دهید تا از میزان رضایت آنها در مورد وب سایت خود آگاه شوید. هیچ چیز مانند رسیدگی به شکایت مخاطبان و حل مشکل آنها نمی تواند در بهبود تجربه کاربری برای شما مفید واقع شود. ممکن است کاربران از شلوغی و سردرگمی در سایت شما شاکی باشند و یا در روند پرداخت ها دچار مشکل شوند. معمولا کاربران سعی می کنند چنین مشکلاتی را به مدیر سایت اطلاع دهند. سعی کنید همواره این راه را برای بازدیدکنندگان باز نگه دارید تا بتوانند مشکلات و ایرادهای احتمالی را با شما در میان بگذارند.
جمع بندی: از قدرت UX غافل نشویدامروزه در طراحی سایت و سئو هیچ چیز به اندازه یک تجربه کاربری قوی برای بازدیدکنندگان اهمیت ندارد. موتورهای جستجو نیز با معیارهای مختلف و الگوریتم های بروز خود، می توانند این مورد را به خوبی از رفتار کاربران روی سایت شما ارزیابی کنند و از آن برای رتبه بندی سایت شما و سایت های رقیب استفاده کنند. بنابراین می توان مهم ترین هدف را از طراحی و بهینه سازی هر وب سایت ارتقای تجربه کاربری در آن دانست. پس سعی کنید از این مورد غافل نشوید و سایتی را طراحی کنید که هر بازدیدکننده که به سایت شما رجوع می کند، با لبخند از آن خارج شود.
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


آموزش نوشتن متن روی شیشه بارانی در فتوشاپ
در این آموزش، قصد داریم نحوه نوشتن متن روی یک شیشه بارانی با پس زمینه دلخواه را به شما همراهان همیشگی و دوست داشتنی روکسو آموزش دهیم. این بار بدون مقدمه میرویم سراغ اصل مطلب!
آنچه برای این آموزش لازم دارید
 
تصویر یک شیشه باران گرفته
فونت Yellowtail
فراموش نکنید که به جای فونت یاد شده، می توانید از هر فونت دیگری نیز استفاده کنید که در ادامه مطلب توضیح خواهیم داد. همچنین هیچ اجباری برای استفاده از تصویر شیشه بارانی که در بالا قرار داده ایم نیست و می توانید از تصاویر مشابه دیگری نیز استفاده کنید. اینگونه تصاویر در سایت های دانلود تصاویر استوک به راحتی در دسترس هستند.
 برترین وبسایت های دانلود تصویر استوک رایگان
خب، نوبت به شروع کار می رسد!
تصویر شیشه باران گرفته را در فتوشاپ باز کنید.
سپس روی لایه تصویر با فشردن کلیدهای میانبر ctrl + j یک کپی از لایه ایجاد کنید. همچنین برای این کار می توانید روی لایه تصویر راست کلیک کنید و گزینه Duplicate Layer را انتخاب کنید.
پس از آنکه همانند تصویر بالا یک کپی از عکس ایجاد کردید، تصویر دلخواه خود را به عنوان پس زمینه روی این لایه بکشید. در اینجا ما از تصویر محوطه بسیار زیبای اطراف آرامگاه باباطاهر در شهر همدان استفاده کردیم.
حال، بر روی لایه تصویر راست کلیک کنید و همانند تصویر زیر آنرا به smart object تبدیل کنید.
پس از تبدیل عکس به یک شی هوشمند، همانند تصویر زیر به منوی Filter > blur > Gaussian blur بروید.
در پنجره باز شده همانند تصویر زیر میزان درجه ماتی را روی 10 پیکسل قرار داده و آنرا تایید کنید.
مشاهده می کنید که عکس کاملا مات شد.
در مرحله بعد همانند تصویر زیر روی لایه تصویر دو بار کلیک کنید و در پنجره باز شده حالت ترکیب (blend mode) را روی گزینه overlay تنظیم کنید.
همانطور که مشاهده می کنید، ترکیب اصلی تصویر پس زمینه برای متن ما کاملا آماده شد.
حال با استفاده از فونت یاد شده یا هر فونت دلخواه دیگری، یک نوشته دلخواه با رنگ مشکی روی تصویر ایجاد کنید. دقت کنید که استفاده از رنگ مشکی برای این نوشته اامی است.
اکنون نیاز داریم که حالت ترکیب یا همان overlay blend mode را نیز روی این نوشته اعمال کنیم. برای اینکار مجددا از دستور گفته شده در بالا استفاده می کنیم. بدین صورت که همانند تصویر زیر روی لایه اصلی دو بار کلیک کرده و گزینه overlay را از لیست مقابل blend mode انتخاب می کنیم.
سپس همانند تصویر زیر از منو فیلتر گزینه liquify را انتخاب کنید.
پس از انتخاب این گزینه پنجره ای شبیه به پنجره زیر برای شما باز می شود.
همانند تصویر بالا، سایز قلم را به روی عدد 40 و pressure را نیز روی 100 تنظیم کنید و از بالا به پایین به روی قسمت های دلخواه از متن بکشید. این کار را برای ایجاد حالت سُر خوردن یا چکیدن قطرات آب روی متن انجام می دهیم. این کار تصویر نهایی را از سادگی خارج می کند و باعث می شود عکس پایانی طبیعی تر جلوه کند.
پس از انجام تغییرات گفته شده، با فشردن کلید OK تغییرات را ذخیره کرده و پنجره بسته می شود.
در اینجا تقریبا کار ما تمام شده و در صورت رضایت از طرح ایجاد شده می توانید آنرا ذخیره کنید و فتوشاپ را ببندید.
اما با توجه به تصویری که به عنوان شیشه بارانی استفاده کردیم، ممکن است بالای متن ما، کمی کمرنگ و ناخوانا به نظر برسد. برای حل این مشکل، یک کپی از لایه ایجاد می کنیم (کلید ترکیبی ctrl + j). مشاهده می کنیم که غلظت متن دو برابر شد.
پس از آن همانند تصویر زیر یک layer mask به لایه کپی اضافه می کنیم.
پس از آن، همانند تصویر زیر کلیدهای ترکیبی ctrl + i را فشار می دهیم تا layer mask ایجاد شده، درست همانند تصویر زیر سیاه شود و غلظت متن به حال اولیه برگردد.
اگر به درستی این کار را انجام دهید، همانند تصویر بالا گویا از همان اول از لایه متن کپی (duplicate) ایجاد نکردید.
حال همانند تصویر زیر ابزار brush را از منو سمت چپ فتوشاپ انتخاب کرده و رنگ را روی سفید خالص (کد رنگی ffffff#) قرار می دهیم. انتخاب این رنگ برای قلم از اهمیت بالایی برخوردار است. سایز ابزار براش دلخواه و متناسب با سایز تصویر شماست اما hardness براش حتما باید روی عدد صفر تنظیم شود تا حداکثر محو شدگی را در اطراف آن داشته باشیم.
پس از تنظیم ابزار brush، آنرا روی قسمت های بالایی متن می کشیم. هر کجا از متن که قلم را می کشید، آن قسمت از متن تیره تر خواهد شد و در عین حال مشاهده می کنید که مستطیل کنار لایه (layer mask) نیز در همان قسمت ها سفید می شود. برای تسلط بیشتر پیشنهاد می کنیم آموزش زیر را که توسط همکار خوبم در روکسو نوشته شده است را مطالعه کنید.
 همه چیز درباره ماسک لایه (Layer Mask) در فتوشاپ
خب، خسته نباشید! در اینجا کار ما به اتمام می رسد و فایل نهایی را ذخیره می کنیم. امیدواریم این آموزش مورد استفاده شما دوستان قرار گرفته باشد.
منبع: روکسو

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


ساخت یک تصویر سه بعدیمنظره و گوشی هوشمند
در این آموزش قصد داریم نحوه ساخت یک تصویر سه بعدی زیبا را با ترکیب یک تصویر منظره و با یک گوشی هوشمند در فتوشاپ به شما دوستان و همراهان دوست داشتنی روکسو آموزش دهیم.
آنچه برای این آموزش لازم دارید:
 
تصویر گوشی هوشمند
تصویر منظره مورد نظر
تصویر دو طوطی در حال پرواز
تصویر مرغ ماهیخوار
تصاویر transparent برای مبتدی ها
لازم به ذکر است در صورتی که با قوانین selection در فتوشاپ آشنایی کافی دارید و تجربه کار با ابزار های انتخاب(سلکشن) در فتوشاپ را دارید نیاز به فایل های transparent نخواهید داشت. این فایل ها تنها برای افراد مبتدی جداسازی شده است.
در اولین قدم باید تصویر گوشی هوشمندی را که در دست یک مرد قرار دارد، در فتوشاپ باز کنید. سپس روی آن دو بار کلیک کنید تا قفل آن باز شود. به جای این کار می توانید یک لایه کپی با فشردن کلید های ترکیبی ctrl + j ایجاد کنید و به اصطلاح به صورت non destructive editing کار کنید. در این حالت اولین لایه در طول ادیت دست نخورده باقی می ماند. اما ما برای سادگی کمتر و ایجاد لایه های کمتر ترجیح می دهیم به جای کپی گرفتن، با دو بار کلیک قفل آنرا باز کنیم!
سپس ابزار magic wand را از منوی سمت چپ فتوشاپ انتخاب کرده و در حالی که میزان تولرانس روی عدد 80 تنظیم است، روی صفحه نمایش گوشی هوشمند کلیک کنید تا محدوده صفحه نمایش به حالت selection دربیاید. در تصویر زیر همه چیز به وضوح مشخص است (البته دقت کنید دایره شماره دو به اشتباه روی یک لایه متفرقه وجود دارد که شما کاری با آن نخواهید داشت. منظور اصلی از این دایره دقت روی مقدار tolerance است که روی عدد 80 قرار دارد!)
سپس ابزار براش را انتخاب کرده و مد آنرا روی clear قرار داده و به روی صفحه نمایش گوشی که در حالت selection نیز قرار دارد بکشید
پس از آن همانند تصویر زیر محدوده صفحه نمایش به صورت شطرنجی درخواهد آمد. روند این مرحله به طور کامل در تصویر زیر مشخص است.
سپس تصویر منظره را به روی صفحه بکشید و اندازه آنرا مانند تصویر زیر کوچک کنید. توجه کنید تصویر بیش از حد کوچک یا بزرگ نباشد. برای داشتن تمرکز بیشتر هنگام تنظیم سایز می توانید به طور موقت میزان opacity لایه را روی عدد 70 یا 50 تنظیم کنید و پس از تغییر سایز آنرا مجدد روی 100 درصد برگردانید.
حال باید این لایه را به زیر لایه تصویر گوشی بیاورید.
پس از انجام این کار تصویر منظره تنها در محدوده صفحه نمایش گوشی دیده خواهد شد. به تصویر زیر دقت کنید.
با هم تاکید می کنیم که در صورت تغییر شفافیت در مرحله قبل، در این مرحله باید شفافیت را روی عدد 100 برگردانید.
حال از لایه تصویر منظره یک کپی ایجاد کنید. برای اینکار لایه را انتخاب کنید (روی آن یک بار کلیک کنید!) و سپس از کلیدهای ترکیبی ctrl + j استفاده کنید.
سپس لایه کپی را به بالاترین لایه بیاورید. به عبارتی دیگر لایه مرتبط با گوشی هوشمند همانند تصویر زیر میان دو لایه از تصویر منظره قرار خواهد گرفت.
ابزار براش را انتخاب کنید و در حالی که مد آن روی clear قرار دارد، قسمت های اضافی از لایه کپی را حذف کنید. منظور از قسمت های اضافی تمام قسمت های تصویر به استثای قسمت آبشار پایین تصویر است. این کار نیاز به دقت و تمرین زیاد دارد و در اولین تلاش ممکن است نتوانید آنرا به خوبی ایجاد کنید.
توجه کنید اگر این کار را به خوبی انجام داده باشید، پس از غیر فعال کردن موقتی لایه های زیرین، تصویری همانند تصویر زیر خواهید داشت که کاملا به لایه کپی از منظره (بالاترین لایه) اختصاص دارد.
خب! تا به اینجا توانستیم یک تصویر شبه سه بعدی ایجاد کنیم که گویی در آن آبشار منظره از صفحه نمایش گوشی خارج شده است!
حال برای جلوه بهتر تصویر دو طوطی و یک مرغ ماهیخوار را به کار اضافه می کنیم. اگر با ابزار سلکشن آشنایی کافی داشته باشید می توانید این تصاویر را از عکس های مربوطه استخراج کنید.
اما برای راحتی کار، ما اینکار را انجام داده و در تصویر جداگانه در ابتدای آموزش قرار داده ایم که افراد مبتدی به مشکل برنخورند.
ابتدا تصویر طوطی ها را به کار اضافه می کنیم و سایز آنرا به میزان دلخواه کوچک کرده و در محل دلخواه خود قرار می دهیم.
سپس نوبت به تصویر مرغ ماهیخوار می رسد. این تصویر را نیز دقیقا همانند تصویر طوطی ها به کار اضافه می کنیم. این تصویر را در صورت تمایل می توانید به صورت horizontal یا همان قرینه به تصویر اضافه کنید که گویی در حال خارج شدن از صفحه گوشی است!
در پایان در صورت تمایل می توانید یک افکت زیبا نیز همانند نور خورشید به تصویر اضافه کنید تا کار جذابتر به نظر برسد.
بدین منظور همانند تصوی زیر به منوی filter > render > lens flare رفته و تنظیمات دلخواه خود را همانند تصاویر زیر اعمال کنید.
سعی کنید موقعیت نور را به دقت در جایی تنظیم کنید تا تصویر طبیعی تر جلوه کند.
در آخر، عکس نهایی به شکل زیر خواهد بود:
فراموش نکنید با تلاش و حوصله بیشتر بدون شک می توانید طرح جذابتری را نیز به دست بیاورید.
در پایان امیدوارم این آموزش برای شما دوستان عزیز مفید واقع شده باشد. موفق باشید…
 
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


آموزش ایجاد متن براق و بادکنکی در فتوشاپ
در این آموزش با مراحل ساخت یک افکت متنی بادکنکی براق آشنا خواهید شد. بدون هیچ مقدمه ای برویم سراغ اصل مطلب!
 
آنچه برای این آموزش لازم دارید
 
یک فونت فانتزی و دلخواه
تصویر بوکه سیاه و سفید
تصویری محو از پائیز
تصویری از قالب های یخ
پترنی از نوشته های لاتین
ایجاد پس زمینه رنگی بوکهقدم اول: ابتدا در نرم افزار فتوشاپ یک پروژه جدید با ابعاد 1000×600 به صورت افقی ایجاد کنید.
به مسیر File > Place Linked رفته و تصویر بوکه سیاه و سفید را که در ابتدای آموزش برای دانلود قرار داده شده است، به پروژه خود اضافه کنید.
اندازه تصویر را به اندازه سند بزرگ تر کنید.
سپس نام لایه را به Bokeh Texture تغییر دهید.
قدم دوم: تصویر محو پائیز را که در ابتدای این مطلب دانلود کرده اید، همانند تصویر اول در بالای لایه Bokeh Texture اضافه کنید.
نام لایه را به Color Texture تغییر دهید.
سپس Blend Mode یا وضعیت این لایه را روی Color بگذارید. همچنین در صورت نیاز اندازه تصویر را تغییر دهید.
(توجه کنید که در تصویر زیر Blend Mode روی Soft Light می باشد که باید این گزینه را روی Color بگذارید.)
ایجاد لایه متنقدم اول: متن مورد نظر خود را با فونت Sleepy Fat Cat یا هر فونت دلخواه دیگری بنویسید.
در پنل Character اندازه فونت را 215pt در نظر بگیرید و فاصله ی حروف از یکدیگر را به 10 تغییر دهید.
قدم دوم: در پنل لایه ها، لایه متن را انتخاب کنید.
Fill لایه را به مقدار 0 تغییر دهید و از آن با استفاده از کلیدهای Ctrl+J یک کپی بگیرید.
دادن افکت های مختلف به لایه متنروی لایه اصلی متن دوبار کلیک کنید و در پنل Blending Options:
قدم اول: یک Bevel and Emboss با تنظیمات زیر اضافه کنید:
Depth: 200
Size: 35
تیک Use Global Light را بردارید
Angle: 40
Altitude: 50
Gloss Contour: Valley – Low
تیک Anti-aliased را بزنید.
Highlight Mode: Linear Light
Opacity: 100%

Shadow Mode: Screen
Color: #888888
Opacity: 70%

توجه داشته باشید که شکل نمودار Gloss Contour را می توانید با دوبار کلیک بر روی آن، خودتان به صورت دستی تغییر دهید.
قدم دوم: یک Contour با این تنظیمات در نظر بگیرید:
Contour: Log
تیک Anti-aliased را بزنید.
همانند مرحله قبل، می توانید بر روی نمودار مقابل Contour دوبار کلیک کنید تا پنجره ی تنظیم نمودار ظاهر شود و سپس نموداری که در تصویر زیر می بینید، به صورت دستی ایجاد کنید.
حالا بر روی دکمه ی OK در این پنل کلیک کنید تا پنجره بسته شود.
قدم سوم: در منوی فتوشاپ به مسیر File > Open بروید و تصویر پترن نوشته های لاتین را که در ابتدای مطلب دانلود کرده اید، باز کنید.
حالا به مسیر Edit > Define Pattern بروید. در پنجره ای که باز می شود، یک نام دلخواه مثلا Text Pattern را وارد نمائید.
به این ترتیب، عکس به پترن تبدیل می شود.
حالا دوبار بر روی لایه ی اصلی متن در پنل لایه ها کلیک کنید تا مجددا وارد پنل Blending Options شوید.
در کنار Texture تیک بزنید و در قسمت Pattern، بر روی باکس مربوط به انتخاب پنل کلیک کنید.
در این قسمت پترن نوشته های لاتین را انتخاب کنید و این تنظیمات را انجام دهید:
Depth: +100
Scale: 200%
قدم چهارم: یک Inner Shadow با تنظیمات زیر اضافه کنید:
Blend Mode: Color Dodge
در کادر انتخاب رنگ، رنگ سفید با کد#ffffff را انتخاب کنید.
Opacity: 25%
تیک Use Global Light بزنید
Angle: -108
Distance: 10
Size: 10
قدم پنجم: Color Overlay را با تنظیمات زیر اضافه نمائید:
در باکس انتخاب رنگ، کد رنگی #e0dadb را وارد کنید.
Blend Mode: Multiply
قدم ششم: در قسمت Gradient Overlay این موارد را لحاظ کنید:
Dither را تیک بزنید
Blend Mode: Linear Burn
Opacity: 50%
بر روی نوار مقابل Gradient کلیک کنید. یک گرادینت با رنگ #ec3017 در سمت چپ طیف و #00a0a4 در سمت راست طیف گرادینت ایجاد کنید. موقعیت نشانگر رنگ سمت راست، 80 و موقعیت نشانگر رنگ سمت چپ، 20 باشد.
قدم هفتم: در مقابل Drop Shadow تیک بزنید و تنظیمات زیر را در این بخش وارد نمائید:
Opacity: 15%
Distance: 10
Spread: 30
Size: 10
Angle: 120
اگر تمام مراحل را درست رفته باشید، افکت اصلی ایجاد شده مانند تصویر زیر خواهد بود:
افزودن حاشیه به متنروی لایه کپی متن دوبار کلیک کنید و:
قدم اول: یک Bevel and Emboss با تنظیمات زیر اضافه کنید:
Style: Stroke Emboss
Size: 7
Soften: 1
تیک Use Global Light را بزنید.
Angle: 60
Altitude: 60
Gloss Contour: Cove – Deep
تیک Anti-aliased را بزنید.
Highlight Mode: Linear Light
Opacity: 100%

Shadow Mode: Screen
Color: #888888
Opacity: 70%

قدم دوم: یک Contour با تنظیمات زیر اضافه نمائید:
Contour: Cone – Inverted
تیک Anti-aliased را بزنید.
قدم سوم: در بخش Stroke این موارد را تنظیم نمائید:
Size: 5
Opacity: 0%
قدم چهارم: Color Overlay را تیک بزنید و این موارد را در پنل مربوط به آن وارد کنید:
Color:#5c5c5c
Blend Mode: Overlay
این کار باعت می شود که یک حاشیه به اطراف متن اضافه شود و رنگ ها را تشدید کند.
در نهایت روی دکمه OK کلیک کنید تا پنجره Blending Options بسته شود.
نتیجه باید به صورت زیر باشد:
افزودن تکسچر یخقدم اول: تصویر تکسچر تکه های یخ را که در ابتدای این آموزش برای دانلود قرار داده شده است، دانلود و به پروژه اضافه کنید. آن را بالای لایه ها قرار دهید.
نام این لایه را به Texture Overlay تغییر دهید و Blend Mode را برای آن روی Overlay بگذارید.
در صورت نیاز اندازه آن را تغییر دهید.
قدم دوم: Ctrl را گرفته سپس روی آی کوچک کنار لایه کپی متن در پنل لایه ها کلیک کنید تا اطراف متن به حالت انتخاب در بیاید.
قدم سوم: سپس روی آی Add layer mask واقع در پایین پنل لایه ها کلیک تا یک ماسک از ناحیه انتخابی ایجاد شود.
پایان طراحی افکت متنی بادکنکی براقتبریک! به پایان آموزش رسیدیم. افکت متنی براق و بادکنکی جذاب شما آماده است!
امیدوارم این مطلب برای شما لذت بخش بوده باشد و از مراحل آن استفاده کافی را برده باشید. شما می توانید با کار با پنل Blending Options در فتوشاپ، به نتایج حیرت انگیزی برسید.
 
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


چگونه در فتوشاپ یک افکت متنی دابل اکسپوژر ایجاد کنیم؟
این روزها حتما تصاویر زیادی که با افکت دابل اکسپوژر ایجاد شده‌اند، دیده‌اید. دابل اکسپوژر افکتی متداول خصوصا در میان عکاسان است که از تلفیق دو تصویر، یک تصویر مفهومی ایجاد می‌کند.
در این آموزش به شما خواهیم گفت که چگونه دو تصویر را به کار بگیرید، ترکیب کنید و در نهایت با تنظیمات دقیق یک تصویر دابل اکسپوژر خلاقانه ایجاد کنید. با ما همراه باشید.
آنچه برای این آموزش لازم دارید:
 
فونت انگلیسی Peace Sans Regular
تصویر بدون پس زمینه از شاخه های درخت
تصویری از ساختمان ها
مرحله اول: متن را ایجاد کنیدقدم اول: یک پروژه جدید را با ابعاد 1500 در 1000 پیکسل در فتوشاپ ایجاد کنید و رنگ زمینه آن‌ را سفید انتخاب کنید.
با فونت Peace Sans Regular یک متن دلخواه با حروف بزرگ انگلیسی بنویسید و از یک سایز نسبتا بزرگ استفاده کنید که در نهایت تمام جزئیات طرح روی آن قابل مشاهده باشد. (بعنوان مثال ما اندازه 500 را برای نوشته خود انتخاب و فاصله حروف را 100 تنظیم کردیم.). شما می‌توانید هر اندازه دلخواه را در نظر بگیرید.
در پنل لایه‌ها یک لایه جدید در بالای نوشته خود ایجاد کنید و روی این لایه‌ی جدید تصویر شاخه های درخت (که در ابتدای این آموزش برای دانلود قرار داده شده است) را قرار دهید و اندازه آن را به حد مناسب تغییر دهید.
مرحله دوم: ایجاد ماسک برای شاخه‌هاقدم اول: حروف متن ایجاد شده را با پائین نگه داشتن کلید Ctrl و یکبار کلیک کردن بر آی لایه این متن (Thumbnail) در حالت انتخاب قرار دهید.
قدم دوم: از پنل ابزار، Rectangular Marquee Tool را انتخاب کنید. در قسمت تنظیمات این ابزار در بالای نرم‌افزار، مطابق تصویر Intersect with selection را انتخاب کنید.
سپس دور اولین حرف نوشته خود درگ کرده و کادر بکشید.
قدم سوم: این کار تمام حروف را از انتخاب خارج می‌کند و فقط حرف اول را در حالت انتخاب نگه می‌دارد.
قدم چهارم: حالا لایه شاخه‌ها را انتخاب کنید سپس در قسمت پائینی پنل لایه‌ها، آی Add layer mask را انتخاب کنید.
قدم پنجم: یک کپی از لایه شاخه‌ها ایجاد کنید و تمام مراحل فوق را برای تک تک حروف نوشته خود تکرار کنید. بنابراین لایه شاخه‌ها باید تک‌تک حروف را ماسک کرده‌ باشد.
مرحله سوم: شاخه‌ها را درون حروف جای دهیدقدم اول: بر آی چشم کناریِ لایه اصلی و اولیه نوشته خود، یکبار کلیک کرده و لایه مذکور را در حالت مخفی قرار دهید.
قدم دوم: توجه کنید که در پنل لایه‌ها، بین شاخه‌ها و حروف کلمه‌تان یک آی زنجیر وجود دارد. با یکبار کلیک روی این آی، ارتباط بین این دو را قطع کنید. این کار به شما اجازه می‌دهد که ماسک را به صورت تکی و مستقل، هرجای حروف حرکت دهید.
حالا می‌توانید Ctrl+T را بفشارید تا بتوانید ماسک شاخه‌ها را ه دلخواه بچرخانید، جابجا کنید یا اندازه آن را تغییر دهید.
قدم سوم: مراحل فوق را برای تک‌تک حروف تکرار کنید. یادتان نرود حتما آی زنجیر بین حروف و ماسک مخفی نگه‌دارید.
تمام لایه‌های ماسک شده با شاخه‌ها را داخل یک گروه قرار دهید و نام آن را Text بگذارید.
مرحله چهارم: ایجاد Gradiant Map برای متن و اضافه کردن تکسچرقدم اول: در قسمت پائینی پنل لایه‌ها گزینه‌ای به نام Create new fill or adjustment layer وجود دارد. روی آن کلیک کنید و سپس Gradient Map را انتخاب کنید.
قدم دوم: در این قسمت طیف رنگی دلخواه خود را ایجاد کنید. برای این کار لازم است روی نقاط مورد نظرتان در نوار طویل موجود در بخش تنظیمات گرادیانت کلیک کرده و در قسمت مربوطه، کد رنگی دلخواه خود را وارد کنید یا با قطره‌چکان بر روی رنگ دلخواه کلیک کنید.
پیشنهاد ما در این آموزش این کدهای رنگی است که باید به ترتیب از چپ به راست و در موقعیتهای تعریف شده در مقابلشان اعمال شوند:
• #282828 – 0%
• #5c5353 – 25%
• #877a7a – 50%
• #ada3a3 – 75%
• #f1eded – 100%
قدم سوم: حالا نوبت عکس دوم است. تصویر ساختمان‌های نیویورک را که در ابتدای این آموزش برایتان قرار دادیم، به عنوان یک لایه جدید و در بالای تمام لایه‌ها قرار دهید. این تصویر را به اندازه دلخواه کوچک یا بزرگ کنید.
کلید Ctrl را از صفحه کلید بفشارید و همزمان بر ایکن لایه این تصویر در پنل لایه ها (Thumbnail) یکبار کلیک کنید تا در حالت انتخاب قرار گیرد.
حالا گزینه Add Layer Mask را از قسمت پائینی پنل لایه‌ها انتخاب کنید تا این تصویر را به صورت یک ماسک درآورید.
با این‌ کار پروسه ایجاد تصویر دابل اکسپوژر ما به پایان می‌رسد اما هنوز چند کار کوچک باقیست!
مرحله پنجم: تنظیم رنگقدم اول: یک Gradient Map دیگر در بالای تمامی لایه‌ها ایجاد کنید و گستره آن را به صورت زیر در به ترتیب چپ، وسط و راست تنظیم کنید:
#48406e
#76747e
#fbc690
سپس Opacity یا وضوح این لایه را روی 35% قرار دهید.
قدم دوم: یک لایه تنظیم سطوح رنگی را بعنوان بالاترین لایه ایجاد کنید. بدین منظور در پنل Adjustment، آی Levels را برگزینید. (اگر در فتوشاپ شما پنل Adjustment قابل مشاهده نیست، می‌توانید از مسیر Window > Adjustment آن را ظاهر کنید.)
حالا برای هر سه کانال این تنظیمات را انجام دهید:
افکت متنی دابل اکسپوژر شما آماده است! در این آموزش ما ابتدا حروف یک کلمه را با براش پوشش دادیم و پس از تنظیم رنگ یک پوشش دیگر با یک عکس دلخواه ایجاد کردیم. در نهایت با تنظیم کانالهای رنگی، یک متن دابل اکسپوژر با کیفیت ایجاد کردیم.
 
منبع: روکسو

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


راهنمای جامع انتخاب رنگ در طراحی وب سایت (قسمت دوم)
در آموزش قبل راهنمای مختصری از روانشناسی و معانی رنگ ها و نیز پر طرفدارترین تئوری های ترکیب رنگ در چرخه ی رنگ ها را برای شما عزیزان ارائه دادیم. در این درس سایر مباحث باقی مانده از راهنمای جامع انتخاب و ترکیب رنگ در طراحی وب سایت را به شما همراهان عزیز روکسو آموزش می دهیم.
انتخاب رنگ پایه (اصلی)
برای شروع فرآیند ترکیب رنگ هنگام طراحی وب سایت، اولویت، انتخاب یک رنگ به عنوان رنگ پایه یا همان رنگ اصلی وب سایت است. رنگ های ثانویه یا به عبارتی رنگ های دوم و سوم (حتی در موقع رنگ چهارم) متناسب با رنگ اول و با توجه به تئوری های انتخاب رنگ روی چرخه رنگ ها انجام می شود.
رنگ پایه را می توانید همان رنگ سازمانی برند و یا رنگ لوگو در نظر بگیرید. اگر برند هنوز فاقد رنگ سازمانی است و یا لوگوی برند هنوز طراحی نشده است می توانید با توجه به روانشناسی رنگ ها، رنگ متناسب با نیاز و اهداف وب سایت را انتخاب کنید.
توسعه رنگ ها و سایه ها
پس از انتخاب رنگ پایه، نوبت به انتخاب رنگ های ثانویه برای طرح وب سایت می باشد. برخی وب سایت ها تنها از یک رنگ برای طرح خود استفاده می کنند اما در این حالت نیز از همان رنگ در چند درجه تیره تر یا روشن تر برای قسمت های مختلف یا سایه های سایت استفاده می شود. برای مثال در تصویر بالا از نسخه تیره تر رنگ نارنجی پایه برای دکمه Add to cart استفاده شده است.
اگر دوست ندارید تنها از یک رنگ برای طرح وب سایت استفاده کنید، با توجه به تئوری رنگ ها (رنگ های متضاد، مکمل و مشابه) رنگ های ثانویه مورد نیاز را انتخاب کنید. یکی از ابزارهایی که در این زمینه می تواند به شما کمک کند ابزار تحت وبAdobe Color Wheel است. این ابزار توسط کمپانی معروف Adobe برای طراحان و گرافیست ها ایجاد شده است. البته ممکن است به دلیل محدودیت هایی که شرکت برای کاربران ایرانی در نظر گرفته است، برای مشاهده وب سایت نیاز به برخی برنامه ها داشته باشید! همچنین در تست اخیر ما این ابزار با مرورگر فایرفاکس و گوگل کروم باز نشد و مجبور شدیم از مرورگر IE برای مشاهده ابزار استفاده کنیم. به هر حال این ابزار در کنار ابزار هایی که در مقاله زیر معرفی کرده ایم بهترین ابزار ها برای ترکیب رنگ در پروژه های گرافیست ها می باشد.
 بهترین ابزارهای آنلاین تنظیم رنگ برای طراحان
قانون 60-30-10
این قانون در واقع یک تکنیک ساده اما موثر در ترکیب رنگ های مختلف است. بر اساس این قانون برای ایجاد هماهنگی بین رنگ های مورد استفاده در وب سایت بهتر است از نسبت های 60% – 30% – 10% استفاده شود. به عبارتی ساده تر 60 درصد از طرح را رنگ پایه تشکیل داده، 30 درصد را رنگ دوم و 10 درصد نیز رنگ سومی که در طرح مورد استفاده قرار گرفته شده است. در موارد محدودی ممکن است 4 رنگ در طرح مورد استفاده قرار بگیرند که در این حالت نیز سهم رنگ چهارم نیز همان 10 درصد و ترکیب کلی نیز 110 درصد خوهد بود!
بر اساس تحقیقات صورت گرفته، این ترکیب برای چشم انسان بسیار خوشایند است. زیرا در طرح هایی که بر اساس این قانون رنگ ها در آنها به کار می رود عناصر بصری به تدریج برای چشم ظاهر می شوند. البته این قانون تنها در طراحی و گرافیک مد نظر نیست و در حاشیه بد نیست بگوییم این قانون یک تکنیک بسیار پرطرفدار و معروف در میان طراحان دکوراسیون است.
کنتراست (تضاد)
کنتراست رنگ بخش مهمی از یک ترکیب بصری است. برای مثال هنگامی که قصد دارید توجه بازدیدکننده را به بخش خاصی از وب سایت جلب کنید می توانید از کنتراست یا همان تضاد رنگی در آن قسمت استفاده کنید. البته دقت داشته باشید کنتراست شدید در طراحی سایت مفید نمی باشد، چرا که ممکن است خوانایی متن را در قسمت هایی برای مخاطب دشوار کند. پیشنهاد ما این است که کنتراست رنگی را در اکثر بخش های سایت در حد متوسط نگه دارید و تنها در قسمت هایی که نیاز به جلب توجه می باشد از  تضاد رنگی بالا استفاده کنید.
کار کردن با تصاویر
گاهی اوقات شروع کردن با یک تصویر می تواند بسیار مفید باشد. اگر تصویری در ذهن دارید که می تواند برند شما را به خوبی تعریف کند یا تصویری وجود دارد که مطمئن هستید مشتریان به آن علاقه دارند می توانید رنگ پایه را از روی آن انتخاب کنید. البته در نظر داشته باشید کار کردن با چند تصویر مختلف به شکل همزمان می تواند بسیار دشوار باشد، زیرا در این حالت تنظیم تعادل رنگ بسیار دشوار خواهد شد. برای حل این مشکل پیشنهاد می کنیم از راهکار های زیر استفاده کنید:
استفاده از رنگ های خنثی برای ایجاد تعادل در رنگ ها
کاهش تنوع رنگی تصاویر
استفاده از یک لایه ی گرادینت روی تصویر با رنگ هایی که برای وب سایت انتخاب کرده اید (با شفافیت کم – 30 تا 50 درصد)
استفاده از یک افکت یکسان مانند سیاه و سفید کردن تصاویر
در نهایت بسته به این که کدام مورد می تواند برای طرح وب سایت شما راه حل مناسبی باشد، می توانید تصاویر وب سایت را به بهترین شکل با هم ترکیب و هماهنگ کنید.
جمع بندیرنگ ها در همه جای زندگی ما حضور دارند و زمانی که به درستی مورد استفاده قرار بگیرند می توانند هر نوع اقدام یا احساسی را که مورد نظر طراح است، در مخاطب تقویت کنند. البته فراموش نکنید رنگ ها اگرچه ارزش بسیار زیادی دارند و اهمیت بسیار بالای آنها غیر قابل انکار است، اما همه ی کار نیستند. رنگ ها تنها یکی از چندین ابزاری هستند که در یک طراحی کامل و چشم نواز مورد استفاده قرار می گیرند بنابراین قرار نیست تمام تمرکز گرافیست به هنگام طراحی به روی رنگ ها باشد.
در پایان امیدواریم نکات گفته شده مورد استفاده شما عزیزان قرار گرفته باشد. همچنین در نظر داشته باشید که در طراحی هیچ قاعده ای وجود ندارد که رعایت آن اامی باشد و نتوان از آن سرپیچی کرد. همواره بهترین طراحان، افرادی هستند که قوانین را می شکنند و ایده های جدید خلق می کنند. پیشنهاد ما این است از روانشناسی رنگ ها و چرخه ی رنگ ها کمک بگیرید و در عین حال ایده ها و خلاقیت خود را نیز دست کم نگیرید، بدون شک در مواقع بسیاری ایده های غریزی شما می تواند بسیار مفید واقع شود.
 
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


راهنمای جامع انتخاب رنگ در طراحی وب سایت (قسمت اول)
 
انتخاب رنگ های مناسب برای پروژه های طراحی وب سایت اغلب انتخاب های چالش برانگیزی است. همانطور که می دانید، متن ها و نوشته ها، قسمت هایی از وب سایت هستند که سرعت برقراری ارتباط آن ها با مخاطبان کم است در حالی رنگ ها در یک سایت با سرعت بسیار بالا و در سطح وسیع، بر روی احساسات مخاطب اثر گذاشته و توجه آن‌ ها بیشتر خود جلب می کند. بنابراین انتخاب های رنگی صحیح می تواند بر درک و توصیف مخاطب از محتوای وب سایت شما تاثیر گذاشته و تجربه کاربری مثبت و بهتری را برای وب سایت شما به ارمغان بیاورد.
به طور خلاصه رنگ ها سریعترین و مستقیم ترین روش ارتباط با بیننده محسوب می شود. اگرچه این موضوع در ابتدا ممکن است کمی پیچیده به نظر برسد اما شما به راحتی می توانید با دانشی که در زمینه تئوری و معانی رنگ ها وجود دارد و همچنین استفاده از قوانین ترکیب رنگ ها که در این مقاله شرح خواهیم داد، بهترین انتخاب را برای پروژه های طراحی خود، نه تنها در زمینه وب سایت، بلکه در تمام زمینه های طراحی گرافیک داشته باشید.
رنگ های مختلف چه معنایی دارند؟
همانطور که در آموزش های قبل نیز توضیح دادیم انتخاب رنگ ها یک مفهوم بسیار پیچیده تر از یک نظر شخصی است. به عبارتی دیگر اینطور نیست که صرفا با توجه به میل شخصی خود رنگ ها را در طراحی به کار بگیریم. در تئوری های روانشناسی هر یک از رنگ ها معنا و مفهوم خاصی را به مخاطبان منتقل می کند. با توجه به اینکه در آموزش های قبل مفهوم روانشناسی رنگ ها را به طور جزئی مورد بررسی قرار دادیم در این قسمت تنها به یک خلاصه و یادآوری از معانی رنگ ها بسنده می کنیم.
رنگ های گرم مانند قرمز، نارنجی، صورتی و زرد رنگ هایی هستند که احساس شور و اشتیاق و انرژی در مخاطبان ایجاد می کند و بهتر است برای تعادل با رنگ های خنک و خنثی ترکیب شوند. اینگونه رنگ ها موجب تحریک بیشتر مخاطبان می شود. به همین خاطر در طرح های مرتبط با غذا و یا رستوران ها به وضوح شاهد استفاده از رنگ قرمز هستیم.
رنگ های سرد مانند سبز، آبی و بنفش احساس آرامش، خونسردی، اعتماد و اعتبار را برای مخاطبان القا می کند. رنگ سبز نماد تازگی و بنفش نیز حس لوکس و لاکچری بودن را انتقال می دهد. رنگ بسیار پر طرفدار آبی نیز در جاهایی که نیاز به حس اعتبار و اعتماد است همانند بانک ها و موسسات مالی به شدت مورد استفاده قرار می گیرد. مراقب باشید استفاده بیش از حد از این رنگ ها احساس سرد و غیر شخصی ایجاد می کند.
رنگ های خنثی نیز مانند خاکستری، قهوه ای و مشکی نیز بیشتر برای ایجاد تعادل با رنگ های گرم یا سرد ترکیب می شوند. خاکستری نشانه ی احترام، صبر و در مواقعی هوشمندی است. قهوه ای نیز رنگی ساده با ایجاد حس صمیمیت، اعتبار و استقامت است. رنگ مشکی نیز انتخاب جسورانه ای برای انتقال حس رسمی بودن، قدرت، جدیت، دراماتیک و حتی لاکچری بودن است.
در صورت تمایل به یادگیری بیشتر در این زمینه مقاله زیر را مطالعه کنید.
معنی رنگ ها و هنر استفاده از آن ها در طراحی
تئوری رنگ‌ ها در طراحی صفحات وبحالا که به خوبی می دانید رنگ ها چگونه احساس مخاطبان را تحت تاثیر قرار می دهند، باید یاد بگیرید که چگونه با ترکیب هرچه بهتر این رنگ ها، از آنها به طور عمدی برای نفوذ بیشتر در رفتار کاربران و مخاطبان در وب سایت مورد نظر استفاده کنید و احساس مورد نظر خود را انتقال داده و یا رفتارهای مورد نظر خود را در آنها به وجود بیاورید.
تئوری رنگ ها، دانشِ بکارگیری رنگ‌ های مناسب در چرخه رنگ هاست. بر اساس تئوری رنگ ها، سه ساختار کلی برای طراحی صفحات وب مورد پذیرش است که عبارتند از: رنگ های متضاد، رنگ های مکمل و رنگ های مشابه 
 
چرخه رنگ
 
1- رنگ های متضاد: رنگ های متضاد که به صورت مثلث در چرخه رنگ به یکدیگر مرتبط می شوند، می توانند تمرکز بصری را روی سوژه های موجود در طرح افزایش دهند. ترکیب رنگ زرد با رنگ های آبی و قرمز نمونه ای از چنین ترکیبی به شمار می رود.
 
نمونه ای از ترکیب رنگ های کنار یکدیگر در طراحی وب سایت
 
2- رنگ های مکمل: رنگ های مکمل رنگ هایی هستند که یکدیگر را خنثی می کنند و موجب به وجود آمدن تعادل رنگی در طرح می شوند. این رنگ ها در چرخه ی رنگ رو به روی یکدیگر قرار می گیرند. مانند قرمز و سبز. ترکیب چنین رنگ هایی در طرح زیبایی بصری و چشم نوازی برای مخاطب ایجاد می کند. به چرخه رنگی زیر و نمونه طراحی بعد از آن دقت کنید.
 
نمونه ای از ترکیب رنگ های متضاد در طراحی سایت
 
3- رنگ های مشابه: همچنین از ترکیب رنگ های کنار یکدیگر در چرخه رنگ نیز می توان طرح های بسیار جذابی خلق کرد. چنین مواقعی یک رنگ روشن احساس شور و انرژی و یک رنگ تیره تر در کنار آن آرامش خاصی را به مخاطب القا کرده و تعادل رنگی مناسبی ایجاد می کند. استفاده از این تئوری به مراتب نیازمند مهارت و تسلط بیشتری نسبت به سایر تئوری های معرفی شده می باشد.
 
نمونه ای از ترکیب رنگ های کنار یکدیگر در طراحی وب سایت
 
سه ساختار رنگی بالا در چرخه رنگی، پذیرفته شده ترین تئوری های رنگی برای استفاده در پروژه های طراحی گرافیک است.
همچنین در مقاله زیر برترین ابزارهای آنلاین برای انتخاب و ترکیب رنگ ها با توجه به تئوری های معروف و پرطرفدار را برای شما عزیزان معرفی کرده ایم.
بهترین ابزارهای آنلاین تنظیم رنگ برای طراحان
در درس بعد نحوه استفاده از رنگ های پایه و ترکیب آن با سایر رنگ ها با توجه به چند تئوری و قانون دیگر را مورد بررسی قرار خواهیم داد.
 
 
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


آموزش ساخت افکت متنی فی با لبه های براق و درخشان
افکت های متنی به ویژه از نوع فی و درخشان، طرافداران بسیاری دارند. خلق این افکت ها به تکنیک های پیچیده ای نیاز ندارد اما لازم است با انواع استایل لایه ها در فتوشاپ آشنا باشید.
در این آموزش به صورت مرحله به مرحله توضیح می دهیم که چطور می توانید یک افکت متنی براق فی با استفاده از Layer Styles یا پنل Blending Options در فتوشاپ ایجاد کنید.
آنچه برای این آموزش لازم دارید:
 
فونت Amaz Obitaem Ostrov
پترن ف سبز
ساخت پس زمینهقدم اول: پیش از هر کاری و در ابتدا باید پترنی را که در ابتدای آموزش دانلود کرده اید، نصب نمائید. بدین منظور کافیست روی آی پترن ف سبز (که در ابتدای این آموزش دانلود کرده اید) دوبار کلیک کنید.
قدم دوم: فتوشاپ را باز و یک سند جدید ایجاد کنید. عرض این سند جدید را 600 پیکسل، ارتفاع آن را 500 پیکسل و رزولوشن رو 72ppi قرار دهید.
قدم سوم: در پنل لایه ها، روی لایه پس زمینه (Background) راست کلیک کرده و سپس گزینه Duplicate را برگزینید تا یک کپی از آن ایجاد شود.
نام لایه جدید را به Background Pattern تغییر دهید.
قدم چهارم: بر روی این لایه ی جدید دوبار کلیک کنید تا پنجره Layer Style یا Blending Options در مقابل شما باز شود.
به Pattern Overlay رفته و با کلیک بر روی جعبه ی مقابل Pattern، پترن ف سبز را انتخاب کنید. مقدار Scale را به 50% تغیر دهید و هر موقع که از این پترن استفاده می کنید، روی Snap to Origin کلیک کنید.
قدم پنجم: برای اینکه مرکز تصویر از اطراف آن روشن تر شود به Inner Shadow مراجعه کنید و تنظیمات زیر را وارد نمائید:
قدم ششم: حالا میخواهیم پرتوی نوری را به صحنه بیفزائیم. برای این کار به قسمت Bevel & Emboss رفته و تنظیماتی که در تصویر زیر مشاهده می کنید، وارد نمائید.
توجه داشته باشید که Gloss Contour را خودتان باید تنظیم کنید. برای این کار از تصویر زیر کمک بگیرید.
ساخت متنقدم اول: با استفاده از فونت Amaz Obitaem Ostrov که در ابتدای این درس در اختیار شما عزیزان قرار گرفته است، کلمه Shine یا هر کلمه ی دلخواهی را تایپ کنید.
سایز فونت را 0pt قرار دهید و نام لایه ی متنی را به shine top تغییر دهید.
قدم دوم: از لایه متن دو کپی ایجاد کنید (Duplicate) و نام آن ها را به shine mid و shine bot تغییر دهید.
هر دو لایه جدید را زیر لایه ی shine top قرار دهید و آن ها را غیر فعال (مخفی) کنید تا بهتر بتوانید کار کنید. چون فعلا از آن ها استفاده نمی کنیم.
استایل دادن به متنقدم اول: دوبار روی لایه shine top کلیک کنید تا پنجره ی استایل لایه یا همان Layer Style باز شود.
به Pattern Overlay بروید و پترن ف سبز را انتخاب کنید. Scale را 50% قرار داده و روی Snap to Origin کلیک کنید.
قدم دوم: حالا باید کمی سایه به متن اضافه کنیم تا برجسته به نظر برسد.
بدیم منظور دوباره به پنل استایل ها و سپس به Drop Shadow مراجعه و مقادیر زیر را وارد کنید:
قدم سوم: اینبار به قسمت Gradient Overlay رفته و مقادیر زیر را وارد کنید.
بدین ترتیب یک طیف رنگی که از سبز تیره به سبز روشن رفته است، به متن اعمال می شود.
قدم چهارم: حالا برای اینکه متن را براق جلوه دهیم، به پنجره استایل ها میرویم و تغییراتی در Bevel & Emboss ایجاد می کنیم.
در این قسمت نیز شما باید Gloss Contour را خودتان بسازید، پس خوب به مقادیر دقت داشته باشید.
قدم پنجم: به بخش Satin بروید و مقادیر زیر را وارد کنید تا متن روشن تر شود. (Contour زیر به صورت پیش فرض در فتوشاپ وجود دارد Cove – Deep)
قدم ششم: اکنون می خواهیم افکت براقی را که ساخته ایم، با اضافه کردن کمی درخشندگی بهبود بخشیم.
بنابراین در بخش Inner Glow تنظیماتی را که در تصویر زیر می بینید، انجام دهید. (Contour زیر به صورت پیش فرض در فتوشاپ وجود دارد: Con)
قدم هفتم: حالا نوبت Stroke است! به این قسمت رفته و برای روشن تر کردن لبه ها تنظیمات زیر را وارد کنید:
قدم هفتم: حالا زمان آن رسیده که نور پس زمینه را اصلاح کنیم.
برای اضافه کردن کمی نور و درخشندگی به لبه های حروف باید از قسمت Outer Glow با تنظیمات زیر استفاده کنیم. (Contour زیر به صورت پیش فرض در فتوشاپ وجود داره Con)
استایل دادن به لایه Shine Midقدم اول: در این بخش می خواهیم روی لایه ی shine mid کار کنیم، پس لایه را به حالت فعال در بیاورید.
ما باید به یک جلوه ی پرسپکتیو دست پیدا کنیم. در اولین قدم به پنل Character رفته و مقدار Tracking را به -60 تغیر دهید. (اگر پنل Character در فتوشاپ شما باز نیست، کافیست به مسیر Window > Character بروید.)
قدم دوم: برای هماهنگ کردن رنگ دو لایه، در Gradient Overlay مقادیر زیر را وارد کنید.
قدم سوم: در Inner Shadow این تنظیمات را انجام دهید:
قدم چهارم: حالا به متن کمی سایه اضافه می کنیم تا از پس زمینه جدا بنظر برسد. پس در بخش های Drop Shadow و Outer Glow، تنظیماتی که در تصاویر زیر مشاهده می کنید، وارد نمائید:
استایل دادن به لایه Shine Botقدم آخر ما یک جلوه ویژه و خیره کننده به صحنه می بخشد. در این مرحله با لایه shine bot سر و کار داریم. آن را فعال و انتخاب کنید.
به پنل Character رفته و مقدار Vertically Scale را به 115% تغییر دهید و baseline shift رو هم روی -10 بگذارید. رنگ متن را هم زرد با کد رنگی #ffd74b در نظر بگیرید.
تبریک می گوئیم. شما توانستید یک افکت حرفه ای فی براق و برجسته را تنها با کمک قسمت های مختلف پنل Layer Style ایجاد کنید. امیدواریم از این آموزش لذت برده باشید. نظرات و پیشنهادات خود را زیر همین پست با ما در میان بگذارید. متشکریم که روکسو را انتخاب کردید.
 
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


امسال تمرکز گرافیست ها بیشتر روی کدام موضوعات است؟
 
پزشکان، مربیان، اینفلوئنسرها یا سلبریتی های اینستاگرام! این ها نام صنایع یا بهتر بگوییم موضوعاتی هستند که طبق بررسی ها پیش بینی می شود در سال 2019 طراحان گرافیک را سرگرم خود کنند.
طبق تجزیه و تحلیل هایی که ما از سال 2013 داشتیم، وابستگی سه صنعت نامبرده به طراحی گرافیک روز به روز بیشتر می شود و احتمالا در سال های 2019 و 2020 به اوج خود می رسند. به عبارتی دیگر انتظار می رود این سه صنعت در سال آتی حسابی گرافیست ها را به موضوع خود مشغول کنند!
1- پزشکی و سلامتی
اپلیکیشن هایی با موضوع پزشکان مجازی، برنامه هایی در زمینه پیدا کردن پزشکان نزدیک شما و تعیین وقت ویزیت با پزشکان، برنامه های ارائه دهنده مراقبت های بهداشتی و سلامتی و… جدیدا بسیار مورد استفاده مردم قرار گرفته اند. همانطور که در اینفوگرافی نیز مشاهده می کنید این صنعت از سال 2013 تا به امروز 48 درصد رشد داشته است که به نظر می رسد این رقم در سال آینده نیز بیشتر خواهد شد.
چرا الان؟!
ساده بگوییم، رشد تکنولوژی و پیشرفت هوش مصنوعی که در سال های اخیر همواره مردم را شگفت زده کرده است موجب به وجود آمدن برنامه ها و اپلیکیشن هایی شده است که زمینه سلامتی و مراقبت های بهداشتی مردم بخصوص در کشورهای جهان اول را فراهم می کنند. طبیعتا در طی رقابتی که در این زمینه بوجود آمده است، روی آوردن به طراحی گرافیک جهت ایجاد برتری و وجه تمایز بین برنامه ها و اپلیکیشن های رقابتی بیشتر شده است.
نمونه طراحی لوگو در زمینه پزشکی و سلامتینمونه طراحی لوگو در زمینه پزشکی و سلامتنمونه طراحی وکتور در زمینه پزشکی و سلامتنمونه طراحی گرافیک به سبک ایزومتریک در زمینه پزشکی و سلامت
چگونه طراحی کنیم؟
همانطور که مشاهده می کنید تمرکز در این سبک از طراحی بر روی ترکیب تکنولوژی با پزشکی و سلامتی است. در این زمینه معمولا تایپوگرافی به حداقل می رسد و از فونت های ساده استفاده می شود. سبک ایزومتریک (نمایش دو بعدی از یک تصویر سه بعدی – مانند طرح CAREiQ در بالا) و سبک مینیمالیسم در این زمینه طرفداران زیادی دارند. در نهایت رنگ آبی به دلیل انتقال حس اعتماد و آرامش نیز نسبت به سایر رنگ ها در اولویت استفاده قرار می گیرد.
2- مربیان
تنها در سال گذشته، صنعت مربی گری درآمدی بیش از 1 میلیارد دلار را توانست رقم بزند. تعداد مربیانی که درخواست طراحی در آژانس های خلاقیت و طراحی معتبر در سراسر جهان را داشته اند از سال 2013 تا 20 رشد قابل توجهی داشته است. بنابراین دور از انتظار نیست که در سال های آتی نیز این درخواست ها با شدت بیشتری افزایش پیدا کند.
ایده مربی گری شخصی، وقتی برای اولین بار مطرح شد چندان مورد قبول افراد واقع نبود اما به تدریج افراد به ارزش آن در زندگی شخصی پی بردند و پس از کش و قوس های فراوان توانست ارزش واقعی خود را در جامعه امروزی به دست بیاورد. هم اکنون افراد بسیار زیادی در زمینه ها و موضوعات مختلف مشغول در این صنعت هستند. منطقی است که در سال های پیش رو نیز همچنان افراد بیشتری از این تجربه در زندگی شخصی خود بهره مند شوند.
نمونه طراحی پکیج با موضوع مربی گری شخصی(با موضوع سلامتی)نمونه طراحی لوگو با موضوع مربی گری شخصینمونه طراحی لوگو با موضوع مربی گری شخصینمونه طراحی لوگو با موضوع مربی گری شخصینمونه طراحی لوگو با موضوع مربی گری شخصی
چگونه طراحی کنیم؟
در زمینه مربی گری شخصی تنوع موضوعاتیِ زیادی وجود دارد. مالی، معنوی، رمانتیک، سلامت روان، سلامتی و کاهش وزن از رایج ترین موضوعات در این زمینه هستند. معمولا مربیان ترجیح می دهند تصویری مرتبط با حرفه آنها در طرح گرافیکی مورد نظر آنها استفاده شود. برای مثال استفاده از تصویر صورت حساب های دلاری برای مربیان مالی.
در چنین طرح هایی معمولا نام مربی نیز در طرح مورد نظر تایپوگرافی می شود. توجه داشته باشید رابطه مربی و مشتری معمولا صمیمی است بنابراین دقت کنید که نیازی به دیزاین طرح های رسمی وجود ندارد و استفاده از رنگ های گرم اولویت دارد. البته در مواقعی که نیاز به انتقال حس اعتماد و آرامش وجود دارد رنگ های سرد مانند آبی کاربرد بیشتری خواهد داشت.
3- سازمان های تاثیر گذار یا اینفلوئنسرها
سازمان های موثر در رشد و توسعه شرکت ها و کسب و کارها، مانند آژانس های تبلیغاتی، حمایت کننده های استارت آپ، حمایت کننده های اعتباری و… که به اصطلاح آژانس های اینفلوئنسر نامیده می شوند با سوار شدن بر موج رسانه ها و شبکه های اجتماعی توانسته اند نفوذ قابل توجه در انواع کسب و کارها پیدا کنند.
همانطور که در اینفوگرافی بالا مشاهده می کنید از سال 2013 تا 20 تعداد افرادی که به تیم ها و یا آژانس های طراحی گرافیک درخواست طراحی ارسال کرده اند، 320 درصد رشد داشته است. جالب آن که 79 درصد از این میزان رشد، مرتبط با دو سال اخیر یعنی سال های 2016 تا 20 بوده است. اگر کمی دقت کنید شیب تند نمودار رشد در سال های اخیر حاکی از آن است که بدون شک در سال های آینده نیز گرافیست ها با درخواست های بالایی از سوی این موسسات و آژانس ها برای طراحی گرافیک مواجه خواهند بود.
چرا الآن؟
چند سالی است که با رشد بسیار بالای تعداد استارت آپ ها از طرف افراد و شرکت های مختلف مواجه هستیم. با توجه به رقابت های بسیار شدید در این زمینه، بدون شک این استارت آپ ها برای توسعه بیشتر و موفقیت، نیازمند به حمایت افراد و موسسه های مختلف (که همانطور که گفتیم به آنها اینفلوئنسر گفته می شود) هستند. همچنین مطالعات اخیر نشان می دهد که میزان دسترسی به هدف و فروش در کسب و کارهایی که توسط اینفلوئنسرها حمایت می شوند، بسیار بیشتر از سایر کسب و کارهاست.
لوگو طراحی شده برای اینفلوئنسر Influye meنمونه وب سایت طراحی شده در زمینه بازاریابی تاثیرگذارنمونه وب دیزاین مرتبط با آزانس های اینفلوئنسرطرح صفحه اصلی وبسایت InstaX در زمینه بازاریابی موثر
چگونه طراحی کنیم؟
هنگام طراحی برای اینفلوئنسرها دو جنبه برند و رسانه های اجتماعی باید مدنظر گرفته شود. به صفحه InstaX در تصاویر بالا نگاه کنید. معمولا استفاده از شخصیت های مرتبط در رسانه ها و شبکه های اجتماعی زیبایی و جذابیت خاصی برای طرح به ارمغان می آورد. همچنین مفاهیمی همچون ارتباط متقابل و استراتژی های مرتبط با کسب و کار نیز باید توسط طرح به مخاطب منتقل شود.
اگر به صفحه Kingfluencers نگاهی بیندازید متوجه می شود که طراح تمام تلاش خود را به کار گرفته تا ارتباط متقابل و همبستگی بین اعضا در سازمان های اینفلوئنسر را به کمک چند تصویر و نقطه اتصال به تصویر بکشد که در این راه نیز بسیار موفق عمل کرده است. در نهایت استفاده از فونت های رسمی در چنین طرح هایی اولویت دارد. در زمینه رنگ نیز با توجه برند و اهداف آن می توانید از روانشناسی رنگ ها استفاده کنید.
 
جمع بندی: دور، دورِ تکنولوژی است!اگر دقت کرده باشید دو صنعت از سه صنعت معرفی شده در زمینه تکنولوژی هستند. (اینفلوئنسرها به طور مستقیم زیرگروه تکنولوژی محسوب نمی شوند، اما با توجه به وابستگی آنها به رسانه های اجتماعی و سایر رسانه های آنلاین، همیشه و به طور ذاتی در ارتباط با تکنولوژی هستند). این موضوع مهر تاییدی است بر اینکه در حال حاضر در عصری زندگی می کنیم که از نظر تکنولوژی در یک انقلاب به سر می برد. بنابراین از تاثیر طراحی گرافیک در این موضوع نباید غافل شد و باید از تغییراتی که صنایع وابسته یا مرتبط به گرافیک در طول زمان دارند همواره آگاه بود.
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


بهترین ابزارهای XML Sitemap و اهمیت آن
 
آقای Kevin Indig یکی از محققان حوزه ی سئو در یکی از نوشته ها/خاطرات خود می گوید:
به تازگی شروع به کار در Atlassian کرده بودم و دنبال راهی برای شناخته شدن در این کمپانی بودم بنابراین شروع به بررسی سایت کردم و متوجه شدم که سایت XML sitemap ندارد. با خودم گفتم عجب بُرد راحتی! ابتدا از توسعه دهندگان خواستم که ابزار Sitemap را در CMS فعال کنند اما با تعجب به من گفتند که متاسفانه امکان چنین کاری وجود ندارد. من هم سعی کردم از درب دیگری وارد شوم و سرویس Screaming Frog به خاطرم آمد. بنابراین با استفاده از این سرویس، یک Sitemap درست کردم و آن را روی سایت بارگذاری کردم. ربات های گوگل آن را خواندند و در عرض چند روز ترافیک ما به شکل قابل توجهی افزایش پیدا کرد. به نظر من نتیجه ی اخلاقی این داستان این است که XML sitemap (نقشه سایت XML) مورد بسیار مهمی در سئوی سایت شماست و نباید آن را فراموش کرد. منبع:semrush
همینطور که از گفته های آقای Kevin Indig مشخص است در بعضی اوقات XML Sitemap ها می توانند تا حد زیادی به سایت شما کمک کنند اما باید اول بدانیم که Sitemap ها چه هستند. XML sitemap ها نقشه ای دیجیتال از سایت شما هستند که به گوگل کمک می کنند تا بفهمد کدام صفحات از همه مهم تر بوده و هر صفحه هر چند روز به روز رسانی می شود.
گوگل در صفحه ی help center خود می گوید:
A sitemap tells the crawler which files you think are important in your site, and also provides valuable information about these files: for example, for pages, when the page was last updated, how often the page is changed, and any alternate language versions of a page.
خلاصه ی گفته ی گوگل همان چیزی است که بالاتر به شما گفتیم؛ چه صفحاتی مهم تر از همه هستند، آخرین باری که به روز رسانی شدند چه زمانی بوده است، نسخه های مختلف ترجمه شده از صفحه و دیگر اطلاعات ممکن.
هر سایتی باید Sitemap داشته باشد اما بعضی از سایت ها به طور خاص و بیشتر به آن نیاز دارند:
وب سایت های بسیار بزرگ
وب سایت های تازه تاسیس شده
وب سایت هایی که صفحات 1orphaned زیادی دارند
وب سایت هایی که از تصاویر و ویدیوهای زیادی استفاده می کنند.
1- صفحات orphaned صفحاتی هستند که هیچ لینکی به آن ها اشاره نمی کند بنابراین در حالت عادی کمتر کسی به این صفحات می رسد مگر اینکه URL را به صورت دستی وارد کند.
در واقع فایل معروف robots.txt به شما کمک می کند که قسمت هایی از سایت را از دسترس موتورهای جست و جو خارج کنید اما Sitemap ها دقیقا برعکس این کار را انجام می دهند؛ آن ها به موتورهای جست و جو کمک می کنند تا صفحات جدید را شناسایی کنند. گوگل از سال 2005 شروع به استفاده از XML sitemap ها کرد. البته نکته ی مهمی وجود دارد: HTML sitemap با XML Sitemap یکی نیست! XML sitemap ها برای کاربران قابل مشاهده نیستند بلکه فقط برای Google قابل مشاهده است در حالی که HTML sitemap ها لیستی از لینک های داخلی هستند که تمامی صفحات را در یک جا جمع کرده اند. توصیه می شود که هر دو را داشته باشید:
 
یک نمونه HTML Sitemapیک نمونه XML Sitemap
 
این فرمت XML به گوگل اجازه می دهد که سریعا اطلاعات را parse کرده و URL های جدید را پیدا کند.
ثبت sitemap و استانداردهای آناگر می خواهید بدانید سایت شما sitemap دارد یا نه می توانید از ابزاری مانند Google Search Console یا Bing Webmaster Tools استفاده کنید؛ در قسمتی به نام sitemaps نگاه کنید و لیست موجود را بررسی کنید. اکثر موتورهای جست و جو در فایل robots.txt به دنبال کد <Sitemap: <sitemap_location می گردند بنابراین بهتر است sitemap را در آن قسمت مشخص کنید. راه دیگر این است که فایل sitemap را مستقیما وارد گوگل یا دیگر موتور های جست و جو کنید:
نحوه ی ارسال مستقیم sitemap به Google
نحوه ی ارسال مستقیم sitemap به  Baidu
نحوه ی ارسال مستقیم sitemap به Bing
نحوه ی ارسال مستقیم sitemap به Yandex
 
ثبت sitemap برای Googleثبت sitemap برای bing
 
استانداردهای یک sitemap خوب به این شرح هستند:
فقط شامل لینک های canonical با status code 200 باشد.
حداکثر 200 هزار URL برای هر sitemap و 50 هزار sitemap برای هر index sitemap داشته باشد.
در فایل robots.txt مشخص شده باشد.
دارای encoding از نوع UTF-8 باشد.
در فرمت gz. فشرده شده باشد.
بزرگتر از 50mb (مگابایت) نبوده و بیشتر از 50 هزار URL نداشته باشد.
این موارد از استانداردهای حداقلی هستند اما کارهای بیشتری نیز می توان انجام داد. مثلا می توان تنها صفحات مهم را در sitemap قرار داد تا گوگل فقط آن ها را مد نظر بگیرد؛ فرض کنید گوگل یک توریست است و XML sitemap نقشه ای برای توریست ها است. در این نقشه نباید آدرس هر خانه ای را اضافه کرد بلکه فقط قسمت های مهم شهر مانند ساختمان های معروف و پارک های دیدنی را ذکر می کنند. بنابراین صفحاتی مانند «درباره ی ما» یا «شرایط و قوانین» را در این فایل قرار ندهید چرا که از صفحات مهم (برای موتور جست و جو) به حساب نمی آیند.
همچنین اکثر CMS ها می توانند sitemap را به طور مرتب ویرایش کنند و با اضافه شدن هر URL جدید آن را به صفحه اضافه کنند. هر بار که فایل sitemap شما ویرایش می شود گوگل متوجه شده و آن را بازبینی می کند.
وب سایت های بزرگاگر وب سایت شما بزرگ است (مانند وب سایت های خبری) بهتر است یک index sitemap داشته باشید که 50 هزار sitemap عادی را در خود جای می دهد، البته نباید از 50 مگابایت حجم بیشتری داشته باشند. دلیل این کار این است که نمی توانید با چنین سایت بزرگی تمام sitemap های خود را در یک فایل بگنجانید.
 
نمونه ای از تقسیم sitemap ها برای وب سایت های بزرگ
 
حتی می توانید برای تصاویر و ویدیوهای سایت خود نیز Sitemap داشته باشید و یا اینکه آن ها را در همان sitemap اصلی اضافه کنید. مثال:
 



1
2
3
4
5
6
7
8
9
10
11
12
13

<?xml version="1.0"encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>http://example.com/sample.html</loc>
    <image:image>
      <image:loc>http://example.com/image.jpg</image:loc>
    </image:image>
    <image:image>
      <image:loc>http://example.com/photo.jpg</image:loc>
    </image:image>
  </url>
</urlset>



برای ویدیوها هم همینطور:
 



1
2
3
4

<url>
  <loc>https://example.com/mypage</loc>
  <video>...information about video1...</video>
</url>



مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


بهترین اکشن های رایگان فتوشاپ در سال ۲۰۱۹ (قسمت اول: روتوش و ریتاچ)
اکشن های فتوشاپ، برای بهینه سازی تصاویر، پیاده سازی افکت ها و به طور کلی انجام ادیت های سریع روی عکس ها بسیار مفید هستند. فرقی نمی کند یک گرافیست حرفه ای باشید یا یک فرد کاملا تازه کار در زمینه گرافیک. در هر صورت اکشن ها به شما کمک می کنند به میزان بسیار زیادی در زمان خود صرفه جویی کنید.
به کمک اکشن ها می توانید تاثیراتی را که در نتیجه چندین ساعت ادیت ایجاد می شوند، تنها با یک کلیک ساده و در زمان بسیار کمی روی تصاویر مورد نظر اعمال کنید. بدون شک، استفاده از حاصل کار طراحان و گرافیست های حرفه ای، بدون هیچ تلاشی به روی عکس های مورد نظر، برای هر شخصی جذاب است.
در ادامه، اولین مجموعه از بهترین اکشن های فتوشاپ در سال 2019 با موضوع ادیت تصاویر پرتره را به صورت رایگان برای دانلود قرار داده ایم که امیدواریم از اجرای آنها بر روی تصاویر خود لذت ببرید. با ما همراه باشید…
 نحوه ساخت اکشن و Droplet همراه با یک مثال جذاب
13 اکشن برای ایجاد تصاویر HDR
این مجموعه از اکشن ها به شما کمک می کند تا تنها با یک کلیک ساده، جلوه HDR بر روی تصاویر خود اعمال کنید. این افکت ها کمک می کنند تصاویر شما همچون تصاویر گرفته شده توسط عکاسان حرفه ای، بسیار جذاب تر جلوه کند. بیشترین تاثیر این افکت ها را می توان بر روی تصاویر گرفته شده در محیط های بیرون و باز با شرایط نوری طبیعی، به ویژه عکس های گرفته شده با گوشی های هوشمند مشاهده کرد.
 
لینک دانلود: دانلود مجموعه اکشن های HDR برای فتوشاپ
5 اکشن روتوش و ریتاچ برای تصاویر پرتره
این مجموعه در واقع شامل 5 اکشن بسیار حرفه ای برای ویرایش، رتوش و تقویت تن رنگی پوست است. اکشن های موجود در این مجموعه برای ویرایش رنگ، رفع چین و چروک، از بین بردن قرمزی و تنظیم روشنایی تصاویر پرتره بسیار مفید و کاربردی هستند.
 
لینک دانلود: دانلود مجموعه اکشن رتوش و ریتاچ تصاویر در فتوشاپ
40 اکشن ایجاد افکت پاستیلی بر روی تصاویر
این اکشن ها برای ایجاد افکت های زیبای پاستیلی (Pastel Effect) بر روی تصاویر بسیار کاربردی هستند. 40 اکشن موجود در این مجموعه برای اعمال جلوه های پاستیلی، بر روی تصاویر پرتره و همچنین طرح های گرافیکی و حتی بهینه سازی تصاویر برای اینستاگرام می توانند مورد استفاده قرار بگیرند. اگر شما هم به اینگونه افکت ها و تصاویر علاقه‌مند هستید، دانلود اکشن های موجود در این مجموعه را به شما پیشنهاد می کنیم.
 
لینک دانلود: دانلود مجموعه اکشن های پاستیلی برای فتوشاپ
اکشن های ایجاد تصاویر پرتره HDR
عکاسان حرفه ای و گرافیست های با تجربه به خوبی می دانند که پیاده سازی ظاهر HDR بر روی تصاویر پرتره، بر خلاف تصاویر منظره بسیار دشوار است. این مجموعه از اکشن ها به شما کمک می کنند افکت HDR را در زمانی بسیار کم و به آسانی روی تصاویر پرتره گرفته شده با دوربین خود اعمال کنید.
 
لینک دانلود: دانلود مجموعه اکشن های HDR پرتره برای فتوشاپ
اکشن های مرتبط با تصاویر لایف استایل
فعالان شبکه های اجتماعی به ویژه اینستاگرام، در حوزه مد و لایف استایل به خوبی با اینگونه تصاویر آشنا هستند. اگر شما هم تصاویر مرتبط با لایف استایل در حافظه کامپیوتر خود دارید و می خواهید این تصاویر را با جلوه های بسیار جذاب ادیت کنید، پیشنهاد می کنیم این مجموعه از اکشن ها را از دست ندهید.
 
لینک دانلود: دانلود اکشن ایجاد تصاویر لایف استایل در فتوشاپ
اکشن های ایجاد تصاویر فانتزی
تصاویر فانتزی تصاویر یونیک و تکی هستند که به وسیله افکت های خاصی ایجاد می شوند. به وسیله اکشن های موجود در این مجموعه می توانید به راحتی چنین افکت هایی را روی تصاویر خود اعمال کرده و جلوه های خاص و یونیکی به تصاویر مورد نظر خود، به ویژه برای فیسبوک و اینستاگرام بدهید.
 
لینک دانلود: اکشن های فتوشاپ ایجاد تصاویر فانتزی
اکشن های مرتبط با شارپ کردن حرفه ای تصاویر
معمولا در تصاویر گرفته شده توسط دوربین های غیر حرفه ای، مانند دوربین گوشی های موبایل، شاهد شارپنس (Sharpness) و وضوح چندان عالی نیستیم. به وسیله اکشن های موجود در این مجموعه می توانید وضوح تصاویر خود را به میزان قابل توجی تنظیم و ارتقا دهید به طوری که با تصاویر گرفته شده با دوربین های دیجیتال سطح بالا رقابت کنند.
 
لینک دانلود: اکشن های حرفه ای برای شارپ کردن تصاویر
50 اکشن مرتبط با تصاویر خانوادگی و گروهی
اگر به دنبال راهی برای ادیت حرفه ای و راحت تصاویر خانوادگی و دوستانه خود در فتوشاپ هستید، این مجموعه از اکشن ها را از دست ندهید. به کمک این اکشن ها می توانید زیبایی تصاویر دسته جمعی خود را ارتقا داده و آنها را به تصاویری دوست داشتنی تبدیل کنید. نکته جالب اینکه این اکشن ها برای تصاویر پرتره گرفته شده در فضاهای باز و بسته به خوبی بهینه سازی شده اند.
 
لینک دانلود: دانلود اکشن های مناسب عکس های خانوادگی
اکشن های ایجاد تصاویر رویایی
اگر می خواهید جلوه های رویایی و دراماتیک روی تصاویر پرتره خود اعمال کنید، این اکشن ها برای شما ساخته شده اند. این مجموعه شامل 3 اکشن بسیار حرفه ای است که می توانند به روی هر عکس پرتره ای اعمال شوند.
منبع: روکسو

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


صفر تا صد طراحی آی | درس اول
 آیا تا به حال پیش آمده است که بخواهید آی های اختصاصی خودتان را طراحی کنید، اما ندانید که دقیقا باید از کجا شروع کرد؟ بسیار خب، در این مقاله ما به شما خواهیم گفت. در این درس شما یاد می گیرید که آی چیست و به عموم سوالات متداول شما درباره طراحی آی پاسخ خواهیم داد. پس از خواندن این مطلب درمی یابید که طراحی آی به اندازه ای که فکر می کردید، سخت نیست!
 
طرحی که در نهایت به اتفاق خواهیم ساخت
 
البته با یک جستجوی ساده در اینترنت، به مجموعه ای عظیم از آی های مختلف در موضوعات گوناگون دسترسی خواهید داشت، اما در این مقاله ما قصد داریم ماهیت آی ها، انواع آنها و روش اصولی ساخت آن را به شما آموزش دهیم.
1. آی چیست؟ 
ریشه یونانی کلمه آی
 
طبق گفته گوگل این کلمه از ریشه یونانی “eikόn” گرفته شده و به این شکل تعریف می شود:
نقاشی مذهبی از مسیح یا دیگر شخصیت های مقدس که معمولا روی چوب اجرا می شود و به شکلی تشریفاتی در کلیساهای بیزانس و دیگر مناطق شرقی استفاده می شود.
این همان آیی نیست که ما طراحی می کنیم. هرچند که این شکل از آی ها نیز زیبایی و دشواری خاص خود را دارند اما در اینجا درباره چیزی صحبت می کنیم که کاملا متفاوت از دست نوشته یا نقاشی است. در دیدگاه مدرن و دیجیتال امروزی آی به این صورت تعریف می‌شود:
یک نماد یا نمایش گرافیکی روی صفحه یک برنامه، گزینه یا پنجره ای خاص.
فرقی نمی کند که از ویندوز استفاده می کنید یا مک، آیفون یا اندروید، هر یک از این موارد دارای interface (رابط کاربری) خاص خود هستند که بر مبنای آی هایی با اشکال، رنگ ها و اندازه های مختلف بنا شده اند.
2. چرا از آی ها استفاده می‌کنیم؟از نظر تاریخی اولین مجموعه از آی های رایانه ای تقریبا 37 سال پیش تصویرسازی شد. هنگامیکه یک دانشمند علوم کامپیوتر، به نام David Canfield Smith به طراحی به نام Norman Lloyd Cox که درحال کار روی GUI (رابط کاربری گرافیکی) Xerox Star 8010 بود، پیوست. وظیفه آنها تسهیل تعامل کاربر با ماشین بود. آنها به شکلی خلاقانه با معرفی نمادهای گرافیکی که بازتاب دهنده اشیای دنیای واقعی بودند و کاربر می‌توانست بین این دو ارتباط برقرار کند، این کار را انجام دادند.
از آن زمان تا به امروز کامپیوترها به شکل وسیعی در محیط های کار مورد استفاده قرار می گیرند و طراحان به سرعت دریافتند که می توانند از اشیاء متداولی که در محیط دیده می‌شوند، الهام بگیرند. این، پایه و اساس ایجاد اولین زبان بصری رایج برای عصر دیجیتال بود که نه تنها بر GUI بلکه بر چگونگی عملکرد آن نیز موثر بود.
تسهیل کننده تعاملگرچه امروزه سیستم های کامپیوتری تغییراتی را از نظر ظاهری به خود دیده اند اما عملکرد اصلی آنها کماکان ثابت باقی مانده است، زیرا آنها همچنان همان هدفی را که برای انجام آن طراحی شده اند، دنبال می کنند و تنها تعامل ما با قسمت های مختلف و نرم افزارها آسان تر شده است.
 
تسهیل تعامل با رابط کاربری به واسطه آی ها
 
از بین برنده موانع زبانیآی ها زبان بصری جهانی و فارغ از موانع زبانی هستند. به این دلیل است که توسط کاربران نقاط مختلف دنیا قابل درک هستند.
بنابراین به جای پیدا کردن راهی برای انتقال یک مفهوم به دو شخص با زبان مختلف، می‌توانید به راحتی یک نماد رایج پذیرفته شده را پیدا و استفاده کنید.
البته گاهی اوقات کاربران به مدت زمانی برای به خاطر سپردن یک نماد به جای اضافه کردن آن به دایره واژگان و زبان خود نیاز دارند. معمولا این موضوع در مورد مفاهیم و فناوری های جدیدی که نیاز است کاربران با آن آشنا شوند، صادق است.
در مقایسه با کلمات، تصاویر این توانایی را دارند که چشم ما را سریعتر و برای مدت زمان طولانی تری تحریک کنند. این بدان معنی است که کاربر معنای پشت یک آی را سریعتر رمزگشایی می کند.
تصور کنید که تعدادی نرم افزار پیچیده، با ابزارها و کاربردهای گوناگون دارید. حال اگر همه ابزارها با استفاده از متن به جای آی نشان داده شوند، چه وضعیتی ایجاد می شود؟ ممکن است پس از مدتی استفاده، موقعیت برخی از ابزارها را بفهمید، اما به سرعت حفظ کردن تمامی گزینه ها به یک بار اضافه تبدیل می شود که در نهایت باعث می شود از آن نرم افزار متنفر شوید.
چشم نواز اما تفکر برانگیزگذشته از بحث عملکرد و کارایی، آی ها به عنوان محرک هایی بصری رفتار می کنند که نه تنها به به منظور نمایش سریعتر یک مفهوم بلکه انتقال مفهوم به روشی که برای چشم خوش آیندتر باشد به کار می روند.
به عنوان مثال، من ترجیح می دهم به صفحه نمایش به عنوان یکی از قفسه هایی که هنگام خرید در فروشگاه از کنار آنها عبور می کنم، نگاه کنم. اگر محصولات به شکلی رنگارنگ و چشم نواز چیده شده باشند، توجه من فوراً به آنها جلب می شود. حتی بعضی اوقات اگر به آن محصول احتیاج نداشته باشم هم، علاقه مند هستم که بدانم محتوای این محصول چیست؟
در مورد آی ها نیز همین امر صادق است، هرچه ظاهر آی بهتر باشد، کاربر مجبور به خیره شدن به آن و سپس درگیری و تعامل با آن می شود؛ این دقیقاً همان کاری است که ما می خواهیم آی ها انجام دهند.
در قسمت بعدی درباره چگونگی طراحی آی ها، مبحث سایزبندی، ویژگی های کلی آی ها، انواع استایل ها، چگونگی الهام گرفتن در طراحی، مراحل عملی ساخت آی ها، مفهوم Pixel-Perfect ، رنگ، لایه ها، خطوط راهنما، بایدها و نبایدها در طراحی آی، متداول ترین مشکلات در طراحی آی و نحوه خروجی گرفتن از آی ها صحبت خواهیم کرد.
ممکن است محتوای این مقاله به عنوان پیش درآمدی علمی بر طراحی آی کمی برای دیزاینرها که عمدتا ذهنی خلاق دارند تا منطقی (!) کمی دشوار و نامانوس به نظر برسد اما برای ورود به دنیای خلاقیت آی ها و دست به قلم شدن برای فتح سرزمین های آن، باید گفته و خوانده می شد تا دیدگاهی علمی تر نسبت به این شاخه از طراحی و اصول کلی آن داشته باشید.
در صورتی که مقاله فوق تا به اینجا برای شما مفید واقع شده، بسیار خرسند خواهیم شد اگر نقطه نظرات و بازخوردهای خود را با ما در میان بگذارید یا این مطلب را با دوستان و همکاران خود به اشتراک بگذارید.
منبع:روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


PHP و AJAX: مبحث Live Search و نظرسنجی
به قسمت آخر از سری آموزشی PHP 7 خوش آمدید.
تکنولوژی AJAX فقط برای کار با فایل های XML و … نیست بلکه یکی از استفاده های آن قابلیت Live Search است. Live Search همان قابلیت پیشنهاد دادن گوگل در هنگام جست و جو است؛ مثلا زمانی که می نویسیم «چطور زندگی ….» گوگل پیشنهاداتی مانند زیر را بدون refresh شدن صفحه برایمان می آورد:
چطور زندگی کنیم؟
چطور زندگی شادی داشته باشیم؟
جطور زندگی خوبی داشته باشیم؟
و….
به این قابلیت Live Search می گویند و با AJAX انجام می شود. از مزایای Live Search نسبت به جست و جوهای قدیمی می توان به موارد زیر اشاره کرد:
نتایج هنگام تایپ کاربر به او نمایش داده می شوند.
هر چه بیشتر تایپ کنید، نتایج جزئی تر و جزئی تر می شوند.
اگر نتایج بیش از حد جزئی شدند می توانیم با حذف چند کاراکتر نتایج کلی تری را ببینیم.
در بسیاری از اوقات نتایج نمایش داده شده به کاربر ایده های جدیدی داده و او را راهنمایی می کند.
وب سایت شما مدرن تر به نظر می رسد.
و …
به مثال زیر دقت کنید:
 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<html>
<head>
<script>
functionshowResult(str){
  if(str.length==0){
    document.getElementById("livesearch").innerHTML="";
    document.getElementById("livesearch").style.border="0px";
    return;
  }
  if(window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=newXMLHttpRequest();
  }else{  // code for IE6, IE5
    xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
    if(this.readyState==4&&this.status==200){
      document.getElementById("livesearch").innerHTML=this.responseText;
      document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
  }
  xmlhttp.open("GET","livesearch.php?q="+str,true);
  xmlhttp.sendمشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


طراحی آی مسطح به سبک آی‌های اپلیکیشن‌های اندروید
با سلام، طی این مقاله ی آموزشی قصد داریم به همراه شما یک لوگوی شکیل و مدرن را طراحی کنیم. هدف از این مقاله آشنایی شما با فرآیند طراحی لوگو به صورت بسیار ساده است. معمولا حتی کسانی که فتوشاپ کار می کنند، نمی دانند از کجا شروع کنند. این مقاله آموزشی قصد دارد الهام بخش این افراد و تمامی طراحان گرافیست باشد.
حتما تا به حال تصاویر آی های اندروید را دیده اید. یکی از روش های محبوب ساخت این نوع تصاویر، ایجاد سایه ای طولانی و کش دار است که از کادر خارج می شود. در این مقاله شما یاد خواهید گرفت چطور چنین استایلی را در فتوشاپ ایجاد کنید. نمونه هایی از این تصاویر را در قسمت پایین می بینید.
ایجاد این سایه های کشیده شده برای تصاویر ساده است اما برای متن ها چطور؟ نوبت طراحی لوگوی ماست. اول از همه به سایت 1001Fontsمیرویم؛ این سایت یکی از بزرگترین سایت های فونت در دنیا است. وقتی وارد سایت شوید با چنین صفحه ای مواجه می شوید:
در کادر خالی بالای فونت ها (پایین عبارت headline) یک عبارت خاص را که می خواهیم قسمتی از لوگوی ما باشد، می نویسیم. مثلا من در اینجا عبارت Roxo را انتخاب می کنم. سپس این سایت عبارت شما را با فونت های مختلف نمایش می دهد. از بین فونت ها و دسته بندی ها، هر کدام که نظرتان را جلب می کند انتخاب کنید. من فونت Plaster را انتخاب میکنم. فونت مورد نظر را دانلود و در سیستم خود نصب کنید.
حالا نرم افزار فتوشاپ را باز کنید. در بالای صفحه از منوی File گزینه ی New را انتخاب کنید. اکنون اندازه ی تصویر را مانند من (عکس زیر) تنظیم کنید.
حالا که صفحه ی خالی (بوم) برای شما باز شده است، ابتدا باید عبارت خود را در وسط صفحه تایپ کنیم. اگر یادتان باشد عبارت من Roxo بود. همانطور که در Gif زیر می بینید عبارت خود را دقیقا به وسط صفحه منتقل کنید.
حالا یک لایه زیر لایه ی متنی (Roxo) ایجاد کنید. این لایه رنگ پس زمینه ی ما را خواهد گرفت. این لایه را انتخاب کنید و آن را با رنگ دلخواه خود پر کنید. من اینجا کد رنگ f16161 را انتخاب میکنم که کاملا به سلیقه ی شما بستگی دارد.
حالا باید فونتی را که دانلود و نصب کردیم روی عبارت خود پیاده کنیم. اگر بعد از تنظیم فونت، اندازه ی متن شما بهم خورد می توانید آن را دوباره تنظیم کنید. این مراحل را در Gif زیر می بینید:
در این مرحله لایه ی متنی خود را انتخاب کنید و سپس با کلید های Ctrl + J یک کپی از آن بسازید و رنگ آن را به سیاه تغییر دهید.
با کلید های Ctrl + T به حالت Transform Tool میرویم و آن را 45 درجه می چرخانیم تا زاویه دار شود و از آن 100 کپی با فاصله از هم بسازید. ساختن این کپی ها را با نگه داشتن کلید های Ctrl + Alt + Arrow Keys انجام می دهیم (توجه داشته باشید که Arrow Keys همان کلید های جهت دار کیبورد هستند).
سپس تمام این لایه های تکراری را انتخاب کرده و با کلید های Ctrl + E آن ها را ادغام میکنیم. پس از اینکه لایه های تکراری یکی شدند آن ها را دوباره 45- درجه بچرخانید.
حالا باید آن ها را مانند سایه دقیقا پشت متن اصلی (سفید رنگ) قرار دهیم و Opacity (شفافیت) را به حدود 20 تا 30 درصد برسانیم.
این مراحل را در Gif زیر می بنید:
کلیدهای ترکیبی استفاده شده در این آموزش: 
کلیدهای Ctrl + J برای ایجاد duplicate (کپی گرفتن از لایه)
کلیدهای Ctrl + E برای Merge کردن (ادغام کردن چند لایه در یک لایه)
کلیدهای Ctrl + Alt + Arrow Keys برای کپی گرفتن از یک لایه ( تفاوت این دستور با دستور Ctrl + J اینجاست که دستور Ctrl + J تنها از لایه کپی می گیرد و کپی لایه از جایش تکان نمی خورد. بنابراین دقیقا پشت لایه ی انتخاب شده قرار خواهد گرفت اما دستور Ctrl + Alt + Arrow Keys نه تنها از لایه کپی می گیرد بلکه هر کپی را با توجه به نوع Arrow Keys که شما انتخاب کرده باشید به جهت های مختلف حرکت می دهد)
کلیدهای backspace + delete برای پر کردن لایه ی background تصویر (لایه ی پس زمینه)
کلیدهای Ctrl + T برای ورود به حالت Transform Tool (این ابزار برای جا به جایی لایه و برخی از تنظیمات مربوط به شکل و اندازه ی آن استفاده می شود)
کلیدهای Shift + Left Click به صورتی که کلید Shift را پایین نگه داشته و با انتخاب یک لایه از طریق کلیک چپ می توانید تمام لایه های بین لایه ی اول و لایه ی انتخاب شده تان را انتخاب کنید.
این کلیدها را به صورت تصویری نیز در گیف های بالا آورده ایم.
در آخر می توانید تنظیمات بیشتری اعمال کنید. به طور مثال:
می توانید روی لایه ی دلخواه دو بار کلیک کنید و از قسمت Bevel and Emboss متن یا لوگوی خود را برجسته تر کنید. در بعضی از طرح ها این گزینه کمک خوبی به شما می کند.
می توانید از قسمت stroke دور لایه ی خود خطی ایجاد کنید. بسته به طرح شما این گزینه می تواند بسیار جالب باشد. نکته ای که باید به خاطر داشته باشید ترکیب رنگ های خودِ لوگو و خط stroke است.
گزینه های دیگری از قبیل inner shadow، inner glow و Drop shadow نیز وجود دارند که شما می توانید با آزمون و خطا به نتیجه ی دلخواه خود برسید. به طور مثال رنگ های روشن خوب سایه می گیرند و گزینه ی Drop Shadow می تواند باعث شود لوگوی شما بیشتر در چشم باشد. صفحه ی مربوط به این گزینه ها را در تصویر زیر مشاهده می کنید:
بسیاری از طرح های اینچنینی (مربوط به اندروید) به صورت دایره مانند ارائه می شوند؛ به خاطر شکل و شمایل آی ها در اندروید، دایره مانند بودن آن ها می تواند باعث شود لوگوی شما ظاهر گرافیکی زیباتری در تلفن همراه داشته باشد. توصیه ی عمومی این است که به صفحه ی کامپیوتر خود بسنده نکنید و همیشه قبل از نهایی کردن کارها لوگوی مورد نظر را در گوشی نیز چک کنید.
در نهایت می توانید طرح ما را به صورت کامل شده و پس از اعمال سلیقه ی شخصی مشاهده کنید:
امیدوارم از این قسمت لذت برده باشید.
منبع: روکسو

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


آموزش کامل ایجاد سایه و تنظیمات آن در فتوشاپ
سایه یکی از اساسی ترین عناصر کار در فتوشاپ می باشد که می تواند به طرح، عمق ببخشد و آن را بسیار واقعی کند. در این آموزش، به شما نشان می دهیم که چگونه سایه اضافه کنید و تنظیمات اساسی و حرفه ای را در این ابزار بکار ببرید.
کارکرد سایه در فتوشاپیکی از مسائل چالش برانگیز در طراحی، ایجاد عمق برای اشیاء دوبعدی است و همین امر تمرین برای ایجاد یک سایه واقعی را ضروری می کند. فتوشاپ برای اضافه کردن سایه راهی را به وسیله استایل لایه ها پیشنهاد داده که با بازی با پارامترهای آن میتوان به نتیجه مطلوب رسید.
در این آموزش، نشان می دهیم که چگونه سایه اضافه کنید و تنظیمات هر کدام از پارامترهای سایه را چگونه انجام دهید.
گزینه Drop Shadow در استایل لایه هافتوشاپ را باز کنید و یک سند جدید ایجاد کنید. اندازه سند اینجا مهم نیست. یک شی، مانند یک مستطیل (U) اضافه کنید.یا می توانید یک متن دلخواه را با استفاده از ابزار Text بنویسید.
برای دسترسی به تنظیمات سایه، به پنل لایه ها بروید و Effects (or fx) > Drop Shadow را انتخاب کنید. اگر از نسخه های جدید فتوشاپ استفاده می کنید، می توانید روی لایه دوبار کلیک کنید تا پنجره گزینه Layer Style باز شود. از منوی سمت چپ، گزینه Drop Shadow را انتخاب کنید و حتما تیک کادر Drop Shadow را بزنید.
خب تنظیمات اصلی سایه ها در سمت راستِ این پنجره وجود دارد و این پارامترهایی است که می توانیم با آن ها بازی کنیم تا ظاهری متفاوت ایجاد کنیم.
مد لایه یا Blend Modeدر واقع در مد لایه، سایه با پس زمینه ترکیب می شود، پیش فرض این حالت روی Multiply می باشد که معمولا بهتر از همه گزینه هاست.
سایه یک عکس وما سیاه رنگ نیست، بنابراین ما می توانیم رنگ سایه را در این قسمت تغییر دهیم. برای این کار می توانیدروی رنگ نمونه در سمت راست، کلیک کنید و رنگ مورد نظر خود را انتخاب کنید.
در مثال زیر، در سمت چپ از سایه سیاه پیش فرض استفاده شده است، در حالی که در سمت راست یک سایه قرمز رنگ را استفاده کرده ایم.
شفافیت سایه یا Opacity Opacity، شفافیت سایه را کم یا زیاد می کند. هرچه این مقدار بیشتر باشد سایه تیره تر و هرچه این مقدار کمتر باشد، سایه روشن تر می شود.
به تغییراتِ مقدار شفافیت سایه در دو مثال زیر خوب دقت کنید:
زاویه سایه یا AngleAngle، زاویه منبع نور و اینکه سایه در کدام سمت باشد را تعیین می کند.
در عکس زیر، در سمت چپ، نور از سمت راست و پایین تابیده می شود و سایه در سمت چپ و بالا قرار می گیرد.
در عکس سمت راست، نور از سمت چپ و بالا تابیده می شود و سایه در پایین سمت راست قرار می گیرد.
در نسخه های جدیدتر Adobe Photoshop، شما می توانید سایه را در اطراف شی اصلی بوسیله ماوس حرکت دهید.
Global light زاویه نور برای کل سند است. زمانی که تیک آن زده شود تمام اشیا دارای سایه یکسان خواهند بود. در نتیجه اگر می خواهید یک شی زاویه مستقل داشته باشد تیک آن را بردارید.
فاصله سایه یا DistanceDistance، فاصله سایه تا شی را تعیین می کند. همانطور که گفته شد در نسخه های جدیدتر فتوشاپ، شما می توانید با کلیک کردن روی سایه فاصله آن را نسبت به شی کم یا زیاد کنید.
در عکس پایین، Distance برای متن سمت چپ صفر می باشد که سایه بالای متن قرار گرفته است، در حالی که متن راست به نظر می رسد دورتر از پس زمینه است.
Spread یا پخش شدگی سایهspread، میزان پخش شدگی سایه را تعیین می کند. این قسمت باعث می شود که سایه متراکم تر و شدیدتر بنظر برسد.
از این تنظیمات همراه با Size سایه برای کنترل بهتر سایه استفاده کنید.
Size یا اندازه سایهاندازه یا Size، نرمی سایه را تعیین می کند. ما می توانیم یک سایه بسیار سخت و یا نرم را ایجاد کنیم که این امر به شدت بر روی منبع نور تاثیر می گذارد.
Size سایه برای متن سمت چپ 0 تنظیم شده است و این احساس را منتقل می کند که منبع نور بسیار شدید به متن تابیده است اما Size متن سمت راست روی 12 تنظیم شده و سایه خیلی بیشتر پخش شده و نرم است.
Contour یا شکل سایهContour، شکل سایه عکس را مشخص می کند. Contour به طور پیش فرض روی Linear است که یک سایه منظم ایجاد می کند.
 
در تصویر پایین سمت چپ، از تنظیم مخروطی مع استفاده کرده ایم و فاصله را روی 0 قرار داده ایم که در این صورت سایه ای در اطراف، با درخشش اضافی ایجاد می شود.
 
Anti-aliased به صاف کردن لبه های سایه کمک می کند. بهتر است که همیشه تیک آن زده شده باشد، هرچند که تغییر بسیار جزیی ایجاد می کند.
 
Noise یا کیفیت سایهNoise، کیفیت سایه را کنترل می کند و به کمک آن می توانید یک سایه نرم یا خشن داشته باشید.
 این پارامتر بیشتر زمانی کاربرد دارد که می خواهید بر روی یک سطح که با تسکچر زمختی پوشیده شده است، سایه ای از یک جسم را ایجاد کنید.
 
Layer Knocks Out Drop Shadowاگر اشیای شفاف یا در واقع transparent در بالای سایه داشته باشید، می توانید تیک این گزینه را بردارید تا شی از طریق سایه اش نشان داده شود. این گزینه با گزینه Fill در پنل لایه ها کار می کند. در مثال زیر، Fill هر دو لایه متن 0٪ تنظیم شده است.
لایه متن را در سمت راست انتخاب کنید. سپس گزینه Layer Styles و بعد هم Drop Shadow را انتخاب کنید. تیک گزینه Layer Knocks Out Drop Shadow را برداشته و روی OK کلیک کنید. نتیجه یک سایه است که محتوای لایه متن را نشان می دهد.
ذخیره و بارگذاری تنظیمات پیش فرضاگر می خواهید دفعات بعد هم از تنظیمات فعلی استفاده کنید، می توانید روی دکمه Make Default کلیک کنید. فتوشاپ، تنظیماتِ امروز شما را به عنوان پیش فرض جدید ذخیره خواهد کرد.
برای بازگشت به آخرین تنظیمات ذخیره شده، از دکمه تنظیم مجدد به حالت پیش فرض یا Reset to Default استفاده کنید.این پارامتر برای آزمایش کردن تنظیمات مختلف و برگشت به تنظیمات پیش فرض کاربرد دارد.
افزودن چند سایه ها به یک شی
اگر از Adobe Photoshop CC یا نسخه های جدیدتر استفاده می کنید، می توانید چندین سایه را به یک لایه اضافه کنید. 
در پنجره  Layer Style، به منو سمت چپ بروید. یک دکمه plus (+) را در سمت راست گزینه Drop Shadow می بینید.این گزینه به شما این امکان را می دهد که چندین سایه را به آبجکت مورد نظرتان اضافه کنید، بدون اینکه از پنجره Layer Style خارج شوید.
با این روش می توانید حداکثر تا 10 سایه را به یک شی اضافه کنید.
در مثال بالا، یک سایه ضخیم در لایه متن ایجاد کردیم. برای ایجاد این سایه ی ضخیم، 10 سایه را با فاصله 1 پیکسل از یک دیگر، اضافه کرده ایم.
 
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


آموزش طراحی پوستر گرانژ به سبک دهه ۹۰ میلادی در فتوشاپ
علاقمندان به موسیقی راک، حتما از ساخت این افکت تصویری در فتوشاپ لذت می‌برند!
آنچه برای این آموزش لازم دارید:
 
یک پرتره سیاه سفید
پس زمینه آبرنگی
تصویر یک لکه قرمز رنگ
Marker Twins فونت
ایجاد پس زمینهقدم اول: در نرم‌افزار فتوشاپ، پس‌زمینه آبرنگی را باز کنید سپس به مسیر Image > Image Rotate > 90 Degrees Clockwise بروید تا وضعیت پس‌زمینه را از حالت افقی به عمودی تغییر دهید.
قدم دوم: بهتر است این تصویر آبرنگی که بخشی از پس‌زمینه ما را تشکیل می‌دهد، کمی از لحاظ رنگی اشباع یا تیره‌تر کنیم. از پنل لایه‌ها، آن را انتخاب کنید و بعد به مسیر Image > Adjustments > Hue and Saturation بروید و Saturation را به 100- کاهش دهید تا فضای کار کاملا سیاه و سفید شود. از ابزار Move Tool (کلید V از صفحه کلید) بهره بگیرید.
مطابق تصویر زیر این پس‌زمینه را کمی جابجا کنید تا بخشی از طرح ما را زمینه سفید پر کند.
قدم سوم: در قسمت پائین پنل لایه‌ها، گزینه‌ی New Adjustment Layer و سپس Posterize را برگزینید و Level را روی 8 تنظیم کنید.
قدم چهارم: دوباره مطابق مرحله‌ی قبل، New Adjustment Layer و اینبار Gradient را انتخاب کنید. Style را روی Linear قرار دهید تا یک گرادیانت خطی ایجاد کنید. یک طرف را روی کد رنگی #901026 و طرف دیگر را روی سفید تنظیم کنید.
حالا بر روی همین لایه در پنل لایه‌ها راست کلیک کنید و سپس Blending Options را انتخاب کنید. در پنجره ظاهر شده Blend Mode را روی Soft Light تنظیم کنید.
بازی با سوژه اصلیقدم اول: تصویر پرتره سیاه سفید را باز کنید و سپس از ابزار Magnetic Lasso Tool (کلید L از صفحه کلید) را انتخاب کنید تا بتوانید دور سوژه یک کادر بکشید. توجه کنید که لازم نیست یک کادر دقیق و مرتب بکشید.
با Ctrl + C این قسمت را کپی کرده و و با Ctrl + V آن را روی صفحه‌ای که پس‌زمینه آبرنگی در آن قرار دارد، بچسبانید.
قدم دوم: در زیر لایه‌ی تصویر پسر، یک لایه ایجاد کنید. از ابزار Polygonal Lasso Tool (کلید L از صفحه کلید) استفاده کنید تا بتوانید یک شکل نامنظم پشت تصویر پسر ایجاد کنید.
با استفاده از ابزار Paint Bucket Tool (کلید G) این شکل را به رنگ سفید درآورید.
قدم سوم: برای زمخت‌تر کردن تصویر لازم است که چند افکت تصویری اضافه کنیم. تصویر پرتره یا تصویر پسر را از پنل لایه‌ها انتخاب کنید و سپس مسیر Filter > Filter Gallery > Artistic > Film Grain را دنبال کنید. اکنون این موارد را تنظیم کنید:
Grain: 0
Highlight Area: 5
Intensity: 10

این فیلتر باعث می‌شود که کنتراست تصویر به حد قابل ملاحظه‌ای افزایش یابد.
دوباره همان مسیری که آمدید را تکرار کنید و این تنظیمات را اعمال کنید:
Grain: 7
Highlight Area: 3
Intensity: 3
رنگ آمیزی سوژهقدم اول: بر روی لایه‌ی پرتره راست کلیک و Blending Options را انتخاب کنید.
از طریق بخش Gradient Overlay یک رنگ مسی درخشان به سوژه بدهید و رنگ‌هایی مشابه رنگ‌های تصویر زیر برای گرادیانت در نظر بگیرید. مطمئن شوید که در این بخش Blend Mode روی Overlay تنظیم شده باشد.
قدم دوم: اکنون قصد داریم لباس سوژه را به رنگ قرمز درآوریم. یک لایه جدید ایجاد کنید ودر پنل لایه‌ها روی آن راست کلیک کنید و Blending Options را انتخاب کنید. در پنجره ظاهر شده، Blend Mode را روی Color بگذارید و OK کنید.
دوباره روی همین لایه راست کلیک کنید و Create Clipping Mask را انتخاب کنید. حالا یک براش بزرگ با سختی یا Hardness بالا انتخاب کنید و با کد رنگی #d14456 روی قسمت تیشرت سوژه بکشید.
برای اینکه این لایه‌ی قرمز رنگ بهتر بنظر بیاید روی آن راست کلیک کنید و Blending Options را انتخاب کنید. سپس در بخش Gradient Overlay تنظیمات تصویر زیر را اعمال کنید:
قدم سوم: در حالیکه این لایه قرمز رنگ را انتخاب کرده‌اید، از قسمت پائینی پنل لایه‌ها روی گزینه‌ی New Adjustment Layer کلیک کنید و سپس Levels را برگزینید. RGB Channel را بر اساس آنچه در تصویر زیر می‌بینید تنظیم کنید.
تکمیل طرحقدم اول: تا به اینجای کار، کلیت کار را طراحی کرده‌ایم. حالا لازم است دستکاری مختصری روی طرح داشته‌ باشیم. تصویر لکه قرمز را باز کنید. از پنل ابزار Rectangular Marquee Tool را انتخاب کنید و به مسیر Edit > Define Brush Preset بروید تا براش اختصاصی خودتان را بسازید.
قدم دوم: حالا از براشی که در مرحله‌ی قبل ساختید استفاده کنید. با رنگ قرمز این براش را به موهای سوژه بیفزائید و سپس لایه‌‎ای در زیر لایه سوژه ایجاد کنید و براش را با رنگ سفید به طرح بیفزائید.
قدم سوم: این طرح را با اضافه کردن چند متن به پایان ببرید.
از ابزار Rectangle (کلید U) استفاده کنید تا دو کادر سفید به پائین و سمت راست تصویر بیفزائید.
با فونت Marker Twins هر متنی که دوست دارید اضافه کنید. بعد روی پس‌زمینه آبرنگی که قبلا داشتید در پنل لایه‌ها راست کلیک کنید و Duplicate Layer را برگزینید.
این لایه‌ی ایجاد شده را به بالای لایه متنی که نوشتید بیاورید و روی آن راست کلیک کنید و گزینه Create Clipping Mask را برگزینید. Blend Mode را برای این لایه Lighten در نظر بگیرید.
دقیقا مشابه مرحله‌ی قبل یک کپی دیگر از لایه‌ی پس‌زمینه آبرنگی بگیرید و آن را به بالای همه‌ی لایه‌ها بیاورید. Blend Mode را برای این لایه Soft Light در نظر بگیرید. این کار فضا را کمی خشن‌تر می‌کند!
نتیجه کار شما باید چیزی مشابه تصویر زیر باشد. نگاه کردن به این تصویر می‌تواند مفاهیم متعددی را به ذهن بیننده وارد کند. شما می‌توانید از تکنیک‌هایی که در این آموزش یاد گرفتید برای ایجاد طرح‌های منحصر بفرد خصوصا پوسترهای هنری استفاده ببرید. امیدواریم از این آموزش بهره کافی را برده باشید. شما هم نتایج کارتان را برای ما بفرستید تا در سایت منتشر شود.
منبع: روکسو

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


صفر تا صد طراحی آی | درس دوم
 
در قسمت قبل از مجموعه درس های آموزش طراحی آی، درباره ماهیت آی ها، تاریخچه آنها، دلایل وجود و رشد استفاده از آی ها صحبت کردیم. در این قسمت اما، تمرکز ما بر طراحی عملی آی ها، نکات کاربردی و متداول ترین بایدها و نبایدهای این حرفه خواهد بود. اگر شما هم از علاقمندان به طراحی آی و علم UI و UX هستید، توصیه می کنیم این مطلب و مطلب قبل را مطالعه کنید.
3. چگونه یک آی طراحی کنیمبسیار خب، تا به اینجا درمورد اینکه آی چیست و چرا از آن استفاده می کنیم، صحبت کردیم. اکنون زمان آن رسیده که بفهمیم، برای طراحی آی چه چیزی لازم داریم.
3.1 مرحله تحقیقهر بار که شروع به کار روی یک پروژه جدید مبتنی بر آی ها می کنید، چند جنبه مهم وجود دارد که باید قبل از مراحل واقعیِ طراحی آنرا بفهمید.
من نام این مرحله را «مرحله تحقیق» گذاشته ام، زیرا اساساً تحقیق تمام کاری است که قرار است انجام دهید. شما باید بسته به زمان و شکیبایی که دارید، چند دقیقه یا چند ساعت وقت بگذارید و به دنبال پاسخ به چند سوال اساسی باشید.
مرحله تحقیق در طراحی آی
سوال اول: به چه اندازه هایی نیاز دارید؟اولین سوالی که همیشه باید از خود بپرسید، اندازه های مختلفی است که برای ایجاد یک آی نیاز دارید.
باید بدانید آی قرار است کجا مورد استفاده قرار بگیرد و برای استفاده در آن محل به چه اندازه هایی نیاز دارید؟
اگر بنا به دلایلی کار خود را روی یک پروژه تک اندازه انجام دهید، طبعا کارتان در این بخش به چندان طول نخواهد کشید. اما، اگر نیاز به ارائه اندازه های مختلف دارید، ممکن است خود را در وضعیتی دشوار بیابید، به ویژه اگر کار را برای مشتری انجام می دهید و او هیچ اشاره واضح و مشخصی به اندازه های مورد نیازش نداشته است.
سایز (اندازه) های مختلف آی ها
خوشبختانه برای ما، بسیاری از این مقادیر قبلا «استانداردسازی» شده اند، به این معنی که لازم نیست وقت خود را با اعداد مختلف تلف کنید تا بفهمید کدام اندازه در فلان محل پاسخگو است و کدامیک پاسخگو نیست.
اگر می دانید آی هایی که طراحی می کنید کجا استفاده می شوند، معمولاً می توانید مقادیر و اندازه های مورد نیاز را با یک جستجوی ساده در Google پیدا کنید.
آی های کوچک:
12 * 12
16 * 16
24 * 24
32 * 32
48 * 48
آی های متوسط:
64 * 64
96 * 96
128 * 128
256 * 256
آی های بزرگ:
512 * 512
1024 * 1024
 
نکته: اگر به مقادیر بالا بیشتر دقت کنید، به سرعت متوجه خواهید شد که بیشتر آنها با دو برابر کردن مقدار قبلی ایجاد می شوند: 12> 24> 48> 96؛ 16> 32> 64> 128> 256> 512> 1024.
در برخی موارد، مانند اپلیکیشن ها، می توانید اندازه های دقیق را مستقیما از تولیدکنندگان سیستم عامل ها پیدا کنید، مانند نمونه های زیر:
دستورالعمل های آی اپل
دستورالعمل های آی گوگل (اندروید)
اندازه پایه شما چه مقدار باید باشد؟اکیداً توصیه می کنم که هنگام کار روی پروژه های چند اندازه، همیشه از کوچکترین اندازه ی ممکن، کار را شروع کنید. این اندازه به «اندازه پایه» شما تبدیل می شود، که بعدا به منظور ایجاد سایر اندازه ها از آن استفاده خواهید کرد. دلیل این امر ماهیت Pixel-Perfect آی های شماست که در صورت بزرگ ساخته شدن و سپس کوچیک کردن آنها، دچار مشکل می شوند.
هنگامیکه بحث بر سر انتخاب یک مقدار برای «اندازه پایه» یک مجموعه آی می شود، همه چیز به نیاز پروژه بستگی دارد، اما قاعده کلی این است که همیشه باید کوچکترین اندازه ممکن را انتخاب کنید.
اندازه پایه (base-size) آی ها
به عنوان مثال اگر من نیاز به آی با سه اندازه گوناگون (16 در 16، 32 در 32 و 64 در 64) دارم، همیشه اطمینان حاصل می کنم که از 16 در 16 پیکسل به عنوان اندازه پایه خود شروع کنم و سپس موارد دیگر را با دوبرابر کردن آن ایجاد کنم.
ویژگی های اصلی موضوع موردنظر (برای طراحی آی) چیست؟وقتی مسئله اندازه را فهمیدیم، باید لحظاتی را درباره ویژگی های اصلی موضوع موردنظرمان تامل کنیم. (همان مفهومی که می خواهیم به وسیله آی آن را تصویرسازی کنیم.) به طور مثال اگر می خواهیم برای دکمه ای که عمل Save را انجام می‌دهد، آی طراحی کنیم؛ باید بررسی کنیم و پاسخ این سوال را پیدا کنیم که کدام اشیاء یادآور مفهوم ذخیره سازی (Save) برای کاربر ما خواهد بود. از نظر من، این مرحله ضروری ترین مرحله است، چرا که به ما این امکان را می دهد تا صفات اصلی آن موضوع را شناسایی کرده و بهترینِ آنها را انتخاب کنیم.
شما می توانید با برداشتن یک کاغذ یا باز کردن یک سند متنی در کامپیوتر خود و سپس نوشتن کلمات کلیدی که مربوط به شکل، اندازه، رنگ ها، ویژگی ها و …  آن موضوع است، به راحتی این کار را انجام دهید.
در حالی که برخی تمایل دارند وقت کمتری را برای این بخش از تحقیق اختصاص دهند، افزودن حتی یک دقیقه زمان اضافی در این بخش می تواند چندین برابر مفید باشد، به خصوص اگر تازه کار را شروع کرده اید. زیرا با رسیدن به «درکی درست» از موضوع به احساس خوشایندی دست خواهید یافت که غیر قابل وصف است.
از کدام سبک استفاده کنید؟در این مرحله باید به سبک فکر کنیم. سبک، نوع ظاهری است که آی های ما مطابق آن طراحی می شوند.
اگر به گذشته برگردیم، آن زمان اوضاع کاملاً متفاوت بود، زیرا سبکِ اولین نمادها توسط فناوری های نمایش محدود آن زمان دیکته می شد و این نه تنها به نوبه خود ظاهر و نحوه نمایش آی ها را تعیین می کرد بلکه پایه و اساس اولین سبک موجود برای طراحی آی را نیز بنا نهاد، سبکی که در آن اشکال توسط خطوط بولد، برای قسمت های بیرونی و خطوط نازکتر برای جزئیات داخلی نمایش داده می شدند.
امروزه از آن سد و محدودیت پیکسلی عبور کرده ایم و همین مسئله به ما امکان رشد و ایجاد سبک های جدید را داده است، سبک هایی که دائما در حال تغییر و تکامل هستند.
محبوب ترین سبک های امروزی عبارتند از:
pixel art
flat
material
line art
isometric
glyph
skeuomorphic
dimensional
hand-drawn
animated
سبک ها و استایل های مختلف در طراحی آی
وقتی صحبت از انتخاب سبک برای آی هایی که قرار است طراحی کنم می شود، معمولاً به Dribbble.com می روم، جایی که چند دقیقه را صرف تحلیل جدیدترین و مورد استقبال ترین کارها میکنم و همینطور که صفحه را بالا و پایین می کنم، بالاخره موفق می شوم که ایده ای راجع به آنچه می خواهم انجام دهم بدست آورم و سپس سعی می کنم به آن دست پیدا کنم.
همانطور که قبلا هم گفتم، اکیداً توصیه می کنم که از همان ابتدا، سبک مناسب برای موضوع مورد نظرتان را پیدا کنید، زیرا در غیر این صورت ممکن است با امتحان سبک های مختلف، وقت زیادی را از دست دهید.
و یک مورد دیگر، لطفاً از آن طراحانی نباشید که کارهای خوب را می بینند و سپس همان را دقیقا کپی کرده و به عنوان کار خودشان معرفی می کنند. البته برخی افراد این روش را برای یادگیری و رشد توصیه می کنند، اما این کار باید فقط در حد تمرین باشد، تمرینی که در آن سعی می کنید بفهمید تکنیک های مورد استفاده در طراحی های شگرف چگونه پیاده سازی می‌شوند.
اگر کپی کردن تمام کاری باشد که در نهایت انجام می دهید، ممکن است هرگز به آن نقطه نرسید که سبک شخصی خود را داشته باشید، همان چیزی که یک طراح آی خوب و حرفه ای را از یک طراح آی متوسط جدا می کند.
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


سیاه و سفید کردن قسمتی از عکس در فتوشاپ
یکی از قدیمی‌ترین جلوه‌هایی که در عکس می‌توانید ایجاد کنید، متمایز کردن یک رنگ (Color Splash) در عکس‌ها می‌باشد. افکت متمایز کردن یک رنگ در تصاویر با نام‌هایی نظیر: selective colour ،partial colour ،spot colour شناخته می‌شود. این افکت با سیاه و سفید کردن قسمتی از عکس در فتوشاپ و رنگی نگه داشتن برخی از قسمت های آن ایجاد می‌شود. اصولا این افکت برای رنگ‌هایی چون قرمز، آبی و زرد مناسب است.
در این آموزش به شما نشان خواهیم داد چگونه با استفاده از چند تکنیک ساده در فتوشاپ، یک رنگ را، خاص‌تر نمایش دهید و بقیه تصویر خود را سیاه و سفید کنید. البته برای این که نتیجه کار شما حرفه‌ای تر شود، چندین جلوه‌ی دیگر به عکس اضافه می‌کنیم تا زیبایی نهایی کامل شود. برای این آموزش ما از تصویر یک ماشین قرمز، استفاده می‌کنیم. قطعا ترکیب رنگ قرمز با لایه‌ی سیاه و سفید بسیار جذاب خواهد شد.
شروع کارابتدا وارد فتوشاپ شوید.
از مسیر File > Open تصویر مورد نظرتان را وارد برنامه کنید.
ابزار اصلی فتوشاپ برای جلوه‌های رنگی Color Range می‌باشد. برای دسترسی پنل این ابزار به مسیر Select > Color Range بروید.
کار با ابزار Color Rangeابزار Color Range برای کمک به شما، برخی رنگ‌ها را از قبل به طور پیش فرض در خود دارد. اما این قابلیت‌ دقیق عمل نمی‌کند و ممکن است قسمت‌هایی را که مورد نظر ما نیست هم به حالت انتخاب در بیاورد. در این مثال رنگ قرمز بدنه خودرو مورد نظر ماست اما برخی از قسمت‌های پیش زمینه نیز مورد انتخاب قرار گرفته است.
یک راه بهتر این است که از قسمت Select گزینه Sampled Color را انتخاب کنید. در مرحله بعد با استفاده از قطره چکان بر روی بدنه خودرو کلیک کنید تا فقط قسمت‌های قرمز مربوط به آن برای فتوشاپ مشخص شود. مقدار Fuzziness را بر روی بیشترین میزان قرار دهید. البته اگر با افزایش این مقدار رنگ‌های ناخواسته نیز به حالت انتخاب درآمد، از افزایش آن صرفنظر کنید.
برای این که نتیجه بهتری به دست آوریم گزینه Localized Color Clusters را فعال کنید. مقدار Range را هم بر روی بیشترین میزان تنظیم کنید. این گزینه کمک می‌کند تا رنگ‌های مشابه قسمت دلخواه ما نیز به حالت انتخاب درآیند.
بر روی OK کلیک کنید تا این قسمت به حالت انتخاب (Select) درآید. برای این که رنگ‌های این تصویر با یکدیگر آمیخته نشود، باید از این ناحیه یک لایه ماسک ایجاد کنیم.
برای اینکار به مسیر Select > Inverse بروید.
در مرحله بعدی باید یک لایه سیاه و سفید ایجاد کنیم. در انتهای پنل Layer بر روی آی مشخص شده در تصویر کلیک کنید. سپس گزینه Black &White را انتخاب کنید.
به دلیل این که شما در مرحله قبل از یک Layer Mask استفاده کرده‌اید، قسمت‌های قرمز تصویر به حالت سیاه و سفید در نمی‌آید.
انتخاب کردن نواحی با رنگ‌های قرمز تیره‌تر یا روشن‌تراین افکت به صورت یک قاعده کلی برای اکثر تصاویر کار می‌کند. اما وقتی کمی بیشتر دقت می‌کنم، متوجه یک مشکل بزرگ می‌شویم. قسمت‌هایی که قرمز تیره می‌باشد به حالت سیاه و سفید درآمده است و رنگ خاکستری به خود گرفته است. نوار‌های قرمز بر روی پرچم آمریکا نیز، خاکستری شده‌اند. علت این مشکل اینست که این رنگ‌های قرمز کمی از بدنه خودرو تیره تر هستند در نتیجه به حالت انتخاب در نیامده‌اند.
بر روی لایه Background کلیک کنید. سپس بر روی علامت چشم لایه سیاه و سفید کلیک کنید تا پنهان شود.
مجددا به مسیر Select > Color Range  بروید. این بار به عنوان رنگِ نمونه، با استفاده از قطره چکان قرمزی پرچم را انتخاب کنید. خوشبختانه در تصویر ما رنگ نوار پرچم با سقف ماشین یکسان است و از تنظیمات مشابهی برای آنها می‌توانیم استفاده کنیم.
برای اینکه نتیجه خوبی داشته باشید در این مرحله در تنظیم مقدار Fuzziness و Range بسیار دقت کنید.
نمونه رنگ پرچم حاوی برخی از قسمت‌های بدنه خودرو از جمله سقف آن نیز شده است.
لایه سیاه و سفید را دوباره آشکار کنید، سپس بر روی لایه ماسک کلیک کنید. از کلید ترکیبی Windows+Backspace استفاده کنید و این قسمت را با رنگ مشکی پر کنید. این کار باعث می‌شود ناحیه جدید نیز به لایه Mask اضافه شود.
اگر مناطق دیگری در تصویر وجود دارد که همچنان سیاه و سفید است، می‌توانید با استفاده از یک Color Range دیگر آنها را نیز به لایه Mask اضافه کنید. گفتنی است که با یک براش (Brush) با رنگ مشکی هم، می‌توانید این مناطق را به صورت دستی به لایه Mask اضافه کنید. در مقابل، اگر قسمتی به صورت ناخواسته سفید و سیاه شد، می‌توانید آن را با استفاده از رنگ سفید از لایه Mask خارج کنید.
تنظیمات نهاییدر نهایت برای اینکه نتیجه بهتری به دست بیاوریم، یک لایه Color Balance به آن اضافه می‌کنیم. بر روی علامتی که در تصویر مشخص شده است کلیک و سپس گزینه Color Balance را انتخاب کنید.
در پنل Color Balance گزینه Tones را بر روی Shadows تنظیم کنید. تنظیمات رنگ‌ها را نیز مطابق تصویر قرار دهید (هر چقدر لغزنده‌ها را به سمت رنگ Blue و Cyan بکشید، یک لایه عمیق‌تر سلنیوم بر روی تصویر ایجاد می‌شود).
گزینه Tones را بر روی Highlights و تنظیمات رنگ‌ها را نیز مطابق تصویر قرار دهید.
نتیجهنتیجه نهایی یک اثر رنگی براق و بسیار جذاب و دیدنی است که طیف قرمز در تصویر برجسته شده است:
منبع: روکسو

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


مبانی سئوی بصری در طراحی وبسایت
 
در دنیای دیجیتال امروز، سئو جانوری است در حال تکامل و رشد، که با هر تغییری در الگوریتم های گوگل، فصلی تازه از آن برای طراحان و توسعه دهندگان وب رقم می خورد. کلمات کلیدی و نتایج موتور جستجو کانون توجه تمام کسانی است که در حال توسعه یا نگهداری وبسایت برای خود یا مشتری هایشان هستند. با این حال جنبه ای از سئو وجود دارند که در حالی به دست فراموشی سپرده شده است که یکی از مهمترین و کارآمد ترین جنبه های آن است؛ و آن چیزی نیست جز سئو بصری یا (Visual SEO) امل سئوی تصاویر ، آی ها، بنرها و ویدئوهای وبسایت. موارد معدودی برای توجه و مراقبت هنگام کار بر روی سئو بصری یک وبسایت وجود دارد؛ از سایز و کیفیت محتوای بصری تا نحوه قرار گیری متادیتا.
امروزه، تصاویر در نتایج هر سه نوع جستجوی متنی، تصویری و صوتی به کاربران نمایش داده می شوند. ممکن است فکر کنید که این نوع محتوا تنها در زیبایی و نمای ظاهری بهتر مطالب شما کاربرد دارد، اما واقعیت این است که محتوای تصویری می تواند سهم بزرگی در موفقیت سئوی وبسایت شما نیز داشته باشد.
بیایید به اتفاق نگاهی داشته باشیم به مبانی یک سئوی بصری خوب که هر وبسایت برای موفقیت در سئو مم به رعایت آنهاست.
اهمیت سئو ظاهری در طراحی وبسایت
مالکیتقبل از هر چیز، مالک وبسایت و یا طراح/برنامه نویس آن باید حق استفاده از تک تک تصاویر و سایر محتویات بصری مورد استفاده در وبسایت را داشته باشد. برای مثال، اگر تصاویر توسط یک عکاس که استخدام شده است، تهیه شده اند، وجود یک قرارداد کتبی که بیانگر حق مالکیت مشتری (مالک وبسایت یا طراح آن) در استفاده از آن تصاویر باشد، اامی است.
در صورتی که تصاویر از یک وبسایت تصاویر استوک، دانلود شده باشد؛ باید منبع قانونی این تصاویر مشخص باشد. هر وبسایت دانلود تصاویر استوک قوانین خاص خود را دارد، برخی از آنها با پرداخت یک هزینه اشتراک ماهیانه اجازه استفاده نامحدود از تصاویر و ویدئوهای وبسایت را به شما خواهند داد و برخی دیگر اجازه استفاده از آنها را به صورت تکی و با پرداخت های جداگانه خواهند داد.
در صورتی که یک طراح، محتوای گرافیکی وبسایتی را طراحی کرده باشد، قراردادی مشابه قرارداد عکاس برای این موضوع نیز مورد نیاز است. البته نیازی به آپلود این قرار دادها در وبسایت نیست، اما وجود آنها برای پیشگیری از بروز مشکلات احتمالی آینده ضروری است. استفاده از تصاویر بسیار معروف (همه گیر) و تصاویر شخصی نیازی به پرداخت نخواهند داشت و مشکلی از این نظر ایجاد نخواهد شد. همچنین ویدئوهای درج شده از یوتیوب یا دیگر شبکه های اجتماعی (به صورت Embed Link) مشکلی در بر نخواهند داشت، اما همواره بهتر است با صاحبان این نوع محتوا ارتباط گرفت و آنها را درباره استفاده از ویدئویشان در وبسایتتان مطلع کنید.
کیفیتهر نوع محتوای بصری باید کیفیت لازم را دارا باشد. یک تصویر یا ویدئو بی کیفیت به سرعت اعتبار یک سایت را پایین می آورد. دلیل دیگری که برای اهمیت کیفیت وجود دارد آن است که مردم معمولا در هنگام جستجو تنها روی موارد با کیفیت (یا حداقل مواردی که با کیفیت تر به نظر می رسند) کلیک می کنند. البته کیفیت تنها مربوط به مات یا شفاف بودن نیست، بلکه کیفیت در اینجا به طور کلی به معنای جذابیت ظاهری است. به عنوان مثال، خیلی تیره نباشد، خیلی پررنگ یا کمرنگ نباشد، یا اگر کوچک شده، از قسمت نادرستی برش داده نشده باشد!
در مورد رابط گرافیکی وبسایت، طراح باید از گایدلاین (راهنمای) برند شما پیروی کرده باشد، این مهم شامل رنگ ها، فونت ها و تکسچر (بافت) های استفاده شده در تمامی موارد طراحی شده مانند بنرها، پوسترها، آی ها و … است.
هنگامیکه طراحی گرافیک یک وبسایت استانداردهای لازم را رعایت کرده و زیبا به نظر برسد، مخاطبان بیشتری را جذب کرده و تشخیص سبک و سیاق برند شما نیز برای آنها ساده تر و سریع تر صورت می گیرد.
اهمیت کیفیت تصاویر در سئو
بهینه سازیبهینه سازی تصاویر وبسایت نتیجه چندانی در جستجوی تصویری در برنخواهد داشت اما زود قضاوت نکنید. تاثیر این مورد در بهبود رتبه سایت شما و به تبع آن موفقیت بیشتر در هر سه نوع جستجو، غیرقابل انکار است. هنگامیکه یک وبسایت ظاهری جذاب و خیره کننده اما غیربهینه (UnOptimized) داشته باشد، زمان بارگذاری آن کند خواهد بود. این روزها هیچ چیز بدتر از یک وبسایت کند نیست! عکس ها و ویدئوهای حجیم اولین متهمینی هستند که برای کند بودن یک وبسایت می توان یافت. اما در مقابل راه حل بسیار ساده است؛ بهینه سازی!
 راهنمای قدم به قدم کاهش حجم تصاویر بدون افت کیفیت در فتوشاپ
برای بهینه سازی تصاویر، می توانید از TinyPNG یا پلاگین هایی مانند WP Rocket برای وردپرس استفاده کنید. بهینه سازی تصاویر به حدی حائز اهمیت است که در حال حاضر برخی از سرویس های هاستینگ، آن را در قالب پکیج هایشان پیشنهاد می کنند.
برای ویدئوها نیز نرم افزارها و ابزارهای آنلاینی وجود دارند که به بهینه سازی و کم حجم کردن آنها بدون افت کیفیت محسوس، کمک خواهند کرد. یک روش برای قراردادن یک ویدئو در وبسایت، آپلود آن در شبکه هایی مانند یوتیوب یا آپارات و سپس قراردادن کد (Embed) آن در وبسایت است.
 نکاتی برای بهینه سازی محتوای ویدیویی در وب سایت شما
اینفوگرافیک های طویل نیز همانند سایر تصاویر قابلیت بهینه سازی را دارند. راه حل بهتر اما، قرار دادن یک نسخه کم حجم از اینفوگرافیک در متن و قراردادن یک لینک به نسخه با کیفیت آن (روی تصویر یا در خلال متن) که جدا از صفحات سایت روی هاست میزبانی می شود است.
برخی از ابزارهای آنلاین مانند Visme پیشنهاد می کنند که اینفوگرافیک های ساخته شده روی پلتفرمشان را منتشر کنیم، این هم می تواند راه حل مناسبی برای رهایی از میزبانی اینفوگرافیک های حجیم، به خصوص برای اینفوگرافیک های تعاملی باشد.
متادیتاهیچ کدام از محتویات بصری یک وبسایت نباید بدون متادیتا (metadata) باشند. متادیتاها اطلاعاتی هستند که به موتورهای جستجو (متنی، تصویری و صوتی) کمک می کنند تا بتوانند تصاویر/ویدئوهای شما را به کاربران پیشنهاد دهند. متادیتا شامل موارد زیر می شود:
File name: پیش از آپلود هر تصویری در وبسایت، باید مطمئن شد که نام تصویر به خوبی بیانگر محتوای آن است. هیچگاه تصاویر را با نام هایی نظیر این آپلود نکنید : ysdas54.jpg
Title: پس از آپلود تصویر، باید یک عنوان بدهید. این همان چیزی است که در موتور جستجو در کنار alt-text نمایش داده می شود.
Alt-text: متن alt دو هدف دارد. اول اینکه اطلاعات و توضیحاتی در رابطه با تصویر به افرادی که دچار مشکلات بینایی هستند و نمی توانند تصاویر را واضح ببینند ارائه کند. دوم اینکه به موتورهای جستجو کمک کند که بدانند دقیقا چه چیزی در تصویر وجود دارد. alt-text از آنچه فکر کنید بسیار مهمتر است!
اهمیت متادیتا تصاویر در سئو
به عهده شمااگر در زمینه طراحی وبسایت فعالیت می کنید یا خودتان یک وبسایت دارید، توصیه می شود از تکنیک های ذکر شده در این مقاله استفاده کنید. بسیاری از مردم SEO تصاویر را فراموش کرده و گمان می کنند که این بخش از سئو اهمیت چندانی ندارد، در حالیکه کاملا برعکس است! این مورد، هم در سئو و هم رتبه و جایگاه وبسایت شما در نتایج جستجو موثر خواهد بود. برای کسب اطلاعات بیشتر درباره سئو می توانید سری به اینجا بزنید. همچنین می توانید نظرات و سوالات خود را درباره این مطلب از قسمت نظرات با ما در میان بگذارید.
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


بهترین اکشن های رایگان فتوشاپ در سال ۲۰۱۹ (قسمت دوم: فیلترها و افکت ها)
اکشن ها در فتوشاپ، برای بهینه سازی تصاویر، پیاده سازی افکت ها و به طور کلی انجام ادیت های سریع روی عکس ها بسیار مورد استفاده قرار می گیرند. فرقی نمی کند یک گرافیست حرفه ای باشید یا یک فرد کاملا تازه کار در زمینه گرافیک. در هر صورت اکشن ها به شما کمک می کنند به میزان بسیار زیادی در زمان خود صرفه جویی کنید.
به کمک اکشن ها می توانید تاثیراتی را که در نتیجه چندین ساعت ادیت ایجاد می شوند، تنها با یک کلیک ساده و در زمان بسیار کمی روی تصاویر مورد نظر اعمال کنید. در واقع، اکشن ها فایل هایی حاوی یک سری دستورات متوالی از کارهایی هستند که در فتوشاپ انجام می شود و تصویر را به تغییر و جلوه دلخواه می رساند.
در ادامه، دومین مجموعه از بهترین اکشن های فتوشاپ در سال 2019 که با موضوع افکت ها و فیلترهای رنگی هستند را به صورت رایگان برای دانلود قرار داده ایم که امیدواریم از اجرای آنها بر روی تصاویر خود لذت ببرید. با ما همراه باشید…
 ساخت اکشن ساحلی در فتوشاپ + آموزش کامل کار با Batch
30 اکشن فیلترهای اینستاگرامی
فیلترهای اینستاگرام، بدون شک از پرطرفدارترین و دوست داشتنی ترین فیلترهای رنگی در میان افراد فعال در شبکه های اجتماعی محسوب می شوند. ممکن است شما هم دوست داشته باشید برخی از این فیلترها را در فتوشاپ بر روی تصاویر دلخواه پیاده کنید. شاید برخی از آنها مانند نمونه های سیاه و سفید چندان کار سختی نباشد اما نمونه های زیادی در میان آنها قرار دارد که شبیه سازی آنها در فتوشاپ به راحتی امکان پذیر نیست. در این مجموعه، 30 اکشن رایگان از فیلترهای رایگان را قرار داده ایم که به کمک آنها می توانید فیلترهای اینستاگرام را تنها با یک کلیک روی تصاویر دلخواه خود در فتوشاپ اعمال کنید.
 
لینک دانلود: دانلود فیلتر های اینستاگرام به صورت اکشن فتوشاپ
اکشن های مات (Deep Matte)
این مجموعه از اکشن ها می تواند حالت مات و بسیار مات را برای تصاویر پرتره و کلوزآپ شما به ارمغان بیاورد. پیشنهاد می کنیم حتما این جلوه های شیک و رایگان را بر روی تصاویر خود اعمال کنید و از تاثیر آنها لذت ببرید. نکته ی قابل توجه در مورد این اکشن ها این است که شامل Preset های نرم افزار ادوبی لایتروم هم می باشند و اگر عادت دارید عکس های خود را در لایتروم ویرایش کنید می توانید از آنها بهره ببرید.
 
لینک دانلود: اکشن های مات و بسیار مات برای فتوشاپ
اکشن های برف زمستانی
اگر می خواهید به تصاویر خود جلوه زمستانی بدهید یا تم کریسمس روی آنها اعمال کنید، این اکشن های برای شما عالی خواهند بود. به کمک آنها می توانید تم رنگی تصویر را تغییر داده و حالت بارش برف را شبیه سازی کنید. این مجموعه نیز شامل 6 اکشن است که می توانید به صورت رایگان از لینک زیر دانلود کنید.
 
لینک دانلود: اکشن های زمستانی برای فتوشاپ
اکشن های متحرک سبک Glitch
این مجموعه شامل اکشن های یونیک و متفاوتی است که برای تبدیل تصاویر به عکس های متحرک GIF فوق العاده هستند. نمونه ای از تاثیر این اکشن بر روی عکس ها در تصویر بالا مشخص است. اگر شما هم به این سبک از تصاویر علاقه دارید پیشنهاد می کنیم این مجموعه رایگان و یونیک را از دست ندهید.
 
لینک دانلود: اکشن های متحرک سبک Glitch
اکشن های سبک Glitch ثابت
این مجموعه از اکشن ها شبیه به اکشن هایی است که در بالا معرفی شد با این تفاوت که بر روی تصاویر ثابت کاربرد دارند. به عبارتی می توان آنها را Glitch ثابت نامید. پیاده سازی این افکت ها به صورت دستی در فتوشاپ کار بسیار سختی است که به کمک این این اکشن ها تنها کار چند کلیک ساده خواهد بود. این اکشن ها نیز همانند سایر اکشن های معرفی شده کاملا رایگان هستند.
 
لینک دانلود: اکشن های سبک Glitch ثابت برای فتوشاپ
اکشن های پرتره سینماتیک
همانطور که می دانید، جلوه های سینماتیک از پر طرفدارترین جلوه های تصویری در دنیای ادیت تصویر محسوب می شوند. این افکت ها تصاویر شما را شبیه به صحنه های فیلم های سینمایی می کند. به کمک این اکشن ها می توانید این گونه افکت ها را به راحتی روی تصاویر مد نظر خود اعمال کنید.
 
لینک دانلود: اکشن های سینماتیک رایگان برای فتوشاپ
اکشن های رایگان سری Cosmic
این اکشن ها نیز بیشتر بر روی تصاویر پرتره کاربرد دارند و به کمک آنها می توانید جلوه های رنگی بسیار زیبا و خلاقانه ای روی تصاویر خود اعمال کنید. همچنین این اکشن ها برای بهبود کیفیت تصاویر گرفته شده توسط دوربین های غیرحرفه ای مانند دوربین های موبایل بسیار مفید هستند.
 
لینک دانلود: اکشن های رایگان سری Cosmic برای فتوشاپ
اکشن های سری Duotone
اگر به دنبال راهی هستید تا کمی جلوه های رنگی خلاقانه شبیه اینستاگرام به تصاویر خود اضافه کنید، این اکشن ها گزینه مناسبی خواهند بود. به کمک آنها می توانید عکس های خود را از حالت سادگی خارج کنید و کمی رنگ و لعاب به آنها ببخشید و برای انتشار در شبکه های اجتماعی آماده کنید.
 
لینک دانلود: اکشن های رایگان سری Duotone برای فتوشاپ
اکشن های Easy Comic طنز مانند
به کمک این اکشن ها می توانید حالت های کمیک و طنز مانند روی تصاویر خود اعمال کنید. این اکشن ها بیشتر بر روی تصاویر پرتره تاثیر می گذارند اما می توانید در سایر تصاویر خود نیز از آنها بهره ببرید. اجرا و پیاده سازی این اکشن ها نیز همانند سایر اکشن های معرفی شده بسیار راحت و آسان است.
 
لینک دانلود: اکشن های طنز مانند Easy Comic
 
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


استفاده از Wire Frame ها در طراحی وب
 
طراحی یک وبسایت یا اپلیکیشن، شبیه ساختن هر چیز دیگری است؛ خانه، خودرو، ماشین آلات، و غیره. تمامی اینها برای ساخته شدن و عملکرد صحیح خود به یک قالب اسکلتی و یک نقشه (دستور العمل) ساخت نیاز دارند. وبسایت ها و اپلیکیشن ها نیز به همین صورت و به وسیله WireFrame ها ساخته می شوند. وایر فریم ها نقشه و دستورالعمل ساخت وبسایت ها و اپلیکیشن های امروزی است.
البته گاها ساخت یک وبسایت یا اپلیکیشن ساده می تواند بدون نیاز به wireframe ها نیز صورت بگیرد. مانند طراحی وبسایت های شخصی یا وبلاگ های ساده ای که توسط کاربران معمولی در وبسایت هایی مانند wix، بلاگر یا بلاگفا ساخته می شوند. اما گول این جمله را نخورید! حتی در پس همین سرویس های ساده نیز wireframe های از پیش ساخته شده ای وجود دارند که برای راحتیِ کار افراد تازه وارد و بی تجربه به وجود آمده اند.
برای یک وبسایت بزرگ با انبوهی از مطالب و به تبع نیاز شدید کاربرانش به پیمایش یکپارچه و خوب در آن، نیاز به یک wireframe دقیق، غیرقابل انکار است. یک برنامه نویس یا طراح وب حرفه ای، حتی برای وبسایت های کوچک نیز از wireframe استفاده می کند.
در دنیای UX و UI، همواره درباره wireframe ها و استفاده از آنها می شنوید. اما وایرفریم دقیقا چیست؟ واقعیت این است که پس از طرح ریزی اولیه، wireframe گام بعدی برای رسیدن یه یک UX و UI موفق در هر وبسایت یا اپلیکیشن است.
Wireframe چیست؟
wireframe وبسایت دقیقا چیست؟wireframe یک ساختار گرافیکی و بصری از هر وبسایت در سطح ابتدایی است. تصاویر در وایرفریم به صورت مستطیل (یا مربع) هایی با قطرهای متقاطعشان نمایش داده می شوند، محتوای متنی به صورت خطوط و دکمه ها نیز در ابعاد کوچکتر با یک آی ساده نمایش داده می شوند.
برای درک بهتر نحوه نمایش محتواهای گوناگون در وایرفریم، می توانید به تصویر زیر توجه کنید که نمونه wireframe یک وبسایت ساده است.
هدف از یک wireframe تنها نمایش نحوه دیده شدن یک صفحه نیست، بلکه بیانگر نحوه پیمایش و تعامل کاربر با صفحات نیز خواهد بود. wireframe ها مانند نقشه ساختمان، حاوی دستور العمل هایی دقیق درمورد نحوه چینش اجزا در کنار یکدیگر هستند.
استفاده از wireframe ها می تواند صرف جویی عظیم در وقت را به همراه داشته باشد، مخصوصا در ارتباطات میان طراح یا برنامه نویس وبسایت با مشتری.
قبل از ساخت وبسایت، نمایش wireframe آن به مشتری، مشکلات و سوالات را قبل از طراحی کامل و ایجاد مشکلات بزرگتر برطرف خواهد کرد. با این کار یک زبان مشترک میان طراح/برنامه نویس و مشتری شکل می گیرد که سوالات و پاسخ های موجود را پیش از ساخته شدن وبسایت و تبدیل شدن آنها به مشکلاتی بزرگتر، آشکار می کند.
استفاده از wireframe ها به ایجاد یک زبان طراحی اولیه کمک می کند، به گونه ای که هنگامیکه وبسایت نهائی راه اندازی شد، مراقبت و تغییرات آن با سهولت بیشتری امکان پذیر خواهد بود.
یک وایرفریم وبسایت/اپلیکیشن
وایرفریم ها مراحل گوناگونی از توسعه را دارندوایرفریم اولیه یک وبسایت کاملا ساختارگونه و اسکلتی است، هیچ تصویر یا محتوای جدیدی در آن وجود ندارد و تنها راهنمای پیمایش و ارتباط میان قسمت های مختلف درون آن ترسیم شده است. برخی از توسعه دهندگان علاقه مندند که وایرفریم های اولیه را روی یک دیوار بزرگ یا یک تخته (سیاه/سفید) رسم کنند. این گونه انتخاب ها تا حد زیادی شخصی است و به طراح/برنامه نویس سایت بستگی دارد. دیگر طراحان/برنامه نویسان نیز علاقه مندند که از نرم افزارهای خاصی مانند Sketch یا Mackflow برای ساخت wireframe هایشان استفاده کنند.
پس از ساخت وایرفریم اولیه، نوبت به اصلاح و تغییر آن می رسد، یعنی مرحله که در آن محتوا را به Wireframe اضافه می کنیم. مرحله دوم شامل افزودن عناصری خاص مانند، عناوین، تیترها، دکمه ها، تصاویر و دیگر محتواهای ساده است. این دقیقا همان زمانی است که وبسایت ها توسط طراحان UI و UX و به آرامی شروع به نفس کشیدن می کنند.
مرحله سوم زمانی است که Wireframe تبدیل به یک Prototype یا نمونه اولیه از وبسایت می شود. در این گام، وبسایت برخی از المان های ظاهری و محتوای خود را در خود دارد اما نه همه آن را! در این گام، مشتری، طراح و متخصص سئو می توانند درباره مقدار محتوای هر قسمت از وبسایت تصمیم گیری کنند. برای مثال، باکس های متنی اندازه مشخصی دارند و محتوا باید متناسب با آن فضا تولید شده باشد. همچنین تصاویر باید به گونه ای ساخته شده یا Resize شوند که بتوانند در Placeholder مختص به خودشان جای بگیرند.
وایر فریم ها را از کجا پیدا کنیم؟
طراحان و برنامه نویسان Wireframe هایشان را از کجا دریافت می کنند؟در واقع همانطور که انواع مختلفی از طراحان و برنامه نویسان وجود دارند، انواع مختلفی از wireframe ها نیز وجود دارند. از قالب های پیش ساخته موجود در اینترنت که به راحتی قابل دانلود هستند، تا ابزارهای آنلاین و نرم افزارهایی برای ساختن نمونه های کاملا شخصی. برخی از وبسایت ها و برنامه های توسعه رابط کاربری (UX) دارای وایرفریم های مخصوص خودشان هستند.
کیت های وایرفریم برای نرم افزارهای مختلف یا به صورت قابل چاپ روی کاغذهای A4 معمولی، در دسترس هستند. همچنین انواعی از وایرفریم در اندازه کارت های بازی موجود است که به توسعه دهندگان کمک می کند تا به وسیله آنها حین جلسات کاری و در هر مکانی، ایده و فکرش را برای دیگران بچیند و توضیح دهد.
به عهده شماآیا تا کنون یک وایرفریم ساخته اید؟ اگر علاقه مند به یادگیری علم UI و UX هستید، توصیه می کنم از ساخت wireframe ها شروع کنید. هزاران مقاله آموزشی و محتوای ویدیوئی رایگان در دسترس شماست تا هر آنچه را که نیاز دارید یاد بگیرید.
در پایان طبق روال، از شما خوانندگان عزیز دعوت می شود سوالات و پیشنهادات خود را از قسمت نظرات با ما در میان بگذارید و در صورتی که این مقاله برای شما مفید بوده است، آن را با دوستان و همکاران خود به اشتراک بگذارید.
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


بهترین اکشن های رایگان فتوشاپ در سال ۲۰۱۹ (قسمت سوم: منظره و طبیعت)
اکشن ها در فتوشاپ، برای بهینه سازی تصاویر، پیاده سازی افکت ها و به طور کلی انجام ادیت های سریع روی عکس ها بسیار مورد استفاده قرار می گیرند. فرقی نمی کند یک گرافیست حرفه ای باشید یا یک فرد کاملا تازه کار در زمینه گرافیک. در هر صورت اکشن ها به شما کمک می کنند به میزان بسیار زیادی در زمان خود صرفه جویی کنید.
به کمک اکشن ها می توانید تاثیراتی را که در نتیجه چندین ساعت ادیت ایجاد می شوند، تنها با یک کلیک ساده و در زمان بسیار کمی روی تصاویر مورد نظر اعمال کنید. در واقع، اکشن ها فایل هایی حاوی یک سری دستورات متوالی از کارهایی هستند که در فتوشاپ انجام می شود و تصویر را به تغییر و جلوه دلخواه می رساند.
در ادامه، سومین و آخرین بخش از مجموعه دانلود بهترین اکشن های فتوشاپ در سال 2019 را که با موضوع طبیعت و منظره هستند، به صورت رایگان برای دانلود قرار داده ایم که امیدواریم از اجرای آنها بر روی تصاویر خود لذت ببرید. با ما همراه باشید…
اکشن های سبک لومو برای فتوشاپ
اگر عکاس هستید یا به عکاسی علاقه مندید حتما نام لوموگرافی برایتان آشناست. لومو یکی از ژانرهای محبوب عکاسی محسوب می شود که طرفداران زیادی برای خود دارد. اگر شما نیز از طرفداران چنین عکس هایی هستید، می توان به کمک این اکشن ها و تنها با چند کلیک ظاهری زیبا و یونیک به تصاویر خود بدهید.
 
لینک دانلود: اکشن های ژانر لوموگرافی برای فتوشاپ
 
در حاشیه
ژانر لوموگرافی در عکاسی در اوایل دهه ۹۰ میلادی توسط دو دانش آموز اتریشی ابداع و رسمی شد. بنیان‌گذاران این سبک در ابتدا با استفاده از دوربین لومو که یک دوربین ارزان قیمت روسی بود، تصاویری با کنتراست بالا و روشنایی کم (Vignette) و مات سبک کردند و به تدریج آنرا تبدیل به یک ژانر در عکاسی کردند. اگرچه برخی ممکن است آنرا صرفا یک تکنیک در عکاسی بنامند، اما در واقعیت طرفداران زیاد اینگونه عکس ها، آنرا تبدیل به یک ژانر مجزا در هنر عکاسی کرده اند.
اکشن های طبیعت و منظره های باز
اگر به عکاسی از طبیعت و منظره های باز در شرایط نور طبیعی علاقه مند هستید پیشنهاد می کنیم این اکشن ها را از دست ندهید. به کمک این اکشن ها می توانید جزئیات، روشنایی، کنتراست و میزان نور را در تصاویر خود کنترل کنید. به ویژه هنگامی که عکس را با دوربین موبایل گرفته باشید، این اکشن ها می توانند در بهبود کیفیت کلی آن موثر واقع شوند.
 
لینک دانلود: اکشن های طبیعت و منظره برای فتوشاپ
اکشن های مرتبط با مناظر جنگلی
این مجموعه شامل دو اکشن مجزاست که هر کدام به تنهایی به تصاویر منظره شما کمک می کند تا طبیعی تر داشته و حرفه ای تر جلوه کنند. این اکشن ها در واقع میزان روشنایی، کنتراست و سایر عوامل موثر بر کیفیت تصویر را به شکل خودکار و به مقادیر از پیش تعیین شده تغییر می دهند و تنها برای تصاویر گرفته شده در بیرون و مناظر باز کاربرد دارند.
 
لینک دانلود: اکشن های مرتبط با مناظر جنگلی
بهترین اکشن های تابستانی 2019
عکاسی در فصل تابستان، با وجود هوای گرم که ممکن است اذیت کننده باشد، بسیار لذت بخش است. از طرفی تصاویر گرفته شده در این فصل، تن رنگی و نوری خاص خود را دارند که موجب جلب توجه بسیاری از مخاطبان عکاسی می شود. همین موضوع اهمیت ادیت و ویرایش اینگونه تصاویر را دو چندان می کند. یک ادیت اشتباه می تواند به طور کلی تم تصویر شما را به هم بریزد و جذابیت آنرا کاهش دهد. اگر به دنبال راهی برای ادیت ساده تر تصاویر تابستانی خود هستید، استفاده از اکشن برای اجرای دستورات ویرایشی از پیش تعریف شده روی تصاویر، ایده بدی نخواهد بود.
 
لینک دانلود: اکشن های مرتبط با تصاویر تابستانی
اکشن های سری Filmtastic
به کمک این اکشن ها می توانید تصاویر خود را شبیه به صحنه های سینمایی و سکانس های موجود در فیلم ها کنید. لازم به ذکر است که این اکشن ها نیز همانند سایر اکشن های معرفی شده در این پست، تاثیر اصلی خود را روی تصاویر باز و منظره نشان می دهند.
 
لینک دانلود: اکشن های Filmstatic برای فتوشاپ
برترین اکشن های پاییزی 2019
همانند اکشن های وِیژه تصاویر تابستانی، این اکشن ها نیز ادیت تصویر شما را در مسیر گرفتن تم فصلی پیش می برند. این اکشن ها می توانند بیش از 50 افکت با تم پاییزی را روی تصاویر شما اعمال کنند. فراموش نکنید این اکشن ها روی تصاویر باز و منظره، به ویژه تصاویر گرفته شده در شرایط نوری ضعیف، بیشترین تاثیر ممکن را اعمال می کنند.
 
لینک دانلود: برترین اکشن های پاییزی سال 2019
برترین اکشن های سیاه و سفید سال 2019
اگرچه تبدیل تصاویر رنگی به سیاه و سفید در فتوشاپ، کار چندان سختی نیست اما استفاده از اکشن ها در این زمینه نیز، می تواند تاثیرات زیبا و منحصر به فردی روی تصاویر شما داشته باشد. همچنین اگر به ابزار های تغییر رنگ در فتوشاپ مسلط نباشید، این اکشن برای شما بسیار مفید خواهند بود.
 
لینک های دانلود: 
اکشن های سیاه و سفید سری اول
اکشن های سیاه و سفید سری دوم
اکشن های سیاه و سفید با کنتراست بالا
اکشن های سیاه و سفید وینِت
اکشن های شبیه سازی تصاویر قدیمی
اگر به دنبال راهی هستید که تصاویر خود را همچون تصاویر گرفته شده با دوربین های قدیمی جلوه دهید، استفاده از اکشن های موجود در این مجموعه راه حل بسیار مناسبی خواهد بود. به کمک این اکشن های تنها با چند کلیک و در زمانی کم، می توانید افکت هایی شبیه به عکس های قدیمی را روی تصاویر مد نظر خود اعمال کنید. خبر خوب برای مخاطبان لایتروم هم اینکه نسخه Preset این اکشن ها برای لایتروم نیز در دسترس است که می توانید به صورت رایگان دانلود و استفاده کنید.
 
لینک دانلود: اکشن های ایجاد افکت عکس های قدیمی
 
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


۱۰ نکته برای طراحی ایمیل های سازگار با موبایل
در چند سال اخیر طراحی برای تلفن های هوشمند تغییرات بسیار بزرگی را دیده است. بر اساس اکثر گزارشات حدود 61 درصد از کاربران ایمیل های خود را در تلفن همراهشان باز می کنند و 31 درصد کاربران نیز می گویند که با همان تلفن همراه خرید های ایمیلی را انجام می دهند. این آمار روز به روز افزایش می یابند به همین دلیل بهتر است ایمیل های خود را برای تلفن های همراه نیز بهینه سازی کنیم.
1. طراحی ساده و تک ستونهبهترین و آسان ترین راه، طراحی یک ایمیل طراحی تک ستونی به همراه عرض واکنش گرا است اما اگر دوست دارید که طراحی هایتان چند ستونه باشد باید به نکته ای توجه کنید؛ طراحی چند ستونه بدین معنا است که در گوشی های موبایل عناصر شما روی هم قرار می گیرند (stack می شوند) بنابراین قبل از ارسال ایمیل ها باید ببینید شکل Stack شده ی آن ها به چه شکلی است. آیا ظاهری قابل قبول دارد یا باعث دوری کاربران از سایت شما می شود؟
برای راحتی کار شما یکی از قالب های طراحی ایمیل برای موبایل را در اختیار شما قرار می دهیم:
نمونه طرح ایمیل سازگار با تلفن همراه (طراحی تک ستونه)
دانلود تمامی کد ها + تصاویر این قالب آماده
2. غیرفعال کردن عناصر خاصشما می توانید با استفاده از کد زیر عناصر desktop را غیرفعال کرده و عناصر موبایلی را نمایش دهید. به طور مثال می توانید تصویر بهینه شده ای را نشان دهید که با سایز دستگاه های موبایلی سازگار است یا سایز دکمه هایتان را تغییر دهید:
 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
19
20
21
22
23
24
25
26

<style>
@media screen and (max-device-width:600px), screen and (max-width:600px) {
      .hide {
        display:none!important;
        width:0px!important;
        height:0px!important;
      }      .show {
        display:block!important;
        width:100%!important;
        max-height:inherit!important;
        overflow:visible!important;
      }
   }
</style>
</head>
<body>
        <table role="presentation"width="100%"border="0"cellspacing="0"cellpadding="0">
<tr>
<td><img src="images/desktop-image.png"alt=""width="548"height="217"style="display: block;"class="hide">
<!--[if!mso]><!-->
<div class="show"style="display: none; max-height: 0px; overflow: hidden;">
<img src="images/mobile-image.png"alt=""width="100%"style="display: block;"></div>
 
<!--<![endif]--></td>
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


HTML5 Semantic یا HTML معنا-محور چیست؟
 
لمه ی semantics به معنای study of meaning یا «مطالعه ی معانی» است که از شاخه ی زبانشناسی وارد حوزه های دیگر شده است. با اینکه نسخه های قبل از HTML5 نیز عناصر معنایی داشتند (مانند تگ body یا html) اما تنها با معرفی نسخه ی 5 زبان HTML بود که مفهوم semantics در HTML در مرکز توجه قرار گرفت.
همانطور که می دانید تگ های HTML معنای خاصی دارند؛ مثلا تگ های <h1>, <h2>, <h3>, <h4>, <h5>, <h6> هر کدام بیانگر میزان اهمیت یک تیتر و نمایش دهنده ی ساختار HTML اند. لیست های ترتیبی و غیرترتیبی (<ol>, <ul>) نیز از همین دسته اند. با اینکه کاربر ممکن است به خاطر وجود CSS هر دو را به یک شکل ببیند اما موتورهای جست و جو هنوز هم این تگ ها را به همراه معنی شان می خوانند.
HTML5  تگ های معنایی جدیدی را معرفی کرد (مانند <figure>, <header>, <footer> <strong>, <em>, <mark>و…). همچنین از تگ های معرفی شده 4 تگ sectioning (به معنی قسمت ساز) معرفی شدند:<article>, <aside>, <nav> و <section> که تحول خاصی را در نحوه ی دسته بندی قسمت های سایت به وجود آوردند. پیش از این ها تمامی قسمت های سایت با عناصر div دسته بندی می شدند.
طرح کلی HTML5 معنا-محور
اهمیت HTML معنا-محور (HTML5 Semantic) در سئورتبه بندی موتورهای جست و جو به فاکتورهای متعددی بستگی دارد و الگوریتم گوگل نیز اخیرا توجه خود را روی «کیفیت محتوا» معطوف کرده است. بنابراین اگر بخواهیم در رتبه بندی گوگل موفق باشیم باید کدهای تمیز و خوانایی بنویسیم که ربات های گوگل توانایی خواندنشان را داشته باشند. اینجاست که نقش HTML معنا-محور را بهتر درک می کنیم.
در حالت عادی ربات های موتورهای جست و جو گر ساختار صفحه ی HTML شما را درک نمی کنند. فرض کنید این ربات ها انسان های نابینایی هستند که نه تصاویر را می بینند و نه استایل های وب سایت شما را، اما می توانند متون را بخوانند (اهمیت کلید واژه ها). این ربات ها درک نمی کنند که قسمت های مختلف سایت شما به هم ارتباط دارند یا خیر اما شما می توانید به دو روش به این ساختار در هم ریخته معنی بدهید:
استفاده از HTML معنا-محور
استفاده از rich snippet ها داده های ساختار یافته
مسئله ی rich snippet ها بحث جداگانه ای دارد که در این مقاله به آن نمی پردازیم اما باید بدانید که عامل مهمی در رتبه بندی سایت شما به حساب می آیند. برای اطلاعات بیشتر راجع به rich snippet ها می توانید به این صفحه از راهنمای وب مستران گوگل مراجعه کنید (برای بازدید از صفحه نیاز به ابزار دور زدن تحریم خواهید داشت).
بهترین عناصر معنا-محورعناصر معنا-محور HTML5 در نگاه اول ساده به نظر می رسند اما باید مراقب برخی از اشتباهات رایج در هنگام استفاده از آن ها باشید. نکته ی اول این است که تمامی تگ های معنا-محور فقط برای یک هدف طراحی نشده اند، بلکه سه نوع مختلف از تگ های معنا-محور وجود دارند:
عناصر قسمت ساز در سطح block (در انگلیسی: block-level sectioning elements)
عناصر غیر قسمت ساز در سطح block (در انگلیسی: block-level non-sectioning elements)
عناصر در سطح inline (در انگلیسی: inline-level elements)
عناصر قسمت ساز (sectioning) ساختار سند HTML شما را مشخص می کنند و این ساختار توسط ربات های موتورهای جست و جو خوانده می شود! همانطور که گفته شد این دسته از عناصر چهار عدد هستند:
<article> (به معنی «مقاله»): برای قسمت های کاملا مستقل و غیر وابسته مانند مقالات وب سایت شما.
<section> (به معنی «قسمت»): برای متصل کردن قسمت هایی از محتوا که به هم مربوط هستند، مانند محتوای سربرگ دار (tabbed content)
<aside> (به معنی «کنار» یا «گوشه»): برای sidebar ها مانند قسمت تبلیغات وب سایت یا مقالات پربازدید یا محبوب ترین بازی های هفته و … .
<nav> (مخفف navigation – به معنی «جهت یابی»): برای قسمت های جهت یابی مانند منوی سایت شما.
این باور اشتباه وجود دارد که <main> یک تگ قسمت ساز است اما این طور نیست (البته یک تگ معنا-محور است). توجه داشته باشید که تگ <main> فقط و فقط یک بار در هر صفحه استفاده می شود.
جداسازی محتوا در تگ های sectioningنکته ی جالب در مورد تگ های قسمت ساز این است که می توانند به صورت مستقل از سند اصلی، heading ها (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) و header ها (<header>) و Footer های (<footer>) خودشان را داشته باشند. این تگ های غیر قسمت ساز تنها متعلق به تگ های قسمت ساز هستند و ساختار کلی صفحه را تغییر نمی دهند. شاید در وهله اول برایتان عجیب باشد اما کد HTML زیر یک کد صحیح و معتبر است:
 



1
2
3
4
5
6
7
8
9
10
11

<html>
   <head>...</head>
   <body>
        <h1>Title of the Entire Page</h1>
        <h2>Subtitle of the Entire Page</h2>
        <article>
              <h1>Title of the Article Section</h1>
              <h2>Subtitle of the Article Section</h2>
        </article>
   </body>
</html>



header ها و footer ها نیز به همین شکل عمل می کنند؛ مثلا تگ <article> می تواند یک <header> و <footer> جداگانه داشته باشد که از نظر معنایی فقط متعلق به همان <article> است اما در ساختار کلی صفحه هیچ تغییری ایجاد نمی کند:
 



1
2
3
4
5
6
7
8
9
10
11
12
13

<html>
   <head>...</head>
   <body>
        <header>Header of the Entire Page</header>
        <article>
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


بهترین ابزارهای XML Sitemap
XML Sitemap (نقشه سایت XML) 
آقای Kevin Indig یکی از محققان حوزه ی سئو در یکی از نوشته ها/خاطرات خود می گوید:
به تازگی شروع به کار در Atlassian کرده بودم و دنبال راهی برای شناخته شدن در این کمپانی بودم بنابراین شروع به بررسی سایت کردم و متوجه شدم که سایت XML sitemap ندارد. با خودم گفتم عجب بُرد راحتی! ابتدا از توسعه دهندگان خواستم که ابزار Sitemap را در CMS فعال کنند اما با تعجب به من گفتند که متاسفانه امکان چنین کاری وجود ندارد. من هم سعی کردم از درب دیگری وارد شوم و سرویس Screaming Frog به خاطرم آمد. بنابراین با استفاده از این سرویس، یک Sitemap درست کردم و آن را روی سایت بارگذاری کردم. ربات های گوگل آن را خواندند و در عرض چند روز ترافیک ما به شکل قابل توجهی افزایش پیدا کرد. به نظر من نتیجه ی اخلاقی این داستان این است که XML sitemap (نقشه سایت XML) مورد بسیار مهمی در سئوی سایت شماست و نباید آن را فراموش کرد. منبع:semrush
همینطور که از گفته های آقای Kevin Indig مشخص است در بعضی اوقات XML Sitemap ها می توانند تا حد زیادی به سایت شما کمک کنند اما باید اول بدانیم که Sitemap ها چه هستند. XML sitemap ها نقشه ای دیجیتال از سایت شما هستند که به گوگل کمک می کنند تا بفهمد کدام صفحات از همه مهم تر بوده و هر صفحه هر چند روز به روز رسانی می شود.
گوگل در صفحه ی help center خود می گوید:
A sitemap tells the crawler which files you think are important in your site, and also provides valuable information about these files: for example, for pages, when the page was last updated, how often the page is changed, and any alternate language versions of a page.
خلاصه ی گفته ی گوگل همان چیزی است که بالاتر به شما گفتیم؛ چه صفحاتی مهم تر از همه هستند، آخرین باری که به روز رسانی شدند چه زمانی بوده است، نسخه های مختلف ترجمه شده از صفحه و دیگر اطلاعات ممکن.
هر سایتی باید Sitemap داشته باشد اما بعضی از سایت ها به طور خاص و بیشتر به آن نیاز دارند:
وب سایت های بسیار بزرگ
وب سایت های تازه تاسیس شده
وب سایت هایی که صفحات 1orphaned زیادی دارند
وب سایت هایی که از تصاویر و ویدیوهای زیادی استفاده می کنند.
1- صفحات orphaned صفحاتی هستند که هیچ لینکی به آن ها اشاره نمی کند بنابراین در حالت عادی کمتر کسی به این صفحات می رسد مگر اینکه URL را به صورت دستی وارد کند.
در واقع فایل معروف robots.txt به شما کمک می کند که قسمت هایی از سایت را از دسترس موتورهای جست و جو خارج کنید اما Sitemap ها دقیقا برعکس این کار را انجام می دهند؛ آن ها به موتورهای جست و جو کمک می کنند تا صفحات جدید را شناسایی کنند. گوگل از سال 2005 شروع به استفاده از XML sitemap ها کرد. البته نکته ی مهمی وجود دارد: HTML sitemap با XML Sitemap یکی نیست! XML sitemap ها برای کاربران قابل مشاهده نیستند بلکه فقط برای Google قابل مشاهده است در حالی که HTML sitemap ها لیستی از لینک های داخلی هستند که تمامی صفحات را در یک جا جمع کرده اند. توصیه می شود که هر دو را داشته باشید:
 
یک نمونه HTML Sitemapیک نمونه XML Sitemap
 
این فرمت XML به گوگل اجازه می دهد که سریعا اطلاعات را parse کرده و URL های جدید را پیدا کند.
ثبت sitemap و استانداردهای آناگر می خواهید بدانید سایت شما sitemap دارد یا نه می توانید از ابزاری مانند Google Search Console یا Bing Webmaster Tools استفاده کنید؛ در قسمتی به نام sitemaps نگاه کنید و لیست موجود را بررسی کنید. اکثر موتورهای جست و جو در فایل robots.txt به دنبال کد <Sitemap: <sitemap_location می گردند بنابراین بهتر است sitemap را در آن قسمت مشخص کنید. راه دیگر این است که فایل sitemap را مستقیما وارد گوگل یا دیگر موتور های جست و جو کنید:
نحوه ی ارسال مستقیم sitemap به Google
نحوه ی ارسال مستقیم sitemap به  Baidu
نحوه ی ارسال مستقیم sitemap به Bing
نحوه ی ارسال مستقیم sitemap به Yandex
 
ثبت sitemap برای Googleثبت sitemap برای bing
 
استانداردهای یک sitemap خوب به این شرح هستند:
فقط شامل لینک های canonical با status code 200 باشد.
حداکثر 200 هزار URL برای هر sitemap و 50 هزار sitemap برای هر index sitemap داشته باشد.
در فایل robots.txt مشخص شده باشد.
دارای encoding از نوع UTF-8 باشد.
در فرمت gz. فشرده شده باشد.
بزرگتر از 50mb (مگابایت) نبوده و بیشتر از 50 هزار URL نداشته باشد.
این موارد از استانداردهای حداقلی هستند اما کارهای بیشتری نیز می توان انجام داد. مثلا می توان تنها صفحات مهم را در sitemap قرار داد تا گوگل فقط آن ها را مد نظر بگیرد؛ فرض کنید گوگل یک توریست است و XML sitemap نقشه ای برای توریست ها است. در این نقشه نباید آدرس هر خانه ای را اضافه کرد بلکه فقط قسمت های مهم شهر مانند ساختمان های معروف و پارک های دیدنی را ذکر می کنند. بنابراین صفحاتی مانند «درباره ی ما» یا «شرایط و قوانین» را در این فایل قرار ندهید چرا که از صفحات مهم (برای موتور جست و جو) به حساب نمی آیند.
همچنین اکثر CMS ها می توانند sitemap را به طور مرتب ویرایش کنند و با اضافه شدن هر URL جدید آن را به صفحه اضافه کنند. هر بار که فایل sitemap شما ویرایش می شود گوگل متوجه شده و آن را بازبینی می کند.
وب سایت های بزرگاگر وب سایت شما بزرگ است (مانند وب سایت های خبری) بهتر است یک index sitemap داشته باشید که 50 هزار sitemap عادی را در خود جای می دهد، البته نباید از 50 مگابایت حجم بیشتری داشته باشند. دلیل این کار این است که نمی توانید با چنین سایت بزرگی تمام sitemap های خود را در یک فایل بگنجانید.
 
نمونه ای از تقسیم sitemap ها برای وب سایت های بزرگ
 
حتی می توانید برای تصاویر و ویدیوهای سایت خود نیز Sitemap داشته باشید و یا اینکه آن ها را در همان sitemap اصلی اضافه کنید. مثال:
 



1
2
3
4
5
6
7
8
9
10
11
12
13

<?xml version="1.0"encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>http://example.com/sample.html</loc>
    <image:image>
      <image:loc>http://example.com/image.jpg</image:loc>
    </image:image>
    <image:image>
      <image:loc>http://example.com/photo.jpg</image:loc>
    </image:image>
  </url>
</urlset>



برای ویدیوها هم همینطور:
 



1
2
3
4

<url>
  <loc>https://example.com/mypage</loc>
  <video>...information about video1...</video>
</url>



مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


۷ نکته برای بهینه سازی کدهای CSS شما
در دنیای وب امروزی page load time یا زمان بارگذاری وب سایت یکی از مهم ترین عوامل موفقیت وب سایت ها است. این تفاوت ها، حتی در سطح میلی ثانیه، می توانند تاثیر مستقیم و زیادی بر کسب و کار شما و ترافیک ورودی سایتتان داشته باشد. مبحث بهینه سازی سرعت بارگذاری سایت ها مبحث بسیار طولانی و پیچیده ای است و نمی توان در یک مقاله تمام جنبه های آن را مورد بحث و بررسی قرار داد اما می توانیم یکی از فاکتورهای مهم در بهینه سازی سایت ها را در همین مقاله بررسی کنیم؛ بهینه سازی کدهای CSS !
نکات و پیشنهادات ارائه شده برای بهینه سازی کدهای CSS در این مقاله می تواند به بهبود سرعت سایت شما کمک خوبی کند بنابراین سعی کنید تا حد ممکن آن ها را رعایت کنید.
1. تنگناهای سیستم را پیدا کنیدقدم اول در هر نوع بهینه سازی، بررسی کامل سیستم است. خوشبختانه ابزارهای مختلفی برای بررسی و آنالیز کدهای front-end وب سایت شما وجود دارد که به شما کمک می کنند تنگناهای اجرایی سیستم را پیدا کنید. ساده ترین روش برای بررسی سیستم این است که با فشردن کلید f12 وارد DevTools مرورگر خود شوید. از صفحه ی DevTools به سربرگ Network بروید و در آنجا سایز و زمان بارگذاری هر کدام از فایل های CSS را مشاهده خواهید کرد. همچنین می توانید سرعت بارگذاری CSS خود را با cache و بدون cache مقایسه کنید. از آنجایی که DevTools و سربرگ Network منابع خارجی CSS مانند فونت های گوگل یا CDN ها را نیز نشان می دهند ممکن است چیزهایی را پیدا کنید که اصلا از آن ها خبر نداشته اید!
مثالی از DevTools مرورگر محبوب firefox (مرورگر chrome نیز مشابه firefox است)
جدا از بخش DevTools می توانید از ابزارهایی مانند Pingdom Tools و Lighthouse (ساخته گوگل) استفاده کنید. به طور مثال Pingdom Tools با اسکن ساده ی وب سایت شما چندین نکته و پیشنهاد برای بهینه سازی سایت و فایل های CSS به شما ارائه خواهد داد.
وب سایت pingdom tools
2. Minify کردن فایل های CSSاکثر وب سایت ها چندین فایل CSS دارند و با اینکه نوشتن کدهای CSS به صورت ماژولار نظم خاصی به پروژه می دهد اما بارگیری آن ها زمان خواهد برد. برای مقابله با این مشکل راه حل های مختلفی وجود دارد (مثلا می توانید فایل های CSS را در یک یا دو فایل ادغام کنید) اما از هر روشی که استفاده کنید minify کردن این فایل ها به شما کمک بزرگی خواهد کرد.
برای این کار ابزارهای مختلفی مانند CSS Minify وجود دارند که فایل های CSS شما را minify می کنند. minify کردن فایل های CSS یعنی انجام عملیات های مختلفی مانند:
حذف تمام کامنت ها از فایل
حذف تمام اسپیس ها و فضا های خالی
حذف تمام new line ها (اینتر زدن و رفتن به خط جدید)
محصول نهایی minification یک فایل CSS یک خطی و فشرده خواهد بود که سرعت بارگیری بسیار بیشتری دارد!
ابزارهایی مانند CSS Minify برای پروژه های کوچک خوب کار می کنند اما اگر پروژه ی شما بسیار بزرگ باشد این فرآیند خسته کننده خواهد بود. بنابراین بهتر است به سراغ خدمات اتوماسیون فشرده سازی بروید. جدا از افزونه هایی که می توانید برای ادیتور خود نصب کرده و با آن ها کدها را فشرده کنید سرویس های بزرگ تری مانند Webpack وجود دارند که تمام فایل های شما را در یک bundle فشرده شده برمیگردانند. مجموعه ی PostCSS نیز پلاگین های ساده تری مانند CSS Nano را دارد که نه تنها فایل هایتان را فشرده می کنند بلکه انواع بهینه سازی کدهای CSS را نیز روی فایل های شما انجام می دهند.
نمایی از وب سایت CSS Nano
3. استفاده از Flexbox و Gridاگر شما از معدود افرادی هستید که هنوز هم از روش های بسیار قدیمی مانند float دادن به عناصر استفاده می کند باید به شما بگوییم که این روش ها تقریبا منسوخ شده اند! این نوع روش ها زمانی مطرح بودند که هیچ روش دیگری برای موقعیت دهی صحیح به عناصر صفحه وجود نداشت اما در حال حاضر ماژول های امروزی تری مانند flexbox و CSS Grid وجود دارند که قابلیت های بسیار بیشتری به شما می دهند.
در روش های قدیمی برای موقعیت دهی به عناصر (مثلا مرکزیت در محور عمودی) باید از ترفند های مختلفی استفاده می کردیم اما در ماژول هایی مانند flexbox چنین مشکلاتی وجود ندارد و طراحی بسیار راحت تر شده است. با اینکه یادگیری آن ها ممکن است در وهله ی اول کمی زمان بر باشد اما به شما اطمینان می دهم که ارزش وقت و زحمت اش را دارد. با استفاده از این ماژول ها مخصوصا flexbox فایل های CSS شما قوانین کمتری لازم دارند بنابراین حجم فایل های CSS کاهش می یابد.
نگران پشتیبانی از flexbox هم نباشید چرا که در حال حاضر 98 درصد از مرورگرهای دنیا از آن پشتیبانی می کنند:
وضعیت پشتیبانی از ماژول flexbox
در واقع مرورگرهای کروم و فایرفاکس از حدود سال های 2010 (با پیشوند مخصوص خودشان) و از سال 2014 (بدون پیشوند) از ماژول Flexbox پشتیبانی می کنند. آیا فکر می کنید هنوز کاربری وجود دارد که از 9 سال پیش مرورگر خود را به روز رسانی نکرده باشد؟!! بنابراین جای نگرانی نیست.
البته باید گفت که پشتیبانی از CSS Grid به اندازه ی Flexbox نیست (مثلا کروم و فایرفاکس از سال 2017 پشتیبانی از آن را شروع کردند) اما تا چند سال دیگر آن هم به پشتیبانی کامل توسط مرورگر ها خواهد رسید. گرچه در حال حاضر پشتیبانی از آن 93 درصد مرورگر های جهان است!
وضعیت پشتیبانی از CSS Grid
4. استفاده از <link> به جای import@دو راه برای بارگذاری فایل های CSS در صفحات وجود دارد:
استفاده از تگ <link> در قسمت <head> فایل HTML (بارگذاری مستقیم)
استفاده از import@ برای بارگذاری آن ها از طریق فایل های CSS دیگر (بارگذاری غیر مستقیم)
دستور import@ معمولا برای بارگذاری منابع کوچک تر مانند فونت ها استفاده می شود و شاید در نگاه اول با ماژولار کردن کد های ما پروژه را منظم تر کند اما حقیقت این است که زمان بارگذاری کدها با دستور import@ بسیار طولانی تر از بارگذاری آن ها با تگ link است و یک درخواست. بنابراین سعی کنید تا حد ممکن از این دستور دوری کنید.
همچنین هنگام کار با تگ link حواستان به اولویت دستورات CSS (مبحث CSS specificity) باشد؛ همیشه استایل های کلی را بالاتر و استایل های جزئی تر را پایین تر قرار دهید. مثال:
 



1
2
3

<link rel="stylesheet"href="main.css">
<link rel="stylesheet"href="page.css">
<link rel="stylesheet"href="component.css">



5. استفاده از Gradient و SVG به جای تصاویربارگیری و نمایش تصاویر در مرورگر می تواند زمان زیادی از سایت شما بگیرد به همین خاطر توسعه دهندگان سعی می کنند تا با ترفندهای مختلف و روش های فشرده سازی (مثلا استفاده از سایت های فشرده سازی مانند TinyJPG) حجم تصاویر را کاهش دهند. این روش ها تا حد بسیار زیادی به ما کمک می کنند اما هنوز هم می توانیم بهتر از این مسائل کار کنیم.
به طور مثال می توانید از gradient های CSS یا از SVG ها استفاده کنید. به طور مثال کد زیر یک gradient زیبا تولید می کند که از هر تصویری سریع تر بارگذاری می شود. برای مشاهده ی gradient های بیشتر می توانید به وب سایت هایی مانند CSSmatic و ColorZilla مراجعه کنید.
وب سایت CSSmatic
از طرف دیگر استفاده از SVG ها نیز مزایای خود را دارد:
SVG ها کد هستند بنابراین توسط CSS قابل ویرایش هستند.
SVG ها بسیار کم حجم اند.
SVG ها می توانند بدون ذره ای افت کیفیت بی نهایت کوچک یا بزرگ شوند.
و…
6. عدم استفاده از important!دستور important! در برخی از مواقع بسیار مفید واقع می شود و می تواند در موقعیت های مختلف ما را نجات دهد اما باید به عنوان گزینه ی آخر در نظر گرفته شود. زمانی که از دستور important! استفاده می کنید یک استثناء در قوانین CSS ایجاد می کنید و قانون CSS ای که important! را داشته باشد تمام قوانین دیگر را override می کند. مثال:
 



1
2
3
4
5

h1{
 
   margin-bottom:20px!important;
 
}



اگر تعداد دستورات important! در کد زیاد باشد، مرورگر مجبور می شود کد ها را چند بار چک کند که به نوبه ی خود سرعت برنامه ی شما را پایین میاورد.
7. انجام CSS refactoringCSS refactoring کار ساده ای نیست اما می تواند به شدت سرعت وب سایت شما را افزایش دهد. مثلا هنگامی که فایل های CSS شما بسیار بزرگ باشد سرعت بارگذاری سایت شما به اندازه ی قابل توجهی کاهش می یابد. هدف CSS refactoring نیز بهینه سازی کد و مدیریت بهتر آن است. در فرآیند CSS refactoring باید تمام جوانب سنجیده شود که مهم ترین آن ها عبارت اند از:
آیا قوانین CSS تکراری یا استفاده نشده دارید؟
آیا می توانید برای فلان طرح از روش های امروزی تر مانند flexbox استفاده کنید؟
آیا specificity طرح شما بیش از حد معمول است؟ ( می توانید آن را با visual specificity calculator چک کنید)
آیا ساختار CSS شما منطقی است؟ (مثلا استفاده از چند فایل CSS به جای یک فایل برای پروژه های بزرگ راحت تر است)
آیا پروژه ی شما نیاز به یک build tool خودکار دارد یا خیر؟
و ده ها سوال دیگر…
همچنین سعی کنید از ابزارهای version control (مانند Git) استفاده کنید تا اگر به مشکلی برخورد کردید بتوانید به نسخه های قبلی برنامه برگردید.
امیدوارم از مقاله بهینه سازی کدهای CSS لذت برده باشید.
منبع: روکسو

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


برترین فریم ورک های پایتون برای توسعه وب
فریم ورک های پایتون برای توسعه وب : یکی از زبان‌های برنامه نویسی که در سال‌های اخیر بسیار مورد توجه برنامه نویسان قرار گرفته، زبان قدرتمند پایتون (Python) است. کاربردهای این زبان بسیار زیاد است و به علت داشتن فریم ورک های مختلف قادر است کار برنامه نویسان را سرعت ببخشد. در این مطلب ابتدا به سراغ مفهوم فریم ورک و سپس بررسی فریم ورک های پایتون می‌رویم تا با آن‌ها بیشتر آشنا شویم.
 
 
فریم ورک چیست ؟
 
فریم ورک یا چارچوب به معنی مجموعه قواعد، استانداردها و کتابخانه های آماده ای است که به برنامه نویسان در توسعه کد کمک زیادی می‌کنند. برای زبان‌های برنامه نویسی مختلف، فریم ورک های زیادی نوشته شده و شما باید با توجه به حوزه ای که در آن برنامه نویسی می‌کنید از فریم ورک های وب، فریم ورک های توسعه اپلیکیشن و غیره استفاده کنید. علاوه بر کاهش حجم کد، قابلیت به روزرسانی سریع و تامین امنیت نرم افزار نیز از دیگر قابلیت های فریم ورک ها است. فریم ورک ها می‌توانند بخشی از ویژگی های مشترک اپلیکیشن ها را در اختیار شما قرار دهند.
 
 
معرفی فریم ورک های پایتون برای توسعه وب
 
پایتون در زمینه های مختلفی از جمله سیستم های مدیریت وب و تحلیل داده ها کاربرد زیادی دارد و فریم ورک های آن امکانات زیادی در اختیار شما قرار می‌دهند. برای توسعه نرم افزار تحت وب می‌توانید برنامه نویسی را به صورت Pure انجام دهید. برنامه نویسی Pure یعنی از فریم ورک ها استفاده نکرده و تمامی کلاس ها، توابع و متغیرهای لازم را بسازید. راه دیگر استفاده از فریم ورک ها است که با داشتن ماژول ها و توابع آماده، باعث صرفه جویی در زمان و هزینه ها می‌شوند. فریم ورک های پایتون حجم کدنویسی شما را کمتر کرده و قابلیت هایی برای توسعه اپلیکیشن دارند که کار برنامه نویسان را راحت تر می‌کنند.
فرم ورک های پایتون به 2 دسته همه جانبه (Full Stack) و یک جانبه Non-Full Stack تقسیم می‌شوند. فریم ورک های فول استک توسعه دهندگان را هم در طراحی وب Front-End و هم در توسعه وب Back-End پشتیبانی می‌کنند. فریم ورک های Non-Full Stack فقط در توسعه یک سمت از نرم افزار به کار می‌‌روند. در این قسمت تعدادی از فریم ورک های Full Stack پایتون را بررسی می‌کنیم. اگر تفاوت بین Front-End و Back-End را نمی دانید، حتما مطلب زیر را مطالعه کنید.
 
more  بیشتر بدانید : Backend چیست و برنامه نویس بک اند کیست؟
 
 
 
فریم ورک جنگو (Django)
 
فریم ورک جنگو به علت داشتن سرعت بالا و قابلیت های زیاد در توسعه وب بین برنامه نویسان محبوبیت زیادی دارد و یکی از بهترین فریم ورک های پایتون است. رایگان، منبع باز بودن (Open Source) و همچنین داشتن کتابخانه های فراوان به زبان پایتون، کمک زیادی به برنامه نویسان در توسعه اپلیکیشن می‌کند. Django از پایگاه داده های زیادی پشتیبانی کرده و می‌تواند داده ها را بین آن‌ها منتقل کند. از این فریم ورک پایتون در پروژه های زیادی از جمله Instagram، Pinterest و Mozilla استفاده شده است.
فریم ورک جنگو از معمماری مدل-ویو-کنترلر (MVC) استفاده می‌کند که باعث کدنویسی کمتر و تمیزتر می‌شود. همچنین جنگو برای طراحی رابط کاربری نیز امکاناتی را ارائه داده و از AJAX و RSS پشتیبانی می‌کند. یکی از دلایل مهم برای استفاده از جنگو این است که می‌تواند در محیط‌های مختلف منعطف بوده و هزینه به روز رسانی و افزودن ویژگی‌های جدید را به سیستم، کاهش دهد.
 
 
فریم ورک وب تو پای (Web2Py)
 
این فریم ورک نیز منبع باز و مبتنی بر پایگاه داده است و ابزاری برای ویرایش، تست و ردیابی خطاها دارد. قابلیت بهره مندی از چندین پروتکل به طور هم‌زمان، امنیت بالای داده‌ها، داشتن ادیتور (Editor) و پشتیبانی از MVC توسعه دهندگان را ترغیب به استفاده از این فریم ورک می‌کند. این فریم ورک بسیاری از فرم های پایه را در اختیار توسعه دهندگان قرار داده و برای ساخت اپلیکیشن های مبتنی بر وب طراحی شده است.
 
 
فریم ورک توربو گیرز (TurboGears)
 
توربوگیرز فریم ورک قدرتمندی است که برای کار با آن نیاز به تسلط بیشتری بر زبان پایتون دارید اما قابلیت‌هایی که برای توسعه اپلیکیشن در اختیار شما قرار می‌دهد ارزش این تلاش بیشتر را دارد. پشتیبانی از الگوی MVC، داشتن کتابخانه های پایتون و پشتیبانی از پایگاه داده های مختلف در این فریم ورک، می‌تواند نیازهای برنامه نویسان را در توسعه وب رفع کند. توسعه این فریم ورک باعث شده برای استفاده در محیط‌های Non-Full Stack نیز کاربرد داشته و مانند یک میکروفریم ورک عمل کند.
 
 
فریم ورک تورنادو (Tornado)
 
تورنادو فریم ورکی است که به علت کارایی بالا شهرت زیادی دارد و به طور هم‌زمان قابلیت کنترل 10000 اتصال (Connection) را در شبکه دارد. پشتیبانی از سیستم احراز هویت کاربران از دیگر مزایای این فریم ورک است و برای توسعه اپلیکیشن‌هایی که به عملکرد قوی و توانایی در مدیریت تعدادی زیادی کاربر نیاز دارند، کاربردی به نظر می‌رسد. این فریم ورک در سیستم عامل Unix و Linux پشتیبانی بهتری دارد.
همان طور که ابتدای بحث اشاره کردیم بعضی از فریم ورک های پایتون Non-Full Stack هستند یعنی تنها برای برنامه نویسی یک سمت از توسعه اپلیکیشن استفاده می‌شوند در ادامه مطلب قصد داریم تعدادی از این فریم ورک ها را معرفی می‌کنیم.
 
 
فریم ورک فلسک (Flask)
 
فلسک میکرو فریم ورکی برای توسعه وب و بسیار نزدیک به زبان جاوا است که ساختاری ساده اما قابل توسعه دارد و برنامه نویسان زیادی از آن استفاده می‌کنند. فلسک کتابخانه و ابزار فراوانی ندارد و به همین دلیل به آن میکروفریم ورک می‌گویند، اما مجموعه ای از کتابخانه ها و ماژول هایی دارد که کار کردن با پروتکل ها و برخی جزئیات دیگر را در پیاده سازی نرم افزار راحت می‌کنند. توانایی پشتیبانی از کوکی ها و همچنین داشتن یک ابزار اشکال زدایی (Debugger) سریع می‌تواند استفاده از آن را لذت بخش کند. اگر با پروژه‌های کوچک سروکار دارید، فلسک یکی از برترین فریم ورک های پایتون در این زمینه خواهد بود که به خوبی می‌تواند نیازهای برنامه نویسی شما را برطرف کند.
 
 
فریم ورک پایرامید (Pyramid)
 
پروژه را کوچک شروع کنید و بزرگ تمام کنید. این پیام فریم ورک پایرامید برای برنامه نویسانی است که قصد توسعه اپلیکیشنی را دارند و شاید از حجم کار خود باخبر نباشند. اگر از یک پروژه کوچک شروع کنید در قدم های بعدی متوجه می‌شوید فریم ورک پایرامید قابلیت هایی را در اختیارتان قرار می‌دهد که به طور قانع کننده ای پروژه توسعه یافته شما را پشتیبانی می‌کند. این فریم ورک ساده و مینیمالیستی مستندات قوی و کاربردی زیادی نیز برای توسعه دهندگان دارد و در نسخه های 3 و 4 پایتون پشتیبانی می‌شود.
 
 
فریم ورک چِری پای (CherryPy)
 
اگر علاقمند به برنامه نویسی شی گرا هستید پس بهتر است از این فریم ورک پایتون استفاده کنید. این فریم ورک در هر سیستم عاملی که از پایتون پشتیبانی کند مانند ویندوز، لینوکس و مک قابل استفاده است و از پروتکل های HTTP استفاده می‌کند. داشتن ابزارهایی برای احراز هویت کاربران، سیستم ذخیره داده ها (Caching)، پلاگین‌ها و پیکربندی منعطف از دیگر قابلیت‌های این فریم ورک است. همچنین در فریم ورک TurboGears از چری پای به عنوان یکی از کامپوننت های اصلی استفاده شده است.
 
 
فریم ورک باتل (Bottle)
 
یکی دیگر از میکروفریم ورک های محبوبی که برای توسعه اپلیکیشن های کوچک به کار می‌رود، فریم ورک باتل است که فقط به کتابخانه های پایتون وابستگی داشته و نیازی به کتابخانه های اضافه ندارد. این فریم ورک از امکانات پایگاه داده های مختلف پشتیبانی کرده و به کاربران اجازه دسترسی به داده ها و فایل ها بارگذاری شده را می‌دهد. باتل در پایتون 3 پشتیبانی شده و امکان توسعه API های تحت وب را در اختیار شما قرار می‌دهد.
 
 
مقایسه فریم ورک های پایتون
 
معرفی بهترین فریم ورک پایتون کار سختی است زیرا توسعه دهندگان با توجه به مهارت‌هایی که دارند و همچنین نیاز سیستم نرم افزاری، فریم ورک مناسب را انتخاب می‌کنند. این مسئله باعث می‌شود هرکدام از فریم ورک ها به نحوی کاربردی باشند و مقایسه آن‌ها کار سختی باشد. اما شاید بتوان میزان محبوبیت آن‌ها را در بین کاربران بررسی کرد.
طبق بررسی های انجام شده در چند ماه گذشته، کاربران به آشنایی با Django، Web2Py و TurboGears بیش از سایر فریم ورک ها تمایل داشته و توانسته اند در مدت زمان ثابتی بخش زیادی از طرفداران خود را حفظ کنند. قدرتمند بودن در پشتیبانی از سطوح مختلف توسعه نرم افزار و سایر ویژگی‌های این فریم ورک‌ها باعث شده توسعه دهندگان پایتون از آن‌ها استفاده کنند.
طبق آنچه که در این مطلب بررسی کردیم شاید بتوان فریم ورک های پایتون را بر اساس ویژگی های زیر تقسیم بندی کرد :
پشتیبانی از الگوی MVC :
Django
Web2Py
TurboGears
پشتیبانی از پایگاه داده های مختلف :
Bottle
TurboGears
Django
داشتن کتابخانه های مختلف :
TurboGears
Django
Flask
 
more  بیشتر بدانید : زبان برنامه نویسی پایتون چیست و چه ویژگی هایی دارد
 
 
 
جمع بندی
 
پایتون زبان برکاربردی است که در آینده نیز شاهد رشد بیشتر آن در توسعه وب، داده کاوی و غیره خواهیم بود. این زبان فریم ورک‌های زیادی دارد که هرکدام قابلیت‌های متفاوتی دارند اما بهتر است با توجه به نیازی که دارید یکی را انتخاب کرده و یادگیری آن را شروع کنید. سِون لِرن معتقد است برنامه نویسان خوشحال برنامه نویسانی هستند که به دنبال چالش و پاسخی برای آن ها می باشند، پس اگر در مسیر یادگیری با مشکلی مواجه شدید، در کنار شما خواهیم بود.
منبع :7 لرن

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


تفاوت بین HTTP و HTTPS چیست؟
ین روزها از همه می شنویم که باید به این دلیل و آن دلیل از HTTPS استفاده کنیم اما معمولا توضیحی درباره ی ماهیت HTTP و HTTPS داده نمی شود. در این مقاله سعی کرده ایم به سوال های «HTTP چیست؟» و «HTTPS چیست؟» و «چرا باید به HTTPS برویم؟» پاسخ بدهیم.
HTTP چیست؟HTTP مخفف Hypertext Transfer Protocol است. زمانی که در مرورگر خود //:HTTP را می بینید یعنی از طریق پروتکل HTTP به وب سایت مورد نظرتان متصل شده اید. HTTP برای ارسال و دریافت داده ها در فضای اینترنت از پروتکل TCP (مخفف Transmission Control Protocol) و معمولا از پرت 80 استفاده می کند. به زبان ساده، HTTP پروتکلی است که بین شما و سرور برقرار بوده و به شما اجازه ی تعامل با وب سایت ها را می دهد؛ بدین صورت که (بعد از TCP handshake) کاربر، درخواستی را به سرور ارسال کرده و سرور نیز پاسخی را به سمت کاربر می فرستد. در پاسخ ارسالی اطلاعات مختلفی مانند «وضعیت تکمیل» وجود دارد (رشته ی HTTP/1.1 200 OK).
مثالی از یک صفحه ی http
پروتکل TCP تغییرات زیادی نداشته و همانی است که در سال 1974 در RFC 675 معرفی شد. HTTP هم از UDP استفاده می کند که توسط آقای David Reed در سال 1980 در RFC 768 معرفی شد. UDP اجازه می دهد که بسته های داده با ترتیب های مختلفی ارسال و دریافت شوند تا عملکرد و سرعت ارتقاء پیدا کند.
کلمه ی hypertext (در HTTP) نیز اولین بار از زبان آقای Ted Nelson و در سال 1965 شنیده شد. در واقع نسخه ی اصلی HTTP توسط آقای Tim Berners-Lee مدیر کنسرسیوم جهانی وب (W3C) معرفی و تعریف شد. همانطور که می دانید کنسرسیوم جهانی وب وظیفه ی توسعه و ارائه ی راهکارهای بهتر برای ارتقاء فضای اینترنت و تجربه ی کاربران را برعهده دارد.
اولین documentation مربوط به HTTP نیز در سال 1991 و برای HTTP/0.9 ارائه شد. این documentation تنها شامل متد GET بود. سپس در سال 1996 نسخه ی HTTP 1.0 ارائه شد که سه نوع متد درخواست داشت: GET و HEAD و POST. در آخر در سال 1997 نسخه ی HTTP/1.1 به عنوان نسخه ی اصلاح شده ی HTTP 1.0 و پس از  در RFC 2068 معرفی شد و پس از 22 سال هنوز هم در حال استفاده است!
در این نسخه تصحیح های مختلفی صورت گرفت؛ به طور مثال در HTTP/0.9 و 1.0 برای هر درخواست باید یک اتصال جداگانه با سرور برقرار می شد اما با نسخه ی اصلاح شده persisted connection را داریم که اجازه می دهد چندین درخواست طی یک اتصال ارسال شوند. مباحث caching و compression (فشرده سازی) و… نیز برای بهبود این نسخه ارائه شدند. همچنین اگر در مرورگر به خطایی برخورد کنیم می توانیم با استفاده از status codes (کد هایی مانند 404 و 502 و …) منشأ مشکل را پیدا کنیم. به طور مثال خطای 404 Not Found بدین معنی است که صفحه ی مورد نظر شما یا حذف شده است یا از این آدرس به مکان دیگری منتقل شده است.
بنابراین به سادگی می توان فهمید که تکنولوژی HTTP بسیار قدیمی است.
HTTPS چیست؟HTTPS مخفف Hypertext Transfer Protocol Secure است. البته نام های دیگری مانند «HTTP همراه با TLS» یا «HTTP همراه SSL» نیز دارد. اگر در نوار آدرس مرورگر خود //:HTTPS را مشاهده کنید یعنی ارتباط شما با وب سایت مقصد از نوع HTTPS می باشد.
 
سوال: آیا می توان پروتکل اتصال را به صورت دستی تغییر داد؟
 
پاسخ: بله، البته در تئوری! شما می توانید برای اتصال به یک وب سایت از طریق HTTP به جای HTTPS این پروتکل را به صورت دستی در نوار آدرس مرورگر تایپ کنید. حالا چرا در تئوری؟ به این دلیل که اگر پروتکل اتصال وب سایتی بر اساس HTTP باشد و شما HTTPS تایپ کنید باز هم HTTP برقرار می شود چرا که آن وب سایت چنین قابلیتی ندارد بنابراین با تایپ کردن شما قابلیت به سرور و دامنه اضافه نمی شود! اما اگر سایتی HTTPS باشد و شما HTTP را تایپ کنید ممکن است موفق شوید و از طریق HTTP به آن متصل شوید. البته اکثر وب سایت ها یک دستور redirect دارند که شما را مجبور به استفاده از HTTPS می کند و در این زمینه هم موفقیت چندانی نخواهید داشت.
HTTPS نیز برای انتقال بسته های داده در فضای اینترنت از TCP استفاده می کند اما این کار را از طریق پورت 443 و با یک اتصال رمزنگاری شده از طریق TLS (مخفف Transport Layer Security) انجام می دهد.
مثالی از یک صفحه ی https
بر اساس گزارش www.ssllabs.com تا ژوئن 2019 (تاریخ نگارش این مقاله) از 139 هزار سایت پرطرفدار دنیا حدود 67.2 درصد آن ها از HTTPS استفاده می کنند که نشان دهنده ی اهمیت این موضوع است.
نمیدانم سن شما قد می دهد که کمپانی Nestcape را بشناسید یا نه. HTTPS در ابتدا توسط این کمپانی و در سال 1994 ساخته شد تا در مرورگر خود به نام Netscape Navigator استفاده شود. در آن زمان HTTPS از پروتکل SSL استفاده می کرد که بعدها به پروتکل TLS تبدیل شد (به همین دلیل است که معمولا گواهی های TLS و SSL را به جای هم استفاده می کنند).
پروتکل HTTPS از یک public key استفاده می کند که در سمت کاربر رمزگشایی می شود. این public key به سرور ارسال می شود و همان چیزی است که به گواهی SSL یا SSL certificate مشهور شده است. این گواهی ها توسط Certificate Authority امضا می شوند و اگر چنین اتفاقی بیفتد وب سایت مذکور از نظر مرورگر به عنوان یک وب سایت «قابل اعتماد» در نظر گرفته می شود و تا حدی به آن اطمینان می کند. حتما شما هم علامت قفل سبز رنگ کنار آدرس صفحات را دیده اید. این علامت که در بروزرسانی های جدید کروم حذف شده است نشان دهنده ی همین موضوع بود:
نمونه ای از اتصال رمزنگاری شده
البته کمپانی هایی مانند Let’s Encrypt فرآیند دریافت SSL را کاملا رایگان کرده اند!
مسئله ی استفاده از HTTPS از چند جهت دارای اهمیت زیادی است؛ طی تحقیقات GlobalSign surve حدود 84 درصد از خریداران در صورت عدم مشاهده ی HTTPS از خرید منصرف شده و وب سایت را رها می کنند. همچنین 28.9 درصد از شرکت کنندگان به دنبال رنگ سبز در نوار آدرس مرورگر بوده اند. از نظر امنیت باید به شما بگوییم که سعی کنید هیچ وقت از وب سایت هایی که اتصال HTTPS ندارند خرید نکنید چرا که اطلاعات شما (مانند شماره تلفن، اطلاعات کارت بانکی و …) در معرض سرقت قرار خواهد گرفت. دلیل آن هم ساده است، در اتصال های HTTP تمام اطلاعات به صورت متن خالی و قابل خواندن منتقل می شوند!
SPDY چیست؟پروتکل SPDY، پروتکلی است که توسط گوگل و با هدف ارتقاء سرعت اینترنت ارائه در سال 2009 شد. این پروتکل به SSL/TLS نیاز دارد اما عملیات روی TCP خالی را نیز پشتیبانی می کند.
پروتکل SPDY
این پروتکل سه مزیت اصلی دارد:
به کاربر و سرور اجازه می دهد که response header ها را فشرده سازی کنند. این موضوع برای header های تکراری مانند X-Cache که در هر درخواست ارسال می شوند اهمیت زیادی دارد چرا که باعث حفظ پهنای باند و عدم استفاده از منابع برای موارد تکراری می شود.
اجازه ی ارسال چندین درخواست را در یک اتصال می دهد. بنابراین نیازی به رفت و برگشت های تکراری بین مرورگر و سرور وجود ندارد. همچنین منابع غیر ضروری دیگر نمی توانند مانع بارگزاری منابع ضروری بشوند.
از push استفاده می کند و آن دسته از منابعی را که می داند مورد نیاز کاربر هستند، قبل از ارسال درخواست به سمت کاربر ارسال می کند.
البته در 11 فوریه سال 2016 گوگل اعلام کرد که به خاطر معرفی HTTP/2 مرورگر chrome دیگر از پروتکل SPDY پشتیبانی نمی کند.
HTTP/2 چیست؟HTTP/2 نسخه ی به روز رسانی شده و اصلاح شده ی HTTP/1.1 است که بر پایه ی SPDY و توسط گروه IETF نوشته شده است. این پروتکل در سال 2015 و در RFC 7540 تعریف شد. برای استفاده از HTTP/2 حتما نیاز به HTTPS دارید تا بتوانید به طور کامل از قابلیت های آن استفاده کنید. بر اساس گزارش W3Techs حدود 33.7 درصد وب سایت های دنیا از HTTP/2 استفاده می کنند (تا جولای 2019 – زمان نگارش این مقاله). برخی از مزایای HTTP/2 عبارت اند از:
HTTP/2 دیگر متنی نیست بلکه binary (دودویی) است.
کاملا multiplexed است و دیگر خبری از ordered بودن نیست.
باعث کمتر شدن (round trip times (RTT و افزایش سرعت وب سایت شما بدون نیاز به هیچ کاری می شود!
برای موازی‌گرایی (parallelism) از یک اتصال استفاده می کند.
برای کاهش header ها از روش فشرده سازی HPACK به همراه کدگذاری Huffman استفاده می کند.
از قابلیت push پشتیبانی می کند.
extension ای جدید به نام ALPN باعث می شود اتصالات سریع تر رمزنگاری شوند چرا که پروتکل برنامه در همان اتصال اولیه مشخص می شود.
دیگر نیازی به انجام کار هایی مانند Domain sharding نیست.
مشکل Head-of-line blocking را حل کرده است.
خلاصه ی بحثتفاوت های HTTP و HTTPS را به صورت خلاصه در لیست زیر می بینید:
تفاوت آدرس سایت ها در نوار آدرس //:HTTPS و //:HTTP
HTTP غیرامن و HTTPS امن است.
HTTP داده ها را روی پورت 80 و HTTPS روی پورت 443 ارسال می کند.
HTTP در سطح لایه ی برنامه عمل می کند اما HTTPS در سطح لایه ی انتقال عمل می کند.
HTTP نیازی به گواهی SSL ندارد اما برای HTTPS باید گواهی داشته باشید و آن گواهی توسط CA امضا شده باشد.
HTTP نیازی به اعتبار سنجی دامنه ندارد اما HTTPS به اعتبار سنجی دامنه نیاز داشته و حتی در برخی موارد به اعتبار سنجی اسناد قانونی نیز می پردازد.
HTTP بدون رمزنگاری بوده اما HTTPS قبل از ارسال اطلاعات آن ها را رمزنگاری می کند.
استفاده از HTTPS در سرعت، امنیت و حتی سئوی سایت شما تاثیر گذار است! بنابراین سعی کنید سریعا برای وب سایت خود گواهی SSL تهیه کنید. امیدوارم این مقاله برای شما مفید بوده باشد.
منبع: روکسو
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


۷ نکته بهینه سازی کدهای CSS شما
 
در دنیای وب امروزی page load time یا زمان بارگذاری وب سایت یکی از مهم ترین عوامل موفقیت وب سایت ها است. این تفاوت ها، حتی در سطح میلی ثانیه، می توانند تاثیر مستقیم و زیادی بر کسب و کار شما و ترافیک ورودی سایتتان داشته باشد. مبحث بهینه سازی سرعت بارگذاری سایت ها مبحث بسیار طولانی و پیچیده ای است و نمی توان در یک مقاله تمام جنبه های آن را مورد بحث و بررسی قرار داد اما می توانیم یکی از فاکتورهای مهم در بهینه سازی سایت ها را در همین مقاله بررسی کنیم؛ بهینه سازی کدهای CSS !
نکات و پیشنهادات ارائه شده برای بهینه سازی کدهای CSS در این مقاله می تواند به بهبود سرعت سایت شما کمک خوبی کند بنابراین سعی کنید تا حد ممکن آن ها را رعایت کنید.
1. تنگناهای سیستم را پیدا کنیدقدم اول در هر نوع بهینه سازی، بررسی کامل سیستم است. خوشبختانه ابزارهای مختلفی برای بررسی و آنالیز کدهای front-end وب سایت شما وجود دارد که به شما کمک می کنند تنگناهای اجرایی سیستم را پیدا کنید. ساده ترین روش برای بررسی سیستم این است که با فشردن کلید f12 وارد DevTools مرورگر خود شوید. از صفحه ی DevTools به سربرگ Network بروید و در آنجا سایز و زمان بارگذاری هر کدام از فایل های CSS را مشاهده خواهید کرد. همچنین می توانید سرعت بارگذاری CSS خود را با cache و بدون cache مقایسه کنید. از آنجایی که DevTools و سربرگ Network منابع خارجی CSS مانند فونت های گوگل یا CDN ها را نیز نشان می دهند ممکن است چیزهایی را پیدا کنید که اصلا از آن ها خبر نداشته اید!
مثالی از DevTools مرورگر محبوب firefox (مرورگر chrome نیز مشابه firefox است)
جدا از بخش DevTools می توانید از ابزارهایی مانند Pingdom Tools و Lighthouse (ساخته گوگل) استفاده کنید. به طور مثال Pingdom Tools با اسکن ساده ی وب سایت شما چندین نکته و پیشنهاد برای بهینه سازی سایت و فایل های CSS به شما ارائه خواهد داد.
وب سایت pingdom tools
2. Minify کردن فایل های CSSاکثر وب سایت ها چندین فایل CSS دارند و با اینکه نوشتن کدهای CSS به صورت ماژولار نظم خاصی به پروژه می دهد اما بارگیری آن ها زمان خواهد برد. برای مقابله با این مشکل راه حل های مختلفی وجود دارد (مثلا می توانید فایل های CSS را در یک یا دو فایل ادغام کنید) اما از هر روشی که استفاده کنید minify کردن این فایل ها به شما کمک بزرگی خواهد کرد.
برای این کار ابزارهای مختلفی مانند CSS Minify وجود دارند که فایل های CSS شما را minify می کنند. minify کردن فایل های CSS یعنی انجام عملیات های مختلفی مانند:
حذف تمام کامنت ها از فایل
حذف تمام اسپیس ها و فضا های خالی
حذف تمام new line ها (اینتر زدن و رفتن به خط جدید)
محصول نهایی minification یک فایل CSS یک خطی و فشرده خواهد بود که سرعت بارگیری بسیار بیشتری دارد!
ابزارهایی مانند CSS Minify برای پروژه های کوچک خوب کار می کنند اما اگر پروژه ی شما بسیار بزرگ باشد این فرآیند خسته کننده خواهد بود. بنابراین بهتر است به سراغ خدمات اتوماسیون فشرده سازی بروید. جدا از افزونه هایی که می توانید برای ادیتور خود نصب کرده و با آن ها کدها را فشرده کنید سرویس های بزرگ تری مانند Webpack وجود دارند که تمام فایل های شما را در یک bundle فشرده شده برمیگردانند. مجموعه ی PostCSS نیز پلاگین های ساده تری مانند CSS Nano را دارد که نه تنها فایل هایتان را فشرده می کنند بلکه انواع بهینه سازی کدهای CSS را نیز روی فایل های شما انجام می دهند.
نمایی از وب سایت CSS Nano
3. استفاده از Flexbox و Gridاگر شما از معدود افرادی هستید که هنوز هم از روش های بسیار قدیمی مانند float دادن به عناصر استفاده می کند باید به شما بگوییم که این روش ها تقریبا منسوخ شده اند! این نوع روش ها زمانی مطرح بودند که هیچ روش دیگری برای موقعیت دهی صحیح به عناصر صفحه وجود نداشت اما در حال حاضر ماژول های امروزی تری مانند flexbox و CSS Grid وجود دارند که قابلیت های بسیار بیشتری به شما می دهند.
در روش های قدیمی برای موقعیت دهی به عناصر (مثلا مرکزیت در محور عمودی) باید از ترفند های مختلفی استفاده می کردیم اما در ماژول هایی مانند flexbox چنین مشکلاتی وجود ندارد و طراحی بسیار راحت تر شده است. با اینکه یادگیری آن ها ممکن است در وهله ی اول کمی زمان بر باشد اما به شما اطمینان می دهم که ارزش وقت و زحمت اش را دارد. با استفاده از این ماژول ها مخصوصا flexbox فایل های CSS شما قوانین کمتری لازم دارند بنابراین حجم فایل های CSS کاهش می یابد.
نگران پشتیبانی از flexbox هم نباشید چرا که در حال حاضر 98 درصد از مرورگرهای دنیا از آن پشتیبانی می کنند:
وضعیت پشتیبانی از ماژول flexbox
در واقع مرورگرهای کروم و فایرفاکس از حدود سال های 2010 (با پیشوند مخصوص خودشان) و از سال 2014 (بدون پیشوند) از ماژول Flexbox پشتیبانی می کنند. آیا فکر می کنید هنوز کاربری وجود دارد که از 9 سال پیش مرورگر خود را به روز رسانی نکرده باشد؟!! بنابراین جای نگرانی نیست.
البته باید گفت که پشتیبانی از CSS Grid به اندازه ی Flexbox نیست (مثلا کروم و فایرفاکس از سال 2017 پشتیبانی از آن را شروع کردند) اما تا چند سال دیگر آن هم به پشتیبانی کامل توسط مرورگر ها خواهد رسید. گرچه در حال حاضر پشتیبانی از آن 93 درصد مرورگر های جهان است!
وضعیت پشتیبانی از CSS Grid
4. استفاده از <link> به جای import@دو راه برای بارگذاری فایل های CSS در صفحات وجود دارد:
استفاده از تگ <link> در قسمت <head> فایل HTML (بارگذاری مستقیم)
استفاده از import@ برای بارگذاری آن ها از طریق فایل های CSS دیگر (بارگذاری غیر مستقیم)
دستور import@ معمولا برای بارگذاری منابع کوچک تر مانند فونت ها استفاده می شود و شاید در نگاه اول با ماژولار کردن کد های ما پروژه را منظم تر کند اما حقیقت این است که زمان بارگذاری کدها با دستور import@ بسیار طولانی تر از بارگذاری آن ها با تگ link است و یک درخواست. بنابراین سعی کنید تا حد ممکن از این دستور دوری کنید.
همچنین هنگام کار با تگ link حواستان به اولویت دستورات CSS (مبحث CSS specificity) باشد؛ همیشه استایل های کلی را بالاتر و استایل های جزئی تر را پایین تر قرار دهید. مثال:
 



1
2
3

<link rel="stylesheet"href="main.css">
<link rel="stylesheet"href="page.css">
<link rel="stylesheet"href="component.css">



5. استفاده از Gradient و SVG به جای تصاویربارگیری و نمایش تصاویر در مرورگر می تواند زمان زیادی از سایت شما بگیرد به همین خاطر توسعه دهندگان سعی می کنند تا با ترفندهای مختلف و روش های فشرده سازی (مثلا استفاده از سایت های فشرده سازی مانند TinyJPG) حجم تصاویر را کاهش دهند. این روش ها تا حد بسیار زیادی به ما کمک می کنند اما هنوز هم می توانیم بهتر از این مسائل کار کنیم.
به طور مثال می توانید از gradient های CSS یا از SVG ها استفاده کنید. به طور مثال کد زیر یک gradient زیبا تولید می کند که از هر تصویری سریع تر بارگذاری می شود. برای مشاهده ی gradient های بیشتر می توانید به وب سایت هایی مانند CSSmatic و ColorZilla مراجعه کنید.
وب سایت CSSmatic
از طرف دیگر استفاده از SVG ها نیز مزایای خود را دارد:
SVG ها کد هستند بنابراین توسط CSS قابل ویرایش هستند.
SVG ها بسیار کم حجم اند.
SVG ها می توانند بدون ذره ای افت کیفیت بی نهایت کوچک یا بزرگ شوند.
و…
6. عدم استفاده از important!دستور important! در برخی از مواقع بسیار مفید واقع می شود و می تواند در موقعیت های مختلف ما را نجات دهد اما باید به عنوان گزینه ی آخر در نظر گرفته شود. زمانی که از دستور important! استفاده می کنید یک استثناء در قوانین CSS ایجاد می کنید و قانون CSS ای که important! را داشته باشد تمام قوانین دیگر را override می کند. مثال:
 



1
2
3
4
5

h1{
 
   margin-bottom:20px!important;
 
}



اگر تعداد دستورات important! در کد زیاد باشد، مرورگر مجبور می شود کد ها را چند بار چک کند که به نوبه ی خود سرعت برنامه ی شما را پایین میاورد.
7. انجام CSS refactoringCSS refactoring کار ساده ای نیست اما می تواند به شدت سرعت وب سایت شما را افزایش دهد. مثلا هنگامی که فایل های CSS شما بسیار بزرگ باشد سرعت بارگذاری سایت شما به اندازه ی قابل توجهی کاهش می یابد. هدف CSS refactoring نیز بهینه سازی کد و مدیریت بهتر آن است. در فرآیند CSS refactoring باید تمام جوانب سنجیده شود که مهم ترین آن ها عبارت اند از:
آیا قوانین CSS تکراری یا استفاده نشده دارید؟
آیا می توانید برای فلان طرح از روش های امروزی تر مانند flexbox استفاده کنید؟
آیا specificity طرح شما بیش از حد معمول است؟ ( می توانید آن را با visual specificity calculator چک کنید)
آیا ساختار CSS شما منطقی است؟ (مثلا استفاده از چند فایل CSS به جای یک فایل برای پروژه های بزرگ راحت تر است)
آیا پروژه ی شما نیاز به یک build tool خودکار دارد یا خیر؟
و ده ها سوال دیگر…
همچنین سعی کنید از ابزارهای version control (مانند Git) استفاده کنید تا اگر به مشکلی برخورد کردید بتوانید به نسخه های قبلی برنامه برگردید.
امیدوارم از مقاله بهینه سازی کدهای CSS لذت برده باشید.
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


نکاتی برای بهینه سازی محتوای ویدیویی در وب سایت شما
 
گاهی تصمیم می گیریم که به وب سایت خود ویدیوهایی اضافه کنیم اما داشتن ویدیو در صفحات وب، چاقویی دو لبه است؛ از طرفی کاربران عاشق ویدیوهای با کیفیت یا به اصطلاح high-res (رزولوشن بالا) هستند و از طرفی اگر وب سایت شما توانایی مدیریت این فایل ها را نداشته باشد به مشکلات متعددی مانند کُندی سایت و … برمی خورید. در این مقاله قصد داریم در رابطه با همین موضوع صحبت کنیم و نکاتی را به شما بگوییم تا با استفاده از آن ها فایل های ویدیویی سایت خود را بهینه سازی کنید.
چرا بهینه سازی فایل های ویدیویی مهم است؟اضافه کردن فایل های ویدیویی یکی از بهترین راه های جذب مخاطب است. حتما شما هم متوجه شده اید که امروزه وب سایت های بیشتری در صفحات خود از ویدیو استفاده می کنند. بر اساس تحقیقات Speed Curve میانگین حجم صفحات وب بین سال های 2011 تا 2017 از 1 مگابایت به 3 مگابایت افزایش پیدا کرده است که بخشی از آن به دلیل استفاده ی بیشتر از ویدیو ها بوده است. همچنین تنها در دو سال اخیر میانگین حجم ویدیو های اینترنتی از 204KB به 729KB افزایش یافته است.
 
سوال: آیا این مسئله نگران کننده است؟
 
پاسخ: خیر، نه تنها نگران کننده نیست بلکه به نفع همگی ماست! حجم بیشتر یعنی کیفیت بالاتر، قابلیت های بیشتر، وب سایت های پیشرفته تر و توسعه ی زیباتر و … . البته شاید نگران افت سرعت دنیای وب باشید اما باید به نکته ای مهم توجه کنید؛ همزمان با بالا رفتن حجم صفحات وب، میانگین سرعت اینترنت در جهان، کیفیت سرورها و تعدادشان، روش های بهینه سازی و فشرده سازی و… همگی ارتقاء پیدا کرده اند بنابراین نه تنها سرعت کاهش نمی یابد بلکه افزایش هم خواهد داشت چرا که سرعت رشد تکنولوژی های وب از سرعت رشد حجم آن ها بیشتر است!
بیایید در رابطه با بهترین فرمت های ویدیویی برای وب صحبت کنیم. فرمت های MP4 و WebM به دلیل قابلیت فشرده سازی و کیفیت بالا از محبوب ترین فرمت های ویدیویی دنیای وب هستند و در واقع فرمت استاندارد وب سایت های بزرگی مانند YouTube و Vimeo شده اند. البته MP4 در تمام مرورگرها پشتیبانی می شود اما WebM تنها در فایرفاکس و کروم به صورت کامل پشتیبانی می شود.
وضعیت پشتیبانی از فرمت webm
معمولا فایل های WebM سبک تر از MP4 هستند اما فایل های MP4 روی تلفن های همراه بهتر نمایش داده می شوند.
نکات مهم در بهینه سازی  ویدیوبرای ارائه ی محتوای ویدیویی با کیفیت به مخاطبان خود باید از دو مرحله عبور کنید:
فایل ویدیویی را بهینه سازی کنید تا با کاهش سرعت سایت مواجه نشویم.
صفحه ی وب را بهینه سازی کنید تا محتوای ویدیویی را به طور صحیح و زیبا نمایش دهد.
بهینه سازی ویدیو1. از ابزار فشرده سازی استفاده کنید: ابزارهای فشرده سازی داده مانند Blazemp و HandBrake می توانند بدون افت شدید کیفیت، حجم فایل های تصویری شما را پایین بیاورند و بدیهی است که فایل های کوچکتر سریع تر بارگذاری می شوند. بنابراین با فشرده سازی فایل های ویدیویی هم منابع سرور خود را حفظ می کنید و هم زمان و حجم اینترنت کاربران خود را! البته سعی کنید که حد وسط را رعایت کنید؛ فشرده سازی بسیار شدید ممکن است باعث افت کیفیت شود و ویدیوهایی که کیفیت پایین دارند باعث زدگی و دوری کاربران از سایت شما می شوند.
2. از فرمت های پشتیبانی شده در HTML5 استفاده کنید: یکی از بهترین ویژگی های HTML5 این است که توسعه دهندگان می توانند بدون استفاده از هیچ پلاگینی ویدیوهای خودشان را در صفحات وب قرار دهند. بنابراین باید حواستان به فرمت ویدیوی خود باشد. سعی کنید با استفاده از ابزارهای تغییر فرمت آنلاین (مانند video.online-convert.com یاconvertio.co) یا نرم افزارهای کامپیوتری فایل هایتان را به فرمت MP4 تغییر دهید.
3. حذف صدا از ویدیوهای صامت: اگر ویدیوی شما صدا ندارد و یا اصلا نیازی به آن ندارد باید داده های صوتی را از آن جدا کنید. ممکن است شما صدایی را نشنوید اما اطلاعات صوتی هنوز هم در فایل ویدیویی قرار دارند، صدایی ندارند اما حجم اشغال می کنند! اگر خودتان ویدیو را ساخته باشید که در همان نرم افزار ویرایش ویدیو audio track را حذف کنید در غیر این صورت از نرم افزارهای ویرایش ویدیو مانند FFmpeg استفاده کنید.
4. ویدیو را از سرور خود Stream کنید: در سال های قبل کاربران مجبور بودند که یک ویدیو را به صورت کامل دانلود کنند تا بتوانند آن را مشاهده کنند اما در دوره ی فعلی قابلیت streaming به ما اجازه می دهد که هر قسمت از ویدیو را تماشا کنیم (بدون نیاز به دانلود کل فایل).
5. از سرورهای CDN استفاده کنید: CDN ها شبکه های توزیع محتوا هستند که قبلا در مورد آن ها صحبت کرده ایم. آن ها به شما اجازه می دهند که منابع استاتیک سایت خود را کش کنید و نسخه های کش شده را با سرعتی بالا به کاربران تحویل دهید. نقش CDN هنگامی پررنگ می شود که این منابع استاتیک حجم بالایی داشته باشند (مانند ویدیوها) بنابراین با استفاده از آن ها کاربران شما سرعت بسیار بالاتری را تجربه خواهند کرد.
در واقع استفاده از CDN ها به طور کلی عملکرد و سرعت سایت را بالا می برد، مخصوصا هنگامی که تعداد کاربران شما بسیار زیاد باشد. جدا از مبحث فاصله ی جغرافیایی، CDN ها ترافیک وب سایت شما را پخش می کنند بنابراین مانند حالت عادی روی سرور فشار زیادی نمی آید.
بهینه سازی صفحه‌ی وببهینه سازی ویدیو و انتخاب فرمت صحیح قدم مهم و اصلی کار ما است اما برای ارتقاء تجربه ی کاربری باید وب سایتی داشته باشیم که از ویدیوهای با کیفیت پشتیانی می کند و توان مدیریت آن ها را داشته باشد. نکات زیر از نکات بسیار مهم در این رابطه هستند:
1. اندازه ی ویدیو را مشخص کنید: مطمئن شوید که در کدهای HTML یا CSS طول و عرض ویدیو را مشخص کنید؛ این موضوع باعث می شود صفحات ما بهم نریزند و از طرفی مرورگر بداند چه مقداری از پهنای باند را به ویدیو اختصاص دهد.
2. بارگذاری ویدیو را تا بارگذاری کامل صفحه به تعویق بیندازید: اگر ویدیویی دارید که در هنگام ورود کاربر به صورت خودکار نمایش داده می شود بهتر است بارگذاری اش را تا پایان بارگذاری کامل صفحه عقب بیندازید تا صفحه درگیر نشود و کاربران احساس کُندی سایت را نداشته باشند. البته پیشنهاد متخصصین UX این است که اصلا از این نوع ویدیوها استفاده نکنید.
3. کاربران موبایل را در اولویت قرار دهید: امروزه کاربران بسیار زیادی با استفاده از موبایل ها و تبلت ها وارد فضای مجازی می شوند بنابراین وب سایت هایی که آن ها را در نظر نگیرند ضربه خواهند خورد. از قوانین طراحی واکنش گرا پیروی کنید و مطمئن شوید که وب سایت شما از اندازه ی صفحات مختلفی پشتیبانی می کند. همچنین وب سایت شما باید بتواند orientation دستگاه کاربر (نگه داشتن گوشی به صورت افقی یا عمودی) را به خوبی تشخیص دهد.
حتی اگر از بهترین طراحان Front-end سوال کنید به شما می گویند که طراحی واکنش گرا و پشتیبانی از تمام دستگاه ها کار آسانی نیست. برخی از افراد تصمیم می گیرند که یک نسخه ی جداگانه از وب سایتشان را برای موبایل های هوشمند و تبلت ها بسازند اما چنین عملی بار کاری شما و زحمت مدیریت را دو برابر می کند. یکی از راه های بهتر طراحی واکنش گرا استفاده از media query ها است.
فرض کنید وب سایتی دارید که در صفحه ی اول آن یک ویدیو قرار دارد. طول و عرض این ویدیو برای صفحات باریک مانند گوشی های همراه مناسب نیست بنابراین بهتر است اصلا برای کاربران موبایلی نمایش داده نشود. کد زیر می تواند از نمایش این ویدیو برای صفحات کوچک و باریک جلوگیری کند:
 



1
2
3
4
5

@media screen and(max-width:650px){
    #hero-video {
        display:none;
    }
}



بهینه سازی ویدیو از نظر SEOپلتفرم هایی مانند YouTube یکی از راه های بسیار عالی برای جذب مخاطب هستند اما اگر می خواهید رتبه بندی سایت شما در گوگل بهتر شود باید ویدیوهایتان را روی دامنه ی خود میزبانی کنید. هنگامی که ویدیوهایتان را در YouTube آپلود کرده و با لینکی به وب سایت خود متصل می کنید، موتورهای جست و جو YouTube را نسبت به سایت شما ترجیح می دهند؛ در این حالت ممکن است کسی نام کمپانی شما را در گوگل جست و جو کند اما به جای وب سایت شما وارد Youtube شود. این مسئله باعث کاهش بازدیدها و تعداد کاربران شما می شود!
هنگام کار با ویدیوها از قوانین زیر پیروی کنید تا سئوی خوبی داشته باشید:
از metadata استفاده کنید تا index کردن ویدیوهایتان راحت تر باشد.
title ویدیوهای شما باید کامل و توصیفی باشد نه کلی! title را کوتاه بنویسید اما از توصیفات و کلمات کلیدی استفاده کنید.
پیدا کردن بهترین کلید واژه ها نیاز به کمی جست و جو دارد اما به طور کل هر توصیفی که ارائه کنید به نفع شما خواهد بود.
از thumbnail (تصویر بند انگشتی) مناسب استفاده کنید.
تمام این کارها را پس از بهینه سازی فایل ویدیوی انجام دهید تا metadata شما پاک نشود.
البته همه می دانند که میزبانی ویدیوها روی دامنه ی خودتان هزینه هایی را اضافه می کند (اشغال فضای بیشتر و…) و شما باید بر اساس مزایا و معایب این روش انتخابتان را انجام دهید. یکی دیگر از روش های دور زدن این محدودیت این است که ویدیوهایتان را روی سرورهای خاصی که برای دانلود (نه میزبانی وب) هستند ذخیره کنید
آیا واقعا به ویدیو نیاز دارید؟به طور کلی گفته می شود که مزایای استفاده از فایل های ویدیویی بیشتر از هزینه های این فایل ها است اما اگر محتوای شما طوری است که نیازی به ویدیو ندارد و در کل اضافه کردن ویدیوهای مختلف به کاربر کمکی نمی کند، مطمئن باشید که تنها منابع سرور خود را هدر داده اید! در چنین وضعیت هایی حذف کردن کامل ویدیوها و آزاد کردن منابع سرور برای سایت شما مفیدتر خواهد بود. به طور خلاصه برایتان بگویم: برای استفاده از فایل های چند رسانه ای (تصاویر، عکس ها و…) استراتژی داشته باشید و تنها برای قشنگی از آن ها استفاده نکنید.
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


بهترین ابزارها XML Sitemap و اهمیت آن
 
آقای Kevin Indig یکی از محققان حوزه ی سئو در یکی از نوشته ها/خاطرات خود می گوید:
به تازگی شروع به کار در Atlassian کرده بودم و دنبال راهی برای شناخته شدن در این کمپانی بودم بنابراین شروع به بررسی سایت کردم و متوجه شدم که سایت XML sitemap ندارد. با خودم گفتم عجب بُرد راحتی! ابتدا از توسعه دهندگان خواستم که ابزار Sitemap را در CMS فعال کنند اما با تعجب به من گفتند که متاسفانه امکان چنین کاری وجود ندارد. من هم سعی کردم از درب دیگری وارد شوم و سرویس Screaming Frog به خاطرم آمد. بنابراین با استفاده از این سرویس، یک Sitemap درست کردم و آن را روی سایت بارگذاری کردم. ربات های گوگل آن را خواندند و در عرض چند روز ترافیک ما به شکل قابل توجهی افزایش پیدا کرد. به نظر من نتیجه ی اخلاقی این داستان این است که XML sitemap (نقشه سایت XML) مورد بسیار مهمی در سئوی سایت شماست و نباید آن را فراموش کرد. منبع:semrush
همینطور که از گفته های آقای Kevin Indig مشخص است در بعضی اوقات XML Sitemap ها می توانند تا حد زیادی به سایت شما کمک کنند اما باید اول بدانیم که Sitemap ها چه هستند. XML sitemap ها نقشه ای دیجیتال از سایت شما هستند که به گوگل کمک می کنند تا بفهمد کدام صفحات از همه مهم تر بوده و هر صفحه هر چند روز به روز رسانی می شود.
گوگل در صفحه ی help center خود می گوید:
A sitemap tells the crawler which files you think are important in your site, and also provides valuable information about these files: for example, for pages, when the page was last updated, how often the page is changed, and any alternate language versions of a page.
خلاصه ی گفته ی گوگل همان چیزی است که بالاتر به شما گفتیم؛ چه صفحاتی مهم تر از همه هستند، آخرین باری که به روز رسانی شدند چه زمانی بوده است، نسخه های مختلف ترجمه شده از صفحه و دیگر اطلاعات ممکن.
هر سایتی باید Sitemap داشته باشد اما بعضی از سایت ها به طور خاص و بیشتر به آن نیاز دارند:
وب سایت های بسیار بزرگ
وب سایت های تازه تاسیس شده
وب سایت هایی که صفحات 1orphaned زیادی دارند
وب سایت هایی که از تصاویر و ویدیوهای زیادی استفاده می کنند.
1- صفحات orphaned صفحاتی هستند که هیچ لینکی به آن ها اشاره نمی کند بنابراین در حالت عادی کمتر کسی به این صفحات می رسد مگر اینکه URL را به صورت دستی وارد کند.
در واقع فایل معروف robots.txt به شما کمک می کند که قسمت هایی از سایت را از دسترس موتورهای جست و جو خارج کنید اما Sitemap ها دقیقا برعکس این کار را انجام می دهند؛ آن ها به موتورهای جست و جو کمک می کنند تا صفحات جدید را شناسایی کنند. گوگل از سال 2005 شروع به استفاده از XML sitemap ها کرد. البته نکته ی مهمی وجود دارد: HTML sitemap با XML Sitemap یکی نیست! XML sitemap ها برای کاربران قابل مشاهده نیستند بلکه فقط برای Google قابل مشاهده است در حالی که HTML sitemap ها لیستی از لینک های داخلی هستند که تمامی صفحات را در یک جا جمع کرده اند. توصیه می شود که هر دو را داشته باشید:
یک نمونه HTML Sitemapیک نمونه XML Sitemap
این فرمت XML به گوگل اجازه می دهد که سریعا اطلاعات را parse کرده و URL های جدید را پیدا کند.
ثبت sitemap و استانداردهای آناگر می خواهید بدانید سایت شما sitemap دارد یا نه می توانید از ابزاری مانند Google Search Console یا Bing Webmaster Tools استفاده کنید؛ در قسمتی به نام sitemaps نگاه کنید و لیست موجود را بررسی کنید. اکثر موتورهای جست و جو در فایل robots.txt به دنبال کد <Sitemap: <sitemap_location می گردند بنابراین بهتر است sitemap را در آن قسمت مشخص کنید. راه دیگر این است که فایل sitemap را مستقیما وارد گوگل یا دیگر موتور های جست و جو کنید:
نحوه ی ارسال مستقیم sitemap به Google
نحوه ی ارسال مستقیم sitemap به  Baidu
نحوه ی ارسال مستقیم sitemap به Bing
نحوه ی ارسال مستقیم sitemap به Yandex
ثبت sitemap برای Googleثبت sitemap برای bing
استانداردهای یک sitemap خوب به این شرح هستند:
فقط شامل لینک های canonical با status code 200 باشد.
حداکثر 200 هزار URL برای هر sitemap و 50 هزار sitemap برای هر index sitemap داشته باشد.
در فایل robots.txt مشخص شده باشد.
دارای encoding از نوع UTF-8 باشد.
در فرمت gz. فشرده شده باشد.
بزرگتر از 50mb (مگابایت) نبوده و بیشتر از 50 هزار URL نداشته باشد.
این موارد از استانداردهای حداقلی هستند اما کارهای بیشتری نیز می توان انجام داد. مثلا می توان تنها صفحات مهم را در sitemap قرار داد تا گوگل فقط آن ها را مد نظر بگیرد؛ فرض کنید گوگل یک توریست است و XML sitemap نقشه ای برای توریست ها است. در این نقشه نباید آدرس هر خانه ای را اضافه کرد بلکه فقط قسمت های مهم شهر مانند ساختمان های معروف و پارک های دیدنی را ذکر می کنند. بنابراین صفحاتی مانند «درباره ی ما» یا «شرایط و قوانین» را در این فایل قرار ندهید چرا که از صفحات مهم (برای موتور جست و جو) به حساب نمی آیند.
همچنین اکثر CMS ها می توانند sitemap را به طور مرتب ویرایش کنند و با اضافه شدن هر URL جدید آن را به صفحه اضافه کنند. هر بار که فایل sitemap شما ویرایش می شود گوگل متوجه شده و آن را بازبینی می کند.
وب سایت های بزرگاگر وب سایت شما بزرگ است (مانند وب سایت های خبری) بهتر است یک index sitemap داشته باشید که 50 هزار sitemap عادی را در خود جای می دهد، البته نباید از 50 مگابایت حجم بیشتری داشته باشند. دلیل این کار این است که نمی توانید با چنین سایت بزرگی تمام sitemap های خود را در یک فایل بگنجانید.
نمونه ای از تقسیم sitemap ها برای وب سایت های بزرگ
حتی می توانید برای تصاویر و ویدیوهای سایت خود نیز Sitemap داشته باشید و یا اینکه آن ها را در همان sitemap اصلی اضافه کنید. مثال:
 



1
2
3
4
5
6
7
8
9
10
11
12
13

<?xml version="1.0"encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>http://example.com/sample.html</loc>
    <image:image>
      <image:loc>http://example.com/image.jpg</image:loc>
    </image:image>
    <image:image>
      <image:loc>http://example.com/photo.jpg</image:loc>
    </image:image>
  </url>
</urlset>



برای ویدیوها هم همینطور:
 



1
2
3
4

<url>
  <loc>https://example.com/mypage</loc>
  <video>...information about video1...</video>
</url>



sitemap وب سایت های خبری باید به ق
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


صفر تا صد طراحی آی | درس سوم
 
در قسمت های اول و دوم، درباره تایخچه و مفاهیم نظری آی با شما صحبت کردیم، همچنین مراحل مختلف تحقیق در طراحی آی، اندازه ها و سبک های مختلف طراحی آی را نیز برای شما شرح دادیم. در این قسمت به عنوان سومین قسمت از سری صفر تا صد آموزش ساخت آی ، به معرفی منابعی مفید برای الهام گیری طراحان و اصول ساخت آی در نرم افزارهای گرافیکی مانند ایلوستریتور خواهیم پرداخت.
چگونه الهام بگیریم؟بسته به پروژه ای که انجام می دهید، که می تواند یک پروژه شخصی باشد یا سفارش مشتری، نیاز دارید تا از دیگران و آثارشان الهام (الگو) بگیرید، همانطور که اگر شما نیز کارتان را به بهترین شکل انجام دهید، الگوی دیگران قرار خواهید گرفت. پس از این مرحله قادر خواهید بود سبک شخصی خودتان را نیز بنا کنید، تا جایی که دیگران شما را با سبک مخصوص خودتان بشناسند.
حالا، چگونه می خواهید الهام بگیرید؟ خب، بهترین راه برای الهام گرفتن ایجاد چیزی است که ما طراحان آن را معمولاً با عنوان “Mood Board” (یا inspiration board) یا تخته الهام می‌شناسیم! همانطور که از نام آن پیداست، مود بُرد یک مجموعه از ایده های مبتنی بر تصویر است؛ از پالت های رنگی گرفته تا عکس ها، تصویرسازی ها، تکسچرها، تایپوگرافی و هر آن چیزی که از منابع مختلف جمع آوری کرده ایم و در نهایت مجموعه آنها قرار است به ما دیدی کلی درباره موضوع مورد نظرمان بدهند.
بگذارید موضوع را کمی ساده تر کنیم. به طور مثال شما شروع به ساخت آی در حیطه پزشکی کرده اید. کاری که ابتدا باید انجام دهید جستجو و دیدن آثار سایر طراحانی است که قبل از شما در این حوزه کار کرده اند؛ سپس پیدا کردن رنگ های مورد استفاده در این موضوع (مثلا سبز و قرمز) و بعد مشاهده تصاویر، تکسچرها و خلاصه هر آنچه که دید شما را درباره این موضوع گسترده تر کرده و درک بهتری از آن موضوع به شما می دهد.
جمع آوری همگی این موارد درباره موضوعی که می خواهید برای آن آی طراحی کنید، به شما کمک می کند تا در نهایت اثر موفق تری، تولید کنید. در صورتی که مفهوم “Mood Board” برای شما به خوبی قابل درک نیست، توصیه میکنم جستجویی با همین عنوان در اینترنت داشته باشید، نمونه مودبردهای دیگران را ببینید و درباره آنها بخوانید.
به عنوان یک طراح، شما دائما موارد الهام بخشی می بینید که توجهتان را به خود جلب می کند، از تصاویر الهام بخش گرفته تا آثار سایر طراحان؛ اما گاهی پیگیری همه آنها، به خصوص زمانیکه لازم است همه آنها را یکجا مشاهده کنید، بسیار دشوار است. اینجاست که ابزارهایی مانند پینترست و اینستاگرام کاربرد دارند، این ابزارها به شما کمک می کنند تا با یک کلیک، مود بُردهای خودتان را ایجاد کنید.
گزینه دیگری که می دانم افراد زیادی تمایل به استفاده از آن دارند، جستجو و دانلود تصاویر از اینترنت و سپس ایجاد Mood Board از آنها در نرم افزارهای گرافیکی است؛ اگر فقط یک مانیتور دارید، این روش برای شما بهتر است، چرا که احتمالا فضای کافی برای مشاهده همزمان آنها و طراحی در نرم افزار را ندارید! اما اگر بیش از یک مانیتور دارید، استفاده از روش قبلی یعنی شبکه های اجتماعی و ابزارهای آنلاین ساده تر است. با این روش می توانید در یک مانیتور مدام تصاویر و ایده های نابی را که از دیگر آثار الهام می گیرید ببینید و در مانیتور دیگر، طراحی را انجام دهید. وقتی صحبت از تصاویر و آثار سایر طراحان می شود، من معمولا یکی از منابع زیر را توصیه می‌کنم:
Dribble.com
Behance.com
Iconfinder
The Noun Project
Pinterest
Instagram
Google Images
گاهی اوقات هم خود را در شرایطی می یابید که برای ساخت آی موضوع پیچیده تری دارید و برای پیدا کردن نمادی برای آن، نیاز به کمک دارید. وقتی این اتفاق برای من رخ می‌دهد، به The Noun Project یا Iconfinder می روم و یک جستجوی ساده انجام می دهم، این کار همواره گستره ای وسیع از تصاویر را در اختیارم قرار می دهد که به من در درک بهتر موضوع کمک می کند.
3.2 فاز طراحی (اجرا)تا به اینجا، اندازه پایه‌‌ی آی خود را فهمیدید، در مورد سایر اندازه ها تصمیم گرفتید و یک Mood Board تنظیم کرده اید. اکنون می توانید خلاصه مود برد را در هر یک از نرم افزارهای گرافیکی موجود طراحی کنید (Adobe Illustrator ،Adobe Photoshop ،Affinity Designer ،Sketch و …). چه کاربر Mac باشید و چه Windows، می توانید با دنبال کردن فرایندهای مشابه، به نتایج یکسان برسید، پس نگران این موضوع نباشید.
حالا بیایید ببینیم چه چیزی برای شروع طراحی آی لازم است؟
آی را Pixel-Perfect کنیدبیشتر برنامه ها به گونه ای ساخته شده اند که به شما در ایجاد آی های Pixel-Perfect کمک کنند. اگر این اولین بار است که در مورد این موضوع می شنوید، اکیداً توصیه می کنم چند لحظه وقت بگذارید و در این باره جستجویی داشته باشید.
رسم آی ها به صورت Pixel-Perfect
حال با فرض اینکه مطالعه درباره سبک Pixel-Perfect را به اتمام رسانده اید، سؤال این است که آیا باید زمانمان را برای سازگاری با این سبکِ کار سخت صرف کنیم یا خیر؟ خب، من شخصاً مدت زمان زیادی است که از این روش استفاده می‌کنم و هنوز هم معتقدم که ارزشش را دارد! اگر نگاهی به سالهای قبل بیندازید که ابتدا ساخت آی چقدر سخت انجام می شد، متوجه خواهید شد که ساختن آی‌ها با استفاده از شبکه های پیکسلی شروع شده، نه به شکل های برداری امروزی. اکنون هم بهترین روش برای رسم آی های بی نقص همین روش است، پس سخت نیست!
یک پروژه مناسب ایجاد کنیداولین قدم برای ایجاد آی، تنظیم یک پروژه جدید است. ساده است، نه؟ خوب، نه واقعاً، چراکه اگر تازه کار را شروع کرده‌اید، نکاتی در تنظیمات پروژه وجود دارد که باید از آنها آگاه باشید.
پروفایلابتدا باید اطمینان حاصل کنید که Document’s Profile روی وب تنظیم شده است، زیرا عموما آی ها در رسانه های دیجیتال استفاده می شوند. اگر نرم افزار مورد استفاده شما گزینه ای به این نام ندارد، مطمئن شوید که مود رنگ سندی که ایجاد کرده اید روی RGB تنظیم شده باشد. این تقریبا تنها تفاوت پروفایل وب و پرینت است (وب از RGB استفاده می کند، در حالی که چاپ از CMYK استفاده می نماید.)
واحدهای اندازه گیریدر مرحله بعد، واحدهای اندازه گیری را داریم که برای توصیف عرض، ارتفاع، انحنای گوشه ها، قطر استروک (حاشیه) و فاصله میان اشیاء مورد استفاده قرار می گیرد.
به طور پیش فرض، واحد باید روی Pixel تنظیم شود. (چرا که آی ها عموما برای استفاده در نمایشگرهای دیجیتال طراحی می شوند.) ما استفاده از پیکسل را به سایر واحدها ترجیح می دهیم زیرا واحدی جهانی است که برای اندازه گیری هر محصول دیجیتال مورد استفاده قرار می گیرد.
تعداد آرتبوردهنگامی که پروفایل و واحدهای سند خود را تنظیم کردید، باید مشخص کنید که می خواهید از یک Artboard بزرگ یا چند Artboard کوچکتر استفاده کنید. توصیه من این است که همیشه سعی کنید مسیر دوم را طی کنید، زیرا هنگام Export (خروجی گرفتن از) آی ها کار را بسیار ساده تر می کند.
استفاده از لایه هاچه در حال ایجاد یک آی تکی باشید و چه یک بسته کامل، همیشه باید سعی کنید از چندین لایه استفاده کنید تا بتوانید اشکال رسم شده خود را از جداول و خطوط راهنمای نرم افزار جدا کنید.
استفاده از پنل لایه ها در طراحی آی
با این کار، می توانید به راحتی آی های خود را بسازید بدون اینکه نگران باشید که خطوط راهنما را به اشتباه جابجا یا گروه بندی کرده باشید. علاوه بر این، به شما در فرایند Export کمک می کند، زیرا ممکن است خطوط و اشکالی را رسم کرده باشید که بخواهید قبل از گرفتن خروجی، لایه های آنها را مخفی کنید.
از خطوط و جداول راهنما استفاده کنیدطبق تعریف، “reference grid” ابزاری بصری متشکل از خطوط راهنمای هندسی است که به منظور کمک به شما در یکسان کردن اندازه ها و ترازبندی آی ها کاربرد دارد. این ابزار می تواند به سادگی دو مربع که روی هم قرار گرفته اند باشد، یا متشکل از اشکالی پیچیده تر. من شخصاً ترجیح می دهم از اشکال ساده تر به عنوان رفرنس استفاده کنم، زیرا با استفاده از آنها، کار بهتر از انجام می شود.
استفاده از خطوط و جداول راهنما در طراحی آی
من معمولا یک مستطیل کوچکتر از آرتبوردم رسم می کنم، که به آن «منطقه فعالیت» می‌گویم، جایی که قرار است تمام اشکالی که طراحی می کنم، درون آن قرار بگیرد. وجود این منطقه یک Padding یا فاصله از اطراف آرتبورد ایجاد می کند، تا مطمئن شوم که هیچ قسمتی از آی ها پس از تحویل و استفاده توسط مشتری برش نمی‌خورد (کراپ نمی شود).
هنگام کار بر روی چندین آی، قانون طلایی من این است که تصمیم می‌گیرم عرض و ارتفاع منطقه فعال طراحی یا فقط یکی از آن دو را توسط آیم پر کنم و این قاعده را بر روی تمام آی های دیگرم اعمال خواهم کرد، بنابراین نوعی یکپارچگی، در ابعاد تمامی آی های آن مجموعه به دست می‌آید.
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


آموزش طراحی لوگوی گل با گلبرگ های قلبی در ایلوستریتور
با سلام به مخاطبان عزیز! با یکی دیگر از آموزش های طراحی لوگو در خدمت شما عزیزان هستیم. در این آموزش قصد داریم به طراحی لوگوی گل در ایلوستریتور با گلبرگ های قلبی شکل بپردازیم. تا پایان آموزش با ما همراه باشید.
پیش نیاز آموزش:
 آشنایی مقدماتی با نرم افزار ایلوستریتور
سطح آموزش:
متوسط
چه مطالبی در این ویدیوی آموزشی خواهید دید؟
طریقه ی ساخت سند
نحوه ترسیم مستطیل دور گرد
یادگیری چند کلید میانبر کاربردی
نحوه انتخاب رنگ ها و استفاده از آن
شیوه استفاده از ابزار ذره بین (زوم)
آموزش ایجاد سایه
نحوه تقسیم بندی شکل ها
استفاده از Transform
ویدیوی آموزش طراحی لوگوی گل در ایلوستریتورنمایشگر ویدیو
 
 
00:00
 
08:40
 
 
 
خلاصه آموزش ویدیویی:
در ابتدا یک سند جدید می سازیم.
نمونه رنگ های مورد نظرمان را در ابتدای کار قرار می دهیم.
با استفاده از ابزار Rectangle و انتخاب یک رنگ شروع به رسم مستطیل می کنیم.
قسمت بالایی مستطیل را به حالت گرد درمی آوریم.
از شکل رسم شده کپی می گیریم و می چرخانیم.
با قرار دادن دو شکل کنار هم قلب ما ساخته می شود.
پس از آن قلب را به با استفاده از ابزار مستطیل و رنگ مورد نظر به دو قسمت جدا تبدیل می کنیم.
از شکل قلب سه کپی می گیریم و به نحوی کنار هم قرار می دهیم تا شبیه گل شود.
فاصله بین قلب ها را تنظیم می کنیم.
شروع به رنگ آمیزی هر قلب می کنیم.
در نهایت با ایجاد سایه و نوشتن نام شرکت طراحی لوگوی گل در ایلوستریتور به پایان می رسد.
 
منبع: روکسو
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


پیاده سازی Dark Mode (حالت شب) در یک صفحه ی ساده
یکی از قابلیت های محبوب این روزها در طراحی UI اضافه کردن dark mode (حالت شب) است. این قابلیت در بسیاری از نرم افزارها و وب سایت های معروف (مانند تلگرام، توییتر، Reddit و …) دیده می شود. دلیل آن هم راحت تر بودن مطالعه ی متون در این حالت است. بر اساس برخی از تحقیقات آکادمیک انجام شده میزان خستگی و قرمزی چشم ها در حالت dark mode کم تر از حالت عادی (صفحات رنگ روشن) بوده است، مخصوصا در محیط های تاریک (مثلا در شب). روش های مختلفی برای پیاده سازی Dark Mode با CSS در صفحات شما وجود دارد و ما هم یکی از این روش ها را در یک صفحه ی ساده پیاده سازی کرده ایم:
حالت عادی صفحه (بدون Dark Mode)همان صفحه با حالت Dark Mode
آماده سازی HTMLبرای پیاده سازی این طرح یک پوشه ایجاد کردیم و سه فایل زیر را در آن ایجاد کرده ایم:
html
css
js
سپس یک پوشه ی دیگر به نام images ایجاد کرده و تصویر کیک را در آن قرار دادیم. از آنجایی که می خواهیم در این مثال از جی کوئری استفاده کنیم، آن را مستقیما از CDN وارد صفحه کرده ایم تا همیشه روی آخرین نسخه باشد اما اگر بخواهید می توانید جی کوئری را دانلود کرده و به صورت محلی استفاده کنید. ساختار کلی صفحه ی ما (به صورت خلاصه شده) باید به این شکل باشد:
 



1
2
3
4
5
6

-dark-mode-css/
      -images/
            -cake.jpg
      -index.html
      -script.js
      -style.css



برای شروع باید روی فایل HTML کار کنیم. بنابراین پس از اضافه کردن CDN مربوط به جی کوئری و موارد دیگر (مانند فایل استایل و …) یک تگ h1 برای عنوان مطلب خود قرار می دهیم. سپس از تگ معنا-محور <article> استفاده کرده ایم تا محتوای مقاله را درون آن قرار دهیم. مثل همیشه صفحه ی استایل های ما در تگ <head> اضافه می شود اما فایل های جاوا اسکریپت در قسمت انتهایی سند و قبل از تگ پایانی <body/> قرار داده می شوند.
 
نکته: ترتیب بارگذاری فایل های جی کوئری و اسکریپت جاوا اسکریپت (فایل شخصی خودمان) مهم است. اگر جی کوئری قبل از فایل جاوا اسکریپت خودمان بارگذاری نشود، فایل جاوا اسکریپت ما نمی تواند از قابلیت های آن استفاده کند.
محتوای فایل HTML ما به شکل زیر است:
 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
19
20
21
22
23
24
25

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible"content="ie=edge">
    <title>Demo|Dark Mode inCSS</title>
    <link rel="stylesheet"href="style.css">
</head>
<body>
    <div class="switch">Dark mode:              
        <span class="inner-switch">OFF</span>
    </div>
    <h1 class="title">مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


آموزش طراحی وکتور ران مرغ در ایلوستریتور
با سلام به شما همراهان همیشگی روکسوپلاس. امروز با آموزش طراحی یک وکتور خوشمزه در ایلوستریتور با شما هستیم. در آموزش امروز، مراحل طراحی وکتور ران مرغ در ایلوستریتور را به صورت ویدیویی بررسی می کنیم.
پیش نیاز آموزش:
 آشنایی مقدماتی با نرم افزار ایلوستریتور
سطح آموزش:
متوسط
چه مطالبی در این ویدیوی آموزشی خواهید دید؟
طریقه ی ساخت سند
نحوه ترسیم دایره با استفاده از ابزار Ellipse
یادگیری چند کلید میانبر کاربردی
نحوه انتخاب رنگ ها و استفاده از آن
شیوه استفاده از ابزار ذره بین (زوم)
آموزش ایجاد حالت برجسته
نحوه تقسیم بندی شکل ها
آموزش کار با ابزار Pen
استفاده از Transform
ویدیوی آموزش طراحی وکتور ران مرغ در ایلوستریتورنمایشگر ویدیو
 
 
00:00
 
14:03
 
 
 
خلاصه آموزش ویدیویی:
در ابتدا یک سند جدید می سازیم.
نمونه رنگ های موردنظرمان را در ابتدای کار قرار می دهیم.
با استفاده از ابزار Ellispse یک دایره رسم می کنیم.
سپس با استفاده از ابزار Pen شروع به رسم محدوده موردنظر می کنیم.
با انجام تنظیمات دور شکل در نهایت قسمت گوشتی ران مرغ را ایجاد می نمائیم.
مجددا با استفاده از ابزار Pen قسمت استخوانی ران مرغ را رسم می کنیم.
با استفاده از ابزار Line و Pen شیارهایی روی قسمت بالایی شکل ایجاد می کنیم.
پس از اتمام طرح از شکل یک کپی از شکل می گیریم و با کمی جابجایی و تغییر رنگ، حالت برجستگی ایجاد می کنیم.
در نهایت با انتخاب یک پس زمینه مناسب، طراحی وکتور ما به اتمام می رسد.
 
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


فرمت تصویری Webp قرار است که Jpeg را از میان بردارد!
 
اگر در اینترنت و برنامه نویسی سر رشته ای داشته باشید حتما تا به حال با فرمت webp برخورد کرده اید. فرمت تصویری webp توسط گوگل ابداع شده است و قرار است که jpeg را از میان بردارد. گوگل در طراحی این فرمت تصویری تلاش زیادی کرده است و ادعا می کند که میزان فشرده سازی تصاویر تا 80 درصد نیز ممکن است!
معمولا اولین سوالی که در مورد این فرمت می شود این است که آیا پشتیبانی خوبی دارد یا خیر؟ بر اساس اعلام سایتcaniuse.com پشتیبانی از فرمت Webp به صورت زیر است:
وضعیت پشتبانی از فرمت webp (تاریخ اگوست 2019)
کمپانی های بزرگی مانند گوگل، فیسبوک و eBay در حال حمایت از استفاده از webp هستند و تا حد ممکن از آن استفاده می کنند. در حال حاضر تقریبا تمام تصاویر (بالای 95 درصد) صفحه ی اصلی eBay با فرمت تصویری webp هستند.
استفاده ebay از فرمت webp در صفحه ی اول وب سایت
حتی کمپانی YouTube نیز برای بسیاری از تصاویر بند انگشتی (thumbnail) از فرمت webp استفاده میکنند:
استفاده YouTube از فرمت webp در thumbnail ها
استفاده از قانون Rewriteدستور Rewrite به شما اجازه می دهد که با تغییر MIME Type تصاویر آن ها را به صورت Webp ارائه کنید اما اگر از CDN استفاده می کنید، این روش پیشنهاد نمی شود چرا که ممکن است باعث اختلالاتی در هنگام استفاده از CDN ها بشود. همچنین اگر کاربر وردپرس هستید پیشنهاد می کنیم که از پلاگین cache-enabler استفاده کنید.
با این همه با استفاده از قانون rewrite نیازی به تغییر نحوه ی بارگذاری تصاویر در HTML نیست. به طور مثال تصویر زیر کاملا مقبول است:
 



1

<img src="image.jpg"alt="Your Image">



برای انجام این کار باید از فایل htaccess. استفاده کنید. برای وب سرور آپاچی:
 



1
2
3
4
5
6
7
8
9
10
11
12

<IfModule mod_rewrite.c>
    RewriteEngineOn
    RewriteCond%{HTTP_ACCEPT}image/webp
    RewriteCond%{DOCUMENT_ROOT}/$1.webp-f
    RewriteRule^(path/to/your/images.+)\.(jpe?g|png)$$1.webp[T=image/webp,E=accept:1]
</IfModule>
 
<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>
 
AddType image/webp.webp



بنابراین زمانی که یک تصویر JPEG یا PNG در مرورگر نمایش داده می شود، با دستور سرور، MIME type ای به نام image/webp میگیرد اما پسوند فایل تغییری نمی کند. سعی کنید کد بالا را در قسمت های ابتدایی فایل htaccess. قرار دهید.
اگر از وب سرور Nginx استفاده می کنید با فایل nginx.conf سر و کار دارید و باید از کد زیر استفاده کنید:
 



1
2
3
4
5
6
7
8
9
10
11
12

# http config block
map$http_accept$webp_ext{
    default"";
    "~*webp"".webp";
}
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


صفر تا صد طراحی آی | درس چهارم (پایانی)
 
در قسمت های اول، دوم و سوم از این مجموعه، سعی بر این بود که ابتدا تاریخچه، دلالیل شکل گیری، اهمیت و سپس مراحل صحیح و اصولی طراحی آی را فرا بگیرید. بسیاری از موارد گفته شده، به طور کامل بازگو نشد و خود مستم مقالاتی مفصل و جداگانه هستند که در آینده اگر عمری باشد، این موارد هم شرح داده خواهند شد. اما در این قسمت به عنوان قسمت چهارم و پایانی این مجموعه قصد داریم بایدها و نبایدها و همچنین مشکلات رایج پیرامون طراحی آی و اصول طراحی آی را بررسی کنیم.
تنها نکته ای که پیش از خواندن آخرین قسمت واجب می‌دانم که به شما همراهان عزیز توصیه کنم، این است که هیچ کدام از مراحل و اصول طراحی آی را نادیده نگیرید و تا آنجایی که درباره آنها سوال در ذهن دارید، جستجو کنید و پاسخ را بیابید. همچنین سوالات و نقطه نظرات خود را می‌توانید از قسمت نظرات در انتهای همین مطلب مطرح کرده و پاسخ خود را دریافت کنید.
4. بایدها و نبایدهای طراحی آیپس از آنکه پروژه، لایه ها و جداول راهنمای خود را به درستی تنظیم کردید، تنها چیزی که باقی می ماند، کار کردن روی آی های واقعی است. حالا بسته به سبکی که می خواهید انتخاب کنید، مسائلی وجود دارند که باید از وجود آنها آگاه باشید.
سادگی را حفظ کنیدما معمولا هنگامیکه چیز جدیدی یاد می گیریم، همواره می خواهیم در بالاترین سطحِ آن رشته کار کنیم و پیچیده ترین سبک هایی را که در آن رشته می شناسیم به کار بگیریم. چرا که تمایل داریم قدرتمان را نشان دهیم!
اگرچه توانایی ترکیب مهارت های شگفت انگیز و متفاوت کار ساده ای نیست، اما توصیه می کنم ابتدا با انجام طرح های ساده شروع کنید، تا بتوانید به تدریج مهارت های خود را به طبیعی ترین شکل ممکن ارتقاء دهید.
فراتر از آن، گاهی اوقات سادگی بهتر است، زیرا ایده اصلی ساخت آی این است که یک موضوع را (خواه یک شیء باشد، یک عملکرد یا یک فکر) به صورتی به تصویر بکشد که هر کاربر بتواند فوراً آن را درک کند.
با اشکال ساده شروع کنیداگر در طراحی یک آی بر به مشکل خوردید، بهترین فکر این است که یک قدم به عقب برگردید و سپس روی طراحی اشکال اساسی (Basic) سوژه تمرکز کنید. چه از مستطیل استفاده کنید، چه از دایره یا هر دو، در هر صورت سعی کنید با تمرکز روی ساخت بخش های اصلی، از اشکال پایه (مستطیل، مربع، دایره) آی خود را بسازید. پس از ایجاد پایه و اساس، می توانید به تدریج جزئیات را به آن اضافه کنید تا به فرم مورد نظر برسید.
روی رنگ ها تمرکز کنیددر بسیاری از مواقع کارهای خارق العاده ای را می بینم که توسط افراد خلاقی ساخته شده است و توجه زیادی به ترکیب بندی داشته اند، اما به دلایلی در استفاده درست از رنگ، شکست خورده اند. باور کنید یا نه، یک پالت رنگی می تواند اثر هنری زیبای شما را ایجاد کرده یا از بین ببرد. به همین دلیل مهم است که وقت بگذارید و تمام آنچه را که می توانید در مورد «تئوری رنگ ها» یاد بگیرید. (در آینده مطلبی را در این باره خواهم نگاشت.) اگر احساس تنبلی می کنید، یا وقت کافی برای خواندن کتاب در مورد این موضوع را ندارید، کافی است چند آی (البته از موارد خوب) را جستجو کنید و روشی را که خالق آن اثر در انتخاب رنگها داشته، ارزیابی و امتحان کنید. گاهی اوقات یادگیری بوسیله دیدن کارهای دیگران می تواند قدرت ذهن را تقویت کند و به ذهن بیاموزد که کدام رنگ مناسب کدام موقعیت است.
از استفاده از متن در آی هایتان خودداری کنیداین مورد هم که نیاز به توضیح ندارد، زیرا کل ایده پشت یک آی، رفع نیاز به حروف نوشته شده است. البته همیشه معدود شرایطی وجود دارد که نیاز داریم از حروف به منظور تمایز یک آی از آی دیگر استفاده کنیم. بهترین مثال زمانی است که شما می‌خواهید یک بسته آی با فرمت های مختلف فایل ها را طراحی کنید و باید بواسطه آی ها فایل PNG ،JPEG و SVG را نشان دهید. از آنجا که شکل سند (فایل) در پس زمینه آی باید یکسان باقی بماند، بهترین رویکرد شما برای انجام این کار این است که یک نوشته کوچک به هر سند اضافه کنید تا به کاربر اطلاع دهید کدامیک از فرمت ها مدنظر شماست.
5. مشکلات رایج در طراحی آیدر این فاز می خواهیم به سرعت برخی از رایج ترین مشکلاتی را که هنگام کار بر روی یک آی جدید با آنها روبرو می شوید بررسی کنیم.
چرخش اشکال (shape ها)این مورد احتمالاً آزاردهنده ترین کار هنگام کار روی یک آی پیکسل پرفکت است، زیرا هر زمان که می خواهید یک شکل را بچرخید، ممکن است تمامی گوشه های آن به خطوط راهنما نرسد. به زبانی ساده تر مقادیر عرض و ارتفاعِ شکل به مقادیری اعشاری تبدیل می شوند، که معمولاً توسط پنل Transform نرم افزار قابل مشاهده است.
اتفاقی که هنگام چرخاندن اشکال در محیط Pixel-Perfect می افتد
ممکن است فکر کنید که این مسئله خیلی بزرگی نیست، اما خیلی زود متوجه خواهید شد که در واقع مسئله بزرگی است، چرا که اگر شما نیاز به چسباندن یا تراز کردن یک شکل به لبه شکل دیگر داشته باشید، به سادگی قادر نخواهید بود این کار را با شکلی که مقادیر آن اعشاری است در محیط Pixel-Perfect انجام دهید. بسته به پیچیدگی شکل، اکثر اوقات می توانید با انتخاب جداگانه انکر پوینت ها و چسباندن آنها به محل نزدیکترین خط راهنما، مشکل را برطرف کنید. من شخصاً تمایل دارم از چرخش اشکال اجتناب کنم و فقط در مواقعی که مجبور هستم از آن استفاده کنم، اما در صورتی که مجبور به چرخاندن موردی شوم حتماً تمام تلاش خود را برای جابجایی آن و تطابق آن با شبکه پیکسلی (راهنما) انجام می دهم.
ایجاد سایزهای متنوعبسیار خب، شما توانستید اندازه پایه را برای آی خود ایجاد کنید، اما چگونه می توان اندازه های مختلف از آی را بر اساس اندازه پایه ایجاد کرد؟ خب، این مسئله، مشکل بزرگی نیست و راه حل آن بسیار ساده است، زیرا بیشتر اوقات تنها کاری که باید انجام دهید دو برابر اندازه آی فعلی یا خروجی گرفتن با Scale (اندازه) 200٪ است.
به عنوان مثال، اگر نمادی دارید که 64*64 پیکسل است، می توانید به راحتی با دو برابر کردن مقادیر عرض و ارتفاع آن، به اندازه بعدی یا همان 128*128 برسید.
روش درست برای تغییر اندازه آی ها در ایلوستریتور
6. گرفتن خروجی (Export)ما مراحل اصلی طراحی یک آی را طی کردیم، حالا بیایید کمی وقت بگذاریم و در مورد آنچه که باید هنگام خروجی گرفتن یا Export از آنها آگاه باشیم صحبت کنیم. این قسمت، گرچه ممکن است پیچیده به نظر برسد، اما در واقع بسیار ساده است.
انتخاب فرمت درستاولین کاری که هنگام خروجی گرفتن باید انجام دهید این است که بدانید از چه فرمتی می خواهید استفاده کنید تا طرح نهایی خود را ذخیره کنید. به طور معمول، هنگام ایجاد آی ها، هدف ما این است که آنها را با پس زمینه شفاف (Transparent) استفاده کنیم، تا بتوان از آنها روی یک سطح رنگی استفاده کرد. این ویژگی توسط فرمت های زیر در دسترس است:
GIF
PNG
BMP
TIFF
SVG
از بین این فرمت ها، معمولاً استفاده از PNG به دلیل سازگاری کامل با وب و اندازه های کوچک رواج بیشتری دارد. این بدان معناست که اساساً می توان از آن در هر مکانی استفاده کرد، خواه یک وب سایت باشد، یا یک برنامه دسکتاپ، موبایل، یا حتی یک سند ورد. SVG نیز در حال تبدیل شدن به یک فرمت محبوب برای وب است زیرا یک فرمت مقیاس پذیر است که می توان به صورت شفاف و با حجم ثابت و بسیار کم، بدون تغییر کیفیت، اندازه آن را تغییر داد.
آی ها را بصورت جداگانه ذخیره کنیدوقتی نوبت به خروجی نهائی می‌رسد، این فرایند از یک نرم افزار به نرم افزاری دیگر متفاوت است. برخی با ابزار Export اختصاصی همراه هستند و برخی دیگر هنوز به روشهای سنتی (Save As) تکیه می کنند. مهم نیست که از چه نرم افزاری استفاده می کنید، هدف اصلی این است که اطمینان حاصل کنید که هر آی را به عنوان فایلی جداگانه (و نه تمامی آنها را در قالب یک فایل) ذخیره کنید و چه بهتر اگر آنها را نامگذاری کنید.
مهارت خود را در ساخت آی ها توسعه دهید!بسیار خب، به انتهای این مجموعه رسیدیم. در پایان قویا توصیه میکنم که در صورت تمایل به فعالیت در حیطه طراحی آی، همواره آخرین کارهای طراحان برتر دنیا در این زمینه را ببیند و از آنها الهام بگیرید؛ همچنین آموزش را نیز جدی بگیرید، هیچگاه خود را در هیچ علمی از جمله طراحی آی بی نیاز از یادگیری نبینید و سعی کنید هر روز زمانی را هر چند اندک برای خواندن مقالات، کتاب ها یا ویدئوهای آموزشی در نظر بگیرید.
امیدواریم مجموعه فوق مورد توجه و استفاده شما همراهان عزیز قرار گرفته باشد. در صورتی که درباره هر یک از قسمت ها سوال، انتقاد یا پیشنهادی داشتید می توانید در قسمت نظرات آن را با مطرح کنید. مشتاقانه شنونده تجربیات و نظرات شخصی شما در زمینه اصول طراحی آی آی خواهیم بود.
منبع:روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


آیا تصاویر GIF از رده خارج شده اند؟
 
تصاویر GIF از آن دسته تصاویری هستند که در شبکه های اجتماعی بسیار محبوب شده اند. زمانی که خبری از شبکه های اجتماعی نبود و یا حداقل آنچنان محبوبیتی بین کاربران نداشتند، تصور می‌شد که تصاویر GIF به زودی منسوخ شوند و محبوبیت خود را از دست بدهند چرا که استفاده از آن ها در وب سایت ها به شدت کاهش پیدا کرد. اما با ظهور شبکه های اجتماعی مانند توییتر، فیسبوک و تگلرام و … محبوبیت این نوع تصاویر به شدت افزایش یافت. بنابراین با اطمینان می توان گفت که امکان ندارد فردی در دنیای اینترنت نداند تصاویر GIF چه هستند.
تصاویر GIF عمری طولانی دارند و در سال 1987 اختراع شدند. هدف از اختراع این فرمت تصویری این بود که افراد بتوانند چندین فایل تصویری را در قالب یک فایل و با یک metadata ارسال کنند و هیچ وقت هدف آن در جهت ساخت انیمیشن و این گونه موارد نبود اما مانند بقیه ی چیزهای اینترنتی، مردم آنطوری که دوست داشتند از آن استفاده کردند و در حال حاضر سالهاست که GIF ها یک ابزار انیمیشن به حساب می آیند. حتی با وجود ابزارهای بهتر و مختلف برای نمایش انیمیشن ها، مردم هنوز هم دست از سر GIF ها برنداشته اند!
مسئله ی GIF ها برای ما طراحان وب فرق می کند. از آنجایی که GIF ها بسیار قدیمی هستند، الگوریتم فشرده سازی خوبی ندارند و متاسفانه یک GIF چند ثانیه ای ممکن است چندین مگابایت حجم داشته باشد! در واقع در بعضی از موارد زمان لازم برای دانلود یک گیف بیشتر از طول کل انیمیشن آن است! حتی اگر از سرعت وب سایت خود راضی هستید ممکن است متوجه نشوید که GIF ها چه بار سنگینی برای سرور شما هستند.
کاهش حجم تصاویر GIFاشتباه بزرگی که در برخی از وب سایت ها انجام می شود این است که از GIF های ایستا (با یک تصویر ساده و بدون انیمیشن) استفاده می کنند. اگر در وب سایت خود چنین فایل هایی دارید آن ها را به PNG یا JPEG یا webp تبدیل کنید تا از حجم هر فایل حدود 25 درصد کاسته شود.
 فرمت تصویری Webp قرار است که Jpeg را از میان بردارد!
اگر برخی از تصاویر GIF شما برای سایتتان مهم هستند و همچنان می خواهید از آن ها استفاده کنید باید آن ها را بهینه سازی کنید. راه های مختلفی برای کاهش حجم تصاویر GIF وجود دارد:
1. تغییر سایز و crop تصویر: قاعده ی بسیار ساده ای که همه ی ما می دانیم این است که به طور کلی تصاویر کوچک تر حجم کمتری نیز دارند، بنابراین سریع تر بارگذاری می شوند. از آنجایی که یک GIF مجموعه ای از تصاویر با پسوند GIF است باید برای کراپ کردن یا تغییر سایز، تک تک این تصاویر را تغییر دهید اما جای نگرانی نیست؛ ابزارهای مختلف و رایگانی در سطح اینترنت وجود دارند که این کار را برایتان انجام می دهند.
2. timeline (یا frame rate) انیمیشن را کوتاه کنید: در بسیاری از انیمیشن ها نیازی به تک تک فریم ها نیست بلکه به راحتی می توانیم چندین فریم را از بین فریم های موجود حذف کنیم بدون اینکه کیفیت GIF تغییر کند. توجه داشته باشید که تعداد فریم های بالاتر یعنی روان تر بودن انیمیشن. بنابراین اگر فریم ها را بیش از حد حذف کنید، انیمیشن شما روان نبوده و به اصطلاح lag میزند. ابزارهای ویرایش بسیاری در این زمینه نیز وجود دارد.
3. چگالی رنگی را کاهش دهید: GIF ها مانند تصاویر دیگر می توانند تعداد رنگ های مختلفی را پوشش دهند. شما می توانید با استفاده از ابزارهای ویرایش آنلاین تعداد رنگ های مختلفی را برای فایل خود انتخاب کرده و تا حد ممکن تعداد را کاهش دهید. این کار باعث کاهش سایز فایل می شود.
4. تنظیم transparency: شفافیت یا transparency یعنی عدم وجود داده/پیکسل در قسمتی از تصویر. شما می توانید با ابزارهای ویرایش آنلاین قسمت هایی از GIF ها را شفاف کنید (پیکسل های اضافی را حذف کنید) تا حجم تصویر شما کاهش پیدا کند.
متاسفانه تصاویر گیف قدیمی هستند و طوری طراحی شده اند که فشرده سازی آن ها همیشه با کاهش کیفیت همراه است بنابراین باید حدود فشرده سازی را نگه دارید و از حد معینی خارج نشوید تا کیفیت تصاویر در حد قابل قبولی باقی بماند. با این حال بهینه سازی تصاویر گیف می تواند حدود 30 تا 50 درصد حجم آن ها را کاهش دهد.
جایگزین های فرمت GIFجایگزین های به روز و بهتری برای فایل های GIF وجود دارد که مهم ترین آن ها را در لیست زیر نام برده ایم:
1. فرمت MP4: اگر از نظر فنی به تصاویر گیف نگاه کنید متوجه می شوید که گیف ها در واقع ویدیوهایی بی صدا هستند که حجم زیادی دارند! بنابراین می توانید به جای آن ها از فرمت به روز و بسیار قوی MP4 استفاده کنید و فایل صدای آن ها حذف کنید! با حذف فایل صدا (sound track) حجم فایل های MP4 کوچک تر هم می شود و از آنجا که این فایل ها بسیار به روز تر هستند، الگوریتم فشرده سازی بسیار پیشرفته تری نیز دارند. در برخی از مطالعات و تحقیقات موردی فایل های MP4 در مقایسه با GIF ها تا 95 درصد حجم کمتری داشته اند!
یکی از راه های استاندارد استفاده از انیمیشن های MP4 استفاده از ابزار هایی مانند FFmpeg است؛ با استفاده از FFmpegمی توانید دستور زیر را از ترمینال خود اجرا کرده و فایل های GIF را تبدیل به MP4 کنید:
 



1

ffmpeg-fgif-iinfile.gif outfile.mp4



2. فرمت APNG: این فرمت یکی از نوادگان فرمت PNG است و در واقع نگهدارنده ی تعداد مختلفی فایل PNG می باشد (درست مانند گیف ها). البته APNG از طیف های رنگی مختلف و transparency پشتیبانی می کنند و همچنین الگوریتم فشرده سازی بسیار پیشرفته تری دارند بنابراین انتخاب بسیار بهتری هستند. وضعیت پشتیبانی از این تصاویر در مرورگرهای مختلف به این شکل است:
وضعیت پشتیبانی از APNG
البته از آنجایی که پشتیبانی از این فرمت از همین امسال (2019) آغاز شده است، ممکن است انتخاب بسیار خوبی نباشد.
3. فرمت webp: تصاویر webp از متد های فشرده سازی مختلف برای کاهش حجم تصاویر استفاده می کنند و توسط مرورگر های مختلف نیز پشتیبانی می شود.
4. CSS خالی: بله! اگر از انیمیشن ها فقط برای UI و عناصر کوچک استفاده می کنید استفاده از انیمیشن های CSS و حتی فایل هایی مانند SVG ها بسیار سبک تر، سریع تر، با کیفیت تر و راحت تر از استفاده از گیف ها است.
برخی از وب سایت های فشرده سازی و ویرایش تصاویر:
EzGIF: این وب سایت انواع بهینه سازی ها را برای انواع فرمت های تصویری انجام می دهد. یکی از موارد جالب داشتن ابزار gif maker است که می توانید از ابتدا گیف های خود را به صورت بهینه شده بسازید.
ImageOptim: این ابزار فقط برای سیستم های مک طراحی شده است. این ابزار می تواند تصاویر شما را به طور متوسط بین 60 تا 80 درصد کاهش دهد! همچنین metadata اضافی و color profile های اضافی را نیز حذف می کند تا حجم تصویر کمتر شود.
FILEminimizer Pictures: یک برنامه ی تحت ویندوز است که به شما چهار متد مختلف فشرده سازی را ارائه می کند.
Convertio: یکی دیگر از ابزارهای مشهور فشرده سازی و ویرایش است. این وب سایت از فرمت های مختلف صوتی، ویدیویی و تصویری پشتیبانی می کند و قابلیت تبدیل انواع فرمت ها به هم را دارد.
امیدوارم این مقاله برایتان مفید بوده باشد. با استفاده از تکنیک های معرفی شده می توانید سرعت بارگذاری وب سایت خود را به شدت کاهش دهید.
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


راهنمای جامع کار با متغیرهای CSS
 
 
اکثر زبان های برنامه نویسی و غیر برنامه نویسی از مبحث متغیرها پشتیبانی می کنند و به نوعی آن را در خود گنجانده اند اما متاسفانه CSS (با آنکه یک زبان برنامه نویسی نیست) از همان ابتدای کار هیچ نوع پشتیبانی برای متغیرها نداشته است.
استفاده از متغیرها می تواند کدنویسی را بسیار آسان کند و زمانی که به آن ها عادت کنید دست کشیدن بسیار سخت می شود! به همین دلیل بسیاری از توسعه دهندگان front-end از پیش‌پردازنده هایی مانند Sass و Less و CSS-Crush و Myth و … استفاده میکنند. به زبان ساده، کار این پیش‌پردازنده ها اضافه کردن امکانات جدید و بیشتر (مانند متغیرها) به CSS است تا کار توسعه آسان تر شود.
از آنجا که درخواست برای متغیرهای CSS زیاد شد بالاخره و بعد از سال ها انتظار (چند سال پیش) متغیرها به CSS اضافه شدند. با اینکه پشتیبانی از متغیرها در حال حاضر در حد بسیار خوبی قرار دارد (92 درصد مرورگر ها) اما به طور 100 درصد نیز نمی باشد.
وضعیت پشتیبانی از متغیرهای CSS در مرورگر ها
توسعه دهندگان کم کم به سمت استفاده از این متغیرها می روند و هر روزه پشتیبانی از آن بیشتر می شود بنابراین شما هم کم کم باید به فکر استفاده از آن ها باشید. به طور مثال گوگل کروم از مارس 2016 از متغیرها پشتیبانی میکند و کمتر کسی است که از سال 2016 مرورگر خود را آپدیت نکرده باشد!!!
متغیرهای CSS به دو نام زیر شناخته می شوند:
CSS Variables
CSS Custom Properties
دلایل اهمیت متغیرهادلایل متعددی برای استفاده از متغیرهای CSS وجود دارد از جمله:
کد خواناتر: با استفاده از متغیرها کدهای ما بسیار خواناتر و نگهداری از آن ها نیز بسیار راحت تر می شود.
راحتی در ایجاد تغییر: اگر تمام متغیرهای خود را در یک قسمت ذخیره کرده باشید دیگر نیازی به اینطرف و آنطرف پریدن بین چندین هزار خط کد را ندارید بلکه به راحتی میتوانید در پروژه های بزرگ تغییرات دلخواهتان را ایجاد کنید.
اشکال‌زدایی راحت تر: فرض کنید بین چند هزار خط کد CSS به خطایی برخورد کرده اید! در بسیاری از این موارد، خطا فقط به خاطر یک اشتباه املایی است و پیدا کردن آن اشتباه واقعا آزاد دهنده است (پیدا کردن یک کاراکتر جا به جا مثل magrin به جای margin). اگر از متغیرهای CSS به شکل صحیح استفاده شود میتوانیم این مشکل را نیز حل کنیم.
در این مجموعه مقاله ی چند قسمتی میخواهیم با متغیرهای CSS آشنا شده و یک یا دو پروژه را هم با استفاده از آن ها بسازیم.
تعریف و استفاده از متغیرها در CSSبگذارید با مقایسه با جاوا اسکریپت شروع کنیم. در جاوا اسکریپت متغیرها به این شکل تعریف می شوند:
 



1

varamAwesome;



سپس می توانید به آن ها یک مقدار خاص بدهید:
 



1

amAwesome="awesome string"



در زبان CSS متغیرها با دو علامت dash (خط فاصله) مشخص می شوند بنابراین هر خصوصیت (property) که با دو علامت خط فاصله شروع شود یک متغیر محسوب می شود. مثال:
 



1

.block{color:#8cacea;--color: blue}



تعریف متغیرهای CSS
از طرف دیگر متغیرها در جاوا اسکریپت دارای scope هستند (سراسری یا محلی). ما می توانیم چنین چیزی را برای متغیرهای CSS نیز در نظر بگیریم. مثال زیر را در نظر بگیرید:
 



1

:root{  --main-color:red}



root: به شما اجازه میدهد که بالاترین عنصر در درخت DOM را هدف قرار دهید بنابراین متغیرهایی که به این شکل تعریف شوند دارای scope سراسری (global) هستند.
تفاوت scope در متغیرهای CSS
تصویر کنید می خواهید یک متغیر بسازید که رنگ اصلی یک وب سایت را درون خود داشته باشد. چطور باید این کار را انجام داد؟ از آنجا که رنگ اصلی سایت در اکثر قسمت های سایت وجود دارد بهتر است آن را به صورت سراسری تعریف کنیم:
 



1

:root{}



حالا خود متغیر را تعریف می کنیم:
 



1

:root{--primary-color:red}



حالا که متغیری را تعریف کرده ایم می توانیم از آن استفاده کنیم اما نکته ای وجود دارد. اگر قبلا با پیش‌پردازنده های CSS کار کرده باشید احتمالا تصور میکنید که روش استفاده از متغیرها مانند همان پیش‌پردازنده ها است:
 



1

$font-size:20px.test{  font-size:$font-size}



اما اینطور نیست. برای استفاده از متغیرهای تعریف شده ی CSS باید از تابع ()var استفاده کنید. بنابراین اگر مثال بالای خودمان را ادامه بدهیم میگوییم:
 



1

مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


تست سرعت صفحات وب: مدل RAIL چیست؟
 
همانطور که می دانید راه های بسیار مختلفی برای تست سرعت سایت و صفحات وب وجود دارد و مدل های مختلفی برای تحلیل و نگاه به مفهوم سرعت معرفی شده اند؛ به طور مثال آیا سرعت به خودی خود برایم مهم است؟ به چه قیمتی؟ آیا کیفیت تصاویر برایم مهم است؟ آیا کیفیت تصاویر برای من مهم تر از سرعت است؟ و هزاران سوال دیگر…
خوشبختانه مدل ارزیابی سرعت RAIL روشی جامع و کامل برای بررسی سرعت صفحات وب و کارایی آن ها محسوب می شود.
مدل RAIL چیست؟همه می دانیم که پایین آوردن سرعت بارگذاری صفحات وب بسیار مهم است و نقش اصلی را در کاهش 1bounce rate ایفا می کند اما این کار فقط نیمی از مشکل را حل می کند. قسمت اعظم زمان کاربران، صرف صبر کردن برای دریافت پاسخ input ها و… از سایت شما می شود. بنابراین اگر می خواهید کاربرانتان راضی بوده و سایت را ترک نکنند باید وب سایت شما دائما سریع باشد! این همان کاری است که مدل RAIL انجام می دهد؛ مدل RAIL تمام جوانب مفهوم سرعت را مورد بررسی قرار می دهد نه تنها سرعت سرور شما را!
1- تعریف Bounce rate: به معنی «نرخ پرش» یا «نرخ بازگشت» است. در حالت کلی یعنی درصد بازدید کنندگانی که تنها از یک صفحه از وب سایت شما بازدید می کنند. به عبارت دیگر این ها بازدید کنندگانی هستند که از گوگل وارد سایت شما می شوند و پس از دریافت یا عدم دریافت جوابشان از سایت شما خارج می شوند و به صفحه ی دیگری نمی روند. اما در دنیای وب تاکید روی حالتی است که کاربر وارد سایت شما شود و سایت شما آنقدر دیر بالا بیاید که کاربر از بازدید منصرف شود.
RAIL مخفف عبارت «Response, Animation, Idle and Load» است. در واقع بر اساس مدل RAIL تعاملات کاربران شما با سایت به چهار دسته تقسیم می شود:
مفهوم «سرعت» در نگاه مدل RAIL
مدل RAIL توسط یک توسعه دهنده به نام آقای Paul Irish در سال 2015 معرفی شد و گوگل نیز این سیستم را مقبول می داند و در کدنویسی هایش از آن استفاده می کند. بیایید این چهار جنبه از مدل RAIL را بررسی کرده و بنچ‌مارک پیشنهادی توسط گوگل را نیز ببینیم:
Response: سرعت پاسخ دریافتی از سرور؛ در واقع این مورد یعنی سرعت وب سایت شما در پاسخ دادن به input (ورودی) کاربران چقدر است. سرعت پاسخ زیر 100ms (صد میلی ثانیه) بهترین حالت و در واقع حالت ایده آل است. هر زمانی بیشتر از این مقدار، توجه کاربر را جلب خواهد کرد.
Animation: سرعت انیمیشن ها، اسکرول کردن و Drag کردن عناصر در سایت شما؛ حالت ایده آل این مورد 60fps (شصت فریم بر ثانیه) یا یک فریم به ازای هر 16ms است.
Idle: مربوط به اتفاقات پشت صحنه است؛ یعنی زمانی که صفحه بارگذاری شده اما ممکن است سرور در پس زمینه در حال پردازش باشد. این نوع پردازش ها باید به قسمت های 50ms تقسیم شوند تا سرعت response را پایین نیاورند.
Load: سرعت بارگذاری صفحات در مرورگر کاربر؛ این مورد همان 2First meaningful paint است که باید در کمتر از یک ثانیه پس از ارسال درخواست به سرور نمایش داده شود.
2- به طور خلاصه First meaningful paint عبارتی است که توسط گوگل ساخته شده است؛ First meaningful paint مقدار زمانی است که طول می کشد تا محتوای اولیه ی یک وب سایت نمایش داده شوند. متاسفانه قسمت developers سایت گوگل برای ایران تحریم است؛ برای تست اطلاعات باید این تحریم را دور بزنید.
درک کاربران از سرعت تغییر کرده استانسان ها در طبیعت خود موجودات بی‌تاب و بی صبری هستند. این موضوع در دنیای وب بسیار بدتر شده است! در واقعآستانه ی تحمل کاربران امروزی حدود 1 ثانیه است و اگر وب سایت شما برای نمایش محتوا بیشتر از 1 ثانیه زمان نیاز دارد به احتمال زیاد بسیاری از کاربران آن را رها خواهند کرد.
البته این آستانه ی تحمل بستگی به نوع کاربران نیز دارد؛ بر اساس گزارشات Google DoubleClick کاربرانی که از اتصالات 3G استفاده می کنند آستانه ی تحمل بیشتری دارند و تا 3 ثانیه نیز صبر می کنند اما کاربران دسکتاپ تحمل بیشتر از 1 ثانیه را ندارند! بنابراین شما نمی توانید همه ی کاربران را راضی کنید اما استفاده از مدل RAIL قطعا به بهبود سایت شما کمک خواهد کرد.
اهداف خود را تعیین کنیدحالا که می دانید مدل RAIL چیست و چه فاکتورهایی را بررسی می کند باید به فکر تعیین اهداف واقع بینانه باشید. اگر نمی توانید هزینه ی سرور های خوب را بدهید و از سرورهای اقتصادی استفاده می کنید، اهدافتان را طوری تعیین کنید که از داشته هایتان بهترین استفاده را ببرید. اما اگر منابع سیستمی شما محدود نیست و سرورهای خوبی دارید می توانید از پیشنهادات گوگل استفاده کنید:
1. پاسخ های شما به کاربران زیر 50ms باشد: راهنمای توسعه دهندگان گوگل پیشنهاد می دهد که وب سایت شما باید در کمتر از 50ms به درخواست های کاربران واکنش نشان دهد. شاید این مقدار خیلی سریع به نظر بیاید ولی اگر هدفتان را روی 50ms قرار دهید، اطمینان خواهید داشت که تعاملات کاربر با سایت به صورت لحظه ای می باشد و رضایت کامل کاربر را خواهید داشت.
حتی اگر نمی توانید سرعت پاسخ سرور را روی 50ms تنظیم کنید به کاربر اعلام کنید که درخواستش را دریافت کرده اید. مثلا اگر کاربر روی دکمه ای کلیک کرد و سرور شما 150ms زمان برای پاسخ به آن لازم دارد باید به نحوی به کاربر اعلام کنید که درخواستش را دریافت کرده اید؛ مثلا ظاهر و رنگ دکمه را تغییر دهید یا از علامت loading و صفحات چرخان آن استفاده کنید.
2. فریم های انیمیشن خود را زیر 10ms تعریف کنید: در نگاه مدل RAIL، اسکرول کردن، زوم کردن، drag کردن و … همگی جزئی از انیمیشن ها هستند. اگر می خواهید به 60fps برسید، برای نمایش هر فریم 16 میلی ثانیه زمان دارید اما مرورگرها به طور طبیعی 6ms برای render کردن انیمیشن زمان لازم دارند بنابراین برای شما فقط 10ms باقی می ماند. به هر حال، چه به این هدف برسید و چه نرسید، باید سعی کنید سرعت انیمیشن را در سراسر وب سایت خود ثابت نگه دارید.
3. بیشترین استفاده را از زمان Idle داشته باشید: برای رسیدن به 50ms باید از زمان idle (زمان بیکاری سرور) بهترین استفاده را ببرید. سعی کنید ابتدا محتوای اصلی و در دید کاربر را بارگذاری کنید و سپس به بارگذاری بقیه ی اجزای صفحه بپردازید. البته این مسئله نباید response time (فاکتور اول) را پایین بیاورید چرا که در غیر این صورت دیگر به افزایش سرعت کمک نخواهد کرد.
4. صفحات خود را در کمتر از 5 ثانیه تعامل پذیر کنید: بر اساس تحقیقات گوگل، کاربران باید بتوانند تا حداکثر 5 ثانیه پس از ثبت درخواست URL سایت شما در مرورگر خود، با سایت شما تعامل داشته باشند؛ گوگل می گوید در مقایسه با وب سایت های کُند و کم سرعت، وب سایت هایی که در 5 ثانیه تعاملات کاربر را قبول کنند و به آن واکنش دهند حدود 70 درصد ماندگاری کاربر بیشتری داشته، مقدار bounce rate آن ها35 درصد کاهش و مقدار بازدید از تبلیغاتشان 25 درصد افزایش داشته است. همچنین استفاده از متدهای cache برای کش کردن محتوا و کاهش زمان بارگذاری بسیار مفید است.
شما می توانید برای اندازه گیری سرعت سایت خود از ابزارهایی مانند Google Lighthouse و WebPageTest استفاده کنید تا به طور دقیق سرعت کار وب سایت خود را داشته باشید.
این ها پیشنهادات گوگل هستند اما ما می توانیم پیشنهادات بیشتری را به آن اضافه کنیم:
مخاطب خود را بشناسید: زمانی که هدفتان را تعیین می کنید باید مخاطبین خود را در نظر بگیرید. آیا مخاطبین شما محلی هستند یا به عبارت دیگر آیا کسب و کار شما محلی است؟ در کشور شما مردم چه نوع اینترنتی دارند؟ و این دست از سوالات…
حواستان به تکنولوژی های جدید باشد: هر ساله تکنولوژی های جدیدی وارد بازار توسعه ی وب می شوند. سعی کنید آن ها را دنبال کنید تا اگر به تکنولوژی جالبی رسیدید از آن در سایت خود استفاده کنید و سرعت سایت را بالاتر ببرید.
به روزرسانی کنید: باید بدانید چه زمانی سرورهایتان قدیمی شده اند و نیاز به به روزرسانی دارند، باید بدانید چه زمانی نسخه های جدید یک زبان برنامه نویسی مانند PHP معرفی شده اند و از آن استفاده کنید، باید بدانید جه تکنولوژی های جدیدی وارد بازار شده اند تا سایت خود را با آن ها هماهنگ کنید.
همیشه اولویت خود را روی Critical Rendering Path بگذارید. قبلا در رابطه با Critical Rendering Path یا مسیر ضروری رندرینگ صحبت کرده ایم، بنابراین می توانید به مقاله ی مربوطه مراجعه کنید.
پیدا کردن مشکلات تمام راه نیست: بله تشخیص و پیدا کردن مشکلات بخش مهمی از کار ما است اما بخش مهم تر آن از بین بردن این مشکلات و فرآیند بهینه سازی سایت است! بنابراین به دنبال راه حل های جدید و به روز باشید و با توسعه دهندگان با تجربه م کنید.
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


آیا Chatbot ها آینده ی کسب و کارها هستند؟
t ها از روش های اثبات شده و بسیار مناسب برای ارائه ی خدمات به مشتریان می باشند چرا که سریع هستند، 24 ساعته در دسترس هستند و امکان ندارد برخورد بدی با مشتری داشته باشند. حتی خود مشتریان نیز chatbot ها را ترجیح می دهند چون نسبت به انسان ها بسیار سریع تر هستند و جواب را به صورت دقیق و در لحظه ارسال می کنند. به همین دلیل کسب و کارهای زیادی در حال اضافه کردن chatbot به لیست خدمات خود هستند و توسعه و پیشرفت شان را به حد بسیار بالایی رسانده اند؛ تا حدی که حالا chatbot ها می توانند پیتزا سفارش دهند، بلیط هواپیما رزرو کنند و …
chatbot چیستchatbot ها برنامه های نرم افزاری هستند که طراحی شده اند تا بتوانند رفتار انسان ها را در خدمت رسانی تقلید کنند و به سوالات یا درخواست های مشتریان پاسخ مناسبی بدهند. chatbot ها می توانند به صورت شنیداری و صوتی باشند (مانند اکثر chatbot های دنیا؛ مثل Google Assistant, Siri, Amazon Alexa و…) و یا متنی باشند (مانند Facebook, Skype, Slack). با اینکه ایده ی chatbot ها ظاهری جدید دارد اما در اصل متعلق به دهه 1950 است؛ در آن زمان Alan Turing مقاله ای به نام “Computing Machinery and Intelligence” منتشر کرد و از آن پس مفهوم chatbot ها راه خود را تا به حال ادامه داده است و هر سال پیشرفته تر شده است.
کار chatbot معمولا پردازش و تفسیر کلمات کاربر و ارائه ی پاسخ مناسب است اما برخی از chatbot ها آنقدر پیشرفته شده اند که از فرآیند یادگیری ماشینی استفاده می کنند تا اطلاعات قبلی کاربر و درخواست های او را نیز به یاد داشته باشند و در صورت نیاز از آن ها استفاده کنند تا بتوانند پاسخ های دقیق تر و طبیعی تری ارائه کنند. یکی از مثال های بارز این نوع از chatbot ها Google Duplex است که در Google I/O معرفی شد.
مزایای chatbot1- آسان سازی فرآیند ثبت سفارش: chatbot ها می توانند در فرآیند ثبت سفارش به کاربران کمک کنند. آن ها حتی می توانند مانند انسان ها پیشنهاداتی به کاربر بدهند تا در صورت تمایل، آن ها را قبول کند. از بهترین مثال ها در این زمینه می توان به Starbucks, Pizza-hut, Dominos, و Lyft اشاره کرد. ویدیوی زیر مثالی از ثبت سفارش در Starbucks (شرکت عظیم ثبت انواع نوشیدنی ها) است:
نمایشگر ویدیو
 
 
00:00
 
00:47
 
 
 
2- پاسخ لحظه ای: شاید بهترین مزیت chatbot ها این است که مشتری می تواند در هر زمانی از شبانه روز و در لحظه جواب خود را بگیرد. بر اساس یکی از تحقیقات انجام شده، رایج ترین دلیل استفاده از chatbot ها (با 37 درصد آرا) سرعت در پاسخگویی (مخصوصا در شرایط اضطراری) بوده است. سپس 35 درصد از آرا مربوط به حل مشکلات یا اختلافات بوده است. نتایج این تحقیق را در تصویر زیر مشاهده می کنید:
برخلاف چت با پشتیبانی یا تماس با دفاتر خدمات که ممکن است همیشه در دسترس نبوده و یا صبر زیادی برای جواب دادن بخواهند، chatbot ها همیشه در دسترس هستند و به سرعت پاسخ می دهند.
3- chatbot ها به همراه پیام رسان ها به سرعت رشد می کنند: برنامه های پیام رسان از رایج ترین نرم افزارها بین کاربران هستند و بیشتر وقت کاربران را نیز به خود اختصاص می دهند. معمولا اگر به اپ استورها مراجعه کنید، پیام رسان ها همیشه در لیست تعداد دانلودهای بسیار بالا هستند بنابراین اگر chatbot خود را روی یک پیام رسان پیاده سازی کنید می توانید با مشتریان خود در جایی که راحت هستند، صحبت کنید. به طور مثال Facebook Messenger به صورت ماهانه حدود 1.2 میلیارد کاربر فعال دارد:
تعداد کاربران فعال پیام رسان فیسبوک
اگر شما یک chatbot برای این پیام رسان بسازید، حجم ترافیک بسیار بالای آن به شما کمک خواهد کرد که کسب و کارتان را به شدت گسترش دهید. البته پیام رسان فیسبوک در ایران آنقدرها طرفدار ندارد و تمرکز اصلی شما در ایران باید روی نرم افزارهایی مانند تلگرام باشد.
4- تعامل فعال با کاربر: برخلاف اکثر کسب و کارها که تعامل غیرفعالی با مشتریان خود دارند، استفاده از chatbot ها باعث می شود که تعامل شما با کاربر فعال باشد. یعنی به جای اینکه در جای خود بنشینید تا کاربر به سمت شما بیاید، chatbot به محض ورود کاربر به او خوش آمد می گوید و اگر سوالی داشت، سوالاتش را پاسخ می دهد. اگر در همان ابتدای کار به سوالات کاربر پاسخ داده شود و همچنین کاربران سایت ما احساس راحتی داشته باشند، احتمال استفاده از خدمات ما و فروش به آن ها بسیار بیشتر می شود.
5- تحلیل پاسخ مشتریان و اطلاعات چت ها: برای هر کسب و کاری که بخواهد اطلاعات چت ها و نظر و پاسخ مشتری را درباره ی محصولات خود بداند، استفاده از chatbot کمک بسیار بزرگی خواهد بود. به طور مثال chatbot ها می توانند اطلاعات ارزشمندی در مورد پرتکرار ترین سوالات و درخواست های کاربران یا بیشترین نقد وارده با محصولات شما را ارائه دهند. chatbot ها می توانند به شما بگویند کاربران در کدام صفحات بیشترین سوال را کرده اند تا بدانید کدام صفحات به طراحی بهتری نیاز دارند و حتی chatbot هایی که از یادگیری ماشینی استفاده می کنند می توانند داده ها و رفتار کاربران را تحلیل کنند و اطلاعات ارزشمندی را از آن ها استخراج نمایند. اکثر کاربران از شرکت در نظر سنجی ها بیزار هستند اما با chatbot نیازی به شرکت در چیزی نیست و رفتار کاربر به سادگی تحلیل می شود.
به احتمال زیاد chatbot ها (به هر شکلی) آینده ی دنیای کسب و کار خواهند بود. همه ی ما فیلم های علمی تخیلی را دیده ایم که در 500 سال آینده مردم با ربات ها حرف می زنند و نیازهایشان را از طریق آن ها برطرف می کنند، بنابراین چنین مفهومی ایده ی جدیدی محسوب نمی شود، بلکه ذهن ما از قدیم الایام به سمت کار با ربات ها پیش می رفته است. البته باید اذعان کرد که ساخت chatbot ها کار بسیار سختی است و شاید برای کسب و کارهای کوچک توجیهی نداشته باشد.
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


۸ نکته برای ارتقا Push Notification های شما
 
امروزه Push Notification ها همه جا هستند و بسیار رایج شده اند. Push Notification ها پیام هایی هستند که یک وب سایت یا برنامه ی اندروید و یا ios به مرورگر یا گوشی شما می فرستد؛ محتوای این پیام ها نیز اکثرا تبلیغاتی می باشد. شاید با دیدن تصویر زیر متوجه معنی Push Notification شده و یادتان بیاید که شما هم قبلا ده ها بار از این دست پیام ها را دریافت کرده اید:
Push Notification ها در گوشی های هوشمند و مرورگر های وب
البته این Notification ها می توانند به شکل زیر نیز باشند:
Push Notification در گوشی های اندرویدی
متاسفانه یا خوشبختانه! ده ها نوع مختلف از Push Notification ها وجود دارند که بر اساس ظاهر و مسائل دیگر تقسیم بندی می شوند. به طور مثال برخی از Push Notification ها می توانند همراه خودشان تصویر یا آیی را به همراه داشته باشند و برخی دیگر تنها متنی خالی هستند اما فارغ از نوعشان، زمانی که یک Push Notification دریافت می کنید یکی از سه حالت زیر رخ می دهد:
1- به محض دیدن Push Notification، آن را نادیده می گیرید.
2- سریعا نرم افزاری را که باعث ارسال Push Notification به گوشی شما شده را حذف می کنید چرا که از نظرتان بسیار آزار دهنده است.
3- Push Notification را چک می کنید و در مقابلش عکس العملی نشان می دهید (یعنی به نوعی نظرتان را جلب می کند).
از بین این سه حالت، باید سعی کنیم تا برنامه ی ما (چه تحت وب و چه برنامه های اندرویدی) هیچ گاه جزو دسته های اول و دوم نباشد چرا که این دو دسته باعث آزار بسیاری از کاربران می شوند. در واقع Push Notification ها به خودی خود باعث آزار و ناراحتی کاربران هستند اما اگر به 8 قانون زیر در این زمینه عمل کنید می توانید این اذیت و آزار را کم تر کنید تا جایی که به دسته ی سوم برسید و نظر مخاطب را جلب کنید.
1. خلاق باشیدخلاقیت در تبلیغات از مولفه های اصلی هر بازاریابی و تجارتی است و Push Notification ها نیز جدا از دنیای بازاریابی نیستند. درس اول در بازاریابی این است که برای جلب توجه مشتری باید خلاق باشید، باید چیزی ارائه دهید که مشتری مشابه آن را هرگز ندیده باشد! متاسفانه در ایران باب شده است که یک تکه پیام ساده را به صد ها هزار تلفن همراه می فرستند و انتظار دارند بازخورد خوبی دریافت کنند. حتما شما هم این پیام ها را دیده اید؛ «10 گیگ اینترنت رایگان برای شما» یا «شما برنده ی ساعت رولکس شدید!» و از این دست پیام های بی معنی و خالی از خلاقیت. به Push Notification زیر نگاه کنید:
یک Push Notification خلاق
تصویر بالا می گوید: «حدس بزن کدوم یکی از این لیوان های شراب هفته پیش در کاخ سفید سرو شده است!» همانطور که میبینید زمانی که صحبت از خلاقیت می کنیم، منظورمان چیز زیادی نیست بلکه یک متن طنز و یا چیزی که توجه مخاطب را جلب کند برای ما کافی است.
2. تحریک هیجاناتسعی کنید هیجان و احساسات مخاطب را برانگیزید. بر اساس تحقیقات انجام شده هر احساس مثبتی مانند هیجان، خنده، شادی و … باعث واکنش مشتریان بیشتری می شود و به کسب و کار شما رونق می بخشد. به طور مثال اگر میزبان رویداد خاصی هستید، یا قصد دارید طی یک حراجی تخفیفات خاصی را ارائه دهید، یا حتی چند کالای رایگان نیز بین کاربران پخش کنید، بهتر است Push Notification ای را به کاربرانتان ارسال کنید تا با تخفیفات رنگ و لعاب دار آن ها را تحریک به خرید و … کنید. مثال زیر از فروشگاه های آمازون و Best Buy است:
Push Notification های آمازون و Best Buy
آمازون در این Push Notification می گوید «پیشنهاد ویژه امروز: 50 درصد تحفیف در اسباب بازی های نوزادان و کودکان پیش دبستانی» و Best Buy نیز می‌گوید: «پیشنهاد ویژه ی امروز را ببینید. تعداد بسیار محدود» این نوع جملات کاربر را تحریک می کند تا تخفیف های روز را چک کند.
3. شخصی سازی کنیدیکی از اشتباهات اصلی بسیاری از مدیران تبلیغات این است که یک متن ساده و یکسان را برای تمام کاربرانشان ارسال می کنند. این نوع از Push Notification ها هیچ فرقی با ایمیل های spam و پیامک های بی محتوا ندارند. در واقع بر اساس یک نظر سنجی 78 درصد کاربران این احساس را داشته اند که Push Notification های دریافتی شان هیچ ربطی به آن ها و کارشان ندارد.
از طرفی شخصی سازی پیام برای هر کاربر، حس درگیر شدن و شریک بودن کاربر در برنامه را می دهد. سعی کنید در صورت امکان از اطلاعات کاربران مانند نام، سن موقعیت جغرافیایی، تفریحات، سابقه ی خری و … استفاده کنید تا پیامی خاص برای کاربرانتان ارسال کنید. این نوع بانک های اطلاعاتی را می توانید از شرکت های تبلیغاتی معتبر دریافت کنید.
مثالی از شخصی سازی Push Notification
این پیام می گوید: «سلام تینا، یک عدد دامن طرح آفریقایی رو در سبد خریدت جا گذاشتی. میتونی برگردی و خرید رو تکمیل کنی.» تنها با استفاده از نام تینا باعث می شوید که کاربر حس خاص بودن کند و نه اینکه این پیام به هزاران نفر نیز ارسال شده است (گرچه که می دانیم تنها نام تغییر می کند اما از حالت ساده بهتر است).
4. از زمان و مکان بهره ببریداطلاعات مکانی و جغرافیایی به همراه اطلاعات رفتاری کاربران شما، می تواند باعث تولید بهترین Push Notification ها شود! اگر برنامه ی شما به موقعیت مکانی کاربر دسترسی دارد و کاربر این اجازه را به شما داده است، از اطلاعات مکانی او استفاده کنید تا Push Notification هایی را به او ارسال کنید که کاربردی باشند؛ به طور مثال تحفیف یک رستوران که نزدیک کاربر ما باشد. مثال دیگر استفاده از موقعیت مکانی و آب و هوایی کاربر برای فروش محصولاتتان است (مثلا فروش زنچیر چرخ در زمان بارش سنگین برف). حتی زمان هم فاکتور مفیدی محسوب می شود؛ به طور مثال نرم افزار پخش موسیقی شما می تواند در صبح ها به کاربران پیشنهاد موسیقی های انگیزشی یا آرامش بخش را بدهد. بنابراین روش های استفاده از این نوع اطلاعات بسیار زیاد است و تصمیم گیری بر عهده ی شما و تیم تبلیغاتی تان!
5. به کاربر احساس خاص بودن بدهیدهمه ی ما دوست داریم که فرد خاصی باشیم و اگر کسی یا چیزی این حس را به ما بدهد ما عاشق آن فرد یا چیز می شویم. شما نیز می توانید از طریق Push Notification ها به کاربران خود احساس خاص بودن بدهید! به طور مثال می توانید پیشنهادات خاصی برایشان بفرستید که به دیگر کاربران نمی فرستید، به برخی از آن ها تخفیفاتی بدهید که به هر کسی نمی‌دهید، بعضی از آن ها را در جریان فعالیت های شرکت بگذارید و …
زمانی که کاربر می بیند شما به او اهمیت می دهید و پیشنهاد خاصی را برای او ارسال کرده اید، بسیار خوشحال می شود و یا حداقل از این کارِ شما (حتی در ذهن خود) قدردانی می کند و بدین ترتیب احتمال واکنش کاربر به Push Notification بالا می رود که در نهایت باعث رونق کسب و کارتان می شود.
6. از کاربران سوال بپرسیدیکی از بهترین راه های ارتباط با کاربران و درگیر کردن آن ها پرسیدن سوالات مختلف است. البته این سوالات باید طبیعت تعجب برانگیز یا جالب توجهی داشته باشند تا کاربر را درگیر کنند و سوالات خسته کننده تنها باعث دور شدن کاربر از شما خواهد شد. از آن جا که پرسیدن سوالات و مطرح کردن تست ها باعث تحریک کنجکاوی شده و واکنش انسان ها را برمی انگیزد، Push Notification هایی از این دست باعث درگیری بیشتر کاربر با تبلیغات شما خواهند شد. حتی اگر کاربر درگیر تبلیغات شما نشود ممکن است کنجکاوی اش لحظه ای برانگیخته شود و در حد چند ثانیه به سوال شما فکر کند. این مسئله باعث می شود که این سوال و فرد سوال کننده در ذهن کاربر باقی بماند و در دفعات بعد باعث باز شدن برنامه یا Push Notification شود.
7. از تصاویر و ایموجی ها استفاده کنیدزمانی که در دنیای واقعی با کسی ارتباط دارید، طرف مقابل می تواند در هنگام حرف زدن از حرکت دست ها و شکل صورت شما متوجه بسیاری از مسائل بشود اما در دنیای مجازی چنین قابلیتی وجود ندارد و عموما متن های ساده ی ما بی روح هستند. تصاویر و ایموجی ها و دیگر اشکال گرافیکی باعث می شوند کمی از این ارتباط و روح از دست رفته به پیام شما بازگردد و توجه کاربر را به خود جلب کند. حتی می توانید با استفاده از ایموجی ها متنی را خلاصه تر کرده و یا به شکل رمز گونه آن را بنویسید تا کنجکاوی کاربر را برانگیزید. در چنین مواقعی کاربر سعی می کند تا پیام مخفی شده را پیدا کند و اگر موفق شود حس خوبی به او دست می دهد.
یکی از بهترین مثال ها، بیلبورد زیر برای تبلیغ فیلم Deadpool می باشد:
بیلبورد تبلیغاتی فیلم Deadpool
8. راه حل ارائه دهیداگر Push Notification های شما به قول خودمانی دردی از درد های کاربران را دوا کنند، بسیار جلب توجه خواهند کرد. به عبارت دیگر Push Notification های شما باید کاری واقعی انجام دهد؛ حالا این کار چه سرگرم کردن باشد، چه ارائه ی خدمات باشد، چه حل مسئله باشد و… به طور مثال اگر یک نرم افزار تقویم دارید در مورد تعطیلات و یا مناسبت ها و یا قرارداد های کاری Push Notification ارسال کنید و یا با استفاده از اطلاعات Google Maps یا نرم افزارهای GPS دیگر، اطلاعاتی را راجع به وضعیت ترافیک جاده ها ارسال کنید. بسیاری از نرم افزارهای ورزشی به کاربران می گویند که وقت نوشیدن آب است یا مثلا وقت ورزش است و… این نوع اطلاعات کاربردی می تواند به کاربران کمک زیادی کند.
 
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


الگوریتم گوگل چند بار در سال به روز رسانی می شود؟
در سال 20 گوگل اعلام کرد که 3234 تعداد بروز رسانی را روی موتور جست و جوی خود پیاده کرده است! این مقدار حدود 8 برابر عددی است که در سال 2009 اعلام کرده بودند. برای رسیدن به چنین عددی باید در روز 9 بروز رسانی انجام داد! بروز رسانی های گوگل در چند سال اخیر چطور بوده اند؟ چطور می توانیم آن ها را زیر نظر بگیریم؟ آیا این کار شدنی است؟
برای درک بهتر، لیستِ تعداد بروز رسانی هایی را که از نظر صحت و سقم تایید شده اند، گرد آوری کرده ایم (منابع در آخر مقاله ذکر خواهند شد):
20 – 3,234 “improvements”
2017 – 2,453 “changes”
2016 – 1,653 “improvements”
2013 – 890 “improvements”
2012 – 665 “launches”
2011 – 538 “launches”
2010 – 516 “changes”
2009 – 350–400 “changes”
متاسفانه برای سال های 2015-2014 داده های تایید شده ای نداریم به جز حدس و گمان و برخی از شایعات کلی.
تاریخچه ای از تعداد بروز رسانی هااولین داده ای که از این نوع به دست ما رسید، در سال 2010 و توسط Matt Cutts revealed بوده است. به گفته ی او گوگل هر ساله 350 تا 400 بروز رسانی و تغییر ایجاد می کند. درست است که این عدد دقیق دقیق نیست اما متخصصین سئو تغییرات گوگل را دنبال می کردند و این عدد برایشان عدد بسیار بزرگی بود.
سپس در پاییز 2011 آقای Eric Schmidt به کنگره احضار شد و اولین داده ی دقیق از تغییرات و به روز رسانی ها را به ما ارائه کرد:
To give you a sense of the scale of the changes that Google considers, in 2010 we conducted 13,311 precision evaluations to see whether proposed algorithm changes improved the quality of its search results, 8,157 side-by-side experiments where it presented two sets of search results to a panel of human testers and had the evaluators rank which set of results was better, and 2,800 click evaluations to see how a small sample of real-life Google users responded to the change. Ultimately, the process resulted in 516 changes that were determined to be useful to users based on the data and, therefore, were made to Google’s algorithm.
خلاصه ی حرف آقای Eric Schmidt این است که در سال 2010 گوگل 13311 ارزیابی انجام داده است. این ارزیابی ها شامل 8157 آزمایش بوده است؛ در این آزمایش ها دو نمونه نتیجه ی جست و جو به افرادی داده و از آنها خواسته شد که نتیجه ی بهتر را مشخص کنند. سپس حدود 2800 کلیک جمع آوری شده است (از کاربران واقعی گوگل) تا ببینند کدام نتیجه بهتر است. در نهایت بر اساس تمام این داده ها 516 بار آپدیت الگوریتم گوگل انجام شده است.
البته بعد ها گوگل در جلساتی آنلاین به نام How Search Works اعدادی شبیه به این مورد را ارائه کرده است. متاسفانه بسیاری از این اطلاعات در دسترس نیستند اما یک اسکرین شات از سال 2012 از این جلسات باقی مانده است:
این تصویر نشان می دهد که ارزیابی های انجام شده تنها در دو سال از 13311 به 1812 مورد رسیده اند.
آیا سیستم گوگل در حال داغ تر شدن است؟منظور ما از داغ شدن سیستم سریع تر و مکررتر شدن بروز رسانی ها است (بالا رفتن فعالیت و گرم شدن). اگر کلیدواژه های گوگل از ابتدای جمع آوری داده ها را کنار هم بگذاریم می توانیم سیستم گوگل را با زمان گذشته مقایسه کنیم. نموداری که در زیر می بینید نشان دهنده ی فعالیت 5 سال گوگل است:
از این نمودار مشخص است که پنج سال دوم از پنج سال اول بسیار فعال تر است اما این فعالیت پایدار نیست و در سال اخیر نشانه هایی از کاهش فعالیت ها دیده‌ایم. اعداد زیر میانگین و میانه های هر سال هستند:
2019 – 83.7° / 82.0°
20 – 89.9° / 88.0°
2017 – 94.0° / 93.7°
2016 – 75.1° / 73.7°
2015 – 62.9° / 60.3°
2014 – 65.8° / 65.9°
البته باید در نظر داشت که تغییرات جزئی هر روزه اتفاق می افتند بنابراین درصد خطای این آمار به طور طبیعی بالا خواهد بود.
آیا واقعا روزانه 9 بروز رسانی انجام می شود؟اگر بخواهیم به طور دقیق بگوییم می شود 8.86 نه 9! اما همه می دانیم که این تفاوت جزئی فرقی به حال ما نمی کند. آقای Matt Cutts در این رابطه می گوید:
We might batch [algorithm changes] up and go to a meeting once a week where we talk about 8 or 10 or 12 or 6 different things that we would want to launch, but then after those get approved … those will roll out as we can get them into production.
خلاصه ی حرف آقای Matt Cutts این است که تیم گوگل در هفته در رابطه با 8 یا 10 یا 12 یا 6 مورد مختلف صحبت می کنند و نقشه های خودشان را برای هم توضیح می دهند. پس از آنکه طرح ها تایید شد در مرحله ی عمل اجرایی می شود. بنابراین این تغییرات به طور متوسط 9 عدد است نه دقیقا و روزانه 9 عدد. حتی در سال 2016 تحقیقی مبنی بر آپدیت الگوریتم گوگل صورت گرفت که نشان می دهد الگوی تغییرات در آخر هفته ها تغییر می کند بنابراین ارائه ی عدد 9 کار دقیقی نیست بلکه تنها یک متوسط است.
 نگاهی ۳۶۰ درجه به آپدیت جدید فرد (Fred) در گوگل
آیا تمام این تغییرات مهم هستند؟بسیاری از این تغییرات آن قدر کوچک هستند که متخصصان SEO آن ها را «تغییرات الگوریتم یا آپدیت الگوریتم گوگل» منظور نمی کنند؛ به طور مثال ممکن است تغییراتی در طراحی ظاهری گوگل باشند. از طرفی با پیشرفت نتایج SERP مخصوصا در زمینه ی سئوی محلی در 2-3 سال اخیر باید انتظار رشد نرخ تغییرات را داشته باشیم. البته قسمت اصلی مسئله به طرز نگاه شما بستگی دارد؛ فرض کنید گوگل در مورد نحوه ی رفتار موتور جست و جویش با اشتباهات تایپی در زبان کره ای، بروز رسانی انجام می دهد. این بروز رسانی و تغییر برای ما فارسی زبان ها یا حتی انگلیسی زبان ها تغییری ایجاد نمی کند اما اگر یک برند کره ای باشید که برخی از این کلیدواژه های اشتباه را هدف گرفته اید باید منتظر تغییرات بسیار بزرگی باشید. حتی برخی از این تغییرات برای برخی از زمینه ها (مثلا IT و نرم افزار) مهم هستند اما در زمینه های دیگر تغییری ایجاد نمی کنند.
از طرفی از برخی از محققین سئو می شنویم که «هر ساله 3000 تغییر و آپدیت الگوریتم گوگل داریم! بی خیالش شوید!» اما این حرف مانند این است که بگوییم «هوا هر روز تغییر می کند، بنابراین بی خیالش شوید!» درست است که هر گزارش هوایی به درد بخور نیست اما بالاخره باید بدانیم که آیا طوفانی در راه است؟ آیا قرار است باران ببارد؟ ما باید اخبار این تغییرات را دنبال کنیم و اگر مورد مهمی دیدیم بر اساس آن طرح کاری خود را عوض کنیم.
به هر حال نمی توان رشد نرخ آپدیت الگوریتم گوگل را رد کرد و تا جایی که تحقیقات نشان می دهد گوگل قصد توقف این تغییرات را ندارد بنابراین بهتر است سعی کنیم از تغییرات اساسی و مهم با خبر شویم. شما می توانید تغییرات الگوریتم گوگل را از این صفحه از شبکه ی توسعه دهندگان موزیلا دنبال کنید.
امیدوارم این مقاله در درک به روز رسانی های الگوریتم گوگل به شما کمک کرده باشد.
منابع استفاده شده در این مقاله:
2009 – Google’s Matt Cutts, video (Search Engine Land)
2010 – Google’s Eric Schmidt, testifying before Congress (Search Engine Land)
2012 – Google’s “How Search Works” page (Internet Archive)
2013 – Google’s Amit Singhal, Google+ (Search Engine Land)
2016 – Google’s “How Search Works” page (Internet Archive)
2017 – Unnamed Google employees (CNBC)
20 – Google’s “How Search Works” page (Google.com)
 
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


تبلیغات در وب سایت و سئو: دستور Rel=Nofollow
اگر بازدید سایت شما خوب است، حتما تا به حال به فکر نمایش تبلیغات در سایت خود افتاده اید. به هر حال طبیعی است که سعی کنیم دخل و خرج خود و سرورهایمان را از جایی در بیاوریم! اما تاثیر این تبلیغات بر سئو چیست؟
صفحه ی راهنمای وبمستران گوگل می گوید:
Make a reasonable effort to ensure that advertisement links on your pages do not affect search engine rankings. For example, use robots.txt or rel=”nofollow” to prevent advertisement links from being followed by a crawler.
ترجمه:
سعی کنید تلاشتان در این جهت باشد که لینک های تبلیغاتی وب سایت شما در رتبه بندی موتورهای جست و جو تاثیر نگذارند. به طور مثال، از فایل robots.txt و یا کلیدواژه “rel=”nofollow استفاده کنید تا crawler ها(ربات های خزنده) به چنین لینک هایی توجه نکنند.
در ابتدا باید موضوعی را برایتان روشن کنم: نمایش تبلیغات در اینترنت یک روش عادی و روتین بوده و به هیچ عنوان خلاف قوانین وبمستران گوگل نیست. بنابراین مسئله ای که می تواند باعث پایین آمدن رتبه ی شما در گوگل و سایر موتورهای جست و جو شود، برخی از تبلیغات خاص هستند.
از کجا بدانم تبلیغات سایت من بر خلاف قوانین گوگل نیست؟در ابتدای کار، تبلیغات شما باید از کلیدواژه nofollow استفاده کرده و یا از طریق فایل robots.txt مسدود شده باشد. این مسئله پیچیدگی های خود را دارد که باید توضیح داده شوند اما فعلا و برای امروز می خواهم در رابطه با همین کلیدواژه nofollow با شما صحبت کنم و در جلسه ی بعد مفصلا به خود موضوع تبلیغات می پردازیم.
rel=nofollow چیست؟تعریف این کلیدواژه در HTML 5 به شرح زیر است:
The nofollow keyword indicates that the link is not endorsed by the original author or publisher of the page, or that the link to the referenced document was included primarily because of a commercial relationship between people affiliated with the two pages.
source: w3c
ترجمه:
کلیدواژه ی nofollow حاکی از این است که که لینک مورد نظر توسط نویسنده ی اصلی و مدیر سایت تایید نشده و یا اینکه سندِ ارجاع داده شده در درجه ی اول به دلیل قراردادهای تجاری و تبلیغاتی میان مالکین دو صفحه در لینک قرار داده شده است.
منبع: صفحه‌ی رسمی w3c در گیت‌هاب
ممکن است این تعریف فنی و تئوری از کلیدواژه ی nofollow برای شما گنگ باشد، بنابراین سعی می کنم تعریف عملی اش را در دنیای واقعی به شما نشان دهم:
کلیدواژه rel=nofollow به crawler های موتورهای جست و جو اعلام می کند که به اصطلاح، فلان لینک را follow (دنبال) نکنند؛ در قسمت “دسته بندی اطلاعات در دنیای وب” از مقاله ی آشنایی با Googlebot: قسمت اول توضیح دادیم که ربات های موتورهای جست و جو روی هر لینکی که در وب سایت شما باش کلیک کرده و آن را دنبال می کنند تا ببینند چه چیزهایی داخل این لینک وجود دارد، ما به این کار follow کردن می گوییم. بنابراین به زبان ساده تر به ربات ها می گوییم فلان لینک را نادیده بگیرید چرا که ما (به عنوان مدیر وب سایت) این لینک را به رسمیت نمی شناسیم و در قبال آن مسئولیتی قبول نمی کنیم؛ به طور مثال تبلیغات از این دسته هستند.
نمود تصویری کلیدواژه rel=nofollow
مثال و ساختار استفادهساختار کلی این دستور، که به صورت یک attribute در لینک های سند HTML قرار می گیرد، به شکل زیر است:
 



1

<ahref="roxo.ir"rel="nofollow">link text</a>



در کد بالا لینکی به سایت روکسو داریم. به زبان ساده، این کلیدواژه به ربات های موتورهای جست و جو می گوید به این لینک هیچ اعتباری ندهید چرا که مورد تایید من نیست. همان طور که حدس زدید، این کلیواژه مقدار یک attribute است و تنها در تگ های a (لینک ها) قرار می گیرد. قبل از ارائه ی این کلیدواژه تنها دو گزینه داشتیم؛ یا تمام لینک های سایت را nofollow می کردیم و یا اینکه به هیچ کدام دست نمی زدیم اما به لطف ارائه ی این کلیدواژه می توانیم برای هر لینک به صورت جداگانه وضعیت nofollow را تعریف کنیم.
هدف این کلیدواژه چیست؟
دو هدف اصلی برای این کلیدواژه وجود دارد؛ کنترل کردن محتوای spam و اشاره به لینک های تبلیغاتی.
در سال 2004: موتورهای جست و جو کلیدواژه ی rel=nofollow را معرفی کردند تا با کامنت های spam مبارزه کنند.
در سال 2005: گوگل این کلیدواژه را برای لینک های تبلیغاتی پیشنهاد کرد.
در سال 2016: این کلیدواژه به صفحه ی راهنمای وبمستران گوگل اضافه شد.
البته در عمل اکثر افراد از آن برای فرار از جریمه های موتورهای جست و جو استفاده می کنند.
چه زمانی از rel=nofollow استفاده کنیم؟معمولا می توانید از کلیدواژه ی rel=nofollow در چهار موقعیت اصلی استفاده کنید:
محتوایی که نسبت به آن مطمئن نیستید
لینک های تبلیغاتی
اولویت دهی crawler ها
دفاع در برابر جریمه شدن از سمت موتورهای جست و جو
1- محتوایی که نسبت به آن مطمئن نیستید:
ممکن است ما در بسیاری از موقعیت ها روی محتوایی که کاربران در سایت‌مان منتشر می کنند کنترل کامل نداشته باشیم. چند مورد از این موقعیت ها عبارت اند از:
کامنت های وبلاگ و سایت
گفت و گو های فروم ها (forum)
ویجت های شبکه های اجتماعی
در چنین موقعیت هایی عاقلانه است که لینک ها را به صورت nofollow قرار دهید، در غیر این صورت عملا محتوای دیگران به پای شما نوشته می شود که ممکن است در رتبه بندی سایت شما تاثیر داشته باشد.
2- لینک های تبلیغاتی:
گوگل برای وب سایت هایی که در لینک های تبلیغاتی از nofollow استفاده نمی کنند، جریمه در نظر می گیرد. در واقع اگر هر کدام از لینک های زیر را داشتید باید از nofollow استفاده کنید:
لینک های پولی (لینک هایی که در ازای پرداخت پول در وب سایتتان قرار می دهید)
لینک های ارجاعی1 (affiliate)
تبلیغات به صورت کلی و به هر شکل
لینک های press release با متن بهینه سازی شده
1- لینک های ارجاعی، لینک هایی هستند که در بازاریابی رابطه ای استفاده می شوند. این نوع بازاریابی در ویکی پدیا به این شکل تعریف شده است:
فروش رابطه‌ای (به انگلیسی: Affiliate marketing) یک روش بازاریابیست که در آن کسب و کار به یک یا چند نفر که بازدید کننده یا مشتریانی را به کسب و کار ارجاع داده‌اند، پاداش می‌دهد. برای مثال سایت‌ها برای ارجاء بازدیدکنندگان جدید یا خریداران جدید هدیه یا مبلغی را به شخصی که معرفی را انجام داده پرداخت می‌کنند.
منبع: ویکی پدیا
از تعریف هایی که برای خود این لینک ها ارائه شده است:
An affiliate link is a specific URL that contains the affiliate’s ID or username. In affiliate programs, advertisers use affiliate links to record the traffic that is sent to the advertiser’s website.
source: Techopedia
بنابراین در این نوع لینک ها معمولا از ID یا Username یک کاربر در خود لینک استفاده می شود تا مشخص شود هر کاربر چند نفر را به سایت ارجاع داده است و یا چند محصول را فروخته است. این نوع بازاریابی در ایران تحت نام هایی از قبیل “مشارکت در فروش” و انواع اقسام دیگر نام ها وجود دارد. حتما تا به حال با آن ها برخورد کرده اید.
3- اولویت دهی crawler ها:
اولویت دهی crawler ها به این معنی است که به ربات های خزنده مانند گوگل بات بگوییم چگونه و با چه اولویت هایی با وب سایت ما تعامل کنند. برخی اوقات تعداد صفحاتی که توسط crawler ها پیشمایش می شوند محدود هستند؛ به طور مثال دیده ام که وب سایتی دارای 100 صفحه بوده است اما تنها 10 صفحه اش برای موتورهای جست و جو مهم بوده است چرا که صفحاتی مانند «ورود به حساب کاربری» و «قوانین سایت» و نتایج جست و جو و غیره در رتبه بندی سایت شما مهم نیستند و نادیده گرفته می شوند. اگر چنین حالتی دارید قطعا می خواهید آن 10 صفحه crawl شوند نه 90 صفحه ی دیگر که تاثیری در رتبه ی شما ندارند.
شما می توانید rel=nofollow را به لینک های داخلی مربوط به آن 90 صفحه اضافه کنید تا وب سایت شما از یک وب سایت 100 صفحه ای تبدیل به یک وب سایت 10 صفحه ای مفید شود. همانطور که مشخص است به این کار اولویت دهی یا اولویت بندی می گوییم چرا که به برخی از صفحات اولویت بیشتری داده ایم. البته لازم به ذکر است که چنین موقعیت هایی کم پیش می آیند اما آشنایی با این مبحث به شما کمک می کند تا نحوه ی دید crawler ها را نسبت به سایت خود عوض کنید.
4- دفاع در برابر جریمه شدن از سمت موتور های جست و جو:
یکی از مهم ترین دلایل استفاده از nofollow جلوگیری از جریمه شدن توسط موتورهای جست و جو است. این جریمه ها روی رتبه بندی سایت شما تاثیر می گذارد.
در لینک های تبلیغاتی از nofollow استفاده نمی کنید؟ ممکن است از سمت گوگل جریمه شوید.
در لینک های نامطمئن از nofollow استفاده نمی کنید؟ ممکن است از سمت گوگل جریمه شوید.
در press release ها از nofollow استفاده نمی کنید؟ ممکن است از سمت گوگل جریمه شوید.
در اصل rel=nofollow برای جلوگیری از spam استفاده می شود اما در دنیای وب مستران نگرانی اصلی جریمه شدن توسط گوگل است.
منبع: روکسو

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


چطور در 45 روز هیولای سئو شویم؟
در 45 روز به یک متخصص سئو تبدیل شویدبرای موفقیت در هر کاری نیاز به دو بازوی قدرتمند خواهیم داشت، دانش و تجربه. دانش روز سئو معمولا از مقالات، کتاب های الکترونیکی و ویدئوهای آموزشی معتبر به دست می آید ولی برای کسب تجربه باید زمان و هزینه زیادی صرف کنیم. دوره آموزشی SEO Monster ترکیبی از دانش روز سئو و تجربه عملی متخصصین وبسیما را در اختیار شما قرار میدهد.
پکیج آموزشی SEO Monster از 5 کارگاه تخصصی سئو تشکیل شده است که هر یک از آنها با محتوایی مستقل ولی با هدفی مشترک طراحی شده اند. در ادامه هریک از این کارگاه ها و محتوای ارایه شده در آنها را به شما معرفی میکنیم.

دوره جامع سئو Monster - آموزش صفر تا صد تکنیک های سئو در 20 ساعت
دوره جامع سئو مجموعه ای از 5 کارگاه تخصصی سئو (20 ساعت آموزش حضوری) است. در پایان دوره شما تمامی استانداردها و تکنیک های حرفه ای سئو را فرا میگیرید.1- کارگاه آموزش حرفه ای سئو و تولید محتوابرای ساخت یک ساختمان پیش از هر چیز نیازمند یک نقشه دقیق و طراحی مناسب هستیم. در کارگاه آموزش سئو و تولید محتوا استراتژی انتخاب کلمات کلیدی، تهیه محتوا و انتشار آن را می آموزیم. مباحث مطرح شده در این کارگاه عبارتند از:
شناسایی کلمات کلیدی پر جستجو و تعیین ارزش واقعی هرکدام
آنالیز رقبا و سنجش میزان رقابت برای هر کلمه کلیدی
تدوین استراتژی محتوایی، ساختار درختی و صفحات هدف برای سئو
شناخت الگوریتم های گوگل برای بررسی محتوای صفحه و تعیین کلمه کلیدی در آن
استفاده از الگوریتم های گوگل برای نگارش محتوای یک صفحه و آشنایی با استانداردهای سئو در تهیه محتوا
معرفی فعالیت هایی که باید پس از تهیه و انتشار محتوا برای بهبود جایگاه آن انجام دهیم
معرفی 3 تکنیک کاربردی برای حفظ جایگاه خود در صفحه اول گوگل و افزایش بازدیدکننده بدون محتوای جدید
2- کارگاه آموزش تکنیک های سئو 20هرسال با آپدیت الگوریتم های گوگل تغییراتی در رتبه بندی نتایج و فاکتورهای تاثیرگذار بر آن ایجاد میشود. در این کارگاه قرار نیست تکنیک هایی را معرفی کنیم که فقط برای سال 20 مناسب هستند بلکه به بررسی اصول و قواعد سئو میپردازیم که همین امروز هم با اهمیت هستند ولی به طور حتم در سال 20 تاثیر بیشتری بر سئو سایت شما خواهند داشت.
شناخت الگوریتم های جدید گوگل و تاثیر آنها بر رتبه بندی نتایج به شما کمک میکند که یک قدم از رقبای خود جلوتر باشید. مباحث ارایه شده در کارگاه سئو 20 به شرح زیر است:
معرفی الگوریتم رنک برین و بررسی تاثیر آن بر سئو
آشنایی با “مفهوم کلیدی” بعنوان جایگزین “کلمه کلیدی” از نظر گوگل
آشنایی با روش های افزایش CTR و تاثیر آن بر بهبود رتبه
معرفی تکنیک های انتشار ویدئو و تاثیر آن بر سئو
تکنیک های کاربردی کامنت مارکتینگ و تاثیر آنها بر سئو صفحه
راهنمای کامل تهیه و انتشار رپورتاژ آگهی
معرفی الگوریتم Mobile First Index و تاثیر آن بر رتبه بندی نتایج گوگل
3- کارگاه آموزش لینک سازی کلاه سفیدتهیه و انتشار محتوای ارزشمند اولین قدم در مسیر سئو و کسب جایگاه است ولی در ادامه نیازمند لینک سازی مناسب برای رسیدن به رتبه یک گوگل هستیم.
در این کارگاه تکنیک های لینک سازی داخلی و خارجی را بررسی کرده و روش های موثر لینک سازی که مورد تایید گوگل نیز هستند را به شما آموزش میدهیم:
تدوین استراتژی لینک سازی داخلی سایت
نقش لینکهای موجود در هدر، سایدبار و فوتر در موفقیت سایت
تسلط بر مفاهیم Domain Authority،Page Authority  و  Spam Score
شناخت فاکتورهای موثر در ارزش و تاثیر بک لینک
خرید بک لینک و تاثیرات مخرب آن
خرید بک لینک و تاثیرات مهیج آن
استراتژی و برنامه زمانی خرید رپورتاژ آگهی
تدوین برنامه زمانی کاربردی برای لینک سازی خارجی
4- کارگاه آموزش کاربردی سئو تکنیکالهمگی به خوبی می دانیم که طراحی سایت و رعایت استانداردهای سئو در کدنویسی، میتواند نقش بسیار مهمی در موفقیت استراتژی های سئو و کسب جایگاه بهتر داشته باشد. در این کارگاه به صورت تخصصی فاکتورهایی که باید در طراحی سایت لحاظ شوند تا نتیجه بهتری در سئو کسب کنیم را معرفی کرده و به صورت عملی هریک از آنها را به شما آموزش میدهیم.
آموزش استانداردهای کدنویسی صفحات وب متناسب با سئو
معرفی و آموزش استفاده از تگ های HTML که بر سئو تاثیرگذار هستند
آموزش Schema و تکینک های نشانه گذاری محتوا برای گوگل با هدف نمایش rating و اطلاعات در نتایج گوگل
بهینه سازی حرفه ای سرعت سایت متناسب با استانداردهای ۲۰۱۸ در Page Speed Insights
بهینه سازی حرفه ای سایت برای موبایل
آشنایی با AMP و موارد استفاده از آن
5- دوره آموزش حرفه ای گوگل وبمسترگوگل وبمستر تو یا همان google search console ابزاری رایگان ولی قدرتمند جهت مدیریت سئو سایت و بررسی آماری روند پیشرفت یا پسرفت سایت، در اختیار وبمستران قرار میدهد. با توجه به اینکه Google Webmaster Tools مستقیما از طرف خود گوگل راه اندازی و پشتیبانی شده است از اعتبار بسیار بالایی برخوردار بوده و همین امر اهمیت آموزش وبمستر گوگل را دوچندان میکند.
در این کارگاه کلیه بخش های پنل وبمستر گوگل را آموزش داده و موارد استفاده از هرکدام را با ذکر مثال های کاربردی بررسی میکنیم. بخشی از محتوای ارایه شده در این کارگاه به شرح زیر است:
آموزش معرفی سایت به گوگل
تعیین دامنه اصلی سایت
تعیین دسترسی های و کاربران کنسول
معرفی نقشه سایت و بررسی صحت عملکرد آن
بررسی فایلtxt و انجام تنظیمات آن
آشنایی کامل با ابزار Fetch & Render
بررسی عنوان و توضیحات صفحات و ایرادات یا تکراری بودن آنها
بررسی و مدیریت لینک ها ورودی به سایت
بررسی وضعیت ایندکس صفحات
حذف صفحات از ایندکس گوگل
بکارگیری تکنیک های نشانه گذاری و مدیریت آنها در گوگل وبمستر شامل Structured Data, Rich Cards, AMP و آشنایی کلی با پیاده سازی Schema
آنالیز دقیق اطلاعات آماری گوگل وبمستر برای شناسایی صفحات و کلمات ارزشمند، شناسایی پتانسیل های جدید، تحلیل اطلاعات و تصمیم گیری
مدیریت لینک های ورودی به سایت و نحوه کار با ابزار Disavow Linksبرای جلوگیری از سئو منفی
آنالیز دقیق Crawl Errors و Crawl Stats جهت شناسایی مشکلات سایت و روش های برطرف کردن آنها
آموزش نحوه صحیح انتقال سایت به دامنه جدید، بدون از دست رفتن سئو
در پایان هر کارگاه فیلم جلسه به همراه گواهی حضور در دوره به شرکت کنند
هدیه وبسیما به شرکت کنندگان دوره SEO Monsterعلاوه بر کارگاه های آموزش حضوری سئو 3 مجموعه ویدئویی ارزشمند به شرکت کنندگان در SEO Monster اهدا می شود تا بتوانند با ابزارهای کاربردی و مهم برای مدیریت سایت و سئو خود بیشتر آشنا شوند.
این سه مجموعه عبارتند از:
فیلم آموزش کار با Google Analytics
فیلم آموزش جامع الکسا
فیلم آموزشی سئو برای همیشه
شرکت در دوره هیولای سئو برای چه کسانی مناسب است؟محتوای ارایه شده در این دوره برای افرادی که به صورت تخصصی در زمینه سئو و مدیریت سایت فعال هستند توصیه میشود. اگر تجارت شما مبتنی بر وب باشد شرکت در این دوره میتواند سرعت رشد آن را افزایش دهد. مخاطبین دوره Monster افراد زیر هستند:
مدیر یک سایت یا تجارت اینترنتی.
کارشناس سئو و تولید محتوا در یک شرکت یا سایت اینترنتی.
متخصص سئو که خدمات سئو و تولید محتوا به شرکت های دیگر ارایه میدهد.
علاقه مندان به حوزه سئو و طراحی سایت که مقالات و آموزش های وبسیما را به دقت دنبال کرده باشند.
اگر هنوز با مفاهیم اولیه سئو آشنایی ندارید و قصد دارید که در دوره هیولای سئو شرکت کنید، پیشنهاد میکنیم ابتدا دو مجموعه آموزش ویدئویی سئو برای همیشه و سئو 20 را به صورت رایگان دریافت و مشاهده نمایید. در صورت مشاهده دقیق این دو مجموعه شما آمادگی کافی برای شرکت در دوره Monster را خواهید داشت.
ثبت نام در دوره آموزش سئو Monsterبرای ثبت نام در این دوره میتوانید به صفحه دوره SEO Monster در سایت وبسیما مراجعه کرده و به صورت آنلاین ثبت نام کنید. همچنین برای مشاهده زمان برگزاری کارگاه های آموزش به صفحه آکادمی وبسیما مراجعه نمایید.
منبع: وب سیما
lk04آوریل2008:00تحریریه وبسیما0
 
 
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


آموزش تغییر دامنه سایت
تغییر دامنه سایتانتقال سایت به دامنه جدید یکی از اتفاقات رایج در فضای اینترنت است که به دلایل مختلفی انجام میشود. این انتقال شامل حالت های بسیاری میشود که در این بخش تلاش میکنیم همه شرایط ممکن را بررسی کرده و نکات مهم در هر یک را بررسی کنیم.
مهمترین نکته ای که در انتقال دامنه یا تغییر آدرس سایت باید به آن توجه کنیم حفظ جایگاه در نتایج گوگل و انتقال سئو دامنه قدیمی به آدرس جدید است. در صورتیکه فرآیند انتقال به درستی انجام نشود شما با کاهش چشمگیر بازدیدکننده و در مواردی از دست رفتن جایگاه خود در نتایج گوگل مواجه خواهید شد.
کاهش بازدیدکننده و از دست رفتن جایگاه پس از تغییر دامنهاگر تاکنون فرآیند انتقال دامنه را انجام داده باشید به خوبی میدانید که این کار معمولا با کمی افت جایگاه همراه خواهد بود. میزان افت سئو سایت بستگی مستقیم به عملکرد شما هنگام انتقال و رعایت استانداردهای لازم دارد.
به طور معمول با گذشت مدتی از زمان انتقال این افت جایگاه برطرف شده و سایت به شرایط عادی خود بازمیگردد. به طور مثال تصویر زیر نمونه از تغییر آدرس سایت از http به https را نشان میدهد که در دو هفته اول با 35 درصد کاهش بازدید کننده همراه بوده و پس از تقریبا 6 ماه به شرایط عادی خود بازگشته است.
البته 6 ماه زمان بسیاری زیادی برای رسیدن به نقطه قبل می باشد و تلاش ما بر این است که تا حد امکان فرآیند انتقال را سریع و کم هزینه انجام دهیم. تصویر زیر نمونه ای موفق از تغییر آدرس سایت به https را نشان میدهد که در ابتدا با کاهش بازدید همراه بوده ولی در دراز مدت موجب بهبود وضعیت کلی سایت و کسب جایگاه بهتر در نتایج گوگل شده است.
انواع انتقال سایت و تغییر آدرسمدل های متنوعی از انتقال سایت، باز طراحی و تغییر آدرس آن وجود دارند که هرکدام نیازمند برنامه ریزی مشخص و انجام دستورالعمل های خاصی هستند. در این بخش به بررسی مدل های موجود میپردازیم:
1- تغییر protocol سایت به httpsطی دو سال اخیر انتقال سایت به https یکی از فرآیندهای رایج در فضای اینترنت بوده است. زیرا گوگل توجه بیشتری به سایت های ایمن داشته و این فاکتور میتواند در کسب بهتر در نتایج گوگل تاثیرگذار باشد.
2- تغییر زیر دامنه یا آدرس اصلی سایتیکی دیگر از تغییرات رایج، انتقال سایت از نسخه www به بدون www است که معمولا همزمان با باز طراحی سایت انجام میشود. همچنین ممکن است سایت شما از آدرس fa.example.com به آدرس example.com منتقل گردد تا دسترسی کاربران به صفحات داخلی آسان تر شده و آدرس صفحات کوتاه شود.
3- تغییر دامنه اصلی سایتتغییر دامنه سایت معمولا با هدف بازطراحی برند، فرار از فیلترینگ و یا انتقال به یک دامنه معتبر تر صورت میگیرد. بسیاری از تجارت های اینترنتی در ابتدای فعالیت خود توجهی به انتخاب دامنه و نام مناسب برای خود ندارند و پس از دستیابی به موفقیت های نسبی تصمیم به تغییر نام یا دامنه خود میگیرند. در این شرایط تغییر دامنه سایت اجتناب ناپذیر بوده و باید به درستی انجام شود.
4- تغییر TLD دامنهتغییر نوع دامنه از ir به com یا هر تغییر مشابه دیگری را میتوان یکی از انواع رایج تغییر آدرس سایت دانست. یکی از مشکلات دامنه های ir استفاده از سرویس های بین المللی مانند Google Adwords است که به دلایل مختلف ایران را تحریم کرده اند. در این شرایط مدیر سایت تصمیم میگیرد تا همان دامنه را با پسوندی جدید و البته بین المللی راه اندازی نماید تا از تمام سرویس های آنلاین بهره بگیرد.
5- تغییر سیستم مدیریت محتوا یا زبان برنامه نویسیسایت های اینترنتی عمری بین 2 تا 5 سال خواهند داشت و پس از این زمان نیازمند بازطراحی و یا حتی بازبینی اساسی در کدنویسی خواهند بود. در این شرایط حتی ممکن است زبان برنامه نویسی یا سیستم مدیریت محتوای سایت نیز تغییر کند.
با این اتفاق عملا آدرس دهی صفحات به طور کلی تغییر کرده و آدرس های قبلی به صفحات 404 منتهی میشوند. بیشترین احتمال افت جایگاه در این شرایط مشاهده میشود.
آموزش تغییر دامنه اصلی سایتبرای تغییر دامنه سایت و تغییر TLD مسیر کاملا مشابهی را طی میکنیم ولی برای تغییر آدرس سایت از http به https مسیر ما کمی متفاوت خواهد بود. دقت کنید که قدم های دوم ، سوم، چهارم و پنجم را باید به سرعت و نهایتا طی یک یا دو روز به صورت کامل انجام دهید.
اگر سایت در پنل گوگل وبمستر ثبت نشده است پیش از هر اقدامی باید سایت خود را به گوگل معرفی کرده و هویت خود را بعنوان مالک آن تایید کنید. برای این کار پیشنهاد میکنم مقاله و فیلم آموزشی ثبت سایت در گوگل را مشاهده نمایید.
قدم اول – خرید دامنه جدید و تمدید دامنه فعلیدر ابتدا شما باید دامنه جدید که قصد انتقال سایت به آن را دارید خریداری کرده و مراحل ثبت و تایید هویت را نهایی کنید. نکته بسیار مهم تمدید دامنه قدیمی تر برای مدت طولانی است.
برای حفظ سئو سایت، شما به دامنه قبلی نیاز خواهید داشت زیرا تمام بک لینک های شما در فضای اینترنت و شبکه های اجتماعی به این دامنه ایجاد شده و برای حفظ اعتبار آنها باید دامنه قدیمی به دامنه جدید ریدایرکت شود.
قبل از شروع فرآیند مطمئن شوید که این دامنه تا مدت طولانی در اختیار شما خواهد بود زیرا با انتقال به دامنه جدید ممکن است این نکته مهم را فراموش کرده و دامنه
قدم دوم – راه اندازی سایت بر روی دامنه جدیددر بسیاری موارد راه اندازی سایت بر روی دامنه جدید همراه با تصمیمات دیگری مانند تغییر هاست یا گواهی SSL انجام میشود. پیشنهاد میکنیم که هر یک از این تصمیمات در بازه های زمانی مجزا و به صورت کاملا مستقل انجام شود.
برای راه اندازی سایت بر روی دامنه جدید یک هاست جدید بر روی همان سروری که سایت قبلی قرار دارد تهیه کنید که از نظر امکانات، IP و DNS کاملا مشابه باشند. راه اندازی دامنه جدید با یک DNS متفاوت ممکن است ریسک از دست رفتن جایگاه را افزایش دهد.
سایت خود را بر روی دامنه و هاست جدید راه اندازی کنید و از عملکرد صحیح تمام صفحات و آدرس های آن مطمئن شوید. بسیاری از سایت ها در این مرحله لینک های موجود در منو، سایدبار، فوتر و حتی محتوای صفحات را به روز رسانی نمی کنند و این آدرس ها همیشه به سایت قبلی باقی می ماند.
قدم سوم – معرفی سایت جدید در گوگل وبمسترفرآیند ثبت سایت در گوگل را برای دامنه جدید انجام داده و کلیه تنظیمات آن شامل معرفی نقشه سایت، تعیین دامنه اصلی، تهیه فایل robots.txt و … در پنل وبمستر را انجام دهید.
قبل از شروع کار لینک سازی های داخلی سایت و آدرس دهی تصاویر را به دقت بررسی کنید. کلیه لینک سازی های داخلی و دسترسی به تصاویر و فایل ها جانبی باید با آدرس دامنه جدید باشد.
قدم چهارم – ریدایرکت کلیه آدرس های دامنه قبلی به دامنه جدیددر این مرحله باید هر آدرسی که در دامنه قبل داشته اید را به آدرس متناظر خود در دامنه جدید ریدایرکت کنید. به عنوان مثال websima.ir/blog باید دقیقا به آدرس websima.com/blog ریدایرکت گردد. به طور معمول زمانی که تغییر اساسی در ساختار آدرس دهی و یا کدنویسی سایت ایجاد نشده است ریدایرکت صفحات بسیار راحت و با یک خط کد انجام میشود.
اگر سرور یا هاست شما لینوکس است میتوانید با قرار دادن کد زیر در فایل htaccess در هاست دامنه اصلی کلیه آدرس های دامنه قبلی را به دامنه جدید ریدایرکت نمایید.
در کد بالا به جای olddomain.com آدرس سایت فعلی خود و به جای newdomain.com آدرس دامنه جدید را قرار داده و این کد را در فایل htaccess دامنه قدیمی قرار دهید. دقت کنید که اگر دامنه جدید با آدرس https یا همراه با www باز میشود در خط آخر این موارد را لحاظ کنید و دقیقا آدرسی که سایت جدید با آن باز میشود را وارد نمایید.
با این کد هر صفحه از سایت قدیمی عینا به آدرس مشابه در سایت جدید ریدایرکت شده و فقط نام دامنه تغییر میکند. این دستورات هم برای تغییر دامنه اصلی و هم برای تغییر TLD دامنه قابل استفاده است.
پس از انجام این مرحله آدرس های مختلفی از سایت را تست کرده و از ریدایرکت صحیح آنها مطمئن شوید.
قدم پنجم – اعلام تغییر دامنه به گوگلدر پنل گوگل وبمستر دامنه پیشین سایت خود وارد شده و از بخش change of address درخواست تغییر دامنه را اعلام نمایید. برای ارسال درخواست خود مراحل را به ترتیب و مطابق تصویر زیر انجام دهید.
پس از ارسال درخواست تغییر آدرس معمولا ۲ تا 6 هفته زمان نیاز است تا کلیه آدرس های دامنه قبلی از ایندکس خارج شده و دامنه جدید جایگزین آن شود.
اگر مراحل انتقال به درستی انجام شده باشد معمولا شما در این مدت کاهش بازدیدکننده 10 تا 30 درصدی را مشاهده خواهید کرد ولی پس از نهایی شدن فرآیند انتقال و جایگزین شدن این آدرس ها جایگاه شما به صورت کامل به حالت طبیعی بازخواهد گشت.
منبع: وب سیما
 
 
 
lk09آوریل2010:00تحریریه وبسیما83
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


8 دلیل برای استفاده از گرادیان در طراحی سایت
استفاده از گرادیان رنگ در طراحی سایتاز 3 سال پیش طراحی فلت (Flat Design)، متریال دیزاین گوگل و استفاده از فضای خالی به مرسوم ترین سبک های طراحی وب سایت تبدیل شده اند. ولی در طراحی بسیاری از سایت های جدید استفاده از سایه و گرادیان رنگ را می بینیم که برای خلق جلوه های بصری چشم نواز و همچنین جلب توجه کاربران به کار گرفته شده اند. ظاهراً این تکنیک که گرادیان (Gradient) نام داشته و مدت ها از مد افتاده بود دوباره توجه طراحان را به خود جلب کرده است.
اگر از طرفداران استفاده از گرادیان نیستید بهتر است این مقاله را بخوانید. در ادامه 8 دلیل قانع کننده برای استفاده از گرادیان در طراحی سایت آورده می شوند که می توانید از آنها برای طراحی سایت خود در سال جاری استفاده کنید.
1. چشم نواز شدن بک گراند صفحهاستفاده از گرادیان در طراحی بک گراند صفحه موجب حرکت چشمان کاربر در تصویر میشود؛ مردمک چشم کاربر به یک نقطه از تصویر متمرکز می شود و به خاطر تغییر در طیف رنگ ها و سایه ها، چشمان او ناخودآگاه از یک طرف صفحه نمایش به سمت دیگر هدایت می شوند. گرادیان ابزار خوبی برای مجذوب کردن کاربران بوده و طرح های خسته کننده را زیبا و دلنشین می کند.
روش های مختلفی برای به کارگیری گرادیان در طراحی سایت وجود دارد، اما یکی از محبوب ترین روش ها گرادیان کردن پس زمینه سایت و قرار دادن تصویر، متن یا اِلمان های دیگر روی آن است، مثل تصویر زیر:
وقتی به این تصویر نگاه می کنید گرادیان از خسته کننده شدن تصویر جلوگیری می کند و چشمان را ناخودآگاه از بالای صفحه به گوشه پائین سمت راست جایی که نوشته شده Discover More می برد. در کل صفحه این سایت از گرادیان استفاده شده و مثل یک راهنما در مسیریابی به کاربر کمک می کند.
2. گرادیان شانس خوانده شدن متن را افزایش میدهدعلاوه بر استفاده بهینه در پس زمینه، میتوان از گرادیان در متن هایی که روی پس زمینه قرار گرفته اند نیز استفاده کرد. در این روش اگر هدف شما تمرکز به متن است نه تصویر، می توانید پس زمینه را ساده و با متن را همراه با گرادیان رنگ نمایش دهید تا توجه کاربران را به خواندن متون جلب کنید. این روش برای طراحی سایت شرکتی و خلاقانه توصیه میشود.
برای این کار کنتراست رنگ ها را زیاد کنید تا متن ها خوانا شوند. در سایت زیر از این تکنیک استفاده شده است:
3. عکس های معمولی را جذاب می کنداگر گرادیان را روی یک تصویر معمولی overlay کنید نتیجه کار باورنکردنی می شود! البته منظور از تصویر معمولی عکس بی کیفیت یا با رزولوشن پایین نیست، بلکه عکس های خسته کننده ای هستند که هیچ هیجانی در کاربر ایجاد نمی کنند.
در این روش استفاده از رنگ های روشن بهتر از رنگ های خنثی جواب می دهد. این تکنیک سایت و عکس اصلی آن را بسیار زیبا می کند ولی مشکل اصلی استفاده بیش از حد طراحان از این روش است. بنابراین اگر می خواهید از بقیه متمایز شوید بهتر است کمی خلاقیت چاشنی کار کنید تا طرح شما تکراری به نظر نیاید.
در تصویر بالا قسمت پایینی تصویر به کمک گرادیان کاملاً محو شده است و یک نوار نارنجی رنگ زیبا بوجود آمده است. علاوه بر این به کاربر اعلام میکند که با اسکرول به پایین صفحه اطلاعات مهمتری دریافت خواهد کرد.
4. گرادیان مسیر حرکت چشم کاربر را مشخص میکندیکی از فاکتورهای مهم در طراحی وب سایت توجه به تجربه کاربری و دسترسی سریع به محتوا است. الگوی کاربران برای خواندن متن شبیه به حرف F است. یعنی از قسمت بالا سمت چپ شروع کرده و از وسط صفحه به سمت پایین می آیند.
برای حرکت دادن چشمان کاربر و جلب توجه او به قسمت های مختلف صفحه از قسمت های روشن گرادیان به عنوان نقطه شروع استفاده کنید و نگاه او را به سمت مراحل پایانی یا دکمه هدف هدایت کنید.
مردمک چشمان ما به طور ناخودآگاه اول قسمت روشن تر را دیده و بعد به قسمت تاریک توجه می کند. تصویر زیر یک مثال عالی برای استفاده از گرادیان رنگ در طراحی سایت و نمایش مراحل کار به کاربر است. این تکنیک را میتوان در طراحی سایت فروشگاهی و برای نمایش مسیر خرید یا ارسال استفاده نمود.
5. بر برندینگ شما تاکید بیشتری می شوداگر رنگ های برند شما به گونه ای هستند که می توان آنها را با هم ست کرد، به کمک گرادیان آنها را با هم ترکیب کنید. این تکنیک روش خوبی برای نمایش رنگ های سازمانی شما و حک کردن آن در ذهن مخاطب است. از گرادیان تولید شده در کمپین های تبلیغاتی، سایت، شبکه های اجتماعی یا متریال های چاپی خود استفاده کنید. وقتی از یک سبک یکسان در همه جا استفاده کنید ثبات خود را نشان داده و کاربران شما را با آن رنگ تشخیص می دهند.
در سایت زیر دقیقاً چنین کاری انجام شده است؛ انتخاب رنگ ها جالب است، گرادیان استفاده شده روی عکس و همچنین منو به ماندگار کردن رنگ ها در ذهن کاربر و ارتباط دادن آنها به برند کمک میکند.
6. استفاده از گرادیان در طراحی سایت راحت استامروزه دسترسی به ابزارهای گرافیکی بسیار آسان شده است و شما به راحتی می توانید به کمک فتوشاپ گرادیان مورد نظر خود را ایجاد کنید. برای این کار از ابزار Gradient Tool فتوشاپ استفاده می کنیم که در منوی سمت چپ برنامه قرار دارد.
دست شما در انتخاب نوع گرادیان باز است؛ مثلاً می توانید به صورت جهت دار (Directional) یا دایره ای (Radial) آنها را بسازید. همچنین می توانید با ترکیب کردن این دو نوع گرادیان طرح هایی زیبا و خلاقانه ایجاد کنید.
انتخاب رنگ مناسب برای گرادیان یکی از سخت ترین کارهاست، ساده ترین کار انتخاب کردن رنگ های قرار داده شده از پنل چرخ رنگ فتوشاپ است ولی همیشه نمی توان چنین کاری کرد، در بعضی اوقات باید آنقدر با رنگ ها بازی کنید تا نتیجه دلخواه به دست بیاید.
ابزارهای رایگان ایجاد Gradientاگر به هر دلیلی نمی خواهید از فتوشاپ استفاده کنید می توانید از سایت های زیر که به طور رایگان گرادیان تولید می کنند استفاده کنید:
WebGradients 
کتابخانه ای از 150 گرادیان رنگی زیبا و کارآمد در فرمت های CSS و عکس
Gradient Buttons

Gradient Buttons
Beautiful Gradient Buttons with Hover Effect 
ابزاری برای ساختن گرادیان رنگی بر روی دکمه های سایت و انیمیشن زیبا برای حالت hover
Gradient Wave Generator
ابزاری برای تولید گرادیان موجی در رنگ های مختلف
7. گرادیان رنگی الهام گرفته شده از طبیعت استمحوشدگی ها و سایه هایی که به کمک گرادیان ایجاد می شوند حس طبیعی بودن را به بیننده منتقل میکنند، علت هم این است که هیچ چیزی در طبیعت یک رنگ نیست و زندگی مملو از سایه ها و محوشدگی هاست.
اگر قصد دارید جلوه هایی طبیعی و منطبق با دنیای واقعی خلق کنید، اولین انتخاب گرادیان خواهد بود. در تصویر زیر به کمک تکنیک گرادیان یکی از زیباترین جلوه های طبیعت (تغییر رنگ آسمان از تیره به روشن) به بهترین شکل به تصویر کشیده شده است.
8. استفاده از گرادیان در طراحی سایت ترند شده استگرادیان ها دم دست ترین و راحت ترین راه حل برای چاشنی کردن عناصر بصری چشمگیر به تصاویر هستند و از گیج شدن کاربران سایت جلوگیری می کنند. با انواع مختلفی از تکنیک های گرادیان که بالاتر گفته شدند می توانید تصاویر شگفت انگیزی ایجاد کنید.
اگرچه استفاده از گرادیان در طراحی وب سایت در سالهای گذشته روندی سینوسی داشته و در مقاطعی از مد افتاده است، ولی پس از مدت کوتاهی و با پیشرفت تکنولوژی های طراحی سایت دوباره وارد عرضه طراحی وب سایت شده و نظر طراحان را به سمت خود جلب کرده است.
منبع: وب سیما
 
08مه2009:00تحریریه وبسیما0
ورودثبت نام
000POINTS

حساب کاربری
محصولات من
نظرات و پاسخ ها
مقالات نشان شده
ابزارهای کاربردی


 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


آموزش طراحی لوگوی چند ضلعی های درهم
سلام خدمت دوستان عزیز! با آموزش طراحی لوگوی چند ضلعی های درهم در محیط ایلوستریتور در خدمت شما هستیم، با ما همراه باشید.
پیش نیاز آموزش:
 آشنایی مقدماتی با نرم افزار ایلوستریتور
سطح آموزش:
متوسط
چه مطالبی در این ویدیوی آموزشی خواهید دید؟
به چه صورت یک سند بسازیم
چگونگی رسم دایره با استفاده از ابزار Ellipse
کاربرد و روش استفاده از کلیدهای میانبر
چگونه با ابزار مستطیل یک مربع رسم کنیم
کار با ابزار گرادینت جهت ایجاد طیف رنگ
کار با ابزار ذره بین
جداسازی شکل ها
آموزش کار با ابزار Pen
ویدیوی آموزش طراحی لوگوی چند ضلعی های درهمنمایشگر ویدیو
 
 
00:00
 
07:00
 
 
 
خلاصه آموزش ویدیویی:
یک سند جدید می سازیم.
با استفاده از ابزار Ellipse یک دایره رسم می کنیم.
با استفاده از ابزار Direction دایره رسم شده را به شکل قطره در می آوریم.
با ابزار گرداینت رنگ آنرا تغییر می دهیم.
با استفاده از ابزار مستطیل یک مربع رسم می کنیم.
مربع ها را به شکل قطر در می آوریم.
با قرار دادن آن بر روی قطره و کپی گرفتن از آن، قسمت های اضافی را می بُریم.
یک حالت مثلثی محو درون قطره ایجاد می شود.
پس از اتمام طرح با کپی گرفتن و چرخش شکل به صورت ممتد، لوگوی نهایی ما ایجاد می شود.
با ایجاد سایه، نوشتن نام شرکت و تغییر پس زمینه، طراحی ما به اتمام می رسد
منبع: روکسو
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


آموزش طراحی وکتور نان تُست در ایلوستریتور
با سلام خدمت مخاطبان عزیز! با یک آموزش ویدیویی جالب در خدمت شما هستیم. در این آموزش ویدویی به طراحی وکتور نان تُست در محیط نرم افزار ایلوستریتور پرداخته ایم.
پیش نیاز آموزش:
 آشنایی مقدماتی با نرم افزار ایلوستریتور
سطح آموزش:
متوسط
چه مطالبی در این ویدیوی آموزشی خواهید دید؟
آشنایی با ساخت سند
آموزش رسم مربع
کار با ابزار دایره
کار با ابزار Pen
استفاده از کلید های میانبر
رنگ آمیزی اشکال
ابزار زوم (ذره بین)
جدا سازی شکل ها از هم
استفاده از Transform
ویدیوی آموزش طراحی وکتور نان تُست در ایلوستریتورنمایشگر ویدیو
 
 
00:00
 
05:36
 
 
 
خلاصه آموزش ویدیویی:
در ابتدا یک سند جدید می سازیم.
با ابزار Rectangle و انتخاب رنگ ها، نمونه رنگ های موردنیاز را قرار می دهیم.
با استفاده از ابزار Rectangle و انتخاب یک رنگ، یک مربع رسم می کنیم.
با استفاده از ابزار Direction زاویه های پایینی مربع را گرد می کنیم.
با ابزار Pen و Direction قسمت پایینی شکل را به صورت قوسی در می آوریم.
با استفاده از ابزار Ellipse یک بیضی رسم می کنیم و با ابزار Pen دو شکل مربع و بیضی را بهم متصل می کنیم تا طرح اولیه نان تست ما ساخته شود.
از شکل رسم شده کپی می گیریم و با اندازه کوچکتر، درون خود شکل قرار می دهیم.
با ابزر Ellipse شروع به رسم دایره هایی درون شکل می کنیم.
طرح اولیه نان تُست ما ساخته شده است. از کل شکل در زیر آن کپی می گیریم و با کمی جابجایی و تغییر رنگ، حالت سه بعدی ایجاد می کنیم.
در نهایت از طرحمان چند کپی می گیریم و کنار یک دیگر قرار می دهیم و رنگ پس زمینه را تغییر می دهیم.
رو کسو
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


طراحی وکتور نیمرو در ایلوستریتور
سلام! در این آموزش ویدیویی به طراحی وکتور یک ماهیتابه و نیمروی خوشمزه داخل آن پرداخته ایم. طراحی وکتور نیمرو بسیار آسان و سریع است و به تخصص چندانی در زمینه کار با نرم افزار ایلوستریتور نیاز ندارد.
پیش نیاز آموزش:
 آشنایی مقدماتی با نرم افزار ایلوستریتور
سطح آموزش:
متوسط
چه مطالبی در این ویدیوی آموزشی خواهید دید؟
روش ایجاد سند جدید
کار با ابزار های متسطیل و Direction
روش ها رسم دایره
کلید های میانبر
ابزار زوم جهت بزرگنمایی
روش استفاده از ابزار Pen
کار با ابزار گرادینت
آموزش ویدیویی طراحی وکتور نیمرو در ایلوستریتورنمایشگر ویدیو
 
 
00:00
 
09:08
 
 
 
خلاصه آموزش ویدیویی:
در ابتدا یک سند جدید می سازیم.
نمونه رنگ ها را جهت طراحی قرار می دهیم.
با استفاده از ابزار Rectangle یک مستطیل رسم می کنیم.
با ابزار Direction زاویه های بالای مستطیل را گرد می کنیم و زوایه های پایینی را بهم نزدیک می نمائیم.
با ابزار دایره یک حالت برای آویز دسته ظرف ایجاد می کنیم.
با ابزار Ellipse شروع به رسم دایره می کنیم.
و با ابزار Pen شروع به رسم منحنی ها، سفیده و زرده تخم مرغ می کنیم.
با ابزار گرادینت طرح را رنگ آمیزی می نمائیم.
در نهایت با ابزار Pen منحنی ها را رسم می کنیم و با تغییر رنگ پس زمینه، طراحی ما به اتمام می رسد.
منبع: روکسو
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


ریدایرکت چیست و چرا انجام می شود؟
هنگامی که به دنیای وب سایت ها قدم می گذارید، در اوایلِ کار، همه چیز ساده است. وب سایت شما تنها چند صفحه ساده و چند محتوای محدود دارد و در نتیجه مدیریت لینک ها و سیستم آدرس دهی سایت، کار چندان دشواری نخواهد بود.
اما پس از مدتی سایت شما رشد می کند و ساختار آن پیچیده تر می شود. علاوه بر اینکه شما به فضا و ترافیک بیشتری برای میزبانی محتوا و کاربران خود نیاز خواهید داشت و باید بسته های میزبانی وب خود را ارتقا دهید، باید صفحات جدید و محتوای بیشتری تولید کنید تا نیازهای کاربران جدید را برطرف کرده و رتبه بهتری نیز در موتور های جستجو به دست آورید. در این حال، ممکن است تصمیم بگیرید برخی صفحات و پست های وب سایت خود را حذف کنید و یا کمی ساختار سایت خود را ساده سازی کنید.
حتی ممکن است برای کسب اعتبار بیشتر چند دامنه (Domain) جدید خریداری کنید و یا دست به ساخت زیر دامنه (Sub-Domain) های متنوع کنید و بخواهید بین آنها به خوبی ارتباط برقرار کنید.
همانطور که مشاهده می کنید دلایل زیادی برای استفاده از ریدایرکت در وب سایت وجود دارد. بنابراین بد نیست بدانید ریدایرکت چیست با انواع ریدایرکت و موقعیت های استفاده از آنها آشنا شوید. اما قبل از آنکه به معرفی اننواع ریدایرکت بپردازیم، اجازه دهید شما را با مفهوم آن آشنا کنیم.
ریدایرکت وب سایت چیست؟ریدایرکت در واقع دستوری است که کاربران را از یک آدرس به آدرسی دیگر به صورت کاملا خودکار هدایت می کند. هنگامی کاربران آدرس صفحه مبدا را تایپ می کنند و یا روی لینک آن کلیک می کنند، به صورت اتوماتیک و در کسری از ثانیه به صفحه مقصد منتقل می شوند. آشنایی با اینکه چه مواقعی و چگونه از دستورات ریدایرکت استفاده کنید، نکته ارزشمندی است که مهارت شما در مدیریت وب را ارتقا خواهد داد.
شما می توانید تغییر مسیرها را بر اساس لینک ها و یا به صورت صفحه به صفحه انجام دهید که در ادامه به توضیح کامل آن خواهیم پرداخت.
آشنایی با انواع ریدایرکتهمانطور که گفتیم انواع مختلفی از ریدایرکت وجود دارد که در شرایط مختلف کاربردهای مفیدی دارند. اما مهم ترین و رایج ترین آنها، ریدایرکت 301 است که در ادامه با آن آشنا خواهید شد. علاوه بر ریدایرکت 301 انواع دیگری از ریدایرکت ها نیز وجود دارند که شما را با آنها آشنا خواهیم کرد.
1- ریدایرکت 301: ریدایرکت به شیوه 301 یک تغییر مسیر ثابت و دائمی است که بسیار رایج است و در عین حال ریدایرکت بسیار قدرتمند و سریعی نیز محسوب می شود. این ریدایرکت تقریبا تمامی لینک های وب سایت را شامل می شود. دستورات این ریدایرکت به سرعت هم در مرورگر و هم در سرور به اجرا در می‌آید و پس از مدتی در موتور های جستجو نیز ایندکس خواهد شد.
 بررسی کامل ریدایرکت ۳۰۱ و نحوه اجرای کدهای آن
2- ریدایرکت 302: برخلاف ریدایرکت 301 که دائمی محسوب می شود، ریدایرکت 302 یک ریدایرکت موقتی محسوب می شود. از این ریدایرکت باید مواقعی استفاده کنید که قصد دارید به صورت موقتی کاربران را از یک آدرس به یک آدرس دیگر هدایت کنید. برای مثال هنگامی که در حال تعمیر یا تغییر قالب و طراحی مجدد وب سایت خود هستید می توانید یک صفحه با طرح «به زودی برمی گردیم» ایجاد کنید و با ریدایرکت 302 کاربران را از صفحه اصلی به آن صفحه انتقال دهید تا زمانی که طراحی مجدد یا تعمیر وب سایت شما تکمیل شود.
3- Meta Refresh: آیا تا به حال به صفحاتی وارد شده اید که در آنها نوشته شده «تا 5 ثانیه دیگر به صفحه مقصد هدایت می شود، در غیر اینصورت اینجا را کلیک کنید»!؟ ریدایرکت اینگونه صفحات دقیقا از نوع Meta Refresh محسوب می شود. سرعت و ارزش سئو اینگونه ریدایرکت ها پایین است و معمولا در تکنیک های سئو کلاه سیاه و به جهت نگه داشتن بیشتر کاربران روی سایت استفاده می شوند و استفاده از آن جز در مواقع ضروری پیشنهاد نمی شود.
دلایل اصلی ریدایرکت وب سایتحال که با انواع مهم ریدایرکت آشنا شدید، نوبت به بررسی مهم ترین و رایج ترین دلایل استفاده از دستور ریدایرکت در وب سایت می رسد. اگر در مدیریت لینک های وب سایت خود دچار یکی از مشکلات زیر شده اید، استفاده از دستورات ریدایرکت چاره ی درد شما خواهد بود.
1- انتقال آدرس یک ساب دامنه به یک صفحه از دامنه اصلی
فرض کنید یکی از قسمت های وب سایت شما مانند بلاگ آموزشی بر روی یک ساب دامنه قرار دارد و می خواهید آن را به یک صفحه از دامنه اصلی انتقال دهید. مثلا کاربران را از ساب دامنه blog.mysite.com به صفحه mysite.com/blog منتقل کنید. در چنین مواقعی استفاده از ریدایرکت کارساز خواهد بود. دقت کنید از آنجا که این ریدایرکت تقریبا دائمی خواهد بود، استفاده از نوع 301 روش پیشنهادی ما می باشد.
2- انتقال کاربر از محتوای تکراری به مرجع اصلی
همانطور که می دانید وجود محتوای تکراری به سئو و رتبه بندی سایت در موتورهای جستجو تاثیرات منفی خواهد داشت. هرچند که نویسنده ها معمولا از نوشتن پست های تکراری اجتناب می کنند اما گاهی اوقات در وب سایت های بزرگ این مشکل به وجود می آید. چنین مواقعی می توانید صفحاتی که شامل نسخه های تکراری از یک محتوا هستند را به صفحه حاوی محتوای اصلی ریدایرکت کنید. اینگونه موتورهای جستجو نیز گیج نخواهند شد که اعتبار و رتبه مدنظر را به کدام یک از صفحات اختصاص دهند.
3- ریدایرکت چند دامنه به دامنه واحد
همانطور که در ابتدای مقاله نیز گفتیم، ممکن است بخواهید برای افزایش اعتبار یا محافظت بیشتر از برندینگ خود چند دامنه با پسوندهای مختلف برای سایت خریداری کنید (هرچند تاثیر آن در ارتقا رتبه بسیار کم است). چنین مواقعی برای افزایش تمرکز موتورهای جستجو و رتبه بندی صحیح سایت باید تمامی دامنه ها را به دامنه اصلی ریدایرکت کنید. برای مثال دامنه های mysite.ir و mysite.org به دامنه اصلی شما که احتمالا mysite.com است ریدایرکت کنید. اینگونه موتورهای جستجو رتبه و اعتبار شما را روی دامنه اصلی متمرکز کرده و ورودی سایت شما از موتورهای جستجو بیشتر خواهد شد.
4- ریدایرکت از دامنه قدیمی به دامنه جدید
گاهی اوقات پیش خواهد آمد که بعد از مدتی تصمیم به تغییر نام وب سایت وب سایت خود می گیرید و دامنه ای متناسب با نام جدید برای سایت خود خریداری می کنید. چنین مواقعی با استفاده از دستورات ریدایرکت می توانید کاربران را به آدرس جدید هدایت کنید و بخش بسیار زیادی از اعتبار نام قبلی را به نام جدید منتقل کنید. در درس های بعد تاثیر هر یک از ریدایرکت ها روی سئو سایت و انتقال اعتبار صفحات را به طور دقیق بررسی خواهیم کرد.
5- ریدایرکت از آدرس قبلی به آدرس جدید
فرض کنید برای بهبود ساختار لینک دهی سایت تصمیم گرفته اید صفحه mysite.com/services/web-design را به صفحه mysite.com/web-design-services ریدایرکت کنید. همچنین ممکن است متوجه غلط املایی در لینک یکی از صفحات سایت شده باشید. اگر این صفحه را مدت زیادی است که ایجاد کرده اید و در موتورهای جستجو ایندکس شده است تغییر نام آن کار صحیحی نخواهد بود و باید یک صفحه جدید ایجاد کنید و صفحه قبلی را به جای حذف کردن، به آدرس جدید ریدایرکت کنید.
در درس های بعد شما را با کدها و دستورات ریدایرکت و نحوه پیاده سازی آنها در سایت های مختلف آشنا می کنیم و تاثیر هر یک از انواع ریدایرکت بر سئو سایت را بررسی خواهیم کرد. پیروز و سربلند باشید…
منبع: روکسو
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


بررسی کامل ریدایرکت ۳۰۱ و نحوه اجرای کدهای آن
همانطور که به یاد دارید در درس «ریدایرکت چیست و چرا انجام می شود؟» به تعریف ریدایرکت و توضیح انواع آن پرداختیم. همچنین موارد استفاده از ریدایرکت در وب سایت را نیز توضیح دادیم. حال در این درس قصد داریم ریدایرکت 301 که مهمترین نوع تغییر مسیر در وب سایت محسوب می شود را زیر ذره بین برده و درباره اجرای کد های مرتبط با آن نیز، با یکدیگر بحث کنیم. با ما همراه باشید…
ریدایرکت 301. چرا؟ چطور؟ چگونه؟!همانطور که به یاد دارید از ریدایرکت 301 برای تغییر مسیر دائمی وب سایت بدون قصد بازگشت مجدد به آدرس قبلی استفاه می کردیم. هدف از این ریدایرکت نیز، ایندکس بهتر سایت در موتورهای جستجو، شناخته نشدن محتوای سایت به عنوان مطالب کپی و تکراری، و در نهایت تمرکز بهتر روی آدرس ها و دامنه های دلخواه ما برای کسب رتبه در موتورهای جستجو است.
سه دلیل مهم برای استفاده از تغییر مسیر به شکل 301 موارد زیر محسوب می شوند.
حذف و اضافه خودکار پروتکل های تحت وب مانند http:// و یا www به آدرس وب سایت
برای ریبرندینگ (تغییر نام و دامنه برند) و مهاجرت به آدرس اینترنتی جدید
انتقال از صفحات قدیمی سایت به صفحات جدید و همچنین انتقال سئو و اعتبار آنها به آدرس های جدید
سوال: آیا با ریدایرکت 301 اعتبار و رتبه صفحات قدیمی به صفحات جدید منتقل می شود یا خیر؟
 
پاسخ: بنا به تحقیقات وب سایت های معتبر در این زمینه، چنین مواقعی نزدیک به 70 درصد رتبه و اعتبار آدرس قبلی به آدرس جدید منتقل می شود. بنابراین نیاز نیست برای کسب مجدد رتبه و اعتبار برای صفحات یا دامنه های جدید موراد سئو را از صفر شروع کنید.
نحوه ریدایرکت 301 پروتکل ها در فایل .htaccessیکی از رایج ترین شیوه های پیاده سازی ریدایرکت 301 استفاده از فایل .htaccess می باشد که در ریشه سایت (فولدر public_html در هاست) شما موجود است. این فایل برای ریدایرکت های مرتبط با پروتکل های تحت وب بسیار مورد استفاده قرار می گیرد.
توجه: در اکثر مواقع این فایل از قبل روی هاست موجود است و نیاز به ساخت آن نیست. تنها باید دقت کنید که از آنجا که فایل هایی که با دات(.) شروع می شوند معمولا در هاست به حالت پنهان(hidden) هستند باید ابتدا از قسمت تنظیمات هاست تیک گزینه show hidden files را فعال کنید تا فایل نمایش داده شود و بتوانید آنرا ویرایش کنید. اگر این فایل از قبل موجود نباشد می توانید یک فایل با همین نام ایجاد کنید.
اخطار: پیشنهاد می کنیم به دلیل اهمیت بالای فایل .htaccess حتما قبل از هر ویرایشی یک نسخه بک آپ از آن تهیه کنید. روکسو مسئولیت استفاده ناصحیح از کد ها و دستورات در وب سایت شما را به عهده نخواهد داشت.
اما ریدایرکت های مرتبط با پروتکل ها دقیقا چه مواردی هستند؟
حذف و اضافه www در ابتدای سایت به صورت خودکار
گاهی اوقات تمایل دارید سایت شما حتما با پیشوند www برای مخاطبان نمایش داده شود حتی اگر آنها بدون www آدرس سایت را تایپ کردند. در این حال می توانید کد های زیر را در جای مناسبی (معمولا خط اول) از فایل .htaccess کپی کنید. فراموش نکنید که به جای example.com باید آدرس سایت خود را جایگزین کنید.
 



1
2
3

RewriteEngineon
RewriteCond%{HTTP_HOST}^example.com[NC]
RewriteRule^(.*)$http://www.example.com/$1 [L,R=301,NC]



همچنین اگر می خواهید سایت شما حتما بدون www نمایش داده شود حتی اگر مخاطبان آنرا با www تایپ کردند از کد زیر به جای کد بالا استفاده کنید. فراموش نکنید که آدرس سایت خود را جایگزین example.com کنید.
 



1
2
3

RewriteEngineon
RewriteCond%{HTTP_HOST}^www.example.com[NC]
RewriteRule^(.*)$http://example.com/$1 [L,R=301,NC]



لازم به ذکر است در صورت استفاده از برخی افزونه های مرتبط با ریدایرکت و یا برخی تغییرات در تنظیمات پنل وردپرس ممکن است کد های بالا کارایی خود را از دست بدهند. در صورتی که در اجرای کد های بالا به مشکل برخوردید در قسمت نطرات با ما در میان بگذارید و یا با یک متخصص وب سایت و سئو م کنید.
حال به سراغ یکی دیگر از موارد رایج ریدایرکت 301 می رویم.
انتقال از http:// به https:// و بالعکس
برای ریدایرکت کردن پروتکل http به https می توانید از کد زیر در ابتدای فایل .htaccess استفاده کنید. فراموش نکنید این مورد تنها برای سایت های امن می باشد که که گواهینامه SSL برای آنها فعال می باشد.
 



1
2
3

RewriteEngineOn
RewriteCond%{HTTPS}off
RewriteRule(.*)https://%{HTTP_HOST}%{REQUEST_URI} [R,L]



همچنین برای ریدایرکت پروتکل https به http از دستور زیر استفاده کنید. استفاده از این دستور برای تمام سایت هایی که گواهینامه SSL ندارند پیشنهاد می شود.
 



1
2
3

RewriteEngineOn
RewriteCond%{HTTPS}on
RewriteRule(.*)http://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]



 
انتقال یک فایل یا صفحه از طریق .htaccessبرای آنکه یک فایل را به صورت جداگانه به یک فایل از یک دامنه دیگر ریدایرکت کنید (برای مثال فایل example.com/old-adress.htm را به آدرس example.net/new-adress.htm منتقل کنید)، باید دستور زیر را در فایل htaccess. وارد نمایید:
 



1

Redirect301/oldfile.htm http://example.net/newfile.htm
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


بررسی کامل ریدایرکت ۳۰۲ و نحوه اجرای کدهای آن
اگر به یاد داشته باشید، در درس های قبل ریدایرکت را تعریف کردیم و دلایل انجام آنها در وب سایت ها را ذکر کردیم. همچنین یک مقاله کامل را به بررسی کامل و دقیق ریدایرکت دائم یا همان 301 و روش اجرای کدهای آن در زبان های مختلف اختصاص دادیم. حال در این مقاله ریدایرکت موقت یا همان ریدایرکت 302 را زیر ذره بین برده و از دلایل انجام آن تا نحوه اجرای کد های آنرا در هاست های مختلف با یکدیگر بررسی خواهیم کرد.
 ریدایرکت چیست و چرا انجام می شود؟
 
 بررسی کامل ریدایرکت ۳۰۱ و نحوه اجرای کدهای آن
کجا باید از ریدایرکت 302 استفاده کنیم؟موارد استفاده از ریدایرکت 302 بسیار کم است چرا که اکثر مواقع ریدایرکت 301 ارجحیت دارد. همانطور که به یاد دارید ریدایرکت 301 از آنجا که دائم محسوب می شود، قسمت بسیار زیادی از اعتبار آدرس قدیمی را به آدرس جدید منتقل می کند. اما ریدایرکت 302 اینچنین نیست، چرا که یک ریدایرکت موقتی محسوب شده و اعتبار صفحه را به آدرس جدید انتقال نمی دهد. از طرفی پس از غیرفعالسازی این ریدایرکت، صفحه مورد نظر شانس بیشتری برای به دست آوردن رتبه قبلی خود دارد. همچنین، در مواردی که طول مدت ریدایرکت کم باشد رتبه سایت به طور کامل در طی این مدت حفظ می شود.
حال، با توجه به توضیحات بالا می توان موارد استفاده از این نوع ریدایرکت را در دو مورد زیر خلاصه کرد:
زمانی که می خواهید سایت و یا صفحه ای از سایتتان را تعمیر کنید و یا تغییراتی مانند تعویض قالب در آن اعمال کنید و در نظر دارید طی این مدت کاربران شاهد تغییرات شما نباشند و به جای مشاهده سایت به یک صفحه با عنوان «به زودی برمی گردیم!» هدایت شوند، بهترین راهکار استفاده از تغییر مسیر به سبک 302 است.
در موارد بسیار نادری ممکن است بخواهید کاربر را از یک آدرس کوتاه به یک آدرس طولانی و یا بالعکس هدایت کنید و در عین حال اعتبار دامین در گوگل را حفظ کنید.
می دانیم که مورد دوم نیاز به بررسی دقیق تر دارد. این مورد زمانی استفاده می شود که برای مثال بخواهید کاربران را از yourdomain.com به subdomain.yordomain.com/home.php?pid=home منتقل کنید. اگر ریدایرکت 301 را به خوبی مطالعه کرده باشید خواهید گفت که چنین مواقعی استفاده از تغییر مسیر به سبک 301 منطقی تر است. کاملا درست است، چنین مواقعی تغییر مسیر دائم کاربردی تر است اما برخی به این دلیل از ریدایرکت 302 استفاده می کنند که اعتبار آدرس اول یا همان yourdomain.com را در گوگل حفظ کنند و در نتایج جستجوی گوگل این آدرس نمایان شود. این کار به نوعی گیج کردن گوگل محسوب می شود و از نظر متخصصان سئو، جز در مواقع ضروری پیشنهاد نمی شود.
چگونه باید از ریدایرکت 302 استفاده کنیم؟نحوه استفاده از تغییر مسیر 302 یا موقت، در سرورهای مختلف متفاوت است. در سرورهای یونیکس و یا آپاچی باید از طریق فایل .htaccess این کار را انجام دهید. این فایل را می توانید در مسیر اصلی وب سایت یا به اصطلاح root folder سایت خود در فایل منیجر کنترل پنل هاست پیدا کنید.
توجه: در اکثر مواقع این فایل از قبل روی هاست موجود است و نیاز به ساخت آن نیست. تنها باید دقت کنید که از آنجا که فایل هایی که با دات (.) شروع می شوند معمولا در هاست به حالت پنهان (hidden) هستند، باید ابتدا از قسمت تنظیمات هاست تیک گزینه show hidden files را فعال کنید تا فایل نمایش داده شود و بتوانید آنرا ویرایش کنید. اگر این فایل از قبل موجود نباشد، می توانید یک فایل با همین نام ایجاد کنید.
اخطار: پیشنهاد می کنیم به دلیل اهمیت بالای فایل .htaccess حتما قبل از هر ویرایشی یک نسخه بک آپ از آن تهیه کنید. روکسو مسئولیت استفاده ناصحیح از کدها و دستورات در وب سایت شما را بر عهده نخواهد داشت.
خب! در ادامه برای انجام این کار، کد زیر را در داخل فایل .htaccess قرار دهید.
 



1

redirect302/OldPage.html http://target.com/NewPage.html



لطفا به فاصله های موجود در کد دقت کنید. بین واژه های redirect و 302 یک فاصله و بین 302 با آدرس فعلی نیز یک فاصله و در نهایت سومین فاصله بین آدرس فعلی و آدرس صفحه جدید وجود دارد. از آنجه که آدرس فعلی حتما یکی از صفحات سایت شما می باشد از نوشتن دامین سایت در آدرس فعلی خودداری می کنیم.
نحوه تغییر مسیر 302 در سرورهای ویندوزیاما در سرورهای ویندوزی بحث ریدایرکت 302 متفاوت است. برای اینکار در قدم اول صفحه ای را که می خواهید ریدایرکت کنید، به حالت ادیت یا ویرایش درآورید.
حال اگر زبان برنامه نویسی سایت شما ASP است کد زیر را در قسمت مناسب (معمولا بالای تگ <html>) قرار دهید.
 



1
2
3
4
5

<%@Language=VBScript%>
<%
Response.Status=”302Found”
Response.AddHeader“Location”,”http://target.com/NewPage.asp”
%>



اما اگر زبان برنامه نویسی سایت شما ASP.NET می باشد، باید از کد زیر استفاده کنید.
 



1
2
3
4
5
6
7

<script runat=”server”>
privatevoidPage_Load(objectsender,System.EventArgse)
{
Response.Status=“302Found”;
Response.AddHeader(“Location”,”http://target.com/NewPage.asp”);
}
</script>



توجه داشته باشید در تمامی کدها به جای آدرس http://target.com/NewPage.asp باید آدرس مورد نظر خود را به عنوان آدرس مقصد جایگذاری کنید.
استفاده از افزونه ها برای تغییر مسیر 302اگر نمی‌خواهید برای انجام ریدایرکت ها خودتان را درگیر کدنویسی و دستکاری در فایل های مهم هاست کنید، می توانید با توجه به نوع سیستم مدیریت محتوای خود از افزونه های مرتبط با این کار استفاده کنید. توصیه می کنیم، برای سایت های وردپرس از افزونه yoast که جامع ترین و پرطرفدارترین افزونه وردپرسی در زمینه سئو می باشد، استفاده کنید. در این افزونه بخش مجزایی برای ریدایرکت ها در نظر گرفته شده است که می توانید انواع ریدایرکت را در آن اجرا کنید. فراموش نکنید که نسخه کامل و کرک شده را از روکسو دانلود و به صورت دستی روی وردپرس خود نصب کنید تا از امکانات کامل آن بهره مند شوید.
در پایان امیدواریم این آموزش مورد استفاده شما عزیزان قرار گرفته باشد. همچنین در قسمت نظرات پاسخگوی سوالات شما خواهیم بود و می توانید مشکلات احتمالی را از این طریق با ما در میان بگذارید، هرچند مسئولیت خرابی های احتمالی سایت در صورت استفاده ناصحیح از کدها و دستورات به عهده خود شما خواهد بود.
منبعک روکسو

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


آموزش کار با اینستاگرام – قسمت اول
امروز با آموزش اینستاگرام در خدمت شما عزیزان هستیم.
همانطور که می دانید، در طی سالیان اخیر، شبکه اجتماعی اینستاگرام رشد چشمگیری داشته است. به طوری که از یک میلیون کاربر در سال 2010 به عدد خیره کننده بیش از یک میلیارد در سال 20 رسیده است!
اگر شما هنوز عضو این شبکه اجتماعی بسیار محبوب 1 میلیاردی نیستید، شاید بهتر است هرچه زودتر دست به کار شوید! این شبکه اجتماعی یک فرصت بی نظیر به شما می دهد که بخشی از زندگی دوستانتان باشید؛ به طور مثال زمانی که می خواهید بدانید دوستانتان در دانشگاه چگونه اوقات خود را سپری می کنند، کافیست به اینستاگرام آن ها مراجعه کنید.
همچنین شما می توانید در اینستاگرام به طور ویژه زندگی افراد مشهور و یا شخصیت های برجسته را در قالب عکس ها و فیلم های به اشتراک گذاشته شده، دنبال کنید.
اگر شما هم مشتاق پیوستن به این شبکه مجازی هستید، مجموعه درس های «هرآنچه درباره اینستاگرام باید بدانید» را دنبال کنید. این سری آموزشی، دربردارنده ی همه فوت و فن های آموزش اینستاگرام است.
با ما همراه باشید.
ثبت نام در اینستاگرامبرای ثبت نام در اینستاگرام از دو روش زیر می توانید استفاده کنید:
1. به آدرس اینترنتی https://www.instagram.com/accounts/emailsignup مراجعه کنید.
2. نرم افزار آن را از سایت های معتبر و یا مارکت های App Store (برای آیفون) و یا Google Play Store (برای اندروید) دانلود کنید.

اگر از روش اول برای ثبت نام در اینستاگرام استفاده می کنید، کافی است برای ثبت نام بر روی عبارت (Log in with Facebook) کلیک کنید و با حساب فیسبوک خود در اینستاگرام لاگین کنید. در غیر این صورت می توانید با پر کردن  فیلدهای mobile number or email, name, username, password و کلیک بر روی Sign up عملیات ثبت نام را به پایان برسانید.
در روش دوم و با استفاده از گوشی های اندرویدی کافی است بر روی عبارت Sign Up With Email or Phone Number کلیک و در ادامه، فیلدهای مربوطه را پر کنید.
در روش دوم و با استفاده از گوشی های آیفون کافی است بر روی عبارت Create New Account کلیک و فیلدهای مربوطه را پر کنید.

اعلانات (نوتیفیکیشن) در اینستاگرامهنگامی که حساب شما در اینستاگرام ساخته می شود، می توانید اعلانات را فقط برای دسته ای از کارها که دوست دارید فعال کنید. به طور مثال می توانید اعلانات (نوتیفیکیشن) را برای زمانی که کسی پستی از شما را (عکس، فیلم و …) لایک کرد فعال کنید و یا حتی اگر مایل بودید می توانید همه اعلانات را غیرفعال کنید.
برای مدیریت اعلانات کافی است مطابق تصاویر زیر عمل کنید:
وارد اکانت شخصی خود می شوید (آی آدمک در گوشه سمت راست پایین تصویر)
1) بر روی آی چرخ‌دنده (کنار دکمه Edit Profile) کلیک کنید.
2) بر روی عبارت Push Notification Settings کلیک کنید.
3) در نهایت از لیست باز شده، مواردی را که نیاز دارید فعال کنید.
انتشار پست های اینستاگرام در دیگر شبکه های اجتماعیشما می توانید پست های انتشار یافته داخل اینستاگرام خود را در دیگر شبکه های اجتماعی تان مانند فیسبوک و توییتر بازنشر کنید.
جهت انجام این کار مراحل زیر را انجام می دهیم:
1) در قسمت Settings زیر منوی Linked Accounts انتخاب می کنیم.
2) در ادامه، شبکه اجتماعی مورد نظر را که قصد دارید پست هایتان در داخل آن باز نشر کنید، انتخاب کنید و اطلاعات خواسته شده را وارد نمائید.
ایجاد، ویرایش و حذف پست در اینستاگرامبر خلاف فیسبوک که به متن و تصویر می پردازد و یا توییتر که عمده تمرکزش بر روی متن است، اینستاگرام یک پلتفرم کاملا بصری است که اجازه می دهد کاربران ویدیوها و عکس هایشان را در محیطی جذاب و به صورتی کاملا زیبا و خلاقانه به اشتراک بگذارند.
برای ایجاد پست در اینستاگرام مراحل زیر را دنبال می کنیم:
1) بر روی ای “+” در پایین وسط صفحه کلیک می کنیم.
2) پس از انتخاب “+” شما سه انتخاب خواهید داشت:

بر روی Library کلیک کنید و از داخل گوشی خود عکس و یا فیلم دلخواهتان را انتخاب کنید
بر روی Photo کلیک کرده، عکس جدیدی را گرفته و آن را انتخاب کنید.
بر روی Video کلیک کرده و ویدیو جدیدی را ضبط و آن را انتخاب کنید.

در ادامه من عکسی مانند زیر را از داخل گوشی تلفن همراه خود انتخاب و بر روی Next در بالای تصویر و سمت راستِ برنامه، کلیک کردم.
3) برای ویرایش تصویر، دو انتخاب خواهید داشت. استفاده از دسته Filter یا Edit.
اینستاگرام به صورت پیش فرض دسته Filter را در ابتدا نشان خواهد داد. شما می توانید با اسکرول افقی به سمت چپ و یا راست از دیگر فیلترهای موجود استفاده کنید.
برای کاهش و یا افزایش اثربخشی فیلتر انتخاب شده، کافی است بر روی فیلتر انتخابی خود دابل کلیک کرده و درنهایت با حرکت دادن نشانگر ماوس به چپ و راست، شدت آن را کنترل کنید.
4) با کلیک بر روی Edit می توانید ویژگی هایی مانند شفافیت، میزان گرم بودن و سرد بودن و … تصاویر را تنظیم کنید.
در صورتی که نیاز به ایجاد تغییرات خاصی بر روی عکس خود ندارید، کافی است بر روی Next کلیک کنید.
5) در ادامه می توانید موارد زیر را به پست خود اضافه کنید:
location ,caption ,tag people
(فقط کسانی را می توانید تگ کنید که اکانت اینستاگرام داشته باشند)
همچنین برای بازنشر پست خود در دیگر شبکه های اجتماعیی کافی است مطابق شکل آن را فعال کنید.
در ادامه برای انتشار پست اینستاگرامی خود بر روی “Share” کلیک کنید.
در اینجا به پایان قسمت اول از آموزش «هرآنچه درباره اینستاگرام باید بدانید» رسیدیم. امیدواریم که از آموزش اینستاگرام تا این لحظه استفاده کافی را برده باشید. در قسمت بعدی به شیوه گذاشتن استوری در اینستاگرام و فالو کردن دیگران در این شبکه اجتماعی می پردازیم.
 هرآنچه درباره اینستاگرام باید بدانید – قسمت دوم
منبع: روکسو

 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


تشخیص چهره با استفاده از OpenCV در پایتون
OpenCV چیست؟می‌توان OpenCV را به عنوان معروف‌ترین کتابخانه در حوزه بینایی ماشین (Computer Vision) معرفی کرد. اصل این کتابخانه برای زبان C/C++ نوشته شده اما با گذشت زمان، اکنون استفاده از آن در زبان برنامه‌نویسی پایتون نیز مقدور می‌باشد.
OpenCV برای یافتن چهره اشخاص در تصاویر مختلف، از الگوریتم‌های یادگیری ماشین استفاده می‌کند. به این دلیل که ساختار چهره بسیار پیچیده است و هیچ مثالی وجود ندارد که به وضوح، یافت شدن یا نشدن چهره در یک تصویر را اطلاع دهد. الگوریتم‌های بکار گرفته شده قادر هستند تا عملیات پیچیده تشخیص چهره را به هزاران عمل کوچک‌تر و باینری تقسیم کنند؛ سپس حل هر یک از این اعمال کوچک، بسیار ساده‌تر می‌شود. این اعمال کوچک را طبقه‌بندی‌‌‌ها یا Classifiers می‌گویند.
برای یک شیء مانند چهره، ممکن است شما ۶۰۰۰ یا تعداد بیشتری از طبقه‌بندی‌ها داشته باشید که هرکدام از آنها برای تشخیص داده شدن باید با قالب یک چهره همخوانی داشته‌باشند (که خطاهایی در این همخوانی هم وجود دارد). برای تشخیص چهره، الگوریتم، برسی تصویر را از بالا سمت چپ شروع کرده و به سمت پایین حرکت می‌کند و تصویر را در قالب خانه‌هایی کوچک از داده‌ها برسی می‌کند. سپس درباره هر قطعه این سوال از خود می‌پرسد: آيا این تصویر‌‌ِ یک چهره است؟ و در نهایت اگر خانه‌ای شبیه به چهره بود آن را ثبت می‌کند. برای درک بهتر این موضوع می‌توان یک پازل را در نظر گرفت؛ پازل یک تصویر است که به چندین خانه یا قطعه کوچکتر تقسیم شده‌است، حال اگر شما بخواهید در تصویر اصلی یک چهره را پیدا کنید، باید به ترتیب هر یک از قطعه‌های کوچک پازل را برسی کرده و در صورت وجود چهره آن را ثبت کنید. اما مشکل اینجاست که الگوریتم باید هر قطعه از تصویر را با ۶۰۰۰ طبقه‌بندی موجود تطابق دهد و این امر سبب افزایش حجم محاسبات می‌شود.
برای حل این مسئله، OpenCV از cascades استفاده می‌کند. حال casdcases چیست؟ بهترین جواب در لغت‌نامه این است: یک آبشار یا یک سری از آبشار‌ها.
Cascades در عملاگرچه تئوری تشخیص چهره پیچیده بنظر می‌رسد. اما در عمل بسیار ساده‌است. Cascades دارای گروهی از فایل‌های XML می‌باشند که این فایل‌ها دارای داده‌های مورد نیاز برای تشخیص اشیاء مختلف نظیر چهره، بدن، توپ و. هستند. کافیست فایل مورد نظر برای تشخیص شیء دلخواهتان را در کد وارد ‌کنید و OpenCV آن شیء را درون تصاویر تشخیص می‌دهد.
نصب OpenCVتوجه داشته باشید که این کتابخانه فقط از نسخه ۳.۶ به پایین پشتیبانی می‌کند. برای نصب آن، در Windows دستور زیر را در Command Prompt وارد کنید:
python –m pip install opencv-pythonدر Linux نیز دستور‌های زیر را وارد کنید:
sudo apt-get python3-pip python3-opencv pip install opencv-pythonبرای اطمینان از نصب کتابخانه، وارد IDLE پیش‌فرض پایتون شده و دستور زیر را وارد کنید:
import cv2اگر خطایی دریافت نکردید می‌توانید مراحل بعد را دنبال کنید.
نوشتن کد تشخیص چهرهقبل از هرچیز می‌توانید فایل XML مرتبط با تشخیص چهره را از اینجا دانلود کنید.
در ابتدا باید مقادیر لازم و آدرس دهی های لازم را در کد وارد کنیم:
import cv2 imagePath = "test.jpg" cascPath = "haarcascade_frontalface_default.xml"در خط اول پکیج‌ مورد نیاز را وارد کرده و در خط دوم آدرس عکس دلخواه خود و در خط سوم مسیر فایل XML دانلود شده را وارد می‌کنیم.
faceCascade = cv2.CascadeClassifier(cascPath)حال کلاس لازم برای تشخیص چهره را با استفاده از بارگذاری فایل XML مربوطه ایجاد می‌کنیم.
image = cv2.imread(imagePath) gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)در خط اول با استفاده از تابع imread، فایل عکس مورد نظر را بارگذاری کرده و در قالب یک ماتریس ۳ بعدی داخل متغییر image قرار می‌دهیم.
کتابخانه OpenCV فقط قادر به تشخیص اشیاء در تصاویر سیاه سفید می‌باشد پس در خط دوم تصویر رنگی را به تصویر سیاه و سفید تبدیل می‌کنیم.
faces = faceCascade.detectMultiScale( gray, scaleFactor=1.1, minNeighbors =5, minSize=(30, 30) )این تابع درواقع بخش کلیدی برنامه ما می‌باشد که عملیات تشخیص چهره را انجام می‌دهد. اما بیاید نگاهی به پارامترهای ورودی بیاندازیم:
اولین پارامتر متغییر gray یا همان تصویر سیاه سفید ما می‌باشد.
گاه ممکن است یک چهره در تصویر نزدیک‌تر از دیگر چهره‌ها درون تصویر باشد و بزرگتر بنظر برسد؛ scaleFactor معیاری برای متعادل کردن این اختلاف اندازه است.
الگوریتم تشخیص چهره از حرکت پنچره‌ای برای تشخیص استفاده می‌کند. پارامتر minNeighbors تعیین می‌کند که در عملیات تشخیص، به چند پنجره نزدیک پنجره اصلی توجه شود. همچنین minSize اندازه آن پنجره‌ها را تعیین می‌کند.
در نهایت این تابع یک لیست از مشخصات مکانی چهره‌های موجود در تصویر را برمی‌گرداند.
print("Found {0} faces!".format(len(faces))) # Draw a rectangle around the faces for (x, y, w, h) in faces: cv2.rectangle(image, (x, y), (x+w, y+h), (0, 255, 0), 2)حال با استفاده از مشخصات مکانی چهره‌ها نسبت به تصویر اصلی، مستطیل‌هایی دور آن‌ها رسم ‌می‌کنیم تا مشخص شود که این تشخیص‌ها درست بوده‌اند یا خیر. توجه داشته باشید که در اینجا با استفاده از تابع rectangle از کتابخانه OpenCV عملیات رسم را روی تصویر اصلی (رنگی) انجام می‌دهیم. زیرا در هنگام تبدیل عکس رنگی به سیاه سفید، ابعاد آن تغییری پیدا نمی‌کند و در نتیجه مشخصات مکانی چهره نیز ثابت می‌ماند.
مشخصات مکانی شامل نقطه عرضی (x) و نقطه طولی (y) که موقعیت را نشان می‌دهد و اندازه عرض (w) و اندازه طول (h) که ابعاد چهره را نشان می‌دهد، می‌باشد.
cv2.imshow("Faces found", image) cv2.waitKey(0)حال با استفاده از تابع imshow تصویر نهایی را نمایش می‌دهیم. و با متد waitKey منتظر می‌مانیم تا کاربر کلیدی را فشار دهد.
برسی نتایجابتدا اطمینان حاصل کنید که فایل تصویر و همچنین فایل XML در کنار فایل اصلی کد پایتون قرار گرفته باشند. اگر فایل‌های شما در مسیر دیگری وجود دارند حتما آدرس صحیح فایل را در ابتدای کد وارد کنید و توجه داشته باشید که در آدرس‌ها به جای استفاده از علامت Backslash از علامتSlash  استفاده کنید.
برای مثال بجای:
C:\Python\Project\test.jpgبنویسید:
C:/Python/Project/test.jpg
همانطور که در تصویر بالا مشاهده می‌کنید برنامه به خوبی کار می‌کند. حال تصویر دیگری را تست می‌کنیم.
در تصویر بالا دو خطا وجود دارد. برنامه به اشتباه دو بخش از تصویر را به عنوان چهره شناسایی کرده‌است. برای حل این مشکل پارامتر scaleFactor را به مقدار ۱.۳۵ تغییر می‌دهیم.
مشاهده می‌کنید که خطا رفع شده و فقط چهره‌ها انتخاب شده‌اند. اما چه اتفاقی افتاد؟ همانطور که در ابتدای مقاله گفته‌شد، ممکن است چهره‌ها در جایگاه‌های مختلفی درون تصویر قرار بگیرند که این امر گاهی سبب بروز خطا می‌شود. همچنین کیفیت تصویر داده شده نیز در دقت تشخیص نقش دارد. این خطا را می‌توان با تعیین scaleFactor مناسب حل کرد.
لازم به ذکر است که در روش یادگیری ماشین، هیچگاه تشخیص با دقت ۱۰۰٪ اتفاق نمی‌افتد.
منبع
راکت 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


تأثیرات برنامه‌نویسی روی سلامت انسان
اگرچه ممکن است کاری که انجام می‌دهیم را دوست داشته باشیم اما اگر به حقیقت نگاه کنید باید در نظر بگیرید که انجام هر کاری می‌تواند عواقب خودش را داشته باشد. برخی از کارها به شدت روی سلامت فیزیکی و روحی ما تاثیرگذار هستند. حال با قبول کردن این موضوع نیاز است تا با مشکلات موجود کنار آمده و راهکار مهمی را برای آن‌ها پیدا کنیم.
شغل‌های حوزه برنامه‌نویسی نیز استثناء نیستند. صرف کردن ساعت‌ها وقت پشت یک میز و نگاه کردن به نمایشگر، با دست‌ها و بدنی که تقریباً تحرک خاصی ندارند به علاوه Deadline کوتاه و تمام شدن وقت اداری همگی به صورت مشترک دست در دست هم می‌گذارند تا سلامتی شما را تهدید کنند. در این مطلب ما از ۶ طراح وبسایت که احساس گرفتن تأثیرات منفی از روند کاری کرده‌اند خواسته‌ایم تا در ارتباط با نکات عملی برای سلامت و شادی‌شان صحبت کنند.
افسردگی و نگرانی
 سلامتی روحی و روانی ما نیز می‌تواند بدلیل کاری که انجام می‌دهیم آسیب ببیند، البته این آسیب می‌تواند در درجات مختلف و به دلایل مختلف مانند نبود بالانس درست در زندگی کاری و یا زیاد بودن استرس در محیط کار ایجاد شود. این موضوع بیشتر از هر چیزی روی فریلنسرهایی تاثیرگذار است که در خانه کار می‌کنند. صرف کردن تمام روز در خانه و نشستن با یک پیژامه در حالتی که هیچ ارتباطی با دنیای خارج ندارید می‌تواند برای سلامت روانی شما بسیار مضر باشد. Matt Stenquist که یک طراح تجربه کاربری فریلنسر است می‌گوید که اولین تجربه من از افسردگی و نگرانی مربوط به زمانی می‌شود که به صورت فریلنسری زندگی می‌کردم: «زمانی که شروع به فریلنسر بودن کردم، یک محیط سمی را برای خودم ایجاد نمودم. من از خودم غافل شده بودم و افسردگی و فوبیا اینکه همسایه‌ها را نبینم را در خود بالا بردم. زمانی که قصد گرفتن ویزا را داشتم تا به مسافرت بروم متوجه شدم که در آزمایش فشار خون، من فشار خون بسیار بالایی دارم. در آن زمان بود که متوجه شدم من بیشتر از هر چیزی نیاز دارم تا یک رویکرد مثبت را در خودم توسعه بدهم و عادت‌های بدم را ترک بکنم. شادی مهمترین چیزی‌ست که هر کسی باید در زندگی داشته باشد. حال من به صورت روزانه به باشگاه می‌روم و به خوبی از سلامت روانی و فیزیکی خودم مراقبت می‌کنم.»
Michael Vestergaard یک توسعه‌دهنده خلاق و طراح تعاملات است. وی برای آنکه در ده سال تجربه فریلنسری خود به مشکلات فیزیکی و روانی برنخورد یک استراتژی مفید و عملی را پیاده‌سازی نمود: «در ارتباط با سلامت روانی مهمترین چیزی که برای من وجود داشت آن بود که حواس‌پرتی‌ها را حذف کرده و فیلتر مناسبی را روی شبکه‌های اجتماعی قرار دهم (من افرادی که در توییتر از چیزهای منفی و ناراحت‌کننده حرف می‌زدند را بلوک کردم). در ارتباط با بحث فیزیکی نیز مهمترین موضوع اجتناب و دوری از استرس و نگرانی است که البته دوری جستن از آن متأسفانه کاری سخت است.»
آسیب از فشار کار تکراری
 آسیب از فشار کار تکراری یا RSI یکی از بیماری‌هایی‌ست که روز به روز در حال بیشتر شدن بوده و برای سلامت انسان بسیار خطرناک است. این بیماری ناشی از آن از است که افراد بیشتری هر روز ساعت‌های کاری بسیاری را در پشت میز کامپیوترشان نشسته و کارهای تکراری روزمره را انجام می‌دهند. انجام چنین کاری گاهی اوقات باعث بی حس شدن اندام‌های فرد، سوزن سوزن شدن دستان و… می‌شود اما در بلند مدت این موضوع می‌تواند روی سلامت عضلات انسان، ستون فقرات، گردن و البته مغز فرد تأثیر بگذارد. 
Inayaili De Leon طراح سینیور در مایکروسافت می‌گوید: «من از زمانی که شروع به طراحی کردم (۱۴ سال پیش) از موضوع RSI آگاه بودم و از موضوعاتی که ممکن است آن را بدتر بکند اطلاعاتی کسب کردم. برای مواجهه شدن با این بیماری من متوجه شدم که باید روی محیط کارم بسیار تمرکز کرده و سخت‌گیر باشم، من روی کاناپه و یا تخت خواب کار نمی‌کنم. جلسات فیزیوتراپی می‌روم و از اینکه پول زیادی را بابت ماساژ و این جلسات خرج می‌کنم نیز نگران نیستم. البته با این وجود زمانی که می‌بینیم افراد دیگری این نکات را رعایت نمی‌کنند اذیت می‌شوم اما در کل RSI باعث شد تا بتوانم محدودیت‌های بیشتری را برای خودم در نظر بگیرم و به شکلی از دیگر چیزها در زندگی لذت ببرم.»
 Ted Goas طراح محصولات در استک‌اور‌فلو می‌گوید که در روتین کاری خود تغییرات بسیار بزرگی را بوجود آورده است: «در ابتدای روزهای کاری، من از وسائل ارگونومیک برای کار کردن استفاده نمی‌کردم، صندلی و میزم استاندارد نبودند و همچنین ماوس و کیبورد مناسبی نداشتم. در آن زمان بود که با گذراندن ساعت‌ها کار هر بار مشکلات مختلفی را در بدن خود احساس می‌کردم که به نحوی آزاردهنده بودند. در آن زمان بود که با یک تراپیست صحبت کردم و تغییراتی را در زندگی خودم بوجود آوردم. حال تمرینات کششی زیادی را در محیط کاری انجام می‌دهم، از صندلی و میز ارگونومیک استفاده می‌کنم و در بازه‌های زمانی مختلف به خودم استراحت می‌دهم. البته RSI من به کاملی رفع نشده اما می‌توانم احساس کنم که از بدتر شدن آن جلوگیری کرده‌ام.»
دردهای فیزیکی صرف کردن زمان زیاد پشت یک نمایشگر می‌تواند تاثیر منفی روی بدن ما داشته باشد. بدن ما هم برای چنین حالتی درست نشده است. Vestergaard می‌گوید که برای اجتناب از درد شانه و سر، هر روز با دوچرخه سر کار می‌روم و همچنین ارتفاع صندلی را مدام تغییر می‌دهم. همچنین مطمئن می‌شوم که محیط کاری‌ام به اندازه کافی نور داشته باشد. 
Sue Jenkins مدیر و استاد دانشگاه می‌گوید که من برای آنکه بتوانم ساعت‌های طولانی را کار کنم چندین راهکار ساده دارم: «سعی می‌کنم که محیط کاری روشنی داشته باشم، از سیم‌های مختلف روی میز کارم بیزارم به همین خاطر آن‌ها را به بی‌سیم تغییر دادم، از یک میز ایستاده استفاده می‌کنم تا بتوانم گاهی اوقات به صورت ایستاده نیز کار بکنم، در بازه‌های زمانی مختلف به یک فعالیت دیگر مشغول می‌شوم برای مثال پنج دقیقه حرکات کششی می‌روم و همین!»
مدیریت شرایط موجود
همه مشکلات ما ناشی از کار نیستند، برخی از آن‌ها را ما حتی قبل از اینکه کار بکنیم داشته‌ایم و یا آنکه دلیل مبتلا به آن‌ها کار نبوده است. در چنین حالت‌هایی نیاز است که به صورت منطقی و درست با آن برخورد کنیم. Michael Gearon می‌گوید که من مشکل کولیت دارم و از آنجایی که یک طراح وب هستم و همیشه با Deadlineها سروکار دارم نیاز است که خودم را از استرس دور نگه دارم. وی برای اینکه مشکل خودش را در شرکت حل بکند تصمیم گرفت که منابع انسانی و هم تیمی‌های‌ش را از این مشکل آگاه سازد تا اگر زمانی مشکلی بوجود آمد بتواند دلیل موجهی داشته باشد. این روش بسیار مناسبی برای حذف تنش و اضطراب در محیط کاری است.
در پایان
با گذشت هزاران سال از عمر بشر روند زندگی وی نیز تغییرات بسیار زیادی داشته است. با وجود آنکه بشر اولیه موجود بسیار پرتحرک و پر جنب و جوشی بوده است اما بشرهای امروزی اینگونه نیستند. کافی‌ست به یک شرکت برنامه‌نویسی بزرگ بروید، صدها نفر را مشاهده می‌کنید که پشت یک صندلی نشسته‌اند و تنها نقطه بدن‌شان که تکان می‌خورد انگشتان‌شان است. از آنجایی که بدن ما برای انجام چنین کارهایی طراحی نشده است نیاز است تا خودمان تغییراتی را در شرایط کاری اعمال کنیم. با در نظر گرفتن این نکات و تجربیات مطمئنا می‌توانید سفر سالم‌تری را برای کار کردن به عنوان یک برنامه‌نویس داشته باشید.
منبع
#برنامه‌نویسی#س
راکت

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


طراحی اپلیکیشن‌های موبایل
در این مطلب از وبسایت راکت قصد داریم شما را با دنیای طراحی اپلیکیشن‌های موبایل آشنا کنیم. اگر شما نیز به این موضوع علاقه‌مند هستید اما نمی‌دانید از کجا باید شروع کنید، این مطلب برای شماست. 
اگر دنبال مطالب دیگری در ارتباط با طراحی اپلیکیشن‌های موبایل هستید به شما پیشنهاد می‌کنم این صفحه را دنبال کنید.
منظور از طراحی اپلیکیشن موبایل چیست؟باید گفت که موضوع طراحی اپلیکیشن‌های موبایل می‌تواند دامنه گسترده‌ای از کارهای مختلف را در نظر بگیرد. طراحی اپلیکیشن موبایل فارغ از تکنیک‌های مختلف، ترکیبی از طراحی رابط کاربری و تجربه کاربری است. طراحان این فیلد وظیفه دارند تا استایل کلی اپلیکیشن را ایجاد کنند که این موضوع شامل رنگ‌بندی درست، انتخاب فونت، استایل مربوط به دکمه‌ها و ویجیت‌ها و… است. حال شاید بپرسید که چگونه این کار را شروع کنم؟ در ادامه مطلب این موضوع را بررسی می‌کنیم.
طراحی برای پلتفرم
اولین سوالی که پیش خواهد آمد و شما باید آن را جواب بدهید این است که می‌خواهید برای چه پلتفرمی اپلیکیشن طراحی کنید؟ شاید از قبل جواب این سوال را در نظر گرفته باشید و همواره به یک پلتفرم پایبند مانده باشید. اما اگر در این رابطه مطمئن نیستید چه؟ 
باید بگویم که بهترین روش این است که با آشناترین گزینه شروع کنید. برای مثال اگر سال‌هاست با آندروید کار می‌کنید، اپلیکیشن‌های مربوط به آندروید را طراحی نمایید. اگر از iOS استفاده می‌کنید با آن شروع کنید. البته این بدان معنا نیست که شما نمی‌توانید برای هر دو طراحی کنید، اگر پتانسیل کافی را برای انجام این کار دارید می‌توانید هر دو پلتفرم را در نظر بگیرید. اما پیشنهاد من این است که ابتدا با یکی از آن‌ها شروع کنید.
ابزارها
بعد از آنکه به این موضوع پی بردید که قصد طراحی برای چه پلتفرمی را دارید می‌توانید ابزارهای طراحی‌تان را انتخاب کنید. خبر خوب این است که فارغ از پلتفرم مورد نظر، ابزارهای طراحی دست شما را در ساخت هر شکلی از طراحی باز نگه می‌دارند. 
انتخاب‌های محبوب شامل ادوبی فوتوشاپ، ایکس‌دی و اسکچ می‌شوند. البته ابزارهای بسیار زیادی دیگری نیز وجود دارند اما به شکلی می‌توان این موارد را محبوب‌ترین آن‌ها دانست.
شاید فکر کنید که فوتوشاپ انتخابی عالی برای طراحی اپلیکیشن موبایل است، چرا که فوتوشاپ یک ابزار تقریبا همه کاره در عرصه طراحی به شمار می‌آید. اما باید بگویم که ایکس‌دی و اسکچ می‌توانند حرفه‌ای‌تر و بهینه‌تر عمل نمایند. به همین دلیل بهتر است ابتدا سراغ یکی از این دو مورد بروید.
ایکس‌دی و اسکچ دو ابزاری هستند که قابلیت‌های زیادی برای نمونه‌سازی و طراحی یک ایده را به صورتی سریع به شما می‌دهند. فوتوشاپ این قابلیت را ندارد، چرا که فوتوشاپ بیشتر ابزاری برای ویرایش تصویر است نه خلق آن! اما از آنجایی که ایکس‌دی و اسکچ ابزارهای منحصر به فردی برای طراحی اپلیکیشن موبایل را در اختیار دارند فرایند طراحی و تکامل نمونه‌های اولیه در آن بسیار سریع‌تر انجام می‌شود.
به عنوان یک نکته مهم دیگر: اگر قصد طراحی برای پلتفرم‌های مختلف را دارید بهتر است سراغ ادوبی ایکس‌دی بروید چرا که در دو سیستم عامل ویندوز و مک وجود دارد، برخلاف اسکچ که تنها در مک‌او‌اس موجود است.
راهنما‌های طراحیقبل از اینکه عملیات طراحی را شروع کنید نیاز است تا یکسری اطلاعات کلی در ارتباط با پلتفرم و راهنماهایی که مربوط به طراحی می‌شوند را مطالعه نمایید. یکی از اصلی‌ترین قواعد «احترام به پلتفرم» است. منظور از این مورد، طراحی به شیوه‌ای است که رابط کاربری سیستم عامل آن را استاندارد می‌داند. اگر به این صورت عمل کنید کاربران متوجه می‌شوند که اپلیکیشن شما در تعارض با دیگر المان‌های سیستم عامل و اپلیکیشن‌ها نیست، بنابراین می‌توانند به خوبی از آن استفاده کنند. 
برای اینکار ابتدا ساختار و الگوهای طراحی هر کدام از المان‌های رابط کاربری هر یک از پلتفرم‌ها را مشاهده کنید. برای مثال شیوه استفاده از دکمه‌ها را در رابط کاربری استاندارد iOS و Android مشاهده کرده و براساس آن جلو بروید. 
خبر خوب هم این است که هر کدام از پلتفرم‌ها قواعد طراحی مخصوص خودشان را دارند که با مطالعه و مشاهده آن‌ها می‌توانید جلو بروید. در زیر می‌توانید لینک هر کدام را مشاهده کنید:
آندروید
iOS
وایرفریم و جریان اپلیکیشن
قبل از اینکه عملیات طراحی را شروع کنید بسیار مهم است که ظاهر و جریان کاربری کلی اپلیکیشن را ایجاد کنید. این کاری است که وایرفریمینگ نامیده می‌شود. وایرفریمینگ به شما کمک می‌کند تا ساختار و کنترل کلی اپلیکیشن را درک کنید. وایرفریم‌ها به صورت کلی ساده طراحی می‌شوند چرا که هدف اصلی از آن‌ها استفاده‌پذیری و جریان کلی کاربری است.
با وجود آنکه ابزارهای وایرفریم مختلفی وجود دارد اما بعضی از طراحان هنوز تمایل به استفاده از قلم و کاغذ برای طراحی این قسمت را دارند. با این حال اگر دنبال یک رویکرد بهتر همراه با اجازه برای قابلیت‌هایی مانند همکاری و… هستید استفاده از یک ابزار وایرفریم بسیار مناسب‌تر است. اسکچ و ادوبی‌ ایکس‌دی نیز از جمله ابزارهایی هستند که این قابلیت‌ها را برای شما فراهم می‌کنند.
نمونه‌سازی اولیه
بعد از ایجاد وایرفریم و تایید آن‌ها توسط تیم طراحی و یا مشتری، حال نوبت به ساخت نمونه اولیه از اپلیکیشن می‌رسد. البته اگر وایرفریم اولیه را در یک ابزار طراحی ایجاد کرده باشید انجام این قسمت بسیار ساده خواهد بود چرا که شما نصف راه را رفته‌اید. 
به عنوان یک نکته مهم این موضوع که کتابخانه طراحی خودتان را داشته باشید می‌تواند کمک بسیار زیادی برای شما باشد. در این حالت دیگر نیازی نیست برای هر اپلیکیشن طراحی جداگانه‌ای داشته باشید، بلکه می‌توانید از آی‌ها و دکمه‌های استانداردی که پیشتر طراحی کرده‌اید استفاده نمایید.
کار با توسعه‌دهندگان
طراحان باید بتوانند با توسعه‌دهندگان ارتباط داشته باشند و وظایف خودشان را در قبال توسعه‌دهنده بدانند. طراحان باید فایل‌ها و المان‌های طراحی را که برای پیاده‌سازی اپلیکیشن اصلی نیاز است را در اختیار توسعه‌دهندگان قرار بدهند. اگر قابلیت تعامل سازنده را با توسعه‌دهنده نداشته باشید ممکن است همه چیز با شکست مواجه شود.
به عنوان یک طراح می‌توانید کار با توسعه‌دهندگان و تعامل با آن‌ها را نادیده بگیرید اما این موضوع در نهایت باعث می‌شود که چالش‌های بسیاری برای توسعه‌دهندگان بوجود بیاید که مقصر اصلی تمام آن‌ها شما خواهید بود.
در پایان
در این مطلب از وبسایت راکت سعی کردیم تا شما را با مقدمات طراحی اپلیکیشن‌های موبایل آشنا کنیم.  ما ابتدا با تعریفی کلی از طراحی اپلیکیشن موبایل شروع کردیم و سپس راه‌های بعدی که نیاز به انتخاب آن‌ها را دارید بررسی نمودیم.
منبع
راکت

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


۵ ترفند عالی برای طراحی سایت با اسکرول طولانی
استفاده از اسکرول در طراحی سایتاگر نگاهی به سایت های جدید و ترندهای طراحی وب سایت داشته باشید در خواهید یافت که دوره وب سایت های تک صفحه ای رو به اتمام است. وب سایت های طویل که برای مشاهده محتوا باید به طور مداوم اسکرول کنید تا به انتهای صفحه برسید، به سرعت در حال محبوب شدن هستند زیرا این تکنیک به خوبی در تلفن های همراه جواب می دهد.
فراگیر شدن استفاده از تلفن همراه میان کاربران نقش بسیار مهمی در محبوب شدن تکنیک اسکرول طولانی یا همان long scroll داشته است. هر چه صفحه نمایش کوچکتر باشد، اسکرول طولانی تر خواهد بود.
استفاده از این روش دست طراح را در طراحی وب سایت باز می گذارد اما این تکنیک ضعف هایی نیز دارد. در این روش طراح باید دقت بسیار زیادی به محتوا، دسترسی و انیمیشن داشته باشد. در این مقاله به 5 ترفندی که سبب می شوند کاربر وب سایت را با اشتیاق اسکرول کند می پردازیم.
1- محتوای اصلی را در ابتدای صفحه قرار دهیدطبق تحقیقات صورت گرفته کاربران به محض بارگذاری صفحه، اسکرول می کنند. بنابراین توجه به محتوای بخش بالای صفحه اصلی بسیار مهم است. محتوای قرار گرفته در این قسمت به سرعت توسط کاربر دیده شده و سبب شکل گیری برداشت اولیه یا impression از وب سایت شما می شود. کاربر کیفیت وب سایت را از این قسمت می سنجد. اگر محتوای قرار گرفته در این بخش جذابیت و کیفیت لازم را داشته باشد کاربر مشتاق به اسکرول کردن و بازدید از دیگر بخش های وب سایت خواهد شد.
علاوه بر تاثیر این کار بر جلب نظر مخاطب، میتوان بر تاثیر آن بر سئو صفحه نیز اشاره نمود. محتوایی که در نگاه اول به کاربر نمایش داده میشود از نظر گوگل بسیار با اهمیت است و همواره پیشنهاد کرده است که عنوان صفحه و توضیحاتی از محتوای آن در این بخش برای کاربر در دسترس باشد.
برای آنکه از اسکرول کردن کاربر اطمینان حاصل کنید، باید محتوایی ارائه کنید که جالب توجه باشد. برای اینکار جذاب ترین محتوای خود را در بخش بالایی صفحه نخست قرار دهید. مثلا نکات جالبی را بگذارید که می دانید کاربر را مجذوب خود خواهند کرد. از تصاویر دلنشین در طراحی وب سایت خود استفاده کنید، بازدید کنندگان توجه زیادی به تصاویر می کنند.
2- با المان های گرافیکی مسیر حرکت کاربر را مشخص کنیدبعضی اوقات بهترین روش برای تشویق کاربران به اسکرول، درخواست کردن از آنهاست. به طور صریح به آنها بگویید که محتوای بیشتر در پایین صفحه قرار گرفته است. یک ترفند زیرکانه قرار دادن فلشی که به سمت پایین نشانه رفته یا قرار دادن متن “لطفا اسکرول کنید” است، با این کار به کاربر اطلاع می دهید که بخش اعظم محتوا در پایین صفحه قرار دارد.
اگر المان قرار گرفته در این بخش متحرک باشد جلب نظر بیشتری برای کاربر خواهد داشت. همچنین میتوانید از رنگ دیگری برای این تصویر یا متن استفاده کنید تا از محتوای دیده شده در صفحه متمایز باشد. اگر المان تشویق کننده برای اسکرول قابل کلیک باشد کاربر میتواند به راحتی به بخش مورد نظر شما راهنمایی شود.
3- منوی سایت را همیشه در دسترس قرار دهیدمنوی سایت عاملی تعیین کننده در تجربه مثبت یا منفی کاربر از وب سایت دارد. یکی از ریسک های استفاده از تکنیک اسکرول طولانی در طراحی وب سایت، سردرگم نمودن کاربر است. اگر هنگام اسکرول کردن منو ناپدید شود، کاربر برای دسترسی به منو باید دوباره به صفحه اول سایت اسکرول و مسیر رفته را برگردد. این عمل کاربر را گیج کرده و حوصله او را سر خواهد برد.
راه حل استفاده از یک منوی استیکی sticky در طراحی وب سایت است که به کاربر نشان می دهد در حال حاضر در کدام بخش از سایت قرار دارد و چطور میتواند به سایر بخش ها دسترسی داشته باشد.
چون صفحه نمایش موبایل کوچکتر از صفحه نمایش کامپیوتر است، استفاده از منوی استیکی بخش اعظم صفحه را اشغال خواهد کرد. یکی از راه حل های این موضوع، برنامه نویسی منو به گونه ای است که وقتی کاربر به پایین اسکرول می کند تا مطالب بیشتری را بخواند منو ناپدید شده و هنگام بازگشت به بالا منو پدیدار شود.
4- از انیمیشین های کاربردی برای جذب کاربر استفاده کنیداستفاده از افکت های زیبای بصری مانند parallax scrolling و انیمیشن هایی که با اسکرول کاربر به نمایش در می آیند سبب مجذوب کردن کاربران خواهند شد. استفاده از آنها اسکرول کردن را به کاری فرح بخش تبدیل می کند. کاربر پس از هر بار اسکرول و نمایش انیمیشن کنجکاو شده و به اسکرول کردن ادامه میدهد تا انیمیشن های بعدی را هم ببیند.
مثلا می توانید سایت خود را به قسمت های قابل اسکرول مختلف تقسیم کنید و در هر قسمت محتوای خود را با استفاده از انیمیشن های خلاقانه معرفی کنید. با هر اسکرول انیمیشن ها به نمایش درآمده و با حرکتی خلاقانه کاربر به قسمت بعدی راهنمایی می شود.
پارالاکس افکت محبوب دیگری است که سبب لذت بخش نمودن اسکرول می شود. استفاد از این افکت سبب عمق دهی به تصاویر شده و اینطور به نظر می رسد که عکس پس زمینه با سرعت کمتری از متن روی آن حرکت می کند. اگر می خواهید وب سایتی خلاقانه طراحی کنید که راوی داستانی خطی است، استفاده از تکنیک اسکرول طولانی همراه با افکت پارالاکس سبب ایجاد تجربه ای لذت بخش برای کاربر خواهد شد.
5- از Scroll Hijacking استفاده نکنیدوب سایت هایی که از اسکرول های جکینگ scroll hijacking استفاده می کنند کنترل اسکرول مرورگر را به دست گرفته و عملکرد آن را تحت الشعاع  قرار می دهند. استفاده از این تکنیک خوب نیست چون کاربر دیگر کنترل کاملی بر اسکرول صفحه نداشته و نمی تواند رفتار آن را پیش بینی کند. تعامل کامل کاربر با اسکرول نباید قربانی تجربه روایت صفحه شود.
جمع بندیاستفاده از اسکرول طولانی می تواند منجر به تجربه ای مجذوب کننده برای کاربر شود. می توان مسیر سفر را همانند مقصد لذت بخش نمود. زمانی که کاربران محتوای سایت را پسندیده و رابط کاربری را خلاقانه بیابند، به طول صفحه توجهی نخواهند کرد.  ولی در مقابل باید به حجم صفحه و مدت بارگذاری آن نیز دقت کنید. طولانی بودن اسکرول نباید زمان انتظار کاربر برای لود شدن کامل صفحه را افزایش دهد. برای مشاهده نمونه های بیشتر پیشنهاد میکنیم به بخش نمونه کارهای طراحی سایتدر وبسیما مراجعه نمایید.
تکنیک هایی مانند Lazy Imag
اگر شما هم تجربه ای در استفاده از اسکرول طولانی در طراحی سایت و تاثیر آن بر رفتار کاربران داشته اید در بخش نظرات همین مقاله با ما به اشتراک بگذارید.
منبع: وب سیما

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


چطور نرخ کلیک یا CTR خود را افزایش دهیم
اگر قصد دارید در سال ۲۰۱۸ سئو سایت خود را تقویت کنید و جایگاه بهتری نسبت به رقبا کسب کنید باید به CTR یا نرخ کلیک کاربران در نتایج گوگل توجه ویژه ای داشته باشید. در سری آموزشی تکنیک های سئو ۲۰۱۸ به الگوریتم RankBrain و تاثیر آن بر سئو اشاره کردیم که نشان دهنده تاثیر نرخ کلیک بر رتبه بندی نتایج گوگل است. در این مقاله تلاش میکنیم ابتدا بدانیم CTR چیست و پس از آن تکنیک های افزایش نرخ کلیک را به شما آموزش میدهیم.
CTR چیست؟قبل از تعریف دقیق تر باید بدانیم CTR مخفف چیست. این عبارت از ترکیب سه کلمه Click Through Rate تشکیل شده است که نزدیک ترین ترجمه در زبان فارسی برای آن میشود نرخ کلیک.
زمانیکه یک کاربر در موتور جستجوی گوگل جستجو میکند نتایج مختلفی را مشاهده میکند. با مشاهده لیست نتایج تصمیم میگیرد که بر روی کدام یک از آنها کلیک کند. نرخ کلیک در واقع درصدی از کاربران است که در نتایج جستجو بر روی لینک سایت شما کلیک میکنند.
تعداد کلیک کاربران بر روی سایت شما تقسیم بر تعداد نمایش صفحه 
مقدار CTR برای هر کلمه کلید و هر صفحه متفاوت است. بعنوان مثال ممکن است CTR شما برای عبارت آموزش سئو ۱۰ درصد باشد ولی برای عبارت آموزش سئو حرفه ای ۱۸ درصد باشد و هر دو عبارت به یک صفحه از سایت منتهی شوند. همچنین یک عدد CTR متوسط برای هر صفحه از سایت شما محاسبه میشود که میانگین CTR تمام کلماتی است که با جستجوی آنها صفحه شما در نتایج جستجو نمایش داده میشود.
آموزش ویدئویی: CTR چیست و چه کاربردی دارد؟نمایشگر ویدیو
 
 
00:00
 
08:58
 
 
زمانیکه یک کاربر در موتور جستجوی گوگل جستجو میکند نتایج مختلفی را مشاهده میکند. با مشاهده لیست نتایج تصمیم میگیرد که بر روی کدام یک از آنها کلیک کند. نرخ کلیک در واقع درصدی از کاربران است که در نتایج جستجو بر روی لینک سایت شما کلیک میکنند.
Impression چیست؟Impression به معنی حضور شما در نتایج جستجو است. هر زمان که یک کاربر عبارتی را در گوگل جستجو میکند برای تمام نتایج موجود در صفحه یک Impression ثبت میشود. حتی اگر شما در باکس های ویژه مانند نمایش نقشه یا نمایش تصاویر حضور داشته باشید یک impression برای شما لحاظ میشود.
اگر شما در انتهای صفحه دوم نتایج گوگل باشید ولی کاربر به این صفحه مراجعه نکند برای شما Impression ثبت نمیشود ولی اگر کاربر وارد صفحه دوم شود حتی اگر تا پایین صفحه اسکرول نکند که نتیجه شما را مشاهده کند برای شما impression لحاظ میگردد.
CTR متوسط براساس رتبه بندی گوگلبه طور متوسط هر رتبه در نتایج گوگل درصد مشخصی از کلیک کاربران را به خود اختصاص میدهد. بیشترین CTR معمولا مربوط به رتبه یک گوگل است که در حال حاضر در دسکتاپ نزدیک به ۳۲ درصد و در موبایل ۲۴ درصد است. دقت کنید که این یک عدد متوسط جهانی است یعنی برای تمام عبارات و سایت ها. در نتیجه ممکن است شما رتبه یک گوگل باشید ولی CTR شما بیش از ۸۰ درصد و یا حتی کمتر از ۲۰ درصد باشد.
نمودار زیر عدد متوسط CTR برای رتبه بندی نتایج گوگل را در نوامبر ۲۰۱۷ و در دو نسخه موبایل و دسکتاپ نمایش میدهد. همانطور که در نمودار مشخص است رتبه ۱ گوگل مجموعا به اندازه رتبه های ۲،۳، ۴ و ۵ بازدیدکننده جذب میکند و همین امر اهمیت کسب رتبه یک گوگل را نمایش میدهد.
طی دو سال اخیر گوگل ابزارهای مختلفی مانند نقشه گوگل، نمایش اخبار، rich snippets و … را معرفی کرده است که هریک فضایی از صفحه نتایج جستجو را به خود اختصاص میدهند. علاوه براینها باید تبلیغات گوگل را نیز به این لیست اضافه کرد زیرا عملا جایگاه رتبه ۱ و نرخ کلیک را تحت تاثیر قرار میدهد.
آمارها حاکی از آن است که طی تنها دو سال ارزش رتبه ۱ گوگل ۳۷ درصد کاهش داشته است. یعنی اگر دو سال پیش رتبه ۱ بودید تقریبا ۵۰ درصد کاربران را به خود جذب میکردید ولی امروز این عدد به نزدیک ۳۲ درصد کاهش پیدا کرده است. در مقابل البته آمار جستجو در گوگل رشد چشم گیری داشته و تعداد جستجوها نسبت به دو سال پیش بسیار بیشتر شده است.
چطور نرخ کلیک و CTR خود را افزایش دهیمزمانیکه کاربر  لینک سایت شما را در نتایج جستجو مشاهده میکند، زمان کوتاهی برای تصمیم گیری در مورد آنکه این سایت متناسب با نیاز او هست یا نه صرف میکند و تصمیم میگیرد که روی آن کلیک کند یا نه. برای آنکه در این زمان کوتاه بر روی ذهن مخاطب تاثیر مثبت ایجاد کنید چند فضای مناسب در اختیار دارید که در تصویر زیر نمایش داده شده است.
1- عنوان صفحه در نتایج جستجوعنوان هر صفحه از سایت شما توسط تگ title که در هدر صفحه قرار دارد تعیین میشود. قبلا مقاله ای برای آموزش سئو عنوان صفحه منتشر کرده ایم که میتواند برای شما جذاب باشد. ولی در این بخش در مورد سئو صحبت نمیکنیم بلکه قصد داریم شانس کلیک را افزایش دهیم.
به طور متوسط فضای موجود برای عنوان در نتایج جستجو ۷۰ کاراکتر است که به شما اجازه میدهد از عبارات جذابی در آن استفاده کنید. برخی کلمات هستند که در فضای وب رواج یافته و نشان دهنده یک مفهوم مشخص به کاربر هستند. به طور معمول درصد بیشتری از کاربران با دیدن این عبارات در عنوان صفحه روی آن کلیک میکنند. برای مثال میتوان به عبارات زیر اشاره کرد.
امروز، همین حالا، سریع، قدم به قدم، آسان، ساده، ارز
2- نمایش توضیحات متا در نتایج جستجوتوضیحات متا دقیقا زیر عنوان نمایش داده میشود و فضایی بزرگتر ولی با فونت کوچکتر در اختیار شما قرار میدهد. تا همین چند ماه پیش طول کاراکتر توضیحات متا حداکثر ۱۷۰ کاراکتر بود ولی گوگل آن را تا سقف ۳۲۰ کاراکتر افزایش داد.
هنگام نوشتن توضیحات متا تلاش کنید توصیفی دقیق از محتوای صفحه در اختیار او قرار دهید و با استفاده از جملات جذاب او را به مطالعه متن کامل مقاله ترغیب کنید. بعنوان مثال اگر در توصیف محصول خود بنویسید “به همراه هدیه ویژه” یا “همراه با ودیوی آموزشی” شانس شما برای انتخاب توسط کاربر بیشتر خواهد شد. پیشنهاد میکنم برای درک بهتر مقاله سئو توضیحات متا را مطالعه کنید.
3- استفاده از نشانه گذاری استاندارد یا Schemaاحتمالاشما هم هنگام جستجو در نتایج گوگل سایت هایی را مشاهده کرده اید که در کنار عنوان و توضیحات اطلاعات تکمیلی نیز به کاربر نمایش میدهند. معروف ترین نمونه نشانه گذاری استاندارد به سیستم امتیازدهی مربوط میشود که همانند تصویر زیر و به صورت ستاره های زرد رنگ در نتایج جستجو نمایش داده میشود. استفاده از این ابزار به شما کمک میکند توجه کاربر را جلب کرده و CTR خود را بهبود دهید. برای درک مفهوم نشانه گذاری استاندارد مقاله Schema  چیست را مطالعه کنید.
آیا افزایش CTR بر سئو تاثیرگذار است؟بله، افزایش نرخ کلیک شما تاثیر مستقیم بر رتبه بندی نتایج گوگل خواهد داشت. زمانیکه نرخ کلیک شما در مقایسه با جایگاهی که دارید بالاتر باشد گوگل با استفاده از الگوریتم RankBrain جایگاه شما را بهبود خواهد داد.
بعنوان مثال تصور کنید شما در رتبه ۳  گوگل هستید، این رتبه به طور متوسط ۹ درصد از کاربران را به خود جذب میکند. ولی لینک شما به دلیل جذابیت عنوان و توضیحات خود نزدیک به ۱۵ درصد از مخاطبین را جذب میکند. این عدد نزدیک به درصد کلیک رتبه دو گوگل است. اگر رتبه دوم جذابیت لازم را برای کاربران نداشته باشد گوگل جای این دو لینک را با هم عوض خواهد کرد.
حتی اگر جایگاه شما بهبود نیابد شما میتوانید با همان رتبه بازدیدکننده بیشتری کسب کنید. تصویر کنید که روزانه ۱۰۰۰ نفر عبارت مورد نظر شما را جستجو میکنند و ۱۰ درصد آنها شما را انتخاب میکنند. حالا اکر نرخ کلیک یا CTR شما به ۲۰ درصد افزایش یابد عملا بازدیدکنندگان شما دو برابر خواهد شد.
افزایش تعداد بازدیدکننده و بهبود رتبه در نتایج گوگل، موجب میشود که افزایش C
افزایش CTR سایت با استفاده از رباتیکی از اولین روش هایی که به ذهن متخصصین سئو میرسد ایجاد کلیک های غیرواقعی برای سایت است. اگر واقعا نرخ کلیک میتواند بر رتبه بندی گوگل تاثیر گذار باشد میتوانیم ربات هایی طراحی کنیم که با IP های متفاوت عبارت مورد نظر ما را جستجو کرده و بر روی سایت ما کلیک کنند. با این کار CTR ما به شدت بالا میرود.
خوشبختانه (یا شاید متاسفانه) این تکنیک نه تنها تاثیری بر بهبود جایگاه شما نخواهد داشت بلکه ممکن است موجب از دست رفتن جایگاه فعلی و جریمه شما توسط گوگل شود. گوگل الگوریتم های پیچیده و قدرتمندی برای تشخیص ربات از کاربر دارد که به او اجازه میدهد به راحتی این رفتار را شناسایی کند. اطلاعاتی مانند محل جغرافیایی، سوابق اکانت گوگل، جستجو های پیشین و … که برای یک ربات قابل تعریف نیستند.
علاوه براین همواره در مقالات آموزش سئو تاکید کرده ایم که تکینک های فریبنده در کوتاه مدت ممکن است تاثیر مثبتی بر روند کاری شما داشته باشند ولی در درازمدت آسیب های جدی به سئو سایت شما وارد میکنند.
ممکن است تصور کنید که با استفاده از نیروی انسانی واقعی و با اکانت های گوگل میتوان این رفتار را شبیه سازی کرد. بله در صورتیکه کاربران واقعی این رفتار را انجام دهند میتواند بر رتبه شما تاثیرگذار باشد ولی این تعداد کاربر را از کجا به دست می آورید؟
برخی کلمات ارزشمند ممکن است در روز هزا
اگر تجربه ای از بهبود جایگاه خود با افزایش نرخ CTR یا حتی از دست رفتن جایگاه به دلیل نرخ کلیک پایین دارید با ما در میان بگذارید. مشاورین وبسیما پاسخ گوی سوالات شما خواهند بود.
19دسامبر201710:00تحریریه وبسیما27
منبع وب سیما
https://websima.com/ctr-%da%86%db%8c%d8%b3%d8%aa/
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


وقتشه سایت شخصی خودت رو داشته باشی!
ارها برای من اتفاق افتاده که نتوانستم عبارت درستی را برای رسیدن به جواب موردنظرم در اینترنت جست‌وجو کنم. به عبارت خودمانی‌تر حتی نتوانستم منظورم را به گوگل بفهمانم!
شاید فکر کنید در چنین مواقعی اشتباه از ما است که نمی‌توانیم در دنیای نامحدود اینترنت به جواب برسیم اما واقعیت عجیب‌تر از این است و در اصل: «اشتباه از جواب است که شما را پیدا نمی‌کند!»
می‌پرسید چرا؟ یک متخصص سئو (یا بهینه‌سازی برای موتورهای جست‌وجو) خوب می‌داند که من چه می‌خواهم بگویم. چرا که وظیفه‌ او دقیقا این است که جواب‌های موجود در یک کسب‌وکار یا هر سایت دیگر را طوری دسته‌بندی و تنظیم کند که شما با هر نوع روش جست‌وجو آن را پیدا کنید!
 
فهرست محتوای این مقاله
خب این چه ربطی به درست کردن وب‌سایت دارد؟
۱- راحتی بیشتر در برقراری ارتباط
۲- نمایشی از جدیت و پیگیری
۳- روزمه‌ای شبانه‌‌روزی!
۴- مِلک‌شخصی تو، در دنیای مجازی

هزینه/فایده
الف) دامنه
ب) هاست

کارهایی که می‌توانید انجام دهید
بچه‌های وردپرس!
دنیای تو، دنیای ایده‌ها
خب این چه ربطی به درست کردن وب‌سایت دارد؟مهم نیست چه شغلی دارید یا بیشتر روز را به چه فعالیتی اختصاص می‌دهید. مهم این است که شما یک شخصیت هستید که با تمام خوبی‌ها و نقاط ضعفش می‌تواند شناخته‌تر شود. وقتی افراد بیشتری شما را بشناسند، هم‌صحبت‌ها، مشتری‌ها، ایده‌ها، انتقادات و پیشنهادات بیشتری هم در انتظارتان است.
کار یک وب‌سایت شخصی دقیقا کمک به شما برای شناخته‌‌تر شدن‌‌تان است!
به مناسبت روز جهانی وب، فرصت را مناسب دیدیم تا موضوع پرطرفردار ساخت سایت را بررسی کنیم.
با ایجاد سایت می‌توانید کسب‌وکار خانوادگی یا استارتاپ خودتان را تبلیغ کنید، دیگران را به بحث دعوت کنید، ایده‌ها و نظراتتان را منتشر و یا اینکه حتی صرفا از سایت خود به‌عنوان دفترچه خاطره‌ای مجازی استفاده کنید.
 
پیشنهاد فرانش به شما
 
برای آن‌هایی که زبان یاد نمی‌گیرند!
 
برای رسیدن به این منظور، در ادامه، راهکارهای ساده و ارزان قیمتی را بررسی می‌کنیم اما پیش از آن‌ها می‌خواهم به‌طور خلاصه دیگر مزیت‌های ساخت وب‌سایت شخصی را معرفی کنم:
 

۱- راحتی بیشتر در برقراری ارتباط
با کمک سایتی که برای خود می‌سازید، این امکان را به دیگران می‌دهید که شما را بهتر پیدا کنند، یا با وجود مطالب خوبی که منتشر می‌کنید، فرصتی برای آشنا شدن با افراد تازه‌تر فراهم می‌شود.
 

۲- نمایشی از جدیت و پیگیری
ممکن است نجار باشید یا یک پزشک متخصص، فرقی نمی‌کند! همین‌که برای خودتان سایتی بسازید، نشان می‌دهید که چقدر به شغل یا هر فعالیت دیگری که می‌کنید علاقه دارید. سایت شما فضایی برای برندسازی است که حتی شاید به کمکش مشهور شوید.
 

۳- روزمه‌ای شبانه‌‌روزی!
بلاگ و آنچه از خود نشان می‌دهید، رزومه‌ای خواهد شد که همیشه در دسترس همگان است. تصور کنید به‌جای:«روزمه‌ام را برای‌ شما می‌فرستم» بگویید:«سابقه کاری من در وب‌سایتم هست و هر وقت بخواهید می‌توانید آن را ببینید».
 

۴- مِلک‌شخصی تو، در دنیای مجازی
اکثر ما وقتی به سن مستقل شدن نزدیک می‌شویم، خانه‌ای رویایی را برای خودمان تصور می‌کنیم: خانه‌ای که صاحبش هستیم و وسایل، مبلمان و دکورش با سلیقه خودمان گردآوری شده. وب‌سایت شما دقیقا همان خانه رویایی در دنیای مجازی است. با این فرق که رسیدن به این رویا خیلی راحت‌تر از خرید خانه است!
می‌توانید با سلیقه شخصی خود، آن را طراحی کنید و هر نوع قابلیتی که می‌خواهید را به آن اضافه کنید.
 
۵- فرصتی برای شکوفایی بیشتر
ایجاد یک وب‌سایت یا بلاگ قطعا کاری دشوار محسوب نمی‌شود، اما با این وجود چالش‌های کوچکی دارد که به کمک آن‌ها چیزهای تازه یاد می‌گیرید. برای راه‌اندازی‌اش باید مطالعه کنید، برای طراحی آن به ذوق هنری‌تان نیاز خواهید داشت و در محتوایی که در آن منتشر خواهید کرد باید ایده‌‌های‌تان را پرورش دهید. همه این‌ها فرصتی می‌شوند تا استعدادهای نهفته‌تان را شکوفا کنید!
 
پیشنهاد فرانش به شما
 
افزایش امنیت شبکه بی‌سیم خانگی
 
 
هزینه/فایدهبرای راه‌اندازی سایت خود به یکسری زیرساخت‌ها نیاز دارید. تهیه هر کدام از این زیرساخت‌ها هزینه‌هایی دارد. آنچه اینجا برایتان مهم می‌شود، نسبت هزینه‌ به فایده‌ای که دریافت می‌کنید است: باید توجه کنید مقدار هزینه‌ای که صرف راه‌اندازی سایت خود می‌کنید کاملا به خودتان و نیازتان بستگی دارد. اگر می‌خواهید یک بلاگ با نام اختصاصی خودتان داشته باشید قطعا هزینه‌ زیادی لازم نیست خرج کنید؛ خصوصا که برای ساخت بلاگ، بسترهای زیادی وجود دارند که در ازای اضافه کردن نام برند خود به آدرس سایت، فضای لازم برای راه‌اندازی را به‌طور رایگان می‌دهند.
اگر بخواهید تنها با نوشتن آدرس مشخصی مثل اسم‌تان، سایت را راه‌اندازی کنید باید هزینه‌هایی بابت همان آدرس و فضای اطلاعاتی مورد نیاز بپردازید:

الف) دامنه
خرید یک دامنه ایرانی (.ir) اکنون  به بیشتر از ۱۰-۲۰ هزارتومان پول نیاز ندارد. دامنه اینترنتی دقیقا همان آدرس سایت شما خواهد بود. مدت اعتبار دامنه و عنوان انتهایی آن مثل .com، Org، net و سایر این‌ها، عوامل تاثیرگذار در قیمت دامنه‌اند. برای ثبت یک دامنه .ir باید مدارک و اطلاعاتی را به این مرکز یا شرکت سیستم ارائه ‌دهنده هاست ارائه کنید.
 

ب) هاست
فضایی که اطلاعات سایت روی آن قرار می‌گیرد هاست (Host) نام دارد. همه هاست‌ها بر روی سرورهایی قرار می‌گیرند که شرکت‌های ارائه‌‌دهنده بسیار متنوعی دارند. بسته به قابلیت‌هایی که این شرکت‌ها ارائه می‌دهند: مثل فضا، ترافیک، سیستم مدیریت هاست، امنیت و پشتیبانی و نوع دسترسی (http یا https) تعرفه‌های متفاوتی را معرفی می‌کنند.
برای «خرید هاست» کافی‌ است همین عبارت را در گوگل جست‌وجو کنید و پس از ارزیابی قیمت‌ها و تعرفه‌های مختلف و یا نظرات کاربران در فضای مجازی، هاست مناسب خودتان را تهیه کنید. درنظر داشته باشید که هرچه فضای اطلاعاتی (مموری) بیشتری بخواهید، هزینه‌ بیشتری باید بدهید و هرچه تعداد بازدید سایت‌تان بیشتر باشد به «ترافیک» بالاتر نیاز دارید. برای یک بلاگ معمولی با فضای ۱۰۰ مگابایت و ترافیک ۱-۵ گیگابایت، لازم نیست سالیانه چیزی بیشتر از ۲۰ تا ۳۰ هزار تومان بدهید.
در بخش خرید هاست، به سرورهای متعدد با نام‌های عجیب‌وغریبی برخواهید خورد، نترسید! هرکدام از این سرورها نیازهای متفاوتی را برآورده می‌کنند که با جست‌وجوی ساده‌ می‌توانید معنای آن‌ها را بفهمید. برای بلاگ ساده، یک سرور لینوکسی با سیستم مدیریت Cpanel‌ یا دایرکت‌ادمین نیازهای لازم را رفع می‌کند.
 
پیشنهاد فرانش به شما
 
فرانش همکاری خود با مرکز آموزش بازرگانی را کلید زد
 
پس از اتصال دامنه به هاست، دفتری سفید دارید که می‌توانید همه‌چیز رویش بنویسید…
 
کارهایی که می‌توانید انجام دهیدپس از تهیه زیرساخت‌های مورد نیاز می‌توانید عملا صدها یا شاید هزاران کار با وب‌سایت‌تان کنید. سایت شخصی شما می‌تواند حتی یه یک فروشگاه اینترنتی یا هر کسب‌وکار دیگری که دل‌تان می‌خواهد تبدیل شود. در این زمینه قابلیت‌ها و کارهای ممکن تقریبا نامحدودند!
اگر سایتی که می‌سازید تنها برای معرفی شخص خودتان است، کار ساده‌تری پیش رو است. روی هاست خود یک سیستم انتشار و مدیریت مطالب نصب کنید و استارت بزنید. براساس میزان کاربرد و محبوبیت اول وردپرس و بعد از جوملا می‌توانید استفاده کنید.
 
بچه‌های وردپرس!به‌دلیل سادگی و گستردگی بیشتر در وردپرس بیشتر افراد استفاده از آن را به سایر روش‌ها ترجیح می‌دهند. چون هم افرادی که با برنامه‌نویسی آشنایی ندارند می‌توانند از آن استفاده کنند و هم کسانی که حرفه‌ای شده‌اند و می‌خواهند به مراحل پیشرفته شخصی‌سازی برسند به سمت آن کشیده می‌شوند.
با نصب وردپرس، می‌توانید تم (قالب‌) مورد علاقه‌ خود را انتخاب و سایر ویژگی‌ها را با کمک افزونه‌های فارسی و انگلیسی موجود، به سایت اضافه کنید. فقط فراموش نکنید، باید امنیت را در وردپرس جدی بگیرید. چرا که به‌دلیل محبوبیت بالای وردپرس، هکرهای زیادی به سراغ سایت‌های وردپرسی می‌روند. با اندکی مطالعه و یادگیری می‌توانید سایت‌تان را به یک قلعه مستحکم و غیرقابل نفوذ تبدیل کنید.
 
دنیای تو، دنیای ایده‌هااکنون تنها مانع پیشرفت شما در بهتر کردن این خانه مجازی‌تان خودتان هستید، چرا که محدودیتی برای اجرای ایده‌های بی‌شمارتان وجود ندارد. با یادگیری مستمر و با کمک بازاریابی محتوا و بهینه‌سازی‌های لازم، می‌توانید به راحتی خود را نشان دهید و فرصت‌های تازه به‌دست آورید.
منبع: فرانش

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


بهترین روش های ساخت بک لینک
روش های ساخت بک لینکشاید اولین راهی که برای ساخت بک لینک به ذهن ما میرسد خرید بک لینک باشد ولی اتفاقا این کار آخرین گزینه ما خواهد بود. خرید بک لینک علاوه بر هزینه بالایی که دارد ریسک جریمه شدن سایت شما توسط گوگل را افزایش میدهد. بهترین راه، استفاده از روش های رایج ساخت بک لینک است که در این مقاله به بررسی آنها میپردازیم.
بک لینک یعنی هر لینکی که از صفحه ای خارج از سایت ما به صفحه ای در دامنه ما قرار داده شده باشد. برای آنکه با انواع بک لینک و محل های قرارگیری آن آشنا شوید پیشنهاد میکنم مقاله بک لینک چیست را مطالعه کنید.
آموزش ساخت بک لینک رایگاننمایشگر ویدیو
 
 
00:00
 
07:09
 
 
در این ویدیو بهترین روش های ساخت بک لینک رایگان را در کنار خرید بک لینک به شما معرفی میکنیم. همچنین بدترین تکنیک های لینک سازی که ممکن است موجب جریمه سایت شما توسط گوگل شوند را بررسی خواهیم کرد.
قبل از شروع در ذهن داشته باشید که ساخت بک لینک فرآیندی زمانبر و دشوار است. ولی تاثیر و ارزش این کار به حدی بر سئو سایت شما زیاد است که نمیتوان از آن چشم پوشی نمود. روش های مختلفی برای خرید بک لینک یا ساخت بک لینک از طریق خرید رپورتاژ آگهی وجود دارند که در این بخش به آنها نمیپردازیم و تنها روش هایی که برای شما هزینه ندارند را بررسی خواهیم کرد.
1- کسب بک لینک از طریق محتوای ارزشمندبهترین و تاثیرگذارترین روش برای ساخت بک لینک تولید محتوای باکیفیت و تخصصی است. زمانیکه شما محتوایی کاربردی و جذاب تولید میکنید به مرجعی در آن موضوع تبدیل میشوید و سایت های بسیاری هستند که برای تایید صحبت های خود یا برای راهنمایی کاربران شما را پیشنهاد میدهند.
معمولا محتوای آموزشی شانس بیشتری برای گرفتن بک لینک از سایت های دیگر دارد و این نوع لینک ها عموما در بخش نظرات سایت های دیگر یا در فروم های تخصصی میان کاربران رد و بدل میشود. برای تولید محتوای آموزشی نکات زیر را در نظر داشته باشید:
آموزش های خود را با بیان ساده و قابل فهم ارایه کنید.
از تصویر و ویدیو برای درک بهتر آموزش استفاده کنید.
حتما بخشی برای ارسال دیدگاه کاربران در نظر بگیرید و به خوبی پاسخ گوی آنها باشید.
به جای تولید چندین آموزش کوتاه و پراکنده یک آموزش جامع و دقیق ارایه کنید.
2- ساخت بک لینک با فعالیت در شبکه های اجتماعیهمه ما به خوبی میدانیم که فعالیت در شبکه های اجتماعی علاوه بر ارتباط مستقیم با مشتریان میتواند بر سئو سایت نیز تاثیرگذار باشد. یکی از دلایل این تاثیرگذاری ساخت بک لینک رایگان برای صفحات داخلی سایت است.
برای بهره بری بیشتر از این تکنیک نکات زیر را در نظر داشته باشید:
فعالیت در شبکه های اجتماعی بدون مخاطب ارزشی ندارد. اگر تعداد فالوورها، دوستان یا افرادی که شما را دنبال میکنند کم است این لینک سازی بی اثر خواهد بود.
میزان اشتراک گذاری و لایک یک مطلب در شبکه اجتماعی بر ارزش بک لینک ساخته شده تاثیرگذار است.
مقالات سایت را عینا در شبکه های اجتماعی کپی نکنید، برداشتی کوتاه از مقاله را با بیانی جدید بازنویسی کرده و لینک سازی مورد نظر خود را در این متن انجام دهید.
با کلمه کلیدی طولانی و به یکی از صفحات داخلی خود لینک سازی کنید. ساخت بک لینک برای صفحه اصلی سایت از طریق شبکه های اجتماعی بازدهی بالایی ندارد.
تمرکز خود را بر روی ۱ یا ۲ شبکه اجتماعی که در زمینه کاری شما فعال هستند قرار دهید.
3- تهیه پست مهمان و ساخت بک لینک رایگانیکی از تکنیک های ارزشمند تهیه پست مهمان با هدف ساخت بک لینک است. سایت های بسیاری هستند که محتوای خود را از طریق کاربران دریافت میکنند و اتفاقا اعتبار و جایگاه مناسبی نیز دارند. این سایت ها همیشه منتظر مقالات ارزشمند از طرف کاربران هستند و در مقابل به شما اجازه میدهند لینک خود را در محتوای مقاله قرار دهید.
برای تهیه یک پست مهمان مناسب موارد زیر را رعایت کنید:
محتوای تهیه شده برای پست مهمان کاملا اختصاصی باشد.
در سایت هایی محتوا نویسی کنید که ترجیحا به زمینه کاری شما مرتبط باشند.
ساخت بک لینک را برای صفحات داخلی سایت و عبارات کم رقابت انجام دهید.
در صفحه پست مهمان خود فعالیت کنید و پاسخ کاربران را بدهید.
صفحات محبوب در سایت هدف را شناسایی کرده و در موضوعات مورد توجه کاربران محتوا تولید کنید.
4- ارسال دیدگاه و فعالیت در فروم های تخصصییکی دیگر از روش های ارزشمند و بی هزینه برای ساخت بک لینک فعالیت در فروم های تخصصی و ارسال دیدگاه در بخش نظرات سایت های دیگر است. به طور معمول اگر هدف شما از این فعالیت فقط کسب بک لینک باشد دیدگاه یا پست شما از این سایت ها حذف میشود.
برای آنکه ارسال دیدگاه با هدف ساخت بک لینک ارزشمند باشد پیشنهاد میکنیم مقاله کامنت مارکتینگ با هدف کسب بک لینک را مطالعه کنید و نکات زیر را در نظر داشته باشید:
از هویت واقعی شامل نام و تصویر استفاده کنید
دیدگاه شما مستقیما به محتوای صفحه مرتبط باشد و سوالی در همان زمینه مطرح کنید.
در صورت امکان لینک خود را در متن دیدگاه قرار دهید.
از ارسال نظرات زیاد در یک سایت یا یک صفحه پرهیز کنید.
دیدگاه خود را در پاسخ به یکی از کاربران یا مدیر سایت مطرح کنید.
تکنیک های بی ارزش برای ساخت بک لینکدر کنار تکنیک های کاربردی که در بخش قبلی معرفی شد روش هایی برای ساخت بک لینک وجود دارند که از گذشته بسیار رایج بوده است ولی امروز ارزش و جایگاه خود را از دست داده اند. در این بخش لیستی از آنها را برای شما تهیه کرده ایم.
ساخت چندین وبلاگ در سایت های مختلف و بازنشر محتوا در آنها با هدف ساخت بک لینک.
فعالیت در چندین شبکه اجتماعی و انتشار اتوماتیک مقالات در آنها.
ثبت سایت در دایرکتوری ها و سایت های تبادل لینک.
تبادل لینک با سایت های کم ارزش و به تعداد زیاد.
استفاده از ابزارهای رایگان یا غیر رایگان برای ساخت بک لینک انبوه.
ایجاد حساب کاربری در سایت ها و فروم های مختلف بدون فعالیت و نشر محتوا با هدف درج لینک در پروفایل شخصی.
ارسال نظرات به صورت انبوه با استفاده از ربات یا به صورت دستی.
چرا ساخت بک لینک بی ارزش خطرناک است؟گوگل برای مبارزه با اسپم و خرید بک لینک الگوریتم های مختلفی را معرفی کرده است. در این میان الگوریتم پنگوئن با هدف بررسی سلامت لینک سازی سایت ها معرفی شد. وظیفه پنگوئن شناسایی و جریمه سایت هایی است که با خرید بک لینک یا استراتژی های فریبنده برای خود لینک سازی میکنند است.
الگوریتم پنگوئن روش های مختلفی برای تعیین سلامت لینک سازی شما دارد و درک رفتارهای فریبنده در حال حاضر برای او بسیار ساده است. بعنوان مثال سایت شما در طول ۶ ماه فعالیت ۱۰ بک لینک ارزشمند داشته است ولی طی یک ماه ۵۰ بک لینک جدید برای آن ایجاد میشود. یا اینکه سایت شما مجموعا ۱۰۰ لینک از صفحات دیگر دارد ولی ۸۰ درصد آنها بر روی یک Anchor Text مشخص هدف گذاری شده اند. اطلاعات آماری و مقایسه با رفتار سایت های دیگر به گوگل امکان میدهد تا سلامت سایت شما را تایید کند.
برای اینکه پنگوئن به سایت شما مشکوک نشود و فعالیت های شما برای ساخت بک لینک را غیرطبیعی ارزیابی نکند موارد زیر را در نظر داشته باشید.
ساخت بک لینک را در بازه های زمانی مختلف و با فاصله انجام دهید و در ۶ ماه اول فعالیت سایت به هیچ عنوان لینک سازی غیرطبیعی نکنید.
به جای صدها لینک کم ارزش چند لینک با ارزش و از سایت هایی با اعتبار دامنه بالا تهیه کنید.
لینک سازی خود را تنها بر صفحه اصلی سایت متمرکز نکنید و صفحات داخلی را تقویت کنید.
همه لینک های شما بر روی یک کلمه مشخص نباشد و از عبارات و ترکیب های مختلف برای لینک سازی استفاده کنید.
در سایت های تبادل لینک یا دایرکتوری های ثبت لینک فعالیت نکنید.
سخن پایانیاین مقاله در ادامه مسیر آموزش سئو مبتدی تهیه شده است و در آن تلاش شده مفاهیم با بیانی ساده مطرح شوند. برای درک بهتر هریک از این مفاهیم میتوانید مقالات تخصصی سایت وبسیما را مطالعه کنید و برای مشاهده سایر درس های این مجموعه به بخش آموزش سئو مبتدی مراجعه نمایید.
در صورتیکه هر گونه سوال یا ابهامی در مورد ساخت بک لینک و مفاهیم ارایه شده در این مقاله دارید میتوانید سوالات خود را در بخش نظرات همین صفحه مطرح کنید تا کارشناسان وبسیما پاسخ گوی شما باشند.
26دسامبر201709:00تحریریه وبسیما35
منبع: وب سیما
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


خرید رپورتاژ آگهی
رپورتاژ آگهی چیست؟اولین سوالی که باید به آن پاسخ دهیم تعریف دقیق رپورتاژ آگهی است. رپورتاژ آگهی به معنی انتشار یک مقاله از شما در سایتی دیگر است که معمولا با هدف معرفی یک محصول و یا لینک سازی جهت بهبود وضعیت سئو انجام میشود. در این مقاله تلاش میکنیم بیشتر در مورد خرید رپورتاژ و استانداردهایی که باید در آن رعایت شود صحبت کنیم.
سایت های بسیاری وجود دارند که به صورت مستمر در حال تولید محتوا هستند و روزانه بازدیدکنندگان زیادی را به خود جلب میکنند. یکی از راه های درآمدزایی این سایت ها فروش رپورتاژ آگهی است. این سایت ها با توجه به اعتبار دامنه و تعداد بازدیدکنندگان روزانه خود، مبلغ مشخصی را برای درج یک مقاله از طرف شما در سایت خود دریافت میکنند. شما مقاله مورد نظر خود را به آنها ارایه میدهید و در بخش هایی از آن برای سایت خود لینک سازی میکنید.
با توجه به کاهش تاثیر بک لینک و البته جریمه گوگل بر روی تبلیغات متنی، رپورتاژ آگهی یکی از بهترین تکنیک های موجود برای بهبود وضعیت سئو و لینک سازی دائمی است.
چه زمانی به خرید رپورتاژ نیاز داریم؟میتوان گفت خرید رپورتاژ نوعی دوپینگ برای سایت شما محسوب میشود. حالا تصور کنید که قرار است بعنوان یک ورزشکار معمولی در مسابقات دو المپیک شرکت کنید آیا با دوپینگ میتوانید شانسی جهت پیروزی داشته باشید؟ مسلما خیر. دوپینگ برای ورزشکارانی تاثیرگذار است که در رقابت نزدیک با هم هستند و برای کسب رتبه اول به مبارزه میپردازند.
آموزش خرید رپورتاژ آگهی
خرید رپورتاژ زمانی برای شما کارآمد است که در کلمه کلیدی هدف خود جایگاه مناسبی کسب کرده باشید و حداقل در صفحه اول گوگل حضور داشته باشید. در این شرایط میتوانید با خرید بک لینک مناسب از طریق رپورتاژ شانس خود برای کسب جایگاه بهتر را افزایش دهید.
اگر سایت یا صفحه شما در عبارتی جایگاه کسب نکرده یا در صفحات بعدی نتایج گوگل است این تکنیک برای شما مناسب نخواهد بود. پیشنهاد میکنیم با مطالعه مقاله بک لینک چیست اطلاعات خود را در این زمینه افزایش دهید.
مهمترین نکات در خرید رپورتاژ چیست؟مهمترین مزیت رپورتاژ آگهی در مقایسه با خرید بک لینک دائمی بودن آن است. معمولا مقاله شما برای همیشه در سایت آگهی دهنده باقی می ماند و شما برای تمدید این لینک هزینه ای پرداخت نمیکنید ولی زمانیکه بک لینک یا تبلیغات متنی خریداری میکنید باید هر ماه هزینه ای برای تمدید و نگهداری آن پرداخت کنید.
برای بهره گیری بهتر از رپورتاژ آگهی نکاتی را باید رعایت کنیم در غیر اینصورت هزینه انجام شده بی تاثیر خواهد ماند و یا حتی میتواند موجب جریمه سایت شما توسط گوگل شود. در ادامه مهمترین نکات مربوط به خرید بک لینک دائمی را با هم مرور میکنیم.
1- رپورتاژ‌ آگهی را از سایت مرتبط بخریددر فضای وب فارسی سایت های معتبری که تبلیغات به صورت ریپورتاژ را میپذیرند زیاد نیستند. همین مسئله موجب میشود گزینه های شما برای انتخاب محدود شود ولی همیشه تلاش کنید خرید رپورتاژ را از سایت هایی انجام دهید که از نظر موضوعی و محتوایی به سایت شما نزدیک هستند.
2- برای هر رپورتاژ یک متن اختصاصی بنویسیدمحتوای تکراری شانس زیادی برای کسب جایگاه در نتایج گوگل ندارد و معمولا از طرف ربات های گوگل نادیده گرفته میشود. بسیار دیده ایم که برخی از مدیران سایت ها یک مقاله مشخص را تهیه میکنند و آن را به صورت رپورتاژ در چندین سایت مختلف منتشر میکنند. حتی برخی برای متن رپورتاژ خود از مقالات یا محتوای موجود بر روی سایت خود استفاده میکنند.
خرید رپورتاژ به معنی خرید یک صفحه اختصاصی بر روی سایتی دیگر است که به محتوای مورد نظر شما لینک سازی کرده است. هرچقدر این صفحه ارزشمندتر باشد و جایگاه بهتری در نتایج گوگل کسب کند شانس شما نیز برای کسب جایگاه و اعتبار در کمه هدف بیشتر خواهد شد.
3- بیشتر از ۵ بک لینک در رپورتاژ خود قرار ندهیدخیلی از افراد فکر میکنند که هرچقدر لینک های بیشتری در رپورتاژ آگهی درج کنند شانس خود را افزایش داده و در کلمات بیشتری جایگاه کسب میکنند ولی در عمل برعکس این موضوع اتفاق خواهد افتاد.
هر صفحه از اینترنت ارزش و اعتبار مشخصی از نظر گوگل دارد (Page Authority) و این اعتبار به اندازه مساوی میان تمام لینک های موجود در آن تقسیم میشود. هرچقدر تعداد لینک های موجود در صفحه رپورتاژ آگهی افزایش یابد اعتبار منتقل شده به هریک از آنها کاهش خواهد یافت.
پیشنهاد میکنیم بعد از خرید رپورتاژ آگهی در متن خود بین ۳ تا ۵ لینک قرار دهید.
4- برای هر صفحه از سایت تنها یک لینک در متن قرار دهیدیکی دیگر از اشتباهات رایج در خرید رپورتاژ درج چند لینک با Anchor Text متفاوت به یک صفحه از سایت است. بعنوان مثال در یک متن آگهی سه لینک قرار داده میشود که همگی به صفحه اصلی سایت اشاره دارند ولی هریک با عبارتی مجزا لینک شده اند. با این کار گوگل تنها اولین لینک موجود در صفحه را در نظر میگیرد و بقیه لینک ها بی اثر خواهند شد.
5- رپورتاژ آگهی را برای صفحات داخلی سایت بخریدصفحه اصلی سایت معمولا با عبارات دشوار و پرجستجو هدف گذاری میشود و رپورتاژ آگهی آنقدر تاثیرگذار نیست که بتواند سایت شما را در این دست کلمات ارتقا دهد. مگر آنکه رقابت در آن کلمه بسیار پایین باشد یا شما جایگاه بسیار خوبی داشته باشید.
پیشنهاد میشود لینک سازی در رپورتاژ آگهی به صفحات داخلی سایت و بر روی کلمات کم رقابت انجام شود. با موفقیت در کلمات جانبی و کسب رتبه مناسب در عبارات حاشیه ای میتواید شانس خود را برای کسب جایگاه در کلمات دشوار و پررقابت افزایش دهید.
6- در رپورتاژ آگهی خود از تصاویر استفاده کنیدیکی از فاکتورهای تاثیر گذار بر رتبه بندی نتایج گوگل وجود تصویر و ویدیو در صفحه است. شما میتوانید با قرار دادن تصاویر اختصاصی و مرتبط با متن آگهی ارزش و اعتبار صفحه ایجاد شده را افزایش داده و نتیجه بهتری از خرید رپورتاژ کسب کنید. هرچقدر محتوای صفحه ای که ایجاد میکنید ارزشمندتر باشد اعتبار بیشتری به سایت شما منتقل خواهد کرد.
7- برای رپورتاژ آگهی خود بک لینک بخرید!به خوبی میدانیم که خرید بک لینک یا تبلیغات متنی میتواند موجب جریمه گوگل برای سایت شما شود ولی لینک سازی داخلی موجب افزایش اعتبار صفحه خواهد شد. پیشنهاد میشود بعد از خرید رپورتاژ آگهی از همان سایت آگهی دهنده یک بک لینک بخرید و لینک صفحه رپورتاژ را در آن قرار دهید. با این کار لینک سازی داخلی خوبی برای صفحه تبلیغ شما انجام میشود که موجب افزایش اعتبار این صفحه خواهد شد.
8- اعتبار دامنه و spam score سایت آگهی دهنده را بررسی کنیدیکی دیگر از فاکتورهای مهم برای افزایش تاثیر رپورتاژ عمر دامنه،‌ اعتبار دامنه و البته spam score سایتی است که از آن رپورتاژ میخرید. قبل از سفارش وضعیت سایت را در ابزارهای آنلاین مانند open site explorer بررسی کنید و از اعتبار سایت هدف مطمئن شوید.
اگر Domain Authority این سایت بالاتر از ۳۰ باشد گزینه معمولی خواهد بود و اگر بالاتر از ۴۰ باشد خوب است. اگر سایتی پیدا کردید که اعتبار دامنه آن بالاتر از ۵۰ است یک گزینه ایده آل یافته اید.
دقت کنید که برخی سایت ها با داشتن اعتبار بالا spam score بالایی نیز دارند. این سایت های به دلیل لینک سازی زیاد یا فروش بک لینک ارزش و اعتبار خود را از نظر گوگل از دست داده اند. هیچ وقت از سایت هایی که spam score آنها بالاتر از ۵ است رپورتاژ آگهی نخرید.
9- از پست مهمان یا رپورتاژ آگهی رایگان استفاده کنیدبسیاری از سایت ها به شما اجازه میدهند تا بعنوان یک کاربر عمومی مقاله ای را تهیه کرده و به عنوان پست مهمان در سایت منتشر کنید. این سایت ها عموما به شما اجازه میدهند که در پست مهمان لینک سازی برای سایت خود نیز انجام دهید. مقالاتی که به عنوان پست مهمان درج میشوند معمولا باید از کیفیت بالایی برخوردار بوده و دقیقا مطابق با موضوعات سایت پذیرنده باشد. همه مواردی که در رپورتاژ آگهی رعایت میکنید باید در این روش نیز به کار گیرید.
محتوای رپورتاژ آگهی چقدر باشد؟خرید رپورتاژ آگهی به شما اجازه میدهد یک صفحه در سایت آگهی دهنده ایجاد کنید و این صفحه باید از نظر محتوایی در سطح بسیار بالایی باشد. برای تهیه متن رپورتاژ خود موارد زیر را در نظر داشته باشید.
محتوای رپورتاژ آگهی حداقل ۷۰۰ کلمه و حداکثر ۱۲۰۰ کلمه باشد.
از تگ های h2 در محتوای آگهی استفاده کنید.
کلمات لینک شده در رپورتاژ دقیقا عباراتی باشند که میخواهید در آنها جایگاه کسب کنید.
از عبارات طولانی در لینک سازی استفاده کنید و عبارات عمومی و پرجستجو را هدف قرار ندهید.
در متن جایگزین تصاویر کلمات کلیدی هدف خود را استفاده کنید.
محتوای رپورتاژ آگهی شما کاملا اختصاصی و تازه باشد.
از تگ نوفالو در لینک های خود استفاده نکنید.
اگر سایت هدف امکان ارسال دیدگاه دارد در این صفحه کامنت گذاری کنید تا ارزش و اعتبار آن افزایش یابد.
تجربیات خود از خرید رپورتاژ را با ما به اشتراک بگذارید و سایت های معتبری که در این زمینه میشناسید معرفی کنید.
26دسامبر201709:00تحریریه وبسیما32
ورودثبت نام
000POINTS
حساب کاربری
محصولات من
نظرات و پاسخ ها
مقالات نشان شده
منبع: وب سیما
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


حذف NoFollow از بخش دیدگاه‌های وردپرس
حذف NoFollow از بخش دیدگاه‌های وردپرسدو نوع لینک مانند NoFollow و DoFollow در وردپرس وجود دارد. به طور پیش فرض، وردپرس به طور خودکار لینک تگ Nofollow را در نظرات اضافه می کند. این به این معنی است که ما به موتورهای جستجو دستور نداده ایم که این پیوندها را دنبال کنند و آنها را فهرست کنیم.
حال شما می توانید با نصب افزونه Remove Nofollow این امکان را از بخش دیدگاه وردپرس حذف کنید. با ما همراه باشید تا در ادامه نحوه کار با افزونه را توضیح دهیم.
نحوه غیر فعال کردن ویژگی NoFollow از نظرات وردپرسدر این آموزش دو روش را برای غیرفعال کردن ویژگی NoFollow از دیدگاه وردپرس را توضیح میدهیم. یکی از روشها را انجام داده و NoFollow را غیرفعال کنید.
حذف NoFollow از دیدگاه وردپرس با افزونه Remove Nofollowدر ابتدا افزونه را دریافت و نصب کنید، پس از فعال سازی افزونه گزینه جدیدی به نام Remove Nofollow به منو تنظیمات افزونه اضاف می شود. در قسمت تنظیمات افزونه تیک گزینه دلخواه خود را بزنید و به روز رسانی کنید.
سپس سایت را اجرا کرده و در بخش نظرات روی یک دیدگاه کلیک راست و inspect بگیرید. حال خواهید دید به همین سادگی Nofollow از بخش دیدگاه وردپرس شما حذف شده است.
حذف NoFollow از دیدگاه وردپرس با استفاده از کددر پیشخوان وردپرس به مسیر نمایش> ویرایشگر بروید و روی فایل function.php کلیک کرده و کد زیر را به این قسمت اضاف و ذخیره کنید.
function remove_nofollow($return, $author, $comment_ID) {
        $return= preg_replace("/(<a[^>]*[^\s])(\s*nofollow\s*)/i", "$1", $return);
        $return= preg_replace("/(<a[^>]*[^\s])(\s*rel=[\"\']\s*[\"\'])/i", "$1", $return);
        return $return;
}
add_filter( 'get_comment_author_link', 'remove_nofollow');مجددا بخش دیدگاه ها را با استفاده از ابزار inspect  تست کنید و نتیجه را مشاهده فرمایید.
موفق و پیروز باشید.

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


۱۱ ترفند انتخاب دامنه مناسب برای کسب‌و‌کار اینترنتی شما
درود بر شما. قبلاً در مورد اینکه دامنه چیست توضیحاتی دادیم. اما انتخاب یک دامنه مناسب برای کسب‌وکار اینترنتی شما موضوع بسیار مهمیست. چراکه برند و اعتبار وبسایت شما با دامنه شما رقم خواهد خورد. اینجاست که افراد برتر حوزه بازاریابی اینترنتی می‌گویند همه‌چیز از یک دامین خوب شروع می‌شود.
قبل از طراحی سایت شاید چیزی معمولی به نظر بیاید اما انتخاب دامنه مناسب برای سایتی که می‌خواهد طراحی شود انتخاب سخت و مهمی هست. دامنه باید از اصول و قواعد استفاده کند تا سایت شمارا به یک سایت قوی و حرفه‌ای تبدیل کند. انتخاب دامنه اولین مرحله در موفق شدن سایت شما به‌حساب می‌آید!
افراد زیادی در بین کاربران سایت خودمان هم هستند که در ابتدای کار نام دامین خود را به درستی انتخاب نکردند و بعد از شروع کارشان متوجه شدند که نیاز به تغییر دامنه سایت خود دارند که البته این تغییر دامین باعث افت شدید سئو و ورودی وبسایت شما خواهد شد.
بعد از راه‌اندازی سایت می‌توانید دامنه سایت را تغییر دهید اما تغییر دامنه سایت به همین راحتی‌ها هم نیست! حداقل شما نیمی از ورودی گوگل خود را از دست می‌دهید و این یعنی افت ورودی گوگل! پس باید تمام دقت خود را بکار گیرید تا مجبور به تغییر دامنه سایت نشوید. امروز قصد دارم ملاک‌های انتخاب یک دامنه مناسب را خدمت شما دوستان توضیح دهم.
آنچه در این مطلب می‌خوانید:
انتخاب دامنه مناسب برای کسب‌و‌کار اینترنتی شما
۱. بچسبید به دات کام
۲. قوانین را فراموش نکنید.
۳. استفاده از کلمه کلیدی سئو در نام دامین
۴. انتخاب نام دامنه کوتاه
۵. زیاد سختش نکنید!
۶. منحصر به فرد و قابل انعطاف باشید!
۷. از خط فاصله استفاده نکنید.
۸. خودتان را محدود نکنید!
۹. علامت تجاری را قبل از ثبت جستجو کنید!
۱۰. از سرویس های پیشنهاد نام دامین استفاده کنید.
۱۱. زیاد معطل نکنید! ثبتش کنید.

انتخاب دامنه مناسب برای کسب‌و‌کار اینترنتی شمادر مقاله امروز می‌پردازیم به معرفی ابزار و روش‌هایی برای انتخاب دامنه مناسب برای کسب‌وکار اینترنتی شما. پس با میهن وردپرس همراه باشید.
۱. بچسبید به دات کام
امروزه برای ثبت دامنه پسوندهای بی‌شماری یافت می‌شود از.com گرفته تا.io و.net و …
شما می‌توانید از دامنه‌های مختلفی استفاده کنید اما دات کام بهتر هست. چراکه زبان زد عام و خاص هست و به‌صورت کلی نزد عموم جایگاه بهتری نسبت به سایر پسوندها دارد. اما در کل بهتر است از این پسوند زمانی استفاده کنید که آزاد باشد. اگر آزاد نیست به فکر ثبت دامین IR یا دیگر پسوندها باشید. io هم پسوندی هست که مد شده.
اگر همین‌الان به یک نفر بگویید آدرس سایت من mihanwp هست بدون شک در مرورگر خود عبارت mihanwp.com را وارد می‌کند.
راستی فراموش هم نکنید که ۶۰ درصد افراد با موبایل سایت شمارا مشاهده می‌کنند و در کیبورد موبایل‌های جدید یک دکمه.com برای تایپ سریع‌تر آدرس‌ها اضافه‌شده.
هرچند گوگل در ایران به دامنه‌های ir توجه بیشتری می‌کند. هرچند این مورد هم زیاد تأثیر مهمی در سئو ندارد اما می‌توانیم پسوند دامنه را مطابق کشور خود انتخاب کنیم. چون گوگل کاملاً متوجه می‌شود که این سایت برای ایرانی‌ها مطلب منتشر می‌کند. البته روش حل این مشکل را برای دات کام اینجا توضیح دادم.
۲. قوانین را فراموش نکنید.هر جای اینترنت قوانینی هست که باید قبل از استفاده از خدمات هر سایت به قوانین آن‌هم نگاهی داشته باشید. پسوندهای دامین قوانین زیادی دارند و موقع ثبت باید نگاهی به قوانین هر پسوند داشته باشید تا در آینده به مشکل نخورید.
از رجیسترار دامنه هم کاملا مطمئن شوید. در صورتی که دامنه شما از دست رفت ، یعنی از دسترس شما خارج شده و تلاش چند ساله شما از دست می رود و این موضوع بسیار ناراحت کننده خواهد بود. پس از شرکت ها و ثبت کننده های مطمئن استفاده کنید.
۳. استفاده از کلمه کلیدی سئو در نام دامیناگر سایتی در زمینه خودرو راه اندازی می کنید و اسم سایت شما میهن خودرو خواهد بود. بهتر است دامین خود را با نام mihancar یا هر چیزی که عبارت خودرو در ان وجود داشته باشد ثبت کنید. این موضوع را از نظر سئو هم بررسی کردیم.
همانطور که در پکیج آموزش سئو هم خدمت شما توضیح دادم بهترین دامنه برای یک سایت دامنه ای هست که کلمه کانونی سایت را در خود جای دهد. مثلا اگر سایت طراحی دارید حتما کلمه design را در آن بکار ببرید. البته این عامل خیلی کلیدی در سئو نیست اما بهتر هست رعایت شود.
۴. انتخاب نام دامنه کوتاهنام دامنه خود را کوتاه و مختصر وارد کنید تا بتوانید هرچه سریعتر آن را در ذهن مشتری جا کنید. پس دامنه mihanwp.com بسیار بهتر است mihanwordpressforwptricks.com هست. 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


کسب‌و‌کار تو به چه محتوایی نیاز داره؟
هنوز هم هستند کسانی که با چاپ و توزیع تراکت به دنبال تقویت فروش و جایگاه برندشان می‌گردند. وقتی یکی از این تراکت‌ها به دست‌تان می‌رسد، چکار می‌کنید؟ قریب به یقین، من آن را در نزدیک‌ترین سطل آشغال رها می‌کنم.
امروزه عموم افراد جامعه ما واکنشی مشابه به این نوع از تبلیغات نشان می‌دهند. سوال اینجاست که چرا شما یک تراکت یا کارت ویزیت تبلیغاتی را بدون نگاه کردن دور می‌اندازید اما صفحه اینستاگرام فلان فروشگاه اینترنتی یا استارت‌اپ را که حتی از آن خرید هم نکرده‌اید، دنبال می‌کنید؟
تفاوت آنچه بی‌توجه از کنارش رد می‌شویم با آنچه برایش وقت می‌گذاریم و به آن فکر می‌کنیم، در نوع محتوا و بستر آن نهفته است. در این نوشتار به بررسی نقش محتواها در رشد کسب و کارها می‌پردازیم.
 
فهرست محتوای این مقاله
بازاریابی ارزش!
محتوای ارزشمند

چگونه در زندگی مردم نقش پیدا کنیم؟
توزیع محتوا و دنیایی از ویژگی‌ها

بازاریابی ارزش!امروز در هر حوزه‌ای چندین کسب و کار را می‌توان پیدا کرد که خدماتی مشابه را ارائه می‌کنند، آنچه بین این برندها فرق می‌گذارد ارزشی است که آن‌ها به مخاطب خود اعطا می‌کنند. به عبارت دیگر برندهایی موفق‌ترند که بیش‌تر از خدمات و محصول، «ارزش» می‌فروشند.
این ارائه ارزش از چند طریق انجام می‌شود: کیفیت ارائه خدمات، میزان کاربردپذیری، عملکرد خدمات پس از فروش و در آخر، محتوا.
در بحث محتوا، تعیین اینکه شما چه ارزشی به مخاطب خود می‌دهید از روی کاربردپذیری مطالب و میزان درگیر کردن مخاطب مشخص می‌شود.
باید در نظر داشته باشیم که روزانه بیش‌تر از آنچه می‌توانیم تصور کنیم محتوا تولید می‌شود اما فقط درصد بسیار اندکی از این تولیدات مورد توجه مردم قرار می‌گیرند. چرا که تولیدکنندگان از روی حدس و پیش‌بینی محتوایی را تولید می‌کنند که ممکن است مورد توجه قرار گیرد درحالی که این حدس‌ و گمان‌ها در اغلب موارد اشتباه از آب درمی‌آید؛ دلیلش هم عدم شناخت درست مخاطب است.
 
پیشنهاد فرانش به شما
 
گردهمایی سالیانه فرانش . آموزش صفر تا صد تولید محتوای ویدیوئی
 
 
محتوای ارزشمندمخاطب فقط دو نوع محتوا را می‌بیند و برایش وقت می‌گذارد. ۱) آن‌هایی به زندگی روزمره‌اش مربوط است؛ ۲) چیزی که احساساتش را بر می‌انگیزد.
شرکت‌ها و تولیدکنندگان محتوا معمولا استراتژی خود را بر روی نوع اول بنا می‌کنند چرا که برانگیختن احساسات بسیار دشوارتر از آن است که بتوان به سادگی فرمول‌بندی‌اش کرد و نیازمند بررسی جداگانه‌ای است.
چگونه در زندگی مردم نقش پیدا کنیم؟نمودارها و چارت‌های زیادی هستند که می‌گویند حجم محتوا با نسبت میزان دیده شدن، تاثیر عکس دارد. یعنی هرچه محتوای اضافه‌تربدهید، کمتر دیده می‌شوید. برای اینکه بتوانیم از این روند به نفع خود استفاده کنیم باید نشان دهیم که در زندگی طرف مقابل نقش داریم.
محتوایی تولید کنید که آنقدر اهمیت داشته باشد که وقتی مخاطب شما آن را ببیند، به این فکر بیفتد که چقدر زودتر باید با شما و برند شما آشنا می‌شد! وقتی بتوانید به این هدف برسید، آن وقت به معنای واقعی بازاریابی محتوایی کرده‌اید.
وقتی مطلب تولید شده در زندگی کاربران برند تاثیر گذار است، بقیه کارها مثل به اشتراک گذاری در بسترهای مختلف راحت می‌شود، چرا که خود مخاطب تمایل پیدا می‌کند آن را برای شما انجام دهد!
برای آنکه سریع‌تر به این هدف برسید، مسائل بدیهی را بی‌رحمانه حذف کنید. برای مثال وقتی می‌خواهید در مورد بیکاری حرف بزنید، نگویید:«همه می‌دانیم که این روزها بیکاری بشدت بالا رفته است» این عبارت‌های هجو بین نقطه نظر نهایی شما و مخاطب‌هایتان فاصله‌ می‌اندازند. پس یکراست راه حل خود را ارائه کنید.
 
توزیع محتوا و دنیایی از ویژگی‌هابرای موفقیت محتوا چیزهای زیادی می‌شود گفت. از SEO بگیرید تا تجربه کاربری، همه در محتوا نقش دارند اما درنظر داشته‌باشید که وقتی محتوای بدردبخور ارائه می‌کنید، خیلی از این مسائل به‌ خودی خود حل می‌شوند.
 
پیشنهاد فرانش به شما
 
اینفوگرافیک: یادگیری زبان چگونه بر روی مغز تاثیر می‌گذارد؟
 
فراموش نکنیم که محتوای تولید شده را می‌توان در بسترهای مختلفی توزیع کرد، هرچند که هر پلت‌فرمی دارای شرایط به‌خصوصی است که نیازمند بهینه‌سازی محتوا با خصوصیات آن بستر است. برای مثال کپشنی که شما برای محتوای تولید شده در اینستاگرام تولید می‌کنید قطعا به‌دلیل محدودیت کاراکتری، در توییتر قابل استفاده نیست.  در مطالب بعدی محتوا و کسب‌وکار، نگاهی به سایر مفاهیم دخیل در محتوا و تاثیرات‌شان می‌کنیم.
فرانش

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


چرا کاربران سایت شما را ترک میکنند؟
تاثیر طراحی سایت بر ضریب خروج کاربرانسئو و تبلیغات دو راه اصلی برای جذب بازدیدکننده به سایت هستند و هدف نهایی هردو تبدیل کاربر به مشتری است. زمانی که کاربر وارد سایت شما میشود باید هر دلیلی که موجب تغییر مسیر و خروج احتمالی او از سایت میشود را شناسایی و برطرف کنیم. دلایل مختلفی برای ترک سایت شما توسط کاربران وجود دارد و ما در این مقاله تلاش میکنیم برخی از رایج ترین ها را به شما معرفی کنیم.
طراحی سایت شما قدیمی شده استاین یک حقیقت تلخ است که همه کاربران به ظاهر سایت شما توجه میکنند. بعنوان مثال میتوان از روی جلد یک کتاب حدودا تشخیص داد که چه سالی منتشر شده و چقدر کهنه است. همین دید نسبت به وبسایت نیز وجود دارد. تحقیقات آماری نشان میدهد که نزدیک به ۹۴ درصد کاربران به سایت هایی با طراحی قدیمی و کاربری سخت اعتماد نمیکنند و ممکن است به سرعت سایت شما را ترک کنند. متاسفانه این دست طراحی ها در سایت های دولتی و پرتال های کاربردی بسیار به چشم میخورد و کاربران مجبور به استفاده از این فضاها میشوند.
پیشنهاد میشود هر دو سال یک 
ادبیات شما مناسب نیستنمیتوان یک ادبیات مشخص برای همه سایت های اینترنتی تعیین کرد بلکه باید براساس مخاطبین سایت و نوع محصولات یا خدمات عرض شده ادبیات خود را مشخص کنید. بعنوان مثال اگر مخاطبین شما در گروه سنی جوان هستند استفاده از کلمات دشوار و مفاهیم سنگین نمیتواند جذاب باشد و در مقابل برای سایت هایی در زمینه اقتصاد و ت نمیتوان از کلمات و عبارات روزمره استفاده نمود.
همخوانی نداشتن ادبیات شما با سلیقه مخاطب میتواند موجب بی اعتمادی یا سرخوردگی در مخاطب شود، این تناقض یکی از مهمترین دلایل ترک سایت شما توسط کاربران است.
استفاده از تکنولوژی های قدیمی در طراحی سایتمدت هاست که استفاده از Flash Player در طراحی وب سایت منسوخ شده است، در حالیکه تا همین چند سال پیش بعنوان یکی از تکنولوژی های پرطرفدار طراحی سایت محسوب میشد. اما هنوز سایت هایی وجود دارند که بخش هایی از محتوا یا المان های آنها با استفاده از فلش در سایت نمایش داده میشوند. این تکنولوژی هم اکنون در بسیاری مرورگرها غیرفعال شده و برای استفاده از آن نیاز به اجازه مستقیم کاربر است. همچنین حجم صفحاتی از این دست بسیار بالا بوده و زمان بسیاری برای نمایش محتوا به کاربر نیاز دارند.
در حال حاضر پیشنهاد میشود برای پخش ویدیو و آهنگ در سایت خود از HTML5 استفاده کنید و برای طراحی انیمیشن ها از jQuery بهره بگیرید. هردو برای کاربران و موتورهای جستجو قابل فهم بوده و سرعت بارگذاری بسیار بالات
استفاده از تبلیغات زیاد و آزاردهندهاگر پلن درآمدزایی شما براساس تبلیغات طرح ریزی شده است نمیتوانید به طور کلی آنها را حذف کنید ولی دلیلی وجود ندارد که حضور تبلیغات موجب آزار بازدیدکنندگان سایت شود. افرادی که برای تبلیغ در سایت شما هزینه میکنند انتظار دارند کاربران سایت شما را به سایت یا محصول خود جذب کنند ولی استفاده بیش از حد از تبلیغات در صفحه موجب میشود اولا کاربر به هیچ یک از آنها توجه نکرده و ثانیا به سرعت سایت شما را ترک کند. تصویر زیر یک نمونه نادرست از تبلیغات در سایت است. تقریبا هرچیزی که در این صفحه برای کاربر قابل مشاهده است نوعی از تبلیغات بوده و ارتباطی با محتوای صفحه ندارد.
برای تاثیرگذاری تبلیغات باید از ایده های نو و ارتباط معنایی استفاده کنید. بعنوان مثال تبلیغ خمیردندان در یک سایت که مطالب آن در حوزه سلامت دهان و دندان هستند میتواند بسیار تاثیرگذار باشد ولی همین تبلیغ در یک سایت ورزشی جذابیت زیادی نخواهد داشت. تلاش کنید تبلیغاتی را در سایت خود نمایش دهید که از نظر موضوعی به سایت شما مرتبط باشند و کیفیت محصول و ارایه آن بالا باشد.
ویدیو یا آهنگ هایی که به صورت خودکار پخش میشوندتصور کنید که در یک جمع خانوادگی و یا محیط کار خود نشسته اید و هنگام جستجو وارد یک سایت میشوید. به محض ورود شما یک ویدیو یا آهنگ پخش میشود و اتفاقا صدای تلفن یا دستگاه شما زیاد است؛ در این شرایط چه کاری انجام میدهید؟ اولین واکنش کاربران در این موارد بستن صفحه در سریعترین زمان ممکن است و این به معنی از دست رفتن یک مشتری بالقوه است.
همچنین بسیاری از کاربران از طریق تلفنن همراه خود وارد سایت ها میشوند و عموما با سرعت پایین یا حجم محدود وارد سایت شما میشوند. زمانیکه متوجه شوند به دلیل وجود ویدیو یا آهنگ صفحه شما سنگین است ممکن است ترجیح دهند محتوای مورد نظر خود را در صفحه ای دیگر جستجو کنند و این یعنی شکست در طراحی سایت. این مورد در طراحی فروشگاه اینترنتی اهمیت بیشتری نیز خواهد داشت زیرا در این فضا کاربران به سختی اعتماد میکنند و با هر بهانه ای از خرید منصرف میشوند.
ساختار منوی سایت و نحوه دسترسی مناسب نیستاحتمالا برای خود شما هم اتفاق افتاده است که وارد یک سایت میشوید و به دنبال اطلاعات خاصی در آن هستید ولی نمیتوانید مسیر مناسب برای دسترسی به آن را پیدا کنید. در این شرایط احتمالا فکر میکنید طراح این سایت هیچ تفکر و تجربه ای در ساخت آن نداشته است.
تلاش کنید گزینه های موجود در منوی سایت کاملا شفاف و قابل فهم بیان شده باشند و از عباراتی بهره بگیرید که در تجارت شما و در میان کاربران رایج است. استفاده صحیح از ابزارهای جستجو در کنار منو میتواند شانس دستیبابی کاربران به محتوا را افزایش دهد.
سرعت سایت شما پایین استیکی از فاکتورهای تاثیرگذار بر سئو سایت سرعت بارگزاری صفحات است ولی این فاکتور بر تجربه کاربری نیز تاثیر بسیاری دارد. اگر زمان لود شدن صفحه طولانی باشد کاربران برای دریافت اطلاعات مورد نظر خود به سایت یا صفحه دیگری مراجعه خواهند کرد. تحقیقات نشان میدهد که ۴۷ درصد کاربران انتظار دارند صفحه در کمتر از ۲ ثانیه به صورت کامل در دسترس باشد و هر ثانیه تاخیر در لود صفحه تقریبا ۱۶ درصد بر نرخ خروج کاربران تاثیر خواهد داشت. همچنین بسیار مشاهده میشود که با انتخاب هاست یا سرور ارزان و ضعیف سایت شما در ساعاتی از روز از دسترس خارج میشود و کاربر با صفحات ۴۰۴ یا خطای ۵۰۰ مواجه میشود.
برای افزایش سرعت سایت تکنیک های مختلفی وجود دارد که در مقاله افزایش سرعت سایت به آن اشاره شده و برای بررسی این فاکتور در سایت شما نیز ابزار page insights از طرف گوگل معرفی شده است.
طراحی سایت شما در موبایل مناسب نیستبا همه گیر شدن گوشی های هوشمند و در دسترس بودن آنها نرخ کاربرانی که با تلفن همراه وارد سایت ها میشوند هر روز در حال افزایش است و این عدد در برخی سایت ها نزدیک به ۸۰ درصد کاربران را تشکیل میدهد. این کاربران برای دسترسی صحیح به اطلاعات صفحه نیازمند نمایش مناسب در موبایل تبلت یا اصطلاحا طراحی سایت ریسپانسیو هستند.
اگر سایت شما هنوز استاندارهای ریسپانسیو را در خود ندارند ممکن است درصد بالایی از کاربران بلافاصله پس از ورود به آن مجبور به خروج از سایت شوند که این اتفاق میتواند تاثیر منفی زیادی بر سئو سایت شما نیز داشته باشد. برای اطلاعات بیشتر پیشنهاد میکنیم مقاله تست ریسپانسیو بودن سایت را مطالعه نمایید.
سخن پایانیما در اینجا ۸ فاکتور تاثیر گذار بر خروج سریع کاربران از سایت را بررسی کردیم ولی به طور حتم عوامل دیگری مانند استفاده از تصاویر نامناسب، ارایه اطلاعات نادرست، طراحی نازیبا و نبود هویت بصری مناسب و … نیز میتوانند بر این اتفاق تاثیرگذار باشند که بیشتر آنها ریشه در طراحی وب سایت شما دارند.
تجربه خود را از بازطراحی سایت و یا انجام تغییرات در هریک از موارد ذکر شده و تاثیر آن بر زمان حضور کاربر در سایت را در بخش نظرات همین مقاله با ما به اشتراک بگذارید.
 
منبعگhttps://websima.com/bouncerate-facts/

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


راهنمای جامع بازاریابی ویدئویی | درس اول: آشنایی با قدرت و تاثیر رسانه های ویدیویی
هیچ شکی وجود ندارد که بازاریابی ویدئویی همچنان در حال رشد است و تاثیر بسزایی در رشد کسب و کارهای اینترنتی و حتی آفلاین دارند. اما تنها سوال در این زمینه این است که برند شما با چه سرعتی می تواند روی آن سرمایه گذاری کرده و متمرکز گردد؟ در ادامه راهنمای جامع بازاریابی به کمک ویدئو را برای شما شرح می دهیم تا ببینید چگونه یک ویدئو از سایت شما می تواند مثل یک ویروس فراگیر شود و مخاطبان فراتر از انتظاری را برایتان گرد هم آورد.
قدرت بازاریابی ویدئوییبد نیست قدرت بازاریابی را با یک داستان برایتان شرح دهیم. مدتها قبل و در سال 2010 مایکل دوبین، همان کمدین معروف، در یک مهمانی کریسمس با دوست پدرش یعنی مارک لووین که یک تولید کننده بود درباره بازاریابی شروع به بحث کردند. مارک لووین از مایکل دوبین درخواست کمک و راهنمایی درباره فروش بیشتر محصولاتش را داشت و دوبین نیز قبول کرد بازاریابی محصولات او را به عهده بگیرد.
نمایشگر ویدیو
 
 
00:00
 
01:33
 
 
 
دلیل این کار این بود که ایده ای مطمئن برای آن داشت. سر انجام با ساختن یک ویدئو در سال 2012، مرک لووین توانست تنها در 48 ساعت 250000 سفارش از محصول خود (دستگاه ریش تراش!) دریافت کند. باور نکردنی است که در سال 2016 ارزش شرکت آنها به 1 بیلیون دلار رسید و این موفقیت از یک ویدئو که تنها 4500 دلار خرج برداشته بود، شروع شد. این داستان به روند دنباله داری برای استفاده از ویدئو در وب سایت ها، شبکه های اجتماعی و دیگر رسانه ها به عنوان ابزاری قدرتمند در مسیر تبلیغات و بازاریابی بدل شد.
بازاریابی ویدئویی چیست
در پاسخ به این سوال که بازاریابی ویدئویی چیست باید بگوییم بازاریابی ویدئویی به معنای اشتراک گذاری ویدئوهای مرتبط با برند شما در هر کجا از دنیای وب است؛ چه در سایت، چه در رسانه ها و شبکه های اجتماعی و چه در ایمیل هایی که برای کاربران ارسال می کنید. همه ی این ها می تواند بازاریابی ویدئویی برای شما ایجاد کند. البته این بازاریابی همیشه در جهت مثبت نیست و اگر به درستی انجام نشود، تاثیر منفی بر اعتبار برند شما خواهد داشت. مخاطبان معمولا به اینکه ویدئویی که  تماشا می کنند توسط چه شخصی یا برندی ساخته شده است، اهمیت می دهند و برداشت آنها از ویدئوی شما تاثیر مهمی در اعتبار نقش بسته از برند شما در ذهن مخاطب خواهد داشت.
نیاز به توضیح ندارد که بازاریابی ویدئویی و در کل استفاده از فیلم و کلیپ در فضای وب با سرعتی بیش از گذشته در حال رشد و افزایش است. پیشرفت دنیای دیجیتال در این امر بی تاثیر نبوده است. امروزه می توان ویدئوهایی با حجم بیشتر را در فضای وب میزبانی کرد، با سرعت بالاتر آنها را آپلود و دانلود کرد و دستگاه ها نیز با سرعت و کیفیت بالاتری قادر به پخش فایل های ویدئویی هستند. بنابراین سرعت حیرت آور رشد ویدئوها در وب سایت ها که همانند گردبادی خودمختار و مهارنشدنی در حال فراگیر شدن است، چندان هم دور از انتظار و تعجب آور نیست و حتی می توان فراگیری بیشتر آن در سال های پیش رو را نیز پیش بینی کرد.
البته دلیل تاثیرگذاری ویدئو تنها به محبوبیت آن ختم نمی شود و ویژگی ذاتی ویدئوها نسبت به تصاویر استاتیک و بی تحرک که می تواند مفاهیم و احساسات بیشتری را انتقال دهد، به خودی خود مهیج و تاثیرگذار تلقی می شود. بیش از یک قرن است که دنیای سینما در حال فعالیت است و رشد روز افزون تکنولوژی، سخت افزار و نرم افزارها و در نهایت خلق تکنیک های ویدئویی جدید، تاثیرگذاری آن در ذهن مخاطبان را چندین برابر کرده است.
با این تفاسیر، بد نیست نیم نگاهی به آمارهای وب سایت های معتبر نظیر Hubspot و Social Media Today در سال 2019 داشته باشیم تا اهمیت استفاده از ویدئو در بازاریابی و برندینگ برایمان روشن تر شود:
 
– سایت هایی که در محتوای آنها از ویدئو استفاده می شود دارای 41 درصد ترافیک بیشتر نسبت با سایر سایت ها هستند.
– در شبکه های اجتماعیی فیلم ها 1200 درصد بیشتر از عکس ها و متن ها توسط کاربران به اشتراک گذاشته می شوند.
– 87 درصد از کاربران از برندها انتظار تولید محتوای ویدئویی بیشتر دارند.
– کمپین های بازاریابی و برندینگ که از ویدئو استفاده می کنند 49 درصد سریع تر از سایر کمپین ها رشد می کند.
– ایمیل هایی که حاوی فایل های ویدئویی هستند 200 تا 300 درصد بیشتر از ایمیل های فاقد ویدئو کلیک می خورند.
– 68 درصد از کاربران آموزش های مبتنی بر ویدئو را به سایر آموزش ها ترجیح می دهند. این درحالی است که تنها 15 درصد کاربران آموزش های متنی را بیشتر می پسندند.
– ویدئوها نرخ تبدیل را تا 20 درصد در صفحات اصلی سایت ها و تا 80 درصد در صفحات لندینگ افزایش می دهند.
علاوه بر این مزایای دیگری نیز در پشت صحنه وجود دارند. الگوریتم های موتورهای جستجو محتواهای ویدئویی موجود در فید سایت ها را ایندکس می کنند و برای آنها اعتبار بیشتری نسبت به محتواهای متنی در نظر می گیرند. رسانه هایی مثل فیسبوک در فیدهای اجتماعی خود فایل های ویدئویی را در اولویت نمایش قرار می دهند. همچنین گوگل در آپدیت های 20 به بعد قسمت ویژه ای را در بالای صفحات نتایج جستجوی خود به ویدئو ها اختصاص داد.
در نتیجه خواه ناخواه ویدئوها بیشتر از متن ها دیده می شوند و مورد توجه مخاطبان قرار می گیرند، بنابراین در محتواها و تبلیغات خود سعی کنید ویدئوها را در اولویت قرار داده و سعی کنید دسترسی مخاطبان خود به آنها را ساده تر کنید.
 
منبع: روکسو
 
 

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


4 اشتباه رایج در طراحی تجربه کاربری سایت
تجربه کاربری (UX) تمام جنبه های تعامل کاربر با شرکت، خدمات، محصولات و … را شامل می شود. طراحی تجربه کاربری در اصل یک مفهوم غیر دیجیتال است، اما به طور عمده در حوزه ی دیجیتال تعریف و به کار گرفته می شود.
در این مقاله به بررسی ۴ اشتباه رایج در میان طراحان سایت خواهیم پرداخت. اشتباهاتی که گاه از اطلاعات بیش از اندازه ی طراحان و یا درگیر شدن بیش از حد در جزئیات طراحی سایت ناشی می شود. اشتباهاتی که دلیل بسیاری از آن ها عدم آگاهی طراحان از میزان درک دیگران است. عدم آگاهی طراحان از میزان درک دیگران باعث ایجاد یک شکاف دانشی می شود. این شکاف دانشی ایجاد شده بر روی طراحی وب سایت تاثیر می گذارد و باعث ایجاد اشتباهات رایج و در عین حال غیرمنتظره در طراحی تجربه کاربری سایت می شود. در ادامه به معرفی ۴ اشتباه رایج طراحان تجربه ی کاربری سایت خواهیم پرداخت.
پخش‌کننده صوت
 
 
 
00:00
 
00:00
 
برای افزایش یا کاهش صدا از کلیدهای بالا و پایین استفاده کنید. 
 
۱. انتظار بیش از حد از کاربران سایتطراحان افراد منطقی هستند و مدت زمان زیادی را با رابط های کاربری سر و کله می زنند. آن ها در این زمینه دانش شهودی زیادی دارند و خوب می دانند در دنیای وب آی ها و نمادهای مختلف چه نقشی را ایفا می کنند. آن ها در اکثر موارد، و همچنین در مواردی که طراحی تجربه کاربری سایت ضعیف است، به خودشان می گویند اینکه خیلی واضح است! و دقیقا مشکل همینجاست! این نکات برای یک طراح (به دلیل اطلاعاتی که به واسطه ی حرفه اش دارد) امری واضح به نظر می رسد، اما برای یک کاربر عام این طور نیست.
طراحان سایت فرض می کنند که:
کاربر از کنترل ها آگاهی دارد.
کاربر آی ها، نمادها و لوگوها را می شناسد و مفهومش را درک می کند.
کاربر تمام تمرکز و حواسش را به وب سایت ما می دهد.
کاربر دستورالعمل های سایت ما را می خواند و …
مشکل این جاست که این فروض طراحان سایت که فرض های منطقی نیز به نظر می رسند در بسیاری از مواقع واقعیت ندارند. برخی از کاربران برای اولین بار آی ها و نمادها را می بینند، برخی از آن ها دستورالعمل ها را نادیده می گیرند، بسیاری تصاویر را گیج کننده می دانند و با نوشته راحت ترند و … . این مسائل باعث می شوند که در بسیاری از موارد فرض های طراحان سایت با واقعیت متفاوت باشد و در نتیجه ی آن، تجربه ی کاربری سایت مطلوب نخواهد بود.
۲. طراحی برای همه ی کاربران“سایت را برای کاربر طراحی کن” توصیه ایی است که همیشه مانند پتک بر سر طراحان سایت کوبیده می شود. همیشه به طراحان سایت توصیه می شود که بر روی نیازهای کاربران تمرکز کنند و برای آن ها طراحی کنند. کاربر با مخاطب هدف تفاوت دارد و بسیاری از کاربران سایت شما، کاربران مورد نیاز شما نیستند. برای مثال گوگل را در نظر بگیرید، گوگل تمرکز اصلی خود را بر روی جستجوگرها می گذارد، کاربرانی که در گوکل به جستجو می پردازند، اما آیا این ها تنها کسانی هستند که از گوگل استفاده می کنند؟ خیر!
تبلیغ کنندگان، ربات ها، ان (کسانی که با دکمه های دانلود قلابی، نرم افزارهای ناخواسته و ویروس ها را منتشر می کنند) نیز از کاربران گوگل هستند، اما گوگل برای بهتر کردن تجربه کاربری آن ها طراحی نمی کند و فقط به تجربه ی کاربری جستجوگران توجه می کند.
آنچه که به عنوان طراحی وب سایت برای کاربر توصیه می شود در واقع طراحی برای مخاطب هدف است و بسیاری از طراحان این را در نظر نمی گیرند. طراحی سایت شما باید برای کاربرانی که آن ها را هدف قرار داده اید مناسب باشد. همچنین از طرفی توصیه ی بیش از حد به توجه به نیازهای کاربر باعث ایجاد محدودیت برای طراح و مانعی برای طراحی خلاقانه وب سایت می شود.
۳. استفاده نامناسب از اصطکاک در طراحی سایتاصطکاک (Friction) مقاومتی است که در هر مرحله از فرآیندهای سایت شما ایجاد می شود. اکثر طراحان اعتقاد دارند که ایجاد اصطکاک برای کاربر بد است. فرض کنید در حال گوش دادن به موسیقی هستید و صدای آن بیش از حد بلند است، شما چه می کنید؟ صدای آن را کم می کنید،نه؟ این شبیه کاری است که باید با اصطکاک در طراحی سایت انجام داد.
با تنظیم اصطکاک در طراحی سایت و کم و زیاد کردن آن می توان کاربران و تماس های آن ها را کاهش 
در زیر چند نمونه از به کارگیری اصطکاک در طراحی وب سایت برای کاهش یا افزایش تعداد کاربران را آورده ایم:
استفاده از تصاویر امنیتی (Captcha) در فرم های تماس وب سایت
افزایش دادن تعداد مراحل هر فرآیند درون سایت
استفاده از صفحات بلند با نوشته های طولانی
استفاده از تعداد فیلدهای زیاد در فرم ها برای افزایش خستگی و ایجاد بی میلی در کاربر
استفاده از تعداد فیلدهای بسیار کم برای ایجاد دسترسی راحت تر برای همه کاربران
پرسیدن اطلاعات شخصی یا مالی کاربران، بدون اینکه اطلاعاتی درباره ی خود ارائه دهید
۴. طراحی کردن سایتی که مشتری می خواهدطراحی تجربه کاربری سایت به طور صحیح به شهامت زیادی نیاز دارد، همچنین برای طراحی تجربه کاربری به شناسایی درست هدف نیازمندیم. حال مشکلی که پیش می آید آن است که رئیس شما، مشتری، هیئت مدیره یا … چیزی را از شما می خواهد که می دانید اشتباه است و نتیجه ی مطلوبی در طراحی ندارد. تجربه ی شما به شما می گوید که چیزی که آن ها می خواهند باعث شکست‌شان خواهد شد و به نتیجه نخواهد رسید. اغلب طراحان در این مواقع سکوت می کنند و چیزی که از آن ها خواسته می شود را طراحی می کنند، با آگاهی از اینکه خروجی مطلوبی نخواهد داشت.
با این توجیه که به هر حال رئیس، مشتری یا … کسی است که قرار است پول را پرداخت کند پس هر چه می خواهد را باید برای او طراحی کرد، و همچنین ترس از دست دادن شغل یا پروژه باعث می شود که طراحان وب سایت ساکت بنشینند و چیزی نگویند. در واقع در این موارد باید صحبت کرد و مشکلات را با مشتریان در میان گذاشت. زیرا داشتن یک رزومه ضعیف با نمونه کارهای سطح پایین باعث بی اعتبار شدن و از دست دادن پروژه های آینده خواهد شد. پس با تصمیم گیرندگان صحبت کنید و برای اثبات دلایل خود از گزارش ها، تحقیقات، داده ها و … استفاده کنید.
شما با کدامیک از این چالش ها در طراحی تجربه کاربری سایت رو به رو هستید؟ راه حل شما چیست؟ نظرات خود را با ما در میان بگذارید.
 
https://websima.com/%db%b4-%d8%a7%d8%b4%d8%aa%d8%a8%d8%a7%d9%87-%d8%b1%d8%a7%db%8c%d8%ac-%d8%af%d8%b1-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%aa%d8%ac%d8%b1%d8%a8%d9%87-%da%a9%d8%a7%d8%b1%d8%a8%d8%b1%db%8c-%d8%b3%d8%a7%db%8c/

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


ساخت یک جدول قابل ویرایش با jQuery و Pure CSS
استفاده از کامپوننت های منبع باز، ساخت عناصر قدرتمند بخش front-end را برای وب سایت ها یا اپلیکیشن ها بسیار آسان و سریع کرده است. در این آموزش یاد می گیرید که چگونه با استفاده از CSS و jQuery  جدولی که قابلیت قابل ویرایش داشته باشد را ایجاد کنید.

شروع کاراولین کاری که باید انجام دهید ، ایجاد فایل index.html در سرور و یا درایو محلی شماست. کد پایه زیر را در فایل جدید ایجاد شده کپی کرده و سپس آن را ذخیره کنید.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Editable table</title> <style> body{ padding: 1% 3%; color: rgb(119, 119, 119); } h1{ color:#333 } </style> </head> <body> <h1>Editable table example</h1> </body> </html>اکنون باید ابزارهای رایگانی که می خواهیم در این آموزش استفاده کنیم را وارد میدان کنیم. مورد اول Pure CSS نام دارد که فریمورکی بسیار سبک برای CSS محسوب میشود و برای پروژه های کوچک ایده آل است.
البته نیازی به دانلود آن نیست، زیرا می تواند به طور مستقیم از سرورهای Cloudflare پیوندی از آن را در فایل خود قرار دهید. بنابراین فقط  کد زیر را در بخش <head> فایل index.html که اخیراً ایجاد کرده اید قرار دهید:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css">دومین ابزاری که می خواهیم از آن استفاده کنیم یک افزونه ساده و شیرین جی کوئری به نام edibleTableWidget است. فایل این پلاگین را از اینجا دانلود کرده و آن را در همان سرور و یا محلی که فایل index.html را ایجاد کرده اید ، قرار دهید. هیچ افزونه jQuery دیگری لازم نیست.
جدول HTMLاز آنجا که می خواهیم یک جدول HTML قابل ویرایش را ایجاد کنیم، کاری که اکنون باید انجام شود بدیهی است . ایجاد یک جدول HTML. جدول شما باید در بخش <body> فایل index.html جایگذاری شود:
<table id="editable" class="pure-table pure-table-bordered"> <thead> <tr> <th>#</th> <th>Make</th> <th>Model</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Honda</td> <td>Accord</td> <td>2009</td> </tr> <tr> <td>2</td> <td>Toyota</td> <td>Camry</td> <td>2012</td> </tr> <tr> <td>3</td> <td>Hyundai</td> <td>Elantra</td> <td>2010</td> </tr> </tbody> </table>حالا به صفحه index.html خود در مرورگر نگاهی بیندازید: به لطف Pure CSS ، جدول ساده HTML ما بسیار زیبا و حرفه ای به نظر می رسد. اگر می خواهید اطلاعات بیشتری درباره آنچه Pure CSS برای جداول HTML انجام میدهد را بدست آورید ، حتماً مستندات مربوط به آن را بررسی کنید.
افزودن jQueryتا حالا جدول ما خوب به نظر می رسد ، اما در حال حاضر سلول ها قابل ویرایش نیستند. با استفاده از کتابخانه jQuery و پلاگین edibleTableWidget می خواهیم جدول را قابل ویرایش کنیم. اولین کاری که باید  انجام دهید پیوند دادن به jQuery است. زیرا پلاگین editableTableWidget برای انجام صحیح کار خود به این کتابخانه احتیاج دارد.
می توانید از یک نسخه کپی از کتاب خانه جی کوئری در سرور خود استفاده کنید و یا پیوندی از Google CDN آن را در فایل خود کپی کنید.همچنین باید به فایل mindmup-editabletable.js که قبلاً دانلود کرده ایم لینک دهیم.کد زیر را در فایل index.html خود، درست بالاتر از تگ خاتمه </ body> قرار دهید :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="mindmup-editabletable.js"></script>بعد از اینکه این کار انجام شد، برای اضافه کردن قابلیت ویرایش در جدول کد زیر را به سند خود اضافه کنید :
<script> $('#editable').editableTableWidget(); </script>حالا صفحه خود را دوباره در مرورگر مشاهده کنید، بله جدول شما قابل ویرایش شده است.
ایجاد سلولهای غیرقابل ویرایشاکنون که یک جدول قابل ویرایش کاملاً کاربردی داریم ، بیایید کمی فراتر برویم و ببینیم چه کارهایی برای بهتر شدن آن می توانیم انجام دهیم. اول باید اطمینان حاصل کنیم که سلولهای خاص قابل ویرایش نیستند. برای انجام این کار هیچ مسئله بزرگی در اینجا وجود ندارد ،فقط باید یک کلاس را به عناصر <td> اضافه کنیم :
<td class="uneditable">.</td>و سپس ، از کد JavaScript زیر برای تشخیص تغییرات بر روی سلولهای غیرقابل ویرایش و جلوگیری از آن استفاده کنیم :
$('#editable td.uneditable').on('change', function(evt, newValue) { return false; });اگر می خواهید این مورد را در یک نسخه ی نمایشی آزمایش کنید ، سعی کنید سلولی  که در آن مقدار "2010" قرار داده شده است را در اینجا ویرایش کنید همانطور که مشاهده میکنید ویرایش امکان پذیر نیست.
ذخیره داده ها در پایگاه داده در نهایت، احتمالا میخواهید مقادیر را از جدول HTML در یک پایگاه داده ذخیره کنید. ساده ترین راه حل برای این کار استفاده از jQuery و Ajax برای ارسال خودکار مقادیر به اسکریپت PHP است که در آن داده ها در پایگاه داده ذخیره میشوند. انجام این کار بسیار ساده است، این کار با استفاده از متد ()post انجام میشود :
$('#editable td').on('change', function(evt, newValue) { $.post( "script.php", { value: newValue }) .done(function( data ) { alert( "Data Loaded: " + data ); }); ; });در خط 1 ، ما از یک شنونده رویداد برای بررسی اینکه آیا مقدار توسط کاربر تغییر کرده است یا خیر، استفاده می کنیم. اگر تغییرات انجام شده متد ()post فراخوانی میشود.
سوالات متداول
آیا این کد ها با Bootstrap هم کار می کند؟کاملاً، کد های آموزش داده شده در بالا به راحتی با Bootstrap یا سایر فریمورک های CSS سازگار است. فقط باید یک id به جدول اضافه کنید و سپس با متد ()editableTableWidget روی آن فراخوانی کنید :
$('#your-table').editableTableWidget();آیا می توانم چندین جدول قابل ویرایش در یک صفحه داشته باشم؟بله برای انجام این کار، ساده ترین راه اضافه کردن یک کلاس به جداول خود  و متعاقباً فراخوانی متد editableTableWidget()  بر روی آنهاست :
$('.editable').editableTableWidget(); 
#جدول #جدول قابل ویرایش
https://learnsource.net/article/196/%D8%B3%D8%A7%D8%AE%D8%AA-%DB%8C%DA%A9-%D8%AC%D8%AF%D9%88%D9%84-%D9%82%D8%A7%D8%A8%D9%84-%D9%88%DB%8C%D8%B1%D8%A7%DB%8C%D8%B4-%D8%A8%D8%A7-jquery-%D9%88-pure-css

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
  


محبوب‌ترین زبان‌های برنامه‌نویسی سمت سرور (Back-End)
توسعه Back-End به برنامه‌های سمت سرور و همه چیزهایی که بین پایگاه داده و مرورگر ارتباط برقرار می‌کند، اشاره دارد. توسعه Back-end بر پایگاه داده‌ها، اسکریپت‌ها و معماری وب‌سایت تمرکز دارد.
به طور معمول HTML و CSS در این روند مورد بررسی قرار می‌گیرند. اگرچه مفید هستند، اما واقعا برای توسعه منطق back-end ضروری نیستند. 
در این مقاله ما محبوب‌ترین زبان‌های برنامه‌نویسی back-end را مورد بررسی قرار می‌دهیم.
برنامه‌نویسیback-end  دارای سه بخش است : سرور، برنامه و پایگاه داده.
در ادامه مقاله این موارد را بیشتر توضیح می‌دهیم.
برای بهتر توضیح دادن اینکه چگونه همه این موارد کار می‌کنند، بیایید از یک مثال استفاده کنیم : یک مشتری که می‌خواهد با استفاده از وب‌سایت کارت پرواز بخرد. همه چیزهایی که مشتری بر روی صفحه وب می‌بیند front-end است، اما وقتی این مشتری تمام اطلاعات خود را معرفی می‌کند، مانند نام، آدرس، توضیحات و غیره، عملکرد وب اطلاعات را بر روی پایگاه داده‌ای که از قبل بر روی وب‌سایت ساخته شده است ذخیره می‌کند.
برنامه وب اجزاء را در پایگاه داده ایجاد، حذف، آپدیت می‌کند یا تغییر نام می‌دهد. مثلا وقتی یک مشتری بلیط را خریداری می‌کند، آیتمی در جدول ایجاد می‌شود، اما زمانی که آن‌ها تجدیدنظر می‌کنند یا مایل به لغو بلیط هستند، آیتم در پایگاه داده تغییر می‌کند.
در ساده‌ترین شکل، سرور کامپیوتری است که از راه دور به نرم‌افزار دسترسی داشته و آن را اجرا می‌کند تا درخواست‌های مشتریان را انجام دهد.
به طور خلاصه، وقتی مشتری می‌خواهد بلیط بخرد، کار back-end این است که برنامه وب با سرور ارتباط برقرار کند تا تغییراتی را که در پایگاه داده ذخیره‌شده، روی سرور ایجاد کند. 
تکنولوژی‌هایی مثل PHP ، Ruby ، Python و تکنولوژی‌های دیگر مواردی هستند، که به برنامه‌نویسان back-end کمک می‌کنند تا این کار را به درستی و هماهنگ انجام دهند، و مشتری به آسانی می‌تواند خودش بلیطش را درخواست دهد.
back-end  دارای سه بخش است: سرور، پایگاه داده شما، و یک برنامه  back-end،  نرم‌افزاری که از طریق زبان‌های سمت سرور نوشته شده است. سرور یک کامپیوتر قدرتمند است که نرم‌افزار back-end را اجرا می‌کند، پایگاه داده‌ داده‌های سایت شما را می‌سازد، و نرم‌افزار مرتبط بین این دو است. مثلا اگر کاربری پروفایل خود را روی سایت آپدیت کند، اسکریپت‌های سمت سرور اطلاعاتی که کاربر وارد کرده است را می‌آورد.
تا الان توضیحاتی درباره back-end و front-end به شما ارائه کردیم. در ادامه به بررسی محبوب‌ترین زبان های برنامه‌نویسی back-end می‌پردازیم.
Java
جاوا توسط توسعه‌دهندگان بزرگ انتخاب شده است. البته این بدان معنا نیست که بهترین زبان است. جاوا پیرامون مدل سازمانی ساخته شده است. در ابتدا بنیان‌گذاران آن برنامه‌ریزی کردند تا کسب و کاری را برای آن بسازند مثل .NET 
 تمام برنامه‌های اندروید مبتنی بر جاوا هستند و ۹۰ درصد شرکت‌های Fortune ۵۰۰ از جاوا به عنوان زبان سمت‌ سرور برای توسعه back-end استفاده می‌کنند. جاوا با محبوبیتی در حدود ۶۰۰۰ شغل در سال ۲۰۱۸ نسبت به سال ۲۰۱۷ کاهش یافته است، اما هنوز هم به خوبی پا برجاست.
Python
بسیار سریع در حال توسعه و نمونه‌سازی است. کدنویسی با آن لذت‌بخش است، نگهداری و ریفکتور آن آسان است. پایتون یک زبان برنامه‌نویسی با اهداف عمومی است، که برای توسعه وب استفاده می‌شود و به عنوان یک زبان پشتیبان برای توسعه‌دهندگان نرم‌افزار مورد استفاده قرار می‌گیرد.
 این زبان به طور گسترده در محاسبات علمی، داده‌کاوی و یادگیری ماشین استفاده می‌شود.
بسیاری از وبسایت‌ها توسط فریم‌ورک‌های Python ، Ruby و PHP هدایت می‌شوند. این زبان‌ها توسط افراد حرفه‌ای ساخته شده‌اند.
نقاط ضعف: به اندازه جاوا سریع نیست، اما بخش محتوای وب آن به اندازه کافی سریع است.
Node.js
Node.js  با Express.js نیز می‌تواند برای طراحی برنامه‌های وب کلاسیک در سمت سرور استفاده شود. با این حال، در حالی که امکان‌پذیر است،‌ این الگوی درخواست-پاسخ که در Node.js پیرامون رندر HTML ارائه می‌شود، معمول‌ترین مورد استفاده نیست.
Go
 Go تازه‌ وارد است. از نظر سرعت بهتر از جاوا و از نظر جذابیت و بهره‌وری بهتر از Python / Ruby است. دارای سلسله مراتبی ساده و قدرتمند می‌باشد.
نقاط ضعف: اگرچه Go پروژه‌ای پایدار است، اما ابزارهای زیادی برای آن وجود ندارد. اما انتظار می‌رود که به مرور زمان در این زمینه پیشرفت کند.
Django
این یک فریم‌ورک وب رایگان و منبع باز (open-source) است، که به زبان پایتون نوشته شده است و الگوی معماری model–view–controller (MVC) را دنبال می‌کند. 
این فریم‌ورک توسط Django Software Foundation (DSF) نگهداری می‌شود.
 Djangoیک فریمورک وب پایتون سطح بالا است که توسعه سریع و طراحی تمیز و کاربردی را تقویت می‌کند.
ASP.NET
از پایگاه داده SQL server مایکروسافت استفاده می‌کند.
 ASP.NETیک فریمورک وب منبع باز برای ساخت برنامه‌های وب مدرن و سرویس‌ها با .NET است.
 ASP.NETوب‌سایت‌های مبتنی بر HTML۵، CSS و JavaScript را ایجاد می‌کند که ساده و سریع هستند و می‌توانند به میلیون‌ها کاربر نسبت داده شوند. به شما اجازه می‌دهد تا به راحتی از ویژگی‌های کامل زبان‌های مثل C# یا VB.NET برای ساخت برنامه‌های وب استفاده کنید. 
Rubyاین یک زبان برنامه‌نویسی است که برای سرگرمی و کارایی ایجاد شده است. سینتکس Ruby به راحتی قابل خواندن است، حتی برای کسی که Ruby را نمی‌شناسد.
 به طور کلی این یک نقطه ارتباط به لطف Ruby On Rails است، که فریمورکی ) ساخته شده با (Ruby برای ساخت برنامه‌های وب است. این زبان بر روی Rails یکی از محبوب‌ترین ابزارهای بهبود وب برای استارت‌آپ‌ها و کسب و کارهای کوچک است.
SQL
 SQL یک زبان استاندارد کوئری (پرس وجو) برای ذخیره‌سازی، بازیابی و نگهداری داده‌ها در پایگاه داده است. 
این یک زبان جهانی کوئری برای پایگاه داده است SQL .برای ارتباط با پایگاه داده استفاده می‌شود، که بخشی از هر عملکرد وب back-end است. مهم نیست که چه زبان یا فریمورکی را برای ساخت برنامه وب خود انتخاب می‌کنید، شما احتمالا از SQL ، یا نوعی انتزاع از آن، برای ارتباط با پایگاه داده استفاده می‌کنید.
برنامه‌نویس SQL شغلی با تقاضا بالا در سطح جهانی است، با بیش از ۳۰۰۰۰ شغل بیشتر از زبان‌های برنامه‌نویسی که در بالا به آن‌ها ذکر شد. اگر تنها زمان محدودی برای یادگیری یک تکنولوژی جدید دارید، این مورد را انتخاب کنید.
کلام آخر
در پایان، ما ۸ مورد از محبوب‌ترین زبان های برنامه نویسی سمت سرور را معرفی کردیم.
اگر مایل هستید ،که برنامه نویسی سمت سرور را یاد بگیرید ،‌می توانید به لینک‌های قرار داده شده در هر قسمت مراجعه کنید.
منبع
https://roocket.ir/articles/most-popular-web-back-end-programming-language

 طراحی وب- برنامه نویسی
 
مشخصات
جهت مشاهده منبع اصلی این مطلب کلیک کنید 
    اشتراک گذاری در تلگرام      
 آخرین مطالب  
 

عناصر پایه ای HTML
آشنایی با زبان HTML
ساختار و سبک نوشتاری عناصر در HTML
عناوین و تیترها در زبان HTML
Attribute ها در زبان HTML
پاراگراف ها در زبان HTML
ویژگی Style در زبان HTML
نقل قول و استناد در زبان HTML
فرمت بندی متون در HTML
تغییر شکل سه بعدی عناصر در CSS CSS 3D Transforms
Transition ها در زبان CSS
CSS چیست؟
Margin ها در زبان CSS
کار با Padding ها در CSS
Outline ها در زبان CSS
Interface ها (واسط‌ ها در زبان C#
Interface ها (واسط‌ ها) در زبان C#
رویدادها (Events) در زبان برنامه‌نویسی C#
آموزش LINQ در C# (سی شارپ) – مقدمه
اجرای اولین پروژه با زبان برنامه‌ نویسی #C
انواع عملگرها‌ در سی شارپ (C#)
کپسوله‌سازی (Encapsulation) و تعیین سطح دسترسی (Access Modifier)
آشنایی با مفهوم برنامه‌ نویسی شیءگرا در C#
معرفی فریم ورک جاوا اسکریپت انگولار ۶
معرفی ۱۰ کتابخانه کلیدی انگولار
آیا برای انگولار ۶ آماده هستید؟
معرفی ۱۰ کتابخانه (کامپوننت) کلیدی انگولار
انگولار ۶ هم اکنون در دسترس برنامه نویسان است!
آموزش کار با فرم ها در انگولار ۷
معرفی ساختار انگولار و ویرایش اولین برنامه

 
آخرین ارسال ها
  


محصولات
میزان درآمد نمایندگی بیمه
اهنگ جدید
کلیپ های تصویری شیروان عبدالله
محصولات
میزان درآمد نمایندگی بیمه
میزان درآمد نمایندگی بیمه
محصولات
دوره تخصصی بیمه
اهنگ جدید
کلیپ های تصویری شیروان عبدالله
به وبلاگ خود خوش امدید
قیمت، مشخصات و فواید صابون زردچوبه سیندرلا
بوتاکس مو بهتر است یا کراتین مو؟
کاهش آبیاری در کشاورزی با روش سوپرجاذب کشاورزی
برگزاری مراسم مادران و همسران حماسه ها در شهر اندیشه
ایران و جمهوری آذربایجان، دوستان دائمی
«قاتل و وحشی» روی پرده می‌رود؟ / انتشار ریز هزینه‌ها پس از پایان جشنواره
ظریف در نشست خبری با چاوش‌اوغلو:امید اعضای دولت جدید آمریکا نه منطقی است و نه عملی می‌شود/منتظر حضور اردوغان در ایران هستیم
خلق تصاویر بی‌نظیر با ترکیب پهپاد و طبیعت
متخصص مربوط به راه اندازی
اجرای همزمان چندین اپ اندرویدی در ویندوز ۱۰ از طریق برنامه Your Phone ممکن شد
  
 آخرین وبلاگ ها  
   

تولید و فروش گچ پلیمری
webdes
داروخانه پلاس | داروخانه آنلاین شبانه روزی
ترشیز وب
بانک اطلاعات مشاغل
لباس زیر شیردهی نخی یقه دار زنانه خالدار
تیم والیبال کاراسونو
تک تاک
شرکت کالای صنعت نفت
محصولات کیهان
delsatecco.rozblog.com
قفل دیجیتال
فارسروید
beroozha
Rank2Game
پویان اسکنر
lilini
تعمیر و فروش
kiamehr85
دانلود رایگان کتاب
ویلم
پچ لیگ برتر ایران
تفریحی و دانلود
کنترلی کردن درب آپارتمان
فن کویل
 

   
 آخرین جستجو ها  
 httpsappksbatman.blogsky.com
دی جی مرتضی چیذری
جلی کوردی مهابادی اینستاگرام
seris osman1 namasha
کتاب حسابداری ابزارها عقود مالی اسلامی تالیف دکتر قربان اسکندری
صف نمایش فلکسم
دانلود فیلم برناردت سوبی رو
httpsemtrhanat-nahaei
httpsldenkooin.smartglasses.ir
style.royapost-خرید-اینترنتی-خوشبو-ترین-ادکلن-مردانهبیمه-مسئولیتبیمه
کد آهنگ پیشواز داریوش همراه اول
maghzrayaneh.comblog4510-نکته-برای-استفاده-از-ویندوز
بازیگران سریال ترکی اشیانه دلم
انیمیشن تیم گوزن ها
پیش آهنگ منتظرت بودم
موزیک فرانسوی لیلی
کریم بنزما عکسهای او
httpsalalai.smartglasses.ir
ناظر اندروید
يادم مياد اون ردزاي اول
پرسشنامه خودکارآمدی کورگان
رمان دانشجوی شیطون بلا فصل دوم پارت 4
فروش انواع‌تیشرت مردانه طرح‌گل تایلندی
دانلود آهنگ نازار دلی از سینا پارسیان
دانلود برنامه ناظر پلیس
فواید مضرات انفیه
سونیک ایرانیک
alef.irnews4000403028.htmlروش-های-موثر-تبلیغات
تولدته من جلوم یه کیک
حالم خرابه منو نگاه کن javadieh.
قسمت چهارم عشق تجملاتی
ثپت.نام.کواهینامه.بیسوادی
فیلم های 1975
اهنگ غرور فاطمه رحیمی
دانلود سامانه ناظر ناجا
يادم مياد اون روزاي اول مثل ماشين خراب
موزیک ویدیو های سای
به موهات رنگ شراب میزدم
modirebimeh.irمحاسبه-آنلاین-بیمه-مهندس-ناظرسوالات
قسمت چهارم عشق نمایشی هاردساب
سریال خوراکی شیرین قسمت دوم نماشا
فصل 4 قسمت 10سریال خارجی سقوط آسمان ها Falling Skies 2011
دیر یا زود میمیرم پارسا لیپ
آشیانه دلم قسمت۶
کدالگوریتم شانگ
خرید سیم‌کارت اعتباری میخواهم برگشت میدهیم
کویتی دخله کله حلو
کتونی مردانه‌۳۶۱ در دیجی‌کالا
طاهره چ خوشگل بیه
دانلود آهنگ سنی گوردوم ماراغ گلدی دونیاما از وصال علی اوف
دانلود رایگان برنامه چهار ماهه کنکور تجربی به صورت pdfرایگان
سوفیا ورگارا
تم قهوه داغ سن اندریاس
دانلود فایل pdf رایگان‌ طمطم‌ هندی
لباس استقلال
بند قلب دخنر زهرا گسست
قصه مشت دندون شیری سیب سرخی
ع سلنا گومز
نکتار پرتقال سن ایچ گاز دار خراب است؟
آوای انتظار حسن زیرک
میز تحریر مدل میلاد تاشو 70
دانلودرایگان یخ زده 2 از فیلمو
خرافات ممنوعیت تغذیه
اهنگ برو بسلامت احساس ناکامان
دانلود سوپرگرام
نمایشنامه خانه عروسک
دوبله دو ساعته
نفرات برتر pes
دانلود آهنگ فرارم از دم با اینا
يادمه اون روزاي اول مثل يه ماشين
دانلود اهنگ توال صدالی ینه گجه اولدی یادیما دوشدون
دیجی کال سرویس شیشه ای میوه خوری پیش دستی
پیانیست دوبله انلاین
هرجایی بی وفا
دانلود رایگان فیلم سینمای تقدیم با عشق ۱۹۶۷ دوبله فارسی
آموزش مرحله C شهراول
شعر متناسب با دریا شود آن رود که پیوسته روان است
گروه مسابقات آنلاین ped
بادم میاد روزای اول
دانلود رایگان کتاب صوتی خاطرات یک مغ
آموزش وردپرس خصوصی
خرید پایه دوربین
رومانسون ros1093
شماره خاله استان بوشهر شهرستان کنگان
اگه مردیم بمیریم هردوتامون
فیلم kadin قسمت65 65 65 65 65 65 65 65 65 65 65 65
در تماس با همراه اول هیچ بوقی نمیخورد قطع میشود
سیم کارتم روشنه اما نه زنگ میخوره نه زنگ میزنه
dumb and dumber1 aparat
چگونه واتس اپ محزا به کامپیوتر نصب کنم
کارتن اسباب کشی جابجایی صنایع سهند
زینب حسنی آهنگ نه بنفشه
صلوات نهاوند
رب انار درست کردم ولی سفت شده
سریال تایلندی سنگدل
سریال فرار از زندان فصل 1 قسمت 15
سریال کره ای chocolate
نوار تست کلور چک در اهواز
دانلود اهنگ نازی نازی از رضا معارف در موزیکدام
اهنگ تعصب مصطفی فرجی
اھنگ تکتم پتی
شماره موبایل زن بیوه
شانه السا انا با اینه ش
چرا بعضی از سرور های سمپ کد میخواهد
عی بازیگران ترکیه
بهترین کمپرسور باد یونیتی
باتصویر روخوانی کلاس پنجم درس فارسی کار تلاش فیلم
کلاهک صندلی پژو پارس
دانلود عشق تجملاتی
پخش انلاین انتقام جو۲۰‍‍‍‍‍‍‍۱۹دوبله فارسی
دانلود اهنگ ترکی منو به مال ثروت فروختند
بیوگرافی اکرم جعفرپور
چگونه سری پیکنیک بی صدا بسازیم
موزیک ویدیو ساسی مانکن
مهرزاد نوازنده یار سر بازار
آمادگی دفاعی نهم
ميتسوبيشي دبل كبين 2020
بهترین قرص جنسی بلند کننده
تماشای انلاین فروزن ۲دوبله
کلاه دابلیو استاندارد مدل fo2
لاله در دست
دانلودآهنگ عراقی دترعادل قربانی
انتقام سگ پلیس بعد مر گ صاحب از زندانی فرانی
اطلاعات عمومی حوزه بانکی، اقتصادی، بازارهای مالی سرمایه بازاریابی
خرید هدفون بی سیم مدل s۶
آموزش زبان مرغی
۴۳۳ریموت ۵ دکمه
زمان ثبت نام آزمون دکترای ۹۹
اهنگ های مومولند
ایرینا شایک ی
ساعت اپل واچ دیجیکالا قیمت ۷۰۰تومانی
اهنگ غمگین مازندرانی زندان در ولنگو واز نمانه
فعالیت های درس۱۵ مطالعات هشتم
جزئیات فصل ۴ سریال لیدی باگ
قیمت اورگ ها
فروش سنگ آسیاب قدیمی
کداهنگ پیشوازهمراه اول زیبا رحیمی بنام غرور
دانلود ترانه کردی مگر قلب تو چند رنگ دل تو نازنین سنگ فریبرز نامداری
ممکمل مرغ تخم گذار
باب اسفنجی رفتن به دهان هیولا
انقلاب اسلامی
دانلود رمان تهران مازراتی.com
مواد مرکب کاو
تحقیق در مورد روشها مختلف پشتبان گیری
پلیس هوشمند امین مردم
دانلود سریال تقدیر یک فرشته زبان اصلی
بیوگرافی گلرخ ثریا
نمونه سوالات آزمون تافل عربی قم
تشخیص گین آپ صورت اصل
سریال چینی عشق ابدی ۲۰۱۷
 

 خرید بک لینک / ریپورتاژ
مشاور گروپ
دکتر ذهن
 ردیاب سام ترک 

 

 345 
 مرجع کنکور ایران 
 Andersyij77 CaNt 
 دستگاه حضور و غیاب 
 طراحی سایت در فردیس 
 گلدن رویال 
 آپشن خودرو | استریو آرام 
 آموزش بورس فارکس و ارزهای دیجیتال 
 مشاوره مهاجرت و تحصیل در خارج 
 خرید و فروش انواع باسکول فروشگاهی 
 