فریم ورک در طراحی سایت

فریم ورک (Framework) چیست ؟

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

فریم ورک چیست ؟

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

 

فریم ورک در طراحی سایت

 

در دنیای طراحی سایت ، برای اینکه یک تعریف قابل فهم تر ارائه کنم ، فریم ورک یک فایل است که محتوای آن مجموعه ای از کدها و اسکریپت ها در زبان های مختلف توسعه وب سایت از جمله HTML , CSS , JS , PHP , … می باشد که می توان از این کدهای آماده برای حل کردن برخی مشکلات و دشواری های توسعه وب سایت استفاده کرد و یا حتی یک وب سایت را به طور کامل با استفاده از آن ها ایجاد و راه اندازی کرد .

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

چند نوع فریم ورک به طور کلی وجود دارد ؟

به طور کلی می توان فریم ورک ها را به دو دسته تقسیم کرد : فریم ورک های توسعه Back-end و فریم ورک های توسعه Front-end وب سایت .
این مسئله خیلی مهم است که ما بدانیم فریم ورک های یک ایده مفهومی هستند : یک کیت (ابزار) استاندارد از پیش آماده شده برای استفاده و پیش برد کار . مفهوم یک فریم ورک می تواند برای پروسه های متفاوت در بستر وب مورد استفاده قرار گیرد : مثلا در لایه برنامه نویسی که با استفاده از زبان PHP وب سایت را به دیتابیس متصل می کنیم و محتوا و داده های موجود را در صفحات سایت به نمایش در می آوریم ؛ یا در لایه طراحی که با باید با استفاده از اسکریپت HTML به همراه استایل هایی که با CSS برای آن تعریف کردیم ، محتوای سایت را به زیبایی در انواع بروزرها برای کاربران به نمایش بگذاریم .

فریم ورک های مربوط به توسعه Front-end (فریم ورک های CSS)

فریم ورک های front-end معمولا متشکل از بسته های شامل فایل های ساختاری و فولدرهای حاوی کدهای استاندارد شده (HTML , CSS , JS , …) هستند .

اجزاء این فریم ورک ها به طور معمول

  • منبع کد CSS برای ایجاد یک گرید (grid) : این تکه کد به توسعه دهنده اجازه می دهد تا عناصر مختلف صفحه وب سایت را به راحتی و آنگونه که می خواهد به صورت جدول مانند چیدمان کند .
  • تعریف استایل های تایپوگرافی برای عناصر HTML
  • ارائه راه حل هایی برای مواردی از اسکریپت ها که در بروزرها پشتیبانی نمی شوند تا استایل سایت آنگونه که مد نظر طراح است در هر بروزری دیده شود .
  • ایجاد کلاس های استاندارد CSS که می توان از آن ها برای استایل دادن به اجزاء واسط کاربری (UI) به طور پیشرفته استفاده کرد .

 

فریم ورک در طراحی سایت

 

درباره فریم ورک های ریسپانسیو : اخیرا تکنیک های طراحی سایت ریسپانسیو – روشی که در آن توسعه دهنده وب سایت با تعریف ابعاد مختلف نمایشگرها توسط مدیا کوئری ها (media query) در CSS سایت ، سایت را اصطلاحا واکنش گرا یا mobile-friendly می سازد – به قدری افزایش داشته که توسعه دهندگان برای راحتی کار یک سری فریم ورک ریسپانسیو ایجاد کرده اند . به این طریق طراحی سایت ریسپانسیو نیز با استفاده از راه حل های ارائه شده توسط این فریم ورک ها ، بسیار ساده تر قبل شده است .

انتخاب فریم ورک (به تناسب نیاز پروژه) در طراحی سایت

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

فریم ورک های ساده CSS

به آن ها گرید سیستم (grid system) نیز گفته می شود . آن ها استایل هایی با سیستم ستونی ارائه می کنند تا توسعه دهنده با توجه به طرح سایت ، عناصر صفحه را مانند عناصر یک جدول چیدمان کند .

چند نمونه از این فریم ورک های گرید سیستم عبارت اند از :

