soroush.r70
جمعه 19 مهر 1392, 21:11 عصر
روز به روز به تعداد وب سایت هایی که طراحی خود را به کمک تکنیک های ریسپانسیو تغییر داده اند افزوده می شود.
با پیشرفت و توسعه دستگاه های قابل حمل و طبیعتا افزایش تنوع ابعاد نمایشگرها، بهتر است وب سایت را به گونه ای اجرا کنیم که در تمام آن ها به درستی نمایش داده شود.
در گذشته نه چندان دور، نسخه موبایلی وب سایت را به صورت جداگانه طراحی می کردیم. اما امروزه می توانیم به کمک چند تکنیک ساده، وب سایت را به گونه ای اجرا کنیم که ابعاد و چیدمان خود را با توجه به عرض نمایشگر کاربر تغییر دهد یا به اصطلاح انعطاف پذیر باشد و نسخه موبایل وب سایت را مجزا اجرا نکنیم.
متا تگ Viewport
یکی از مهمترین تنظیمات برای داشتن وب سایت ریسپانسیو و نسخه موبایل آن، استفاده از متا تگ Viewport است.
به کمک این تگ HTML که داخل تگ Head قرار می گیرد، می توانیم عرض وب سایت نسبت به عرض مفید نمایشگر کاربر (در زمان باز شدن وب سایت) و همچنین میزان زوم شدن را کنترل کنیم. به زبان ساده، به کمک این تگ می توانیم به مرورگر بگوییم عرض وب سایتمان را در زمان باز شدن برابر با فضای مفید نمایشگر کاربر قرار دهد.
کنترل حداکثر میزان زوم و نیز غیر فعال کردن آن را نیز می توانیم به کمک این تگ تعریف کنیم.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
این تنظیم به کمک سی اس اس نیز قابل پیاده سازی است.
@-viewport {
width: device-width;
}
تنظیمات Media
به کمک تنظیمات media می توانیم دستورات سی اس اس را برای خروجی های مختلف تفکیک کنیم. نوع خروجی، جهت (افقی یا عمودی)، حداقل و حداکثر عرض از جمله مقادیر قابل تعریف در media هستند.
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 960px), projection" href="style.css" />
و یا به صورت کدهای داخلی سی اس اس:
@media screen and (max-width: 960px) {
/** دستورات سی اس اس **/
}
Modernizr
Modernizr (http://modernizr.com/)به کمک جاوااسکریپت، پشتیبانی یا عدم پشتیبانی دستورات سی اس اس در مرورگر یا دستگاه کاربر را کنترل می کند. زمانیکه از دستورات CSS3 یا تگ های HTML5 استفاده می کنیم، ممکن است مرورگر کاربر از آن ها پشتیبانی نکند.
در صورت عدم پشتیبانی مرورگر کاربر از یک دستور، Modernizr به ما کمک می کند دستور یا تنظیمات جایگزین را قرار دهیم.
TouchSwipe
TouchSwipe (http://labs.rampinteractive.co.uk/touchSwipe/)در حقیقت یک پلاگین برای کتابخوانه محبوب جی کوئری است. به کمک TouchSwipe می توانیم جسچرها و ایونت های مربوط به صفحات لمسی را در سایت خود قرار دهیم. Swipe، Pinch، Zoom و Scroll از جمله این جسچرها هستند.
با رشد روزافزون دستگاه های قابل حمل و صفحات لمسی، به نظر می رسد استفاده از این نوع جسچرها یکی از مواردی است که در آینده در وب سایت های زیادی مشاهده خواهیم کرد.
آیکون های iOS
اولین چیزی که بعد از عبور از صفحه قفل آیفون یا آیپد می بینیم، آیکون اپ ها است. علاوه بر اپ ها که دارای آیکون هستند، کاربر می تواند وب سایت مورد علاقه خود را به صفحه اصلی دستگاه اضافه نماید.
با قرار دادن تگ های زیر در قسمت Head صفحه وب سایت، می توانیم این آیکون ها را مشخص نماییم.
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />
یک راه دیگر هم برای تعریف آیکون های اپل وجود دارد که نیازی به قرار دادن تگ های فوق نیست. می توانیم فایل آیکون را با پیشوند زیر برای نام آن در فولدر اصلی (root) وب سایت قرار دهیم.
apple-touch-icon-
Splash Screen
زمانی که کاربر روی آیکون وب سایت در صفحه اصلی آیفون یا آیپد Tap می کند، تصویری به عنوان تصویر اولیه نمایش داده می شود که می تواند شامل نام و اطلاعات مربوط به اپ یا شخص تولید کننده باشد.
برای وب سایت هم می توانیم این تصویر را تعریف کنیم.
<link rel="apple-touch-startup-image" href="splash-screen.png" />
این تصویر قبل از لود شدن وب سایت نمایش داده می شود.
آیکون صفحه استارت ویندوز 8
ویندوز 8 نیز مانند آی او اس این امکان را در اختیار طراحان وب سایت قرار داده تا بتوانند آیکون اختصاصی برای خود تعریف کنند.
زمانی که کاربر ویندوز 8، یک وب سایت را به صفحه استارت ویندوز خود اضافه (Pin) می کند، این تصویر در محل آیکون آن نمایش داده می شود.
بر خلاف iOS که از تگ link برای تعریف تصویر استفاده کرده، مایکروسافت از متا تگ کمک گرفته است.
<meta name="msapplication-TileColor" content="#000"/>
<meta name="msapplication-TileImage" content="icon.png"/>
اولین تگ برای مشخص کردن رنگ آیکون و دومی برای تعریف آدرس تصویر آیکون تعریف شده است.
اینها ۷ نکته کوچک و مفید بودند برای بهینه سازی وب سایت ها برای موبایل و دستگاه های قابل حمل.
اگه هم می خواین طراحی برای موبایل و سایر پلتفرم ها رو شروع کنید این لینک (http://barnamenevis.org/showthread.php?378702-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-%D8%AA%DA%A9%D9%86%DB%8C%DA%A9-responsive&highlight=%D8%B1%DB%8C%D8%B3%D9%BE%D8%A) کمکتون می کنه
منبع : nardebaan.ir
با پیشرفت و توسعه دستگاه های قابل حمل و طبیعتا افزایش تنوع ابعاد نمایشگرها، بهتر است وب سایت را به گونه ای اجرا کنیم که در تمام آن ها به درستی نمایش داده شود.
در گذشته نه چندان دور، نسخه موبایلی وب سایت را به صورت جداگانه طراحی می کردیم. اما امروزه می توانیم به کمک چند تکنیک ساده، وب سایت را به گونه ای اجرا کنیم که ابعاد و چیدمان خود را با توجه به عرض نمایشگر کاربر تغییر دهد یا به اصطلاح انعطاف پذیر باشد و نسخه موبایل وب سایت را مجزا اجرا نکنیم.
متا تگ Viewport
یکی از مهمترین تنظیمات برای داشتن وب سایت ریسپانسیو و نسخه موبایل آن، استفاده از متا تگ Viewport است.
به کمک این تگ HTML که داخل تگ Head قرار می گیرد، می توانیم عرض وب سایت نسبت به عرض مفید نمایشگر کاربر (در زمان باز شدن وب سایت) و همچنین میزان زوم شدن را کنترل کنیم. به زبان ساده، به کمک این تگ می توانیم به مرورگر بگوییم عرض وب سایتمان را در زمان باز شدن برابر با فضای مفید نمایشگر کاربر قرار دهد.
کنترل حداکثر میزان زوم و نیز غیر فعال کردن آن را نیز می توانیم به کمک این تگ تعریف کنیم.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
این تنظیم به کمک سی اس اس نیز قابل پیاده سازی است.
@-viewport {
width: device-width;
}
تنظیمات Media
به کمک تنظیمات media می توانیم دستورات سی اس اس را برای خروجی های مختلف تفکیک کنیم. نوع خروجی، جهت (افقی یا عمودی)، حداقل و حداکثر عرض از جمله مقادیر قابل تعریف در media هستند.
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 960px), projection" href="style.css" />
و یا به صورت کدهای داخلی سی اس اس:
@media screen and (max-width: 960px) {
/** دستورات سی اس اس **/
}
Modernizr
Modernizr (http://modernizr.com/)به کمک جاوااسکریپت، پشتیبانی یا عدم پشتیبانی دستورات سی اس اس در مرورگر یا دستگاه کاربر را کنترل می کند. زمانیکه از دستورات CSS3 یا تگ های HTML5 استفاده می کنیم، ممکن است مرورگر کاربر از آن ها پشتیبانی نکند.
در صورت عدم پشتیبانی مرورگر کاربر از یک دستور، Modernizr به ما کمک می کند دستور یا تنظیمات جایگزین را قرار دهیم.
TouchSwipe
TouchSwipe (http://labs.rampinteractive.co.uk/touchSwipe/)در حقیقت یک پلاگین برای کتابخوانه محبوب جی کوئری است. به کمک TouchSwipe می توانیم جسچرها و ایونت های مربوط به صفحات لمسی را در سایت خود قرار دهیم. Swipe، Pinch، Zoom و Scroll از جمله این جسچرها هستند.
با رشد روزافزون دستگاه های قابل حمل و صفحات لمسی، به نظر می رسد استفاده از این نوع جسچرها یکی از مواردی است که در آینده در وب سایت های زیادی مشاهده خواهیم کرد.
آیکون های iOS
اولین چیزی که بعد از عبور از صفحه قفل آیفون یا آیپد می بینیم، آیکون اپ ها است. علاوه بر اپ ها که دارای آیکون هستند، کاربر می تواند وب سایت مورد علاقه خود را به صفحه اصلی دستگاه اضافه نماید.
با قرار دادن تگ های زیر در قسمت Head صفحه وب سایت، می توانیم این آیکون ها را مشخص نماییم.
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />
یک راه دیگر هم برای تعریف آیکون های اپل وجود دارد که نیازی به قرار دادن تگ های فوق نیست. می توانیم فایل آیکون را با پیشوند زیر برای نام آن در فولدر اصلی (root) وب سایت قرار دهیم.
apple-touch-icon-
Splash Screen
زمانی که کاربر روی آیکون وب سایت در صفحه اصلی آیفون یا آیپد Tap می کند، تصویری به عنوان تصویر اولیه نمایش داده می شود که می تواند شامل نام و اطلاعات مربوط به اپ یا شخص تولید کننده باشد.
برای وب سایت هم می توانیم این تصویر را تعریف کنیم.
<link rel="apple-touch-startup-image" href="splash-screen.png" />
این تصویر قبل از لود شدن وب سایت نمایش داده می شود.
آیکون صفحه استارت ویندوز 8
ویندوز 8 نیز مانند آی او اس این امکان را در اختیار طراحان وب سایت قرار داده تا بتوانند آیکون اختصاصی برای خود تعریف کنند.
زمانی که کاربر ویندوز 8، یک وب سایت را به صفحه استارت ویندوز خود اضافه (Pin) می کند، این تصویر در محل آیکون آن نمایش داده می شود.
بر خلاف iOS که از تگ link برای تعریف تصویر استفاده کرده، مایکروسافت از متا تگ کمک گرفته است.
<meta name="msapplication-TileColor" content="#000"/>
<meta name="msapplication-TileImage" content="icon.png"/>
اولین تگ برای مشخص کردن رنگ آیکون و دومی برای تعریف آدرس تصویر آیکون تعریف شده است.
اینها ۷ نکته کوچک و مفید بودند برای بهینه سازی وب سایت ها برای موبایل و دستگاه های قابل حمل.
اگه هم می خواین طراحی برای موبایل و سایر پلتفرم ها رو شروع کنید این لینک (http://barnamenevis.org/showthread.php?378702-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-%D8%AA%DA%A9%D9%86%DB%8C%DA%A9-responsive&highlight=%D8%B1%DB%8C%D8%B3%D9%BE%D8%A) کمکتون می کنه
منبع : nardebaan.ir