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

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

زبان برنامه نویسی PHP یکی از زبان های برنامه نویسی سمت سرور است که کاربرد اصلی آن، در پیاده سازی وب سایت های دینامیکی (پویا) است. بازنویسی هسته PHP و ایجاد موتور پردازشی زند (Zend Engine) تحول بزرگی را در مسیر و تاریخچه زبان برنامه نویسی PHP ایجاد کرد، و در طی ۱۰ سال، این زبان برنامه نویسی، به مهم ترین ابزار برای پیاده سازی پروژه های وب دینامیکی تبدیل شد. هدف این فرادرس آموزش تمامی نکات و مهارت های عملی لازم برای ورود به دنیای جذاب برنامه نویسی و پیاده سازی دینامیکی وب است.

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

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

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

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

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

در این دوره آموزشی، ما با افزونه های مربوطه جهت سئوی وردپرس آشنا شده و تنظیمات سایت را برای سئو بهتر انجام می دهیم. برای انجام تنظیمات سئو وردپرس، دو افزونه کاربردی با نام های All In One SEO Pack و Wordpress SEO By Yost ارائه شده است که در این دوره، ما به بررسی عملکرد هر دو افزونه پرداخت و در پایان دوره، این دو افزونه را با یکدیگر مقایسه خواهیم کرد.

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

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

طراحی وب یکی از شاخه های برنامه نویسی محسوب می شود. طرح ابتدا در فتوشاپ پیاده سازی می شود سپس به کدهای HTML و CSS با استانداردهای روز جهانی تبدیل می کنیم. این فرادرس برای کسانی که می خواهند به صورت پروژه محور طراحی وب انجام دهند، مناسب است. زیرا ذهن آن ها را برای سوالات مختلفی که دارید باز می کند. به عنوان مثال (چطور این Attribute را استفاده کنم؟ در کجا استفاده کنم؟ برای بخش بندی از div استفاده کنم یا section؟ و …) چون ما هنگام انجام پروژه، تک تک این موضوعات را به شما آموزش می دهیم.

جنگو (Django)، یک وب فریمورک پایتونی رایگان و اپن سورس (Open-source) است که با هدف توسعه سریع، آسان و کارآمد، توسط توسعه دهندگان با تجربه، ساخته شده است. در جنگو می توانید بدون اختراع مجدد چرخ، فقط روی نوشتن برنامه خود تمرکز کنید. جنگو حرفه ای بودن را در کنار سادگی و سرعت به ارمغان می آورد.

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

یک صفحه وب که به صورت حرفه ای طراحی شده باشد دارای دو بخش کلی Client و Server است. بخش کلاینت شامل سه قسمت طراحی ساختار (HTML)، رنگ و لعاب (CSS) و منطق (JavaScript) است. کار با JavaScript کمی دشوار است چرا که اولا بر روی همه مرورگرها به یک شکل اجرا نشده و ثانیا منجر به تولید کدهای پیچیده و طولانی می شود و دادن جلوه های ویژه به عناصر صفحه وب را با دشواری همراه می کند.

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

هدف از این آموزش، ارائه مباحث مربوط به طراحی سایت فروشگاهی با استفاده از فریم ورک ASP.NET MVC است. مسیر آموزش به صورتی است که از ابتدای ساخت پروژه به صورت عملی و مفهومی، آموزش ارائه و همین طور مطالب تکمیلی به مباحث اضافه می شود. به طوری که دانشجو بعد از چند درس، کاملا به مفهوم و معماری MVC مسلط می شود و به راحتی می تواند با استاد همراه شود و در مدت زمان کوتاهی، وب سایت فروشگاهی خود را طراحی و آماده کند.

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

در این فرادرس با تکنولوژی NET Core. آشنا می شویم که با زبان ASP.NET ترکیب و بحث شیرین و جذابی را ارائه می دهد. مخاطبان این آموزش، برنامه نویس هایی هستند که با نسخه ASP.NET MVC آشنایی و قصد مهاجرت از نسخه MVC معمولی به Core MVC را دارند. هدف ما از ارائه این آموزش، یادگیری مباحث NET Core. در سمت وب است، چرا که نسل جدید برنامه نویسی وب بر پایه این تکنولوژی در حال رشد است و به ناچار برنامه نویس هایی که در سمت وب کار می کنند باید این زبان جدید را فرا گیرند تا دانش خود را به روز کرده باشند، پس هدف اصلی ما یادگیری، به روز شدن و ملحق شدن به بازار کار جدید است.

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

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

