<p>اگر با JWT کار کرده باشید قطعا می دانید که یکی از بهترین گزینه ها برای تائید هویت API ها و نرم افزارهای تک صفحه ای است.</p><p>JWT بر پایه توکن کار میکند و می تواند برای شما توکن های مختلف به ازای هر بار ورود تولید کند.</p><p>مشکل اساسی در کار با JWT در کنار سادگی استفاده، مدیریت ذخیره سازی این توکن هاست. چرا که در صورت سهل انگاری به سادگی قابلیت سرقت توکن توسط حملات XSS با تزریق کد جاواسکریپت در صفحه وجود دارد.</p><p>دلیل این امر این است که بسیاری از برنامه نویسان توکن دریافتی از سمت سرور را در localStorage یا sessionStorage ذخیره می کنند که به خاطر ماهیت این دو فضای ذخیره سازی در مرورگر به سادگی با یک خط کدجاواسکریپ قابل دریافت است.</p><p>به همین دلیل بهترین محل برای ذخیره سازی توکن کوکی است. کوکی به صورت اتوماتیک پس از ست شدن، هر بار با هر درخواست به سمت سرور ارسال می شود و از سمت کلاینت قابل تغییر دادن نیست.</p><p>در این مقاله که در مدیوم نوشته ام می توانید جزئیات پیاده سازی یک اپ ساده تائید هویت با استفاده از Nodejs و JWT را مطالعه کنید.</p><p><a href="https://medium.com/@keikaavousi/nodejs-authentication-with-jwt-and-cookies-3fb1c8c739ba">&nbsp;تائید هویت در نودجی اس با استفاده از JWT و کوکی</a></p>

authentication

استفاده از JWT برای تائید هویت در NodeJs

<p>حتما تا به حال برای شما پیش اومده که زمان طراحی یک وب سایت فروشگاهی یا آموزش طراحی وب اپلیکیشن های فروشگاهی، نیاز به یک سری داده‌های فیک یا اصطلاحا dummy data داشته باشید. همون طور که می دونید dummy data معروف Lorem ipsum سالهاست که استفاده میشه و تقریبا میشه گفت جز جدایی ناپذیر طراحی و توسعه وب سایت یا اپلیکیشن های مختلف هست. اما برای نمونه اولیه سایت های فروشگاهی قبل از اینکه دیتای واقعی تولید بشه باید چکار کرد؟ ضمن اینکه اگر وب سایت قرار باشه به صورت api داده ها رو لود کنه کار پیچیده تر می شه.</p><p>اولین راهکاری که به ذهن میرسه شاید این باشه که یک فایل با فرمت JSON بسازیم و در کنار پروژه قرار بدیم. به این ترتیب یک سری داده فرضی داریم و میتونیم همون ها رو داخل صفحه fetch کنیم. اما این کار الزاما خوب نیست.</p><p>دلیلیش اینه که برای هر پروژه وقت زیادی از شما گرفته میشه تا دیتای فیک تولید کنید و پیدا کردن تصویر و حتی تایپ کردنش ممکنه کار عذاب آوری باشه!</p><p>اینجاست که یک سرویس میتونه به کمک شما بیاد. وب سایت <a href="https://fakestoreapi.com">Fake Store API</a> این امکان رو به شما میده که بدون دغدغه داده به طراحیتون بپردازید. در حال حاضر داده هایی که این وب سایت در اختیار شما قرار میده شامل:</p><ul><li>محصولات ( در دسته بندی‌های پوشاک مردان، پوشاک زنان، وسایل الکترونیک و جواهرات )</li><li>سبد خرید</li><li>کاربر</li></ul><p>ضمن اینکه انواع متدهای HTTP - GET,POST,PUT,PATCH,DELETE رو شامل میشه و می تونید به هر روشی که دوست دارید (fetch api, axios, jquery ajax,…) بهش متصل بشید و از داده هاش استفاده کنید.</p><p>برای مثال اگر در حال توسعه پنل ادمین فروشگاهی هستید داده های سبد خریدهای ثبت شده، کاربران وب سایت، جست و جو و فیلتر سبدهای خرید بر اساس زمان یا سورتینگ محصولات ممکنه خیلی به کارتون بیاد.</p><p>برای مشاهده جزئیات این سرویس و استفاده از داکیومنت ها می تونید به وب سایت <a href="https://fakestoreapi.com">fakestoreapi</a> و یا <a href="https://github.com/keikaavousi/fake-store-api">گیتهاب پروژه</a> مراجعه کنید.</p><p>توضیحات بیشتر رو میتونید در مقاله دیگری در مدیوم مطالعه کنید&nbsp;</p><p><a href="https://medium.com/@keikaavousi/introduction-to-fake-store-api-dummy-data-for-your-shopping-web-application-a759ad53f3e">لینک مطلب</a></p>

fake store api

معرفی سرویس Fake Store API

<p>زمانی که یک فایل جاواسکریپت خارجی را در یک صفحه HTML لود می‌‌کنید، باید دقت کنید که این کار لطمه‌‌ای به عملکرد و بارگزاری صفحه شما وارد نکند. اینکه فایل جاواسکریپت شما در کدام قسمت صفحه و به چه شکلی داخل صفحه لود می‌شود، کاملا می تواند سرعت اجرای صفحه را تحت تاثیر قرار دهد.</p><p>همان‌طور که می‎دانید یک اسکریپت به صورت عادی به شیوه زیر به صفحه اضافه می‌شود:</p><p>&lt;script src="script.js"&gt;&lt;/script&gt;</p><p>زمانی که مرورگر به این خط می‌رسد، یک درخواست برای فراخوانی اسکریپت داده می‌شود و پس از دریافت موفقیت آمیز فایل، اسکریپت اجرا می‌شود.</p><p>به محض اینکه این فرآیند به اتمام برسد، تفسیر صفحه مجددا از سر گرفته می‌شود و بقیه کدهای HTML در صفحه وارد می‌شوند.</p><p>واضح است که این عملیات می‌تواند تاثیر زیادی بر سرعت بارگزاری صفحه بگذارد. اگر اجرای اسکریپت بیشتر از انتظار زمان ببرد، برای مثال در حالتی که شبکه اینترنت ضعیف است و یا از اینترنت همراه استفاده می‌‌شود، کاربر فقط یک صفحه سفید می بیند تا زمانی که اسکریپت به صورت کامل لود و اجرا شود.</p><h2>اهمیت محل قرارگیری اسکریپت</h2><p>شما ممکن است از روش زیر برای اضافه کردن اسکریپت به صفحه استفاده کنید</p><p>&lt;html&gt;
 &nbsp;&lt;head&gt;
 &nbsp; &nbsp;&lt;title&gt;Title&lt;/title&gt;
 &nbsp; &nbsp;&lt;script src="script.js"&gt;&lt;/script&gt;
 &nbsp;&lt;/head&gt;
 &nbsp;&lt;body&gt;
 &nbsp; &nbsp;...
 &nbsp;&lt;/body&gt;
