طراحی سایت اخصاصی

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

با بوت استرپ وب سایت‌های سریع و عکس العمل‌گرا بسازید.
با بوت استرپ، که دوستداشتنی‌ترین باکس‌ابزار منبع گشوده فرانت اند عالم میباشد، تخت گاز تارنما‌هایی برخورد‌گرا و تماما سازگار و مطلوب برای اکران در دستگاه‌های گوشی پیاده سازی و باصرفه نمائید. این باکس‌ابزار خصوصیت‌های متعددی داراست. ازجمله‌ی آنها میشود به پلاگین‌‌های قوی جاوااسکریپ و همینطور سیستم grid عکس العمل‌گرا اشاره نمود.
بوت استرپ بدون پول میباشد و شما به‌راحتی میتوانید واپسین ورژن‌ی آن را (Bootstrap 5) از سایت قانونی‌اش دانلود نمایید. در صورتی‌که مقداری بخواهم بیشتر در ارتباط بوت استرپ توضیح دهم می بایست بیان‌کنم که‌این باکس‌ابزار دسته‌ای از قطعه‌ کدهای فراهم‌ی HTML, CSS & JavaScript میباشد که نرم افزار نویس را از تایپ کردن کدهای زیاد بی‌نیاز می‌نماید. بدین ترتیب در وقت پیشرفت‌دهنده بسیار صرفه‌جویی میشود و وی میتواند بر صفحه آرایی و پیاده سازی رابط کاربری وقت بیشتری بگذارد.

همینطور بوت استرپ کتابخانه‌ای منبع‌گشوده از آیکون‌های SVG و گروه‌ای از Theme‌های اختصاصی به خویش را دارااست. theme‌های بوت استرپ درواقع Extension‌های آن می باشند. Theme‌ها مثل آیکون‌ها بدون‌پول نیستند و بایستی آن‌ها‌را از تارنما خرید. البته خیلی هم گران نیستند و به عنوان مثال با ۴۹ دلار میگردد یکی واپسین theme‌های بوت استرپ را خرید.


کاربردهای (مزایای) بوت استرپ در طراحی وب سایت
چرا بایستی بوت استرپ حافظه گرفت؟ چه کاربردهایی بوت استرپ را در پیاده سازی وب سایت و اینترنت نرم افزار‌ها اساسی و موثر می‌نماید؟ یا این که درواقع، مزیت‌های به کار گیری از بوت استرپ در اینترنت صفحه آرایی و پیشرفت‌ی اینترنت نرم افزار‌ها چیست؟

۱. Bootstrap Responsive Grid System
در حالتی که بسط‌دهنده یا این که نرم افزار‌نویسی بخواهد با CSS چیزی مثل تصویر پایین را پیاده سازی نماید، سا‌عتها و سا‌عتها می بایست کدنویسی اجرا دهد. نو ممکن میباشد فیض آن چیزی نباشد که می‌مراد میباشد. زیرا در تلفن همراه به‌صدق اکران داده نمی شود یا این که مشکلی دارااست. یعنی پیاده سازی عکس العمل‌گرا وجود ندارد.
البته بوت استرپ سیستم grid داراست. یعنی همگی‌چیز مهیا میباشد. پیشرفت‌دهنده صرفا می بایست اندازه‌‌ی فضاها (Container) را و جزئیات دیگر را آن‌طور که میخواهد تهیه و تنظیم نماید. و آنها‌را با محتوایی که میخواهد لبریز نماید. و نگران عکس العمل‌گرایی پیاده سازی هم نباشد.



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

img-responsive
img-circle
img-rounded