۱۱۴۰ CSS Grid , Golden Grid System , Mueller Grid System , Responsive Grid System Graham Miller , Titan , Responsive Grid System Denis LeBlanc , Less Framework 4 , Gridiculo , Columnal , Toast , Ingrid , 960 Grid System , Base , Susy , …

فریم ورک های کامل در بحث طراحی سایت

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

چند نمونه از این فریم ورک های کامل عبارت اند از :

BootStrap , Foundation 3 , Skeleton , YAML 4 , Tuktuk , Gumby , Kube , Groundwork , ResponsiveAeon , …

چگونه از بین این همه فریم ورک ، مورد مناسب را انتخاب کنیم ؟

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

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

اگر این موارد را در نظر بگیرید ، احتمالا راحت تر می توانید در مورد انتخاب فریم ورک تصمیم بگیرید :

  • سرعت بارگذاری و راحتی در استفاده
  • راحتی در فهم عملکرد آن
  • گزینه هایی که به شما ارائه می کند
  • سازگاری با سیستمی که از آن استفاده می کند
  • ارائه پشتیبانی بلند مدت (long-term support) بهتر

آیا استفاده از فریم ورک در طراحی سایت توصیه می شود ؟

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

منبع : سئو سایت وب نوش

قالب سایت وردپرسی

چند اشتباه رایج در نوشتن اسکریپت CSS قالب سایت وردپرسی

چند اشتباه رایج در نوشتن اسکریپت CSS قالب سایت وردپرسی : یکی از سیستم های مدیریت محتوا (CMS : Content Management System) که امروزه بسیار مورد استقبال برای ساخت و طراحی سایت قرار گرفته است ، هسته وردپرس (WP : WordPress) می باشد . با وجود ازدیاد قالب های آماده و موجود برای سایت های وردپرسی ، یافتن یک قالب برای سایت خود دیگر کار دشوار و چالش برانگیزی نیست . تنها کافیست تا از طریق وب سایت های دانلود قالب وردپرسی ، یک پوسته (Theme) قالب مناسب برای سایت خود انتخاب کنید و با استفاده از صفحه مدیریت (dashboard) وردپرس ، به سلیقه دلخواه و طرح مورد نیاز سایتتان آن قالب را سفارشی سازی (customize) کنید که این امر یکی از مزایای سیستم وردپرس است . اما این همه کار نیست ، بلکه شما می بایست دارای دانش استفاده از تکنولوژی اسکریپت CSS نیز باشید . در این مقاله ، به چند مورد از استباهات رایجی که توسط توسعه دهندگان سایت های وردپرسی رخ می دهد ، به ویژه در نوشتن استایل های CSS سایت ، خواهیم پرداخت . مطمئنا با برطرف سازی این نواقص کار با CSS می توانید تجربه طراحی سایت موفق با هسته وردپرس را تجربه کنید .

 

 قالب سایت وردپرسی

تعریف و مفهوم سفارشی سازی قالب سایت وردپرسی

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

حال به سراغ بررسی آن اشتباهات رایج در اصلاح ، سفارشی سازی و یا نوشتن از اول فایل استایل های CSS قالب سایت وردپرسی خواهیم رفت :

۱٫    کم توجهی به قواعد زمینه ای در مورد انتخابگرها (Selectors)

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

{property: value; property:value;}

برای مثال ، اگر می خواهید یک متن از سایت خود را راست چین کنید و همچنین بخواهید که آن متن با رنگ آبی به نمایش در بیاید ، نوشتن چنین استایلی در فایل CSS مشابه اسکریپت زیر خواهد بود :

p {
text-align: right;
color: blue;
}

آنچه که بسیار حائز اهمیت است ، توجه به نوع نوشتار (Syntax) استایل ها از جمله توجه به سمی کالن (semi-colon) ، دونقطه (colon) و جایگاه باز و بسته شدن براکت ها می باشد .

۲٫    دقت نکردن به مسئله پشتیبانی بروزر (Browser Support) و باگ های آن