&lt;/html&gt;</p><p>همان طور که پیش از این نیز گفتم، زمانی که مفسر به خط شامل اسکریپت می رسد (که در اینجا در هد قرار گرفته است) تفسیر HTML را رها کرده، اسکریپت را لود و اجرا می کند و سپس به ادامه بررسی صفحه می پردازد.</p><p>طبیعتا این روش به هیچ وجه روش توصیه شده و مناسبی نیست. چرا که موجب تاخیر زیادی در بارگزاری کامل صفحه می شود. راه حل ساده برای جلوگیری از این مشکل افزودن تگ script به قسمت انتهایی صفحه قبل از بسته شدن تگ body است.</p><p>با انجام این کار اسکریپت زمانی لود و اجرا می شود که صفحه به صورت کامل رندر شده باشد که قطعا جایگزین بهتری به جای استفاده از تگ اسکریپت در هد صفحه است. این قابلیت برای سازگاری مرورگرهایی که از ویژگی های جدید HTML (که در ادامه در مورد آن توضیح می دهم) برای لود اسکریپت پشتیبانی نمی کنند بسیار مناسب است.</p><h2>Async و Defer</h2><p>در واقع async و defer دو Attribute در HTML هستند. این دو ویژگی در دسته boolean attribute ها قرار می گیرند. یعنی فقط مقدار true و false دارند. نحوه نوشتن آنها به صورت زیر است:</p><p>&lt;script async src="script.js"&gt;&lt;/script&gt;&lt;script defer src="script.js"&gt;&lt;/script&gt;</p><p>این Attribute ها در واقع به مرورگر می گویند که فایل های جاواسکریپت خارجی به صورت غیرهمزمان در صفحه لود شود. اگر هر دو این attribute ها را در تگ اسکریت بنویسید، مرورگرهای مدرن از async استفاده می کنند و مرورگرهای قدیمی تر از async صرف نظر کرده و به صورت fallback به سراغ defer می روند.</p><p>این نکته را در نظر بگیرید که اهمیت استفاده از این attribute ها زمانی است که شما تگ اسکریپت را در head گذاشته باشید. در غیر این صورت اگر تگ شما در انتهای body باشد تغییر خاصی را در صفحه ملاحظه نخواهید کرد.</p><h2>مقایسه عملکرد</h2><h3>تگ اسکریپت در head، بدون defer و یا async</h3><p>در شکل زیر نحوه لود یک اسکریپت را می بینید که در تگ هد قرار داده شده است و از async یا defer نیز در آن استفاده نشده است.</p><p>&nbsp;</p><figure class="image"><img src="https://keikaavousi.com/uploads/image-1583925236138-without-defer-async-head-1024x224.png"></figure><p>استفاده از اسکریپت در head بدون defer و async</p><p>تفسیر صفحه تا زمانی که اسکریپت لود و اجرا شود، متوقف می شود و سپس مجددا از سر گرفته می شود.</p><h3>تگ اسکریپت در انتهای body، بدون defer و یا async</h3><p>در شکل زیر نحوه لود یک اسکریپت را می بینید که در انتهای تگ body قرار داده شده است و از async یا defer نیز در آن استفاده نشده است.</p><p>&nbsp;</p><figure class="image"><img src="https://keikaavousi.com/uploads/image-1583925215802-without-defer-async-body-1024x183.png"></figure><p>&nbsp;</p><p>استفاده از اسکریپت در انتهای body بدون defer و async</p><p>تفسیر صفحه بدون وقفه انجام می شود و زمانی که تمام صفحه لود شد، به تگ اسکریپت می رسد و شروع به دانلود و اجرای آن می کند. بنابراین حتی قبل از دانلود فایل اسکریپت صفحه به سرعت برای کاربر اجرا می شود.</p><h3>تگ اسکریپت در head با async</h3><p>در این بخش عملکرد استفاده از async را در تگ اسکریپت در هد مشاهده می کنید:</p><figure class="image"><img src="https://keikaavousi.com/uploads/image-1583925175945-with-async-1024x223.png"></figure><p>استفاده از اسکریپت در head با async</p><p>اسکریپت در حقیقت به صورت غیرهمزمان (Async) بدون وقفه در رندر کردن HTML شروع به لود می کند و زمانی که دانلود آن کامل شد، عملیات رند صفحه متوقف شده و اسکریپت اجرا می شود. سپس مجددا رندر صفحه از سر گرفته می شود.</p><h3>تگ اسکریپت در head با defer</h3><p>در این بخش عملکرد استفاده از defer را در تگ اسکریپت هد مشاده می کنید:</p><p>&nbsp;</p><figure class="image"><img src="https://keikaavousi.com/uploads/image-1583925194235-with-defer-1024x227.png"></figure><p>استفاده از اسکریپت در head با async</p><p>اسکریپت به صورت غیرهمزمان بدون متوقف کردن رندر HTML شروع به لود می کند و زمانی که دانلود آن کامل شد، رندر صفحه را متوقف نمی کند. بلکه منتظر رندر کامل صفحه می ماند و زمانی که صفحه به صورت کامل ایجاد شد، اسکریپت اجرا می شود.</p><p>در حقیقت async برای اجرای script عملیات تفسیر html را متوقف (blocking) می کند در حالیکه defer این کار را انجام نمی دهد.</p><h2>بهترین حالت</h2><p>بهترین حالا یا استفاده از تگ اسکریپت در هد به شکل زیر است:</p><p>&lt;script defer src="script.js"&gt;&lt;/script&gt;</p><p>و یا استفاده از تگ اسکریپت در انتهای body. که این امر کاملا به نحوه برنامه نویسی شما و طراحی صفحه برمی گردد.</p>

بررسی async و defer در html5

بررسی async و defer در HTML5

<p>فرض کنید که یک بستنی قیفی در دست دارید. بستنی شروع به چکه کردن می کند. اولین عکس العمل شما به احتمال زیاد این است که سریعا آن بخش از بستنی را می خورید که لباستان کثیف نشود.</p><figure class="image"><img src="https://keikaavousi.com/uploads/image-1583924793789-ice-cream-cone-1274894_960_720.jpg"></figure><p><br>قسمت جلویی مغز شما دارای بخشی است به نام premotor یا پیش حرکت. این بخش مسئول تصمیم گیری برای انجام هر کاری است. یعنی قبل از اینکه بدن شما هر حرکتی انجام دهد قسمت پیش موتور فعال می شود و به بخش بعدی مغز یعنی primary motor cortex فرمان حرکت می دهد. در حالت قبل وقتی مغز متوجه چکه کردن بستنی می شود پیش موتور فعال و به موتور فرمان خوردن بستنی را در لحظه می دهد.<br>حال فرض کنید یک نفر جلوی شما در حال خوردن بستنی است و همان حالت چکه کردن بستنی برایش رخ می دهد. چون شما شاهد این اتفاق هستید، دقیقا به صورت مشابه انگار که برای خودتان اتفاق افتاده باشد، پیش موتور مغز شما به همان شکل فعال می شود! به این اتفاق <strong>نورون های آینه ای</strong> گفته می شود.(Mirror Neurons)</p><p><br>به صورت کلی مغز انسان تمایل به تقلید دارد. وقتی دو نفر مقابل هم مشغول صحبت هستند بسیاری از میمیک ها و حالات حرکات بدن آنها به صورت ناخودآگاه با همین اثر آینه ای، مشابه هم می شود. تکیه پاها روی زمین، لمس صورت، تکان دادن دست ها و بسیاری حالت دیگر به صورت ناخودآگاه در بدن تقلید می شود.</p><h2>نورون های آینه ای چه کاربردی برای ما دارد؟</h2><p>شما روزانه صدها بار -بدون اینکه متوجه باشید- در معرض اثر آینه ای نورون قرار می گیرید! مهم ترین کاربرد نورون های آینه ای ترغیب کاربران به استفاده از یک سرویس یا محصول است.</p><p>در تبلیغات تلویزیونی و مطبوعات اساسا از این روش استفاده می شود. شما با مشاهده یک تبلیغ اثر گذار احساس نیاز شدید به خرید وسیله ای می کنید که تا چند دقیقه قبل هیچ نیازی به آن نداشتید و به صورت روتین بدون آن وسیله کار خود را انجام می دادید.</p><h2>کاربرد نورون های آینه ای در خدمات و محصولات آنلاین</h2><p>به صورت کلی انسان موجودی اجتماعی است و تقلید و اثرگذاری بر یکدیگر ، یک ویژگی ذاتی در اوست. این ویژگی موجب تعامل و نزدیکی افراد به هم می شود و به همین دلیل از آن لذت می برند. در ارائه خدمات و محصولات به صورت آنلاین هم میتوان به شیوه ای موثر و درست از این ویژگی بهره برد به نحوی که بیشترین تاثیر را در ذهن افراد برجای گذارد. برخی از تکنیک های مورد استفاده به صورت زیر است:</p><h3><strong>استفاده از ویدئو در وب سایت</strong></h3><p>در حال حاضر موثرترین روش بهره گیری از اثر آینه ای، استفاده از ویدئو در وب سایت است. ویدئوها معمولا قابلیت تحریک مغزی زیادی را در خود دارند.&nbsp;<br>فرض کنید بخواهید در یک وب سایت کودکان را ترغیب به خوردن سبزیجات کنید. نمایش یک ویدئو که کودکان دیگر در آن مشغول خوردن سبزیجات باشند، با اثر آینه ای نورون ها کودک را ترغیب به تقلید می کند.</p><h3><strong>اینفلوئنسر مارکتینگ</strong></h3><p>یکی از روش های دیگر که بسیاری از کسب و کارها هم از آن استفاده می کنند <strong>اینفلوئنسر مارکتینگ</strong> است. در صورتی که یک فرد تاثیر گذار در شبکه های اجتماعی ، عملی را انجام دهد یا از محصولی استفاده کند، ذهن به صورت ناخودآگاه با اثر آینه ای علاقه دارد که همان عمل را تقلید کند. به همین دلیل تبلیغات از طریق افراد تاثیر گذار در فضای مجازی، اثری تصاعدی دارد.</p><p>مثلا ثبت نام در یک همایش را در نظر بگیرید. در صورتی که افراد موثر و سرشناس در آن حوزه، به صورت حتی نمادین اعلام ثبت نام و حضور در همایش را از طریق شبکه های اجتماعی انجام دهند، ذهن شما به صورت ناخودآگاه با اثر آینه ای، ترغیب به تقلید از آن عمل می شود.</p><h3><strong>داستان سرایی</strong></h3><p>استفاده از داستان در توصیف یک محصول، کاربر را از نظر ذهنی در موقعیت مشابه قرار می دهد و اثر آینه ای بر روی وی دارد و می تواند احساس نیاز را در وی برانگیزد. در حقیقت می تواند با ایجاد حس همذات پنداری سعی در ترغیب کاربر به استفاده از محصول شود.</p>

نورون های آینه ای

نورون های آینه ای و کاربرد آن

