فونت‌های نامرئی در طراحی وب

ارسال شده در ۸ آبان ۱۳۹۲ توسط امیرمسعود ایرانی

Blank Font - فونت نامرئی

یکی از ایده‌های جدید در طراحی وب، استفاده از فونت‌های نامرئی است. یک فونت نامرئی فونتی است که تمام نویسه‌های آن خالی هستند و متن‌های نوشته شده با آن هیچ فضایی اشغال نمی‌کنند.
یکی از مشهورترین این فونت‌ها Adobe Blank نام دارد که از این نشانی می‌توانید آن را دریافت کنید.
این فونت‌ها می‌توانند کاربردهای گوناگونی داشته باشند که چند نمونه از آن‌ها را در ادامه مشاهده می‌کنید:

آگاهی از بارگزاری کامل فونت

برای آگاه شدن از بارگزاری کامل فونت‌های سفارشی، می‌توان فونت یک عنصر را ابتدا با فونت نامرئی و سپس فونت سفارشی مقدار دهی کرد. پیش از بارگزاری کامل فونت اصلی، عرض عنصر مساوی صفر خواهد بود و پس از بارگزاری فونت اصلی، عرض آن افزایش خواهد یافت.

span.font-load-detection {
	font-family: AdobeBlank, CustomFont;
}

خالی ماندن سایت پیش از بارگزاری فونت اصلی

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

جلوگیری از ایجاد فاصله بین عنصرها

عنصرهای HTML که حالت نمایش inline-block داشته باشند، باید بدون فاصله در ادامه‌ی یکدیگر قرار بگیرند تا بینشان فاصله نیفتد. این شکل نمایش معمولا در منوهای سایت یا برای برخی نیازهای دیگر مورد استفاده قرار می‌گیرد. می‌توان از یک فونت نامرئی برای متن پس زمینه استفاده کرد تا این فاصله از بین برود.

بهینه‌سازی موتورهای جستجو – SEO

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

<style>
	h1 {
		font-family: AdobeBlank;
		background-image: url( 'user-sees-this-image.png' );
	}
</style>
<h1>Google sees this text</h1>

استفاده در فونت‌های آیکون

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

<style>
	span.icon {
		font-family: IconFont;
	}
</style>
<span class="icon">Google+</span><!-- small letters are invisible -->
<span class="icon">Facebook</span>
<span class="icon">Twitter</span>
ارسال شده در CSS, HTML, SEO | برچسب‌شده , | ۵ دیدگاه

استفاده از ImageMagick برای تبدیل فایل‌های PDF به تصویر( JPG )

ارسال شده در ۵ آبان ۱۳۹۲ توسط امیرمسعود ایرانی

اگر به دنبال ابزاری برای تبدیل فایل‌های PDF به تصویر هستید یا می‌خواهید فرمت هرگونه فایل گرافیکی را تغییر دهید، یکی از بهترین ابزارهای در دسترس که به رایگان قابل دریافت و استفاده است، ImageMagick نام دارد.

برای تبدیل فایل‌های PDF به تصویر، ابتدا لازم است تا نرم‌افزار ImageMagick را از نشانی زیر دانلود کنید:
صفحه‌ی خانگی ImageMagick

این نرم‌افزار برای پردازش فایل‌های PDF از کتابخانه‌ی Ghostscript استفاده می‌کند که لازم است آن را نیز از نشانی زیر دریافت و نصب کنید:
صفحه‌ی خانگی Ghostscript

ImageMagick حاوی ابزاری است به نام Convert.exe که از خط فرمان اجرا می‌شود و رابط گرافیکی ندارد
برای ساده‌تر شدن فرآیند تبدیل، یک فایل متنی ایجاد کنید، محتوای زیر را درون آن بنویسید و آن را با پسوند cmd ذخیره کنید

convert.exe -resample 150 -quality 95 %1 "%~dpn1.jpg"

دو پارامتر قابل تغییر در دستور بالا عبارتند از resample که با واحد DPI یا نقطه در اینچ مشخص می‌شود و در اندازه‌ی فایل خروجی اثرگذار است. مقدار ۱۵۰ معمولا مقداری مناسب است. مگر آنکه فایل خروجی را برای چاپ نیاز داشته باشید.
پارامتر دوم quality است که کیفیت فایل jpg خروجی را مشخص می‌کند. این عدد را نیز به دلخواه می‌توانید تغییر دهید.

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

اگر بخواهید تمامی فایل‌های PDF موجود در زیرشاخه‌های فولدر فعلی را به تصویر تبدیل کنید، اسکریپت زیر را در یک فایل با پسوند cmd ذخیره کنید و آن را در کنار شاخه‌های هدف قرار دهید. فایل را اجرا کنید و منتظر بمانید تا تمامی فایل‌های pdf شما به تصویر تبدیل بشوند.

