هزینه آموزش
۲۳,۰۰۰ تومان

آموزش طراحی پروژه محور نسخه موبایلی سایت با Adobe Muse‎‎‎

آموزش طراحی پروژه محور نسخه موبایلی سایت با Adobe Muse‎‎‎

تعداد دانشجو
۵۴۱ نفر
۸ نفر در یک ماه اخیر
مدت زمان
۵ ساعت و ۲۷ دقیقه
هزینه آموزش
۲۳,۰۰۰ تومان
محتوای این آموزش
۵ بازخورد (مشاهده نظرات)
آموزش طراحی پروژه محور نسخه موبایلی سایت با Adobe Muse‎‎‎

چکیده

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

مدرس
محمد نسیمی فر

دانشجوی کارشناسی ارشد مهندسی برق - مدیریت سیستم های قدرت

مهندس محمد نسیمی فر دانشجوی کارشناسی ارشد مهندسی برق - مدیریت سیستم های قدرت در دانشگاه شهید بهشتی هستند.ایشان تقریبا 6 سال است که به عنوان فریلنسر (freelancer) پروژه های زیادی در حوزه گرافیک و انیمیشن های دو بعدی و سه بعدی (به خصوص محصولات کمپانی های Adobe و Autodesk) انجام داده و همچنین با آموزشگاه های مختلفی در امر تدریس همکاری دارند.

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

اگر در حوزه وب فعال هستید قطعاً می دانید این روزها، یکی از مهم ترین مسئله ای که در طراحی سایت مطرح می شود ساخت وب سایت Responsive و Mobile-Friendly است. یعنی وب سایت هایی که روی تمام دستگاه های هوشمند، به خصوص موبایل، به درستی و متناسب با اندازه صفحه، نمایش داده می شوند.

ضرورت طراحی یک وب سایت Mobile-Friendly چیست؟

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

جالب است بدانید از سال 2015 شرکت گوگل الگوریتم جدیدی توسعه داده که بر اساس آن Mobile-Friendly بودن سایت مشخص می شود و در صورتی که وب سایت این قابلیت را داشته باشد، در موتور جستجو برچسب Mobile-Friendly به آن اختصاص داده می شود و در رتبه (Rank) سایت تأثیر بسیار زیادی دارد. در نتیجه اگر کاربر از طریق موبایل جستجویی انجام دهد، سایت های Mobile-Friendly در اولویت بالاتری قرار می گیرند. به این صورت کاربران وب سایت شما چند برابر خواهد شد.

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

بنابراین، امروزه ساخت یک نسخه موبایل از وب سایت دیگر فقط یک مزیت نیست، بلکه ضروری است. همچنین اگر شما طراح وب هستید، تا حال متوجه اهمیت این موضوع برای کارفرماها شده اید و اگر بتوانید در رزومه خود مهارت ساخت وب سایت Mobile-Friendly را اضافه کنید، قطعاً مشتریان بیشتری جذب خواهید کرد و کارتان را رونق خواهید داد.

همان طور که می دانید برای انتشار وب سایت خود روی بستر اینترنت نیاز به یک دامنه و هاست دارید. در این آموزش نحوه آپلود مستقیم وب سایت روی Host نیز بیان شده است که پیشنهاد می شود برای میزبانی وب سایت و ایمیل، هاست و دامنه مورد نیاز خود را از قبل تهیه نمایید.

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

