Web slaytları ile HTML sunumları nasıl yapılır

Bir dünyada fikirlerimizi internette göster giderek daha gerekli hale geldi ve araçların çeşitliliğinin bizi şaşırtıcı sunumlar oluşturmaya yönlendirdiği, çoğu durumda bazı medyalarla uyumsuz hale geldiği, şüphesiz ki, HTML sunumları bu alanda evrensel alternatif olmaya devam edecekler.

Ancak, güzel HTML sunumları oluşturmanın uzun zaman alabileceği ve biraz ileri düzeyde HTML, CSS ve bazı durumlarda JavaScript bilgisi gerektirdiği kimsenin sırrı değildir. Bu sorunlardan mükemmel bir araç ortaya çıkıyor: web kaydırmaları.

Web kaydırmaları nedir?

Buna bir şekilde açık kaynaklı bir "çerçeve" demektir. Jose Luis Antunezbize izin veren HTML sunumları oluştur çabukça ve kolayca. Araç, kendi sunumlarınızı yapmanız için gerekli temellere sahiptir, aynı şekilde demo sunumlarından birini alıp dakikalar içinde beğeninize göre özelleştirebilirsiniz.

Bu araçla yaptığım HTML sunumları etkileyici bir estetiğe sahip olacak. Bu aracın çok temel HTML ve CSS bilgisi gerektirdiğini belirtmek gerekir, bu nedenle yalnızca içeriğe odaklanıp sunuyu nasıl hazırladıklarına çok az odaklanmaları gereken her tür kullanıcı için idealdir.

Web slaytları nasıl indirilir?

Web slaytlarını indirmek için, favori dizinden aşağıdaki komutu uygulamanız yeterlidir:

wget https://github.com/jlantunez/webslides/archive/master.zip

Resmi depoyu şununla da klonlayabilirsiniz:

git clone https://github.com/jlantunez/webslides.git

Proje klasörünün içinde, kendi HTML sunumlarınızı kolayca oluşturmaya başlamak için gerekli js, css ve demoları alacaksınız.

Web kaydırmaları nasıl kullanılır?

Webslides'in en büyük avantajı kullanım kolaylığıdır, bu araç çeşitli amaçlarla sunum oluşturmayı gerçekten kolaylaştırır ve demo serisi sunum oluşturma sürecini çok yüksek bir oranda hızlandırır.

Web slaytlarını indirdiğimizde ne elde ederiz?

Web slaytlarını indirirken, demolar ve resimler (cihazlar ve logolar) içeren çeşitli klasörlere erişiriz.

• Css klasörü sunumlarımızın stillerini saklayacaktır
• Gerekli javascripts, sihrin çoğunun yapıldığı temel webslide.js dahil olmak üzere js klasöründe saklanacaktır.
• Demoların resimleri ve html dosyaları sırasıyla resim ve demo klasörlerine kaydedilecektir.

webslides/
├── index.html
├── css/
│   ├── base.css
│   └── colors.css
│   └── svg-icons.css (optional)
├── js/
│   ├── webslides.js
│   └── svg-icons.js (optional)
└── demos/
└── images/

Web slaytları ile HTML sunuları oluşturma

Aşağıda bahsettiğimiz web kaydırmalarını kullanmanın 2 temel avantajı vardır:

• Kod temiz ve ölçeklenebilir. Ayrıca, en popüler isimlendirmelerin kullanımıyla sezgisel işaretlemeyi de içerir. Sınıf kullanmaya veya yuvalanmayı aşırı kullanmaya gerek yoktur.
• Cada <section> #webslides'de bir slaydı temsil eder. Yani sayfalandırma son derece basittir.

Slayt 1  Slayt 1

Aynı şekilde dikey bir stil ekleyerek dikey slaytlar yapabiliriz

Websides CSS'sini oluşturan sınıflar

• Tipografi: .text-iniş, .text-data, .text-intro ...
• Arka Plan Renkleri: .bg-birincil, .bg-apple, .bg-mavi ...
• Arka Plan Resimleri: .background, .background-center-bottom…
• Kartlar: .card-50, .card-40 ...
• Esnek bloklar: .flexblock.clients, .flexblock.metrics ...

Web slaytlarına genişletme

webslides, yeni stiller ve işlevler eklememize olanak tanır, örneğin aşağıdaki kaynaklardan bazılarını ekleyebiliriz:

• Unsplash
• canlandırmak.css
• Partiküller.js
• pt

Web slaytları ile yapılan HTML sunum demoları

Web slaytları ile yapılan bir dizi HTML sunum demosunu görebilirsiniz. burada. Aynı şekilde, çerçeveyi indirdiğinizde bu demoların her birinin kodlamasına erişebilirsiniz.

Bu, hızlı ve harika sonuçlarla HTML sunumları oluşturmamızı sağlayacak bir araçtır, ancak aynı zamanda içeriğe odaklanmamıza ve daha önce hayal etmediğimiz sonuçlara ulaşmamıza yardımcı olacaktır.