بایگانی دسته‌ی: طراحی وب

Front End چیست و به چه کسی برنامه نویس فرانت اند می گویند؟

فرانت کار کیست

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

فرانت کار چیست؟

سایت های مختلفی که با آنها سر و کار دارید، به دو بخش کلی تقسیم بندی می شوند؛ بخش سرور و کاربر. در سمت سرور با برنامه نویسی تلاش می شود تا قابلیت های مختلف و محاسبات مورد نیاز انجام شده و نتیجه آن در نهایت به سمت کاربر ارسال می گردد. اگر به دنبال این هستید که فرانت کار چیست، لازم است بدانید که افرادی که با برنامه نویسی نتیجه کار سمت سرور را به کاربر نمایش می دهند، فرانت اند هستند. در واقع این افراد کاملا با ظاهر سایت و سمت کاربر و بخش قابل مشاهده سایت در ارتباط هستند.

تمام آنچه در یک سایت مشاهده می کنید و تعاملاتی که با آن دارید را فرانت اند فراهم می کند. به عبارت دیگر، یک فرانت کار نتیجه کار بخش سرور را به شکل مناسب به کاربر نمایش می دهد.

فرانت اند کیست

تفاوت FRONT END  و BACK END چیست؟

یکی از ابهامات بسیار رایجی که در این زمینه وجود دارد این است که front end چه تفاوتی با back end دارد؟ بک اند به افرادی گفته میشود که با زبان های برنامه نویسی مختلف از جمله php و asp قابلیت های گوناگون را برای یک سایت پیاده سازی می کنند. این افراد تنها بر روی سرور کار می کنند و با دیتابیس و محاسبات سروکار دارند. بک اند در پشت صحنه حضور دارد و با کاربر سروکار نخواهد داشت. اما فرانت اند مانند بازیگران یک تئاتر یا فیلم هستند که نتیجه کار بک اند را نمایش می دهند.

از نظر اهمیت کار هر دو بخش بک اند و فرانت کار هر دو مهم بوده و بدون هم نتیجه کار ناقص خواهد بود. به همین دلیل نمی توان به طور واضح مشخص کرد که فرانت کار اهمیت بیشتری دارد یا بک اند، بلکه این دو مکمل هم هستند.

مهارت های فرانت کار چیست؟

مساله بسیار مهم بعدی که باید به آن پرداخته شود این است که مهارت های یک فرانت کار چیست؟ برای فرانت اند دولوپر شدن به چه مهارت هایی باید تسلط داشته باشیم؟ آیا front end نیاز به برنامه نویسی دارد؟ برخلاف تصور برخی از افراد تازه کار، فرانت اند نیز به برنامه نویسی احتیاج دارد. چون نیروی فرانت اند باید بتوانید با تسلط پیدا کردن بر زبان های برنامه نویسی متعدد از جمله جاوا اسکریپت، html، css تسلط داشته باشد.

علاوه براین، برای موفقیت در فرانت کار شدن، بهتر است به نرم افزارهای گرافیکی نیز تسلط داشته و قادر به ارائه آزمون های متعدد A/B باشید. یک فرانت کار باید بتواند با آزمون و تست های متعدد نتیجه حالت های مختلف کار را بررسی و در نهایت منجر به بهبود UX شود. البته به این نکته نیز باید اشاره شود که رابط کاربری و ظاهر یک سایت همیشه توسط فرانت اند دولوپر طراحی نمیشود. بلکه این کار توسط یکی از افراد متخصص در UI و طراحی رابط کاربری با فتوشاپ و فیگما و نمونه های مشابه انجام شده و فرانت اند بر اساس طرح آنها خروجی را پیاده سازی می کند.

ارتباط سئو و فرانت کار چیست؟

بدون شک هدف از راه اندازی یک سایت جذب مخاطب و کاربر می باشد و موتورهای جستجو بیشترین ترافیک را می توانند به سمت آنها هدایت کنند. به همین دلیل نمی توان از سئو سایت غافل شد و در ابتدایی ترین مراحل طراحی سایت نیز باید به آن توجه داشت. حال سوال این است، ارتباط سئو و فرانت کار چیست؟ آیا این دو به هم ارتباط دارند؟ لازم به ذکر است که بخش مهمی از سئو به رعایت استانداردها در مرحله طراحی ارتباط دارد. به عنوان مثال، سایت هایی که واکنش گرا نباشند از نظر گوگل استاندارد نبوده و تاثیر منفی بر سئو خواهد داشت.

