advertise laitec sharif univercity
دانلود سورس اندروید اپلیکیشن افزایش سرعت گوشی

دانلود سورس اندروید اپلیکیشن افزایش سرعت گوشی

18000 تومان
دانلود سورس پروژه فروشگاه کیف با asp.net و sql express

دانلود سورس پروژه فروشگاه کیف با asp.net و sql express

10000 تومان
سورس پروژه پایانی وب سایت و نرم افزار کلینیک در ASP.net

سورس پروژه پایانی وب سایت و نرم افزار کلینیک در ASP.net

48000 تومان
دانلود سورس هوش مصنوعی رنگ آمیزی گراف با ژنتیک در #C

دانلود سورس هوش مصنوعی رنگ آمیزی گراف با ژنتیک در #C

10000 تومان
دانلود برنامه هشت وزیر با جستجوی عمقی در سی شارپ

دانلود برنامه هشت وزیر با جستجوی عمقی در سی شارپ

10000 تومان

چگونه طراحی وب را یاد بگیریم؟

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

طراحی وب یک کار هنری و پیچیده است. یک طراحی سایت خوب تلفیقی از ظاهر زیبا به همراه کدنویسی اصولی است. در این مطلب از کاسپریا، ارائه دهنده خدمات طراحی سایت در کرج، نحوه شروع یادگیری طراحی سایت از ابتدا تا انتها به صورت کامل و مرحله به مرحله شرح داده خواهد شد. اگر علاقه مند به یادگیری طراحی سایت به عنوان یک حرفه یا صرفاً به عنوان یک علاقه مندی یا حتی کنجکاوی تمایل دارید، پیشنهاد می شود این مطلب را از ابتدا تا انتها مطالعه کنید. 
ددر این مطلب پیش نیازهای یادگیری طراحی وب به همراه توضیح مرحله به مرحله یادگیری این کار شرح داده می شود. طراحی وب، طراحی سایت یا طراحی وب سایت همگی این عبارات به یک کار اشاره دارند ولی عبارت صحیح تر "طراحی وِب" که معادل انگلیسی آن "Web Design" است خواهد بود. توجه داشته باشید که در این مطلب نحوه شروع یادگیری طراحی وب توضیح داده می شود و نه نحوه کدنویسی، پس ممکن است با عباراتی (مانند: تَگ یا فِریم وُرک) مواجه شوید که در ابتدا برای شخص مبهم باشد ولی پس از شروع کار و مقداری تمرین رفع خواهد شد. یادگیری حرفه ای طراحی وب همانند هر کار دیگری نیازمند تمرین روزانه و صبر است.

 

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

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

 

هاست و دامین چیست؟

برای راه اندازی یک وب سایت اینترنتی دو چیز لازم و ضروری است اول Domain (به فارسی: دامِین) و دوم Host (به فارسی: هاست). دامین همان آدرس سایت است؛ به عنوان مثال google.com یک دامین است. و هاست نیز به معنی فضایی روی یک سِروِر است که فایل های سایت مانند کدنویسی ها، عکس ها، ویدیوها و اطلاعات مختلف بر روی آن نگهداری می شود. زمانی که شخصی آدرس سایت شما (دامین) را در مرورگر خود تایپ می کند، مرورگر به سرور و هاست سایت شما متصل شده و صفحه را دریافت کرده و سپس نمایش می دهد. پس دامین به معنی آدرس سایت است و هاست یه معنی فضایی برای نگهداری سایت. برای خرید و تهیه هاست و دامین می توانید در گوگل جستجو کنید.

 

یادگیری HTML، برای تعریف عناصر مختلف در صفحه

