۱۲ فناوری برتری که طراحان وب در سال ۲۰۱۲ از آنها استفاده کردند

[moein.s 18983]

دنیای طراحی وب همواره و به طور پیوسته در حال تکامل و پیشرفت است،و این دلیلی است تا نگاهی به طراحی وب در سال ۲۰۱۲ که امروز به پایانش می‌رسیم، بیندازیم و ببینیم که تا کجا پیش رفته‌ایم

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

در این پست قصد دارم تا لیستی از ۱۲ فناوری برتر وب در سال ۲۰۱۲ از نگاه TNW را در اختیار شما بگذارم:

 

۱- Parallax: parallax در معنای لغوی به معنی اختلاف منظر است و براساس تعریف به جابجایی آشکار بین دو نقطه یا جابجایی یک شیء بین دو نقطه غیر واقع بر یک خط راست گفته می‌شود.

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

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

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

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

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

و

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

و…(

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

) طراحی کنید و کاربر را غرق در وب‌سایت خود کنید، میتوانید از افزونه

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

استفاده کنید که با استفاده از jQuery شکل گرفته است.

 

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

 

سازنده ی این پلاگین در توصیف آن می‌گوید:

 

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

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

 

همچنین سازنده این پلاگین، پلاگین دیگری را به نام

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

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

 

 

۲- سیستم عامل Firefox یا Firefox OS: چه چیزی بهتر از داشتن یک دسکتاپ از یک سیستم عامل بر پایه وب است؟ یک سیستم عامل مخصوص وب که قدرت مدیریت خوبی روی اپ های مرتبط به وب دارد.

 

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

حالا موزیلا دست به ابتکاری زده و به لطف

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

هر کسی می‌تواند، کار با این سیستم عامل تازه را تجربه کند.

 

چندی پیش افرادی که قصد داشتند تا این سیستم عامل را نصب کنند نیاز به نصب دستی دسکتاپ (میزکار)

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

داشتند که آن هم دردسرهای خاص خودش را داشت.

گرچه قابل ذکر است که این سیستم عامل هنوز بر پایه ی B2G است ولی حال نصب و به‌روزرسانی ساده و آسان‌تری دارد!

 

برای کسب اطلاعات بیشتر به پست

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

و همچنین

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

در TNW مراجعه کنید.

 

 

۳- افزونه های کارآمد و جذاب بر پایه ی jQuery

 

برای حفظ ارزش این پست و پربارتر کردن آن،تعدادی از افزونه های جی کوئری مناسب را در یک بخش و در کنار هم میاورم:

 

 

• برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  افزونه ایست که به شما اجازه میدهد تا تمامی عناصر(المنت) html را به بچه گربه(!) تبدیل کنید.
  برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  که توسط آدام هاوارد طراحی شده است.(
  برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  )
  
• 
  
  
• برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  افزونه ای که با ذخیره سازی اطلاعات کاربران از بین رفتن آنها جلوگیری میکند.(
  برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  )
  
• 
  
  
• برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  افزونه ای که برای دیوایس های مختلف نمایش های مختلفی از HTML را ارائه میکند.(
  برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  )
  
• 
  
  
• برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  پلاگینی برای ساخت عناوین(headline) بزرگ و مناسب برای وب سایت ها با قابلیت تغییر سایز متناسب با سایز صفحه ی کاربر که از ترکیب افزونه ی
  برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  ساخته شده است.(
  برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  )
  
• 
  
  
• برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  افزونه ای برای ایجاد تغییراتی چون چرخش و جابجایی در CSS به حالتی ویژه که نیاز به کدنویسی های جاوا اسکریپت ندارد و از اغلب مرورگرها نیز پشتیبانی میکند.(
  برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  )
  
• 
  
  
• برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  افزونه ای برای کنترل
  برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  سایت توسط جی کوئری!
  
• 
  
  
• برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  افزونه ای همانند افزونه lettering.js که برای مدیریت تایپوگرافی عنوان ها و فاصله ی بین حروف آنها استفاده میشود.(
  برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  )
  
• 
  
  
• برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  افزونه ای برای مدیریت بهتر
  برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  ها در مرورگرهای مدرن.
  
• 
  
  
• همچنین افزونه های
  برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  و
  برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  و
  برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  و
  برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  و
  برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  را نیز میتوان جزو این دسته قرار داد.(
  برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  )
  

 

[moein.s 18983]

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

اغلب طراحان وب به دنبال آنند که ایده هایی برای طراحی پیدا کنند.

 

وب سایت TNW چندی پیش

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

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

 

 

