12 فناوری برتری که طراحان وب در سال 2012 از آنها استفاده کردند

نوشته: علیرضا مجیدی
12
نویسنده مهمان: علیرضا رسولی: دنیای طراحی وب همواره و به طور پیوسته در حال تکامل و پیشرفت است،و این دلیلی است تا نگاهی به طراحی وب در سال 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 مراجعه کنید.
12-31-2012 08-57-32 AM
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 گروه فونت مخصوص وب در دایرکتوری گوگل موجود است.
فونت‌های نامناسب زیادی در این دایرکتوری موجود است، ولی می‌توان فونت‌هایی را نیز در آن یافت که ارزش بررسی دقیق‌تری را دارند و می‌توان از آنها برای طراحی‌هایی متفاوت بهره جست.
سایتی نیز وجود دارد که فونت‌های گوگل را دستچین کرده و در اختیار طراحان وب قرار داده، برای کسب اطلاعات بیشتر می‌توانید به پست معرفی این سایت مراجعه کنید.
12-31-2012 09-00-30 AM
6- ارتباط نوع فونت و تایپوگرافی(Type connection): سایت تایپ کانکشن سایتی است که به شما کمک می‌کند تا به وسیله طی کردن مراحلی بسیار ساده تایپوگرافی یک سایت را متناسب با نوع فونت‌های آن سایت تغییر دهید.
با طی مراحلی مثل انتخاب نوع فونت (Typeface) و موضوع سایت به شما فونت و تایپوگرافی مناسب را پیشنهاد میکند. (+)
12-31-2012 09-02-31 AM
7- سری Edge شرکت ادوبی و Creative clouds: در رابطه با این موضوع که شرکت ادوبی نقش گسترده‌ای را در طراحی صفحات وب بازی میکند شکی نیست، و با معرفی Creative clouds گویا قصد دارد تا تغییرات عظیمی را در زمینه نوآوری‌های آنلاین به وجود آورد.
با معرفی خانواده Edge توسط ادوبی در ماه سپتامبر، مهر تأییدی براینکه این شرکت قصد تصاحب کل دنیای طراحی وب را خورد.
این خانواده  جدید از ادوبی هنوز برای کامل شدن زمان نیاز دارد و مشخص است که درآینده نه چندان دور ادوبی همه ی امور مرتبط با طراحی وب را در دست خواهد گرفت.(اطلاعات بیشتر در رابطه با فونت‌های ارائه شده توسط ادوبی)
8- رتینا در وب! مسلما بعد از معرفی صفحه‌های رتینا توسط اپل، محیط وب نیز نیاز دارد تا برای هماهنگی با نسل جدید صفحه‌ها تغییرات و پیشرفت‌هایی را داشته باشد، تغییراتی که آنها را مدیون اپل است.
اما مسئله‌ای که در حال حاضر مهم است، این است که تایپوگرافی‌های موجود چگونه خود را برای صفحه‌های رتینا تغییر خواهند داد، گرچه ورود SVG ها و تصاویر بر پایه ی CSS کمک شایانی را به طراحی وب کرده است.
با توجه به اینکه ادوبی صفحه های رتینا را در photoshop و Illustrator پشتیبانی می‌کند، احتمالا در آینده طراحی وب تغییراتی در جهت هماهنگی با صفحه های رتینا داشته باشد.
12-31-2012 09-05-06 AM
9- نگاه به آینده:HTML5: مسلما طی یک تا سه سال آینده این نسخه HTML به نسخه استاندارد و پایه تبدیل خواهد شد.
اما صبر کردن برای سه سال کمی دشوار است، پس از همین الان به معرفی ویژگی‌های برتر HTML5 که دنیای طراحی وب را در سال 2012 دگرگون کرد، می‌پردازیم.
اگر پیگیر اخبار طراحی وب باشید احتمالا با تگ‌های جدید HTML5 نیز آشنا شده‌اید.
سه تگ از تگ‌های HTML5 واقعا کاربردی و جالب هستند”
نخستین تگ، تگ <canvas> است که برای نمایش انیمیشن و تصاویر گرافیکی در محیط وب توأما استفاده میشود، دیگری تگ <video> است که همانند تگ img کار میکند با این تفاوت که امکان اضافه کردن ویدئو را بدون نیاز به ابزار جانبی مانند فلش را نیز به طراح می‌دهد،
تگ سوم تگ <audio> است که کاربردی شبیه تگ video دارد و امکان افزودن فایل صورتی را به طراح می‌دهد.
برای مشاهده ی تگ های جدید html میتوانید به اینجا و اینجا مراجعه کنید.
10- فونت آیکون‌ها: نخستین بار در ماه ژانویه بود که فونت آیکون‌ها، که نوع جدیدی از فونت‌ها(typeface) بودند، معرفی شدند.
فونت‌هایی که عملا تأثیر زیادی بر روی طراحی وب و شیوه‌های طراحی طراحان داشتند.
برای کسانی که با فونت آیکون‌ها آشنایی ندارند، می‌توان به طور خلاصه گفت که آنها نسخه پیشرفته  Dingbat ها هستند.(آشنایی بیشتر با خصوصیات فونت آیکون‌ها)
پایه و اساس این ایده ،تبدیل آیکون‌ها و خطوط تصویری(pictograms) به فونت بوده است، نه استفاده از آنها به عنوان یک تصویر یا وکتور در وب.
دلیل استفاده از فونت آیکون‌ها نیز این است که فونت آیکون ها 14% سریع‌تر از تصاویر لود میشوند و حجمی برابر 10% فایل های SVG دارند.
برای مشاهده ی لیستی از 7 فونت آیکون برتر از نگاه TNW می‌توانید به این پست مراجعه کنید.
12-31-2012 09-09-10 AM
11- باز هم یک افزونه ی دیگر:kern.js: باز هم پلاگینی که برای کنترل تایپوگرافی سایت استفاده می‌شود!
این پلاگین توسط Brendan Stromberger طراحی شده و شباهت زیادی به پلاگین lettering.js دارد.
kern.js یک bookmarklet (به طور خلاصه یک افزونه که از راه بوکمارک نصب می‌شود) است که، طراحان وب می‌توانند در رابطه با تایپوگرافی سایت در زمینه‌هایی چون بلندی، فاصله و محل قرارگیری حروف از آن استفاده کنند.
برای اطلاعات بیشتر میتوانید به سایت kern.js مراجعه کنید.
12-31-2012 09-11-41 AM
12- بیشتر،بیشتر و باز هم بیشتر: اخبار برتر وب که طرح‌هایی نوین نیز بودند:
برای پیگیری اخبار کامل مربوط به طراحی و گسترش وب میتوانید به صفحه ی مخصوص این موضوع در tnw مراجعه کنید.
منابع:  (+)،(+)و(+)
اگر خواننده جدید سایت «یک پزشک»  هستید!
شما در حال خواندن سایت یک پزشک (یک پزشک دات کام) به نشانی اینترنتی www.1pezeshk.com‌ هستید. سایتی با 18 سال سابقه که برخلاف اسمش سرشار از مطالب متنوع است!
ما را رها نکنید. بسیار ممنون می‌شویم اگر:
- سایت یک پزشک رو در مرورگر خود بوک‌مارک کنید.
-مشترک فید یا RSS یک پزشک شوید.
- شبکه‌های اجتماعی ما را دنبال کنید: صفحه تلگرام - صفحه اینستاگرام ما
- برای سفارش تبلیغات ایمیل alirezamajidi در جی میل یا تلگرام تماس بگیرید.
و دیگر مطالب ما را بخوانید. مثلا:

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

