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

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

ساختار پایه صفحات وب که تمام المان های یک سایت بر روی آن پیاده می شوند با استفاده از یک زبان نشانه گذاری به نام HTML (Hyper Text Markup Language) ایجاد می شود. HTML بدنه اصلی صفحات وب برای توصیف ساختار صفحات وب است. علاوه بر این، HTML دارای مجموعه ای از المان هاست و این المان ها به مرورگر اعلام می کنند که محتوای یک وبسایت چطور نمایش داده شود. HTML به مرورگر کمک می کند تا ساختار یک فایل را درک کرده و آن را در بستر اینترنت نمایش دهد، همچنین این امکان را برای شما فراهم می کند تا فایل های صوتی، ویدئو و دیگر برنامه های موجود را بر روی صفحات وبسایت خود نمایش دهید. علاوه بر این، طراحان وبسایت می توانند از HTML برای طراحی فرم های مورد استفاده برای سفارش محصولات، انجام رزرواسیون یا جستجو برای اطلاعات استفاده کنند. آخرین ورژن معرفی شده از این زبان نشانه گذاری، HTML5 است. در لیست زیر فهرست مفاهیم مورد تدریس در مورد HTML آورده شده است:

• HTML چیست
• آموزش ساختار HTML
• المان های HTML
• تگ های HTML در آموزش طراحی سایت
• آموزش اتریبیوت های HTML
• تگ تیتر و استفاده در HTML
• آموزش تگ p در HTML
• رنگ ها در HTML
• لینک و انواع آن در HTML
• ساخت لینک در HTML
• تگ تصویر در HTML
• آموزش تغییر سایز تصویر در HTML
• شناور سازی تصویر در سایت بوسیله HTML
• ساخت جدول ها در HTML
• ساخت انواع لیست ها در HTML
• آموزش کلاس و آی دی در HTML
• آموزش ساخت فرم در HTML
• آموزش المان های فرم در HTML
• غیرفعال کردن المان های موجود در فرم در HTML
• ساخت اولین برنامه داینامیک ساده
• آموزش Input در HTML
• آموزش اتریبیوت های Input
• متن ها و چگونگی ساختار دهی به آنها در HTML
• ساختار درختی و سلسله مراتبی در HTML

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

• چرا HTML5 نیاز است
• ویژگی های HTML5
• تعریف اسناد HTML5
• دستورات HTML5
• عنصر Header
• عنصر Nav
• عنصر Section
• عنصر Article
• عنصر Aside
• عنصر Footer
• بازنگری مدل محتوا

در این بخش از آموزش طراحی سایت با مفاهیم CSS آشنا می شویم. CSS که مخفف Cascading Style Sheets است، Cascading Style Sheets یا به اختصار CSS زبانی آسان برای استایل دهی به صفحات سایت است. این زبان به شما این اجازه را می دهد تا فونت وبسایت، رنگ محتوا، لینک ها و رنگ وبسایت و ... را به آسانی تغییر دهید؛ علاوه بر این، امکان دسترسی به سایت، بازدهی، انعطاف پذیری و سازگاری آن با مرورگر را نیز بهبود می بخشد. به زبان ساده اگر HTML را بعنوان اسکلت و بدنه یک ماشین در نظر بگیریم، CSS استایل و رنگ آمیزی بدنه خواهد بود. در لیست زیر فهرست مفاهیم مورد تدریس در CSS آورده شده است:

• آشنایی با CSS و کاربردهای آن
• آموزش دستورات CSS
• آشنایی با واژه Cascadeو نحوه عملکرد آن
• آشنایی با CSS داخلی و خارجی و تفاوت های آنها
• انواع انتخاب گرها و چگونگی ترکیب آنها با یکدیگر در CSS
• وراثت در CSS
• رنگ ها در CSS
• Borders در CSS
• آموزش Margin , Padding
• آموزش Height , Width در طراحی وب سایت
• آموزش باکس مدل در طراحی وب
• آموزش Text در CSS
• فونت در CSS
• آشنایی با ویژگی های یک فونت Style, Weight, Variant
• آموزش لینک ها در CSS
• کار با لیست ها در css
• آموزش Table در CSS
• آموزش Display در CSS
• آموزش Max-Width در طراحی وب سایت
• آموزش Position در CSS
• ویژگی Overflow در css
• آموزش Float در طراحی وب سایت
• آموزش Align در طراحی وب سایت
• آموزش Combinators
• آموزش Navigation Bar
• آموزش DropDowns
• آموزش Attr Selectors در CSS
• آموزش Forms در CSS
• تنظیم کردن تصاویر در CSS
• آشنایی با انواع صفحات سایت در آموزش طراحی سایت
• آشنایی با صفحات تک ستونی در طراحی سایت
• آشنایی با صفحات چندستونی در طراحی سایت
• ساخت صفحات سه ستونی ساده و پیچیده در وبسایت
• آشنایی با صفحات Absolutely-Positioned
• آشنایی با باگ های مختلف در مرورگرهای مختلف

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

