یکی از ابزارهای توسعه دهنده ها git هست که باهاش میتونیم یک نسخه از تغییرات رو داشته باشیم و همچنین با یک تیم روی یک پروژه کار کنیم و git حواسش به تغییرات و تداخل ها و تاریخچه تغییرات باشه.

از سرویس های معروف ارائه دهنده گیت github هست،که اینجا از این سرویس استفاده می کنیم.

توسعه دهنده ها به چه صورت فایل جدید خود را به سرور منتقل می کنند؟

خب توسعه دهنده ی وب وقتی تغییرات جدیدی در کدش داده میشه باید روی سایت هم اعمال کنه.که معمولا این کار رو به صورت دستی و با ftp انجام میدن،اما این روش بصورت دستی و زمان بر هست.چه بهتر که این روش رو خودکار کنیم و اون هم چه بهتر که خودش از گیت بخونه و بروز کنه.

یکی از پنل های معروف هاستینگ سی پنل هست.گرچه از هر هاستینگ دیگه ای که از cron و ssh پشتیبانی میکنه هم برای این آموزش می تونید استفاده کنید.

خب برای این کار اول باید به ssh و cron هاست دسترسی داشته باشیم.اولی برای اجرای دستورات git و ساخت کلید دومی برای اجرای خودکار این دستورات.

آموزش آپدیت خودکار کد توسط ssh از git

ابتدا روی هاست سی پنل یک کلید با دستور زیر می سازیم،سوالات و فقط اینتر بزنید.به جای ایمیل هم ایمیلی که توی گیت ثبت کردید رو بدید:

ssh-keygen -t ed25519 -C "yourGitEmail@gmail.com"

خب این برای شما کلیدتون رو میسازه.الان باید کلید رو بدیم به گیت تا هاست ما رو بشناسه و بهش اجازه دسترسی بده.اما کلیدها در کدوم مسیر ساخته شدن؟وقتی که دستور بالا رو میزنید و تمام میشه در انتها مسیر ذخیره سازی رو میگه،پس دقت کنید، به این صورت:

Your identification has been saved in /home/username/.ssh/id_ed25519
Your public key has been saved in /home/username/.ssh/id_ed25519.pub

خب محتوای کلید که این دومی باشه ( public key ) رو با دستور زیر می گیریم :

cat /home/username/.ssh/id_ed25519.pub

خب اینجا باید بریم توی گیت و وارد حساب شده و به مسیر زیری بریم:

https://github.com/username/repo/settings/keys

به جای نام کاربری و ریپو مشخصات خودتون رو بزنید. یا وارد ریپوی خودتون بشید بعد از قسمت settings منویDeploy keys و بعد Add deploy key

اینجا یه عنوان می نویسیم. و در قسمت Key محتویات کلیدمون رو اضافه کرده و ذخیره می کنیم.

خب تا اینجا اتصال هاست به گیت انجام شده.حالا بریم یه دستور بزنیم که خودکار از مخزن گیت بفرسته روی هاست.

از سی پنل یه cronjobs جدید می سازیم با هر مدت زمانی که مد نظرتونه.

با دستور زیر مسیری که گیت نصبه رو پیدا می کنیم(اگر نبود باید نصب شه)؛

which git

دقت کنید در cron باید میسر دقیق دستورات داده شه تا کار کنه.برای همین مسیر دقیق گیت رو از دستور بالا گرفتیم،که خروجی چیزی شبیه به این میشه:

$ which git
/usr/local/cpanel/3rdparty/lib/path-bin/git

خب بریم توی پوشه ای که قراره کدها قرار بگیره:

cd /home/username/your-project

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

git clone git@github.com:username/your-project.git .

اگر پیام تایید key اومد اینتر و yes رو بزنید.اگر مخزن با موفقیت کلون شد همه چی درسته.

یادتون باشه اگر پروژه متعلقات composer داره دستور composer update هم بزنید.

خب مسیری که پروژه کلون شده رو بر میداریم تا توی cron استفاده کنیم،که میشه این:

/home/username/your-project

با توجه به مسیر بالا و مسیر گیت دستور ما میشه این:

cd /home/username/your-project && /usr/local/cpanel/3rdparty/lib/path-bin/git reset --hard HEAD && /usr/local/cpanel/3rdparty/lib/path-bin/git pull -q origin master 

این دستور رو توی cron وارد کنید و تمام!

راستی اگر پروژه شما لاراول هست با دستور زیر می تونید migrate هم خودکار کنید تا دیتابیس هم خودکار اکی شه:

cd /home/username/your-project && /usr/local/cpanel/3rdparty/lib/path-bin/git reset --hard HEAD && /usr/local/cpanel/3rdparty/lib/path-bin/git pull -q origin master && /home/username/your-project/artisan migrate  

اگر با خطای ssh: connect to host github.com port 22: Connection timed out’ error رو برو شدید از لینک زیر میتونید حلش کنید:

