در این فاز ، تمپلت گرافیکی تایید شده توسط شما ، که تا کنون یک عکس بود ، تبدیل به فایل 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 ، با فونت های موجود در عکس و مواردی از این دست ، نهایتا خروجی کار به دپارتمان گرافیک ارجاع شده و پس از دریافت نظرات اصلاحی ایشان ، نسبت به مرتفع کردن معایب و اشکالات طرح ، اقدام می گردد.

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

ادامه...

در این فاز ، طرح گرافیکی برش خورده و تبدیل شده به HTML در اختیار برنامه نویسان شرکت قرار می گیرد ، تا طی مراحل زیر و با لحاظ برخی از استانداردها ، طرح شما بر روی سرور آپلود شده و آماده دیتااینتری گردد :

 

1. برنامه‌نویسی سمت سرور : در این بخش می بایست ، کد نویسی سمت سرور انجام پذیرد و کدهای PHP در بین تگ های اچی تی ام ال ، طوری جاسازی شود که بخش های دیتایی سایت ، محتوای خود را از دیتابیس MySQL دریافت نمایند. در این کار می بایست قواعد زیر رعایت شود :

• سرعت بارگزاری صفحات سایت : کدها می بایست ، با حساسیت بالا ، طوری بهینه نوشته شوند که سرعت بارگزاری صفحات سایت ، در حداکثر ممکن بوده و از هرگونه معطلی بازدیدکنندگان جلوگیری گردد. ایجاد Loop های بی دلیل ، استفاده از کدهای بازگشتی و ... می تواند سرعت بارگزاری صفحات سایت را کاهش داده و در بازدید بالا ، به شدت موجب کاهش کارایی سایت گردد.
• تحمیل کمترین فشار به CPU و Ram : همانطور که می دانید ، همیشه استفاده از منابع محدود و با ارزش ، پر هزینه بوده و می بایست طوری برنامه ریزی شود که از این منابع استفاده کمتری صورت پذیرد. از با ارزش ترین منابع سرور ، نیز رم و سی پی یو هستند ، لذا در این بخش از کار می بایست طوری کد نویسی صورت پذیرد که کمترین استفاده از این منابع با ارزش انجام پذیرد.

2. برنامه‌نویسی سمت کلاینت (مرورگر کاربران سایت) : بخشی از کدهای سایت می بایست بر روی کامپیوتر کاربران سایت و به وسیله مرورگرشان اجرا گردد. این کار علاوه بر حیات بخشیدن به وب سایت و زیبا کردن آن ، موجب می شود تا تمام پردازش سایت ، به سرور تحمیل نگردد. در این بخش از کار ، استانداردهای زیر لحاظ می شود :

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

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

• کمترین مراجعه به دیتابیس برای واکشی اطلاعات : هر چقدر ، مراجعه کدهای برنامه نویسی به هارد سرور کمتر صورت پذیرد ، سرعت بارگزاری سایت بیشتر بوده و تمنیت آن افزایش می یابد ، بنابراین کد نویسی سایت ، می باید به شکلی انجام پذیرد که کمتر ، به دیتابیس MySQL مراجعه شده و در هر بار مراجعه به آن صرفا چکیده اطلاعات مورد نیاز بازیابی گردد و از واکشی اطلاعات سربار خودداری شود.
• امنیت پایگاه داده : یکی از اصول بسیار اساسی در ارتباط با پایگاه داده ، رعایت امنیت آن و جلوگیری از باز ماندن دسترسی ها و سوء استفاده های احتمالی از طریق SQL Injection و امثال آن خواهد بود. در این بخش ، برنامه نویسان سیستم با نوشتن دستورات Stored procedure به جای Embedded SQL (که در بین برنامه نویسان ایرانی مرسوم و معمول می باشد) ، از مزایای متعدد آن ، از قبیل سرعت و امنیت استفاده می نمایند.

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

ادامه...