هر صفحه وب (مانند همین صفحه) از اجزاء و عناصر مختلف تشکیل شده است. اجزاء و عناصر معمول در صفحات وب معمولاً هِدِر (بخش بالای صفحه شامل لوگو و منو)، سایدبار (بخش کناری صفحه که ستونی است شامل لینک های مختلف، تبلیغات و غیره)، بخش محتوا (شامل محتوای اصلی صفحه مانند متن، عکس، ویدیو و غیره)، و فوتِر (بخش پایین و انتهایی صفحه که شامل متن کپی رایت و لینک های مختلف است). این موارد بخش های معمول و مشترک یک وب سایت هستند و برای طراحی سایت ابتدا این موارد با استفاده از زبانی به نام HTML (به فارسی: اِچ تی اِم اِل) کدنویسی و تعریف می شود. HTML زبانی است شامل مجموعه ای از Tag های (به فارسی: تَگ) مختلف برای تعریف عناصر مختلف در صفحه. به عنوان مثال از تگ p برای درج متن در صفحه استفاده می شود، از تگ img برای درج یک عکس در صفحه استفاده می شود، از تگ a برای ایجاد لینک در صفحه استفاده می شود، از تگ div برای تقسیم بندی صفحه استفاده می شود، اگر تگ form برای ایجاد فرم در صفحه استفاده می شود و بسیار موارد دیگر که هر یک برای تعریف جزء خاصی در صفحه وب به کار برده می شود. پس از تعریف اجزاء مختلف صفحه با HTML، با زبان دیگری به نام CSS (به فارسی: سی اِس اِس) برای تک تک این اجزاء شکل و شمایلی تعریف می شود. سی اِس اِس در ادامه توضیح داده شده است.

 

یادگیری CSS، برای شکل دهی و ظواهر عناصر صفحه

با استفاده از زبان CSS (به فارسی: سی اِس اِس) به اجزاء تعریف شده با HTML شکل و شمایل داده می شود. به عنوان مثال رنگ متن صفحه چه رنگی باشد، رنگ پس زمینه بخش های مختلف چه رنگی باشد، حاشیه و کادر صفحات چقدر ضخامت داشته و چه رنگی باشند، اندازه و سایز هر بخش چه مقدار باشد، بخش مورد نظر در کدام سمت صفحه قرار داشته باشند، عناصر از جهت های مختلف چه مقدار با هم فاصله داشته باشند و به طور کلی هر آنچه که مربوط به ظاهر و شکل و شمایل صفجه است با استفاده از زبان CSS برای هر جزء تعریف و کدنویسی می شود. یادگیری CSS نسبت به HTML زمان بیشتری نیاز دارد و نکته مهم اینجاست که با یادگیری همین دو زبان HTML و CSS می توان وب سایت طراحی کرد؛ البته وب سایت های Static (به فارسی: اِستاتیک یا ثابت) یعنی وب سایتی که فقط یک صفحه ثابت است و پنل مدیریتی ندارد و برای ویرایش و افزودن صفحه باید کدنویسی آن را ویرایش کرد. به وب سایت های دارای پنل مدیریت و قابلیت هایی مانند ارسال مطلب، آپلود فایل، عضویت کاربران و غیره، وب سایت های Dynamic (به فارسی: داینامیک یا پویا) گفته می شود که 95 درصد وب سایت های موجود داینامیک هستند و هدف این مطلب هم یادگیری طراحی سایت داینامیک است که در ادامه توضیح داده شده است.

 

یادگیری JavaScript، برای ایجاد قابلیت های پیچیده تر

