آموزش های طراحی وبسایت

فراگیری مبانی اولیه طراحی وب

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

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

پس از اون در صورت تمایل بد نیست که به سراغ جاوااسکریپت برید تا بتونید به صفحات وبتون پویایی و امکانات ویژه تری اضافه کنید. بعد از اون هم اگه قصد دارید حرفه ای تر کار کنید باید به سراغ یک زبان برنامه نویسی سمت سرور (server-side) مثل php یا asp.net برید تا بتونید اسکریپت ها و برنامه های اختصاصی تحت وب برای خودتون بنویسید. بعد از یادگیری این موارد هم باید بشینید و حسابی به صورت عملی و تجربی کار کنید تا دستتون راه بیافته و تجربتون افزایش پیدا کنه.

برای طراح وب شدن به ترتیب باید گام های زیر رو پیش برید :

زبان اچ تی ام ال HTML
زبان HTML
گام اول : یادگیری زبان HTML

برای شروع کار و آغاز طراح وب شدن ، لازم و ضروریه که اول از همه زبان html رو یاد بگیرید . زبان html برای ایجاد بدنه و ساختار اصلی صفحات وب به کار میره . شما از هر زبان برنامه نویسی (مثل php) که استفاده کنید نهایتا باید خروجی رو به صورت کدهای html بسازید .

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

مطالب مربوط به آموزش html رو که تهیه خواهد کرد میتونید از طریق کدنویس مطالعه کنید که در حال آماده سازی به شیوه آسان و شیوا می باشد.
اگر زبانتون بد نیست اولین پیشنهاد من اینه که بخش آموزش html سایت w3schools رو حتما برای شروع کار مطالعه کنید. در اونجا مثال های زیادی زده شده و این مزیت هم وجود داره که همزمان میتونید کدها رو خودتون تست کنید و نتیجه اش رو در خروجی ببینید .

زبان سی اس اس CSS
زبان سی اس اس CSS
گام دوم : آموختن و فراگیری زبان CSS

با html ساختار و پیکربندی کلی یک صفحه وب رو میسازیم. ولی برای اینکه ظاهر صفحه وب رو آراسته کنید باید از CSS استفاده کنید . با CSS میتونید برای هر کدوم از تگ های html خصوصیاتی چون رنگ ، فونت ، سایز ، پس زمینه و … رو تعیین کنید . CSS رو به این منظور ایجاد کردند که ساخت پیکربندی صفحه وب رو از شیوه ی نمایش اون جدا کنند (seperation of concepts).

مطالب آموزشی سایت رو در زمینه ی CSS می تونید در کنار مباحث دیگر در آینده ای نزدیک مشاهده و استفاده کنید.

زبان جاوا اسکریپت javascript
زبان جاوا اسکریپت javascript
گام سوم : یادگیری زبان جاوااسکریپت

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

آموزش های مربوطه به زبان جاوااسکریپت رو هم می توانید در ادامه مطالب سایت مشاهده کنید.

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

زبان پی اچ پی PHP
زبان پی اچ پی PHP
گام چهارم : یادگیری زبان برنامه نویسی اسکریپتی مثل PHP

گام بعدی اینه که شما به سراغ یک زبان برنامه نویسی سمت سرور مثل php یا asp.net برید. با استفاده از این زبان ها شما میتونید برنامه های تحت وب بزرگ و دلخواه خودتون رو بنویسید. یادگیری این زبان ها وقت ، تلاش و کار عملی زیادی رو می طلبه و فقط هم زمانی توصیه میشه که واقعا علاقمند باشید و برنامه ای برای توسعه و نوشتن نرم افزارهای تحت وب داشته باشید . و در صورتی که می خواهید در حد ویرایش و طراحی قالب وبلاگ ها و صفحات ایستای وب کار کنید ، ۳ گام اول براتون کافیه .

بعد از یادگیری این نوع زبان ها هم باید با مفاهیم پایگاه داده (Database) آشنا بشید تا بتونید محتوای ورودی و خروجی برنامه های نوشته شده رو ذخیره و استفاده کنید .
در آینده ی نزدیک سعی داریم در مورد این زبان ها هم در سایت مطلب بزاریم . ولی برای شروع باز می تونید به بخش های آموزش php ، آموزش asp.net و آموزش SQL (زبان کار با پایگاه های داده) در سایت w3schools مراجعه کنید.
ناگفته نماند که من اینجا این دو زبان رو پیشنهاد دادم ، در صورتی که زبان های دیگری هم مثل perl ، ruby ، پایتون و .. هم برای نوشتن برنامه های تحت وب موجوده که البته کاربرد و استفاده  کمتری دارند.

ابزارهای مورد نیاز وب Web Tools
ابزارهای مورد نیاز وب Web Tools
ابزار مورد نیاز :

برای نوشتن کدها بهتره از ادیتور هایی که قابلیت های پیشزفته ای مثل پیشبینی کد ، کامل کردن خودکار کد (auto completion) ، رنگ گذاری کلمات کلیدی ، تشخیص خطاها ، فرمت بندی کدها و … رو دارند استفاده کنید تا سریعتر کد بزنید ، درصد خطاتون پایین بیاد و کارتون راحتتر و استانداردتر باشه.

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

من اسم بعضی از معروف ترین برنامه ها رو در ادامه این مطلب میارم که میتونید سرچ و دانلود کنید یا از فروشگاه های سی دی تهیه کنید :

  • PhpStorm
  • ++Notepad
  • Adobe Dreamweaver
  • Komodo Edit
  • Aptana Studio
  • Sublime Text
  • NetBeans
  • Bluefish
  • CoffeeCup Free HTML Editor
  • HTML-Kit
  • HTML Pad

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

0 0 رای ها
امتیازدهی به مقاله
نمایش بیشتر

مطالب مرتبط

اشتراک در
باخبرم کن
guest
1 دیدگاه
جدیدترین ها
قدیمی ترین ها بیشترین رای
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها
دکمه بازگشت به بالا
1
0
افکار شما را دوست داریم، لطفا نظر دهید.x