وب‌سایت Archives - وب دیزاین

نوار پیشرفته (Progress Bar) دایره‌ای

مریم میرزایی — Fri, 01 Dec 2017 16:49:48 +0000

با گذر زمان و پیشرفت امکانات و ابزارهای که برای کاربران ساخته‌شده بیشترین مهم‌ترین نکته مدنظر طراحان راحتی انتقال اطلاعات برای کاربران خود بوده‌اند؛ مثلاً گاهی می‌خواهید در سایت خود خیلی زیبایی، آسان، قابل‌درک و سریع به مشتریان خود درصد کار و میزان پیشرفت پروژه را انتقال دهید. پس‌نیاز به یک آیتم دارید که درصد را بیان کنید که BootStrap برای شما کلاس بسیار ساده‌ای از نوار پیشرفته که به‌صورت افقی عمل می‌کند به نام progress-bar را دارا می‌باشد. برای زیبای و مدرن بودن نوار پیشرفته با کمک پلاگین CircularLoader.Js می‌توان نوار پیشرفته دایره‌ای را ساخت. در قدم اول ما با نوار پیشرفته BootStrap آشنا می‌شویم.

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


     
       70% Complete

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

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

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




   
     aria-valuemin="0" aria-valuemax="100" style="width:70%">

      70%

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

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

40%

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

درباره CircularLoader.Js

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

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

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

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