<p>در مقاله قبل در خصوص <a href="https://mr-k.ir/%d8%af%d8%b3%d8%aa%d8%b1%d8%b3-%d9%be%d8%b0%db%8c%d8%b1%db%8c-%db%8c%d8%a7-accessibility-%da%86%db%8c%d8%b3%d8%aa%d8%9f/">دسترس پذیری در وب</a> نکاتی را بررسی کردیم. در این مقاله میخواهیم تکنیک هایی را که به توسعه دهندگان برای بهود دسترس پذیری کمک می کند بررسی کنیم</p><h2>از تگ های معنایی استفاده کنید</h2><p>تگ های معنایی یا Semantic که در HTML5 معرفی شدند، علاوه بر خوانایی کدهای شما، کدهای صفحه را برای screen reader ها قابل فهم می کنند و در نهایت افراد ناتوان بهتر می توانند از وب سایت شما استفاده کنند.</p><p>&nbsp;</p><figure class="image"><img src="https://keikaavousi.com/uploads/image-1583924558739-element.png"></figure><p>&nbsp;</p><h2>از نوشته برای عناصر غیرنوشته هم استفاده کنید</h2><p>توجه نمایید که عناصر صفحه <strong>غیر از نوشته ها</strong>، برای کاربرانی که از صفحه خوان استفاده می کنند، بلااستفاده می ماند. برای مثال محتوای بصری مانند تصاویر و نمودارهای وب سایت شما برای یک فرد نابینا یا کم بینا قابل استفاده نیست. برای بهبود این مسئله لازم است که در تگ های تصویر از attribute های نوشتاری مانند alt و title استفاده کنید. استفاده از alt و title علاوه بر بهبود سئو صفحه شما، موجب بهبود دسترس پذیری صفحه هم می گردد. بنابر این صفحه خوان وقتی به تگ مورد نظر برسد محتوای alt را برای کاربر می خواند.</p><p>&lt;img src="images/accessibility.png" alt="دسترس پذیری"&gt;</p><h2>به عناصر فرم label اضافه کنید</h2><p>عناصر فرم باید تگ label داشته باشند و نباید فقط شامل placeholder باشند. وجود label باعث می شود تا فرم برای screen reader ها خوانا شود. توجه کنید که در حالت عادی هم هیچ وقت به placeholder تنها در فرم های صفحه بسنده نکید. برخی مرورگرهای قدیمی placeholder را نمی شناسند و عملا بدون label، کاربر تنها چند فیلد خالی می بیند!</p><p>&lt;label for="name"&gt; Your Name &lt;/label&gt; &lt;input id="name"&gt;</p><h2>المان focus شده را مشخص کنید</h2><p>بسیاری از کاربران با استفاده کیبورد صفحه را پیمایش می کنند. کاربر باید بداند در حال حاضر کدام عناصر فرم یا دکمه را focus کرده است. برای این منظور حتما در طراحی عنصر focus شده طرح متفاوت با بقیه عناصر هم تراز خود داشته باشد. این کار را می توانید با هایلایت کردن یا تغییر رنگ border عنصر انتخاب شده انجام دهید. المان های تعاملی باید قابلیت focus شدن داشته باشند. span,img و... این قابلیت را ندارند.</p><h3>استفاده از تگ های درست</h3><p>نکته دیگری که حائز اهمیت است استفاده درست از تگ هاست. بسیاری از افراد از تگ درست در جای درست استفاده نمی کنند. برای مثال اگر جایی نیاز به دکمه داشتید حتما از تگ button استفاده کنید نه از تگ span و div و a , ... و همین طور جایی که قرار است لینکی بدهید، حتی اگر ظاهر آن شبیه دکمه بود، از تگ a استفاده کنید و با css تغییر استایل را لحاظ کنید. فراموش نکنید که screen reader تنها به html شما نیاز دارد.</p><h2>کنتراست رنگی مناسب</h2><p>کنتراست یا اختلاف رنگ، در زمینه و نوشته باید به صورت مناسبی رعایت شود. اگر رنگ زمینه با رنگ نوشته اختلاف زیادی نداشته باشد موجب خوانایی کم مخصوصا برای کسانی که مشکل بینایی دارند، می شود. مثالی برای بهترین کنتراست، زمنیه سفید با نوشته مشکی است.</p><p>&nbsp;</p><figure class="image"><img src="https://keikaavousi.com/uploads/image-1583924436006-contrast-tips.png"></figure><h2>فقط به رنگ ها تکیه نکنید</h2><p>اگر قرار است پیغام خطا یا موفقیتی به کاربر نشان دهید، تنها استفاده از رنگ سبز یا قرمز کافی نیست. از یک آیکن مناسب هم در کنار آن استفاده کنید. کاربرانی که امکان تشخیص رنگ را ندارند باید بتوانند با استفاده از آیکن عملکرد دکمه و پیغام را تشخیص دهند.</p><h2>عنوان لینک ها باید دارای توضیح باشند</h2><p>عنوان لینک یا anchor text علاوه بر اینکه ویژگی مهمی در سئو به حساب می آید می بایست برای بهبود دسترس پذیری هم به بهترین شکل رعایت گردد. عنوان لینک باید خوانا باشد. از به کار بردن لینک هایی نظیر "کلیک کنید" ، "اینجا را کلیک کنید" ، "دانلود کنید" و... بپرهیزید. لینک باید دارای توضیح باشد تا برای افراد حداکثر خوانایی را به همراه داشته باشد. برای مثال لینک های "ورود به بخش عضویت در سایت" ، "دانلود کتاب تجربه کاربری" و... مناسب هستند.</p><p>مجددا تاکید می کنم همه کاربرانی که از سرویس شما استفاده می کنند، در ایده آل ترین حالت ممکن نیستند. شاید فقط درصد کمی از کاربران مانند شما فکر کنند و استفاده از سرویس یا خدمات آنلاین شما برای بقیه مشکل ساز باشد. پس میدان دید وسیعی در طراحی داشته باشند و همه گروه‌های هدف درگیر در نرم افزار را مد نظر قرار دهید.</p>

تکنیک های دسترس پذیری در وب

تکنیک هایی برای بهبود دسترس پذیری در وب

<p>دسترس پذیری (accessibility ) به صورت کلی یعنی «توانایی دستیابی به اطلاعات موجود در یک وبسایت یا نرم افزار برای همه افراد حتی کسانی که معلولیت یا مشکل خاصی دارند.»</p><p>همه افراد روزانه از سرویس ها و اپلیکیشن ها برای رفع نیازهای روزمره خود استفاده می کنند. اما نکته حائز این است که بسیاری از این افراد دارای معلولیت هستند و قطعا بسیاری از سرویس ها و وب سایت های موجود برای این افراد قابل استفاده نیستند.</p><p>بحث <strong>بهینه سازی وب سایت برای دسترس پذیری بهتر</strong> هم تراز سئو و بهینه سازی برای موتورهای جستجو حائز اهمیت می باشد. جالب است بدانید که گوگل نیز اخیرا در نتایج جستجوی خود وب سایت هایی را که اصول اساسی دسترس پذیری در آن ها بهتر رعایت شده باشد، در رتبه های بالاتر قرار می دهد.</p><figure class="image"><img src="https://keikaavousi.com/uploads/image-1583923920468-accessibility_1-1024x384.jpg"></figure><p>&nbsp;</p><h2><strong>ضرورت دسترس پذیری در وب سایت ها</strong></h2><h3><strong>مشکلات بینایی</strong></h3><p>موقعیتی را تصور کنید که یک فردی با مشکل <a href="https://fa.wikipedia.org/wiki/%DA%A9%D9%88%D8%B1%D8%B1%D9%86%DA%AF%DB%8C">کور رنگی</a> بخواهد از یک سرویس آنلاین خدمات دریافت کند. افرادی که کور رنگی دارند اکثرا نمی توانند رنگ قرمز را از رنگ سبز تشخیص دهند. حال فرض کنید دکمه ای طراحی کرده اید که پس زمینه سبز با رنگ نوشته قرمز دارد! این دکمه با نوشته داخلش برای چنین افرادی هم رنگ دیده می شود و عملا امکان تشخیصی برای فرد نمی گذارد.</p><p>یا یک فرد نابینا را در نظر بگیرید که می خواهد با استفاده از <a href="https://fa.wikipedia.org/wiki/%D8%B5%D9%81%D8%AD%D9%87%E2%80%8C%D8%AE%D9%88%D8%A7%D9%86">صفحه خوان</a> (Screen Reader) وب سایت مربوط به کسب و کار یا سرویس آنلاین شما را بخواند. اگر کد نویسی صفحه شما استاندارد نباشد و از تگ های معنایی استفاده نکرده باشید قطعا صفحه خوان را به اشتباه می اندازید و عملا این فرد نمی تواند از وب سایت شما استفاده کند.</p><h3><strong>مشکلات شناختی</strong></h3><p>یا فردی را در نظر بگیرید که مشکل <a href="https://fa.wikipedia.org/wiki/%D8%AE%D9%88%D8%A7%D9%86%D8%B4%E2%80%8C%D9%BE%D8%B1%DB%8C%D8%B4%DB%8C">دیسلکسیا</a> یا خوانش پریشی داشته باشد. افراد خوانش‌پریش معمولاً سرعت خواندن متن پایینی دارند. هم چنین توانایی هِجی و دیکته ضعیف نیز از دیگر ویژگی های این افراد است. اگر واژه‌ای بی‌معنا باشد نیز در خواندن آن دچار مشکل می‌شوند. پس اگر وب سایت شما دارای متونی باشد که برای این افراد دچار مشکل کند عملا استفاده از آن غیر ممکن است. بهتر است متون وب سایت برای این افراد به صورت مرتب و خوانا نوشته شده باشد و شامل تصاویر مرتبط با موضوع باشد.</p><p>برخی دیگر از افراد حافظه کوتاه مدت ضعیف و یا اختلالات شناختی دارند. ساخت روندهای پیچیده در نرم افزار موجب سردرگمی این افراد می شود. یک فعالیت ساده در نرم افزار نباید پس از طی کردن چند صفحه و کلیک روی چنیدن آیتم انجام شود. افراد دارای اختلالات شناختی به سختی می توانند با این گونه نرم افزارها ارتباط برقرار کنند.</p><h3><strong>مشکلات شنیداری</strong></h3><p>اگر وب سایت شما بخشی برای پخش ویدئو دارد و این ویدئو دارای narration (روایتگر) است. قطعا می بایست زیر نویس برای فیلم لحاظ کنید و یا جایگزینی خواندنی برای افراد ناشنوا در نظر بگیرید. از طرفی Alert های نرم افزار اگر تنها به صورت شنیداری باشند برای این افراد بدون استفاده خواهد بود.</p><h3><strong>سایر مشکلات</strong></h3><p>دسترس پذیری حتی در استفاده از خدمات فیزیکی سرویس های آنلاین نیز می بایست رعایت گردد. اگر شما خدمتی را به صورت حضوری از بستر وب به افراد ارائه می کنید، می بایست حتما افراد دارای معلولیت را در اولویت قرار دهید. برای مثال تاکسی آنلاینی که برای افراد دارای معلولیت، اتومبیل هایی را بفرستد که توانایی حمل ویلچر را داشته باشند و یا اگر فرد گزینه ناشنوا را انتخاب کند راننده با وی تماس صوتی برقرار نکند.</p><p>در حال حاضر بهینه سازی یک وب سایت برای افراد دارای معلولیت و مشکل، دیگر یک امتیاز برای وب سایت به حساب نمی آید، بلکه یک ضرورت اساسی است. علی الخصوص وقتی سرویس شما استفاده ای روزمره برای افراد داشته باشد یا یک سامانه همگانی باشد که فرد به اجبار باید از آن استفاده کند.</p>

