پرسش و پاسخ :

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

    1. قسمت بندی طرح گرافیکی : ابتدا فایل PSD (خروجی فتوشاپ) مربوط به دیزاین گرافیکی سایت شما ، در فتوشاپ به قطعات مختلفی تقسیم بندی خواهد شد. در این کار می بایست قواعد زیر رعایت شود :

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

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

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

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

    • استفاده از تگ Div به جای Table : عموم سایت های اینترنتی بر مبنای تگ Table (استفاده از جداول نامرئی HTML) برش خورده و تبدیل به کدهای HTML می شوند ، چرا که این کار از یک طرف راحت تر بوده و از طرف دیگر با دانش اندک طراحان وب استاتیک ، همخوانی بیشتری دارد. اما سایت های حرفه ای مانند یاهو ، ویکی پدیا ، گوگل و ... ، به دلیل مزایای زیاد تگ DIV ، آن را جایگزین Table کرده اند. برخی از این برتری ها به این شرح می باشد : سرعت بارگزاری سریعتر ، همخوانی با استانداردهای جدید مرور وب بر روی گوشی های تلفن همراه ، امکان تعیین تقدم و تاخر بارگزاری و نمایش مطالب سایت ، عرضه بهتر سایت به موتورهای جستجوگر و کسب رتبه بهتر در آن ها
    • نهایی کردن صفحه با ترکیبی هنرمندانه از کدهای HTML ، JavaScript ، Flash و ... : در این بخش از کار با سوال از مدیر پروژه و درآوردن بخش های مختلف سایت و مطلع شدن از اینکه کدام بخش از طرح گرافیکی ، عکس بوده و کدام بخش ، انیمیشن فلش ، یا کدهای Javascript ، طرح نهایی سایت ، به صورت HTML استاتیک تولید شده و  برای تحویل به تیم فنی آماده می شود.
    • جداکردن استایل ها و کدهای جاوااسکریپت از درون کد HTML : نهایتا فاز پایانی کار بر روی فایل HTML ، استخراج استایل ها (Embedded Stylesheet) و کدهای جاوااسکریپت درون صفحه از درون کد HTML  و گنجاندن آن در فایل های مجزای CSS و JS می باشد ، که علاوه بر استاندارد بودن ، حجم صفحه را کاسته و بر رتبه سایت در موتورهای جستجوگر نیز تاثیر مثبت خواهد داشت.

    4. رفع ایراد سایت در مرورگرهای مرسوم : نهایتا خروجی کار در مرورگرهای مرسوم ، از قبیل IE ، Firefox ، Chrome و در ورژن های مختلف از این مرورگرها مشاهده شده و خروجی آن به لحاظ به هم ریختگی ها و عدم بارگزاری صحیح آبجکت های گرافیکی صفحه ، چک شده و رفع ایراد می گردد.

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

        در این مرحله ، کار شما به واحد فنی و برنامه نویسی تحویل می شود تا نسبت به گنجاندن کدهای برنامه نویسی در طرح گرافیکی نهایی اقدام نمایند.