نقشه راه طراحی سایت

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

بیایید برای درک درست، یک سری مفاهیم اولیه را با هم مرور کنیم و بعد از آن به موضوع اصلی خودمان بپردازیم. آماده هستید؟

بریم براتون بگیم

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

 مزایا و فواید ایجاد شبکه

به اشتراک گذاری  منابع: (اشتراک گذاری برنامه ها و فایل ها ، اشتراک پایگاه داده ها ، دسترسی به اطلاعات با حجم زیاد درزمان کوتاه ، اشتراک منابع سخت افزاری در شبکه مانند چاپگرها ، دسترسی به بیش از یک سیستم عامل ، تمرکز مدیریت ، امنیت اطلاعات )

با اشتراک گذاری منابع،البته همه بستگی به نوع دسترسی می‌توانند از فایل استفاده کنند .

حالا داریم به سوال اصلی نزدیک می شویم .

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

 

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

تا اینجا چیزی که فهمیدیم اینست که ما برای به اشتراک گذاشتن یک سری منابع در اینترنت نیاز به صفحه داریم خوب این صفحه یا صفحات را صفحه وب گویند حالا لاتین اون می شود web page درسته است؟ ! تا اینجا مشکلی نیست؟

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

“یک چیز کلی بهتون بگم هر صفحه ای که از طریق مرورگر می تونید ببینید رو اصطلاحاً فرانت اند می‌گویند .

مثلاً شما یک سایت فروشگاهی رو در نظر بگیرید کلی محصول توی فروشگاه روی صفحه آن می بینید درست هست ؟ خوب به این بخش  فرانت اند گویند .

خوب تا اینجا فهمیدیم که فرانت اند منظور چی هست .

حالا سؤالی که به ذهن می رسد اینست که این صفحه ها رو کی می سازد؟ جوابش واضح هست فرانت اند کار.

بیایید بیشتر توضیح بدیم باشه!!!

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

فرانت اند ( frontend )

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

حالا چطور می شود یک فرانت اند کار شد؟

برای این که فرانت اند کار بشوید ،  یک سری چیزها رو باید بلد بشید که من به شیوه خودم این موارد رو براتون توضیح می دم آماده هستید ؟

تا حالا صفحات زیادی رو در وبگردی هاتون مشاهده کردید درست هست؟ خوب متوجه شدید که هر صفحه از کلی عناصر تشکیل شده  حالا این عناصر می تونه فیلم باشد می تواند گالری تصاویر باشد اصلا می تواند متن یا هر چیز دیگه ای باشد کلاً به این‌ها محتویات سایت می گویند. برای این که بتوانید محتویات سایت را ایجاد کنید باید یک زبان نشانه گذاری به نام HTML را یاد بگیرید. پس این شد اولین قدم. اوکی؟

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

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

واقعیت این هست کدنویسی برای Device های مختلف با CSS دشواره .

خوب چاره چیه؟ یادگیری یک فریم ورک CSS ی مثل Bootstrap  . فریم ورک دیگه چیه؟ فریم ورک یعنی یک چارچوب یعنی شرکتی مثل تویتر اومدن زحمت کشیدن یک چارچوبی رو با کدهای CSS ایجاد کردن و بخش های مختلف رو براش کلاس ساختن و شما فقط هر جایی که لازمتون شد فقط اون کلاس رو صدا می زنید. جالبه!!!

حالا یک خاطره براتون بگم تا خستگی شما در بره؟  اخیراً یک کلاس طراحی سایت داشتم و تدریس می کردم بعد از این که HTML و CSS رو کامل کردیم که فکر می کنم حدود 2 ماه طول کشید. رفتیم سراغ Bootstrap بعد یک جدول رو طراحی کردم و برای استایل دادن به این جدول فقط یک یا چند تا کلاس رو فراخوانی کردم یکی کلاس table و فکر کنم یکی دیگه کلاس table-striped بود بعد از اعمال این دوتا کلاس دیدم چشمان هنرجوهام از فرط تعجب گرد شده بود حالا جالب اینه یکی ازفراگیران برگشت گفت استاد این همه کد توی CSS می نوشتیم و این همه زحمت می کشیدیم حالا الان فقط گفتی table خودش همه این کارهارو انجام داد؟ بعدش هم گفت عجب !!! کلی خندیدیم.

پس قطعا متوجه شدید که یک فریم ورک چقدر کار رو برای طراحان سایت راحت می کنه. آیا تا همین جا ما یک فرانت کار شدیم؟

جوابش خیر هست. ای بابا پس کی فرانت کار می شیم؟ عجله نکنید صبور باشید. شما باید یک دوره دیگه هم یاد بگیرید و اون هم دوره JavaScript هستش.

قبل از پرداختن به مبحث جاوااسکریپت می خواهیم ابتدا شما را با نرم افزار visual studio code آشنا کنیم با ما همراه باشید.

نرم افزار Visual Studio code

این نرم افزار یک Text Editor برای کدنویسی Html و css و Javascript می باشد. برای کار با این نرم افزار بعد از نصب ابتدا آن را اجرا کنید بعد از اجرا شکلی مشابه تصویر زیر ظاهرمی شود:

 

 

همان طور که در شکل فوق می بینید ابتدا پنجره Welcome را با کلیک بر روی دکمه ضربدر ببندید سپس یک فایل جدید با نام index.html ایجاد کنید. سپس درون این فایل ابتدا علامت ! را تایپ کنید و کلید tab را فشار دهید در این صورت ساختار کدهای Html به طور اتوماتیک درج می شود. مطابق شکل زیر:

جاوااسکریپت

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

تاریخچه جاوااسکریپت

جاوااسکریپت را در ابتدا شخصی به نام برندان آیک که یک برنامه نویس آمریکایی بود در شرکت نت اسکیپ با نام Mocha طراحی کرد این نام بعدا به Live script و سپس به جاوا اسکریپت تغییر پیدا کرد.

 ویژگی های جاوا اسکریپت

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

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

با ظهور ایجکس جاوااسکریپت بسیار مورد توجه توسعه دهندگان وب قرار گرفت و امروزه فریم ورک ها و کتابخانه های بسیاری بر پایه جاوااسکریپت نوشته شده اند از جمله کتابخانه jQuery که البته دیگر آپدیت نمی شود و فریم ورک هایی نظیر Vue.js و React.js و Node.js و خیلی موارد دیگر.

 سخن پایانی

برای این که فرانت اند کار حرفه ای شوید حتما در قدم اول یادگیری HTML و CSS و Javascript ضروری می باشد و در ادامه بسته به نیاز بازار کار بهتر است React.js و vue.js را هم یاد بگیرید. به نظر من بهترین راه یادگیری بعد از آموزش این است که برای خود پروژه تعریف کنید و تمام سعی خود را بکنید تا پروژه را به سرانجام برسانید قطعا در این راه تجربه هایی کسب خواهید کرد که شما را به حرفه ای تر شدن نزدیک خواهد کرد.

چگونه می توانید طراحی سایت خود را به تیم وب پارس کلینیک بسپارید؟

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

مدیریت مجموعه: خانم دکتر فاطمه جعفری

شماره تماس مدیریت: 09127093822