پی سی دیزاین | درباره تکنولوژی و اینترنت بیشتر بدانیم

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

حالا چرا زیرخط هایمان را برداریم یا به عبارتی دیگر از آنها کمتر استفاده کنیم؟! برای اینکار دلیل واضحی دارم! که البته در ادامه راهکارهایی هم برای کسانی که نمی‌خواهند این کار را انجام دهند ارائه خواهم داد.

همانطور که می‌دانید زبان‌های مختلف نوشتار های مختلفی هم دارند و این مهم‌ترین دلیل ما برای استفاده نکردن از زیرخط است. چرا که زیرخط های استاندارد بر اساس نوشتار زبان هایی همچون انگلیسی تهیه شده اند و زبان هایی با نوشتار انگلیسی معمولا به طور کامل روی خط نوشته می‌شوند و قسمت های اضافی ندارند که در زیر خط قرار بگیرد اما زبان فارسی به این صورت نیست و در نوشتار حرف‌ها قسمت‌هایی وجود دارد که زیر خط قرار می‌گیرند و این مشکل ایجاد می‌کند٬ مثل حرف‌هایی همچون «ع ح س ر ب» و دیگر حرف‌ها که کم هم نیستند.

اما بگذارید با یک مثال ساده منظورم را بهتر برسانم٬ برای مثال من دو متن را با حروف فارسی و انگلیسی می‌نویسم و برای آنها زیرخط استاندارد می‌گذارم تا شما دلیل گفته‌ی من را بهتر متوجه شوید:

یک جمله فارسی میبینید | This is an English sentence

همانطور که مشاهده می‌کنید جمله‌ی فارسی را که زیرخط دار کردیم قسمت هایی از حروف با زیرخط برخورد کرده (که البته به فونتی هم که استفاده می‌کنیم بستگی دارد) و قابل مشاهده نیستند و حتی به گونه‌ی دیگر خوانده می‌شوند مانند کلمه «میبینید» که شبیه کلمه‌ی «مسند» نوشته شده است! اما در جمله انگلیسی این اشکال وجود ندارد!

راه حل: آن دوستانی هم که می‌خواهند حتما از زیرخط در متن‌هایشان استفاده کنند می‌توانند کد css زیر را در فایل style یا css پوسته شان قرار دهند تا تگ زیرخط (U) را اصلاح کنند! به همین سادگی :دی

u {
border-bottom: 1px solid;
padding-bottom: 1px;
text-decoration: none;
}

که نتیجه کار هم به صورت زیر خواهد بود:

یک جمله فارسی میبینید

کلام آخر: امیدوارم دوستان عزیزم این مطلب را زیادی جدی بگیرند! خصوصا دوستان طراح وب که در کارهایشان از زیرخط استفاده می‌کنند. از نظر من رعایت نکردن این نکته به زیبایی و شیوایی کار لطمه‌ی بزرگی می‌زند و می‌تواند با تمام کوچکی‌اش مشکل بزرگی در کار شما باشد. همچنین که من این مشکل را در طراحی خیلی از وبلاگ‌ها دیده‌ام و واقعا چشم‌هایم را اذیت کرده است!!

تصاویر خود را بهینه سازی کنید یعنی چی اصلا؟ خب البته این جمله خیلی معنی ها میتونه بده اما ما با یکی از معانی اون کار داریم که می‌تونه خیلی به درد مخصوصا وبلاگ نویس‌ها و طراحان وب بخوره که همواره دنبال پائین آوردن زمان بارگذاری وبلاگ و یا سایتشون هستند.

یکی از دلایل سنگین شدن حجم یک سایت یا وبلاگ استفاده از تصاویر متعددی هست که در اون سایت استفاده میشه و مسلما حجم این تصاویر هم روی سرعت اجرای صفحه تاثیر گذار هست. اما طراحان وب و وبلاگ نویس‌ها برای حل این مساله از راه‌های مختلفی مثل پائین آوردن کیفیت تصویر استفاده می‌کنند که به نظر من پائین آوردن کیفیت تصویر کار زیاد جالبی نیست و اون جلوه و نمایش مناسب تصویر رو ازش میگیره.

اما نظرتون راجع به کم کردن حجم تصویر بدون افت کیفیت چیه؟! سایت ها و برنامه‌های زیادی هستند که می‌تونند این کار رو انجام بدهند اما یکی از بهترین این سایت‌ها Smush.it هست٬ سرویسی از شرکت یاهو که ‌میتونه به طور همزمان حجم ۵ تصویر مختلف رو بدون کم شدن حتی مقداری از کیفیت تصویر٬ به مقدار قابل توجهی کاهش بده که البته بستگی به تصویرش هم داره!

بعد از آشنایی با این سرویس برای آزمایش٬ تعدادی از تصاویر وبلاگم رو به این سایت دادم تا حجم آنها را برایم بهینه کند! از هر تصویر مقدار اندکی از حجمش را کم میکرد که فکر میکنم به خاطر این بود که قبلا سعی کرده بودم از تصاویری با کیفیت بالا و حجم پائین استفاده کنم٬ اما باز هم مقداری از حجم آنها را کم می‌کرد که وقتی تصاویر بیشتری را smush.it کردم متوجه حجم قابل توجهی شدم که از کل تصاویرم کم شده یعنی وقتی از هر تصویر هم مقدار ناچیزی کم کرد همان مقدار های ناچیز تبدیل به حجم بزرگی شده بودند!

به همین خاطر هم به شما دوست عزیز پیشنهاد می‌کنم همین حالا تصاویرتان را Smush.it کنید.

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

آیا می دانستید که با کمک css و html می‌توانید یک style خاص فقط برای صفحات چاپی تعریف کنید؟

با کمک یکی از خاصیت های برچسب link در هنگام تعریف style شما می توانید تعریف کنید که style مورد نظرتان برای صفحات چاپی استفاده می شود. به عنوان مثال اگر شما بخواهید این قابلیت را به وبلاگ خود اضافه کنید باید زیرِ خط مربوط به style پوسته‌تان این خط را اضافه کنید:

[code lang=”html”]<link rel="stylesheet" type="text/css" href="/print.css" media="print" />[/code]

همانطور که در کد بالا مشاهده می کنید خاصیت media=”print” باعث می شود تا شیوه نامه (استایل) print.css به صفحات قابل چاپ اختصاص داده شود و برای صفحاتی که قرار است چاپ شود از این شیوه نامه استفاده خواهد شد.

اما خاصیت media ویژگی دیگری هم با نام screen دارد که این ویژگی برای شیوه نامه‌های عادی که روی صفحات وب نمایش داده می شود استفاده می شود.

نکته مهم: اما نکته‌ی مهمی در اینجا وجود دارد که باید حتما رعایت شود. زمانی که ما برای تعریف شیوه نامه هایمان از خاصیت media استفاده نمی کنیم، شیوه نامه‌ی تعریف شده، هم برای صفحات چاپی استفاده می شود و هم برای صفحات عادی. پس باید حتما حتما خاصیت media را برای شیوه نامه هایمان تعریف کنیم. به عنوان مثال:

[code lang=”html”]<link rel="stylesheet" type="text/css" href="/style.css" media="screen" />[/code]

ادامه‌ی مطلب »