İnternet ortamında görünürlüğünüzü arttırmak için kullanabileceğiniz web tasarım araçları hakkında bilgi sahibi olmak istiyorsanız bu kategori altında yer alan dersleri alabilirsiniz. Bu kategorideki dersleri alarak HTML-CSS kodlamalarıyla web sayfası oluşturabilir, hazır web uygulaması sunan WordPress hakkında detaylı bilgi sahibi olabilir ve hatta Adobe Spark uygulamaları ile web ortamlarında kullanacağınız hazır web sayfaları, hazır görseller ve videolar oluşturabilirsiniz.

Listeler ve resim galerileri gibi etkin web sitesi içeriği genellikle HTML&CSS kullanılarak oluşturulabilir. HTML5&CSS3’ün yeni özelliklerini kullanarak biçim vermek oldukça kolaydır. Öncelikle tüm sayfalar duyarlı yapılabilir. Başka bir deyişle her türlü görüntüleme cihazı ve farklı cep telefonu, tablet ve bilgisayar gibi çeşitli ekran boyutlarına uyum sağlayabilirler.

Duyarlı web tasarımı, görüntüleme cihazına göre görünen alan olan web sayfası görüş alanını tanımlamayı içerir. Küçük ekranlarda görüş alanı da küçüktür. Bir web sayfasını herhangi bir görüş alanına uyarlamak web sayfası yüklenirken cihaz genişliğine göre başlangıç ölçeğini kuran görüş alanı meta etiketini eklemek anlamına gelmektedir.

Ana hat ayrımları ve görüntüler gibi tüm web sayfası elementleri sabit piksel sayıları yerine yüzde kullanılarak boyutlandırılmalıdır. Web sayfaları genel olarak toplam sayfa genişliğinden her biri belirli oran kaplayan 12 sütuna bölünmektedir. İçeriği sütunlara ayırmanın yanı sıra; tarayıcı penceresini dikey veya yatay olarak ayarlamada CSS’yi değiştirmeye izin veren medya sorgularını kullanmak gereklidir.

HTML&CSS düzenleme ve anlamayı kolaylaştırmak için metin düzenleyicide açık bir şekilde yazılmalıdır. İyi yazım uygulamalarında bu yönergeleri takip etmek kodun doğru girintilenmesi, açık olan tüm etiketlerin kapatılması ve etiketin düzgün yerleştirilmesi gibi kod fonksiyonelliğini ve okunabilirliğini yansıtır. Oluşturulan tüm dokümanlar birden fazla web tarayıcısında test edilmeli ve otomatik kod doğrulama programını kullanmalıdır. Bu kullanıcının deneyimini büyük ölçüde artırır ve web sitesinin her türlü koşulda ve tüm site ziyaretçileri için istenildiği gibi görünmesini sağlar. 

Mevcut ücretsiz uygulamalardan biri dokümanın URL’sini sağlayarak, dosyaları yükleyerek veya doğrudan girdi ile kod doğrulamasını destekleyen https://validator.w3.org’deki Markup Validator’dur.

courseimage


HTML5, yeni CSS3 animasyonlarının yanı sıra, metinlerle çalışmada yeni özellikler de (metni döndürme, metnin konumu, metni resmin etrafına sarmalama) sunmaktadır. Gezinti menüsü kolaylaştırır ve ayrıca web sayfaları formlarında kullanılabilecek farklı öznitelikler ve girdi türleri sunar.

HTML formları site ziyaretçisinden bilgi toplamak istediğinizde gereklidir. Örneğin, kullanıcı kaydı süresince isim, e-posta adresi, kredi kartı vs. gibi bilgiler toplamak için kullanabilirsiniz. Metin alanı, açılır menü, onay düğmesi, onay kutusu vs. gibi mevcut birçok form elementi vardır. HTML5 renk, tarih, saat, e-posta, ay, hafta, sayı, gibi yeni girdi türleri sunmaktadır.

