Salesforce HTML ve CSS Eğitimi

Eğitim Hakkında

Visualforce ve LWC'de HTML'den SLDS ve özel CSS ile markalamaya kadar kapsamlı akış

Salesforce ile HTML ve CSS Eğitimi, Salesforce platformunun web katmanında HTML ve CSS kullanımını öğretir. Katılımcılar Visualforce sayfalarında ve Lightning Web Component şablonlarında HTML yazmayı, Static Resource ile kaynak yönetimini öğrenir. Salesforce Lightning Design System (SLDS) ile tutarlı stil, özel CSS ve Shadow DOM, Experience Cloud markalaması işlenir. Program erişilebilirlik, responsive tasarım ve yayın süreciyle tamamlanır.

Süre ve Format

4 Gün. Her gün dört modül; Salesforce'ta HTML temellerinden SLDS, özel CSS ve yayına kadar uygulamalı ilerlenir.

Seviye

Orta Seviye — Salesforce platformunda SLDS, Visualforce ve LWC ile HTML ve CSS tasarımı

Öğrenme Metodu

Her teknik bir Salesforce sandbox'ında; Visualforce sayfası ve Lightning Web Component üzerinde adım adım uygulanarak gösterilir.

Neden Bu Eğitim?

🎨Tutarlı tasarım

SLDS ve tasarım token'larıyla Salesforce'un kurumsal görünümüyle uyumlu, tutarlı ve bakımı kolay arayüzler tasarlarsınız.

🧩Platforma özel

Visualforce, LWC ve Experience Cloud'un HTML ve CSS kurallarını öğrenerek platformun kendi sistemine uygun çözümler üretirsiniz.

🏷️Marka kimliği

Marka seti, özel CSS ve Shadow DOM bilgisiyle kurumun kimliğini Salesforce sayfalarına güvenle ve tutarlı biçimde yansıtırsınız.

Anahtar Konular

salesforce eğitimisalesforce html cssslds eğitimilightning web component eğitimivisualforce eğitimiexperience cloud markalamasalesforce arayüz geliştirmelightning design systemsalesforce css

“Salesforce'ta güzel arayüz, platformun tasarım sistemine saygıyla özgün marka kimliğini buluşturmaktan geçer.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve ortam

1

HTML ve CSS

Temel HTML etiketleri, seçiciler ve kutu modeli bilgisi stil çalışması için gereklidir.

2

Salesforce temeli

Salesforce arayüzü, nesneler ve kayıt kavramlarına aşinalık eğitimden verim için faydalıdır.

3

Geliştirici erişimi

Bir developer veya sandbox Salesforce ortamına erişim pratik örnekler için gereklidir.

4

Tarayıcı araçları

Tarayıcı geliştirici araçlarıyla öğe ve stil denetimi örneklerde sıkça kullanılır.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı Salesforce UI katmanlarını ve HTML'in nerede yazıldığını kavrar, Visualforce ve LWC şablonunda HTML üretir, kaynak yönetir.

Modül 1

Salesforce UI Katmanları

Classic, Lightning Experience ve Experience Cloud farkı
Visualforce ve Lightning Web Component yaklaşımları
Sunucu taraflı render ve istemci taraflı render
Salesforce'ta HTML'in nerede ve nasıl yazıldığı
Geliştirici Konsolu ve VS Code kurulumu
Sandbox ortamında güvenli geliştirme akışı

Modül 2

Visualforce ile HTML

apex:page etiketi ve Visualforce sayfa yapısı
Standart HTML etiketlerinin Visualforce'ta kullanımı
apex:outputText ile veri gösterimi
Merge field ve ifade söz dizimi kullanımı
docType özniteliği ile HTML5 çıktısı belirleme
showHeader ve sidebar ile sayfa düzeni kontrolü

Modül 3

Static Resource ile Dosya Yönetimi

Static Resource olarak CSS ve görsel yükleme
Zip arşiviyle çoklu dosyanın barındırılması
URLFOR ve dolar Resource ile kaynağa erişim
Önbellek kontrolü ve genel/özel erişim ayarı
Harici CSS dosyasının sayfaya bağlanması
Görsel ve font kaynaklarının yönetimi

Modül 4

Lightning Web Component'ta HTML

LWC şablonunda template etiketi ve yapı
Veri bağlama için süslü parantez söz dizimi
if:true ve for:each yönlendirmelerinin kullanımı
Bileşen HTML'inin Shadow DOM içinde izolasyonu
Standart HTML öğeleri ve platform kısıtlamaları
Bileşenler arası slot ile içerik aktarımı