JavaScript (به فارسی: جاوا اِسکِریپت) یک زبان برنامه نویسی Client-Side (به فارسی: سَمتِ کاربر) است که کدهای آن توسط مرورگر کاربر پردازش و اجرا می شوند. کاربرد جاوا اسکریپت در ایجاد قابلیت های پیشرفته مانند بررسی و اعتبارسنجی فرم ها، ارسال درخواست های Ajax (به فارسی: اِیجَکس)، ایجاد افکت های پیچیده مانند اسلایدشوی تصاویر، ایجاد واکنش های مختلف (مانند کلیک ماوس روی چیزی یا فشرده دکمه ای خاص) و بسیاری موارد دیگر است. 
برای توضیح جاوا اسکریپت فرض می کنیم که صفحه ای داریم که یک فرم عضویت با HTML تعریف شده و ظواهر و شکل شمایل صفحه نیز با CSS کدنویسی شده است. با جاوا اسکریپت می توان بررسی کرد که آیا کاربر تمام فیلدهای لازم را پر کرده است یا خیر، اگر نه، یک پیام مبنی بر نیاز به پر کردن تمام فیلدهای لازم نمایش داده شود. سپس می توان بررسی کرد که آیا کاربر شماره تماس خود به صورت صحیح وارد کرد است یا خیر؛ به عنوان مثال شماره تماس باید تماماً از عدد تشکل شده باشد و حداقل 5 کاراکتر و حداکثر 11 کاراکتر طول داشته باشد سپس اگر کاربر شماره تماس خود را به صورت صحیح وارد نکرده بود با نمایش پیامی از کاربر درخواست تایپ کردن شماره تماس صحیح صورت گیرد. پس از تکمیل فیلدهای فرم عضویت توسط کاربر، می توان درخواست عضویت را به صورت Ajax به سرور ارسال کرد. به این معنی که بدون رفرش صفحه اطلاعات به سرور ارسال شود و پاسخ نیز بدون رفرش صفحه نمایش داده شود. این مورد در بسیاری از وب سایت ها با فرم های مختلف دیده می شود به این صورت که کاربر با کلیک رو دکمه ثبت، یک آیکان در حال چرخش نمایش داده می شود و سپس لحظاتی بعد پیامی مبنی بر ارسال فرم، خطا یا غیره نمایش داده خواهد شد. 
کاربرد جاوا اسکریپت در طراحی وب بسیار مهم و گسترده است و اکثر کارهایی که با HTML و CSS ممکن نیست، برای کدنویسی نیازمند این زبان است.

 

یادگیری یک زبان Server-Side، برای برنامه نویسی

زبان Server-Side (به فارسی: سِرور ساید یا سَمتِ سِرور) به زبانی گفته می شود که کدهای آن در سرور سایت پردازش شده و کاربر فقط نتیجه پردازش و اجرای آن را مشاهده خواهد کرد (و نه کدهای اصلی). کاربرد زبان سرور ساید در کدنویسی قابلیت هایی مانند پنل مدیریت سایت، ارسال مطلب، عضویت کاربران، آپلود فایل، پرداخت آنلاین و اینگونه موارد است. 
برخلاف HTML و CSS یا JavaScript که جایگزینی ندارند، برای انتخاب زبان سرور ساید چندین گزینه موجود است که دو مورد اصلی PHP (به فارسی: پی اِچ پی) و ASP.NET (اِی اِس پی دات نِت) هستند. PHP اُپِن سورس و رایگان است و نسبت به ASP.NET میزان استفاده بسیار بیشتری دارد، یعنی چیزی حدود 80 درصد سایت ها بر مبنای PHP هستند و 20 درصد دیگر بر مبنای ASP.NET. البته ASP.NET دقیقاً یک زبان برنامه نویسی تحت وب نیست بلکه بخشی از فریم ورک NET. (به فارسی: دات نت) شرکت مایکروسافت است که معمولاً با بکارگیری زبان برنامه نویسی #C (به فارسی: سی شارپ) برای برنامه نویسی تحت وب به کار می شود. ASP.NET از نظر ساختار و کدنویسی بسیار اصولی تر و منظم تر از PHP است ولی درصد استفاده بیشتر از PHP، منابع یادگیری بسیار، فریم ورک ها و سی ام اس های مختلف (مانند WordPress) و نصب و راه اندازی سریع از مزیت هایی که است که یادگیری PHP را در اولویت قرار می دهد. 
WordPress (به فارسی: وُردپِرس) که در بالا نام برده شد یک CMS، به معنی یک سیستم مدیریت سایت به زبان PHP است که با نصب و راه اندازی آن روی سرور و هاست، کاربر یک سایت آماده با همه قابلیت های مورد نیاز مانند ارسال مطلب، ایجاد دسته بندی، آپلود فایل، عضویت کاربران و غیره را خواهد شد و به این صورت دیگر نیازی به کدنویسی تمام این قابلیت ها از ابتدا نیست که همین باعث کاهش زمان مورد نیاز و هزینه برای طراحی و راه اندازی یک وب سایت خواهد شد. وردپرس رایگان، باکیفیت و انعطاف پذیر است و برای راه اندازی تقریباً هر نوع سایتی کاربرد دارد.

 