https://gist.github.com/Tamal/1cc77f88ef3e900aeae65f0e5e504794

The post اتصال گیت به سی پنل و آپدیت خودکار از گیت appeared first on وب دیزاین.

شاید برای شما هم پیش آمده باشد که به دلیل کمبود فضا در یک پارتیشن سیستم عامل نیاز به جابجایی محل ذخیره سازی دیتاهای دیتابیس MySQL/MariaDB داشته باشید.مثلا با خطایی مشابه خطای زیر:

[] DISKCRITICAL blocks ⛔: Mount Point “/” (): 46.8 GB/49.98 GB - 93.654388%

در این مطلب به صورت خلاصه و تیتر وار مراحل این جابجایی خواهد آم.
هدف انتقال از مسیر / به /home می باشد، سیستم عامل هم Centos و مدیر دیتابیس هم mariadb ، اما برای MySQL هم همین مراحل قابل استفاده است.

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

مرحله دوم:
متوقف کردن سرویس دیتابیس و یک تنظیم :

sudo systemctl stop mariadb

فایل mariadb.service را ادیت کرده(دستور: systemctl edit mariadb ) و مقدار زیر را تصحیح میکنیم:

[Service]
ProtectHome = true

==>
[Service]
ProtectHome = false

نکته : اگر از سی پنل استفاده می کنید سیستم بررسی سرویس ها را موقتا برای دیتابیس کنسل کنید تا دوباره آن را شروع به کار نکند:

whmapi1 configureservice service=mysql enabled=1 monitored=0

بعد از اتمام همه مراحل با دستور زیر سرویس را فعال کنید:

whmapi1 configureservice service=mysql enabled=1 monitored=1

مرحله سوم:
جابجایی دیتاها به مسیر جدید و تغییر نام پوشه قبلی(بعدا که مطمئن از انتقال اطلاعات شدید میتوانید پاک کنید):

mkdir /home/new_mysql_datadir
chown -R mysql:mysql /home/new_mysql_datadir
sudo rsync -av /var/lib/mysql /home/new_mysql_datadir
sudo mv /var/lib/mysql /var/lib/mysql.bak

مرحله چهارم:
ساخت سیمبلیک لینک مسیر اصلی به مسیر جدید جهت جلوگیری از اختلال در برنامه های وابسته:

ln -s /home/new_mysql_datadir/mysql /var/lib/mysql 

این دستور هم زده بشه:

sudo chcon -R systemu:objectr:mysqlddbt:s0 /home/new_mysql_datadir/mysql

مرحله پنجم:
شناساندن مسیر جدید به MySQL/MariaDB :
فایل /etc/my.cnf را ادیت کرده و مقدار datadir را در مکان مناسب طبق متن زیر اضافه می کنیم:

    [mysqld]
    datadir=/home/new_mysql_datadir/mysql

مرحله آخر:
شروع مجدد کار MySQL/MariaDB:

sudo systemctl start mariadb
sudo systemctl status mariadb

پاک کردن اطلاعات قبلی:

درصورتی که از صحت عملیات مطمئن بودید با دستور زیر میتونید اطلاعات قبلی رو پاک کنید که فضا ازاد شه:

rm -rf /var/lib/mysql.bak

The post جابجا کردن محل ذخیره سازی دیتابیس MYSQL/MariaDB appeared first on وب دیزاین.

خب چرا سرور های هتزنر؟ چون ما ایرانی ها به دلایلی زیاد از اونجا سرور داریم و میخریم.
چرا KVM ؟ چون تجربه بنده با این مورد بوده.

خب نقشه راه چیه:

نصب سیستم عامل بر روی سرور با هارد رید 0 ، با درخواست Rescue mode

نصب سیستم عامل بر روی سرور با درخواست Rescue mode ( دسترسی به شل شرور برای نصب سیستم عامل)
برای این کار بعد از دسترسی KVM و لاگین شدن به قسمت Rescue mode هتزنر دستور installimage رو بزنید و سیستم عامل دلخواهتون رو انتخاب کنید،بعد از انتخاب سیستم عامل یه فایل متنی براتون باز میشه که میتونید پارامترهای نصب رو مشخص کنید،مثلا هاست نیم رو مشخص کنید،رید بودن هاردها رو ،نحوه پارتیشن بندی و ….
نکته ای که اینجا هست اینه که پارتیشن بندی رو به این مدل انجام بدید:

PART swap swap 32G
PART / ext3 100G
PART /boot ext3 1024M
PART /data ext3 all

قسمت swap رو مقدار مناسبی بدید چرا که KVM اگر رم کم بیاره از این استفاده می کنه برای برخی کارها.
پارتیشن / رو هم مقدار مناسبی بدید چو فایل های ISO برای تمپلیت VPS ها اونجا(home) قرار میگیره.
اون all هم یعنی مابقی داده شه به /data
خب با این تنظیمات f10 رو بزنید و ذخیره و ..تا نصب سیستم عامل تمام شه.
نکته مهم:
بعد ازاتمام نصب حتما به فایل fstab مراجعه کرده و خط مربوط به اون /data رو کامنت کنید یا بردارید.

