معرفی زبان های برنامه نویسی طراحی قالب سایت

معرفی زبان های برنامه نویسی طراحی قالب سایت (سمت کلاینت)

در این مقاله به بررسی و معرفی زبان های برنامه نویسی سمت کاربر یا کلاینت می پردازیم.

CSS و HTML

زبان طراحی HTML و استایل شیت ها به عنوان دو زوج قدرتمند در طراحی صفحات وب به شمار میروند. زبان طراحی HTML با گذر بیشتر از یک دهه از عمر آن توسط W3C یا کنسرسیوم جهانی وب ایجاد و تا به امروز گسترش داشته است. تفاوتی نمیکند شما برای طراحی وب سایت چه تکنولوژی را انتخاب میکنید در هر حال لازمه فعالیت در شاخه طراحی وب سایت به عنوان توسعه دهنده تکنولوژی وب یادگیری زبان طراحی HTML و CSS میباشد.

Less  و sass

امکان استفاده از کلاس های قابل استفاده مجدد، توابع و متغیرها در css آرزوی بسیاری از طراحان وب بوده است که Less و Sass آن را به واقعیت تبدیل کرده اند.

LESS  و یا Leaner CSS یک زبان پویای شیوه‌نامه ها(stylesheet)  می باشد که قابلیت‌هایی همچون متغیرها، عملگرها، Mixin ها و دستورات تودرتو را برای CSS فراهم می‌کند به این معنی که می توانید کدهای  CSS را بسیار شبیه به زبان هایی مانند PHP بنویسید.

  LESS در هر دو محیط سمت کاربر (مرورگرهای وب مانند گوگل کروم، فایرفاکس، سافاری) و سمت سرور توسط Node.js  و Rhino قابل اجرا و بهره‌ گیری می باشد.

 Sass مخفف Syntactically Awesome Stylesheets یک زبان اسکریپت نویسی است که به شیوه نامه آبشاری (CSS) تعبیر شده است. با استفاده از Sass ، قابلیت هایی به CSS اضافه می‌شود که قبلاً وجود نداشت، از جمله استفاده از varible ها، نوشتن کدهای تودتو و...

مهم ترین تفاوت بین LESS و SASS این است که LESS یک library از جاوااسکریپت است و یک زبان کلاینت - ساید (client-side) و در طرفی دیگر SASS فقط روی Ruby اجرا میشود و زبان سمت سرور یا (Server-side) است.خیلی از توسعه دهنده ها ممکن است از LESS استفاده نکنند چون همانطور که گفته شد LESS یک library جاوااسکریپت است و ممکن است که کاربر جاوااسکریپت را غیر فعال کند ولی SASS چنین مشکلی ندارد .

JavaScript

امروزه زمانی که کدهای زبان HTML را مشاهده میکنیم متوجه میشویم که همه ی دستورات موجود در آن متعلق با این زبان نمی باشد بلکه دستورهایی نظیر while , if و... به آن اضافه شده است. این دستورها که به نوعی یک نوآوری در طراحی صفحات وب میباشد همه و همه مربوط به زبان برنامه نویسی دیگری به نام جاوا اسکریپت می باشد.

این زبان در ابتدا Mocha نام داشت چندی بعد به Livescript تغییر نام داد ولی امروزه آن را با نام جاوا اسکریپت (JavaScript) میشناسند.

جاوا اسکریپت یک زبان برنامه نویسی است که قابلیت تعاملی یا Interactive را به صفحات وب، اضافه می کند. جاوا اسکریپت یک زبان اسکریپت نویسی یا Scripting Language می باشد. که زبان های اسکریپت نویسی، زیر مجموعه ای از زبان های برنامه نویسی می باشد. این زبانها، برخلاف زبانهای برنامه نویسی نیازی به کامپایلر ندارند. به همین دلیل کدهای جاوا اسکریپت را می توان در داخل یک فایل html اضافه کرده و یا پس از ذخیره سازی به عنوان یک فایل مجزا، به فایل  html، لینک کرد.

