فواصل » عارض

سمارت تكنولوجيز تعلن عن العارض الضوئي التفاعلي

هاوية — Tue, 17 Jan 2012 11:50:57 +0000

أعلنت اليوم «سمارت تكنولوجيز» (رمزها في بورصة ناسداك: SMT، وبورصة طوكيو: SMA)، الشركة العالمية الرائدة في تطوير الحلول التعاونية، عن إطلاق العارض الضوئي التفاعلي LightRaise أعلنت اليوم سمارت تكنولوجيز 40wi. ويمتاز العارض الضوئي الجديد المدعم بقلم وبإمكانيات الأسقاط القصير بقدرته على تحويل أي سطح إلى مساحة تفاعلية للتعلم. وكجزء من مجموعة الحلول التقنية الشاملة الخاصة بقطاع التعليم، يتضمن العارض الضوئيLightRaise 40wiبرمجيات التعليم التفاعلية سمارت نوتبوك التي يستخدمها المدرسون حول العالم لتقديم دروس تفاعلية لأكثر من 40 مليون طالب. وبإمكان المدرسين الذين يستخدمون العارض الضوئي LightRaise الاستفادة من إمكانيات موقع SMART Exchange لمشاركة وتحميل أكثر من 51 ألف مورد رقمي. كما يتوفر العارض بقلم تفاعلي قابل للشحن، وحامل للقلم، ومخرج USB، وكابل VGA، بالإضافة إلى حامل جداري سهل التركيب.

ويتيح العارض الضوئي الجديد للمدرسين خيار اضافة العنصر التفاعلي على الصفوف الدراسية، إذ بإمكان هذا الجهاز إصدار صور بقياس كبير يصل إلى 100 بوصة (245 سم) بشكل شاشة عريضة، ليكون بذلك حلاً مرناً يتناسب مع أي صف مدرسي أو اي مساحة تعاونية. وبتميزه بنسبة إسقاط قصيرة جداً، يعمل العارض الضوئي LightRaise على إزالة الظل والتوهج ليوفر صورة على أعلى مستويات من الجودة. كما يمكن للمدرسين والطلاب استخدام القلم التفاعلي للكتابة على التطبيقات والمحتويات الرقمية، وإضافة المزيد من عناصر التفاعل والتعاون داخل الصفوف المدرسية. وكجزء من حلول سمارت التعليمية، يتكامل العارض الضوئي LightRaise بسلاسله مع عدد من منتجات سمارت كنظام الاستجابة التفاعلية SMART Response، وكاميرا الوثائق من سمارت SMART Document Camera، ولوح سمارت اللاسلكيSMART Slate. وبالإضافة إلى ذلك، فإن العارض الضوئي LightRaise يتوفر مع برنامج الحماية الخاص بأجهزة العرض الضوئي Care Plus، وهو برنامج ضمان وخدمة لمدة ثلاثة سنوات يوفر الدعم السريع والموثوق للعملاء، ويؤكد على التزام سمارت بتوفير أفضل أجهزة العرض الضوئي وعلى أعلى المستويات.

وفي هذا الصدد، قالت ليندا توماس، نائبة رئيس قسم المنتجات لدى «سمارت تكنولوجيز»: “مع استمرار القيود والمحدودية التي تواجهها ميزانيات المدارس، يتطلع المدراء إلى أساليب جديدة وقليلة التكلفة لدمج منتجات التقنيات التفاعلية في الصفوف المدرسية. وبالاستفادة من العارض الضوئي التفاعلي LightRaise 40wi وبرمجيات سمارت نوتبوك، يمكن للمدرسين تبني منتجات التقنية واستخدامها في صفوفهم المدرسية والاستفادة من المجموعة الكبيرة من المحتويات الرقمية التفاعلية وخدمات الدعم التي توفرها سمارت للعملاء”.

الوظائف:

تكامل منتجات سمارت: يشحن العارض الضوئي الجديد مع برمجيات سمارت نوتبوك التعاونية كما يمتاز بقابلية التكامل مع مجموعة من حلول سمارت الخاصة بقطاع التعليم.

قلم تفاعلي وحامل للقلم: يشحن العارض الضوئي الجديد مع قلم تفاعلي قابل للشحن لكتابة سهلة على سطح العرض، كما يشحن مع حامل للقلم.

معدل إسقاط قصير جداً: يوفر العارض الضوئي نسبة اسقاط قصيرة تبلغ 0.3:1 بحيث تزيل الظلال والتوهج من الصورة بشكل كلي.

صوت مدمج: يتضمن العارض الجديد مكبر صوت بقدرة 10 وات، ومدخل ميكروفون.

تركيب سهل: يتناسب الجهاز مع مجموعة من المساحات التعليمية والأسطح لعرض الصور بأحجام وقياسات تصل إلى 100 بوصة (254 سم) كما يتوفر مع حامل جداري سهل التركيب.

