برنامه نویسی وب چیست ؟

می‌خواهم برنامه‌نویس وب شوم، از کجا باید شروع کنم؟

شرکت طراحی سایت در اصفهان: سؤال بالا، سوالی است که اکثر افراد هنگام شروع به یادگیری مباحث برنامه نویسی وب، با آن مواجه می‌شوند. اما به راستی، اگر بخواهیم برنامه نویسی وب را آغاز کنیم، باید از چه زبانی شروع کنیم؟ چه نکاتی باید رعایت شوند؟ ابتدا نیاز است تا چند مفهوم کاربردی را در زمینه برنامه نویسی وب، بررسی کنیم. در کل 2 نوع وب‌سایت داریم، وب‌سایت‌های استاتیک یا ایستا و وب‌سایت‌های داینامیک یا پویا.

وب‌سایت‌های استاتیک یا ایستا

وب‌سایت‌های ایستا یا استاتیک، به وب‌سایت‌هایی گفته می‌شود که محتوا ثابت است و به منظور اضافه کردن محتوای جدید، می‌بایست مجدداً کدنویسی کرد. مثلاً شما یک وب‌سایت با 5 صفحه دارید و به منظور اضافه کردن صفحه جدید، باید مجدداً کدنویسی کنید و سایر صفحات را نیز به منظور دسترسی به این صفحه ویرایش کرده و پیوند به این صفحه جدید را ایجاد کنید. به چنین وب‌سایت‌هایی، وب‌سایت ایستا گفته می‌شود.

وب‌سایت‌های داینامیک یا پویا

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

HTML — اولین زبان برنامه نویسی وب

HTML که سرواژه عبارت Hypertext Markup Language است، یک زبان نشانه‌گذاری محسوب می‌شود که به منظور ایجاد ساختار و  قالب صفحه وب مورد استفاده قرار می‌گیرد. به کمک HTML می‌توانید مشخص کنید که در صفحه وب خود چند بخش دارید و محتوای هر بخش را مشخص کنید. زبان HTML، جزء لاینفک برنامه نویسی وب است و شما هر سایتی که بخواهید طراحی کنید، به هر زبانی که باشد، باید با استفاده از HTML ساختار اولیه سایت خود را آماده کرده و سپس با استفاده از سایر زبان‌ها، کدنویسی دیگر بخش‌ها را انجام دهید. به طور مثال، می‌خواهید مشخص کنید که سایت شما 4 قسمت با عناوین سربرگ، ستون کناری، کادر محتوا و پاصفحه داشته باشد. باید در ابتدای کار با استفاده از HTML این قسمت را ایجاد و تعریف کنید و سپس با استفاده از سایر زبان‌ها، کد‌نویسی‌های سایر بخش‌ها را انجام دهید.

چطور HTML یاد بگیریم؟

فیلم‌های آموزشی مختلفی برای یادگیری HTML در سایت فرادرس موجود است که در این بخش به معرفی تعدادی از آن‌ها در قالب یک مسیر یادگیری HTML پرداخته می‌شود.

فیلم آموزش طراحی وب با HTML – مقدماتی

بهتر است مسیر یادگیری HTML را با دوره مقدماتی آموزش HTML فرادرس آغاز کرد. طول مدت دوره آموزش طراحی وب با HTML (مقدماتی) ۲ ساعت و پنجاه و شش دقیقه و مدرس آن مهندس محمد عبدللهی است. این دوره برای علاقه‌مندانی که قصد دارند به تازگی طراحی وب و ساخت وب‌سایت را آغاز کنند مناسب است و به عنوان پیش‌نیازی اساسی برای شروع برنامه نویسی وب به حساب می‌آید. از جمله سرفصل‌های این دوره آموزشی می‌توان به معرفی HTML،‌ شروع کار با HTML، مفهوم تگ یا نشانه، تگ head، تگ body، عکس‌ها در صفحه وب، مروری بر CSS، لیست‌ها و سایر موارد اشاره کرد.

فیلم آموزش طراحی وب با HTML – تکمیلی

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

