سافاری 9 و هر آنچه که طراحان وب باید در مورد آن بدانند

• سافاری 9 و هر آنچه که طراحان وب باید در مورد آن بدانند

بحث اصلی کنفرانس اخیر WWDC اپل پیرامون دو سیستم عامل جدید این شرکت بود . el capitan   که نسخه ی جدید سیستم عامل میکینتاش است و ios9 . این دو سیستم عامل در حال حاضر برای توسعه دهندگان اپل در دسترس هستند و ماه آینده نسخه ی بتای آن ها برای دسترسی عموم منتشر می گردد و نسخه ی نهایی آن ها نیز در پاییز 2015 در اختیار عموم قرار می گیرد.

نکته ی پنهان در میان اطلاعیه های شرکت اپل در رابطه با فعالیت های تجاریش ، سرویس ها و خدمات این شرکت مانند سرویس های پخش موسیقی اپل ، این بود که اپل دنیای وب را چگونه می بیند ، نقش مرورگرsafari  و روند تکاملی آن در سال های پیش رو . . .

1. SCROLL SNAPPING

در واقع اگر تجربه ی کار کردن با صفحات single-page  یا تک صفحه ای را داشته باشید که در آنها با اسکرول کردن ، صفحات گوناگون زیر هم به نمایش در می آیند مفهوم scroll snapping را درک خواهید کرد . یکی از دغدغه های اصلی هر طراح وبی پیاده سازی این صفحات با کدهای css  است . scroll snapping که با جاوا اسکریپت پیاده سازی شده روشی ساده برای انجام این کار می باشد .

این روش طراحی مورد توجه شرکت اپل قرار گرفته است و مرورگر safari 9  روش زیر را برای استفاده از scroll snapping در کدهای css  معرفی کرده است و با استفاده از این استاندارد کار طراحان وب برای نمایش طراحی های تک صفحه ای در مرورگر safari 9  راحت می شود :

 -webkit-scroll-snap-type, -webkit-scroll-snap-points-y, -webkit-scroll-snap-points-x, -webkit-scroll-snap-destination, and -webkit-scroll-snap-coordinate

2. PINNED SITES

Pinned sites  که اگر بخواهیم معادل فارسی برای آن پیدا کنیم باید عبارت سایت های دوخته شده را به کار ببریم روشی است جدید که در مرورگر سافاری 9 معرفی شده است . این روشی است که به ما این امکان را می دهد که سایت های مورد علاقه ی مان برای دسترسی سریع همیشه در مرورگر باز باشند بدون اینکه مجبور باشیم برای آنها تبی جدید در مرورگر باز کنیم . برای استفاده از این قابلیت سافاری 9 کافی است که تب باز شده ی مورد نظرمان را با انگشتمان بکشیم به سمت چپ ،  تا یک آیکون کوچک درbookmarks bar مرورگر برای دسترسی هرچه سریعتر به سایت مورد نظرمان ساخته شود .

تمام کاری که طراحان سایت باید انجام دهند این است که یک آیکون کوچک با حاشیه ی سیاه و پیش زمینه ی transparent  با فرمت svg بسازند و آن را در قسمت head  کدهای html  لینک کنند :

اگر می خواهید آیکونتان رنگ داشته باشد می توانید از متاتگ زیر استفاده کنید :

3. پیشرفت ویدئوها در html 5 

سافاری 9 روشی پیشرفته برای نمایش ویدیوها با html5 معرفی کرده است . این روش که  PiP (Picture in Picture)نام دارد روشی است بسیار جذاب که این امکان را به ما می دهد که بتوانیم یک ویدیو را به  صورت کوچک شده در گوشه ای از مرورگرمان اجرا کنیم و در عین حال به کارهای دیگرمان بپردازیم و برای این کار لازم نیست اجرای ویدیوی مورد نظرمان را متوقف کنیم . یعنی تصور کنید تا 6 ماه دیگر می توانید در گوشیتان در حین رسیدن به کارهای دیگرتان ویدیوی مورد علاقه ی خودتان را نیز در گوشه ای از صفحه ی نمایشتان دنبال کنید .

