آموزش HTML5: تصاویر واکنش گرا (Responsive)در HTML5 (قسمت هشتم)

آموزش HTML5 قسمت هشتم

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

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

در این آموزش، صرفاً به موضوع Responsive سازی تصاویر با بهره گیری از دستورات HTML نسخه ۵ پرداخته می شود.

خب دوستان شاید باورتان نشود ولی:   👇 👇 👇

 ویدیو آموزشی تصاویر واکنش گرا (Responsive)در HTML5 انتظار ما را می کشد 🙂

 

 

آموزش تصاویر واکنش گرا (Responsive)در HTML5 به صورت متن و تصویر:

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

استفاده از Text Editor جدید تحت عنوان Atom

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

این Text Editor رایگان است و با خیال راحت از وب سایت رسمی Atom.io می توانید آن را دانلود نمایید.

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

پس از این که برنامه Atom را نصب کردیم، آن را باز کرده و مطابق با تصویر زیر، ابتدا از قسمت File گزینه ی New File را انتخاب می نماییم.

 

در گام بعدی از قسمت گوشه پایین، سمت راست صفحه Atom گزینه Plain Text را انتخاب می کنیم. مانند عکس زیر:

 

نهایتاً در قسمت Search Box واژه ی html را جستجو کرده و آن را انتخاب می نماییم تا صفحه کدنویسی html برای ما باز شود.

نصب و راه اندازی ابزار Emmet در Atom

حال نوبت به آن رسیده است که از پلاگین Emmet استفاده نماییم. در قسمت های قبل دیدیم که چقدر راحت در PhpStorm با درج کاراکتر ! و فشردن دکمه Tab قادر بودیم کدهای پیش فرض html را به صورت اتوماتیک تولید نماییم.

در ویرایشگر Atom برای این کار لازم است تا ابزاری تحت عنوان Emmet را نصب کنیم.

برای راه اندازی Emmet ابتدا در صفحه اول Atom گزینه Install a Package را انتخاب می کنیم. همانند تصویر زیر:

 

در گام بعدی، در قسمت جعبه جستجو emmet را طبق عکس زیر، جستجو کرده و روی دکمه ی Install کلیک می نماییم.

 

اکنون اگر در ویرایشگر Atom و فایلی که با فرمت html ساختیم، کاراکتر ! را وارد کنیم و دکمه Tab را در کی بورد خود فشار دهیم، کدهای پیش فرض html را در کسری از ثانیه برای ما تولید می نماید.

معرفی تگ <Dialog> در HTML

اما قبل از این که وارد بحث تصاویر واکنش گرا (Responsive)در HTML5 شویم، شاید بد نباشد جهت دست گرمی 🙂 با یکی دیگر از تگ های نه چندان مهم HTML آشنا شویم.

با بهره گیری از تگ <dialog> می توان (مثل تصویر زیر)یک جعبه به همراه Border مشکی رنگ ساخت. این تگ یک خاصیت دارد تحت عنوان Open که بدون درج این Attribute کار نخواهد کرد.

از این دستور اغلب برای ساخت Popup ها یا Modal ها استفاده می شود که فعلاً این مباحث را تدریس نکرده ایم و در بحث Bootstrap به طور کامل موضوع Modals را مورد بررسی قرار خواهیم داد.

 

نکته کنکوری: در HTML5 مجاز هستیم، Attribute هایی که مقدار آن ها برابر با خود آن ها هستند را مقداردهی نکنیم.

اگر به تصویر زیر دقت نمایید، Open برابر با Open قرار داده شده است که برای جلوگیری از تکرار بی دلیل، می توان به صورت <dialog open> آن را نوشت.

البته با استفاده از کدهای Css می توان تگ <dialog> را زیباتر نمود. اما به دلیل این که هنوز کدهای سی اس اس را یاد نگرفته ایم، فعلاً تا همین جا بحث را نگه می داریم تا در آموزش های بعدی به شکل کاربردی تری به این موضوع بپردازیم.

منظور از واکنش گرا یا Responsive چیست؟

شاید لازم باشد پیش از این که به ساخت تصاویر واکنش گرا (Responsive)در HTML5 بپردازیم، چند جمله ای درباره ی تعریف مفهوم Responsive صحبت کنیم.

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

ما انسان ها با توجه به جبر روزگار، همواره واکنش گرا هستیم.

به عنوان مثال:

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

در گرمای شدید تابستان، نوشیدن یک لیوان آب خنک، می تواند یکی از واکنش های ما باشد.

هنگام گرسنگی، خوردن غذا واکنش دیگر ما انسان ها نسبت به شرایط است.

و…

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

طبق این تعریف، به راحتی می توان واکنش گرا بودن صفحات وب را درک کرد.

زمانی که از طراحی وب سایت واکنش گرا یا Responsive Web Design صحبت می کنیم، هدف ما این است که وب سایت ما در شرایط مختلف، واکنش های مناسبی از خود بروز دهد.

به عنوان مثال:

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

یا در تبلت، کاربران SideBar را مشاهده ننمایند (این فقط یک مثال بود).

و یا این که سایت ما در لپ تاپ یا مانیتورهای بزرگ تر نیز به چه شکلی نمایش داده شود (در واقع واکنش سایت ما به چه صورت باشد).

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

 