فیلم آموزش HTML و CSS پروژه محور

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

CSS — زبان مخصوص استایل‌دهی

هنگامی که زبان HTML ارائه شده، صرفاً به منظور نمایش متن و عکس ارائه شده بود و انتظار نمی‌رفت تا سایت‌های کنونی را بتوان با آن طراحی کرد. همان‌طور که گفتیم، زبان HTML صرفاً ساختار سایت را طراحی می‌کند. یعنی شما فقط می‌توانید مشخص کنید که سایت‌تان چه اسکلتی دارد؛ اما نمی‌توانید مشخص کنید که این اسکلت‌بندی، به چه شکلی باشد. به منظور بهبود سایت‌های طراحی شده و همین‌طور شکل‌دهی به وب‌سایت‌ها و رفع نواقص زبان HMTL، زبان CSS ارائه شد. CSS که مخفف Cascade Style Sheets است، یکی دیگر از زبان‌های نشانه‌گذاری تحت وب است که به کاربر این امکان را می‌دهد تا مشخص کند که در صفحه وب طراحی شده، هر کدام از اجزای سایت، چه شکل و ابعادی داشته باشند. در واقع، زبان CSS به منظور تکمیل طراحی رابط کاربری وب‌سایت ارائه شده است.

چطور CSS یاد بگیریم؟

در این بخش نیز یک مسیر یادگیری CSS‌ با دوره‌های آموزشی فرادرس ارائه شده است تا به وسیله آن بتوان فناوری استایل‌دهی CSS را به طور جامع آموخت.

فیلم آموزش طراحی وب با CSS – مقدماتی

مسیر یادگیری CSS با دوره آموزش مقدماتی CSS فرادرس آغاز می‌شود. واضح است که پیش از شروع مسیر یادگیری CSS، باید یادگیری HTML حاصل و مسیر یادگیری آن تکمیل شده باشد. طول مدت دوره مقدماتی CSS فرادرس، ۴ ساعت و ۳۴ دقیقه و مدرس آن مهندس محمد عبداللهی است. دوره آموزشی طراحی وب با CSS فرادرس در سطح مقدماتی ارائه شده و برای دانشجویان و سایر افراد علاقه‌مندی مناسب است که قصد شروع برنامه نویسی وب را دارند. از جمله سرفصل‌های این دوره آموزشی می‌توان به استایل‌دهی به عناصر، باکس در CSS، شبه کلاس‌ها، شفاف کردن تصویر، تبدیل سه‌بعدی و سایر موارد اشاره کرد.

فیلم آموزش طراحی وب با CSS3) CSS) – تکمیلی

پس از آغاز مسیر یادگیری CSS با دوره آموزش CSS مقدماتی فرادرس، به علاقه‌مندان پیشنهاد می‌شود تا از دوره CSS تکمیلی استفاده کنند. بدین طریق، استایل‌دهی به نشانه‌گذاری‌های HTML‌ با فناوری CSS به طور جامع فرا گرفته خواهد شد. طول مدت دوره CSS تکمیلی فرادرس، ۳ ساعت و ۱۶ دقیقه و مدرس آن مهندس سید رضا هاشمیان است. در این فرادرس، مباحث تکمیلی نسخه سوم CSS و آموزش بهبودها و به‌روزرسانی‌های آن ارائه شده است. برخی از سرفصل‌های دوره «آموزش طراحی وب با CSS3) CSS) – تکمیلی» شامل انحنای گوشه‌ها در CSS3، هم‌تراز کردن متون، کار با فونت‌ها در CSS3، کار با انیمیشن‌ها و بسیاری از موارد دیگر است.

فیلم آموزش کدنویسی سریع HTML و CSS با Emmet