علیرضا مجیدی 0
بشقاب پرنده مخفف عبارت Unidentified Flying Object است. به هر شیء یا پدیده‌ای اطلاق می‌شود که در آسمان مشاهده شود و به راحتی قابل شناسایی یا توضیح نباشد. بشقاب پرنده‌ها اغلب با ادعا‌های مربوط به فضاپیما‌های فرازمینی مرتبط هستند، اما می‌توان…

مجموعه‌ای از تصاویر عجیب و غریبی که در گوگل مپ و گوگل استریت دیده شده‌اند!

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

این عکس‌های تاریخی را پیش از این در کمتر جایی دیده‌اید

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

آیا می‌توانید در این عکس شیر کوهی را در حال تعقیب الک (گوزن شمالی) ببینید؟

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

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

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

جوزف ساموئل: مردی که نمی‌توانست به دار آویخته شود!

علیرضا مجیدی 0
جوزف ساموئل یک جنایتکار بزرگ بود نبود، فقط از منازل سرقت می‌کرد. در وهله اول،هیچ چیز قابل توجهی دیگری در مورد زندگی او جالب نبود. با این حال، وقتی قرار شد او را اعدام کنند، همه چیز عجیب و غریب شد.جوزف ساموئل در سن چهارده سالگی در سال…
آگهی متنی در همه صفحات
دکتر فارمو / کلینیک زیبایی دکتر محمد خادمی /جراح تیروئید / پزشکا /تعمیر فن کویل / سریال ایرانی کول دانلود / مجتمع فنی تهران / دانلود فیلم دوبله فارسی /خرید دوچرخه برقی /خرید دستگاه تصفیه آب /موتور فن کویل / شیشه اتومبیل / نرم افزار حسابداری / خرید سیلوسایبین / هوش مصنوعی / مقاله بازار / شیشه اتومبیل / قیمت ایمپلنت دندان با بیمه /سپتیک تانک /بهترین دکتر لیپوماتیک در تهران /بهترین جراح بینی در تهران / آموزش تزریق ژل و بوتاکس / دوره های زیبایی برای مامایی / آموزش مزوتراپی، PRP و PRF /کاشت مو /قیمت روکش دندان /خدمات پرداخت ارزی نوین پرداخت / درمان طب / تجهیزات پزشکی / دانلود آهنگ /داروخانه اینترنتی آرتان /اشتراك دايت /فروشگاه لوازم بهداشتی /داروخانه تینا /لیفت صورت در تهران /فروش‌ دوربین مداربسته هایک ویژن /سرور مجازی ایران /مرکز خدمات پزشکی و پرستاری در منزل درمان نو / ثبت برند /حمل بار دریایی از چین /سایت نوید /پزشک زنان سعادت آباد /کلاه کاسکت / لمینت متحرک دندان /فروشگاه اینترنتی زنبیل /ساعت تبلیغاتی /تجهیزات پزشکی /چاپ لیوان /خرید از آمازون /بهترین سریال های ایرانی /کاشت مو /قیمت ساک پارچه ای /دانلود نرم افزار /
12 نظرات
  1. مصطفی می گوید

    اصولا اهل کامنت گذاشتن نیستم اما این یکی بسیار عالی بود. من در تعجبم شما چه علاقه ای به اینجور پست ها دارید!
    دکتر بسیار لذت بردم.

    پاسخ
  2. محمد می گوید

    این مطلب عالی بود.
    ممنون از جناب رسولی.
    موارد شماره ۳ (افزونه‌های jQuery) و شماره ۱۰ (فونت آیکن‌ها) بشدت کاربردی هستند.
    و البته به نظرم مورد شماره ۱ فعلا برای اینترنت ایرانی کاربردی نداره. چون لودش خیلی طول می‌کشه…
    هر وقت این تکنیک رو می‌بینم ناخودآگاه بیاد VRML و اینترنت سه بعدی می‌افتم…

    پاسخ
  3. e00 می گوید

    عالی بود
    مورد 1 پارالاکس ==>>> چندین سایت ایرانی هم با این تکنیک دیدم که طراحی شدن.مثل باایمیل ، رنگی رنگی بخشی برای شب یلدا ایجاد کرده بود ، شبکه اجتماعی

    پاسخ
    1. محمد می گوید

      با ایمیل؟! فکر نمی کنم…
      خودتون ببینید : http://www.baaemail.com

      پاسخ
    2. علیرضا رسولی می گوید

      سلام،با ایمیل از parallax استفاده نمی کند.سایت رنگی رنگی هم بخش ذکر شده را پیدا نکردم

      پاسخ
  4. حامد می گوید

    ما هم برای طراحی سایت مرکز طراحی اسپیرال، حدود پنج شش ماه پیش از تکنیک parallax استفاده کردیم. به نظر می آید مفهوم جدیدی از پیمایش وب در حال گسترش است…
    ممنون از یک پزشک که وب فارسی را میهمان این مفاهیم می کند…

    پاسخ
  5. محسن کریمی می گوید

    بسیار کاربردی

    پاسخ
  6. e00 می گوید

    @ محمد چرا نه؟ خودشه یه تگاه دقیقتر بنداز!!

    پاسخ
  7. e00 می گوید

    البته الان رفتم دیدم انیمیشن پیمایشش رو مقداری عوض کردن ولی همون تکنیک هست

    پاسخ
  8. آرمین می گوید

    سایت معتبر awwwards.com را حتما ببینید. هر روز یک سایت را feature میکنه که از لحاظ طراحی و تکنیک نو هست.

    پاسخ
  9. محمد علی اکبری می گوید

    در مورد سایت awwwards اینجا (blog.rastasoft.ir/fa/node/104) بیشتر بخونید

    پاسخ
  10. وحید می گوید

    مطلب بسیار خوبی بود از نویسنده این مطلب بسیار تشکر میکنم.

    پاسخ

ارسال یک پاسخ

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