برنامج الحماية الخاص بأجهزة العرض الضوئي Care Plus – يوفر هذا البرنامج خدمة استبدال على مدار الساعة ويوفر كافة التفاصيل حول أسعار أجهزة العرض الضوئي وعمليات ترقية مصباح الجهاز أو استبداله. للمزيد من المعلومات حول برنامج الحماية الخاص بأجهزة العرض الضوئي، يرجى زيارة: smarttech.com/projectorplus

درس عمل اسلايدرعارض الصور المتحركة slideslider

مدهش — Wed, 04 Jan 2012 22:47:36 +0000

هناك الكثير من تقنيات العرض في الجافا سكريبت، ولكن لاحظ هذا الموقع  McKinney وكيفية الحركه عليه بمنتهي السلاسه.
عارض الشرائح - (جي كويري سلايدر):
لمشاهده التنفيذ اضغط هنا

لنبدأ معا في عمل هذا السلايدر أولا علينا إضافة بعض الملامح الأساسيه وهي عملdiv لكل شريحه وتسميتها بإسمها كالتالي:
[html]



Slide 1


Slide 2


Slide 3


Slide 4


Slide 5


Slide 6



[/html]
قمنا بعمل الأن ستة شرائح والتي يمكن ملئها بأي محتوي نريده ولاان نضيف التالي في ملف css :
[html]
#slideshow {
    width: 900px;
    height: 500px;
    overflow: hidden;
    position: relative;
}

#slideshow-reel {
    width: 5400px;
    height: 450px;
    position: absolute;
    top: 0;
    left: 0;
}

#slideshow-reel .slide {
    width: 900px;
    height: 450px;
    float: left;
    background-color: gray;
}
[/html]
هنا، لقد حددنا أبعاد العرض، جنبا إلى جنب مع إخفاء الشرائح الأخرى في بكرة. لقد حددنا أيضا أبعاد البكرة : مع ست شرائح في 900 بكسل لكل منهما ، وحددنا الأبعاد لكافة الشرائح الفردية وقمت بتحريكهم الي اليسار لكي تملأ شاشه السلايدر.
الحركة الأساسية في عارض الصور:
والأن لنضيف بعض أكواد الجي كويري لإضافة تأشير الحركة علي عارض الصور
[html]
$(function() {
    function changeSlide( newSlide ) {
        // change the currSlide value
        currSlide = newSlide;

        // make sure the currSlide value is not too low or high
        if ( currSlide > maxSlide ) currSlide = 0;
        else if ( currSlide < 0 ) currSlide = maxSlide;

        // animate the slide reel
        $slideReel.animate({
            left : currSlide * -900
        }, 400, 'swing', function() {
            // set new timeout if active
            if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
        });
    }

    function nextSlide() {
        changeSlide( currSlide + 1 );
    }

    // define some variables / DOM references
    var activeSlideshow = true,
    currSlide = 0,
    slideTimeout,
    $slideshow = $('#slideshow'),
    $slideReel = $slideshow.find('#slideshow-reel'),
    maxSlide = $slideReel.children().length - 1;

    // start the animation
    slideTimeout = setTimeout(nextSlide, 1200);
});
[/html]
قمنا بعمل دالة changeSlide () ، التي تقوم بتغير الشريحه. هذه الدالة لعمل فهرس للشريحه بجوار المعرض،
ثانيا قمنا بعمل فحص للتأكد من أن قيمة الشريحه التاليه ليست عالية جدا أو منخفضة لتكون في العارض.
وقمنا ببناء دالة nextSlide () ، الذي يطلق ببساطة changeSlide () لعرض الشريحة التالية في البكرة. ثم قمنا بتحديد وقت العرض مع setTimeout ().
التحريك الي اليمين والي اليسار:
والأن نقوم بعمل أزرار التحريك الي اليمين والي اليسار وزر متابعة العرض
[html]


[/html]
وللتبسيط،لقد قمنا بإضافة علامة المتابعة إلى مصدر HTML.
لنقوم الأن بإضافة التأثيرات الخاصه بهذه اللينكات الداخليه لعرض السابق او التالي
[html]
#slideshow-prev, #slideshow-next {
    display: block;
    position: absolute;
    top: 190px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 28px 21px;
    border-color: transparent;
    outline: none;
}

#slideshow-prev:hover, #slideshow-next:hover {
    opacity: .5;
    filter: alpha(opacity=50);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

#slideshow-prev {
    left: 0;
    border-right-color: #fff;
}