Günün hedefiKatılımcı SLDS yardımcı sınıflarını ve tasarım token'larını kullanarak ızgara, bileşen ve responsive düzenleri tutarlı biçimde kurar.

Modül 1

Salesforce Lightning Design System

SLDS'in amacı ve tasarım ilkeleri
SLDS yardımcı sınıflarının adlandırma yapısı
slds-grid ve slds-col ile ızgara düzeni
slds-m- ve slds-p- boşluk yardımcı sınıfları
Tasarım token'ları ve tutarlı görünüm
SLDS sürüm ve bileşen dokümantasyonu

Modül 2

SLDS Bileşen Stilleri

slds-button ile düğme varyantları
slds-card ile kart düzeninin kurulması
slds-badge ve slds-pill etiket bileşenleri
slds-grid ile hizalama ve kolon oranları
SLDS ikon ve görsel öğelerinin kullanımı
Form öğeleri için SLDS stil sınıfları

Modül 3

Özel CSS ve SLDS Uyumu

LWC bileşenine özel CSS dosyası ekleme
Shadow DOM'un stil kapsamına etkisi
CSS custom property ile tema değişkenleri
SLDS token'larını özel stille birleştirme
host seçici ile bileşen kökünü hedefleme
SLDS üzerine güvenli özelleştirme ilkeleri

Modül 4

Responsive Davranış

SLDS ızgara sistemiyle responsive düzen
slds-size ve slds-large-size kesme noktaları
Mobil ve masaüstü görünüm uyarlaması
Esnek kolon davranışı ve satır sarma
Görsel ve içeriğin ekrana uyumu
Salesforce mobil uygulamasında görünüm

Günün hedefiKatılımcı Visualforce sayfa stilini yönetir, Experience Cloud markalaması yapar, özel bileşen tasarlar ve erişilebilirlik ilkelerini uygular.

Modül 1

Visualforce Sayfa Stili

Visualforce'ta inline ve harici CSS kullanımı
standardStylesheets ile varsayılan stil kontrolü
apex:stylesheet ile stil kaynağı bağlama
Çakışan Salesforce stilleriyle başa çıkma
Özel sayfa düzeni ve markalama uygulaması
PDF render için stil davranışı

Modül 2

Experience Cloud Markalama

Experience Builder ile tema düzenleme
Marka seti, renk ve font ayarları
CSS geçersiz kılma ile özelleştirme
Head Markup ile özel stil ekleme
Bileşen görünümünün özelleştirilmesi
Kurumsal marka kimliğinin uygulanması

Modül 3

Özel Bileşen Tasarımı

LWC ile özel kart ve liste bileşeni
HTML yapısı ve erişilebilir işaretleme
CSS ile düzen ve görsel hiyerarşi
Durum ve etkileşim stillerinin tanımı
Yeniden kullanılabilir bileşen tasarımı
Tasarım tutarlılığı için ortak stil

Modül 4

Erişilebilirlik ve İyi Uygulama

ARIA öznitelikleri ve anlamlı işaretleme
Klavye erişimi ve odak yönetimi
Renk kontrastı ve okunabilirlik denetimi
SLDS erişilebilirlik desenlerinin kullanımı
Ekran okuyucu uyumlu bileşen tasarımı
Erişilebilirlik denetim araçları

Günün hedefiKatılımcı uçtan uca bir bileşen geliştirir, ortak tema kurar, farklı cihazlarda test eder ve Change Set ile ortama taşımayı uygular.

Modül 1

Uçtan Uca Bileşen Projesi

Gereksinim analizi ve tasarım planı
Bileşen HTML iskeletinin kurulması
SLDS ve özel CSS ile stillendirme
Veri bağlama ve dinamik içerik gösterimi
Responsive davranışın test edilmesi
Bileşenin sayfaya yerleştirilmesi

Modül 2

Tema ve Tutarlılık

Ortak tasarım token seti oluşturma
Renk ve tipografi ölçeğinin tanımı
Bileşenler arası görsel tutarlılık
Marka kılavuzunun bileşene uygulanması
Yeniden kullanılabilir stil desenleri
Tema bakımının sürdürülebilirliği

Modül 3

Test ve Hata Ayıklama

Tarayıcı geliştirici araçlarıyla inceleme
Shadow DOM'da stil hatalarını bulma
Farklı cihazlarda görünüm testi
SLDS sürüm uyumunun kontrol edilmesi
Performans ve render sorunları
Erişilebilirlik ve kontrast denetimi

Modül 4

Yayın ve Dağıtım

