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

Arşiv

Etiketlenen yazılar css

ionicframework ile cross-platform uygulama geliştirirken emulator kullanımı

26 October 2016 Yorum yapılmamış

ionicframework ile htmljavascriptcss (hatta typescript ve sass) kullanarak cross-platform uygulama geliştirebiliyoruz.

Cross-Platform projemizi tamamen ücretsiz ve tüm platformlarda varolan Visual Studio Code editorü ile geliştirebiliyoruz.

Visual Studio Code ile geliştirdiğimiz ionicframework projesini nasıl debug edebileceğimizi ve emulator‘u nasıl kullanabileceğimizi inceleyeceğiz.

Öncelikle projeyi oluşturmak istediğimiz dizine Command Prompt (Windows) veya Terminal (MacOS, Linux) içerisinden gidelim ve aşağıdaki kodları çalıştıralım;

Bu komutun şablonu;

Proje şablonu olarak aşağıdaki hazır template’lerden birini belirleyebilirsiniz;

Proje oluşturulduktan sonra Visual Studio Code ile ilgili dizini açalım ve projenin dosyalarını aşağıdaki gibi gördüğümüzden emin olalım;

Sol taraftaki panelden Debug butonuna tıklayalım ve Debug Panel‘i açalım;

Ayarlar butonuna (Debug Panel‘de gözüken çark simgeli buton) bastığımızda gelen Select Environment seçeneklerinden Cordova seçeneğini seçiyoruz.

Böylece sistemimizde bulunan emulatorlerden istediğimiz bir tanesini seçerek ve yeşil çalıştır butonuna basarak projeyi emulator üzerinden debug etmeye başlayabiliriz;

Projeyi emulator üzerinde debug etmeye başladığımız andan itibaren Visual Studio Code içerisinde emulator‘ün çeşitli sensorlerine sahte sinyaller gönderebileceğimiz bir panel açılıyor.

Böylece istediğimiz sensörlere istediğimiz değerleri göndererek, farklı durumlarda uygulamamızın cihazda çalışmasını simule edebiliriz.

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]