تغییر شماره روی favicon

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

faveicon

این کار را یک پلاگین جی کوئری برای شما به سادگی انجام می دهد . نام پلاگین favico.js می باشد و افکت ها و استایلهای زیادی را هم برای شخصی سازی این شمارنده روی favicon برای استفاده قرار داده است . در ابتدا میخواستم فقط این سایت را معرفی کنم و لینک بدهم که خودتان از سایت سازنده دریافت کنید و استفاده کنید اما دیدم سورس مثالها در سایت سازنده قرار نگرفته و استفاده از این پلاگین ممکن است برای بعضی از توسعه دهنده گان وقت گیر و پیچیده باشد ، همچنین داکیومنت خوبی هم در سایتش قرار نداده است . تصمیم گرفتم در این پست راه استفاده از این پلاگین و سورس کل مثال را برای دانلود و دمو قرار دهم یا به سادگی بتواند از آن در پروژه های خود استفاده کنید . طبق گفته ی سایت سازنده این پلاگین فقط توسط مرورگرهای مدرن Chrome , Firefox قابل استفاده است .
(بیشتر…)

ایجاد نوتیفیکیشن گذرا در سایت

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

alertify  یک پلاگین جاواسکریپت و مستقل از Jquery است که  هم میتوان دیالوگ و آلرت با آن نشان داد و هم نوتیفیکیشن . کافیست بصورت زیر آن را در سورس HTML خود قرار دهید .

alert

(بیشتر…)

تجربه پرینت اطلاعات از مرورگر روی پرینترهای حرارتی

به تازگی برای یک پروژه ای که لازم بود اطلاعات از مرورگر مستقیما توسط یک فیش پرینتر (پرینتر حرارتی ) پرینت شود با مشکلاتی مواجه شده بودم که درنهایت موفق به حلشان شدم ، در این نوشته قصد دارم این مسائل و راه هایی که امتحان کردم را با شما اشتراک بگذارم که اگر روزی راهتان به این نوع پرینترها افتاد بتوانبد به سادگی با آنها کار کنید .


مسئله ای که در حین پرینت گرفتن مستقیم از مرورگر داشتم این بود که اندازه کاغذ پرینت شده قابل تنظیم و کنترل نبود وبه اندازه 287 میلیمتر که ارتفاع برگه ی A4است پرینت خالی گرفته میشد ، لازم بود بعد از اتمام پرینت اطلاعات چند خطی برش کاغذ اتفاق بیفتد وگرنه کاغذ زیادی مصرف میشد ، همچنین یک سری اطلاعات مثل آدرس وب و شماره صفحه و تاریخ هم روی برگه خودکار چاپ میکرد و از همه ی اینها مهم تر باز شدن Popup انتخاب پرینتر بود ، این پروژه چون مخصوص کاربران یک کیوسک ساخته شده بود می بایست پرینت مستقیم و بدون این تفاسیر گرفته میشد و فیش تحویل کاربر داده میشد.

(بیشتر…)

Slice فتوشاپ را فراموش کنید !

یکی از دغدغه های طراحان قالب وبسایت یا اپلیکیشن های موبایل تبدیل اجزای طرح فتوشاپی به عکسهای PNG می باشد . این کار معمولا با سختی انجام می شود می بایست هر کدام از اجزا را slice بندی کرد و خروجی گرفت ، ممکن است افکت های hover و Active و  Disable در یک مکان بصورت پنهان باشند برای هر کدام از آنها می بایست یکبار خروجی گرفت و خیلی دردسرهای دیگر که ممکن است در حین خروجی گیری با آن مواجه شوید . کار موقعی سخت تر می شود که میخواهید برای موبایل اپلیکیشن بسازید و می بایست برای هر رزولوشن تصویر ، سایز عکس ها را بزرگ و کوچک کنید و همه ی مراحل گفته شده را دوباره انجام دهید . گوشی ها مانند مرورگر دسکتاپ نیستند که بتوان برای یک رزولوشن مانیتور سایت را طراحی کرد و در صورت بزرگ بودن مانیتور بقیه ی صفحه خالی بماند ، طراحی استایل اپلیکیشن موبایل محدودیت های کاربری ای دارد از جمله Full screen بودن همیشگی صفحه ،  فتوشاپ راه کار تازه ای برای کمک به طراحان حتی در ورژن جدید خود یعنی CS6 ارائه نداده است .

