قالب رایگان بخش مدیریت – ۱

قالب رایگان بخش مدیریت امیب ۱

قالب رایگان بخش مدیریت امیب ۱
آزمون شده با فایرفاکس، کروم، اینترنت اکسپلورر
سازگار با استانداردهای HTML5 و CSS3
استفاده از LESS برای طراحی CSS
پشتیبانی از منوهای تو در تو و انیمیشن بدون نیاز به جاوااسکریپت
سازگار با گوشی‌های هوشمند فاقد Mouse Hover
طراحی تخت

برای دریافت قالب اینجا کلیک کنید

ارسال شده در قالب سایت | برچسب‌شده , , | ۲ دیدگاه

استفاده از واحد «درصد» مقابل background-position در CSS

دستور background-position وظیفه دارد تا محل شروع برای تصویر پس‌زمینه‌ی یک عنصر را تغییر دهد. در هنگام طراحی یک سایت واکنش‌گرا یا Responsive با استفاده از تعیین مکان «درصدی» تصویر می‌توان یک پس‌زمینه‌ی Responsive در اختیار داشت. با این حال برای استفاده‌ی صحیح از واحد «درصد» لازم است تا با شیوه‌ی خاص عملکرد آن آشنایی داشته باشیم.

برای شروع به مثال مقابل توجه کنید:

div {
	background-image: url( "amib.jpg" );
	background-repeat: no-repeat;
	background-size: 200%;
	width: 50%;
	background-position: 50% 0;
}

قطعه کد بالا، عنصر را به‌اندازه‌ی «۵۰%» عرض صفحه کوچک می‌کند، تصویر «amib.jpg» را به اندازه‌ی «۲۰۰%» فضای عنصر یا «۱۰۰%» عرض صفحه تغییر اندازه می‌دهد، نقطه‌ی «۵۰%» تصویر را پیدا می‌کند و آن را طوری جابجا می‌کند که این نقطه بر نقطه‌ی «۵۰%» عنصر «div» یک‌جا قرار بگیرند.
با این شرح، مقدار «۰%» تصویر را در منتها الیه سمت چپ عنصر و «۱۰۰%» آن را در منتها الیه سمت راست عنصر قرار خواهند داد.

حال اگر بخواهیم در مورد مثال بالا، عنصر div را در محلی غیر از ابتدا، انتها یا میانه‌ی تصویر قرار دهیم، لازم است تا درصد جابجایی تصویر را به صورت دقیق مشخص کنیم. برای مثال اگر بخواهیم سمت چپ عنصر در محل ۴۰ درصدی عرض صفحه و همچنین تصویر قرار بگیرد محاسبات به این صورت خواهند بود:

div.s1 {
	/*
	100x - 50x = 40
	50x = 40
	x = 40 / 50
	x = 0.8
	*/
	left: 40%;
	background-position: 80% 0;
}
 
div.s2 {
	/*
	100x - 50x = 33.333
	50x = 33.333
	x = 33.333 / 50
	x = 0.66666
	*/
	left: 33.333%;
	background-position: 66.666% 0;
}
ارسال شده در CSS | برچسب‌شده , , | دیدگاه‌تان را بنویسید

آموزش اصول طراحی سایت واکنش‌گرا( Responsive WebDesign )

طراحی وبسایت واکنش‌گرا

روز به روز بر تعداد کسانی که از ابزارهای قابل حمل برای دسترسی به اینترنت استفاده می‌کنند افزوده می‌شود. طراحی سایت به گونه‌ای که در هر عرض و طول صفحه قابل استفاده باشد اصطلاحا «طراحی واکنش‌گرا» یا «Responsive webdesign» نامیده می‌شود.

برای ایجاد یک طرح واکنش‌گرا دانستن چند نکته ضروری است که در این نوشته به اختصار آن‌ها را مرور می‌کنیم.

ادامه‌ی خواندن

ارسال شده در HTML | برچسب‌شده , | ۲ دیدگاه

افزونه‌ی فارسی‌ساز وردپرس با بهینه‌سازی و رفع اشکال

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

در چند مرحله این افزونه را بهسازی و رفع اشکال کردم
تغییرات را برای توسعه‌دهندگان افزونه فرستادم، با این حال به هر دلیل افزونه‌ی قدیمی را بدون تغییر در ویرایش جدید وردپرس نیز انتشار دادند

چنانچه مایل باشید می‌توانید افزونه‌ی تغییریافته را از این پیوند دریافت کنید

برای مشاهده‌ی شکل عملکرد افزونه‌ی تغییر یافته می‌توانید همین وبلاگ را بررسی کنید

به‌روزرسانی – ۱۴ دی ۱۳۹۱

آخرین تغییرات اعمال شده در نگارش ۴.۴ افزونه‌ی اصلی در نسخه‌ی بهسازی شده نیز پیاده‌سازی شد.