از آنجایی که کاربران با بروزرهای مختلف از سایت های موجود در فضای وب بازدید می کنند ، بنابراین قطعا ملزم می شویم تا در نوشتن استایل های CSS قالب سایت وردپرسی ، تمام استانداردهای این تکنولوژی را در نظر بگیریم و رعایت کنیم . در اینجا لیستی از مشکلات اجرایی فایل CSS بر روی بروزرها ، در صورتی که به مسئله سازگاری اسکریپت های شما با انواع بروزر (Browser-Support یا Browser-Compatibility) توجه کافی نداشته باشید ، را برای شما آماده کرده ام :

  • بهم ریختن متن روی لینک در صفحه وب سایت
  • بهم ریختن متن صفحه هنگامی که کاربر صفحه را پیمایش (scroll) می کند .
  • چیدمان (layout) صفحه در بروزرهای مختلف به طور یکسان دیده نخواهد شد .
  • تمام جلوه هایی که در نسخه جدید تکنولوژی CSS به آن اضافه شده است ، در پوسته قالب سایت وردپرسی شما در اغلب بروزرها به نمایش در نمی آیند .

۳٫    نوشتن اشتباه اصطلاحات مهم اسکریپت CSS

دانستن املای صحیح (Syntax) نوشتار اسکریپت های CSS یکی دیگر از موارد بسیار مهمی است که هر طراح وب سایت باید آن ها را بلد باشد . برای مثال ، نوشتن اشتباهی مقدار ۱۰ pc به جای ۱۰ px برای یک مشخصه (property) می تواند به کلی چیدمان صفحه را بهم بریزد . در مورد بررسی املای عبارت های CSS می توانید از ادیتورهای موجود نیز بهره ببرید .

۴٫    انتخاب نادرست ماژولی که قصد ویرایش آن را دارید

هنگام سفارشی سازی قالب سایت وردپرسی ، باید بسیار دقت داشته باشید که ماژولی که انتخاب کرده اید در حال ویرایش آن هستید ، همان ماژولی است که مد نظر داشتید . مثلا می خواهید استایل بخش comments.php را ویرایش کنید ، اما به اشتباه فایل comments-popup.php را انتخاب کرده اید . حتما پیش از ویرایش هر فایل ، یک فایل پشتیبان از آن را ذخیره کنید که اگر فایل را به اشتباه ویرایش کردید ، به راحتی بتوانید آن را بازیابی کنید .

۵٫    نداشتن اطلاعات صحیح درباره محل بارگذاری فایل ها

به عنوان یک توسعه دهنده وب ، باید بدانید که استایل ها و سایر فایل های قالب سایت ، به ویژه در وردپرس ، در کدام قسمت از سرور باید بارگذاری بشوند . مثلا فایل استایل های قالب سایت وردپرسی در فولدری به نام style.css باید قرار بگیرند .

نتیجه گیری نهایی درباره اشتباهات رایج توسعه دهندگان در نوشتن اسکریپت CSS قالب سایت وردپرسی

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

منبع : سئو سایت وب نوش

طراحی سایت ریسپانسیو

تفاوت های بین روش طراحی سایت ریسپانسیو (واکنش گرا) و طراحی سایت آداپتیو (انطباقی) – بخش دوم

تفاوت های بین روش طراحی سایت ریسپانسیو (واکنش گرا) و طراحی سایت  انطباقی ( آداپتیو ) – بخش دوم : همانطور که بخش اول این مقاله ذکر شده ، برای طراحی کردن سایتی که قابلیت پشتیبانی از نمایشگرهای دستگاه های مختلف را داشته باشد ، اصطلاحا multi-device friendly باشد ، از یکی از دو روش طراحی سایت ریسپانسیو یا طراحی سایت آداپیتو استفاده می کنیم . در بخش اول این مطلب تعدادی از زمینه هایی که باید در مورد این دو روش بررسی می شد را بررسی کردیم و تعدادی از تفاوت های این روش ها و نقاط قوت و ضعف آن ها آشکار شد . حال به ادامه بررسی این زمینه ها و موارد متفاوت در این دو روش خواهیم پرداخت .