@ECHO OFF
FOR /F "DELIMS==" %%d in ('DIR "." /AD /B') DO ( 
	ECHO %%d
	FOR /F "DELIMS==" %%f in ('DIR ".\%%d\*.pdf" /B') DO (
		ECHO converting %%f...
		convert.exe -resample 150 -quality 95 ".\%%d\%%f" ".\%%d\%%~nf.jpg"
	)
)
ECHO done.
PAUSE
ارسال شده در نرم‌افزار | برچسب‌شده , | دیدگاه‌تان را بنویسید

وسط چین کردن عمودی عنصرها با کمک CSS

ارسال شده در ۲۶ مهر ۱۳۹۲ توسط امیرمسعود ایرانی

وسط‌چین کردن عنصرهای HTML با کمک چند شیوه‌ی نسبتا پیچیده امکان‌پذیر است. در این نوشته به یکی از این روش‌ها که با کمک pseudo element ها انجام می‌شود می‌پردازیم.

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

برای انجام این کار یک عنصر div به عنوان پدر و یک عنصر span به عنوان فرزند ایجاد می‌کنیم:

<div id="parent">
	<span id="child">وسط چین به صورت عمودی</span>
</div>

برای وسط‌چین کردن عمودی عنصر child از “‎:before” در parent کمک می‌گیریم. با تغییر ارتفاع، شکل نمایش و ویژگی vertical-align این عنصر، کل ارتفاع عنصر والد را به یک خط با ارتفاع ۱۰۰٪ تبدیل می‌کنیم.
در نتیجه، وسط‌چین کردن یک عنصر در خطی که قرار دارد، به کاری ساده تبدیل می‌شود.

#parent {
	height: 100px;
	background-color: khaki;
}
 
#parent:before {
	content: "";
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}
 
#child {
	display: inline-block;
	vertical-align: middle;
	background-color: navy;
}

نتیجه‌ی کار در این قسمت قابل مشاهده است:

وسط چین به صورت عمودی

در صورت تمایل می‌توان به جای استفاده از pseudo element از یک عنصر واقعی، پیش از child هم بهره‌گیری کرد. تخصیص شیوه‌نامه‌ی تعریف‌شده برای “‎:before” به غیر از content به این عنصر، همین نتیجه را در پی خواهد داشت.

ارسال شده در CSS, HTML | ۵ دیدگاه

شش دلیل برای بهینه‌سازی سایت‌های اینترنتی

ارسال شده در ۵ مهر ۱۳۹۲ توسط امیرمسعود ایرانی

مزایای بهینه‌سازی سرعت و حجم سایت اینترنتی

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

  1. کاهش هزینه‌ها: کاهش حجم صفحات وب مساوی است با کاهش نیاز به فضای ذخیره‌سازی و پهنای باند.
  2. بهینه‌سازی موتور جستجو( SEO ): یکی از مهم‌ترین موارد که می‌تواند رتبه‌ی سایت را در نظر موتورهای جستجو افزایش دهد، سرعت بارگزاری صفحات وب و حجم کمتر آن‌ها است.
  3. افزایش بازدید: هرچه حجم سایت بیشتر باشد و زمان بارگزاری آن بیشتر طول بکشد، کاربران بیشتری از بازدید سایت شما منصرف می‌شوند. هر یک کیلوبایت حجم اضافه و هر یک ثانیه تاخیر می‌تواند اثری فراتر از تصور در حجم بازدیدکنندگان باقی بگذارد.
  4. حفظ محیط زیست: مصرف بیشتر پهنای باند و فضای ذخیره‌سازی مساوی است با مصرف بیشتر انرژی و آلودگی بیشتر محیط زیست.
  5. ابزارهای جدید: با روی کار آمدن تبلت‌ها و گوشی‌های هوشمند، بسیاری از کاربران از این ابزارها برای مرور اینترنت استفاده می‌کنند. محدودیت‌های سخت‌افزاری و محدودیت در سرعت و حجم دسترسی به اینترنت، کاهش حجم و افزایش سرعت بارگزاری را به موضوعی مهم تبدیل می‌کنند.
  6. افزایش امنیت داده‌ها: هر چه حجم منابع یک سایت بیشتر باشد، تهیه‌ی پشتیبان از آن سخت‌تر و طولانی‌تر خواهد بود. در نتیجه ممکن است تهیه‌ی پشتیبان در دوره‌های کوتاه‌مدت مقدور نباشد.
ارسال شده در SEO, امنیت, برنامه‌نویسی | برچسب‌شده , , | دیدگاه‌تان را بنویسید

ویژگی‌های مهم RAR5

ارسال شده در ۱۷ شهریور ۱۳۹۲ توسط امیرمسعود ایرانی

WinRAR 5

نگارش جدید WinRAR 5 به تازگی منتشر شده است. مهم‌ترین تغییر در این نگارش، افزوده شدن شیوه‌ی جدید فشرده‌سازی فایل‌هاست که با نام RAR5 شناخته می‌شود.

در ادامه به مهم‌ترین ویژگی‌های این فرمت جدید می‌پردازیم.

  • فایل‌های ساخته شده با این فرمت جدید در نگارش‌های قدیمی WinRAR و همچنین بسیاری از برنامه‌های دیگر قابل استخراج نیستند. بنابراین اگر می‌خواهید فایل فشرده را برای دیگران بفرستید، بهتر است تا فراگیر شدن نگارش جدید، همچنان از فرمت قدیمی استفاده کنید
  • بیشینه‌ی حجم دیکشنری از ۴ مگابایت به ۱ گیگابایت افزایش پیدا کرده. این محدودیت در سیستم‌های ۳۲ بیتی ۲۵۶ مگابایت است. افزایش حجم دیکشنری، بر قدرت فشرده‌سازی اثر مثبت و در زمان فشرده‌سازی اثر منفی دارد. مقداردهی به دیکشنری بیش از اندازه‌ی مورد نیاز، اثری در نتیجه نمی‌گذارد
  • امکان انتخاب الگوریتم جدید BLAKE2 برای هش( Hashing ) فایل‌ها. الگوریتم‌های هش روال‌هایی هستند که بر اساس محتوای فایل‌ها یک امضای منحصر به فرد تهیه می‌کنند. این امضا می‌تواند برای بررسی مشابه بودن محتوای فایل‌ها مورد استفاده قرار بگیرد. الگوریتم BLAKE2 امنیت بسیار بالایی دارد و سرعت آن نیز به علت استفاده‌ی بهینه از امکانات جدید سخت‌افزاری بسیار زیاد است. این الگوریتم به صورت پیش‌فرض غیرفعال است و برای استفاده از آن باید به بخش تنظیمات برنامه مراجعه کنید
  • نگارش جدید WinRAR به صورت موثر از هسته‌های متعدد پردازنده استفاده می‌کند. این کار سرعت فشرده‌سازی و استخراج را به ویژه در مورد فایل‌های حجیم افزایش می‌دهد
  • الگوریتم اصلاح خطای RAR5 به Reed-Solomon تغییر پیدا کرده است. این الگوریتم، توانایی بهتری در اصلاح خطاهای متعدد دارد. بنابراین RAR5 گزینه‌ای بهتر از گذشته برای نگهداری فایل‌های مهم به شمار می‌رود
  • رمزگزاری فایل‌های RAR5 از کلید ۲۵۶ بیتی به جای ۱۲۸ بیتی استفاده خواهند کرد. این به معنی سخت‌تر شدن عملیات آزمون و خطا برای بازیابی رمز گشایش است

منبع: RARLab

ارسال شده در امنیت, نرم‌افزار | برچسب‌شده , | دیدگاه‌تان را بنویسید

نکته‌هایی درباره‌ی Redirect یا تغییر مسیر صفحات وب

ارسال شده در ۱۵ شهریور ۱۳۹۲ توسط امیرمسعود ایرانی

تغییر مسیر - Redirect

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

تغییر مسیر یا Redirect از روش‌های مختلفی امکان‌پذیر است. در این نوشته به تغییر مسیر از طریق سرآمد پاسخ( header ) می‌پردازیم و از روش‌های موجود در HTML و JavaScript چشم‌پوشی می‌کنیم.
ادامه‌ی خواندن←

ارسال شده در HTML, PHP, SEO, برنامه‌نویسی | برچسب‌شده , | ۲ دیدگاه

آشنایی با برنامه‌نویسی چند زبانه و شیوه‌ی به‌کارگیری gettext

ارسال شده در ۱۷ مرداد ۱۳۹۲ توسط امیرمسعود ایرانی

i18n
شاید ساده‌ترین کار در توسعه‌ی برنامه‌های چندزبانه ترجمه‌ی واژه‌ها و جمله‌های به‌کاررفته در نرم‌افزار باشد، بخش مهم‌تر شیوه‌ی کدنویسی چنین سیستمی است. به گونه‌ای که توسعه و تغییر در کوتاه‌ترین زمان و به ساده‌ترین شکل امکان‌پذیر باشد.