یادگیری اصول طراحی

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

 

یادگیری تبدیل PSD به HTML

برخی از اشخاص طراحی یک وب سایت را مستقیماً در نرم افزار کد اِدیتور کدنویسی و تکمیل می کنند (به غیر از مواردی مانند لوگو که معمولاً با کدنویسی ممکن نیست) و برخی دیگر در (معمولاً) نرم افزار فتوشاپ اقدام به طراحی ظاهری صفحه کرده و سپس با نگاه کردن به طرح، آن را کدنویسی می کنند که به این کار تبدیل PSD به HTML گفته می شود (PSD فرمت فایل های فتوشاپ است). تبدیل کردن طرح PSD به HTML با توجه به پیچیدگی طرح می تواند نیازمند مهارت بالایی در کدنویسی باشد چراکه تبدیل طرح PSD به صفحه HTML باید دقیقاً مشابه طرح PSD اصلی باشد. مراحل انجام تبدیل پی اِس دی به اِچ تی اِم اِل به این صورت است که طراح پس از اتمام و نهایی کردن طرح آن را ذخیره کرده و سپس با فتوشاپ اقدام به برش و استخراج تصاویر (مانند لوگو و آیکان ها) که معمولاً با کدنویسی قابل اجرا نیستند می کند. پس از برش همه تصاویر شخص با نگاه کردن به طرح اصلی کدنویسی HTML و CSS را آغاز و تکمیل می کند. طرح های کدنویسی PSD شده بعداً معمولاً به قالب های سیستم های مدیریت سایت مانند WordPress تبدیل و کدنویسی (طراحی قالب وردپرس) می شوند. برای یادگیری تبدیل PSD به HTML شخص می تواند طرح های مختلفی را به صورت تمرینی در فتوشاپ طراحی و سپس اقدام به کدنویسی آن ها نماید؛ همچنین برای تمرین طرح های پیچیده و جدی تری نیز به صورت رایگان قابل دانلود و استفاده می باشند.

 

یادگیری SEO

اصول SEO (به فارسی: سِئو، ولی در انگلیسی اِس ای او صحیح است) به مجموعه ای از قوانین گفته می شود که رعایت این موارد موجب دریافت بازدیدکنندگان بیشتر از موتورهای جستجو به ویژه گوگل خواهد شد. از مهم ترین اصول سئو می توان به نوشتن عنوان مناسب برای صفحات، تکرار عبارت های مورد جستجوی کاربران در متن اصلی صفحه و دریافت بک لینک از سایت های مختلف اشاره داشت. یادگیری اصول سِئو دقیقاً جزو طراحی وب حساب نمی شود ولی برای انجام کارهای حرفه ای یادگیری این اصول لازم است. یادگیری اصول سئو دارای جزئیات زیادی هست ولی باید توجه داشت که موتورهای جستجو به ویژه گوگل هرگز فرمول نحوه رتبه بندی صفحات را اعلام نمی کنند و بیشتر اصول سئو بر مبنای آزمایش و حدس و گمان است که ممکن است درست نباشند. ولی مواردی مانند استفاده از عنوان صحیح، به کارگیری عبارات مورد جستجوی کاربران در متن و دریافت بک لینک از سایت های دیگر، اثبات شده هستند.

 

معرفی وب سایت، فیلم و کتاب برای یادگیری طراحی وب

