user-interface-a.jpg
۲۱/مرداد/۱۳۹۷

محتوا، نمایش‌دهنده قلب و ماهیت یک وبسایت است. بنابراین یکی از بهترین راه‌ها برای کمک به تجربه کاربری وبسایت این است که محتوای بهتری را ارائه دهید. در این مطلب قصد داریم شما را با ۹ راه آشنا کنیم.

بیشتر کاربران تنها برای دسترسی‌ پیدا کردن به محتوا و اطلاعاتی که می‌خواهند وارد وبسایت می‌شوند، بنابراین در وهله اول تجربه کاربری مثبتی که آن‌ها دنبال‌ش هستند، سریع پیدا شدن محتوا و سرراست بودن آن ها است.

۱- «شما» را محوریت قرار دهید

طراحی کاربر محور به این معنا است که چیزی را بسازید که مشتریان نیاز دارند، بنابراین با این کار آن‌ها عاشق محصول شما خواهند بود. استراتژی‌های مدرن برای محتوا دقیقا روی چنین چیزی تمرکز دارد، به همین دلیل است که طرفداران کلمه «شما» بسیار زیاد است.

هدف‌تان ایجاد تجربه کاربری فریبنده و جذابی است، درست است؟ تجربه‌ای که باعث می‌شود مردم فکر کنند بخشی از کار شما هستند. این دقیقا قدرت کلمه «شما» است.

بسیاری از اوقات وبسایت‌ها قدرت این کلمه ساده را نادیده می‌گیرند. به عنوان مثال آن‌ها می‌نویسند: «بروزرسانی‌ها را می‌توان از طریق پنل رویدادها مشاهده کرد»

این جمله بسیار ساده و واضح است تا اینجای کار هم خوب است اما به نظر می‌رسد که یک ربات دارد حرف می‌زند و هیچ آدمیتی در آن قرار ندارد، به همین دلیل ممکن است کاربران بسیار با آن نتوانند ارتباط برقرار کنند. اما می‌شود این جمله را به این صورت نیز نوشت: «شما می‌توانید بروزرسانی‌ها را در پنل رویدادها مشاهده کنید».

چنین تغییرات کوچک ولی معناداری می‌توانند تاثیر بسیار زیادی روی محصول شما داشته باشند.

۲. «ما» را محوریت قرار ندهید

برخی اوقات یک شرکت یا تجارت محصول جدیدی را معرفی می‌کنند و در معرفی آن با جمله «ما هیجان زده هستیم که می‌خواهیم …» یا جملات مشابه کار را شروع می‌کنند.

بسیار ساده‌تر بگویم؛ یک مشتری نمی‌خواهد بداند که شما چه کاری انجام داده‌اید، او تنها می‌خواهد بداند که محصول چه کمکی به مشتری یا خودش می‌کند. بنابراین برای وی اهمیتی ندارد که شما چه تیم برنامه‌نویسی هستید و یا اینکه چه مقدار زمان برای کار کردن روی این پروژه صرف کرده‌اید.

شما به عنوان یک شرکت یا یک تجارت محصول‌تان را به مشتری می‌فروشید نه تیم‌تان، اگر مشتریان محصولات شما را خریداری نکنند به این معناست که تمام تلاش‌های سخت تیم و شرکت اشتباه بوده است.

سعی کنید همین الان به مطالب وبلاگی، توییت‌ها و تمام موارد دیگری که قبلا برای شرکت نوشته‌اید نگاه کنید. ببینید از حالت «ما» محور استفاده کرده‌اید؟ اگر به این صورت است پس از این به بعد سعی کنید که همه چیز را براساس محوریت قرار دادن کاربران انجام دهید.

۳. شبیه به هوشمندها نباشید، هوشمند باشید!

نیازی نیست که برای یک جمله بزرگ از کلمات پیچیده و بزرگ استفاده کنید. در حقیقت هوشمند بودن به این معنا است که بتوانید مفهومی را در ساده‌ترین حالت ممکن بیان کنید.

آلبرت انیشتین می‌گوید که تمام تئوری‌های فیزیک باید در حدی ساده شوند که حتی یک کودک هم بتواند متوجه آن‌ها شود. بنابراین اگر یک فیزیک‌دان بتوان به صورتی ساده تئوری رشته را برای یک کودک توضیح بدهد، پس قطعا می‌توانید اپلیکیشن شما را نیز به هرکسی معرفی کند.

کلمات بزرگ و پیچیده باعث می‌شوند که کاربران سرخورده شوند و سرگیجه بگیرند. بیگانگی و گیجی مطمئنا در نهایت تجربه کاربری خوبی را از خود بجای نمی‌گذارند.

برای مثال من می‌توانم بگویم که من یک disestablishmentarian هستم، با این حال می‌توانم به صورت ساده‌تر بگویم که من وظیفه تفکیک کلیساها و مکان‌ آن‌ها از همدیگرم.

پس همواره سعی کنید از چیزی که نشان می‌دهید و می‌گویید هوشمندانه‌تر رفتار کنید.

۴. محتوای‌تان را با صدای بلند بخوانید

همیشه به یاد داشته باشید که یک محتوای خوب، خواندن خوبی نیز دارد. به این معنا که وقتی آن را با صدای بلند می‌خوانید جذابیت بالایی با خود دارد. وقتی از خوب بودن صحبت می‌کنم منظورم طبیعی بودن و قابلیت گفتگو داشتن است. درست مانند یک انسان که با آن حرف می‌زنید.

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

اگر حوصله خواندن متن را ندارید و یا اینکه چنین کاری برای‌تان مقدور نیست، می‌توانید از بات‌هایی استفاده کنید که متن را برای شما می‌خوانند.

۵. موارد اضافی را حذف کنید

یک تکنیک کلی وجود دارد که هر ویراستار خوبی از آن استفاده می‌کند: برای داشتن محتوای خوب، هر قسمتی که نالازم باشد، باید آن را حذف نمود.

هر کلمه‌ای که در یک مقاله استفاده می‌کنید باید یک داستان در آن نهفته باشد و به جریان داستان کلی کمک کند.

بنابراین کلمات و جملاتی را که لازم نیستند، حذف کنید.

۶. ابتدا بنویسید سپس ویرایش کنید

وقتی اولین بار یک پیشنویس آماده می‌کنید، لازم نیست که بسیار دقیق باشید. جریان نوشتن را ادامه دهید و بگذارید با آن بروید. شما همواره می‌توانید به عقب بازگشته و همه چیز را ویرایش کنید، پس نگران نباشید.

وقتی که همزمان با نوشتن عادت به ویرایش کردن نیز پیدا کنید، پس مطمئن باشید که محتوای‌تان نمی‌تواند منطقی و خوب باشد، به این جهت که جریانات فکری را نابود می‌سازد.

۷. به صورت آزادانه برچسب گذاری کنید

محتوای‌تان را به صورت درست دسته‌بندی کنید و در وبسایت به صورتی درست نمایش دهید. از این طریق کاربران می‌توانند بهتر موارد مختلف در وبسایت را درک کنند.

برای مثال به تصویر زیر نگاه کنید:

9 راه برای بهبود تجربه کاربری محتوای وبسایت

لینک‌ها به صورت مستقل از باقی مورد خود را نمایان می‌کنند، اما کاربران در نگاه اول واقعا نمی‌دانند که چرا این موارد به این صورت در کنار همدیگر قرار گرفته‌اند و هدف آن‌ها چیست. اما حال به تصویر زیر نگاه کنید:

9 راه برای بهبود تجربه کاربری محتوای وبسایت

عناوین سر جای‌شان آمده‌اند و از این رو همه چیز به خوبی قابل مشاهده است.

۸. به صورت واضح لینک‌دهی کنید

اگر تا به حال یک وبلاگ را با سیستمی مانند وردپرس مدیریت کرده باشید، با آن لینک‌هایی که عبارت Read More یا مواردی مشابه را برای‌تان ظاهر می‌کنند آشنایی دارید.

بهتر است از انجام چنین کاری دست بردارید! چرا؟ به این دلیل که چنین لینک‌هایی برای سئو، استفاده‌پذیری و دسترسی‌پذیری مناسب نیستند.

بجای اینکه روی کلمه Read More در تمام مقالات تمرکز کنید، روی کلمه کلیدی مربوط به هر مقاله تمرکز نمایید. این کار می‌تواند تاثیر بسیار خوب و عمیقی را روی سئو شما بگذارد.

تصور کنید که یک کاربر از طریق Screen Reader وارد صفحه وبسایت شما می‌شود و تمام لینک‌های برای وی تنها یک چیز را می‌گویند: Read More … چنین موضوعی نمی‌تواند برای یک فرد با اختلالات بینایی معنی و مفهومی داشته باشد.

۹. طراحی برای محتوا

بیشتر وبسایت‌ها در حال حاضر روی نمایش محتوا و دادن قابلیت های تعاملی به آن تمرکز دارند. به همین دلیل است که طراحی مبتنی بر محتوا مفهوم جدیدی را ایجاد کرده است. هر طراحی که شما روی آن کار می‌کنید باید قابلیت نمایش خوب و بهتر محتوا را داشته باشد.

محتوای بهتری بنویسید

در پایان مقاله باید بگویم که ایجاد محتوای خوب برای وبسایت، درست مانند ایجاد وبسایت یا اپلیکیشنی خوب است. محتوای‌تان را واضح بنویسید و کاری کنید که استفاده از آن‌ها راحت باشد.

تمام این کارها را با محتوای‌تان انجام دهید و منتظر موفقیت باشید.

منبع راکت


low-size-0۱-0۱-0۱.jpg
۱۴/مرداد/۱۳۹۷

چند سال از فوت جابز می‌گذرد و شرکت اپل و نماد آن استیو جابز هنوز برای بعضی معبد قدیسان است و برای برخی دیگر شیطانکده‌ای مضحک. برای کسانی که در حوالی سال‌های ۱۹۸۰ تا ۱۹۸۵ به دنیا آمده‌اند اما استیو جابز چیزی بیش از یک تاجر یا کارآفرین بود.
از وقتی ما چشم باز کردیم و دنیا را دیدیم ورق‌به‌ورق زندگی استیو جابز هم جلوی چشم ما بود. حتی اگر نمی‌خواستیم آن را ببینیم به خاطر اخبار محصولاتی که خلق می‌کرد ما را متوجه خود می‌کرد. کاری کرد تا از همان سال‌ها جزئی پایدار از آنچه ما به‌عنوان زندگی می‌شناسیم باشد. بچه سرراهی، شکست در کالج، راه انداختن یک شرکت کوچک و گلاویز شدن با غول تکنولوژی آی‌بی‌ام، شکست آی‌بی‌ام بزرگ و تبدیل شدن به یک میلیونر بیست و خورده‌ای ساله، موفقیت، موفقیت، شوک بزرگ: اخراج از شرکتی که خود سنگ بنایش را گذاشته بود، بازگشت به شرکت، و… که خودتان بهتر از من می‌دانید. استیو جابز خواسته یا ناخواسته این داستان‌های جذاب را با خود برای ما به‌رایگان به ارمغان آورده بود.

خلاصه ای از زندگی استیو جابز - چطور حقمان را از دنیا بگیریم...

 

می‌گویم ناخواسته چون همه امروز می‌دانیم که او چقدر به حفظ حریم خصوصی‌اش اهمیت می‌داد و بنابراین می‌شود گفت فراگیری شهرتش برایش یک شکست محسوب می‌شود. نمی‌دانم خودش در این مورد چه فکری داشت. اشتباه نکنید! او خیلی دوست داشت برای یک گروه کوچک دستچین‌شده طنازی کند، اغواگری کند و آن‌ها برایش هورا بکشند. اما به غیر از آن، به‌ندرت اجتماعی بود. زندگی‌نامه‌اش را بخوانید.

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