تنظیمات LVM

خب الان یه پارتیشن دارید که حجم مابقی دیسک رو داره که توی قسمت قبل /data بود.
فرض میکنیم اسم این پارتیشن md3 باشه ( با دستور lsblk میتونید بفهمید کدومه)
این رو اینجا un mount می کنیم تا تنظیمات هارد رو برای مجازی ساز اماده کنیم.
دستوراتی که باید استفاده شه:

fdisk /dev/md3
n
p
اینتر
اینتر
w

و بعد:

umount /data/
pvcreate /dev/md3p1
vgcreate vgvm /dev/md3p1

خب اینجا کار ما تمامه،یک ریبوت بدید .
میریم برای نصب مجازی ساز KVM و virtualizor که طبق این لینک میتونید اقدام کنید:
https://www.virtualizor.com/docs/install/install-kvm/

تنظیمات storage virtualizor

توی مرحله قبلی یه VG ساختیم به اسم vgvm که آدرس کاملش میشه

 /dev/vgvm

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

تنظیمات IP دریافتی از Hetzner در virtualizor

آی پی هایی که گرفتیم رو باید به virtualizor بدیم تا تو ساختن VPS ها ازش استفاده شه و تنظیمات شبکه ش رو هم انجام بده برامون.
برای این کار به منوی IP pools رفته و زیر منوی Create IP Pool رو میزنیم.
تو قسمت Server یکی از سرورها رو انتخاب کنید نه همشو،فقط یکی.
قسمت Gateway طبق مقدار داده شده(معمولا اولین ایپی توی رنج).
قسمت net mask هم طبق مقدار داده شده.
تو قسمت اولین آی پی و اخرین آی پی هم آی پی قابل استفاده رو زده و ذخیره میکنیم(منهای ایپی استفاده شده برای گتوی).
خود virtualizor تنظیمات پل شبکه رو انجام میده.
تیک Use NAT فراموش نشه.

خطای:
The viifbr0 is not started. Please run service virtnetwork start
اگر این خطا رو مشاهده کردید به تنظیمات اصلی virtualizor برید و network interface رو هم وارد کنید،برای دیدن اسم اینترفیس ها از دستور ifconfig میتونید استفاده کنید.
همچنین توی مسیر /etc/sysconfig/network-scripts/ اینترفیس رو بررسی کنید و از بودن گتوی مطمئن بشید.اگر نبود باید تنظیم شه(مقدار گتوی روبروی SCOPE=”peer توی فایل کانفیگش هست معمولا)

تنظیمات فایروال

اگر فایروال نصب می کنید این پورتها رو چک کنید باز باشه:

    22 (SSH)
    1798
    16509 (libvirt)
    5900 - 6100 (VNC consoles)
    49152 - 49216 (libvirt live migration) 
    4084,4085 (virtualizor)

فایروال CSF

اگر این فایروال رو دارین باید دسترسی نت وی پی اس ها رو باز کنید،برای این کار به مسیر زیر محتوای بعدی رو اضافه کنید و csf&lfd رو ری استارت کنید[منبع].
مسیر:

/etc/csf/csfpost.sh

محتوا:

#!/bin/sh 
/sbin/iptables -F FORWARD
/sbin/iptables -P FORWARD ACCEPT

/.تمام.

The post نصب KVM بر روی سرورهای Hetzner appeared first on وب دیزاین.

اگر از فایرفاکس و IDM در کنار هم استفاده می کنید حتما با پنجره ای شبیه به پنجره زیر برخورد کرده اید:

هشدار اعصاب خورد کنی هست نه؟ اینکه تو هر بار اجرا بهش بربخورین و باز ببندین اذیت می کنه!

مشکل از فایرفاکس است یا Internet Download Manager ؟

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

از خودتون می پرسین مگه من اقدام به دانلود این فایل می کنم که این پنجره سر و کله ش پیدا میشه؟ خیر! شما این کار رو نمی کنین اما فایرفاکس چرا.اما فایرفاکس هم داره کار طبیعی خودشو میکنه.این فایل متعلق به پلاگینی در فایرفاکسه که در اقدام به بررسی نسخه جدیدش جناب IDM هوشمند بازی در میاره و اون رو میگیره برای دانلود و اون پنجره ظاهر میشه.پس تا زمانی که این نسخه ش به روز نشه این داستان ادامه داره.

openh264 چیست؟

H.246 یه کدک هست برای فایل های ویدئویی ، این کدک در اقدامی توسط برنامه نویسان،بصورت متن باز هم منتشر شده که اون کلمه open اولش برای همین مقصوده. از اونجایی که تو مرورگرها گاهی نیاز میشه به ارتباط تصویری و کار با فایلهای ویدئویی این پلاگین به داخل فایرفاکس ، کروم ، اپرا ،اندروید و … راه پیدا کرده.