SVG (Ölçeklendirilebilir Vektör Grafikleri) web sayfaları için grafikleri tanımlamada kullanılır. Büyütüldüğünde veya yeniden boyutlandırıldığında kalitesinde değişme olmaması SVG grafiklerinin büyük avantajıdır. Başka bir deyişle farklı boyutlardaki ekran üzerinde çalışıldığında SVG kullanımı idealdir. Bu da ölçeklenebilir vektör grafiklerini mobil cihazlar için uygun hale getirmektedir. SVG görüntüleri ve hareketleri genellikle XML dosyalarında tanımlanır. Ancak, SVG grafiklerini doğrudan HTML5 <svg> etiketini kullanarak da dokümanınıza ekleyebilirsiniz. SVG filtreleri, SVG grafiklerine özel efekt eklemek için kullanılır. Her bir SVG öğesinde birden çok filtre kullanabilirsiniz.

CSS3 dönüşümler; elementlere pozisyon vermenizi (translate), elementleri döndürmenizi (rotate), büyütmenizi (scale) ve bükebilmenizi (skew) sağlar. Dönüşüm, bir HTML objesinin; şekil, boyut ve konumunu değiştirmesini sağlayan bir efekttir. CSS3, pozisyon (translate), döndürme (rotate), bükme (skew), X ekseninde çevirme (rotateX), Y ekseninde çevirme (rotateY) ve Z ekseninde çevirme (rotateZ) gibi 2 ve 3 boyutlu dönüşümleri destekler.

CSS3’ün bazı özellikleri hareketlendirilebilir nitelik taşımaktadır ve CSS3’ün animasyon ve dönüşümlerde kullanılabilmesinin sebebi de budur. Hareketlendirilebilir özellikler; boyut, sayı, yüzde ve renk gibi, bir değerden diğerine değişebilir. Bu özelliklerden bazıları; arka plan rengi, arka plan görüntüsü, kenarlık rengi, konum vs.’dir.



courseimage


Bir web sitesi oluşturmak veya düzenlemek istiyorsanız, HTML kavramına aşina olmanız gerekir. Bu derste, HTML5 ile çalışacaksınız. HTML5, HTML’nin en son sürümüdür. Tarayıcı eklentileri gibi ek yazılım gerektirmeden çevrim içi olarak yapmak istediğiniz işlemleri sunmak amacıyla tasarlanmıştır. HTML5 aracılığı ile web sayfalarına animasyondan uygulamaya, müzikten filme kadar pek çok uygulama ekleyebilirsiniz. HTML5 aynı zamanda, tarayıcı üzerinde son derece karmaşık ve ileri seviyedeki uygulamaların oluşturulmasında da kullanılabilir.

Bu derste, HTML5 düzeni ve elementleri ile ilgili daha fazla fikir sahibi olmanızı sağlayacak ve bu elementlerin biçimlendirilmesi için daha yararlı etiketler gösterilecektir. HTML & CSS dersinde web sayfalarını daha kolay şekilde oluşturmak için CSS kodlarının neden ve nasıl kullanıldığını öğrenmiştiniz. Ayrıca bu derste, CSS3’ü ve detaylarını; web sayfaları üzerinde, metin ve resim gibi farklı nesnelerin kullanılması için neden CSS stillerine ihtiyaç duyacağınızı öğreneceksiniz.


courseimage

Bir web sitesi oluşturmak veya düzenlemek istiyorsanız, öğrenmeniz gereken en temel teknoloji HTML’dir (Zengin Metin İşaretleme Dili). HTML, genellikle internet üzerinde içerik görüntülemek amacıyla web tarayıcıları tarafından kullanılan en önemli web standardıdır. Bu içerik, örneğin, metin, resim veya video olabilir. Kelimenin tam anlamıyla HTML, internet sayfası oluşturmada ana dil görevini üstlenir.

