برای اين كه خود را توسعه‌دهنده وب بدانيد حداقل باید با مهارت‌های پايه آشنایی داشته باشید. ما به شما می‌گوييم که چگونه باید برنامه نويس حرفه‌ای شوید.
مثل هر دانش ديگری برای يادگيری بايد از مهارت‌های پايه شروع كنيد. ما در اين مقاله به شما می‌گوییم برای تبديل شدن به يک توسعه‌دهنده وب به چه مهارت‌های پايه‌ای نياز داريد. و اگر يک توسعه‌دهنده وب آماتور هستيد چگونه بايد حرفه‌ای شويد.
وقتی در مورد توسعه وب صحبت می‌کنیم، منظور کد نويسی‌های واقعی است نه نرم‌افزار ساخت وب سایت یا ابزارهای مدیریت محتوا مانند وردپرس، Wix ،Jimdo و غیره. بله، درست است اگر همه دانش شما از طراحی وب سايت، وردپرس است، نبايد خود را یک توسعه‌دهنده وب بنامید. اشتباه نکنید، من به افرادی که مسلط به وردپرس هستند، احترام می‌گذارم و آنها را تحسین می‌کنم، اما آنها هنوز طراح سايت هستند، نه توسعه دهنده!
در ادامه شما را با اصول اولیه توسعه وب آشنا می‌كنيم و می‌گوييم چه چيزهايی بايد ياد بگيريد تا خود را توسعه‌دهنده وب بنامید.
چگونه به یک توسعه‌دهنده وب تبدیل شویم
مهارت‌های مورد نیاز توسعه‌دهنده وب:
برای حرفه‌ای شدن در هر كاری بايد از ابتدا در مسير درست قدم برداريد. یک توسعه دهنده وب باید هم با Front End آشنايی كافی داشته باشد هم با Back End.
لیست مهارت‌های توسعه‌دهنده وب:
-
- HTML
- CSS
- JavaScript
- Debugging
- GIT (نسخه کد)
- طراحی اولیه گرافیکی
- Back end و Databases
- هاستینگ (انتشار وب سایت)
- كتابخانه‌ها و frameworks
مبانی توسعه‌دهنده وب
صرف نظر از ابزار، فرم ورک یا کتابخانه‌ای که استفاده می‌کنید، بدون شک دانستن HTML و CSS یک ضرورت است (HTML5 و CSS3 آخرین استانداردهایی هستند که در رایج‌ترین مرورگرهای موجود کار می‌کنند).
HTML زبان نشانه گذاری استاندارد برای ایجاد صفحات وب سایت‌ها است و اسناد HTML متشكل از عناصری است كه با تگ‌ها نمايش داده می‌شوند. صادقانه بگویم، من نمی‌دانم چند تگ HTML وجود دارد، اما مبتدیان، باید حداقل به 10 تگ برتر HTML نگاهی بیندازند.
بسیاری از تگ های HTML می توانند به ویژگی‌ها اضافه كنند. علاوه بر این، تسلط بر HTML کلید تبدیل شدن به يک توسعه‌دهنده وب عالی است.
مبانی HTML، كه باید بدانید:
-
- 10 تگ HTML برتر (link)
- درک ساختار پايه یک سند HTML (<! DOCTYPEhtml> ، <html> ، <head> ، <body> ، …)
- متادیتا (<head>)
- مبانی سئو
- ارتباط بین پرونده‌ها (پیوند دادن فايل‌های CSS ،JS و تصاویر با فایل HTML )
- نحوه استفاده از منابع، URL
- درک روابط بین تگ‌ها
- debugging
همانطور که گفتیم CSS برای توسعه وبسايت بسيار ضروری است. زيرا علاوه بر طراحی، برای نمایش درست وب سایت در دستگاه‌های مختلف و اندازه صفحه نيز استفاده می‌شود.
از یک طرف، در مورد عناصر در HTML، و از طرف دیگر، در مورد چگونگی نمایش این عناصر در CSS صحبت می‌کنیم. قسمت مهم CSS وي‍‍‍ژگی‌های آن است. به سختی می توان گفت که چند ویژگی وجود دارد زیرا به طور مداوم در حال به روز شدن است.
یکی از بهترین ویژگی‌های CSS این است که باعث صرفه جویی در وقت شما می‌شود. با استفاده صحیح از انتخابگرها و کلاس‌های اننتخاب CSS می‌توان سبک (style) چندین صفحه را مدیریت کرد.
دانش CSS مورد نیاز:
-
- دانستن نحوه و زمان استفاده از خصوصیات CSS (حاشيه‌ها، قالب‌بندی متن، رنگ فونت)
- انتخابگرهای CSS
- انتخاب کنندگان کلاس‌های CSS
- استفاده از چندین انتخاب کننده
- درج CSS در HTML
JavaScript) JS) یک زبان رایانه‌ای سطح بالا است. زبان‌های سطح بالا دیگری نیز وجود دارند که می‌توانند در توسعه وب مانند PHP یا Python مورد استفاده قرار گیرند، اما وقتی درباره World Wide Web صحبت می‌کنیم، در کنار HTML و CSS، همیشه جاوا اسکریپت وجود دارد.
JavaScript به ما کمک می کند تا یک وب سایت تعاملی ایجاد کنیم زیرا JS می‌تواند داده‌ها را بخواند و بنویسد، عناصر روی صفحه نمایش را دستکاری کند، در طراحی ظاهر سايت و موارد دیگر تغییر ايجاد كند.
در آخر، زمانی که با اصول اولیه JS کار می‌کنید، می‌توانید خود را توسعه‌دهنده وب بنامید. هنگامی که شما شروع به یادگیری زبانی مانند JS می‌کنید، فکر کردن مانند یک برنامه‌نویس را ياد می‌گيريد. و این شیوه تفکر، شما را در حل مشکلاتی که به عنوان یک برنامه‌نویس با آنها روبرو خواهید شد کمک می‌کند.
دانش پایه مورد نیاز JS :
-
- انواع داده‌های اصلی (اعداد، رشته‌ها، شی)
- متغیرها
- ساختار داده‌ها (Array، JSON)
- کارکرد
- اظهارات شرطی
- حلقه‌ها
- تعامل با کاربر
- رویدادها (Events)
- DOM
- استفاده اولیه از کنسول JavaScript
- برنامه نویسی شی‌گرا
ابزارها
بعد از یادگیری اصول اولیه، استفاده درست از ابزار بسیار پر اهمیت است. در زیر لیستی از محبوب‌ترین ابزارهای (IDE (Integrated development environment قرار گرفته است.
همانطور که مشاهده می‌کنید، می‌توانید کد ویژوال استودیو را در ابتدای لیست بیابید. در دو سال گذشته، این ابزاری است که بیشترین پیشرفت را داشته و بیشترین بروزرسانی را دارد.
توصیه من به شما این است که ابزاری که با آن راحت هستید را انتخاب کنید. اما به این هم توجه داشته باشید که ممکن است روزی در تیمی از توسعه‌دهندگان وب کارکنید، و آن زمان همه شما باید از یک ابزار مشابه استفاده کنید.
Debugging فرایندی است که در آن اشکالات، خطاها و ناهنجاری‌های موجود در کد، از هر نوعی را پیدا می‌کنید. سپس آن را برطرف کرده یا تغییر می‌دهید. به طور متوسط یک توسعه‌دهنده نرم‌افزار کمتر از 33٪ درصد از وقت خود را صرف رفع اشکال كدها می کند. این یک روند بسیار پیچیده و وقت گیر است، اما متأسفانه ضروری است.
خوشبختانه، همه مرورگرهای وب مدرن دارای ابزارهای اشکال زدایی هستند و اگر در JavaScript کدگذاری کنید، مي بينيد كه این فرایند ساده شده است. ابزارهای اشکال زدایی به شما این امکان را می‌دهد که در حین اجرای یک صفحه وب جاوا اسکریپت، به كدهای داخلی آن نگاه کنید.
دانش اولیه مورد نیاز debugging:
-
- آشنایی کامل و خوب با نحوه استفاده log
- تنظیم نقاط breakup ابزارهای اشکال زدایی مرورگر
نسخه کد امکان پیگیری و کنترل را به شما می‌دهد، اما از چنين تغییراتی در کدها خودداری کنید. تصور کنید که چند تغییر کوچک در کد ایجاد کرده‌اید و کل وب سایت از کار افتاده است. كاملا واضح است که تغییرات ایجاد شده دارای خطا بوده است، سریعترین راه حل این است که به آخرین نسخه کدی که کار کرده‌اید، برگردید.
اینجاست که ابزارهایی مانند GIT به كار می‌آیند. ابزارهای نسخه نویسی به شما اين امكان را می‌دهند كه به راحتی اشتباهات خود را اصلاح كنيد. مخصوصا در كار تيمی به راحتی می‌توانيد اشتباهات كوچک را بيابيد و آنها را درست كنيد.
در این مرحله، شما در مسير حرفه‌ای شدن، مرتباً تغییراتی در کد خود ایجاد خواهید کرد. شما باید تمام تغییرات ایجاد شده را ردیابی کنید تا هنگام بروز مشكل، این امکان را داشته باشید که قبل از انجام هرکاری، به کد نگاه کنید. برای این کار از یک سیستم کنترل نسخه مانند Git استفاده می‌کنیم.
دانش اولیه نسخه نویسی کد مورد نیاز:
-
- کد اجرایی
- کد خود را با دیگران به اشتراک بگذارید
- بازیابی کد به نسخه قبلی
- branch، تگ
- نحوه ادغام کد
- دانستن نحوه بررسی کد
- درخواست pull
آشنايی با طراحی گرافیک یک امتیازعالی است. اما، اگر با طراحی گرافیک آشنایی ندارید، باید با برخی از ابزارهایش آشنا شوید. گاهی ممكن است به عنوان توسعه‌دهنده سايت، طرحی به دست شما برسد که بايد برای سايت آماده شود، پس آشنايی شما با ابزارهای طراحی گرافيک بسيار كمک كننده خواهد بود. برای آسانتر کردن این موضوع، در زیر لیستی از ابزارهای گرافیکی را نوشته‌ايم. اگر اصول اولیه حداقل سه ابزار را که درقسمت زیر ذکر شده است را بیاموزید، کافی است.
ابزارهای اصلی طراحی گرافیک:
-
- Photoshop
- Figma
- Zeplin
- Sketch
- Invision
- Paint, Paint.NET (Windows); Preview (Mac) ابزارهايی برای تغيير اندازه و كراپ كردن
- Canva برای ويرايش‌های كوچک آنلاين
پس از تسلط بر طراحی و ظاهر سايت، باید به سراغ كد نويسی پشت سايت برويد. ما این قسمت را Back end می‌نامیم كه برای تمام اتفاقاتی که از دید كاربر نهايی پنهان است استفاده می‌شود. اینجاست که همه داده‌ها را ذخیره می‌کنیم. داده‌ها در پایگاه داده ذخیره، تغییر و بازیابی می‌شوند. آنچه شما باید یاد بگیرید نحوه مدیریت داده‌ها در یک بانک اطلاعاتی با استفاده از زبان‌هایی مانند SQL یا NoSQL است.
به عنوان یک توسعه‌دهنده وب حرفه‌ای، شما همچنین باید یاد بگیرید که چگونه برنامه‌های JavaScript را در خارج از مرورگر با استفاده از سیستم عامل‌های معروف مانند Node.JS ایجاد کنید. این به شما کمک می کند تا یک صفحه وب پویاتر بسازيد. از آنجا که با JS کار خواهید کرد، یادگیری چگونگی ایجاد یک فایل (JSON (JavaScript Object Notation که برای ارتباطات مرورگر-سرور استفاده می‌شود، حائز اهمیت است و اگر روزی به عنوان مثال برای یک برنامه تلفن همراه، به همان داده‌های موجود در پایگاه داده خود نياز داشتيد، شما باید یاد بگیرید که چگونه می‌توانید یک API (رابط برنامه نویسی برنامه) ایجاد کنید.
دانش پایه مورد نیاز back-end:
-
- SQL
- NoSQL
- JS
- JSON
- API
بعد از اينكه با استفاده از HTML ،CSS و JavaScript یک وب سایت تعاملی شیک ایجاد کرديد، بايد فضایی برای میزبانی صفحه خود خریداری کنید، جایی که شما تصاویر و داده‌های خود را هم ذخیره می‌کنید. میزبانی وب به شما امکان می‌دهد تا منابع خود (پرونده‌های HTML، پرونده CSS، فایل‌های JS، تصاویر، پایگاه داده) را روی سروری ذخیره کنید که دارای قابلیت اتصال به اینترنت دارد و از طریق شبکه جهانی وب قابل دسترسی است.
بیش از صدها ارائه دهنده میزبانی وب سایت وجود دارند، كه می‌توانيد یکی از آنها را انتخاب کنید، آخرین کاری که باید انجام دهید نامگذاری وب سایت است. بعد از انتخاب اسم باید آدرس آن را در یک ارائه دهنده دامنه ثبت کنید (فقط یک google.com از قبل گرفته شده است.)
دانش اولیه برای میزبانی وب :
-
- URL، نام دامنه، زیر دامنه
- IP
- مسیریابی
- دانش پایه FTP یا ابزارهای دیگر برای ارسال کد به سرور
- چگونه می‌توانید صفحه وب خود را با یک نسخه جدید به روز کنید
- چگونه بدون وقفه اینکار را انجام دهیم
- پایگاه داده و به روزرسانی DB
- مبانی بهینه‌سازی
- کم کردن منابع
- مبانی آنالیز سلامت سرور
در برنامه نویسی می‌توان از کدهای مشترک در پروژه‌های کاملاً متفاوت استفاده کرد. به عنوان مثال، در جاوا اسکریپت، تعدادی کارکرد معمول دارید. پس لزومی ندارد هر بار آنها را از ابتدا بنویسید! استفاده از کتابخانه‌ها، برنامه نویسی را آسانتر می کند. در CSS می‌توان از کتابخانه‌هایی استفاده کرد که کلاس‌های متداولی دارند.
فریم ورک ها هم همینطور هستند. وقتی می‌توانید از کد آماده استفاده کنید و آن را با پروژه خود سازگار کنید، چه لزومی دارد از ابتدا کدنویسی کنید؟ فریم ورک ها کار شما را ساده‌تر می‌کنند و هم یک روش استاندارد تر برای کدنویسی به شما ارائه می‌دهند.
کتابخانه‌ها و فریم ورک‌ها میانبری برای تبدیل شدن به یک توسعه‌دهنده وب نیستند. آنها فقط به ما کمک می کنند سریعتر و آسانتر کار کنیم، اما به هرحال، شما هنوز باید نحوه کارکرد این کتابخانه‌ها و فریم ورک‌ها را بدانید تا از آنها به درستی استفاده کنید.
کتابخانه‌ها و فریم ورک‌های محبوب:
کتابخانه (شما باید حداقل یکی از این‌ها را یاد بگیرید):
Frameworkها(شما باید حداقل یکی از این‌ها را یاد بگیرید):
-
- Angular
- JS
- Ember
- Vue
توسعه وب را با تیم ما شروع کنید
امروزه دستیابی به دانش بنیادی در زمینه توسعه وب ازهمیشه آسانتر بوده است. شبکه جهانی وب هر ثانیه در حال رشد و به روز شدن است و تقاضا برای توسعه‌دهندگان وب نیز وجود دارد. ممکن است با دیدن لیست‌های بالا نا امید شوید، اما اشتباه نکنید، تبدیل شدن به یک توسعه‌دهنده متوسط وب سخت نیست، بلکه عالی شدن در این حرفه سخت است، که زمان و یادگیری مداوم را می‌طلبد. به دلیل رشد مداوم WEB، فناوری سریعتر از گذشته پیشرفت می‌کند و هر روز چیز جدیدی برای یادگیری وجود دارد. اگر این مسیر شغلی را انتخاب کنید، باید این واقعیت را بپذیرید که هرگز یادگیری را متوقف نخواهید کرد. و تیم طراح وب سایت همیشه برای کمک به شما آماده است.