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

ناخونک به PHP برای برنامه نویسان استاتیک ۱

کمی طعم php

برای استفاده از این آموزش نیاز به برنامه نویسی php نیست،فقط کافیست چند چیز ساده را بدانید:

1-کدهای php در بین آغاز کننده و پایان دهنده آن قرار می گیرند.

آغاز کننده:

<?php

پایان دهنده:

?>

2-پسوند فایلهای php مثل html به نام خودش است،پس باید پسوند فایلهایی که نیاز به php داره به .php تغییر کنه،مثال:

index.php

3- چطوری css را در فایل html لود می کنید و هردو فایل جدای خود را دارند؟در php می توان همین کار را با خودش انجام داد.یعنی php دیگری را در فایل فعلی لود کرد.

برای مثال میخواهیم فایلی به نام header.php را به صفحه اصلی وارد کنیم،پس:

<?php include('header.php'); ?>

4-برای اجرای php باید نرم افزارهای این کار را اجرا کنید،نرم افزارهایی مثل wamp ، xampp و موارد دیگر،که توضیحش در این مجال نمیگنجه و برعهده خودتون.

استفاده از php در کدنویسی استاتیک

خب حالا وقت مثال عملی این مورد می باشد،دعوت می کنم شما را به دیدن این تصویر که از جلسه قبل می باشد:

خب تصویر بالا کاریست که ما میخواهیم انجام دهیم.یعنی سرمان را خلوت تر و محیط کاری مان را تمیز و سریعتر کنیم.

مراحل کار به این شکل است:

1- پسوند فایل ایندکس را به php تغییر می دهیم،یعنی:

index.html >>> index.php

2-دو فایل جدید به نام header.php و footer.php می سازیم.

3-محتوایی که بین صفحات مشترک هستند را در مرحله قبل نامگذاری کردیم و فایلها ساخته شدند،حالا کدهای هر قسمت را به فایل مربوطه خود منتقل می کنیم،یعنی cut کرده تا در صفحه اصلی نماند.

4-به جای جای خالی کدها کافیست نام فایلی که کدها در آن جابجا شدند را وارد کنیم،به این صورت:

<?php include('header.php'); ?>
محتوای ایندکس
<?php include('footer.php'); ?>

پس در این حالت برای برگه single هم این را داریم:

<?php include('header.php'); ?>
محتوای single
<?php include('footer.php'); ?>

حال هر تغییری که در فایلهای header.php و یا footer.php انجام شود،بر روی کلیه فایلهایی که آن را لود کرده اند نیز اعمال می شود و مشکلی که در قسمت قبل مطرح شد حل می گردد.

The post ناخونک به PHP برای برنامه نویسان استاتیک ۲ appeared first on وب دیزاین.

یک مبدل گرافیک به استاتیک چه نوع صفحاتی را کد می کند؟

روند تبدیل طرح های PSD به استاتیک یا HTML/CSS/JS در حیطه برنامه نویسی سمت کلاینت می گنجد،در این روند اگر تنها یک صفحه نیاز به تبدیل داشته باشد که موضوع بحث این مطلب نیست،اما اگر مانند قالبهای رایج امروزه (عمدتا وردپرس) نیاز به تبدیل یک طرح PSD کامل باشد،باید گفت که برنامه نویس بایستی موارد زیر را عنایت داشته باشد:

• index :  صفحه اصلی وب سایت که نمای اولیه آن را شامل می شود،وقتی که کاربر سایت را باز می کند با این صفحه مواجه خواهد شد.
• single/page : اگر سایت موجود در طرح دارای امکان مطلب گذاری باشد لاجرم باید این صفحه نیز تعبیه گردد،این صفحه جایی ست که کاربر با زدن “ادامه مطلب” به آن منتقل خواهد شد.
• search : و اگر سایت امکان جستجو در مطالب را داشته باشد اینجا جایی ست که نتایج جستجو برای وی نمایش داده خواهد شد.
• archive : آرشیوی از مطالب را کاربر در این قسمت می تواند ببیند.
• category : مشابه قسمت آرشیو،اما فقط برای یک دسته خاص
• 404 : اگر جایی که کاربر به آن وارد شود حذف شده باشد یا موجود نباشد این صفحه نمایش داده می شود و به کاربر این نکته را تذکر می هد  که جای اشتباهیست و سعی در هدایت به مسیر صحیح می کند.
• post template : اگر سایت را متشکل از نوشته ها و مطالبی بدانیم که در قالب single نمایش داده می شوند و بخواهیم برای یک نوشته خاص از یک ظاهر و شکل دیگری استفاده کنیم،آن وقت می توانیم از post template ها استفاده کنیم.
• taxonomy : مشابه category اما برای انواع دیگرش که در موارد نادری نیاز به طراحی و تبدیل پیدا می کند.
• page template : مشابه post template اما برای برگه ها
• تمامی موارد دیگر…

یک درد آشنا برای مبدلان PSD به HTML

فرض کنیم قالبی که ما باید تبدیل کنیم در تمامی مواردی که در بالا مطرح شد دارای اشتراکاتی باشند.که معمولا هم همینطور است.

اشتراکاتی مانند هدر و فوتر.

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

اما راه حل چیست؟

آیا یک برنامه نویس front end نیاز به یادگیری برنامه نویسی back end نیز پیدا می کند؟

پاسخ به این سوال این است: چرا که نه؟

اگر برنامه نویس HTML/CSS/JS به حدی رسیده که توانایی سوار شدن بر کار را دارد بهتر است گام بعدی را به دنبال یک زبان برنامه نویسی سمت سرور انتخاب کند.

اما این سوال چه ارتباطی به صورت مساله دارد؟

ببینید.در صورتی که شما بتوانید تنها و تنها ناخونکی به php بزنید می توانید مشکلی که در بالا قید شد را حل کنید.

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

1. شما مجبور نیستید یک تغییر را روی همه فایلها اعمال کنید بلکه بر روی یکی اعمال می کنید.
2. دیگر زمان را بیهوده از دست نداده و سرعت کارتان را بهبود بخشیده اید.

در قسمت بعد راه حل این مشکل را به صورت کامل توضیح خواهم داد.

The post ناخونک به PHP برای برنامه نویسان استاتیک appeared first on وب دیزاین.