• آموزش CSS GRID
• آموزش مدیا کوئری در CSS
• کار کردن با تصاویر ریسپانسیو و مفاهیم آن
• آموزش نمایش فیلم به صورت ریسپانسیو
• طراحی قالب های واکنش گرا
• آموزش Mobile First در طراحی سایت

زمانی که بخواهید یک وبسایت را در سریع‌ترین زمان ممکن ایجاد کنید باید از ابزارهای بخصوصی برای این کار استفاده کنید. عموما به این ابزارها کتابخانه یا فریمورک گفته می‌شود. هر کتابخانه یا فریمورک به مجموعه‌ای از دستورات گفته می‌شود که با فراخوانی هر کدام از آن‌ها بخشی از وبسایت‌تان ایجاد می‌شود. در بین برترین فریمورک‌ها برای طراحی وبسایت، بوت استرپ از همه موارد پر استفاده تر است. BootStrap یک فریمورک رایگان و منبع باز از CSS است که برای توسعه و طراحی وبسایت های ریسپانسیو (واکنش گرا) بسیار مفید است علاوه بر این، Bootstrap مجموعه گسترده ای از ابزارها را شامل می شود و بعنوان یکی از فریمورک های فرانت-اند، امکان ساخت وبسایت هایی با قابلیت پاسخگویی سریع را تا حد امکان آسانتر می کند. . این فریمورک قالب های پایه CSS و جاوا اسکریپت را که برای طراحی فرم ها، دکمه ها، منوها و دیگر کامپوننت های رابط کاربری مفید است را شامل می شود.

• BootStrap و کاربرد آن
• نصب و راه اندازی BootStrap
• آموزش سیستم شبکه ای Bootstrap
• آموزش شبکه های تو در تو در bootstrap
• رنگ ها در BootStrap
• جدول در BootStrap
• آموزش تصاویر در BootStrap
• آموزش Button در BootStrap
• آموزش ایجاد Breadcrumb در Bootstrap
• آموزش Jumbotron در Bootstrap
• آموزش صفحه بندی در بوت استرپ
• آموزش منو کشویی در bootstrap
• آموزش collapse در bootstrap
• فرم ها در bootstrap
• اعتبار سنجی فرم ها در Bootstrap
• Input در بوت استرپ
• آموزش FlexBox
• استفاده از Icon در بوت استرپ
• آموزش Tooltips و Modals
• آموزش Carousel
• آموزش Alert در Bootstrap
• آموزش کار با Popover در Bootstrap

JavaScript یکی از سه زبانی است که توسعه دهندگان وبسایت باید یاد بگیرند. این زبان رفتار صفحات وب را برنامه نویسی کرده و می تواند عملیات هایی همچون جمع، ضرب و اعتبار سنجی داده ها را انجام داده و HTML و CSS را بروزرسانی کرده و تغییر دهد. از جاوا اسکریپت می توان برای نمایش انیمیشن ها، اجرا برنامه های صوتی و تصویری، نمایش timer یا استفاده از منو همبرگر آبشاری استفاده کرد. علاوه بر این، جاوا اسکریپت در زمینه ساخت برنامه های تحت وب و موبایل، ساخت وب سرورها و بازی سازی کاربرد دارد. به بیان ساده، جاوا اسکریپت ساخته شد تا صفحات وب را بصورت داینامیک و پویا ارائه دهد. اگر بپرسید که ضرورت یادگیری جاوا اسکریپت در چیست، جواب شما به صورت خلاصه در سه سطر زیر است :

1. جاوا اسکریپت تنها زبان برنامه نویسی بومی برای مرورگرهای وب است.
2. جاوا اسکریپت معمول ترین زبان برنامه نویسی است.
3. برای یادگیری و شروع، زبان جذاب و آسانی است.