دسترس پذیری یا accessibility

دسترس پذیری یا accessibility چیست؟

<p>اگر شما هم جزو کسانی باشید که تصمیم گرفته اند تا یک تخصص در حوزه نرم افزار انتخاب کنند و در آن کسب مهارت داشته باشند، ممکن است مانند بسیاری افراد دیگر هنوز نسبت به انتخاب راه خود مردد باشید. بارها با پرسش هایی از این دست از سوی بسیاری از دانش پذیران و کسانی که افتخار تدریس به آن ها داشته ام مواجه شده ام. پرسش هایی مثل "طراحی رو انتخاب کنم یا برنامه نویسی؟" ، "برنامه نویسی به درد من میخوره؟" ، "حقوق طراح بیشتره یا برنامه نویس؟" ، "بازارکار کدوم بهتره که انتخابش کنم؟" و ...<br>اگر این پرسش برای شما هم پیش آمده است شاید این مقاله بتواند کمک کوچکی در انتخاب مسیر به شما کند.</p><h2>شما چپی هستید یا راستی؟!</h2><p>مغز پیچیده انسان شامل دو نیمکره است. در برخی افراد نیمکره راست و در بعضی دیگر نیمکره چپ فعالیت بیشتری دارد.<br>اگر شما از محاسبات ریاضی لذت می برید، عاشق حل مسئله و ساعت ها فکر کردن برای حل یک مشکل هستید، نیمکره چپ مغز شما فعالیت بیشتری دارد.<br>در مقابل اگر شما عاشق هنر و زیبایی شناسی هستید، از خلق یک اثر هنری لذت می برید، رنگ ها به شما حس خوبی می دهند و برای شما دارای معنی هستند، نیمکره راست مغز شما دارای فعالیت بیشتری است.<br>قطعا در هیچ انسانی عملکرد نیمه چپ و راست به صورت&nbsp;100%&nbsp;نیست و این مسئله به صورت نسبی در مغز برقرار است. ممکن است فردی دارای عملکرد 30% نیمکره چپ و 70% نیمکره چپ باشد و بالعکس. پس نمی توان با قطعیت برای کسی نظر داد و مسلما راهکار هایی که در ادامه می آید فقط جنبه راهنمایی دارد.<br>تصمیم گیری نهایی احساس شما نسبت به هر تخصص است. اما طبیعتا مسیر تخصص و شغلی که انتخاب می کنید باید رابطه مستقیم با&nbsp;شخصیت درونی شما داشته باشد تا همیشه از کار خود لذت ببرید و هیچ وقت نخواهید آن را تحمل کنید! یک راه را انتخاب کنید و در همان حرفه ای شوید.</p><ul><li>اگر شما <strong>نیمکره چپ</strong> فعال تری دارید، پس احتمالا می توانید در زمینه <strong>برنامه نویسی</strong> موفق باشید. یک برنامه نویس خوب باید درک دقیق از مسئله داشته باشد و بتواند آن را تحلیل کنید. شما باید توانایی ارائه راه حل های مختلف را داشته باشید و حوصله و دقت کافی برای بررسی هر کدام را در خودتان ببینید. گاهی ممکن است چندین روز ذهنتان درگیر یک مشکل باشد و ساعت ها برای آن فکر کنید. ساعت ها در اینترنت جستجو کنید تا بهترین روش را پیدا کنید. پس اگر میخواهید برنامه نویسی را انتخاب کنید باید دقیق، منظم و دارای ذهن ساخت یافته باشید.</li><li>اگر شما <strong>نیمکره راست</strong> فعال تری دارید، پس احتمالا می توانید در زمینه <strong>طراحی</strong> موفق باشید. کسانی که میخواهند طراح باشند باید از خلق یک طرح گرافیکی لذت ببرند. با رنگ ها ارتباط مناسب برقرار کنند و دید زیباشناختی داشته باشند. یک طراح باید خلاق باشد. توانایی ارائه چندین طرح با ظاهر متفاوت داشته باشد و برای قرارگیری هر المان در صفحه دلیل قانع کننده ارائه دهد.</li></ul><h2>من متوجه شدم راستی هستم! چه راهی را انتخاب کنم؟</h2><p>خوب! اگر می خواهید در زمینه طراحی تخصصی را انتخاب کنید، چندین راه پیش روی شماست:<br>شما می توانید طراحی گرافیک، تصویر سازی، طراحی رابط کاربری وب و موبایل و ... را انتخاب کنید.<br>در این میان بیایید به تخصص <strong>طراحی و توسعه رابط کاربری</strong> نگاهی بیندازیم.<br>اصولا "<i>رابط کاربری به هر آن چیزی گفته می شود که کاربر می بینید و با آن در تعامل است</i>" و کسی که توانایی <strong>طراحی</strong> این بخش از نرم افزار را دارد <strong>طراح رابط کاربری</strong> (UI Designer)است و باید توانایی کار با نرم افزارهای طراحی مانند photoshop و illustrator و ... را داشته باشد.<br>اگر کسی با یادگیری زبان های HTML، CSS و جاواسکریپت بتواند طرح گرافیکی را تبدیل به کد قابل فهم برای مرورگر کند، تخصص او <strong>توسعه دهنده رابط کاربری</strong> یا (Front-End Developer) است. البته در سال های اخیر استفاده از فریم ورک ها و کتابخانه های جاواسکریپ مانند angular و react نیز مورد استقبال قرار گرفته است و قطعا یادگیری آن ها در پیدا کردن موقعیت شغلی مناسب بی تاثیر نیست.<br>ولی در کل لفظ <strong>طراح وب</strong> به خودی خود هر دو بخش طراحی رابط کاربری و توسعه رابط کاربری را در دل خود دارد مگر در تیم های بزرگ که هر بخش را یک گروه خاص انجام می دهد.</p><p>پس به عنوان <strong>طراح و توسعه دهنده وب</strong>&nbsp;معمولا از شما&nbsp;انتظار دارند&nbsp;تا html،css،js را خوب بدانید، همچنین بتوانید خودتان یک طرح ارائه دهید و پیاده سازی کنید. مگر اینکه سِمَت شغلی مورد نظر <strong>گرافیست و طراح رابط کاربری</strong> باشد. آنگاه تسلط شما به نرم افزار های طراحی مد نظر است.</p><h2>من متوجه شدم چپی هستم چه زبان برنامه نویسی را انتخاب کنم؟</h2><p>اگر خصوصیات شخصی شما مطابق با شغل برنامه نویسی است و هیچ لذتی از طراحی یا پیاده سازی رابط کاربری نمی برید و کار کردن با Css برای شما عذاب است(!) پس همین حالا تغییر مسیر بدهید! برنامه نویسی برای کسانی که مناسب این حرفه هستند بسیار لذت بخش است. وقتی یک مسئله را حل می کنید و یک راه حل ارائه می دهید و یا نرم افزاری طراحی می کنید که افراد زیادی از آن استفاده می کنند حس فوق العاده ای به شما دست خواهد داد.<br>در حقیقت برنامه نویسی یعنی "ارائه یک راه حل با استفاده از کدهای دستوری که رایانه آن را می فهمد".<br>اما انتخاب زبان برنامه نویسی مناسب، یک مسئله مهم است که باید در ابتدای راه برای آن به یک نتیجه خوب برسید.<br>ممکن است&nbsp;پیش از این، سایت ها و وبلاگ های متعددی را دیده&nbsp;باشید که همگی جبهه گیری های بی مورد می کنند. یک عده زبان برنامه نویسی خاصی را بالا می برند و دیگری را می کوبند، جبهه دیگر زبان برنامه نویسی مورد علاقه خود را بهترین زبان معرفی می کنند...در این آشفته بازار باید تصمیم مناسب بگیرید.</p><p>واقعیت این است که همه زبان های برنامه نویسی در بسیاری موارد با هم اشتراک دارند. اگر شما در یک زبان مسلط باشید، یادگیری زبان برنامه نویسی دیگر برای شما ساده تر خواهد بود و شاید چند هفته یا کمتر از شما زمان بگیرد.<br><strong>اصل اساسی این است که شما باید تفکر سیستماتیک مناسب داشته باشد. زبان برنامه نویسی تنها یک ابزار است که می توان آن را فراگرفت. وگرنه اگر تفکر سیستماتیک درستی نداشته باشید، با بهترین ابزارها هم نمیتوانید چیزی درست خلق کنید.</strong></p><p>حالت های زیر را در نظر بگیرید، شاید شما بخواهید:<br>برای سیستم عامل اندروید برنامه نویسی کنید: در این صورت باید زبان برنامه نویسی java را انتخاب کنید.<br>برای سیستم عامل ios برنامه نویسی کنید: در این صورت باید زبان برنامه نویسیswift را انتخاب کنید.<br>برای سیستم عامل ویندوز و وب برنامه نویسی کنید: در این صورت باید زبان برنامه نویسی c# (سی شارپ) را انتخاب کنید<br>فقط برای وب برنامه نویسی کنید: در این صورت باید زبان PHP را انتخاب کنید.<br>برنامه نویسی محاسباتی انجام دهید، بر روی داده های بزرگ کار کنید و یا به یادگیری ماشینی (machine learning) علاقه دارید: زبان پایتون برای شما مناسب است.<br>زبان های برنامه نویسی دیگری مانند c++، ruby، pearl و ... نیز برای کاربردهای دیگر وجود دارند و می توانید در مورد هر یک بررسی مود نظر خود را انجام دهید و مطابق با نیاز آن را انتخاب کنید.<br>قطعا هر کدام از این زبان ها پیچیدگی ها و چارچوب های مخصوص خود را دارند و باید سعی کنید در هر یک دقیق و عمیق شوید تا بتوانید نهایت استفاده را از آن داشته باشید.<br><strong>تبصره!:</strong><br>اگر بخواهید به صورت فریلنس یا آزادکار در حوزه طراحی وب فعالیت داشته باشید، در بسیاری از موارد از شما می خواهند تا وب سایتی طراحی کنید که هم شامل رابط کاربری و هم شامل بخش منطقی یا back-end (برنامه نویسی) باشد. اگر تخصص شما فقط یکی از این موارد باشد(طراح یا برنامه نویس)، سعی کنید با کسی در ارتباط باشید و یک تیم دونفره کوچک برای این کار تشکیل دهید. اگر انجام این مسئله برای شما مقدور نیست، پس ناچارا باید خودتان از پس آن بربیایید. پیشنهاد من به شما یادگیری اصول زبان php و همچنین یادگیری سیستم های مدیریت محتوا مانند wordpress است. اینکه بتوانید خودتان قالب را طراحی و اجرا کنید و آن را به سیستم مدیریت محتوا متصل کنید.</p><p>حتما در مقالات بعدی در این خصوص توضیحاتی ارائه خواهم داد.</p><p>شاد باشید و از راهی که انتخاب می کنید لذت ببرید :)</p>

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