شاید بسیاری در طمع دسترسی به موفقیت‌هایی نظیر آنچه جابز به آن دست یافت باشند، اما تعلق احساسی نسل ما به استیو جابز به خاطر شکست‌هایش و چگونگی برخورد او با شکست‌هایش بود. موفقیت‌های بزرگ او در کنار گاف‌هایی مانند اخلاق بد، عدم قبول مسئولیت پدری، اخراج و آبروریزی در میان همکاران شرکت و کل افراد یک صنعت و… اتفاق افتاد و ما در زندگی‌های خودمان با این نوع شکست‌ها خوب آشنا بودیم. برایمان جالب بود که چطور کسی با این همه گاف و شکست بتواند بزرگ‌ترین شرکت دنیا را بسازد، محصولاتش را همه بخرند و در دل میلیاردها نفر جا داشته باشد.

 

 

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

ز درخواست به هرچیز خواهی رسید / به هرچیز خواهی کماهی رسید

او به قطعه‌ای احتیاج داشت و برای آن به خانه رئیس شرکت هیولت پکارد (HP) تلفن کرد. با شجاعتی فراتر از یک نوجوان گفت که اسمش استیو است و دوازده سال دارد و دلیل اینکه زنگ زده این است که یک قطعه برقی مهم برای درست کردن دستگاه فرکانس‌سنج در مدرسه احتیاج دارد. استیو در توضیح ایده کاردستی‌اش برای آقای هیولت درنگ نکرد و درنتیجه نه‌تنها قطعه‌ای را که احتیاج داشت دریافت کرد بلکه آقای هیولت که تحت تاثیر روحیه این بچه قرار گرفته بود پیشنهاد کرد استیو تابستان در شرکت هیولت پکارد کارآموزی کند.

بله، درست است که آقای هیولت در سنفرانسیسکو تنها چند خیابان آنطرف‌تر از خانواده جابز زندگی می‌کرد و دادن کارآموزی به یک بچه‌محل به نظر ساده می‌آید، و درست است که استیو کوچک توانسته به آقای هیولت بزرگ زنگ بزند چون آن زمان اسم و شماره تلفن همه افراد در کتابچه‌های زردرنگ درج می‌شد، من هم می‌فهمم که شما نه همسایه بانفوذی دارید و نه دسترسی به شماره تلفن آدم‌های مهم یا مشهور. اما آن شرایط برای استیو کوچک معنا نداشت، او فقط آنچه را می‌خواست «درخواست کرد» و این راز موفقیت مداوم او در تمام حیاتش شد.


Untitled-1-2.jpg
۰۲/مرداد/۱۳۹۷

Visual Studio Code یک ادیتور متن رایگان و چند سکویه است که توسط مایکروسافت توسعه داده شده. به کمک ویژگی‌های متعدد و کارایی بالایی که ارائه می‌دهد،

مانند تمام IDEهای دیگر، VS Code نیز مجموعه بزرگی از پلاگین‌ها را با کیفیت بالا ارائه می‌دهد. می‌توانید از طریق Marketplace به این موارد دسترسی پیدا کنید. برای اینکه بتوانید تنها موارد بسیار مهم را دانلود کنید ما مجموعه‌ای از آن‌ها را برای شما جمع‌آوری کرده‌ایم.

Open-In-Browser

ویژوال استدیو کد هیچ گزینه‌ای را برای باز کردن مستقیم فایل‌ها در مرورگر را ارائه نمی‌دهد. این افزونه یک گزینه Open with Default Browser را به منوهای contextual اضافه می‌کند. همچنین می‌توانید از طریق command palette مرورگر مورد نظرتان برای باز شدن را انتخاب کنید.

Quokka

Quokka یک ابزار رفع عیب است که در زمان نوشتن کد به شما خروجی زنده را نشان می‌دهد. این دستور مقدار برگشتی از یک تابع و یا متغیر را قبل از اجرای پروژه به شما نشان می‌دهد. پیکربندی اپلیکیشن بسیار ساده است و به صورت پیشفرض از JSX و TypeScript پشتیبانی می‌کند.

Faker

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

CSS Peek

با استفاده از این افزونه می‌توانید به مکان تعریف کلاس‌ها و آی‌دی‌های CSS در فایل استایل‌شیت مراجعه کنید. وقتی روی یک سلکتور در HTML کلیک راست کردید، گزینه Go to Definition را انتخاب کنید تا به قسمت کدهای CSS مربوط به استایل برگه بروید.

HTML Boilerplate

افزونه HTML boilerplate شما را از نوشتن تگ‌های Head و body در ابتدای هر سند نجات می‌دهد. تنها کافی‌ست HTML را در یک فایل خالی نوشته و بعد کلید Tab را فشار دهید، بعد از آن یک ساختار واضح و ساده از HTML برای شما ساخته می‌شود.

Prettier

Prettier در حال حاضر محبوب‌ترین ابزار برای قالب‌دهی به کدها است. این افزونه به شما اجازه می‌دهد که کدهای نوشته شده را مرتب و یکسان کنید، مهم نیست که چه کسی این کدها را نوشته است. استفاده از این افزونه برای سندهای JS و CSS امکان پذیر است. اگر می‌خواهید این کار را از طریق ESLint انجام دهید ابزار Prettier – Eslint را می‌توانید به کار ببرید.

Color Info

پلاگین کوچکی که به شما اطلاعات لازم برای استفاده از رنگ‌ها در CSS را می‌دهد. با هاور کردن ماوس روی کد رنگ‌ها می‌توانید رنگ را به صورت زنده و در نمای بزرگ‌تری مشاهده کنید. کد رنگ را می‌توانید در فرمت‌های مختلف (hex, rgb, hsl و cmyk) نیز مشاهده کنید.

SVG Viewer

این افزونه قابلیت‌ها و امکانات مربوط به SVG را به Visual Studio Code اضافه می‌کند. این افزونه قابلیت رندر فایل‌های SVG و مشاهده شکل آن‌ها بدون ترک کردن ادیتور را می‌دهد. همچنین گزینه‌ای برای تبدیل به PNG و ایجاد طرح داده‌ای URI وجود دارد.

TODO Highlight

این ابزار تمام کامنت‌های مربوط به لیست TODO را هایلایت می‌کند. به همین دلیل می‌توانید آسان‌تر کارهایی که نیاز به تمام کردن دارند را مشاهده کنید. به صورت پیشفرض این ابزار به دنبال کلمات کلیدی TODO و FIXME می‌گردد اما شما می‌توانید عبارات سفارشی را نیز به آن اضافه کنید.

Icon Fonts

این مورد حاوی قطعه کدهای کوچکی است که فونت آیکون‌ها را از طریق CDN به پروژه شما اضافه کرده و بعد خود آیکون‌ها اضافه می‌کند. این افزونه بیشتر از ۲۰ مجموعه آیکون را پشتیبانی می‌کند که شامل Font Awesome، Ionicons، Glyphicons و Material Design Icon می‌شود.

Minify

Minify افزونه‌ای است که برای کوچک‌سازی کدهای‌تان بکار برده می‌شود. در این افزونه تنظیمات سفارشی‌سازی و گزینه‌های مختلفی برای کوچک‌سازی خودکار و ذخیره و خروجی دادن فایل .min پیاده‌سازی شده است. Minify می‌تواند با Javascript, CSS و HTML کار کند.

Change Case

VSCode به صورت پیشفرض تنظیمات محدودی برای تبدیل متن در اختیار دارد. این افزونه می‌تواند گزینه‌های بیشتری را برای مدیریت و تبدیل متون ارائه دهد.

Regex Previewer

ابزار مفیدی برای تست کردن به صورت زنده برای عبارات باقاعده است. این ابزار به خوبی با الگوی عبارات باقاعده روی متنی که در آن طرف ادیتور باز شده است کار می‌کند.

Language and Framework Packs

VSCode در حال تلاش برای پشتیبانی بیشتر از ابزارها و زبان‌های مختلف است. اگر زبانی که شما از آن برای برنامه‌نویسی استفاده می‌کنید در VSCode قرار نگرفته است می‌توانید این پک افزودنی را نصب کنید. در آن ابزارهایی برای پشتیبانی از ویو، ری‌اکت نیتیو و… فراهم شده است.

Themes

به نظر می‌رسد که مهمترین قسمت افزونه‌های VSCode پوسته‌های‌ آن باشد. شما هر روز با ادیتورتان کار می‌کنید، چرا نباید آن را زیبا کنید؟ پلاگین‌های بسیار زیادی برای سفارشی‌سازی طرح رنگی، آیکون‌ها و… در نظر گرفته شده است که می‌توانید از آن‌ها استفاده کنید. تعدادی از موارد که می‌توانید استفاده کنید عبارت است از موارد زیر:

One Monokai

Aglia

One Dark

Material Icon

منبع راکت


asdasd.jpg
۲۰/تیر/۱۳۹۷

 

وب اپلیکیشن‌های پیش رونده (PWA) نسل جدید اپلیکیشن‌های تحت وب هستند که می‌توانند آینده‌ی اپلیکیشن‌های موبایل را متحول کنند. در این مقاله به طور جامع به بررسی آن‌ها خواهیم پرداخت.

اندروید و آی‌اواس، دو سیستم‌عامل محبوب موبایل، سال‌ها است که به لطف برخورداری از گنجینه‌ای غنی از اپلیکیشن‌ها توانسته‌اند فاصله‌ی خود را با دیگر سیستم‌عامل‌های موبایل افزایش دهند و به محبوبیت بالایی بین کاربران و توسعه‌دهندگان دست پیدا کنند. در واقع، بخش اعظم موفقیت این دو پلتفرم موبایل مرهون گستردگی و عملکرد بی‌نظیراپلکیشن‌های بومی آنها بوده است. این مسئله موجب شده که پلتفرم‌های دیگر در حوزه‌ی موبایل فرصت چندانی برای عرض اندام نداشته باشند و به دلیل فقر نرم‌افزاری استقبال چندانی از سوی آن‌ها به عمل نیاید. بارزترین مثال در این رابطه، ویندوزفون است که امروزه دیگر تقریبا از رده خارج شده است. سیستم‌عامل موبایل ردموندی‌ها فارغ از تمام نقاط ضعف و مثبتش و در تمام مراحل توسعه – چه به عنوان ویندوز فون و چه ویندوز ۱۰ موبایل – موفق نشد تا توجه توسعه‌دهندگان را به خود جلب کند و از منظر کیفی و کمی، اپلیکیشن‌های ضعیف‌تر و کمتری در مقایسه با رقبایش داشت.