$("#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 وب دیزاین.

سفارشی کردن ستون‌های سایت با توییتر بوت استرپ

مریم میرزایی — Tue, 28 Nov 2017 00:32:09 +0000

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

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

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

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

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


    Content B
    Content A
    Content C

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

استفاده از فونت آیکون

مریم میرزایی — Fri, 24 Nov 2017 09:39:36 +0000

امروزه در تمام سایت‌ها، برنامه‌ها، اپلیکشین ها و … برای انتقال مفهوم و زیبایی از یکسری اشکال به‌صورت سمبولیکی استفاده می‌کنند که باعث جذابیت و راحتی بیشتر شده. ما در اینجا تصور داریم که شما برای سایت خود به دنبال یکسری آیکون هستید پس باید زیبا و کم‌حجم باشد و اگر در ذهنتان یکسری آیکون‌های با تصاویر شطرنجی می‌باشد، باید گفت شما احتمالاً از اصلاحات CSS استفاده می‌کنید.
یکی از کارهایی که می‌توانید در این خصوص انجام دهید استفاده از فونت آیکون بجای آیکون‌های تصویری می‌باشد که یکسری تصاویری به‌صورت وکتوری و در قالب فونت ارائه می‌شوند و طبیعتاً دارای ویژگی‌های خاصی ازجمله بارگذاری ساده و کم‌حجم، عدم محدودیت در سایز و … را دارا می‌باشد. با این کار سرعت بارگذاری صفحه سایت شما به مقدار قابل‌توجهی افزایش پیدا خواهد کرد و جایگزین نمودن فونت آیکون و حذف تصاویر حجم سایتتان نیز کاهش پیدا خواهد کرد.
معروف‌ترین آیکون‌های که می‌توان در سایت خود استفاده کنید آیکون‌های با فرمت SVG، فونت آیکون Font Awesome و… که ما در این مطلب، به آموزش این فونت آیکون خواهیم پرداخت. نکته‌ای که باید در نظر داشت این است که تعداد فونت آیکون‌های زیادی در سراسر اینترنت هرروزه معرفی می‌شود که با یادگیری Font Awesome, شما می‌توانید از آن‌ها هم استفاده نمایید زیرا بسیار شبیه به هم هستند.

فونت آیکون‌های 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 هم آن‌ها را تغییر سایز و رنگ و هاور بدهیم.

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

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

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

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






و ...

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

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

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

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

فونت آیکون‌های 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 فایل را در مسیر خود در هاست یا فضا سایتتان متصل کنید و این آیکون‌های زیبا را در هر جای سایت خواستید صدا بزنید و از آن‌ها استفاده ببرید.

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

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

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

معرفی پلاگین جی کوئری fullPage.js

مریم میرزایی — Mon, 20 Nov 2017 10:51:22 +0000

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

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

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

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

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

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

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

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

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


 Some section
 Some section
 Some section
 Some section

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

Some section

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


  Slide 1 
  Slide 2 
  Slide 3 
  Slide 4

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

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


  First slide
  Second slide
  Third slide
  Fourth slide

می‌بینید که در خاصیت 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 وب دیزاین.

چیدمان آجری عنصرها (Masonry)

مریم میرزایی — Thu, 16 Nov 2017 15:43:26 +0000

Masonry چیست؟

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

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

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

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

pkgd.min.js
pkgd.js

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

یا :

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

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


 ...
 ...
 ...
...

الآن به‌راحتی می‌توان برای سایت ستون‌بندی و گرید (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دارند را به آن بدهیم. به‌صورت زیر:

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

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

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

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

معرفی پلاگین جی کوئری OWL Carousel

مریم میرزایی — Sun, 12 Nov 2017 19:32:19 +0000

OWL Carousel یک اسلاید شو لمسی می‌باشد که برای طراحی‌های زیبا در سایتها مورداستفاده قرار می‌گیرد. یک اسلاید شو واکنش گرا دارای انیمیشن‌های روان و ازنظر حجم بسیار سبک می‌باشد. پلاگین جی کوئری owlcarousel ساخت اسلایدها رو برای ما خیلی آسان کرده.این پلاگین محبوب حی کوئری حتی نسخه وردپرسی هم دارد.

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

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

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

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

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

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

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

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

شما به نشانه‌گذاری خاصی برای HTML ندارید کافی است
را صدا بزنید:



  Your Content 
  Your Content 
  Your Content 
  Your Content 
  Your Content 
  Your Content 
  Your Content

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

$(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 وب دیزاین.

آشنایی با SVG

مریم میرزایی — Thu, 09 Nov 2017 07:20:54 +0000

SVG چیست؟

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

پشتیبانی مرورگرها

مرورگر chrome : نسخه 4.0
مرورگر FireFox : ورژن0
مرورگر internet Explorer : ورژن0
مرورگر Opera : نسخه 0
مرورگر safari : نسخه 3.2

رسم دایره در SVG

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

در زیر کد SVG دایره‌ی بالا را در قالب یک مثال مشاهده می‌کنید:

توضیحات کد بالا:

برای رسم دایره به کد SVG خود یک طول و عرض مشخصی می‌دهیم.
خصوصیات cx و cy به ترتیب، مختصات x و y از مرکز دایره را مشخص می‌کنند. درصورتی‌که cx و cy مشخص نشوند، مرکز دایره به مختصات (0,0) در نظر گرفته خواهد شد.
خصوصیت r، شعاع دایره را مشخص می‌کند.

اَشکال SVG

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

مستطیل

دایره

بیضی

خط

چندخطی

چندضلعی

مسیر

نکته‌ای باید در اینجا بیان کرد این است که می‌توان از عنصر path برای رسم یک مسیر و شکل خاص استفاده کرد:

برای ایجاد یک رسم در SVG، از دستورات خلاصه‌ی زیر استفاده می‌شود:

M = برو به یک نقطه

L = خط رسم کن تا این نقطه

H = خط افقی رسم کن تا این نقطه

V = خط عمودی رسم کن تا این نقطه

C = رسم منحنی تا این نقطه

S = رسم منحنی صاف تا این نقطه

Q = رسم منحنی درجه 2

T = رسم منحنی درجه 2 صاف

A = کمان بیضوی

Z = بستن رسم

در کد بالا یک‌چند ضلعی را رسم کردیم.

SVG تعداد زیادی خصوصیت را برای ایجاد شیوه‌های رسم مختلف، ارائه می‌دهد. ازجمله :

خصوصیت stroke درواقع رنگ یک خط یا متن یا کادر دور عناصر را مشخص می‌کند.
خصوصیت stroke-width ضخامت یک خط یا کادر دور عناصر را مشخص می‌کند.
خصوصیت stroke-linecap باعث می‌شود تا برای یک رسم بازشده، حالت ابتدا یا انتهای آن رسم را مشخص کنیم.
از خصوصیت stroke-dasharray برای ایجاد خط‌ها به‌صورت فاصله‌دار، استفاده می‌شود.

تمامی خصوصیات شیوه‌ی رسم می‌توانند به هر نوع خط، یا متن یا خطوط دور عناصری همچون دایره، اضافه شوند.

ایجاد عکس‌های SVG

عکس‌های SVG می‌توانند به‌وسیله‌ی هر ادیتور متنی ایجاد شوند؛ اما این راحت‌تر است که برای ایجاد عکس‌های SVG از یک نرم‌افزار ترسیم‌کننده استفاده کنیم.

قرار دادن تصاویر SVG در Html به کمک تگ

اگر تصویر SVG تون رو به‌عنوان یک فایل ذخیره کنید می‌توانید مستقیماً توسط تگ آن را در سایتتان قرار بدید. کافیه کد زیر رو در کدهای html سایتتان قرار بدید:

برای توضیحات بیشتر و آشنایی با نحوه ایجاد فونت های اختصاصی اینجا کلیک کنید.

The post آشنایی با SVG appeared first on وب دیزاین.

منوی افقی بوت استرپ – مخفی کردن عناصر هم‌پوشانی شده

مریم میرزایی — Mon, 23 Oct 2017 05:50:46 +0000

آیا تا حالا شده در طراحی سایت یک نوار منو داشته باشید که بر اساس نیاز اندازه منو کم یا زیاد شود و دست شمارا برای طراحی‌های خاص بر روی آن نوار منو کوتاه کنه؟! خب باید چه‌کاری کرد؟!
ما به معرفی یک منوی افقی بوت استرپ با جی کوئری که به‌صورت پویا اندازه آن را تنظیم می‌کند می‌پردازیم:
در یک نوار منو من عناصر لیست در حالت افقی به‌صورت زیر دارم:
گزینه اول / گزینه دوم / گزینه سوم / گزینه چهارم / بیشتر+
در صورت عادی تعداد عناصر منوی موردنیاز من زیاد می‌باشد. با استفاده از گزینه ” بیشتر+ ” منو را پویا کردم و با انتخاب کردن گزینه ” بیشتر+ ” به‌صورت عمودی بقیه عناصر به نمایش می‌آید.
در اینجا ما یک نوار منو داریم با عرض و طول مشخصی که اگر تعداد عنصرهای منو کم باشد و تا زمانی که از پهنا سرریز نکند گزینه ” بیشتر+ ” مخفی می‌باشد و اگر زمانی تعداد عناصر بیشتر شود یا پهنای منو کمتر شود و باعث شود یکسری عناصر مخفی‌شده گزینه بیشتر کلاس active را به خودش می‌گیرد و عناصر مخفی‌شده در کلاس menu را به کلاس more_menu انتقال داده (درصورتی‌که عناصر در کلاس menu فقط مخفی شدن).

دمو

HTML:

More
 
    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6

Css:

.menu {
    list-style-type: none;
    height: 35px;
    overflow: hidden;
}
.more_menu {
    display: none;
}
.more_menu.active {
    display: block;
}
.menu li {
    display: block;
    float: left;
    height: 35px;
    line-height: 35px;
    white-space: nowrap;
    padding: 0 10px;
}
.more {
    display: block;
    float: right;
    height: 35px;
    line-height: 35px;
    white-space: nowrap;
    padding: 0 10px;
}

jquery :

 $(document).on('ready', function () {
    function getHiddenItems() {
        var isOneLine = true;
        var topPosition = false;
        var invisibleItems = $('');
        $('.menu li').each(function () {
            var thisPosition = $(this).position();
            if (topPosition === false) {
                topPosition = thisPosition.top;
            } else if (thisPosition.top > topPosition) {
                invisibleItems.append($(this).clone());
                isOneLine = false;
            };
        });
        return isOneLine ? false : invisibleItems;
    };

    function checkMenu() {
        $('.more').hide();
        var hiddenItems = getHiddenItems();
        if (!hiddenItems) {

            $('.more_menu').html('');
        } else {
            $('.more').show();
            /* What items are not visible now? */
            hiddenItems = getHiddenItems();
            $('.more_menu').html('' + hiddenItems.html() + '');
        };
    };
    $('.more').on('click', function (e) {
        e.preventDefault();
        $('.more').toggleClass('more_menu_opened');
        $('.more_menu').toggleClass('active');
    });
    $(window).on('resize', checkMenu);
    checkMenu();
});

دمو

The post منوی افقی بوت استرپ – مخفی کردن عناصر هم‌پوشانی شده appeared first on وب دیزاین.

با سرعت وارد دنیایی مجازی شوید –قسمت 3

مریم میرزایی — Mon, 09 Oct 2017 10:03:46 +0000

خب در این آموزش میریم سروقت Firefox Developer Tools وارد قسمت Performance می‌شویم.
برای این کار Firefox را بازکنید و ابزار Performance tools را با روش زیر بیاورید:
1- فشار دادن همزمان دکمه‌های Shift + F5
2- راست کلیک در صفحه Firefox و انتخاب گزینه Inspect Element و تب Performance را انتخاب می‌کنید.
3- یا در نوار منو Firefox گزینه Developer از زیر منوی این گزینه Performance را بیاورید.

آشنایی با محیط ابزار Performance:

محیط Performance شامل قسمت‌های زیر می‌باشد:

1- نوارابزار (Toolbar)
2- نمای ضبط (Recordings pane)
3- نمای کلی ضبط (Recording overview)
4- نمای جزئیات ضبط (Details pane)

نوارابزار (Toolbar):

نوارابزار شامل دکمه‌های:
1- شروع و توقف یک ضبط (Recording)
2- بارگذاری (load) یک فایل ضبط‌شده ذخیره‌شده
3- دکمه پاک کردن پنل ضبط‌شده.
4- فیلتر کردن موارد یا مارکرهایی که در نمای آبشار نمایش داده می‌شوند
5- ابزار فعال جزئیات را تغییر می‌توان داد.
6- دسترسی به پنجره تنظیمات.

نمای ضبط (Recordings pane):

در این قسمت ضبط‌های (Recordings) که الآن انجام داده‌اید و یا بارگذاری کرده‌اید را به نمایش می‌گذارد. فایل‌های ضبط‌شده با کلیک بر روی گزینه save می‌توان آن فایل را ذخیره کرد و فایل ها با پسوند JSON ذخیره می‌شوند.

نمای کلی ضبط (Recording overview):

نمای کلی Record را که به نمایش می‌گذارد. این نما شامل دو قسمت است یکی نمای آبشاری و دیگری نمودار سرعت گراف‌ها. نمای آبشاری دارای رنگ‌های مختلفی می‌باشد که هر رنگ بیانگر یک رویداد می‌باشد.
یک الگوی که اغلب در نمای آبشار مشاهده می‌کنید چیزی شبیه به این است:

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

نمای جزئیات ضبط (Details pane):

که می‌تواند شامل سه قسمت زیر باشد:
1- Waterfall
2- Call Tree
3- Flame Chart

همچنان ادامه دارد… .

The post با سرعت وارد دنیایی مجازی شوید –قسمت 3 appeared first on وب دیزاین.

فایرفاکس دوست داشتنی و توسعه دهندگان وب

شاملو — Tue, 03 Oct 2017 06:11:28 +0000

بسم الله الرحمن الرحیم

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

آیا مرورگر می تواند کارهای توسعه وب را آسان تر کند؟

این سوال یک جواب بیشتر نداره و اون هم “بله،قطعا” هست.اما چگونه؟

به شخصه اگر توی محیط فایرفاکس برخی موارد رو تنظیم و یا نصب نکرده باشم انگار دستم بسته ست!به همین سادگی.

در ادامه بهترین افزودنی هایی که طبق تجربه در طی چندین سال کسب شده رو با شما عزیزان در میون میذارم.

افزونه تقریبا مورد نیاز همه! firebug ؟

با این افزونه دل و روده HTML/CSS/JS سایت دستتونه.میتونید همه جای سایت رو واکشی کنید.استایل دستی بدین.HTML ها رو در جا ویرایش کنید،تعداد درخواستهای ارسالی به سایت رو ببینین،خطاهای css/js رو متوجه بشین و کلی امکانات دیگه.

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

inspector برای زیر و رو کردن یه المنت خاص و پیدا کردن جد و آباد و استایل گرفته شده ش
network برای تِرَک کردن ارسالهای Ajax و تغییر و دستکاری هدرهای ارسالی،مشاهده پاسخ ها،فایلهای لود شده تو سایت و هدرهای دریافت شده،با این تب میتونین سرعت لود شدن سایت و اینکه چه چیزایی باعث میشه سایت دیر لود شه رو هم تشخیص بدین
responsive این امکان برای چک کردن نمایش صحیح سایت در سایز گوشی و تبلیت و …خیلی کاربرد داره
console برای اجرای دستی جاوااسکریپت و مشاهده خطاها لاگ های js

اما چندتا نکته در مورد فایرباگ

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

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

۱- امکان داخلی دیباگ توی خود فایرفاکس الان بسیار قوی شده و بصورت پیشفرض بدون نصب چیز اضافه ای در دسترس هست

۲-افزودنی قبلی فایرباگ دیگه به سبک قبلی توسعه داده نمیشه

راهنمای مهاجرت از فایرباگ به دیباگر داخلی فایرفاکس رو میتونید از لینک زیر مطالعه کنید:

https://developer.mozilla.org/en-US/docs/Tools/Migrating_from_Firebug

اما فایرباگ قبلی چه خواهد شد؟

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

کسی در مورد Web Developer صحبت کرد؟!

افزونه web developer فایرفاکس

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

کلی امکانات رایگان رو که کار توسعه دهنده های وب رو راحت کرده ،دم توسعه دهندش واقعا گرم.

اما این افزودنی توسعه دهنده وب چه امکاناتی داره؟

من به طور خلاصه چند مورد رو میگم:

میتونین بصورت آنی css/js/cookie رو غیرفعال کرده و سریع بعد فعال کنید تا تاثیرش رو بر روی سایت متوجه بشین.
بصورت زنده میتونین استایل های سایت رو ویرایش کنین
با یک کلیک کل فایلهای css/jss رو میتونین واکشی کنین،خیلی راحت
توی سایتتون با یک کلیک متوجه بشید که چه عکسهایی لود نشدن و نشون داده نمیشن
به راحتی تمام آی دی و کلاس های داده شده به المنتهای صفحه جاری رو براتون رو میکنه،حتی میتونه ID های تکراری رو هم تشخیص بده
یه امکان خوبش امکان خط کشه،عین grid تو فتوشاپ به شما تو تنظیم یا سایزبندی سایت کمک میکنه

و کلی امکانات دیگه که میتونه یه کتاب میشه.

چخبر از ColorZilla ؟

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

افزودنی های دیگه فایرفاکس؟

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

FireShot / دختر خوبیه،خیلی هم کارش درسته خدایی!برای اسکرین شات گرفتن از صفحاته ، گرچه بعضی وقتا اگر صفحه سایزش بالا باشه ریپ میزنه،اما کم پیش میاد که اونم تقصیر رمه نه این. (خبر خوب اینکه فایرفاکس تو نسخه 56 ،و به بعد خودش اسکرین شات هم میگیره و نیاز به افزودنی خاصی نیست. لینک )
HackBar / اینم پسر خوبیه،اسمشو که بیخیال شیم، خیلی تو وب کاراریی داره.از ارسال درخواستهای دستی post/get گرفته تا ساختن هَش های دم دستی و انکد و دیکد کردن url و و و ..

چرا فقط ۵ تا افزونه برای فایرفاکس دارم؟

مثلا موارد زیر چطور:

افزونه برای هویز؟ خیر!

افزونه برای الکسا؟ خیر!

افزونه برای نمایش تکنولوژی های وب؟ خیر!

و..

اما دلیل چیه؟

اینه که یک:سر فایرفاکس رو زیادی شلوغ نکنم دو:وقتی یه کاری با یه بوکمارکلت انجام میشه چرا افزونه؟هوم؟

تو این مدتِ استفاده بوک مارکلتهایی رو نوشتم که خیلی خیلی به کارم میان و بارها دارم ازشون استفاده می کنم،مثلا:

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

شما هم از این افزونه ها و این مدل بوکمارکلتها استفاده می کنین؟

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