۳. Bootstrap Components
بوت استرپ ابزاری میباشد که تاحد متعددی خیال و خاطر طراح و بسط‌دهنده را برای پیاده سازی رابط کاربری (UI) و اجرای طرح‌ها شل می‌نماید. فکر کنید که نیازی نباشد برای اضافه‌کردن المان‌ها و موادتشکیل دهنده بصری بسیار اصلی به هر شیت از وب سایت مانند نوارهای ناوبری (Navigation Bars)، جدول‌ها، اشکال دکمه‌ها، اشکال آیکون‌ها، گونه های Alert‌ها، Progress Bar، منوهای کشویی (Dropdown Bars)، هیبت‌ها و … کدنویسی CSS اجرا دهید. زیرا در بوت استرپ کلیه‌ی این‌ها ازپیش‌تعریف و تمجید‌گردیده وجود دارا هستند. و اصلی‌خیس اینکه به هیچ وجه نیازی وجود ندارد طراح نگران عکس العمل‌گرایی این المان‌ها باشد. همه المان‌های ساخته‌گردیده در بوت استرپ در گوشی به عبارتی‌قدر بهتر اکران داده می گردند که در برگه‌اکران ۱۴ اینچی.

۴. Bootstap JavaScript
اقتدار بوت استرپ تنها در دسته کدهای ازپیش‌مهیا‌ی CSS وجود ندارد، در‌این قاب ورک پیشرفت‌دهنده کتابخانه‌ی جی کوئری را هم داراست. ولی نکته اینجاست که آن کدهای جی کوئری در بوت استرپ گفته شده که می توانند به پیاده سازی و زیبایی المان‌های بصری بیفزایند. یعنی به طراح تارنما و طراح ui وب سایت قابلیت و امکان ابتکار عمل بیشتر و اجرای طرح‌های خلاقانه‌خیس را می دهند. مثلا، بعضا کدهای جی کوئری که در‌این ابزار جان دار میباشد، خاصیتی را به‌طور خود کار به المانی اضافه می‌نمایند.



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

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

تعادل دربین تبلیغات و محتوا در هر ورقه از وب سایت می بایست مراقبت گردد. محتوا، رضایت مخاطب و تجربیات کاربری دراولویت میباشد.
تاجایی‌که می شود تبلیغات به نصیب پایینی وبسایت (below the fold) منتقل خواهد شد.
در شرایطی‌که به هر دلیلی می بایست در بخش بالایی وب سایت تبلیغ قرار بگیرد، تعداد آن بسیار معدود باشد.
طراحی وب سایت می بایست عکس العمل‌گرا باشد. یعنی طراحی وب می بایست باتوجه‌به سایز اسکرین‌های متعدد صورت پذیرد. شاید برای اسکرین‌های خیلی خرد یک تبلیغ هم در بخش بالایی وب سایت مخاطب را ناچار‌ به اسکرول‌کردن نماید.
الگوریتم page layout پاپ‌آپ‌ها و همینطور Overly ads (مثل نوارهای تبلیغاتی که در ذیل ویدئوهای یوتیوب وجود دارااست) را جریمه نمی‌نماید.
پیاده سازی تلفن همراه پایه چیست؟
زمانی وب سایت‌ها جدید متولد گردیده بودند، اشخاص محدودی با دستگاه‌های محدودی از آن ها بازدید می‌کردند. ولی رفته‌رفته و با گسترش‌هایی که در تکنولوژی‌های متعدد وقوع افتاد؛ اشکال کامپیوترها، لپتاپ‌ها و آن‌گاه تلفن همراه‌ها و تلویزیون‌های هوشمند و تبلت‌ها به بازار آمدند. هم تعداد یوزرها وب و وبسایت‌ها بیشتر شد و هم دستگاه‌هایی که یوزرها با آنها از تارنما‌ها بازدید می‌کردند. پس، اینترنت دیزاینرها با این معضل مواجه شدند که می بایست یک وب سایت را برای اکران در چند نوع دستگاه گوناگون با خصوصیت‌های گوناگون پیاده سازی نمایند.

طراحان و بسط‌دهندگان وب سایت‌ها برای حل آن بحران چاره‌های مختلفی را سفارش و تحقیق کردند. سود‌ی پیشنهادات و استدلال‌ها این شد که مفاهیم بسیار مهمی در حیطهی اینترنت طراحی صفحه رفتار شد: وب سایت‌های Device Friendly، پیاده سازی برخورد‌گرا و پیاده سازی گوشی فرست. همگی‌ی این مفاهیم حول‌مبنا این زمینه میگردند که وبسایت‌ها می بایست سازگار و مطلوب برای اکران‌ در دستگاه‌های گوناگون پیاده سازی شوند و خیر‌تنها یک دستگاه خاص.