به‌روزرسانی – ۱۷ آبان ۱۳۹۲

آخرین تغییرات اعمال شده در نگارش ۴.۵ افزونه‌ی اصلی در نسخه‌ی بهسازی شده نیز پیاده‌سازی شد.

به‌روزرسانی – ۱۱ دی ۱۳۹۲

آخرین تغییرات اعمال شده در نگارش ۴.۵.۱ افزونه‌ی اصلی در نسخه‌ی بهسازی شده نیز پیاده‌سازی شد.

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

مدیریت تاریخ و زمان در جاوااسکریپت با کمک Moment.js

momentjs
Moment.js نام یک کتابخانه‌ی جاوااسکریپت است. این کتابخانه وظیفه‌ی تحلیل، اعتبارسنجی، مدیریت و نمایش تاریخ و زمان در جاوااسکریپت را بر عهده دارد. از ویژگی‌های مهم این کتابخانه، سازگاری با محیط‌های گوناگون از جمله Node.js و همچنین انواع مرورگرهای متداول به شمار می‌رود.

اگرچه شیئ Date در جاوااسکریپت ویژگی‌های متنوعی برای کارکردن با تاریخ و زمان در اختیار برنامه‌نویسان قرار می‌دهد، ولی توسعه‌ی نرم‌افزارهای تحت وب تنها با استفاده از این ویژگی‌ها گاهی مشکل و ناهموار به نظر می‌رسد.

برای استفاده از کتابخانه‌ی Moment.js که از ده‌ها زبان مختلف و همچنین تاریخ هجری شمسی( با استفاده از افزونه‌ی جلالی ) پشتیبانی می‌کند، کافی است فایل اسکریپت آن را دریافت کنید و سپس در سرآمد صفحه‌ی وب خود آن را درج کنید:

<script src="moment.js"></script>

ادامه‌ی خواندن

ارسال شده در برنامه‌نویسی, جاوااسکریپت | برچسب‌شده , | ۲ دیدگاه

پیوند دادن حساب گوگل پلاس با سایت یا وبلاگ برای افزایش رتبه‌ی SEO

SEO - نمایش تصویر نویسنده در کنار نتایج گوگل

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

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

برای معرفی حساب کاربری گوگل پلاس به عنوان نویسنده‌ی سایت خود فرآیندی دو مرحله‌ای را باید به انجام برسانید

قرار دادن پیوند حساب کاربری گوگل پلاس در صفحات سایت یا وبلاگ

برای انجام این کار می‌بایست، در هر صفحه و هر مطلب سایت خود پیوندی به حساب کاربری گوگل پلاس خود قرار بدهید:

<a href="[profile_url]?rel=author">Google</a>

درج پیوند سایت در حساب کاربری گوگل پلاس

اکنون به حساب کاربری خود در گوگل پلاس مراجعه کنید و در سربرگ About بخش Links را بیابید. با اضافه کردن نشانی سایت خود به بخش Contributor to، گوگل شما را به عنوان یکی از نویسندگان سایت پیوند شده، شناسایی خواهد کرد.

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

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

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

منبع: راهنمای وبمستر گوگل

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

آشنایی با رویدادهای سراسری ajax در jQuery

یکی از ویژگی‌های مفید jQuery در هنگام توسعه‌ی نرم‌افزارهای تحت وب، رویدادهای( event ) سراسری است. با تعریف این رویدادها می‌توانید در هنگام هر فراخوانی ajax در هر بخش از نرم‌افزار، آگاه شوید و عملیات دلخواه مانند نمایش عبارت «loading» یا جلوگیری از بارگزاری مجدد صفحه یا هر عمل متناسب دیگر را به انجام برسانید

رویدادهای سراسری jQuery برای ajax عبارتند از:

.ajaxComplete()

فراخوانی در هنگام پایان عملیات درخواست ajax
مستندات در سایت اصلی

.ajaxError()

فراخوانی در هنگام رویداد خطا در درخواست ajax
مستندات در سایت اصلی

.ajaxSend()

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

.ajaxStart()

فراخوانی در هنگام نخستین درخواست ajax
مستندات در سایت اصلی

.ajaxStop()

فراخوانی در هنگام به پایان رسیدن تمامی درخواست‌های ajax
مستندات در سایت اصلی

.ajaxSuccess()

فراخوانی در پایان عملیات ajax
مستندات در سایت اصلی

این رویدادها می‌بایست به شیء document پیوست شوند تا jQuery بتواند در هنگام نیاز آن‌ها را فراخوانی کند
در ادامه یک مثال برای نمایش پیام «در حال بارگزاری» به ازای هر درخواست را مشاهده می‌کنید:

<div id="loading">
	در حال بارگزاری
</div>
 