واکنش گرایی و بسیاری از مشکلات مربوط به چیدمان و ظاهر سایت و حتی سرعت آن به فرانت اند ارتباط دارد. به همین دلیل است که فرانت کار اهمیت زیادی در یک تیم طراحی سایت داشته و عدم تخصص آنها منجر به ضررهای مالی جدی خواهد شد.

فرانت اند همان Ui designer است؟

از دیگر ابهاماتی که وجود دارد این است که آیا UI designer همان فرانت اند کار است؟ ui دیزاینر فردی می باشد که به نرم افزارهای گرافیکی تسلط داشته و با شناخت استانداردها ظاهر یک سایت را بدون کد نویسی ارائه می دهد. پس از طراحی ظاهر سایت فایل psd آن در اختیار فرانت اند قرار گرفته و با کد نویسی پیاده سازی شده و برای کاربر نمایش داده میشود.

بازار کار فرانت اند چطور است؟

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

به همین دلیل نه تنها در ایران، بلکه در سایر کشورهای دنیا فرانت کار و سایر مشاغل مرتبط با برنامه نویسی و طراحی وب بازار خوبی دارند. مهم این است که بتوانید تخصص کسب کنید؛ چون شرط موفقیت در بازار کار بین المللی تخصص است و سطحی نگری نمی تواند نتیجه خوبی را به همراه داشته باشد.

آموزش زبان های برنامه نویسی Fornt End

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

HTML چیست؟

HTML چیست

اگر در دنیای اینترنت و کسب و کارهای آنلاین فعالیت دارید، مطمئنا با واژه HTML آشنا هستید. اما آیا میدانید HTML چیست؟ در طول روز ما برای یافتن سوالات ذهنی مان به سایت های زیادی سر میزنیم که هر کدام از آنها به اشکال مختلف برای ما جذاب هستند. در سال های اولیه پیدایش سایت، تنها المان های ساده و ابتدایی وجود داشت، اما امروزه با سایت های چنان جذابی روبرو می شویم که خواهان آشنایی با چگونگی ساخت آنها هستیم.

در دنیای کنونی؛ علم و تکنولوژی به طرزی باور نکردنی مسیر پیشرفت را طی می کنند. مسیری که در هر چه جذاب تر کردن فرآیند طراحی وب تاثیر گذاشته و به یک تکنولوژی به نام HTML ختم شده است. از همین رو قصد داریم به کشف این تکنولوژی بپردازیم و ببینیم چطور توانسته چنین جایگاه بالایی را در میان متخصصان و طراحان وب به خود اختصاص دهد.

با ما همراه باشید.

HTML چیست

HTML را بشناسید

HTML مخفف کلمه Hyper Text Markup Language بوده و به عنوان یک زبان نشانه گذاری استاندارد برای صفحات وب شناخته می شود. اگر بگوییم این زبان، پایه و بنیاد صفحات وب را میسازد، دروغ نگفته ایم. هر آن چیزی که شما در صفحه وب مشاهده می کنید، اعم از متن ها، عناوین، تصاویر و… همگی از طریق HTML در صفحه قرار داده شده است.

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

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

تاکنون فکر کرده اید؛ زبان نشانه گذاری چه تفاوتی با زبان های برنامه نویسی دارد؟ در ادامه شرح خواهیم داد.

 

تفاوت زبان برنامه نویسی با زبان نشانه گذاری در چیست؟

زبان برنامه نویسی یک زبان قدرتمند است که از طریق آن میتوان با کامپیوتر حرف زد. به عبارت ساده تر؛ این زبان دستورالعمل های کامپیوتر را برای ما قابل فهم کرده و کمک میکند تا با آن ارتباط برقرار کنیم. از طرفی اغلب ساختاری کنترلی و شرطی دارند.

اما زبان نشانه گذاری به این شکل کار نمی کند. در حال حاضر انواع متفاوتی از زبان نشانه گذاری وجود دارد که معروف ترین آنها HTML است. در این نوع از زبان ها، هیچ نشانه ای از ساختارهای رایج برنامه نویسی قبیل حلقه، شرط، تکرار و… را مشاهده نمی کنید. تنها یک سری نشانه داخل متن بکار گرفته می شود. درواقع شما با بهره گیر از این نشانه ها، بخشی از متن را از سایر عناصر جدا خواهید کرد تا المان های مدنظر را در صفحه وب قرار دهید.

