تغییر شماره روی 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 و با نام هایی که برای لاه ها قرار داده بودید ذخیره میکند . همچنین برای هر رزولوشن تصویر دستگاهای اندروید و آیفون عملیات را انجام میدهد .

(بیشتر…)

تست سایتهای Responsive در صفحه نمایشهای مختلف

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

(بیشتر…)

تبدیل خودکار استایل فتوشاپ به 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 اجرا کنید .

(بیشتر…)