پس از طی مسیر یادگیری HTML و گذراندن دوره‌های مقدماتی و تکمیلی CSS ، می‌توان از دوره آموزش Emmet فرادرس به عنوان آخرین گام در مسیر یادگیری CSS استفاده کرد. Emmet یک افزونه است که می‌توان با استفاده از آن کدهای HTML و CSS را در ویرایشگرهای کد با سرعت بیش‌تری تولید کرد. با استفاده از پلاگین Emmet، مدت زمان ایجاد صفحات وب با HTML و CSS به میزان قابل توجهی کاهش می‌یابد. طول مدت دوره کدنویسی سریع HTML و CSS با Emmet یک ساعت و ۵۰ دقیقه و مدرس آن مهندس مهدی جنگجو است. از سرفصل‌های این دوره می‌توان به مقدمات Emmet، نوشتن کدهای HTML با استفاده از Emmet و نوشتن کدهای CSS با استفاده از Emmet و موارد تکمیلی اشاره داشت.

مجموعه دوره‌های آموزش برنامه نویسی وب با HTML و CSS فرادرس

پس از اتمام دو مسیر یادگیری HTML و CSS، می‌توان مسیر یادگیری برنامه نویسی وب را با استفاده از مجموعه دوره‌های آموزش طراحی وب با HTML و CSS ادامه داد. در این مجموعه، نزدیک به ۲۰ دوره آموزشی پیرامون HTML و CSS موجود است. علاوه بر دوره‌هایی که تا اینجا معرفی شده‌اند، دوره‌های مختلف دیگری برای آموزش برنامه نویسی وب با دو فناوری HTML و CSS در این مجموعه در دسترس هستند. فریم‌ورک‌ها و کتابخانه‌های مختلفی مثل بوت استرپ برای برنامه نویسی وب با HTML و CSS وجود دارد. دوره‌های آموزشی پیرامون بسیاری از این فریم‌ورک‌ها و سایر فناوری‌هایی که کار طراحی وب با HTML و CSS را آسان‌تر می‌کنند در این مجموعه ارائه شده است.

• برای دسترسی به مجموعه فیلم‌های آموزش برنامه نویسی وب با HTML و CSS فرادرس  .

جاوا اسکریپت — نخستین زبان اسکریپت‌نویسی تحت وب

بعد از ارائه زبان‌های HTML و CSS، نیاز شدیدی به یک زبان احساس می‌شد تا به کاربر این امکان را دهد که بتواند در سمت کاربر بازدیدکننده، برنامه‌نویسی خاصی انجام دهد. زبان HTML صرفاً به منظور طراحی ساختار سایت مورد استفاده قرار می‌گیرد؛ اما به منظور انجام برخی امور، مانند اعتبارسنجی فرم‌ها، برقراری ارتباط با سرور و انجام برخی امور سمت کاربر و مواردی از این دست، زبان HTML قدرت کافی را ندارد. به منظور برطرف کردن این مشکل، در سال 1995، زبان برنامه‌نویسی livescript که بعدها به جاوا اسکریپت تغییر نام داد، ارائه شد. متأسفانه اشتباهی که بیشتر کاربران می‌کنند، این است که این را با جاوا اشتباه می‌گیرند و  این برداشت را دارند که این زبان، از مشتقات زبان جاوا است، در صورتی که این‌طور نیست.

به کمک زبان جاوا اسکریپت شما می‌توانید در وب‌سایت خود روی قسمت‌های دیگر وب‌سایت کنترل داشته و عملکرد بخش‌های مختلف وب‌سایت را کنترل کرده و یا حالات و شرایط خاصی را پیاده‌سازی کنید. در کنار اهمیتی که جاوا اسکریپت دارد، کتابخانه‌های آن نیز بسیار مهم هستند. تکنولوژی Ajax نیز بر پایه جاوا اسکریپت پیاده‌سازی شده است. همچنین، جاوا اسکریپت دارای کتابخانه‌هایی است که هر کدام می‌توانند در قسمت‌های مختلفی، کاربرد داشته باشند به طور مثال jQuery یا AngularJS هر کدام پلتفرم‌های کاملی برای طراحی صفحه‌های وب محسوب می‌شوند.

چطور جاوا اسکریپت یاد بگیریم؟