براین اساس تعریف‌و‌تمجید تلفن همراه فرست صفحه آرایی این می گردد که طراح تارنما در پیاده سازی تلفن همراه اساس آغاز وبسایت را سازگار و مطلوب برای اکران در اسکرین‌ خرد گوشی‌ پیاده سازی می‌نماید و پس از اعتقاد از اینکه وب سایت بی نقص و صحیح در اسکرین‌‌ تلفن همراه‌‌های متفاوت اکران داده میشود، می‌رود سراغ سازگارکردن پیاده سازی برای دستگاه‌هایی با اسکرین‌های گران قدر‌خیس.
چرا طراحی وب تلفن همراه پایه اصلی میباشد؟
فکرمیکنم در پیشگفتار جواب این پرسش را دادم که چرا طراحی وب سایت برای تلفن همراه اساسی میباشد. البته بگذارید یه خرده بیشتر در ارتباط مداقه پیاده سازی گوشی فرست توضیح دهم. به نمودار تحت نگاه فرمایید. بیش‌از ۵۰٪ از ترافیک تارنما‌ها از گوشی‌های هوشمند میاید. این داده های عددی نشانه میدهد هرروز اشخاص بیشتری در کلیه‌‌مکان دنیا از تلفن همراه برای بازکردن وب سایت‌های گوناگون به کار گیری می‌نمایند. باتوجه‌به آمارهای جهانی دیگر این ارتقا ادامه‌دار خواهد بود زیرا هرروز بر تعداد اشخاصی‌که تلفن همراه‌ دارا هستند اضافه میگردد و درنتیجه اشخاص بیشتری با تلفن همراه‌های گوشی به وب دسترسی خواهند داشت.
فکر کنید می‌خوا‌هید از سایتی فروشگاهی خرید فرمائید. با گوشی وارد وبسایت میشوید و می بینید هیچ‌چیز صحیح اکران داده نمی شود و حتی نمی‌توانید منو را پیدا فرمائید. منو را هم که پیدا می کنید بدون نقص وجود ندارد و همگی‌ی تولیدات را ندارد. چه میکنید؟ ناراضی از وبسایت می آیید خارج. پس در صورتی‌که وب سایت Mobile-friendly یا این که سازگار با تلفن همراه نباشد، تجارب کاربری خیر هم نخواهد داشت.

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



چه گونه بایستی تارنما را گوشی فرست پیاده سازی کرد؟
گذشته‌از پرداختن به اصول تلفن همراه فرست طراحی صفحه یا این که روش‌هایی برای طراحی وب سایت گوشی فرست می بایست بیان کنم که‌این نوع از پیاده سازی را برای او‌لین‌توشه طراح کالا معروفی به‌اسم Luke Wroblewski در کتابی با‌تیتر Mobile First در سال ۲۰۱۱ به عالم معرفی کرد. وی درین کتاب از التفات ساخت سایت برای تلفن همراه به‌مکان دسکتاپ و لپ‌تاپ اظهار‌کرد و همینطور به طراحان وب سایت و جنس پیشنهاداتی برای پیاده‌سازی پیاده سازی تلفن همراه فرست بخشید.

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

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

مقایسه بازارکار و درآمد جاوا اسکریپت دولوپر و تایپ اسکریپت دولوپر
در صورتی‌که در وب سایت indeed مجال‌های شغلی برای جاوا اسکریپت دولوپر را کاوش فرمایید، به به طور تقریب ۷۵‌هزار عمل در کناره‌وکنار جهان میرسید. درحالی‌که زمان‌های شغلی برای تایپ اسکریپت دولوپر نسبتاً ۱۸هزار میباشد. میانگین حقوق و دستمزد جاوا اسکریپت دولوپر در ایالات متحده هر ساله رقمی مجاورت‌به ۹۶هزار دلار ولی میانگین حقوق و دستمزد هر ساله‌ی تایپ اسکریپت دولوپر در ایالات متحده طراحی سایت اخصاصی  ۹۳‌هزار دلار میباشد.

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

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



