چند تکنیک نوین در طراحی وب
s: تجربیات | تخصصی | معرفی | وب به عنوان یک طراح وب ، ناگزیر هستید به طور مستمر دانش خود را به روز کنید و گرنه به سرعت از بازار و تحولات آن عقب می مانید. امروز قصد دارم چند تا از تکنیکهای نوین طراحی و برنامه نویسی وب را با شما به اشتراک بگذارم. متن زیر ترجمه آزادیست از مقاله هفت تکنیک جدیدی که یک طراح وب باید بداند . قالب بندی مبتنی بر رسانه ( Css3 media queries ) با گسترش موبایلهای هوشمند ، تبلت ها و مینی لپ تاپ ها ، طراحی صفحاتی که در همه این وسایل به صورت واضح و بدون خطا نمایش داده شود چالشی برای طراحان وب است . این نیاز باعث شد که در نسخه جدید CSS3 ، طراحان بتوانند قالب هایی خاص وسایلی با اندازه صفحه مشخص تعریف کنند. مثلا کد زیر تنها برروی وسایل و رسانه هایی اعمال می شود که عرض صفحه آنها از 767 پیکسل کمتر باشد. @media screen and (max-width:767px){ #container{ width:320px; } header h1#logo a{ width:320px; height:44px; background: url('/image-small.jpg') no-repeat 0 0; } } برای اطلاعات بیشتر راجع به این تکنیک به این مقاله رجوع کنید. تعیین اندازه فونت به کمک REM اگر با واحد اندازه گیری em آشنا هستید ، کار با این واحد برایتان راحت تر خواهد بود. em نماد اندازه جاری در صفحه وب است . مثلا اگر فونت یک پاراگراف را 12pt تعیین کرده باشید و درون آن یک لینک گذاشته و اندازه آنرا برابر 1.5em قراردهید، اندازه نهایی لینک برابر 18pt منظور خواهد شد. همین نسبی بودن em و حساس بودن آن به مکان فعلی عنصر ، باعث شد که در نسخه جدید CSS3 واحدی به نام rem که مخفف "root em" یا اندازه ریشه (برچسب html ) است ، به مجموعه واحدهای اندازه گیری افزوده شد. یعنی اگر اندازه یک عنصر را برابر 1.5rem قرار دهید، یعنی یک و نیم برابر اندازه عنصر ریشه . به این ترتیب همه اندازه ها می توانند به صورت یکنواخت و با توجه به اندازه عنصر ریشه تعریف شوند. مثال زیر این روش را نشان می دهد ( اندازه فونت پیش فرض صفحه 16px است ): html { font-size: 62.5%; } / =10px / body { font-size: 1.4rem; } / =14px / h1 { font-size: 2.4rem; } / =24px / برای کسب اطلاعات بیشتر به مقاله تعیین اندازه فونت به کمک rem مراجعه کنید. عناصر نوین در طراحی فرم یکی از تغییرات عمده نسخه جدید HTML قابلیت های بسیار زیادیست که به فرآیند طراحی فرم آن افزوده شده است. علاوه بر معرفی بسیاری از عناصر جدید فرم که در نسخه های قبلی موجود نبودند، خاصیت های جدیدی هم به عناصر موجود افزوده شد. قطعه کد زیر بسیاری از این قابلیت ها را در قالب یک مثال به شما نشان می دهد.
برای دیدن مقاله کامل به این آدرس رجوع کنید. انیمیشن های ساده و کاربردی یکی دیگر از امکاناتی که به HTML5 افزوده شده، قابلیت انیمیشن و پویانمایی عناصر است به قسمی که می توان به راحتی بسیاری از انیمیشن های فلش را به نسخه استاندارد HTML آن تبدیل کرد. اما بعضی از قابلیت های آن،علاوه بر اینکه نیاز به تخصص پیچیده ای ندارند، باعث ایجاد صفحاتی جذاب می شوند . فرض کنید بخواهید رنگ پشت زمینه صفحه شما هر سی ثانیه عوض شود، کافیست کد زیر را به کار برید : body { animation-name: colour-change; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: 30s; } colour-change { 0% { background: red; } 33% { background: green; } 66% { background: blue; } } مثالی از این کاربرد را در این آدرس حتما مشاهده کنید.البته به دلیل عدم پشتیبانی کامل مرورگرها از این فناوری لازمست تغییراتی بسته به نوع مرورگر در چهارچوب فوق داده شود . برای آشنایی بیشتر با این مبحث به این آدرس رجوع کنید.