از طرفی هرکدام از شما ممکن است وب سایت اصلی نسخه دسکتاپ را به روش های مختلفی به غیر از استفاده از Adobe Muse طراحی کرده باشید (به عنوان مثال استفاده از WordPress) و یا خودتان برنامه نویسی باشید که شخصاً کدنویسی می کنید و تصمیم دارید وب سایت را به دیتابیس متصل کنید و یا هر تغییری در کدهای وب سایت ایجاد کنید. با توجه به اینکه طراحی نهایی شما در Adobe Muse، به کدهای استاندارد HTML، CSS، PHP و JavaScript تبدیل می شود، شما همیشه آزاد هستید تا هر تغییری متناسب با شیوه کار خودتان ایجاد کنید. البته در انتهای این آموزش هم به صورت مروری به شما ایده خواهیم داد که چگونه می توانید وب سایت ساخته شده برای موبایل را با نسخه های دیگر هماهنگ کنید و مطابق با روش خودتان آن را توسعه دهید.

 
فهرست سرفصل ها و رئوس مطالب مطرح شده در این مجموعه آموزشی، در ادامه آمده است:
  • درس یکم: معرفی دوره
  • درس دوم: استراتژی ها و اصول طراحی وب سایت Mobile-Friendly
    • تنظیم محتوای وب سایت مطابق موبایل
    • در نظر گرفتن طراحی و قابلیت استفاده
    • استفاده از Gesture های موبایل در طراحی
    • در نظر گرفتن چرخش عمودی و افقی موبایل (Orientation)
  • درس سوم: انجام تنظیمات اولیه
    • ایجاد Mobile Layout
    • تفاوت Fluid Width و Fixed Width
    • تنظیم header
    • تبدیل فونت های فارسی به Web Font
    • تنظیم footer
    • تنظیم background
  • درس چهارم: ساخت انواع منوهای Mobile-Friendly
    • ایجاد لینک های منو
    • ساخت منوی باز شونده (Collapsible) عمودی
    • ساخت منو به صورت LightBox
    • ساخت منوی باز شونده (Collapsible) عرضی
    • ساخت منو با استفاده از Anchor Point
  • درس پنجم: اضافه کردن محتوای سایت
    • اضافه کردن تصاویر و متن ها و تنظیم با نسخه موبایل
    • راهبری کاربر به مطالب مهم (Navigation) با ایجاد Anchor Point
    • ایجاد لینک برای انتقال به نسخه دسکتاپ وب سایت
    • گرافیک های مناسب برای موبایل
    • لینک گرافیک ها به هر URL دلخواه
  • درس ششم: استفاده از Widgetها متناسب با کاربر موبایل
    • ایجاد انواع اسلاید شو با قابلیت Swipe Gesture
    • ایجاد محتوای باز شونده (Collapsible Content) برای استفاده مناسب از فضا
    • استفاده از Google Maps در وب سایت
    • ایجاد فرم تماس با ما و اتصال فرم به ایمیل
    • استفاده از دستور Mailto و Tel
    • خروجی گرفتن از وب سایت نهایی با Export as HTML
    • بررسی کدهای HTML، PHP و JavaScript ایجاد شده
  • درس هفتم: طراحی Responsive برای کامپیوتر، تبلت و موبایل
    • آماده سازی وب سایت برای طراحی ریسپانسیو
    • مفهوم BreakPoint و ایجاد نقاط شکست جدید
    • استفاده از ابزار Pin
    • تنظیم محتوا مطابق صفحه نمایش تبلت
    • تنظیم محتوا متناسب با صفحه نمایش موبایل
    • تغییر منو و پس زمینه برای کاربران موبایل
  • درس هشتم: بهینه سازی SEO
    • کار با پنجره های Page Properties
    • مشخص کردن کلمات کلیدی هر صفحه
    • اضافه کردن Description برای هر صفحه
    • اضافه کردن Description برای عکس های مهم
    • تغییر نام صفحه های وب سایت
    • ایجاد Title برای هر صفحه
    • ایجاد پسوند پیشوند برای Title ها
    • بهینه سازی تصاویر برای موتور جستجو
  • درس نهم: چند ایده برای توسعه وب سایت
    • ثابت کردن منو در بالای مرورگر موبایل
    • استفاده از تب MetaData برای ایجاد تگ Head
    • اضافه کردن کدهای HTML در قسمت های مختلف وب سایت
    • آپلود مستقیم وب سایت روی host با ابزار Upload to FTP Host
    • تست Mobile-Friendly وب سایت از طریق ابزار گوگل
    • ایده برای ارتباط وب سایت طراحی شده با WordPress
 
مفید برای رشته های
  • مهندسی کامپیوتر
  • گرافیک
 

آنچه در این آموزش خواهید دید:

آموزش ویدئویی مورد تائید فرادرس
فایل برنامه ها و پروژه های اجرا شده
فایل PDF یادداشت‌ های ارائه مدرس

نرم افزارهای مرتبط با آموزش

Adobe Muse 2017



پیش نمایش‌ها

پیش نمایش ۱: آشنایی با دوره آموزشی ۱۸ دقیقه

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

دانلود مستقیم پیش‌نمایش - حجم ۶۱ مگابایت (کلیک کنید +)
پیش نمایش ۲: استراتژی های طراحی سایت ۳ دقیقه

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

