تکنولوژی های طراحی سایت را بیشتر بشناسیم! معرفی تکنولوژی های طراحی سایت !

1 0 نظر
دپارتمان: آموزش طراحی سایت

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

 

  • تکنولوژی طراحی قالب سایت با HTML

اولین تکنولوژی طراحی سایت که معرفی می کنیم تکنولوژی طراحی قالب سایت با HTML است. شاید همون طور که اکثر شاگردا دیسک های فلاپی یا برنامه زرنگار رو یادشون نیست، به زودی وقتی برسه که کسی دوران سرد و تاریک 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 تنها در اختیار شما نیست. هر کسی بدون ذره ای خلاقیت میتونه انبوهی از انیمیشن و افکت به صفحه ش بده و حتی رسپانسیو کردن صفحه هم اصلا کار سختی نیست. این امکانات جای خلاقیت و طراحی حرفه ای رو نمیگیره. یا طراح حرفه ای استخدام کنید یا یه طراح حرفه ای بشید.
یکی از مشکلات css نویس ها همیشه این بوده که چیزی به اسم متغیر یا با یه نگاه بازتر چیزی به اسم code reusability و راهی برای پیروی از اصل DRY ندارن.
Less و Sass برای حل این مشکل طراحی شدن. میپرسید مثلا چه کمکی می کنن؟ مثلا شما توی سایتتون از سه رنگ اصلی بنفش، خاکستری و نارنجی استفاده می کنید. خیلی جاها هم طبیعتا می خواید این سه رنگ کمی روشن تر یا کمی تیره تر بشن. نهایتا از چیزی حدود 20 رنگ استفاده کردید.

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

اما چشم شما خیلی راحت میفهمه که همه چیز به سه رنگ برمیگرده، پس نباید زندگی انقدر سخت باشه، درسته؟ درسته. سس و لس به شما اجازه میدن سه تا متغیر تعریف کنید و توی تمام سایت فقط به اون متغیر ها اشاره کنید. کارفرما هم که گفت رنگا رو عوض کن فقط سه خط کد رو عوض می کنید و تمام. حتی روشن و تاریک کردن رنگا هم متغیرهای جدید نمی خواد، طبق همون سه متغیر و با کمک توابع داخلی سس و لس میتونید تغییرات زیادی روی رنگا بدید. تازه این فقط بخش بسیار کوچکی از قدرت سس و لس هست.
اما چطوری کار می کنن؟ فایل سس و لس رو جای css میذارید؟ نه. شما اول به این زبونا استایل هاتون رو مینویسید و وقتی کارتون تموم شد با یه مبدل اونا رو به css های نهایی تبدیل می کنید. اگر نیاز به تغییر داشتید، لس یا سس رو تغییر میدید و دوباره کامپایل میکنید. به همین خاطر به اینا میگن preprocessor.
اگر توی طراحی وب جدی هستید و قراره پروژه های جدی و بزرگ انجام بدید توصیه می کنم حتما با سس و لس کار کنید.

 

  • تکنولوژی JavaScript

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

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

 

  • JQuery

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

جی کوئری

 

  • تکنولوژی PHP برای برنامه نویسی سایت

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

زبان برنامه نویسی PHP

 

 

638

سبد خرید

سبد خرید شما خالی است.