تصاویر واکنش گرا (Responsive)در HTML5

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

با اضافه نمودن تگ <picture> صراحتاً به مرورگر می گوییم، قصد داریم در وب سایت خود چند تصویر با اندازه های متفاوت نمایش دهیم (بدیهی است که در تگ <picture> می توان یک عکس هم نمایش داد). بنابراین کار اصلی ما از داخل تگ <picture> شروع خواهد شد.

کلاً ۴ خط کد وجود دارد که در ادامه به صورت جداگانه هر یک را بررسی می نماییم.

 

با استفاده از تگ <source> می توانیم، تصاویری مختلف یا با اندازه های متفاوت را در سایت نمایش دهیم. و با بهره گیری از خاصیت media می توان تعیین کرد که تصویر ما در چه اندازه ای از عرض مرورگر، نمایش داده شود.

همانطور که در تصویر زیر مشاهده می نمایید، با استفاده از مقدار min-width: 900px در ویژگی media در واقع به مرورگر دستور می دهیم، تا زمانی که عرض مرورگر کاربر به ۹۰۰px نرسیده است، این عکس را نمایش بده و به محض رسیدن به ۹۰۰px (کوچک شدن مرورگر)دستور بعدی (در اینجا <source> بعدی)اجرا می شود. در ضمن، بدیهی است که در خاصیت srcset آدرس عکس مورد نظر را وارد می نماییم و کارکرد آن دقیقاً مانند خاصیت src در تگ <img> می باشد.

قطعه کدی که در تصویر زیر مشاهده می نمایید، نشانگر این است که فقط تا زمانی که اندازه عرض مرورگر کاربر به ۶۰۰px نرسیده است، تصویر tablet.jpg نمایش داده شود، به محض این که اندازه عرض مرورگر از ۶۰۰px کمتر شود، به صورت خودکار، مرورگر دستور بعدی را اجرا می نماید.

در گام سوم، اگر اندازه عرض مرورگر کاربر  از ۴۰۰px کمتر شود، <source> بعدی اجرا می شود، و چون <source> دیگری وجود ندارد، هر چقدر هم عرض مرورگر از ۴۰۰px کمتر شود، تفاوتی در نمایش عکس ها به کاربر ایجاد نمی شود. به عبارتی ساده تر در کوچکترین مرورگرها نیز عکس mobile.jpg نمایش داده می شود.

 

اما برای این که عملیات مورد نظر روی تصاویر به درستی انجام شود، لازم است که بعد از نوشتن تگ های <source> یک تگ <img> قرار دهیم که در آن آدرس تصویر اصلی (عکس اول)باید وجود داشته باشد.

آشنایی با تگ جدید <bdi> در HTML5

تگ <bdi> که به تازگی در HTML نسخه ۵ معرفی شده است، از راه رسیده است تا بسیاری از مشکلات فارسی زبانان را حل کند.

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

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

برای روشن تر شدن ماجرا، لطفاً نگاهی به تصویر زیر بیاندازید. USA , England با فرمتی متفاوت نسبت به ایران نمایش داده شده اند.

 

برای این که واژه ی ایران نیز همانند USA, England نمایش داده شود، لازم است که از تگ <bdi> استفاده نماییم. این تگ به ما این اجازه را می دهد که عبارات راست چین را به شکل چپ چین، در ویرایشگرهای متن وارد نماییم و همانطور که در تصویر زیر مشخص است، هر سه آیتم به صورت یکسان نمایش داده شده اند. البته شاید ترکیب زبان فارسی و انگلیسی در List Items کار درستی نباشد. اما گاهی اوقات پیش می آید که مجبور می شویم این نوع ترکیب ها را کنار هم داشته باشیم.

 

جمع بندی آموزش تصاویر واکنش گرا (Responsive)در HTML5

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

و اما جمع بندی نکات: در این مطلب هدف ما پرداختن به طراحی وب واکنش گرا نبود و صرفاً قصد داشتیم به بررسی تگ <picture> بپردازیم و با توانمندی های آن آشنا شویم. مسلماً در آینده ای نه چندان دور به موضوع Responsive Web Design خواهیم پرداخت. اما اگر بخواهیم گریزی کوتاه به این بحث بزنیم، شاید ذکر این نکته خالی از لطف نباشد که صفحات وب سایت را به دو شکل می توان واکنش گرا نمود:

۱) دستی: یکسری دستورات و قواعد وجود دارد مانند تگ های <Meta> که با به کاربردن آن می توان وب سایتی واکنش گرا طراحی نمود.

۲) اتوماتیک: متداول ترین روشی که برنامه نویسان حرفه ای استفاده می کنند، به کارگیری فریم ورک (Framework)های CSS مانند Bootstrap, Bulma, Material Desiagn و غیره است که تمامی کدهای مربوط به این حوزه را برای ما نوشته اند و ما صرفاً از استانداردهای آن ها استفاده می نماییم و با این روش سرعت کدنویسی ما نیز دو چندان خواهد شد.

 

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

شما را به خداوند منان می سپارم. در قسمت نهم آموزش HTML5 شما را خواهم دید.

ارادتمند شما- محمدرضا یعقوبی

 

 

 

 

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

رونمایی از محصول قدم صفر کسب و کار + گارانتی بی قید و شرط
همین الان توضیحات محصول را می خوانم