کلیدستان

نسخه‌ی کامل: تکنولوژی های طراحی سایت را بیشتر بشناسیم
شما در حال مشاهده نسخه آرشیو هستید. برای مشاهده نسخه کامل کلیک کنید.
 

[عکس: 1457418838333.jpg]

امروز قصد داریم بشتر راجع به تکنولوژی های طراحی سایت و زبان های مختلفی که در این زمینه استفاده میشه اطلاعات کسب کنیم و ببینیم هر کدوم از تکنولوژی هایی که راجع به شون میشنویم واقعا چی هستن ، تکنولوژی هیا مختلفی مثل HTML و CSS و JavaScript و PHP و LESS و SASS و jQuery و فریم ورک هایی مثل Zend و Laravel و ...
ما هرچقدر در این زمینه ها اطلاعات کسب کنیم باعث میشه بهتر بتونیم مسیر صحیح رو انتخاب کنیم و بهتر بتونیم مسیر درست رو انتخاب کنیم .

HTML5

شاید همون طور که اکثر شاگردا دیسک های فلاپی یا برنامه زرنگار رو یادشون نیست، به زودی وقتی برسه که کسی دوران سرد و تاریک html4 و xhtml1.1 یادش نیاد.
قبلا طراحی یک صفحه وب که توی تمام مرورگرها به یک شکل نمایش داده بشه یه مصیبت بزرگ بود. به خصوص اینترنت اکسپلورر کابوس طراحان وب بود. از طرفی هم هیچ کس html رو جدی نمیگرفت چون خیلی از نظر برنامه نویس ها استاندارد نبود.
برای استاندارد سازی html یک عده xhtml رو طراحی کردن که طراح وب رو مجبور میکنه قواعد xml که یک زبان قاعده مند هست رو رعایت کنه. اینطوری تفسیر کردن کدهای html با مشکلات کمتری روبرو بود. اما این مشکلات جدیدی رو به وجود آورد چون خیلی ها xhtml رو درست استفاده نمیکردن و فقط امید دروغی به برنامه نویس ها میدادن.
نهایتا html5 برای نجات همه وارد شد. یک استاندارد برای حکومت بر دنیای وب. البته انقدر این استاندارد جذابه که راهع خودش رو به دنیای موبایل و دسکتاپ هم باز کرده و تقریبا با html5 هر کاری (نه دیگه هر کاری) میتونید بکنید.
یکی از مهمترین خصوصیات html5 و تکنولوژی های همراهش اینه که وظیفه هر کدوم به خوبی مشخصه. مثلا وظیفه خود html5 معنادار (semantic) کردن محتوا و مشخص کردن ساختار صفحه ست. به همین خاطر خیلی از تگ ها و خصوصیت هایی که مربوط به تغییر رنگ و لعاب صفحه بوده از این نسخه حذف شده.
پس اگر html5 مینویسید همیشه این نکته رو به یاد داشته باشید. موقع نوشتن کد html باید تمرکزتون مشخص کردن ساختار و معنادار کردن محتوا به بهترین و تمیزترین شکل ممکن باشه.

CSS3

اوضاع css هم به هیچ وجه بهتر از html نبود. انقدر که آدم احساس میکرد داره مرورگرها رو هک میکنه تا بتونه یه صفحه ساده رو توی همه شون به یه شکل نمایش بده. مرورگرها هر کدوم به یه شکل از css پشتیبانی میکردن و تقریبا برای هر مرورگر باید یه کد مجزا مینوشتیم.
همینطور خیلی از آرزوهای طراحان وب با css2 برآورده نمیشد. مثلا خبری از انیمیشن یا سایه یا طراحی رسپانسیو نبود.
خیلی از کارایی که الان به راحتی با css3 انجام میشه قبلا باید با مقدار زیادی کد javascript انجام میشد که همون طور که حدس میزنید اونم مصیبتای خودش رو داشت.

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

LESS و SASS