در نقطه‌ی مقابل اپلیکیشن‌های بومی، وب اپلیکیشن‌ها یا اپلیکشن‌های وب قرار دارند. تمام کلاینت‌های ایمیل تحت وب، خرده‌فروشی‌های آنلاین و وب‌سایت‌های ویکی (با امکان ویرایش محتوا توسط کاربر) که در مرورگرها اجرا می‌شوند، به نوعی یک اپلیکیشن وب محسوب می‌شوند. اپلیکیشن‌های تحت وب در ابتدا در بستر دسکتاپ شکل گرفتند؛ اما با آغاز عصر گوشی‌های هوشمند و غلبه‌ی پلتفرم موبایل بر دسکتاپ، اپلیکیشن‌های موبایل به رشد و محبوبیت فزاینده‌ای دست یافتند. با وجود آنکه امروزه اپلیکیشن‌های بومی موبایل بی‌رقیب به نظر می‌رسند؛ اما با محدودیت‌های مختلفی مواجه هستند. برای مثال، آن‌ها وابسته به یک پلتفرم مشخص هستند. بدین مفهوم که یک اپلیکیشن اندرویدی قابل اجرا در سیستم‌عامل آی‌اواس نیست و توسعه‌دهندگان برای آنکه اپلیکیشن خود را در اختیار تعداد بیشتری از کاربران قرار دهند، ناچارند آن‌ها را برای پلتفرم‌های مختلف توسعه دهند که این مسئله به نوبه‌ی خود موجب افزایش هزینه‌های ساخت اپلیکشن‌های بومی می‌شود.

این اشکالات موجب شد تا اپلیکیشن‌های وب در مرکز توجه قرار بگیرند. امروزه، با گسترش دسترسی به اینترنت پایدار و پرسرعت و توسعه‌ی فناوری‌های مدرن وب، اپلیکیشن‌های تحت وب به تکامل تازه‌ای دست یافته‌اند و اکنون نه‌تنها کمبودی نسبت به اپلیکیشن‌های بومی ندارند؛ بلکه در موارد مختلفی بهتر از آن‌ها عمل می‌کنند. با توجه به همین مسئله، گوگل در سال ۲۰۱۵ وب اپلیکیشن‌های پیش رونده را با قابلیت‌های منحصربه‌فردی معرفی کرد. پیش از آنکه به تشریح خصوصیات وب اپلیکیشن‌های پیش رونده بپردازیم، ابتدا به صورت مختصر به بررسی تفاوت اپلیکیشن‌های بومی و اپلیکیشن‌های وب می‌پردازیم.

تفاوت اپلیکیشن‌های بومی با اپلیکیشن‌های تحت وب

Progressive Apps vs Native Apps

یک اپ بومی، اپلیکیشنی است که به طور مشخص برای یک دستگاه موبایل معین توسعه داده شده است و نصب آن تنها روی همان دستگاه امکان‌پذیر است. کاربران معمولا اپلیکیشن‌های بومی را از طریق فروشگاه‌های نرم‌افزاری آنلاین نظیر اپ استور اپل یا فروشگاه گوگل پلی و … دریافت می‌کنند. در طرف مقابل، یک اپلیکیشن وب، در واقع یک اپلیکیشن اینترنتی محسوب می‌شود که از طریق هر مرورگری قابل دسترسی است.

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

با این وجود، اولین اختلاف این دو گروه از اپلیکیشن‌ها، به فرآیند توسعه‌ی آن‌ها مربوط می‌شود. هر پلتفرم موبایل از زبان برنامه‌نویسی مختلفی استفاده می‌کند. برای مثال، آی‌اواس از Objective-C بهره می‌گیرد؛ در حالی که اندروید از جاوا و ویندوز موبایل از سی‌پلاس‌پلاس استفاده می‌کند. در طرف مقابل اپلیکیشن‌های وب از زبان‌های دیگری نظیر جاوا اسکریپت، HTML5، CSS3 یا دیگر چارچوب‌های (فریم‌ورک) نرم‌افزاری وب بهره می‌گیرند. علاوه بر این، هر پلتفرم موبایل، کیت توسعه‌ی افزاری (SDK)، ابزارهای توسعه و دیگر عناصر رابط کاربری اختصاصی خود را در اختیار توسعه‌دهندگان قرار می‌دهد. توسعه‌دهندگان با بهره‌گیری از این مجموعه‌ی ابزارها به راحتی می‌توانند اپلیکیشن بومی خود را برای آن پلتفرم موبایل توسعه دهند. در طرف مقابل، هیچ استانداردسازی مشخصی برای اپلیکیشن‌های وب وجود ندارد و توسعه‌دهندگان محدود به استفاده از چارچوب‌ها یا ابزارهای توسعه‌ی خاصی نیستند.

وب اپلیکیشن پیش رونده چیست؟

وب‌اپلیکیشن‌های پیش رونده (Progressive Web Apps) یا به اختصار PWA می‌توانند تحول بزرگ بعدی در حوزه‌ی اپلیکیشن‌های موبایل محسوب شوند. این فناوری که ابتدا در سال ۲۰۱۵ و توسط گوگل معرفی شد، به علت آسودگی نسبی توسعه و در اختیار قرار دادن یک تجربه‌ی کاربری آنی برای کاربران توجهات زیادی را به خود جلب کرده است.

وب اپلیکیشن‌های پیش رونده از جدیدترین فناوری‌ها در ترکیب اپلیکیشن‌های موبایل و وب‌سایت‌ها بهره می‌گیرند. یک وب اپلیکیشن پیش رونده در واقع وب‌سایتی است که از فناوری‌های مدرن وب استفاده می‌کند؛ اما ظاهر و کارکرد آن همانند یک اپلیکیشن معمولی است. پیشرفت‌های اخیر در مرورگرها، سرویس ورکرها، کش‌ها و رابط‌های برنامه‌نویسی نرم‌افزار (API)، توسعه‌دهندگان وب را قادر کرده تا وب اپلیکیشن‌هایی با قابلیت افزودن به صفحه‌ی خانگی سیستم‌عامل با امکان ارسال اعلان از سمت سرور (Push Notifications) و حتی عملکرد آفلاین توسعه دهند.

وب اپلیکیشن‌های پیش رونده در مقایسه با اپلیکیشن‌های بومی موجود در فروشگاه‌های نرم‌افزاری از مزیت اکوسیستم گسترده‌تر وب و پلاگین‌ها و آسودگی نسبی توسعه و حفظ وب‌سایت‌ها برخوردار هستند. اگر از جمله توسعه‌دهندگان وب‌سایت و اپلیکیشن محسوب ‌شوید، حتما می‌دانید که ساخت یک وب‌سایت با صرف زمان کمتری قابل انجام است و نیازی به حفظ قابلیت پس‌سازگاریِ (backwards-compatibility) رابط‌های برنامه‌نویسی وجود ندارد؛ زیرا برخلاف چندپارگی نسخه‌های اپلیکیشن‌های بومی، تمام کاربران نسخه‌‌ای یکسان از کد وب‌سایت را اجرا می‌کنند.

چه نیازی به وجود وب اپلیکیشن‌های پیش رونده وجود دارد؟

نتایج یک تحقیق نشان می‌دهد که کاربران معمولی تقریبا ۸۰ درصد از زمان خود را صرف استفاده از تنها ۳ اپلیکیشن می‌کنند. برای مثال، اکثر افراد معمولا از یک اپلیکیشن پیام‌رسان (تلگرام یا واتساپ)، یک مرورگر (کروم) و یک اپلیکیشن شبکه‌های اجتماعی (اینستاگرام، فیسبوک یا توییتر) بیش از دیگر اپ‌ها استفاده می‌کنند. دیگر اپلیکیشن‌ها نیز اکثر اوقات بلااستفاده باقی می‌مانند و تنها حافظه‌ی رم و حافظه‌ی داخلی گوشی را بی‌جهت مصرف و اشغال می‌کنند. علاوه بر این، هزینه‌ی توسعه‌ی یک اپلیکیشن در مقایسه با ساخت یک وب‌سایت برای ارائه‌ی همان سرویس، معمولا ۱۰ برابر بیشتر است. همچنین، در صورتی که توسعه‌دهنده قصد توسعه و حفظ بیس کد (پایگاه کد) مجزا برای پلتفرم‌های مختلف نظیر اندروید، آی‌اواس و وب را داشته باشد، این هزینه‌ها بیش از پیش افزایش خواهد یافت.

همچنین، استفاده از اپلیکیشن‌های بومی موبایل، تجربه‌ای آنی برای کاربران به همراه ندارد. یک کاربر برای استفاده از اپلیکیشن بومی دلخواه خود، در ابتدا باید به جستجوی آن در فروشگاه اپلیکیشن بپردازد، آن را دانلود، نصب و در نهایت اجرا کند. زمان‌بر بودن این مراحل موجب می‌شود که برخی کاربران در نیمه‌های راه از خیر نصب این اپلیکیشن‌ها بگذرند. در طرف مقابل، هنگامی که کاربر با یک وب اپلیکیشن پیش رونده مواجه می‌شود، می‌تواند بدون طی کردن مراحل غیرضروری دانلود و نصب و تنها با مراجعه به یک نشانی وب بلافاصله استفاده از آن را آغاز کند.

PWA

با این وجود، اپلیکیشن‌های بومی نیز مزایای غیرقابل انکاری دارند. اپلیکیشن‌های موبایلی که مجهز به اعلان‌‌ها برای اطلاع‌رسانی به کاربر هستند، ۳ برابر بیش از دیگر همتایان غیربرخوردار از این ویژگی نگهداری می‌شوند و همچنین ۳ برابر احتمال بیشتری وجود دارد که کاربر به جای وب‌سایت، به یک اپلیکیشن مراجعه کند. علاوه بر این، اپلیکیشن موبایلی که از طراحی مناسبی بهره می‌گیرد، داده‌ی کمتری مصرف می‌کند و به دلیل استقرار برخی از منابع خود روی دستگاه، سرعت بیشتری نیز دارد.

با این حال، یک وب اپلیکیشن پیش رونده نیز از برخی از مهم‌ترین خصوصیات یک اپلیکیشن موبایل برخوردار است و این موضوع موجب می‌شود که عملکرد کاربر فارغ از دردسرهای نگهداری یک اپلیکیشن موبایل بهبود یابد.

خصوصیات یک وب اپلیکیشن پیش رونده چیست

وب اپلیکیشن‌های پیش رونده واجد ویژگی‌ها زیر هستند:

پیش رونده (قابل استفاده در هر دستگاه و سیستم‌عامل): یک وب اپلیکیشن پیش رونده فارغ از نوع مرورگر و نوع دستگاه، برای تمام کاربران قابل استفاده است.

قابل جستجو: از آنجایی که وب اپلیکیشن‌های پیش رونده در واقع یک وب‌سایت محسوب می‌شوند، از طریق موتورهای جستجو قابل یافتن هستند. این خصوصیت، یک برتری قابل توجه آن‌ها بر اپلیکیشن‌های بومی است.

قابل پیونددهی (لینک‌دهی): وب اپلیکیشن‌های پیش رونده برخلاف اپلیکیشن‌های بومی نیازی به طی کردن مراحل پیچیده‌ی دانلود و نصب ندارند و اشتراک‌گذاری آن‌ها از طریق یک نشانی وب (URL) به راحتی امکان‌پذیر است.

انعطاف‌پذیر: رابط کاربری وب اپلیکیشن‌های پیش رونده خود را با هر نوع فرم فکتور اعم از موبایل و دسکتاپ و هر نوع اندازه‌ی نمایشگر تطبیق می‌دهد.

ظاهر اپلیکیشن‌وار: یک اپلیکیشن پیش رونده شباهت بی‌بدیلی به اپلیکیشن‌های بومی دارد، از رابط کاربری مشابه آن‌ها استفاده می‌کند و مسیریابی در آن‌ها تفاوتی با اپلیکیشن‌های معمولی ندارد.

بی‌نیاز از اتصال اینترنت: وب اپلیکیشن‌های پیش رونده در صورت ضعف اتصال اینترنت یا حتی به صورت آفلاین نیز قابل استفاده هستند.