تاریخچه مرورگرها
او‌لین مرورگر در سال ۱٩٩٠ معرفی شد که World Wide Web اسم داشت. اما بعد ها نامش به Nexus تغییر‌و تحول یافت. اگرچه این مرورگر نیز برای اکران صفحه های تارنما‌ها به کار گیری میشد، البته با مرورگرهایی که امروزه با آن شغل میکنیم، مسافت متعددی داشت. در ده سال ٩٠ میلادی، دور و اطراف وب بر پایه ی متن بود و یوزرها سوای علم فنی نمی‌توانستند از آن به کارگیری نمایند. به همین استدلال تعداد محدودی از اشخاص بضاعت و توان دسترسی به وب را داشتند.
البته به تدریج تغییرات از سال ١٩٩٢ با معرفی مرورگر Mosaic آغاز شد. مرورگر موزائیک با اطراف گرافیکی و جالب، گشت و گذار در اینترنت را ریلکس‌خیس کرد. و از کلیه اساسی‌خیس دیگر نیازی خلا تا کلیه اشخاص برای دسترسی به وب علم نرم افزار‌نویسی بدانند. از این رو رفته رفته برتعداد یوزرها وب افزوده شد و کمپانی‌ها هم پیرو عموم در وب حضور پیدا کردند. کسب و کار الکترونیک، رسانه‌های اجتماعی و بخش اعظمی از چیزهای دیگر که امروزه قسمت طلاق‌ناپذیر وب می باشند، ذیل اثر او‌لین مرورگر گرافیکی ساخت و ساز شدند.
مرورگرهای وب امروزی
امروزه مرورگرهای وب به ابزارهای قدرتمندی تبدیل گردیده‌اند که به یوزرها اذن میدهند در یک گوشه و کنار امن با سرعت و با کیفیت به سایت‌های گزینه عشق‌شان دسترسی داشته باشند. دوستداشتنی ترین مرورگرهای جهان عبارتند از:

Google Chrome
Safari
Microsoft Edge
Firefox
Opera
همانگونه که در نمودار پایین مشاهده می‌کنید، گوگل کروم دوست داستنی ترین مرورگر در سال ٢٠٢٢ میباشد.
مرورگرها به چه شکل فعالیت می نمایند؟
وقتی که شما نشانی URL یک تارنما را در نوار نشانی مرورگر وارد میکنید، مرورگر، داده ها آن کاغذ را از اینترنت سرور پیدا می‌نماید. مرورگر فولدر آن شیت را که به یک لهجه اپلیکیشن‌نویسی، از جمله HTML یا این که جاوا اسکریپت درج شده میباشد، اخذ می نماید. این فولدر دربرگیرنده، شیوه نامه‌هایی درباره روش اکران داده ها در کاغذ میباشد. در مرحله سپس مرورگر این فولدر را ترجمه و تعبیروتفسیر می نماید و برای استفاده کننده اکران میدهد. کل این فرایند طی یک‌سری ثانیه اعمال می‌گردد.



اصطلاحات رایج در مرورگرها
کوکی (Cookies)
سایت ها داده ها شمارا در پوشه هایی به اسم کوکی‌ها ذخیره می نماید. این کوکی ها تا وهله آن گاه که مجدد از آن وبسایت دیدن میکنید، در مرورگر شما ذخیره می‌شوند. به محض بازدید مجدد شما از یک وبسایت، این پوشه کوکی به وسیله مرورگر خوانده میگردد و شمارا شناسایی می نماید. مثلا هنگامی که شما وارد یک وبسایت می‌شوید و اسم کاربری و راز عبورتان ذخیره میگردد، این عمل به امداد کوکی‌ها قابلیت و امکان‌پذیر میباشد.
کوکی‌ها همینطور جزئیات داده ها شمارا نیز ذخیره می‌نمایند. اطلاعاتی مانند، علایق شما، الگوهای رفتاری شما در مرورگرها و… . نوع دیگری از کوکی‌ها نیز وجود داراست که به آنان کوکی‌های سوم فرد یا این که Third-party cookies می گویند. این کوکی‌ها از وب سایت‌هایی می‌باشند که شما تا به حالا از آنان بازدید نکرده‌اید ولی می توانند شمارا از سایت‌های دیگر ردیابی نمایند تا اطلاعاتی را درباره شما عده‌آوری نمایند، که ولی گاهی این داده ها به شرکت‌های گران قدر فروخته می‌گردد. شما میتوانید این کوکی‌ها را مسدود فرمایید اما تمامی‌ی مرورگرها این اذن را به شما نمی‌دهند.