حال دانستید HTML  چیست؟ اگر همچنان در ذهن شما ابهاماتی وجود دارد، توصیه می کنیم با کارشناسان و متخصصان ما ارتباط برقرار کنید.

HTML چطور کار می کند؟

HTML عناصر مختلف نظیر پاراگراف، لیست، صوت، عکس و… را در کنار هم میگذارد تا یک چهارچوب اصلی از صفحه وب را به وجود آورد. به زبان ساده تر؛ شما با کمک HTML میتوانید بدنه اصلی سایت خود را بسازید. پس هم اکنون میدانید اصلی ترین وظیفه HTML چیست.

اگر بخواهیم این زبان نشانه گذاری کاربردی را همچون یک ساختمان در حال ساخت بدانیم؛ مهندس عمران که وظیفه پی ریزی و شکل دهی اسکلت ساختمان را برعهده دارد، همچون شخصی است که ساختار اصلی صفحات وب را با کمک HTML می سازد. در این میان مهندسین معمار وظیفه دارند تا ظاهر ساختمان را به زیباترین حد خود برسانند به مانند شخصی که به کدنویسی زبان های برنامه نویسی می پردازد.

هر چند در دنیای اینترنت، کدنویسی HTML و CSS را یک نفر برعهده میگیرد. شما میتوانید فایل های HTML را با پسوند htm. یا html در سیستم خود ذخیره نمائید. این فایل ها در تمامی مرورگرها قابلیت پشتیبانی دارند و به راحتی محتویات آنان رندر می شود. می دانید رندر چیست؟ رندر درواقع به نمایش گذاشتن عناصر داخل سایت نظیر تصویر، ویدئو، انیمیشن و… برای کاربران است.

مزایای زبان HTML چیست؟

همانطور که گفتیم؛ HTML بنیاد و هسته اصلی صفحه وب را تشکیل می دهد و یک زبان بسیار مهم در دنیای وب شناخته می شود. پس خیلی دور از انتظار نیست بخواهیم مزیت های از مزایای این زبان برای شما بگوییم. واقعا دلیل ماندگاری و فراگیر بودن HTML چیست؟

  • یادگیری فوق العاده آسان و لذت بخش
  • به راحتی در تمامی مرورگرها به اجرا درمی آید.
  • Open Source بوده و کاملا رایگان است!
  • به آسانی با سایر زبان های سمت سرور نظیر PHP ادغام می شود.

با این تفاسیر آیا علاقمند به یادگیری این زبان هستید؟ کافیست به بخش تماس باما مراجعه کنید.

کلام آخر

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

اما مسئله اینجاست؛ برای اینکه به این زبان نشانه گذاری واقف شوید، باید به طور مداوم تمرین کنید. تنها تمرین و تمرین است که شما را به یک برنامه نویس خبره تبدیل خواهد کرد. پس قدم های اول را محکم بردارید تا پس از ورود به مباحث پیشرفته وب، مشکلات سنگین گریبانگیر شما نشود.

مراحل طراحی وب سایت کدام است؟

مراحل طراحی سایت

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

 

برنامه نویس بک اند هستید با فرانت اند؟

قبل از وارد شدن به مرور هر یک از مراحل مهم در طراحی سایت لازم است بدانید که برنامه نویسان این حوزه را می توان به دو گروه کلی تقسیم نمود که عبارتند از بک اند  (Back End) و فرانت اند (Front End). بک اند به گروهی از برنامه نویسان گفته میشود که مسئول برقراری ارتباط سایت با سرور و پایگاه داده ها می باشد و در مقابل فرانت اند بیشتر با ارتباط سایت با کاربر و ظاهر سایت سر و کار دارد. فعالیت در هر یک از این حوزه ها کاملا با هم متفاوت می باشد. البته برخی از برنامه نویسان در هر دو حوزه فعالیت دارند که به Full Stack معروف می باشند و از توانایی و تخصص بالایی برخوردار هستند. برای معرفی گام های طراحی سایت فرض را بر این می گذاریم که قصد دارید یک Full Stack باشید.

 