#slideshow-next {
    right: 0;
    border-left-color: #fff;
}
[/html]
أخيرا، دعونا نبني ملف الجافا سكريبت لدينا:
[html]
$(function() {
    function changeSlide( newSlide ) {
        // cancel any timeout
        clearTimeout( slideTimeout );

        // change the currSlide value
        currSlide = newSlide;

        // make sure the currSlide value is not too low or high
        if ( currSlide > maxSlide ) currSlide = 0;
        else if ( currSlide < 0 ) currSlide = maxSlide;

        // animate the slide reel
        $slideReel.animate({
            left : currSlide * -900
        }, 400, 'swing', function() {
            // hide / show the arrows depending on which frame it's on
            if ( currSlide == 0 ) $slidePrevNav.hide();
            else $slidePrevNav.show();

            if ( currSlide == maxSlide ) $slideNextNav.hide();
            else $slideNexNav.show();

            // set new timeout if active
            if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
        });

        // animate the navigation indicator
        $activeNavItem.animate({
            left : currSlide * 150
        }, 400, 'swing');
    }

    function nextSlide() {
        changeSlide( currSlide + 1 );
    }

    // define some variables / DOM references
    var activeSlideshow = true,
    currSlide = 0,
    slideTimeout,
    $slideshow = $('#slideshow'),
    $slideReel = $slideshow.find('#slideshow-reel'),
    maxSlide = $slideReel.children().length - 1,
    $slidePrevNav = $slideshow.find('#slideshow-prev'),
    $slideNextNav = $slideshow.find('#slideshow-next');

    // set navigation click events

    // left arrow
    $slidePrevNav.click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( currSlide - 1 );
    });

    // right arrow
    $slideNextNav.click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( currSlide + 1 );
    });

    // start the animation
    slideTimeout = setTimeout(nextSlide, 1200);
});
[/html]
في هذه الدوال ، قمنا بعمل activeSlideshow إلى false ، مما يؤدي إلى تعطيل الحركة التلقائية للبكرة. وهذا يوفر تجربة أفضل للمستخدم من خلال السماح للمستخدم التحكم بالعرض يدويا. ثمقمنا بعمل تحريك الشريحة السابقة أو التالية باستخدام changeSlide (). ثم قمنا بعمل clearTimeout (). هذا يعمل جنبا إلى جنب مع القيمة activeSlideshow، أي إلغاء التكرار يتدلى من setTimeout.

ثم قمنا بتعريف بعض الرموز لإخفاء وإظهار التنقل من خلال السهم.
لتحريك عارض الصور من أسفل:
وهذا هو الكود الجي كويري
[html]
$(function() {
    function changeSlide( newSlide ) {
        // cancel any timeout
        clearTimeout( slideTimeout );

        // change the currSlide value
        currSlide = newSlide;

        // make sure the currSlide value is not too low or high
        if ( currSlide > maxSlide ) currSlide = 0;
        else if ( currSlide < 0 ) currSlide = maxSlide;

        // animate the slide reel
        $slideReel.animate({
            left : currSlide * -900
        }, 400, 'swing', function() {
            // hide / show the arrows depending on which frame it's on
            if ( currSlide == 0 ) $slidePrevNav.hide();
            else $slidePrevNav.show();

            if ( currSlide == maxSlide ) $slideNextNav.hide();
            else $slideNextNav.show();

            // set new timeout if active
            if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
        });

        // animate the navigation indicator
        $activeNavItem.animate({
            left : currSlide * 150
        }, 400, 'swing');
    }

    function nextSlide() {
        changeSlide( currSlide + 1 );
    }

    // define some variables / DOM references
    var activeSlideshow = true,
    currSlide = 0,
    slideTimeout,
    $slideshow = $('#slideshow'),
    $slideReel = $slideshow.find('#slideshow-reel'),
    maxSlide = $slideReel.children().length - 1,
    $slidePrevNav = $slideshow.find('#slideshow-prev'),
    $slideNextNav = $slideshow.find('#slideshow-next'),
    $activeNavItem = $slideshow.find('#active-nav-item');

    // set navigation click events

    // left arrow
    $slidePrevNav.click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( currSlide - 1 );
    });

    // right arrow
    $slideNextNav.click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( currSlide + 1 );
    });

    // main navigation
    $slideshow.find('#slideshow-nav a.nav-item').click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( $(this).index() );
    });

    // start the animation
    slideTimeout = setTimeout(nextSlide, 1200);
});
[/html]
أولا، لقد قمنا بتضمين الرسوم المتحركة الثانية في changeSlide ()، وهذه المرة لتحريك المؤشر النشط في الملاحة، ثم كررنا الخطوة السابقه والفرق الرئيسي هو أننا نريد أن نقله 150px فقط لكل شريحة.

ثم قمنا بعمل  تعطيل الحركة التلقائية، وتحديد activeSlideshow إلى false.، وأضفنا changeSlide ()،
والأن إكتملت الحركة الملاحية لدينا وأصبح عارض الصور جاهز لينول إعجاب الزوار