طراحی یا برنامه نویسی؟ مسئله اینست!

<p>سبک مینیمال با شعار Less is More! یکی از سبک های طراحیست که به جهت سادگی و سهولت استفاده طرفداران زیادی دارد. مینمیالیسم یعنی تنها ضروری ترین اجزا در صفحه باشد. سبک مینمالیسم نه تنها در <a href="http://mr-k.ir/%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Db7%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Db1%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Da7%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dad%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Ddb%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D8c-%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Ddb%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D8c%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Da7-%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Da8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Db1%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd9%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D86%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Da7%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd9%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D85%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd9%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D87-%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd9%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D86%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd9%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D88%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Ddb%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D8c%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Db3%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Ddb%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D8c%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D9f-%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd9%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D85%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Db3%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Da6%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd9%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D84%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd9%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D87-%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Da7%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Ddb%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D8c%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd9%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D86%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Db3%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Daa/">طراحی وب</a> و موبایل، حتی در هنر، موسیقی و ادبیات هم کاربرد دارد.</p><p>&nbsp;</p><p>&nbsp;</p><figure class="image"><img src="https://www.keikaavousi.com/uploads/image-1583918597432-minimal-1024x475.png"></figure><p>&nbsp;</p><p>&nbsp;</p><p>یک صفحه وب را در نظر بگیرید. در طراحی مینیمال تب های غیرضروری، منوها و یا اجزای دیگری که نیاز یا هدف اساسی کاربر نباشد حذف می شوند. تفکر اصلی در این سبک دورکردن هرچه بیشتر شلوغی های صفحه است. این شلوغی ها از باکس های کنار صفحه گرفته تا دکمه های اضافی، منوهای کشویی و محتوای غیر ضروری را شامل می شود. سوالی که در این جا مطرح می گردد این است:</p><h2><strong>سبک مینیمالیسم چگونه به من کمکمی کند تا به هدف وب سایتم (هرچیزی که باشد) برسم؟</strong></h2><p>یک وب سایت مینیمالیسم معمولا شامل موارد زیر است:</p><h3><strong>فضای منفی:</strong></h3><p>فضای منفی رایج ترین جزء در یک طراحی مینیمال است. فضای منفی یعنی همان فضاهای خالی. وقتی صفحه شما فضای خالی داشته باشد، چشم تنها محتوای باقی مانده در صفحه را می بیند و دنبال می کند.</p><h3><strong>تصاویر بزرگ:</strong></h3><p>در حالیکه بعضی سایت های مینیمال صفحاتی خالی با یک متن هستند، برخی دیگر با استفاده از تصاویر بزرگ و واضحِ خدمت یا محصولی که ارائه می شود، به صفحه روح می دهند.</p><h3><strong>کنتراست:</strong></h3><p>صفحات معمولا سفید، سیاه یا طوسی به همراه رنگ نوشته واضح با کنتراست بالا نسبت به زمینه هستند تا خوانایی لازم را برای مخاطب داشته باشند.</p><h3><strong>تایپوگرافی مناسب:</strong></h3><p>در صفحات مینیمال به خاطر اهمیت نوشته ها در صفحه، تلاش می شود تا کلمات به صورت هنرمندانه ای با یکدیگر و تصاویر در تعادل باشند. فاصله مناسب خطوط، اندازه فونت، فاصله حروف و کلمات از یکدیگر و اندازه ها باید با دقت رعایت شوند.</p><p>&nbsp;</p><h2><strong>فواید طراحی مینیمال:</strong></h2><p>بسیاری از کسب و کارها وب سایتی می خواهند که نرخ تبدیل بالا داشته باشد (نرخ تبدیل یعنی: کاربران عادی به مشتریان سایت یا کاربران وفادار تبدیل شوند). این دقیقا جایی است که مینمیال دیزاین به کمک می آید! شاید بپرسید چطور؟</p><h3><strong>پیمایش آسان(Easy Navigation):</strong></h3><p>فراموش نکنید که کاربران هیمشه عجله دارند! چرا میخواهید مجبورشان کنید که توضیحات زیاد خسته کننده شما را بخوانند یا مرتب بین صفحات جابه جا شوند؟ مثلا سایت <a href="https://mylapka.com/">لاپکا</a> را ببینید. این سایت از فضاهای سفید زیاد و تصاویر بزرگ استفاده کرده است. در حقیقت چیز زیادی برای کلیک کردن در صفحه وجود ندارد. به خاطر همین چشمان کاربر نوشته را دنبال می کند و به call-to-action ها جذب می شود. بزرگترین مزیت آن اینست که کاربر درگیر انتخاب های زیاد و لینک های متعدد نمی شود. تنها چند گزینه محدود وجود دارد که پیمایش بین صفحات را ساده می کند.</p><h3><strong>سرعت لود بالاتر:</strong></h3><p>این یک اصل ثابت شده است که هر چه صفحه دیرتر لود شود، bounce rate صفحه بیشتر می شود و کاربران زودتر سایت را ترک می کنند (bounce rate شاخصی است که نشان می دهد چند درصد کاربران پس از باز کردن صفحه بلافاصله آن را ترک می کنند، که طبیعتا هر چه مقدار آن کمتر باشد وب سایت با ارزش تر است) در نتیجه وقتی صفحه دیر لود شود، کاربران منتظر نمی مانند. مسلما وب سایت های دیگر با سرعت لود بهتر منتظر آن هاست! و شما به سادگی کاربران سایت را از دست دادید!</p><h3><strong>سئو دوست(SEO Friendly):</strong></h3><p>طراحی های مینیمال برای ربات های موتورهای جستجو، ساده تر پیمایش(crawl) می شوند. معمولا کدهای درهم زیادی نه در سمت front و نه در سمت back آن ها وجود ندارد. به خاطر همین، وب سایتی که علاوه بر کاربران انسانی، ربات های جستجو را هم مد نظر قرار داده باشد، طبیعتا بسیار سریعتر در موتورهای جستجو سئو می شود. (همان طور که گفته شد سرعت لود بالای صفحه و bounce rate هم جزئی از فرآیند سئو هستند)</p><h3><strong>مشکلات کمتر:</strong></h3><p>هرچه وب سایت ساده تر باشد و امکانات، پلاگین ها و اجزای کمتری داشته باشد، کمتر ممکن است دچار مشکل شود و مدیریت آن آسان تر می گردد.</p><h3><strong>از مد نمی افتد!:</strong></h3><p>دنیای وب دائما در حال دگرگونی است و در هر بازه زمانی یک تِرِند طراحی مطرح می شود. در مقابل طراحی مینیمال به خاطر سادگی، به سرعت از رده خارج نمی شود. شما از اجزا و استایل هایی استفاده نکرده اید که فقط ترند روز باشند و کهنه شوند، بلکه از تصاویر واضح و تایپوگرافی اصولی برای رساندن پیام خود به مخاطب استفاده کرده اید.</p><h3><strong>یادآوری ساده:</strong></h3><p>سایت های شلوغ و در هم تنیده آنقدر اجزای زیادی دارند که بخاطرسپاری آن برای مغز مشکل است. اگر بازدیدکنندگان، سایت شما را بدون زحمت به خاطر بسپارند، با سرعت و قدرت بالا پیام خود را به آنان رسانده اید. این عمل در طراحی مینیمال ساده تر انجام می شود.</p><p>&nbsp;</p><p>&nbsp;</p><figure class="image"><img src="https://www.keikaavousi.com/uploads/image-1583918621563-minimal2-1024x534.png"></figure><p>&nbsp;</p><p>&nbsp;</p><h2><strong>معایب طراحی مینمیال:</strong></h2><p>درحالیکه طراحی مینیمال فواید گفته شده را داشت، اما برای همه کسب و کارها و همه افراد مناسب نیست. زیرا:</p><h3><strong>ارتباط محدود دارد:</strong></h3><p>با کلمات و تصاویر کم، معرفی یک محصول یا خدمت پیچیده مشکل تر می شود. اگر شما <strong>فقط یک</strong> محصول یا سرویس ارائه می دهید، با استفاده از طراحی مینیمال به سادگی می توانید آن را معرفی کنید. اما مشکل زمانی آغاز می شود که محتوا، محصولات و خدمات شما زیاد باشد و احتیاج به تعامل زیاد کاربر داشته باشند. در نتیجه بهتر است رویکرد دیگری را برای طراحی انتخاب کنید.</p><h3><strong>زیادی خالی است!:</strong></h3><p>اگر طراحی وب سایت شما خوب در موردش فکر شده باشد و داده های مورد نیاز به صورت دقیق در صفحه چینش داشته باشند و معماری اطلاعات دقیقی را مد نظر داشته باشید، این مسئله مشکلی پیش نمی آورد. اما بعضی ها طوری از طراحی مینیمال استفاده می کنند که همه چیز به صورت پراکنده و ناقص با تایپوگرافی ضعیف پیاده سازی می شود و به ظاهر همه چیز ناتمام مانده است. در واقع در این مورد به جای یک طراحی تمیز و ساخت یافته، یک بیایان خالی ساخته اید که هیچ جایی برای فرود چشم وجود ندارد!</p><h3><strong>بدون خلاقیت است:</strong></h3><p>اگر شما سبک مینیمال را در جای اشتباه استفاده کنید ممکن است باعث عقبگرد شما شود. برای مثال اگر شما خلاقیت یا استعداد خاص خود را بخواهید به نمایش بگذارید، اما سایت شما یک صفحه خالی با تعدای کلمه باشد، ممکن است مخاطب را نسبت به ارزش های شما متقاعد نکند.</p><h3><strong>از رشد کسب و کار جلوگیری می کند:</strong></h3><p>اگر شرکت و کسب و کار شما رشد کند، ممکن است این طراحی برای شما دست و پا گیر باشد. برای کسانی که برنامه ریزی دقیق انجام داده باشند این مئسله مشکلی به وجود نمی آرود. اما اگر این اتفاق نیفتاده باشد، احتمالا نیاز به فضای دیگری برای معرفی محصولات و خدمات خود داشته باشید.</p><h2><strong>آیا باید مینمیالیست شوید؟!</strong></h2><p>مشاوران کسب و کار معمولا از شما می خواهند تا از رویکرد مینیمال به خاطر مسائلی که گفته شد صرف نظر کنید، در حالیکه عکاسان یا هنرمندان ترجیح می دهند تا با استفاده از این سبک طراحی کارهای خود را به نمایش بگذارند.</p><p>با وجود اینکه بسیاری از مردم، از دیدن طراحی مینیمال لذت می برند، اما هیچ وقت کاربر نهایی وب سایت یا محصول خود را فراموش نکنید. به صورت دقیق بررسی کنید که آیا کاربر نهایی شما از اینکه فقط ضروریات را در اختیار او قرار داده اید و پیمایش بین صفحات را برایش آسان کرده اید قدردان شماست یا کاربر غیرخلاقی است که از اینکه وب سایت به نظر او نیمه کاره می رسد احساس خوبی ندارد؟</p><p>بهتر است بگویم شما می توانید وب سایتی طراحی کنید که اجزای غیرضروری در آن حذف شده اند و پیمایش بین صفحات در آن آسان است بدون اینکه به صورت کامل مینمیال شده باشد. سبک هایی مانند فلت دیزاین یا متریال دیزاین با تکیه بر حذف عناصر غیرضروری و پیمایش آسان می تواند چاره کار باشد.</p><p>&nbsp;</p>