طراحی سایت ریسپانسیو

 

میزان محبوبیت و مورد استفاده قرار گرفتن روش های طراحی سایت ریسپانسیو و طراحی سایت آداپتیو

در پیش بینی آینده کاری طراحان سایت در استفاده از این دو روش برای طراحی وب سایت های multi-device friendly ، خاصیت روان بودن چیدمان (layout) و طرح سایت های ریسپانسیو مزیتی است بر سایت های آداپتیو . این مسئله به این دلیل است که وب سایت های ریسپانسیو تنها برای پشتیبانی از تعداد خاصی از نمایشگرها و عرض هایشان که در طراحی آداپتیو با تعیین نقاط شکست مشخصشان می کردیم ، طراحی نشده اند ؛ بلکه هدف از طراحی سایت ریسپانسیو این است که به واسطه مدیا کوئری ها از تمام عرض ها و نمایشگرهای مختلف پشتیبانی کند ، حتی دستگاه هایی که در بازار امروز و میان کاربران از محبوبیت چندانی برخوردار نیستند . در نتیجه اگر در آینده دستگاهی با ابعاد نمایشگر متفاوت از دستگاه های رایج میان کاربران محبوبیت کسب کند و مورد استفاده قرار گیرد ، نیازی ایجاد تغییر در کدهای یک سایت ریسپانسیو نیست و به طور طبیعی سایت در آن دستگاه هم به درستی به نمایش در می آید .

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

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

تفاوت های طراحی سایت ریسپانسیو و وب سایت آداپتیو از بعد سرعت و عملکرد

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

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

فراتر از چیدمان وب سایت

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

استفاده از کدام روش برای طراحی سایت واکنش گرا مناسب تر است ؟

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

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

منبع : سئو سایت وب نوش

طراحی سایت ریسپانسیو

تفاوت های بین روش طراحی سایت ریسپانسیو (واکنش گرا) و طراحی سایت آداپتیو (انطباقی) – بخش اول

تفاوت های بین روش طراحی سایت ریسپانسیو (واکنش گرا) و طراحی سایت آداپتیو (انطباقی) – بخش اول : طراحی سایت ریسپانسیو و آداپتیو هر دو روش هایی هستند برای ساخت و طراحی سایت سازگار با نمایشگرهای مختلف انواع دستگاه ها (multi-device friendly) . با اینکه روش طراحی ریسپانسیو توسط گوگل توصیه شده و از روش طراحی آداپتیو رایج تر است ، اما به هر حال هر دوی این روشها برای طراحی وب سایت واکنش گرا به ابعاد نمایشگرهای مختلف دارای نقاط قوت و ضعف خود هستند . در ادامه به بررسی تفاوت های موجود بین این دو روش طراحی ، به ویژه در این زمینه ها خواهیم پرداخت :

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

طراحی سایت ریسپانسیو

آشنایی با برخی مفاهیم پیش از شروع مقایسه بین طراحی سایت ریسپانسیو و طراحی سایت آداپتیو

پیش از اینکه وارد مقایسه جزء به جزء این دو روش طراحی وب بشویم ، بهتر است با مفاهیم پیشرفته این دو روش آشنا بشویم .
وب سایت های ریسپانسیو ، دارای طرح و چیدمان روان هستند که بدون در نظر گرفتن ابعاد نمایشگر دستگاه تغییر میکنند و منطبق می شوند . مدیا کوئری ها (media query) به سایت های ریسپانسیو اجازه می دهند تا حتی در حین تغییر سایز بروزر نیز منطبق شوند و واکنش دهند .
وب سایت های آداپتیو از اندازه های فیکس بسته به نقاط شکست از پیش تعیین شده استفاده می کنند و هنگامی که صفحه وب بر روی بروزر کابر بارگذاری شد از مناسب ترین ورژن لی اوت و اندازه برای نمایش سایت استفاده می کنند .
حال با دانستن مفاهیم کلی این دو سبک طراحی ، به بررسی تفاوتهایشان در زمینه های مذکور می پردازیم .