<script>
	$( document ).ajaxStart(function() {
		$( "#loading" ).show();
	} );
 
	$( document ).ajaxComplete(function() {
		$( "#loading" ).hide();
	} );
</script>
 
<script>
	$.ajax( 'http://amib.ir', {
		success: function( data ) {
			alert( data );
		}
	} );
</script>

منبع: مستندات jQuery

ارسال شده در برنامه‌نویسی, جاوااسکریپت | برچسب‌شده , | ۲ دیدگاه

چرا Microsoft SQL Server و چرا MySQL Server ؟

sqlserver-mysql

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

در این نوشته تلاش می‌کنم بخشی از تفاوت‌های قابل توجه میان Microsoft SQL Server و MySQL Server -به عنوان دو گزینه‌ی متداول در نگهداری اطلاعات- را فهرست کنم.

شباهت‌ها

SQL Server و MySQL نرم‌افزارهایی با قدمت بالا و امکانات فراوان هستند. هر یک از این ابزارها ویژگی‌های مشترک بسیاری دارند که در بسیاری از کاربردهای معمول، برتری چندانی در به‌کارگیری بر یکدیگر ندارند.

مجوز استفاده

MySQL دارای نسخه‌ای رایگان و بدون محدودیت برای استفاده‌های متن‌باز و غیرتجاری است. استفاده از این نگارش در حجم داده‌های بالا بدون پرداخت هزینه امکان‌پذیر است. در طرف دیگر، اگرچه SQL Server هم نگارش رایگانی را در اختیار برنامه‌نویسان قرار می‌دهد، ولی برخی محدودیت‌ها و تفاوت‌ها با نگارش حرفه‌ای در آن وجود دارد.

محیط برنامه‌نویسی

سهولت استفاده در به‌کارگیری یکی ابزار می‌تواند سرعت و کیفیت فرآیند توسعه را بهبود دهد و سبب کاهش هزینه‌ها و افزایش توسعه‌پذیری نرم‌افزار بشود. پیوند دیرینه میان PHP و MySQL و در طرف دیگر پیوند محکم میان Visual Studio و SQL Server عامل مهمی در انتخاب ابزار مناسب به شمار می‌روند.

سیستم‌عامل

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

منابع سخت‌افزاری و نرم‌افزاری

MySQL به منابع سخت‌افزاری و نرم‌افزاری محدودی نیاز دارد و در مقایسه با SQL Server هزینه‌ی کمتری را طلب می‌کند. نباید فراموش کرد که منابع سخت‌افزاری ناکافی می‌تواند در عملکرد نرم‌افزار تاثیر منفی بگذارد و علاوه بر افزایش استهلاک، سبب کاهش پایداری اطلاعات بشود.

دسترسی و امنیت داده‌ها

SQL Server از شیوه‌های مختلفی برای شناسایی کاربران استفاده می‌کند. تایید هویت بر اساس کاربران سیستم‌عامل ویندوز و اتصال به Active Directory از ویژگی‌های مختص SQL Server به شمار می‌روند. در طرف مقابل، MySQL تنها با کمک نام کاربری و گذرواژه می‌تواند دسترسی کاربران را محدود کند.
همچنین کدگذاری و حفاظت از اطلاعات در SQL Server در مقایسه با MySQL پیشرفته‌تر طراحی و پیاده‌سازی شده است.

هزینه‌ی نگهداری

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

تعداد کاربران و حجم داده‌ها

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

ویژگی‌های خاص

علاوه بر استانداردهای تعریف‌شده هر DBMS ویژگی‌های غیراستاندارد مختص به خود را هم دارد. چنانچه قابلیت حمل پایگاه داده از نیازهای سیستم به شمار نیاید، برخی از این ویژگی‌های غیراستاندارد می‌توانند به تنهایی عاملی برای انتخاب یک ابزار و حذف ابزارهای دیگر به شمار آیند. برای مثال پایگاه داده‌ی Oracle این قابلیت را دارد که اطلاعات شما را به هر زمان دلخواه در گذشته برگرداند. و یا MySQL با پشتیبانی از سیستم ذخیره‌سازی MyISAM توانایی دسترسی سریع و فقط خواندنی به اطلاعات را به خوبی در خود جای داده.

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

ارسال شده در برنامه‌نویسی, پایگاه داده | یک دیدگاه

جدول خودکار آژاکس – AMIB AJAX List

لیست آژاکس جاوااسکریپت سازگار با لاراول

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

برای مشاهده‌ی دموی آنلاین، دریافت و مطالعه‌ی مستندات فنی به این صفحه مراجعه کنید

ارسال شده در PHP, برنامه‌نویسی, جاوااسکریپت | برچسب‌شده , , , , | دیدگاه‌تان را بنویسید

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

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

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

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

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

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

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

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

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

عنصرهای 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 | برچسب‌شده , | ۳ دیدگاه