پوسته چیست؟
پوسته وب سایت (template ،skin) ساختار یا طرح گرافیکی است که در تمامی صفحات وب سایت بکار رفته است. ساختار پوسته، محل و نوع قرار گرفتن مطالب یک سایت (متن، عکس، منوها، لوگو و ...) را مشخص می کند. رنگ، طرح گرافیکی و محل قرار گیری عناصر تشکیل دهنده وب سایت مانند منو ها ، لوگو، بنر ها و... در جذب مخاطب موثر است. همچنین رعایت استانداردهای کد نویسی (W3C) از جمله ملاک های مهم در طراحی پوسته است.
نکات مهم در طراحی پوسته:
رعایت استانداردهای w3c: رعایت این استانداردها در کد نویسی پوسته موجب می شود، وب سایت در مرورگرهای رایج قابل مشاهده باشد، همچنین موتورهای جستجو توجه بیشتری به سایت هایی که این استانداردها را رعایت کرده اند می کنند و به آنها رنکینگ بهتری می دهند.
استفاده کمتر از فلش در طراحی پوسته : در صورت عدم نصب فلش بر روی سیستم کاربر، بخش هایی که با فلش طراحی شده است نمایش داده نمی شود.
طرح گرافیکی ورنگ بندی متناسب با کاربرد سایت: سایت ها با اهداف گوناگون طراحی و راه اندازی می شوند، طرح و رنگ بندی پوسته سایت می بایست متناسب با کاربرد سایت باشد.
Cross Browser بودن سایت: طراح در کد نویسی پوسته سایت می بایست به نحوه نمایش سایت در مرورگرهای مختلف دقت داشته باشد.
طراحی یک وب سایت با ابزارهای مختلفی از جمله وردپرس، جوملا، دیگر سیستم های مدیریت محتوا، پورتال ها، کد نویسی با زبان های برنامه نویسی تحت وب از جمله asp.net ، php و... صورت می گیرد. براساس نوع طراحی سایت، روشهای طراحی پوسته نیز متفاوت است و پوسته ها را می توان براین اساس طبقه بندی کرد.طراحی پوسته برای یک وب سایت با استفاده از کدهای HTML ، CSS ، جاوا اسکریپت، JQuery و...انجام می پذیرد. (HTML (Hyper Text Mark uplnguage یک زبان نشانه گذاری است که با استفاده از تگ ها به مرورگر اعلام می کند در هر بخش از صفحه چه عناصری نمایش داده شوند.( CSS ( Cascading Style Sheet اولین بار در سال 1996 ارائه شد. با استفاده از CSS ظاهر، طرح، رنگ بندی، فونت و... صفحات از محتوای آنها که با استفاده از کدهای HTML تولید شده جدا می شود.کدهای استایل به صورت In Line ، Embeded و External قابل پیاده سازی می باشند. جاوا اسکریپت یک زبان اسکریپتی است که با کدهای HTML در ارتباط بوده و روی پلتفرم های مختلف قابل اجراست. (به سیستم عامل وابسته نیست)
JQuery یک Framework براساس زبان جاوا اسکریپت است. در واقع این کتابخانه استفاده از کدهای جاوا اسکریپت را ساده می سازد،با استفاده از function ها و Object های جاوا اسکریپت که از پیش تعریف شده، قابلیت های زیادی را می توان در صفحات ایجاد کرد از جمله :
امکان تغییر اجزا ء صفحه وب توسط کاربر، ایجاد انیمیشن، فرم های سمت کاربر (Client Side) و...
به منظور طراحی پوسته علاوه بر نیاز به آشنایی با موارد فوق تسلط به فتوشاپ نیز ضروری می باشد. با استفاده از نرم افزار فتوشاپ می توان قالب ها را به صورت گرافیکی طراحی و سپس تبدیل به کد کرد. همچنین طراح وب سایت می بایست تا حدودی با زبان برنامه نویسی سایت (asp.net ،PHPو...) آشنایی داشته باشد زیرا ممکن است زبان برنامه نویسی محدودیت هایی در طراحی پوسته اعمال نماید.
انواع پوسته:
در حال حاضر کاربران با استفاده از Device های مختلف (تبلت، موبایل، لپ تاپ و...) از صفحات وب بازدید می کنند. پوسته ها براساس انعطاف پذیری و تشخیص نوع Device به انواع مختلف تقسیم بندی می شوند:
1.فیکس (ثابت): این نوع پوسته ها دارای یک کد ثابت هستند و بدون تشخیص نوع Device در تمامی آنها به صورت یکسان اجرا و نمایش داده می شوند. این مسئله موجب بروز مشکل در نمایش سایت در Device هایی همچون موبایل و تبلت می گردد.
2.برای طراحی برخی از پوسته ها،چند نوع کد سازگار با Device های مختلف نوشته می شد که پس از تشخیص آن Device کد پوسته متناسب با آن نمایش داده می شد. این روش در حال حاضر منسوخ شده است.
3. پوسته های Responsible : این نوع پوسته ها خود را پس از شناسایی، با Device تطبیق می دهند تا ظاهر سایت متناسب با Device و به صورت صحیح نمایش داده شود این انطباق پذیری با استفاده از جابجایی المان ها امکان پذیر می گردد. برخی از پلتفرم ها از جمله ورد پرس قابلیت Responsible را ارائه می دهند.
مراحل طراحی پوسته:
در ابتدا طرح و قالب اولیه پوسته برروی یک صفحه کشیده می شود. در این طرح اولیه جایگاه Header ، لوگو ، منو ها، باکس های کناری ، محتوای اصلی صفحه، Footer و ... مشخص می گردد. سپس ابعاد پوسته را مشخص کرده و طراح اقدام به طراحی پوسته در لایه های مختلف با کمک ابزارهایی مانند فتوشاپ می نماید. همچنین در صورت چند زبانه بودن سایت، طراح پوسته را دو طرفه طراحی می کند.
در این مرحله عناصر پوسته را تجزیه کرده پس از آن طراح شروع به ستون بندی پوسته با کد نویسی HTML و CSS می کند. پس از ساخت چهارچوب اصلی بلاک های تو در تو ایجاد می شوند و بلاک های داینامیک به منظور قرار دادن میزان محتوای متغیر در آنها ایجاد می شوند. سپس عناصر و پس زمینه صفحه با کمک فتوشاپ در اندازه مناسب برش داده و ذخیره می شود. در آخر می بایست تصاویر برش خورده مورد نظر در کدها و کلاس های CSS تعریف گردند.
نکته مهم در طراحی پوسته سازگاری آن با مرورگر های مختلف می باشد.
در مجموع می توان گفت طراحی مناسب پوسته از نظر گرافیکی و کد نویسی تاثیر زیادی در جذب کاربر دارد. طراحان سایت می بایست مطابق با کاربری سایت، رنگ و طرح مناسب را انتخاب کنند. همچنین رعایت اصول کد نویسی در رنکینگ سایت تاثیر زیادی دارد.