کدهای جاوا اسکریپت به صورت Client Side بوده و به وسیله مرورگر، تفسیر و اجرا می شوند. شاید خیلی ها زبان برنامه نویسی جاوا را با جاوا اسکریپت اشتباه می گیرند و هر دو را یک چیز بدانند ولی واقعیت این است که زبان جاوا اسکریپت یک زبان مستقل و شی گرا میباشد و برای نوشتن برنامه های سرویس دهنده (server) و سرویس گیرنده (client) در اینترنت مورد استفاده قرار میگیرد و تنها تشابه اسمی با جاوا دارد.

جاوا اسکریپت دارای کاربردهای متعددی بوده که قابلیت تعاملی با کاربر، یکی از مهم ترین آنها می باشد و همچنین مورد دیگر معتبر سازی یا Validation فرم ها، بدون نیاز به اتصال به وب سرور، می باشد.

یکی دیگر از کاربردهای جاوا اسکریپت، ایجاد صفحات سفارشی html می باشد. در این روش با استفاده از اطلاعاتی مانند  cookie، می توان صفحات سفارشی ایجاد نمود. و همچنین کاربرد دیگر جاوا اسکریپت، کنترل تنظیمات مرورگر می باشد. مثلا می توان از نوع مرورگر کاربر، تشخیص داد و محتویات صفحه را بر اساس آن تعیین نمود.

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

یکی از معایب جاوا اسکریپت عدم ارتباط با سرور و دیتابیس می باشد.

Jquery

JQuery  یک نوع جدید از کتابخانه های جاوا اسکریپت است. JQuery کتابخانه ای سریع و سبک که با قدرت تمام پیمایش اسناد HTML ، مدیریت رخدادها ، انیمیشن کردن عناصر ، آزمایش داده ها و تعامل با Ajax را ارائه می کند. به صورتی کلی JQuery برای تغییر در شیوه اسکریپت نویسی جاوا اسکریپت طراحی شده است.

با شنیدن نام jQuery ، به سرعت ذهن ها به سمت کتاب خانه های هسته ای jQuery معطوف می شود، در حالی که jQuery یک مجموعه کامل را شامل می شود که متشکل از کتاب خانه های همراه، مانند واسط های گرافیکی jQuery ، افزونه های رسمی و تعدادی بی شمار از افزونه های غیر رسمی که توسط اشخاص مستقل ایجاد شده است و از طریق اینترنت قابل دسترسی می باشند. نکته ی قابل ذکر دیگر آن که، کتاب خانه ی هسته ای jQuery ، قلب اصلی بازار گسترده ی برنامه ها و محصولات ارایه شده برای ipod می باشد؛ همان طور که خود   ipod نیز مدیون کتاب خانه ی هسته ی jQuery می باشد. یکی از پر کاربرد ترین پلاگین های های جی کوئری پلاگین Jquery UI می باشد که یکی از پر کاربرد ترین پلاگین های جی کئوری در وب سایت ها می باشد.

Jquery mobile

jQuery Mobile  یک چهارچوب کاری تحت وب برای ساخت سایت ها و نرم افزارهای تحت موبایل می باشد . این چهارچوب کاری از HTML 5 ،  CSS 3 و  jQuery برای ساخت برنامه ها استفاده کرده و به همین دلیل بر روی اکثر سیستم عامل های مطرح موبایل و تبلت قابل اجرا می باشد.

جی کوئری موبایل (jQuery Mobile) یک چارچوب وب لمسی بهینه سازی شده است که با آن قادر به طراحی صفحات وب واکنش گرا نسبت به اندازه صفحه نمایش خواهید بود. به عنوان مثال اگر صفحه نمایش کوچک باشد دکمه ها، لیست ها و تمام آنچه که در صفحه است کوچک می شوند و اگر صفحه بزرگ باشد تمام آبجکت ها بزرگ و متناسب با صفحه می شوند. جی کوئری موبایل داری انیمیشین های زیبا، واکنش گرا و   touch-friendly (لمسی پسند)  می باشد.