درگیر کردن کاربر: احتمال آنکه کاربران اپلیکیشن‌های موبایل مجددا از اپلیکیشن‌های خود استفاده کنند بیشتر از احتمال مراجعه‌ی مجدد به یک‌ وب‌سایت است. وب اپلیکیشن‌های پیش رونده با استفاده از ویژگی‌هایی نظیر اعلان‌های سمت سرور (Push Notification)، این ضعف را جبران کرده‌اند.

قابل نصب: وب اپلیکیشن‌های پیش رونده را می‌توان همانند اپلیکیشن‌های بومی نصب و آیکون آ‌ن‌ها را به صفحه‌ی خانگی و حتی کشوی اپلیکیشن‌ها اضافه کرد؛ با این تفاوت که دسترسی به آن‌ها بی‌نیاز از دردسرهای جستجو در فروشگاه‌های اپلیکیشن است. این ویژگی استفاده از آن‌ها را به شدت آسان می‌کند.

به‌روز بودن: در حالی که اپلیکیشن‌های بومی نیازمند به‌روزرسانی از طریق فروشگاه‌های نرم‌افزاری هستند، وب اپلیکیشن‌های پیش رونده به لطف فرآیند به‌روزرسانی سرویس ورکر، همیشه به آخرین نسخه، به‌روز هستند و هنگامی که محتوای جدید منتشر شود و کاربر به اینترنت متصل باشد، آن محتوا بلافاصله در دسترس کاربر قرار می‌گیرد.

ایمن: از آنجایی که وب اپلیکیشن‌های پیش رونده در بستر HTTPS قرار دارند، از مخاطرات امنیتی در امان هستند.

وب اپلیکیشن‌های پیش رونده از چه فناوری‌هایی استفاده می‌کنند

رشد برخی از فناوری‌های جدید وب در سال‌های اخیر، به توسعه‌ی وب اپلیکیشن‌های پیش رونده کمک زیادی کرده‌ است. در اینجا به‌صورت مختصر به شرح برخی از مهم‌ترین فناوری‌های به‌کار رفته در وب اپلیکیشن‌های پیش رونده می‌پردازیم.

اعلان‌های سمت سرور (Push Notification)

این نوع اعلان‌ها که به صورت تحت‌الفظی به «اطلاع‌رسانی از طریق فشار» ترجمه می‌شوند؛ در واقع نوعی اعلان است که از سمت سرور یا اپلیکیشن به سمت کاربر ارسال می‌شود و به وی امکان می‌دهد از به‌روزرسانی‌های وب‌سایت‌های مورد علاقه‌ی خود به موقع مطلع شود. حتما برای شما هم پیش آمده است که پس از بازدید از یک وب‌سایت، پیغامی کوچک زیر نوار آدرس مشاهده کرده‌اید که از شما درخواست می‌کند اعلان‌های سمت سرور را فعال کنید. این ویژگی به صاحبان وب‌سایت امکان می‌دهد تا با مخاطبان و کاربران در ارتباط مداوم باشند و آن‌ها را از آخرین تغییرات خود باخبر کنند. وب‌اپلیکیشن‌های پیش رونده با بهره‌گیری از این قابلیت می‌توانند همانند اپلیکیشن‌های بومی کاربر را از تغییرات برنامه مطلع کنند. ویژگی مثبت اعلان‌های سمت سرور این است که امکان نمایش آن‌ها حتی در صورت بسته بودن مرورگر نیز همچنان وجود دارد. رابط برنامه‌نویسی اعلان‌های سمت سرور در حال حاضر توسط اکثر مرورگرها از جمله کروم، فایرفاکس اوپرا، اج و مرورگر سامسونگ پشتیبانی می‌شود.

سرویس ورکرها

اپلیکیشن‌های بومی موبایل به بهای اشغال حافظه‌ی داخلی و فقدان به‌روزرسانی لحظه‌ای، عملکردی بی‌نقص و سریع ارائه می‌دهند. در طرف مقابل، وب اپلیکشن‌های سنتی نیز از مشکلات قابل توجهی نظیر فقدان قابلیت اجرای کامپایل در کنار وابستگی به اتصال غیرپایدار و بالقوه ضعیف اینترنت رنج می‌برند. سرویس ورکرها قصد دارند ویژگی‌های مثبت این دو گروه از اپلیکیشن‌ها را با یکدیگر ادغام کنند و در قالب وب اپلیکیشن‌های پیش رونده ارائه دهند. سرویس ورکر از نظر فنی اسکریپتی است که مروگر آن را به صورت مجزا از صفحه‌ی وب در پس‌زمینه اجرا می‌کند و قابلیت‌هایی را که نیازمند صفحه‌ی وب یا تعامل کاربر نیستند، نظیر اعلان‌های سمت سرور و همگام‌سازی پس‌زمینه را امکان‌پذیر می‌کند.

معماری پوسته اپلیکیشن

برخی از وب اپلیکیشن‌های پیش رونده از یک رویکرد معماری به نام الگوی پوسته‌ی اپلیکیشن استفاده می‌کنند. سرویس ورکرها به منظور بارگذاری سریع، رابط کاربری اولیه یا پوسته‌ی طراحی وب واکنش‌گرای وب اپلیکیشن را درون خود ذخیره می‌کنند. این پوسته، یک چارچوب ثابت اولیه، یک لایه یا معماری را فراهم می‌کند که محتوا می‌تواند به طور مداوم و به صورت پویا درون آن بارگذاری شود. این ویژگی، در نهایت به کاربران امکان می‌دهد تا فارغ از نوع اتصال اینترنت و سرعت آن، از اپلیکیشن استفاده کنند. از نظر فنی، این پوسته یک بسته‌ی کد است که به صورت محلی در کش مرورگر دستگاه ذخیره می‌شود.

Application Shell architecture

وضعیت پشتیبانی از وب اپلیکیشن‌های پیش رونده

در حال حاضر، امکان استفاده از وب اپلیکیشن‌های پیش رونده در سیستم‌عامل‌های اندروید و ویندوز وجود دارد. سیستم‌عامل گوگل در حال حاضر با وب اپلیکیشن‌های پیش رونده همانند اپلیکیشن‌های بومی رفتار می‌کند و امکان نصب آن‌ها را از طریق مرورگر کروم فراهم کرده است. هرچند تعداد این اپلیکیشن‌ها هنوز در مقایسه با اپلیکیشن‌های بومی اندک است؛ اما هم‌اکنون می‌توانید برخی از آن‌ها را با استفاده از مرور کروم در گوشی اندرویدی یا کامپیوتر ویندوزی خود امتحان کنید. یک نمونه‌ی خوب از وب ‌اپلیکیشن‌های پیش رونده نسخه‌ی تحت وب پیام‌رسان تلگرام است که برای دسترسی به آن باید به نشانی web.telegram.org مراجعه کنید، در صورتی که از کروم استفاده کنید، می‌تواند با لمس گزینه‌ی Add to Homescreen در مرورگر، نسخه‌ی تحت وب تلگرام را به صفحه‌ی خانگی گوشی یا دسکتاپ کامپیوتر خود اضافه کنید. در این حالت، در استفاده‌های بعدی از این پیام‌رسان دیگر نیازی به مراجعه‌ی مجدد به مرورگر نخواهید داشت. یکی دیگر از وب اپلیکیشن‌های مطرح، اپلیکیشن توییتر لایت است که در واقع نسخه‌ی سبک اپلیکیشن این شبکه‌ی اجتماعی محسوب می‌شود و بر پایه‌ی فناوری‌های مدرن وب توسعه داده شده است. توییتر لایت هم در اندروید و هم ویندوز قابل دسترسی و نصب همانند یک اپلیکیشن بومی است. برای استفاده از این اپلیکیشن و کسب اطلاعات بیشتر درباره‌ی آن می‌توانید به نشانی lite.twitter.com مراجعه کنید. گوگل علاوه بر اندروید، قصد پشتیبانی از وب اپلیکیشن‌های پیش رونده در سیستم‌عامل دسکتاپ خود را نیز دارد. براساس گزارش‌ها، این شرکت پشتیبانی از اپلیکیشن‌های وب استور کروم را تا نیمه‌ی سال جاری میلادی به طور کامل قطع و آن‌ها را با وب اپلیکیشن‌های پیش رونده جایگزین خواهد کرد.

Twitter Lite PWA

علاوه بر گوگل، مایکروسافت نیز قدم‌های بزرگی برای پشتیبانی از وب اپلیکیشن‌های پیش رونده برداشته است. مایکروسافت در ابتدا برای تبدیل اپلیکیشن‌های وب به ویندوز، همانند گوگل اقدام به توسعه‌ی برنامه‌ای به نام «پروژه‌ی وست‌مینستر» کرده بود؛ اما پس از مدتی این پروژه‌ی خود را با وب اپلیکیشن‌های پیش رونده گوگل پیوند داد. در حال حاضر، هر دو شرکت از استاندارهای مشابه برای وب اپلیکیشن‌های پیش رونده پیروی می‌کنند. سرویس ورکرها به همراه آخرین نسخه‌ی ویندوز معرفی شدند و این سیستم‌عامل (نه‌تنها مرورگر اج، بلکه کل سیستم‌عامل) به‌زودی و با انتشار به‌روزرسانی رداستون ۴ در ماه آوریل پیش‌رو از وب‌اپلیکیشن‌های پیش رونده همانند اپلیکیشن‌های بومی ویندوز پشتیبانی خواهد کرد. وب اپلیکیشن‌های پیش رونده در ویندوز از قابلیت‌های پلتفرم ویندوز یونیورسال نظیر یکپارچگی کورتانا، اعلان‌ها و کاشی‌های زنده نیز بهره‌مند می‌شوند و از طریق استور مایکروسافت توزیع خواهند شد. علاوه بر این، همانند اندروید، امکان تمایز آن‌ها با اپلیکیشن‌های بومی وجود خواهد داشت.

از آنجایی که ویندوز ۱۰ با وب اپلیکیشن‌های پیش رونده همانند اپلیکیشن‌های بومی رفتار خواهد کرد، احتمال می‌رود که دستگاه موبایل تاشوی مایکروسافت که مدت‌ها شایعات آن بر سر زبان‌ها است و تمام دیگر دستگاه‌های ویندوزی که سیستم‌عامل «ویندوز کور اس» را اجرا خواهند کرد، از مزایای وب اپلیکیشن‌های پیش رونده، به خصوص تطبیق‌پذیری آن‌‌ها با هر نوع اندازه‌ی نمایشگر بهره‌مند شوند. این مسئله می‌تواند نقطه ضعف سیستم‌عامل مایکروسافت در کمبود نرم‌افزار را جبران کند و برخلاف ویندوز موبایل، سرنوشت متفاوتی را برای دستگاه موبایل بعدی ردموندی‌ها رقم بزند.

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

انتظار می‌رود در سال پیش‌روی میلادی شاهد رشد وب اپلیکیشن‌های پیش رونده و توجه بیش از پیش شرکت‌ها به آن‌ها باشیم. به احتمال فراوان هر سه شرکت نامبرده در رویدادهای اختصاصی خود (کنفرانس بیلد مایکروسافت، کنفرانس I/O گوگل و کنفرانس جهانی توسعه‌دهندگان اپل) از برنامه‌های آتی خود برای وب اپلیکیشن‌های پیش رونده رونمایی کنند.

جمع‌بندی

