مقالات آموزشی

آشنایی با تکنیک Intrinsic برای طراحی وب

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

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

از آن جایی که این تکنیک ها توسط طراحان و کد نویسان استفاده می شوند معمولا نام های ساده ای بر روی آن ها گذاشته می شود تا بتوان راحت تر آن ها را تشخیص داد و استفاده کرد. برای مثال طراحی مسطح (flat design) یا طراحی متریال (material design) یک اصطلاح بسیار رایج است که توسط افراد فعال در این حوزه استفاده می شود.

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

تاریخچه تکنیک intrinsic

 

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

همه چیز این تکنیک پس از معرفی ماژول هایی برای flexbox و CSS grid در css شروع شد. در گذشته استفاده از تکنیک table برای ایجاد طرح و ساختار وب استفاده می شد اما به طور مداوم استفاده از آن در حال کاهش است و افراد کمی هنوز از این روش قدیمی استفاده می کنند.

بعد از مدتی استفاده از FLOAT و یک سری دستورات CSS برای مشخص کردن جایگاه المان ها در یک صفحه به کار گرفته شدند که باعث شدند تا صفحات زیبا تر به نظر برسند.

اما با گذشت زمان و روی کار آمدن ماژول های جدید، تکنیک های جدیدی ابداع شدند و استفاده از مواردی که قبلا بیان کردیم به مرور کم رنگ تر شدند.

مثلا در نسخه های اولیه BOOTSTRAP با استفاده از FLOAT یک چارچوب خوب و کاربردی برای طراحی صفحات ارائه کرد. در نسخه های بعدی این فریم ورک مخصوصا نسخه چهارم آن بسیار انعطاف پذیر شده و چیدمان عناصر در صفحه بسیار بهبود یافته است.

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

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

تفاوت طراحی RESPONSIVE و تکنیک INTRINSIC چیست؟

 

برای اینکه صفحه وب ما در صفحه نمایش های مختلف نمایش مناسبی داشته باشد، از مدیا کوئری های برای سایز های مختلف استفاده می کنیم.

در قسمت بعدی تکنیک INTRINSIC چیست می خواهیم از ماژول های جدیدی به نام FLEX و GRID صحبت کنیم. این ماژول ها به ما کمک می کنند تا دیگر به مدیا کوئری ها و سایز بندی های مختلف نیازی نداشته باشیم.

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

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

OBJECT-FIT در تکنیک INTRINSIC چیست؟ با استفاده از دستورات OBJECT-FIT می توانیم سایز عکس را با توجه به اندازه مرورگر تنظیم کنیم و حتی مشخص کنیم که در کجای صفحه نمایش بگیرد.

 

Author

مدیریت سایت

Leave a comment

نشانی ایمیل شما منتشر نخواهد شد.