AngularJS چیست؟

 AngularJS کتابخانه‌ای برپایه‌ی جاوااسکریپت است که به منظور تولید نرم‌افزارهای تحت وب توسط گوگل توسعه پیدا کرده است.
ایده‌ی اصلی  AngularJS، اضافه کردن امکاناتی به HTML است تا آن را از یک زبان نشان‌گذاری ساده خارج کند و ابزارهای لازم برای تولید یک نرم‌افزار داده محور را به ساده‌ترین شکل ممکن فراهم نماید.
ویژگی اصلی  AngularJS، ایجاد ارتباط پویا میان داده‌های ورودی و خروجی است. به این معنی که به سادگی می‌توانید اطلاعات دریافت شده از کاربر را به صورت خودکار جمع‌آوری کنید، پردازش کنید، در محل‌های دلخواه نمایش دهید یا به سرور بفرستید.
به عبارت دیگر،  AngularJS ابزاری است که برنامه‌نویسی MVC را به معنای واقعی در محیط وب دست ‌یافتنی می‌کند.

با استفاده از AngularJS می‌توان در یک صفحه‌ی وب، چندین Application مجزا از هم ایجاد کرد که هر یک به پایگاه داده‌ای مجزا متصل می‌شوند و اطلاعات را ارسال و دریافت می‌کنند.

فریم ورک های مورد استفاده در طراحی قالب

 Bootstrap چیست؟

 Bootstrapمجموعه ای از ابزارهای رایگان برای ایجاد صفحات وب و نرم افزارهای تحت وب است که شامل دستورات HTML، CSS و توابع جاوا اسکریپت جهت تولید و نمایش فرم ها، دکمه ها، تب ها، ستون ها و سایر المان های مورد نیاز طراحی وب می باشد.

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

در اگوست سال 2011، توییتر Bootstrap را بصورت متن باز و رایگان در اختیار دیگران قرارداد و در فوریه 2012 به محبوب ترین پروژه در سایت Github تبدیل شده بود.

تاریخچه کلمه Bootstrap چیست؟

جدای از بحث مربوط به طراحی وب و موارد مربوط به آن، عبارت Bootstrap به تنهایی به معنی “خود راه انداز” بوده و کلمه Bootstraping به معنی راه اندازی یک فرآیند بصورت مستقل و بدون استفاده از منابع خارجی می باشد. این عبارت در علم کامپیوتر کمی کوتاهتر شده و با عنوان Booting بکار میرود، که نشان دهنده فرآیند راه اندازی سیستم و واردسازی اطلاعات اولیه نرم افزار در حافظه کامپیوتر می باشد. کلمه Boot در زبان انگلیسی به معنی پوتین یا چکمه می باشد، برخی از پوتین ها زبانه کوچکی در انتهای خود دارند که هنگام پوشیدن پوتین برای قرارگرفتن بهتر پا در آن استفاده میشود (چیزی شبیه به پاشنه کش) این زبانه با نام Bootstrap شناخته میشود

.

معرفی امکانات  Bootstrap

این چارچوب یا Framework با تمامی مرورگرهای استاندارد همخوانی داشته و حتی در نسخه های قدیمی تر مانند اینترنت اکسپلورر 8 نیز ظاهر زیبای خود را حفظ میکند. از نسخه دوم  Bootstrap به بعد طراحی واکنشگرا یا رسپانسیو نیز در آن لحاظ شد که موجب نمایش مناسب صفحه در تلفن های هوشمند و تبلت ها میگردد Bootstrap .متن باز بوده و در سایت Github برای دانلود رایگان قرارگرفته است. امکان همکاری در این پروژه و شخصی سازی امکانات و ظاهر آن فراهم شده است و تاکنون مستندات مربوط به آن به چندین زبان دنیا ترجمه شده است. با توجه به راست چین بودن نوشتار فارسی و تفاوت چیدمان مطالب با سایت های انگلیسی نیاز به تغییرات اساسی در کدهای CSS و توابع jQuery احساس میشود که با جستجو در اینترنت سایت Bootstrap فارسی را یافتیم. این سایت علاوه بر تغییر کدهای اولیه مستندات و آموزش های مربوط به Bootstrap  را نیز به زبان فارسی ارائه داده است که میتواند برای شروع به کار بسیار مناسب باشد