وب اپلیکیشن‌های پیش رونده هنوز در دوران اولیه‌ی تکامل به‌سر می‌برند و برای محکم کردن جای پای خود راه درازی در پیش دارند. آن‌ها جایگزین اپلیکیشن‌های بومی نخواهند شد؛ با این حال از ظرفیت فوق‌العاده‌ای برای تکامل نحوه‌ی توسعه و استفاده از اپلیکیشن‌های امروزی برخوردارند و میزان نفوذ و همه‌گیری آن‌ها به استقبال توسعه‌دهندگان و البته کاربران بستگی دارد. در مجموع برای قضاوت در مورد آینده‌ی آن‌ها هنوز کمی زود است؛ اما در سال پیش‌رو حتما خبرهای بیشتری از آن‌ها خواهیم شنید.


1.jpg
۱۴/تیر/۱۳۹۷

در طی چند سال اخیر تکنولوژی‌های فرانت اند مختلفی وارد بازار شدند. با این تغییرات دنیای طراحی وب به شدت در خود تغییراتی را مشاهده کرد. حال با وجود این تغییرات شما می‌توانید وبسایت‌ها را آسان‌تر و با کارایی بیشتری ایجاد کنید.

من همیشه در رابطه با آخرین ابزارها و بهترین رویکردها هیجان زده هستم، به این دلیل که باور دارم ابزارهای جدید امروز می‌توانند به ابزارهایی با بیشترین استفاده در فردا تبدیل شوند.

من در این مطلب قصد دارم شما را با ۹ تکنولوژی و ابزار مدرن برای توسعه‌دهندگان وب آشنا کنم. البته آن‌ها برای جریان توسعه وب الزامی نیستند و برخی از آن‌ها به صورت ویژه نیز برای تنها توسعه وب ایجاد نشده اند. اما آن‌ها می‌توانند سرعت شما را بهبود و پایه‌های کدنویسی‌تان را ارتقا دهند.

webcomponents

webcomponents.org/

ممکن است اصطلاح WebComponents را شنیده باشید، اما از اینکه به جزئیات آن نگاه کرده باشید شک دارم. WebComponents در واقع استایل‌های تازه‌ای برای HTML۵ است که براساس استانداردهای موجود در W۳C ایجاد شده است.

این کامپوننت‌ها به شما اجازه می‌دهد که بتوانید المنت‌های سفارشی با قابلیت استفاده مجدد را در صفحات پویا داشته باشید. المان‌هایی مانند ویجت تب‌ها، اسلایدرهای تصویری و منوها. دیگر نیازی نیست که از ابتدا یک منو کشویی را ایجاد کنید. شما تنها نیاز دارید که از یک تگ در این کامپوننت استفاده کنید.

در وبسایت اصلی این پروژه می‌توانید مثال‌های متفاوتی همراه با توضیحات بسیار مختصری را مشاهده کنید. همچنین اگر نتوانستید به خوبی با آن‌ها ارتباط برقرار کنید می‌توانید از طریق این راهنما نکات کاربردی را مشاهده کنید.

در چند سال گذشته این پروژه چندان تکمیل نیافته بود اما در حال حاضر می‌توان از آن به عنوان یک ابزار بسیار مناسب در کنار کارتان استفاده کنید.

Polymer

Polymer

Polymer یک کتابخانه متن باز است که توسط تیم گوگل رهبری می‌شود. استفاده کردن از این تکنولوژی به شما کمک می‌کند تا بتوانید مراحل توسعه و استفاده از APIهای مختلف و موارد دیگری که ارائه می‌کند بسیار آسان‌تر شود. در این کتابخانه المان‌های داخلی نیز وجود دارد که می‌توانید از آن‌ها استفاده کنید.

در کنار این در نسخه جدید این تکنولوژی قابلیت ایجاد اپلیکیشن‌های پیش‌رونده نیز مهیا شده که باعث می‌شود بتوانید بسیار سریع‌تر پیشرفت داشته باشید.

هدف Polymer این است که توانایی ایجاد ماژول‌ها را داشته باشد. شما می‌توانید ماژول‌های خودتان را ایجاد کنید. برای خواندن اطلاعات بیشتر و موارد جدید در نسخه ۳ آن به وبسایت Polymer مراجعه کنید.

AMP

AMP

گوگل چند سال پیش تکنولوژی AMP را ایجاد کرد و هدف از این کار بهتر کردن تجربه کاربری کاربران در کاوش کردن اینترنت بود. با استفاده از پروژه AMP برگه‌های وبسایت شما در یک قالب با قابلیت خوانایی بالا قرار می‌گیرد و توانایی بارگذاری بسیار سریعی را دارد.

شما تنها نیاز دارید که کدهایی را به وبسایت‌تان اضافه کنید و بعد از آن گوگل بقیه کارها را انجام می‌دهد. اگر وبسایت شما براساس AMP بهینه‌سازی شود همه چیز برای کاربران موبایل سریع‌تر بارگذاری می‌شود و تجربه‌ای شبیه به اپلیکیشن‌های موبایل را پیدا خواهند کرد.

با در نظر گرفتن رشد بی اندازه کاربران موبایلی به نسبت دستگاه‌های دیگر به نظر می‌رسد که سوئیچ کردن به این پروژه ارزش بالایی دارد. استفاده از این تکنولوژی در وبسایت‌هایی با قابلیت‌های تعاملی بسیار بالا ممکن است درست نباشد اما برای وبسایت‌های خبری و وبلاگی که متن/تصویر و موارد مشابه را ارائه می‌دهند می‌تواند انقلابی در مصرف کاربران موبایل به وجود بیاورد.

Gulp 

Gulp

خودکارسازی یکی از کلیدی‌ترین راه‌ها برای کاهش زمان مصرف شده در انجام کارهای تکراری است. با استفاده از یک اجرا کننده وظایف مانند Gulp بسیار ساده است که بتوانید وظایف تکراری و آزار دهنده را به صورت خودکار انجام دهید و بتوانید روی کارهای مهم دیگری تمرکز کنید.

Gulp می‌تواند فایل Sass شما را به CSS تبدیل کند، هک‌هایی را به کدهای‌تان اضافه نماید، برگه‌ها را پس از تغییرات بازسازی کند و… . شما می‌توانید کارهای بسیار بیشتری را با استفاده از Gulp انجام دهید.

TypeScript

TypeScript

فریمورک فرانت‌اند AngularJS در آخرین نسخه‌های خود به صورت کامل از زبان اسکریپت‌نویسی تایپ‌اسکریپت پشتیبانی می‌کند. پس اگر از طرفداران انگولار هستید باید این زبان را یاد بگیرید.

البته تایپ‌اسکریپت به صورت کامل یک زبان جدید نیست، خود این تکنولوژی براساس جاوااسکریپت ایجاد شده است. بنابراین اگر بتوانید با جاوااسکریپت کار کنید پس یادگیری تایپ‌اسکریپت برای‌تان وقت‌گیر نخواهد بود.

اگر قصد دارید دانش جاوااسکریپتی خود را به سطح جدیدی ببرید پیشنهاد می‌کنم که به سمت تایپ‌اسکریپت بروید. .

Three.js

Three.js

اگر تا به حال در دنیای طراحی وب مباحث WebGL و ۲D/۳D را دنبال کرده باشید پس مطمئنا نام Three.js را شنیده‌اید. این کتابخانه یکی از قدرتمندترین موارد برای گرافیک‌های مبتنی بر وب است که براساس یک موتور رندرینگ کار می‌کند.

این موضوع که وبسایت‌های کمی نیاز به گرافیک‌های سه بعدی دارند واقعیت دارند، اما با پیشرفت این تکنولوژی و رشد آن، مطمئنا یکی از موارد پر استفاده خواهد بود.

Three.js به صورت رایگان و متن باز ارائه شده و همچنین در کنار APIهای WebGL بهبود می‌یابد.

Docker

Docker

با یک کانتینر پلتفرم مانند داکر شما می‌توانید محیط‌های مجازی ایجاد کرده و وبسایت‌تان را روی سرورهای مختلفی به آسانی انتقال دهید. تا به حال در رابطه با داکر آموزش‌ها و مستندات بسیار زیادی ارائه شده که می‌توانید از آن‌ها استفاده کنید.

اما داکر جزو معدود پلتفرم‌هایی است که با آوردن قابلیت‌های مجازی‌سازی می‌تواند کل سیر توسعه شما را تغییر و بهبود دهد. اگر یک DevOps باشید مطمئنا با داکر کار کرده‌اید و یا کار باید بکنید.

Ionic Framework

Ionic Framework

در حقیقت این تنها تکنولوژی موجود در این لیست است که مستقیما به دنیای وب مربوط نمی‌شود. اما این مورد مخصوص توسعه‌دهندگان وب است، افرادی که قصد دارند تا با استفاده از HTML/CSS/JS اپلیکیشن‌های نیتیو را ایجاد کنند.

Ionic فریمورک متن باز و رایگانی است که برای ایجاد اپلیکیشن‌های آندروید و IOS ایجاد شده است. تمام اپلیکیشن‌های موجود در این فریمورک براساس کدهای سازگار با دنیای وب ایجاد شده، بنابراین شما می‌توانید اپلیکیشن‌های جاوااسکریپتی را بنویسید که در نهایت شبیه به اپلیکیشن‌های جاوا/سویفت است.

توسعه‌دهندگان وب بسیار به ندرت وارد دنیای برنامه‌نویسی اپلیکیشن‌های نیتیو می‌شوند اما Ionic به آن‌ها جایگزین بسیار خوبی را ارائه می‌دهد. تا به اینجای کار پشتیبانی نسبتا خوبی نیز از این فریمورک شده است. برای کار با این فریمورک نیاز است که دانش نسبتا خوبی در تایپ‌اسکریپت داشته باشید.

کتابخانه‌های Zurb

کتابخانه‌های Zurb

برای چند سال من علاقه زیادی به Zurb و فریمورک قدرتمند فاوندیشن داشتم. در بروزرسانی‌های اخیر این ابزار شما با کتابخانه‌هایی همراه هستید که در نهایت می‌توانید روندهای کاری را طراحی و خودکار سازی کنید. یکی از این موارد Foundation for Emails نام دارد.

یکی دیگر از موارد مناسب در این کتابخانه Motion UI نام دارد که برای ایجاد انیمیشن‌های مبتنی بر وب بسیار مناسب است. شما می‌توانید به صورت مستقل و یا همراه با کل پروژه فاوندیشن از این کتابخانه استفاده کنید.

تمام کتابخانه‌های موجود در این فریمورک به صورت متن باز ارائه می‌شود و تیم توسعه آن به سختی در حال کار کردن برای بهتر نمودن آن هستند.

منبع


2.jpg
۰۹/اردیبهشت/۱۳۹۷

براساس آماری که جدیدی که از Stackoverflow منتشر شده است، توسعه‌دهنده Full Stack یکی از نقش‌های بسیار محبوب در بین توسعه‌دهندگان است. اما یک توسعه‌دهنده فول‌استک دقیقا چه کاری را انجام می‌دهد و توضیحات کلی کار و وظیفه وی چیست؟

توسعه‌دهندگان Full stack با طیف وسیعی از دنیای توسعه ارتباط دارند و با آن برخورد می‌کنند، آن‌ها می‌توانند هم در قسمت فرانت‌اند کار کنند و هم قسمت بک‌اند را مدیریت نمایند. موضوع بسیار مهم در رابطه با آن‌ها این است که آن‌ها بسیار حرفه آن‌ها بسیار منعطف است و به همین دلیل که می‌توانند در طیف وسیعی از فرایند توسعه شرکت کنند، پس نیاز دارند که بتوانند فریمورک‌ها، چهارچوب‌ها و ابزارهای جدیدی را با سرعت بالا و در مدت زمان کمی یاد بگیرند.