طراحی مینیمال

طراحی مینیمال، آری یا نه؟

<p>همان طور که احتمالا حدس زدید، این مقاله در رابطه با رنگ آبی است. بدون شک آبی یکی از مهم ترین و پرکاربرد ترین رنگ ها در طراحی رابط کاربری است. همین حالا به آیکن برنامه های گوشی خود نگاهی بیندازید. حتما میبینید که اکثر آن ها آبی هستند. مثل فیسبوک، توییتر، سافاری و...</p><h2>چرا آبی رنگ انتخابی است؟</h2><p>دلایل مختلفی برای انتخاب رنگ آبی وجود دارد که در زیر برخی از آن ها لیست شده اند:</p><p>&nbsp;</p><h3>مردم رنگ آبی را دوست دارند.</h3><p>مطالعات نشان داده است که بسیاری از مردم از رنگ آبی به عنوان رنگ مورد علاقه خود یاد می کنند. رنگ آبی در سراسرجهان حس امنیت را منتقل می کند.</p><figure class="image"><img src="https://www.keikaavousi.com/uploads/image-1583917518006-0HezEwkvHleqYp371-1024x364.png"></figure><p>&nbsp;</p><h3>رنگ آبی با طبیعت در ارتباط است</h3><p>رنگ آبی ارتباطی بسیار قوی با آب های تمیز، آسمان پاک و ... دارد که منجر به استفاده زیاد از آن به عنوان یک رنگ خاص می شود.</p><figure class="image"><img src="https://www.keikaavousi.com/uploads/image-1583917706504-0fMz9baq-jerEv3xa.jpg"></figure><p>&nbsp;</p><h3>رنگ عمومی برای طراحان رابط کاربری است</h3><p>از دیدگاه یک طراح رابط کاربری، پر استفاده ترین رنگ است. بسیاری از رنگ هایی که طراحی ها استفاده می شود، مثل قرمز، نارنجی و سبز، در ذهن مردم برای خطا، هشدار و اعلام موفقیت کلیشه شده اند. به همین حاطر رنگ آبی انتخاب مناسبی برای طراحان می شود.</p><figure class="image"><img src="https://www.keikaavousi.com/uploads/image-1583917691188-0Ed_h3TyfZfNhLWDb.png"></figure><h3>&nbsp;</h3><h3>حس نوآوری می دهد.</h3><p>اکثر شرکت ها، به خاطر ارتباط رنگ آبی با تکنولوژی و نوآوری، از آن استفاده می کنند</p><figure class="image"><img src="https://www.keikaavousi.com/uploads/image-1583917836202-03VARFnxHAoiL5JbY.jpg"></figure><p>&nbsp;</p><h3>به کاربر حس امنیت را القا می کند.</h3><p>رنگ آبی یک رنگ عمومی برای وب سایت ها و اپلیکیشن های مسافرتی است. این رنگ احساس امنیتی را منتقل می کند که برای شرکت های مسافرتی بهترین ابزار است.</p><figure class="image"><img src="https://www.keikaavousi.com/uploads/image-1583917768406-12To1OUV7C1NRRozVPA4cuA-1024x488.png"></figure><h3>محصول را برای استفاده قابل اعتماد می کند</h3><p>در بسیاری از مواقع ما باید کاربر را مجاب کنیم که این محصول بهترین انتخاب برای شماست. هدف از اضافه کردن رنگ آبی در این مواقع متقاعد کردن کاربر به اعتبار محصول است. برندهای تکنولوژی مثل Dell, IBM, Intel, AT&amp;T, PayPal از حس اعتماد رنگ آبی استفاده می کنند و محصولی را تولید می کنند که مردم روز به روز بیشتر به آن اعتماد می کنند.</p><p>رنگ آبی حس تعادل و باهوشی را نشان می دهد و به این دلیل است که بسیاری از سرویس های پرداخت از رنگ آبی در طراحی خود استفاده می کنند.</p><h3>&nbsp;</h3><h3>کوررنگی</h3><p>افرادی که دچار انواع رایج کوررنگی (پروتانوپیا و دوترانوپیا) هستند هم رنگ آبی را تشخیص می دهند که این اتفاق برای رنگ سبز یا قرمز رخ نمی دهد.</p><figure class="image"><img src="https://www.keikaavousi.com/uploads/image-1583917736233-0LZ-Py8LpDtLKKmP9.jpg"></figure><p>همان طور که می دانید رنگ غالب فیسبوک هم آبی است. چون مارک زاکربرگ کوررنگ است و می گوید: "آبی غنی ترین رنگ برای من است- من همه آبی ها را می بینم"</p><p>&nbsp;</p><h2>نتیجه گیری</h2><p>همه این موارد به این معنی نیست که همین حالا زنگ وبسایت/اپلیکیشن خودتان را آبی کنید! در حقیقت آبی بهترین رنگ برای همه نیست. اگر وب سایت یا اپلیکیشن شما با رنگ آبی جواب داده است، لزوما ممکن است برای همه این اتفاق نیفتد. رنگ مناسب را بر اساس گروه هدف خود تعیین کنید.</p><p>&nbsp;</p><p><strong>بهترین رنگ برای طرح شما، رنگی است که کاربران شما فکر می کنند بهترین است!</strong></p><p><a href="https://blog.marvelapp.com/important-color-ui-design/?utm_source=weekly-newsletter&amp;utm_medium=email&amp;utm_campaign=marvel-newsletter-2017-10-30&amp;utm_term=">منبع</a></p>

