Reveal.js ile Slider ve Sunumlar Oluşturun

Çoğu zaman bir slider veya slayt sunumu yapmamız gerektiğinde Powerpoint veya Prezi gibi yazılımlar kullanıyoruz, şu anda Html5, Jquery ve Css 3 teknolojisini kullanarak bu tip sunumları yapmamıza izin veren birçok çerçeve var.

Avantajı, herhangi bir tarayıcıda, herhangi bir işletim sisteminde görüntülenebilmesi ve hatta mobil cihazlar için uygulamalarda kullanılabilmesidir.

Reveal, Javascript'te geliştirilmiş, kaydırıcı ve sunum oluşturma işlevleri sağlayan bir çerçevedir. slaytları yönetmenizi ve değiştirmenizi sağlayan özellikler, PDF dışa aktarma, zamanı kontrol etme imkanı, her slaytta gezinme ve efektler.

Reveal ücretsiz bir kütüphanedir Ve programlayabilmemiz, veritabanlarına bağlanabilmemiz veya Html ve Javascript'i destekleyen herhangi bir uygulamaya dahil edebilmemiz büyük bir avantaja sahiptir, en popüler yazılımların yapamayacağı bir şey.

Reveal ile geliştirme yapmak kolaydır ve sadece Html ve Js bilmemiz yeterlidir, bir sunum oluşturmaya başlamak için resmi web sitesinden Reveal.js kütüphanesini indirmeliyiz.

Ardından, öğreticiyi başlatmak için zip dosyalarını açıyoruz. bir ile başlayacağız Reveal.js'yi test etmek için basit bir örnek.

Açtığımız dizinden css, js, plugins ve lib klasörlerini Example01 klasörümüze kopyalıyoruz. Bu klasörler, sunumumuzu oluşturmak için gerekli tüm kitaplıkları içerir.

Sonra iki resim ve metin içeren bir kaydırıcı oluşturacağız, burada otomatik olarak veya klavyeyle gezinebilirsiniz. Aşağıdaki gibi olacaktır:

Kaynak kodu aşağıdaki gibidir:

 Reveal.js Örnek 01
Spor araba


İnternet sitemizi ziyaret edin
DANIŞMA

Reveal çerçevesi bize css klasöründe bulabileceğimiz birkaç tema veya css tasarımı sağlar ve tema satırını değiştirerek tasarımı değiştirebiliriz.

Bej temasını Firefox'ta mobil cihaz emülatörü ile uyguluyoruz ve görselleştiriyoruz ve kütüphanenin uyarlanabilir bir tasarım yapmaktan sorumlu olduğunu görebiliyoruz.

Kaydırıcının çalışması Javascript koduyla sağlanır:

Kaydırıcının otomatik olarak hareket etmesini istiyorsak, autoSlide parametresi ile geçiş süresini milisaniye cinsinden belirteceğiz, kullanılmıyorsa klavye veya fare kullanılarak oklarla hareket ettirilmelidir.

Web geliştiricileri bu tür kitaplıkları gif.webp, flash ve diğer animasyon biçimlerini bir kenara koymak için kullanıyorlar, bu tür çerçeveler metin dizine eklenebilir olduğundan kaydırıcının seo için kullanılmasına bile izin veriyor. Ayrıca herhangi bir tarayıcıyı kullanarak bir pendrive veya mobil cihazdan sunumumuzu göstermek için hem çevrimiçi hem de çevrimdışı olarak kullanabiliriz.

Reveal.js çerçevesi, tek bir JavaScript dosyasından ve iki stil sayfası dosyasından oluşur. İlk stil sayfası, ifşa.css bazı yaygın stilleri tanımlarken, ikincisi standart bir temanın tasarımını içerir, ayrıca kendi sınıflarımızla üçüncü bir stil sayfası ekleyebiliriz.

Bu tema, metin, resim ve bağlantılar olduğu için sunumlarınızın önemli bölümlerinin görünümünü tanımlar.