Change Set ile hedef ortama taşıma
Static Resource ve bileşen dağıtımı
Sandbox'tan üretim ortamına geçiş
Sürüm yönetimi ve geri alma adımları
Yayın sonrası doğrulama adımları
Bakım ve düzenli güncelleme süreci

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Platform katmanları

Salesforce'ta Visualforce, LWC ve Experience Cloud katmanlarını ve HTML'in nerede yazıldığını kavrarsınız.

✅

Visualforce HTML

Visualforce sayfalarında standart HTML, merge field ve Static Resource ile CSS ve görsel yönetimini uygularsınız.

✅

LWC şablonu

Lightning Web Component şablonunda HTML yazar, veri bağlar ve Shadow DOM izolasyonunun stile etkisini anlarsınız.

✅

SLDS kullanımı

SLDS yardımcı sınıfları ve tasarım token'larıyla ızgara, bileşen ve tutarlı kurumsal görünüm kurarsınız.

✅

Özel CSS

SLDS üzerine özel CSS ve custom property ile güvenli, Shadow DOM uyumlu özelleştirmeler yaparsınız.

✅

Marka kimliği

Experience Cloud marka seti ve CSS geçersiz kılma ile kurumun kimliğini Salesforce sayfalarına yansıtırsınız.

✅

Erişilebilirlik

ARIA, klavye erişimi ve renk kontrastıyla erişilebilir ve ekran okuyucu uyumlu bileşenler tasarlarsınız.

✅

Yayın süreci

Change Set ile sandbox'tan üretime taşıma, sürüm yönetimi ve yayın sonrası doğrulamayı uygularsınız.

Kimler İçin Uygundur?

Salesforce platformunda arayüz geliştiren yöneticiler
markalı sayfa
bileşen tasarlamak isteyen Salesforce geliştiricileri ve Experience Cloud sitelerini özelleştiren ekipler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Salesforce platformunda arayüz geliştiren yöneticiler, markalı sayfa ve bileşen tasarlamak isteyen Salesforce geliştiricileri ve Experience Cloud sitelerini özelleştiren ekipler için uygundur. Temel HTML, CSS ve Salesforce bilgisi beklenir.

SLDS kullanmak zorunda mıyım?

Zorunlu değil ancak önerilir. SLDS, Salesforce'un kurumsal görünümüyle tutarlı ve erişilebilir bileşenler kurmanızı sağlar. Eğitimde SLDS yardımcı sınıfları ve token'larını özel CSS ile nasıl birleştireceğiniz uygulamalı gösterilir.

Shadow DOM stilleri nasıl etkiler?

Lightning Web Component'lar Shadow DOM kullanır; bu, bileşenin stillerini dış sayfadan izole eder. Sayfadaki stiller bileşenin içine, bileşenin stilleri de dışarıya kolayca sızmaz. Eğitimde bu izolasyonla nasıl doğru çalışılacağı örneklerle anlatılır.

Eğitimin süresi ve formatı nedir?

Eğitim dört gün sürer ve her gün dört modülden oluşur. Salesforce'ta HTML temellerinden SLDS, özel CSS ve yayına kadar ilerlenir. Yüz yüze veya online yapılabilir ve içerik kurumun Salesforce ortamına ve projelerine göre uyarlanabilir.

Eğitim sonunda sertifika veriliyor mu?

Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika işlenen SLDS ve CSS konularını ve geliştirilen örnek bileşeni belgeler; kurumsal gruplara özel uyarlama yapılabilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika

SALESFORCE İLE HTML VE CSS EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Salesforce UI Katmanları

Visualforce ile HTML

Static Resource ile Dosya Yönetimi

Lightning Web Component'ta HTML

Salesforce Lightning Design System

SLDS Bileşen Stilleri

Özel CSS ve SLDS Uyumu

Responsive Davranış

Visualforce Sayfa Stili

Experience Cloud Markalama

Özel Bileşen Tasarımı

Erişilebilirlik ve İyi Uygulama

Uçtan Uca Bileşen Projesi

Tema ve Tutarlılık

Test ve Hata Ayıklama

Yayın ve Dağıtım

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Web Apps with web2py: Working with Prebuilt Bootstrap Templates Eğitimi

Web Development Fundamentals - HTML and CSS Eğitimi

Web Development with HTML, CSS, and JavaScript Eğitimi

Web Fundamentals: Web Development with HTML Eğitimi

Web Geliştiriciler için Bootstrap Eğitimi

Web Programming in Go: HTML Forms & ResponseWriter in Go Eğitimi