تالار گفتمان اسکریپت دات کام - javascript / jquery / ajax

نحوه طراحی یک رابط کاربر در فتوشاپ

Wed, 24 Jul 2019 23:33:58 +0100

نحوه طراحی یک رابط کاربر در فتوشاپ
لینک قابل نمایش نیست . لطفا ثبت نام کنید و یا وارد سایت شوید

ما بر روی ایجاد یک نوار لغزنده برای "فیلتر" کردن و یک دکمه تماس تمرکز خواهیم کرد. سعی خواهیم کرد که با استفاده از چند تن آبی با چند رنگ خاکستری، کنتراست رنگی را به دست آوریم.

همچنین با اضافه کردن جزئیات کوچک، کیفیت کلی و ظاهر رابط کاربری را بهبود می بخشیم. این آموزش برای طراحان در تمام سطوح مناسب است، مخصوصا برای مبتدیان و کاربران سطح متوسط با زمان تقریبی 20 تا 40 دقیقه طراحی را میتوانند اتمام کنند. شروع ایجاد این رابط کاربر با ایجاد یک سند جدید: 900px width؛ ارتفاع 500px

با استفاده از ابزار مربع گرد (U) یک مستطیل سفید و گرد ایجاد کنید.ارتفاع 310 پیکسل عرض و 160 پیکسل است. بعضی از سایه ها را به آن اعمال کنید، همانطور که در تصویر نشان داده شده است.

سایه داخلی سفید را اضافه کنید.
درخشش بیرونی ملایم و سایه کم، یک سایه زیبا در اطراف شکل ایجاد می کند.

