🔔 با توجه به بهبود نسبی اینترنت، آمادهسازی دورهها آغاز شده است. به دلیل تداوم برخی اختلالات، بارگذاری دورهها ممکن است با کمی تأخیر انجام شود. مدت اشتراکهای تهیهشده محفوظ است.
لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
ایجاد یک ارائه پاسخگو در HTML5
- آخرین آپدیت
Creating a Responsive Presentation in HTML5
نکته:
ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره:
با نویسنده جاستین پاتنی همراه باشید زیرا او از فناوریهای باز (HTML5، jQuery و CSS) برای ایجاد یک نمایش اسلاید ارائه پویا استفاده میکند که به طرحبندیهای موبایل و دسکتاپ پاسخ میدهد. یاد بگیرید که نمایش اسلاید را متناسب با پروژه بعدی خود سفارشی کنید و آثار هنری، عکاسی و سایر انواع محتوا را نمایش دهید.
نحوه ساختاربندی محتوای HTML و اسلاید را کشف کنید. ناوبری را طوری طراحی کنید که به کلیکها، ورودی صفحهکلید و ژستهای سوایپ واکنش نشان دهد. و از CSS برای سفارشی کردن نمایش اسلاید برای صفحات مختلف و انتقال متحرک استفاده کنید. جاستین همچنین شامل یک سری جفت چالش و راه حل برای آزمایش مهارت های شما است.
سپس، وقتی آماده شدید، تماشا کنیدپروژه های 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
پیش نیازهای این دوره
Prerequisites for this course
با استفاده از پرونده های تمرینی
Using the exercise files
با استفاده از چالش ها
Using 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
اکتشاف فن آوری های برجسته HTML5 ، CSS3 و JavaScript (jQuery)
Exploring highlighted HTML5, CSS3, and JavaScript (jQuery) technologies
رفتن به MoreIntroduction1. درک وب پاسخگو پاسخگو 2. طرح بندی شبکه های مایع در Dreamweaver3. در حال گسترش روی یک ساختار شبکه سیال 4. پیشرفته Query Media5. تصاویر انعطاف پذیر و MediaConclusionIntroduction1. شروع کار 2. سازماندهی Sass3 شما. ایجاد شبکه های پاسخگو با Susy4. انیمیشن کردن طرح بندی های شما درجستگاه 1 نمای کلی بنیاد 52. سیستم شبکه در Foundation3. نمای کلی CSS4. سیستم های ناوبری 5. JavaScript EffectsConclusionIntroduction1. برنامه ریزی و تنظیم Up2. داربست 3. ساختمان اصلی Content4. محتوای ما 5 را گسترش می دهیم صفحات اضافی6. در حال اتمام برنامه کاربردی ما ورود
2. Creating Slides
ساختار HTML
Structuring the HTML
ایجاد محتوای اسلاید
Creating slide content
ایجاد شکل پیش فرض اسلاید
Creating the default slide appearance
رفتن به MoreIntroduction1. درک وب پاسخگو پاسخگو 2. طرح بندی شبکه های مایع در Dreamweaver3. در حال گسترش روی یک ساختار شبکه سیال 4. پیشرفته Query Media5. تصاویر انعطاف پذیر و MediaConclusionIntroduction1. شروع کار 2. سازماندهی Sass3 شما. ایجاد شبکه های پاسخگو با Susy4. انیمیشن کردن طرح بندی های شما درجستگاه 1 نمای کلی بنیاد 52. سیستم شبکه در Foundation3. نمای کلی CSS4. سیستم های ناوبری 5. JavaScript EffectsConclusionIntroduction1. برنامه ریزی و تنظیم Up2. داربست 3. ساختمان اصلی Content4. محتوای ما 5 را گسترش می دهیم صفحات اضافی6. در حال اتمام برنامه کاربردی ما ورود
3. Displaying Pages and Creating Navigation
با استفاده از jQuery برای نمایش صفحه فعلی
Using jQuery to display the current page
ناوبری کلیک و صفحه کلید را اضافه کنید
Adding click and keyboard navigation
افزودن حرکات کش رفتن برای تلفن همراه
Adding swipe gestures for mobile
راه حل: ناوبری صفحه کلید سفارشی
Solution: Customized keyboard navigation
چالش: یک صفحه مکث ایجاد کنید
Challenge: Create a pause screen
راه حل: یک صفحه مکث ایجاد کنید
Solution: Create a pause screen
رفتن به MoreIntroduction1. درک وب پاسخگو پاسخگو 2. طرح بندی شبکه های مایع در Dreamweaver3. در حال گسترش روی یک ساختار شبکه سیال 4. پیشرفته Query Media5. تصاویر انعطاف پذیر و MediaConclusionIntroduction1. شروع کار 2. سازماندهی Sass3 شما. ایجاد شبکه های پاسخگو با Susy4. انیمیشن کردن طرح بندی های شما درجستگاه 1 نمای کلی بنیاد 52. سیستم شبکه در Foundation3. نمای کلی CSS4. سیستم های ناوبری 5. JavaScript EffectsConclusionIntroduction1. برنامه ریزی و تنظیم Up2. داربست 3. ساختمان اصلی Content4. محتوای ما 5 را گسترش می دهیم صفحات اضافی6. در حال اتمام برنامه کاربردی ما ورود
4. Creating a Responsive Layout
تصمیم گیری در مورد نحوه پاسخگویی عناصر
Deciding how elements will respond
ترجمه ایده ها به CSS
Translating ideas into CSS
با استفاده از پرس و جوهای رسانه ای برای تنظیم طرح
Using media queries to adjust the layout
تمام صفحه
Full screen
انتقال CSS
CSS transitions
چالش: ایجاد سایه متن پاسخگو
Challenge: Creating a responsive text shadow
راه حل: ایجاد سایه متن پاسخگو
Solution: Creating a responsive text shadow
رفتن به MoreIntroduction1. درک وب پاسخگو پاسخگو 2. طرح بندی شبکه های مایع در Dreamweaver3. در حال گسترش روی یک ساختار شبکه سیال 4. پیشرفته Query Media5. تصاویر انعطاف پذیر و MediaConclusionIntroduction1. شروع کار 2. سازماندهی Sass3 شما. ایجاد شبکه های پاسخگو با Susy4. انیمیشن کردن طرح بندی های شما درجستگاه 1 نمای کلی بنیاد 52. سیستم شبکه در Foundation3. نمای کلی CSS4. سیستم های ناوبری 5. JavaScript EffectsConclusionIntroduction1. برنامه ریزی و تنظیم Up2. داربست 3. ساختمان اصلی Content4. محتوای ما 5 را گسترش می دهیم صفحات اضافی6. در حال اتمام برنامه کاربردی ما ورود
Conclusion
جاستین پوتنی یک طراح ، انیماتور ، توسعه دهنده ، نویسنده ، Adobe Pro ، کارآفرین و دونده مینیمالیستی است.
جاستین با استفاده از نرم افزار و آموزش ، بر ایجاد اختلاف بین طراحان و توسعه دهندگان تمرکز دارد. شرکت او ، Ajar Productions ، ابزارهایی را برای اتوماسیون کارهای تکراری (مانند اتصال لب برای انیمیشن) و ایجاد فرصت های جدید برای حرفه ای های خلاق (مانند انتشار طرح های خود در قالب های جدید) ایجاد می کند.
نمایش نظرات