برای ایجاد برنامه‌هایی با مفهوم چندزبانه دو پیش‌نیاز وجود دارد. نخست آنچه به «عمومی سازی» یا «Internationalization» یا به شکل کوتاه «I18n» مشهور است.
I18n به صورت کوتاه به کارهایی گفته می‌شود که رفتارهای ورودی و خروجی نرم‌افزار را با نیازهای زبان‌های مختلف سازگار می‌کند. مثلا یکی از این نیازها، «عدم وابستگی به یک تقویم خاص»، «امکان تایپ راست به چپ و چپ به راست»، «پشتیبانی از نویسه‌های یونی‌کد»، «پشتیبانی واحدهای پولی و اعداد متفاوت» و از این دست است.

پس از آنکه پیش‌نیازهای ایجاد یک نرم‌افزار چندزبانه آماده شد و مراحل I18n به درستی در نرم‌افزار اعمال شد، نوبت به مرحله‌ی «بومی‌سازی» یا «Localization» یا به شکل کوتاه «L10n» می‌رسد.
این مرحله، انجام کارهای مورد نیاز برای اضافه کردن یک زبان تازه به نرم‌افزاری است که پیش‌نیازهای I18n در آن وجود دارد. کارهایی که در این مرحله ممکن است انجام شوند عبارتند از: «ترجمه‌ی واژه‌ها و جمله‌های نرم‌افزار به زبان تازه»، «اضافه کردن یک تقویم جدید به نرم‌افزار» و مانند آن.
ادامه‌ی خواندن←

ارسال شده در PHP, برنامه‌نویسی, فناوری | برچسب‌شده , , , | ۴ دیدگاه

راه‌اندازی Microsoft Drivers 3.0 for PHP for SQL Server روی WAMP

ارسال شده در ۲۰ تیر ۱۳۹۲ توسط امیرمسعود ایرانی

PHP & SQL Server

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

دسترسی به پایگاه داده‌ی Microsoft SQL Server در زبان PHP با محدودیت‌هایی همراه است.
در این مقاله با ابزارهای موردنیاز برای برقراری این ارتباط آشنا می‌شویم و گام به گام مراحل نصب را دنبال خواهیم کرد.
ادامه‌ی خواندن←

ارسال شده در برنامه‌نویسی, عمومی, پایگاه داده | برچسب‌شده , , , , | ۲۰ دیدگاه

UTF-8 برای برنامه‌نویسان

ارسال شده در ۹ تیر ۱۳۹۲ توسط امیرمسعود ایرانی

یو‌تی‌اف-۸ - UTF-8
پیش از آنکه به UTF-8 بپردازم لازم است تا اندازه‌ای با سیستم‌های کدگذاری رشته‌ها آشنا شویم.
تا زمانی نه چندان دور، بیشتر سیستم‌عامل‌ها و کامپایلرهای برنامه‌نویسی با سیستم قدیمی ASCII کار می‌کردند. در این سیستم( سیستم اسکی ) هر نویسه( Character ) یک بایت یا هشت بیت فضا اشغال می‌کند. در نتیجه کل نویسه‌های قابل پوشش در این سیستم ۲۵۶ حرف خواهد بود.
نیازی به توضیح نیست که این ۲۵۶ حرف برای نگهداری نویسه‌های زبان‌های مختلف و حتی برای برخی از زبان‌ها به تنهایی کافی نیست.
ممکن است برایتان سوال پیش بیاید که با این حجم اندک چگونه ممکن است بتوانیم رشته‌هایی با زبان‌های مختلف را در کنار هم داشته باشیم.
ادامه‌ی خواندن←

ارسال شده در برنامه‌نویسی, عبارت‌های منظم | برچسب‌شده , , , , , | ۲۳ دیدگاه

توضیح مختصری درباره make

ارسال شده در ۳ تیر ۱۳۹۲ توسط امیرمسعود ایرانی

make ابزاری است که برای مشخص کردن وابستگی‌ فایل‌ها به یکدیگر استفاده می‌شود.
برای مثال می‌توانید تعیین کنید اگر یک فایل جاوااسکریپت تغییر کرده بود، به صورت خودکار فشرده شود و درون html جاگذاری شود یا می‌توان مشخص کرد که چنانچه یک فایل سرآمد با پسوند h تغییر کرده بود، فایل‌های برنامه دوباره کامپایل شوند تا برنامه‌ی اجرایی آخرین تغییرات را در خود داشته باشد.

برای مشاهده‌ی آموزش اینجا کلیک کنید
پیوند از سایت «انجمن‌های فارسی اوبونتو»

ارسال شده در برنامه‌نویسی | برچسب‌شده | دیدگاه‌تان را بنویسید