افزایش سرعت بارگزاری صفحات یکی از مسائل مهم در طراحی صفحات وب میباشد. در صورتی که زمان بارگزاری یک صفحه وب طولانی باشد، معمولا" کاربران از مشاهده آن صفحه صرف نظر میکنند و دیگر به آن باز نمیگردند این به معنی از دست دادن کاربران سایت میباشد که برای مدیران یک سایت اصلا" خوشایند نیست. در ادامه ده روش موثر برای افزایش سرعت بارگزاری صفحات وب بیان میشود.
1. استفاده از CSS برای ایجاد قالب و طرح صفحه به جای Table
CSS یا Cascading Style Sheetsها به دلایل زیر از Tableها سریعتر بارگذاری میشوند: · مرورگرها قبل از نمایش محتویات یک جدول دو بار آن را مرور میکنند. یک بار برای مشخص شدن ساختار آن و یک بار هم برای تعیین محتویات آن. · جداول (Tables) در یک مرحله بر روی صفحه به نمایش در میآیند. هیچ قسمتی از یک جدول بر روی صفحه ظاهر نمیشوند تا اینکه تمام جدول همراه با محتویات آن به طور کامل بارگذاری و پردازش شود. · عمل موقعیت دهی و یا ایجاد یک فضای خاص در جداول معمولا" با استفاده از تصاویر کوچک خاصی (Spacer Images) صورت میپذیرد. · بطور کلی CSS ها کد کمتری نسبت به جداول نیاز دارند. · تمام کدهای مورد نیاز برای ایجاد طرح و نمای صفحه قابلیت جایگزین شدن با یک فایل CSS خارجی را دارند. که این فایل پس از یک بار فراخوانی در کامپیوتر کاربر ذخیره (cache) میشود. اما قالبهای ایجاد شده با استفاده از جداول در هر صفحه HTML تکرار میشوند و با درخواست هر صفحه جدید دوباره باید بارگذاری (Download) شوند. · با استفاده از CSS ها امکان تعیین ترتیب بارگذاری صفحه وجود دارد. یعنی میتوان محتویات اصلی صفحه را قبل از بارگذاری تصاویر با حجم بالا به نمایش درآورد. این کار قطعا" کاربران سایت شما را خوشحال خواهد کرد. 2. از تصاویر برای نمایش متن استفاده نکنید
در اینجا نیز CSS به ما کمک خواهد کرد. در مواردی که کار را می توان با CSS بطور کامل انجام داد از تصاویر استفاده نکنید. به کد زیر دقت کنید: a:link, a:visited, a:active { width: 7em; font: bold 0.8em Georgia; text-decoration: none; display: block; margin-left: 0; margin-bottom: 0.5em; margin-top: 0.5em; color: white; background: #39c; border-left: 1px solid #6cf; border-bottom: 1px solid #068; border-right: 1px solid #068; padding: 0.25em 0.5em 0.4em 0.75em; border-top: 1px solid #6cf; }
a:hover { background: #28b; padding: 0.35em 0.35em 0.25em 0.9em; border-top: #069; border-right: #6cf; border-bottom: #6cf; border-left: #069; }
3. فراخوانی تصاویر تزیینی بوسیله CSS
با CSS میتوان تصاویر را بصورت قسمتی از یک زمینه (background) نمایش داد. بطور مثال یک تصویر 200x200 را میتوان بصورت زیر نمایش داد:
<div class="pretty-image"></div> کد HTML .pretty-image { background: url(filename.gif); width: 200px; height: 200px } کد CSS
در ابتدا شاید این کار بی معنی به نظر برسد اما این کار سرعت بارگذاری و نمایش صفحات را افزایش میدهد. بطور کلی مرورگرها تصاویر زمینه را بعد از بقیه اجزا بارگذاری میکنند. با استفاده از این تکنیک متن درون صفحه فورا" به نمایش درآمده و کاربر میتواند آن را مشاهده و در بین آن گردش کند و در همین هنگام تصاویر با حجم زیاد بارگذاری میشوند.
در این روش نمیتوان از خصوصیت ALT استفاده نمود اگر واقعا" میخواهید که از این خصوصیت استفاده کنید، کد HTML بالا را بصورت زیر تغییر دهید. <image src="spacer.gif" class="pretty-image" alt="description" />
در اینجا spacer.gif یک تصویر 1x1 پیکسل شفاف (transparent) است که 50 بایت حجم دارد. در این حالت ابتدا محتوای اصلی بارگذاری میشود و بعد از آن تصویر بزرگ و حجیم همراه با خصوصیت ALT بطور کامل بارگذاری میشود. دقت داشته باشید که این روش برای نمایش تصاویر تزئینی مناسب میباشد نه برای تصاویر حاوی اطلاعات. همچنین کاربرانی که CSS آنها غیر فعال است قادر به مشاهده تصویر (یا متن مربوط به ALT) نمیباشند.
4. استفاده از انتخاب کنندههای (selectors) مناسب
به کد نامناسب زیر توجه کنید:
<p class="text">This is a sentence</p> <p class="text">This is another sentence</p> <p class="text">This is yet another sentence</p> <p class="text">This is one more sentence</p>
.text { color: #03c; font-size: 2em }
به جای اختصاص دادن مقدار به هر پاراگراف، میتوان همه را در یک تگ <div> قرار داده و مقدار را به آن اختصاص دهیم:
<div class="text"> <p>This is a sentence</p>
<p>This is another sentence</p> <p>This is yet another sentence</p> <p>This is one more sentence</p> </div>
.text p { color: #03c; font-size: 2em }
در ابتدا شاید این موضوع زیاد با اهمیت به نظر نرسد اما اگر شما بتوانید از آن بطور صحیح در تمام صفحه استفاده کنید به راحتی 20% از حجم فایل شما کم خواهد شد. همچنین شاید توجه کرده باشید که مقادیر مربوط به رنگها کوتاهتر از حالت عادی است. 03c# کوتاه شده مقدار 0033cc# است شما میتوانید از این روش خلاصه کردن در هر جایی که مقادیر با این فرم قرار دارند استفاده کنید.
5. استفاده از خلاصه نویسی خصوصیات در CSS
در زیر روش خلاصه نویسی بعضی المانهای CSS را مشاهده میکنید:
font: 1em/1.5em bold italic serif font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-family: serif Font border: 1px black solid border-width: 1px;
border-color: black;
border-style: solid Border background: #fff url(image.gif) no-repeat top left background-color: #fff; background-image: url(image.gif); background-repeat: no-repeat; background-position: top left; Background margin: 2px 1px 3px 4px (top, right, bottom, left) margin-top: 2px; margin-right: 1px; margin-bottom: 3px; margin-right: 4px Margin margin: 5em 1em 3em (top, left and right, bottom) تاریخ ثبت : پنجشنبه 31 شهریور 1384 ساعت : 12:09 ب.ظ
صفحات دو ستونی در CSS | CSS , | علی فیروزجنگ
صفحات دو ستونی در CSS | در هنگام طراحی صفحات با استفاده از CSS بعضی مرتكب این اشتباه میشود كه بخش كناری صفحه را در اول صفحه قرار میدهند و بخش اصلی را در زیر آن; به همین علت بازدیدكنندگان تا پایان كار لود شدن بخش كناری باید صبر كنند. در قسمت كناری صفحه اغلب كدهای javascript برای استفاده از سرویسهای سایتهای مختلف (مثل سایتهای اندازه گیری بازدیدكنندگان یا سایت blogrolling برای لینكهای سایت) وجود دارد به همین خاطر كار لود شدن آن قسمت مدت به نسبت زیادی را به خود اختصاص میدهد. به همین دلیل در صورت قرار گیری این بخش در قسمت بالاتر صفحه كار لود شدن نوشته های اصلی صفحه به تعویق خواهد افتاد. این كار بر خلاف فلسفه طراحی با استفاده از CSS است. ما با استفاده از CSS سعی میكنیم كاری كنیم كه مطالب مهمتر زودتر از بقیه موارد ظاهر شوند. برای قرار دادن بخش اصلی در ابتدای صفحه تگ DIV مربوط به بخش اصلی را در ابتدا و تگ DIV مربوط به بخش كناری را بعد از آن قرار دهید. سپس خصوصیت float مربوط به style بخش اصلی را تایین كنید. مثال: <html>
<head>
<style>
.Page_body { background-color: #FF0000;float:left }
.Page_side { background-color: #0000FF; }
</style>
</head>
<body>
<div class="Page_body">Page contents here</div>
<div class="Page_side">Page Side Contents</div>
</body>
</html>
|
تاریخ ثبت : پنجشنبه 31 شهریور 1384 ساعت : 12:09 ب.ظ
کنفرانس سالیانه توسعه دهندگان حرفه ای مایکروسافت | تکنولوژی , | علی فیروزجنگ
کنفرانس سالیانه توسعه دهندگان حرفه ای مایکروسافت |
| کنفرانس سالیانه توسعه دهندگان حرفه ای مایکروسافت (Microsoft's Professional Developer Conference) که به اختصار آنرا با نام PDC 2005 می شناختیم، به روزهای پایانی خود نزدیک می شود. سایت WinBeta طی این مدت تلاش خود را نمود تا آخرین دستاوردهای ارائه شده در این همایش را تا آنجا که امکان داشت برای خوانندگان خود بازگو نماید. در آخرین پست PDC 2005 نگاهی اجمالی خواهیم داشت به مهمترین رویدادهای صورت گرفته طی این مدت.
به نقل از Neowin ابتدا، ویندوز ویستا. شاید بتوان گفت مهمترین هدف PDC 2005 معرفی این سیستم عامل جدید از طرف مایکروسافت بود. ویندوز ویستا را می توان یک تغییر بنیادی در سیستم عاملهای مبتنی بر NT نامید که تاکنون اتفاق افتاده است. ویندوز NT نخستین بار در سال 1994 بوجود آمد. پس از آن در سال 1996 نگارش جدید با نام Windows NT 4.0 منتشر شد که شامل برخی تنظیمات اضافه بود. در سال 2000 میلادی، Windows 2000 به عنوان کلیدی ترین تغییر بر پایه NT 4.0 محسوب می شد اما آن نیز تنها یک بروز رسانی بود و نه یک نوآوری. در سال 2001، Windows XP معرفی شد، سیستم عاملی با ظاهری آراسته اما برخوردار از همان تکنولوژی قدیمی بکار رفته در Windows 2000.
اما ویندوز ویستا، بدرستی یک نگارش جدید است. مایکروسافت برای رها شدن از تکنولوژی های قدیمی نمایش گرافیکی یعنی رابط برنامه کاربردی (API) بکار رفته در Win16/Win32 ،تکنولوژی جدید خود با نام WinFX را معرفی کرده است.
در حقیقت WinFX شامل سه API پایه هر یک بصورت زیر مجموعه مستقل می باشد: Avalon (پیکره نمایش تصاویر در ویندوز) که در سطحی بالاتر از Direct3D قرار می گیرد تا فراید شتاب دادن به تصاویر سه بعدی را انجام دهد. Indigo (پیکره ارتباط گرافیکی در ویندوز) جهت فراهم آوردن محیطی آسان و امن برای برقرای ارتباط میان API های مختلف. و سرانجام Net. مجموعه ای از API های سازمان یافته شده جهت آسان نمودن ساخت محیط بصری نرم افزارها.
مایکروسافت همچنین بسته نرم افزاری Office 12 را معرفی نمود که می توان آنرا با ارزش ترین نسخه از زمان ارائه Office 95 تاکنون دانست. در کنار هزاران تغییر کوچک و بزرگ صورت گرفته در Office 12 مهمترین نکته آن است که ساختار قدیمی Toolbars و Menu bar دیگر برداشته شده اند. باید از این پس خود را برای یادگیری کار با "Ribbons" آماده سازیم. بهترین تعریف برای "Ribbons"ها آن است که نوار ابزارهای بسیار حساس اما بزرگتر می باشند.
در حقیقت، مایکروسافت به منظور تشویق برنامه نویسان به استفاده از این تکنولوژی جدید آنرا در سه نرم افزار دیگر طراحی خود نیز بکار برده است. نرم افزار Acrylic جهت ترسیم برنامه ها و با هدف ساخت محیط کاربری یک نرم افزار، برنامه Sparkle جهت طراحی ابزارها با استفاده از XAML و در نهایت Quartz نوعی DreamWeaver برای طراحی صفحات وب بصورت حرفه ای، نرم افزارهای یاد شده می باشند.
مایکروسافت در رابطه با توسعه Visual Studio 2005 نشان داد که برنامه های خوبی را در نظر گرفته است و تنها باید در انتظار تاریخ ارائه آن بود.
مایکروسافت با بکارگیری مناسب Gadget ها توانسته است تغییرات قابل توجهی در Sidebar خود بوجود آورد. Gadget ها علاوه بر آنکه بوسیله نرم افزارهای مایکروسافت بصورت مستقیم ساخته می شوند توسط دیگر برنامه های جانبی نیز بوجود می آیند.
در PDC 2005 مایکروسافت تاکید فراوانی بر ایجاد تغییر در سایت کانال خبری خود (Channel 9) داشت تا بدین ترتیب بر محبوبیت آن بیافزاید. ظاهر امر نشان می دهد راهی که Channel 9 در آن گام نهاده توانسته است ارتباط مناسبی را با بازدیدکنندگانش ایجاد کند تا بدین ترتیب با فناوری های مایکروسافت بیشتر آشنا شوند.
هدف نهایی مایکروسافت آن است تا با ارائه ویستا، سیستم عاملی متفاوت در اختیار همگان قرار دهد، ویندوزی برای آینده. کارکرد بالا، امنیت نفوذ ناپذیر و برخورداری از تمامی ابزارهای لازم، این سه عامل آن چیزی است که مایکروسافت تمرکز خود را بر روی آنها معطوف داشته است.
باید دید آیا سرانجام مایکروسافت می تواند اهداف خود را محقق سازد. |
تاریخ ثبت : پنجشنبه 31 شهریور 1384 ساعت : 04:09 ق.ظ
کیس جدید گیگا | سخت افزار , | علی فیروزجنگ
کیس جدید گیگا |
| گیگابایت سیستم خنك كننده مایع را در سری كیسهای 3D AURORA به كار برده است كه به زودی وارد بازار خواهد شد.
در این سیستم دو لوله در پشت فنهای كیس تعبیه شده كه نحوه طراحی آنها به كاربر این امكان را میدهد كه از پمپ و رادیاتور برای خنك كردن سیستم استفاده كند.
فنهای كیسهای 3D AURORA كاملاً بی صدا بوده و در عملیاتهای بسیار سنگین سیستم را خنك نگه میدارد.
از نكات قابل توجه كیسهای 3D AURORA بدنه كاملاً آلومینیومی آن است كه بسیار سبك؛ اما مقاوم بوده و از یك ورقه نیكل برای تقویت ساختار آن استفاده شده است.
طراحی این سری از كیسهای گیگابایت به صورتی است كه اسمبل كردن قطعات در آن بدون استفاده از هر گونه ابزاری امكان پذیر بوده و برای ایمن كردن سخت افزارهای كاربران یك قفل دوتایی امنیتی در روبرو و كنار پانل تعبیه شده است.
این محصول با داشتن امكان جای گذاری 5 هارد درایو ، 7 كارت آداپتور جانبی و 7 درایو خارجی و دقت بالا در طراحی آن، كاربران مختلف را به خود جلب خواهد كرد. |
تاریخ ثبت : پنجشنبه 31 شهریور 1384 ساعت : 03:09 ق.ظ
| 
تبلیغات 