4. رویدادهای لمسی نیروی

مک بوک های جدید اپل ویژگی لمسی نیرویی trackpads را دارا می باشند . در واقع trackpad ها فقط برای تشخیص ضربه نیستند بلکه به مقدار نیروی وارد شده حساس می باشند . سافاری 9 چند رویدادهای جدید جاوا اسکریپت معرفی کرده است که برای کنترل ویژگی های webkitmouseforcewillbegin ، webkitmouseforcedown، webkitmouseforceup و webkitmouseforcechanged به کار می روند . ویژگی force touch می توانند مکمل خوبی برای نویگیشن ها و منوها باشند اما در این نقطه این پیشرفت فقط وابسته به ساختارهای نرم افزاری نیست بلکه محدودیت های سخت افزاری نیز وجود دارند . با این حال اگر به شکل روزافزون مورد استفاده قرار گیرند برخی از قابلیت های جالب آنها به ویژه در بازی ها و طراحی رابط کاربری می تواند مورد توجه قرار گیرد.

5. SFSAFARIVIEWCONTROLLER

در واقع SFSafariViewController برای طراحان اپلیکیشن ها جذابیت بیشتری دارد تا طراحان وب ، چرا که این ویژگی به اپلیکیشن ها اجازه می دهد که با استفاده از مفسر safari  محتوای وب را به همان شکل نشان دهند .

برای مثال تصور کنید یک شرکت در کنار وبسایت خود یک اپلیکیشن نیز دارد . این ویژگی safari  این امکان را به کاربر می دهد که محتوای وب را به همان شکل در اپلیکیشن مورد نظر ببیند . در واقع این ویژگی گامی  بزرگ در جهت یکپارچه سازی و بومی کردن وب می باشد .

6. ECMASCRIPT

توسعه دهندگان جاوا اکریپت واقعا هیجان زده خواهند شد اگر بدانند سافاری 9 شامل پشتیبانی کامل از کلاس ها، خواص محاسبه، اشیاء مربوط به اعداد، هشت هشتی و باینری و . . .  خواهد بود. این پشتیبانی قوی از جاوا اسکریپت به این معناست که این زبان یک قدم به تبدیل شدن به یک زبان OOP یا شی گرا نزدیک تر شده است .

7. فیلتر های css

ویژگی backdrop-filter در css  به سافاری 9 اضافه شده است . همه ی فیلترهای  blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, and sepia  در این نسخه در دسترسی هستند .

8. DEVELOPER MODE UPDATES

طراحی واکنش گرا نیز به شیوه ای پیشرفته تر در سافاری 9 معرفی شده است به شیوه ای که مرورگر با سرعت هرچه بیشتر بین لایه های با نمای متفاوت سوئیچ می کند و این موضوع برای توسعه دهندگان بسیار مهم است که بتوانند طراحی خود را قبل از اجرا روی دستگاه های مختلف با نماهای متفاوت تست کنند تا از نحوه ی نمایش آن در دستگاه مورد نظر مطلع شوند . همچنین web inspector  در این مرورگر از نو طراحی شده است همراه با برخی از ترفندهای رابط کاربری برای بهبود تجربه ی کاربری و همچنین تاکید خیلی بیشتری روی رندرکردن فریم ها و عملکرد وجود دارد.

9.  حذف کردن پیشوند های css

یکی از مهمترین بروزرسانی هایی که شاید زیاد مورد توجه قرار نگیرد اما بدون شک برای توسعه دهندگان بسیار خوشایند خواهد بود از بین رفتن پیشوندها در بیش از 45 ویژگی css  می باشد که هنوز بسیاری از این پیشوندها برای نمایش در مرورگرهای دیگر استفاده می شود . از جمله ویژگی های که پیشوند آنها برداشته شده است می توان به ویژگی های flex , transition , transport وanimation  اشاره کرد