HTML5 lang ve charset attributes

05 Mart 2016

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]

MSP Webinar Serisi, Universal Windows Platform - MVVM ve Databinding, Mart 2016

04 Mart 2016

03 Mart 2016 tarihinde, Microsoft MSP öğrencilere özel Universal Windows Platform - MVVM ve Databinding webinar‘i gerçekleştirdim.

Bu etkinliğin videosunu Youtube (UWP MVVM ve Databinding) üzerinden veya Channel 9 (MSP Webinar 2016 UWP MVVM ve Databinding) üzerinden izleyebilirsiniz.

Unity3D projesinde Terrain ve Tree kullanarak sahne oluşturmak

03 Mart 2016

Bu makaleyi okumadan önce Unity3D Kategorisindeki diğer makalelerimi okumanızı tavsiye ederim.

Bu makale sonunda oyun sahnenizde istediğiniz yeryüzü şekilleri ve ağaçlar oluşacak.

Öncelikle Unity3D‘yi açarak bir oyun projesi oluşturuyoruz;

GameObject menüsü altından 3D Object / Terrain menüsüne tıklıyor ve sahneye bir Terrain nesnesi ekliyoruz.

Sahneye eklediğimiz Terrain nesnesinin üzerine ağaçlar koymak istiyorsak, öncelikle projeye Tree Asset eklemeliyiz. Bunun için Assets menüsü altından Import Package / Environment menüsüne tıklamalıyız.

Açılan ekrandaki Import butonuna tıklıyoruz.

Böylece oyun sahnesine bir Terrain nesnesi ve Terrain üzerine yerleştireceğimiz Tree Asset‘lerini eklemiş olduk.

Inspector panelinde bulunan Add Tree butonuna tıklıyoruz.

Açılan ekranda istediğimiz Tree Asset‘lerden birini seçiyoruz;

Artık Terrain üzerine ekleyeceğimiz ağaçların farklı boylara sahip olması için Tree Height özelliğindeki aralığı istediğimiz gibi belirleyebilir, Mass Place Trees butonuna tıklayarak, açılan ekranda Terrain üzerine kaç ağaç eklemek istediğimizi belirleyebiliriz.

Bu makalede ben 1.000 ağaç ekleyeceğim.

Ağaçlar eklendikten sonra sahnemiz aşağıdaki gibi gözüküyor olmalı.

Inspector panelinde yeralan Raise/Lower Terrain butonuna tıklayarak Terrain üzerinde yükseltiler ve alçaltılar oluşturabiliriz. İstediğimiz şekli seçip, Settings altında yeralan Brush Size ile büyüklüğü belirleyip Terrain üzerinde dağlar ve vadiler oluşturabiliriz.

Eğer yakından bakacak olursak, Terrain üzerine eklediğimiz ağaçların dağların ve vadilerin yamaçlarında da yer alabildiğini görebiliriz.

Böylece istediğimiz kadar gerçekçi bir oyun alanı oluşturabilmemiz mümkün.

Windows 10 UWP uygulamasında resimleri yuvarlak göstermek

02 Mart 2016

Son yıllarda özellikle mobil uygulamalarda avatar dediğimiz stilde resimleri yuvarlak göstermek sıklıkla kullanılır oldu.

Bunu gerçekleştirebilmek için resimleri yuvarlak kaydetmeye gerek yok.

Bu makalede Windows 10 UWP projesinde resimleri nasıl yuvarlak gösterebileceğimizi inceleyeceğiz.

Önce bir Blank App (Universal Windows) projesi oluşturalım;

Projenin Assets dizinine yuvarlak göstermek istediğimiz resmi ekleyelim, bu makalede ben Bora Kaşmer‘in aşağıdaki resmini ekliyorum;

MainPage.xaml dosyasını açalım ve kodları aşağıdaki şekilde güncelleyelim;

<Page x:Class=”YuvarlakAvatarResim.MainPage” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:local=”using:YuvarlakAvatarResim”>

&lt;Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"&gt;
    &lt;Image Source="/Assets/bora.jpg" Width="250" Height="250" /&gt;
&lt;/Grid&gt;

</Page></pre>

Böylece ekrana bir Image nesnesi ekledik ve içerisinde Bora Kaşmer‘in resmini aşağıdaki gibi gösterdik;

Eğer bu resmi kare değil, yuvarlak göstermek istiyorsak, Grid nesnesinin içindeki Image nesnesini Ellipse nesnesi ile değiştirip, Fill özelliğine ImageBrush nesnesi ekliyoruz;

<Page
    x:Class="YuvarlakAvatarResim.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:YuvarlakAvatarResim">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Ellipse Width="250" Height="250">
            <Ellipse.Fill>
                <ImageBrush ImageSource="/Assets/bora.jpg" />
            </Ellipse.Fill>
        </Ellipse>
    </Grid>

</Page>


Böylece ekranımız aşağıdaki şekilde **yuvarlak** resim ile gözükür hale geliyor;

![](/assets/uploads/2016/03/avatar4.jpg)

Çanakkale Onsekiz Mart Üniversitesi Etkinliği, Şubat 2016

27 Şubat 2016

26 Şubat 2016 tarihinde, Çanakkale Onsekiz Mart Üniversitesi‘nde sevgili arkadaşım Bora Kaşmer ile bir etkinlik organize ettik.

Ben de Microsoft Azure Servisleri ve Cross-Platform uygulama geliştirme frameworkleri başlıklı oturumlar ile bu etkinlikte konuşmacı olarak yeraldım.

Etkinliği birlikte organize ettiğimiz sevgili arkadaşım Bora Kaşmer‘e ve etkinliğe katılan tüm arkadaşlara teşekkür ederim.

Engin Polat hakkında

Senior Software Engineer, @Microsoft

Ada ve Ege'nin babası ;)

Seriler

Kategoriler

Arşiv

İstatistik

Makale Adedi: 484

Creative Commons Lisansı