مرورگر سری (Private browsing)
نسبتاًً همه مرورگرهای اساسی عالم دارنده اطراف مرورگر محرمانه می باشند که داده ها تاریخچه سایت هایی که از این اطراف بازدید میکنید در بخش History ذخیره نخواهد شد. اکثر اشخاص تصور می نمایند که مرورگرها در شکل به کارگیری از دور و بر محرمانه، داده ها و تاریخچه تارنما های بازدید گردیده را به جوامع و شرکت های تبلیغاتی اکران نمی دهند. در شرایطی‌که که‌این طور وجود ندارد. مزیت به کار گیری از نصیب مرورگر محرمانه این میباشد که در حالتی‌که شما از کامپیوترهای اشتراکی به کار گیری فرمائید قادر است داده ها فردی و خصوصی شمارا از حیث بقیه یوزرها آن کامپیوتر نگهداری نماید.



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

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



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

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

اپ‌نویس یا این که اینترنت دیزاینر ممکن میباشد بخواهد بسط‌دهنده فرانت اند (Frontend Developer) خواهد شد. یعنی خیلی تخصصی روی بسط فرانت اند تارنما‌ها و اینترنت نرم افزار‌ها فعالیت نماید. یا این که ممکن میباشد بخواهد فول استک دولوپر گردد. در هر دو شکل، می بایست مهارت‌های خویش را افرایش دهد. اشراف‌بر قاب ورک‌های اساسی و پر کاربرد درمیان مهارت‌هایی میباشد که بسط‌دهنده فرانت اند و فول استک دولوپر موردنیاز دارا‌هستند.



۱. شایسته ترین و دوست داستنی‌ترین کادر ورک فرانت اند در سال ۲۰۲۲ React میباشد
اغراق وجود ندارد در‌حالتی که بیان کنم که برای پیاده سازی رابط کاربری وبسایت‌ها و اینترنت نرم افزار‌ها همگی‌ی خط مش‌ها به قاب ورک توانا React ختم می‌گردد. برای ثابت محبوبیت ری اکت در دنیا کافی میباشد نگاهی‌به داده های عددی بیندازیم. داده های عددی statista.com که در تصویر ذیل میبینید، قاب‌ورک‌های فرانت اند و بک اند را براساس درصد محبوبیتشان درمیان پیشرفت‌دهندگان دنیا تر و تمیز نموده است. او‌لین کادر‌ورک دوستداشتنی عالم، یعنی Node.js، منحصر به فرد بسط بک اند میباشد. در جایگاده دوم، React.js قراردارد که پراستفاده‌ترین کادر ورک فرانت اند درمیان بسط‌دهندگان عالم میباشد.
React یا این که React JS or React.js کتابخانه‌ی جاوااسکریپت برای پیاده سازی فرانت اند میباشد. این کادر ورک را متا (فیسبوک) در سال ۲۰۱۳ عرضه کرد. ری اکت قاب ورکی بدون پول و متن‌گشوده میباشد و برای یادگیری آن نیز منابع آنلاین متعددی وجود دارااست. از مهمترین خصوصیت‌ها و مزایای ری اکت می‌گردد به مفاد تحت اشاره نمود:

ری اکت قاب ورکی کامپوننت‌مبنا میباشد. یعنی گسترش‌دهنده برای پیاده سازی اجزای UI صفحه های تارنما نیاز وجود ندارد تمامی‌چیز و همگی‌ی اجزا را ازصفر کدنویسی نماید. وی در ری اکت می تواند کامپوننت‌هایی را تعریف و تمجید نماید که در بخش‌های متفاوت وب سایت رفتارهای مختلف دارا‌هستند (کامپوننت‌هایی که میشود بارها و بارها از آن ها استفاده نمود). همین خصوصیت شغل تشکیل داد رابط کاربری وب سایت را بسیار سرعت می بخشد.
اینترنت دیزاینرها می بایست وب سایت را اولیه برای اسکرین‌های خرد، یعنی گوشی، پیاده سازی نمایند (تلفن همراه فرست طراحی صفحه). در شرایطی که توسعه و گسترش‌دهنده فرانت اند تارنما را با ری اکت ساخته باشد،‌ هیچ نگرانی ازبابت اکران و سرعت اکران وبسایت در دستگاه‌های گوشی ندارد.
ری اکت این قابلیت را به گسترش‌دهنده می دهد تا به‌راحتی اینترنت نرم افزار‌های سابق (Legacy app) را به‌روزرسانی و سازگار با تکنولوژی‌های نو نماید. به این ترتیب، نیازی وجود ندارد بسط‌‌دهنده کلیه اینترنت اپلیکیشن دیرین را ازنو بنویسد. با ری اکت تنها اجزا و نصیب‌هایی را که موردنیاز میباشد، آپ دیت و امروزی می‌نماید.
۲. Angular دومی قاب ورک پر کاربرد برای پیشرفت فرانت اند میباشد
در صورتی‌که مجدد نگاهی‌به داده های عددی بیندازیم، پس از jQuery (که در محتوایی دیگر، باعنوان با jQuery آشنا گردید، خیلی کامل معرفی گردیده‌است) و Express که کادر ورکی برای پیشرفت بک اند میباشد، به فریمورک آنگولار می‌رسیم. آنگولار قاب ورکی متن گشوده و مجانی میباشد که گوگل در سال ۲۰۱۶ آن را منتشر کرد. آنگولار با گویش تایپ‌اسکریپت تاسیس شده است. تایپ‌اسکریپت زبانی میباشد که زیرمجموعه‌ی جاوااسکریپت قرار می گیرد، البته با آن تفاوت‌هایی دارااست. مهمترین تفاوت تایپ‌اسکریپت با جاوااسکریپت این میباشد که از آن برای اپ‌نویسی پروژه‌های بغرنج و درمقیاس گران قدر (که چند هزار خط کد دارا‌هستند) استعمال می‌‌نمایند.

آنگولار نیز قاب ورکی کامپوننت‌شالوده میباشد و با آن میگردد فرانت اند وب سایت و اینترنت نرم افزار را برای دستگاه‌‌ها و پلتفرم‌های گوناگون گسترش اعطا کرد. البته مهم ترین خصوصیت این میباشد که آنگولار به توسعه و گسترش‌ی SPA (Single-page application) یا این که اینترنت نرم افزار‌های تک‌برگه‌ای تخصیص داراست. اینترنت نرم افزار‌های تک‌ورقه‌ای نرم افزار‌ها یا این که اینترنت نرم‌افزار‌هایی می باشند که صرفا یک شیت دارا هستند و براساس نیاز مخاطب صرفا محتوایی که می بایست و موردنیاز میباشد آپ تو دیت و بار گذاری می گردد و خیر کل برگه، مثل جی تمایل. آنگولار خودش را این‌طور تعریف‌و‌تمجید می‌نماید:

Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.

آنگولار فریمورک پیاده سازی نرم افزار و پلتفرم توسعه و گسترش برای ساختن نرم افزار‌های تک‌‌برگه‌ای کارا و سطح‌بالاست.
۳. Vue.js کادر ورکی میباشد که از آنگولار چیزی نادر ندارد
پس از آنگولار و با اختلاف خیلی پاره ای کادر ورک ویو جی اس قراردارد. به طور تقریب ۱۹٪ از گسترش‌دهندگان در عالم برای بسط فرانت اند از Vue.js به کار گیری می‌نمایند. ویو جی اس نیز کادر ورک جاوااسکریپت، متن‌گشوده و بدون پول میباشد که در سال ۲۰۱۴ منتشر شد. دو چیز Vue.js را از آنگولار متمایز می‌نماید: ویو جی اس سریع‌خیس و آسوده‌خیس میباشد.