HTML را جدی بگیرید

سایت هایی که در دنیای امروز وجود دارند در دو گروه ایستا (Static) و پویا یا داینامیک تقسیم میشوند که در گروه اول سایت شامل صفحاتی با المان های ساده می باشد و تعامل کاربر و سایت بسیار اندک است. در مقابل سایت های داینامیک کاربر با سایت تعامل زیادی داشته و امروزه به شدت مورد توجه قرار گرفته اند. در طراحی ظاهر سایت های ایستا برای تعیین المان ها و عناصر موجود در ظاهر سایت و در حالت کلی طراحی ظاهر صفحه از زبان  HTML (Hyper Text Markup Language) یا زبان نشانه گذاری ابرمتن استفاده میشود. یادگیری HTML اولین مرحله طراحی سایت می باشد که تمام طراحان حرفه ای وب به آن مسلط می باشند و یادگیری آن نیاز به پیش زمینه دانش برنامه نویسی و تخصص ندارد.

 

جذاب کردن سایت با CSS

با توجه به اهمیت بسیار زیاد ظاهر سایت و تجربه کاربری، به مرور برای رفع کاستی های موجود در HTML زبان دیگری به نام CSS معرفی شد. با یادگیری CSS می توان فونت، رنگ و سایر المان ها و عناصر سایت را زیباتر و جذاب تر کرد. Cascading Style Sheets زبان ساده و جذابی می باشد که تسلط به آن می تواند خروجی کار طراحی سایت را بهتر کند و به نوعی مکمل HTML به شمار میرود.

 

یادگیری جاوا اسکریپت

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

 

انتخاب ابزارهای گرفیکی

طراحی گرفیک یکی از مهم ترین بخش ها در طراحی سایت می باشد که وظیفه آن طراحی ظاهر یک سایت در نرم افزارهای مختلف از قبیل فتوشاپ می باشد. یک فرانت اند باید بتواند طرح ارائه شده توسط طراح گرافیک را به کد تبدیل کند. برای اینکه بتوانید ظاهر سایت را راحت تر و در کمترین زمان انجام دهید، پیشنهاد می کنیم به یکی از نرم افزارهای گرافیکی طراحی وب از قبیل scketch مسلط شوید. این نرم افزار در طراحی اپلیکیشن های موبایل نیز کاربرد بسیار زیادی دارد.

 

برقراری ارتباط سایت با سرور با PHP

یکی از مهم ترین گام های شروع طراحی سایت، تسلط پیدا کردن بر زبان های برنامه نویسی می باشد که ارتباط بین سایت و سرور را برقرار می سازد. زبان های مختلفی در این حوزه وجود دارند که یکی از پرکاربردترین آنها PHP می باشد. با یادگیری PHP و مسلط شدن بر پایگاه های داده می توان گام های موثری در سایت های داینامیک برداشت. با مروری بر سایت های بسیار معروف و نام آشنا مانند فیسبوک، ویکی پدیا، یاهو، وردپرس، فلیکر و Tumblr که همگی تعاملی می باشند متوجه اهمیت بسیار زیاد یادگیری php برای شروع طراحی سایت خواهید شد.

 

انتخاب IDE و Text editor برای طراحی سایت

تمام برنامه نویسان بک اند و فرانت اند درست مانند یک مکانیک به جعبه ابزار نیاز دارند و مسلما هر چه ابزارها قوی تر و کاملتر باشد در نهایت عملکرد و بازدهی بهتری را شاهد خواهید بود. انتخاب IDE و Text Editor یکی دیگر از گام های شروع طراحی وب سایت می باشد که به شما ابزارهایی را برای کدنویسی بهتر با خوانایی بالاتر ارائه می دهد. ویرایشگرهای متن یا Text Editorهای متنوعی در حال حاضر در دسترس می باشند که می توان آنها را انتخاب کرد که از معروف ترین آنها Microsoft Visual Studio، PhpStorm، Microsoft Expression Web می باشند.

از بهترین IDE ها برای طراحی وب سایت می توان به موارد زیر اشاره کرد:

  • Sublime Text
  • Xcode
  • Vim
  • NetBeans برای PHP
  • Pycharm برای پایتون

 

آموزش مقدماتی و پیشرفته مراحل طراحی وب سایت

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

