چگونه طراح سایت شوم
چگونه طراح سایت شوم-قسمت 1: بیوگرافی نویسنده این مقاله
من محمد یاری مدرس و برنامه نویس در حوضه وب هستم و سابقه فعالیت حدودا 4 سال در این زمینه دارم. با توجه به تجربه ام در این سال ها بر این شدم با تولید مجموعه مقالات چگونه طراح سایت شوم به تمام افرادی که در ابتدای شروع یادگیری در این حوضه هستند کمک کنم.
مخاطب من افرادی هستند که در این زمینه اطلاعات کافی ندارند و نمی دانند نقطه شروع فعالیت در حوضه وب کجاست و می خواهند به طور موثر تر در این زمینه فعالیت کنند.
با توجه به پیشرفت دنیای دیجیتال در این چند سال اخیر افراد زیادی به واسطه علاقه به این حوضه و یا تحصیلات در این زمینه وارد حرفه برنامه نویسی شده اند اما معمولا در میان راه و بعد از گذراندن چند دوره آموزشی این مسیر را رها می کنند.
واقعیت امر این است که برنامه نویسی مسیر سخت و پر زحمتی دارد و فقط افراد قوی و هدفمند در آن موفق می شوند.
این مقاله نقطه شروع و دروازه ورود به دنیای وب است. اگر هنوز مردد هستی و نمیدانی از کجا باید شروع کنی روی کمک ما حساب کن ما تا انتهای مسیر یادگیری طراحی وب همراه شما هستیم.
قدم اول یادگیری CSS & HTML
برای شروع و فعالیت در زمینه وب نیاز به یادگیری پیش نیازهای اولیه در این زمینه دارید. اولین قدم برای وارد شدن به این حوضه فراگیری زبان های HTML و CSS است.
صفحات اینترنتی و وب سایت ها با ترکیب HTML و CSS ایجاد می شوند.
HTML چیست؟ به طور خلاصه HTML زبان نشانه گذاری استاندارد برای ایجاد صفحات وب است. هدف از ایجاد این زبان نمایش اطلاعات به کاربران اینترنتی است.
CSS چیست؟ CSS به منظور زیبا کردن صفحات وب ایجاد شده است. با استفاده از این زبان می توانیم نحوه نمایش کدهای HTML را تغییر بدهیم.
نمونه کدهای HTML & CSS
برای یادگیری بهتر HTML و CSS بهتر است تمرکز خود را بر نحوه قرار گرفتن عناصر HTML کنار هم بگذارید.
نمونه کد HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>این یک عنوان است</h1>
<p>این یک پاراگراف است</p>
</body>
</html>نمونه کد CSS:
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}منابع یادگیری CSS & HTML
برای HTML: یادگیری HTML کلیک کنید
برای CSS: یادگیری CSS کلیک کنید
ابزار های مورد نیاز یک طراح وب سایت
برای شروع طراحی وب سایت به ابزارهای اولیه برای نوشتن کدهای خود نیاز دارید که به اختصار آن ها را معرفی می کنیم.
- ویرایشگر متن: ++Notepad و Sublime Text
- ویرایشگر تصویر: Photoshop و Paint
- مرورگر: Chrome
لینک دانلود نرم افزارهای مورد نیاز یک طراح سایت
ویرایشگر متن ++Notepad: کلیک کنید
ویرایشگر تصویر Paint: داخل ویندوز به طور پیش فرض هست.
مرورگر Chrome: کلیک کنید
سخن پایانی قسمت اول
برای شروع کار معرفی موارد ذکر شده در ابتدای مقاله کافی می باشد. هدف از این مقاله ارائه مسیری روشن برای افرادی است که نقطه شروع را نمی دانند.
طبق تجربه شخصی و حضور چند سال در این حوضه به این نتیجه رسیده ام که برای آشنایی کامل با برنامه نویسی و طراحی سایت حداقل به مدت 6 ماه باید آموزش ببینید.
کمی بعد از آشنایی با اصول اولیه و فهم کدهای HTML و CSS پیشنهاد می کنیم آموزش های پروژه محور را در این زمینه مشاهده نمایید تا با طراحی های واقعی در این زمینه آشنا شوید.
چگونه طراح سایت شوم-قسمت 2:
JavaScript چیست؟
جاوا اسکریپت زبان برنامه نویسی است که در صفحات HTML و طراحی وب سایت کاربرد دارد.
ممکن است تشابه اسمی جاوا اسکریپت و جاوا شما را به اشتباه بیندازد که این دو زبان به هم مربوط هستند در صورتی که جاوا اسکریپت و جاوا کاملا از نظر مفهومی و طراحی با هم متفاوت هستند.
یادگیری JavaScript
بعد از یادگیری HTML و CSS نوبت به یادگیری زبان جاوا اسکریپت است که در طراحی سایت کاربرد فراوانی دارد.
سه دلیل اصلی یادگیری زبان JavaScript:
- تغییر در کدهای HTML و وارد کردن کدهای HTML به صورت آنی در صفحات وب
- تغییر کدهای CSS و اضافه کردن کدهای CSS در سایت
- بهبود کیفیت وب سایت
کاربرد جاوا اسکریپت در مدیریت رویدادهاست.
مثلا وقتی شما بر روی دکمه ای در سایت کلیک میکنید یک پیغام نمایش داده میشود و یا محاسباتی انجام داده می شود، وظیفه جاوا اسکریپت هندل کردن رویداد هاست.
چه چیزهایی را در جاوا اسکریپت یاد بگیریم:
- یادگیری انواع داده ها در جاوا اسکریپت مثل: رشته، عدد، آرایه، شی و …
- یادگیری توابع، شرط ها و حلقه ها و … در جاوا اسکریپت
- یادگیری کار با رویداد ها در جاوا اسکریپت
- یادگیری کار با داده JSON
- یادگیری jQuery (یکی از کتابخانه های جاوا اسکریپت)
در مورد موارد بالا نحوه کارکرد توابع، شرط ها و حلقه و انواع داده ها تقریبا در همه زبان های برنامه نویسی مشترک است.
یادگیری جاوا اسکریپت را به ترتیب بالا شروع کنید و بیشتر بر روی فهم برنامه نویسی کار کنید تا حفظ کردن یک سری دستورات.
نمونه کد JavaScript
<button onclick="myFunction()">Click Me!</button>
<script>
function myFunction() {
var x = document.getElementById("demo");
x.style.fontSize = "25px";
x.style.color = "red";
}
</script>منابع یادگیری JavaScript & jQuery
برای JavaScript: یادگیری JavaScript کلیک کنید
برای jQuery: یادگیری jQuery کلیک کنید
سخن پایانی قسمت دوم
دومین قدم را برای چگونه طراح سایت شوم برداشتیم. هدف از نوشتن این سری از مقالات آموزش کدنویسی و یا طراحی سایت نیست بلکه نشان دادن مسیر یادگیری و ایجاد ذهنیت در مورد این که چگونه طراح سایت شوم هست.
یک نکته اساسی دیگر که حتما باید مد نظرتان قرار دهید تسلط بر زبان انگلیسی و تقویت آن است.
قسمت اعظمی از آموزش های برنامه نویسی به زبان انگلیسی است و برای پیشرفت در این حرفه حتما باید زبانتان را تقویت کنید.
ممکن است به آموزش های فارسی علاقه داشته باشید اما یادتان باشد زبان دنیا زبان انگلیسی است و اگر زبانتان ضعیف باشد همیشه باید منتظر بمانید کسی به زبان فارسی چیزی به شما یاد بدهد!
چگونه طراح سایت شوم-قسمت 3:
قرار دادن سایت بر روی بستر اینترنت
بعد از یادگیری HTML,CSS,JavaScript شما تقریبا پا به دنیای طراحی سایت گذاشته اید و می توانید اولین پروژه های خود را ایجاد کنید.
سوال بعدی این است که بعد از ساخت سایت آن را چطور در اینترنت نمایش دهم؟
برای این که سایت شما در فضای دیجیتال قابل دسترس باشد باید با هاست یا همان فضای ذخیره سازی اطلاعات شما در اینترنت و دامنه آشنا باشید که در ادامه به شرح هر یک از آنان می پردازیم.
فضای ذخیره سازی اطلاعات
اولین قدم برای نمایش سایت بر روی اینترنت خرید هاست یا همان فضای ذخیره سازی اطلاعات است.
این فضا توسط شرکت های فروشنده هاست در اختیار شما قرار می گیرد.
شما با خرید هاست قستمی از فضای ذخیره سازی کامپیوتری را که همیشه به اینترنت متصل است خریداری می کنید.
بعد از تهیه هاست شما باید نحوه کارکردن با این فضا را یاد بگیرید.
فضای ذخیره سازی باید دارای ویژگی هایی باشد که در موقع خرید آن ها را مد نظر قرار دهید:
- سرعت سرور
- در دسترس بودن
- پهنای باند
- امنیت
- بکاپ گیری منظم به صورت خودکار
- و … .
مرحله بعد ذخیره ی اطلاعات وب سایت شما بر روی هاست است.
برای آشنایی بیشتر با این مورد این عبارت را “آموزش اولیه سی پنل” یا “پنل های مدیریت هاست” در اینترنت جستجو کنید.
وب سایت رسمی cPanel: کلیک کنید
دامنه
دامنه نامی اختصاصی است که به وب سایت های اینترنتی اختصاص می یابد تا از هم متمایز شوند.
بعد از خرید هاست نوبت به خرید دامنه است که هویت شما را در اینترنت مشخص می کند و با این نام در اینترنت قابل دسترس هستید.
بعد از خرید دامنه نوبت به لینک کردن نام دامنه و هاست میرسد. بعد از این کار با وارد کردن آدرس اینترنتی خودتان وب سایت شما نمایش داده می شود.
سخن پایانی قسمت سوم
بعد از یادگیری کار با هاست و دامنه شما تقریبا وارد حرفه طراحی وب سایت شده اید.
شما می توانید سایت های کوچک و نمونه کارهای ساده را طراحی کنید و آن را بر روی اینترنت قرار دهید.
همیشه و در هر حال دنبال یادگیری بیشتر و دیدن نمونه کارها و انجام طراحی های متفاوت باشید تا تجربه لازم را در این زمینه کسب کنید.
چگونه طراح سایت شوم-قسمت 4:
فریم ورک های FRONT-END
بعد از یادگیری طراحی وب سایت های استاتیک باید شروع به یادگیری فریم ورک های طراحی سایت کنیم.
ما در ابتدا با کدها آشنا شدیم و کاربرد آن ها را در طراحی سایت مشاهده نمودیم.
برای حرفه ای شدن در زمینه طراحی ظاهر سایت قدم بعدی این است که شما از یک چهار چوب و قوانین تعیین شده توسط فریم ورک ها برای طراحی استفاده نمایید.
فریم ورک ها کدهای آماده ای هستند که با استفاده اصولی از آن ها سرعت و کیفیت کار شما بالا می رود و حرفه ای تر می شوید.
تعدادی از فریم ورک های FRONT-END را در قسمت ذیل مشاهده نمایید:
برای یادگیری هر کدام از موارد بالا فقط کافی است بر روی آن ها کلیک نمایید تا به سایت منبع هدایت شوید.
پیشنهاد ما یادگیری فریم ورک بوت استرپ است که تعداد زیادی سایت بر پایه آن طراحی شده و کدهای آماده زیادی برای استفاده از آن داخل اینترنت هست.
زبان های سمت سرور
تا به اینجای کار شما در طراحی وب سایت های استاتیک حرفه ای شده اید اکنون نوبت به این رسیده که به وب سایتتان جان ببخشید.
زبان های سمت سرور زبان هایی هستند که باعث پویایی وب سایت می شوند.
با استفاده از این زبان ها شما می توانید با ارتباط با پایگاه داده ها اطلاعات را بخوانید، نمایش دهید، ویرایش کنید، و اطلاعات جدید را داخل سایتتان درج نمایید.
تعدادی از زبان های سمت سرور را در قسمت ذیل مشاهده نمایید:
برای یادگیری هر کدام از موارد بالا فقط کافی است بر روی آن ها کلیک نمایید تا به سایت منبع هدایت شوید.
پیشنهاد ما یادگیری زبان سمت سرور PHP است که تعداد زیادی سایت بر پایه آن طراحی شده و کدهای آماده زیادی برای استفاده از آن داخل اینترنت موجود است و همچنین تعدادی از فریم ورک های قوی مثل لاراول و سیستم های مدیریت محتوا مثل وردپرس بر پایه آن طراحی شده اند.
برای حرفه ای شدن در زمینه طراحی سایت تسلط بر چند مهارت الزامی است که ما به مرور آن ها را معرفی کرده ایم.
تنها چند قدم دیگر باقی مانده تا شما در دنیای طراحی وب سایت حرفه ای شوید.
مرحله بعد یادگیری پایگاه داده ها و فریم ورک های بر پایه جاوا اسکریپت است با وب پناه همراه باشید.
سخن پایانی قسمت چهارم
برای حرفه ای شدن در زمینه طراحی سایت تسلط بر چند مهارت الزامی است که ما به مرور آن ها را معرفی کرده ایم.
تنها چند قدم دیگر باقی مانده تا شما در دنیای طراحی وب سایت حرفه ای شوید.
مرحله بعد یادگیری پایگاه داده ها و فریم ورک های بر پایه جاوا اسکریپت است با وب پناه همراه باشید.
چگونه طراح سایت شوم-قسمت 5:
فریم ورک های JavaScript
زبان جاوا اسکریپت در طول زمان از یک زبان مختص FORNT-END گذشته و با استفاده از آن می توان کارهای بسیاری کرد.
یکی از کارهای اساسی که با فریم ورک های جاوا اسکریپت می شود انجام داد مدیریت داده هایی است که از سمت پایگاه داده ارسال می شوند.
علاوه بر آن شما فقط با یادگیری زبان جاوا اسکریپت می توانید در زمینه طراحی اپ های موبایل و کار با پایگاه داده اقدام کنید.
تعدادی از فریم ورک های JavaScript را در قسمت ذیل مشاهده نمایید:
برای یادگیری هر کدام از موارد بالا فقط کافی است بر روی آن ها کلیک نمایید تا به سایت منبع هدایت شوید.
احتیاج به یادگیری چند فریم ورک نیست تمرکز خود را بر روی یک فریم ورک قرار دهید و آن را پیش ببرید.
پایگاه داده (Databases)
پایگاه داده ابزاری است برای ذخیره سازی اطلاعات.
طبق تجربه شخصی برنامه یا وب سایتی را که با پایگاه داده در ارتباط نیست غیر کاربردی می دانم.
طراحی سایت مجموعه ای از مهارت هایی است که باید در کنار هم به کار گرفته شوند تا نتیجه نهایی مشاهده شود.
زبان سمت سرور و پایگاه داده ارتباط تنگاتنگی با هم دارند چون برای ارتباط با پایگاه داده و کار با آن احتیاج به یادگیری زبان سمت سرور است.
علاوه بر این خود پایگاه داده ها زبان مخصوص به خود (SQL) را دارند که زبان های سمت سرور با به کارگیری آن ها اطلاعات را واکاوی می کنند.
انواع پایگاه داده ها به دو قسمت Relational Databases و NoSQL Databases تقسیم می شوند که بیان تفاوت آن ها خود یک مقاله دیگری است.
تعدادی از پایگاه داده ها را در قسمت ذیل مشاهده نمایید:
برای یادگیری هر کدام از موارد بالا فقط کافی است بر روی آن ها کلیک نمایید تا به سایت منبع هدایت شوید.
تا به اینجای کار با ابزارهای اصلی و زبان های کاربردی طراحی وب سایت آشنا شده ایم.
پیشنهاد ما برای انتخاب زبان سمت سرور و پایگاه داده انتخاب یکی از مورد های ذیل است:
- PHP / MySQL
- Node.js / MongoDB
با انتخاب یکی از دو مورد بالا کار خورد را شروع کنید و بر روی آن تمرکز کنید.
سعی کنید در طول مسیر یادگیری از این شاخه به آن شاخه نروید و تا وقتی در زمینه ای حرفه ای نشده اید یادگیری چیز جدیدی را شروع نکنید.
سخن پایانی قسمت پنجم
تا به اینجای کار با ابزارهای اصلی و زبان های کاربردی طراحی وب سایت آشنا شده ایم.
چگونه طراح سایت شوم-قسمت 6 پایانی:
آموزش های جانبی
در کنار مواردی که در مقاله های گذشته برای یادگیری طراحی سایت بیان کردیم یک سری موارد دیگر هم هست که در کنار آن ها می توان فرا گرفت.
از توضیحات جانبی در مورد این تکنولوژی ها خود داری میکنیم و خود به دنبال یادگیری آن ها بروید.
این موارد را می توانید در لیست ذیل مشاهده نمایید:
- GIT Version Control & Github
- SSH & Basic Command Line
- CSS PreCompilers – Sass / Less
- APIS / REST Services
- HTTPS / SSL
توسعه برنامه ها
برای راه اندازی وب سایت های بزرگ و برنامه های تحت وب پر کاربرد یک سری ابزار قوی نیاز است.
این موارد را می توانید در لیست ذیل مشاهده نمایید:
- Dedicated Server / VPS
- App Hosting
- Deploy Tools
- Linux Command Line
- Maintenance & Updates
برای توسعه وب اپ های پر کاربرد تسلط بر سرور و لینوکس الزامی است.
البته شما برای آموزش بیشتر می توانید خود را به چالش بکشید و شروع به یادگیری لینوکس و راه اندازی سرور ها کنید.
لزومی ندارد که یک طراح وب سایت این قبیل مسائل را بلد باشد.
شما یک طراح وب سایت هستید!
تبریک می گویم شما مسیر طراح وب سایت شدن را به خوبی پیمودید. هر آن چه که برای طراح سایت شدن الزامی می بود فرا گرفته اید.
شما حالا به راحتی می توانید موارد ذیل را انجام دهید:
- طراحی انواع وب سایت های ساده و پیشرفته
- طراحی Backend وب سایت ها
- کار با هاست و دامنه
- طراحی پایگاه داده ها
سیستم های مدیریت محتوا (PHP)
انتخاب سیستم های مدیریت محتوا برای انجام طراحی وب سایت یکی از بهترین انتخاب های شما برای ورود به بازار کار است.
تنوع سیستم های مدیریت محتوا و همچنین سرعت توسعه کد نویسی و تعداد زیاد پلاگین ها مزیت مهمی برای شروع کار با آن ها می باشد.
پیشنهاد وب پناه برای ورود به بازار کار فراگیری سیستم های مدیریت محتواست. در مدت کوتاهی می توانید به در آمد برسید و بعد از آن به فکر کارهای تخصصی تر باشید.
در قسمت ذیل انواع سیستم های مدیریت محتوا و ویژگی هایش را مشاهده نمایید:
- WordPress, Joomla, Drupal
- مناسب برای انجام پروژه ها
- سهولت در بروز رسانی و پشتیبانی
- هزاران پلاگین آماده
- توسعه سریع
سخن پایانی قسمت ششم
بعد از تسلط بر موارد ذکر شده شاید برایتان سوال پیش آید که بعد از این چه میتوان آموخت؟
پیشنهاد وب پناه ورود به طراحی اپ های موبایل است.
می توانید با استفاده از فریم ورک های جاوا اسکریپت بدون یادگیری زبان های سطح بالا مثل Java برنامه های موبایلی خود را طراحی کنید.
سعی کنید با انجام دادن پروژه های مختلف خود را به چالش بکشید و توانایی های خود را افزایش دهید.
وب پناه آرزوی بهترین ها را برای شما عزیزان دارد همواره تلاش کنید و تسلیم نشوید.
بزرگ‌ترین ضعف ما در تسلیم شدن است. مطمئن‌ترین راه برای موفق شدن این است که همیشه فقط یک بار دیگر هم تلاش کنی.
توماس ادیسون
موفق باشید!
محسن گودرزی
خیلی ممنون از مقالتون خیلی خلاصه و مفید توضیح داده بودید ممنون میشم مقاله های بعدی مربوط به این موضوع رو زودتر انتشار بدید.
وب پناه
سلام خواهش میکنم، تمام تلاش ما برای پیشرفت و توسعه وب فارسی است. مقالات بعدی در اسرع وقت با کیفیت بهتر خدمت شما عزیزان ارائه میشود.