12 فناوری برتری که طراحان وب در سال 2012 از آنها استفاده کردند
نویسنده مهمان: علیرضا رسولی: دنیای طراحی وب همواره و به طور پیوسته در حال تکامل و پیشرفت است،و این دلیلی است تا نگاهی به طراحی وب در سال 2012 که امروز به پایانش میرسیم، بیندازیم و ببینیم که تا کجا پیش رفتهایم
پیشرفت موضوعات مربوط به طراحی و گسترش وب، به ایده و خلاقیت طراحان وب نیاز دارد.
در این پست قصد دارم تا لیستی از 12 فناوری برتر وب در سال 2012 از نگاه TNW را در اختیار شما بگذارم:
1- Parallax: parallax در معنای لغوی به معنی اختلاف منظر است و براساس تعریف به جابجایی آشکار بین دو نقطه یا جابجایی یک شیء بین دو نقطه غیر واقع بر یک خط راست گفته میشود.
ولی در طراحی وب به معنای تکنیکهای پیمایش در صفحه برای عمق بخشی به سایت تلقی میشود.
از میان تمام شیوههای طراحی وب، بعد از دوران طلایی وب 2، به جرئت میتوان گفت “پارالاکس” یکی از قدرتمندترین و شگفتانگیزترین گرایشها بوده است.
تکنیک جلب نظر کاربر البته یک تکنیک تازه نیست، ولی این تکنیک به سرعت به یک روش محبوب برای علاقهمندسازی کاربر به یک موضوع تبدیل شد.
پارالاکس یکی از این روشهاست، و چنانچه شما علاقهمندید تا با استفاده از این روش سایتی همانند سایتهای Nike و Living word و…(نمونه های بیشتر) طراحی کنید و کاربر را غرق در وبسایت خود کنید، میتوانید از افزونه scrollorama استفاده کنید که با استفاده از jQuery شکل گرفته است.
Scrollorama افزونه است که به شما اجازه میدهد تا بدون استفاده از جاوا اسکریپت وبسایتی با طراحی خاص ایجاد کنید.
سازنده ی این پلاگین در توصیف آن میگوید:
Scrollorama یک افزونه است که به شما اجازه میدهد تا المنتها(عناصر html و css) سایت خود را که وابسته به مرورگر هستند، بر اساس پیمایش صفحه در ویندوز به حرکت درآورید.
چنانچه کمی با html و css آشنا باشید، حتما باید بدانید که طراحی چنین صفحاتی نیازمند توابع کتابخانهای جاوااسکریپت، جی کوئری است، که امکان چنین پیمایشهایی را به کاربر میدهد که در ورای آن کدها و توابع پیچیدهای وجود دارند.
همچنین سازنده این پلاگین، پلاگین دیگری را به نام scrolldeck.js نیز طراحی کرده که با آن امکان اسکرول افقی بین صفحات نیز به سادگی ممکن شده است.
2- سیستم عامل Firefox یا Firefox OS: چه چیزی بهتر از داشتن یک دسکتاپ از یک سیستم عامل بر پایه وب است؟ یک سیستم عامل مخصوص وب که قدرت مدیریت خوبی روی اپ های مرتبط به وب دارد.
بعد از نخستین اطلاع رسانی موزیلا از انتشار سیستم عامل firefox OS، گویا که این شرکت قصد دارد تا به آرامی ما را با سیستم عامل آینده موبایل ها آشنا کند.
حالا موزیلا دست به ابتکاری زده و به لطف یک Add-On ساده فایرفاکس هر کسی میتواند، کار با این سیستم عامل تازه را تجربه کند.
چندی پیش افرادی که قصد داشتند تا این سیستم عامل را نصب کنند نیاز به نصب دستی دسکتاپ (میزکار) B2G داشتند که آن هم دردسرهای خاص خودش را داشت.
گرچه قابل ذکر است که این سیستم عامل هنوز بر پایه ی B2G است ولی حال نصب و بهروزرسانی ساده و آسانتری دارد!
برای کسب اطلاعات بیشتر به پست معرفی این افزونه و همچنین پست اطلاع رسانی از انتشار شبیه ساز Firefox OS در TNW مراجعه کنید.
3- افزونه های کارآمد و جذاب بر پایه ی jQuery
برای حفظ ارزش این پست و پربارتر کردن آن،تعدادی از افزونه های جی کوئری مناسب را در یک بخش و در کنار هم میاورم:
- Placekitten افزونه ایست که به شما اجازه میدهد تا تمامی عناصر(المنت) html را به بچه گربه(!) تبدیل کنید.نمونه ی از کارکرد این پلاگین که توسط آدام هاوارد طراحی شده است.(+)
- Garlic.js افزونه ای که با ذخیره سازی اطلاعات کاربران از بین رفتن آنها جلوگیری میکند.(+)
- Responsive-content افزونه ای که برای دیوایس های مختلف نمایش های مختلفی از HTML را ارائه میکند.(+)
- SlabText پلاگینی برای ساخت عناوین(headline) بزرگ و مناسب برای وب سایت ها با قابلیت تغییر سایز متناسب با سایز صفحه ی کاربر که از ترکیب افزونه ی Fittext ساخته شده است.(+)
- jQuery Transit افزونه ای برای ایجاد تغییراتی چون چرخش و جابجایی در CSS به حالتی ویژه که نیاز به کدنویسی های جاوا اسکریپت ندارد و از اغلب مرورگرها نیز پشتیبانی میکند.(+)
- Lettering.js افزونه ای برای کنترل تایپوگرافی سایت توسط جی کوئری!
- Typebutter افزونه ای همانند افزونه lettering.js که برای مدیریت تایپوگرافی عنوان ها و فاصله ی بین حروف آنها استفاده میشود.(+)
- jSVG افزونه ای برای مدیریت بهتر SVG ها در مرورگرهای مدرن.
- همچنین افزونه های jQuery scroll path و responsiveslides.js و
Tiny Scrollbar و jQuery Retina Swap و Uniform را نیز میتوان جزو این دسته قرار داد.(+)
4- الهاماتی برای طراحی وب: دنیای وب پر است از ایده ها و الهاماتی برای طراحی های جدید،که با کمی خلاقیت میتوان طرح هایی متفاوت و جدید آفرید.
اغلب طراحان وب به دنبال آنند که ایده هایی برای طراحی پیدا کنند.
وب سایت TNW چندی پیش لیستی از 98وب سایت الهام بخش به طراحان وب را منتشر کرد که میتوان آنرا در دسته ی پست های برتر مرتبط با طراحی وب در سال 2012 قرار داد.
5- فونت های مخصوص وب گوگل: در حال حاضر بیش از 600 گروه فونت مخصوص وب در دایرکتوری گوگل موجود است.
فونتهای نامناسب زیادی در این دایرکتوری موجود است، ولی میتوان فونتهایی را نیز در آن یافت که ارزش بررسی دقیقتری را دارند و میتوان از آنها برای طراحیهایی متفاوت بهره جست.
سایتی نیز وجود دارد که فونتهای گوگل را دستچین کرده و در اختیار طراحان وب قرار داده، برای کسب اطلاعات بیشتر میتوانید به پست معرفی این سایت مراجعه کنید.
6- ارتباط نوع فونت و تایپوگرافی(Type connection): سایت تایپ کانکشن سایتی است که به شما کمک میکند تا به وسیله طی کردن مراحلی بسیار ساده تایپوگرافی یک سایت را متناسب با نوع فونتهای آن سایت تغییر دهید.
با طی مراحلی مثل انتخاب نوع فونت (Typeface) و موضوع سایت به شما فونت و تایپوگرافی مناسب را پیشنهاد میکند. (+)
7- سری Edge شرکت ادوبی و Creative clouds: در رابطه با این موضوع که شرکت ادوبی نقش گستردهای را در طراحی صفحات وب بازی میکند شکی نیست، و با معرفی Creative clouds گویا قصد دارد تا تغییرات عظیمی را در زمینه نوآوریهای آنلاین به وجود آورد.
با معرفی خانواده Edge توسط ادوبی در ماه سپتامبر، مهر تأییدی براینکه این شرکت قصد تصاحب کل دنیای طراحی وب را خورد.
این خانواده جدید از ادوبی هنوز برای کامل شدن زمان نیاز دارد و مشخص است که درآینده نه چندان دور ادوبی همه ی امور مرتبط با طراحی وب را در دست خواهد گرفت.(اطلاعات بیشتر در رابطه با فونتهای ارائه شده توسط ادوبی)
8- رتینا در وب! مسلما بعد از معرفی صفحههای رتینا توسط اپل، محیط وب نیز نیاز دارد تا برای هماهنگی با نسل جدید صفحهها تغییرات و پیشرفتهایی را داشته باشد، تغییراتی که آنها را مدیون اپل است.
اما مسئلهای که در حال حاضر مهم است، این است که تایپوگرافیهای موجود چگونه خود را برای صفحههای رتینا تغییر خواهند داد، گرچه ورود SVG ها و تصاویر بر پایه ی CSS کمک شایانی را به طراحی وب کرده است.
با توجه به اینکه ادوبی صفحه های رتینا را در photoshop و Illustrator پشتیبانی میکند، احتمالا در آینده طراحی وب تغییراتی در جهت هماهنگی با صفحه های رتینا داشته باشد.
9- نگاه به آینده:HTML5: مسلما طی یک تا سه سال آینده این نسخه HTML به نسخه استاندارد و پایه تبدیل خواهد شد.
اما صبر کردن برای سه سال کمی دشوار است، پس از همین الان به معرفی ویژگیهای برتر HTML5 که دنیای طراحی وب را در سال 2012 دگرگون کرد، میپردازیم.
اگر پیگیر اخبار طراحی وب باشید احتمالا با تگهای جدید HTML5 نیز آشنا شدهاید.
سه تگ از تگهای HTML5 واقعا کاربردی و جالب هستند”
نخستین تگ، تگ <canvas> است که برای نمایش انیمیشن و تصاویر گرافیکی در محیط وب توأما استفاده میشود، دیگری تگ <video> است که همانند تگ img کار میکند با این تفاوت که امکان اضافه کردن ویدئو را بدون نیاز به ابزار جانبی مانند فلش را نیز به طراح میدهد،
تگ سوم تگ <audio> است که کاربردی شبیه تگ video دارد و امکان افزودن فایل صورتی را به طراح میدهد.
10- فونت آیکونها: نخستین بار در ماه ژانویه بود که فونت آیکونها، که نوع جدیدی از فونتها(typeface) بودند، معرفی شدند.
فونتهایی که عملا تأثیر زیادی بر روی طراحی وب و شیوههای طراحی طراحان داشتند.
برای کسانی که با فونت آیکونها آشنایی ندارند، میتوان به طور خلاصه گفت که آنها نسخه پیشرفته Dingbat ها هستند.(آشنایی بیشتر با خصوصیات فونت آیکونها)
پایه و اساس این ایده ،تبدیل آیکونها و خطوط تصویری(pictograms) به فونت بوده است، نه استفاده از آنها به عنوان یک تصویر یا وکتور در وب.
دلیل استفاده از فونت آیکونها نیز این است که فونت آیکون ها 14% سریعتر از تصاویر لود میشوند و حجمی برابر 10% فایل های SVG دارند.
برای مشاهده ی لیستی از 7 فونت آیکون برتر از نگاه TNW میتوانید به این پست مراجعه کنید.
11- باز هم یک افزونه ی دیگر:kern.js: باز هم پلاگینی که برای کنترل تایپوگرافی سایت استفاده میشود!
این پلاگین توسط Brendan Stromberger طراحی شده و شباهت زیادی به پلاگین lettering.js دارد.
kern.js یک bookmarklet (به طور خلاصه یک افزونه که از راه بوکمارک نصب میشود) است که، طراحان وب میتوانند در رابطه با تایپوگرافی سایت در زمینههایی چون بلندی، فاصله و محل قرارگیری حروف از آن استفاده کنند.
برای اطلاعات بیشتر میتوانید به سایت kern.js مراجعه کنید.
12- بیشتر،بیشتر و باز هم بیشتر: اخبار برتر وب که طرحهایی نوین نیز بودند:
برای پیگیری اخبار کامل مربوط به طراحی و گسترش وب میتوانید به صفحه ی مخصوص این موضوع در tnw مراجعه کنید.
اگر خواننده جدید سایت «یک پزشک» هستید!
شما در حال خواندن سایت یک پزشک (یک پزشک دات کام) به نشانی اینترنتی www.1pezeshk.com هستید. سایتی با 18 سال سابقه که برخلاف اسمش سرشار از مطالب متنوع است!
ما را رها نکنید. بسیار ممنون میشویم اگر:
- سایت یک پزشک رو در مرورگر خود بوکمارک کنید.
-مشترک فید یا RSS یک پزشک شوید.
- شبکههای اجتماعی ما را دنبال کنید: صفحه تلگرام - صفحه اینستاگرام ما
- برای سفارش تبلیغات ایمیل alirezamajidi در جی میل یا تلگرام تماس بگیرید.
و دیگر مطالب ما را بخوانید. مثلا:
خانههای با مبلمانهایی از غذاهای خوشمزه
هانسل و گرتل، نام داستانی شاهپریانی با منشأ آلمانی است که برادران گریم آن را ثبت کردهاند. این داستان ماجرای یک برادر و خواهر کوچک به نامهای هانسل و گرتل را روایت میکند که پس از رها شدن در جنگل به خانهای که از کیک و آبنبات ساخته شده…
برای جبران خطرات سلامتی ناشی از نشستن در طول روز وجود باید تحرک متناوب انجام بدهید. اما هر چند دقیقه…
برای کاهش اثرات مضر نشستن بر سلامتی، هر نیم ساعت یکبار 5 دقیقه پیاده روی سبک داشته باشید. این یافته کلیدی مطالعه جدیدی است که در مجله Medicine & Science in Sports & Exercise منتشر شده است.محققان نوشتهاند:«ما از 11 فرد سالم…
مجموعهای از تصاویر عجیب و غریبی که در گوگل مپ و گوگل استریت دیده شدهاند!
گوگل مپ بسیار کار راهانداز است و گوگل استریت اصلا اگر سرعت اینترنت اجازه بدهد، اجازه جهانگردی مجازی به ما میدهد.اما برخی اوقات اشخاص به صورت تصادفی و یا حین وبگردیهای طولانی تصاویری در این سرویسهای گوگل شکار کردهاند که بسیار بامزه…
10 عکس بسیار زیبا از درخت – انتخاب شده از عکاسان خلاق
درختها زندگیبخش زمین و مایه زیبایی آن هستند. انسانها هزاران سال است که آنها بهره میبرند و تا توانستهاند پهنه زمین برخوردار از زیباییشان را کمتر و کمتر کردهاند. درختان متنوع با شکل و آرایش متفاوت ریشه، تنه، شاخهها و برگها، چشمنواز…
جستجو برای جیمز باند بعدی – طرفداران جیمز باند یکی از این 11 نفر را جیمز باند بعدی میدانند
جیمز باند یک شخصیت خیالی است که توسط نویسنده بریتانیایی یان فلمینگ خلق شده. باند یک مامور سرویس مخفی بریتانیایی ظریف و پیچیده است که با کد 007 نیز شناخته میشود. او اولین حضور خود را در رمان «کازینو رویال» فلمینگ در سال 1953 انجام داد و از…
زره نمادین فلزی پیچیده برای گربهها و موشها – کار یک هنرمند باذوق!
دشمنی بین گربهها و موشها به قدمت تاریخ است. اگر قرار بود آنها مثل آدمیان در برابر هم صفآرایی کنند چه چیزهایی برای این نبرد میساختند؟کار یک هنرمند کانادایی تقریباً در همین سمت و سو است. جف دی بوئر با الهام از فرهنگهای باستانی و…
اصولا اهل کامنت گذاشتن نیستم اما این یکی بسیار عالی بود. من در تعجبم شما چه علاقه ای به اینجور پست ها دارید!
دکتر بسیار لذت بردم.
این مطلب عالی بود.
ممنون از جناب رسولی.
موارد شماره ۳ (افزونههای jQuery) و شماره ۱۰ (فونت آیکنها) بشدت کاربردی هستند.
و البته به نظرم مورد شماره ۱ فعلا برای اینترنت ایرانی کاربردی نداره. چون لودش خیلی طول میکشه…
هر وقت این تکنیک رو میبینم ناخودآگاه بیاد VRML و اینترنت سه بعدی میافتم…
عالی بود
مورد 1 پارالاکس ==>>> چندین سایت ایرانی هم با این تکنیک دیدم که طراحی شدن.مثل باایمیل ، رنگی رنگی بخشی برای شب یلدا ایجاد کرده بود ، شبکه اجتماعی
با ایمیل؟! فکر نمی کنم…
خودتون ببینید : http://www.baaemail.com
سلام،با ایمیل از parallax استفاده نمی کند.سایت رنگی رنگی هم بخش ذکر شده را پیدا نکردم
ما هم برای طراحی سایت مرکز طراحی اسپیرال، حدود پنج شش ماه پیش از تکنیک parallax استفاده کردیم. به نظر می آید مفهوم جدیدی از پیمایش وب در حال گسترش است…
ممنون از یک پزشک که وب فارسی را میهمان این مفاهیم می کند…
بسیار کاربردی
@ محمد چرا نه؟ خودشه یه تگاه دقیقتر بنداز!!
البته الان رفتم دیدم انیمیشن پیمایشش رو مقداری عوض کردن ولی همون تکنیک هست
سایت معتبر awwwards.com را حتما ببینید. هر روز یک سایت را feature میکنه که از لحاظ طراحی و تکنیک نو هست.
در مورد سایت awwwards اینجا (blog.rastasoft.ir/fa/node/104) بیشتر بخونید
مطلب بسیار خوبی بود از نویسنده این مطلب بسیار تشکر میکنم.