صفحات Responsive یا واکنشگرا
در نرم افزار تحت وب یا سایت
آینده ی نرم افزارهای موبایلی جز در مواردی که لازمه بدون اینترنت کار کنن، همین نسخه های تحت وب هستن، چون ترجیح مردم دیگه اینه که به چند دلیل، هیچ اپ موبایلی نصب نکنن و از وب اپلیکیشن های واکنشگرا نسبت به سایز صفحه استفاده کنن، مهمترین این دلایل اینها هستن که:
- اپ تبلیغات یا ویروس میاره.
- اپ ممکنه باعث هک و دسترسی غیرمجاز بشه.
- اپ یعنی برای هر سیستم عامل یک نسخه ی خاص.
- اپ روی گوشی ها جا اشغال میکنه.
- اپ برای آپدیت نیاز به نصب مجدد داره.
- اپ ممکنه هنگ کنه و پشتیبانیش سخته ..
داستان اینه که از ۱۵ سال پیش ایده ی نمایش محتوا در موبایل به عنوان در دسترس ترین کامپیوتر برای همه به ذهن کارشناس ها رسیده بود که چهار سال بعد یعنی حوالی سال ۲۰۰۹ پخته تر شد و تصمیم بر این گرفته شده که طراحی برنامه های تحت وب (سایت ها) طوری انجام بشه که نمایش اونها در تبلت و موبایل با لپ تاپ و دسکتاپ فرق کنه.
معلومه که اگه سایتی مثل ایرانکد رو با موبایل باز کنید به عنوان یک اَپ غیر واکنشگرا مجبورید دائم صفحه رو زوم کرده یا اسکرول کنید تا به همه جای اون دسترسی داشته باشید. این اتفاق برای سایت خبرگزاری ها رخ نمیده چون با تکنیک های روز از طریق کدهای CSS که چیدمان و استایل صفحه رو تعریف می کنند خودشون رو با رزولوشن و ابعاد صفحه تطبیق میدن. به طور خلاصه در حالت Responsive از اسکرول عرضی و زوم خبری نیست و همه چیز درشت نمایش داده میشن. برای تست ساده ترین حالتش کافیه خودتون با Notepad یک فایل متنی به شرح زیر بسازید:
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>تنظیم درگاه نمایش</h2>
<p>این مثال کار خاصی نمیکنه تنظیم نمایش</p>
</body>
</html>
بعد از ذخیره اگه پسوند فایل رو از txt. به htm. تغییر بدین و با مروگر بازش کنید شاهد نمایش ویژه ای خواهید بود. برای فهم موضوع در کامپیوتر در مروگر Chrome کلید F12 رو بزنید. در فرم مجاور کنار عبارت Element یک آیکون سوئیچ بین موبایل و دسکتاپ می بینید که میتونید حالت نمایش رو تغییر بدین. در موبایل هم داخل تنظیمات مرورگر بین حالت موبایل و دسکتاپ سوئیچ کنید.
تمام کارها رو اون تگ meta داره انجام میده که البته برای ایجاد یک پیج واکنشگرا با تمام عناصر مثل تصاویر، تکست باکسها یا کلیدها کفایت نمیکنه. ولی اگه همین تگ رو با تنظیمات داخلش از کدها حذف کنید متوجه ی تغییر میشد.
برای داشتن یک پیج کاملاً واکنشگرا مثلاً لازمه در استایل یک عکس هم عرض اون رو 100 درصد و ارتفاعش رو اتوماتیک بذاریم. یا تنظیم کنیم که از نظر عرضی عناصر مختلف در حالت موبایل چند درصد از صفحه رو بگیرن و بقیه ی اشیاء زیر اونها برن. علاوه برا اون مجموعه هایی از استایل های آماده برای صفحات نوشته شدن که امروز خیلی در ساخت نرم افزارها مورد استفاده قرار میگیرن و طیف وسیعی از تنظیمات رو در بر میگیرن که دیگه خود طراح وب لازم نیست دونه دونه برای هر عنصر استایل تعریف کنه و تنها به کلاسی که در اون مجموعه از قبل نوشته شده ارجاعشون میده. یکی از معروف ترین این استایل های آماده Bootstrap هست.
بوت استرپ که ترجمه اش چیزی شبیه "سرنخ" یا راه مفید میشه. چهار سال پیش مثل یک معجزه ظهور کرد و تا امروز که نسخه ی ۴ اون اومده بالای ۱۴ درصد از سایت های دنیا ازش استفاده میکنن! به طور خیلی ساده تعریفش اینه که تصور کنید شما به عنوان کسی که یک صفحه ی وب ساده ساختین یا حتا برنامه ی حرفه ای تحت وب نوشتین، دائم این دغدغه رو دارین که توی موبایل چطوری دیده میشه، توی تبلت چطور و حتا خود کامپیوتر. و بعد رویای اینکه بجای نوشتن صدها خط برای ساخت یک منوی ساده و رنگ آمیزی اون تنها تایپ کنید "منو-آبی" و اون بالا یه منو بیاد! همه ی اینها با افزودن فایل بوت استرپ کنار پروژه امکان پذیره. پدیده ای که گردانندگان سایت محبوب توئیتر برای اولین بار به دنیا هدیه کردن و استفاده ی اون رو از حالت اختصاصی خارج کردن!
اگر به مقوله ی طراحی نرم افزار یا رابط کاربری علاقه مند هستین، این ابزار مورد خوبی برای سرمایه گذاری و آموختن میتونه باشه.
#bootstrap #responsive #webdesign #skill
در نرم افزار تحت وب یا سایت
آینده ی نرم افزارهای موبایلی جز در مواردی که لازمه بدون اینترنت کار کنن، همین نسخه های تحت وب هستن، چون ترجیح مردم دیگه اینه که به چند دلیل، هیچ اپ موبایلی نصب نکنن و از وب اپلیکیشن های واکنشگرا نسبت به سایز صفحه استفاده کنن، مهمترین این دلایل اینها هستن که:
- اپ تبلیغات یا ویروس میاره.
- اپ ممکنه باعث هک و دسترسی غیرمجاز بشه.
- اپ یعنی برای هر سیستم عامل یک نسخه ی خاص.
- اپ روی گوشی ها جا اشغال میکنه.
- اپ برای آپدیت نیاز به نصب مجدد داره.
- اپ ممکنه هنگ کنه و پشتیبانیش سخته ..
داستان اینه که از ۱۵ سال پیش ایده ی نمایش محتوا در موبایل به عنوان در دسترس ترین کامپیوتر برای همه به ذهن کارشناس ها رسیده بود که چهار سال بعد یعنی حوالی سال ۲۰۰۹ پخته تر شد و تصمیم بر این گرفته شده که طراحی برنامه های تحت وب (سایت ها) طوری انجام بشه که نمایش اونها در تبلت و موبایل با لپ تاپ و دسکتاپ فرق کنه.
معلومه که اگه سایتی مثل ایرانکد رو با موبایل باز کنید به عنوان یک اَپ غیر واکنشگرا مجبورید دائم صفحه رو زوم کرده یا اسکرول کنید تا به همه جای اون دسترسی داشته باشید. این اتفاق برای سایت خبرگزاری ها رخ نمیده چون با تکنیک های روز از طریق کدهای CSS که چیدمان و استایل صفحه رو تعریف می کنند خودشون رو با رزولوشن و ابعاد صفحه تطبیق میدن. به طور خلاصه در حالت Responsive از اسکرول عرضی و زوم خبری نیست و همه چیز درشت نمایش داده میشن. برای تست ساده ترین حالتش کافیه خودتون با Notepad یک فایل متنی به شرح زیر بسازید:
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>تنظیم درگاه نمایش</h2>
<p>این مثال کار خاصی نمیکنه تنظیم نمایش</p>
</body>
</html>
بعد از ذخیره اگه پسوند فایل رو از txt. به htm. تغییر بدین و با مروگر بازش کنید شاهد نمایش ویژه ای خواهید بود. برای فهم موضوع در کامپیوتر در مروگر Chrome کلید F12 رو بزنید. در فرم مجاور کنار عبارت Element یک آیکون سوئیچ بین موبایل و دسکتاپ می بینید که میتونید حالت نمایش رو تغییر بدین. در موبایل هم داخل تنظیمات مرورگر بین حالت موبایل و دسکتاپ سوئیچ کنید.
تمام کارها رو اون تگ meta داره انجام میده که البته برای ایجاد یک پیج واکنشگرا با تمام عناصر مثل تصاویر، تکست باکسها یا کلیدها کفایت نمیکنه. ولی اگه همین تگ رو با تنظیمات داخلش از کدها حذف کنید متوجه ی تغییر میشد.
برای داشتن یک پیج کاملاً واکنشگرا مثلاً لازمه در استایل یک عکس هم عرض اون رو 100 درصد و ارتفاعش رو اتوماتیک بذاریم. یا تنظیم کنیم که از نظر عرضی عناصر مختلف در حالت موبایل چند درصد از صفحه رو بگیرن و بقیه ی اشیاء زیر اونها برن. علاوه برا اون مجموعه هایی از استایل های آماده برای صفحات نوشته شدن که امروز خیلی در ساخت نرم افزارها مورد استفاده قرار میگیرن و طیف وسیعی از تنظیمات رو در بر میگیرن که دیگه خود طراح وب لازم نیست دونه دونه برای هر عنصر استایل تعریف کنه و تنها به کلاسی که در اون مجموعه از قبل نوشته شده ارجاعشون میده. یکی از معروف ترین این استایل های آماده Bootstrap هست.
بوت استرپ که ترجمه اش چیزی شبیه "سرنخ" یا راه مفید میشه. چهار سال پیش مثل یک معجزه ظهور کرد و تا امروز که نسخه ی ۴ اون اومده بالای ۱۴ درصد از سایت های دنیا ازش استفاده میکنن! به طور خیلی ساده تعریفش اینه که تصور کنید شما به عنوان کسی که یک صفحه ی وب ساده ساختین یا حتا برنامه ی حرفه ای تحت وب نوشتین، دائم این دغدغه رو دارین که توی موبایل چطوری دیده میشه، توی تبلت چطور و حتا خود کامپیوتر. و بعد رویای اینکه بجای نوشتن صدها خط برای ساخت یک منوی ساده و رنگ آمیزی اون تنها تایپ کنید "منو-آبی" و اون بالا یه منو بیاد! همه ی اینها با افزودن فایل بوت استرپ کنار پروژه امکان پذیره. پدیده ای که گردانندگان سایت محبوب توئیتر برای اولین بار به دنیا هدیه کردن و استفاده ی اون رو از حالت اختصاصی خارج کردن!
اگر به مقوله ی طراحی نرم افزار یا رابط کاربری علاقه مند هستین، این ابزار مورد خوبی برای سرمایه گذاری و آموختن میتونه باشه.
#bootstrap #responsive #webdesign #skill
Bootstrap3.pdf
7.9 MB
آموزش بوت استرپ
در مورد واکنشگرایی مطلبی رو قرار دادیم و کتاب آموزش css رو هم برای دانلود گذاشتیم. حالا به مرحله ی جذاب استفاده از پرطرفدارترین فریم ورک طراحی یعنی Bootstrap رسیده ایم. طیف گسترده ای از الگوهای آماده ولی قابل ویرایش که تنها با یک دستور فراخوانی میشن و شما برای ایجاد یک منو که پیش از دهها خط HTML و CSS و جاوااسکریپت نیاز داشت، فقط به یک دستور بوت استرپ نیاز دارید!
#bootstrap #css #webdesign #book
در مورد واکنشگرایی مطلبی رو قرار دادیم و کتاب آموزش css رو هم برای دانلود گذاشتیم. حالا به مرحله ی جذاب استفاده از پرطرفدارترین فریم ورک طراحی یعنی Bootstrap رسیده ایم. طیف گسترده ای از الگوهای آماده ولی قابل ویرایش که تنها با یک دستور فراخوانی میشن و شما برای ایجاد یک منو که پیش از دهها خط HTML و CSS و جاوااسکریپت نیاز داشت، فقط به یک دستور بوت استرپ نیاز دارید!
#bootstrap #css #webdesign #book
Forwarded from Computer & IT Engineering
Bootstrap Davoodi-@Computer_IT_Engineering.rar
388.2 MB
آموزش پروژه محور طراحی وب سایت شرکتی واکنش گرا با بوت استرپ Bootstrap (فارسی) مهندس داوودی
📌 تمام جلسات + سورس کد یکجا در قالب فایل فشرده
#فیلم #ویدئو #برنامه_نویسی #کد #پروژه #طراحی_وب #وب #بوتسترپ #بوت_استرپ #واکنش_گرا
#Video #Programming #Code #Project #Web #Bootstrap #Responsive
@Computer_IT_Engineering
📌 تمام جلسات + سورس کد یکجا در قالب فایل فشرده
#فیلم #ویدئو #برنامه_نویسی #کد #پروژه #طراحی_وب #وب #بوتسترپ #بوت_استرپ #واکنش_گرا
#Video #Programming #Code #Project #Web #Bootstrap #Responsive
@Computer_IT_Engineering
MegaNavbar_v2_2_0_Advanced_Mega_Menu_for_Bootstrap_3_0_8516895_webdesigndl.rar
2.1 MB
کد مگامنو
کدی که در اینجا معرفی میشه دارای سایت اختصاصی و فروشی هست که برای اعضای این کانال رایگان منتشر میشه.
اگر نمیدانید چیست به منوهایی گفته میشه که به جای یک ردیف عمودی از گزینه های زیر هم که با اشاره بر یک گزینه از منوی افقی زیر اون باز میشه، یک باکس بزرگ از انواع لینک و تصویر و آیکون که کل عرض صفحه رو پوشونده ظاهر میشه.
این یکی از کاملترین نمونه های موجوده که راست چین هم داره و به راحتی قابل چسبوندن به انواع تکنولوژی ها و زبانهای برنامه نویسیه.
برای اینکه بیشتر ارزش کد بالا رو متوجه بشین، از نشانی زیر مگامنوی زیبا و بی رقیبی رو که کدش در اختیار شماست، یک بار در مد موبایلی و یک بار دسکتاپی تماشا کنید:
http://meganavbar.com
#bootstrap #webdesign #code
کدی که در اینجا معرفی میشه دارای سایت اختصاصی و فروشی هست که برای اعضای این کانال رایگان منتشر میشه.
اگر نمیدانید چیست به منوهایی گفته میشه که به جای یک ردیف عمودی از گزینه های زیر هم که با اشاره بر یک گزینه از منوی افقی زیر اون باز میشه، یک باکس بزرگ از انواع لینک و تصویر و آیکون که کل عرض صفحه رو پوشونده ظاهر میشه.
این یکی از کاملترین نمونه های موجوده که راست چین هم داره و به راحتی قابل چسبوندن به انواع تکنولوژی ها و زبانهای برنامه نویسیه.
برای اینکه بیشتر ارزش کد بالا رو متوجه بشین، از نشانی زیر مگامنوی زیبا و بی رقیبی رو که کدش در اختیار شماست، یک بار در مد موبایلی و یک بار دسکتاپی تماشا کنید:
http://meganavbar.com
#bootstrap #webdesign #code
Bootstrap4.pdf
9.2 MB
کتاب، فیلم و دوره های جالبی در مورد بوت استرپ یا سرنخ! براتون گذاشته ام که با یه سرچ ساده داخل کانال "کدنویس یکروزه" بهش میرسین.
#bootstrap #css
#bootstrap #css
Media is too big
VIEW IN TELEGRAM
واکنشگرایی یا Responsive pages
در دسترس ترین و ارزان ترین کامپیوترهای دنیا که بیشتر هم باهاشون کار میشه همین گوشی های هوشمند یا اسمارتفون ها هستن. معلومه که طراحی باید متناسب با اونها انجام بشه و موبایل فرندلی بودن اصل مهمیه.
#responsive #bootstrap #css
در دسترس ترین و ارزان ترین کامپیوترهای دنیا که بیشتر هم باهاشون کار میشه همین گوشی های هوشمند یا اسمارتفون ها هستن. معلومه که طراحی باید متناسب با اونها انجام بشه و موبایل فرندلی بودن اصل مهمیه.
#responsive #bootstrap #css
Bootstrap.Studio.5.5.1.x64.Portable.zip
121.2 MB
بوت استرپ استودیو
نسخه ی پرتابل و بی نیاز از نصب. در مورد این برنامه در ادامه فیلمی هم منتشر می کنم.
#bootstrap #webdesign
نسخه ی پرتابل و بی نیاز از نصب. در مورد این برنامه در ادامه فیلمی هم منتشر می کنم.
#bootstrap #webdesign
Media is too big
VIEW IN TELEGRAM
ایده ی ساخت اَپ زبان بدن
برنامه ای رو که باهاش کار کرده ام یعنی Expression web رو هم برای دانلود در کانال گذاشته ام. همچنین از یک تکنیک کتابخانه ی Bootstrap به نام Modal حرف میزنیم که استفاده ازش بسیار راحت و تنها با سرچ کد نمونه و درج اون در صفحه امکان پذیره.
#ide #webdesign #tools #bootstrap
برنامه ای رو که باهاش کار کرده ام یعنی Expression web رو هم برای دانلود در کانال گذاشته ام. همچنین از یک تکنیک کتابخانه ی Bootstrap به نام Modal حرف میزنیم که استفاده ازش بسیار راحت و تنها با سرچ کد نمونه و درج اون در صفحه امکان پذیره.
#ide #webdesign #tools #bootstrap
Button-generator.zip
79 KB
کلیدهای سفارشی Bootstrap
رنگ کلیدهای بوت استرپ محدود به ۵ رنگ یا همین حدوده.
یه سایت کد جالبی ارائه کرده که با زحمت زیاد به صورت آفلاین ذخیره اش کردم تا با سرعت خیلی بالا به هر رنگ دلخواه کلید بوت استرپی بسازیم!
اولین پارامتر برنامه اسم کلاسی هست که به رنگ اون کلید میدیم و هر جا این نام کلاس رو به کار ببریم به کلید مورد نظر دست پیدا خواهیم کرد.
کافیه فقط کدهای css رو که جنریت کرده به پروژه اضافه کرده باشیم.
#code #codegenerator #css #bootstrap
رنگ کلیدهای بوت استرپ محدود به ۵ رنگ یا همین حدوده.
یه سایت کد جالبی ارائه کرده که با زحمت زیاد به صورت آفلاین ذخیره اش کردم تا با سرعت خیلی بالا به هر رنگ دلخواه کلید بوت استرپی بسازیم!
اولین پارامتر برنامه اسم کلاسی هست که به رنگ اون کلید میدیم و هر جا این نام کلاس رو به کار ببریم به کلید مورد نظر دست پیدا خواهیم کرد.
کافیه فقط کدهای css رو که جنریت کرده به پروژه اضافه کرده باشیم.
#code #codegenerator #css #bootstrap