از طریق Google Sites شما می توانید به سرعت و در ساده ترین حالت ممکن یک وب سایت زیبا و کاربردی طراحی کنید. معمولا کاربرد استفاده از این سرویس برای طراحی وب سایت هایی با کاربرد کار گروهی و همکاری جمعی است که به همین دلیل برای فضاهایی مانند: دانشگاه و پروژه های گروهی، بسیار مناسب می باشد، چرا که در این وب سایت، افراد می توانند به تبادل اطلاعات و به اشتراک گذاری فایل ها بپردازند. در این فرادرس امکانات Google Sites را بررسی می کنیم و نحوه ایجاد یک وب سایت از طریق این سرویس را آموزش می دهیم.

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

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

ما در این آموزش کارمان را با یک صفحه سفید در Adobe Muse آغاز می کنیم. با تمام ابزار مورد نیاز برای طراحی وب سایت آشنا می شویم و در نهایت با طراحی یک وب سایت Mobile-Friendly جذاب، استاندارد و حرفه ای برای موبایل، هم در حالت عمودی و هم در حالت افقی گوشی، کار طراحی را تمام می کنیم. به طوری که در پایان این بخش، شما قادر خواهید بود هر ایده و محتوایی که دارید بر روی وب سایت Mobile-Friendly خودتان پیاده سازی کنید. بعد از آن کارمان را ادامه می دهیم و نحوه بهینه سازی SEO در Adobe Muse را یاد می گیریم تا رتبه سایت را در گوگل افزایش دهیم.

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

آموزش های مقدماتی تکنولوژی های مختلف برنامه نویسی تحت وب فراوان یافت می شوند و تعداد بسیار کمی از این آموزش ها به صورت کاربردی به این تکنولوژی ها می پردازند. به همین منظور، برای استفاده کاربردی از سه تکنولوژی HTML5 ,CSS3 و jQuery آموزشی را تهیه کردیم تا کاربرد این سه تکنولوژی وب را به صورت عملی تدریس نموده و زمینه استفاده کاربردی از مقدمات را فراهم نماییم. بخش یکم آموزش نیز بر همین مبنا پایه ریزی شده بود و مثال های متنوعی در آن ارائه شده بود. در این قسمت، مثال های متنوع تری را ارائه می کنیم تا تسلط شما بر استفاده کاربردی از این سه تکنولوژی افزایش یابد.

نرم افزار دریم ویور (Dreamweaver) یکی از بهترین ابزارها برای طراحی و ساخت انواع وب سایت به شمار می رود. این برنامه به دلیل داشتن رابط کاربری مناسب و سهولت در استفاده، یکی از پرطرفدارترین برنامه های طراحی سایت است. دارا بودن محیط گرافیکی و ویژوال و همچنین امکان نوشتن کدهای HTML و CSS در ساخت وب سایت، از دیگر مزیت های این برنامه محسوب می شود. به سبب رشد روزافزون استفاده از وب سایت ها، نفوذ اینترنت به زندگی روزمره افراد و همچنین پردرآمد بودن حرفه طراحی سایت، یادگیری این برنامه می تواند بسیار مفید و قابل توجه باشد. بر همین اساس و در این فرادرس، سعی بر آن است که مطالب به گونه ای آموزش داده شوند که در نهایت کاربر بتواند با تسلط مناسب بر این نرم افزار، اقدام به طراحی انواع وب سایت و همچنین پیاده سازی ایده های ذهنی خود نماید.

امروزه با پیشرفت ابزارهای گرافیکی و تکنولوژی ها، طراحی رابط کاربری مناسب برای اپلیکیشن ها و سایت ها یکی از مهم ترین مسائل موجود در این حوزه ها محسوب می شود. رابط کاربری (UI) در واقع ظاهر اولیه ای از یک اپلیکیشن یا سایت است که یک طراح رابط کاربری آن را طراحی می کند و توسعه دهنده ها با استفاده از آن، طرح اپلیکیشن یا سایت مورد نظر را توسعه می دهند. طراحی رابط کاربری مناسب، یکی از عوامل مهم در جذب کاربران برای استفاده از سایت یا اپلیکیشن های مختلف محسوب می شود.