در این بخش نیز همانند بخش‌های مربوط به HTML و CSS، یک مسیر یادگیری جاوا اسکریپت با دوره‌های آموزش جاوا اسکریپت فرادرس ارائه شده است.

فیلم آموزش جاوا اسکریپت (JavaScript) — از مقدماتی تا انجام پروژه عملی 

 

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

• برای مشاهده فیلم آموزش جاوا اسکریپت (JavaScript) — از مقدماتی تا انجام پروژه عملی .

فیلم آموزش JavaScript ES6 (جاوا اسکریپت)

 

در استاندارد جدید ES6، تغییراتی در فناوری جاوا اسکریپت ایجاد شده است که با گذراندن دوره آموزش JavaScript ES6 فرادرس می‌توان تسلط کافی را نسبت به این تغییرات به دست آورد. برای استفاده از فناوری جاوا اسکریپت در مسیر برنامه نویسی وب ، معمولاً از فریم‌ورک‌ها یا همان چارچوب‌های رایج جاوا اسکریپت استفاده می‌شود. استاندارد ES6 در اکثر این چارچوب‌ها اعمال شده است و پیش از شروع یادگیری هر یک از فریم‌ورک‌های جاوا اسکریپت، ابتدا بهتر است دوره آموزش JavaScript ES6 را به اتمام رساند. طول مدت این دوره ۲ ساعت و ۹ دقیقه و مدرس آن مهندس سید رضا هاشمیان است. برخی سرفصل‌های این دوره شامل کار با رشته‌ها و Template Literal‌ها، کار با کلاس های Helper، کار با بلاک ‌های کد و Scope، کار با تابع Arrow و سایر موارد است.

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت

پس از یادگیری جاوا اسکریپت، باید آموزش یکی از فریم‌ورک‌ها یا کتابخانه‌های رایج مبتنی بر جاوا اسکریپت را برای برنامه نویسی وب آغاز کرد. ReactJS یک کتابخانه محبوب جاوا اسکریپت برای ایجاد رابط کاربری وب و اپلیکیشن‌های موبایل به حساب می‌آید. یادگیری React یک نقطه مثبت در مسیر یادگیری برنامه نویسی وب به شمار می‌رود. طول مدت دوره آموزش مقدماتی کتابخانه ReactJS فرادرس، ۵ ساعت و ۳۴ دقیقه و مدرس آن مهندس نیلوفر کلاهچی است. از جمله سرفصل‌های این دوره می‌توان به آشنایی با کتابخانه ReactJS، نصب و راه‌اندازی ابزارهای لازم در ویندوز، ساخت اولین پروژه ReactJS، معرفی Componentها در React و سایر موارد اشاره کرد.

مجموعه فیلم‌های آموزش جاوا اسکریپت (JavaScript) فرادرس

همان‌طور که پیش‌تر اشاره شد، مسیر یادگیری جاوا اسکریپت تنها با گذراندن دوره‌های معرفی شده در این بخش پایان نمی‌یابد. می‌توان آموزش جاوا اسکریپت و مسیر یادگیری آن را با استفاده از سایر آموزش‌های ارائه شده در مجموعه دوره‌های آموزش جاوا اسکریپت فرادرس ادامه داد. کتابخانه‌ها و چارچوب‌های توسعه بسیاری بر مبنای فناوری جاوا اسکریپت وجود دارد که کار برنامه نویسی وب با جاوا اسکریپت را بسیار ساده‌تر می‌کنند. علاوه بر React، می‌توان به چارچوب‌های انگولار و Vue نیز اشاره کرد. دوره‌های آموزشی مختلفی برای کتابخانه‌ها و فریم‌ورک‌های رایج جاوا اسکریپت در مجموعه آموزش جاوا اسکریپت فرادرس موجود است و استفاده از آن‌ها پس از گذراندن دوره‌های فوق به علاقه‌مندن توصیه می‌شود.

jQuery — یکی از مهم‌ترین کتابخانه‌های جاوا اسکریپت

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

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

چطور jQuery یاد بگیریم؟

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