دانلود مستقیم پیش‌نمایش - حجم ۳ مگابایت (کلیک کنید +)
پیش نمایش ۳: انجام تنظیمات اولیه ۶ دقیقه

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

دانلود مستقیم پیش‌نمایش - حجم ۶ مگابایت (کلیک کنید +)
پیش نمایش ۴: ساخت منو Mobile-Friendly ۶ دقیقه
مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.
پیش نمایش ۵: اضافه کردن محتوای سایت ۷ دقیقه
مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.
پیش نمایش ۶: استفاده از Widget ها ۱۲ دقیقه
مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.
پیش نمایش ۷: طراحی Responsive (الف) ۱۵ دقیقه
مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.
پیش نمایش ۸: طراحی Responsive (ب) ۵ دقیقه
مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.
پیش نمایش ۹: بهینه سازی SEO ۵ دقیقه
مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.
پیش نمایش ۱۰: ایده برای توسعه وب سایت ۴ دقیقه
مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.

راهنمای تهیه آموزش ها

آیا می دانید که تهیه یک آموزش از فرادرس و شروع یادگیری چقدر ساده است؟

راهنمایی بیشتر ( +)

در مورد این آموزش یا نحوه تهیه آن سوالی دارید؟
  • با شماره تلفن واحد مخاطبین ۵۷۹۱۶۰۰۰ (پیش شماره ۰۲۱) تماس بگیرید. - تمام ساعات اداری
  • با ما مکاتبه ایمیلی داشته باشید (این لینک). - میانگین زمان پاسخ دهی: ۳۰ دقیقه


اطلاعات تکمیلی

نام آموزش آموزش طراحی پروژه محور نسخه موبایلی سایت با Adobe Muse‎‎‎
ناشر فرادرس
شناسه اثر ۸–۱۲۴۵۲–۰۶۱۳۸۳ (ثبت شده در مرکز رسانه‌های دیجیتال وزارت ارشاد)
کد آموزش FVADB96052
مدت زمان ۵ ساعت و ۲۷ دقیقه
زبان فارسی
نوع آموزش آموزش ویدئویی     (کیفیت HD - مورد تایید فنی فرادرس)
حجم دانلود ۹۷۱ مگابایت     (کیفیت ویدئو HD‌ با فشرده سازی انحصاری فرادرس)



نظرات

تا کنون ۵۴۱ نفر از این آموزش استفاده کرده اند و ۵ نظر ثبت شده است.
حسام
حسام

خوب بود. من خیلی نکته های خوبی از این آموزش یاد گرفتم.
پاسخ به نظر

امیرحسین
امیرحسین

آموزش خیلی عالی و خوب بود. راضی بودم.
پاسخ به نظر

امین
امین

آموزش خوب بود. راضی بودم. استفاده کردم و تونست نیازمو تا حد زیادی برطرف کنه
پاسخ به نظر

روشنک
روشنک

آموزش خیلی خوبی بود. راضی بودم.
پاسخ به نظر

سیدجواد
سیدجواد

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

پاسخ به نظر



برچسب‌ها: Adobe Muse | Anchor point | Breakpoint | Collapsible | Collapsible Content | Description | footer | Gesture | Google Maps | Google Maps در وب سایت | header | LightBox | Mobile Friendly | Mobile Layout | Mobile-friendly Website | Navigation | Orientation | Responsive | Responsive حالت افقی گوشی | SEO | Swipe Gesture | Web Font | website | Website making | Widget | wordpress | ادوبی میوز | اسلاید شو با قابلیت Swipe Gesture | اسلایدشو با قابلیت Swipe Gesture | اصول طراحی وب سایت | ایجاد Mobile Layout | ایجاد Title | ایجاد لینک منو | برنامه نویسان | برنامه نویسی وب | بهینه سازی SEO | تبدیل فونت فارسی به Web Font | ساخت Footer | ساخت Header | ساخت نسخه موبایل سایت | طراحی Responsive | طراحی سایت بدون کدنویسی | طراحی نسخه موبایل | طراحی وب | قابلیت Swipe Gesture | گرافیک مناسب برای موبایل | محتوای سایت | محتوای وب سایت | منو به صورت LightBox | منوهای Mobile-Friendly | منوی باز شونده عرضی | منوی باز شونده عمودی | وب سایت Mobile-Friendly