یکی از مشکلات css نویس ها همیشه این بوده که چیزی به اسم متغیر یا با یه نگاه بازتر چیزی به اسم code reusability و راهی برای پیروی از اصل DRY ندارن.
لس و سس برای حل این مشکل طراحی شدن. میپرسید مثلا چه کمکی میکنن؟ مثلا شما توی سایتتون از سه رنگ اصلی بنفش، خاکستری و نارنجی استفاده میکنید. خیلی جاها هم طبیعتا میخواید این سه رنگ کمی روشن تر یا کمی تیره تر بشن. نهایتا از چیزی حدود 20 رنگ استفاده کردید.
حالا فرض کنید کارفرما بگه این سه رنگ رو به ترتیب به رنگ های خاکستری، سیاه و بنفش تغییر بدید. این کار به صورت دستی یعنی هزاران خط کد رو بخونید و توی هر مورد از 20 رنگ، رنگ جدیدی قرار بدید و اگر خیال کردید با search و replace ممکنه در اشتباهید چون رنگ های خاکستری و بنفش تکراری هستن و جاشون عوض شده و این یعنی وقتی یکی از رنگ های اولی رو تغییر بدید دو ست رنگ مشابه دارید که معلوم نیست کدوم جدیده کدوم قدیمی. پس don't even think about it
اما چشم شما خیلی راحت میفهمه که همه چیز به سه رنگ برمیگرده، پس نباید زندگی انقدر سخت باشه، درسته؟ درسته. سس و لس به شما اجازه میدن سه تا متغیر تعریف کنید و توی تمام سایت فقط به اون متغیر ها اشاره کنید. کارفرما هم که گفت رنگا رو عوض کن فقط سه خط کد رو عوض میکنید و تمام. حتی روشن و تاریک کردن رنگا هم متغیرهای جدید نمیخواد، طبق همون سه متغیر و با کمک توابع داخلی سس و لس میتونید تغییرات زیادی روی رنگا بدید.
تازه این فقط بخش بسیار کوچکی از قدرت سس و لس هست.
اما چطوری کار میکنن؟ فایل سس و لس رو جای css میذارید؟ نه. شما اول به این زبونا استایل هاتون رو مینویسید و وقتی کارتون تموم شد با یه مبدل اونا رو به css های نهایی تبدیل میکنید. اگر نیاز به تغییر داشتید، لس یا سس رو تغییر میدید و دوباره کامپایل میکنید. به همین خاطر به اینا میگن preprocessor.
اگر توی طراحی وب جدی هستید و قراره پروژه های جدی و بزرگ انجام بدید توصیه میکنم حتما با سس و لس کار کنید.

JavaScript
جاوااسکریت یه زمانی برای این بود که وقتی یه نفر میاد توی وبلاگت یه پیغام بدی بگی "به وبلاگ من خوش آمدید" و وقتی میخواد صفحه رو ببنده (اون وقتا تب هم نبود که تب رو ببنده!) یه پیام بدی که "تو رو خدا بازم بیا" حداقل استفاده عمده ش توی ایران این بود.
توی سایت های خارجی هم خبر زیادی از جاوا اسکریپت نبود. حتی تایید اعتبار فرم ها اکثرا طرف سرور و با php و asp انجام میشد. کمی قبل از ورود jquery و با معرفی شدن تکنیک ajax بود که جاوا اسکریپت جدی تر گرفته شد و به خاطر ساپورت متفاوت مرورگرها کتابخونه های زیادی به وجود اومد که درباره شون توی قسمتای بعدی توضیح میدم.
و به طور خاص یه مساله باعث شد جاوا اسکریپت بدجوری جدی گرفته بشه و اونم رقابتی بود که سر سرعت اجرای جاوا اسکریپت توی مرورگر ها شکل گرفت و حاصلش موتور v8 گوگل بود که توی کروم و خیلی جاهای دیگه استفاده میشه. تا قبل از این سرعت جاوا اسکریپت فقط برای کارای بسیار ابتدایی و محدود قابل اعتماد بود.
یکی دیگه از چیزایی که سرنوشت جاوا اسکریپت رو عوض کرد nodejs بود. موتوری که از v8 گوگل استفاده میکنه و جاوا اسکریپت رو خارج از بروزر اجرا میکنه و بهش قابلیت هایی مثل دسترسی به فایلها رو اضافه میکنه.
این یعنی دیگه میتونید از جاوا اسکریپت به جای php و asp و ruby و پایتون، برای نوشتن برنامه های سمت سرور استفاده کنید. یا به جای cpp و سی شارپ و جاوا، برای نوشتن برنامه های کراس پلت فرم ازش استفاده کنید.
بعضی از برنامه هایی که توی همین کانال باهاشون آشنا میشیم با جاوا اسکریپت (با زبان هایی که به جاوا اسکریپت کامپایل میشن و باز با اونا هم آشنا میشیم)  نوشته شدن.