Reveal.js ile birlikte CSS 3D veya WebGL gibi diğer kütüphaneleri kullanabiliriz.

NS Çerçeveyi ortaya çıkar Kullanıcı deneyimini geliştirmek için çeşitli eklenti ve yapılandırma parametrelerini kullanmanıza izin verir. Bizi en çok ilgilendiren konfigürasyon parametreleri şunlardır:

kontrollerBu parametre, slaytlarımızda gezinmek için yön oklarının gösterildiğini belirtir, herhangi bir şey belirtmezsek varsayılan olarak görünür. true veya false değerini alabilir.

ilerlemeSunum ilerledikçe bir ilerleme çubuğu görüntüler. true veya false değerini alabilir.

slaytNumarasıGeçerli slayt numarasını gösterir. true veya false değerini alabilir.

tuş takımıKlavye etkileşimini etkinleştirin veya devre dışı bırakın. true veya false değerini alabilir.

dokunmakvarsa, dokunmatik ekranların kullanımını etkinleştirir veya devre dışı bırakır. true veya false değerini alabilir.

döngüsona ulaştığında başa döndüğünü ve durmadan devam ettiğini, false koyarsak sona ulaştığında duracağını belirtir.

true veya false değerini alabilir.

otomatik kaydırmabir slayttan diğerine otomatik olarak geçmek için milisaniye cinsinden süredir.

geçişslaytlar arasında geçiş türü. Varsayılan, yok, soldurma, kaydırma, dışbükey, içbükey veya yakınlaştırma olarak ayarlanabilir.

Çok ilginç bir örnek, pratik yapmak için kullanılabilen ve ayrıca resmi Reveal.js sayfasından indirilebilen resmi demodur.

eklemek istersek Dikey kaydırıcı aşağıdaki gibi iç içe bölümler oluşturmalıyız:

 Dikey slayt 1 Dikey alt slayt 1.1 Dikey alt slayt 1.2 

Daha sonra, bir tuşa basıldığında gösterilen html'de listelenmiş parçalar gibi diğer özellikleri dahil edeceğimiz bir Örnek02 yapacağız, sunum ilerliyor

Sunum bilgisayar slaytları ile bir Hacking Kursu olacaktır.

Kaynak kodu aşağıdaki gibi olacaktır:

 Etik Hack Kursu
Defansif Bilgisayar Güvenliğini Öğrenin

Güvenlik Açığı Tespiti ve Kontrolü
Sızma Testi: Yöntemler.

Ağ Güvenliği Linux Sunucu Yönetimi Windows Sunucu Yönetimi / bölüm>

Parçalar, sunum ilerledikçe listedeki her bir öğenin gösterileceğini, parça sınıfı belirtilmezse listenin birer birer değil, bütünüyle gösterileceğini belirtir.

Ayrıca, belirli bir bölümdeki diğer slaytları göstermek için alt slaytlar olan dikey bölümleri de belirttik.

NS çerçeve Reveal.js HTML kullanarak sunum oluşturmak için en popüler seçeneklerden biridir, çünkü herhangi bir cihazda kullanılabilir ve herhangi bir tasarım veya programlama yazılımı gerektirmez.

Bu makalede bazı temel özelliklerine bakıyoruz, ancak daha pek çok özellik var.

Google, WebRTC öğreticisinde Tarayıcıdan ve Reveal.js'den Ses ve Görüntü İletişimi'nde gördüğümüz bir teknoloji olan WebRtc teknolojisini deniyor, böylece bir web kamerası aracılığıyla el hareketleri kullanılarak slayt hareketleri gerçekleştirilebilir. WebRtc aracılığıyla web kamerasını kalibre ederek ve elin havada basit bir hareketiyle slaydı değiştirebiliriz.

Google Chrome'un beta aşamasında olan Google projesini Gestures + Reveal.JS ile görebiliriz, burada teknolojiyi test eden bazı tanıtım videoları görebilirsiniz.

Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.