فایرفاکس از این پلاگین برای نمایش فایلهای ویدئویی استفاده نمی کنه اما برای کار در webRTC این رو مورد استفاده قرار داده.مسائلی در این پلاگین هست که اگر رفع بشه احتمالا فایرفاکس از این کدک برای نمایش فایلهای ویدئویی هم استفاده کنه.اما تا الان فقط در RTC ها مورد استفاده ش قرار میده.

webRTC چیست؟

بد نیست بدونید که webRTC یا web real time communication راهکاریه برای ارتباط های آنی و بلادرنگ عین چت که تصویریش هم شامل میشه.

با این راهکار دو مرورگر یا دو کلاینتی که این مورد رو دارن میتونن مستقیم بهم وصل شن و ارتباط بزنن.که پر استفاده ترینش همین ارتباط ویدئویی انلاینه.H.264 هم این وسط بعنوان کدک میتونه مورد استفاده قرار بگیره.

اما راه حل این مشکل چیست؟

خب اگر مشکل رو از فایرفاکس بدونیم و نیازی به webRTC نداشته باشیم میتونیم این پلاگین رو کلا غیرفعال کنیم.

از این مسیر: Tools > Add-ons >plugins و پلاگین OpenH264 Video Codec provided by Cisco Systems, Inc را غیرفعال کنید.

یا اینکه به روزش کنیم.برای بروزرسانی تو صفحه پلاگین ها روی ایکن چرخ دنده کلیک کنید و Check for updates رو بزنین تا پلاگین ها به روز بشن.

اما اگر مشکل رو از IDM بدونید میتونید کلا این url رو بلک لیستش کنید تا دیگه بهش ایراد نگیره.

برای اینکار به تنظیمات > نوع فایل > ویرایش لیست و بعد افزودن و این مقدار رو اضافه و اکی کنید:

http://*.openh264.org/*

The post شما هم مشکل دانلود خودکار openh264-win32 دارین؟ appeared first on وب دیزاین.

بوت استرپ چندین نمونه نوار پیشرفته را به ما ارائه می‌دهد. نوار پیش‌فرض در BootStrap به شکل زیر است.

<div class="progress">
     <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
       <span class="sr-only">70% Complete</span>
     </div>
</div>

نتیجه عکس زیر می باشد.

نکته: باید در نظر داشت که نوار پیشرفته در اکسپلورر 9 و ورژن های قبلی آن پشتیبانی نمی شود.

برای اینکه پیشرفت درصد کار خود را بر روی نوار بنویسد باید کلاسِ sr-only را حذف نمایید.

<p><div class="progress"><br>
   <div class="progress-bar" role="progressbar" aria-valuenow="70"<br>
     aria-valuemin="0" aria-valuemax="100" style="width:70%"><br>
      70%<br>
   </div><br>
</div></p>

نتیجه عکس زیر می باشد.

برای ایجاد انیمیشن بر روی نوارهای پیشرفت می‌توانید کلاس.active را اضافه کنید. در زیر یک نوار پیشرفت که به‌صورت انیمیشن درآمده است را مشاهده می‌کنید:

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
   aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
   40%
  </div>
</div>

نتیجه عکس زیر می باشد.

درباره CircularLoader.Js

CircularLoader.Js یک پلاگین جی کوئری با استفاده از HTML5 و جاوا اسکریپت ساخته‌شده و برای میله‌های پیشرفته‌های دایره‌ای که با درصد و یا بدون درصد مورداستفاده قرار می‌گیرد. این پلاگین کاملاً قابل تنظیم است و با تمام مرورگرهای سازگار با HTML5 کار می‌کند.

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

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

و در html به‌صورت زیر divProgress را باید صدا کرد و کد نویسی را انجام داد:

<html>
   <head></head>
   <body>
     <div id="divProgress"></div>
   <body/>
</html>

در قدم بعد باید تابع را در قسمت جی کوئری راه‌اندازی کنیم:

$("#divProgress").circularloader({
  progressPercent: 35 
});

تنها پارامتر اجباری تابع  circularloader، پارامتر تعیین‌کننده درصد پیشرفت یا “progressPercent” است، سایر پارامترها، اختیاری است که در صورت سفارشی‌سازی می‌توان از آن‌ها استفاده کرد.

یکسری پارامترها هستند که می‌توان استفاده کرد و ما آن‌ها را معرفی می‌کنید.