اما سایتی به نام cutandslice.me به کمک طراحان وبسایت آمده و یک extension ای برای فتوشاپ ساخته که همه ی این کار ها را بصورت خودکار انجام می دهد ، کافیست شما در سایز دسکتاپ با گروه بندی و نام گذاری لایه ها طرح خود را بسازید این افزونه علاوه بر اینکه خودش لایه ها را Slice میکند ،  قسمتهای خالی را حذف میکند و جدا جدا عکس ها را بصورت PNG و با نام هایی که برای لاه ها قرار داده بودید ذخیره میکند . همچنین برای هر رزولوشن تصویر دستگاهای اندروید و آیفون عملیات را انجام میدهد .

(بیشتر…)

تبدیل خودکار استایل فتوشاپ به CSS3

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

در روشی که در این پست قصد دارم شرح دهم تبدیل لایه های فتوشاپی به Css3 به آسانی و با یک کلیک قابل انجام خواهد بود .

css3ps  نام سرویسی است که یک پلاگین فتوشاپ در اختیار شما قرار میدهد و در کمتر از 20 ثانیه کد Css3 و نمونه تولیدی را به شما تحویل می دهد .

(بیشتر…)

ایجاد افکت رو عکسها بصورت آنلاین با html5

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

برای این کار کافیست از پلاگین Jquery ای به نام vitage.js استفاده کنید. این پلاگین با استفاده از html5 canvas element این افکت ها را به راحتی بر عکس شما ایجاد میکند .

 

دمو    دانلود 

(بیشتر…)

دگمه های اشتراک گذاری در شبکه های اجتماعی با طرح یکسان

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

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

Google Plus – Facebook – Twitter – Digg – Delicious – StumbleUpon – Linkedin – Pinterest

(بیشتر…)

اضافه کردن فیلد جدید به فرم ثبت نام جوملا

ممکن است برای عضو گیری جوملا لازم باشد اطلاعات بیشتری را از کاربر دریافت کنید مثلا تلفن یا آدرس و …

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

ابتدا برای هر فیلدی که میخواهید اضافه کنید می بایست با phpMyadmin یک ستون در جدول Jos_user بسازید ، مثلا برای ساختن فیلدهای آدرس و تلفن میتوانید بطور دستی این کار را بکنید یا عبارات زیر را در قسمت SQL اجرا کنید .

(بیشتر…)

بارگیری مطالب با اسکرول به سمت پایین صفحه

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

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

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

دمو    دانلود 

(بیشتر…)

شمارگر دایره ای

در بعضی از سایتهایی که برای انجام کاری احتیاج به شمارش معکوس دارند مثل دانلود های غیر مستقیم از سایتهای اشتراک گذاری فایل یا دریافت مقدار چیزی بصورت گرافیکی نه عدد از کاربر از شمارشگر های دایره ای استفاده می کنند این کار در گرافیک سایت بسیار تاثیر گذار می باشد ، در این پست قصد دارم یک پلاگین Jquery را معرفی کنم که تگ input را به صورت لغزنده ی دایره ای به شمل زیر در می آورد .

میتوانید در سایت سازنده نمونه های این لغزنده ها را ببینید . همچنین برای روش استفاده می توانید در صفحه ی Github سازنده مستندات آن را مطالعه کنید و پلاگین را دانلود نمایید . اگر با دانلود از github  مشکل داشتید از هاست طراح آن را بطور مستقیم می توانید دریافت نمایید .

(بیشتر…)