بایگانی

Archive for the ‘عمومی’ Category

آشنایی با تکنیک css sprite ، روش تولید و کاربردهای آن

2011.01.12 ۱ دیدگاه

قبلا سرعت اینترنت و تعداد کاربران آن بسیار کمتر از حال بود. همین مساله باعث شده بود که گاهی حتی یک تصویر (مثل لوگوی بالای یک سایت) را تبدیل به چند تصویر کنند تا بتوانند آن را سریعتر برای کاربران سرو کنند. (در واقع با این کار لازم نبود برای تمام قطعات از کیفیت بالا استفاده کنند و همین امر موجب کاهش حجم مجموع تصاویر تشکیل دهنده لوگو می‌شد)

اما با پیشرفت تکنولوژی و به تبع آن بسترهای سخت‌افزاری وب، سرعت ارتباط کاربران به اینترنت و تعداد آنها به شدت افزایش یافت و همین امر باعث شد که طراحان وب تغییراتی در نحوه طراحی خود اعمال کنند. از جمله این تغییرات می‌توان «کاهش تعداد درخواست‌ها برای مشاهده یک صفحه» را برشمرد که برای حفظ کیفیت سایت‌های پربازدید ضرورت دارد.

قبلا برای مشاهده یک صفحه درخواست‌هایی مانند درخواست‌های زیر معمول و متداول بود:

  1. درخواست اصل سورس صفحه
  2. درخواست css مربوط به کل سایت و css آن بخش از سایت و css پرینت و سایر css ها
  3. درخواست هسته اصلی کدهای جاوااسکریپت (core) و فایل js مربوط به پلاگینها و کدهای اضافی
  4. درخواست تصاویر موجود در صفحه
  5. درخواست محتویات مبتنی بر Ajax
  6. درخواست سایر اضافات خاص مثل صدا یا تصویر یا فلش و …

اما برای سایت‌های پربازدید (خصوصا وقتی با Ajax هم طراحی شده باشد) تعداد درخواست‌هایی که به سرور ارسال می‌شود آنقدر بالاست که یا سرور را دچار اختلال می‌کند یا برخی کاربران را از مشاهده کامل و سریع سایت محروم می‌کند.

برای حل این مشکل (تعداد درخواست‌ها)، css و js ها و تصاویر را با هم تلفیق می‌کنند و همچنین cache سمت کاربر را با استفاده از header ارسالی از سمت سرور، فعال می‌کنند.
من در این مطلب قصد دارم به تلفیق تصاویر اشاره کنم.

برای درک ملموس‌تر، مطلب را با یک مثال توضیح می‌دهم. زمانی که شما در گوگل عبارتی را جستجو می‌کنید، در زیر صفحه نتایج گوگل، تصویر زیر را می‌بینید:

اگر بر روی یکی از تصاویر paging نتایج کلیک راست کنید و گزینه view background image را انتخاب کنید، با تصویر زیر مواجه می‌شوید:

همانطور که در این تصویر می‌بینید، گوگل تمامی تصاویر مورد نیاز در بخش‌های مختلف (اعم از بخش جستجو، گوگل ریدر، بخش خرید گوگل و گوگل مپ و گوگل گروپ و …) را در یک تصویر گنجانده و سپس در جای مورد نیاز از هرکدام از آنها استفاده می‌کند.

به عبارت دیگر شما با ورود به گوگل این تصویر 30 کیلوبایتی برای شما یک بار لود می‌شود و روی سیستم شما cache می‌شود و دیگر نیازی نیست که برای دیدن هر صفحه از گوگل، ده‌ها درخواست به سمت سرور گوگل ارسال شود تا یک عکس کوچک بارگزاری شود.

به تکنیک فوق css sprite می‌گویند. یک مثال خوب برای استفاده از این تکنیک را در مطلب نوشتن تاریخ به صورت عمودی ارائه کرده بودم.

برای استفاده از این تکنیک، سایت‌هایی وجود دارد که به صورت آنلاین شما را کمک می‌کنند. در اینجا به چند نمونه آن اشاره می‌شود.