رنگ آبی در طراحی رابط کاربری

مهم ترین رنگ در طراحی رابط کاربری

<p>چند ضلعی ها در صفحات وب و یا اشکال اُریب در بخش های مختلف وب سایت، یکی از ترندهاییه&nbsp;که طرفداران زیادی هم داره. خیلی از افراد طراحی های شبیه به هم رو دوست ندارن و دنبال یه طرح تازه توی صفحه هستند. خطوط موربی که بتونن ساختار صفحه را بکشنن و تجربه ای متفاوت از اون چه که همیشه&nbsp;کابر دیده&nbsp;ایجاد بشه.<br>مثلا طرح های زیر رو ببینید:</p><p>&nbsp;</p><figure class="image"><img src="https://www.keikaavousi.com/uploads/image-1583916442708-skew1-300x239.png"></figure><p>&nbsp;</p><figure class="image"><img src="https://www.keikaavousi.com/uploads/image-1583916560207-687474703a2f2f6170702e75792f696e6e76656e696f2f6769746875622f646961676f6e616c736c69646572332e706e67-300x191.png"></figure><p>&nbsp;</p><p>خطوط مورب و شکل های&nbsp;چند ضلعی که توی این نمونه طرح ها وجود دارن، با استفاده از svg قابل پیاده سازی هستند. گرچه با تکنیک های css و transform skew در Css هم میشه اشکال مورب ایجاد کرد اما با <a href="http://mr-k.ir/svg-%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd9%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D88-%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd9%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D86%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dad%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd9%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D88%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd9%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D87-%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Da7%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Db3%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Daa%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd9%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D81%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Da7%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Daf%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd9%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D87-%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Da7%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Db2-%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Da2%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd9%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D86-%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Daf%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Db1-%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd9%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7D88%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Dd8%7Be61875fd75919040638c9fc348189e2e6b216f92a3f7265a4a43d973b4909f9f%7Da8/">استفاده از SVG</a> شاید راحت تر باشید. زمانی که خودم نیاز به استفاده از این تکنیک داشتم، وقت زیادی از من گرفته شد. چون مرجعی مناسبی براش وجود نداشت و هر مرورگر ساز خودش رو میزد! با وجود سادگی کار اطلاعات ناقص تو این زمینه زیاده و ممکنه با چند بار نتیجه نگرفتن کلا قید این روش رو بزنید. اما اگر دقیقا روش کار رو یاد بگیرید استفاده ازش خیلی حرفه ای و جذاب میشه.به خاطر همین سعی کردم به صورت مختصر و مفید خلاصه این موارد رو جمع آوری کنم تا توی وقت شما صرفه جویی بشه.</p><p>اول از همه یکی از سایت های خوبی که توی اون می تونید هر&nbsp;نوع چند ضلعی که میخواید بسازید و ازش خروجی svg بگیرید <a href="http://www.cssplant.com/clip-path-generator">cssplant</a>&nbsp;هست. توی این سایت میتونید هر نوع شکلی که نیاز دارید به سادگی بکشید و به صورت هم زمان خروجی svg اون رو هم ببینید.</p><figure class="image"><img src="https://www.keikaavousi.com/uploads/image-1583916512760-skew1-1-300x235.png"></figure><p>بعد از رسم شکل مورد نظرتون، دو نوع کد به شما نمایش داده میشه. یکی css code و اون یکی inline svg هستش. در حقیقت شما با استفاده از svg tag و همچنین css polygon شکل مورد نظرتون رو می سازید و باید به صورت همزمان هر دو رو در صفحه تون استفاده کنید. نکته مهم اینجاست که سازگاری مرورگر تو این زمینه خیلی مهمه و باید همه vendor prefix ها رو رعایت کنید.</p><p>اگر شما کد تولیدی این وب سایت رو توی صفحتون استفاده کنید به احتمال خیلی زیاد اون کد اجرا نمیشه! شما باید چند تا کار دیگه توی اون کد انجام بدید تا بتونید خروجی مورد نظرتون رو ببینید.</p><p>حالا قدم به قدم کار رو پیش میبریم.</p><p>ابتدا یه div ساده بسازید و کلاسی مثل poly بهش بدید:</p><p>&nbsp;</p><p>&lt;div class="poly"&gt;&lt;/div&gt;</p><p>&nbsp;</p><p>&nbsp;</p><p>کد زیر رو هم توی صفحه html تون قرار بدید.با توجه به اینکه عرض و ارتفاعش رو صفر دادید، قراردادنش هر جایی از صفحه فضایی رو اشغال نمی کنه. میتونید کد رو پایین ترین بخش سایت&nbsp;بنویسید.</p><p>&nbsp;</p><p>&lt;svg width="0" height="0"&gt; &lt;defs&gt; &lt;clipPath id="polygon3" clipPathUnits="objectBoundingBox"&gt; &lt;polygon points="0 0, 0.69 0,&nbsp;1&nbsp;0.55, 0&nbsp;0.54"&gt; &lt;/polygon&gt; &lt;/clipPath&gt; &lt;/defs&gt; &lt;/svg&gt;</p><p>&nbsp;</p><p>این کد&nbsp;بهینه شده کد تولید شده وب سایت هست. نکته اینجا&nbsp;بودکه شما باید تگ های def&nbsp; و attribute clippathunit رو که در اون کد وجود نداشت، بهش اضافه کنید.</p><p>مسئله بعدی اعدادیه که به صورت پیکسلی در کد سایت وجود داشت و حالا در تگ polygon و ویژگی points داخل این تگ، اعداد به صورت درصدی نوشته شدند و باعث میشه بتونید چند ضلعی ریسپانسیو داخل صفحه داشته باشید. اعداد صدمی مثل 0.69 دراینجا در حقیقت 69%&nbsp;هستند.</p><p>حالا باید کد css رو اضافه کنید.</p><p>.poly{</p><p>clip-path: polygon(0 0, 69% 0, 100% 55%, 0 54%);</p><p>clip-path: url("#clipPolygon");</p><p>{</p><p>&nbsp;</p><p>&nbsp;</p><p>/*style it*/</p><p>with:100%;</p><p>height:500px;</p><p>background-color:#333;</p><p>&nbsp;}</p><p>&nbsp;</p><p>&nbsp;<br>اولین خط مربوط به پشتیبانی مرورگر سافاری و کروم و دومین خط مربوط به پشتیبانی مرورگر فایرفاکس هست. در حقیقت تگ svg که داخل html نوشتیم، برای پشتیبانی مرورگر فایرفاکس ایجاد شد و اگر اون تگ رو بردارید و تنها خط اول css رو داشته باشید، به راحتی چند ضلعی مورد نظر ساخته میشه با این تفاوت که فقط در مرورگر کروم و سافاری قابل اجراست.</p><p>همون طور که می بینید، داخل کد مربوط به فایرفاکس (خط دوم) یک url خواسته شده و آی دی #clipPolygon در اون داده شده که در حقیقت آی دی تگ polygon svg در صفحه هست. نکته مهم مسیردهی درست این url هست. داخل url دقیقا مسیر صفحه ای رو بدید که تگ svg تون قرار داره.. و اگر دادن مسیر براتون مشکله و ممکنه اشتباه کنید، به راحتی، این دو خط css رو به همون شکل داخل تگ head همون صفحه بنویسید تا درصد اشتباهتون کم بشه. در واقع با این کار به کد css می گید آی دی clipPolygon ای رو بخون که داحل همین صفحه html هست. به صورت کلی نوشتن این کد داخل تگ head بهترین راهه.</p><p>اگر همه مسیر گفته شده رو پیش برید، در نهایت یک چهارضلعی اریب در صفحه تون دارید.با همین روش هر نوع شکل دیگه ای رو میتونید بسازید و به طرح هاتون شکل تازه ای بدید.</p><p>&nbsp;شاد باشید و پر انرژی :)</p>

استفاده از svg در وب

ساخت چند ضلعی ها در وب با استفاده از svg

<p>شاید تا حالا کلمه svg به گوشتون خورده باشه یا حداقل توی مصاحبه های شغلی ازتون پرسیده شده که کار کردن با اون رو بلدید یا نه. اگر هم طراح گرافیک باشید حتما باهاش برخورد داشتید.در این مقاله می خواهیم Svg و نحوه استفاده از آن در وب رو با هم بررسی کنیم. Svg مخفف&nbsp; scalable vector graphics &nbsp;و به معنی گرافیک برداری مقیاس پذیر هست. در حقیقت با استفاده از svg می تونید از بردارها در محیط وب استفاده کنید. حتما براتون این سوال پیش اومده که کلیت قضیه به چه دردی می خوره. ببینید svg یک نوع فرمت گرافیکی هست که حجم بسیار پایین و در مقابل به دلیل خاصیت برداری بودنش کیفیت بالایی داره. در حقیقت چون با یک رزولوشن محدود مانند فرمت png یا jpg مواجه نیستید، سایز تصویر به هر میزانی که نیاز داشته باشید میتونه تغییر اندازه داده بشه و ذره ای از کیفیتش کم نشه.</p><p>ویژگی دیگه ای که حداقل توی طرح های جدید بهش نیاز هست، بحث انیمیت کردن و متحرک سازی المان های مختلف در صفحه ست، که فرمت Svg این امکان رو به ما میده که تمام قسمت های یک تصویر، به دلیل وکتور بودن به صورت جداگونه انیمیشن داشته باشند. بسیاری از انیمیشن های تحت وبی که میبینید همگی از svg ساخته شده اند.</p><p>فرمت svg در حقیقت طرح گرافیکی رو به صورت xml درمیاره که برای مرورگر فرمت استاندارده و به راحتی اون رو پردازش می کنه. این نکته رو فراموش نکنید که این فرمت ، فرمت مورد تایید و پیشنهاد کنسرسیوم وب هست.</p><p>به دلیل اینکه svg به صورت متنی پردازش می شه، میتونید اون رو توی هر نوع ادیتوری تولید کنید ، ضمن اینکه در illustrator هم فرمت خروجی Svg رو میتونید داشته باشید. اگر با هیچ کدوم از این روش ها راحت نیستید، میتونید از <a href="https://inkscape.org/">inkscape</a> برای تولید svg استفاده کنید.</p><p><strong>ساخت اشکال هندسی در وب با استفاده از svg</strong></p><p>برای طراحی اشکال هندسی در وب با استفاده از svg نیاز به نصب یا راه اندازی هیچ افزونه و یا محیط خاص برنامه نویسی نیست. تنها کافیه با استفاده از یک قطعه کد، شکل مورد نظر خودتون رو پیاده سازی کنید.</p><p><strong>دایره:</strong></p><p>قطعه کد زیر برای ساخت دایره، در یک صفحه html به کار میره:</p><p>&lt;svg&nbsp;width="100"&nbsp;height="100"&gt; &lt;circle&nbsp;cx="50"&nbsp;cy="50"&nbsp;r="40"&nbsp;stroke="blue"&nbsp;stroke-width="4"&nbsp;fill="black"&nbsp;/&gt; &lt;/svg&gt;</p><p>&nbsp;</p><p>بیاید تمام قسمت های این کد رو بررسی کنیم. اولین کار استفاده از تگ svg است. ابتدا ابعاد المان خودتون رو مشخص کنید که در اینجا 100 در 100 هست و شکل مورد نظرتون نمی تونه از ابعادی که شما مشخص می کنید بزرگتر باشه. در داخل این تگ نوع شکل هندسی رو مشخص می کنیم که در اینجا circle هست. Attribute های cx &nbsp;و cy مرکز دایره را مشخص می کنند که در اینجا x,y 50 و 50 هستند.</p><p>دقت کنید مبدا مختصات در اینجا، برخلاف مبدا مختصات عمومی ریاضیات، از بالاو سمت چپ شروع میشه و محور افقی به سمت راست x و محور عمودی به سمت پایین y رو تشکیل میده.</p><p>در ادامه r هم شعاع دایره رو نشان می ده که در اینجا 40 انتخاب شده.</p><p>Stroke در Svg به خط دور شکل گفته می شه (مثل border) . stroke-width هم عرض خط دورشکل هستش. مقدار fill رنگ داخل شکل رو مشخص می کنه.</p><p>&nbsp;</p><p><strong>مستطیل:</strong></p><p>برای ساخت مستطیل کد زیر رو بنویسید:</p><p>&lt;svg&nbsp;width="400"&nbsp;height="110"&gt; &lt;rect&nbsp;width="300"&nbsp;height="100"&nbsp;stroke="blue"&nbsp;stroke-width="4"&nbsp;fill="black"&nbsp;/&gt; &lt;/svg&gt;</p><p>&nbsp;</p><p>ساخت مستطیل هم مثل دایره ست با این تفاوت که نیازی به مشخص کردن مرکز و شعاع نیست و فقط عرض و ارتفاع به عنوان طول و عرض مستطیل کافیه.</p><p>&nbsp;</p><p><strong>بیضی:</strong></p><p>پیاده سازی بیضی با svg مثل دایره ست و تفاوت اون در شعاع شکل هست. در دایره یک شعاع داریم ولی در بیضی باید دو شعاع طولی و عرضی رو مشخص کنیم.<br>(در ضمن استایل شکل رو، هم به صورت attribute، مانند مثال های قبل میتونید اعمال کنید و هم به صورت inline-style مانند مثال بعدی:)</p><p>&lt;svg&nbsp;height="140"&nbsp;width="500"&gt; &lt;ellipse&nbsp;cx="200"&nbsp;cy="80"&nbsp;rx="100"&nbsp;ry="50" style="fill:yellow;stroke:purple;stroke-width:2"&nbsp;/&gt; &lt;/svg&gt;</p><p>&nbsp;</p><p><strong>خط:</strong></p><p>برای خط باید مختصات x,y ابتدا و مختصات x,y انتها را بر اساس عرض و ارتفاعی که در svg مشخص کردید، معین کنید:</p><p>&lt;svg&nbsp;height="210"&nbsp;width="500"&gt; &lt;line&nbsp;x1="0"&nbsp;y1="0"&nbsp;x2="200"&nbsp;y2="200"&nbsp;style="stroke:rgb(255,0,0);stroke-width:2"&nbsp;/&gt; &lt;/svg&gt;</p><p>&nbsp;</p><p>تا اینجا پیاده سازی اشکال ساده با استفاده از HTML5 SVG رو دیدیم. در ادامه چند وجهی ها و چالش هایی که در مرورگرهای مختلف باهاش مواجه هستید رو با هم بررسی می کنیم.</p>