آموزش آماده سازی سایت شما برای شبکیه چشم

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

مقدمه Introduction

• خوش آمدی Welcome

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

1. معرفی HiDPI یا شبکیه 1. Introducing HiDPI or Retina

• HiDPI (شبکیه) چیست؟ What is HiDPI (retina)?

• گزینه هایی برای بهتر شدن محتوای سایت در HiDPI Options for making your site content look better on HiDPI

• ابزارهایی که ممکن است در طول راه از آنها استفاده کنید Tools you may use along the way

2. فونت های آیکون 2. Icon Fonts

• درک قلم های نمادین (خوب و بد) Understanding icon fonts (good and bad)

• اولین قلم نماد خود را به طرح خود اضافه کنید Add your first icon font to your design

• از فونت های آیکون در موقعیت های مختلف استفاده کنید Use icon fonts in different situations

• یک حالت شناور را به فونت های آیکون اضافه کنید Add a hover state to icon fonts

• انیمیشن را به یک قلم آیکون اضافه کنید Add animation to an icon font

3. SVG 3. SVG

• درک SVG Understanding SVG

• ساختن یک فایل SVG با استفاده از Illustrator Making an SVG file using Illustrator

• بهینه سازی SVG Optimizing SVG

• افزودن پرونده SVG (.svg) به صفحه خود Adding an SVG file (.svg) to your page

• رفع شده برای اینترنت اکسپلورر پاسخگو Fixes for responsive Internet Explorer

• افزودن SVG به صورت آنلاین Adding SVG inline

• برای اینترنت اکسپلورر پاسخگو درون خطی رفع می کند Fixes for inline-responsive Internet Explorer

• افزودن SVG به عنوان URI درون خطی (و چرا) Adding SVG as inline URI (and why)

• افزودن یک بازپرداخت SVG برای مرورگرهای قدیمی Adding an SVG fallback for older browsers

4- فاویکون ها 4. Favicons

• امروز با شناختن علاقه مندی ها Understanding favicons today

• ایجاد فاویکون Creating favicons

• افزودن موارد دلخواه به صفحات خود Adding favicons to your pages

5. تصاویر HiDPI 5. HiDPI Images

• درک روشهای مختلف موجود Understanding the different methods available

• فقط از تصویر HiDPI استفاده کنید (مقیاس پذیر) Just use the HiDPI image (scaled)

• مبادله تصویر پس زمینه CSS ساده Simple CSS background image swap

• روش ساده JavaScript (retina.js) Simple JavaScript method (retina.js)

• PictureFill چیست؟ What is PictureFill?

• کار با PictureFill Working with PictureFill

نتیجه Conclusion

• منابع Resources

• خداحافظ Goodbye