آیا میدانید؟ پرستاشاپ فارسی بهترین مرجع رایگان پرستاشاپ است ؟
#
آخرین محصولات فروشگاه
نمایش نتایج: از 1 به 3 از 3

موضوع: آموزش اصول طراحی سایت واکنشگرا( Responsive WebDesign )

  1. Top | #1

    تاریخ عضویت
    Feb 2014
    عنوان کاربر
    مدیریت راهبردی
    ميانگين پست در روز
    0.00
    نوشته ها
    3
    سپــــــــاس
    1
    تشکر شده 4 بار در 3 ارسال

    آموزش اصول طراحی سایت واکنشگرا( Responsive WebDesign )

    روز به روز بر تعداد کسانی که از ابزارهای قابل حمل برای دسترسی به اینترنت استفاده می کنند افزوده می شود. طراحی سایت به گونه ای که در هر عرض و طول صفحه قابل استفاده باشد اصطلاحا «طراحی واکنش گرا» یا «Responsive webdesign» نامیده می شود.

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

    Viewport
    مرورگرهای موبایل برای سازگاری با سایت هایی که در گذشته طراحی شده اند، از مفهومی به نام Viewport برای نمایش سایت ها استفاده می کنند. Viewport فضایی مجازی است که معمولا حدود ۱۰۰۰ پیکسل عرض دارد. مرورگر موبایل سایت را در این فضای مجازی نمایش می دهد و سپس این تصویر را در فضای واقعی نمایشگر موبایل یا تبلت قرار می دهد.
    نخستین گام در طراحی واکنش گرا، اطلاع رسانی به مرورگر برای تغییر اندازه ی Viewport است تا به جای ۱۰۰۰ یا ۹۸۰ پیکسل پیش فرض، فضای مورد نظر برنامه نویس را به Viewport اختصاص دهد.
    تغییر اندازه ی Viewport با استفاده از تگ meta در سرآمد فایل html به انجام می رسد.

    کد:
    <head>
    <meta name="viewport" content="width=480">
    </head>
    همان گونه که مشاهده می کنید، در مثال بالا عرض Viewport برابر ۴۸۰ پیکسل مشخص شده است. این مقدار حداقل مقدار ممکن است. چنانچه عرض نمایشگر موبایل بیش از ۴۸۰ پیکسل باشد، عرض Viewport هم افزایش خواهد یافت.
    شیوه ی دیگر در تغیین مقدار Viewport، تعیین آن با عرض فیزیکی نمایشگر است. برای این کار از کد زیر استفاده می شود:

    کد:
    <meta name="viewport" content="width=device-width">
    اندازه ی مجازی
    به دلیل تراکم بیشتر پیکسلی در موبایل های امروزی در مقایسه با تراکم متداول در نمایشگرهای لپ تاپ و کامپیوترهای شخصی، مرورگرهای موبایل ممکن است هر پیکسل را بزرگتر از یک پیکسل به نمایش درآورند. به این معنی که مثلا اگر عرض یک عنصر ۲۰۰ پیکسل مشخص شود، ممکن است این مقدار مساوی ۴۰۰ پیکسل به نمایش درآید.
    درصد بزرگنمایی پیکسل در مرورگرهای مختلف و در دستگاه های مختلف و در سیستم عامل های مختلف، متغیر است. بنابراین یکی از مهم ترین نکات در طراحی واکنش گرا، عدم اعتماد به انداز ه ی پیکسل ها است.
    در سایت [تنها کاربران انجمن می توانند لینک و عکس ها را مشاهده کنند تنها در 10 ثانیه ثبت نام کنید . ] می توانید اندازه ی واقعی و مجازی پیکسل در ابزارهای مختلف را مشاهده کنید.
    برای مثال گوشی Galaxy SII دارای ۴۸۰ پیکسل واقعی و ۳۲۰ پیکسل مجازی است. به عبارت دیگر، اگر شما یک تصویر با عرض ۳۲۰ پیکسل را در این گوشی به نمایش در بیاورید، این تصویر ۴۸۰ پیکسل فضا اشغال خواهد کرد.
    بهترین راه حل برای پایداری طرح، استفاده از واحدهای فیزیکی مانند point، cm، و … است

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

    کد:
    <meta name="viewport" content="width=480, initial-scale=1, maximum-scale=2">
    در کد بالا بیشترین اندازه ی بزرگنمایی ۲ برابر و اندازه ی پیش فرض آن ۱ تعیین شده است.

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

    عرض حداقل و حداکثر
    برای آنکه صفحات وب در همه جا به بهترین شکل ممکن نمایش داده شوند، لازم است تا عرض حداقل و حداکثر برای عنصر body تعیین شود. با توجه به جدول سایت Screen Sizes که بالاتر مشاهده کردید، حداقل عرض مجازی می تواند ۳۲۰ پیکسل و با توجه به آخرین آمار استفاده کنندگان لپ تاپ و کامپیوتر، حداکثر عرض مناسب، ۱۰۰۰ پیکسل است. البته ممکن است با توجه به تقسیم پذیری بهتر ۹۶۰ در مقایسه با ۱۰۰۰، بخواهید از این عدد استفاده کنید.

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

    ویژگی های خاص شیوه نامه های CSS برای پیاده سازی طرح واکنش گرا
    مهم ترین ویژگی CSS برای پشتیبانی طراحی واکنش گرا، دستور media است. این دستور به ما کمک می کند تا بر اساس عرض صفحه، ویژگی های عنصرهای دلخواه خود را تغییر دهیم. min-width و max-width در مقابل media ابزارهایی هستند که بسیار ما را یاری خواهند داد:

    کد:
    @media ( min-width: 1000px ) {
    	footer {
    		width: 1000px;
    	}
    }
    @media ( min-width: 401px ) {
    	footer {
    		display: block;
    	}
    }
    @media ( max-width: 400px ) {
    	footer {
    		display: none;
    	}
    }
    همان گونه که مشاهده می کنید، شاید لازم شود به ازای هر عنصر، چندین حالت مختلف از نمایش طراحی شود و گاهی لازم شود تا یک عنصر به صورت کامل از دید مخفی شود.

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

    بهتر است اندازه ی تصویر مساوی بزرگترین اندازه ی پیکسل های واقعی نمایشگر کامپیوتر در نظر گرفته شود. برای مثال عدد ۱۰۰۰ یا ۱۳۶۶ می تواند مقدار مناسبی باشد.

    در نمایشگرهای کوچکتر، با تعیین اندازه ی درصدی عرض و تعیین نکردن ارتفاع یا قرار دادن مقدار auto برای آن می توان یک تصویر واکنش گرا در اختیار داشت
    کد:
    img#header {
    	width: 100%;
    	height: auto;
    }
    تغییر اندازه ی تصاویر پس زمینه هم در css به شکل زیر انجام می شود:

    کد:
    div#header {
    	width: 100%;
    	padding-top: 50%;
    	background-image: url( "01.jpg" );
    	background-repeat: no-repeat;
    	background-size: 100% auto;
    }
    نکته ی قابل توجه در قطعه کد بالا، استفاده از padding-top برای مشخص کردن ارتفاع div است. با توجه به اینکه معیار padding عرض عنصر والد است. با کمک آن می توان، ارتفاع یک عنصر را به صورت Responsive تعیین کرد.

    اندازه ی فونت ها
    بهترین واحد برای مشخص کردن، اندازه ی فونت ها واحدهای فیزیکی هستند. برای مثال تعیین اندازه ی فونت پیش فرض صفحه با مقدار “14pt” به جای “14px” و تعیین اندازه ی عنصرهای داخلی بر اساس «درصد» یا «em» راه حلی مطمئن برای داشتن نوشته های واکنش گرا است.

    [تنها کاربران انجمن می توانند لینک و عکس ها را مشاهده کنند تنها در 10 ثانیه ثبت نام کنید . ]
    کاربر مقابل پست AMIB عزیز را مفید دانسته و آن را پسندیده است: New_Sra

  2. Top | #2

    تاریخ عضویت
    Dec 2016
    عنوان کاربر
    کاربرسایت
    ميانگين پست در روز
    0.01
    نوشته ها
    3
    سپــــــــاس
    1
    تشکر شده 0 بار در 0 ارسال
    سیار عالی بود، ممنون بابت به اشتراک گذاری لطفا بازهم از این قبیل مقالات مرتبط با حوضه [تنها کاربران انجمن می توانند لینک و عکس ها را مشاهده کنند تنها در 10 ثانیه ثبت نام کنید . ] و [تنها کاربران انجمن می توانند لینک و عکس ها را مشاهده کنند تنها در 10 ثانیه ثبت نام کنید . ] در انجمن قرار دهید
    [تنها کاربران انجمن می توانند لینک و عکس ها را مشاهده کنند تنها در 10 ثانیه ثبت نام کنید . ] [تنها کاربران انجمن می توانند لینک و عکس ها را مشاهده کنند تنها در 10 ثانیه ثبت نام کنید . ] [تنها کاربران انجمن می توانند لینک و عکس ها را مشاهده کنند تنها در 10 ثانیه ثبت نام کنید . ] [تنها کاربران انجمن می توانند لینک و عکس ها را مشاهده کنند تنها در 10 ثانیه ثبت نام کنید . ]

  3. Top | #3

    تاریخ عضویت
    Dec 2016
    عنوان کاربر
    کاربرسایت
    ميانگين پست در روز
    0.05
    نوشته ها
    13
    سپــــــــاس
    0
    تشکر شده 1 بار در 1 ارسال
    ممنون بابت مطالبتون
    [تنها کاربران انجمن می توانند لینک و عکس ها را مشاهده کنند تنها در 10 ثانیه ثبت نام کنید . ] | [تنها کاربران انجمن می توانند لینک و عکس ها را مشاهده کنند تنها در 10 ثانیه ثبت نام کنید . ] | [تنها کاربران انجمن می توانند لینک و عکس ها را مشاهده کنند تنها در 10 ثانیه ثبت نام کنید . ] | [تنها کاربران انجمن می توانند لینک و عکس ها را مشاهده کنند تنها در 10 ثانیه ثبت نام کنید . ]| [تنها کاربران انجمن می توانند لینک و عکس ها را مشاهده کنند تنها در 10 ثانیه ثبت نام کنید . ] | [تنها کاربران انجمن می توانند لینک و عکس ها را مشاهده کنند تنها در 10 ثانیه ثبت نام کنید . ] | [تنها کاربران انجمن می توانند لینک و عکس ها را مشاهده کنند تنها در 10 ثانیه ثبت نام کنید . ] | [تنها کاربران انجمن می توانند لینک و عکس ها را مشاهده کنند تنها در 10 ثانیه ثبت نام کنید . ]

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
شخصی سازی شده توسط انجمن پشتیبانی پرستاشاپ فارسی
قدرت گرفته از ویبولتین 4.2
پرستاشاپ فارسی
سایت پشتیبانی پرستا شاپ فارسی با عنوان"انجمن پشتیبانی پرستاشاپ فارسی" در ایران خدمات رسانی خود را در سال 1392 آغاز کرد . از لحظه تولد تاکنون انجمن پشتیبانی پرستاشاپ فارسی همواره سعی در بکارگیری شیوه های مدیریتی جدید و خدمات نوین داشته است به امید کمکی شایان به شما هموطنان عزیز و فارسی زبان کل جهان.