ویو جی اس خصوصیت اصلی دیگری هم داراست: بسیار انعطاف‌پذیر میباشد. یعنی شما در صورتیکه گسترش‌دهنده نو‌کاری باشید که پروژه‌ی کوچکی دارید و HTML و جاوااسکریپت را خیلی بهتر بلد می‌باشید، می توانید از ویو جی اس برای پیشرفت رابط کاربری پروژه خویش امداد بگیرید. در حالتی‌که پروژه غامض باشد، بازهم Vue.js گزینش قابل قبولی میباشد. شعار این فریمورک این میباشد که زیرا پیاده سازی و توسعه و گسترش هر سایتی منحصر میباشد و نیازهای خودش را دارااست، ویو جی اس بین نیاز و عدم وضوح‌های پروژه، تجارب‌ی توسعه و گسترش‌دهنده و سود‌ا‌ی که می بایست نتیجه ها گردد تعادل و تناسب برقرار می‌نماید.

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

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

اینترنت دیزاینر چه نکاتی را می بایست در پیاده سازی و گسترش تارنما رعایت نماید تا مطمئن خواهد شد وب سایت برای تبادل داده تماما مطلوب میباشد؟

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

افزون بر آن، متن‌های کوتاه راهنما (یا این که متن‌های تجارب مخاطب/ UX Writing) می بایست اصولی، روشن و بی آلایش درج شده باشند تا یوزرها با یک نگاه بفهمند برای اجرا دادن کاری خاص در تارنما مورد نیاز میباشد چه نمایند و چه مراحلی را طی نمایند. استفاده کننده می بایست با سایت تعامل نماید تا بتواند از آن استعمال و داده‌هایی را که میخواهد بفرستد و اخذ نماید. هر چیزی که آن تعامل را طاقت فرسا، فرصت‌بر یا این که مختل نماید؛ تبادل داده را مختل نموده است.
۳. اخذ و جابجایی داده از سایت می بایست تخت گاز و بی نقص صورت پذیرد
فکر کنید وارد وبسایتی فروشگاهی میشوید. خیلی ریلکس و سریع کالایی را که می خواهید پیدا می کنید. ولی عکس مال گشوده نمیشود یا این که خیلی دیر گشوده می گردد. کاغذ‌ی تصویب توصیه و پرداخت هم همین‌ طور میباشد. یعنی بی نقص کردن مراحل خرید به کندی رخداد میفتد. در پایان هم ممکن میباشد نتوانید پرداخت را بدون نقص نمائید. وب سایت (اخذ و جابجایی داده) بایستی سریع باشد. سرعت تحت وبسایت و وقفه در بار گذاری یا این که اخذ داده‌ها بر تعامل مخاطب تاثیر منفی میگذارد. به همین ادله، طراحان و گسترش‌دهندگان اینترنت از تکنولوژی‌های مختلفی (مثل AJAX) برای ارتقای سرعت وب سایت به کارگیری می‌نمایند.





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

۲. طراح سایت ما یحتاج میباشد در همگی فرایند طراحی صفحه و توسعه و گسترش اینترنت بدین نکته دقت داشته باشد که ابزاری برای جابجایی داده می‌سازد.

۳. برای جابجایی داده موردنیاز میباشد مخاطب با سایت تعامل رضایت‌نصیب و مفیدی داشته باشد. چیزی که آن تعامل رضایت‌قسمت را می‌سازد پیاده سازی UI و پیاده سازی تجارب استفاده کننده میباشد.

۴. اینترنت دیزاینرها بایستی به‌روز باشند و از واپسین تکنولوژی‌ها و فناوری‌ها که سرعت و امنیت وبسایت را و در سود جابجایی داده را بهبود می دهند، باخبر باشند. در فراگیری ساخت وب سایت جامع تمامی‌ی نکات موردنیاز برای پیاده سازی و ایجاد کرد وبسایتی سریع و امن و همینطور منطقههای مربوط به اینترنت (یعنی پیاده سازی UI و پیاده سازی UX) یادگرفتن داده می شود.

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

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

به تصویر پایین که نگاه نمائید. زمانی وارد سایت atozofai.withgoogle.com میشوید، اینگونه برگه‌ای را می بینید. قابلیت ندارد حافظه برگه کاهی و مکتب نیفتید. این جادوی بافت پوسته تارنما میباشد. پوسته این تارنما بافت دارااست. بافتی که بیننده (استفاده کننده) را خاطر ورقه می‌اندازد.

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

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

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

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



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

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

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



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



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



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

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