۵- فونت های مخصوص وب گوگل: در حال حاضر بیش از ۶۰۰ گروه فونت مخصوص وب در دایرکتوری گوگل موجود است.

 

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

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

نیز وجود دارد که

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

را دستچین کرده و در اختیار طراحان وب قرار داده، برای کسب اطلاعات بیشتر می‌توانید به

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

مراجعه کنید.

 

 

 

۶- ارتباط نوع فونت و تایپوگرافی(Type connection): سایت

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

سایتی است که به شما کمک می‌کند تا به وسیله طی کردن مراحلی بسیار ساده تایپوگرافی یک سایت را متناسب با نوع فونت‌های آن سایت تغییر دهید.

 

 

با طی مراحلی مثل انتخاب نوع فونت (Typeface) و موضوع سایت به شما فونت و تایپوگرافی مناسب را پیشنهاد میکند. (

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

)

 

 

 

 

۷- سری Edge شرکت ادوبی و Creative clouds: در رابطه با این موضوع که شرکت ادوبی نقش گسترده‌ای را در طراحی صفحات وب بازی میکند شکی نیست، و با معرفی

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

گویا قصد دارد تا تغییرات عظیمی را در زمینه نوآوری‌های آنلاین به وجود آورد.

 

 

با معرفی خانواده Edge توسط ادوبی در ماه سپتامبر، مهر تأییدی براینکه این شرکت قصد تصاحب کل دنیای طراحی وب را خورد.

 

 

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

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

)

 

[moein.s 18983]

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

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

 

با توجه به اینکه ادوبی

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

، احتمالا در آینده طراحی وب تغییراتی در جهت هماهنگی با صفحه های رتینا داشته باشد.

 

 

۹- نگاه به آینده:HTML5: مسلما طی یک تا سه سال آینده این نسخه HTML به نسخه استاندارد و پایه تبدیل خواهد شد.

 

اما صبر کردن برای سه سال کمی دشوار است، پس از همین الان به معرفی ویژگی‌های برتر HTML5 که دنیای طراحی وب را در سال ۲۰۱۲ دگرگون کرد، می‌پردازیم.

اگر پیگیر اخبار طراحی وب باشید احتمالا با تگ‌های جدید HTML5 نیز آشنا شده‌اید.

 

سه تگ از تگ‌های HTML5 واقعا کاربردی و جالب هستند”

 

نخستین تگ، تگ

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

است که برای نمایش انیمیشن و تصاویر گرافیکی در محیط وب توأما استفاده میشود، دیگری تگ

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

است که همانند تگ img کار میکند با این تفاوت که امکان اضافه کردن ویدئو را بدون نیاز به ابزار جانبی مانند فلش را نیز به طراح می‌دهد،

 

تگ سوم تگ

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

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

برای مشاهده ی تگ های جدید html میتوانید به

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

و

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

مراجعه کنید.

 

 

 

۱۰- فونت آیکون‌ها: نخستین بار در

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

بود که فونت آیکون‌ها، که نوع جدیدی از فونت‌ها(typeface) بودند، معرفی شدند.

فونت‌هایی که عملا تأثیر زیادی بر روی طراحی وب و شیوه‌های طراحی طراحان داشتند.

 

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

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

ها هستند.(

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

)

پایه و اساس این ایده ،تبدیل آیکون‌ها و خطوط تصویری(pictograms) به فونت بوده است، نه استفاده از آنها به عنوان یک تصویر یا وکتور در وب.

 

دلیل استفاده از فونت آیکون‌ها نیز این است که فونت آیکون ها

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

از تصاویر لود میشوند و

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

دارند.

برای مشاهده ی لیستی از ۷ فونت آیکون برتر از نگاه TNW می‌توانید به

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

مراجعه کنید.

 

 

۱۱- باز هم یک افزونه ی دیگر:kern.js: باز هم پلاگینی که برای کنترل تایپوگرافی سایت استفاده می‌شود!

 

این پلاگین توسط Brendan Stromberger طراحی شده و شباهت زیادی به پلاگین lettering.js دارد.

 

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

 

برای اطلاعات بیشتر میتوانید به سایت

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

مراجعه کنید.

 

 

۱۲- بیشتر،بیشتر و باز هم بیشتر: اخبار برتر وب که طرح‌هایی نوین نیز بودند:

 

 

• برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  
  
• برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  
  
• برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

  • ورود
  • یا
  • ثبت نام
  
  

 

برای پیگیری اخبار کامل مربوط به طراحی و گسترش وب میتوانید به

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

در tnw مراجعه کنید.

 

 

منابع: (

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

)،(

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

)و(

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

)

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام