ایجاد یک ارائه پاسخگوی پیشرفته در HTML5

Creating an Advanced Responsive Presentation in HTML5

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

به اطلاعات بیشتری در مورد ایجاد یک ارائه اولیه وب نیاز دارید؟ موارد مرتبط را تماشا کنیدپروژه های HTML5: ایجاد یک ارائه پاسخگودوره

سرفصل ها و درس ها

رفتن به MoreIntroduction1. درک وب پاسخگو پاسخگو 2. طرح بندی شبکه های مایع در Dreamweaver3. در حال گسترش روی یک ساختار شبکه سیال 4. پیشرفته Query Media5. تصاویر انعطاف پذیر و MediaConclusionIntroduction1. شروع کار 2. سازماندهی Sass3 شما. ایجاد شبکه های پاسخگو با Susy4. انیمیشن کردن طرح بندی های شما درجستگاه 1 نمای کلی بنیاد 52. سیستم شبکه در Foundation3. نمای کلی CSS4. سیستم های ناوبری 5. JavaScript EffectsConclusionIntroduction1. برنامه ریزی و تنظیم Up2. داربست 3. ساختمان اصلی Content4. محتوای ما 5 را گسترش می دهیم صفحات اضافی6. در حال اتمام برنامه کاربردی ما ورود Introduction

  • خوش آمدی Welcome

  • با استفاده از پرونده های تمرینی Using the exercise files

  • با استفاده از چالش ها Using the challenges

رفتن به MoreIntroduction1. درک وب پاسخگو پاسخگو 2. طرح بندی شبکه های مایع در Dreamweaver3. در حال گسترش روی یک ساختار شبکه سیال 4. پیشرفته Query Media5. تصاویر انعطاف پذیر و MediaConclusionIntroduction1. شروع کار 2. سازماندهی Sass3 شما. ایجاد شبکه های پاسخگو با Susy4. انیمیشن کردن طرح بندی های شما درجستگاه 1 نمای کلی بنیاد 52. سیستم شبکه در Foundation3. نمای کلی CSS4. سیستم های ناوبری 5. JavaScript EffectsConclusionIntroduction1. برنامه ریزی و تنظیم Up2. داربست 3. ساختمان اصلی Content4. محتوای ما 5 را گسترش می دهیم صفحات اضافی6. در حال اتمام برنامه کاربردی ما ورود 1. Understanding the Project

  • بررسی نتایج نهایی Exploring the final results

رفتن به MoreIntroduction1. درک وب پاسخگو پاسخگو 2. طرح بندی شبکه های مایع در Dreamweaver3. در حال گسترش روی یک ساختار شبکه سیال 4. پیشرفته Query Media5. تصاویر انعطاف پذیر و MediaConclusionIntroduction1. شروع کار 2. سازماندهی Sass3 شما. ایجاد شبکه های پاسخگو با Susy4. انیمیشن کردن طرح بندی های شما درجستگاه 1 نمای کلی بنیاد 52. سیستم شبکه در Foundation3. نمای کلی CSS4. سیستم های ناوبری 5. JavaScript EffectsConclusionIntroduction1. برنامه ریزی و تنظیم Up2. داربست 3. ساختمان اصلی Content4. محتوای ما 5 را گسترش می دهیم صفحات اضافی6. در حال اتمام برنامه کاربردی ما ورود 2. Enhancing the Slideshow

  • در حال قرار دادن فید توییتر از طریق یک iframe Embedding a Twitter feed via an iframe

  • مخفی کردن مکان نما در حالت تمام صفحه Hiding the cursor in full-screen mode

  • با عبور از نقاط گلوله Stepping through bullet points

  • چالش: نقاط گلوله معکوس Challenge: Reverse bullet points

  • راه حل: نقاط گلوله معکوس Solution: Reverse bullet points

رفتن به MoreIntroduction1. درک وب پاسخگو پاسخگو 2. طرح بندی شبکه های مایع در Dreamweaver3. در حال گسترش روی یک ساختار شبکه سیال 4. پیشرفته Query Media5. تصاویر انعطاف پذیر و MediaConclusionIntroduction1. شروع کار 2. سازماندهی Sass3 شما. ایجاد شبکه های پاسخگو با Susy4. انیمیشن کردن طرح بندی های شما درجستگاه 1 نمای کلی بنیاد 52. سیستم شبکه در Foundation3. نمای کلی CSS4. سیستم های ناوبری 5. JavaScript EffectsConclusionIntroduction1. برنامه ریزی و تنظیم Up2. داربست 3. ساختمان اصلی Content4. محتوای ما 5 را گسترش می دهیم صفحات اضافی6. در حال اتمام برنامه کاربردی ما ورود 3. Creating a Self-Running Slideshow

  • ایجاد کد برای پخش خودکار Creating the code for automatic playback

  • افزودن زمان گلوله Adding bullet timing

  • چالش: ایجاد حلقه Challenge: Creating a loop

  • راه حل: ایجاد حلقه Solution: Creating a loop