$("#divProgress").circularloader({
  backgroundColor: "#ffffff",
  fontColor: "#000000",
  fontSize: "40px",
  radius: 70,
  progressBarBackground: "#cdcdcd",
  progressBarColor: "#aaaaaa",
  progressBarWidth: 25,
  progressPercent: 0,
  progressValue:0,
  showText: true,
  title: "Any Title"
}

•  backgroundColor: رنگ پس‌زمینه (داخلی) نوار را مشخص می‌کند.
•  fontColor: رنگ فونت را مشخص می‌کند.
•  fontSize: اندازه فونت را مشخص می‌کند.
•  radius: میزان انحنای گوشه‌ها را مشخص می‌کند.
•  progressBarBackground: رنگ پس‌زمینه نوار پیشرفت را مشخص می‌کند.
•  progressBarColor: رنگ نوار پیشرفت را مشخص می‌کند.
•  progressPercent: در صد پیشرفت را مشخص می‌کند.
•  progressValue: درصورتی‌که بخواهیم به‌جای درصد پیشرفت مقدار پیشرفت را به‌وسیله یک عدد نمایش دهیم، عدد موردنظر را برای این پارامتر تنظیم می‌کنیم.
•  showText: نمایش یا عدم نمایش نوار پیشرفت را مشخص می‌کند.
•  title: نشان دادن عنوان هدر برای نوار پیشرفت.

The post نوار پیشرفته (Progress Bar) دایره‌ای appeared first on وب دیزاین.

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

ترتیب قرارگیری در سایزهای مختلف و درخواستی خود:

توییتر بوت استرپ برای سفارش سازی ستون‌بندی‌ها دو کلاسcol-*-push-x و  col-*-pull-x را برای راحتی کار ما طراحی کرده‌اند و می‌توان از آن استفاده کرد.

معرفی کلاس‌های push و pull

با استفاده از push و pull موقعیت‌های ستون‌های طراحی‌شده را تغییر می‌دهیم، کاملاً برعکس offset عمل می‌کنند. وقتی ستون را push می‌دهیم به موقعیت ستون‌های کنار خود اثری نمی‌گذارد مثلاً اگر دوتا ستون داشته باشیم اگر ستون اول دارای کلاس push باشد ستون دوم در همان مکان باقی می‌ماند و به سمت راست (در بوت استرپ rtl به سمت چپ) فشرده نمی‌شوند، offset ستون‌های کنار خود را به سمت راست هل می‌دهد؛ اما pull ستون را به سمت چپ می‌برد؛ و تأثیری بر روی ستون‌های کناری خود نمی‌گذارد.

• col-*-push-x: ستون را به تعداد  x  به سمت راست می‌کشد که مقدارش از 1 تا 12 می‌باشد. *از جایی که ستون‌ها به‌طورمعمول نمایش داده می‌شوند که شامل sm, md,lg یا xs.
• col-*-pull-x: ستون را به تعداد x به سمت چپ می‌کشد که مقدارش از 1 تا 12 می‌باشد. * از جایی که ستون‌ها به‌طورمعمول نمایش داده می‌شوند که شامل sm, md,lg یا xs.

با مثال زیر بهتر آشنا خواهید شد و نحوه استفاده کردن کلاس‌ها

<div class="row">
    <div class="col-sm-5 col-sm-push-5">Content B</div>
    <div class="col-sm-5 col-sm-pull-5">Content A</div>
    <div class="col-sm-2">Content C</div>
</div>

The post سفارشی کردن ستون‌های سایت با توییتر بوت استرپ appeared first on وب دیزاین.

فونت آیکون‌های SVG

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

بعد از دانلود کردن و ذخیره کردن باید از پوشه fonts، فونت‌ها رو که به چهار نوع فرمت می‌باشد را در پوشه فونت خود قرار بدهیم و در CSS لینک دهید تا فونت در سایت قرار بگیرد؛ مثلاً:

@font-face {
 font-family: 'icomoon';
 src: url('../font/icomoon.eot?b1ihj2');
 src: url('../font/icomoon.eot?b1ihj2#iefix') format('embedded-opentype'), url('../font/icomoon.ttf?b1ihj2') format('truetype'), url('../font/icomoon.woff?b1ihj2') format('woff'), url('../font/icomoon.svg?b1ihj2#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}

و برای جلوگیری از مسائل با افزونه‌های مرورگر که فونت‌ها را تغییر می‌دهند از کد زیر استفاده می‌بریم که در style.css می‌باشد و باید نام و کد فونت‌ها رو در CSS معرفی کنیم تا موقع صدا کردن در HTML بتواند آن‌ها را تشخیص بدهد و به‌درستی آن‌ها را در سایت بیاورد. برای مثال:

[class^="icon-"],
[class*=" icon-"] {
 font-family: 'icomoon' !important;
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-1:before {
 content: "\e900";
}

.icon-2:before {
 content: "\e901";
}

.icon-3:before {
 content: "\e902";
}

خب در HTML برای صدازدن این آیکون‌ها کافی است فقط اسم آن‌ها را صدا بزنیم و در CSS هم آن‌ها را تغییر سایز و رنگ و هاور بدهیم.

<i class=" icon-1"></i>

برای صدازدن آیکون‌های SVG می‌توان از بیشتر تگ‌های HTML استفاده برد ولی مرسوم آن‌ها تگ <i></i> می‌باشد.

فونت آیکون‌های Font Awesome(فونتْ اَوْسام)

یکی از بهترین و کامل‌ترین فونت آیکون رایگان می‌باشد که شامل زیباترین فونت‌ها می‌باشد. برای استفاده از این فونت آیکون کافی است آن را از سایت Font Awesome دانلود کنید و دو پوشه css و font را در روت سایت خود کپی نمایید.
حال کافی است در فایل html خود و در داخل تگ head, از تگ link برای اتصال فایل css ای که در پوشه css قرار دارد استفاده نمایید. به‌صورت زیر

<link href="css/font-awesome.min.css" rel="stylesheet">

حال به‌راحتی و با یک خط کد در هر جای سایت خود استفاده کنید و در CSS هم آن را تغییر دهید. باید در نظر داشته باشیم برای صدازدن این آیکون‌ها حتماً در کلاس خود باید fa را صدا بزنیم.

<i class="fa fa-camera-retro"></i>
<i class="fa fa-amazon"></i>
<i class="fa fa-play"></i>
<i class="fa fa-bars"></i>
<i class="fa fa-car"></i>
و ...

توجه: چون تمامی این عکس‌ها به‌صورت فونت می‌باشد، می‌توانید از خاصیت‌های font و color در css استفاده نموده و سایز و رنگ فونت را زیاد یا کم نمایید.

برای اینکه راحت‌تر بتوانید فونت موردنظر را پیدا کنید و از آن استفاده ببرید به این لینک بروید،تمام فونت‌ها بانام و کد می‌توان مورداستفاده قرارداد. می‌توان فونت را بر روی سیستم خود ذخیره کنید و از آیکون‌ها هم در سایر نرم‌افزارهای دیگر مانند فتوشاپ یا ایلاستاتور استفاده کرد (زیرا این وکتور های زیبا به‌صورت فونت هستند).

فونت آیکون‌های Glyphicons(گلیف آیکون)

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

<i class="glyphicon glyphicon-search"></i>

فونت آیکون‌های livicons(آیکون‌های زنده)

نسل جدید آیکون‌های سبک و برداری لایو آیکون‌ها هستند که برای سایت شما مورد می‌توان مورداستفاده قرار گرفت. این آیکون‌ها با فرمت SVG ساخته‌شده‌اند و توسط جاوا اسکریپت پشتیبانی می‌شوند. در مرورگرهای مدرن و هر دستگاهی قابل‌نمایش می‌باشند. نمونه این آیکون‌ها در سایت سازنده یا سایت اصلی livicon  هست. نسخه این آیکون‌ها باید خریداری شود تا بتوانید استفاده کنید که متأسفانه کاربران ایرانی به دلیل وجود محدودیت در دسترسی به درگاه‌های خارج از کشور به‌سختی می‌توان از این فونت‌ها بهره ببرند.
با فرض اینکه شما این آیکون‌ها را در اختیاردارید، برای استفاده از این آیکون‌ها شما می‌توانید فایل پیش‌فرض livicon.js استفاده کنید که شامل ۴۰۴ آیکون می‌شود که این کار توصیه نمی‌شود چون به‌اندازه‌ی تمام آیکون‌ها حجم فایل افزایش پیدا می‌کند. بهترین کار این است که آیکون‌های دلخواهتان رو انتخاب کنید و در پروژه تون به کار ببرید. در این صورت حجم کمتری در سایت شما بارگذاری می‌شود.
بسته‌ای که دریافت کردید بازکنید. پوشه‌ای به نام Customizer مشاهده می‌کنید، وارد این پوشه شوید و پوشه‌ی js رو بازکنید. از بین تمامی فایل‌های js موجود شما چهار فایل رو نیاز دارید.

•  jquery-1.9.1.min.js
•  raphael-min.js
•  livicons-1.2.min.js
•  json2.min.js

سپس هر 4 فایل را در مسیر خود در هاست یا فضا سایتتان متصل کنید و این آیکون‌های زیبا را در هر جای سایت خواستید صدا بزنید و از آن‌ها استفاده ببرید.

<i class="livicon" data-n="user-add" data-c="#000" data-hc="#ccc" ></i>

• class=”livicon”: این خصوصیت و مقدار همیشه ثابت هست.
• data-n: نام آیکونی هست که مدنظر شماست. این نام رو از همان صفحه customizerکپی کنید.
• data-c: این خاصیت رنگ آیکون رو مشخص می‌کند.
• data-hc: این خاصیت رنگ آیکون رو در زمان hoverمشخص می‌کند؛ یعنی زمانی که موس روی آیکون قرار می‌گیرد رنگ آیکون به رنگ انتخابی شما تغییر می‌کند.

این آیکون‌ها خاصیت‌های مختلی دارند که می‌توان آن‌ها را تغییر داد که شامل تکرار انیمیشن، تغییر رنگ انیمیشن، بازه زمانی اتفاق افتادن انیمیشن و… .

The post استفاده از فونت آیکون appeared first on وب دیزاین.

برای طراحی چنین صفحاتی می توان از پلاگین جی کوئری fullPage.js استفاده کرد که امکانات مناسبی برای این کار در اختیار ما می گذارد.

در ادامه همراه ما باشید

شروع به کار با fullPage.js

برای شروع کار با پلاگین fullPage.js ابتدا باید فایل‌های زیر را دانلود کرده و به صفحه وب خود اضافه کنید:

•  کتابخانه جی کوئری نسخه بالاتر از ۱٫۶ (jQuery > 1.6.0)
•  فایل jquery.fullpage.css
•  فایل jquery.fullpage.js و یا فایل فشرده آن (jquery.fullpage.min.js)

از اینجا می‌توانید دانلود کنید.

ایجاد بخش‌های تمام صفحه (Full-Width Sections)

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

<div id="fullpage">
 <div class="section">Some section</div>
 <div class="section">Some section</div>
 <div class="section">Some section</div>
 <div class="section">Some section</div>
</div>

در اینجا ما چهار بخش‌داریم اگر بخواهیم تعداد این بخش‌ها که همان صفحه‌های ما می‌باشند را بیشتر کنیم باید تعداد div را بیشتر کرد. به‌صورت پیش‌فرض اولین div فعال هست اگر بخواهید این‌که یک بخش دیگر از سایت فعال باشد کافی هست کلاس active رو نسبت بدید.

<div class="section active">Some section</div>

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

<div class="section">
 <div class="slide"> Slide 1 </div>
 <div class="slide"> Slide 2 </div>
 <div class="slide"> Slide 3 </div>
 <div class="slide"> Slide 4 </div>
</div>

می‌بینید که 4 اسلاید در این بخش قراردادم. حالا می‌توانید به هر طریقی بین این اسلایدها جابه‌جا شوید. با استفاده از کیبورد و یا قرار دادن دکمه و … .

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

<ul id="menu">
  <li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li>
  <li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
  <li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
  <li data-menuanchor="4thpage"><a href="#4thpage">Fourth slide</a></li>
</ul>

می‌بینید که در خاصیت href هر لینک و خاصیت data-menuanchor هر li، باید آدرس و نام قسمت مربوطه رو وارد کنیم. با این کار، با کلیک بر روی این لینک، به آن بخش منتقل میشیم. با تغییرات در css این li ها می‌توان تغییرات ایجاد کرد که اینجا بستگی به سلیقه شما دارد.

خب در اینجا ما هنوز پلاگین را فعال و معرفی نکردیم. برای این کار باید در تگ script نهایی کدهای زیر رو قرار بدیم:

$(document).ready(function() {
  $('#fullpage').fullpage({
 anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage'],
 menu: '#menu'
  });
});

برای مطالعه بیشتر به  این لینک مراجعه کنید.با تشکر

The post معرفی پلاگین جی کوئری fullPage.js appeared first on وب دیزاین.

یک کتابخانه جاوا اسکریپت به‌صورت شبکه‌ای می‌باشد. به این صورت کار می‌کند که عناصر را بر اساس فضای عمودی که دارند در موقعیت مناسب می‌چیند و تمام فضای خالی را پر می‌کند؛ که احتمالاً این حالت را در سراسر اینترنت مشاهده کردید.

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

نصب کتابخانه:

یکی از دو مورد زیر را دانلود کنید (نسخه min فقط فشرده‌شده است.):

• pkgd.min.js
• pkgd.js

و اگر این فایل‌ها رو دانلود نکردید مسئله‌ای نیست برای برقراری ارتباط و اتصال مانند زیر عمل کرد در غیر این صورت آدرس مستقیم این فایل‌ها که دانلود کردید را بدهید.

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

یا :

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>

یا :

<script src="/path/to/masonry.pkgd.min.js"></script>

خب اتصال.js با سایت شما امکان‌پذیر شد.

الآن در html خود شبکه‌بندی را صدا بزنیم مانند دستور زیر:

<div class="grid">
 <div class="grid-item">...</div>
 <div class="grid-item grid-item--width2">...</div>
 <div class="grid-item">...</div>
...
</div>

الآن به‌راحتی می‌توان برای سایت ستون‌بندی و گرید (Grid) بندی انجام داد و مدیریت روی آن‌ها داشته باشیم. حالا وقتش هست با کمک css با توجه به نیازمان اندازه عناصر را مدیریت کنیم.

.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }

باید تابع را راه‌اندازی کنیم:

$('.grid').masonry({
// options
 itemSelector: '.grid-item',
 columnWidth: 200
});

این ظاهری که می‌بینیم، استایل های پیش‌فرض هستند که شما می‌توانید  آن‌ها را تغییر دهید. برای این کار باید برای div که کلاس js-masonry دادیم، از خصوصیت data-masonry-options استفاده کنیم. ویژگی‌های موجود:

• itemSelector: با استفاده از این خصوصیت می‌توان به این ابزار گفت که کدام عناصر را می‌خواهید تغییر بدین. در اینجا باید عناصری که کلاس itemدارند را به آن  بدهیم. به‌صورت زیر:

<div class="js-masonry" data-masonry-options=' {"itemSelector": ".item"} '></div>

• isOriginLeft: با استفاده از این خاصیت می‌توان مشخص کنید که گرید بندی، از راست به چپ باشد یا از چپ به راست. اگر true قرار بدین، از چپ به راست خواهد بود.
• isOriginTop: با استفاده از این خاصیت می‌توان مشخص کنید که گرید بندی، از بالا به پایین باشد یا از پایین به بالا. اگر true قرار بدین، از بالا به پایین خواهد بود.
• gutter: با استفاده از این ویژگی می‌توان برای هر ستون حاشیه قرار بدین و فاصله رو بیشتر کنید.

gutter: 10

برای تنظیم فضا بین عنصرها از margin، css استفاده می‌کنیم:

.grid-item {
 margin-bottom: 10px;
}

• transitionDuration: مدت‌زمانی که عنصر تغییر مکان یا تغییر ظاهر می‌دهد، که در css پیش‌فرض transitionDuration: ‘0.4s’می‌باشد.

// fast transitions
transitionDuration: '0.2s'
// slow transitions
transitionDuration: '0.8s'
// no transitions
transitionDuration: 0

برای مثال نگاهی کنید:

<div class="js-masonry" data-masonry-options=' {"itemSelector": ".item", "isOriginLeft": true, "isOriginTop": true, "gutter": 110} '></div>

برای اطلاعات بیشتر و آگاهی‌های لطفاً اینجا کلیک کنید.

The post چیدمان آجری عنصرها (Masonry) appeared first on وب دیزاین.

ویژگی‌های زیر که باعث OWL Carousel شده منحصربه‌فرد باشد:

مهم نیست شما یک حرفه‌ای باشید یا مبتدی کار با این اسلاید بسیار آسان می‌باشد.

آموزش کار با OWL Carousel:

اولین قدم دانلود کردن کتابخانه OWL Carousel می‌باشد.که از اینجا دانلود کنید.

اگر هم نخواستید کتابخانه را دانلود کنید مشکلی به وجود نمی‌آید و شما می‌توانید آدرس‌دهی را از طریق سایت owl انجام دهید.

برای نصب اسلاید شو:

• دو فایل CSS را به HTML خود قبل از *.js اضافه کنید، توجه کنید که مورد دوم اختیاری است و به‌راحتی می‌توانید آن را ویرایش کنید.

<ink rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

• حال باید carousel.min.js را اضافه کنید:

<script src="owlcarousel/owl.carousel.min.js"></script>

• شما به  نشانه‌گذاری خاصی برای HTML ندارید کافی است <div class = “owl-carousel”> را صدا بزنید:

<!-- Set up your HTML -->
<div class="owl-carousel">
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
</div>

• برای آماده‌سازی و خواندن اسلاید باید با پلاگین خود ارتباط برقرار کنید پس در فایل جی کوئری خود کد زیر را وارد کنید:

$(document).ready(function(){
 $(".owl-carousel").owlCarousel();
});

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

1-گزینه‌ها:

• Item: تعداد اقلامی که می‌خواهید بر روی صفحه‌نمایش ببینید.

Type: Number

Default: 3

• Loop: حلقه بی‌نهایت.

Type: Boolean

Default: false

• touchDrag: کشیدن لمسی فعال‌شده است.

Type: Boolean

Default: true

• Autoplay: پخش خودکار.

Type: Boolean

Default: false

2-این نمونه‌ای از چگونگی ارائه HTML است. با گزینه‌های زیر می‌توانید تقریباً هر کلاس را به شیوه‌ای که می‌خواهید نحوه نمایش را تغییر دهید. گزینه‌ها:

• rtlClass: کلاس برای حالت راست به چپ.

Type: String

Default: owl-rtl

• dragClass: کلاس برای حالت کشیدن ماوس.

Type: String

Default: owl-drag

• responsiveClass: کلاس کمکی اختیاری.

Type: String|Boolean

Default: false

3-رویدادهای که توسط اسلاید قابل‌تغییر می‌باشد:

• owl.lazy: بارگذاری خاص عکس‌ها. (تنبل)

Type: attachable

Callback: onLoadLazy

• هنگامی‌که عکس‌ها کند (تنبل) بارگذاری می‌شوند.

Type: attachable

Callback: onLoadedLazy

• owl.autoplay: اجرای خودکار.

Type: triggerable

Parameter: [timeout, speed]

• owl.autoplay: توقف خودکار پخش.

Type: triggerable

خب این هم از آموزش این اسلایدشو زیبا پیشنهاد ما استفاده از این پلاگین زیبا می باشد.برای دیدن و آشنایی بیشتر وارد سایت خود OWL Carousel شوید.

The post معرفی پلاگین جی کوئری OWL Carousel appeared first on وب دیزاین.