Pek çok tasarım elementi (yazı tipleri ve arka plan renkleri gibi) sadece HTML kullanılarak da tanımlanabilir; ancak, sayfa tasarımı ile düzenini birbirinden ayırmak daha iyi ve hatta daha kolaydır. İşte bu noktada CSS devreye girer.
Bu derste hem HTML hem de CSS ile zengin metin belgeleri oluşturmak ve tasarlamak için metin düzenleyicilerini kullanmayı öğreneceksiniz. Bu iki dilin birlikte işlemesi gerektiğinden dolayı, istenilen sonuca ulaşmak için oluşturduğunuz belgeleri birbirlerine nasıl bağlayacağınızı öğreneceksiniz.



courseimage


WordPress sitesi temel sayfa düzenini kişiselleştirmek için iki yol bulunur: yeni bir tema oluşturmak veya bir alt tema kullanmak. Yeni bir WordPress teması meydana getirmek zorlu bir süreçtir ve HTML, CSS ve PHP programlama bilgisi gerektirir. WordPress uzmanları ve geliştiricileri en başından yeni temalar oluştururlar. Diğer kullanıcılar için ise, WordPress temasını kişiselleştirmenin en basit yolu alt temalar kullanmaktır. Alt temalar, temayı yükseltme (upgrade) olanağını kaybetmeden var olan bir WordPress temasını kişiselleştirmek veya üzerinde ince ayarlamalar yapmak istediğinizde kullanılırlar. Bir alt tema, ana tema adlı başka bir temanın özelliğini ve stilini temel alan tema türüdür. Alt temalar var olan bir temanın düzenlenmesi için tavsiye edilen yöntemlerdir. WordPress teması, web sitesinin ön yüzünde gördüğünüz şeyi oluşturmak için birlikte çalışan farklı dosyalar yığınıdır. Bu dosyalar, içerik sunumunu kontrol eder. WordPress temaları, farklı php dosyalarına ayrılır. Bu dosyalar, daha sonra şablon dosyaları kullanılarak yeniden bir araya getirilir.  Şablon dosyaları ve tasarım sayfası birlikte bir WordPress Teması olarak saklanır. Web sitenizin görünümünü kişiselleştirmek için neden alt tema oluşturmanız gerekir? Daha önce bahsettiğimiz gibi ana temalar, çalışılacak tema için gerekli tüm WordPress şablon dosyalarını ve varlıklarını içeren, bütün bir temadır. Tüm temalar – alt temalar hariç – ana temalar olarak kabul edilirler. Bir alt tema, ana temasının tüm özelliklerini ve görünümünü taşır. Bir alt teması olan tüm şablon dosyalar, css, resimler ve diğer dosyalar alt tema klasöründe saklanırken, orijinal ana tema dosyalarına dokunulmamış olacaktır.  Gönderi Tipi, bir WordPress sitesindeki farklı içerik türlerini ifade etmede kullanılan bir terimdir. Pratik anlamda, içerik türü olarak adlandırılmalıdır. WordPress üzerindeki farklı içerik türlerini ayırt etmenin yolu gönderi türleridir. Örneğin; Gönderi ve Sayfalar’ın her ikisi de gönderi türüdür, ancak farklı amaçlarla oluşturulurlar. Kişiselleştirilmiş gönderi tipleri gönderiler ve sayfalar gibi içerik tipleridir. Bunlar oluşturabileceğiniz ve istediğiniz ismi verebileceğiniz yeni gönderi tipleridir. Örneğin; ofis mobilyalarının satıldığı ticari bir web siteniz varsa, o zaman muhtemelen ürünlerle ilgili bir gönderi tipi oluşturmak isteyeceksiniz. Bu gönderi tipi farklı kişiselleştirilmiş alanlara hatta kendi kişiselleştirilmiş kategori yapısına sahip olabilir. Kişiselleştirilmiş gönderi tiplerine yönelik diğer örnekler: Referanslar, Portföy, Yorumlar, vs.

Öne çıkan görsel; kullanıcılara gönderiler sayfalar veya kişiselleştirilmiş gönderi türleri için temsili bir resim kullanma desteği ekleme olanağı sağlayan bir WordPress tema özelliğidir. Pek çok WordPress fotoğraf teması kendi düzeninde öne çıkan görsel kullanır. WordPress bünyesindeki haber ve eğlence siteleri, aynı zamanda ana sayfalarında her bir yazı bağlantısı ile beraber thumbnail imgeleri de kullanır. Resmin nerede ve nasıl görüntüleneceği web sitesinden web sitesine farklılık gösterecektir.

WordPress İnternet üzerindeki en popüler açık kaynaklı CMS sistemidir bu da onu korsan saldırıları için favori hedef haline getirmektedir. WordPress açık kaynaklı olduğu için, kaynak kodu öğrenme ve geliştirme amaçlı olarak herkesin üzerinde çalışabilmesine olanak sağlar. Fakat bu aynı zamanda bilgisayar korsanlarının da üzerinde çalışabileceği ve web sitelerine sızmanın yollarını bulabileceği anlamına gelmektedir. İstatistiksel verilere göre WordPress sitelerinin %70’den fazlası korsan saldırılarına karşı savunmasızdır. 2012 yılında heklenen WordPress web sitelerinin toplam sayısı 170.000’i bulmuştur. Bir WordPress sitesine sahip olmak demek, kendinizin ve ziyaretçilerinizin verilerini korumak için bazı ekstra önlemler almanız gerekiyor demektir. Web sitenizi korsan saldırılarından veya sunucu çökmelerinden korumanın en iyi yolu önlem almaktır. Korsan saldırısının doğuracağı sonuçları WordPress sitenizi yedekleyerek önleyebilirsiniz. Yedeklemeler, sitenize yönelik her türlü güvenlik tehdidine karşı en iyi savunma yöntemlerinden biridir. Düzenli yedeklemeler, her zaman yapmanız gereken bir eylemdir. Bu derste, WordPress yedeklemesini öğrenecek ve bir WordPress sitesinin güvenliğini sağlamaya ve onu korsan saldırılarının çoğuna karşı korumaya yönelik iyi uygulamalara dair özet bilgileri göreceksiniz.


courseimage

Kendi hikâyenizi oluşturmanızın zamanı geldi. Adobe Spark ile düşüncelerinizi etkileyici bir görsele, animasyon içerikli bir videoya ya da bir web sayfasına dönüştürmek artık çok kolay. Bu inanılmaz uygulama sayesinde herhangi bir profesyonel program kullanmadan ürününüzü tanıtan bir afiş ya da sosyal medyada paylaşılmaya hazır bir görsel hazırlayabilirsiniz. Tanıtımınızı video ile destekleyebilir ve dahası tüm bunları içeren bir web sayfası oluşturabilirsiniz. 4 Adobe Spark görsel içerik hazırlamak için özel olarak tasarlanmış bir uygulamadır. Bu uygulama oldukça karmaşık olan tasarım sürecini çok kullanışlı bir ara yüz eşliğinde kolaylaştırmaktadır. Ders kapsamında bu ara yüz ve uygulamanın üç temel bileşeni olan Adobe Spark Post, Adobe Spark Video ve Adobe Spark Page bileşenleri üzerinde durulmuştur. Ders içeriği her bölüm için ayrı tasarlanmış proje senaryoları üzerinden yürütülmüş ve bu üç bileşen uygulamalar eşliğinde ayrıntılı bir şekilde incelenmiştir.

courseimage



WordPress biriçerik yönetim sistemidir (Content Management System). WordPress’in iki versiyonu bulunmaktadır: Wordpress.org ve Wordpress.com. Her iki WordPress versiyonunda da ayarlar, içerik, yazı ekleme ve bölüm eklemek benzerdir.Wordpress.com internet üzerinden sunulan bir servis şeklinde çalışırken, WordPress.org tamamen ücretsiz web uygulamaları sunar. AncakWordpress.org’u kullanacaksanız, WordPress’i ağ sunucunuza nasıl indireceğinizi ve kuracağınızı bilmeniz gerekir. Wordpress.org ile Wordpress.com’da olan kısıtlamalar olmadan özel temalar yükleyebilir, eklenti kurabilir ve reklamları kaldırabilirsiniz.

Bu eğitimde gelişmiş ayarlardan biri olan kalıcı bağlantıları da ele alınmıştır. Kalıcı bağlantılar, WordPress siteniz üzerindeki bireysel blog yazınız veya sayfanızın kalıcı URL’leridir. Bunlar bir yazıyı veya sayfa konusu URL’den arama motorları ile aranmasını sağlar. Kalıcı bağlantıları nasıl değiştireceğinizi ve arama motorlarında üst sıralarda görünmek için olasılıkları nasıl artıracağınızı öğreneceksiniz.

WordPress’te yazı yazarken, görsel editör kullanılır. Görünüm yazıların yazılması için varsayılan moddur ve kelime işlemcisine benzer bir görünümde blog içeriğinizi kolayca oluşturmanızı, düzenlemenizi ve biçimlendirmenize imkân sağlayan yarı- WYSIWYG (What you see is what you get) içerik editörü sağlar. Görsel editörün iki görünüm formatı vardır: Görsel (varsayılan) ve Metin. Bir metin yazarken veya Görsel Editöre link eklerken, aslında sayfanıza veya yazınıza bir HTML ekliyorsunuz, ancak WordPress Görsel Editör bu HTML komutlarını gizler. Yazıları biçimlendirmek ve web sayfası içeriğini geliştirip daha fazla ziyaretçi çekmek için Metin Editörü ve HTML’yi nasıl kullanacağınızı öğreneceksiniz. 

WordPress’te HTML görsel editör kullanmak, yazı veya sayfalara içerik eklemek için kullanışlı bir özellik olan kısa kodlardır. Kısa kodlar, bir yazı web sayfasında görüntülenirken farklı bir içerikle değiştirilen bir yazı girebildiğiniz özel etiketlerdir. Kısa kodlarla ses dosyalarını, galerileri, video dosyalarını yerleştirebilir ya da tek bir satırda normalde çok fazla kod gerektirecek nesneleri oluşturabilirsiniz. WordPress sayfası veya yazı oluştururken veya düzenlerken, yazı içeriğinizi artırmak için çok farklı medyayı kolayca ekleyebilirsiniz. Aşağıdaki medya türlerini ekleyebilirsiniz; Resim, Ses, Video vb. Kısa kodları nasıl kullanacağınızı ve medya dosyalarını; ses ve video nasıl ekleyeceğinizi öğreneceksiniz. 

WordPress ile, herhangi bir kod bilmeksizin web sayfası düzenini değiştirebiliriz. Bu fonksiyonu WordPress temaları ile yaparız. Bu temalar web sayfanızda materyalin sunulması üzerinde kontrol sağlar. Worporess.com 370 mevcut tema sunarken, self-hosted WordPress.org, WordPress Tema dizini içinde daha fazla seçenek sunar. Bu temaları ayrıca çeşitli internet sitelerinden indirebilir veya kendiniz elle de yükleyebilirsiniz.

Gezinme menüleri mevcut site yapısının kullanıcılara gösterilmesidir. Bu menüler web sayfanızın farklı yerlerinde gezinmeye ve kullanıcıların bilgi bulmalarına yardımcı olur. Genellikle, bu menü, Temel menü olarak adlandırılır. Temel menü temaların bir site menüsü üzerinde birden fazla kullanılmasına imkân sağlar; örneğin başlık kısmında temel menü varken, sayfa altında da ikinci bir menü vardır. Kullanıcının menüleri kaydetmesini ve oluşturdukları menüler arasında gezinmelerini sağlar. Menü oluşturma ve değiştirmeyi, ayrıca, web sayfası ziyaretçileri için organize bir gezinme yapısı sunan en iyi menü tipi olan aşağı açılan menülerin nasıl yapılacağını da göreceksiniz.

WordPress temaları web sayfanızın düzenini belirler. Eklentiler ise WordPress özelliklerini ve fonksiyonlarını artırmak için kullanılan uzatılmış, küçük programlardır. Kelime anlamı ile bunları WordPress’e “ekliyorsunuz. Eklentileri bir web sayfasını genişletmek, örneğin bütün yazı ve sayfalarınıza sosyal paylaşım butonları eklemek, resimler eklemek veya web sayfanızı bir e-ticaret platformuna dönüştürmek için kullanabilirsiniz. Eklentileri nasıl bulacağınızı, göstereceğinizi ve web sayfanızda nasıl çalıştıracağınızı öğreneceksiniz.


courseimage


Bu ders dört bölüm olarak yapılandırılmıştır. Bu bölümler;

 • Bölüm 1: WordPress ile İlgili Temel Bilgiler

 • Bölüm 2: WordPress Gösterge Paneli ve Ayarlar

 • Bölüm 3: İçerik ile Çalışmak

 • Bölüm 4: Temalar ve Bileşenler

olarak sıralanmıştır.

WordPress, bir İçerik Yönetim Sistemidir. Yani teknik donanımı olmayan kullanıcıların web sitesi ekleme, düzenleme ve yönetmelerini kolaylaştırmak için tasarlanmış bir web uygulamasıdır. Birinci bölümde WordPress’in iki versiyonu olan Wordpress.org ve Wordpress.com arasındaki fark ele alınmıştır. Wordpress.org, WordPress web sitesinden yazılım indirilmesini ve web sunucusuna yüklenmesini gerektirir. Ayrıca, bir de alan adı almanız gerekir. WordPress.com ise bir alan adı veya web sunucusu hizmeti gerektirmeden internet tarayıcısı üzerinden http://wordpress.com/ adresine giderek bir web sitesi kurmanıza imkân verir. 

İkinci bölümde Gösterge Paneli yani WordPress yönetici alanının kontrol panelinin detayları ele alınmıştır. Blog yazısı yazma, sayfa oluşturma, bileşen ekleme, site ayarlarını değiştirme, hızlı taslaklar, istatistikler ve kullanıcı yorumlarının değerlendirilmesi gibi sık kullanılan seçenekler gösterge panelinde yer alır. Gösterge paneli, yönetici menü alanı ve modüller alanı olmak üzere iki ana kısımdan oluşur. Wordpress.com alan adınızın (site URL’si) sonuna /wp-admin ekleyerek gösterge paneline erişebilirsiniz.

Üçüncü bölümde içeriklerle çalışma konusu ele alınmıştır. WordPress’te iki temel içerik türü vardır: Blog yazıları ve Sayfalar. Blog yazıları, temelde sitenizde yayımlayabileceğiniz makalelerdir ve blog’unuzun ana sayfasında ters kronolojik sırada listelenen içeriklerdir. Uygun içerik yapısı oluşturmak ve blog yazılarını konularına göre düzenlemek için Kategoriler içinde gruplandırılabilirler. Sayfalar, “sıradan web sayfaları” olarak tanımlanabilir. Sabittirler ve “Hakkında”, “İletişim”, “Gizlilik Politikası” gibi içerikler için uygundurlar. Sayfalar, Kategoriler ile ilişkilendirilemez ve sayfalara Etiket atanamaz, doğaları gereği hiyerarşiktirler.

Üçüncü bölümde bu temalar ve bileşenler ele alınmıştır. WordPress’te, kodlama bilgisi gerekmeden, ana sayfanızı ve web sitenizin genel tarzını yenilemek için kolay bir yol olan temalar bulunur. Temalar web sitenizin sayfa tasarımını kolayca değiştirme imkânı sağlar. Wordpress.com’da 300’den fazla mevcut tema vardır. Bileşen; web sitenizin kenar çubuğuna ekleyebileceğiniz, düzenleyebileceğiniz veya kaldırabileceğiniz içerik veya araçlara verilen isimdir. Bileşenler ile, hiçbir kodlama bilgisine sahip olmadan, sitenizin kenar çubuğundaki içeriği ayarlayabilir ve yayınlayabilirsiniz.


courseimage