.

 Bootstrap به زبان ساده!

شاید هنوز هم با امکانات و توانایی های Bootstrap بخوبی آشنا نشده باشید و یا دقیقا متوجه کاربرد آن نشوید. در این بخش کمی ساده تر امکانات و توانایی های آن را بررسی خواهیم کرد. بزرگترین مشکل طراحان وب و کدنویسان قدیمی، ایجاد ظاهری زیبا و مناسب است! بله دقیقا مشکل اساسی اینجاست. اصول کدنویسی و ایجاد زیربنا و ساختار مناسب برای یک سایت بسیار مهم و پیچیده است ولی نمایش صحیح خروجی کار و ایجاد یک فضای کاربرپسند نیز اهمیت بسیار بالایی خواهد داشت. Bootstrap قصد دارد که خلاء میان طراحی و کدنویسی را از میان برداشته و کدنویسان را ترغیب به استفاده از طراحی های پیش فرض و استاندارد نماید. به همین منظور دستورات CSS و توابع jQuery مورد نیاز را برای شما فراهم کرده است تا شما بتوانید با استفاده از دستورات پیش فرض و رعایت اصول متناسب با طراحی Bootstrap زمان راه اندازی یک پروژه را تا حد زیادی کاهش داده و خروجی آن را متناسب با استانداردهای روز دنیا پیش ببرید. اگر طراحی سایت را به آشپزی تشبیه کنیم، دستورات php و ASP.NET همانند مواد اولیه در پخت یک غذا بوده و وظیفه تامین مواد غذایی لازم را برعهده دارد، کدهای HTML همانند دستورالعمل پخت غذا است که خروجی مورد نظر شما را از مواد اولیه ایجاد میکند. دستورات CSS شباهت زیادی به نحوه کشیدن غذا در ظرف و نحوه ارائه آن در سفره دارد! خوشمزه ترین غذای دنیا نیز اگر در ظرف پلاستیکی و بصورت نامناسب سرو شود ممکن نیست که رضایت افراد را جلب کند ولی ارائه مناسب و زیبای یک غذای ساده میتواند اشتهای سخت گیرترین افراد را نیز برانگیزد. Bootstrap به شما در نحوه ارائه غذا و بهبود نمایش صفحات وب بسیار کمک میکند، مهمتر از هرچیز دیگر سرعت بالای کار با آن است که زمان راه اندازی و اتمام یک پروژه را حتی تا 80 درصد کاهش میدهد.

مشکل Bootstrap چیست؟

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

Foundation

فاندیشن (Foundation) یک فریم ورک پر کاربرد برای طراحی آسان تر وب سایت ها و اپلیکیشن های تحت وب است که از سی اس اس (CSS) و جاوا اسکریپت   (JavaScript) یکپارچه استفاده می کند. می توان گفت Foundation پیشرفته ترین فریم ورک طراحی ریسپانسیو (responsive) است که امکاناتی مانند گرید بندی های مجزا، آیکون های CVG ، جدول های شی گرا،فونت آیکون ها، منو-دکمه و فرم های آماده و ... را در اختیار طراحان قرار می دهد. با استفاده از   Foundationمی توان به ریسپانسیو نمودن تمام المنت های موجود در صفحه (مانند متن، عکس، منو، دکمه ها، پلیرها و ...) پرداخت.