Email ile aldığım soruların cevaplarını birer makale olarak yayınlıyorum.

İlginç sorulardan biri, ‘Bir html sayfasının açılışını nasıl animatif hale getirebilirim?’ idi.

Bu makalede önce bir html sayfası oluşturacağız, javascript ve css kullanarak bu sayfanın açılışına 1200 ms‘lik fade (yavaşça belirme) animasyonu ekleyeceğiz.

Benim de yaptığım gibi Visual Studio Code editorünü veya başka favori editorünüzü açarak index.html isimli bir dosya oluşturalım ve aşağıdaki html şablonunu yazalım.

Sayfaya ekleyeceğimiz fade animasyonunu görebilmek için sayfada yazılar-resimler-vs olması gerekiyor. Lorem Ipsum sitesinde istediğimiz kadar rastgele yazı oluşturabilmeye yarayan bir sayfa var.

Ayrıca Lorem Ipsum Generator sayfasında reklamsız/ücretsiz Lorem Ipsum oluşturucu bulabilirsiniz. Türkçe desteği ile birlikte benim favorim oldu :)

Ben 10 paragraflık rastgele yazı oluşturdum ve html sayfasının body taglarının arasına aşağıdaki şekilde ekledim;

Artık sayfanın açılışına fade animasyonu ekleyebiliriz, öncelikle body taglarımıza fade css class‘ını ve head tag’ının içerisine aşağıdaki stili yazdığımız style tagını ekleyelim;

Böylece body tag’ında fade css class‘ı var olduğunda sayfa ekranda gözükmeyecek (opacity özelliği 0 olduğu için), fade css class‘ını kaldırdığımızda sayfa 1200 ms içerisinde görünür olacak (opacity özelliği 1 olduğu için)

Şimdi tek yapmamız gereken sayfa yüklendiğinde fade css class‘ını body tag‘ından kaldırmak, bunu aşağıdaki javascript kodu ile gerçekleştirebiliriz;

Böylece sayfayı açtığımızda 1200ms içerisinde fade animasyonu ile görünür olacak;

ionicframework ile html-javascript-css (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;

• blank
• tabs
• sidemenu

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.

Siemens Hackathon Yarışması, her yıl farklı teknik konulara odaklanması ve yılda bir kere düzenlenmesi planlanan bir yarışma. Bu yıl potansiyel mucitler tarafından ele alınmak üzere belirlenen konu Endüstri 4.0

Bu yıl 22 Ekim 2016 tarihinde İstanbul‘da gerçekleşen etkinlikte ben de Nesnelerin Interneti ve Azure Bulut Bilişim konularındaki seanslarda konuşmacı olarak görev aldım.

Geliştirdiğiniz projeyi Visual Studio‘da derlemek istiyorsunuz. Projenin üstüne sağ tuşla tıkladığınızda karşınıza iki seçenek geliyor; Build ve Rebuild. Bu iki seçeneğin arasındaki fark nedir?

Sorunun doğru cevabı için;

Visual Studio (daha doğrusu MSBuild), projeyi bir defa başarıyla derleyebildikten sonra, takip eden Build (Derleme) işlemlerinde sadece değişen kod parçalarını kullanarak çok daha kısa sürecek bir derleme yapar ve ilgili assembly dosyalarının (exe, dll) değişikliklerini günceller.

Rebuild işleminde ise, daha önce derlenmiş assembly‘ler baz alınıp değişiklikler bulunarak derleme yapılmaz. Varolan assembly‘ler tamamen temizlenir (silinir) ve bütün proje (referansları ile birlikte) baştan derleme işlemine tabi tutulur.

Angular js ve yeni versiyonu olan Angular js 2 arasındaki farklara hızlıca bakacak, yeni bir Angular js 2 projesi oluşturacak, browser içerisinde görüntüleyeceğiz.

Aşağıdaki youtube video‘sunda npm üzerinden angular-cli paketini indirecek, yeni bir Angular js 2 projesi oluşturacağız. Typescript ile bir Angular js 2 component‘ının nasıl yapılandırıldığını görecek, template‘in ne demek olduğuna bakacak, metadata‘nın ne olduğunu öğrenecek, bir Angular js 2 application‘ının bileşenlerini inceleyeceğiz.

Video‘da kullandığım PowerPoint sunumuna aşağıdan erişebilirsiniz.