Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan kapsamlı bir web tasarımı eğitim dersidir. Eğitmen, web tasarım alanında deneyimli biri olarak HTML ve CSS temellerini öğretmektedir.
- Eğitim, HTML ve CSS temellerinden başlayarak, kapsayıcı div oluşturma, menü tasarımı, float özelliğinin kullanımı, responsive tasarım ve gölge komutları gibi konuları adım adım ele almaktadır. Video boyunca bir dernek sitesi tasarım örneği üzerinden pratik uygulamalar gösterilmekte ve dersin sonunda öğrencilerine 14 Şubat'a kadar bir işletme internet sitesi tasarlamaları için proje verilmektedir.
- Eğitimde ayrıca freelance çalışırken dikkat edilmesi gereken noktalar, revizyon kavramının önemi ve farklı tarayıcılarda CSS komutlarının nasıl çalıştığı gibi pratik bilgiler de paylaşılmaktadır. Dersin sonunda, ilerleyen derslerde JavaScript veya PHP konularına geçileceği belirtilmekte ve öğrencilerden hangi konuya geçilmesi daha uygun olacağını sormaktadır.
- HTML ve CSS Temelleri
- ID ve class, HTML elementlerinde kullanılabilir özelliklerdir; ID her element için benzersiz olurken, class aynı elementte birden fazla kullanılabilir.
- JavaScript'te ID'ler çakışma sorunlarına yol açabilir, bu nedenle class'lar tercih edilebilir.
- CSS'te bir elementi ID veya class kullanmadan doğrudan düzenlemek mümkündür, ancak bu yöntem tercih edilmez.
- 02:19CSS Özellikleri ve Önemi
- CSS'te marjin (dış boşluk), padding (iç boşluk) ve float (hizalama) gibi özellikler çok önemlidir.
- JavaScript'te elementlerin pozisyonlarını değiştirmek için bu CSS özelliklerine ihtiyaç duyulur.
- Bu dersin sonunda CSS komutlarının nasıl kullanılacağı gösterilecektir.
- 03:41Web Tasarım Projesi Planlama
- Bir web tasarımcısı olarak bir iş aldığınızda, önce plan yapmak çok önemlidir.
- Plan yapmadan işe başlamak, ilerleyen süreçte sorunlara yol açabilir.
- Her iş için "ne aldım, ne yapacağım ve benden ne isteniyor" sorularını sormak gerekir.
- 06:00Proje Yönetimi ve Referanslar
- Tasarım işlerinde, işin büyüklüğüne göre fiyat belirlenir; e-ticaret siteleri daha pahalı olabilirken, kişisel veya dernek siteleri daha uygun fiyata olabilir.
- Her iş için uygun bir proje planı yapmak önemlidir.
- Düşük bütçeli işler de önemlidir çünkü iyi bir iş yaparak referans kazanabilir ve daha büyük projelere yönlendirilebilirsiniz.
- 07:54Revizyon Süreci
- Dernek sitesi tasarımı için bütçe, teslimat tarihi ve revizyon sayısı belirlenir.
- Revizyon, iş üzerinde yapılacak toplam değişikliklerdir.
- Revizyon sayısı veya her revizyon başına ücret alımı, işverenle anlaşılır.
- 08:26İnternet Sitesi Tasarımında Dikkat Edilmesi Gerekenler
- Dernek sitesi tasarırken, piyasada aktif olan sektör liderlerinin nasıl tasarım ilerlettiğine dikkat etmek gerekir.
- İlk işlerde, para kazanmak için acele etmek yerine, kaliteli bir iş yapmak ve iyi bir referans kazanmak önemlidir.
- Dernek sitesi tasarırken, genellikle yerel halkın kullanımını hedefleyen basit ve kullanıcı dostu tasarımlar tercih edilmelidir.
- 10:17Dernek Sitesi Tasarım Özellikleri
- Dernek sitelerinde öncelikli olarak orta veya yaşlı kesimin kolaylıkla gezinebileceği basit bir tasarım sunulmalıdır.
- Dernek sitelerinde genellikle orta kısma kadar doldurulur ve sağ-sol tarafına reklam atılır, tüm siteyi kapsayan tasarım nadirdir.
- Dernek sitelerinde yerel konumlar, haberler gibi içerikler orta kısımda toplanır.
- 11:40Tasarım Kopyalama ve Dosya Yapılandırması
- Bir tasarımın aynısını çıkarmak emek çarpıtmaya neden olabilir, bu yüzden tasarımın benzeri olmasına çalışmak daha uygun olacaktır.
- İnternet sitesi yaparken ilk olarak index.html dosyası oluşturulmalıdır çünkü hostinglerde varsayılan ana sayfa bu dosyadır.
- Stil dosyası ve şablon klasörleri oluşturulmalıdır.
- 15:24HTML Dosyası Yapısı
- HTML dosyasında title etiketi kullanılarak sekmede görünecek başlık belirlenir.
- link etiketi kullanılarak dışarıdan ses dosyaları veya CSS dosyaları entegre edilebilir.
- link etiketinde dosya türü ve URL bilgisi belirtilir.
- 18:17Tasarım Çalışma Ortamı Oluşturma
- Tasarım çalışırken çalışma ortamının yüksekliğini ve genişliğini yüzde yüz olarak ayarlamak önemlidir.
- Tasarım çıkartırken mutlaka revizyonlara ve değişikliklere uğratmak gerekir, sadece renk veya resim değişikliği değil.
- Tasarım çıkartırken şablona göre çalışma alanını ayarlamak ve kapsayıcı bir div oluşturmak önemlidir.
- 20:05Kapsayıcı Div Oluşturma
- Tüm web tasarımında kapsayıcı bir div oluşturmak ve tüm elementleri bu div içinde çalıştırmak büyük fayda sağlar.
- Kapsayıcı div'in genişliği yüzde elli veya altmış olabilir, yüksekliği ise yüzde yüz olmalıdır.
- Kapsayıcı div'in arka plan rengi ve kenarlık çalışması ile renklendirilebilir.
- 21:57İçerik Ortalama Yöntemleri
- İçerikleri ortalamak için marjin komutlarıyla sol ve sağ boşlukları ayarlamak mümkündür.
- Marjin sol ve sağ boşluklarını "auto" olarak ayarlayarak içerik otomatik olarak ortalanabilir.
- Ortalama yaparken hesaplama yapmak zorunda kalmadan "auto" ayarı kullanmak daha kolaydır.
- 24:03Header ve Menü Tasarımı
- Header kısmı internet sitelerinde logo, benim veya sosyal medya bilgileri gibi içeriklerle doldurulabilir.
- Header için kapsayıcı div oluşturulup, yüksekliği yüzde on gibi bir değer verilebilir.
- Menü tasarımı için kapsayıcı bir div oluşturulup, içindeki kutular eşit olarak yerleştirilebilir.
- 28:46Web Tasarımında Dikkat Edilmesi Gerekenler
- Web tasarımı yaparken, siteye her yerden ulaşılabilmesi ve girdiği yerden geri dönülebilmesi gerekiyor.
- Anasayfadan yönetim kadrosu, haberlere zıplama gibi navigasyon özellikleri tasarımı sırasında dikkate alınmalı.
- Menü tasarımı yaparken, menü kutularının genişliği yüzde 10, yüksekliği yüzde 100 olarak tanımlanmalı ve arka plan rengi diğer elementlerden farklı olmalı.
- 30:20Menü Tasarımında Zorluklar
- Menü kutuları yan yana yerleştirilirken, float komutu kullanılmadığı için kutular alt alta sıralanıyor.
- Float komutu, elementleri sol veya sağ tarafa yaslamak için kullanılır, kullanılmadığında her element yeni bir satır olarak algılanır.
- Web tasarımında zorluklarla karşılaşmak normaldir, bu alan freelance çalışarak para kazanılabilen alanlardan biridir.
- 38:05Menü Tasarımının Tamamlanması
- Menü kutuları sol tarafa yaslandığında, kutular arasında boşluk vermek için marjin-left komutu kullanılır.
- Menü tasarımlarında boşluk değerleri genellikle yüzde 0.1 ile 0.5 arasında seçilir.
- Tasarımın içeriği doldurulduğunda, web sitesi için gerekli tüm unsurlar hazır hale gelir.
- 39:07Web Tasarımında Kapsayıcı Elemanlar
- Web tasarımı yaparken, içeriklerin nasıl doldurulacağı ve HTML/CSS tabanına nasıl hazırlanacağı önemlidir.
- Web tasarımlarında genellikle sol ve sağ tarafta kapsayıcı elemanlar (div) kullanılır ve içerikler bu kapsayıcılar içine yerleştirilir.
- Bir web sayfası genellikle yüzde 25'lik sol ve sağ kapsayıcılar ve yüzde 50'lik orta kapsayıcılar şeklinde bölünebilir.
- 42:12Kapsayıcı Elemanlarının Tanımlanması
- Web tasarımı yaparken önce menü ve üst kısımlar oluşturulur, sonra sol, orta ve sağ kapsayıcı elemanları hazırlanır.
- Kapsayıcı elemanların genişlikleri ve yükseklikleri CSS ile ayarlanabilir (örneğin %60, %50 gibi).
- Kapsayıcı elemanların sol tarafa dayalması için "float: left" özelliği kullanılır.
- 49:21Kapsayıcı Elemanlarının Düzenlenmesi
- Web sayfasında sol, orta ve sağ kapsayıcı elemanları oluşturulduktan sonra, aynı tasarımın aynısını çıkarmak mümkündür.
- Kapsayıcı elemanları birbirine girmemesi için dış boşluk (margin) ayarlanabilir.
- Tüm kapsayıcı elemanları genel bir kapsayıcı içinde toplanırsa, boşluk ayarları tek satır kodla yapılabilir, aksi halde her kapsayıcı için ayrı ayarlar yapılmalıdır.
- 51:23Kutu Tasarımı ve Yerleştirme
- Kutuların boyutları tasarım gereği değişebilir ve benzer özelliklere sahip kutular gruplandırılabilir.
- Bir tasarım çıkartırken temel olarak yükseklik, genişlik, marjin ve arka plan renk gibi dört komut kullanılır.
- Sol tarafta yerleştirmek için bir kutu oluşturulur, genişliği yüzde yüz, yüksekliği yüzde on ayarlanır ve arka plan rengi verilir.
- 53:53Kutu Özellikleri ve Yerleştirme
- Sol taraftaki kutu yerleştirildikten sonra genişliği yüzde yirmi'ye kadar çekilebilir veya daha fazla genişletilebilir.
- Sağ tarafta yerleştirme yapmak için sağ taraf kutusu oluşturulur ve aynı kutu farklı renklerle kullanılabilir.
- Sol kutuların üstünde başlıklar yerleştirilir, genişliği yüzde yüz, yüksekliği yüzde on ayarlanır ve float left özelliği ile alt tarafa aktarma yapmaması sağlanır.
- 56:15Font ve Renk Ayarlamaları
- Font ayarlamaları yapılırken hazır olarak tasarlanmış internet siteleri kullanılabilir, bu siteler kod yazmadan gölgelendirme ve geçişli arka plan ayarları yapılmasını sağlar.
- Renk kodları kullanılarak başlıklara ve menü kutularına farklı renkler verilir.
- Dışarıdan ayarlanan gölgelendirme özellikleri ile menü kutularına gölgelik eklenir.
- 59:18Tarayıcı Destekliliği
- Bazı tarayıcılar bazı CSS komutlarını desteklemeyebilir, bu nedenle farklı tarayıcılar için özel komutlar kullanılır.
- Mozilla için "-moz-", webkit için "-webkit-", Google Chrome, Opera, Yandex gibi tarayıcılar için "-webkit-" gibi tarayıcı özel komutları kullanılır.
- İnternet siteleri sadece bir tarayıcı için değil, tüm tarayıcılar için yapıldığı için bu komutlara dikkat edilmelidir.
- 1:00:21CSS Özellikleri ve Responsive Tasarım
- CSS'de gölge özelliği dört parametre alır ve piksel cinsinden sol, sağ, yukarı ve aşağı gölgelerin uzunluklarını belirler.
- RGB değerleri 0-255 arasında değer alan renk kodlarıdır ve opaklık 0-1 arasında bir değer alır.
- Mouse üzerine geldiğinde menünün arka planında kullanılır ve responsive tasarım için ekran çözünürlüğüne göre ayarlanmalıdır.
- 1:02:48Responsive Tasarım Test Etme
- Font size responsive tasarım ölçüsüne uygun olmalı ve piksel yerine w gibi responsive bir değer kullanılmalıdır.
- Ekranı büyütüp küçülterek responsive tasarımı test edebilirsiniz.
- Bu yöntem farklı tarayıcı veya bilgisayara girmeden tasarımın farklı çözünürlüklerde nasıl görüneceğini kontrol etmenizi sağlar.
- 1:04:41Gelecek Dersler Hakkında Soru
- HTML ve CSS temelini öğrendikten sonra, tasarımın temeli hazır hale gelmiştir.
- Öğrencilere tasarım yapmaları için yerleştirme yapmaları isteniyor.
- Gelecek derslerde JavaScript veya PHP konularına geçileceği hakkında öğrenci görüşleri isteniyor.
- 1:08:10Öğrenci Geri Bildirimleri
- Öğrencilerden HTML ve CSS konularının anlatımına dair geri bildirimler isteniyor.
- Bootstrap ile responsive tasarımın daha kolay yapılabileceği belirtiliyor.
- Öğrencilerden öneriler ve eleştiriler bekleniyor, Discord veya WhatsApp grupları üzerinden sorular sorulabilir.
- 1:11:47İnternet Sitesi Önemi ve Çekiliş
- Kendinize ait bir internet sitesinin öğrencilik ve iş hayatında çok önemlidir, domain.com, .net veya blog olmak üzere herhangi bir site olabilir.
- Geçen hafta bir çekiliş yapılarak domain ve host verilmiş, şimdi de en beğenilen üç tasarıma domain verilecek.
- Öğrencilerden işletme hakkında bir internet sitesi tasarlamaları isteniyor, kişisel veya kurumsal olabilir.
- 1:13:37Tasarım Görevi Detayları
- Tasarımında JavaScript kullanılmamalı, CSS ile yapılmış olmalı.
- Tasarım 14 Şubat pazar gününe kadar mail adresine gönderilmeli.
- Tasarım tek, iki veya üç sayfalık olabilir, içerikli olmalı ve dosyalar tek bir klasör içerisinde olmalı.
- 1:15:47Eğitim Durumu
- HTML eğitiminin ilk etabı ve CSS tamamlanmıştır.
- Altı derslik, altı buçuk-sekiz saatlik bir eğitim yapılmıştır.
- Haftaya yeni bir tasarım ve kodlama alanında konuya geçilecektir.