در حال حاظر بهترین سایت برای یادگیری طراحی وب، سایت W3Schools.com است که شامل آموزش کامل و رایگان تمام زبان های بالا یعنی JavaScript ،CSS ،HTML و PHP است. آموزش های موجود در این سایت به صورت دسته بندی شده و مرحله به مرحله است و نیازی به عضویت و ثبت نام نیز ندارد. آموزش های این سایت متنی و به زبان انگلیسی روان است. 
در مورد فیلم های آموزش طراحی وب نیز، آموزش های دو سایت Lynda.com و Tutsplus.com موارد خوبی هستند ولی باید توجه داشت که استفاده از ویدیوهای این دو سایت نیازمند خرید اشتراک است که با توجه به مقدور نبودن خرید از ایران می توانید آموزش های مربوطه را از سایت های فارسی زبان دانلود کنید. به عنوان مثال "آموزش Lynda HTML" را سرچ کنید. 
در مورد کتاب هم موارد بسیار زیادی به زبان انگلیسی وجود دارد که به عنوان کتاب HTML & CSS: Design and Build Web Sites می تواند گزینه مناسبی باشد که البته با توجه به اینکه امکان خرید نسخه چاپی این کتاب از ایران تقریباً ممکن نیست با جستجوی نام آن می توان آن را دانلود کرد. آموزش های طراحی وب به زبان فارسی نیز موجود است که می توانید در این باره جستجو کنید ولی استفاده از آموزش های انگلیسی زبان به دلیل بروز بودن، اصولی بودن و البته تسلط به زبان انگلیسی ضمن یادگیری، توصیه می شود.

 

درآمد یک طراح سایت چقدر است؟

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

 

یادگیری طراحی وب چقدر زمان نیاز دارد؟

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

 

توضیحات تکمیلی

اول یادگیری HTML، بعد CSS، سپس JavaScript و در نهایت یادگیری یک زبان Server-Side مانند PHP مواردی است که برای طراحی و کدنویسی یک صفحه وب الزامی هستند ولی همانطور که در بالا اشاره شد طراحی وب فقط کدنویسی نیست بلکه سلیقه نیز باید با کدنویسی همراه باشد. برای یادگیری به یک سایت، کتاب یا فیلم اکتفا نشود بلکه از ترکیبی از منابع مختلف برای یادگیری استفاده شود چراکه هر یک لحن و مثال های خود را دارند که به یادگیری بهتر کمک می کند. شخص باید پیام های خطا و مشکلاتی را که هنگام کدنویسی با آن ها مواجه می شود سرچ کرده و راه حل را پیدا کند. وب سایت های فرضی ساده و بعد پیچیده طراحی کرده و کدنویسی را از ابتدا و شخصاً انجام دهد و به هیچ عنوان اقدام به کپی کردن کدهای از پیش نوشته شده نکند که تمرینی بسیار مهم و موثر است. و در نهایت برای یادگیری حرفه ای طراحی وب تمرین مداوم و روزانه لازم است.



2
نظرات
  • user avatar رامین:
    ۱۱:۰۸:۲۷ __ ۱۳۹۸/۰۸/۰۱

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

  • user avatar صالحی:
    ۱۵:۳۵:۲۵ __ ۱۳۹۸/۱۱/۲۴

    واقعا نظم و بیان شما قابل تقدیر است

نظر خود را ارسال کنید



نام:
ایمیل:
دیدگاه:
captcha
کد امنیتی :


advertise
تبلیغات ارزان سایت آموزش برنامه نویسیتبلیغات مخصوص طراحان وب سایتتبلیغات در سایت برنامه نویسیتبلیغات اینترنتی برای برنامه نویساندر آغوش مینیمالیسممنوی همبرگر با سه خط افقی که روی یکدیگر قرار گرفته اند نشانه چیست؟ سوئیچ به یک ستون واحدتبدیل متن ساده به وبلاگ و سایت های پویا با React.jsکتابخانه sass برای استفاده آسان تر از آنکتابخانه سطح بالا برای اتوماتیک سازی اعمال مرورگر لیست برچسب ها
تمامی حقوق این سایت اعم از محتوی ، تصاویر ، قالب و ... متعلق به گروه مهندسی وب سایت سورس کد می باشد.
SourceCodes.ir ، افقی روشن برای برنامه نویسان ، از مبتدی تا حرفه ای

پیشنهادات ویژه سورس کد

پکیج ویژه پروژه پایانی رشته کامپیوتر دانلود مجموعه 70 پروژه کاربردی سی شارپ وب سایت فروشگاه با php