۱۰ نکته ی مهم که در طراحی UX/UI باید بدانید

آموزش ux/ui

طراحی UX/UI یکی از بهترین فرصت های شغلی می باشد که هر روز به اهمیت آن افزوده میشود و دست یافتن به دانش و تخصص در این زمینه می تواند نقطه ی شروع خوبی در کسب شغل مطلوب باشد. طراحی تجربه کاربری یا همان UX به همان اندازه که هیجان انگیز می باشد، عدم رعایت اصول آن می تواند کار را به چالش بکشاند و نتیجه ی عکس داشته باشد. در ادامه با ۱۰ نکته ی مهم که دانستن آن شما را به یک طراحی UX/UI موفق تبدیل خواهد کرد را معرفی خواهیم کرد.

نکات طراحی UX/UI

۱- مخاطب را بشناسید

با توجه به رشد چشمگیر اینترنت و تبدیل شدن آن به بخش جدایی ناپذیر زندگی، طراحی سایت برای هر نوع برند و کسب و کار یک امر ضروری می باشد. طراحی سایت با توجه به شرایط بوجود آمده از آن دسته مشاغلی می باشد که با حوزه های کاری متنوعی سر و کار دارد و یک طراح UX/UI باید قبل از شروع طراحی حتما زمانی را برای شناخت مخاطب اختصاص دهد. گروه سنی، جنسیت، فرهنگ و میزان تحصیلات کاربران اصلی یک سایت از جمله فاکتورهای بسیار مهم و تاثیرگذار در طراحی UX/UI می باشد که نباید از آن غافل بود.

نکته های ی مهم طراحی UX/UI

۲- قبل از طراح UX/UI بودن کاربر خوبی باشید

یک طراح UX/UI باید بتواند خودش را به جای کاربران سایت قرار دهد و رفتار آنها و نحوه ی استفاده و برخورد با بخش های مختلف سایت یا اپلیکیشن را تجزیه و تحلیل کند. طراح تجربه کاربری وقتی نتواند از دید کاربر به سایت نگاه کند، چطور می تواند چالش های موجود را شناسایی کند و سعی در برطرف کردن آنها داشته باشد؟

 

طراحی UX

۳- از تایپوگرافی استفاده کنید

اصلی ترین هدف در طراحی سایت ارائه ی محصول و محتوای مربوط به آن می باشد و هنر در طراحی UX/UI استفاده از فونت های زیبا و ظریف می باشد تا احساس خوبی در کاربر ایجاد کند. تایپوگرافی و هنر استفاده از فونت باعث میشود ساختار محتوای قرار گرفته شده بر روی سایت منسجم و یکپارچه شود و در نتیجه مدت زمان ماندگاری کاربران در سایت و مرور صفحات مختلف افزایش یافته و اثر مثبت بر سئو خواهد گذاشت.

 

طراحی

۴- اجتناب از اسکرول بیش از حد

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

۵- طراحی تعاملی یا responsive

 با توجه به اینکه کاربران در دنیای امروز با دستگاه های مختلفی صفحات سایت شما را مرور می کنند، در نتیجه باید به نحوه ی نمایش آن در محیط های مختلف توجه داشته باشید. یک طراح UX/UI باید بتواند تصاویر، محتوای متنی، ویدئو و آیکن و المان های مختلف به کار رفته بر روی سایت را با طراحی تعاملی در تمام دستگاه ها به درستی نمایش دهد و اصطلاحا طرح کاملا Responsive باشد.

واکنشگرا

۶- استفاده از تست و بهبود UI

بخش مهمی از کار هر طراح رابط کاربری، تست کارایی پروژه می باشد که تاثیر مستقیم روی بهبود تجربه کاربری را به همراه خواهد داشت. منظور از تست کارایی بررسی تمام عناصر موجود در طرح از قبیل منو بار، آیکن ها و دکمه ها، محتوا و غیره می باشد که بررسی درست آنها تضمین می کند که رابط کاربری یا همان UI به درستی عمل می کند.

۷- الهام بگیرید

طراحی تجربه کاربری و رابط کاربری کار خسته کننده ای نیست و هر روز شاهد تکامل و اتفاقات تازه در این حوزه هستیم. یک طراح UX/UI باید مدام بروز باشد و با الهام گرفتن از طراحی های جدید خلاقیت و ایده پردازی را در جهت جلب رضایت کاربر چاشنی کار خود کند. منبع با ارزشی مانند اینترنت را هیچ وقت دست کم نگیرید و ببینید و الهام بگیرید و تفاوت الهام گرفتن و کپی کردن را درک کنید.

۸- مدیریت موثر تیم پویا

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

 

آموزش طراحی سایت

۹- حفظ سادگی در UX/UI

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

آموزش UX

۱۰- توجه به محتوای سایت

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

مهم ترین نکته ای که هیچ وقت و برای هیچ نوع طراحی نباید فراموش کرد، افزایش دانش و تجربه می باشد و اطلاع از تمام اصول طراحی UX/UI بدون بکار بردن آنها در کار و آزمون و خطا قطعا در  خروجی طراحی تاثیری نخواهد داشت.

آموزش ساخت سبد خرید در PHP

php-crud-file-structure-3

در این پست به آموزش ساخت سبد خرید در PHP خواهیم پرداخت . این برنامه کاربردی عمدا ساده و تا حد امکان کوچک درنظر گرفته شده است. شما می توانید آن را دانلود کرده و برای نیازهایتان شخصی سازی (customize) کنید. در این مثال، ما فهرستی را از محصولات پایگاه داده را نمایش می دهیم. در مورد هر محصول می توانیم مقدار و اندازه آنرا انتخاب کرده و به سبد خرید اضافه کنیم. اقلام سبد خرید در نشست ذخیره می گردند. با حذف آیتم های هر نشست ، می توانید سبد خرید را خالی کنید.

آموزش ساخت سبد خرید در PHP

آموزش ساخت سبد خرید در PHP

افزودن محصولات مختلف به سبد خرید

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

<?php
$product_array = $db_handle->runQuery("SELECT * FROM tblproduct ORDER BY id ASC");
if (!empty($product_array)) { 
foreach($product_array as $key=>$value){
?>
<div class="product-item">
	<form method="post" action="index.php?action=add&code=<?php echo $product_array[$key]["code"]; ?>">
	<div class="product-image"><img src="<?php echo $product_array[$key]["image"]; ?>"></div>
	<div><strong><?php echo $product_array[$key]["name"]; ?></strong></div>
	<div class="product-price"><?php echo "$".$product_array[$key]["price"]; ?></div>
	<div><input type="text" name="quantity" value="1" size="2" /><input type="submit" value="Add to cart" class="btnAddAction" /></div>
	</form>
</div>
<?php }} ?>

با کلیک نمودن بر روی دکمه «افزودن به سبد خرید»، شناسه محصول انتخاب شده و با تعیین مقدار محصول ، می توانیم آن را به سبد خرید اضافه می کنیم. برای ذخیره آیتم ها در سبد خرید از PHP SESSION استفاده می کنیم. کد زیر گزینه دیگری را نشان می دهد که برای اضافه کردن محصولات به سبد خرید مورد استفاده قرار می گیرد. اگر چندین بار یک محصول را به سبد خرید اضافه کنیم، مقدار آیتم مورد نظر افزایش خواهد یافت.

case "add":
	if(!empty($_POST["quantity"])) {
		$productByCode = $db_handle->runQuery("SELECT * FROM tblproduct WHERE code='" . $_GET["code"] . "'");
		$itemArray = array($productByCode[0]["code"]=>array('name'=>$productByCode[0]["name"], 'code'=>$productByCode[0]["code"], 'quantity'=>$_POST["quantity"], 'price'=>$productByCode[0]["price"]));
		
		if(!empty($_SESSION["cart_item"])) {
			if(in_array($productByCode[0]["code"],array_keys($_SESSION["cart_item"]))) {
				foreach($_SESSION["cart_item"] as $k => $v) {
						if($productByCode[0]["code"] == $k) {
							if(empty($_SESSION["cart_item"][$k]["quantity"])) {
								$_SESSION["cart_item"][$k]["quantity"] = 0;
							}
							$_SESSION["cart_item"][$k]["quantity"] += $_POST["quantity"];
						}
				}
			} else {
				$_SESSION["cart_item"] = array_merge($_SESSION["cart_item"],$itemArray);
			}
		} else {
			$_SESSION["cart_item"] = $itemArray;
		}
	}
break;

حذف یا پاکسازی آیتم ها از سبد خرید

