WEB TASARIM UZMANLIĞI EĞİTİM İÇERİĞİ
Modül 1: HTML5
HTML5 ile profesyonel düzeyde web siteleri oluşturabilir ve hazırladığınız projenizi CSS ile daha ilgi çekici hale getirebilirsiniz. Kurumsal web sitesi, portfolio siteleri, kişisel web sitesi gibi bir çok alanda iddialı ve profesyonel tasarımlar hazırlayabilirsiniz.
Dersler
- Introduction / Giriş
- Understanding & using HTML / HTML’i anlama ve kullanma
- Coding / Kodlama
- The Structure of a Webpage / Bir web sayfasının yapısı
- Header Tags / Başlık Etiketleri
- HTML Comment / HTML Yorum
- Paragraph Tags / Paragraf Etiketleri
- Formatting Text / Metin Düzenlemek
- Images / Görseller
- HTML Line Breaks & Rules / HTML Satır Sonları & Kuralları
- Fonts / Yazı Tipleri
- Block Level Elements / Blok Düzeyi Öğeler
- Inline Elements / Satır içi Öğeler
- Hyperlinks / Köprüler
- List Tags / Liste Etiketleri
- Tables / Tablolar
- Semantic HTML5 Elements / Anlamsal HTML5 Öğeleri
- IFrame / IFrame
- Multimedia / Multimedya
- HTML Forms / HTML Formları
- DOCTYPE
- HTML Entities / HTML Varlıkları
- Head Section & Metadata / Head Bölümü ve Metadata
- Scripts / Scriptler
- DOM Hierarchy / DOM Hierachy
- Complete webpage / Tam Web Sayfası
- Setting Up FTP / FTP Kurulumu
- Firefox Verisyonları
- Setting Up a Free Hosting / Ücretsiz bir Hosting Kurulumu
- Project / Proje
Modül 2: CSS3
HTML5 ve CSS ile profesyonel düzeyde web siteleri oluşturabilir ve hazırladığınız projenizi CSS3 ile daha ilgi çekici hale getirebilirsiniz. Kurumsal web sitesi, portfolio siteleri, kişisel web sitesi gibi bir çok alanda iddialı ve profesyonel tasarımlar hazırlayabilirsiniz.
Dersler
- Introduction to CSS3 / CSS3’e Giriş
- Understanding & using CSS3 / CSS3’ü anlama ve kullanma
- Syntax / Sözdizimi
- Inline CSS / Satı içi CSS
- Internal CSS / Dahili CSS
- Classes / Sınıflar
- IDs / ID’ler
- Divisions / Bölümler
- Spans / Span’ler
- Color / Renk
- Floating /
- Positioning / Pozisyonlama
- Margins / Kenar Boşlukları
- Padding
- Text Properties / Metin Özellikleri
- Aligning Text / Metin Hizalama
- Links / Linkler
- Backgrounds / Arka Planlar
- Borders / Kenarlıklar
- Lists / Listeler
- Width and Height Properties / Genişlik ve Yükseklik Özellikleri
- Rotate & Resize / Döndürme & Yeniden Boyutlandırma
- Classification / Sınıflandırma
- External CSS / Harici CSS
- Advanced Selector / İleri Seçiciler
- Pseudo Classes / Pseudo Sınıfları
- Gradients & Shadows / Gradyenler ve Gölgeler
- Transformations & Animations / Dönüşümler & Animasyonlar
- Layout & Calculations / Düzen & Hesaplamalar
- Project / Proje
Modül 3: JavaScript
JavaScript, yaygın olarak web tarayıcılarında kullanılmakta olan dinamik bir script dilidir. JavaScript ile etkileşimli ve dinamik web siteleri oluşturmak mümkündür. JavaScript dilini öğrenerek tasarladığınız web sitesini dinamik hale getirebilir, istemci taraflı çalışan ve sayfayı hareketlendirecek objeler eklemek için kod yazabilirsiniz.
Dersler
- Introduction to JavaScript / JavaScript’e Giriş
- Basics of JavaScript / JavaScript’in Temelleri
- Internal JavaScript / Dahili JavaScript
- Accessing Elements / Öğelere Erişme
- Types & Objects / Tipler ve Objeler
- Variables / Değişkenler
- Arrays / Diziler
- Conditional Statements / Koşullu İfadeler
- Loops / Döngüler
- Functions / Fonksiyonlar
- DOM (Document Object Model)
- Events & Listeners / Olaylar ve Dinleyiciler
- Manipulating Content with JavaScript / JavaScript ile İçeriği Değiştirme
- Manipulating Styles with JavaScript / JavaScript ile Stilleri Değiştirme
- Debugging JavaScript / JavaScript’te Hata Ayıklama
- Application of JavaScript / JavaScript’in Uygulanması
- External JavaScript / Harici JavaScript
- Modules / Modüller
- JavaScript Libraries / JavaScript Kütüphaneleri
- Project / Proje
Modül 4: jQuery
jQuery, kod yazma işlemlerini minimuma indirerek kısa zamanda daha efektif, hızlı ve daha çok işi yapmamızı sağlayan bir JavaScript kütüphanesidir. Bu teknoloji ile animasyonlar, slaytlar, foto galerileri, tab menüler gibi göz alıcı tasarımlar yapmak oldukça kolaydır.
Dersler
- Introduction to jQuery / jQuery’ye Giriş
- Basics of jQuery / jQuery’nin Temelleri
- Using jQuery in Webpages / Web sayfalarında jQuery Kullanma
- Detecting Events / Olayları Farketmek
- Manipulating Content with jQuery / jQuery ile İçeriği Değiştirme
- Manipulating Styles with jQuery / JQuery ile Stilleri Değiştirme
- Fading Content / İçeriği Soldurma
- Animating Content / İçeriği Hareketlendirme
- AJAX
- Regular Expressions / Düzenli İfadeler
- Form Validation / Form Doğrulama
- Introduction to jQuery UI / jQuery UI’a Giriş
- Draggables & Resizables / Sürüklenebilirler & Boyutlandırılabilirler
- Droppables / Silinebilirler
- Accordion & Sortables / Akordiyon & Sıralanabilirler
- Project / Proje
Modül 5: Bootstrap 4
Bootstrap ile ekstra bir ayar gerektirmeden web sitelerinizi; cep telefonu, tablet, laptop, masaüstü bilgisayar ekranlarına uyumlu (responsive) hale getirebilir, kullanıcılara daha iyi bir deneyim yaşatabilirsiniz. Bootstrap açık kaynak kodlu ve ücretsiz olması nedeni ile kolaylıkla elde edilip web uygulamaları içerisine entegre edilebilmektedir.
Dersler
- Introduction to Boostrap 4 / Boostrap 4’e Giriş
- Basics of Boostrap 4/ Boostrap 4’ün Temelleri
- Responsive Design with Bootstrap / Bootstrap ile Responsive Tasarım
- The Grid System / Izgara Sistemi
- Introducing Navbars / Gezinti Çubuğu Tanıtımı
- Forms & Tables / Formlar ve Tablolar
- Bootstrap Components / Bootstrap Bileşenleri
- Modals, Popovers & Tooltips
- ScrollSpy
- Free Bootstrap Themes / Ücretsiz Boostrap Temaları
- Project / Proje
Modül 6: Localhost Çalışma Ortamı Hazırlanması
Bilgisayarımıza kurulan ekstra programların sayesinde, bilgisayarımızı bir sunucu gibi kullanmamızı sağladığımız işleme Localhost denir. Eğitimin bu modülünde uygulamalı olarak Localhost kurulumu yapmayı öğrenecek ve Localhost’ta çalışarak işlemler yapmayı öğreneceksiniz.
Dersler
- XAMPP Kurulumu, Localhost Nedir ve Dizin Oluşturma
- Hazırlanan Web Site Projesinin Online Yayına Alınması
- Compress Tekniği İle Web Sayfasını Hızlandırma
- FTP Bağlantısı, Veri Transferi ve Web Sitesini Test Etme, Site Yedekleme ve Taşıma
Modül 7: Adobe XD Destekli UI ve UX Deneyimine Giriş
Hızla gelişen internet sektörü büyüdükçe farklı uzmanlık alanları ortaya çıkmakta. Bu alanların başında User Interface (UI) ve User Experience (UX) yer almaktadır. UX ve UI sayesinde projeniz içerisinde gezinen kullanıcılara eksiksiz ve benzersiz bir deneyim yaşatmak mümkün.
Dersler
- UX ve UI Nedir?
- Kullanıcı Algısı
- Kullanılabilirlik
- UX, Kullanıcı Gözünden Site Tasarımı
- Adobe XD ile UI & UX
- Mantıksal Akışlar Taslakları, Wireframe Çizmek ve Adobe XD Araçlarının Kullanımı
- Mobil Uygulama Arayüzü Tasarlamak ve Prototip Oluşturmak
Modül 8: Adobe Photoshop CC
Adobe Photoshop öğreneceğiniz bu derste, çalışmalarınızı piksel tabanlı platformda yapmayı öğreneceksiniz. Photoshop web araçlarını ayrıntılı olarak kullanacağınız bu eğitimde, layerlar ile çalışmayı ve layer efektlerini de detaylı bir şekilde öğreneceksiniz. Ardından yapılan bu çalışmalar üzerinde çeşitli efektler vermeyi öğreneceksiniz. Sıfırdan web sitesi arayüz tasarımı oluşturduktan sonra, tasarımları nasıl responsive (duyarlı) hale getirmeniz gerektiğini ve kullanıcı odaklı web site tasarımının nasıl yapılması gerektiğini öğreneceksiniz.
Dersler
- Introduction to Adobe Photoshop CC / Adobe Photoshop CC’ye Giriş
- Basics of Adobe Photoshop CC / Adobe Photoshop CC Temelleri
- Color Management / Renk Yönetimi
- Artboards
- Wireframes
- Imagery & Stock Photos
- Custom Graphics
- Alignment Tools
- Symmetry, proper spacing and white space
- Layer Styles & Panel
- Contrast
- Eraser, Gradient & Paint Bucket
- The Brush Tool & Layer Masks
- The Magic Wand & Quick Selection Tool
- Pen Tool
- Shapes and Selections
- Typography / Tipografi
- Blending modes
- Main Menu
- Layout, Content, Header & Footer
- Hero Area
- Buttons
- Clipping Mask
- Smart Objects
- Adobe Generator
- Layer Comps
- Glyphs
- Responsive Web Design / Responsive Web Tasarımı
- Import & Export / İçe ve Dışa Aktarma
Modül 9: Adobe Illustrator CC
Adobe Illustrator vektörel çalışmalarınızda ve ilüstrasyon çalışmalarınızda iyi çözüm sunabilen, dünya genelinde kendini kanıtlamış vektörel bir çizim programıdır. Bu eğitimde programın kullanımı için gereken araçları öğrendikten sonra çeşitli efektler ile çalışmalarınızı daha tasarımsal güzellikte yapmayı öğreneceksiniz. Illustrator Programı ile; çok yönlü çizim araçları ile farklı web objeleri yaratmayı öğrenirken, aynı zamanda hayal gücünüzün sınırlarını zorlayacaksınız.
Dersler
- Introduction to Adobe Illustrator CC / Adobe Illustrator CC’ye Giriş
- Basics of Adobe Illustrator CC / Adobe Illustrator CC Temelleri
- Artboard / Çalışma Yüzeyi
- Navigation / Gezinti
- Working with Vectors / Vektörlerle Çalışma
- Properties Panel / Özellikler Paneli
- Creating Basic Forms / Basit Formlar Oluşturma
- Creating Basic Documents / Basit Belgeler Oluşturma
- Toolbar Fundamentals / Araç Çubuğu Temelleri
- Working with Objects / Nesnelerle Çalışma
- Appearance of Objects / Nesnelerin Görünümü
- Drawing / Çizim
- Coloring / Renklendirme
- Brushes / Fırçalar
- Images / Görseller
- Typography / Tipografi
- Understanding Logos Basics / Logo Temellerini Anlama
- Color Physhology / Renk Psikolojisi
- Refine Logo Ideas / Logo Fikirlerini İyileştirme
- Developing Sketches / Skeç Geliştirme
- Work Area / Çalışma Alanı
- Qualities of Effective Logo Design / Etkin Logo Tasarımının Nitelikleri
- Logo Design Principles / Logo Tasarım Prensipleri
- Advanced Techniques / İleri Teknikler
- Export and Integration / Dışa Aktarma ve Entegrasyon
Modül 10: Adobe Dreamweaver CC
Dreamweaver bir HTML Editörüdür. Bu editör bize görsel bir çalışma ortam sunar, yaptığımız her projeyi arka planda HTML’e çevrilir ve web sayfası görünümü ile sayfaları oluşturmamızı sağlar. Eğitimin bu bölümünde, Dreamweaver kullanmayı öğrenmekle beraber görsel ve kod editöründe uygulamalı çalışarak sıfırdan web site tasarımı yapmayı öğreneceksiniz.
Dersler
- Introduction to Adobe Dreamweaver CC / Adobe Dreamweaver CC’ye Giriş
- Basics of Adobe Dreamweaver CC / Adobe Dreamweaver CC Temelleri
- Creating a New Website in Dreamweaver / Dreamweaver’da Yeni bir Web sitesi Oluşturma
- Preview Website / Web sitesi Önizleme
- Moving Tags Around in Dreamweaver / Dreamweaer’da Etiketleri Dolaştırma
- Create & Edit CSS / CSS Oluşturma & Düzenleme
- Container Using / Container Kullanımı
- Responsive Websites / Responsive Web siteleri
- Make a website change for mobile cell phones & tablets / Telefon ve tablette değişen Web sitesi yapımı
- Test Dreamweaver website on a mobile phone or tablet / Dreamweaver web sitesini mobil veya tablette test etme
- Mobile Navigation Menu using JQuery / JQuery kullanarak Mobil Navigation Menu Yapma
- Adding Content / İçerik Ekleme
- Using HTML5 with Dreamweaver / HTML5 ile Dreamweaver Kullanımı
- Templates in Dreamweaver / Dreamweaver’da Şablonlar
- Responsive Content / Responsive İçerik
- Upload a website to the internet hosting via Dreamweaver / Dreamweaver kullanarak web sitesini internet hostinge yükleme
Bu modülü tamamladıktan sonra şunları yapabilirsiniz:
- Dreamweaver’da şablonları etkin olarak kullanabilme,
- Web sitesinin mobil, tablet ve masaüstü sürümlerini oluşturabilme,
- Burger menüyle kendi özel duyarlı navigasyonun menünüzü oluşturabilme,
- Web sitenizi yayınlama,
- Tasarımlarınızda güzel web yazı tipleri kullanma,
- Illustrator’dan nasıl bir tasarım içe aktaracağınızı bilme ve profesyonel bir web sitesi oluşturma.
Modül 11: Google Web Designer ile HTML5 Banner Tasarımları
8 Saat (Tek Ders Olarak Katılım Gösterebilirsiniz)
Bu modülde Google Web Designer programının tasarım ve kod görünümünü kullanarak, çizim araçları, metin ve 3D nesneler ile içerik oluşturma, nesneleri ve etkinlikleri bir zaman çizelgesinde canlandırarak hareketli banner ve reklam materyalleri oluşturmayı öğreneceksiniz.
Dersler
- Farklı Boyutlarda Hareketli Banner Tasarımları Yapma
- Kalem Aracı ve Şekil Araçları ile alışma
- HTML Kod Görünümünde Tasarımları Düzenleme
- Bannerleri Farklı Cihazlara ve Gereksinimlere Göre Düzenleme
- Nesneleri 3D Görünüme Çevirme
- Akış Düzeni ile Nesneleri Hizalama
- Animasyon Hazırlama
- Nesneleri Gruplama ve Sarmalama
- Banner Reklam, Geçiş Reklam ve Dinamik Reklamlar
Modül 12: WordPress & SEO
15 Saat (Tek Ders Olarak Katılım Gösterebilirsiniz)
WordPress, açık kaynak kodlu içerik yönetim sistemidir. WordPress ile çok hızlı ve güvenli bir şekilde web sitesi oluşturabilir ve site içi SEO kurallarını yerine getirerek arama motorları sorgu sonuçlarında üst sıralarda yerinizi alabilirsiniz.
Eğitimin bu modülünde uygulamalı olarak kurumsal web sitesi oluşturma ve oluşturduğumuz internet sitesini Google arama motorunun beklediği kritelere göre optimize etmeyi öğreneceksiniz.
Dersler
- Domain ve Hosting İlişkisi
- WordPress Sistemine Giriş
- WordPress Kurulumu, Yönetimi ve Ayarları
- Sektöre Göre Tema Seçimi, Ayarları ve Özelleştirme
- Doğru Eklenti Seçimi, Eklentilerin Avantaj ve Dezavantajları
- Uygulamalı Kurumsal Site Kurulumu ve Online Olarak Yayınlama
- Site Yedekleme ve Taşıma
- Cpanel ve FTP ile Hosting Bağlantısı Kurma ve Site Üzerinde Değişiklikler Yapma
- Site İçi Temel (On-Page) SEO Teknikleri
- Site İçi SEO Ayarlarının Doğru Şekilde Yapılandırılması (Title, Description, Keywords, Sitemap, Robots Ayarları)
- Arama Motorları Tarafından Hızlı İndex Alma Yöntemleri
- Sitenin Arama Motorları Sıralamalarındaki Konumunu Yükseltme Teknikleri
- Site Hızlandırma ve Optimizasyon Çalışmaları; Css, JavaScript, Resim, HTML, Cache (Önbellekleme), Minify (Sıkıştırma)
- Araçlar; Google My Business, Google Analytics, Search Console (Webmaster Tools),Yandex Metrica Hakkında Bilgiler
- İnternet Reklamcılığı: Google Adsense ve Adwords Hakkında Bilgilendirme
- Arama Motorları Üzerinde Otoriterlik Kazanma Teknikleri ve Google Cezalarının Nedenleri.
- Bitirme Projesi
Bu modülü tamamladıktan sonra şunları yapabilirsiniz:
- WordPress sitesi oluşturma,
- Google ve diğer arama motorlarında daha üst sıralarda yer almak için WordPress sitenizi optimize etme,
- Arama motorlarının nasıl çalıştığını ve ne aradıklarını anlama,
- Arama motorlarının tam olarak ne sunduğunuzu anlamalarına yardımcı olmak için web sitenizin temel kodunu ve meta verilerini optimize etme,
- SEO dostu bir WordPress teması seçme ve şablon ayarlarını doğru şekilde yapılandırma,
- Sitenizin hızını ve performansını artırma (Google bunu bir sıralama sinyali olarak kullanır),
- Herhangi bir konuda yüksek dereceli içerik hedeflemek ve oluşturmak için doğru anahtar kelimeleri seçme.