اگر از جاوااسکریپت استفاده میکنید نکات زیر رو بدونید:
- جاوا اسکریپت هیچ ربطی به جاوا نداره غیر از اسمی که به اشتباه روش گذاشته شده، نه مالکشون یکیه، نه سینتکسشون یکیه، نه سمنتیک و ساختارشون یکیه، انقدر بی شباهتن که معنایی نداره فرقاشون رو لیست کنم
- هرچند جاوا اسکریپت هنوز مهربونه و میشه باهاش alert داد، اما دیگه واسه خودش کسی شده و جا داره شما هم جدی بگیریدش و خوب با مفاهیم پیشرفته ش آشنا بشید
- جاوا اسکریپت یه زبان شیءگراست اما اگر با جاوا یا سی شارپ کار کردید، باید تعریف خیلی متفاوتی رو از شیءگرایی باهاش آشنا بشید

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

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

PHP
خیلی خیلی وقت پیش، برنامه نویسی تحت وب گرفتاری های زیادی داشت. زبونایی مثل perl هم چندان سینتکس جذابی نداشتن. یه آقایی برای سایت شخصی خودش php رو طراحی کرد. به همین دلیل این زبان شبیه perl بود اما ساده تر، محدودتر و بی قاعده تر.
از اونجایی که این زبون ساده بود و مخصوص ساخت وبسایت بود و رایگان بود، خیلی زود مشتری های خودش رو پیدا کرد و چندین بار بازنویسی شد تا مشکلاتش برطرف بشه. کم کم شیءگرایی هم به این زبون اضافه شد و توی نسخه آخرش بهینه سازی های خیلی جدی توی سرعت اجراش صورت گرفته.
همون قدر که بین مایکروسافت و اپل، ویندوز و لینوکس، فیفا و پس، پپسی و کوکا و استقلال و پرسپولیس دعوا وجود داره، بین php و asp هم دعوا وجود داشته همیشه. هرچند زبان های دیگه ای مثل ruby و python و جاوا و اخیرا nodejs هم برای برنامه های تحت وب به کار میره، اما این دعوا ظاهرا جذاب تره.
اگر فکر کردید من درباره این دعوا نظری میدم اشتباه میکنید Smile) من پیش مخالفای php از php دفاع میکنم و پیش مخالفای asp از asp. چون اصولا دنیا رو سیاه و سفید دیدن درست نیست و هر چیزی نکات مثبت و منفی داره که باید اونا رو در کنار هم دید. و به طور خاص این مقایسه به چندین دلیل غلطه، اولیش اینه که php یه زبانه اما asp یه چارچوبه. پس مقایسه سیب و پرتقاله.
واسه php فریم ورک های مختلفی وجود داره مثل Zend یا  Laravel و... 
خلاصه با یادگرفتن زبان php میتونید هر نوع وب سایتی رو ایجاد کنید
 

منبع : http://academy-it.ir/articles/29