modal-design-in-web-design

روند طراحی پنجره مدال در طراحی وب سایت

روند طراحی پنجره مدال در طراحی وب سایت

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

اغلب سایت ها از مدال ها بعنوان (CTA (Call To Action استفاده می کنند. هرچند از مدال ها می توان برای هرگونه کاربردی بهره گرفت. امروزه در بسیاری از سایت ها از مدال ها جهت ثبت نام اولیه و موارد مشابه می توان استفاده نمود.
در زیر نگاهی به مدال ها و اینکه چگونه کار می کنند می اندازیم و همچنین بررسی می کنیم که چرا باید از آن ها استفاده نمود.

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

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

روند طراحی پنجره مدال در طراحی وب سایت

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

تکنیک های نمایش

اکثریت قریب به اتفاق مدال های پاپ اپ چند ثانیه پس از لود صفحه فرآخوانی می شوند. بیشتر کاربران حتی برای لحظه ای جهت خواندن مدال ها وقت ندارند. بنابراین، این روش بدترین روش نمایش مدال است مگر آن که برای چیزهایی مانند کوکی ها و یا adblock ها بکار روند.
در زیر به متداول ترین تکنیک ها اشاره خواهد شد:
– مدال های موجود در صورتی که کاربر موس را در صفحه رها کند، ظاهر شوند.
– مدال های زمان دار که بعد از x دقیقه/ ثانیه اجرا می شوند.
– مدال های موقعیتی که هنگامی که کاربر توسط اسکرول به محل مورد نظر می رسد اجرا می شوند.
مقایسه طراحی مدال با CSS و JS
پلاگین های جاوااسکریت دارای استایل و کنترل بسیار زیادی هستند، معمولا این نوع از پلاگین ها جهت استفاده پیشنهاد می شوند. هرچند CSS های خالص هم می توانند دارای سازگاری بیشتری باشند.

در زیر به تعدادی از مدال های جاوااسکریپتی گه همگی رایگان هستند اشاره شده است:
Lean modal
یک پلاگین jQuery، که جهت سفارشی سازی بسیار ساده می باشد. Lean Modalدارای یک کتابخانه کوچک می باشد که آنرا تقریبا برای استفاده در هرگونه سایتی مناسب می سازد، البته Lean Modal از embededd content ها و slide show ها پشتیبانی نمی کند، پس نتیجتا برای محتواهای پویا مناسب نمی باشد.

روند طراحی پنجره مدال در طراحی وب سایت

Remodal

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

روند طراحی پنجره مدال در طراحی وب سایت

Simple Modal

اگر در جستجوی پلاگین کم نظیر در ساخت و طراحی هستید این پلاگین مختص شما خواهد بود. این پلاگین در حال حاضر رایگان می باشد. البته میزان تیرگی پس زمینه صفحه زیاد مناسب نیست که می توان آنرا مطابق دلخواه سفارشی نمود. simple modal با embededd content، iframe، درخواست های Ajax و هرچه که شما نیاز دارید میتواند بخوبی کار کند.

روند طراحی پنجره مدال در طراحی وب سایت

اگر میخواهید از مدال های طراحی شده تنها با CSS استفاده کنید در زیر منابعی برای شما معرفی شده است:
content-marketing

۱۰ گافی که اکثرمان در بازاریابی محتوا مرتکب می‌شویم!

۱۰ گافی که اکثرمان در بازاریابی محتوا مرتکب می‌شویم! – آیا در بازاریابی محتوا دچار یکی از این ۱۰ اشتباه شد‌ه‌اید؛ اصل بازاریابی محتوا بسیار ساده است: محتوا مخاطب را جذب نموده و اعتماد او را جلب می‌کند و با گذر زمان، اعتماد منجر به خرید می‌­شود! عملی کردن این اصل در دنیای واقعی کمی سخت‌­تر از گفتن آن است. البته این بدان معنا نیست که این کار امکان‌پذیر نیست یا این که کسی تا به حال این کار را انجام نداده یا نمی‌­دهد. درواقع، بررسی­‌های جدید در مؤسسه بازاریابی محتوا نشان داده است که بازاریابان محتوا بیش از هر زمان دیگری شاهد نرخ بازگشت سرمایه (ROI) مثبت هستند؛ یعنی این‌که ما داریم تاثیرگذارتر می­‌شویم. ولی هنوز هم جای کار بیشتری هست و استراتژی محتوا بهترین جا برای شروع کار است. اما با این تفاسیر، کماکان می‌بینیم که بسیاری از وبسایت‌های ایرانی در بازاریابی محتوا دچار اشتباهات جبران‌ناپذیری می‌شوند که در نهایت به ضررشان تمام می‌شود. در این مقاله قصد داریم ۱۰ مورد از مهم‌ترین این اشتباهات را بررسی کنیم. با ما همراه باشید.

استراتژی محتوا یا Content Strategy تأثیر زیادی بر کار شما خواهد داشت؛ اگر سیاست‌گذاری شما درست باشد -حتی اگر در اجرای آن کمی هم ناموفق باشید- بازهم نتایج خوبی به دست خواهید آورد. اما با یک سیاست‌گذاری نادرست، حتی اگر همه چیز را هم موبه‌مو انجام دهید باز هم به جایی نخواهید رسید. به همین خاطر است که آنقدر بر روی سیاست‌گذاری تأکید داریم و باز هم به همین خاطر است که اشتباه در سیاست‌گذاری آنقدر آزاردهنده است. زیرا اشتباه در سیاست‌گذاری برای‌تان خیلی گران تمام خواهد شد و از طرفی به راحتی می‌توان از بروز چنین اشتباهاتی جلوگیری کرد. اگر شما هم دچار یکی از اشتباهات زیر شده‌اید، باید در استراتژی خود تجدید نظر کنید. ممکن است کمی در کارتان اختلال ایجاد کند اما در نهایت نتایج بهتری به دست خواهید آورد.

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

لذا برای یک بازایاب محتوا، شناخت مخاطب به اندازهٔ شناخت کسب‌وکارش اهمیت دارد. یعنی اگر مخاطب خود را نشناسید، درست مثل این است که دارید در تاریکی کار می‌کنید. شناخت مخاطب یعنی این‌که بدانید مخاطبان شما:

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

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

۲٫ به محتواهای فاخر اشراف کافی ندارید.
لازم است بررسی‌هایی انجام دهید تا بفهمید که در زمینهٔ کاری شما چه کسی بهترین محتواها را تولید می‌کند و چه کسی با مخاطبان شما بهتر رابطه برقرار می‌کند.

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

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

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

۴٫ انتظار دارید محتوای شما خودبه‌خود و بدون هیچ تلاشی «ویروس‌وار» پخش شود!
در حال حاضر، این موضوع مسئلهٔ مهمی در بازاریابی محتوا است؛ این حقیقت که بیش از ۵۰ درصد از کل مقالات منتشر شده، زیر ۱۰ بار به اشتراک گذاشته می‌شوند، شاهدی است بر این که باید برای انتشار محتوای خود بیشتر تلاش کنیم. انتشار محتوا موارد زیادی را در بر می‌گیرد که فقط چند مورد از مهم‌ترین آن‌ها عبارتند از:
– اطلاع رسانی انتشار مقاله جدید از طریق ارسال خبرنامهٔ ایمیلی.
– به اشتراک‌گذاری مطالب جدید منتشر شده، در رسانه‌های اجتماعی.
– پرداخت هزینه و سرمایه‌گذاری برای انتشار هرچه بیشتر محتواهایی که به خوبی مخاطبین را به خود جذب می‌کنند.
– دسترسی به مخاطبان پرنفوذ و تاثیرگذار -یا تقریباً پرنفوذ- به این امید که آن‌ها محتوای شما را با مخاطبان خود به اشتراک بگذارند.

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

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

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

۶٫ در مورد زمان دست‌یابی به نتایج، انتظارات غیرواقعی دارید.
بازاریابی محتوا کار آدم‌های کم‌حوصله نیست. حتی در حالت خوش‌بینانه، باید ۶ تا ۱۸ ماه صبر کنید تا شاهد نتایج کار باشید. به کلمهٔ خوش‌بینانه خوب توجه داشته باشید. حقیقت این است که در بازاریابی محتوا ۲ یا ۳ سال وقت گذاشتن برای دستیابی به نتیجهٔ دلخواه، اصلا موضوع عجیبی نیست.

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

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

۷٫ محتوای خود را در قالب‌های مختلف ارائه نمی‌دهید.
تولید محتوای خوب هزینه‌بر است و این همه هزینه برای این نیست که فقط یک بار مورد استفاده قرار گیرد. مثل این است که لباس بسیار گران قیمتی را بخرید اما فقط یک بار آن را بپوشید.

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

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

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

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

۹٫ بیشتر محتواهای شما فقط در رابطه با یک مرحله از فرآیند مشتری‌سازی است.
این اشتباهی است که به سادگی می‌توان به آن دچار شد به ویژه اگر موفقیت محتوای خود را بر اساس تعداد اشتراک‌گذاری می‌سنجید و نه بر اساس تأثیر واقعی آن! فرآیند مشتری‌سازی شبیه به یک قیف است. محتواهای بخش بالایی این قیف، برای طیف زیادی از مردم جذاب است و بیشتر به اشتراک گذاشته می‌شود. نوشتن چنین محتواهایی نیز معمولاً جالب است. بنابراین تمایل به تولید چنین محتواهایی بیشتر از هر نوع محتوای دیگری است (مثلا می‌توان مقالات زرد در وب فارسی را مد نظر قرار داد).

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

مثلاً اگر فقط سه نوع خریدار داشته باشید و برای فرآیند مشتری‌سازی ۳ مرحله قائل شوید، حداقل نیاز به نُه محتوای متفاوت خواهید داشت. اگر برای هر کدام از این شخصیت‌ها و برای هر مرحله، ۳ قالب مختلف محتوا (مثلاً پست وبلاگی، کتاب الکترونیکی و ویدئو) در نظر بگیرید، نیاز به ۲۷ محتوا خواهید داشت. آیا می‌توانید یک محتوای واحد برای هر ۲۷ وضعیت تولید کنید؟

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

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

منبع: دوران دات نت

optimization-images

بهینه سازی تصاویر با نرم افزار فتوشاپ برای وب

بهینه سازی تصاویر با نرم افزار فتوشاپ برای وب – در این آموزش به همراه شما قصد داریم به بررسی راه حلی بپردازیم که توسط آن می توانید تصاویری که قصد استفاده در وب دارید را بهینه سازی نموده و با استفاده از نرم افزار فتوشاپ حجم چشمگیری از آن را کاهش دهید.
شاید شما نیز یک وب سایت داشته باشید و قصد دارید تصاویری را برای مطالب نوشته شده در وب سایت خود قرار دهید. شاید مسئله حجم زیاد عکس ها و تصاویر شما را آزار می دهد!
یکی از بزرگتیرین مشکلاتی که حجم بالای تصاویر ایجاد خواهند نمود، این است که باعث کند شدن سرعت بارگذاری صفحه مطلبتان خواهد شد و در برخی موارد نیز تعدد بالای تصاویر فضای بالایی را از حجم هاست میزبانی کننده وب شما اشغال می نماید. استفاده از این تصاویر ضروری است و حتما می دانید که نمیتوان به مقدار بسیار زیادی از حجم این تصاویر کم نمود. در این آموزش به همراه شما قصد داریم به بررسی را ه حلی بپردازم که توسط آن می توانید تصاویری که قصد استفاده در وب دارید را بهینه نموده و حجم چشمگیری از آن را کاهش دهید تا هر نوع مشکل احتمالی برای وب شما به حداقل ممکن برسد.
در ابتدا تصویر مورد نظر خود را توسط برنامه محبوب و کاربردی فتوشاپ باز کنید.
سپس از سربرگ File گزینه Save for Web را انتخاب کنید.
بهینه سازی تصاویر با نرم افزار فتوشاپ برای وب

البته کلید میانبری نیز برای انتخاب این گزینه در نظر گرفته شده است. شما میتوانید با استفاده از کلید ترکیبی Alt+Shift+Ctrl+S این کار را به سادگی انجام دهید. حال پنجره زیر که برای عملیات ذخیره سازی استفاده می شود باز خواهد شد.

بهینه سازی تصاویر با نرم افزار فتوشاپ برای وب

گزینه های پر کاربرد در ذخیره سازی تصویر وب عبارتند از
۱- کادر انتخاب فرمت تصویر:
با کلیک بر روی این کادر فرمت های ذخیره سازی تصویر برای شما نمایش داده خواهد شد. بهترین و بهینه ترین فرمت تصویر فرمت JEPG میباشد. در این آموزش ما بهینه کردن تصویر با این فرمت را مد نظر قرار داده ایم.
۲- Quality: با کلیک بر روی فلش کوچک کناری این گزینه نوار تنظیم کیفیت در اختیار شما قرار خواهد گرفت که میتوانید درصد کیفیت تصویر را انتخاب کنید. اگر قصد کم کردن حجم تصویر برای وب را دارید، بهترین در صد انتخابی بین ۶۰ تا ۷۵ میباشد. البته کیفیت ۷۵ تصویر بهتری را در اختیار شما قرار خواهد داد. دقت کنید که انتخاب کیفیت پایین شاید تصویر بهینه تری در اختیار شما قرار دهد، اما کیفیت بصورت چشمگیری کاسته خواهد شد. بطوری که تصویر زیر حجم و وضوح تصویر انتخابی را در حالت اصلی و حالت تنظیم شده ۷۵ بصورت مقایسه ای و در یک پنجره نمایش می دهد.

بهینه سازی تصاویر با نرم افزار فتوشاپ برای وب

راه دیگر تنظیم کیفیت تایپ درصد دلخواه در کادر Quality میباشد.
۳- کادر پیش نمایش: در این کادر پیش نمایشی از تصویر به شما اراده خواهد شد. در زیر این کادر حجم تصویر درج میگردد.
شما قادر خواهید بود تا نمایش تصویر در حالت اصلی و بهینه شده را در این کادر مشاهده نمایید. برای این کار کافیست از گزینه های قرار داده شده در بالای کادر پیش نمایش تصویر استفاده کنید.
۴- این گزینه ها عبارتند از:
Original: با انتخاب این گزینه تصویر در حالت اصلی (بدون بهینه سازی) نمایش داده خواهد شد.
Optimize: با انتخاب این گزینه تصویر پس از بهینه شدن (با انتخاب درجه کیفیت) نمایش داده میشود.
۲UP: از این گزینه برای نمایش تصویر اصلی و تصویر بهینه شده در بالا و پایین هم استفاده میشود. تصویر اصلی در بالا و تصویر بهینه شده در پایین قرار خواهند گرفت.
۴UP: از این گزینه برای نمایش تصویر در چهار کیفیت متفاوت بهینه شده استفاده میگردد. بالاترین تصویر، تصویر اصلی و به ترتیب تا پایین ترین تصویر از کیفیت تصویر کاسته و بهینه تر میگردد.
در نهایت بواسطه گزینه های توضیح داده شده در بالا، تصویر خود را به مقدار لازم بهینه نموده و با کلیک بر روی دکمه Save که در پایین این کادر قرار دارد (۵) اقدام به ذخیره سازی تصویر بهینه شده در محل دلخواه خود کنید.
امیدوارم این آموزش مورد توجه شما عزیزان قرار گرفته باشد.

منبع: دوران دات نت

html5-display

آشنایی با قابلیت های جدید در HTML5 و کاربردهای آن

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

آشنایی با قابلیت های جدید در HTML5 و کاربردهای آن

کلاس معنایی (Semantics)
معنا بخشیدن به ساختار HTML در مرکز HTML5 قرار دارد. مجموعه جدیدی از تگ های معنایی به HTML5 افزوده شده است و همین طور به همراه RDFa، Microdata و Microformats وب مفیدتری بر پایه داده برای برنامه ها و کاربران ایجاد می کند.

برای نمونه تگ هایی مثل section، article، footer، header و nav برای چنین منظوری تدارک دیده شده اند. با تگ article قسمتی که محتوا و مطلبی مانند یک مقاله قرار دارد را می توان مشخص کرد. با استفاده از nav می توان لینک های ناوبری سایت (navigation) را از سایر قسمت ها متمایز کرد.
همین طور Microdata که پروتکل مجزایی از HTML5 برای افزودن داده ساختاریافته به صفحه وب است بیشتر حول HTML5 توسعه یافته است.

کلاس ذخیره سازی و برنامه آفلاین (Offline & Storage)
این یکی از ویژگی هایی است که در نوع خود یک تحول بزرگ در صفحات و برنامه های تحت وب به شمار می رود. با به کار گیری ویژگی های این دسته، برنامه های وب سریعتر کار می کنند و حتی می توانند بدون اتصال به اینترنت به کار خود ادامه دهند. امکاناتی که در این رده به HTML افزوده شده اند عبارتند از:
HTML5 App Cache
Local Storage
Indexed DB
File API
تعدادی از این ویژگی ها این امکان را ایجاد می کنند که یک صفحه وب در یک مرورگر بتواند داده های خود را ذخیره و نگهداری کند و بتواند به صورت آفلاین کاری را انجام دهد و سپس در اتصال بعدی به اینترنت مجددا خود را با برنامه موجود در سرور به روز کند.

کلاس دسترسی به دستگاه ها (Device Access)
با استفاده از API موقعیت جغرافیایی که HTML5 ارائه می کند (Geolocation API) برنامه های وب می توانند ویژگی های غنی تر و آگاه تری نسبت به دستگاه کاربر ارائه کنند.
با اجازه کاربر، برنامه نویس می تواند اطلاعات موقعیت مکانی کاربر را دریافت کند و با توجه به این داده ها، موقعیت جغرافیایی کاربر را در اطلاعاتی که در صفحه به او ارائه می دهد تاثیر بدهد. برنامه نویس می تواند با استفاده از JavaScript به این داده ها دسترسی بیابد.

کلاس اتصال (Connectivity)
اتصالی که بسیار بهینه تر هست به معنی یک چت همزمان تر، بازی های سریعتر و ارتباطات بهتر است. سوکت های وب (Web Sockets) داده ها را به شکل بهینه تری نسبت به قبل بین کلاینت و سرور رد و بدل می کنند.
پروتکل وب سوکت یک ارتباط کاملا دو طرفه بین کلاینت و برنامه سمت سرور فراهم می کند. با استفاده از این API در جاوا اسکریپت می توانید این ارتباط را در کلاینت مدیریت کنید.

کلاس چند رسانه ای (Multimedia)
عبارت جالبی که در این باره بیان می شود این است که audio و video به شهروندان درجه اول HTML5 تبدیل می شوند. یعنی همانطور که قبلا تصویر img در گذشته به صورت پیش فرض پشتیبانی می شد از صوت و ویدئو نیز پشتیبانی می شود.
بنابراین با HTML5 تگ های audio و video نیز به مجموعه تگ های تولید صفحه وب افزوده می شوند و نیازی به استفاده از راه حل های دیگر با فلش یا جاوااسکریپت برای نمایش صدا و تصویر ندارید.

کلاس گرافیک و افکت (Graphics & Effects)
پیش از این برنامه نویسان وب برای جلوه های بصری در صفحات وب دچار محدودیت زیادی بودند. نهایتا از CSS، و جاوا اسکریپت و یا پلاگین هایی نظیر فلش برای مقاصد خود بهره می بردند ولی اکنون با با استفاده از SVG، canvas، WebGL و ویژگی های CSS3 می توانید کاربران خود را با جلوه های بصری شگفت زده کنید.
برای نمونه در CSS3 امکانات جالبی برای ساخت حرکت های ساده و حتی انیمیشن تعبیه شده است. تگ canvas تگ جدیدی است که برای رسم گرافیکی از آن در صفحات وب استفاده می شود. SVG نیز یک فرمت گرافیکی وکتور بوده است که اکنون HTML5 از آن به صورت درون متنی (inline) پشتیبانی می کند.

کلاس کارآیی و یکپارچه سازی (Performance & Integration)
در این دسته امکان تولید نرم افزار های وب و صفحات داینامیک به شکل سریعتری با به کارگیری تکنیک ها و تکنولوژی هایی نظیر Web Worker و XHR 2 فراهم شده است. کاربران در این صورت تجربه بهتری در کار با نرم افزار های تحت وب خواهند داشت که اکنون پاسخگویی و واکنش بهتری دارند.
برای نمونه با استفاده از worker ها می توان کدهایی را با جاوا اسرکیپت اجرا کرد که بتوانند به صورت همزمان در حال اجرا باشند ولی کار بازدید کننده با صفحه را متوقف نسازند.

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

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

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage

web-design-trends

طراحی صفحات در سال ۲۰۱۷ – قسمت دوم

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

الگوهای جدید منوبار (نوار راهنما)

هیچ اجباری برای قرار دادن منوها فقط در بالای صفحه وجود ندارد. امسال می توانید نوار راهنمای سایت خود را به طور خلاقانه، هر طور که تمایل داشتید در وب سایت خود به کار بندید، مثلا به صورت pop-out در کنار یا زیر وب سایت خود قرار دهید.

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

واقع گرایی بیشتر

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

طراحی سایت برای نمایشگرهای کوچک

طراحی صفحات در سال 2017 - قسمت دوم

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

منبع: دوران دات نت

new-webDesign-2017

طراحی صفحات وب در سال ۲۰۱۷ – قسمت اول

برای نو کردن وب سایتتان در سال ۲۰۱۷ آماده باشید!

ابتدای هر سال زمان بسیار مناسبی برای بررسی طراحی های انجام شده در سال گذشته و همچنین پروژه های جدید است.

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

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

 گرادیانت ها
صرف نظر از طراحی های تمام صفحه وب سایت ها در این چند سال اخیر، استفاده از گرادیانت ها در این سال کاربرد بسیار زیادی خواهد داشت و استفاده از رنگ ها در سایت ها به سمت بکار بردن رنگ های شفاف گرایش پیدا خوهد کرد. آیکن های ios در اپل یک نمونه اولیه از گرادیانت ها بودند، اما امروزه گرادیانت ها در حال حرکت به سمت کاربردهای گسترده تر هستند. محبوب ترین کاربرد گرادیانت، استفاده از دو لایه گرادیانت رنگی بروی عکس هاست. استفاده از این روش یک راهکار عالی برای ایجاد تغییری شگفت انگیز در شکل ظاهری عکس ها می باشد.  همچنین می توان از آن ها برای یک بخش خاص از تصاویر استفاده نمود.
پارالاکس 
استفاده از پارالاکس ها در سال ۲۰۱۶ بسیار متداول بود که نشان دهنده ایده ی خلاقانه آن بوده و همچنان در سال ۲۰۱۷ در وب سایت ها استفاده خواهند شد و جلوه های خیال انگیز تری نیز برایشان بکار خواهد رفت. در روند تکاملی، از آن جا که طراحی وب سایت ها به سمت طراحی های پویا و واقع گرایانه در حرکت است و پارالاکس ها از قاعده مستثنی نخواهند بود و به جهت واقع گرایانه بودن پارالاکس ها، استفاده از آن ها در این سال رو به افزایش خواهد بود.
سادگی
طراحان سایت در حال تغییر وب سایت های شلوغ و پرمحتوا در این سال جدید هستند که تا پیش از این از محبوبیت بالایی برخوردار بودند. بیشتر طراحان در حال حاضر سایت هایی با صفحه اصلی ساده را می پسندند. در این صفحات اطلاعات بصورت زیر هم قرارگرفته و برای مشاهده آن ها می بایست اسکرول انجام شود. ایده اسکرول زیاد از بالا به پایین از  آن جایی مطرح شد که خوشبختانه کاربران به انجام اسکرول در صفحات نمایش کوچک عادت کرده اند و لذا می توان صفحاتی خلوت را طراحی نمود که در هر اسکرول اطلاعاتی را به کاربر منتقل می نماید.
what-is-jquery

بررسی کتابخانه جی کوئری (jQuery) و کاربرد آن

جی کوئری jQuery یک کتابخانه کم حجم می باشد که به زبان جاوااسکریپت نوشته شده است. این کتابخانه در سال ۲۰۰۶ انتشار ابتدایی آن آغاز شد و امروزه تقریباً تمام سایت های دنیا از آن استفاده می کنند.
این کتابخانه باعث می شود کدنویسی ما بسیار سریع تر باشد و به جای استفاده از جاوااسکریپت خالص، استفاده از جی کوئری موجب سرعت کدنویسی ما می شود.
ویژگی های جی کوئری jQuery
  1. دسترسی به عناصر موجود در پرونده و تغییر در آنها.
  2. کنترل آسان و قدرتمند تر رویدادها (Event).
  3. تغییر در CSS.
  4. ایجاد افکت و حرکات انیمیشین.
  5. توسعهٔ افزایه‌ها.
  6. تولیدِ برنامه‌های کوچکِ سودمند.
برای استفاده باید جاوااسکریپت را بلد باشیم
درست است که جی کوئری موجب آسان شدن کدنویسی جاوااسکریپت می شود اما به آن مفهوم نیست که ما نیازی به جاوااسکریپت (javascript) نداریم. اما وجود متد (method) و رویداد (Event) و توابع از پیش تعریف شده، باعث سرعت و سهولت کدنویسی ما خواهند شد. جاوااسکریپت حجم کمی دارد اما برای آنکه حجم آن کمتر هم باشد بهتر است از نسخه minify آن استفاده کنیم که در واقع این نسخه با حذف فواصل، کوتاه شدن اسامی، حتی حذف خطوط، باعث شده است که حجم آن بسیار کمتر شده و به زیر صد کیلوبایت برسد.
ورژن های جی کوئری
جی کوئری چند ورژن اصلی و چندین ورژن فرعی دارد. نسخه سوم آن نیز روی وبسایت آن قابل دریافت می باشد. نکته مثبت جی کوئری هماهنگی با همه مرورگرهاست و حتی با استفاده از برخی نسخه های آن می توانیم در ورژن های نسبتاً پائین مرورگر internet explorer نیز از آن استفاده کنیم. در نسخه جدید آن نیز یک سری قابلیت جدید به آن اضافه شده است که جزئیات آن را می توان در وبسایت رسمی آن مشاهده کرد. همچنین وب سایت رسمی جی کوئری یک رفرنس بسیار مناسب برای مطالعه و آموزش آن نیز می باشد هرچند که وبسایت های زیادی نیز آموزش های خوبی به زبان فارسی و انگلیسی ارائه کرده اند.
مختصر و مفید
جی کوئری یک کتابخانه کم حجم به زبان جاوااسکریپت است که تقریباً تمام سایت های دنیا از آن استفاده می کنند. این کتابخانه محبوب ترین کتابخانه جاوااسکریپت می باشد که دارای منابع آموزشی مناسب بسیاری می باشد.
search-engine-optimization

اهمیت سئو (SEO) یا بهینه سازی برای موتورهای جستجو

اهمیت سئو (SEO) یا بهینه سازی برای موتورهای جستجو

what-is-SEO

مقدمه ای برای بهینه سازی

واژه سئو SEO مخفف Search Engine Optimization که معنای لغوی آن بهینه سازی برای موتورهای جستجو می باشد. این بهینه سازی ها می تواند عوامل زیادی از نظر کمی و کیفی را شامل شود. سئو شامل ابزارهایی گوناگونان برای پیشرفت در موتورهای جستجو می باشد. موتورهای معروف جستجو مانند گوگل، یاهو، بینگ و … اطلاعات وبسایت ها را به مرور زمان در پایگاه داده خود قرار می دهند و این اطلاعات هنگامی که توسط کاربران در این موتورهای جستجو سرچ می شود، نمایش داده می شوند. یک بهینه سازی خوب موجب این می شود که در صفحات بالاتر موتورهای جستجو قرار بگیریم و عملاً یک تبلیغ رایگان را در بهترین ابزار آنلاین دنیا قرار دهیم.

اهمیت بهینه سازی

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

بهینه سازی داخلی سایت on page SEO

همانگونه که از نام آن مشخص است، بهینه سازی های مربوط به داخل وب سایت را شامل می شود. این بهینه سای ها می تواند شامل کلمات کلیدی (Keywords)، تگ عنوان سایت (Title tags)، تگ عنوان مطالب (H tags)، بهینه سازی محتوای سایت (Content optimization)، ساختار آدرس ها (SEO-Friendly URLs)، لینک های داخلی (Internal anchors)، بهینه سازی تصاویر و … می باشد.

بهینه سازی خارجی سایت off page SEO

این بخش از سئو مربوط به بهینه سازی های خارج از وب سایت شما می باشد و حتما بایستی بعد از انجام مراحل بهینه سازی داخلی  سایت باشد. این موارد می توانند شامل: راه اندازی شبکه های اجتماعی و فعالیت در آنها و همچنین لینک دادن آن ها در وبسایت، لینک سازی، استفاده از ابزارهای آنلاین مانند moz و  majestic seo و schema، استفاده از تبلیغات در سایت های مرتبط و … را شامل می شود.

مختصر و مفید

فراموش نکنیم که در بهینه سازی باید مطالب را برای کاربران بنویسیم و نه برای موتورهای جستجو. درج محتوای مناسب، سرعت مناسب سایت، استفاده از فریم ورک های هوشمند سازی (Responsive framework) برای نمایش مناسب در تبلت ها و گوشی هوشمند، استفاده از تصاویر بهینه شده و سبک، نکات مهمی هستند که باید در بهینه سازی به آنها توجه کنیم.
bootstrap-framework

بوت استرپ چیست و چه کاربردهایی دارد؟

بوت استرپ چیست و چه کاربردهایی دارد؟

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

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

بوت استرپ در سال ۲۰۱۰ توسط مارک اُتو (Mark Otto) و جاکوب تورنتون (Jacob Thornton) ساخته شد که هردو در شرکت توییتر به عنوان طراح و توسعه دهنده مشغول به کار بودند. بوت استرپ پس از استفاده توسط توسعه دهندگان و طراحان سرانجام یه عنوان یک پروژه متن باز و رایگان در آگوست ۲۰۱۱ به دنیا معرفی شد. آخرین نسخه بوت استرپ همواره در سایت GitHub و همچنین در وب سایت رسمی بوتسترپ به صورت رایگان برای دانلود موجود می باشد.

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

چارچوب HTML- CSS- JS

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

واکنشگرایی

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

در زیر به اختصار لیستی از مزایا و ویژگی های بوت استرپ آورده شده است:

– واکنش گرایی

– طراحی مستحکم

– استفاده آسان 

– سازگاری با انواع مرورگرها 

– متن باز

منبع: دوران دات نت

Responsive-Webdesign

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

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

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

responsive-web-design-resolution

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

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

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

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

منبع: دوران دات نت