راحتی در توسعه طراحی سایت ریسپانسیو

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

کنترل طرح طراحی سایت ریسپانسیو

یکی از نقاط قوت طراحی سایت ریسپانسیو این است که روان بودن لی اوت آن باعث می شود تا تمام ابعاد نمایشگرها را پشتیبانی کند و با اندازه مختلف منطبق شود که در روش آداپتیو اینگونه نیست و فقط در نقاط شکست مشخصی این سازگاری و انطباق رخ می دهد . اما واقعیت امر این است که گرچه طرح ریسپانسیو این مزیت را دارد ، اما این پشتیبانی را می توان برای نمایشگرهای رایج و پرمصرف تعبیه کرد ؛ مثلا فرض کنید یک وب سایت ریسپانسیو در نمایشگرهایی با عرض ۱۴۰۰ پیکسل ، ۹۶۰ پیکسل و عرض کوچکی مثل ۴۸۰ پیکسل بسیار مناسب به نمایش در بیاید ، اما اگر کاربر از دستگاهی با عرض نمایشگر مابین این اندازه های معروف استفاده کند چه اتفاقی برای نمایش صفحات وب سایت می افتد ؟ طبیعتا چینش صفحه یا به عبارت صفحه آرایی و محتوای وب سایت بهم می ریزد و جلوه ظاهری سایت به کلی خراب می شود .

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

گستره پشتیبانی در طراحی سایت

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

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

ایجاد tooltip

ایجاد tooltip با استفاده از CSS در طراحی سایت

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

با استفاده از CSS و HTML و بدون استفاده از JQuery  براحتی می توان در طراحی سایت تولتیپ ایجاد کرد که در ادامه بطور کامل آموزش داده خواهد شد .

ابتدا در فایل HTML یک پاراگراف ایجاد کرده و متن مورد نظر خود را در آن قرار می دهیم .

حال با استفاده از دو تگ span  تودرتو قسمت متن تولتیپ و توضیحات را با دو کلاس tooltip  و tooltip-text مشخص می کنیم. با استفاده از این خاصیت می توانیم به هر قسمت از متن ویژگی های خاصی را اعمال کنیم .

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

کدهای CSS زیر را برای کلاس والد Tooltip می نویسیم  و استایل موردنظر خود را به آن اعمال می کنیم :

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

نشانگر مأوس بر روی متن موردنظر باید دارای خاصیت pointer باشد .

کدهای CSS  در طراحی سایت زیر را برای کلاس  فرزند tooltip-text به صورت زیر می نویسیم :

سایز فونت تولتیپ را کمی کوچکتر از متن اصلی در نظر می گیریم . و شکل مأوس را به صورت پیش فرض قرار می دهیم همچنین موقعیت و سایز آن را متناسب با صفحه و چیدمان عناصر تنظیم می کنیم .
در این کلاس باید خاصیت display را برابر none  قرار دهیم . چرا که ما نمی خواهیم متن تولتیپ در حالت پیش فرض نمایش داده شود . و درون متن اصلی ما قرار داشته باشد .
و نهایتا به خاصیت hover کلاس والد کد زیر را اضافه می کنیم :

زمانی که مأوس روی متن ( tooltip)  می رود ، متن توضیحات (tooltip-text ) نمایش داده خواهد شد .

نتیجه در مرورگر به صورت زیر خواهد بود :
نکته :
بهتر است تولتیپ کمی بالاتر یا پایین تر از خط اصلی نمایش داده شود . بنابراین خاصیت position  کلاس والد را برابر relative و کلاس فرزند را برابر absolute   قرار می دهیم . در غیر اینصورت تولتیپ در همان خط ظاهر خواهد شد و محل مابقی عناصر را تغییر خواهد داد  و به صورت زیر نمایش داده خواهد شد .
شما می توانید افکت ها و استایل های زیبا برای تولتیپ ایجاد کرده و از آن برای افزایش کاربرپسندی  محتوای خود استفاده کنید .

منبع: سئو سایت و پشتیبانی سایت وب نوش