رفتن به MoreIntroduction1. درک وب پاسخگو پاسخگو 2. طرح بندی شبکه های مایع در Dreamweaver3. در حال گسترش روی یک ساختار شبکه سیال 4. پیشرفته Query Media5. تصاویر انعطاف پذیر و MediaConclusionIntroduction1. شروع کار 2. سازماندهی Sass3 شما. ایجاد شبکه های پاسخگو با Susy4. انیمیشن کردن طرح بندی های شما درجستگاه 1 نمای کلی بنیاد 52. سیستم شبکه در Foundation3. نمای کلی CSS4. سیستم های ناوبری 5. JavaScript EffectsConclusionIntroduction1. برنامه ریزی و تنظیم Up2. داربست 3. ساختمان اصلی Content4. محتوای ما 5 را گسترش می دهیم صفحات اضافی6. در حال اتمام برنامه کاربردی ما ورود 4. Adding Audio and Video

  • با استفاده از MediaElement.js در ارائه خود Using MediaElement.js in your presentation

  • افزودن فیلم Adding video

  • با اتمام فیلم ، به اسلایده بعدی بروید Moving to the next slide when the video completes

  • چالش: روایت صوتی خود در حال اجرا Challenge: Self-running audio narration

  • راه حل: روایت صوتی خود اجرا Solution: Self-running audio narration

رفتن به MoreIntroduction1. درک وب پاسخگو پاسخگو 2. طرح بندی شبکه های مایع در Dreamweaver3. در حال گسترش روی یک ساختار شبکه سیال 4. پیشرفته Query Media5. تصاویر انعطاف پذیر و MediaConclusionIntroduction1. شروع کار 2. سازماندهی Sass3 شما. ایجاد شبکه های پاسخگو با Susy4. انیمیشن کردن طرح بندی های شما درجستگاه 1 نمای کلی بنیاد 52. سیستم شبکه در Foundation3. نمای کلی CSS4. سیستم های ناوبری 5. JavaScript EffectsConclusionIntroduction1. برنامه ریزی و تنظیم Up2. داربست 3. ساختمان اصلی Content4. محتوای ما 5 را گسترش می دهیم صفحات اضافی6. در حال اتمام برنامه کاربردی ما ورود 5. Finalizing the Self-Running Mobile Presentation

  • اضافه کردن مکث "هوشمند" با پیمایش به عقب Adding a "smart" pause with backward navigation

  • ترفندهای سفارشی برای iPad Custom tweaks for iPad

رفتن به MoreIntroduction1. درک وب پاسخگو پاسخگو 2. طرح بندی شبکه های مایع در Dreamweaver3. در حال گسترش روی یک ساختار شبکه سیال 4. پیشرفته Query Media5. تصاویر انعطاف پذیر و MediaConclusionIntroduction1. شروع کار 2. سازماندهی Sass3 شما. ایجاد شبکه های پاسخگو با Susy4. انیمیشن کردن طرح بندی های شما درجستگاه 1 نمای کلی بنیاد 52. سیستم شبکه در Foundation3. نمای کلی CSS4. سیستم های ناوبری 5. JavaScript EffectsConclusionIntroduction1. برنامه ریزی و تنظیم Up2. داربست 3. ساختمان اصلی Content4. محتوای ما 5 را گسترش می دهیم صفحات اضافی6. در حال اتمام برنامه کاربردی ما ورود 6. Enabling Offline Playback

  • با استفاده از حافظه نهان برنامه Using the application cache manifest

  • آزمایش حافظه نهان برنامه Testing the application cache

رفتن به MoreIntroduction1. درک وب پاسخگو پاسخگو 2. طرح بندی شبکه های مایع در Dreamweaver3. در حال گسترش روی یک ساختار شبکه سیال 4. پیشرفته Query Media5. تصاویر انعطاف پذیر و MediaConclusionIntroduction1. شروع کار 2. سازماندهی Sass3 شما. ایجاد شبکه های پاسخگو با Susy4. انیمیشن کردن طرح بندی های شما درجستگاه 1 نمای کلی بنیاد 52. سیستم شبکه در Foundation3. نمای کلی CSS4. سیستم های ناوبری 5. JavaScript EffectsConclusionIntroduction1. برنامه ریزی و تنظیم Up2. داربست 3. ساختمان اصلی Content4. محتوای ما 5 را گسترش می دهیم صفحات اضافی6. در حال اتمام برنامه کاربردی ما ورود Conclusion

  • مراحل بعدی Next steps

نمایش نظرات

ایجاد یک ارائه پاسخگوی پیشرفته در HTML5
جزییات دوره
1h 15m
23
Linkedin (لینکدین) Linkedin (لینکدین)
(آخرین آپدیت)
10,879
- از 5
دارد
دارد
دارد
Justin Putney
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Justin Putney Justin Putney

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