stroke را به شکل اضافه کنید. یک رنگ خاکستری نازک (# b2b0b0). این مستطیل "پایه" خواهد بود که برای لایه های بعدی روی آن قرار می گیرد .

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

حالت Blend Mode را به: Multiply، Opacity تا 25٪، Distance to 1، Spread و Size را به 0 تغییر دهید. این لایه را کپی کنید و سپس 2 پیکسل حرکت دهید. آخرین لایه را یک بار دیگر کپی کنید و آن را نیز 2 پیکسل بالا ببرید. در حال حاضر شما یک "پشته" خوب از مستطیل های طراحی شده بر روی یک دیگر دارید.

وقت آن است که یک شکل جدید ایجاد کنیم و با رنگ خاکستری رنگ کنیم، دوباره با استفاده از ابزار مستطیل گرد (U)

این شکل پایه لغزان ما خواهد بود. برخی از شیوه های شیب گرادیان را همانطور که در شکل نشان داده شده اعمال کنید. من این رنگ نور مونو را انتخاب کرده ام چون کاملا با رنگ آبی و خاکستری متضاد است.

stroke را با رنگ کمی تیره تر اعمال کنید که عبارت است از: # c4b8b5
یک مربع ساده 12x12 پیکسل ایجاد کنید و آن را در نوار لغزنده قرار دهید.

برای موفقیت کمپین آنلاین چه باید کارد

Fri, 12 Jul 2019 21:56:16 +0100

برای موفقیت کمپین آنلاین چه باید کارد
لینک قابل نمایش نیست . لطفا ثبت نام کنید و یا وارد سایت شوید

لینک قابل نمایش نیست . لطفا ثبت نام کنید و یا وارد سایت شوید

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

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

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

بهینه‌سازی صفحه فرود:
صفحه فرود یکی از مهمترین المان‌های مهم تبلیغات کلیکی است که می‌تواند در موفقیت کمپین تعیین کننده باشد. در بررسی مطالعاتی ما، مشخص شده که حدود ۷۰% کمپین‌های PPC به خاطر ایرادات درون صفحه فرودشان شکست می‌خورند.
دانستن اینکه چگونه می‌شود صفحه فرود را برای دریافت نرخ تبدیل (Conversion Rate) بیشتر بهینه سازی کرد می‌تواند در ارزیابی و نتیجه نهایی کمپین شما تاثیر گذار باشد.

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

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

مقالات مرتبط
لینک قابل نمایش نیست . لطفا ثبت نام کنید و یا وارد سایت شوید
لینک قابل نمایش نیست . لطفا ثبت نام کنید و یا وارد سایت شوید
لینک قابل نمایش نیست . لطفا ثبت نام کنید و یا وارد سایت شوید
لینک قابل نمایش نیست . لطفا ثبت نام کنید و یا وارد سایت شوید
لینک قابل نمایش نیست . لطفا ثبت نام کنید و یا وارد سایت شوید
لینک قابل نمایش نیست . لطفا ثبت نام کنید و یا وارد سایت شوید

ساخت اسلایدشو

Tue, 15 Aug 2017 19:34:32 +0100

سلام
چطور میشه یک اسلایدشو مشابه این سایت ساخت ؟
به این صورت که روی اسلاید نوشته با افکت ظاهر بشه ؟
فوتر سایت رو هم توی قالب خودم میخام شبیه این سایت طراحی کنم اگر میشه راهنمایی کنید
لینک قابل نمایش نیست . لطفا ثبت نام کنید و یا وارد سایت شوید

تبدیل کد اچ تی ام ال به جاوا اسکریپت

Sat, 06 Aug 2016 11:00:07 +0100

سلام خدمت همه دوستان من برای نمایش بنر های سایتم از یه ای فریم استفاده می کنم اما حالا می خوام به جای ای فریم از جاوا اسکری\ت استفاده کنم لطفا بفرمایید چطوری؟اینم کد من :

کد:

گالری عکس

Tue, 26 Apr 2016 06:11:55 +0100

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

فیلتر کلمات در جی کوئری

Thu, 03 Mar 2016 10:09:55 +0000

سلام معضرت می خوام آیا کدی با جی کوئری هست که
با اون بتونم بعضی از کلمات رو که در تگ

قرار می گیرن رو فیلتر کرد
مثلا من در کد جی کوئری چند کلمه رو مشخص می کنم
که اون چند کلمه نباید در تگ

نمایش داده شه
و به جای آنها **** بایفتد
آیا همچین کدی هست ؟

کمک در مورد زوم تصویر

Fri, 05 Feb 2016 09:22:09 +0000

سلام
چجوری میشه مقدار data-zoom-image رو با کلیک روی هر عکس تغییر داد؟ من چندتا عکس کوچیک تو صفحه دارم که میخام با کلیک رو هرکدوم زومشو نشون بده ولی بازم برمیگرده همون عکس اول رو که تو دیتاروم نوشته شده رو نشون میده :(

zz.png (اندازه: 239/69 KB / تعداد دفعات دریافت: 2)

تغییر در کد jquery و تبدیل به جاوا اسکریپت

Sat, 31 Oct 2015 11:44:39 +0000

سلام
کسی می تونه این کدها رو به جاوا اسکریپت خالص تبدیل کنه تا نیازی به کتابخانه jquery نداشته باشه؟

کد: 

if ( typeof Object.create !== 'function' ) {

    Object.create = function( obj ) {

        function F() {}

        F.prototype = obj;

        return new F();

    };

}

(function( $, window, document, undefined ) {

    var ToolBar = {

        init: function( options, elem ) {

            var self = this;

            self.elem = elem;

            self.$elem = $( elem );

            self.options = $.extend( {}, $.fn.toolbar.options, options );

            self.metadata = self.$elem.data();

            self.overrideOptions();

            self.toolbar = $('')

                .addClass('tool-'+self.options.position)

                .addClass('toolbar-'+self.options.style)

                .append('')

                .append('')

                .appendTo('body')

                .css('opacity', 0)

                .hide();

            self.toolbar_arrow = self.toolbar.find('.arrow');

            self.initializeToolbar();

        },

        overrideOptions: function() {

            var self = this;

            $.each( self.options, function( $option ) {

                if (typeof(self.$elem.data('toolbar-'+$option)) != "undefined") {

                    self.options[$option] = self.$elem.data('toolbar-'+$option);

                }

            });

        },

        initializeToolbar: function() {

            var self = this;

            self.populateContent();

            self.setTrigger();

            self.toolbarWidth = self.toolbar.width();

        },

        setTrigger: function() {

            var self = this;

            if (self.options.event != 'click') {

                var moveTime;

                function decideTimeout () {

                    if (self.$elem.hasClass('pressed')) {

                        moveTime = setTimeout(function() {

                            self.hide();

                        }, 150);

                    } else {

                        clearTimeout(moveTime);

                    };

                };

                self.$elem.on({

                    mouseenter: function(event) {

                        if (self.$elem.hasClass('pressed')) {

                            clearTimeout(moveTime);

                        } else {

                            self.show();

                        }

                    }

                });

                self.$elem.parent().on({

                    mouseleave: function(event){ decideTimeout(); }

                });

                $('.tool-container').on({

                    mouseenter: function(event){ clearTimeout(moveTime); },

                    mouseleave: function(event){ decideTimeout(); }

                });

            }

            if (self.options.event == 'click') {

                self.$elem.on('click', function(event) {

                    event.preventDefault();

                    if(self.$elem.hasClass('pressed')) {

                        self.hide();

                    } else {

                        self.show();

                    }

                });

                if (self.options.hideOnClick) {

                    $('html').on("click.toolbar", function ( event ) {

                        if (event.target != self.elem &&

                            self.$elem.has(event.target).length === 0 &&

                            self.toolbar.has(event.target).length === 0 &&

                            self.toolbar.is(":visible")) {

                            self.hide();

                        }

                    });

                }

            }

            if (self.options.hover) {

                var moveTime;

                function decideTimeout () {

                    if (self.$elem.hasClass('pressed')) {

                        moveTime = setTimeout(function() {

                            self.hide();

                        }, 150);

                    } else {

                        clearTimeout(moveTime);

                    };

                };

                self.$elem.on({

                    mouseenter: function(event) {

                        if (self.$elem.hasClass('pressed')) {

                            clearTimeout(moveTime);

                        } else {

                            self.show();

                        }

                    }

                });

                self.$elem.parent().on({

                    mouseleave: function(event){ decideTimeout(); }

                });

                $('.tool-container').on({

                    mouseenter: function(event){ clearTimeout(moveTime); },

                    mouseleave: function(event){ decideTimeout(); }

                });

            }

            $(window).resize(function( event ) {

                event.stopPropagation();

                if ( self.toolbar.is(":visible") ) {

                    self.toolbarCss = self.getCoordinates(self.options.position, 20);

                    self.collisionDetection();

                    self.toolbar.css( self.toolbarCss );

                    self.toolbar_arrow.css( self.arrowCss );

                }

            });

        },

        populateContent: function() {

            var self = this;

            var location = self.toolbar.find('.tool-items');

            var content = $(self.options.content).clone( true ).find('a').addClass('tool-item');

            location.html(content);

            location.find('.tool-item').on('click', function(event) {

                event.preventDefault();

                self.$elem.trigger('toolbarItemClick', this);

            });

        },

        calculatePosition: function() {

            var self = this;

                self.arrowCss = {};

                self.toolbarCss = self.getCoordinates(self.options.position, self.options.adjustment);

                self.toolbarCss.position = 'absolute';

                self.toolbarCss.zIndex = self.options.zIndex;

                self.collisionDetection();

                self.toolbar.css(self.toolbarCss);

                self.toolbar_arrow.css(self.arrowCss);

        },

        getCoordinates: function( position, adjustment ) {

            var self = this;

            self.coordinates = self.$elem.offset();

            if (self.options.adjustment && self.options.adjustment[self.options.position]) {

                adjustment = self.options.adjustment[self.options.position] + adjustment;

            }

            switch(self.options.position) {

                case 'top':

                    return {

                        left: self.coordinates.left-(self.toolbar.width()/2)+(self.$elem.outerWidth()/2),

                        top: self.coordinates.top-self.$elem.outerHeight()-adjustment,

                        right: 'auto'

                    };

                case 'left':

                    return {

                        left: self.coordinates.left-(self.toolbar.width()/2)-(self.$elem.outerWidth()/2)-adjustment,

                        top: self.coordinates.top-(self.toolbar.height()/2)+(self.$elem.outerHeight()/2),

                        right: 'auto'

                    };

                case 'right':

                    return {

                        left: self.coordinates.left+(self.toolbar.width()/2)+(self.$elem.outerWidth()/2)+adjustment,

                        top: self.coordinates.top-(self.toolbar.height()/2)+(self.$elem.outerHeight()/2),

                        right: 'auto'

                    };

                case 'bottom':

                    return {

                        left: self.coordinates.left-(self.toolbar.width()/2)+(self.$elem.outerWidth()/2),

                        top: self.coordinates.top+self.$elem.outerHeight()+adjustment,

                        right: 'auto'

                    };

            }

        },

        collisionDetection: function() {

            var self = this;

            var edgeOffset = 20;

            if(self.options.position == 'top' || self.options.position == 'bottom') {

                self.arrowCss = {left: '50%', right: '50%'};

                if( self.toolbarCss.left < edgeOffset ) {

                    self.toolbarCss.left = edgeOffset;

                    self.arrowCss.left = self.$elem.offset().left + self.$elem.width()/2-(edgeOffset);

                }

                else if(($(window).width() - (self.toolbarCss.left + self.toolbarWidth)) < edgeOffset) {

                    self.toolbarCss.right = edgeOffset;

                    self.toolbarCss.left = 'auto';

                    self.arrowCss.left = 'auto';

                    self.arrowCss.right = ($(window).width()-self.$elem.offset().left)-(self.$elem.width()/2)-(edgeOffset)-5;

                }

            }

        },

        show: function() {

            var self = this;

            self.$elem.addClass('pressed');

            self.calculatePosition();

            self.toolbar.show().css({'opacity': 1}).addClass('animate-'+self.options.animation);

            self.$elem.trigger('toolbarShown');

        },

        hide: function() {

            var self = this;

            var animation = {'opacity': 0};

            self.$elem.removeClass('pressed');

            switch(self.options.position) {

                case 'top':

                    animation.top = '+=20';

                    break;

                case 'left':

                    animation.left = '+=20';

                    break;

                case 'right':

                    animation.left = '-=20';

                    break;

                case 'bottom':

                    animation.top = '-=20';

                    break;

            }

            self.toolbar.animate(animation, 200, function() {

                self.toolbar.hide();

            });

            self.$elem.trigger('toolbarHidden');

        },

        getToolbarElement: function () {

            return this.toolbar.find('.tool-items');

        }

    };

    $.fn.toolbar = function( options ) {

        if ($.isPlainObject( options )) {

            return this.each(function() {

                var toolbarObj = Object.create( ToolBar );

                toolbarObj.init( options, this );

                $(this).data('toolbarObj', toolbarObj);

            });

        } else if ( typeof options === 'string' && options.indexOf('_') !== 0 ) {

            var toolbarObj = $(this).data('toolbarObj');

            var method = toolbarObj[options];

            return method.apply(toolbarObj, $.makeArray(arguments).slice(1));

        }

    };

    $.fn.toolbar.options = {

        content: '#myContent',

        position: 'top',

        hideOnClick: false,

        zIndex: 120,

        hover: false,

        style: 'default',

        animation: 'standard',

        adjustment: 10

    };

}) ( jQuery, window, document );

مشکل در کار کردن با 2 فایل jquery

Sun, 04 Oct 2015 23:18:25 +0100

با سلام

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

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

- حالت اول:

وقتی اول فایل اصلی جی کوئری رو لینک میکنم و بعد فایل خودم رو نتیجه میشه این که چند تا از دکمه هام کار میکنن و چند تاشون هم نه.

- حالت دوم:
وقتی فایل خودم رو اول لینک میکنم و فایل اصلی جی کوئری رو دوم نتیجه برعکس حالت اول میشه یعنی چندتا دکمه ای که در حالت اول کار نمیکردن اینجا کار میکنن. و چند تا دکمه ای که در حالت اول کار میکردن اینجا کار نمیکنن.

در ضمن توی فایل خودم بجای علامت $ از عبارت jQuery هم استفاده کردم ولی نشد.
اون فایل خودم رو هم پیوست کردم

هر کاری میکنم درست نمیشه لطفا کمکم کنید خیلی ممنون یا علی

myjs.txt (اندازه: 2/57 KB / تعداد دفعات دریافت: 2)

مشکل در اعمال منوی چسبنده

Fri, 04 Sep 2015 12:43:11 +0100

سلام

من یک سایت درست کردم و طبق این مطالب لینک قابل نمایش نیست . لطفا ثبت نام کنید و یا وارد سایت شوید به منوی اون خاصیت استیکی رو دادم
اعمال شده .اسکرول که میزنم به ارتفاع دلخواهم که میرسه چسبنده میشه اما وقتی به بالای سایت برمیگردم هنوز چسبنده است و کلاس nav-fix اون از بین نمیره

راهنمایی بفرمایید!

سایت در حالت عادی ایکرول نخورده هنوز

وقتی که اسکرول می خوره

وقتی که به بالای صفحه برمیگرده

نمایی از کدها

اجرا نشدن jquery

Tue, 21 Jul 2015 06:55:38 +0100

سلام متاسفانه jquery سایت من روی هاست اجرا نمیشود در صورتیکه در حالت local بدون مشکل اجرا میشد
دوستان ممنون میشم راهنماییم کنید