آموزش ایجاد یک Responsive پیشرفته در HTML5

Creating an Advanced Responsive Presentation in HTML5

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

آیا برای ایجاد یک ارائه اولیه وب به اطلاعات بیشتری نیاز دارید؟ دوره HTML5 Projects: ایجاد یک سخنرانی پاسخگو را مشاهده کنید.
موضوعات شامل:
  • جاسازی خوراک توییتر در iframe
  • ایجاد کد برای پخش خودکار
  • استفاده از MediaElement.js در ارائه خود
  • افزودن فیلم و صدا

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

رفتن به 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

نمایش نظرات

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

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Justin Putney Justin Putney

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