April, 2016 | Engin Polat'ın Windows, Web, Mobile ve Game içerikli programcılık sitesi

Arşiv

2016 April ayı için arşiv

Javascript Mouse Events (Olaylar) arasındaki farklar

25 April 2016 Yorum yapılmamış

HTML sayfalarında mouse ile ilgili çeşitli events (olaylar) yakalayabilir ve Mouse‘un durumuna göre çalışacak kodlar yazabiliriz.

Fakat mouse ile ilgili birden fazla events (olaylar) mevcut ve aralarındaki farkları bilmekte fayda var.

Aşağıdaki liste ile mouse events (olaylar) arasındaki farkları görebilirsiniz;

mousedown
Mouse butonlarından birine basıldığında gerçekleşir. Parametrede yer alan button özelliği eğer 0 ise sol buton, 1 ise orta buton, 2 ise sağ buton basılmıştır.

mouseup
Basılan Mouse butonu bırakıldığında gerçekleşir.

mouseclick
Mouse butonuna basılması ve bırakılması durumunda gerçekleşir.

mouseenter
Mouse, bir Html elementin üzerine geldiğinde gerçekleşir.

mouseleave / mouseout
Mouse, bir Html elementin üzerinden çıktığında gerçekleşir. Html element, başka bir element içeriyorsa, mouseleave event (olay) içerilen elementin üzerine geldiğinde gerçekleşmez, mouseout event (olay) gerçekleşir.

mouseover / mousemove
Mouse, bir Html elementin üzerinden geçerken gerçekleşir. Eğer Html element başka bir elementin içindeyse veya içerisinde başka elementler varsa da mouseover event (olay) gerçekleşir. Mouse ilgili elementin üzerinde gezdikçe mouseover event (olay) sadece bir defa gerçekleşir, mousemove event (olay) her seferinde gerçekleşir.

Girişimcilik ve Mühendislik Zirvesi – ODTU, Nisan 2016

23 April 2016 Yorum yapılmamış

ODTÜ Üniversitesi Kültür ve Kongre Merkezinde, 20 Nisan 2016, 21 Nisan 2016 ve 22 Nisan 2016 tarihlerinde Girişimcilik ve Mühendislik Zirvesi gerçekleştirildi.

Ben de 22 Nisan 2016 tarihinde Azure App Services konulu bir hands-on (uygulamalı) oturum ile katılımcılara Azure platformunun yazılım geliştiriciler için kolaylıklarını anlattım.

Etkinliğe katılan herkese teşekkür ederim.

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

20 April 2016 2 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;

Global Azure Bootcamp Nisan 2016

17 April 2016 Yorum yapılmamış

İlki Nisan 2013 tarihinde yapılmaya başlanan Global Azure Bootcamp, 16 Nisan 2016 tarihinde tüm dünyada eş zamanlı olarak 129 lokasyonda gerçekleştirildi.

Türkiye‘de İstanbul ve Ankara‘da bir tam gün boyunca sektör tecrübesi olan uzmanlarca gerçekleştirilen Global Azure Bootcamp içerisinde ben de Asp.Net Core 1.0 ile Yüksek Performanslı Web Uygulamaları konulu oturum gerçekleştirdim.

Etkinliğe katılan herkese teşekkür ederim, etkinlik duyuru görselini aşağıda bulabilirsiniz.

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;