یک اشتباه رایج که در اصطلاح عامیانه وجود دارد این است که فکر می‌کنند توسعه‌دهنده Full stack کسی است که تمام دانش‌های مربوط به حوضه توسعه اپلیکیشن مبتنی بر وب را دارد، اما می‌شود این موضوع را به گونه‌ای دیگر بیان کرد، آن‌ها در رابطه با موارد کلی و اصل این علم آشنایی خوبی دارند اما در رابطه با تمام ماجراهایی که اتفاق می‌افتد آن‌ها یک دانش عمومی و کلی دارند. پس می‌شود گفت که توسعه‌دهنده Full stack ضرورتا همه چیز را نمی‌داند.

البته نبود چنین دانش وسیعی هیچ مشکلی ندارد و هیچ زیانی به توسعه‌دهنده نمی‌زند. به دلیل اینکه آن ها در قسمت FrontEnd و BackEnd توانایی دارند پس می‌توانند به سادگی و به خوبی راه‌حل‌های مناسبی را برای هر قسمت از توسعه پیدا کنند. اما از هر چیز دیگری مهم‌تر، از آنجایی که روند توسعه معروف بهAgile با رویکردهای توسعه مدرن یکپارچه‌تر می‌شود، درک کردن و جابجا شدن در بین قسمت‌های FrontEnd و BackEnd در فرایند توسعه بسیار مهم است.

از یک جنبه دیگر نیز اگر به این موضوع نگاه کنیم، متوجه می‌شویم که وجود یک توسعه دهنده Full stack ‌می‌تواند از نظر اقتصادی بسیار به صرفه باشد، به این دلیل که می‌تواند کار چندین فرد در تیم را انجام دهد و با یک هزینه مقرون به صرفه‌تری نیز کار را به پایان برساند.

توضیحات کاری مربوط به هر توسعه‌دهنده Full stack تقریبا متفاوت است. این نقش به صورت پیوسته‌ای در حال پیشرفت و دگرگونی‌ است و به دلیل وجود ارگان‌ها و سازمان‌های متفاوت با نیازهای مختلف، توانایی‌های مختلفی نیز مورد نیاز است. در اینجا می‌توانید چند توانایی کلی که معمولا در بین توسعه‌دهنده‌های Full stack مشاهده می‌کنید را ببینید:

  • HTML / CSS
  • جاوااسکریپت
  • فریمورک‌های جاوااسکریپت (انگولار، ری‌اکت و…)
  • تجربه در طراحی رابط کاربری و API
  • کار با SQL و NoSQL
  • حداقل یک زبان برنامه‌نویسی BackEnd مانند پایتون، جاوا، روبی و…
  • کار با یک فریمورک BackEnd مانند Django، ASP.NET، Laravel و…
  • ساخت و توزیع یک سیستم اتوماسیون یا مدیریتی
  • دانش در خصوص مجازی‌سازی و یا داکر

به صورت کلی تمام این موارد چیزهای منحصر به فردی هستند که فرد تصمیم به یادگیری آن‌ها می‌کند و تصمیم دارد براساس آن‌ها چیزهای جدیدی را بسازد، در نهایت این‌ها باعث می‌شود که فرد به یک توسعه‌دهنده Full stack تبدیل شود.

جدای از این موارد برای یک توسعه‌دهنده Full stack توانایی‌های نرم و معمولی نیز لازم است، منظور از توانایی‌های نرم، توانایی برای داشتن ارتباط مؤثر، مدیریت بهینه پروژه‌ها و بودجه است. در کنار این موارد داشتن توانایی Agile و Scrum نیز می‌تواند بسیار مؤثر و خوب باشد. فرایند توسعه‌ نرم‌افزار معمولا یک فرایند تیمی است پس باید همکاری داشتن و تیمی کار کردن به یک بخش بسیار اساسی از شخصیت تبدیل شود. همراه با این موارد آگاهی داشتن از اطلاعات تجاری می تواند بسیار مفید باشد.

یک توسعه‌دهنده Full stack کسی است که می‌تواند یک تجارت را درک کند و بتواند به بهترین شیوه ممکن مسائل را حل نماید.


4.jpg
۰۶/اردیبهشت/۱۳۹۷

هیچ شکی در این قضیه که طراحی واکنشگرای وب یکی از محبوب‌ترین و مهمترین تکنیک‌های طراحی وب است، وجود ندارد. از آن‌جایی که در سال ۲۰۱۵ گوگل وبسایت‌های واکنشگرا و سازگار با موبایل را به عنوان موارد بسیار پرکاربردی نام برده، رنک آن‌ها را نیز در موتورهای جستجوگر افزایش داده است. پس در نهایت می‌توان به این موضوع که گوگل تمام تلاش خود را برای بهتر ساختن و فراهم نمودن زمینه طراحی واکنشگرا به کار برده است پی برد.

جالب است که بدانید طراحی واکنشگرای وب به سال‌های گذشته برمی‌گردد، در حقیقت اولین وبسایتی که از یک لایه‌بندی تطبیق‌پذیر براساس عرض viewport مرورگر استفاده کرد، به سال ۲۰۰۲ برمی‌گردد. به لطف پیشرفت تکنولوژی و حقیقت اینکه طراحی برای وب یعنی طراحی برای هزاران صفحه نمایش با اندازه‌های مختلف، طراحی واکنشگرا به یک اصل و طبیعت بسیار مهم و ضروری تبدیل شده است.

مورد دیگری که جالب است بدانید این است که تا سال ۲۰۱۰ طراحی واکنشگرا ادامه پیدا نکرد، تا اینکه در آن سال Ethan Marcotte به صورت رسمی آن را ابداع نمود.

بعد از آن تکنولوژی باز هم پیشرفت‌های بسیار دیگری داشت و اینبار دیگر مردم می‌توانستند با استفاده از موبایل یا تبلت‌شان بجای اینکه تنها تماس بگیرند و یا اینکه پیامی ارسال کنند، با استفاده از یک مرورگر دنیای اینترنت را کاوش نمایند و به آخرین اخبار جهان دسترسی پیدا کنند. در آینده نیز مطابق با چیزی که متخصصان این حوضه می‌گویند سطح استفاده از موبایل بالاتر می‌رود و براساس همین موضوع اهمیت طراحی وب واکنشگرا نیز بسیار بیشتر می‌شود.

تا به اینجای مطلب دلیل بهره‌گیری از طراحی واکنشگرا را بیان کردیم، در این بخش قصد داریم تا ۳ روش برای استفاده از این طراحی را به شما بگوییم:

هسته اصلی طراحی وب واکنشگرا

طراحی وب واکنشگرا معمولا از قواعدی پیروی می‌کند که این قواعد را تمام طراحان، فریمورک‌ها و سیستم‌های مدیریت محتوا از آن پیروی می‌کنند:

‍‍۱. Fluid Grids

Fluid Grids

Fluid Grids یکی از هسته‌های اصلی طراحی وب واکنشگرا است. گرید‌ها یا سیستم‌های شبکه‌بندی به شما اجازه می‌دهند که المان‌های داخل صفحه را به صورت بصری ترازبندی کنید و کنترل کاملی روی جایگاه این موارد داشته باشید. این موضوع از یک سیستم سلسله مراتبی معین استفاده می‌کند. Fluid Grids با اندازه صفحه کاربران منطبق هستند و نسبت به آن واکنش نشان می‌دهند. به همین دلیل می‌توانید با استفاده از این حالت، از قرارگیری درست المان‌ها در جایگاه خودشان مطمئن شوید.

استفاده کردن از سیستم‌های شبکه‌بندی یا Grid یکی از مهمترین و مفهومی‌ترین نکته برای طراحی واکنشگرا است، پس اغلب طراحان وب برای این موضوع از ساختار آن استفاده می‌کنند. جدای از سیستم واکنشگرای Grid به صورت اولیه، تعداد بسیار زیادی از فریمورک‌های CSS وجود دارد که همه آن‌ها کدهای ساده‌ای را در جهت استفاده از سیستم گریدبندی برای شما آماده می‌کنند.

امروزه سیستم گریدبندی محلی در سی‌اس‌اس نیز پدید آمده که ما آن‌ را با «CSS Grid Layout Module» می‌شناسیم. میزان پشتیبانی مرورگرها از آن هر روز بهتر می‌شود و این موضوع باعث شده که طراحان بتوانند به صورت بسیار بهتری مشغول به طراحی گرید‌ها و ساختار‌های واکنشگرا شوند.

۲. Media Queries

Media Queries از سال ۲۰۰۰ به بعد وجود داشت و می‌شد از آن استفاده کرد، اما این موضوع تا سال ۲۰۱۲ نتوانست از سمت W۳C به یک استاندارد پیشنهادی تبدیل شود. مشابه با fluid grids، مدیا کوئری‌‌ها نیز یک تکنولوژی بنیادی را در پس طراحی واکنشگرا نشان می‌دهند. به لطف Media Queries طراح می‌تواند یکسری داده‌ها را از کاربر جمع‌آوری کند که این موضوع باعث می‌شود بهتر اندازه صفحه نمایش کاربر و حالت آن را مشخص کند. بعد از اینکه اطلاعات جمع‌آوری شد، فایل CSS براساس تنظیمات کاربر نمایش پیدا می‌کند.

۳. تصاویر و رسانه‌های واکنشگرا

طراحی وب واکنشگرا نمی‌تواند به خوبی متن با دیگر المان‌های صفحه برخورد بکند، اما با این حال بسیاری از وبسایت‌های امروزی از تعداد زیادی تصویر و رسانه تشکیل شده‌اند که این موضوع نیاز دارد تا بررسی شود.

یک راه بسیار مناسب و عالی برای کار کردن در جهت واکنشگرا نمودن تصاویر و… استفاده کردن از max-width است. یک مثال ساده از این مورد شبیه به زیر است:

img {
    max-width: 100%;
    height: auto; 
}

اگر می‌خواهید دیگر نوع‌ها از رسانه‌ها را در این حالت قرار دهید، برای اینکار ممکن است کمی کار لازم باشد و کمی بیشتر منحصر به فرد رفتار کنید. یک راه‌حل خوب برای اینکه بتوانید height را به کار ببرید استفاده کردن از حالت زیر است:

.wrapper-with-intrinsic-ratio {
    position: relative;
    padding-bottom: 20%;
    height: 0;
}
 
.element-to-stretch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

بعد از اینکه این موارد را به کدهای CSS اضافه کردید، تمام تصاویر و فایل‌های رسانه‌ای با مرورگرتان مقیاس پذیر می‌شوند و دیگر چیزی از View مرورگر خارج نمی‌شود.

در پایان

امروزه راه‌حل‌های طراحی واکنشگرای وب بسیار زیاد هستند، این موارد حالت‌هایی بود که باید به عنوان یک اصل پذیرفته شوند و همواره به آن‌ها دقت شود.


3.jpg
۰۱/اردیبهشت/۱۳۹۷

بعد از اینکه یک وبسایت واکنشگرا را طراحی کردید و تمام نکات لازم را رعایت نمودید، بسیار مهم است که استانداردها را بررسی کنید و وبسایت را بهتر آزمایش نمایید. ابزارهای آنلاین بسیار زیادی وجود دارد که میزان واکنشگرا بودن وبسایت‌تان را بررسی می‌کند و آن را به بهترین شکل ممکن تست می‌نماید. در اینجا قصد داریم که سه ابزار برای تست واکنشگرایی وبسایت را به شما معرفی کنیم:

۱- تست سازگاری موبایل با ابزار گوگل

گوگل ابزار تست سازگاری با موبایل مخصوص به خود را دارد. موضوع قابل توجه این است که استفاده از این ابزار بسیار سرراست و واضح است. تنها کافی‌ست که آدرس وبسایت را وارد کنید و بعد روی Analyze کلیک نمایید، بعد از آن منتظر نتایج باشید. اگر وبسایت‌تان با موبایل سازگار بود و این سازگاری در حد قابل قبولی بود، یک پیام تایید سبز به شما نمایش داده می‌شود. در غیر اینصورت، تست تایید نمی‌شود و دلایلی که باعث این موضوع شده را به شما نمایش می‌دهد. بنابراین می‌توانید با دنبال کردن مشکلات و مسائل آن‌ها را حل نمایید.

۲. Screenfly

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

Screenfly ابزاری است که توسط QuirkTools عرضه شده است و می‌تواند وبسایت شما را روی صفحات مختلفی نشان دهد. این ابزار مانند ابزار گوگل موارد کمک کننده‌ای برای درست کردن و تست بهتر وبسایت واکنشگرا را نمی‌دهد، با این حال می‌تواند وبسایت شما را روی دستگاه‌های مختلفی مانند دسکتاپ، موبایل، تی‌وی و… به خوبی نمایش دهد.

۳. MobileTest.me

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

در آخر MobileTest.me به شما اجازه می‌هد که یک دستگاه منحصر به فرد و مخصوص موبایل را انتخاب کنید، آدرس وبسایت را وارد نمایید و با وبسایت‌تان از طریق دستگاهی که انتخاب نمودید تعامل برقرار کنید. این ابزار برای بسیاری از افراد می‌تواند منحصر به فرد و کمک کننده باشد، به این دلیل که می‌توانید حالت وبسایت را روی یک دستگاه مخصوص به خوبی مشاهده کنید و آن را کاملا درک نمایید، می‌توانید با استفاده از این دستگاه با دکمه‌ها و فرم‌های وبسایت‌تان ارتباط برقرار کنید تا بتوانید تجربه کاربری بهتری را برای بازدیدکننده‌های‌تان ایجاد نمایید. می‌توانید از این ابزار در کنار ابزارهای قبلی که گفته شد استفاده کنید تا بتوانید وبسایت را به صورتی بسیار کامل آزمایش کنید و آن را به صورتی استاندارد و درست واکنشگرا کنید.

در پایان

ایجاد یک وبسایت واکنشگرا دیگر یک انتخاب گزینشی نیست. این موضوع یک اجبار است. طراحی وبسایت به صورت واکنشگرا این کمک را می‌کند که وبسایت به صورت بهتری مشاهده شود و همه بدون مشکل از وبسایت استفاده کنند. این موضوع باعث می‌شود که برندسازی در وبسایت شما بهتر شود و کاربران بتوانند بهتر به شما اعتماد نمایند. در نهایت تمام این موارد باعث می‌شود که تجربه کاربری بهتری را عرضه کنیم.

منبع راکت


Responsive-Themes.jpg
۳۰/فروردین/۱۳۹۷

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

وقتی چنین کاری را انجام دهید، یقینا گوگل در الگوریتم سرچ خود وبسایت شما را یکی از اولویت‌ها قرار می‌دهد. اگر به تازگی وبسایت‌تان را ساخته‌اید و یا اینکه تصمیم به ساخت آن دارید، در این مطلب نکاتی گفته می‌شود که به شما کمک می‌کند تا بتوانید سایتی واکنشگرا و جذاب داشته باشید. نکته مهم اینجاست که اگر در حال حاضر وبسایتی دارید، با بازطراحی وبسایت نیز می‌توانید از این نکات بهره‌ ببرید.

چگونه طراحی واکنشگرا را پیاده‌سازی کنیم

نکاتی که در زیر آمده است به شما کمک می‌کند که طراحی مبتنی بر موبایل و واکنشگرایی را داشته باشید، این موارد به شما این اطمینان را می‌دهند که وبسایت‌تان همزمان با اینکه واکنشگرا است، به صورت کامل با موبایل نیز سازگاری دارد. در اینجا بهترین نکات و تکنیک‌ها را می‌توانید مشاهده کنید:

۱. بیاموزید که بازدیدکنندگان‌تان چگونه از موبایل استفاده می‌کنند

این مورد را که افراد از وبسایت در کامپیوترهای دسکتاپ و موبایل به صورت متفاوتی استفاده می‌کنند را بیاموزید و درک کنید، زیرا که بسیار نکته مهمی است. بازدیدکنندگان وبسایت‌تان را مورد بررسی قرار دهید و یا این موضوع که چرا کاربران از موبایل برای دسترسی به وبسایت‌تان استفاده می‌کنند و چه برگه‌ها و المان‌هایی را بیشتر استفاده می‌کنند را بیابید. این اطلاعات کمک می‌کند که بیشتر به این موضوع که چه برگه‌ها و المان‌هایی نیاز دارند که بیشتر روی صفحات کوچک قابل دستیابی باشند، پی ببرید.

برای مثال، اگر آن‌ها در حال انجام یک جستجوی سریع برای دسترسی به اطلاعات تماس هستند، مطمئن شوید که صفحه اطلاعات مربوط به تماس به سادگی روی منو ناوبری موبایل قابل دسترس است.

۲. برای طراحی‌تان برنامه‌‌ریزی کنید

قبل از اینکه شروع به طراحی وبسایت‌تان بکنید، بسیار مفید است که ابتدا لایه‌بندی را تعیین نمایید. در حقیقت بیشتر طراحان وب قبل از اینکه هرکاری را انجام دهند ابتدا یک چهارچوب کلی از وبسایت را تعیین می‌کنند، بعد آن را به صورت بصری می‌سازند و بعد از آن وارد قسمت کدنویسی می‌شوند. این موضوع نه تنها باعث می‌شود که درست چیزی را که می‌خواهید بسازید، بلکه کمک می‌کند که قابلیت شخصی‌سازی -بعدها- چه برای شما و چه برای بقیه طراحان ساده‌تر شود تا بتوانند براساس برندهای متفاوت وبسایت را تغییر دهند.

مطمئن شوید که چند نمونه اولیه از وبسایت را ساخته‌اید و آن‌ها را در صفحاتی با اندازه‌ها و وضوح‌های متفاوتی امتحان کرده‌اید. در اینجا می‌توانید چند ابزار برای اینکه نمونه‌های اولیه‌ی واکنشگرا را ایجاد کنید مشاهده نمایید:

  • Adobe Edge Reflow: محصولات ادوبی این قابلیت را می‌دهند تا بتوانیم طراحی بصری یک وبسایت واکنشگرا را از طریق فوتوشاپ و تبدیل آن‌ها به HTML و CSS انجام دهیم. همچنین قابلیت اضافه کردن breakpointها را نیز می‌دهد.
  • InVision: با تشکر از InVision شما می‌توانید نمونه‌های اولیه تعاملی از وبسایت را ارائه کنید. کاربران با استفاده از یک لینک می‌توانند منوها، دکمه‌ها، حالت اسکرول و… را امتحان کنند و برای‌تان فییدبک قرار دهند. این ابزاری مناسب برای مشاهده کردن حالت وبسایت با داشتن محتوای مختلف است.
  • Wirefy: این مورد برای زمانی که می‌خواهید طراحی‌تان را براساس محتوا ایجاد کنید بسیار مناسب است. این مورد به شما اجازه می‌دهد تا گرید‌های واکنشگرا و نمونه‌های اولیه‌ای را بدون اینکه به صورت دستی اندازه‌ها را محاسبه کنید داشته باشید.

طراحی واکنشگرا

۳. در رابطه با فهرست ناوبری دقیق باشید

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

البته باید در نظر داشته باشید که این موضوع همواره نمی‌تواند یک رویکرد عالی و تمام و کمال باشد، به این دلیل که برخی اوقات کاربر متوجه این موضوع که باید روی دکمه کلیک کند تا لینک‌ها برای وی به نمایش دربیاید نمی‌شود. یک رویکرد جایگزین و البته عالی برای این مورد آن است که لینک‌های بسیار مهم وبسایت را در وبسایت به نمایش بگذارید و بعد باقی لینک‌ها را در پشت یک منوی همبرگری قرار دهید. می‌توانید برای ساده کردن ناوبری در وبسایت، برخی از متن‌های داخل صفحه اصلی را به صفحات دیگر وبسایت لینک کنید.

۴. تصاویر را بهینه‌سازی کنید

تصاویر نقش بسیار مهمی را در طراحی وبسایت ایفا می‌کنند. آن‌ها می‌توانند باعث شوند که یک رابطه عاطفی بین کاربر و وبسایت به وجود بیاید. همچنین باعث می‌شود که بتوانند بهتر محصولی که قصد خرید آن‌ را دارند، مورد بررسی قرار دهند. به همین دلیل بسیار مهم است که تصاویر در فضای وب بهینه‌سازی شوند.

این بدان معناست که تصاویر باید در قالب‌بندی مناسبی ذخیره شوند – JPG برای تصاویر و عکاسی و PNG-۸ برای آیکون‌ها و لوگوهایی که نیاز به پس‌زمینه شفاف دارند. براساس این موارد شما باید اندازه تصاویر را با استفاده از ابزارهایی مانند TinyJPG فشرده‌سازی نمایید. همچنین این موضوع که باید تصاویر را برای breakpointهای مختلف موبایل بهینه‌ نمایید را در نظر بگیرید.

بهینه‌سازی تصاویر

۵. رویکردی سازگار با موبایل را در نظر داشته باشید

یکی دیگر از راه‌ها برای دنبال کردن رویکرد طراحی واکنشگرا این است که یک نسخه موبایل از وبسایت تان را ایجاد کنید. این کار اجازه می‌دهد که حالت تصاویر، متن‌ها، لوگو و… را روی یک صفحه کوچک‌تر مشاهده کنید. اگر این موارد هیچ مشکلی نداشته باشند، پس یقینا شما نیز هیچ مشکلی با صفحه بزرگتری نخواهید داشت.

۶. یاد بگیرید که چگونه از Media Querieها استفاده کنید

Media querieها اولین مواردی بودند که در سی‌اس‌اس پیاده‌سازی شدند، اما عملا به دلیل اینکه در ابتدا مرورگرها از آن پشتیبانی نمی‌کرد، قابل استفاده نبودند، تا اینکه در سال ۲۰۱۲ به صورت رسمی توسط مرورگرها پشتیبانی شد و استفاده از آن توسط طراحان وب شروع گشت. هدف اصلی Media querieها این است که لایه‌بندی وبسایت را با عرض‌های مختلفی از صفحه نمایش بهینه کنند.

وقتی از این media querieها استفاده کنید، محتوا به اندازه‌های متفاوت از صفحه دستگاه جواب و به آن‌ها واکنش نشان می‌دهد. به صورت مختصر، یک مدیا کوئری وضوح، عرض و جهت دستگاه را بررسی می‌کند و CSSهای تعیین شده برای آن وضعیت را اجرا می‌نماید. یک مثال از این حالت را در زیر مشاهده می‌کنید:

@media screen and (min-width:500px) {
     
    your CSS rules here
 
}

۷. از کیبورد مناسب در فرم‌ها استفاده کنید

یکی از موارد مهم در استفاده کردن از فرم ها این است که در طراحی واکنشگرا آن ها را باید با اندازه عرض صفحه هماهنگ کنید، اما جدای از آن شما می‌توانید یک قدم جلوتر نیز بروید، با فیلد‌های ورودی مختلف از نوع مناسب کیوبورد استفاده کنید. برای این مورد از المان input استفاده کنید.

برای مثال فیلدهایی که دارای نام، ایمیل و آدرس هستند را با کیبورد معمولی و متنی همراه سازید، اما برای ورودی‌هایی که از شما شماره‌ای را درخواست می‌کنند، از کیبورد شماره‌ای یا عددی بهره بگیرید. این موضوع در کنار بهتر کردن تجربه کاربری، میزان سازگاری با موبایل را بهتر و بیشتر می‌کند.

۸. مطمئن شوید که دکمه‌ها در صفحات کوچک قابلیت دسترسی‌پذیری آسان‌تری دارند

هیچوقت فراموش نکنید که باید توجه بسیار زیادی را به دکمه‌ها در وبسایت داشته باشید. به دلیل تنظیمات صفحه، وضعیت این مورد بسیار مهم و حیاتی است، بنابراین باید حتما آن‌ها را سازگار با اندازه صفحه در نظر بگیرید. اگر این کار را انجام ندهید کلیک کردن روی آن‌ها دشوارتر می‌شود و شانس کلیک را از دست می‌دهید.

مطمئن شوید که با استفاده از این دو نکته، دکمه‌های‌تان به سادگی تشخیص داده می‌شود:

  • از رنگ‌ها برای اینکه آن‌ها را از بقیه صفحه جدا سازد استفاده کنید.
  • از یک مربع یا دایره برای نمایش آن‌ها استفاده نمایید.

همانگونه که اندازه بزرگ‌تر می‌شود سعی کنید که میزان padding را نیز افزایش دهید تا ناحیه کلیک‌پذیر بزرگ‌تر شود.

۹. تایپوگرافی را بهینه کنید

وقتی موضوع به متن در وبسایت می‌رسد، شما باید مطمئن شوید که متن در صفحاتی با اندازه کوچک قابلیت خواندن بالایی دارد. یک اندازه خوب و منطقی برای متون در وبسایت ۱۶ پیکسل یا ۱em است. بعد از این باید مطمئن شوید که ارتفاع خطوط در وبسایت مناسب است، برای مثال میزان ۱.۵em می‌تواند ارتفاق بسیار درستی باشد.

یکی‌دیگر از موارد مهم در این زمینه استفاده کردن از یک فونت خوانا و مناسب است. برای این کار از فونت‌های تزئینی یا اسکریپتی اجتناب کنید، به این دلیل که باعث می‌شود خواندن تا حد زیادی سخت شود، مخصوصا این موضوع در صفحاتی با اندازه کوچک بسیار دشوارتر می‌شود.

۱۰. از ریزتعاملات استفاده کنید

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

طراحی واکنشگرا

برای خواندن اطلاعات بیشتر در رابطه با ریزتعاملات می‌توانید مطلب «استفاده از متدهای ریز تعاملات در وبسایت» را مطالعه کنید.

۱۱. از فریمورک‌ها استفاده کنید

اگر می‌خواهید جریان کاری طراحی یک وبسایت واکنشگرا را سریع‌تر کنید و جریان بهتری را داشته باشید، یک فریمورک HTML مانند بوت‌استرپ می‌تواند جوابگوی کارتان باشد. برای ساخت وبسایت‌های ایستا این مورد بهترین حالت ممکن است.

بوت استرپ

همچنین اگر می‌خواهید وبسایت‌هایی با پیچیدگی بیشتری بسازید، می‌توانید از پوسته‌های واکنشگرا وردپرس استفاده کنید. استفاده کردن از این موارد نیز باعث می‌شود که سرعت کاری‌تان افزایش بسیار زیادی پیدا کند.

طراحی واکنشگرا

۱۲. به طراحی مینیمالیستی ملحق شوید

طراحی مینیمالیستی در چند سال اخیر محبوبیت زیادی پیدا کرده و رشد نسبتا خوبی داشته، که البته این موضوع نیز به دلایل خوبی مربوط می‌شود. اینگونه طراحی تمام موارد اضافی را از صفحه‌تان حذف می‌کند و باعث می‌شود که کاربر بتواند روی محتوای اصلی وبسایت تمرکز بیشتری را پیدا نماید. این موضوع باعث می‌شود که نرخ تبدیلات در وبسایت بالاتر رود و سرعت وبسایت بدلیل بارگذاری المان‌ها با سرعت زیاد، بالاتر رود. این موضوع با طراحی واکنشگرا نیز سازگاری بالایی دارد، به این دلیل که شما می‌توانید قسمت‌های مهم وبسایت را پر رنگ نشان دهید و توجه کاربران را به قسمت مهمی از وبسایت معطوف نمایید.

۱۳. مطمئن شوید که دکمه‌های به اشتراک گذاری محتوا را مسدود نمی‌کنند.

در نظر گرفتن دکمه‌های به اشتراک‌گذاری در قسمت محتوای وبسایت باعث می‌شود که مطالب بیشتر دیده شوند و ترافیک وبسایت بالاتر برود. با این حال برخی اوقات ممکن است که این دکمه‌ها باعث شود تا مطالب شما مسدود شوند، مخصوصا وقتی که روی صفحات کوچک قرار دارند. مطمئن شوید که این دکمه‌ها با اندازه‌های مختلف از صفحه خود را هماهنگ می‌سازند و می‌توانند به درستی کار کنند.

در پایان

ایجاد یک وبسایت واکنشگرا دیگر یک انتخاب گزینشی نیست. این موضوع یک اجبار است. طراحی وبسایت به صورت واکنشگرا این کمک را می‌کند که وبسایت به صورت بهتری مشاهده شود و همه بدون مشکل از وبسایت استفاده کنند. این موضوع باعث می‌شود که برندسازی در وبسایت شما بهتر شود و کاربران بتوانند بهتر به شما اعتماد نمایند. در نهایت تمام این موارد باعث می‌شود که تجربه کاربری بهتری را عرضه کنیم.

منبع : راکت


layout_units_dp-800x547.png
۲۵/فروردین/۱۳۹۷

طراحی متریال به‌تدریج در حال گسترش است و طراحان و شرکت‌ها در حال بازطراحی اپلیکیشن های خود بر پایه متدها و الگوی متریال هستند. گوگل سرمایه‌گذاری معنوی و زمانی بسیاری بر روی این زبان طراحی کرده است. از این‌رو به نظر می‌رسدطراحان نیز با تمایل به سمت این متد یکپارچه و حساب‌شده در حرکت‌اند. در این نوشته قصد دارم در مورد واحدها واندازه‌گیری در طراحی متریال مطالبی را عنوان کنم. واحدها در زمینه‌های مختلف دارای معانی متفاوتی هستند. در اینجا بهپیکسل‌های مستقل از دستگاه (device-independent pixels) پیکسل‌های مقیاس‌پذیر (scaleable pixels) و همین‌طور تراکم پیکسل (pixel density) خواهیم پرداخت.

 

– تراکم پیکسل (DPI)

می‌دانیم که به تعداد پیکسل‌های قرارگرفته در هر اینچ تراکم پیکسل گویند. صفحه‌نمایشی دارای تراکم بالاست که دارایپیکسل‌های بیشتری در هر اینچ باشد. بنابراین وقتی یک المان رابط کاربری مانند دکمه را با اندازه‌ای ثابت طراحی می‌کنیم، در صفحات با تراکم بالا کوچک و در صفحات با تراکم پایین المان بزرگ‌تر نمایش داده خواهد شد. DPI یا وضوح صفحه اشاره به تعداد پیکسل‌های موجود در صفحه‌نمایش داد.

DPI = عرض صفحه‌نمایش (یا ارتفاع) در مقیاس پیکسل (تقسیم‌بر) عرض صفحه‌نمایش (یا ارتفاع) در مقیاس اینچ.

برای آشنایی و اطلاع بیشتر با فرمولاسیون تراکم پیکسل به این مطلب و برای یافتن سریع DPI به سایتpixeldensitycalculator مراجعه کنید.

 

– پیکسل مستقل از تراکم (DP)

این واحد همانطور که از نامش پیداست به تراکم پیکسل وابسته نبوده و از آن مستقل است. یعنی المان طراحی شده در تمامی صفحه نمایش‌ها با تراکم‌های مختلف به یک شکل و اندازه نمایش داده می‌شود. این واحد به اختصار DIPS نیز نامیده شده. در توسعه اپلیکیشن برای صفحه نمایش‌های مختلف باید از واحد DP برای المان‌ها استفاده شود.

پیکسل مستقل از تراکم

وضوح صفحه عرض صفحه نمایش در پیکسل
(DPI * عرض در مقیاس اینچ)
عرض صفحه نمایش در پیکسل مستقل از تراکم
120dpi 180px 240dp
160dpi 240px 240dp
240dpi 360px 240dp

یک DP برابر است با یک پیکسل فیزیکی بر روی صفحه نمایشی با تراکم ۱۶۰DPI. فرمول محاسبه DP برابر است با:

DP = (عرض در مقیاس پیکسل (ضربدر) ۱۶۰) (تقسیم بر) DPI

بعنوان مثال در طراحی یک آیکون: ۳۲×۳۲ پیکسل با ۳۲۰dpi برابر است با ۱۶×۱۶ DP.

در استایل نویسی به زبان CSS جائیکه از DP یا SP استفاده شده است فقط باید از پیکسل استفاده نمود. واحد DP فقط در برنامه نویسی و توسعه اندروید بکار می‌رود.

 

– پیکسل مقیاس پذیر (SP)

این واحد در واقع همان کار DP را در توسعه اندروید انجام می‌دهد با این تفاوت که این مقیاس برای فونت ها بکار می‌رود. مقدار پیش فرض برای SP همان مقدار برای DP است. تفاوت اصلی این دو مقیاس در حفظ تنظیمات بکار رفته فونت‌ها در سیستم اندروید است. بعنوان مثال کاربرانی که در دستگاه خود فونت بزرگ‌تری را تنظیم نمایند در صورتیکه از مقیاس SP در برنامه نویسی اپلیکیشن استفاده شده باشد فونت‌های داخل برنامه نیز بزرگ‌تر نمایش داده خواهد شد.

 

– مقیاس تصاویر

مقیاس تصاویر در وضوع صفحه نمایش‌های مختلف را می‌توانید از جدول زیر استخراج نمایید.

مقیاس تصاویر

وضوح تصویر DPI نسبت پیکسل اندازه تصویر (پیکسل)
xxxhdpi 640 4.0 400×400
xxhdpi 480 3.0 300×300
xhdpi 320 2.0 200×200
hdpi 240 1.5 150×150
mdpi 160 1.0 100×100

 

– مقایسه واحدها

در جدول زیر می توانید بطور خلاصه مقایسه‌ای از واحدهای اندازه گیری و ارتباط آن‌ها مشاهده کنید.

تراکم شرح واحد در هر اینچ فیزیکی وابستگی به تراکم اندازه مشابه در هر نوع صفحه نمایش
px پیکسل متفاوت خیر خیر
in اینچ 1 بله بله
mm میلیمتر 24.5 بله بله
pt نقطه 72 بله بله
dp تراکم مستقل از پیکسل حدود 160 بله خیر
sp مقیاس مستقل از پیکسل حدود 160 بله خیر

 

در مطالب بعدی به موضوعات دیگری از طراحی متریال خواهیم پرداخت.

منابع: google


تمامی حقوق این وب سایت نزد عباسعلی بهرامی محفوظ است.