در این قسمت آموزش ساخت سبد خرید در PHP ، به کاربران اجازه می دهیم تا با استفاده از لینک «حذف آیتم» در هر ردیف ، بتوانند آیتم ها را از سبد خرید حذف کنند. همچنین، به کاربران این توانایی را می دهیم با استفاده از گزینه “تخلیه سبد ” ، کل سبد خرید را پاکسازی کنند. به منظور پاکسازی آیتم خاصی از دوره زمانی خرید ، با کلیک کردن روی «حذف آیتم» می توانیم عمل پاکسازی را با توجه به کد آیتم انجام دهیم. می توانیم از تابعPHP  ()unset  برای پاکسازی نشست در سبد خرید استفاده می کنیم.

case "remove":
	if(!empty($_SESSION["cart_item"])) {
		foreach($_SESSION["cart_item"] as $k => $v) {
			if($_GET["code"] == $k)	unset($_SESSION["cart_item"][$k]);				
			if(empty($_SESSION["cart_item"])) unset($_SESSION["cart_item"]);
		}
	}
break;
case "empty":
	unset($_SESSION["cart_item"]);
break;

کد زیر گزینه های مورد استفاده برای “حذف آیتم ” و عمل ” پاکسازی سبد” را نشان می دهد. برای ایجاد جدولی از محصولات ، SQL ذیل را وارد کرده و داده های خود را برای نمایش در صفحه کاتالوگ خود بارگذاری کنید.

CREATE TABLE IF NOT EXISTS `tblproduct` (
  `id` int(8) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `code` varchar(255) NOT NULL,
  `image` text NOT NULL,
  `price` double(10,2) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `product_code` (`code`)
)

دانلود پروژه آموزش ساخت سبد خرید در PHP

دانلود پروژه

لینک های مرتبط :

کلاس طراحی وب مشهد

دوره آموزش Android

آموزش تصویری jQuery قسمت ۴

فیلم آموزش jQuery

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

آموزش تصویری jQuery قسمت اول

آموزش تصویری jQuery قسمت دوم

آموزش تصویری jQuery قسمت سوم

 

دانلود فیلم آموزش jQuery

آموزش تصویری jQuery

فیلم آموزش jQuery قسمت ۳

فیلم آموزش jQuery

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

آموزش jQuery قسمت اول

آموزش jQuery قسمت دوم

دانلود فیلم آموزش jQuery

آموزش تصویری jQuery

آموزش jQuery قسمت ۲

آموزش jquery

قسمت دوم  آموزش تصویری jQuey از سایت برنامه نویسان مشهد در خدمت شما هستیم در این قسمت به نحوه آماده کردن یک صفحه وب برای استفاده از jQuery می پردازیم . مباحثی که در این آموزش تصویری jQuery مطرح خواهد شد عبارتند از : بررسی ورژن های مختلف jQuery ، تفاوت فایل های فشرده و غیر فشرده ، مکان های مختلفی از صفحه HTML که می توان jQuery را به صفحه اضافه کرد و…همچنین قسمت اول این آموزش را می توانید از لینک پایین دانلود کنید :

آموزش jQuery قسمت اول

 

دانلود آموزش تصویری jQuery

آموزش تصویری jQuery

آموزش jquery (فیلم)

آموزش jquery

jQuery یک کتابخانه سریع ،کوچک  و سرشار از امکانات  جاوااسکریپت است که با استفاده از آن شما می توانید در طراحی وب ،  صفحات HTML  را تغییر داده ، رویدادهایی را فراخوانی کنید ، انیمیشن ایجاد کنید ، و همچنین از Ajax استفاده کنید . به دلیل تنوع در کاربرد و همچنین توسعه پذیر بودن jQuery امروزه برنامه نویسان زیادی از آن برای  طراحی وب استفاده می کنند.در این سری فیلم های آموزش jquery به شما نحوه نوشتن  کدهای jquery را آموزش خواهیم داد.

jQuery شامل امکانات زیر است:

    • تغییر در HTML/DOM
    • تغییر در CSS
    • متد هایی برای رویداد های HTML
    • افکت ها و انیمیشن ها
  • AJAX

قبل از شروع آموزش jquery  بهتر است با موارد زیر آشنا باشید:

    • HTML
    • CSS
  • JavaScript

آموزش jquery