شما می‌توانید به سایت اسپرایتر یا csssprites بروید و تک تک آن تصاویر کوچک را در آن آپلود کنید و تصویر بزرگ (شامل همه آن تصاویر کوچک) را به همراه css مبوطه تحویل بگیرید. (اگر حوصله آپلود تک تک تصاویر کوچک را ندارید، اسپرایت جنریتور انتخاب مناسبی برای شماست چرا که اجازه می‌دهد شما فایل zip شامل همه تصاویر کوچک را یکباره آپلود کنید)

اگر هم تک تصویر بزرگ (شامل تصاویر پرکاربرد سایتتان) را آماده دارید، می‌توانید به اسپرایت باکس رفته و با استفاده از آن، محدوده هر تصویر را معین و css مربوط را تحویل بگیرید.

Advertisements
دسته‌ها:بهینه سازی, عمومی برچسب‌ها: , , ,

وسط قرار دادن یک لایه

گاهی اوقات لازم است که یک DIV با عرض مشخص را وسط قرار دهید. (مثل DIV اصلی صفحه در طراحی‌هایی با عرض ثابت که محتویات صفحه در آن قرار دارد)

برای وسط قرار دادن یک لایه راه‌های متعددی وجود دارد که یکی از بهترین راه‌های این کار را در زیر می‌بینید. این روش در همه براوزرهای متداول (حتی IE6) هم قابل انجام است.

<div style="text-align:cnter">
	<div style="margin-left:auto;margin-right:auto">
		مطالب شما
	</div>
</div>

دونکته:

  1. در صورتی که مارجین (حاشیه) لایه مورد نظر از بالا و پایین هم مشخص است، شما می‌توانید آن را به صورت کوتاه شده بنویسید. مثلا:
    margin:0 auto
  2. با توجه به اینکه لایه بیرونی در کد فوق، باعث وسط چین شدن زیرمجموعه‌اش می‌شود، در لایه دومی بهتر است علاوه بر حاشیه، text-align نیز مقداری برابر left (برای صفحات انگلیسی) و right (برای صفحات به فارسی) داده شود.
دسته‌ها:عمومی برچسب‌ها: ,

ایجاد و حل جداول سودوکو

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

این برنامه را می‌توانید در این آدرس مشاهده کنید.

دسته‌ها:عمومی برچسب‌ها: ,

نوشتن تاریخ به صورت عمودی

2010.12.22 2 دیدگاه

یکی از محدودیت‌های زبان HTML نوشتن متون به صورت غیرافقی است. البته این قابلیت در HTML5 و مرورگرهای نوین تا حدودی حل شده اما برای اکثر کاربران قابل استفاده نیست.

گاهی لازمه طراحی شما، نوشتن تاریخ به صورت عمودی است.

برای این کار دو راه متداول هست:

  1. تبدیل تاریخ به عکس. مشابه این که در اینجا استفاده شده.
  2. استفاده از css sprite

که من این کار رو با استفاده از یک تصویر 1 کیلوبایتی انجام دادم:

مشاهده نمونه اجرا شده

دسته‌ها:عمومی

تناسب رنگ متن و زمینه در طراحی وب

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

فرض کنید در یک صفحه، تصویری تیره به عنوان زمینه تهیه شده است و روی این تصویر تیره با رنگی روشن مثل سفید نوشته شده است. خب تا اینجا مشکلی نیست. اما حالتی را در نظر بگیرید که این تصویر برای کاربر بارگذاری نشود. (مثلا کاربر تصاویر را غیرفعال کرده باشد یا اینکه به دلیل سرعت پایینش، تصویر برایش لود نشود) حالا چه اتفاقی می‌افتد؟ تصویر تیره لود نشده و متن سفید رنگ بر روی ضمیمه سفید می‌افتد و کاربر قادر به خواندن متن نخواهد بود.

حل این مشکل چندان سخت نیست. کافی‌ست هنگام تعریف تصویر زمینه در css، رنگ پیش‌فرض زمینه را نیز معرفی کنید:

#main { background: #111 url(/image/bg.png) fixed ; }
دسته‌ها:عمومی برچسب‌ها: ,

به نامش و به یاری‌اش

حسب امر دوستان سایت 9px.ir راه‌اندازی شد.

این وبلاگ هم به درج برخی اخبار و مطالب مرتبط با طراحی وب می‌پردازد 🙂

دسته‌ها:عمومی برچسب‌ها: