Css3 | Engin Polat\'ın Windows 8 , Windows Phone 8 ve C# içerikli programcılık sitesi

Arşiv

Etiketlenen yazılar css3

Açık Akademi Yaz Okulu 2016

25 August 2016 Yorum yapılmamış

Her sene üniversitelerin yaz tatiline girmesiyle Microsoft tarafından bir Yaz Okulu etkinliği gerçekleştiriliyor.

Son birkaç yıldır olduğu gibi bu yıl da Microsoft Yaz Okuluna eğitmen olarak katıldım.

05 Ağustos 2016, 12 Ağustos 2016, 23 Ağustos 2016 ve 24 Ağustos 2016 tarihlerinde Microsoft Türkiye ofisinde gerçekleştirdiğim seanslarda Universal Windows Platform, Microsoft Azure, HTML, Javascript, CSS ve Asp.Net MVC konularında eğitimler verdim.

Tüm Yaz Okulu öğrencilerine, beni sabırla dinledikleri için teşekkür ediyor, özverili katılımlarından dolayı da tebrik ediyorum.

HTML5 video element ile cihazın Camera görüntüsünü göstermek

20 April 2016 1 yorum

HTML5 ile birlikte gelen video element içerisinde navigator.getUserMedia API method’u sayesinde Javascript aracılığı ile cihazın Camera görüntüsünü gösterebiliyoruz.

Bu makale ile adım adım ilerleyerek, cihazın Camera gösüntüsünü video element içerisinde gösteren bir sayfa oluşturacağız, hemen yeni bir html dosyası oluşturalım ve içine aşağıdaki kodları yazalım;

Sayfaya bir video element ekleyeceğiz, Javascript aracılığı ile cihazın Camera görüntüsünü alacak, video element içerisinde göstereceğiz. Bunun için aşağıdaki kodları <body></body> element içerisine ekleyelim;

Böylece, sayfa açıldığında navigator nesnesinin getUserMedia method’unu kullanarak cihazın Camera görüntüsüne ulaşmayı deniyoruz.

Not : Eğer audio filtresine false değeri yerine true değeri verirsek sesleri de almaya başlarız.

Eğer camera‘ya başarılı bir şekilde erişebilirsek, window.URL.createObjectURL() methodu ile Camera‘nın görüntüsünü istediğimiz video element içerisinde oynatmaya başlayabiliyoruz.

Sayfa ilk açıldığında kullanıcıdan Camera‘ya erişmek için izin istenir.

Gerekli izin verildikten sonra Camera görüntüsü, ilgili video element içerisinde oynatılmaya başlanır.

Eğer Camera görüntüsünü durdurmak istiyorsak, stream‘in stop() methodunu çağırmamız yeterli.

Ayrıca, CSS3 stillerini kullanarak Camera görüntüsü üzerine efekt‘ler de uygulayabiliriz. Bakınız, HTML5 video element CSS3 ile efekt uygulamak

Eğer Camera görüntüsünün çözünürlüğünü değiştirmek istersek, navigator.getUserMedia() methodunun ilk parametresinde basitçe video: true yazmak yerine, istediğimiz çözünürlüğü aşağıdaki gibi belirtiyoruz;

HTML5 video element CSS3 ile efekt uygulamak

15 April 2016 Yorum yapılmamış

HTML5 ile gelen <video></video> elementine CSS3 ile stil uygulayarak efekt uygulayabiliyoruz. Örneğin, video element içerisinde oynayan videoyu siyah-beyaz yapmak, renk doygunluğu ile oynamak, flu hale getirmek, renkleri ters çevirmek, vs gibi efektler rahatlıkla programlanabiliyor.

Bu makalede yeni bir HTML5 sayfası oluşturarak, oynayan video’ya nasıl efekt verebileceğimizi göreceğiz.

Öncelikle yeni bir html sayfası oluşturalım;

Sayfanın <body></body> taglarının arasına video elementimizi ekleyelim;

Şimdi, <head></head> taglarının arasına yeni bir <style></style> element ekleyelim ve içerisine aşağıdaki stilleri yazalım;

Artık video elementine hangi efekti uygulamak istiyorsak, ilgili css class‘ını uygulamamız yeterli, örneğin;

HTML5 lang ve charset attributes

05 March 2016 Yorum yapılmamış

HTML ve HTML5 sayfalarında aşağıdaki sebeplerden ötürü lang ve charset attribute‘lerini kullanmak faydalıdır;

  • Görme engellilerin kullandığı özel yazılım veya donanımlara gerekli dönüşümleri yapabilmesi için bilgi verir (Braille alfabesi)
  • Text-to-Speech (Metinden Yazıya) çeviri yapabilen yazılım veya donanımlara hangi dil setinin kullanılacağı konusunda bilgi verir
  • Daha sonra gerçekleştirilecek dil dönüşümü işlemleri için hangi dillerin desteklendiği konusunda bilgi verir

Böylece hem SEO açısından hem de daha fazla insanın ve yazılımın ilgili sayfayı daha başarılı kullanabilmesi bakımından lang ve charset attribute‘lerini kullanmak önemlidir.

lang attribute Global Set içerisinde tanımlı olduğu için bir html sayfasındaki tüm elementlerde kullanılabilir. Örneğin;

[code language=”xml”]<p lang="tr">Merhaba Dünya!</p>
<p lang="en">Hello World!</p>
<p lang="es">Hola Mundo!</p>[/code]

Genellikle ise, html elementin kendisinde kullanılır, örneğin;

[code language=”xml”]<!doctype html>
<html lang="tr">
<head>
<title>Merhaba Dünya</title>
</head>
<body>
</body>
</html>[/code]

Hatta, sayfaların ilgili dil’e göre ayrı stillendirilebilmesi bile mümkün, örneğin;

[code language=”css”]body {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
:lang(tr) {
color: red;
}
:lang(en) {
color: blue;
}
:lang(ar) {
color: green;
font-family: "Traditional Arabic", "Al Bayan", serif;
}[/code]

Böylece varsayılan yazı fontu Palatino Linotype olarak belirlendi, Türkçe sayfalarda yazı rengi red (kırmızı), İngilizce sayfalarda yazı rengi blue (mavi), Arapça sayfalarda yazı rengi green (yeşil) ve yazı fontu Traditional Arabic oldu.

Mutlaka html dokümanlarında character set’i tanımlamalıyız. Character Set‘i tanımlamak için charset attribute kullanmamız yeterli. charset attribute kullanmak için <head> element içerisine <meta> element eklememiz yeterli. Aşağıdaki iki farklı kullanım yöntemi de aynı şekilde çalışır, istediğimizi tercih edebiliriz;

[code language=”xml”]<head>
<meta charset="utf-8" />
</head>[/code]

[code language=”xml”]<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>[/code]

AçıkAkademi Html, Css ve jQuery Eğitimleri 2015

26 April 2015 1 yorum

AçıkAkademi üzerinde yayınlanan 29 video‘luk Html, Css ve jQuery eğitim seti yayına alındı.

Sevgili arkadaşım Bora Kaşmer ile hazırladığımız eğitim setini sizler de Web sitesi yapmayı öğrenerek programlamaya başlamak istiyorum başlıklı AçıkAkademi sayfasından izleyebilirsiniz. Eğitim konu listesi;

  • Eğitmenlerle Tanışma

HTML5

  • HTML Nedir?
  • WebMatrix’in Kurulumu ve İlk Sayfanın Yayınlanması 1
  • WebMatrix’in Kurulumu ve İlk Sayfanın Yayınlanması 2
  • Başlık Elementleri
  • Metin Elementleri
  • Liste Elementleri
  • Link ve Resim Elementleri 1
  • Link ve Resim Elementleri 2
  • Form Bilgi ve Giriş Elementleri
  • Aşağı Açılır Kutu Seçim Elementleri
  • Seçim Elementleri
  • Video ve Audio Elementleri

CSS3

  • CSS3 ile Stil
  • Stillendirme
  • CSS3 ile Yazı ve Renk Stilleri
  • Kenarlık
  • CSS3 Özellikleri
  • CSS3 ile Animasyon

jQuery

  • JavaScript ve JQuery Nedir?
  • jQuery ile Focus ve Blur
  • jQuery ile Merhaba Dünya
  • Each Function
  • Değişkenler ve Fonksiyonlar
  • OnChange Olayı
  • Hover Function
  • jQuery ile Animasyonlar
  • Klavye olayları
  • Son Söz

AçıkAkademi için bu eğitim setini çekmemizi sağlayan sevgili arkadaşım Ümit Batu‘ya da teşekkür ederim.