• javascript چیست
• آموزش جایگذاری مناسب دستورات در جاوا اسکریپت
• آموزش انواع متغیرها در javascript
• آموزش متغیرهای by value و by reference
• آموزش عملگرها در javascript
• انواع داده در javascript
• آموزش تابع در javascript
• آموزش اشیا در جاوا اسکریپت
• رویدادها در جاوا اسکریپت
• onClick Event آموزش رویداد
• آشنایی با رویدادهای onBlur و onFocus
• کار کردن با Timer در جاوا اسکریپت
• Property در object های جاوا اسکریپت
• آرایه ها در javascript
• Date در جاوا اسکریپت
• کار با ساختار شرطی در جاوا اسکریپت
• ساختار حلقه ها در جاوا اسکریپت
• آموزش اسکوپ در JavaScript
• آموزش پروتوتایپ در جاوا اسکریپت
• آموزش dom در جاوا اسکریپت
• آموزش Node در جاوا اسکریپت
• دسترسی به المان های DOM
• ایجاد تغییر در المان های DOM
• آموزش ساخت المان در DOM
• شی گرایی در javascript
• فراخوانی تابع در جاوا اسکریپت
• آموزش فرم ها در جاوا اسکریپت
• دسترسی به عناصر فرم های وب در جاوا اسکریپت
• آموزش اعتبار سنجی فرم ها در جاوا اسکریپت
• مخفی کردن عناصر فرم های وب با javascript
• آموزش انواع خطا در جاوا اسکریپت
• رفع خطا بوسیله firebug در جاوا اسکریپت
• مراحل رفع خطا در جاوا اسکریپت

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

از جمله مزایای استفاده از جی کوئری می توان به موارد زیر اشاره کرد :

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

Ajax تکنیکی برای ایجاد صفحات وب بصورت داینامیک و سریع است. Ajax این امکان را برای صفحات وب فراهم می کند تا بتوانند با تبادل داده هر چند اندک با سرور، بروزرسانی شوند. در واقع منظور این است که می توانیم بخش هایی از صفحه وب را بدون بارگذاری مجدد یک صفحه بصورت کامل بروزرسانی کنیم. از جمله برنامه هایی که تکنیک Ajax را بکار می گیرند می توان به Google Maps, Gmail , Youtube, Facebook tabs اشاره کرد.

• Ajax چیست
• تشریح مفاهیم Synchronous با Asynchronous
• آموزش XMLHttp در Ajax
• آموزش Request در Ajax
• آموزش Response در Ajax
• آموزش XML File در Ajax
• متد پست در مقابل متد Get
• آشنایی با مفهوم Data Serialization
• آشنایی با مفهوم Action URL در Ajax
• آشنایی با مفهوم Action URL
• آشنایی با Partial Update در Ajax
• خواندن داده ها با Ajax

در این بخش به آموزش جاوا اسکریپت پیشرفته یا همان اکما اسکریپت می پردازیم. اکما اسکریپت (ECMAScript) یک استاندارد بین المللی است که چارچوب و مشخصات زبان برنامه نویسی جاوا اسکریپت را تعریف می کند. این استاندارد توسط سازمان ECMA (European Computer Manufacturers Association) تدوین شده و به عنوان پایه و اساس زبان جاوا ا سکریپت شناخته می شود.

• آموزش اکما اسکریپت - تعریف متغیرها در ECMAScript
• آموزش کار با VS Code
• آموزش var در ECMA Script
• آموزش Let در ECMA Script
• آموزش Const در ECMA Script
• آموزش آرایه ها در ECMA Script6
• آموزش Local Scope در جاوا اسکریپت
• آموزش Place Holder ها در ECMA Script
• آموزش Arrow function ها در ECMA Script
• آموزش سیستم های ماژولار در اکما اسکریپت
• آموزش کاربردی Global scope در جاوا اسکریپت
• آموزش انواع حلقه تکرار در جاوا اسکریپت پیشرفته

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

• مفهوم کلاس
• طراحی متدهای کلاس
• طراحی property های کلاس
• آموزش مفهوم Encapsulation در ECMA
• آموزش ساخت Seter و Geter در ECMA Script
• آموزش مفهوم static در شی گرایی ECMA Script
• آموزش مفهوم Constructor و Destructor در ECMA Script
• آموزش مفاهیم مدیریت حافظه Stack و heap و کار برد آن در شی گرایی